body {
	margin: 0px; /* Quita los margenes por defecto del body */
	padding: 0px; /* Para quitar los margenes en Opera y otros */
	background: #666868; /* Color de fondo para todo el body */
	height: 100%; /* Movida Explorer para que soporte altos al 100% */
}

/*
	La cabecera tiene un texto. Queremos quitar ese texto y poner
	una imagen. Además debe ocupar toda la parte superior y estirarse
	cuando se modifica el ancho de la ventana del navegador
*/
h1 {
	position: absolute; /* para poder ponerla dónde queramos */
	margin: 0px; /* quitamos el margin por defecto de la etiqueta h1 */
	padding: 0px; /* quitamos el padding por defecto de la etiqueta h1 */
	background-image: url(medias/pies.jpg); /* imagen de fondo a mostrar */
	background-repeat: repeat-x; /* que la imagen se repita para adaptarnos al ancho variable */
	background-position: top right; /* la imagen estará alineada arriba a la derecha */
	width: 100%; /* que cubra todo el ancho del body */
  height: 127px;
  
	/* begin hack para esconder el texto del h1 */
  text-indent: -100em;
	/* end hack */

	z-index: 1; /* para que se vea la cabecera por encima del form */	
}

/*
	Debe estar alineado a la derecha y ocupar toda la altura del body por 
	debajo de la cabecera. Como la altura de la cabecera es fija, y la del body 
	variable no podemos conocer la altura real.
	Para evitar que salga el scroll haremos que el form ocupe toda la altura del 
	body y lo mostraremos por debajo de la cabecera.
*/
form {
	position: absolute; /* para poder ponerla dónde queramos */
	top: 0px; /* alineado arriba de todo */
	right: 0px; /* alineado a la derecha de todo */
	width: 235px; /* ancho fijo correpondiente al ancho del logo */
	height: 100%; /* todo la altura del body */
	background-color: #480808;
}

/*
	Aquí van los controles. 
	Como el form está alineado arriba de todo, debemos ubicarlo por debajo de
	la cabecera.
*/
p {
	position: absolute; /* para poder ponerla dónde queramos */
	top: 140px; /* más abajo de la cabecera */
	left: 0px; /* alineado a la izquierda del form */
	width: 98%; /* todo el ancho del form */
	margin: 0px; /* quitamos el margin por defecto de la etiqueta p */
	padding: 0px 0px 0px 2%; /* quitamos el padding por defecto de la etiqueta p */
}

/*
	Aquí va el botón entrar.
	Hay que ponerlo por debajo de los controles
*/
#botonera {
	position: absolute; /* para poder ponerla dónde queramos */
	top: 220px; /* top del p + height del p */
	left: 0px; /* alineado a la izda del form */
	width: 200px; /* todo el ancho del form */
  text-align: right;
}

/*
	El botón entrar ha de parecer un link
*/
#botonera input {
	color: white;	
	background-color: transparent; /* para que no tenga fondo */
	width: auto; /* que coja el ancho correspondiente a su contenido */
	border: none; /* sin borde */
	cursor: pointer; /* que el cursor sea un dedito */
}

/*
	Datos comunes de las etiquetas y los controles
*/
label, input {
	height: 1.5em; /* la altura debe ser la misma */
	font-size: .8em; /* el tamaño de la fuente también (recordemos que utilizamos medidas "em" */
	font-family: Arial; /* la fuente es la misma */
	font-weight: bold; 
}

/*
	Las etiquetas deben ir a la izda y alineadas a la dcha
*/
label {
	display: block;
	width: 6em; /* le damos un ancho para poder alinearlas a la dcha dentro de ese ancho */
	padding-top: .5em; /* para bajar el texto y que se alinee con el input */
	color: White;
	text-transform: lowercase; /* que salga en minúsculas */
}

/*
	Los controles deben ir a la dcha y alineados a la dcha
*/
input {
	padding: 0px; /* fuera paddings por defecto */
	margin: 0em .5em .5em 0em; /* ajustamos el margen superior y derecho */
	width: 10em; /* ajustamos acho al deseado */
	border: 1px solid black; /* borde plano negro*/
}

/* 
	El logo debe mostrar una imagen y ubicarse abajo a la derecha 
*/
#logo {
	position: absolute; /* para poder ponerla dónde queramos */
	bottom: 0px; /* alineado al borde inferior del body */
	right: 0px; /* alineado la borde derecho del body */
	background-image: url(medias/logo_login.gif); /* imagen del logo */
	width: 235px; /* ancho de la imagen */
	height: 113px; /* alto de la imagen */
  z-index: 1;
}