/*Documento CSS style_eventos_mouse_exemplo.css*/

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

/*#container{
	 width:60%;
	 height: 90%;/*1950px;
	 border: 1px dotted white;
	 padding: 2em;
	 margin: 0 auto; 
	 background-color: #8FBC8F; /*verde
	 box-shadow: 0.1em 0.2em 0.1em 0.3em #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) {
      .click, .span:hover, message, #footer{
	  min-width: 240px;
	  width: 240px;
	 /*background-color: aqua;*/
  }
}	
 .click{
	  padding:1.4em;
	  border: 0.4em solid aqua;
	  font-size: 1em; 
	  color: black;
	  font-family:"lucinda grande", "lucinda sans", verdana, sans-serif;
	  background-color: beige; /**/
	  margin-left: 10%;
  }
 
 span:hover{
	  background:black; 
	  color: beige;
	  margin-left: 10%;
  }

.message{
	width: 20%;/*largura da div cinza*/
	height: 20px;
	border: 0.3em dotted black;
	font: 1.4em verdana;
	 padding: 3em;
	 background-color: #CCC; /*cinza*/
	 margin-left: 10%;
	 margin-bottom: 20px; /*as duas sobem juntas*/
 }
a{
font: 1.4em verdana;
color: beige;
}

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