@charset "utf-8";
    body {
	width: 100%;
	font: 100% Georgia, "Times New Roman", Times, serif;
	margin: 0; /* es recomendable ajustar a cero el margen y el relleno del elemento body para lograr la compatibilidad con la configuración predeterminada de los diversos navegadores */
	padding: 0;
	text-align: center; /* esto centra el contenedor en los navegadores IE 5*. El texto se ajusta posteriormente con el valor predeterminado de alineación a la izquierda en el selector #container */
	background-color: #FFFFFF;
    }
img {max-width: 100%; height: auto;}

.video {
 position: relative;
 padding-bottom: 56.29%;
 overflow: hidden;
 }
.video iframe
{
position: absolute;
display: block;
top: 0;
bottom:0;
margin-top:auto;
margin-bottom:auto;
right: 0;
left: 0;
margin-left:auto;
margin-right:auto;
width: 95%;
height: 95%;
max-width:700px;
border: 0px;
} 
 .video2 {
 position: relative;
 padding-bottom: 40%;
 overflow: hidden;
 }
.video2 iframe
{position: absolute;
display: block;
top: 0;
bottom:0;
margin-top:auto;
margin-bottom:auto;
right: 0;
left: 0;
margin-left:auto;
margin-right:auto;
width: 100%;
height: 100%;
max-width:900px;
} 
a:link {
color: #0033FF;
text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #0033FF;
}
a:hover {
	text-decoration: none;
	color: #99CCFF;
}
a:active {
	text-decoration: none;
	color: #000000;
}
.especial:link{color: #0033FF;}
.especial:visited{color: #0033FF;}
.especial:hover{color: #99CCFF;}
.proyecto:link{color: #FF9900;}
.proyecto:visited{color: #FF9900;}
.proyecto:hover{color: #FF0000;}
 .nota{font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	margin-top: 0em;
	color: #CC6600;
	text-align: center;
}
caption {color: #800000; font-family:Georgia, "Times New Roman", Times, serif; font-size: x-large; font-style: normal; font-weight: normal}
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: 2em;
	font-weight: normal;
	font-variant: normal;
	color: #000000;
}
h4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: italic;
	line-height: 1.7em;
	color: #003333;
	font-weight: normal;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #C2D8E5;
	text-align: left;
	margin-bottom: 5em;
}
h5 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	line-height: 3em;
}
h1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 45px;
	font-weight: bold;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 0.7em;
}
h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-style: normal;
	line-height: 1.9em;
	font-weight: normal;
	font-variant: normal;
	color: #000000;
}
h3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 28px;
	font-style: normal;
	line-height: 1.0em;
	color: #7B0808;
	font-weight: normal;
}
h6 {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	font-style: normal;
	line-height: 1.7em;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	background-color: #CCCCCC;
	text-align: center;
}
 /* ETIQUETAS DIV DE LAS PAGINAS DE RUTAS */
 #etiquetaDivVideos {width:95%; max-width:800px; margin: auto; margin-top: 20px; border: 1px solid #000000; 
background-color: #A2C2DD;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
}
      .portada #container {
	width: 100%; max-width:1600px; /* este ancho creará un contenedor que cabrá en una ventana de navegador 800px si el texto se deja con los tamaños de fuente predeterminados del navegador */
	margin: 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
}	
    .portada #header {
	z-index: 5;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	background-color: #006699;
	text-align: center;
	font-family:  Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	color: #FFFFFF; 
	text-transform: none;
	line-height: normal;
} 
.portada #mainContent {
padding: 0 0px; /* recuerde que el relleno es el espacio situado dentro del cuadro div y que el margen es el espacio situado fuera del cuadro div */
margin-top:0px;
}
.portada #footer { 
padding: 0 10px; /* este relleno coincide con la alineación izquierda de los elementos de los divs que aparecen por encima de él. */
background: #006699;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
line-height: 3em;
} 
.portada #footer p {
margin: 0; /* el ajuste en cero de los márgenes del primer elemento del pie evitará que puedan contraerse los márgenes (un espacio entre divs) */
padding: 10px 0; /* el relleno de este elemento creará espacio, de la misma forma que lo haría el margen, sin el problema de la contracción de márgenes */
}
     .oneColElsCtrHdr #container {
	width: 60%;max-width:820px;/* este ancho creará un contenedor que cabrá en una ventana de navegador 800px si el texto se deja con los tamaños de fuente predeterminados del navegador */
	margin: 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
	}	
    .oneColElsCtrHdr #header {
	z-index: 5;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	background-color: #006699;
	text-align: center;
	font-family:  Georgia, "Times New Roman", Times, serif;
	font-size: 30px;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	color: #FFFFFF; 
	text-transform: none;
	line-height: 1.5em;
} 
.oneColElsCtrHdr #mainContent {
padding: 0 0px; /* recuerde que el relleno es el espacio situado dentro del cuadro div y que el margen es el espacio situado fuera del cuadro div */
margin-top:90px;
text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	color: #FFFFFF; 
	text-transform: none;
	line-height: 1.5em;
}
.oneColElsCtrHdr #footer { 
padding: 0 10px; /* este relleno coincide con la alineación izquierda de los elementos de los divs que aparecen por encima de él. */
background: #006699;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
line-height: 3em;
} 
.oneColElsCtrHdr #footer p {
margin: 0; /* el ajuste en cero de los márgenes del primer elemento del pie evitará que puedan contraerse los márgenes (un espacio entre divs) */
padding: 10px 0; /* el relleno de este elemento creará espacio, de la misma forma que lo haría el margen, sin el problema de la contracción de márgenes */
}
     .rutas #container {
	width: 100%;/* este ancho creará un contenedor que cabrá en una ventana de navegador 800px si el texto se deja con los tamaños de fuente predeterminados del navegador */
	margin: 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
	}	
    .rutas #header {
	z-index: 5;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	background-color: #006699;
	text-align: center;
	font-family:  Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	color: #FFFFFF; 
	text-transform: none;
	line-height: normal;
} 
.rutas #mainContent {
padding: 0 0px; /* recuerde que el relleno es el espacio situado dentro del cuadro div y que el margen es el espacio situado fuera del cuadro div */
margin-top: 0px;
}
.rutas #footer { 
padding: 0 10px; /* este relleno coincide con la alineación izquierda de los elementos de los divs que aparecen por encima de él. */
background: #006699;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
line-height: 3em;
} 
.rutas #footer p {
margin: 0; /* el ajuste en cero de los márgenes del primer elemento del pie evitará que puedan contraerse los márgenes (un espacio entre divs) */
padding: 10px 0; /* el relleno de este elemento creará espacio, de la misma forma que lo haría el margen, sin el problema de la contracción de márgenes */
}
/*  FIN ETIQUETAS DIV DE LAS PAGINAS DE RUTAS */
/* TABLAS */
.tablaTabla {
width: 325px; 
margin:auto; 
}
.tablaCumbres {width: 295px; margin:auto; border-spacing: 0.5em; 
font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	text-align: left;
	line-height: 1.9em;
	font-variant: normal;
	text-transform: none;
	background-color: #ECFEFF;
	border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
}
.tablaCumbres td {
padding: 0 5px 0 5px;
border-bottom: 1px solid #000000;
border-bottom-color: #3399FF;
}
.tablaCumbresNumero {width: 20px; margin:auto; border-spacing: 0.5em; 
font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	color: #0033FF;
	text-align: right;
	line-height: 1.9em;
	font-variant: normal;
	text-transform: none;
	background-color: #ECFEFF;
		border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
}
.tablaCumbresNumero td {
padding: 0 5px 0 5px;
border-bottom: 1px solid #3399FF;
}
.tablaSugerencias {width: 80%; border: 0px solid #000000; margin:auto; border-spacing: 0.1em;
font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-style: normal;
	font-weight: normal;
	color: #0066FF;
	text-align: center;
	line-height: 1.7em;
	font-variant: normal;
	text-transform: none;
}
.tablaBaseDatos {width: 40%; border: 1px solid #000000; margin:auto; border-spacing: 0.1em;background:#006699; border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	text-align: center;
	line-height: 1.7em;
	font-variant: normal;
	text-transform: none;
}
.tablaFichaCumbres {width: 90%;  max-width: 820px; margin:auto; text-align: left; border-collapse: separate;
  border-spacing: 10px 0px; padding-bottom: 20px;
}
.tablaFichaCumbres td {width: 50%; margin-left: 0px; text-align: left; vertical-align: top;padding-left: 10px;padding-right: 7px;background-color: #ffffff;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #284FE6;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #284FE6;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #284FE6;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #284FE6;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
}
.tablaPortada {width: 80%; margin:auto; 
font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	text-align: left;
	line-height: 1.7em;
	font-variant: normal;
	text-transform: none;
	border-spacing: 0em
}
.tablaPieRutas {width: 100%; max-width: 450px; border: 0px; margin:auto; border-spacing: 0.3em 0.3em;
font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	text-align: center;
	line-height: 1.4em;
	font-variant: normal;
	text-transform: none;
}
.tablaPieRutas td {
background-color: #ECFEFF; 
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
}
.tablaVideos {width: 100%; max-width: 350px; border: 0px; margin:auto; border-spacing: 0.3em 0.3em;padding-bottom: 20px;
font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
	color: #ffffff;
	text-align: center;
	line-height: 1.4em;
	font-variant: normal;
	text-transform: none;
}
.tablaVideos td {
background-color: #6699CC; 
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
}
.tablaVideos2 {width: 100%;  margin:auto; text-align: left; border-collapse: separate;
}
.tablaVideos2 td {width: 30%; margin-left: 0px; text-align: left; vertical-align: top;
}
.tablaRutas {width: 50%; border: 0px; margin:auto; border-spacing: 0.3em 0.3em;
font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
	text-align: center;
	line-height: normal;
	font-variant: normal;
	text-transform: none;
}
.tablaRutas td {
width: 33%;
background-color: #4F94CC; 
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #284FE6;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #284FE6;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #284FE6;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #284FE6;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
}
.tablaRutas2 {width: 30%; border: 0px; margin:auto; border-spacing: 0.3em 0.3em;
font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
	text-align: center;
	line-height: 1.4em;
	font-variant: normal;
	text-transform: none;
}
.tablaRutas2 td {
width: 40%;
background-color: #4F94CC; 
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #284FE6;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #284FE6;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #284FE6;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #284FE6;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
}
/* FIN TABLAS */