/*Documento CSS style_vitrine_cuecas.css*/

/*Tags*/
body{
    background: #FFFFFF url(/static/img/bg-body.gif);
     background-repeat: repeat-x;
     margin-top:-20px;
      /*background-image:url(/static/img/bordadouva.jpg);
		 background-repeat: no-repeat;
		 background-position: 5px;*/      
 }


/* ID  */
#container{ 
	/*border: 1px dotted #000;*/
	width:960px;
	height: 800px;
	margin: 0 auto;

}
#box-logo{
      position:relative;
      float:left;
}
#box-menu{
      position:relative;
      float:left;
      margin-top:1px;
      margin-left: 20px;
      margin-right: 40px;
}
#box-login{
      position:relative;
      float:top right;
      margin-top:5px;
}
#box-painel{
       margin-top:75px;
       height: 160px;
       position:relative;
       background: transparent url(/static/img/bg-cabecalho.png) 0px 0px;/*parte debaixo com lista fina*/
       background-repeat: repeat-x;    
}
#box-cursos{}
#box-lista-cursos{}

#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: -40px;
       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;
	    margin-left: 80px;/*afasta a lateral do box do contato, do box da media*/
        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;
}

.menu{
padding:0;
margin-top:10px;/*centraliza o separador e as palavras do menu*/
height:36px;
/*border:1px dotted #000;*/
line-height: 8px; /*alinha em uma só linha*/
}

.menu li{
	list-style:none;/*retira as bolinhas*/
	display:inline;/*em linha*/
	padding: 15px 15px 15px 15px;
	margin-left: 0px;
	font-size:12px;
}

.menu li a{
    text-decoration:none;/*retira o sublinhado*/
     color:#FFF;
     font-weight:900;
}
.menu-item{
       background: url(/static/img/separador-menu.gif) no-repeat right; 
       /*background-repeat: no-repeat right;*/ 
}

.box-input-login{
     float:left;
}

.lbl-login{
     display:block; 
       background: url(/static/img/images-login.gif) no-repeat 0px 5px; 
       /*5px aproxima a palavra da caixinha de texto*/
       /*text-indent: 10000px; some com o box também*/
        margin-top:-20px;   
}
.lbl-password{
     display:block;
     margin-left:10px;
     background: url(/static/img/senha.gif) no-repeat -1px 5px; 
     text-indent: 100px;
     margin-top:-20px;  
}
.txt-login{
     border:2px solid #4A6675;
     margin-left:10px;
}

.txt-password{
    border:2px solid #4A6675;/*caixinha da senha*/
    margin-left:10px;
    margin-top:1px;
}
.bt-logar{
    border:2px solid #FFF;
    background: #4EBDF6;
    color: #FFF;/*cor da letra*/
    cursor: pointer;
    /*float: left;
    margin-top:20px;
    margin-left:10px;*/
    
}

.title-panel{
      font-size:26px;
      position: absolute;
      height:68px;
      line-height:38px;
      font-family: verdana;
      color: #E44D26;
      font-weight:400px;
      padding-left:60px;/*desloca a fonte*/
      top: -20px;/*centraliza a imagem no painel do usuário*/
      margin-left:5px;
      background: transparent url(/static/img/painel.jpg) no-repeat 0px 0px;/*imagem pequena com engrenagem*/
      position: 14px; /*fundo-azul-cuecas.png*/
}
.box-data-panel{
      position: relative;
      height:250px; /*aumenta o fundo azul na vertical*//*tem essa imagem pronta de quiser usar, fundo-azul-cuecas.png*/
      background: #4EBDF6;/*fundo azul feito com declaração de cor e não com imagem*/
      top: 65px;/*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{
      position:relative;
      float: left;
      display: block;
      border:1px solid #000px;/*borda em torno da div*/
      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: 140px;/*afasta a div das cuecas da div do painel, quanto maior o nº mais eal desce*/
      margin-left: 6px;
      padding-bottom: 95px;
      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_peca img {
     float: left;
     margin-top: -10px;/*sobe a imagem*/
     margin-left: 20px;
     padding-top: 15px;
     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: 25px;/*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{ 
    color: #333;
    text-decoration:underline;
}

.titulo_nova_peca{
      background: url(/static/img/faixa-azul.png);
      background-repeat: no-repeat;
      position: relative;
      width:184px;
      height:50px;
      top: 1px;/*sobe e desce a faixinha azul*/
      right: -25px;
      line-height: 47px;
      color:#000; /*FFF;*/
      text-align:center;
      font-size:14px;
       z-index: 2;
}

.valor_peca{
    display: block;
    background-color:#585C5E;
	text-decoration:none;
	color: #FFF;/*cor da fonte dos preços*/
	margin-left: 170px;/*desloca os preços para esquerda*/
	padding-left: -150px;
	position: absolute;
	top: 290px ;/*aumentando o nº o preço desce*/
	text-align: center;/*centraliza os preços dentro da div*/
}
.separator{
        height:30px;
	clear:both;

}