/* Documento CSS */

/*
OBS:

1) Escrever tudo em MINÚSCULO

2) Usar a unidade de medida 'em' (RELATIVA ) pois somente assim o IE
permite o usuario alterar o tamanho da fonte, se usar 'px' não 
funciona. Usar 'pt' somente PARA IMPRESSÃO

3) A unidade do tamanho TEM QUE ESTAR JUNTO DO TAMANHO, Exemplo: 450px, se ficar afastado NÃO FUNCIONA !!!

4) Para o tamanho 0 NÃO PRECISA USAR px ou outra unidade de tamanho

5) Na ordem abaixo vamos colocar na seguinte ordem:
		1) TAGS HTML
		2) DIVS
		3) CLASSES
		
6) Colocar tudo em ORDEM ALFATÉTICA, TAGS e PROPRIEDADES

7)NO HTML use <DIV> </DIV>  para usar os ID´s , pois SPAN o IE NÃO ENTENDE !!!

7) A Ordem das propriedades é : Top, Right, Bottom, Left 

	Exemplo: margin: 0 10px 20px 0;
	
	
8) EXEMPLOS DE USO DE ATRIBUTOS EM UMA ÚNICA LINHA:

background: #CCCCCC url(imgs/fundo.gif) repeat-x top left fixed;

border-bottom: 1px solid #000000;

font: bold 1.0em "Verdana"; 

Tem que ser sempre nesta ordem:
(peso + tamanho + fonte).
O atributo font sempre tem mais prioridade em relação as suas variações. 


 
 
 /*  GERAL  */
 
  * { /* Definição para todas as tags , NÃO FUNCIONA NO IE 4.x   */
  
/*	font: 1.0em/1.2em Arial, Helvetica, sans-serif;  */

	margin:0;
	padding:0;   
	
 } 
 
 /* TAGS HTML     */
 
 /* L I N K S  */
 
 /* NA SEGUINTE ORDEM 
link
visited
hover
active
*/
a:link {
   color: Blue;
	text-decoration: none;
	
}

a:visited {
	color:Blue;
	text-decoration: none;
	
	
}

a:hover {
	/* color: #FF9900;  */
	color:#6e442c;
	text-decoration: underline;
	text-align: left;
}
 
body {
	background:url(../images/fundo/fundo.gif);
	background-color:#B3C7E2;
	margin: 15px 10px;
	padding:0;
	text-align:right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
}
td, th {
	font: 0.9em/1.1em Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;

}

img {
	border:0;
	text-align: center;
}


p { 
	text-indent : 3em;
	margin: 0 0 10px 0;
}

p.primeiro{
	margin : 20px 0 10px 0;
}


acronym {
	border-bottom: 1px dotted #666;
	font-sytle: normal;
	/* O dotted NÃO FUNCIONA NO IE 5 , POREM NÃO VEJO PROBLEMA
        EM USAR ESTA OPÇÃO, APENAS ALGUNS NÃO IRÃO VER O SUBLINHADO */
}
 
  
 /*   -----   IDENTIFICADORES -> ID -> DIV    */



#agenda, #aulas, #faleconosco, #feijoada,  #fotos, #historico, #imprensa, #voltainic, #ondecomprar, #videos {
	font: 10px/10px Arial, Helvetica, sans-serif;
	position: absolute;
	height: 13px;
	
}


#divulga {
	border:2px groove #FFFFFF;
	position:absolute;
	width:640px;
	height:480px;
	z-index:2;
	left: 183px;
	top: 197px;
}

#dez2007, #fev2007, #jan2008, #mar2008, #abr2008 {
	font: 11px/11px Arial, Helvetica, sans-serif;
	position: absolute;
	height: 15px;
	
}


#voltar  {
	font: 12px/12px Arial, Helvetica, sans-serif;
	position: absolute;
	height: 15px; 
}

.agendalinha {
	border-bottom:2px solid #000000;
	width:420px;
	margin: 12px 0 10px 270px;
	_margin: 2px 0 10px 270px;
	*margin: 2px 0 10px 270px;
}




#aulas {
	
	width: 33px;
	
}

#contatoaula {
	/* background-color:#C70015; */
	/* background-color:#0099FF;  */
	background:#3DC4FC url(../images/fundo/aulasfundo.jpg) repeat-x; 
	/* background-color:#3DC4FC; */
	font-size: 16px;
	font-weight:bold;
	/* height:98px; */
	margin: 20px 0 0 28px;
	padding:5px 0;
	width:93%;
	_width:98%;
	*width:92%;
}


#contato {

	float:left;
	font-family:Verdana;
	margin:10px 10px;
	text-align:left;
	width:380px;
}

#contato form     {
	font-size: 11px;
}

#contato input, textarea {
	border-top: 1px solid #333;
	border-left: 1px solid #333;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	color: #0E0659;
	font-size: 11px;
	margin-bottom: 10px;
	
}

#contato label {
	display: block;
	width: 80px;
	float: left;
	color: #000;
	border-bottom: 1px solid #f1f1f1;
	
	
}

#contato .botao {
	font-size:13px;
	background:#f1f1f1;
	margin:15px 0px 0px 0px;
}

#contato legend {
	color:#000000;
	font-size:14px;
	font-weight:bold;
	margin:0 0 20px 0;
}

#contato fieldset {
	width:380px;
	border:1px solid #CC9900;
	padding:3px;
}

/* Essa classe é especifica para acessibilidade, infelizmente não fuunciona no IE :P */
#contato input:focus, select:focus, textarea:focus {
	background:#eee;
	color:black; 
	font-weight:bold;
}


#faleconosco {
	
	width: 76px;
	
}

#figpandprinc {
	background: transparent url(../images/comum/pand/pand.gif) no-repeat 30px 20px;
	float: left;
	margin:0;
	position: relative;
	/* height: 380px;
	width: 320px;  */
	height: 230px;
	width: 270px;  
}

#filipeta {
	
	margin:-170px 0 30px 0;
	_margin:-170px 0 0 0;
	*margin:-150px 0 0 0;
	
	height: 396px;
	width: 280px;
	
}

#filipetajan2008 {
	
	margin:-170px 0 130px 0;
	_margin:-80px 0 0 0;
	*margin:-60px 0 0 0;
	
	height: 250px;
	width: 280px;
	
}
#filipetamar2008 {
	
	margin:-170px 0 130px 0;
	_margin:-40px 0 0 0;
	*margin:-20px 0 0 0;
	
	height: 420px;
	width: 280px;
	
}

#filipetaabr2008 {
	
	margin:-240px 0 130px 0;
	_margin:-260px 0 0 0;
	*margin:-240px 0 0 0;
	
	height: 388px;
	width: 280px;
	
}

#filipetadez2007 {
	
	margin:-170px 0 130px 0;
	_margin:-80px 0 0 0;
	*margin:-60px 0 0 0;
	
	height: 266px;
	width: 280px;
	
}




#feijoada {
	width: 49px;
	
}

#fotos {
	
	width: 31px;
	
}

#historico {
	left: 74px;
	top: 201px;
	width: 55px;
	
}


#imprensa {
	left: 16px;
	top: 186px;
	width: 54px;
	
}

.itemagenda {
	/* _margin:-20px 0 0 250px;  */
	width:420px;
	_width:420px;



	*width:420px;
	margin-top: 0px;
	margin-right: -25px;
	margin-bottom: 0px;
	margin-left: 280px;
	padding-right: 2px;
	
}

#menufeijoadas2007 {
	background: transparent url(../images/placas/pandmenus2007.gif) no-repeat 0 0;
	float: left;
	margin:50px 0 0 30px;
	position: relative;
	/* height: 380px;
	width: 320px;  */
	height: 150px;
	width: 150px;  
}

#menufeijoadas2008 {
	background: transparent url(../images/placas/pandmenus2008.gif) no-repeat 0 0;
	float: left;
	margin:50px 0 0 80px;
	position: relative;
	/* height: 380px;
	width: 320px;  */
	height: 150px;
	width: 150px;  
}

#voltainic {
	left: 12px;
	top: 125px;
	width: 32px;
	
}


#ondecomprar {
	left: 227px;
	top: 99px;
	width: 64px;
	
}



#videos {
	left: 5px;
	top: 160px;
	width: 37px;
	
}




/* C   L   A   S   S   E  S */

/* .destaque {
	margin-bottom:10px;
	margin-left:230px;
	margin-right:50px;
	margin-top:10px;
	line-height:120%;
	border: dashed thin #00CCFF;
	padding:5px;
}   */


 .destaque {
	/* margin-bottom:10px;
	
	margin-right:30px;
	margin-top:10px;
	line-height:140%;
	border: dashed thin #00CCFF;
	padding:5px;  */
/*	background-color:#0099FF;  */
	font-style:italic;
	/* font-weight:bold;  */
	margin-left:280px;
	margin-top:20px;
	margin-bottom:30px;
	
	
}   


/* LAYOUT DO SITE   */

#conteudo {
	/* border:3px solid #003366;  */
	background-color:#B3C7E2;
	width: 744px; 
	margin:0px auto 0px auto;
	/* margin:auto ;  PARA FUNCIONAR CENTRALIZADO NO FF e OPERA, que incluem
	a borda fora da caixa (contrario ao IE que inclui dentro ), sobrando espaço 
	assim no FF e OPERA */
	 display:table; 
	
	/* ESTA TAG SERVE PARA QUE CONTEUDO TENHA UM "COMPORTAMENTO" DE TABELA
	E EXPANDA COM AS TAGS QUE ESTÃO DENTRO DELA NO FF e OPERA , POIS SO OCORRIA 
	AUTOMATICAMENTE NO IE
	SOLUÇAO DADA PELO COLEGA Leonardo Procopio leonardolp@gmail.com   */
	
	
}

#conteudocentral, #conteudocentralagenda, #conteudocentralfotos, #conteudocentralminiaturas {
	background-color:#B3C7E2;
	float:left;
	margin:0;
	padding:0;
	/* position:relative;  */
	text-align:left;
	/*width:590px;  */
	width:100%;
}


#conteudocentralfotos #linkspandeiros a:hover {
	text-decoration:none;
}




#conteudocentralagenda, #conteudocentralminiaturas {
	background-color:#B3C7E2;
}



#conteudocentral h1 {
	font-size:16px; 
/*	position:absolute;  */
	/* left:300px;  */
	text-align:left;
	/* width: 75%;  */
/*	top: 175px;  */
}

#conteudocentralagenda h1 {
	font:40px/45px Arial, Helvetica, sans-serif;
	position:absolute;
	left:373px;
	text-align:center;
	width: 488px;
	top: 177px;
}

#conteudocentralminiaturas h1 {
	font:30px/35px Arial, Helvetica, sans-serif;
	position:absolute;
	left:413px;
	_left:335px;
	*left:413px;
	text-align:center;
	width: 440px;
	top: 183px;
}


#conteudocentralfotos h1 {
	font:35px/40px Arial, Helvetica, sans-serif;
	position:absolute;
	left:310px;
	margin:-10px 0 0 0;
	text-align:center;
	width: 500px;
}


#conteudocentralagenda p.meses, #conteudocentralminiaturas p.meses {
	font-size:22px;
	margin:10px 100px -10px 0;
	text-indent:0;
	text-align: left;
	
	
	
}

#conteudocentralagenda p.meses2, #conteudocentralminiaturas p.meses2 {
	
	font-size:22px;
	margin:10px 0 -10px 270px;
	text-indent:0;
	
	
	
}

#conteudocentralagenda p.linha, #conteudocentralminiaturas p.linha {
	
	text-indent:0;
	
	
	
}


#conteudocentralagenda p.anoagenda {
	font-size:22px;
	margin:60px 40px 0 0;
	text-align: right;
	font-weight: bold;
	
	
}





#conteudocentral h2 {
	font-size:10px;
	margin-right:20px;
	_margin-right:11px;
	*margin-right:11px;
	margin-top:3px;
	_margin-top:5px;
	*margin-top:5px;
/*	position:relative;  */
	text-align:right;
}


#geral {
	background-color:#B3C7E2;
	/* background-image:url(fauxedopan.jpg);
	background-repeat:repeat-y;
	background-position: 7px 0;  */
	border:4px solid #CCCCCC;
	margin: auto; 
	/* precisa ser usado para centralizar no FF e no Opera  */
	width: 750px;

}

.linha {
	clear:both; 
	margin:0;
	padding:0;
	text-align:left;
}

#topo {
	background-color:#B3C7E2;
	height: 150px;
	width:750px; 
	margin:auto;
	/* overflow:auto;  PARA DEPURAR */
	/* margin:auto ;  PARA FUNCIONAR CENTRALIZADO NO FF e OPERA, que incluem
	a borda fora da caixa (contrario ao IE que inclui dentro ), sobrando espaço 
	assim no FF e OPERA */
	
}
#topo h1 {
	color:#FF0000;
	float:left;
	text-indent:-999em;

}

#topologo {
	bbackground-color:#B3C7E2;
	background-image:url(../images/comum/topo/topo_r1_c1.jpg);
	background-repeat:no-repeat;
    float:left;
	margin:0;
	width:147px;
	height:150px;
	
}

#topoparte1 {
	background-color:#B3C7E2;
	background-image:url(../images/comum/topo/topo_r1_c2.jpg);
	background-repeat:no-repeat;
    float:left;
	width:310px;
	height:114px;
	margin:0;
		
}

#topoparte2 {
	background-color:#B3C7E2;
	background-image:url(../images/comum/topo/topo_r1_c3.jpg);
	background-repeat:no-repeat;
    float:left;
	width:293px;
	height:114px;
	margin:0;
		
}
#topocabec {
	background-color:#B3C7E2;
	float:left; 
	height:34px;
	width:600px;
	margin:0;
		
}

#cabec, #cabecdata {
	/* color: #9CA6A5;  */
	color:#6e442c;
	float:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	height:34px;

}
#cabec{
	background-color:#B3C7E2;
	/* font-style : italic;  */
	padding:2px 0 0 2px;
	text-align:left;
	width:300px;
	
}
#cabecdata{
	background-color:#B3C7E2;
	padding:2px 4px 0 0;
	text-align:right;
	width:290px;
	
}



#menuesq, #lateraldireita {
	background-color:#B3C7E2;
	width: 140px; 
	
}

#miniaturafotos {

	margin:70px 0 0 300px;
	_margin:-150px 0 0 300px;
	width:380px;

}

#placaofic {
	height:86px;
	margin:100px 0 0 10px;
	width:120px;
	
}


#menuesq, #lateraldireita { float: left; } 
/* DECIDI USAR #lateraldireita como float:left ao inves de right
POIS no FF e Opera dá uma diferença na margem direita, assim
o menuesq  e lateraldireita ficam DIFERENTES !!    */

#tabminiatura  {
	border-collapse:collapse;
	width:350px;  
}

	
#tabminiatura tr td {
	/* border:1px solid #FFCC00;  */
	
	text-align:center;
	
}


#coluna, #coluna2 { float:left; }

#coluna { width:100%}

#coluna { background-color:#B3C7E2; }

#coluna2 { background-color:#B3C7E2;}


#celula, #celula2 {
	/* border:3px; 
	border-style:solid;  */
	background-color:#B3C7E2;
	padding:5px 0 0 5px;
	text-align:left;
	width: 99%;
	/* _width: 100%;
	*width: 100%;  */
	 _width: 99%;

	*width: 99%;	clip: rect(auto,100px,auto,auto);
	
	
}



.letrainicial  {
	font-size:25px;
	_font-size:22px;
	*font-size:22px;
}


#rodapearea {
	background-color:#B3C7E2;
	margin:auto;
	padding:0 2px 0 0;
	/* margin:auto ;  PARA FUNCIONAR CENTRALIZADO NO FF e OPERA, que incluem
	a borda fora da caixa (contrario ao IE que inclui dentro ), sobrando espaço 
	assim no FF e OPERA */
}


#rodape {
	background-color:#B3C7E2;
	/* border-top:1px solid #666666;  */
	clear: both;
	/* para não permitir que objetos "flutuantes" obstruam o rodapé. */
	/* TEM QUE SER USADO, POIS a DIV conteudo NÃO TEM UM VALOR FIXO, ASSIM ESTA 
	DIV (rodape ) NÃO TEM COMO SE ORIENTAR   */
		
	height: 38px;
	margin:auto; 
	width:736px;
	
	
}


#rodapetexto {
	background-color:#B3C7E2;
	font: smaller/100% Arial, Helvetica, sans-serif;
	padding:7px 0px 1px 0px;
	text-align:center;
	
}

#figbloco {
	background-image:url(../images/homepage/bloco.jpg);
	float:left;
	height:267px;
	margin:0 10px 0 0;
	width:200px;
}


/* OFICINAS */

#leituraritmica {
	/* border:3px solid #003366;  */
	background-color:#B3C7E2;
	text-align:left;
	width: 700px; 
	margin:0px auto 0px auto;
	}

#leituraritmica #btnfechar {
	background-color:#B3C7E2;
	float:left; 
	width:400px;
	margin: 20px 0 30px 70px;
	text-align:center;
	
	
}

#leituraritmica h1 {
	padding:0;
	
	text-align:center;
}

#leituraritmica p {
	font:large bold Arial, Helvetica, sans-serif;
	margin:10px 0 10px 0;
	
}


#acima {
	
	float:left;
	height:20px;
	margin: 20px 0 0 0;
	width:10px;
	
}

#figurabasica1 {
	
	height:220px;
	width:690px;
}

#figurabasica2 {
	height:106px;
	width:290px;
}

#data {
	font:large bold Arial, Helvetica, sans-serif;
	margin:150px 0 30px 0;
	width: 260px;
}

#leitura1 {
	height:415px; 
	width:700px;
}
#leitura2 {
	height:415px; 
	width:700px;
}
#leitura3 {
	height:342px; 
	width:700px;
}

#leitura4, leitura5, leitura6{
	height:342px; 
	width:700px;
}

#leitura7 {
	height:360px; 
	width:700px;
}

#leiturapand {
	float:left; 
	height:92px;
	margin:20px 0 0 50px;
	width:273px;
}

#leituracresc {
	float:left; 
	height:120px;
	margin:20px 0 0 15px;
	width:380px;
}




/** ALINHAMENTO **/
.cen {
 text-align: center;
}
.esq {
 text-align: left;
}
.dir {
 text-align: right;
}
.justif {
 text-align:justify;
}

/* NEGRITO */

.negrito {
	font-weight:bold;
}