/* Reset */
html, body, div, p,
a, img, ol, ul, li {
	margin: 0; padding: 0;
	border: 0; outline: 0;
}
ol, ul { list-style: none;}
body{background:#bedee4;}
/* End Reset */

.contenedor {
	margin:auto;
	overflow:hidden;
	width:960px;
}
ul.mini {
	height:140px; width:840px; /* Definimos el Tamaño de nuestra lista */
	margin:10px; /* mantener espaciado de los demás elementos de tu web */
	padding:30px; /* para no tener problema al momento de agrandar la imagen de la miniatura */
	list-style: none; /* Importante! para que no salgan los estilos de las listas */
}
ul.mini li {
	margin: 5px;
	float: left;/* alineación de la lista */
	position: relative; /* importante para aplicar el centrado vertical */
	width: 130px;height: 130px; /* Definimos el tamaño de la miniatura */
}
ul.mini li img {
	width: 120px; height: 120px; /* tamaño las imagenes en miniatura */
	border: 1px solid #ccc; /* borde de las imágenes */
	padding: 5px; /* teníamos 120px de Ancho/Alto + 10px Ancho/Alto(padding) da los 130px del tamaño de la lista*/
	background: #f0f0f0;
	position: absolute;/* importante definir la posición absoluta */
	left: 0; top: 0;/* posición por defecto */
	-ms-interpolation-mode: bicubic; /* hack IE para la la escala bicúbica */
}
ul.mini li img.hover {
	background:url(miniatura.png) no-repeat center center; /* Un PNG de fondo que le da un efecto de sombra */
	border: none;
}
#imgrande{
	padding: 10px; border:1px solid #ccc; background: #f0f0f0;
	width:450px;height:320px;
	clear:both; margin:auto;
}