/* Hide any child menu items.  They will be displayed separately in each page. */
.MainMenu ul.AspNet-Menu li.AspNet-Menu-WithChildren ul
{
	display: none; 
}

/* Have the menu center itself on the screen */
.MainMenu ul.AspNet-Menu
{
    width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Make the menu items appear as buttons */
.MainMenu ul.AspNet-Menu li
{
    width: 130px;
    height: 40px;
    text-align: center;
    background-image: url(Images/ButtonBar3DOut.gif);
    background-repeat: no-repeat;
    margin-left: 5px;
    margin-right: 5px;
}

/* Within each menu item is a link or a span, depending on whether or not the MenuItem has */
/* defined it's NavigateUrl property.  Set the text properties. */
.MainMenu ul.AspNet-Menu li a,
.MainMenu ul.AspNet-Menu li span
{
    color: White;
    padding-top: 11px;
    padding-bottom: 10px;
    font-variant: small-caps;
}

/* Browsers that do not support the CSS hover pseudo-class, use JavaScript to dynamically */
/* change the menu item's li tag so it has the AspNet-Menu-Hover class when the cursor is */
/* over that li tag. See MenuAdapter.js (in the JavaScript folder). */
.MainMenu ul.AspNet-Menu li:hover, 
.MainMenu ul.AspNet-Menu li.AspNet-Menu-Hover,
.MainMenu ul.AspNet-Menu li a:hover,
.MainMenu ul.AspNet-Menu li span.Asp-Menu-Hover
{
    color: White;
    font-weight: bold;
    text-decoration: underline;
    background-image: url(Images/ButtonBar3DGlow.gif);
    background-repeat: no-repeat;
}

/* Use these settings for the "Selected" menu item. */
.MainMenu ul.AspNet-Menu li.AspNet-Menu-Selected,
.MainMenu ul.AspNet-Menu li.AspNet-Menu-ChildSelected
{
    background-image: url(Images/ButtonBar3DIn.gif);
    background-repeat: no-repeat;
    text-decoration: none;
}

/* Use these settings for the "Selected" menu item. */
.MainMenu ul.AspNet-Menu li.AspNet-Menu-Selected a,
.MainMenu ul.AspNet-Menu li.AspNet-Menu-Selected span,
.MainMenu ul.AspNet-Menu li.AspNet-Menu-ChildSelected a,
.MainMenu ul.AspNet-Menu li.AspNet-Menu-ChildSelected span
{
    color: White;
    font-weight: normal;
    padding-top: 12px;
}

/* This is for the menu along the left column of each page. */
.SubMenu ul.AspNet-Menu
{
    width: 150px;
    margin-top: 10px;
    margin-left: 24px;
}

/* Make the menu items appear as buttons */
.SubMenu ul.AspNet-Menu li
{
    width: 150px;
    height: 40px;
    margin-bottom: 8px;
    text-align: center;
    background-color: #F2F2F2;
    background-image: url(Images/ButtonColumn3DOut.gif);
    background-repeat: no-repeat;
    background-position: center;
}

/* Within each menu item is a link or a span, depending on whether or not the MenuItem has */
/* defined it's NavigateUrl property.  Set the text properties. */
.SubMenu ul.AspNet-Menu li a,
.SubMenu ul.AspNet-Menu li span
{
    color: White;
    padding-top: 11px;
    font-variant: small-caps;
    height: 25px;
}

/* Browsers that do not support the CSS hover pseudo-class, use JavaScript to dynamically */
/* change the menu item's li tag so it has the AspNet-Menu-Hover class when the cursor is */
/* over that li tag. See MenuAdapter.js (in the JavaScript folder). */
.SubMenu ul.AspNet-Menu li:hover, 
.SubMenu ul.AspNet-Menu li.AspNet-Menu-Hover,
.SubMenu ul.AspNet-Menu li a:hover,
.SubMenu ul.AspNet-Menu li span.Asp-Menu-Hover
{
    color: White;
    font-weight: bold;
    text-decoration: underline;
}

/* Use these settings for the "Selected" menu item. */
.SubMenu ul.AspNet-Menu li.AspNet-Menu-Selected,
.SubMenu ul.AspNet-Menu li.AspNet-Menu-ChildSelected
{
    background-image: url(Images/ButtonColumn3DIn.gif);
    background-repeat: no-repeat;
    background-position: center;
    text-decoration: none;
}

/* Use these settings for the "Selected" menu item. */
.SubMenu ul.AspNet-Menu li.AspNet-Menu-Selected a,
.SubMenu ul.AspNet-Menu li.AspNet-Menu-Selected span,
.SubMenu ul.AspNet-Menu li.AspNet-Menu-ChildSelected a,
.SubMenu ul.AspNet-Menu li.AspNet-Menu-ChildSelected span
{
    color: White;
    font-weight: normal;
    padding-top: 12px;
}