* { padding: 0; margin: 0; }
html, body { margin: 0; padding: 0; width: 100%; height: auto; min-height: 100%; padding: 0; color: #684529; font: 12px/1.4em Verdana, sans-serif; background:  #fff; }
a { color: #D17E24; text-decoration: none; font-weight: bold;}
a:hover { color: #5C92AD; text-decoration: underline; }
p { font: 11px/1.4em Verdana, sans-serif; color: #684529; }

a.back { color: #684529; text-decoration: none; font-weight: bold; }
a.back:hover { color: #5C92AD; }

#smLogo { position: absolute; float: right; right: 0; height: 40px; width: 30px; z-index: 2; }
#main {position: fixed;  margin: 0; padding: 0; width: 100%; height: auto; min-height: 100%; padding: 0; color: #000; font: 12px/1.4em Verdana, sans-serif; background:  #fff url('../images/nav_bg_repeat.png') repeat-x; }
#container { position: relative; width: 980px; height: 100%; min-height: 100%; background: #fff;  }
#logo { position: fixed; top: 50px; height: 200px; left: 2px; z-index: 4; }
.clearer { position: relative; clear: both; height: 1px; } 

#navigation { position: fixed; width: 100%; height: 60px; background: url('../images/nav_bg.png') no-repeat; z-index: 3; }
	ul { }
	.nav li { position: relative; float: left; padding-right: 11px; list-style-type: none; }
	.nav { position: relative; float: left; left: 10px; top: 5px; }
	a.work { position: relative; background: url('../images/nav_controls.png') no-repeat 0 -52px; display: block; width: 76px; height: 32px; }
	a.services { position: relative; background: url('../images/nav_controls.png') no-repeat -86px -52px; display: block; width: 80px; height: 32px; }
	a.resume { position: relative; background: url('../images/nav_controls.png') no-repeat -176px -52px; display: block; width: 90px; height: 32px; }
	a.contact { position: relative; background: url('../images/nav_controls.png') no-repeat -278px -52px; display: block; width: 96px; height: 32px; }
	a.work:hover  { position: relative; background: url('../images/nav_controls.png') no-repeat 0 0; }
	a.services:hover { position: relative; background: url('../images/nav_controls.png') no-repeat -86px 0; }
	a.resume:hover { position: relative; background: url('../images/nav_controls.png') no-repeat -176px 0; }
	a.contact:hover { position: relative; background: url('../images/nav_controls.png') no-repeat -278px 0; }

#sidebar { position: fixed; width: 408px; height: 100%; min-height: 1300px; background: #d2dde3; top: 0; padding-top: 200px; z-index: 1; background:  #D1DBE0 url('../images/sidebar_bg.jpg') no-repeat 0 0px; }
	#blog { position: relative; left: 15px; padding-top: 100px; margin-bottom: 5px; }
	#blog-content { position: relative;  overflow: hidden; height: 120px; width: 360px; }
	#blog h2 { position: relative; background: url('../images/blog_header.png') no-repeat 0 0; display: block; width: 326px; height: 49px; padding-bottom: 10px; }
	#blog h2 span, #social h2 span { display: none; }
	
	#social { position: relative; left: 15px; width: 400px; height: 45px; margin-bottom: 15px; }
	#social2 { position: absolute; left: 15px; width: 125px; height: 40px; margin-bottom: 15px; }
	#social3 { position: absolute; left: 123px; width: 125px; height: 40px; margin-bottom: 15px;}
	#social4 { position: absolute; left: 246px; width: 125px; height: 40px; margin-bottom: 15px;}
	#social h2 { position: relative; background: url('../images/social_header.png') no-repeat 0 0; display: block; width: 326px; height: 48px; padding-bottom: 15px; }
	ul { list-style-type: none; }

#content { position: relative; float: right; display: block; width: 550px; top: 55px; right: 0px; padding-bottom: 40px; z-index: 1; }
	.enlarged { border: 3px solid #684529; } 

#mywork h2 { position: relative; background: url('../images/work_header.jpg') no-repeat 0 0; display: block; width: 498px; height: 58px; padding: 5px 0; }
#services h2 { position: relative; background: url('../images/services_header.jpg') no-repeat 0 0; display: block; width: 498px; height: 58px; padding: 5px 0; }
#services h4 { position: relative; background: url('../images/services_header1.jpg') no-repeat 0 0; display: block; width: 498px; height: 58px; padding: 5px 0; }
#resume h2 { position: relative; background: url('../images/resume_header.jpg') no-repeat 0 0; display: block; width: 498px; height: 58px; padding: 5px 0; }
#contactme h2 { position: relative; background: url('../images/contact_header.jpg') no-repeat 0 0; display: block; width: 498px; height: 58px; padding: 5px 0; }
#thanks h2 { position: relative; background: url('../images/thankyou_header.jpg') no-repeat 0 0; display: block; width: 250px; height: 35px; padding: 10px 0; }
#mywork h2 span, #services h2 span, #services h4 span, #resume h2 span, #contactme h2 span, #contactme h4 span, #thanks h2 span { display: none; }

.mywork { position: relative; float: right; top: 2px; left: -1px; }
a.mywork { position: relative; display: block; width: 66px; height: 20px; background: url('../images/details_button.jpg') no-repeat 0 0px; }
a.mywork:hover { position: relative; background: url('../images/details_button.jpg') no-repeat -67px 0px; }
a.mywork span { display: none; }

#work1, #work2, #work3 { display: block; margin-bottom: 20px; z-index: 10; }
#work4 { display: block; margin-bottom: 20px; }
#work1 h4 { position: relative; background: url('../images/clients/interactive_header.jpg') no-repeat 0 0; display: block; width: 350px; height: 30px; margin-top: 10px; }
#work2 h4 { position: relative; background: url('../images/clients/print_header.jpg') no-repeat 0 0; display: block; width: 350px; height: 30px; margin-top: 10px; }
#work3 h4 { position: relative; background: url('../images/clients/project_header.jpg') no-repeat 0 0; display: block; width: 350px; height: 30px; margin-top: 10px; }
#work1 h4 span, #work2 h4 span, #work3 h4 span, #work4 h4 span { display: none; }

.section { position: relative; width: 505px; display: block; }


.myresume { position: relative; float: right; margin-left: 10px; display: block;  }
a.myresume { position: relative; background: url('../images/resume_button.jpg') no-repeat 0px 0px; display: block; width: 140px; height: 126px; }
a.myresume:hover { position: relative; background: url('../images/resume_button.jpg') no-repeat -137px 0px; }
a.myresume span { display: none; }

a.emailme { position: relative; background: url('../images/emailme.jpg') no-repeat -5px 0px; display: block; width: 230px; height: 50px; }
a.emailme:hover { position: relative; background: url('../images/emailme.jpg') no-repeat -245px 0px; }
a.emailme span { display: none; }

#contactme { position: relative; display: block; height: 800px; }
#contactme2 { position: absolute; left: 275px; margin-top: 25px; }

#formItem { position: absolute; float: right; margin-left: 0px; top: 110px; }
input { color: #684529; background-color: #D1DBE0; border: none; padding: 2px 0;}
.inputArea span { color: #5C92AD; font-weight: bold; }
textarea { color: #684529; background-color: #D1DBE0; width: 226px; height: 75px; border: none;  }
.inputTextFeild { position: relative; width: 226px; margin: 0 auto; text-align: left; }
#submitReset { position: relative; float: left; margin: 0 auto; text-align: right; top: 10px; right: 10px; }

.emailBtn { position: relative; background: url('../images/submit_button.jpg') no-repeat 0px 0px; display: block; width: 101px; height: 40px; cursor: pointer; }
.emailBtn:hover { position: relative; background: url('../images/submit_button.jpg') no-repeat 0px -48px; }
.emailBtn span { display: none; }