/*	'Ernest' v1.0, by Scott Mills (http://cscottmills.com)
	
	Licensed under a Creative Commons Attribution-ShareAlike 3.0
	Unported License: http://creativecommons.org/licenses/by-sa/3.0/

/*	Fonts
	
	Set in 'Oswald' by Vernon Adams,
	'Universalis Bold' by Arkandis Digital Foundry &
	'Sorts Mill Goudy' by Barry Schwartz
---------------------------------------------------------------------------------*/
@import url("http://static.tumblr.com/qzsjheu/hndlk878m/fonts.css");

/*	Reset
---------------------------------------------------------------------------------*/
* {
	margin:0;
	padding:0;
	border:0;
	font:inherit;
	font-size:100%;
	text-align:left;
	vertical-align:baseline;
	background-color:transparent;
}

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

ul, ol {
	list-style-type:none;
}

/*	General
---------------------------------------------------------------------------------*/
body {
	background:url('http://static.tumblr.com/qzsjheu/unWlk7x1y/ernest-background.png') fixed repeat right top;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

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

::selection {
	background:#fb9a43;
}

/*	Layout
---------------------------------------------------------------------------------*/
#page {
	background-color:#fafafa;
	width:976px; /* (576 + 400) */
	margin:0 auto;
	padding:0 0 58.248px;
}

header {
	width:650px;
	margin:0 auto;
	padding:29.124px 0 123.364px 10px;
}

#line {
	width:199.603px;
	height:29.124px;
	background:transparent url('http://static.tumblr.com/qzsjheu/mVflk7xi1/ernest-line.png') repeat-x center center;
	margin:29.124px auto 0;
	opacity:.5;
}

#page > div {
	width:100%;
	position:relative;
}

#page > div + div {
	margin:87.372px auto 0; /* 29.124 x 3 */
}

#page article,
#perma {
	width:576px; /* 32em @ 18px */
	margin:0 auto;
}

#perma {
	padding:58.246px 0 87.372px;
}

section.notes,
section.tags {
	width:50%;
	float:right;
}

article > aside {
	float:right;
	padding:14.562px 0 0;
	opacity:.5;
}

footer#pagefooter {
	background-color:#fafafa;
	width:976px; /* (576 + 400) */
	margin:0 auto;
}

#pagefooter div {
	background-color:#878792;
	width:956px;
	padding:0 10px;
	margin:0 auto;
	opacity:.5;
	-moz-transition:all 0.2s ease 0s;
	-webkit-transition:all 0.2s ease 0s;
	transition:all 0.2s ease 0s;
}

#pagefooter div:hover {
	opacity:1;
}

footer#pagefooter section {
	width:50%;
	float:left;
	padding:6px 0;
}

#pagefooter form {
	float:right;
	padding:6px 0;
}

#pagefooter button {
	height:14.562px;
}

#pagefooter input {
	width:87.372px;
	height:12.562px;
	border-bottom:1px dotted #fafafa;
	outline:none;
}

footer#attribution {
	width:220.022px;
	padding:29.124px 0;
	margin:0 auto;
	background:transparent url('http://static.tumblr.com/qzsjheu/mVflk7xi1/ernest-line.png') repeat-x 0 center;
	opacity:.4;
}

/*	Navigation
---------------------------------------------------------------------------------*/
body > nav {
	width:100%;
	background-color:#3a3a4c;
	padding:4px 0 6px;
}

body > nav > div {
	width:956px;
	margin:0 auto;
	position:relative;
	z-index:1500;
}

body > nav > div > div {
	display:inline;
	padding:0 58.248px 0 0;
}

#page > nav {
	width:576px;
	margin:29.124px auto 0;
}

#page > nav > div {
	font:18px/1.618 "SortsMillGoudy";
	text-align:center;
	float:right;
}

#page > nav #back {
	margin:0 9px 0 0;
	float:left;
}

#page > nav #forward {
	margin:0 0 0 9px;
	float:right;
}

#page > div article > nav {
	width:90px;
	height:37px;
	position:absolute;
	top:-4px;
	left:-10px;
	background:url('http://static.tumblr.com/qzsjheu/xollk7x5i/ernest-ribbon.png') no-repeat right top;
	padding:0 0 0 10px;
	z-index:1;
}

#page > div article > nav > div {
	position:relative;
	top:6px;
	left:9px;
}

/*	Links
---------------------------------------------------------------------------------*/
article p a:link, a:visited,
figure > a:link, figure > a:visited,
article.link a:link, article.link a:visited,
article > aside > a:link, article > aside > a:visited,
#page article figcaption a:link, #page article figcaption a:visited,
#attribution p a:link, #attribution p a:visited,
article.text > a:link, article.text > a:visited,
article.chat > a:link, article.chat > a:visited,
section.notes ol a:link, section.notes ol a:visited,
section.tags a:link, section.tags a:visited,
header a:link, header a:visited {
/*	color:#222222;*/
	text-decoration:none;
}

article p a:link, a:visited,
#page article figcaption a:link, #page article figcaption a:visited,
section.notes ol a:link, section.notes ol a:visited {
	border-bottom:1px dotted #8e8e8e;
}

article p a:hover,
article > aside > a:hover,
#page article figcaption a:hover,
#attribution p a:hover,
section.notes ol a:hover {
/*	color:#222222;*/
	text-decoration:none;
/*	border-bottom:1px dotted #222222;*/
}

figure > a:hover,
article.text > a:hover,
article.chat > a:hover {
/*	color:#222222;*/
	text-decoration:none;
	border-bottom:none;
}

#page > nav a:link,
#page > nav a:visited {
	font-family:arial,sans-serif;
/*	color:#222222;*/
	border-bottom:none;
	text-decoration:none;
	-moz-transition:all 0.2s ease 0s;
	-webkit-transition:all 0.2s ease 0s;
	transition:all 0.2s ease 0s;
	opacity:.5;
}

#page > nav a:hover {
	opacity:1;
}

#page article > nav a:link,
#page article > nav a:visited,
body > nav a:link, body > nav a:visited {
	text-decoration:none;
	color:#fafafa;
}

#page article > nav a:hover,
body > nav a:hover,
#pagefooter button:hover {
	border-bottom:1px dotted #fafafa;	
}

section.tags a:link, section.tags a:visited {
	background-color:#c0c0c5;
	padding:0 3px;
	margin:0 0 6px 6px;
	float:right;
	opacity:.5;
	-moz-transition:all 0.2s ease 0s;
	-webkit-transition:all 0.2s ease 0s;
	transition:all 0.2s ease 0s;
}

section.tags a:hover {
	opacity:1;
}

/*	Text
---------------------------------------------------------------------------------*/
header h1 {
	font:47.123px/51.123px "Oswald";
	letter-spacing:.05em;
/*	color:#222222;*/
	text-transform:uppercase;
	text-align:center;
}

header h2 {
	font:18px/22px "SortsMillGoudy";
	letter-spacing:.03em;
/*	color:#222222;*/
	text-align:center;
	padding:18px 0 0;
}

header h2 #description {
	opacity:.6;
}

#page article h2 {
	font:29.124px/1 "SortsMillGoudy";
	text-transform:uppercase;
	text-align:center;
	width:436.86px;
	margin:0 auto;
}

#page article.text h2 {
	margin:0 auto 58.248px;
}

.tag, .search_query {
	font-style:italic;
}

#page article,
section.notes > p {
	font:18px/1.618 "SortsMillGoudy";
/*	color:#222222;*/
}

article.quote > p,
article.link > p {
	width:436.86px;
	text-align:center;
	margin:29.124px auto 0;
}

article.answer .question {
	text-align:right;
}

article.answer > .question + p.answer,
article.chat dialog {
	margin:29.124px 0 0;
}

dd, dt {
	display:inline;
}

#page article.text p {
	text-align:justify;
}

#page article.text p + p {
	text-indent:1em;
}

#page article.text > a + p:first-line {
	font-family:"SortsMillGoudy-sc";
	letter-spacing:.07em;
}

em {
	font-style:italic;
}

#page article p strong,
#attribution strong {
	font-family:"SortsMillGoudy-sc";
	text-transform:lowercase;
}

.dropcap {
	font-size:58.248px;
	line-height:58.248px;
	float:left;
	margin:2px 0 -4px;
	padding:0 6px 0 0;
}

#page article figcaption,
#page article figcaption p,
#page article > nav, body > nav > div a,
article > aside > a, section.notes ol,
section.tags a, #pagefooter section,
#pagefooter input, #pagefooter button {
	font:9px/14.562px "UniversalisBold";
	text-transform:uppercase;
	letter-spacing:.3em;
	margin:0 auto;
}

article.photo figcaption,
article.video figcaption,
article.photo figcaption p,
article.video figcaption p {
	text-align:center;
	width:100%;
}

article.audio figcaption {
	padding:0 0 29.124px;
}

#pagefooter p,
#pagefooter input, #pagefooter button {
	color:#fafafa;
}

footer#attribution p {
	font:18px/1.618 "SortsMillGoudy";
	width:81.81%;
	margin: auto;
	text-align:center;
	text-transform:lowercase;
	background:url('http://static.tumblr.com/qzsjheu/unWlk7x1y/ernest-background.png') fixed repeat right top;
}

/*	Media
---------------------------------------------------------------------------------*/
article.photo figure img {
	width:100%;
}

article.video figure {
	width:500px;
	margin:0 auto;
}

article.photo figure img,
article.audio figure a > img {
	padding:2px;
	background-color:#fff;
	border:1px solid #cecece;
	-moz-transition:all 0.2s ease 0s;
	-webkit-transition:all 0.2s ease 0s;
	transition:all 0.2s ease 0s;
	position:relative;
	z-index:0;
}

article.photo figure img:hover,
article.audio figure a > img:hover {
	opacity:.9;
}

article.audio .player,
article.video .player {
	overflow:hidden;
}

article.audio .player,
article.audio figure a > img {
	width:34.89583%; /* 201px */
	float:left;
	clear:both;
	padding:2px;
	margin:0 29.124px 0 0;
}

section.notes img {
	display:none;
}

#pagefooter img#portrait {
	width:48px;
	border-radius:24px;
	margin:10px 10px 10px 0;
	float:left;
}

/*	Media queries
---------------------------------------------------------------------------------*/
@media screen and (min-width:750px) and (max-width:1040px) {
	#page,
	footer#pagefooter {
		width:95%;
		margin:0 2.5%;
	}
	
	body > nav > div {
		width:93%;
	}
	
	#pagefooter div {
		width:98%;
		padding:0 1%;
		opacity:1;
	}
	
	section.tags a:link, section.tags a:visited {
		opacity:1;
	}
}

@media screen and (max-width:750px) {
	#page,
	footer#pagefooter {
		width:100%;
		margin:0;
	}
	
	body > nav > div {
		width:95%;
	}
	
	body > nav > div > div {
		padding:0 6.09288% 0 0;
	}
	
	header {
		width:90%;
	}
	
	#page article,
	#perma {
		width:95%;
	}
	
	section.tags a:link, section.tags a:visited {
		opacity:1;
	}
	
	#page article h2,
	article.quote > p,
	article.link > p {
		width:65%;
	}
	
	#page > nav {
		width:95%;
	}
	
	article.video figure {
		width:100%;
	}
	
	#pagefooter div {
		width:95%;
		padding:0 2.5%;
		opacity:1;
	}
}

@media screen and (max-width:480px) {
	#page > div article > nav {
		top:-47px;
	}
	
	body > nav {
		padding:26.562px 0 6px;
	}
	
	section.notes,
	section.tags {
		width:100%;
		float:left;
		clear:both;
	}
	
	section.tags a:link, section.tags a:visited {
		float:left;
		opacity:1;
		margin:0 6px 6px 0;
	}
}