/* Top Menu */

#top-menu
{
	height: 35px;	
	font: bold 14px Arial, Helvetica, sans-serif;
	background: url(/Images/LightGreyMenuBckgrd.gif);
	width: 100%;
}

#top-menu a
{
	color: #fff;
	text-decoration: none; 
	padding-right: 15px;
}

#top-menu a:hover
{
	text-decoration: underline;
}

#top-menu table
{
	width: 100%;
}

#top-menu-separator
{
	background-image: url(/Images/ESS/btn_sep2.gif);
	width: 2px;
	height: 31px;
	background-repeat: no-repeat;
}

/* don't know why we still have to have this but IE 6 doesn't work w/ out it */
#top-menu-dropdown, #top-menu-dropdown ul
{
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

#top-menu-dropdown-item
{
    display: inline-block;
    position: relative;
    text-align: center;
    line-height: 1.3em;
    vertical-align: middle;
    width: 9em;
}

#top-menu-dropdown-item a
{
    color: White;
    font-weight: bold;
}

#top-menu-dropdown-item ul
{
    list-style: none;
    list-style-type: none;
    padding: 0;
    border-bottom: solid 1px #990000;
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0 0 0 -999em;
    text-align: center;

    /* TODO: new - will this work? */
    width: 10em;
}

#top-menu-dropdown-item ul li
{
    float: none;
    list-style: none;
    text-align: left; 
    padding-left: 5px; 
}

#top-menu-dropdown-item ul li a
{
    color: Black;
    font-weight: normal;
}

#top-menu-dropdown-item:hover 
{
    visibility: visible;
}

#top-menu-dropdown-item:hover ul, #top-menu-dropdown-item.echoHover ul
{
    margin-left: 0;
    background-color: #F3F3F3;
}

#top-menu-dropdown-item ul li:hover a, #top-menu-dropdown-item ul li.echoHover a
{
    background-color: #990000;
    text-decoration: none;
    color: White;
}

/* Bottom Menu */

#footer-menu table
{
	width: 80%;
	border: 0;
}

#footer-menu a
{
	font-family: arial;
	font-size: 12px;
	font-weight: normal;
	color: #333333;
	text-decoration: none;
}

#footer-menu a:hover, #footer-menu-separator 
{
	color: #CC0000;
}