/* ----- Pure CSS tabs start here ----- */
#logo
{
    background-color: #transparent;
    color: #ffffff;
    margin-top: 0px;
}

#nav ul {
  display: block;
  list-style: none outside;
  padding: 0;
  margin: 5px 0 0 20px;
  font-family: Tahoma, Verdana,"Trebuchet MS",sans-serif;
  font-size: small;
}

#nav li {
  padding: 0;
  margin: 0 4px 0 0;
  border: 1px solid #cecbc6;
  background-color: #6600ff;
  color: #ffffff;
  font-weight: bold;
  /* the next 4 lines are magic */
  display: block;
  float: left;
  position: relative;
  top: -1.32em;
  font-size: small;
}

#nav a:link,
#nav a:visited {
  background-color: #6600ff;
  color: #ffffff;
  text-decoration: none;
  padding-left: 1em;
  padding-right: 1em;
}

#nav a:hover 
{
  background-color: #cecbc6;
  color: #000066;
}

#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.author #nav li#nav-author a,
body.weblog #nav li#nav-weblog a,
body.media #nav li#nav-media a,
body.tales #nav li#nav-tales a,
body.dpm #nav li#nav-dpm a,
/* body.syndication #nav li#nav-syndication a, */
body.links #nav li#nav-links a 
{
  background-color: #fff;
  color: #000066;
  }