/* ---------------------------------------------------
	
	Cliente: Obras Sanitarias Mendoza

	Hoja de estilos: general.css
    Media: screen
    Versión: 1.0
	
	Autor
    Alejandro Prieto
    ABC Comunicación
    http://www.abccomunicacion.com
    info@abccomunicacion.com
	
	Índice
    + Datepicker
    + Reinicio
    + Links
    + Estructura
      - Modal
      - Máscara imagen
      - Clear
    + Elementos
      - Encabezado
      - Botones
    + Bloques
    + Portada
      - Slider
      - Paneles de información
      - Widget alertas
      - Promovidos y campañas
    + Navegación
      - Setup
      - Menu principal (superior)
      - Menu lateral
      - Relacionado (árbol de notas)
      - Acciones
      - Menu pie
    + Tipografías
    + Tablas
    + Formularios
	
	Colores	
		azul: #276399
		celeste: #0084d9
		#b2daf4

/* ---------------------------------------------------
  Datepicker
------------------------------------------------------ */
@import url("datepicker.css");

/* ---------------------------------------------------
	Reinicio
------------------------------------------------------ */
html, body, div, span, 
applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, font, img, ins, kbd, q, s, samp, 
small, strike, sub, sup, tt, var, 
dd, dl, dt, li, ol, ul, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	outline: none;
}
html, body {
	height: 100%;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a img, :link img, :visited img {
	border:none
}
q:before, q:after,
blockquote:before, blockquote:after {
	content: "";
}
iframe {
  display: none;
}
/* ---------------------------------------------------
	Links
------------------------------------------------------ */
a, a:link {
	color: #0084d9;
}
a:visited {
	color: #0084d9;
}
a:hover {
	color: #004285;
}
a:active {
	color: #0084d9;
}
h3 a {
	text-decoration: none;
	font-weight: bold;
}
h3 a:hover {
	color: #0084d9;
	background: none;
}

/* ---------------------------------------------------
	Estructura
------------------------------------------------------ */
body {
	background: #004285;
}
#contenedor {
	background: #fff url(/img/fnd-top.png) center top repeat-x;
}
#central, 
#pie {
	width: 758px;
	margin: 0 auto;
}
#pie {
	background: url(/img/fnd-pie.jpg) no-repeat;
	height: 100px;
	padding-top: 18px;
}
#central {
	background: #fff url(/img/fnd-central.jpg) no-repeat;
}
#encabezado {
	position: relative;
	height: 149px;
}
#contenido {
	padding: 24px 0;
}
#principal {
	float: left;
	width: 502px;
}
#lateral {
	float: right;
	width: 247px;
	margin-left: 9px;
	padding-top: 40px;
}
#busqueda {
	float: right;
	margin-top: 24px;
}
#menu-ppal {
	clear: both;
}

/* Modal */
#modal_container .form {
  padding: 8px 16px;
	background: url(/img/fnd-modal.png) no-repeat 0 bottom;
}
#modal_container h3 {
  padding-left: 16px;
  line-height: 38px;  
	background: url(/img/fnd-modal.png) no-repeat;
}
#modal_container .submit {
  margin-top: 1.4em;
}
#modal_container .message h4 {
  font-size: 11px;
  color: red;
}
#modal_container .message ul {
  list-style-position: inside;
}
#modal_container .message li {
  font-size: 11px;
  font-style: italic;
}
#modal_overlay {
  background: #fff;
}

/* Capctha */
#recaptcha_widget {
  margin-top: 1.4em;
}
#recaptcha_response_field {
 margin: 0;
}
#recaptcha_image {
	border: 1px solid #0084d9;
	margin-bottom: .7em;
}
.recaptcha_reload_image, .recaptcha_only_if_image, .recaptcha_only_if_audio, .recaptcha_help {
  line-height: 1.4;
}

/* Máscara imagen */
#img-principal {
	position: relative;
	margin-bottom: 1.4em;
}
#img-principal .mascara {
	background: url(/img/mascara-2.png);
}
.mascara {
	position: absolute;
	z-index: 5;
	width: 502px;
	height: 200px;
	background: url(/img/mascara.png);
}

/* Clear */
.clear:after {
	content: ".";
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
}

#enviar div {
	visibility: hidden;
}

/* ---------------------------------------------------
	Elementos
------------------------------------------------------ */
/* Encabezado */
#encabezado h1 {
	float: left;
	margin-top: 4px; 
}
#encabezado h1 a {
	border: none;
}
#encabezado h1 a:hover {
	background: none;
}
#busqueda {
	background: url(/img/fnd-search.png) no-repeat;
	width: 247px;
	height: 24px;
}
#busqueda input{
	padding-left: 24px;
	background: none;
	border: none;
	outline: none;
}
/* Botones */
.boton {
	float: left;
	height: 22px;
	padding-left: 12px;
	background: url(/img/fnd-boton.png) left;
}
.boton * {
	display: block;
}
.boton a {
	padding-right: 12px;
	background: url(/img/fnd-boton.png) right;
	border: none;
	text-decoration: none;
	font-size: 1.2em;
	line-height: 22px;
	color: #276399;
}
.boton span {
	line-height: 22px;
}
.boton-s {
	width: 70px;
	height: 22px;
	background: url(/img/fnd-boton-s.png) right;
	border: none;
}
.boton-m {
	width: 120px;
	height: 22px;
	background: url(/img/fnd-boton-m.png) right;
	border: none;
}
.boton-l {
	width: 170px;
	height: 22px;
	background: url(/img/fnd-boton-l.png) right;
	border: none;
}

/* Imágenes */
.relacionado img {
	border: 1px solid #0084d9;
}

/* ---------------------------------------------------
	Bloques
------------------------------------------------------ */
#referencia {
	list-style: none;
	margin: 0;
	padding: 8px 12px !important;
}
#referencia li {
	margin-bottom: 8px;
}
.alertas * {
	padding-left: 12px;
	background-repeat: no-repeat;
	background-position: left 4px;
}
.alertas .finalizada {
	background-image: url(/img/alerta-finalizada.png);
}
.alertas .reparacion {
	background-image: url(/img/alerta-reparacion.png);
}
.alertas .verificacion {
	background-image: url(/img/alerta-reparacion.png);
}
.alertas .activa {
	background-image: url(/img/alerta-activa.png);
}

/* ---------------------------------------------------
	Portada
------------------------------------------------------ */
#destacados, #info, #promovidos, #campanas {
	margin-bottom: 8px;
}
/* Slider */
#destacados {
  position: relative;
  overflow: hidden;
  width: 502px;
	height: 200px;
  background: url(../imagenes/fnd-portada-galeria.png) repeat-x;
}
#destacados .items {
  position: relative;
  list-style-type: none;
}
#destacados .panel {
  position: relative;
  left: 2px;
  float: left;
  width: 500px;
  height: 100%;
}
#destacados .panel .wrapper {
  position: relative;
}
#destacados .panel .wrapper .texto {
  position: absolute;
  bottom: 16px;
  z-index: 10;
  width: 426px;
  padding: 0 36px;
  background: #276399;
  opacity: .9;
}
#destacados .panel .wrapper .texto * {
	color: #fff;
	text-decoration: none;
}
#destacados .panel .wrapper .texto h3 {
	font-size: 2.8em;
}
#destacados .preloader {
  overflow: hidden;
  width: 100%;
}
#destacados p.loading {
  height: 200px;
  background: #0084d9;
  text-align: center;
	line-height: 200px;
}
#destacados .prev, #destacados .next {
  position: absolute;
  z-index: 11;
  top: 140px;
}
#destacados .prev {
  left: 8px;
}
#destacados .next {
  right: 8px;
}
#destacados .prev a, #destacados .next a {
  display: block;
  overflow: hidden;
  border: none;
  text-indent: -9000em;
  width: 16px;
  height: 16px;
  background: url('/img/home-btn-slider.png');
}
#destacados .prev a {
  background-position: 32px 0;
}
#destacados .next a {
  background-position: 48px 0;
}
#destacados .prev a:hover {
  background-position: 0 0;
}
#destacados .next a:hover {
  background-position: 16px 0;
}
/* Paneles de información */
#home .info {
  position: relative;
	float: left;
	width: 247px;
	height: 144px;
	background: url(/img/home-bloque-info.png) no-repeat;
}
#home .info.box1 {
	margin-right: 8px;
}
#home .info h2 {
	height: 28px;
	margin: 0;
	padding: 2px 12px 0;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 28px;
}
#home .info dl, #home .info ul {
	padding: 4px 12px;
}
#home #asistencia dd {
	width: 100%;
	height: 30px;
	background: url(/img/home-telefonos.png) no-repeat;
}
#home #asistencia dd.tel-tecnica {
	background-position: 0 -4px;
}
#home #asistencia dd.tel-comercial {
	background-position: 0 -54px;	
}
#home #asistencia dd span {
	display: block;
	text-indent: -9999em;
}
#home #acceso-ov li {
	background-repeat: no-repeat;
	padding: 2px 0 2px 24px;
}
#home #acceso-ov li.imprimir {
	background-image: url(/img/ico-imprimir.png);
}
#home #acceso-ov li.estado {
	background-image: url(/img/ico-estado.png);
}
#home #acceso-ov li.plan {
	background-image: url(/img/ico-plan.png);
}
#home #acceso-ov .boton {
  margin-top: 8px;
  margin-left: 35%;
}
/* Widget alertas */
#home #alertas {
	position: relative;
	float: right;
	width: 243px;
	height: 352px;
	margin-left: 9px;
	padding: 0 2px;
	background: url(/img/alertas-widget-skin.png) no-repeat;
}
#home #alertas .middle {
	height: 260px;
	overflow: auto;
	/* background: url(/img/menu-lateral-fnd.png); */
}
#home #alertas .top {
	padding: 12px 12px 25px;
	/* background: url(/img/home-alertas-top.png) no-repeat; */
}
#home #alertas .bottom {
	position: absolute;
	bottom: 24px;
	width: 100%;
	/* background: url(/img/home-alertas-bottom.png) no-repeat; */
}
#home #alertas h2 {
	font-size: 14px;
}
#home #alertas .menu {
	font-size: 11px;
}
#home #alertas #fecha {
	position: absolute;
	top: 12px;
	right: 10px;
	width: 46px;
	height: 52px;
}
#home #alertas #fecha span {
	display: block;
	padding: 2px 4px;
	text-align: center;
}
#home #alertas #fecha #dia {
	font-size: 30px;
	font-weight: bold;
	line-height: 1;
	letter-spacing: -0.1ex;
}
#home #alertas #fecha #mes {
	text-transform: lowercase;
	font-weight: bold;
}
#home #alertas .alertas {
	list-style: none;
	margin: 0;
	padding: 0 12px;
}
#home #alertas .alertas li {
	margin-bottom: 8px;
	padding-top: 4px;
	padding-left: 12px;
	background-repeat: no-repeat;
	background-position: left 8px;
}
#home #alertas .alertas li.finalizada {
	background-image: url(/img/alerta-finalizada.png);
}
#home #alertas .alertas li.reparacion {
	background-image: url(/img/alerta-reparacion.png);
}
#home #alertas .alertas li.verificacion {
	background-image: url(/img/alerta-reparacion.png);
}
#home #alertas .alertas li.activa {
	background-image: url(/img/alerta-activa.png);
}
#home #alertas .alertas * {
	padding: 0;
}
#home #alertas .top .menu {
	margin-top: 8px;
}
#home #alertas .top .menu li {
	display: inline;
}
#home #alertas .top .menu li a {
	padding: 4px;
	background: #b2daf4;
	border-radius: 2px;
	text-decoration: none;
}
#home #alertas .top .menu li a:hover {
	background: #0084d9;
	color: #fff;
}
#home #alertas .middle p {
	overflow: hidden;
	margin-top: 110px;
	padding: 0 8px;
	text-align: center;
	/* background: url(/img/menu-lateral-fnd.png); */
}
/* Promovidos y campañas */
#promovidos {
	clear: both;
	margin-bottom: 8px;
}
.promovido {
	float: left;
	width: 244px;
	padding: 0 4px;
}
.marcador-categoria {
	text-transform: uppercase;
	font-size: 10px;
	color: #0084d9;
}
.promovido h3 a {
	color: #276399;
}
.promovido h3 a:hover {
	color: #0084d9;
}
.promovido p {
	margin-bottom: 0;
}
.promovido img, .resumenes img {
	float: left;
	margin-right: 4px;
	border: 1px solid #0084d9;
}
.promovido img {
  width: 63px;
  height: 63px;
}
.promovido .btn {
  font-size: 12px;
}
/* Efectos */
#home #alertas h2, #home .info h2, #home .info dt, #home .info li, #menu-lateral .top h2, #home #alertas .middle p  {
	text-shadow: 1px 1px 1px #fff;
}
/* ---------------------------------------------------
	Navegación
------------------------------------------------------ */
/* Setup */
.menu {
	margin: 0;
	list-style: none;
}
.menu a, .menu a:visited {
	border: none;
}
/* Menú principal (superior) */
#menu-ppal {
	position: absolute;
	bottom: 34px;
}
#menu-ppal li {
	float: left;
}
#menu-ppal a {
	position: absolute;
	display: block;
	height: 35px;
	/* margin-right: 12px; */
	background-image: url(/img/menu.png);
	background-repeat: no-repeat;
	text-decoration: none;
	text-transform: lowercase;
	font-size: 16px;
	color: #fff;
}
#menu-ppal span {
	display: block;
	text-indent: -9999em;
}
#menu-ppal li a.inicio {
	width: 57px;
	left: 0;
	background-position: -10px -4px;
}
	#menu-ppal li a.inicio:hover {
		background-position: -10px -44px;
	}
	#menu-ppal li.activo a.inicio {
		background-position: -10px -84px !important;
	}
#menu-ppal li a.hogares {
	width: 80px;
	left: 70px;
	background-position: -80px -4px;
}
	#menu-ppal li a.hogares:hover {
		background-position: -80px -44px;
	}
	#menu-ppal li.activo a.hogares {
		background-position: -80px -84px !important;
	}
#menu-ppal li a.empresas {
	width: 86px;
	left: 162px;
	background-position: -172px -4px;
}
	#menu-ppal li a.empresas:hover {
		background-position: -172px -44px;
	}
	#menu-ppal li.activo a.empresas {
		background-position: -172px -84px !important;
	}
#menu-ppal li a.el-agua {
	width: 75px;
	left: 392px;
	background-position: -402px -4px;
}
	#menu-ppal li a.el-agua:hover {
		background-position: -402px -44px;
	}
	#menu-ppal li.activo a.el-agua {
		background-position: -402px -84px !important;
	}
#menu-ppal li a.oficina-virtual {
	width: 117px;
	left: 261px;
	background-position: -271px -4px;
}
	#menu-ppal li a.oficina-virtual:hover {
		background-position: -271px -44px;
	}
	#menu-ppal li.activo a.oficina-virtual {
		background-position: -271px -84px !important;
	}
#menu-ppal li a.comunidad {
	width: 100px;
	left: 480px;
	background-position: -490px -4px;
}
	#menu-ppal li a.comunidad:hover {
		background-position: -490px -44px;
	}
	#menu-ppal li.activo a.comunidad {
		background-position: -490px -84px !important;
	}
#menu-ppal li a.noticias {
	width: 74px;
	left: 593px;
	background-position: -603px -4px;
}
	#menu-ppal li a.noticias:hover {
		background-position: -603px -44px;
	}
	#menu-ppal li.activo a.noticias {
		background-position: -603px -84px !important;
	}
#menu-ppal li a.nosotros {
	width: 79px;
	left: 681px;
	background-position: -691px -4px;
}
	#menu-ppal li a.nosotros:hover {
		background-position: -691px -44px;
	}
	#menu-ppal li.activo a.nosotros {
		background-position: -691px -84px !important;
	}
#menu-ppal li a.contacto {
	width: 77px;
	left: 680px;
	background-position: -693px -4px;
}
	#menu-ppal li a.contacto:hover {
		background-position: -693px -44px;
	}
	#menu-ppal li.activo a.contacto {
		background-position: -693px -84px !important;
	}
/* Menu lateral */
#menu-lateral .top {
	background: url(/img/menu-lateral-top.png) no-repeat;
}
#menu-lateral .mid {
	background: url(/img/menu-lateral-fnd.png);
}
#menu-lateral .bottom {
	background: url(/img/menu-lateral-bottom.png) no-repeat;
	height: 16px;
}
#menu-lateral ul {
	padding: 12px 2px;
}
#menu-lateral h3 {
	padding: 2px 12px;
}
#menu-lateral .top {
	height: 44px;
}
#menu-lateral .top h2 {
	padding: 13px 0 0 12px;
}
.migajas {
	list-style: none;
	padding: 12px;
}
.migajas li {
	float: left;
	margin-left: -2px;
}
.migajas a {
	display: block;
	height: 20px;
	padding-left: 7px;
	text-decoration: none;
	background: url(/img/migajas-02.png) no-repeat;
	color: #79bde4;
}
.migajas a:hover {
	color: #0084d9;
}
.migajas span {
	display: block;
	height: 100%;
	padding-right: 7px;
	line-height: 20px;
	background: url(/img/migajas-03.png) no-repeat right 0;
}
.migajas a.home {
	width: 27px;
	padding-left: 0;
	background: url(/img/migajas.png);
}
.migajas a.home span {
	background: none;
	text-indent: -9999em;
}
#menu-lateral .boton {
	margin: 13px 0 0 12px;
}
#menu-lateral #logout span {
	padding-right: 16px;
	background: url(/img/ico-salir.png) no-repeat right center;
}
#votacion {
  margin-top: 16px;
  padding: 8px;
}
#votacion fieldset {
  padding-top: 8px
}
#votacion legend {
  font-size: 10px;
}
#votacion label {
  display: inline;
  line-height: 1;
}
#votacion input {
  margin-bottom: 8px;
}
/* Relacionados (árbol de notas) */
#relacionados a, 
#acciones a {
	background-repeat: no-repeat;
	background-position: 10px center;
	display: block;
	padding: 4px 10px 6px 32px;
	text-decoration: none;
	color: #276399;
}
#relacionados a {
	background-image: url(/img/menu-bullet.png);
	font-size: 1.2em;
}
#relacionados ul {
	padding: 0;
	padding-left: 16px;
}
#relacionados ul a {
	font-size: 1em !important;
}
#relacionados a:hover {
	background-color: #d3e9f2;
	color: #0084d9;
}
#relacionados a.imprimir {
	background-image: url(/img/ico-imprimir.png);
}
#relacionados a.estado {
	background-image: url(/img/ico-estado.png);
}
#relacionados a.plan {
	background-image: url(/img/ico-plan.png);
}
#relacionados a.cliente {
	background-image: url(/img/ico-cliente.png);
}
#relacionados a.solicitudes {
	background-image: url(/img/ico-solicitudes.png);
}
#relacionados a.consultas {
	background-image: url(/img/ico-consulta.png);
}
#relacionados a.grandes-clientes {
	background-image: url(/img/ico-grandes-clientes.png);
}
#relacionados a.factibilidades {
	background-image: url(/img/ico-factibilidades.png);
}
/* Acciones */
#acciones {
	background: url(/img/menu-separador.png) no-repeat 2px top;
	padding-bottom: 0 !important;
}
#acciones a:hover {
  background-color: transparent;
	color: #0084d9;
}
#acciones a.ayuda {
	background-image: url(/img/ico-ayuda.png);
}
#acciones a.clave {
	background-image: url(/img/ico-pwd.png);
}
#acciones a.enviar {
	background-image: url(/img/ico-mail.png);
}
#acciones a.imprimir {
	background-image: url(/img/ico-imprimir.png);
}
/* Menu pie */
#menu-pie {
	text-align: center;
}
#menu-pie li {
	display: inline;
	margin: 0 4px;
}
#menu-pie a {
	text-decoration: none;
	font-size: 11px;
	color: #fff;
}
#menu-pie a:hover {
	text-decoration: underline;
	background: none;
}
/* ---------------------------------------------------
	Tipografía
------------------------------------------------------ */
body {
	font: 62.5% "Lucida Grande", "Cambria", "Trebuchet MS", sans-serif;
	color: #276399;
}
h2 {
	font: 62.5% "Futura", "Lucida Grande", "Cambria", "Trebuchet MS", sans-serif;
	font-size: 2.6em;
	color: #276399;
	/* text-shadow: #276399 0px 2px 4px; */
	text-shadow: #fff 1px 1px 1px;
}
#home h2 {
	font-size: 1.8em;
}
#principal h2 {
	margin-bottom: 4px;
}
.top h2 {
	font-size: 1.8em;
	text-transform: uppercase;
}
h3, h4 {
	font-weight: bold;
}
h3, h4, h5, legend {
	font-weight: bold;
	color: #0084d9;
}
h3, h4, legend {
	font-size: 1.4em;
}
h3, legend {
	text-transform: uppercase;
	line-height: 1.4em;
}
h5 {
	font-size: 1.2em
}
p, ol, ul, dl, label, input {
	margin-bottom: 1.4em;
	font-size: 1.2em;	
}
h4, h5, h6, 
p, li, dt, dd, label {
	line-height: 1.4;
}
dt {
	font-weight: bold;
}
input {
	color: #276399;
}
#pie p {
	margin-top: .8em;
	text-align: center;
	font-size: 1.1em;
	color: #fff;
}
p.resumen {
  margin: 1.4em 0 1em;
  padding-bottom: .4em;
  font-size: 1.4em;
}
.resultados-busqueda, .resumenes, .relacionado ul {
	list-style: none;
}
.resumenes li:after {
  content: ".";
  clear: left;
  display: block;
  visibility: hidden;
  height: 0;
}
/* ---------------------------------------------------
	Tablas
------------------------------------------------------ */
table {
	margin-bottom: 2.8em;
}
thead {
	border-bottom: 1px solid #0084d9;
}
tbody {
	background: #fff;
}
/*
tr.impar {
}
tr.par {
}
*/
th {
	text-align: left;	
}
th, td {
	padding: .6em .4em;
}
th {
	text-transform: uppercase;
	font-weight: bold;
	color: #0084d9;
}
table th a {
	font-weight: bold;
}
td {
	font-size: 1.2em;
}
table tr {
	border-bottom: 1px solid #bccdd8;
}
.index table tbody tr:hover {
	background: #cfc;
}
#alertas.index table {
  width: 100%;
}
/* Paginación */
.paging * {
	display: inline;
	margin: 0 4px;
}
.paging .disabled {
	display: none
}

/* ---------------------------------------------------
	Formularios
------------------------------------------------------ */
#principal form, #principal form legend {
	border-bottom: 1px solid #0084d9;
}
#principal form {
	margin-bottom: 2.8em;
}
#principal fieldset {
	padding-top: 12px;
}
legend {
	width: 100%;
	margin-top: -20px;
}
label {
	display: block;
	margin-bottom: 0;
}
.textarea iframe {
  display: block;
}
form#login-ov {
	padding: 12px 12px 0;
}
p.tip {
	padding-left: 24px;
	background: url(/img/ico-mensaje.png) no-repeat;
	font-style: italic;
	font-size: 1em !important;
}
#flashMessage, .error {
	margin-bottom: 24px;
	padding: 8px;
	padding-left: 24px;
	background: #fff0bc url(/img/ico-mensaje.png) no-repeat 4px center;
	border: 1px solid #f69f1b;
	font-size: 1em !important;
}