/* CSS Document */
/*Facts.com.br - Criado por Allan Sanches - contato@flashtoons.com.br  */

/*  -------------------- ESTRUTURA ------------------------  
estruturação do site, containers, posicionamento e tamanho 
-----------------------------------------------------------
* -  usado várias vezes

1 - reset, body, tudo - centralizador
2 - links
3 - topo
		container do topo
			topo cima
				logo
				banner
			topo baixo
				imagem do topo - rotatoria
4 - page config
		barra esquerda do menu principal
		container do conteudo principal
			*corpo do conteudo principal - centralizador
		*subconteudo esquerdo
		*subconteudo direito
5 - rodape
		rodape divisoria
		rodape container
			rodape termos de uso - img rotatoria
			rodape credits
				rodape credits logo
6 - blog
		barra de título do blog - container
			borda esquerda e borda direita
			ícone título e data
		container botões dos posts
		config de textos do blog
7 - menu lateral esquerdo lista e links
		*areas - ou categorias
8 - facts page
		*quotes container - tb onde vai os thumbs
		*alinhamento a direita dos thumbs
		*alinhamento a esquerda dos thumbs
		*facts page títulos
		*lista ordenada dos facts
9-  topo bar
		container
		topobar left
		right
		topobaner
10 - outras configurações
		config dos textos dentro de tabelas
		*blocos horizontais de conteúdos das páginas internas
		*spacer para por entre os blocos horizontais de conteúdos das páginas
		*alinhamentos de textos
		topolink - link topo que vai no rodapé
		aviso de manutenção
		textarea da pag sobre o facts - cod dos banner
11 - banners
		topo
		rodapé
12 - variaveis
		facts characters thumbs bg
/

/*------------------------------------------------------------------- 1 */
/*reset*/
* { padding:0; margin:0; }

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px; color: #333333;
	background-color:#114953;
	background-image:url(http://www.facts.com.br/Imagens/bg.jpg);
	background-repeat:repeat-x;
	background-position:left top;
	background-attachment:scroll;
	text-align:center;}                              


#tudo{
	width:950px; position:relative;
	margin-left:auto; margin-right:auto;}



/* LINKS ------------------------------------------------------------------- 2 */
/*links - normais fora do menu principal*/
a {	color:#82AC20 ; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight:bold;}
a:visited {	color:#82AC20 ; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight:bold;}
a:active {	color:#82AC20 ; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight:bold;}
a:hover { color: #5F7D17; text-decoration: none;}

/* links do rodapé */
a.rodape:link{	color:#FFFFFF ; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight:bold;}
a.rodape:visited { color:#FFFFFF; text-decoration: none;}
a.rodape:active { color:#FFFFFF; text-decoration: none;}
a.rodape:hover { color:#C9D41E; text-decoration: none;}

/* links da topobar - infinitehost patrocínio */
a.topobar:link{color:#C1D0D2 ; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;  font-weight:normal;}
a.topobar:visited { color:#C1D0D2 ; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;  font-weight:normal;}
a.topobar:active { color:#C1D0D2 ; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;  font-weight:normal;}
a.topobar:hover { color:#FFFFFF ; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;  font-weight:normal;}

/* blog titulo */
a.blog:link{ color:#FFFFFF ; text-decoration: none; font: 13px Verdana, Arial, Helvetica, sans-serif; font-weight:bold;}
a.blog:visited { color:#FFFFFF; text-decoration: none; font: 13px Verdana, Arial, Helvetica, sans-serif; font-weight:bold;}
a.blog:active { color:#FFFFFF; text-decoration: none; font: 13px Verdana, Arial, Helvetica, sans-serif; font-weight:bold;}
a.blog:hover { color:#114953; text-decoration: none; font: 13px Verdana, Arial, Helvetica, sans-serif; font-weight:bold;}



/* TOPO ------------------------------------------------------------------- 3 */
/*container do topo*/
#topocontainer { 
	position:relative; clear:both;
	width:950px; height:298px;}

/*parte de cima do topo onde vai o logo e os anuncios*/
#topocima { 
	width:950px; height:110px;
	background: url(http://www.facts.com.br/Imagens/logo.jpg) no-repeat scroll left top;}

/*parte de baixo do topo, aqui vai a imagem rotatoria do topo com os personagens*/
#topobaixo { position:relative; width:950px; height:188px;}



/* PAGE CONFIG------------------------------------------------------------------- 4 */
/* corpo de todo o conteúdo - principal e menu - com faux coluns do conteudo principal e menu*/
#page{
	position:relative; clear:both; width:950px;
	background: url(http://www.facts.com.br/Imagens/pagebg.jpg) repeat-y scroll left top;}

/* barra lateral verde principal, menu e parcerias etc */
#menuprincipal{ width:216px; position:relative; float:left; text-align:center;}

/* container do conteúdo principal */
#conteudoprincipalcontainer{
	width:734px; position:relative; float:right;
	text-align:center;}

/* corpo do conteúdo principal centralizado com margin */
#conteudoprincipal{
	width:706px; text-align:left; 
	position:relative; margin-left:auto; margin-right:auto;}

/* divide o espaço do conteudo primcipal 706w em 2 colunas pra conteúdo */
/* coluna da esquerda */
.subconteudoesq{
	width:344px; text-align:center; 
	position:relative; float:left;}

/* coluna da direita */
.subconteudodir{
	width:344px; text-align:center; 
	position:relative; float:right;}




/* RODAPÉ ------------------------------------------------------------------- 5 */
/* rodapé divisória */
#rodapedivisoria{
	width:950px; height:9px;
	position:relative; clear:both; line-height:9px;
	background: url(http://www.facts.com.br/Imagens/rodapedivisoria.jpg) no-repeat scroll center top;}

/* rodapé conteúdo container */
#rodapeconteudo{
	width:950px; height:147px;
	background: url(http://www.facts.com.br/Imagens/rodapebg.jpg) repeat-x scroll left top;}

/* rodapé termos de uso - imagens dos carinhas lá */
#rodapetermos{
	width:475px; height:147px;
	position:relative; float:left;}

/* rodapé credits container - container das informações de texto e img ftstudio no canto direitor */
#creditsdir {width:204px; float:right;}
	
/* rodapé credits */
#rodapecredits{
	width:204px; height:98px;
	position:relative; float:right; clear:right;
	padding-right:15px; text-align:right; color:#FFFFFF;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	line-height:17px;}

/* rodapé credits logo */
#rodapelogo{
	width:122px; height:49px;
	position:relative; float:right;}


/* BLOG ------------------------------------------------------------------- 6 */
/* Blog Título container */
.blogtitulocontainer{width:706px; height:28px; position:relative; clear:both; background:url(Imagens/blogtitulobg.jpg) repeat-x; position:relative; float:left;}

/* Blog Título borda esquerda */
.blogbordaesq{ width:16px; height:28px; background: url(Imagens/blogbordaesq.jpg) no-repeat; position:relative; float:left;}

/* Blog Título borda direita */
.blogbordadir{ width:16px; height:28px; background: url(Imagens/blogbordadir.jpg) no-repeat; position:relative; float:left;}

/* Blog Título ícone */
.blogicone{width:15px; height:19px; margin-top:4px; position:relative; float:left;}

/* Blog Título */
.blogtitulo{ 
	width:591px; height:28px; position:relative; float:left;
	text-align:left; font: 13px Verdana, Arial, Helvetica, sans-serif; line-height:28px; font-weight:bold; color:#FFFFFF;}

/* Blog Título data */
.blogdata{ 
	width:68px; height:28px; position:relative; float:left;
	text-align:right; font: 10px Verdana, Arial, Helvetica, sans-serif; line-height:28px; color:#FFFFFF;}

/* Container dos botões comentar e link do post */
.blogbotoescontainer{width:706px; height:23px; position:relative; clear:both; margin-bottom:15px; text-align:right;}

/* texto do blog e about */
.newstexto{
	text-align:left; font: 12px Verdana, Arial, Helvetica, sans-serif;
	width:706px; padding-top:12px; padding-bottom:36px;
	position:relative; clear:both;}


/* MENU ------------------------------------------------------------------- 7 */
.menu {
	width: 216px;
	font: bold normal 12px Verdana, Arial, Helvetica, sans-serif;
	color: #333333; text-decoration: none;}


.menu li{
	list-style: none;  height: 25px;
	background: #BBDE61;
	margin-top: 1px;
	border-bottom:1px dashed #E3F2B7;	
	text-align: center; line-height:25px;}
	
.menu li a{
	border-left:7px solid #E3F2B7;
	color: #333333; display:block;}

.menu li a:visited{
	border-left:7px solid #E3F2B7;
	color: #333333; display:block;}
	
.menu li a:hover{
	border-left:7px solid #FFFFFF;
	background-color:#CBE683; 
	color: #333333; display:block;}	

.menu li a:active{
	border-left:7px solid #E3F2B7;
	background-color:#CBE683;
	color: #333333; display:block;}

/* divisória das categorias - variação de bg*/	
.menuareas{ width:216px; position:relative; clear:both;}


/* FACTS PAGE ------------------------------------------------------------------ 8 */
/* container da área do topo onde vai a foto e o quote */
.factsquotes{width:706px; border-bottom:1px dashed #000000; position:relative; clear:both;}

/* alinhamento pros textos a ESQUERDA do thumb */
.txtesq{
	text-align:center;
	background: url(http://www.facts.com.br/Imagens/quoteesquerda.jpg) no-repeat scroll left top;
	padding-left:25px; padding-bottom:15px; padding-right:160px;}

/* alinhamento pros textos a DIREITA do thumb */
.txtdir{
	text-align:center;
	background: url(http://www.facts.com.br/Imagens/quotedireita.jpg) no-repeat scroll right top;
	padding-right:25px; padding-bottom:15px; padding-left:160px;}
	
/* facts page titulos */
.factstitulos{
	width:706px; position:relative; clear:both;
	text-align:center; font-weight:bold;}
	
/* lista ordenada dos facts - tem um hack pra corrigir a largura desta lista no internet explorer, o hack ta no arquivo topo.htm*/
.factslista ol { 
	list-style:decimal; list-style-position:outside; 
	width:664px; padding-left:42px;}
.factslista ol li { margin-bottom:25px;}


/* PATROCÍNIO - TOPOBAR  - BANNER's ------------------------------------------------ 9 */
/* container */
#topobarcontainer{
	width:950px; height:29px;
	position:relative; clear:both;
	background: url(http://www.facts.com.br/Imagens/topobarfundo.jpg) repeat-x scroll left top;}

/* left */
#topobarleft{
	width:500px; height:29px;
	position:relative; 	float:left;
	background: url(http://www.facts.com.br/Imagens/topobarapoio.jpg) no-repeat scroll left top;
	font: 11px/29px Verdana, Arial, Helvetica, sans-serif;
	color: #C1D0D2; text-align:right;}

/* right */
#topobarright{
	width:160px; height:29px;
	position:relative; 	float:right;}


/* OUTRAS CONFIGURAÇÕES ------------------------------------------------------------------- 10 */
/* config dos textos dentro de tabelas */
table td {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px; color: #333333;}
	
/* blocos de conteúdo pras págians internas */
.conteudoblocos{
	width:706px; position:relative; clear:both;
	margin-left:auto; margin-right:auto;}
	
/* espaçador - insere espaço horizontal entre os conteúdo blocos e tb é o hack da altura do conteúdoblocos */
.spacer{
	width:706px; height:20px;
	position:relative; clear:both;
	margin-left:auto; margin-right:auto;}
	

/* alinhamentos de textos  */
.esquerda{ text-align:left;}
.direita{ text-align:right;}
.centro{ text-align:center;}

/* link "topo" que vai no rodapé - container */
.topolink{
	position:relative; float:right; clear:both;
	width:734px; height:36px; line-height:36px;}

/* aviso de manutenção*/
.manutencao{
	width:706px; text-align:center; color:#FF6600;
	border:1px dashed #FF6600; margin-top:10px; margin-bottom:10px;}

/* banner codes*/
#bannercode textarea{
	text-align:center; font-size:11px; color:#999;
	width: 230px; background:none; border:none;}
	

/* AdSense Banner's containers ------------------------------------------------ 11 */
/* banner do topo */
#topobaner{
	width:728px; height:90px;
	position:relative; 	float:right;
	margin-top:13px;}

/* banner do rodape */
.rodapebaner{
	position:relative; clear:both;
	width:728px; height:90px; text-align:center;
	margin-top:15px; margin-bottom:20px; margin-left:auto; margin-right:auto;}


/* VARIAVEIS ------------------------------------------------------------------- 12 */
/* thumbs */
#jeremias{background: url(http://www.facts.com.br/Imagens/jeremias.jpg) no-repeat scroll right bottom;}
#castro{background: url(http://www.facts.com.br/Imagens/castro.jpg) no-repeat scroll right bottom;}
#nascimento{background: url(http://www.facts.com.br/Imagens/nascimento.jpg) no-repeat scroll left bottom;}
#billgates{background: url(http://www.facts.com.br/Imagens/billgates.jpg) no-repeat scroll right bottom;}
#josoares{background: url(http://www.facts.com.br/Imagens/josoares.jpg) no-repeat scroll left bottom;}
#silviosantos{background: url(http://www.facts.com.br/Imagens/silviosantos.jpg) no-repeat scroll left bottom;}
#chucknorris{background: url(http://www.facts.com.br/Imagens/chucknorris.jpg) no-repeat scroll right bottom;}
#jolie{background: url(http://www.facts.com.br/Imagens/jolie.jpg) no-repeat scroll right bottom;}
#tiosam{background: url(http://www.facts.com.br/Imagens/tiosam.jpg) no-repeat scroll left bottom;}
#molusco{background: url(http://www.facts.com.br/Imagens/lulamolusco.jpg) no-repeat scroll right bottom;}
#enem{background: url(http://www.facts.com.br/Imagens/enem.jpg) no-repeat scroll left center;}
#bernardinho{background: url(http://www.facts.com.br/Imagens/bernardinho.jpg) no-repeat scroll left bottom;}
#futebol{background: url(http://www.facts.com.br/Imagens/futebol.jpg) no-repeat scroll right bottom;}
#placas{background: url(http://www.facts.com.br/Imagens/placas.jpg) no-repeat scroll right bottom;}