#nav ul {
  display: block;
  list-style: none outside;
  padding: 0;
  margin: 0 0 0 0;
  font-family: Arial;
  font-size: 8pt;
}

#nav li {
  padding: 0;
  margin: 0 5px 0 0;
  background-color: transparent;
  color: #009999;
  font-weight: normal;
  /* the next 4 lines are magic */
  display: block;
  float: left;
  top: -1.32em;
}

#nav a:link,
#nav a:visited {
  background-color: #336699;
  color: #FFFFFF;
  text-decoration: underline;
  padding-left: 3em;
  padding-right: 3em;
}

#nav a:hover {
  background-color: transparent;
  background-image: url('../images/menu1.jpg');
  color: #336699;
}

#navclear {
  display: none;
}
html>body #navclear {
  display: block;
  clear: both;
}

/* ----- now highlight active tab based on body @class attribute ----- */

body.index #nav li#nav-index a,
body.about #nav li#nav-about a,
body.archives #nav li#nav-archives a,
body.projects #nav li#nav-projects a,
body.pictures #nav li#nav-pictures a,
body.syndication #nav li#nav-syndication a,
body.links #nav li#nav-links a {
  background-color: #FFFFFF;
  color: #B3B3CC;
}

</style>