/*Documento CSS style_dimensao_posicao.css*/

body{
     background-attachment: fixed;
     background-image:url(/static/img/textura-escura2.jpg);
     /*background-repeat: no-repeat;*/
}		 

 /*Pra dispositivos que tem uma largura mínima de 768 pixels. Tablets, por exemplo.*/
@media screen and (max-width: 720px) {
      #container, h1, h2, h3, .ul, .li, .p, pre, message, .toglle, #footer{
	  min-width: 240px;
	  width: 240px;
	 /*background-color: aqua;*/
  }
}	
#container{
	 width: 55%;
	 /*height: 90%;/*1950px;*/
	 border: 0.1em dotted white;
	 padding: 2em;
	 margin: 0 auto; 
	 background-color: #8FBC8F; /*verde*/
	 box-shadow: 0.1em 0.2em 0.1em 0.3em #CC6A13;/*o 1º número é da sombra direita, o 2º é da parte debaixo*/
  }
.imagem{
	width: 50%;
	display:block;
	margin: 5px auto;
	 border: 6px dotted black;
	 padding: 1.4em;
	 background: #CCC;
}
 span:hover{
  background:black; 
  color: blue;
  }
  
 span{
  border: 0.3em solid black;
  font-size: 1.4em; 
  background-color: yellow;
  font-family:"lucinda grande", "lucinda sans", verdana, sans-serif;
  }

 p{
  /*width: 240px;
  border: 3px dotted white;*/
  text-align: justify;
 }
   
 em{
    color: #B00000; 
  }  
 li{
     font-size:1em;
	 color: #B00000; 
  }

 h2{
	color: #002059;
	text-align:center;
 }
    
h3{
     color: #002059;
  }
    
pre{
font-family: Arial, "lucinda grande", "lucinda sans", verdana, sans-serif;
 font-size: 0.875em;
color: #181818;
}

/*início de específico eventos-mouse.html-----*/
.toglle{/*o elemento span .togle precisa ser transformado em bloco para declarar  widt, height etc.--*/
 display: block;
   width: 30%;
  border: 0.3em solid black;
  font-size: 1.4em; 
  background-color: yellow;
  font-family:"lucinda grande", "lucinda sans", verdana, sans-serif;
  margin-left: 10%;
  }

.h2{
 width: 30%;
  background-color: beige;
  margin-left: 10%;
}
.message{
     width: 30%;
     height: 20px;
     padding: 1.4em;
     border: 0.3em dotted white;
     font: 1.2em verdana;
     background-color: #CCC; /*cinza*/
     margin-top: 10px;/*afasta do topo*/
     margin-left: 10%;
 }
 
pre{
-moz-hyphens:auto;
-ms-hyphens:auto; 
-webkit-hyphens:auto;
hyphens:auto;
word-wrap:break-word;
}
/*início de específico organização-biblioteca.html--------*/
#botao{
     /*width: 100px;*/
	 /*height: 90%;/*1950px;*/
	 border: 1px dotted white;
	 padding: 5px;
	 margin: 0 auto; 
	 background-color: #FFF; /*#CCEBD6;*/
	 box-shadow: 1px 3px 1px 3px #000;/*o primeiro número é da sombra direita, o 2º é da parte debaixo*/
	 border-radius: 5px; /*deixa a borda da caixa (div) arredondada*/
	-moz-border-radius: 5px; /*deixa as bordas arredondadas*/
	-webkit-border-radius: 5px;/*para que funcione em outros navegadores*/
  }

/*fim de específico organização-biblioteca.html--------*/
#footer{  
	width: 55%;  
	height:	36px;
	margin-left: 20%;
	margin-bottom: 15px;
	padding-bottom: 26px; /*afasta o texto da parte de baixo do box*/  
 }