/* -------------------------------------------------------------------
   Remendos do cadastro de tres passos.

   O quickregister.css do pacote desenha as tres telas quase inteiras,
   so que ele foi escrito para uma pagina onde o JavaScript de 2009
   fazia metade do trabalho: o passo andava por script, a escolha de
   sexo era um <span> que o QuickRegister.initGenderChooser marcava, e o
   botao "Continuar" era um <a> que disparava form.submit().

   Aqui cada passo e um POST, a escolha e um <input type="radio"> e o
   botao e um <button>. Estas regras sao so o que falta para essas
   trocas ficarem com a mesma cara -- nada de desenho novo.
   ------------------------------------------------------------------- */

/* A escolha de sexo.

   No original .gender-choice era um <span>, e o "#gender-choices li
   span" dava a ele position:absolute e z-index:1 -- o mesmo z-index das
   duas faixas de fundo, que vem depois no HTML e por isso ficavam por
   cima do rotulo. O texto "Kash(o)" simplesmente nao aparecia. Aqui ele
   e um <label>, fica na mesma posicao e sobe para o z-index da imagem,
   entao da para ler.

   O radio em si some: quem mostra a escolha e a moldura do <li>. */
#gender-choices li .gender-choice {
    position: absolute;
    left: 4px;
    width: 106px;
    z-index: 10;
    display: block;
    cursor: pointer;
    color: #fff;
}
#gender-choices li .gender-choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* A moldura de "escolhido".

   So a classe .selected manda aqui, e quem a move e o script da propria
   pagina. Antes havia tambem um :has(input:checked) junto -- e como o
   PHP deixava a .selected parada no primeiro, clicando no segundo os
   dois ficavam marcados ao mesmo tempo. */
#gender-choices li.selected {
    background: #eef5fa;
    border-color: #6b9ec9;
}

/* O "Continuar" era <a class="area"> e so andava com JavaScript. Virou
   <button class="area"> para funcionar sem script -- e como a folha do
   pacote escreve "div.button a.area", o botao nao pegava nada dela. Isto
   aqui e a mesma regra, palavra por palavra, valendo para <button>. */
div.button button.area {
    cursor: pointer;
    text-decoration: none;
    height: 50px;
    float: left;
    color: #fff;
    background: #000 url(/web-gallery/v2/images/frontpage/select_button.png) no-repeat scroll -6px 0;
    line-height: 48px;
    font-weight: bold;
    font-size: 1.4em;
    padding: 0 17px 0 22px;
    text-shadow: #000 0 -1px 0;
    position: relative;
    border: 0;
    font-family: inherit;
}
div.button:hover button.area { background-position: -6px -50px; }

/* O logo do Habbo no canto da barra de passos -- o hotel nao e aquele. */
#stepnumbers .stephabbo { display: none; }

/* O numero do passo ja andado. O quickregister.css tem .stepdone, mas
   so com a imagem de fundo -- sem cor de texto, o rotulo sumia. */
#stepnumbers .stepdone { color: #6b9ec9; }

/* A tarja de erro vem do #error-messages-container do original, que la
   ganhava o fundo vermelho por style= no proprio elemento. O texto
   precisava de cor. */
#error-messages-container #error-title.error {
    color: #fff;
    font-weight: bold;
    padding: 8px 12px;
}

/* Aceitar as regras: no original era um bloco com o texto solto ao lado
   da caixinha, que quebrava em duas linhas desalinhadas. */
#inner-container .field-content.checkbox label {
    display: block;
    line-height: 18px;
}
#inner-container .field-content.checkbox input { vertical-align: -2px; }

/* A pergunta do passo 3 no lugar do quadro do reCAPTCHA. */
#bubble-container #bubble-title h1 {
    font-size: 18px;
    margin: 0;
    padding: 18px 10px;
    text-align: center;
}