/*
Theme Name: Starkers
Theme URI: http://elliotjaystocks.com
Description: The totally nude Wordpress theme. Phwoar! (Based on Twenty Ten)
Version: 3.0
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 */


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

@font-face {
    font-family: 'ColaborateThinRegular';
    src: url('fonts/ColabThi-webfont.eot?') format('eot'),
         url('fonts/ColabThi-webfont.woff') format('woff'),
         url('fonts/ColabThi-webfont.ttf') format('truetype'),
         url('fonts/ColabThi-webfont.svg#webfontG4vaW79c') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ColaborateLightRegular';
    src: url('fonts/ColabLig-webfont.eot?') format('eot'),
         url('fonts/ColabLig-webfont.woff') format('woff'),
         url('fonts/ColabLig-webfont.ttf') format('truetype'),
         url('fonts/ColabLig-webfont.svg#webfont3FAZKDdg') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ColaborateRegular';
    src: url('fonts/ColabReg-webfont.eot?') format('eot'),
         url('fonts/ColabReg-webfont.woff') format('woff'),
         url('fonts/ColabReg-webfont.ttf') format('truetype'),
         url('fonts/ColabReg-webfont.svg#webfontTlHJ4DQk') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ColaborateMediumRegular';
    src: url('fonts/ColabMed-webfont.eot?') format('eot'),
         url('fonts/ColabMed-webfont.woff') format('woff'),
         url('fonts/ColabMed-webfont.ttf') format('truetype'),
         url('fonts/ColabMed-webfont.svg#webfont8gV1zcAy') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ColaborateBoldRegular';
    src: url('fonts/ColabBol-webfont.eot?') format('eot'),
         url('fonts/ColabBol-webfont.woff') format('woff'),
         url('fonts/ColabBol-webfont.ttf') format('truetype'),
         url('fonts/ColabBol-webfont.svg#webfontbKFqRJsi') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1, h2, h3, h4, 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.*/
body, h1, h2, h3 { font-family: 'ColaborateLightRegular', Tahoma, Geneva, Verdana; font-weight: normal; font-size: 14px; color: #576872; }
a { text-decoration: none; color: inherit; }

/* MENU ELEMENTS */
/* ----------------------------------------- */
#header-logo { position: relative; margin-left: 30px; top: 35px; }
#menu { position: relative; margin-left: 30px; top: 72px; text-transform: lowercase; }
#menu li { margin-bottom: 2px; }
#menu a { -webkit-transition: color 1s; }
#menu a:hover { color: #b3d338; }
.current_page_item, .current_page_parent { color: #b3d338; }


/* PAGE ELEMENTS */
/* ----------------------------------------- */
.hide { display: none; }

#container, #container-projects { position: relative; margin: -46px 0 0 170px; line-height: 15px; font-size: 13px; padding-bottom: 30px; }
#container p { padding-bottom: 7px; }
#container-projects p { padding-bottom: 10px; }

#container-projects { width: 170px; }

#page-info { width: 160px; }
#logo-large { width: 100%; height: 400px; position: absolute; bottom: 0px; overflow: hidden; }
#logo-large img { position: absolute; top: 0px; left: -272px; }
#logo-text { margin-top: 190px; }

#about-photo { padding-top: 2px; }
#about-photo, #page-info { float: left; padding-right: 20px; }

/* PROJECT ELEMENTS */
/* ----------------------------------------- */
#projects-menu { margin-bottom: 20px; text-transform: lowercase; width:200px;}
#description { position: relative; width: 170px; }

#left { position:absolute; left:370px; top: 200px; width:40px; height: 490px; }
#right { position:absolute; right:0px; top: 200px; width:40px; height: 490px; }

#arrows { position: absolute; top: 740px; left: 430px; }
#left-arrow, #right-arrow { float: left; margin-right: 10px; width: 20px; height: 12px; cursor: pointer; }
#arrows div:active { margin-top:2px; }
#left-arrow { background: url(images/arrow-left.jpg) no-repeat; }
#right-arrow { background: url(images/arrow-right.jpg) no-repeat; }


.gallery { z-index:-2; width:800px; height:490px; padding: 0; position: absolute; left: 200px; top: 0px; overflow: hidden; }
.gallery-content { position: absolute; top: 0px; width: 467px; height: auto; padding: 0; }
.gallery-content img { padding-right: 5px; }


/* GALLERY OVERLAY ELEMENTS */
/* ----------------------------------------- */
#background{ position: fixed; top: 0px; left: 0px; z-index: -5; background-color: black; opacity: 0; }

/*#float-over { position:absolute; left: 40px; top: 40px; display: none;}*/
#float-over-images { position:relative; top:90px; left:90px; z-index:100; display: none; padding-bottom:90px;}
#float-over-images li { background: white;  }
#float-over-images img { display: none; padding: 10px 10px 8px 10px;  }

#exit { cursor: pointer; color: black; font-size: 24px; width: 20px; height: 20px; margin-top: -22px; display: none; }


/* FOOTER ELEMENTS */
/* ----------------------------------------- */
#footer { position: fixed; left: 30px; bottom: 5px; font-size: 12px; z-index: 3; }
#footer a { display: inline; }

#footer-background { position: fixed; bottom: 0px; left: 0px; width:100%; height:16px; background: white; 
-moz-box-shadow: 0px -5px 5px white;
-webkit-box-shadow: 0px -5px 5px white;
box-shadow: 0px -5px 5px white; } 

/* CONTACT ELEMENTS */
/* ----------------------------------------- */

#contact-form { width: 200px; }
#contact-form input#name, #contact-form input#email, #contact-form textarea { font-family: inherit; border: thin solid #BBB; color: #999; width: 100%; height: 14px; padding: 0px 3px 2px 1px; margin-top: 4px; margin-bottom: 1px; }
#contact-form textarea { height: 100px; width: 101%; font-size: 10px; padding: 2px 0 0 2px; }
input:focus, textarea:focus {outline: none; -moz-box-shadow: 0px 0px 4px #b3d338; -webkit-box-shadow: 0px 0px 4px #b3d338; box-shadow: 0px 0px 4px #b3d338;}
#contactsubmit { font-family: inherit; border: thin solid #BBB; width: 103%; text-align: left; padding: 2px; outline: none; background: none; }