/* Algunas observaciones:

COMO FUNCIONA FLEX
 * 
 * La propiedad flex toma sus hijos primeros y los alínea.
 * ATENCION: flex se hace cargo del 100% del ancho, 
 * ya no servirá dar indicaciones de float o display a esos hijos primeros,
 * flex toma el control del alíneamiento de ellos.
 * y la div flex ocupara el 100% del ancho disponible.

contenedor{

display:flex;  ( funciona como un float left )
flex-direction: row 	( empieza del lado izquierdo )
	row-reverse	(empieza del lado derecho)
	column		( muestra verticalmente )
	
}
y para cada elemento:
flex-wrap: nowrap	( achica el ancho de los elmentos para que quepan en una fila
	wrap	( respeta el acho de definido para los elementos
justify-content	:flex-start	( alinea a izquierda )
		flex-end 	(alinea a derecha )
		center:		(alinea a center )
		space-between	(coloca un espacio entre elementos)	
		space-around	coloca espacios en los elementos extremos también

align-items:	flex-end;	alinea abajo 
		flex-start	alinea arriba
		center		centra horizontal y vertical	
		strech		los elementos ocupan todo el alto, 
				si es que no tienen definido su propio alto
		baseline	alinea los textos de las dintintas cajas,	
				sobre la misma línea
align-content			alinea un conjunto de elemntos, 
		usa las misma propiedades que align-items
	
https://tonalidad.es/blog/tuts/alinear-horizontal-verticalmente-flexbox/
los ejemplos:
https://tonalidad.es/html5/alinear_horizontal_y_verticalmente_con_flexbox/

*/

/* orden para lo links
a:link {
}
a:visited {
}
a:hover {
}
a:active {
}
*/


/*  font:normal 100%; 
    entonces la medida la determina el navegador
    o tambien se puede poner una medida en pixels.
    el explorador, cuando ve 100% lo define en 14 o 16 segun se trate.*/



/* para quitar la línea punteada en los links */
a:active, a:active * { outline: none !important; -moz-outline-style: none !important; }
a:focus, a:focus * { outline: none !important; -moz-outline-style: none !important; }


input, a, a:hover, a:active, a:focus {
    outline: none;
    decoration: none;
    text-decoration: none;
}


img {border: 0px;}
a img{
    border:none;
}

.hidden{
    display:none;
}    

body{
    font:normal 100%;  
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
}

#contenedor {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 95%;
        max-width: 1300px;
	overflow: auto;
	z-index: 1;
	/*overflow-x:hidden;   esto lo pongo para IE5 que coloca barras scroll */
        text-align: left;
}
.centrar{
    display:flex;
    flex-direction:row;
    justify-content:center;
    flex-wrap:wrap;
    justify-content:space-between;
    /* align-items:center   este lo dejo que lo ponga el propio objeto en su style */
}

.centrarHorizontal{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;        
}
.centrarTextosEnColumna{
    display:flex;
    flex-direction:row;
    justify-content:center;
    flex-wrap:wrap;
    justify-content:space-between;
    justify-content:space-around;
    text-justify: distribute;
}


.divTabla{ display:table; }
.divTablaFila{ display:table-row; }
.divTablaColumna{ display:table-cell; }


.col_izquierda {
	float: left;
	position: relative;
	z-index: 15;
}

.col_centro {
	float: left;
	position: relative;
	width: 82%;   /* 654px;  659px;*/
        overflow:hidden;
        min-height: 350px;
}


.col_derecha {
	float: right;
        width: 15%; 
	max-width: 200px;
        padding-bottom: 1em;
        margin-right: 1em;
	z-index: 5;
}

#footer{
	width:98%;
        float: left;
	padding:10px;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #9CF;
        margin-top: 20px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color:#a3a3a3;
	text-decoration: none;
        text-align: center;
	}
        
a.footerlinks:link {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color:#a3a3a3;
	text-decoration: none;
	}
a.footerlinks:visited {
	color:#a3a3a3;
	text-decoration: none;
	}
a.footerlinks:hover{
	color:#1f7ba0;
	text-decoration: none;	     
	}
a.footerlinks:active {
	color:#a3a3a3;
	text-decoration: none;
	}

.bloque-con-elementos{
    border-top: 1px solid LightGrey;
    border-left: 1px solid LightGrey;
    border-right: 1px solid DarkGray; 
    border-bottom: 1px solid DarkGray;
    margin-bottom: 20px;
    padding-left: 8px;
    padding-top: 5px;
    padding-bottom: 13px;
    background-color: Gainsboro;
}
#bloque{
    width:100%;
}

.link_chico{
    font-family: Verdana, Geneva, sans-serif;
    font-size: 1em;
    vertical-align: top;
    text-decoration: none;
    margin: 0px;
    padding: 4px;
    color: #666;
}
a.link_chico:link {
    color: #666;
    text-decoration: none;
}
a.link_chico:visited {
    color: #666;
    text-decoration: none;
}
a.link_chico:hover {
    color: blue;
    text-decoration: none;
}
a.link_chico:active {
    color: #666;
    text-decoration: none;
}



.subrayado{
	text-decoration: underline;
}




/* .miBoton es una definicion bastante particular. 
 * Si el sitio en cuestión no la utiliza, comentar con php
 */
.miBoton{
    width: auto;
    margin: 7px;
    margin-left: 0px;
    color: #333;
    font-size: 10px;
    font-weight: bold;
    padding: 0.2em;
    padding-left: 0.8em;
    padding-right: 0.8em;
    text-decoration: none;
    text-shadow:-1px -1px 3px rgba(255,255,255,1), 1px 1px 1px rgba(255,255,255,0.9);  
    
    
    background-color: #e9e9e9;  /* #e6e6e6; #ccc;*/
background-image: url('/imagenes/sistema/menu-bg-transparencia.png');
background-repeat: no-repeat;

    border: #999 solid 1px;
    border-radius:7px;
}
a:link .miBoton {
    text-decoration: none;
}
a:visited .miBoton {
    text-decoration: none;
}
a:hover .miBoton {
    text-decoration: none;
}
a:active .miBoton {
    text-decoration: none;
}


/*
#miTipTip{
    position: absolute;
    z-index: 5000;
    padding: 10px;
    background-color:rgba(0,0,0,0.6);
    border: 1px solid #fff;
    color:#fff;
    box-shadow:0 1px 0 rgba(0,0,0,0.3),0 -1px 0 rgba(255,255,255,0.8),0 4px 5px rgba(0,0,0,0.6)    
}
*/