/*Documento CSS  - style_informantes_camelot.css*/
body{
     /*background-attachment: fixed; */                           
     background-image: url(/static/img/textura-preta-manchada.jpg);
     background-repeat: repeat;
 }

/*--------------------------------------------------------------------------*/
/* Reset CSS */
*, *:after, *:before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.5em;
}

/* Fundo do menu */
.menu{
/*position: fixed; não declarar, porque ao diminuir a tela o texto fica escondido*/
background: #000;
 /*height: 100px; melhor não declarar a altura, porque o fundo preto aumenta a medida que se aumenta o zoom*/
}
/* 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;
  letter-spacing:0.2em;
}
/* 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: 5px;
  margin: 0 5px;
  background: #000;
}
/* Configura o fundo do menu principal quando com mouse hover */
.menu > .menu-list > li:hover a {
  background: #444;
}
/* Mostra o submenu no evento de mouse hover */
.menu > .menu-list > li:hover > .sub-menu {
  display: block;
	padding: 1px;
}
/* Configura o estilo do submenu */
.menu > .menu-list > li > .sub-menu {
  position: absolute;
  top: 40px;/*sob o submenu */
  left: 2px;
  background: beige;/* Cor do submenu */ 
  min-width: 200px;
  z-index: 1000;
  display: none;
}
/* Configura os links do submenu */
.menu > .menu-list > li > .sub-menu > li > a {
padding:5px 5px;/*espaçamento entre as palavras do submenu e a parte cinza*/ 
}

/* 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, .accordion, .menu .menu-list, li, .p, .menu .sub-menu, a{
	  min-width: 240px;
	  width: 100%;
	 /*background-color: aqua;*/
  }
}

#container{
        margin-top: 1px;
	width: 60%;
	/*height:100px; altura da div*/
	float: left;
	margin-left: 20%;/*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*/
	text-align: center;/**/
	padding: 3%; /*desloca o texto da margem esquerda da div. Não do browser*/
	box-shadow: 0.1em 0.5em 0.5em 0.5em #686868;/*o primeiro número é da sombra direita, o 2º é da parte debaixo*/
	 }	


iframe{
display:block;
margin: 0 auto;
width: 50%;
height: 170px;
}

 hr{
   border: 0.2em solid beige;
    /*background-color: red; /*LightSteelBlue #B0C4DE*/ 
	}

h1{
     text-align: center;
    font-size: 24px;
     color: #B00000;
	}
h2{
    text-align: center;
    font-family: "lucinda grande", "lucinda sans", verdana, sans-serif;
    font-size: 20px;
	}

h3{
    text-align: center;
    font-family: "lucinda grande", "lucinda sans", verdana, sans-serif;
    font-size: 16px;
	}

p{
    text-align: justify;
    padding: 0.1em;
    color: #2e2e2e;
    font-size: 1.2em;
	}

li a{
    text-align:center;
    color: #2e2e2e;
    font-size: 1em;
	}

li{
    text-align:center;
    padding: 1.2em 1em 0.5em 1.2em;/*24px 20px 5px 20px;/*o 1º número é o topo, o 2º right,  o 3º bottom e o 4ºleft*/
    color: #2e2e2e;
    font-size: 0.8em;
	}
	
	
 em {
   font-size: 1.6em;
   color: red /**/
}		
	
 .p{
   
   background-color: yellow;/**/
    }