#main_nav {
width: 570px;
float: left;
background-image: url(images/main_nav_ul_bg.gif);
background-position: bottom left;
background-repeat: no-repeat;
padding-bottom: 5px;
}


#main_nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
border-left: 1px solid #523180;
}

#main_nav ul li {
display: block;
float: left;
text-align: center;
min-width: 76px;
}


/*
There are fixed widths on the main nav links
these will need to be adjusted if the top level nav titles change.
There is a additional class of larger for wider nav titles if needed.
For the odd pixel difference, you can simply adjust the additional class of 
first to nick one or two pixels off the overall length.
*/

#main_nav ul li.larger {
min-width: 94px;
}

html>body #main_nav ul li.first  {
width: auto;
min-width: 77px;
}


#main_nav ul li a {

display: block;
width: 731px;
padding-top: 4px;
padding-bottom: 3px;
border-right: 1px solid #523180;
text-align: left;
font-family: arial, courier, times;
font-size: 110%;
background-color: #88AF42;
text-decoration: none;
border-bottom: 1px solid #523180;
color: #ffffff;
}

html>body #main_nav ul li a {
font-size: 110%;
width: auto;
min-width: 75px;

}

#main_nav ul li a.larger {
width: 97px;
}

html>body #main_nav ul li a.larger {
width: auto;
min-width: 93px;

}

#main_nav ul li a:hover {
background-color: #523180;
font-weight: bold;
}

#main_nav ul li.selected a {
background-color: #523180;
font-weight: bold;
}

#main_nav ul li.first a {
width: 75px;
}

html>body #main_nav ul li.first a {
width: auto;
min-width: 76px;
}