@charset "utf-8";
/* 
CSS Document 
Projeto: Concurso Cultural Meu Estilo é 10
Cliente: Puma Time
Autor: Marcelo Alves 
Agência: Commquest
Data: Outubro / 2009
*/
/* ---> Estrutura <--- */
body{
	background-color:#f5f5f5;
}
#site{
	width:900px;
	height:480px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	display:block;
	background-color:#fff;
	}
#topo{
	width:900px;
	height:500px;
	position:relative;
	display:block;
	}
#bottom{
	width:900px;
	height:125px;
	position:relative;
	display:block;
	background-color:#ef0403;
	}
#conteudo{
	width:880px;
	height:480px;
	position:relative;
	top:10px;
	left:10px;
	display:block;
	/*margin:10px;*/
	background-image:url(../img/bg_puma.gif);
	background-color:#c5c5c5;
	background-repeat:no-repeat;
	}
/* ---> Fim Estrutura <--- */
/* ---> Configuração <--- */
input, textarea{
	background-color:#fff;
	color:#666;
	font-family:Arial, Helvetica, sans-serif;
	border-color:#999;
	border-style:solid;
	border-width:1px;
	}
div#traco_titulo, div#traco_titulo_amigos, div#traco_titulo_imagem, div#traco_titulo_galeria, div#traco_titulo_votar{
	height:1px;
	width:160px;
	background-color:#ec0403;
	position:absolute;
	top:140px;
	right:0;
	}
div#traco_titulo_votar{
	width:100px;
	}
div#traco_titulo_imagem{
	width:170px;
	}
div#traco_titulo_galeria{
	width:120px;
	}
div#traco_titulo_amigos{
	width:330px;
	}
.branco{
	color:#fff;
	}
.bold{
	font-weight:bold;
	}
/* ---> Fim Configuração <--- */
/* ---> Conteúdo <--- */
/* ----------> Escolha o seu estilo <---------- */
#estilo1, #estilo2{
	width:440px;
	height:480px;
	}
#estilo1 img.img_estilo1, #estilo2 img.img_estilo2, #estilo1 div#estilo1_b, #estilo2 div#estilo2_b{
	width:440px;
	height:480px;
	}
#estilo1 div#estilo1_b, #estilo2 div#estilo2_b{
	background-color:#c5c5c5;
	display:none;
	z-index:50;
	}
#estilo1 {
	float:left;
	}
#estilo2 {
	float:right;
	}
#estilo1:hover div#estilo1_b{
	display:block;
	position:absolute;
	left:440px;
	top:0;
	}
#estilo2:hover div#estilo2_b{
	display:block;
	position:absolute;
	left:0;
	top:0;
	}
#estilo1:after, #estilo2:after{
        content:".";
        display:block;
        clear:both;
        visibility:hidden;
        height:0;
        overflow:hidden;
		}
p.estilo{
	font-size:16px;
	color:#666;
	font-weight:bold;
	line-height:2.5em;
	padding:120px 40px 0 40px;
	}
a.estilo{
	font-size:16px;
	font-weight:bold;
	color:#666;
	text-decoration:none;
	display:block;
	position:absolute;
	bottom:10px;
	right:10px;
	}
a.estilo:hover{
	color:#999;
	text-decoration:none;
	}
/* ----------> Fim Escolha o seu estilo <---------- */
/* ----------> Cadastro <---------- */
#area_cadastro{
	width:880px;
	height:480px;
	position:relative;
	display:block;
	background-image:url(../img/bg_interno2.jpg);
	background-repeat:no-repeat;
	}
h1.cadastro{
	font-size:24px;
	display:block;
	position:absolute;
	right:10px;
	top:120px;
	}
h2.cadastro{
	font-size:12px;
	display:block;
	position:absolute;
	right:10px;
	top:140px;
	}
h3.cadastro{
	font-size:16px;
	color:#ef0403;
	position:absolute;
	top:180px;
	left:240px;
	}
h4.cadastro{
	font-size:14px;
	position:absolute;
	top:230px;
	left:240px;
	}
p.cadastro{
	width:400px;
	position:absolute;
	left:240px;
	top:250px;
	font-size:11px;
	font-weight:bold;
	line-height:1.2em;
	}
p.cadastro_confirmacao{
	width:400px;
	position:absolute;
	left:240px;
	top:250px;
	font-size:14px;
	font-weight:bold;
	line-height:1.8em;
	}
form.formulario_cadastro, form.formulario_imagem{
	width:400px;
	position:absolute;
	left:240px;
	top:200px;
	}
form.formulario_imagem{
	top:350px;
	}
label.formulario_cadastro, label.formulario_senha, label.formulario_confirmasenha, label.formulario_estado, label.formulario_cep, label.formulario_telefone, label.formulario_celular, label.formulario_amigo{
	font-size:14px;
	font-weight:bold;
	display:block;
	margin-top:10px;
	}
label.formulario_senha, label.formulario_estado, label.formulario_telefone {
	width:200px;
	}
label.formulario_confirmasenha, label.formulario_cep, label.formulario_celular{
	position:relative;
	left:210px;
	top:-43px;
	width:190px;
	}
label.formulario_telefone, label.formulario_celular{
	position:absolute;
	top:173px;
	}
form.formulario_cadastro label{
	color:#fff;
	}
form.formulario_cadastro input {
	background-color:#e5e5e5;
	border-color:#ccc;
	}
input.input_cadastro_campo{
	width:400px;
	}
input.input_cadastro_senha, input.input_cadastro_estado, input.input_cadastro_telefone {
	width:190px;
	}
input.input_cadastro_confirmasenha, input.input_cadastro_cep, input.input_cadastro_celular{
	width:190px;
	position:absolute;
	left:210px;
	top:156px;
	}
input.input_cadastro_celular{
	top:199px;
	margin-bottom:20px;
	}
input.input_cadastro_btproximo{
	float:right;
	}
input.input_cadastro_btproximo_passo2{
	position:absolute;
	right:0;
	top:240px;
	}
input_cadastro_imagem{
	position:relative;
	width:350px;
	}
input.input_cadastro_btanexar{
	position:absolute;
	top:0px;
	right:190px;
	}
input.input_cadastro_btproximo_passo3{
	display:block;
	margin-top:15px;
	}
a.finalizar_cadastro, a.link_imgdepois{
	color:#fff;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	position:absolute;
	bottom:10px;
	right:10px;
	display:block;
	}
a.link_imgdepois{
	left:240px;
	bottom:40px;
	}
a.finalizar_cadastro:hover, a.link_imgdepois:hover{
	color:#999;
	text-decoration:none;
	}
/* ----------> Fim Cadastro <---------- */
/* ----------> Indique seus amigos <---------- */
h3.amigos{
	width:400px;
	font-size:16px;
	color:#fff;
	position:absolute;
	top:180px;
	left:240px;
	}
form.formulario_amigo{
	width:610px;
	position:absolute;
	left:135px;
	top:150px;
	}
form.formulario_amigo div#amigo_esquerda{
	width:300px;
	float:left;
	}
form.formulario_amigo div#amigo_direita{
	width:300px;
	float:right;
	}
label.formulario_amigo{
	font-size:11px;
	}
input.input_amigo_campo{
	width:300px;
	margin-bottom:4px;
	}
input.input_amigo_btenviar{
	clear:both;
	}
img.sua_imagem{
	width:70px;
	height:70px;
	display:block;
	position:relative;
	left:0;
	}
a.indicar_amigos{
	color:#fff;
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
	position:absolute;
	top:350px;
	right:240px;
	display:block;
	}
a.indicar_amigos:hover{
	color:#999;
	text-decoration:none;
	}
/* ---> Seu Perfil <--- */
p.perfil{
	font-size:12px;
	font-weight:normal;
	margin-bottom:4px;
	}
p.pontos{
	font-size:14px;
	}
/* ----------> Sua imagem <----------- */
div#imagem{
	width:400px;
	height:300px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	top:150px;
	background-color:#fff;
	padding:10px;
	}
/* ----------> Fim Sua imagem <----------- */
/* ----------> Galeria <------------- */
ul#galeria{
	position:absolute;
	margin-left:125px;
	top:180px;
	}
ul#galeria li{
	float:left;
	margin-left:10px;
	margin-bottom:10px;
	/* hack ie */
	_height:1%;
	/* fim hack ie */
	}
ul#galeria li a{
	display:block;
	}
ul#paginacao{
	position:absolute;
	bottom:10px;
	left:382px;
	}
ul#paginacao li{
	float:left;
	margin-left:5px;
	/* hack ie */
	_height:1%;
	/* fim hack ie */
	}
ul#paginacao li a{
	display:block;
	font-size:12px;
	font-weight:bold;
	color:#fff;
	padding:3px;
	text-decoration:none;
	}
ul#paginacao li a:hover{
	background-color:#ef0403;
	}
ul#creditos{
	position:absolute;
	top:180px;
	left:10px;
	}
img.bt_votarimagem{
	width:112px;
	height:18px;
	position:absolute;
	right:10px;
	bottom:10px;
	}
/* ----------> Fim Galeria <------------- */
/* ----------> Votar <---------- */
h3.votar{
	width:400px;
	font-size:16px;
	color:#fff;
	position:absolute;
	top:180px;
	left:240px;
	}
form.votar_logar{
	width:300px;
	position:absolute;
	left:290px;
	top:220px;
	}
ul#votar_esquecisenha{
	position:absolute;
	left:290px;
	top:300px;
	}
ul#votar_esquecisenha li {
	float:left;
	margin-top:3px;
	margin-right:20px;
	/* hack ie */
	_height:1%;
	/* fim hack ie */
	}
ul#votar_esquecisenha li a{
	font-size:11px;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	}
ul#votar_esquecisenha li a:hover{
	color:#ccc;
	text-decoration:underline;
	}
p.votar_cadastro{
	font-size:14px;
	font-weight:bold;
	width:400px;
	position:absolute;
	top:250px;
	left:240px;
	line-height:1.8em;
	}
a.votar_cadastro_participar{
	font-size:14px;
	font-weight:bold;
	position:absolute;
	top:350px;
	left:540px;
	color:#fff;
	text-decoration:none;
	}
a.votar_cadastro_participar:hover{
	color:#ccc;
	}
/* ----------> Fim votar <---------- */
/* ----------> Fim Indique seus amigos <---------- */
/* ---> Fim Conteúdo <--- */
/* ---> Bottom <--- */
#bottom_coluna1, #bottom_coluna2, #bottom_coluna3{
	width:289px;
	height:105px;
	position:relative;
	margin:10px 0 10px 10px;
	border-right-color:#fff;
	border-right-style:solid;
	border-right-width:1px;
	float:left;
	z-index:10;
	}
#bottom_coluna3{
	border:0;
	}
#bottom_coluna1:after, #bottom_coluna2:after, #bottom_coluna3:after{
        content:".";
        display:block;
        clear:both;
        visibility:hidden;
        height:0;
        overflow:hidden;
		}
img.bottom_tit{
	height:14px;
	margin-bottom:10px;
	position:relative;
	display:block;
	}
label.login{
	font-size:10px;
	font-weight:bold;
	text-align:left;
	display:block;
	}
input.input_login, input.input_senha{
	font-size:10px;
	width:200px;
	height:17px;
	margin-bottom:5px;
	display:block;
	clear:both;
	}
input.input_login_btentrar{
	width:54px;
	height:18px;
	position:absolute;
	right:10px;
	bottom:3px;
	}
div#bottom p{
	font-weight:bold;
	}
a.link_bottom{
	color:#fff;
	font-weight:bold;
	font-size:12px;
	display:block;
	position:absolute;
	bottom:3px;
	right:10px;
	text-decoration:none;
	}
a.link_bottom:hover{
	color:#990000;
	}
#bottom img.bottom_passos{
	height:28px;
	position:relative;
	top:0;
	left:0;
	margin-bottom:30px;
	display:block;
	}
#bottom img.bottom_icone{
	float:left;
	margin-right:20px;
	}
a.esquecisenha{
	display:block;
	font-size:10px;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	position:absolute;
	bottom:-10px;
	left:0;
	}
a.esquecisenha:hover{
	color:#ccc;
	}
/* ----------> Passos Ativos <---------- */
#bottom_coluna_ativa{
	width:300px;
	height:125px;
	background-color:#af181d;
	position:absolute;
	bottom:0;
	z-index:5;
	}
body#estilo div#bottom div#bottom_coluna_ativa{
	left:0;
	}
body#cadastro div#bottom div#bottom_coluna_ativa{
	left:300px;
	}
body#amigos div#bottom div#bottom_coluna_ativa{
	left:600px;
	}
/* ----------> Fim Passos Ativos <---------- */
/* ----------> Twitter <---------- */
img.bottom_twitter{
	height:25px;
	margin-bottom:10px;
	position:relative;
	display:block;
	}
p.twitter{
	margin-bottom:10px;
	}
textarea.twitter{
	width:220px;
	height:40px;
}
/* ---> Fim Bottom <--- */