@import url("png-ie.css");

* { margin: 0; padding: 0; list-style: none; }

html, body { margin-bottom: 100px; background: #f7f0cb url(../images/fundo.jpg) top left no-repeat; color: #000; font-family: 'Calibri', Arial, Helvetica, sans-serif; }

a { color: #000; }

a img { border: none; }

#geral { display: block; overflow: hidden; clear: both; }

/* topo */

#geral #topo { display: block; overflow: hidden; height: 200px; clear: both; }

/* logo */

#topo .logo-alt { display: none; }

#topo .logo { width: 200px; height: 200px; margin: 10px 45px 10px 5px; display: block; overflow: hidden; float: left; }

#topo .logo a { display: block; overflow: hidden; text-indent: -5000px; position: absolute; width: 100%; height: 100%; top: 6px; }

#topo .logo .big { display: block; overflow: hidden; text-indent: -5000px; cursor: default; z-index: 9; width: 165px; height: 160px; top: 20px; left: 20px; background: url(../images/logo-big.png) no-repeat; }

#topo .logo .agua.mini { z-index: 7; width: 70px; height: 70px; top: 140px; left: 65px; background: url(../images/logo-agua-mini.png) no-repeat; }

#topo .logo .luz.mini { z-index: 8; width: 75px; height: 75px; top: 125px; left: 105px; background: url(../images/logo-luz-mini.png) no-repeat; }

#topo .logo.agua .lixo.mini { z-index: 7; width: 75px; height: 75px; top: 140px; left: 65px; background: url(../images/logo-lixo-mini.png) no-repeat; }

#topo .logo.luz .lixo.mini { z-index: 8; width: 75px; height: 75px; top: 125px; left: 105px; background: url(../images/logo-lixo-mini2.png) no-repeat; }

#topo .logo .agua.maxi { z-index: 10; width: 90px; height: 90px; top: 20px; left: 105px; background: url(../images/logo-agua-maxi.png) no-repeat; }

#topo .logo .luz.maxi { z-index: 10; width: 90px; height: 90px; top: 20px; left: 105px; background: url(../images/logo-luz-maxi.png) no-repeat; }

#topo .logo .lixo.maxi { z-index: 10; width: 90px; height: 90px; top: 20px; left: 105px; background: url(../images/logo-lixo-maxi.png) no-repeat; }

#topo .logo .mini, #topo .logo .maxi, #topo .logo .big { display: block; overflow: hidden; position: absolute; }

#topo .logo span a { text-indent: -5000px; display: block; overflow: hidden; }

#topo .logo .agua.mini { width: 70px; height: 70px; background: url(../images/logo-agua-mini.png) no-repeat; }

#topo .logo .luz.mini { width: 70px; height: 70px; background: url(../images/logo-luz-mini.png) no-repeat; }

#topo .logo .lixo.mini { width: 70px; height: 70px; display: block; overflow: hidden; background: url(../images/logo-lixo-mini.png) no-repeat; }


/* menu */

#topo .menu ul { display: block; overflow: hidden; margin-top: 60px; }

#topo .menu ul li { float: left; margin: 0 10px; }

#topo .menu ul li a { text-indent: -5000px; display: block; overflow: hidden; height: 100px; background: url(../images/menu-topo.png) no-repeat; }

#topo .menu ul li.pri a { width: 110px; }

#topo .menu ul li.seg a { width: 150px; background-position: -110px 0; }

#topo .menu ul li.ter a { width: 65px; background-position: -260px 0; }

#topo .menu ul li.qua a { width: 150px; background-position: -330px 0; }

#topo .menu ul li.pri.selecionado a { background-position: 0 -100px; }

#topo .menu ul li.seg.selecionado a { background-position: -110px -100px; }

#topo .menu ul li.ter.selecionado a { background-position: -260px -100px; }

#topo .menu ul li.qua.selecionado a { background-position: -330px -100px; }

/* menu lateral */

#principal .menu.lateral { display: block; overflow: hidden; position: absolute; top: 230px; width: 150px; left: 0; background: #f9f5db; font: 16px 'Calibri', Arial, Helvetica, sans-serif; margin-left: -150px; z-index: 100; }

#principal .menu.lateral.open { margin-left: 0; }

#principal .menu.lateral.open .selecionado a { font-weight: bold; }

#principal .menu.lateral li { margin: 15px; }

#principal .menu.lateral li.esconder { display: block; background: url(../images/esconder.png) no-repeat 80px 0;  }

#principal .menu.lateral li.esconder a { font-size: 12px; }

#principal .menu.lateral li a { display: block; text-decoration: none; }

#principal .menu.lateral li a:hover { text-decoration: underline; }

/* principal */

#principal { display: block; clear: both; }

#principal h1.gold { color: #bfa930; }

#principal h1.blue { color: #294282; }

#principal h1.green { color: #347131; }

#principal h1.orange { color: #d18c2b; }

#principal h1.gray { color: #707070; }

/* conteudo */

#principal .conteudo { display: block; margin: -30px 0 0 130px; width: 540px; height: 345px; overflow: hidden; padding: 0 170px 0 140px; background-position: top center; }

#principal .conteudo p { padding-right: 10px; margin: 10px 0 20px 0; line-height: 35px; }

#principal .conteudo .box { width: 470px; height: 300px; overflow: hidden; }

#principal .conteudo .boximg { width: 470px; height: 360px; overflow: hidden; }

#principal .conteudo#inicial { background: url(../images/fundo-pg-inicial.png) no-repeat; }

#principal .conteudo#historico { background: url(../images/fundo-historico.png) no-repeat; }

#principal .conteudo#objetivos { background: url(../images/fundo-objetivos.png) no-repeat; }

#principal .conteudo#o-que-estamos-fazendo { background: url(../images/fundo-o-que-estamos-fazendo.png) no-repeat; }

#principal .conteudo#lixeira-verde { background: url(../images/fundo-lixeira-verde.png) no-repeat; }

#principal .conteudo#lixeira-azul { background: url(../images/fundo-lixeira-azul.png) no-repeat; }

#principal .conteudo#lixeira-laranja { background: url(../images/fundo-lixeira-laranja.png) no-repeat; }

#principal .conteudo#lixeira-cinza { background: url(../images/fundo-lixeira-cinza.png) no-repeat; }

#principal .conteudo#lixeira-branca { background: url(../images/fundo-lixeira-branca.png) no-repeat; }

#principal .conteudo#cinzeiro { background: url(../images/fundo-cinzeiro.png) no-repeat; }

#principal .conteudo#economize-agua { background: url(../images/fundo-economize-agua.png) no-repeat; }

#principal .conteudo#economize-luz { background: url(../images/fundo-economize-luz.png) no-repeat; }

#principal .conteudo#voce-sabia { background: url(../images/fundo-voce-sabia.png) no-repeat; }

#principal .conteudo#sua-opiniao { background: url(../images/fundo-sua-opiniao.png) no-repeat; }

/* scrollbar */

.scrollbar { display: block; overflow: visible !important; position: absolute; top: 470px; margin-left: 460px; }

.scrollbar.off { display: none; }

.scrollbar a { display: block; overflow: hidden; width: 26px; height: 16px; text-indent: -5000px; }

.scrollbar .up { background: url(../images/scroll-button.png) left top no-repeat; }

.scrollbar .up:hover { background-position: -28px top; }

.scrollbar .down { background: url(../images/scroll-button.png) left -17px no-repeat; }

.scrollbar .down:hover { background-position: -28px -17px; }

/* rodape */

#rodape { position: fixed; bottom: 0px; width: 100%; height: 100px; text-align: center; background: #f9f5db; display: block; overflow: hidden; clear: both; }

#rodape p { margin: 30px 0; font-size: 11.5px; line-height: 20px; }

#rodape .up { padding: 10px 20px; margin: 10px 20px; display: block; overflow: hidden; float: right; width: 100px; height: 60px; text-indent: -5000px; background: url(../images/logo-up.png) center no-repeat; }

#rodape .face { padding: 25px 10px; margin: 10px 0px; display: block; overflow: hidden; float: right; width: 30px; height: 30px; text-indent: -50px; background: url(../images/ImgFacebook.png) center no-repeat; }

#rodape .youtube { padding: 25px 10px; margin: 10px 0px; display: block; overflow: hidden; float: right; width: 30px; height: 30px; text-indent: -50px; background: url(../images/imgyoutube.png) center no-repeat; }

#rodape .twitter { padding: 25px 10px; margin: 10px 0px; display: block; overflow: hidden; float: right; width: 30px; height: 30px; text-indent: -50px; background: url(../images/imgTwiter.png) center no-repeat; }

#rodape .tumblr { padding: 25px 10px; margin: 10px 0px; display: block; overflow: hidden; float: right; width: 30px; height: 30px;  background: url(../images/imgTumblr.png) center no-repeat; }