@charset "utf-8";
* {/* it's good practice to zero global margin and padding values to account for differing browser defaults */
	padding: 0; 
	margin: 0;
}
u{
	text-decoration: none;
}
body {
	font: 70% Verdana, Arial, Helvetica, sans-serif;
	word-spacing: 0px;
	letter-spacing: 0px;
	background: #FFFFFF;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
h1, h2, h3, h4, h5, h6{
	font-weight: bold;
	font-size: 1em;
	margin: 0.65em 0 0.2em 0;
}
h1{
	font-size:1.5em;
	color: #004080;
	margin-top: 0.8em;
}
h2{
	font-size:1.3em;
	color: #004080;
	margin-top: 0.8em;
}
h3{
	font-size: 1.15em;
	margin-top: 0.65em;
}
p{
	line-height:1.4em;
	margin:0 0 0.5em 0;
	padding: 0;
}
img{ /*(max image width in mainContent = 356px)*/
	margin: 0;
}
a {
	font-weight: bold;
	color: #0066CC;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
a img{
	border: none;
}
input{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color:#CCE0F5;
	border: 1px solid #004080;
	padding: 0 0.2em;
}
input[type=image]{
/* attribute selectors don't work on older browsers so also need to override style on per input image basis (when a border is unacceptable, e.g. #yl_search_butt) */
	border: none;
	padding: 0;
}
/* ---------- yl header boxes ---------- */
.yl_layout #container {
	width: 100%;  /* this will create a container 100% of the browser width */
	min-width: 770px; /* this prevents the rightBar from 'wrapping' at small window widths. Doesn't work with IE6 or less, hence the javascript file which replicates this behaviour. */
	background: #AAD5FF;
	margin: 0px auto; /* the auto margins (in conjunction with a width) center the page */
	border: none;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.yl_layout #header {
	/* this div contains only the header logo*/ 
	background: #0066CC url(header_bg.jpg) repeat-x;
	text-align: center;
	height: 99px;
	padding: 0px;
}
.yl_layout #subHeader {
	/* this div contains only the site search form*/ 
	background: #0066CC url(circles_bg.gif) no-repeat;
	height: 35px;
	padding: 0px;
}

/* ---------- yl search form styles  ---------- */
#searchTitle{
	/* this div contains only the search header title image*/ 
	position: absolute;
	z-index: 100;
	height: 20px;
	margin: 0;
	/*positioning top right with a fixed width behaves erratically in some browsers, hence the following*/
	width: 100%;
	min-width: 770px;
	left: 0px;
	top: 94px;
	text-align: right;
}
#yl_search{
	margin: 0px;
	padding: 0px;
}
#yl_search_txt{
	float: right;
	margin: 8px 6px;
	height: 17px;
	width: 140px;
}

#yl_search_butt{
	float: right;
	margin: 0px;
	/*next 2 lines required because IE6 doesn't recognise input[type=image]*/
	border: none;
	padding: 0;
}

/* Tips for sidebars:
1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width. 
2. Space between the side of the div and the elements within it can be created by placing content inside another <div>: .navContentBox for #navBar, .contentBox for #mainContent and .rightContentBox for #rightBar.
*/

/* ---------- navigation bar ---------- */
.yl_layout #navBar {
	float: left;
	width: 24%;
	padding: 0px 0px 20px 0px;
}
#navBar ul{
		list-style-type: none;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #FFFFFF;
		font-size: 94%;
		letter-spacing: 0.02em;
}
#navBar li{
		margin: 0;
		display: block;
		border-top: 1px solid #FFFFFF;
		border-bottom: 1px solid #0066CC;
		border-right: 1px solid #AAD5FF;
}
#navBar a{
	display: block;
	height: 1%; /*this is a hack for IE 6 and below otherwise links don't act as blocks*/
	color: #000000;
	padding: 0.3em 0.8em;
	text-decoration: none;
}
#navBar a:active{
	color: #0066CC;
}
#navBar a:hover{ 
	background: #FFFFFF url(Imgs/navBar_BG.gif) no-repeat right center;
}
#navBar .currentLink a{ /*use to pick out the current page in the menu (place class on corresponding <li>)*/
	display: block;
	color: #0066CC;
	background: #FFFFFF url(Imgs/navBar_BG.gif) no-repeat right center;
	/*added weighting ajb 20070618*/
	font-weight: bold !important;
}
#navBar .subMenu a{ /*indent Submenu links (place class on corresponding <li>)*/
	padding-left: 1.6em;
	font-weight: normal;
}
#navBar .subMenu2 a{ /*indent Sub-Submenu links (place class on corresponding <li>)*/
	padding-left: 2.8em;
	font-weight: normal;
}
#navBar .subMenu3 a{ /*added indent Sub-Submenu links (place class on corresponding <li>)*/
	padding-left: 3.4em;
	font-weight: normal;
}
#navBar .subMenu4 a{ /*added indent Sub-Submenu links (place class on corresponding <li>)*/
	padding-left: 4.2em;
	font-weight: normal;
}
.navContentBox{ /*use as container div(s) within #navBar column - DO NOT USE TO CONTAIN MAIN NAVIGATION!*/
	padding: 0.3em 0.8em;
}
/* mainContent for Homepage (ie with righthand column
*/
.yl_layout #mainContentHome{
	margin: 0px;
	padding: 0px 0px 8px 0px;
	border: 0px;
	width: 51.4%;
	float: left;
	min-height: 400px; 
	background: #FFFFFF url(MainContent_BG.gif) repeat-y center top;
}
#mainContentHome img{
	margin: 0.4em 0 0.3em 0;
}
		
/* Tips for mainContent:
1. to avoid float drop at a supported minimum 800x600 resolution, elements within the mainContent div should be 356px or smaller (this includes images).
2. width of mainContent = 51.4%. Total width of navBar + mainContent + rightBar = 99.4%. Some browsers reflow these elements incorrectly if total = 100%
*/
.yl_layout #mainContent{
	margin: 0px;
	padding: 0px 5px 8px 5px;
	border: 0px;
	width: 74%;
	float: left;
	min-height: 400px; 
	background: #FFFFFF url(MainContent_BG.gif) repeat-y center top;
}
#mainContent img{
	margin: 0.4em 0 0.3em 0;
}

#mainContent ul{
	margin: 25px;
}

#mainContent ol{
	margin: 25px;
}

.contentBox{ /*use as content div(s) within #mainContent column*/
	padding: 0px 12px;
}
#breadCrumbs{
	margin: 0px;
	padding: 5px 12px 5px 12px;
	/*text-transform: lowercase;*/
}
#breadCrumbs ul{
		list-style-type: none;
		margin: 0px;
		padding: 0px;
		font-size: 90%;
		line-height: 2em;
		color: #0066CC;
}
#breadCrumbs li{
	display: inline;
	margin: 0px;
	padding: 0 0.1em 0 0;	
}
#breadCrumbs li{
	display: inline;
	margin: 0px;
	padding: 0 0.2em 0 0;
	background-position:left;
	background-repeat:no-repeat;
	background-image: url(line.gif);
	/*background-position:-3px;*/
	padding-left:0.7em;	
}

/* ---------- right side bar ---------- */
/*IMPORTANT - MAKE SURE CONTENT (e.g. images) PLACED IN THE RIGHT BAR HAS A WIDTH NOT EXCEEDING 160px*/
.yl_layout #rightBar{
	float: left; 
	width: 24%; 
	padding: 0 0 20px 0;
}
.rightContentBox{ /*use as content divs within #rightBar column*/
	padding: 0 8px 0 12px;
	text-align: center;
}
.rightImgBox{ /*use for image divs within #rightBar column (Max image width 160px)*/
	text-align: center;
	margin: 12px 0 12px 0;
}
#rightBar h1, #rightBar h2{ /*reset header colours for accessibility against blue BG */
	color:#000000;
}

/*  ----------  footer styles  ----------  */
.yl_layout #footer{
	clear: both;
	width: 100%;
	min-height: 41px;
	background: #0066CC url(Imgs/circles_bg.gif) no-repeat left 3px;
	padding: 0;
	color: #FFFFFF;
}
.yl_layout #footerContent {
	margin: 0 26% 0 25%; /* footer equivalent of #mainContent */
	/*padding: 3px 4px;*/
	text-align: center;
	font-size: 90%;
	line-height: 1.6em;
}
.yl_layout #footerContent ul{
	list-style-type: none;
	/*margin: 0px;
	padding: 0px;*/
}
.yl_layout #footerContent li{
	display: inline;
	margin: 0px;
	padding: 0 0.2em 0 0;
	background-position:left;
	background-repeat:no-repeat;
	background-image: url(bullet.gif);
	background-position:-3px;
	padding-left:0.7em;	
}
.yl_layout #footerContent a{
	color: #FFFFFF;
}
.yl_layout #footerContent ul li a{
	color: #FFFFFF;
}

/*  ---------- Miscellaneous classes for reuse  ---------- */
.floatRight{ 
/* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	display: inline;
	float: right;
	margin-left: 8px;
	width: 25%;
}
.floatingContent{
	border-top: 1px solid #AAD5FF;
	border-left: 1px solid #0066CC;
	border-bottom: 1px solid #0066CC;
	border-right: 1px solid #AAD5FF;
	margin-bottom: 5px;
}
.floatLeft { 
/* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.centerBox{
/* this class can be used to center elements within the mainContent or navBar. Images positioned in this way should be a maximum width of 356px or 184px respectively */
	text-align: center;
	margin: 0px;
	padding: 0px;
}
.intlinks{ 
	margin-left: 8px;
}
.intlinks li{ 
	list-style:none;
	padding-top:1px;
	padding-left:27px;
	background-image: url(related_internal.jpg);
	background-repeat:no-repeat;
}


.doclinks{ 
	margin-left: 8px;
}
.doclinks li{ 
	list-style:none;
	padding-left:27px;
	background-image: url(related_document.jpg);
	background-repeat:no-repeat;
	vertical-align: 0;
}
.extlinks ul{ 
	margin-left: 8px;
}
.extlinks li{ 
	list-style:none;
	padding-top:1px;
	padding-left:27px;
	background-image: url(external_website_.jpg);
	background-repeat:no-repeat;
}

/*
#mainContent li{ 
	display:block;
	list-style:none;
	padding-top:1px;
	padding-left:18px;
	background-image: url(links.gif);
	background-position:left;
	background-repeat:no-repeat;
	background-position:0 0 0;
	vertical-align:top;
}*/
	
.clearFloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
	clear: both;
    height: 0px;
    font-size: 1px;
    line-height: 0px;
	height: 1%;
}

.tableheader {
	background:#0066CC;
	color:#FFFFFF;
	font-size:1.2em;
}
.tablerow {
	background:#AAD5FF;
	color:#000000;
}
.tableheaderplain {
	font-size:1.2em;
}
.tablerowplain {
	color:#000000;
}

.poll li{
	list-style: none;
}
.orgTable {
	border-bottom: 1px solid #004080;
	/*background:#0066CC;
	color:#FFFFFF;*/
}