/*div, ul, li, p	{border: 1px solid red;}*/

body {
	font-family : Arial, Helvetica, sans-serif;
	margin: 0 0 10px;
	padding: 0;
	text-align: center;/*this is a hack for ie 5 to the page align to the center*/
	background:  url("../gfx/bg.gif") repeat-x fixed center top;
	background-color:#c1d72d;
}

/*skips to the navigation for screen readers*/
#skipNav		{display: none;}

/*clear the floating elements on the page*/
#clearBoth	{clear: both;}

/*common font elements*/
form	{margin: 0; padding: 0;}


/*font elements*/
p, h1, h2, h3, h4, h5, #mainContent li, td	{font-family:Arial, Helvetica, sans-serif; color: #454a46;}
p, #mainContent li	{font-size: 80%;}
a		{color: #ab0b25;}
a:hover	{text-decoration: none; color: #ab0b25;}


tr:nth-child(odd) { background-color:#fff; }
tr:nth-child(even) { background-color:#e0ebf7; }

/*logo and utility navigation*/
#header			{width: 980px;margin: 0 auto 10px; text-align: left; display: block; padding-top: 20px;}
#logo			{border-width: 0;  margin-left: 20px; float:left;}
#utility		{color: #fff; font-size: 80%; float: right;  width: 500px;}
#utility a		{color: #fff; text-decoration:none; margin-right: 5px; margin-left: 5px; }
#utility a:hover{color: #dff0f7; text-decoration:underline;}

#utilityLinks	{float: right; margin-top: 10px;text-align: right;}

#searchBox		{float: right;}
.searchField	{background:  transparent url("../gfx/searchBg.gif") no-repeat; margin: 0;  margin-bottom: 2px; width: 190px; height: 30px; border-width: 0; outline:none; margin-top: 0; padding: 8px;}
#schButton		{border: 1px solid red;}

/*main level navigation that runs across the top*/
#mainNav		{width: 980px;  margin: 0 auto 0; text-align:left; clear: both;}
#mainNav ul		{margin: 40px 0 0 0; padding: 0 0 0 15px; width: 730px; float:left;}
#mainNav li 	{margin: 0;padding: 0;list-style-type: none; float: left;}
#mainNav span	{display:none;}	
#mainNav a		{display: block; height: 34px;}

#mainNav_5139	{background: transparent url("../gfx/menuAboutElecticity.gif")}
#mainNav_5145	{background: transparent url("../gfx/menuElectricalSafety.gif")}
#mainNav_5146	{background: transparent url("../gfx/menuEnergywise.gif")}
#mainNav_5127	{background: transparent url("../gfx/menuEnvironmentmatters.gif")}	
#mainNav_5150	{background: transparent url("../gfx/menuEvents.gif")}

#mainNav_5139 a		{width: 133px; background: transparent url("../gfx/menuAboutElecticity.gif")}
#mainNav_5145 a		{width: 137px; background: transparent url("../gfx/menuElectricalSafety.gif")}
#mainNav_5146 a		{width: 113px; background: transparent url("../gfx/menuEnergywise.gif")}
#mainNav_5127 a		{width: 170px; background: transparent url("../gfx/menuEnvironmentmatters.gif")}	
#mainNav_5150 a		{width: 150px;  background: transparent url("../gfx/menuEvents.gif")}

#mainNav_5139 a:hover	{background: transparent url("../gfx/menuAboutElecticityOn.gif")}
#mainNav_5145 a:hover	{background: transparent url("../gfx/menuElectricalSafetyOn.gif")}
#mainNav_5146 a:hover	{background: transparent url("../gfx/menuEnergywiseOn.gif")}
#mainNav_5127 a:hover	{background: transparent url("../gfx/menuEnvironmentmattersOn.gif")}
#mainNav_5150 a:hover	{background: transparent url("../gfx/menuEventsOn.gif")}

/*link to information for teachers*/
#infoTeachers	{border-width: 0; float: right;}
#infoTeachers span	{display: none;}
#infoTeachers {background: transparent url("../gfx/infoTeachers.gif"); }
#infoTeachers a	{background: transparent url("../gfx/infoTeachers.gif"); display:block; width: 214px; height: 74px;}
#infoTeachers a:hover		{background: transparent url("../gfx/infoTeachersOn.gif")}

/*maincontent ares box corners etc*/
#container	{width: 980px;margin: 0 auto; text-align: left; clear:both;}
#leftBox	{width: 715px;margin-left: 10px;}
#boxtl		{width: 715px; }
#boxtr		{height: 10px!important;}

/*start of content area that creates the end of the note pad*/
#mainContentContainer {width: 725px; float: left;background: transparent url("../gfx/bgContent.gif") top left repeat-y;border }
#contentbase{background: transparent url("../gfx/bgContent.gif") top left repeat-y; height:1px;}

/*bottom of content area that creates the end of the note pad*/
#baseBox{clear: both; background: transparent url("../gfx/bgBase.gif") top left repeat-x;height: 31px; margin-left: 10px; width: 715px;}
#boxbl	{background: transparent url("../gfx/contentCnrbl.gif") top left no-repeat;}
#boxbr	{background: transparent url("../gfx/contentCnrbr.gif") no-repeat right bottom;height: 23px; }

/*second level navigation goes to three levels deep*/
#sideNav	{float: left; width: 192px; margin: 0; }
#sideNav ul	{margin:0; padding: 0;width: 188px;overflow: hidden;list-style-type: none;}
#sideNav li	{margin: 0; padding: 0; list-style-type:none; display:inline;}
#sideNav a	{display:block; margin: 5px 0; padding: 7px 10px 7px 10px; font-size:80%; font-weight:bold; text-decoration: none; background-color:#fff; border-bottom:1px solid #97cde3;  border-right:1px solid #97cde3;}
#sideNav a:hover	{color: #419147; padding: 7px 10px 7px 10px; background: #fff url("../gfx/menuActive.gif") right 10px no-repeat; }

.levelThree li {margin-bottom: 2px!important;}	
.levelThree a {background: #fff url("../gfx/subMenu.gif") 3px 10px no-repeat!important; margin: 0 0 0 10px!important; padding: 7px 10px 7px 18px!important; }
.levelThree a:hover {margin: 0 0 0 10px!important; text-decoration:underline!important;}

.levelFour a 	{margin: 0 0 0 40px!important; color: black!important;}
.levelFour a:hover 	{margin: 0 0 0 40px!important;}
.levelFive 	{}
.levelSix 	{}

#sideNav a, .levelThree a {color: #536d5e;}

/*main content are this is where the text goes*/
#mainContent	{float: right; width: 518px; padding-bottom:50px;}
#mainContent img{margin: 10px;}
#mainContent p 	{margin: 20px 30px 20px 20px; line-height: 1.5em; font-size: 85%;}
#breadCrumbs	{font-size: 75%!important; text-transform:lowercase;}

#mainContent h1 {color: #517c97;} 
#mainContent h2	{margin: 40px 30px 20px 20px; font-size: 110%;color: #517c97; }
#mainContent h3	{margin: 40px 30px 20px 20px; font-size: 90%;}
#mainContent ul {margin: 20px 30px 20px 70px;}
#mainContent h1 {margin: 40px 30px 30px 20px; }
#mainContent ul {list-style : none; margin: 15px 40px 40px 50px; padding: 0; }
#mainContent ul li {padding-top: 6px; list-style-type: disc; line-height: 1.5em;font-size: 85%!important; }
#mainContent ol		{margin: 15px 0 15px 50px; padding: 0;}
#mainContent ol li	{margin: 0; padding: 4px 20px 5px 0;  line-height: 1.5em; font-size: 85%!important;}
#mainContent a, #mainContent a:visited	{color: #ab0b25!important;}

table		{margin: 5px 20px; border:1px solid #517c97;border-spacing:0;}
table th	{background-color:#517c97; padding: 3px 3px 3px 6px; color: #fff; font-size: 80%; text-align:left;}
table td	{vertical-align:top; border: 1px solid #517c97;text-align:left; border-spacing:0; }
table p	{margin: 0;}


/*subcontent area*/
#subContent	{width: 245px;  float: right;}
#subContent img	{margin-left: 10px; border-width:0;}
#subContent h1 	{font-size: 85%; }
#subContent h1 {margin: 0 0 0 20px; padding:0;}
#subContent p	{margin: 0 0 5px 20px; padding:0;}

/*images at the bottom of the homepage*/
#hmBreakouts	{width: 964px;margin: 5px auto;  clear: both;}
#hmBreakouts img{float: left;}

/*forms fields*/
fieldset	{ border: 1px solid #517c97; margin: 20px; padding: 20px;}
legend		{color: #517c97; font-size: 110%;padding: 10px;}
.required	{color: #f48466;font-size: 110%!important; font-weight:bold!important;}
fieldset table, fieldset td	{border: none;}
fieldset td	{font-size: 90%;}
#schoolDetails input, #schoolAddress input, #schoolTimetable input	{width: 500px; border: 1px solid #999; padding: 3px;}
#schoolClasses input	{border: 1px solid #999; padding: 3px;}
.submit	{margin-right: 20px;}

/*links at the bottom of the page*/
#footer	{clear: both; width: 964px; margin: 0 auto; text-align:left; height: 130px;}
#footerLinks	{float: left; margin-top:70px;} 
#footerLinks a	{color: #225b32; font-weight:bold; text-decoration:none;}
#footerLinks a:hover	{color: #4b792e;}
#copyright	{float: right;margin-top:70px;}
#copyright p	{color: #225b32;font-weight:bold;}


/*error pages */
#errorcontainer {position: relative; text-align: left; background: url('../gfx/errorimage.gif') #fff bottom left no-repeat; width: 800px; margin-top: 50px; padding-top: 20px;}
#errorcontainer h1 {color: #e31a32; margin-bottom: 20px; text-align: center;}
#errorcontainer h2 {color: #507489; font-weight: normal; margin: 0px; font-size: 140%;}
#errorcontainer p {margin: 5px 0px 20px 0px;}
#errorcontainer p a {color: #f16109;}
#errorcontainer .contactus {color: #f16109; clear: both;}
#errorcontainer .segment {float:left; width: 225px; height: 120px;}
#errorcontainer .segment ul {font-size: 80%; list-style: none none; margin:  5px 0px 0px 0px; padding: 0px; line-height: 1.1em}
#errorcontainer .segment a {color: #507489; text-decoration: none;}
#errorcontainer .segment a:hover {text-decoration: underline;}
#errorcontainer #listing {padding: 0px 0px 0px 345px;}