#case {width:650px; height:225px; margin:0 auto; position:relative;} /* 10 items */
#case2 {width:650px; height:110px; margin:0 auto; position:relative;}
#case3 {width:390px; height:110px; margin:0 auto; position:relative;} /* 3items */
#case6 {width:780px; height:110px; margin:0 auto; position:relative;} /* 6 eme item = a11 */
#case12 {width:780px; height:225px; margin:0 auto; position:relative;}
#case4 {width:780px; height:110px; margin:0 auto; position:relative;}
/*#case {width:360px; height:350px; margin:0 auto; position:relative;}*/
/* ================================================================ 
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/cssplayBox.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.

Modified version by Jacques Meuli for this own web site. Thank's Stu Nicholls for it's work ! */

/* 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;}
}
/*body {padding:0; margin:5px; width:99%; height:100%}*/
/* a fix for :active + adjacent sibling selector in IE */
a.lightBox, img.close {behavior:url(cssplayBox/trigger.htc)}

a.lightBox {display:block; float:left; outline:0; width:100px; padding:10px; border:0px solid #666; margin:4px; position:absolute; -moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-khtml-border-radius : 20px; /*Linux browsers*/
	border-radius: 20px;
	behavior: url(scripts/pie.htc);}
a.a1 {left:0; top:0;}
a.a2 {left:130px; top:0;}
a.a3 {left:260px; top:0;}
a.a4 {left:390px; top:0;}
a.a5 {left:520px; top:0;}
a.a6 {left:0; top:115px;}
a.a7 {left:130px; top:115px;}
a.a8 {left:260px; top:115px;}
a.a9 {left:390px; top:115px;}
a.a10 {left:520px; top:115px;}
a.a11 {left:650px; top:0px;}
/* original
a.a1 {left:0; top:0;}
a.a2 {left:120px; top:0;}
a.a3 {left:240px; top:0;}
a.a4 {left:0; top:96px;}
a.a5 {left:120px; top:154px;}
a.a6 {left:240px; top:96px;}
a.a7 {left:0; top:248px;}
a.a8 {left:120px; top:248px;}
a.a9 {left:240px; top:248px;}
*/
img.small {display:block; float:left; width:100px; height:80px; border:0; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px;}
.cssBox {display:table; position:fixed; top:0; left:-9999px; width:100%; height:100%; z-index:500;}
.cssBox .back {display:block; position:fixed; top:0; left:-9999px; width:100%; height:100%; background:#000; z-index:-1; opacity:0.5;filter: alpha(opacity=50);}
.cssBox .holder {position:relative; z-index:100; text-align:center; display:table-cell; vertical-align:middle;}

.cssBox .frame {display:inline-block; margin:0 auto; padding:15px; background:#fff; position:relative; text-align:left; font-family:arial, sans-serif; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px;
-o-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-ms-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}
.cssBox .frame .caption {margin-top:-50px; position:relative; z-index:10; opacity:0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;

transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.cssBox .frame .caption h4 {font-size:18px; margin:0; padding:3px 0; color:#111;}
.cssBox .frame .caption p {font-size:12px; color:#444; margin:0; padding:3px 0;}
.cssBox .large {display:inline-block; opacity:0; position:relative; z-index:100; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}

a.lightBox:active {direction:ltr;}
a.lightBox:active + .p1,
a.lightBox:active + .p2,
a.lightBox:active + .p3,
a.lightBox:active + .p4,
a.lightBox:active + .p5,
a.lightBox:active + .p6,
a.lightBox:active + .p7,
a.lightBox:active + .p8,
a.lightBox:active + .p9,
a.lightBox:active + .p10,
a.lightBox:active + .p11 {left:0;}
a.lightBox:active + .cssBox .back {left:0;}
a.lightBox:active + .cssBox .caption {opacity:1; margin-top:0;}

a.lightBox:focus + .p1,
a.lightBox:focus + .p2,
a.lightBox:focus + .p3,
a.lightBox:focus + .p4,
a.lightBox:focus + .p5,
a.lightBox:focus + .p6,
a.lightBox:focus + .p7,
a.lightBox:focus + .p8,
a.lightBox:focus + .p9,
a.lightBox:focus + .p10,
a.lightBox:focus + .p11 {left:0;}

a.lightBox:focus + .cssBox .back {left:0;}
a.lightBox:focus + .cssBox .large {opacity:1;}
a.lightBox:focus + .cssBox .caption {opacity:1; margin-top:0;}
a.lightBox:focus + .cssBox .close {opacity:1;}

.close {display:block; width:48px; height:48px; position:absolute; top:-15px; right:-15px; cursor:pointer; z-index:150; opacity:0;

-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
transition: 0s;

transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}