/* Screen Stylesheet 
   Layout, colors    */

@import url(main.css) all;

body {background: url(../img/bg_header.gif) top repeat-x #2c2b2b; color: #c1c1c1; padding: 0; margin: 0;}
body.home {background-image: url(../img/bg_page.gif);}
a, a:link {color: #c1c1c1; text-decoration: underline;}
a:hover, a:focus {text-decoration: none;}

/* Section styles */

#page {margin: 0 auto; padding: 40px 30px 30px 30px; width: 900px;}

#header {padding: 0; height: 110px; min-height: 110px;}
#header h1, #header h1 a, #header h2 {
    display: block;
    float: left;
    text-indent: -10000px;
    padding: 0; margin: 0;
    width: 525px;
    }
#header h1, #header h1 a {height: 60px;}
#header h1 a, #header h2 {background: url(../img/bg_logotype.gif) no-repeat;}
#header h1 a:hover {background-position: 0px -85px;}

#header h2 {background-position: 0px -60px; height: 20px;}

#nav {float: right; list-style: none; margin: 0; padding: 0 0 1.5em 0;}
#nav li {float: left;}
#nav li a {
    color: white;
    font: 16pt "Georgia", serif;
    padding: 0 .5em;
    text-decoration: none;
    }
    #nav li a:hover, #nav li a:focus {text-decoration: underline;}



#crumbtrail {}


#masthead {
    background: black;
    display: block;
    height: 300px;
    /* height: 285px; */ /* Total height: 300px; */
    /* padding-top: 15px; */
    width: 960px;
    overflow: hidden;
    position: relative;
    }

#masthead a.banner {
    float: left;
    display: block;
    padding: 0px;
    position: relative;
    text-decoration: none;
    }
#masthead .title {
    position: absolute; bottom: .5em; left: .5em;
    font-size: 200%;
    font-family: Georgia, sans-serif;
    font-style: italic;
    line-height: 1.2em;
    text-decoration: none;
    -webkit-transition: opacity .2s linear;
    opacity: 0;
    }
#masthead a.banner:hover .title {
    opacity: 1;
    }
#masthead a.banner img {
    -webkit-transition: opacity .2s linear;
    opacity: 1;
    }
#masthead a.banner:hover img {
    opacity: .5;
    }
#masthead .bottom {
    border-radius: 1em;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;

    background: #2c2b2b;
    display: block;
    padding: .25em .5em;
    position: absolute; bottom: 1.5em; right: 1.5em;
    text-decoration: none;
    }
#masthead .bottom:hover, #masthead .bottom:focus {background: #444;}


#footer .line {border-color: #878787;}

/* Reusable styles */
.column {float: left; padding: 0 15px;}
.column.half {width: 420px;}
.column.third {width: 270px;}
.column.fourth {width: 195px;}
.column.threefourths {width: 630px;}

.padtop {padding-top: 1.5em;}
.padbottom {padding-bottom: 1.5em;}

.inlinebutton {line-height: 1.5em;}
.button form {display: inline; position: relative; /* top: .5em; */}

/* Product Page */

#thumbs {position: absolute; padding: 5px; width: 290px; /* Full width: 300px */}
#thumbs a img {border: 3px solid #333;}
#thumbs a:hover img, #thumbs a:focus img {border-color: white;}

.description h4 {padding-bottom: 0;}

/*
.thumbs {float: left; width: 300px;}
.description {margin-left: 350px;}
.images {float: left; width: 300px;}
*/



/* CSS -webkit Animations */
/*
#masthead img.img1, #masthead img.img2, #masthead img.img3 {
    -webkit-animation-name: mastheadFadeIn;
    -webkit-animation-duration: 1s;
    }
#masthead img.img2 {
    -webkit-animation-delay: .5s;
    }
#masthead img.img3 {
    -webkit-animation-delay: 1s;
    }

@-webkit-keyframes mastheadClear {
    0% { opacity: 0; }
    100% { opacity: 0; }
    }

@-webkit-keyframes mastheadFadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1.0; }
}
*/