@import url(http://fonts.googleapis.com/css?family=Indie+Flower);

html,
button,
input,
select,
textarea {
	color: #222;
}

body {
	background: #fff url('/images/layout/grid_paper_tile.jpg');
	color: #222;
	font: 1.1em/1.4 Garamond, Georgia, Times New Roman, serif;
}

::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}

blockquote {
	font-size: 0.9em;
}

code {
	font-size: 0.8em;
}

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

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

textarea {
	resize: vertical;
}

/* ==========================================================================
	Links
	========================================================================== */

	a
	{
		color: #2C5197;
	}

	a:hover, 
	a:focus
	{
		color: #4372AA;
		text-decoration: none;
	}

	a.block-link {
		color: #222;
		display: block;
		text-decoration: none;
	}

	a.block-link h1, 
	a.widget h2 {
		color: #2C5197;
		text-decoration: underline;
	}

	a.block-link:hover h1, 
	a.widget:hover h2 {
		text-decoration: none;
	}

	.prev, .next {
		display: block;
		background: url('/images/layout/arrows.svg') no-repeat top left / 4em auto;
		height: 2.25em;
		position: absolute;
		top: 20%;
		width: 2em;
	}

	.prev {
		left: -2.6em;
	}

	.next {
		background-position: top right;
		right: -2em;
	}

	.prev:hover {
		background-position: bottom left;
	}

	.next:hover {
		background-position: bottom right;
	}

	.prev span, .next span {
		display: none;
	}

/* ==========================================================================
	Headings
	========================================================================== */

	h1, h2, h3, h4, h5, h6 {
		font-family: 'Indie Flower', Garamond, serif;
		font-style: italic;
		margin: 1.5em 0 0;
	}

	h1 {
		font-size: 1.6em;
	}

	h2 {
		font-size: 1.4em;
	}

	h1 + p, 
	h2 + p, 
	h3 + p, 
	h4 + p, 
	h5 + p {
		margin-top: 0.125em;
	}

	hgroup h1, 
	hgroup h2 {
		margin: 0;
	}

	hgroup h2 {
		padding-left: 0.91em;
	}

	#main .widget h1,
	.widget h2, 
	.widget h3, 
	#ben-babcock h1 {
		background: none;
		font-family: Garamond, 'Times New Roman', serif;
		font-style: normal;
		padding: 0;
	}

	#section-nav h1 {
		margin: 0;
	}

/* ==========================================================================
	Figures, Images, Tables, Lists
	========================================================================== */

	figcaption {
		font-family: Verdana, Helvetica, Arial, sans-serif;
		font-size: 0.6em;
		font-style: italic;
		margin: 0 auto;
		max-width: 35em;
		text-align: center;
	}

	img {
		border: 0;
		vertical-align: middle;
	}

	.book-cover {
		float: left;
		margin-right: 3%;
		max-width: 300px;
		width: 21.5%;
	}

	.image img,
	.single-image img,
	.inline {
		border: 1px solid #666;
		display: block;
		height: auto;
		margin: 1em auto;
		max-width: 100%;
	}

	dt {
		font-weight: bold;
	}

	dl.numberbox {
		display: block;
		content: '.';
		font-size: 1px;
		visibility: hidden;
		clear: both;
		float: none;
	}

	dl.numberbox dd, dl.numberbox dt
	{
		float: left;
		margin-left: 0;
		margin-bottom: 5px;
	}

	dl.table
	{
		margin: 0.5em auto;
	}

	dl.table dt
	{
		clear: left;
		max-width: 30%;
		text-align: right;
	}

	dl.table dd
	{
		border-bottom: 1px solid #BCC378;
		margin: -2.6em 0 1em 0;
		padding: 1em 0 1em 32%;
	}

	dl.numberbox dt
	{
		clear: left;
		font-size: 1.5em;
		padding-right: 0.2em;
		text-align: right;
		width: 2.8em;
	}

	dl.numberbox dd
	{
		padding: 0.55em 0 0 0;
	}

	menu, ol, ul {
		padding-left: 1.2em;
	}

	ol.entry-listing {
		margin: 0;
		padding: 0;
	}

	ol.entry-listing li {
		list-style: none;
	}

	.gallery {
		margin: 2em auto;
		padding: 0;
		text-align: center;
	}

	.gallery img {
		display: block;
		margin: 0 auto;
		max-height: 10em;
		max-width: 100%;
	}

	.gallery li {
		display: inline-block;
		list-style: none;
		margin: 0.5em 0.1em;
		position: relative;
		padding-bottom: 15px;
		text-align: center;
	}

	.splash li {
		float: none;
		max-width: 100%;
		width: 100%;
	}

	.splash img {
		max-height: 200px;
	}

	.books-toc li {
		min-height: 7.5em;
	}

	ul li {
		list-style: circle;
	}

	table
	{
		border-collapse: collapse;
		margin: 1em auto;
	}

	table caption
	{
		margin-bottom: 1em;
	}

	td, th
	{
		padding: 0.1em 2em;
	}

	th
	{
		font-weight: bold;
		text-align: center;
	}

	thead th
	{
		border-bottom: 2px solid #28550a;
		font-size: 1.1em;
		padding: 0.5em 2em;
		padding-top: 0;
	}

	tbody tr
	{
		border-bottom: 1px solid #28550a;
	}

	colgroup.heading
	{
		border-right: 1px solid #28550a;
	}


/* ==========================================================================
	Structure:
		- Skip links
		- Masthead/Logo
		- Navigation
		- Page title
		- Body
		- Footer
		========================================================================== */

		div.wrapper {
			margin: 0 auto;
			max-width: 80em;
			position: relative;
		}

		#skip-links {
			background: #666 url('/images/layout/top_gradient.png') repeat-x;
			border-bottom: 5px double #fff;
			position: fixed;
			z-index: 1000;
			width: 100%;
		}

		#skip-links a {
			color: #fff;
			font-family: Verdana, Helvetica, Arial, sans-serif;
			font-size: x-small;
			font-variant: small-caps;
			font-weight: bold;
			text-decoration: none;
		}

		#skip-links a:after {
			content: "↘";
			font-size: small;
		}

		#skip-links a:hover {
			text-decoration: underline;
		}

		#skip-links ul {
			margin: 0 auto;
			max-width: 80em;
			text-align: right;
		}

		#skip-links ul li {
			background: none;
			display: inline;
			margin: 0.5em;
			padding: 0;
		}

		#masthead {
			padding: 1em 0;
		}

		#ben-babcock
		{
			background: url('/images/layout/socksandsandals.jpg');
			background-position: center;
			background-size: cover;
			margin: 0 auto;
			padding: 25px 0;
			text-align: center;
		}

		#ben-babcock h1
		{
			font-size: 30px;
			margin: 0 0 15px 0;
		}

		#ben-babcock a {
			color: #fff;
			font-weight: bold;
		}

		#site-nav {
			background: url('/images/layout/trans50.png');
			margin-top: -30px;
			padding: 5px 0;
		}

		#site-nav a {
			font-weight: bold;
		}

		#site-nav ul,
		#copyright ul {
			margin: 0 auto;
			padding: 0;
			text-align: center;
		}

		#site-nav ul li,
		#copyright ul li {
			background: none;
			display: inline;
			padding: 0;
		}

		#page-title {
			color: #000078;
			font-size: 1.8em;
			margin: 0;
			text-align: center;
		}

		#main, #main-footer {
			padding: 0 1%;
		}

		#section-nav {
			background: url('/images/layout/trans50.png');
			margin: 1em 0.2em;
			padding: 1em;
		}

		#section-nav ul {
			font-family: Verdana, Helvetica, Arial, sans-serif;
			font-size: 0.8em;
		}

		#colophon {
			border-bottom: 0.5em solid #3c3c3c;
			clear: both;
		}

		#copyright {
			clear: both;
			font-size: 0.85em;
			text-align: center;
		}

		.widget, .book-review {
			border: 0.1em solid #CCC;
			border-width: 0 0 0.1em 0;
			padding-bottom: 0.1em;
			margin-bottom: 1em;
		}

/* ==========================================================================
	Special structural elements (widgets, etc.)
	========================================================================== */

	p.more-link {
		font-size: 0.6em;
		text-align: right;
	}

	p.more-link a {
		font-family: Verdana, Helvetica, Arial, sans-serif;
		font-weight: bold;
	}

	p.spoiler-alert {
		margin: 0 10%;
		padding: 1em 0;
	}


	/* Widgets help define the layout of small blocks of content */

	article.widget h1,
	li.widget h1 {
		font-size: 1.3em;
		text-align: left;
	}

	.widget h1 cite {
		font-style: normal;
	}

	.widget h2 {
		font-size: 1.1em;
	}

	.widget time, 
	.widget small.metadata {
		float: right;
		font-size: small;
		font-weight: bold;
		margin: 0.5em 0;
	}

	.navblock .widget {
		background-repeat: no-repeat;
		background-position: -100% -100%;
	}

	a.widget {
		text-decoration: none;
	}

	article.review-widget header {
		float: right;
		margin-left: -25%;
		width: 100%;
	}

	article.review-widget div.hgroup-container {
		margin-left: 25%;
	}

	article.review-widget div.metadata {
		margin: 1em 0;
	}

	article.review-widget h1 {
		display: inline;
	}

	article.review-widget p {
		clear: both;
	}
	/* End widgets*/

	article.book-review {
		margin: 0 0 2em 0;
	}

	article.book-review .metadata {
		margin: 1em 0.5em;
	}

	article.book-review .metadata img {
		vertical-align: text-bottom;
	}

	.metadata time, .metadata li {
		font-weight: bold;
		margin-left: 0.5em;
	}

	.book-data dl {
		color: #444;
		float: left;
		font-size: 0.9em;
		margin: 0;
	}

	article.book-review section {
		clear: both;
	}

	article.book-review footer {
		font-style: italic;
		text-align: right;
	}

	.currently-reading img {
		display: block;
		margin: 0.5emauto;
		max-height: 15em;
	}



/* ==========================================================================
	Media Queries (for responsive design)
	========================================================================== */

/* Big tablets/small desktop resolutions and above */
@media only screen and (min-width: 35em) {

	/* ==========================================================================
		Typography (Headings, links, text, etc.)
		========================================================================== */
		#masthead a,
		#colophon a {
			color: #004600;
		}

		blockquote {
			background: 
			url('/images/layout/open_quote.svg') no-repeat top left / 5% auto, 
			url('/images/layout/close_quote.svg') no-repeat bottom right / 5% auto;
			color: #444;
			font-size: 1.05em;
			margin: 1em auto;
			max-width: 40em;
			padding: 0 5%;
			width: 70%;
		}

		h1 {
			background: 
			url('/images/layout/x_axis.svg') no-repeat bottom right,
			url('/images/layout/y_axis.svg') no-repeat top left;
			display: inline-block;
			font-size: 2em;
			margin-top: 0;
			padding: 1em 1em 0 0.8em;
		}
		
		.w-container h1 {
			display: block;
		}
		
		img.left,
		figure.left {
			float: left;
			margin: 1em;
		}
		
		img.right,
		figure.right {
			clear: right;
			float: right;
			margin: 1em;
		}
		
		img.right, 
		img.left,
		figure.right img, 
		figure.left img {
			max-width: 20em;
		}
		
		.book-cover, .currently-reading img {
			box-shadow: 0.2em 0.2em 0.5em 0 #666666;
		}

		p.spoiler-alert {
			margin-right: 35%;
		}

		.books-toc li {
			min-height: 12em;
		}

		.splash img {
			max-height: 400px;
		}

		#recent-photos .caroufredsel_wrapper {
			height: 400px;
		}


	/* ==========================================================================
		Structural elements
		========================================================================== */
		#masthead {
			float: left;
			max-width: 18.75%;
			padding: 0;
		}
		
		#flag
		{
			background: none;
			max-width: 177px;
			margin: -10px auto 0 auto;
			padding-left: 1em;
			position: relative;
			z-index: 0;
		}

		#flag div {
			background: url('/images/layout/sandals_wave.png') center / cover;
			padding-top: 204.5%;
		}
		
		#ben-babcock {
			background: none;
			max-width: 15em;
			padding: 0;
			position: relative;
		}

		#ben-babcock h1 {
			display: block;
			font-size: 1.9em;
			font-variant: small-caps;
			font-weight: bold;	
			text-decoration: none;
			margin: -125% auto 90% auto;
			padding: 0 0.2em;
			position: relative;
			z-index: 100;
		}

		#ben-babcock a {
			background: url('/images/layout/trans75.png');
			border: double #004600;
			color: #004600;
			display: block;
			padding: 2px 5px;
			text-align: center;
			text-decoration: none;
		}

		#ben-babcock a:hover {
			text-decoration: underline;
		}

		#site-nav,
		#section-nav {
			background: 
			url('/images/layout/y_axis_inverted.svg') no-repeat bottom left, 
			url('/images/layout/x_axis.svg') no-repeat top right, 
			url('/images/layout/trans50.png') no-repeat center center / 90% 90%;
			margin-top: 0;
			padding: 1em 0.2em 1em 0.1em;
		}

		#site-nav {
			position: relative;
			z-index: 50;
		}
		
		#site-nav ul {
			text-align: center;
		}
		
		#site-nav ul li {
			display: block;
			margin: 0.2em 0;
		}

		#page-title {
			display: block;
			font-size: 3em;
			margin: 0.5em auto;
			max-width: 15em;
			padding: 0.5em 0.1em 0.1em 0.5em;
			text-align: left;
			width: 80%;
		}
		
		#main, 
		#main-footer, 
		#copyright {
			float: right;
			padding: 2em 4% 0;
			width: 73.25%;
		}
		
		#main {
			background: url('/images/layout/trans50.png');
			box-shadow: 0 -0.1em 0.5em 0.1em #666666;
			
		}
		
		#section-nav {
			margin: 2em auto;
			max-width: 50em;
			padding: 1em;
			width: 90%;
		}
		
		#section-nav h1 {
			background: none;
			display: block;
			font-size: 1.6em;
			margin: -2.5em 0 0 -0.6em;
		}
		
		#section-nav ul {
			font-family: Garamond, "Times New Roman", serif;
			font-size: 1em;
			margin: 0;
		}
		
		#section-nav nav {
			float: left;
			margin: 0 3% 1em 0;
			width: 47%;
		}


	/* ==========================================================================
		Special structural elements
		========================================================================== */
		
		.widget {
			border-width: 0.1em 0 0 0;
			float: left;
			margin: 0 3% 1em 0;
			padding-top: 0.5em;
			width: 47%;
		}

		.widget.noborder {
			border: none;
			padding-top: 0;
		}
		
		.single-widget {
			border: none;
			float: none;
			margin-left: 0;
			margin-right: 0;
			width: 100%;
		}
		
		.widget:nth-of-type(odd) {
			clear: left;
		}
		
		.navblock .widget {
			background-position: left center;
			background-size: 5em auto;
			clear: both;
			padding-left: 5.5em;
			width: auto;
		}

		article.book-review header {
			float: left;
			width: 75%;
		}

		article.book-review .book-data {
			float: right;
			margin: 0 1% 0 2%;
			width: 22%;
		}

		.book-data dl {
			float: none;
			margin: 1em 0;
		}

		.book-data dt,
		.book-data dd {
			float: left;
		}

		.book-data dt {
			clear: left;
		}

		.book-data dd {
			margin: 0 0 0 0.5em;
		}

		.book-data .book-cover {
			float: none;
			width: 100%;
		}

		article.book-review section {
			clear: none;
		}

		#book-list-toc {
			margin: 0 auto;
			position: relative;
			text-align: center;
			width: 80%;
		}
	}
/* END @media only screen and (min-width: 35em) */

/* Medium desktop resolutions */
@media only screen and (min-width: 70em) {

	/* ==========================================================================
		Typography (Headings, links, text, etc.)
		========================================================================== */

		.left,
		.right, 
		.left img, 
		.right img {
			max-width: 35em;
		}


	/* ==========================================================================
		Structural elements
		========================================================================== */
		#masthead {
			margin-top: 377px;
			width: 18.75%;
		}
		
		#ben-babcock {
			position: fixed;
			top: 0;
		}
		
		#section-nav + section h1 {
			display: block;
		}

		#copyright {
			bottom: 0;
			clear: none;
			float: none;
			left: 1em;
			margin: 5em 1%;
			max-width: 13.9375%;
			padding: 0;
			position: absolute;
			z-index: 1;
		}


	/* ==========================================================================
		Special structural elements
		========================================================================== */

		.widget.max-three {
			width: 29.3333333%;
		}
		
		.widget.max-three:nth-of-type(odd) {
			clear: none;
		}
		
		.widget.max-three:nth-of-type(3n+1) {
			clear:left;
		}
		
		.navblock .widget {
			background-size: 30% auto;
			clear: none;
			padding-left: 15%;
			width: 32%;
		}
	}
	/*END @media only screen and (min-width: 70em) */

	/* Wide desktop resolutions */
	@media only screen and (min-width: 90em) {
		article.review-widget p {
			clear: none;
		}
		
		.w-container .widget {
			float: none;
			width: auto;
		}

		.w-container {
			float: left;
			margin: 0 3%;
			width: 44%;
		}
}
/*END @media only screen and (min-width: 90em) */

/* Small adjustment to font size for resolutions that just make the cut */
@media only screen and (max-width: 1165px) {
	#ben-babcock h1 {
		font-size: 1.5em;
	}
}

/* Ditch the fixed positioning/scrolling when the browser height is too small */
@media only screen and (min-width: 40em) and (min-height: 47em) {
	#ben-babcock { position: relative }

	#masthead {
		float: none;
		position: fixed;
		margin: 0;
		width: auto;
	}
	
}

@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {

}

/* ==========================================================================
Helper classes
========================================================================== */

.ir {
	background-color: transparent;
	border: 0;
	overflow: hidden;
	*text-indent: -9999px;
}

.ir:before {
	content: "";
	display: block;
	width: 0;
	height: 150%;
}

.no-display {
	display: none !important;
	visibility: hidden;
}

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

.invisible {
	visibility: hidden;
}

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}

/* ==========================================================================
Print styles
========================================================================== */

@media print {
	* {
		background: transparent !important;
		color: #000 !important; /* Black prints faster: h5bp.com/s */
		box-shadow: none !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	/*
	* Don't show links for images, or javascript/internal links
	*/

	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content: "";
	}

	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group; /* h5bp.com/t */
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	@page {
		margin: 0.5cm;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}
}
/* END @media print */