/*  
Theme Name: Brandon Craig Rhodes blog
Theme URI: http://rhodesmill.org/brandon
Description: Custom theme for the blog of Brandon Craig Rhodes
Version: 0.5
Author: Brandon Craig Rhodes
Author URI: http://rhodesmill.org/brandon

 My custom theme, built upon the default theme for Wordpress 2.1.  The
 elements of the theme are supposed to resemble various sorts of paper
 sitting on a desk, at what seems to work out to around 65 dpi. */

body {
    font-family: Baskerville, Times, "Times New Roman", serif;
    background-color: #4f422a;
}

pre, tt, code { font-family: Inconsolata, 'Courier New', Courier, Fixed; }
tt, code { letter-spacing: -0.04em; }
pre { font-size: 10pt; line-height: 12pt; }

a, a:visited {
    color: #75402f;
}

/* Limit the page width. */
div#doc3 { max-width: 880px; }

/* Padding at the very top of the page. */
#hd { padding-top: 18px; }

/* The blog title is hidden by a prettier image, if possible. */

#blogtitle {
    display: block;
    position: relative;
    overflow: hidden;
    width: 449px;
    height: 105px;
    margin-left: auto; /* compare to #sidebar margins */
}

#blogtitle img {
    position: absolute; /* hides blog title text */
    top: 0px;
    left: 0px;
    width: 449px;
    height: 105px;
}

#headshot {
    width: 120px;
    height: 135px;
    border: 8px solid black;
    background: url("images/headshot.jpg");
    position: relative;
}

#headshot > img.ur {
    position: absolute;
    top: -12px;
    right: -12px;
}

#headshot > img.bl {
    position: absolute;
    left: -12px;
    bottom: -12px;
}

/* Inside the "content" div are a series of divs, both posts and
   navigation bars, that look like ragged-edged cream-colored pieces of
   paper along the left edge of the page, overlapping the sidebar.  To
   achieve this effect with modern CSS they must, alas, they must each
   have four idle divs inside of them before reaching actual content. */

#content { /* see http://www.alistapart.com/articles/negativemargins/ */
    font-size: 13pt;
    line-height: 18pt;
}

div.post, div.navigation {
    background: #f3ebd8 url("images/post-bg.jpg") repeat;
    margin-bottom: 20px; /* separation between pieces of paper */
    margin-left: 18px; /* minimum gap to edge of browser */
}

div.post > div, div.navigation > div {
    background: url("images/post-left.jpg") top left repeat-y;
}

div.post > div > div, div.navigation > div > div {
    background: url("images/post-bottom.jpg") bottom left repeat-x;
}

div.post > div > div > div, div.navigation > div > div > div {
    background: url("images/post-right.jpg") top right repeat-y;
}

div.post > div > div > div > div, div.navigation > div > div > div > div {
    background: url("images/post-top.jpg") top left repeat-x;
}

div.post > div > div > div > div > div,
div.navigation > div > div > div > div > div {
    background: url("images/post-topright.jpg") top right no-repeat;
}

div.post > div > div > div > div > div > div,
div.navigation > div > div > div > div > div > div {
    background: url("images/post-bottomright.jpg") bottom right no-repeat;
    /* sizes of pretty ragged edges plus 18px 24px */
    padding: 22px 31px 26px 28px;
}

/* Navigation items */

div.topnavigation {
 padding-bottom: 14px;
}

div.navigation > div > div > div > div > div > div {
    padding: 4px 24px; /* make navigation bar not as tall */
}
div.leftnav { float: left;  }
div.rightnav { float: right; text-align: right; }
div.leftnav, div.rightnav {
    width: 40%; margin: 12px; line-height: 13pt;
}
div.navigation p { clear: both; height: 0px; }

div.navigation a, div.navigation a:visited {
    color: #4f422a;
}

/* Details of how text is laid out in posts */

.post-body h2 { margin-bottom: 0.5em; }
.post-body p, .post-body pre { margin-bottom: 1.5em; }
.post-body b { font-weight: bold; }

.post-body a {
/*    background-color: #c6d5f3; /*#bcf;*/
}

.post-body li {
    list-style-type: disc;
    line-height: 17pt;
    margin: 1.2em 0px 1.2em 1.2em;
}

.post-dateline, .post-foot {
    border-top: 1px solid black;
    padding-top: 2px;
    text-align: right;
    font: 10pt Arial, Helvetica, Sans-Serif;
}
.post-dateline { margin-bottom: 20px; }
.post-foot { margin-top: 20px; }

#ft > img { float: right; }


/* Comments */

li.comment {
    width: 360px;
    margin: 18px 30px 18px auto;
    background: url("images/postit.png") bottom left no-repeat;
    padding: 12px 10px 80px; /* 80px makes room for bottom image */
}
li.comment > div, li#comment-preview {
    background-color: #faf67b; /* color only applied above background */
    padding: 18px;
}
li.comment > div > div {
    margin-bottom: -80px; /* bleed back over bottom background */
}
li.comment cite {
    display: block;
    margin-bottom: 12px;
    font-style: italic;
}
li.comment p { margin: 12px 0px; }
.commentmetadata {
    display: block;
    border-top: 1px solid black;
    text-align: right;
    margin: 12px -11px 0px;
}

li.comment.author {
    margin-right: 130px;
    background-image: url("images/postit-green.png");
}
li.comment.author > div {
    background-color: #deffad;
}

li#comment-preview { color: black; }

/* Comment reply box */

div.reply {
    margin: 36px 50px 36px 36px;
    padding: 12px;
    color: white;
    background-color: gray;
}
div.reply h3 { color: white; }

/* Sidebar */

#bd {
    background: url("images/sidebar.jpg") top right repeat-y;
}

#sidebar h2 { font-weight: normal; }

#sidebar > * {
    margin-right: 10px;
    font: 11pt/11pt Helvetica, Arial, sans-serif;
}

/* Drop shadows for images.  My old blog post images are typically laid
   out like: <div class="caption"><a><img/></a>caption</div> */

div.dropshadow {
    background-color: black;
    margin: 0px 0px 12px 15px;
}

div.dropshadow img {
    display: block; /* else adds room beneath image for descender */
    position: relative;
    top: -3px;
    left: -3px;
    border: 1px solid black;
    background-color: white;
}

div.caption {
    margin: 14px auto;
    width: 60%;
    font-size: 0.88em;
    line-height: 1.2em;
    text-align: center;
    font-family: Arial, Verdana, Sans-Serif;
}

div.caption > a {
    display: block;
}

div.caption > a > img {
    border: 1px solid black;
    border-width: 1px 3px 3px 1px;
}

div.caption > a > br {
    display: none;
}

h1, .description { text-align: center; }

/* Make the RSS button descend below the baseline */
.rssbutton img { position: relative; top: 9px; }

#businesscard {
    padding-left: 0px;
    margin: -18px -10px 0px; /* move image up to leave less awkward space */
    background: url("images/businesscard.jpg") top left no-repeat;
    line-height: 14pt;
}

#businesscard h2, #businesscard p {
    padding-top: 188px;
    padding-right: 18px;
    text-align: right;
}

/* Fonts */

h1, h2, h3 { font-weight: bold; }
/*h1 { font-size: 3.6em; }*/
.post h2 {
    padding-right: 1in;
    font-size: 18pt;
    line-height: 24pt;
}
/*h3 { font-size: 1.4em; }*/

.description { font-size: 1.2em; }

/* Colors */

.post h1, .post h1 a, .post h1 a:visited,
.post h2, .post h2 a, .post h2 a:visited,
.post h3, .post h3 a, .post h3 a:visited {
 color: black;
 text-decoration: none;
 }

.post a { color: #523024; text-decoration: underline; }
.post a:visited { color: #8f543f; }

/* Layout with a post */

div.movietitle {
 margin: 0 auto;
 text-align: center;
 font-family: Arial, Verdana, Sans-Serif;
}

pre {
    min-height: 65px;
    border-left: 1px solid #eee;
    border-right: 1px solid #888;
    border-top: 1px dashed #eee;
    border-bottom: 1px dashed #bbb;
    background: url("images/tractor.png") top left repeat-y;
    background-color: #e5dfcb;
    padding-left: 34px;
}

blockquote {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    padding-left: 24px;
    font-size: 0.9em;
    line-height: 1.2em;
}

blockquote cite {
 margin: 5px 0 0;
 display: block;
 }

blockquote > p {
 margin: 0;
}

small { font: 10pt Arial, Helvetica, Sans-Serif; }

h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
	text-decoration: none;
	color: black;
	}

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
	text-decoration: none;
	}

#commentform #submit {
        border-top: 1px solid black;
	}

#commentform input, #commentform textarea {
	font: Monospace;
	}

acronym, abbr, span.caps
{
	font-size: 0.9em;
	letter-spacing: .07em;
	}

a, h2 a:hover, h3 a:hover, .rssbutton a:hover {
	text-decoration: none;
	}

a:hover {
	text-decoration: underline;
	}

.trackback_link {
	text-decoration: underline;
	}

#wp-calendar #prev a, #wp-calendar #next a {
	font-size: 9pt;
	}

#wp-calendar a {
	text-decoration: none;
	}

#wp-calendar caption {
	font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	text-align: center;
	}

#wp-calendar th {
	font-style: normal;
	text-transform: capitalize;
	}
/* End Typography & Colors */

.post hr {
	display: block;
	}

.postmetadata {
  margin: 10px 0px 0px 0px;
  padding: 4px;
/*  background-color: #b2945f;*/
  border-top: 1px solid black;
  margin-bottom: 8px;
  font-size: 1.2em;
  font-family: Arial, Helvetica, Sans-Serif;
  }

h2.pagetitle {
	margin: 0px;
        margin-bottom: 20px;
	text-align: center;
        padding: 0 20px;
}

h3 {
	padding: 0;
	margin: 0px;
	}

h3.comments {
	padding: 0;
	margin: 40px auto 20px ;
	}
/* End Headers */

/* Begin Images */
p img { padding: 0; max-width: 100%; }

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered { display: block; margin-left: auto; margin-right: auto; }
img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; }
.alignright { float: right; }
.alignleft { float: left; }

.postmetadata ul, .postmetadata li {
	display: inline;
	list-style-type: none;
	list-style-image: none;
	}

#sidebar ul {
    margin-left: 10px;
}

#sidebar ul li {
    list-style-type: none;
    list-style-image: none;
}

#sidebar ul p, #sidebar ul select {
	margin: 5px 0 8px;
	}

#sidebar li {
    margin-bottom: 15px;
}

#sidebar ul ul, #sidebar ul ol {
	margin: 5px 0 0 10px;
	}

#sidebar ul ul ul, #sidebar ul ol {
	margin: 0 0 0 10px;
	}

ol li, #sidebar ul ol li {
	list-style: decimal outside;
	}

#sidebar ul ul li, #sidebar ul ol li {
	margin: 7pt 0;
	padding: 0;
	}
/* End Entry Lists */

/* Begin Form Elements */
#searchform {
	margin: 10px auto;
	padding: 5px 3px; 
	text-align: center;
	}

#searchform #s {
	padding: 2px;
	}

#searchsubmit {
	padding: 1px;
	}

.entry form { /* This is mainly for password protected posts, makes them look better. */
	text-align:center;
	}

#commentform input {
	padding: 2px;
	margin: 5px 5px 1px 0;
	}

#commentform textarea {
	width: 98%;
	padding: 2px;
	}

#commentform #submit {
	margin: 0;
	float: right;
	}
/* End Form Elements */

/* Begin Comments*/
#commentform p {
	margin: 5px 0;
	}

.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
	}

/* End Comments */

/* Begin Calendar */
#wp-calendar {
	empty-cells: show;
	margin: 10px auto 0;
	width: 155px;
	}

#wp-calendar #next a {
	padding-right: 10px;
	text-align: right;
	}

#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
	}

#wp-calendar a {
	display: block;
	}

#wp-calendar caption {
	text-align: center;
	width: 100%;
	}

#wp-calendar td {
	padding: 3px 0;
	text-align: center;
	}

#wp-calendar td.pad:hover { /* Doesn't work in IE */
	background-color: #fff; }
/* End Calendar */

/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
	cursor: help;
	}

acronym, abbr {
	border-bottom: 1px dashed #999;
	}


.center {
	text-align: center;
	}

hr {
	display: none;
	}

a img {
	border: none;
	}

/* "powered by" at bottom */
p.powered { clear: both; text-align: center; color: #dbb676; }
p.powered a { color: #dbb676; }

/* For catechisms and frequently-asked-question lists */

p.question, p.answer {
 padding-top: 3px;
 }
p.question {
 font-weight: bold; border-top: solid 1px black; margin-top: 28px;
 }
p.question:before, p.answer:before {
 text-align: center;
 display: marker;
 marker-offset: 3em;
 font-weight: bold;
 }
p.question:before { content: "Q: "; }
p.answer:before { content: "A: "; }

/* Small caps. */

.sc { font-variant: small-caps; }