/*
* -------------------------------------------
* Layout.css
*/
body{ color: #111929; font-size: 80%; font-family: Trebuchet, Trebuchet MS, Gill Sans, Geneva, Arial, Helvetica, sans-serif; line-height: 1.2em; background: url('../images/layout/paper_texture.jpg') repeat left top; margin: 0; padding: 0; }

.clear{ clear: both; }

.wrapper{ position: relative; padding: 0; margin: 0 auto 0 auto; width: 750px; }

.header{ padding-left: 20px; padding-right: 20px; width: 710px; background: url('../images/layout/header_bg.jpg') repeat-x bottom left; }
.header p{ font-size: 1.5em; padding-top: 10px; width: 170px; padding-left: 20px; float: left; color: #e3e3e3; }
.header a{ color: #e3e3e3; }

.header ul{ float: right; padding: 10px 0 10px 0; margin: 0; width: 480px; text-align: right; }
.header li{ list-style: none; padding: 0; margin: 0; display: inline; }
.header li a{ font-size: 1.2em; padding: 0 5px 0 5px; border-left: 1px solid #e3e3e3; text-transform: uppercase; }

.header li.first a{ border-left: none; }

.logo{ width: 170px; padding-left: 20px; padding-top: 10px; padding-bottom: 10px; float: left; }
.introduction{ width: 530px; padding-left: 10px; float: left; }
.introduction h1{ margin-top: 20px; margin-bottom: 10px; font-weight: lighter; }
.introduction p{ line-height: 1.5em; }

.content{ clear: both; }
.work{ background: #7e8aa2 url('../images/layout/background1.jpg') repeat-x bottom left; padding-left: 20px; padding-right: 20px; width: 710px; margin: 0; }
.work h1{ margin: 0; font-size: 1.4em; padding-top: 20px; padding-bottom: 20px; }
.work h2{ font-size: 1.2em; padding: 20px 0 10px 10px; margin: 0; font-weight: lighter;	}
.work p{ font-size: 0.9em; padding: 0; padding-left: 10px; padding-right: 10px; line-height: 2em; }
.work h1 span{ padding-left: 10px; font-size: 0.8em; }
.work h1 a{ color: #ff881d;}

.personal{ }

.box{ width: 230px; float: left; margin-left: 10px; color: #fff; }
.box a{ color: #fff; }
.box a:hover{ text-decoration: none;}
.box a:hover h2, .box a:hover p{ text-decoration: none; background-color: #8f9db8; }

.professional.box a:hover h2, .professional.box a:hover p{ text-decoration: none; background-color: #465573; }
.text{ padding: 20px; color: #ffffff;}
.text h2{ color: #ff881d; }

.first{ margin-left: 0; }
.box img{ width: 210px; border: 10px solid #263248; margin: 0; }

.professional{ background: url('../images/layout/background2.jpg') repeat-x bottom left; margin-bottom: 20px;}
.professional h1{ color: #ff881d;}
.professional h1 a{ color: #fff;}

.contact{ padding-left: 20px; width: 470px; float: left; }
.contact-col1, .contact-col2{ width: 230px; float: left; }
.contact-col2{ padding-left: 10px; }

form{}
.contact-col2 fieldset{ border: none; padding: 0; margin: 0; }
.contact-col2 legend{ display: none;}
.contact-col2 ol{ padding: 0; margin: 0; }
.contact-col2 ol li{ padding: 0; margin: 0; list-style-type: none; }

label{ font-weight: bolder; display: block; padding-bottom: 5px; }
								
.textinput, .textarea{ border: 1px solid #7e8aa2; background-color: #e3e3e3; height: 25px; width: 220px; font-size: 1.3em; padding-left: 5px; margin-bottom: 10px; }
.textarea{ height: 60px; }

.social{ width: 230px; padding-left: 10px; float: left; }
.social a{ color: #111929;}
.flickr, .twitter, .facebook{ background: url('../images/layout/flickr.png') no-repeat 10px center; padding-top: 10px; padding-bottom: 10px; padding-left: 60px; }
.twitter{ background: url('../images/layout/twitter.png') no-repeat 10px center; }
.facebook{ background: url('../images/layout/facebook.png') no-repeat 10px center; }
				
.footer{ width: 710px; background: url('../images/layout/footer_bg.jpg') repeat-x left top; margin: 10px 0 0 0; padding: 20px 20px 50px 20px; color: #fff; text-align: center; font-size: 0.9em;}


/*
Portfolio example layout
*/
.portfolio-example{ padding-top: 20px; }
.images{ float: left; padding-left: 20px; width: 470px;}
.images img{ border: 10px solid #263248; margin-bottom: 10px;}
.description{ width: 220px; float: left; padding-left: 20px;}
.description h1{ padding: 0 0 20px 0; margin: 0;}
.description a{ color: #ff881d;}
/*
End of portfolio example layout
*/

.back-link{ padding: 10px 20px 10px 20px; font-size: 1.2em; }
.back-link a{ color: #ff881d; }