/* -----------------------------------------------------------------------------
Archivo .CSS para los elementos de carácter general de Web Arbol   
  
  
(c) idoga
--------------------------------------------------------------------------------
   
 
PROPIEDADES CSS DE LOS ELEMENTOS GENERALES DEL SITIO
----------------------------------------------------  
En este archivo se definirán las propiedades CSS de los elementos más generales 
de este proyecto.
  
Esta hoja de estilos pretende aplicar un DISEÑO ELÁSTICO:
  
Para ello, en primer lugar se asigna un valor por defecto en body al tamaño de 
la fuente (font-size) relacionándolo con el tamaño por defecto de fuente a la 
del navegador.  
  
Una vez realizado este paso, se utiliza la unidad de medida "em" (anchura de la 
letra "M") para definir las anchuras de todos los elementos lo que implica la 
adaptación automática de las proporciones al dispositivo utilizado. 
Si se define alguna altura, se utilizará preferiblemente la unidad "ex" (que utiliza
la altura de la "X").
  
NOTA IMPORTANTE (em vs rem): 
La unidad em es relativa al tamaño de la fuente del elemento en el que se está 
utilizando y no del elemento raiz, por lo que si hay alguna redefinición del tamaño 
de la fuente en algún contenedor anidado también variará el tamaño de la unidad em.
  
Las unidades "rem" en cambio referencian su tamaño al tamaño de la fuente del elmento 
raiz (el elemento html). Es por tanto una alternativa al uso de em que también permite 
un diseño flexible pero que en principio no se va a utilizar en este desarrollo.   
  
En ambos casos, el tamaño de la fuente depende del que cada usuario ajuste por defecto 
en su navegador y por tanto esto influirá en la forma en que lo visualizará cada 
usuario, pudiendo aparecer algún elemento "descolocado".
   
Las medidas que se han utilizado como referencia (ancho 'body' 64em) permiten 
utilizar un tamaño de letra en el navegador de 20px sin que sea necerario el scroll 
horizontal (pruebas realizadas con firefox).
  
                    ----------------0------------------           
 
                                                    
  
Otros archivos CSS de este sitio:
--------------------------------
Propiedades de las listas (ul/li), menu horizontal (pestañas superiores) y menús 
del área de navegación: Menus1.css
Propiedades de las tablas: Tablas.css
Versión para imprimir: versionimprimir.css
Portadas de Home: se han separado porque son muy específicas. (PortadaAGxxx.css)
Visor de fotos del pie: VfotosIDG.css (en carpeta diferente junto con el archivo js)
    
-------------------------------------------------------------------------------*/ 
/*==============================================================================

                           Elementos HTML generales

================================================================================*/ 

* {padding: 0; margin: 0;} /*Calibración: todos los márgenes(*) a cero*/   

h1 {
   font-size: 1.8em;
}

a { text-decoration: none;}                          /*Eliminar subrayado en todos los hipervínculos*/
a:link {color: #d90000;}                           /*Color de los link a páginas no visitadas*/
a:visited {color: #cc6666;}                        /*Color de los link a páginas visitadas*/
a:hover, a:focus {text-decoration: underline;}       /*ratón o teclado posicionados en el link*/
/* a:active {color: white; background-color: #d90000;} */   /*color en el momento del "click"*/ 

.textoCentrado {
   text-align: center;    /*Texto centrado*/
}

.textoIzquierda { 
   text-align: left;    /*Texto justificado a la izquierda*/
}

.textoCursiva {                                                 
   font-style: italic;
}



/*=======================================================================================

         Contenedores generales: posicionamiento y propiedades básicas

=======================================================================================*/         

body {

   /* 
      Nota: se usa la posición por defecto (static). Si e requiere que body sea una 
      referencia para posicionamientos de tipo absolute de elementos contenidos, se puede 
      usar "relative" para body, pero  tener en cuenta los efectos sobre otros elementos 
      como "header p" o las fotos visualizadas con Lightbox2.
   */

   position: static;   
  
   width: 64em; /*MAGNITUD MUY IMPORTANTE (valor de referencia: 64em)*/
   margin: auto; 
  
   font-size: 1em;   /*La que utiliza el elemento html (ajustable por el usuario en su navegador)*/
  
   color:  black;   /*Color de la fuente*/
   background-color: #8c8c8c;   /*Referencia #8c8c8c*/
  
   font-family: Verdana, Arial, Helvetica, sans-serif;
    
}


header {          /*Encabezado: logo (piedra Tres Obispos) y título general*/   
   
   height: 10ex;   /*Para las alturas preferimos la unidad ex frente a la em*/
  
   color: black;
   background-color: #0040FF;

   background-image: url(fondoMovistar.jpg);
   background-repeat: repeat-y;
   background-position: top left;
   
}

header img {        
   height: 10ex; /*Misma altura que header*/
}

header p {
   /* 
      Nota: Si body se pusiera con "position: relative", en vez de float, se puede usar esta 
      alternativa para "header p":
      position: absolute;
      top: 1.5em; 
      right: 1em;  
   */

   float: right;  
   
   margin-top: 3ex; 
   margin-right: 2ex; 
   
   font-size: 1.2em;     
   font-weight: bold;      
}

header p span{
   color: #d90000; /*Texto en rojo*/  
}

/*Contenedor nav: ver propiedades en archivo Menus1.css*/

section {  
   background-color:  #d9d9d9;
   margin: auto;  
}


#area_lateral {
   float: left;       /*No debe llevar margen a la derecha*/
   width: 14em;        /*diseño elástico. Referencia 14em*/  
   padding-left: 0.5em;  
   padding-top: 2em;
}

#area_texto {   
   float: right;    /*No debe llevar margen a la izquierda*/
   width: 45em;     /*Debe ser <= anchura body - ancura area_lateral*/
   padding: 1em 2em 1em 2.3em;   /*top, right, bottom, left. Referencia  1em 2em 1em 2em;*/
}

footer {
   /*clear: both => desplazamiento descendente hasta colocarse por debajo de los elementos float 
   (En nuestro caso del area texto y navegación)*/   
   clear: both;   
   background-color: white;
   padding: 1em;
   padding-top: 1em;
   border-top: 1px solid #A9122A;
   margin-top: 1em;   
}

address {
   text-align: center; 
   font-size: 0.8em;
   font-style: normal;
   letter-spacing: 0.2em; /*distancia entre letras*/
   line-height: 1.5em;    /*distancia entre líneas*/
}


/*=======================================================================================

      Propiedades dependientes de los contenedores generales o bloques div

=======================================================================================*/     

section p {
   font-size: 0.9em;   /*Referencia 0.9em*/
   text-align: justify;    /*Texto justificado en ambos márgenes*/
   margin-right: 1em;
   margin-left: 1em;
   margin-bottom: 1em;
}

section p.margen3em {   /*margen extra para referencias externas, poesías, etc.*/
	margin-left: 3em;
}

section p.margen10em {   /*margen extra para referencias externas, poesías, etc.*/
	margin-left: 10em;
}

section p.textoPequeno {                                              
   font-size: 0.6em;
}
        
#area_lateral p {
   font-size: 0.8em;
   font-weight: bold;
   text-align: left;    
   padding-left: 0.5em;   
   margin-bottom: 0.5em;
}

#notas_desc{     /*Diseñado para las notas en pie de las páginas con descendientes*/

   background: #fffff0;     /*Mismo color que el fondo de la tabla de descendientes*/
   border: 2px solid #996;  /*Mismo que el de la tabla*/
   font: normal 80%/140% verdana, arial, helvetica, sarns-serif;  /*Mismo que el de la tabla*/
   padding: 1em 1em 1em 1em;   
   text-align: justify;    
  
}

/*=======================================================================================

                         Formulario de contacto

=======================================================================================*/     

form {
   background-color: #eee;
   width: 35em;
   padding: 2em; 
   border: 1px solid #8c8c8c;
}

label {
   display: block;  /*título en una línea propia*/
   font-size: 0.8em;
}

#nombre, #email, textarea {   /*Mismo ancho y forma para los dos campos de entrada*/
   width: 70%;
   border: 1px solid #8c8c8c;
   margin-bottom: 1em;
}

textarea {height: 7em;}       

input:focus, textarea:focus { background-color: #d9d9d9;}

/*======================================================================================

                        Clases para imágenes                        

=======================================================================================*/     


img{     /*Dimensiones por defecto para todas las imágenes*/   
   width: auto;     /*Para evitar deformaciones*/                
   height: 9em;    
}

.imagenGrande { 
   /*Clase pensada para imágenes individuales del área de texto
   (Ver notas de imagenLinkGrande)*/

   display: block;   
         
   width: 90%;        
   height: auto;
      
   margin:auto;    /*Centrado de la imagen (ancho inferior al disponible)*/
   padding: 0;   
   border: 2px solid #996;  
}

.imagenLinkGrande {

   /*
   Imágenes cuyo uso principal es el hacer de link único para la activación 
   de las galerías de visualización de fotos en el interior del área de texto.
      
   NOTAS:             
   Esta clase no funciona si se declara dentro de la secuencia 
   <span class="TiraFotosCentrada"> ya que está más priorizada esta 
   última. Se puede hacer que funcione añadiendo "section img.xxx" 
   y escribiéndola dentro de este archivo .css después de la 
   clase "TiraFotosCentrada img". 

   Enlace recomendado donde se explican las prioridades de las clases:
   https://keepcoding.io/blog/aplicacion-de-multiples-estilos-en-css/
   
   Por otra parte tener en cuenta que la función HTMLfotos_lightGallery(),
   que usa esta clase cuando procede, cuando visualiza todas las 
   imágenes en vez de un única imagen de link, genera automáticamente 
   la sentencia <span class="TiraFotosCentrada">.

   Teniendo en cuenta lo anterior, para evitar comportamientos no 
   esperados por la evalución de las prioridades y el orden de su 
   escritura, lo mejor es asegurarse que cuando se usa esta clase, 
   no se está dentro de <span class="TiraFotosCentrada">, por eso
   se ha definido genéricamente sin añadir más (formato ".xxx"). 
   
   (Si se quiere hacer pruebas añadiendo el span mencionado, usar por 
   ejemplo el archivo R009_07_ReunionFamiliaLucas_2023.html ya que tiene
   links del área de texto con imágenes grandes.       
   */
           
   display: block;  /*Centrado de la imagen (las img son elementos de línea)*/  
           
   width: 60%; 
   height: auto;
   padding: 0;
   border: 0;
   border: 2px solid #996;
        
   margin:auto;    /*Centrado de la imagen (ancho inferior al disponible)*/   
}

.imagenLinkPequena {   
   width: auto;                      
   height: 6em;   
}
      
.imgizda {     
   float:left;   /*NOTA: float convierte la imagen en elemento de bloque*/
  
   padding: 0.3em; 
   border: 2px solid #ccc;
   margin: 0.8em 2em 0.8em 0em;  /*Arriba/derecha/abajo/izquierda*/
}

.imgdcha {    
   float:right;   
  
   padding: 0.3em;       
   border: 2px solid #ccc;
   margin: 0.8em 0em 0.8em 2em;  /*Arriba/derecha/abajo/izquierda*/
}

.precargaFotos{
   display: none;   /*Usarla en el elemento contenedor de la img: div, span, <a..>, etc.  */
}

span.TiraFotosCentrada {    /*Elemento contenedor para una tira de fotos horizontal centrada.*/      
   display: block;        /*span es un elemento inline*/
   text-align: center;    /*Las imágenes y los hipervínculos son inline*/    
  
   /*border: 1px solid red;*/ /*Borde para pruebas*/
}

span.TiraFotosCentrada img{     /*Propiedades de la imagen dentro de la tira de fotos centrada*/  
   display: inline-block;  
   
   width: auto;              
   height: 6em;
 
   background-color: white;  
   padding: 0.1em;  
   border: 2px solid #ccc;;
   margin: 0.5em 0em 0.5em 0em; /*arriba/derecha/abajo/izquierda*/  
}

#area_lateral img{ /*imágenes colocadas en el área de navegación*/   
   display: block;  
   margin: auto;    

   width: 85%;   

   height: auto;          
   padding: 1em 1em 1em 1em;
   border: 0;      
}

#area_lateral img.verticalNav {   
   /*
   NOTA: para usar esta clase en las llamadas a HTMLfotos() o a fotosRotantes(), 
   en las que se usa como parámetro el array de verticales, se asignará el valor "N" 
   a la posicion correspondiente de dicho array en la función javascript llamante
   */
   display: block;    /*Centrado de la imagen (las img son elementos inline)*/
   margin: auto;      /*Centrado de la imagen (ancho  inferior al disponible)*/

   width: 80%;  
   height: auto;
}

#EsquemaDesc, #EsquemaAsc { 
   /*Imágenes con esquemas de descendientes y ascendientes en arbol*/   
   display: block;   
   margin: auto;    
   padding: 0;       

   width: 44.5em;    /*Condicionada a la anchura de la section del area de texto*/
   height: auto;      
                     
   border: 2px solid #996;    
}

#mapaPan{
   display: block; 
      
   width: 90%;
   height: 18em;  

   margin:auto;   
}

img.verticalTexto {   
   /*
   Imágenes verticales en el área genérica de texto: para usar esta clase en 
   las llamadas a HTMLfotos() o a fotosRotantes(), en las que se usa como parámetro 
   el array de verticales, se asignará el valor "T" a la posicion correspondiente de 
   dicho array en la función javascript llamante.
   */    
   width: auto;
   height: 6em;
}

/*------------ Clases para imagenes de la tabla de descendientes ------------*/

#tablaDescen img{                 
   /*
   En este caso habría que garantizar la anchura y altura, pero se deformarían
   las imágenes. Se opta por especificar la anchura para evitar que las líneas 
   verticales de las tablas se desplacen. Para evitar el desplazamiento de las 
   líneas horizontales, si es necesario, se aumentará el espacio disponible en 
   altura a base de insertar "<br>" en la parte de detalles del codigo html.
   */               
   display: inline-block; 
   margin:auto;   
   
   width: 12em;    
   height: auto;
       
   padding: 1em 1em 1em 1em;  
   border: 0;
   text-decoration:none;    /*no funciona, buscar el equivalente para imágenes*/
  
}   

#tablaDescen img.verticalDesc{ 
   /*
   Imágenes verticales en las tablas de descendientes: para usar esta clase en 
   las llamadas a HTMLfotos() o a fotosRotantes(), en las que se usa como parámetro 
   el array de verticales, se asignará el valor "D" a la posicion correspondiente de 
   dicho array en la función javascript llamante
   */ 
   width: 8em;   
   height: auto;
  
   display: inline-block;  /*Centrado de la imagen (las img son elementos inline)*/
   margin: auto;    /*Centrado de la imagen (ancho  inferior al disponible)*/                      
}


/*-------Hipervínculo como un botón. En Html: <a class="boton" href=...--------*/
a.boton {
   margin: 1em 0; 
   float: right;   /*Boton a la derecha*/
   clear: both; 

   padding: .1em .5em;
   border: 1px outset #CCC;
   
   color: #222;
   text-decoration: none;
   background: #EEE;  
}

a.boton:hover {
   background: #CCB;
}

a.boton:active {
   border: 1px inset #000;
}

/*-------- Ajuste de la altura de las áreas de navegación y de texto----------*/

/*En el libro "CSS avanzado" de Javier Eguiluz se proponen varios procedimientos 
utilizando Css en el capítulo 1.4 "Elementos a la misma altura". El más elaborado 
consiste en definir varios elementos div que actuarían uno como contenedor, otro 
como contenido y uno para cada columna cuya altura se desee ajustar. El método
consiste en transformar estos div en una tabla haciendo uso de la propiedad display.

A mi este método no me ha dado el resultado esperado y tampoco me anima a emplearlo
la carga de "div" adicionales que implica (con el consiguiente enrevesamiento del 
código). Por estos motivos he realizado el ajuste haciendo uso de javascript con 
el fin de simplificar el código html. 
(Ver función Iguala_Alturas() que he implementado en el archivo FuncIsidro.js). 
*/


/*
--------------------------------------------------------------------------------
Sobre el autor y el código de este sitio:
--------------------------------------------------------------------------------
  Mi nombre es Isidro Domínguez García y si estás leyendo estas líneas que comentan
  el código de esta página, debes tener en cuenta lo siguiente:
  
  - Soy Ingeniero Industrial de formación. Nunca la informática ha sido mi actividad 
  profesional principal, no obstante, a finales de los años 80 y primeros de los 90 
  del siglo pasado diseñé y programé varias aplicaciones de bases de datos y otras 
  más específicas de cierta relevancia con lenguaje C y C++ (en entornos MS-DOS y 
  primer Windows). Esta actividad la mantuve durante unos pocos años. 
  - En el año 2011, después de más de 25 años sin tocar la informática, programé
  este sitio por una mezcla de interés en el tema de la genealogía familiar y por 
  el deseo (curiosidad) de realizar un acercamiento a los lenguajes de base que se 
  utilizaban en la creación de páginas web (html, Css y Javascript).
  - Este nuevo contacto con la informática fue por puro divertimento y por eso, 
  elementos como los menús o el visor de fotos (salvo Lightbox) están programadas 
  a golpe de línea de código y con un editor muy básico (PSPap). No se han empleado 
  por tanto sistemas de desarrollo que generan código html de forma automática. 
  Y por el mismo motivo (divertimento), tampoco he considerado el uso de herramientas 
  especializadas en genealogía que también existen en la red.
  - A su vez, mi falta de experiencia en estos lenguajes me ha llevado a abundar 
  en comentarios explicativos que te resultarán triviales si eres programador 
  experimentado.
  
  Estos comentarios para mí son necesarios para el mantenimiento del código teniendo 
  en cuenta que la modificación de este código y la programación en general la realizo 
  de forma muy eventual.      
   
  En consecuencia, es importante que tengas en cuenta que, en muchos casos, es muy 
  probable que existan soluciones técnicas mejores o más depuradas que las empleadas 
  aquí.
   
*/