/* 
	Reset CSS para padronização do código
-----------------------------------------------------------*/
* {
	margin:0;
	padding: 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	list-style:none;
	text-decoration:none;
	border:none;
}


/* 
	Padronização

-----------------------------------------------------------*/
h1 { font-size:36px; line-height: 40px; margin: 5px 0; }
h2 { font-size:30px; line-height: 34px; margin: 4px 0; }
h3 { font-size:24px; line-height: 28px; margin: 3px 0; }
h4 { font-size:16px; line-height: 20px; margin: 2px 0; }
h5 { font-size:14px; line-height: 18px; margin: 1px 0; }
p { font-size:12px; line-height: 16px; }


/*
	Início da estruturação básica
	
-----------------------------------------------------------*/

body {	background:  #FFF; }


#content { display:block; margin: 0 auto; max-width:980px; height: 100%; position:relative; z-index: 1 }

/* Topo */

#topo { display:block; width: 100%; height: 30px; background:#F90; }

#topo a { display:block; float:left; width: 100px; height:30px; background:url(img/terra.gif) no-repeat; text-indent: -10000px; }

/* Header */
#header { float:left; min-height: 155px; width: 100%; background:#BEB7AF; position:relative; border-bottom: solid 1px #BEB7AF; }

#banner { float:right; width: 829px; height: 90px; position:relative; z-index:9; background:none; margin:9px 10px 9px; }

#header h1, #header a { 
	background: /*url(https://sdp.terra.com.br/image/klavika?c=ph&t=T%EDtulo%20do%20Infogr%E1fico) 5px 5px no-repeat*/ #fff;
	float:left;
	position : relative;
	min-width : 70%;
	*width: 70%;
	/*min-height : 40px;*/
	height:auto;
	z-index : 1;
	font-size:24px;
	color: #47432a;
	padding: 2px 0;
	text-transform:uppercase;
}
#header h1 {top: 7px; /*text-indent: -50000px;*/ width: 100%; z-index:1; border-bottom: solid 1px #BEB7AF;}
#header h1 img { margin-left: 5px;}

/*
	Rede Sociais

------------------------------------------------------------*/
/* Compartilhar 10/06/2010 */

.compartilhar {
	background:transparent url(https://www.terra.com.br/esportes/infograficos/selecoes-da-copa/img/compartilhar.gif) no-repeat scroll 0 -5px;
	position:absolute;
	left:800px;
	top:156px;
	width:161px;
	z-index:100;
}
#facebook, #twitter, #orkut {
	display:block;
	float:right;
	width:23px;
	height:30px;
	background:url(https://www.terra.com.br/noticias/listas/img/facebook-2.gif);
	margin-left:4px;
	text-indent:-5000px;
	overflow:hidden;
}
#twitter { background:url(https://www.terra.com.br/noticias/listas/img/twitter-2.gif); }
#orkut {
	background:url(https://www.terra.com.br/noticias/listas/img/orkut-2.gif);
	text-indent:0;
}
#orkut img {
	-moz-opacity:.01;
	filter:alpha(opacity=01);
	opacity:.01;
}
#facebook:hover, #twitter:hover { background-position:0 -30px; }
#img-post {
	position:absolute;
	left:-5000px;
	top:-5000px;
}


/* 
	Menu

--------------------------------------------------------------*/
#menu { float:left; min-height: 36px; width: 100%; position:relative; margin-top: 0; border-bottom: dotted 1px #BEB7AF; display:none; }

#menu li { float:left; border-right: solid 1px #BEB7AF; padding: 0 7px; margin: 10px 0; }

#menu a { line-height:16px; color:#47432a; font-weight:bold;}
#menu a:hover {color: #f90; }

#sel a {color:#f90;}

.mne a { float:right; color:#f90 !important; text-align:right; margin: 10px 5px 10px; }
.mne a:hover { text-decoration:underline; }




/*
	Conteúdo 

-------------------------------------------------------------*/
#info { display: block; position:relative; width:100%; max-width:980px !important; height: 100%; min-height: 400px; float:left; clear:both; z-index: 1; margin-top:2px; }

	/* assistente de navegação */
	
#linkao, #linkao a { display:block; position:absolute; top:0; left:0; width: 100%; height: 100%; z-index:3; text-indent:-50000px;  }

#prox_ant  { display:block; float:right; width: 50px; height: 24px; position:relative; z-index: 5; margin: 3px 3px 0 0; }
#prox_ant a.ant  { display:block; float:left; width:24px; height: 24px; background:url(img/ant.gif) 0 0 no-repeat; text-indent:-50000px; }
#prox_ant a:hover.ant { background:url(img/ant.gif) 0 -24px no-repeat; }

#prox_ant a.pro  { float:right; width:24px; height: 24px; background: url(img/prox.gif) 0 0 no-repeat; margin-right: 1px;  text-indent:-50000px; }
#prox_ant a:hover.pro  { background: url(img/prox.gif) 0 -24px no-repeat; }


	/* submenu */
	
#menuvertical { float:left;  width: 240px; position:relative; z-index: 9; margin:20px 0; }

#menuvertical li { float:left; width:108px;  height: 32px; margin:2px 2px 0 0; padding: 0 5px; font-size:13px; }
#menuvertical a { display:block; font-size:11px; line-height:14px; color:#47432a; font-weight:bold; width:105px; height: 30px; padding: 0 3px; background: #fff; border: dotted 1px #CCC;  }
#menuvertical a:hover {color: #f90; border: solid 1px #f90; width:105px; height: 28px; }

#sel a {color: #f90; border: solid 1px #f90; width:105px; height: 30px;}


	/* blocos de texto */
#texto {
	display:block;
	z-index: 4;
	width:250px;
	margin: 20px 0 0 20px;
	position:relative;
}

#texto p { margin: 10px 0 0; line-height:15px; }
#texto h4 { font-size:12px; line-height:16px;  color:#7f7871;}
#texto h2 { font-size:24px; line-height: 24px; letter-spacing:-1px;}

.colTotal {  width: 98%; min-width: 240px; margin: 5px 10px;}
.colMeia {  width: 47%; min-width: 240px; margin: 5px 10px;}
.colTerco { width: 32%; min-width: 120px; margin: 7px 10px; }
.colQuarto { width: 24%; min-width: 120px; margin: 3px 10px; }
	
.olho { width:90%; padding: 25px; font-size: 150%; line-height:normal; text-align:center; }
.quote { font-family:Georgia, "Times New Roman", Times, serif; }


	/* Imagens */
#foto {
	display:block;
	position:absolute;
	z-index: 1;
	left : 550px;
	top:40px;
}
#contador { display:block; float:left; position:absolute; top: 0; left: 0; margin: 0; padding: 4px;}
#legenda { display:block; float:left; position:absolute; bottom: 0; *bottom: 3px; left: 0; margin: 0; padding: 5px;}
#credito { display:block; float:left; position:absolute; bottom: 0; *bottom:3px; right: 0; margin: 0; padding:2px 4px;}

#credito p { font-size:10px; } 

#texto.bgAlpha,
#contador.bgAlpha,
#legenda.bgAlpha,
#credito.bgAlpha { 
	background:#000;
	opacity: .70;
	filter:alpha(opacity=70);
	-moz-opacity:0.70;
}

	/* Floats */
.left {float:left;}
.right {float:right;}
	
	/* Classes de correção: quebram a linha pra início de novo bloco ignorando o float anterior */
.clear {clear:both; } 
.clrRight {clear:right}
.clrLeft {clear:left}

	/* Classes para aprimorar o texto */
.negrito { font-weight:bold;}
.italico { font-style:italic;}


	/* Cores da Paleta Átomo */
.branco { color:#fff; }
.laranja { color:#f90; }
.cinza1 {color: #eceae7; }
.cinza2 {color: #beb7af; } /* padrão de textos com fundo escuro */
.cinza3 { color: #978e81; }
.cinza4 {color: #7f7871; }
.cinza5 {color: #5d5850;}
.cinza6 { color:#47432a; } /* padrão de textos com fundo claro */
.laranja2 { color: #e67607; }
.laranja3 { color: #ffe4b4; }
.verde { color:#9bc80d; }
.vermelho { color:#cb3906; }
.cinza7 { color:#99938d; }
.cinza8 { color:#aca299; }
.cinza9 { color:#676767; }
.cinza10 { color:#999;}
.cinza11 { color:#ccc;}
.azul {color:#3a90fb;}

	
	
/* Ajustes individuais */

.bgcapa { background: url(img/bg_claro.jpg) no-repeat;}
.bgfoto {background:url(img/bg_foto.jpg) no-repeat 0 -80px #000;}	
.bgtexto {background:#000; padding: 10px; }
.scroll {height: 276px;  overflow:auto; padding-top:0; }
.borda3 { border:solid 3px #000; }
.borda1 { border:solid 1px #000; }



/* Mais */

#info.mais #texto{
	top : 0px;
	left : 5px;
	padding-right : 0px;
	border : none;
}

#info.mais #texto p{
	float : left;
	margin : 5px;
}
#info.mais #texto p,
#info.mais #texto p a{
	width : 220px;
	display : block;
	height : 82px;
	font-weight : bold;
	line-height : 12px;
	font-size : 11px;
	color : #47423a;
}
#info.mais #texto p a:hover{
	color : #ff9900;
	text-decoration : none;
}
#info.mais #texto p a img{
	border : 3px solid #fff;
	float : left;
	margin : 0 5px 0 0;
}
#info.mais #texto p a:hover img{
	border : 3px solid #ff9900;
}
#info.mais #texto h2{
	font-size : 18px;
	margin : 0 0 0 5px;
	width : 750px;
	height : 45px;
	line-height : 45px;
}





#info.mais #texto{
	top : 0px;
	left : 20px;
	width : 925px;
	position : absolute;
	padding-right : 0px;
	height : 1200px;
	border : none;
	overflow : hidden;
}

#info.mais #texto p{
	float : left;
	margin : 6px 2px;
}
#info.mais #texto p,
#info.mais #texto p a{
	width : 180px;
	display : block;
	height : 82px;
	font-weight : bold;
	line-height : 12px;
	font-size : 11px;
	color : #47423a;
}
#info.mais #texto p a:hover{
	color : #ff9900;
	text-decoration : none;
}
#info.mais #texto p a img{
	border : 3px solid #fff;
	float : left;
	margin : 0 5px 0 0;
}
#info.mais #texto p a:hover img{
	border : 3px solid #ff9900;
}
#info.mais #texto h2{
	font-size : 18px;
	margin : 0 0 0 5px;
	width : 750px;
	height : 45px;
	line-height : 45px;
}