/*
Theme Name: Ian Storm Taylor 2010
Theme URI: http://ianstormtaylor.com
Description: Theme for ianstormtaylor.com. Fall 2010-
Author: Ian Storm Taylor
Author URI: http://ianstormtaylor.com
Version: 0.4
*/
/* Combination of resets */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, textarea, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header,  hgroup, menu, nav, section, menu, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; font-style:normal; list-style:none } article, aside, audio, canvas, details, embed, figcaption, figure, footer, header, hgroup, nav, section, summary, video { display:block; position:relative } command, datalist, keygen, mark, meter, progress, rp, rt, ruby, time, wbr { display:inline } nav ul { list-style:none } blockquote, q { quotes:none } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:inherit; color:inherit; } ins { background-color:#ff9; color:#000; text-decoration:none } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold } del { text-decoration:line-through } abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help } table { border-collapse:collapse; border-spacing:0 } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0 } input, select { vertical-align:middle }
/* Good defaults (HTML5 Boilerplate) */ html { overflow-y: scroll; } pre, code, kbd, samp { font-family: monospace, sans-serif; } h1,h2,h3,h4,h5,h6 { font-weight: bold; text-rendering: optimizeLegibility; } strong { font-weight: bold } em { font-style: italic } sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font-size: smaller; } pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } textarea { overflow: auto; } input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } label, input[type=button], input[type=submit], button { cursor: pointer; } button { width: auto; overflow: visible; } .ie7 img { -ms-interpolation-mode: bicubic; } button, input, select, textarea { margin: 0; } @media print { pre, blockquote { page-break-inside: avoid; } img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }
/* Clearfix */ .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } 


/* Defaults */
body, select, input, textarea { 
	font: 400 14px/1.2 "klavika-web-1", "klavika-web-2", "Klavika";
	color: #333;
}

::-webkit-input-placeholder {
   color: rgba(125,125,125,.5);
}

:-moz-placeholder {
   color: rgba(125,125,125,.5);
}

h1, h2, h3 {
	color: #1a1a1a; 
	font-weight: 600;
	line-height: 1.1;
}

h1, #h1 {
	font-size: 42px; line-height: .5;
	padding: 0 0 10px 9px;
	margin-bottom: 20px;
	font-weight: 700;
}

h2 { 
	font-size: 24px; 
	font-weight: 600;
}

h3 { 
	font-size: 18px;
}

h4 {
	font-size: 10px;
	text-transform: uppercase;
	font-weight: 100;
	color: rgba(0,0,0,.6); 
	-webkit-font-smoothing: antialiased;
}

p + p {
	margin-top: 1em;
}

p a { 
	background-color: rgba(0,0,0,.05);
	border-bottom: 1px solid rgba(0,0,0,.1);
	transition: all .25s;
	color: black; padding: 0 2px; margin: 0 -1px;
}
	p a:hover { background-color: rgba(0,0,0,.1); border-bottom-color: rgba(0,0,0,.4); }

p em {
	font-style: italic;
}

p strong { 
	font-weight: 600;
}

i { font-style: italic }
b { font-weight: bold }


/* General */
#construction {
	width: 920px;
	margin: 10px auto -48px;
	background-color: rgba(0,0,0,.04);
	padding: 10px;
	font-size: 15px; line-height: 1.2;
	z-index: 10;
	display: none;
}	
	#construction p { font-style: italic }


body {
	z-index: 0;
	position: relative;
	background-color: rgba(0,0,0,.04);
}
	body.single-article { background-color: white }

#wrap {
	width: 940px;
	margin: 0 auto;
	padding: 20px;
	background-color: white;
	position: relative;
	min-height: 100%;
	box-shadow: 0 0 7px 0 rgba(0,0,0,.04);
}
	body.single-article #wrap { -webkit-box-shadow: none; background-color: transparent }

.content header {
	border-bottom: 2px dotted rgba(0,0,0,.06);
	margin: 50px -20px 0;
	padding: 0 20px;
}
	body.single-article .content header { border-bottom: none }

/* Meta */
label { 
	background-color: rgba(0,0,0,.04);
	color: rgba(0,0,0,.4);
	font-size: 10px; line-height: 1;
	text-transform: uppercase;
	padding: 9px 10px 8px;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
}

.meta { 
	margin: -20px 0 20px;
	overflow: auto;
	color: rgba(0,0,0,.25);
	border-top: 1px solid rgba(0,0,0,.04);
}

.meta ul, .meta li {
	display: inline;
}

.meta-list ul { padding: 4px 2px; }

.meta-list li + li ul { border-left: 1px solid rgba(0,0,0,.04); }

.meta-list ul li {
	color: rgba(0,0,0,.25);
	padding: 0 6px;
}
	.meta a {
		-webkit-transition: color .25s;
	}
	.meta a:hover, .meta a.current {
		color: rgba(0,0,0,.85);
	}

.button {
	appearance: none;
	border: none;
	background-color: rgba(0,0,0,.05);
	display: block;
	margin-top: 25px;
	text-align: center;
	width: auto;
	font: 500 16px/1 "Klavika", "klavika-web-1","klavika-web-2";
	padding: 10px;
	border-radius: 3px;
	cursor: pointer;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
	.button:hover {
		background-color: rgba(0,0,0,.1);
	}


.big-button {
	display: block;
	text-align: center;
	font-weight: 600;
	font-size: 18px;
	color: #999;
	text-shadow: 0 -1px #777, 0 1px rgba(255,255,255,.1);
	padding: 10px 0 8px;
	margin: -2px 0 7px;
	border: 1px solid rgba(0,0,0,.04);
	border-top-color: rgba(0,0,0,.07);
	border-bottom-color: rgba(255,255,255,.2);
	background-color: #ddd;
	
	border-radius: 5px;
	box-shadow: 
 		0 1px #e0e0e0, 
 		0 5px #bfbfbf, 
 		0 6px hsla(0,0%,100%,.04), 
 		0 -1px #eee, 
 		0 7px 3px rgba(0,0,0,.2),
 		0 2px rgba(0,0,0,.5),
 		0 3px hsla(0,0%,100%,.7),
 		0 6px 1px #aaa;
	transition: background-color .25s;
}
	.big-button:hover {
			background-color: #ccc;
			0 1px #d0d0d0, 
	 		0 5px #cfcfcf, 
	 		0 6px hsla(0,0%,100%,.04), 
	 		0 -1px #ddd, 
	 		0 7px 3px rgba(0,0,0,.1),
	 		0 2px rgba(0,0,0,.5),
	 		0 3px hsla(0,0%,100%,.7),
	 		0 6px 1px #999;
		}
	.big-button:active { 
		margin-top: 2px; margin-bottom: 3px;
		background-color: #ccc;
		
		box-shadow:
			0 1px #d0d0d0,  
   		0 2px #cfcfcf,  
   		0 3px hsla(0,0%,100%,.04), 
   		0 -1px #ddd, 
   		0 4px 3px rgba(0,0,0,.1),
   		0 3px 1px #999;
	}




/* Header */
#header {
	height: 34px;
	background: #1a1a1a;
	text-transform: uppercase;
} 
	#header-wrap { width: 940px; margin: 0 auto; }

#logo { 
	float: left; 
	
	transition: color .25s, background-color .25s;
}
	#logo:hover { background-color: #1f1f1f; }
	
	#logo a {
		display: block;
		border: 0;
		padding: 12px 10px;
		margin: 0;
		text-indent: -9999px;
		width: 116px; height: 10px;
		background: url(images/logo.png) center center no-repeat;
	}
	
	#logo a:hover { 
		opacity: .4;
	}

#nav {
	color: #fff;
	height: 100%;
	width: 960px; margin: 0 auto;
}

#nav ul {
	width: 226px;
	margin: 0 auto;
}

#nav a {
	height: 34px;
	line-height: 36px;
	font-size: 10px;
	float: left;
	font-weight: 100;
	padding: 0 15px 0;
	text-align: center;
	color: rgba(255,255,255,.4);
	position: relative;
	
	transition: color .25s, background-color .25s;
}
	#nav a:hover {
		color: rgba(255,255,255,.9);
	}
	#nav a.current {
		color: rgba(255,255,255,1);
	}
	#nav a.current:after {
		content:"\00a0";
		display:block;
		position:absolute;
		top: 34px;
		z-index: 200;
		left: 50%;
		margin-left: -5px;
		width:0; height:0;
		border-top: 5px solid #1a1a1a;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent
	}

.social {
	float: right;
}

.social li {
	float: left;
	height: 34px;
	line-height: 36px;
	font-size: 10px;
	float: left;
	font-weight: 100;
	width: 34px;
	text-align: center;
	color: rgba(255,255,255,.4);
	position: relative;
	text-indent: -9999px;
}
	.social li a { transition: opacity .25s; 	opacity: .4; }
	.social li a:hover { opacity: .9 }

.social .twitter a {
	display: block;
	height: 34px; width: 34px;
	text-indent: -9999px;
	background: url(images/twitter.png) no-repeat center;
}

.social .email a {
	display: block;
	height: 34px; width: 34px;
	text-indent: -9999px;
	background: url(images/email.png) no-repeat center;
}

.social .feed a {
	display: block;
	height: 34px; width: 34px;
	text-indent: -9999px;
	background: url(images/feed.png) no-repeat center;
}



/* STREAMS */
/* .container */
.container {
	border-bottom: 2px dotted rgba(0,0,0,.06);
	margin: 0 -20px;
	padding: 20px;
	clear: both;
}

/* .item-information */
.container .item-information {
	float: right;
	margin-left: 20px;
	width: 220px;
	position: relative;
}
	
	.container h2, .container h3 {
		padding-top: 10px;
		margin-top: -1px;
		font-size: 24px;
		font-weight: 600;
		z-index: 5;
		position: relative;
	}
	
	.container time {
		font-size: 10px;
		text-transform: uppercase;
		font-weight: 100;
		color: rgba(0,0,0,.6); 
	-webkit-font-smoothing: antialiased;
	}
	
	.container .description {
		margin: 20px 0 0;
		font-size: 16px;
		line-height: 1.3;
	}
	
	.container .extra {
		margin-top: 20px;
		display: block;
		font-size: 13px;
		line-height: 1.2;
	}

/* .item-visual */
.container .item-visual {
	float: right;
}	

	.container .attachment-post-thumbnail {	
		outline: 1px solid #ddd;
		width: 700px;
	}
	
	.container .slideshow {
		width: 700px;
	}
		.container .slides_control img {
			display: block;
		}
		.container .slideshow-container {
			width: 700px; 
			position: relative;
			overflow: hidden;
		}
		.container .slideshow-pagination {
			text-align: center;
			margin: 10px auto 10px;
		}
		.container .slideshow-pagination li {
			display: inline;
		}
		.container .slideshow-pagination a {
			display: inline-block;
			width: 6px; height: 6px;
			margin-right: 7px;
			text-indent: -9999px;
			background-color: rgba(0,0,0,.1);
			
			border-radius: 7px;
		}
		.container .slideshow-pagination .current a {
			background-color: rgba(0,0,0,.5);
		}



#project-single h1 {
	font-size: 24px; line-height: 1.1;
	padding: 0;
	border-bottom: none;
	margin-bottom: 0;
}





/* Single Article */

#article-time {
	float: left;
	width: 220px;
	margin-right: 20px;
}

#article-categories {
	float: left;
	width: 520px;
	margin-right: 20px;
}

#article-navigation {
	float: left;
}

#article-time time, #article-categories li, #article-navigation a {
	padding: 0 6px;
	display: inline;
}

#comments-wrap {
	background: #1a1a1a;
}

#comments {
	width: 940px;
	padding: 40px 0;
	margin: 0 auto;
	color: #bbb;
}

#comments h2, #comments h3 {
	color: #f0f0f0;
	padding-left: 10px;
}

#comments p {
	font-weight: 100;
}

#comments p a { 
	background-color: rgba(255,255,255,.04);
	border-bottom: 1px solid rgba(255,255,255,.2);
	color: white;
}
	#comments p a:hover { background-color: rgba(255,255,255,.1); border-bottom-color: rgba(255,255,255,.4); }

#comments h2 {
	margin-bottom: 40px;
	padding-bottom: 4px;
	font-size: 30px;
	border-bottom: 1px solid rgba(255,255,255,.04);
}

.comment {
	overflow: auto;
	padding: 20px 0;
	border-bottom: 1px solid rgba(255,255,255,.04);
}
	.comment:last-of-type {
		border: none;
		margin-bottom: 40px;
	}
	.comment + .comment {
		margin-top: 20px;
	}

.comment-meta {
	float: left;
	width: 220px;
	margin-right: 20px;
}

.comment-body {
	float: left;
	width: 510px;
	padding-left: 10px;
	margin-right: 20px;
	font-size: 17px; line-height: 1.4;
}

.comment-avatar {
	float: left;
	padding: 3px;
	border: 1px solid rgba(255,255,255,.04);
}
	.comment-avatar img {
		display: block;
	}

.comment time {
	padding-left: 10px;
	font-size: 10px;
	text-transform: uppercase;
	font-weight: 100;
	color: rgba(255,255,255,.6);
	-webkit-font-smoothing: antialiased;
}

#comment-form {
	padding-bottom: 40px;
	overflow: auto;
}

.comment-content {
	width: 520px;
	float: right;
	margin-right: 180px;
}

.comment-logged-in {
	margin-bottom: 6px;
	padding-left: 10px;
}

.commenter-info {
	width: 220px;
	float: right:
	margin-right: 20px;
}

.subscribe-to-comments {
	clear: both;
	margin-left: 240px;
}	
	.subscribe-to-comments input {
		margin-top: 9px;
	}
	.subscribe-to-comments label {
		color: #666;
		background-color: transparent;
		padding: 0 0 0 2px;
	}

#comment-form input, #comment-form textarea {
	border: 1px solid rgba(255,255,255,.04);
	padding: 10px;
	font-family: "Klavika", "klavika-web-1","klavika-web-2";
	color: #eee;
}
	#comment-form input:focus, #comment-form textarea:focus {
		border: 1px solid rgba(255,255,255,.1);
		background-color: rgba(255,255,255,.01);
	}

#comment-form input {
	width: 198px;
	margin-bottom: 10px;
}

#comment-form input[type=submit] {
	width: 220px;
	cursor: pointer;
}
	#comment-form input[type=submit]:hover {
		background-color: rgba(0,0,0,.1);
	}

#comment-form textarea {
	font-size: 17px; line-height: 1.4;
	min-height: 240px;
}




/* RESUME */

.resume .content .column { float: left; }

.resume .content .column:first-of-type { width: 560px; margin-right: 60px; }

.resume .content .column:last-of-type { width: 300px; }



.resume .content h2 {
	font-size: 32px; line-height: .5;
	margin: 60px 0 20px;
	font-weight: 700;
}

.resume .content dt {
	font-size: 18px;
	margin-top: 26px;
}

.resume .content dd {
	font-size: 15px;
	margin-top: 4px;
}

.resume .content a {
	text-decoration: underline;
}
	.resume .content a:hover { opacity: .5 }

.resume .content time {
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 400;
	color: rgba(0,0,0,.5);
	-webkit-font-smoothing: antialiased;
}
	
.resume .content small {
	display: block;
	font-size: .9em;
	line-height: 1.1;
	margin-top: 20px;
}

.resume .content {
	padding-bottom: 50px;
}













/* Hashgrid */
#grid{
    /* Dimensions - same width as your grid with gutters */
    width: 960px;
    /* Grid (centered) */
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -480px;
}

/**
 * Vertical grid lines
 *
 * Set the column width taking the borders into consideration,
 * and use margins to set column gutters.
 */
#grid div.vert{
    width: 39px;
    border: solid rgba(255,0,0,.25);
    border-width: 0 1px;
    margin-right: 19px;
}

#grid div.vert.first-line{
    margin-left: 9px;
}

#grid div.vert:last-of-type { margin-right: 0 }

/**
 * Horizontal grid lines, defined by your base line height
 *
 * Remember, the CSS properties that define the box model:
 * visible height = height + borders + margins + padding
 */
#grid div.horiz{
    /* 20px line height */
    height: 19px;
    border-bottom: 1px dotted rgba(0,0,0,.1);
    margin: 0;
    padding: 0;
}






/* Media Queries */
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}

/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}

/* Print */
@media print {
  p a:after { content: " (" attr(href) ")"; } 
  p abbr:after { content: " (" attr(title) ")"; }
}