/*
Theme Name: Seth Etter Design
Theme URI: http://www.sethetter.com
Description: Theme for Seth Etter Freelance Design.
Version: 2.0
Author: Seth Etter
Author URI: http://www.sethetter.com
Tags: personal, portfolio, clean, minimal
.
Content copyrighted
.
*/

@import url('css/reset.css');
@import url('css/text.css');

/* fonts */

@font-face {
	font-family: 'IMFellEnglish';
	src: url('css/imfellenglish-webfont.eot');
	src: local('?'), url('css/imfellenglish-webfont.woff') format('woff'), url('css/imfellenglish-webfont.ttf') format('truetype'), url('css/imfellenglish-webfont.svg#webfontssF2VMWf') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* text styles */

h1, h2, h3, h4 { font-family:'IMFellEnglish',georgia,"times new roman"; font-weight:125; color:#513f2c; text-shadow:1px 1px 1px #ddd; }
p { font-size:14px; line-height:24px; color:#333; }

a:link, a:visited { color:#7a8342; text-decoration:none; }
a:hover, a:active { color:#96a058; text-decoration:none; }

form p { position:relative; }
.over { position:absolute; top:10px; left:10px; display:none; } 

input:focus, textarea:focus{
	outline:0;
}

/* universal styles */

body { background:#f1e9e1 url(img/bgslice.png) repeat-x top center; }

#wrap { width:960px; margin:0 auto;}

#header { height:99px; padding:0 30px; }
	#header h1 { float:left; width:200px; margin:28px 0 0 0; padding:0; text-indent:-9999px; }
	#header h1 a:link, #header h1 a:visited { width:200px; height:53px; display:block; margin:0; padding:0; background:url(img/logo.png) no-repeat top center; }
	#header h1 a:hover, #header h1 a:active { margin-left:-2px; }
	
#nav { font-family:'IMFellEnglish',georgia,"times new roman"; font-size:20px; color:#fff; float:right; margin:57px 0 0 0; padding:0; }
	#nav ul { margin:0; padding:0; text-transform:lowercase; }
	#nav ul li { display:inline; margin:0 40px; padding:0; }
	/* hide home link in nav */ #nav ul li:first-child { display:none; }
	#nav ul li a:link, #nav ul li a:visited { color:#f0f0f0; text-decoration:none; }
	#nav ul li a:hover, #nav ul li a:active { color:#7a8342; text-decoration:none; }
	
#content, #about-content, #blog-content, #single-content, #portfolio-content, #contact-content { border:1px solid #b5b6a1; border-top:none; padding:30px; margin:0; }
	#content { background:#fff url("img/homebg.png") top center no-repeat; }
	#about-content { background:#fff url("img/aboutbg.png") top center no-repeat; }
	#portfolio-content { background:#fff url("img/portbg.png") top center no-repeat; }
	#contact-content { background:#fff url("img/fullarrow.png") top left no-repeat; }

/* home-page */

#top h2 { height:130px; font-family:'IMFellEnglish',georgia,"times new roman"; color:#513f2c; font-weight:100; font-size:53px; width:900px; padding:0; margin:0; line-height:38px; background:url('img/pencil.png') no-repeat top right; }
	#top h2 span { font-size:23px; margin:0 0 0 8px; padding:0; }
	#top h4 { font-size:22px; line-height:34px; margin:5px 0 70px 115px; font-weight:100; }
	#top p { font-weight:100; padding-left:30px; color:#333; margin-bottom:0; margin-top:0;  }
	
#front-port-item-info { width:565px; float:right; }
	.front-port-item img { padding:0; margin:0 0 30px 0; }
	.front-port-item a.img { height:200px; width:300px; float:left; border:1px solid #d0cfb7; padding:5px; background:#d0cfb7; margin:0 0 30px 20px; }
	.front-port-item a.img:hover { background:#e3e3e3; }
	#front-port-item-info h3 { font-size:32px; margin:0 0 0 20px; }
		#front-port-item-info h3 a:link, #front-port-item-info h3 a:visited { color:#513f2c; }
		#front-port-item-info h3 a:hover, #front-port-item-info h3 a:active { color:#a17d55; }
	#front-excerpt p { margin-bottom:20px; margin-left:20px; }
	.front-port-meta { font-style:italic; font-size:16px; margin:8px 0; padding:0; color:#aaa; margin-left:20px; }
	
p.viewportfolio a:link, p.viewportfolio a:visited { background:url("img/btnslice.png") repeat-x; border:1px solid #dddf9b; color:#fff; font-size:14px; padding:8px 15px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; margin:0 0 0 20px; }
p.viewportfolio a:hover, p.viewportfolio a:active { background:url("img/btnslice.png") repeat-x; background-position:0px -32px; }

#portfolio-shot { width:264px; float:right; padding:40px 15px 0 15px; margin:45px 5px 10px 0; }
	#portfolio-shot h2 { text-align:center; padding-top:5px; color:#513f2c; }

#blog { height:320px; width:520px; margin:0; padding:0; overflow:hidden; }
	#blog h3 { font-size:31px; margin-top:0; }
	#blog ul { margin:25px 0 0 0; } 
	#blog ul li { padding:10px 10px 10px 35px; margin-left:0; font-size:14px; border-top:1px solid #e9e9e9; list-style:none; background:url("img/listimg.png") no-repeat left center; }
	#blog ul li:last-child { border-bottom:1px solid #e9e9e9; }
		
/* about page */

#about-top { background:url('img/globe.png') 0px 70px no-repeat; }
	#about-top h2 span.top { font-size:47px; margin:0 0 0 30px; padding:0; }
	#about-top span.bottom { font-size:27px; margin:0 0 0 310px; padding:0; }
	#about-top p { width:580px; margin:50px 0 20px 300px; }
	
#services { margin:60px 0 0; }
	#services p { width:430px; margin-bottom:15px; }
	#services h3 span { display:block; width:380px; font-size:48px; line-height:66px; text-align:center; float:right; margin:0 30px 0 0; }
	#services ul { font-size:16px; margin:0 0 10px 0; padding:0; color:#565656; }
	#services ul li { display:inline-block; list-style:none; background:url("img/listimg.png") no-repeat left center; padding-left:28px; margin:0 10px 14px 0; }

#webdesign h2, #writing h2 { font-size:31px; }	
#webdesign p.first, #writing p.first { padding-top:70px; }

#webdesign { background:url('img/webdesign.jpg') 0px 70px no-repeat; }
	#webdesign h2 { float:left; margin-top:10px; }
	#webdesign p { padding:0 0 10px 430px; }

#writing { background:url('img/writing.jpg') 510px 80px no-repeat; }
	#writing h2 { float:right; margin-top:0; }
	#writing p { width:500px; }
	
h3.about-cta { font-size:28px; text-align:center; padding-top:20px; }

/* portfolio page */

#portfolio-content { background:url(img/fullarrow.png) no-repeat #fff; }

#portfolio-top { height:120px; }
	#portfolio-top h2 { font-size:46px; }
	#portfolio-top p { width:450px; margin:7px 70px 0 0; font-size:13px; }
	
#port-item-info { width:565px; float:right; }
	.port-item img { padding:0; margin:0 0 30px 0; }
	.port-item a.img { height:200px; width:300px; float:left; border:1px solid #d0cfb7; padding:5px; background:#d0cfb7; margin:0 0 30px 0; }
	.port-item a.img:hover { background:#e3e3e3; }
	#port-item-info h3 { font-size:32px; margin:5px 0 5px 0; }
		#port-item-info h3 a:link, #port-item-info h3 a:visited { color:#513f2c; }
		#port-item-info h3 a:hover, #port-item-info h3 a:active { color:#a17d55; }
	#excerpt p { margin-bottom:20px; }
	.port-meta { font-style:italic; font-size:13px; margin:10px 0; padding:0; color:#aaa; }
		.port-meta a:link, .port-meta a:visited { background:url("img/btnslice.png") repeat-x; border:1px solid #dddf9b; color:#fff; padding:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; margin:0; }
		.port-meta a:hover, .port-meta a:active { background:url("img/btnslice.png") repeat-x; background-position:0px -32px; border:1px solid #dddf9b; color:#fff; padding:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; margin:0; }
	.port-hr { margin:70px 0 30px 0; border-color:#cfd0b7; }
	
/* single item */

#single-content { background:#fff; }

#single-header { height:100px; padding:0 0 10px 0; }
	#single-header h3 { font-size:45px; line-height:42px; padding-bottom:5px; }
	
p.backtoport { float:right; height:100px; font-style:italic; margin:30px 40px 0 0; }
	
#the-content { padding:10px 60px 10px 0; }
	#the-content img { margin:0; border:1px solid #ddd; padding:5px; background:#eee; }
	#the-content img:hover { background:#e3e3e3; }
	#the-content p { margin:10px 0 25px; font-size:16px; line-height:28px; }
	#the-content h3 { font-size:24px; margin:15px 0 15px; }
	
#twit-btn { position:fixed; right:20px; top:210px; }

#comments { clear:both; overflow:hidden; list-style:none; padding:0; margin:0; }
  .the_comment { float:right; padding:0 20px; width:550px; border-left:1px solid #ccc; }
  #comment-meta img.avatar { float:left; margin:0 20px 0 0; }
  #comment-meta h4 { margin:0; padding:0; }

.form-allowed-tags, .comment-notes, .required { display:none; }

#add-comment input, #add-comment textarea { font-size:18px; padding:8px; border:2px solid #cfd0b7; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }

#add-comment form p { position:relative; }
#add-comment label  { position:absolute; top:10px; left:12px; font-size:18px; color:#aaa; }

#add-comment #submit { background:url("img/btnslice.png") repeat-x top center; border:1px solid #dddf9b; color:#fff; font-size:14px; padding:8px 20px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
#add-comment #submit:hover { background:url("img/btnslice.png") repeat-x bottom center; }

/* syntax highlighting */

div.syntax-container { padding:0; margin:0 0 35px 0; }
.syntax-container .toolbar { display:none; }

/* blog page */

#blog-content { background:url(img/fullarrow.png) no-repeat #fff; overflow:hidden; }

#blog-top { height:85px; }
	#blog-top h2 { font-size:38px; }

#search { float:right; margin:15px 30px 0 0; height:25px; padding:5px 8px 5px 5px; border:2px solid #cfd0b7; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
	#search #s { border:0; padding:0; color:#aaa; font-size:16px; }
	#search #searchsubmit { background:#fff url('img/search.png') no-repeat 0px -23px; width:18px; height:23px; padding:0; margin:0 2px 2px 0; border:0; }
	#search #searchsubmit:hover { background-position:0px 0px; }
	
#blog-items { float:left; width:565px; border-right:9px solid #cfd0b7; padding-right:30px; margin-top:0px; padding-top:35px; }
	#blog-item { margin:0; padding:0; }
	#blog-item-info h3 { font-size:28px; margin:0; padding-bottom:5px; }
		#blog-item-info h3 a:link, #blog-item-info h3 a:visited { color:#513f2c; }
		#blog-item-info h3 a:hover, #blog-item-info h3 a:active { color:#a17d55; }
	.blog-meta { font-size:14px; line-height:14px; margin:0 0 20px 0; padding:0; color:#aaa; }
		.blog-meta span { font-style:italic; }
	.blog-hr { margin:60px 0; border-color:#cfd0b7; }
	.readmore { margin:0 20px 0 0; float:right; padding:0; font-style:italic; }

/* sidebar */

#sidebar-content { width:270px; margin:35px 0 0 20px; float:right; }
	#sidebar-content h2 { font-size:26px; }
		#sidebar-content h2:first-child { margin-top:30px; }
	#sidebar-content ul { padding:0; margin:0 40px 0 0; list-style:none; }
	#sidebar-content ul li { list-style:none; padding:6px 0; margin:0; border-top:1px solid #cfd0b7; text-transform:uppercase; font-size:15px; }
	#sidebar-content ul li:last-child { border-bottom:1px solid #cfd0b7; }

#subscribe ul { margin:0 0 20px 0; }
	#subscribe ul li { border:0; text-transform:none; font-size:16px; background:url('img/subscribe.png') no-repeat; padding:0 0 0 55px; margin:0 0 20px 0; }
		#subscribe ul li.rss { background-position:0px 0px; height:46px; line-height:46px; }
		#subscribe ul li.email { background-position:0px -46px; height:30px; line-height:30px; }		
	#subscribe ul li:last-child { border:0; margin-bottom:20px; }

/* contact page */

#contact-content { margin:0; overflow:hidden; }

#contact-top { margin:0 0 50px 0; padding:0; }
	#contact-top h2 { font-size:44px; }

#contact-content input, #contact-content textarea { font-size:18px; padding:8px; border:2px solid #cfd0b7; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }

#contact-content form p { position:relative; float:left; margin-right:30px; }
#contact-content label  { position:absolute; top:10px; left:12px; font-size:18px; color:#aaa; }

#comments { clear:both; }

#contactus { background:url("img/btnslice.png") repeat-x top center; border:1px solid #dddf9b; color:#fff; font-size:14px; padding:8px 20px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
#contactus:hover { background:url("img/btnslice.png") repeat-x bottom center; }

.verify { float:left; font-size:18px; margin-right:20px; }
	
/* footer */	

#footer-wrap { background:#454a23 url(img/footerbg.png) repeat-x; overflow:hidden; margin-top:40px; padding-top:70px; clear:both; }
#footer { width:960px; margin:0 auto; padding:0 0 50px 0; }
	#footer h3 { text-align:center; font-size:28px; color:#fff; }
	#footer a:link, #footer a:visited { color:#f2fbb5; }
	#footer a:hover, #footer a:active { color:#d0df6e; }

#footabout { width:440px; float:left; margin-left:10px; }
	#footabout h3 { text-align:left; }
	#footabout img { margin:3px 5px 5px 0; border:2px solid #513f2c; }
	#footabout p { color:#f0f0f0; margin:0; padding:0; }
	
	.social { list-style:none; padding:0; margin:15px 0 0 0; }
	 .social li { height:16px; font-size:15px; line-height:16px; list-style:none; float:left; padding:0 20px 0 22px; margin:0; background:url('img/social.png') no-repeat center left; }
	 .social li.twitter { background-position:0px 0px; }
	   .social li.twitter:hover { background-position:0px -48px; }
	 .social li.flickr { background-position:0px -16px; }
     .social li.flickr:hover { background-position:0px -64px; }
	 .social li.facebook { background-position:0px -32px; }
  	 .social li.facebook:hover { background-position:0px -80px; }			
  	 
#twitter { margin-left:20px; width:260px; float:left; }
  .twtr-widget, .twtr-widget-profile, .twtr-doc, .twtr-tweet-wrap { background:none; padding:0; margin:0; }
  .twtr-hd, .twtr-ft { display:none; }
  .twtr-tweet-text em { padding-top:20px; display:block; }
	#twit-update { padding:15px; height:180px; background:#fff; color:#444; -moz-border-radius:10px; -webkit-border-radius:10px; }
	#twit-update p { float:left; }
	#bird { background: url(img/twitter_bird.png) bottom right no-repeat; width:178px; height:123px; float:right; margin:-85px -30px 0 0; }

#flickr { margin-left:20px; width:190px; float:left; }
	.flickr_badge_image img { float:left; padding:5px; margin:5px; background:#513f2c; -webkit-transition:background 1s; }
	.flickr_badge_image img:hover { float:left; padding:5px; margin:5px; background:#715a42; -webkit-transition:background 1s; }
	
#footer-bottom p { color:#eee; font-size:13px; }
#footer-bottom img { padding:0 0 0 20px; }

/* utility */

.floatright { float:right; }
.floatleft { float:left; }
.clear { clear:both; }