.gallery {  position:absolute; top:200px;left:50%;padding:0; width:1000px; border:solid 1px #FFF; margin-left:-500px; }
.gallery ul { margin:0; padding:0; list-style:none; position:relative; height:375px; }

/* Estilos para las imagenes grandes.  */ 
.gallery ul li { display:block; width:200px; float:left; color:#fff; height:413px; }
.gallery ul li a { display:block; width:auto; color:#fff; text-decoration:none; padding:none; font:1.1em Verdana, sans-serif;  }
.gallery ul li a:hover {}

/* Estilos para el cuadrado blanco de las categorias que muestran todas las imagenes.  */ 
.gallery ul li ul { display:none; position:relative; top:-376px; background: url(../images/galeriaback.jpg) no-repeat #f69125; height:294px; border:none; width:190px; left:0px; padding:8px 5px 15px 5px;}

.gallery ul li:hover ul,
.gallery ul li.over ul { display:block; }
.gallery ul li ul li { display:inline; float:none; background-image:none; height:auto; }
.gallery ul li ul li a { background-image:none; margin:8px; padding:2px; position:relative; border:0px ; float:left; display:block; width:75px; height:50px; background-color:#fff; text-align:left }
.gallery ul li ul li a:hover { background-image:none; z-index:2; }
.gallery ul li ul li a img { position:absolute; top:2px; width:75px; height:50px; border:0; margin:0; padding:0; }
/* Estilos para las imagenes pequeñas (thumbnails).  la clase li se llama thumbs*/ 
.gallery ul li.thumbs a:hover img,
.gallery ul li.thumbs a:active img,
.gallery ul li.thumbs a:focus img { width:100px; height:75px; left:-11px; top:-10px; z-index:1; border:1px solid #fff; }
/* Estilos para los textos que aparecen como titulo cuando se abren las categorias.  la clase li se llama overview*/ 
.gallery ul li.overview { display:block; clear:both; padding:5px 10px 0 10px; color:#000; }


#gallery1 ul { z-index:2; }
#gallery2 ul { z-index:1; }