/*
 Should it matter what the messenger resembles?
 Is it not the message we desire?
 */

body								{ background: #fff; border: 0px; color: #222;
									  font-family: verdana,geneva,sans-serif; font-size: 14px; 
									  line-height: 140%; padding: 0px; 
									  text-align: left; 
									  max-width: 80em; margin: 0px auto 0px auto; }
									  
table								{ font-size: 14px; }

a									{ color: #059; outline: none; text-decoration: none; }
a:hover								{ color: #c30; }
hr									{ width: 60%; height: 4px; margin: 30px auto 30px auto;
									  border: none; border-top: 1px dotted #888; clear: both; }
code								{ background: #eee; padding-left: 0.3em; padding-right: 0.3em; }

.posts								{ padding-left: 0px; }
.post								{ list-style-type: none; }

aside								{ font-size: 10px; line-height: 120%; margin: 20px 50px; color: #a0a0a0; }

/* Quotes, notes, and fancy blocks */
.admonition, blockquote,
#content dl							{ background: #DBE1EA none repeat scroll 0% 0%; border-left: 5px solid #B4C0D8;
									  margin: 2em 30px; padding: 0.5em 0.8em;
									  box-shadow: 4px 4px 5px #aaaabb; overflow: hidden; clear: both; }
.admonition-title					{ font-weight: bold; background: #C8D0DD; color: #789;
									  border-radius: 2px; padding: 2px 10px; margin: 0px -5px; }
.admonition blockquote				{ box-shadow: none; border-color: #D27E7E; padding: 0 1em; margin-left: 0px; }
blockquote							{ font-style: italic; }
blockquote em						{ font-weight: bold; }

#content dl							{ font-size: 13px; width: auto; margin: 1em 1em; clear: none; }
#content dt							{ float: left; clear: left; min-width: 100px; font-weight: bold; margin-right: 10px; }
#content dd							{ margin: 0 0 0 110px; padding: 0; }

#content table						{ margin-left: 2em; }
#content tr							{ border-spacing: 0px; }
#content td							{ padding: 8px; border-bottom: 1px solid #ddd; }
#byyear	td							{ border: none; }

/* Side bar */									  
#sidebar							{ float: left; overflow:hidden; max-width: 290px; padding: 4px;
									  margin: 20px 7px 0 20px; color: #444; }
#sidebar a							{ font-weight: bold; }
#sidebar ul							{ padding: 0px; }
#sidebar li							{ list-style-type: none; }
#sidebar > li						{ margin-bottom: 20px; }
#sidebar dt							{ margin-bottom: 0px; }
#sidebar dd							{ margin-left: 30px; margin-bottom: 10px; font-size: 13px; font-style: italic; }
#sidebar #follow li					{ display: inline-block; padding-left: 37px; padding-right: 20px; line-height: 28px;
									  margin-bottom: 6px; }
#sidebar #follow					{ border-bottom: 1px dotted #888; padding-bottom: 20px; }
#sidebar .rss						{ background: transparent url("rss.png") no-repeat scroll left center; }
#sidebar .twitter					{ background: transparent url("twitter.png") no-repeat scroll left center; }
#sidebar #recent li					{ text-align: right; margin-bottom: 10px; }
#sidebar #recent p					{ text-align: center; font-style: italic; font-size: 13px; border-top: 1px dotted #888; }

/* H2 is used for the sidebar section headers */
#sidebar #links h2,
#sidebar #follow h2					{ margin: 0 0 0 -9999px; width: 0; height: 0; }
#sidebar #recent h2					{ text-align: center; line-height: 18px; font-size: 13px; background: #fff; 
									  font-weight: normal; font-style: italic; font-family: verdana,geneva,sans-serif;
									  margin: -6px 1em 20px 1em; }

#header								{ margin: 20px; width: auto; height: 40px; line-height: 40px; text-align: center;
									  font-family: "Myriad Pro",Helvetica,Arial,sans-serif; font-size: 20px;
									  letter-spacing: 10px; color: #666; }

/* H2 is used for document titles, or anything big in the main content area */
h2, h3, #footer						{ clear: both; background: #eee; margin: 20px 0 20px 0; padding: 0px 5px 0px 5px;
									  font-family: "Myriad Pro",Helvetica,Arial,sans-serif; }
h2									{ font-size: 28px; line-height: 40px; font-weight: bold; margin-bottom: 15px; }
h2 .date							{ font-size: 18px; text-align: right; display: inline; float: right;
									  margin-left: 10px; }
h3									{ font-size: 20px; line-height: 30px; font-weight: bold; margin-bottom: 15px; }

#byyear	h3							{ font-size: 14px; font-weight: bold; }

#content							{ margin: 0px 20px 0px 335px; overflow: hidden; }

#trailer							{ margin-top: 40px; font-size: 13px; text-align: right; }
#trailer h3							{ font-size: 13px; font-weight: bold; padding: 0px; margin: 0px; }
#trailer p							{ padding: 0px; margin: 0px; }

#footer								{ clear: both; line-height: 30px; position: relative; top: 20px; }
#footer a							{ margin: 6px; color: #888; }
#footer a:hover						{ color: #c30; }

/* Code syntax highlighting. */
.codehilite pre						{ margin: 20px 20px; padding: 10px 20px; background: #eee; overflow: auto;
									  border-left: 5px solid #ccc; box-shadow: 4px 4px 5px #aaaabb; }

/* Images */
img, canvas, .caption				{ display: block; margin: 10px auto; clear: both; }
img, canvas							{ max-width: 90%; box-shadow: 4px 4px 5px #444; height: auto; }
img[src*='#left'], .left			{ float: left; margin: 0px 20px 10px 10px; max-width: none; }
img[src*='#right'], .right			{ float: right; margin: 0px 10px 10px 20px; max-width: none; }
img[src*='#thumb']					{ max-width: 300px; max-height: 300px; }

.caption							{ text-align: center; font-style: italic; font-size: 13px; color: #888; margin: 10px; }
.caption p							{ max-width: 400px; margin: 10px auto; padding: 10px; }
.caption img, .caption canvas		{ float: none; margin: 0 auto; }
.caption.left						{ float: left; margin-right: 20px; }
.caption.right						{ float: right; }

iframe								{ margin: 0px 10px 10px 10px; }

/* Mobile overrides, medium screen */
@media all and (max-width: 800px) {
#content #byyear td					{ display: block; }
#content #byyear					{ margin-left: 0px; }
#content #byyear ul					{ padding-left: 20px; }
img, iframe							{ float: none; margin: 10px auto; max-width: 90%; display: block; }
img[src*='#left'], .left			{ float: none; margin: 10px auto; max-width: 90%; }
img[src*='#right'], .right			{ float: none; margin: 10px auto; max-width: 90%; }
.caption							{ float: none; margin: 10px auto; max-width: 90%; }
.caption.left						{ float: none; }
.caption.right						{ float: none; }
.caption img						{ float: none; margin: 0 auto; max-width: 100%; }
h2									{ font-size: 18px; line-height: 28px; }
h2 .date							{ font-size: 14px; }
h3									{ font-size: 16px; line-height: 24px; }
}
/* Mobile overrides, phone screen */
@media all and (max-width: 640px) {
#content							{ clear: both; margin-left: 20px; margin-top: 6px; }
#recent								{ display: none; }
#sidebar							{ float: none; width: auto; margin: 0px 20px; max-width: 100%; }
#sidebar > li						{ margin-bottom: 0px; }
.admonition, blockquote,
#content dl							{ margin: 1em 5px 1em 0px; }
.posts, h2							{ margin-top: 0px; }
#links								{ text-align: center;}
#links dt							{ display: inline; white-space: nowrap; }
#links dt:after						{ content: " "; letter-spacing: 1em;
									  background: center center no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xMkMEa+wAAAAnSURBVBhXY/Dz89MA4sNA/B9Ka4AEYQIwfBgkiCwAxjhVopnppwEApxQqhnyQ+VkAAAAASUVORK5CYII=);
									  background-position: 50% 60%; }
#links dd							{ display: none; }
#follow								{ display: none; }
#header								{ margin: 10px; height: 20px; line-height: 20px; }
}