html { 
    background: #ff0000; min-height: 100%;
}

body { 
    background: white;  width: 332px;  margin: 0 auto; color: white; min-height: 100%;
    font-family: arial, sans-serif; 
}

a { color: inherit; } 

header { 
    background: #ff0000; margin: 0 auto; 
    padding: 80px 10px 10px 10px; border: 1px solid white; border-width: 0 10px 0 1px;
}
header img { width: 100%; }

nav { text-align: center; font-size: 1.2em; margin-top: .5em; }
nav ul {   list-style: none; text-align: center; padding: 0; margin: 0; }
nav ul li { display: inline-block; margin-right: -4px; color: black;}
nav ul li a { font-weight: bold; color: black; text-decoration: none; text-transform: uppercase; }
nav ul li a:hover { color: red; }

.lower { text-transform: lowercase; }

section.promo { width: 87%; margin: 2em auto; margin-bottom: 1em; }
section.promo div { margin:0; background: #ff0000; padding-bottom: 4em; 
        font-size: 1.4em; }
section.promo div p { margin-left: 1em; margin-right: 1em; }
section.promo figure { width: 100%; display: block; margin: 0px;}
section.promo figure img { width: 100%; }
section.promo div h3 { background: white; color: black; text-transform: uppercase; font-size: .9em; 
    padding: .5em; margin: .5em; }

section.promo div.homeEbooks { background: #418E9A; padding-bottom: 0; }
section.promo div.homeEbooks  h3{ background: inherit;  }

section.promo div.homeFilm { background: #ff0000; padding-bottom: 0; }
section.promo div.homeFilm  h3 { background: inherit; color: white; font-size: 1.2em; margin-bottom: .2em; }
section.promo div.homeFilm  figure#growVideoCover { position: relative;  margin-bottom: 1em; }
section.promo div.homeFilm  figure#mysteriousVideoCover { position: relative; }
section.promo div.homeFilm  figure figcaption { position: absolute; bottom: 0; left: 0;
    color: white; font-size: 1.2em; font-weight: bold; }
section.promo div.homeFilm  figure#growVideoCover  figcaption { top: 10%; left: 5.5%;}
section.promo div.homeFilm  figure#mysteriousVideoCover  figcaption{ bottom: -2.3em; left: 4%} 
section.promo div.homeFilm p#iWantToGoGetABeer  { height: 4em; border: 1px solid red;}
    
section#main { font-size: 1.7em; clear: both; margin: 0 1px 0 10px; padding: 0 .2em; background: #ff0000; border-bottom: 30px solid #ff0000; }
section#main h2 { font-size: 1.4em; font-weight: bold; color: black; }
section#main h3 { font-size: 0.9em; font-weight: bold; color: black; }

section#main figure.videoembed { margin-left: -210px; }

footer { color: black; text-align: center; padding: 1em; }
footer a { color: black; }

/* so mobile, yo */
@media only screen and (max-device-width: 480px) {

    html { border: 0;}

    body { width: 100%; font-size: 300%; }

    header { border-width: 0 20px 0 0;}

    nav {}

    section#main {}

    section#main figure.videoembed { margin-left: 0; }
    
    footer {}
}