/*Documento CSS style_css3_atributos.css*/
 body{    
margin: 0;     
padding: 0;    
background-attachment:fixed; 
 background-image: -webkit-linear-gradient(#001F3D, #F5F5DC 70%);
	
}  

h1{
/*border: 1px solid #000;*/
width: 220px;
font-size: 4em;
color: orange;
font-weight: 800;
letter-spacing: 3px; /*espaçamento entre as letras*/
line-height: 40px;
 text-shadow: 10px 12px 3px orange; /*sombra no título*/
}

nav ul{
       background-color: #4D6277; 
	overflow: hidden;
	padding: 0;
	color: white;
	text-align: center;/*centraliza as palavras home...etc*/
	margin: 0;
	-webkit-transition: max-height 0,4s;
	-ms-transition: max-height 0,4s;
	-moz-transition: max-height 0,4s;
	-o-transition: max-height 0,4s;
	transition: max-height 0,4s;
	transition: max-height 0,4s;

}
nav ul li{
        display: inline-block;
	padding: 20px;
	text-align: center;
}

nav ul li a{
color:orange;/*cor menu topo home, css, contato*/
}
nav ul li:hover{
background-color: #F5F5DC;/*cor que aparece quando se passa o mouse*/
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;

webkit-border-top-left-radius: 0.5em;
webkit-border-top-right-radius: 0.5em;

}

.handle{
	border-bottom: 2px solid orange;
	width: 100%;
	background-color: #383838;/*handle==============================================*/
	text-align: left;
	box-sizing: border-box;
	padding: 10px 10px;
	cursor: pointer;
	color: white;/*cor da palavra menu*/
	display: none;
}


@media screen and(max-width: 580px){
	nav ul{
	max-height: 0;
	}
	.showing{
	    max-height: 20em;
	}
	nav ul li {
	    box-sizing: border-box;
		width: 100%;
		padding: 15px;
		/*text-align: left;*/
	}
}
.handle{
    display: block;
}

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

#container{ /*Lembrete: digitar a cerquilha colada a palavra div. Se ficar espaço não funciona*/
	width: 55%;
	/*height: 60px; /*tirar a altura por causa do texto*/
	border:1px dotted black;
	margin: 0 auto;/*centraliza a div*/
	background-color: beige; /*colocando background-color: ActiveBorder; fica com a cor da janela ativa*/
	padding:25px;/*afasta o texto da margem superior da div e não do browser*/	 
	}
		 
	 
 h2, h3{
     text-align: center;
     font-family: "lucinda sans", "lucida grande", verdana, sans-serif;/*fonte genérica*/
     color:#000066;
 }
h4{
font-size: 1.3em;
color:darkorange;
}
p{
font-size: 1.2em;
}
	
 li{
   font-family:"lucida grande", "lucinda sans", verdana,sans-serif;/*fonte genérica*/
   color: orange;
}
		  
em{
   color: blue;
   font-size: 1.2em;
   font-weight: 800;
}		  
#footer img{
   float: right;
}	 

h4::before{
	content: ">> ";
}

.titulo::before{
	content: "* ";
}

.imagem li::before{
    content: url(/static/img/estrelinha.jpg);
}

li {
    list-style: none;
}
pre{
-moz-hyphens:auto;
-ms-hyphens:auto; 
-webkit-hyphens:auto;
hyphens:auto;
word-wrap:break-word;
}

#footer{
width: 100%;
height: 80%;
padding-top: 15px;
padding-bottom: 10px;
margin-bottom: 2px;
text-align: center;
 background-image: -webkit-linear-gradient(#F5F5DC, #001F3D 70%);  /* */ 
	
}