How do I display the link for the current page different from the others? I would like to swap the colors of the text and background.

This is what I currently have:

The HTML:

  <div id="header"> 
    <ul id="navigation">
    <li class="bio"><a href="http://www.jacurren.com/">Home</a></li>
    <li class="theatre"><a href="http://www.jacurren.com/theatre.php">Theatre</a></li>
    <li class="prog"><a href="http://www.jacurren.com/programming.php">Programming</a></li>
    <li class="resume"><a href="http://www.jacurren.com/resume.php">R&eacute;sum&eacute;</a></li>
    <li class="portf"><a href="http://www.jacurren.com/portfolio.php">Portfolio</a></li>
    <li class="contact"><a href="http://www.jacurren.com/contact.php">Contact</a></li>   
    </ul>
  </div>

The CSS:

#navigation{
    margin:0;
    padding:0;
    background:#000000;
    height:34px;
    list-style:none;
    position: relative;
    top: 80px;
}
#navigation li{
    float:left;
    clear:none;
    list-style:none;
}
#navigation li a{
    color:#A60500;
    display:block;
    font-size:12px;
    text-decoration:none;
    font-weight:bold;
    padding:10px 18px;
}
#navigation li a:hover{
    color:#640200;
    background-color:#000000;
}