/* ---------------------------------------------------------------- */
/* Estilos generales para todas las páginas (todos los navegadores) */
/* ---------------------------------------------------------------- */

/*
En los archivos *-ly.* Sólo especificar Layouts, es decir, estilos
que sólo afecten a las dimensiones y posiciones de las cajas.
*/

/***********************/
/* Elementos generales */
/***********************/
* {
    margin:0;
    padding:0;
}

a img {
    border: none;
}

a, a:hover, a:visited, a:active{
	outline: none;
}

div#contenedor {
    width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* separador usado cuando hay enlaces adyacentes (WCAG sección 10.5) */
span.separador_enlaces{
	display:none;
}

/************/
/* "popups" */
/************/
div.ui-popup{
	position: absolute;
	width: 300px;
	border-width: 1px;
}

div.ui-popup div.text_panel{
	padding: 6px 8px;
}

div.ui-popup span.close{
	display:block;
	padding-left: 20px;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 32px;
	border-bottom-width: 1px;
}

/************/
/* cabecera */
/************/
div#cabecera{
    width: 100%;
    height: 218px;
    position: relative
}

div#cabecera h1{
	width: 100%;
	height: 111px; /* altura total: 123px = 121px + 2px borde */
	padding-top: 5px;
	padding-bottom: 5px;
	border-width: 1px 0;
	position: absolute;
	top: 97px;
	left: -2px;
}


div#cabecera div#formularios{
    margin-top: 2px;
    height: 85px;
}

/* -- NOTA: --
   div#cabecera a#oficina_virtual es un enlace provisional a la oficina
   virtual. Cuando se desactive, quitar display:none a div#formulario_login
   ----------- */
div#cabecera a.enlace_provisional{
	display: block;
	float: left;
	min-height: 30px;
	padding-left: 20px;
	margin-left: 0px;
	margin-top: 63px;
	background-color:#FFFFFF;
	padding-top: 5px;
}
div#cabecera a.enlace_provisional{
	font-size: 90%;
	background-image: url(../images/interior/acces_ident.jpg);
	background-position: left 5;
}

div#cabecera a.enlace_provisional strong{
    display: block;
}

/* estilos para los dos formularios */
div#cabecera div#formularios label {
    display: block;
    height: 30px;
}

div#cabecera div#formularios label span{
    display: none;
}

div#cabecera div#formularios input {
    width: 100px;
    height: 15px; 
    border: none;
}

/* formulario de búsqueda */
div#cabecera div#formularios div#formulario_buscar label#buscar{
    position: absolute;
    height: 17px;
    width: 115px;
    padding: 1px 5px;
    top: 63px;
    right: 26px;
}

div#cabecera div#formularios div#formulario_buscar label#enviar_buscar{
    position: absolute;
    top: 45px;
    right: 7px;
    width: 19px;
    height: 19px;
}

div#cabecera div#formularios div#formulario_buscar input#submit_buscar {
    width: 19px;
    height: 19px;
}

div#cabecera div#formularios span#obituario {
    display: none;
}

/* formulario de búsqueda desplazado para ubicar icono en la derecha de
   la cabecera (lazo negro, lazo rojo, lazo rosa, lazo añil, lazo beige, etc.)
*/

div#cabecera.activar_obituario div#formularios label#buscar{
    right: 91px;
}

div#cabecera.activar_obituario div#formularios label#buscar input{
    width: 10em;
}

div#cabecera.activar_obituario div#formularios label#enviar_buscar{
    right: 67px;
}

div#cabecera.activar_obituario div#formularios span#obituario {
    position: absolute;
    display: block;
    right: 0;
    width: 52px;
    height: 52px;
}

/* enlaces a la web de la UGR y al stack */
div#cabecera a#enlace_ugr{
	display: block;
	position: absolute;
	top: 23px;
	left: 0;
	height: 55px;
	width: 180px;
}

div#cabecera a#enlace_stack{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 560px;
	height: 50px;
}

/* selector de idioma */
div#cabecera div#language_selector{
	position: absolute;
	right: 0;
	top: 4px;
	z-index: 2;
}

div#cabecera div#language_selector a {
	float: right;
	padding-left: 11px;
	margin-left: 10px;
}

/**********/
/* rastro */
/**********/
div#rastro {
    min-height: 23px;
    padding: 3px 0;
    border-width: 0 0 1px 0;
}

div#rastro li{
	display: inline;
}

div#rastro a{
    padding-left: 12px;
    margin-right: 3px;
}

/*******/
/* Pie */
/*******/
div#pie{
    clear: both;
    padding-top: 78px;
    padding-left: 0;
    border-width: 1px 0 0 0;
}

div#pie a{
    display: block;
    float: left;
    padding-left: 10px;
    margin-right: 20px;
}

div#pie p{
    float: right;
    margin-right: 0;
}

div#pie p a{
    display: inline;
    float: none;
    padding: 0;
    margin: 0;
}

/***********************/
/* Formulario de login */
/***********************/
div#login_form{
	padding-top: 40px;
	border-bottom-width: 1px;
}

div#login_form label,
div#login_form span.info{
	display: block;
	margin-left: 12px;
	padding-left: 18px;
	margin-bottom: 12px;
}

div#login_form span.login_lastaccess{
	float: left;
	width: 140px;
}

div#login_form div.image-ayuda{
	float: left;
}

div#login_form label span{
	display: block;
	float: left;
	clear: left;
	width: 65px;
}

div#login_form label input {
	width: 76px;
}

div#login_form label#enviar_login input,
div#login_form label#enviar_logout input{
	width: 85px;
	height: 25px;
	margin-left: 66px;
}

div#login_form label#enviar_login input:hover,
div#login_form label#enviar_logout input:hover{
	width: 85px;
	height: 25px;
}

/******************************/
/* Acciones de administración */
/******************************/
div#admin_actions{
	padding-top: 6px;
	padding-bottom: 34px;
	padding-left: 7px;
	overflow: hidden;
}

div#admin_actions form {
	display: inline;
	margin-right: 5px;
}

a.popup-link
{
	text-indent:-999px;
	/*display:block;*/
	height: 12px;
	width: 12px;	
	float: left;
}



/* ---------------------------------------------------------------- */
/* Estilos generales para todas las páginas (todos los navegadores) */
/* ---------------------------------------------------------------- */

/*
En los archivos "*-sb_*" Sólo especificar sabores, es decir, estilos
que sólo afecten a colores, fondos, tipografías, etc.
*/

/***********************/
/* Elementos generales */
/***********************/
*{
	background-repeat: no-repeat;
	border-style: solid;
	border-width: 0;
}

a {
	color: #17529c;
	text-decoration: none;
}

a:hover{
	color: #dd3b15;
}

a img {
	border: none;
}

ol,ul {
	list-style-type: none;
	list-style-position: inside;
}

h1,h2,h3,h4,h5,h6 {
	font-family: Georgia, serif;
	font-weight: normal;
	font-style: normal;
}

div#contenedor {
	font-family: Verdana, sans;
	font-size: 11px;
}

/************/
/* "popups" */
/************/
a.popup-link {
	cursor: help;
}

div.ui-popup{
	background-color: #ffffd0;
	cursor: default;
}

div.ui-popup span.close{
	text-align: left;
	cursor: pointer;
	background-image: url(../img/actions/fileclose.png);
	background-position: 4px center;
 	background-color: #ffff90;
	color: black;
	font-weight: bold;
}

/************/
/* cabecera */
/************/
div#cabecera h1{
	text-indent: -9999em;
}

div#cabecera h1{
	/* por defecto se usa la misma imagen que en el index */
	background-image: url(../../../images/cabecera_foto.jpg);
	background-position: 0 5px;
	border-color: #8ba8cd;
}

div#cabecera div#formularios{
	background-position: 0 2px;
	background-image: url(../../../images/Logo_pequeno.jpg);
}

/* -- NOTA: --
div#cabecera a#oficina_virtual es un enlace provisional a la oficina
virtual. Cuando se desactive, quitar display:none a div#formulario_login
----------- */
div#cabecera a.enlace_provisional{
	font-size: 90%;
	background-image: url(../../../images/interior/acces_ident.jpg);
	background-position: left 5;
}

div#cabecera a.enlace_provisional{
	font-size: 90%;
	background-image: url(../../../images/interior/acces_ident.jpg);
	background-position: left 5;
}

/*div#cabecera a.enlace_provisional:hover{
	background-image: url(../img/general/cabecera-flecha_on.png);
}*/

div#cabecera a.enlace_provisional strong{
	line-height: 0.8em;
	font-style: normal;
	font-weight: normal;
	text-transform: uppercase;
	color: #ffffff;
	background-position: 5cm 5cm;
}

div#cabecera a.enlace_provisional em{
	font-style: normal;
	font-weight: normal;
	color: #5b82b6;
}

div#cabecera a.enlace_provisional:hover em{
	color: #ffffff;
}

div#cabecera div#formularios input {
	border: none;
	font-size: 90%;
	background-color: #b9cbe1;
	color: #17529c;
}

div#cabecera div#formularios label span{
	font-size: 90%;
}

/* formulario de búsqueda */
div#cabecera div#formularios label#buscar{
	background-color: #b9cbe1;
	text-transform: uppercase;
}

div#cabecera div#formularios label#enviar_buscar{
	line-height: 64px;
}

div#cabecera div#formularios input#submit_buscar {
	background-color: transparent;
}

div#cabecera div#formularios input#submit_buscar {
	background-color: transparent;
	background-image: url(../img/general/cabecera-flecha_buscar_off.png);
}

div#cabecera div#formularios input#submit_buscar:hover {
	background-image: url(../img/general/cabecera-flecha_buscar_on.png);
}


/* imágenes de fondo para el span#obituario */
div#cabecera.obituario_lazo_negro span#obituario {
	background-image: url(../img/index/cabecera-lazo_negro.png);
}

/* enlaces a la web de la UGR y al stack */
div#cabecera a#enlace_ugr,
div#cabecera a#enlace_stack{
	text-indent: -9999em;
}

/* selector de idioma */
div#cabecera div#language_selector a{
	background-image: url(../img/languages/header-lang_off.png);
	background-position: center left;
	color: #7497c4;
}

div#cabecera div#language_selector a:hover {
	background-image: url(../img/languages/header-lang_on.png);
	color: #dd3b15;
}

/**********/
/* rastro */
/**********/
div#rastro{
	line-height: 24px;
	background-color: #ffffff;
	text-align: left;
	border-color: #8ba8cd;
}

div#rastro a {
	line-height: 23px;
	color: #404040;
	background-image: url(../../../images/general/rastro-enlace.png);
	background-position: 0% 60%;
}

div#rastro a:hover {
	color: #dd3b15;
	text-decoration: underline;
}

/*************/
/* contenido */
/*************/
div#contenido{
	color: #4d4d4d;
}

/*******/
/* Pie */
/*******/
div#pie {
	border-color: #8ba8cd;
	background-image: url(../../../images/interior/pie2.jpg);
	background-position: top;
}

div#pie a{
	color: #96b1d2;
	background-image: url(../img/general/pie-enlace_flecha_off.png);
	background-position: 0 4px;
}

div#pie a:hover{
	color: #dd3b15;
	background-image: url(../img/general/pie-enlace_flecha_on.png);
}

div#pie p{
	color: #96b1d2;
}
div#pie p a{
	color: #96b1d2;
	background-image: none;
}

div#pie p a:hover{
	color: #96b1d2;
	text-decoration: underline;
	background-image: none;
}

/***********************/
/* Formulario de login */
/***********************/
div#login_form{
	background-image: url(../../../images/menu-separador_otros.png);
	background-position: top left;
	border-color: #4574b0;
	color: #404040;
	background-color: #a2bad7;
}

div#login_form label,
div#login_form span.info{
	background-position: 0 4px;
}

div#login_form span.info,
div#login_form label#login,
div#login_form label#password{
	background-image: url(../img/general/menu-otros_off.png);
}
div#login_form label#login input,
div#login_form label#password input{
	font-size: 10px;
}

div#login_form span.info strong.lastaccess{
	white-space: nowrap;
}

/******************************/
/* Acciones de administración */
/******************************/
div#admin_actions{
	background-image: url(../../../images/menu-separador_otros.png);
	background-position: bottom left;
	color: #404040;
	background-color: #a2bad7;
}

a.popup-link
{
	background-image: url(../img/common/help_off.png);
}

a.popup-link:hover
{
	background-image: url(../img/common/help_on.png);
}

/* ---------------------------------------------------- */
/* Layout para página de inicio (todos los navegadores) */
/* ---------------------------------------------------- */

/***************************************************************************
   En los archivos de layouts sólo especificar atributos correspondientes
   al modelo de cajas CSS2 / CSS3
****************************************************************************/

/**********************************/
/* Contenido general de la página */
/**********************************/
/* capa general, dentro de la que van los menús y el div#pagina con el contenido específico de la página */
div.sec_index div#general{
    position: relative;
    overflow: hidden;
    border-width: 0 0 1px 0;
    margin-bottom: 10px;
}

/* capa que envuelve todos los menús */
div.sec_index div#general div#menus{
    float: left;
    width: 189px;
}

/*******************************/
/* Menú con enlaces frecuentes */
/*******************************/
div.sec_index div#general div#frecuentes{
    margin-top: -1px;
    margin-bottom: -1px;
    padding-top: 30px;
}

/**********************/
/* Tablón de noticias */
/**********************/
div.sec_index div#general div#tablon{
    float: left;
    width: 359px; /* ancho total: 382 px */
    margin-left: 23px;
}

div.sec_index div#general div#tablon div.cabecera_tablon{
    position: relative;
    height: 42px;
}

div.sec_index div#general div#tablon div.cabecera_tablon h1{
    position: absolute;
    top: 3px;
    left: 68px;
}

div.sec_index div#general div#tablon div.cabecera_tablon a.todas{
    position: absolute;
    padding-right: 16px;
    top: 5px;
    right: 5px;
}

div.sec_index div#general div#tablon div.cabecera_tablon a.rss{
    position: absolute;
    width: 89px;        /* anchura total: 92px */
    padding-left: 3px;
    height: 14px;
    top: 28px;
    left: 266px;
}

/********************************/
/* Contenido textual ("content")*/
/********************************/
div.sec_index div#general div.mod-index_content {
	display: block;
	float: left;
	width: 359px;
	margin-left: 22px;
	margin-right: 0;
	padding-bottom: 14px;
}

div.sec_index div#general div.mod-index_content h1.titulo_principal{
    position: relative;
    height: 40px;
	padding-top: 3px;
    padding-left: 68px;
}

div.sec_index div#general div.mod-index_content div.contenido {
	padding-left: 44px;
	padding-right: 20px;
	padding-top: 22px;
}

/* párrafos */
div.sec_index div#general div.mod-index_content div.contenido p{
	margin-bottom: 1em;
}

/* listas no ordenadas */
div.sec_index div#general div.mod-index_content div.contenido ul{
    margin-bottom: 1.2em;
    margin-top: 6px;
}

div.sec_index div#general div.mod-index_content div.contenido ul ul{
    margin-left: 20px;
}

div.sec_index div#general div.mod-index_content div.contenido ul li{
    padding-left: 10px;
    margin-bottom: 6px;
}

/* imágenes */
div.sec_index div#general div.mod-index_content div.contenido a.media{
	display: block;
}

div.sec_index div#general div.mod-index_content div.contenido a.media img.mediacenter{
	display: block;
	margin-left: auto;
	margin-right: auto;
}


/* edición del contenido */
div.sec_index div#general div.mod-index_content form#form_edit{
	position: relative;
	left: -125px;
	top: -8px;
}

div.sec_index div#general div.mod-index_content form#form_edit fieldset{
	border-width: 3px;
	z-index: 2;
}

div.sec_index div#general div.mod-index_content div#preview{
	display: none;
	margin-bottom: 22px;
}

/***********/
/* Banners */
/***********/
div.sec_index div#general div#banners{
    float: left;
    width: 189px;
}

/**************/
/* Calendario */
/**************/
div.sec_index div#general div#calendar{
    float: left;
    width: 171px;
	padding-left: 9px;
	padding-right: 9px;
	margin-top: 11px;
	margin-bottom: 40px;
}

div.sec_index div#general div#calendar span.decoracion{
	position: absolute;
	width: 189px;
	height: 25px;
	bottom: 0;
	right: 0;
}

/*********************************/
/* contenedor calendario+banners */
/*********************************/
div.sec_index div#general div.container-calendar_banners{
    float: left;
    width: 189px;
	margin-bottom: 40px;
}

div.sec_index div#general div.container-calendar_banners div#calendar{
	margin-bottom: 10px;
}

/**************************************/
/* contenedor menu+calendario+banners */
/**************************************/
div.sec_index div#general div.container-menu_calendar_banners{
    float: left;
    width: 189px;
	margin-bottom: 40px;
}

div.sec_index div#general div.container-menu_calendar_banners div#extramenu{
	margin-bottom: 10px;
}

div.sec_index div#general div.container-menu_calendar_banners div#calendar{
	margin-bottom: 10px;
}

/*********************************/
/* contenedor custom+banners     */
/*********************************/
div.sec_index div#general div.container-custom_banners{
    float: left;
    width: 189px;
	margin-bottom: 40px;
}

/*********************************/
/* contenedor content+noticias   */
/*********************************/
div.sec_index div#general div.container-content_noticias{
	display: block;
	float: left;
	width: 359px;
	margin-right: 22px;
}

div.sec_index div#general div.container-content_noticias div.mod-tablon{
	margin-top: 14px;
}


/* -------------------------------------------------------------- */
/* Sabor "estándar" para página de inicio (todos los navegadores) */
/* -------------------------------------------------------------- */

/*********************************************************************
En los archivos "*-sb_*" Sólo especificar sabores, es decir, estilos
que sólo afecten a colores, fondos, tipografías, etc.
*********************************************************************/


/**********************************/
/* Contenido general de la página */
/**********************************/
/* capa general, dentro de la que van los menús y el div#pagina con el contenido específico de la página */
div.sec_index div#general{
	border-color: #8ba8cd;
	background-image: url(../../../images/general-fondo.png);
	background-repeat: repeat-y;
	background-position: left;
}

/* capa que envuelve todos los menús */
div.sec_index div#general div#menus{
width: 189px;
}

/*******************************/
/* Menú con enlaces frecuentes */
/*******************************/
div.sec_index div#general div#frecuentes{
	background-image: url(../../../images/menu-separador_otros.png);
	background-position: top left;
}


/**********************/
/* Tablón de noticias */
/**********************/
div.sec_index div#general div#tablon div.cabecera_tablon{
    background-image: url(../img/index/noticias-cabecera.png);
}

div.sec_index div#general div#tablon div.cabecera_tablon h1{
    font-size: 17px;
    color: #ffffff;
}

div.sec_index div#general div#tablon div.cabecera_tablon a.todas{
    line-height: 18px;
    background-image: url(../img/index/noticias-enlace_todas_off.png);
    background-position: 100% 70%;
    color: #5a80b4;
}

div.sec_index div#general div#tablon div.cabecera_tablon a.todas:hover{
    background-image: url(../img/index/noticias-enlace_todas_on.png);
    color: #ffffff;
}

div.sec_index div#general div#tablon div.cabecera_tablon a.rss{
    color: #688cc0;
    font-size: 10px;
}

div.sec_index div#general div#tablon div.cabecera_tablon a.rss:hover{
    background-color: #ffffff;
    color: #dd3b15;
}

/********************************/
/* Contenido textual ("content")*/
/********************************/
div.sec_index div#general div.mod-index_content h1.titulo_principal{
	background-image: url(../../../images/content-cabecera.png);
	font-size: 17px;
	color: #ffffff;
}

div.sec_index div#general div.mod-index_content div.contenido {
	background-image: url(../img/index/content-contenido.png);
	background-position: 25px 21px;
	color: #404040;
	text-align: justify;
}

/* listas no ordenadas */
div.sec_index div#general div.mod-index_content div.contenido ul{
	list-style-type: none;
	list-style-position: outside;
}

div.sec_index div#general div.mod-index_content div.contenido ul li{
	color: #404040;
	background-image: url(../../../images/lista-nivel1.png);
	background-position: left 4px;
	background-repeat: no-repeat;
	text-align: justify;
}

/* edición del contenido */
div.sec_index div#general div.mod-index_content form#form_edit fieldset{
	border-color: #8ba8cd;
}

/**************/
/* Calendario */
/**************/
div.sec_index div#general div#calendar span.decoracion{
	background-image: url(../img/calendar/inicio-bloque_fondo_inferior.png);
	background-position: bottom left;
}


/* ----------------------------------------------------------- */
/* Módulo CSS para enlaces a secciones (todos los navegadores) */
/* ----------------------------------------------------------- */

/***************************************************************************
   En los archivos de layouts sólo especificar atributos correspondientes
   al modelo de cajas CSS2 / CSS3
****************************************************************************/

/* Para aplicar este módulo a un archivo XHTML, usar el siguiente subárbol DOM:

    <div class="mod-menu_secciones">
        <ul>
            <li class="tipo1"><a href="URI">Nombre 1</a></li>
            ....
            <li class="tipo1"><a href="URI">Nombre n</a></li>

            <li class="tipo2"><a href="URI">Nombre n+1</a></li>
            ....
            <li class="tipo2"><a href="URI">Nombre m</a></li>
        </ul>
    </div>


 * El <div> debe tener asignada la clase "mod-menu_secciones"
 * Los <li> deben tener asignada alguna de las siguientes clases para elegir 
   el color de fondo y del texto adicional:
    - tipo0 (item de menú de 1º nivel seleccionado)
    - tipo1 (item de menú de 1º nivel normal)
    - tipo2 (item de submenu)
    - adicional0 (item de menú adicional)
    - ...
    - adicionalN (item de menú adicional)
 
 * En este módulo _NO_ se define ni el alto ni el ancho total del div. Hay que 
   definir esos valores en el archivo CSS específico de la página que va a usar
   este módulo.

*/


/**********/
/* Layout */
/**********/
div.mod-menu_secciones ul li a{
    display: block;
    min-height: 19px; /* altura mínima 34px: 33px + 1px borde */
    width: 148px; /* total 189 px de anchura */
    padding: 7px 10px 7px 31px;
    border-width: 0 0 1px 0;
}

/* enlace para opciones de administración */
div.mod-menu_secciones a.admin_edit{
	display: block;
	margin-left: 14px;
	margin-top: 3px;
	margin-bottom: 3px;
}

/* ----------------------------------------------------------- */
/* Módulo CSS para enlaces a secciones (todos los navegadores) */
/* ----------------------------------------------------------- */

/*
En los archivos "*-sb_*" Sólo especificar sabores, es decir, estilos
que sólo afecten a colores, fondos, tipografías, etc.
*/

/* Para aplicar este módulo a un archivo XHTML, usar el siguiente subárbol DOM:

    <div class="mod-menu_secciones">
        <ul>
            <li class="tipo1"><a href="URI">Nombre 1</a></li>
            ....
            <li class="tipo1"><a href="URI">Nombre n</a></li>

            <li class="tipo2"><a href="URI">Nombre n+1</a></li>
            ....
            <li class="tipo2"><a href="URI">Nombre m</a></li>
        </ul>
    </div>


 * El <div> debe tener asignada la clase "mod-menu_secciones"
 * Los <li> deben tener asignada alguna de las siguientes clases para elegir 
   el color de fondo y del texto adicional:
    - tipo0 (item de menú de 1º nivel seleccionado)
    - tipo1 (item de menú de 1º nivel normal)
    - tipo2 (item de submenu)
    - adicional0 (item de menú adicional)
    - ...
    - adicionalN (item de menú adicional)
 
 * En este módulo _NO_ se define ni el alto ni el ancho total del div. Hay que 
   definir esos valores en el archivo CSS específico de la página que va a usar
   este módulo.

*/

div.mod-menu_secciones ul li a{
	font-family: Verdana, sans-serif;
	background-position: 12px 10px;
	background-color: #aec3dc;
}

div.mod-menu_secciones ul li.tipo1 a,
div.mod-menu_secciones ul ul li.tipo1 a{
    border-color: #8ba8cd;
    color: #737373;
    background-color: #ffffff;
    background-image: url(../img/general/menu-subitem_off.png);
}

div.mod-menu_secciones ul li.tipo1 a:hover,
div.mod-menu_secciones ul ul li.tipo1 a:hover{
    color: #737373;
    border-color: #8ba8cd;
    background-image: url(../img/general/menu-subitem_on.png);
    background-color: #ebebeb;
}

div.mod-menu_secciones ul li.tipo2 a,
div.mod-menu_secciones ul ul li.tipo2 a{
    color: #17529c;
    background-color: #d1dceb;
    background-image: url(../img/general/menu-item_off.png);
	border-right-width: thin;
	border-left-width: thin;
	 border-color: #7497c3;
}

div.mod-menu_secciones ul li.tipo2 a:hover,
div.mod-menu_secciones ul ul li.tipo2 a:hover{
	color: #17529c;
	background-color: #aec3dc;
	background-image: url(../../../images/general/menu-item_on.png);
	border-right-width: thin;
	border-left-width: thin;
	 border-color: #7497c3;
	
}

div.mod-menu_secciones ul li.selected a,
div.mod-menu_secciones ul li.selected a:hover{
	border-color: #7a4658;
	color: #ffffff;
	background-color: #17529c;
	background-image: url(../img/general/menu-item_actual_off.png);
	border-right-width: thin;
	border-left-width: thin;
	 border-color: #7497c3;
}

div.mod-menu_secciones ul li.adicional1 a{
    border-color: #4574b0;
    color: #404040;
    background-color: #a2bad7;
    background-image: url(../img/general/menu-otros_off.png);
}

div.mod-menu_secciones ul li.adicional1 a:hover{
	color: #ffffff;
	background-color: #7497c3;
	background-image: url(../img/general/menu-otros_on.png);
	border-right-width: thin;
	border-color: #7497c3;
}


/* ------------------------------------------------------ */
/* Layout para tablón de noticias (todos los navegadores) */
/* ------------------------------------------------------ */

/***************************************************************************
   En los archivos de layouts sólo especificar atributos correspondientes
   al modelo de cajas CSS2 / CSS3
****************************************************************************/

/* Para aplicar este módulo a un archivo XHTML, usar el siguiente subárbol DOM:

    <div class="mod-tablon">
        ...
        ...

        <ul>
            <li class="tipoX modeloYYcolorZZ"><a href="URI">Texto de la noticia</a></li>
            ....
            <li class="tipoX modeloYYcolorZZ"><a href="URI">Texto de la noticia</a></li>
        </ul>
    </div>


 * El <div> debe tener asignada la clase "mod-tablon"
 * Los <li> deben tener asignada alguna de las siguientes clases
    - tipo1 para noticia con imagen
    - tipo2 para noticia sin imagen
    - Si el li es de "tipo1", además deberá llevar una clase modeloYYcolorZZ
      dónde tanto YY como ZZ serán números en el rango 01 ... nn
*/


div.mod-tablon ul.tablon{
    display: block;
    border-width: 0 1px 0 0;
}

div.mod-tablon ul.tablon li {
    display:block;
}

div.mod-tablon ul.tablon li a{
    display:block;
    padding-right: 10px;
    border-width: 1px 0 0 0;
}

div.mod-tablon ul.tablon li a span.fecha{
    display: block;
    margin-bottom: 0.2em;   
}

div.mod-tablon ul.tablon li.tipo1 a{
    height: 72px; /* total altura 91px */
    padding-top: 11px;
    padding-bottom: 6px;
    padding-left: 93px;
}

div.mod-tablon ul.tablon li.tipo1 a{

}

div.mod-tablon ul.tablon li.tipo2 a{
    min-height: 42px; /* total altura 57px */
    padding-top: 9px;
    padding-bottom: 14px;
    padding-left: 10px;
}

div.mod-tablon ul.tablon li span.contenido{
    padding-right: 16px;
}

div.mod-tablon ul.tablon li span.contenido span.fin {
    display: none;
}

/* enlaces para opciones de administración en la página principal */
div.mod-tablon ul.tablon li a.admin_edit {
	display: inline;
	height: auto;
	padding: 0;
	border-top-width: 0;
	margin-right: 10px;
}


/* ---------------------------------------------------------------- */
/* Sabor "estándar" para tablón de noticias (todos los navegadores) */
/* ---------------------------------------------------------------- */

/***************************************************************************
   En los archivos de layouts sólo especificar atributos correspondientes
   al modelo de cajas CSS2 / CSS3
****************************************************************************/

/* Para aplicar este módulo a un archivo XHTML, usar el siguiente subárbol DOM:

    <div class="mod-tablon">
        ...
        ...

        <ul>
            <li class="tipoX modeloYYcolorZZ"><a href="URI">Texto de la noticia</a></li>
            ....
            <li class="tipoX modeloYYcolorZZ"><a href="URI">Texto de la noticia</a></li>
        </ul>
    </div>


 * El <div> debe tener asignada la clase "mod-tablon"
 * Los <li> deben tener asignada alguna de las siguientes clases
    - tipo1 para noticia con imagen
    - tipo2 para noticia sin imagen
    - Si el li es de "tipo1", además deberá llevar una clase modeloYYcolorZZ
      dónde tanto YY como ZZ serán números en el rango 01 ... nn
*/


div.mod-tablon ul.tablon{
    border-color: #688cc0;
}

div.mod-tablon ul.tablon li a{
    border-color: #688cc0;
    color: #404040;
}

div.mod-tablon ul.tablon li a:hover{
    color: #404040;
    background-color: #e7edf5;
}

div.mod-tablon ul.tablon li a span.fecha{
    color: #5a80b4;
}

div.mod-tablon ul.tablon li.tipo1{
    background-image: url(../img/tablon/noticia-marco.gif);
    background-position: 9px 9px;
}

div.mod-tablon ul.tablon li.tipo1 a{
    background-position: 10px 9px;
}

div.mod-tablon ul.tablon li.modelo01color01 a{
    background-image: url(../img/tablon/modelo01color01.jpg);
}

div.mod-tablon ul.tablon li.modelo02color01 a{
    background-image: url(../img/tablon/modelo02color01.jpg);
}

div.mod-tablon ul.tablon li.modelo03color01 a{
    background-image: url(../img/tablon/modelo03color01.jpg);
}

div.mod-tablon ul.tablon li.modelo04color01 a{
    background-image: url(../img/tablon/modelo04color01.jpg);
}

div.mod-tablon ul.tablon li.modelo05color01 a{
    background-image: url(../img/tablon/modelo05color01.jpg);
}

div.mod-tablon ul.tablon li.modelo06color01 a{
    background-image: url(../img/tablon/modelo06color01.jpg);
}

div.mod-tablon ul.tablon li.modelo07color01 a{
    background-image: url(../img/tablon/modelo07color01.jpg);
}

div.mod-tablon ul.tablon li.modelo08color01 a{
    background-image: url(../img/tablon/modelo08color01.jpg);
}

div.mod-tablon ul.tablon li.modelo09color01 a{
    background-image: url(../img/tablon/modelo09color01.jpg);
}

div.mod-tablon ul.tablon li.modelo10color01 a{
    background-image: url(../img/tablon/modelo10color01.jpg);
}

div.mod-tablon ul.tablon li.modelo11color01 a{
    background-image: url(../img/tablon/modelo11color01.jpg);
}

div.mod-tablon ul.tablon li.modelo12color01 a{
    background-image: url(../img/tablon/modelo12color01.jpg);
}

div.mod-tablon ul.tablon li.modelo13color01 a{
    background-image: url(../img/tablon/modelo13color01.jpg);
}

div.mod-tablon ul.tablon li.tipo2 a{
    background-image: none;
}

div.mod-tablon ul.tablon li span.contenido{
    background-image: url(../img/tablon/noticia-fin_texto.png);
    background-position: bottom right;
}

/* enlaces para opciones de administración en la página principal */
div.mod-tablon ul.tablon li a.admin_edit {
	background-image: none;
	color: #17529c;
}

div.mod-tablon ul.tablon li a.admin_edit:hover {
	color: #dd3b15;
    background-color: #d1dceb;
}


/* ------------------------------------------- */
/* Layout para banners (todos los navegadores) */
/* ------------------------------------------- */

/***************************************************************************
   En los archivos de layouts sólo especificar atributos correspondientes
   al modelo de cajas CSS2 / CSS3
****************************************************************************/

/* Para aplicar este módulo a un archivo XHTML, usar el siguiente subárbol DOM:

    <div class="mod-banners">
        ...
        ...

        <ul>
            <li class="modeloXX">
                <a href="URI">
                    <strong> Título principal </strong>
                    <em>     Subtítulo        </em>
                    <span>   Texto adicional  </span>
                </a>
            </li>
            ....
            <li class="modeloXX"><a href="URI">Texto del banner</a></li>
        </ul>
    </div>


 * El <div> debe tener asignada la clase "mod-banner"
 * Los <li> deben tener asignada alguna de las siguientes clases
    - 'modeloXX' dónde XX será un número en el rango 01 ... nn y representará
      el tipo de banner que se desea mostrar
*/

div.mod-banners ul{
    display: block;
    padding-top: 10px;
    padding-left: 9px;
    padding-right: 10px;
}

div.mod-banners ul li{
    display: block;
	width: 170px;
	height: 72px;
    margin-bottom: 10px;
}

div.mod-banners ul a.banner{
    display:block;
    overflow: hidden;
    height: 72px;
	padding-right: 14px;
}

div.mod-banners ul a.banner strong{
    display: block;
    margin-top: 22px;
}

div.mod-banners ul a.banner strong,
div.mod-banners ul a.banner em,
div.mod-banners ul a.banner span{
    display: block;
    margin-left: 8px;
}

/** banners "resaltados" tienen distinto layout a los comunes **/
div.mod-banners ul li.model-resaltado-01 a.banner strong,
div.mod-banners ul li.model-resaltado-02 a.banner strong,
div.mod-banners ul li.model-resaltado-01 a.banner em,
div.mod-banners ul li.model-resaltado-02 a.banner em,
div.mod-banners ul li.model-resaltado-01 a.banner span,
div.mod-banners ul li.model-resaltado-02 a.banner span{
	padding-left: 11px;
}

div.mod-banners ul li.model-resaltado-01 a.banner strong,
div.mod-banners ul li.model-resaltado-02 a.banner strong{
    display: block;
    margin-top: 15px;
}

/* enlace para opciones de administración */
div.mod-banners a.admin_edit{
	display: block;
	margin-left: 9px;
	margin-top: 3px;
}

/* --------------------------------------------------- */
/* sabor estándar para banners (todos los navegadores) */
/* --------------------------------------------------- */

/*********************************************************************
En los archivos "*-sb_*" Sólo especificar sabores, es decir, estilos
que sólo afecten a colores, fondos, tipografías, etc.
*********************************************************************/

/* Para aplicar este módulo a un archivo XHTML, usar el siguiente subárbol DOM:

    <div class="mod-banners">
        ...
        ...

        <ul>
            <li class="modeloXX">
                <a href="URI">
                    <strong> Título principal </strong>
                    <em>     Subtítulo        </em>
                    <span>   Texto adicional  </span>
                </a>
            </li>
            ....
            <li class="modeloXX"><a href="URI">Texto del banner</a></li>
        </ul>
    </div>


 * El <div> debe tener asignada la clase "mod-banner"
 * Los <li> deben tener asignada alguna de las siguientes clases
    - 'modeloXX' dónde XX será un número en el rango 01 ... nn y representará
      el tipo de banner que se desea mostrar
*/

div.mod-banners ul li{
	line-height: 120%;
	background-image: url(../../../images/sost.jpg)!important;
}

div.mod-banners ul li strong,
div.mod-banners ul li em {
    font-weight: normal;
    font-style: normal;
}

div.mod-banners ul li a.banner{
    /* Ahora la imagen la pone el CMS 
	background-image: url(../img/banners/banner-01_off.png);
	*/
}

div.mod-banners ul li a.banner strong {
    color: #dd3b15;
}

div.mod-banners ul li a.banner em {
    color: #17529c;
}

div.mod-banners ul li a.banner span {
    color: #93adcf;
}

/*div.mod-banners ul li a.banner:hover{
	/* Ahora la imagen la pone el CMS 
    background-image: url(../img/banners/banner-01_on.png);
	*/
	/*text-decoration: none !important;*/
	/*background-image: url(../../../images/banner-01_off.png);*/
/*}*/

/** banners "resaltados" **/
div.mod-banners ul li.model-resaltado-01 a.banner strong{
    color: #ffffff;
}
div.mod-banners ul li.model-resaltado-01 a.banner:hover strong{
    color: #ffffff;
}
div.mod-banners ul li.model-resaltado-01 a.banner em{
    color: #ee9d8a;
}
div.mod-banners ul li.model-resaltado-01 a.banner:hover em{
    color: #ffffff;
}
div.mod-banners ul li.model-resaltado-01 a.banner span{
    color: #ee9d8a;
}
div.mod-banners ul li.model-resaltado-01 a.banner:hover span{
    color: #ffffff;
}

div.mod-banners ul li.model-resaltado-02 a.banner strong{
    color: #ffffff;
}
div.mod-banners ul li.model-resaltado-02 a.banner:hover strong{
    color: #ffffff;
}
div.mod-banners ul li.model-resaltado-02 a.banner em{
    color: #7497c4;
}
div.mod-banners ul li.model-resaltado-02 a.banner:hover em{
    color: #ffffff;
}
div.mod-banners ul li.model-resaltado-02 a.banner span{
    color: #7497c4;
}
div.mod-banners ul li.model-resaltado-02 a.banner:hover span{
    color: #ffffff;
}



/* ----------------------------------------------- */
/* Layout para formularios (todos los navegadores) */
/* ----------------------------------------------- */

/***************************************************************************
   En los archivos de layouts sólo especificar atributos correspondientes
   al modelo de cajas CSS2 / CSS3
****************************************************************************/

/* Para aplicar este módulo a un archivo XHTML, usar el siguiente subárbol DOM:

<div class="mod-forms">
	<div class="forms_big">  (opcional)
		<form .....>
		<fieldset>
			
			<label>
				<span class="etiqueta"> Texto </span>
				<input ... />
			</label>

		</fieldset>
		</form>
	</div>
</div>

Si se incluye el div.mod-forms_big, se utiliza un layout en el que
cada etiqueta y campo utilizan división horizontal completa
*/

div.mod-forms fieldset{
	position: relative;
	width: 434px;
	border-top-width: 5px;
	border-bottom-width: 4px; /* 5px en total con el borde del último elemento */
}

/* contenedores para campos simples */
div.mod-forms fieldset label,
div.mod-forms fieldset span.label,
div.mod-forms fieldset div.label{
	display: block;
	overflow: hidden;
	padding-top: 6px;
	padding-bottom: 6px;
	border-bottom-width: 1px;

	padding-left: 10px;
	padding-right: 10px;
}

div.mod-forms fieldset span.label label,
div.mod-forms fieldset div.label label{
	margin-left: 100px;
	border-bottom-width: 0;
	padding-top:0;
	padding-bottom:0;
	margin-bottom: 5px;
}

/* contenedor para campos múltimples (radio, radioimage, mixtos, etc.) */
div.mod-forms fieldset span.label span.container,
div.mod-forms fieldset div.label span.container {
	display:block;
	float: left;
	width: 298px;
}

div.mod-forms fieldset span.label span.container label,
div.mod-forms fieldset div.label span.container label{
	margin-left: 0;
	padding-left: 0;
}

div.mod-forms fieldset label span.etiqueta,
div.mod-forms fieldset span.label span.etiqueta,
div.mod-forms fieldset div.label span.etiqueta{
	display: block;
	float: left;
	width: 84px;
	margin-right: 16px;
}

div.mod-forms fieldset label span.mensaje,
div.mod-forms fieldset span.label span.mensaje,
div.mod-forms fieldset div.label span.mensaje{
	display: block;
	margin-left: 100px;
}

div.mod-forms fieldset input.error,
div.mod-forms fieldset textarea.error,
div.mod-forms fieldset select.error{
	border-width: 1px;
}

div.mod-forms fieldset input,
div.mod-forms fieldset textarea{
	display: block;
	padding-left: 3px;
}

div.mod-forms fieldset textarea,
div.mod-forms fieldset input.text,
div.mod-forms fieldset input.file{
	width: 295px; /* total 314 px */
	margin-left: 100px;
}

/* campos "radio" */
div.mod-forms fieldset span.label label.radio{
	margin-left: 100px;
}

div.mod-forms fieldset span.label label.radio_first{
	margin-left: 0;
}

div.mod-forms fieldset input.radio{
	display: inline;
	margin-right: 3px;
	vertical-align: middle;
}

/* campos "checkbox" */
div.mod-forms fieldset input.checkbox{
	display: inline;
	margin-right: 3px;
	margin-bottom: 3px;
	vertical-align: middle;
}

/* campos "hidden" */
div.mod-forms fieldset input.hidden{
	display: none;
}

/* campo especial "radioimage" */
div.mod-forms fieldset label.radioimage{
	float: left;
	padding-left:0;
}

div.mod-forms fieldset span.radioimages label.radioimage_first{
	margin-left: 0;
	padding-top: 4px;
}

div.mod-forms fieldset label.radioimage img{
	margin-right: 3px;
	vertical-align:middle;
}

div.mod-forms fieldset input.radioimage{
	display: inline;
	margin-right: 3px;
	vertical-align: middle;
}

/* campo especial file */
div.mod-forms fieldset span.file_infobox {
	display: block;
	margin-left: 100px;
}

div.mod-forms fieldset span.file_infobox em{
	display: block;
	margin-left: 10px;
}

div.mod-forms fieldset  span.file_infobox input.file_remove {
	display: block;
	margin-left: 10px;
}

div.mod-forms fieldset span.mensaje_reemplazar {
	margin-top: 10px;
}

/* errores */
div.mod-forms fieldset span.error{
	display: block;
	margin-left:100px;
}

/* botones */
div.mod-forms fieldset input.submit_img{
	display: block;
	float: right;
	width: 85px;
	height: 25px;
	padding: 0;
}

div.mod-forms fieldset input.cancel_img{
	display: block;
	float: left;
	width: 77px;
	height: 25px;
	padding: 0;
}

div.mod-forms fieldset .uploadprogress{
	display: block;
	width: 150px;
	height: 15px;
	padding: 0;
	margin:auto;
	border:1px solid;
	text-align:right;
}

div.mod-forms fieldset #info_upload{
	width: 0%;
	height: 15px;
	padding: 0;
}


/*************************************************************/
/* diseño alternativo para tener más espacio para los campos */
/* (DOM: div.mod-forms > div.forms_big)                      */
/*************************************************************/
div.mod-forms div.forms_big fieldset {
	width: 493px;
}

div.mod-forms div.forms_big fieldset span.label span.container,
div.mod-forms div.forms_big fieldset div.label span.container {
	display:block;
	float: left;
	width: auto;
}

div.mod-forms div.forms_big fieldset span.etiqueta{
	display: block;
	float: none;
	width: 100%;
	margin-right: 0;
	margin-bottom: 3px;
}

div.mod-forms div.forms_big fieldset textarea,
div.mod-forms div.forms_big fieldset input.text,
div.mod-forms div.forms_big fieldset input.textarea{
	width: 450px;
	margin-left:0;
}

div.mod-forms div.forms_big fieldset span.error{
	display: block;
	margin-left: 0;
}

div.mod-forms div.forms_big fieldset label.select{
	margin-left:0;
	padding-left: 0;
}

div.mod-forms div.forms_big fieldset label.select select{
	max-width: 470px;
	
}


/* ----------------------------------------------- */
/* Layout para formularios (todos los navegadores) */
/* ----------------------------------------------- */

/*********************************************************************
En los archivos "*-sb_*" Sólo especificar sabores, es decir, estilos
que sólo afecten a colores, fondos, tipografías, etc.
*********************************************************************/

div.mod-forms fieldset{
	border-style: solid;
	border-color: #7497c4;
	background-color: #aec3dc;
}

div.mod-forms fieldset label,
div.mod-forms fieldset div.label,
div.mod-forms fieldset span.label{
	border-style: solid;
	border-color: #628abc;
}

div.mod-forms fieldset span.etiqueta{
	text-align: right;
	color: #404040
}

div.mod-forms fieldset span.error{
	color: #f01616
}

div.mod-forms fieldset input.error,
div.mod-forms fieldset textarea.error,
div.mod-forms fieldset select.error{
	border-style: dotted;
	border-color: #f01616;
}

div.mod-forms fieldset input,
div.mod-forms fieldset textarea{
	color: #404040;
	font-size: 11px;
}

div.mod-forms fieldset textarea{
	font-family: sans-serif;
	font-size: 11px;
}

div.mod-forms fieldset input.submit_img{
	background-image: url(../img/interior/formulario-enviar_off.png);
}

div.mod-forms fieldset input.submit_img:hover{
	background-image: url(../img/interior/formulario-enviar_on.png);
}

div.mod-forms fieldset input.cancel_img{
	background-image: url(../img/interior/formulario-cancelar_off.png);
}

div.mod-forms fieldset input.cancel_img:hover{
	background-image: url(../img/interior/formulario-cancelar_on.png);
}

div.mod-forms fieldset .uploadprogress{
	border-color:#628abc;
}

div.mod-forms fieldset #info_upload{
	background-color:#7497c4;
}

/*************************************************************/
/* diseño alternativo para tener más espacio para los campos */
/* (DOM: div.mod-forms > div.forms_big)                      */
/*************************************************************/
div.mod-forms div.forms_big fieldset span.etiqueta{
	text-align: left;
	font-size: 110%;
}

/**********************************/
/* editor de contenido Javascript */
/**********************************/
div.mod-forms form#form_edit input,
div.mod-forms form#form_edit textarea{
	font-size: 12px;
}

/**************************/
/* Mensajes de depuración */
/**************************/
.debug + br,
.debugF + br{
	display: none;
}

.debug,
.debugF{
	display: block;
	margin-left: 2px;
	padding: 2px;
	font-size: 85%;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-left-width: 3px;
	border-left-style: solid;
}

.debug{
	color: black;
	border-color: black;
}

.debugF{
	color: blue;
	border-color: blue;
}


div.mod-buttons input.image-button{
	width: 77px;
	height: 25px;
}



div.mod-buttons input.image-salir{
    background-image: url(../img/interior/formulario-salir_off.png);
}

div.mod-buttons input.image-salir:hover{
    background-image: url(../img/interior/formulario-salir_on.png);
}

div.mod-buttons input.image-enviar{
    background-image: url(../img/interior/formulario-enviar_off.png);
}

div.mod-buttons input.image-enviar:hover{
    background-image: url(../img/interior/formulario-enviar_on.png);
}

div.mod-buttons input.image-cancelar{
    background-image: url(../img/interior/formulario-cancelar_off.png);
}

div.mod-buttons input.image-cancelar:hover{
    background-image: url(../img/interior/formulario-cancelar_on.png);
}

div.mod-buttons input.image-admin_enable{
    background-image: url(../img/interior/formulario-admin_enable_off.png);
}

div.mod-buttons input.image-admin_enable:hover{
    background-image: url(../img/interior/formulario-admin_enable_on.png);
}

div.mod-buttons input.image-admin_disable{
    background-image: url(../img/interior/formulario-admin_disable_off.png);
}

div.mod-buttons input.image-admin_disable:hover{
    background-image: url(../img/interior/formulario-admin_disable_on.png);
}

div.mod-buttons input.image-directorio_enable{
    background-image: url(../img/interior/formulario-directorio_enable_off.png);
}

div.mod-buttons input.image-directorio_enable:hover{
    background-image: url(../img/interior/formulario-directorio_enable_on.png);
}

div.mod-buttons input.image-directorio_disable{
    background-image: url(../img/interior/formulario-directorio_disable_off.png);
}

div.mod-buttons input.image-directorio_disable:hover{
    background-image: url(../img/interior/formulario-directorio_disable_on.png);
}

div.mod-buttons input.image-admin_area{
    background-image: url(../img/interior/formulario-admin_area_off.png);
}

div.mod-buttons input.image-admin_area:hover{
    background-image: url(../img/interior/formulario-admin_area_on.png);
}