/* tamanhos do layout relativos
*984px = *61.5em
*760px = *47.5em
*400px = *25em
*355px = *22.75em
*360 = *22.5em
*/
@import "reset.css";
@import "topo.css";
@import "navegacao.css";
@import "formulario.css";
@import "atalhos.css";
@import "interna.css";
@import "faq.css";
@import "icones.css";
@import "imprensa.css";
@import "investidores.css";
@import "agenciavirtual.css";
@import "rodape.css";
@import "acessibilidade.css";
/*centraliza o site*/
div#container {
	background: url("/hpcopel/_images/bgBody.gif") repeat-x scroll center 11px #ECF0F3;
    margin: 0 auto;
    padding-top: 11px;
    position: relative;
    top: -11px;
    width: 100%;
}
	/*abaixo do menu principal*/
	div#conteudo {
		/*float:left;*/
		width:61.5em;		
		margin:0 auto		
	}
		/*titulo da secao*/
		div#conteudo a.subtitulo {
			width:11.10em;
			float:left;
			margin-bottom:10px;
			font-weight:bold;
			font-size:2.25em;
			letter-spacing:-1px;
			color:#666666;
			clear:left
		}
		div#conteudo a.subtitulo:hover { text-decoration:none }
		/*area dinamica*/
		div#conteudo div#conteudoCentral { float:left !important; }
		
			/*só aparece na subhome*/
			div#conteudo div#conteudoCentral div.servicos {
				float:left;
				width:61.5em;
				height:22.5em;
				color:#333333;
				margin-bottom:1em; 
				background:#ffffff url('../_images/bgServicos.jpg') no-repeat top right;
			}
			
			div#conteudo div#conteudoCentral div.empresa {
				float:left;
				width:61.5em;
				height:22.5em;
				color:#333333;
				margin-bottom:1em; 
				background:#ffffff url('../_images/bgAEmpresa.jpg') no-repeat top right;
			}
			
			div#conteudo div#conteudoCentral div.solucoes {
				float:left;
				width:61.5em;
				height:22.5em;
				color:#333333;
				margin-bottom:1em; 
				background:#ffffff url('../_images/bgSolucoes.jpg') no-repeat top right;
			}
			
			div#conteudo div#conteudoCentral div.presenca {
				float:left;
				width:61.5em;
				height:22.5em;
				color:#333333;
				margin-bottom:1em; 
				background:#ffffff url('../_images/bgPresenca.jpg') no-repeat top right;
			}
			
			div#conteudo div#conteudoCentral div.contato {
				float:left;
				width:61.5em;
				height:22.5em;
				color:#333333;
				margin-bottom:1em; 
				background:#ffffff url('../_images/bgContato.jpg') no-repeat top right;
			}
			
			div#conteudo div#conteudoCentral div.novidades {
				float:left;
				width:61.5em;				
				color:#333333;
				margin-bottom:1em; 
				background:#ffffff url('../_images/bgNovidades.jpg') no-repeat top right;
			}
			
				div#conteudo div#conteudoCentral div.servicos p.descricao,
				div#conteudo div#conteudoCentral div.empresa p.descricao,
				div#conteudo div#conteudoCentral div.solucoes p.descricao,
				div#conteudo div#conteudoCentral div.presenca p.descricao,
				div#conteudo div#conteudoCentral div.contato p.descricao,
				div#conteudo div#conteudoCentral div.novidades p.descricao {
					padding:20px 0 10px;
					margin:0 20px;
					font-size:0.875em;
					line-height:1.4em;
					width:33.5em; /*357px;*/
				}
				
				div#conteudo div#conteudoCentral div.servicos ul,
				div#conteudo div#conteudoCentral div.empresa ul,
				div#conteudo div#conteudoCentral div.solucoes ul,
				div#conteudo div#conteudoCentral div.presenca ul,
				div#conteudo div#conteudoCentral div.contato ul,
				div#conteudo div#conteudoCentral div.novidades ul {
					margin:0 20px;					
					width:29.3em;/*326px*/
				}
					div#conteudo div#conteudoCentral div.servicos ul li,
					div#conteudo div#conteudoCentral div.empresa ul li,
					div#conteudo div#conteudoCentral div.solucoes ul li,
					div#conteudo div#conteudoCentral div.presenca ul li,
					div#conteudo div#conteudoCentral div.contato ul li,
					div#conteudo div#conteudoCentral div.novidades ul li { 
						background: none repeat scroll 0 0 rgba(255, 255, 255, 0.85);
    					border-color: #F1F1F1 #E0E0E0 #E0E0E0 #F1F1F1;
					    border-style: solid;
					    border-width: 1px;
					    float: left;
					    margin-bottom: 10px;
					    padding: 10px; 
					}
					
						div#conteudo div#conteudoCentral div.servicos ul li a,
						div#conteudo div#conteudoCentral div.empresa ul li a,
						div#conteudo div#conteudoCentral div.solucoes ul li a,
						div#conteudo div#conteudoCentral div.presenca ul li a,
						div#conteudo div#conteudoCentral div.contato ul li a,
						div#conteudo div#conteudoCentral div.novidades ul li a {
							border-left: 1px solid #17416A;
						    color: #17416A;
						    float: left;
						    font-size: 0.75em;
						    line-height: 1.4em;
						    padding: 0 10px;
						    width: 39em;
						}
							div#conteudo div#conteudoCentral div.servicos ul li a span.setinhaConteudo,
							div#conteudo div#conteudoCentral div.empresa ul li a span.setinhaConteudo,
							div#conteudo div#conteudoCentral div.solucoes ul li a span.setinhaConteudo,
							div#conteudo div#conteudoCentral div.presenca ul li a span.setinhaConteudo,
							div#conteudo div#conteudoCentral div.contato ul li a span.setinhaConteudo,
							div#conteudo div#conteudoCentral div.novidades ul li a span.setinhaConteudo {
								color:#17416A;
								font-weight:bold; 
								font-size:1.58333em;
							}
		
		/*destaques da subhome*/		
		div#conteudo div#destaques, div#conteudo div#destaquesDuasColunas {
			float:left;
			/*width:47.5em*/
			width:61.5em;
			padding:12px 0;
			background:#DAE1E9;
			margin:1em 0
		}
			div#conteudo div#destaques ul, div#conteudo div#destaques ul li, div#conteudo div#destaques ul li a, div#conteudo div#destaquesDuasColunas ul, div#conteudo div#destaquesDuasColunas ul li, div#conteudo div#destaquesDuasColunas ul li a { float:left }
			div#conteudo div#destaques ul { background:#FFFFFF; margin-left:0.8em; width:19.4em }
			div#conteudo div#destaquesDuasColunas ul { background:#FFFFFF; margin-left:0.8em; width:29.2em; } 
		
				div#conteudo div#destaques ul li {
					width:17.5em;
					display:inline;
					margin:0 0 0 15px;
				}
				
				div#conteudo div#destaquesDuasColunas ul li {
					width:26.5em;
					display:inline;
					margin:0 0 0 15px;
				}
				
						div#conteudo div#destaques ul h2, div#conteudo div#destaquesDuasColunas ul h2 {
							font-size:1.25em;
							padding:7px 0;
							margin-top:10px;
							color:#FF6600;
							border-top:1px solid #FF6600
						}
						div#conteudo div#destaques ul li a {
							float:left;
							width:23.3em;
							padding:10px 0;
							color:#666666;
							font-size:0.75em;
							line-height:1.4em;
							border-top:1px solid #e0e0e0
						}
						
						div#conteudo div#destaquesDuasColunas ul li a {
							float:left;
							width:35.3em;
							padding:10px 0;
							color:#666666;
							font-size:0.75em;
							line-height:1.4em;
							border-top:1px solid #e0e0e0
						}
						
						div#conteudo div#destaques ul li a:hover {
							background:#ECF0F3;							
							color:#000000;
							text-decoration:none							
						}
							div#conteudo div#destaques ul a span.tituloDestaque, div#conteudo div#destaquesDuasColunas ul a span.tituloDestaque {
								background:url("../_images/bgSetinhaCinza.gif") no-repeat right;
								color:#333333;							
								font-size:1.25em;
								padding-right:14px;
								text-decoration:underline
							}
							div#conteudo div#destaques ul a:hover span.tituloDestaque {
								background:url("../_images/bgSetinha.gif") no-repeat right;
								color:#FF6600;									
							}