/* 
============================================================================================
	Table of Contents
--------------------------------------------------------------------------------------------	
.1	Formatting	>	Typography
.2	Formatting	>	Typography	>	Lists
.3	Formatting	>	Forms (Contact pane only)
.4	Formatting	>	Typography	>	Special Styles
.5	Structure	>	Common Modules
.6	Structure	>	Major Module	> 	Header
.7	Structure	>	Major Module	> 	Header	>	Contact Pane
.8	Structure	>	Major Module	> 	Header	>	Contact Pane	>	List Icons
.9	Structure	>	Major Module	> 	Masthead
.10	Structure	>	Major Module	> 	Portfolio
.11	Structure	>	Major Module	> 	Services
.12	Structure	>	Major Module	> 	About
.13	Structure	>	Major Module	> 	Footer
.14	Structure	>	Major Module	> 	Portfolio	>	Lightbox
.15 Structure	>	IE 6 Warning
============================================================================================
*/	

/* 
============================================================================================
.1	Formatting	>	Typography
============================================================================================
*/	

body {
 text-align: center;
 color: #4d4945;
 font: 12px 'Trebuchet MS', Helvetica, Arial, sans-serif;
 background: #eae6e1 url(../img/site/bg-column.jpg) top center repeat;
 }
a, a:link, a:active{
 color: #50a914;
 background: transparent;
 text-decoration: none;
 }
	a:hover {
	 color: #54c20a;
	 }
h1, h2, h3, h4{
 font-family: Palatino Linotype, Palatino, Book Antiqua, Georgia, serif;
 font-weight: normal;
 font-style: italic;
 color: #312d2a;
 text-align: center;
 }
	h1 {
	 font-size: 32px;
	 margin: 0 0 20px 0;
	 }
	h2 {
	 font-size: 24px;
	 margin: 0 0 10px 0;
	 }
		h2.divider {
		 clear: both;
		 padding-top: 20px;
		 border-top: 1px solid #bdbbb9;
		 margin: 0 0 10px 0;
		 }
	h3 {
	 font-size: 20px;
	 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: #bdbbb9;
 }
p {
 line-height: 150%;
 margin: 0 0 10px 0;
 }
small {
 font: 10px Arial, 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;
	 }
 
/* 
============================================================================================
.3	Formatting	>	Forms (Contact pane only)
============================================================================================
*/	

fieldset {
 width: 390px;
 padding: 10px 20px 0;
 }
	fieldset ul {
	 width: 410px;
	 }
	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 0;
	 }
	fieldset input, fieldset textarea {
	 width: 248px;
	 padding: 5px;
	 border: 1px solid #7a736e;
	 margin: 0;
	 background: #4d4945;
	 color: #eae6e1;
	 }
		fieldset textarea {
		 height: 140px;
		 }
			fieldset input:focus, fieldset textarea:focus {
			border-color: #9a918c;
			color: #fff;
			}
		fieldset input#submit_button {
		 width: 130px;
		 height: 32px;
		 border: 0;
		 margin: 0 0 0 130px;
		 background: transparent url(../img/site/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: Book Antiqua, georgia, serif;
 font-weight: normal;
 font-style: italic;
 }
.big {
 font: 24px Palatino Linotype, Palatino, Book Antiqua, Georgia, serif;
 }
.caps {
 font-variant:small-caps;
 font-style: normal;
 }
.emphasis {
 color: #312d2a;
 font: 110% Palatino Linotype, Palatino, Book Antiqua, Georgia, serif;
 font-style: italic;
 font-weight: bold;
 }
.clearing {
 clear: both;
 }
.image {
 text-indent: -9999px;
 display: none;
 }
.last {
 border-bottom: none;
 }
 
/* 
============================================================================================
.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;
 }
.headline {
 color: #524e4a;
 width: 880px;
 padding: 20px 30px 32px;
 background: transparent url(../img/site/bg-headline.png) top center repeat-y;
 }
	.headline p {
	font: 24px Palatino Linotype, Palatino, Book Antiqua, Georgia, serif;
	padding: 0;
	margin: 0;
	}
	.headline p .caps {
	 letter-spacing: 1px;
	 }

.sub {
 width: 920px;
 padding: 10px 10px 5px;
 background: transparent url(../img/site/bg-twitter.png) top center no-repeat;
 line-height: 100%;
 font-family: Palatino Linotype, Palatino, Book Antiqua, Georgia, serif;
 font-style: italic;
 letter-spacing: 0.5px;
 }

 
/* 
============================================================================================
.6	Structure	>	Major Module	> 	Header
============================================================================================
*/	

#header-wrapper {
 text-align: center;
 width: 100%;
 padding: 0;
 background: #4d4945 url(../img/site/bg-contact.jpg) top center repeat-x;
 margin: 0 auto;
 color: #eae6e1;
 position: fixed;
 font-family: Palatino Linotype, Palatino, Book Antiqua, Georgia, serif;
 font-style: italic;
 }
	#header-wrapper .content {
	 text-align: left;
	 width: 920px;
	 padding: 10px;
	 margin: 0 auto 20px;
	 background: transparent url(../img/site/bg-nav.png) bottom center no-repeat;
	 }
		#header-wrapper h3 {
		 color: #eae6e1;
		 }
		#header-wrapper p {
		 margin: 0;
		 } 
		#header-wrapper p#nav {
		 width: 460px;
		 }
		#header-wrapper p#hello {
		 text-align: right;
		 float: right;
		 width: 300px;
		 }
			#header-wrapper p#hello a {
			 padding: 0 17px 0 0;
			 background-image: url(../img/site/icon-down_arrow.png);
			 background-repeat: no-repeat;
			 background-position: right 4px;
			 }
				#header-wrapper p#hello a:hover {
				 background-position: right -9px;
				 }
#header-wrapper .emphasis {
 color: #eae6e1;
 margin: 0 0 0 5px;
 }
	a:hover .emphasis{
	 color: #54c20a;
	 }
/* 
============================================================================================
.7	Structure	>	Major Module	> 	Header	>	Contact Pane
============================================================================================
*/	

#contact-wrapper {
 width: 100%;
 background: transparent url(../img/site/hr-white.jpg) bottom center repeat-x;
 font: 12px 'Trebuchet MS', Helvetica, Arial, sans-serif;
 }
#contact-wrapper .content {
 clear: both;
 width: 920px;
 padding: 0 0 40px;
 margin: 0 auto 0;
 background-image: none;
 }
	#contact-wrapper .emphasis {
	 color: #fff;
	 }
		#contact-wrapper .col_3x {
		 margin: 0 170px 0 320px;
		 }
			#contact_form {
			 background: transparent url(../img/site/bg-form.png) center top no-repeat;
			 padding: 11px 0 0 0;
			 }
			#contact_form_bottom {
			 background: transparent url(../img/site/bg-form_bottom.png) center bottom no-repeat;
			 height: 11px;
			 }
		#contact-wrapper .col_1x {
		 float: right;
		 width: 150px;
		 }
			#contact-wrapper .col_1x ul {
			 width: 150px;
			 }
		#contact-wrapper .col_2x {
		 float: left;
		 width: 300px;
		 }
	#contact-wrapper p.big {
	 font-size: 18px;
	 padding: 0 0 24px;
	 background: transparent url(../img/site/hr-double_darkbg.gif) bottom center repeat-x;
	 margin: 0;
	 }
	p#close {
	 font-family: Palatino Linotype, Palatino, Book Antiqua, Georgia, serif;
	 font-style: italic;
	 width: 100%;
	 text-align: right;
	 padding: 0 0 24px;
	 background: transparent url(../img/site/hr-double_darkbg.gif) bottom center repeat-x;
	 margin: 0 0 20px 0;
	 }
	p#close a {
	 display: block;
	 width: 230px;
	 padding: 0 20px 0 0;
	 background: transparent url(../img/site/icon-sprites.png) -5167px center no-repeat;
	 margin: 0 0 0 670px;
	 }
		p#close a:hover {background-position: -5467px center;}
	
	#contact_social_media h3 {
	 text-align: left;
	 }
	#contact_info h3 {
	 clear: both;
	 padding-top: 20px;
	 margin-top: 0;
	 }
/* 
============================================================================================
.8	Structure	>	Major Module	> 	Header	>	Contact Pane	>	List Icons
============================================================================================
*/	

ul.contact_list {
 display: inline;
 }
ul.contact_list li {
 float: left;
 width: 150px;
 margin: 0;
 border-bottom: 0;
 }
ul.contact_list li a {
 display: block; 
 width: 150px;
 height: 32px;
 }
		a#contact_email {background: transparent url(../img/site/icon-contact.png) -150px 0 no-repeat;}
			a:hover#contact_email{background-position: -150px -32px;}
		a#contact_phone {background: transparent url(../img/site/icon-contact.png) 0 0 no-repeat;}
			a:hover#contact_phone{background-position: 0 -32px;}
		a#resume_doc {background: transparent url(../img/site/icon-contact.png) -150px -64px no-repeat;}
			a:hover#resume_doc {background-position: -150px -96px;}
		a#resume_pdf {background: transparent url(../img/site/icon-contact.png) 0 -64px no-repeat;}
			a:hover#resume_pdf{background-position: 0 -96px;}

ul.icons li {
 border-bottom: 1px solid #7a736e;
 }
ul.icons li a {
padding: 2px 0 2px 20px;
background: transparent url(../img/site/icon-sprites.png) 0 center no-repeat;
margin: 0 0 0 5px;
}
	ul.icons li a:hover {
	background-position: -300px center;
	}
		a#icon-vcard {background-position: 0 center;}
			a:hover#icon-vcard {background-position: -300px center;}
		a#icon-facebook{background-position: -1800px center;}
			a:hover#icon-facebook {background-position: -2100px center;}
		a#icon-linkedin {background-position: -2400px center;}
			a:hover#icon-linkedin{background-position: -2700px center;}
		a#icon-twitter{background-position: -3000px center;}
			a:hover#icon-twitter {background-position: -3300px center;}
		a#icon-flickr{background-position: -3600px center;}
			a:hover#icon-flickr {background-position: -3900px center;}
		a#icon-delicious {background-position: -4200px center;}
			a:hover#icon-delicious{background-position: -4500px center;}
		a#icon-lastfm{background-position: -4800px center;}
			a:hover#icon-lastfm {background-position: -5100px center;}
 
/* 
============================================================================================
.9	Structure	>	Major Module	> 	Masthead
============================================================================================
*/	

#masthead-wrapper{
 text-align: center;
 width: 100%;
 background: #4d4945 url(../img/site/bg-header.jpg) top center repeat;
 margin: 0 auto;
 color: #eae6e1;
 }
	#masthead-wrapper  .content{
	 text-align: left;
	 width: 940px;
	 margin: 0 auto;
	 padding: 60px 0 0 0;
	 }
	 	#masthead-wrapper h1 {
		 text-align: left;
		 display: block;
		 width: 300px;
		 height: 74px;
		 margin: 0 auto 20px;
		 }
			#masthead-wrapper h1 a {
			 width: 300px;
			 height: 74px;
			 display: block;
			 text-align: left;
			 background: transparent url(../img/site/logo.png) center top no-repeat;
			 }
				#masthead-wrapper h1 a:hover {
				 background-position: center -101px;
				 }

			p#twitter-intro {
			 float: left;
			 width: 200px;
			 }
			p#twitter-name {
			 float: right;
			 width: 163px;
			 padding: 0 37px 0 0;
			 text-align: right;
			 background: transparent url(../img/site/icon-twitter.png) center right no-repeat;
			 }
			p#tweet {
			 width: 520px;
			 padding: 0 200px;
			 text-align: center;
			 font: 14px Palatino Linotype, Palatino, Book Antiqua, Georgia, serif;
			 }
		#masthead-wrapper .headline {
		 text-align: justify;
		 }
p.left {
 text-align: left;
 margin: 0 450px 0 0;
 }
p.right {
 float: right;
 text-align: right;
 width: 430px;
 }
 
/* 
============================================================================================
.10	Structure	>	Major Module	> 	Portfolio
============================================================================================
*/

#portfolio-wrapper{
 clear: both;
 text-align: center;
 width: 100%;
 background: transparent url(../img/site/bg-body_top.png) top center repeat-x;
 }
	#portfolio {
	 width: 100%;
	 height: 44px;
	 display: block;
	 }
	#portfolio-wrapper.content {
	 padding-top: 0;
	 }
	 
 .project-wrapper {
 float: left;
 width: 280px;
 padding: 10px;
 margin: 0 0 10px 0;
 color: #524e4a;
 background: transparent;
 }
		 
	.project-wrapper h3 {
	 text-align: center;
	 margin: 10px 0 0 0;
	 }
	 
/* 
============================================================================================
.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: 44px 0 0 0;
	 background: transparent url(../img/site/hr-double_lightbg.gif) top center repeat-x;
	 margin: 20px auto 0;
	 }
		.subsection {
		 clear: both;
		 padding: 0 0 10px 0;
		 border-bottom: 1px solid #bdbbb9;
		 margin: 0 0 20px 0;
		 }
			#services-wrapper .last {border-bottom: 0; padding: 0; margin: 0;}
	#services-wrapper h2 {
	 text-align: left;
	 }
 
/* 
============================================================================================
.12	Structure	>	Major Module	> 	About
============================================================================================
*/
#about-wrapper {
 clear: both;
 text-align: center;
 width: 100%;
 padding: 0 0 24px;
 margin: 0 auto;
 background: transparent url(../img/site/bg-body_bottom.png) center bottom repeat-x;
 }
	#about-wrapper .content {
	 width: 880px;
	 padding: 44px 0 0 0;
	 background: transparent url(../img/site/hr-double_lightbg.gif) top center repeat-x;
	 margin: 20px auto 0;
	 }
	#about-wrapper .col_3x {
	 float: left;
	 }
#about-wrapper #personal {
 float: left;
 width: 430px;
 height: 270px;
 margin: 0 0 13px 20px;
 text-align: center;
 background: transparent url(../img/site/pic-about.jpg) center center no-repeat;
 }
	#about-wrapper #personal p{
	 width: 240px;
	 padding: 20px 20px 20px 170px;
	 text-align: left;
	 }
 
/* 
============================================================================================
.13	Structure	>	Major Module	> 	Footer
============================================================================================
*/

#footer-wrapper {
 clear: both;
 text-align: center;
 width: 100%;
 background: #4d4945 url(../img/site/bg-footer.jpg) bottom center repeat-x;
 margin: 0 auto;
 color: #eae6e1;
 }
	#footer {
	 text-align: left;
	 width: 940px;
	 margin: 0 auto;
	 padding: 0 0 20px 0;
	 background: transparent;
	 }
			#footer .headline {
			 padding: 12px 30px 20px;
			 background: transparent url(../img/site/bg-headline_footer.png) bottom center no-repeat;
			 }
				#footer .headline p {
				 padding: 0;
				 }
		#footer-wrapper .sub {
		 padding: 5px 10px 10px;
		 background: transparent url(../img/site/bg-copyrights.png) bottom center no-repeat;
		 }
			#footer-wrapper img {
			 margin: 0 auto 20px ;
			 }
	#footer-wrapper p {
	 text-align: center;
	 }

/* 
============================================================================================
.14	Structure	>	Major Module	> 	Portfolio	>	Lightbox
============================================================================================
*/	

#jquery-overlay {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 90;
 width: 100%;
 height: 500px;
 }
#jquery-lightbox {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 100;
 text-align: center;
 line-height: 0;
 }
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
 position: relative;
 background: transparent url(../img/site/bg-lightbox.png) center center no-repeat;
 width: 940px;
 height: 611px;
 margin: 0 auto;
 }
#lightbox-container-image { 
 width: 880px;
 height: 550px;
 padding: 30px; 
 }

#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/site/icon-lightbox_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 Verdana, Helvetica, 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;	
 }
 
 /* 
============================================================================================
.15	Structure	>	IE 6 Warning
============================================================================================
*/	
 
 #ie6 {
 text-align: center;
 width: 100%;
 height: 100px;
 margin: 0 auto;
 background: #142d02 url(../img/site/bg-ie6.jpg) top center repeat-x;
 }

	#ie6 .content {
	 color: #fff;
	 width: 920px;
	 padding: 0;
	 background: transparent;
	 margin: 20px auto 0;
	 }
  
	#ie6 a{
	 color: #54c20a;
	 }