body {
   background-color: #333;
}

a {
   text-decoration: none;
}

/* CONTENEDOR DE LAS MINIATURAS */
.containerfotos {
	margin:0 auto;
   width: auto;
   padding: 1em 1em 1em 1em;
   text-align: center;
   background-color: #222;
   height: auto;
}

.container p {
	color: #fc7;
	font-family: "Andale mono", "Trebuchet MS", sans-serif;
	font-size: 12px;
	border-bottom: 1px dashed #666;
}

/* Propiedades de las miniaturas */
.thumb img {
        border: 2px solid #fce;
        margin: 0 3px 5px 3px;
}


/* Aspecto de las miniaturas cuando pasamos el ratón por encima de ellas */
.thumb:hover img {
   border: 2px solid #000;
}


/* Para que no se vean las imágenes hasta que se haga mouse over sobre las miniaturas */
.thumb span {
	position: absolute;
	top: 150px;
	left: -1000px;
   visibility: hidden;
	color: #fc7;
	font-family: "Andale mono", "Trebuchet MS", sans-serif;
	font-size: 12px;
	border-bottom: 1px dashed #666;
   
}


/* Estilo de la capa que se ve cuando se pasa el ratón por una miniatura */
.thumb:hover span {
	background-color: #333;
   visibility: visible;
   right: 0;
	top:  150px;
	left: 0px;
	z-index: 50;
	margin: 0 auto;
   width: auto;
}


/* Estilo de las imágenes que se muestran al hacer el mouse over */
.thumb span img{ 
	border: 1px solid #000;
	padding: 5px 5px 40px 5px;
	background-color: #fff;
	width: auto;
	height: auto;
	top: 1px;
	left:50px;
}



/* Pie de página, para cosas como 'CSS Valid', 'Diseñado por...', esas cosas */
#footer {
   width: 20%;
	position: absolute;
	bottom: 10px;
	right: 10px;
   clear: both;
	padding-top: 8px;
   text-align: center;
   border-top: 1px solid #C6D4E6;
   color: #fff;
	font-family: Verdana, Arial, sans-serif;
	font-size: 10px;
}

/* Aspecto de los enlaces del pie de página */

#footer a {
	color: #fc0;
   text-decoration:none;
	font-weight: bold;

}