/* Screen Styles
------------------------------------------------
This stylesheet handles most of the styles for 
screen display in regular browsers
-----------------------------------------------*/

body { background-color: #e3be86; color: #1e1e0d; min-height: 100%; font-family: "Myriad Pro", "Lucida Grande", "Helvetica Neue", sans-serif; }
h1, h2, h3, h4, h5, h6 { color: #923f3f; }
a { color: #923f3f; }
a:hover { color: #e04848; }
.transparent { filter: alpha(opacity:0.7); KHTMLOpacity: 0.7; MozOpacity: 0.7; -khtml-opacity:.70; -ms-filter:"alpha(opacity=70)"; -moz-opacity:.70; filter:alpha(opacity=70); opacity:.70; }
.blueish { color: #232B2D !important; } 
.reddish { color: #933F3F !important; }
.greyish { color: #444 !important; }
.brownish { color: #1A1C11 !important; }
.tannish { color: #E1BD83; }
	
/* Header 
-----------------------------------------------*/

div#header { position: relative; height: 50px; overflow: hidden; background: url(../themes/sbj09/header-bg.jpg) repeat-x; color: #fff; }

div#screen_logo {}
div#screen_logo h2 {}
div#screen_logo h2 a { color: #fff; }
div#screen_logo h2 a span {}

div#nav { height: 50px; position: relative; overflow: hidden; }
div#nav ul { list-style: none; padding-left: 45px; }
div#nav ul li { float: left; height: 50px; overflow: hidden; position: relative; }
div#nav ul li a { display: block; position: relative; background-position: 0 0; height: 50px; }
div#nav ul li a span { position: absolute; height: 100%; width: 100%; left: 0; top: 0; background: url(../themes/sbj09/nav-bg.jpg) no-repeat 0 0; } /* background: url(../themes/sbj09/nav-bg.jpg) no-repeat 0 0; */
div#nav ul li a span:hover, div#nav ul li a:hover span { background-position: 0 -50px; }

/* 
The nav is like this:
-------------------------------------------------------------------------------------
| 45px space | 120px portfolio | 110px about | 90px faqs | 85px blog | 92px contact |
-------------------------------------------------------------------------------------
*/

/* I need to set the widths on my <li> tags so the overflow gets caught */
div#nav li#portfolio { width: 120px; } 
div#nav li#about { width: 110px; }
div#nav li#faqs { width: 90px; } 
div#nav li#blog { width: 85px; }
div#nav li#contact { width: 87px; } /* 92px is the "real" width" */

/* Now set the bg positioning on each link, and the hover */
div#nav li#portfolio a span { background-position: -45px 0; } 
div#nav li#portfolio a span:hover { background-position: -45px -50px !important; } 
div#nav li#about a span { background-position: -165px 0; }
div#nav li#about a span:hover { background-position: -165px -50px !important; }
div#nav li#faqs a span { background-position: -275px 0; } 
div#nav li#faqs a span:hover { background-position: -275px -50px !important; }
div#nav li#blog a span { background-position: -365px 0; }
div#nav li#blog a span:hover { background-position: -365px -50px !important; }
div#nav li#contact a span { background-position: -450px 0; }
div#nav li#contact a span:hover { background-position: -450px -50px !important; }

/* Homepage
-----------------------------------------------*/

div.homepage { background-color: #000; padding-top: 20px; height: 520px; position: relative; overflow: hidden; }
div.homepage div.container_12 div.grid_12 { position: relative; }
div.homepage div.container_12 div.grid_12 div.cms { padding-top: 20px; background: transparent url(../themes/sbj09/homepage-highlight-cms.jpg) no-repeat; position: absolute; top: 0; left: 0; width: 940px; height: 520px; }
div#body { background: url(../themes/sbj09/tan-bg-tile.jpg) #D6B17A repeat-x; }
div#content { width: 980px; margin: 0 auto; background: url(../themes/sbj09/tan-leather-bg.jpg) no-repeat #e3be86; }

div.homepage_message { position: relative; height: 225px; overflow: hidden; background: url(../themes/sbj09/homepage-message.jpg) no-repeat; }
div.homepage_message h2 { padding-top: 225px; }
div.homepage_message h2 a { display: block; }
div.homepage_message h2 a span { position: absolute; top: 25px; left: 720px; height: 130px; width: 240px; }

/* Subpage Headings
------------------------------------------------*/

div.subpage { background-color: #000; position: relative; /* ie6 */ _height: 90px; }
div.subpage div.container_12 { background: url(../themes/sbj09/grungy-bg.jpg) bottom no-repeat; }
div.subpage div.container_12 h1 { font-size: 34px; color: #fff; padding: 30px 0; margin: 0; }
div.subpage div.container_12 h1 span { color: #923f3f; }

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

div#content { font-family: "Myriad Pro", "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; }
div#content h2.opener { font-size: 34px; line-height: 42px; color: #272931; font-weight: normal; padding: 20px 0 0 0; }
div#content h3 { color: #923f3f; }
div#content ul, div#content ol { list-style-position: inside; }

/* Grid Content Sizes
------------------------------------------------*/

div.grid_3 h3 { font-size: 18px; }
div.grid_3 p { font-size: 13px; line-height: 18px; }
div.grid_3 ul { font-size: 13px; line-height: 18px; list-style: none; }
div.grid_3 ul li { margin-bottom: 5px; }

/* Pages pages
------------------------------------------------*/

.related_pages ul li { border-top: dashed #444 1px; padding-top: 10px; padding-bottom: 5px; }

/* Grid Cushioning
------------------------------------------------*/

.cushion-v { padding: 20px 0; }

/* Portfolio List Page
------------------------------------------------*/

div#portfolio_categories { padding-top: 20px; } 
div#portfolio_categories h3 { font-weight: normal; }
div#portfolio_categories h4 { font-size: 14px; color: #272931; font-weight: bold; }
div#portfolio_categories ul { list-style: none; }

div#portfolio_list dl { 
	overflow:hidden; 
	width: 300px; 
	height: 300px; 
	line-height: 16px; 
	position: relative; 
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
div#portfolio_list dl dt.image { overflow: hidden; display: block; height: 300px; margin-bottom: 10px; }
div#portfolio_list dl dt.image img {}
div#portfolio_list dl dt.image span {
	background: url(../themes/sbj09/images/transparent-dark.png); 
	position: absolute; 
	top: 0; 
	padding: 20px; 
	left: 0; 
	width: 300px; 
	height: 300px;
	display: none; 
	}
	
div#portfolio_list dd.site_name { margin-bottom: 0; }
div#portfolio_list dd.site_name a { font-size: 18px; text-decoration: none; display: block; color: #e04848 !important; }
div#portfolio_list dd.launch_date { font-size: 13px; color: #999; font-style: italic; margin-bottom: 20px; }
div#portfolio_list dd.description { color: #ccc; font-size: 14px; }


/* stuff I'm adding for the "reveal" effect */
div#portfolio_list dl div.info { 
	background: url(../themes/sbj09/images/transparent-dark.png); 
	position: absolute; 
	top: 240px; 
	padding: 20px; 
	left: 0; 
	width: 260px; 
	height: 260px; 
	}

/* Portfolio Detail Page
-------------------------------------------------*/

img.screenshot { 
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
	box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
	}
	
portfolio_caption { color: #333; }

div.grid_3 span.launch_date { color: #444; }

/* Blog Main Page 
-------------------------------------------------*/

div#article_list {} 
div#article_list div.article {}
div#article_list div.article h3 { margin-bottom: 0; }
div#article_list div.article .post_date { font-size: 12px; color: #555; margin: 0; }

/* Article Detail Page
-------------------------------------------------*/

div#article_detail {}
div#article_detail p.post_date { color: #444; margin: 0; font-style: italic; }

div#related_headlines a { text-decoration: none; }
div#related_headlines a:hover { text-decoration: underline; }

/* Comments
-------------------------------------------------*/

table.comments {}
table.comments td { padding: 10px; border-top: 1px solid #666; vertical-align: top; }
table.comments td .post_date { color: #444; margin: 0; font-style: italic; }
form.comment_form {}


/* Request Form
-------------------------------------------------*/

form#request_form { margin-right: 40px; }
form#request_form fieldset { border: 0; border-top: 1px solid #894e00; padding: 20px; padding-right: 80px; margin-bottom: 20px; }
form#request_form fieldset legend { padding: 0 20px; text-transform: uppercase; letter-spacing: 3px; }
form#request_form fieldset div { position: relative; margin-bottom: 15px; } 
form#request_form fieldset div label { float: left; padding: 3px 0; text-align: right; color: #1A1C11; margin-left: 20px; font-size: 14px; width: 120px; }
form#request_form fieldset div input { font-size: 14px; padding: 3px; margin-left: 20px; width: auto; }
form#request_form fieldset div textarea { font-size: 14px; padding: 3px; margin-left: 20px; width: 360px; } 
form#request_form fieldset div select { font-size: 14px; padding: 3px; margin-left: 20px; } 
form#request_form fieldset div span.required { color: red; font-size: 12px; font-style: italic; }

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

div.form_errors { color: #b83030; background: #fff; border: 1px solid #b83030; padding: 10px 20px; margin-bottom: 20px; }
div.form_errors h3 { margin: 0; margin-bottom: 10px; }
div.form_errors p { margin: 0; font-style: italic; padding-left: 20px; color: red; }
div.form_errors span.error_explanation { color: #333; font-size: 14px; margin-bottom: 10px; }

/* FAQs Page
-------------------------------------------------*/

div.faqs_list dl {
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
	border: 1px solid rgba(0,0,0,0.3);
	margin-bottom: 1.0em;
	padding: 20px;
	background: url(../my_icons/arrow_right.png) no-repeat 20px 20px rgba(255,255,255,0.1);
	}
	
div.faqs_list dl:hover { 
	cursor: pointer;
	}
	
div.faqs_list dl.open {	
	background: url(../my_icons/arrow_down.png) no-repeat 20px 20px rgba(255,255,255,0.2); 
	}
	
div.faqs_list dl dt { 
	font-weight: bold;
	font-size: 24px; 	
	padding-left: 30px; 
	color: #923F3F;
	}
	
div.faqs_list dl dd {
	padding-left: 30px;
	padding-top: 20px;
	}
	
/* Facebook Like Box
-----------------------------------------------*/

#fb_like { background-color: #fff; }


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

div#footer { background-color: #000; min-height: 60px; color: #fff; border-top: 1px solid #C7A46E;}
div#footer div.content { width: 980px; padding-top: 10px; margin: 0 auto; background: url(../themes/sbj09/grungy-bg-alt.jpg) no-repeat 20px 0; }
div#footer div.container_12 {  }
div#footer h2 { color: #fff; margin-bottom: 30px; font-weight: lighter; }
div#footer h2 span { color: #923f3f; }
div#footer p { font-size: 13px; color: #eee; }