/*
 * The main menu at the top
 */

#main-menu {
    background-image: none;
    background: $background-color-dark;
    padding: 0;
}

.sm-dox {
    // :not(:last-child) -> do not style search box
    &> li:not(:last-child) > a {
        background-image: none;
        text-shadow: none;
        color: white;
        font-weight: normal;
        letter-spacing: 1px;
        font-size: 11pt;
        text-transform: uppercase;
    }

    &> li:not(:last-child) > a:hover,
    &> li:not(:last-child) > a.highlighted {
        background-color: $primary-color;
    }

    a span.sub-arrow {
        // this sets the color of the arrow
        border-color: white transparent transparent;
    }

    ul {
        // sub menus
        border: none;
        @include border-radius(0 !important);
        padding: 0;
        background: $background-color-dark;
        @include box-shadow(0 0 4px rgba(0,0,0,0.35), 0 0 8px rgba(0,0,0,0.2));
        
        a {
            background: inherit;
            color: white;
            font-weight: normal;
            letter-spacing: 1px;
            font-size: 11pt;
        }

        a:hover {
            background: $primary-color;
            color: white;
            font-weight: normal;
            letter-spacing: 1px;
            font-size: 11pt;
        }

        a.highlighted {
            background: $primary-color;
            color: white;
            font-weight: normal;
            letter-spacing: 1px;
            font-size: 11pt;
        }

        a span.sub-arrow {
            /* this sets the color of the arrow */
            border-color: white transparent transparent;
        }
    }
}