/*Documento CSS style_loja_cuecas.css*/

/*Tags*/
body{
   /*background-attachment:fixed;*/
   margin:0;
  }
  
/* ID  */
#container{ 
	/*border: 1px dotted #000;*/
	width:960px;
	height: 1020px;
	margin: 0 auto;

}
#box-logo{
      position:relative;
      float:left;
}
#box-pecas1{
       border:3px solid #red;
       width:960px;
       height: 200px;
       position:relative;
       padding-bottom:5px;
}


#box-pecas2{
       border:3px solid #red;
       width:960px;
       height: 400px;
       position:relative;
       padding-bottom:5px;
}

#rodape-container{
       background-attachment:fixed;
       margin-top:60px;/*espaço entre o rodapé e a parte de baixo do container*/
       height: 260px;
       position:relative;
       background: transparent url(/static/img/chapa-footer.png) 0px 0px;/*parte debaixo com lista fina*/
       background-repeat: repeat-x;   
}


#box-direitos-autorais{
       /*border:1px solid #000;*/
       width: 200px;
       height:40px;
       margin-top: 90px;
       margin-left: 20px;
       margin-right: 50px;/*separa o boxdos direitos autorais do box de contato*/
       padding-left:15px;/*espaço entre o rodapé e a parte de baixo do container*/
       position:relative;
       float: left;
}


#box-contato{
        /*border:1px solid #000;*/
        width: 600px;
        height:150px;
        padding-left:5px;/*espaço entre o box do contato e o container*/
        position: relative;
        float: left;
}


#box-media{
       margin-left:6px;
       padding-top:70px;/*espaço entre o rodapé e a parte de baixo do container*/
       padding-left:35px;/*espaço entre o box do contato e o container*/
       margin-top:-20px;
       margin-right:20px;
       position:relative;
       float: left;
}


/* CLASS */
.logo img{
       border:none;
       margin-top: 10px;
       margin-right: 10px;
}


.box-painel-titulo {
      position: relative;
      width: 960px;
      height:300px; /*aumenta o fundo azul na vertical*//*tem essa imagem pronta de quiser usar, fundo-azul-cuecas.png*/
      margin:0 auto;
      /*background: #4EBDF6;/*fundo azul feito com declaração de cor e não com imagem*/
       background: #4EBDF6 url(/static/img/cuecas-variadas.jpg) no-repeat 0px 0px;/*chapa cinza*/
       background-position: center right;
      top: 15px;/*encosta o box debaixo no painel do usuárioº  ele sobe*/
      /*box-shadow: 5px 9px 9px 10px #8B4513;/*o primeiro número é da sombra direita, o 2º é da parte debaixo,*/
      /*background-color: #FFA500; /*cor de fundo*/
      border-radius: 8px; /*deixa a borda da caixa (div) arredondada*/
      -moz-border-radius:8px; /*deixa as bordas arredondadas*/
      -webkit-border-radius:8px;/*para que funcione em outros navegadores*/
      z-index:1;
}

.item_painel{
position: relative;
/*display: block;*/
/*border:1px solid #000;*/
float: left;
height: 90px;
width: 90px; /*separa as imagens umas das outras*/
margin-top:10px;
margin-left: 480px;/*colocou a imagem à direita dentro do painel*/
padding-left: 10px;
text-align:center;/*centraliza as imagem dentro do box*/
}

.item_painel a{
      text-decoration:none;
      color:#2A617E;
      text-transform:uppercase;
      font-size: 20px;
 }

.item_painel a:hover{color:#FFF;}
    
.nova_peca{
      border:1px solid #000;
      position:relative;
      float: left;
      width: 230px; /*dá para 4 boxes na horizontal*/
      height: 220px;/*colocar a borda para verificar o tamanho do fundo cinza e aí trabalhar a largura e a altura---------------------*/
      margin-top: -20px;/*desloca o primeiro conjunto de divs do fundo azul*/
      margin-bottom: -80px;/*desloca o primeiro conjunto de divs do fundo azul*/
      margin-left: 6px;
      padding-bottom: 95px;/*mexe dentro do box das cuecas*/
      /*margin-bottom: 4px;/*separa um fundo cinza do outro*/
      background: url(/static/img/cueca-chapa-cinza2.jpg) no-repeat 0px 0px;/*chapa cinza*/
      background-position: bottom;/*faz o fundo cinza descer dentro do box*/
      z-index:1;
      
}   
.nova_peca2{
      border:1px solid #000;
      position:relative;
      float: left;
      width: 230px; /*com essa largura dá para 4 boxes na horizontal*/
      height: 220px;/*colocar a borda para verificar o tamanho do fundo cinza e aí trabalhar a largura e a altura*/
      margin-top: 120px;/*desloca o segundo conjunto de divs do primeiro conjunto*/
      margin-bottom: -60px;/*desloca o primeiro conjunto de divs do fundo azul*/
      margin-left: 6px; /*espaçamento entre as divs das cuecas*/
      padding-bottom: 95px;/*mexe dentro do box das cuecas*/
      /*margin-bottom: 4px;/*separa um fundo cinza do outro*/
      background: url(/static/img/cueca-chapa-cinza2.jpg) no-repeat 0px 0px;/*chapa cinza*/
      background-position: bottom;/*faz o fundo cinza descer dentro do box*/
      /*z-index:2;*/
}

.nova_peca img {
     float: left;
     margin-top: 10px;/*desce a imagem de cada cueca aumentando o nº*/
     margin-left: 20px;
     padding-top: -5px;
     padding-bottom: 10px;/*separa a imagem da palavra*/
     text-align: center;
   }
 

.nova_peca  p{ 
     /*border: 1px solid blue;/*colocar a borda para verificar o tamanho do bloco aí trabalhar a disposição do texto*/
     display: block;
     float:left;
     width: 200px;
     margin-top: 35px;/*descola a div p da div h3, aumentando o nº o texto desce*/
     margin-left: 20px;
     /*font-size: 20px;*/
     color:#000;
     }

.nova_peca2  p{ 
     /*border: 1px solid blue;/*colocar a borda para verificar o tamanho do bloco aí trabalhar a disposição do texto*/
     display: block;
     float:left;
     width: 200px;
     margin-top: 55px;/*descola a div p da div h3, aumentando o nº o texto desce*/
     margin-left: 20px;
     /*font-size: 20px;*/
     color:#000;
     }

.nova_peca  p:hover{ /*primeiro grupo de 4 pecas*/
    color: red;
    text-decoration:underline;
}
.nova_peca2  p:hover{ /*segundo grupo de 4 pecas*/
    color: red;
    text-decoration:underline;
}


.valor_peca{
    display: block;
    background-color:#585C5E;
	text-decoration:none;
	color: #FFF;
	text-transform: uppercase;
	padding:5px 10px 5px 10px;
	position: absolute;
	top: 275px ;/*aumentando o nº o preço desce*/
	text-align: center;/*centraliza os preços dentro da div*/
}


.separator{
    height:30px;
	clear:both;
}


pre{
  color: #CFA914;
  font-family: "Challenge Extra Bold", "lucinda grande", "lucinda sans", verdana, sans-serif, Arial;
  font-size: 34px;
  text-align: left;
}
em{
   font-size: 55px;
  color:#181818;

}

/*--------------------------------*/