/* Derived from: 
Theme Name: Zine
Theme URI: http://demo.boilerhouseblog.com/   							*/
/* 
Description: The Zine theme, designed to make your blog look like the front page of a magazine.
Version: 0.3 			*/
/* 
Author: Tom Maisey
Author URI: http://boilerhouseblog.com/fishcakes/

	 							*/
/* The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php
	
		*/


/* Icons by Davy Van Den Bremt (http://www.davyvandenbremt.be/), Maurice Svay (http://www.svay.com/) and an anonymous 'Max'	*/


body {
	font-size: 62.5%;
	
	font-family: Verdana, Sans-Serif;
	background: #EEEEEE url(images/bg.jpg) repeat-x top left;
}

/* Form styling */

textarea {
	border: 1px solid #ccc;
	margin: 1px;
	padding: 1px;
	max-width: 100%
}


/* TEXT AND LINK COLOUR */

.contentwrap, #contentwrap {
	font-size: 1.1em;
/*	line-height: 1.2em; */
	text-align: justify;
}

/* this, and the "contentwrap a hover" chooses the style for the links that appear in your posts */

.contentwrap a, #contentwrap a, .sidebar a {
	color: #6699CC;
	text-decoration: none;
}	

.contentwrap a:hover, #contentwrap a:hover, .sidebar a:hover {
	color: black;
}

/*Although by default these are the same as the colours above, so are not strictly necessary, */
/*you may want to change them independently, so I have separated them in the CSS. */

.menu a, .footer a, .recentfeatures a {
	color: #6699CC;
	text-decoration: none;
}

.menu a:hover, .footer a:hover, .recentfeatures a:hover {
	color: black;
}

.menu a:hover, .footer a:hover {
	border-bottom: 1px #444 dotted;
}

blockquote {
	color: black;
	margin: 15px 30px 0 10px;
	padding-left: 20px;
	border-left: 5px solid #ddd;
}

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

.sidebar {
	color: #999;
	font-size: 0.9em;
} 

.commentbox a, .commentboxalt a {
text-decoration: underline;
}

.rssred a {
	color: red;
}

/* STRUCTURE */
/* Wrapping div, which styles the width of the "page". 							*/
/* To change the percentage of the screen taken up by the content, change the "width" value. 		*/
/* To create a fixed width page, simply specify a number of pixels instead (e.g width: 749px;) 		*/

#bodywrapper {
	width: 90%;
	margin: 10px auto;
	max-width: 1024px;
	background-color: white;
	border: 2px #CCCCCC solid;
}



/* Structure of the three main columns, left, middle and right, as well as the header. */


.header {
	background: #99CCFF url(images/header.gif) no-repeat top left;
	margin: 10px auto 0 auto;
	width: 96%;
	height: 140px;
}



.contentwrap {
	margin-top: 10px;
}


#headerknobs ul {
	position:relative;
	bottom:-10px ;
	margin: 0; 
	padding: 0; 
	list-style-type: none;
	list-style-image: none; 
}

#headerknobs li {
	display: inline;
}

#headerknobs ul li a {
	float:right; 
	font-size: 1.3em; 
	text-decoration:none; 
	padding: 5px 20px 5px 20px;
	color: white; 
	background: #99CCFF;
}

#headerknobs ul li a:hover {
	color: black; 
	text-decoration:underline; 
}

.leftcol {
	float: left; 
	display: inline;
	margin-left: 2%;
	width: 23%;
}

.rightcol {
	float: right;
	display: inline;
	margin-right: 2%;
	width: 23%;
}

.midcol {
	margin: 0 27% 0 27%;
	border-right: 1px solid #C7C7C7;
	border-left: 1px solid #C7C7C7;
}

/* Structure of the individual "boxes". */


.options {

	position: relative;

	height: 16px;

	bottom: 0px;

	left: 5px;

}


.nonfeature {
	
	background-color: white;
	margin-left: 1%;
	margin-right: 1%;
	border-bottom: 1px dotted #C7C7C7;
	width: 100%;
	margin-bottom: 10px;
	padding: 3px 7px 2px 3px;
}

.featurehead {
	text-align: center;

	background-color: #E5F2FF;

	border-bottom: 2px solid #EAEAEA;

}


.feature {

	background-color: white;
	margin-left: 1%;
	margin-right: 1%;
	border-bottom: 1px dotted #C7C7C7;
	
	margin-bottom: 20px;
	padding: 3px 7px 2px 3px;
}


.recentfeatures {

	border-right: 1px dotted #C7C7C7;


	float: left;

	width: 45%;
	margin-bottom: 10px; 
	padding: 7px 7px 7px 7px;
}


.categorylist {

	float: right;
	width: 45%;
	margin-bottom: 10px;
	padding: 2px 7px 7px 7px;
}


.menu {
	
	text-align: center;

	clear: both;
	width: 96%;

	height: 40px;

	margin-left: 2%;
	margin-bottom: 10px;

	padding-top: 20px;
}


.footer {

	background-color: #EEEEEE;

	color: #444;


	clear: both;

	height: 40px;

	width: 100%;

	padding-top: 10px;

	padding-bottom: 10px;

	text-align: center;

} 


/* Various different header sizes and colours*/


/* set up header sizes */

h1 { font-size: 6em;}
h2 { font-size: 1.6em; font-weight:normal;}
h3 { font-size: 1.5em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1.1em; }

h1, h1 a, h1 a:hover, h1 a:visited {

	text-decoration: none;

	color: white;
	text-align: center;

	margin: 0;

	padding-top: 30px;

}

.leftcol h2, .rightcol h2, .leftcol h2 a, .rightcol h2 a {
	font-size: 1.2em;
	color: #000000;
	text-decoration: none;

	margin-bottom: 0;

	padding-bottom: 0;
}

.sidebar h2 {
	font-size: 1.1em;
	color: black;
	border-bottom: 1px solid #CCC;
}


.leftcol h2 a:hover, .rightcol h2 a:hover {
	color: #FFA800;

	border: none; /*this prevents the titles from inheriting the "content" wrapper's link styles*/
}

.feature h2, .feature h2 a, .pagecontent h2, .pagecontent h2 a {
	font-size: 1.4em;
	color: #6699CC;
	text-decoration: none;
	margin-bottom: 0;
	padding-bottom: 0;
}


.pagetitle {
	color: black;
	text-align: center;
	background-color: #E5F2FF;
	border-bottom: 2px solid #EAEAEA;
}

.featurehead h2 {

	margin: 0;

	padding: 5px 0 5px 0;

}


.feature h2 a:hover, .postcontent h2 a:hover {
	color: #FFA800;

	border: none;
}


.featurehead h2 {
	font-size: 1.5em;
	color: black;
}



.recentfeatures h2, .feeds h2, .categorylist h2 {
	font-size: 1.2em;
}



/*Styling of the lists, including the category, comment and time just below the titles on the front page which is a covert list ;).*/



.entrymeta {
	margin: 0 0 0.8em 0;

	font-size: 0.9em;

	text-align: left;

	color: #444;

	text-decoration: none;
}



.entrymeta ul {

	margin: 0;

	padding: 0;
}



.entrymeta li {
	display: inline;
	margin-right: 1em;
	margin-left: 0;
}



.entrymeta .category {
	padding: 0 0 0 16px;
	background: url(images/icon/category.png) no-repeat 0px 1px;
}

.entrymeta .category a, .entrymeta .comments a {

	color: black;
}

.entrymeta .category a:hover, .entrymeta .comments a:hover {

	color: #FFA800;

	border: none; /* This is important to prevent the front page breaking in IE */ 
}

.entrymeta .comments {
	padding: 0 0 0 16px;
	background: url(images/icon/comments.png) no-repeat 0px 1px;
}

.entrymeta .time {
	padding: 0 0 0 16px;
	background: url(images/icon/time.png) no-repeat 0px 1px;
}


/* Styling of the Feeds list and Categories list at the bottom of the page. */



.feeds ul {
	position:relative;
	bottom:-10px ;
	margin: 0;
	list-style-image: none; 
}
 
.feeds li {
	display: inline;
}

.feeds ul li a:hover {
	color: black;
}


.feeds ul, .categorylist ul, .sidebar_categories ul, .sidebar_pages ul, .sidebar_feeds ul {
	padding-left: 1em;
	margin-left: 0;
}

.feeds ul, .sidebar_feeds ul {
	list-style: none;
}

.categorylist ul, .sidebar_categories ul {
	list-style: disc url(images/icon/category.png) inside;
}

.sidebar_pages ul {
	list-style: disc url(images/icon/page.png) inside;
}

.page_item li {
	list-style: disc url(images/icon/page.png) inside;
}

.rss, .rssred {
	padding: 2px 0 0 24px;
	background: url(images/icon/rss.png) no-repeat 0px 4px;
}


.atom {
	padding: 2px 0 0 24px;
	background: url(images/icon/atom.png) no-repeat 0px 3px;
}

.feeds a, .categorylist a {
	color: #6699CC;
}

.feeds a:hover, .categorylist a:hover {
	color: black;
}

.sidebar_navigation .next {
	padding: 0 0 0 16px;
	background: url(images/icon/next.png) no-repeat 0px 5px;
	float: left;
	margin-left: 3px;
}

.sidebar_navigation .prev {
	padding: 0 0 0 16px;
	background: url(images/icon/prev.png) no-repeat 0px 5px;
	float: left;
}



.sidebar_navigation ul {

	list-style: none;

	margin-left: 0px;

	padding-left: 0px;

}



/* Formatting of images on front page */



.nonfeature img, .feature img {
	max-width: 50%;
}



.pagecontent img {
	max-width: 100%;
}



.options img {

	border: none;

}


/* This bit of CSS is taken directly from the default theme. 								*/
/* 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
}



/* This is the CSS for the structure of the post, page, category and archive pages. */



.pagecontent {

	float: right;

	display: inline;/* Should be unneccessary, but goddam IE needs it. */

	width: 60%;

	margin-right: 5%;

	padding-top: 15px;
}



.sidebar {

	float: left;

	display: inline;

	width: 25%;

	margin-left: 2%;

	padding-top: 15px;

}


.clear {

	clear: both;

	width: 100%;

}



.sidebar_categories {

	clear: both;

}



.entry {

	border-bottom: 1px solid #CCC;

}


/*Comment styling*/




.commentlist {

	list-style: disc url(images/icon/comments.gif) inside;

}



.commentbox {

	background-color: #EEEEEE;

}



.commentbox, .commentboxalt {

	padding: 5px 8px 0px 8px;

	color: black;

	font-size: 90%;

}



.commentbox span, .commentboxalt span {

	font-weight: bold;

}