/* Begin Typography & Colors */
body {
	font-size: 12px; /* Resets 1em to 10px */
	font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
	background-color: #e7e7e7;
	color: #333;
	line-height:1.4;
}

h1 { margin: 0 } 
h2 {
	font-size: 1.5em;
	margin-top: 0;
	margin-bottom: 0.5em;
}
h3 {
	font-size: 1.2em;
	margin: 0.6rem 0 0.2rem;
}
h4 { font-size: 1.1em; }

#content {
	font-size: 1.2em;
}
.post { text-align: justify; }
.category { font-weight: bold; }
.tag { }

acronym, abbr, span.caps
{
	font-size: 0.9em;
	letter-spacing: .07em;
}

code {
	font-family: 'Menlo', 'Consolas', 'Monaco', 'Courier New', Courier, fixed;
	hyphens: none;
	-webkit-hyphens: none;
	-moz-hyphens: none;
}

a[href], .post h2 a[href]:hover, .post .spoiler:hover a[href] {
	text-decoration:none;
	color: #06c;
}

.post h2 { text-align:left }

.post h2 a[href] { color: #000 }

a[href]:hover, .post .spoiler:hover a[href]:hover {
	color: #147;
}

a[href] * {
	cursor:pointer;
}

.post .note {
	font-style:italic;
}

.post .note em {
	font-style:normal;
}

.post .spoiler {
	background-color:black;
	color:black;
}

.post .spoiler a[href] {
	color:black;
}

.post .spoiler:hover, .post .spoiler-shown {
	background-color:#bbb;
}

/* End Typography & Colors */

/* Begin Structure */
body {
	margin: 0 0 20px 0;
	padding: 0;
	text-align: center;
}

#top {
	max-width: 100%;
	width:794px;
	text-align: left; /* to counter body */	
	margin: 25px auto 3rem auto;
}

#page {
	margin: 1rem auto;
	padding: 0;
	width: 760px;
}

.navigation { clear:both }

.tagnav { display: none }

.narrowcolumn {
	float: left;
	padding: 0 0 0 15px;
	margin: 1rem 0 -1rem;
	width: 495px;
}

.widecolumn {
	padding: 10px 0 20px 0;
	width: 665px;
	margin: auto;
}

.shadow-box {
	background-color:#FEFEFE;
	border-radius:8px;
  	-moz-border-radius: 8px;
  	-webkit-border-radius: 8px;
	box-shadow: 1px 2px 6px #666;
	-webkit-box-shadow: 1px 2px 6px #666;
	-moz-box-shadow: 1px 2px 6px #666;
	padding: 1.5rem 2rem;
}

.narrowcolumn .shadow-box {
	margin: -1rem 0 3rem;
}

.small-shadow {
	box-shadow: 1px 1px 4px #888;
	-webkit-box-shadow: 1px 1px 4px #888;
	-moz-box-shadow: 1px 1px 4px #888;
}

.shadow-box hr {
	display: block;
	width:50%;
	margin: auto;
}

.widecolumn > div {
	margin: 0;
	padding-top:1rem;
}

.pagetitle {
	clear: both;
	text-align: center !important;
}

.metadata {
	clear: both;
	font-size:smaller;
	margin:0 0;
	color: #777;
}

.related {
	margin-top: 2rem;
}

h2 + .metadata {
	margin-top:-0.8rem;
}

.more-link {
	font-style:italic;
	margin-bottom:0.5em;
}

#footer {
	padding: 0;
	margin: 2rem auto 0;
	width:60%;
	clear: both;
}

#footer p {
	margin: 0;
	padding: 1.5em 0;
	text-align: center;
}
/* End Structure */

/* Begin Images */
p img {
	padding: 0;
	max-width: 100%;
}

video, img.bordered, a[href] img.bordered {
	border: 1px solid #ccc;
}

video[controls] {
	border-bottom-style: none;
}

.widecolumn .vga {
	/* This is a bit of a hack... */
	position: relative;
	left: -16px;
}

.narrowcolumn .youtube[width="480"] {
	width: 420px;
	height: 315px;
}

/* Begin Image Alignment */
/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
}

.alignright {
	float: right;
}

.alignleft {
	float: left;
}
/* End Image Alignment */



/* Begin Lists */

.shadow-box ol {
	padding: 0 0 0 1.5rem;
	margin: 0;
}

.entry ul {
	padding-left: 2.5em;
}

.entry ol li {
	margin-left: 1em;
}

.metadata ul, .metadata li {
	display: inline;
	list-style-type: none;
	list-style-image: none;
}

ol.dates {
	padding: 0 1rem;
	margin: 0.3rem 0 0;
	color: #666;
}

ol.dates li {
	list-style-type:none;
	padding: 0 0 0.3rem 1.5rem;
	text-indent: -1.5rem;
}

ol.dates .date {
	font-weight: bold;
}

ul.meta {
	list-style-type: none;
	margin: 0.5em 0;
	padding: 0 0.4em;
}

ul.meta li {
	margin-bottom: 0.2em
}

ul.meta li:before {
	content: "\00BB \0020";
	padding-left: 0.9em;
	text-indent: -0.9em;
}
/* End Lists */

/* Begin Footnotes */
sup {
	font-size:0.7em;
	vertical-align: super;
}

.post a[rel=footnote] {
	display: none;
}

body.single .post a[rel=footnote] {
	display: inline;
}

div.footnotes {
	font-size: smaller;
	border-left: 1px solid #ccc;
}

.post div.footnotes {
	display: none;
}

body.single .post div.footnotes {
	display: block;
}

div.footnotes ol {
	padding-left: 1.5em;
}

a[rev=footnote]:before {
	content: "\0020";
}
/* End Footnotes */

/* Begin Sidebar */
#sidebar {
	padding: 1.3rem;
	margin-left: 545px;
	width: 180px;
	font-size: 1em;
}

#sidebar form { margin: 0; }

#sidebar h2 {
	font-size:1.4em;
	margin-top: 0.8rem;
	margin-bottom: 0.3rem;
	padding: 0;
}

#sidebar > ul {
	list-style-type: none;
}

#sidebar ul, #sidebar ul ol {
	margin: 0;
	padding: 0;
}

#sidebar > ul > li {
	margin: 0.4rem 0em;
}

ol li, #sidebar ul ol li {
	list-style: decimal outside;
}


/* End Sidebar */

/* Begin Various Tags & Classes */

acronym, abbr {
	border-bottom: 1px dashed #999;
}

blockquote {
	margin: 15px 30px 0 10px;
	padding-left: 20px;
	border-left: 5px solid #ddd;
}

blockquote cite {
	margin: 5px 0 0;
	display: block;
}

blockquote > ol:only-child, blockquote > ul:only-child {
	padding-left: 1.2em;
}

.hidden {
	display: none;
}
	
.screen-reader-text {
     position: absolute;
     left: -1000rem;
}

a[href] img {
	border: none;
}

.loading {
	background-image:url(../images/loading);
	background-repeat:no-repeat;
	background-position:center center;
	min-height:64px;
}
/* End Various Tags & Classes*/

/* Begin Headers */
#logo {
	text-align:left;
	font-size:20pt;
	font-family:"Copperplate", "Lucida Grande", sans-serif;
	line-height:48px;
	min-height:48px;
	background-image:url(../images/logo);
	background-repeat:no-repeat;
	background-position:center left;
	padding-top:2px;
}

#logo > * {
	padding-left:54px;
	color:#555;
	text-decoration:none;
	cursor:default;
}

#logo > a[href] { cursor: pointer }

#banner {
	float:right;
	padding-top:2px;
}
/* End Headers */

pre {
	overflow:auto;
	border:1px solid #ddd;
	padding:0.2rem 0.4rem;
}

form.centered, p.centered {
	text-align:center;
}

table {
	border-collapse:collapse;
}

table.centered {
	display:table;
}

td, th {
	border:#ccc 1px solid;
	padding:0.5em 1em;
}

th {
	text-align:center;
}

td.list {
	vertical-align:text-top;
	padding:0 1.5em 0 0;
}