/* styles for css driven flyout menu - supports only one level of children */
/* styles for css driven flyout menu - supports only one level of children */

#menu {
    float: left;
    padding: 0px 0;
    /*margin:3px 0 0 0; */
    margin: 0;
    list-style: none;
    position: relative;
    width: 184px;
}

    #menu ul {
        padding: 4px 0 4px 0;
        margin: 0;
        list-style: none;
        width: 189px;
        background-color: #e1e1e1;
        height: auto;
        position: absolute;
        left: -9999px;
        top: 0;
        border: 1px solid #888888;
        box-shadow: 3px 3px 3px #888888;
    }

    #menu table {
        border-collapse: collapse;
        width: 0;
        height: 0;
        margin: -1px -10px;
    }

    #menu li {
        float: left;
        padding-left: 4px;
        /* margin-bottom:1px; */
    }


        #menu li a {
            display: block;
            float: left;
            /**/ width: 184px;
            height: 28px;
            color: #548dd4;
            line-height: 24px;
            font-size: 10pt;
            text-decoration: none;
            text-indent: 10px;
        }

        #menu li:hover {
            position: relative;
            /*position:static;*/
            float: left;
        }

        #menu li a:hover {
            position: relative;
            background-color: #e1e1e1;
            /*color:#fff;*/
        }

        #menu li:hover > a {
            /*background-color:#7a7b7e;*/
            color: #fff;
            background: linear-gradient(to bottom, #7a7b7e 0%,#7a7b7e 100%); /* W3C */
        }

    #menu ul li a {
        border-bottom: 0;
        background: #e1e1e1;
        border: 0;
        display: inline-block;
    }



    #menu :hover ul,
    #menu :hover ul :hover ul,
    #menu :hover ul :hover ul :hover ul {
        left: 178px;
    }

        #menu :hover ul ul,
        #menu :hover ul :hover ul ul {
            left: -9999px;
        }

    #menu ul li:hover > a {
        background-color: #e1e1e1;
    }

    /* make child wider than parent */
    #menu li ul {
        white-space: nowrap;
        display: inline-block;
        width: 250px;
    }

        #menu li ul li a {
            /*border:1px solid #fff;
    height:50px;*/
        }

            #menu li ul li a:hover {
                /*border:1px solid #1b5e8c;*/
                color: #fff;
                width: 240px;
            }



/* Too narrow to support three columns */
@media all and (max-width: 640px) {
    #menu {
        float: left;
        padding: 0;
        /*margin:3px 0 0 0; */
        margin: 0;
        list-style: none;
        position: relative;
        width: 140px;
    }

        #menu ul {
            padding: 4px 0 4px 0;
            margin: 0;
            list-style: none;
            width: 189px;
            background-color: #e1e1e1;
            height: auto;
            position: absolute;
            left: -9999px;
            top: 0;
            border: 1px solid #888888;
            box-shadow: 3px 3px 3px #888888;
        }

        #menu table {
            border-collapse: collapse;
            width: 0;
            height: 0;
            margin: -1px -10px;
        }

        #menu li {
            padding-left: 0px;
        }

            #menu li a {
                width: 145px;
            }

            #menu li:hover {
                position: relative;
                /*position:static;*/
                float: left;
            }

            #menu li a:hover {
                position: relative;
                background-color: #e1e1e1;
                /*color:#fff;*/
            }

            #menu li:hover > a {
                background-color: #e1e1e1;
                color: #fff;
                background: linear-gradient(to bottom, #676767 0%,#4c4c4c 100%); /* W3C */
            }

        #menu ul li a {
        }


        #menu :hover ul,
        #menu :hover ul :hover ul,
        #menu :hover ul :hover ul :hover ul {
            left: 130px;
        }

            #menu :hover ul ul,
            #menu :hover ul :hover ul ul {
                left: -9999px;
            }

        #menu ul li:hover > a {
            background-color: #e1e1e1;
        }

        /* make child wider than parent */
        #menu li ul {
            width: 164px;
            margin-left: 17px;
        }

            #menu li ul li a {
                width: 165px;
            }

                #menu li ul li a:hover {
                    /*border:1px solid #1b5e8c;*/
                    color: #fff;
                }
}