/*   
Theme Name: Finch v5
Theme URI: http://html5reset.org
Description: Created from The HTML5 Reset Theme from Monkey Do! (http://monkeydo.biz)
Author: Francisco Inchauste 
Author URI: http://getfinch.com
Version: 5
*/

/*
CREDITS
----------------------------------------------------------
Eric Meyer: http://ericmeyer.com
HTML5 Doctor: http://html5doctor.com
and the HTML5 Boilerplate: http://html5boilerplate.com
Chris Coyier & Jeff Starr: http://digwp.com
----------------------------------------------------------*/

/* RESET
-------------------------------------------------------------------------------*/

html, body, 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, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}									

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

/* Responsive images and other embedded objects
Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers. 
There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue. */
img,
object,
embed {max-width: 100%;
	margin: 1em 0 0 0}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
don't forget to restore the bullets within content. */
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;}

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;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

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

input, select {vertical-align: middle;}

pre {
	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 {font-weight: 700;}

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

/* Make sure sup and sub don't screw with your line-heights
gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

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

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}

/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  



/* BASE Styles
-------------------------------------------------------------------------------*/

address, blockquote, caption, cite, code, dl, figcaption, h1, h2, h3, h4, h5, h6, label, legend, ol, p, pre, ul, table {
	display: block;
	list-style: none outside none;
	text-rendering: optimizelegibility;
}

body {
	border-top: 5px solid #475054;
	background: url(_/images/subtle_texture.png) repeat scroll 0 0 transparent;
	color: #333;
	line-height: 1.5;
	font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", Georgia, 'Times New Roman', serif; font-weight: 400; font-style:normal;
}

.wrap {
	background: url(_/images/zigzag.png) repeat-x scroll 0 0 transparent;
	margin: 0 auto;
	width: 100%;
	overflow: hidden;
}

#main header {
	background: url(_/images/articles/bg_header.jpg) no-repeat scroll 0 0 #2E383A;
	width: 100%;
	background-position: center top !important;
	height: 480px;
	position: relative;
}

#main .header-inner {
	height: auto;
	margin: 0 auto;
	width: 90%;
	max-width: 1200px;
}

header {
	width: 100%;
	height: auto;
}

.header-inner {
	margin: 0 auto;
	padding-top: 1.5em;
	width: 90%;
	max-width: 1200px;
}


header:after, header-inner:after, nav:after, .wrap:after, section:after, article:after, .content:after, header p:after, #logo:after, #header .feature:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

.content {
	margin: 0 auto;
	padding: 2.2em 0 0 0;
	width: 90%;
	max-width: 1200px;
}

#About .content{
	padding-top: 3em;
}

section {
	float: left;
	width: 49.5%;
	padding: 0;
	margin: 0 2.5% 3.5em 0;
}

#main section {
	margin-top: 1em;
}

#content section {
	width: 82%;
	float: left;
}

#content div.content section article {
	padding-left: 22.25%;
	margin: 0;
}

aside {
	float: left;
	padding: 0;
	margin: .4em 2.5% 3.5em 0;
	width: 22.25%;
}

#main aside {
	margin-top: 1em;
}


#content aside {
	margin-top: 1em;
	padding: 0;
	position: absolute;
	left: 0em;
	width: 10em;
}

#content .archive aside{
	margin-top: .1em;
}

div.side{
	padding: 0;
	margin: 1.5em 0 3.5em 0;
	float: right;
	width: 22.25%;
}

#main div.side {
	margin-top: 1em;
}

#content div.side {
	padding: 0;
	margin: 4% 0 0 0;
	float: right;
	width: 9.5em;
}

#content div.post-ad{
	padding: 0;
	margin: 4em 0 0 0;
	float: right;
	width: 10em;
}

#content .archive div.side {
	margin: 0;
}

a {
	color: #3b98b2;
	text-decoration:none;
}

a:hover {
	-moz-transition: all 0.2s linear 0s;
}



/* HEADINGS
--------------------------------------------- */

h1, h2, h3, h4 {
	font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", Georgia, 'Times New Roman', serif; font-style:normal;
}

h1 { 
	font-size:2em; 
	padding: 0; 
	font-weight: 400;
	color: hsla(0,0%,10%,1);
	margin-bottom: .18em;
	line-height: 1.25;
}

#content article h1 {
	font-size: 2.5em;
}

h2 {
	color: #333;
	font-weight: 400;
	font-size:1.5em; 
	padding: 0;
	margin: 0;
	border: none;
}

#content article h2 {
	margin: 1em 0 0 0;
}

#About h2{
	line-height: 1em;
	margin-bottom: .5em;
}

h3 {
	font-family: "futura-pt-1", "futura-pt-2", Arial, Helvetica, sans-serif; font-weight: 400; font-style:normal;
	text-transform: uppercase;
	font-size: 1em;
	font-weight: 400;
	color: #999;
	padding: 0;
	margin-bottom: 1em;
	text-transform: uppercase;
}

article .archive h3 {
	color: #475054;
}

#main section h3{
	padding: 0;
	margin-bottom: .4em;
}

footer h3{
	font-weight: bold;
	line-height: 2em;
}

h4{
	color: #666666;
	font-size: 1em;
}

aside h4{
	font-weight: 400;
	margin: 2.1154em 0 0 0;
	padding: 0 0 .6154em 0;
}


/* BRANDING
--------------------------------------------- */

header #logo{
	float: left;
	padding: 0;
	margin: 1.6em auto 1em auto;
	display: block;
}

#logo a{
	background: url(_/images/finch_logo_db.png) no-repeat scroll left top transparent;
	display: block;
	height: 75px;
	width: 80px;
}

#main #logo a{
	background: url(_/images/finch_logo_db.png) no-repeat scroll left top transparent;
	display: block;
	height: 75px;
	width: 80px;
}

#logo a:hover{
	-moz-transition: all 0.4s linear 0s;
	opacity:0.8;
	filter:alpha(opacity=80); /* For IE8 and earlier */
}

div.dark #logo a{
	background: url(_/images/finch_logo_db.png) no-repeat scroll left top transparent;
}

div.light #logo a{
	background: url(_/images/finch_logo_db.png) no-repeat scroll left top transparent;
}

header #logo img {
	display:block;
	height: 0;
	margin: 0;
	width: auto;
}


/* FEATURE
--------------------------------------------- */

.feature{
	bottom: 7em;
	text-align: center;
	width: 100%;
	position: relative;
	margin: 0 auto;
	margin-top: 15em;
}

.feature h1 {
	display:none;
	text-align:-9999px;
	font-size: 1.5em;
	margin: 0;
	}
	
.feature img {
	display: block;
	margin-left: auto;
	margin-right: auto;
    width: 100%;
	max-width: 725px;
	border: medium none;
}

.feature p{
	font-size: 1em;
	color: #bbb;
	margin: -1em 0 1.2em 0 ;
	padding: 0 25%;
}

.feature a.more-link {
	width: auto;
	font-size: 1em;
	color: #DBDFE1;
	text-transform: uppercase;
	margin: 1.5em 0 0 0 ;
	display: block;
}

.feature a:hover{
	color: #3B98B2;
}

.feature em.meta{
	margin-top:1.2em;
}



/*NAV
--------------------------------------------- */

nav{
	padding: 3.2em 0 0 0;
	float: right;
}

nav ul{
	list-style: none outside none;
}


nav ul li{
	font-size: .8em;
	padding: 0 2.25em 0 0;
	display: inline;
	color: #666666;
	font-family: "futura-pt-1", "futura-pt-2", Arial, Helvetica, sans-serif; font-weight: 400; font-style:normal;
	text-transform: uppercase;
}

nav ul li a{
	color: #989898;
}

nav ul li.current_page_item a{
	color: #1A1A1A;
}

#main nav ul li a{
	color: #ccc;
}

#main nav ul li.current_page_item a{
	color: #eee;
}

div.dark nav ul li a{
	color: #666666;
}

div.light nav ul li a{
	color: white;
}

nav ul li:last-child{
	padding-right:0;
}

nav ul li a:hover {
	border-bottom: 1px solid #666666;
}

div.light nav ul li a:hover {
	border-bottom: 1px solid white;
}

div.dark nav ul li a:hover {
	border-bottom: 1px solid #4ca0b6;
}

nav a:hover {
	-moz-transition: all 0.2s linear 0s;
}


/* LINKS
--------------------------------------------- */


#main section a.more-link {
	font-size: .875em;
	width: auto;
	text-transform: uppercase;
	margin: 1.2em 0 1.2em 0 ;
	display: block;
}

#main section a.more-link {
	border-bottom: none;
}

aside li a {
	font-size: .8em;
	color: #3b98b2;
}

ul#archive-list li{
	font-size: 1.2em;
	margin-bottom: 1em;
}

ul#archive-list li a{
	border-bottom: 0;
	color: #191919;
}

#main article h1 a:hover {
	border-bottom: 0;
}

article h1 a:hover, article h1 a:link, article h1 a:visited, article h1 a:active{
	color: #333;
}

article p a:hover, article p a:active{
	border-bottom: 1px solid;
}

section a:hover, footer a:hover{
	border-bottom: 1px solid;
	-moz-transition: all 0.3s ease-in-out 0s;
	position: relative;
	top: -1px;
}

.twitter-follow-button {
	margin-bottom: 2.2em;
}

aside a, div.side a {
	color: #333;
}

aside a:hover, div.side a:hover {
	color: #3B98B2;
	-moz-transition: all 0.3s ease-in-out 0s;
	position: relative;
	top: -1px;
	border-bottom: 1px solid #3B98B2;
} 

footer a {
	color: #dbdfe1;
}

footer a:hover{
	font-weight: normal;
	border-bottom: 0;
	text-decoration: none;
}


/* CONTENT
--------------------------------------------- */

em{ 
	padding: 0;
	margin: 0;
	font-size: 1em;
	font-style:italic;
}

em.meta {
	display:block;
	margin: 0 0 1.2em 0;
	font-size: .875em;
	color: #999;
}

section img{ 
	width: 500px;
}

p.caption em{ 
	display: block;
	margin-top: -2em;
}	

article p{
	margin-bottom: 1.2em;
	font-size: 1em;
	font-weight: 400;
	padding: 0;
}

article p:nth-child(4){
	text-indent: 0em;
}

article p:last-of-type {
	padding-top: 0em;
	text-indent: 0em;
}

div.post{
	margin-top: 1em;
}

#content article div > p:first-of-type{
	font-size: 1.3em;
} 

aside p, div.side p{
	color: #888;
	font-size: .875em;
	margin: 0 0 1.2em 0;
}

ul.bsa {
	margin-top: 2.4em;
}

nav+p {
	margin-top: 3.4231em;
}

section .archive p{
	color: #777;
	padding: 0;
	float: left;
}

footer p{
	line-height: 1.6em;
	margin: 0 0 1.2em 0;
}

footer em{
	font-size: 1em;
	display:inline;
}

/* IMAGES
--------------------------------------------- */

section img {
	margin: 0 auto 1.2em 0;
	display:block;
	text-align: center;
	width: 100%;
	max-width: 500px;
	height: auto;
}


/* ABOUT
--------------------------------------------- */

#About section {
	float: left;
    margin: 0 3.5% 3.5em 0;
    padding: 0;
	width: 72%;
}

#About div.side {
	margin-top:0;
}

div.side ul {
	margin-bottom: 2.2em;
}

div.side ul li {
	font-size: .875em;
	color: #888888;
	margin-bottom: .5em;
}

div.side ul li h3{
	font-size: 1em;
}

div.side ul li em {
	display: block;
}

#About .bio {
	float: left;
	margin: 0 0 2em 5%;
	width: 30%;
}

#About div.bio:first-child{
	margin-left: 0;
}

#About .bio p{
	font-size: 0.875em;
}

#About .narrative {
	float: left;
	padding: 0 1em 0 .25em;
}

#About .bio img {
	float: left;
	margin: 0 auto 1em 0;
	max-width: 210px;
}


/* ARTICLE
--------------------------------------------- */

#content section {
	margin: 0 auto;
}

#main article {
	position: relative;
	margin: 0 0 1.2em 0;
	padding: 0 0 1.2em 0;
	border-bottom: 1px solid #ccc;
}

#content article {
	position: relative;
	margin: 0 0 1em 0;
	padding: 0 0 1em 0;	
}

article .author {
	color: #333;
	font-style: normal;
	text-transform: uppercase;
}

article blockquote {
	color: #555;
	font-style: italic;
	line-height: 1.5em;
	padding: 0 0 0 1em;
	border-left: 4px solid #add3dd;
}

body #content article div.post blockquote.quote p {
	font-size: .875em !important;
}

section ul.discuss {
	border:1px solid #3B98B2;
	padding: 1em 1em 1.5em 2em;
	margin: 2.4em 0 3em 0;
	font-size: .875em;
}

section ul.discuss li a{
	margin: .5em 0 0 0
}

/* ARCHIVES
--------------------------------------------- */

div.archives {
	width: 100%;
	padding: 0;
	color: hsla(0,0%,40%,1);
}

.archives li {
	margin: .5em 0;
}


/* FORMS
--------------------------------------------- */

#searchform #s {
	-moz-transition: all 0.7s ease 0s;
	background: url("_/images/search.png") no-repeat scroll 0 2px #EDEDED;
	border: 1px solid #d6d6d6;
	border-radius: 13px 13px 13px 13px;
	color: #888;
	padding: 3px 4px 3px 28px;
	width: 100px;
	margin: 2em 0 0 0;
}

input[type="text"] {
	max-width: 96%;
	width: 240px;
}

input[type="text"], input[type="password"], textarea {
	-moz-border-bottom-colors: none;
	-moz-border-image: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	background: none repeat scroll 0 0 #EDEDED;
	border-color: -moz-use-text-color -moz-use-text-color #66ccd1;
	border-radius: 5px 5px 5px 5px;
	border-style: none none solid;
	border-width: medium medium 1px;
	color: #888;
	padding: 6px 2%;
}

input, textarea, select {
	font-family: inherit;
	font-size: 100%;
}

#searchform #s:focus {
	background-color: #FFFFFF;
	color: #333333;
	border-color: #67ccca;
	font-style: normal;
	width: 130px;
}


/* FOOTER
--------------------------------------------- */

footer {
	font-size: 1em;
	height: 1%;
	overflow: hidden;
	 padding: 0.6em 0 2em;
	clear: both;
	margin: 0 auto;
	width: 100%;
	background-color: #475054;
	background: transparent url(_/images/footer_bg.jpg) repeat-x 0 0;
}

.footer-inner {
 	margin: 0 auto;
	max-width: 1200px;
	width: 90%;
}

footer div.license{
	padding: 0;
	float: left;
	clear: both;
	background: transparent url(_/images/cc.png) no-repeat 0 0;
	height: 15px;
	width: 80px;
	display: inline-block;
	font-size: .8em;
	text-indent: -9999px;
}

footer div.copy{
	float: left;
	padding: 1em 0 0 0;
	color: #6E7C82;
}

footer ul.social {
	padding: 1em 0;
	float: right;
}

footer ul li{
	font-size: .8em;
	display: inline-block;
	font-family: "futura-pt-1", "futura-pt-2", Arial, Helvetica, sans-serif; font-weight: 400; font-style:normal;
	text-transform: uppercase;
}


footer li.sm a{
	background: transparent url(_/images/social-sprite.png) no-repeat 0 4px;
	padding: .65em 0 .65em 26px;
	margin-right: 1.25em;
}

footer li.twitter a{
	background: transparent url(_/images/social-sprite.png) no-repeat 0 -23px;
	padding: .65em 0 .65em 26px;
	margin-right: 1.25em;
}

footer li.rss a{
	background: transparent url(_/images/social-sprite.png) no-repeat 0 -50px;
	padding: .65em 0 .65em 26px;
}

footer ul li a:hover {
	color: #7f8d93;
}


/* BSA 
--------------------------------------------- */

body #ads-container .bsa_it_ad {
	background: none repeat scroll 0 0 #fff;
	border: none;
	display: block;
	font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", Georgia, 'Times New Roman', serif; font-style:normal;
	line-height: 100%;
	padding: .6154em 1em 1em 0;
	position: relative;
}

body #ads-container .bsa_it_ad span{
	float: left;
	clear: both;
}

body #ads-container .bsa_it_p{
	position: relative;
	bottom: 0px;
	display: block;
	right: 0;
	text-align: left;
}

body #ads-container a#bsap_aplink {
    display: none;
}

body #ads-container span.bsa_it_p {
    display: none;
}

/* Media Queries
--------------------------------------------- */

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

#content div.post-ad {
	float: left;
	width: 100%;
	margin-top: 0;
}

body#content ul li div.one .bsa_it_p, body#content ul li div.one .bsa_it_t {
	float: left;
}

#content div.side {
	float: left;
	width: 100%;
	position: relative;
	margin-top: -1em;
}

section ul.discuss{
	margin: 2em 0;
}

#content div.side{
	margin-bottom: 1.2em;
}

}


@media only screen and (max-width:930px) {
	
	.feature img{
		max-width: 650px;
	}

	#content aside {
		float: left;
		width: 100%;
		clear:both;
		margin-right: 0;
		margin-bottom: 0;
	}
	
	#main aside{
		margin-bottom: 1.2em;
	}
	
	#About div.side {
		float: right;
	    margin: .65em 0 3.5em;
	    padding: 0;
	    width: 22.25%;
	}
	
	#content div.side {
		float: left;
		margin: 0 0 1.2em 0;
		width: 100%;
	}
	
	#content div.container {
		float: left;
		width: 40%;
	}
	
	div.colophon {
		float: left;
		display: block;
		width: 100%;
	}

	div#ads-container, #content div.side {
		float: left;
		width: 100%;
		position: relative;
		margin-top: -1em;
	}
	
	#content section {
		width: 100%;
	}
	
	#content aside {
		font-size: .875em;
		font-style: italic;
		padding: 1em 0 1em .5em;
		float: none;
		margin-top: 0;
		margin-bottom: 1.2em;
		position: relative;
		border-top: 1px dotted #B6BDC0;
		border-bottom: 1px dotted #B6BDC0;
	}
	
	#content aside {
		font-size: 1em;
		border-top: 0;
		border-bottom: 0;
		padding: 0;
		}
	
	#content div.content section article {
		padding-left: 0;
	}
	
	#content div.best {
		float: left;
		margin: 0;
		width: 100%;
	}
	
	#content section {
		width: 100%;
		margin: 0;
	}
	
	#About section {
		margin-bottom: 1em
		}

	aside ul.ego {
		float: left;
		width: 90%;
		padding: 1em;
	}

	aside ul.bsa {
		float: left;
		margin-top: 0;
		padding: 1em;
		width: 100%;
	}

	body ul li div.one .bsa_it_ad {
		background: none repeat scroll 0 0 #FFFFFF;
		border: medium none;
		display: block;
		font-family: helvetica,arial,sans-serif;
		line-height: 100%;
		padding: 0.5em 0 1em 0;
		position: relative;
	}
	
	#About .bio {
		margin: 0 0 2em 0;
		width: 100%;
	}
	
	#About .narrative {
		float: right;
		width: 72%;
	}
	
	#About .bio img {
		max-width: 110px;
	}
	
}


@media only screen and (max-width:845px) {
	
	.feature p{
		padding: 0 12%;
	}
		
	#main .twitter-follow-button {
		margin-bottom: 0;
	}
	
	#main section {
		padding-top: 1.2em;
	}
	
	.about p{
		font-size: 1.25em;
	}
	
	.about h3{
		display: none;
	}
	
	#main section h3 {
		color: #ADD3DD;
	}
	
	aside {
		float: left;
		width: 100%;
		clear:both;
		margin-right: 0;
		margin-bottom: 0;
	}
	
	section {
		width: 100%;
		margin: 0 0 2.6em 0;
	}
	
	div.side {
		float: left;
		margin: 0 0 1.2em 0;
		width: 100%;
	}
	
	#main div.container {
		width: 40%;
		float: left;
	}
	
	#main div#ads-container {
		float: right;
		width: 40%;
		position: relative;
		margin-top: -1em;
		margin-bottom: 1.2em;
	}
	
	#About .narrative {
		width: 68%;
	}
	
	#Archive aside {
		width: 55%;
		margin-right: 0;
		margin-bottom: 0;
	}
	
	#Archive section{
		width: 60%;
	}
	
	#Archive div.side {
	    float: right;
	    margin: -4em 0 3.5em 0;
	    padding: 0;
	    width: 33%;
		clear: none;
	}
	
	#About div.side {
		clear: none;
	}
	
	footer ul.social {
		float: left;
		position: relative;
		left: -4px;
		padding-top: 0;
		clear: left;
	}
	
	footer .copy {
		display: block;
		margin: 0;
		padding: 1em 0 0 0;
	}
	
	footer div.license{
	 	margin-top: 1em;
	}
	
}



@media only screen and (max-width:750px) {
	
	.feature {
		bottom: 5em;
	}
	
	.feature a.more-link {
		font-size: .875em;
	}
	
	#About .narrative {
		width: 60%;
		margin-top: 1.5em;
	}
	
	#About section {
		width: 100%;
	}
	
	#About div.side {
		clear: left;
	}
	
	#About div.side {
		border-top: 1px solid #ccc;
		padding-top: 1.2em;
		float: left;
		margin: 0 0 1.2em 0;
		width: 100%;
	}
	
	div.colophon {
		float: right;
		width: 40%;
	}
	
	#About .bio img {
		max-width: 175px;
		margin: 0 1em 1em 0;
		text-align: center;
	}
	
}


@media only screen and (max-width:600px) {
	
	#main header{
		height: 425px;
	}
	
	#main div#logo{
		margin-top: 1em;
	}
	
	.feature img{
		max-width: 450px;
	}
	
	.feature {
		bottom: 6em;
	}
	
	.feature p{
		font-size: .875em;
		padding: 0 4em;
	}
	
	#About .narrative {
		float: left;
		width: 100%;
		text-align: center;
		margin-top: 0;
	}
	
	#About section {
		width: 100%;
	}
	
	#About div.side {
		clear: left;
	}
	
	#About div.side {
		border-top: 1px solid #ccc;
		padding-top: 1.2em;
		float: left;
		margin: 0 0 1.2em 0;
		width: 100%;
	}
	
	#About .bio img {
		float:none;
		max-width: 210px;
		position: relative;
		margin: 0 auto 1em auto;
		text-align: center;
	}
	
	div.container {
		float: left;
		width: 40%;
	}
	
	div.colophon {
		float: left;
		display: block;
		width: 100%;
	}
	
	#About div.colophon {
		float: right;
		display: block;
		width: 40%;
	}
	
	#About div.left {
		float: left;
		width: 40%;
	}

	#Archive section{
		width: 100%;
		margin-bottom: 2.4em;
	}

	#Archive div.side {
		border-top: 1px solid #ccc;
		padding-top: 1.2em;
		float: left;
		margin: 0 0 1.2em 0;
		width: 100%;
	}

}

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

	nav ul li{
		font-size: .8em;
		padding: 0 2em 0 0;
	}

	.feature{
		bottom: 4em;
		max-width: 390px;
	}
	
	.feature h1{
		display:none;
	}
	
	.feature p{
		margin-top: 0;
		padding: 0 6%;
	}
	
	header{
		height: 200px;
	}
	
	header #logo{
		text-align: center;
		left: 50%;
		margin-left: -50px;
	    position: absolute;
	}
	
	nav{
		text-align: center;
	 	float: left;
	    margin-top: 4em;
	    margin-left: 2em;
	    position: relative;
	}
	
	article{
		width: 100%
	}
	
	#About .bio {
		margin: 0 0 2em 0;
		width: 100%;
	}
	
	#About .narrative {
		float: left;
		width: 100%;
	}
	
	footer ul.social li {
		display: block;
		margin-bottom: .5em;
	}

}


@media only screen and (max-width:380px) {
	nav ul li{
		font-size: .8em;
		padding: 0 1em 0 0;
	}
}



@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	#logo a{
		background: url(_/images/finch_logo_2x.png) no-repeat scroll left top transparent;
		 background-size: 80px 75px;
	}
}


/* Print styles
-------------------------------------------------------------------------------*/
@media print {}