/* CSS Document */

/* DOCUMENT INFORMATION -----------------------------------

TITLE:			Default screen display styles
LAST UPDATED:	7th November 2005
AUTHOR:			Nick Toye

-- CONTENTS -----------------------------------------------

	=1:		[HTML & BODY]
	=2:		[LINKS]
	=3:		[COMMON ELEMENTS]
	=4:		[TOP ELEMENTS]
	=5:		[NAVIGATION]
	=6:		[MAIN COLUMN]
	=7:		[SIDEBAR COLUMN]
	=8:		[FOOTER]
	=9:		[LISTS]
	=10:	[FORMS]
	=11:	[IMAGES]
	=12:	[TEASERS]
	=13:	[MISC]
	=14:	[FLASH]
	
-----------------------------------------------------------*/

/*	=1:	[HTML & BODY] -------------------------------------*/	

* {
	margin: 0;
	padding: 0;
	list-style: none;
	}
	
body {
	margin: 0;
	padding: 0;
	font-family: Trebuchet MS, Verdana, sans-serif;
	text-align: left;
	color: #000;
	background: #fff;
	font-size: small;
	}

	
/*	=2:	[LINKS] -------------------------------------*/	
	
/* NOTES: 
remember LoVe HAte, also I have added a current class for current elements 
*/

a:link {
	color: #4a6957;
	text-decoration: underline;
	}
a:visited {
	color: #4a6957;
	text-decoration: underline;
	}
a:hover {
	color: #744a3f;
	text-decoration: underline;
	}
	
a.current {
	color: #744a3f;
	text-decoration: underline;
	}

/*	=3:	[COMMON ELEMENTS] -------------------------------------*/	

p {
	padding: 0 0 5px 0;
	color: black;
	}
	
table {color: black; border: none;}
	
h1 {
	font-size: 150%;
	color: black;
	margin-bottom: 15px;
	}
	
h2 {
	font-size: 130%;
	color: black;
	}
	
h3 {
	font-size: 120%;
	font-weight: normal;
	}

code {
	color: #000000;
	font-size: 110%;
	line-height: 1.2em;
	text-align: left;
	}
		
abbr, acronym {
	font-style: normal;
	border-bottom: 1px dotted #bbb;
	cursor: help;
	}
	
a abbr {
	border: none;
	}
	
em {
	font-style: italic;
	}
	
strong {
	font-weight: bold;
	}
	
del {
	text-decoration: line-through;
	}
	
ins {
	text-decoration: none;
	font-style: italic;
	}
	
address {
	margin: 0;
	padding: 0;
	font-style: normal;
	}

/*	=4:	[TOP ELEMENTS] -------------------------------------*/	

#wrap {
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 800px;
	min-height: 450px;
	background: #fff url(_images/faux.jpg) repeat-y;
	}
	
* html #wrap {height: 450px;}
	
#header {
	width: 800px;
	height: 145px;
	position: relative;
	background: url(_images/header_bg.png) no-repeat;
	}

#header h1 {
	display: none;
	}

#header h2 {
	position: absolute;
	left: 200px;
	bottom: 25px;
	color: #744a3f;
	font-size: 180%;
	font-weight: bold;
	line-height: 120%;
}

#header h2.kz {position: absolute;
	left: 200px;
	bottom: 0px;}




/*	=5:	[NAVIGATION] -------------------------------------*/	

/* NOTES: 
obviously the image references need to be altered to customise design
*/

ul#nav {
	margin-left: 18px;
	text-indent: 10px;
	}
	
ul#nav li {
line-height: 110%;
}
	
ul#nav li a {
	
	color: #4a6957;
	text-decoration: none;
	font-weight: bold;
	font-size: 90%;
	}	
	
ul#nav li a:hover, ul#nav li a.current {color: #744a3f;}
	
/* SECTIONS */

#aboutSection {
	width: 160px;
	height: 25px;
	line-height: 25px;
	text-indent: -3000px;
	background: url(_images/aboutSection.png) no-repeat;
	}
	
#newsSection {
	width: 160px;
	height: 25px;
	line-height: 25px;
	text-indent: -3000px;
	background: url(_images/newsSection.png) no-repeat;
	}
	
#childrenSection {
	width: 160px;
	height: 25px;
	line-height: 25px;
	text-indent: -3000px;
	background: url(_images/childrenSection.png) no-repeat;
	}
	
#communitySection {
	width: 160px;
	height: 25px;
	line-height: 25px;
	text-indent: -3000px;
	background: url(_images/communitySection.png) no-repeat;
	}	




	


/*	=6:	[MAIN COLUMN] -------------------------------------*/	
#content {
	float: right;
	width: 619px;
	min-height: 405px;
	_height: 405px;
	
	}
	
#content .shell {
	width: 93%;
	margin: 0 auto;
	margin-right: 35px;
	margin-top: 10px;
	position: relative;
	}

p#welcomeTxt {
	font-size: 90%;
	color: #744a3f;
	margin: 0 20px;
	}

#leftCol {
position:absolute;
top:205px;
left:190px;
width: 310px;
}

ul#awards {position:absolute; top:210px; width:330px; height:140px; left:-4px;}
ul#awards li {display: inline;}

#achievement {
float: left;
}

#iip {
position:relative;
right:-40px;
top:2px
}

#rightCol {
position:absolute;
width: 268px;
top:205px;
right: 25px
}
	
#calendar {
	width: 258px;
	height: 157px;
	float: right;
	background: url(_images/calendar_bg.png) no-repeat;
	color: #FFFFFF;
	}
	
#calendar h3 {
	font-size: 110%;
	color: #fff;
	margin: 5px 0 0 5px;
	display: inline;
	}
	
#calendar .shell {
	width: 90%;
	margin: 0 auto;
	}
	
#calendar a {
	padding-left: 14px;
	color: #FFCC00;
	background: url(_images/bullet2.gif) no-repeat 0 50%;
	}
	
#calendar a:hover {color: #FFFFFF;}
	
#newsArea {
	width: 258px;
	height: 157px;
	float: right;
	margin-top: 5px;
	background: url(_images/news_bg.png) no-repeat;
	}
	
#newsArea h3 {
	font-size: 110%;
	color: #fff;
	margin: 5px 0 0 5px;
	}
	
#newsArea .shell {
	width: 90%;
	margin: 0 auto;
	}

#newsArea a {
	padding-left: 14px;
	color: #4a6957;
	background: url(_images/bullet.gif) no-repeat 0 50%;
	}
	
#newsArea a:hover {color: #744a3f;}
	
	

/*	=7:	[SIDEBAR COLUMN] -------------------------------------*/	
#sidebar {
	float: left;
	width: 181px;
	min-height: 400px;
	_height: 400px;
	
	}

	
/*	=8:	[FOOTER] -------------------------------------*/	
#footer {
	clear: both;
	position: relative;
	width: 800px;
	height: 73px;
	background: url(_images/footer_bg.gif) no-repeat;
	}
	
p.centered {
	text-align: center;
	font-size: 90%;
	color: #4a6957;
	margin: 28px auto;
	}
	
p.centered a {color: #4a6957;}
p.centered a:hover {color: #744a3f;}
	


/*	=9:	[LISTS] -------------------------------------*/	




/*	=10: [FORMS] -------------------------------------*/	




/*	=11: [IMAGES] -------------------------------------*/	



/*	=12: [TEASERS] ------------------------------------*/

/* kidszone */
#englishBtn a {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 78px;
	height: 90px;
	line-height: 90px;
	text-indent: -3000px;
	background: url(_images/englishBtn.png) no-repeat;
	}
	
#englishBtn a:hover {background-position: 0 -90px;}

#mathsBtn a {
	position: absolute;
	top: 25px;
	left: 155px;
	width: 97px;
	height: 102px;
	line-height: 102px;
	text-indent: -3000px;
	background: url(_images/mathsBtn.png) no-repeat;
	}
	
#mathsBtn a:hover {background-position: 0 -102px;}

#brainBtn a {
	position: absolute;
	top: 170px;
	left: 320px;
	width: 94px;
	height: 110px;
	line-height: 110px;
	text-indent: -3000px;
	background: url(_images/brainBtn.png) no-repeat;
	}
	
#brainBtn a:hover {background-position: 0 -110px;}

#historyBtn a {
	position: absolute;
	top: 20px;
	right: 160px;
	width: 94px;
	height: 110px;
	line-height: 110px;
	text-indent: -3000px;
	background: url(_images/historyBtn.png) no-repeat;
	}
	
#historyBtn a:hover {background-position: 0 -110px;}

#scienceBtn a {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 82px;
	height: 105px;
	line-height: 105px;
	text-indent: -3000px;
	background: url(_images/scienceBtn.png) no-repeat;
	}
	
#scienceBtn a:hover {background-position: 0 -105px;}

#gamesBtn a {
	position: absolute;
	top: 154px;
	left: 189px;
	width: 77px;
	height: 84px;
	line-height: 84px;
	text-indent: -3000px;
	background: url(_images/gamesBtn.png) no-repeat;
	}
	
#gamesBtn a:hover {background-position: 0 -84px;}

#weblinks1Btn a {
	position: absolute;
	top: 154px;
	left: 16px;
	width: 119px;
	height: 117px;
	line-height: 117px;
	text-indent: -3000px;
	background: url(_images/weblinks1Btn.png) no-repeat;
	}
	
#weblinks1Btn a:hover {background-position: 0 -117px;}

#weblinks2Btn a {
	position: absolute;
	top: 152px;
	right: 100px;
	width: 92px;
	height: 117px;
	line-height: 117px;
	text-indent: -3000px;
	background: url(_images/weblinks2Btn.png) no-repeat;
	left: 471px;
	}
	
#weblinks2Btn a:hover {background-position: 0 -117px;}



/* classpage buttons */
#receptionBtn a {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 111px;
	height: 105px;
	line-height: 105px;
	text-indent: -3000px;
	background: url(_images/receptionBtn.png) no-repeat;
	}
	
#receptionBtn a:hover {background-position: 0 -105px;}

#class1Btn a {
	position: absolute;
	top: 25px;
	left: 175px;
	width: 82px;
	height: 101px;
	line-height: 101px;
	text-indent: -3000px;
	background: url(_images/classoneBtn.png) no-repeat;
	}
	
#class1Btn a:hover {background-position: 0 -101px;}

#class2Btn a {
	position: absolute;
	top: 20px;
	right: 160px;
	width: 84px;
	height: 105px;
	line-height: 105px;
	text-indent: -3000px;
	background: url(_images/classtwoBtn.png) no-repeat;
	}
	
#class2Btn a:hover {background-position: 0 -105px;}

#class3Btn a {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 91px;
	height: 101px;
	line-height: 101px;
	text-indent: -3000px;
	background: url(_images/classthreeBtn.png) no-repeat;
	}
	
#class3Btn a:hover {background-position: 0 -101px;}

#class4Btn a {
	position: absolute;
	top: 160px;
	left: 100px;
	width: 81px;
	height: 92px;
	line-height: 92px;
	text-indent: -3000px;
	background: url(_images/classfourBtn.png) no-repeat;
	}
	
#class4Btn a:hover {background-position: 0 -92px;}

#class5Btn a {
	position: absolute;
	top: 160px;
	left: 260px;
	width: 97px;
	height: 108px;
	line-height: 108px;
	text-indent: -3000px;
	background: url(_images/classfiveBtn.png) no-repeat;
	}
	
#class5Btn a:hover {background-position: 0 -108px;}

#class6Btn a {
	position: absolute;
	top: 160px;
	right: 100px;
	width: 81px;
	height: 100px;
	line-height: 100px;
	text-indent: -3000px;
	background: url(_images/classsixBtn.png) no-repeat;
	}
	
#class6Btn a:hover {background-position: 0 -100px;}

		
		
/*	=13: [MISC] -------------------------------------*/	


/* skip navigation rule*/ 


#counter {
	position: absolute;
	left: 80px;
	bottom: 8px;
	height: 24px;
width: 370px;
	display: table;
	}
	
#counter p {
	color: #fff;
	font-size: 110%;
	font-weight: bold;
	vertical-align: text-top;
	}

#counter img {
	vertical-align: bottom;
	height: 24px;
}

	
p.link a {
	font-size: 85%;
	color: #4a6957;
	width: 100%;
	height: 1%;
	display: block;
	text-align: center;
	}
	
p.link a:hover {color: #744a3f;}
	



#CONTENT {width: 600px;}



#login {
	border: none;
	}
	
/*	=14: [FLASH] -------------------------------------*/	

/*
P.I.E. FLOAT CLEARING
See http://www.positioniseverything.net/easyclearing.html 
--------------------- */

.clearfix:after {
  content: ".";
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
}
.clearfix {
  display: inline-block; /* Fixes IE/Mac */
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */	

h2.sectionheading {
color: #009900;
}

/* CSS changes needed due to upgrade to 3+ final */
.newstitlehome, .eventhome{margin:0;}
#MediaBlock .MediaFloat{width:33.3%}

/* Awards bar additions */
ul#awards li#awardsBlock {
position: relative;
left: 0px;
top: -70px;
margin:0;
padding:0;
z-index: 100;
}


#fadermask {
background:url("../images/mask.png") no-repeat scroll 0 0 transparent;
height:211px;
left:0;
overflow:hidden;
position:absolute;
top:1px;
width:319px;
z-index:10;
}

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

/*  For the Fading Images  */
#fader {
height:202px;
left:0;
overflow:hidden;
position:relative;
top:4px;
width:314px;
}

	#fader img {width: 100%;}
	
#ticker {
color:#4A6957;
display:block;
font-weight:bold;
left:-98px;
position:absolute;
top:225px;
width:712px;
margin: 200px auto;
}

		#ticker_edit {
		position: absolute; 
		z-index: 9999;} 	
		
		#EditButton {
		top: 20px!important;
		}
		
a#vle {
background:url("images/wizkid.jpg") no-repeat scroll 0 0 transparent;
display:block;
height:58px;
left:560px;
position:absolute;
text-indent:-9999px;
top:-8px;
width:166px;
z-index:9999;
}