/* Reset Default Browser Styles */

*{padding:0;margin:0}
div,span,h1,h2,h3,h4,h5,h6,a,ul,li,input,img,textarea{list-style: none;list-style-type: none;overflow:hidden;text-align:left;line-height:normal;}
img,div,input{behavior: url("iepngfix.htc")}
img{border: none;vertical-align: bottom;display: block}
a{text-decoration:none}
.clear{clear:both}
.disabled {display: none!important}
.enabled {display: block!important}

/* Global */

body {font: normal 12px 'Baskerville',Georgia,serif;background: #f6f6f6;padding-bottom:40px}
.wrapper {margin:0 auto;padding: 0 0 100px;width:1120px;position:relative;overflow:visible}
#bar{width:100%;background: url(../imgs/bar.png) repeat left top;border-bottom:0px solid #bbb;height:0px;}

#logo {
	background: url(../imgs/logo.png) no-repeat 13px 10px;
	width: 169px;
	text-shadow: 0 1px 0px #fff;
	text-align: center;
	height: 54px;
	display: block;
	position: fixed;
	letter-spacing: 0px;
	font: normal 36px Raleway,'Lane - Upper', 'M+ 2P';
	line-height: 32px;
	text-indent: -50000px;
	padding: 11px 10px;
	text-transform: uppercase;
	color: #222;
	top:44px;
	
	/*
	-moz-opacity:.80; 
  	filter:alpha(opacity=80); 
   	opacity:.80;
*/
   	-webkit-transition: opacity 0.15s linear;
  	-moz-transition: opacity 0.15s linear;  /* FF3.7+ */
  	-o-transition: opacity 0.15s linear;  /* Opera 10.5 */
}
	#logo:hover {
		-moz-opacity:1.0; 
  		filter:alpha(opacity=100); 
   		opacity:1.0;
	}
	
	#logo span {	
display: block;font-size: 12px;text-indent: -50000px;color: #888;font-family: 'Lane - Upper';text-shadow:none;letter-spacing: 2px}
	
#nav {
	width: 700px;
	position: absolute;
	top: 114px;
	left: 182px;
	margin: 0 0 0 0;
	display: none;
	float: left
}
	
	#nav li {float: left}
	
	#nav li a {
		display: block;
		float: left;
		width: 200px;
		font: bold 12px "Helvetica Neue",Helvetica,Arial,sans-serif;
		text-transform: uppercase;
		letter-spacing: 2px;
		color: #666;
		margin: 12px 0 12px;
		-webkit-transition: color 0.15s linear;
  		-moz-transition: color 0.15s linear;  /* FF3.7+ */
  		-o-transition: color 0.15s linear;  /* Opera 10.5 */
}
	#nav li a:hover {color: #000}
	#nav li a:hover span {color: #666}

		#nav li a span {	-webkit-transition: color 0.15s linear;
  		-moz-transition: color 0.15s linear;  /* FF3.7+ */
  		-o-transition: color 0.15s linear;  /* Opera 10.5 */
display:block;font-size: 11px;margin:3px 0;font-style: italic;font-weight: normal;letter-spacing: 1px;color: #aaa;text-transform: none}

#items {
	width: 864;
	margin: 36px 0 50px 250px;
	display: block;
	float: left
}
	
	#items li {float: left}
	
	#items li a {
		display: block;
		float: left;
		width: 200px;
		height: 113px;
		border: 1px solid #ddd;
		border-bottom: none;
		position: relative;
		background: #fff;
		-moz-box-shadow: 0px 1px 1px #bbb; 
	  	-webkit-box-shadow: 0px 1px 1px #bbb; 
    	box-shadow: 0px 1px 1px #bbb;
		margin: 4px;
		padding: 4px;
	}
	
	#items li a span {
		width: 152px;
		height: 15px;
		background: #eee;
		position: absolute;
		color: #111;
		padding: 6px 24px 10px;
		border-top: 1px solid #fff;
		font: bold 14px "Helvetica Neue",Helvetica,Arial,sans-serif;
		bottom: 4px;
		left: 4px;
		text-shadow: 0 1px 0 #fff;
		-webkit-transition: opacity 0.20s linear;
  		-moz-transition: -moz-opacity 0.20s linear;  /* FF3.7+ */
  		-o-transition: opacity 0.20s linear;  /* Opera 10.5 */
		-moz-opacity:.0; 
  		filter:alpha(opacity=0); 
   		opacity:.0;
	}
	
	#items li a:hover span {
		-moz-opacity:.7; 
  		filter:alpha(opacity=70); 
   		opacity:.70;

	}
	 
#ad {
	width: 122px;
	position: fixed;
	top: 320px;
	font: normal 11px "Helvetica Neue",Helvetica,Arial,sans-serif;
	color: #999;
	line-height: 15px;
	padding: 108px 10px 8px 10px;
	border: 1px solid #ddd;
	margin: 0 0 0 11px;
	border-bottom: none;
	-moz-box-shadow: 0px 1px 1px #bbb; 
	  	-webkit-box-shadow: 0px 1px 1px #bbb; 
    	box-shadow: 0px 1px 1px #bbb;
	background: #fff url(../imgs/ad.png) no-repeat center 10px
}

#ad b {color: #2e93e1}

#advertise {
	width: 150px;
	text-align: center;
	font-size: 11px;text-indent:3px;color: #555;font-family: 'Lane - Upper';text-shadow:none;letter-spacing: 1px;	height: 150px;
	position: fixed;
	top: 523px;
	text-transform: uppercase;
	}

#description {
	width: 160px;
	position: fixed;
	top: 208px;
	font: normal 11px "Helvetica Neue",Helvetica,Arial,sans-serif;
	color: #999;
	padding: 0 0 0 12px;
	text-shadow: 0 1px 0px #fff;
	line-height: 15px;
	}

#item {
	display: block;
	width: 908px;
	position: relative;
	height: 621px;
	background: url(../imgs/screenshot_bg.png) no-repeat 0 0;
	margin: 22px 0 0 230px
}
	#item img {position: absolute;top: 52px;left: 25px}
		
	h1 {
		font-weight: bold;
		font-size: 42px;
		color: #444;
		display: block;
		font: bold 48px "Helvetica Neue",Helvetica,Arial,sans-serif;
		float: left;
		width: 812px;
		margin: 0 0 0 182px;
		}
	
	h2 {
		width: 812px;
		float: left;
		color: #666;
		font: normal 14px "Helvetica Neue",Helvetica,Arial,sans-serif;
		margin: 8px 0 48px 182px;
		text-transform: uppercase;
		letter-spacing: 4px
	}
		h2 i {
			font: italic 16px Century Schoolbook,Times,'Baskerville',serif;margin: 0 3px 0 0;text-transform: none;letter-spacing: 0
		
		}
		
	p {
		font: normal 14px "Helvetica Neue",Helvetica,Arial,sans-serif;
		line-height: 24px;
		width: 600px;
		margin: 0 0 12px 0;
		color: #888
	}
	
		#content p a {
		display: block;
		float: left;
		position: relative;
		left: -6px;
		background: #f0f0f0;
		font: bold 12px "Helvetica Neue",Helvetica,Arial,sans-serif;
		padding: 3px 12px;
		color: #999;
		text-shadow: 0 1px 1px #fff;
		margin: 24px 0 -16px 3px;
		-moz-border-radius: 12px; /* FF1+ */
  -webkit-border-radius: 12px; /* Saf3+, Chrome */
        border-radius: 12px; /* Opera 10.5, IE 9 */
        -webkit-transition: color 0.15s linear;
  		-moz-transition: color 0.15s linear;  /* FF3.7+ */
  		-o-transition: color 0.15s linear;  /* Opera 10.5 */
		}
		
		#content p a:hover {color: #666}
		
	#content {
	margin: 0 0 0 182px;
	width: 812px;
	float: left;
	position: relative;
	overflow: visible;
	display: block
	}

	/* Canvas Content */

.item {overflow:hidden;height:500px;width: 812px;display:block;border-bottom: 1px solid #bbb;border-right: 1px solid #bbb;position: relative;right: 26px}
h3 span {position: absolute;right: 26px;color: #bbb}
#uploadrobots {background: url('../imgs/Upload-Robots.jpg') no-repeat 0 0}
#charles {background: url('../imgs/charles.jpg') no-repeat 0 0}
#chas {background: url('../imgs/chas.jpg') no-repeat 0 0}
#survivorship {background: url('../imgs/survivorship.jpg') no-repeat 0 0}
#bocoup {background: url('../imgs/bocoup.jpg') no-repeat 0 0}
#sheila {background: url('../imgs/sheila.jpg') no-repeat 0 0}

h3 {
	font: bold 16px "Helvetica Neue",Helvetica,Arial,sans-serif;
	margin: 12px 0 32px;
	color: #444
}

#some {
	position: fixed;
	top: 120px;
	width: 200px;
	padding: 0 0 0 12px;
}

#some li {
	float: left
}

#some li a {
	width: 34px;
	height: 34px;
	margin: 0 4px 0 0;
	display: block;
	overflow: hidden;
	position: relative;
	float: left;
	-moz-transition: opacity 0.3s ease-out;  
	-o-transition: opacity 0.3s ease-out;
	-webkit-transition: opacity 0.3s ease-out;
	-moz-opacity:.80;
  	opacity:.80
}

#some li #so_vimeo:hover {-moz-opacity:1.0;opacity:1.0}

#some li a:hover {
	-moz-opacity:1.0;
  	opacity:1.0
  	
}

#some li #so_email {background: url(../imgs/so_email.png) no-repeat 0 0;}
#some li #so_rss {background: url(../imgs/so_rss.png) no-repeat 0 0;}
#some li #so_vimeo {background: url(../imgs/so_vimeo.png) no-repeat 0 0;}
#some li #so_twitter {background: url(../imgs/so_twitter.png) no-repeat 0 0;}
#some li #so_flickr {background: url(../imgs/so_flickr.png) no-repeat 0 0;}



/* Footer Content */


#footer {padding:32px 0;position: fixed;top:563px;letter-spacing: 0px}
#footer p {color:#aaa;font: normal 11px arial;display: block;float: left}
#footer a {color:#aaa;font: bold 11px arial}