/* CSS style for the top navigation bar */

/* This makes the "absolute" placed usertools bar not overlap the menu */
#dokuwiki__usertools {margin: 23px 0 0 0 !important;}

body {
    font-family: Helvetica, Arial, sans-serif;
    /*background-color: rgb(236, 236, 236);*/
    color: rgb(19, 51, 61);
    width: 100% !important;
    margin: 0 auto !important;
}

p.navbar {
    font-size: 18px;
    line-height: 1.5;
    font-weight: bold;
    color: rgb(51, 51, 51);
    max-width: 55em;
}

p.navbar a {
    color: rgb(41, 183, 206);
    text-decoration: none;
}

strong.navbar {
    color: rgb(41, 183, 206);
}

.navbar {
    font-size: 12px;
    background-color: rgb(34, 34, 34);
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    margin: 0em 0 0em;
    padding: 0 1em;
    height: 44px; /* Menu height. This is what hides wrapped items in the second line */
    overflow: hidden; /* Don't show anything outside the .navbar */
}

.navbar ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    max-height: 88px; /* Menu height x 2 */
    position: relative; /* Position the menu button relative to this item */
}

.navbar li {
    display: inline-block;
}

.navbar a {
    display: inline-block;
    padding: 0 1em;
    color: rgb(236, 236, 236);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 44px; /* Menu height */
    height: 44px; /* Menu height */
}


.navbar a:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.navbar li:last-child { /* The menu button */
    position: absolute; /* Move the menu button out of flow */
    right: 0;
    bottom: 44px; /* Move upwards, the same distance as the menu height */
    background-image: linear-gradient(to right, rgba(34, 34, 34, 0) 0, rgba(34, 34, 34, 1) 2em);
/*    background-image: linear-gradient(to right, rgba(19, 51, 61, 0) 0, rgba(19, 51, 61, 1) 2em);*/
    padding-left: 3em;
}

.navbar li:nth-last-child(2) { /* The close button */
    display: none;
}

.navbar#menu:target {
    height: auto;
    padding: 0;
}

.navbar#menu:target ul {
    max-height: none;
}

.navbar#menu:target li {
    display: block;
}

.navbar#menu:target a {
    display: block;
    padding: 0 2em;
    background-color: rgba(255, 255, 255, 0.05);
}

.navbar#menu:target a:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.navbar#menu:target li:not(:first-child) {
    margin-top: 2px;
}

.navbar#menu:target li:last-child {
    display: none;
}

.navbar#menu:target li:nth-last-child(2) {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    border-left: 2px solid rgb(34, 34, 34);
}

/* lighter background for bottom nav menu */
.navbar.bottom {
    background-color: rgb(25, 50, 25);

    position: fixed;
    width: 100%;
    bottom: 0;
}

/* green hover effect for internal links */
.navbar.bottom a:hover {
    background-color: rgba(153, 255, 102, 0.08);
}



/*if the screen width is small, directly display only open menu*/
@media only screen and (max-device-width: 680px), only screen and (max-width: 680px) {
/*   just an indicator for testing*/
/*    body {background: red;}*/
    .navbar {
        height: auto;
        padding: 0;
    }

    .navbar ul {
        max-height: none;
    }

    .navbar li {
        display: block;
    }

    .navbar a {
        display: block;
        padding: 0 2em;
        background-color: rgba(255, 255, 255, 0.05);
    }

    .navbar li:not(:first-child) {
        margin-top: 2px;
    }

    .navbar li:last-child {
        display: none;
    }
}