@import "variables.css";

#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
    margin: 0;
    padding: 0;
    position: relative;
    border: 0;
    box-sizing: content-box;
}

#cssmenu {
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-bottom: 2px solid var(--marine);
    width: auto;
}

    #cssmenu ul:after {
        content: '';
        display: block;
        clear: both;
    }

    #cssmenu a {
        color: #696969;
        display: inline-block;
        font-family: Helvetica, Arial, Verdana, sans-serif;
        font-size: 18px;
        line-height: 59px;
        padding: 0 20px;
        text-decoration: none;
    }

    #cssmenu ul {
        list-style: none;
    }

    #cssmenu > ul {
        float: left;
    }

        #cssmenu > ul > li {
            float: left;
        }

            #cssmenu > ul > li > a {
                color: #000;
                font-size: 14px;
            }

            #cssmenu > ul > li:hover:after {
                content: '';
                display: block;
                width: 0;
                height: 0;
                position: absolute;
                left: 50%;
                bottom: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 10px solid var(--marine);
                margin-left: -10px;
                margin-top: 10px;
            }

            #cssmenu > ul > li:first-child > a {
                background-color: #fff;
                border-radius: 5px 0 0 0;
                -moz-border-radius: 5px 0 0 0;
                -webkit-border-radius: 5px 0 0 0;
            }

            #cssmenu > ul > li.active:after {
                content: '';
                display: block;
                width: 0;
                height: 0;
                position: absolute;
                left: 50%;
                bottom: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 10px solid var(--marine);
                margin-left: -10px;
            }

            #cssmenu > ul > li.active > a {
                -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
                -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
                box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
            }

            #cssmenu > ul > li:hover > a {
                -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
                -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
                box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
            }

    #cssmenu .has-sub {
        z-index: 1;
    }

        #cssmenu .has-sub:hover > ul {
            display: block;
        }

        #cssmenu .has-sub ul {
            display: none;
            position: absolute;
            width: 200px;
            top: 100%;
            right: 0;
        }

            #cssmenu .has-sub ul li {
                *margin-bottom: -1px;
            }

                #cssmenu .has-sub ul li a {
                    background: var(--marine);
                    border-bottom: 1px dotted var(--seastone);
                    filter: none;
                    font-size: 14px;
                    display: block;
                    line-height: 120%;
                    padding: 10px;
                    color: var(--soft-white);
                }

                #cssmenu .has-sub ul li:hover a {
                    background: var(--seastone);
                }

        #cssmenu .has-sub .has-sub:hover > ul {
            display: block;
        }

        #cssmenu .has-sub .has-sub ul {
            display: none;
            position: absolute;
            left: 100%;
            top: 0;
        }

            #cssmenu .has-sub .has-sub ul li a {
                background: #5d9c33;
                border-bottom: 1px dotted #90ce67;
            }

                #cssmenu .has-sub .has-sub ul li a:hover {
                    background: var(--marine);
                }