#nav {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    background: #959899;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight:bold;

}

    #nav li {
        position: relative;
        display: inline;
        z-index: 123;
    }

        #nav li a.active {
            background: rgb(0,71,111);
        }

    #nav a {
        display: inline-block;
        padding: 7px 20px;
        color: #fff;
        text-decoration: none;
    }

    #nav ul {
        position: absolute;
        /*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
        left: -9999px;
        margin: 0;
        padding: 0;
        text-align: left;
    }

        #nav ul li {
            display: block;
        }

    #nav li:hover ul {
        left: 0;
    }

    #nav li:hover a {
        text-decoration: none;
        background: rgb(0,71,111);
    }


    #nav li:hover ul a {
        text-decoration: none;
        background: #959899;
    }

        #nav li:hover ul a:hover {
            text-decoration: none;
            background: rgb(0,71,111);
        }

    #nav ul a {
        white-space: nowrap;
        display: block;
        border-bottom: 1px solid #ccc;
    }

.slicknav_menu {
    display: none;
}

@media screen and (max-width: 40em) {
    .js #menu {
        display: none;
    }

    .js .slicknav_menu {
        display: block;
    }
}