.TopMenu ul.AspNet-Menu
{
    width: 45em;
}

.TopMenu ul.AspNet-Menu ul
{
    width: 10.5em;
    left: 0;
    top: 100%;
}

.TopMenu ul.AspNet-Menu ul ul
{
    top: -0.3em;
}

.TopMenu li.AspNet-Menu-Leaf a, /* leaves */
.TopMenu li.AspNet-Menu-Leaf span
{
    background-image: none !important;
}

.TopMenu ul.AspNet-Menu li a
{
    color: #ffffff;
    padding: 6px 15px 6px 15px;
    text-align: center;
}

.TopMenu ul.AspNet-Menu li span
{
    cursor: pointer;
    color: #ffffff;
    padding: 6px 25px 6px 15px;
    background: transparent url(../Images/menu_popup.gif) right center no-repeat;
    text-align: center;
}

.TopMenu ul.AspNet-Menu li:hover, 
.TopMenu ul.AspNet-Menu li.AspNet-Menu-Hover
{
    background-image: url(../Images/menu_bkg_sel.gif);
}

.TopMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul
{
	border: solid 1px #6FADD4;
	background-color: #6FADD4;
}

.TopMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li a
{
    color: #ffffff;
    padding: 6px 15px 6px 15px;
    text-align: left;
}

/* This rule establishes the width of menu items below the top tier.  This allows the top tier menu items */
/* to be narrower, for example, than the sub-menu items. */
/* This value you set here should be slightly larger than the left margin value in the next rule. See */
/* its comment for more details. */
.TopMenu ul.AspNet-Menu ul li
{
    text-align:left;
    width: 10.5em;
}

/* Third tier menus have to be positioned differently than second (or top) tier menu items because */
/* they drop to the side, not below, their parent menu item. This is done by setting the last margin */
/* value (which is equal to margin-left) to a value that is slightly smaller than the WIDTH of the */
/* menu item. So, if you modify the rule above, then you should modify this (below) rule, too. */
.TopMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li ul li ul
{
    margin: 1.0em 0 0 10.35em;
}