@charset "utf-8";

/* 
1-- Geral
2-- Header
3-- Menu Principal
4-- Banner destaque
5-- Layer com Login e Agenda
6-- Boxes Noticias, Informativos e Parceiros
7-- Boxes Calendario e Blog

*/

/* 1-- GERAL ######################################################################################### */
* { 
	margin: 0;
	padding: 0;
}

ul, ol, dl { 
	padding: 0;
	margin: 0;
}

.fltrt {  
	float: right;
	margin-left: 8px;
}

.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

body {
	margin: 0;
	padding: 0;
	text-align:center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
}

.container {
	width: 960px;
	margin: 0 auto;
	text-align:left
}

a img { 
	border: none;
}

a {
	text-decoration:none
}

a:hover {
	text-decoration:none
}

/* 2-- HEADER ######################################################################################### */

.scrollfixer {
	margin: 0;
	padding: 0;
	width:100%;
	height:89px;
	overflow: hidden
}

.SFcontainer {
	width: 960px;
	height:89px;
	margin: 0 auto; 
}

.SFheader {
  height:89px;
	position:relative;
}

#zlab01 img{
	width: 114px;
	height: 92px;
	-webkit-filter: blur(2px) opacity(0.9);
}

#zlab02 img{
	width: 67px;
	height: 54px;
	-webkit-filter: blur(0px) opacity(0.8);
}

#zlab03 img{
	width: 59px;
	height: 48px;
	-webkit-filter: blur(1px) opacity(0.8);
}

#zlab04 img{
	width: 160px;
	height: 129px;
	-webkit-filter: blur(0px) opacity(0.8);
}

#zlab05 img{
	width: 83px;
	height: 67px;
	-webkit-filter: blur(2px) opacity(0.8);
}

#zlab06 img{
	width: 51px;
	height: 41px;
	-webkit-filter: blur(0px) opacity(0.8);
}

#zlab07 img{
	width: 74px;
	height: 60px;
	-webkit-filter: blur(0px) opacity(0.8);
}

#zlab08 img{
	width: 91px;
	height: 73px;
	-webkit-filter: blur(0px) opacity(0.8);
}

#zlab09 img{
	width: 75px;
	height: 60px;
	-webkit-filter: blur(0px) opacity(0.8);
}

#zlab10 img{
	width: 100px;
	height: 81px;
	-webkit-filter: blur(2px) opacity(0.8);
}

#zlab11 img{
	width: 71px;
	height: 57px;
	-webkit-filter: blur(0px) opacity(0.8);
}

#zlab12 img{
	width: 90px;
	height: 73px;
	-webkit-filter: blur(0px) opacity(0.8);
}

#zlab13 img{
	width: 51px;
	height: 41px;
	-webkit-filter: blur(2px) opacity(0.5);
}

.scrollfixer1 {
	margin: 0;
	padding: 0;
	width:100%;
	height:0px;
}

.SFcontainer1 {
	width: 960px;
	height:0px;
	margin: 0 auto; 
}

.SFheader1 {
	height:0px;
	position:relative;
}

#logo_header {
	margin-left: 40px;
	margin-top: 13px;
	position:relative;
	float:left
}

/* 3-- MENU PRINCIPAL ######################################################################################### */


.menu_principal {
	position:absolute;
	top: 62px;
	left: 200px;
	float:left;
	z-index:3000	
}

/* LABZ OF TEH MENUZ */

/* We will start by styling the unordered list: */
ul.sdt_menu{
 margin:0;
 padding:0;
 list-style: none;
 font-family: 'Droid Sans', sans-serif;
 font-size:13px;

 background-color:#0F0;

}


/* Generally, we want to remove any default text-decoration and outline for all the link elements in our menu: */
ul.sdt_menu a{
 text-decoration:none;
 outline:none;
}


/* Our list items will be floating left and have the position relative since we will want to use absolute positioning for the elements inside. If we wouldn’t set that, absolute positioned elements would be relative to the whole page: */
ul.sdt_menu li{
 float:left;
 width:200px;
 height:40px;
 position:relative;
 cursor:pointer;
}


/* The styling for the main link element where we have our two spans for title and description will be styled as follows: */
ul.sdt_menu li > a{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 200px;
	height: 40px;
	z-index: 12;
	background: #333;
	/* background:transparent url(../overlay.png) no-repeat bottom right; */
	-moz-box-shadow: 0px 0px 2px #000;
	-webkit-box-shadow: 0px 0px 2px #000;
	box-shadow: 0px 0px 2px #000;
}


/* Notice the z-index: we will be defining a stacking order for all the important elements, so that the right ones stay on top.

We are using a background image that creates a glass like effect with a semi-transparent gradient. When you use some background pattern (like the wood in the demo) it creates a beautiful effect. Make sure to try out different textures – it just looks amazing!

You can also play with the shadows – changing the values to 2px 2px 6px #000 inset will give you a very nice effect.

ORIGNAL: 0px 0px 4px #000

The image will be styled as follows: */
ul.sdt_menu li a img{
 border:none;
 position:absolute;
 width:0px;
 height:0px;
 max-height: 100px;
 bottom:0px;
 left:85px;
 z-index:2000;
 -moz-box-shadow:2px 2px 6px #000;
 -webkit-box-shadow:2px 2px 6px #000;
 box-shadow:2px 2px 6px #000;
}


/*We want to animate the image to come up from the bottom, that’s why we position it absolutely using “bottom” as reference point. We also add some neat box shadow. The first two values are zero, making the shadow spread evenly around the image. We used this as well in the link element. This even shadow can be used as a trick, whenever you want to create a light border effect. The advantage is that shadows are not really there – you don’t need to consider it in your width or height calculations in elements. The current disadvantage is that CSS3 is not supported in IE.

The wrapper for the title and description spans will have this style: */
ul.sdt_menu li span.sdt_wrap{
 position:absolute;
 top:20px;
 left:0px;
 width:170px;
 height:20px;
 z-index:15;
}


/* If you have some larger texts, you will need to adapt these values. Make sure that the adapted values fit well with the animation values in the JavaScript, too.

Next, we define the style for the gray box that slides down. We give it a height of 0 and position it already in a way that we just need to increase its height in the animation: */
ul.sdt_menu li span.sdt_active{
 position:absolute;
 background:#111;
 top:40px;
 width:170px;
 height:0px;
 left:0px;
 z-index:14;
 -moz-box-shadow:2px 2px 6px #000;
 -webkit-box-shadow:2px 2px 6px #000;
 box-shadow:2px 2px 6px #000;
}

/* The common styles for the spans and links in the boxes will be the following: */

ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
 margin-left:15px;
 /* text-transform:uppercase; */
 text-shadow:1px 1px 1px #000;
 
}


/* The title and description will be styled as follows: */
ul.sdt_menu li span span.sdt_link{
 color:#fff;
 font-size:13px;
 float:left;
 clear:both;
}

ul.sdt_menu li span span.sdt_descr{
 color:#0B75AF;
 float:left;
 clear:both;
 width:155px;
 font-size:10px;
 letter-spacing:1px;
}


/* The submenu box will initially be hidden under the gray box. We will then animate it to the right or to the left depending on where we are. If we, for example, hover the last element, we want to animate that submenu box to the left, in all the other cases we want to animate it to the right. */
ul.sdt_menu li div.sdt_box{
 display:block;
 position:absolute;
 width:300px;
 overflow:hidden;
 height:170px;
 top:85px;
 left:0px;
 display:none;
 background:#000;
  -moz-box-shadow:2px 2px 6px #000;
 -webkit-box-shadow:2px 2px 6px #000;
 box-shadow:2px 2px 6px #000;
}

ul.sdt_menu li div.sdt_box a{
 float:left;
 clear:both;
 line-height:30px;
 color:#0B75AF;
}


/* The first link in the submenu should have a top margin: */

ul.sdt_menu li div.sdt_box a:first-child{
 margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
 color:#fff;
}


/* 4-- BANNER DESTAQUE ######################################################################################### */

.destaque {
	position:relative
}

.container_full {
	width:100%;
	min-width: 940px;
	margin: 0 auto; 
	padding: 0px 0px;
	z-index:0;
}

.thumb_destaque {
	position:relative;
	width:300px;
	height:100px;
	top:12px;
	float:left;
}

.t1 {	
	left: 30px;
}

.t3 {	
	left: 10px;
}

.t2 {	
	left: 35px;
}

.label_publicidade {
	position:relative;
	width:13px;
	height:100px;
	top:12px;
	float:left;
}

/* 5-- LAYER COM LOGIN E AGENDA ######################################################################################### */

.layer_login {
	z-index:200;
	width: 247px;
	height: 154px;	
	position:absolute;
	top: 273px;
	left: 20px;
	background:url(../_images/bg_box_login.png);
}

/* layer_login original, com os espaçamentos pro campo de login, refazer para a fase 2
.layer_login {
	z-index:200;
	width: 247px;
	height: 424px;	
	position:absolute;
	top: 0px;
	left: 20px;
	background:url(../_images/bg_box_login.png);
}
*/

.espacador_esq {
	margin-left:14px
}

.campo_usuario {
	-moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
	width: 152px;
	height: 19px;
	font-size: 10px;
	font-family: Verdana, Geneva, sans-serif;
	padding: 2px;
	border: 1px #888 solid;
	color: #686868;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#ddd));
	background: -moz-linear-gradient(#ffffff, #ddd);
	background: linear-gradient(#ffffff, #ddd);
	-pie-background: linear-gradient(#ffffff, #ddd);
	background-color:#FFF
}

.campo_usuario:focus {
	background: #fff;
	color:#000
}

.campo_usuario:hover {
	background: #fff;
	color:#000
}

.campo_senha {
	-moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
	width: 152px;
	height: 19px;
	font-size: 10px;
	font-family: Verdana, Geneva, sans-serif;
	padding: 2px;
	border: 1px #888 solid;
	color: #686868;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#ddd));
	background: -moz-linear-gradient(#ffffff, #ddd);
	background: linear-gradient(#ffffff, #ddd);
	-pie-background: linear-gradient(#ffffff, #ddd);
	background-color:#FFF
}

.campo_senha:focus {
	background: #fff;
	color:#000
}

.campo_senha:hover {
	background: #fff;
	color:#000
}

.esqueceu_senha {
	color:#3c444c;
	font-family:'Droid Sans', sans-serif;
	font-size: 11px;
}

.texto_box_login {
	font-family:'Droid Sans', sans-serif;
	font-size:11px;
	color:#FFFFFF;
	line-height:12px
}

.texto_box_login:hover {
	color:#F60;
	text-decoration:none;	
	background:#FFF;
}

.semana_mes {
	font-family:'Droid Sans', sans-serif;
	font-size:11px;
	color:#FFF;
	margin-right:5px;
	float:left;
	text-align:center
}

.dia_agenda {
	font-family:'Droid Sans', sans-serif;
	font-size:30px;
	color:#9ecb20;
	margin-top:-6px;
	width:37px;
	float:left;
	letter-spacing:-1px;
	margin-right:2px
}

.titagenda {
	font-family:'Droid Sans', sans-serif;
	font-size:13px;
	color:#FFF;
}

/* 6-- BOXES NOTICIAS, INFORMATIVOS, PARCEIROS E REDE SOCIAL ########################################################################### */

ul {
	list-style: none outside none;
  margin: 0;
  padding: 0
}

.container_full_2 {
	width:100%;
	min-width: 960px;
	height: 382px;
	background: rgba(244,244,244,0.9);
	margin: 0 0 0 0; 
	padding: 30px 0px 0 0;
	border-top:#eeeeeb solid 1px; 
	border-bottom:#d5d5d3 solid 1px;
	z-index:0
}

.container_full_11 {
	width:100%;
	min-width: 940px;
	margin: 0 auto; 
	padding: 0px 0px;
	z-index:0;
	margin-bottom:20px
}

.subcontainer_full_11 {
	max-width:960px; 
	margin: 0 auto;
	text-align:left; 
	background: rgba(255,255,255, 0.8); 	
}

.box_noticias {
	width:296px;
	padding:15px 15px 10px 15px;
	float:left
}

.tit_noticias {
	font-family: 'Droid Sans', sans-serif; 
	font-size:15px; 
	color:#000;
	border-bottom:#CCC solid 1px;
	padding:0px 0px;
	margin-bottom: 5px	
}

.box_noticias a li  {
	font-family: 'Droid Sans', sans-serif; 
	font-size:12px; 
	color:#333;
	text-decoration:none;	
	padding:7px 7px;
	text-decoration:none;
}

.box_noticias a li:hover {
	color:#F60;
	text-decoration:none;	
	background:#FFF;
}

.box_informativos {
	width:900px;
  padding:15px 15px 8px 15px;
	float:left;
	background:url(../_images/bg_box_informativos.png) no-repeat top left;
	background-position: 0px 34px	 	
}

.tit_informativos {
	font-family: 'Droid Sans', sans-serif; 
	font-size:15px; 
	color:#000;
	border-bottom:#CCC solid 1px;
	padding:0px 0px;
	margin-bottom: 5px	
}

.informativo_home  {
	font-family: 'Droid Sans', sans-serif; 
	font-size:12px; 
	color:#333;
	text-decoration:none;	
	padding:7px 7px
}

.informativo_home a {
	text-decoration:none
}

.informativo_home:hover  {
	color:#F60;
	text-decoration:none;	
	background:#FFF
}

.box_redes_sociais {
	width:276px;
  padding:15px 15px 8px 15px;
	float:left;
	background-position: 0px 34px
}

.tit_redes_sociais {
	font-family: 'Droid Sans', sans-serif; 
	font-size:15px; 
	color:#000;
	border-bottom:#CCC solid 1px;
	padding:0px 0px;
	margin-bottom: 5px	
}

.desc_redes_sociais_home {
	font-family: 'Droid Sans', sans-serif; 
	font-size:12px; 
	color:#000;
	padding:7px 7px
}

.logo_facebook_box_redes_sociais {
	font-size:18px;
	center: 30px;
	color:#686868;	
	float:right;
	margin-right:5px;
	padding:3px
}
.logo_instagram_box_redes_sociais {
	font-size:18px;
	center: 30px;
	color:#686868;	
	float:right;
	margin-right:5px;
	padding:3px
}
.logo_whatsapp_box_redes_sociais {
	font-size:18px;
	center: 30px;
	color:#686868;	
	float:right;
	margin-right:5px;
	padding:3px
}

.logo_youtube_box_redes_sociais {
	text-align:center;
	padding:0px
}

.tit_parceiros {
	font-family: 'Droid Sans', sans-serif; 
	font-size:15px; 
	color:#000;
	border-bottom:#CCC solid 1px;
	padding:0px 0px;
	margin-bottom: 5px;
	margin-top:20px
}

.parceiros_home  {
	font-family: 'Droid Sans', sans-serif; 
	font-size:12px; 
	color:#333;
	text-decoration:none;	
	padding:7px 7px;
	text-align:center
}

.parceiros_home a {
	text-decoration:none
}

.parceiros_home:hover  {
	color:#F60;
	text-decoration:none;	
	background:#FFF
}

/* 7-- BOXES CALENDARIO e BLOG ################################################################################## */

.box_calendario {
	width:396px;
	padding:15px 15px 8px 15px;
	float:left;
	margin:0
}

.tit_calendario {
	font-family: 'Droid Sans', sans-serif; 
	font-size:15px; 
	color:#000;
	border-bottom:#CCC solid 1px;
	padding:0px 0px;
	margin-bottom: 5px	
}

.box_calendario_interno {
	text-align:center;
	position:relative;
	height:250px;
	overflow:auto
}

.box_calendario_l1 {
	font-family: 'Droid Sans', sans-serif;
	font-size:12px;
	color:#686868;
	background-color:#ecfcfb;
	text-align:left;
	padding: 10px
}

.box_calendario_l2 {
	font-family:'Droid Sans', sans-serif;
	font-size:12px;
	color:#686868;
	background-color:#deedec;
	text-align:left;
	padding: 10px
}

.box_blog {
	width:504px;
	padding:15px 15px 8px 15px;
	float:left;
}

.tit_blog {
	font-family: 'Droid Sans', sans-serif; 
	font-size:15px; 
	color:#000;
	border-bottom:#CCC solid 1px;
	padding:0px 0px;
	margin-bottom: 5px	
}

.desc_blog {
}

.nome_blog img {
	float:left;
	border:#00aeef solid 5px;
	margin:0px 10px 7px 0px ;
}

.nome_blog  {
	font-family: 'Droid Sans', sans-serif; 
	font-size:17px; 
	line-height:17px;
	color:#333;
	text-decoration:none;	
	padding:7px 7px 7px 7px 
}

.data_blog {
  font-family: 'Droid Sans', sans-serif; 
	font-size:12px; 
	color:#333;
	text-decoration:none;
}

.link_blog a {
	text-decoration:none
}

.link_blog:hover > li ul li {
	color:#F60;
	text-decoration:none;	
	background:#FFF
}

/* 8-- RODAPE ################################################################################## */

.container_full_rodape {
	width:100%;
	position:relative;
	min-width: 960px;	
	background: #d5d5d3;
	margin: 0 0 0 0; 
	padding: 30px 0px 0 0;
	border-top:#FFFFFF solid 1px; 
	z-index:0
}

.logo_rodape {
	float:left;
	width:200px;
	margin-left:5px;
	margin-right:35px;
	height:100px
}

.info_rodape {
	font-family:'Droid Sans', sans-serif;
	font-size:12px;
	color:#686868;
	float:left;
}

.info_rodape li {	
	padding:5px
}

.info_rodape a {
	font-family:'Droid Sans', sans-serif;
	font-size:12px;
	color:#686868;
	float:left;
	text-decoration:none;
}

.info_rodape a:hover {
	color:#F60;
	text-decoration:none;	
	background:#FFF
}

.info_rodape_2 {
	font-family:'Droid Sans', sans-serif;
	font-size:18px;
	center: 30px;
	color:#686868;	
	float:right;
	margin-right:5px;
	padding:3px
}

.info_rodape_2 a {
	font-family:'Droid Sans', sans-serif;
	font-size:18px;
	color:#686868;	
	margin-right:40px;
	text-decoration:none;
	padding:3px
}

.info_rodape_2 a:hover {
	color:#F60;
	text-decoration:none;	
	background:#FFF
}

/* FIM DO CSS */
