* { 

	padding: 0; margin: 0; 	


	} 	
	
/*margin and padding set to both zero, removing all padding and margins on the body, helping with browser compatibility */	

body {
	
 font-family:Verdana, Geneva, sans-serif;
 font-size: 12px;
 background-color:#333;
 
}

/*font family and size set, Verdana chosen for good visibility, 12px font fits well in the tables created */





body p {
	
	padding-left: 20px;
	padding-right:30px;
	
}

/* padding left and right set for the text in the body; better visibility and less clutter */




#wrapper { 
 margin: 0 auto;
 width: 922px;
 position:relative;

}

/*wrapper margin is set to 0 allowing the div to be centred, width of the div has been set along with the position set to relative; position relative to its normal position*/

#header {
	
 width: 900px;
 height: 284px;
 float: left;
 margin: 10px 0px 0px 0px;
 background-image:url(banner.png);
 background-repeat:no-repeat;
 
}

/*Header div defined, height and width set along with a float; left set, margin parameters have been set along with my header image*/

#leftcolumn {
	
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 764px;
 width: 200px;
 float: left;
 
}

/* leftcolumn div has been selected, with a thin 1px border set for a cleaner design. Background colour has also been given a colour value, along with another float left command positioning the div to the left. Width and height have been set along with a margin of 0px*/



#rightcolumn {
	
	
 float: right;
 background-image:url(final_background.png);
 background-repeat:no-repeat;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 800px;
 width: 678px;
 display: inline;
 text-align:left;
 
 
 
}

/*Rightcolumn div set, background image used for the content table, no repeat has been set, along with a padding of 10px from the leftcolum div. Height and width have been set with a display value of inline and the text align set to left*/

rightcolumn p {
	
	padding-right: 30px;
	padding-left: 30px;
	
	
}

/* padding on the p element has been set both left and right 30px to push the text away from the edges of the table, creating better space management and improved display */

#ad1

	{
	position:absolute;
	left: 54px;
	top: 645px;
	}
	
	/* Div has been created around the flash ad, giving it a position of absolute, giving it a position other than static, basically allowing the image to be moved with the top, left and right properties. When you have absolute positioning the element can be placed pretty much anywhere in the document. This allows you to have your content before your navigation structures, this can be  good for search engine optimisation. */
	
#lifelinebanner

	{
	position:absolute;
	left: 32px;
	top: 307px;
	width: 157px;
	height: 597px;
	}
	
	/* Again same applies as above, exactly the same properties have been set just different positions*/


#footer


{ 

 width: 922px;
 clear: both;
 color:#000;
 background-image:url(footer_menu.png);
 background-repeat:no-repeat;
 margin: 0px 0px 10px 0px;
 padding: 10px;
 font-size: 93%;
 line-height:normal;
 
}

/* Footer div has been defined, clear; both (no floating elements are to be placed on the left or right side) Background image as been set, along with padding of 10px between the links, font size this time has been set to 93% allowing text to fit inside the table, with a default line height*/


#footer ul {
	
	margin:0;
	list-style:none;
	padding-left: 400px;
	
}

/*footer un-ordered list has been styled. Set margin 0px, list-style none (removing the default bullets). With a padding left for 400px*/


#footer li {
	
	display:inline;
	margin:0;
	padding:0;
	font-size:9px;
	font-family:Georgia, "Times New Roman", Times, serif;
	
	
}

/* li items have been styled, display has been set to inline allowing the text to sit horizontal across the page, margin and padding set to 0, with font style and size selected. */


#footer a

{
	
	text-decoration:none;
	padding: 5px;
	
	
}

/* giving padding of 5px between each of the links, disable text decoration*/

a:link {
	
		color:#000
		
		}
		
/*Adding colour to link*/		
		
		
a:visited {
	
		color:#666;
		
		}
		
/*Defining colour for links that have been visited*/		
		
		
		
a:hover, a:active {
	
		color:#999;
		

}

/*Defining a colour for both hover and active links when clicked */
	


#menu {
	
	float:left;
	width:100%;
	font-size:93%;
	line-height:normal;
	margin-left: 135px;
	margin-top: -41px;
	padding-left 18px;
	
	
	}
	
/* Navigation Menu styled, pushed left with a complete width of 100%, font size has been defined with a border applied to the bottom at 1px solid*/	
	
#menu ul 

	{
		
	margin:0;
	padding:10px 10px 0 50px;
	list-style:none;
	
	}
	
/* Un-ordered list properties, margin set to 0; default with padding space set between each link to 10px, list sytle has been set to none, removing default bullet points*/

#menu li 

	{
		
	display:inline;
	margin:0;
	padding:0;
	
	}
	
/*Again li items changed, margin and padding set to default with inline display*/	
	
#menu a 

	{
	
	float:left;
	background:url(tableftF.gif) no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
	
	}
	
/*Elements have been defined for the background style of the tabs in the navigation menu*/	
	
#menu a span 

	{
		
	float:left;
	display:block;
	background:url(tabrightF.gif) no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#666;
	
	}
	
	#menu a:active  
	
	{
		background:url(tabrightF.gif) no-repeat right top;
		
	}
	
	#menu a.selected {
		background: transparent url(tableftF.gif) no-repeat left 67%;
	}
	
	#menu a.selected span {
		background: transparent url(tabrightF.gif) no-repeat right 67%;
		color: #FFFFFF;
	}
	
/*again more elements related to menu style, background image have been set with more padding, the display has been set to block as the menu style has been given a block box */


#firstparacontacts

				{
					
					width: 300px;
					height: 100px;
					
				}
				
/*Controlling the width and height of the first section of text, this div was created to separate the information underneath the different sub-headings*/				
				
#principalsimage {
	
	position:absolute;
	left: 601px;
	top: 438px;
}

#williampic {
	position:absolute;
	left: 14px;
	top: 320px;
}

#coursespic {
	position:absolute;
	left: 588px;
	top: 411px;
	height: 224px;
}

/*Separate divs for each of the images displayed on the site have been created. All have a position property set to absolute allowing the images to be moved easily on the site.*/


#googlemap {
	position:absolute;
	left: 253px;			
}

/* Specific div created for the embedded Google map, again its position was set to absolute*/
			
		
	
	
#menu a span {float:none;}
#menu a:hover span {color:#FFFFFF;}
#menu a:hover {background-position:0% -42px;}
#menu a:hover span {background-position:100% -42px;}

/*These parameters have been set for the hover action of the menu, allowing the blue colour to be highlighted when the mouse rolls over the tab */