/*------------------------------------------------------------------------------
CSS Document

  Hoja de estilos para el Visor de fotos 
  
  (c) Isidro Dom�nguez Garc�a  
  Primera edici�n: Mayo 2011
  Revisi�n 1: Septiembre 2017 - Centrado de elementos y actualizaci�n de controles
     
------------------------------------------------------------------------------- 
                  
                  NOTA SOBRE LAS T�CNICAS DE CENTRADO EMPLEADAS
                  ----------------------------------------------

Centrado de la imagen central mayor
-----------------------------------
Como tiene una anchura definida (width) y es inferior a la de su elemento contenedor, 
la técnica m�s sencilla para hacer el centrado consiste en convertir la imagen (que es 
elemento tipo "inline") en elemento de bloque (display: block) y utilizar el margen 
autom�tico (margin: auto)

Centrado de la tira inferior de fotos
-------------------------------------
En este caso hacemos la operaci�n contaria: primero se coniverte el bloque contenedor 
generado con div) en "inline" y despu�s recurrimos a "text-align: center". Como el contenedor
se ajustar� al ancho total de las imagenes (que por defecto son de tipo "inline"), estas 
quedar�n autom�ticamente centradas ajust�ndose de forma din�mica a la suma de los anchos
de las fotos que se visualizan en cada momento. 

Una consecuencia de este sistema es que NO ES NECESARIO ning�n tratamiento especial para
las FOTOS VERTICALES. 


Centrado del los botones de control del visor y de la tira de fotos inferior 
----------------------------------------------------------------------------
En este caso, se podr�a calcular la anchura que ocupan todos los elementos y definir
esta propiedad en el elemento contenedor, pero puede haber riesgos de visualizaci�n
en diferentes dispositivos/navegadores, sobre todo si se mezclan unidades em con px
como en el caso de los botones de control. Para estos elementos se va a utilizar la
siguiente t�cnica:
         
    - En la clase contenedora (#VfotosIDGInf � #VfotosIDGCtrl seg�n corresponda)  
      definimos la propiedad "text-align: center" 
    - En los hiperv�nculos ("#VfotosIDGInf" � "#VfotosIDGCtrl a") incluimos la 
      propiedad "display: inline-block" (tambi�n funciona "inline")       

-------------------------------------------------------------------------------*/
   
#VfotosIDG {
            
  clear: both;
    
  background-color: #8c8c8c;        
  padding: 1em;  
  border: 0;
  margin-top: 1em; 
  
  border: 2px solid white;  
  
}

#VfotosIDG #VFprecarga{
  /*Las fotos precargadas no se visualizan*/
  display: none; 
}

#VfotosIDG img{                              
  border: 0;
  margin:0;
  padding: 0.3em;  
  outline:none;            /*Sin contorno punteado con :focus y :active*/
  text-decoration:none;    /*no funciona, buscar el equivalente para im�genes*/
}

#VfotosIDGInf {  
  /*Centrado del elemento contenedor de la tira de fotos inferior.
   (Ver nota sobre el centrado de la cabecera):*/
  text-align: center;
  
  /*border: 1px solid red;*/ /*Borde para pruebas. No borrar*/
}

#VfotosIDGInf a{
  display: inline-block;   /*Ver nota sobre centrados en la cabecera*/
}

#VfotosIDG img.Inferior {  
  /*Im�genes horizontales inferiores. Dimensiones fijas para uniformidad*/  
  width: auto;       /*Para evitar deformaci�n de la imagen*/                                                                                            
  height: 4.27em;         
}


#VfotosIDG img.CentralMayor{  /*Imagen central mayor*/                  
  width: auto;                /*Para evitar deformaci�n de la imagen*/              
  height: 11.2em;             
                         
  display: block;       
  margin: auto;     /*Ver nota sobre centrados en la cabecera*/
  
  /*border: 1px solid red;*/ /*Borde para pruebas. No borrar*/          
  
}

   
#VfotosIDG img:hover { 
 background-color:white;
}

#VfotosIDG #VfotosIDGInf img:hover {
  width: auto;              /*Para evitar que se deforme*/
  height: 4.97em;           
}

#VfotosIDG a {
}

#VfotosIDG a:active {
  background-color: #8c8c8c;  /*El mismo color que el fondo*/    
}

/*-----------Iconos de los controles del visor (#VfotosIDGCtrl)---------------*/

#VfotosIDGCtrl {    /*Bloque contenedor de los controles*/
     
  /*Centrado del elemento contenedor de la tira de controles.
    (Ver nota sobre el centrado de la cabecera de este archivo)*/
  
  text-align: center; 
      
  /*border: 1px solid red;*/ /*borde para pruebas*/  
  
}

#VfotosIDGCtrl a{
  display: inline-block;
  margin: 0.3em 0em 0.3em 0em; 
}

#VfotosIDGCtrl img{ /*imagenes con los botones de control dentro de los hiperv�nculos*/

   width: 0.8em;
   height: 0.8em; 
   
   padding: .1em .5em;
   
   border: 1.5px outset #BDBDBD;   /*Efecto relieve: bot�n en posici�n normal*/
   border-radius: 4px;
   
   color: #222;
   text-decoration: none;
   background: #EEE;
  
}

#VfotosIDGCtrl #IconoCentral{  /*Control de reproducci�n/pausa*/
  /*Al estar delimitado por elementos div, el icono central pasa a ser un
  elemento de bloque y por tanto es necesario cambiar su tipo para visualizarlo
  en l�nea*/
  display: inline;                                    
}

#VfotosIDGCtrl #IconoCentral img{  
  /*Aumentamos el espaciado del icono central de reproducci�n/pausa*/
  padding-right: 1em;
  padding-left: 1em;                                    
}

#VfotosIDGCtrl a:hover img {
  background: #CCB;
}

#VfotosIDGCtrl a:active img{
   border: 1.5px inset #BDBDBD;     /*Efecto relieve: bot�n hundido*/
}