/* 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: Arial, Verdana, sans-serif;
	color: #000;
	background: #ffffff;
	font-size: small;
	}


	
/*	=2:	[LINKS] -------------------------------------*/	
	
/* NOTES: 
remember LoVe HAte, also I have added a current class for current elements 
*/

a {
	color: #993300;
	text-decoration: none;
	}

a:hover {
	color: #CC3300;
	}


/*	=3:	[COMMON ELEMENTS] -------------------------------------*/	

	
	
h1 {
	font-size: 150%;
	color: black;
	margin-bottom: 15px;
	}
	
h2 {
	font-size: 130%;
	color: black;
	}
	
h3 {
	font-size: 120%;
	}

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;
	margin-bottom: 30px;
	padding: 0;
	min-height: 550px;
	width: 760px;
	background-color: #f7f1d4;
	border: 1px solid #6f5139;
	}
		
#header {
	width: 760px;
	height: 100px;
	background: url(_images/header_bg.gif) no-repeat;
	}

#header h1 {
	text-indent: -3000px;
	}





/*	=5:	[NAVIGATION] -------------------------------------*/	

/* NOTES: 
obviously the image references need to be altered to customise design
*/

ul#nav {
	list-style: none;
	float: left;
	}
	
ul#nav li {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline;
	}
	
ul#nav a {
	float: left;
	padding: 35px 0 0 0;
	overflow: hidden;
	height: 0px !important;
	height /**/:35px; /* for IE5/Win only */
	}	

#homeBtn a {
	width: 43px;
	background: url(_images/nav_bar.gif) no-repeat top left;
	}
	
#welcomeBtn a {
	width: 57px;
	background: url(_images/nav_bar.gif) no-repeat -43px 0;
	}
	
#aboutusBtn a {
	width: 58px;
	background: url(_images/nav_bar.gif) no-repeat -100px 0;
	}
	
#tourBtn a {
	width: 36px;
	background: url(_images/nav_bar.gif) no-repeat -158px 0;
	}
	
#newsBtn a {
	width: 70px;
	background: url(_images/nav_bar.gif) no-repeat -194px 0;
	}
	
#newslettersBtn a {
	width: 70px;
	background: url(_images/nav_bar.gif) no-repeat -264px 0;
	}
	
#lettershomeBtn a {
	width: 77px;
	background: url(_images/nav_bar.gif) no-repeat -334px 0;
	}
	
#calendarBtn a {
	width: 56px;
	background: url(_images/nav_bar.gif) no-repeat -411px 0;
	}
	
#galleryBtn a {
	width: 48px;
	background: url(_images/nav_bar.gif) no-repeat -467px 0;
	}
	
#classpagesBtn a {
	width: 68px;
	background: url(_images/nav_bar.gif) no-repeat -515px 0;
	}
	
#clubsBtn a {
	width: 74px;
	background: url(_images/nav_bar.gif) no-repeat -583px 0;
	}
	
#kidszoneBtn a {
	width: 63px;
	background: url(_images/nav_bar.gif) no-repeat -657px 0;
	}
	
#ptaBtn a {
	width: 40px;
	background: url(_images/nav_bar.gif) no-repeat -720px 0;
	}
	
#homeBtn a:hover, #homeBtn a.current {background-position: 0 -35px;}
#welcomeBtn a:hover, #welcomeBtn a.current {background-position: -43px -35px;}
#aboutusBtn a:hover, #aboutusBtn a.current {background-position: -100px -35px;}
#tourBtn a:hover, #tourBtn a.current {background-position: -158px -35px;}
#newsBtn a:hover, #newsBtn a.current {background-position: -194px -35px;}
#newslettersBtn a:hover, #newslettersBtn a.current {background-position: -264px -35px;}
#lettershomeBtn a:hover, #lettershomeBtn a.current {background-position: -334px -35px;}
#calendarBtn a:hover, #calendarBtn a.current {background-position: -411px -35px;}
#galleryBtn a:hover, #galleryBtn a.current {background-position: -467px -35px;}
#classpagesBtn a:hover, #classpagesBtn a.current {background-position: -515px -35px;}
#clubsBtn a:hover, #clubsBtn a.current {background-position: -583px -35px;}
#kidszoneBtn a:hover, #kidszoneBtn a.current {background-position: -657px -35px;}
#ptaBtn a:hover, #ptaBtn a.current {background-position: -720px -35px;}



	


/*	=6:	[MAIN COLUMN] -------------------------------------*/	
#main {
	clear: left;
	width: 100%;
	min-height: 450px;
	_height: 450px;
	position: relative;
	}
	
.gutter {padding: 10px;}

#welcome {
	width: 100%;
	height: 96px;
	background: url(_images/welcome_bg.gif) repeat-x;
	}

#welcome p {
	font-size: 80%;
	width: 400px;
	color: #ffffff;
	margin: 0 auto;
	text-align: center;
	}

#tag {
	width: 100%;
	margin-top: 30px;
	text-align: center;
	font-weight: bold;
	font-size: 120%;
	color: #6f5139;
	}
	
#newsArea {
	position: absolute;
	right: 0;
	top: 68px;
	width: 183px;
	height: 224px;
	background: url(_images/news_bg.gif) no-repeat;
	}
	
	
#newsAreaWrap {
	padding: 7px;
	}
	
#newsArea h3 {
	background: url(_images/news_header.gif) no-repeat top left;
	height: 28px;
	font-size: 90%;
	line-height: 30px;
	text-indent: 10px;
	color: #6f5139;
	}

ul#teasers {
	position: absolute;
	top: 11px;
	left: -10px;
	}
	
ul#teasers li {margin-bottom: 10px; list-style-type: none;}
	
#newslettersTeaser a {
	display: block;
	width: 167px;
	height: 122px;
	background: url(_images/newslettersTeaser.gif) no-repeat;
	text-indent: -3000px;
	}
	
#newslettersTeaser a:hover {background-position: 0 -122px;}

#galleryTeaser a {
	display: block;
	width: 167px;
	height: 122px;
	background: url(_images/galleryTeaser.gif) no-repeat;
	text-indent: -3000px;
	}
	
#galleryTeaser a:hover {background-position: 0 -122px;}

#kidszoneTeaser a {
	display: block;
	width: 167px;
	height: 122px;
	background: url(_images/kidszoneTeaser.gif) no-repeat;
	text-indent: -3000px;
	}
	
#kidszoneTeaser a:hover {background-position: 0 -122px;}
	
#flash {
	float: left;
	position: absolute;
	top: 150px;
	left: 50%;
	margin-left: -186px;
	width: 373px;
	height: 214px;
	}
	
p.link a {
	position: absolute;
	bottom: 5px;
	left: 5px;
	font-size: 70%;
	font-weight: bold;
	}
	
/* ===[content pages]=== */
body#content #main {
	background: url(_images/watermark.gif) no-repeat 50% 50%;
	}

body#content h2 {
	height: 25px;
	width: 100%;
	font-size: 110%;
	line-height: 20px;
	text-indent: 10px;
	color: #f7f1d4;
	background: url(_images/heading_bg.gif) repeat-x;
	}
	
body#kids #main {
	background: none;
	}

body#kids h2 {
	height: 25px;
	width: 100%;
	font-size: 110%;
	line-height: 20px;
	text-indent: 10px;
	color: #f7f1d4;
	background: url(_images/heading_bg.gif) repeat-x;
	}
	

/*	=7:	[SIDEBAR COLUMN] -------------------------------------*/	


	
/*	=8:	[FOOTER] -------------------------------------*/	



/*	=9:	[LISTS] -------------------------------------*/	




/*	=10: [FORMS] -------------------------------------*/	




/*	=11: [IMAGES] -------------------------------------*/	



/*	=12: [TEASERS] ------------------------------------*/

/* kidszone */
#englishBtn a {
	position: absolute;
	top: 50px;
	left: 75px;
	text-indent: -3000px;
	width: 200px;
	height: 75px;
	background: url(_images/englishBtn.gif) no-repeat;
	}
	
#englishBtn a:hover {background-position: 0 -75px;}

#brainBtn a {
	position: absolute;
	top: 254px;
	left: 275px;
	text-indent: -3000px;
	width: 200px;
	height: 75px;
	background: url(_images/brainBtn.gif) no-repeat;
	}
	
#brainBtn a:hover {background-position: 0 -75px;}

#mathsBtn a {
	position: absolute;
	top: 50px;
	left: 275px;
	text-indent: -3000px;
	width: 200px;
	height: 75px;
	background: url(_images/mathsBtn.gif) no-repeat;
	}
	
#mathsBtn a:hover {background-position: 0 -75px;}

#historyBtn a {
	position: absolute;
	top: 50px;
	right: 75px;
	text-indent: -3000px;
	width: 200px;
	height: 75px;
	background: url(_images/historyBtn.gif) no-repeat;
	}
	
#historyBtn a:hover {background-position: 0 -75px;}

#scienceBtn a {
	position: absolute;
	top: 150px;
	left: 75px;
	text-indent: -3000px;
	width: 200px;
	height: 75px;
	background: url(_images/scienceBtn.gif) no-repeat;
	}
	
#scienceBtn a:hover {background-position: 0 -75px;}

#gamesBtn a {
	position: absolute;
	top: 150px;
	left: 275px;
	text-indent: -3000px;
	width: 200px;
	height: 75px;
	background: url(_images/gamesBtn.gif) no-repeat;
	}
	
#gamesBtn a:hover {background-position: 0 -75px;}

#weblinks1Btn a {
	position: absolute;
	top: 150px;
	right: 75px;
	text-indent: -3000px;
	width: 200px;
	height: 75px;
	background: url(_images/weblinks1Btn.gif) no-repeat;
	}
	
#weblinks1Btn a:hover {background-position: 0 -75px;}

#weblinks2Btn a {
	position: absolute;
	top: 249px;
	left: 75px;
	text-indent: -3000px;
	width: 200px;
	height: 75px;
	background: url(_images/weblinks2Btn.gif) no-repeat;
	}
	
#weblinks2Btn a:hover {background-position: 0 -75px;}


#frenchBtn a {
	position: absolute;
	top: 249px;
	right: 75px;
	text-indent: -3000px;
	width: 195px;
	height: 75px;
	background: url(_images/french.gif) no-repeat;
	}
	
#frenchBtn a:hover {background-position:  -185px 0;}



/* classpage buttons */
#pearlBtn a {
	position: absolute;
	top: 50px;
	left: 75px;
	text-indent: -3000px;
	width: 200px;
	height: 75px;
	background: url(_images/pearlBtn.gif) no-repeat;
	}
	
#pearlBtn a:hover {background-position: 0 -75px;}

#garnetBtn a {
	position: absolute;
	top: 50px;
	left: 275px;
	text-indent: -3000px;
	width: 200px;
	height: 75px;
	background: url(_images/garnetBtn.gif) no-repeat;
	}
	
#garnetBtn a:hover {background-position: 0 -75px;}

#sapphireBtn a {
	position: absolute;
	top: 50px;
	right: 75px;
	text-indent: -3000px;
	width: 200px;
	height: 75px;
	background: url(_images/sapphireBtn.gif) no-repeat;
	}
	
#sapphireBtn a:hover {background-position: 0 -75px;}

#amberBtn a {
	position: absolute;
	top: 150px;
	left: 75px;
	text-indent: -3000px;
	width: 200px;
	height: 75px;
	background: url(_images/amberBtn.gif) no-repeat;
	}
	
#amberBtn a:hover {background-position: 0 -75px;}

#goldBtn a {
	position: absolute;
	top: 150px;
	left: 275px;
	text-indent: -3000px;
	width: 200px;
	height: 75px;
	background: url(_images/goldBtn.gif) no-repeat;
	}
	
#goldBtn a:hover {background-position: 0 -75px;}

#emeraldBtn a {
	position: absolute;
	top: 150px;
	right: 75px;
	text-indent: -3000px;
	width: 200px;
	height: 75px;
	background: url(_images/emeraldBtn.gif) no-repeat;
	}
	
#emeraldBtn a:hover {background-position: 0 -75px;}

#amethystBtn a {
	position: absolute;
	top: 250px;
	left: 150px;
	text-indent: -3000px;
	width: 200px;
	height: 75px;
	background: url(_images/amethystBtn.gif) no-repeat;
	}
	
#amethystBtn a:hover {background-position: 0 -75px;}

#platinumBtn a {
	position: absolute;
	top: 250px;
	right: 150px;
	text-indent: -3000px;
	width: 200px;
	height: 75px;
	background: url(_images/platinumBtn.gif) no-repeat;
	}
	
#platinumBtn a:hover {background-position: 0 -75px;}

		
		
/*	=13: [MISC] -------------------------------------*/	


/* skip navigation rule*/ 


#counter {
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 165px;
	}
	
#counter td {
	font-style: italic;
	font-size: 110%;
	color: #6f5139;
	vertical-align: middle;
	}
	
#counter td img {float: left; margin-top: 1px;}

#counter span {margin-left: 3px;}
	
.clipboard {
padding-left: 22px;
background: url(_images/clipboard_icon.gif) no-repeat 0px 0px;
width: 165px;
}
#visitors {float:left; padding-left: 23px;}
	




iframe {
	position: relative;
	left: 50%;
	margin-left: -300px;
	}



#login {
	position: absolute;
	top: 3px;
	right: 10px;
	border: none;
	}
	
/*	=14: [FLASH] -------------------------------------*/	


.sectionheading {
color: #0033CC;
}
