html,body
			{
				margin: 0;
				padding: 0;
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: small;
				color:#000000;
				background-color: #CCCCCC;
			}

			#header{
				 height: 72px;
				 background-image: url(images/header.gif);
				 background-repeat: no-repeat;
			 }
			 
			 #header_home{
				 height: 68px;
				 background-image: url(images/header_home.gif);
				 background-repeat: no-repeat;
			 }



			#container{
				margin: 0px auto;
				background-color: #CDE7F4;
				background-image: url(images/bg_container.gif);
				background-repeat: repeat-y;
				width: 787px;
				position: relative;
				top: 0px;
			}

			#container2{
				margin: 0px auto;
				width: 775px;
				position: relative;
				background-image: url(images/watermark.jpg); 
				background-repeat: no-repeat;
				background-position: top left;
				top: 0px;
			}
			
			#container_home{
				margin: 0px auto;
				background-color: #CDE7F4;
				width: 787px;
				position: relative;
				top: 0px;
			}


			#col-one{
				position: absolute;
				top: 72px;
				left: 0px;
				width: 142px;
				height: 450px;
				margin: 0px;
				padding: 50px 0 0 10px;
				z-index: 1;
				background-image: url(images/navbar_bg.gif);
				background-repeat: no-repeat;
		 	}
			
			#col-one_home1{
				position: absolute;
				top: 236px;
				left: 6px;
				width: 200px;
				height: 276px;
				margin: 0px;
				padding: 0px;
				z-index: 1;
		 	}
			
			#col-one_home2{
				position: absolute;
				top: 144px;
				left: 570px;
				width: 200px;
				height: 395px;
				margin: 0px;
				padding: 0px;
				z-index: 1;
		 	}

			#col-two{  /* For Mozilla etc */
				 top: 0px;
				 margin:  0px 20px 0px 165px;
				 padding: 0px 0px 0px 0px;
				 position :relative;
				 min-height: 500px; /* IE doesn't understand min-height, but other browsers do */
			 }
			
			* html #col-two{   /* IE ignores the * html so sees this as #col-two */
				 top: 0px;
				 margin:  0px 20px 0px 165px;
				 padding: 0px 0px 0px 0px;
				 position :relative;
				 height: 500px;  /* IE thinks height means min-height */
			 }
			 
			 #main_home {
				 top: 0;
				 margin: 0;
				 padding: 0;
				 position:relative;
				 background-image: url(images/bg_home.gif);
				 background-repeat: no-repeat;
				 height: 518px;
			 }

			#footer {
				height: 61px;
				background-image:url(images/footer.gif);
				background-repeat:no-repeat;
				clear:both;
			}
			
			
			#randoms {z-index:100;} /* Container in which on refresh image generator sits */

				/* Styles for Page Title Images. */
			
			.indent_title {text-indent: -5000px; } /* To force text off screen, leaving image behind */
			.title_wrapper {margin-left: 33%; margin-bottom: 10px;} /* To try and pull titles into the centre of the page and control the space between title and body text */
			
				#title_calendar
			{
				height: 35px;
				background: url(images/titles/calendar.gif) no-repeat;
			}
			
				#title_classpages
			{
				height: 35px;
				background: url(images/titles/classpages.gif) no-repeat;
			}
			
				#title_clubs
			{
				height: 35px;
				background: url(images/titles/clubs.gif) no-repeat;
			}
			
				#title_contact
			{
				height: 35px;
				background: url(images/titles/contact.gif) no-repeat;
			}
			
				#title_curriculum
			{
				height: 35px;
				background: url(images/titles/curriculum.gif) no-repeat;
			}
			
				#title_gallery
			{
				height: 35px;
				background: url(images/titles/gallery.gif) no-repeat;
			}
			
				#title_governors
			{
				height: 35px;
				background: url(images/titles/governors.gif) no-repeat;
			}
			
				#title_guestbook
			{
				height: 35px;
				background: url(images/titles/guestbook.gif) no-repeat;
			}
			
				#title_keyinfo
			{
				height: 35px;
				background: url(images/titles/keyinfo.gif) no-repeat;
			}
			
				#title_kidszone
			{
				height: 35px;
				background: url(images/titles/kidszone.gif) no-repeat;
			}
			
				#title_letters
			{
				height: 35px;
				background: url(images/titles/letters.gif) no-repeat;
			}
			
				#title_news
			{
				height: 35px;
				background: url(images/titles/news.gif) no-repeat;
			}
			
				#title_newsletters
			{
				height: 35px;
				background: url(images/titles/newsletters.gif) no-repeat;
			}
			
				#title_parents
			{
				height: 35px;
				background: url(images/titles/parents.gif) no-repeat;
			}
			
				#title_pta
			{
				height: 35px;
				background: url(images/titles/pta.gif) no-repeat;
			}
			
				#title_staff
			{
				height: 35px;
				background: url(images/titles/staff.gif) no-repeat;
			}
			
				#title_tour
			{
				height: 35px;
				background: url(images/titles/tour.gif) no-repeat;
			}
			
				#title_welcome 
			{
				height: 35px;
				background: url(images/titles/welcome.gif) no-repeat;
			}
			
				#title_whoswho
			{
				height: 35px;
				background: url(images/titles/whoswho.gif) no-repeat;
			}
			
				#title_yeargroups
			{
				height: 35px;
				background: url(images/titles/yeargroups.gif) no-repeat;
			}
				#title_council
			{
				height: 45px;
				background: url(images/titles/council.gif) no-repeat top center;
			}
			
			
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


/* (2) Accesability */

/* These elements are used to help make the site accessible. These are used to provide additional textual information for screen readers 
and non css browsers etc. Nb where images can't really be used to their full effect, or get messed up, or are invisible we need to provide the visitor with this information as text. 			
			
				.hiddentext is used to hide items. For accessibility purposes we may need to include items which spoil the design.
				For example, we can use it to hide text links from within visuals. Visitors can still click on these visuals to navigate 
				to the page in question, but will not see the text link. For those who have turned off visuals, or disabled CSS this
				text will become visable, so people will still be able to navigate the site */

			.hiddentext{
			display: none;
			}

				/* This is used to hide access key information from visitors. There is an access information page to inform visitors
				of the accesskeys which the site uses. However, for those with screen readers these keys will become visible. */
				
			.accesstext {
			display: none;
			}

				/* If you wish to display access key information as part of the link, please use this style. */
			
			.accesskeyline {
			text-decoration: underline;
			}

				/* Hides the title from within the header, so that those with a text reader
				can still know what the page is about */
				
			.hiddenheadtext {
			display: none;
			}

				/* Hidden skip button. This is used to style a link that will skip the navigation, going straight to the main content. 
				Visable on text readers etc, but not apparent when viewing on normally */
				
			#skip a, #skip a:hover, #skip a:visited  { 
			 position: absolute; 
			 left: 0px; 
			 top: -500px; 
			 width:1px; 
			 height: 1px; 
			 overflow: hidden;
			 } 
			  
			 #skip a:active { 
			 position: static; 
			 width: auto; 
			 height: auto; 
			 } 

			#wai_logo img {border:none;} /* To remove border from WAI logo */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* (3) General Navigation */

				/* Styles for hyperlinks */

			a {
				text-decoration: none;
				color: #FF3300;
			}
			
			a:hover {
				text-decoration: none;
				color: #00CC00;
			}
			
				/* Styles for links at the bottom of the page  */
			
			#bottomlinks {
				color: #FFFFFF;
				font-weight: bold;
			}
			
			
			#bottomlinks a{
				text-decoration: none;
				color: #FFFFFF;
				padding-left: 5px;
				border-left: 2px solid #FFFFFF;
			}
					
			#bottomlinks a:hover{
				text-decoration: none;
				color: #CC0000;
			}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* (4) For the Main Navigation */

				/* Two generic styles are provided. The 1st is for a straight list, the second is for a list based on pop up menus.
				Please comment out the styles you do not wish to use.
				
				1. This is used to style the main navigation 
				It utilises a list, and has a background image which is positioned to the left of the text
				*/
				
			#nav {
				padding: 0;
				margin: 0;
				font-family: "Comic Sans MS", Verdana, Arial;
				font-size: small;
				font-weight: bold;
				}

			* html #nav {
				width: 142px;
				padding: 0;
				margin: 0;
				font-family: "Comic Sans MS", Verdana, Arial;
				font-size: small;
				font-weight: bold;
				}
				
		
			#nav ul {
				list-style: none;
				margin: 0;
				padding: 0;
				}
				
			#nav li {
			    list-style: none;
				padding: 0;
				margin: 0;
				margin-top: 2px;
				}

			#nav li a {
				display: block;
				padding: 2px 0px 2px 2em;
				color: #FFFFFF;				
				background-image: url(images/up.gif);
				background-repeat: no-repeat;
				background-position: top left;
				font-weight: bold;
				text-decoration: none;
				width: 85%;
				}
		
			html>body #nav li a {
				width: auto;
				}
		
			#nav li a:hover {
				color: #FFFF00;
				background-image: url(images/over.gif);
				background-repeat: no-repeat;
				background-position: top left;
				}
		
		
			#col-one li:hover ul, #col-one li.over ul { 
				color: #FFFFFF;
				display: block; 
			}
			
			#col-one .navhide {visibility: hidden;}
			
			
/* Home Navigation */


			.navhome {
				padding: 0;
				margin: 0;
				font-family: "Comic Sans MS", Verdana, Arial;
				font-size: small;
				font-weight: bold;
				line-height: 36px;
				}

			* html .navhome {
				width: 200px;
				padding: 0;
				margin: 0;
				font-family: "Comic Sans MS", Verdana, Arial;
				font-weight: bold;
				line-height: 36px;
				font-size: x-small; /* for IE5/Win */
				voice-family: "\"}\"";
				voice-family: inherit;
				font-size: small; /* Actual Value */
				}
				
		
			#col-one_home1 ul {
				list-style: none;
				margin: 0;
				padding: 0;
				text-align: left;
				}
				
			#col-one_home2 ul {
				list-style: none;
				margin: 0;
				padding: 0;
				text-align: right;
				}

			.navhome li {
			    list-style: none;
				padding: 0;
				margin: 0;
				margin-top: 0px;
				}

			#col-one_home1 li a {
				display: block;
				padding: 2px 0px 2px 10px;
				color: #FFFFFF;				
				font-weight: bold;
				text-decoration: none;
				width: 100%;
				}
				
			#col-one_home2 li a {
				display: block;
				padding: 2px 10px 2px 0px;
				color: #FFFFFF;				
				font-weight: bold;
				text-decoration: none;
				width: 100%;
				}
		
			html>body .navhome li a {
				width: auto;
				}
		
			#col-one_home2 li a:hover {
				color: #FFFF00;
				}
				
			#col-one_home1 li a:hover {
				color: #FFFF00;
				}
				
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */				
/* Home elements */		

#welcome_message {
				position: absolute;
				top: 87px;
				left: 244px;
				width: 238px;
				height: 83px;
				margin: 0px;
				padding: 0px;
				z-index: 1;
				font-size: small;
				font-weight: bold;
				color: #CC0000;
				text-align: center;
}

#latest_news {
				position: absolute;
				top: 451px;
				left: 428px;
				width: 235px;
				height: 113px;
				margin: 0px;
				padding: 0px;
				z-index: 1;
				color: #FFFFFF;
				text-align: center;
}
#latest_news a {
color: #FFFF00;
}

#latest_news a:hover {
color: #FFCC33;
}

#slideshow {
				position: absolute;
				top: 179px;
				left: 223px;
				width: 346px;
				height: 236px;
				margin: 0px;
				padding: 0px;
				z-index: 1;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* (6) Kids' Zone */

				/*These provide styles for the Kids' Zone Rollovers.
				
				However, in this instance we do not wish to hide the text links, as the the images do not
				contain any text themselves. So this time we use .ktext to position the text at the base of the
				image. This way we get accesability, and aesthetics! :-) */

	
	.BackTO {text-align:left; font-weight:bold; padding-top:10px; } /* To style "back to" text */
	#IframeHolder {padding-top: 20px;} /*To reposition kidszone iframe if needed */
	
	

.kzh2 {
color: #CC1011;
text-align: center;
}

	
	#kidsbgbox
	{background-image:url(images/kidszoneimages/kidsbg.gif); background-repeat:no-repeat; width: 454px; height:322px; margin:0 auto;}
	
	
			.ktext{
				font-weight: bold;
				font-size: medium;
				display:none;
				z-index:0;
				}


		div#games_links {
		    position: absolute;
		    top: 51px;
		    left: 328px;
		    width: 236px;
		    height: 39px;
			}
			
			div#games a {
		    position: absolute;
		    top: 77px;
		    left: 56px;
		    width: 125px;
		    height: 87px;
		    display: block;
		    background: url(images/kidszoneimages/games.gif) no-repeat;
		    overflow: hidden;
			}
		div#games a:hover {
		    background-position: -125px 0;
			} 

		
		div#brainbuilders_links {
		    position: absolute;
		    top: 51px;
		    left: 328px;
		    width: 236px;
		    height: 39px;
			}
			
			div#brainbuilders a {
		    position: absolute;
		    top: 76px;
		    left: 236px;
		    width: 125px;
		    height: 87px;
		    display: block;
		    background: url(images/kidszoneimages/brainbuilders.gif) no-repeat;
		    overflow: hidden;
			}
		div#brainbuilders a:hover {
		    background-position: -125px 0;
			} 

div#ks1 a {
		    position: absolute;
		    top: 78px;
		    left: 409px;
		    width: 125px;
		    height: 87px;
		    display: block;
		    background: url(images/kidszoneimages/ks1.gif) no-repeat;
		    overflow: hidden;
			}		
		div#ks1 a:hover {
		    background-position: -125px 0;
			} 

		div#ks2 a {
            position: absolute;
		    top: 191px;
		    left: 55px;
		    width: 125px;
		    height: 87px;
		    display: block;
		    background: url(images/kidszoneimages/ks2.gif) no-repeat;
		    overflow: hidden;
			}		
		div#ks2 a:hover {
		    background-position: -125px 0;
			} 

		div#english a {
		    position: absolute;
		    top: 199px;
		    left: 236px;
		    width: 125px;
		    height: 87px;
		    display: block;
		    background: url(images/kidszoneimages/english.gif) no-repeat;
		    overflow: hidden;
			}
		div#english a:hover {
		    background-position: -125px 0;
			} 

		div#history a {
		    position: absolute;
		    top: 312px;
		    left: 327px;
		    width: 125px;
		    height: 87px;
		    display: block;
		    background: url(images/kidszoneimages/history.gif) no-repeat;
		    overflow: hidden;
			}	
		div#history a:hover {
		    background-position: -125px 0;
			} 

		div#science a {
		    position: absolute;
		    top: 306px;
		    left: 142px;
		    width: 125px;
		    height: 87px;
		    display: block;
		    background: url(images/kidszoneimages/science.gif) no-repeat;
		    overflow: hidden;
			}	
		div#science a:hover {
		    background-position: -125px 0;
			} 

		div#maths a {
		    position: absolute;
		    top: 201px;
		    left: 410px;
		    width: 125px;
		    height: 87px;
		    display: block;
		    background: url(images/kidszoneimages/maths.gif) no-repeat;
		    overflow: hidden;
			}	
		div#maths a:hover {
		    background-position: -125px 0;
			}
		



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* (7) Classpages */

			/* .Again, these are used to provide rollovers for the classs / yeargroup pages. 
			These images sit in a class called .flaotleft so that we can get
			them to sit in the page properly */

	
	
#classbox li{
text-indent: -5000px;
text-decoration: none;
list-style: none;
float: left;
margin: 2px;
}

.class1 a {
width: 178px;
height: 85px;
display: block;
background: url(images/classicon1.gif) no-repeat;
overflow: hidden;
font-weight: bold;
}
.class1 a:hover {
background-position: -178px 0;
} 
.class2 a {
width: 178px;
height: 85px;
display: block;
background: url(images/classicon2.gif) no-repeat;
overflow: hidden;
font-weight: bold;
}
.class2 a:hover {
background-position: -178px 0;
} 

.class3 a {
width: 178px;
height: 85px;
display: block;
background: url(images/classicon3.gif) no-repeat;
overflow: hidden;
font-weight: bold;
}
.class3 a:hover {
background-position: -178px 0;
} 
.class4 a {
width: 178px;
height: 85px;
display: block;
background: url(images/classicon4.gif) no-repeat;
overflow: hidden;
font-weight: bold;
}
.class4 a:hover {
background-position: -178px 0;
}
.class5 a {
width: 178px;
height: 85px;
display: block;
background: url(images/classicon5.gif) no-repeat;
overflow: hidden;
font-weight: bold;
}
.class5 a:hover {
background-position: -178px 0;
}
.class6 a {
width: 178px;
height: 85px;
display: block;
background: url(images/classicon6.gif) no-repeat;
overflow: hidden;
font-weight: bold;
}
.class6 a:hover {
background-position: -178px 0;
}
.class7 a {
width: 178px;
height: 85px;
display: block;
background: url(images/classicon7.gif) no-repeat;
overflow: hidden;
font-weight: bold;
}
.class7 a:hover {
background-position: -178px 0;
}
.class8 a {
width: 90px;
height: 50px;
display: block;
background: url(images/classicon8.gif) no-repeat;
overflow: hidden;
font-weight: bold;
}
.class8 a:hover {
background-position: -178px 0;
}
	
	
	
	
	
	
	
	
/*-------------------------------------------------- */

.sectionheading {
color: #006600;
}