/*Documento CSS style-pensamentos.css*/
body  {    
	margin: 0;     
	padding: 0;    
	background-attachment:fixed; 
	background:#000000 url(/static/img/textura-flores.jpg);
	/*background-repeat: no-repeat;
	background-position: 1px 5px;*/
}


/*mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm--*/
	
/*Pra dispositivos que tem uma largura mínima de 768 pixels. Tablets, por exemplo.*/
@media screen and (max-width: 720px) {
      #container, .p, .span.destaque{
	  min-width: 240px;
	  width: 240px;
	 /*background-color:aqua;*/
	
  }
}
 #container{
	position: relative;
	width: 50%;/*670px; largura da div*/
	/*height:600px;/*altura da div*/
	border:1px dotted #000000;/*Considerada ultrapassada por alguns, largura, tipo e cor da borda*/
	margin: 0 auto;/*centraliza a página*/
	padding: 1.5em;/*25px afasta o texto da margem superior da div e não do browser*/	  
	background-color: #FFFFFF; /*cor de fundo*/
	 /*border-radius: 0.5em; deixa a borda da caixa (div) arredondada
	-moz-border-radius:8px; /*deixa as bordas arredondadas
	-webkit-border-radius:8px;/*para que funcione em outros navegadores*/
	}

  p{
    width: 95%;/*largura da div*/
	/*height:600px;/*altura da div*/
	text-align: justify;/*alinhamento justificado. Ocupa todo o espaço em branco*/
	border:1px dotted #000000;
	padding-top:0.875em; /*16px;afasta o texto da margem superior da div e não do browser*/	 
	padding-left: 0.875em; /*6px; afasta o texto da margem esquerda da div e não do browser*/	  
	padding-right:0.875em; /*14px; afasta o texto da margem direita da div e não do browser*/	 
	padding-bottom: 0.875em; /*16px;afasta o texto da margem direita da div e não do browser*/	 
	/*box-shadow: 10px 14px 24px 30px #8B4513;/*o primeiro número é da sombra direita, o 2º da parte debaixo,*/
      }

em{
    color: #FF8533;/*verde*/
    font-size: 0.875em; /*26px;*/
    font-size: 1.125em; /*26px;*/
	font-weight:700;
  }
	  

  
span.destaque{
	border: 1px dotted black;
	width: 50%;
	float:right;
	margin: 1px;/*Afasta das margens da div*/
	background-color: #F9F9FF;/*flora white*/
	padding-left: 0.875em; /*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: 1.25em;
	box-shadow: 1px 1px 1px 3px #8FBC8F; /*1ªdireita, 2ªinferior,  3ªnão faz diferença, 4ªdistribui em torno de tudo*/
	}
/*--------------------------------*/

h2{
	/*border: 1px solid black;*/
	width: 100px;
	color:white;
    background-image:url(/static/img/agia4.jpg);/*declarar uma imagem*/
	background-repeat:no-repeat;/*para não repetir uma imagem*/
	background-position: 60px 100px; /*o 2º número movimenta a imagem na vertical - pode ser em pixels ou left bottom; top, left top, right, top etc.*/
}