/**
 * The Watchmaker Project
 * by Matthew Pennell
 *
 * Version 4.0
 * 
 * Created: 27/12/08
 * Modified: 21/08/10
 */

/**
 * Colours:
 *
 * Dark brown	#1a0b07
 * Light brown	#362416
 * Dark blue	#1f3447
 * Light blue	#6d8ead
 * Cream		#cfcdb4
 */

/* @group Global Reset (YUI reset.css) */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}

/* @end */

/* @group Basic Elements */

body {
	background: #1a0b07;
	color: #fff;
	font: 12px/1.5 "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}

body.ie {
	font-size: 80%;
}

a:link, a:visited {
	color: #6d8ead;
	text-decoration: underline;
}

a:hover, a:focus {
	background: #6d8ead;
	color: #fff;
	text-decoration: none;
}

/* @end */

/* @group Layout */

.inner {
	width: 918px; /* 12 columns of 60px with gutters of 18px */
	margin: 0 auto;
}

#navigation {
	background: url(../i/navigation.gif) repeat-x 0 100%;
	overflow: hidden;
	height: 4.5em;
}

#header {
	background: #1f3447 url(../i/header.gif) repeat-x 0 100%;
	position: relative;
}

#pagehead {
	color: #cfcdb4;
	font-size: 1.167em;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	text-shadow: #000 0 1px 1px;
	background: url(../i/pagehead.gif) no-repeat 50% 0;
	text-align: center;
	padding: 1.286em 0;
}

#article, #comment-form {
	position: relative;
	background: #fff;
	width: 954px;
	margin: 0 auto;
	overflow: hidden;
	color: #000;
}

.about #article, .contact #article, .category #article, .tag #article, .archives #article, .search #article, .error #article {
	margin-bottom: 3em;
}

#content {
	margin-left: 468px;
	min-height: 12em;
}

#footer {
	clear: both;
	background: #362416 url(../i/footer.gif) repeat-x 0 0;
	padding-top: 2px;
}

#header .inner, #footer .inner {
	position: relative;
}

/* @end */

/* @group Typography */

#navigation a, #twitter blockquote, #pagehead, #article h1, .home #article h3, #second-row h2, #third-row h2, #footer h2, #content h2, #content h3, #content h4, #quotes blockquote p, #comment-form h2, #comment-form label, #no_comments, #archives h2, #archives h3, #archives h4 {
	font-family: Georgia, Times, "Times New Roman", serif;
}

#article h1, .home #article h3, #content h2, #content h3, #content h4, #comment-form h2, #archives h2, #archives h3, #archives h4 {
	font-family: "OFL Sorts Mill Goudy TT";
}

#content h2, #archives h2 {
	font-size: 1.833em;
	line-height: 0.818em;
	margin: 1.636em 0 0.818em;
}

#content h3, #archives h3, #archives h4 {
	font-size: 1.5em;
	line-height: 1em;
	margin: 2em 0 1em;
}

#content h4 {
	font-size: 1.333em;
	line-height: 1.125;
	margin: 1em 0 0.125em;
}

#content #meta + p, .home #content p, #content h1 + p {
	font-size: 1.167em;
	line-height: 1.714; /* 24px line-height, matches the default every 4 lines */
}

#content #meta + p, #content h1 + p {
	border-bottom: 1px solid #ccc;
	margin-bottom: 0.857em;
	padding-bottom: 0.857em;
}

#content #meta + p:first-letter, .home #content h3 + p:first-letter, #content h1 + p:first-letter {
	font-family: Georgia, Times, "Times New Roman", serif;
	float: left;
	font-size: 3.429em;
	margin: 0.2em 6px 0 0;
}

#content p + p, #comments p + p, #tumblr p + p {
	text-indent: 30px; /* Indent for good browsers */
}

#content h2 + img + p, #content h3 + img + p {
	text-indent: 0; /* Fix incorrect indent where an image appears right after a heading */
}

#content ul, #content ol, .ie #content p, pre.code {
	margin: 1.5em 0; /* Spacing for IE */
}

#content q, #content em {
	display: inline;
	font-style: italic;
}

pre.code {
	color: #666;
}

#content ol {
	list-style: decimal;
}

#content ul {
	list-style: disc;
}

#content form ol {
	list-style: none;
}

#content ol li {
	margin-left: 1.5em;
}

#content form ol li {
	margin-left: 0;
}

#content blockquote {
	margin: 0.643em 1.286em;
	padding: 0.643em 0;
	color: #808080;
	font-size: 1.167em;
	line-height: 1.286;
	font-style: italic;
	border: 1px solid #ccc;
	border-width: 1px 0;
}

.ie #comments p {
	margin-bottom: 1.5em;
}

#content strong {
	font-weight: bold;
}

#content p.no-indent {
	text-indent: 0;
}

a.reversed {
	background: #1f3447 url(../i/arrow.gif) no-repeat 100%;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	padding: 0.5em 24px 0.5em 0.5em;
}

a.reversed i {
	font-weight: normal;
	text-transform: lowercase;
}

p.caption {
	font-size: 0.833em;
	line-height: 1.8;
	color: #808080;
	position: absolute;
	left: 18px;
	top: 472px;
}

.contact p.caption {
	top: 306px;
}

/* Yeah, I stole this rule from A List Apart. Want to make something of it? */
.linewrap {
	color: #c60;
	font-size: 14px;
	font-weight: bold;
}

/* and this one is from webtypography.net */
abbr, acronym, .caps {
	border-bottom: 0 none;
	font-style: normal;
	font-variant: small-caps;
	letter-spacing: 0.1em;
	text-transform: lowercase;
}

/* About page badges */
#badges {
	line-height: 3em;
	font-size: 1.5em ;
	color: #444;
}

/* This idea stolen from http://readernaut.com/about/ */
#badges a img {
	vertical-align: middle;
	height: 40px;
	border: 1px solid #eee;
}

#badges a:hover img {
	border-color: #ccc;
}

#badges img.noborder {
	border: 0;
}

#date abbr {
	font-variant: normal;
	text-transform: uppercase;
}

.hilite {
	background: #ff0;
}

/* @end */

/* @group Navigation */

#navigation ul {
	margin-left: -0.75em;
}

#navigation li {
	float: left;
	margin: 1.5em 0 1.5em 0.75em;
	border-right: 1px solid #cfcdb4;
}

#navigation li:last-child {
	border-right: 0;
}

#navigation a {
	color: #cfcdb4;
	padding-right: 0.75em;
	text-decoration: none;
	text-transform: uppercase;
}

.home #navigation .home a, .blog #navigation .blog a, .archives #navigation .archives a, 
.about #navigation .about a, .contact #navigation .contact a, #navigation a:hover, #navigation a:focus {
	color: #fff;
}

#navigation a:hover, #navigation a:focus {
	text-decoration: underline;
	background: none;
}

/* @end */

/* @group Header */

#header h1, .h1 {
	width: 420px;
	height: 27px;
	background: url(../i/twp.gif);
	text-indent: -999em;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -14px;
}

#header h1 a, .h1 a {
	display: block;
	height: 100%;
	background: transparent !important;
}

#twitter {
	margin-left: 528px;
	width: 390px;
	position: relative;
}

#twitter blockquote {
	position: relative;
	top: -19px;
	width: 330px;
	background: #c7ccd1 url(../i/twitter-top.gif) no-repeat 0 0;
	padding: 3em 0 0;
	
}

#twitter p {
	background: url(../i/twitter-bot.gif) no-repeat 0 100%;
	font-size: 1.5em;
	font-style: italic;
	line-height: 2;
	color: #1f3447;
	padding: 0 18px 4em;
	min-height: 4.5em;
	_height: 4.5em;
}

#twitter .time {
	font-size: 0.833em;
	line-height: 1.8;
	color: #6d8ead;
	position: relative;
	top: -4.8em;
	left: 96px;
}

#twitter img {
	position: absolute;
	bottom: 2px;
	right: 0;
}

/* @end */

/* @group Entries */

#article_image {
	float: left;
	margin: 18px 0;
	border: 1px solid #6d8ead;
	padding: 1px;
	width: 448px;
}

.about #article_image {
	margin-bottom: 0;
}

.search #article_image {
	width: 370px;
}

#date, .date {
	position: absolute;
	left: 9px;
	top: 9px;
	background: #000;
	color: #fff;
	padding: 1em 0;
	width: 60px;
	text-align: center;
	text-transform: uppercase;
}

.date {
	position: relative;
	left: -78px;
	top: -4.5em;
	margin-bottom: -7.5em;
}

.tumblr #date {
	left: 408px;
}

#date span, .date span {
	font-size: 3em;
	line-height: 1;
}

#article h1, .home #article h3 {
	font-size: 2.5em;
	line-height: 1.2;
	margin: 0 0 0.6em;
	padding-top: 0.6em;
}

#meta {
	position: absolute;
	left: 18px;
	top: 23em;
	background: url(../i/meta.gif) no-repeat 0;
	padding-left: 1.5em;
	color: #362416;
	font-size: 0.917em;
	line-height: 1.636;
	width: 450px;
}

#meta dt {
	float: left;
}

#meta dd {
	float: right;
	width: 372px;
}

#meta dt {
	clear: both;
	width: 78px;
	font-style: italic;
}

.blog #article, .tumblr #article {
	margin-bottom: 1.5em;
	padding-bottom: 1.5em;
}

#comment-form {
	margin-bottom: 3em;
	overflow: visible;
	min-height: 39em;
	margin-top: 1.5em;
}

.ie #comment-form {
	height: 39em;
}

#offset {
	position: relative;
	top: -13.5em;
}

#comment-form .intro {
	width: 372px;
	font-size: 0.833em;
	line-height: 1.8;
	color: #362416;
}

#comment-form form {
	width: 372px;
	background: #cfcdb4 url(../i/comment-form.gif) no-repeat 0 100%;
	margin-top: 1.5em;
	float: left;
	position: relative;
	padding-bottom: 6em;
}

#comment-form h2 {
	background: #cfcdb4 url(../i/comment-form-h2.gif) no-repeat 0 0;
	font-size: 1.167em;
	line-height: 1.286;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 18px;
	color: #362416;
}

#comment_form ol {
	margin-top: 1.5em;
}

#comment-form li {
	margin: 0 0 1.5em 18px;
	width: 336px;
}

#comment-form label {
	color: #362416;
	width: 120px;
	float: left;
	margin-right: 18px;
}

#comment-form input {
	background: none;
	border: 0;
	font-size: 1.167em;
	line-height: 1.286;
	width: 198px;
	_width: 190px;
	font-family: Consolas, "Lucida Console", Monaco, monospace;
	border-bottom: 1px dashed #362416;
}

#comment-form textarea {
	clear: left;
	width: 334px;
	_width: 328px;
	margin-top: 1.5em;
	height: 13.5em;
}

.ie #comment-form textarea {
	position: relative;
	left: -18px;
}

*:first-child + html #comment-form textarea {
	position: relative;
	left: -18px;
}

#comment-form .check input {
	float: right;
	clear: right;
	width: auto;
	border: 0;
}

#comment-form .check label {
	float: right;
	width: auto;
}

#comment-form button {
	background: url(../i/add-comment.gif);
	width: 101px;
	height: 24px;
	position: absolute;
	right: 16px;
	bottom: 18px;
	border: 0;
	text-indent: -999em;
	cursor: pointer;
	cursor: hand;
}

#comments {
	margin-left: 387px;
	position: relative;
	top: -1.5em;
}

#comments li {
	margin: 0 0 3em;
	overflow: hidden;
	width: 528px;
}

#comments img {
	float: left;
	background: url(../i/gravatar.gif);
	padding: 7px 9px 11px;
}

#comments h4, #comments blockquote {
	margin-left: 81px;
}

#comments h4 {
	font-size: 0.917em;
	font-weight: bold;
}

#comments h4 strong {
	font-size: 1.273em;
	line-height: 1.286;
	font-weight: bold;
}

li#no_comments {
	font-size: 2em;
	line-height: 1.5;
	color: #808080;
	padding-left: 78px;
	width: 450px;
	background: url(../i/finger.gif) no-repeat 0 0;
}

.audio, .download, .github, .update {
	background: #e8e8e1;
	margin: 1.5em 0;
	padding: 1.5em;
	overflow: hidden;
}

.video {
	margin: 1.5em 0;
}

.download {
	background: #e8e8e1 url(../i/zip.gif) no-repeat 1.5em;
}

.github {
	background: #e8e8e1 url(../i/git.gif) no-repeat 1.5em;
}

.update {
	background: #fff url(../i/update.gif) no-repeat 0 0;
	padding: 0 0 0 78px;
	min-height: 60px;
	color: #666;
}

#content .audio h3 {
	margin: 0 0 1em;
}

#content .download h3, #content .github h3 {
	margin: 0;
}

#content .download a, #content .github a {
	display: block;
	padding: 1em 0 1em 78px;
	background: none;
	color: #6d8ead;
}

#content .github a {
	padding-left: 138px;
}

.gist {
	margin:  1.5em 0;
}

/* @group Images */

.col {
	position: absolute;
}

div.col {
	border: 1px solid #ccc;
	padding: 3px;
	font-size: 0.833em;
	color: #999;
}

.col img {
	display: block;
	margin-bottom: 3px;
}

.three {
	margin-left: -234px;
	width: 216px;
}

.three img {
	width: 216px;
}

.four {
	margin-left: -312px;
	width: 286px;
}

.four img {
	width: 286px;
}

.five {
	margin-left: -390px;
	width: 372px;
}

.five img {
	width: 372px;
}

.six {
	margin-left: -468px;
	width: 442px;
}

.six img {
	width: 442px;
}

/* @end */

/* @end */

/* @group Contact Form */

#contact-form li {
	margin-bottom: 1.5em;
	float: left;
	width: 100%;
}

#contact-form label, #contact-form input, #contact-form textarea {
	float: left;
	width: 284px;
	border: 1px solid #808080;
	padding: 2px;
}

#contact-form label {
	width: 138px;
	margin-right: 18px;
	border: 0;
}

#contact-form div {
	text-align: right;
	margin: 1.5em 0;
}

/* @end */

/* @group Archives */

#archives h2, #archives h3, #archives h4 {
	float: left;
	width: 138px;
	margin-right: 18px;
	margin-top: 0;
	clear: left;
}

#archives ul {
	float: left;
	width: 762px;
}

#archives ul ul {
	width: 606px;
}

#archives ul ul ul {
	width: 450px;
	margin-bottom: 1.5em;
}

/* @end */

/* @group Footer */

#footer .inner {
	background: url(../i/footer-inner.gif) repeat-y 50%;
}

.blog #footer .inner {
	background: url(../i/footer-blog.gif) repeat-y 50%;
}

#footer h2 {
	font-size: 1.167em;
	line-height: 1.286;
	color: #cfcdb4;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	position: relative;
}

#credits h2 {
	margin-bottom: 1.286em;
}

h2 .amp {
	font-family: Baskerville, Palatino, "Book Antiqua", serif; /* Thanks, Dan! */
	font-style: italic;
	font-size: 2em;
	line-height: 0.75;
	position: relative;
	top: 3px;
}

#footer h2 i {
	text-transform: lowercase;
}

#tumblr {
	width: 294px;
	padding-right: 10px;
	float: left;
}

#video, #quotes, #copyright {
	width: 294px;
	margin-left: 304px;
	padding: 0 8px 1.5em;
	background: url(../i/video.gif) repeat-x 0 100%;
}

.blog #tumblr, .blog #copyright {
	width: 606px;
	padding-right: 8px;
	padding-bottom: 1.5em;
	margin-bottom: 1.5em;
	background: url(../i/video.gif) repeat-x 0 100%;
}

.blog #copyright {
	margin-left: 0;
	padding-left: 0;
	background: none;
}

#quotes {
	padding-top: 1.5em;
}

#copyright {
	background: none;
	color: #cfcdb4;
	font-size: 0.833em;
	line-height: 1.8;
	padding-top: 1.8em;
}

#copyright address {
	display: inline;
}

#copyright a {
	color: #cfcdb4;
	text-decoration: none;
}

#copyright a:hover, #copyright a:focus {
	color: #cfcdb4;
	text-decoration: underline;
	background: none;
}

#right {
	position: absolute;
	right: 0;
	top: 0;
	width: 302px;
	padding-left: 2px;
}

#feeds, #credits, #search {
	padding: 0 0 1.5em 8px;
	background: url(../i/video.gif) repeat-x 0 100%;
}

#search h2 {
	padding: 1.5em 0;
}

#credits {
	background: none;
	padding-top: 1.5em;
}

#tumblr h2, #video h2, #quotes h2, #feeds h2 {
	background: no-repeat 0;
	padding-left: 78px;
	position: relative;
}

#tumblr h2 {
	background-image: url(../i/tumblr-h2.gif);
	line-height: 70px;
	height: 70px;
	margin-left: -8px;
	top: -12px;
}

.blog #tumblr h2 {
	background-image: url(../i/related-h2.gif);
	line-height: 73px;
	height: 73px;
	margin-left: -5px;
	top: -19px;
}

#video h2 {
	background-image: url(../i/video-h2.gif);
	line-height: 75px;
	height: 75px;
	margin-left: -7px;
	top: -17px;
}

#quotes h2 {
	background-image: url(../i/quotes-h2.gif);
	background-position: 10px 0;
	line-height: 82px;
	height: 82px;
}

#feeds h2 {
	background-image: url(../i/feeds-h2.gif);
	line-height: 74px;
	height: 74px;
	margin-left: -7px;
	top: -16px;
}

#tumblr li, #video li, #quotes li, #feeds p, #credits p {
	margin-bottom: 1.5em;
}

#tumblr li:last-child, #video li:last-child, #quotes li:last-child {
	margin-bottom: 0;
}

#tumblr h3 {
	text-transform: uppercase;
	font-size: 0.833em;
	color: #cfcdb4;
	font-weight: bold;
	line-height: 1.8;
	letter-spacing: 0.1em;
}

#tumblr .permalink {
	color: #cfcdb4;
	text-decoration: none;
}

#tumblr p {
	font-size: 0.917em;
	line-height: 1.636;
}

#quotes blockquote p {
	font-style: italic;
	font-size: 1.5em;
	line-height: 1;
}

#feeds li {
	padding-left: 1.5em;
	background: url(../i/rss.gif) no-repeat 0;
}

/* @end */

/* @group Homepage */

.home #content, .category #content, .tag #content, .about #content, .archives #content, .search #content, .error #content {
	padding-bottom: 3.75em;
}

.home #article h3 a {
	color: #000;
	text-decoration: none;
	background: none;
}

.home #article a.reversed {
	position: absolute;
	right: 9px;
	bottom: 9px;
}

#second-row {
	background: url(../i/second-row.gif) no-repeat 50% 100%;
	color: #000;
	width: 100%;
	margin: 3em auto 0;
	padding-bottom: 1.5em;
	float: left;
	position: relative;
}

#previously, #commenters, #about {
	width: 294px;
	float: left;
	display: inline;
	padding-top: 1.5em;
}

#previously, #commenters {
	padding-right: 18px;
}

#previously {
	background: url(../i/previously.gif) no-repeat 100% 0;
}

#commenters {
	background: url(../i/commenters.gif) no-repeat 100% 0;
	min-height: 180px;
	_height: 180px;
}

#second-row h2 {
	background: #e7e6da;
	display: inline;
	margin-left: 78px;
	text-transform: uppercase;
	font-size: 1.167em;
	line-height: 1.286;
	letter-spacing: 0.25em;
	padding: 0.25em 20px;
}

#previously dt {
	float: left;
	clear: left;
	width: 60px;
	margin-top: 1.5em;
	margin-right: 18px;
	text-transform: uppercase;
}

#previously dd {
	float: left;
	margin-top: 1.5em;
	width: 216px;
}

#previously a.reversed {
	clear: left;
	float: left;
	margin: 1.5em 0 0 78px;
}

#commenters li {
	margin-top: 1.5em;
	clear: left;
	overflow: hidden;
}

#commenters img {
	float: left;
	border: 6px solid #fff;
	margin-right: 18px;
}

#commenters blockquote {
	float: left;
	width: 216px;
}

#commenters blockquote p {
	display: inline;
}

#commenters .cite {
	display: block;
	font-size: 0.833em;
	line-height: 1.8;
}

#about h2 {
	margin-left: 0;
	height: 21px;
	overflow: hidden;
}

#about img {
	float: right;
	margin: -1.75em -38px 0 0;
}

*:first-child + html #about img {
	margin: -3.24em -39px 0 0;
}

#about p {
	margin-top: 1.5em;
}

#about a.url {
	color: inherit;
	text-decoration: none;
}

#last-fm, #reading, #flickr, #recommending {
	width: 216px;
	margin-right: 18px;
	float: left;
}

#recommending {
	margin-right: 0;
}

#third-row {
	background: url(../i/third-row.gif) no-repeat 50% 0;
	overflow: hidden;
	margin-bottom: 1.5em;
	clear: left;
}

#third-row h2 {
	color: #cfcdb4;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	text-shadow: #000 0 1px 1px;
	text-align: center;
	padding: 1.5em 0;
}

#third-row h2 a {
	color: #cfcdb4;
	text-decoration: none;
	margin-bottom: 0;
}

#third-row h2 a:hover, #third-row h2 a:focus {
	background: transparent;
	color: #fff;
}

#last-fm .album {
	background: #362416;
	padding: 6px 6px 0.75em;
	margin-bottom: 0.75em;
}

#last-fm .album img {
	width: 204px;
	display: block;
	margin-bottom: 4px;
}

#last-fm li a {
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	display: block;
}

#last-fm li span {
	color: #fff;
	font-size: 0.833em;
	line-height: 1.8;
	text-transform: capitalize;
}

#reading a {
	margin-bottom: 1.5em;
	display: block;
	text-align: center;
	background: transparent;
}

#flickr li {
	text-align: center;
	background: #362416;
	padding: 6px;
	margin-bottom: 1.5em;
}

#flickr img {
	width: 204px;
	display: block;
}

#recommending a {
	margin-bottom: 1.5em;
	background: none;
	display: block;
}

#recommending img, #reading img {
	border: 6px solid #362416;
	display: block;
	margin: 0 auto;
}

#reading img {
	margin-bottom: 1.5em;
}

#reading a img {
	margin-bottom: 4px;
}

/* @end */