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

a.lightBox {display:block; float:left; outline:0; padding:5px; border:1px solid #99cc33; margin-right:10px; margin-bottom:20px; cursor:pointer;}
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.6; filter: alpha(opacity=60);}
.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 0 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; text-align: center; display:block; font-family: 'myriad pro', sans-serif; font-weight: 600; font-size: 16px; color:#336600; padding-top:10px;}

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

a.a1:focus ~ .oneBox .frame div:before {content:url("rg08.jpg");}
a.a2:focus ~ .oneBox .frame div:before {content:url("rg09.jpg");}
a.a3:focus ~ .oneBox .frame div:before {content:url("rg02.jpg");}
a.a4:focus ~ .oneBox .frame div:before {content:url("rg03.jpg");}
a.a5:focus ~ .oneBox .frame div:before {content:url("rg11.jpg");}
a.a6:focus ~ .oneBox .frame div:before {content:url("rg12.jpg");}
a.a7:focus ~ .oneBox .frame div:before {content:url("rg05.jpg");}
a.a8:focus ~ .oneBox .frame div:before {content:url("rg07.jpg");}
a.a9:focus ~ .oneBox .frame div:before {content:url("rg10.jpg");}
a.a10:focus ~ .oneBox .frame div:before {content:url("rg04.jpg");}
a.a14:focus ~ .oneBox .frame div:before {content:url("rg14.jpg");}
a.a15:focus ~ .oneBox .frame div:before {content:url("rg13.jpg");}


a.a12:focus ~ .oneBox .frame div:before {content:url("waz140211.jpg");}
a.a13:focus ~ .oneBox .frame div:before {content:url("waz150323.jpg");}


a.a1:focus ~ .oneBox .frame p:before {content:"Eingangsbereich und Empfang";}
a.a2:focus ~ .oneBox .frame p:before {content:"Empfang";}
a.a3:focus ~ .oneBox .frame p:before {content:"Behandlung 1";}
a.a4:focus ~ .oneBox .frame p:before {content:"Behandlung 1";}
a.a5:focus ~ .oneBox .frame p:before {content:"Behandlung 2";}
a.a6:focus ~ .oneBox .frame p:before {content:"Behandlung 3";}
a.a7:focus ~ .oneBox .frame p:before {content:"Wartebereich 1";}
a.a8:focus ~ .oneBox .frame p:before {content:"Wartebereich 2";}
a.a9:focus ~ .oneBox .frame p:before {content:"Behandlungsflur";}
a.a10:focus ~ .oneBox .frame p:before {content:"Hörtest";}
a.a14:focus ~ .oneBox .frame p:before {content:"Hörnervendiagnostik (Computerhörtest)";}
a.a15:focus ~ .oneBox .frame p:before {content:"Zugang zur Praxis";}

a.a12:focus ~ .oneBox .frame p:before {content:"";}
a.a13:focus ~ .oneBox .frame p:before {content:"";}

.clear {clear:both;}

.iPad {position:fixed; left:0; top:0; width:100%; height:100%; display:none; z-index:800;}
a.a1:focus ~ .iPad,
a.a2:focus ~ .iPad,
a.a3:focus ~ .iPad,
a.a4:focus ~ .iPad,
a.a5:focus ~ .iPad,
a.a6:focus ~ .iPad,
a.a7:focus ~ .iPad,
a.a8:focus ~ .iPad,

a.a12:focus ~ .iPad,
a.a13:focus ~ .iPad
 {display:block;}