/*
The Watchmaker Project 3.0
Global CSS rules

Light blue: #dae5e3
Medium blue: #9fb1d5
Dark blue: #525c75
Brown: #855850
*/

* {
	margin: 0;
	padding: 0;
}

body, label, input, select, textarea {
	font: 100%/135% Tahoma, Arial, Helvetica, sans-serif;
	color: #333;
}

body {
	background: #fff url(../images/sky.jpg) repeat-x;
}

img, fieldset {
	border: 0 none;
}

acronym, abbr {
	border-bottom: 1px dashed;
	cursor: help;
}

h1, h2, h3, h4, h5, h6, p, pre, table, blockquote, ul, ol, dl, address {
	margin: 15px 0;
	font-size: 13px;
}

pre {
	background: #f7edeb;
	padding-left: 1em;
	overflow: auto;
}

ol {
	list-style: decimal;
}

a:link {
	color: #525c75;
	text-decoration: underline;
}

a:visited {
	color: #333;
	text-decoration: underline;
}

#main p a:visited {
	background: transparent url(../images/visited.png) no-repeat 100% 50%;
	padding-right: 15px;
}

a:hover, a:focus, a:active {
	background-color: #dae5e3;
}

#main {
	margin-top: 350px;
	position: relative;
	z-index: 1;
	padding-right: 14%;
	padding-left: 250px;
	min-height: 575px;
}

a#skiplink {
	position: absolute;
	top: -340px;
	left: -999px;
	font-size: 80%;
	color: #fff;
	font-weight: bold;
}

a#skiplink:hover, a#skiplink:focus, a#skiplink:active {
	left: 10px;
	background: transparent;
}

/* Extra wrapper div for IE to make the layout work - thanks Paul O'B! */
#iefix {
	width: 100%;
}

.home #main, .journal #main, .projects #main {
	padding-right: 33%;
}

.archive #main, .resources #main, .project #main, .list #main {
	padding-right: 0;
}

#second, #third, #older, #popular {
	width: 45%;
	float: left;
	border-top: 1px solid #dae5e3;
}

#third, #popular {
	float: right;
	padding-left: 1em;
}

/* No images in homepage extracts */
#first img, #second img, #third img {
	display: none;
}

#older {
	clear: left;
}

#popular {
	clear: right;
}

#second, #older {
	padding-right: 1em;
}

#main h1 {
	font: 36px "Gill Sans MT Light", "Gill Sans", "Century Gothic", Arial, Helvetica, sans-serif;
	color: #525c75;
}

#main h2, .search #main dl dt {
	font: 18px "Gill Sans MT Light", "Gill Sans", "Century Gothic", Arial, Helvetica, sans-serif;
	color: #525c75;
}

#main #first h2, .journal #main h2, .projects #main h2, .about #main h2, .category #main h2 {
	font-size: 24px;
}

.list #main h2 {
	font-size: 18px;
}

#main h3 {
	font-weight: bold;
	color: #525c75;
}

.home #main h3, .journal #main h3, .projects #main h3, .about #main h3 {
	font: 18px "Gill Sans MT Light", "Gill Sans", "Century Gothic", Arial, Helvetica, sans-serif;
	font-weight: normal;
}

#main p em {
	background: #ff9;
	font-weight: normal;
	font-style: normal;
}

#main p strong .search #main dl dt strong, .search #main dl dd strong {
	font-weight: bold;
}

ol.code {
	padding-left: 2em;
}

ol.code li, code {
	background: #f7edeb;
	margin-bottom: 5px;
	line-height: 130%;
}

a#lastfm img {
border: 0;
float: none;
margin: 0;
padding: 0;
}

p code {
	background: transparent;
	margin-bottom: 0;
	line-height: 135%;
}

#main img {
	float: right;
	margin: 0 0 33px 33px;
	border: 1px solid #dae5e3;
	padding: 3px;
}

#main blockquote {
	padding: 1px 1em;
	border: 1px solid #9fb1d5;
	border-left-width: 0;
	border-right-width: 0;
	background: #eee url(../images/bq-bg.gif) no-repeat right bottom;
}

div.mask {
	float: left;
	clear: left;
	height: 15px;
	position: relative;
}

#footer {
	clear: both;
	height: 150px;
	background: #333;
	color: #fff;
	text-align: center;
	padding-top: 15px;
}

#footer p a {
	color: #ffe;
}

#footer p a acronym {
	border: 0 none;
}

#footer p a:hover, #footer p a:focus {
	background-color: transparent;
	color: #ffc;
	text-decoration: none;
}

#header {
	width: 770px;
	position: absolute;
	top: 0;
	right: 0;
	height: 200px;
	background-image: url(../images/header-bg.png);
}

div.greenery {
	position: absolute;
	top: 350px;
	left: 0;
	width: 250px;
}

#bamboo {
	height: 584px;
	width: 413px;
	background: url(../images/bamboo.jpg);
}

#flower {
	height: 627px;
	width: 374px;
	background: url(../images/flower.jpg);
}

#sunflower {
	height: 398px;
	background: url(../images/sunflower.jpg);
}

#paradise {
	height: 266px;
	background: url(../images/paradise.jpg);
}

#rose {
	height: 284px;
	background: url(../images/rose.jpg);
}

a#logo {
	position: absolute;
	top: -143px;
	right: 74px;
	border: 0 none;
	background: url(../images/logo.png);
	width: 69px;
	height: 123px;
}

a#logo img {
	display: none;
}

/*
= SEARCH RESULTS */

.search #main dl dt {
	margin: 15px 0;
}

/* Suppress images in search results and category listings */

.search #main img, .category #main img {
	display: none;
}

/*
= LINKS WITH ICONS */

#main p.cats, #main p.technorati, #main p.delicious, #main p.digg, #main p.previous {
	float: right;
	clear: right;
	margin-top: 5px;
	margin-bottom: 0;
}

p.technorati {
	background: url(../images/technorati.gif) no-repeat 0 50%;
	padding-left: 23px;
}

p.delicious a {
	background: url(../images/delicious.gif) no-repeat 0 50%;
	padding-left: 23px;
	text-decoration: none;
}

p.delicious a:hover, p.delicious a:focus {
	background-color: transparent;
	text-decoration: underline;
}

p.digg {
	background: url(../images/digg.gif) no-repeat 0 50%;
	padding-left: 25px;
	text-decoration: none;
}

/*
= DATE BOX */

#date {
	padding-top: 16px;
	width: 75px;
	height: 84px;
	float: left;
	margin: 0 10px 5px 0;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	font: 12px "Gill Sans MT Light", "Gill Sans", "Century Gothic", Arial, Helvetica, sans-serif;
	overflow: hidden;
	background: url(../images/date-bg.gif);
	color: #fff;
}

#date span {
	display: block;
	font-size: 230%;
	margin-top: -3px;
}

/*
= SEARCH */

#search {
	position: absolute;
	top: 0;
	left: 24px;
	height: 128px;
	width: 235px;
}

#search h2 {
	margin: 0 4px;
	height: 25px;
	text-indent: -999em;
	background: url(../images/search-h2-bg.gif) no-repeat 0 3px;
}

#search form {
	margin-top: 15px;
	width: 220px;
}

#search form label {
	font-size: 13px;
	display: block;
	margin-left: 5px;
}

#search form input {
	width: 100%;
	display: block;
}

#search form button {
	margin-top: 5px;
	float: right;
}

/*
= LATEST COMMENTS */

#latest {
	position: absolute;
	top: 0;
	right: 241px;
	width: 242px;
	height: 128px;
	border-right: 10px solid #fff;
	border-left: 10px solid #fff;
}

#latest h2 {
	margin: 0 4px;
	height: 25px;
	text-indent: -999em;
	background: url(../images/latest-h2-bg.gif) no-repeat 0 3px;
}

#latest ul {
	list-style-type: none;
	padding-left: 45px;
	margin: -3px 4px 0 4px;
}

#latest ul li {
	font-size: 90%;
	line-height: 150%;
}

#latest ul li p {
	display: inline;
}

#latest ul li a {
	display: block;
}

#latest ul li span {
	float: right;
	display: block;
	margin-right: 2px;
	margin-top: -2px;
}

#latest ul li span a {
	display: inline;
}

#latest ul li img {
	position: relative;
	left: -44px;
	margin: 5px -42px 0 0;
	float: left;
	border: 1px solid #9fb1d5;
}

/*
= FLICKR STREAM */

#flickr {
	position: absolute;
	top: 0;
	right: 0;
	height: 128px;
	width: 237px;
}

#flickr h2 {
	margin: 0;
	height: 25px;
	text-indent: -999em;
	background: url(../images/flickr-h2-bg.gif) no-repeat 0 2px;
}

#flickr a img {
	border: 1px solid #525c75;
	padding: 2px;
	margin: -13px 20px 0 0;
	display: block;
	float: right;
}

#flickr a:hover img {
	border-color: #f401b8;
}

/*
= SIDEBAR */

#sidebar {
	position: absolute;
	right: 0;
	top: 350px;
	width: 250px;
	background: url(../images/sb-bg.gif) repeat-y 0 50px;
	z-index: 2;
}

#sidebar h2 {
	height: 100px;
	text-indent: -999em;
	background: url(../images/sb-h2-bg.gif) no-repeat 0 0;
	margin: 0;
}

#sidebar h3 {
	font: 18px "Gill Sans MT Light", "Gill Sans", "Century Gothic", Arial, Helvetica, sans-serif;
}

#sidebar h3, #sidebar dl {
	margin-left: 33px;
	clear: both;
}

#sidebar dl {
	margin-bottom: 50px;
}

#sidebar dl dt {
	font-weight: bold;
	margin-bottom: -15px;
}

#sidebar dl dd.c, #sidebar dl dd.p {
	float: left;
	margin-right: 10px;
}

#sidebar dl dd a:hover, #sidebar dl dd a:focus {
	text-decoration: none;
}

#sidebar img {
margin-top: 2em;
}

#sbb {
	height: 100px;
	background: url(../images/sbb-bg.gif);
}

#rss {
	display: block;
	background: #fff;
	margin: 0;
	margin-bottom: -1px;
	padding: 15px 0 15px 33px;
}

#rss h2 {
	text-indent: 0;
	margin: 15px 0;
	background-image: none;
	height: auto;
	font: 18px "Gill Sans MT Light", "Gill Sans", "Century Gothic", Arial, Helvetica, sans-serif;
}

#rss p {
	margin: 15px 4px 0 0;
}

#rss ul {
	list-style: none;
}

#rss ul li a {
	background: url(../images/xml.png) no-repeat 0 50%;
	padding-left: 31px;
}

#rss p.feedburner {
	text-align: center;
	font-size: 70%;
}

#rss p.feedburner a {
	display: block;
	margin: 0 auto;
	background: url(../images/fb_logo.gif);
	width: 150px;
	height: 27px;
	text-indent: -999em;
	text-decoration: none;
}

/*
= COMMENT FORM */

#comment-form {
	position: absolute;
	right: 0;
	bottom: 50px;
	width: 250px;
	background: url(../images/cf-bg.gif) repeat-y 0 50px;
	z-index: 2;
}

#comment-form p {
	margin-top: 0;
}

#comment-form p strong {
	margin-top: 33px;
	background: transparent;
	font-weight: bold;
}

#comment-form h2 {
	height: 50px;
	text-indent: -999em;
	background: url(../images/cf-h2-bg.gif);
	margin: 0;
}

#comment-form form {
	margin: 30px 10px 0 33px;
}

#comment-form legend {
	display: none;
}

#comment-form label, #comment-form span.check {
	display: block;
	font-size: 11px;
	margin-top: -15px;
	margin-bottom: 5px;
	position: static;
}

#comment-form label.first {
	margin-top: 10px;
}

#comment-form input {
	display: block;
	position: relative;
	top: -15px;
	left: 50px;

	width: 150px;
}

#comment-form span.check input {
	top: 17px;
	width: 15px;
	left: 150px;
}

#comment-form span {
	display: block;
	position: relative;
	width: 160px;
	left: 50px;
	top: -15px;
	font-size: 9px;
}

#comment-form textarea {
	width: 200px;
	height: 150px;
}

#comment-form input.button {
	width: 100px;
	position: static;
	float: right;
	cursor: pointer;
	border: 2px solid #fff;
	background: #525c75;
	color: #fff;
	font-size: 12px;
	height: 23px;
}

#cfb {
	height: 100px;
	background: url(../images/cfb-bg.gif);
}

/*
= COMMENTS */

div.comment {
	margin: 1em 0;
}

div.comment dl {
	border: 1px solid #dae5e3;
	position: relative;
	padding-bottom: 1em;
}

div.comment dl:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both;
	visibility: hidden;
}

div.comment dl.mgp {
	border-color: #9fb1d5;
}

div.comment dl dt {
	background: #dae5e3;
	font-weight: bold;
	padding: 0 5px;
}

div.comment dl.mgp dt {
	background: #9fb1d5 url(../images/mgp-bg.gif) no-repeat 100% 50%;
}

div.comment dl dt a, div.comment dl dt a:visited {
	text-decoration: none;
}

div.comment dl dt a:hover, div.comment dl dt a:focus {
	background: transparent;
	text-decoration: underline;
}

div.comment dl dd {
	padding: 0 5px;
}

/* Gravatar */
div.comment dd.g {
	float: right;
	margin: 2px 2px 5px 10px;
	width: 40px;
}

#main div.comment dd.g img {
	border: 0 none;
}

div.comment dd.t {
	position: absolute;
	bottom: 2px;
	right: 2px;
	font-size: 9px;
}

div.comment dd.n {
	position: absolute;
	top: -10px;
	left: -120px;
	text-align: right;
	letter-spacing: -1px;
	font: 2em "Gill Sans MT Light", "Gill Sans", "Century Gothic", Arial, Helvetica, sans-serif;	
	color: #eee;
}

div.comment dd.n a {
	color: #eee;
	text-decoration: none;
	font-size: 2.5em;
}

div.comment dd.n a:hover, div.comment dd.n a:focus {
	color: #dae5e3;
	background-color: transparent;
}

/*
= NAVIGATION */

ul#nav {
	list-style-type: none;
	height: 70px;
	margin: 0;
	padding-left: 68px;
	position: absolute;
	top: 129px;
	right: 0;
}

ul#nav li {
	float: left;
	display: block;
	height: 56px;
	text-indent: -999em;
}

ul#nav li a {
	display: block;
	height: 56px;
	text-decoration: none;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0 0;
}

ul#nav li a:hover, ul#nav li a:focus, .home ul#nav li.home a, .journal ul#nav li.journal a, .archive ul#nav li.archive a, .resources ul#nav li.resources a, .project ul#nav li.projects a, .projects ul#nav li.projects a, .about ul#nav li.about a, .contact ul#nav li.contact a {
	background-position: 0 -56px;
}

ul#nav li.home a {
	width: 81px;
	background-image: url(../images/home.gif);
}

ul#nav li.journal a {
	width: 102px;
	background-image: url(../images/journal.gif);
}

ul#nav li.archive a {
	width: 97px;
	background-image: url(../images/archive.gif);
}

ul#nav li.resources a {
	width: 120px;
	background-image: url(../images/resources.gif);
}

ul#nav li.projects a {
	width: 103px;
	background-image: url(../images/projects.gif);
}

ul#nav li.about a {
	width: 83px;
	background-image: url(../images/about.gif);
}

ul#nav li.contact a {
	width: 116px;
	background-image: url(../images/contact.gif);
}

/*
= ARCHIVES, RESOURCES */

.archive #main h1, .resources #main h1, .projects #main h1 {
	text-align: left;
	margin-bottom: 36px;
}

.project #main h1 {
	padding-left: 33px;
}

.archive #main h2, .resources #main h2, .list #main h2 {
	margin-bottom: 8px;
	float: left;
	clear: left;
	width: 150px;
	padding-right: 20px;
	margin-top: 7px;
}

.archive #main dl, .resources #main dl, .list #main dl {
	margin-top: 10px;
	float: left;
	padding-left: 0;
	width: 47%;
}

.archive #main dl dt, .resources #main dl dt, .list #main dl dt {
	line-height: 135%;
}

.archive #main dl dt, .list #main dl dt {
	font-weight: bold;
	font-size: 11px;
}

.archive #main dl dd, .resources #main dl dd, .list #main dl dd {
	margin-bottom: 8px;
	line-height: 135%;
}

.archive #main dl dd, .list #main dl dd {
	margin-left: 4em;
	margin-top: -1.3em;
	padding-bottom: 8px;
}

/*
= PROJECTS */

div.p {
	width: 250px;
	float: left;
	background: url(../images/p-bg.gif);
}

#main div.p h2 {
	margin: 0;
	padding: 80px 33px 0;
	text-align: center;
	height: 2em;
}

#main div.p h2.web {
	background: url(../images/p-h2-web-bg.gif) no-repeat;
}

#main div.p h2.film {
	background: url(../images/p-h2-film-bg.gif) no-repeat;
}

#main div.p h2.music {
	background: url(../images/p-h2-music-bg.gif) no-repeat;
}

#main div.p h2.writing {
	background: url(../images/p-h2-writing-bg.gif) no-repeat;
}

#main div.p p {
	margin: 1em 33px;
	padding: 0;
}

#main div.p p.pb {
	background: url(../images/pb-bg.gif);
	text-align: center;
	height: 60px;
	margin: 0;
	padding: 0 33px;
}

/*
= LINK PREVIEWS */

.pdf, .txt, .doc, .ppt, .xls, .zip, .amazon {
	width: 20px;
	padding-right: 20px;
	background: no-repeat right;
}

.pdf {
	background-image: url(/images/pdf.png);
}

.txt {
	background-image: url(/images/txt.png);
}

.doc {
	background-image: url(/images/doc.png);
}

.ppt {
	background-image: url(/images/ppt.png);
}

.xls {
	background-image: url(/images/xls.png);
}

.zip {
	width: 23px;
	padding-right: 23px;
	background-image: url(/images/zip.png);
}

.amazon {
	width:18px;
	padding-right: 18px;
	background-image: url(/images/amazon.gif);
}

/*
= CONTACT FORM */

form#contactform input, form#contactform textarea {
	position: relative;
	top: -1.4em;
	left: 8em;
	display: block;
	width: 30em;
}

form#contactform input:focus, form#contactform textarea:focus {
	background: #ffe;
	border-style: solid;
}

form#contactform strong {
	font-weight: normal;
}

form#contactform button {
	clear: both;
	top: 0;
	position: relative;
	top: -1em;
	left: 8em;
	display: block;
	float: left;
}

form#contactform label {
	clear: both;
	float: left;
	display: block;
	width: 10em;
	margin-top: -1em;
	font-size: 0.8em;
}

form#contactform label.first {
	margin-top: 1em;
}

/*
= ADSENSE & TEXT LINK ADS */

#tla {
position: absolute;
top: 1845px;
right: 0;
width: 250px;
}

.adsense {
position: absolute;
top: 0;
right: 20px;
}

#as2 {
top: 615px;
}

#as3 {
top: 1230px;
}

/*
= IE7 FIXES */

#main blockquote, div.comment {
	width: 100%;
}