/* ===================================================
CSS for Zooid Pictures ltd - v2.1

Author: 		whitespacedesign
Contact: 		north@whitespacedesign.co.uk
Website: 		http://www.whitespacedesign.co.uk
created: 		17.06.09
=================================================== */
	



/*******************************   resets   ******************************/

html,body,div,span,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,del,em,img,small,strong,sub,sup,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
	margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent;
	}
h1,h2,h3,h4,h5,h6,pre,code,input,textarea {font-size:1em;font-weight: normal;}
a img,:link img,:visited img {border:none;}
:link,:visited {text-decoration:none;}
ul,ol {list-style:none;}
address {font-style: normal;}

a:active {outline: none;}
:focus {-moz-outline-style: none;}
	



/*******************************   globals   ******************************/

.screenreader {
	position: absolute;
	left: -9000px;
	top: -9000px;
	}

.imageReplace {text-indent: -9000px;}

.clearfix:after { /* makes float container block clear floated blocks inside it */
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
	}

body {
	font: 75% helvetica, sans-serif; /* reset font size to 12px; */
	background: #243872;
	}
	
#headerWrapper {
	background: transparent url(../graphics/header_bg.gif) repeat-x 0 0;
	height: 201px;
	border-bottom: 1px solid #B2B2B2;
	}
#contentWrapper {
	background: #FFF;
	border-top: 1px solid #1D5484;
	padding: 22px 0 35px 0;
	}
#footerWrapper {border-top: 1px solid #A7A7A7;}

#header, #content, #footer {
	width: 820px;
	margin: 0 auto;
	}
	

/*******************************   header   ******************************/

#logo {
	float: left;
	margin: 14px 0 0 3px;
	}
#logo a {
	display:block;
	width: 121px;
	height: 176px;
	background: transparent url(../graphics/logo2.gif) no-repeat 0 0;
	}
#logo a:hover {background-position: -121px 0;}

#clientLogin {
	background: transparent url(../graphics/login_corners.gif) no-repeat center bottom;
	padding-bottom: 1px;
	width: 610px;
	float: right;
	}

#clientLogin p {
	width: 610px;
	background-color: #DADADA;
	height: 33px;
}
	
#clientLogin a {
	background: #DADADA url(../graphics/arrow.gif) no-repeat right top;
	width: 108px;
	margin: 7px 10px 7px 0px;
	float: right;
	display:inline;
	height:19px;
	}

#clientLogin a:hover {background-position: right -19px;}
	

/***********************   mainNav  ***********************/

#mainNav {		
	width: 610px;
	margin: 89px 0 0 0;
	float: right;
	}
	
#navCol1, #navCol2, #navCol3 {
	float: left;
	width: 190px;
	}
#navCol1, #navCol2 {margin-right: 20px;}

#mainNav li {margin-bottom: 9px;}
#mainNav li a {display: block; height: 18px;text-indent: -9000px; background: transparent url(../graphics/mainNav.gif) no-repeat;}
#mainNav li#homeNav a {width: 127px; background-position:  0 -18px;}
#mainNav li#howNav a {width: 101px; background-position:  -127px -18px;}
#mainNav li#servicesNav a {width: 69px; background-position:  -228px -18px;margin-bottom: 0;}
#mainNav li#clientsNav a {width: 63px; background-position:  -297px -18px;}
#mainNav li#newsNav a {width: 151px; background-position:  -360px -18px;}
#mainNav li#aboutNav a {width: 78px; background-position:  -511px -18px;margin-bottom: 0;}
#mainNav li#caseNav a {width: 106px; background-position:  -589px -18px;}
#mainNav li#testimonialsNav a {width: 112px; background-position:  -695px -18px;}
#mainNav li#contactNav a {width: 97px; background-position:  -807px -18px;margin-bottom: 0;}
#mainNav li#homeNav a:hover,
#bodyHome li#homeNav a {background-position: 0 0;}
#bodyWhat #mainNav li#howNav a,
#mainNav li#howNav a:hover {background-position: -127px 0;}
#bodyServices #mainNav li#servicesNav a,
#mainNav li#servicesNav a:hover {background-position: -228px 0;}
#bodyClients #mainNav li#clientsNav a,
#mainNav li#clientsNav a:hover {background-position: -297px 0;}
#bodyNews #mainNav li#newsNav a,
#mainNav li#newsNav a:hover {background-position: -360px 0;}
#bodyAbout #mainNav li#aboutNav a,
#mainNav li#aboutNav a:hover {background-position: -511px 0;}
#bodyCase #mainNav li#caseNav a,
#mainNav li#caseNav a:hover {background-position: -589px 0;}
#bodyTestimonials #mainNav li#testimonialsNav a,
#mainNav li#testimonialsNav a:hover {background-position: -695px 0;}
#bodyContact #mainNav li#contactNav a,
#mainNav li#contactNav a:hover {background-position: -807px 0;}
	

/*******************************   content   ******************************/

.leftCol {
	float: left;
	width: 160px;
	margin-right: 50px;
	
	}
.wideCol {
	float: left;
	width: 610px;
	}
	
	#content .wideCol { /* styles in place for editing in DMW which doesn't recognise clearfix */
	background-color: #fff;
	}

h1 {
	font-size: 2em; /* 24px */ 
	line-height: 1.5em; /* 36px */
	color: #243872;
	width: 610px;
	border-bottom: 8px solid #FEEF4C;
	margin-bottom: 10px;
	}

h2 {
	font-size: 1.6667em; /* 20px */ 
	line-height: 1.8em; /* 36px */ 
	color: #243872;
	width: 610px;
	border-bottom: 5px solid #E4E4E4;
	margin-bottom: 12px;
	}

h3 {
	font-size: 1.3333em; /* 16px */ 
	line-height: 1.125em; /* 18px */ 
	color: #243872;
	width: 100%;
	border-bottom: 2px solid #CECECE;
	padding: 6px 0;
	margin-bottom: 12px;
	}

h4 {
	font-size: 1.1667em; /* 14px */ 
	line-height: 1.2857em; /* 18px */ 
	color: #666666;
	font-weight:bold;
	border-bottom: 1px dotted #B0B0B0;
	margin-bottom: 12px;
	padding-top: 12px;
	clear:both;
	}
	
small {
	display: block;
	padding: 18px 0 0 20px;
	}

address,
#content p,
.wideCol ul {
	color: #414141;
	font-size: 1em; /* 12px */
	margin: 0 0 1em 0; 
	}
address,
#content .wideCol p,
#content .wideCol li {
	font-size: 1.1667em; /* 14px */
	line-height: 1.2857em; /* 18px */
	color: #666;
	}
	#content .wideCol li ul {
		margin: 0.5em 0 .5em 20px;
		}
	#content .wideCol li li {
		font-size: .9em;
		line-height: 1em; 
		}
address,
#content .wideCol p {margin: 0 0 1.5em 0;}



#content .wideCol p.posted {
	font-size:0.917em; /* 11px */
	line-height: 1.636em;
	}
	
#content .wideCol ul {list-style: disc outside;}
.wideCol ol {list-style: decimal outside; margin-left: 20px;}
.wideCol ul.divList,
.wideCol ul#clientList {list-style: none; margin-left: 0px;}
.wideCol li {
	padding: 0 0 .33em 0;
	}

#content .wideCol a {
	color: #243872;
	border-bottom: 1px solid #FEEF4C;
	}
#content .wideCol a:hover {
	border-bottom: 0;
	background: #E4E4E4;
	}


#testimonialList div ul li {list-style:none;background: #FFF url(../graphics/quotemarks.gif) no-repeat 3px 5px;}
#testimonialList h2,
#testimonialList h3 {clear: left;}
#testimonialList h3 {
	position: absolute;
	bottom: 0;
	right: 20px;
	border: none;
	width:auto;
	font-size: .9em;
	text-transform: uppercase;
	padding: 10px 10px 0 7px;
	text-align:right;
	width: 400px;
	}
#testimonialList h2:hover {cursor: pointer;}
	
#testimonialList div li span {
	float: left;
	display: block;
	width: 100px;
	margin: 0 20px 10px 0;
	}
#testimonialList li span img {float: right;}
	
#testimonialList p {
	font-size: 1.6667em; /* 20px */ 
	line-height: 1em; /* 36px */
	color: #6B89AC;
	padding: 10px 20px 0 20px;
	}

#teamList div,
#teamList h3 {width: 560px;}
.caseList,
#testimonialList div ul li,
#teamList div {
	border: 5px solid #E4E4E4;
	padding: 15px;
	margin-bottom: 10px;
	}
#testimonialList div ul li {position: relative;padding-bottom:22px;}

.caseList {width: 570px;}
#bodyCase .wideCol p img {float: right; margin: 0 0 6px 10px;}

#content .wideCol #clientList li {
	display: block; 
	border:0; 
	background: #E4E4E4; 
	float: left; 
	width: 138px; 
	height: 138px; 
	margin-right: 10px; 
	margin-bottom: 10px; 
	border: 1px solid #E4E4E4;
	padding: 0px;
	}
	
	#content .wideCol #clientList li a {
	border-bottom: 0px;
	}
	#content .wideCol #clientList li a:hover {
	background: none;
	}
	
	img.floatLeft {
	float: left;
	margin: 0px 10px 10px 0px;
	}
	
	img.floatRight {
	float: right;
	margin: 0px 10px 0px 10px;
	}
	
#bodyCase #content .wideCol div {
	float: left;
	clear: both;
	margin-top: 1em;
	}


/***************************   leftCol  ****************************/

.leftCol div {
	background: #E4E4E4 url(../graphics/subnav_bg.gif) repeat-x 0 bottom;
	margin-bottom: 10px;
	padding: 10px 10px 15px 10px;
	}

span.h1equiv {
	display: block;
	font-size: 2em; /* 24px */ 
	line-height: 1.5em; /* 36px */
	margin-bottom: 0;	}
	
 .leftCol div#subnav {
	padding: 10px 10px 15px 10px;
	}
	
.leftCol li {
	padding: 6px 0;
	}
	
.leftCol li a {
	text-transform: uppercase;
	color: #243872;
	padding: 2px;
	}
.leftCol li a:hover,
.sectionPage1 .leftCol li.subnav1 a,
.sectionPage2 .leftCol li.subnav2 a,
.sectionPage3 .leftCol li.subnav3 a,
.sectionPage4 .leftCol li.subnav4 a,
.sectionPage5 .leftCol li.subnav5 a,
.sectionPage6 .leftCol li.subnav6 a,
.sectionPage7 .leftCol li.subnav7 a,
.sectionPage8 .leftCol li.subnav8 a,
.sectionPage9 .leftCol li.subnav9 a {
	color: #FFF587;
	background: #243872;
	}
	
.leftCol p a {
	color: #243872;
	font-size: 1.5em;
	}
.leftCol p a:hover {
	color: #FFF;
	text-shadow: 0 0 2px #444444;
	}
	


/*********************************  forms   **************************/
	
input,
textarea {
	border: 0;
	width: 120px;
	padding: 3px;
	background-color: #64708D;
	color: #FFF;
	font: .8em verdana;
	}
	
input.submit {
	}
input.submit:hover {
	}  


/*******************************   footer   ******************************/

#footer .leftCol {
	width: 190px;
	margin-right: 20px;
	height: 23px;
	background: transparent url(../graphics/be_contented.gif) no-repeat 0 0;
	}

#footer {padding-top: 20px;}

#footer p {
	color: #C2D2DF;
	line-height: 1.2em;
	}
#footer p a {
	color: #FFF; 
	border-bottom: 1px solid #93AEC5;
	}
#footer p a:hover {border-bottom: none;}

#footer .leftCol p {
	width: 190px;
	height: 24px;
	background: transparent url(../graphics/be_contented.gif) no-repeat 0 0;
	}
	
#details {
	float: left;
	width: 610px;
	margin: 10px 0 40px 0;
	}
	#details #legalNav {
		float: left;
		}
		#details #legalNav li {
			float: left;
			font-size: .8em;
			padding-right: 10px;
			}
		#details #legalNav li a {
			color: #FFF;
			border-bottom: 1px solid #93AEC5;
			}
		#details #legalNav li a:hover {
			border-bottom: none;
			}
	#footer .wideCol p.legal {
		float: right;
		font-size: .8em;
		}
	
	
#contactInfo,
#logos {float: left;}
	
#logos {
	width: 420px;
	background: transparent url(../graphics/logos_bg.gif) repeat-y 0 0;
	float: right;
	}
#logos ul {
	width: 420px;
	margin: 1px 0;
	background: #FFF;
	float: left;
	}
	
#logos ul li {
	float: left;
	margin: 5px 7px;
	}