/* Author : Stu Nicholls - indicated as GPL Licence */
/* 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-keySTUframes safariSelectorFix {
0% {zoom:1;} 
100% {zoom:1;}
}
/*STUbody {padding:0; margin:0; background:#eee url(../background.jpg); text-align:center; font-family:georgia, serif;}*/
/*p {font-size:13px; line-height:18px; color:#234;}*/
#STUlightbox {display:inline-block; margin:0px auto; height:100%; vertical-align:middle;}
div.STUholder {position:fixed; width:100%; height:100%; display:table; text-align:center; left:-9999px; top:0; z-index:100;}
div.STUholder p.instructions {font:bold 10px/15px verdana, arial, sans-serif; color:#ddd; margin:0; opacity:0; filter: alpha(opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-transition: opacity 0.25s linear 0s;
-ms-transition: opacity 0.25s linear 0s;
-o-transition: opacity 0.25s linear 0s;
-webkit-transition: opacity 0.25s linear 0s;
transition:  opacity 0.25s linear 0s;
}
div.STUbackdrop {position:fixed; left:-9999px; top:0; width:100%; height:100%; background:#000; opacity:0.7; filter: alpha(opacity=70); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); z-index:-1;}
div.STUframe {display:table-cell; vertical-align:middle;}
div.STUy1 {display:inline-block; background:#fff; padding:10px;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-o-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
-moz-transition: -moz-transform 0.5s linear 0s;
-ms-transition: -ms-transform 0.5s linear 0s;
-o-transition: -o-transform 0.5s linear 0s;
-webkit-transition: -webkit-transform 0.5s linear 0s;
transition: transform 0.5s linear 0s;
}
div.STUy1 {*display:inline; *margin-top:5px;}
div.STUx1 {display:inline-block; overflow:hidden; position:relative;
-moz-transform: scaleX(0.1);
-ms-transform: scaleX(0.1);
-o-transform: scaleX(0.1);
-webkit-transform: scaleX(0.1);
transform: scaleX(0.1);
-moz-transition: -moz-transform 0.5s linear 0.5s;
-ms-transition: -ms-transform 0.5s linear 0.5s;
-o-transition: -o-transform 0.5s linear 0.5s;
-webkit-transition: -webkit-transform 0.5s linear 0.5s;
transition: transform 0.5s linear 0.5s;
}
div.STUx1 {*display:inline;}

div.STUx1 img.STUpic {opacity:0; display:block; position:relative; z-index:10;
-moz-transition: opacity 0.05s linear 0s;
-ms-transition: opacity 0.05s linear 0s;
-o-transition: opacity 0.05s linear 0s;
-webkit-transition: opacity 0.05s linear 0s;
transition:  opacity 0.05s linear 0s;
}

div.STUx1 p {font:bold 12px/18px verdana, arial, sans-serif; color:#444; margin:0; height:40px; padding:10px 0 0 0; margin-top:-50px; z-index:5; opacity:0; text-align:left; clear:left; float:left; width:100%;
-moz-transition: 0.05s linear 0s;
-ms-transition: 0.05s linear 0s;
-o-transition: 0.05s linear 0s;
-webkit-transition: 0.05s linear 0s;
transition: 0.05s linear 0s;
}
div.STUx1 p.STUclose {text-align:right; font-size:14px; position:absolute; right:10px; bottom:-10px; cursor:pointer; color:#888;}

.STUthumb {outline:0;}
.STUthumb img {height:100px; border:0;}

/* non IE browsers */

.STUb1:focus ~ div.p1 {left:0;}
.STUb2:focus ~ div.p2 {left:0;}
.STUb3:focus ~ div.p3 {left:0;}
.STUb4:focus ~ div.p4 {left:0;}
.STUb5:focus ~ div.p5 {left:0;}

.STUb1:focus ~ div.p1 div.STUbackdrop {left:0;}
.STUb2:focus ~ div.p2 div.STUbackdrop {left:0;}
.STUb3:focus ~ div.p3 div.STUbackdrop {left:0;}
.STUb4:focus ~ div.p4 div.STUbackdrop {left:0;}
.STUb5:focus ~ div.p5 div.STUbackdrop {left:0;}


.STUb1:focus ~ div.p1 div.STUframe p.instructions,
.STUb2:focus ~ div.p2 div.STUframe p.instructions,
.STUb3:focus ~ div.p3 div.STUframe p.instructions,
.STUb4:focus ~ div.p4 div.STUframe p.instructions,
.STUb5:focus ~ div.p5 div.STUframe p.instructions {opacity:1; filter: alpha(opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-transition: opacity 0.25s linear 0.2s;
-ms-transition: opacity 0.25s linear 0.2s;
-o-transition: opacity 0.25s linear 0.2s;
-webkit-transition: opacity 0.25s linear 0.2s;
transition: opacity 0.25s linear 0.2s;
}
.STUb1:focus ~ div.p1 div.STUframe div.STUx1,
.STUb2:focus ~ div.p2 div.STUframe div.STUx1,
.STUb3:focus ~ div.p3 div.STUframe div.STUx1,
.STUb4:focus ~ div.p4 div.STUframe div.STUx1,
.STUb5:focus ~ div.p5 div.STUframe div.STUx1 {
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.STUb1:focus ~ div.p1 div.STUframe div.STUx1 > div.STUy1,
.STUb2:focus ~ div.p2 div.STUframe div.STUx1 > div.STUy1,
.STUb3:focus ~ div.p3 div.STUframe div.STUx1 > div.STUy1,
.STUb4:focus ~ div.p4 div.STUframe div.STUx1 > div.STUy1,
.STUb5:focus ~ div.p5 div.STUframe div.STUx1 > div.STUy1 {
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.STUb1:focus ~ div.p1 div.STUframe div.STUx1 img.STUpic,
.STUb2:focus ~ div.p2 div.STUframe div.STUx1 img.STUpic,
.STUb3:focus ~ div.p3 div.STUframe div.STUx1 img.STUpic,
.STUb4:focus ~ div.p4 div.STUframe div.STUx1 img.STUpic,
.STUb5:focus ~ div.p5 div.STUframe div.STUx1 img.STUpic {opacity:1;
-moz-transition: opacity 0.25s linear 0.5s;
-ms-transition: opacity 0.25s linear 0.5s;
-o-transition: opacity 0.25s linear 0.5s;
-webkit-transition: opacity 0.25s linear 0.5s;
transition: opacity 0.25s linear 0.5s;
}
.STUb1:focus ~ div.p1 div.STUframe div.STUx1 p,
.STUb2:focus ~ div.p2 div.STUframe div.STUx1 p,
.STUb3:focus ~ div.p3 div.STUframe div.STUx1 p,
.STUb4:focus ~ div.p4 div.STUframe div.STUx1 p,
.STUb5:focus ~ div.p5 div.STUframe div.STUx1 p {margin-top:0; opacity:1;
-moz-transition: 0.05s linear 0.5s;
-ms-transition: 0.05s linear 0.5s;
-o-transition: 0.05s linear 0.5s;
-webkit-transition: 0.05s linear 0.5s;
transition: 0.05s linear 0.5s;
}

/* for Internet Explorer */
/* trigger for IE */
#STUlightbox a.STUthumb, STUbody {behavior:url(trigger.htc)}

.STUb1:active ~ div.p1 {left:0;}
.STUb2:active ~ div.p2 {left:0;}
.STUb3:active ~ div.p3 {left:0;}
.STUb4:active ~ div.p4 {left:0;}
.STUb5:active ~ div.p5 {left:0;}

.STUb1:active ~ div.p1 div.backdrop {left:0;}
.STUb2:active ~ div.p2 div.backdrop {left:0;}
.STUb3:active ~ div.p3 div.backdrop {left:0;}
.STUb4:active ~ div.p4 div.backdrop {left:0;}
.STUb5:active ~ div.p5 div.backdrop {left:0;}

.STUthumb:active ~ div.STUholder div.STUframe div.STUx1 {
-ms-transform: scale(1, 1);
transform: scale(1, 1);
}
.STUthumb:active ~ div.STUholder div.STUframe div.STUx1 > div.STUy1 {
-ms-transform: scale(1, 1);
transform: scale(1, 1);
}
.STUthumb:active ~ div.STUholder div.STUframe div.STUx1 img.STUpic {opacity:1;
-ms-transition: opacity 0.5s linear 1s;
transition: opacity 0.5s linear 1s;
}
.STUthumb:active ~ div.STUholder div.STUframe div.STUx1 p {margin-top:0; opacity:1;
-ms-transition: 0.05s linear 0.5s;
transition: 0.05s linear 0.5s;
}