/* blocks -------------- */

body {
	margin: 36px 72px;
	max-width: 900px;
	font: 14px/20px Helvetica Neue, Geneva, sans-serif;
	font-weight: light;
	color: #111;
	background-color: #f9f9f4;
	letter-spacing: .05em;
}

p { margin-top: .5em; }

/* TODO: move this to a div! */
p, ul, ol, li, blockquote, pre, dt, dd, h2, h3, h4, h5, h6 {
	max-width: 650px;
}
blockquote p, blockquote {
	max-width: 600px;
	margin-top: 0;
	margin-bottom: .5em;
	line-height: 1.15em;
}

pre { font-family: Helvetica Neue, Geneva, sans-serif; }

/* iPhone, Wii, etc... */
@media screen and (max-device-width: 900px) {
	body {
		margin: 2em 4em;
		font:16pt/20pt Helvetica Neue, Geneva, sans-serif;
	}
	p, ul, ol, li, blockquote, pre, dt, dd, h2, h3, h4, h5, h6 {
		max-width: 900px;
	}
	blockquote p, blockquote {
		max-width: 850px;
	}
}

/* links -------------- */

a:link, a:visited, a:active {
	color: #303b97;
	text-decoration: none;
	background-color: transparent;
}
a:active { background-color: #FD0; }
a.offsite {white-space: nowrap;}
a.offsite:hover {
	background-color: #d0dbe7;
	text-decoration: none;
	border-bottom: none;
}
a.offsite:hover:after {
	color: white;
}

@media screen {
	a.offsite:after {
		content: " \2708 ";
		color: #d0dbe7;
	}

	a[type="application/pdf"]:after {
		content: " [pdf]";
	}
}

a img { border: none; }

[id]:hover:after {
	content: " #" attr(id) " ";
	font-size: 75%;
	line-height: 75%;
	color: #ccc;
	text-decoration: none;
}

/* headings	-------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color: #333;
	background-color: transparent;
	margin: 1em 0 0 0;
	padding: 0;
	line-height: 1.15em;
	page-break-after: avoid;
	page-break-inside: avoid;
	letter-spacing: .01em;
}

h1 { font-size: 64px; margin-top: 48px; }
h2 { font-size: 26px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }

h1 + p {margin-top: .5em; }
h1 + .subtitle { margin-top: -8px; font-size: 90%; }
h1 + .navtop, h1 + .subtitle + .navtop {
	margin: 0 9pt 0 0;
	position: relative;
	top: -64pt;
	text-align: right;
	max-width: 900px;
	z-index: 5;
}
.navtop + .date {
	text-align: right;
	font-size: 90%;
}

/* feed button in sidebar */
h4 + .navtop {
	position: relative;
	top: -1.5em;
	text-align: right;
	margin: 0;
}

/* tables -------------- */

table.grid th {
	font-weight: normal;
	text-align: right;
	color: white;
	background-color: #333;
	padding: 3px 6px;
}

table.grid td {
	background-color: #d0dbe7;
	padding: 3px 6px;
}

/* lists -------------- */

ul {
	list-style-type: disc;
	margin: .5em 0;
	padding-left: 1.5em;
}
p + ul {
	margin: -.5em 0 .5em 0;
}

@media screen {
	ul { list-style-type: none; padding-left: 0; }
	ul li:before { content: '\22C6  '; color: #411; font-size: 1.3em; }
}

/* inline lists */
ul.inline { list-style-type: none; }
ul.inline li { display: inline; margin-right: 1em; white-space: nowrap}
ul.inline li:before { content: ''; }

/* sep lists */
ul.sep li {
	list-style: none;
	border-bottom: 1px #ccc dotted;
	padding: 4pt 6pt;
}
ul.sep li:last-of-type {
	border-bottom: none;
}
ul.sep li:before { content: ''; }

/* definition lists */
dt { font-weight: bold; }
dd { padding-bottom: .5em; }

/* other redefinitions -------------- */

@media screen {
	strike { text-decoration: none; }
	strike:after { content: "^H^H^H^H^H"; }
}

acronym:hover, abbrev:hover { cursor: help; }
abbrev[title], acronym[title], span[title] {
	border-bottom: thin dotted;
	cursor: help;
}

input[type='text'], textarea, select {
	border-color: black;
	border-style: solid;
	border-width: 1px;
	margin: 2px 1px;
	padding: 1px;
}

hr {
	border-style: none;
	background-color: #ddd;
	padding: 1px;
}

/* hack for apache directory listings */
h1 + pre hr { visibility: hidden; }

blockquote {
	border-style: solid;
	border-color: #d0dbe7;
	border-width: 0 0 0 .25em;
	padding-left: .5em;
}

q { quotes: '\201C' '\201D' '\2018' '\2019'; }
q:before {
	content: "\201C";
	content: open-quote;
	font-size: 1.5em;
}
q:after {
	content: "\201D";
	content: close-quote;
	font-size: 1.5em;
}

/* specialisations -------------- */

.hilite {
}

.intro {
	font-size: 125%;
	line-height: 125%;
	page-break-inside: avoid;
}

.intro a {
	font-weight: bolder;
}

h1+.intro {
	max-width: 100%;
}

.intro+h2, .intro+h3, .intro+h4 {
	margin-top: 2em;
}

.callout {
	width: 250px;
	font: 1.3em/1.3em Garamond, "Times New Roman", Times, serif;
	padding: 0 0 0 1em;
	border-left: #a30 solid .25em;
	page-break-inside: avoid;
}

.left {
	float: left;
	margin: .5em 2em .5em 0;
}

.right {
	float: right;
	margin: .5em 0 .5em 2em;
}

.ad1 { margin: 1em 0; }

.banner {
	margin: 2em 0;
	padding: 1em;
	background-color: #ececda;
	border-left: #a30 solid 1em;
}

.footnote {	 /* piddling detail */
	text-align: right;
	font-size: .9em;
	margin-top: 0px;
}

.button {	/* one of those little buttons that say I'm a good boy */
	text-align: right;
}

/* text-based button */
.textbutton, a.textbutton:link, a.textbutton:visited, a.textbutton:active, a.textbutton:hover {
	border:1px solid;
	border-color:#FC9 #630 #330 #F96;
	padding:0 3px;
	font:bold 10px verdana,sans-serif;
	color:#fff;
	background:#F60;
	text-decoration:none;
	margin:0;
}

p.navtop {
	font-family: arial, helvetica, sans-serif;
	font-size: .9em;
}

/* navigation banner at the bottom of the page */
p.navigation {
	font-family: arial, helvetica, sans-serif;
	font-weight: bold;
	color: #333;
	font-size: .9em;
	margin: 0 72px 0 0;
	padding: .25em 36px;
	background-color: #393934;
	text-align: right;
	opacity: .9;
	border-bottom: #999 solid 1px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	max-width: 900px;
	-webkit-border-bottom-right-radius: .5em;
	-moz-border-radius-bottomright: .5em;
	z-index: 10;
}

p.navigation a {
	margin-left: 1em;
	color: white;
}

p.navigation input[type=text] {
	margin-left: 2em;
}

.detail {
	font-size: .9em;
	page-break-inside: avoid;
}

.warning {
	background-color: #F60;
	border: #C30 solid 1px;
	padding: 3px;
	text-align: center;
}

.author {
	text-align: right;
	font-style: italic;
	font-size: .9em;
	margin: 0pt;
}

.version {	/* bottom right or in the top right header */
	text-align: right;
	font-style: italic;
	font-size: .9em;
	margin: 0pt;
	padding-top: 12px;
	color: #999;
}

.date { /* to the right of a headline */
	margin: .25em 0;
	text-align: right;
	font-weight: bold;
	border-bottom: 1px dotted #ddd;
	color: #777;
	font-size: .9em;
}

.date + * { margin-top: .1em;}

.example {
	font-family: monospace;
	font-size: .8em;
	background: #ececda;
	margin-left: 1em;
	margin-right: 2em;
	overflow: auto;
}

.spec {
	font-family: monospace;
	font-size: .9em;
	margin-left: 1.2em;
	margin-right: 1.2em;
	overflow: auto;
}

.story + .story { margin-top: 2em; }

/* images -------------- */

.image, .galsubtitle { text-align: center; }

.galimg img, .flickr_badge_image img, .image img, img.image {
	background-color: white;
	padding: 8px 8px 10px 8px;
	border: solid 1px #bbb;
	margin: 7px;
}

.galimg a:hover img, .flickr_badge_image a:hover img {
	border-style: inset;
	border-color: blue;
	border-width: 1px;
}

.galimg a:hover, .flickr_badge_image a:hover { background-color: transparent; }
.galimg:hover:after, div:hover:after { display: none; }

/* for /personal/ */
.image[align=left] { margin-right: 24px; }
.image[align=left] + h2 { margin-top: 0; }

/* delicious badges */

.save-to-link { display: none } 
.delicious-blogbadge-line { text-align: right; max-width: 600px; } 
.empty-message { display: none }

/* print -------------- */

@media print {
	#main { width: 100%; }
	#sidebar { display: none; }
	body {
		margin: 18pt 36pt 18pt 36pt;
		max-width: 100%;
		font: 8pt/10pt Palatino Linotype, palatino, Book Antiqua, serif;
	}
	h1 { font-size: 24pt; }
	h2 { font-size: 18pt; }
	h3 { font-size: 14pt; }
	h4 { font-size: 12pt; }
	h5 { font-size: 10pt; }
	h1, h2, h3, h4, h5 { 
		margin-top: .5em;
		page-break-after: avoid; 
	}
	form, .navtop, .navigation, a.textbutton, .imgnav, .ad1 {
		display: none;
	}
	iframe[name='google_ads_frame'], a[href^='http://pagead2.googlesyndication.com'] {
		display: none;
	}
}