/*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: 2em;
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: 10px;/*espaço ao redor de home, economia, contato, etc.*/
	text-align: center;
}

nav ul li a{
color:orange;/*cor menu topo home, css, contato*/
font-size: 0.875em; /*tamanho da fonte, home, economia, contato, etc.*/
}

nav ul li a.selecionado{
display: block; /*declarar display block, para colocar largura*/
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;
color: darkorange;
padding: 10px;
}

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*/	 
	}
span{
     margin-left: 2em;
     font-size: 2px;
     color: darkblue;
 }

span:hover{
display: block;
margin-left: 1em;
background-color: #F5F5DC;/*cor que aparece quando se passa o mouse*/
font-family: "segoe print", "lucida grande", verdana, sans-serif;/*fonte genérica*/
color:black;
font-size: 1em;
text-align: justify;
}

 h2{
     text-align: center;
     font-family: "lucinda sans", "lucida grande", verdana, sans-serif;/*fonte genérica*/
     color:#000066;
 }

 h3{
     text-align: center;
     font-family: Arial, "lucinda sans", "lucida grande", verdana, sans-serif;/*fonte genérica*/
     color:#181818;
 }

.h4{ color:#000066;
}

h4{
font-size: 1.3em;
color:darkorange;
}
h5{
color: darkorange;
font-size: 1em;
}
h6{
font-size: 0.875em;
}
p{
font-size: 1.2em;
color: #404040;
text-align: justify;
}
	
 li{
   font-family:"lucida grande", "lucinda sans", verdana,sans-serif;/*fonte genérica*/
   color: orange;
}
.i{
color: green;
}		  
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);
}*/

.p{
color:#CC9900;
text-align: justify;
}

li {
    list-style: none;
}
a.text:link{
   /*e todas as propriedades que ele terá*/
   font-family: Comic Sans MS, Challenge Extra Bold, Arial, Helvetica, sans-serif;
   font-size: 1em;
   color: darkorange;
   margin-left: 3%;
}
   
iframe{
display:block;
margin: 0 auto;
width: 50%;
height: 170px;
}

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

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