/* cssplayBox for images bottom of index page */
#case {width:850px; 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.

=================================================================== */



/* 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)}


/* udjust image positions here */
a.lightBox {display:block; float:left; outline:0; width:100px; padding:5px; border:1px solid #ddd; margin:4px; position:absolute;}

a.a1 {left:0px; top:0px;} /* each offset is 120px to the left */

a.a2 {left:120px; top:0px;}

a.a3 {left:240px; top:0px;}

a.a4 {left:360px; top:0px;}

a.a5 {left:480px; top:0px;}

a.a6 {left:600px; top:0px;}

a.a7 {left:720px; top:0px;}

/* start second row */
a.a8 {left:0; top:153px;}

a.a9 {left:120px; top:90px;}

a.a10 {left:0px; top:0px;}

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 {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 {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;

}