body	{font-family:Helvetica,Futura,sans-serif;margin:2px;background-color:#F9F9F9;}
html * {max-height:1000000px; -moz-text-size-adjust:none;}

.navBar {
    background-color: #00ffff;
    min-width: 100%;
}


.wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 860px;
    padding-left: 2%;
    padding-right: 2%;
}

nav ul {
    display: flex;
    justify-content: flex-start;
    list-style-type: none;
    padding-left:0;
}
nav ul a {
    color: black;
    text-decoration: none;
    font-size:130%;
    padding:0;padding-right:2em;
    white-space: nowrap;
}
nav ul a:hover {
    color: brown;
}
nav li {
    display: inline-block;
}
nav #menu-toggle {
    display: none;
}
nav .label-toggle {
    display: none;
}
nav .wrapper {
    align-items: left;
    display: flex;
    justify-content: flex-start;
}
nav .extra_menu {
    display: none;
}
section .extra_main {
    display: block;
    float: right;
    margin: -0.5em 1em 0 0;
}
section .extra_main a {
    text-decoration: none;
}


@media screen and (max-width: 720px) {
    nav ul {
        background-color: #F9F9F9;
        display: block;
        height: 0;
        list-style-type: none;
        opacity: 0;
        text-align: left;
        padding-left: 0;
        width: 100%;
        visibility: hidden;
    }
    nav li {
        border-bottom: 1px solid gray;
        color: #53354A;
        display: block;
        padding-top: 0.5em;
        padding-bottom:0.5em;
    }
    nav ul li:last-child {
        border-bottom: 5px solid #00ffff;
    }
    nav #menu-toggle:checked ~ ul {
        opacity: 1;
        height: 100%;
        visibility: visible;
    }
    nav .label-toggle {
        cursor: pointer;
        display: block;
        float: left; 
        font-size:140%;
        font-weight:normal;
        width: 1em;
        margin-left:0.25em;
        margin-top:0.25em;
        background: linear-gradient(
            to bottom, 
            black, black 15%, 
            #00FFFF 15%, #00FFFF 40%, 
            black 40%, black 55%, 
            #00FFFF 55%, #00FFFF 80%, 
            black 80%, black 95%,
            #00FFFF 95%, #00FFFF 100%
            );
    }
    nav .extra_menu {
        display: block;
        float: right;
        padding: 0.5em 1em 0 0;
    }
    nav .extra_menu a {
        color: black;
        text-decoration: none;
    }

    nav .wrapper {
        display: block;
        padding:0;
    }

    section .extra_main {
        display: none;
    }

}

header {
    padding: 0.5em 0 0.5em 0;
}
footer {
    font-size:80%;
    text-align:right;
    margin: 1em 0 0 0;
    border-top: solid 1px gray;
}

img.logo {height:100px; width:189px; padding:0; border:0; margin:0;}
div.slogan {font-weight:bold;font-size:180%;padding:0;padding-right:0.5em;padding-left:1em;}
@media screen and (max-width: 720px) {
    img.logo {height:50px; width:95px;}
    div.slogan {font-weight:normal;font-size:100%;}
}