/*

xGalleryBrowse 1.0
(C)opyright xabey 2014

*/

/* Images List */

.xgb_container {
	display: inline-block;
}

.xgbro_images { width: 75px; height: 75px; border: 1px solid #004276; border-radius: 2px; overflow: hidden; float: left; margin: 10px; background-color: #004276; }
.xgbro_images img { margin: 0 !important; margin-left: auto !important; margin-right: auto !important; min-height: 75px !important; }
.xgbro_image { text-align: center; }
.xgbro_title { text-align: center; font-size: 9px; }

/* Image Viewer */

#xgbro_ImageBg { background-image: url(/lib/xGalleryBrowse/xbg.png); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5000; display: none; }
#xgbro_ImageClose { position: absolute; top: 5px; right: 5px; border-radius: 2px; background-color: #fff; color: #000; z-index: 5001; width: 20px; line-height: 20px; height: 20px; text-align: center; cursor: pointer; border: 1px solid #000; }
#xgbro_ImageWrapper { /*border: 1px solid #000;*/ position: absolute; /*background-color: #000;*/ color: #fff; overflow: hidden; }
#xgbro_ImageWrapperContainer { position: relative; width: 100%; height: 100%; }
#xgbro_Image { display: none; position: absolute; top: 0; left: 0; max-width: 100%; max-height: 100%;  }

#xgbro_ImageNext { position: absolute; background-color: #fff; top: 0; right: 5px; width: 40px; height: 40px; border-radius: 2px; cursor: pointer; opacity: 0.5; }
#xgbro_ImagePrev { position: absolute; background-color: #fff; top: 0; left: 5px; width: 40px; height: 40px; border-radius: 2px; cursor: pointer; opacity: 0.5; }

#xgbro_ImageUp { position: absolute; background-color: #fff; top: 5px; right: 5px; width: 30px; height: 30px; border-radius: 2px; cursor: pointer; opacity: 0.5; }
#xgbro_ImageUp img { width: 100%; height: 100%; }
#xgbro_ImageDown { position: absolute; background-color: #fff; bottom: 5px; right: 5px; width: 30px; height: 30px; border-radius: 2px; cursor: pointer; opacity: 0.5; }
#xgbro_ImageDown img { width: 100%; height: 100%; }

#xgbro_ImageDesc { position: absolute; background-color: #fff; top: 0; left: 0; width: 100%; height: 25px; color: #000; font-size: 16px; padding: 5px 0px; display: none; opacity: 0.9; text-align: center; border-radius: 0 0 3px 3px; }

#xgbro_ImageBrowser { position: absolute; background-image: url(/lib/xGalleryBrowse/xbg.png); bottom: 0; left: 0; width: 100%; height: 75px; color: #000; font-size: 16px; border-top: 1px solid #808182; overflow: hidden; }
#xgbro_ImageBrowserWrapper { position: relative; height: 75px; padding-right: 45px; padding-left: 5px; overflow: hidden;  }
.xgbro_ImageBrowser { width: 50px; height: 50px; border: 1px solid #808182; opacity: 0.7; background-size: cover; margin: 10px;  float: left; position: relative; }
.xgbro_ImageBrowser:hover { opacity: 1.0; cursor: pointer;  }
.xgbro_ImageBrowser_active { opacity: 1.0 !important; }
.xgbro_clear { clear: both; }

@media screen and (max-width:640px) {
	/* Style adjustments for viewports that meet the condition - MOBILE */
	/*#xgbro_ImageNext { display: none; }
	#xgbro_ImagePrev { display: none; }*/
	#xgbro_ImageClose { display: none; }
	#xgbro_ImageDesc { font-size: 9px; }
}