/*
Theme Name: Starkers
Theme URI: http://elliotjaystocks.com
Description: The totally nude Wordpress theme. Phwoar! (Based on the famous <a href="http://binarybonsai.com/kubrick/">Kubrick</a> by <a href="http://binarybonsai.com/">Michael Heilemann</a>)
Version: 2.8
Author: Elliot Jay Stocks
Author URI: http://elliotjaystocks.com
Tags: starkers, naked, clean, basic
*/



/* RESET */
/* ----------------------------------------- */

/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}

/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight:bold }
em { font-style:italic }
a img { border:none } /* Gets rid of IE's blue borders */

/* LAYOUT */
/* ----------------------------------------- */

/* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. Edit as you see fit. More info: http://codex.wordpress.org/CSS */
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }

/* You might find the following useful */
/* div, ul, li { position:relative } This will save you having to declare each div / ul / li's position as 'relative' and allows you to absolutely position elements inside them */
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */
li#theme-switcher { background:#fff; border:10px solid red; padding:20px; position:fixed; top:0; right:0 } /* Use this if you have the Theme Switcher Reloaded plugin (http://themebot.com/webmaster-tools/1-wordpress-theme-switcher-reloaded) installed and want to make it nice and obvious */

h1, h2, h3, h5, h5, h6 { font-weight:bold } /* This helps to identify headings at the initial build stage, so I thought it'd be useful to have it */
.alert { background:red; color:white } /* 'alert' has a basic style, since it's useful to have it standing out for testing purposes.

/*General*/

body { 
	font-family: "Helvetica Neue",Helvetica,Arial sans-serif;
	background-color: rgb(237,234,225);
}
a {
	text-decoration:none;
	color:rgb(52,138,169);
	font-weight:bold;
}	

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

.reference {
	position:relative;
}	

.group:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }

blockquote {
	font-family:Garamond, "Hoefler Text", "Times New Roman", Times, serif;
	border-left:1px rgb(109,102,94) solid;
	padding-left:10px;
}

p.source {
	font-size:.8em;
}

.navigation {
	text-align:center;
}
/*Header*/

#header {
	background-color:rgb(57,52,52);
	border-bottom:4px rgb(189,134,0) solid;
	height:100px;
}

#header h1 {
	position:absolute;
	left:10px;
	top:20px;
}
#header h1 a {
	color:rgb(255,255,255);
	font-size:3em;
	text-transform:lowercase;
	letter-spacing:-0.05em;
}

p.subtitle {
	font-size:.7em;
	color:rgb(255,255,255);
	text-transform:uppercase;
	position:absolute;
	left:10px;
	top:70px;
	font-weight:normal;
	letter-spacing:0.05em;
}

#header ul{
	position:absolute;
	right:10px;
	top:60px;
}

#header ul li {
	display:inline;
	margin-left:50px;
}

#header ul li a {
	color:rgb(255,255,255);
	text-transform:lowercase;
	font-weight:bold;
}

#header ul li a:hover, #header ul li.current_page_item a{
	color:rgb(174,88,66);
}

/*Featured Work div*/

#featured {
	background-color:rgb(255,255,255);
	border-bottom:2px rgb(216,216,215) solid;
	padding-bottom:20px;
}

.blurb p{
	color:rgb(109,102,94);
	font-size:1.1em;
	line-height:1.4em;
	padding:15px 0;
}

.blurb > p:first-child {
	font-family:Futura, "Century Gothic", "Apple Gothic", sans-serif;
	font-size:1.1em;
	margin-top:40px;
}

/*Latest Posts homepage list*/

.latest_posts {
	padding:20px 0;
}

.latest_posts h2 {
	color:rgb(138,129,126);
	text-transform:lowercase;
	font-size:2.2em;
	letter-spacing:-0.05em;
	padding:10px;
}	

.latest_posts li {
	padding:15px 20px;
	border-top:1px rgb(204,204,204) solid;
	margin:0 10px;
	}
.latest_posts li:hover {
	background:rgb(243,241,241);
}	
.latest_posts li.first {
	border-top:none;
}
.latest_posts li.last {
	border-bottom:none;
}	
.latest_posts li span.pdate {
	color:rgb(138,129,126);
	display:block;
	width:20%;
	float:left;
	font-size:.85em;
	padding-top:5px;
	text-transform:uppercase;
}
.latest_posts li a{
	display:block;
	float:left;
	width:60%;
	color:rgba(55,146,179,1);
	text-decoration:none;
	font-size:1.2em;
}

.latest_posts li span.note {
	display:block;
	float:right;
	width:30px;
	height:38px;
	background:url('images/article_type.png') top left no-repeat;
}

.latest_posts li span.link {
	display:block;
	float:right;
	width:30px;
	height:40px;
	background:url('images/article_type.png') 0 -162px no-repeat;
}


.latest_posts li span.video {
	display:block;
	float:right;
	width:30px;
	height:40px;
	background:url('images/article_type.png') 0 -300px no-repeat;
}
/*Footer*/

ul.footer {
	margin-top:20px;
}

ul.footer > li {
	float:left;
	width:220px;
	padding:0 10px;
}

ul.footer h3 {
	color:rgb(0,0,0);
	font-size:1.8em;
	letter-spacing:-0.04em;
	text-transform:lowercase;
	background-color:rgb(216,216,215);
	padding:0 5px;
	text-shadow: 1px 1px 1px #fff;
	margin-bottom:10px;
}

#twitter_update_list {
	font-size:.8em;
}

#twitter_update_list li {
	padding:5px;
	margin:5px 0;
	background : rgba(138, 129, 126, .3);
	-moz-border-radius:6px; 
}
p.copy {
	background-color:rgb(0,0,0);
	padding:5px;
	text-align:center;
	color:rgb(255,255,255);
	font-size:.8em;
	margin-top:10px;
}

ul.services h4 {
	font-weight:bold;
}

/*Searchform*/

#searchform {
	width:620px;
	margin:25px auto;
	position:relative;
}
#searchform label {
	display:none;
}

#searchform input[type="text"] {
	width:600px;
	border:6px rgb(216,216,215) solid;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	padding:10px 5px;
	font-size:1em;
}

#searchform input[type="submit"] {
	position:absolute;
	top:6px;
	right:4px;
	background-color:rgb(174,88,66);
	border:none;
	padding:7px 5px;
	font-size:1.2em;
	font-weight:bold;
	color:rgb(198,103,77);
	text-transform:lowercase;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

/*Columns*/

.half-column {
	width:460px;
	padding:0 10px;
	float:left;
}

.main-content {
	width:790px;
	padding:0 10px 0 0;
	float:left;
}

.sidebar {
	width:140px;
	padding:0 10px;
	float:right;
}

.sidebar h3 {
	color:rgb(138,129,126);
	text-transform:lowercase;
	font-size:1.5em;
	letter-spacing:-0.05em;
}

/*entry*/

.entry {
	margin-bottom:40px;
}
.entry-info {
	width:140px;
	height:65px;
	min-height:65px;
	padding:0 20px 0 10px;
	float:left;
	background:transparent url(images/entry_info_bg.gif) top right no-repeat;
	font-size:.8em;
}

p.date {
	text-transform:uppercase;
	letter-spacing:-0.05 em;
	font-size:.95em;
	font-family:Garamond, "Hoefler Text", "Times New Roman", Times, serif;
}

p.category a {
	font-size:.9em;
}

p.category span {
	font-family:Garamond, "Hoefler Text", "Times New Roman", Times, serif;
	font-style:italic;
	font-size:1.3em;
}

.entry-content {
	width:460px;
	padding:10px 80px;
	float:right;
	background-color:rgb(255,255,255);
	color:rgb(109,102,94);
}
.entry-content p {
	padding:8px 0;
	line-height:135%;
}
.entry-content img {
	max-width:460px;
	height:auto;
}

.entry-content h2 {
	font-size:1.55em;
	text-transform:uppercase;
	letter-spacing:-0.05em;
	color:rgb(174,88,66);
	padding-bottom:5px;
	margin-bottom:15px;
	border-bottom:1px #ccc dashed;
}
.singles {
	margin-top:40px;
}

p.follow {
	background:rgb(204,204,204);
	color:rgb(0,0,0);
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	margin-top:40px;
	text-align:center;
}
p.meta {
	font-family:Garamond, "Hoefler Text", "Times New Roman", Times, serif;
	font-style:italic;
	margin-bottom:20px;
}

.entry .link {
	background:rgb(255,255,255) url('images/link.png') 20px 15px no-repeat;
}

.entry .note {
	background:rgb(255,255,255) url('images/note.png') 20px 15px no-repeat;
}

.entry .video {
	background:rgb(255,255,255) url('images/video.png') 20px 15px no-repeat;
}

/*Comments*/

h3#comments, h3#your-comment{
	text-transform:uppercase;
	padding-bottom:5px;
	border-bottom:1px rgb(204,204,204) solid;
	margin-bottom:10px;
}

h3#your-comment {
	margin-bottom:0 px;
	margin-top:40px;
}

.comment-body{
	border:1px rgb(204,204,204) solid;
	margin-bottom:10px;
}
.comment-body p{
	padding:5px;
}
.comment-body .vcard img.avatar {
	float:left;
	padding:5px;
}


/*Portfolio*/

.portfolio {
	padding:40px 0;
	border-top:1px rgb(225,225,225) solid;
	border-bottom:1px rgb(252,252,252) solid;
	
}

.portfolio h2{
	font-size:1.5em;
	text-transform:uppercase;
	color:rgb(174,88,66);
	letter-spacing:-0.04em;
	padding-bottom:20px;
	border-bottom:1px rgb(204,204,204) dotted;
}

.portfolio h3 {
	float:left;
	font-size:1.3em;
	text-transform:lowercase;
	color:rgb(138,129,126);
	text-shadow: rgb(255,255,255) 1px 1px 1px;
}

.portfolio p {
	padding:5px 10px 10px 80px;
	color:rgb(109,102,94);
	font-size:.9em;
	line-height:1.4em;
}

.first {
	border-top:none;
}

.last {
	border-bottom:none;
}

/*Search*/

.search-result {
	padding:10px;
	margin-bottom:15px;
	border:1px #ccc solid;
}

h2.search-results {
	color:rgb(138,129,126);
	text-transform:lowercase;
	font-size:2.2em;
	letter-spacing:-0.05em;
	padding:10px;
}

/*Contact form*/
#contactform {width:460px;}

#contactform form p {
	margin-bottom: 0px;
	text-align: right;
	line-height: 35px;
	clear:both;
}

#contactform form p input,
#contactform form p textarea {
	width: 260px;
	padding: 5px;
	height: 15px;
	border:1px #ccc solid;
	float:right;
}

#contactform form p label {
	float: left;
	width: 145px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 35px;
	font-size:14px;

}


#contactform form p textarea {
	height: 160px;
}

#contactform form p.textarea {
	height: 180px;
}



#contactform p.buttons {
	line-height: 33px;
	height: 35px;
	width:100%;
}

#contactform p.buttons input {
	width: 100px;
	float: left;
	padding: 1px 0;
	height: 35px;
	margin-left: 20px;
	font-weight: bold;
	text-transform: uppercase;
	color: #fff; 
	background-color: rgb(155,140,94);
	background-color: rgba(155,140,94,1);
	cursor: pointer;
	float:right;
}

#contactform p.buttons input:hover,
#contactform p.buttons input:focus {
	background-color: rgb(155,140,94);
	background-color: rgba(155,140,94,.8);
}

#contactform p.buttons input:active {
	background-color: rgb(155,140,94);
	background-color: rgba(155,140,94,.8);
}

.contact {
	margin-top:40px;
	margin-bottom:40px;
}

p.contact-blurb {	
	font-size:1.2em;
	color:rgb(109,102,94);
}
	
/*Home page slideshow*/

/*** set the width and height to match your images **/

#slideshow {
    position:relative;
	top:10px;
	height:290px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}