/*Documento CSS style_materias_escolares.css*/
	 
body{
     background-image:url(/static/img/ecologia-pedra.jpg);/*declarar uma imagem*/
     /*background-repeat: no-repeat;
      background-position: 5px;*/
      background-attachment: fixed;
 }
/*-------------------------------------------------------------------------*/
/* 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;
/*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 menu */
.menu a{
  color: beige;/*Cor da fonte do menu */
  text-decoration: none;
  display: block;
  cursor: pointer;
  font-size: 0.6em;/*tamanho da fonte do menu=====================================*/
  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.2em;
  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: 0.700em;/*Cola o submenu no menu========================================================== */ 
  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*/ 
}

.menu ul li a.selecionado{
    background-color: #FFF;
    margin-left: 0.5em;
    color: orangered;
    height: 2em;
    line-height: 2em;
    margin-top: 10px;
    margin-left: 0;
    border-bottom: 2px solid darkred;
}

/* Clearfix para o menu */
.menu:after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
header{
margin-top: 10px;
}

/*--mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm--*/
	
/*Pra dispositivos que tem uma largura mínima de 768 pixels. Tablets, por exemplo.*/
@media screen and (max-width: 720px) {
      #container, .ul, .li, .p, em, .h2, .h3, .span.destaque, .span.destaque1{
	  min-width: 240px;
	  width: 240px;
	 /*background-color:aqua;*/
  }
}
	
#container{ /*Lembrete: a cerquilha deve estar colada a palavra div. Se ficar espaço não funciona*/
	width: 60%; /*largura da div que o texto está dentro*/
	/*height: 60px; /*tirar a altura por causa do texto*/
	border: 1px solid #90dc61; /*#3CB371;/*#CCC;*/
	margin:0 auto;/*centraliza a div automaticamente na janela do browser*/
	padding: 1.8em; /*desloca o texto da margem esquerda da div. Não do browser*/
	background-image:url(/static/img/fundoverdeagua.jpg);
	/*background-repeat: no-repeat;*/
	background-position: 0.5em;
	font-family: "lucinda grande", "lucinda sans", verdana, sans-serif;
	font-size: 1em;/*tamanho em pixels*/ 
	border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	/*box-shadow:5px 10px 10px 10px  #CCC; *#8B4513;/*sombra ao redor da div*/
	}
	
.item{
	  font-size: 1em;
	  color: red;/*muda a cor da fonte*/
	  margin-left: 2em;  
	}
.b{
color: darkseagreen;
}

.p{
width: 70%;
 background: #b3ff99;
 color: #181818;
}

em{
  font-size: 1em;
  color: darkgreen;/*muda a cor da fonte*/
  text-align: center;  
}
	
a{
text-decoration:none;
font-size: 1em;
}

h1{
 margin-top:6%;
 font-family: "lucinda grande", "lucinda sans", verdana, sans-serif;
 text-align: center;  	
}

 h2{
 margin-top:6%;
 font-family: "lucinda grande", "lucinda sans", verdana, sans-serif;
 /*font-size: 36px;/*tamanho em pixels*/ 
 color:#002059;/*muda a cor da fonte*/
 text-align: center;  
 padding-left: 0.8em;
 }

h3{
 text-align: center;  
}	 
	 
p{
border: 1px dotted #3CB371;/*#E3BC58;*/
margin: 0 auto;
text-align: justify;/*alinhamento justificado. Ocupa todo o espaço em branco*/
padding: 0.75em; /*desloca o texto das margens da div*/
 }
	 	
span.destaque{
	  border: 1px dotted black;
	  width: 45%;
	  height:150px;
	  float:right;
	  margin: 0.3em;/*Afasta das margens da div*/
	  background-image:url(/static/img/colorcalc-small.jpg);
	  background-repeat: no-repeat;
	  padding-left: 0.5em; /*afasta o texto da lateral esquerda do box*/
	  padding-right: 0.5em; /*afasta o texto da lateral esquerda do box*/
	  padding-top: 0.875em; /*afasta o texto do topo do box*/
	  padding-bottom: 0.875em; /*afasta o texto da parte inferior do box*/
	  font-size: 0.625em;
	  box-shadow: 0.2em 0.2emx 0.1em 0.4em #FFFF99; /*1ªdireita, 2ªinferior,  3ªnão faz diferença, 4ªdistribui em torno de tudo*/
	  }	 
	  
span.destaque1{
	  border: 1px dotted black;
	  width: 45%;
	  /*height:170px;*/
	  float:right;
	  margin: 0.5em;/*Afasta das margens da div*/
	  background-color: #F5F5DC;
	  padding-left: 0.5em; /*afasta o texto da lateral esquerda do box*/
	  padding-right: 8px; /*afasta o texto da lateral esquerda do box*/
	  padding-top:  0.875em; /*afasta o texto do topo do box*/
	  padding-bottom:  0.875em; /*afasta o texto da parte inferior do box*/
	  font-size:  0.875em;
	  color: #330066;
	  }

.pull-left{
border: 1px dotted white !important;
}	
		
h2, em{
-moz-hyphens:auto;
-ms-hyphens:auto; 
-webkit-hyphens:auto;
hyphens:auto;
word-wrap:break-word;
}

table{
      border-collapse:collapse;
}
table th, table td{
      padding:0.5em;
}

table  > thead > tr{
       background-color:#39f;
       color: #fff;
}

table  > tbody > tr:nth-child(even){
       background-color:#def;
}

/*início de específico de química*/
.tabela{
width: 50%;
border: 2px;
margin-left: 20%;
}
/*fim de específico de química*/

/*inicio de específico de contato*/
.comentario{
color:#CC9900;
}

 iframe{
/*display:block;
margin: 0 auto;*/
width: 24%;
height: 100px;
}  

/*fim de específico de contato*/

pre{
-moz-hyphens:auto;
-ms-hyphens:auto; 
-webkit-hyphens:auto;
hyphens:auto;
word-wrap:break-word;
}
footer{  
	width: 55%;  
	height:	36px;
	float: left;
	margin-left: 20%;
 }