/*Documento CSS style_links_decifrados.css*/
 body{    
        margin: 0;     
	padding: 0; 
	/*background-color: #8B8682;*/ 
	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, .p, .h2, .em, .li, .a, .frase, #h4:hover, #p, #special_link, p:hover{
	  min-width: 240px;
	  width: 240px;
	 background-color: beige;
  }
}      
 #container{ /*div maior 
/*Lembrete: digitar a cerquilha colada a palavra div. Se ficar espaço entre as duas, não funciona*/
	width: 55%; /*largura da div, onde o texto está inserido*/
	/*height: 60px; /*tirar a altura por causa do texto, se o texto for pequeno dá para deixar*/
	margin: 0 auto; /*centraliza a página*/
	border:0.1em dotted black; /*C0C0C0;*/
	padding: 2em;/*afasta o texto da margem superior da div e não do browser*/	 
	background-color: #F5F5CC; /*background-color: beige; /*colocando background-color: ActiveBorder; fica com a cor da janela ativa*/
	font-family: "lucinda grande", "lucinda sans", verdana, sans-serif;
	font-size: 1em;/* aumenta a fonte do texto dentro da div -tamanho em pixels*/ 
	 } 
	
h2{
   color: blue;
   font-size: 26px;/* aumenta a fonte do cabeçalho -tamanho em pixels*/
   text-align: center;
	}
	
li{
    text-decoration:none;/*remove toda decoração do link*/
    color:#000;
    background-color:#DDDDDD;/*cor de fundo do link*/
    border:1px solid black;/*cinza claro*/
    width:150px;/*largura do box do link*/
    display:block;/*para conseguir aplicar uma largura em um elemnto inline, deve-se transformá-lo em bloco*/
    padding:3px 5px;/*espaçamento entre o link e a borda (palavra e a borda)*/
}

a.text:link{
color:#ff0000;
}

a [href^="http:"]{/*lembre-se sempre de colocar aspas duplas*/
	background-color: #FFD700;
    display:block;/*para conseguir aplicar uma largura em um elemnto inline, deve-se transformá-lo em bloco*/
    padding:3px 5px;/*espaçamento entre o link e a borda (palavra e a borda)*/
    width:150px;/*largura do box do link*/
}

/*usar no lugar de special link
a.text:link{
   /*e todas as propriedades que ele terá
   font-family: Comic Sans MS, Challenge Extra Bold, Arial, Helvetica, sans-serif;
   font-size: 2em;
   color:#FFFFFF;
   margin-left: 3%;
}*/

#special_link{/*lembre-se sempre de colocar aspas duplas*/
	background:url(/static/img/http.jpg) no-repeat right top;
	display:block;/*para conseguir aplicar uma largura em um elemnto inline, deve-se transformá-lo em bloco*/
	padding:3px 5px;/*espaçamento entre o link e a borda (palavra e a borda)*/
	width:250px;/*largura do box do link*/
}
	
a[href^="mailto:"]{/*lembre-se sempre de colocar aspas duplas*/
		background:url(img/email.png) right top;
		padding-right:5px;
	}

a[href$=".zip"]{/*lembre-se sempre de colocar aspas duplas*/
		background:url(img/zip.gif) no-repeat right top;
		padding-right:15px;
	}

em{
  color: #009933; /*verde*/
}

	
			
.frase{
    font-family:"Segoe Print", "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:1em;
    color:#EE7600;
    font-style: italic; 
}		
			
	
#h4:hover{ /*a propriedade hover é muito usada para se conseguir
         efeitos em divs e textos.*/
        background-color: #6959CD;
        width: 30%; /*largura da div, onde o texto está inserido*/
        /*height: 60px; /*tirar a altura por causa do texto, se o texto for pequeno dá para deixar*/
        border:1px dotted black; /*C0C0C0;*/
        padding-top:12px;/*afasta o texto da margem superior da div e não do browser*/	 
        padding-left:12px;/*afasta o texto da margem esquerda da div e não do browser*/	  
        padding-right:12px; /*altera a cor da div se passar o mouse*/
	}

			
p:hover{
      text-transform: uppercase;/*transforma em maiúscula o texto escondido*/
      font-size: 14px;/*aumenta a letra desse mesmo texto*/
      width: 40%;
      color: blue;
	}

 #p{
  width: 40%; /*largura da div, onde o texto está inserido*/
  text-transform: none;/*transforma em maiúscula o texto escondido*/ 
  font-size: 14px;
  color: #2e2e2e;
  }	

p{
  width: 20%; /*aumenta ou diminui o bloco do texto, aqui sofrer para não morrer*/
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size:4px; /*muda o tamanho da fonte na palavra ou frase que foi escrita com o seletor <p> neste caso sofrer para não morrer*/
  color:#2e2e2e;
	}
a:hover{
      color:#DDDDDD;/*cor das palavras frutas, legumes,  e que eram blue e passaram a ser pretas*/
      background-color:#000;/*a cor que era cinza passou a ser preta*/
        }

a:hover {
    letter-spacing: 10px;/*espaçamento entre as letras de um texto*/
    font-size: 1.4em;
    color:red;
}

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