/* layout and general style {{{1 */
html {
    background-color: #e8e8e8;
    background-image: url(/static/img/bg/tile.png);
    background-attachment: fixed;
}

article {
}

#logo {
    position: fixed;
    right: 2em;
    z-index: 100;
}

#header nav {
    background-color: rgba(0, 0, 0, 0.9);
    box-shadow: 0 0 2px black, 0 0 4px white, 0 0 6px #f62;
    font-weight: bold;
    position: fixed;
    top: 0px;
}

#header nav a {
    color: snow;
}

#header nav .pure-menu-link:hover,
#header nav .pure-menu-link:focus {
    background-color: #db3b3b;
    box-shadow: 0px 0px 5px black inset;
    border-radius: 3px;
}

#content, #footer {
    box-shadow: 0 2px 2px black;
    padding: 2% 5%;
    margin: 0 auto;
    max-width: 1024px;
}

#content {
    background-color: rgba(255, 255, 255, 0.88);
    clear: both;
    min-height: 32em;
}

#footer {
    background-color: #f63;
    border-top: thin solid snow;
    color: snow;
    text-align: center;
}

/* utility classes {{{1 */
.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

.clear-float {
    clear: both;
}

.m-box {
    padding: 1em;
}

/* specific elements {{{1 */
.pure-table {
    box-shadow: 0 0 1px black;
}

.pure-table thead {
    background-color: #ff7620;
    color: snow;
    text-shadow: 1px 1px 0.2em black;
}

.pure-table td {
    color: black;
    background-color: white;
    text-shadow: none;
}

.item-list > li {
    border-bottom: thick solid #fff0e9;
    clear: both;
    list-style: none;
}

.sign small {
    color: #f82;
    font-size: 0.6em;
    text-align: right;
    vertical-align: middle;
}

.sign a {
    text-align: left;
}

.sign img {
    border-top: thin solid #d51c1c;
    border-bottom: thin solid #d51c1c;
    height: 1.2em;
}

/* cert logos */
#features img {
    display: inline-block;
    height: 5em;
    margin: 1em;
}

#map {
    border: thin solid #aaa;
    height: 450px;
    width: 95%;
}

img.qrcode {
    border: thin solid black;
}

img.photo {
    border: thin solid #aaa;
    margin: 1em;
    padding: 0.3em;
}

#details h2, #specifications h2 {
    /* fixed text inside grid without specified unit size */
    letter-spacing: normal;
    /* fixed display in chrome */
    width: 100%;
}

table {
    overflow-x: auto;
    display: block;
}

h1.category-header {
    background-color: #daf5ff;
    border: thin solid darkgray;
    color: #585c6c;
    font-size: 3em;
    text-align: center;
}

/* index page {{{2 */
.banner-biz, .banner-ind, .banner-res {
    font-size: 1.2em;
}

/* product category {{{2 */
#commercial-lighting h2,
#industrial-lighting h2,
#residential-lighting h2 {
    background-size: cover;
    border: thin solid black;
    color: snow;
    font-size: 2em;
    min-height: 120px;
    padding-right: 1em;
    padding-top: 10px;
    text-align: right;
    text-shadow: 1px 1px 0.1em black, 0 0 0.2em black;
}

#commercial-lighting h2 {
    background-image: url(/static/img/bg/biz.jpg);
}

#industrial-lighting h2 {
    background-image: url(/static/img/bg/ind.jpg);
}

#residential-lighting h2 {
    background-image: url(/static/img/bg/res.jpg);
}

#product-category p.caption {
    color: black;
    font-weight: bolder;
    text-shadow: none;
}

#product-category .figure {
    text-align: center;
}

#product-category .figure a:hover {
    opacity: 0.5;
}

/* background images {{{1 */
body.bg-img {
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* gu10 {{{2 */
body.bg-img.gu10 {
    background-image: url(/static/img/bg/gu10.jpg);
}

@media only screen and (max-width: 1023px) {
    body.bg-img.gu10 {
        background-image: url(/static/img/bg/gu10-s.jpg);
    }
}

/* br {{{2 */
body.bg-img.br {
    background-image: url(/static/img/bg/br.jpg);
}

@media only screen and (max-width: 1023px) {
    body.bg-img.br {
        background-image: url(/static/img/bg/br-s.jpg);
    }
}

/* responsive {{{1 */
@media screen and (max-width: 800px) {
    /* remove logo when screen is small */
    #logo {
        display: none;
    }
}