/**********************************************************************
	Author: Alan Bristow (KCn)
	Ver: 1.01 / 29 Mar 2005
	
	Please use code here to help you understand, but do not steal.
	Got a question? email me at my website, I might be able to help :)
***********************************************************************/

/*Start Major structural divs******************************************/
/**********************************************************************/
body {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #A4B5DE;
	margin: 0px;
	padding: 0px;
	background-image: url(../images/bodyv0.9.2.jpg);
	background-repeat: repeat-y;
	background-position: center top;
	background-attachment: fixed;
}
#bigge { /*Respect*/
	position:absolute;
	left:50%;
	width:746px;
	margin-left:-373px;
	padding-bottom: 5px;
}
#divSeo {
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	width: 250px;
	margin-top: 10px;
	height: 120px;
	background-image: url(../images/bg-seo.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	padding-top: 10px;
	float: right;
	line-height: 14px;
	text-align: justify;
	padding-left: 35px;
	padding-right: 15px;
}
#divFwx {
	float: left;
	width: 500px;
	height: 380px;
}
#divHdr {
	font-size: 10px;
	width: 486px;
	color: #0832A4;
	text-align: left;
	height: 150px;
	background-image: url(../images/hdr-us.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 15px;
}
#divSideBar { /* if a page does not have its body tag ID'd as "page-tr" or "page-about" etc, then the setting 'logo-plain' is NOT overriden and so at least that default img IS shown */
	background-image: url(../images/logo-plain.jpg); /* <-- this'll get overriden by the line below that matches a pages body ID setting */
	background-repeat: no-repeat;
	width: 240px;
	float: right;
	background-position: center top;
}
#divSbBotHalfWrapr { /* This holds all content in the SB that is UNDER (lower down the screen) the two main button nav rows */
	background-image: url(../images/bg-sb-middle.jpg);
	background-repeat: repeat-y;
	background-position: center top;
	margin: 0px;
	padding: 0px;
}
#divSbBotHalf {
	font-size: 12px;
	background-image: url(../images/bg-sb-top.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	padding-left: 35px;
	padding-right: 36px;
	color: #245BB5;
}
#divSbBotHalfCloseBox {
	background-image: url(../images/bg-sb-bottom.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	height: 29px;
	margin: 0px;
	padding: 0px;
}
#pageBgHldr {
	background-image: url(../images/page-body-0.3.7-middle.jpg);
	background-repeat: repeat-y;
	background-position: left top;
	width: 505px;
}
#pageTop {
	background-image: url(../images/page-body-0.3.7-top.jpg);
	padding: 20px 55px 0px 27px;
	background-repeat: no-repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #2578E0;
	text-align: left;
}
#pageBottom {
	background-image: url(../images/page-body-0.3.7-bottom.jpg);
	background-repeat: no-repeat;
	height: 72px;
	width: 415px;
	text-align: center;
	padding-right: 60px;
	padding-left: 30px;
	padding-top: 25px;
	line-height: 1.5em;
}
/**********************************************************************/
/*End Major structural divs********************************************/

/*Start Other  divs****************************************************/
/**********************************************************************/
#printedLogo, #sectionLogo4Prnt {
	display: none;
}
#divTopLinks {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-left: 7px;
	clear: both;
	margin-top: 5px;
}
#navMap { /* main nav buttons in divs navMap and navMap2 made into a ul across not down */
	font-size: 11px;
	margin: 0px;
	padding: 0px;
	height: 90px;
}
#navMap2 {
	font-size: 11px;
	margin: 0px;
	padding: 0px;
	height: 75px;
}
#cleary, #cleary1, #cleary2, #cleary3 { /* since 'clear' seems to fail me sometimes, inserting a div styled this way is a painless solution */
	clear: both;
	margin: 0px;
	padding: 0px;
}
#navlistDiv0, #navlistDiv1, #navlistDiv2, #navlistDiv3, #navlistDiv4 { /* index.html alone uses these 4 divs for its presentation of the lib items that are the nav for ea section. The divs present the lib items in the main page rather than us having a trad' nav bar, thus combating "navigation blindness" (http://www.guuui.com) */
	background-image: url(../images/navlist-about.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left: 55px;
	margin-bottom: 10px;
	display: block;
	padding-bottom: 1px;
}
#navlistDiv0 {
	background-image: url(../images/navlist-hr.jpg);
}
#navlistDiv2 {
	background-image: url(../images/navlist-hr.jpg);
}
#navlistDiv3 {
	background-image: url(../images/navlist-tr.jpg);
}
#navlistDiv4 {
	background-image: url(../images/navlist-my.jpg);
}
#divDiag2 {
	background-image: url(../images/hr-steps.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	height: 425px;
	padding-top: 39px;
	padding-bottom: 27px;
	padding-right: 214px;
}
#divDiag4, #divDiag5 {
	background-image: url(../images/our-approach.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	height: 563px;
	padding-top: 30px;
	padding-bottom: 70px;
	padding-right: 205px;
}
#divDiag5 {
	background-image: url(../images/research-approach.jpg);
}
#sitemap {
	background-image: url(../images/feet.gif);
	background-repeat: no-repeat;
	background-position: right top;
}
#kcn {
	display: inline;
	margin-left: 1em;
}
#toppy {
	display: inline;
	margin-left: 1em;
	float: right;
}
/**********************************************************************/
/*End Other  divs******************************************************/

/*Start link formatting************************************************/
/**********************************************************************/
#divSeo a:link, #divSeo a:visited {
	color: #A4B5DE;
	text-decoration: none;
	background-image: url(../images/bg-toplinks-up.jpg);
	background-repeat: repeat;
}
#divSeo a:hover {
	color: #ff0000;
	text-decoration: none;
	color: #0A39AB;
	background-image: url(../images/bg-toplinks-over.jpg);
}
#divTopLinks ul li a:link, #divTopLinks ul li a:visited {
	display: block;
	text-align: center;
	text-decoration: none;
	color: #999999;
	margin-right: 3px;
	width: 76px;
	height: 18px;
	background-image: url(../images/bg-seo-links.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	margin-bottom: 5px;
	margin-left: 0px;
	border: none;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 3px;
	line-height: normal;
}
#divTopLinks ul li a:hover { /* hide from IE 5 (but not 5.5) */ 
	color: #0A39AB;
	text-decoration: none;
	background-image: url(../images/bg-seo-links-hover.jpg);
	border: none;
}
#pageTop a:link, #pageTop a:visited {
	color: #C40C26;
	text-decoration: none;
}
#pageTop a:hover {
	color: #FF9999;
	text-decoration: underline;
}
#navMap ul li a {
	display: block;
	text-decoration: none;
	color: #FF9999;
	text-align: center;
	font-weight: bold;
}
#navMap ul li a:hover { /* hide from IE 5 (but not 5.5) */
	color: #FF0000;
	text-decoration: none;
	font-weight: bold;
}
#navMap2 ul li a {
	display: block;
	text-decoration: none;
	color: #6BBAF3;
	text-align: center;
	font-weight: bold;
}
#navMap2 ul li a:hover { /* hide from IE 5 (but not 5.5) */
	color: #0D389E;
	text-decoration: none;
	font-weight: bold;
}
#divSbBotHalf ul a:link, #divSbBotHalf ul a:visited, #divSbBotHalf ul a:hover {
	color: #C40C26;
	text-decoration: none;
	background-image: url(../images/sb-nav-up.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left: 22px;
	display: block;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	width: 140px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px; /* pretty sure this being 1px was a prob for IE (wart the frog) so non-Kanute approach is to make it 0 here and in p7tbdn */
	margin-left: 0px;
}
#divSbBotHalf ul a:hover {
	color: #C40C26;
	text-decoration: none;
	background-image: url(../images/sb-nav-over.jpg);
}
#divSbBotHalf a:link, #divSbBotHalf a:visited, #divSbBotHalf a:hover {
	color: #C40C26;
	text-decoration: none;
}
#divSbBotHalf a:hover {
	color: #FF9999;
	text-decoration: underline;
}
#kcn a:link, #kcn a:visited, #pageBottom a:link, #pageBottom a:visited {
	color: #CCCCCC;
	text-decoration: none;
}
#kcn a:link, #kcn a:visited {
	background-image: url(../images/kcn6up.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	margin: 0px;
	padding: 1px 0px;
	height: 16px;
}
#kcn a:hover, #pageBottom a:hover {
	color: #000000;
	text-decoration: none;
}
#kcn a:hover {
	background-image: url(../images/kcn6over.gif);
}
#toppy a:link, #toppy a:visited {
	color: #2578E0;
	text-decoration: none;
	background-image: url(../images/hendron.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	margin: 0px;
	padding: 1px 0px;
	height: 16px;
}
#toppy a:hover {
	background-image: url(../images/hendron-over.gif);
	color: #2578E0;
	text-decoration: none;
}
#toppy acronym {
	text-decoration: none;
	border: none;
}
/**********************************************************************/
/*End link formatting**************************************************/

/*Start  H1 to H6 formatting*******************************************/
/**********************************************************************/
/* use H2 for the title of each SB main (top) item, any other SB content should perhaps use no Hn's or use H3, 4 etc (style em' if you want) */
h1, h2, h3 {
	text-align: left;
}
h1 {
	color: #FFFFFF;
	margin-top: 0px;
	font-size: 130%;
	margin-bottom: 20px;
}
h2, h3 {
	font-weight: normal;
	font-size: 130%;
	color: #0C38A5;
	background-image: url(../images/h2.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left: 24px;
	line-height: 19px;
}
h3 {
	font-size: 100%;
	line-height: 15px;
	background-image: url(../images/h3.jpg);
	padding-left: 19px;
}
#pageTop h2, h3 {
	margin-bottom: 0em;
}
#divSbBotHalf h2 {
	font-weight: bold;
	color: #FFFFFF;
	background-image: url(../images/spacer.gif);
	padding-top: 18px;
	padding-bottom: 20px;
	margin: 0px;
	padding-left: 2px;
	font-size: 13px;
	background-repeat: repeat;
}
#navlist h2 {
	display: none;	
}
#navlist h1 {
	color: #0B36A6;
	font-weight: normal;
	margin-bottom: 0px;
}
/**********************************************************************/
/*End  H1 to H6 formatting*********************************************/

/*Start FORM items (form specific attributes and other form stuff)*****/
/**********************************************************************/
legend, caption {
	font-weight: bold;
	color: #388FC4;
	padding-right: 1em;
	padding-left: 1em;
}
caption {
	background-image: url(../images/bg-my.jpg);
	background-repeat: repeat;
	color: #FFFFFF;
}
input:focus, select:focus, textarea:focus { /* altho not supported by IE, i.e. Bill somehow doesn't seem to think UI design benefits from focus when filling in forms (LIKE DUH!), we use this as it IS supported very nicely by lovely Firefox. Yay! preload this */
	background-image: url(../images/bg-inputs.jpg);
	background-repeat: repeat;
	font-weight: bold;
}
#formMinHr td {
	padding: 3px;
	font-size: 10px;
}
#formMinHrRowA {
	text-decoration: none;
	background-image: url(../images/bg-rowa.jpg);
	background-repeat: repeat;
}
#formMinHrRowB {
	text-decoration: none;
	background-image: url(../images/bg-rowb.jpg);
	background-repeat: repeat;
}
#formMinHr textarea {
	width: 380px;
}
#formMinHr fieldset {
	margin-bottom: 20px;
}
#yourDetails input { /* fieldset specific formatting - i.e. I had a fieldset on the contact page too and I wanted it different from those in the HR section*/
	width: 95%;
	border: 1px solid #CCCCCC;
}
#submity, #resety {
	font-size: 14px;
	font-weight: bold;
	color: #00CC00;
}
#resety {
	color: #FF0000;
	font-weight: normal;
	font-size: 11px;
}
#contact textarea {
	width: 95%;
}
#contactpage p {
	margin: 0px;
	padding: 0px;
}
#tdline {
	border-top-width: 1px;
	border-top-style: dashed;
	border-top-color: #6F97F7;
}
/**********************************************************************/
/*End FORM items (form specific attributes and other form stuff)*******/

/*Start Everything else************************************************/
/**********************************************************************/
#divSeo strong {
	font-size: 120%;
	font-weight: normal;
	color: #C70C27;
}
#divSeo em {
	font-style: normal;
	font-weight: bold;
}
#divSeo acronym {
	text-decoration: none;
	border: none;
}
#divSeo a img {
	border: none;
}
#divTopLinks ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: inline;
}
#divTopLinks ul li {
	margin: 0;
	padding: 0;
	display: block;
	float: left;
}
#pageTop p {
	margin-top: .5em;
}
#pageTop ul li, #pageTop ol li {
	list-style-image: url(../images/bullet.gif);
	font-size: 90%;
	margin-bottom: 1em;
}
#pageTop ol li {
	list-style-image: none;
}
#pageTop a img {
	border: none;
}
#pageTop acronym {
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #2578E0;
}
#navlist li {
	list-style-type: none;
	margin-bottom:5px;

}
#navlist ul {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-left: 0px;
	padding-left: 0px;
}
#pageBottom img {
	border: none;
}
#divSbBotHalf ul {
	margin: 0px;
	padding: 0px 0px 10px; /* here */
	list-style-type: none;
}
#divSbBotHalf p {
	margin-top: 0em;
	margin-bottom: .5em;
	font-size: 10px;
}
#page-hr #divSideBar { /* Here are the alt versions of the IMG, ea associated with its relevant body ID */
	background-image: url(../images/logo-hr.jpg);
}
#page-tr #divSideBar {
	background-image: url(../images/logo-tr.jpg);
}
#page-my #divSideBar {
	background-image: url(../images/logo-my.jpg);
}
#page-home #divSideBar {
	background-image: url(../images/logo-home.jpg);
}
#page-contact #divSideBar {
	background-image: url(../images/logo-contact.jpg);
}
#page-about #divSideBar {
	background-image: url(../images/logo-about.jpg);
}
#page-siteMap #divSideBar {
	background-image: url(../images/logo-site-map.jpg);
}
#page-policies #divSideBar {
	background-image: url(../images/logo-policies.jpg);
}
#navMap ul {
	list-style-type: none;
	display: inline;
}
#navMap ul li {
	margin: 0;
	padding: 0;
	display: block;
	float: left;
}
#navMap2 ul {
	list-style-type: none;
	display: inline;
}
#navMap2 ul li {
	margin: 0;
	padding: 0;
	display: block;
	float: left;
}
.dull {
	color: #CCCCCC;
}
blockquote {
	padding: 20px 5px 10px 20px;
	background-image: url(../images/blockquote.jpg);
	background-repeat: no-repeat;
	color: #0939A5;
	font-size: 11px;
	line-height: 2em;
	border-bottom: 1px solid #e9e9e9;
	background-position: left top;
	clear: both;
}
blockquote p {
	margin: 0px;
	padding: 0px;
}
#divDiag2 p { /* clever (modest? moi?) use of p height so in a div of a fixed height, in this case 4 p's share the space as ea is set to 25% high :) */
	height: 25%;
}
#divDiag4 p, #divDiag5 p { /* clever use of p height so in a div of a fixed height, in this case 5 p's share the space as ea is set to 20% high :) */
	height: 20%;
}
.marker {
	background-color: #CCFFFF;
	color: #0939A5;
	padding-right: 1em;
	padding-left: 1em;
	line-height: 1.5em;
}
#sitemap p {
	margin: 0px;
	padding: 0px;
}
#sitemap ul {
	margin-left: 3em;
	margin-bottom: 10px;
}
#kcn, #pageBottom {
	font-size: 10px;
	color: #CCCCCC;
}
#kcn acronym {
	text-decoration: none;
	border: none;
}
#hrEasy { /* Want the visual fn of an HR without it's clumbsiness? Then use a div with a non breaking space and style with this (elegant? moi? */
	background-color: #e9e9e9;
	height: 1px;
	line-height: 1px;
}