/*
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
*/

@import "style/css/reset.css";



/* 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 */


body {
    background:  url(/wp-content/themes/starkers/style/images/main-bg.jpg) repeat;
    font-family: Georgia, serif;
    font-size: 16px;
    line-height: 18px;
    color: #666666;
    }
   
.page-template-home-php #wrapper {
    background:  url(/wp-content/themes/starkers/style/images/bg-exp.jpg) top repeat-x;
    }
	
.page-template-work-php #wrapper {
    background:  url(/wp-content/themes/starkers/style/images/bg-exp-2.jpg) top repeat-x;
    }

#nav {width: 100%; background:#666666; height: 25px; border-bottom: 1px solid #414141; position: fixed; top: 0; left: 0; opacity: .8; z-index: 1000;

/* For IE 5-7 */
                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
                /* For IE 8 */
                -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
                 
}

#navcontainer { width: 940px; margin: 0 auto 0;}
#nav ul li {display: inline;}



   
.page-template-home-php #container {
    width: 980px;
    display: block;
    margin: 0 auto 0;
    overflow: hidden;
    background: url(/wp-content/themes/starkers/style/images/big-2.jpg) top center no-repeat;
    }
   
.page-template-work-php #container {
    width: 980px;
    display: block;
    margin: 0 auto 0;
        overflow: hidden;
    background: url(/wp-content/themes/starkers/style/images/header-bg.jpg) top center no-repeat;
    }
   

#header {
    height: 141px;
        width: 100%;
    padding: 0 0 0 20px;
    float: left;
    z-index: 200;
    }

#welcome {
    height: 424px;
        width: 100%;
   
    margin: 0px 0 0 0;
    padding: 20px 0 0 20px;
    float: left;
    z-index: 100;
    }

#scroll {width: 960px;
        height: 1%;
        margin: 0 0 0 20px;
        float: left;}
 
#ads {
        width: 960px;
        margin: 0 0 0 20px;
        padding: 40px 0 20px 0;
        float: left;
        clear: both;
       }
   
#web {
    width: 960px;
    margin: 0 0 0 20px;
    padding: 40px 0 20px 0;
    background: url(/wp-content/themes/starkers/style/images/seperator.jpg) top left no-repeat;
       float: left;
    }   
   
   
.entries {
float: left;
width: 100%;

}

html>body .entries {*padding-bottom: 20px;}


.details {
float: left;
width: 100%;

}

html>body .details {*padding-bottom: 20px;}

.boxgrid{
                width: 210px;
                height: 101px;
                margin: 0 20px 20px 0;
                float:left;
                padding: 4px;
                display: inline-block;
                border: solid 1px #b1aca6;
                overflow: hidden;
                position: relative;
            }
                .boxgrid img{
                    position: absolute;
                                        width: 210px;
                    top: 4;
                    left: 4;
                    border: 0;
                }
               
            .boxcaption{
                float: left;
                position: absolute;
                background: #629b95;
                height: 111px;
                width: 100%;
                opacity: .8;
                /* For IE 5-7 */
                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
                /* For IE 8 */
                -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
             }
                 .captionfull .boxcaption {
                     top: 260;
                     left: 0;
                 }
                 .caption .boxcaption {
                     top: 220;
                     left: 0;
                 }
               
#about {
        width: 960px;
        margin: 0 0 0 20px;
        padding: 40px 0 40px 0;
        float: left;
        background: url(/wp-content/themes/starkers/style/images/seperator.jpg) top left no-repeat;
        }
       
#pic {
    width: 220px;
    float: left;
    display: inline-block;
    margin: 0 20px 0 0;
    }
   
    #pic img {
        padding: 4px;
        border: 1px solid #9b9791;
        }
       
       
#experience {
    width: 220px;
    float: left;
    display: inline-block;
    margin: 0 20px 0 0;
    }

#awards {
    width: 220px;
    float: left;
    display: inline-block;
    margin: 0 20px 0 0;
    }
   
#testimonial {
    width: 220px;
    float: right;
    display: inline-block;
    margin: 0 20px 0 0;
    }

#main {
width: 960px;
margin: 40px 0 0 20px;
float: left;
}       
       
#box2 {
width: 240px;
float: left;
margin: 0 20px 0 0;
}       

#content {
width: 420px;
float: left;
overflow: hidden;
margin: 0 20px 0 0;
}

#box3 {
width: 240px;
margin: 0 20px 0 0 ;
float: right;
}       
       
       
.post a img {
padding: 4px;
width: 410px;
border: 1px solid #b1aca6;
margin: 0 0 20px 0;
}

.post a:hover img {
padding: 4px;
background: #b1aca6;
margin: 0 0 20px 0;
border: 1px solid #b1aca6;
}

#contact {
    width: 960px;
    margin: 0 0 20px 20px;
    float: left;
    padding: 40px 0 20px 0;
    background: url(/wp-content/themes/starkers/style/images/seperator.jpg) top left no-repeat;
    }





#footer {
width: 960px;
margin: 0 0 0 20px;
padding: 40px 0 40px 0;
background: url(/wp-content/themes/starkers/style/images/seperator.jpg) top left no-repeat;
clear: both;
}


#form {width: 620px;clear: both; float: left; display: inline-block;}
#form label {font-size: 16px; padding-bottom: 20px; }
#form .formleft {float: left; margin: 0 20px 0 0;}
#form .formleft textarea {width: 298px; height: 200px; border: 1px solid #b1aca6;}
#form .formright {float: right; margin: 0 0 7px 0;}
#form .formright input {float: right; width: 298px; background: #fff; border: 1px solid #b1aca6; padding: 5px 0;}
#form .gfield_description {width: 298px;}


#info {width: 300px; height: 180px; margin: 20px 20px 0 0; float: right; padding: 20px 0 0 0; background: #b1aca6;}
#info #icon {text-align: center;}
#info ul {text-align:center;}
#info ul li {display: inline; padding: 0 15px 0 0;}

#number { background: #b1aca6; color: white; padding: 20px; text-align: center;}
#number a {color: white;}





/* TYPOGRAPHY */
/* ----------------------------------------- */

h1, h2, h3, h4, h5, h6 { font-weight:bold; text-shadow: #fff 1px 2px 2px;} /* 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.



/* Font stack options

	The following represents a list of font stacks, as recommended by Nathan Ford in
	http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

	I've added inverted commas around the relevant family names to ensure compatibility.
	p = balanced for paragraphs or body copy
	t = balanced for headlines or titles
*/


@font-face {
	font-family: 'DroidSerifRegular';
	src: url('/wp-content/themes/starkers/style/fonts/DroidSerif-Regular.eot');
	src: local('Droid Serif'), local('DroidSerif'), url('/wp-content/themes/starkers/style/fonts/DroidSerif-Regular.woff') format('woff'), url('/wp-content/themes/starkers/style/fonts/DroidSerif-Regular.ttf') format('truetype'), url('/wp-content/themes/starkers/style/fonts/DroidSerif-Regular.svg#DroidSerif') format('svg');
}

@font-face {
	font-family: 'DroidSerifItalic';
	src: url('/wp-content/themes/starkers/style/fonts/DroidSerif-Italic.eot');
	src: local('Droid Serif'), local('DroidSerif-Italic'), url('/wp-content/themes/starkers/style/fonts/DroidSerif-Italic.woff') format('woff'), url('/wp-content/themes/starkers/style/fonts/DroidSerif-Italic.ttf') format('truetype'), url('/wp-content/themes/starkers/style/fonts/DroidSerif-Italic.svg#DroidSerif-Italic') format('svg');
}

@font-face {
	font-family: 'DroidSerifBold';
	src: url('/wp-content/themes/starkers/style/fonts/DroidSerif-Bold.eot');
	src: local('Droid Serif'), local('DroidSerif-Bold'), url('/wp-content/themes/starkers/style/fonts/DroidSerif-Bold.woff') format('woff'), url('/wp-content/themes/starkers/style/fonts/DroidSerif-Bold.ttf') format('truetype'), url('/wp-content/themes/starkers/style/fonts/DroidSerif-Bold.svg#DroidSerif-Bold') format('svg');
}

@font-face {
	font-family: 'DroidSerifBoldItalic';
	src: url('/wp-content/themes/starkers/style/fonts/DroidSerif-BoldItalic.eot');
	src: local('Droid Serif'), local('DroidSerif-BoldItalic'), url('/wp-content/themes/starkers/style/fonts/DroidSerif-BoldItalic.woff') format('woff'), url('/wp-content/themes/starkers/style/fonts/DroidSerif-BoldItalic.ttf') format('truetype'), url('/wp-content/themes/starkers/style/fonts/DroidSerif-BoldItalic.svg#DroidSerif-BoldItalic') format('svg');
}
	
a {text-decoration: none;}

#footer a {float: right; margin: 0 20px 0 0; color: #629b95; display:none; }
#footer p {float: left;}



.entries a {display: block;}
	
h1 {
	font-size: 36px;
	font-family: 'DroidSerifRegular', Georgia, serif ;
	font-weight: 100;
        margin: 42px 0 0 0;
        line-height: 36px;
        text-shadow: #fff 1px 2px 2px;
	}
	
	h1 span {
		
                font-family:'DroidSerifRegular', Georgia, serif ;
		font-size: 16px;
		font-weight: normal;
                line-height: 18px;
                text-shadow: #fff 1px 2px 2px;
		}


#content p {
	font-size: 16px;
	line-height: 24px;
	padding: 0 0 24px 0;
}

ul.nav {
	margin: 0 20px 0 0;
        padding: 2px 0 0 0;
        float: right;
	}

#navcontainer ul li {
	font-size: 14px;
        padding: 5px;
        display: inline;
	color: #ffffff;
	}


#navcontainer ul li a {
        font-size:12px;
	color: #fff;
        text-decoration: none;
	}

#navcontainer ul li a:hover {
        text-decoration: underline;
	}

#welcome p {
        font-size: 16px;
        line-height: 24px;
	font-family: 'DroidSerifItalic', Georgia, serif ;
        font-style: italic;
        text-shadow: #fff 1px 2px 2px;
	}
    

.page-template-home-php h2 {
    font-family: 'DroidSerifBoldItalic', Georgia, serif ;
    font-size: 48px;
    font-style: italic;
    font-weight: bold;
    line-height: 50px;
    color: #629b95;
    width: 600px;
    margin: 0 0 10px 0;
    text-shadow: #fff 1px 2px 2px;

}

.page-template-work-php h2 {
    font-size: 48px;
    color: white;
    padding: 10px;
    margin: 0 0 20px 0;
    background: #e5c966;
}



h2 span {
    font-family: 'DroidSerifBoldItalic', Georgia, serif ;
    font-size: 55px;
    font-style: italic;
}


.title {
    font-size: 24px;
	line-height: 28px;
    color: #629b95;
    font-family: 'DroidSerifItalic', Georgia, serif ;
    font-style: italic;
    margin: 0 0 20px 0;
    text-shadow: #fff 1px 2px 2px;
    float: left;
}

#main h2 {
    font-size: 24px;
    color: #629b95;
    font-family: 'DroidSerifItalic', Georgia, serif ;
    font-style: italic;
    margin: -10px 0 20px 0;
    text-shadow: #fff 1px 2px 2px;
    border-bottom: 1px dotted #666666;;
    background: none;
}


#box3 li a {
display: list-item;
}


.entries h3 {
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;
    padding: 65px 0 0 0;

}

.entries h3 span{
    font-weight: normal;
    font-size: 16px;
  
}
.title a:hover {background: none;}

.details h3 {
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;

}

.details h3 span{
    font-weight: normal;
    font-size: 16px;
  
}

.boxgrid h3 {
	text-align: center;
	color: #fff;
text-shadow: #fff 0px 0px 0px;
        padding: 20px 0 0 0;
					opacity: 1; 
				/* For IE 5-7 */
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
				/* For IE 8 */
				-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	}
	
	
#ads a:hover {
background: #629b95;


}

	
#web a:hover {
background: #629b95;

}

.details h3 {
font-size: 24px;
font-weight: normal;
padding: 0 0 10px 0;
margin: 0 0 10px 0;
border-bottom: 1px dotted #9b9791;

}
.details h3 span {
font-size: 24px;
font-weight: normal;
padding: 0 0 10px 0;
border-bottom: 0px dotted #9b9791;

}


.details p span {
font-weight: bold;
}

.quote {
background: #b1aca6 url(/wp-content/themes/starkers/style/images/quote-bg.jpg) bottom center repeat-x;
color: #fff;
padding: 20px 20px 40px 20px;
}

#testimonial p {
font-size: 16px;
line-height: 24px;
}

#testimonial p span {
font-size: 14px;
line-height: 18px;
font-weight: normal;
margin-top: -10px;
}

#box2 h3 {
font-size: 16px;
font-family: 'DroidSerifRegular', Georgia, serif;
font-weight: normal;
padding: 5px 0;
margin: 0 0 10px 0;
border-bottom: 1px dotted;
}

#box2 h3 a {
color: #629b95
}

#box2 h3 a:hover {
background: #629b95;
color: white;
text-shadow: none;
}



#box3 h3 {
font-family: 'DroidSerifRegular', Georgia, serif;
font-size: 16px;
font-weight: normal;
padding: 5px 0;
margin: 0 0 10px 0;
border-bottom: 1px dotted;
}

#box3 ul {
padding: 0 0 20px 10px;
}

#box3 li a{
color: #629b95;
font-size: 14px;
line-height: 14px;
background: url(/wp-content/themes/starkers/style/images/arrow.jpg) no-repeat;
padding: 5px 0 5px 30px;
}

#box3 li a:hover{
background: #629b95;
color: #fff;
}



/* IE6 css fixer v0.8: Fri, 09 Apr 2010 05:42:59 +0200 */

/* ============================================= */
/* safe settings                                 */

/* add display:inline to floated elements */
.alignleft,
.alignright,
#header,
#welcome,
#ads,
#web,
.boxgrid,
.boxcaption,
#about,
#testimonial,
#main,
#box2,
#content,
#box3,
#contact,
#form,
#form .formleft,
#form .formright,
#form .formright input,
#info,
ul.nav,
.title,
.entries,.details,
#pic,#experience,#awards {display:inline;}

/* add zoom:1 to overflow:hidden */
.page-template-work-php #container,
.boxgrid,
#content,
.page-template-home-php #container,.page-template-faq-php #container {zoom:1;}

/* fix negative margins */
br.clear,
#main h2,
#testimonial p span {position:relative; zoom:1;}

/* add zoom:1 to pos:relative elements */
.boxgrid {zoom:1;}

/* add transparancy */
.boxcaption {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);}
.boxgrid h3 {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}


/* add zoom:1; display:inline; to inline-block elements */
.boxgrid,
#testimonial,
#form,
#pic,#experience,#awards {zoom:1; display:inline;}

.gfield_description { font-size: 12px; font-style: italic;}
.validation_message { color: red;}
.validation_error {color: red; margin: 0 0 10px 0;}