#nav-line {
    background-color: #e2e2e2;
    position: relative;

    @media screen and (min-width: 62.5em) {
        @include size(width, 975px);
        margin: auto;
    }

    #show-menu {
        display: block;
        float: left;
        @include size(line-height, 13px);
        @include size(padding, 18px 13px);
        color: #0c7076;
        @include size(font-size, 11px);
        @include mono;

        .long {
            display: none;

            &:after {
                @include size(padding-left, 10px);
                content: url("/static/img/arrow-gray.png");
                vertical-align: top;
            }
        }

        @media screen and (min-width: 20em) {
            .long { display: inline; }
            .short { display: none; }
        }

        @media screen and (min-width: 53em) {
            display: none;
        }
    }

    ul#menu {
        list-style: none;
        padding: 0;
        margin: 0;

        display: none;
        position: absolute;
        @include size(top, 49px);
        left: 0;
        @include size(right, 10px);
        z-index: 400;

        @media screen and (min-width: 24em) {
            right: auto;
        }

        @media screen and (min-width: 53em) {
            display: block !important;
            position: static;
            @include size(margin-left, 6px);
        }

        li.menu {
            background-color: #e2e2e2;

            @media screen and (min-width: 53em) {
                float: left;
            }

            a.menu {
                display: block;
                @include size(line-height, 13px);
                @include size(padding, 18px 12px 15px);
                @include size(border-bottom, 3px solid #e2e2e2);
                color: #0c7076;
                @include size(font-size, 11px);
                @include mono;
            }

            a.hidden-box-trigger:hover {
                border-bottom-color: white;
            }
        }
    }

    #lang-menu {
        display: block;
        float: right;

        background: #f7f7f7;
        @include mono;

        @media screen and (min-width: 15em) {
            position: relative;
        }

        #lang-button {
            @include size(padding-left, 25px);
            @include size(padding-right, 20px);

            display:block;
            @include size(line-height, 17px);
            @include size(padding-top, 16px);
            @include size(padding-bottom, 16px);

            @include size(font-size, 10px);
            color: #717171;

            .label {
                display: none;

                @media screen and (min-width: 62.5em) {
                    display: inline;
                }

                &:after {
                    @include size(padding-left, 10px);
                    content: url("/static/img/arrow-gray.png");
                    vertical-align: top;
                }
            }

            .lang-flag {
                @include size(font-size, 13px);
                @include size(line-height, 15px);
            }
        }

        #lang-menu-items {
            z-index: 9999;

            button {
                @include mono;
                display: none;
                background: #f7f7f7;
                color: #6f6f6f;
                cursor: pointer;
                width: 100%;
                margin: 0;
                @include size(padding, 10px 0);

                @media screen and (min-width: 62.5em) {
                    @include size(padding, 5px 0);
                }

                border-width: 0;
                @include size(border-bottom, 1px solid #ddd);

                @include size(font-size, 13px);

                &.active {
                    color: #000;
                }
            }
        }

        &:hover, &.hover {
            #lang-menu-items {
                position: absolute;
                padding: 0;
                left: 0;
                right: 0;

                @media screen and (min-width: 15em) {
                    left: auto;
                    @include size(width, 180px);
                    @include size(top, 49px);
                }
                @media screen and (min-width: 62.5em) {
                    width: 100%;
                }

                button {
                    display: block;
                }
            }
        }
    }
}