#logo {
    height: 4.7em;
    overflow: hidden;
    display: inline-block;
    float: left;

    img {
        height: 4.7em
    }
}
body.logged_in #logo {
    height: 2.7em;

    h1 {
        text-indent: -900em;
    }
    img {
        height: 2.7em
    }
}

/* top navigation */
#header #topnav {
    right: 2em;
    top: 0;
}
#topnav {
    font-size: $small;
    color: #969ba2;

    a {
        color: #969ba2;
        text-decoration: none;
        &:hover, &:focus {
            text-decoration: underline;
        }
    }
}
.language_switch {
    padding: 0 0.7em;
}

// navigation
#nav {
    clear: none;
    font-size: $large;
    text-align: right;
    padding-top: 1.5em;
    font-weight: bold;
    color: contrast-color($header-color, $black, white);

    body.logged_in & {
        padding-top: 0.2em;
        font-weight: normal;

        .hlist > ul > li > a {
            height: 2em;
            padding-top: 0.2em;
        }
    }
}

#nav_dummy {
    display: none !important;
}
#user_menu {
    display: inline-block;
    border-left: 1px solid $header-color2;
}

@mixin header-list {
    display: block;
    font-size: $large;
    background-color: $header-color2;
    margin: 0;
    padding: 0.2em 0;

    li {
        a {
            display: block;
            color: contrast-color($header-color2, $black, white);
            text-decoration: none;
            padding: 0;
        }
        a:hover, a:focus, &.current a {
            color: contrast-color($header-color2, $fg1, #c1c4c9);
        }
    }
    > li {
        padding: 0.2em 0.1em 0.1em;
        font-size: $large;
        line-height: 1.7;
        display: block;

        border-bottom: 1px solid darken($header-color2, 10%);
        border-top: 1px solid lighten($header-color2, 10%);

        &:first-child {
            border-top: none;
            padding-top: 0.1em;
        }
        &:last-child {
            border-bottom: none;
        }
        > a {
            font-weight: bold;
        }
    }
    .children {
        margin: 0.5em 0 0.5em 0.8em;
        padding: 0;
        display: block;
        font-weight: normal;

        li {
            display: block;
        }
    }
}

a.show_me {
    background-position: right -350px;
    padding-right: 1.5em;

    #topnav & {
        background-position: right -352px;
    }
    #user_menu & {
        background-position: right -348px;
        padding: 0 1.5em 0 1.2em !important;
        line-height: 1.5;
    }
}

#mobile-menu-box {
    #mobile-main-menu-button {
        &:after {
            // reset
            border: none;
            width: auto;
            height: auto;

            margin-left: 0.4em;
            content: "\f102";
            font-family: "adhocracy_icons";
            display: inline-block;
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
        }
    }
    #mobile-user-menu-button {
        // reset
        background: none;
        padding-right: 0;
    }
    #mobile-main-menu-button,
    #mobile-login-button,
    #mobile-user-menu-button {
        display: inline-block;
        color: contrast-color($header-color, $black, white);
        text-decoration: none;
        padding: 1em 0.8em 0 0.8em;
        height: 3.5em;
        line-height: 1.5;

        body.logged_in & {
            height: 2em;
            padding-top: 0.2em;
        }

        &:hover, &:focus, &.less {
            background-color: $header-color2;
            text-decoration: none;
        }
    }
}

@include mobile {
    #nav #nav_login,
    #nav #user_menu,
    #nav .menu {
        display: none;
    }
    #nav .menu,
    #nav #mobile-user-menu {
        clear: both;
    }
    #nav .menu > ul,
    #nav > #mobile-user-menu {
        @include header-list;
        text-align: left;

        > li {
            line-height: 2;
            padding: 0 0.5em;
        }
    }
    #mobile-menu-box {
        line-height: 3.5em;

        body.logged_in & {
            line-height: 2em;
            padding-top: 0;
        }
    }
}
@include desktop {
    #nav {
        .hlist {
            display: block !important;  // may be overwritten by javascript
        }
        .hlist > ul {
            display: block;
            margin: 0;
        }

        .hlist > ul > li {
            margin: 0 0 0 1px;
            position: relative;

            a {
                color: contrast-color($header-color, $black, white);
                text-decoration: none;
                display: block;
            }

            > a {
                padding: 1em 0.8em 0 0.8em;
                height: 3.5em;
            }

            &.current {
                background-color: $header-color2;
                @include background-image(linear-gradient(to bottom, darken($header-color2, 1%), lighten($header-color2, 4%)));

                > a {
                    color: contrast-color($header-color2, $fg1, #c1c4c9);
                }
            }
            // FIXME not accessible
            &:hover {
                background-color: lighten($header-color2, 4%);
                @include background-image(linear-gradient(to bottom, lighten($header-color2, 5%), $header-color2));

                > a {
                    color: contrast-color(lighten($header-color2, 4%), $fg1, $bg1);
                }
            }
        }
        .hlist > ul > li > ul.children {
            @include header-list;
            display: none;
            position: absolute;
            min-width: 13em;
            text-align: left;
            right: 0;
            z-index: 100;
            padding: 1.3em;
        }
        #mobile-user-menu,
        #mobile-menu-box {
            display: none;
        }
    }
    // FIXME not accessible
    #nav .hlist > ul > li:hover > ul.children {
        display: block;
    }
}
