/*
Theme Name: Jason LaRose
Theme URI: http://jasonlarose.com
Description: This is the theme for the Blog of Jason LaRose Design
Version: 1
Author: Jason LaRose
*/



/* ========================================================================= */
/* UNIVERSAL STYLES                                                          */
/* ========================================================================= */

	* { margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; }
	html, body { font-size: 11px; line-height: 150%; color: #777777; background: url(images/bg.gif) 50% 0; _height: 100%; }



/* ========================================================================= */
/* LAYOUT STYLES                                                             */
/* ========================================================================= */

	#wrapper { width: 900px; margin: 0 auto 100px auto; background: url(images/bg_content.jpg) repeat-y 50% 0; }
	#header { background: url(images/bg_header.jpg) no-repeat 50% 0; height: 161px; padding-top: 1px; }
	#header.blogheader { background: url(images/bg_header-blog.jpg) no-repeat 50% 0; }
	#content { width: 860px; margin: 0 auto; border-bottom: 1px solid #fff; }
	#content-inner { border-top: 1px solid #fff; margin-top: -1px; *margin-top: -10px; background: url(images/bg_content-divider.gif) repeat-y 580px 0; border-bottom: 1px solid #cecece; overflow: hidden; }
	#portfolio { width: 860px; height: 350px; overflow: hidden; margin-top: 55px; border-top: 1px solid #fff; border-bottom: 1px solid #cecece; }
	#portfolio-scroll { float: left; width: 840px; padding: 10px; margin: -405px auto 0 auto; border-bottom: 1px solid #cecece; }
	#content-sub { width: 280px; float: right; }
	#content-main { width: 580px; _width: 572px; }
	#blog { width: 280px;  float: right; }
	#about { width: 580px; _width: 577px; border-bottom: 1px solid #cecece; }
	#contact { width: 580px;  _width: 577px; border-top: 1px solid #fff; }
	#footer { background: url(images/bg_footer.jpg) no-repeat 50% 0; height: 60px; margin: 0 auto; }
	#nav { border-bottom: 1px solid #cecece; margin-bottom: 1px; *padding-bottom: 10px; }
	#nav ul { list-style: none; overflow: hidden; margin: 10px; _height:40px;}
	#nav ul li { float: left; }
	#nav ul li a { display: block; padding: 10px; color: #69758A; text-transform: uppercase; font-weight: bold; font-size: 12px; line-height: 100%; }
	#nav ul li a:hover { background: #69758A; padding: 9px; color: #fff; text-decoration: none; border: 1px solid #555F73; border-top: 1px solid #454D5E; border-bottom: 1px solid #6B7388; }


/* ========================================================================= */
/* ELEMENT STYLES                                                            */
/* ========================================================================= */

	h1 { font-size: 14px; margin-top: 8px; *margin-top: 15px; color: #69758a; text-transform: uppercase; text-align: center; }
	h1 a { color: #69758a; }
	h1 a:hover { color: #ef9400; text-decoration: none; }
	h2 { font-size: 14px; margin: 20px; color: #69758a; text-transform: uppercase; }
	h3 { font-size: 9px; margin: 10px; *margin: 5px; color: #69758a; text-transform: uppercase; text-align: center; }
	h4 { font-size: 11px; margin: 20px 20px 10px 20px; color: #69758a; text-transform: uppercase; }
	p { margin: 20px; }
	ol { margin: 10px 20px 20px 35px; }
	ul { margin: 10px 20px 20px 35px; }
	a { text-decoration: none; color: #ef9400; }
	a:hover { text-decoration: underline; }
	a:focus { -moz-outline-style: none; } 
	a img { border: none; }
	blockquote { margin: 20px; border: 1px solid #cecece; font-style: italic; }
	cite { margin: 0 20px 20px 20px; }
	

/* = ELEMENT STYLES: Classes and ID's ====================================== */	

	#header h1 { float: left; display: none; }
	#header a.subscribe { display: block; background: url(images/icon_rss.gif) no-repeat 0 0; width: 13px; height: 13px; text-indent: -9000px; float: right; margin: 102px 23px 0 0; _margin: 102px 12px 0 0; }
	#header a.subscribe:hover { display: block; background: url(images/icon_rss.gif) no-repeat 0 -50px; }
	
	.stepcarousel { position: relative; /*leave this value alone*/ overflow: scroll; /*leave this value alone*/ height: 280px; /*Height should enough to fit largest content's height*/ width: 800px; top: -1px; left: 0; }
	.stepcarousel .belt { position: absolute; /*leave this value alone*/ left: 0; top: 0; }
	.stepcarousel .piece { float: left; /*leave this value alone*/ width: 860px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */ }
		
		a.previous { float: left; display: block; text-indent: -9000px; background: url(images/icon_arrow-left.gif) no-repeat 0 0; width: 35px; height: 31px; }
		a:hover.previous { background: url(images/icon_arrow-left.gif) no-repeat 0 -50px; }
		a.next { float: right; display: block; text-indent: -9000px; background: url(images/icon_arrow-right.gif) no-repeat 0 0; width: 35px; height: 31px; }
		a:hover.next { background: url(images/icon_arrow-right.gif) no-repeat 0 -50px; }
		
	ul#twitter_update_list { list-style: none; margin: 10px; }
	ul#twitter_update_list li { margin: 10px 8px; padding: 10px 12px; }
	ul#twitter_update_list li:hover { background: url(images/bg_tweet.gif) 50% 100%; }
	ul#twitter_update_list li span { display: block; border-bottom: 1px solid #cecece; }
	ul#twitter_update_list li a { font-size: 10px; font-weight: bold;  background: url(images/icon_clock.gif) no-repeat 0 3px; padding: 2px 0 0 10px; }
		ul#twitter_update_list li a:hover { background: url(images/icon_clock.gif) no-repeat 0 -47px; }
	ul#twitter_update_list li span a { font-size: 11px; font-weight: normal; background: none; padding: 0; }
		ul#twitter_update_list li span a:hover { background: none;; }
		
	#subscription-options { margin: 20px auto; width: 204px; overflow: hidden; }
	a.button-subscribe { background: url(images/button_twitter-options.gif) no-repeat 0 0; width: 74px; font-weight: bold; color: #69758a; display: block; padding: 9px 0 9px 28px; float: left;}
		a.button-subscribe:hover { background: url(images/button_twitter-options.gif) no-repeat 0 -50px; text-decoration: none; }
	a.button-follow { background: url(images/button_twitter-options.gif) no-repeat -102px 0; width: 74px; font-weight: bold; color: #69758a; display: block; padding: 9px 0 9px 28px; float: left; }
		a.button-follow:hover { background: url(images/button_twitter-options.gif) no-repeat -102px -50px; text-decoration: none; }
		
	p.warning { background: #69758a; border-top: 1px solid #cecece; border-left: 1px solid #cecece; border-bottom: 1px solid #fff; border-right: 1px solid #fff; font-weight: bold; padding: 5px; line-height: 100%; color: #fff; text-transform: uppercase; margin-bottom: 0; }



/* = ELEMENT STYLES: Blog ====================================== */	

	.post, .comments { background: #fff url(images/bg_post.jpg) repeat-x 50% 100%; border-right: 1px solid #E1E1E1; border-bottom: 1px solid #DDD; border-left: 1px solid #E1E1E1; margin: 20px; padding-top: 1px; }
	.post h1, .comments h1 { text-align: left; font-size: 16px; margin: 20px; line-height: 150% }
	.post h3 { font-size: 11px; text-align: left; margin: 20px; }
	.post img { display: block; margin: 20px auto; padding: 9px; _padding: 5px; border: 1px solid #cecece; }
	.post li { margin: 2px 20px 2px 15px; }
	
	.comments ol { border-top: 1px solid #cecece; list-style: none; margin: 20px; }
	.comments li { border-bottom: 1px solid #cecece; overflow: hidden; _overflow: inherit; _height: 10px;  *margin-top: -3px; }
	.comments li.even { background: #EFEFEF; }
	.comments li.comment-author-admin { background: #69758a; border-top: 1px solid #576177; border-bottom: 1px solid #888F9F; color: #fff; }
	.comments li p { float: right; width: 295px; margin: 0; padding-right: 20px; margin: 20px 0; }
	.comments li p.author { float: left; width: 140px; padding-left: 20px; padding-right: 0; margin: 20px 0; font-size: 10px; text-align: right; }
	.comments li p.author strong { font-size: 11px; }
	
	p.postmetadata { font-size: 10px; border-top: 1px solid #cecece; padding-top: 1px; }
	
	#content-sub ul.articles, #blog ul.articles { list-style-type: none; border-top: 1px solid #cecece; margin: 20px; }
	#content-sub ul.articles li, #blog ul.articles li { padding: 10px 0 10px 10px; border-bottom: 1px solid #cecece; }
	#content-sub ul.categories { list-style-type: none; border-top: 1px solid #cecece; margin: 20px; }
	#content-sub ul.categories li { padding: 10px 0 10px 10px; border-bottom: 1px solid #cecece; }

	#content-sub ul.articles li a, #blog ul.articles li a  { color: #69758a; font-weight: bold; margin: 0; display: block; padding: 0 0 0 12px; background: url(images/icon_article.gif) no-repeat 0 3px; }
	#content-sub ul.articles li a:hover, #blog ul.articles li a:hover { color: #ef9400; text-decoration: none; background: url(images/icon_article.gif) no-repeat 0 -47px; }
	#content-sub ul.categories li a { color: #69758a; font-weight: bold; margin: 0; display: block; padding: 0 0 0 12px;  background: url(images/icon_folder.gif) no-repeat 0 3px; }
	#content-sub ul.categories li a:hover { color: #ef9400; text-decoration: none;  background: url(images/icon_folder.gif) no-repeat 0 -47px; }
	
	.wp-pagenavi { margin: 20px; color: #69758a; }
	.wp-pagenavi a { background: #fff; border-left: 1px solid #FFF; border-right: 1px solid #E1E1E1; border-bottom: 1px solid #DDD; border-left: 1px solid #E1E1E1; padding: 5px; margin: 0 2px; }
	.wp-pagenavi a:hover { background: #69758a; border-top: 1px solid #576177; border-bottom: 1px solid #888F9F; border-right: 1px solid #69758a; border-left: 1px solid #69758a; color: #fff; text-decoration: none; }
	.wp-pagenavi span { background: #69758a; border-top: 1px solid #576177; border-bottom: 1px solid #888F9F; border-right: 1px solid #69758a; border-left: 1px solid #69758a; color: #fff; padding: 5px; margin: 0 2px;  }

/* ========================================================================= */
/* FORM STYLES                                                               */
/* ========================================================================= */

	form { margin: 20px 0 20px 20px; overflow: hidden; }
	form * { font-size: 11px; line-height: 100%; color: #69758a; font-weight: bold; }
	form ul { float: left; width: 280px; margin: 0; _width: 250px; }
	form li { list-style: none; margin: 0 0 10px 0; _padding-right: 10px; }
	form ul.comment { clear: both; width: 100%; }
	form ul.comment li { margin: 0 0 10px 0; *margin-top: -3px; }
	label { font-weight: bold; }
	input.text { width: 250px;  _width: 250px; padding: 5px 4px 2px 4px; border: 1px solid #cecece; height: 12px; }
	input.special { display: none; }
	textarea { width: 530px; padding: 5px 4px 2px 4px; border: 1px solid #cecece; height: 100px; font-size: 11px; }
	select { width: 261px;  _width: 260px; padding: 2px 0; *margin-top: 1px; *border-color: #cecece; }
	input.submit { float: right; background: url(images/button_send.gif) no-repeat 0 0; border: none; display: block; width: 67px; padding: 10px 5px 10px 25px; *padding: 10px 11px 7px 15px; margin-right: 20px; }
	input.submit:hover { background: url(images/button_send.gif) no-repeat 0 -50px; }
	
	#content-main textarea { width: 250px; height: 74px; }
	#content-main textarea.loggedin { width: 530px; }
	
	#content-sub form ul { width: 263px; }
	#content-sub input.text, #content-sub textarea { width: 233px; }

	#content-main textarea.blog-contact { width: 530px; height: 74px; }

	
	

/* ========================================================================= */
/* IE6 STYLES                                                               */
/* ========================================================================= */
	
	.ie-background { position: absolute; background: #000; filter: alpha(opacity=75); width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; z-index: 100; }
	.ie { position: absolute; top: 0; left: 50%; z-index: 101; width: 500px; margin: 20px 0 0 -250px;  }
	.ie h4 { font-size: 14px; margin: 0 auto; color: #69758a; background: url(images/ie6-bg.gif) no-repeat 50% 0; text-transform: uppercase; border-bottom: 1px solid #cecece; width: 460px; padding: 20px; }
	.ie-body { background: #ededed; overflow: hidden; }
	.ie p { border-top: 1px solid #fff; border-bottom: 1px solid #cecece; margin: 0; padding: 20px; }
	.ie .ie-options { overflow: hidden; float: left; width: 500px; background: #ededed url(images/bg_content-divider.gif) repeat-y 50% 0; border-top: 1px solid #fff; border-bottom: 1px solid #cecece; }
	.ie .ie-options p { border: none; }
	.ie .ie-float { float: left; width: 248px; }
	.ie ul { margin: 0 20px 20px 20px; }
	.ie li { margin: 5px 0; list-style: none; }
	.ie a { font-weight: bold; }
	.ie a.firefox { padding: 0 0 0 13px; background: url(images/ie6_icon_firefox.gif) no-repeat 0 1px; }
	.ie a.chrome { padding: 0 0 0 13px; background: url(images/ie6_icon_chrome.gif) no-repeat 0 1px; }
	.ie a.safari { padding: 0 0 0 13px; background: url(images/ie6_icon_safari.gif) no-repeat 0 1px; }
	.ie a.opera { padding: 0 0 0 13px; background: url(images/ie6_icon_opera.gif) no-repeat 0 1px; }
	.ie a.ie7 { padding: 0 0 0 13px; background: url(images/ie6_icon_ie7.gif) no-repeat 0 1px; }
	.ie a.flock { padding: 0 0 0 13px; background: url(images/ie6_icon_flock.gif) no-repeat 0 1px; }
	.ie a.ie-close { padding: 0 0 0 13px; background: url(images/ie6_icon_broken.gif) no-repeat 0 1px; }
	.ie-footer { clear: both; background: url(images/ie6-bg-footer.gif) no-repeat 50% 100%; }
	.ie-footer p { border-bottom: none; }