/* 20150216:
 Con la separación de comun_estilos_comunes.css, la actual hoja de estilos está sintetizando los estilos propios de una plantilla
 en específico.
 */
/* *******PROPIOS DE LA PLANTILLA COMÚN A TODAS LAS PÁGINAS. Comportamientos deseados por defecto************ */
#header {
	width: 500px;
	float: left;
	/**/
	position: relative;
	z-index: 10000; /* Superior al #nombre_sesion_alineado_derecha.z-index, para que se vea el logo */
}
table.sinbordesinternos td {
    border: none;
}
#retroalimentacionsistema {
    /* background: yellow; -->Deshabilitado: en 2013-12-19, Fabián Guarín se quejó de este color.
	    Se buscó una combinación en http://www.colorsontheweb.com/colorwizard.asp
	    V1, 2013-12-27 - Indagar su aprobación.

	    */
    background: #9FDCA9;
    color: #000D17; /* Combinación V1, 2013-12-27 */
    height: auto;
    display: block;
    margin: auto;
    padding: 0; /* Éste es el responsable de que no se vea si no hay texto escrito. */
    font-weight: bold;
    font-size: 15px;
}

.little_anotation {
    font-size: 15px;
    font-style: italic;
    border: 1px solid red;
    background: yellow;
    color: black;
    width: 300px;
}
#menu_superior {
	    clear: both;
}

#menu_superior a:hover,  #menu_inferior a:hover {
	    /* border: 2px double red; Se le quita esto, para que no brinque en algunos navegadores, como IE. */
	    background: #0b2b91;
	    background: -moz-linear-gradient(top, #0b2b91, #1153FF);
	    background: -webkit-gradient(linear, left top, left bottombottom, from(#0b2b91), to(#1153FF));
	    -moz-border-radius: 4px;
	    -webkit-border-radius: 4px;
	    -moz-box-shadow: 2px 3px 10px #011331;
	    -webkit-box-shadow: 2px 3px 10px #011331;
}

.contenedor_anchor_menu_en_general {
    text-align: center;
    float: left;
}
.contenedor_anchor_menu_en_general a {
    top: 45%;
    position: relative;
    display: block;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    height: auto;
    color: white;
}

.contenedor_anchor_menu_en_general, .elemento_menu_en_general, #menu_superior a, #menu_inferior a { /* Antes aplicaba también a #menu_superior a, */
    /* Tratamiento para textos largos, que no se salgan de los botones: */
    overflow: hidden;
    text-overflow: ellipsis;
    /* Fin de tratamiento para textos largos. */
    display: inline-block;
    float: left;
    margin: 10px;
    padding: 3px;
    width: 160px;
    height: 60px;
    color: white;
    text-align: center;

    border-right: 1px solid #0059ec;
    border-left: 1px solid #0059ec;
    z-index : 1;
    background: #0b2b61;
    background: -moz-linear-gradient(top, #0b2b61, #1153c0);
    background: -webkit-gradient(linear, left top, left bottombottom, from(#0b2b61), to(#1153c0));
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-box-shadow: 2px 3px 10px #011331;
    -webkit-box-shadow: 2px 3px 10px #011331;
}

#menu_superior, #menu_inferior  {
  width: 100%;
}

#contenedor_mnu_index {
	margin-top: 50px;
}



/*Para los formularios */
.row {
  position: relative;
  /* width: 300px; DESHABILITADO: Es mejor que cada control tenga su propio tamaño, y el div se ajuste a su contenido.  */
  width: auto;
  float: left; /* Sin esto, a pesar de tener width: auto, el ancho del bloque se vuelve de toda la fila. */
  /* border: 1px solid black; */
  padding: 10px; /* Para que los controles no se peguen unos con otros */
}
.vspacer { /* Esta idea es aprendida de reportlabs. Se trata de un bloque que sirve para espaciar verticalmente. Se usa por ejemplo
	      al final de una pantalla, en la parte inferior, cuando se desea que dicho final de pantalla tenga la posibilidad
	      de verse desde la parte superior de la misma. Por ejemplo, cuando se quiere poner un cuadro desplegable en la
	      parte superior de una pantalla, pero ese cuadro desplegable está al final de un formulario. Entonces, el bloque
	      vspacer sirve para que el navegador pueda subir el control en la pantalla. */
  height: 1000px;
}
/*ABAJO: retroalimentación al ingresar palabras clave */
.feedback_de_palabrasclave {
    color: ##00FF00;
    background: #DDDDDD;
    font-weight: bold;
    border: 1px solid black;
    width: 300px;
}

#feedback{
	border: 2px solid red;
	background: #CCCCFF; color: #BB2222; font-size: 25px; font-weight: bold;
}
.icono { /* Por ejemplo, el icono de ayuda */
  width: 20px; /* En realidad, dado que sólo será consultado una vez por cada usuario, tal vez no es tan necesario que sea tan grande como 40px de ancho, y con 20px baste. */
  vertical-align: middle; /* :) EXCELENTE!! De hecho, ya estaba listo aquí, pero con la propiedad bottom. Lo cambié a top. 2013-11-12 */
  display: inline-block;
  cursor: pointer;
}
select:active option, select:active, select:focus, input:focus, input:active, textarea:focus, textarea:active { /* No aplica para div#div_sectores:active, div#div_sectores:focus, porque es molesto */
	background: #EEEEEE;
	/* border: 5px solid blue; Este border causaba desplazamientos indeseados en los controles */
	color: black;
	/* font-weight: bold; Se le quita el BOLD, para que dejen de moverse los controles al enfocarlos. */
}
label, .labelinline {
  display: inline !important; /* El framework Yii venía con un label que por defecto era display block. Prefiero inline, para los aspectos de ayudas, y mśa bien manualmente manipular los saltos de línea. */
}
.input_text_general {
    width: 200px;
}
div.form input,
div.form textarea,
div.form select,
input[type=text]
{
    border-radius: 10px;
    border: 1px solid #ccc;
}

select {
	background: #FFFFAA;
	display: inline-block;
	margin-left: 10px;
}
select.select_largos {
    width: 250px;
}
select.select_casi_ancho_de_contenedor {
    width: 90%;
}



#retroalimentacion_antes_de_boton_guardar {
  display: none;
  border: 2px solid red;
  background: #E1E1E1;
  color: black;
  weight: 600;
  font-size: 1.1Em;
}
/* ***FIN DE SECCIÓN PROPIOS DE LA PLANTILLA COMÚN A TODAS LAS PÁGINAS***** */







/* ***************************************************************************************** */
/* ***************************************************************************************** */
/* //##Para ventana modal */
/* jqModal base Styling courtesy of;
Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
	the Window's z-index value will be set to 3000 by default (via jqModal.js). */

.jqmWindow {
    display: none;

    position: fixed;
    top: 17%;
    left: 50%;

    margin-left: -300px;
    width: 600px;

    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 12px;
}

.jqmOverlay { background-color: #000; }

/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
	width: expression(this.parentNode.offsetWidth+'px');
	height: expression(this.parentNode.offsetHeight+'px');
}

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}

.closeClass {
  position: absolute;
  right: 5px;
  color:  #FF0000;
  background: #FFFF00;
  border: 2px solid #FF0000;
  width: 60px;
  height: 20px;
  text-align: right;
  font-size: 15px;
  font-family: Arial;
  font-weight: bold;
  cursor: pointer;
}
.closeClass:hover {
  background: #FF3300;
  color: #FFFF00;
}


/* ***************************************************************************************** */
/* ***************************************************************************************** */

.llenar_con_puntos {
  content: "...";
}
#preview_recibo_reintegro {
  clear: both;
  background: #FFFF00;
  color: #FF0000;
}
/* alternativas_especiales: este estilo nació en gusquin, y luego se necesitó en fabianguarin, para los mismos fines: IMPORTAR un estado actual. */
#alternativas_especiales input, #alternativas_especiales label {
    display: inline;
}
#alternativas_especiales table td {
    width: 50%;
}
#alternativas_especiales #tablaprestamoexistente {
    background: #CCCCFF;
    border: 1px solid black;
}
#alternativas_especiales #tablayahareintegradoprimeracuota_a_acreedor {
    background: #FFFFCC;
    border: 1px solid black;
}
/* Fin de Alternativas Especiales */
.en_desarrollo, .en_preparacion, .a_futuro {
    border: 3px solid red;
    background: #FFAAAA;
}
#iframe_de_notificaciones_en_site_index {
   width: 90%;
   margin: 30px;
   border: 2px solid red;
}

.seccion_de_botones_menu_site_index {
    clear: both;
    overflow: hidden;
    margin: 20px;
    padding: 20px;
}


.boton_generar_sintesis {
    height: 30px;
    cursor:pointer;
}

#listadeclientes {
    /*Contenedor de checkboxlist */
    width: 100%;
    background: #AAAA00;
}
#listadeclientes .contenedorcheckclientes {
    display: inline-block;
    border: none;
    font-size: 0.9Em;
    width: 200px;
    height: auto;
    margin: none;
    margin-right: 10px;
    padding: none;
}
#div_sectores {
    /*Contenedor de checkboxlist */
    height: auto; /* overflow-y: scroll;*/
    background: #00AAAA;
    width: 90%;   /* Coincide con la medida de #inputtext_sectores */
    display: none; /* Por defecto está oculto */
}
#div_sectores .contenedor_checkboxes_en_div_sectores {
    background: #DDDDFF;
    border: 1px solid #005500;
    word-wrap: break-word;
    border-collapse: collapse;
    margin: 10px;
    display: inline-block;
    width: 155px;
    table-layout: fixed;
    height: auto;
    font-size: 0.8Em;
}

#inputtext_sectores {
    height: 60px;
    width: 90%; /* Coincide con la medida de #div_sectores */
}

#tabla_search, #tabla_search td {
    border: 1px solid black;
    border-collapse: collapse;
}


#input_hora_inicio, #input_siprensapagina, #input_tamano_dimension1, #input_tamano_dimension2 {
    height: 20px;
    width: 60px;
}
#SELECT_tamano_dimension2  { /* Por ejemplo para el medio REVISTAS */
height: 40px;
width: 200px;
}
.textareaoinput_titulo {
    width: 700px;
    height: 40px;
}

#input_si_internet_url {
    height: 20px;
    width: 350px;
}

#tabla_formulario, #tabla_formulario tr, #tabla_formulario td {	/* Se usa por lo menos en formulario de noticias y usuarios */
    border: 1px solid black;
    text-align: center;
}
.clase_filtro_de_grillaCGridView_para_filterCssClass {
    /* Siempre debe usarse junto con la clase filters, porque sino el CGridView puede perder los anchos de las columnas.
     Modo de uso en las opciones del CGridView: 'filterCssClass'=>'filters clase_filtro_de_grillaCGridView_para_filterCssClass',  */
    background: #AAAA00;
}
.bloque_para_toggle, .anchor_para_block_toggle {
    display: block;
    margin: 20px;
}
.tabla_de_historial_de_edicion {

}
#nombre_sesion_alineado_derecha {
    float: right;
    text-align: right;
    width: 95%;
    max-width: 45%;
    position: relative;
    overflow: hidden;
    z-index: 1; /* Inferior al #header.z-index, para que se vea el logo */
}
#tiempo_de_respuesta_del_servidor {
    clear: both;
}

.sumario_errores {
    font-size: 15px;
    background: #FFCCCC;
    padding: 1em;
}
.sumario_errores li {
    margin: 1em;
}
@media (max-width:840px) {
    #logo {
	display: none;
    }

}

.grid-view .filters input, .grid-view .filters select {
	width: 80%; /* Esto evita que los filtros se salgan en el encabezado del gridview en Chrome. */
}