RichFaces + CSS

Olá,

Uma dúvida muito simples, acho que a resposta será tranquila, mas não to encontrando resposta em lugar nenhum…

Estou tentando implementar o menu dropdown (http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=dropDownMenu&sample=topMenu&skin=classic) mas não consigo colocar a cor na barra de menu, fica sempre com uma cor default (meio marrom).

Já coloquei todos os arquivos de css do richfaces no projeto e não funfa… Help!!!

Minha página principal (template facelet)

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./../../resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="./../../resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <title>Facelets Template</title>
    </h:head>

    <h:body>
        <div id="top" >
            <ui:insert name="top">Top</ui:insert>
            <ui:include src="topo.xhtml" />
        </div>
        <div>
            <div id="left">
                <ui:insert name="left">Left</ui:insert>
            </div>
            <div id="content" class="left_content">
                <ui:insert name="content">Content</ui:insert>
            </div>
        </div>
    </h:body>

</html>

Meu arquivo de menu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 
    xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:a4j="http://richfaces.org/a4j" 
    xmlns:rich="http://richfaces.org/rich">
 
<ui:composition>
 
    <h:outputStylesheet name="estilo">
        .pic {
        margin-bottom: -4px;
        margin-right: 2px;
        }
 
        .search .rf-ddm-itm-sel {
        background-color: transparent;
        background-image:none;
        border-color: transparent;
        cursor: default;
        }
   </h:outputStylesheet>
    <h:form>
        <rich:toolbar height="26px">
            <rich:dropDownMenu mode="ajax">
                <f:facet name="label">
                    <h:panelGroup>
                        <h:graphicImage value="../resources/images/icon_client.jpg" styleClass="pic" alt="cliente" />
                        <h:outputText value=" Clientes" />
                    </h:panelGroup>
                </f:facet>
                <rich:menuItem label="Novo Cliente" ></rich:menuItem>
                <rich:menuItem label="Consultar"></rich:menuItem>
            </rich:dropDownMenu> 
            
        </rich:toolbar>
        
    </h:form>
       <a4j:outputPanel ajaxRendered="true">
        <h:outputText value="Current Selection: "></h:outputText>
        <h:outputText style="font-weight:bold" value="#{dropDownMenuBean.current}"></h:outputText>
    </a4j:outputPanel>
    <br />
 
&lt;/ui:composition&gt;
 
&lt;/html&gt;

Como espero que fique o menu

Como está ficando:

Obs.: Não considerem os ícones, somente as cores…

Valeu