#nav
{
  position: absolute;
  top: 150px;/*height of header background image*/
  right: 20px;/*10px*2 to clear both the shadow and the curved corner*/
}

#nav ul
{
  list-style: none outside none;/*display li's as text, i.e. no bullets, etc.*/ 
}

#nav li
{
  float: left;
  margin: 0;
}

#nav li a
{
  background: #2090D0 url(nav.gif) no-repeat;
  color: #000088;
  display: block;
  float: left;
  height: 2em;
  padding-left: 10px;/*size of left edge of background image*/
  text-decoration: none;
}
#nav li span
{
  /*
  background-color: approximation of the color at the current location 
      of the gradient background-image (back_page.gif)
  background-position: display the top third of the background-image 
  */
  background: #2090D0 url(nav.gif) no-repeat 100% 0px;
  display: block;
  line-height: 2em;
  padding-right: 10px;/*size of right edge of background image*/
}

#nav li a:hover
{
  background-position: 0 -120px;/*display the bottom third of the background image*/
}
#nav li a:hover span
{
  background-position: 100% -120px;/*display the bottom third of the background image*/
}

#nav li.active a
{
  background-position: 0% -60px;/*display the middle third of the background image*/
  font-weight: bold;
}
#nav li.active a span
{
  background-position: 100% -60px;/*display the middle third of the background image*/
}