/*
Responsive web design layout for fadden.com site.

Common page element IDs:
  masthead (site logo / title)
  topnav (top items, menu button); contents reduce to home/menu for XS
  sidenav (large: float on left; medium/small: "collapsed sidepanel" or toggle)
  main (main content, next to or below sidenav)
*/

* {
    box-sizing: border-box;
}

/*
 * Overall look and feel.
 */
html {
    /* always show scrollbar, so centered masthead doesn't shift */
    overflow-y: scroll;
}
body {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    padding: 0px;
    margin: 0px;
    background-color: #ffffff;
}

/*
 * Bits and pieces.
 */
.opener {
    font-size: larger;
    font-weight: bold;
}
.floatimg {
    float: left;
    margin-right: 5px;
}

/*
 * Give external links an icon, unless they're to fadden.com.
 *
 * http://stackoverflow.com/questions/18168286/how-can-i-style-external-links-like-wikipedia
 */
a[href ^= "http:"]:after, a[href ^= "https:"]:after, a[href ^= "telnet:"]:after {
    content: url(images/external_link.png);
    margin: 0 0 0 3px;
}
a[href *= "//www.fadden.com/"]:after {
    content: none;
    margin: 0;
}

/*
 * Display of keyboard shortcuts in the <kbd> element.
 */
kbd.key {
    border-radius: 5px;
    padding: 0px 2px 0;
    border: 1px solid black;
    background-color: #f7f7f7;
}

/*
 * ==========================================================================
 * Extra small devices (phones) - DEFAULT
 */

/*
 * Masthead.
 */
#masthead {
    /*display: block;*/
    background-color: #ffffff;      /* match page background */
    width: 65%;                     /* at most this much of screen */
    max-width: max-content;         /* don't expand past original size */
    margin: 15px auto 15px auto;    /* top right bottom left; auto centers it */
}
#masthead img {
    width: 100%;
    height: auto;
}

/*
 * Top navigation bar.  Home on the left, primary links next to it,
 * sidenav menu icon on the right for smaller screens.
 */
#topnav {
    border-style: none;
    border-width: thin;
    padding: 10px;
    background-color: #5f5f5f;
}

/*
 * Show nothing but HOME initially.  Expand the set as the screen widens.
 * inline-block seems to help keep the text and icon consistent when
 * expanding and collapsing (vs. inline).
 */
#topnav a {display:inline-block;}
#topnav a:not(:first-child) {display:none;}
#topnav a.icon {
    float: right;
    display: block;
}
.no-sidenav #topnav a.icon {
    display: none;      /* no sidenav, no icon */
}
#topnav button {
    float: right;
    display: block;
    color: #ffffff;
    background-color: #5f5f5f;
    text-decoration: none;
    padding: .2em 1em .2em 1em;
}

#topnav nav {
    text-align: left;
    padding: 0px;
}
#topnav nav a {
    color: #ffffff;
    background-color: #5f5f5f;
    padding: .2em 1em .2em 1em;
    text-decoration: none;
}
#topnav nav a:hover {
    border-style: none;
    color: #ffffff;
    background-color: #000000;
}

#topnav nav a.active {
    color: #8bc349;
}

/*
 * Side navigation bar.  Always visible on large screens, pops out when
 * the hamburger icon is clicked on smaller screens.
 */
#sidenav {
    display: none;
    width: 180px;
    margin: 0 8px 0 0;
    padding: 5px;
}
#sidenav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#sidenav li {
    padding: 0 0 1px 0;      /* top right bottom left */
}
#sidenav ul ul li {
    padding: 1px 0 0 10px;      /* top right bottom left */
}
#sidenav a {
    color: #ffffff;
    display: block;
    background-color: #5f5f5f;
    padding: 5px 5px 5px 8px;   /* top right bottom left */
    text-decoration: none;
}
#sidenav a:hover {
    color: #ffffff;
    background-color: #000000;
}
#sidenav li.active > a {
    color: #8bc349;
}

/*
 * Main content area.
 */
#main {
    margin: 8px;
    display: block;
}

/*
 * Footer.
 */
#footer {
    /* top margin gets eaten up by sidenav on short pages */
    clear: both;
    margin: 8px;
}

/*
 * ==========================================================================
 * Small devices (portrait tablets, large phones):
 * - Still too small to show topnav.
 */
@media only screen and (min-width: 600px) {
}

/*
 * ==========================================================================
 * Medium devices (landscape tablets):
 * - For top nav, want to show all links in the top nav bar, as well
 *   as the menu icon.
 */
@media only screen and (min-width: 768px) {
    #topnav a:not(:first-child) {display:inline-block;}

    #topnav nav {
        text-align: center;
    }
}

/*
 * ==========================================================================
 * Large devices (laptops/desktops):
 * - Show sidenav on the side.
 * - Don't show menu icon in the topnav bar.
 */
@media only screen and (min-width: 992px) {
    #sidenav {
        display: block;
        float: left;
    }

    #main {
        /* make room for sidenav */
        margin-left: 188px;
    }
    .no-sidenav #main {
        /* ...or not */
        margin-left: 8px;
    }

    #topnav a.icon {
        display: none;
    }
}