/*      TAGS      */

body {margin: 0; padding: 0; background-image:url(/images/back-splatter.jpg); background-repeat: no-repeat; background-position: right top; font-size: 1em; font-family: Verdana, sans-serif;}

address { font-style: normal; margin-top:20px;}

h3 {font-weight: bold; font-size: 1.2em; font-family: Arial, Helvetica, sans-serif;}

hr { display: block; clear: both; border: none; background: #ccc; height: 1px;}



/*       BANNER       */

#bannerWrapper {position: absolute; top: 37px; width: 100%; min-width: 970px; height: 166px; z-index: 50; left: 0px; }

#banner {width: 950px; position: absolute; left: 0; top: 37px; z-index:60; height: 166px;}

#switchNav {position: absolute; left: 20px; top: 100px; height: 21px; z-index: 100; font-size: 0.7em; width: 900px;}
#switchNav h2, #helpNav h2 /*IE6*/ {width: 94px; height: 21px; float: left; font-size: 0.1em; margin: 0 0 0 550px; background-position: right center;}
#switchNav div, #helpNav div {width: 250px; height:21px; float: right; padding: 5px 0 0 0; text-align: right;}
#switchNav a, #helpNav a {color: #000; text-decoration: none;}

#helpNav {position: absolute; left: 20px; top: 130px; height: 21px; z-index: 100; font-size: 0.7em; width: 900px}


#breadCrumb {color: #fff; font-size: 0.7em; position: absolute; left: 20px; top: 170px; z-index: 100; width: 900px; text-align: right;}
#breadCrumb strong {font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 1.3em; text-transform: capitalize;}
#breadCrumb a {color: #fff; text-decoration: underline;}




/* TABS */

#tabHolder { position: relative; margin: 198px 0 0 256px;}
ul#tabs {margin: 0; padding: 0; list-style-type: none; font-size: 0.65em; text-transform: uppercase;}
ul#tabs li /*IE all*/ {margin: 0 -3px 0 0; padding: 9px 0 5px 12px; background:url(/images/layout/tab-left.gif) no-repeat left bottom; display: inline;}
ul#tabs li a {text-decoration: none; background:url(/images/layout/tab-right.gif) no-repeat right bottom; padding: 9px 12px 5px 0;color: #272725;}
ul#tabs li a:hover { color: #fff;}
ul#tabs li a span { z-index:400;}

ul#tabs li#activeTab {background:url(/images/layout/active-tab-left.gif) no-repeat left bottom}
ul#tabs li#activeTab a {background:url(/images/layout/active-tab-right.gif) no-repeat right bottom; color: #fff; }
ul#tabs li#activeTab a:hover {color: #b4c041;}





#contentWrapper {width: 920px; padding: 10px 0 20px 0; position: relative; text-align: left;}


/*    NAVIGATION      */


#nav {font-size: 0.7em; margin: 0; padding: 0 0 0 40px; width: 190px; float: left;}


#nav ul {margin: 0; padding: 10px; list-style-type: none; text-transform:capitalize;}
#nav ul li { width: 135px; border-bottom: 1px solid #7392c0; display: block; margin: 0 0 7px 0;}

#nav ul li a { color: #3e3e3d; text-decoration: none; display: block; padding: 3px;}
#nav ul li a:hover { background:url(/images/menu-bullet.gif) no-repeat right center;}

#nav ul li#active a {font-weight: bold; background:url(/images/menu-bullet.gif) no-repeat right center;} 

#nav ul li#active ul {display: block;}
#nav ul li ul {display: none;}

#nav ul li#active ul li { width: 140px; border-bottom: 1px solid #3e3e3d; margin: 0 0 10px 0; text-align: right; font-size: 0.9em;}

#nav ul li#active ul li a {background: none; font-weight: normal;}
#nav ul li#active ul li a:hover {color:#0d908f;}

#nav ul li#active ul li a.subactive {font-weight: bold; color: #0d908f;}


/*     ANNIE       */

#annieHolder {background:  #4992c7  url(/images/annie-top.jpg) center top no-repeat; width: 111px; padding: 167px 10px 25px 10px; color: #fff; position: relative; text-align: center; margin: 0 0 0 10px;}

#annieBottom { background:url(/images/annie-bottom.jpg); width: 131px; height: 25px; position: absolute; bottom: 0px; left: 0px;}


/*  2 COL     */

#columnOne {width: 450px; padding: 0 20px 0 0; float: left;}
#columnTwo {width: 175px; float: left;  font-size: 0.85em;  line-height: normal;  text-align: left;}




/*  MAIN CONTENT     */

#content {
	position: relative;
	float: left;
	width: 674px;
	font-size: 0.8em;
	color: #3e3e3d;
	line-height: 1.5em;
	padding: 20px 0 0 15px;
	text-align: left;
}

#content h1 {font-family: Impact, Arial, Helvetica, sans-serif; color: #89a5cf; text-transform: uppercase; font-weight: normal; margin: 0 0 -10px 0; line-height: normal; font-size: 3em;}

#content a {color: #939F27; text-decoration: underline;}
#content a:hover { text-decoration: none;}

#columnOne h2, #content h2 {font-size: 1.6em; font-weight: normal; color: #818D9F; border-bottom: 1px solid #ccc; padding-bottom: 3px; margin-top: 25px;}





/*      HOME PAGE     */

#homeIntro {width: 313px; float: left; padding: 0 20px 0 0;}
#homeMainImage /*IE*/ {width: 341px; float: left; padding: 0 0 0 0; margin: -30px 0 10px 0;}

#promoContainer {float: left; width: 675px; line-height: normal; color: #666; clear: both; text-align: left;}
#promoContainer strong {color: #3e3e3d;}

#promoContainer p {margin-top: 0px;}

.leftPromoBox {float: left; width: 327px; margin: 10px 21px 0 0;}
.rightPromoBox {float: left; width: 327px; margin: 10px 0 0 0;}

#content div.leftPromoBox h2, #content div.middlePromoBox h2, #content div.rightPromoBox h2 /*IE*/ {width: 317px; height: 23px; color: #fff; margin: 0; text-align: right; vertical-align: bottom; padding: 30px 10px 5px 0; font-family: Impact, Arial, Helvetica, sans-serif; font-size: 1.8em; font-weight: normal; text-transform: uppercase; line-height: normal; border: 0; }

div.leftPromoBox h2 {background : #3561a3 url(/images/promoBoxHead1.gif) no-repeat left bottom;}
div.middlePromoBox h2 { background : #3f3f3f url(/images/promoBoxHead3.gif) no-repeat left bottom;}
div.rightPromoBox h2 {background : #b4c041 url(/images/promoBoxHead2.gif) no-repeat left bottom;}

div.leftPromoBox div, div.middlePromoBox div, div.rightPromoBox div {padding: 10px 0 0 17px;}

/* FOOTER  */

#footer {background: #D6D6D6; font-size: 0.7em; color: #666; text-align: center; width: 675px; float: right; padding: 8px 0; margin: 20px 0; border-top: 1px solid #666;}
#footer a {color: #666; text-decoration: none;}



/*  2 COL     */

#columnOne {width: 477px; padding: 0 20px 0 0; float: left;}
#columnTwo {width: 175px; float: left;  font-size: 0.85em;  line-height: normal;  text-align: left;}


/*     SUBNAV       */

#subNavTop {width: 175px; color: #fff; padding: 50px 0 0 0;}

#subNavTop ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	text-align: right;

}
#subNavTop ul li { padding: 4px 10px 5px 10px;}
#subNavTop ul li ul {display: none; visibility: hidden;}
#subNavTop ul li#subactive ul { display: block; visibility: visible; margin: 5px 3px 5px 0; padding: 0; border-right: 1px solid #666}
#subNavTop ul li#subactive ul li a { font-weight: normal;}

#subNavTop ul li a {color: #333; text-decoration: none; }
#subNavTop ul li#subactive a {font-weight: bold;}
#subNavTop ul li a:hover {color: #999;}
#subNavTop ul li#subactive ul li#subactive2 a {font-weight: bold;}
#subNavBottom {width: 175px; background: url(/images/volunteer-sub-menu-bottom.gif); height: 18px; padding: 0; margin:0;}

#columnTwo h2 /*IE*/ {width: 165px; height: 27px; color: #fff; margin: 0; text-align: right; vertical-align: bottom; padding: 20px 10px 0 0; font-family: Impact, Arial, Helvetica, sans-serif; font-size: 2em; font-weight: normal; text-transform: uppercase; line-height: normal; margin: 15px 0 5px 0; background : #1875b8 url(/images/promoBoxHead2.gif) no-repeat left bottom; }

.volunteerSubBack {background:url(/images/volunteer-sub-menu.gif) no-repeat left top #d5db83;}
.lo2sSubBack {background:url(/images/lo2s-sub-menu.gif) no-repeat left top #d5db83;}
.teacherSubBack {background: url(/images/teacher-sub-menu.gif) no-repeat left top #d5db83;}
.projectsSubBack {background:url(/images/projects-sub-menu.gif) no-repeat left top #d5db83;}
.pupilSubBack {background:url(/images/layout/pupil-nav-back.gif) no-repeat left top #d5db83;}


/*    CLASSES     */
.rightImage {float: right; border: 1px solid #b4c041; padding: 2px; position: relative; margin: 0 0 0 20px;}
.leftImage {float: left; border: 1px solid #b4c041; padding: 2px; position: relative; margin: 0 20px 0 0;}
.rightImageNoBorder {float: right; border: 0; position: relative; margin: 0 0 0 20px;}
.rightImage_rightColumn {float: right; border: 1px solid #b4c041; padding: 2px; position: relative; margin: 0 0 0 7px;}
.offLeft {position: absolute; left: -9999px;}

ul.linkList {padding: 0; margin: 0; list-style-type: none;}
ul.linkList li {padding: 3px 0 3px 19px; background:url(/images/link-bullet.gif) no-repeat left center;}

.rightTeamImage {float: right; width: 186px; text-align: center; margin: 0 0 0 20px;}
.rightTeamImage img {border: 1px solid #ccc; padding: 2px;}

.jargon-nav-holder {
	background: url(/images/layout/jargon-nav-back.gif) no-repeat center center; height: 43px; width: 410px; padding: 24px 20px 0 20px; color: #999; font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; font-weight: bold; text-align: center; margin-left: 15px;
}

#content div.jargon-nav-holder a {color: #fff;}

p.top { text-align: right; font-size: 0.85em;}

table.docTable {width: 100%; font-size: 0.85em; margin-bottom: 20px;}
table.docTable td, table.docTable th {vertical-align: top; border-bottom: 1px solid #ccc; padding: 3px; text-align: left;}
table.docTable th {color: #333; background: #eee; font-weight: bold;}
table.docTable caption {font-size: 1.6em; font-weight: normal; color: #818D9F; padding-bottom: 3px; text-align: left; display: block; width: 100%;}