how to make the current tab in the top nav a different color

Question

I'm developing a new master page and I'm needing to make the tab in the navigation a different color if it is the current page.

Here is what I have so far:

                <div class="nav">
                    <ul id="menu">
                    <!-- top navigation menu (set to use the new Simple Rendering) -->
                        <SharePoint:AspMenu
                          ID="TopNavigationMenuV4"
                          Runat="server"
                          EnableViewState="false"
                          DataSourceID="topSiteMap"
                          AccessKey="<%$Resources:wss,navigation_accesskey%>"
                          UseSimpleRendering="true"
                          UseSeparateCss="true"
                          Orientation="Horizontal"
                          StaticDisplayLevels="2"
                          MaximumDynamicDisplayLevels="1"
                          SkipLinkText=""
                          CssClass=""/>
                      <!--s4-tn-->
                  </ul>
                <SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
                        <Template_Controls>
                            <asp:SiteMapDataSource
                              ShowStartingNode="False"
                              SiteMapProvider="SPNavigationProvider"
                              id="topSiteMap"
                              runat="server"
                              StartingNodeUrl="sid:1002"/>
                        </Template_Controls>
                    </SharePoint:DelegateControl>
              </div>

Here is my styles:

/*nav content */
.nav
{
      bottom:0;
      clear:both;
      float:right;
      height:31px;
      margin:0 -42px 1px 37px;
      position:absolute;
      width:75%;
}

.nav ul
{
    padding: 0px;
    margin: 0px;
}

.nav ul li
{
    display: block;
    float: left;
    height: 41px;
}

.nav ul li.current a 
{
    background-color: #e4f1f7;
    border: 1px solid #ebf2f5;
    border-top: 1px solid #fff;
    border-bottom: none;
    color: #195670;
    height: 46px;
    line-height: 44px;
    position: relative;
    text-decoration: none;
    top: -4px;

}

.nav ul a {
  background-color:white;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  border-left-color:#808080;
  border-left-style:solid;
  border-left-width:1px;
  border-right-color:#808080;
  border-right-style:solid;
  border-right-width:1px;
  border-top-color:#808080;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  border-top-style:solid;
  border-top-width:1px;
  color:#808080;
  display:block;
  font-size:1.2em;
  height:32px;
  line-height:37px;
  margin:0 5px;
  padding:0 25px;
  text-decoration:none;
}

.nav ul a:hover
{
    background-color: #e5e8ed;
    text-decoration: none;
}
/* end nav area*/