/*      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;}

a {outline: none;}

a img {border: none;}



/*       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 520px; background-position: right center;}
#switchNav div, #helpNav div {width: 280px; 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;}

#gallery-banner {position: absolute; top: 0px; left: 800px; background:url(/images/gallery-lift-off.png); width: 171px; height: 174px; text-indent: -9999px; display: block; outline: none; z-index: 90;} 


/* 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: 12px; margin: 0; padding: 0 47px 0 0; width: 183px; float: left; color: #585858; font-family: Helvetica, Arial, sans-serif; font-weight: bold;}

#nav ul, #nav li {padding: 0; margin: 0 0 2px 0; list-style: none;}

#nav ul li a {background: url(../images/new-layout/nav-normal-back.jpg) left top no-repeat #d9d9d9; display: block; padding: 9px 7px 7px 20px;  text-decoration: none; color: #585858;} 

#nav ul li a:hover, #nav ul li.activeLink a { background:url(../images/new-layout/nav-over-back.jpg) left top no-repeat #7792b9; color: #fff;} 

#nav ul li ul { display: none;} 

#nav ul li.activeLink ul { display: block; background: #d6dee9; line-height: normal; padding: 8px 0 10px 0;} 

#nav ul li.activeLink ul li { margin: 0; padding: 0;}

#nav ul li.activeLink ul li a { background: none; color: #585858; padding: 5px 7px 3px 20px; font-weight: normal; } 

#nav ul li.activeLink ul li a:hover, #nav ul li.activeLink ul li.activeLink a, #nav ul li.activeLink ul li.activeLink ul li a:hover, #nav ul li.activeLink ul li.activeLink ul li.activeLink a {background: #b7c2d2; color: #111;}

#nav ul li.activeLink ul li ul {display: none;}


#nav ul li.activeLink ul li.activeLink ul {display: block; border-left: 1px solid #666; margin: 8px 0 8px 20px; font-size: 11px; padding: 0;}

#nav ul li.activeLink ul li.activeLink ul li a { padding: 5px 7px 3px 7px;}

#nav ul li.activeLink ul li.activeLink ul li a {background: none; color: #585858;}






/*  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;}

#columnOne h2 a, #content h2 a  { color: #818D9F; text-decoration: none;}





/*      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 p {margin-top: 0px;}

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

#content div.leftPromoBox h1, #content div.middlePromoBox h1, #content div.rightPromoBox h1 /*IE*/ {width: 297px; height: 23px; color: #fff; margin: 0; text-align: left; vertical-align: bottom; padding: 10px 15px 25px 15px; font-family: Impact, Arial, Helvetica, sans-serif; font-size: 32px; font-weight: normal; text-transform: uppercase; line-height: normal; border: 0; }

div.rightPromoBox h1 {background : #3561a3 url(/images/promoBoxHead1.gif) no-repeat left bottom;}
div.leftPromoBox h1 {background : #b4c041 url(/images/new-layout/promoBoxHead2.gif) no-repeat right bottom;}

div.leftPromoBox div,  div.rightPromoBox div {padding: 0 0 5px 0;}

div.rightPromoBox div {padding-left: 20px; clear: both; }

div.leftPromoBox h2, div.rightPromoBox h2 {font-family: Impact, Arial, sans-serif; color: #6380a9 !important; border: none !important; font-size: 16px; line-height: 1.3; text-transform: uppercase; margin: 0 0 10px 0; padding: 0 0 0 0;}




.leftPromoBoxsub {float: left; width: 327px; margin: 10px 21px 0 0;}
.rightPromoBoxsub {float: left; width: 326px; margin: 10px 0 0 0;}


.leftPromoBoxsub img, .rightPromoBoxsub img {clear: right;}

.rightPromoBoxsub h3, .leftPromoBoxsub h3  { margin: 20px 0 0 0; padding: 0 0 0 0; font-size: 17px;}

#content div.leftPromoBoxsub h2, #content div.middlePromoBoxsub h2, #content div.rightPromoBoxsub 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.7em; font-weight: normal; text-transform: uppercase; line-height: normal; border: 0; }

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

div.leftPromoBoxsub div, div.middlePromoBoxsub div, div.rightPromoBoxsub div {padding: 10px 0 0 17px;}


.line-p {border-bottom: 1px dotted #ccc; margin: 0 0 20px 0; padding: 0 0 8px 0;}

/* 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;}
#footer-logo {background: #fff; font-size: 0.7em; color: #666; text-align: center; width: 675px; float: right; padding: 8px 0; margin: 0px 0 20px 0;}



/*  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, .rightImageNoBordersub {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%;}

#content table { border-collapse:collapse;}

#content table td {padding: 4px;}

#content table td p {margin-top: 0;}

.album-contain {
	height:160;
	width:110px;
	overflow:hidden;
	float:left;
	padding:10px;
}

.album {
	width:100px;
	height:100px;
	padding:5px;
	border:1px solid #3388cc;
}

.album-image {
	float:left;
	padding:5px;
	width:100px;
	height:100px;
	border:1px solid #3388cc;
	margin:10px;
}

.newslist h2 {clear: right;}