/* *****************************************************************************

 >> Classes de painéis

    Definem propriedades gerais dos painéis:
        Bordas, fundo, estrutura para posicionamento dos elementos,
        formatação do cabeçalho.

    A classe "painel" é uma classe geral, que deve ser colocada em todos os
    painéis.

    As demais definem as bordas, fundo e tamanho vertical dos painéis.
    Os nomes convencionados identificam características dos painéis:
    . painel-100 cria um painel com altura padrão (100%)
    . painel-alt-50 cria um painel alternativo com altura 50%
    . painel-destaque-100 cria um painel destaque com altura de 100%

    Algumas classes foram criadas. Caso outras sejam necessárias, o mesmo
    padrão deve ser seguido. Os tamanhos verticais não são exatos, apenas
    aproximados.

    Exemplo - criação de um painel com altura de 15%:
    <div class="painel painel-15">
        <div class="borda-inicial"></div>
        <div class="borda-final"></div>
        <div class="conteudo">
            <h3>Exemplo</h3>
            ...
        </div>
    </div>

***************************************************************************** */


/* -- Classes de painéis ---------------------------------------------------- */

.painel
{
    font-family: Arial;
    font-size: 80%;

    float: left;
}

.painel h3
{
    font-size: 110%;
    font-weight: bold;
    text-transform: uppercase;

    padding: 0.8em 0 0.8em 1em;

    background-image: url(/_imagem/bullet.png);
    background-repeat: no-repeat;
    background-position: 0% 50%;
}

.painel h3 a
{
    color: black;
    text-decoration: none;
}

.painel .borda-inicial
{
    float: left;
    _margin-right: -4px; /* HACK IE6 */

}

.painel .borda-final
{
    float: right;
    _margin-left: -4px; /* HACK IE6 */
}


.painel-100 .borda-inicial,
.painel-100 .borda-final,
.painel-destaque-100 .borda-inicial,
.painel-destaque-100 .borda-final
{
    width: 21px;
    height: 220px;
}

.painel-100 .borda-inicial
{
    background-image: url(/_imagem/painel_100_borda_esq.png);
}

.painel-100 .borda-final
{
    background-image: url(/_imagem/painel_100_borda_dir.png);
}

.painel-100 .conteudo
{
    height: 220px;
    margin: 0 21px;
    _margin: 0; /* HACK IE6 */

    background-image: url(/_imagem/painel_100_fundo.png);
}

.painel-300 .borda-inicial,
.painel-300 .borda-final
{
    width: 23px;
    height: 324px;
}

.painel-300 .borda-inicial
{
    background-image: url(/_imagem/painel_300_borda_esq.gif);
}

.painel-300 .borda-final
{
    background-image: url(/_imagem/painel_300_borda_dir.gif);
}

.painel-300 .conteudo
{
    height: 324px;
    margin: 0 23px;
    _margin: 0; /* HACK IE6 */

    background-image: url(/_imagem/painel_300_fundo.gif);
}

.painel-destaque-100 .borda-inicial
{
    background-image: url(/_imagem/painel_destaque_100_borda_esq.png);
}

.painel-destaque-100 .borda-final
{
    background-image: url(/_imagem/painel_destaque_100_borda_dir.png);
}

.painel-destaque-100 .conteudo
{
    height: 220px;
    margin: 0 21px;
    _margin: 0; /* HACK IE6 */

    background-image: url(/_imagem/painel_destaque_100_fundo.png);
}


.painel-75 .borda-inicial,
.painel-75 .borda-final
{
    width: 21px;
    height: 173px;
}

.painel-75 .borda-inicial
{
    background-image: url(/_imagem/painel_75_borda_esq.png);
}

.painel-75 .borda-final
{
    background-image: url(/_imagem/painel_75_borda_dir.png);
}

.painel-75 .conteudo
{
    height: 173px;
    margin: 0 21px;
    _margin: 0; /* HACK IE6 */

    background-image: url(/_imagem/painel_75_fundo.png);
}

.painel-alt-50 .borda-inicial,
.painel-alt-50 .borda-final
{
    width: 10px;
    height: 120px;
}

.painel-alt-50 .borda-inicial
{
    background-image: url(/_imagem/painel_alt_50_borda_esq.png);
}

.painel-alt-50 .borda-final
{
    background-image: url(/_imagem/painel_alt_50_borda_dir.png);
}

.painel-alt-50 .conteudo
{
    height: 120px;
    margin: 0 10px;
    _margin: 0; /* HACK IE6 */

    background-image: url(/_imagem/painel_alt_50_fundo.png);
}

.painel-15 .borda-inicial,
.painel-15 .borda-final
{
    width: 5px;
    height: 36px;
}

.painel-15 .borda-inicial
{
    background-image: url(/_imagem/painel_15_borda_esq.png);
}

.painel-15 .borda-final
{
    background-image: url(/_imagem/painel_15_borda_dir.png);
}

.painel-15 .conteudo
{
    height: 36px;
    margin: 0 5px;
    _margin: 0; /* HACK IE6 */

    background-image: url(/_imagem/painel_15_fundo.png);
}