#Header #MainMenu
{
    background:#728335 url('/images/main-menu.gif') repeat-x bottom left;
    border-bottom:solid 1px #8A9549;
    border-top:solid 1px #c3c68d;
    font-size:13px;
    position:relative;
    text-align:center;
    zoom:1;
    height:33px;
}

/* Top menu items */
#Header #MainMenu ul
{
    float:right;
    position:relative;
    right:50%;
}

#Header #MainMenu ul li
{
    float:left;
    list-style-type:none;
    margin:0;
    position:relative;
    left:50%;
}

#Header #MainMenu ul li a
{
    display:block;
    border-bottom:0;
    border-right:solid 1px #788830;
    color:#FFF;
    padding:10px 11px;
}

/* Only target the top level anchors of the menu, otherwise you 
    have to override the :first-child at a lower level to reset it. */
#Header #MainMenu > ul > li:first-child > a
{
    border-left:solid 1px #788830;
}

#Header #MainMenu > ul > li:first-child ul
{
    left:0;
}

#Header #MainMenu ul li:hover > a
{
    background:#98a748 url('/images/main-menu-hover.gif') repeat-x bottom left;
    color:#FFF;
    text-decoration:none;
}

#Header #MainMenu ul li:hover .HoverArrow
{
    background: transparent url('/images/icons/main-menu-selected-arrow.png') no-repeat bottom center;
    z-index: 11;
    width: 100%;
    display: inline-block;
    position: absolute;
    bottom: -7px;
    left: 0;
    height: 6px;
}

/* Sub-menu items */
#Header #MainMenu ul ul
{
    background:#FFF none;
    border-bottom:1px solid #D9CBA8;
    border-left:1px solid #D9CBA8;
    border-right:1px solid #D9CBA8;
    border-top:solid 1px #CCCC99;
    box-shadow: 3px 3px 5px -3px rgba(0, 0, 0, 0.75);
    color:#8A2529;
    display:none; /* Sub menus are hidden by default */
    left:-1px;
    position:absolute;
    right:auto;
    top:33px;
    z-index:10;
}

#Header #MainMenu ul ul li
{
    clear:left;
    left:auto; /* Resets the left:50% on the parent li */
    margin:0;
    width:100%;
}

#Header #MainMenu ul li:hover ul
{
    display:block; /* Display the sub menu */
}

#Header #MainMenu ul ul li a
{
    border-bottom:1px solid #F5F3E6;
    border-right:0;
    color:#8A2529;
    padding:10px 0;
    margin:0 11px;
    min-width:123px;
    text-align:left;
    white-space:nowrap;
}

#Header #MainMenu ul ul li:hover a
{
    background:#F5F3e6 none; /* The none here is to override the background image on the parent li:hover style */
    border:0;
    color:#8A2529; /* Overrides the white text of the parent li:hover style */
    padding:10px 11px;
    margin:0 0 1px;
}