@charset "utf-8";
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	font-style: normal;
	line-height: normal;
	margin-bottom: 8px;
	margin-left: 20px;
	color: #333333;
	margin-right: 10px;
	margin-top: 5px;
	list-style-position: outside;
	list-style-type: circle;
}
    body  {
	font: 100% Verdana, Arial, Helvetica, sans-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: left; /* 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 */
	color: #000000;
	background-repeat: repeat;
	background-image: url(../Imagenes/background.gif);
    }
.floatIzquierda {
	float: left;
	margin-right: 30px;
	margin-bottom: 10px;
	margin-top: 15px;
}
    .thrColLiqHdr #container {
	width: 1000px;
	margin: 0 auto;
	text-align: left; /* esto anula text-align: center en el elemento body. */
	background-image: url(../Imagenes/Pie.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-color: #FFFFFF;
	border-left: 6px solid #008C45;
	border-right: 6px solid #008C45;
	border-bottom: 6px solid #008C45;
    } 
    .thrColLiqHdr #header {
	padding: 0;
    } 
#Menu {
	height: 2.2em;
	width: 1000px;
}

    .thrColLiqHdr #header h1 {
	margin: 0; /* el uso de relleno en lugar de margen le permitirá mantener el elemento alejado de los bordes del div */
	position: absolute;
	top: -100px;
	}
    
    /* Sugerencias para barras laterales:
    1. Dado que está trabajando en porcentajes, es conveniente no utilizar relleno lateral en las barras laterales. Se añadirá al ancho en el caso de navegadores que cumplen los estándares, creando un ancho real desconocido. 
    2. El espacio entre el lado del div y los elementos que contiene puede crearse colocando un margen izquierdo y derecho en dichos elementos, como se observa en la regla ".thrColLiqHdr #sidebar1 p".
    3. Dado que Explorer calcula los anchos después de mostrarse el elemento padre, puede que ocasionalmente encuentre errores inexplicables con columnas basadas en porcentajes. Si necesita resultados más predecibles, puede optar por cambiar a columnas con tamaño en píxeles.
    */
    .thrColLiqHdr #sidebar1 {
	float: left; /* este elemento debe preceder en el orden de origen a cualquier elemento que desee situar junto a */
	width: 0%; /* el color de fondo se mostrará a lo largo de todo el contenido de la columna, pero no más allá */
	padding: 0;
	clear: left;
    }
    .thrColLiqHdr #sidebar2 {
	width: 340px; /* el color de fondo se mostrará a lo largo de todo el contenido de la columna, pero no más allá */
	padding: 0;
	float: right;
	margin-top: 0px;
	clear: right;
	border-bottom: 4px solid #666666;
	border-left: 4px solid #666666;
	border-top: 4px solid #666666;
    }
    .thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
	margin-left: 10px; /* deben asignarse los márgenes izquierdo y derecho de cada elemento que vaya a colocarse en las columnas laterales */
	margin-right: 3px;
	position: relative;
    }
    
    /* Sugerencias para mainContent:
    1. El espacio entre el mainContent y las barras laterales se crea con los márgenes izquierdo y derecho del div mainContent.
    2. para evitar la caída de un elemento flotante con una resolución mínima admitida de 800 x 600, los elementos situados dentro del div mainContent deben tener un tamaño de 300px o inferior (incluidas las imágenes).
    3. en el siguiente comentario condicional de Internet Explorer, la propiedad zoom se utiliza para asignar a mainContent "hasLayout." Esto evita diversos problemas específicos de IE.
    */
    .thrColLiqHdr #mainContent {
	margin: 0px 365px 15px 10px;
	padding: 0 0px 0px 0px;
	width: 630px;
	position: absolute;
    }
    
    .thrColLiqHdr #footer {
	padding: 0;
	font-size: 75%;
    } 
    .thrColLiqHdr #footer p {
	margin: 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 */
	color: #000000;
	font-size: 65%;
    }
    
    /* Varias clases diversas para su reutilización */
    .fltrt { /* esta clase puede utilizarse para que un elemento flote en la parte derecha de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
	float: right;
	margin-left: 3px;
	position: relative;
    }
    .fltlft { /* esta clase puede utilizarse para que un elemento flote en la parte izquierda de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
	float: left;
	margin-right: 1px;
    }
    .clearfloat { /* esta clase debe colocarse en un elemento div o break y debe ser el último elemento antes del cierre de un contenedor que deba incluir completamente a sus elementos flotantes hijos */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
.floatDerecha {
	float: right;
	margin-left: 25px;
	margin-bottom: 10px;
	margin-top: 15px;
}
body,td,th {
	color: #333333;
}
a:link {
	color: #2E3192;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #333333;
}
a:hover {
	text-decoration: underline;
	color: #008C45;
}
a:active {
	text-decoration: none;
	color: #CC0000;
}

h1,h2,h3,h4,h5,h6 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-top: 0px;
	margin-bottom: 0px;
	left: 10px;
	padding-left: 10px;
}
h1 {
	font-size: 250%;
	color: #333333;
}
h2 {
	font-size: 100%;
	color: #333333;
	margin-bottom: 1px;
}
h3 {
	font-size: 85%;
	color: #333333;
	clear: left;
	margin-bottom: 1px;
	font-weight: bold;
	text-decoration: underline;
}
#TituloCambista {
	font-size: 85%;
	color: #333333;
	clear: left;
	margin-bottom: 1px;
	font-weight: bold;
	text-decoration: underline;
	position: relative;
}
.thrColLiqHdr #sidebar3 {
	width: 340px; /* el color de fondo se mostrará a lo largo de todo el contenido de la columna, pero no más allá */
	padding: 0;
	float: right;
	margin-top: 0px;
	position: relative;
	border-left: 4px solid #666666;
	border-bottom: 4px solid #666666;
	clear: right;
	border-top: 4px solid #666666;
}
.thrColLiqHdr #container #footer p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 90%;
	font-weight: bold;
	color: #333333;
}
#FechaActualizacion {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #CCCCCC;
	position: relative;
}
.twoColLiqHdr #container {
	width: 1000px;
	margin: auto;
	text-align: left; /* esto anula text-align: center en el elemento body. */
	background-image: url(../Imagenes/Pie.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-color: #FFFFFF;
	border-left: 6px solid #008C45;
	border-right: 6px solid #008C45;
	border-bottom: 6px solid #008C45;
}
.twoColLiqHdr #header {
	padding: 0;
}
.twoColLiqHdr #header h1 {
	margin: 0; /* el uso de relleno en lugar de margen le permitirá mantener el elemento alejado de los bordes del div */
	position: absolute;
	top: -100px;
}
.twoColLiqHdr #sidebar1 {
	float: left; /* este elemento debe preceder en el orden de origen a cualquier elemento que desee situar junto a */
	width: 0%; /* el color de fondo se mostrará a lo largo de todo el contenido de la columna, pero no más allá */
	padding: 0;
	clear: left;
}
.twoColLiqHdr #sidebar2 {
	width: 340px; /* el color de fondo se mostrará a lo largo de todo el contenido de la columna, pero no más allá */
	padding: 0;
	float: right;
	margin-top: 0px;
	clear: right;
	border: 4px solid #666666;
}
.twoColLiqHdr #sidebar1 p, .twoColLiqHdr #sidebar1 h3, .twoColLiqHdr #sidebar2 p, .twoColLiqHdr #sidebar2 h3 {
	margin-left: 10px; /* deben asignarse los márgenes izquierdo y derecho de cada elemento que vaya a colocarse en las columnas laterales */
	margin-right: 3px;
}
.twoColLiqHdr #mainContent {
	margin: 0px 365px 15px 10px;
	padding: 0 0px 0px 0px;
	position: relative;
	clear: left;
	width: 630px;
}
.twoColLiqHdr #footer {
	padding: 0;
}
.twoColLiqHdr #footer p {
	margin: 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 */
	color: #000000;
	font-size: 65%;
}
.twoColLiqHdr #container #footer p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 90%;
	font-weight: bold;
	color: #333333;
}
#Volver {
	position: relative;
	clear: left;
	width: 70px;
	margin-left: 750px;
}
#Volver2 {
	position: relative;
	width: 70px;
	margin-left: 0px;
}
#Envoltorio {
	width: 1000px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
.TitulosLista {
	font-size: 80%;
	color: #2E3192;
	line-height: normal;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#apDiv1 {
	position:absolute;
	left:400px;
	width:auto;
	height:28px;
	z-index:auto;
	margin-left: 0px;
	top: 60px;
}

.Fecha {
	color: #FFFFFF;
	font-size: 90%;
	font-weight: bold;
}

h4 {
	font-size: 75%;
}
#cuerpo {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	width: 700px;
	margin-left: 150px;
	margin-top: 0px;
	border: 2px solid #666666;
}
#Volver3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	width: 70px;
	position: relative;
	margin-left: 10px;
}
#EnvuelveAcordeon {
	width: 300px;
	margin-left: 15px;
	float: left;
}
#EnvuelveAcordeon2 {
	width: 300px;
	float: left;
	margin-left: 30px;
}
#EnvuelveAcordeon3 {
	width: 300px;
	float: left;
	margin-left: 30px;
}
/* Algunos navegadores, especialmente Firefox, no dejan espacio a la derecha del scrollbar vertical, de modo que la página alterna a la izquierda o derecha dependiendo del tamaño del contenido. Configurando min-height del elemento html a 100% y declarando un margin-bottom de 0.1px, la página siempre genera un scrollbar vertical, pero no hace scroll a menos que el contenido exceda la altura del contenedor de la imagen. Esto no es ideal, pero es menos confuso para el usuario que tener la página constantemente saltando de izquierda a derecha.
*/
html {
	margin-bottom:0.1px;
	}
/* La regla body elimina margin y padding de modo que la página aparece posicionada del mismo modo en todos los navegadores. La imagen de fonfo está centrada y se "reproduce" verticalmente. El color de fondo concuerda con los bordes del ancho del fondo de 1.200 píxeles. El color para el texto se confgura como negro y se elige un conjunto de fuentes sans-serif.
*/
bodygaleria {
	margin: 0px;
	padding: 0px;
	background-image: url(../Imagenes/galeria_fondo.jpg);
	background-repeat: repeat-y;
	background-position: center top;
	background-color: #F9F2F8;
	color:#000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

/* El div envoltorio encierra el contenido de la página y lo centra. Configurando el color de fondo como blando, el contenido se mantiene legible, incluso aunque la imagen de fondo del body no se cargue.

*/
 #envoltorioGaleria {
	width: 1000px;
	margin: 0 auto;
	background-color:#FFF;
	height: auto;
	position: relative;
}
/* El div seleccionar tiene un margin top de 15 píxeles y uno left de 5 píxeles que posicionan el menú desplegable y su etiqueta fuera de la imagen de la cabecera y en el lado izquierdo del div envoltorio. 
*/
#seleccionar {
	margin: 15px 0 0 200px;
}
/* El div miniaturas tiene un margin de 20 píxeles en cada lado, excepto a la derecha. También tiene un borde estriado de 4 píxeles, haciendo su ancho total de 228 píxeles. Tiene un float left de modo que pueda mantenerse al lado del div imagPrincipal.
*/
#miniaturas {
	margin: 0px 40px 20px 20px;
	float: left;
	width: 360px;
	border: 4px groove #008C45;
}
/* Las imágenes dentro del div miniaturas tienen tanto padding como margin. El padding permite añadir un efecto spry highlight cuando las miniaturas tiene el ratón encima. Las miniaturas tienen 80 píxeles de ancho, de modo que el ancho total de cada una llega a 96 píxeles. En teoría, deberíamos ser capaces de usar 100 píxeles para cada miniatura. Puedes modificar el margin para buscar el diseño más idóneo. 
*/
#miniaturas img {
	margin: 5px;
	padding: 3px;
	cursor: pointer;
	border: none;
}
/* El div imagPrincipal tiene un float left de modo que se muestre al lado del div miniaturas. Su ancho está configurado a 492 píxeles para rellenar el espacio horizontal sobrante en el div envoltorio (228 + 492 = 720).
*/
#imagPrincipal {
	float: left;
	width: 492px;
	margin: 0;
}
/* La imagen principal y su título están en un parrafo con una alineación center para posicionarlos dentro del div imagPrincipal. La propiedad line-height está configurada a 2 para dar un espacio extra de separación para el título bajo la imagen principal. 
*/
#imagPrincipal p {
	text-align: center;
	font-weight: bold;
	line-height: 2;
}
/* El div descripcion usa la propiedad clear para asegurarse que no se solapa con ninguno de los divs con float superiores. Usando auto para los margins left y right centra el div dentro del envoltorio.
*/
#descripcion {
	clear: left;
	width: 450px;
	margin: 0 100px 20px auto;
	font-size:85%;
	text-align: center;
}
form {
	width:600px;
	margin:15px auto 10px 20px;
	}
label {
	display:block;
	font-weight:bold;
	}
textarea {
	width:500px;
	height:120px;
	}
.textInput {
	width:250px;
	}
.advertencia {
	font-weight:bold;
	color:#FF0000;
	}
.Estilo1 {
	font-size: small;
	color: #2E3192;
}