/*
Batt Creative - Screen CSS
Built by Ollie Battams
*/

/* Reset */
*{border:none; color:#fff; font:1em/1.3em "trebuchet ms",arial,helvetica,sans-serif; margin:0; outline:none; padding:0;}
html{font-size:1em; height:100%;}
body{background:#3A3A3B url(../graphics/footer-bg.gif) no-repeat fixed 50% 100%; font-size:62.5%; height:100%; padding-bottom:50px; width:100%;}
a{color:#fff;}
a:hover{color:#96C;}
br{clear:left;}
em{font-style:italic;}
em a{font-style:italic;}
form{float:left; margin:0; padding:0; width:100%;}
h1{}
h2{}
h1,h2,h3,h4,h5,h6{color:#fff;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:bold;}
img{border:none;}
input,select,textarea{border:none; margin:0; padding:0;}
p,address{font-size:1.2em; line-height:1.35em;}
strong{font-weight:bold;}

/** Page Structure **/
#headerBg{
	background:url(../graphics/header-bg.gif) no-repeat 50% 0;
	float:left;
	min-height:216px;
	width:100%;}

#fixedBanner{
	left:auto;
	right:0;
	position:fixed;
	top:0;}

#header{
	clear:both;
	margin:23px auto 0;
	width:990px;}

#header a#logo{
	background:url(../graphics/battcreative-logo.png) no-repeat;
	float:left;
	height:0;
	overflow:hidden;
	padding:193px 0 0;
	width:209px;}

#header ul{
	float:left;
	list-style:none;
	padding-top:20px;
	width:510px;}

#header li{
	float:left;
	height:51px;
	width:255px;}

#header li a{
	display:block;
	height:0;
	margin:0;
	overflow:hidden;
	padding:46px 0 0 0;}

#header li a:hover{
	background-position:0 -76px;}

#header a.nav1{background:url(../graphics/nav-whatwedo.gif) no-repeat left top; width:241px;}
#header a.nav2{background:url(../graphics/nav-contact.gif) no-repeat left top; width:172px;}
#header a.nav3{background:url(../graphics/nav-portfolio.gif) no-repeat left top; width:196px;}
#header a.nav4{background:url(../graphics/nav-blog.gif) no-repeat left top; width:102px;}
				
#Nav1 #header a.nav1,
#Nav2 #header a.nav2,
#Nav3 #header a.nav3,
#Nav4 #header a.nav4{
	background-position:0 -76px;
	cursor:default;}

#content{
	margin:0 auto;
	padding:0 75px 0 209px;
	width:706px;}

#homeIntro{
	background:url(../graphics/home-intro-text.gif) no-repeat left top;
	display:block;
	float:left;
	height:0;
	overflow:hidden;
	padding:130px 0 0 0;
	width:648px;}

#homeLeft{
	float:left;
	position:relative;
	width:316px;}

#btnRSS{
	height:30px;
	left:232px;
	position:absolute;
	top:-4px;
	width:84px;}

#btnRSS a{
	background:url(/graphics/btn-rss-feed.gif) no-repeat;
	display:block;
	height:0;
	overflow:hidden;
	padding:30px 0 0;
	width:84px;}

#homeRight{
	float:right;
	width:316px;}

#homeLeft h2,
#homeRight h2{
	background:url(../graphics/home-panel-title-bg.gif) no-repeat left top;
	float:left;
	margin-bottom:15px;
	width:316px;}

#homeRight h2{
	margin-bottom:10px;}

#homeLeft span,
#homeRight span{
	float:left;
	height:0;
	overflow:hidden;
	padding:31px 0 0;
	width:316px;}

#homeLeft span#t1{background:url(../graphics/home-title-blog.gif) no-repeat left top;}
#homeLeft span#t2{background:url(../graphics/home-title-quote.gif) no-repeat left top;}
#homeRight span#t3{background:url(../graphics/home-title-projects.gif) no-repeat left top;}

#homeLeft p{
	float:left;}

#homeLeft ul{
	float:left;
	font-size:1.2em;
	list-style:none;
	margin-bottom:20px;}

#homeLeft li{
	background:url(../graphics/bullet-blog-posts.gif) no-repeat 2px 50%;
	margin-bottom:3px;
	padding:0 0 0 18px;}

#homeLeft li a{
	background:#333;
	display:block;
	text-decoration:none;
	width:298px;}

#homeLeft li a:hover{
	background:#000;
	color:#fff;}

.homeForm{
	float:left;
	margin:5px 0 15px;
	padding-top:15px;
	width:316px;}

.homeForm label{
	float:left;
	font-size:1.2em;
	padding-top:5px;
	text-transform:uppercase;
	width:35%;}

.homeForm input,
.homeForm select,
.homeForm textarea{
	border:2px solid #ccc;
	color:#666;
	float:left;
	font-size:1.2em;
	margin-bottom:6px;
	padding:3px;
	width:60%;}

.homeForm input:focus,
.homeForm select:focus,
.homeForm textarea:focus,
.homeForm input:hover,
.homeForm select:hover,
.homeForm textarea:hover{
	border:2px solid #ED2790;}

.homeForm input.error,
.homeForm textarea.error,
.homeForm select.error{
	color:#F00;
	border:2px solid #F00;}

#homeRight ul{
	float:left;
	list-style:none;}

#homeRight li{
	float:left;}

#homeRight li a{
	float:left;
	height:0;
	overflow:hidden;}

#homeRight li a.focus1{
	background:url(/graphics/home-client-focus1.gif) no-repeat;
	padding:130px 0 0;
	width:157px;}

#homeRight li a.focus2{
	background:url(/graphics/home-client-focus2.gif) no-repeat;
	width:159px;
	padding:130px 0 0;}

#homeRight li a.focus3{
	background:url(/graphics/home-client-focus3.gif) no-repeat;
	width:157px;
	padding:153px 0 0;}

#homeRight li a.focus4{
	background:url(/graphics/home-client-focus4.gif) no-repeat;
	width:159px;
	padding:153px 0 0;}

#homeRight p a{
	background:url(/graphics/btn-see-more-work.gif) no-repeat;
	float:left;
	height:0;
	overflow:hidden;
	padding:18px 0 0;
	width:157px;}

.whatwedoContent{
	float:left;
	padding-bottom:50px;
	width:763px;}

.whatwedoContent h1{
	background:url(../graphics/title-whatwedo.gif) no-repeat left top;
	display:block;
	float:left;
	height:0;
	overflow:hidden;
	padding:45px 0 0 0;
	width:710px;}

.whatwedoContent p{
	float:left;
	font-size:1.4em;
	line-height:1.6em;
	padding:0 0 18px;
	width:763px;}

.whatwedoContent h2{
	background:url(../graphics/title-whatwedo-howmuch.gif) no-repeat left 7px;
	display:block;
	float:left;
	height:0;
	overflow:hidden;
	padding:52px 0 0 0;
	width:768px;}

.whatwedoContent h3{
	background:url(../graphics/title-whatwedo-costs.gif) no-repeat left 7px;
	display:block;
	float:left;
	height:0;
	overflow:hidden;
	padding:52px 0 0 0;
	width:768px;}

.whatwedoContent ul{
	float:left;
	list-style:none;}

.whatwedoContent li{
	float:left;
	height:0;
	overflow:hidden;
	padding:215px 0 0;}

.whatwedoContent li.cost1{
	background:url(/graphics/cost1.gif) no-repeat;
	width:170px;}

.whatwedoContent li.cost2{
	background:url(/graphics/cost2.gif) no-repeat;
	width:187px;}

.whatwedoContent li.cost3{
	background:url(/graphics/cost3.gif) no-repeat;
	width:218px;}

.whatwedoContent li.cost4{
	background:url(/graphics/cost4.gif) no-repeat;
	width:177px;}

.whatwedoContent p a{
	background:url(/graphics/btn-get-quote.gif) no-repeat;
	float:left;
	height:0;
	overflow:hidden;
	padding:59px 0 0;
	width:763px;}

.portfolioContent{
	float:left;
	width:763px;}

.portfolioContent h1{
	background:url(../graphics/title-portfolio.gif) no-repeat left top;
	display:block;
	float:left;
	height:0;
	overflow:hidden;
	padding:45px 0 0 0;
	width:201px;}

.portfolioContent p{
	float:left;
	font-size:1.4em;
	line-height:1.6em;
	padding:0 0 15px;
	width:763px;}

.portfolioContent h2{
	display:block;
	float:right;
	height:0;
	overflow:hidden;
	padding:35px 0 0 0;
	width:450px;}

.portfolioContent h2#clientEurogreen{background:url(../graphics/title-port-eurogreen.gif) no-repeat left top;}
.portfolioContent h2#clientTopyacht{background:url(../graphics/title-port-topyacht.gif) no-repeat left top;}
.portfolioContent h2#clientRya{background:url(../graphics/title-port-rya.gif) no-repeat left top;}
.portfolioContent h2#clientEquiniti{background:url(../graphics/title-port-equiniti.gif) no-repeat left top;}
.portfolioContent h2#clientUniversitySouthampton{background:url(../graphics/title-port-soton.gif) no-repeat left top;}
.portfolioContent h2#clientFittleworth{background:url(../graphics/title-port-fittleworth.gif) no-repeat left top;}
.portfolioContent h2#clientAllsop{background:url(../graphics/title-port-allsop.gif) no-repeat left top;}
.portfolioContent h2#clientBailey{background:url(../graphics/title-port-bailey.gif) no-repeat left top;}
.portfolioContent h2#clientPelorus{background:url(../graphics/title-port-pelorus.gif) no-repeat left top;}
.portfolioContent h2#clientAmerang{background:url(../graphics/title-port-amerang.gif) no-repeat left top;}

.clientItem{
	float:left;
	min-height:250px;
	width:763px;}

.clientItem p{
	float:right;
	line-height:1.4em;
	padding:0;
	width:450px;}

.clientGallery{
	float:left;
	width:300px;}

.clientGallery ul{
	background:#fff;
	float:left;
	list-style:none;
	width:300px;}

.clientGallery li{
	height:178px;
	width:300px;}

.clientGallery li img{
	float:left;}

.clientGallery div{
	background:#CCC;
	float:left;
	width:300px;}

.clientGallery div a{
	background:#333;
	display:block;
	float:left;
	margin-right:1px;
	padding:3px 7px;
	text-decoration:none;}

.clientGallery div a:hover,
.clientGallery div a.activeSlide{
	background:#96C;
	color:#fff;}

.blogContent{
	float:left;
	width:763px;}

.blogContent #leftCol{
	float:left;
	width:533px;}

.blogContent #rightCol{
	float:right;
	width:200px;}

.blogContent h1{
	font-size:2em;}

.blogContent p{
	font-size:1.4em;
	line-height:1.6em;
	padding:0 0 15px;}

.blogContent p strong{
	background:#333;}

.blogContent h2{
	font-size:2.4em;
	letter-spacing:-1px;
	text-transform:uppercase;}

.blogContent h2 a{
	background:url(/graphics/blog-title-bg.gif) no-repeat 0 100%;
	color:#96C;
	display:block;
	margin-bottom:10px;
	padding:2px 0 5px 3px;
	text-decoration:none;}

.blogContent h2 a:hover{
	color:#333;}

.blogContent div.post div.date{
	background:url(/graphics/blog-date-bg.gif) no-repeat 0 100%;
	left:-72px;
	padding:2px 0 7px;
	position:absolute;
	top:0;
	width:66px;}

.blogContent div.post div.date span{
	display:block;
	text-align:center;}

.blogContent div.post div.date span.day{
	font-size:3em;
	line-height:1em;}

.blogContent div.post div.date span.month{
	font-size:1.8em;
	line-height:1em;}

.blogContent div.post div.date span.year{
	font-size:1.4em;
	line-height:1em;}

.blogContent #rightCol ul{
	clear:left;
	float:left;
	list-style:none;}

.blogContent #rightCol ul h2{
	color:#fff;
	font-size:1.8em;
	font-weight:bold;
	line-height:.8em;
	margin-bottom:3px;}

.blogContent #rightCol li{
	float:left;}

.blogContent #rightCol a{
	background:url(/graphics/bullet-arrow-tiny.gif) no-repeat 10px 35%;
	color:#fff;
	display:block;
	font-weight:bold;
	padding:0 0 6px 18px;
	text-decoration:none;
	width:200px;}

.blogContent #rightCol a:hover{
	color:#96C;}

.blogContent #rightCol ul ul{
	margin:0;}

.blogContent #rightCol li li{
	background:#999;
	font-size:1.4em;
	margin-bottom:2px;
	padding:1px;}

.blogContent #rightCol li li:hover,
.blogContent #rightCol li li:hover li{
	background:#ccc;}

.blogContent #rightCol li li a{
	background:url(/graphics/bullet-arrow-tiny.gif) no-repeat 18px 9px !important;
	font-weight:normal;
	padding:3px 0 3px 25px !important;
	width:193px;}

.blogContent #rightCol ul h2{
	float:left;
	padding-top:17px;}

.blogContent #rightCol ul small{
	color:#ccc;
	display:block;
	font-size:.8em;}

.blogContent #rightCol #searchform{
	float:left;
	width:220px;}

.blogContent #rightCol #searchform input{
	border:4px solid #ccc;
	color:#666;
	float:left;
	font-size:1.8em;
	width:175px;}

.blogContent #rightCol #searchform input#searchsubmit{
	border:none;
	cursor:pointer;
	float:right;
	width:37px;}

.blogContent #leftCol h1{
	color:#fff;
	font-weight:bold;
	font-size:2.5em;
	margin-bottom:10px;}
	
/* Contact Us */
.contactContent{
	float:left;
	width:763px;}

.contactContent h1{
	background:url(../graphics/title-contact.gif) no-repeat left top;
	display:block;
	float:left;
	height:0;
	overflow:hidden;
	padding:45px 0 0 0;
	width:328px;}

.contactContentThanks h1{
	background:url(../graphics/title-contact-thankyou.gif) no-repeat left top;
	display:block;
	float:left;
	height:0;
	overflow:hidden;
	padding:45px 0 0 0;
	width:328px;}

.contactContent p,
.contactContentThanks p{
	float:left;
	font-size:1.4em;
	line-height:1.6em;
	padding:0 0 15px;
	width:763px;}

.contactContent h2{
	background:url(../graphics/title-get-quote.gif) no-repeat left 7px;
	display:block;
	float:left;
	height:0;
	overflow:hidden;
	padding:52px 0 0 0;
	width:768px;}

.StandardForm{
	border-top:1px solid #fff;
	float:left;
	margin:5px 0 15px;
	padding-top:15px;
	width:693px;}

.StandardForm h3{
	font-size:1.8em;
	font-weight:bold;}

.StandardForm label{
	float:left;
	font-size:1.4em;
	padding-top:5px;
	text-transform:uppercase;
	width:30%;}

.StandardForm input,
.StandardForm select,
.StandardForm textarea{
	border:4px solid #ccc;
	color:#666;
	float:left;
	font-size:1.4em;
	margin-bottom:6px;
	padding:3px;
	width:50%;}

.StandardForm input:focus,
.StandardForm select:focus,
.StandardForm textarea:focus,
.StandardForm input:hover,
.StandardForm select:hover,
.StandardForm textarea:hover{
	border:4px solid #96C;}

.StandardForm select{
	width:51%;}

.StandardForm p{
	padding-bottom:0;}

input.submit{
	border:none !important;
	float:right;
	margin:10px 0 0;
	padding:0;
	width:auto;}

.StandardForm label.error{color:#F00;}

.StandardForm input.error,
.StandardForm textarea.error,
.StandardForm select.error{
	color:#F00;
	border:4px solid #F00;}

.contact{
	clear:left;
	font-size:1.4em;
	padding-top:3px;}

.contact strong{
	font-size:1.4em;}

/* jq lightBox by Leandro Vieira Pinho - http://leandrovieira.com */
#jquery-overlay{
	position:absolute;
	top:0;
	left:0;
	z-index:7000;
	width:100%;
	height:500px;}

#jquery-lightbox{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:8000;
	text-align:center;
	line-height:0;}

#jquery-lightbox a img{border:none;}

#lightbox-container-image-box{
	position:relative;
	background-color:#fff;
	width:250px;
	height:250px;
	margin:0 auto;}

#lightbox-container-image{padding:10px;}

#lightbox-loading{
	position:absolute;
	top:40%;
	left:0%;
	height:25%;
	width:100%;
	text-align:center;
	line-height:0;}

#lightbox-nav{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:10;}

#lightbox-container-image-box > #lightbox-nav{left:0;}

#lightbox-nav a{outline:none;}

#lightbox-nav-btnPrev, #lightbox-nav-btnNext{
	width:49%;
	height:100%;
	zoom:1;
	display:block;}

#lightbox-nav-btnPrev{ 
	left:0; 
	float:left;}

#lightbox-nav-btnNext{ 
	right:0; 
	float:right;}

#lightbox-container-image-data-box{
	font:1.8em Verdana, Helvetica, sans-serif;
	background-color:#fff;
	margin:0 auto;
	letter-spacing:-1px;
	line-height:1.4em;
	overflow:auto;
	width:100%;
	padding:0 10px 0;
	text-transform:uppercase;}

#lightbox-container-image-data{
	padding:0 10px; }
	
#lightbox-container-image-data #lightbox-image-details{
	width:70%; 
	float:left; 
	text-align:left;}	

#lightbox-image-details-caption{font-weight:bold;color:#666;}

#lightbox-image-details-currentNumber{
	display:block;
	clear:left;
	padding-bottom:1.0em;
	color:#666;}

#lightbox-secNav-btnClose{
	width:110px;
	float:right;
	padding-bottom:0.7em;}

/* Jquery Tooltip */
#tooltip {
	position: absolute;
	z-index: 3000;
	border: 3px solid #000;
	background-color: #333;
	font-size:1.4em;
	padding: 5px;
	opacity: 0.85;}

#tooltip h3, #tooltip div { margin: 0; font-weight:bold; }