/* CSS Document */





/* CSS Document create for new architecture site, this document determines all the layout of pages including:





1. GENERAL


2. TEXT


3. LINKS


4. HEADER


5. CONTENT








/* ---- 1. GENERAL ---- */





body, html


{


	height:100%;


	margin:0px;


	padding:0px;


}








body{


	margin:0px;


	padding:0px;


	


	font-size:100%;





	background:#ededed;


	line-height:0.76em;


	word-spacing:0.01em;


	letter-spacing:0.01em;


	text-align:left;


}








/* ---- 2. TEXT ---- */





h1{font-family: Arial, Helvetica, sans-serif; font-size:1.2em; font-weight:normal; margin-top:11px; margin-bottom:20px;}


h2{font-family: Arial, Helvetica, sans-serif; font-size:1.1em; font-weight:bold; color:#555555; margin-top:0px; }


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


h4{font-family: Arial, Helvetica, sans-serif; font-size:1em; font-weight:normal; color:#AAAAAA; margin-top:32px; margin-bottom:15px; line-height:1em}


h4.snippetheader{font-family: Arial, Helvetica, sans-serif; font-size:1.4em; font-weight:normal; color:rgb(51, 51, 51); margin-top:0.5em; margin-bottom:0.5em;}

.people {font-family: Arial, Helvetica, sans-serif; font-size:100%; font-weight:bold; color:#555555; margin-top:0px; }






p{font-family: Arial, Verdana, Helvetica, sans-serif; font-size:1.1em; margin:5px 0px 5px 0px; padding:0px; line-height:1.1em;}


span{font-size:1em;}





ul,li{font-size:0.88em; list-style:none; padding:0px; margin:0px;}


li li {font-size: 100%; } /* fix em inherit */





.contentRight h1{font-family: Arial, Verdana, Helvetica, sans-serif; font-weight:bold; font-size:1em; margin-bottom:-13px;}


.contentRight h2{font-family: Arial, Verdana, Helvetica, sans-serif; font-size:0.9em; margin-bottom:-13px;}


.contentRight h3{font-family: Arial, Helvetica, sans-serif; font-size:0.95em; font-weight:100; margin-top:5px; margin-bottom:-7px;}


.contentRight p{font-family: Arial, Verdana, Helvetica, sans-serif; font-size:0.8em;}





.imageComment{font-size:0.8em; font-weight:normal; color:#666666;}











/* ---- 3. LINKS ---- */





a:link{color:#666666; text-decoration:none}


a{color:#999999; text-decoration:none}


a:visited{color:#999999; text-decoration:none}


a:active{color:#000000; text-decoration:none}


a:hover{color:#000000; text-decoration:none}


a:focus{color:#000000; text-decoration:none}


.skiplink{display:none;}








/* ---- 4. HEADER ----- */





.header{


	height:84px;


	width:100%;


	margin:0px;


	padding:0px;


	background-color:#5E7FA8;


}


.menu{


	width:100px;


	background-color:#102873;


}








/* ---- 5. CONTENT ---- */





.content{


line-height:0.76em;


word-spacing:0.02em;


letter-spacing:0.01em;


float:left;


width:635px;


height:100%;


background-color:#ffffff;


padding:10px 0px 10px 10px;


margin-top:5px;


font-size:1em;


}





.siteMap{


width:635px;


padding:10px 0px 10px 0px;


}





.siteMap ul{


width:100px;


padding-left:3px;


float:left;


height:100%;


border-left:1px dotted #999999;


font-size:0.76em;


color:#666666;


}





.siteMap h4{


color:#000000;





text-transform:uppercase;


font-size:1.1em;


font-weight:bold;


padding:0px 0px 7px 0px;


margin:0px;}





.contentLeft ul li{


background:url(/images/arrow.jpg) no-repeat;


background-position:20px 10px;


padding:10px 40px 10px 40px;


font-size:1.1em;


color:#5A7BA4;


/*border-bottom:1px #CCCCCC dotted;*/


}





.title{


margin-top:0px;


	margin-bottom:5px;


	width:425px;


	float:left;


}











/* ---- Main Text ---- */


.mainText{


padding-top:0px; 


width:477px; 


color:#777777;


float:left;	


font-size:0.7em;


}





.mainText h3{font-size:1.2em;}





.mainText p{padding:5px 0px 5px 0px; margin-top:0px; margin-bottom:0px; text-align:left;}














/* ---- SEARCH BOX ---- */





#searchMain{


float:left;


border-color:#CCC;


border-width:2px;


width:126px;


height:19px;


font-family:Arial, Helvetica, sans-serif;


font-size:0.7em;


color:#666666;


margin-top:43px;


margin-left:63px;


}





.button{


float:left;


border:none;


margin-top:43px; 


}








/* ---- LEFT HAND CONTENT CLASSES ---- */





.contentLeft{


float:left;


width:480px;


height:100%;


margin-right:8px;


margin-top:-9px;


}


.contentLeft h3{font-size:0.8em;}








/* ---- BREADCRUMB TRAIL ---- */





div#breadcrumbs{font-family:Arial, Helvetica, sans-serif; font-size:12px; width:468px; background-color:#ccc; margin-bottom:12px; padding:6px;}





div#breadcrumbs a{color:#FFFFFF;}





div#breadcrumbs a:hover{color:#DDDDDD;}





div#breadcrumbs ul{font-size:1.1em; color:#FFFFFF; display:inline; border:none; margin-left:-6px;}





div#breadcrumbs ul li.image{display:inline; background-image:url(/images/arrowseperator.png); background-position:97%; background-repeat:no-repeat; background-color:#4f6e95; border:none; padding-right:13px; padding-left:4px; padding-top:6px; padding-bottom:5px;}





div#breadcrumbs li.noimage{display:inline; background-color:#4f6e95; border:none; padding-left:4px; padding-top:6px; padding-bottom:5px;}





div#breadcrumbs ul li.lastimage{display:inline; color:#4f6e95; background-image:url(/images/arrowseperatorlast.gif); background-repeat:no-repeat; border:none; padding-right:13px; padding-top:6px; padding-bottom:5px;}














/* ---- SHADOW RIGHT HANDSIDE ---- */





.righthandshadow{background-image:url(/images/shadow.jpg); background-repeat:repeat-y;}











/* ---- RIGHT HAND CONTENT CLASSES ---- */





.contentRight{float:left; width:140px; margin-left:1px; margin-top:-14px;}





/* END */





.subMenu p{font-size:0.7em; color:#999999;}


.subMenu{height:348px;}


.subMenu2{}


.programme{float:left; width:128px; margin-right:10px; height:200px;}


.programme ul li{padding:10px 2px 10px 15px; background-position:0px 10px;}


.progText{padding:5px; padding-top:20px; }


.progText p, .progText strong{text-align:left;}


.side p, .side span{font-size:0.7em;}


.side h3{font-size:0.8em;}





.bottomofimage{


margin-bottom:3px;


}





.bottomofimageLarge{


margin-bottom:2px;


}





/*.sideMenu{


margin-top:20px;


}*/





.sideMenu li{


text-transform:uppercase;


border-top:1px solid #000000;


font-weight:bold;


font-size:0.8em;


padding:2px 0px 2px 0px;





}


.sideMenu li ul li{


border-top:none;


text-transform:capitalize;


font-weight:normal;


font-size:1em;


color:#666666;


padding:2px 0px 2px 0px;





}


.sideMenu li a:link, .sideMenu li a:visited { text-decoration:none; color:#000000;}


.sideMenu li a:hover, .sideMenu li a:active { text-decoration:none; color:#000000;}


.sideMenu a { text-decoration:none; color:#000000;}


.sideMenu a:hover{ text-decoration:none; color:#000000;}


.bluetext{ font-size:0.86em; color:#5A7BA4;}


.blue{color:#5A7BA4;}





.caseStudies{width:425px; font-size:0.7em;}


.caseImage{float:left; width:90px; padding-right:10px;}


.caseText{float:left; padding-left:0px; width:310px; text-align:justify; }


.caseText1{float:left; padding-left:0px; text-align:justify; }


.caseText p{font-size:1em; text-align:left;}


.caseText h3{font-size:1.1em;}





.imgcomment{


font-size:0.76em;


background-color:#eeeeee;


color:#000000;


padding:5px;


border-left:5px solid #aaaaaa;}





.imgcomment p{


font-size:1em;


background-color:#eeeeee;


color:#000000;


padding:2px;


margin:0px;


}





.imgcomment a{


font-size:1em;


background-color:#eeeeee;


text-decoration:underline;}





.case{


float:left;


width:180px;


margin-right:10px;


padding-right:10px;


border-right:#CCCCCC 1px dotted;


margin-bottom:20px;





}











/* HEADER */


#headerlinks{float:right;width:150px;font-family:Arial, Helvetica, sans-serif;margin-top:-65px;}


#headerlinks a{color:#FFFFFF;font-size:11px;}














/* SIDE MENU GRAY BOXES */





.graybox{font-size:12px; color:#FFFFFF; background-color:#BBBBBB; height:45px; padding-top:3px; padding-left:2px; padding-right:5px; padding-bottom:5px;}


.graybox a{font-family:Arial, Helvetica, sans-serif; color:#FFF;}


.graybox strong{font-family:Arial, Helvetica, sans-serif; color:#FFFFFF;}


.graybox a:hover{color:#EEE;}





.graybox2ndLevel{font-size:12px; color:#FFFFFF; background-color:#BBBBBB; height:35px; padding-top:3px; padding-left:2px; padding-right:5px; padding-bottom:5px;}


.graybox2ndLevel a{font-family:Arial, Helvetica, sans-serif; color:#FFF;}


.graybox2ndLevel strong{font-family:Arial, Helvetica, sans-serif; color:#FFFFFF;}


.graybox2ndLevel a:hover{color:#FFF;}





.graybox3rdLevel li{font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color:#BBBBBB; padding-left:4px; padding-top:4px; padding-bottom:4px; margin-top:1px; list-style:none; list-style-position:outside;}


.graybox3rdLevel a{color:#FFFFFF;}


.graybox3rdLevel a:hover{color:#EEE;}





.graybox4thLevel li{font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color:#BBBBBB; padding-left:4px; padding-top:4px; padding-bottom:4px; margin-bottom:1px; list-style:none;list-style-position:outside;}


.graybox4thLevel a{color:#FFFFFF;}


.graybox4thLevel a:hover{color:#EEE;}





.graybox2nd{width:466px; font-size:12px; color:#FFFFFF; background-color:#DDDDDD;}














/* STAFF */





div#staffSection a{color:#4f6e95;}





div#staffSection a:hover{color:#000000;}








/* TRANSPARENCY */





/* .transblue{filter:alpha(opacity=10); opacity:.10; background:#0099FF; width:140px; height:80px;} */








/* DOTTED SEPERATOR */





.lineDotted{ 


clear:both;


border-top:1px dotted #666666; 


height:2px;


margin-top:3px;


margin-bottom:3px;


}














/* BLACK SEPERATOR */





.standout{


padding-top:3px;


padding-bottom:3px; 


border-top:1px solid #000000;


}





.standoutThick{


padding-top:3px;


padding-bottom:3px; 


border-top:2px solid #000000;


}


/* ------------- end ---------------*/

















.white{color:#FFF;}


.fillblu,#blu{background-color:#fff;}


.lastupdated {


	font-family: Arial, Helvetica, sans-serif;


	font-size: 10px;


}





a.headertext:hover, a.headertext:active {


color:#FFFFFF;


text-decoration:underline;


font-size:0.75em; 


}


a.headertext:link, a.headertext:visited {


color:#FFFFFF;


text-decoration:none;


font-size:0.75em; 


}


.lastupdated { color:#666666; } 


.footer{ margin-top:2px; width:100%; float:left; vertical-align:bottom;  color:#999999; font-size:0.68em; text-align:left}


.grey{ color:#999999;}











/*/////////MAIN MENU////////*/





#invitation #nav-invitation,


#curriculum #nav-curriculum,


#character #nav-character,


#casestudies #nav-casestudies,


#facilities #nav-facilities,


#people #nav-people,


#contact #nav-contact,


#home #nav-home


{


background:url(/images/arrowinvert.jpg) no-repeat;


background-position:5px 10px;


padding:5px 15px 5px 25px;


display:block;


border-bottom:1px #CCCCCC dotted;


background-color:#EEEEEE;


}





.shaddow{


background:url(/images/tplgif_shad.jpg) repeat-y;


width:25px;


background-color:#ECEBE9;





}





.current {color:#FF0000;}








input {border: 1px solid #000000;}





.sidemenu li{padding-top:5px; padding-bottom:5px;


display:block;


border-bottom:1px #CCCCCC dotted;


font-weight:bold;


}





.sidemenu li:hover{


background-color:#EEEEEE;


}





.smalltext{font-size:80%; font-weight:normal;}











/* CSS styles for jQuery menu
Original
 #main_navigation{width:110px;background-color:#1d3c6b;color:#fff;margin:0;padding:0; margin-top:58px;}


#navcontainer,#navcontainer ul,#navcontainer li{list-style-type:none;margin:0;padding:0;}


#navcontainer li li a{padding:4px 3px 4px 7px; background-color:#FFF; border:none; color:#000;}


#navcontainer li li a:hover{color:#888; background-color:#FFFFFF;}


#navcontainer li li a.active{background-color:#FFF; color:#888;}


#navcontainer a{font-family:Arial, Helvetica, sans-serif;color:#fff;display:block;text-decoration:none;border-bottom:1px solid #FFF;padding:6px 3px 5px 5px;}


#navcontainer a:hover{background-color:#4f6e95; color:#FFF;}


#navcontainer a.active{background-color:#4f6e95;}
*/


#main_navigation{width:110px;background-color:#fff;color:#000;margin:0;padding:0; margin-top:58px;}


#navcontainer,#navcontainer ul,#navcontainer li{list-style-type:none;margin:0;padding:0;}


#navcontainer li li a{padding:4px 3px 4px 7px; background-color:#FFF; border:none; color:#000;}


#navcontainer li li a:hover{color:#EFEFEF; background-color:#FFFFFF;}


#navcontainer li li a.active{background-color:#FFF; }


#navcontainer a{font-family:Arial, Helvetica, sans-serif;color:#000;display:block;text-decoration:none;border-bottom:1px solid #FFF;padding:6px 3px 5px 5px;}


#navcontainer a:hover{background-color:#EFEFEF; color:#000;}


#navcontainer a.active{background-color:#EFEFEF;}








.galleria{list-style:none;width:200px; float:left;}


.galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 10px 10px 0}


.galleria li a{display:none}


.galleria li div{position:absolute;display:none;top:0;left:180px}


.galleria li div img{cursor:pointer}


.galleria li.active div img,.galleria li.active div{display:block}


.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}


.galleria li .caption{display:block;padding-top:.5em}


* html .galleria li div span{width:400px} /* MSIE bug */