/* This is the CSS file for www.theyarningcircle.com, by www.savvywebdesign.net */

* {padding:0;margin:0;}
img {border:0;}

body {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	background-color: #ffffff;
	margin: 0px auto;
	padding: 0px;
	font-size: 80%;
	text-align:center;
}
	/* The text align above is a hack to keep the container centered in older browsers. In newer browsers, auto L&R margins (in the container div below) keep the container centered. */
	
#trail {background-image: url(images/trail.jpg); background-repeat: repeat-x; height:25px;}
/* This is the artwork trail at top & bottom - it goes outide the container div. */

#container {
	width: 760px;
	height: 535px;
	margin: 0px auto 10px auto;
	text-align:justify;
	background-image: url(images/content_border.gif);
	background-repeat: no-repeat;
	position: relative;
}
/* Position:relative allows the use of absolute positioning in the sub-elements. */

#container_index {
	width: 760px;
	height: 535px;
	margin: 0px auto 10px auto;
	text-align:justify;
	background-image: url(images/content_border_index.jpg);
	background-repeat: no-repeat;
	position: relative;
}

#container_contact {
	width: 760px;
	height: 535px;
	margin: 0px auto 10px auto;
	text-align:justify;
	background-image: url(images/content_border_contact.jpg);
	background-repeat: no-repeat;
	position: relative;
}

#leftnav
{ float:left; width:180px; margin:5px 0 0 0; padding:0; height:520px; text-align:center;}
/* The fixed height value has nowt to do with the nav element. It's there to make the footer clear the background image. */

#contentbox {
	z-index: 3;
	line-height: 175%;
	width: 480px;
	height: 430px;
	overflow: auto;
	color:#000000;
	text-align:justify;
	margin: 0;
	padding: 0 10px 10px 0;
	position:relative;
	left: 32px;
	top: 53px;
 }
	/* Usually, margin-left is needed to shift the contentbox to the right of the nav, but for some reason it's not required to make this layout work. The padding-right allows for the scrollbar. */
	
p {margin:10px 0 0 0;padding:0;}
#indent {margin:10px 0 0 20px;padding:0 0 0 20px;border-left:2px solid #fff0ac;}
.block {display:block;margin:1px auto;}

a { font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;color: #FF0000; font-weight:bold; text-decoration: none; }
a:active { font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;	color: #FF0000; font-weight:bold; text-decoration: underline;}
a:visited { font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;color: #990000; font-weight:bold; text-decoration: none;}
a:hover {font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;color: #ff0000; font-weight:bold;text-decoration: underline;}

h1 {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 180%;
	font-weight: bold;
	color: #FF0000;
	margin:20px 0 30px 0;
	text-align:left;
	line-height:125%;
padding:0;}
h1.yarnpage {border-top:10px solid #fff0ac;padding-top:30px;}
h1.index {font-size: 170%; text-align:center;}
h2 {font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;font-size: 150%;font-weight: bold;color: #000000;margin:15px 0;}
h2.index {font-size: 130%; text-align:center;}
h3 {font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;font-size: 115%;font-weight: bold;color: #000000;margin:15px 0;text-align:center;}

bl {text-indent:30px; margin:15px 0 0 0;}

img.pagetitle {margin:15px 0 0 0;}
	
#footer {
	clear: both;
	margin: 0;
	padding: 2px 0 0 0;
	color: #666666;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	z-index: 3;
	text-align: center;
}

#footer a { font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	color: #666666; text-decoration: none; font-weight:normal; }
#footer a:hover { font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	color: #666666; text-decoration: underline;font-weight:normal; }