/* this is the layout css file */
/* !important code added to widths of 100% for daft IE */

body, html {
	width: 100% !important; width: 94%; background: #b5b5b5 url('images/nav/backGradient.jpg') repeat-x fixed;
}

#container {
	position: absolute; left: 0; top: 1.5em; 
	margin: 0 3%; background: #cdb8c5; /* Background colour becomes right column background */
	width: 94%; border: 2px solid #6d355f;
	/* Becomes left aligned when reduced in IE7 */
}

#header { height: 80px; width: 100%; background: #b0b8b9 url('images/nav/background.jpg'); margin: 0px; padding: 0px;
} 

html>body #header { min-height: 80px; }

#header h1 { 
	position: relative; top: 10px; left: 0px; width: auto; margin: 0px 0px 0px 10px; 
	font-size: 2em; line-height: 0.9em; letter-spacing: -0.07em;
}
#header h1 a { color: #636; text-decoration: none; font-family: Verdana, sans-serif; font-weight: lighter; }

#header h1 a:hover { color: #036; }

#headerLogo {
	float: right;
	width: 30% !important; /* 30% works in Firefox. */  
	width: 29.9%; /* 29.9% required for daft IE 6. */
	height: 100%; padding: 0px; margin: 0px; 
	background: #636 url('images/nav/border.gif') repeat-y;
}

#imgLogo {
	display: block;
	margin: 5px auto 0;
	border: none;
}

#imgHeader {
	border: none;
}

/* For Flash header */

#iFlashContainer {
	height: 80px;
	width: 70%;
	float: left;
}

#content { position: relative; width: 100%; }

#contentBg { float: left; width: 100%; } 

#bodyText { margin: 0px; padding: 6.5em 0px 0.5em 20px; }

#col-a { float: left; width: 68%; padding: 0 2% 0 0; margin: 0px; background: #fff;} /* Content background */

#col-b { 
	position: absolute; top: 0px; left: 0px; width: 100%; padding: 0px; margin: 0px; 
	background: #036 url('images/nav/cellpic1.gif') repeat-x 0% 0%; border-top: solid 1px #fff;
}
#col-b-bg {
	width: 100%; padding: 6px 0px; background: url('images/nav/square_circle.gif') no-repeat 100% 50%;
}
#col-b ul, #col-b li { padding: 0px; margin: 0px; list-style-type: none; display: inline; }
#col-b ul { padding: 0px 75px 0px 5px; }
#col-b a {
	width: auto; padding: 2px 6px; letter-spacing: -0.05em;
	text-decoration: none; font-size: 1.1em; font-weight: bold;	color: #fff; background: none;
}
#col-b a:hover { 
	background: #036 url('images/nav/cellpic6.gif') repeat-x 0% 100%;
	color: #fff; border: 1px solid #036; padding: 2px 5px;
}
body.section-1 #content #col-b li#tab-1 a,
body.section-2 #content #col-b li#tab-2 a,
body.section-3 #content #col-b li#tab-3 a,
body.section-4 #content #col-b li#tab-4 a,
body.section-5 #content #col-b li#tab-5 a,
body.section-6 #content #col-b li#tab-6 a {
	color: #36c; border: none; background: #fff url('images/nav/cellpic3.gif') repeat-x 0% 100%;
	padding: 2px 6px 7px 6px; border-top: 1px solid #036; position: relative; 
}
body.section-1 #content #col-b li#tab-1 a:hover, 
body.section-2 #content #col-b li#tab-2 a:hover,
body.section-3 #content #col-b li#tab-3 a:hover,
body.section-4 #content #col-b li#tab-4 a:hover,
body.section-5 #content #col-b li#tab-5 a:hover,
body.section-6 #content #col-b li#tab-6 a:hover {
	color: #636;
}
#col-b ul#subnav-1, 
#col-b ul#subnav-2, 
#col-b ul#subnav-3, 
#col-b ul#subnav-4, 
#col-b ul#subnav-5,
#col-b ul#subnav-6 { 
	display: none; 
}
body.section-1 #content #col-b ul#subnav-1, 
body.section-2 #content #col-b ul#subnav-2, 
body.section-3 #content #col-b ul#subnav-3, 
body.section-4 #content #col-b ul#subnav-4,
body.section-5 #content #col-b ul#subnav-5,
body.section-6 #content #col-b ul#subnav-6 {
	display: inline; position: absolute; top: 2em; left: 0px; margin-top: 10px; line-height: 1.6em; width: 70%;
}
body.section-1 #content #col-b ul#subnav-1 li a,
body.section-2 #content #col-b ul#subnav-2 li a, 
body.section-3 #content #col-b ul#subnav-3 li a,
body.section-4 #content #col-b ul#subnav-4 li a,
body.section-5 #content #col-b ul#subnav-5 li a,
body.section-6 #content #col-b ul#subnav-6 li a {
	background: #fff; border: solid 1px #fff; padding: 1px 5px; 
	border: 1px solid #eee; font-size: 1em; font-weight: normal; letter-spacing: normal;
}
body.section-1 #content #col-b ul#subnav-1 li a:hover,
body.section-2 #content #col-b ul#subnav-2 li a:hover, 
body.section-3 #content #col-b ul#subnav-3 li a:hover,
body.section-4 #content #col-b ul#subnav-4 li a:hover,
body.section-5 #content #col-b ul#subnav-5 li a:hover,
body.section-6 #content #col-b ul#subnav-6 li a:hover {
	border: solid 1px #ccc; background: url('images/nav/cellpic6.gif') repeat-x 0% 0%; color: #036;
}

#col-d { float: right; width: 28%; margin: 2em 0px 0.5em 0px; text-align: center;} 

.callout { 
	margin: 1.5em 20px; 
}
.callout h3 {
	margin: 0px; border-bottom: 1px solid #636; color: #fff; font-size: 1.1em; 
	padding: 2px 10px 2px 5px;
}
.callout p, .callout img { margin: 0px; padding: 0px 10px; }
.callout ul, .callout p { margin: 0.5em 0px; padding-right: 10px; }

#footer {
	float: left; width: 100%;
	background: #636 url('images/nav/cellpic7.gif') repeat-x 0% 100%;
}
#footer div { 
	float: left; width: auto; font-weight: bold; padding: 0px;
}
#footer ul, #footer li {
	float: left; width: auto;
	list-style-type: none; text-align: center;
	padding: 2px 5px; margin: 0px;
}
#footer ul {
	 width: 90%; margin-left: 0px; padding-left: 0px;
}
#footer a {
	float: left; width: auto; font-size: 1em;
	color: #fff; text-decoration: none; padding: 3px 5px; 
}
#footer a:hover { 
	color: #fff; border: 1px solid #636; padding: 2px 4px;
	background: #636 url('images/nav/cellpic5.gif') repeat-x 0% 0%; border: 1px solid #636;
}