/*
	============================================================
	ESTILOS PARA MAQUETAR LOS LAYOUTS, LA CABECERA, EL PIE, ETC.
	============================================================
*/
body {
    font-family: Calibri,Arial,sans-serif;
    font-size: medium;
    margin: 0;
}

.io_layout_cabecera{
	background-color:#0063C7;
    border-bottom: 1px inset black;
    padding: 0;
    width: 100%;
    z-index: 99;
    background: url("/comun_www/img/montanas_3.png") repeat scroll 0 0 transparent;
	min-height: 5em;        
}

/* USADA EN EL LAYOUT VENTANA, PARA DEJAR FIJA LA BARRA DE ARRIBA CON EL TITULO Y LA BOTONERA */

.io_layout_cabecera_fija{
	background-color: white;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
}
.io_layout_logo img{
    height: 62px;
    float: left;
}
/*
	===================
	PANTALLA DE LOADING 
	===================
	
	DIV que ponen los layouts y que se muestra al transitar entre paginas o al realizar acciones
*/

.io_layout_loading{
}

.io_loading_fondo{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.6);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
	opacity:1;
	pointer-events: auto;
}

.io_loading_visible {
	position: relative;
	/*margin: 10% auto; lo hago con center*/
	background-color:white;	
}

/* 
	=============
	MENU SUPERIOR
	=============
	SE MUESTRA EN LA PARTE SUPERIOR Y NOS PERMITE NAVEGAR ENTRE LAS SECCIONES 
*/

.io_layout_menu{
	padding:5px;
	min-height: 1.25em;
}
.io_enlace_menu{
    color: white;
    text-decoration: none;
    border-right: 1px solid rgba(255,255,255,0.3);
	margin-left: 0.25em;
	padding-right: 0.25em;
	font-weight: bold;
	font-size:large;
}

.io_enlace_menu:visited {
    color: white;
    padding: 1px 2px;
    text-decoration: none;
}
.io_enlace_menu:hover {
	color: white;
	background: rgba(255, 255, 255, 0.2);
    text-decoration: none;
}

/* la clase .io_menu_enlaces identifica el contenedor de enlaces del menu */
.io_menu_enlaces .io_enlace_menu:last-child {
	border: none;
}

.io_layout_opciones{
	float:left;
	clear:left;
}
/*
	=======
	SUBMENU
	=======
	SE MUESTRA DEBAJO DEL MENU
*/

.io_layout_submenu{
	display: flex;
	border-top: 3px solid #8DC63F;
	margin-top: 0.25em;
	padding: 1px 0.5em 1px 2px;
}
.io_enlace_submenu{
    color: #0063C7;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
    text-decoration: none;
    border-right: 1px solid #ccc;
    padding: 0.25em;
    margin-left: 0.25em;
    font-weight: bold;
}
.io_enlace_submenu:visited {
    color: #0063C7;
    text-decoration: none;
}
.io_enlace_submenu:hover {
	text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    color: #8DC63F;
    border-color: #ccc;
}

.io_layout_submenu .io_enlace_submenu:last-child{
	border: none;    
}


/* 
	============================================
	ESTILOS DE LA BARRA DE TITULOS Y LA BOTONERA 
	============================================
	CAPA LLAMADA io_layout_barra_titulo DONDE ESTAN EL TITULO Y LA BOTONERA CON UN FLOAT 
*/

.io_layout_barra_titulo{
	border-bottom: 1px solid black;
	padding: 0.25em;	
	padding-left: 0.5em;
}

.io_layout_botonera{
	float:right;
	margin-right:0.25em;
}

.io_layout_titulo{
	font-size:larger;
}

.io_layout_contenido{
	margin-top:0.5em;
	margin-left:0.5em;
	margin-right:0.5em;
	margin-bottom:0.5em;
}
.io_layout_global{
	margin-bottom:2em;
}
.io_layout_overlay{
}