/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-hover-click-slideshow.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */
/* tabindex="1" in the link code to fix the 'focus persist' problem in safari and chrome */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;} 
100% {zoom:1;}


/* for Internet Explorer to force a menu refresh after :active + ul */
#menu li a,
body {behavior:url(trigger.htc)}

#gallery {padding:0; margin:0; list-style:none; position:relative; width:570px; height:800px; margin:0 auto; border:none; background:;}
#gallery li.sets {width:570px; height:800px; overflow:hidden; position:relative;}
#gallery li.sets a.topa {display:block; width:150px; padding:0 10px; float:left; margin-right:1px; text-decoration:none; color:#fff; font:bold 12px/35px arial, sans-serif; background:#639; outline:0;} 
#gallery div {width:3500px; height:690px; margin-left:-1460px; margin-top:35px; text-align:right;}
#gallery div span {display:inline-block; height:10px;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
#gallery div span {*display:inline;}

#gallery div ul {width:490px; height:490px; background:; padding:105px; display:inline-block; margin:0; list-style:none; position:relative; z-index:10;}
#gallery div ul {*display:inline;}
#gallery div ul li {width:120px; height:120px; float:left;}
#gallery div ul li a {display:block; width:118px; height:118px; border:1px solid #000; border-color:#888 #000 #000 #888; background:#333; outline:0;}
#gallery div ul li a img {display:block; border:1px solid #888; margin:0 auto;}
#gallery div ul li.hz a img {margin-top:20px;} 
#gallery div ul li.vt a img {margin-top:8px;} 

#gallery div ul li em {display:block; position:absolute; left:-9999px; top:5px; width:690px; height:800px; background:#fff; opacity:0; filter: alpha(opacity=0);
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}

#gallery div ul li.pointer1, #gallery div ul li.pointer2, #gallery div ul li.pointer3 {position:absolute; top:0px; padding:0; margin:0; height:24px; width:58px; background:url(../images/gallerie/pointer.png) no-repeat center center; z-index:200;}
#gallery div ul.u1 li.pointer1 {left:120px;}
#gallery div ul.u2 li.pointer2 {left: 280px;}
#gallery div ul.u3 li.pointer3 {left:470px;}

#gallery div ul li em img {display:block; margin:0 auto; border:1px solid #fff;}
#gallery div ul li.hz em img {margin-top:99px;}
#gallery div ul li.vt em img {margin-top:49px;}
#gallery div ul li.hz em img.close {border:0; position:absolute; right:60px; top:0px; cursor:pointer; margin:0;}
#gallery div ul li.vt em img.close {border:0; position:absolute; right:80px; top:-4px; cursor:pointer; margin:0;}

#gallery li a.p1:hover ~ div span {width:0px;}
#gallery li a.p2:hover ~ div span {width:700px;}
#gallery li a.p3:hover ~ div span {width:1400px;}

#gallery li a.p1:hover ~ div ul li a + em {opacity:0; z-index:-1; filter: alpha(opacity=0);}
#gallery li a.p2:hover ~ div ul li a + em {opacity:0; z-index:-1; filter: alpha(opacity=0);}
#gallery li a.p3:hover ~ div ul li a + em {opacity:0; z-index:-1; filter: alpha(opacity=0);}

#gallery li ul.u1:hover ~ span {width:0px;}
#gallery li ul.u2:hover ~ span {width:700px;}
#gallery li ul.u3:hover ~ span {width:1400px;}

#gallery li div ul li a:active {outline:0;}
#gallery li div ul li a:active + em {left:0; opacity:1; filter: alpha(opacity=100);}

#gallery li div ul li a:focus {outline:0;}
#gallery li div ul li a:focus + em {left:0; opacity:1; filter: alpha(opacity=100);}