/* Let's default this puppy out
--------------------------------------------------------------*/

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, 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;
}									

/* always force a scrollbar in non-IE */
html {overflow-y: scroll;}

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

h1, h2, h3, h4, h5, h6 {font-weight: normal;}

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;}

ins {background-color: #ccc; color: #000; text-decoration: none;}

mark {background-color: #ccc; color: #000; font-style: italic; font-weight: bold;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em auto; padding: 0;}

input, select {vertical-align: middle;}

pre {
	padding: 15px;
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}
 
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 85%;}

strong, th, b {font-weight: bold;}

td, td img {vertical-align: top;} 

sub {vertical-align: sub; font-size: smaller;}
sup {vertical-align: super; font-size: smaller;}

/* hand cursor on clickable input elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

.clickable:active {position: relative; top: 1px;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* bicubic resizing for non-native sized IMG: */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* for image replacement */
.ir {display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat;}

/* Hide for both screenreaders and browsers */
.hidden {display: none; visibility: hidden;} 

/* Hide only visually, but have it available for screenreaders */
.visuallyhidden {position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px);}

/* Hide visually and from screenreaders, but maintain layout */
.invisible {visibility: hidden;}


/* Ok, let's go!
--------------------------------------------------------------*/

/*-  BASE STYLES
----------------------------------------------------------------------*/

/*- self-clearing floats ----------*/

article.blog-post:after,
.mod:after,
ul#mainNav:after,
article.excerpt:after,
hr:after,
div.commentHolder div#idc-container h3:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.ie article.blog-post,
.ie .mod,
.ie ul#mainNav,
.ie article.excerpt,
.ie div.commentHolder div#idc-container h3 {zoom: 1;}

/*- fluid images and objects ----------*/

img,
object,
embed {max-width: 100%;}

/*- optional vanity styles ----------*/

::selection {background: #fac3c3;}
::-moz-selection {background: #fac3c3;}

img::selection {background: transparent;}
img::-moz-selection {background: transparent;}

@media only screen and (max-device-width: 480px) {

	html {-webkit-text-size-adjust: none}
	a {-webkit-tap-highlight-color: rgba(200,0,0,0.4);}

}


/*- LET'S GET STARTED!
----------------------------------------------------------------------*/

html {
	height: 100%;
	padding: 0 0 12px;
}

body {
	height: 100%;
	background: #474747;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.15, #2E2E2E), color-stop(0.58, #474747));
	background-attachment: fixed;
	color: #000;
	font: normal 14px/22px BentonModernRE, georgia, serif;
	margin: 0;
	padding: 0 0 12px;
}

abbr {
	cursor: help;
}

input.text,
input[type=text],
input[type=search],
input[type=email],
textarea {
	border: 1px solid #7C7C7C;
	border-color: #7C7C7C #7C7C7C #C3C3C3 #C3C3C3;
}

a {text-decoration: none; color: #d71e1e; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in;}
a:hover {color: #ff2929; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.3s ease-in;}
a:active {position: relative; top: 1px; -webkit-transition: none; -moz-transition: none;}

div#mainContainer {position: relative; width: 988px; min-height: 100%; margin: 0 auto 12px; padding-bottom: 40px; background: #fff;}

header {position: fixed; top: 0; width: 940px; margin: 0 auto; padding: 11px 24px 0; background: #fff;}

nav#mainNav {height: 32px; border-bottom: 1px solid #000;}

	nav#mainNav ul {height: 30px; margin-bottom: 12px; background: #000; text-align: center; line-height: 30px;}
		
		nav#mainNav ul li {display: inline; color: #ccc;}
		
			nav#mainNav ul li a {padding: 0 30px; color: #eee; font-size: 12px; text-transform: uppercase; text-decoration: none; letter-spacing: .1em;}
			nav#mainNav ul li a:hover {color: #fff;}
			
			nav#mainNav ul li:before {content: "|"; color: #777; font-size: 13px;}
			
			nav#mainNav ul li:first-child:before {content: "";}

			nav#mainNav ul li form {display: inline; padding: 0 0 0 15px; font-size: 12px;}
			nav#mainNav ul li form input[type="search"] {width: 160px;}

			.ie nav#mainNav ul li form input[type=submit] {font-size: 12px; height: 20px line-height: 12px;}

h1 {position: fixed; top: 44px; width: 186px; z-index: 10000; height: 171px; margin: 0 auto; margin-left: 24px; padding: 26px 13px 5px 0; background: #fff;}
	h1 a {display: block; margin-bottom: 8px;}
		h1 a img {display: block; margin: 0 auto;}
		h1 span {color: #808285; font-family: "MillerDisplay Light Italic"; font-style: italic; font-weight: normal; font-size: 34px; line-height: 36px;}

.ie6 h1,
.ie7 h1 {margin-left: -216px;}

section {margin: 0 236px 0 232px; padding: 72px 0 20px;}

div.prevNext {text-transform: uppercase; letter-spacing: .2em; font-size: 11px;}
	div.prevNext a {text-transform: none; letter-spacing: 0; font-size: 16px;}

aside#promo1 {position: absolute; top: 259px; width: 187px; margin: 0 auto; margin-left: 24px; padding: 0; font-family: verdana; font-size: 12px; line-height: 18px; color: #808285;}

	aside.recent-work img {display: block; max-width: 184px; margin-bottom: 5px; -webkit-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.7); -moz-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.7); -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in;}
	aside.recent-work a:hover img {border-color: #aaa; -webkit-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.9); -moz-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.9); -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in;}
	
aside#promo2 {position: absolute; top: 72px; width: 186px; margin: 0 auto 0 766px; padding: 0;}

	aside#promo2 h2 {margin-bottom: 8px; font-family: Falstaff; font-size: 28px; line-height: 30px;}

	aside#promo2 li {margin-bottom: 3px; font-size: 20px; line-height: 24px;}
	aside#promo2 li b {font-family: Falstaff; color: #000;}

p.videoPromo {position: relative; margin-top: 10px; color: #808285; font-family: verdana; font-size: 12px;}
	
	p.videoPromo a.video {display: block; height: 144px; margin-bottom: 5px; background-repeat: none; background-position: 50% 50%;
		border-radius: 13px;
		-webkit-border-radius: 13px;
		-moz-border-radius: 13px;}
	
	p.videoPromo g.frame {display: none;}

	.ie p.videoPromo img.frame {display: block;}
	.ie p.videoPromo a span.button {background-image: url(../../img/video_button_IE.gif); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";}

	.ie6 p.videoPromo img.frame,
	.ie7 p.videoPromo img.frame {display: none;}
	.ie6 p.videoPromo span.button,
	.ie7 p.videoPromo span.button {cursor: hand;}
	
	p.videoPromo span.button {position: absolute; top: 10px; left: 10px; display: block; width: 40px; height: 40px; background: url(../img/video_button-trans.png); opacity: .5; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in;}
		p.videoPromo a:hover span.button {opacity: 1; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in;}

	.ie p.videoPromo a:hover span.button {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";}
		
article {padding: 2px 0 24px; border-top: 12px solid #000;}
	article.archive {margin-bottom: 30px; border-top: 0; padding: 0;}

	article:first-child {padding-top: 0; border-top: 0;}
	
	article a:hover {text-decoration: underline;}

	article a.keepReading {display: inline-block; margin-top: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .2em;}
	
	article h2 {margin-bottom: 5px; padding-top: 12px; font-size: 44px; font-family: "MillerDisplay Roman"; line-height: 48px; border-top: 1px solid #000;}
		article.archive h2 {padding-top: 0; border-top: 0;}

		article:first-child h2 {padding-top: 0; border-top: 0;}

		article h2 a,
		article h2 a:hover {color: #000;}

	article h3 {margin-top: 20px; margin-bottom: 9px; font-family: "MillerDisplay Roman"; font-size: 26px; line-height: 26px;}

	article ul {list-style: disc; margin-left: 24px;}
		article.blog-post ul {margin: 15px 0 15px 46px;}

	article figure {margin: 10px 0;}
		article figure img {display: block; margin: 0 auto;}
		article figure figcaption {display: block; padding: 5px; background: #eee; text-align: center; font-size: 12px; font-style: italic;}
		article figure p {display: inline; height: 0; margin: 0; padding: 0; text-indent: 0;}
		article figure.small {float: right; max-width: 50%; margin: 10px 0 10px 10px; border-top: 1px solid #000; border-bottom: 1px solid #000;}
	
	article div.postMeta {margin-bottom: 10px; color: #808285; text-indent: 0; font-family: verdana; font-size: 12px;}
		article div.postMeta a {color: #808285; text-decoration: underline;}
		article div.postMeta a:hover {color: #000;}
	
	article p {text-indent: 25px;}

	blockquote {margin: 6px 0 24px; padding: 18px 54px 0 24px; background: url(../img/quote.png) no-repeat;}
		blockquote p {margin: 0; text-indent: 0;}
	
	article div.postMeta + p,
	article div.postHolder p:first-child {text-indent: 0;}
	
	article div.postHolder p:first-child:first-letter,
	article div.postMeta + p:first-letter {display: block; float: left; padding-right: 5px; padding-left: 7px; color: #ee3224; font-family: "MillerDisplay Light"; font-size: 200px; line-height: 154px; text-indent: 0;}

		article div.postHolder blockquote p:first-child:first-letter {display: static; float: none; padding-right: 0; color: #000; font-family: georgia; font-size: 16px; line-height: 22px;}

	div.postHolder p:last-child:after {content: url(../img/endcap.gif); margin-left: 4px;}
		div.postHolder blockquote p:last-child:after,
		div.postHolder figure p:last-child:after {content: "";}

	div.commentHolder {margin: 25px 0 0 0;}

		div.commentHolder div.idc-foot {display: none ! important;}
		div.commentHolder div#idc-container {margin: 0;}
		div.commentHolder div#idc-container div#idc-cover {margin-top: -8px ! important;}
		div.commentHolder div#idc-container .idc-c .idc-c-h {padding: 1px 2px 2px; background: #eee none; border-radius: 4px;}
		div.commentHolder div#idc-container h3 {margin-bottom: 0; padding-bottom: 2px; font-size: 14px; font-family: georgia; text-transform: uppercase; text-align: center; border-bottom: 1px solid #000;}
		div.commentHolder div#idc-container h3 span {letter-spacing: .2em ! important;}
		div.commentHolder div#idc-container span#idc-commentcount_wrap {display: none;}
		div.commentHolder div#idc-container .idc-c .idc-c-h {padding: 4px 4px 5px; border-radius: 0 ! important;}
		div.commentHolder div#idc-container .idc-c .idc-c-b {width: 97%;}
		div.commentHolder div#idc-container textarea {margin-top: 6px; border: 1px solid #999; border-radius: 0; background-image: none;}
		div.commentHolder div#idc-container input {border: 1px solid #999; border-radius: 0; background-image: none;}
		div.commentHolder div#idc-container div#IDCommentsNewThreadCover {padding-top: 12px;}
		div.commentHolder div#idc-container div#IDCommentsNoCommentsDiv {text-align: center; border-radius: 0; margin: 3px 0 0; padding: 6px 0; width: 100%;}

footer {position: absolute; bottom: 0; width: 940px; height: 35px; margin: 0 24px; font-size: 14px; line-height: 35px; text-align: center; border-top: 1px solid #000;}


	@media only screen and (max-width: 1000px) {
		header, h1 {position: absolute;}
	}