/* 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: 0;
        border: 0;
        display: block;
        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;
        height: 18px;
        width: 93px;
        text-align: center;
        padding-top: 5px;
        text-decoration: none;
        background-image: url(../images/home/menubut.png);
}

.menu a
{
 text-decoration: none;
 color: #316192;
 font-size: 10px;
 font-weight: bold;

}

.menu a:hover
{
        color: #ffcc00;
}

.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;
}

.menu li:hover {
 background-image: url(../images/home/menubutover.png);
}

.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 -- */