/* PrimarySchool CSS v1.3 */

/* 
(c) 2006 Robert Willie.
April 8th 2006.
All Rights Reserved
This CSS cannot be resold, redistributed or reused without express permission.
Contact: robert_willie@hotmail.com
Author: Robert Willie

BEST VIEWED IN NOTEPAD ++  		http://notepad-plus.sourceforge.net/

Table of Contents 		

1. 	Main page layout			Line 27
2.	Accesability				Line 128
3.	General Site Navigation		Line 187
4.	For the Main Navigation		Line 221
5.	Home page elements			Line 278
6.	Kids' Zone					Line 390
7.	Classpages 					Line 501

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

/*(1) Main Page layout */

				/* General notes on background images 
				
				This CSS relies on a lot of background images for decrative purposes. You will need to change the properties of 
				the respective element to accomodate your own images.
				For example, if your image is 200px wide, by 100px high, you will need to change the width and height of the element so that
				this image can be accomodated.
				*/
				
			html,body
			{
				margin: 0;
				padding: 0;
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: small;
				color: #000099;
				background-repeat: repeat-x;
				background-image: url(images/bg_body.jpg);
				background-color: #BBF0FF;
			}
			#header{
				 height: 127px;
				 background-image: url(images/header.jpg);
				 background-repeat: no-repeat;
			 }

				/* #container and #container 2 are wrappers that contain col-one and col-two.
				Container contains the main graphics for the Y axis, while Container 2 allows you to position an additional graphic.
				For example, if you would like to have an image at the bottom of the page which extends further up than the footer.
				http://www.westfield-inf.leics.sch.uk/ uses this for the bear's head at the base of the navigation . */

			#container{
				margin: 0px auto;
				background-color: #FFFFFF;
                background-image: url(images/bg_container.gif);
				background-repeat: repeat-y;
				width: 750px;
				position: relative;
				top: 0px;
			}
			#container2{
				margin: 0px auto;
				background-image: url(images/watermark.gif);
				background-repeat: no-repeat;
				background-position: top left;
				width: 750px;
				position: relative;
				top: 0px;
			}
		
				/* #Col-one acts as the main navigation box. It is used with #col-two.
				#col-one and #col-two are the main content areas. #col-one is used to provide a smaller box, while #col-two is used to provide
				a bigger one. #col-one has absolute positioning, while #col-two is relative to the document. The only key thing to know about their
				usage is that the right margin on #col-two needs to be set with the width of #col-one in mind.
				For example:  #col-one is 100px wide, you will need to ensure that the left-margin on #col-two is greater than 100px */
			
			#col-one{
				position: absolute;
				top: 127px;
				left: 0px;
				width: 113px;
				height: 361px;
				margin: 0px;
				padding: 0px;
				z-index: 10;
		 	}
			#col-two-home{  /* For Mozilla etc */
				 margin-left: 113px;
				 margin-right: 0px;
				 padding: 0px;
				 position: relative;
				 background-image: url(images/home_bg.gif);
				 background-repeat: no-repeat;
				 min-height: 361px; /* IE doesn't understand min-height, but other browsers do */
			 }	
			* html #col-two-home{  /* IE ignores the * html so sees this as #col-two */
				 margin-left: 113px;
				 margin-right: 0px;
				 padding: 0px;
				 position: relative;
				 background-image: url(images/home_bg.gif);
				 background-repeat: no-repeat;
				 height: 361px;  /* IE thinks height means min-height */
			 }
			#col-two{  /* For Mozilla etc */
				 margin-left: 133px;
				 margin-right: 20px;
				 padding: 0px;
				 position: relative;
				 min-height: 361px; /* IE doesn't understand min-height, but other browsers do */
			 }	
			* html #col-two{  /* IE ignores the * html so sees this as #col-two */
				 margin-left: 133px;
				 margin-right: 20px;
				 padding: 0px;
				 position: relative;
				 height: 361px;  /* IE thinks height means min-height */
			 }
			 #footer-home {
				height: 44px;
				background-image: url(images/footer_home.gif);
				background-repeat: no-repeat;
				clear: both;
			}
			#footer {
				height: 78px;
				background-image: url(images/footer.gif);
				background-repeat: no-repeat;
				clear: both;
			}
			
				/* Styles for Page Title Images
				This sits in #col-two . Change the padding to increase or decrease white space 
				between your title image and content */

			#titleimage {
				padding-bottom: 0px;
				text-align: center;
			}
			
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* (2) Accessibility */

				/* These elements are used to help make the site
				accesable. 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 invisiable 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; 
			 } 
			 
#accesskeylist ul {
list-style: disc;
width: auto;
display: list-item;
}

#accesskeylist ul li {
position: relative;
float: none;
display: list-item;
height: auto;
}

#accesskeylist ul li a{
color: #CC00FF;
}

#accesskeylist ul li a:hover{
color: #6600CC;
}

#brwsecomp ul {
list-style: disc;
width: auto;
display: list-item;
}

#brwsecomp ul li {
position: relative;
float: none;
display: list-item;
height: auto;
}

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

/* (3) General Site Navigation */

			a {
				text-decoration:none;
				color: #FF0000;
			}	
			a:hover {
				text-decoration:none;
				color: #FF9900;
			}
			
				/* Styles for links at the bottom of the page - not strictly needed if main navigation is text based */
					
			#bottomlinks a{
				text-decoration: none;
				color: #0099FF;
				padding-left: 5px;
			}
					
			#bottomlinks a:hover{
				text-decoration:none;
				color: #FF9900;
			}


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

/* (4) For the Main Navigation (Pop-up menus version) */

/* Pop-up menu css first written by Steph O'Brien */

#navBar ul {list-style:none; position: relative; margin: 0; padding: 0;}
#navBar li  {position: relative;/*border-bottom: 1px solid #EEE;*/}

.home_button {
position: relative;
	background-image: url(../images/home.gif);
	background-repeat: no-repeat;
	height: 35px;
	margin-bottom: -3px;
	padding: 35px 0px 0px 40px;
	z-index: 15;
}
.ourschool_button {
position: relative;
	background-image: url(../images/ourschool.gif);
	background-repeat: no-repeat;
	height: 35px;
	margin-bottom: -3px;
	padding: 20px 0px 0px 35px;
	z-index: 14;
}
.news_button {
position: relative;
	background-image: url(../images/news.gif);
	background-repeat: no-repeat;
	height: 35px;
	margin-bottom: -3px;
	padding: 20px 0px 0px 40px;
	z-index: 13;
}
.children_button {
position: relative;
	background-image: url(../images/children.gif);
	background-repeat: no-repeat;
	height: 35px;
	margin-bottom: -3px;
	padding: 20px 0px 0px 40px;
	z-index: 12;
}
.community_button {
position: relative;
	background-image: url(../images/community.gif);
	background-repeat: no-repeat;
	height: 35px;
	margin-bottom: -3px;
	padding: 20px 0px 0px 30px;
	z-index: 11;
}
.guestbook_button {
position: relative;
	background-image: url(../images/guestbook.gif);
	background-repeat: no-repeat;
	height: 51px;
	padding: 20px 0px 0px 35px;
	z-index: 10;
}

html>body #navBar li {border-bottom: none;}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 113px;
	display: block;
	z-index: 10;
	/*border: 1px solid #000;*/
	}
ul li {
	position: relative;
	display: block;
	}
li ul {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 120px;
	display: none;
	z-index: 100;
	border: 1px solid black;
	background-color: #FF0000;
	}
ul li a {
	display: block;
	font-family: "Comic Sans MS", Verdana, Arial;
	font-size: small;
	color: #000099;
	font-weight: bold;
	z-index: 10;
	}
ul li a:hover {
    color: #00CC00;
    }
li ul a {
	padding-left: 2px;
	border: 1px solid #000;
	font-size: small;
	color: #FFFFFF;
	z-index: 100;
}
li ul a:hover {
    color: #000000;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul { 
    color: #FFFFFF;
	display: block; }
		
			
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* (5) Home page elements */

				/* #fader is used for the fading image slideshow */
				
       #welcome-message {
	       position:absolute;
	       left:49px;
	       top:59px;
	       width:271px;
	       height:92px;
	       z-index:1;
		   text-align: center;
		   font-family: "Comic Sans MS", Verdana, Arial;
		   line-height: 14pt;
		   font-size: medium;
        }
       #gallery_button a {
	       position:absolute;
	       left:388px;
	       top:63px;
	       width:84px;
	       height:40px;
		   display: block;
		   background-image:url(images/gallery_button.gif);
	       z-index:1;
        }		
       #kidszone_button a {
	       position:absolute;
	       left:530px;
	       top:172px;
	       width:50px;
	       height:39px;
		   background-image:url(images/kidszone_button.gif);
	       z-index:1;
        }
       #tour_button a {
	       position:absolute;
	       left:375px;
	       top:276px;
	       width:76px;
	       height:61px;
		   background-image:url(images/tour_button.gif);
	       z-index:1;
        }		
		#fader {
			position:absolute;
			left: 300px;
			top: 7px;
			width: 252px;
			height: 253px;
			z-index: 5;
			}

				/* #newsbox acts as a container for the news */
				
		#newsbox {
			position:absolute;
			
			top: 40px;
			left: 161px;
			width: 243px;
			height: 91px;
			z-index: 0;
			}

				/* #hometext is where the main copy text goes */
				
		#hometext {
			width: 560px;
			font-size:small;
			font-weight:bold;
			}


				/* #teasers is a container for all the teaser elements */
				
		#teasers {
			position: absolute;
			width: 235px;
			height: 291px;
			top: 154px;
			left: 4px;
			}

				/* Teaser Rollover images 
				
				I really like these - Rollovers without Javascript. Create an image, on the left hand side place your 
				normal state, on the right hand side place your over state. On the actiual item, set it so that only the
				left hand side is seen.Nb if the image is 400px wide, set the container to 200px. 
				
				On the hover property, just change the background position so that the right hand side of the
				image is shown. Nb if the image is 400px wide, and the container is 200px wide, set the background 
				image to -200px. 
				
				In the xhtml this appears as a text link - so just hide the link with the .hiddentext class above.
				
				NB in xHTML:
				
				<div id="galleryhome">
					<a href="gallery.asp" title="Gallery Button"><span class="hiddentext">Gallery</span></a>
				</div>
				
				This technique is used for all rollover images throughout the site.
				*/
				
				
		div#tourhome a {
		    width: 232px;
		    height: 103px;
		    display: block;
		    background: url(images/tourhome.gif) no-repeat;
		    overflow: hidden;
			}
			
		div#tourhome a:hover {
		    background-position: -232px 0;
			} 
	

		div#galleryhome a {
		    width: 232px;
		    height: 78px;
		    display: block;
		    background: url(images/galleryhome.gif) no-repeat;
		    overflow: hidden;
			}
			
		div#galleryhome a:hover {
		    background-position: -232px 0;
			} 


		div#kidszonehome a {
		    width: 232px;
		    height: 91px;
		    display: block;
		    background: url(images/kidszonehome.gif) no-repeat;
		    overflow: hidden;
			}
			
		div#kidszonehome a:hover {
		    background-position: -232px 0;
			} 


		#hitcountbox {
			position: absolute;
			width: 141px;
			height: 25px;
			left: -159px;
			top: 356px;
			}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* (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! :-) */

		.ktext{
			font-weight: bold;
			font-size: medium;
			padding-top: 153px;
			z-index:2;
			}


		div#games a {
		    position: absolute;
		    top: 84px;
		    left: 216px;
		    width: 175px;
		    height: 100px;
		    display: block;
		    background: url(images/kidszoneimages/games.gif) no-repeat;
		    overflow: hidden;
			font-weight: bold;
			}
		div#games a:hover {
		    background-position: -175px 0;
			} 

		div#ks1 a {
		    position: absolute;
		    top: 100px;
		    left: 26px;
		    width: 175px;
		    height: 100px;
		    display: block;
		    background: url(images/kidszoneimages/ks1.gif) no-repeat;
		    overflow: hidden;
			font-weight: bold;
			}		
		div#ks1 a:hover {
		    background-position: -175px 0;
			} 

		div#ks2 a {
            position: absolute;
		    top: 100px;
		    left: 407px;
		    width: 175px;
		    height: 100px;
		    display: block;
		    background: url(images/kidszoneimages/ks2.gif) no-repeat;
		    overflow: hidden;
			font-weight: bold;
			}		
		div#ks2 a:hover {
		    background-position: -175px 0;
			} 

		div#english a {
		    position: absolute;
		    top: 205px;
		    left: 27px;
		    width: 175px;
		    height: 100px;
		    display: block;
		    background: url(images/kidszoneimages/english.gif) no-repeat;
		    overflow: hidden;
			font-weight: bold;
			}
		div#english a:hover {
		    background-position: -175px 0;
			} 

		div#history a {
		    position: absolute;
		    top: 305px;
		    left: 130px;
		    width: 175px;
		    height: 100px;
		    display: block;
		    background: url(images/kidszoneimages/history.gif) no-repeat;
		    overflow: hidden;
			font-weight: bold;
			}	
		div#history a:hover {
		    background-position: -175px 0;
			} 

		div#science a {
		    position: absolute;
		    top: 189px;
		    left: 216px;
		    width: 175px;
		    height: 100px;
		    display: block;
		    background: url(images/kidszoneimages/science.gif) no-repeat;
		    overflow: hidden;
			font-weight: bold;
			}	
		div#science a:hover {
		    background-position: -175px 0;
			} 

		div#maths a {
		    position: absolute;
		    top: 205px;
		    left: 407px;
		    width: 175px;
		    height: 100px;
		    display: block;
		    background: url(images/kidszoneimages/maths.gif) no-repeat;
		    overflow: hidden;
			font-weight: bold;
			}	
		div#maths a:hover {
		    background-position: -175px 0;
			} 

div#brain a {
		    position: absolute;
		    top: 305px;
		    left: 320px;
		    width: 175px;
		    height: 100px;
		    display: block;
		    background: url(images/kidszoneimages/brain.gif) no-repeat;
		    overflow: hidden;
			font-weight: bold;
			}	
		div#brain a:hover {
		    background-position: -175px 0;
			} 

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

/* (7) Classpages */

			/* .Again, these are used to provide rollovers for the classs / yeargroup pages. The techniquie is the same as above
			but this time we use a single image for all rollovers, and these images sit in a class called .flaotleft so that we can get
			them to sit in the page properly */

		.classbox {
			margin: 0 auto;
			width: 420px;
			}

		.classfloatleft {
			float: left;
			padding-left: 2px;
			padding-right: 2px;
			height: 120px;
			}

		.classicon a {
		    width: 90px;
		    height: 50px;
		    display: block;
		    background: url(images/classicon.gif) no-repeat;
		    overflow: hidden;
			font-weight: bold;
			}
			
		.classicon a:hover {
		    background-position: -90px 0;
			} 

		.classicontext{
			font-weight: bold;
			font-size: medium;
			padding-top: 95px;
			z-index:2;
			}


/* GUESTBOOK COLOURS */


#Guestbook {
border: #42A0FF solid thick;
}
#Guestbook .sort{
background-color: #42A0FF;
}
#Guestbook .sort a{
color: #FFFF00;
}
#Guestbook .sort a:hover{
color:#FFFFFF;
}
#Guestbook .allowdeny {
color: #FFFF00;
background-color: #42A0FF;
}
#Guestbook .allowdeny a{
color: #FFFF00;
}
#Guestbook .allowdeny a:hover{
color:#FFFFFF;
}
#Guestbook .guest {
background-color: #FFED6F;
}
#Guestbook .message {
background-color: #FFFFFF;
}


/* STYLES FOR CALENDAR DATES ON HOMEPAGE */


#termevents .latesthomepage {
}
#termevents .datehome {
 margin-left: 10px;
 font-size: small;
 color: #000000;
 font-weight: bold;
}
#termevents .eventhome {
 margin-left: 10px;
 font-size: small;
 font-weight: normal;
}



/* SECTION HEADING COLOUR */



.sectionheading {
	color: #009900;
}
.MediaFloat{width:199px}