/** Coluna WHITEBOX e módulo WHITEBOX
 * v1.1
 *
 * O box é composte de 8 imagens de borda e 1 de miolo.
 * opcionalmente pode ser adicionada uma para o H3 (cuidado para mesclar com o topo)
 *
 * As dimensões das imagens são mostradas abaixo:
 *
 *          (A)                                 (B)
 *      /-20px-/----------- auto -----------/-20px-/
 * ---  *------*----------------------------*------* ---
 * 20px |      |       barra superior       |      | 20px
 * (C)  |      |                            |      | (C)
 * ---  *------*----------------------------*------* ---
 *  |   |      |*------------------------- *|      |  |
 *  |   | b e  ||       Título (h3)        || b d  |  |
 *  |   | a s  |*--------------------------*| a i  |  |
 *  |   | r q  |                            | r r  |  |
 * auto | r u  |           miolo            | r e  | auto
 *  |   | a e  |                            | a i  |  |
 *  |   |   r  |                            |   t  |  |
 *  |   |   d  |                            |   a  |  |
 *  |   |   a  |                            |      |  |
 * ---  *------*----------------------------*------* ---
 * 20px |      |       barra inferior       |      | 20px
 * (D)  |      |                            |      | (D)
 * ---  *------*----------------------------*------* ---
 *      /-20px-/----------- auto -----------/-20px-/
 *        (A)                                 (B)
 *
 * Apesar das dimensões serem sempre 20px, o que realmente importa é
 * elas sejam iguais nas letras iguais (A, B, C, D).  Essas letras estão
 * marcadas no CSS.
 * 
 * As barras superior, inferior, direita e esquerda tem de ter 
 * comprimento automatico, logo eles serão repetidos (repeat-x/-y) e suas
 * bordas devem se encaixar com as pontas em que tem contatos.
 * 
 * Note que o título do box (o h3) fica abaixo da barra superior.  Caso se
 * deseje que o título (h3) fique dentro da barra superior, use como base a 
 * coluna Silver Wood (column-silverwood.css).
 *
 * NOTA: se estiver usando esse arquivo como base para outros módulos/colunas,
 * Não esqueça de checar os arquivos column-whitebox-ie7.css e 
 * column-whitebox-ie654.css com correções específicas para o Internet Explorer.
 *
 * Esse tipo de coluna possui box eláticos e por isso são os mais complexos para acertar.
 * Eles se ajustam a qualquer largura e altura, baseado no conteúdo ou nas limitações do espaço
 * interno do elemento pai (no caso o .whitebox-column).
 *
 * Para garantir que eles tenham uma largura ou altura mínima deve se usar min-height e min-width
 * na classe .whitebox-column .module
 *
 * Lembre-se que esse é o caso extremo de personalização de um box, para a grande maiorias do casos
 * algo mais simples basta.
 *
 * Essa coluna/box é baseada em imagens, por isso não da para personalizar apenas trocando as cores, 
 * tem de mudar as imagens.
 *
 * Esse código inclui tanto o módulo WHITEBOX aparte quanto a coluna, por isso em vários
 * lugares ele é referenciado pelos dois modos.  Box isolados podem ter esse box com 
 * o sufixo: -whitebox .
 *
 * Para usar apenas o módulo sem a coluna, o módulo tem de ser carregado manualmente pelo 
 * ssa-config no estatico.
 *
 * Nota Internet Explorer:
 *  No internet Explorer foram notados que em uma coluna whitebox:
 *  A- todas pontas TOP RIGHT e BOTTOM RIGHT estão deslocados 1px para a esquerda
 *    bug de arredondamento do IE6.
 *  B- todas as pontas BOTTOM LEFT e BOTTOM RIGHT com excessão do último módulo
 *  estão deslocados para cima em 1px.
 * - Um box Inserido na ultima posição de outra coluna possui apenas o bug B.
 * - mesmca coisa em uma posição acima.
 * - Na mesma coluna, um box na primeira posição não apresenta nenhum bug.
 * - Em uma posição solta, apresenta apenas o bug A.
 *
 * Nota: a meioria desses bugs estão corrigidos, mas pode ser necessário a 
 * correção caso a caso.  Para isso atribua um ID para o módulo e ajuste 
 * bottom e right apenas para o IE veja o arquivo de ie6 para entender melhor.
 */
 
 

.whitebox-column
{
  height: 100%; /* Garante que pega 100% da altura */
}
 
/* box do módulo completo */
.module-whitebox,
.whitebox-column .module
{
  position: relative;
  height: auto;
  /* Desgruda os boxes */
  /* Largura util = largura da coluna - 20px */
  margin: 10px; 
}

.module-whitebox .module-float-1,
.whitebox-column .module .module-float-1
{
  position: absolute;
  background-image: url(../img/column-whitebox/top_right.png);
  width: 20px;  /* (A) */
  height: 20px; /* (C) */
  right: 0;  
  top: 0;
}

.module-whitebox .module-float-2,
.whitebox-column .module .module-float-2
{
  position: absolute;
  background-image: url(../img/column-whitebox/top_left.png);
  width: 20px;  /* (B) */
  height: 20px; /* (C) */
  top: 0;
  left: 0;
}

.module-whitebox .module-float-3,
.whitebox-column .module .module-float-3
{
  position: absolute;
  background-image: url(../img/column-whitebox/bottom_right.png);
  width: 20px;  /* (A) */
  height: 20px; /* (D) */
  right: 0;
  bottom: 0;
}

.module-whitebox .module-float-4,
.whitebox-column .module .module-float-4
{
  position: absolute;
  background-image: url(../img/column-whitebox/bottom_left.png);
  width: 20px;  /* (B) */
  height: 20px; /* (D) */
  left: 0;
  bottom: 0;
}

.module-whitebox .module-inner-1,
.whitebox-column .module .module-inner-1
{
  position: relative;
  background: repeat-y right 0;
  background-image: url(../img/column-whitebox/right.png);
  margin: 0;
  margin-top: 20px;    /* (C) */
  margin-bottom: 20px; /* (D) */
}

.module-whitebox .module-inner-2,
.whitebox-column .module .module-inner-2
{
  position: relative;
  background: repeat-y left 0;
  background-image: url(../img/column-whitebox/left.png);
}

.module-whitebox .module-inner-3,
.whitebox-column .module .module-inner-3
{
  position: relative;
  background: repeat-x 0 0;
  background-image: url(../img/column-whitebox/top.png);
  margin: 0;
  margin-left: 20px;  /* (A) */
  margin-right: 20px; /* (B) */
  top: -20px;         /* (C) */
}

.module-whitebox .module-inner-4,
.whitebox-column .module .module-inner-4
{
  position: relative;
  background:  repeat-x 0 bottom; 
  background-image: url(../img/column-whitebox/bottom.png);
  margin: 0;
  bottom: -40px; /* (C) + (D) */
}

.module-whitebox .module-inner-5,
.whitebox-column .module .module-inner-5
{
  position: relative;
  background: repeat;
  background-image: url(../img/column-whitebox/miolo.png);
  padding-top: 1px;
  padding-bottom: 1px;
  top: -20px;  /* (D) */
}

/* FIXME: main-content h3 tem margin top -1em, descobrir pq */
.module-whitebox h3,
.whitebox-column .module  h3
{
  margin: 0 0 5px 0;
  border-bottom: 1px solid #FFBBBB;
}