/** Style Name: Goods pictures show enhanced ~ Stylesheet DEMO URI: http://demo.zcmb.net/gpe/ Description: Goods pictures show enhanced for Zen Cart 1.3x~1.5x, Powered by KIRA Version: 1.0 Author: KIRA Author URI: http://zcbk.org/ Tags: XHTML, CSS, Zen Cart, Templates, Skin, Zen Cart 中文博客, 火星花园, KIRA */ @charset "utf-8"; /* CSS Document */ .clear{clear: both; overflow: hidden; height: 0;} /*.leftDiv{float: left;}*/ .rightDiv{float: right;} .imgBox{text-align: center;} /*Lightbox*/ #jquery-overlay{position: absolute; top: 0; left: 0; z-index: 999990; width: 100%; height: 500px;} #jquery-lightbox{position: absolute; top: 0; left: 0; width: 100%; z-index: 999991; text-align: center; line-height: 0; } #jquery-lightbox a img{border: none;} #lightbox-container-image-box{position: relative; background-color: #fff; width: 250px; height: 250px; margin: -30px auto 0 auto;} #lightbox-container-image{padding: 10px;} #lightbox-loading{position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0;} #lightbox-nav{position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 999992;} #lightbox-container-image-box > #lightbox-nav{left: 0;} #lightbox-nav a{outline: none;} #lightbox-nav-btnPrev, #lightbox-nav-btnNext{width: 49%; height: 100%; zoom: 1; display: block;} #lightbox-nav-btnPrev{left: 0; float: left;} #lightbox-nav-btnNext{right: 0; float: right;} #lightbox-container-image-data-box{font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; padding: 0 10px 0;} #lightbox-container-image-data{padding: 0 10px; color: #666;} #lightbox-container-image-data #lightbox-image-details{width: 70%; float: left; text-align: left;} #lightbox-image-details-caption{font-weight: bold;} #lightbox-image-details-currentNumber{clear: left; padding-bottom: 1.0em;} #lightbox-secNav-btnClose{width: 66px; float: right; padding-bottom: 0.7em;} /*Zoom*/ .jqZoomTitle{z-index:5000; text-align:center; font-size:11px; font-family:Tahoma; height:16px; padding-top:2px; position:absolute; top: 0px; left: 0px; width: 100%; color: #FFF; background: #999;} .jqZoomPup{overflow:hidden; background-color: #FFF; -moz-opacity:0.6; opacity: 0.6; filter: alpha(opacity = 60); z-index:10; border-color:#c4c4c4; border-style: solid; cursor:crosshair;} .jqZoomPup img{border: 0px;} .preload{-moz-opacity:0.8; opacity: 0.8; filter: alpha(opacity = 80); color: #333; font-size: 12px; font-family: Tahoma; text-decoration: none; border: 1px solid #CCC; background-color: white; padding: 8px; text-align:center; background-image: url(../images/gpe/zoomloader.gif); background-repeat: no-repeat; background-position: 43px 30px; width:90px; * width:100px; height:43px; *height:55px; z-index:10; position:absolute; top:3px; left:3px;} .jqZoomWindow{border: 1px solid #999; background-color: #FFF;} /*Scroll*/ #scrollImg ul li a{ display:block;} #scrollImg img{border:1px solid #C0C0C0; text-align: center; width: 56px; height: 56px; padding:0; margin: 0 0 0 8px;} #scrollImg img:hover{border:1px solid #6A6A6A;} .noButton{padding-left: 3px;} .noButton li{margin: 0 3px;} #mainImg{text-align: center; margin:0 0 10px 0; padding:0; width:100%;} #mainImg #jqzoom{ width:100% !important; } #mainImg #jqzoom img{ width:100% !important; height:auto !important;} .muzoons { background:url("../images/zoom-icon.png") no-repeat left top; bottom: 20px; display: block; height: 28px; position: absolute; right: 20px; width: 29px; } #scrollImg{ float:left;} /*scroll level*/ .scrollLevel #imgPrev,.scrollLevel #imgNext{width: 14px; height: 38px; padding: 0; margin: 12px 0 0 0; border: none; display:block;} .scrollLevel #imgPrev{background:url(../images/gpe/arrowLevel.png) no-repeat -14px 0px; float:left;} .scrollLevel #imgNext{background:url(../images/gpe/arrowLevel.png) no-repeat -42px 0px; float:right;} .scrollLevel #imgPrev:hover{background:url(../images/gpe/arrowLevel.png) no-repeat -28px 0px;} .scrollLevel #imgNext:hover{background:url(../images/gpe/arrowLevel.png) no-repeat 0px 0px;} /*scroll vertical*/ .scrollVertical #imgPrev,.scrollVertical #imgNext{width: 38px; height: 14px; padding: 0; margin: 0 auto; border: none; display: block;} .scrollVertical #imgPrev{background:url(../images/gpe/arrowVertical.png) no-repeat 0px 0px; margin-bottom: 3px;} .scrollVertical #imgNext{background:url(../images/gpe/arrowVertical.png) no-repeat 0px -28px;} .scrollVertical #imgPrev:hover{background:url(../images/gpe/arrowVertical.png) no-repeat 0px -14px;} .scrollVertical #imgNext:hover{background:url(../images/gpe/arrowVertical.png) no-repeat 0px -42px;} #productMainImage{ padding:20px;} #mu_info_left{ float:left; width:34%;} #smallImg{ width:300px !important; margin:0 auto;} @media (max-width: 979px) and (min-width: 320px){ #productMainImage{ padding:10px 0 0 0;} #mu_info_left{ padding:0; float:none; width:100%;} /*#mainImg #jqzoom{ height:auto !important;}*/ #lightbox-nav-btnPrev{ background: url("../images/gpe/lightboxPrev.gif") no-repeat left 15% !important;} #lightbox-nav-btnNext{ background: url("../images/gpe/lightboxNext.gif") no-repeat right 15% !important;} #lightbox-container-image-box{ width:100% !important; height:auto !important;} #lightbox-image-details-caption{ display:none !important;} #lightbox-nav-btnPrev, #lightbox-nav-btnNext{ height:100% !important;} /*#scrollImg, #scrollImg ul{ height:auto; width:100% !important;} .scrollLevel #imgPrev,.scrollLevel #imgNext{ display:none;}*/ #jquery-overlay{display:none !important;} #jquery-lightbox{display:none !important;} } @media (max-width: 979px) and (min-width: 480px){ #mu_info_left{ float:left; width: calc(50% - 20px);} .mu-info-rt-boxs{ float:right; width:50%;} #scrollImg{ margin-left:0;} #mu_info_left{ padding-bottom:20px;} } @media only screen and (min-width: 980px){ #mainImg #jqzoom img { width: auto !important; height: 293px !important; } } @media (min-width: 1200px){ #mainImg #jqzoom img { width: auto !important; height: 368px !important; } }