/*Documento CSS style-declaracoes-estruturas.css*/
body{
     background-attachment: fixed;
     background-image:url(/static/img/textura-escura2.jpg);
     /*background-repeat: no-repeat;*/
} 
 
#container{
	 width: 50%;
	 border: 1px dotted white;
	 padding: 1.4em;
	 margin: 0 auto; 
	 background-color: #8FBC8F; /*#CCEBD6;*/
	 box-shadow: 1px 2px 1px 3px #CC6A13;/*o primeiro número é da sombra direita, o 2º é da parte debaixo*/
	 }

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

h1, h3{
  color: #696969; /*#98B7BD;*/
  text-align: center;
  }

h4{
  color: #8B4513;
  text-align: center;
} 

ol, p{
   text-align: center;
    font-size: 1.2em;
 }

 li{
   text-align: center;
   list-style:none; /*retira a marcação de lista. As bolinhas*/
} 
 
em {
    color: #CC6A13;
   font-size:1.2em;
}	
span.destaque{
  border: 1px dotted black;
  width: 60%;
  float:right;
  margin: 0.5em;/*Afasta das margens da div*/
  background-color: #E8E8E8;/* #E7ECF0; /*#FFE680; /*#FFFF99; #8B4513; 98B7BD;*/
  padding:1em; /*afasta o texto do box*/
  font-size: 1em;
  box-shadow: 2px 2px 1px 1px #8B4513; /*1ªdireita, 2ªinferior,  3ªnão faz diferença, 4ªdistribui em torno de tudo*/
  }

pre{
-moz-hyphens:auto;
-ms-hyphens:auto; 
-webkit-hyphens:auto;
hyphens:auto;
word-wrap:break-word;
}

#footer{  
	width: 55%;  
	height:	36px;
	margin-left: 20%;
	margin-bottom: 15px;
	padding-bottom: 26px; /*afasta o texto da parte de baixo do box*/  
 }