/* CSS Document */ * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } *:before, *:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } select{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .version{version:2020051801;} html{width:100%;height:100%;left:0;top:0;margin:0;padding:0;position:fixed;} body{position:fixed;overflow:hidden!important;width:100%;height:100%;margin:0;padding:0!important;-ms-transform:translate(0);border:0;left:0;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;} .tmpContainer{position:fixed;width:100%;height:100%;bottom: 0;left:0;display:block;overflow:hidden;z-index:-1;} .bookContainer{position:absolute;width:100%;height:100%;z-index:2;top:0;left:0;display:block;overflow:hidden;} /*//book object*/ p{margin:0;padding:0;} input{outline:none;} textarea{outline:none;} ul,ol,li{list-style-type: none;margin:0;padding: 0px;} h1, h1, h2, h3, h4, h5, h6{font-weight:normal;} i,u{font-style:normal;text-decoration:none;} .book{ position : absolute; z-index : 2; cursor : default; } .mask { cursor : default; position : absolute; right:50%; left:auto; transform-origin : 100% 50%; -webkit-transform-origin : 100% 50%; -moz-transform-origin : 100% 50%; -ms-transform-origin : 100% 50%; overflow:hidden; -webkit-backface-visibility : hidden; -moz-backface-visibility : hidden; -ms-backface-visibility : hidden; backface-visibility : hidden; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .single-book-mask { cursor : default; position : absolute; right:100%; left:auto; transform-origin : 100% 50%; -webkit-transform-origin : 100% 50%; -moz-transform-origin : 100% 50%; -ms-transform-origin : 100% 50%; overflow:hidden; -webkit-backface-visibility : hidden; -moz-backface-visibility : hidden; -ms-backface-visibility : hidden; backface-visibility : hidden; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .single-book-right-mask { cursor : default; position : absolute; right:0; left:auto; transform-origin : 100% 50%; -webkit-transform-origin : 100% 50%; -moz-transform-origin : 100% 50%; -ms-transform-origin : 100% 50%; overflow:hidden; -webkit-backface-visibility : hidden; -moz-backface-visibility : hidden; -ms-backface-visibility : hidden; backface-visibility : hidden; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .right-single-mask-side{ cursor : default; position:absolute; left:0; overflow:hidden; background-repeat:no-repeat; background-position:center; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .left-single-mask-side{ cursor : default; position:absolute; right:0; overflow:hidden; background-repeat:no-repeat; background-position:center; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .right-mask-side{ cursor : default; position:absolute; left:50%; overflow:hidden; background-repeat:no-repeat; background-position:center; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .left-mask-side{ cursor : default; position:absolute; right:50%; overflow:hidden; background-repeat:no-repeat; background-position:center; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .right-flip-side{ cursor : default; position:absolute; right:0; overflow:hidden; background-repeat:no-repeat; background-position:center; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .right-side{ cursor : default; position:absolute; right:0; overflow:hidden; background-repeat:no-repeat; background-position:center; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .left-side{ cursor : default; position:absolute; left:0; overflow:hidden; background-repeat:no-repeat; background-position:center; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .double.left-side{ left:auto; right:50%; } .double.right-side{ right:auto; left:50%; } .right-mask-side .right-side{ left:0; } .left-mask-side .left-side{ right:0; left:auto; } .right-single-mask-side .right-side{ left:0; } .left-single-mask-side .left-side{ right:0; left:auto; } .center-side{ cursor : default; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; overflow:hidden; background-repeat:no-repeat; background-position:center; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .flip-side{ cursor : default; position:absolute; left:100%; overflow:hidden; background-repeat:no-repeat; background-position:center; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .flip-vertical-side{ cursor : default; position:absolute; /*background-color:white;*/ top:100%; overflow:hidden; background-repeat:no-repeat; background-position:center; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .flip-hard-left-side{ cursor : default; position:absolute; background-color:white; /*overflow:hidden;*/ left:auto; right:auto; background-repeat:no-repeat; background-position:center; -webkit-perspective-origin : right center; -moz-perspective-origin : right center; -ms-perspective-origin : right center; perspective-origin : right center; -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -ms-transform-style : preserve-3d; transform-style : preserve-3d; transform-origin : 100% 50%; -webkit-transform-origin : 100% 50%; -moz-transform-origin : 100% 50%; -ms-transform-origin : 100% 50%; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .flip-hard-right-side{ cursor : default; position:absolute; background-color:white; /*overflow:hidden;*/ right:0px; left:auto; background-repeat:no-repeat; background-position:center; -webkit-perspective-origin : left center; -moz-perspective-origin : left center; -ms-perspective-origin : left center; perspective-origin : left center; -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -ms-transform-style : preserve-3d; transform-style : preserve-3d; transform-origin : 0% 50%; -webkit-transform-origin : 0% 50%; -moz-transform-origin : 0% 50%; -ms-transform-origin : 0% 50%; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .flip-hard-up-side{ cursor : default; position:absolute; background-color:white; /*overflow:hidden;*/ top:auto; bottom:auto; background-repeat:no-repeat; background-position:center; -webkit-perspective-origin : bottom center; -moz-perspective-origin : bottom center; -ms-perspective-origin : bottom center; perspective-origin : bottom center; -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -ms-transform-style : preserve-3d; transform-style : preserve-3d; transform-origin : 50% 100%; -webkit-transform-origin : 50% 100%; -moz-transform-origin : 50% 100%; -ms-transform-origin : 50% 100%; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .flip-hard-down-side{ cursor : default; position:absolute; background-color:white; /*overflow:hidden;*/ bottom:0px; top:auto; background-repeat:no-repeat; background-position:center; -webkit-perspective-origin : top center; -moz-perspective-origin : top center; -ms-perspective-origin : top center; perspective-origin : top center; -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -ms-transform-style : preserve-3d; transform-style : preserve-3d; transform-origin : 50% 0%; -webkit-transform-origin : 50% 0%; -moz-transform-origin : 50% 0%; -ms-transform-origin : 50% 0%; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .flip-thick{ height : 100%; width:6px; overflow : hidden; visibility : hidden; z-index : 20; position : absolute; left:-6px; background:#dadada; box-shadow: 0px 0px 2px #666666 inset; } .flip-vertical-thick{ width : 100%; height:6px; overflow : hidden; visibility : hidden; z-index : 20; position : absolute; top:-6px; background:#dadada; box-shadow: 0px 0px 2px #666666 inset; } .flip-hard-left-side .flip-thick{ left:-6px; transform-origin : 100% 50%; -webkit-transform-origin : 100% 50%; -moz-transform-origin : 100% 50%; -ms-transform-origin : 100% 50%; } .flip-hard-right-side .flip-thick{ left:100%; transform-origin : 0% 50%; -webkit-transform-origin : 0% 50%; -moz-transform-origin : 0% 50%; -ms-transform-origin : 0% 50%; } .flip-hard-up-side .flip-vertical-thick{ top:-6px; transform-origin : 50% 100%; -webkit-transform-origin : 50% 100%; -moz-transform-origin : 50% 100%; -ms-transform-origin : 50% 100%; } .flip-hard-down-side .flip-vertical-thick{ top:100%; transform-origin : 50% 0%; -webkit-transform-origin : 50% 0%; -moz-transform-origin : 50% 0%; -ms-transform-origin : 50% 0%; } .vertical-mask { cursor : default; position : absolute; bottom:50%; top:auto; /*background:blue;*/ /*opacity:0.5;*/ transform-origin : 50% 100%; -webkit-transform-origin : 50% 100%; -moz-transform-origin : 50% 100%; -ms-transform-origin : 50% 100%; /*border:2px solid #ff0000;*/ overflow:hidden; -webkit-backface-visibility : hidden; -moz-backface-visibility : hidden; -ms-backface-visibility : hidden; backface-visibility : hidden; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .single-book-vertical-mask { cursor : default; position : absolute; bottom:100%; top:auto; /*background:blue;*/ /*opacity:0.5;*/ transform-origin : 50% 100%; -webkit-transform-origin : 50% 100%; -moz-transform-origin : 50% 100%; -ms-transform-origin : 50% 100%; /*border:2px solid #ff0000;*/ overflow:hidden; -webkit-backface-visibility : hidden; -moz-backface-visibility : hidden; -ms-backface-visibility : hidden; backface-visibility : hidden; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .single-book-right-vertical-mask { cursor : default; position : absolute; bottom:0; top:auto; /*background:blue;*/ /*opacity:0.5;*/ transform-origin : 50% 100%; -webkit-transform-origin : 50% 100%; -moz-transform-origin : 50% 100%; -ms-transform-origin : 50% 100%; /*border:2px solid #ff0000;*/ overflow:hidden; -webkit-backface-visibility : hidden; -moz-backface-visibility : hidden; -ms-backface-visibility : hidden; backface-visibility : hidden; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .down-single-mask-side{ cursor : default; position:absolute; /*background-color:white;*/ top:0; overflow:hidden; background-repeat:no-repeat; background-position:center; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .up-single-mask-side{ cursor : default; position:absolute; /*background-color:white;*/ bottom:0; overflow:hidden; background-repeat:no-repeat; background-position:center; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .down-mask-side{ cursor : default; position:absolute; /*background-color:white;*/ top:50%; overflow:hidden; background-repeat:no-repeat; background-position:center; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .up-mask-side{ cursor : default; position:absolute; /*background-color:white;*/ bottom:50%; overflow:hidden; background-repeat:no-repeat; background-position:center; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .down-flip-side{ cursor : default; position:absolute; /*background-color:white;*/ bottom:0; overflow:hidden; background-repeat:no-repeat; background-position:center; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .down-side{ cursor : default; position:absolute; /*background-color:white;*/ bottom:0; overflow:hidden; background-repeat:no-repeat; background-position:center; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .up-side{ cursor : default; position:absolute; /*background-color:white;*/ top:0; overflow:hidden; background-repeat:no-repeat; background-position:center; -webkit-transform : translate3d(0,0,0) rotate(0); -moz-transform : translate3d(0,0,0) rotate(0); -ms-transform : translate3d(0,0,0) rotate(0); -o-transform : translate3d(0,0,0) rotate(0); transform : translate3d(0,0,0) rotate(0); } .double.up-side{ top:auto; bottom:50%; } .double.down-side{ bottom:auto; top:50%; } .down-mask-side .down-side{ top:0; } .up-mask-side .up-side{ bottom:0; top:auto; } .down-single-mask-side .down-side{ top:0; } .up-single-mask-side .up-side{ bottom:0; top:auto; } .side-content{ position:absolute; left:0; top:0; width:100%; height:100%; } .attachments-content{ width:100%; height:100%; position:absolute; top:0; left:0; z-index:4; } .side-highlight{ width:100%; height:100%; position:absolute; left:0; top:0; opacity:0.8; z-index:1; } .thickness{position:absolute;height:100%;perspective:500;-webkit-perspective:500;-moz-perspective:500;-ms-perspective:500;cursor:pointer;} .thickness .top_part{position:relative;height:50px;width:100%;} .thickness .center_part{position:relative;height:auto;width:100%;} .thickness .bottom_part{position:relative;height:50px;width:100%;} .thickness .part{background-repeat:no-repeat;} .left_thickness .top_part{background:url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/thickness_left.png);background-position:right 0;} .left_thickness .center_part{background:url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/thickness_left.png);background-position:right -50px;} .left_thickness .bottom_part{background:url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/thickness_left.png);background-position:right bottom;} .right_thickness .top_part{background:url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/thickness.png);background-position:left 0;} .right_thickness .center_part{background:url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/thickness.png);background-position:left -50px;} .right_thickness .bottom_part{background:url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/thickness.png);background-position:left bottom;} .left_thickness{ -webkit-transform-origin : 100% 0%; -moz-transform-origin : 100% 0%; -ms-transform-origin : 100% 0%; -o-transform-origin : 100% 0%; transform-origin : 100% 0%; } .right_thickness{ -webkit-transform-origin : 0% 0%; -moz-transform-origin : 0% 0%; -ms-transform-origin : 0% 0%; -o-transform-origin : 0% 0%; transform-origin : 0% 0%; } .thickness .shadow{ position:absolute; z-index:-1; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; /* background-color: #CCCCCC; */ top:0; left:0; width:100%; height:100%; } .left_thickness .shadow{ -webkit-box-shadow : -3px 0px 6px rgba(125, 125, 125, 0.7); -moz-box-shadow : -3px 0px 6px rgba(125, 125, 125, 0.7); -ms-box-shadow : -3px 0px 6px rgba(125, 125, 125, 0.7); box-shadow : -3px 0px 6px rgba(125, 125, 125, 0.7); -webkit-transform-origin : 100% 0%; -moz-transform-origin : 100% 0%; -ms-transform-origin : 100% 0%; -o-transform-origin : 100% 0%; transform-origin : 100% 0%; transform : rotateY(-20deg) scaleX(1) scaleZ(1); -webkit-transform : rotateY(-20deg) scaleX(1) scaleZ(1); -moz-transform : rotateY(-20deg) scaleX(1) scaleZ(1); -ms-transform : rotateY(-20deg) scaleX(1) scaleZ(1); margin-left:1px; } .right_thickness .shadow{ margin-left:-1px; -webkit-box-shadow : 3px 0px 6px rgba(125, 125, 125, 0.7); -moz-box-shadow : 3px 0px 6px rgba(125, 125, 125, 0.7); -ms-box-shadow : 3px 0px 6px rgba(125, 125, 125, 0.7); box-shadow : 3px 0px 6px rgba(125, 125, 125, 0.7); -webkit-transform-origin : 0% 0%; -moz-transform-origin : 0% 0%; -ms-transform-origin : 0% 0%; -o-transform-origin : 0% 0%; transform-origin : 0% 0%; transform : rotateY(20deg) scaleX(1) scaleZ(1); -webkit-transform : rotateY(20deg) scaleX(1) scaleZ(1); -moz-transform : rotateY(20deg) scaleX(1) scaleZ(1); -ms-transform : rotateY(20deg) scaleX(1) scaleZ(1); } .bookShadow { position:absolute; top:0px; -webkit-box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); -moz-box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); -o-box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); -ms-box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); } .bookShadow-vertical { position:absolute; left:0px; -webkit-box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); -moz-box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); -o-box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); -ms-box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); } @media all and (max-width: 400px){ .bookShadow { position:absolute; top:0px; -webkit-box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); -moz-box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); -o-box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); -ms-box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); } } @media all and (max-height:400px) { .bookShadow { position:absolute; top:0px; -webkit-box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); -moz-box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); -o-box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); -ms-box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); box-shadow : 0 0 5px rgba(40, 40, 40, 0.7); } } .singleWidth { width : 50%; height : 100%; } .doubleWidth { width : 100%; height : 100%; } .singleHeight { width : 100%; height : 50%; } .doubleHeight { width : 100%; height : 100%; } .zoomBook { position: absolute; } .zoomPage { position: absolute; top: 0px; left: 0px; width: 800px; height: 600px; } .zoomSide { position: absolute; top: 0px; left: 0px; width: 800px; height: 600px; } .bookStage { top: 0px; left: 0px; display: block; overflow: hidden; /**/ } .image { width: 640px; height: 920px; top: 1px; left: 1px; /*-webkit-transform-origin:0% 0%; -webkit-transform:scale3d(1,1,1); */ } /**content of side (image or swf)*/ .sideContent { position: absolute; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin : 0 % 0 %; -o-transform-origin : 0 % 0 %; background-color : white; } .boxShadow { -webkit-box-shadow : 0 0 3px rgba(40, 40, 40, 0.2); -moz-box-shadow : 0 0 3px rgba(40, 40, 40, 0.2); -ms-box-shadow : 0 0 3px rgba(40, 40, 40, 0.2); box-shadow : 0 0 3px rgba(40, 40, 40, 0.2); } .miniFullscreen { z-index:1000; height:30px; line-height : 30px; background:#333333; border-radius:5px; left : 50%; transform:translate(-50%,0); position : absolute; color : #ffffff; vertical-align : middle; text-align : center; cursor : pointer; font-family : "Tahoma","sans-serif","Arial"; font-size:12px; padding : 3px 7px; opacity : 0.5; white-space : nowrap; } .miniFullscreen:hover{ opacity:0.7; } /***/ .sideBackground { position: inherit; top: 0px; left: 0px; width: 320px; height: 460px; } .kong { position: absolute; top: 0px; left: 0px; z-index:1; } /**shadow between sides*/ /*left shadow*/ .catalogLeftShadow { position: absolute; top: 0px; right: 0px; height: 100%; z-index:5; pointer-events:none; -webkit-transform:translate3d(0,0,0); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, EndColorStr='#cc3f3f3f', StartColorStr='#007b7b7b'); background-image: linear-gradient(right, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); background-image: -o-linear-gradient(right, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); background-image: -moz-linear-gradient(right, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); background-image: -webkit-linear-gradient(right, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); background-image: -ms-linear-gradient(right, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); /*background-image: -webkit-gradient(linear, right top, left top, color-stop(0, rgba(60, 60, 60, 0.3)), color-stop(0.23, rgba(250, 250, 250, 0.05)), color-stop(0.28, rgba(255, 255, 255, 0.05)), color-stop(0.34, rgba(250, 250, 250, 0.05)), color-stop(0.54, rgba(50, 50, 50, 0.1)), color-stop(1, rgba(200, 200, 200, 0)));*/ } .catalogRightShadow { position: absolute; top: 0px; left: 0px; height: 100%; z-index:5; pointer-events:none; -webkit-transform:translate3d(0,0,0); background-image: linear-gradient(left, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); background-image: -webkit-linear-gradient(left, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); background-image: -moz-linear-gradient(left, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); background-image: -o-linear-gradient(left, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); background-image: -ms-linear-gradient(left, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, EndColorStr='#00C8C8C8', StartColorStr='#CC5D5D5D'); } .catalogUpShadow { position: absolute; left: 0px; bottom: 0px; width: 100%; z-index:5; pointer-events:none; -webkit-transform:translate3d(0,0,0); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, EndColorStr='#cc3f3f3f', StartColorStr='#007b7b7b'); background-image: linear-gradient(bottom, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); background-image: -o-linear-gradient(bottom, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); background-image: -moz-linear-gradient(bottom, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); background-image: -webkit-linear-gradient(bottom, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); background-image: -ms-linear-gradient(bottom, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); /*background-image: -webkit-gradient(linear, right top, left top, color-stop(0, rgba(60, 60, 60, 0.3)), color-stop(0.23, rgba(250, 250, 250, 0.05)), color-stop(0.28, rgba(255, 255, 255, 0.05)), color-stop(0.34, rgba(250, 250, 250, 0.05)), color-stop(0.54, rgba(50, 50, 50, 0.1)), color-stop(1, rgba(200, 200, 200, 0)));*/ } .catalogDownShadow { position: absolute; left: 0px; top: 0px; width: 100%; z-index:5; pointer-events:none; -webkit-transform:translate3d(0,0,0); background-image: linear-gradient(top, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); background-image: -webkit-linear-gradient(top, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); background-image: -moz-linear-gradient(top, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); background-image: -o-linear-gradient(top, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); background-image: -ms-linear-gradient(top, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, EndColorStr='#00C8C8C8', StartColorStr='#CC5D5D5D'); } /*catalog guid toolbar*/ .catalog_simple_bar{ position:absolute; height:38px; top:5px; left:0; right:0; margin:auto; border-radius : 3px; z-index : 1000; background : #f6f6f6; -webkit-box-shadow:0 0 5px rgba(40, 40, 40, 0.5); -moz-box-shadow:0 0 5px rgba(40, 40, 40, 0.5); -o-box-shadow:0 0 5px rgba(40, 40, 40, 0.5); -ms-box-shadow:0 0 5px rgba(40, 40, 40, 0.5); box-shadow:0 0 5px rgba(40, 40, 40, 0.5); } .catalog_simple_bar .button:hover{opacity:0.8;} .catalog_simple_bar .button{position:absolute;cursor:pointer;top:0;width:38px;height:38px;} .catalog_simple_bar .button div {margin-left: 1px;margin-top:1px;width:35px;height:35px;} .catalog_simple_bar .page_num{position:absolute;font-size:16px;color:#bababa;height:38px;line-height:38px;vertical-align:middle;text-align:center;font-family:arial,tahoma,sans-serif;} .catalog_logo{position:absolute;cursor:pointer;z-index:95;} /*catalog guid toolbar css end*/ .leftCoverShadow { position: absolute; top: 0px; right: 0px; height: 100%; width:4px background-image: linear-gradient(left, rgba(200,200,200,0), rgba(200,200,200,1)); background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(200, 200, 200, 0)), to(rgba(200,200,200,1))); background-image: -moz-linear-gradient(left, rgba(200,200,200,0), rgba(200,200,200,1)); background-image: -o-linear-gradient(left, rgba(200,200,200,0), rgba(200,200,200,1)); background-image: -ms-linear-gradient(left, rgba(200,200,200,0), rgba(200,200,200,1)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CC5D5D5D', EndColorStr='#00C8C8C8'); } .rightCoverShadow { position: absolute; top: 0px; left: 0px; height: 100%; width : 4px; background-image: linear-gradient(left, rgba(200,200,200,1), rgba(200,200,200,0)); background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(200,200,200,1)), to(rgba(200,200,200,0))); background-image: -moz-linear-gradient(left, rgba(200,200,200,1), rgba(200,200,200,0)); background-image: -o-linear-gradient(left, rgba(200,200,200,1), rgba(200,200,200,0)); background-image: -ms-linear-gradient(left, rgba(200,200,200,1), rgba(200,200,200,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CC5D5D5D', EndColorStr='#00C8C8C8'); } .flip-shadowB { /*background-image : -webkit-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0)); background-image : -moz-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0)); background-image : -o-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0)); background-image : -ms-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0)); background-image : linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0));*/ background-image : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAYAAACqNX6+AAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+nhxg7wAAAMVJREFUeJzt0TsOwyAQQEEbfP8T51clhYNTpJrijbRCbAdv37btue/7c4zxOJ/vOd/HGI855311X53vOd//neM4bovdfc652n/t/pmrt6zOqz/69bef/RZKQTAFwRQEUxBMQTAFwRQEUxBMQTAFwRQEUxBMQTAFwRQEUxBMQTAFwRQEUxBMQTAFwRQEUxBMQTAFwRQEUxBMQTAFwRQEUxBMQTAFwRQEUxBMQTAFwRQEUxBMQTAFwRQEUxBMQTAFwRQEUxDMCxXMZl/4RH3JAAAAAElFTkSuQmCC"); background-repeat : repeat-y; /*filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, EndColorStr='#223f3f3f', StartColorStr='#aa7b7b7b');*/ overflow : hidden; width : 100px; opacity : 0.2; z-index : 20; position : absolute; visibility : hidden; transform-origin : 0% 50%; -webkit-transform-origin : 0% 50%; -moz-transform-origin : 0% 50%; -ms-transform-origin : 0% 50%; -webkit-transform : translate3d(0,0,0) scaleX(1) rotate(0); -moz-transform : translate3d(0,0,0) scaleX(1) rotate(0); -ms-transform : translate3d(0,0,0) scaleX(1) rotate(0); -o-transform : translate3d(0,0,0) scaleX(1) rotate(0); transform : translate3d(0,0,0) scaleX(1) rotate(0); } .flip-topshadow { /*background-image : -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.5), rgba(0,0,0,1), rgba(0,0,0,0)); background-image : -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.5), rgba(0,0,0,1), rgba(0,0,0,0)); background-image : -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.5), rgba(0,0,0,1), rgba(0,0,0,0)); background-image : -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.5), rgba(0,0,0,1), rgba(0,0,0,0)); background-image : linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.5), rgba(0,0,0,1), rgba(0,0,0,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, EndColorStr='#993f3f3f', StartColorStr='#557b7b7b');*/ background-image : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAAAyCAYAAABI6WXHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFLaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pgo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0MiA3OS4xNjA5MjQsIDIwMTcvMDcvMTMtMDE6MDY6MzkgICAgICAgICI+CiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiLz4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InIiPz6eHGDvAAABBUlEQVR4Xu3RywrCMBQG4dQ2vv/T9i54UnKkFNzPYj74TRWNixmO43i17fs+xq5z27ZxXdcpdp3Lsoyxdv42z3Nbzec4a579O9cZv6/9rhr3TnH/b/G/9TzPsZQyxertbHvfzufz87P8Ta7dk2v354bYP5++M3b07bGtb71t6Ztv5/M53z+Xd7Q78/7r/17xIghjgBgDxBggxgAxBogxQIwBYgwQY4AYA8QYIMYAMQaIMUCMAWIMEGOAGAPEGCDGADEGiDFAjAFiDBBjgBgDxBggxgAxBogxQIwBYgwQY4AYA8QYIMYAMQaIMUCMAWIMEGOAGAPEGCDGADEGiDFAjAFiDIxSvrXsgWjB4GEcAAAAAElFTkSuQmCC"); background-repeat : repeat-y; width : 100px; overflow : hidden; visibility : hidden; z-index : 20; position : absolute; opacity : 0.2; -webkit-transform : translate3d(0,0,0) scaleX(1) rotate(0); -moz-transform : translate3d(0,0,0) scaleX(1) rotate(0); -ms-transform : translate3d(0,0,0) scaleX(1) rotate(0); -o-transform : translate3d(0,0,0) scaleX(1) rotate(0); transform : translate3d(0,0,0) scaleX(1) rotate(0); } .flip-vertical-shadowB { /*background-image : -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0)); background-image : -moz-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0)); background-image : -o-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0)); background-image : -ms-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0)); background-image : linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, EndColorStr='#223f3f3f', StartColorStr='#aa7b7b7b');*/ background-image : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAABjCAYAAADZ7VPjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFLaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pgo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0MiA3OS4xNjA5MjQsIDIwMTcvMDcvMTMtMDE6MDY6MzkgICAgICAgICI+CiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiLz4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InIiPz6eHGDvAAACmElEQVR4Xt3GUWcqAAAF4B3LMinJRDKRmJGIkREjxogRERERET3EiOjhMmLEHmKMGDFGRIyIETERkZgxMZPIZDbJpsm9D+dPnPs9ffhnvfEfwObm5i8vDQaDYcVLw9bW1g8vDUaj8ZuXhu3t7SUvDSaTacFLg9ls/uKlwWKxfPLSYLVaP3hpsNlsc14adnZ23nlpsNvtM14aHA7HlJcGp9M54aVhd3f3jZcGl8v1ykuD2+0e89Lg8XheeGnY29t75qVhf3//iZcGr9c74qXB5/MNeWnw+/0DXhoODg76vDQEAoEeLw2Hh4ePvDQEg8EuLw1HR0cdXhpCodADLw3Hx8dtXhpOTk5avDSEw+F7XhpOT0+bvDREIpEGLw3RaLTOS0MsFrvjpSEej9/y0pBIJGq8NCSTyRteGlKpVJWXhnQ6fc1LQyaTueKlIZvNVnhpyOVyl7w0nJ2dlXlpyOfzF7w0FAqFEi8NxWLxnJeGP//w0nB+fl7kpaFUKhV4abi4uMjz0lAul894abi8vMzx0lCpVLK8NFxdXWV4abi+vk7z0lCtVlO8NNzc3CR5aajVagleGm5vb+O8NNzd3cV4aajX61FeGhqNRoSXhmazecpLw/39fZiXhlardcJLQ7vdPual4eHhIcRLQ6fTOeKlodvtBnlpeHx8POSlodfrBXhp6Pf7B7w0DAYDPy8Nw+HQx0vDaDTy8tLw9PS0z0vD8/PzHi8NLy8vHl4axuOxm5eG19dXFy8Nb29vu7w0TCYTJy8N0+nUwUvDbDaz89Lw/v6+w0vDfD638dLw8fFh5aXh8/PTwkvD19eXmZeGxWJh4qVhuVxu89Lw/f1t5KXh5+dni5eG1Wpl4KXh9/d3k5eG9XoNXtjGxl8L/sWgOuERLQAAAABJRU5ErkJggg=="); background-repeat : repeat-x; overflow : hidden; height : 100px; opacity : 0.2; z-index : 20; position : absolute; visibility : hidden; transform-origin : 50% 0%; -webkit-transform-origin : 50% 0%; -moz-transform-origin : 50% 0%; -ms-transform-origin : 50% 0%; -webkit-transform : translate3d(0,0,0) scaleY(1) rotate(0); -moz-transform : translate3d(0,0,0) scaleY(1) rotate(0); -ms-transform : translate3d(0,0,0) scaleY(1) rotate(0); -o-transform : translate3d(0,0,0) scaleY(1) rotate(0); transform : translate3d(0,0,0) scaleY(1) rotate(0); } .flip-vertical-topshadow { /*background-image : -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.5), rgba(0,0,0,1), rgba(0,0,0,0)); background-image : -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.5), rgba(0,0,0,1), rgba(0,0,0,0)); background-image : -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.5), rgba(0,0,0,1), rgba(0,0,0,0)); background-image : -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.5), rgba(0,0,0,1), rgba(0,0,0,0)); background-image : linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.5), rgba(0,0,0,1), rgba(0,0,0,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, EndColorStr='#993f3f3f', StartColorStr='#557b7b7b');*/ background-image : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAABjCAYAAADZ7VPjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFLaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pgo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0MiA3OS4xNjA5MjQsIDIwMTcvMDcvMTMtMDE6MDY6MzkgICAgICAgICI+CiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiLz4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InIiPz6eHGDvAAACU0lEQVR4Xu3cv2tTYRjF8TwSJbYQkAgaChIKJTgYUDAg1ICDGRykdDCgg4GCEhzEODhEHCQoCKFDIXTRDC5ZOgSnDC0ECpJFDDjEpRGHVDAoQTFIRM3hPH9Ez0s/8MJ3PdO9cH/YdDo9EgmATSaTqLc0G4/Hx7yl2Wg0Ou4tzYbD4by3NBsMBnFvadbv9094S7Ner3fSW5p1u91T3tKs0+kseEuzdrt9xluatVqtRW9p1mw2l7ylWaPROOstzer1+jlvaVar1c57S7NqtXrRW5pVKpVL3tKsXC5f9pZmpVLpirc0KxaLV72lWaFQuOYtza7PeEuzfD6/6i3NcrncDW9pls1mb3pLs0wmc9tbmqXT6TVvaZZKpe56S7NkMnnPW5olEon73tIsHo8/9JZmsVjskbc0i0ajFW9pNjtPmNow5ClTG4Y8Y2rDkBdMbRiyztSGIRtMbRiyydSGIS+Z2jDkNVMbhjSZ2jBki6kNQ94wtWFIm6kNQ3aY2jBkl6kNQ7pMbRjyjqkNQz4wtWHIR6Y2DNljasOQz0xtGLLP1IYhX5naMOQ7UxuG/GBqw5BfTG0Y8pupDUP+MLVhyF+mNgz5x9QWxLcjcDjkoDkcctAEMySoC2Iwtyg/mdow5BtTG4Z8YWrDkE9MbRjSZ2rDkPdMbRjylqkNQ7aZ2jAkmEdvwTzVfcXUhiHBvIvynKkNQx4ztWHIA6Y2DLnD1IYht5jaMGSFqQ1D8kxtGLLM1IYhF5jaMCSM79lnJ8XUhiGnmdowJIw/1czOHFMbhhxlKotE/gMzamDZt0bnMAAAAABJRU5ErkJggg=="); background-repeat : repeat-x; height : 100px; overflow : hidden; visibility : hidden; z-index : 20; position : absolute; opacity : 0.2; -webkit-transform : translate3d(0,0,0) scaleY(1) rotate(0); -moz-transform : translate3d(0,0,0) scaleY(1) rotate(0); -ms-transform : translate3d(0,0,0) scaleY(1) rotate(0); -o-transform : translate3d(0,0,0) scaleY(1) rotate(0); transform : translate3d(0,0,0) scaleY(1) rotate(0); } .emboss-left { background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1)); background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1)); background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1)); pointer-events: none; } .emboss-right { background-image: -o-linear-gradient(left, rgba(0,0,0,.5), rgba(0,0,0,0)); background-image: -ms-linear-gradient(left, rgba(0,0,0,.5), rgba(0,0,0,0)); background-image: -moz-linear-gradient(left, rgba(0,0,0,.5), rgba(0,0,0,0)); background-image: -webkit-linear-gradient(left, rgba(0,0,0,.5), rgba(0,0,0,0)); pointer-events: none; } .edgeShadow { background-image: linear-gradient(left, rgba(50, 50, 50, 0.5), rgba(230, 230, 230, 0)); background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(50, 50, 50, 0.5)), to(rgba(230, 230, 230, 0))); background-image: -moz-linear-gradient(left, rgba(50, 50, 50, 0.5), rgba(230, 230, 230, 0)); background-image: -o-linear-gradient(left, rgba(50, 50, 50, 0.5), rgba(230, 230, 230, 0)); background-image: -ms-linear-gradient(left, rgba(50, 50, 50, 0.5), rgba(230, 230, 230, 0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, EndColorStr='#007b7b7b', StartColorStr='#cc3f3f3f'); width : 50%; height : 100%; z-index : 1000; position:absolute; left : -35%; top : -30%; pointer-events:none; -webkit-transform : rotate(30deg); -moz-transform : rotate(30deg); -ms-transform : rotate(30deg); -o-transform : rotate(30deg); transform : rotate(30deg); } .grayShadow { width:100%; height:100%; position:absolute; z-index:10000; overflow:hidden; display:none; pointer-events:none; } .leftPaperCoil { position: absolute; right: 0px; /*left: auto;*/ width: 20px; height: 100%; background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/leftCoil.png); background-repeat: repeat-y; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; -webkit-transform: translate3d(0px,0px,0px) scale(1); -moz-transform: translate3d(0px,0px,0px) scale(1); -ms-transform: translate3d(0px,0px,0px) scale(1); -o-transform: translate(0px,0px) scale(1); } .rightPaperCoil { position: absolute; left: 0px; /*right: auto;*/ width: 21px; height: 100%; background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/rightCoil.png); background-repeat: repeat-y; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; -webkit-transform: translate3d(0px,0px,0px) scale(1); -moz-transform: translate3d(0px,0px,0px) scale(1); -ms-transform: translate3d(0px,0px,0px) scale(1); -o-transform: translate(0px,0px) scale(1); } .upPaperCoil { position: absolute; bottom: 0px; /*left: auto;*/ height: 20px; width: 100%; background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/upCoil.png); background-repeat: repeat-x; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; -webkit-transform: translate3d(0px,0px,0px) scale(1); -moz-transform: translate3d(0px,0px,0px) scale(1); -ms-transform: translate3d(0px,0px,0px) scale(1); -o-transform: translate(0px,0px) scale(1); } .downPaperCoil { position: absolute; top: 0px; /*right: auto;*/ height: 21px; width: 100%; background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/downCoil.png); background-repeat: repeat-x; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; -webkit-transform: translate3d(0px,0px,0px) scale(1); -moz-transform: translate3d(0px,0px,0px) scale(1); -ms-transform: translate3d(0px,0px,0px) scale(1); -o-transform: translate(0px,0px) scale(1); } /**flip right to left, animate shadow*/ .shadowA { background-image: -webkit-linear-gradient(left, rgba(123, 123, 123, 0.05) 0%, rgba(63, 63, 63, 0.4) 93%, rgba(123, 123, 123, 0) 100%); background-image: -moz-linear-gradient(left, rgba(123, 123, 123, 0.05) 0%, rgba(63, 63, 63, 0.4) 93%, rgba(123, 123, 123, 0) 100%); background-image: -ms-linear-gradient(left, rgba(123, 123, 123, 0.05) 0%, rgba(63, 63, 63, 0.4) 93%, rgba(123, 123, 123, 0) 100%); background-image: -o-linear-gradient(left, rgba(123, 123, 123, 0.05) 0%, rgba(63, 63, 63, 0.4) 93%, rgba(123, 123, 123, 0) 100%); background-image: linear-gradient(left, rgba(123, 123, 123, 0.05) 0%, rgba(63, 63, 63, 0.4) 93%, rgba(123, 123, 123, 0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, EndColorStr='#663f3f3f', StartColorStr='#007b7b7b'); position: inherit; top: 0px; left: 0px; width: 320px; height: 460px; } /**flip right to left, static shadow*/ .shadowD { background-image: -webkit-linear-gradient(left, rgba(123, 123, 123, 0) 0%, rgba(63, 63, 63, 0.8) 30%, rgba(123, 123, 123, 0) 100%); background-image: -moz-linear-gradient(left, rgba(123, 123, 123, 0) 0%, rgba(63, 63, 63, 0.8) 30%, rgba(123, 123, 123, 0) 100%); background-image: -ms-linear-gradient(left, rgba(123, 123, 123, 0) 0%, rgba(63, 63, 63, 0.8) 30%, rgba(123, 123, 123, 0) 100%); background-image: -o-linear-gradient(left, rgba(123, 123, 123, 0) 0%, rgba(63, 63, 63, 0.8) 30%, rgba(123, 123, 123, 0) 100%); background-image: linear-gradient(left, rgba(123, 123, 123, 0) 0%, rgba(63, 63, 63, 0.8) 30%, rgba(123, 123, 123, 0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, EndColorStr='#007b7b7b', StartColorStr='#663f3f3f'); position: inherit; top: 0px; left: 0px; width: 320px; height: 460px; } /**flip left to right, animate shadow*/ .shadowC { background-image: -webkit-linear-gradient(left, rgba(123, 123, 123, 0.1) 0%, rgba(63, 63, 63, 0.4) 7%, rgba(123, 123, 123, 0) 100%); background-image: -moz-linear-gradient(left, rgba(123, 123, 123, 0.1) 0%, rgba(63, 63, 63, 0.4) 7%, rgba(123, 123, 123, 0) 100%); background-image: -ms-linear-gradient(left, rgba(123, 123, 123, 0.1) 0%, rgba(63, 63, 63, 0.4) 7%, rgba(123, 123, 123, 0) 100%); background-image: -o-linear-gradient(left, rgba(123, 123, 123, 0.1) 0%, rgba(63, 63, 63, 0.4) 7%, rgba(123, 123, 123, 0) 100%); background-image: linear-gradient(left, rgba(123, 123, 123, 0.1) 0%, rgba(63, 63, 63, 0.4) 7%, rgba(123, 123, 123, 0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, EndColorStr='#007b7b7b', StartColorStr='#663f3f3f'); position: inherit; top: 0px; left: 0px; width: 320px; height: 460px; } /**flip left to right, static shadow*/ .shadowB { background-image: -webkit-linear-gradient(left, rgba(123, 123, 123, 0) 0%, rgba(63, 63, 63, 0.8) 70%, rgba(123, 123, 123, 0) 100%); background-image: -moz-linear-gradient(left, rgba(123, 123, 123, 0) 0%, rgba(63, 63, 63, 0.8) 70%, rgba(123, 123, 123, 0) 100%); background-image: -ms-linear-gradient(left, rgba(123, 123, 123, 0) 0%, rgba(63, 63, 63, 0.8) 70%, rgba(123, 123, 123, 0) 100%); background-image: -o-linear-gradient(left, rgba(123, 123, 123, 0) 0%, rgba(63, 63, 63, 0.8) 70%, rgba(123, 123, 123, 0) 100%); background-image: linear-gradient(left, rgba(123, 123, 123, 0) 0%, rgba(63, 63, 63, 0.8) 70%, rgba(123, 123, 123, 0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, EndColorStr='#63f3f3f', StartColorStr='#007b7b7b'); position: inherit; top: 0px; left: 0px; width: 320px; height: 460px; } /** shadow of side .sideShadow{ background-image:-webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(0,0,0,0)), to(rgba(0,0,0,1))); display:none; position:inherit; top:0px; left:0px; width:320px; height:460px; }*/ /**mask for shadow**/ .shadowMask { position: inherit; top: 0px; left: 0px; width: 320px; height: 460px; overflow: hidden; } /**the position of sidew**/ .sidePosition { position: absolute; top: 0px; left: 0px; width: 320px; height: 460px; } /**mask for shadow .shadowMask{ position:absolute; top:0px; left:0px; width:320px; height:460px; overflow: hidden; background-image:-webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(0,0,0,0.4)), to(rgba(0,0,0,0.7))); }background-image:-webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(255,122,0,0.1)), to(rgba(0,0,255,0.5)));*/ .pageMask { position: inherit; top: 0px; left: 0px; width: 320px; height: 860px; overflow: hidden; } .loadingImage{ position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px; width:24px; height:24px; } /*=============================*/ .preview-area { width: 30px; height: 30px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .chasing-dots { position: relative; text-align: center; -webkit-animation: rotate 2.0s infinite linear; animation: rotate 2.0s infinite linear; height: 30px; width: 30px; right: 0; left: 0; z-index: 10; display: inline-block; position: relative; -webkit-transition: all 0.3s ease-in-out 0; transition: all 0.3s ease-in-out 0; } .chasing-dots .dot1,.chasing-dots .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #279fcf; border-radius: 100%; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out; } .chasing-dots .dot2 { top: auto; bottom: 0; -webkit-animation-delay: -1.0s; animation-delay: -1.0s } @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0); opacity:0; } 50% { -webkit-transform: scale(1); opacity:1; } } @keyframes bounce { 0%, 100% { transform: scale(0); -webkit-transform: scale(0); opacity:0; } 50% { transform: scale(1); -webkit-transform: scale(1); opacity:1; } } @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) } } @keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) } } /*=============================*/ .scrollButton { position: absolute; top: 15px; width: 40px; height: 70px; } .shareBar { position: absolute; width: 135px; height: 220px; background-color: #888888; opacity: 0.8; overflow: hidden; } .shareButton { position: absolute; width: 133px; height: 30px; } .shareImg { width: 22px; height: 22px; } .shareBarImg { width: 30px; height: 30px; } .moreImg { width: 17px; height: 17px; margin-top: 8px; /*padding-left:2px;*/ } .moreButton { position: absolute; width: 130px; height: 30px; top: 3px; } .adsBar { position: absolute; width: 200px; height: 100px; overflow: hidden; } .bubble { /* Make it an inline-block element so we can specify the size */ display: inline-block; /* Size */ width: 100px; height: 100px; /* Set the box-sizing so the border fit's within our specified size*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 5px solid #ffb000; /*background: #f00;*/ /* The transition from :hover -> normal */ -webkit-transition: 1s ease; -moz-transition: 1s ease; -ms-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease; } .radiotext { border: 1px solid; border-radius: 5px; } .google { filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ } /* Hide the text */ .bubble > span { display: block; overflow: hidden; text-indent: -10000px; font-size: 1px; width: 1px; height: 1px; position: absolute; } /* The hovered state */ .bubble:hover { border-width: 2px; /* The transition from normal > :hover */ -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } .star { -webkit-mask: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/star_mask.svg) no-repeat center center; -ms-mask: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/star_mask.svg) no-repeat center center; -o-mask: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/star_mask.svg) no-repeat center center; -moz-mask: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/star_mask.svg) no-repeat center center; } .heart { -webkit-mask: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/heart_mask.svg) no-repeat center center; -ms-mask: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/heart_mask.svg) no-repeat center center; -o-mask: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/heart_mask.svg) no-repeat center center; -moz-mask: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/heart_mask.svg) no-repeat center center; } .rect { -webkit-mask: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/rect_mask.svg) no-repeat center center; -ms-mask: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/rect_mask.svg) no-repeat center center; -o-mask: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/rect_mask.svg) no-repeat center center; -moz-mask: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/rect_mask.svg) no-repeat center center; } .round { -webkit-mask: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/centerblur.png) no-repeat center center; -ms-mask: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/centerblur.png) no-repeat center center; -o-mask: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/centerblur.png) no-repeat center center; -moz-mask: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/centerblur.png) no-repeat center center; } .round:hover{ -webkit-animation: loop_frames 1s ease infinite; -webkit-animation-direction:alternate; -webkit-mask-size: auto 100%; } .printBar { bottom: 0px; left: 0px; right: 0px; position: absolute; background-color: #000000; opacity: 0.6; height: 120px; z-index: 100; } .printBG p{padding:18px 0 0 0;} .printBG { position: absolute; bottom: 1px; left: 0px; right: 0px; height: 105px; overflow: hidden; opacity: 0.9; /*background-color:#ffffff;*/ border-radius: 5px; z-index: 102; } .printBack { position: absolute; bottom: 1px; left: 0px; right: 0px; height: 105px; overflow: hidden; opacity: 0.9; background-color: #999999; border-radius: 5px; z-index: 101; } .printBox { position: absolute; /*bottom: 1px;*/ /*left: 0px;*/ /*right: 0px;*/ /*height: 95px;*/ /*background-color:#333333;*/ /*z-index:103;*/ } .printBox input[type="radio"] { background-color: #bbb000; } .printBox label { display: inline-block; /*background-color:#ddd000;*/ /*padding:4px 11px;*/ font-family: Arial; font-size: 10px; } .printBox input[type="radio"]:checked + label { /*background-color:#bbb000;*/ } a:hover { text-decoration: underline; } a { text-decoration: none; color:inherit; } .hint { z-index: 101; position: absolute; display: none; left: 0px; top: 0px; cursor : default; font-family: Arial; font-size: 12px; color: #EDAA1D; border: 1px solid #505050; border-radius: 4px; padding: 5px; background-color : rgba(40, 40, 40, 1); /* background-image: linear-gradient(top, rgba(80, 80, 80, 1) 0%, rgba(0, 0, 0, 1) 100%); background-image: -o-linear-gradient(top, rgba(80, 80, 80, 1) 0%, rgba(0, 0, 0, 1) 100%); background-image: -moz-linear-gradient(top, rgba(80, 80, 80, 1) 0%, rgba(0, 0, 0, 1) 100%); background-image: -webkit-linear-gradient(top, rgba(80, 80, 80, 1) 0%, rgba(0, 0, 0, 1) 100%); background-image: -ms-linear-gradient(top, rgba(80, 80, 80, 1) 0%, rgba(0, 0, 0, 1) 100%); background-image: linear-gradient(linear, top, bottom, color-stop(0, rgba(80, 80, 80, 1)), color-stop(1, rgba(0, 0, 0, 1))); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, EndColorStr='#000000', StartColorStr='#545454'); */ box-shadow: 1px 1px 2px rgba(96, 96, 96, 0.5); -o-box-shadow: 1px 1px 2px rgba(96, 96, 96, 0.5); -moz-box-shadow: 1px 2px 2px rgba(96, 96, 96, 0.5); -webkit-box-shadow: 1px 1px 2px rgba(96, 96, 96, 0.5); -ms-box-shadow: 1px 1px 2px rgba(96, 96, 96, 0.5); } .hint_active{cursor:pointer;} .hint_active:hover{ background-color : rgba(60, 60, 60, 1);} .hint_active:active{background-color : rgba(80, 80, 80, 1);} .hintBackground{ background-color: #CECECE; color : #FCFCFC; border-color : #FCFCFC; border-radius :3px 3px 3px 3px; position: absolute; max-width: 120px; max-height: 30px; text-align: center; z-index: 101; padding-left : 5px; padding-right : 5px; padding-bottom : 5px; padding-top : 5px; } /* backissues */ .overOption { background: #c8c8c8; /*#3698FB;*/ color: #fff; cursor: pointer; } .textEllipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /*.Description:after { top: 50%; border: 10px solid transparent; content: " "; width: 0; height: 0; position: absolute; pointer-events: none; margin-top: -8px; } .Description:after { border-left-color: #FFFFFF; border-width: 8px; right: -8px; margin-right: -8px; opacity: 0.9; }*/ .backIssuesTitle { background: #fff; border-radius: 5px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); cursor: pointer; outline: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .backIssuesTitle .innerTitle:after { content: ""; width: 0; height: 0; position: absolute; top: 50%; right: 3px; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #4cbeff transparent; } .backIssuesTitle .dropdown { /* Styles */ background: #fff; border-radius: 0 0 5px 5px; border: 1px solid rgba(0, 0, 0, 0.2); border-top: none; border-bottom: none; list-style: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; /* Hiding */ max-height: 0; overflow: hidden; } .backIssuesTitle.active { border-radius: 5px 5px 0 0; background: #4cbeff; box-shadow: none; border-bottom: none; color: white; } .backIssuesTitle.active .innerTitle:after { border-color: #82d1ff transparent; } .backIssuesTitle.active .dropdown { border-bottom: 1px solid rgba(0, 0, 0, 0.2); max-height: 99999px; } .backIssuesTitle .dropdown li { display: block; text-decoration: none; color: #333333; padding: 10px 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; border-bottom: 1px solid #e6e8ea; } .backIssuesTitle .dropdown li:hover { color: #57a9d9; } .slider-button { position : absolute; z-index : 10; opacity : 0.4; background : #808080; } .slider-shadow { -webkit-box-shadow : 0px 0px 8px rgba(80, 80, 80, 0.8); -moz-box-shadow : 0px 0px 8px rgba(80, 80, 80, 0.8); -o-box-shadow : 0px 0px 8px rgba(80, 80, 80, 0.8); -ms-box-shadow : 0px 0px 8px rgba(80, 80, 80, 0.8); box-shadow : 0px 0px 8px rgba(80, 80, 80, 0.8); } .slider-action { cursor : pointer; } .view-read { position : absolute; z-index:9; /*border-radius : 3px;*/ overflow : hidden; } .view-zoom { position : absolute; z-index:9; overflow : visible; } .item-transparent { background : none; -webkit-box-shadow : none; -moz-box-shadow : none; -o-box-shadow : none; box-shadow : none } .item-enter { background : #383838; -moz-box-shadow : inset 0 0 2px rgba(0, 0, 0, 0.92); -webkit-box-shadow : inset 0 0 2px rgba(0, 0, 0, 0.92); box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.92); -ms-box-shadow : inset 0 0 2px rgba(0, 0, 0, 0.92); -o-box-shadow : inset 0 0 2px rgba(0, 0, 0, 0.92); -webkit-box-shadow : 0 1px 1px rgba(255, 255, 255, 0.18); -moz-box-shadow : 0 1px 1px rgba(255, 255, 255, 0.18); -o-box-shadow : 0 1px 1px rgba(255, 255, 255, 0.18); box-shadow : 0 1px 1px rgba(255, 255, 255, 0.18) }.flipHTML5PhotoGallery-BG { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background-color: #000000; opacity: 0.5; } .flipHTML5PhotoGallery { position: absolute; width: 320px; height: 320px; background-color: #ffffff; border: 8px solid #ffffff; cursor: pointer; } .flipHTML5PhotoGallery-prevBtn, .flipHTML5PhotoGallery-nextBtn { position: absolute; width: 32px; height: 32px; top: 50%; margin-top: -16px; cursor: pointer; background-color: #ffffff; color: #474747; font-weight: bold; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 24px; text-align: center; line-height: 30px; } .flipHTML5PhotoGallery-thumb { position: absolute; width: 100%; height: 64px; background-color: rgba(0, 0, 0, 0.5); left: 0px; bottom: 0px; top: auto; } .flipHTML5PhotoGallery-thumbView { position: absolute; overflow: hidden; height: 100%; } .flipHTML5PhotoGallery-thumbList { position: absolute; height: 56px; top: 4px; left: 0px; } .flipHTML5PhotoGallery-thumbTitle { position: absolute; background-color: #000000; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; color: #ffffff; height: 24px; line-height: 24px; font-size: 14px; font-weight: bold; padding: 0px 10px; } .flipHTML5PhotoGallery-thumbTitle:after { content: ""; width: 0; height: 0; position: absolute; top: 100%; left: 6px; border-width: 11px 7px 0 7px; border-style: solid; border-color: #000000 transparent; } .flipHTML5PhotoThumb, .flipHTML5PhotoThumbBG { -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; } .flipHTML5VideoGallery-BG { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background-color: #000000; opacity: 0.5; } .flipHTML5VideoGallery { position: absolute; width: 866px; height: 422px; left: 50%; margin-left: -433px; top: 50%; margin-top: -211px; border: 4px solid rgba(252, 251, 249, 0.5); border-radius: 4px; } .flipHTML5VideoGallery-videoDiv { position: absolute; width: 504px; height: 370px; left: 17px; top: 6px; background-color: #000000; } .flipHTML5VideoGallery-videoListDiv { position: absolute; width: 320px; height: 370px; left: auto; right: 17px; top: 6px; background-color: #ffffff; box-shadow: 0px 0px 1px #494949; } .flipHTML5VideoGallery-eachVideo { background: -webkit-linear-gradient(top, #F0F0F0, #D6D6D6); /*#F8F3F3, #D3CDCD*/ background: -moz-linear-gradient(top, #F0F0F0, #D6D6D6); background: -o-linear-gradient(top, #F0F0F0, #D6D6D6); background: linear-gradient(top, #F0F0F0, #D6D6D6); background-color: #D3CDCD; box-shadow: 0px 0px 1px #000000; } .flipHTML5VideoGallery-eachVideo:hover { background: #949494; } .flipHTML5VideoGallery-eachVideoDes { position: absolute; padding: 6px 8px 0px 8px; width: 224px; height: 5em; /*56px;*/ overflow: hidden; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 11px; color: #1a1a1a; font-weight: bold; } .flipHTML5VideoGallery-videoTitle { position: absolute; left: 17px; bottom: 0px; width: 500px; height: 30px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 16px; color: #ffffff; vertical-align: middle; line-height: 30px; font-weight: bold; } .flipHTML5VideoGallery-closeTitle, .flipHTML5PhotoGallery-closeTitle { position: absolute; background-color: #000000; color: #ffffff; font-weight: bold; font-size: 13px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; z-index: 8; height: 15px; line-height: 15px; padding: 0px 4px; } .flipHTML5Loading { background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/progress.gif); background-position: center center; background-repeat: no-repeat no-repeat; background-repeat: no-repeat; }.noteCookie-note, .flipHTML5Signature, .flipHTML5BookMark { margin-left: -200px; position: absolute; overflow: hidden; width: 500px; height: auto; left: 50%; top: 50px; border: 4px solid rgba(252, 251, 249, 0.5); border-radius: 4px; z-index: 9999; } .flipHTML5Signature-title, .noteCookie-noteTitle, .flipHTML5BookMark-top { position: relative; overflow: hidden; left: 0px; top: 0px; width: 100%; height: 34px; background-color: #373737; } .flipHTML5Signature-titleText, .noteCookie-noteTitle-text, .flipHTML5BookMark-topText { position: absolute; left: 0px; top: 0px; height: 100%; width: 280px; color: #ffffff; font-size: 16px; font-weight: bold; text-shadow: 0 -1px 1px rgba(19, 28, 0, 0.35); font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 34px; vertical-align: middle; text-indent: 8px; } .noteCookie-noteTitle-closeBtn, .noteCookie-noteTitle-showBtn, .flipHTML5BookMark-topShrink, .flipHTML5BookMark-topClose { position: absolute; width: 24px; height: 24px; top: 5px; cursor: pointer; color: #ffffff; z-index: 2; } .flipHTML5BookMark-bottom, .noteCookie-noteButton { position: relative; width: 100%; left: 0px; background-color: #C7C7C7; overflow: hidden; padding-bottom: 6px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .flipHTML5BookMark-saveText { position: absolute; top: 8px; left: 18px; width: 426px; /*460*/ height: 28px; font-size: 19px; text-indent: 2px; color: #1a1a1a; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; } .flipHTML5BookMark-addLeftMark, .flipHTML5BookMark-addRightMark, .flipHTML5BookMark-removeBookMark { position: absolute; height: 28px; line-height: 28px; vertical-align: middle; text-align: center; top: 52px; cursor: pointer; font-size: 12px; font-weight: bold; white-space: nowrap; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e5e6), color-stop(100%, #d1d0d1)); background: -webkit-linear-gradient(top, #e6e5e6, #d1d0d1); background: -moz-linear-gradient(top, #e6e5e6, #d1d0d1); background: -o-linear-gradient(top, #e6e5e6, #d1d0d1); background: linear-gradient(top, #e6e5e6, #d1d0d1); background-color: #E4E4E4; border: 1px solid #8C8D8C; color: #464343; } .flipHTML5BookMark-removeBookMark:hover, .flipHTML5Signature-nuderClose:hover, .flipHTML5Signature-typeEdit-typeDel:hover, .flipHTML5Signature-type-cancel:hover, .noteCookie-noteButton-removeAllBtn:hover, .noteCookie-noteButton-addBtn:hover { background-color: #8c8d8c; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #afb0af), color-stop(100%, #7a7b7a)); background: -webkit-linear-gradient(top, #afb0af, #7a7b7a); background: -moz-linear-gradient(top, #afb0af, #7a7b7a); background: -o-linear-gradient(top, #afb0af, #7a7b7a); background: linear-gradient(top, #afb0af, #7a7b7a); } .flipHTML5BookMark-removeBookMark:active, .flipHTML5Signature-nuderClose:active, .flipHTML5Signature-typeEdit-typeDel:active, .flipHTML5Signature-type-cancel:active, .noteCookie-noteButton-removeAllBtn:active, .noteCookie-noteButton-addBtn:active { background: #E4E4E4; color: #374f00; -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white; -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4); } .flipHTML5BookMark-table, .noteCookie-noteTable { position: relative; width: 100%; left: 0px; top: 0px; margin: 0px; border: 0px; padding: 0px; overflow: hidden; } .flipHTML5BookMark-table-lists, .noteCookie-noteTable-inner { position: relative; width: 100%; left: 0px; top: 0px; margin: 0px; border: 0px; padding: 0px; } .flipHTML5BookMark-row-th, .noteCookie-noteTable-row-th { position: relative; height: 28px; background-color: #373737; line-height: 28px; vertical-align: middle; color: #ffffff; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 11px; font-weight: bold; } .flipHTML5BookMark-cellLeft-th, .noteCookie-noteTable-cellLeft-th { position: absolute; left: 0px; width: 54px; height: 100%; text-indent: 6px; overflow: hidden; } .flipHTML5BookMark-cellRight-th, .noteCookie-noteTable-cellRight-th { position: absolute; width: 410px; height: 100%; left: 54px; } .flipHTML5BookMark-table-row:hover, .noteCookie-noteTable-row:hover { background-color: #949494 !important; } .flipHTML5BookMark-table-cellLeft, .noteCookie-noteTable-cellLeft { position: absolute; left: 0px; width: 54px; height: 100%; text-indent: 14px; color: #1a1a1a; line-height: 28px; vertical-align: middle; overflow: hidden; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 11px; } .flipHTML5BookMark-table-cellRight-text, .noteCookie-noteTable-cellRight-text { background-color: transparent; border: 0px; width: 320px; position: absolute; left: 0px; top: 0px; height: 100%; margin: 0px; padding: 0px; line-height: 20px; text-indent: 8px; color: #1a1a1a; cursor: pointer; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 11px; } .flipHTML5BookMark-table-cellRight-edit, .flipHTML5BookMark-table-cellRight-cancel, .flipHTML5BookMark-table-cellRight-del, .noteCookie-noteTable-cellRight-del, .noteCookie-noteTable-cellRight-edit { position: absolute; width: 24px; height: 24px; top: 2px; } .flipHTML5BookMark-normal, .flipHTML5Signature-normal { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e5e6), color-stop(100%, #d1d0d1)); background: -webkit-linear-gradient(top, #e6e5e6, #d1d0d1); background: -moz-linear-gradient(top, #e6e5e6, #d1d0d1); background: -o-linear-gradient(top, #e6e5e6, #d1d0d1); background: linear-gradient(top, #e6e5e6, #d1d0d1); background-color: #E4E4E4; border: 1px solid #8C8D8C; color: #464343; } .flipHTML5BookMark-hover, .flipHTML5Signature-hover { background-color: #8c8d8c; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #afb0af), color-stop(100%, #7a7b7a)); background: -webkit-linear-gradient(top, #afb0af, #7a7b7a); background: -moz-linear-gradient(top, #afb0af, #7a7b7a); background: -o-linear-gradient(top, #afb0af, #7a7b7a); background: linear-gradient(top, #afb0af, #7a7b7a); }.noteCookie-noteButton-top { position: absolute; height: 134px; width: 464px; top: 14px; left: 18px; margin: 0px; padding: 0px; border: 0px; box-shadow: inset 1px 1px 0px #a6a6a6, 1px 1px 0px #f6f6f6; } .noteCookie-noteButton-inputText { height: 80px; position: absolute; width: 444px; left: 10px; top: 11px; margin: 0px; border: 0px; padding: 0px; resize: none; color: #000000; text-shadow: 0 -1px 1px rgba(19, 28, 0, 0.35); font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 11px; z-index: 2; } .noteCookie-noteButton-removeAllBtn, .noteCookie-noteButton-addBtn { position: absolute; text-align: center; line-height: 27px; vertical-align: middle; width: 79px; height: 27px; top: 100px; cursor: pointer; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 12px; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e5e6), color-stop(100%, #d1d0d1)); background: -webkit-linear-gradient(top, #e6e5e6, #d1d0d1); background: -moz-linear-gradient(top, #e6e5e6, #d1d0d1); background: -o-linear-gradient(top, #e6e5e6, #d1d0d1); background: linear-gradient(top, #e6e5e6, #d1d0d1); background-color: #E4E4E4; border: 1px solid #8C8D8C; color: #1a1a1a; -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2); z-index: 2; } .noteCookie-noteList { position: relative; width: 464px; left: 18px; top: 0px; margin: 0px; border: 0px; padding: 0px; z-index: 2; } .noteCookie-eachNote { position: absolute; cursor: pointer; width: 56px; height: 56px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 2; } .noteCookie-eachNote-img:hover { box-shadow: 0px 0px 2px #ffffff, 0px 0px 3px #ffffff, 0px 0px 5px #7C7878; z-index: 2; } .noteCookie-eachNote-img:active { -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px #7C7878; -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px #7C7878; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px #7C7878; z-index: 2; } .noteCookie-eachNote-textList { position: absolute; width: 180px; height: 140px; border: 1px solid #9c9c9c; border-radius: 3px; left: 0px; top: 0px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.69), 0px 1px 3px #7C7878; z-index: 122; } .noteCookie-eachNote-textList-current, .flipHTML5LocalFile-current { z-index: 124 !important; } .noteCookie-eachNote-textList-topTitle { position: absolute; width: 100%; height: 15px; left: 0px; bottom: 0px; top: auto; line-height: 16px; vertical-align: middle; text-indent: 5px; color: #1a1a1a; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 12px; z-index: 2; border-top: 1px solid #9c9c9c; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } .noteCookie-eachNote-textList-topDel, .noteCookie-eachNote-textList-topClose, .noteCookie-eachNote-textList-topSave { position: absolute; width: 18px; height: 18px; right: 46px; top: 1px; cursor: pointer; z-index: 2; } .noteCookie-eachNote-textList-text { height: 104px; position: absolute; width: 100%; left: 0px; top: 0px; margin: 0px; border: 0px; padding: 0px; resize: none; text-indent: 6px; background-color: #FFF4A1; color: #000000; text-shadow: 0 -1px 1px rgba(19, 28, 0, 0.35); font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 11px; z-index: 2; } .noteCookie-eachNote-textList-textDiv-bgNo, .noteCookie-eachNote-textList-textDiv-bgYes { position: absolute; top: 60px; width: 42px; height: 20px; text-align: center; border-radius: 4px; font-family: Helvetica; font-size: 14px; line-height: 20px; color: #1D1C1C; cursor: pointer; -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2); z-index: 2; } .noteCookie-eachNote-textList-textDiv-bgNo:hover, .noteCookie-eachNote-textList-textDiv-bgYes:hover { background-color: #4d5358; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #50535a), color-stop(100%, #474445)); background: -webkit-linear-gradient(top, #50535a, #474445); background: -moz-linear-gradient(top, #50535a, #474445); background: -o-linear-gradient(top, #50535a, #474445); background: linear-gradient(top, #50535a, #474445); z-index: 2; } .noteCookie-eachNote-textList-textDiv-bgNo:active, .noteCookie-eachNote-textList-textDiv-bgYes:active { background: rgb(173, 180, 153); color: #000000; -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white; -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4); z-index: 2; }.flipHtml5AnnotationSizeWrap { cursor: all-scroll; z-index: 1; left: 0; top: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: none; outline: 1px dashed rgb(61, 61, 61); position: absolute; } .flipHtml5SVGContainer { position: absolute; } .flipHtml5ArrowRightBottom { left: 100%; top: 100%; right: auto; bottom: auto; } .flipHtml5ArrowLeftBottom { left: auto; top: 100%; right: 100%; bottom: auto; } .flipHtml5ArrowLeftTop { left: auto; top: auto; right: 100%; bottom: 100%; } .flipHtml5ArrowRightTop { left: 100%; top: auto; right: auto; bottom: 100%; } .flipHtml5SizePoint { background-color: rgb(61, 61, 61); position: absolute; border: 1px solid black; box-shadow: inset 0 1px 1px white; } .flipHtml5SizePoint:hover { box-shadow: inset 0 1px 3px white; } .flipHtml5SizePoint:active { box-shadow: none; } .flipHtml5SizePoint1 { cursor: nw-resize; z-index: 2; width: 6px; height: 6px; left: -4px; top: -4px; } .flipHtml5SizePoint2 { cursor: n-resize; z-index: 3; width: 4px; height: 4px; margin-left: -3px; left: 50%; top: -3px; } .flipHtml5SizePoint3 { cursor: ne-resize; z-index: 2; width: 6px; height: 6px; right: -4px; top: -4px; } .flipHtml5SizePoint4 { cursor: e-resize; z-index: 1; width: 4px; height: 4px; right: -3px; margin-top: -3px; top: 50%; } .flipHtml5SizePoint5 { cursor: se-resize; z-index: 2; width: 6px; height: 6px; right: -4px; bottom: -4px; } .flipHtml5SizePoint6 { cursor: s-resize; z-index: 3; width: 4px; height: 4px; left: 50%; margin-left: -3px; bottom: -3px; } .flipHtml5SizePoint7 { cursor: sw-resize; z-index: 2; width: 6px; height: 6px; left: -4px; bottom: -4px; } .flipHtml5SizePoint8 { cursor: w-resize; z-index: 1; width: 4px; height: 4px; left: -3px; margin-top: -3px; top: 50%; } .fliphtml5AnnotationLineToolsContainer { position: absolute; padding: 3px; top: 50px; left: 40%; z-index: 10; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; -webkit-user-drag: none;user-drag: none; display: none; background: rgba(77, 77, 77, 0.9); border-radius: 5px; border: 1px groove rgb(150, 149, 149); } .flipHtml5AnnotationClickButton, .flipHtml5AnnotationActiveButton { position: relative; width: 18px; height: 18px; border: 1px solid black; left: 7px; top: 3px; outline: none; margin: 0 10px 0 0; display: inline-block; background: rgb(77, 77, 77); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.61); } .flipHtml5AnnotationClickButton:hover, .flipHtml5AnnotationActiveButton:hover { background-color: rgb(125, 125, 125); } .flipHtml5AnnotationClickButton:active, .flipHtml5AnnotationActiveButton-active { position: relative; width: 18px; height: 18px; border: 1px solid black; left: 7px; top: 3px; margin: 0 10px 0 0; display: inline-block; background: rgba(77, 77, 77, 0.9); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.61); } .flipHtml5AnnotationButtonImage { position: absolute; width: 100%; height: 100%; top: 0; background: no-repeat 0 0; } .flipHtml5AnnotationColorSelectorWrap { position: absolute; z-index: 10000; width: 242px; cursor: default; height: 205px; background: rgba(41, 41, 41, 0.9); border: 1px solid rgb(88, 88, 88); padding: 6px; font-size: 14px; text-decoration: none; color: white; font-family: serif; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; user-drag: none; } .flipHtml5AnnotationColorSelectorMessage { font-size: 14px; font-family: serif; text-align: left; line-height: 22px; margin-bottom: 5px; width: 57px; padding: 0 6px; border: 0; border-radius: 0; box-shadow: none; } .flipHtml5AnnotationOpacity { width: 150px; height: 1px; text-align: center; line-height: 20px; color: white; cursor: pointer; border: 1px black; background: rgb(255, 255, 255); position: relative; display: inline-block; left: 10px; } .flipHtml5AnnotationOpacitySpan { position: absolute; top: -24px; left: 45px; } .flipHtml5AnnotationOpacityCursor { left: 0; width: 5px; height: 12px; display: inline-block; position: absolute; background: rgb(175, 174, 174); top: -6PX; box-shadow: inset 0 1px 1px white; } .flipHtml5AnnotationOpacityCursor:hover { outline: 1px solid rgb(23, 211, 211); } .flipHtml5AnnotationOpacityCursor:active { background-color: white; } .flipHtml5AnnotationColorSelectorBlock { width: 18px; height: 18px; } .flipHtml5AnnotationColorBar { width: 12px; height: 3px; position: absolute; z-index: 2; background-color: black; bottom: 2px; left: 3px; } .flipHtml5AnnotationColorSelectorBlock:hover { outline: 1px solid rgb(6, 142, 185); } .flipHtml5AnnotationImage-delete { background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/delete.png); } .flipHtml5AnnotationImage-stroke, .flipHtml5AnnotationImage-fill { background-color: white; width: 10px; height: 10px; margin: 3px; position: absolute; z-index: 3; border: 1px solid black; } .flipHtml5AnnotationSelect { padding: 0; width: 100px; height: 21px; position: relative; top: -2px; left: 4px; margin: 0 10px 0 0; display: inline-block; text-align: center; font-size: 12px; background: rgb(77, 77, 77); color: white; border-color: black; box-shadow: inset 0 1px 6px rgb(39, 39, 39); outline: 0; line-height: 15px; }.flipHTML5Signature-toolBar-del, .flipHTML5Signature-toolBar-up, .flipHTML5Signature-toolBar-down, .flipHTML5Signature-toolBar-revert, .flipHTML5Signature-toolBar-date { position: absolute; width: 22px; height: 22px; top: 4px; border-radius: 2px; cursor: pointer; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgb(61, 61, 61)), color-stop(100%, rgb(61, 61, 61))); background: -webkit-linear-gradient(top, #141414, rgb(61, 61, 61)); background: -moz-linear-gradient(top, #141414, rgb(61, 61, 61)); background: -o-linear-gradient(top, #141414, rgb(61, 61, 61)); background: linear-gradient(top, #141414, rgb(61, 61, 61)); background-color: rgb(61, 61, 61); border: 1px solid #111010; box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.34), 0px 1px 2px rgba(255, 255, 255, 0.34); } .flipHTML5Signature-toolBar-del:hover, .flipHTML5Signature-toolBar-up:hover, .flipHTML5Signature-toolBar-down:hover, .flipHTML5Signature-toolBar-revert:hover, .flipHTML5Signature-toolBar-date:hover { background-color: #242524; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(100%, #6D706D)); background: -webkit-linear-gradient(top, #000000, #6D706D); background: -moz-linear-gradient(top, #000000, #6D706D); background: -o-linear-gradient(top, #000000, #6D706D); background: linear-gradient(top, #000000, #6D706D); } .flipHTML5Signature-toolBar-del:active, .flipHTML5Signature-toolBar-up:active, .flipHTML5Signature-toolBar-down:active, .flipHTML5Signature-toolBar-revert:active, .flipHTML5Signature-toolBar-date:active { box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.38), 0px 1px 0px rgba(14, 13, 13, 0.28); } .flipHTML5Signature-eachSignatureImg { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .flipHTML5Signature-titleClose, .flipHTML5VideoGallery-close { position: absolute; cursor: pointer; border-radius: 4px; border-left: 1px solid rgba(255, 255, 255, 0.47); border-top: 1px solid rgba(255, 255, 255, 0.48); box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.55), 1px 0px 0px rgba(255, 255, 255, 0.57), 0px 0px 4px #000000; } .flipHTML5Signature-titleClose:hover, .flipHTML5VideoGallery-close:hover { box-shadow: 0px 0px 0px #000000; } .flipHTML5Signature-titleClose:active, .flipHTML5VideoGallery-close:active { box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.83), 0px 1px 0px white; } .flipHTML5Signature-eachDate { position: absolute; width: 180px; height: 45px; border: 1px dashed rgb(47, 47, 47); top: -24px; left: 26px; line-height: 70px; color: #1a1a1a; font-size: 16px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; text-indent: 10px; } .flipHTML5Signature-nuderMessage { position: absolute; left: 10px; top: 10px; width: 534px; height: 36px; border: 1px solid #CCCCCC; border-radius: 4px; padding-left: 6px; word-spacing: 4px; color: #1a1a1a; font-size: 15px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; text-indent: 8px; box-shadow: 0px 0px 2px #000000; } .flipHTML5Signature-typeTitle { position: absolute; left: 0px; top: 0px; width: 100%; height: 24px; background-color: #373737; line-height: 24px; vertical-align: middle; text-align: center; color: #ffffff; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 15px; font-weight: bold; } .flipHTML5Signature-typeUnder { position: absolute; left: 0px; top: 24px; width: 100%; height: 110px; background-color: #E0E0E0; } .flipHTML5Signature-typeMid { position: absolute; left: 17px; top: 8px; width: 204px; height: 70px; border: 1px solid #cccccc; background-color: #FAFAFA; box-shadow: 0px 0px 1px #584F4F; cursor: pointer; text-align: center; font-family: Mistral; color: #000000; font-size: 13px; vertical-align: bottom; line-height: 70px; box-shadow: rgb(166, 166, 166) 1px 1px 0px inset, rgb(246, 246, 246) 1px 1px 0px; } .flipHTML5Signature-typeEdit-typeDel { height: 22px; top: auto; bottom: 3px; font-size: 14px; font-weight: bold; line-height: 22px; text-indent: 17px; position: absolute; cursor: pointer; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e5e6), color-stop(100%, #d1d0d1)); background: -webkit-linear-gradient(top, #e6e5e6, #d1d0d1); background: -moz-linear-gradient(top, #e6e5e6, #d1d0d1); background: -o-linear-gradient(top, #e6e5e6, #d1d0d1); background: linear-gradient(top, #e6e5e6, #d1d0d1); background-color: #E4E4E4; border: 1px solid #8C8D8C; color: #464343; } .flipHTML5Signature-type-cancel { left: 371px; box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e5e6), color-stop(100%, #d1d0d1)); background: -webkit-linear-gradient(top, #e6e5e6, #d1d0d1); background: -moz-linear-gradient(top, #e6e5e6, #d1d0d1); background: -o-linear-gradient(top, #e6e5e6, #d1d0d1); background: linear-gradient(top, #e6e5e6, #d1d0d1); background-color: #E4E4E4; border: 1px solid #8C8D8C; color: #464343; } .flipHTML5Signature-typeBtn { position: absolute; width: 84px; height: 22px; border: 1px solid #8C8D8C; line-height: 22px; vertical-align: middle; text-align: center; top: auto; bottom: 10px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: bold; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; } .flipHTML5Signature-nuderClose { width: 80px; height: 27px; left: 50%; margin-left: -40px; bottom: 11px; top: auto; line-height: 27px; font-size: 15px; position: absolute; text-align: center; cursor: pointer; vertical-align: middle; font-weight: bold; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e5e6), color-stop(100%, #d1d0d1)); background: -webkit-linear-gradient(top, #e6e5e6, #d1d0d1); background: -moz-linear-gradient(top, #e6e5e6, #d1d0d1); background: -o-linear-gradient(top, #e6e5e6, #d1d0d1); background: linear-gradient(top, #e6e5e6, #d1d0d1); background-color: #E4E4E4; border: 1px solid #8C8D8C; color: #464343; } .flipHTML5Signature-drawTypeMid-preview { position: absolute; width: 234px; height: 60px; background-color: #ffffff; border: 1px solid #cccccc; top: 15px; left: auto; right: 17px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 11px; color: #A29696; font-weight: bold; text-indent: 4px; box-shadow: rgb(166, 166, 166) 1px 1px 0px inset, rgb(246, 246, 246) 1px 1px 0px; } .flipHTML5Signature-drawTypeMid-redo, .flipHTML5Signature-drawTypeMid-undo, .flipHTML5Signature-drawTypeMid-clearAll { position: absolute; width: 44px; height: 22px; border: 1px solid #cccccc; border-radius: 4px; left: 80px; top: 54px; text-align: center; line-height: 22px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 13px; color: #5F5E5E; cursor: pointer; }.flipHtml5Remark { z-index: 2; position: absolute; width: 0; height: 0; resize: none; outline: 2px solid rgb(255, 173, 0); cursor: text; overflow: hidden; border: 0; padding: 0; margin: 0; line-height: normal; } .flipHtml5Highlight { z-index: 3; position: absolute; width: 0; height: 0; resize: none; outline: 2px solid rgb(255, 173, 0); overflow: hidden; border: 0; padding: 0; margin: 0; line-height: normal; } .flipHtml5RemarkWrap { position: absolute; padding: 0; margin: 0; border: 8px solid transparent; } .flipHtml5RemarkWrap:focus { outline: 1px solid #3181E7; } .flipHtml5SizeWrap { cursor: all-scroll; z-index: 1; left: 0; top: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: none; min-width: 40px; min-height: 20px; border: 1px dashed rgb(61, 61, 61); position: absolute; } .flipHtml5SizePoint { background-color: rgb(61, 61, 61); position: absolute; border: 1px solid black; box-shadow: inset 0 1px 1px white; } .flipHtml5SizePoint:hover { box-shadow: inset 0 1px 3px white; } .flipHtml5SizePoint:active { box-shadow: none; } .flipHtml5SizePoint1 { cursor: nw-resize; width: 6px; height: 6px; left: -4px; top: -4px; } .flipHtml5SizePoint2 { cursor: n-resize; width: 4px; height: 4px; margin-left: -3px; left: 50%; top: -3px; } .flipHtml5SizePoint3 { cursor: ne-resize; width: 6px; height: 6px; right: -4px; top: -4px; } .flipHtml5SizePoint4 { cursor: e-resize; width: 4px; height: 4px; right: -3px; margin-top: -3px; top: 50%; } .flipHtml5SizePoint5 { cursor: se-resize; width: 6px; height: 6px; right: -4px; bottom: -4px; } .flipHtml5SizePoint6 { cursor: s-resize; width: 4px; height: 4px; left: 50%; margin-left: -3px; bottom: -3px; } .flipHtml5SizePoint7 { cursor: sw-resize; width: 6px; height: 6px; left: -4px; bottom: -4px; } .flipHtml5SizePoint8 { cursor: w-resize; width: 4px; height: 4px; left: -3px; margin-top: -3px; top: 50%; } .fliphtml5RemarkToolbarContainer { position: absolute; height: 47px; width: 420px; z-index: 10; padding: 5px; display: none; background: rgba(77, 77, 77, 0.9); border-radius: 5px; border: 1px groove rgb(150, 149, 149); } .fliphtml5RemarkHighlightToolbarContainer { display: none; left: 325; top: 70px; z-index: 10; position: absolute; height: 20px; padding: 0; width: 57px; } .flipHtml5Remark pre { border: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 12px; max-width: 100%; overflow: auto; padding: 6px; display: inline-block; white-space: pre-wrap; word-wrap: break-word; } .flipHtml5Remark address { font-style: italic; margin-bottom: 12px; } /*.flipHtml5Remark a {*/ /*text-decoration: none;*/ /*font-style: italic;*/ /*color: dodgerblue;*/ /*cursor: pointer;*/ /*}*/ /*.flipHtml5Remark a:hover {*/ /*text-decoration: underline;*/ /*}*/ .flipHtml5RemarkButton { position: relative; width: 18px; height: 18px; border: 1px solid black; top: 1px; outline: none; margin: 0 0 0 2px; display: inline-block; background: rgb(77, 77, 77); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.61); } .flipHtml5RemarkButton:hover { background-color: rgb(125, 125, 125); } .flipHtml5RemarkButton:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.61); } .flipHtml5RemarkButtonImage { position: absolute; width: 100%; height: 100%; top: 0; background: no-repeat 0 0; } .flipHtml5RemarkColorSelectorWrap { position: absolute; z-index: 10000; width: 242px; cursor: default; height: 205px; background: rgba(0, 0, 0, 0.8); border: 1px solid rgb(88, 88, 88); padding: 6px; font-size: 14px; text-decoration: none; color: white; font-family: serif; } .flipHtml5RemarkColorSelectorMessage { font-size: 14px; font-family: serif; text-align: left; line-height: 22px; border: 1px solid black; margin-bottom: 5px; width: 57px; padding: 0 6px; } .flipHtml5RemarkOpacity { width: 150px; height: 1px; text-align: center; line-height: 20px; color: white; cursor: pointer; border: 1px black; background: rgb(255, 255, 255); position: relative; display: inline-block; left: 10px; } .flipHtml5RemarkOpacitySpan { position: absolute; top: -24px; left: 45px; } .flipHtml5RemarkOpacityCursor { left: 0; width: 5px; height: 12px; display: inline-block; position: absolute; background: rgb(175, 174, 174); top: -6PX; box-shadow: inset 0 1px 1px white; } .flipHtml5RemarkOpacityCursor:hover { outline: 1px solid rgb(23, 211, 211); } .flipHtml5RemarkOpacityCursor:active { background-color: white; } .flipHtml5RemarkColorSelectorBlock { width: 18px; height: 18px; } .flipHtml5RemarkColorBar { width: 16px; height: 3px; position: absolute; z-index: 2; background-color: black; bottom: 1px; left: 1px; } .flipHtml5RemarkColorSelectorBlock:hover { outline: 1px solid rgb(6, 142, 185); } .flipHtml5RemarkImage-bold { background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/bold.png); } .flipHtml5RemarkImage-strikeThrough { background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/strikethrough.png); } .flipHtml5RemarkImage-undo { background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/undo.png); } .flipHtml5RemarkImage-delete { background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/delete.png); } .flipHtml5RemarkImage-forecolor { background: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/fontcolor.png) 0 2px; } .flipHtml5RemarkImage-redo { background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/redo.png); } .flipHtml5RemarkImage-removeFormat { background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/clear.png); } .flipHtml5RemarkImage-italic { background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/italic.png); } .flipHtml5RemarkImage-underline { background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/underline.png); } .flipHtml5RemarkImage-justifyLeft { background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/justyleft.png); } .flipHtml5RemarkImage-justifyCenter { background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/justycenter.png); } .flipHtml5RemarkImage-justifyRight { background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/justyright.png); } .flipHtml5RemarkImage-insertOrderedList { background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/orderlist.png); } .flipHtml5RemarkImage-insertUnorderedList { background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/unorderlist.png); } .flipHtml5RemarkImage-blockquote { background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/blockquote.png); } .flipHtml5RemarkImage-outdent { background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/oudent.png); } .flipHtml5RemarkImage-indent { background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/indent.png); } .flipHtml5RemarkImage-createLink { background-image: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/hyperlink.png); } .flipHtml5RemarkImage-backcolor { background-color: white; width: 10px; height: 10px; margin: 3px; position: absolute; z-index: 3; border: 1px solid black; } .flipHtml5RemarkSelect { padding: 0; width: 100px; height: 21px; position: relative; top: 2px; left: 2px; margin: 0 17px 0 0; display: inline-block; text-align: center; font-size: 12px; background: rgb(71, 71, 71); color: white; border-color: black; box-shadow: inset 0 1px 6px rgb(39, 39, 39); outline: 0; line-height: 15px; } .flipHtml5RemarkHr { margin: 0; padding: 0; position: relative; top: 0; }.flipHTML5AddFile { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 8; overflow: hidden; } .flipHTML5ZoomFrame { z-index: 6; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: none; /*min-width: 40px;*/ /*min-height: 20px;*/ border: 1px dashed rgb(61, 61, 61); position: absolute; } .flipHTML5ZoomFrame .flipHTML5Point { background-color: #0202FF; /*background-color: rgb(61, 61, 61);*/ position: absolute; border: 1px solid black; box-shadow: inset 0 1px 1px white; } .flipHTML5ZoomFrame .flipHTML5ZoomPoint0 { left: -4px; top: -4px; cursor: nw-resize; width: 6px; height: 6px; } .flipHTML5ZoomFrame .flipHTML5ZoomPoint1 { left: 50%; margin-left: -2px; top: -3px; cursor: n-resize; width: 4px; height: 4px; } .flipHTML5ZoomFrame .flipHTML5ZoomPoint2 { right: -4px; top: -4px; cursor: ne-resize; width: 6px; height: 6px; } .flipHTML5ZoomFrame .flipHTML5ZoomPoint3 { right: -3px; top: 50%; margin-top: -2px; cursor: e-resize; width: 4px; height: 4px; } .flipHTML5ZoomFrame .flipHTML5ZoomPoint4 { right: -4px; bottom: -4px; cursor: se-resize; width: 6px; height: 6px; } .flipHTML5ZoomFrame .flipHTML5ZoomPoint5 { left: 50%; margin-left: -2px; bottom: -3px; cursor: s-resize; width: 4px; height: 4px; } .flipHTML5ZoomFrame .flipHTML5ZoomPoint6 { left: -4px; bottom: -4px; cursor: sw-resize; width: 6px; height: 6px; } .flipHTML5ZoomFrame .flipHTML5ZoomPoint7 { left: -3px; top: 50%; margin-top: -2px; cursor: w-resize; width: 4px; height: 4px; } .flipHTML5LocalFile-toolBar-del, .flipHTML5LocalFile-toolBar-update { position: absolute; width: 22px; height: 22px; top: 4px; border-radius: 2px; cursor: pointer; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgb(61, 61, 61)), color-stop(100%, rgb(61, 61, 61))); background: -webkit-linear-gradient(top, #141414, rgb(61, 61, 61)); background: -moz-linear-gradient(top, #141414, rgb(61, 61, 61)); background: -o-linear-gradient(top, #141414, rgb(61, 61, 61)); background: linear-gradient(top, #141414, rgb(61, 61, 61)); background-color: rgb(61, 61, 61); border: 1px solid #111010; box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.34), 0px 1px 2px rgba(255, 255, 255, 0.34); } .flipHTML5LocalFile-toolBar-del:hover, .flipHTML5LocalFile-toolBar-update:hover { background-color: #242524; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(100%, #6D706D)); background: -webkit-linear-gradient(top, #000000, #6D706D); background: -moz-linear-gradient(top, #000000, #6D706D); background: -o-linear-gradient(top, #000000, #6D706D); background: linear-gradient(top, #000000, #6D706D); } .flipHTML5LocalFile-toolBar-del:active, .flipHTML5LocalFile-toolBar-update:active { box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.38), 0px 1px 0px rgba(14, 13, 13, 0.28); } .menuTitle{ cursor : pointer; overflow : hidden; width : 100%; height : 50px; font-family : Arial,Tahoma; } .menuTitleIcon{ cursor : pointer; position : absolute; top : 10px; left : 20px; width : 32px; height : 32px; border-radius : 16px; } .menuTitleIcon div{ cursor : pointer; position : absolute; top : 6px; left : 6px; width : 20px; height : 20px; } .menuTitleCaption{ cursor : pointer; position : absolute; left : 60px; top : 18px; font-size : 14px; color : #FFFFFF; } .menuTitleState{ position : absolute; top : 15px; right : 20px; width : 24px; height : 24px; } .dockMenu { text-align : center; z-index : 300; display : block; overflow : visible; position : absolute; bottom : 10; white-space: nowrap; -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.85, transparent), to(rgba(255,255,255,0.3))); -moz-box-reflect: below 1px -moz-gradient(linear, left top, left bottom, from(transparent), color-stop(0.85, transparent), to(rgba(255,255,255,0.3))); } .dockMenuContent { padding : 0px; list-style : none; text-align : center; display: inline-block; white-space: nowrap; } .dockMenuItem{ display : inline-block; vertical-align : bottom; position : relative; overflow : visible; text-align : center; cursor: pointer; } .dockMenuItemContent { /*background : #ff0000;*/ position : absolute; bottom : 1px; background : #ffffff; } .dockMenuItemShadow { -webkit-box-shadow : 0 0 5px rgba(40, 40, 40, 0.5); -moz-box-shadow : 0 0 5px rgba(40, 40, 40, 0.5); -o-box-shadow : 0 0 5px rgba(40, 40, 40, 0.5); -ms-box-shadow : 0 0 5px rgba(40, 40, 40, 0.5); box-shadow : 0 0 5px rgba(40, 40, 40, 0.5); } .dockMenuItemCaption { line-height : 1.3em; text-align : center; width : auto; overflow : visible; font-weight : bold; color : #FFFFFF; font-size : 80%; padding : 4px 12px; opacity : 0.4; background-color : #000000; display : none; margin : 0px auto; top : 0px; border-radius : 10px; white-space: nowrap; } .dockMenuItemCaptionAfter{ display: none; height: 9px; line-height:9px; left:50%; opacity:0.4; color: transparent; position: absolute; text-align: center; width: 16px; margin-left: -4px; margin-top: -2px; } .flipShotBar{position:absolute;} .flipbutton{ position:relative; width:100%; background:rgba(0,0,0,0.6); cursor : pointer; } .flipbutton:hover{background:rgba(0,0,0,0.2);} .flipbutton.upbutton{border-bottom:1px solid #ffffff;height:20%;} .flipbutton.downbutton{height:80%;} .flipbutton.upbutton.left{border-radius:5px 0 0 0;} .flipbutton.downbutton.left{border-radius:0 0 0 5px;} .flipbutton.upbutton.right{border-radius:0 5px 0 0;} .flipbutton.downbutton.right{border-radius:0 0 5px 0;} .flipbutton img{ position:absolute; top : 50%; left : 50%; margin-top : -10px; margin-left : -10px; } .zoomControlBar{ width : 260px; height : 40px; position : absolute; z-index : 5; display : none; opacity : 0.3; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .zoomControlBar.catalog{ width : 138px;} .zoomControlBar:hover{opacity:0.7;} .zoomControlBar .button{display:inline-block;cursor:pointer;position:relative;width:26px;height:26px;margin-left:15px;margin-top:6px;} .zoomControlBar .button img{margin-left:4px;margin-top:4px;} .zoomControlBar .button:hover{opacity:0.8;} .slideShortcut{ position : absolute; z-index : 101; width : 210px; height : 40px; background-color : #D0D7DF; /*background : linear-gradient(top, #F6FAFD, #E1E8F0); background : -webkit-linear-gradient(top, #F6FAFD, #E1E8F0); background : -ms-linear-gradient(top, #F6FAFD", #E1E8F0); background : -moz-linear-gradient(top, #F6FAFD", #E1E8F0); background : -o-linear-gradient(top, #F6FAFD", #E1E8F0); filter : progid:DXImageTransform.Microsoft.Gradient(GradientType=1, EndColorStr='#E1E8F0', StartColorStr='#F6FAFD');*/ opacity : 0.6; -webkit-box-shadow : 0 0 5px rgba(40, 40, 40, 0.5); -moz-box-shadow : 0 0 5px rgba(40, 40, 40, 0.5); -o-box-shadow : 0 0 5px rgba(40, 40, 40, 0.5); -ms-box-shadow : 0 0 5px rgba(40, 40, 40, 0.5); box-shadow : 0 0 5px rgba(40, 40, 40, 0.5); } .shortcutItem{ position : relative; float : left; top : 0px; width : 70px; height : 40px; border-width : 0px; cursor : default; } .shortcurtItemEnter{ position : relative; float : left; top : 0px; width : 68px; border-left : 1px solid #7297C1; border-right : 1px solid #7297C1; height : 40px; background-color : #8FACCC; cursor : pointer; } .slideToolbar{ z-index:5; position:absolute; top:0; left:50%; margin:0px auto; padding:5px; border-radius:0px 0px 5px 5px; opacity:0.7; } .slideToolbar:hover{ opacity : 1; } .slideToolbar img{ width : 32px; margin : 0 5px; cursor : pointer; } .slideBar{ z-index:5; position:absolute; cursor:pointer; width:50px; height:50px; top:50%; opacity:0.7; margin-top:-25px; } .passwardPannel { position:absolute; z-index:991; background:#ffffff; width:90%; left:0px; right:0px; top:0px; bottom:0px; height:330px; margin:auto; max-width:400px; border-radius:5px; line-height:50px; vertical-align:middle; text-align:center; font-family:"Arial Black"; font-size:20px; } .passwardPannel .icon div{width:100%;height:100%;} .passwardPannel .icon{width:100px;height:100px;left:50%;position:relative;margin:10px 0px 10px -50px;} .passwardPannel input{width:82%;height:50px;border-radius:5px;margin-bottom:10px;border-width:0px;background:#EBEBEB;padding:0px 3%;color:#9FA0A3;} .passwardPannel p{margin:0px 6% 10px 6%;width:88%;height:50px;border-radius:5px;background:#189BED;color:#ffffff;cursor:pointer;} .passwardPannel .cancleIn{background:#F4F1F1;border:1px solid #E5E1E1;color:#B6B5B5;} .passwardPannel .passwardResult{color:#ff0000;position:absolute;bottom:-8px;margin-left:6%;left:0px;font-size:10px;} .passwardPannel .prompt{background:rgba(0,0,0,0.8);position:absolute;padding:10px;color:#ffffff;font-size:15px;display:none;z-index:5;width:170px;border-radius: 5px;max-height: 310px;overflow-y:auto;line-height:20px;} .passwardPannel .prompt u{color:#fff;text-decoration: underline;} .passwardPannel .arrow{border-width:6px 8px 6px 8px;border-style:solid;border-color:transparent rgba(0,0,0,0.5) transparent transparent;position:absolute;left:370px;top:45%;margin-top:-6px;} .passwardPannel-background{position:absolute;z-index:990;background:rgba(0,0,0,0.5);width:100%;height:100%;} .passwardPannel .passwardInfo{background:rgba(0,0,0,0.7);text-align:left;position:absolute;border-radius:5px;color:#ffffff;padding:10px;right:-300px;top:10px;width:260px;height:auto;display:none;} .passwardPannel .passwardInfo .top{ position: absolute; width: 0px; height: 0px; line-height: 0px; border-right: 10px solid rgba(0,0,0,0.7); border-top: 10px solid transparent; border-bottom: 10px solid transparent; left: -10px; top: 26px; } .passwardPannel:hover .passwardInfo{display:block;} .phoneSharePanel{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;} .phoneSharePanel .item{padding:10px;border-bottom:1px solid #474747;vertical-align:middle;color:#ffffff;line-height:50px;height:50px;font-weight:bold;} .phoneSharePanel .item .logo{width:50px;height:50px;display:inline-block;float:left;} .phoneSharePanel .item .logo div{width:50px;height:50px;} .phoneSharePanel .item span{margin-left:20px;float:left;} .sharePanel{} .sharePanel .item{width:30px;height:30px;margin:10px 0 10px 10px;display:inline-block;} .sharePanel .item .logo{width:30px;height:auto;} .ad-box-container{position:absolute;z-index:2000;bottom:25px;left:0;right:0;margin:0 auto;width:100%;display:none;} .ad-box-container .ad-box-image{width:100%;cursor:pointer;float:left;} .ad-box-container .ad-box-cancel{position:absolute;z-index:2;right:0;top:0;cursor:pointer;} .phoneBookmark{} .phoneBookmark .scrollBox{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;} .phoneBookmark .item{position:relative;width:100%;height:100px;line-height:100px;vertical-align:middle;font-size:15px;color:#aaaaaa;cursor:pointer;} .phoneBookmark .item span{margin:0 10px;float:left;display:inline-block;width:20px;} .phoneBookmark .item img{height:76px;float:left;margin:12px 0;} .phoneBookmark .item .close{position:absolute;cursor:pointer;top:30px;right:10px;width:41px;height:41px;background-position:-402px -429px;background-image: url(phoneIcon/phone_icon.png);background-repeat: no-repeat;} .phoneBookmark .item .close:hover{background-position:-462px -429px;} .miniLogo{width:100px;right:0;bottom:0;opacity:0.5;position:absolute;cursor:pointer;z-index:100;} .miniLogo:hover{opacity:1;} .miniTitle{ z-index:1000; height:30px; line-height : 30px; background : rgba(51, 51, 51, 0.5); border-radius:5px; left : 50%; top:0; bottom:0; transform:translate(-50%,0); position : absolute; color : #ffffff; vertical-align : middle; text-align : center; cursor : pointer; font-family : "Tahoma","sans-serif","Arial"; font-size:12px; padding : 3px 7px; margin : auto; white-space : nowrap; } .hardCover{position:absolute;z-index:-1;} .hardSide{position:absolute;} .pageSide{overflow:hidden;position:absolute;} .bookSpine{position:absolute;left:50%;overflow:hidden;} .bookSpine .left_shadow{position:absolute;left:0;top:0;height:100%;width:0;} .bookSpine .right_shadow{position:absolute;right:0;top:0;height:100%;width:0;} .bookSpine .shadow{ -webkit-box-shadow : 0 0 10px 3px #252929; -moz-box-shadow : 0 0 10px 3px #252929; -ms-box-shadow : 0 0 10px 3px #252929; box-shadow : 0 0 10px 3px #252929; } .top_spine{position:absolute;top:0;left:50%;} .botoom_spine{position:absolute;bottom:0;left:50%;} .SlideBook{position:absolute;width:100%;height:100%;top:0;left:0;z-index:2;} .SlideBook .slide_side{width:100%;height:100%;position:absolute;} .SlideBook .slide_pages{position:absolute;} .shoppingCount{position:absolute;top:5px;left:38px;font-size:15px;font-weight:bold;color:#ffffff;} .menu{position:absolute;width:100%;height:170px;overflow:hidden;z-index:5;bottom:-170px;} .dockMenuContent{position:absolute;bottom:30px;height:140px;left:25px;z-index:1;} .thumbnailItemContent{position:absolute;bottom:0px;width:100%;height:30px;text-align:center;line-height:30px;z-index:2;display:inline-block;} .thumbnailItem{position:relative;width:40px;height:20px;display:inline-block;margin-left:4px;cursor:pointer;margin-top:5px;} .thumbnailRect{position:absolute;top:7px;width:40px;height:5px;border-radius:3px;background:#505a60;} .dockButton{width:30px;height:60px;margin-left:10px;bottom:1px;} .dockButton div{width:100%;height:100%;background:#333333;opacity:0.5;} .dockButton img{left:0;right:0;bottom:0;top:0;margin:auto;position:absolute;} .tipsBox{padding:10px 6px;background-color:#333333;opacity:0.5;display:none;width:190px;left:0;right:0;top:100px;margin:auto;z-index:110;position:absolute;font-size:15px;color:#f0f0f0;vertical-align:middle;text-align:center;} .tipsBoxShadow{-webkit-box-shadow:0 0 15px rgba(40, 40, 40, 0.6);-moz-box-shadow:0 0 15px rgba(40, 40, 40, 0.6);-ms-box-shadow:0 0 15px rgba(40, 40, 40, 0.6);-o-box-shadow:0 0 15px rgba(40, 40, 40, 0.6);box-shadow:0 0 15px rgba(40, 40, 40, 0.6);} .tipsBoxRadius{-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px;} .thumbnail_map{ position:absolute; z-index:202; display: none; border: 5px solid #ffffff; -webkit-box-shadow: 0px 0px 5px gray; -moz-box-shadow: 0px 0px 5px gray; -o-box-shadow: 0px 0px 5px gray; -ms-box-shadow: 0px 0px 5px gray; box-shadow: 0px 0px 5px gray; background-color: white; } .map_img_left{ top:0; left:0; height:98px; position:absolute; border-left: 1px solid gray; border-top: 1px solid gray; border-bottom: 1px solid gray; } .map_img_right{ top:0; right:0; height:98px; position:absolute; border-right : 1px solid gray; border-top : 1px solid gray; border-bottom : 1px solid gray; } .map_img_up{ top:0; left:0; height:98px; position:absolute; border-left: 1px solid gray; border-top: 1px solid gray; border-right: 1px solid gray; } .map_img_down{ bottom:0; left:0; height:98px; position:absolute; border-left : 1px solid gray; border-bottom : 1px solid gray; border-right : 1px solid gray; } .map_cursor{position:absolute;border:2px solid green;background-color:RGBA(250,240,185,0.5);} .text_bubble{ position:absolute; z-index:10003; display:none; } .text_bubble_content{ position:relative; border-radius:3px; } .text_bubble_text{ font-family : "Tahoma","sans-serif","Arial"; font-size : 12px; font-weight : 100; } .text_bubble_arrow{ position:absolute; font-size:0px; z-index: 1; overflow:hidden; } /*bookmark*/ .left_bookmark_bar{ position : absolute; overflow : hidden; z-index : 1; height : 65px; top: -65px; } .left_bookmark_bar.vertical{ -webkit-transform-origin : 100% 100%; -moz-transform-origin : 100% 100%; -ms-transform-origin : 100% 100%; -o-transform-origin : 100% 100%; transform-origin : 100% 100%; -webkit-transform : rotate(-90deg); -moz-transform : rotate(-90deg); -ms-transform : rotate(-90deg); -o-transform : rotate(-90deg); transform : rotate(-90deg); } .right_bookmark_bar{ position : absolute; overflow : hidden; z-index : 1; height : 65px; top: -65px; } .right_bookmark_bar.vertical{ -webkit-transform-origin : 0% 100%; -moz-transform-origin : 0% 100%; -ms-transform-origin : 0% 100%; -o-transform-origin : 0% 100%; transform-origin : 0% 100%; -webkit-transform : rotate(90deg); -moz-transform : rotate(90deg); -ms-transform : rotate(90deg); -o-transform : rotate(90deg); transform : rotate(90deg); } .up_bookmark_bar{ position : absolute; overflow : hidden; z-index : 1; height : 65px; top: -65px; } .up_bookmark_bar.vertical{ -webkit-transform-origin : 100% 100%; -moz-transform-origin : 100% 100%; -ms-transform-origin : 100% 100%; -o-transform-origin : 100% 100%; transform-origin : 100% 100%; -webkit-transform : rotate(-90deg); -moz-transform : rotate(-90deg); -ms-transform : rotate(-90deg); -o-transform : rotate(-90deg); transform : rotate(-90deg); } .down_bookmark_bar{ position : absolute; overflow : hidden; z-index : 1; height : 65px; left: -100%; bottom : 0; top:auto; -webkit-transform-origin : 100% 100%; -moz-transform-origin : 100% 100%; -ms-transform-origin : 100% 100%; -o-transform-origin : 100% 100%; transform-origin : 100% 100%; -webkit-transform : rotate(-180deg); -moz-transform : rotate(-180deg); -ms-transform : rotate(-180deg); -o-transform : rotate(-180deg); transform : rotate(-180deg); } .down_bookmark_bar.vertical{ left: 0; -webkit-transform : rotate(90deg); -moz-transform : rotate(90deg); -ms-transform : rotate(90deg); -o-transform : rotate(90deg); transform : rotate(90deg); } .bookmark_item{ top : 40px; width : auto; min-width: 50px; max-width: 110px; display:inline-block; height : 50px; padding : 10px; cursor : pointer; border-radius : 3px 3px 0px 0px; position:absolute; -webkit-box-shadow: 1px 0px 3px 0px rgba(51,51,51,0.7); -moz-box-shadow: 1px 0px 3px 0px rgba(51,51,51,0.7); -ms-box-shadow: 1px 0px 3px 0px rgba(51,51,51,0.7); -o-box-shadow: 1px 0px 3px 0px rgba(51,51,51,0.7); box-shadow: 1px 0px 3px 0px rgba(51,51,51,0.7); } .bookmark_caption{ font-family : "Tahoma","sans-serif","Arial"; font-size : 12px; text-align : center; color : #EEEEEE; word-wrap: break-word; } .loader { box-sizing: border-box; display: flex; flex: 0 1 auto; flex-direction: column; flex-grow: 1; flex-shrink: 0; flex-basis: 25%; max-width: 25%; height: 200px; align-items: center; justify-content: center; margin: auto; top: 0; bottom: 0; left: 0; right: 0; position: absolute; } @-webkit-keyframes ball-pulse-sync{33%{-webkit-transform:translateY(10px);transform:translateY(10px);}66%{-webkit-transform:translateY(-10px);transform:translateY(-10px);}100%{-webkit-transform:translateY(0);transform:translateY(0);}}@keyframes ball-pulse-sync{33%{-webkit-transform:translateY(10px);transform:translateY(10px);}66%{-webkit-transform:translateY(-10px);transform:translateY(-10px);}100%{-webkit-transform:translateY(0);transform:translateY(0);}} .ball-pulse-sync > div:nth-child(0) { -webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out; animation: ball-pulse-sync 0.6s 0s infinite ease-in-out; } .ball-pulse-sync > div:nth-child(1) { -webkit-animation: ball-pulse-sync 0.6s 0.07s infinite ease-in-out; animation: ball-pulse-sync 0.6s 0.07s infinite ease-in-out; } .ball-pulse-sync > div:nth-child(2) { -webkit-animation: ball-pulse-sync 0.6s 0.14s infinite ease-in-out; animation: ball-pulse-sync 0.6s 0.14s infinite ease-in-out; } .ball-pulse-sync > div:nth-child(3) { -webkit-animation: ball-pulse-sync 0.6s 0.21s infinite ease-in-out; animation: ball-pulse-sync 0.6s 0.21s infinite ease-in-out; } .ball-pulse-sync > div { background-color: rgba(51,51,51,0.8); width: 10px; height: 10px; border-radius: 100%; margin: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; display: inline-block; } .bookInstructions.icon_show{ position: absolute; text-align: center; left:9px; top:9px; font-size: 33px; width:33px; height:33px; line-height:33px; border-radius: 50%; color: #fff; background:#00daff; } .bookInstructions.helpBody{ background: #fff; text-align: center; position: absolute; overflow: hidden; box-sizing: border-box; width: 100%; height: 100%; z-index: 1000; } .bookInstructions.hide{ visibility: hidden; } .bookInstructions.show{ visibility: visible; } .bookInstructions .swiper{ position: relative; width:500%; height:100%; transform-style:preserve-3d; font-size: 0; perspective: 0; -webkit-perspective: 0px; -o-perspective: 0px; -moz-perspective: 0px; -ms-perspective: 0px; } .bookInstructions .helpImgs{ position: relative; z-index: 100; width: 100%; height: 100%; font-size: 0; } .bookInstructions .helpPage{ position: relative; width:20%; height:100%; display: inline-block; } .bookInstructions .helpPageImg{ width:100%; position:absolute; top:10%; margin-top:10px; height:60%; } .bookInstructions .icon_drop{ width:44px; height:44px; font-size: 44px; cursor: pointer; position:absolute; border-radius:50%; line-height:44px; right: 18px; top: 18px; color:#fff; background: #7FCEFF; z-index: 100; } .bookInstructions .icon_show{ width:33px; height:33px; font-size: 33px; cursor: pointer; position:fixed; border-radius:50%; line-height:100%; left: 18px; top: 18px; color:#fff; background: #7FCEFF; z-index: 100; } .bookInstructions .icon_drop img{ width:100%; height:100%; } .bookInstructions .helpBullet>li{ background: #aaa; opacity : 0.5; display : inline-block; cursor : pointer; border-radius : 50%; } .bookInstructions .helpBullet>li.icon_active{ background: #81D3FB; opacity: 1; } .rtl{direction:rtl;} .book_style_choose_container{ width : 100%; height : 100%; } .book_style_choose_container .book_style_box{ width : 700px; height : 460px; left : 0; right : 0; bottom : 0; top : 0; margin : auto; position : absolute; z-index : 10; color : #ffffff; text-align : center; vertical-align : middle; white-space : nowrap; text-overflow : ellipsis; overflow : hidden; text-shadow : 0 0 10px #8c97cb, 0 0 20px #8c97cb,0 0 30px #8c97cb; } .book_style_choose_container .book_style_box .title{ position : absolute; height : 50px; line-height : 50px; width : 100%; left : 0; top : 44px; font-size : 30px; } .book_style_choose_container .book_style_box .description{ position : absolute; height : 50px; line-height : 50px; width : 100%; left : 0; top : 99px; font-size : 20px; } .book_style_choose_container .book_style_box .flipModel{ position : absolute; left : 100px; top : 169px; cursor : pointer; } .book_style_choose_container .book_style_box .slideModel{ position : absolute; left : 360px; top : 169px; cursor : pointer; } .book_style_choose_container .book_style_box .flipModel:hover{border : 2px solid #ff8040;} .book_style_choose_container .book_style_box .slideModel:hover{border : 2px solid #ff8040;} .photogallery{ position: absolute; display:none; z-index: 10001; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); text-align: center; vertical-align: middle;} .photogallery .imgContainer{position: absolute;z-index:1;overflow:hidden;cursor: pointer;border:8px solid #fff;background: #fff;} .photogallery .photoBG{position: absolute;z-index:0;background: rgba(0,0,0,0.5);left: 0; top: 0;bottom:0;right:0;} .photogallery .close{position: absolute;right:0;top:0;z-index:3;cursor:pointer;} .photogallery .leftBtn{position: absolute;left:-32px;z-index:3;cursor:pointer;} .photogallery .rightBtn{position: absolute;right:-32px;z-index:3;cursor:pointer;} .photogallery .imgContainer>img{position:absolute;cursor: pointer;} .photogallery .thumbContainer{position:absolute;bottom:0;width:100%;height:60px;z-index:1;} .photogallery .thumbBG{position:absolute;z-index: 2;top:0;left:0;right:0;bottom:0;background-color: rgba(0, 0, 0,0.5);display: block; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .photogallery .thumbBox{position:absolute;cursor:pointer;width:50px;height:46px;top:4px;border:2px solid #fff; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .photogallery .thumbBox img{position: absolute;cursor:pointer;} .photogallery .thumbBox:hover{border:2px solid #00ff00; /*transform:scale(1.2);*/ /*-ms-transform:scale(1.2);*/ /*-moz-transform:scale(1.2);*/ /*-webkit-transform:scale(1.2);*/ /*-o-transform:scale(1.2);*/ } .photogallery .thumbBox.focus{border:2px solid #ff0000;} .photogallery .thumbBox:hover .thumbBG{z-index: 0;} .photogallery .thumbBox.focus .thumbBG{z-index: 0;} .language_form{width:100%;height:100%;left:0;vertical-align:middle;font-family:Arial,Tahoma;background:transparent;} .language_form .stage{margin:0;width:100%;height:100%;} .language_form .form_title{display:none;} .language_form .close{display:none;} /*.language_form.rightToLeft .close{position: absolute;left:10px;right:auto;top:6px;cursor: pointer;}*/ .language_form .scrollBox{position:absolute;width:100%;vertical-align:middle;text-align:center;top:50%;transform:translate(0, -50%);-webkit-transform:translate(0, -50%);-o-transform:translate(0, -50%);-ms-transform:translate(0, -50%);-moz-transform:translate(0, -50%);} .language_form .scrollBox .item{position:relative;width:100%;height:38px;margin:5px 0;line-height:38px;cursor:pointer;vertical-align:middle;text-align:center;} .language_form .scrollBox .item img{display:none;} .language_form .scrollBox .item .title{width:182px;line-height:34px;font-size:20px;color:#ffffff;padding:0 3px;position:absolute;margin-left:-91px;left:50%;} .language_form .scrollBox .item.focus .title{border:2px solid #F2947C;} .clip[style] { opacity: 0; } .active .clip:not([style]) { opacity: 0; animation: fadeIn .1s 1s both; } .active .clip[style] { will-change: transform; animation: noTransform 1s both; } @keyframes noTransform { to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .flip_button_left{ position: absolute; cursor: pointer; right: auto; z-index: 10; } .flip_button_right{ position: absolute; cursor: pointer; left: auto; z-index: 10; } .flip_button_first{ position: absolute; cursor: pointer; right: auto; z-index: 10; opacity : 0.2; } .flip_button_last{ position: absolute; cursor: pointer; left: auto; opacity : 0.2; z-index: 10; } .cover_shadow{ position : absolute; left : 0px; top : 0px; width: 100%; height: 100%; pointer-events:none; z-index:1; } .flip_x{ -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); -ms-transform:scaleX(-1); transform:scaleX(-1); filter:FlipH; } .flip_y{ -moz-transform:scaleY(-1); -webkit-transform:scaleY(-1); -o-transform:scaleY(-1); -ms-transform:scaleX(-1); transform:scaleY(-1); filter:FlipV; } .hard_top_border{ position : absolute; left : 0px; top : 0px; height:3px; width : 100%; background-image: linear-gradient(top, rgba(240,240,200,0.6), rgba(240,240,200,0)); background-image: -o-linear-gradient(top, rgba(240,240,200,0.6), rgba(240,240,200,0)); background-image: -moz-linear-gradient(top, rgba(240,240,200,0.6), rgba(240,240,200,0)); background-image: -webkit-linear-gradient(top, rgba(240,240,200,0.6), rgba(240,240,200,0)); background-image: -ms-linear-gradient(top, rgba(240,240,200,0.6), rgba(240,240,200,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#CCF0F0C8', EndColorStr='#00F0F0C8'); } .hard_inner_left_border{ position : absolute; z-index:1; left : 0px; right : auto; top : 0px; width:10px; height:100%; background-image : linear-gradient(left, rgba(150,150,150,0.4), rgba(180,180,180,0)); background-image : -o-linear-gradient(left, rgba(150,150,150,0.4), rgba(180,180,180,0)); background-image : -moz-linear-gradient(left, rgba(150,150,150,0.4), rgba(180,180,180,0)); background-image : -webkit-linear-gradient(left, rgba(150,150,150,0.4), rgba(180,180,180,0)); background-image : -ms-linear-gradient(left, rgba(150,150,150,0.4), rgba(180,180,180,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#66969696', EndColorStr='#00B4B4B4'); } .hard_left_cover_border{ position : absolute; z-index:0; left : 0px; right : auto; top : 0px; width:4px; height:100%; background-image: linear-gradient(left, rgba(180,180,140,0.6), rgba(180,180,140,0)); background-image: -o-linear-gradient(left, rgba(180,180,140,0.6), rgba(180,180,140,0)); background-image: -moz-linear-gradient(left, rgba(180,180,140,0.6), rgba(180,180,140,0)); background-image: -webkit-linear-gradient(left, rgba(180,180,140,0.6), rgba(180,180,140,0)); background-image: -ms-linear-gradient(left, rgba(180,180,140,0.6), rgba(180,180,140,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CCF0F0C8', EndColorStr='#00F0F0C8'); } .cover_shadow.flip_x .hard_right_border{ position : absolute; left : auto; right : 0px; top : 1px; width:3px; background-image : linear-gradient(right, rgba(220,220,180,0.6), rgba(220,220,180,0)); background-image : -o-linear-gradient(right, rgba(220,220,180,0.6), rgba(220,220,180,0)); background-image : -moz-linear-gradient(right, rgba(220,220,180,0.6), rgba(220,220,180,0)); background-image : -webkit-linear-gradient(right, rgba(220,220,180,0.6), rgba(220,220,180,0)); background-image : -ms-linear-gradient(right, rgba(220,220,180,0.6), rgba(220,220,180,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#00F0F0C8', EndColorStr='#77C8C896'); } .hard_right_border{ position : absolute; left : auto; right : 0px; top : 1px; width:3px; background-image : linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image : -o-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image : -moz-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image : -webkit-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image : -ms-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#00F0F0C8', EndColorStr='#77C8C896'); } .hard_bottom_border{ position : absolute; left : 12px; top : auto; bottom : 0px; height:3px; background-image : linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image : -o-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image : -moz-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image : -webkit-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image : -ms-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00F0F0C8', EndColorStr='#77C8C896'); } /*flat stitching - stitch*/ .cover_shadow.stitch .hard_left_border{ position : absolute; left : 0px; top : 0px; width:0.5%; height:100%; background-image : linear-gradient(left, rgba(60,60,40,0.5), rgba(220,220,180,0)); background-image : -o-linear-gradient(left, rgba(60,60,40,0.5), rgba(220,220,180,0)); background-image : -moz-linear-gradient(left, rgba(60,60,40,0.5), rgba(220,220,180,0)); background-image : -webkit-linear-gradient(left, rgba(60,60,40,0.5), rgba(220,220,180,0)); background-image : -ms-linear-gradient(left, rgba(60,60,40,0.5), rgba(220,220,180,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CC3C3C28', EndColorStr='#CCDCDCB4'); } /*.hard_stitch_shadow_body{ position : absolute; left : 2%; top : 0px; width: 2%; height:100%; background-image : linear-gradient(left, rgba(220,220,180,0) 0%, rgba(220,220,180,0.4) 50%, rgba(220,220,180,0) 100%); background-image : -o-linear-gradient(left, rgba(220,220,180,0) 0%, rgba(220,220,180,0.4) 50%, rgba(220,220,180,0) 100%); background-image : -moz-linear-gradient(left, rgba(220,220,180,0) 0%, rgba(220,220,180,0.4) 50%, rgba(220,220,180,0) 100%); background-image : -webkit-linear-gradient(left, rgba(220,220,180,0) 0%, rgba(220,220,180,0.4) 50%, rgba(220,220,180,0) 100%); background-image : -ms-linear-gradient(left, rgba(220,220,180,0) 0%, rgba(220,220,180,0.4) 50%, rgba(220,220,180,0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#66DCDCB4', EndColorStr='#00DCDCB4'); }*/ .cover_shadow.stitch .hard_left_body{ position : absolute; left : 2.5%; top : 0px; width: 1.5%; height:100%; background-image : linear-gradient(left, rgba(225,225,225,0.1) 0%, rgba(225,225,225,0.4) 50%, rgba(40,40,20,0.4) 50%, rgba(40,40,20,0.1) 100%); background-image : -o-linear-gradient(left, rgba(225,225,225,0.1) 0%, rgba(225,225,225,0.4) 50%, rgba(40,40,20,0.4) 50%, rgba(40,40,20,0.1) 100%); background-image : -moz-linear-gradient(left, rgba(225,225,225,0.1) 0%, rgba(225,225,225,0.4) 50%, rgba(40,40,20,0.4) 50%, rgba(40,40,20,0.1) 100%); background-image : -webkit-linear-gradient(left, rgba(225,225,225,0.1) 0%, rgba(225,225,225,0.4) 50%, rgba(40,40,20,0.4) 50%, rgba(40,40,20,0.1) 100%); background-image : -ms-linear-gradient(left, rgba(225,225,225,0.1) 0%, rgba(225,225,225,0.4) 50%, rgba(40,40,20,0.4) 50%, rgba(40,40,20,0.1) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#66DCDCB4', EndColorStr='#00DCDCB4'); } .cover_shadow.stitch.flip_x .hard_left_body{ position : absolute; left : 2.5%; top : 0px; width: 1.5%; height:100%; background-image : linear-gradient(left, rgba(40,40,20,0.1) 0%, rgba(40,40,20,0.4) 50%, rgba(225,225,225,0.4) 50%, rgba(225,225,225,0.1) 100%); background-image : -o-linear-gradient(left, rgba(40,40,20,0.1) 0%, rgba(40,40,20,0.4) 50%, rgba(225,225,225,0.4) 50%, rgba(225,225,225,0.1) 100%); background-image : -moz-linear-gradient(left, rgba(40,40,20,0.1) 0%, rgba(40,40,20,0.4) 50%, rgba(225,225,225,0.4) 50%, rgba(225,225,225,0.1) 100%); background-image : -webkit-linear-gradient(left, rgba(40,40,20,0.1) 0%, rgba(40,40,20,0.4) 50%, rgba(225,225,225,0.4) 50%, rgba(225,225,225,0.1) 100%); background-image : -ms-linear-gradient(left, rgba(40,40,20,0.1) 0%, rgba(40,40,20,0.4) 50%, rgba(225,225,225,0.4) 50%, rgba(225,225,225,0.1) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#66DCDCB4', EndColorStr='#00DCDCB4'); } .cover_shadow.stitch .hard_bottom_border_width{ left : 0.5%; width : 99%; } .cover_shadow.stitch .normal_left_border{ position : absolute; left : 0px; top : 0px; width:2px; height:100%; background-image : linear-gradient(left, rgba(200,200,200,1), rgba(200,200,200,0)); background-image : -o-linear-gradient(left, rgba(200,200,200,1), rgba(200,200,200,0)); background-image : -moz-linear-gradient(left, rgba(200,200,200,1), rgba(200,200,200,0)); background-image : -webkit-linear-gradient(left, rgba(200,200,200,1), rgba(200,200,200,0)); background-image : -ms-linear-gradient(left, rgba(200,200,200,1), rgba(200,200,200,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#FFC8C8C8', EndColorStr='#CCC8C8C8'); } .cover_shadow.stitch .normal_left_body{ position : absolute; left : 3%; top : 0px; width: 3px; height:100%; background-image : linear-gradient(left, rgba(200,200,200,0) 0%, rgba(220,220,220,0.5) 50%, rgba(200,200,200,0) 100%); background-image : -o-linear-gradient(left, rgba(200,200,200,0) 0%, rgba(220,220,220,0.5) 50%, rgba(200,200,200,0) 100%); background-image : -moz-linear-gradient(left, rgba(200,200,200,0) 0%, rgba(220,220,220,0.5) 50%, rgba(200,200,200,0) 100%); background-image : -webkit-linear-gradient(left, rgba(200,200,200,0) 0%, rgba(220,220,220,0.5) 50%, rgba(200,200,200,0) 100%); background-image : -ms-linear-gradient(left, rgba(200,200,200,0) 0%, rgba(220,220,220,0.5) 50%, rgba(200,200,200,0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77151515', EndColorStr='#00DCDCB4'); } /*side stitching - side*/ .cover_shadow.side .hard_left_border{ position : absolute; left : 0px; top : 0px; width:1.2%; height:100%; background-image : linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -o-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -moz-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -webkit-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -ms-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77151515', EndColorStr='#00DCDCB4'); } .cover_shadow.side .hard_left_body{ position : absolute; left : 2.5%; top : 0px; width:1.5%; height:100%; background-image : linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.4) 35%, rgba(40,40,20,0) 100%); background-image : -o-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.4) 35%, rgba(40,40,20,0) 100%); background-image : -moz-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.4) 35%, rgba(40,40,20,0) 100%); background-image : -webkit-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.4) 35%, rgba(40,40,20,0) 100%); background-image : -ms-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.4) 35%, rgba(40,40,20,0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77282815', EndColorStr='#00282815'); } .cover_shadow.side.flip_x .hard_left_body{ position : absolute; left : 2.5%; top : 0px; width:1.5%; height:100%; background-image : linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.3) 35%, rgba(40,40,20,0) 100%); background-image : -o-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.3) 35%, rgba(40,40,20,0) 100%); background-image : -moz-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.3) 35%, rgba(40,40,20,0) 100%); background-image : -webkit-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.3) 35%, rgba(40,40,20,0) 100%); background-image : -ms-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.3) 35%, rgba(40,40,20,0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77282815', EndColorStr='#00282815'); } .cover_shadow.side .hard_bottom_border_width{ left : 0.4%; width : 99.6%; } .cover_shadow.side .normal_left_border{ position : absolute; left : 0px; top : 0px; width:1.2%; height:100%; background-image : linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -o-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -moz-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -webkit-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -ms-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#88CCCCCC', EndColorStr='#00CCCCCC'); } .cover_shadow.side .normal_left_body{ display : none; } /*side stitching - none*/ .cover_shadow.none .hard_left_border{ position : absolute; left : 0px; top : 0px; width:3px; height:100%; background-image: linear-gradient(left, rgba(240,240,200,0.6), rgba(240,240,200,0)); background-image: -o-linear-gradient(left, rgba(240,240,200,0.6), rgba(240,240,200,0)); background-image: -moz-linear-gradient(left, rgba(240,240,200,0.6), rgba(240,240,200,0)); background-image: -webkit-linear-gradient(left, rgba(240,240,200,0.6), rgba(240,240,200,0)); background-image: -ms-linear-gradient(left, rgba(240,240,200,0.6), rgba(240,240,200,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CCF0F0C8', EndColorStr='#00F0F0C8'); } .cover_shadow.none .hard_left_body{} .cover_shadow.none.flip_x .hard_left_body{ position : absolute; left : 2.5%; top : 0px; width:1.5%; height:100%; background-image : linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.3) 35%, rgba(40,40,20,0) 100%); background-image : -o-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.3) 35%, rgba(40,40,20,0) 100%); background-image : -moz-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.3) 35%, rgba(40,40,20,0) 100%); background-image : -webkit-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.3) 35%, rgba(40,40,20,0) 100%); background-image : -ms-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.3) 35%, rgba(40,40,20,0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77282815', EndColorStr='#00282815'); } .cover_shadow.none .hard_bottom_border_width{ left : 0.4%; width : 99.6%; } .cover_shadow.none .normal_left_border{ display:none; } .cover_shadow.none .normal_left_body{ display : none; } /*press stitching - press*/ .cover_shadow.press .hard_left_border{ position : absolute; left : 0px; top : 0px; width:2px; height:100%; background-image : linear-gradient(left, rgba(40,40,20,0.8), rgba(240,240,200,0.8) ); background-image : -o-linear-gradient(left, rgba(40,40,20,0.8), rgba(240,240,200,0.8) ); background-image : -moz-linear-gradient(left, rgba(40,40,20,0.8), rgba(240,240,200,0.8) ); background-image : -webkit-linear-gradient(left, rgba(40,40,20,0.8), rgba(240,240,200,0.8) ); background-image : -ms-linear-gradient(left, rgba(40,40,20,0.8), rgba(240,240,200,0.8) ); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CC282815', EndColorStr='#CCF0F0C8'); } .cover_shadow.press .hard_left_body{ position : absolute; left : 4%; top : 0px; width:6px; height:100%; background-image : linear-gradient(left, rgba(40,40,20,0.5), rgba(40,40,20,0)); background-image : -o-linear-gradient(left, rgba(40,40,20,0.5), rgba(40,40,20,0)); background-image : -moz-linear-gradient(left, rgba(40,40,20,0.5), rgba(40,40,20,0)); background-image : -webkit-linear-gradient(left, rgba(40,40,20,0.5), rgba(40,40,20,0)); background-image : -ms-linear-gradient(left, rgba(40,40,20,0.5), rgba(40,40,20,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77282815', EndColorStr='#00282815'); } .cover_shadow.press.flip_x .hard_left_body{ position : absolute; left : 4%; top : 0px; width:6px; height:100%; background-image : linear-gradient(left, rgba(40,40,20,0.3), rgba(40,40,20,0)); background-image : -o-linear-gradient(left, rgba(40,40,20,0.3), rgba(40,40,20,0)); background-image : -moz-linear-gradient(left, rgba(40,40,20,0.3), rgba(40,40,20,0)); background-image : -webkit-linear-gradient(left, rgba(40,40,20,0.3), rgba(40,40,20,0)); background-image : -ms-linear-gradient(left, rgba(40,40,20,0.3), rgba(40,40,20,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77282815', EndColorStr='#00282815'); } .cover_shadow.press .hard_bottom_border_width{ left : 4.5%; width : 95.5%; } .cover_shadow.press .normal_left_border{ position : absolute; left : 0px; top : 0px; width:2px; height:100%; background-image : linear-gradient(left, rgba(40,40,20,0.8), rgba(220,220,180,0.8)); background-image : -o-linear-gradient(left, rgba(40,40,20,0.8), rgba(220,220,180,0.8)); background-image : -moz-linear-gradient(left, rgba(40,40,20,0.8), rgba(220,220,180,0.8)); background-image : -webkit-linear-gradient(left, rgba(40,40,20,0.8), rgba(220,220,180,0.8)); background-image : -ms-linear-gradient(left, rgba(40,40,20,0.8), rgba(220,220,180,0.8)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CC282815', EndColorStr='#CCF0F0C8'); } .cover_shadow.press .normal_left_body{ position : absolute; left : 4%; top : 0px; width:3px; height:100%; background-image : linear-gradient(left, rgba(40,40,20,0.4), rgba(40,40,20,0)); background-image : -o-linear-gradient(left, rgba(40,40,20,0.4), rgba(40,40,20,0)); background-image : -moz-linear-gradient(left, rgba(40,40,20,0.4), rgba(40,40,20,0)); background-image : -webkit-linear-gradient(left, rgba(40,40,20,0.4), rgba(40,40,20,0)); background-image : -ms-linear-gradient(left, rgba(40,40,20,0.4), rgba(40,40,20,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#66282815', EndColorStr='#00282815'); } .cover_shadow.press.flip_x .normal_left_body{ position : absolute; left : 4%; top : 0px; width:4px; height:100%; background-image : linear-gradient(left, rgba(200,200,150,0.4), rgba(240,240,200, 0)); background-image : -o-linear-gradient(left, rgba(200,200,150,0.4), rgba(240,240,200, 0)); background-image : -moz-linear-gradient(left, rgba(200,200,150,0.4), rgba(240,240,200, 0)); background-image : -webkit-linear-gradient(left, rgba(200,200,150,0.4), rgba(240,240,200, 0)); background-image : -ms-linear-gradient(left, rgba(200,200,150,0.4), rgba(240,240,200, 0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#66C8C896', EndColorStr='#00F0F0C8'); } /*sewing - sewing*/ .cover_shadow.sewing .hard_left_border{ position : absolute; left : 0px; top : 0px; width:1.2%; height:100%; background-image : linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); background-image : -o-linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); background-image : -moz-linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); background-image : -webkit-linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); background-image : -ms-linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CCF0F0C8', EndColorStr='#00F0F0C8'); } .cover_shadow.sewing .hard_leftbody{ display:none; } .cover_shadow.sewing .normal_left_border{ position : absolute; left : 0px; top : 0px; width:1.2%; height:100%; background-image : linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); background-image : -o-linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); background-image : -moz-linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); background-image : -webkit-linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); background-image : -ms-linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CCF0F0C8', EndColorStr='#ccF0F0C8'); } .cover_shadow.sewing .normal_left_body{ display:none; } .cover_shadow.sewing .hard_bottom_border_width{ left : 0%; width : 100%; } /*hardcover - pit*/ .cover_shadow.pit .hard_left_border{ position : absolute; left : 0px; top : 0px; width:6px; height:100%; background-image : linear-gradient(left, rgba(40,40,20,0.5), rgba(240,240,200,0.5)); background-image : -o-linear-gradient(left, rgba(40,40,20,0.5), rgba(240,240,200,0.5)); background-image : -moz-linear-gradient(left, rgba(40,40,20,0.5), rgba(240,240,200,0.5)); background-image : -webkit-linear-gradient(left, rgba(40,40,20,0.5), rgba(240,240,200,0.5)); background-image : -ms-linear-gradient(left, rgba(40,40,20,0.5), rgba(240,240,200,0.5)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77282815', EndColorStr='#77F0F0C8'); } .cover_shadow.pit .hard_left_body{ position : absolute; left : 6px; top : 0px; width:4%; height:100%; background-image : linear-gradient(left, rgba(210,210,180,0.5) 0%, rgba(40,40,20,0.1) 40%, rgba(40,40,20,0.5) 80%, rgba(210,210,180,0.5) 80%, rgba(210,210,180,0) 100%); background-image : -o-linear-gradient(left, rgba(210,210,180,0.5) 0%, rgba(40,40,20,0.1) 40%, rgba(40,40,20,0.5) 80%, rgba(210,210,180,0.5) 80%, rgba(210,210,180,0) 100%); background-image : -moz-linear-gradient(left, rgba(210,210,180,0.5) 0%, rgba(40,40,20,0.1) 40%, rgba(40,40,20,0.5) 80%, rgba(210,210,180,0.5) 80%, rgba(210,210,180,0) 100%); background-image : -webkit-linear-gradient(left, rgba(210,210,180,0.5) 0%, rgba(40,40,20,0.1) 40%, rgba(40,40,20,0.5) 80%, rgba(210,210,180,0.5) 80%, rgba(210,210,180,0) 100%); background-image : -ms-linear-gradient(left, rgba(210,210,180,0.5) 0%, rgba(40,40,20,0.1) 40%, rgba(40,40,20,0.5) 80%, rgba(210,210,180,0.5) 80%, rgba(210,210,180,0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77F0F0C8', EndColorStr='#00F0F0C8'); } .cover_shadow.pit .hard_bottom_border_width{ left : 4%; width : 96%; } .cover_shadow.pit .normal_left_border{ position : absolute; left : 0px; top : 0px; width:6px; height:100%; background-image : linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); background-image : -webkit-linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); background-image : -o-linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); background-image : -moz-linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); background-image : -ms-linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#66F0F0C8', EndColorStr='#33F0F0C8'); } .cover_shadow.pit .normal_left_body{ position : absolute; left : 5%; top : 0px; width:6px; height:100%; background-image : linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); background-image : -o-linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); background-image : -moz-linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); background-image : -webkit-linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); background-image : -ms-linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77F0F0C8', EndColorStr='#00F0F0C8'); } .cover_shadow.pit.flip_x .normal_left_body{ position : absolute; left : 5%; top : 0px; width:6px; height:100%; background-image : linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); background-image : -o-linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); background-image : -moz-linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); background-image : -webkit-linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); background-image : -ms-linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#00F0F0C8', EndColorStr='#77F0F0C8'); } /*hardcover - pit2*/ .cover_shadow.pit2 .hard_left_border{ position : absolute; left : 0px; top : 0px; width:1%; height:100%; background-image : linear-gradient(left, rgba(20,20,20,0.5), rgba(20,20,20,0)); background-image : -o-linear-gradient(left, rgba(20,20,20,0.5), rgba(20,20,20,0)); background-image : -moz-linear-gradient(left, rgba(20,20,20,0.5), rgba(20,20,20,0)); background-image : -webkit-linear-gradient(left, rgba(20,20,20,0.5), rgba(20,20,20,0)); background-image : -ms-linear-gradient(left, rgba(20,20,20,0.5), rgba(20,20,20,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77282815', EndColorStr='#77F0F0C8'); } .cover_shadow.pit2 .hard_left_body{ position : absolute; left : 1.4%; top : 0px; width:2%; height:100%; background-image : linear-gradient(left, rgba(210,210,180,0.1) 0%, rgba(210,210,180,0.4) 20%, rgba(210,210,180,0.1) 50%, rgba(40,40,20,0.5) 80%, rgba(40,40,20,0) 100%); background-image : -o-linear-gradient(left, rgba(210,210,180,0.1) 0%, rgba(210,210,180,0.4) 20%, rgba(210,210,180,0.1) 50%, rgba(40,40,20,0.5) 80%, rgba(40,40,20,0) 100%); background-image : -moz-linear-gradient(left, rgba(210,210,180,0.1) 0%, rgba(210,210,180,0.4) 20%, rgba(210,210,180,0.1) 50%, rgba(40,40,20,0.5) 80%, rgba(40,40,20,0) 100%); background-image : -webkit-linear-gradient(left, rgba(210,210,180,0.1) 0%, rgba(210,210,180,0.4) 20%, rgba(210,210,180,0.1) 50%, rgba(40,40,20,0.5) 80%, rgba(40,40,20,0) 100%); background-image : -ms-linear-gradient(left, rgba(210,210,180,0.1) 0%, rgba(210,210,180,0.4) 20%, rgba(210,210,180,0.1) 50%, rgba(40,40,20,0.5) 80%, rgba(40,40,20,0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77F0F0C8', EndColorStr='#00F0F0C8'); } .cover_shadow.pit2 .hard_bottom_border_width{ left : 0%; width : 100%; } .cover_shadow.pit2 .normal_left_border{ position : absolute; left : 0px; top : 0px; width:3px; height:100%; background-image : linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); background-image : -webkit-linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); background-image : -o-linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); background-image : -moz-linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); background-image : -ms-linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#66F0F0C8', EndColorStr='#33F0F0C8'); } .cover_shadow.pit2 .normal_left_body{ position : absolute; left : 2%; top : 0px; width:4px; height:100%; background-image : linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); background-image : -o-linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); background-image : -moz-linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); background-image : -webkit-linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); background-image : -ms-linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77F0F0C8', EndColorStr='#00F0F0C8'); } .cover_shadow.pit2.flip_x .normal_left_body{ position : absolute; left : 2%; top : 0px; width:4px; height:100%; background-image : linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); background-image : -o-linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); background-image : -moz-linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); background-image : -webkit-linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); background-image : -ms-linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#00F0F0C8', EndColorStr='#77F0F0C8'); } /*saddle stitching -saddle*/ .cover_shadow.saddle .hard_left_border{ position : absolute; left : 0px; top : 0px; width:2.4%; height:100%; background-image : linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); background-image : -o-linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); background-image : -moz-linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); background-image : -webkit-linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); background-image : -ms-linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#88CCCCCC', EndColorStr='#00CCCCCC'); } .cover_shadow.saddle .hard_left_body{ display:none; } .cover_shadow.saddle .hard_bottom_border_width{ left : 1.4%; width : 98.6%; } .cover_shadow.saddle .normal_left_border{ position : absolute; left : 0px; top : 0px; width:2.4%; height:100%; background-image : linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); background-image : -o-linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); background-image : -moz-linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); background-image : -webkit-linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); background-image : -ms-linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#88CCCCCC', EndColorStr='#00CCCCCC'); } .cover_shadow.saddle .normal_left_body{ display : none; } /*loose leaf stitching -loose*/ .cover_shadow.loose .hard_left_border{ position : absolute; left : 0px; top : 0px; width:4px; height:100%; background-image : linear-gradient(left, rgba(240,240,200,0.8), rgba(240,240,200,0)); background-image : -o-linear-gradient(left, rgba(240,240,200,0.8), rgba(240,240,200,0)); background-image : -moz-linear-gradient(left, rgba(240,240,200,0.8), rgba(240,240,200,0)); background-image : -webkit-linear-gradient(left, rgba(240,240,200,0.8), rgba(240,240,200,0)); background-image : -ms-linear-gradient(left, rgba(240,240,200,0.8), rgba(240,240,200,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CCF0F0C8', EndColorStr='#00F0F0C8'); } .cover_shadow.loose .hard_left_body{ display : none; } .cover_shadow.loose .hard_bottom_border_width{ left : 0%; width : 100%; } .cover_shadow.loose .normal_left_border{ display : none; } .cover_shadow.loose .normal_left_body{ display : none; } /*catalog default shadow*/ .cover_shadow.catalog .hard_left_border{ position : absolute; left : 0px; top : 0px; width:2%; height:100%; background-image : linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -o-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -moz-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -webkit-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -ms-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77151515', EndColorStr='#00DCDCB4'); } .cover_shadow.catalog .hard_left_body{ display : none; } .cover_shadow.catalog .hard_bottom_border_width{ left : 0.2%; width : 99.8%; } .cover_shadow.catalog .normal_left_border{ position : absolute; left : 0px; top : 0px; width:2%; height:100%; background-image : linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -o-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -moz-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -webkit-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -ms-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#88CCCCCC', EndColorStr='#00CCCCCC'); } .cover_shadow.catalog .normal_left_body{ display : none; } @-webkit-keyframes handSwipeAnimate{ 0%{ opacity: 0; -webkit-transform:rotateZ(30deg); transform:rotateZ(30deg); } 25%{ opacity: 1; -webkit-transform:rotateZ(30deg); transform:rotateZ(30deg); } 75%{opacity: 1; -webkit-transform:rotateZ(-30deg); transform:rotateZ(-30deg); } 100%{ opacity: 0; -webkit-transform:rotateZ(-30deg); transform:rotateZ(-30deg); } } @keyframes handSwipeAnimate{ 0%{ opacity: 0; -webkit-transform:rotateZ(30deg); transform:rotateZ(30deg); } 25%{ opacity: 1; -webkit-transform:rotateZ(30deg); transform:rotateZ(30deg); } 75%{opacity: 1; -webkit-transform:rotateZ(-30deg); transform:rotateZ(-30deg); } 100%{ opacity: 0; -webkit-transform:rotateZ(-30deg); transform:rotateZ(-30deg); } } @-webkit-keyframes handSwipeAnimate_Right{ 0%{ opacity: 0; -webkit-transform:rotateZ(-30deg); transform:rotateZ(-30deg); } 25%{ opacity: 1; -webkit-transform:rotateZ(-30deg); transform:rotateZ(-30deg); } 75%{opacity: 1; -webkit-transform:rotateZ(30deg); transform:rotateZ(30deg); } 100%{ opacity: 0; -webkit-transform:rotateZ(30deg); transform:rotateZ(30deg); } } @keyframes handSwipeAnimate_Right{ 0%{ opacity: 0; -webkit-transform:rotateZ(-30deg); transform:rotateZ(-30deg); } 25%{ opacity: 1; -webkit-transform:rotateZ(-30deg); transform:rotateZ(-30deg); } 75%{opacity: 1; -webkit-transform:rotateZ(30deg); transform:rotateZ(30deg); } 100%{ opacity: 0; -webkit-transform:rotateZ(30deg); transform:rotateZ(30deg); } } .handSwipeHelp_Left{ opacity: 0; -webkit-transform:rotateZ(30deg); transform:rotateZ(30deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation : handSwipeAnimate 1.5s 1s infinite ease-in-out; animation : handSwipeAnimate 1.5s 1s infinite ease-in-out; } .handSwipeHelp_Right{ opacity: 0; -webkit-transform : rotateZ(-30deg); transform : rotateZ(-30deg); -webkit-transform-origin : 50% 100%; transform-origin : 50% 100%; -webkit-animation : handSwipeAnimate_Right 1.5s 1s infinite ease-in-out; animation : handSwipeAnimate_Right 1.5s 1s infinite ease-in-out; } .handSwipeHelp_Right>img{ -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .handSwipeHelp_Top{ opacity: 0; -webkit-transform : rotateZ(30deg); transform : rotateZ(30deg); -webkit-transform-origin : 0 50%; transform-origin : 0 50%; -webkit-animation : handSwipeAnimate 1.5s 1s infinite ease-in-out; animation : handSwipeAnimate 1.5s 1s infinite ease-in-out; } .handSwipeHelp_Top>img{ -webkit-transform: rotateZ(75deg); transform: rotateZ(75deg); } .textContainer a{ color:inherit; } .annotationPanel>.topBox>.annoBtnBox>div{ margin-left: 3px; border-radius:2px; } .annotationPanel>.topBox>.annoBtnBox>div:hover{ background: #d3d3d8; } .annotationPanel>.topBox>.annoBtnBox .anno-split-line{ float: left; width: 1px; height: 12px; margin: 13px 5px 11px 9px; background: rgba(0,0,0,0.25); } .anno-noteAdd{ cursor:pointer; position:absolute; right:-22px; z-index:1111; top:0; width:18px; height:22px; background: url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/note_page_add.png) top right no-repeat; } .anno-noteAdd:hover{ opacity: 0.85; } .noteBox .note-btn-icon:hover{ opacity: 0.5; } .lyric{ transition: bottom 0.3s linear; width:190px; height:70px; position:absolute; right:55px; bottom:280px; background:rgba(0,0,0,0.6); border-radius:10px; color:#ffffff; padding:10px; font-size:15px; text-align:center; display:none; } .lyric .lyrics{ width:100%; left:0; top:0; position:relative; -webkit-animation: 0.1s ease-in-out; animation: 0.1s ease-in-out; } .lyric .on{ font-weight: bold; color: #36a3e1; } .lyric li{ list-style:none; line-height:20px; } .lyric .arrow{ border-width:6px 8px 6px 8px; border-style:solid; border-color:rgba(0,0,0,0.6) transparent transparent transparent; position:absolute; left:99px; top:100%; } .spirit{ transition: bottom 0.3s linear; width:140px; height:220px; position:absolute; right:90px; bottom:40px; z-index:1000; } .spirit .person{ width:140px; height:220px; position:absolute; left:0; top:0; } .spirit .shadow{ position:absolute; z-index:-1; left:0; right:0; bottom:0; margin:auto; } .Peter .shadow{ position:absolute; z-index:-1; left:-10px; right:0; bottom:-6px; margin:auto; width:90px; } .talk{ background-position:0 0; animation:talkmove 3s infinite steps(1, end) both; -webkit-animation:talkmove 3s infinite steps(1, end) both; } .stand{ background-position:280px 660px; animation:standmove 16s infinite steps(1, end) both; -webkit-animation:standmove 16s infinite steps(1, end) both; } .Alice{background:url("/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/Alice.png") no-repeat;} .Peter{background:url("/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/Peter.png") no-repeat;} @keyframes talkmove{ 0% { background-position:0 0; } 4% { background-position:-140px 0; } 8% { background-position:-280px 0; } 16% { background-position:-420px 0; } 20% { background-position:-560px 0; } 24% { background-position:-700px 0; } 28% { background-position:-840px 0; } 32% { background-position:-980px 0; } 36% { background-position:0 -220px; } 40% { background-position:-140px -220px; } 44% { background-position:-280px -220px; } 48% { background-position:-420px -220px; } 52% { background-position:-560px -220px; } 56% { background-position:-700px -220px; } 60% { background-position:-840px -220px; } 64% { background-position:-980px -220px; } 68% { background-position:0 -440px; } 72% { background-position:-140px -440px; } 76% { background-position:-280px -440px; } 80% { background-position:-420px -440px; } 84% { background-position:-560px -440px; } 88% { background-position:-700px -440px; } 92% { background-position:-840px -440px; } 96% { background-position:-980px -440px; } 100% { background-position:0 -660px; } } @keyframes standmove{ 0% { background-position:-280px -660px; } 12.5% { background-position:-420px -660px; } 25% { background-position:-560px -660px; } 37.5% { background-position:-700px -660px; } 50% { background-position:-840px -660px; } 62.5% { background-position:-980px -660px; } 75% { background-position:0 -880px; } 87.5% { background-position:-140px -880px; } 100% { background-position:-280px -880px; } } .assist-control{ position: absolute; bottom: 40px; left: 23px; width: 94px; height: 94px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); } .assist-btn{ cursor: pointer; width:40px; height:40px; background-color:rgba(11,11,11,0.35); float:left; margin:3px; text-align: center; line-height: 40px; } .assist-btn .assist-icon{ -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); background-position: center center; background-repeat: no-repeat; width:40px; height:40px; float:left; } .assist-play .assist-icon{ background-image:url("/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/player-play.png"); } .assist-pause .assist-icon{ background-image:url("/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/player-pause.png"); } .assist-next .assist-icon{ background-image:url("/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/NE.png"); } .assist-prev .assist-icon{ background-image:url("/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/PR.png"); } .assist-sound .assist-icon{ background-image:url("/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/player-volume-full.png"); } .assist-muted .assist-icon{ background-image:url("/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/player-volume.png"); } .assist-btn:hover{ opacity: 0.8; } .assist-close{ position:absolute; right:0; top:0; width:20px; height:20px; opacity: 0.5; background-color:rgba(11,11,11,0.35); } .assist-close .assist-icon{ width:20px; height:20px; background-image:url("/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/close.png"); -webkit-transform: rotate(0); -o-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); } .assistantButton{ z-index: 111; transition: all 0.3s; position: absolute; right:0; bottom:0; width:42px; height:32px; cursor:pointer; opacity: 0.5; background:url(/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/assistant.png) center center no-repeat; background-size: contain; } .assistantButton:hover{ opacity: 1; } .hover_opacity:hover{ opacity:0.8; } .hover_background:hover{ background: rgba(0,0,0,0.1); } .bookmark_form .item:hover{ background: rgba(0,0,0,0.1); } /* 电话号码弹框 */ .pctel_form{font-family:Arial;position:absolute;margin:auto;vertical-align: middle;width:170px;} .pctel_form .stage{overflow:hidden;width:100%;position:relative;padding: 15px;} .pctel_form .swiper{ width:100%; position:relative; left:0; top:0; box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ } .pctel_form .swiper .item{ position:relative; font-size: 14px; height: 39px; line-height: 39px; border-bottom: 1px solid rgba(255,255,255,0.1); } .pctel_form .swiper .item .number{ float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pctel_form .swiper .item a{ display: inline-block; position: absolute; /* right: 10; */ height: 39px; line-height: 39px; vertical-align: middle; } .pctel_form .stageArrow{ position: absolute; font-size: 0px; z-index: 1; overflow: hidden; /* border-style: solid; */ bottom:-3px; } .cover_shadow{ position : absolute; left : 0px; top : 0px; width: 100%; height: 100%; pointer-events:none; z-index:1; } .flip_x{ -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); -ms-transform:scaleX(-1); transform:scaleX(-1); filter:FlipH; } .flip_y{ -moz-transform:scaleY(-1); -webkit-transform:scaleY(-1); -o-transform:scaleY(-1); -ms-transform:scaleX(-1); transform:scaleY(-1); filter:FlipV; } .hard_top_border{ position : absolute; left : 0px; top : 0px; height:3px; width : 100%; background-image: linear-gradient(top, rgba(240,240,200,0.6), rgba(240,240,200,0)); background-image: -o-linear-gradient(top, rgba(240,240,200,0.6), rgba(240,240,200,0)); background-image: -moz-linear-gradient(top, rgba(240,240,200,0.6), rgba(240,240,200,0)); background-image: -webkit-linear-gradient(top, rgba(240,240,200,0.6), rgba(240,240,200,0)); background-image: -ms-linear-gradient(top, rgba(240,240,200,0.6), rgba(240,240,200,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#CCF0F0C8', EndColorStr='#00F0F0C8'); } .hard_inner_left_border{ position : absolute; z-index:1; left : 0px; right : auto; top : 0px; width:10px; height:100%; background-image : linear-gradient(left, rgba(150,150,150,0.4), rgba(180,180,180,0)); background-image : -o-linear-gradient(left, rgba(150,150,150,0.4), rgba(180,180,180,0)); background-image : -moz-linear-gradient(left, rgba(150,150,150,0.4), rgba(180,180,180,0)); background-image : -webkit-linear-gradient(left, rgba(150,150,150,0.4), rgba(180,180,180,0)); background-image : -ms-linear-gradient(left, rgba(150,150,150,0.4), rgba(180,180,180,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#66969696', EndColorStr='#00B4B4B4'); } .hard_left_cover_border{ position : absolute; z-index:0; left : 0px; right : auto; top : 0px; width:4px; height:100%; background-image: linear-gradient(left, rgba(180,180,140,0.6), rgba(180,180,140,0)); background-image: -o-linear-gradient(left, rgba(180,180,140,0.6), rgba(180,180,140,0)); background-image: -moz-linear-gradient(left, rgba(180,180,140,0.6), rgba(180,180,140,0)); background-image: -webkit-linear-gradient(left, rgba(180,180,140,0.6), rgba(180,180,140,0)); background-image: -ms-linear-gradient(left, rgba(180,180,140,0.6), rgba(180,180,140,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CCF0F0C8', EndColorStr='#00F0F0C8'); } .cover_shadow.flip_x .hard_right_border{ position : absolute; left : auto; right : 0px; top : 1px; width:3px; background-image : linear-gradient(right, rgba(220,220,180,0.6), rgba(220,220,180,0)); background-image : -o-linear-gradient(right, rgba(220,220,180,0.6), rgba(220,220,180,0)); background-image : -moz-linear-gradient(right, rgba(220,220,180,0.6), rgba(220,220,180,0)); background-image : -webkit-linear-gradient(right, rgba(220,220,180,0.6), rgba(220,220,180,0)); background-image : -ms-linear-gradient(right, rgba(220,220,180,0.6), rgba(220,220,180,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#00F0F0C8', EndColorStr='#77C8C896'); } .hard_right_border{ position : absolute; left : auto; right : 0px; top : 1px; width:3px; background-image : linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image : -o-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image : -moz-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image : -webkit-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image : -ms-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#00F0F0C8', EndColorStr='#77C8C896'); } .hard_bottom_border{ position : absolute; left : 12px; top : auto; bottom : 0px; height:3px; background-image : linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image : -o-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image : -moz-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image : -webkit-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image : -ms-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00F0F0C8', EndColorStr='#77C8C896'); } /*flat stitching - stitch*/ .cover_shadow.stitch .hard_left_border{ position : absolute; left : 0px; top : 0px; width:0.5%; height:100%; background-image : linear-gradient(left, rgba(60,60,40,0.5), rgba(220,220,180,0)); background-image : -o-linear-gradient(left, rgba(60,60,40,0.5), rgba(220,220,180,0)); background-image : -moz-linear-gradient(left, rgba(60,60,40,0.5), rgba(220,220,180,0)); background-image : -webkit-linear-gradient(left, rgba(60,60,40,0.5), rgba(220,220,180,0)); background-image : -ms-linear-gradient(left, rgba(60,60,40,0.5), rgba(220,220,180,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CC3C3C28', EndColorStr='#CCDCDCB4'); } /*.hard_stitch_shadow_body{ position : absolute; left : 2%; top : 0px; width: 2%; height:100%; background-image : linear-gradient(left, rgba(220,220,180,0) 0%, rgba(220,220,180,0.4) 50%, rgba(220,220,180,0) 100%); background-image : -o-linear-gradient(left, rgba(220,220,180,0) 0%, rgba(220,220,180,0.4) 50%, rgba(220,220,180,0) 100%); background-image : -moz-linear-gradient(left, rgba(220,220,180,0) 0%, rgba(220,220,180,0.4) 50%, rgba(220,220,180,0) 100%); background-image : -webkit-linear-gradient(left, rgba(220,220,180,0) 0%, rgba(220,220,180,0.4) 50%, rgba(220,220,180,0) 100%); background-image : -ms-linear-gradient(left, rgba(220,220,180,0) 0%, rgba(220,220,180,0.4) 50%, rgba(220,220,180,0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#66DCDCB4', EndColorStr='#00DCDCB4'); }*/ .cover_shadow.stitch .hard_left_body{ position : absolute; left : 2.5%; top : 0px; width: 1.5%; height:100%; background-image : linear-gradient(left, rgba(225,225,225,0.1) 0%, rgba(225,225,225,0.4) 50%, rgba(40,40,20,0.4) 50%, rgba(40,40,20,0.1) 100%); background-image : -o-linear-gradient(left, rgba(225,225,225,0.1) 0%, rgba(225,225,225,0.4) 50%, rgba(40,40,20,0.4) 50%, rgba(40,40,20,0.1) 100%); background-image : -moz-linear-gradient(left, rgba(225,225,225,0.1) 0%, rgba(225,225,225,0.4) 50%, rgba(40,40,20,0.4) 50%, rgba(40,40,20,0.1) 100%); background-image : -webkit-linear-gradient(left, rgba(225,225,225,0.1) 0%, rgba(225,225,225,0.4) 50%, rgba(40,40,20,0.4) 50%, rgba(40,40,20,0.1) 100%); background-image : -ms-linear-gradient(left, rgba(225,225,225,0.1) 0%, rgba(225,225,225,0.4) 50%, rgba(40,40,20,0.4) 50%, rgba(40,40,20,0.1) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#66DCDCB4', EndColorStr='#00DCDCB4'); } .cover_shadow.stitch.flip_x .hard_left_body{ position : absolute; left : 2.5%; top : 0px; width: 1.5%; height:100%; background-image : linear-gradient(left, rgba(40,40,20,0.1) 0%, rgba(40,40,20,0.4) 50%, rgba(225,225,225,0.4) 50%, rgba(225,225,225,0.1) 100%); background-image : -o-linear-gradient(left, rgba(40,40,20,0.1) 0%, rgba(40,40,20,0.4) 50%, rgba(225,225,225,0.4) 50%, rgba(225,225,225,0.1) 100%); background-image : -moz-linear-gradient(left, rgba(40,40,20,0.1) 0%, rgba(40,40,20,0.4) 50%, rgba(225,225,225,0.4) 50%, rgba(225,225,225,0.1) 100%); background-image : -webkit-linear-gradient(left, rgba(40,40,20,0.1) 0%, rgba(40,40,20,0.4) 50%, rgba(225,225,225,0.4) 50%, rgba(225,225,225,0.1) 100%); background-image : -ms-linear-gradient(left, rgba(40,40,20,0.1) 0%, rgba(40,40,20,0.4) 50%, rgba(225,225,225,0.4) 50%, rgba(225,225,225,0.1) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#66DCDCB4', EndColorStr='#00DCDCB4'); } .cover_shadow.stitch .hard_bottom_border_width{ left : 0.5%; width : 99%; } .cover_shadow.stitch .normal_left_border{ position : absolute; left : 0px; top : 0px; width:2px; height:100%; background-image : linear-gradient(left, rgba(200,200,200,1), rgba(200,200,200,0)); background-image : -o-linear-gradient(left, rgba(200,200,200,1), rgba(200,200,200,0)); background-image : -moz-linear-gradient(left, rgba(200,200,200,1), rgba(200,200,200,0)); background-image : -webkit-linear-gradient(left, rgba(200,200,200,1), rgba(200,200,200,0)); background-image : -ms-linear-gradient(left, rgba(200,200,200,1), rgba(200,200,200,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#FFC8C8C8', EndColorStr='#CCC8C8C8'); } .cover_shadow.stitch .normal_left_body{ position : absolute; left : 3%; top : 0px; width: 3px; height:100%; background-image : linear-gradient(left, rgba(200,200,200,0) 0%, rgba(220,220,220,0.5) 50%, rgba(200,200,200,0) 100%); background-image : -o-linear-gradient(left, rgba(200,200,200,0) 0%, rgba(220,220,220,0.5) 50%, rgba(200,200,200,0) 100%); background-image : -moz-linear-gradient(left, rgba(200,200,200,0) 0%, rgba(220,220,220,0.5) 50%, rgba(200,200,200,0) 100%); background-image : -webkit-linear-gradient(left, rgba(200,200,200,0) 0%, rgba(220,220,220,0.5) 50%, rgba(200,200,200,0) 100%); background-image : -ms-linear-gradient(left, rgba(200,200,200,0) 0%, rgba(220,220,220,0.5) 50%, rgba(200,200,200,0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77151515', EndColorStr='#00DCDCB4'); } /*side stitching - side*/ .cover_shadow.side .hard_left_border{ position : absolute; left : 0px; top : 0px; width:1.2%; height:100%; background-image : linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -o-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -moz-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -webkit-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -ms-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77151515', EndColorStr='#00DCDCB4'); } .cover_shadow.side .hard_left_body{ position : absolute; left : 2.5%; top : 0px; width:1.5%; height:100%; background-image : linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.4) 35%, rgba(40,40,20,0) 100%); background-image : -o-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.4) 35%, rgba(40,40,20,0) 100%); background-image : -moz-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.4) 35%, rgba(40,40,20,0) 100%); background-image : -webkit-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.4) 35%, rgba(40,40,20,0) 100%); background-image : -ms-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.4) 35%, rgba(40,40,20,0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77282815', EndColorStr='#00282815'); } .cover_shadow.side.flip_x .hard_left_body{ position : absolute; left : 2.5%; top : 0px; width:1.5%; height:100%; background-image : linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.3) 35%, rgba(40,40,20,0) 100%); background-image : -o-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.3) 35%, rgba(40,40,20,0) 100%); background-image : -moz-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.3) 35%, rgba(40,40,20,0) 100%); background-image : -webkit-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.3) 35%, rgba(40,40,20,0) 100%); background-image : -ms-linear-gradient(left, rgba(40,40,20,0) 0%, rgba(40,40,20,0.3) 35%, rgba(40,40,20,0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77282815', EndColorStr='#00282815'); } .cover_shadow.side .hard_bottom_border_width{ left : 0.4%; width : 99.6%; } .cover_shadow.side .normal_left_border{ position : absolute; left : 0px; top : 0px; width:1.2%; height:100%; background-image : linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -o-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -moz-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -webkit-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -ms-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#88CCCCCC', EndColorStr='#00CCCCCC'); } .cover_shadow.side .normal_left_body{ display : none; } /*press stitching - press*/ .cover_shadow.press .hard_left_border{ position : absolute; left : 0px; top : 0px; width:2px; height:100%; background-image : linear-gradient(left, rgba(40,40,20,0.8), rgba(240,240,200,0.8) ); background-image : -o-linear-gradient(left, rgba(40,40,20,0.8), rgba(240,240,200,0.8) ); background-image : -moz-linear-gradient(left, rgba(40,40,20,0.8), rgba(240,240,200,0.8) ); background-image : -webkit-linear-gradient(left, rgba(40,40,20,0.8), rgba(240,240,200,0.8) ); background-image : -ms-linear-gradient(left, rgba(40,40,20,0.8), rgba(240,240,200,0.8) ); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CC282815', EndColorStr='#CCF0F0C8'); } .cover_shadow.press .hard_left_body{ position : absolute; left : 4%; top : 0px; width:6px; height:100%; background-image : linear-gradient(left, rgba(40,40,20,0.5), rgba(40,40,20,0)); background-image : -o-linear-gradient(left, rgba(40,40,20,0.5), rgba(40,40,20,0)); background-image : -moz-linear-gradient(left, rgba(40,40,20,0.5), rgba(40,40,20,0)); background-image : -webkit-linear-gradient(left, rgba(40,40,20,0.5), rgba(40,40,20,0)); background-image : -ms-linear-gradient(left, rgba(40,40,20,0.5), rgba(40,40,20,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77282815', EndColorStr='#00282815'); } .cover_shadow.press.flip_x .hard_left_body{ position : absolute; left : 4%; top : 0px; width:6px; height:100%; background-image : linear-gradient(left, rgba(40,40,20,0.3), rgba(40,40,20,0)); background-image : -o-linear-gradient(left, rgba(40,40,20,0.3), rgba(40,40,20,0)); background-image : -moz-linear-gradient(left, rgba(40,40,20,0.3), rgba(40,40,20,0)); background-image : -webkit-linear-gradient(left, rgba(40,40,20,0.3), rgba(40,40,20,0)); background-image : -ms-linear-gradient(left, rgba(40,40,20,0.3), rgba(40,40,20,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77282815', EndColorStr='#00282815'); } .cover_shadow.press .hard_bottom_border_width{ left : 4.5%; width : 95.5%; } .cover_shadow.press .normal_left_border{ position : absolute; left : 0px; top : 0px; width:2px; height:100%; background-image : linear-gradient(left, rgba(40,40,20,0.8), rgba(220,220,180,0.8)); background-image : -o-linear-gradient(left, rgba(40,40,20,0.8), rgba(220,220,180,0.8)); background-image : -moz-linear-gradient(left, rgba(40,40,20,0.8), rgba(220,220,180,0.8)); background-image : -webkit-linear-gradient(left, rgba(40,40,20,0.8), rgba(220,220,180,0.8)); background-image : -ms-linear-gradient(left, rgba(40,40,20,0.8), rgba(220,220,180,0.8)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CC282815', EndColorStr='#CCF0F0C8'); } .cover_shadow.press .normal_left_body{ position : absolute; left : 4%; top : 0px; width:3px; height:100%; background-image : linear-gradient(left, rgba(40,40,20,0.4), rgba(40,40,20,0)); background-image : -o-linear-gradient(left, rgba(40,40,20,0.4), rgba(40,40,20,0)); background-image : -moz-linear-gradient(left, rgba(40,40,20,0.4), rgba(40,40,20,0)); background-image : -webkit-linear-gradient(left, rgba(40,40,20,0.4), rgba(40,40,20,0)); background-image : -ms-linear-gradient(left, rgba(40,40,20,0.4), rgba(40,40,20,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#66282815', EndColorStr='#00282815'); } .cover_shadow.press.flip_x .normal_left_body{ position : absolute; left : 4%; top : 0px; width:4px; height:100%; background-image : linear-gradient(left, rgba(200,200,150,0.4), rgba(240,240,200, 0)); background-image : -o-linear-gradient(left, rgba(200,200,150,0.4), rgba(240,240,200, 0)); background-image : -moz-linear-gradient(left, rgba(200,200,150,0.4), rgba(240,240,200, 0)); background-image : -webkit-linear-gradient(left, rgba(200,200,150,0.4), rgba(240,240,200, 0)); background-image : -ms-linear-gradient(left, rgba(200,200,150,0.4), rgba(240,240,200, 0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#66C8C896', EndColorStr='#00F0F0C8'); } /*sewing - sewing*/ .cover_shadow.sewing .hard_left_border{ position : absolute; left : 0px; top : 0px; width:1.2%; height:100%; background-image : linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); background-image : -o-linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); background-image : -moz-linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); background-image : -webkit-linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); background-image : -ms-linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CCF0F0C8', EndColorStr='#00F0F0C8'); } .cover_shadow.sewing .hard_leftbody{ display:none; } .cover_shadow.sewing .normal_left_border{ position : absolute; left : 0px; top : 0px; width:1.2%; height:100%; background-image : linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); background-image : -o-linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); background-image : -moz-linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); background-image : -webkit-linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); background-image : -ms-linear-gradient(left, rgba(220,220,220,0.5), rgba(220,220,220,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CCF0F0C8', EndColorStr='#ccF0F0C8'); } .cover_shadow.sewing .normal_left_body{ display:none; } .cover_shadow.sewing .hard_bottom_border_width{ left : 0%; width : 100%; } /*hardcover - pit*/ .cover_shadow.pit .hard_left_border{ position : absolute; left : 0px; top : 0px; width:6px; height:100%; background-image : linear-gradient(left, rgba(40,40,20,0.5), rgba(240,240,200,0.5)); background-image : -o-linear-gradient(left, rgba(40,40,20,0.5), rgba(240,240,200,0.5)); background-image : -moz-linear-gradient(left, rgba(40,40,20,0.5), rgba(240,240,200,0.5)); background-image : -webkit-linear-gradient(left, rgba(40,40,20,0.5), rgba(240,240,200,0.5)); background-image : -ms-linear-gradient(left, rgba(40,40,20,0.5), rgba(240,240,200,0.5)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77282815', EndColorStr='#77F0F0C8'); } .cover_shadow.pit .hard_left_body{ position : absolute; left : 6px; top : 0px; width:4%; height:100%; background-image : linear-gradient(left, rgba(210,210,180,0.5) 0%, rgba(40,40,20,0.1) 40%, rgba(40,40,20,0.5) 80%, rgba(210,210,180,0.5) 80%, rgba(210,210,180,0) 100%); background-image : -o-linear-gradient(left, rgba(210,210,180,0.5) 0%, rgba(40,40,20,0.1) 40%, rgba(40,40,20,0.5) 80%, rgba(210,210,180,0.5) 80%, rgba(210,210,180,0) 100%); background-image : -moz-linear-gradient(left, rgba(210,210,180,0.5) 0%, rgba(40,40,20,0.1) 40%, rgba(40,40,20,0.5) 80%, rgba(210,210,180,0.5) 80%, rgba(210,210,180,0) 100%); background-image : -webkit-linear-gradient(left, rgba(210,210,180,0.5) 0%, rgba(40,40,20,0.1) 40%, rgba(40,40,20,0.5) 80%, rgba(210,210,180,0.5) 80%, rgba(210,210,180,0) 100%); background-image : -ms-linear-gradient(left, rgba(210,210,180,0.5) 0%, rgba(40,40,20,0.1) 40%, rgba(40,40,20,0.5) 80%, rgba(210,210,180,0.5) 80%, rgba(210,210,180,0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77F0F0C8', EndColorStr='#00F0F0C8'); } .cover_shadow.pit .hard_bottom_border_width{ left : 4%; width : 96%; } .cover_shadow.pit .normal_left_border{ position : absolute; left : 0px; top : 0px; width:6px; height:100%; background-image : linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); background-image : -webkit-linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); background-image : -o-linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); background-image : -moz-linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); background-image : -ms-linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#66F0F0C8', EndColorStr='#33F0F0C8'); } .cover_shadow.pit .normal_left_body{ position : absolute; left : 5%; top : 0px; width:6px; height:100%; background-image : linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); background-image : -o-linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); background-image : -moz-linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); background-image : -webkit-linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); background-image : -ms-linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77F0F0C8', EndColorStr='#00F0F0C8'); } .cover_shadow.pit.flip_x .normal_left_body{ position : absolute; left : 5%; top : 0px; width:6px; height:100%; background-image : linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); background-image : -o-linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); background-image : -moz-linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); background-image : -webkit-linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); background-image : -ms-linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.6) 50%, rgba(240,240,200,0.6) 50%, rgba(240,240,200,0.2) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#00F0F0C8', EndColorStr='#77F0F0C8'); } /*hardcover - pit2*/ .cover_shadow.pit2 .hard_left_border{ position : absolute; left : 0px; top : 0px; width:1%; height:100%; background-image : linear-gradient(left, rgba(20,20,20,0.5), rgba(20,20,20,0)); background-image : -o-linear-gradient(left, rgba(20,20,20,0.5), rgba(20,20,20,0)); background-image : -moz-linear-gradient(left, rgba(20,20,20,0.5), rgba(20,20,20,0)); background-image : -webkit-linear-gradient(left, rgba(20,20,20,0.5), rgba(20,20,20,0)); background-image : -ms-linear-gradient(left, rgba(20,20,20,0.5), rgba(20,20,20,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77282815', EndColorStr='#77F0F0C8'); } .cover_shadow.pit2 .hard_left_body{ position : absolute; left : 1.4%; top : 0px; width:2%; height:100%; background-image : linear-gradient(left, rgba(210,210,180,0.1) 0%, rgba(210,210,180,0.4) 20%, rgba(210,210,180,0.1) 50%, rgba(40,40,20,0.5) 80%, rgba(40,40,20,0) 100%); background-image : -o-linear-gradient(left, rgba(210,210,180,0.1) 0%, rgba(210,210,180,0.4) 20%, rgba(210,210,180,0.1) 50%, rgba(40,40,20,0.5) 80%, rgba(40,40,20,0) 100%); background-image : -moz-linear-gradient(left, rgba(210,210,180,0.1) 0%, rgba(210,210,180,0.4) 20%, rgba(210,210,180,0.1) 50%, rgba(40,40,20,0.5) 80%, rgba(40,40,20,0) 100%); background-image : -webkit-linear-gradient(left, rgba(210,210,180,0.1) 0%, rgba(210,210,180,0.4) 20%, rgba(210,210,180,0.1) 50%, rgba(40,40,20,0.5) 80%, rgba(40,40,20,0) 100%); background-image : -ms-linear-gradient(left, rgba(210,210,180,0.1) 0%, rgba(210,210,180,0.4) 20%, rgba(210,210,180,0.1) 50%, rgba(40,40,20,0.5) 80%, rgba(40,40,20,0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77F0F0C8', EndColorStr='#00F0F0C8'); } .cover_shadow.pit2 .hard_bottom_border_width{ left : 0%; width : 100%; } .cover_shadow.pit2 .normal_left_border{ position : absolute; left : 0px; top : 0px; width:3px; height:100%; background-image : linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); background-image : -webkit-linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); background-image : -o-linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); background-image : -moz-linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); background-image : -ms-linear-gradient(left, rgba(240,240,200,0.4), rgba(240,240,200,0.2)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#66F0F0C8', EndColorStr='#33F0F0C8'); } .cover_shadow.pit2 .normal_left_body{ position : absolute; left : 2%; top : 0px; width:4px; height:100%; background-image : linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); background-image : -o-linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); background-image : -moz-linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); background-image : -webkit-linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); background-image : -ms-linear-gradient(left, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77F0F0C8', EndColorStr='#00F0F0C8'); } .cover_shadow.pit2.flip_x .normal_left_body{ position : absolute; left : 2%; top : 0px; width:4px; height:100%; background-image : linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); background-image : -o-linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); background-image : -moz-linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); background-image : -webkit-linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); background-image : -ms-linear-gradient(right, rgba(60,60,60,0.2) 0%, rgba(20,20,20,0.5) 50%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0.2) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#00F0F0C8', EndColorStr='#77F0F0C8'); } /*saddle stitching -saddle*/ .cover_shadow.saddle .hard_left_border{ position : absolute; left : 0px; top : 0px; width:2.4%; height:100%; background-image : linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); background-image : -o-linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); background-image : -moz-linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); background-image : -webkit-linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); background-image : -ms-linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#88CCCCCC', EndColorStr='#00CCCCCC'); } .cover_shadow.saddle .hard_left_body{ display:none; } .cover_shadow.saddle .hard_bottom_border_width{ left : 1.4%; width : 98.6%; } .cover_shadow.saddle .normal_left_border{ position : absolute; left : 0px; top : 0px; width:2.4%; height:100%; background-image : linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); background-image : -o-linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); background-image : -moz-linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); background-image : -webkit-linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); background-image : -ms-linear-gradient(left, rgba(240,240,200,0) 0%, rgba(240,240,200,0.5) 50%, rgba(240,240,200,0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#88CCCCCC', EndColorStr='#00CCCCCC'); } .cover_shadow.saddle .normal_left_body{ display : none; } /*loose leaf stitching -loose*/ .cover_shadow.loose .hard_left_border{ position : absolute; left : 0px; top : 0px; width:4px; height:100%; background-image : linear-gradient(left, rgba(240,240,200,0.8), rgba(240,240,200,0)); background-image : -o-linear-gradient(left, rgba(240,240,200,0.8), rgba(240,240,200,0)); background-image : -moz-linear-gradient(left, rgba(240,240,200,0.8), rgba(240,240,200,0)); background-image : -webkit-linear-gradient(left, rgba(240,240,200,0.8), rgba(240,240,200,0)); background-image : -ms-linear-gradient(left, rgba(240,240,200,0.8), rgba(240,240,200,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CCF0F0C8', EndColorStr='#00F0F0C8'); } .cover_shadow.loose .hard_left_body{ display : none; } .cover_shadow.loose .hard_bottom_border_width{ left : 0%; width : 100%; } .cover_shadow.loose .normal_left_border{ display : none; } .cover_shadow.loose .normal_left_body{ display : none; } /*catalog default shadow*/ .cover_shadow.catalog .hard_left_border{ position : absolute; left : 0px; top : 0px; width:2%; height:100%; background-image : linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -o-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -moz-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -webkit-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -ms-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#77151515', EndColorStr='#00DCDCB4'); } .cover_shadow.catalog .hard_left_body{ display : none; } .cover_shadow.catalog .hard_bottom_border_width{ left : 0.2%; width : 99.8%; } .cover_shadow.catalog .normal_left_border{ position : absolute; left : 0px; top : 0px; width:2%; height:100%; background-image : linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -o-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -moz-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -webkit-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); background-image : -ms-linear-gradient(left, rgba(20,20,20,0.5), rgba(240,240,200,0)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#88CCCCCC', EndColorStr='#00CCCCCC'); } .cover_shadow.catalog .normal_left_body{ display : none; } .leftShadow { position: absolute; top: 0px; right: 0px; height: 100%; z-index:5; pointer-events:none; -webkit-transform:translate3d(0,0,0); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, EndColorStr='#cc3f3f3f', StartColorStr='#007b7b7b'); background-image: linear-gradient(right, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); background-image: -o-linear-gradient(right, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); background-image: -moz-linear-gradient(right, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); background-image: -webkit-linear-gradient(right, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); background-image: -ms-linear-gradient(right, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); /*background-image: -webkit-gradient(linear, right top, left top, color-stop(0, rgba(60, 60, 60, 0.3)), color-stop(0.23, rgba(250, 250, 250, 0.05)), color-stop(0.28, rgba(255, 255, 255, 0.05)), color-stop(0.34, rgba(250, 250, 250, 0.05)), color-stop(0.54, rgba(50, 50, 50, 0.1)), color-stop(1, rgba(200, 200, 200, 0)));*/ } .rightShadow { position: absolute; top: 0px; left: 0px; height: 100%; z-index:5; pointer-events:none; -webkit-transform:translate3d(0,0,0); background-image: linear-gradient(left, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); background-image: -webkit-linear-gradient(left, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); background-image: -moz-linear-gradient(left, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); background-image: -o-linear-gradient(left, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); background-image: -ms-linear-gradient(left, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, EndColorStr='#00C8C8C8', StartColorStr='#CC5D5D5D'); } .upShadow { position: absolute; left: 0px; bottom: 0px; width: 100%; z-index:5; pointer-events:none; -webkit-transform:translate3d(0,0,0); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, EndColorStr='#cc3f3f3f', StartColorStr='#007b7b7b'); background-image: linear-gradient(bottom, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); background-image: -o-linear-gradient(bottom, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); background-image: -moz-linear-gradient(bottom, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); background-image: -webkit-linear-gradient(bottom, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); background-image: -ms-linear-gradient(bottom, rgba(60, 60, 60, 0.4) 0%, rgba(50, 50, 50, 0.1) 54%, rgba(200, 200, 200, 0) 100%); /*background-image: -webkit-gradient(linear, right top, left top, color-stop(0, rgba(60, 60, 60, 0.3)), color-stop(0.23, rgba(250, 250, 250, 0.05)), color-stop(0.28, rgba(255, 255, 255, 0.05)), color-stop(0.34, rgba(250, 250, 250, 0.05)), color-stop(0.54, rgba(50, 50, 50, 0.1)), color-stop(1, rgba(200, 200, 200, 0)));*/ } .downShadow { position: absolute; left: 0px; top: 0px; width: 100%; z-index:5; pointer-events:none; -webkit-transform:translate3d(0,0,0); background-image: linear-gradient(top, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); background-image: -webkit-linear-gradient(top, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); background-image: -moz-linear-gradient(top, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); background-image: -o-linear-gradient(top, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); background-image: -ms-linear-gradient(top, rgba(53, 53, 53, 0.5) 0%, rgba(53, 53, 53, 0.2) 40%,rgba(53, 53, 53, 0.1) 60%, rgba(200, 200, 200, 0) 100%); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, EndColorStr='#00C8C8C8', StartColorStr='#CC5D5D5D'); } .lyric{ width:190px; height:70px; position:absolute; right:55px; bottom:280px; background:rgba(0,0,0,0.6); border-radius:10px; color:#ffffff; padding:10px; font-size:15px; text-align:center; display:none; } .lyric .lyrics{ width:100%; left:0; top:0; position:relative; -webkit-animation: 0.1s ease-in-out; animation: 0.1s ease-in-out; } .lyric .on{ font-weight: bold; color: #36a3e1; } .lyric li{ list-style:none; line-height:20px; } .lyric .arrow{ border-width:6px 8px 6px 8px; border-style:solid; border-color:rgba(0,0,0,0.6) transparent transparent transparent; position:absolute; left:99px; top:100%; } .spirit{ width:140px; height:220px; position:absolute; right:90px; bottom:40px; z-index:1000; } .spirit .person{ width:140px; height:220px; position:absolute; left:0; top:0; } .spirit .shadow{ position:absolute; z-index:-1; left:0; right:0; bottom:0; margin:auto; } .Peter .shadow{ position:absolute; z-index:-1; left:-10px; right:0; bottom:-6px; margin:auto; width:90px; } .talk{ background-position:0 0; animation:talkmove 3s infinite steps(1, end) both; -webkit-animation:talkmove 3s infinite steps(1, end) both; } .stand{ background-position:280px 660px; animation:standmove 16s infinite steps(1, end) both; -webkit-animation:standmove 16s infinite steps(1, end) both; } .Alice{background:url("/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/Alice.png") no-repeat;} .Peter{background:url("/content/dam/hdfc-aem-microsites/htdocs/common/flipbook/files/icon/Peter.png") no-repeat;} @keyframes talkmove{ 0% { background-position:0 0; } 4% { background-position:-140px 0; } 8% { background-position:-280px 0; } 16% { background-position:-420px 0; } 20% { background-position:-560px 0; } 24% { background-position:-700px 0; } 28% { background-position:-840px 0; } 32% { background-position:-980px 0; } 36% { background-position:0 -220px; } 40% { background-position:-140px -220px; } 44% { background-position:-280px -220px; } 48% { background-position:-420px -220px; } 52% { background-position:-560px -220px; } 56% { background-position:-700px -220px; } 60% { background-position:-840px -220px; } 64% { background-position:-980px -220px; } 68% { background-position:0 -440px; } 72% { background-position:-140px -440px; } 76% { background-position:-280px -440px; } 80% { background-position:-420px -440px; } 84% { background-position:-560px -440px; } 88% { background-position:-700px -440px; } 92% { background-position:-840px -440px; } 96% { background-position:-980px -440px; } 100% { background-position:0 -660px; } } @keyframes standmove{ 0% { background-position:-280px -660px; } 12.5% { background-position:-420px -660px; } 25% { background-position:-560px -660px; } 37.5% { background-position:-700px -660px; } 50% { background-position:-840px -660px; } 62.5% { background-position:-980px -660px; } 75% { background-position:0 -880px; } 87.5% { background-position:-140px -880px; } 100% { background-position:-280px -880px; } }