@charset "utf-8";
/*	-------------------------------------------------------------
	CSS - MAIN : 	A Subtle Difference Website
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	Filename:		jb_main.css
	Date:		Feb, 18th, 2010
	Author:		Mike Moore http://becreativeeveryday.com
	-------------------------------------------------------------	*/



/*	--------------------------------------------------------------------------------------------------------------------------
	body/global/reset Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	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,
	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;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	body {
		line-height: 1;
		font-family:Times, Georgia, serif;
		font-size:14px;
		color:#4d4d4d;
		font-style:italic;
		background:#fff;
		font-weight:bold;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	
	/* tables still need 'cellspacing="0"' in the markup */
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	.altText {
		width:0; height:0;
		display:block;
		overflow:hidden;
	}
	.cleaner {
		clear:both;
		height:0px;
		font-size:1px;
		overflow:hidden;
		border:none;
		margin:0; padding:0;
		background:transparent;
	}
	.clearfix:after {
		content: ".";
		display: block;
		clear:both;
		visibility:hidden;
		line-height:0;
		height:0;
	}
	.clearfix {
		display:inline-block;
	}	
	html[xmlns] .clearfix {
		display:block;
	}
	* html .clearfix {
		height:1%;
	}
	img#bgMain {
		width: 100%; height:100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index:-1;
		_display:none;
	}

	#mainSection {
		width:960px;
		margin:0 auto;
		min-height:2400px;
	}
	a {
		text-decoration:none;
		color:#161616;
	}
		a:hover {
			text-decoration:underline;
		}
	p {
		padding:0 0 25px 0;
	}
/*	--------------------------------------------------------------------------------------------------------------------------
	topMast
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	#topMast {
		width:915px;
		padding:20px 0 0 0; margin:0 auto;
	}
	#Hello {
		float:left;
		text-transform:lowercase;
	}
	#topMast .push {
		padding:5px 0 0 0;
	}
	ul#social {
		display:inline; float:right;
	}
		ul#social li {
			display:inline; float:right;
			padding:0 0 0 3px;
		}
			ul#social li  a:hover img {
				opacity: 0.65;
			}
	
/*	--------------------------------------------------------------------------------------------------------------------------
	header
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/	
	#header {
		width:915px; height:149px;
		margin:0 auto;
		background:url(../../images/header_bg.png) top left no-repeat;
	}
	h1#mainLogo {
		width:175px; height:118px; 
		float:left; margin:17px 0 0 0;
	}
		h1#mainLogo a {
			width:175px; height:118px; 
			display:block;
			background:url(../../images/main_logo.png) top left no-repeat;
		}
			h1#mainLogo a:hover {
				opacity: 0.65;
			}
	#logoBall {
		display:block; float:left;
		width:118px; height:118px;
		background:url(../../images/main_logo.png) -175px 0 no-repeat;
		margin:17px 40px 0 0;
	}
	h2#h2_design {
		width:66px; height:113px;
		margin:17px 40px 0 0; float:left;
		background:url(../../images/h2_design.png) top left no-repeat;
	}
	#copy {
		display:block; float:left;
		margin:17px 40px 0 0;
		width:162px; height:113px;
		background:url(../../images/span_copy.png) top left no-repeat;
	}
	#available {
		display:block; float:left;
		width:109px; 
		margin:17px 0 0 0;
		
	}
	h3#h3NowAvailable {
		width:109px; height:95px;
		background:url(../../images/a_hire.png) top left no-repeat;
	}
	a#submit {
		width:109px; height:18px;
		background:url(../../images/a_hire.png) 0 -95px no-repeat;
		display:block;
	}
		a:hover#submit {
			opacity: 0.65;
		}
	ul#pgLinks {
		width:123px;
		float:right;
		margin:24px 0 0 0;
	}
		ul#pgLinks li a:hover {
			opacity:0.65;
		}
	ul#pgLinks li.about a {
		display:block;
		width:92px; height:38px;
		background:url(../../images/a_about.png) top left no-repeat;
	}
	ul#pgLinks li.contact {
		margin:30px 0 0 0;
		_margin:0;
	}
		ul#pgLinks li.contact a {
			display:block;
			width:123px; height:38px;
			background:url(../../images/a_contact.png) top left no-repeat;
		}
/*	--------------------------------------------------------------------------------------------------------------------------
	mainContent
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/	
	#mainContent {
		width:915px;
		margin:17px auto 0 auto; overflow:hidden;
		padding:0 0 30px 0;
		min-height:500px;

	}
		#mainContent  h2{
			display:inline;
			text-transform:lowercase;
			border-bottom:1px dashed #4d4d4d;
		}
	ul#photoFeed {
		width:950px;
		margin:15px 0 0 0;
	}
	ul#photoFeed li {
		float:left;
		width:175px; height:170px;
		background:url(../../images/img_bg.png) top left no-repeat;
		margin:0 10px 10px 0;
/*		box-shadow: #999 1px 1px 3px;
		-moz-box-shadow: #999 1px 1px 3px;
		-webkit-box-shadow: #999 1px 1px 3px;
*/
	}
		ul#photoFeed li a {
			display:block;
			width:149px; height:145px;
			overflow:hidden;
			margin:9px 0 0 11px;
		/*	box-shadow: #999 1px 1px 3px;
			-moz-box-shadow: #999 1px 1px 3px;
			-webkit-box-shadow: #999 1px 1px 3px;
*/
		}
			ul#photoFeed li a img {
				display:block;
			}
				ul#photoFeed li a:hover img {
					opacity:0.8;
				}
/*	--------------------------------------------------------------------------------------------------------------------------
	aboutSection
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/	
	#aboutBlock {
		padding:0 0 50px 0;
	}
	#aboutBlock #mainCol {
		width:590px;
		float:left;
		overflow:hidden;
	}
	#aboutBlock #altCol {
		width:325px;
		float:right;
		text-align:right;
	}
		#aboutBlock #mainCol h3 a {
			border-bottom:1px dashed #4d4d4d;
			text-transform:lowercase;
		}
			#aboutBlock #mainCol h3 a span {
				text-transform:uppercase;
			}
			#aboutBlock #mainCol h3 a:hover {
				border-style:solid;
				text-decoration:none;
			}
	#clientBlocks {
		padding:15px 0 0 0;
	}
		#clientBlocks h3 {
			text-transform:lowercase;
			border-bottom:1px dashed #4d4d4d;
			display:inline;
		}
	#block1 {
		width:370px;
		float:left;
	}
		#block1 ul {
			padding:10px 0 0 0;
		}
			#block1 ul li {
				width:163px;
				float:left;
			}
			
		#aboutBlock #altCol img {
			padding:10px;
			border:1px solid #787878;
		}
		#aboutBlock #altCol h4 {
			font-size:13px;
		}
	#block2 {
		width:170px;
		float:left;
	}
		#block2 ul {
			padding:10px 0 0 0;
		}
/*	--------------------------------------------------------------------------------------------------------------------------
	contactBlock
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/	
	#eBlock {
		padding:20px 0 0 0;
	}
	#mBlock {
		padding:10px 0 0 0;
	}
		#contactBlock .id {
			display:block; float:left;
			width:20px;
		}
		#contactBlock .inf{
			display:block; float:left;
			width:200px;
		}
		#contactBlock .or {
			padding:20px 0 5px 0;
		}
	#contact_form iframe {
		padding:10px;
		border:1px solid #6b6b6b;
	}
		#contactForm b {
			display:block;
			font-size:11px;
		}
		#contactForm b.email, #contactForm b.mailer {
			margin:10px 0 0 0;
		}
			#contactForm input#name, #contactForm input#email {
				display:block;
				border:1px solid #6b6b6b;
				background:none;
				margin:2px 0 0 0;
				width:256px;
				height:20px;
			}
			#contactForm #message {
				display:block;
				width:256px;
				height:130px;		
				border:1px solid #6b6b6b;	
				background:none;
				margin:2px 0 0 0;
			}
			#contactForm #buttons {
				margin:3px 0 0 0;
			}
				#contactForm #buttons input {
					font-size:11px;
					background:#fff;
					border:1px solid #6b6b6b;
				}
		
		
		
/*	--------------------------------------------------------------------------------------------------------------------------
	footer
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/	
	#footer {
		width:915px;
		padding:15px 0 40px 0; margin:0 auto;
		border-top:2px dotted #565656;
		text-align:center;
		font-size:13px;
	}