Personalização dos ranks via CSS

Saudações amigos,
Vi que muitos tem esse RANK EM CSS só que não acho em nenhum lugar.
Eu queria o código CSS e o código para por no título do rank por exemplo: <div class="adm" e assim vai.
Clique Aqui e veja a imagem.

Ultilize esse CSS:

Código:

.userAdministrador, .userClient, .userSuporte, .userDesigner, .userManagement, .userMember, .userNewba, .userModerator, .userStaff, .vipBS, .userProgrammer {
  margin-top: 9px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background: transparent;
  border-radius: 3px;
  border-top: 1px solid rgba(0,0,0,.20);
  bottom: -7px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 2px 0 rgba(0,0,0,0.14);
  text-transform: uppercase;
  font-family: Ubuntu;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
}
 
.userAdministrador {
background: #881418;
}

Bote no nome do grupo em Administração de Grupos:
<span class="userAdministrador"><b>Administrador</b></span>

Até, beijos 

Olá, coloquei do user Administrador até o programador em uma linha, isso afetará o CSS do rank?

Não, senhor.

Funcionou perfeitamente! Reputado.