/* remove all list stylings */
.menu, .menu ul {
        margin: 0;
        padding: 0;
        border: 0;
        /*list-style-type: none;*/
        display: block;
}


.menu2, .menu2 ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        display: block;
}

.menu li {
        margin: 0;
        padding-right: 10px;
        padding-top: 3px;
        border: 0;
        display: block;
        height: 19px;
        border-bottom: 1px solid #6a7b92;
        text-align: right;

/*float: left;         move all main list items into one row, by floating them */
        position: relative;        /* position each LI, thus creating potential IE.win overlap problem */
        z-index: 5;                /* thus we need to apply explicit z-index here... */
        /*list-style-position: outside; */
}

.menu li:hover {
        z-index: 10000;        /* ...and here. this makes sure active item is always above anything else in the menu */
        white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
                                                        see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
        background-color: #475d7d;
        color: #000000;
}

.menu2 li {
        margin: 0 0 0 0;
        padding: 0;
        border: 0;
        display: block;
        position: relative;        /* position each LI, thus creating potential IE.win overlap problem */
        list-style-position: outside;
}

.menu2 li:hover {
        background-color: #ffcc00;
        color: #000000;
}

.menu li li {
        float: none;/* items of the nested menus are kept on separate lines */
                background-color: #f26522;
                width: 150px;
                padding: 5px;
                color: #ffffff;
                border-bottom: 1px solid #ffffff;
}

.menu ul {
        visibility: hidden;        /* initially hide all submenus. */
        position: absolute;
        z-index: 10;
        left: 0;        /* while hidden, always keep them at the top left corner, */
        top: 0;                /*                 to avoid scrollbars as much as possible */
        border-top: 1px solid #ffffff;
}

.menu li:hover>ul {
        visibility: visible;        /* display submenu them on hover */
        top: 100%;        /* 1st level go below their parent item */
}

.menu li li:hover>ul {        /* 2nd+ levels go on the right side of the parent item */
        top: 0;
        left: 100%;
}

/* -- float.clear --
        force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
        content: ".";
        height: 0;
        display: block;
        visibility: hidden;
        overflow: hidden;
        clear: both;
}
.menu2:after, .menu2 ul:after {
        content: ".";
        height: 0;
        display: block;
        visibility: hidden;
        overflow: hidden;
        clear: both;
}
.menu, .menu ul {        /* IE7 float clear: */
        min-height: 0;
}
.menu2, .menu2 ul {        /* IE7 float clear: */
        min-height: 0;
}


/* -- float.clear.END --  */

/* -- sticky.submenu --
        it should not disappear when your mouse moves a bit outside the submenu
        YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
        if you do it, make sure you 110% know what you do */

/* == WEBSITE TOOLKIT CHANGES ==
removed 10px from top padding, removed -10px from top margin
== */
.menu ul {
        background-image: url(empty.gif);        /* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
        padding: 0 30px 30px 30px;
        margin: 0 0 0 -30px;
        /*background: #f00;*/        /* uncomment this if you want to see the "safe" area.
                                                                you can also use to adjust the safe area to your requirement */
}
.menu ul ul {
        padding: 30px 30px 30px 10px;
        margin: -30px 0 0 -10px;
}
/* -- sticky.submenu.END -- */