/* CSS PADRAO DO SITE 
ESTILOS UNICOS POR PAGINA DEVEM SER CHAMADOS POR ID E ESTILOS REPETIDOS POR CLASS
INTERESSANTE SEMPRE USAR SEMÂNTICA PARA TODAS AS PÁGINAS
--------------------------------------------------------------------------------*/

/*CSS GERAL SÃO ATRIBUTOS PARA TODO O SITE 
--------------------------------------------------------------------------------*/
.floatLeft {
	float:left;
}

.floatRight {
	float:right;
}

.clear {
	clear: both;
}

.none {
	display: none;
}

.block {
	display: block;
}

.relative{
	position: relative;
}

object {
	outline: none;
}

img {
	border: 0px;
	margin: 0px!important;
	padding: 0px!important;
	outline: none; 
}

p {
	margin: 0px;
	padding: 0px;
}

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

li {
	margin: 0px;
	padding: 0px;
}

form {
	margin: 0px;
	padding: 0px;
}

h1 {
	color: #3375a8;
	font-size: 18px;
	margin: 0px;
	padding: 0px 0px 10px 0px;
}

h2 {
	color: #3676a6;
	font-size: 13px;
	margin: 0px 0px 6px 0px;
	padding: 0px 0px 0px 0px;
}

h3 {
	float: left;
	font-size:18px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

h4 {
	color: #3676a6;
	font-size: 13px;
	margin: 0px 0px 6px 0px;
	padding: 35px 0px 0px 0px;
}

a {
	color: #1eaee3;
	outline: none;
} 

body {
	font: normal 11px/14px arial;
	color: #6d6d6d;
	margin: 0px!important;
	padding: 0px!important;
}

/* DEFINE TODOS OS STYLOS GERAIS DAS PÁGINAS 
---------------------------------------------------------------------------------------*/
#global {
	text-align: center;
}

#guardaBgRodape {
	background: url('/images/sabesp_memoria_rodape.jpg') repeat-x center bottom;
}

#geral {
	width: 760px;
	text-align: left;
	margin: auto;
}

#conteiner {
	float: left;
	width: 760px!important;
	padding: 0px;
	margin: 0px;
	position: relative;
	text-align: justify;
}

#corpo {
	float: left;
	width: 760px;
}

#conteudoPrincipal {
	float: left;
	width: 750px;
	padding: 20px 0px 0px 10px;
}

#conteudo {
	float: left;
	width: 535px;
}

#bread {
	float: left;
	font: normal 10px Arial!important;
	width: 700px;
	margin: 5px 0px 15px 0px;
}

#bread span {
	color: #9f9f9f;
}

#bread a {
	color: #1eaee3;
	font-weight: normal;
	text-decoration: underline!important;
}

/*CSS TOPO 
------------------------------------------------------------------------------------------*/
#topo {
	float: left;
	width: 760px;
	background: url('/images/sabesp_memoria_02.jpg') no-repeat 380px 0px;
}

/*CSS MENU SUPERIOR 
------------------------------------------------------------------------------------------*/
#topo  #menuSuperior {
	float: right;
	width: 370px;
}

#topo  #menuSuperior ul {
	float: right;
	padding: 5px 25px 0px 20px;
}

#topo  #menuSuperior ul li {
	float: left;
}

#topo  #menuSuperior ul li a {
	float: left;
	color: #fff;
	text-decoration: none;
	padding: 0px 0px 0px 20px;
}
.bgHome {
	background: url('/images/sabesp_memoria_home.gif') no-repeat 0px 0px;
	padding: 0px 15px 0px 0px;
}
.bgPortalSabesp {
	background: url('/images/sabesp_memoria_portal_sabesp.gif') no-repeat 0px 0px;
	padding: 0px 15px 0px 0px;
}
.bgCompartilhe {
	background: url('/images/sabesp_memoria_compartilhe.gif') no-repeat 0px 0px;
	padding: 0px 15px 0px 0px;
}
.bgIndique {
	background: url('/images/sabesp_memoria_indique.gif') no-repeat 0px 0px;
	padding: 0px 15px 0px 0px;
}


/*CSS MENU DE NAVEGAÇÃO
------------------------------------------------------------------------------------------*/
#topo #menuTopo {
	float: left;
	width: 750px;
	padding: 0px 0px 0px 10px;
}

#topo #menuTopo #guardoMenu {
	float: left;
	width: 741px;
	height: 25px;
	padding: 0px 0px 0px 71px;
	background: url('/images/sabesp_memoria_menu.gif') no-repeat 0px 0px;
}

#topo #menuTopo #guardoMenu ul li {
	float: left;
	padding: 5px 0px 0px 0px;
	position: relative;
}

#topo #menuTopo #guardoMenu ul li a {
	display: block;
	font: normal 13px Arial;
	color: #7a7d7f;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	padding: 0px 35px 0px 40px;
	border-left: 1px solid #7a7d7f;
}

#topo #menuTopo #guardoMenu ul li a:hover {
	color: #1eaee3;
	font-weight: bold;
}

#topo #menuTopo #guardoMenu ul li a.marcado {
	color: #1eaee3;
}

#topo #menuTopo #guardoMenu ul li .primeiro {
	border:none;
}

#topo #menuTopo #guardoMenu ul li ul {
	float: left;
	display: none;
	position: absolute;
	top: 20px;
	left: 0px;
	z-index: 1;
}

#topo #menuTopo #guardoMenu ul li ul li {
	float: left;
	padding: 0px;
	position: relative;
}

#topo #menuTopo #guardoMenu ul li ul li a {
	display: block;
	float: left;
	width: 210px;
	text-align: left;
	padding: 5px 0px 5px 25px!important;
	font-weight: normal;
	color: #6e9ec9;
	background: #f6fbff url('/images/seta_link.gif') no-repeat 10px 10px;
	border: none;
}

#topo #menuTopo #guardoMenu ul li ul li a.marcado {
	color: #78a0c3;
	font-weight: bold;
	background-color: #e0edf6;
}

#topo #menuTopo #guardoMenu ul li ul li a:hover {
	color: #78a0c3;
	font-weight: bold;
	background-color: #e0edf6;
}

#topo #menuTopo #guardoMenu ul li ul li ul{
	float: left;
	position: absolute;
	top: 0px;
	left: 236px;
	z-index: 1;
}

#topo #menuTopo #guardoMenu ul li ul li ul li{
	float: left;
	padding: 0px;
}

#topo #menuTopo #guardoMenu ul li ul li a ul li a{
	display: block;
	float: left;
	width: 235px;
	text-align: left;
	padding: 5px 0px 5px 0px!important;
}

#topo #menuTopo #guardoMenu ul li ul li a ul li a.marcado {
	color: #78a0c3;
	font-weight: bold;
	background-color: #e0edf6;
}

/*CSS DA HOME
------------------------------------------------------------------------------------------*/
#guardaFlash {
	float: left;
	width: 760px;
}

#corpo #parteInferiorHome {
	float: left;
	width: 740px;
	padding: 0px 0px 0px 20px;
}

#corpo #parteInferiorHome #ladoEsquerdo {
	float: left;
	width: 355px;
	padding: 21px 0px 0px 0px;
}

#corpo #parteInferiorHome #ladoDireito {
	float: left;
	width: 350px;
	padding: 0px 0px 0px 10px;
	
}

#corpo #parteInferiorHome #infoIntroducaoCross {
	float: left;
	width: 335px;
	height: 88px;
	padding: 0px 0px 0px 15px;
}

#corpo #parteInferiorHome #ladoEsquerdo .crossLinkCuriosidades {
	float: left;
}

#corpo #parteInferiorHome #ladoEsquerdo .crossLinkCuriosidades .guardaFlash{
	float: left;
	width: 140px;
	height: 210px;
}

#corpo #parteInferiorHome #ladoEsquerdo .crossLinkCuriosidades .internaCrossLink {
	float: left;
	width: 212px;
	padding: 60px 0px 0px 0px;
}

#corpo #parteInferiorHome #ladoEsquerdo .crossLinkCuriosidades .internaCrossLink h2 {
	background: url('/images/sabesp_memoria_curiosidades.gif') no-repeat 0px 0px;
	width: 210px;
	height: 20px;
}

#corpo #parteInferiorHome #ladoEsquerdo .crossLinkCuriosidades .internaCrossLink #memoria {
	background: url('/images/sabesp_memoria_memoria_sabesp.gif') no-repeat 0px 0px!important;
}
#corpo #parteInferiorHome #ladoEsquerdo .crossLinkCuriosidades .internaCrossLink h2 span {
	float: left;
	padding: 3px 0px 0px 23px;
	color: #fff;
}

#corpo #parteInferiorHome #ladoEsquerdo .crossLinkCuriosidades .internaCrossLink .infoText {
	float: left;
	width: 180px;
	padding: 0px 0px 0px 20px;
}

#corpo #parteInferiorHome #ladoEsquerdo .crossLinkCuriosidades .internaCrossLink .infoText a {
	text-decoration: none;
	font-weight: bold;
}
#corpo #parteInferiorHome #ladoEsquerdo .crossLinkCuriosidades .internaCrossLink .infoText .curiosidades a {
	color: #3276ab!important;
}

#corpo #parteInferiorHome #ladoDireito .crossLinkCuriosidades {
	float: left;
	width: 373px;
	padding: 20px 0px 0px 0px;
}

#corpo #parteInferiorHome #ladoDireito .crossLinkCuriosidades .internaCrossLink {
	float: left;
	width: 230px;
	padding: 0px 0px 0px 0px;
}

#corpo #parteInferiorHome #ladoDireito .crossLinkCuriosidades .guardaFlash {
	float: left;
	width: 140px;
	height: 150px;
}

#corpo #parteInferiorHome #ladoDireito .crossLinkCuriosidades .guardaFlash2 {
	float: left;
	width: 140px;
	height: 120px;
}

#corpo #parteInferiorHome #ladoDireito .crossLinkCuriosidades .internaCrossLink h2 {
	background: url('/images/sabesp_memoria_linha_tempo.gif') no-repeat 0px 0px;
	width: 210px;
	height: 20px;
}
#corpo #parteInferiorHome #ladoDireito .crossLinkCuriosidades .internaCrossLink h2 span {
	float: left;
	padding: 3px 0px 0px 23px;
	color: #fff;
}

#corpo #parteInferiorHome #ladoDireito .crossLinkCuriosidades .internaCrossLink .infoText {
	float: left;
	width: 190px;
	padding: 0px 0px 0px 20px;
}

#corpo #parteInferiorHome #ladoDireito .crossLinkCuriosidades .internaCrossLink .infoText a {
	text-decoration: none;
	font-weight: bold;
}

#corpo #parteInferiorHome #ladoDireito .crossLinkCuriosidades .internaCrossLink .infoText .presidente a {
	color: #004136!important;
}

#corpo #parteInferiorHome #ladoDireito .crossLinkCuriosidades .internaCrossLink .infoText .saneamento a {
	color: #69ab00!important;
}
#corpo #parteInferiorHome #ladoDireito .crossLinkCuriosidades .internaCrossLink #saneamento {
	background: url('/images/sabesp_memoria_museu_saneamento.gif') no-repeat 0px 0px;
}

/*CSS DAS LATERAIS 
------------------------------------------------------------------------------------------*/
#lateralDireita {
	float: left;
	width: 200px!important;
	margin: 0px 0px 0px 15px;
	height: 390px;
}

#lateralDireita .guardoTodosCrossLinks {
	float: left;
	width: 200px;
}

#lateralDireita .guardoTodosCrossLinks .imgCrossLink {
	float: left;
}
#lateralDireita .guardoTodosCrossLinks ul {
	float: left;
	padding: 30px 0px 0px 0px;
}
#lateralDireita .guardoTodosCrossLinks ul li h2 {
	float: left;
	width: 120px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
#lateralDireita .guardoTodosCrossLinks ul li p {
	width: 100px;
	padding: 0px 5px 0px 15px;
	margin: 0px 0px 0px 0px;
}
#lateralDireita .guardoTodosCrossLinks ul li p a {
	text-decoration: none;
}
.corTextLinhaTempo a {
	color: #60a098;
}
.corTextCuriosidades a {
	color: #84adcd;
}
.corTextMensagemDoPresidente a {
	color: #f3b86b;
}
.corTextMuseuSaneamento a {
	color: #a5cd66;
}

/*CSS CONTEUDOS PÁGINAS INTERNAS
------------------------------------------------------------------------------------------*/

/*CSS CONTEUDOS PÁGINA CURIOSIDADES
------------------------------------------------------------------------------------------*/

#conteudo #bannerRandomico {
	float: left;
	width: 535px;
	height: 230px;
	background: url("/curiosidades/images/sabesp_memoria_bg_voce_sabia.gif") no-repeat 0px 0px;
}

#conteudo #bannerRandomico #flashBanner {
	float:left;
	padding: 0px 0px 0px 10px;
}
#conteudo #bannerRandomico .conteudoRandomico {
	float:left;
	width: 520px;
	padding: 0px 0px 0px 0px;
}
#conteudo #bannerRandomico .conteudoRandomico .infoText img {
	float:left;
	margin: 0px;
	padding: 0px;
}
#conteudo #bannerRandomico .conteudoRandomico .infoText {
	display: none;
	float:left;
	color: #3676a6;
}
#conteudo #bannerRandomico .conteudoRandomico .botaoVolta,
#conteudo #bannerRandomico .conteudoRandomico .botaoAvanca {
	float:right;
	padding:10px 3px 3px 3px;
}

#parteInferiorCuriosidades #selecaoCidade {
	float: left;
	width: 535px;
	background: url("/curiosidades/images/sabesp_memoria_bg_selecione_cidade.gif") no-repeat 0px 0px;
	padding: 0px 0px 5px 0px;
	margin: 8px 0px 0px 0px;
}

#parteInferiorCuriosidades #selecaoCidade a {
	float: left;
	margin: 5px 0px 5px 0px;
}
#parteInferiorCuriosidades #selecaoCidade select {
	float:left;
	font: normal 10px Arial;
	color: #6d6d6d;
	width: 200px;
	height: 19px;
	margin: 6px 10px 0px 10px;
}
#parteInferiorCuriosidades #selecaoCidade input {
	float:left;
	padding: 5px 0px 5px 0px;
}
#parteInferiorCuriosidades #infoText {
	display: block;
	float: left;
	width: 535px;
	font-weight: bold;
}

#parteInferiorCuriosidades .conteudoEscondido {
	float: left;
	width: 535px;
}

#parteInferiorCuriosidades .conteudoEscondido p {
	float: left;
	width: 535px;
}

#parteInferiorCuriosidades .conteudoEscondido #cidadeA {
	float: left;
	width: 535px;
	margin-top:20px;
}

/*PÁGINA INDIQUE O SITE
------------------------------------------------------------------------------------------*/
#conteudo #formularioIndique {
	width: 530px;
	height: 430px;
}
#conteudo #formularioIndique .descricaoCampos {
	float: left;
	width: 150px;
}
#conteudo #formularioIndique .descricaoCampos ul li {
	text-align : right;
	font: bold 11px Arial;
	padding: 6px 5px 6px 5px;
}
#conteudo #formularioIndique .descricaoCampos #espaco {
	/*height: 30px;*/
	padding-top: 25px;
}
#conteudo #formularioIndique .descricaoCampos .ceparador {
	height: 80px;
}
#conteudo #formularioIndique .camposInput {
	float: left;
	width: 265px;
}
#conteudo #formularioIndique .camposInput ul li {
	width: 255px;
	padding: 3px 1px 2px 1px;
}
#conteudo #formularioIndique .camposInput #addAmigo li {
	float:left;
	width: 125px;
}
#conteudo #formularioIndique .camposInput #removeAmigo #RemoveTodos {
	float:left;
	width:103px;
}
#conteudo #formularioIndique .camposInput #removeAmigo #RemoveTodos a {
	float: left;
	width:103px;
	text-align : right;
	text-decoration: none;
	color:#1eaee3;
	font: bold 11px Arial;
}
#conteudo #formularioIndique .camposInput #removeAmigo #amigoRemoveSelecionado {
	width:147px;
	float: left;
	text-align : right;
}
#conteudo #formularioIndique .camposInput #removeAmigo #amigoRemoveSelecionado a {
	float: left;
	width:147px;
	text-align : right;
	text-decoration: none;
	color:#1eaee3;
	font: bold 11px Arial;
}
#conteudo #formularioIndique .camposInput #addAmigo li a {
	float: left;
	width: 125px;
	text-align : right;
	text-decoration: none;
	color:#1eaee3;
	font: bold 11px Arial;
}
#conteudo #formularioIndique .camposInput #amigo li {
	float:left;
	background-color: #4BBEEA;
	width: 71px;
	padding-left: 10px;
	margin: 0px 4px 4px 0px!important;
	color:#FFF;
	font: bold 11px Arial;
}
#conteudo #formularioIndique .camposInput .listaAmigo {
	float:left;
	display: block;
	text-align: center;
	width: 245px;
	font-size: 10px;
	background: #DCF3FB;
	padding: 3px 0px 3px 10px!important;
}
#conteudo #formularioIndique .camposInput input {
	border: 1px solid #1eaee3;
	width: 250px;
}
#conteudo #formularioIndique .camposInput textarea {
	width: 250px;
	border: 1px solid #1eaee3;
	height: 100px;
	overflow: auto;
}
#conteudo #formularioIndique .camposInput ul li #contador {
	font-size: 10px;
	text-align : right;
	display: block;
	width: 255px;
}
#conteudo #formularioIndique .camposInput ul li #botaoEnviar {
	background: url("/indique_o_site/images/sabesp_memoria_enviar.gif") no-repeat 0px 0px;
	width: 80px;
	border: 0px;
	color:#FFF;
	font: bold 11px Arial;
	padding:3px 0px 3px 0px!important;
}
#conteudo #formularioIndique .camposInput ul li #enviar {
	text-align : right;
	padding-top:10px;
	display: block;
}


/*PÁGINA LINHA DO TEMPO
------------------------------------------------------------------------------------------*/

#conteudoLinhaTempo{
	float: left;
	background: url("/linha_tempo/images/sabesp_memoria_bg_voce_sabia.gif") no-repeat 0px 0px;
	width: 535px;
}
#conteudoLinhaTempo #bannerFlash {
	float: left;
	padding-left: 10px;
}
#conteudoLinhaTempo #destaqueLinhaDoTempo{
	float: left;
	padding: 14px 0px 0px 30px;
}
#conteudoLinhaTempo #controlaLink {
	padding: 40px 0px 0px 0px;
}
#conteudoLinhaTempo #controlaLink #linkTempo li a{
	font: bold 11px Trebuchet MS;
	color: #00654D;
	text-decoration: none;
}
#conteudoLinhaTempo #controlaLink #linkTempo li {
	background: url("/historia/images/sabesp_memoria_bullet.gif") no-repeat 0px 0px!important;
	padding: 0px 0px 14px 15px;
}


/*PÁGINA LINHA DO TEMPO 1973
------------------------------------------------------------------------------------------*/

#controleLinhaTempo {
	float: left;
	width: 760px;
}
#controleLinhaTempo #guardaFlash {
	float:left;
	width: 535px;
}
#conteudoEscondido {
	float: left;
	padding: 0px 0px 0px 10px;
}

#controleLinhaTempo #conteudoEscondido .boxImages{
	float: left;
	background: url('/historia/images/sabesp_memoria_bg_destaque.gif') no-repeat 0px top;
	width: 530px;
	height: 140px;
}
#controleLinhaTempo #conteudoEscondido .boxImages .boxImgTitulo{
	width: 330px;
	float: left;
	display: block;
	padding: 18px 10px 0px 10px;
}
#controleLinhaTempo #conteudoEscondido .boxImages .boxImgTitulo h2 {
	color:#00644C;
}
#controleLinhaTempo #conteudoEscondido .boxImages .boxImgFoto{
	float:left;
	width: 170px;
}


#controleLinhaTempo #conteudoEscondido .boxTextos {
	width: 560px;
	float: left;
	margin: 0px 0px 0px 0px;
}
/*#controleLinhaTempo #conteudoEscondido .boxTextosBrasil {
	width: 280px;
	float: left;
}*/

#controleLinhaTempo #conteudoEscondido .boxTextos .subTitulos li {
	background: url("/historia/images/sabesp_memoria_bullet.gif") no-repeat 0px 0px!important;
	padding: 0px 0px 14px 15px;
}
#controleLinhaTempo #conteudoEscondido .boxTextosBrasil .subTitulos li {
	background: url("/historia/images/sabesp_memoria_bullet.gif") no-repeat 0px 0px!important;
	padding: 0px 0px 14px 15px;
}
#controleLinhaTempo #conteudoEscondido .boxTextos h2 {
	color:#00644C;
	padding: 20px 0px 10px 0px;
}
/*#controleLinhaTempo #conteudoEscondido .boxTextosBrasil h2 {
	color:#00644C;
	padding: 20px 0px 10px 0px;
}*/



		

#retonar {
	width: 60px;
	padding: 3px 20px 3px 0px;
	margin: 0px auto;
	text-align : right;
	background: url("/historia/images/sabesp_memoria_voltar.gif") no-repeat 0px 0px;
	font: bold 11px Arial;
}
#retonar a {
	color:#FFFFFF;
	text-decoration: none;
}

/*PÁGINA MENSAGEM DO PRESIDENTE
------------------------------------------------------------------------------------------*/

#controlaCaixaPresidente {
	float:left;
	width: 530px;
	background: url("/mensagem_presidente/images/sabesp_memoria_bg_voce_sabia.gif") no-repeat 0px 0px;
}
#controlaCaixaPresidente #controleFlash {
	float: left;
	padding-left: 10px;
}
#controlaCaixaPresidente #textoInfo {
	float: left;
	padding: 50px 0px 0px 10px;
	width: 270px;
}



/* RODAPÉ

------------------------------------------------------------------------------------------*/
#rodape {
	width: 760px;
	height: 140px;
	float: left;
}

#rodape #infoDireitos {
	display: block;
	float: left;
	width: 590px;
	padding: 110px 0px 0px 20px;
}

#rodape #linksAcessoExterno {
	float: left;
	padding: 85px 0px 0px 0px;
}

#rodape #linksAcessoExterno a {
	margin: 0px 10px 0px 0px;
}

#rodape #linksAcessoExterno a img {
	vertical-align: middle;
}

/* WODGESTS
--------------------------------------------------------------------- */

#controlaWidgets{
	background-color: #fff;	 
	padding: 5px 0px 20px 10px;
	width: 400px;
	border: 1px solid #bcdce9;
	display: none;
	position: absolute; 
	top: 0px; 
	left: 340px;
	z-index: 100;
}

#widgets{
	list-style-image: none;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#widgets li{
	float: left;
	width: 131px;
	text-align: left;
	height: 25px;
	padding: 2px 0px 0px 0px;
}
#widgets li a {
	color: #6d6d6d;
	text-decoration: none;
}

#widgets li img{
	margin: 0px 5px 0px 5px!important;
	vertical-align: bottom!important;
} 

#fechando{
	width: 393px;
	margin: 5px 5px 0px 0px;
	float: left;
}

#fechando a {
	font: bold 11px Verdana;
	color: #ffffff;
	text-decoration: none;
}
#fechando span {
	float: right;
	background: url("/images/sabesp_memoria_fechar.gif") no-repeat 0px 0px;
	width: 80px;
	height: 20px;
	padding-top: 4px;
	display: block;
	text-align: center;
}

#compartilhe {
	position: relative;
	width: 585px;
	text-align: right;
}

.fonte{
	display: block;
	text-align: right;
	font-style: italic;
}