/* ------------------------------------------------------------

  	* Strait Lumber
  	* Coded by Bruce Clark (http://fluidvisiondesign.com)

  	screen.css
  	- Site wide style, layout, and function

------------------------------------------------------------ */

/* =Initial Page Structure 
	(further specific styling for these sections is lower down, use =Section to quick find)
------------------------------------------------------------ */

* { 
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	list-style: none;
}

html {
	font: 12px/1.4 Arial, "Helvetica", sans-serif;
	color: #444;
	background: #274a23 url(/images/layout/bg.gif);
}

body { 
	position: relative;
	background: url(/images/layout/content/wood-bg.png) repeat-x 50% -36px;
}

.container {
	position: relative;
	width: 810px;
	margin: 0 auto;
	z-index: 0;
}

#header {
	position: relative;
	height: 47px;
	font: 14px Georgia, Times, "Times New Roman", serif;
	margin-bottom: 12px;
	z-index: 1;
}

#header .container {
	height: 37px;
	padding-bottom: 10px;
	z-index: 1;
}

#content { 
	position: relative;
	width: 810px;
	background: url(/images/layout/content/primary-top.png) no-repeat left top;
	padding-top: 4px;
	margin-bottom: 10px;
	z-index: 0;
}

#content #content-outter { 
	position: relative;
	background: url(/images/layout/content/primary-bottom.png) no-repeat left bottom;
	padding-bottom: 4px;
}

#content #content-inner { 
	position: relative;
	background: url(/images/layout/content/primary-tile.png) repeat-y left top;
	padding: 0 4px;
}

#content #content-inner-wrap { 
	position: relative;
	background: url(/images/layout/sidebar/trans-tile.png) repeat-y 526px 0;
}

#sub-content {
	position: relative;
	width: 802px;
	margin: 0 auto 12px auto;
	background: url(/images/layout/content/tri-col-bg.jpg) no-repeat 0 0;
	box-shadow: 0px 1px 3px #111; 
	-moz-box-shadow: 0px 1px 4px #111; 
	-webkit-box-shadow: 0px 1px 4px #111;
	z-index: 0;
}

#footer { 
	height: 87px;
	font: 12px Georgia, Times, "Times New Roman", serif;
	background: url(/images/layout/content/wood-bg.png) repeat-x 50% 0;
	color: #9F867A;
	z-index: 0;
}

#footer .container { 
	width: 790px;
	padding: 22px 10px;
}

/* =Basic Element Styles 
------------------------------------------------------------ */ 

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-family: Georgia, Times, "Times New Roman", serif;
	padding-bottom: 5px;
}

h1 { 
	font-size: 18px;
	text-transform: uppercase;
}

h2 { 
	font-size: 16px;
	text-transform: uppercase;
	color: #17597a;
	font-weight: bold;
}
#main h2 {
	font-size: 17px;
	font-weight: normal;
	text-transform: none;
}

h3, h4, h5, h6 { 
	font-size: 13px;
}
#main h3 {
	font-size: 15px;
	color: #333;
}

#main h4 {
	font-size: 13px;
	color: #3B583F;
}

p {
	padding-bottom: 15px;
}

#main ul, 
#main ol {
	padding: 0 0 15px 5px;
}

#main ul li {
	padding: 0 0 5px 29px;
	background: url(/images/icons/bullet.png) no-repeat 14px 5px;
}

#main ol li {
	list-style-type: decimal;
	margin-left: 30px;
	padding-bottom: 5px;
}

#main blockquote {
	padding: 0 0 0 15px;
}

#main table {
	border: 1px solid #4f7297;
	background: #eee;
	border-collapse: collapse;
	margin-bottom: 15px;
}

#main table tr th {
	padding: 7px 15px;
	border: 1px solid #4f7297;
	background: #fff;
	font: 14px Georgia, Times, "Times New Roman", serif;
	color: #3B583F;
}

#main table tr td {
	padding: 7px 15px;
	border: 1px solid #4f7297;
}

input,
textarea { 
	font: 11px Verdana, sans-serif;
	padding: 2px 4px;
	border: 1px solid #999;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 0px;
	background: #fff url(/images/layout/form-bg.gif) repeat-x left top;
}

select { 
	font: 11px Verdana, sans-serif;
	padding: 0;
	border: 1px solid #999;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 0px;
}

sup {
	vertical-align: top;
}

sub {
	vertical-align: bottom;
}

img,
a img { 
	border: 0;
	vertical-align: middle;
} 

a { 
	color: #102876;
	text-decoration: none;
}

a:visited { 
	color: #1A3D76;
}

a:hover { 
	color: #081541;
	text-decoration: underline;
}

/* =Utilities 
------------------------------------------------------------ */ 

.left { 
	float: left;
	position: relative;
	margin: 0 10px 5px 0;
}

#main .left {
	margin-top: 5px;
}

.right { 
	float: right;
	position: relative;
	margin: 0 0 5px 10px;
}

.spacer {
	padding-top: 15px;
}

.clear {
	clear: both;
}

.clear-left { 
	clear: left;
}

.clear-right { 
	clear: right;
}

.clear-none { 
	clear: none;
}

.center { 
	text-align: center;
}

.autoclear:after { 
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; 
}

.autoclear { 
	display: inline-block;
}

.autoclear { 
	display: block;
}

	/* =Forms 
------------------------------------------------------------ */ 

.forms {
	overflow: auto;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
}

#billing {
	border-bottom: 1px solid #ccc;
	margin-bottom: 20px;
	padding-bottom: 20px;
	padding-top: 18px;	
}

.forms h2 {
	border-top: 1px solid #ccc;
	font-size: 14px;
	margin-top: 5px;
	padding-top: 20px;
	padding-bottom: 18px;
}

.forms p { 
	position: relative;
	padding: 0 0 15px 190px;
}
	
.forms p label.name { 
	position: relative;
	float: left;
	width: 190px;
	padding: 3px 10px 3px 0;
	margin-left: -190px;
	text-align: left;
	color: #898989;
}	

.forms p label.name em {
	color: #b50000;
	font-style: normal;
}	

.forms span.error { 
	display: block;
	position: absolute;
	right: 0;
	width: 240px;
	color: #999;
	font-size: .9em;
	background: #eee;
	padding: 3px 5px 4px 5px;
	border: 1px solid #ccc;
	line-height: 1em;
}

.forms p input,
.forms p textarea { 
	width: 377px;
	background: url('/images/layout/donate-form-bg.gif') left top no-repeat;
	border: none;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #c3c3c3;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
}

.forms p input.small { 
	width: 70px;
}

.forms p input.medium { 
	width: 200px;
}

.forms p input.large { 
	width: 300px;
}

.forms p textarea { 
	height: 100px;
}

.forms p textarea.short { 
	height: 70px;
}

.forms p textarea.tall { 
	height: 120px;
}

.forms p span.radcheck span#otherValue { 
	display: block;
	padding-top: 9px;
	padding-left: 10px;
}

.forms p input#otherAmount { 
	width: 70px;
	margin-top: 10px;
	margin-left: 2px;
	background: url('/images/layout/donate-form-bg.gif') left top no-repeat;
	border: none;
	padding: 2px;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #c3c3c3;
}

.forms p span.radcheck input { 
	border: 0;
	width: auto;
	height: auto;
	vertical-align: middle;
	background: transparent;
	padding: 0 !important;
	margin-left: 5px;
	margin-right: 5px;
}

.forms p select { 
	border: 1px solid #ccc;
	width: 160px;
}

#content #main .forms table.radcheck {
	margin-bottom: 15px;
}

#content #main .forms table.radcheck td { 
	padding: 0 0 7px 0;
}

.forms table.radcheck td input { 
	margin: 0 7px 0 0;
	background: transparent;
	padding: 0;
	border: 0;
}

.donation-submit {
	float: right;
}

input.form-submit { 
	float: right;
	border: 0;
	background: #ca9229;
	width: auto;
	height: auto;
	padding: 4px 12px;
	font-size: 14px;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	color: #fff;
}

/* =Layout and Function 
------------------------------------------------------------ */ 

	/* =Header 
------------------------------------------------------------ */ 

#header ul#nav {
	position: absolute;
	left: 0;
	bottom: 4px;
	padding-left: 1px;
	width: 809px;
	background: url(/images/layout/header/divider.png) no-repeat left bottom;
}

#header ul#nav li {
	position: relative;
	float: left;
	background: url(/images/layout/header/divider.png) no-repeat right bottom;
}

#header ul#nav li#search {
	padding: 5px 0 0 20px;
	background: transparent;
}

#header ul#nav li a {
	display: block;
	padding: 10px 19px;
	color: #E6E6E6;
	background: url(/images/layout/header/rollover.png) repeat-x top left;
}

		#header ul#nav li ul { 
			display: block;
			position: absolute;
			left: -999em;
			width: 140px;
			background: transparent url(/images/layout/header/dropdown.png) repeat-x left top;
			border: 2px solid #1C1007;
			border-top: 0;
			padding: 0;
		}

		#header ul#nav li:hover ul, 
		#header ul#nav li.over ul /* used to target IE via script */ { 
			display: block;
			width: 158px;
			left: 0;
			top: 100%;
			position: absolute;
			z-index: 4000;
			margin: 0;
		}

		#header ul#nav li ul li { 
			width: 158px;
			background: transparent;
			text-indent: 0;
			font: 11px Arial, "Helvetica", sans-serif;
			line-height: 18px;
			padding: 0;
			height: auto;
		}

		#header ul#nav li:hover ul li a, 
		#header ul#nav li.over ul li a { 
			display: block;
			background: transparent;
			padding: 6px 10px 6px 15px;
			height: auto;
			text-decoration: none;
			margin: 0;
			color: #DECFBD;
			text-indent: 0;
			text-align: left;
		}

		#header ul#nav li ul li a:hover { 
			color: #fff;
			background: #1F1208;
		}
		
#header ul#nav li:hover a,
#header ul#nav li a:hover, 
#header ul#nav li.active a {
	color: #fff;
	text-decoration: none;
	background-position: bottom left;
}		

#header #search * {
	vertical-align: middle;
}

#header #search input {
	font-size: 11px;
	background: #eee url(/images/layout/form-bg.gif) no-repeat left top;
	border-color: #422200;
	padding: 3px;
	width: 150px;
}

#header #search input.submit {
	background: transparent;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
	border: 0;
}

	/* =Content
------------------------------------------------------------ */

		/* =Main
------------------------------------------------------------ */

#main {
	position: relative;
	float: left;
	width: 551px;
}
.sub #main {
	width: 501px;
	padding: 20px 25px;
}

#main strong.logo {
	position: absolute;
	left: 15px;
	top: 5px;
	z-index: 1;
	width: 194px;
	height: 92px;
	text-indent: -9999px;
	background: url(/images/layout/logo.png) no-repeat left top;
}

.sub #main h1 {
	display: block;
	background: #4f7297;
	margin: 0 -25px 15px -38px;
	padding: 7px 15px 7px 35px;
	color: #eee;
	font-size: 15px;
	box-shadow: 0px 1px 3px #222; 
	-moz-box-shadow: 0px 1px 3px #222; 
	-webkit-box-shadow: 0px 1px 3px #222;
}

#main address {
	padding: 0 0 25px 0;
	font-size: 14px;
	font-style: normal;
}

#main #map {
	padding: 25px 0 0 0;
	width: 500px;
}

		/* =Sidebar
------------------------------------------------------------ */

#sidebar {
	position: relative;
	float: left;
	width: 211px;
	background: url(/images/layout/content/white-grad.png) repeat-x left top;
	padding: 20px;
}
.sub #sidebar {
	padding: 10px 20px;
}

.home #sidebar h1 {
	float: left;
	font-size: 14px;
	background: #7a7a7a;
	padding: 10px 18px 8px 18px;
	margin-left: -60px;
	margin-bottom: 10px;
	color: #fff;
	box-shadow: 0px 1px 3px #222; 
	-moz-box-shadow: 0px 1px 3px #222; 
	-webkit-box-shadow: 0px 1px 3px #222; 
}

.home #sidebar p {
	clear: left;
}

#sidebar strong.logo {
	display: block;
	width: 194px;
	height: 92px;
	margin: 0 0 10px 8px;
	text-indent: -9999px;
	background: url(/images/layout/logo.png) no-repeat left top;
	
}

		/* =Lower (Grids)
------------------------------------------------------------ */

#sub-content .grid {
	position: relative;
	float: left;
	width: 240px;
	padding: 0 18px 8px 18px;
}
#sub-content .grid.first { width: 239px; }
#sub-content .grid.last { width: 215px; }

#sub-content .grid h3 {
	font-size: 13px;
	padding: 8px 15px;
	background: #162636;
	color: #fff;
	margin: 0 -18px 15px -18px;
	text-transform: uppercase;
}
#sub-content .grid.first h3 { background: #4f7297; }
#sub-content .grid.last h3 { background: #6a380f; }

#sub-content .grid h3 a {
	display: block;
	float: right;
	font-size: 11px;
	color: #ddd;
	padding: 2px 8px 0 0;
	font-style: italic;
	background: url(/images/icons/small-bullet.gif) no-repeat 100% 8px;
}

#sub-content .grid h3 a:hover {
	text-decoration: none;
	color: #A6BADE;
}

#sub-content .grid h5 {
	font: italic normal bold 12px Arial, "Helvetica", sans-serif;
	color: #6a380f;
}
#sub-content .grid.first h5 { color: #162636; }

#sub-content .grid h6 { 
	color: #4B6E47; 
	font-style: italic;
}

#sub-content .grid.last p strong { 
	color: #4B6E47;
}

#sub-content .grid.last p strong em { 
	color: #444;
	font-weight: normal;
	font-size: 11px;
}

	/* =Footer
------------------------------------------------------------ */	

#footer p span {
	padding-left: 30px;
}

#footer ul li {
	display: block;
	float: left;
	padding-right: 12px;
	margin-right: 12px;
	border-right: 1px solid #69491e;
}

#footer ul li.end {
	border: 0;
}

#footer a {
	color: #9F867A;
}

#footer a:hover {
	color: #D3B3AE;
	text-decoration: none;
}