Menu CSS con estados

[juampick]

Hola, que tal? Estoy tratando hace unos días de modificar un poco los colores de mi menu css pero no lo he logrado. He creado una clase "selected" para ponersela en cada sección del sitio correspondiente. Acá va el código así comprenden mejor:

Html:

Código:

<div id="buttons">
<ul>
<li><a href="/">Historia</a></li>
<li><a href="/">Contacto</a></li>
<li><a href="/">Recursos</a></li>
<li><a href="/">Links</a></li>
<li><a href="/">Galería</a></li>
<li class="selected"><a href="/">Inicio</a></li>
</ul>
</div>

Css:

Código:

#buttons {
padding:1em;
height:1.5em;
color:#ffffff;
}
#buttons li {
float:right;
list-style-type:none;
white-space:nowrap;
}
#buttons li a {
display:block;
padding:0 5px;
font-size:1.2em;
font-weight:normal;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}
#buttons .selected {
color:green;
text-decoration:none;
}

#buttons a:hover{
color:red;
text-decoration:none;
}

El problema es que no me funciona la clase selected, le puse color:green como para ver la diferencia pero no anda.
Espero que me puedan ayudar.

Saludos Y Muchas gracias

PD: www.cincomasdos.com.ar/DEMO2/index.html