@charset "utf-8";
* {/* it's good practice to zero global margin and padding values to account for differing browser defaults */
	padding:0; 
	margin:0;
}
html{/*stops main BG image moving at small sizes in FireFox */
	height:100%;
	min-width:770px;
}
/* targets Opera 9 & below - fixes bug where scrollbars are not visible on flexible layout */
html:first-child{
	overflow:auto;
}
body {
	height:100%;
	width:100%;
	/*font:62.5% Arial, Helvetica, sans-serif;*/
	font:75% Arial, Helvetica, sans-serif;
	word-spacing:0;
	letter-spacing:0;
	background:#fff;
	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:#000;
	min-width:770px;
}
h1, h2, h3, h4, h5, h6{
	font-weight:bold;
	/*font-size:1em;*/
	color:#662D91;
	margin:1em 0 0.4em 0;
}
h1{
	font-size:1.8em;
	font-weight:normal;
	background:url(Heading_BGs.gif) bottom repeat-x;
	padding-bottom:5px;
	padding-left:4px;
	padding-right:4px;

}
h2{
	margin:1em 0 0.6em 0;
	font-size:1.6em;
	font-weight:normal;
	background:url(Heading_BGs.gif) bottom repeat-x;
}
h3{
	font-size:1.4em !important;
	background:url(Heading_BGs.gif) bottom repeat-x;
}
h4{
	font-size:1.3em !important;
	background:url(Heading_BGs.gif) bottom repeat-x;
}
p, ul{
	/*font-size:1.2em;*/
	line-height:1.5em;
	margin:0 0 0.6em 0;
	padding:0;
}
ul {
	padding-left: 1.5em;
}
img{ /*(max image width in mainContent = 356px)*/
	margin:0;
	line-height:1em;
}
a {
	font-weight:bold;
	color:#3073BA;
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}
a img{
	border:none;
}
input{
	font-family:Arial, Helvetica, sans-serif;
	background-color:#fff;
	border:1px solid #24558A;
	padding:0 0.2em;
	font-size:1.1em;
}
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. #LSCB_search_butt) */
	border:none;
	padding:0;
}
/* ---------- header boxes ---------- */
#container {
	position:relative;
	width:100%;  /* this will create a container 100% of the browser width */
	height:100%;
	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. */
	margin:0; /* the auto margins (in conjunction with a width) center the page */
	text-align:left; /* this overrides the text-align:center on the body element. */
}
#skipLink{
	/* this div contains only the 'skip to main content' link */ 
	position:absolute;
	z-index:2000;
	width:200px;
	height:10px;
	margin:0;
	left:30px;
	top:109px;
	font-size:1.1em;
}
#skipLink a{
	color:#fff;
}
#header{
	/* this div contains only the LSCB Logo*/ 
	background:#fff url(Hdr_Photo_Strip.jpg) bottom right no-repeat;
	height:100px;
	position:relative;
}
#searchBar {
	/* this div contains the site search form*/ 
	background:#3073BA url(Search_BG.jpg) top repeat-x;
	height:30px;
	padding:0;
	margin:0;
	position:relative;
}

/* ---------- search form  ---------- */

#LSCB_search{
	margin:0;
	border:0;
	padding:0;
	background:url(Home/Search_Hdr_Txt.gif) center left no-repeat;
	height:30px;
	float:right;
}
#LSCB_search img{
	float:left;
}
#LSCB_search_butt{
	float:left;
	margin:0;
	/*next 2 lines required because IE6 doesn't recognise input[type=image]*/
	border:none;
	padding:0;
}
#LSCB_search_txt{
	float:left;
	margin:6px 6px;
	height:16px;
	width:140px;
}
#mainColumns{
	width:100%;
}

/* 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 - general styles ---------- */
#navBar {
	clear:left;
	float:left;
	width:24%;
	padding:0;
}

#mainMenuBox, #infoBox{
	margin:0 0 20px 0;
	padding:0;
	line-height:1em;
}
#navBar ul{
	list-style-type:none;
	margin:0;
	padding:0;
}
#navBar li{
	margin:0;
	display:block;
}
#navBar ul ul{
	font-size:1em;
	padding:0 5px 2px 5px;
	margin:0 15px;
}
#navBar ul ul ul{
	font-size:1em;
	padding:0 5px 2px 5px;
	margin:0 15px 0 5px;
}
#navBar ul li{
	height:1%;/*this is a hack for IE 7 and below*/
}
#navBar a{
	display:block;
	height:1%; /*this is a hack for IE 6 and below otherwise links don't act as blocks*/
	color:#fff;
	text-decoration:none;
	padding:2px 5px 2px 5px;
	margin:0 10px;
}
#navBar ul ul a{ /*indent Submenu links (place class on corresponding <li>)*/
	font-weight:normal;
	padding-left:12px;
	margin-left:0;
	border-bottom:none;
}
#navBar ul ul ul a{ /*indent Submenu links (place class on corresponding <li>)*/
	font-weight:normal;
	padding-left:12px;
	margin-left:0;
	border-bottom:none;
}


/* ---------- Main Menu styles ---------- */
#mainMenuBox{
	position:relative;
	background:#3073BA url(Menu_Top_BG.gif) repeat-x;
	height:1%; /*hack for IE 6 and below*/
}

#mainMenuBox .topCorner{
	position:absolute;
	z-index:500;
	right:-20px;
	float:right;
}
#mainMenuBox ul{
	padding-top:15px;
}
#mainMenuBox a{
	border-bottom:1px solid #3073BA;
	padding-left:15px;
}
#mainMenuBox a:hover{
	border-bottom:1px solid #8BB0D8;
}
#mainMenuBox .currentLink a{/*use to pick out the current page in the menu (place class on corresponding <li>)*/
	border-bottom:1px solid #8BB0D8;/*#D9E4F2;*/
	background:url(Menu_Butt_BG.gif) 0 4px no-repeat;
}
#mainMenuBox ul ul{
	padding-top:0;
	margin-top:0;
	border-bottom:1px solid #8BB0D8;
	margin-bottom:4px;
}
#mainMenuBox ul ul a:link{
	background:none;
	border-bottom:none;
}
#mainMenuBox ul ul a:hover, #mainMenuBox ul ul .currentLink a, #mainMenuBox ul ul ul .currentLink a{ /*indent Submenu links (place class on corresponding <li>)*/
	background:url(Menu_Butt_BG.gif) 0px 4px no-repeat;
	border-bottom:none;
}

#mainMenuBox .bottomCorner{
	height:20px;
	padding-top:0;
}
#infoBox .indent a{
	margin-left:10%;
}


/* ---------- Info Box styles ---------- */
#infoBox{
	background:#06663A url(InfoBox_BG.jpg) repeat-x;
}

#infoBox .topCorner{
	float:right;
}

#infoBox a{
	border-bottom:1px solid #06663A;
}
#infoBox a:hover{
	border-bottom:1px solid #6AA389;
}
#infoBox .currentLink a{/*use to pick out the current page in the menu (place class on corresponding <li>)*/
	border-bottom:1px solid #6AA389;
}
#infoBox ul ul{
	border-bottom:1px solid #6AA389;
	margin-bottom:4px;
}
#infoBox ul ul a:link{
	background:none;
	border-bottom:none;
}
#infoBox ul ul a:hover, #infoBox ul ul .currentLink a{ /*indent Submenu links (place class on corresponding <li>)*/
	background:url(Info_Butt_BG.gif) 0px 4px no-repeat;
	border-bottom:none;
}
#infoBox .bottomCorner{
	height:20px;
	padding-top: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%
*/
#mainContent{
	margin:0;
	padding:0 0 2px 0;
	border:0;
	width:51.4%;
	float:left;
	min-height:400px; 
	background:#fff;
}
#breadCrumbs{
	margin:0 25px 25px 0;
	padding:8px 0 8px 25px;
	background:url(Breadcrumb_BG.gif) bottom repeat-x;
}
#breadCrumbs ul{
	list-style-type: none;
	margin:0;
	padding:0;
	font-size:1.1em;
	font-weight:bold;
	line-height:2em;
	color:#666;
}
#breadCrumbs li{
	display:inline;
	margin:0 4px 0 0;
	padding:0;	
}
#breadCrumbs li a{
	padding:0 0 0 14px;
	background:url(Breadcrumb_Butt_BG.gif) left center no-repeat;
	display:inline-block;
}
.contentBox{/*use as content div(s) within #mainContent column*/
	margin-top:12px;
	padding:0 25px;
	clear:both;
}

/* ---------- right side bar (Quick Links) ---------- */
/*IMPORTANT - MAKE SURE CONTENT (e.g. images) PLACED IN THE RIGHT BAR HAS A WIDTH NOT EXCEEDING 160px*/
#rightBar{
	float:right; 
	width:24%;
	margin-top:20px;
	padding:0;
	background:#C90017 url(QuickLinks_BG.gif) top repeat-x;
}
#rightBar .topCorner{
	height:15px;
}
#rightBar .bottomCorner{
	height:15px;
	padding-top:0;
}
.quickLinksHdr{
	text-align:center;
}

.rightImgBox{ /*use for image divs within #rightBar column (Max image width 160px)*/
	text-align:center;
	margin:12px 0 20px 0;
}
.quickLinkWrap{ /*quick links are wrapped in this DIV because IE 5 and 5.5 ignore the auto margins when placed directly on the .quickLink DIV. Style (and wrappers) not required on fixed width rightBar - just set left and right margin to 15px*/
	margin-right:auto;
	margin-left:auto;
	text-align:center;
}
.quickLink{
	margin-right:auto;
	margin-bottom:15px;
	margin-left:auto;
	text-align:center;
	width:140px;
	min-height:68px;
	background:#fff url(QuickLinks_Butt_BG.jpg) bottom no-repeat;
}
.lastQuickLink{
	margin-bottom:0;
}
.quickLink a{
	display:block;
	padding:12px 12px 14px 12px;
	background:url(QuickLinks_Butt_Top.gif) top no-repeat;
	font-size:1.1em;
}
.rightContentBox{ /*use as content divs within #rightBar column*/
	padding:0 8px 0 12px;
	text-align:center;
	color:#fff;	
}
.rightContentBox h1, .rightContentBox h2, .rightContentBox h3{
	color:#fff;
	font-weight:bold;
	background:none;
	padding:0;
	margin:0.7em 0 0.4em 0;
}
.rightContentBox h1{
	font-size:1.6em;
}

/*  ----------  footer styles  ----------  */
#footer{
	height:35px;
	background:#fff url(Footer_BG.jpg) repeat-x top left;
	color:#7CACDC;
	padding:10px 20px 3px 20px;
	text-align:center;
	font-size:0.8em;
	line-height:1em;
}
#footer ul{
	list-style-type:none;
	margin:0;
	padding:0;
}
#footer li{
	display:inline;
	margin:0;
	padding:0 0.2em;	
}
#footer a{
	color:#7CACDC;
	font-weight:normal;
}
#footer a:hover{
	color:#3073BA;
}

/*  ---------- 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. */
	float:right;
	margin-left:10px;
}
.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:10px;
}
.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:0 0 0.6em 0;
	padding:0;
}
.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;
	font-size:1px;
	line-height:0;
	height:1%;
}
.smallTxt{
	font-size:0.9em;
	color:#555;
}
.RSSicon{ /*designed for use on image placed directly before <H1>*/
	float:left;
	padding:11px 4px 0 4px;
}
a.PDF{
	padding:1px 27px 1px 0px;
	background:url(PDF_Icon.gif) right center no-repeat;
	display:inline-block;
}

/*form fields*/
form.cmtform fieldset {
  margin-bottom: 10px;
}
form.cmtform legend {
  padding: 0 2px;
  font-weight: bold;
}
form.cmtform label {
  float:left;
  clear:left;
  width: 35%;
  margin-top: 2px;
  margin-right: 15px;
  margin-bottom: 2px;
  overflow:visible;
  vertical-align: top;
}
form.cmtform p {
  clear:left;
}

form.cmtform fieldset ul {
  margin: 0;
  padding: 0 0 0 10%;
}
form.cmtform fieldset li {
  list-style: none;
  clear:left;
  padding: 0;
  margin: 0;
  margin-top: 5px;
  margin-bottom: 0px;
}

form.cmtform li {
  list-style: none;
  padding: 0;
  margin: 0;
}

form.cmtform select{
  display: block;
  margin-left: 31%;
}
form.cmtform fieldset fieldset {
  border: none;
}
form.cmtform fieldset fieldset legend {
  padding: 0 0 5px;
  font-weight: normal;
}
form.cmtform fieldset fieldset label {
  display: block;
  width: auto;
}
form.cmtform em {
  font-weight: bold;
  font-style: normal;
  color: #f00;
}
form.cmtform label {
  /*width: 120px;  Width of labels */
}
form.cmtform fieldset fieldset label {
  margin-left: 125%; /* Width plus 3 (html space) */
}