html, body {height:100%;}
body {
	margin:0;
	padding:0;
	background:#ccc;
	color:#000;
	font:12px Arial, Helvetica, sans-serif;
	text-align:center;
	}
#tudo {
	width:760px;
	background:#fff;
	position:relative;  /*Contexto de posicionamento */
	margin:0 auto;
	text-align:left;
	min-height:100%;
	}
 * html #tudo {height: 100%;}
#conteudo {padding-bottom:30px;}
#topo {
	width:760px;
	height:150px;
	text-align:center;
	padding-top:1px;
	background:#fff url(../images/header.gif) no-repeat;
	}

#t1e {width:413px; float:left;}
#t1d {width:292px; float:left;}

#t2 { width: 760px; padding: 73px 0 0 0; background: url(../images/tela2_convide.jpg) no-repeat top left; font-size: 19px; color:#1374bb;}
#t2 p { padding: 0 0 15px 28px; }
#t2e { width: 388px; float: left; padding-left:22px; font-size:13px; line-height:15px;}
#t2d {width:327px; float:left;}

#t3 {width:666px; font-size:20px; padding:10px 47px 0 47px; height:101px; color:#1374bb;}
#t3e { float: left; padding-left: 28px; width: 458px; margin-bottom: 19px; }
#t3d { float: left; margin-left: 28px; width: 230px; margin-bottom: 19px; }
#t3d div img { margin: 0; padding: 0; }

#amarelo { color: #262262; width: 272px; background: #00c3d5 url(../images/topo_box_amarelo.jpg) no-repeat top left; margin-bottom: 19px; padding: 10px 0 0 19px;}
#amarelo h2 { color:#ffffff; margin-bottom: 10px; }
#amarelo p { margin-top: 10px; font-size: 110%; }
#amarelo div.boxBranco { background: #FFF url(../images/bg_box_branco.jpg) no-repeat top left; margin-left: -19px; padding: 10px 0 12px 20px; }

#vermelho {width:293px; background:url(../images/vermelho02.jpg) repeat-y top left; /* height:153px; background:url(../images/box_vermelho.gif) no-repeat top left; padding:69px 0 0 29px; */}
#registre_form {width:293px;}
#registre_form p {line-height:24px;}
#registre_form label {display:inline-block; width:80px; font-weight:bold; margin-left: 19px;}
#registre_form input {width:140px; font-size:13px;}
#vermelhobtn {width:274px; height:42px; background:url(../images/vermelho03.jpg) no-repeat top left; padding: 26px 19px 0 0;}
#registre_form #btn_validar {float:right; width:100px; height:31px;}
/* #registre_form #btn_validar {float:right; width:100px; height:31px; margin-top:30px !important; margin-top:23px;} */

#amarelo1 {width:352px; height:84px; font: 12px Arial; background:url(../images/amarelo1.jpg) no-repeat top left; padding:50px 0 0 20px;}
#amarelo2 {width:352px; height:89px; font: 12px Arial; background:url(../images/amarelo2.jpg) no-repeat top left; padding:35px 0 0 20px;}
#amarelo3 {width:352px; height:115px; font: 12px Arial; background:url(../images/amarelo3.jpg) no-repeat top left; padding:35px 0 0 20px;}
#amarelo4 {position:relative; width:372px; height:51px; background:url(../images/amarelo4.jpg) no-repeat top left; font-size:18px; font-weight:normal; padding:27px 0 0 0; text-align:center;}

#verde1 {width:303px; height:84px; background:url(../images/verde1.jpg) no-repeat top left; padding:88px 0 0 24px;}
#verde2 {width:303px; height:73px; background:url(../images/verde2.jpg) no-repeat top left; padding:59px 0 0 24px;}
#verde3 {width:303px; height:118px; background:url(../images/verde3.jpg) no-repeat top left; padding:46px 0 0 24px;}
#verde4 {width:309px; height:172px; background:url(../images/verde4.jpg) no-repeat top left; padding:28px 0 0 18px; margin-bottom:30px;}

#t2d p {margin-top:4px;}
#t2d .user, #t2d .login, #t2d .senha {width:113px; font-size:13px;}
#t2d .nome {width:73px; font-size:13px; margin-right:10px;}
#t2d .email {width:97px; font-size:13px;}
#t2d .rede, #t2d .provedor {width:92px; font-size:13px;}
#t2d .vermelho {font-size:9px; color:red;}
#t2d .btncenter {text-align:center;}
#t2d label {padding-right:10px;}
#t2d .btn_adicionar {width:85px; height:22px; margin-top:2px;}
#t2d .btn_ok {width:38px; height:20px; vertical-align:text-bottom; margin-left:10px;}
#t2d .btn_eindica {text-align:right;}
#t2d .btn_eindica input {margin-right:17px;}
#t2d iframe {background-color:white;}

#form_participe { width: 458px; background:url(../images/box_azul_bg.gif) repeat-y; padding: 0;}
#form_participe p { margin: 10px 25px; background: none; }

#form_participe label {padding-right:10px; display:inline-block;}
#form_participe .cep, #form_participe .endereco {width:112px; margin-right:20px;}
#form_participe .numero, #form_participe .complemento, #form_participe .estado {width:92px; margin-right:20px;}
#form_participe .bairro, #form_participe .cidade, #form_participe_cpf {width:104px; margin-right:20px;}

#form_participe .btn_continuar {text-align:right;}
#form_participe .btn_continuar input {margin:53px 32px 0 0;}

#laranjat { width: 230px; height: 42px; background: url(../images/laranja_top.jpg) no-repeat top left; font-size: 18px; font-weight: normal; padding: 17px 0 0; text-align: center; }
#laranjas { width: 230px; background-color: #fcaf17; text-align: center; }
#laranjab { width: 230px; height: 16px; background:url(../images/laranja_bottom.jpg) no-repeat top left;}

div.eligible {width:230px; height:42px; background:url(../images/laranja_top.jpg) no-repeat top left; font-size:13px; line-height:13px; font-weight:bold; padding:15px 0 2px 0px; text-align:center;}

#mgm_table {font-size:10px;}
#mgm_table th {background:#235d8f; color:#ffffff; font-weight:bold; border:1px solid #dcdbdb; padding:5px 3px;}
#mgm_table td {border:1px solid #dcdbdb; padding:4px 3px;}
#mgm{width:298px; height:140px; overflow:auto;}
.termos {
	float:left;
	width:760px;
	text-align:center;
	padding-top:1px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#999999;
	margin:20px 0;
	}
.termos a {color:#999999; vertical-align:bottom;}
.termos a.srd {vertical-align:baseline;}

.clear {clear:both;}
h2 {font-weight:bold; font-size:13px;}

.obrigado {margin-top:30px; padding-left:60px; width:700px; margin-bottom:30px;}
span.topoRedondo, span.baseRedondo {
display:block; /* deixando o display dos span como block, já que o padrão é inline e é necessário para visualização correta */
background: transparent; /* deixando o background tranparente para que sempre que mudarmos a cor de fundo do por exemplo, não seja necessário a mudança aqui. */
width:625px;
}

span.topoRedondo span, span.baseRedondo span {
display: block; /* deixando o display dos span como block, já que o padrão é inline e é necessário para visualização correta */
height: 1px; /* declarando a altura dos spans poara 1px */
overflow: hidden; /* ocultando todo o conteúdo que poderia ser visualizado no span. Todo espaço é reduzido. Sem isso, no i.e. não é visualizado corretamente. */
background: #ffe380; /* definindo a cor de fundo dos spans para verde. Sempre que quiser mudar a cor, essa é a parte que deverá ser alterada. */
}

span.rum { margin:0 5px; } /* Definindo a margem para 5px para as laterais e 0 para base e topo para o primeiro span */
span.rdois { margin:0 3px; } /* Definindo a margem para 3px para as laterais e 0 para base e topo para o segundo span */
span.rtres { margin:0 2px; } /* Definindo a margem para 2px para as laterais e 0 para base e topo para o terceiro span */
span.rquatro { margin: 0 1px; height: 2px; } /* Definindo a margem para 1px para as laterais e 0 para base e topo para o quarto span e definido a altura para ele de 2px, a única altura diferente dos demais.*/

.meioRedondo {
background: #ffe380; /* definindo a cor de fundo dos spans para verde. Sempre que quiser mudar a cor, essa é a parte que deverá ser alterada. (Sempre deixar a mesma cor dos spans acima) */
color: #000000; /* definido a cor preta para o texto */
margin: 0; /* zerando a margem */
padding: 15px 30px 30px 30px; /* definindo padding de 5px para a base e o topo e 15px para as laterais, para que o conteúdo não fique colado nas bordas. */
width:565px;
font-size:18px;
}

.meioRedondo a {text-decoration:none; color:#000000; vertical-align:bottom;}
.meioRedondo a:hover {text-decoration:underline;}

.banners {
	float: left;
	width: 728px;
	padding: 10px 16px;
	}
	
	
#qtde {
	padding-bottom:3px;
}

.texto {
	padding: 10px 0 0 5px;
}

.texto p {
	font: 11px Arial;
	color: #666;
	line-height: 20px;
}

div.redessociais table tr td {
	padding: 0 10px 0 0;
}

div.redessociais .tooltip {
	position: absolute;
	padding: 5px 13px;
	z-index: 2;

	color: #303030;
	background-color: #f5f5b5;
	border: 1px solid #DECA7E;

	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	line-height: 18px;
	text-align: center;
}

div.redessociais .tooltip h3 {
	margin: 0 0 5px;
	text-align: left;
}



#form_referral {width:455px; background:#989898;}
#form_referral div.referral_topo {width:425px; height:103px; padding:23px 15px 0 15px; background:url(../images/box_referral_topo.gif) no-repeat top left;}
#form_referral div.referral_corpo {width:410px; min-height:264px; _height:264px; padding:0 25px 0 20px; font-size: 11px; background:url(../images/box_referral_corpo.gif) repeat-y top left;}
#form_referral div.referral_rodape {width:455px; height:43px; padding-top:25px; background:url(../images/box_referral_rodape.gif) no-repeat top left;}

#form_referral div.referral_topo div.referral_name {padding:0 0 15px 252px; font-size:14px; font-weight:bold; color:#ffffff;}
#form_referral div.referral_topo div.confirmed {float:left; font-size:12px; color:#ffffff; width:150px; text-align:center;}
#form_referral div.referral_topo div.pending {float:left; font-size:12px; color:#ffffff; width:150px; margin-left:110px; text-align:center;}

#form_referral div.referral_corpo table th {font-weight:bold;}
#form_referral div.referral_corpo table th, #form_referral div.referral_corpo table td {padding:2px 0;}
#form_referral div.referral_corpo table td .friendname {width:125px; font-size:12px;}
#form_referral div.referral_corpo table td .emailfriend {width:150px; font-size:12px;}
#form_referral div.referral_corpo table td .status {font-size:8px; text-transform:uppercase;}

#form_referral div.referral_rodape .btn_continuar {text-align:center; width:458px;}



ul#listaParticipantes { margin: 0 25px; }
ul#listaParticipantes li { padding: 3px 0; border-bottom: 1px solid #C0C0C0; }
ul#listaParticipantes li span { display: inline-block; float: right; }