Caixa de Mensagem CSS

Não sei quanto a vocês, mas pra mim uma coisa complicada é esse lance de design, desde de bolar uma idéia, escolha de cores, até mesmo como fazer um código css limpo e é isso que pretendo mostrar aqui agora. Vi um artigo excelente no janko que busca criar caixas de mensagem css para diferente tipos de mensagens.

A idéia final é que tenhamos no html apenas esse código para criar uma caixa de mensagem.

        <div class="info">
              Olá! Você está entrando no Programatik Blog!
         </div>

Criaremos uma div padrão, que se redimensiona de acordo com o tamanho do texto e depois iremos “extender” para os diversos tipos de mensagem, cada um com sua cor e icone diferente. O codigo CSS será assim:

.info, .success, .warning, .error, .validation {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
}
.info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('info.png');
}
.success {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image:url('success.png');
}
.warning {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('warning.png');
}
.error {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('error.png');
}

Os icones usados foram da barra de ferramentas do Knob.

Depois pretendo utilizar essa caixa de mensagem fazendo ela ficar no estilo modal e utilizando o Zend Framework para a validação dos dados, mas fica para outra hora =p