/* 
		Palette
--------------------------------------------------------------------------------------------
*/
/* 
orange: #E96706
	orange light: #ED771F
	orange dark: #984100
gold: #E99206
	gold light: #ED9F1F
	gold dark: #6d4401
red: #E91206
	red light: #e91206
	red dark: #6d0601
brown: #211a14
	khaki: #8e7663
	beige: #ebdacc
*/

/* 
-------------------------------------------------------------------------------------
.1	Formatting	>	Typography
*/

body { text-align: center; color: #211a14; font: 14px/20px minion-pro, minion pro, garamond, palatino linotype, book antiqua, sans-serif; background: #ebe3dd url(../img/bg.jpg) top center repeat; background-attachment: fixed; }
a, a:link, a:active{ color: #e96706; text-decoration: none; }
	a:hover { text-decoration: underline; }
h1, h2, h3, h4{ font-weight: normal; text-align: center; }
	h1 { font-size: 32px; margin: 0 0 20px 0; }
	h2 { font-size: 22px; margin: 0 0 10px 0; text-align: center; }
	h3 { font-size: 18px; margin: 0 0 5px 0; }
	h4 { color: #4d4945; font-size: 14px; margin: 0 0 5px 0; font-style: normal; font-variant:small-caps; letter-spacing: 0.5px; }
hr { width: 100%; height: 1px; color: #8e7663; }
	hr.divider { clear: both; z-index: 8; height: 20px; background: #fff url(../img/hr_divider.gif) center center repeat-x; }
	a hr.divider_mini { display: block; width: 130px; height: 0; margin: 10px 70px; color: green; border-top: 1px solid rgba(142,118,99,0.33); }
	a:hover hr.divider_mini { border-color: #e96706; }
p { margin: 0 0 10px 0; }
small { font: 10px news-gothic-std, news gothic std, news gothic mt, tahoma, sans-serif; line-height: 14px; }

/* 
-------------------------------------------------------------------------------------
.2	Formatting	>	Typography	>	Lists
*/

ol, ul { width: 100%; list-style: none; }
	ol.right, ul.right { float: right; margin: 0 0 0 20px; }
	ol.left, ul.left { float: left; margin: 0 20px 0 0; }
	ul li { padding: 0 0 5px 0; border-bottom: 1px solid #bdbbb9; margin: 0 0 5px 0; }
		ul li.last { margin-bottom: 0 !important; padding-bottom: 0 !important; }
 
/* 
-------------------------------------------------------------------------------------
.3	Formatting	>	Forms (Contact pane only)
*/

fieldset { width: 100%; }
	fieldset ul { width: 100%; }
	fieldset ul li { clear: both; display: block; border-bottom: 0; margin: 0 0 5px 0; background: none; }
	fieldset label { display: block; float: left; width: 110px; margin: 0 20px 0 ; }
	fieldset input, fieldset textarea { width: 418px; padding: 5px; border: 1px solid #8c7e70; margin: 0; background: #0d0a07; color: #ebe3dd; }
		fieldset textarea { height: 140px; }
			fieldset input:focus, fieldset textarea:focus { border-color: #ebe3dd; color: #fff; }
		fieldset input#submit_button { width: 130px; height: 32px; border: 0; margin: 0 0 0 150px; background: transparent url(../img/icon-submit.png) 0 0 no-repeat; text-indent: -9999px; cursor: pointer; }
			fieldset input:focus#submit_button { border-color: transparent;background-position: 0 -32px; }
			fieldset input:hover#submit_button { background-position: 0 -32px; }
			 
/* 
-------------------------------------------------------------------------------------
.4	Formatting	>	Typography	>	Special Styles
*/

.amp { font-family: adobe-garamond-pro, serif; font-weight: normal; font-style: italic; }
.big { font: 24px minion-pro, minion pro, garamond, palatino linotype, book antiqua, sans-serif; }
.emphasis { color: #8e7663; font-weight: bold; }
.clearing { clear: both; }
.image { text-indent: -9999px; display: none; }
.last { border-bottom: none; }
.caps { font-variant: small-caps; }
p.intro { font-size: 28px; line-height: 32px; text-align: left; text-shadow: 1px 2px 0 rgba(255,255,255,0.8); margin-bottom: 20px;}
p.intro > .emphasis { text-shadow: 1px 2px 0 rgba(255,255,255,0.6); }

.subsection { float: left; width: 280px; margin: 0 0 2px 20px; }
.subsection:first-child { margin-left: 0; }
.subhead { font-size: 12px !important; letter-spacing: 0.1em; font-family: news-gothic-std, news gothic std, news gothic mt, tahoma, sans-serif; text-transform:uppercase; }
.subhead > .emphasis { display: block; }
		
/* 
-------------------------------------------------------------------------------------
.5	Structure	>	Common Modules
*/
.content { text-align: left; width: 900px; margin: 0 auto; }
.col_1x { width: 130px; }
.col_2x { width: 280px; }
.col_3x { width: 430px; }
.col_4x { width: 580px; }
.align_right { float: right; margin-left: 20px; }
.align_left { float: left; margin-right: 20px; }
 
/* 
-------------------------------------------------------------------------------------
.6	Structure	>	Major Module	> 	Header
*/

#header { position: fixed; text-align: center; width: 100%; height: 0; background: transparent none center bottom no-repeat;}
.header_content { width: 920px; text-align: left; margin: 0 auto; }
.header_wrapper { width: 100%; text-align: center; }
				
#header_contact { margin: 0 auto; width: 100%; text-align: center; }
	#contact_tab_wrapper { z-index: 5; }
	#contact_tab { margin: 0 auto; text-transform: uppercase; letter-spacing: 0.2em; font: 1.2em news-gothic-std, news gothic std, news gothic mt, tahoma, sans-serif; } /* 12px */
	#contact_tab p { width: 300px; margin-left: 620px; background: transparent url(../img/bg_contact_tab.png) center bottom no-repeat; }
	#contact_tab a { display: block; z-index: 9; width: 260px; height: 16px; padding: 8px 0; margin: 0 20px; background: transparent url(../img/icon_tab.png) right 0 no-repeat; color: #211a14; text-shadow: -1px -1px 1px rgba(142,118,99,0.5); font: 14px/14px news-gothic-std, news gothic std, news gothic mt, tahoma, sans-serif; }
		#contact_tab a:hover { text-decoration: none; color: #ebe3dd; }
		a:hover#contact_open { background-position: right -40px; }
		a#contact_close { display: none; background-position: right -80px; }
		a:hover#contact_close { display: none; background-position: right -120px; }
	
#header_nav_wrapper {  }
#header_nav { display: none; z-index: 6; width: 920px; height: 0; text-transform: uppercase; letter-spacing: 0.2em; font: 14px/14px news-gothic-std, news gothic std, news gothic mt, tahoma, sans-serif; } /* 12px */
	#header_nav p { position: relative; top: -30px; z-index: 7 !important; width: 580px; margin: 0 0 0 20px; text-align: left; }
	#header_nav a { text-decoration: none; text-shadow: 1px 1px 1px rgba(255,255,255,0.66); }
	#header_nav a:hover { text-decoration: underline; }
	#header_nav a:active { padding: 1px 0 -1px; }
	

/* 
-------------------------------------------------------------------------------------
.7	Structure	>	Major Module	> 	Header	>	Contact Panel
*/

#contact_panel_wrapper { position: relative; display: none; width: 100%; border-bottom: 5px solid #e96706; padding: 20px 0; background: #211a14 url(../img/bg_contact.jpg) bottom center repeat-x; color: #ebe3dd; font-size: 18px; }
#contact_panel { clear: both; width: 880px; padding: 30px 30px 0; margin: 0 auto 0; background: transparent url(../img/bg_contact_panel.png) top center no-repeat; }
	#contact_panel .emphasis { text-transform: uppercase; font: 18px news-gothic-std, news gothic std, news gothic mt, tahoma, sans-serif;}
	#contact_panel .col_4x { margin: 0 0 0 300px; }
	#contact_panel .col_2x { float: left; width: 300px; }
	#contact_panel .col_2x p { margin-bottom: 20px; }
	
	#contact_form { text-align: center; }
	#contact_form p { margin: 20px 0 0 0; font-size: 24px; line-height: 28px; }
	#contact_form .emphasis { font-size: 24px; }

	p.link { width: 280px; height: 30px; margin-bottom: 20px; background: transparent url(../img/bg_link_tab.png) top center no-repeat; }
	p:hover.link  { background-position: center -30px; }
	p.link a { display: block; width: 225px; height: 22px; padding: 8px 0 0 55px; background: transparent url(../img/icon_contact.png) 10px 0 no-repeat; font-size: 14px; line-height: 14px; }
	p#link_email { margin-bottom: 5px !important; }
	p#link_resume { margin-bottom: 0 !important; }
	
		p#link_email a { background-position: 10px 0; }
		p#link_email a:hover { background-position: 10px -30px; }
		p#link_phone a { background-position: 10px -60px; }
		p#link_phone a:hover { background-position: 10px -90px; }
		p#link_resume a { background-position: 10px -120px; }
		p#link_resume a:hover { background-position: 10px -150px; }
		
#contact_panel_bottom { clear: both; width: 940px; height: 30px; margin: 0 auto 0; background: transparent url(../img/bg_contact_panel_bottom.png) top center no-repeat; }

 
/* 
-------------------------------------------------------------------------------------
.9	Structure	>	Major Module	> 	Masthead
*/

#masthead_wrapper{ z-index: 8; text-align: center; width: 100%; border-top: 5px solid #e96706; background: #211a14 url(../img/bg_header.jpg) center bottom repeat-x; margin: 0 auto; }
#masthead_wrapper  .content{ width: 940px; margin: 0 auto; padding: 40px 0 0; text-align: left; }
	 	
#masthead_wrapper h1 { text-align: left; display: block; width: 580px; height: 131px; margin: 0 0 0 10px; }
#masthead_wrapper h1 a { width: 580px; height: 131px;	 display: block; text-align: left; background: transparent url(../img/logo.png) left center no-repeat; }

#masthead_nav { float: right; width: 280px; margin: 65px 30px 0 0 !important; color: #8e7663; text-transform: uppercase; letter-spacing: 0.2em; font: 14px/14px news-gothic-std, news gothic std, news gothic mt, tahoma, sans-serif; }

#introduction { width: 880px; margin: 40px 0 0; padding: 20px 30px 0; background: transparent url(../img/bg_header_content.png) top center no-repeat; }

/* TEMPORARY CENTER ALIGNMENT */ #introduction p { text-align: center; }
#introduction .col_4x { float: left; }
#introduction .col_2x { margin-left: 600px; line-height: 21px !important; }
#introduction p.intro { line-height: 32px; margin-bottom: 19px; }
#introduction p.subhead { line-height: 20px; margin-bottom: 0px; padding-bottom: 12px; }
#introduction  .col_4x .subhead { padding-bottom: 13px; }

p#referral { font-size: 18px; line-height: 21.spx; margin-bottom: 10px; }

 
/* 
-------------------------------------------------------------------------------------
.10	Structure	>	Major Module	> 	Portfolio
*/

#portfolio_wrapper{ clear: both; text-align: center; width: 100%; }
#portfolio_wrapper.content { padding-top: 0; }

#portfolio_wrapper .intro { width: 880px; margin: 12px 0 20px 10px; text-align: center; }
.project { float: left; width: 280px; padding: 0 10px; margin-bottom: 20px; color: #524e4a; background: transparent; }
.project a {  z-index: 3; }
.project a:hover { text-decoration: none; }
.project a .project_image { height: 185px; overflow: hidden; }
.project a .project_content { clear: both; }
.project a img { width: 280px; height: 175px; z-index: -4; position: relative; }
.project a:hover img { z-index: -3; }
.project a .project_hover { position: relative; top: -175px; width: 280px; height: 175px; overflow: hidden; background: transparent url(../img/bg_port.png) 0 bottom no-repeat; z-index: -2;}
.project a:hover .project_hover { background-position: -280px bottom; }
.project a .project_hover > p { width: 240px; height: 135px; margin: 1000px 20px 20px 20px; color: #ebdacc;  }
.project a:hover .project_hover > p { margin-top: 20px; color: #ebdacc; }
.project_hover strong { display: block; }
.project h3 { clear: both; text-align: center; margin: 10px 0 0 0; }
.project hr { width: 130px; }
.project a .subhead { text-align: center; color: #8e7663; line-height: 12px; margin-bottom: 0; }
.project a:hover .subhead { color: #211a14; }
	 
/* 
-------------------------------------------------------------------------------------
.11	Structure	>	Major Module	> 	Services
-------------------------------------------------------------------------------------
*/
	
#services-wrapper { clear: both; text-align: center; width: 100%; padding: 0 0 4px; margin: 0 auto; background: transparent; }
#services-wrapper > .content { width: 880px; padding: 24px 0 0 0; background: transparent url(../img/hr-double_lightbg.gif) top center repeat-x; margin: 0 auto; }

#services-strategy { margin-left: 0; }
#services-wrapper .subsection > h2 span { margin-right: 5px; }
#services-wrapper .subsection p .emphasis {letter-spacing: 0.05em; }
#services-strategy > h2 span { color: #E99206; }
#services-design > h2 span { color: #E96706; }
#services-wordpress > h2 span { color: #E91206; }
 


 
/* 
-------------------------------------------------------------------------------------
.13	Structure	>	Major Module	> 	Footer
-------------------------------------------------------------------------------------
*/

#footer { clear: both; text-align: center; width: 100%; border-bottom: 5px solid #e96706; background: #211a14 url(../img/bg_footer.jpg) center bottom repeat-x; margin: 0 auto; margin: 0 auto; }

#about{ clear: both; text-align: center; width: 880px; padding: 0 40px; margin: 0 auto; background: transparent url(../img/bg_footer_content.png) center center repeat-y; }
#about > .col_2x { float: left; width: 280px; }

#about > .intro { margin-bottom: 5px; padding-top: 12px; }
#about_bio .col_2x  { float: right; margin-right: 20px; text-align: left; }
#about_bio p:first-child  { margin-right: 0; }

.about_social { margin-top: 10px; height: 175px; overflow: hidden; text-align: left; }
.about_social > .subhead { margin-bottom: 10px; text-align: center; }
.about_social > h3 { line-height: 20px; }
.about_social > h3 > a { display: block; }
.about_social > h3 > a > span { display: block; overflow: hidden; }
.about_social > h3 > a:hover { text-decoration: none; border-color: #e96706; }
.about_social > p { height: 60px; overflow: hidden; }
.about_social li { -moz-box-shadow: inset 0 0 10px rgba(152,65,0,0.66); }

#about_blog > h3 > a span { height: 40px; }
#about_blog > p { height: 80px; }
#about_twitter > h3 > a span { height: 80px; }
#about_twitter > p { height: 40px; }

#about h3 > a:first-child { height: }

#footer li { width: 120px; background: #e96706 url(../img/bg_orange.gif); border-bottom: 0 none; margin: 0 0 0 70px; padding: 5px !important; }
#footer li  > a { display: block; height: 14px; width: 99px; padding: 1px 0 1px 21px; background: transparent url(../img/icon_footer.png) 0 0 no-repeat; color: #211a14; font: 14px/14px news-gothic-std, news gothic std, news gothic mt, tahoma, sans-serif; text-transform: uppercase; text-shadow: -1px -1px 1px rgba(142,118,99,0.5);}
#footer li  > a:hover { color: #ebe3dd; text-decoration: none; }

#about_blog li a:hover { background-position: 0 -30px; }
#about_twitter li a { background-position: 0 -60px !important; }
#about_twitter li a:hover { background-position: 0 -90px !important; }
a#about_linkedin { background-position: 0 -120px !important; }
a:hover#about_linkedin { background-position: 0 -150px !important; }
a#about_dribbble { background-position: 0 -176px !important; }
a:hover#about_dribbble { background-position: 0 -206px !important; }

#about_personal { width: 320px !important; height: 195px; text-align: left; background: transparent url(../img/will_r.jpg) center center no-repeat; }
#about_personal ul { width: 130px; margin: 100px 0 0 170px; }
#about_personal ul li { margin-left: 0 !important; background: #e96706 url(../img/bg_orange_fade.png) right top}
#about_personal ul li + li { padding-top: 0 !important; }
#about_personal ul li + li > a { border-top: 1px solid #984100; padding-top: 5px; }

hr#footer_meta { height: 20px; background: transparent url(../img/hr_footer_meta.png) center bottom no-repeat; }

#meta { clear: both; text-align: center; width: 880px; height: 74px; padding: 0 30px; margin: 0 auto; background: transparent url(../img/bg_footer_meta.png) center -24px no-repeat; color: #ebdacc; }
#meta_underlay { height: 74px; background: transparent url(../img/bg_meta_underlay.png) center 20px no-repeat;}
	#meta p { font-size: 14px; line-height: 14px; padding: 20px 0; width: 450px; height: 34px; }
	#meta_colophon { float: right; text-align: right; }
	#meta_legal{ text-align: left; margin: 0 450px 0 0; }
	
#footer img.logo { position: relative; top: -40px; width: 130px; height: 75px; margin: 0 385px -20px ; }

/* 
-------------------------------------------------------------------------------------
.14	Structure	>	Major Module	> 	Portfolio	>	Lightbox
*/

#jquery-overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background: #211a14 url(../img/bg_lightbox.jpg) center bottom repeat; }
#jquery-lightbox { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;  background: transparent;  }

#lightbox-container-image-box { position: relative; width: 940px; height: 611px; margin: 0 auto; }
#lightbox-container-image { width: 940px; height: 610px; padding: 0px; }
#lightbox-image { border: none; width: 880px; height: 550px; padding: 30px; background: transparent url(../img/bg_lightbox_border.png) center center no-repeat;}

#lightbox-loading {
 position: absolute;
 top: 40%;
 left: 0%;
 height: 25%;
 width: 100%;
 text-align: center;
 line-height: 0;
 }
#lightbox-nav {
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 z-index: 10;
 }
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
 width: 49%;
 height: 100%;
 zoom: 1;
 display: block;
 }
#lightbox-nav-btnPrev { 
 left: 0; 
 float: left;
 }
#lightbox-nav-btnNext { 
 right: 0; 
 float: right;
 }
a#lightbox-close { 
 right: 0; 
 float: right;
 margin: 45px 45px 0 0;
 height: 32px;
 width: 32px;
 background: transparent url(../img/icon_close.png) 0 0 no-repeat;
 zoom: 1;
 display: block;
 }
	a:hover#lightbox-close { background-position: -31px 0; }
#lightbox-container-image-data-box { font: 10px news-gothic-std, news gothic std, news gothic mt, tahoma, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; padding: 0 10px 0; }
#lightbox-container-image-data { padding: 0 10px;  color: #666;  }
#lightbox-container-image-data #lightbox-image-details {  width: 70%;  float: left;  text-align: left;  }	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber { display: block; clear: left; padding-bottom: 1.0em; }			
#lightbox-secNav-btnClose { width: 66px; float: right; padding-bottom: 0.7em; }
 
