/*
1. Clearfix
2. General element styles
*/

/* 1. Clearfix */
.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {
	height:1%;
	}
*+html .clearfix {
	height:1%;
	}
.clearfix {
	display:block;
}
/* End hide from IE-mac */


.wai {display: none}

/* 2. General element styles */
h1,
#homepage .entry h2 {font-family: Georgia, "Times New Roman", Times, serif; color: #801a14; font-size: 1.7em; text-transform: capitalize; margin: 10px 0}
h2 {font-family: Georgia, "Times New Roman", Times, serif; color: #801a14; font-size: 1.2em; text-transform: capitalize; font-weight: bold;}
h3 {font-family: Georgia, "Times New Roman", Times, serif; color: #fff; font-size: 1.2em; text-transform: capitalize}
p {margin: 10px 0}
img {border: 1px solid #333333; padding: 10px; background: #f6efe5; margin: 10px;  }
a,
a:link,
a:visited,
a:active,
a:hover {color: #af2a21}
a:hover {text-decoration: none;}
body {
    background: url(./images/interface/bg.png) top left;  
    height: 100%;
	line-height: 1.4em;
    }

#doc2 { /* main body 950px */
    height: 100%
    }
strong {
	font-weight: bold;
	}
ul {margin-left: 10px}
ul,
ul li {
	list-style-type: square;
	}    

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 padding: 10px;
 margin: 10px;
 border: 2px dotted #D7975E;
}
	
/* 3. Header */	
#hd { /* header */
    height: 193px;
    background: url(./images/interface/header.png) top left no-repeat;
	position: relative;
    }
#hd .logo {display:block; float: left; height: 180px; width: 300px;text-decoration:none}
#hd .search {float: right; margin: 30px;}
#hd .search input {border: 1px solid #412c19; padding: 5px;}
#hd .search input.submit {background: #af2a21; color: #fff; border-width: 2px; cursor: pointer; }
#hd .rss a{position: absolute; right: 30px; bottom: 30px; width: 50px; height: 50px; background: transparent url(./images/interface/rss.png) no-repeat; text-decoration: none; }
#hd .home a{position: absolute; right: 80px; bottom: 27px; width: 50px; height: 50px; background: transparent url(./images/interface/home.png) no-repeat; text-decoration: none; }


ul.navigation { position: absolute; bottom: 30px; left: 300px}
ul.navigation  li {float:left; margin:10px; list-style-type: none}
ul.navigation  li a {display: inline-block; padding: 10px; font-size: 1.4em; font-family: Georgia, "Times New Roman", Times, serif; color: #fffff2; text-decoration: none}
ul.navigation  li a:hover {color: #312418; background: url(./images/interface/nav.png) no-repeat}


/* 4. Main Content */	
.mainContent {
	position:relative;
	 margin:0px auto;
	 width:700px;
	 color: #412c19;
	}	
.mainContent .container{
	position: relative;
	background:transparent url(./images/interface/cream_tile_middle.png) repeat-y center 0;
	padding: 20px;
	}
.mainContent .content{
	margin-top: -220px;
	padding-right: 7px;
	}
.mainContent .top{
	height: 230px;
	background:transparent url(./images/interface/cream_tile.png) no-repeat 0 top;
	}
.mainContent .bottom {
	background: transparent url(./images/interface/cream_tile.png) no-repeat 0 -230px;/* botom of background image */
	height: 20px;
	}
	
.mainContent.subPage {
	width: 950px;
	margin-left: -7px;
}
.mainContent.subPage .container {
	position: relative;
	background:transparent url(./images/interface/cream_tile_long_middle.png) repeat-y center 0;
	padding: 20px;
	}
.mainContent.subPage .content{
	padding: 0 20px;
	}
.mainContent.subPage .top{
	height: 230px;
	background:transparent url(./images/interface/cream_tile_long.png) no-repeat 0 top;
	}
.mainContent.subPage .bottom {
	background: transparent url(./images/interface/cream_tile_long.png) no-repeat 0 -230px;/* bottom of background image */
	height: 20px;
	}


.bookmarks {float: right}
a.delicious {text-decoration: none; width: 60px; background: url(./images/interface/delicious.gif) no-repeat; padding-left: 20px; margin-right: 10px}
a.digg {text-decoration: none; width: 60px; background: url(./images/interface/digg.gif) no-repeat; padding-left: 20px; margin-right: 10px}
a.stumble {text-decoration: none; width: 60px; background: url(./images/interface/stumble.gif) no-repeat; padding-left: 20px; margin-right: 10px}

.pages {}

/* entry */
.mainContent .content .entry {margin-top: 30px;zoom:1;min-height: 10px}
.mainContent .content .entry .date {color:#ad8d6c;}
.mainContent .content .entry .comment {float: right; color: #FFF; background: url(./images/interface/comments.gif) no-repeat; padding: 8px 0px; width: 40px; text-align: center; top: -20px; margin-right: 10px}
.mainContent .content .entry .subtitle {font-weight: bold; font-size: 1.2em}
.mainContent .content .entry h3 {font-weight: bold; color: #412c19; font-family: Arial, Helvetica, sans-serif}
p.seriesIntro {font-style: italic; padding-bottom: 10px; border-bottom: 1px solid  #412c19; margin-bottom: 10px}

/* 5. Sidebar */	
.categories{
	 position:relative;
	 margin:0 0 0 -3px;
	 width:240px; 
	 color:#fff;
	}
.categories .container{
	position: relative;
	background:transparent url(./images/interface/red_tile_middle.png) repeat-y 0 0;
	padding: 20px 30px 20px 20px;
	}
.categories .content{
	position: relative; 
	top: -30px;
	margin-bottom: -30px;
	}
.categories .top{
	height: 50px;
	background:transparent url(./images/interface/red_tile.png) no-repeat 0 top;
	}
.categories .bottom {
	background: transparent url(./images/interface/red_tile.png) no-repeat 0 -55px;/* botom of background image */
	height: 10px;
	}
.categories {margin: 10px 0}
.categories li a {color: #FFF}

.latestPosts{
	 position:relative;
	 margin:0 0 0 -3px;
	 width:240px; 
	 color:#fff;
	}
.latestPosts .container{
	position: relative;
	background:transparent url(./images/interface/paper_tile_middle.gif) repeat-y 0 0;
	padding: 20px;
	}
.latestPosts .content{
	margin-top: -130px;
	}
.latestPosts .top{
	height: 130px;
	background:transparent url(./images/interface/paper_tile.png) no-repeat 0 top;
	}
.latestPosts .bottom {
	background: transparent url(./images/interface/paper_tile.png) no-repeat 0 -185px;/* botom of background image */
	height: 20px;
}

.latestPosts li {margin: 10px 0}
.latestPosts a {color: #FFF}


/* 6. Footer */
.footer{
	 position:relative;
	 margin:10px 0 0 7px;
	 width:928px; 
	 color:#ad8d6c;
	}
.footer .container{
	position: relative;
	background: transparent url(./images/interface/footer_middle.png) repeat-y 0 0;
	padding: 20px 20px 0 20px;
	}
.footer .content{
	position: relative; 
	top: -20px;
	margin-bottomn: -20px;
	}
.footer .top{
	height: 20px;
	background:transparent url(./images/interface/footer.png) no-repeat 0 top;
	}
.footer .bottom {
	background: transparent url(./images/interface/footer.png) no-repeat 0 -35px;/* botom of background image */
	height: 20px;
	}
.footer .content a,
.footer .content a:link,
.footer .content a:active,
.footer .content a:visited,
.footer .content a:hover {color: #fff}

.footer .content .LHS {float: left; width: 49%}
.footer .content .RHS {float: right; width: 49%}

.footer .content .listening {padding: 0 20px 0 55px;background: url(./images/interface/speaker.png) 15px 0 no-repeat; margin-top: 20px;}
.footer .content .reading {padding: 0 20px 0 55px;background: url(./images/interface/book.png) 0 0 no-repeat; margin-top: 20px}
.footer .content .blogRoll {padding: 0 20px 0 55px;background: url(./images/interface/pen.png) 0 0 no-repeat; margin-top: 20px}
.footer .content .mySites {padding: 0 20px 0 55px;background: url(./images/interface/mirror.png) 0 0 no-repeat; margin-top: 20px; min-height: 40px}

/* Other styling */
.photo {margin: 20px; position: relative; float: left; border: 1px solid #333333; padding: 10px; background: #f6efe5}
.photo a {text-decoration: none;}
.photo img {margin: 0; padding: 0; border: none;}
.photo span {
	display: block; 
	position: absolute; 
	top: -10px; 
	left: 10px; 
	width: 79px;
	height: 30px;
	background: transparent url(./images/interface/sellotape.png) no-repeat;
	}
span.plus {background: transparent url(./images/interface/plus.gif) 2px 50% no-repeat; padding-left: 20px}
span.minus {background: transparent url(./images/interface/minus.gif) 2px 50% no-repeat; padding-left: 20px}


.entryGallery  {clear: both}
.entryGallery img {float: left; margin: 5px;}

/* Comments */
h1.comments {width: 90%; padding-top: 10px; border-bottom: 1px solid #801a14; margin-bottom: 20px;}	
.commentForm label{display: block; float: left; width: 100px; margin-right: 10px }
.commentForm input,
.commentForm textarea{ border: 1px solid #412c19;; padding: 5px }
.commentForm input.submit{background: #af2a21; color: #fff; border-width: 2px; cursor: pointer; }

/* References */
h2.references {width: 90%; padding-top: 10px; border-top: 1px solid #801A14; color: #801A14; margin-top 10px;}	

.commentBox {font-family: Arial, Helvetica, sans-serif; background: #f9f8f2; width: 90%}
.commentBox h3 {font-family: Arial, Helvetica, sans-serif; background: #d7975e; padding: 10px;}
.commentBox .comment {padding: 10px}
.commentBox .commentName {padding-right: 40px; color: #801a14; }
.commentBox .commentDate {text-transform: none}
.commentBox img {margin: 0; padding: 0}

/* feedburner */
p.feedburner {text-align: center; margin-right: 20px}