/* Colors:
#333333 - general text, most headers
#665A52 - img borders, some headers
#F9F8F4 - subtle cream background
#EBE8DA - darker cream background, for highlighted areas
#59483A - rich brown for navigation
#00824B - Link green
#6CA687 - exhausted link green
#B3E38D - active link green
*/
/* Reset Styles - Eric Meyer's Reset Reloaded 
--------------------------------------------------------------------*/
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,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: #FFF;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}


/* Fundamental Styles
--------------------------------------------------------------------*/
body {
        background: #F9F8F4;
        color: #333333;
        font-size: 87.5%;
        font-family: Georgia, Cambria, Palatino, serif;
}

/* Vertical rhythm - 21px */
html>body { 
        font-size: 14px;
}

p { 
        line-height: 1.5em;
        margin: 0;
        text-indent: 1.5em;
}

p.verse { 
        font-style: italic;
        margin: 1.5em 6em 1.5em 6em;
        text-indent: 0;
}

p.dialogue { 
        margin: 1.5em 3em 1.5em 3em;
        text-indent: 0;
}

p.epigram { 
        padding: 0 1.5em 0 1.5em;
}

p.attribution { 
        padding: 0 1.5em 0 1.5em;
        text-indent: 0;
        text-align: right;
}

span.firstline { 
/*        font-variant: small-caps;*/
}

/* 4/5 incremental leading here - tricksy maths! */
p.sidenote { 
        font-size: 0.7857em; /*11px*/
        line-height: 1.5273em;
        width: 10.5444em; /*8em*/
        position: absolute;
        padding-left: 45.8190em; /*36em*/
        margin: 2.1163em 0 1.9091em 0;
        text-indent: 0;
}

p.footnote { 
        font-size: 0.7857em;
        line-height: 1.9091em;
        text-align: center;
}

pre { 
        font-family: monospace;
	font-size: 0.7857em;
}

code { 
        display: block;
        margin: 1.5em 0 1.5em 0;
        background-color: #666361;
	color: #FFF;
	overflow: auto;
}

h1 { 
        font-size: 1.5em;
        line-height: 1em;
        margin: 1em 0 1em 0;
}

h2 { 
        font-size: 1.3571em;
        line-height: 1.1053em;
        margin: 1.1053em 0 1.1053em 0;
}

h3 { 
        font-size: 1.2143em;
        line-height: 1.2353em;
        margin: 1.2353em 0 0 0;
}

em { 
        font-style: italic;
}

hr { 
        height: 1.5em;
        border: 0;
}

div.section { 
        margin: 1.5em 0 0 0;
}

ul, ol {
        margin: 1.5em 1.5em 1.5em 1.5em;
        line-height: 1.5em;
        padding: 0;
}

ul { 
        list-style: none;
}

ul li { 
        background: transparent url(brownbullet.png) no-repeat .68em .68em;
        padding: 0 0 0 1.5em;
}

#contents ol {
	    list-style: none;
}

table { 
        line-height: 1.5em;
}

a:link { 
        color: #00824B;
}

a:visited { 
        color: #6CA687;
}

a:hover { 
        text-decoration: none;
}

a:active { 
        color: #B3E38D;
}

form { 
        line-height: 1.5em;
}

input, select, textarea { 
        background: none #FFF;
        border: none;
        font-family: "Lucida Grande", "Verdana", "Sans Serif";
/*        font-family: Georgia, Cambria, Palatino, serif;
        color: #333;*/
        font-size: 1em;
        line-height: 1.5em;
}

.button { 
        background: none #6CA687;
        color: #FFF;        
}

.button:hover { 
        background: #00824B;
}

.button:active { 
        background: #B3E38D;
        color: #665A52;
}

p.textimage { 
        margin: 1.5em 0 1.5em 0;
        line-height: 105px;
        text-align: center;
        text-indent: 0;
}

p.textimage img { 
        vertical-align: middle;
}

img.thumb { 
        margin: 0 9px 0 9px;
        padding: 2px;
        background: none #665A52;
}

a img.thumb:hover { 
        background: none #00824B;
}

img.thumb:active { 
        background: none #B3E38D;
}

/* Site stuff
--------------------------------------------------------------------*/
#siteheader, #sitefooter {
        background: #59483A none;
        color: #FFF;
        font-family: "Lucida Grande", "Verdana", "Sans Serif";
}

.navigation { 
        width: 60.715em;
        margin: 0 auto 0 auto;
}

#siteheader h1 { 
        color: #B3E38D;
        margin: 0;
        float: left;
        font-size: 1em;
        line-height: 2.25em;
}

#siteheader ul {
        text-align: right;
        font-size: 0.8571em;
        margin: 0;
        line-height: 2.6252em;
}

#siteheader li {
        display: inline;
        padding-left: 2em;
        background: none;
}

#siteheader a, #sitefooter a {
        color: #B3E38D;
        text-decoration: none;
}

#siteheader a:hover, #sitefooter a:hover {
        color: #FFF;
}

#sitebody {
        width: 60.715em;
        margin: 3.75em auto 4.5em auto;        
}

#content { 
        width: 33em;        
        margin-top: 1.5em;
        padding-bottom: 6em;
}

#sitefooter { 
        clear: both;
        line-height: 1.7501em;
        font-size: 0.8571em;        
}

#sitefooter .navigation { 
        width: 70.8374em;
        text-align: center;
        color: #EBE8DA;
}

#techdetails {
        margin: 0 auto 0 auto;
        text-align: center;
}

#sitefooter ul { 
        display: inline;
        margin: 0; padding: 0;
}

#sitefooter li {
        margin: 0 0 0 3em;
        padding: 0;
        display: inline;
        background: none;
}

#cssfun { 
        float: none;
        clear: both;
}

.contentpage #sitebody h1, .index #sitebody h1, .contact #sitebody h1 {
        background: transparent url(rule.png) repeat-x bottom;
        padding-bottom: 1em;
        margin-bottom: 0;
}

.contentpage #sitebody h6, .index #sitebody h6 { 
        font-size: .8571429em;
        line-height: 1.75em;
        margin-bottom: 3.5em;
}


/* Index pages
--------------------------------------------------------------------*/
.index #content {
        width: 60.715em;
}

#indexheader { 
        margin-bottom: 4.5em;
}

.index #sitebody h1 { 
        text-align: right;
}

.index #sitebody h6 { 
        text-align: right;
}

.index .textimage {
        text-align: left;
}

.index .thumb { 
        margin: 0;
}

.indexitem { 
        width: 28.84em; /*slightly less than calculated value to avoid rounding errors*/
        margin: 0 0 1.5em 0;
        float: left;
        padding: 0 0 1.5em 0;
}

.indexitem h2 { 
        margin-top: 0em;
}

.left { 
        margin-right: 1.5em;
}

.right { 
        margin-left: 1.5em;
}

.indexitem p, #articleheader p { 
        text-indent: 0;
        margin-bottom: 0;
}

.indexattribution { 
        font-size: .8571429em;
        line-height: 1.75em;
        margin-top: 1.75em;
}


/* Content pages
--------------------------------------------------------------------*/
#articleheader { 
        width: 24.715em;
        float: left;
}

#articleheader p { 
        padding-top: 1.5em;
}

#articleheader p.indexattribution { 
        padding-top: 0;
}

#articleheader .textimage { 
        text-align: left;
        padding-top: 0;
}

#articleheader .textimage img { 
        margin: 0;
}

#contents { 
        padding: 1.5em 0 1.5em 0;
}

#articleheader h3 { 
        text-align: center;
        font-style: italic;
}

#articleheader ol {
        text-align: center;
}

.contentpage #content { 
        margin-left: 3em;
}


/* Contact page
--------------------------------------------------------------------*/
.contact #content { 
        margin-left: 3em;
        width: 36em;
}

.contact #articleheader { 
        width: 21.715em;
}

.error { 
        color: #F00;
}

#emailform input, #emailform .fakeinput { 
        width: 21.5em;
}

#emailform textarea {
        height: 22.25em;        
}

#emailform .faketextarea {
        height: 25.5em;
}

.fakeinput, .faketextarea { 
        background: #F9F8F4;
}

.faketextarea {
        overflow: auto;
}

#emailform input.button { 
        width: 10.75em;
        margin: 0;
}

/* Blog stuff
--------------------------------------------------------------------*/
div.post { 
        margin-bottom: 4.5em;
}

div.post h1 { 
        padding-bottom: 0;
        margin-bottom: 0;
        margin-top: 0;
}

div.post h1 a { 
        text-decoration: none;
        color: #333333;
}

p.date, p.metadata, p.category { 
        text-indent: 0;
        font-size: 0.8571em;
        margin: 0 0 1.7501em 0;
        padding: 1.3126em 0 .4375em 0;
        line-height: 1.7501em;
        width: 100%;
}

p.date { 
        background: transparent url(rule.png) repeat-x bottom;
}

p.category { 
        float: right;
        text-align: right;
        width: auto;
}

p.metadata { 
        background: transparent url(rule.png) repeat-x top;
        margin: 1.7501em 0 0 0;
        padding: .4375em 0 1.3126em 0;
}

p.continue { 
        text-align: right;
}

p.pagination { 
        text-indent: 0;
        text-align: center;
}

.sidebar { 
        font-size: .8571429em;
        line-height: 1.75em;
        margin: 1.75em 0 7em 1.75em;
        background: transparent url(grey.png) repeat-y left;
        padding: 0 0 0 1.75em;
}

.sidebar div.section { 
        margin: 0 0 1.75em 0;
}

.sidebar p { 
        text-indent: 0;
        line-height: 1.75em;
        margin: 0;
}

.sidebar p.textimage { 
        text-align: left;
        font-size: 1.1667em;
}

.sidebar p.blurb { 
        line-height: 1.4em; /* 1.75 * 4/5 */
}

.sidebar h6, .index h6, .indexattribution { 
        font-style: italic;
        color: #665A52;
}

.sidebar ul { 
        margin: 0 0 1.75em 0;
}

.sidebar ul li { 
        list-style: none;
        line-height: 1.75em;
        background: #EBE8DA url(beige.png) repeat-x top;
        padding: 0;
}

.sidebar ul li a { 
        display: block;
        padding: 0 0.75em 0 0.75em;
        background: transparent url(beige.png) repeat-x bottom;
        color: #333333;
        text-decoration: none;
}

.sidebar ul li a:hover { 
        background: #F9F8F4 none;        
}

.sidebar ul li a:active { 
        color: #B3E38D;
}

#sidebar1 { 
        width: 11.6673em;
}

#sidebar2 { 
        width: 13.6675em;
}

#sidebar2 p {
        text-indent: 0;
}

#sidebar2 .thumb { 
        margin: 0;
}

#content, .sidebar { 
        float: left;
}

.postsection {
        line-height: 1.5em;
        font-size: 1em;
        margin: 3em 0 4.5em 0;
}


div.comment, div.mycomment { 
        line-height: 1.5em;
        padding: 0 1.5em 0 1.5em;
        margin: 1.5em 0 1.5em 0;
}

div.comment {
        background: none #EBE8DA;
}

.commentinfo { 
        margin: 0 0 0.6176em 0;
        line-height: 1.8529em;
        background: transparent url(rule.png) repeat-x bottom;
}

.commentdata { 
        text-indent: 0;
        font-size: 0.8571em;
        line-height: 2.6251em;
        background: transparent url(rule.png) repeat-x top;
        margin: 0.8750em 0 0 0;
}

h1.pagetitle { 
        background: transparent url(rule.png) repeat-x bottom;
        padding-bottom: 1em;
        margin: 0;
}

.archivesyear { 
        padding-top: 3em;
}

.archivesyear h2 { 
        text-align: center;
        font-style: italic;
}

.monthslist { 
        width: 100%;
        padding: 0;
        margin: 0;
}

.monthslist td { 
        text-align: right;
}

td.bargraph, td.archivesmonth, td.archivescount { 
        text-align: left;
}

td.bargraph { 
        width: 100px;
        padding-right: 1.5em;
}

.summary { 
        margin: 2.25em 0 2.25em 0;        
}

.summary li { 
        background: none;
        padding: .75em 1.5em .75em 1.5em;
        min-height: 3em;
}

.summary a { 
        width: 27em;
}

.summary_posted_by { 
        width: 6em;
        float: right;
        text-align: right;
        font-size: .8571429em;
        line-height: 1.7499em; /* Some weird rounding error with 1.75 here */
}


/* Comment form
--------------------------------------------------------------------*/
.commentform { 
        background: none #EBE8DA;
        padding: 1.5em;        
}

.commentform ul { 
        margin: 0em;        
}

.commentform li { 
        padding: 0;
        background: none;
        margin: 0 0 0.75em 0;        
}

.commentform label { 
        display: block;
        width: 18.5em;
}

.commentform input, .commentform select {
        width: 18.5em;
}

.commentform textarea { 
        width: 100%;
        height: 20.75em;
}

p.commenthelp { 
        color: #665A52;
        float: right;
        text-indent: 0;
        width: 9.9167em;
        padding-left: 1.75em;
        background: transparent url(grey.png) repeat-y left;        
        font-size: .8571429em;
        line-height: 1.75em;
}

p.commenthelpwide { 
        color: #665A52;
        text-indent: 0;
        font-size: .8571429em;
        line-height: 1.75em;
}

.commentform input.button { 
        width: 13.49em; /* weird rounding error with 13.5 */
        margin: 0 0.75em 0 0.75em;
}

.checkbox input { 
        width: 1em;
        margin-left: 0;
}

.checkbox label { 
        display: inline;
        margin-left: .5em;
}

.captchabox { 
        width: 18.5em;
        background: #FFF;
}

.error { 
        background: #FDD;
        color: #F00;
        margin-bottom: 1.5em;
        padding: 0.75em;
}