body { font-family: Arial, sans-serif; margin: 0; padding: 0; border: 0; background: url(/img/bg.png) repeat-x; color: #31314f; font-size: 12px; }
	
	a { color: #ff5530; outline: none; }
		a:hover { color: #ff1a2d; }
	
	#header {  width: 950px; margin: 0 auto; }
	
	#main { width: 950px; margin: 0 auto; clear: left; overflow: hidden;  }
	
	#news { width: 720px; float: left; height: 190px;  }
		#news-teaser { font-size: 12px; }
			#news.fade #news-teaser { display: none; }
			#news-teaser a { display: block; width: 452px; height: 50px; margin: 105px 0 0 0; padding: 9px; color: #31314f; text-decoration: none; background: url(/img/news-popup-bg.png) no-repeat 0 0; }
				#news-teaser a:hover { background-position: 0 -68px; }
		#news-teaser-header { display: block; text-transform: uppercase; color: #931f58; font-weight: bold; margin: 0 0 4px 0; width: 100%; }
		#news-teaser-excerpt p { margin: 0; padding: 0;	line-height: 15px; }
	
	#logo { display: block; float: left; width: 220px; height: 167px; background: url(/img/superinteractive.png) no-repeat; text-indent: -10000px; margin: 10px 0 0 0; padding: 0; }
		#logo a { display: block; width: 220px; height: 187px; }

   	#menu { width: 950px; clear: left; padding: 0; margin: 0 auto; }
	#menu li { display: block; width: 155px; float: left; border-left: solid 1px #fff; }
	#menu li.web-developer { width: 120px; }
		#menu li.first { }
		#menu #menu-contact { margin: 0 0 0 285px; width: 215px; }
		#menu #menu-contact a { background: url(/img/sprite.png) no-repeat 72px -115px; font-weight: normal; text-align: left; padding: 0 0 0 25px; margin: 0; }
		#menu li a { color: #fff; display: block; line-height: 37px; font-size: 11px; font-weight: bold; text-align: center; text-decoration: none; }
		#menu li a:hover,
		#menu li.current a,
		#menu li#menu-contact.over a { color: #3fc269; background-position: 72px -152px; }
		
		#menu li span { font-family: "Hiragino Kaku Gothic Pro","Osaka","Zapf Dingbats"; }
		
		#menu #menu-news { width: 107px; border-right: solid 1px #fff; }
		#menu #menu-news a { background: url(/img/sprite.png) no-repeat 110px -115px; font-weight: normal; }
	
	#content { width: 700px; float: left; padding: 18px 20px 60px 0; font-size: 12px; line-height: 18px; }
	
	#content h1 { font-size: 24px; font-weight: bold; }
	#content h2 { padding: 16px 0 8px 0; font-size: 16px; margin: 0; }
	
	#post-list { width: 217px; float: left; margin: 58px 0 20px 0; background: #f4f4f4 url(/img/sprite.png) -433px -183px; position: relative; left: -1px; padding: 0; }
		#post-list h2 { display: block; text-transform: uppercase; color: #931f58; font-weight: bold; margin: 0 0 4px 0; width: 100%; font-size: 12px; padding: 10px 10px 4px 10px; float: left; display: block; width: 120px; }
		#post-list #rss { display: block; text-indent: -10000px; background: url(/img/rss.png) no-repeat; width: 20px; height: 20px; float: right; margin: 5px; }
		#post-list #rss a { display: block; text-indent: -10000px; background: url(/img/rss.png) no-repeat; width: 20px; height: 20px; }
		#post-list ol { list-style: none; padding: 0 10px 10px 10px; margin: 0; background: url(/img/news-bottom.png) no-repeat 0 100%; float: left; }
			#post-list ol li { border-top: dotted 1px #ccc; float: left;}
				#post-list ol li a { color: #31314f; text-decoration: none; display: block; padding: 8px 0; float: left; }
				#post-list ol li a:hover { background: #eaeaea;  }
				
	.post-summary { padding: 0 0 16px 0; border-top: dotted 1px #ccc; }
				
	#intro { font-size: 24px; line-height: 36px; }
		#intro a { white-space: nowrap; }
	
	#contact { line-height: 16px; display: none; width: 185px; padding: 10px 0 0 30px; background: #31314f url(/img/sprite.png) no-repeat -185px 100%; color: #fff; position: absolute; z-index: 2;}
		#menu #menu-contact #contact a { text-align: left; color: #fff; text-decoration: underline; font-weight: normal; background: url(/img/sprite.png) no-repeat 0 -79px; padding: 0 0 0 10px; line-height: 16px; display: inline; }
			#menu #menu-contact #contact #connect a { background: none; padding: 0; }
			#menu #menu-contact #contact a:hover { color: #3fc269; }
			#menu #menu-contact #contact #connect img { border: 0; }
			#contact-content {  }
			#contact p { border-left: solid 1px #78788c; padding: 0 0 18px 6px; margin: 0; }
			#contact h3 { border-left: solid 1px #78788c; padding: 0 0 0 6px; margin: 0; font-size: 12px; }
	
	.project-summary { border-top: dotted 1px #ccc; float: left; width: 100%; padding: 2em 0 1em 0; }
	#content .project-summary h2 { height: 150px; width: 234px; float: left; padding: 0; margin: 0;  }
		.project-summary h2 a { display: block; height: 100px; width: 234px; text-indent: -10000px;  }
		.project-summary-description { width: 423px; padding: 0 0 0 20px; float: left; }
			.project-summary-description p { margin: 0 0 1em 0; }
			.project-summary-description .more { padding: 0 0 1em 0; }
			.project-summary-description .more a { text-decoration: none; font-family: Arial, sans-serif; color: #31314f; cursor: pointer; display: block; float: left; padding: 0 26px 0 26px; margin: 0 0 10px 0; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #f1f1f1), color-stop(0.71, #fbfbfb) ); background-image: -moz-linear-gradient( center bottom, #f4f4f4 0, #fbfbfb 71% ); line-height: 24px; border: solid 1px #e7e7e7; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 13px; filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#f4f4f4'); }
			.project-summary-description .more a:hover { color: #ff5530; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #e0e0e0), color-stop(0.71, #f5f5f5 ) ); background-image: -moz-linear-gradient( center bottom, #e0e0e0 0, #f5f5f5 71% ); }
	
	#project-sections-header { }
	#project-sections { border-top: dotted 1px #ccc; border-bottom: dotted 1px #ccc; float: left; margin: 0 0 1em 0; padding: 1em 0; width: 100%; }
		.project-section { float: left; width: 175px; }
			#project-sections .landscape { width: 230px; }
			.project-section h3 { font-size: 12px; margin: 0; padding: 0 0 0 1px; }
			.project-section-thumbnail { width: 148px; height: 184px; background: url(/img/thumbnail-bg.png) no-repeat; padding: 4px; }
				#project-sections .landscape .project-section-thumbnail { width: 177px; height: 138px; background: url(/img/thumbnail-landscape-bg.png) no-repeat; }
			.project-section-thumbnail a { display: block; border: solid 4px #fff; width: 130px; height: 170px; }
				#project-sections .landscape .project-section-thumbnail a { width: 170px; height: 130px; }
			.project-section-thumbnail a:hover { border: solid 4px #ff5530; }
			.project-section-thumbnail img { border: 0; }
			.section-details { display: none; }
	#project-description { clear: both;  }
			
	#overlay { display: none; padding: 30px 40px; height: 432px; width: 778px; background: url(/img/overlay.png) no-repeat; position: fixed; z-index: 3; top: 50%; left: 50%; margin: -246px 0 0 -429px; color: #f1f1f1; }
		@media screen and (-webkit-min-device-pixel-ratio:0) {
	    	#overlay { text-shadow: #000 1px 1px 1px;  }
		}
		#overlay a { color: #fff; }
		#overlay-content { height: 398px; float: left; }
		#overlay-section-details { width: 268px; float: left; padding: 40px 30px 0 0; }
		#overlay-close { cursor: default; display: block; height: 14px; width: 14px; position: relative; top: -7px; left: -15px; text-indent: -10000px; outline: none; }
			#overlay-close:hover { background: url(/img/sprite.png) no-repeat 1px -29px;}
		#overlay-section-project-title { font-size: 11px; color: #aaa; font-weight: bold; }
		#overlay h3 { font-size: 22px; line-height: 22px; margin: 0; }
		#overlay-section-description { }
			#overlay-section-description a { font-size: 12px; padding: 0 0 0 17px; background: url(/img/sprite.png) no-repeat 0 -60px; }
		#overlay #browser { background: #fff url(/img/browser-top.png) no-repeat; padding: 24px 0 0 0; float: left; width: 480px; height: 342px; }
			#overlay #screenshot-container { padding: 0 0 7px 0; background: url(/img/browser-bottom.png) no-repeat 0 100%; float: left;  }
			#overlay #screenshot { overflow-y: auto; overflow-x: hidden; float: left; width: 480px; height: 336px; }
			#overlay #screenshot img { border: 0; float: left; }
		
		#overlay-navigation { clear: left; padding: 0; float: left; width: 100%; font-size: 11px; }
			#overlay-navigation-previous { display: inline; float: left; }
			#overlay-navigation-next { display: inline; float: right; text-align: right; }
			#overlay-navigation div { background: url(/img/overlay-nav-right.png) no-repeat 100% 0; padding: 0 10px 0 0; }
				#overlay-navigation div.over { background-position: 100% -20px; }
				#overlay-navigation div a { display: block; color: #fff;  height: 19px; padding: 1px 10px 0 20px; background: url(/img/overlay-nav-left.png) no-repeat; text-decoration: none; text-align: center; outline: none; }
					#overlay-navigation div.over a { background-position: 0 -20px; }
					
					@media screen and (-webkit-min-device-pixel-ratio:0) {
					    #overlay-navigation div a { text-shadow: #121212 1px 1px 1px; font-weight: bold; height: 20px; padding: 0 10px 0 20px; }
					}
	
	
	#breadcrumbs { font-size: 11px; margin: 0 0 22px 0; color: #888; }
	#breadcrumbs a { color: #888; }
		#breadcrumbs a:hover { color: #ff1a2d; }