/*
Theme Name: Anvil
Theme URI: http://spectacu.la/anvil/
Description: Dark customisable 2 column theme with widget support, parameterised CSS and all required graphics files to make for an easy customising experience.
Version: 1.5
Author: James R Whitehead of Spectacu.la
Author URI: http://spectacu.la/
tags: black, white, two-columns, right-sidebar, fixed-width

1.5	Add custom header image code and tidied up the header space.

1.4	Added gravatar support

1.3	Changed the CSS to use my CSS.php instead of using screen.php. Makes the CSS file a little less confusing for people to edit.
	Improved the typographic styling.
	Improved the commenting system. Added author highligh and unapproved comment highlight.
	Numerous other fixes and improvements.
	
1.2.2	Fixed IE7 positioning bug.

1.2.1	Fixed the contact form. Forgot to test it before release and had no idea I'd made a mess of a last min alteration. D'ho!

1.1	More fixes for IE plus the addition of a contact form and sorted the search page out.
*/

/* 
To change the colours used in this theme just edit the variables below.

Main body 
$colour_background = #333;
$colour_text = #6f6060;
$colour_heading = #303030;

//Anchor colour 
$colour_a = "#d60";
$colour_a_hover = "#a90";
// Post 
$colour_post = "#333";
$colour_post_background = "white";
$colour_post_highlight = "#f3f3f3";

// Comments 
$colour_comment = "#333";
$colour_comment_background_alt = #f8f8f8;
$colour_comment_border_alt = #ccc; 

$colour_comment_alt = "#333";
$colour_comment_background = white;
$colour_comment_border = white 

$colour_comment_auth = "#333";
$colour_comment_background_auth = "#FfFfe8";
$colour_comment_border_auth = #fcc; 


// Page header 
$colour_page_title = "white";
// tagline 
$colour_tagline = "#eee";
$colour_tagline_back = "#333";
$colour_tagline_login = "#666";
$colour_tagline_login_hover = #999;

// Post navigation footer 
$colour_navigation = "#666";
$colour_navigation_hover = "#ccc";
// Widget/Sidebar 
$colour_widget = "#666";// Widget text colour. 
$colour_widget_title = "#333";
$colour_widget_link = "#333";
$colour_widget_link_hover = "yellow";
$colour_widget_background = "transparent";
// There is nothing in the footer on this theme, but just in case.
$colour_footer_text = "silver";
*/
#new-comment-title,
.widgettitle,
.widget-centre h3,
.tagline h2,
.post-title h2,
.main-page-title {padding:0;margin:0;}
body {font:10pt verdana, arial,free-sans,sans-serif;line-height:1.25em}
a img {border:0}
a {color:$colour_a;text-decoration:none;font-weight:bold}
a:hover {color:$colour_a_hover;}
abbr {cursor:help}
.alignright {float:right;margin:5px 0 5px 5px;clear:right}
.alignleft {float:left;margin:5px 5px 5px 0;clear:left}
.aligncenter {display: block; clear:both;text-align: center;}
img[align="right"] {float:right;margin:5px 0 5px 5px;clear:right}
img[align="left"] {float:left;margin:5px 5px 5px 0;clear:left}
p,table,blockquote {margin-bottom:1em }
ol,ul {margin-top:1em;margin-bottom:1em }
li ol,li ul {margin-top:0;margin-bottom:0}
h1,h1 a {font-size:18pt;color:$colour_heading;font-weight:bold}
h2,h2 a {font-size:16pt;color:$colour_heading;font-weight:bold}
h3,h3 a {font-size:14pt;color:$colour_heading;font-weight:bold}
h4,h4 a {font-size:12px;color:$colour_heading;font-weight:bold}
h5,h5 a {font-size:10px;color:$colour_heading;font-weight:bold}
h6,h6 a {font-size:10px;color:$colour_heading;font-weight:normal}
code {background-color:$colour_post_highlight;color:$colour_text;display:block;padding:1em 0.5em;margin:0.5em 0}
.clear {clear:both;height:1px;width:1px;overflow:hidden;visibility:hidden}
.submit {border:0;cursor:pointer;background:url(style/submit.png) repeat-x top left $colour_heading;color:white;font-weight:bold;height:1.5em;padding:0 .5em}

/* Basic layout */
body {background:url(style/background.png) repeat-x top left $colour_background;color:$colour_text;margin:12px 0;padding:0;font:10pt arial,free-sans,sans-serif}
div.container {position:relative;width:950px;top:0;left:0;margin:0 auto}

div#content {width:630px;float:left}
div#sidebar {position:relative;width:310px;margin-left:640px}
div#footer {margin-top:0;clear:both;margin-left:12px;margin-right:3px;color:$colour_footer_text;}

/* end of basic layout */
div#header {
	position:relative;
	height:140px;
	width:950px
}
	a#mainlogo {
		position:absolute;
		top:0;
		left:0;
		width:128px;
		height:128px;
		display:block;
		overflow:hidden;
		z-index:10
	}
	h1.main-page-title {
		width:315px;
		height:90px;
		position: absolute;
		top: 0;
		left: 140px;
		overflow:hidden;
		z-index: 1;
		
		font-size:20pt;
		line-height:1.5em;
		word-spacing: -4px;
		font-variant:small-caps;
		font-weight:900;
		color:$colour_page_title;
	}
	div#header-content {
		position:absolute;
		right: -6px;
		top:0;
		height:95px;
		width:490px;
		background:url(style/header-content.png) no-repeat top right transparent
	}
		div.banner {
			width:468px;
			height:60px;
			background-color:#060;
			color:#fff;
			font-weight:bold;
			overflow:hidden;
			position: absolute;
			top: 8px;
			right: 14px;
		}
			div.banner .searchForm {
				float:left;
				z-index: 10;
				position: absolute;
				left:79px;
				top: 10px;
				width: 310px;
				height: 40px;
			}
			div.banner .searchTextField {
				position: absolute;
				left:0;
				top:0;
				padding:5px 5px 0;
				margin:0;
				height: 31px;
				width: 240px;

				border: solid 2px #999;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;

				font-size: 20px;
				font-weight: normal;
				font-size: 24px;
			}
				.focused {
					color: black;
				}
				.unfocused {
					color: #bbb;
				}
			div.banner .searchSubmitButton {
				position: absolute;
				right:0;
				top:0;
				padding:0;
				margin:0;
				height: 40px;
				width: 50px;

				border: solid 2px #999;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;

				font-size: 20px;
				font-weight: normal;
				color: #eee;
				background: url(style/submit.png) repeat-x top left #000;
			}
	div.tagline,
	div.tagline * {
		line-height:20px;
		font-size:10pt;
		background-color:$colour_tagline_back;
		color:$colour_tagline;
		font-weight:normal;
	}
	div.tagline {
		position: absolute;
		top: 95px;
		left: 0;
		width: 950px;
		height: 20px;
	}
		div.tagline h2 {
			position: absolute;
			left: 140px;
			font-weight:bold;
		}
		
		div.login {
			position:absolute;
			right:10px;
			height: 20px;
			color:$colour_tagline_login;
			line-height:20px;
		}
			div.login a {
				color:$colour_tagline_login;
				font-size:8pt
			}
			div.login a:hover {
				color:$colour_tagline_login_hover;
			}

/* Post/page  section */
div.post-title h2 a {line-height:1.5em} 

.post-body{
	line-height:1.5em;
	word-spacing:0.05em;
	letter-spacing:0.01em;
}
.post-body iframe,
.post-body img {
	margin: 0.25em 0.5em;
}

/*For in content ads */
.post-body iframe[align="left"] {
	margin:0 10px 10px 0;
	float:left;
}
.post-body iframe[align="right"] {
	margin-right: 0;
	float:right;
}

.post-body blockquote {
	border-left: solid 5px $colour_post_highlight;
	padding-left: 1em;
	font-style:italic
}
.post-body p { margin:1em 0}
.post-body ul,
.post-body ol {
	margin:1em 2em;
	padding:0;
	line-height:1.25em
}

.post-body ol ul,
.post-body ul ol,
.post-body ul ul,
.post-body ol ol{
	margin:0 1.5em;
	padding:0;
	line-height:1.25em
}

div.post-content {background:url(style/post.png) repeat-y 0 0 transparent;color:$colour_post;width:600px;padding:0 18px 0 12px;overflow:hidden}
div.post-frame {margin-bottom:10px;width:630px;position:relative;/* Useful If I want to position things inside a post */z-index:10}
span.post-frame-top {width:630px;height:16px;background:url(style/post.png) no-repeat -631px 0px transparent;display:block}
span.post-frame-bottom {width:630px;height:16px;background:url(style/post.png) no-repeat -1261px 0px transparent;display:block}
div.post-navigation {margin-bottom:16px}
.previous-link {float:left}
.next-link {float:right}
div.post-navigation-links a {color:$colour_navigation;font-size:14pt}
div.post-navigation-links a:hover {color:$colour_navigation_hover;}
div.post-navigation-links {background:url(style/post-navigation-links.png) repeat-y $colour_background;background-position:-627px 0;color:$colour_navigation;padding:5px 10px;text-align:center;}
span.post-navigation-top,
span.post-navigation-bottom {overflow:hidden;/* Not sure where the stuff that is forcing the overflow is coming from but IE can see it. This is here rather than the IE style sheet as it is harmless.*/display:block;width:626px;height:8px;background-image:url(style/post-navigation-links.png);background-repeat:no-repeat}
span.post-navigation-top {background-position:0 0}
span.post-navigation-bottom {background-position:0 -11px}

div.post-title {background:url(style/title-background.png) repeat-y top right $colour_post_background;}
div.post-title  h2 {background:url(style/title-roundel.png) no-repeat left top transparent;background-position:0 50%;line-height:1.5em;padding-left:30px}
div.post-header {margin-bottom:10px}
.time-date-owner {font-size:8pt;margin-top:0.5em}
div.post-footer {
	text-align:center;
	clear:both;
	background-color:$colour_post_highlight;
	margin-bottom:15px;
	line-height:2em
}
div.post-footer span {padding:0.25em 0.5em}
div.page-links {display:block;text-align:right;margin-bottom:15px}
/* End of post/page  section */

/* Widgets */
div.widget a.rss-link {position:absolute;top:-8px;right:18px;height:30px;width:30px;overflow:hidden}
div.widget {background:url(style/widget.png) repeat-y 0 0 transparent;margin-bottom:42px;position:relative;top:16px;width:310px}
span.widget-top {width:310px;height:16px;background:url(style/widget.png) no-repeat -313px 0px transparent;display:block;position:absolute;top:-16px}
span.widget-bottom {width:310px;height:16px;background:url(style/widget.png) no-repeat -625px 0px transparent;display:block;position:absolute;bottom:-16px}
div.widget-centre {background-color:$colour_widget_background;color:$colour_widget;width:284px;padding:0 10px}
div.widget-centre h3 {margin-bottom:0.5em;color:$colour_widget_title;}
div.widget-centre ul, div.widget-centre ol {padding:0;margin:0}
div.widget-centre ul ul, div.widget-centre ol ol,
div.widget-centre ul ol, div.widget-centre ol ul {padding:0;margin-left:0px}
div.widget-centre li {list-style-position:inside;line-height:1.5em}

/* My default navigation widget */
div.icit-navigation-widget div.widget-centre li.current_page_item li a, 
div.icit-navigation-widget div.widget-centre li.current-cat li a,
div.widget-centre a {color:$colour_widget_link;}
div.icit-navigation-widget div.widget-centre li.current_page_item li a:hover, 
div.icit-navigation-widget div.widget-centre li.current-cat li a:hover, 
div.icit-navigation-widget div.widget-centre li.current_page_item a,
div.icit-navigation-widget div.widget-centre li.current-cat a, 
div.widget-centre a:hover { color:$colour_widget_link_hover;}

div.icit-navigation-widget div.widget-centre ul {
	padding:0;
	margin:0;
	list-style-type:none;
}
div.icit-navigation-widget div.widget-centre ul li {
	background:url(style/widget-li.png) no-repeat bottom left #333;
	color:white;
	margin:5px 0;
	padding-bottom:5px;
	width:284px;
	list-style-position:outside; /*IE6 seems to ignore the fact that I said list-style-type:none; */
}
div.icit-navigation-widget div.widget-centre ul li a {
	padding:5px 0 0 10px;
	display:block;
	background:url(style/widget-li.png) no-repeat top left white;
}
div.icit-navigation-widget div.widget-centre ul ul li {
	background-image:none;
	background-color:transparent;
	padding:0;
	margin:0
}
div.icit-navigation-widget div.widget-centre ul ul li a{
	padding-left:20px;
	display:block;
	background-image:none;
	background-color:transparent;
	padding-bottom:0
}

/* Fix The default comment widget  and calendar  widget */
table#wp-calendar {margin:0 auto 10px auto}
table#wp-calendar td {padding:4px;text-align:center;border:solid 1px #f3f3f3}
table#wp-calendar caption {font-size:18pt;margin:0 auto 10px auto}
div.widget_calendar h3 {display:none} /* Title didn't look right */
div.widget_search #searchform input#s {width:284px;border:solid 2px;margin-bottom:0.25em}

/* Comments */
#new-comment-title {margin-bottom:0.5em}
#comment-title {display:inline;margin-right:10px}
.comments-trackbacks-pings {
	padding-top:10px;
	width:600px;
	overflow:hidden
}

#commentsblock{margin-top:30px}
#comments-block .trackback-url {text-align:right;}
#comment-title {margin: 0 0.5em 0.5em 0; }
.comment-footer {text-align:right; font-style:italic}
#comments_rss_link {text-align:right;}
.comments-trackbacks-pings {margin-bottom:1em;}
#commentlist {list-style-type:none;margin:1em 0;padding:0;width:600px;clear:both}
.comment-text {overflow:hidden;}

#commentlist li {
	border-top:solid 1px $colour_comment_border;
	border-bottom:solid 1px $colour_comment_border;
	background-color:$colour_comment_background;
	color:$colour_comment;

	margin:1em 0;
	padding:0.25em 0.5em;
	margin-bottom: 1em;
	font-size: 9pt;
}
#commentlist li.alternate {
	background-color:$colour_comment_background_alt;
	color: $colour_comment_alt;
	border-color: $colour_comment_border_alt;
}
#commentlist li.author {
	background-color:$colour_comment_background_auth;
	color: $colour_comment_auth;
	border-color: $colour_comment_border_auth;
}
.comment-header { margin-bottom:0em; position:relative;line-height:24px; font-size: 18px; }
.comment-header .avatar {
	position:absolute;
	right: 0;
	top: 0;
}

#commentlist li.unapproved {border:solid 2px red;}
#new-comment-title {margin-bottom:1em;}
.new-comment p {margin:0 0 0.75em 0;}
.new-comment {
	margin-top:10px;
	padding:10px 30px;
	background:url(style/comment-back.png) repeat-x top left $colour_post_background;
	color:$colour_post;
}
#comment {width:534px}


/* Tag cloud */
.tag-cloud-links a {font-size:large}
.tag-cloud-links {position:relative;top:10px;padding:5px 10px;width:579px;background:url(style/tag-cloud.png) repeat-y top right $colour_post_background;color:$colour_post;margin-bottom:25px}
.tag-cloud-links-top {display:block;width:598px;height:10px;position:absolute;top:-10px;left:0;color:$colour_post;background:url(style/tag-cloud.png) no-repeat top left $colour_post_background;}
.tag-cloud-links-bottom {display:block;width:598px;height:10px;position:absolute;bottom:-10px;left:0;color:$colour_post;background:url(style/tag-cloud.png) no-repeat bottom left $colour_post_background;}
.excerptmore {display:block;height:1.5em;overflow:hidden;text-align:right;clear:both;margin-top:-1em}
.excerpt-thumb-link {float:left;margin-right:5px}

#contactform {margin-top:10px;padding:10px 30px;background:url(style/comment-back.png) repeat-x top left $colour_post_background;}
#contactform sup {vertical-align:top;margin-left:10px}
#contactform label {width:240px;float:left;padding:0}
#contactform .text {width:290px;border:solid 1px silver;font-size:12px;line-height:14px;padding:2px 0}
#contactform .textarea {width:530px;border:solid 1px silver;padding:4px 0}
#contactform #div_icit_submit_3 {width:530px;text-align:right}
#contactform p.paragraph,
#contactform #label_icit_text {width:100%;display:block;float:none;font-size:16pt;line-height:1.25em;margin:0}
#contactform .contactformrow {width:100%;margin-bottom:0.5em;overflow:hidden}
#contactform #div_contactform_recipient {display:none}

.post-body table {
	width: 100%;
	display:block;
	border-collapse: collapse;
	border:double 3px #ccc;
	font-size: 12px;
}

.post-body table tr.alternate {
	background-color: #f9f9f9;
}

.post-body table td {
	padding: 0.5em 1em;
	vertical-align: top;
	border-left: solid 1px #ccc;
}

.post-body tfoot, .post-body tfoot tr, .post-body tfoot td{
	text-align: center;
	font-size: 10px;
	color: #f9f9f9;
	background-color: #999;
	padding: 0;
}

.post-body table th {
	padding: 0.5em 1em;
	text-align: left;
	background-color: #222;
	color: #f9f9f9;
}

.wp-caption {
	padding: 5px 0;
	text-align:center;
	border: solid 1px #eee;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color:$colour_post_highlight;
}
.wp-caption img {
	margin: 0;
}

p.wp-caption-text{
	font-size: 10px;
	margin: 0;
	padding: 0.25em 0 0 0;
}