﻿#posPhoto{
	position:absolute;
	top:20px;
	left:133px;
}


/* estilo del DIV cuadrado que contiene todo. Lo que se ve cuando no hay nada seleccionado */
.photo {
	width: 490px;
	height: 408px;
	text-align: left;
	position: absolute;
	/*background-color: transparent;*/
	margin-right: auto;
	margin-left: auto;
	background-image: url('../../Resources/Images/Photo/Background.jpg');
	background-repeat: no-repeat;
	/*top:0px;
	right:0px;*/
}
/* FIN de estilo del cuadrado que contiene todo. Lo que se ve cuando no hay nada seleccionado */

/* estilos para el texto que aparece cuando no hay nada seleccionado */
.photo dl {font-size:0.9em; position:absolute; width:450px; top:110px; #top:120px; left:25px;}
.photo dl dt {
	font-family: "times new roman", serif;
	font-size: 25px;
	margin-bottom: 2em;
	color: #CCCCCC;
	text-decoration: none;
	line-height: 40px;
	text-align: center;
}
.photo dl dd {font-family:verdana, arial, sans-serif;  padding:0; margin:0; line-height:1.7em; margin-bottom:2em; font-size:11px;}
.photo dl dd:first-letter {font-weight:bold;}
/* FIN estilos para el texto que aparece cuando no hay nada seleccionado */


/* estilo para (TOPIC). El espacio para los botones */
.photo ul.topic {padding:0; margin:0; list-style:none; width:490px; height:auto; position:absolute; z-index:10;	top: 0px; left: 0px;
}
/* FIN de estilo para (TOPIC) */

/* ancho de la zona activa de los botones */
.photo ul.topic li {display:block; width:98px; height:25px; float:left; }
/* FIN ancho de la zona activa de los botones */

/* estilo para el texto de los botones */
.photo ul.topic li a.set {display:block; font-size:13px; font-weight:normal; width:98px; height:25px; text-align:center; line-height:25px; color:black; text-decoration:none; /*border:1px solid #fff; border-width:1px 1px 0 0; */background:#CCCCCC; font-family:verdana, arial, sans-serif; }
/* estilo para el texto de los botones */

.photo ul.topic li ul 
{display:none; }

.photo ul.topic li a ul 
{display:none; }

/* color y fondo del boton cuando esta en rollOver */
.photo ul.topic li:hover a
{
	background: #272528;
	border-bottom: 2px;
	border-bottom-style: solid;
	border-bottom-color: #272528;
	color:white;
}
.photo ul.topic li a:hover
{
	color: black;
	background: #272528;
	border-bottom: 2px;
	border-bottom-style: solid;
	border-bottom-color: #272528;
	color:white;
}
/* FIN color y fondo del boton cuando esta en rollOver */

/* informacion para la gran zona activa donde estan las fotos */
.photo ul.topic li:hover ul 
{
	display: block;
	position: absolute;
	left: -125px;
	top: 25px;
	list-style: none;
	padding-top: 15px;
	padding-left: 52px;
	margin: 0;
	height: 390px;
	width: 620px;
	/*background: orange;*/
	cursor: pointer;
	background-image: url('../../Resources/Images/Photo/GalleryBackround.gif');
	background-repeat: no-repeat;
	border-left-style: solid;
	border-left-width: 50px;
	border-left-color: #272528;
}
.photo ul.topic li a:hover ul 
{
	display: block;
	position: absolute;
	left: -125px;
	top: 25px;
	list-style: none;
	padding-top: 15px;
	padding-left: 52px;
	margin: 0;
	height: 390px;
	width: 620px;
	/*background: orange;*/
	cursor:pointer;
	background-image: url('../../Resources/Images/Photo/GalleryBackround.gif');
	background-repeat: no-repeat;
	/*#background-image: url('../../Images/Site/fotografia/fondoImagenesExplorer.gif');
	background-position: 80px 0px;
	#cursor:pointer;*/
	border-left-style: solid;
	border-left-width: 50px;
	border-left-color: #272528;
}
/* FIN informacion para la gran zona activa donde estan las fotos */


/* espacio para la foto NORMAL */
.photo ul.topic li:hover ul li 
{display:inline; width:100px; height:75px; float:left; padding-left:27px; _padding-left:24px; padding-top:15px; _padding-top:7px;}
.photo ul.topic li a:hover ul li 
{display:inline; width:100px; height:75px; float:left; padding-left:27px; _padding-left:24px; padding-top:15px; _padding-top:7px;}
/* FIN tamaño de la foto normal */

/* espacio para la zona activa de la foto NORMAL */
.photo ul.topic li:hover ul li a 
{display:block; width:100px; height:75px; float:left; text-decoration:none; _border:1px solid #272528;}
.photo ul.topic li a:hover ul li a 
{display:block; width:100px; height:75px; float:left; text-decoration:none; _border:1px solid #272528;}
/* FIN espacio para la zona activa de la foto normal */

/* tamaño de la foto NORMAL */
.photo ul.topic li:hover ul li a img 
{display:block; width:100px; height:75px;}
.photo ul.topic li a:hover ul li a img 
{display:block; width:100px; height:75px;}
/* FIN tamaño de la foto normal */

/* no se que hace */
.photo ul.topic li:hover ul li a img.large 
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}
.photo ul.topic li a:hover ul li a img.large 
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}
/* FIN no se que hace */

.photo ul.topic li:hover ul li a:hover 
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover 
{white-space:normal; position:relative;}

/* ROLLOVER imagen- tamaño, ubicacion, color borde */
.photo ul.topic li:hover ul li a:hover img 
{position:absolute; left:-70px; top:-45px; width:222px; height:166px; /* border-color:lime;*/}
.photo ul.topic li a:hover ul li a:hover img 
{position:absolute; left:-70px; top:-45px; width:222px; height:166px; /* border-color:lime;*/}
/* FIN rollover imagen- tamaño, ubicacion, color borde */


/* no se que hace */
.photo ul.topic li:hover ul li a:hover img.large
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}
.photo ul.topic li a:hover ul li a:hover img.large
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}
/* FIN no se que hace */

/* no se que hace */
.photo ul.topic li a:hover ul li a:active 
{position:static; outline:0;}
.photo ul.topic li:hover ul li a:active 
{position:static; outline:0;}
.photo ul.topic li:hover ul li a:focus 
{position:static; outline:0;}
/* FIN no se que hace */

/* tamaño de la foto normal cuando se esta en la foto grande (cuando se hace click) */
.photo ul.topic li a:hover ul li a:active img 
{position:absolute; left:200px; top:170px; width:200px; height:150px; padding:0; background:#000; border:0; z-index:5;}
.photo ul.topic li:hover ul li a:active img 
{position:absolute; left:200px; top:170px; width:200px; height:150px; padding:0; background:#000; border:0; z-index:5;}
.photo ul.topic li:hover ul li a:focus img 
{position:absolute; left:200px; top:170px; width:200px; height:150px; padding:0; background:#000; border:0; z-index:5;}
/* FIN tamaño de la foto rollover cuando se esta en la foto grande (cuando se hace click */


/* tamaño y borde para la foto GRANDE */
.photo ul.topic li a:hover ul li a:active img.large 
{position:absolute; cursor:default; #left:92px; left:73px; top:30px; _top:20px; width:475px; height:355px; padding:0; border-bottom:7px solid #272528; border-top:6px solid #272528; border-left:10px solid #272528; border-right:7px solid #272528; #border-right:7px solid #272528; z-index:10;}
.photo ul.topic li:hover ul li a:active img.large 
{position:absolute; cursor:default; #left:92px; left:73px; top:30px; _top:20px; width:475px; height:355px; padding:0; border-bottom:7px solid #272528; border-top:6px solid #272528; border-left:10px solid #272528; border-right:7px solid #272528; #border-right:7px solid #272528; z-index:10;}
.photo ul.topic li:hover ul li a:focus img.large 
{position:absolute; cursor:default; #left:92px; left:73px; top:30px; _top:20px; width:475px; height:355px; padding:0; border-bottom:7px solid #272528; border-top:6px solid #272528; border-left:10px solid #272528; border-right:7px solid #272528; #border-right:7px solid #272528; z-index:10;}
/* FIN tamaño y borde para la foto grande */

/* ########### prueba YO ########### */

#img1-1 a:hover, #img1-2 a:hover, #img1-3 a:hover, #img1-4 a:hover,
#img2-1 a:hover, #img2-2 a:hover, #img2-3 a:hover, #img2-4 a:hover,
#img3-1 a:hover, #img3-2 a:hover, #img3-3 a:hover, #img3-4 a:hover,
#img4-1 a:hover, #img4-2 a:hover, #img4-3 a:hover, #img4-4 a:hover,
#img5-1 a:hover, #img5-2 a:hover, #img5-3 a:hover, #img5-4 a:hover{
	position:absolute;
	_position:relative;
	top:45px;
	_top:25px;
	_left:0px;
}


#img1-1 a:active, #img1-2 a:active, #img1-3 a:active, #img1-4 a:active,
#img2-1 a:active, #img2-2 a:active, #img2-3 a:active, #img2-4 a:active,
#img3-1 a:active, #img3-2 a:active, #img3-3 a:active, #img3-4 a:active,
#img4-1 a:active, #img4-2 a:active, #img4-3 a:active, #img4-4 a:active,
#img5-1 a:active, #img5-2 a:active, #img5-3 a:active, #img5-4 a:active{
	position:absolute;
	top:0px;
	left:0px;
}


#img1-1 a:focus, #img1-2 a:focus, #img1-3 a:focus, #img1-4 a:focus
#img2-1 a:focus, #img2-2 a:focus, #img2-3 a:focus, #img2-4 a:focus
#img3-1 a:focus, #img3-2 a:focus, #img3-3 a:focus, #img3-4 a:focus
#img4-1 a:focus, #img4-2 a:focus, #img4-3 a:focus, #img4-4 a:focus
#img5-1 a:focus, #img5-2 a:focus, #img5-3 a:focus, #img5-4 a:focus{
	position:absolute;
	top:0px;
	left:0px;
}

/**/
#img1-5 a:hover, #img1-6 a:hover, #img1-7 a:hover, #img1-8 a:hover,
#img2-5 a:hover, #img2-6 a:hover, #img2-7 a:hover, #img2-8 a:hover,
#img3-5 a:hover, #img3-6 a:hover, #img3-7 a:hover, #img3-8 a:hover,
#img4-5 a:hover, #img4-6 a:hover, #img4-7 a:hover, #img4-8 a:hover,
#img5-5 a:hover, #img5-6 a:hover, #img5-7 a:hover, #img5-8 a:hover{
	#position:absolute;
	_position:relative;
	#bottom:60px;
	_bottom:30px;
}

#img1-5 a:active, #img1-6 a:active, #img1-7 a:active, #img1-8 a:active,
#img2-5 a:active, #img2-6 a:active, #img2-7 a:active, #img2-8 a:active,
#img3-5 a:active, #img3-6 a:active, #img3-7 a:active, #img3-8 a:active,
#img4-5 a:active, #img4-6 a:active, #img4-7 a:active, #img4-8 a:active,
#img5-5 a:active, #img5-6 a:active, #img5-7 a:active, #img5-8 a:active{
	#position:absolute;
	#top:0px;
	#left:0px;
}

#img1-5 a:focus, #img1-6 a:focus, #img1-7 a:focus, #img1-8 a:focus,
#img2-5 a:focus, #img2-6 a:focus, #img2-7 a:focus, #img2-8 a:focus,
#img3-5 a:focus, #img3-6 a:focus, #img3-7 a:focus, #img3-8 a:focus,
#img4-5 a:focus, #img4-6 a:focus, #img4-7 a:focus, #img4-8 a:focus,
#img5-5 a:focus, #img5-6 a:focus, #img5-7 a:focus, #img5-8 a:focus{
	#position:absolute;
	#top:0px;
	#left:0px;
}

