/*
	Cohenspire 2010
	Andrew Cohen
	layout.css
*/
/* based on Eric Meyer's CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
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; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
/* remember to define focus styles! */
:focus {outline: 0;}
ol, ul {list-style: none;}


/*
	Defaults
*/
body{background: #2b2d2d;}
.left{float: left;}
.right{float: right;}
.clear{clear:both;}


/*
	Header
*/
#wrapper_header{width: 100%; height: 72px; background: url('http://www.cohenspire.com/images/interface/bg_header.jpg') repeat-x;}
	#header{width: 960px; height: 72px; margin: 0 auto; position: relative;}
		a#logo{width: 137px; height: 49px; position: absolute; left: 0; top: 11px; display: block; background: url('http://www.cohenspire.com/images/interface/logo.png') no-repeat; text-indent: -7000px; overflow: hidden;}
		
		ul#nav{height: 56px; position: absolute; top: 0; right: 0; display: block;}
			ul#nav > li{display: inline; float: left; text-align: center;}
				ul#nav > li a{height: 29px; display: block; padding-top: 27px; -webkit-transition: color 0.3s linear; -moz-transition: color 0.3s linear;}
	 	 	 	 	 ul#nav > li a:hover{color: #b2b2b2; -webkit-transition: color 0.3s linear; -moz-transition: color 0.3s linear;}
				ul#nav > li.home{width: 63px;}
				ul#nav > li.about{width: 61px;}
				ul#nav > li.portfolio{width: 75px;}
				ul#nav > li.blog{width: 51px;}
				ul#nav > li.contact{width: 74px;}
				body#home li.home{background: url('http://www.cohenspire.com/images/interface/nav_homepage.jpg') no-repeat;}
				body#about li.about{background: url('http://www.cohenspire.com/images/interface/nav_about.jpg') no-repeat;}
				body#portfolio li.portfolio{background: url('http://www.cohenspire.com/images/interface/nav_portfolio.jpg') no-repeat;}
				body#blog li.blog{background: url('http://www.cohenspire.com/images/interface/nav_blog.jpg') no-repeat;}
				body#contact li.contact{background: url('http://www.cohenspire.com/images/interface/nav_contact.jpg') no-repeat;}
					body#home li.home:hover, body#about li.about:hover, body#portfolio li.portfolio:hover, body#blog li.blog:hover, body#contact li.contact:hover{cursor: default;}
					body#home li.home a:hover, body#about li.about a:hover, body#portfolio li.portfolio a:hover, body#blog li.blog a:hover, body#contact li.contact a:hover{color: #fff; cursor: default;}


/*
	Footer
*/
#wrapper_footer{width: 100%; height: 120px; background-color: #2D2B2B; }
	#footer{width: 960px; height: 38px; padding-top: 22px; margin: 0 auto; position: relative;}
		#footer > ul {float: right;}
			#footer > ul li{margin-left: 15px; display: inline; float: left;}
		#footer > ul#credits{float: left;}
			#footer > ul#credits li{margin-left: 0; margin-right: 15px;}


/*
	Landing Page
*/
#wrapper_banner{width: 100%;min-height: 402px; overflow: hidden; background: url('http://www.cohenspire.com/images/interface/bg_banner.jpg') repeat; border-top: solid 1px #f9f9f9; border-bottom: solid 1px #bababa;}
	#banner{width: 960px; min-height: 282px; padding: 60px 0; margin: 0 auto; overflow: hidden; background: url('http://www.cohenspire.com/images/interface/bg_bannergrunge.png') no-repeat bottom center;}
	
		#banner_images{width: 640px; height: 273px; position: relative; float: right; border: solid 5px #ececec;}
			#banner_images > ul#map {position: absolute; bottom: 10px; left: 10px; z-index: 30;}
				ul#map li {width: 12px; height: 12px; display: inline; float: left; margin-right: 10px; text-indent: -7000px; overflow: hidden; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
					ul#map li > a{height: 12px; width: 12px; display: block; background-color: #2b2d2d; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px;}
					ul#map li > a.activeSlide{background-color: #509bbd;}
					
			ul#images{position: relative; overflow: hidden;}
				ul#images > li{width: 640px; height: 273px;}
					ul#images > li img{position: absolute; top: 0; left: 0;}
					ul#images li > a{height: 26px; padding: 4px 15px 0; position: absolute; bottom: 40px; right: 0; z-index: 20; text-align: center; font-family: "Helvetica Neue", Helvetica, Arial, san-serif; font-size: 11px; font-weight: lighter; text-transform: uppercase; color: #fff; background: #2d2b2b; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-topleft: 10px; border-bottom-left-radius: 10px; border-top-left-radius: 10px;}
						ul#images > li > a:hover {background-color: #509bbd; text-decoration: none; -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.3); -moz-box-shadow: 0 0 8px rgba(0,0,0,0.3); box-shadow: 0 0 8px rgba(0,0,0,0.3);}
						
					
#wrapper_content{width: 100%; background: url('http://www.cohenspire.com/images/interface/bg_white.jpg') repeat; border-top: solid 1px #fff;}
	#wrapper_content > #top{width: 960px; margin: 0 auto; padding: 60px 10px 0; overflow: hidden; background: url('http://www.cohenspire.com/images/interface/bg_radial.png') no-repeat center top;}
		#top > #services{width: 290px; float: left;}
		#top > #about{width: 650px; float: right; padding-bottom: 8px;}
		
	#wrapper_content > #bottom{width: 960px; margin: 0 auto; padding: 114px 10px 60px 10px; overflow: hidden; background: url('http://www.cohenspire.com/images/interface/bg_divider.png') no-repeat center 37px;}
		#contactavail{width: 460px; float: left;}
			#quote {width: 280px; min-height: 67px; padding: 3px 160px 3px 10px; position: relative; overflow: hidden; background-color: #f5f5f5; border: solid 5px #509bbd; -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.3); -moz-box-shadow: 0 0 8px rgba(0,0,0,0.3); box-shadow: 0 0 8px rgba(0,0,0,0.3);}
		#recentblogs{width: 460px; float: right;}
			#recentblogs > ul li{width: 210px; height: 127px; overflow: hidden; float: left; display: block; line-height: 22px; -webkit-transition:all 0.3s ease-out; border: 5px solid #ececec;}
				#recentblogs > ul li:first-child{margin-right: 20px;}
					#recentblogs > ul li:hover{border: 5px solid #509bbd; -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.3); -moz-box-shadow: 0 0 8px rgba(0,0,0,0.3); box-shadow: 0 0 8px rgba(0,0,0,0.3); -webkit-transition:all 0.3s ease-out;}
				#recentblogs > ul li a{height: 127px; display: block; overflow: hidden; text-align: center;}


/*
	Subpage
*/
#content{width: 980px; margin: 0 auto; overflow: hidden; padding: 58px 0px 50px 0; position: relative; background: url('http://www.cohenspire.com/images/interface/bg_radial.png') no-repeat center top;}
	#content .main{width: 650px; float: right; overflow: hidden;}
	#content > .top{padding: 5px 10px 0 0;}
	#content > .row{width: 960px; margin: 0 auto; clear: both; padding: 119px 10px 0 10px; overflow: hidden; background: url('http://www.cohenspire.com/images/interface/bg_divider.png') no-repeat center 42px;}
		#content > .bottom{padding-bottom: 10px;}
		#twitter{width: 460px; height: 218px; float: left; position: relative; background: url('http://www.cohenspire.com/images/interface/bg_twitter.jpg') no-repeat bottom;}

	/*
		About
	*/
	img#me{width: 260px; height: 260px; float: left; border: solid 5px #ececec; }
	.col1{width: 280px; margin-right: 20px; float: left;}
	.col2{width: 160px; margin-right: 20px; float: left;}
	.col3{width: 160px; float: left;}
	.col4{width: 340px; float: left;}

	/*
		Contact Form
	*/
	form{width: 650px; float: right; padding: 0 0 8px 8px;}
		.field{width: 220px; overflow: hidden; margin-bottom: 21px;}
			.field.right{margin-right: 185px;}
			form label{height: 25px; width: 87px; padding-top: 6px; float: left; font-family: "Helvetica Neue", Helvetica, Arial, san-serif; font-size: 14px; line-height: 18px; font-weight: lighter; color: #fff; text-align: center; background: url('http://www.cohenspire.com/images/interface/bg_formlabel.png') no-repeat;}
			.field input{width: 202px; height: 14px; padding: 8px; float: left; clear: both; background: url('http://www.cohenspire.com/images/interface/bg_formfield.jpg') no-repeat; border: solid 1px #d0d0d0; font-size: 14px;}
		.field.textarea{width: 650px;}
			.field textarea{width: 632px; height: 100px; padding: 8px; float: left; clear: both; overflow: auto; background: url('http://www.cohenspire.com/images/interface/bg_formtextarea.jpg') no-repeat; border: solid 1px #d0d0d0; font-size: 14px;}
		form > button.button{height: 30px; padding: 0px 15px 0; float: left; clear: both; border: none;}
			button:hover{cursor: pointer;}

	/*
		Portfolio
	*/
	body#portfolio #content{width: 960px; padding: 0px 10px 60px 10px; position: relative;}
	
	#wrapper_picker{width: 958px; border: solid 1px #d0d0d0; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; border-bottom-right-radius: 10px;}
		#picker_top{width: 958px; height: 10px; background: url('http://www.cohenspire.com/images/interface/bg_pickertop.png');}
		#picker_middle{width: 938px; padding: 0 10px; overflow: hidden; background: url('http://www.cohenspire.com/images/interface/bg_pickermiddle.png') repeat-y;}
			.ui-tabs-hide {display: none;}
			ul#picker{height: 20px; padding: 5px 0 5px 5px; margin: 6px 0 0 10px; float: left; background-color: #2d2b2b; border-radius: 10px; -moz-border-radius: 20px; -webkit-border-radius: 20px;}
				ul#picker > li{height: 20px; padding: 0 10px; margin-right: 5px;; display: inline; float: left; text-align: center;}
					ul#picker > li:hover, .ui-state-active{background-color: #444; -border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
						ul#picker li a{height: 20px; line-height: 20px; display: block;}
														
			.projectlist{width: 938px; overflow: hidden;}
				.projectlist > ul{width: 938px; overflow: hidden;}
					.projectlist > ul li{width: 177px; margin-top: 18px; padding-left: 10px; display: inline; float: left; line-height: 18px;}
		#picker_bottom{width: 958px; height: 16px; background: url('http://www.cohenspire.com/images/interface/bg_pickerbottom.png'); -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; border-bottom-right-radius: 10px;}
	
	body#portfolio #content > ul#map{float: right; padding-top: 5px;}
	#project{width: 960px; position: relative; overflow: hidden; clear: both;}
		#project img{width: 950px; border: solid 5px #ececec;}

	/*
		Blog
	*/
	ul#toolbar{width: 960px; margin: 0 auto; padding: 40px 10px 0; overflow: hidden; text-align: right;}
		ul#toolbar li{display: inline; margin-left: 20px;}
	
	body#blog.archives #content > .row{width: 960px; margin: 0 auto; clear: both; padding: 119px 10px 0 10px; overflow: hidden; background: url('http://www.cohenspire.com/images/interface/bg_divider.png') no-repeat center 42px;}
	ul#visualarchive{padding-top: 10px; margin-top: -10px; overflow: hidden;}
		ul#visualarchive li{width: 220px; height: 220px; margin:0 10px 40px 10px; float: left; display: inline;}
			ul#visualarchive li > a{width: 220px; height: 137px; display: block; margin-bottom: 18px;}
				ul#visualarchive li > a:hover{-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.3); -moz-box-shadow: 0 0 8px rgba(0,0,0,0.3); box-shadow: 0 0 8px rgba(0,0,0,0.3);}
					ul#visualarchive li a img{width: 210px; height: 127px; border: 5px solid #ececec;}								

	/*
		404
	*/
	#image{width: 960px; height: 717px; background: url('http://www.cohenspire.com/images/interface/bg_404.jpg') no-repeat;}
	body#fourohfour #content > .row{padding-top: 0; background: none;}