/*Documento CSS  - style-videos.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: 0.875em;*/
  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: 0.5em;
  margin: 0 0.5em;
  background: #000;
}
/* Configura o fundo do menu principal quando com mouse hover */
.menu > .menu-list > li:hover a {
  background: #444;/*=========================cor do menu no hover===========================================================*/
}
/* Mostra o submenu no evento de mouse hover */
.menu > .menu-list > li:hover > .sub-menu {
  display: block;
  padding: 1em;
}
/* Configura o estilo do submenu */
.menu > .menu-list > li > .sub-menu {
  position: absolute;
  top: 3em;
  left: 0.2em;
  background: beige;/* Cor do submenu */ 
  min-width: 6em;
  z-index: 1000;
  display: none;
}
/* Configura os links do submenu */
.menu > .menu-list > li > .sub-menu > li > a {
padding: 0.5em 0.5em;/*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, span{
	   min-width: 240px;
	   width: 240px;
	 /*background-color: aqua;*/
  }
}
 
.container{
        margin-top: 1px;
	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 do container*/
	text-align: center;/**/
	padding: 3%; /*desloca o texto da margem esquerda da div. Não do browser*/
	box-shadow: 0.3em 0.1em 0.5em 0.1em #181818;/*o 1º número é da sombra direita, o 2º é da parte debaixo*/
	}	

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

blockquote{
    text-align: center;
    font-family: cursive , "lucinda sans", verdana, sans-serif;
    font-size: 1em;
    color:goldenrod;
}
 hr{
   border: 0.1em solid beige;
    /*background-color: red; /*LightSteelBlue #B0C4DE*/ 
	}

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

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

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

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

li{
    text-align:center;
    padding: 1.5em 1.25em 0.5em 1.25em;/*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: 1em;
	 color: red; /*---*/
	}	

#special_link{
/*e todas as propriedades que ele terá*/
font-size: 1.25em;
color: beige;
}

a.text:link {
display: block;
background-color:#FFFFE0;
text-decoration: none;
color: darkgreen;
}


#footer{
        float: left;
	width: 100%; 
	height:	100px; 
	padding: 1.25em;
	margin-bottom: 2px;
        color: beige;
	background: #000; /*preto*/ 
	/*box-shadow: 4px 8px 1px 10px #181818; /*o primeiro número é da sombra direita, o 2º é da parte debaixo,*/
	}