/*	Author:		ETHAN MARCOTTE (http://ethanmarcotte.com/)
	Version:	100831
	Copyright:	(c) 2010 Ethan Marcotte. All rights reserved.
*/
/* html5doctor.com/html-5-reset-stylesheet/ */
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; } 
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:'';content:none; }
ins { text-decoration:none; }
del { text-decoration:line-through; }
table { border-collapse:collapse;border-spacing:0; }
article,aside,figure,footer,header,hgroup,nav,section { display:block; }

/*-
	SELF-CLEARING FLOATS
*/
.section:after,
.nav:after,
p.pic:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/*-
	BASE STYLES
*/

body {
	background: #EFEFEE;
	color: #484640;
	font: normal 100%/1.28571429 Georgia, serif;
	-moz-transition: font-size 0.2s linear;
	-o-transition: font-size 0.2s linear;
	-ms-transition: font-size 0.2s linear;
	-webkit-transition: font-size 0.2s linear;
	transition: font-size 0.2s linear;
}
select,
input,
textarea {
	font: normal 100% Georgia, serif;
}
a {
	color: #2A70B8;
	text-decoration: none;
	-moz-transition: color 0.2s linear;
	-o-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	-webkit-transition: color 0.2s linear;
	transition: color 0.2s linear;
}
a:hover,
a:focus {
	color: #249FC3;
}
a.contact {
	font-weight: bold;
}
abbr[title],
dfn[title] {
	cursor:help;
}
abbr[title="and"] {
	font-family: Cochin, "Hoefler Text", Baskerville, Palatino, Georgia, serif;
}
p {
	margin-bottom: 1em;
	line-height: 1.53846154;
}
img {
	max-width: 100%;
}
strong {
	white-space: nowrap;
}
input.text,
input[type=text]
textarea {
	border: 1px solid #7C7C7C;
	border-color: #7C7C7C #7C7C7C #C3C3C3 #C3C3C3;
}
.newp {
	display: none;
}

.page {
	margin: 0 auto;
	max-width: 700px;
	width: 93%;
}
.nav {
	margin-bottom: 2em;
}
hr,
#about:before {
	width: 100%;	/* (591/835) + (120/835) */
}
.section {
	font-size: 0.8125em;	/* 13/16 */
	position: relative;
	padding: 2em 0;
}
h1 {
	clear: both;
	color: #969285;
	font: normal 3.3125em/0.75 Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;	/* 53/16 */
	font-style: italic;
	letter-spacing: -0.05em;	/* -50 * (1/1000) */
	margin: 0 0 1em 14.6107784%;	/* 122/835 */
	text-align: right;
	text-transform: uppercase;
	width: 5.56603774em;	/* 295/53 */
}
h1 i {
	color: #484640;
	display: block;
}
hr,
#about:before {
	background: url("../../img/div.gif") repeat-x -50% 0;
	height: 4px;
	position: absolute;
}
hr {
	border: none;
	top: 0;
	margin: 0;
	clear: both;
}
#about hr {
	display: none;
}
.nav li {
	float: left;
	font-size: 0.923076923em;	/* 12/13 */
	font-style: italic;
	text-transform: lowercase;
	margin-right: 1.84466019%;	/* 19/103 */
	width: 23.4624146%;	/* 103/439 */
}
li.contact {
	margin-right: 0;
}
.nav a {
	color: #484640;
	display: block;
	font-weight: normal;
	text-decoration: none;
	padding: 2em 0;
}
.nav a:hover {
	color: #999;
}
#about li.about a,
#work li.work a,
#writing li.writing a,
#contact li.contact a {
	color: #484640;
	text-transform: uppercase;
	opacity: 0.3;
}

/*-
	ABOUT
*/

#about {
	position: relative;
}
#about h1 {
	clear: both;
	margin: 20px 0;
	width: 100%;
}
#about img {
	display: block;
}
#about em {
	position: absolute;
	left: -1000em;
}
#about h2 {
	font-size: 2.30769231em;	/* 30/13 */
	font-style: italic;
	font-weight: normal;
	line-height: 1;
	margin-bottom: 0.2em;
}
#about:before {
	content: " ";
	top: 0;
	width: 41.5568862%;	/* 347/835 */
}

/*-
	PORTFOLIO
*/

p.pic {
	border-bottom: 1px solid #f6f6f6;
	position: relative;
}
p.pic i {
	display: block;
	overflow: hidden;
}
p.pic img {
	display: block;
	margin: 0 auto;
	max-width: none;
}
.portfolio {
	font-size: 11px;
}
.portfolio li {
	clear: both;
	position: relative;
	margin-bottom: 6em;
}
.portfolio h2,
.portfolio h3 {
	font: bold 1em Helvetica, Arial, sans-serif;
	text-transform: uppercase;
}
.portfolio h2 {
	background: #070908;
	background: rgba(0, 0, 0, 0.74);
	color: #DEDEDE;
	float: left;
	position: absolute;
	top: -1.5em;
	margin-left: 1.5em;
	right: 1.5em;
	padding: 1em;
	z-index: 50;
}
.portfolio h2 a {
	color: #FFF;
}
.portfolio h2 a:hover,
.portfolio h2 a:focus {
	color: #249FC3;
}
.portfolio h2 a:after {
	content: "\00a0\00bb";
}
.portfolio div {
	text-align: right;
	margin-right: 1.5em;
}
.portfolio h3,
.portfolio div p {
	display: inline;
}

/*-
	WRITING
*/

ol.books,
.articles ol {
	font-style: italic;
	font-size: 0.923076923em;	/* 12/13 */
	line-height: 1.25;			/* 15/12 */
}
ol.books {
	margin-bottom: 3em;
}
ol.books img {
	border-bottom: 1px solid #F5F5F5;
	display: block;
	margin-bottom: 0.5em;
	max-width: none;
	position: relative;
}
#writing a {
	color: #444;
}
#writing a:hover {
	color: #249FC3;
}
ol.books h2,
#writing cite,
.articles h3 {
	font: bold 1em/1.4 Helvetica, Arial, sans-serif;
	font-style: normal;
	text-transform: uppercase;
}
ol.books h3 {
	font-style: italic;
	font-weight: normal;
}
.articles h2 {
	font: normal 30px/0.75 Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;	/* 53/16 */
	font-style: italic;
	text-transform: uppercase;
}

/*
	CONTACT
*/
fieldset {
	background: url("../../img/hatch.png");
	font-size: 1.2em;
	font-style: normal;
	padding: 2em;
	margin-bottom: 1em;
}
input,
select,
textarea {
	font: normal 0.95em Helvetica, Arial, sans-serif;
}
input,
textarea {
	background: #e7e6e6;
	border: 1px solid #E2E2E0;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
	-ms-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
	-o-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
input:focus,
textarea:focus {
	background: #FFF;
	color: #444;
	-moz-box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.2);
	-ms-box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.2);
	-o-box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.2);
}
input {
	padding: 0.25em;
}
textarea {
	padding: 0.45em;
	width: 96%;
}
input[type="submit"] {
	background: #9A9A9A;
	color: #EEE;
	border: none;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
	padding: 0.5em;
}
input[type="submit"]:focus,
input[type="submit"]:hover {
	background: #555;
}

/*
	FOOTER
*/

.footer {
	color: rgba(0, 0, 0, 0.4);
	padding: 2em 0 2em 14.6107784%;	/* 122/835 */
	text-align: right;
}
.footer p {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding: 1em 0;
}

/*-
	RESPONSIVENESS
*/
/* Small screen! */
@media screen and (max-device-width: 480px),
screen and (max-width: 600px) {
	/* iOS and Windows Mobile font-size changes make the robot cry and SMASH */
	html {
		-ms-text-size-adjust: none;
		-webkit-text-size-adjust: none;
	}
	hr {
		bottom: 0;
	}
	h1,
	.articles h2 {
		float: none;
		margin: 0 0 1em;
		text-align: left;
		width: auto;
	}
	h1 i {
		display: inline;
	}
	p.pic i {
		height: 120px;
	}
	p.pic img {
		margin-top: -50px;
	}
}
/* Still small! (but scaling up) */
@media screen and (min-width: 600px) {
	.page {
		margin: 0 auto;
		max-width: none;
		width: 88%;
	}
	.nav {
		width: 70.7784431%;	/* 591/835 */
		margin-bottom: 2em;
	}
	hr {
		bottom: 0;
		width: 85.1497006%;		/* (591/835) + (120/835) */
		left: -14.3712575%;
	}
	ol.books {
		float: right;
		width: 100%;
	}
	ol.books li {
		float: left;
		margin-right: 2.66479663%;	/* 19/713 */
		width: 31.5568022%;			/* 225/713 */
	}
	ol.books li.hcss {
		float: right;
		margin-right: 0;
	}
	ol.books h3,
	ol.books p {
		display: inline;
	}
	ol.books img {
		width: 45.7777778%;		/* 103/225 */
	}
	.articles {
		clear: both;
	}
	.articles h2 {
		float: left;
		text-align: right;
		width: 56.1676647%;		/* 469/835 */
	}
	.articles ol {
		float: right;
		margin-top: 0.9em;
		width: 41.5568862%;		/* 347/835 */
	}
}
/* Desktop! */
@media screen and (min-width: 860px) {
	body {
		background: url("../../img/loverly.png") no-repeat, url("../../img/noisy.gif") -50% -10%, #EFEFEE;
	}
	.page {
		margin: 0;
		width: 85%;
	}
	hr {
		left: auto;
		right: -17.6640719%;	/* 150/835 */
		width: 74.1317365%;		/* (469/835) + (150/835) */
	}
	.nav,
	h1 {
		margin-bottom: 50px;
	}
	.nav,
	.intro,
	form {
		margin-left: 43.8323353%;
	}
	.nav {
		margin-bottom: 3em;
	}
	.section {
		padding: 4em 0;
	}
	#about {
		background: url("../../img/logo-full.png") no-repeat 0 94px;
		padding-top: 94px;
	}
	#about .nav {
		margin-top: 70px;
		margin-bottom: 0;
	}
	#about h1 i {
		white-space: nowrap;
	}
	#about h2 {
		padding-left: 1em;
		text-indent: -1em;
	}
	#about h1 {
		margin: 0;
		height: 175px;
	}
	#about h1 img {
		visibility: hidden;
	}
	ol.books {
		width: 85.3892216%;			/* 713/835 */
	}
	p.pic:before {
		background: url("../../img/work-edge.png") no-repeat;
		content: " ";
		height: 62px;
		position: absolute;
		bottom: -1px;
		right: -17.6640719%;	/* 150/835 */
		width: 17.6640719%;
		z-index: 20;
	}
}
/* IT'S OVER 9000 */
@media screen and (min-width: 1200px) {
	.intro,
	form {
		width: 41.5568862%;	/* 347/835 */
	}
	p.pic {
		background: url("../../img/hatch.png");
	}
	p.pic i {
		float: right;
		width: 85.3892216%;
		max-width: 1024px;
	}
	.portfolio h2 {
		left: 14.6107784%;	/* 122/835 */
		right: auto;
	}
	ol.books h2,
	ol.books h3 {
		display: block;
	}
	ol.books img {
		float: left;
		margin-right: 8.44444444%;	/* 19/225 */
	}
	.footer {
		padding: 2em 14.6107784%;	/* 122/835 */
	}
}