body {
  background-color: #000;
  color: #ccc;
  font-family: trebuchet ms, tahoma, verdana, helvetica, sans-serif;
  font-size: 10px;
  margin: 150px auto 50px;
}

#wrapper {
  width: 800px;
  margin: 0 auto;
}

#title {
  font-size: 18px;
  letter-spacing: 1em;
}

ul#navigation {
  list-style: none;
}

#navigation li  {
  background-color: #333;
  border: 1px solid #fff;
  display: block;
  float: left;
  padding: 0 6px;
}

#navigation li a {
  display: block;
  color: #ccc;
  text-decoration: none;
}

/* ===== FLOAT/CLEAR ===== */
.clear {
  clear: both;
}
/* the cistern class is used for a div that has a bunch of floating objects
   inside of it that you want to keep from spilling out of the div
   avoids the use of an extra clearing div in the markup by using
   the :after pseudoclass - see http://www.positioniseverything.net/easyclearing.html
   hacks required for IEwin are in styles_iehacks.css. IEmac hacks are in style_hacks.css  */
.cistern:after, .field_row:after, .content_field_row:after
{
    content: "-"; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}