﻿/*  

Theme Name: YarnHouse 5

Theme URI: http://www.creativedragondesigns.com

Description: 5 Column (main content, 2 sidebars and 2 top sections), widget-ready fixed width theme in soothing Black and Blue colors featuring an author box, author info page, gravatars and highlighted author comments in the comments section along with Custom Archives, Sitemap and full width No Sidebars page templates.  Tested in Firefox, Opera, Safari, IE6 and IE7. Compatible up to Wordpress 2.8.

Version: 1.3

Author: Mike

Author URI: http://www.creativedragondesigns.com/

Tags: 5 column, fixed width, gravatars, widgets, purple, green, author box, sitemap, archives, 2.8
Colors: a05175, a3af07, 672c47


*/





/***** TYPOGRAPHY AND LINKS *****/

body, address, dd, dl, hr, p, form { font-family: "Trebuchet MS", Verdana, Tahoma, Arial, Sans-serif; margin: 0; padding: 0; }



h1, h2, h3, h4, h5, h6 {
	color: #672c47;
	font-family: Georgia, "Trebuchet MS", Helvetica, Verdana, Times, Tahoma, Arial, Sans-serif;
	margin: 0;
	padding: 0 0 20px 5px;
}



h1 { font-size: 2em; }

h2 { font-size: 1.5em; }

h3 { font-size: 1.4em; }

h4 { font-size: 1.3em; }

h5 { font-size: 1.2em; }

h6 { font-size: 1.1em; }



a:link, a:visited {
	text-decoration: none;
	color: #672c47;
}

a:hover {
	text-decoration: underline;
	color: #a05175;
}

p { padding: 10px; }

blockquote {
	margin: 15px 40px 10px 10px;
	padding: 0 10px 10px 10px;
	font-style: italic;
	border-right-width: 2px;
	border-left-width: 2px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #dddddd;
	border-left-color: #dddddd;
}



/***** MAIN CONTENT *****/

body {
	margin: 0;
	font-size: 85%;
	text-align: center;
	vertical-align: top;
	color: #a05175;
	background-color: #FFFFFF;
}



#wrapper { margin: 0 auto 0 auto; width: 1000px; text-align: left; }



#main_content {
	float: left;
	margin: 0 auto 0 auto;
	padding: 0;
	width: 1000px;
	background-color: #FFFFFF;
	background-image: url(images/content.gif);
	background-repeat: repeat-y;
}

#container {
	float: left;
	width: 530px;
	margin: 0 10px 0 7px;
	padding: 0 10px 10px 10px;
}

#container_wide {
	float: left;
	width: 900px;
	margin: 0 0 0 35px;
	padding: 5px 5px 0 7px;
}



.post { padding: 10px 0 5px 0; }

.post h2 { font-size: 1.5em; margin: 0 0 0 5px; padding-top: 5px; }

.entry {
	font-size: 1.02em;
	line-height: 1.42em;
	padding: 0 0 40px 0;
	background-attachment: scroll;
	background-image: url(images/bar.png);
	background-repeat: no-repeat;
	background-position: center 100%;
}

.postmetadata { margin: 0; font-size: 9px; }

.date {	font-size: .9em; margin-top: -30px; }



#author-box {
	width: 90%;
	min-height: 115px;
	margin: 10px 10px 20px 10px;
	padding: 0 10px 10px 10px;
	border: 1px solid #672c47;
	background-color: #a3af07;
}

#author-box .avatar { float: left; width: 80px; height: 80px; }

#author-box h2 { padding: 0; margin: 5px 0 5px 0; }



/***** HEADER *****/

#header-wrap {
	float: center;
	width: 990px;
	height: 200px;
	padding: 0;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

.header {
	width: 990px;
	height: 200px;
	padding: 0;
	float: left;
	background-image: url(images/header.png);
	background-repeat: no-repeat;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}

.header h1 {
	width: 500px;
	padding: 0;
	margin: 20px 0 0 30px;
	font-family: Georgia, "Times New Roman", Sans-serif;
	font-size: 0px;
	line-height: 50px;
	text-align: left;
}

.header h1 a {
	text-decoration: none;
	color: #CCCCCC;
}

.header h1 a:hover {
	text-decoration: none;
	color: #FF0000;
}

.header .description {
	width: 500px;
	margin: 0 0 0 60px;
	padding: 0;
	font-size: 1.3em;
	font-weight: normal;
	font-family: Georgia;
	text-align: left;
	text-transform: lowercase;
}



/***** HORIZONTAL MENU *****/

.menu  {
	float: left;
	width: 1000px;
	height: 40px;
	padding: 0;
	display: inline;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: 0px;
	background-image: url(images/menu.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}

.menu ul { width: 120%; margin: 0; padding: 8px 0; list-style: none; }

.menu ul li {
	display: inline;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 10;
}

.menu ul li a {
	width: 110%;
	margin-left: 30px;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 1.2em;
	margin-bottom: 5px;
	font-weight: bold;
	padding: 0;
}

.menu ul li a:hover {
	color: #705b0a;
	text-decoration: underline;
}

.menu a:link, .menu a:visited {
	text-decoration: none;
	color: #FFFFFF;
}



/***** IMAGES *****/

p img { padding: 0; max-width: 110%; }

a img {
	border: 1px solid #672c47;
	padding: 3px;
	background: none;
}



img.avatar {
	float: left;
	margin: 5px;
	border: 1px solid #672c47;
}

img.centered { display: block; margin-left: auto; margin-right: auto; }

img.alignright { padding: 3px; margin: 0 0 0 7px; display: inline; }

img.alignleft { padding: 3px; margin: 0 7px 0 0; display: inline; }



.alignright { float: right; }

.alignleft { float: left; }

.aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; }



.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; /* optional rounded corners for browsers that support it */ -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }

.wp-caption img { margin: 0; padding: 0; border: 0 none; }

.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; }



#flickrrss img {
	border: 1px solid #672c47;
	float: left;
	margin: 0 5px 5px 5px;
}



.thumbnail {
	width: 60px;
	height: 60px;
	float: left;
	margin: 3px;
	border: 1px solid #672c47;
}

.medium {
	width: 250px;
	height: 150px;
	float: left;
	margin: 3px;
	border: 1px solid #FFFFFF;
}



/***** NAVIGATION *****/

.navigation { padding: 5px 0 5px 10px; font-size: 12px; font-weight: bold; line-height: 18px; }



/***** FOOTER *****/

#footer  {
	float: left;
	width: 100%;
	height: 30px;
	padding: 0;
	display: inline;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0px;
	background-color: #a3af07;
	background-image: url(images/footerbg.jpg);
	background-repeat: repeat;
}

#footer p {
	font-size: 0.9em;
	width: 900px;
	height: 30px;
	float: right;
	line-height: 18px;
	padding: 5px 10px 0 10px;
	text-align: center;
	color: #FFFFFF;
}

#footer a {
	color: #FFFFFF;
}



/***** SUBSCRIPTION *****/

.subscribe  { float: right; margin: 100px 05px 20 0; padding: 0; text-decoration: none; }

.subscribe img { border: none; }



/***** SIDEBAR *****/

#left_sidebar {
	width: 208px;
	float: left;
	clear: left;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 5px;
	padding-top: 0;
	padding-right: auto;
	padding-bottom: 0;
	padding-left: auto;
	color: #FFFFFF;
} 

#right_sidebar {
	width: 208px;
	float: right;
	vertical-align: top;
	margin-top: 0;
	margin-right: 5px;
	margin-bottom: 20px;
	margin-left: 0;
	padding-top: 0;
	padding-right: auto;
	padding-bottom: 0;
	padding-left: auto;
	background-color: #FFFFFF;
	color: #FFFFFF;
}  

#left_sidebar ul li a:hover, #right_sidebar ul li a:hover {
	color: #a3af07;
}

#left_sidebar ul li a {
	font-size: 1.08em;
	display: inline;
	color: #FFFFFF;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 10;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}

#right_sidebar ul li a {
	font-size: 1.08em;
	display: inline;
	margin: 0;
	padding: 0;
	color: #a05175;
}

#left_sidebar ul li, #right_sidebar ul li {
	display: block;
	list-style: none;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 10;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 3px;
	padding-left: 0;
}

#left_sidebar ul ul, #right_sidebar ul ul {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 20px;
}

#left_sidebar ul ul ul, #right_sidebar ul ul ul { margin: 0 0 0 10px; }

#left_sidebar ul, #right_sidebar ul { margin: 0 0 5px 0; padding: 0; }

#left_sidebar h2, #commentblock h2 {
	font-size: 1.06em;
	text-transform: uppercase;
	letter-spacing: normal;
	text-align: center;
	background-repeat: repeat;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 0px;
	background-image: url(images/cat-bg.png);
	color: #FFFFFF;
} 

#right_sidebar h2  {
	font-size: 1.06em;
	text-transform: uppercase;
	letter-spacing: normal;
	text-align: center;
	background-color: #a05175;
	background-repeat: repeat;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 0px;
	background-image: url(images/cat-bg-r.jpg);
	color: #FFFFFF;
} 


/***** SEARCH *****/

#searchform {
	margin: 10px auto;
	padding: 5px 3px;
	text-align: center;
}

#sidebar #searchform #s {
	width: 108px;
	padding: 2px;
	border: 1px solid #7c7953;
}

#sidebar #searchsubmit { padding: 1px; }







/***** COMMENTS *****/

.comments-template { margin: 0 10px; border-top: 1px solid #fbf8e6; padding: 0 10px; }

.comments-template ol { margin: 0; padding: 0 0 15px; list-style: none; }

.comments-template ol li { margin: 0; line-height: 14px; padding: 10px 0 10px 5px; }

.comments-template h2, .comments-template h3 { font-family: Georgia, Sans-serif; font-size: 12px; margin: 10px 0 0 0; }

.commentmetadata { font-size: 9px; }

.comments-template p.nocomments { padding: 0; }

.comments-template textarea {
	width: 95%;
	max-width: 500px;
	font-family: Arial, Helvetica, Georgia, Sans-serif;
	font-size: 11px;
	background-color: #999999;
}

.authorcomment { background: #000000; }



/***** TOP *****/

#top {
	color: #FFFFFF;		
	clear: both;
	float: left;
	width: 1000px;
	padding: 0;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	background-image: url(images/top.png);
	background-repeat: no-repeat;
	background-position: center top;
}



/***** TOP SECTIONS*****/

.top-section {
	float: left;
	width: 1000px;
	height: 260px;
	margin:0px;
	padding: 0;
	color: #FFFFFF;
}

.top-section .area {
	color: #FFFFFF;
	float: left;
	width: 300px;
	height: 190px;
	margin-left: 5px;
	padding: 0;
}

.top-section .area3 {
	color: #FFFFFF;
	float: right;
	width: 300px;
	height: 190px;
	padding: 0;
	text-align: center;
	margin-right: 10px;
}

.top-section .area.extra {
	width: 350px;
	height: 190px;
	color: #FFFFFF;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 5;
	margin-left: 20px;
	}

.top-section .area .area3  h2 {
	color: #FFFFFF;
	font-size: .9em;
	text-transform: uppercase;
	letter-spacing: normal;
	text-align: center;
	width: 95%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
	padding-top: 0px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 0px;
}

.top-section .area ul li ul li { list-style: none; margin: 0; }

.top-section .area li {
	color: #FFFFFF;
	list-style: none;
	text-align: left;
	margin: 0;
	font-size: 1.0em;
}

.top-section .area a { color: #FFFFFF; font-size: .8em; }

.top-section .area.extra a {
	color: #FFFFFF;
	font-size: 1.1em;
}

.top-section .area a:hover { color: #fff; }



/***** IE HACKS *****/

*html #left_sidebar { margin: 0 0 20px 3px; } 

*html #main_content { padding-bottom: 10px; border: #fff 3px double; }

*html #container { width: 520px; margin: 0 10px 0 2px; padding: 0 10px 10px 10px; }

*html #container_wide { margin: 0 0 0 20px; }

*html #top, .top-section { margin-left: -1px; }

*html .top-section .area { height: 150px; }

*html .top-section .area.extra { width: 530px; height: 190px; color: #FFFFFF; }

*html .top-section .area.area3 { color: #FFFFFF}
