.showbiz-container { z-index:10; position: relative;} .sb-clear { clear:both} /********************************************************* - NAVIGATION SETTINGS - USE STYLE CLASS IN THE SHOWBIZ NAVIGATION CONTAINER **********************************************************/ .showbiz-navigation { position: relative; z-index: 999; } .showbiz-navigation.center { text-align:center;} .sb-navigation-left, .sb-navigation-right, /**/ .sb-navigation-play { cursor:pointer; border-radius: 3px; -moz-border-radius: 3px;-webkit-border-radius: 3px;display:inline-block; padding:1px 3px; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .sb-navigation-left2, .sb-navigation-right2, /**/ .sb-navigation-play { cursor:pointer; border-radius: 50%; -moz-border-radius: 50%;-webkit-border-radius: 50%;display:inline-block; border: solid 2px #c7cace; width: 32px; height:32px; text-align: center; vertical-align: middle; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .sb-navigation-left3, .sb-navigation-right3, /**/ .sb-navigation-play { cursor:pointer; border-radius: 50%; -moz-border-radius: 50%;-webkit-border-radius: 50%;display:inline-block; border: solid 2px #c7cace; width: 32px; height:32px; text-align: center; vertical-align: middle; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .sb-navigation-left4, .sb-navigation-right4, /**/ .sb-navigation-play { cursor:pointer; border-radius: 50%; -moz-border-radius: 50%;-webkit-border-radius: 50%;display:inline-block; border: solid 2px #c7cace; width: 32px; height:32px; text-align: center; vertical-align: middle; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /**/ .sb-navigation-play { margin-right:5px;} .sb-navigation-left { margin-right:5px;} .sb-navigation-left i, .sb-navigation-right i, /**/ .sb-navigation-play i { font-size:22px; color:#fff; } .sb-navigation-left.notclickable { cursor:default; -moz-opacity:0.3; filter:alpha(opacity=30); opacity:0.3;} .sb-navigation-right.notclickable { cursor:default; -moz-opacity:0.3; filter:alpha(opacity=30); opacity:0.3;} .sb-navigation-left2.notclickable { cursor:default; -moz-opacity:0.3; filter:alpha(opacity=30); opacity:0.3;} .sb-navigation-right2.notclickable { cursor:default; -moz-opacity:0.3; filter:alpha(opacity=30); opacity:0.3;} .sb-navigation-left3.notclickable { cursor:default; -moz-opacity:0.3; filter:alpha(opacity=30); opacity:0.3;} .sb-navigation-right3.notclickable { cursor:default; -moz-opacity:0.3; filter:alpha(opacity=30); opacity:0.3;} .sb-navigation-left4.notclickable { cursor:default; -moz-opacity:0.3; filter:alpha(opacity=30); opacity:0.6;} .sb-navigation-right4.notclickable { cursor:default; -moz-opacity:0.3; filter:alpha(opacity=30); opacity:0.6;} .sb-hidden { display:none;} /*** WHITE NAV BUTTONS ***/ .sb-nav-light .sb-navigation-left, .sb-nav-light .sb-navigation-right, /**/ .sb-nav-light .sb-navigation-play { background:#fff; border:1px solid #d5d5d5; } .sb-nav-light.showbiz-navigation i { color:#777; } .sb-nav-light .sb-navigation-left:hover, .sb-nav-light .sb-navigation-right:hover { border:1px solid #b5b5b5;} .sb-nav-light .sb-navigation-left.notclickable:hover, .sb-nav-light .sb-navigation-right.notclickable:hover { border:1px solid #d5d5d5;} /*** GREY BUTTONS ***/ .sb-nav-grey .sb-navigation-left.notclickable:hover, .sb-nav-grey .sb-navigation-right.notclickable:hover, .sb-nav-grey .sb-navigation-left, .sb-nav-grey .sb-navigation-right, /**/ .sb-nav-grey .sb-navigation-play { background: #919191; background: -moz-linear-gradient(top, #919191 0%, #6b6b6b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#919191), color-stop(100%,#6b6b6b)); background: -webkit-linear-gradient(top,  #919191 0%,#6b6b6b 100%); background: -o-linear-gradient(top,  #919191 0%,#6b6b6b 100%); background: -ms-linear-gradient(top,  #919191 0%,#6b6b6b 100%); background: linear-gradient(to bottom,  #919191 0%,#6b6b6b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#919191', endColorstr='#6b6b6b',GradientType=0 ); border-top:1px solid #919191; border-left:1px solid #969696; border-right:1px solid #969696; border-bottom:1px solid #6c6c6; } .sb-nav-grey .sb-navigation-left:hover, .sb-nav-grey .sb-navigation-right:hover, /**/ .sb-nav-grey .sb-navigation-play:hover { background: #919191; background: -moz-linear-gradient(top, #6b6b6b 0%, #919191 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6b6b6b), color-stop(100%,#919191)); background: -webkit-linear-gradient(top, #6b6b6b 0% ,#919191 100%); background: -o-linear-gradient(top,  #6b6b6b 0% ,#919191 100%); background: -ms-linear-gradient(top,  #6b6b6b 0% ,#919191 100%); background: linear-gradient(to bottom,  #6b6b6b 0% ,#919191 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b6b6b', endColorstr='#919191',GradientType=0 ); } /*** DARK GREY BUTTON ***/ .sb-nav-dark .sb-navigation-left.notclickable:hover, .sb-nav-dark .sb-navigation-right.notclickable:hover, .sb-nav-dark .sb-navigation-left, .sb-nav-dark .sb-navigation-right, /**/ .sb-nav-dark .sb-navigation-play { background:#555; border:1px solid #919191; border:1px solid #333; border-radius: 0px; -moz-border-radius: 0px;-webkit-border-radius: 0px; } .sb-nav-dark .sb-navigation-left:hover, .sb-nav-dark .sb-navigation-right:hover, .sb-nav-dark .sb-navigation-play:hover { background:#333} /*** RETRO NAV BUTTON ***/ .sb-nav-retro .sb-navigation-left.notclickable:hover, .sb-nav-retro .sb-navigation-right.notclickable:hover, .sb-nav-retro .sb-navigation-left, .sb-nav-retro .sb-navigation-right, .sb-nav-retro .sb-navigation-play { /*background:#fff;*/ color:#777; } .sb-nav-retro .sb-navigation-play { margin-top:10px; } .sb-nav-retro .sb-navigation-left:hover, .sb-nav-retro .sb-navigation-right:hover { /*background:#f1f1f1*/} .sb-nav-retro .sb-navigation-left { position:absolute; top:0; right:30px; margin-top:-40px; /*border-radius: 500px 0px 0px 500px; -moz-border-radius: 500px 0px 0px 500px; -webkit-border-radius: 500px 0px 0px 500px; -webkit-box-shadow: -4px 0px 5px 1px rgba(100,100,100,0.1); -moz-box-shadow: -4px 0px 5px 1px rgba(100,100,100,0.1); box-shadow: -4px 0px 5px 1px rgba(100,100,100,0.1); padding:10px 0px 10px 7px;*/ } .sb-nav-retro .sb-navigation-right { position:absolute; top:0; right:0px; margin-top:-40px; /*border-radius: 0px 500px 500px 0px; -moz-border-radius: 0px 500px 500px 0px; -webkit-border-radius: 0px 500px 500px 0px; -webkit-box-shadow: 4px 0px 5px 1px rgba(100,100,100,0.1); -moz-box-shadow: 4px 0px 5px 1px rgba(100,100,100,0.1); box-shadow: 4px 0px 5px 1px rgba(100,100,100,0.1); padding:10px 7px 10px 0px;*/ } .sb-nav-retro .sb-navigation-left2 { position:absolute; left:-46px; margin-top: 23%; z-index: 1000; /*border-radius: 500px 0px 0px 500px; -moz-border-radius: 500px 0px 0px 500px; -webkit-border-radius: 500px 0px 0px 500px; -webkit-box-shadow: -4px 0px 5px 1px rgba(100,100,100,0.1); -moz-box-shadow: -4px 0px 5px 1px rgba(100,100,100,0.1); box-shadow: -4px 0px 5px 1px rgba(100,100,100,0.1); padding:10px 0px 10px 7px;*/ } .sb-nav-retro .sb-navigation-right2 { position:absolute; right:-46px; margin-top: 23%; z-index: 10000; /*border-radius: 0px 500px 500px 0px; -moz-border-radius: 0px 500px 500px 0px; -webkit-border-radius: 0px 500px 500px 0px; -webkit-box-shadow: 4px 0px 5px 1px rgba(100,100,100,0.1); -moz-box-shadow: 4px 0px 5px 1px rgba(100,100,100,0.1); box-shadow: 4px 0px 5px 1px rgba(100,100,100,0.1); padding:10px 7px 10px 0px;*/ } .sb-nav-retro .sb-navigation-left3 { position:absolute; left:-46px; margin-top: 13%; z-index: 1000; /*border-radius: 500px 0px 0px 500px; -moz-border-radius: 500px 0px 0px 500px; -webkit-border-radius: 500px 0px 0px 500px; -webkit-box-shadow: -4px 0px 5px 1px rgba(100,100,100,0.1); -moz-box-shadow: -4px 0px 5px 1px rgba(100,100,100,0.1); box-shadow: -4px 0px 5px 1px rgba(100,100,100,0.1); padding:10px 0px 10px 7px;*/ } .sb-nav-retro .sb-navigation-right3 { position:absolute; right:-46px; margin-top: 13%; z-index: 10000; /*border-radius: 0px 500px 500px 0px; -moz-border-radius: 0px 500px 500px 0px; -webkit-border-radius: 0px 500px 500px 0px; -webkit-box-shadow: 4px 0px 5px 1px rgba(100,100,100,0.1); -moz-box-shadow: 4px 0px 5px 1px rgba(100,100,100,0.1); box-shadow: 4px 0px 5px 1px rgba(100,100,100,0.1); padding:10px 7px 10px 0px;*/ } .sb-nav-retro .sb-navigation-left4 { position:absolute; left:-46px; margin-top: 9%; z-index: 1000; /*border-radius: 500px 0px 0px 500px; -moz-border-radius: 500px 0px 0px 500px; -webkit-border-radius: 500px 0px 0px 500px; -webkit-box-shadow: -4px 0px 5px 1px rgba(100,100,100,0.1); -moz-box-shadow: -4px 0px 5px 1px rgba(100,100,100,0.1); box-shadow: -4px 0px 5px 1px rgba(100,100,100,0.1); padding:10px 0px 10px 7px;*/ } .sb-nav-retro .sb-navigation-right4 { position:absolute; right:-46px; margin-top: 9%; z-index: 10000; /*border-radius: 0px 500px 500px 0px; -moz-border-radius: 0px 500px 500px 0px; -webkit-border-radius: 0px 500px 500px 0px; -webkit-box-shadow: 4px 0px 5px 1px rgba(100,100,100,0.1); -moz-box-shadow: 4px 0px 5px 1px rgba(100,100,100,0.1); box-shadow: 4px 0px 5px 1px rgba(100,100,100,0.1); padding:10px 7px 10px 0px;*/ } .sb-retro-skin .showbiz-navigation i { color:#333} /*** RETRO NAV BUTTON ***/ .sb-nav-dark-retro .sb-navigation-left.notclickable:hover, .sb-nav-dark-retro .sb-navigation-right.notclickable:hover, .sb-nav-dark-retro .sb-navigation-left, .sb-nav-dark-retro .sb-navigation-right, .sb-nav-dark-retro .sb-navigation-play { background:#222; color:#777; } .sb-nav-dark-retro .sb-navigation-left2.notclickable:hover, .sb-nav-dark-retro .sb-navigation-right2.notclickable:hover, .sb-nav-dark-retro .sb-navigation-left2, .sb-nav-dark-retro .sb-navigation-right2, .sb-nav-dark-retro .sb-navigation-play { background:#222; color:#777; } .sb-nav-dark-retro .sb-navigation-left3.notclickable:hover, .sb-nav-dark-retro .sb-navigation-right3.notclickable:hover, .sb-nav-dark-retro .sb-navigation-left3, .sb-nav-dark-retro .sb-navigation-right3, .sb-nav-dark-retro .sb-navigation-play { background:#222; color:#777; } .sb-nav-dark-retro .sb-navigation-left4.notclickable:hover, .sb-nav-dark-retro .sb-navigation-right4.notclickable:hover, .sb-nav-dark-retro .sb-navigation-left4, .sb-nav-dark-retro .sb-navigation-right4, .sb-nav-dark-retro .sb-navigation-play { background:#222; color:#777; } .sb-nav-dark-retro .sb-navigation-play { margin-top:10px; } .sb-nav-dark-retro .sb-navigation-left:hover, .sb-nav-dark-retro .sb-navigation-right:hover, .sb-nav-dark-retro .sb-navigation-play:hover { background:#252525} .sb-nav-dark-retro .sb-navigation-left2:hover, .sb-nav-dark-retro .sb-navigation-right2:hover, .sb-nav-dark-retro .sb-navigation-play:hover { background:#252525} .sb-nav-dark-retro .sb-navigation-left3:hover, .sb-nav-dark-retro .sb-navigation-right3:hover, .sb-nav-dark-retro .sb-navigation-play:hover { background:#252525} .sb-nav-dark-retro .sb-navigation-left { position:absolute;top:50%;left:-26px;margin-top:-15px; border-radius: 500px 0px 0px 500px; -moz-border-radius: 500px 0px 0px 500px;-webkit-border-radius: 500px 0px 0px 500px; padding:10px 0px 10px 7px; } .sb-nav-dark-retro .sb-navigation-right { position:absolute;top:50%;right:-26px;margin-top:-15px; border-radius: 0px 500px 500px 0px; -moz-border-radius: 0px 500px 500px 0px;-webkit-border-radius: 0px 500px 500px 0px; padding:10px 7px 10px 0px;; } .sb-nav-dark-retro .sb-navigation-left2 { position:absolute;top:50%;left:-26px;margin-top:-15px; border-radius: 500px 0px 0px 500px; -moz-border-radius: 500px 0px 0px 500px;-webkit-border-radius: 500px 0px 0px 500px; padding:10px 0px 10px 7px; } .sb-nav-dark-retro .sb-navigation-right2 { position:absolute;top:50%;right:-26px;margin-top:-15px; border-radius: 0px 500px 500px 0px; -moz-border-radius: 0px 500px 500px 0px;-webkit-border-radius: 0px 500px 500px 0px; padding:10px 7px 10px 0px; } .sb-nav-dark-retro .sb-navigation-left3 { position:absolute;top:50%;left:-26px;margin-top:-15px; border-radius: 500px 0px 0px 500px; -moz-border-radius: 500px 0px 0px 500px;-webkit-border-radius: 500px 0px 0px 500px; padding:10px 0px 10px 7px; } .sb-nav-dark-retro .sb-navigation-right3 { position:absolute;top:50%;right:-26px;margin-top:-15px; border-radius: 0px 500px 500px 0px; -moz-border-radius: 0px 500px 500px 0px;-webkit-border-radius: 0px 500px 500px 0px; padding:10px 7px 10px 0px; } .sb-retro-dark-skin .showbiz-navigation i { color:#fff} /***************************************** - HOVER ICONS AND ANIMATIONS - ******************************************/ .linkicon, .lupeicon { position:absolute; left:50%;top:50%; -webkit-transform: translateZ(10); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; color:#fff; font-size:28px; font-weight:bold; margin-top:-16px; margin-left:-15px; } .linkicon.notalone { margin-left:8px;} .lupeicon.notalone { margin-left:-38px;} .showbiz .mediaholder .linkicon, .showbiz .mediaholder .lupeicon { top:65%; -webkit-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.320, 1.275); -moz-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.320, 1.275); -o-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.320, 1.275); -ms-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.320, 1.275); -moz-opacity:0; filter:alpha(opacity=0); opacity:0; } .showbiz li:hover .mediaholder .linkicon, .showbiz li:hover .mediaholder .lupeicon { top:50%; -moz-opacity:1; filter:alpha(opacity=100); opacity:1;} .showbiz li:hover .mediaholder .lupeicon { transition-delay: 0.1s; -moz-transition-delay: 0.1s; /* Firefox 4 */ -webkit-transition-delay: 0.1s; /* Safari and Chrome */ -o-transition-delay: 0.1s; /* Opera */ } /************************************************** - THE BASIC CONTAINER SETTINGS - NO NEED TO MODIFICATE ANYTHIN HERE ALL DETAIL SETTINGS CAN BE SET VIA THE SKINS **************************************************/ .showbiz ul, .showbiz li { list-style: none; margin:0; padding:0; } .showbiz ul li { position:relative; -webkit-transform: translateZ(10); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; margin-right:25px; } .showbiz .overflowholder { overflow: hidden;position: relative;width: 100%; z-index:2} /*.showbiz .overflowholder ul { width:100000px; position: absolute; top: 0px; left: 0px; } */ .showbiz .overflowholder ul li { float: left; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; position:relative; }*/ .showbiz .mediaholder { position:relative; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; background:transparent;padding:0px; border:none;} .showbiz .mediaholder_innerwrap { position:relative; overflow:hidden; width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;} .showbiz .mediaholder img { width:100%; position:relative; margin-bottom:-5px;} .showbiz .hovercover { width:100%;height:100%; position:absolute; top:0px; left:0px; background-color:#52bde9;background-color:rgba(82,189,233,0.85); -webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;-ms-transition: all 0.2s ease-out; -moz-opacity:0; filter:alpha(opacity=0); opacity:0; -webkit-transform: translateZ(10); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } .showbiz li:hover .hovercover { -moz-opacity:0.85; filter:alpha(opacity=85); opacity:0.85; } .popular-cate-pro{ width:100%; } .popular-cate-pro h2{ font-family: 'fv_almeloregular'; font-style: normal; font-weight: normal; font-size:17px; line-height:44px; color:#57545c; background-color:#f5f5f5; text-transform:uppercase; letter-spacing:1px; text-align:center; padding:0 0 0 0; margin:0 0 0 0; -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; border-bottom:1px dashed #d5d5d5; } .popular-cate-pro-img{ background:#fbfbfb; padding:20px 0; text-align: center; border-bottom:1px dashed #d5d5d5; } .popular-cate-protext{ width:100%; background:#f5f5f5; padding:0 0 0 0; -webkit-border-radius: 0px 0px 4px 4px; -moz-border-radius: 0px 0px 4px 4px; border-radius: 0px 0px 4px 4px; height:200px; text-align: left; } .popular-cate-protext ul{ padding:13px 0 0 20px; margin:0 0 0 0; } .popular-cate-protext ul li{ font-family: 'varela_roundregular'; font-style: normal; font-weight: normal; font-size:14px; line-height:22px; color:#737078; background-color:inherit; padding:0 0 0 0; margin:0 0 0 0; float: none !important; } .popular-cate-protext ul li a{ color:#737078; background-color:inherit; text-decoration:none; } .topsellerbox-sec{ width:100%; } .topsellerbox-sub01{ width:100%; background:#fff; -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; text-align:center; } .topsellerbox-sub01 img{ margin:25px 0; } .topsellerbox-sub01 h3{ font-family: 'varela_roundregular'; font-style: normal; font-weight: normal; font-size:16px; line-height:22px; color:#57545c; background-color:inherit; text-align:left; padding:0 0 0 15px; margin:0 0 0 0; } .topsellerbox-sub01 h4{ font-family: 'varela_roundregular'; font-style: normal; font-weight: normal; font-size:14px; line-height:22px; color:#737078; background-color:inherit; text-align:left; padding:0 0 0 15px; margin:0 0 0 0; } .topsellerbox-sub01 p{ font-family: 'proximanova-semiboldbook'; font-style: normal; font-weight: normal; font-size:16px; line-height:22px; color:#38d9a4; background-color:inherit; text-align:left; padding:5px 0 20px 15px; margin:0 0 0 0; } .topsellerbox-sub01 p span{ color:#737078; background-color:inherit; text-decoration:line-through; border-bottom:1px solid #737078; padding-bottom:2px solid #737078; } .topsellerbox-sub02{ width:100%; } .topsellerbox-sub02 p{ font-family: 'fv_almeloregular'; font-style: normal; font-weight: normal; font-size:17px; line-height:42px; color:#fff; letter-spacing:1px; background:#38d9a4; -webkit-border-radius: 0px 0px 4px 4px; -moz-border-radius: 0px 0px 4px 4px; border-radius: 0px 0px 4px 4px; text-align:center; } .topsellerbox-sub02 p a{ color:#fff; text-decoration:none; display:block; }