/*  
Based on the CSS from Blackprintk
http://www.blackprint.co.uk
Originally by Rob Palmer

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

Patterns from squidfingers.com

*/

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

html{
background:			#594F4F;
min-width:			900px;
}

body {
font: 				82.5% Arial, Helvetica, sans-serif;
color:				#FFFFFF;
line-height:		140%;
}

p{
font-size:			14px;
margin:				4px 0 5px 0;
}

b, strong{
color:				#E5FCC2;
}

.clear { 
clear:				both;
}

h2 {
font-size:			1.2em;
width:				100%;
border-bottom:		#FFFFFF 1px dotted;
font-family:		Arial, Helvetica, sans-serif;
text-decoration:	none;
color:				#ffae00;
font-weight:		bold;
padding:			7px 0 2px 0;
text-transform:		uppercase;
line-height:		100%;		
}

h2 a, h2 a:visited{
font-size:			1em;
}

h2 a:hover {
color:				#fff;
}

h3{
font-size:			2.1em;
width:				100%;
font-family:		Arial, Helvetica, sans-serif;
text-decoration:	none;
color:				#45ADA8;
font-weight:		bolder;
padding:			4px 0 2px 0;
line-height:		100%;
width:				100%;
}

h3 a, h3 a:visited {
text-decoration: 	none;
}

h3 a:hover {
text-decoration: 	none;
}

small {
font-family: 		Arial, Helvetica, Sans-Serif;
font-size: 			0.7em;
line-height: 		1.5em;
font-weight:		normal;
}
	
a, a:visited{
font-family:		Arial, Helvetica, sans-serif;
text-decoration:	none;
color:				#ffae00;
font-weight:		bold;
}

a:hover{
color:				#fff;
}

a:active, a:focus {
overflow:			hidden;
}

.price {
border-bottom:		#FFFFFF 1px dotted;
font-weight:        bold;	
color:				#E5FCC2;
}

/* Header ********************************************************/
#header_wrap{
width:				100%;
height:				auto;
background:			#45ADA8;
}

#header {
width:				800px;
margin-left: 		auto;
margin-right: 		auto;
}

#header_under{
display:			block;
width:				100%;
height:				29px;
clear:				both;
}

/* Content ********************************************************/
#content {
background:			#594F4F;
width:				800px;
margin:				0 auto 0 auto;
padding:			20px 20px 50px 20px;
min-height:			300px;
}

.leftcolumn{
max-width:			516px;
width:				516px;
height:				auto;
float:				left;
margin:				0;
}

.leftcolumnfull{
max-width:			100%;
width:				100%;
height:				auto;
float:				left;
margin:				0;
}

.prodcolumnfull{
max-width:			100%;
width:				100%;
height:				auto;
float:				left;
margin:				0;
}

.rightcolumn{
max-width:			245px;
width:				245px;
height:				auto;
float:				right;
margin:				0;
}

#showcase {
width:				100%;
min-height:			250px;
}

#showcase_wrap{
width:				838px;
}

#showcase h2{
margin-bottom:		20px;
}

.show_work { 
display: 			block; 
position: 			relative; 
overflow: 			hidden; 
float:				left;
padding:			17px 17px 0 17px;
background:			#4c2d1a url(images/brown_bg_sm.jpg); 
margin-right:		25px;
height:				176px;
}

.show_work a img, .show_work a:visited img { 
border: 			#613d26 1px solid;
margin:				0 0 1.4em 0;
padding:			0;
height:				153px;
width:				214px;
display:			block;
}

.show_work a:hover img { 
border: 			#594F4F 1px solid;
}

.archive_thumb ul{
width:				255px;
height:				auto;
}

* html .archive_thumb ul{
width:				255px;
margin:				0 -10px 0 0;
}

.archive_thumb li{
list-style:			none;
display:			inline;
padding:			0;
margin:				0;
}

.archive_thumb li a, .archive_thumb li a:visited{
display:			block;
overflow:			hidden;
width:				46px;
height:				46px;
float:				left;
border: 			#613d26 2px solid;
margin:				13px 13px 0 0;
}

.archive_thumb li a:hover{
border: 			#ffae00 2px solid;
}

.archive_thumb img{
width:				200%;
height:				auto;
margin:				-15% 0 0 -50%;
}

* html .archive_thumb img{
width:				auto;
height:				auto;
}

img.centered {
display: 			block;
margin-left: 		auto;
margin-right: 		auto;
}

.aboutimage	{
padding-right: 8px;
padding-left: 8px;
padding-top: 4px;
padding-bottom: 4px;
}

/* Footer ********************************************************/
#footer_wrap{
background:			#9DE0AD url(images/green_bg.jpg);
width:				100%;
padding:			0;
}

#footer{
width:				800px;
margin:				0 auto;
}

#footer_sub{
float:				right;
display:			block;
width:				800px;
margin:				0 auto;
padding:			27px 0 6px 0;
}

#menu {
background: 		#594F4F;
list-style: 		none;
width: 				100%;
}

/* MENU ********************************************************/

#menu li {
float: 				left;
font: 				150% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 			0 auto;
padding: 			0;
}

#menu a {
background: 		#594F4F;
color: 				#ccc;
display: 			block;
float: 				left;
margin: 			0;
padding: 			8px 12px;
text-decoration: 	none;
font-weight:		normal;
}

#menu a:hover {
background: 		#CCCCCC bottom center no-repeat;
color: 				#000000;
padding-bottom: 	8px;
}

.menubox {
width: 				715px; 
margin: 			0 auto;
text-align: 		center;
}

.menualign {
margin-left: 		72px;
}

/* FORM ********************************************************/

form {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  font:100% verdana,arial,sans-serif;
  margin: 0;
  padding: 0;
  min-width: 500px;
  max-width: 600px;
  width: 516px; 
}

form fieldset {
  / * clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
  border-color: #000;
  border-width: 1px;
  border-style: solid;
  padding: 10px;        /* padding in fieldset support spotty in IE */
  margin: 0;
}

form fieldset legend {
	font-size:1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
                       /* be careful with padding, it'll shift the nice offset on top of border  */
					   color:#FFFFFF;
					 }

form label { 
	display: block;  /* block float the labels to left column, set a width */
	float: left; 
	width: 150px; 
	padding: 0; 
	margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
	text-align: right; 
}



form input, form textarea {
	/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
	width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}

form input#reset {
	margin-left:0px; /* set margin-left back to zero on reset button (set above) */
}

textarea { overflow: auto; }

form small {
	display: block;
	margin: 0 0 5px 160px; /* instructions/comments left margin set to align w/ right column inputs */
	padding: 1px 3px;
	font-size: 88%;
}

form .required{font-weight:bold;} /* uses class instead of div, more efficient */

form br {
	clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}
.onstate-myswitch { display: block; }
.offstate-myswitch { display: none; } 

/* LIGHTBOX ********************************************************/

#lightbox{
	color:#000000;
	font-size:20px;
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
	
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{ background-image: url(images/overlay.png); }

* html #overlay{
	background-color: #333;
	back\ground-color: transparent;
	background-image: url(images/blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/overlay.png", sizingMethod="scale");
	}