#cajafotos{width:830px;height:600px;text-align:center;background:#4f3722 url(../img/fotos09/darkcurtain.jpg) repeat-x}
img{border:none}
.leftcurtain{width:50%;height:495px;margin-top:0px;left:0px;position:absolute;z-index:2}
.rightcurtain{width:51%;height:495px;right:0px;margin-top:0px;position:absolute;z-index:3}
.rightcurtain img, .leftcurtain img{width:100%;height:100%}
.logo{margin:0px auto;margin-top:0}
.rope{position:absolute;top:-40px;left:90%;z-index:4}

#lasfotos{width:688px;height:407px;margin:0 auto;position:relative;top:30px}
/* main navigator */
#main_navi{float:left;padding:0 !important;margin:0 !important;width:168px;padding-right:20px}
#main_navi li{clear:both;color:#FFF;font-size:12px;height:95px;list-style-type:none;width:148px;cursor:pointer;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}
#main_navi li:hover{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1}
#main_navi li.active{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1}
#main_navi img{float:left;margin-right:10px}
#main_navi strong{display:block}
/* main vertical scroll */
#main{position:relative;overflow:hidden;height:420px}
/* root element for pages */
#pages{position:absolute;height:20000em;left:0}
/* single page */
.page{padding:10px;height:420px;background:url(../img/fotos09/bg-black.png) top left repeat;width:500px}
/* root element for horizontal scrollables */
.scrollable{position:relative;overflow:hidden;width:500px;height:420px}
/* root element for scrollable items */
.scrollable .items{width:20000em;position:absolute;clear:both}
/* single scrollable item */
.item{float:left;width:480px;height:420px;padding:10px}
.item img{border:1px solid #37321e}


/* this makes it possible to add next button beside scrollable */
div.scrollable{float:left}
/*********** navigator ***********/
/* position and dimensions of the navigator */
div.navi{margin-left:220px;width:200px;height:20px;cursor:pointer;text-align:center}
/* items inside navigator */
div.navi a{width:8px;height:8px;float:left;margin:3px;background:url(../img/fotos09/navigator.png) 0 0 no-repeat;display:block;font-size:1px}
/* mouseover state */
div.navi a:hover{background-position:0 -8px}
/* active state (current page state) */
div.navi a.active{background-position:0 -16px} 


/* the overlayed element */ 
.simple_overlay{display:none;z-index:1000;background:#000;}
.simple_overlay .close{background-image:url(../img/fotos09/close.png);position:absolute;right:-10px;top:-10px;cursor:pointer;height:34px;width:34px;z-index:1000000}
/* "next image" and "prev image" links */
.next, .prev{/* absolute positioning relative to the overlay */position:absolute;top:40%;border:1px solid #666;cursor:pointer;display:block;padding:10px 20px;color:#fff;font-size:11px}
.prev{left:0;border-left:0}
.next{right:0;border-right:0}
.next:hover, .prev:hover{text-decoration:underline;background-color:#000}
/* when there is no next or previous link available this class is added */
.disabled{visibility:hidden}
/* the "information box" */
.info{position:absolute;bottom:0;left:0;padding:10px 15px;color:#fff;font-size:11px;border-top:1px solid #666}
.info strong{display:block}
/* progress indicator (animated gif). should be initially hidden */
.progress{position:absolute;top:45%;left:50%;display:none}
/* everybody should know about RGBA colors. */
.next, .prev, .info{background:#333}