/* 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.lightBox, .frame {behavior:url(noscript_trigger.htc)}

a.lightBox {display:block; float:left; outline:0; cursor:pointer; padding:0px;}
a.lightBox img {float:left;}

.oneBox {display:table; position:fixed; top:0; left:-9999px; width:100%; height:100%; z-index:500;}
.oneBox .back {display:block; position:fixed; top:0; left:-9999px; width:100%; height:100%; background:#000; z-index:-1; opacity:0.9; filter: alpha(opacity=80);}
.oneBox .holder {position:relative; z-index:100; text-align:center; display:table-cell; vertical-align:middle; opacity:0;
-webkit-transition: opacity 1.5s;
-moz-transition: opacity 1.5s;
-o-transition: opacity 1.5s;
transition: opacity 1.5s;
}

.oneBox .frame {display:inline-block; margin:0 auto; padding:15px 15px 7px 15px; background:#fff; position:relative; text-align:left; font-family:arial, sans-serif;
-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);
}
.oneBox .frame img {width:100%;}

a.lightBox:active {direction:ltr;}
a.lightBox:active ~ .oneBox {left:0;}
a.lightBox:active ~ .oneBox .back {left:0;}
a.lightBox:active ~ .oneBox p {display:block; text-align:right; font:bold 15px/20px arial, sans-serif;}

a.lightBox:focus ~ .oneBox {left:0;}
a.lightBox:focus ~ .oneBox .back {left:0;}
a.lightBox:focus ~ .oneBox .holder {opacity:1;}
a.lightBox:focus ~ .oneBox p {clear:left; display:block; font:bold 16px verdana, arial, sans-serif; color:#666; padding-top:5px; text-align:center;}

a.lightBox ~ .oneBox .frame div {float:left;}

a.lightBox:focus ~ .oneBox .frame div:after {width:32px; height:32px; content:url("images/close2.png"); position:absolute; right:15px; top:15px; cursor:pointer;}

.clear {clear:both; margin:0; padding:0; line-height:0;}