#case {width:720px; height:700px; 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.
=================================================================== */

/* 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:0; width:100%; 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:5px; border:1px solid #ddd; margin:4px; position:absolute;}
a.a1 {left:0; top:0;}
a.a2 {left:120px; top:0;}
a.a3 {left:240px; top:0;}
a.a4 {left:360px; top:0px;}
a.a5 {left:480px; top:0px;}
a.a6 {left:600px; top:0px;}
a.a7 {left:0; top:96px;}
a.a8 {left:240px; top:96px;}
a.a9 {left:480px; top:96px;}
a.a10 {left:0; top:250px;}
a.a11 {left:600px; top:250px;}
a.a12 {left:240px; top:250px;}
a.a13 {left:360px; top:154px;}
a.a14 {left:480px; top:250px;}
a.a15 {left:600px; top:154px;}
a.a16 {left:120px; top:154px;}
a.a17{left:120px; top:250px;}
a.a18 {left:360px; top:250px;}
img.small {display:block; float:left; width:100px; border:0;}
.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;
-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: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}
.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;
-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,
a.lightBox:active + .p12,
a.lightBox:active + .p13,
a.lightBox:active + .p14,
a.lightBox:active + .p15, 
a.lightBox:active + .p16,
a.lightBox:active + .p17,
a.lightBox:active + .p18 {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,
a.lightBox:focus + .p12,
a.lightBox:focus + .p13,
a.lightBox:focus + .p14,
a.lightBox:focus + .p15, 
a.lightBox:focus + .p16,
a.lightBox:focus + .p17,
a.lightBox:focus + .p18 {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: 2s;
-o-transition-delay: 2s;
-moz-transition-delay: 2s;
-ms-transition-delay: 2s;
-webkit-transition-delay: 2s;
}