@charset "utf-8";
/* CSS Document */
.photo {
	width:870px; //870 
	text-align:left; 
	position:relative; 
	margin:0 auto;
}

.photo ul.topic {
	padding:0;
	margin:0;
	list-style:none;
	width:880px;
	height:auto;
	position:relative;
	z-index:199;
}

.photo ul.topic li {display:block; width:300px; height:300px; float:left;} /*Modifique 150 * 250 Cambia el espacio disponible cuando 
se le dau un click a la foto y se agranda*/

/*
.photo ul.topic li a.set {Titulo Pesta単a Inactiva
	display:block; 
	width:180px; 
	height:30px; 
	text-align:center; 
	line-height:30px; 
	color:#000; 
	text-decoration:none; 
	border:1px solid #fff; 
	border-width:1px 1px 0 0; 
	background:#000; 
	font-family:verdana, arial, sans-serif; 
	font-size:0.8em;
}*/

.photo ul.topic li a ul,.photo ul.topic li ul 
{display:none;}

/*.photo ul.topic li.active a {
	color:#000; 
	background:#f60;
}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;
}*/

.photo ul.topic li.active ul {
	display:block;
	position:absolute;
	left:0;
	top:31px;
	list-style:none;
	padding:0;
	margin:0;
	height:auto; /*424 */
	background:#ddd;
	width:620px; // Tamano del recuardo de afuera
	padding:5px 6px;
	border:5px solid #bbe76a;
	z-index:201;
}

.photo ul.topic li a:hover ul, 
.photo ul.topic li:hover ul {
	display:block; 
	position:absolute; 
	left:0; 
	top:31px; 
	list-style:none; 
	padding:0; 
	margin:0; 
	height:auto; 
	background:#ddd; 
	width:620px; // Tamano del recuadro cuando se esta sobre el
	padding:5px 6px; 
	border:5px solid #aaa; 
	z-index:200;
}

.photo ul.topic li ul li { /*Lo movemos de 102 a 202*/
	display:inline; 
	width:202px; 
	height:202px; 
	float:left; 
	border:1px solid #fff; 
	margin:1px;
}

.photo ul.topic li ul li a {/*Fondo debajo de la imagen l asubimos de 100 a 200*/
	display:block; 
	width:200px; 
	height:200px; 
	cursor:default; 
	float:left; 
	text-decoration:none; 
	background:#bbe76a; 
	border:1px solid #888;
}

.photo ul.topic li ul li a img {/*Marco gris sobre Imagen la subimos de 90 a 190*/
	display:block; 
	width:190px; /*100*/
	height:190px; /*75*/
	border:5px solid #eee;
}

.photo ul.topic li a:hover ul li a:hover, .photo ul.topic li:hover ul li a:hover {
	white-space:normal; 
	position:relative;
}

.photo ul.topic li a:hover ul li a:hover img, .photo ul.topic li:hover ul li a:hover img {/*Dimensiones de la imagen aumentada*/
	position:absolute; 
	left:-50px; 
	top:-32px; 
	width:300px; 
	height:300px; 
	border-color:#fff;
}