/*-----------------------------------------------------------------------
	Definicion de espacios de las capas
-----------------------------------------------------------------------*/
#contenedor { /* Contenedor de las capas */
	border:0 px #000000 dashed;
	height:100%;
	width:1010px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom:0px;
	box-shadow:0px 0px 15px #000000;
	-moz-box-shadow:0px 0px 15px #000000;
	-moz-border-radius: 15px;
	border-radius: 15px;
	font-family:"Verdana";
	font-size:14px;
}

#arriba{ /* Capa superior, donde se coloca el logo de la empresa */
	background-image: url("../imagenes/logo.jpg");
	background-repeat: no-repeat;
	background-position:bottom;
	background-size: 100% 100%;
	width:1010px;
	height:90px;
	float:left;
	border-radius: 15px;
	
}

#menu_lateral {
	background-color: #FFFFFF;
    border: 2px solid #DADADA;
    border-radius: 10px;
    float: left;
    min-height: 400px;
    width: 230px;
	/* Opcional */
	margin-top: 15px;
}

#centro{/* Capa central donde se ubica los datos del sistema */
	color:black;
	background-color:transparent;
	float:left;
	width:770px;
	border: 2px solid #DADADA;
	border-radius: 10px;
	/* Opcional */
	margin-top: 15px;
}

#centro_completo {
	color:black;
	background-color:transparent;
	float:left;
	width:1010px;
	min-height:300px;
}

#abajo {
	font-size: 14px;
	clear:both;
	text-align: center;
	background-color:#E0ECF8;
	border-radius:0px 0px 15px 15px;
	width:1010px;
}

.titulo {
	text-align:center;
	font-size:20px;
	margin:0px;
}

legend {
	font-weight:bold;
	font-style:italic;
}

a {
	text-decoration: none;
}
td a:visited {
	color:#00E;
}

fieldset {
	border: 2px solid #A00;
	-moz-border-radius:5px;
	border-radius: 10px;
	-webkit-border-radius: 5px;
}

/* ESTO ES PARA LAS ETIQUETAS ROJAS  DE LOS OBLIGATORIOS */
.obligatorio {
	color: #FF0000;
	font-weight: bold;
	width:auto;
}

/*	ESTO ES PARA LAS ETIQUETAS BLANCAS QUE VAN EN LOS CAMPOS
	NO OBLIGATORIOS PARA TENER EL MISMO TAMAÑO QUE LOS OBLIGATORIOS */
.blanco{
	color: #FFFFFF;
	font-weight: bold;
	width:auto;
}

.label_ancho {
	width: auto;
	text-align:center;
}

ul {
    list-style-type:none;
	list-style-position:outside;
	margin:0px;
	padding:10px;
	border-bottom:0 none;
}

li {
	list-style-type:none;
}
li label {
	display: inline-block;
	font-weight: bold;
	margin-top: 8px;
	padding: 3px;
	width: 250px;
	text-align:right;
}

tr.fila_gris{
	background:#CCC;
}

.servicios{
	display:none;
}

.servicios li label {
	display: inline-block;
	font-weight: bold;
	margin-top: 8px;
	padding: 3px;
	width: auto;
	text-align:left;
}


.permisos li label {
	display: inline-block;
	font-weight: bold;
	margin-top: 8px;
	padding: 3px;
	width: auto;
	text-align:left;
}

/* Estilo que se le da a todos los combos de las vistas */
select {
	display: inline-block;
	font-weight: bold;
	margin-top: 8px;
	padding: 3px;
	width: 190px;
	font-weight:normal;
	height: 30px;
}

/* Estilo que se le da a todos los combos de las vistas cuando tiene el foco*/
select:focus{
	background: #FFFFFF; 
	border:1px solid #F00; 
	box-shadow: 0 0 3px #aaa;
}

/* Estilo que se le da a todos los input de las vistas */
input {
	height:20px; 
	width:170px; 
	padding:5px 8px;
	margin-top:8px;
	text-transform: uppercase;
}

textarea{
	height:20px; 
	width:170px; 
	padding:5px 8px;
	margin-top:8px;
	text-transform: uppercase;
}


input[type=checkbox] {
	height:auto; 
	width:20px;
	padding:0px 0px;
}

input[type=radio] {
	height:20px; 
	width:auto; 
	padding:2px 2px;
}


.Texto tr:hover{
	background-color:#036;
	color: #FFFFFF;
	cursor:pointer;
}


.sobreado_filas a{
	color:#00F;
	text-decoration:underline;
	font-weight:bolder;
}

.sobreado_filas tr:hover a{
	cursor:pointer;
	text-decoration:underline;
}


.titulo_listado{
	font-weight:bold;
	
}

div.partes_formulario_personal{
	display:block;
	margin-left:-10px;
	padding:0px;
}

h5{
	margin-left:15px;
	font-weight:normal;
}

.boton{
	height:30px;
	background-color: #0072C6;
	color: #FFFFFF;
	border: 0 none;
}

.alineados_izquierda{
	text-align:left;
}

div#reportes{
	width:490px;
	float:left;
}

div#reportes ul{
	padding:5px;
}


div#reportes a {
	text-decoration:none;
	color: #0000FF;
}
div#reportes a:hover{
	text-decoration:underline;
	background: #EEEEEE
}

.label_corto{
	display: inline-block;
    font-weight: bold;
    margin-top: 8px;
    padding: 3px;
    text-align:left;
	width: auto;
}

.label_opcion_1{
	display: inline-block;
    font-weight: bold;
    padding: 3px;
    text-align:left;
	min-width: 30px;
	width: auto;
}
.label_opcion_2{
	display: inline-block;
    font-weight: bold;
    padding: 3px;
    text-align:left;
	width: 240px;
}





/*-----------------------------------------------------------------------
	Definicion de la capa para los mensajes de notificaciones
-----------------------------------------------------------------------*/
div.mensaje{
	background-color:#FFF;
	display:none;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	/* transform: rotate(30deg);*/
	/* transform:translate(-50%,-50%)  rotate(30deg);
	-webkit-transform:translate(-50%,-50%) rotate(30deg); */
	position:fixed;
	width:35%;
    background-position:center top;
	z-index:5;
	font-weight:bold;
	text-align:center;
	box-shadow:0px 0px 30px #000000;
	border-radius:6px 6px 6px 6px;
	font-size:18px;
}
/*-----------------------------------------------------------------------
	Definicion del encabezado de las notificaciones
-----------------------------------------------------------------------*/
div.mensaje .encabezado{
	background:linear-gradient(#42464E, #31353E, #31353E) repeat scroll 0 0 rgba(0, 0, 0, 0);
	height:30px;
	text-align: left;
	color: #FFF;
	padding-top:5px;
	padding-left:5px;
	border-radius:6px 6px 0px 0px;
	margin-top:-7px;
	margin-left:-12px;
	margin-right:-12px;
	font-size:18px;
	margin-bottom:5px;
}
/*-----------------------------------------------------------------------
	Definicion del boton que posee el encabezado de las notificaciones
-----------------------------------------------------------------------*/
div.mensaje .encabezado button{
	float:right;
	padding-bottom: 0px;
	margin-top:-3px;
	margin-right:4px;
}
/*-----------------------------------------------------------------------
	Definicion de la capa del listados encabezado de las notificaciones
-----------------------------------------------------------------------*/
div.listado{
	background-color: #FFFFFF;
	position:fixed;
	top: 20%;
	left:20%;
	width: 800px;
	visibility: visible;
	overflow: auto;
	z-index: 5;
	box-shadow: 0px 0px 30px #000000;
	display:none;
}

/*-----------------------------------------------------------------------
	Tamaño minimo que tendrá la capa del listado
-----------------------------------------------------------------------*/
div.listado fieldset{
	min-height:300px;
}

/*-----------------------------------------------------------------------
	Definicion del encabezado de los listados
-----------------------------------------------------------------------*/
div.listado .encabezado_listado{
	background:linear-gradient(#42464E, #31353E, #31353E) repeat scroll 0 0 rgba(0, 0, 0, 0);
	height:30px;
	text-align: left;
	color: #FFF;
	padding-top:5px;
	padding-left:5px;
	border-radius:6px 6px 0px 0px;
	margin-top:-7px;
	margin-left:-11px;
	margin-right:-11px;
	font-size:18px;
	margin-bottom:5px;
}

/*-----------------------------------------------------------------------
	Definicion de la capa de resultados de los listados
-----------------------------------------------------------------------*/
div.listado .resultados{
	display:none;
}

/*-----------------------------------------------------------------------
	Definicion del boton que posee el encabezado de las notificaciones
-----------------------------------------------------------------------*/
div.listado .encabezado_listado button{
	float:right;
	padding-bottom: 0px;
	margin-top:-3px;
	margin-right:4px;
}

h2{
	display: inline-block;
	font-weight: bold;
	margin-top: 5px;
	padding: 0px;
	width:auto;
	text-align:center;
	font-size:14px;
}

.tabla tr:hover{
	background-color:#CCC;
	color: #000000;
}

a:hover {
	text-decoration:underline;
	cursor:pointer;
}

.mensaje_oculto_rojo{
	display:none;
	width:370px;
	margin-left:270px;
	color:#F00;
	font-weight:bold;
}

.mensaje_oculto_verde{
	display:none;
	width:370px;
	margin-left:180px;
	color:#00D600;
	font-weight:bold;
}

.formulario_configuracion{
	display: inline-block;
	font-weight: bold;
	margin-top: 8px;
	padding: 3px;
	width: 300px;
	text-align:right;
	margin-left: -100px;
}
li button {
	margin-top:15px;
}

input:focus, textarea:focus {
	background: #fff; 
	border:1px solid #F00; 
	box-shadow: 0 0 3px #aaa; 
}

/*-------------------------------------------------------------------------------------------------------
	Estilo para que la caja de texto con el nombre txtUrl no transforme el texto en mayusculas para que
	no cause confucion al momento de crear las rutas de los archivos.
-------------------------------------------------------------------------------------------------------*/
input[name="txtUrl"]{
	text-transform:none;
}

/*-------------------------------------------------------------------------------------------------------
	Estilo para que la caja de texto con el nombre txtMensaje no transforme el texto en mayusculas para 
	que	no cause confucion al momento de crear un mensaje que se mostrará al inicio de sesión de los 
	usuarios.
-------------------------------------------------------------------------------------------------------*/
.sin_decoracion{
	text-transform:none;
}


/*-------------------------------------------------------------------------------------------------------
	Estilo los label e input que estaran dentro de una tabla en la vista. dandoles el estilo para que 
	esten mas juntos, sin perder estetica.
-------------------------------------------------------------------------------------------------------*/
.letras_pequenas{
	font-size:10px;
}

/*-------------------------------------------------------------------------------------------------------
	Estilo los label e input que estaran dentro de una tabla en la vista. dandoles el estilo para que 
	esten mas juntos, sin perder estetica.
-------------------------------------------------------------------------------------------------------*/
.tabla_transaccion label{
	margin-top: 5px;
	padding: 0px;
	width: auto;
	text-align:left;
}

.tabla_transaccion input,.tabla_transaccion textarea {
    margin-top: 0px;
	width:120px;
}

/* Estilo que se le da a todos los combos de las vistas */
.tabla_transaccion select {
	margin-top: 0px;
	width:140px;
	height:35px;
}

input[type="radio"] {
    width: auto;
}

input[type=checkbox] {
	width:auto;
}


.input_cortos{
	width:auto;
	margin-top:0;
}

.select_cortos{
	margin-top:0;
}

.columna_color_oscuro{
	background-color:#C3E0E4;
}

.columna_color_claro{
	background-color:#8FC4CB;
}
/*
.nueva_tabla tr:hover{
	background-color:#000000;
	color: #000;
}*/

#capa_recuperacion{
	display:none;
}

.label_radio{
	display: inline-block;
    font-weight: bold;
    margin-top: 8px;
    padding: 3px;
    text-align:left;
	width: 65px;
}


.mensaje_inicio_sesion{
	text-align:justify;
	font-size:16px;
	font-weight:bold;
}