@charset "utf-8";

/*
 ************************************************
	joinReleases index.css
    * Loaded after main.css contains the main menu
 ***********************************************/

:root {
    --topbar-height: 2rem;
}

nav,
ul {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* OR -webkit-flexbox; ?:: NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;
    /* NEW, Spec - Firefox 20+, Chrome, Opera 12.1 */
}

nav {
    align-items: center;
    width: 100%;
    height: var(--topbar-height);
    background-color: #000000;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

a,
a:active,
a:visited {
    color: #FFFFFF;
}

a:hover {
    color: #999999;
}

/* Main Title */
nav>div {
    margin: 0 7.5rem 0 0.75rem;
}

a.main-title {
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
}

nav>div>button {
    display: none;
}

/* Archives Menu */
nav>ul {
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Archives Menu Item
   Edit the file to change the svg fill color
*/
nav>ul>li {
    background-image: url(../img/separator.svg);
    background-repeat: no-repeat;
    background-position: left center;
    white-space: nowrap;
    font-size: 0.9rem;
    margin: 0;
    padding: 0 0.56rem 0 0.75rem;
}

nav>ul>li:first-child {
    background: none;
    padding-left: 0;
}

iframe {
    display: block;
    width: 100vw;
    height: calc(100vh - var(--topbar-height));
    margin: 0;
    padding: 0;
    border: none;
}

li.search-nav>a {
    background-image: url(../img/button_search.light.svg);
    /* Search icon svg size! */
    padding-right: 1.5rem;
}

/**********************************
	Phone
**********************************/
@media only screen and (max-device-width: 767px) {

    :root {
        --topbar-height: 2.75rem;
    }

    nav * {
        cursor: default;
    }

    nav {
        height: var(--topbar-height);
    }

    ul,
    iframe {
        height: calc(100vh - var(--topbar-height));
    }

    /* Main Title + Button ! */
    nav>div {
        display: -webkit-box;
        /* OLD - iOS 6-, Safari 3.1-6, BB7 */
        display: -moz-box;
        /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;
        /* TWEENER - IE 10 */
        display: -webkit-flex;
        /* OR -webkit-flexbox; ?:: NEW - Safari 6.1+. iOS 7.1+, BB10 */
        display: flex;
        /* NEW, Spec - Firefox 20+, Chrome, Opera 12.1 */
        width: 100vw;
        margin: 0 0.75rem;
    }

    /* Button ! */
    nav>div>button {
        display: block;
        flex-basis: 100%;
        background-image: url(../img/navbutton.svg);
        background-repeat: no-repeat;
        background-position: right;
        background-size: 2rem;
        background-color: transparent;
        border: none;
        margin-left: 1.5rem;
    }

    /* Archives Menu => full screen */
    nav>ul {
        -webkit-flex-direction: column;
        flex-direction: column;
        position: absolute;
        z-index: 1;
        top: var(--topbar-height);
        width: 100vw;
        background-color: #000000;
        opacity: 0.9;
        padding-top: 10vh !important;
        display: none;
    }

    nav>ul.open {
        display: block;
    }

    /* Archives Menu Item */
    nav>ul>li {
        background: none;
        margin: 0 0 5vh 5vh;
        padding: 0;
    }

    nav>ul>li>a {
        font-size: 1.5rem;
    }
}