/* RWD.  */

* { box-sizing: border-box; }

[class*="col-"] {
    float: left;
    padding: 15px;
}

.col-0 {width: 12.5%;}
.col-1 {width: 25%;}
.col-2 {width: 37.5%;}
.col-3 {width: 50%;}
.col-5 {width: 62.5%;}
.col-5 {width: 75%;}
.col-6 {width: 87.5%;}
.col-7 {width: 100%;}

.row::after {
    content: "";
    clear: both;
    display: table;
}

/* Desktop style.  */

.mobile { display: none; }
.desktop { display: initial; }

/* Mobile style.  */

@media only screen and (max-width: 1340px) {

    /* Commented as obvious.  ;)  */
    .mobile { display: initial; }
    .desktop { display: none; }

    /* Set content to full width; otherwise it only occupies 75% (see .col-5).  */
    div.content { width: 100%; }

    /* Make the ul element span the full width and float the child
       li's next to each other while keeping them centered, and still
       respond to changes in window size (li's will begin to pile
       vertically).  The a elements love to add 5-20px underneath
       their parent li, so force them to be no taller.  The li height
       is determined by the background images; specifically, they are
       half the height of the image, because the lower half is used as
       the "alternate" background when hovered over or active.  */
    #mobile-nav {
        margin: 0;
        padding: 0;
        float: left;
        width: 100%;
        text-align: center;
        list-style-type: none;
    }
    #mobile-nav li {
        height: 45px;
        width: 170px;
        display: inline-block;
    }
    #mobile-nav a {
        max-height: 45px;
        display: block;
    }

    /* Putting the redundant bits in the "#mobile-nav li" selector
       causes the url to be lost, due to precedence.  */
    #mobile-nav-home { background: url("/images/nav/left/home.png") top center no-repeat; }
    #mobile-nav-catalog { background: url("/images/nav/left/catalog.png") top center no-repeat; }
    #mobile-nav-plantfinder { background: url("/images/nav/left/plantsearch.png") top center no-repeat; }
    #mobile-nav-viewcart { background: url("/images/nav/left/viewcart.png") top center no-repeat; }
    #mobile-nav-contact { background: url("/images/nav/left/contactus.png") top center no-repeat; }
    #mobile-nav-giftcerts { background: url("/images/catnav/giftcerts.png") top center no-repeat; }
    #mobile-nav-tshirts { background: url("/images/catnav/tshirts.png") top center no-repeat; }
    #mobile-nav-giftcards { background: url("/images/catnav/giftcardsetchings.png") top center no-repeat; }

    #mobile-nav-home:hover, #mobile-nav-home:active,
    #mobile-nav-catalog:hover, #mobile-nav-catalog:active,
    #mobile-nav-plantfinder:hover, #mobile-nav-plantfinder:active,
    #mobile-nav-viewcart:hover, #mobile-nav-viewcart:active,
    #mobile-nav-contact:hover, #mobile-nav-contact:active,
    #mobile-nav-giftcerts:hover, #mobile-nav-giftcerts:active,
    #mobile-nav-tshirts:hover, #mobile-nav-tshirts:active,
    #mobile-nav-giftcards:hover, #mobile-nav-giftcards:active {
        background-position: 0 -45px;
    }
}