/*--------------------------------------------------------------
WARNING: (BEFORE YOU MAKE ANY CHANGES)
--------------------------------------------------------------
Please do not edit this.css or any other CSS files or 
Templates directly. Only edit the Custom.css file. All other
your customizations will be lost as soon as you update Smart 
Site. Please make a copy of the template you wish to edit, 
rename the template and css file and place them in their own 
folder. Those customized templates that you make will not be 
overwriten on an upgrade */

/***** gallery-section *****/
#gallery { padding: 20px; }
.galleryimgs li { border: 1px solid #D6D6D6; display: table-cell; height: 70px; margin-left: auto; margin-right: auto; padding: 2px; text-align: center; vertical-align: middle; width: 70px; }
.galleryimgs img { }
.imgnoborder { border: 0; }
#gallery { position: relative; width: 90%; padding-left: 5%; padding-right: 5%; padding-top: 0%; padding-bottom: 5%; float: left; vertical-align: middle; text-align: center; display: table-cell; }
.ad-gallery .ad-nav { float: left; }
.ad-video-gallery .ad-nav { float: left; }

.itemimage-section { text-align:center; }
.ad-thumbs { position: relative; top: -25px; max-height:400px !important }

/*image gallery new fix*/
#product-image { position:relative; float:left; height: 400px !important; width: 100% !important; display: table-cell; text-align: center; vertical-align: middle; margin:auto; }
.ulgallery { display: block; height: 400px; position: relative; vertical-align: middle; width: 100%;margin: 0 auto;padding:0px }
.ligallery { display: block; margin-left: auto; margin-right: auto; padding: 0px; text-align: center; vertical-align: middle; list-style: none outside none;height:400px;width:550px;}
#ProductImage{bottom: 0;left: 0; margin: auto; position: absolute; top: 0;right: 0;max-height:100% !important;max-width:100% !important;width:auto !important;-ms-interpolation-mode: bicubic;}

/*New Video Gallery*/
#GalleryTabs {width:99%;}
.video-gallery-section{position:relative;display:inline-block;width:100%;}
#tabs-galleryimage,#tabs-galleryvideo{position:relative;display:inline-block;width:100%;padding:0px !important;height:135px;}
#tabs-galleryvideo #gallery {margin-top: 18px;margin-bottom:-10px;}
.gallery-section{height:125px;top:0;bottom:0;left:0;right:0;}
.ad-gallery{margin-top:25px !important;}
/*.itemimage-section{padding:10px 0px !important;}*/
.product-video{position:relative;display:inline-block;width:100%;background:#000;-webkit-border-radius: 10px 10px 10px 10px;border-radius: 10px 10px 10px 10px;height:400px;}
.product-video iframe{bottom: 0; max-height: 100%; left: 0; margin: auto; position: absolute; top: 0; right: 0; max-width: 100%;}
#tabs-galleryimage .ad-back { background: url("/Images/ad_scroll_back.png") no-repeat scroll 0 5px transparent !important; position:relative !important; height:31px !important; top:33px !important; }
#tabs-galleryimage .ad-forward { background: url("/Images/ad_scroll_forward.png") no-repeat scroll 0 5px transparent !important; height:31px !important; top:33px !important; }
#tabs-galleryvideo .ad-back { background: url("/Images/ad_scroll_back.png") no-repeat scroll 0 5px transparent !important; position:relative !important; height:25px !important; top:40px !important; }
#tabs-galleryvideo .ad-forward { background: url("/Images/ad_scroll_forward.png") no-repeat scroll 0 5px transparent !important; height:25px !important; top:40px !important; }

/*-----------------------------------

Gallery

-------------------------------------*/
.ad-gallery { width: 539px;/*520*/ }
.ad-gallery, .ad-gallery * { margin: 0; padding: 0; }
.ad-gallery .ad-image-wrapper { width: 100%; height: 400px; margin-bottom: 10px; position: relative; overflow: hidden; }
.ad-gallery .ad-image-wrapper .ad-loader { position: absolute; z-index: 10; top: 48%; left: 48%; border: 1px solid #CCC; }
.ad-gallery .ad-image-wrapper .ad-next { position: absolute; right: 0; top: 0; width: 25%; height: 100%; cursor: pointer; display: block; z-index: 100; filter:alpha(opacity=0); }
.ad-gallery .ad-image-wrapper .ad-prev { position: absolute; left: 0; top: 0; width: 25%; height: 100%; cursor: pointer; display: block; z-index: 100; filter:alpha(opacity=0); }
.ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next { /* Or else IE will hide it */background: url(/Images/non-existing.jpg); }
.ad-gallery .ad-image-wrapper .ad-prev .ad-prev-image, .ad-gallery .ad-image-wrapper .ad-next .ad-next-image { background: url(/Images/ad_prev.png); width: 30px; height: 30px; display: none; position: absolute; top: 47%; left: 0; z-index: 101; }
.ad-gallery .ad-image-wrapper .ad-next .ad-next-image { background: url(/Images/ad_next.png); width: 30px; height: 30px; right: 0; left: auto; }
.ad-gallery .ad-image-wrapper .ad-image { position: absolute; overflow: hidden; top: 0; left: 0; z-index: 9; }
.ad-gallery .ad-image-wrapper .ad-image a img { border: 0; }
.ad-gallery .ad-image-wrapper .ad-image .ad-image-description { position: absolute; bottom: 0px; left: 0px; padding: 7px; text-align: left; width: 100%; z-index: 2; background: url(/Images/opa75.png); color: #000; }
* html .ad-gallery .ad-image-wrapper .ad-image .ad-image-description { background: none;}
.ad-gallery .ad-image-wrapper .ad-image .ad-image-description .ad-description-title { display: block; }
.ad-gallery .ad-controls { height: 20px; }
.ad-gallery .ad-info { float: left; }
.ad-gallery .ad-slideshow-controls { float: right; }
.ad-gallery .ad-slideshow-controls .ad-slideshow-start, .ad-gallery .ad-slideshow-controls .ad-slideshow-stop { padding-left: 5px; cursor: pointer; }
.ad-gallery .ad-slideshow-controls .ad-slideshow-countdown { padding-left: 5px; font-size: 0.9em; }
.ad-gallery .ad-slideshow-running .ad-slideshow-start { cursor: default; font-style: italic; }
.ad-gallery .ad-nav { width: 100%; position: relative; }
.ad-gallery .ad-forward, .ad-gallery .ad-back { position: absolute; top: 0; height: 100%; z-index: 10; }
/* IE 6 doesn't like height: 100% */
* html .ad-gallery .ad-forward, .ad-gallery .ad-back { height: 100px; }
.ad-gallery .ad-back { cursor: pointer; left: -20px; width: 13px; display: block; background: url(/Images/ad_scroll_back.png) 0px 22px no-repeat; }
.ad-gallery .ad-forward { cursor: pointer; display: block; right: -20px; width: 13px; background: url(/Images/ad_scroll_forward.png) 0px 22px no-repeat; }
.ad-gallery .ad-nav .ad-thumbs { overflow: hidden; width: 100%; }
.ad-gallery .ad-thumbs .ad-thumb-list { float: left; width: 9000px !important; list-style: none; }
.ad-gallery .ad-thumbs li { /*float: left;*/padding: 5px; }
.ad-gallery .ad-thumbs li a { display: block; }
.ad-gallery .ad-thumbs li a img { border: 3px solid #CCC; display: block; margin-left: auto; margin-right: auto; }
.ad-gallery .ad-thumbs li a.ad-active img { border: 3px solid #616161; }
/* Can't do display none, since Opera won't load the images then */
.ad-preloads { position: absolute; left: -9000px; top: -9000px; }

/*-----------------------------------

Video Gallery

-------------------------------------*/
.ad-video-gallery { width: 539px;/*520*/ }
.ad-video-gallery, .ad-video-gallery * { margin: 0; padding: 0; }
.ad-video-gallery .ad-image-wrapper { width: 100%; height: 400px; margin-bottom: 10px; position: relative; overflow: hidden; }
.ad-video-gallery .ad-image-wrapper .ad-loader { position: absolute; z-index: 10; top: 48%; left: 48%; border: 1px solid #CCC; }
.ad-video-gallery .ad-image-wrapper .ad-next { position: absolute; right: 0; top: 0; width: 25%; height: 100%; cursor: pointer; display: block; z-index: 100; filter:alpha(opacity=0); }
.ad-video-gallery .ad-image-wrapper .ad-prev { position: absolute; left: 0; top: 0; width: 25%; height: 100%; cursor: pointer; display: block; z-index: 100; filter:alpha(opacity=0); }
.ad-video-gallery .ad-image-wrapper .ad-prev, .ad-video-gallery .ad-image-wrapper .ad-next { /* Or else IE will hide it */background: url(/Images/non-existing.jpg); }
.ad-video-gallery .ad-image-wrapper .ad-prev .ad-prev-image, .ad-video-gallery .ad-image-wrapper .ad-next .ad-next-image { background: url(/Images/ad_prev.png); width: 30px; height: 30px; display: none; position: absolute; top: 47%; left: 0; z-index: 101; }
.ad-video-gallery .ad-image-wrapper .ad-next .ad-next-image { background: url(/Images/ad_next.png); width: 30px; height: 30px; right: 0; left: auto; }
.ad-video-gallery .ad-image-wrapper .ad-image { position: absolute; overflow: hidden; top: 0; left: 0; z-index: 9; }
.ad-video-gallery .ad-image-wrapper .ad-image a img { border: 0; }
.ad-video-gallery .ad-image-wrapper .ad-image .ad-image-description { position: absolute; bottom: 0px; left: 0px; padding: 7px; text-align: left; width: 100%; z-index: 2; background: url(/Images/opa75.png); color: #000; }
* html .ad-video-gallery .ad-image-wrapper .ad-image .ad-image-description { background: none;}
.ad-video-gallery .ad-image-wrapper .ad-image .ad-image-description .ad-description-title { display: block; }
.ad-video-gallery .ad-controls { height: 20px; }
.ad-video-gallery .ad-info { float: left; }
.ad-video-gallery .ad-slideshow-controls { float: right; }
.ad-video-gallery .ad-slideshow-controls .ad-slideshow-start, .ad-video-gallery .ad-slideshow-controls .ad-slideshow-stop { padding-left: 5px; cursor: pointer; }
.ad-video-gallery .ad-slideshow-controls .ad-slideshow-countdown { padding-left: 5px; font-size: 0.9em; }
.ad-video-gallery .ad-slideshow-running .ad-slideshow-start { cursor: default; font-style: italic; }
.ad-video-gallery .ad-nav { width: 100%; position: relative; }
.ad-video-gallery .ad-forward, .ad-video-gallery .ad-back { position: absolute; top: 0; height: 100%; z-index: 10; }
/* IE 6 doesn't like height: 100% */
* html .ad-video-gallery .ad-forward, .ad-video-gallery .ad-back { height: 100px; }
.ad-video-gallery .ad-back { cursor: pointer; left: -20px; width: 13px; display: block; background: url(/Images/ad_scroll_back.png) 0px 22px no-repeat; }
.ad-video-gallery .ad-forward { cursor: pointer; display: block; right: -20px; width: 13px; background: url(/Images/ad_scroll_forward.png) 0px 22px no-repeat; }
.ad-video-gallery .ad-nav .ad-thumbs { overflow: hidden; width: 100%; }
.ad-video-gallery .ad-thumbs .ad-thumb-list { float: left; width: 9000px; list-style: none; }
.ad-video-gallery .ad-thumbs li { /*float: left;*/padding: 5px; }
.ad-video-gallery .ad-thumbs li a { display: block; }
.ad-video-gallery .ad-thumbs li a img { border: 3px solid #CCC; display: block; margin-left: auto; margin-right: auto; }
.ad-video-gallery .ad-thumbs li a.ad-active img { border: 3px solid #616161; }
/*mobile*/
@media screen and (max-width: 640px) {
#gallery { padding: 15px 0 0px 20px !important;width: calc(100% - 20px);margin:0 !important}
#tabs-galleryimage, #tabs-galleryvideo {height: 80px;text-align:center;margin:0 auto;width:100% !important}
#tabs-galleryvideo .ad-back,#tabs-galleryvideo .ad-forward,#tabs-galleryimage .ad-back,#tabs-galleryimage .ad-forward  {top: 15px !important;}
.ad-video-gallery .ad-nav{position:relative !important}
.ad-nav{height:50px !important;width:270px !important}
#ctl00_ctl00_ContentPlaceHolder1_OverallRating1_RateItDiv{padding-left:0 !important}
.ulgallery{height:auto}
#product-image img {max-height: 150px !important; max-width: 320px !important; width:auto}
#ProductImage{height:auto !important}
}
/*New fix for mobile gallery, to set height of the area*/
   .mobile .ulgallery,.mobile .ligallery{position:relative;display:inline-block;width:100%;height:200px}