@import url(../styles/list_nav.css);

/*(1)  General Page layout */ 

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

#header{
height: 177px;
}

#container{
margin: 0px auto;
width: 785px;
position: relative;
top: 0px;
border:1px solid #006699;
background-color:#FFFFFF;
}

#container_home{
margin: 0px auto;
width: 785px;
position: relative;
background-image: url(../images/home-back.jpg); 
background-repeat: no-repeat;
background-position: top left;
top: 0px;
}

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

#col-one{
position: absolute;
top: 177px;
left: 0px;
width: 162px;
margin: 0px 0px 0px 0px;
padding: 0px;
padding-top: 10px;
height: 450px;
}

#col-one_home{
position: absolute;
top: 177px;
left: 0px;
width: 162px;
margin: 0px 0px 0px 0px;
padding: 0px;
padding-top: 10px;
height: 450px;
}

#col-two{ 
top: -95px;
margin:  0px 15px 20px 185px;
padding: 0px 0px 0px 0px;
position: relative;
min-height: 480px;
margin-bottom:-95px; 
}

#col-two_home{ 
top: 0px;
margin:  0px 15px 20px 165px;
padding: 0px 0px 0px 0px;
position: relative;
min-height: 380px; 
}

#footer{
height: 10px;
clear: both;
}

#randoms{
z-index: 100;
}

/*(2) Page Titles 

I've created styles for the basic set of pages. For additional page titles, please add to these styles, following the same syntax.
Firstly we declare the images that each title will use - I've kept it alphabetical so they are easy to find */


#title_calendar{
background: url(../images/titles/calendar.gif) no-repeat;
}
#title_classpages{
background: url(../images/titles/classpages.gif) no-repeat;
}
#title_clubs{
background: url(../images/titles/clubs.gif) no-repeat;
}




#title_curriculum{
background: url(../images/titles/curriculum.gif) no-repeat;
}
#title_english{
background: url(../images/titles/english.gif) no-repeat;
}
#title_memories{
background: url(../images/titles/memories.gif) no-repeat;
}
#title_gallery{
background: url(../images/titles/gallery.gif) no-repeat;
}
#title_games{
background: url(../images/titles/games.gif) no-repeat;
}
#title_governors{
background: url(../images/titles/governors.gif) no-repeat;
}
#title_guestbook{
background: url(../images/titles/guestbook.gif) no-repeat;
}
#title_history{
background: url(../images/titles/history.gif) no-repeat;
}
#title_ourschool{
background: url(../images/titles/ourschool.gif) no-repeat;
}
#title_kidszone{
background: url(../images/titles/kidszone.gif) no-repeat;
}

#title_brain{
background: url(../images/titles/kidszone.gif) no-repeat;
}


#title_ks1links{
background: url(../images/titles/ks1links.gif) no-repeat;
}
#title_ks2links{
background: url(../images/titles/ks2links.gif) no-repeat;
}
#title_lettershome{
background: url(../images/titles/lettershome.gif) no-repeat;
}
#title_maths{
background: url(../images/titles/maths.gif) no-repeat;
}
#title_news{
background: url(../images/titles/news.gif) no-repeat;
}
#title_newsflash{
background: url(../images/titles/newsflash.gif) no-repeat;
}

#title_pta{
background: url(../images/titles/pta.gif) no-repeat;
}
#title_science{
background: url(../images/titles/science.gif) no-repeat;
}
#title_teachers{
background: url(../images/titles/teachers.gif) no-repeat;
}
#title_tour{
background: url(../images/titles/tour.gif) no-repeat;
}
#title_welcome{
background: url(../images/titles/welcome.gif) no-repeat;
}
#title_whoswho{
background: url(../images/titles/whowhos.gif) no-repeat;
}

/* Then we add the positional declarations:

The syntax is as follows:

In the Xhtml:

<h2 id=title_welcome> Welcome </h2>

In the CSS:

height = height of your widest image,
width =  width of your largest image,
margin = 0 auto to center the box in which our title sits.
text-align = center / left / right etc depending on where you wish the text to show,
text-indent = -5000px if you want to push the text off the screen, and only have the image showing.
background-image = set this to none if you dont want background images to show (but dont forget to remove the text-indent else nothing will show up).
*/


#title_calendar,
#title_classpages,
#title_clubs,
#title_contact,
#title_curriculum,
#title_english,
#title_memories,
#title_newsflash,
#title_gallery,
#title_games,
#title_governors,
#title_guestbook,
#title_history,
#title_ourschool,
#title_kidszone,
#title_ks1links,
#title_ks2links,
#title_letters,
#title_maths,
#title_news,
#title_newsletters,
#title_parents,
#title_pta,
#title_science,
#title_teachers,
#title_tour,
#title_welcome,
#title_whoswho
{height: 40px; 
text-align:left; 
width: 212px; 
text-indent: -5000px;}



/* (3)  Accessibility and General Navigation 

Here are some styles which are used in conjunction with the alternative style sheets for accessibility purposes.
Something to note:
visibility: hidden will hide content (it will still take up the same space, just wont be visible), while, display: none, will remove it from the flow. 
*/

.hide {visibility: hidden;} /* To hide something from all views */
.hide_default {display: none;} /* To hide something from default view */

#loginbox{
text-align: center;
padding: 5px;
}

/* .key is used to style the accesskey text.*/

.key{
display: none;
}


#wai_logo img {border: none;} /* If you're satisfied that the site conforms to WAI standards, drop in a link , 
and remove the image border with this. */



/* For links to work as link, visited, focus, and hover , they must be in this order.. please change the colours to suit */

a:link{
color: #0066FF;
text-decoration: none;
}
a:visited {
color:#0066FF;
text-decoration: none;
}
a:focus{
color:#0066FF;
text-decoration: none;
border: none;
}
a:hover{
color: #FF6600;
text-decoration: underline;
}
a:active{
color: #FF6600;
text-decoration: none;
}

/* Styles for links at the bottom of the page */

#bottomlinks {text-align:center;} /* Because we want these to be in the middle */

#bottomlinks ul li{
color: #000000;
list-style-type: none;
display: inline;
height: 2em;
padding-left:3px;
}
#bottomlinks a{
text-decoration: none;
color: #000000;
border-bottom: 1px solid #000000;

}
#bottomlinks a:hover{
color:#FF0000;
}


/* (4)  Home page elements */

/* #fader is a container for the fading image slideshow. 
Please make it the width and height of your images. For info on how to use the fader please see the documentation*/
#fader{
position: absolute;
left: 0px;
top: 0px;
width: 266px;
height: 194px;
overflow: hidden;
}

/* #newsbox acts as a container for the news */
#newsbox{
position: absolute;
top: 0px;
left: 0px;
background-image: url(../images/newsbox.gif);
background-repeat: no-repeat;
width: 200px;
height: 200px;
color: #000000;
text-align: center;
}

#newsbox a{
color: #990000;
}
#newsbox a:hover{
color: #990000;
}

/* #hometext contains the welcome message */
#hometext{
position: absolute;
left: 0px;
top: 0px;
width: 500px;
text-align: center;
}

/* #diarydatesbox acts as a 
container for the homepage calendar */
#diarydatesbox{
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 300px;
}

#hitcountbox{
position: absolute;
width: 150px;
height: 100px;
left: 502px;
top: 344px;
}

/* Teasers */

#teaserbox ul li { display: inline; padding: 0; list-style-type: none;}

li.classpageshome a{
position: absolute;
width: 100px;
height: 100px;
display: block;
background: url(../images/teasers/classpages.gif) no-repeat;
overflow: hidden;
left: 0px;
top: 0px;
text-indent: -5000px;
}
li.classpageshome a:hover{
background-position: -100px 0;
} 

li.tourhome a{
position: absolute;
width: 100px;
height: 100px;
display: block;
background: url(../images/teasers/tour.gif) no-repeat;
overflow: hidden;
left: 0px;
top: 0px;
text-indent: -5000px;
}
li.tourhome a:hover{
background-position: -100px 0;
} 

li.galleryhome a{
position: absolute;
width: 100px;
height: 100px;
display: block;
background: url(../images/teasers/gallery.gif) no-repeat;
overflow: hidden;
left: 0px;
top: 0px;
text-indent: -5000px;
}
li.galleryhome a:hover{
background-position: -100px 0;
} 

li.kidszonehome a{
position: absolute;
width: 100px;
height: 100px;
display: block;
background: url(../images/teasers/kidszone.gif) no-repeat;
overflow: hidden;
left: 0px;
top: 0px;
text-indent: -5000px;
}

li.kidszonehome a:hover{
background-position: -100px 0;
} 


/* (5) Kids' Zone */

/* To style "back to" text */
.back_to{
text-align: left;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
} 

#kidsbgbox{
width: 454px;
height: 322px; 
margin: 0 auto;
}

#kidsbgbox ul li { display: inline; padding: 0; list-style-type: none;}


li.english a{
	position: absolute;
	width: 242px;
	height: 54px;
	display: block;
	background: url(../images/kidszoneimages/english.gif) no-repeat;
	overflow: hidden;
	font-weight: bold;
	left: 148px;
	top: 206px;
	text-indent: -5000px;
}
li.english a:hover{
background-position: -240px 0;
} 

li.history a{
	position: absolute;
	width: 240px;
	height: 54px;
	display: block;
	background: url(../images/kidszoneimages/history.gif) no-repeat;
	overflow: hidden;
	font-weight: bold;
	left: 150px;
	top: 374px;
	text-indent: -5000px;
}
li.history a:hover{
background-position: -240px 0;
} 

li.science a{
	position: absolute;
	width: 240px;
	height: 54px;
	display: block;
	background: url(../images/kidszoneimages/science.gif) no-repeat;
	overflow: hidden;
	font-weight: bold;
	left: 148px;
	top: 318px;
	text-indent: -5000px;
}
li.science a:hover{
background-position: -240px 0;
} 

li.maths a{
	position: absolute;
	width: 240px;
	height: 54px;
	display: block;
	background: url(../images/kidszoneimages/maths.gif) no-repeat;
	overflow: hidden;
	font-weight: bold;
	left: 148px;
	top: 262px;
	text-indent: -5000px;
}
li.maths a:hover{
background-position: -240px 0;
} 

li.games a{
	position: absolute;
	width: 240px;
	height: 54px;
	display: block;
	background: url(../images/kidszoneimages/games.gif) no-repeat;
	overflow: hidden;
	font-weight: bold;
	left: 147px;
	top: 96px;
	text-indent: -5000px;
}
li.games a:hover{
background-position: -240px 0;
} 

li.ks2links a{
	position: absolute;
	width: 240px;
	height: 54px;
	display: block;
	background: url(../images/kidszoneimages/ks2links.gif) no-repeat;
	overflow: hidden;
	font-weight: bold;
	left: 148px;
	top: 151px;
	text-indent: -5000px;
}
li.ks2links a:hover{
background-position: -240px 0;
}

li.brain a{
	position: absolute;
	width: 240px;
	height: 54px;
	display: block;
	background: url(../images/kidszoneimages/brain.gif) no-repeat;
	overflow: hidden;
	font-weight: bold;
	left: 148px;
	top: 430px;
	text-indent: -5000px;
}
li.brain a:hover{
background-position: -240px 0;
}

/* (6)  Classpages and Year Groups */

#classbgbox {} /* For classpage background image, and also used to force height on classpage */

#classbgbox ul li { display: inline; padding: 0; list-style-type: none;}

li.nursery a {
width: 100px;
height: 100px;
display: block;
background: url(../images/classpages/nursery.gif) no-repeat;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
text-indent: -5000px;
}
li.nursery a:hover {
background-position: -100px 0;
}

li.foundation a {
width: 100px;
height: 100px;
display: block;
background: url(../images/classpages/foundation.gif) no-repeat;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
text-indent: -5000px;
}
li.foundation a:hover {
background-position: -100px 0;
}

li.foundation1 a {
width: 100px;
height: 100px;
display: block;
background: url(../images/classpages/foundation1.gif) no-repeat;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
text-indent: -5000px;
}
li.foundation1 a:hover {
background-position: -100px 0;
}

li.foundation2 a {
width: 100px;
height: 100px;
display: block;
background: url(../images/classpages/foundation2.gif) no-repeat;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
text-indent: -5000px;
}
li.foundation2 a:hover {
background-position: -100px 0;
}

li.foundation3 a {
width: 100px;
height: 100px;
display: block;
background: url(../images/classpages/foundation3.gif) no-repeat;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
text-indent: -5000px;
}
li.foundation3 a:hover {
background-position: -100px 0;
}

li.reception a {
width: 100px;
height: 100px;
display: block;
background: url(../images/classpages/reception.gif) no-repeat;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
text-indent: -5000px;
}
li.reception a:hover {
background-position: -100px 0;
}

li.year1 a {
width: 100px;
height: 100px;
display: block;
background: url(../images/classpages/year1.gif) no-repeat;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
text-indent: -5000px;
}
li.year1 a:hover {
background-position: -100px 0;
} 

li.year2 a {
width: 100px;
height: 100px;
display: block;
background: url(../images/classpages/year2.gif) no-repeat;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
text-indent: -5000px;
}
li.year2 a:hover {
background-position: -100px 0;
} 

li.year3 a {
width: 100px;
height: 100px;
display: block;
background: url(../images/classpages/year3.gif) no-repeat;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
text-indent: -5000px;
}
li.year3 a:hover {
background-position: -100px 0;
}

li.year4 a {
width: 100px;
height: 100px;
display: block;
background: url(../images/classpages/year4.gif) no-repeat;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
text-indent: -5000px;
}
li.year4 a:hover {
background-position: -100px 0;
}
li.year5 a {
width: 100px;
height: 100px;
display: block;
background: url(../images/classpages/year5.gif) no-repeat;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
text-indent: -5000px;
}
li.year5 a:hover {
background-position: -100px 0;
}

li.year6 a {
width: 100px;
height: 100px;
display: block;
background: url(../images/classpages/year6.gif) no-repeat;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
text-indent: -5000px;
}
li.year6 a:hover {
background-position: -100px 0;
}

li.year7 a {
width: 100px;
height: 100px;
display: block;
background: url(../images/classpages/year7.gif) no-repeat;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
text-indent: -5000px;
}
li.year7 a:hover {
background-position: -100px 0;
}

li.year8 a {
width: 100px;
height: 100px;
display: block;
background: url(../images/classpages/year8.gif) no-repeat;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
text-indent: -5000px;
}
li.year8 a:hover {
background-position: -100px 0;
}

/* (7) Primarysite CMS specific styles */

.sectionheading {
color: #009900;
}

#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;
}

/* For the SiteMap */
#sitemap ul li a {font-weight: normal; background-image: none; text-indent: 0px; position: relative; width: 100%; height: 100%;} !important;