/* Body begins here */
body{
	 
	
background-image: url("purple.jpg");  

font-size: 18px; /* Specifies font size */
line-height: 22px;/* Specifies space around font */
font-family: Arial, Sans-serif, serif, Verdana; /* Specifying a font-family means that a font will be selected regardless of a computer's operating system (York, 2008, p171). Font-family and text-align will 
be inherited throughout (York, p122)*/
margin: 0 auto;
padding: 0;
max-width: 1024px;/*This sets the "outside limit of a liquid layout" (Castro, 2007, p 174) which was otherwise getting too wide *. A minimum width
has also been set. These are not supported by IE6 and earlier so a work around is needed (York, p265)*/
min-width: 780px;

	}
	 
	 #logo {
		 		 		 margin-left: 0px;
		 margin-top: 0px;
	 }
#header {
	margin: 0;
	padding: 0;

font-size: 1.2em; /* The em value makes the font appear 1.2 times larger than the 14px already specified in body (Andrew & Shafer, 2006, p 101)*/ 
letter-spacing: 0.03em;/*This increases the space between letters (Andrew & Shafer, 2006, p 126) */
font-style: oblique;
}
#slogan {
	 position: absolute;
left: 250px;
top: 50px; /* The values for the left and top position the slogan on the same line as the logo.*/	
}

/* This main div contains the left, right, content and footer. It is set at 100% to stretch the width of the screen. It also makes it a fluid column
and can therefore change to suit the user's screen. */ 
#main {	
position: relative;
top: 0;
width: 100%;
margin-top: 0px;
}
/*Styles for content.. */
#content { 
margin: 0 /* margin from top*/ 0px /*margin from right*/0 /*margin from bottom*/200px; /*margin from left*/
border: 10px solid #4a2885; /* purple*/
max-width: 1024px; 
padding: 9px;
background-color: #fef76e; /*mid yellow */
color: black;
}
/* Styles for the headings h3-h6 */
h3, h4, h5, h6 {
font-family: Arial, sans-serif, serif;
font-weight: bolder; 
font-style: italic;
color: #044476;
text-align: center;
margin-top: 2px;
margin-bottom: 10px;
padding: 2px 0 10px 0;
letter-spacing: 0.03em;
}
h1, h2 {
	text-align: center;
	margin-top: 15px;
margin-bottom: 10px;
padding: 2px 0 10px 0;
letter-spacing: 0.03em;

line-height: 1.2em;/* Specifies space around font */
}

	
/* The p and p. add style to the paragraphs, which have been broken up into classes to allow additional styling.*/
p {
margin-top: 5px;
}
p.right {
text-align: center;
font-size: 12px;
line-height: 16px;
font-weight: bold;
}
p.concept {
font-family: Arial, sans-serif, serif;
	font-weight: bold;
	margin-top: 2px;
margin-bottom: 10px;
padding: 2px 0 10px 0;
letter-spacing: 0.01em;
font-size: 20px;
line-height: 24px;
font-weight: bold;
}

p.quote {
		font-style: italic;
}
p.name {
		font-weight: bold;
}

#leftcolumn {
	position: absolute;
	font-size: 14px; /* Specifies font size */
line-height: 20px;/* Specifies space around font */
	top: 175px;
	left: 0;
	margin: 0;
	padding: 0;

	
}


#footer {
width: 100%;
margin-top: 10px;
padding: 2px;
margin-left: 300px;
font-size: 12px;
font-weight: bold;
clear: both; /*This is crucial to getting the footer to stay on the bottom of the layout, regardless of the length of any of the three columns.
	So the problem in Assignment 2 withe the footer was that it would fall at the bottom of the content, but not the left or right column if they were
	longer. The clear: both declaration means that the footer will clear the left and the right columns (Andrew & Shafer, p 239) */
}

/*-- Empty div, to keep pictures within the content area, instead of hanging below the border if there is not enough text */
div.spacer {
	clear: none;
	height: 21px;
}
/* Style for the images. These place padding and a border around the image and caption, it creates a frame. 
Floating the image allows text to wrap around it it is required (York, p280.  The margin-left and margin-right keep the images from sitting
on the content border. */
#imgleft {
	float: left;
	text-align: center;
	border: 5px solid #4a2885;
	/*border: 1px solid yellow;*/
padding: 20px 20px 0 20px;
margin-left: 5px;
margin-right: 10px;
background-color: white;/*white */
}

#imgright {
	float: right;
text-align: center;
background-color: white;
border: 5px solid #4a2885;
 /* border: 10px solid yellow;yellow*/
padding: 20px 20px 0px 20px;
margin-left: 10px;
margin-right: 5px;
}

#pagetitle {font-family: Arial, sans-serif, serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
color: #2d73b9;
letter-spacing: -0.09em; /* The negative value reduces the space between the letters */
}
/* Navigation Bar: With different text color and back-colour specified here, it produces a different coloured block when the cursor passes over each navigational
option - the rollover effect (Weakley, n.d.*/

#leftnav li {
list-style-type: none;/* Removes the bullet */
margin-right: 1px;
margin-top: 10px;
}

/* With the help of Castro, p192,  the addition of display, width and margin ensure the bar looks right */
#leftnav a {
display: block;
padding: 2px; 
width: 8em; 
margin: 2px;
}
#leftnav a:link{
color: #b7b7b7;/*silver*/
background-color: #4a2885; /*dark purple*/
border: 5px outset #9781b7; /* light purple*/
text-decoration: none;
}
/* The padding, combined with a back-ground colour, produce the navigation blocks (Weakley, n.d.) This occurs because padding is "extra
space around the contents of an element, but inside the border (Castro, p177). The use of dynamic pseudo-classes :link, :visited, :hover
and allow different colours to be applied so the website user knows which links he has used and where he currently is (York, p97).*/
#leftnav a:visited {
color: #ffff00; /* yellow*/
background-color: #bfb2d3; /*mid purple*/
border: 2px outset #5c3e90; /* dark purple*/
text-decoration: none;

}
#leftnav a:hover {
color:#f39e77; /*orange*/
background-color: #fcf64c; /*yellow*/
border: 2px outset #fffdda;
color: black;
text-decoration: none;
}