@import url("normalize.css");
/**/
html, body{
	width:100%;
	height:auto;
}
body{
	background:url(../../imagenes/version_2/bg.jpg) center top no-repeat;
	background-size:cover;
}
#header{
	height:auto;
	overflow:hidden;
	background:url(../../imagenes/version_2/bg.jpg) center bottom no-repeat;
}
.header{
	overflow:hidden;
	background:url(../../imagenes/version_2/gradiente.png) left top repeat-y;
	padding:25px 25px 25px 25px;
}
.contenedor{
	width:1000px;
	height:auto;
	overflow:hidden;
	margin:auto;
}

.contenedor .contenido{
	width:950px;
	padding:25px 25px 25px 25px;
}

.footer{
	background-color:#014a7f;
}

.h1{ font-size: 2.125rem; }
.h2{ font-size: 1.6875rem; }
.h3{ font-size: 1.375rem; }
.h4{ font-size: 1.125rem; }
.h5{ font-size: 1.125rem; }
.h6{ font-size: 1rem; }

a{
	text-decoration:none;
	color:#4e4c4d;
}

.fondo-blanco{
	background-color:#FFF;
}
/*
FLOTAR
*/
.derecha{
	float:right;
}
.izquierda{
	float:left;
}

/*
TABLA
Para añadir estilo a las tablas se debe entregar la clase "tabla".
*/
table.tabla{
	width:100%;
	font-size:12px;
}
	table.tabla tr{ color:#666; }
	table.tabla tr.even,
	table.tabla tr:nth-child(even){ background:#dbe3e5; }
	table.tabla tr.odd,
	table.tabla tr:nth-child(odd){ background:#e8eced; }
		table.tabla tr th.tituloTab{ padding:10px; text-transform:uppercase; text-align:left; font-size:16px; font-weight:bold; color:#FFFFFF; background:#0072bb;  }
		table.tabla tr td{ padding:10px; border:2px solid #FFF; }
		table.tabla tr td strong, table.tabla tr td b{ color:#000000; text-transform:uppercase; }

/*
INPUT TEXT
*/
.etiqueta-form{
	padding:10px 0 10px 0;
	display:block;
}
	.etiqueta-form span{
		text-transform:uppercase;
		display:block;
		padding-bottom:10px;
	}

.input-texto{
	border:#bebebe solid 1px;
	border-radius:5px;
	padding:10px 10px 10px 10px;
	outline:none;
	color:#bebebe;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-ms-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	box-shadow:#FFF 0px 0px 1px;
	position:relative;
	/*z-index:0;
	behavior: url('js/PIE.htc');*/
}
.input-texto:hover{
	border-color:#bebebe;
	box-shadow:#CCC 0px 0px 5px;
	position:relative;
	/*z-index:0;
	behavior: url('js/PIE.htc');*/
}
/*
BOTONES
Para poder entregar estilo a los botones debemos entregar la clase "boton" y luego de ello el color del botón. Los colores disponibles son: Rojo, Celeste.
*/
.boton{
	height:10px;
	border:none;
	border-radius:5px;
	padding:15px 20px 15px 20px;
	margin-right:20px;
	font-size:12px;
	text-transform:uppercase;
	color:#FFFFFF;
	/*position:relative;
	behavior: url('js/PIE.htc');*/
}
input.boton,
button.boton{
    height:auto;
}
    a.boton{ text-decoration:none; }
    .boton.rojo{ background-color:#ed1b24; }
    .boton.celeste{ background-color:#01aef0; }
    .boton.blanco{ background-color:#FFF; color:#ed1b24; }
.boton:hover{ }
a.boton{ text-decoration:none; }
.boton.rojo{ background-color:#ed1b24; }
.boton.celeste{ background-color:#01aef0; }


.boton_small{
	height:4px;
	border:none;
	border-radius:4px;
	padding:10px 15px 10px 15px;
	margin-right:20px;
	font-size:9px;
	text-transform:uppercase;
	color:#FFFFFF;
	/*position:relative;
	behavior: url('js/PIE.htc');*/
}
.boton_small.celeste{ background-color:#01aef0; }

/*
TABS NAVEGACION
Los menús de tabs debe ser contruidos con listas; el tag "ul" debe incluir la clase "tab".
El elemento que se encuentre activo debe llevar la clase "seleccionado".
*/
ul.tab{
	list-style:none;
	margin:0;
	padding:0;
}
	ul.tab li{
		display:inline-block;
		margin:0;
		padding:0;
	}
		ul.tab li a{
			min-width:100px;
			display:block;
			padding:10px 10px 10px 10px;
			background-color:#9ebabd;
			text-transform:uppercase;
			text-decoration:none;
			text-align:center;
			font-size:12px;
			font-weight:bold;
			color:#FFF;
		}
		ul.tab li.seleccionado a{ background-color:#014a7f; }

/*
MENU VERTICAL
Los menús verticales se construyen a partir de una lista <ul>, con elementos <li> que en su interior cuentan con enlaces <a>; dentro del enlace contamos con un elemento <span> con clase "h4" para el titulo y un elemento <p> para la descripción. La lista debe ir con clase "menu-vertical" mientra que el elemento activo lleva la clase "seleccionado".
*/
ul.menu-vertical{
	list-style:none;
	margin:0;
	padding:0;
}
	ul.menu-vertical li{
		width:440px;
		background-color:#9ebabd;
		margin-bottom:15px;
	}
	ul.menu-vertical li.seleccionado{
		background-color:#0069ba;
	}
		ul.menu-vertical li a{
			width:390px;
			height:auto;
			padding:15px 25px 15px 25px;
			display:block;
			color:#FFF;
		}
			ul.menu-vertical li a span{ text-transform:uppercase; display:block; margin-bottom:5px; }
			ul.menu-vertical li a p{ padding:0; margin:0; text-align:justify; }

/**/
ul.menu-footer{
	margin:0;
	padding:0;
	list-style:none;
}
	ul.menu-footer li{
		display:inline-block;
		color:#FFF;
		font-size:12px;
		text-transform:uppercase;
	}
		ul.menu-footer li:after{
			content:'|';
			margin-left:5px;
		}
		ul.menu-footer li:last-child:after{
			content:'';
		}
		ul.menu-footer li a{
			color:#FFF;
		}
/*
INGRESO DE USUARIO
*/
.login{
	width:300px;
	height:100%;
	padding:30px 30px 30px 30px;
	background:url(../../imagenes/version_2/bg-login.png) center center repeat;
}
.fechaReporte{
    position: absolute;
    margin-left: 426px;
    margin-top: -20px;
    font-size: 55%;
}
.fechaReporte table{
    width: 200px;
}

.numeroVersion{
    position: absolute;
    margin-left: 426px;
    margin-top: -20px;
    font-size: 55%;
}

.numeroVersion table{
    width: 100px;
}


table.panelBotones{
	width:100%;
	font-size:12px;
        text-align: left;
}
table.panelBotones tr{ color:#666; }
table.panelBotones tr.even,
table.panelBotones tr:nth-child(even){ background:#dbe3e5; }
table.panelBotones tr.odd,
table.panelBotones tr:nth-child(odd){ background:#e8eced; }
table.panelBotones tr th.tituloTab{ padding:10px; text-transform:uppercase; text-align:left; font-size:16px; font-weight:bold; color:#FFFFFF; background:#0072bb;  }
table.panelBotones tr td{ 
    padding-top: 8px;
    padding-left: 4px;
    padding-bottom: 8px;
}
table.panelBotones tr td strong, table.panelBotones tr td b{ color:#000000; text-transform:uppercase; }

table.panelBotonesBlanco{
	width:100%;
	font-size:12px;
        text-align: left;
}

table.panelBotonesBlanco tr{ color:White; }
table.panelBotonesBlanco tr.even,
table.panelBotonesBlanco tr:nth-child(even){ background:White; }
table.panelBotonesBlanco tr.odd,
table.panelBotonesBlanco tr:nth-child(odd){ background:White; }
table.panelBotonesBlanco tr th.tituloTab{ padding:10px; text-transform:uppercase; text-align:left; font-size:16px; font-weight:bold; color:#FFFFFF; background:White;  }
table.panelBotonesBlanco tr td{ 
    padding-top: 8px;
    padding-left: 4px;
    padding-bottom: 8px;
}
table.panelBotonesBlanco tr td strong, table.panelBotonesBlanco tr td b{ color:White; text-transform:uppercase; }

.cabeceraDisplay{
    color: Black;
    font-weight: bold;
}
th.sorted a,th.sortable a {
  background-position: right;
  display: block;
  width: 100%;
}

span.texCelda {

        margin-top: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #000000;
	text-align:left;
	padding-left:4 px;
	margin-left:4 px;
	
}
.texCelda_idReporte {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #000000;
	text-align:right;
	padding-left:4 px;
	margin-left:4 px;
	
}

.tablaDisplay th.cabeceraDisplay {
    padding:10px; border:2px solid #FFF;
}

#tabHorizontal li{
    display: inline;
    padding-right: 5px;
}

#tabHorizontal li.seleccionado{
    font-weight: bold;
}
/* .popupCapa{
    display:none;
    z-index:20;
    position: absolute;
    text-align:left;
    top: 21%;
    margin-left: 0px;
    width: 945px;
    background-color: #E6E6E6;
    border: solid 2px;
    border-color: White;
    -webkit-box-shadow: 2px 3px 7px 4px rgba(181,177,181,1);
    -moz-box-shadow: 2px 3px 7px 4px rgba(181,177,181,1);
    box-shadow: 2px 3px 7px 4px rgba(181,177,181,1);
} */

.popupCapa{
    display:none;
    z-index:20;
    position: absolute;
    text-align:left;
    top: 21%;
    margin-left: 0px;
    width: 945px;
    background-color: white;
    border: solid 2px;
    border-color: White;
    -webkit-box-shadow: 2px 3px 7px 4px rgba(181,177,181,1);
    -moz-box-shadow: 2px 3px 7px 4px rgba(181,177,181,1);
    box-shadow: 2px 3px 7px 4px rgba(181,177,181,1);
}

.popupCapaAmpliada{
    display:none;
    z-index:20;
    position: absolute;
    text-align:left;
    top: 21%;
    margin-left: -120px;
    width: 1200px;
    background-color: white;
    border: solid 2px;
    border-color: White;
    -webkit-box-shadow: 2px 3px 7px 4px rgba(181,177,181,1);
    -moz-box-shadow: 2px 3px 7px 4px rgba(181,177,181,1);
    box-shadow: 2px 3px 7px 4px rgba(181,177,181,1);
}


img.imgIcon{
    
    cursor: pointer;
    width: 25px;
    height: 25px;
}
.linkCelda {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #000066;
	text-decoration: underline;
	vertical-align: super;
	text-align: center;
        
}

/* ESTILOS DEL ARCHIVO CSS DE CONCESIONES*/

#CapaPrincipal {
	position:absolute;
	left: 0;
	top: 0;
	background-color: Black;
	layer-background-color: gray;
	z-index:10;  
        width:100%;
        height:200%;
}
#Capa1 {
	position:absolute;
	left: 0;
	top: 0;
        background-color: Black;
	layer-background-color: gray;
	z-index:10;  
        width:100%;
        height:200%;
}
tr.tableRowEven,tr.even {
  background-color: #F9F9F9;
  font-family: Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-weight: normal;
   color: #666;
   padding-left: 5px;
   text-align:left;
   /*background-color: #FFFFFF;*/
   border-style: dotted;
   border-left:dotted;
   border-right:dotted;
   border-top:dotted;
   border-bottom:dotted;
   border-width: 1px;
   border-color: #CCC;
   height:25px;
  
  
}

tr.odd {
  background-color: #fff;
  font-family: Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-weight: normal;
   color: #666;
   padding-left: 5px;
   text-align:left;
   /*background-color: #FFFFFF;*/
   border-style: dotted;
   border-left:dotted;
   border-right:dotted;
   border-top:dotted;
   border-bottom:dotted;
   border-width: 1px;
   border-color: #CCC;
   height:25px;
}
/*INICIO: ORDENAMIENTO POR COLUMNA*/

th.sorted {
  background-color: #9ebabd;
}
th.sortable a {
  background-image: url(../../imagenes/arrow_off.png);
  background-repeat: no-repeat;
  padding-right: 8px;
}
th.order2 a {
  background-image: url(../../imagenes/arrow_up.png);
  background-repeat: no-repeat;
}
th.order1 a {
  background-image: url(../../imagenes/arrow_down.png);
  background-repeat: no-repeat;
}
.tablaDisplay{
width:100%;

}
th a,th a:visited {
  color: black;
}

th a:hover {
  text-decoration: underline;
  color: black;
}
/*FIN: ORDENAMIENTO POR COLUMNA*/


/* INICIO PAGINADOR  */
table.tablaPredios{
    width:100%;
}
ul.horizontal_list{
    padding-left: 0px;
}
ul.horizontal_list li{
    text-align: left;
    float: left;
    list-style: none;
    padding: 2px 10px 2px 10px;
    margin: 0px;
    border: 1px solid #CCC;
	background-color: #FFFFFF;
	/*display: table-cell;*/
}
ul.horizontal_list li a{
	text-decoration: none;
	display: block;
	color: #666;
}
ul.horizontal_list li a:hover{
	/*
	color: #F60;
	padding: 0px 0px 0px 0px;
	*/
	color: #F60;

}
ul.horizontal_list li a.selected_page{
	color: #4795FB;
	text-decoration: underline;
	font-weight: bold;
        
}
ul.horizontal_list li span.disabled{
	color:#8F8F8F;
        
}
/*FIN PAGINADOR*/

/*INICIO MENU ITEM SELECCIONADO */
.menu_pestana_inactiva_text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color: #000;
	text-decoration:none;
	text-align: center;	
}
.menu_pestana_activa {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color: #FFF;
	background-image: url(../../imagenes/pestana_activa2.jpg);
	background-repeat: repeat-y;
	text-align: center;
	padding-left:15;
	padding-right:10;
	margin-left:15;
	margin-right:10;
	text-decoration:none;
	
	
	
}
/*FIN MENU ITEM SELECCIONADO*/
/* INICIO ESTILOS FINALIZAR*/
.pasos{
    width:auto;
    height:auto;
    margin-top:10px;
    padding:10px 10px 10px 84px;
    overflow:hidden;
    background:#1384E6 url(../../imagenes/version_2/flecha_pasos.png) left center no-repeat;
    color:#FFF;
}
.pasosInactivo{
    width:auto;
    height:auto;
    margin-top:10px;
    padding:10px 10px 10px 84px;
    overflow:hidden;
    background:#9ebabd url(../../imagenes/version_2/flecha_pasos.png) left center no-repeat;
    color:#FFF;
}
.detalle{
    width:auto;
    height:auto;
    margin:0;
    padding:70px 10px 70px 300px;
    overflow:hidden;
    background:#e8eced url(../../imagenes/version_2/pasos-detalle.png) 30px center no-repeat;
    line-height:2em;
}
.clear{
    clear:both;
}
.block{
    display:block;
}
span.block{
    margin-left: -10px;
    padding-top: 10px;
}
/*FIN ESTILOS FINALIZAR*/
table.msjError{
    width: 100%;
}
table.msjError tr td{
    padding-left: 10px;
    border:2px solid #FFF;
    FONT-SIZE: 8pt; FONT-FAMILY: Arial; color:red;
    background:#dbe3e5;
}
.parte-sidebar{
	width:250px;
	float:left;
}
.parte-principal{
	width:675px;
	float:left;
	margin-left:25px;
}