/* Folha de estilo do site pessoal de Rubens dos Santos Guimarães */
/* (#)->indica que id(identicador) e (.)->indica class(classe) */

body { margin:0 auto;                /* Para todas as páginas que incluirem este css, o corpo da página */
       background-color:#999999;     /* terá as características aqui definidas */
}

.clear {clear:both;  /* faz com que a div desta classe venha após o elemento flutuante */               
        display:none;  /*  faz com que a div suma juntamente com o espaço ocupado por ela  */    
}

/*  div que contem o toda a pagina   */
#principal { width:764px; /* largura da div */
             height:512px; /* altura da div */
			 z-index:0; /* profundidade do elemento - indica que ele está na camada zero */
			 margin:0 auto; /* posicionamento da div principal no centro da tela  */
}

/*  div#top é a div do topo da pagina -- ela contem as div's div#top-d e div#top-e */
#top { width:764px; /* largura da div */
       height:125px; /* altura da div */
	   z-index:1; /* profundidade do elemento - indica que ele está na primeira camada */
	   margin:0; /* indica que o valor do espaço das margens externas da div são zero   */
	   padding:0; /* indica que o valor do espaço das margens internas do elemento são zero */
}

/* div#top-d é div do topo do lado direito -- fica dentro da div#top */
#top-d {width:363px; /* largura da div */
        height:105px; /* altura da div */
		z-index:2; /* profundidade do elemento - indica que ele está na segunda camada se sobrepondo a div#top */
		float:right; /* indica que a div flutuará para o lado direito da página */
		background-image:url(../imagens/versiculo.jpg); /* imagem de fundo da div */
		background-repeat:no-repeat; /* faz com que a imagem do fundo não se repita */
}

/* div#top-e é div do topo do lado esquerdo -- fica dentro da div#top */
#top-e {
        width:401px; /* largura da div */
		height:105px; /* altura da div */
		z-index:2; /* profundidade do elemento - indica que ele está na segunda camada se sobrepondo a div#top */
		float:left;  /* indica que a div flutuará para o lado esquerdo da página */
}

/* div#topmenu é a div onde o menu  ficará posicionado -- contém as div's div#topmenu-d e div#topmenu-e*/
#topmenu { width:764px;/* largura da div */
           height:20px; /* altura da div */
		   border:0; /* espessura da borda da div será zero */
}

/* div#topmenu-d é a div que fica a direita e contém os botões de navegação do menu -- está dentro da div#topmenu*/
#topmenu-d{ width:563px; /* largura da div */
			height:20px; /* altura da div */
	z-index:2; /* profundidade do elemento - indica que ele está na segunda camada se sobrepondo a div#topmenu */
			 float:right; /* indica que a div flutuará para o lado direito da página */
			/* background-image:url(../imagens/topmenu-d2.jpg); */
			 background-repeat:no-repeat; /* faz com que a imagem do fundo não se repita */
}

/* div#topmenu-d é a div que fica a esquerda ao lado menu de botões -- está dentro da div#topmenu*/
#topmenu-e { width:201px; /* largura da div */
			 height:20px; /* altura da div */
	z-index:2; /* profundidade do elemento - indica que ele está na segunda camada se sobrepondo a div#topmenu */
			 background-image:url(../imagens/topmenu-e.jpg); /* imagem de fundo da div */
			 background-repeat:no-repeat; /* faz com que a imagem do fundo não se repita */
			 float:left; /* indica que a div flutuará para o lado esquerdo da página */
}

/* div#teste é a div fica abaixo da div#topmenu, é o meio da pagina, está dividida em div#lat-esq e div#lat-dir */
#teste { width:764px; /* largura da div */
         height:387px; /* altura da div */
}

/* div#lat-esq é a div  que está com a imagem do Rubens, situada no lado esquerdo da página */
#lat-esq { width:201px; /* largura da div */
           height:387px; /* altura da div */
		   z-index:1; /* profundidade do elemento - indica que ele está na primeira camada */
		   float:left;  /* indica que a div flutuará para o lado esquerdo da página */
		   background-image:url(../imagens/lat-esq.jpg); /* imagem de fundo da div */
		   background-repeat:no-repeat;	/* faz com que a imagem do fundo não se repita */	   
}

/* div#lat-dir fica posicionada ao lado da div#lat-esq e contem as div's lat-des, lat-ddi */
#lat-dir { width:563px; /* largura da div */
           height:387px; /* altura da div */
		   z-index:1; /* profundidade do elemento - indica que ele está na primeira camada */
		   float:right; /* indica que a div flutuará para o lado direito da página */
}

/* div#lat-des contem as div's lat-des-md e lat-des-ba */
#lat-des { width:504px; /* largura da div */
           height:387px; /* altura da div */
		   z-index:2; /* profundidade do elemento - indica que ele está na segunda camada */
		   float:left; /* indica que a div flutuará para o lado esquerdo da página */
}
/*  div#lat-ddi é  div q fica na estremidade direita da pagina         */
#lat-ddi { width:59px; /* largura da div */
           height:387px; /* altura da div */
		   z-index:2; /* profundidade do elemento - indica que ele está na segunda camada */
		   float:right; /* indica que a div flutuará para o lado direito da página */
}

/* div#lat-des-top localiza-se acima do conteudo de texto onde são colocados os titulos  */
#lat-des-top{ width:504px; /* largura da div */
              height:43px; /* altura da div */
			  z-index:2; /* profundidade do elemento - indica que ele está na segunda camada */
			  background-color:#FFFFFF; /* Cor de fundo da div#lat-des-top */
			  
}

/* div#lat-des-md é a div onde fica localizado o conteudo da pagina */
#lat-des-md { width:504px; /* largura da div */
              height:355px; /* altura da div */
			  z-index:2; /* profundidade do elemento - indica que ele está na segunda camada */
			  background-color:#FFFFFF; /* Cor de fundo da div#lat-des-md */
}

/* div#lat-des-ba é a div localizada na base da página -- contem a div.autor  */
#lat-des-ba { width:504px; /* largura da div */
              height:32px; /* altura da div */
			  z-index:2; /* profundidade do elemento - indica que ele está na segunda camada */
			  background-image:url(../imagens/lat-des-ba.jpg); /* imagem de fundo da div */
			  background-repeat:no-repeat; /* faz com que a imagem do fundo não se repita */
}

/* padronização de texto da pagina*/
.padrao-text {text-align:justify; /* faz com que o texto desta classe receba alinhamento justificado */
               font-size:12px; /* tamanho da letra */
			   font-family:"Helvetica", sans-serif,Arial; /* estabelece qual tipo de letra */
			   color:#333333; /* cor da letra */
}

/* div.autor é a div que comporta os direitos autorais da pagina  */
.autor { font-family:"Arial", Helvetica, sans-serif; /* estabelece qual tipo de letra */
         font-size:9px; /* tamanho da letra */
         font-weight:bold; /* define a estilo da fonte com sendo negrito */
		 text-align:center; /* faz com que o texto desta classe receba alinhamento centralizado */
}

div img { display:block; /* faz com q as div's que possuam imagens atuem com blocos, eliminando os espaços no IE */
}