/*Documento CSS - style_design_responsivo.css*/
{
margin:0;
padding:0;
text-decoration:none;
}

body{
     /*background-attachment: fixed; */                           
     background-image:url(/static/img/listas-cinza-paint5.png);
     background-repeat: repeat;
 }

/*-----------------------------------------------------*/
/* Reset CSS */
*, *:after, *:before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 0.95em;
  line-height: 1.5;/*espaçamento entre as linhas, se o nº for muito baixo a escrita se sobrepõe*/
}

/*Fundo do menu*/
.menu{
  width: 100%; 
  position: fixed;
  background: #6D8D4D;/*verde*/
}

/*Remove as bolinhas do lado das listas*/
.menu .menu-list, .menu .sub-menu{
  list-style: none;
}
/* Configura todos os links do nosso menu */
.menu a{
  color: #fff;
  text-decoration: none;
  display: block;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 1em; /*12px*/
  letter-spacing:0.2em; /*espaçamento entre as letras (H o m e)*/
}
/*Faz os <li>s ficarem na horizontal*/
.menu > .menu-list > li{
  position: relative;
  float: left;
}
/* Configura os links do menu principal */
.menu > .menu-list > li > a {
  padding-left: 2.0em;/*espaçamento entre as palavras (home etc.) do menu */
  padding-top: 1em;/*espaçamento entre as palavras (home etc.) do menu */
  padding-bottom: 1em;/*espaçamento entre as palavras (home etc.) do menu */
  margin: 0 5px; 
  background: #6D8D4D;/*para que a cor fique uniforme*/
}
/* Configura o fundo do menu principal quando com mouse hover */
.menu > .menu-list > li:hover a {
 background: #A9BF94; /*#6D8D4D;*/
}

/*Mostra o submenu no evento de mouse hover*/
.menu > .menu-list > li:hover > .sub-menu {
  display: block;
}
/*Configura o estilo do submenu*/
.menu > .menu-list > li > .sub-menu {
  position: absolute;/*com relative os elementos se distancia e ficam maiores*/
  top: 35px;/*espaçamento entre o submenu e o topo*/
  left: 0.5em;
  background: beige;/*Cor do submenu*/
  z-index: 1000;
  display: none;
}
/*Configura os links do submenu*/
.menu > .menu-list > li > .sub-menu > li > a {
	padding: 10px 20px;/*o primeiro número aumenta o submenu na vertical, o 2º aumenta na horizontal*/
	margin-bottom: 1px; /*separa os links do submenu com uma linha*/
}
/* Clearfix para o menu */
.menu:after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

/*--------------------------------------------------------------------------*/	

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

#container{
    /*border: 1px dotted #E3BC58;*/
	width: 60%;
	/*height:100px; altura da div*/
	margin:auto;/*10px desloca a div container da margem esquerda do browser*/
	margin-bottom: 10px;/*10px desloca uma div da outra e auto centraliza a div*/
	border-bottom: 1px solid #D7D7D7;
	background-color: #FFFFFF; /*cor de fundo*/
	padding: 3%; /*desloca o texto da margem esquerda da div. Não do browser*/
	box-shadow: 1px 2px 1px 2px #686868;/*o primeiro número é da sombra direita, o 2º é da parte debaixo*/
	-moz-hyphens:auto;  
	-ms-hyphens:auto;  
	-webkit-hyphens:auto;  
	hyphens:auto;  
	word-wrap:break-word;  
	 }	

#cabecalho{
    min-width: inherit; /*declarando dessa forma no remedisionamento não há quebra*/ 
    font-size: 0.875em; /*13px*/ 
     padding: 0.2em;
    background-color: aliceblue; /**/ 
	}
em{
font-size: 1em;
 background-color:azure;
}

h1{
    text-align: center;
    font-size: 1.8em;
     color: #B00000;
	}
h2{
    text-align: center;
    font-family: "lucinda grande", "lucinda sans", verdana, sans-serif;
    font-size: 1.6em;
	}

h3{
    text-align: center;
    font-family: "lucinda grande", "lucinda sans", verdana, sans-serif;
    font-size: 1.4em;
	}
h4{
    text-align: center;
    font-family: "lucinda grande", "lucinda sans", verdana, sans-serif;
    font-size: 1.2em;
	}

p{
    text-align: justify;
    padding: 1.25em; /*20px;*/
    color: #2e2e2e;
    font-size: 1.2em;
	}
.p{ 
width: 90%;
background-color:azure;}


h1 + p {
color:red;
}

/*===========início do menu-simples para o tutorial==========*/
.menu-simples{
	max-width: 80%;
	margin: 10px auto;
	background: #29293A;
	text-align: center;
	border-radius: 5px;
}

.menu-simples > a{
	display: inline-block;
	padding: 10px;
	color: beige;
}

/*===========fim do menu-simples para o tutorial==============*/
/*Remove as bolinhas do lado das listas*/
li{
  list-style: none;
}

table{
margin: 0 auto ! important;
text-align: center;
width: 100%;
}
 
#footer{
        float: left;
	width: 100%; 
	height:100px;/*altura da div*/
	padding: 1.25em; /*20px*/
        /*color: beige;
	background: #000; /*preto*/ 
	/*box-shadow: 4px 8px 1px 10px #181818; /*o primeiro número é da sombra direita, o 2º é da parte debaixo,*/
	}