/* ///// VIEWERS - products optex and gallery ////// */
/* all ajx windows & viewers - position per usage*/

#ajxBody{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#333;
	text-decoration:none;
 box-sizing:border-box;
 height:100%; width:100%; overflow:hidden;
 }

#closeWindow,
.closeWindow,
a.closeWindow,
span.closeWindow {
	position:absolute; 
	right:12px;
	top:12px;
	display:block;  
	font-size:1px; 
	text-indent:-9999px;
	width:42px;
	height: 42px;
	background-position:50% 50% ;
	background-repeat: no-repeat;
	background-image: url(../images/icons/closer.png);
	text-decoration:none;
	background-color:#f1f1f1; border:4px solid #fff; 	background-size:12px;
	cursor:pointer; z-index:1000
	}
 
#closeWindow:hover ,
.closeWindow:hover,
a.closeWindow:hover,
span.closeWindow:hover { background-color:#CCCCCC } 


#imageWrap {
width:100%; 
margin:0px auto 0 auto;
position:relative; 
height:100%;    background-color:#fff
}

 

#imageWrap  #picCounter{
	position:absolute;
	left:12px;
	top:10px; padding:5px;
	width:auto; height: 20px;  
	text-align: left;
	display:block;
	font-size:14px;
	color:#666666;
	font-weight:bold;
	font-family: Arial, Helvetica, sans-serif;background-image:url(../images/bgTrans.png); z-index:1001; background-repeat:repeat
}

#imageWrap  #picCounter img{ height:20px; margin:0	}/* loader from JS */
 

#imageWrap  #navLeft, 
#imageWrap  #navRight{
	position: absolute;
	display:block;
	height:60px;
	width:60px;
	background-repeat:no-repeat;
	z-index: 10;
	top:45%;
	text-indent:-9999px;
	background-color:#999;
background-position:  50% 50% ;
}

#imageWrap  #navLeft{
background-image:url(../images/icons/arrowLWhiteThin.png);
left:10px;
}
 

#imageWrap  #navRight{
background-image:url(../images/icons/arrowRWhiteThin.png);
right:10px;
}

.viewerNavHover,
#imageWrap  #navLeft.viewerNavHover , 
#imageWrap  #navRight.viewerNavHover {
background-color:#999; 
} 
 



#imageWrap #text{ 
margin: 0 30px;
padding:10px;
border-top:2px solid #ccc;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#333333;	 
}
#imageWrap #text strong {
display:block;
font-size:16px;
}

#imageWrap #picPosition { display:block; font-weight:bold; font-size:12px; float:right; width:100px; text-align:center } /* pic num*/ 
 

#imageWrap  #imageContainer{
z-index: 1;
text-align:center;
width:100%; 
height:100%; 
margin:0px auto; 
display:block;
text-align:center; overflow:hidden

}
 
#imageText{
text-align:center;
display:block;
clear:both;
position:absolute;
width:80%;
bottom:35px;
left:0;
font-size:14px;
color:#333;
text-align:center;
display:block;
z-index:6;
margin: 0 	10%;
background-image:url(../images/bgTrans.png);
background-repeat:repeat;
}

#imageText p  {
	display:inline-block;
	width:auto;
	position:relative;
	padding:10px 12px;
	border-radius:1px;
	font-size:1em;
}
#imageText p  strong{  font-size:1.2em; display:block} 



#imageWrap  #hider{
	display:block;
	float:right;
	height:15px;
	width:15px;
	cursor:pointer;
	background-image:url(../images/icons/deleteGray.png);
	background-repeat:no-repeat;
	background-position:right top; z-index:100
 
}



#imageWrap #imageContainer #homeLink{ text-align:center; padding:50px; margin:10px auto; font-size:1.4em; color:#006699}
#imageWrap #imageContainer #homeLink a{ text-align:center}

#imageContainer a {
display:block; 
position:relative;
height:100%;  
width:100%;	
text-align:center
}


#imageContainer  img{
 max-height: 80%;
max-width: 90%;
 position:absolute;
top: 50%;
left: 50%;

-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
 

#imageWrap  #enlargeLink{
display:block;
font-size: 12px;
font-weight:bold;
margin:0;
color:#006699;
text-align: right;
position:absolute; bottom:20px; right:10px;
text-transform:uppercase; z-index:1001; padding:5px; background-image:url(../images/bgTrans.png)
} 

#imageContainer p#noPic{
	display:block;
	margin:0 auto;
	font-size:14px;
	color:#FF0000;
	font-weight:bold;
	text-align:center;
	position:absolute;
	left:0;
	top:45%;
	text-align:center;
	width:100%;
}

#imageWrap  #preload img{display:none}