/*
Title:      SimpleBits master screen styles (Bitstream Edition)
Author:     dan@simplebits.com
Copyright:  2010, SimpleBits, LLC.  All rights resevered (please don't re-use without permission).
*/

/* 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;
	font-size: 100%;
	vertical-align: baseline;
	border: 0;
	outline: 0;
	background: transparent;
	}
ol, ul {
	list-style: none;
	}
blockquote, q {
	quotes: none;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}

/* master styles
--------------------------------------------- */

body {	
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 100%;
	color: #222;
	background: #fff url(http://simplebits.com/-/img/bg-yellow.jpg) repeat -50% 0;
	}
body {
	color: rgba(0,0,0,.7);
	}
body.work {
	background-image: url(http://simplebits.com/-/img/bg-slate.jpg);
	}
body.speaking {
	background-image: url(http://simplebits.com/-/img/bg-green.jpg);
	}
body.about {
	background-image: url(http://simplebits.com/-/img/bg-blue.jpg);
	}

a:link,
a:visited {
	font-weight: bold;
	text-decoration: none;
	color: #222;
	border-bottom: 1px solid #222;
	-webkit-transition: color .2 ease;
	-moz-transition: color .2 ease;
	-o-transition: color .2 ease;
	transition: color .2 ease;
	}
a:link, a:visited {
	color: rgba(0,0,0,.7);
	border-bottom: 1px solid rgba(0,0,0,.15);
	}
a:hover {
	color: rgba(0,0,0,.9);
	border-bottom: 1px solid rgba(0,0,0,.25);
	}
h3 {	
	margin: 0 0 8px 0;
	font-size: .75em;
	text-transform: uppercase;
	color: rgba(0,0,0,.5);
	}
h3 img {	
	vertical-align: middle;
	}

#wrap {
	max-width: 1020px;
	margin: 0 auto;
	padding: 0 20px 20px 20px;
	background: url(http://simplebits.com/-/img/bg-fff-15.png);
	}
#wrap-inner {	
	max-width: 980px;
	margin: 0 auto;
	padding: 0 20px 40px 20px;
	background: url(http://simplebits.com/-/img/bg-fff-15.png);
	background: 
		url(http://simplebits.com/-/img/bg-fff-15.png),
		url(http://simplebits.com/-/img/burst.png) no-repeat center top fixed;
	overflow: hidden;
	}

/* nav and label
--------------------------------------------- */

#nav {	
	float: left;
	width: 14.285714%; /* 140 / 980 */
	position: fixed;
	}
#nav #logo {	
	margin: 0 0 15px 0;
	}
#nav #logo a {
	border: none;
	}
#nav #logo img {
	height: 0;
	}
#nav #logo a,
#nav #logo span {
	display: block;
	width: 73px;
	height: 105px;
	background: url(http://simplebits.com/-/img/logo-and-text.png) no-repeat top left;
	-webkit-transition: background-color .3s linear;
	}
#nav #logo a:hover,
#nav #logo a:focus,
#nav #logo span:hover {
	background-position: 0 -105px;
	}
#nav ul li a {	
	display: block;
	padding: 5px 0;
	font-size: 1.1em;
	line-height: 1;
	text-decoration: none;
	font-weight: bold;
	border: none;
	color: rgba(0,0,0,.4);
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
	}
#nav ul li a:hover,
#nav ul li.active a,
#nav ul li a:focus {	
	color: rgba(0,0,0,.7);
	}

/* main 
--------------------------------------------- */

#main {	
	float: right;
	width: 85.714286%; /* 780 / 980 */
	padding: 41px 0 0 0;
	}
#main #branding {
	margin: 0 0 20px 0;
	}
#main #branding a {
	display: block;
	margin-left: 20px;
	border: none;
	-webkit-transition: opacity .2s ease;
	-moz-transition: opacity .2s ease;
	-o-transition: opacity .2s ease;
	transition: opacity .2s ease;
	}
#main #branding a:hover,
#main #branding a:focus {
	opacity: .7;
	}
#main #branding p {	
	margin-left: 20px;
	font-size: .9em;
	font-weight: normal;
	text-transform: uppercase;
	color: rgba(0,0,0,.5);
	}

/* content
--------------------------------------------- */

#content {	
	float: left;
	width: 66.666667%; /* 560 / 840 */
	margin: 0 0 30px 0;
	}
#content-inner {	
	margin: -20px 40px 0 -10px;
	padding: 20px 0;
	}
#content h1.title {	
	margin: 0 36px 0 0;
	padding: 17px 20px;
	font-size: 1.2em;
	font-weight: normal;
	}
#content h1.title span {	
	color: rgba(0,0,0,.5);
	}
#content h3.date {	
	margin: 0 0 5px 0;
	padding: 0 20px;
	}
#content div.article {
	position: relative;
	margin: 0 0 15px 0;
	}
#content div.article-body {
	margin-right: 36px;
	padding: 17px 20px 5px 20px;
	font-size: .9em;
	line-height: 1.4;
	background: url(http://simplebits.com/-/img/bg-fff-20.png);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-webkit-border-radius: 3px;
	}
#content div.article-alt div.article-body {
	color: rgba(0,0,0,.5);
	background: url(http://simplebits.com/-/img/bg-000-8.png);
	}
#content div.notes div.article-body {
	padding-bottom: 15px;	
	background: url(http://simplebits.com/-/img/bg-000-8.png);
	}
#content div.plain {	
	margin-bottom: 5px;
	}
#content div.plain div.article-body {
	padding-bottom: 0;
	background: none;
	}
#content div.article-body h1 {	
	margin: 0 0 4px 0;
	font-size: 1.3em;
	font-weight: normal;
	line-height: 1;
	text-transform: uppercase;
	}
#content div.article-body h1.opening {	
	margin: -.2em 0 10px 0;
	font-size: 1.3em;
	line-height: 1.3;
	text-transform: none;
	color: rgba(0,0,0,.5);
	}
#content div.article-body h2 {	
	margin: 0 0 10px 0;
	font-size: 1.3em;
	font-weight: normal;
	line-height: 1.2;
	}
#content div.article-body h2 em {	
	font-style: normal;
	color: rgba(0,0,0,.5);
	}
#content div.article-body h2 a {	
	font-weight: normal;
	border: none;
	}
#content div.link div.article-body h2 {	
	margin: 0 0 3px 0;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.4;
	text-transform: none;
	}
#content div.link div.article-body h2 a {	
	font-weight: bold;
	border-bottom: 1px solid rgba(0,0,0,.15);
	}
#content div.link div.article-body h2 a:hover {
	color: rgba(0,0,0,.9);
	border-bottom: 1px solid rgba(0,0,0,.25);
	}
#content div.article-body h3 {	
	font-size: .8em;
	}
#content div.article-body p {	
	margin: 0 0 15px 0;
	}
#content div.article-body p.quote-source {	
	text-align: right;
	}
#content div.article-body p.opening {	
	margin: 0 0 10px 0;
	font-size: 1.1em;
	line-height: 1.4;
	color: rgba(0,0,0,.5);
	}
#content div.article-body blockquote {	
	margin: 0 0 15px 0;
	padding: 0 0 0 20px;
	font-family: Georgia, serif;
	font-style: italic;
	color: rgba(0,0,0,.5);
	}
#content div.quote blockquote {	
	margin: 0 0 10px 0;
	padding: 0;
	font-family: Georgia, serif;
	font-size: 1.2em;
	font-style: italic;
	line-height: 1.3;
	color: rgba(0,0,0,.7);
	}
#content div.article-body ul {
	margin: 0 0 15px 17px;
	list-style: disc;
	}
#content div.article-body div.time {	
	margin: 0;
	padding: 0 0 15px 0;
	font-size: .9em;
	line-height: 1;
	text-align: left;
	color: rgba(0,0,0,.5);
	}
#content div.article-body div.time a {	
	font-weight: normal;
	color: rgba(0,0,0,.5);
	border: none;
	}
#content div.article-body div.time a.tag {	
	margin-right: 3px;
	}
#content div.article-body div.time a:hover {	
	color: rgba(0,0,0,.7);
	border: none;
	}
#content div.article-body img.photo,
#content div.article-body object,
#content div.article-body embed {	
	display: block;
	max-width: 100%;
	margin: 3px 0 10px 0;
	}
#content div.article a.article-perm {	
	position: absolute;
	top: 20px;
	right: 0;
	border: none;
	opacity: .8;
	-webkit-transition: opacity .2s ease;
	-moz-transition: opacity .2s ease;
	-o-transition: opacity .2s ease;
	transition: opacity .2s ease;
	}
#content div.article a.article-perm:hover {	
	opacity: 1;
	}
#content div.article div.figure {	
	float: left;
	margin: 2px 12px 0 0;
	}
#content div.article div.figure img {	
	opacity: .8;
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	-o-box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
	}
#content div.article div.figure img:hover {
	opacity: 1;
	}	

/* lists */

dl.lst {
	line-height: 1.5em;
	}
dl.lst dt {
	font-weight: bold;
	}
dl.lst dd {
	margin: 0 0 15px 0;
	}
dl.lst dd:last-child {
	margin: 0;
	}
dl.lst dd em {
	display: block;
	font-style: normal;
	color: rgba(0,0,0,.5);
	}

/* events */

#content div.article ul.events {	
	margin: 0;
	list-style: none;
	}
#content div.article ul.events li {	
	float: left;
	width: 50%;
	margin-bottom: 15px;
	}
ul li.vevent strong.summary {
	display: block;
	font-weight: bold;
	}
ul li.vevent abbr {
	border: none;
	font-size: 1em;
	letter-spacing: 0;
	}
ul li.vevent span.location {
	display: block;
	color: rgba(0,0,0,.5);
	}

/* notes */

ol.notes li {	
	margin: 0 0 10px 0;
	font-size: .9em;
	line-height: 1.5;
	}
ol.notes li a img {
	float: left;
	margin: 2px 5px 0 0;
	}
#content div.article-body ol.notes li blockquote {
	margin: 6px 21px;
	padding: 0;
	}
ol.notes li blockquote a {
	display: block;
	padding: 0 10px;
	font-weight: normal;
	line-height: 1.4;
	color: rgba(0,0,0,.5);
	border: none;
	border-left: 1px solid rgba(0,0,0,.2);
	-webkit-transition: .2s all ease;
	-moz-transition: .2s all ease;
	-o-transition: .2s all ease;
	transition: .2s all ease;
	}

/* pagination */

div.paging {
	padding-right: 86px;	
	text-align: center;
	}
div.paging a {	
	margin: 0 5px;
	border: none;
	opacity: .7;
	-webkit-transition: opacity .2s ease;
	-moz-transition: opacity .2s ease;
	-o-transition: opacity .2s ease;
	transition: opacity .2s ease;
	}
div.paging a:hover {	
	opacity: 1;
	}

/* welcome block */

#content div.article-alt div.article-body#welcome {
	position: relative; 
	padding-right: 110px; 
	padding-bottom: 5px;
	}
#welcome-blocks {
	position: absolute; 
	top: -10px; 
	right: 20px;
	}

/* aside
--------------------------------------------- */

#aside {	
	float: right;
	width: 33.333333%; /* 280 / 840 */
	}

/* latest tweets */

ul#twitter_update_list li {	
	margin: 0 0 15px 0;
	font-size: .8em;
	line-height: 1.4;
	color: #666;
	}
ul#twitter_update_list li span {	
	display: block;
	}

/* elsewhere */

h3#elsewhere-head {
	display: none;
	}
ul#elsewhere {	
	margin: 6px 0 45px 0;
	}
ul#elsewhere li {	
	display: inline;
	}
ul#elsewhere li a {	
	border: none;
	}
ul#elsewhere li a img {	
	opacity: .3;	
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
	}
ul#elsewhere li a:hover img,
ul#elsewhere li a:focus img {	
	opacity: .5;	
	}

#aside h3 img {	
	vertical-align: bottom;
	}
#aside p {	
	margin: 0 0 30px 0;
	font-size: .8em;
	line-height: 1.4;
	color: rgba(0,0,0,.6);
	}
ul.slats {	
	margin: 0 0 30px 0;
	}
ul.slats li {
	margin: 0 0 15px 0;
	font-size: .8em;
	line-height: 1.4;
	}
ul.slats li a em {
	display: block;
	font-size: .9em;
	font-weight: normal;
	font-style: normal;
	color: rgba(0,0,0,.6);
	}
ul.slats li a img {	
	float: left;
	width: 40px;
	margin: 2px 12px 0 0;
	opacity: .8;
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	-o-box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
	}
ul.thedeck {
	padding: 10px 10px 8px 10px;
	background: url(http://simplebits.com/-/img/bg-000-8.png);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-webkit-border-radius: 3px;
	}
ul.thedeck li {	
	margin: 0;
	}
ul.thedeck li a img {
	width: auto;
	margin-bottom: 2px;
	}
#aside ul.thedeck li p {
	margin: 0;	
	font-size: .9em;
	line-height: 1.5;
	}
ul.slats li a:hover img {	
	opacity: 1;
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0);
	-o-box-shadow: 1px 1px 1px rgba(0,0,0,0);
	box-shadow: 1px 1px 1px rgba(0,0,0,0);
	}

/* footer
--------------------------------------------- */

#footer {		
	clear: both;
	margin: 10px 0 0 10px;
	text-align: left;
	}
#footer p {	
	margin: 0 0 4px 0;
	font-size: .8em; 
	line-height: 1.5; 
	color: rgba(0,0,0,.5);
	}
#footer p a {	
	color: rgba(0,0,0,.7);
	}
#footer p a:hover {	
	color: rgba(0,0,0,.9);
	}
#footer p img {	
	vertical-align: top;
	}

/* misc
--------------------------------------------- */

.sep,
#content div.entry-body div.date .sep {	
	margin: 0 3px;
	color: rgba(0,0,0,.2);
	}

/* self-clear floats */

.group:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
    
/* IE7 hacks
--------------------------------------------- */

*:first-child+html .group,
*:first-child+html div.article-body,
*:first-child+html #wrap {
	min-height: 1px;
	}

/* work, about, speaking overrides
--------------------------------------------- */

body.work #content div.article-body,
body.about #content div.article-body,
body.speaking #content div.article-body {	
	margin-right: 0;
	}

body.work-index #content div.photo {	
	float: left;
	width: 33%;
	}
body.work-index #content div.photo div.article-body {	
	text-align: center;
	background: none;
	}
body.work-index #content div.photo img {	
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	-o-box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	box-shadow: 1px 1px 2px rgba(0,0,0,.3);
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
	}
body.work-index #content div.photo a:hover img {	
	opacity: .7;
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0);
	-o-box-shadow: 1px 1px 1px rgba(0,0,0,0);
	box-shadow: 1px 1px 1px rgba(0,0,0,0);
	}
body.work-index #content div.photo p,
body.work-index #content div.photo ul,
body.work-index #content div.photo div.time {	
	display: none;
	}
body.work-index #content div.photo div.article-body h2 {	
	font-size: 1em;
	line-height: 1;
	}

/* responsiveness
--------------------------------------------- */

@media screen and (max-width: 800px) {
	#nav ul {	
		font-size: .9em;
		}
	#content, #aside {
		float: none;
		clear: both;
		width: auto;
		}
	#main #branding {	
		width: auto;
		margin-bottom: 10px;
		}
	#content-inner {	
		margin-right: 0;
		margin-left: 0;
		}
	div.paging {	
		padding-right: 46px;
		}
	#aside, 
	#footer {
		margin-left: 20px;
		}
	#aside-1 {
		float: left;
		width: 46%;
		}
	#aside-2 {	
		float: right;
		width: 46%;
		}
	h3#elsewhere-head {
		display: block;
		}
	ul#elsewhere {
		margin: 0 0 30px 0;
		}
	body.work-index #content div.photo {	
		width: 50%;
		}
	}
	
@media screen and (max-width: 650px) {
	#wrap {
		padding: 0;
		}
	#wrap-inner {	
		padding-left: 10px;
		padding-right: 10px;
		}
	#nav {	
		position: static;
		width: 100%;
		}
	#nav #logo {	
		margin: 0 0 10px 0;
		}
	#nav #logo a {
		width: 138px;
		height: 69px;
		background-image: url(http://simplebits.com/-/img/logo-small.png);
		}
	#nav #logo a:hover {	
		background-position: 0 -69px;
		}
	#nav ul {	
		margin: 0 0 10px 0;
		font-size: .8em;
		}
	#nav ul li, 
	#nav ul li a {	
		display: inline;
		}
	#nav ul li a {	
		margin-right: 7px;
		}
	#nav ul li:last-child a {	
		margin-right: 0;
		}
	#main {	
		float: none;
		width: 100%;
		padding-top: 0;
		}
	#main #branding {
		display: none;
		}
	#content-inner {	
		margin-left: 0;
		padding-top: 10px;
		}
	#content div.article-alt div.article-body#welcome {
		padding-right: 20px; 
		}
	#welcome-blocks {
		display: none;
		}
	#content h1.title {	
		margin-top: 0;
		}
	#content div.article-body {	
		margin-right: 0;
		}
	#content div.article a.article-perm {
		display: none;
		}
	#content div.article div.article-body p.opening {	
		font-size: 1.1em;
		line-height: 1.3;
		}
	#aside,
	#footer {	
		margin-left: 0;
		}
	#aside-1,
	#aside-2 {	
		float: none;
		width: auto;
		}
	ul#elsewhere {	
		margin-left: 0;
		}
	}