/* reset */

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
	fieldset, form, label, input, button, legend, table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none;
	}
	blockquote, q { quotes: none; }
	blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
	:focus { outline: 0; }


/* layout structure */

	html {
		font-size: 62.5%;
		height: 100%;
		background: url('../images/bg2.jpg') repeat;
	}

	body {
		background: url('../images/bg.jpg') repeat-x;
		margin: 0;
		height: 100%;
	}

	#main {
		background: url('../images/topright.png') top right no-repeat;
		position: relative;
		margin: 0 auto;
		width: 960px;
		height: 500px;
		padding-top: 80px;
	}

	#logo {
		display: block;
		width: 354px;
		height: 144px;
		background: url('../images/logo.png');
		margin-bottom: 100px;
	}

	#footer {
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		-opera-border-radius: 10px;
		-khtml-border-radius: 10px;
		border-radius: 10px;
		background: url('../images/px25.png') repeat;
		clear: both;
		margin: 3em 0;
		padding: .4em .6em;
	}

	#footerpic {
		width: 620px;
		height: 235px;
		background: url('../images/footer.png');
	}


/* navigation */

	#header {
		position: absolute;
		left: 0px;
		top: 20px;
		font-style: italic;
		font-size: 1.4em;
		color: #bbb;
	}

	#pages {
		position: absolute;
		right: 150px;
		top: 0px;
		font-size: 1.6em;
		font-style: italic;
	}

		#pages a {
			background: url('../images/divide.gif') no-repeat;
			display: block;
			height: 20px;
			padding: 20px;
		}

		#pages li {
			float: left;
			list-style-type: none;
		}
			#pages li:hover { background: url('../images/nav_hover.png'); }


/* global elements */

	pre code {
		display: block;
		padding: .5em .75em .35em;
		margin-bottom: 1em;
		font-size: 1.3em;
		-webkit-box-shadow: 2px 2px 12px rgba(0,0,0,0.8);
		-moz-box-shadow: 2px 2px 12px rgba(0,0,0,0.8);
		-opera-box-shadow: 2px 2px 12px rgba(0,0,0,0.8);
		-khtml-box-shadow: 2px 2px 12px rgba(0,0,0,0.8);
		box-shadow: 2px 2px 12px rgba(0,0,0,0.8);
	}

	ul, ol { margin: 0 0 0 2.5em; }
		ul li { list-style-type: none; }
		ol li { list-style-type: decimal; }

	.clear { clear: both; }
	.left { float: left; }
	.right { float: right; }


/* typography */

	body { font: normal 1.2em/1.6em 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif; }
	h1, h2, h3 { letter-spacing: -0.01em; font-weight: bold; font-family: "palatino linotype", palatino, georgia, "times new roman", times, serif; }
		h1 { font-size: 2.6em; margin-bottom: 1em; font-style: italic; }
		h2 { font-size: 2em; margin-bottom: .4em; }
		h3 { font-size: 1.7em; margin-bottom: .5em; }
		h4 { font-size: 1.5em; margin-bottom: .9em; }
		h5 { font-size: 1em; margin-bottom: 1em; }
		h6 { font-size: .8em; margin-bottom: 1.25em; }
	pre  { font-size: 1em; }
	code { font-family: monospace; }
	em { font-style: italic; }
	strong { font-weight: bold; }
	a:hover { text-decoration: underline }
	pre code { background: #333; }

	#logo h1 { display: none; }
	#pages a { text-shadow: #000 2px 2px 10px; }
		#pages a:hover { text-decoration: none; }
	#single h1 { color: #a12315; font-style: italic; }
	#sidebar h1 { font-size: 1.4em; font-style: normal; margin: 1em 0 .2em 0; }
	#sidebar ul a { padding: .1em .2em; }
		#sidebar ul a:hover { text-decoration: none; }

	.date { font-style: italic; font-size: 1.3em; }
		.date div { font-size: 1.8em; }

	.post h2 { padding: 0 0 .3em 0; margin: 0; }
		.post h2 a { font-size: .8em; font-style: normal; font-weight: bold; }

	#content p, #single p { font-size: 1.3em; padding: 0 0 1em; line-height: 1.5; }
	#content ul, #content ol, #single ul, #single ol { font-size: 1.3em; margin-bottom: 1em; }


/* colors */

	a { color: #610000; }
	body { color: #111; }
	h1 { color: #a12315; }
		h1 a:hover { color: #000; }
	h2 { color: #222; }
		h2 a { color: #222; }
		h2 a:hover { color: #000; }
	pre code { color: #fff; }

	#pages a { color: #fff; }
	#footer { color: #fff; }
	#sidebar h1 { color: #fff; }
	#sidebar ul a { color: #000; }
		#sidebar ul li { color: #a50; }
		#sidebar ul a:hover { color: #ddd; background-color: #111; }
	.date { color: #fff; }
	.info { color: #666; background: #111; }
		.info a { color: #bbb; }


/* page specific */

	#content {
		width: 640px;
		margin-left: 70px;
		float: left;
	}
		#content ul li, #single ul li { list-style-type: circle; margin: 0 0 0.5em 0; }

	#sidebar {
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		-opera-border-radius: 10px;
		-khtml-border-radius: 10px;
		border-radius: 10px;
		background: url('../images/px25.png') repeat;
		float: right;
		margin: 0 0 2em 0;
		padding: 1.5em 1em;
		width: 200px;
	}
		#sidebar ul li { list-style-type: square; }
		#sidebar p { padding: 1.5em 0 0; text-align: center; }

	.date {
		width: 40px;
		position: absolute;
		left: -70px;
		top: 0px;
		background: url('../images/px75.png') repeat top left;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		-opera-border-radius: 10px;
		-khtml-border-radius: 10px;
		border-radius: 10px;
		padding: .8em;
		text-align: center;
	}
		.date div { margin-bottom: 5px; }

	.post {
		position: relative;
		margin: 0 0 3em;
		word-wrap: break-word;
		background: url('../images/px25.png') repeat;
		padding: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		-opera-border-radius: 10px;
		-khtml-border-radius: 10px;
		border-radius: 10px;
	}
		.post img, .post object {
			display: block;
			margin: 0px auto;
			margin-bottom: 20px;
			-webkit-box-shadow: 2px 2px 12px rgba(0,0,0,0.8);
			-moz-box-shadow: 2px 2px 12px rgba(0,0,0,0.8);
			-opera-box-shadow: 2px 2px 12px rgba(0,0,0,0.8);
			-khtml-box-shadow: 2px 2px 12px rgba(0,0,0,0.8);
			box-shadow: 2px 2px 12px rgba(0,0,0,0.8);
		}
		.post img { border: .3em solid #111; }

	.gravatar {
		position: absolute;
		left: -50px;
		top: 10px;
	}
		.gravatar img {
			border: 3px solid #111;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			-opera-border-radius: 5px;
			-khtml-border-radius: 5px;
			border-radius: 5px;
		}

	.info {
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-opera-border-radius: 5px;
		-khtml-border-radius: 5px;
		border-radius: 5px;
		color: #666;
		float: right;
		padding: 0.2em;
		margin: .6em 0 0 0;
		-webkit-box-shadow: 2px 2px 12px rgba(0,0,0,0.8);
		-moz-box-shadow: 2px 2px 12px rgba(0,0,0,0.8);
		-opera-box-shadow: 2px 2px 12px rgba(0,0,0,0.8);
		-khtml-box-shadow: 2px 2px 12px rgba(0,0,0,0.8);
	}

	#code h2, #design h2 {
		border-bottom: 1px dotted #111;
		margin: 50px 0 30px;
	}

	#code {
		float: left;
		width: 540px;
	}
		#code .box { height: 130px; font-size: 0.9em; line-height: 1.7em; }
		#code .note { font-size: 1.5em; line-height: 1.6em; }
		#code p a { font-size: 1.4em; margin-right: 10px; }
		#code .info { color: #93ba52; margin-left: 5px; padding: 5px; }
		#code .info a { color: #d8583e; }
		#code img {
			float: left;
			margin: 0px 20px 10px 0;
			background: #fff;
			padding: 3px;
			border: 1px solid #333;
			margin-right: 20px;
		}

	#design {
		float: right;
		width: 400px;
	}

	#design img {
		border: 1px solid #333;
		padding: 3px;
		background: #fff;
		margin: 10px;
		-webkit-box-shadow: 2px 2px 12px rgba(0,0,0,0.8);
		-moz-box-shadow: 2px 2px 12px rgba(0,0,0,0.8);
		-opera-box-shadow: 2px 2px 12px rgba(0,0,0,0.8);
		-khtml-box-shadow: 2px 2px 12px rgba(0,0,0,0.8);
	}