/* Generic Default CSS

SCHOOL NAME

PrimarySchool CSS v 2.2
Basic CSS Framework

(c) 2007 Robert Willie.
27 Feb 2007.
All Rights Reserved
This CSS cannot be resold, redistributed or reused without express permission.
Contact: rob@primarysite.net
Author: Robert Willie

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

Table of Contents 	

1. 	General page layout		
2.	Page Titles		
3.	Accessibility and General Navigation		
4.	Home page elements	
5.	Kids' Zone			
6.	Classpages
7.	Primarysite CMS specific styles
	
Tip: To quickly jump to a section, search for the section number in brackets. Nb. To jump to Page Titles, search for (2).


/* Navigation Styles 

Firstly we need to link to our nav type :-)
Delete the link to stylesheet that is not required - Edit the stylesheet that is required. */

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

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



/*(1)  General Page layout */ 

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


#header{
height: 163px;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
}

/* #container and #container2 are wrappers that contain col-one and col-two.

#container is for the main horizontal graphic that goes down the page (Y axis). 
The other containers are available so that you can place additional graphics such as a watermark, or an image at the bottom of the page that extends under the footer.
http://www.westfield-inf.leics.sch.uk/ uses this technique for the bear's head at the base of the navigation.
More containers can be added for extra background images, but the basic framework caters for 2.*/

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

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

/* #col-one and #col-two are the main content areas. #col-one is used to provide a smaller box (for navigation), while #col-two is used to provide a bigger one for content.
#col-one has absolute positioning, while #col-two is relative to the document, sitting below the head and above the footer.
 
The only key thing to know about their usage is that the margins on #col-two need to be set with #col-one in mind. Also, the min-hight of #col-two dictates the overall basic height of the page.

So, if #col-one is positioned on the left, and 200px wide, then the left margin of #col-two will need to be at least 200px, else it will go under #col-one. You may also need to adjust the min-height of #col-two in order to accomodate the height of #col-one.

For some designs, you may also need to place a background image in #col-one.
*/

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

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

#col-two-blog {
margin:0px 15px 20px 165px;
min-height:790px;
padding:0px;
position:relative;
top:0px;
}

#footer{
height: 10px;
clear: both;
background-image: url(../images/footer.gif); 
background-repeat: no-repeat;
margin-bottom: 20px;
}


/* Randoms is the container for an "on refresh" image generator. 
It's not used on many sites, but is often placed in the header. 

An include file is used:  
<!-- #include file="../special_includes/randoms.asp" -->

so to change the images used, please edit randoms.asp */

#randoms{
z-index: 100;
}

/*(2) Page Titles */

h1,h2,h3,h4,h5 {color: #b01d13; /*text-align: center*/;}
.NewsTitle{text-align: center;}


/* (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: #330099;
list-style-type: none;
display: inline;
height: 2em;
padding: 5px;
}
#bottomlinks a{
text-decoration: none;
color: #3366CC;
border-bottom: 1px solid #330099;
}
#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*/

	/*  For the Mask - Delete if not needed  */
	#fadermask{
		position: absolute;
		left: 32px;
		top: 0px;
		width: 324px;
		height: 218px;
		overflow: hidden;
		background: url(../images/mask.png) no-repeat;
		z-index: 10;
		}

		/*  For the Edit Button  */
#EditSlideButton {
left:149px;
position:absolute;
top:-38px;
z-index:500;
}

/*  For the Fading Images  */
#fader {
	height:218px;
	left:32px;
	overflow:hidden;
	position:relative;
	top:0;
	width:324px;
}

	#fader img {width: 100%;}
#newsbox {
background-image:url(../images/newsbox.gif);
background-repeat:no-repeat;
color:#FFFFFF;
height:215px;
left:385px;
position:absolute;
text-align:left;
top:0px;
width:322px;
padding:0;
margin:0;
line-height: 1;
}

#newsbox p.newstitlehome a{
line-height: 1.2;
}

#newsbox p.newstitlehome{
padding:0;
margin:0 0 8px;
}

#newinner {
margin-top:50px;
margin-left: 17px;
width: 291px;
}

#newsbox a {
color:#FFFFFF;
}
#newsbox a:hover {
color:#ffff00;
}



/* #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 {
height:46px;
left:-152px;
position:absolute;
top:260px;
width:135px;
text-align:center;
color: #f5f7d0;
font-weight: bold;
font-size: 15px;
}

#hitcountbox h3 {font-size: 18px; color: #f5f7d0;}


/* Teasers */

#teaserbox ul li {
display:inline;
list-style-type:none;
}
#teaserbox li a {
display:block;
height:138px;
overflow:hidden;
position:absolute;
text-indent:-5000px;
}
li.kidszonehome a {
background:transparent url(../images/teasers/kidszonehome.gif) no-repeat;
left:25px;
top:235px;
width:139px;
}
li.tourhome a {
background:transparent url(../images/teasers/tourhome.gif) no-repeat;
left:164px;
top:235px;
width:155px;
}
li.calendarhome a {
background:transparent url(../images/teasers/calendarhome.gif) no-repeat;
left:319px;
top:235px;
width:148px;
}
#teaserbox li a:hover {
background-position:0px -138px;
}










/* (5) Kids' Zone */
 
/* To style "back to" text */
.back_to{
text-align: left;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
} 
 
#kidsbgbox{


margin: 0 auto;
}
 
#kidsbgbox ul li { display: inline; padding: 0; list-style-type: none;}
 
#kidsbgbox li a {
width: 135px;
height: 128px;
display: block;
float: left;
overflow: hidden;
text-indent: -5000px;}

#kidsbgbox li a:hover {background-position: -135px 0px;}

 
li.kgames a{
background: url(../images/kidszoneimages/games.gif) no-repeat;
}
 
li.ks1links a{
background: url(../images/kidszoneimages/ks1links.gif) no-repeat;
}

li.ks2links a{
background: url(../images/kidszoneimages/ks2links.gif) no-repeat;
}
 
li.english a{
background: url(../images/kidszoneimages/english.gif) no-repeat;
}
 
li.history a{
background: url(../images/kidszoneimages/history.gif) no-repeat;
}
 
li.science a{
background: url(../images/kidszoneimages/science.gif) no-repeat;
}
 
li.maths a{
background: url(../images/kidszoneimages/maths.gif) no-repeat;
}

li.brain a{
background: url(../images/kidszoneimages/brainbuilders.gif) no-repeat;
}









/* (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 {
background:transparent url(../images/classpages/reception.gif) no-repeat scroll 0%;
display:block;
height:100px;
left:50px;
overflow:hidden;
position:absolute;
text-indent:-5000px;
top:60px;
width:100px;
}
li.reception a:hover {
background-position:-100px 0pt;
}
li.year1 a {
background:transparent url(../images/classpages/year1.gif) no-repeat scroll 0%;
display:block;
height:100px;
left:200px;
overflow:hidden;
position:absolute;
text-indent:-5000px;
top:60px;
width:100px;
}
li.year1 a:hover {
background-position:-100px 0pt;
}
li.year2 a {
background:transparent url(../images/classpages/year2.gif) no-repeat scroll 0%;
display:block;
height:100px;
left:350px;
overflow:hidden;
position:absolute;
text-indent:-5000px;
top:60px;
width:100px;
}
li.year2 a:hover {
background-position:-100px 0pt;
}
li.year3 a {
background:transparent url(../images/classpages/year3.gif) no-repeat scroll 0%;
display:block;
height:100px;
left:500px;
overflow:hidden;
position:absolute;
text-indent:-5000px;
top:60px;
width:100px;
}
li.year3 a:hover {
background-position:-100px 0pt;
}
li.year4 a {
background:transparent url(../images/classpages/year4.gif) no-repeat scroll 0%;
display:block;
height:100px;
left:150px;
overflow:hidden;
position:absolute;
text-indent:-5000px;
top:150px;
width:100px;
}
li.year4 a:hover {
background-position:-100px 0pt;
}
li.year5 a {
background:transparent url(../images/classpages/year5.gif) no-repeat scroll 0%;
display:block;
height:100px;
left:300px;
overflow:hidden;
position:absolute;
text-indent:-5000px;
top:150px;
width:100px;
}
li.year5 a:hover {
background-position:-100px 0pt;
}
li.year6 a {
background:transparent url(../images/classpages/year6.gif) no-repeat scroll 0%;
display:block;
height:100px;
left:450px;
overflow:hidden;
position:absolute;
text-indent:-5000px;
top:150px;
width:100px;
}
li.year6 a:hover {
background-position:-100px 0pt;
}






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 */

h1.sectionheading {
color: #009900;
}

#Guestbook {
border: #42A0FF solid thick;
}
#Guestbook .sort{
background-color: #42A0FF;
}
#Guestbook .sort a{
color: #FFFF00;
}

.FileInfo{display:none;}
#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;}



p#addy {font-size: 12px; text-align: center; font-weight: bold; color: #b01d13;}