/*
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";
@import "style/css/gravity.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;
    }
   
#wrapper { }

#nav {width: 100%; height: 25px; position: relative; top: 45px; left: 0; z-index: 1000;}
#navcontainer { width: 940px; margin: 0 auto 0;}
#nav ul li {display: inline;}

.page-template-gallery-php #nav {display: none}

  
#container {
    width: 980px;
    display: block;
    margin: 0 auto 0;
    overflow: hidden;
    }
  

#header {
    height: 130px;
        width: 100%;
    margin: 0 0 0 20px;
    padding: 0 0 0 0;
    float: left;
    z-index: 200;
    background: url(/wp-content/themes/starkers/style/images/seperator.jpg) bottom left no-repeat;
    }

.page-template-gallery-php #header {display: none}

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

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

}

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


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

}

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

.shadow {
    width: 300px;
    height: 168px;
    float: left;
    display: inline-block;
    margin: 0 20px 20px 0;
    box-shadow: inset -1px 1px 20px #888;
        -moz-box-shadow: inset -1px 1px 20px #888;
        -webkit-box-shadow: inset -1px 1px 10px #888;
    z-index: 100;
    }

.boxgrid{
                width: 300px;
                height: 168px;
                float:left;
                display: inline-block;
                overflow: hidden;
                position: relative;
               
            }


                .boxgrid img{
                    position: absolute;
                    width: 300px;
                    height: 168px;
                    top: 0;
                    left: 0;
                    border: 0;
                    z-index: -100;
                }
              
            .boxcaption{
                float: left;
                position: absolute;
                background: #5e9461;
                height: 168px;
                width: 100%;
                opacity: 1;
                /* For IE 5-7 */
                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
                /* For IE 8 */
                -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";


             }
                 .captionfull .boxcaption {
                     top: 168;
                     left: 0;
                 }
                 .caption .boxcaption {
                     top: 168;
                     left: 0;
                 }
             
    
      
      
.threeCol {
    width: 300px;
    float: left;
    display: inline-block;
    }

.gutter {
 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;
}      
      
      
.page-template-work-php .post a img {
padding: 4px;
width: 410px;
border: 1px solid #b1aca6;
margin: 0 0 20px 0;
}


.page-template-work-php .post a img {
padding: 4px;
width: 410px;
border: 1px solid #b1aca6;
margin: 0 0 20px 0;
}



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



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

.page-template-gallery-php #footer {
display: none}



#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;}


.ngg-gallery-thumbnail {margin: 0 0 20px 0 }


/* 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;
        position: relative;
        top: -30px;
    }
   
    h1 span {
       
                font-family:'DroidSerifRegular', Georgia, serif ;
        font-size: 16px;
        font-weight: normal;
                line-height: 18px;
                text-shadow: #fff 1px 2px 2px;
        }
h1 a {
    color: #666666}
   
h1 a:hover {
    color: #5e9461}


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

#navcontainer ul {
    margin: 0 0px 0 0;
        padding: 2px 0 0 0;
        float: right;
    }


#navcontainer ul li a {
        color: #fff;
        padding: 5px 10px 5px 10px;
        margin: 0 0 0 5px;
        font-family: 'helvetica neue', helvetica , arial, san-serif;
        font-weight: 500;
        font-size: 12px;
        text-shadow: #555 0px -1px 0px;
        display: inline-block;
        text-transform: uppercase;
        text-align: center;
        border-radius: 3px;
            -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        background: #96cb73;
            /* Mozilla: */
            background: -moz-linear-gradient(top, #96cb73, #5e9461);
            /* Chrome, Safari:*/
            background: -webkit-gradient(linear,
                left top, left bottom, from(#96cb73), to(#5e9461));
            /* MSIE */
            filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#96cb73', EndColorStr='#5e9461', GradientType=0);
        }

#navcontainer ul li a:hover {
        text-shadow: #555 0px 1px 0px;
        background: ##5e9461;
        box-shadow: inset -1px 1px 10px #888;
        -moz-box-shadow: inset -1px 1px 10px #888;
        -webkit-box-shadow: inset -1px 1px 10px #888;
        }

#welcome p {
        font-size: 24px;
        line-height: 32px;
    font-family: 'DroidSerifRegular', Georgia, serif ;
        text-shadow: #fff 1px 2px 2px;
        text-align: center;
    }
   

.page-template-home-php h2 {
    font-family: 'DroidSerifRegular', Georgia, serif ;
    font-size: 70px;
    font-weight: 100;
    line-height: 70px;
    margin: 0 0 10px 0;
    text-align: center;
    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;

}


.title {
    font-size: 18px;
    line-height: 28px;
    color: #666666;
    font-family: 'DroidSerifRegular', Georgia, serif ;
    margin: 0 0 20px 0;
    text-shadow: #fff 1px 2px 2px;
    text-transform: uppercase;
    float: left;
}

#main h2 {
    font-size: 24px;
    color: #666666;
    font-family: 'DroidSerifRegular', Georgia, serif ;
    margin: -10px 0 20px -10px;
    text-shadow: #fff 1px 2px 2px;
    border-bottom: 1px dotted #b1aca6;;
    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: left;
    color: #fff;
        font-family: 'helvetiva neue', helvetica; san-serif;
        text-shadow: #fff 0px 0px 0px;
        padding: 10px 0 0 10px;
                    opacity: 1;
                /* For IE 5-7 */
                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
                /* For IE 8 */
                -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }
   
   

a.top{
        color: #fff;
        padding: 5px 10px 5px 10px;
        margin: 0 20px 0 5px;
        float: right;
        font-family: 'helvetica neue', helvetica , arial, san-serif;
        font-weight: 500;
        font-size: 12px;
        text-shadow: #555 0px -1px 0px;
        display: inline-block;
        text-transform: uppercase;
        text-align: center;
        border-radius: 3px;
            -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        background: #96cb73;
            /* Mozilla: */
            background: -moz-linear-gradient(top, #96cb73, #5e9461);
            /* Chrome, Safari:*/
            background: -webkit-gradient(linear,
                left top, left bottom, from(#96cb73), to(#5e9461));
            /* MSIE */
            filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#96cb73', EndColorStr='#5e9461', GradientType=0);
        }

a:hover.top {
        text-shadow: #555 0px 1px 0px;
        background: #5e9461;
        box-shadow: inset -1px 1px 10px #888;
        -moz-box-shadow: inset -1px 1px 10px #888;
        -webkit-box-shadow: inset -1px 1px 10px #888;
        }


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

}
.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 #b1aca6;
}

#box2 h3 a {
color: #5e9461
}

#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 #b1aca6;
}

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

#box3 li a{
color: #5e9461;
font-size: 14px;
line-height: 14px;
padding: 5px 0 5px 0;
border-bottom: 1px dotted #none;
}

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



a.hoverable {
    position: relative;
    cursor: pointer;
    color: #5e9461;
    text-decoration: none;
}

a.hoverable div {
    position: absolute;
        color: white;
    display: none;
    top: 30px;
    left: 0;
    margin: 0;
    padding: 20px;
        text-shadow: none;
    background-color: #5e9461;
        z-index: 1000;
}

a.hoverable:hover div {
    display: block;
}


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