Personalizar rich:messages

Estou usando o rich:messages para exibir as mensagens do sistema. Porém gostaria que as mensagens fossem exibidas assim:

Caso seja uma INFO…o fundo for azul claro c uma borda azul escuro, uma imagem de informação com uma mensagem na cor azul escuro.
Caso seja uma WARN…o fundo for amarelo claro c uma borda ameralo escuro, uma imagem de aviso com uma mensagem na cor amarelo escuro.
Caso seja um ERROR…o fundo for vermelho claro c uma borda vermelho escuro, uma imagem de erro com uma mensagem na cor vermelho escuro.

O meu painel esta com o fundo amarelo para todas as mensagens, e a cor da fonte preta e não aparece icone antes da mensagem.
Alguem sabe como posso personalizar pra ficar mais bonito? Estou usando os seguintes codigos:

styles.css

.painel {
    text-align:center;
    margin-bottom:10px;
    padding:10px;
    background-color:#fae6b0;
    width:50%;
    border: thin solid #ffcc00;
    font-weight:bold;
}
.errorClass {
    font-family:'Tahoma', 'MS Trebuchet', 'Arial', 'Verdana';
    font-size:11px;
    color:red;
    font-weight:bold ;
}

.infoClass {
    font-family:'Tahoma', 'MS Trebuchet', 'Arial', 'Verdana';
    font-size:11px;
    font-weight:bold;
    text-decoration:none;
}

.warnClass {
    font-family:'Tahoma', 'MS Trebuchet', 'Arial', 'Verdana';
    font-size:11px;
    font-weight:bold;
    text-decoration:none;
}

pagina.xhtml

<rich:messages layout="table" errorClass="errorClass"
				infoClass="infoClass" warnClass="warnClass"
				styleClass="painel" ajaxRendered="true" />

Gostaria que ficasse como nesse site:

http://www.primefaces.org/showcase/ui/messages.jsf

Topicos relacionados