/************************************
*** Todo Conteúdo Exceto o Rodapé ***
*************************************/
#content {
  position: relative;
  height: auto !important;
  height: 100%;
  min-height: 100%;
}

/************************************
***       Menu Superior           ***
*************************************/ 

#header {
	clear: both;
	position: relative;
	height: 5em;
	margin: 0 auto;
	background:#009d9d url(../images/bg/header.gif) repeat-x bottom left;
	border-bottom: 2px solid #009d9d;
	background-color: #009d9d;
}

#header img {
  position: absolute;
  top: 5%;
  left: 10px;
}

#header ul {
  margin: 3.5em 1em 0 0 !important;
  margin: 3.5em 0.5em 0 0;
  padding: 0;
  float: right;
}

#header ul li {
  display: inline;
  list-style: none;
}

#header ul li a {
  float: left;
  padding: 0 1em;

  font: 400 1.1em arial, sans-serif;
  font-weight:bold;
  letter-spacing: 0.1em;
  line-height: 0.8em !important;
  line-height: 1em;
 color:#FFF;
  border-right: 1px solid #4D5760;
}
#header ul li a.last {
  padding-right: 0;
  border-right: 0;
}
#header ul li a:hover {
  color: #F26A92;
}

#headerImg {
  margin: 0 auto;
  height: 110px;
  /**background: url(../images/bg/header_image.jpg) no-repeat top left;**/
}



/************************************
***       Page Content            ***
*************************************/ 
#page {
  clear: both;
  float: left;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 6em;
  text-align: left;
}

#columns {
  margin: 0 auto;
  position:relative;
}

/* Column widths */
.width {
  width: 776px;
}
/************************************
***       Lateral Esquerda        ***
*************************************/ 
#widthLeft {
	width: 135px; 
	float: left;
}  

.widthContent{
	width: 620px; float:right;
}

.widthPad {
  width: 766px;
}
.width25 {
  width: 24%;
}
.width50 {
  width: 48%;
}
.width73 {
  width: 73%;
}
.width75 {
  width: 75%;
}
.width100 {
  width: 100%;
}

/************************************
***       Image Menu              ***
*************************************/ 
#imageMenu 
{
	margin: 0 auto;
	position: relative;
	width: 767px;
	height: 360px;
	overflow: hidden;
}

#imageMenu ul {
	list-style: none;
	/*margin: 0px;*/
	display: block;
	height: 360px;
	width: 1000px;
    float: left;
    margin : 0;
    padding : 0;
    text-align : left;
	
	
	}

#imageMenu ul li {
	float: left;
}

#imageMenu ul li a {
	text-indent: -1000px;
	background:#FFFFFF none repeat scroll 0%;
	border-right: 2px solid #fff;
	cursor:pointer;
	display:block;
	overflow:hidden;
	width:153px;
	height: 360px;
}

#imageMenu ul li.QuemSomos a {
	background: url(../images/Menu/QuemSomos.jpg) repeat scroll 0%;
}

#imageMenu ul li.saneamento a {
	background: url(../images/Menu/Saneamento.jpg) repeat scroll 0%;
}

#imageMenu ul li.transporte a {
	background: url(../images/Menu/Transporte.jpg) repeat scroll 0%;
}
#imageMenu ul li.parceiros a {
	background: url(../images/Menu/Parceiros.jpg) repeat scroll 0%;
}

#imageMenu ul li.contato a {
	background: url(../images/Menu/Contato.jpg) repeat scroll 0%;
}


.clear {
	clear: both;
}


/*************************************
***     Banner PoupeAgua           ***
**************************************/
#PoupeAgua {
	
	margin: 0 auto ;
	position: relative;
	width: 767px;
	background: #fff url("../Images/bg/Fundo2.jpg") center no-repeat;
	height: 100px;
	overflow: hidden;	
	background-color: #FFF;
}	


/************************************
***     Texto Paginas Internas   ****
************************************/
.texto {
 float: left;
  width: 52% !important;
  width: 52%;
  position: relative;
  margin-top:2.5em; 
  margin-bottom: 1.5em;
  border-bottom: 1px solid #CCCCCC;
   
  
}
.texto .title {
  display: block;
  padding: 0 0 1px 0;
  /*margin-top:2.5em;*/
  font-size: 1.4em;
  font-weight: bold;
  color: #586B7A;
}

.texto p {
  margin: 0 0 0 3.5em;
  padding:  0 0 1em 1.2em;
  border-left: 1px solid #CCCCCC;
  position:relative;
  font-size: 1.1em;
}




/************************************
***       Disposição Geral        ***
*************************************/ 

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

/************************************
***       Navigation              ***
*************************************/ 

#navigation-block 
{
   /*position : relative;
   height: 5em;
   margin: 0 auto;*/
	
	float: left;
  width: 25% !important;
  
 
	position:relative;
	
	/*top:20px;*/
	left:20px;
}

#hide {
	position:absolute;
	/*top:30px;*/
	left:-10px;
}

ul#sliding-navigation
{
	list-style: none;
	font-size: .75em;
	margin: 10px 0;
	padding: 0;
}

ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
	display: block;
	width: 211px;
	padding: 5px 18px;
	margin: 0;
	margin-bottom: 5px;
}

ul#sliding-navigation li.sliding-element h3
{
	color: #007777;
	background:#E2E2E2 url(../Images/Navigation/heading_bg.jpg) repeat-y;
	font-family: "Lucida Grande", Verdana, sans-serif;
	font-size: 1.6em;
	font-weight: normal;
}

ul#sliding-navigation li.sliding-element a
{
	color:#009D9C ;
	background:#F2F2F2 url(../Images/Navigation/tab_bg.jpg) repeat-y;
	border: 1px solid #FFF;
	font-family: "Lucida Grande", Verdana, sans-serif;
	font-size: 1.4em;
	text-decoration: none;
}

ul#sliding-navigation li.sliding-element a:hover { color: #00D9D9; }



/*************************************
***           Rodapé               ***
**************************************/

#footer {
  clear: both;
  float: left;
  width: 100%;
  height: 5em;
  /*margin-top: 1em;*/
}

#footer #bg {
  position: relative;
  height: 5em;
  margin: 0 auto;
  background: #49525B url(../images/bg/header.gif) repeat-x bottom left;
}

#footer #bg ul {
  float: right;
  margin: 3em 1em 0 0 !important;
  margin: 3em 0.5em 0 0;
  padding: 0;
}

#footer #bg ul li {
  display: inline;
  list-style: none;
}

#footer #bg ul li a {
  float: left;
  padding: 0 1em;

  font: 400 1em arial, sans-serif;
  letter-spacing: 0.1em;
  line-height: 0.8em !important;
  line-height: 1em;

  color: #FFF;
  border-right: 1px solid #4D5760;
}

#footer #bg ul li a.last {
  padding-right: 0;
  border-right: 0;
}

#footer #bg ul li a:hover {
  color: #F26A92;
}

#footer #bg img {
  position: absolute;
  top: 6%;
  left: 10px;
}