/* Indicamos que el fondo será blanco y la alineación del texto centrada
	El tipo de fuente será Verdana, Aria, Helvetic o San Serif   con un tamaño de  8 px
	El fondo será blanco
	y la alineación del texto centrada (para poder tener todos los datos centrados al final)
*/
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	background-color: #FFFFFF;
	text-align: center;
	background-image: url(../imagenes/color.jpg);
	background-repeat: repeat;
	margin:auto;
	color: #000000;
	scrollbar-face-color: #CCCCCC; 
	scrollbar-shadow-color: #000000; 
	scrollbar-highlight-color: #000000; 
	scrollbar-3dlight-color: #000000; 
	scrollbar-darkshadow-color: #000000; 
	scrollbar-track-color: #CCCCCC; 
	scrollbar-arrow-color: #000000; 
}


/*
	CONTENEDOR de las imagenes

	Altura 520px
	Alineación del texto a la izq.
	Margen auto
	Espacio por arriba y abajo del 5%
*/
#contenedor{
	height: 580px;
	text-align: left;
	margin:auto;
	padding-top: 5%;
	padding-bottom: 5%;

}


/*
	EN la capa de contenido es donde se ubicará las imagenes (desplegables) y la mitad superior del logo
	Las caracteristicas serán las siguientes
	Flotará  a la izquierda
	Altura 346 px
	Ancho de 800 px
	Imagen de fondo alineada a la derecha   (Parte superior del logo) NO se repite
	Y alejandose un 3% los datos del borde izquierdo y derecho
*/	
#contenido{
	float: left;
	height: 346px;
	width: 800px;
	background-image: url(../imagenes/im6-1.jpg);
	background-position: right;
	background-repeat: no-repeat;
	padding-left:3%;
	padding-right:3%;
	

}

	/*
	Zona de lista de definición donde se incluirán las imagenes 
	Flotará en la izquierda
	*/
#contenido dt {
	float:left;
}

/*
Los enlaces dentro de la lista de  definición  (Las imagenes desplegables ) tendrán
De inicio un ancho de 50 px
se mostrará en bloque 
y se ocultará todo aquello que sobrepase los 50 px
*/

#contenido dt a {
	width:50px;
	display:block;
	overflow:hidden;
}


/*
Los enlaces dentro de la lista de  definición  (Las imagenes desplegables ) tendrán
Cuando hayan sido visitados 
Aparte del ancho de 50 px
y Sin decoración en el enlace
Un boder de color verde en todos los lados, siendo el derecho mas  delgado.
*/
#contenido dt a:link ,#contenido dt a:visited{
	width:50px;
	text-decoration: none;
	border-top: medium solid #88b9e8;
	border-right: thin solid #88b9e8;
	border-bottom: medium solid #88b9e8;
	border-left: medium solid #88b9e8;

}

/*
Los enlaces dentro de la lista de  definición  (Las imagenes desplegables ) tendrán
Cuando el ratón esté encima.
Aparte del ancho de 500 px (se aumenta el tamaño al original)
mostrado en bloque
y Sin decoración en el enlace
Un boder de color verde en todos los lados, siendo el derecho mas  delgado.
*/

#contenido dt a:hover {
	width:500px;
	text-decoration: none;
	display:block;
	border-top: medium solid #88b9e8;
	border-right: thin solid #88b9e8;
	border-bottom: medium solid #88b9e8;
	border-left: medium solid #88b9e8;
}
 
 /*
  La etiqueta imagen (imagenes desplegable)
  tendrá una altura de 334 ps y sin bonde..
 */ 
#contenido dt a img {
	height:334px; 
	border:0;
}


/*
	Esta es la zona inferior donde se ubicará el texto de Entrar y la parte inferior del logotipo
	Caracteristicas iguales que #contenido
	exceptuando al altura que esta vez es de  154 px
	
*/
#entrar{
	float: left;
	height: 310px;
	width: 800px;
	background-image: url(../imagenes/im6-2.jpg);
	background-position: top right;
	background-repeat: no-repeat;
	padding-left:3%;
	padding-right:3%;
	
}

/*
	La etiqueta entrar como es un enlace a la página principal la posicionamos dandole relleno
	por arriba de 20 px
	y en la izquierda de 40 px
*/
#entrar a {
	padding-top:20px;
	padding-left:0px;
}


/*
	La imagen de entrar. Le indicamos una altura de 80px y sin borde
*/
#entrar a img {
	padding-top:20px;
	height:80px; 
	border:0;

}