@import "reset.css";

/* Palette 
 ******************************************************************************
    Green:
        #b6e900
*/


/* Positioning
 ******************************************************************************/
    body { width: 760px; margin: 0 auto; background: black; }
    h1 { height: 180px; width: 175px; padding-top: 20px; padding-right: 15px; }
    h1 a { display: block; height: 46px; width: 175px; }
        h1 a span { display: none; }

    #header { position: relative; height: 200px; }
    #content { padding-top: 10px; }
    #site-navigation { position: absolute; margin-top: 32px; top: 0; right: 0px; }
        #site-navigation li { float: left; }
        #site-navigation li a { padding: 4px 10px; }
    #contact { position: absolute; width: 170px; left: 0; top: 65px; line-height: 1.5em; padding-left: 10px; }
        #contact li {  text-align: right; }
    #thumbnails { position: relative; width: 550px; margin: 50px auto;}
        #thumbnails li a { display: block; width: 170px; height: 95px; float: left; margin: 4px; }
    #footer { clear: both; padding-top: 80px; text-align: center; font-size: 80%; color: #333;}

    /* ALA footer fix */
    * html body { overflow: hidden; }
        
    * html #footer-wrapper {
        float: left;
        position: relative;
        width: 100%;
        padding-bottom: 10010px;
        margin-bottom: -10000px;
        background: black;
    }


/* Style
 ******************************************************************************/
    body {
        color: white;
        font-family: sans-serif;
        font-size: 90%;
        }
    h1 { background: black; }
    h1 a { background: url(img/piercemedia-logo.png) black top left no-repeat; }
    a { color: white; text-decoration: none; }
    a:hover { color: #b6e900; text-decoration: none; }
    #site-navigation { text-transform: uppercase; font-size: 90%; text-shadow: 2px 1px 1px #222; }
    #header { border-bottom: 1px solid black ; background: url(img/background-clouds.jpg) black top center no-repeat; }
    #contact { font-size: 90%; color: #b1b2b4;}
    #thumbnails li a { border: 2px solid black; }
    #thumbnails li a:hover { border-color: #b6e900; }
    
#page-navigation { float: left; width: 210px; }
    #page-navigation h2 { color: #b6e900; text-transform: uppercase; margin-bottom: 20px; }
    #page-navigation li a { color: #888; text-transform: uppercase; padding: 6px 10px; display: block; font-size: 80%; }
    #page-navigation li a:hover { color: white; }
    #page-navigation li a.on { color: #b6e900;}

div.media {
    width: 320px;
    height: 210px;
    background: black;
    color: white;
    float: right;
    margin-top: 30px;
    margin-right: 220px;
    }
div.media div {
    padding-top: 5px;
    font-size: 90%;
    }
video {
        max-width: 540px;
        max-height: 360px;
}