/* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.chromeframe {position: absolute; top: 0;}

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

body {
	font: 20px 'Vollkorn', serif;
	padding-bottom: 3em; /* leave room for the menu */
}

/* Using local fonts? Check out Font Squirrel's webfont generator: 
http://www.fontsquirrel.com/tools/webfont-generator */

/* We like off-black for text. */
body, select, input, textarea {
	background-color: #fcfaf2;
	color: #333;
}

a {color: #57ad68; text-decoration: none;}
a:hover {text-decoration: underline;}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;} 

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

/* Structural elements -------------------------------------------------------------*/

header {
	background-color: #57ad68;
}

article {
	
}

section {
}

#top-matter {
	width: 700px;
	margin: 0 auto;
}

.container {
	width: 700px;
	margin: 0 auto;
}

.sub-column {
	width: 325px;
	float: left;
	font-size: 0.75em;
}

.multi-column > section:first-of-type {
	margin-right: 50px;
}

.multi-column > section:nth-of-type(3) {
	margin-right: 50px;
}

.whitespace {
	padding-top: 4em;
	padding-bottom: 2em;
}

/* Images and Figures -------------------------------------------------------------*/

.img-banner {
	position: relative;
	margin-bottom: 2em;
}

.underlay {
	background-color: #57ad68;
	width: 100%;
}

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

.center {
	width: 100%;
	height: auto;
}

.img-outset-right {
	width: 50%;
	float: right;
	margin-left: 2em;
	margin-right: -7em;
}

.img-outset-left {
	width: 50%;
	float: left;
	margin-right: 2em;
	margin-left: -7em;
}

.img-outset-center {
	margin-right: -7em;
	margin-left: -7em;
}

figure {
	position: relative;
	margin-top: 2em;
	margin-bottom: 2em;
}

figcaption {
	font-family: 'Josefin Slab', serif;
	font-size: 0.85em;
	text-align: center;
}

/* Text formatting!
-------------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	font-family: 'Josefin Slab', serif;
	margin-bottom: 0.5em;
	margin-top: 1em;
}

#site-logo {
	font-family: 'Josefin Slab', serif;
	font-size: 4em;
	font-weight: bold;
	margin: 0;
}

h1 { 
	font-size: 2.75em; 
	margin-top: 0;
	margin-bottom: 0.25em;
}

h2 { font-size: 2em; }
h3 { font-size: 1.75em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.25em; }
h6 { font-size: 1em; }

nav {
	font-family: 'Josefin Slab', serif;
	font-size: 1em;
}

.column-spanner {
	/*border-bottom: 2px solid #333;*/
	text-align: center;
	text-transform: uppercase;
	margin: 0 auto;
}

h2 span {
	/*background-color: #57ad68;*/
	position: relative;
	top: -0.5em;
	padding: 0 1em;
}

p {
	line-height: 1.5em;
	margin-bottom: 1.25em;
}

ul, ol, pre {
	margin-bottom: 1.5em;
}

blockquote {
	border-left: 10px solid #57ad68;
	padding-left: 25px;
	margin-left: -35px;
	font-style: italic;
}

.quote blockquote {
	border: 0;
/*	quotes: "\201C""\201D""\2018""\2019";*/
	margin: 0 0 1em 0;
	padding: 0;
	position: relative;
}

.quote blockquote:before {
	display: block;
	content: "\201C";
	font-size: 5em;
	position: absolute;
	left: -60px;
	top: -25px;
}

.quote cite {
	font-style: normal;
	color: #c90707;
	margin-left: -1.25em;
}

.pullquote {
	border: 0;
	margin-left: -4em;
	margin-right: -4em;
	font-size: 1.5em;
	text-align: center;
}

.metadata {
	color: #555;
	font-family: 'Josefin Slab', serif;
	font-size: 0.6em;
	font-weight: 700;
	text-transform: uppercase;
}

.subhead {
	font-family: 'Josefin Slab', serif;
	font-weight: 400;
	font-size: 1.25em;
	font-style: italic;
	color: #c90707;				/* burnt orange */
	margin-bottom: 1em;
	line-height: 1em;
}

.white-bg {
	background-color: #fcfaf2;	/* off-white */
	color: #57ad68;				/* muted green */
}

.green-bg {
	background-color: #57ad68;
}

.green-bg a { color: #fcfaf2; }
.green-bg .subhead { color: #fcfaf2;}

#site-logo a {
	color: #c90707;
	-webkit-transition:color 2s linear;  
   	-moz-transition:color 2s linear;  
   	-o-transition:color 2s linear;  
   	transition:color 2s linear;
}

#site-logo a:hover {
	text-decoration: none;
	color: #fcfaf2;
}

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



}


/* Media queries!
-------------------------------------------------------------------------------*/

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


}