/*Documento CSS tiposbordas*/
 body  {    
        margin: 0;     
	padding: 0;    
	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, #direita, #esquerda, .img, .p, .h1, .h2, .h3, .h4, .h5, .h6, .ul, .li, .a{
	  min-width: 240px;
	  width: 240px;
	 /*background-color: aqua;*/
  }
}
#container{ /*Lembrete: digitar oa cerquilha colada a palavra div. Se ficar espaço não funciona*/
border:0.2em solid green;
margin: 0 auto; /*centraliza a página*/
width: 70%;
/*height: 60px; /*tirar a altura por causa do texto*/
}
		  
#direita{
	width: 80%;/*aumenta a largura da div verde div de cima */
	/*height: 400px;*/
        border: 0.1em solid black;
	margin: 0 auto; /*centraliza a página*/
	background:#C1FFC1;
	border-radius:0.5em;
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;/*para que funcione em outros navegadores*/
	box-shadow: 0.5em 0.875em 1.5em 1.8em #8B4513;/*o 1º número é da sombra direita, o 2º é da parte debaixo*/
	padding-top:10px;/*afasta o texto da margem superior da div e não do browser*/	 
	padding-left:1.6em;/*afasta o texto da margem esquerda da div e não do browser*/	  
        padding-right:1.8em;/*afasta o texto da margem direita da div e não do browser*/	  
	}
	
#esquerda{
	width: 80%;/*aumenta a largura da div cor de rosa, a div de baixo*/
	/*height: 400px;*/
        border: 1px solid black;
	margin: 0 auto; /*centraliza a página*/
        background:#FFEFDB;
	border-radius:0.5em;
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;/*para que funcione em outros navegadores*/
	box-shadow: 0.5em 0.875em 1.5em 1.8em #8B4513;
	padding-top: 5px;/*afasta o texto da margem superior da div e não do browser*/	 
	padding-left:1.6em;/*afasta o texto da margem esquerda da div e não do browser*/	  
        padding-right:1.8em;/*afasta o texto da margem direita da div e não do browser*/	  	
  }
img{
  max-width:100%;
  height:auto;
}

h1{
width:40%;
height: 40px;
border-width: 0.2em;/*aumenta o tamanho das bolinhas do pontilhado*/
border-style: dotted;/*Dotted: borda pontilhada:*/
border-color: #6A5ACD;
}

h2{
width:40%;
height: 40px;
border-width: 0.5em;
border-style: inset;/*inset: borda em baixo relevo*/
border-color: red;
}


h3{
    width:40%;
    height: 40px;
    border-width: 5px;
    border-style: solid; /*Solid: borda contínua*/
    border-color: orange;
}

h4{
width:40%;
height: 40px;
border-width: 5px;
border-style: double;
border-color: #9400D3;
}

h5{
width:40%;
height: 40px;
border-width: 5px;
border-style: dashed; /*Dashed: borda tracejada*/
border-color: #CD2626 ;
}

h6{
width:40%;
height: 40px;
border-width: 12px;
border-style: groove;/*Groove: borda entalhada*/
border-color: #228B22;
}
li{
font-size: 1.2em;
}
p{
  font-family:Arial, "Arial Black" "Trebuchet MS", Helvetica, sans-serif;
  font-size:1em; /*muda o tamanho da fonte na palavra ou frase que foi escrita com <p>*/
  color:#000000;
 text-align: justify;
}
	  
blockquote{
font-family:"Arial Black" "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1.2em; /*muda o tamanho da fonte na palavra ou frase que foi escrita com <p>*/
color:#000000;
font-weight:bold;
text-align: center;
}

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