I can't get my Current page font to work.


For some reason this part is overriding it

#MainNav ul li a{
text-decoration:none;
display:inline;
padding:10px 15px;
border-top-right-radius:10px;
border-top-left-radius:10px;
color:#666666;


}





/* Main Nav */


#Navigation {
width:100%;
margin:0 auto;
border-bottom:thin solid #999;
padding-top:9px;
padding-bottom:9px;

}

#NavigationContainer {
width:1024px;
margin:0 auto;
}






#MainNav ul{
list-style-type:none;
display:inline;





}


#MainNav ul li{
display:inline;
font-size:16px;
font-weight:bold;
margin-right:2px;
line-height:100%;

}



#MainNav li{
display:inline;
font-weight:100;
margin-right:25px;



}


#MainNav ul li a{
text-decoration:none;
display:inline;
padding:10px 15px;
border-top-right-radius:10px;
border-top-left-radius:10px;
color:#666666;


}





#MainNav ul li a:hover{
background-color:#48af71;
color:#FFFFFF;

}

.CurrentPage {
background-color:#48af71;
color:#FFFFFF;

}

.CurrentPage {
background-color:#48af71;
color:#FFFFFF;

}





<div id="Navigation">

<div id="NavigationContainer">

<div id="MainNav">

<ul>
<li> <a href="Tools.html" class="CurrentPage" title="Tools" target="_self">Admin pages</a></li>
<li> <a href="Tools.html" title="Tools" target="_self">My workspace</a></li>
<li> <a href="Tools.html" title="Tools" target="_self">Marketing</a></li>
<li> <a href="Tools.html" title="Tools" target="_self">Post Office</a></li>

</ul>

</div><!--MainNav-->

</div><!--NavigationContainer-->

</div><!--Navigation-->