/******************************************************************************
* Page                                                                        *
******************************************************************************/

/*RESETTING CSS FOR BROWSERS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}


/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body
{
    background-color:#FFFFFF;
    color:#111111;
    font-family:arial,verdana,sans-serif;
    font-size:12px;
    line-height:20px;
    margin:0px;
}

/******************************************************************************
* Classes                                                                     *
******************************************************************************/
div#Page{width:970px; margin: 0 auto; padding-top:8px}

div.content {}

div.topBarTools{float:right;margin-top:15px}
#topBarToolsContainerRHS{float:right;}
#topBarToolsContainerLHS{float:right; margin-right:30px}

.buttonStyle{ font-family:Arial; background-color: #ffffff; height:25px; width:25px; color:black; font-size: 12px;padding-left:0px}
.textBoxStyle{border:solid 1px gray;border-style:inset; height:18px;}

div.topBar {height:75px; background-position:left; background-image:url(assets/images/topLogoBar.jpg); background-repeat:no-repeat; }

a {color:Gray; text-decoration:none;}

.navBarSubMenuStaticItem {border-left:solid 2px gray; padding-bottom:5px;color:black; padding-top:8px; padding-bottom:8px; padding-right:15px; padding-left:15px;z-index: 100;}
.navBarSubMenuStaticItem a:focus{color: #900028;text-decoration: none;z-index: 100;}
.navBarSubMenuStaticItem a:hover{color: #900028;text-decoration: none;z-index: 100;}
.navBarSubMenuStaticItem a:active{color: #900028;text-decoration: none;z-index: 100;}

.navBarSubMenuDynamicItem {border-bottom:solid 1px gray;padding-left:11px; color:black; padding-bottom:10px; margin-bottom:5px;z-index: 100;}
.navBarSubMenuDynamicItem a{background-image:url(assets/images/Square.png); background-position:left center; background-repeat:no-repeat; z-index: 100;}
.navBarSubMenuDynamicItem a:focus{color: #900028;text-decoration: none;z-index: 100;} 
.navBarSubMenuDynamicItem a:hover{color: #900028;text-decoration: none;z-index: 100;}
.navBarSubMenuDynamicItem a:active{color: #900028;text-decoration: none;z-index: 100;}

.menuItemSelected{border-left:solid 2px #900028; color:#900028; z-index: 100;}

.navBarSubMenuDynamic {padding-top:10px;padding-left:8px; padding-right:8px; border-bottom:solid 4px gray;  background-repeat:repeat; background-image:url(assets/images/SubMenuMainBackground.png);z-index: 100;}

div.topNavBar {width:100%; float:left;margin-right:15px; margin-top:35px; padding-bottom:5px; border-bottom:solid 1px gray; margin-right:20px;z-index: 100;}
.topNavBarBtn {float:right; z-index: 100;}
div.topNavContainer{padding-bottom:10px;padding-left:15px;  height: 68px; background-position:bottom; background-image:url(assets/images/topNavBackground.png); background-repeat:repeat-x; margin-bottom:15px;z-index: 100;}

div.content h2{color:#900028;  font-size:20px; font-weight:normal; margin-top:15px; margin-bottom:15px;}
div.content h4{margin-top:15px;}
div.content p,li{line-height:26px;}

div.contentPane1{ width:54%; float:left; }
div.contentPane2{ width:45%; float:right;}

div.contentPadder1{ float:left; padding:8px; padding-top:4px;overflow: auto; height: 550px; }
div.contentPadder1 img{float:right;}
div.contentPadder1 h3{color:#900028;  font-size:13px; font-weight:normal; margin-top:5px; margin-bottom:5px;}

div.contentPadder2{ float:right; padding-top:8px;padding-left:4px;padding-top:4px;}
div.contentPadder2 img{float:right;}

div#IntroImage{float:none; width:100%; }
div#IntroImage img{float:left; clear:right;}
div#PrincipalMessage {float:left}
div#PrincipalMessage img{float:left; margin-right:10px; margin-top:10px;}
div#PrincipalMessage span{font-weight:bold;}
div#PrincipalMessage p{margin-top:10px;}

div#InfoLinkPanesContainer{display:block;float:right;width:400px;}

div.largeBox{width:195px;}
div.largeBox h4{margin-top:0px; padding-left:5px;color:white; height:22px;padding-bottom:12px; margin-bottom:0px; background-repeat:no-repeat;}
div.largeBox li{background-image:url("assets/images/more.png"); background-position:bottom; background-repeat:no-repeat;color:White; font-size:12px; background-color:#f7931e; margin:5px; padding:5px; padding-bottom:15px; line-height:15px;}
div.largeBox a{color:white; line-height:15px;}
div.largeBox div{height:100%; width:100%; padding-bottom:10px; float:left;background-position:bottom; background-repeat:no-repeat;}

div#RelatedInformationPane {float:left;}
div#RelatedInformationPane div{float:left; background-color:#f8a84b; background-image: url(assets/images/relatedInformationPaneFooter.jpg);}
div#RelatedInformationPane h4{background-image:url(assets/images/relatedInformationPaneHeader.jpg);}

#PupilsImage {margin-bottom:10px;}

div#CollegeNewsPane {float:left; margin-bottom:30px;}
div#CollegeNewsPane div{float:left; background-color:#f8a84b; background-image: url(assets/images/relatedInformationPaneFooter.jpg);}
div#CollegeNewsPane h4{background-image:url(assets/images/relatedInformationPaneHeader.jpg);}

div#EventsAnnouncementsPane {float:right; margin-bottom:30px;}
div#EventsAnnouncementsPane div{float:left; background-color:#acc470; background-image: url(assets/images/EventsAnnouncementsPaneFooter.jpg);}
div#EventsAnnouncementsPane h4{background-image:url(assets/images/EventsAnnouncementsPaneHeader.jpg);}
div#EventsAnnouncementsPane li{background-image:url("assets/images/more_Green.png");background-color:#8eb73e;}

div.smallBox{width:195px; margin-bottom:10px; }
div.smallBox a{ margin:5px; font-size:12px; width:100px; color:white; line-height:15px;float:left;}
div.smallBox img{margin-right:5px;}
div.smallBox h4{float:left; width:100%; margin-top:0px;padding-left:5px; color:white; height:22px;padding-bottom:12px; margin-bottom:0px; background-repeat:no-repeat;}
div.smallBox div{  float:left; width:100%; padding-bottom:10px; min-height:90px; background-position:bottom; background-repeat:no-repeat;}

div#SmallBoxesWrapper{float:left; width:100%}
div#smallBoxesContainerRHS{float:right; width:200px }
div#smallBoxesContainerLHS{float:left; width:200px }

div#UsefulLinksPane{float:right;}
div#UsefulLinksPane div{background-color:#d8b380; background-image:url(assets/images/usefulLinkPaneFooter.jpg);}
div#UsefulLinksPane h4{background-image:url(assets/images/usefulLinkPaneHeader.jpg);}

div#UsefulLinksPane2{float:right;}
div#UsefulLinksPane2 div{background-color:#a2a97a; background-image:url(assets/images/usefulLinkPane2Footer.jpg);}
div#UsefulLinksPane2 h4{background-image:url(assets/images/usefulLinkPane2Header.jpg);}

div#WhatStudentsSayPane {float:right}
div#WhatStudentsSayPane div{background-color:#8ed0bf; background-image:url(assets/images/WhatStudentsSayPaneFooter.jpg);}
div#WhatStudentsSayPane h4{background-image:url(assets/images/WhatStudentsSayPaneHeader.jpg);}

div#SportsTennisCentrePane {float:left}
div#SportsTennisCentrePane div{background-color:#a56cab; background-image:url(assets/images/SportsTennisCentrePaneFooter.jpg);}
div#SportsTennisCentrePane h4{background-image:url(assets/images/SportsTennisCentrePaneHeader.jpg);}

div#AdultEducationPane {float:right}
div#AdultEducationPane div{background-color:#f16e77; background-image:url(assets/images/AdultEducationPaneFooter.jpg);}
div#AdultEducationPane h4{background-image:url(assets/images/AdultEducationPaneHeader.jpg);}

div#FullTimeSubjectsPane {float:left}
div#FullTimeSubjectsPane div{background-color:#9bb9e1; background-image:url(assets/images/FullTimeSubjectsPaneFooter.jpg);}
div#FullTimeSubjectsPane h4{background-image:url(assets/images/FullTimeSubjectsPaneHeader.jpg);}

div.pdfDownload{float:left;}
#pdfIcon{float:left;}
#pdfIcon2{float:left;}

div.footer {float:right; clear:both; width:500px; }
div.footer li{color:Gray;float:left; padding-right:10px; border-right:solid 1px gray; padding-left:10px;}
div.footer a {font-size:10px;}
div.footer li.last{padding-right:0px; border-right:none}
div.footer li.first{padding-left:0px;}

/*quick css styling for sample content pages: facilities and vacancies pages*/
.sampleBox{clear:both; border:solid 0px gray; height:135px; padding-right:10px; margin-bottom:15px;padding-top:15px;padding-bottom:15px;}
#sampleDiv{ float:left;}
#sampleDiv li{float:left;}



.Tabs .ajax__tab_header {font-family:sans-serif;font-size:12px;border-bottom:0px solid #999999;}
.Tabs .ajax__tab_outer { background:url("./assets/images/tabs/tab-right.gif") no-repeat right;height:21px;}
.Tabs .ajax__tab_inner {padding-left:3px;background:url("./assets/images/tabs/tab-left.gif") no-repeat;}
.Tabs .ajax__tab_tab {height:21px;width:110px;padding:0px;margin:0;background:url("./assets/images/tabs/tab.gif") repeat-x;}
.Tabs .ajax__tab_hover .ajax__tab_outer {background:url("./assets/images/tabs/tab-active-right-red.gif") no-repeat right;}
.Tabs .ajax__tab_hover .ajax__tab_inner {background:url("./assets/images/tabs/tab-active-left.gif") no-repeat;}
.Tabs .ajax__tab_hover .ajax__tab_tab {background:url("./assets/images/tabs/tab-active-red.gif") repeat-x;}
.Tabs .ajax__tab_active .ajax__tab_outer {background:url("./assets/images/tabs/tab-active-right-red.gif") no-repeat right;}
.Tabs .ajax__tab_active .ajax__tab_inner {background:url("./assets/images/tabs/tab-active-left.gif") no-repeat;}
.Tabs .ajax__tab_active .ajax__tab_tab {background:url("./assets/images/tabs/tab-active-red.gif") repeat-x;border-bottom:1px solid #999999;color:Maroon;}
.Tabs .ajax__tab_body {font-family:arial,verdana,sans-serif;font-size:10pt;border:0px solid #999999;border-top:0;padding:8px; padding-left: 0px;padding-right:20px; background-color:#ffffff; margin:none;} 


.Tabs2 .ajax__tab_header {font-family:sans-serif;font-size:12px;border-bottom:0px solid #999999;}
.Tabs2 .ajax__tab_outer { background:url("./assets/images/tabs/tab-right.gif") no-repeat right;height:21px;}
.Tabs2 .ajax__tab_inner {padding-left:3px;background:url("./assets/images/tabs/tab-left.gif") no-repeat;}
.Tabs2 .ajax__tab_tab {height:21px;width:110px;padding:0px;margin:0;background:url("./assets/images/tabs/tab.gif") repeat-x;}
.Tabs2 .ajax__tab_hover .ajax__tab_outer {background:url("./assets/images/tabs/tab-active-right-red.gif") no-repeat right;}
.Tabs2 .ajax__tab_hover .ajax__tab_inner {background:url("./assets/images/tabs/tab-active-left.gif") no-repeat;}
.Tabs2 .ajax__tab_hover .ajax__tab_tab {background:url("./assets/images/tabs/tab-active-red.gif") repeat-x;}
.Tabs2 .ajax__tab_active .ajax__tab_outer {background:url("./assets/images/tabs/tab-active-right-red.gif") no-repeat right;}
.Tabs2 .ajax__tab_active .ajax__tab_inner {background:url("./assets/images/tabs/tab-active-left.gif") no-repeat;}
.Tabs2 .ajax__tab_active .ajax__tab_tab {background:url("./assets/images/tabs/tab-active-red.gif") repeat-x;border-bottom:1px solid #999999;color:Maroon;}
.Tabs2 .ajax__tab_body {font-family:arial,verdana,sans-serif;font-size:10pt;border:0px solid #999999;border-top:0;padding:8px; padding-left: 0px;padding-right:20px; background-color:#ffffff; margin:none} 

.TabsNew .ajax__tab_header {
	font-family: sans-serif;        
	font-size: 12px;   	
	  
}         
	
.TabsNew .ajax__tab_outer 
{
	padding-right: 0px;        
	height: 20px;        
	background-color:#E8E8E8 ;        
	margin-right: 2px; 
	margin-bottom:2px;       
	    
	  
}         
	
.TabsNew .ajax__tab_inner 
{
	padding-left: 0px;        
	background-color: #E8E8E8 ; 
	
}         

.TabsNew .ajax__tab_tab 
{
	height:20px; 
	width:110px;        
	margin: 0;   
	text-align:center  ;  
  
}         

.TabsNew .ajax__tab_hover .ajax__tab_outer 
{
	background-color: #D8D8D8     ;
	
}         

.TabsNew .ajax__tab_hover .ajax__tab_inner 
{
	background-color:#D8D8D8   ;
		

}         

.TabsNew .ajax__tab_hover .ajax__tab_tab {}        
.TabsNew .ajax__tab_active .ajax__tab_outer 
{
	background-color: #D8D8D8 ;        
  
}         

.TabsNew .ajax__tab_active .ajax__tab_inner 
{
	background-color:#D8D8D8 ;     
}         

.TabsNew .ajax__tab_active .ajax__tab_tab 
{
	color:Maroon;}        

.TabsNew .ajax__tab_body 
{
	font-family: sans-serif;        
	font-size: 12px;        
	border: 0px solid #999999;        
	border-top: 0;        
	padding: 8px;        
	background-color: #ffffff;      
}


#randm, #randm img {
width:540px;
height:250px;
}

div .outcomes
{ 
	color:black;
}

.outcomes ul
{ 
	list-style:bulleted;
	list-style-type:square;
	list-style-position:outside;
	margin:0 0 0 20px;
}



/* Accordion */
.accordionHeader
{
    border: 1px solid #DCDCDC;
    color: black;
    background-color: #DCDCDC;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}
 
#master_content .accordionHeader a
{
      color: #CC9999;
      background: none;
      text-decoration: none;
}
 
#master_content .accordionHeader a:hover
{
      background: none;
      text-decoration: underline;
}
 
.accordionHeaderSelected
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #CC9999;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}
 
#master_content .accordionHeaderSelected a
{
      color: maroon;
      background: none;
      text-decoration: none;
}
 
#master_content .accordionHeaderSelected a:hover
{
      background: none;
      text-decoration: underline;
}
 
.accordionContent
{
    background-color: #F0F0F0;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
          font-family: Arial, Sans-Serif;
      font-size: 12px;
      font-weight: normal;
      text-align:left;

     
}

.accordionContentWhite
{
    background-color:White;
    border: 1px solid #DCDCDC;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
          font-family: Arial, Sans-Serif;
      font-size: 12px;
      font-weight: normal;
     
}

.accordionHeaderLightGrey
{
    border: 1px solid #DCDCDC;
    color: black;
    background-color: #F5F5F5 ;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

.accordionHeaderGreen
{
    border: 1px solid #DCDCDC;
    color: white;
    background-color: #8fb733;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

.accordionHeaderOrange
{
    border: 1px solid #DCDCDC;
    color: white;
    background-color: #F6921E;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

.accordionHeaderSTC
{
    border: 1px solid #DCDCDC;
    color: white;
    background-color: #8C4E91;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

.accordionHeaderTheatre
{
    border: 1px solid #DCDCDC;
    color: white;
    background-color: #3EBCA9;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

.accordionHeaderMusic
{
    border: 1px solid #DCDCDC;
    color: white;
    background-color: #A4B4C8;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}
#homeLogo {  

     background-image:url(/assets/images/TopLogoBar.jpg);  

     display:block;  

     height:58px;  

     text-indent:-9999px;  
  

     width:279px;  


 }