/* BROWSER SETTINGS - We start by setting the main browser defaults here  */

	/* Kill margin and padding on all elements - because different browsers have different defaults */
	*{
		margin:0;
		padding:0;
	}
	
	html{
	/* Fixes background nastiness when a sidebar is open in Firefox and 
	sets the whole of the container section width */
		min-width:840px;
	}

	body{
	/* Use backgound image as opposed to colour so that site is still functional if images are off */

		background:white url(../candy/background.png) 0 0 repeat;
	
	/* Shove all content to the center of the screen for Internet Explorer 5  - i know! */
		text-align:center;
	}

/* END OF BROWESER SETTINGS */

/* BASIC LAYOUT SETTINGS - This is the basic page split header > content > footer.  OK so far? then lets make this site look pretty - yipeee! */

	/* in this section we set up container sections (using divs tags - look in the HTML pages) and then add background 			images to the divs*/

	#pageheadContainer,
	#subpageheadContainer,
	#contentContainer,
	#footContainer{

	/* Set all of the above containers to 100% please so we can create the fullscreen width backgrounds! */
		width:100%;
	}

	/* this is our nice looking header image in the background now pay attention! */
	#pageheadContainer{
		background:transparent url(../candy/pageheadBackground.png) 0 100% repeat-x;
	}
	#subpageheadContainer{
	background:transparent url(../candy/subcontentBackground2.png) 0 100% repeat-y;
}


	/* OK girls, now for the science -  do a clever floaty bit */

	#contentContainer{
		background:transparent url(../candy/contentBackground2.png) 50% 100% repeat-y;

	/* Float left to prevent floated child divs(#article & #subContent) overflowing . aka the FnE method */
		float:left;
	}

	/* You got it footer image goes in here! */

	#footContainer{
		background:transparent url(../candy/footBackground.png) 0 0 repeat-x;
		clear:both;
	}

/* END OF BASIC LAYOUT SETTINGS */

/* MORE LAYOUT SETTINGS  */
	/* width, height and alignment for the next level of divs */
	
	/* Pagehead contains the main navigation so dont change my width or I wont be able to see all the links! */
	#pagehead,
	#subpageheadContainer,

	#content,
	#foot{
	/* Set widths for "sub" containers (divs too) and center them on the screen.*/
		width:859px;
		margin:0 auto;
	/* Position relative so we can position children absolutley but keep them relative to their parents and not the
	document root - confused? Me too! */
		position:relative;
	/* Shove the content back where it should be now we have convinced IE5 that center aligned websites are, infact,
	groovy (see body{}) */
		text-align:left;
	}

	#pagehead{
		height:284px;
	}
	#subpageheadContainer{
		 height: 39px;
 	}
	
	#foot{
		height:214px;
	}


	#pagehead{
		background:transparent url(../candy/pageheadBackground2.png) 0 100% repeat-x;
	}

	#content{
	/* Add drop shadow/fading backgound to top of content area . doesn't work on IE5/MAC . oh the shame! */
		background:transparent url(../candy/contentBackground.png) 0 0 no-repeat;
	/* Ensure this background tile is never cut short, min-height for Firefox and pals, _height 'hack' for 
	Internet Exploiter change me at your peril!*/
		min-height:384px;
		_height:384px;
	}

	#foot{
		background:transparent url(../candy/footBackground2.png) 100% 0 repeat-x;
	}
	#charitylink{
	position:absolute;
	top: 145px;
	left: 417px;
}
/* END OF MORE LAYOUT SETTINGS  */


/* CONTENT LAYOUT SETTINGS (middle section - The important bit!!!)*/
	/* Article is your main content section on the left hand side, careful now if we go changing our widths we must
	 let the subContent section know or we will make a big ol' mess of it */
	#article{
		width:440px;
		float:left;
		padding-left: 10px;
		padding-top: 10px;
		margin-left:25px;

	}

	#subContent{
	/* Fix double margin bug in IE on floats using display:inline */
		display:inline;
		width:280px;
		float:left;
		padding-left:10px;
		padding-right:10px;
		padding-top: 10px;
		margin-left:30px;

	}
/* END OF CONTENT LAYOUT SETTINGS (middle section - The important bit!!!)*/


/* NAVIGATION LAYOUT & COLOURS*/
	/* Create blank hit area for logo/signature - we dont need this in this version but we'll leave it in 
	cos its great */

	#bannerad {
		padding-left: 200px;
		display:block;
		width:468px;
		height:60px;
		text-decoration:none;
		float:left;
	}
	/* Lets position the main image on each of the pages */

	#pagehead a:hover{
	/* prevent background colour used on site wide anchors */
		background:transparent;
	}

	#pagehead h1{
	/* Position blank hit area over background logo/signature */
		position:absolute;
	top:3px;
	left:122px;
	}
	/* Phew! first bit over....*/
	
	/* Navigation DIV position */

	#pagehead ul{
		display:block;
		position:absolute;
		top:265px;
		left:120px;

	}
	
	/* Lets give our nav a look n feel, setting width to just over the longest word which is  - yay! */
	#pagehead li{
		display:block;
		float:left;
		margin-left:0px;
		margin-right:0px;
	}

	#pagehead li a{
		display:block;
		height:18px;
		color:#000000;
		font-size:11px;
		font-weight:bold;
		

	/* Line height same as height, which puts the text vertically centered, hoorah! */
		line-height:18px;
		text-decoration:none;
	}

	/* Set the nav colours to on or off or in this case to odd and even - just to keep your brain working! */
	
	#pagehead li.odd a{
		letter-spacing: 0px;
	}

	#pagehead li.even a{
		background:#f2f4f9;
		color:#68912b;
		
	}
	/* add a rollover colour - nice! */
	
	#pagehead a:hover{
		color:#68912b;
	}
	#pagehead img { border:none; }

	#subpageheadContainer img { border:none; }

	#subpageheadContainer ul{
	display:block;
	position:absolute;
	top:2px;
	left: 175px;
	}

	#subpageheadContainer li{
	display:block;
	float:left;
	margin-left:0px;
	margin-right:0px;

	}

	#subpageheadContainer li a{
	display:block;
	height:20px;
	}
	
/* END OF NAVIGATION LAYOUT & COLOURS*/

/* FOOTER SECTION DIV and FIR */
/* we have two footers, use foot 1 for Headteacher Info and foot 2 for SJWDesign (thanks :-)) */

	#foot ul{
		position:absolute;
	}

	#foot li{
	/* hide bullets or set bullets you can choose! */
		list-style-type:none;
	}

	#foot #foot1{
	/* width to solve odd problem with Opera 7.5 */
		top:31px;
		width:50px;
		position:absolute;
		left:670px;
	}

	#foot #foot2{
	/* width to solve odd problem with Opera 7.5 */
		top:35px;
		width:350px;
		position:absolute;
		left:15px;
	}

	/* This is the anchor top button at bottom of page use it if you want to!*/
	#foot #pageTop{
		position:absolute;
	/* This position worked out using a highly technical formula: left a bit, right a bit, no left a bit... bingo! */
		left:482px;
		top:-40px;
	}


/* END OF FOOTER SECTION DIV and FIR */

/* LOOK AND FEEL STYLEY BIT FOR COLOUR AND TEXT*/

	body{
	/* Setting out the whole of the website text, careful now with the commas, colons and semi-colons or it wont work!  Going to set the body text at 100% which is 1 em.  if we want to make our screen text bigger we can using ems*/
		font:normal 100%/1em "Calibri", Verdana, Arial, Helvetica, sans-serif;

	}

	/* #content ul used to prevent main navigation, within #pagehead, list breaking */
	#content ul{
		margin:0.8em 0 0.6em 1em;
		padding-left:1em;
		list-style-type: dot;
 		list-style-image:url(../candy/paw.png) 

	}

	ol{
		margin:0.8em 0 0.6em 2em;
		padding-left:1em;
		list-style-type:lower-roman;
	}

	blockquote{
	/* im using this tag for the "together we..." statement  look at the code on index.htm and find blockquote in the container*/
	
		margin:0.2em 0 0.6em 0;
		font-size: 1.8em;
		line-height: 1.7em;
		padding-left:0em;
		color: #68912b;
	}

	/* Frame images if you want -  set to 0 if you dont - all images on the site will use this tag! */
	img{
		padding:2px;
		border:1px solid #F2F2F2;
	}


	/*Set font size for news content area */
	#content{
		font-size:1.0em;
		line-height:1.2em;
	}
	
	/*Set font size for article content area */
	#article{
		line-height:1.2em;
		color:#000000;
		
	}

	/* set margins top right left and bottom for any text in a <p> tag dont forget to close it! */
	p{
		margin:0.3em 0 0.6em 0;
	}
	/* set the color and weight of any links on the site (apart from the NAVIGATIONS) */
	a{
		color:#416011;
		text-decoration:none;
		padding-left: 2px;
		padding-right: 2px;
	}
	/* now lets set a hover colour for our links */
	a:hover{
		color:#416011;
	}
	/* anything in the article div ( main content ) set colour and line height - this helps keep it readable!) */

	
	/* Setting out the standard web Heading tags here... */
	h1,
	h2,
	h3,
	h4{
 	font-family: "Calibri", Verdana, Arial, Helvetica, sans-serif;
	}

	h2{
		color:#416011;
		margin-bottom:.5em;
		line-height:1.3em;
		font-size:1.1em;
	}

	h3{
		margin:0.8em 0 0.6em 0;
		font-size:1.3em;
	}

	h4{
		margin:0.8em 0 0.6em 0;
		font-size:1.1em;
	}
	
	#quote{
		font-size:0.8em;

	}

	#foot1 a{
		font-size:0.7em;
		color:#afc88f;
	}
	
	#foot2{
		font-size:0.7em;
		color:#afc88f;
	}
	#foot2 a {
		color:#afc88f;
}
	/* Sub Content - extra bit if you need to use a new font CSS class wihtout messing up the site - clever!  */
	#subContent{
		color:#000000;
		font-size:0.9em;
	}
	
	#subContent h2{
		font-size:1.1em;
	}

	#subContent h3{
		font-size:1.1em;
	}
	
	
/* LOOK AND FEEL STYLEY BIT FOR COLOUR AND TEXT*/
/* END OF CSS FILE - What a whopper! */