/*PLANTILLA 3*/
/*3 divs alineados verticalmente: contenedor1, contenedor2 y contenedor3*/
/*El div contenedor1 incluye un único div: libro, donde se reflejarán: título, autor,...*/
/*El div contenedor2 incluye tres divs: texto, googlemap y uno en desuso (contendor2.3)*/
/*El div pie incluye lista de 3 elementos alineadas horizontalmente*/


body {
    overflow-x: hidden;
    background-color: rgba(230,230,230,1.00);
}


.contenedor {
						
						height:auto;
						}
#contenedor1 {
    vertical-align: top;
    background-color: rgba(240,240,240,1.00);
						 }
#contenedor2 {
    vertical-align: middle;
						 }
#contenedor3 {
    vertical-align: bottom;
						 }

/* CREACIÓN DE MENÚ HORIZONTAL sobre la imagen
Explicado más abajo, en .ulpie*/

/*DIV(contenedor1).DIV(cabecera)*/
#cabecera {
    top: 0%;
    left: 0px;
    height: auto;
}

.textocabecera {
	text-align: center;
	vertical-align:central;
	text-transform: uppercase;
	font-family:"din_condensed_web",Arial,sans-serif;
	letter-spacing:15px;
	font-size:2em;
	font-weight:300;
	color: black;
}

.textoarchivo {
	text-align: center;
	vertical-align:central;
	font-family:"din_condensed_web",Arial,sans-serif;
	font-size:1.5em;
	color: black;
}
 
#cabecera ul {
	background: none;
	border: none;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
	
#cabecera ul li {
	float: left;
}
		
#cabecera li a {
	height:50px;
	color: black;
	display: block;
	padding: 0.3em;
	text-decoration: none;
	border-left: none;
	border-right: none;
}

/*DIV #texto*/
#texto {
    vertical-align: top;
    left: 0;
    height: auto;
    width: 90vw;
    padding-left: 3vw;
    padding-right: 3vw;
    padding-top: 25px;
    padding-bottom: 25px;
				}
/*Para evitar que el texto aparezca, si es muy largo,
debajo del pie, establezco overflow: hidden*/
.textotexto {
			text-align: justify;
			font-family:"din_condensed_web",Arial,sans-serif;
			letter-spacing:3px;
			font-size:1.5em;
			font-weight:300;
			color: black;
			background-color: none;color: black;
			overflow: hidden;
			}

/*DIV #contenedor2.2*/
#contenedor22 {
		left: 0;
		height:50vw;
		width:98vw;
				}			
		
.ulmap {
  background: none;
  border: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ulmap li {
  float: left;
  width: 50%;
}

/*DIV #googlemap*/ 
#googlemap {
  float:left;
  left: 0px;
  height: 50vw;
  width: 70vw;
  z-index: 0;
}
.googft-info-window {
	height: 500px;
	width: 300px;
	top: 0;
	left:0;
	background-color: #FBF7F7;
	overflow-x:hidden;
	overflow-y: auto;
	font-family: "ApercuRegular",Arial,sans-serif;letter-spacing: 0.05rem;
	} 

#busquedaDIV {
  position:absolute;  
  margin-left: 5px;
  margin-top: 10px;
  z-index: 1;
}

#busqueda {
  background-color: #fff;
  font-family: Roboto;
  font-size: 12px;
  font-weight: 300;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 200px;
  z-index: 1;
  margin-top: 10px;
  margin-left: 10px;
  
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 32px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/*Mapcontrol*/
#selectorDIV {
  position:absolute;  
  margin-left: 10px;
  margin-top: 10px;
  z-index: 1;
}
 .map-control {
       background-color: #fff;       
       margin: 10px;
        /* Hide the control initially, to prevent it from appearing
           before the map loads. */
        /*display: none;*/
      }
/* Display the control once it is inside the map. */
      #map .map-control { 
	  display: block;
	  }

      .selector-control {
	  font-family: Roboto;
	  font-size: 15px;
	  font-weight: 300;
	  padding: 0 11px 0 13px;
	  text-overflow: ellipsis;
	  width: 200px;
	  z-index: 1;
	  border: 1px solid transparent;
	  border-radius: 2px 0 0 2px;
	  box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  height: 32px;
	  outline: none;
	  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

/*DIV #afiliación*/
#afiliacion {
  text-align: center;
  width: 20vw;
  height:50%;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-bottom: 1vw;
			}
			
.textoafiliacion {
  margin:0;
  text-align: center;
  font-family:"din_condensed_web",Arial,sans-serif;
  letter-spacing:1px;
  font-size:1.0em;
  font-weight:300;
  color: black;
  background-color: none;color: black;
  overflow: hidden;
			}			

/*DIV #descargakml*/
#diviw {
  text-align: center;
  width: 20vw;
  height:50%;
  padding-left: 1vw;
  padding-right: 1vw;
 			}
			
.textodescargakml {
  margin:0;
  text-align: center;
  font-family:"din_condensed_web",Arial,sans-serif;
  letter-spacing:1px;
  font-size:1.0em;
  font-weight:300;
  color: black;
  background-color: none;color: black;
  overflow: hidden;
			}									
/*DIV contenedor2.3*/

/*DIV #pie*/  
#pie {
    left: 0px;
    height: auto;
	 }
		 
.textopie {
	font-family:"neutra_textbook_alt",Arial,sans-serif;
	 font-size:2vw;
	 text-align: center;
	 background-color: none;
	 color: black;
					}
	
/* CREACIÓN DE MENÚ HORIZONTAL
Eiminar las viñetas automáticas y todos los márgenes y espaciados aplicados por defecto
Añadir un borde al menú de navegación y establecer el color de fondo y los bordes de cada elemento del menú:*/
 
.ulpie {
	height:auto;
	background: none;
	border: none;
	list-style: none;
	margin-top: 2vw;
	padding: 0;
	filter: alpha(opacity=80); /* internet explorer */
    	-khtml-opacity: 0.8;      /* khtml, version anterior de safari */
    	-moz-opacity: 0.8;       /* firefox, mozilla, netscape */
    	opacity: 0.8;           /* safari, chrome, opera */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

/*Aplicar estilos a los enlaces: mostrarlos como un elemento de bloque para 
que ocupen todo el espacio de cada <li> del menú, añadir un espacio de relleno 
y modificar los colores y la decoración por defecto*/

.ulpie li a {
	color: #333;
	display: block;
	padding: 0.3em;
	text-decoration: none;
}

/*Establecer la anchura de los elementos del menú. Como el menú es de anchura
 variable y contiene tres elementos, se asigna una anchura del 33% a cada
 elemento. Si se quiere tener un control más preciso sobre el aspecto de cada
 elemento, es necesario asignar una anchura fija al menú.
Además, se posiciona de forma flotante los elementos de la lista mediante
 la propiedad float. Esta es la clave de la transformación de una lista en un
 menú horizontal:
*/

.ulpie li {
  float: left;
  width: 33%;
}

/*Después de posicionar de forma flotante a todos los elementos de la lista, 
el elemento <ul> es un elemento vacío ya que en su interior no existe ningún 
elemento posicionado de forma normal.La solución de este problema consiste en 
aplicar la propiedad overflow: hidden; al elemento <ul>, de forma que 
encierre a todos los elementos posicionados de forma flotante*/

.ulpie {
  overflow: hidden;
}

/*Establecer los bordes de los elementos que forman el menú:*/

.ulpie li a {
  border-left: none;
  border-right: none;
}

.ulsocial {
	background: none;
	border: none;
	list-style: none;
}
.ulsocial li {
	float: left;
	width:100%;
}