/* Still to do:
1.  Fix links in sidebar.

2.  Find out where the search is defined (it may not be in this document).  Lower the Search button by a pixel or two.

3.  Is it possible to change the color of visited links within blockquotes only?  (I should make them the same green as the non-linking blockquoted text, just like I make visited links in the non-quoted text the same color as that text.

4.  Change "Read More" to "Permalink".

5.  Is there any way to add an "Edit" link to posts when I'm logged in?
*/

/*
Theme Name: terrafirma
Theme URI: http://www.freewpthemes.net/preview/terrafirma
Description: Tested on WP2.5
Version: 2.0
Author: Free WordPress Themes
Author URI: http://www.freewpthemes.net/
Tags: fixed width, two columns, widgets

Heavily modified and documented by Ron Britton.
*/

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

/* Defines the main body.  The graphic is 4 x 291 pixels.  Starts out as gray/green checkerboard at top and fades to white at bottom.  Is used to fill out on the left and right of the header when the screen is wider than the header.  The "background: #F9F9F7" tells it what to use for the rest of the side fill below the graphic.
*/
body {
	background: #F9F9F7 url('images/a1.gif') repeat-x;
	font-size: 12px;
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	color: #003300;
	line-height: 18px;
}

hr {
	display: none;
}

/* Link */
/* Orange, like in the logo */
a {
	color: #FF6633;
	text-decoration: none;
}

/* Link hover */
a:hover {
	text-decoration: underline;
}

/* Link visited */
a:visited {
	color: #003300;
	text-decoration: underline;
}

sup {
	font-size: 0.5em;
}

p {
	margin-bottom: 14px;
	text-align: justify;
}

/* White square with border.  Don't know where it's used. */
img.picA {
	position: relative;
	top: -2px;
	background: url('images/a47.gif') no-repeat;
	width: 76px;
	height: 74px;
	padding: 8px;
}

/* White rectangle with border.  Don't know where it's used. */
img.picB {
	position: relative;
	top: -2px;
	background: url('images/a26.gif') no-repeat;
	width: 146px;
	height: 75px;
	padding: 7px;
}

img.floatleft {
	float: left;
	margin: 0px 14px 3px 0px;
}

ul.linklist {
	list-style: none;
}

ul.linklist li {
	border-top: solid 1px #EEEEEE;
	padding-top: 5px;
	margin: 5px 0px 0px 0px;
}

ul.linklist li.first {
	border-top: 0px;
	margin-top: 0px;
	padding-top: 0px;
}

blockquote {
    /* I'm designing a new blockquote style. */
    color: #336633; /* Text color */
    border-style: solid;
    border-width: 1px;
    border-color: #336633;
    margin: 0px 16px 11px 17px;
    padding: 13px 16px 0px 18px;
}

/* "You can also define styles for HTML elements with the id selector. The id selector is defined as a #."  (See:  <http://www.w3schools.com/Css/css_syntax.asp>) */

/* This is the Upper Background.  It is 796 x 264 pixels.  The left- and right-most pixels are the green background, which is a dark-green/light-green checkerboard at the top and fading to a light-green/light-green checkerboard at the bottom.  The middle 765 pixels horizontally are white.  The other header objects are placed within these 765 pixels.  The upbg.gif image does not appear by name in the page source, so the server is combining the graphics mentioned in this CSS and then sending them out (under a different name?).

Still to determine:
There is a visual artifact where the upbg.gif image meets the fill image.  Is that constant?  It looks like it varies based on the width of the user's browser.  I don't think editing the a1.gif image would have an effect. */
#upbg {
	position: absolute;
	top: 0px;
	left: 0px;
	background: #fff url('images/upbg.gif') no-repeat;
	width: 796px;
	height: 264px;
	z-index: 1;
}

/* This appears to be the sides and middle once the top sides have faded from green checkerboard to faint green.  It is a rectangle 796 x 1 pixels.  The left-most and right-most pixels are faint green.  The middle pixels are white.  Apparently "repeat-y" below means keep repeating this image downward until you reach the end of the page. */
#outer {
	position: relative;
	width: 796px;
	margin: 0 auto;
	background: #fff url('images/abg.gif') repeat-y;
}

/* This appears to position where things are placed within the outer graphics.  E.g., The header and green menu bar are placed within those graphics, so they are affected by these settings.  The top padding value (13px) controls how far from the top the first item is placed (in this case, my masthead graphic).  The z-index property has to do with stacking order.  A 2 sits on top of a 1, so that guarantees that stuff placed here appears on top of the background graphics, instead of vice versa.  According to this page, <http://www.w3schools.com/Css/pr_pos_z-index.asp>:
"The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order."

The right padding value only affects things of variable width.  That is why the green menu bar is affected (because it has a repeat value that fills it to the width of its container), but the masthead graphic is not.  I am changing the left and right padding values from 30 to 29 to get my green menu bar (and presumably the footer) to fill out to the width of the masthead graphic.
*/

#inner {
	position: relative;
	/* padding: 13px 30px 13px 30px; */
	padding: 13px 29px 13px 29px;
	z-index: 2;
}

/* This image is 1 x 92 pixels.  It is red at the top and fades to orange at the bottom.  It is used to generate the orange rectangle in the header that contains the blog name in the orginal theme.  According to this page, <http://www.w3schools.com/css/pr_background-repeat.asp>:
"repeat-x  	 The background image will be repeated horizontally"

What doesn't make sense is that the orange rectangle is 221 pixels wide on the final web page, but only defined as 202 wide here.  The padding has something to do with it.  Apparently it pads with the image itself.  In any event, 202 + 20 = 222, yet the rectangle itself is 221 pixels wide.  Does the padding mean start at column 20 (which means pad with 19 to the left)? */

/* Do I need to disable the call to this style?  I am not using the orange rectangle.  Also, do I need to disable the style itself? */

#header {
	position: absolute;
	background: #FF7800 url('images/a8.gif') repeat-x;
	width: 202px;
	height: 92px;
	color: #fff;
	padding-left: 20px;
}

#header span {
	font-weight: normal;
}

#header h1 {
	position: absolute;
	font-size: 23px;
	letter-spacing: -1px;
	top: 30px;
	line-height: normal;
}

/* This might be the blog subtitle? */
#header h2 {
	position: absolute;
	font-size: 10px;
	font-weight: normal;
	color: #FCE2CA;
	top: 51px;
}

#header sup {
	color: #FCE2CA;
}

/* This was the plant image and the box it is in. Now it is the entire masthead.  I changed the position attribute from right to left.  The original theme only used the splash image on the right side of the page, so it made sense to position relative to the right. */
#splash {
	position: absolute;
	/* right: 29px; */
	left: 29px;
	background: #EAEAE2 url('http://www.bay-of-fundie.com/img/sitewide/terrafirma/mast-parch-quotes.jpg') no-repeat;
	width: 738px;
	height: 130px;
}

/* This is the green menu bar and the faint checkerboard below it.  It is 4 x 67 pixels.  It has to be 4 wide to display the whole checkerboard.  It is repeated across the width of the division.  The padding order is top, right, bottom, left. */
#menu {
	position: relative;
	/* For background color, use halfway between the two greens in the graphic. Substitute my menu graphic for theirs. */
	background: #1A4D1A url('http://www.bay-of-fundie.com/img/sitewide/terrafirma/green-menu-bar.gif') repeat-x;
	height: 67px;
	padding: 0px 20px 0px 5px;
	/* Top margin needs to be height of masthead plus 6 for whitespace. */
	margin: 136px 0px 20px 0px;
}

/* This appears to define the menu items that run horizontally across the top (over the green background). */
#menu ul {
}

/* The "display: inline" is what tells it to not do a line break. */
#menu ul li {
	display: inline;
	line-height: 52px;
	padding-left: 3px;
}

#menu ul li.first {
	border-left: 0px;
}

/* Describes the link. */
#menu ul li a {
	background-color: transparent;
	background-repeat: repeat-x;
	padding: 8px 12px 8px 12px;
	font-size: 12px;
	color: #fff;
	font-weight: bold;
}

/* Describes the link when you hover over it.  Graphic is 1 x 39 pixels.  Goes from faint checkerboard to even fainter.  This is the rectangular highlight that appears around the link when you hover over it. */
#menu ul li a:hover {
	background: #fff url('images/a18.gif') repeat-x top;
	color: #4A4A24;
	text-decoration: none;
}

/* Appears to describe the date in the menu bar. */
#date {
	position: absolute;
	top: 0px;
	line-height: 52px;
	color: #BDBDA2;
	right: 30px;
	font-weight: bold;
	font-size: 12px;
	letter-spacing: -1px;
}

#sidebar {
	position: relative;
	width: 180px;
	float: right;
}

/* Not sure what this describes.  The graphic is 2 x 1 pixel of light gray alternating with white.  It is also used below (see "#content .post .header h2, #sidebar h2, .pagetitle") to make faint gray/white dotted lines. */
#sidebar h3 {
	position: relative;
	top: 4px;
	font-size: 16px;
	line-height: 25px;
	/* color: #656551; */
	/* Setting the color to the same thing as below, just to be safe. */
	color: #336633;
	letter-spacing: -1px;
	background: url('images/a22.gif') bottom repeat-x;
	padding: 0px 0px 10px 10px;
	margin-bottom: 20px;
}

#sidebar .content {
	padding: 0px 10px 0px 10px;
	margin-bottom: 20px;
}

#sidebar ul {
	list-style: none;
}

#sidebar li ul {
	margin: 0 15px 15px 15px;
}

#sidebar li li {
	border-bottom: solid 1px #EEEEEE;
	padding: 5px 0;
}

#calendar table {
	width: 80%;
	margin: 0 15px;
}

#calendar tbody td {
	text-align: center;
}

#next {
	text-align: right;
}

/* This appears to set the width of the main text column.  The text itself (in the original) is 450 pixels.  The padding below (see #content .content, .entry) is 15 pixels either side.  That gives the 480 that is defined in the original width.  Therefore, I need to increase this to 530.  I don't know what else I need to adjust to compensate. */
#content {
	position: relative;
	/* width: 480px; */
	width: 530px;
	float: left;
}

/* Appears to set some additional parameters for the regular content?  Not sure how this relates to all of the others below it. */
#content .content, .entry {
	padding: 0px 15px 0px 15px;
	margin-bottom: 20px;
}

#content .post {
	margin-bottom: 30px;
}

#content .post .header {
	position: relative;
}

/* This is where the major sidebar header text (e.g. Pages, Archives, Blogroll) is described.  This image is also used in "#sidebar h3" above.  It is the 2 x 1 light gray & white dotted line that is drawn below the text. 
*/
#content .post .header h2, #sidebar h2, .pagetitle {
	position: relative;
	top: 4px;
	font-size: 18px;
	line-height: 25px;
	/* color: #656551; */
	/* Make the color the same as my body text.  That text is defined as #003300, but when it antialiases, the color comes out much lighter.  Since this text is bigger, the antialiasing has less of an effect and therefore looks darker.  I compensate by setting it to a lighter color (one that frequently appears in the antialiased body text). */
	color: #336633;
	letter-spacing: -1px;
	background: url('images/a22.gif') bottom repeat-x;
	padding: 0px 0px 10px 15px;
	margin-bottom: 20px;
}

/* As per PL <http://www.bay-of-fundie.com/archives/707/new-blog-design#comment-33007>, I am fixing the date overrun problem. */

#content .post .date {
	/* position: absolute; */
	position: relative;
	/* right: 15px; */
	left: 15px;
	/* top: 0px; */
	top: -10px;
	/* line-height: 35px; */
	line-height: 15px;
	color: #AFAFA4;
	font-weight: bold;
}

#content .post .content {
	margin-bottom: 0px;
}

/* This where unordered lists are defined for the main text column. */
/* Original 
#content .post .content ul {
	margin-bottom: 1em;
	list-style-position: inside;
} */

#content .post .content ul {
    margin-left: 0px;
    /* This padding line doesn't seem to do anything. Reenable it if anything weird starts happening. */
	/* padding: 0 0 0 30px; */
	list-style: none;
	/* Increasing padding to 33.  The distance from the edge of the green menu bar to the left edge of regular post text is 16 pixels.  It makes sense, then, that the indentation for bullets should be 16 pixels.  Setting to left padding to 33 accomplishes this. */
	padding-left: 33px;
	text-indent: 3px;
	/* I added this next attribute completely.  Setting bottom padding to 14 makes the bottom of the (non-descender) letters on the last line of the list 25 pixels above the (non-ascender) letters in the first line of regular text.  This balances it with the space above the list. */
	padding-bottom: 14px;
}

#content .post .content ul li {
	/* margin: 7px 0 8px 10px; */
	/* margin: 0px 0 0px 10px; */
	list-style-image: url(http://www.bay-of-fundie.com/img/sitewide/terrafirma/orange-bullet.gif);
}

#content .post .content ol {
	/* Added this padding line to bring the indentation to 16 pixels, which is identical to the unordered lists. */
	padding-left: 3px;
	margin-bottom: 1em;
	list-style-position: inside;
	/* I added this next line.  The bottom of the (non-descender) letters on the last line of the list was only 23 pixels above the top of the (non-ascender) letters in the first line of regular text.  The distance between the top of the list and the bottom of the text above that is 25.  Increasing this by 2 will balance these. */
	padding-bottom: 2px;
}

#content .post .content ol li {
	padding-left: 13px;
}

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

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* End Images */

div.left {
    /* This is my custom division class for a left-aligned picture. */
    float:left;
    margin:0 15px 15px 0;
    padding:15px 15px 10px 15px;
    text-align:center;
    border-style: solid;
    border-width: 1px;
    border-color: #336633;
}

div.right {
    /* This is my custom division class for a right-aligned picture. */
    float:right;
    margin:0 0 15px 15px;
    padding:15px 15px 10px 15px;
    text-align:center;
    border-style: solid;
    border-width: 1px;
    border-color: #336633;
}

div.rightfoot {
    /* This is a special division class for the footer. */
    float:right;
    margin:0;
    padding:15px 15px 10px 15px;
    text-align:center;
}

/* This is the footer of each individual post.  The graphic is 4 x 64 pixels.  It fades in from white at the top to green/white checkerboard at the bottom. */
#content .post .footer {
	position: relative;
	top: -10px;
	background: url('images/a33.gif') repeat-x;
	height: 64px;
}

/* I'm guessing the way you read this is "#content.post.footer.ul", meaning we are only defining the unordered list for the footer that appears within each post. */
#content .post .footer ul {
	list-style: none;
	position: absolute;
	right: 15px;
	bottom: 15px;
}

/* As above. */
#content .post .footer ul li {
	display: inline;
	line-height: 14px;
	padding-left: 17px;
	margin-left: 25px;
	background-repeat: no-repeat;
	background-position: 0px 2px;
}

/* This is a little 13 x13 printer icon. */
#content .post .footer ul li.printerfriendly {
	background-image: url('images/a41.gif');
}

/* Icon for Comments. */
#content .post .footer ul li.comments {
	background-image: url('images/a36.gif');
}

/* Icon for Read More. */
#content .post .footer ul li.readmore {
	background-image: url('images/a38.gif');
}

.navigation {
	height: 40px;
	font-size: larger;
	font-weight: bold;
}

.navigation .alignleft {
	float: left;
}

.navigation .alignright {
	float: right;
}

#comment {
	width: 80%;
}

/* This selector defines everything in the page footer.  I should probably make the text a little darker.  The graphic is the background for the footer.  It is a 1 x 66 pixel column that goes from barely dark at the top to virtually white at the bottom. */
#footer {
	clear: both;
	padding: 15px 0 10px 0;
	text-align: center;
	/* background: url('images/a50.gif') repeat-x; */
	background: #F9F9F7 url('images/a50.gif') repeat-x;
	/* color: #A8A88D; */
	color: #999966;
}

/* Link color in the footer. */
#footer a {
	/* color: #8C8C73; */
	color: #666633;
}