@import url("reset.css");
@import url("text.css");


body { background: url("../img/bg.png") repeat-x center;}
input, button, textarea {
	border: none;
}
button { cursor: pointer;}
input, textarea { margin: 5px 0 15px; }
input {
	display: block;
	height: 24px;
	line-height: 24px;
	padding: 2px 5px;
}

.linkVer {
	font-weight: bold;
	color: #83100b;
}

.clear{ clear: both; }
.clearRight{ clear: right; }
.floatRight { float: right;}
.floatLeft { float: left;}

#container, .innerbox {
	margin: 0 auto;
	width: 862px;
}

#header { 
	height: 144px;
	position: relative;
}

#header #logo {
	float: left;
	margin: 15px 0 0 30px;
}
#header .boxTel { 
	float: right;
	margin-bottom: 22px;
	padding: 5px 0 0;
}
#header .boxTel input { display: none; }
#header .boxTel strong {
	display: block;
	font-size: 10px;
	margin: 15px 0 -15px;
	
}
#header .boxTel #telefone {
	display: block;
	margin-top: 20px; /* enquanto esta sem o input */
	font-size: 28px;
}

#menu {
	background: url("../img/menu.png") no-repeat;
	clear: both;
	float: right;
	height: 51px;
	margin: 0 -7px -8px 0;
	padding: 0 9px 0 15px;
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 632px;
	
}
#menu ul { width: 633px; }
#menu li { float: left; }
#menu a {
	background: url("../img/menu-a.png") repeat-x;
	display: block;
	height: 43px;
	overflow: hidden;
	text-indent: -9999px;
}
#menu .home {width: 68px;}
#menu .home a { background-position: 0 0; }
#menu .home a:hover  { background-position: 0 -43px; }

#menu .claro {width: 89px;}
#menu .claro a { background-position: -68px 0; }
#menu .claro a:hover { background-position: -68px -43px; }

#menu .planos {width: 81px;}
#menu .planos a { background-position: -157px 0; }
#menu .planos a:hover { background-position: -157px -43px; }

#menu .como {width: 139px;}
#menu .como a { background-position: -238px 0; }
#menu .como a:hover { background-position: -238px -43px; }

#menu .duvidas {width: 164px;}
#menu .duvidas a { background-position: -377px 0; }
#menu .duvidas a:hover { background-position: -377px -43px; }

#menu .contato {width: 92px;}
#menu .contato a { background-position: -541px 0; }
#menu .contato a:hover { background-position: -541px -43px; }

#banner {
	position: relative;
	height: 277px;
}

#claro #banner { background: url("../img/banner-claro.jpg") no-repeat; }
#planos #banner { background: url("../img/banner-planos.jpg") no-repeat; }
#como #banner { background: url("../img/banner-como.jpg") no-repeat; }
#duvidas #banner { background: url("../img/banner-duvidas.jpg") no-repeat; }
#contato #banner { background: url("../img/banner-contato.jpg") no-repeat; }
#encomende #banner { background: url("../img/banner-encomenda.jpg") no-repeat; }
#mapa #banner { background: url("../img/banner-mapa.jpg") no-repeat; }


#conteudo {
	padding: 28px 0;
	overflow: hidden;
}
#principal { 
	float: left;
	width: 525px;
}
#home #principal, #mapa #principal  {
	float: none;
	width: 100%;
}
#planos #principal  { width: 545; }
#encomenda #principal  { width: 500; }

#conteudo #principal > div, #conteudo #coluna > div { margin-bottom: 30px; }

#coluna { 
	float: right;
	max-width: 310px;
	min-width: 270px;
	width: 270px;
}
#claro #coluna { width: 300px; }
#encomende #coluna { width: 310px; }
	



.tblPlanos { width: 565px; }
.tblPlanos .nome { width: 125px;}
.tblPlanos .modem { width: 85px;}
.tblPlanos .desconto { width: 145px;}
.tblPlanos .mensal { width: 100px;}
.tblPlanos .opcao { width: 110px; }
.tblPlanos .opcao a { 
	float: right;
	margin-bottom: -5px;
}

.tblPlanos thead { 
	background: #DDDDD6 url("../img/tblplanos-theader-bg.png") repeat-x bottom; 
}
.tblPlanos thead th {
	line-height: 24px;
	height: 24px; 
	padding: 2px 0px; 
}
.tblPlanos thead th, .tblPlanos td { text-align: center; }
.tblPlanos td { padding: 5px 0; line-height: 17px; }
.tblPlanos .info { 
	display: none;
	width: 565px;
}
.tblPlanos .info p {
	padding-left: 20px;
	text-align: left;
}
.tblPlanos tfoot { text-align: left; }
.tblPlanos tfoot th {
	font-size: 10px;
	font-weight: normal; 
	padding: 10px 0 0 20px;
}

.tblPlanos .even {background: #dbdbd2;}

.tblPlanos b { color:#DB311C; }
.tfoot a span {text-decoration: underline;}


#news {
	background: url("../img/banner-form.png") no-repeat;
	height: 227px;
	padding: 50px 15px 0 7px;
	position: absolute;
	right: 0;
	width: 238px;
}
#news legend { font-size: 18px; }
#news ul { padding-top: 15px;}
#news input {
	background: url("../img/banner-input.png") no-repeat;
	height: 24px;
	width: 206px;
}
#news button { margin-right: 5px;}
#news .msg {
	height: 28px;
	line-height: 14px;
	font-size: 10px;
	font-weight: bold;
	color: #c41a05;
}
#news .msg2 {
	clear: both;
	color: #c41a05;
	font-size: 9px;
	font-weight: bold;
	padding-top: 3px;
}

#news p.mensagem { padding-top: 30px; }


#formContato input {
	background: url("../img/contato-input.png") no-repeat;
	width: 496px;
}
#formContato .mascara {
	background: url("../img/contato-textarea.png") no-repeat;
	height: 151px;
	margin-top: 5px;
	padding: 5px;
}
#formContato input, #formContato .mascara { width: 496px; }
#formContato textarea { 
	height: 145px;
	max-height: 145px;
	max-width: 490px;
	width: 490px;
}
#formContato .floatLeft { margin-right: 10px; }
#formContato #msgErroCon { 
	margin-right: 10px;
	color: #f91107;
	font-weight: bold;
}

#formEnc input {
	background: url("../img/enc-input.png") no-repeat;
	width: 295px;
}
#formEnc select { display: none; }
#formEnc .mascara {
	background: url("../img/enc-textarea.png") no-repeat;
	margin: 5px 0 10px;
	padding: 5px;
	width: 286px;
}
#formEnc .mascara textarea {
	background: transparent;
	height: 88px;
	width: 286px;
}


.encomendas li { 
	padding: 12px 0 0 60px;
	height: 40px;
	margin-bottom: 20px;
}
.encomendas li.enc01 { background: url("../img/enc01.png") no-repeat;}
.encomendas li.enc02 { background: url("../img/enc02.png") no-repeat;}
.encomendas li.enc03 { background: url("../img/enc03.png") no-repeat;}

/* BOTOES  */

.bt {
	background: url("../img/bts.png") no-repeat;
	display: block;
	height: 30px;
	overflow: hidden;
	text-indent: -9999px;
}

.tblPlanos .btComprar {
	background-position: -437px -60px;
	height: 22px;
	width: 74px;
}
.tblPlanos .btComprar:hover { background-position: -437px -82px; }

.btMais{
	background-position: -468px 0px;
	float: left;
	height: 14px;
	left: 10px;
	margin-top: 2px;
	position: absolute;
	vertical-align: middle;
	width: 14px;
}

.btLeia {
	background-position: -70px 0;
	width: 208px;
}
.btLeia:hover { background-position: -70px -30px; }

.btComprar {
	background-position: -278px 0;
	width: 86px;
}
.btComprar:hover { background-position: -278px -30px; }

.btSaiba{
	background-position: -364px 0;
	width: 104px;
}
.btSaiba:hover { background-position: -364px -30px; }

.btSolicite{
	background-position: 0px -60px;
	width: 208px;
}
.btSolicite:hover { background-position: 0px -90px; }	

.btEncomendar{
	background-position: -208px -60px;
	width: 229px;
}
.btEncomendar:hover { background-position: -208px -90px; }

.btEnviar { width: 70px; }
.btEnviar:hover {background-position: 0px -30px; }

/*  BOXES  */

#home #boxComo {
	background: url("../img/box-como-bg.png") no-repeat;
	margin-bottom: 40px;
	min-height: 200px;
	padding: 0 0 0 340px;
}

#boxComo .exemplo {
	background: url("../img/como-funciona-img.png") no-repeat;
	height: 212px;
}

#boxPlanos {
	position: relative;
	width: 565px;
}

#boxModem {
	background: url("../img/box-modem-bg.png") no-repeat right top;
	padding: 0 0px 0 0;
	width: 250px;
}
#boxModem p {
	width: 175px;
}
#boxUso{
	background: url("../img/claro-3g-vantagens.png") no-repeat;
	height: 300px;
	margin-bottom: 30px;
	width: 300px;
}

#boxEncomende {
	background: url("../img/box-encomende-img.png") no-repeat 0 30px;
	height: 310px;
	position: relative;
}
#boxEncomende a {
	position: absolute;
	bottom: 0;
	left: 30px;
}

#boxVantagens ul { list-style: none inside url("../img/claro-3g-vantagens-bullets.png"); }
#boxVantagens ul li {
	background: #d2d2cb;
	line-height: 20px;
	padding: 5px 0 5px 10px;
}
#boxVantagens ul li.even { background: #d9d9d4; }

#boxDuvidas dl dt {
	clear: both;
	padding: 10px 0 20px 35px;
}
#boxDuvidas dl span {
	color: #83100b;
	display: block;
	float: left;
	font-size: 22px;
	margin: 0px 0 0 -35px;
	vertical-align: middle;
}
#boxDuvidas dl dd {display: none;}
#boxDuvidas dl dd.view {
	border-bottom: 1px dashed #000;
	display: block;
	margin-bottom: 10px;
	padding: 0 0 20px 35px;
}
#boxFilas {
	background: url("../img/box-fila-bg.png") no-repeat;
	height: 243px;
	padding: 30px 20px 0;
	width: 231px;
}

#footer {
	background: #fff url("../img/footer.png") repeat-x top;
	padding: 15px 0;
	overflow: hidden;
}
#footer ul, #footer p { margin-bottom: 0; }
#footer p { max-width: 300px; }
#footer ul { float: right; }
#footer ul a { text-transform: uppercase; }
#footer li {
	float: left;
	margin-left: 15px;
}


#regulamento {
	padding: 20px;
}

form dl { 
	background: url(../img/enc-select.png) no-repeat;
	margin: 5px 0 10px;
	width: 295px;
}
	.ddFormat dd, .ddFormat dd  { position:relative; }
	.ddFormat a, .ddFormat a:visited { color:#000; text-decoration:none; outline:none;}
	.ddFormat a:hover { color:#74745e;}
	.ddFormat dt a {
		background: url(../img/dropdown-arrow.png) no-repeat 280px 12px; 
		width: 295px; 
		display:block; 
		height: 22px;
		padding: 5px 0 0 10px;
	}
	.ddFormat dt > a {background: url(../img/dropdown-arrow.png) no-repeat 280px 12px;}
	.ddFormat dt a span {cursor:pointer; display:block;}
	.dropdown dd ul { overflow: auto; }
	.ddFormat dd ul { 
		background:#f3f3ee none repeat scroll 0 0; 
		color:#000; 
		display:none;
		left:0px;
		overflow: auto;
		padding:0px; 
		position:absolute; 
		top:2px; 
		width:auto; 
		min-width:170px; 
		width: 295px;
		z-index: 99;
	}
	.ddFormat dd ul li {
		float: none;
		margin: 3px 0;
	}
	.ddFormat dd ul li.even { background: #e3f7f5; }
	.ddFormat span.value { display:none;}
	.ddFormat dd ul li a { 
		padding:5px; 
		display:block;
	}
	.ddFormat dd ul li a:hover { 
		color: #000;
		background-color:#c2c2a4;
	}


.infoPlano { padding: 20px; }
.infoPlano h1 strong {display: inline;}

#boxModemUSB {
	background: url("../img/modal-modem.png") no-repeat;
	padding: 65px 0 0 35px;
	height: 410px;
}
#boxModemUSB h1 strong { display: inline; }
#boxModemUSB ul li {
	background: url("../img/bullet.png") no-repeat 0 6px;
	padding: 2px 0px 2px 15px;
	margin-bottom: 5px;
}
#boxModemUSB a.btComprar {
	background-position: 0 -120px;
	height: 32px;
	margin-left: 90px;
	width: 130px;
}
#boxModemUSB a.btComprar:hover { background-position: 0 -152px; }	



.mapaSite li {
	background: url(../img/setas.png) no-repeat;
	padding: 4px 0 6px 32px;
	margin: 0 0 10px;
}
.mapaSite li ul {
	margin: 0 0 0 35px;
	padding: 20px 0 0;
}
.mapaSite li ul li:last-child { margin: 0px;}