/*
Substance Labs - Screen Styles

author:	Cory Duncan of Substance Inc / findsubstance.com

-- */

/* -- 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, button,
table, caption, tbody, tfoot, thead, tr, th, td, col {
	background: transparent no-repeat 0 0;
	border: 0;
	font-size: 100%;
	margin: 0;
	outline: none;
	padding: 0;
	vertical-align: baseline;
	}
ol, ul { list-style: none; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table {	border-collapse: collapse; border-spacing: 0; width: 100%; }
input, textarea { margin: 0; padding: 0; }
em { font-style: italic; }
object { display: block; }
cite { font-style: normal; }


/* -- elements -- */
a { color: #c00; outline: none; text-decoration: none; }
a em { color: #999; font-style: normal; }
a:hover, a:hover em, a:focus, .current-cat a:link, .current-cat a:visited, .current_page_item a:link, .current_page_item a:visited { 
	background-color: #900;
	color: #fff;
	text-decoration: none; 
	}
a.img:hover, a.img:focus { background: transparent; }
body {
	background: #221100;
	color: #ccc;
	font: 13px/1.5384 Georgia, Serif;
	text-shadow: 0 1px 0 #000;
	}
p {	margin: 0 0 0.923em; }
ol { 
	list-style: decimal;
	margin: 0 0 0.923em 20px;
	padding: 0 0 0 10px;
	}
ol li { margin: 0.4615em 0 0; }
h1 {
	color: #fff;
	font-size: 28px; font-weight: normal;
	line-height: 1.1428em;
	margin-bottom: 0.4258em;	
	}
h1 a { padding: 0 0 0.1em; text-decoration: underline; }
h1 a strong { text-decoration: none; }
h2 {
	color: #fff;
	font-size: 18px; font-weight: normal;
	line-height: 1.3333em;
	margin: 0 0 0.6666em;
	}
h3 {
	color: #fff;
	font-size: 15px; font-weight: normal;
	line-height: 1.2em;
	margin: 0 0 0.8em;
	}
h4 {
	color: #fff;
	font-size: 12px;
	margin: 0 0 0.25em; 
	}
code {
	background-color: rgba(255, 255, 255, 0.15);
	font-family: 'Courier New', Courier, Monospace;
	}
::-moz-selection{
	background-color: #900;
	color: #fff;
	}
::selection{
	background-color: #900;
	color: #fff;
	}


/* -- structure -- */
#wrapper {
	margin: 0 auto;
	width: 800px;
	}
#header {
	background: url(/img/dash.gif) repeat-x 0 100%;
	margin: 0 0 1.5em;
	height: 108px;
	overflow: hidden;
	padding: 0 0 12px;
	position: relative;
	width: 100%;
	}
#logo {
	background-image: url(/img/logo-screen.png);
	bottom: 12px;
	height: 42px;
	left: 0;
	overflow: hidden;
	position: absolute;
	text-indent: -9999px;
	width: 254px;
	}
#logo a {
	height: 42px;
	left: 0;
	position: absolute;
	top: 0;
	width: 254px;
	}
#logo a:hover, #logo a:focus { background: none; }
.clear { clear: both; }	
.wrap { position: relative; width: 100%; }


/* -- content -- */	
#content { width: 100%; }
.col { float: left; width: 375px; }
.col-first { margin: 0 50px 0 0; }
#main {
	float: left;
	width: 520px;
	}
#sub img { margin: 0 auto; }
.feed {
	background-image: url(/img/icons/feed.gif); background-position: 0 50%;
	display: inline-block;
	padding: 2px 0 2px 22px;
	}
a.comments {
	background-image: url(/img/icons/comments.gif); background-position: 0 0.125em;
	display: inline-block;
	padding: 0 0 2px 18px;
	}

/* cms */
blockquote { font-size: 18px; font-weight: bold; }
blockquote p { line-height: 1.125em; }
pre {
	background: #594d40;
	border: 1px solid #6f6459; border-left-width: 4px;
	color: #ccc;
	margin: 0 0 0.923em;
	}
pre code {
	background-color: transparent;
	display: block;
	overflow: auto;	
	padding: 10px;	
	white-space: pre;
	width: 495px;
	}

/* toggles */
.stretcher { visibility: hidden; }
.toggler { 
	cursor: pointer;
	text-decoration: underline;
	}
.toggler:hover { text-decoration: none; }
.open { text-decoration: none; }

/* pagination */
.pagination {
	color: #900;
	margin: 1.25em 0 4em;
	overflow: hidden;
	text-decoration: underline; 
	width: 100%;
	}
.pagination .prev { float: left; width: 49%; }
.pagination .next { float: right; text-align: right; width: 49%; }

/* thumbnails */
.thumbs { margin: 0 0 1.5em; overflow: hidden; width: 100%; }
.thumbs li { float: left; margin: 0 3px 3px 0; }
.thumbs img { 
	background: #fff;
	border: 1px solid #999;
	display: block;
	padding: 4px;
	}
.thumbs a:hover img, .thumbs a:focus img { border-color: #900; }


/* -- posts - hatom microformat -- */
.hentry {
	background: url(/img/dash.gif) repeat-x 0 100%;
	margin: 0 0 1em;
	padding: 0 0 1.5em;
	width: 100%;
	}
.hentry object, .hentry .vvqbox { margin: 0 0 0.923em; }
.hentry img { display: block; }
.hentry ul { margin: 0 0 0.923em 20px; }
.hentry li { list-style: disc; margin: 0.4615em 0 0; }
.entry-content a {
	text-decoration: underline;
	}
.entry-content h2, .entry-content h3 {
	margin-top: 1.25em;
	}
.entry-content img.img {
	background: #fff;
	border: 1px solid #b9b9b9;
	padding: 6px;
	}

/* date */
.hentry .updated { 
	color: #999;
	display: block;
	font-size: 14px; font-style: oblique; font-weight: normal;
	line-height: 1em;
	margin: 0 0 0.6em;
	}
/* meta info */
.hentry .meta {
	color: #999;
	font-size: 11px;
	}
.hentry .meta a.comments { margin: 0 10px; white-space: nowrap; }
.hentry .meta p { margin: 0; }

/* project files */
.project-files {
	background: #47392b;
	font-size: 11px;
	line-height: 1.0909em;
	margin: 0 0 1em;
	padding: 4px 6px 5px;
	}
.project-files a {
	margin: 0 14px 0 0;
	text-decoration: underline;
	}
.project-files a:link, .project-files a:visited { color: #fff; }
.project-files a:hover, .project-files a:focus { text-decoration: none; }


/* -- comments -- */
#comments {
	background: url(/img/dash.gif) repeat-x 0 100%;
	margin: 1.25em 0 0;
	padding: 0 0 0.75em;
	width: 100%;
	}
h3#respond { font-size: 13px; }
.commentlist {
	color: #999;
	list-style: none;
	margin: 0 0 2em;
	padding: 0;
	}
.commentlist li { margin: 1.5384em 0; }
.commentlist p { margin: 0 0 0.5em; }
.commentlist .entry-text { font-size: 12px;	}
.commentlist .meta { font-style: oblique; font-size: 11px; }
.commentlist .author { 
	color: #ccc;
	font-size: 13px;
	margin: 0 0 0.4615em;
	}


/* -- sub content -- */
#sub {
	color: #999;
	float: right;
	font-size: 12px;
	text-align: center;	
	width: 240px;
	}
#sub h3 {
	font-size: 13px;
	}
#sub .sec { margin: 0 0 2em; }
#sub img { display: block; }


/* -- footer -- */
#footer {
	background: url(/img/dash.gif) repeat-x 0 0;
	float: left;
	margin: 2em 0 40px;
	padding: 0.75em 0 0;
	position: relative;
	width: 100%;
	}
#footer a { text-decoration: underline; }
#footer p { 
	background: url(/img/dash.gif) repeat-x 0 100%;
	margin: 0;
	padding: 0 0 1em;
	}
#footer a.home {
	background-image: url(/img/tree.png);
	height: 28px;
	left: 0;
	outline: none;
	overflow: hidden;
	position: absolute;
	text-indent: -9999px;
	top: 0.7em;
	width: 46px;
	z-index: 10;
	}
#footer a.home:hover, #footer a.home:focus { background-color: none; }
#footer .info { font-size: 12px; }
#footer .copyright {
	background: none;
	font-size: 11px;
	left: 0;
	margin: 1.35em 0 0;
	padding: 2px 0 1em 54px;
	position: absolute;
	top: 0;
	width: 560px;
	}
#footer .copyright em { color: #999; font-size: 0.92em; font-style: oblique; }
#footer .copyright em strong { font-size: 1.1em; font-style: normal; font-weight: normal; }
#footer .subscribe {
	float: right;
	padding: 1em 0 0;
	text-align: right;
	width: 220px;
	}
#footer .subscribe a { 	font-size: 12px; }
	
/* subscribe form */
#subscribe-form { float: right; text-align: left; margin: 0; width: 202px; }
#subscribe-form label {
	display: block;
	float: none;
	font-size: 11px;
	margin: 0.5em 0 0.2em;
	text-align: right;
	width: auto;
	}
#subscribe-form .text { float: right; width: 190px; }
#subscribe-form .submit { float: right; margin: 5px 0 0; width: auto; }


/* -- nav -- */

/* - nav: global - */
#nav {
	background: url(/img/dash.gif) repeat-x 0 100%;
	font-size: 14px;
	margin: 0;
	overflow: hidden;
	text-indent: -9999px;
	width: 100%;
	}
#nav span {
	background-image: url(/img/nav/global.png);
	display: block;
	height: 33px;
	margin: 0 0 1px;
	position: relative;
	width: 430px;
	}
#nav a {
	background-image: url(/img/nav/global.png);
	display: block;
	height: 33px;
	position: absolute;
	top: 0;
	}
#nav a:hover, #nav a:focus { background-color: transparent; }
#n-think { background-position: -65px 0; left: 65px; width: 95px; }
#n-work { background-position: -161px 0; left: 161px; width: 69px; }
#n-lab { background-position: -231px 0; left: 231px; width: 105px; }
#n-about { background-position: -348px 0; left: 348px; width: 82px; }

/* nav: global - hover */
#n-think:hover, #n-think:focus { background-position: -65px -33px; }
#n-work:hover, #n-work:focus { background-position: -161px -33px; }
#n-lab:hover, #n-lab:focus { background-position: -231px -33px; }
#n-about:hover, #n-about:focus { background-position: -348px -33px; }

/* nav: global - active */
.labs #n-lab { background-position: -231px -66px; }

/* - nav: local - */
#cat-nav {
	bottom: 12px;
	color: #999;
	font-size: 12px;
	line-height: 1.25em;
	margin: 9px 0 -0.25em;
	position: absolute;
	right: 0;
	width: 501px;
	}
#cat-nav a { padding: 2px; text-decoration: none; }
#cat-nav li {
	float: left;
	margin: 1px 0;
	width: 167px;
	}
	

/* -- forms -- */
form {
	overflow: hidden;
	width: 360px;
	}
form div { 
	overflow: hidden;
	width: 100%;
	}
label, .label {
	float: left;
	font-size: 12px;
	line-height: 1em;
	padding: 4px 8px 0 0;
	width: 50px;
	}
.field {
	clear: left;
	float: left;
	padding: 0 0 6px;
	width: 100%;
	}
input.text, textarea { 
	background: #333;
	border: 1px solid #666;
	color: #ccc;
	float: right;
	font: 12px/normal Arial, Helvetica, Sans-serif;
	margin: 0;
	padding: 3px 2px;
	width: 275px;
	}
textarea { overflow: auto; }
.input {
	float: right;
	width: 296px;
	}
input.text:focus, textarea:focus { background: #444; }
.submit { 
	float: right;
	padding: 0 0 1em;
	width: auto;
	} 
.submit input { 
	background: #900;
	border: 1px solid #900; border-bottom: 2px solid #300; border-right: 2px solid #300;
	color: #fff;
	cursor: pointer;
	font: 12px Arial, Helvetica, Sans-serif;
	padding: 2px 4px;
	}
.errortext { color: #900; font-weight: bold; }

/* search form */
.searchform {
	left: 14px;
	position: relative;
	width: auto;
	}
.searchform div {
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	width: 154px;
	}
.searchform input.text {
	float: left;
	width: 120px;
	}
.searchform input.btn {
	height: 18px;
	position: absolute;
	right: 0;
	top: 1px;
	width: 25px;
	}