/*
Theme Name:Blend
Theme URI:http://spectacu.la/blend/
Description: A very customisable theme with options page that gives you control over sIFR fonts, Sidebar Position, Header content, Colour schemes and the Navigation Bar. Includes tagging and two widget spaces. Has optional footer page links. New colour schemes can be created very easily using the supplied graphics files and parameterised CSS system.
Version: 1.3
Author:James R Whitehead of Spectacu.la
Author URI:http://spectacu.la/
Tags: brown,red,black,two-columns,left-sidebar,right-sidebar,fixed-width,theme-options,threaded-comments,custom-header,custom-colors

v1.3  Added threaded comments, footer links (David Coveney)
v1.2.2 	Fixed a slight problem with Safari that I created for myself. Doh! I blame the buggy hell spawn that was safari v3 under windows. v4 seems better at matching the Mac version.
v1.2.1 	Fixed search widget under 2.6.
		Added caption support.
*/

/* For times when things don't quite go right. */
.error{
	color:red;
	background-color:white;
	line-height:2em;
	text-align:center;
	display:block;
} 
/* I would use min-height to do this but ie6 gets in the way of that. */
.min-height-prop{
	height:420px;
	float:right;
	width:1px;
	visibility:hidden;
	overflow:hidden;
}
/* invisible blocks to force open boxes with floats inside.*/
.clear{
	display:block;
	height:1px;
	overflow:hidden;
	clear:both;
	visibility:hidden
}
/* I would be using this method instead of the clear but IE6 is a PITA.
div.post-body:after {
	content:".";
	display:block;
	clear:both;
	height:0;
	visibility:hidden
} */

/*h1,h2,h3,h4,h5,h6{margin:0}*/
a{text-decoration:none; outline: none;}
.post a{font-weight:bold;}
a:hover{ text-decoration:underline;}
a img{border:0}

body{
	margin:0;
	padding:0 0 4em 0;
	background-color:$body_foot_colour;
	font:84% verdana, arial,free-sans,sans-serif
}
/* 
Safari has slightly more space between words that can result in something wrapping around that in other browsers would not. 
Normally not a problem but for the horizontal navigation  menu that could mean someone using firefox would not be aware that 
their almost full menu is on two lines in safari.
*/
/*body.safari{ word-spacing:-0.2em}*/

/* The three gradients on the back ground outside the main container. */
#background-layer-1{background:url(styles/$folder/$background_layer_1) repeat-x top center $body_colour}
#background-layer-2{background:url(styles/$folder/$background_layer_2) no-repeat top center transparent}
#background-layer-3{background:url(styles/$folder/$background_layer_3) repeat-x 0 100% transparent}

#container { /* Background colour is set to the first colour of the gradient that sits at the top of the main content area beneath the navigation bar. */
	width:920px;
	margin:0 auto;
	background-color:$content_top;
	color:$footer1_text;
}

/* Header */
#header{
	background-color:$header_back;
	color:$header_text;
	overflow:hidden;
	width:920px;
}
#titles{
	display:inline; /*Ie6 and its double margin bug. */
	float:left;
	overflow:hidden;
	margin:20px 0 20px 30px;
	width:850px;
}
.with-links #titles{
	width:700px;
}
a#header_image {
	margin-right:20px;
	float:left;
}
#title-text { float:left;}

h1#main-page-title {
	line-height:1.25em;
	padding:0;
	margin:0;
}
h2#tag-line{
	padding:0;
	margin:0 0 0 50px;
}
.with-image h2#tag-line{margin:0;}

.sIFR-hasFlash h1#main-page-title{
	line-height:1.30em
}
.sIFR-hasFlash h2#tag-line{
	line-height:1.5em
}

/* Links block */
#header #links{
	display:inline;
	float:right;
	padding:0;
	width:160px;
	margin: 10px 10px 10px 0;
	overflow:hidden
}
#header #links ul{
	color:$header_text;
	padding-left:30px;
	margin:0;
}
#header #links a{
	color:$header_link;
	background-color:$header_back;
	text-decoration:none;
	display:block;
	padding:0 0.25em
}
#header #links li.current_page_item a,
#header #links li a:hover  {
	color:$header_link_hover;
	background-color:$header_link_back_hover;
}

/* Content border and container*/
#content-section { /* The area at the bottom of the page with the horizontal widget space. */
	background-color:$footer1_back;
	color:$footer1_text;
	padding-bottom:20px;
	clear:both
}
#content-outer-1 { /* Set to the body colour so it looks like the header and footer fade out. */
	background:url(styles/$folder/$content_1) repeat-x left top $body_colour;
	margin-top:20px
}
#content-outer-2 { /* The gradient the fades into the footer. */
	background:url(styles/$folder/$content_2) repeat-x left bottom transparent;
	overflow:hidden;
	padding:0 20px
}
#content-vertical-edge{ /* Border around the content */
	background:url(styles/$folder/$content) repeat-y 0 top $content_back;
	color:$content_text;
	width:880px
}
#content-top-edge{ /* Border around the content */
	background:url(styles/$folder/$content_top_edge) no-repeat 0 0 transparent
}
#content-bottom-edge{ /* Border around the content */
	background:url(styles/$folder/$content_bottom_edge) no-repeat 0 bottom transparent;
	padding:10px 20px
}

/* Content */
#content textarea,
#content input {
	background-color:$content_back;
	color:$content_text;
	border: solid 1px $content_text;
	padding: 0;
}
input[type=button],
input[type=submit]{cursor:pointer;}
.submit {cursor:pointer;}
#content { /* The main body inside the border */
	background-color:$content_back;
	color:$content_text;
	padding:0;
	width:840px;
	overflow:hidden
}
.trackback-url { font-size:8pt}
#content a {
	color:$content_link1;
}
#content a:hover{
	color:$content_link1_hover;
}
#content .post-title a:hover, 
#content .post-title a, 
#content .post-title { background-color:$content_highlight;font-weight: normal; font-size: 15pt}
#content .post-title h2 { background-color:$content_highlight; font-weight: normal;line-height:1.5em; font-size: 15pt}

#posts{
	width:620px;
	min-height:420px;
	float:left;
	overflow:hidden;
	background-color:$content_back;
	color:$content_text;
	padding:10px 0;
}

#posts img { /*Scale any oversized image to fit the available space. Will overflow in <= ie6. */
	max-width:100%
}
.post-author {font-size: 8pt;padding-right:60px;}
.post { margin-bottom:40px;position:relative;z-index:0;line-height:1.5em; } 
.post  .post-title { padding:0.25em 60px 0.25em 10px;}
.post  .post-title h2 { margin:0; padding:0;}
.post  .post-title h2 a { display:block}
.post-body{
	width:620px;
	word-spacing:0.05em;
	letter-spacing:0.01em;
}
.post-body a {text-decoration:underline}
.post-body img {margin: 0.25em 0.5em;}
.post-body img[align="left"] {margin-left: 0;float:left;}
.post-body img[align="right"] {margin-right: 0; float:right;}
.post-body .alignright {margin-right: 0; margin-left:0.5em; float:right;}
.post-body .alignleft  {margin-left: 0; margin-right:0.5em; float:left;}
.post-body .aligncenter {margin: 1em auto; display:block}

.post-body img.left{margin-left: 0;}
.post-body img.right{margin-right: 0;}
.post-body blockquote {border-left: solid 5px $content_highlight; padding-left: 1em;font-style:italic}
.post-body p { margin: 0 0 1em 0}
.post-body ul,
.post-body ol { margin:1em 3em;padding:0;}
.post-body ol ul,
.post-body ul ol,
.post-body ul ul,
.post-body ol ol{ margin:0 1.5em;padding:0;}
.post-body .edit-post {font-size:8pt;}
.post-footer .page-links {text-align:right; margin:1em 0 0 0;}
.post-footer .page-links a {font-size:16pt;padding:0 0.5em}
.post .post-header{ margin-bottom: 1em}

.post-date {
	width:50px;
	height:4.7em;
	position:absolute;
	z-index:1;
	top:-5px;
	right:5px;
	color:$content_text;
	background-color:$content_back;
	border:solid 1px $content_link2_back;
	overflow:hidden
}
.post-month{
	display:block;
	width:48px;
	text-align:center;
	position:absolute;
	top:1px;
	left:1px;
	color:$content_link2_text;
	background-color:$content_link2_back;
	font-weight: bold;
	height:1.25em;
	line-height:1.25em
}
.post-year{
	display:block;
	width:48px;
	text-align:center;
	position:absolute;
	bottom:1px;left:1px;
	font-weight: bold;
	height:1.25em;
	line-height:1.25em;
	font-size:75%;
	color: $content_link1;
	background-color:$content_highlight;
}
.post-day{
	line-height:1em;
	font-size:220%;
	display:block;
	width:48px;
	height:1em;
	position:absolute;
	letter-spacing:-0.1em;
	text-align:center;
	font-weight: 900;
	z-index:10;
	top:0.625em
}


/* Comments */
fieldset, form {border:0 none; padding:0;}
#comments {margin-top: 16px;}
#commentlist {padding-left: 0px;}
#commentlist li {list-style-type: none; margin-left: 0px;}
#commentlist li.depth-1{width: 620px;}
#commentlist li.depth-1 li {margin-left: 20px; }

#commentlist, #commentlist ul, #commentlist li { padding:0;margin:0}
#commentlist ul ul {
	max-width:100%;
	padding-left: 0px;
}
#commentlist li > div {
	padding: 5px;
	border: solid 1px;
	margin-bottom: 1em;
	min-height:1px;
}

#commentlist li.even > div {		background-color: $comment_back;}
#commentlist li.odd > div {			background-color: $comment_altern_back;}
#comments li.bypostauthor > div:first-child .avatar {border:solid 2px #aa0;padding:1px;background-color:#fff;}

#commentlist .toggle {
	cursor:pointer;
	border:solid 1px;
	background-color: #eeeeff;
	padding: 5px;
	line-height: 16px;
	margin-bottom: 1em;
	max-width:100%;
}
#commentlist .toggle span.posterName {
	font-weight:bold;
	font-style:oblique;
}

#commentlist .depth-1 div  {border-color:$comment_lev1}
#commentlist .depth-2 div  {border-color:$comment_lev2}
#commentlist .depth-3 div  {border-color:$comment_lev3}
#commentlist .depth-4 div  {border-color:$comment_lev4}
#commentlist .depth-5 div  {border-color:$comment_lev5}
#commentlist .depth-6 div  {border-color:$comment_lev6}
#commentlist .depth-7 div  {border-color:$comment_lev7}
#commentlist .depth-8 div  {border-color:$comment_lev8}
#commentlist .depth-9 div  {border-color:$comment_lev9}
#commentlist .depth-10 div {border-color:$comment_lev10}

#commentlist .depth-2  .toggle {background-color:$comment_lev2;border-color:$comment_lev2_toggle}
#commentlist .depth-3  .toggle {background-color:$comment_lev3;border-color:$comment_lev3_toggle}
#commentlist .depth-4  .toggle {background-color:$comment_lev4;border-color:$comment_lev4_toggle}
#commentlist .depth-5  .toggle {background-color:$comment_lev5;border-color:$comment_lev5_toggle}
#commentlist .depth-6  .toggle {background-color:$comment_lev6;border-color:$comment_lev6_toggle}
#commentlist .depth-7  .toggle {background-color:$comment_lev7;border-color:$comment_lev7_toggle}
#commentlist .depth-8  .toggle {background-color:$comment_lev8;border-color:$comment_lev8_toggle}
#commentlist .depth-9  .toggle {background-color:$comment_lev9;border-color:$comment_lev9_toggle}
#commentlist .depth-10 .toggle {background-color:$comment_lev10;border-color:$comment_lev10_toggle}

#trackbackList { margin-left: 2em;}
#trackbackList .says {display:none}
#trackbackList li { margin-bottom: 1em;}

.vcard { font-size: 16px; }
.avatar {
	float: left;
	margin-right: 5px;
}
.comment div.commentmetadata {
	margin-bottom: 5px;
}
.comment div.reply {
	width:100%; /*IE7 FIX*/
}

.comment div.reply a {
	text-align:right;
	padding-right: 21px;
	overflow:hidden;
	background-color:#666;
	display:block;
	height: 20px;
	margin-top: 5px;
	background: url(images/reply.gif) no-repeat 100% 0 transparent;
}
.comment div.reply a:hover {
	background-position: 100% -16px;
}

.toggle span.upArrow {
	width: 16px;
	height: 16px;
	margin-left: 10px;
	display: inline-block;
	overflow: hidden;
	background: url(images/uparrow.gif) no-repeat 0 0 transparent;
}
.toggle:hover span.upArrow { /* This'll fail in IE6. */
	background-position: 0 -16px;
}

#commentForm { margin-top: 20px;width:100%}
#commentForm label {font-weight:bold;display:inline}
#author, #email, #url, #comment {
	border: solid 1px #ddd;
	margin-bottom: 10px;
	vertical-align: text-top;
	width: 50%;
}
#author, #email, #url{
	margin-right:10px;
}


#comment {display:block;width: 100%;max-width: 620px}
.commentSubmit {text-align: right;}
.commentSubmit a {color: #900;margin-right:2em;}
.commentSubmit a:hover {color: #f00;}

/* Next and previous page links */
#page-navigation{
	padding:0.2em 0;
	margin-top:2em;
	height:2em;
	border-top:solid 2px $content_highlight;
	font-size:140%
}
#page-navigation a {
	background-color:$content_link2_back;
	color:$content_link2_text;
	line-height:2em;
	text-decoration:none;
	display:block;
	padding:0 1em
}
#page-navigation a:hover{
	background-color:$content_link2_hover_back;
	color:$content_link2_hover_text
}
.previous_posts { float:left }
.next_posts { float:right }

/* ---------------------------------------------------------------- Sidebar ----------------------------------------------------------------*/
#sidebar{
	width:200px;
	overflow:hidden;
	background-color:$content_back;
	color:$content_text;
	padding-top:10px
}
#sidebar .widget{
	margin-bottom:2.5em
}
/* Sidebar options */
.sidebar-off #sidebar{display:none} /* Sidebar code will not be run, but just in case. */
.sidebar-off #posts {
	display:inline; /* <-- IE6 float bug hack */
	float:left;
	margin:0 0 0 110px;
	padding-top:40px
}
/* If the Sidebar is set to the right. */
.sidebar-right {background:url(styles/$folder/$sidebar_right) repeat-y 629px 0} /* Vertical devide.*/
.sidebar-right #posts{float:left}
.sidebar-right #sidebar{float:right}
/* If the Sidebar is set to the left. */
.sidebar-left {background:url(styles/$folder/$sidebar_left) repeat-y 199px 0} /* Vertical devide.*/
.sidebar-left #posts{float:right}
.sidebar-left #sidebar{float:left}

#content-footer {
	margin:20px 0 0 31px;
	width:860px;
}
#content-footer .widget {
	width:266px;
	display:inline;
	float:left;
	margin:0 10px;
}
#footer {
	background:url(styles/$folder/$footer_img) no-repeat center bottom $footer2_back;
	clear:both;
	color:$footer2_text;
	text-align:center;
	font-size:80%;
	padding:12px 0;
	width:920px;
}
#footer a {
	color: $footer2_text;
	padding-bottom:1px;
	border-bottom: dotted 1px $footer2_text
}

#footer a:hover {
	color: $footer2_text_hover;
	border-bottom: solid 1px $footer2_text;
	text-decoration: none;
	
}

/*sIFR stuff, to be removed when I move to sIFR 3. */
.ssIFR-hasFlash .post .post-title a {line-height: 1.25em;margin:0.25em 0;}
.sIFR-hasFlash .widget .widgettitle h3{line-height:1.3em;margin-bottom:5px}
/* These are standard sIFR styles... do not modify */
.sIFR-flash {visibility:visible !important;margin:0;}
.sIFR-replaced {	visibility:visible !important;}
span.sIFR-alternate {position:absolute;left:0;top:0;width:0;height:0;display:block;overflow:hidden;}
/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {display: none !important;}




/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
All bellow this point is widget stuff.

Default widget layout which ever widget space it resides in.
The colours will be defined outside of this section as they will be different 
in the various locations. 
 */
.widget_archives ul li a,
.widget_links ul li a,
.widget_categories ul li a,
.widget_catgories ul li a,
.widget_pages ul li a {
	padding:0 5px 0 24px;
	background-position:6px 4px;
}
/* Defaul UL child links*/
.widget_archives ul ul li a,
.widget_links ul ul li a,
.widget_categories ul ul li a,
.widget_catgories ul ul li a,
.widget_pages ul ul li a {
	padding:0 5px;
}
/*Style applied to some of the default widgets */
.widget ul {
	margin:0;
	padding: 0 0 0 20px;
}
.widget ul ul {
	margin-left: 1em;
	font-size:8pt
}

.widget ul li {
	margin-bottom:0.25em;
	padding:0 0 0.25em 0;
	border-bottom:solid 1px;
}
.widget_archives ul,
.widget_links ul,
.widget_pages ul,
.widget_categories ul,
.widget_catgories ul {
	list-style-type: none;
	padding:0;
}
.widget_archives ul li,
.widget_links ul li,
.widget_pages ul li,
.widget_categories ul li,
.widget_catgories ul li {
	margin-bottom:5px;
	padding-bottom:0;
	border-bottom:0
}
.widget_links ul li a,
.widget_archives ul li a,
.widget_pages ul li a,
.widget_categories ul li a,
.widget_catgories ul li a {
	display:block;
	line-height:2em;
	text-decoration:none;
	font-weight:normal; 
	background:url(styles/$folder/$li_a) no-repeat 6px 50%;
}
.widget_pages ul li.current_page_item a,
.widget_catgories ul li.current-cat a,
.widget_categories ul li.current-cat a,
.widget_archives ul li a:hover,.widget_links ul li a:hover,
.widget_pages ul li a:hover,
.widget_categories ul li a:hover,
.widget_catgories ul li a:hover{
	background-image:url(styles/$folder/$li_a_hover);
	text-decoration:none;
}
.widget_categories ul li.current-cat li a,
.widget_catgories ul li.current-cat li a,
.widget_pages ul li.current_page_item li a,
.widget_archives ul ul li a,
.widget_links ul ul li a,
.widget_pages ul ul li a,
.widget_categories ul ul li a,
.widget_catgories ul ul li a{
	padding-left:0.5em;
	border-bottom:1px solid;
	background-image:none;
}
.widget .widgettitle{
	background:url(styles/$folder/$content_title_icon) no-repeat 0 50% transparent;
	padding-left:20px;
	margin:0 0 10px 0;
}
.widget .widgettitle h3{
	font-size:130%;
	margin:0;
	padding:0;
	font-weight:normal;
	line-height:1.75em
}
/* Sidebar widget changes based on left positioning, default is right. */

.sidebar-left .widget_archives ul li a,
.sidebar-left .widget_links  ul li a,
.sidebar-left .widget_categories  ul li a,
.sidebar-left .widget_catgories  ul li a,
.sidebar-left .widget_pages  ul li a{
	padding:0 24px 0 5px;
	background-position:180px 50%;
}
.sidebar-left .widget_archives  ul ul li a,
.sidebar-left .widget_link  ul ul li a,
.sidebar-left .widget_pages  ul ul li a,
.sidebar-left .widget_categories  ul ul li a,
.sidebar-left .widget_catgories  ul ul li a {
	padding:0 5px
}

/* Content space widget colours. */
#content-footer .widget ul li {
	border-color: $footer1_link2_back
}

#content .widget ul li {
	border-color: $content_highlight;
}

#content .widget_links ul li a,
#content .widget_archives ul li a,
#content .widget_pages ul li a,
#content .widget_categories ul li a,
#content .widget_catgories ul li a {
	color:$content_link2_text;
	background-color:$content_link2_back;
}

#content .widget ul li a:hover,
#content .widget_pages ul li.current_page_item a,
#content .widget_categories ul li.current-cat a,
#content .widget_catgories ul li.current-cat a,
#content .widget_archives ul li a:hover,
#content .widget_links ul li a:hover,
#content .widget_pages ul li a:hover,
#content .widget_categories ul li a:hover,
#content .widget_catgories ul ul li.current-cat a,
#content .widget_pages ul ul li.current_page_item a,
#content .widget_categories ul ul li.current-cat a,
#content .widget_catgories ul ul li.current-cat a,
#content .widget_pages ul li.current_page_item li a:hover,
#content .widget_categories ul li.current-cat li a:hover,
#content .widget_catgories ul li.current-cat li a:hover,
#content .widget_archives ul ul li a:hover,
#content .widget_links ul ul li a:hover,
#content .widget_pages ul ul li a:hover,
#content .widget_categories ul ul li a:hover,
#content .widget_catgories ul ul li a:hover{
	color:$content_link2_hover_text;
	background-color:$content_link2_hover_back;	
}
/* Child links */
#content .widget_categories ul li.current-cat li a,
#content .widget_catgories ul li.current-cat li a,
#content .widget_pages ul li.current_page_item li a,
#content .widget_archives ul ul li a,
#content .widget_links ul ul li a,
#content .widget_pages ul ul li a,
#content .widget_categories ul ul li a,
#content .widget_catgories ul ul li a{
	color:$content_link1;
	background-color:$content_back;
	background-image:none;
	border-color:$content_highlight;
}
/* Footer widget space space widget colours. */
#content-footer a {
	color:$footer1_link1;
	background-color:$footer1_back;
}
#content-footer a:hover {
	color:$footer1_link1_hover;
	background-color:$footer1_back;
}
#content-footer .widget .widgettitle{
	color:$footer1_text;
	background-image:url(styles/$folder/$footer_title_icon);
}
#content-footer .widget_links ul li a,
#content-footer .widget_archives ul li a,
#content-footer .widget_pages ul li a,
#content-footer .widget_categories ul li a,
#content-footer .widget_catgories ul li a {
	color:$footer1_link2_text;
	background-color:$footer1_link2_back;
	font-weight:normal;
}
#content-footer .widget_pages ul li.current_page_item a,
#content-footer .widget_catgories ul li.current-cat a,
#content-footer .widget_categories ul li.current-cat a,
#content-footer .widget_archives ul li a:hover,
#content-footer .widget_links ul li a:hover,
#content-footer .widget_pages ul li a:hover,
#content-footer .widget_categories ul li a:hover,
#content-footer .widget_catgories ul li a:hover,
#content-footer .widget_pages ul ul li.current_page_item a,
#content-footer .widget_categories ul ul li.current-cat a,
#content-footer .widget_catgories ul ul li.current-cat a,
#content-footer .widget_pages ul li.current_page_item li a:hover,
#content-footer .widget_categories ul li.current-cat li a:hover,
#content-footer .widget_catgories ul li.current-cat li a:hover,
#content-footer .widget_archives ul ul li a:hover,
#content-footer .widget_links ul ul li a:hover,
#content-footer .widget_pages ul ul li a:hover,
#content-footer .widget_categories ul ul li a:hover,
#content-footer .widget_catgories ul ul li a:hover{
	color:$footer1_link2_hover_text;
	background-color:$footer1_link2_hover_back;
}
#content-footer .widget_catgories ul li.current-cat li a,
#content-footer .widget_categories ul li.current-cat li a,
#content-footer .widget_pages ul li.current_page_item li a,
#content-footer .widget_archives ul ul li a,
#content-footer .widget_links ul ul li a,
#content-footer .widget_pages ul ul li a,
#content-footer .widget_categories ul ul li a,
#content-footer .widget_catgories ul ul li a{
	color:$footer1_link1;
	background-color:$footer1_back;
	background-image:none;
}

#content-footer .widget_links ul li a,
#content-footer .widget_archives ul li a,
#content-footer .widget_pages ul li a,
#content-footer .widget_categories ul li a,
#content-footer .widget_catgories ul li a {
	background-image:url(styles/$folder/$li_a2);
}
#content-footer .widget_links ul li a:hover,
#content-footer .widget_archives ul li a:hover,
#content-footer .widget_pages ul li a:hover,
#content-footer .widget_categories ul li a:hover,
#content-footer .widget_catgories ul li a:hover {
	background-image:url(styles/$folder/$li_a2_hover);
}


#wp-calendar{
	width:100%;
}
#wp-calendar tr{
	text-align:center
}
#wp-calendar td{
	border:solid 1px;
	padding:0;
	margin:0;
}
#wp-calendar td a{
	display:block;
	width:100%;
}
#wp-calendar td a:hover{
	text-decoration:none;
}
#wp-calendar td.pad{
	border:0
}

#footer-calendar table { border-color:$footer1_link2_back; color:$footer1_text;}
#footer-calendar td { border-color:$footer1_link2_back; color:$footer1_text;}
#footer-calendar td a { color:$footer1_link2_text;background-color:$footer1_link2_back;}
#footer-calendar td a:hover{ color:$footer1_link2_hover_text;background-color:$footer1_link2_hover_back;	}

#content #wp-calendar td{ border-color:$content_link2_hover_back; color:$content_text;}
#content #wp-calendar td a { color:$content_link2_text;background-color:$content_link2_back;}
#content #wp-calendar td a:hover{ color:$content_link2_hover_text;background-color:$content_link2_hover_back;	}

/* default Search form manipulation */
#content .widget_search {
	padding:0 0 10px 0;
	border-bottom:1px solid $content_highlight;
}
#content .widget_search *{
	display:inline
}

#content .widget_search input{
	margin:0;
	padding:0;
	line-height:1.25em
}
#content .widget_search .s,
#content .widget_search #s{
	width:130px;
	margin:0 5px 0 0
}
#content .widget_search .submit {
	margin-top: 5px;
	padding: 0 10px
}
#content .widget_search br{display:none} /* I didn't know that would work. Cool.:D*/
/* End of widget customisation */

/*---------------------------------------------------------------- Navigation bar with drop down menus ----------------------------------------------------------------*/
#nav {
	color:$nav_text;
	background-color:$nav_back;
	border:solid 1px;
	border-color:$nav_border1 $nav_border2 $nav_border2 $nav_border1;
	border-bottom:0;
	margin-bottom: 20px;
	width: 918px; /*Fix a little problem with IE haslayout. */
}
.ie-quirk-mode #nav  {
	width: 920px;
}
.with-breadcrumb #nav {
	margin-bottom: 10px;
}
#nav .clear{		/* Use my clear prop as the bottom border.  :P */
	visibility:visible;
	background-color:$nav_border2;
}

#nav * {
	list-style-position: inside;
	list-style-type: none;
	font-size: 12px;
	line-height:2em;
	padding:0;
	margin:0
}
#pages_list{	
	width: 100%;
	margin:0;
	padding:0;
}
	
#pages_list li{
	bottom: 0px; /* Fixes a problem with ie5. Some how.*/
	float:left;
	list-style-type:none;
	margin-right:1px
}
#pages_list li.current-cat-parent,
#pages_list li.current_page_parent,
#pages_list li.current_page_ancestor,
#pages_list li.current-cat,
#pages_list li.current_page_item,
#pages_list li.over,
#pages_list li:hover{
	color:$nav_text;
	background-color:$nav_back_hover;
}
#pages_list li ul{
	display:none
}
#pages_list li ul li{
	width:150px;
	border-bottom:1px solid $nav_border2;
}
#pages_list li.over ul,
#pages_list li:hover ul {
	display:block;
	position:absolute;
	width:150px;
	z-index:10
}
#pages_list li.over ul li,
#pages_list li:hover ul li {
	color:$nav_text;
	background-color:$nav_sub_back;
}
#pages_list li ul li.current-cat,
#pages_list li ul li.current_page_item,
#pages_list li ul li.current_page_ancestor,
#pages_list li ul li.over,
#pages_list li ul li:hover {
	background-color:$nav_sub_back_hover;
	color:$nav_text;
	border-bottom:solid 1px $nav_border2;
}

#pages_list li a{
	white-space:nowrap;
	color:$nav_text;
	background-color:transparent;
	text-decoration:none;
	padding:0 10px;
	line-height:2em;
	display:block;
	line-height: 2.5em;
}
#pages_list li li{
	position:relative;
}

#pages_list li li a{
	white-space:normal;
	overflow:hidden;
	line-height: 2em;
	width: 130px;
}
/* Sub sub menus.  Attach the arrow inside the 10px padding and hide the rest of it until rollover.*/
#pages_list li:hover ul ul,
#pages_list li.over  ul ul ul ul,
#pages_list li.over  ul ul ul,
#pages_list li.over  ul ul {
	width:0;
	height:2em;
	overflow:hidden;
	position:absolute;
	left:140px;
	top:0;
	background:url(styles/$folder/sub-menu.gif) no-repeat 0 0.5em transparent;
	z-index: 10;
	padding-left:10px
}

#pages_list li li:hover > ul { /* IE6 fails utterly here.  */
	width:150px;
	overflow:visible;
	height:auto
}

/*
	Because IE6 fails with the above rule I have to create a rule for each level.
	I obviously can't create a rule for an infinite depth that means anything higher than level 5 in IE 6 will not be accessible, will work fine in IE7 and real browsers. 
	And annoyingly IE6 fails to read any line that has > in it before or after the comma. :(
*/
#pages_list li li li li.over ul,
#pages_list li li li.over ul,
#pages_list li li.over ul {
	width:150px;
	overflow:visible;
	height:auto
}

#contactform .paragraph {
	font-size: larger; 	
}

#contactform label {
	width:200px;
	float:left;
}
#contactform sup {
	vertical-align: text-top;
	font-size: 60%;
}
#contactform .text,
#contactform .textarea {
	width:418px;
}
.contactformrow {margin-bottom:5px;}
#div_icit_submit_3 { text-align:right;}

/* For older IE with the messed up box model. */
.ie-quirk-mode #pages_list li.over  ul ul ul ul,
.ie-quirk-mode #pages_list li.over  ul ul ul,
.ie-quirk-mode #pages_list li.over  ul ul {
	width:10px;
}

.previous-image img { float:left; margin: 0;}
.next-image img { float:right; margin: 0;}

.wp-caption {
	padding: 5px 0;
	text-align:center;
	border: solid 1px $content_link2_back;
	background-color: $content_highlight;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	color: $content_text;
	margin-bottom: 0.5em;
}

.wp-caption img {
	margin: 0;
}

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

/* The following is the default colour set for the times when css.php is called with no f option.
Body

$folder=coffee; 			// The folder, subordinate to the theme\styles folder, the background images will be picked up from.
$title=						Coffee and Cream.

//Body
$body_colour=				#533C2C;		// Dominant background colour.
$body_foot_colour=			#533C2C;		// The colour that the bottom gradient terminates with.
$content_top=				#BCAB89;		// Top layer just above the post border. 

//Header
$header_text=				#E8BB3F;		// Text colour.
$header_back=				#603000;		// Content and sidebar background colour
$header_link=				#FCFCF4;		// Normal links will use the standard background colour
$header_link_hover=			#FCFCF4;
$header_link_back_hover=	#968450;

//Navigation
$nav_border2 =				#450000;		// The border arounf the outside of the whole navigation bar is arranged to you can give a basic 3d look with two colours.
$nav_border1 = 				#aa0000;
$nav_text = 				#FCFCF4;		// Due to CSS limitations with IE6 I've opted to go with a single text colour. Be careful when choosing background colours.
$nav_back = 				#850000;
$nav_back_hover = 			#650000;
$nav_sub_back =				#500000;
$nav_sub_back_hover = 		#700000;

//Content
$content_text=				#603000;		// Text colour.
$content_back=				#FCFCF4;		// Content and sidebar background colour
$content_highlight=			#F2F2D2;		// Title background colour.
$content_link1=				#992020;		// Normal links will use the standard background colour
$content_link1_hover =		#550000;		// Rollover colour for the above
$content_link2_text=		#333333;		// Links with background colour.
$content_link2_back=		#E6DFD0;
$content_link2_hover_text=	#FCFCF4;
$content_link2_hover_back=	#BCAB89;

//Comments
$comment_author_back =		#FFFFee;
$comment_author_border =	#FFCC33;
$comment_altern_back =		#F9F9f0;
$comment_altern_border =	#f0f0d0;

//Footer 1
$footer1_back= 				#BCAB89;	// Footer background colour
$footer1_text=				#333333;	// Footer text colour
$footer1_link1=				#533C2C;	// Links in the footer will use this it uses the footer body background color for its background.
$footer1_link1_hover = 		#251911;	// Rollover colour for the above
$footer1_link2_text=		#333333;	// Links with background colour.
$footer1_link2_back=		#C7B698;
$footer1_link2_hover_text=	#FCFCF4;
$footer1_link2_hover_back=	#9B8358;

//Footer 2
$footer2_text_hover=		#E8BB3F;
$footer2_text=				#968450;
$footer2_back=				#251911;

// Images
$content_title_icon     =   title-bullet.gif;
$footer_title_icon      =   title-bullet-2.jpg;
$background_layer_1     =   background-layer-1.png;
$background_layer_2     =   background-layer-2.jpg;
$background_layer_3     =   background-layer-3.jpg;
$content_1              =   content-1.jpg;
$content_2              =   content-2.jpg;
$content                =   content.gif;
$content_top_edge       =   content-top-edge.gif;
$content_bottom_edge    =   content-bottom-edge.gif;
$sidebar_right          =   sidebar-right.gif;
$sidebar_left            =   sidebar-left.gif;
$footer_img             =   footer.gif;
$li_a                   =   li-a.gif;
$li_a_hover             =   li-a-hover.gif;
$li_a2                  =   li-a.gif;
$li_a2_hover            =   li-a-hover.gif;
*/