/* 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 {
	min-height:100%;
	margin-bottom:0.1px;
	}
label {
	font-weight:bold;
}
/* 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.

*/
#envoltorio {
	width: 598px;
	margin: 0 auto;
	background-color:#FFF;
	height: 400px;
}
/* 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 5px;
}
/* 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: 20px 0 20px 20px;
	float: left;
	width: 200px;
	border: 4px groove #F9F2F8;
}
/* 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: 370px;
	margin-top: 20px;
}
/* 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: none;
	width: 590px;
	font-size:80%;
	float: left;
}