/*Documento CSS aula-25 style_posicionamento_fluxo_continuacao.css*/
body{
margin: 0;     
padding: 0; 
background-attachment:fixed; 
background-image:url(/static/img/textura-escura1.jpg)
/*background-repeat: no-repeat;
background-position: 5px;*/
} 

/*Pra dispositivos que tem uma largura mínima de 768 pixels. Tablets, por exemplo.*/
@media screen and (max-width: 720px) {
      #container, .imagem, .destaque, .um, .dois, .tres, .frase,  .h1, .h2, .h3, .p{
	  min-width: 240px;
	  width: 240px;
	 /*background-color: aqua;*/
  }
}	

#container{
	width: 55%;
	margin: 0 auto;/*centraliza a página*/
	border-top:1px dotted black;	 
	padding:1.5em;/*afasta o texto da margens da div e não do browser*/
	background-color: #F5F5DC;/*colocando background-color: ActiveBorder; aqui fica com a cor da janela ativa*/
	}

.frase{/*uso do id no elemento inline em*/
      font-size: 1.4em;
      background-color: #CCCCFF; 
}

.destaque{
  border: 1px dotted black;
  width: 60%;
  float:right;
  margin: 0.5em;/*Afasta das margens da div*/
  background-color: #F5F5F5; /*WhiteSmoke*/
  padding-left: 1.25em; /*afasta o texto da lateral esquerda do box*/
  padding-top: 1.25em; /*afasta o texto do topo do box*/
  padding-bottom: 1.25em; /*afasta o texto da parte inferior do box*/
  font-size: 1em;
  box-shadow: 5px 5x 15px 10px #8B4513;
  }
		 
.um{
background-color: #F5F5DC;
border:1px dotted black;
padding: 0.75em;
margin: 0 auto;
width: 80%;
/*height:200;*/
top: 120px;
left: 14px; 
z-index:-1;

/*clear: left; /*both, para limpar o float de ambos os lados
/*float:left;*/
}

.dois{
background-color: #FFF8DC;/*#ADFF2F;*/
border:1px dotted black;
padding: 0.75em;
margin: 0 auto;
width: 80%;
height:400;
left: 0.875em;
top: 120px;
/*float:left;*/
z-index:-2;
}
.tres{
background-color:#EEE8AA;
border:1px dotted black;
margin: 0 auto;
padding: 0.75em;
width: 60%;
/*height:200px;*/
left: 0.875em;
top: 120px;
float:left;
z-index:-2;
}

li{
margin: 10px; /*separa um box de menu do outro*/
color:#990000;/*vermelho escuro*/
font-size: 1.4em;
font-style:italic; 
float:left;
width:80px;
list-style:none; /*retira a marcação de lista. As bolinhas*/
border:1px dotted black;
padding: center; /*centraliza o texto dentro do box*/
}

h1.imagem{
/*border: 1px dotted black;*/
float: left;
background-image:url(/static/img/img_geom.jpg);
width: 100%;
height: 150px;
background-repeat: no-repeat;
}

h2{
color: #990000;
text-align: center;
}

h3{
border: 1px solid black;
	width: 840px;
	float:left;
}

em{
background-color: #EBCF87;/*bege, #E3BC58; dourado escuro*/
font-size: 1em;
}	
p{
font-size: 1em;
}