/* Disable plugin button */ .pluginLink.visible-xs.pluginGA { display: none !important; } /* add this class to any responsive image to make it sharp */ .sharpen { image-rendering:optimizeSpeed; image-rendering:-moz-crisp-edges; image-rendering:-o-crisp-edges; image-rendering:-webkit-optimize-contrast; image-rendering:crisp-edges; -ms-interpolation-mode:bicubic; } /* add this class to any image to make it responsive */ .responsive { max-width: 100%; width: auto\9; height: auto; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } @media print { .noprint {display:none !important;} a:link:after, a:visited:after { display: none; content: ""; } } /************************************************************************************************* Class for hidden label for inputs with placeholder only add class="placeholder" to the input. label must come after the input itself make extra individual css settings for the label itself for each place *************************************************************************************************/ input.placeholder:focus::-moz-placeholder { color:transparent; } input.placeholder:focus::-webkit-input-placeholder { color:transparent; } input.placeholder:focus:-ms-input-placeholder { color:transparent; } input.placeholder + label { position:absolute; left:-999px; cursor: text; opacity: 0; } input.placeholder:focus + label { transition: all 0.5s cubic-bezier(1, 0, 0, 1) 0s; opacity: 1; left: 0; } /*** end placeholder label classes ***/ /*UI TOOLTIP*/ .ui-tooltip,.qtip{position:absolute;left:-28000px;top:-28000px;display:none;max-width:280px;min-width:50px;font-size:10.5px;line-height:12px;}.ui-tooltip-fluid{display:block;visibility:hidden;position:static!important;float:left!important;}.ui-tooltip-content{position:relative;padding:5px 9px;overflow:hidden;border:1px solid #000001;text-align:left;word-wrap:break-word;overflow:hidden;}.ui-tooltip-titlebar{position:relative;min-height:14px;padding:5px 35px 5px 10px;overflow:hidden;border:1px solid #000001;border-width:1px 1px 0;font-weight:bold;}.ui-tooltip-titlebar+.ui-tooltip-content{border-top-width:0!important;}/*!Default close button class */ .ui-tooltip-titlebar .ui-state-default{position:absolute;right:4px;top:50%;margin-top:-9px;cursor:pointer;outline:medium none;border-width:1px;border-style:solid;}* html .ui-tooltip-titlebar .ui-state-default{top:16px;}.ui-tooltip-titlebar .ui-icon,.ui-tooltip-icon .ui-icon{display:block;text-indent:-1000em;}.ui-tooltip-icon,.ui-tooltip-icon .ui-icon{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}.ui-tooltip-icon .ui-icon{width:18px;height:14px;text-align:center;text-indent:0;font:normal bold 10px/13px Tahoma,sans-serif;color:inherit;background:transparent none no-repeat -100em -100em;}/*!Default tooltip style */ .ui-tooltip-default .ui-tooltip-titlebar,.ui-tooltip-default .ui-tooltip-content{border-color:#F1D031;background-color:#FFFFA3;color:#555;}.ui-tooltip-default .ui-tooltip-titlebar{background-color:#FFEF93;}.ui-tooltip-default .ui-tooltip-icon{border-color:#CCC;background:#F1F1F1;color:#777;}.ui-tooltip-default .ui-tooltip-titlebar .ui-state-hover{border-color:#AAA;color:#111;}.ui-tooltip .ui-tooltip-tip{margin:0 auto;overflow:hidden;z-index:10;}.ui-tooltip .ui-tooltip-tip,.ui-tooltip .ui-tooltip-tip *{position:absolute;line-height:.1px!important;font-size:.1px!important;color:#123456;background:transparent;border:0 dashed transparent;}.ui-tooltip .ui-tooltip-tip canvas{top:0;left:0;}#qtip-overlay{position:fixed;left:-10000em;top:-10000em;}#qtip-overlay.blurs{cursor:pointer;}#qtip-overlay div{position:absolute;left:0;top:0;width:100%;height:100%;background-color:black;opacity:.7;filter:alpha(opacity=70);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";}/*!Light tooltip style */ .ui-tooltip-light .ui-tooltip-titlebar,.ui-tooltip-light .ui-tooltip-content{border-color:#E2E2E2;color:#454545;}.ui-tooltip-light .ui-tooltip-content{background-color:white;}.ui-tooltip-light .ui-tooltip-titlebar{background-color:#f1f1f1;}/*!Dark tooltip style */ .ui-tooltip-dark .ui-tooltip-titlebar,.ui-tooltip-dark .ui-tooltip-content{border-color:#303030;color:#f3f3f3;}.ui-tooltip-dark .ui-tooltip-content{background-color:#505050;}.ui-tooltip-dark .ui-tooltip-titlebar{background-color:#404040;}.ui-tooltip-dark .ui-tooltip-icon{border-color:#444;}.ui-tooltip-dark .ui-tooltip-titlebar .ui-state-hover{border-color:#303030;}/*!Cream tooltip style */ .ui-tooltip-cream .ui-tooltip-titlebar,.ui-tooltip-cream .ui-tooltip-content{border-color:#F9E98E;color:#A27D35;}.ui-tooltip-cream .ui-tooltip-content{background-color:#FBF7AA;}.ui-tooltip-cream .ui-tooltip-titlebar{background-color:#F0DE7D;}.ui-tooltip-cream .ui-state-default .ui-tooltip-icon{background-position:-82px 0;}/*!Red tooltip style */ .ui-tooltip-red .ui-tooltip-titlebar,.ui-tooltip-red .ui-tooltip-content{border-color:#D95252;color:#912323;}.ui-tooltip-red .ui-tooltip-content{background-color:#F78B83;}.ui-tooltip-red .ui-tooltip-titlebar{background-color:#F06D65;}.ui-tooltip-red .ui-state-default .ui-tooltip-icon{background-position:-102px 0;}.ui-tooltip-red .ui-tooltip-icon{border-color:#D95252;}.ui-tooltip-red .ui-tooltip-titlebar .ui-state-hover{border-color:#D95252;}/*!Green tooltip style */ .ui-tooltip-green .ui-tooltip-titlebar,.ui-tooltip-green .ui-tooltip-content{border-color:#90D93F;color:#3F6219;}.ui-tooltip-green .ui-tooltip-content{background-color:#CAED9E;}.ui-tooltip-green .ui-tooltip-titlebar{background-color:#B0DE78;}.ui-tooltip-green .ui-state-default .ui-tooltip-icon{background-position:-42px 0;}/*!Blue tooltip style */ .ui-tooltip-blue .ui-tooltip-titlebar,.ui-tooltip-blue .ui-tooltip-content{border-color:#ADD9ED;color:#5E99BD;}.ui-tooltip-blue .ui-tooltip-content{background-color:#E5F6FE;}.ui-tooltip-blue .ui-tooltip-titlebar{background-color:#D0E9F5;}.ui-tooltip-blue .ui-state-default .ui-tooltip-icon{background-position:-2px 0;}/*!Add shadows to your tooltips in:FF3+,Chrome 2+,Opera 10.6+,IE6+,Safari 2+*/ .ui-tooltip-shadow{-webkit-box-shadow:1px 1px 3px 1px rgba(0,0,0,0.15);-moz-box-shadow:1px 1px 3px 1px rgba(0,0,0,0.15);box-shadow:1px 1px 3px 1px rgba(0,0,0,0.15);}.ui-tooltip-shadow .ui-tooltip-titlebar,.ui-tooltip-shadow .ui-tooltip-content{filter:progid:DXImageTransform.Microsoft.Shadow(Color='gray',Direction=135,Strength=3);-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Color='gray',Direction=135,Strength=3)";_margin-bottom:-3px;.margin-bottom:-3px;}/*!Add rounded corners to your tooltips in:FF3+,Chrome 2+,Opera 10.6+,IE9+,Safari 2+*/ .ui-tooltip-rounded,.ui-tooltip-rounded .ui-tooltip-content,.ui-tooltip-tipsy,.ui-tooltip-tipsy .ui-tooltip-content,.ui-tooltip-youtube,.ui-tooltip-youtube .ui-tooltip-content{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.ui-tooltip-rounded .ui-tooltip-titlebar,.ui-tooltip-tipsy .ui-tooltip-titlebar,.ui-tooltip-youtube .ui-tooltip-titlebar{-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;}.ui-tooltip-rounded .ui-tooltip-titlebar+.ui-tooltip-content,.ui-tooltip-tipsy .ui-tooltip-titlebar+.ui-tooltip-content,.ui-tooltip-youtube .ui-tooltip-titlebar+.ui-tooltip-content{-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;}/*!Youtube tooltip style */ .ui-tooltip-youtube{-webkit-box-shadow:0 0 3px #333;-moz-box-shadow:0 0 3px #333;box-shadow:0 0 3px #333;}.ui-tooltip-youtube .ui-tooltip-titlebar,.ui-tooltip-youtube .ui-tooltip-content{_margin-bottom:0;.margin-bottom:0;background:transparent;background:rgba(0,0,0,0.85);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000)";color:white;border-color:#CCC;}.ui-tooltip-youtube .ui-tooltip-icon{border-color:#222;}.ui-tooltip-youtube .ui-tooltip-titlebar .ui-state-hover{border-color:#303030;}.ui-tooltip-jtools{background:#232323;background:rgba(0,0,0,0.7);background-image:-moz-linear-gradient(top,#717171,#232323);background-image:-webkit-gradient(linear,left top,left bottom,from(#717171),to(#232323));border:2px solid #ddd;border:2px solid rgba(241,241,241,1);-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 0 12px #333;-moz-box-shadow:0 0 12px #333;box-shadow:0 0 12px #333;}.ui-tooltip-jtools .ui-tooltip-titlebar{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)";}.ui-tooltip-jtools .ui-tooltip-content{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)";}.ui-tooltip-jtools .ui-tooltip-titlebar,.ui-tooltip-jtools .ui-tooltip-content{background:transparent;color:white;border:0 dashed transparent;}.ui-tooltip-jtools .ui-tooltip-icon{border-color:#555;}.ui-tooltip-jtools .ui-tooltip-titlebar .ui-state-hover{border-color:#333;}.ui-tooltip-cluetip{-webkit-box-shadow:4px 4px 5px rgba(0,0,0,0.4);-moz-box-shadow:4px 4px 5px rgba(0,0,0,0.4);box-shadow:4px 4px 5px rgba(0,0,0,0.4);}.ui-tooltip-cluetip .ui-tooltip-titlebar{background-color:#87876A;color:white;border:0 dashed transparent;}.ui-tooltip-cluetip .ui-tooltip-content{background-color:#D9D9C2;color:#111;border:0 dashed transparent;}.ui-tooltip-cluetip .ui-tooltip-icon{border-color:#808064;}.ui-tooltip-cluetip .ui-tooltip-titlebar .ui-state-hover{border-color:#696952;color:#696952;}.ui-tooltip-tipsy{border:0;}.ui-tooltip-tipsy .ui-tooltip-titlebar,.ui-tooltip-tipsy .ui-tooltip-content{_margin-bottom:0;.margin-bottom:0;background:transparent;background:rgba(0,0,0,.87);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000)";color:white;border:0 transparent;font-size:11px;font-family:'Lucida Grande',sans-serif;font-weight:bold;line-height:16px;text-shadow:0 1px black;}.ui-tooltip-tipsy .ui-tooltip-titlebar{padding:6px 35px 0 10;}.ui-tooltip-tipsy .ui-tooltip-content{padding:6px 10;}.ui-tooltip-tipsy .ui-tooltip-icon{border-color:#222;text-shadow:none;}.ui-tooltip-tipsy .ui-tooltip-titlebar .ui-state-hover{border-color:#303030;}.ui-tooltip-tipped .ui-tooltip-titlebar,.ui-tooltip-tipped .ui-tooltip-content{border:3px solid #959FA9;filter:none;-ms-filter:none;}.ui-tooltip-tipped .ui-tooltip-titlebar{background:#3A79B8;background-image:-moz-linear-gradient(top,#3A79B8,#2E629D);background-image:-webkit-gradient(linear,left top,left bottom,from(#3A79B8),to(#2E629D));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)";color:white;font-weight:normal;font-family:serif;border-bottom-width:0;-moz-border-radius:3px 3px 0 0;-webkit-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}.ui-tooltip-tipped .ui-tooltip-content{background-color:#F9F9F9;color:#454545;-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.ui-tooltip-tipped .ui-tooltip-icon{border:2px solid #285589;background:#285589;}.ui-tooltip-tipped .ui-tooltip-icon .ui-icon{background-color:#FBFBFB;color:#555;}.ui-tooltip:not(.ie9haxors) div.ui-tooltip-content,.ui-tooltip:not(.ie9haxors) div.ui-tooltip-titlebar{filter:none;-ms-filter:none;} .ui-tooltip-slider {width:55px !important;} .ui-tooltip-slider *{font-family:Arial !important;font-size:10px !important;direction:rtl !important;text-decoration:none !important;text-align:center !important;white-space:nowrap !important;color:#ffffff !important;background:#1870b1 !important;border:0px !important;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .ui-tooltip-help, .ui-tooltip-help-ltr {width:180px !important;} .ui-tooltip-help *, .ui-tooltip-help-ltr *{ direction:rtl !important; text-decoration:none !important; text-align:right !important; color:#ffffff !important; background:#0AA6CC !important; text-shadow:0 0 !important; font-weight:normal !important; font-size:12px !important; } .ui-tooltip-help-ltr * { direction:ltr !important; text-align:left !important; } .ui-tooltip-img{width:220px !important;} .ui-tooltip-img *{ text-align:center !important; background:#efefef !important; border:0px !important; font-family:Arial !important; font-size:11px !important; direction:ltr !important; } .ui-tooltip-img .ui-tooltip-content { padding:10px 3px; } .ui-tooltip-img img { width:200px; width:auto; max-width:200px; margin-bottom:5px; } .ui-tooltip-theme{ width:auto !important; max-width:406px !important; } .ui-tooltip-theme *{ text-align:center !important; background:#efefef !important; border:0px !important; font-family:Arial !important; font-size:11px !important; direction:ltr !important; } .ui-tooltip-theme .ui-tooltip-content { padding:10px 3px; } .ui-tooltip-theme img { max-width:400px; margin-bottom:5px; } .ui-tooltip-title *{ font-size: 11px !important; direction:rtl !important; text-align:center !important; color:#eee !important; opacity:.9; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; text-shadow:0 0 !important; font-weight:normal !important; } .ui-tooltip { padding:0 !important; } .banner ol, .bannerContent, .banner ol li{ float:right; } /*** End Qtip **/ body{ /* direction:*/} .mainmenu-image a{ display: block; } .mainmenu-image a img{ margin-left: 3px; margin-top: 10px; } .mykaraoke .mainmenu-image img{ margin-left: 3px; margin-top: 18px; } .mainmenu .navbar-nav li .dropdown-menu#userData{ padding: 22px 0 42px 0; } .innerFont{ display: inline-block; width: 49px; height: 46px !important; } i.innerFont{ color: #d1dc00; font-size: 1.9em; font-weight: 900; } i.i-x.innerFont{ color:#464646; } .form-login-new a{ padding-right: 10px; } .backToMenu{ cursor: pointer; } body.active{overflow: hidden;} /* custom styles 11/18/2015 */ .performerLink { text-decoration: none !important; } .adsSongs li{ position: relative; background: #c9c8c8; margin-bottom: 2px!important; } .adsSongs .adsSongBg{ position: absolute; top:0; left:0; height: 100%; width: 30%; background: url(../images/adsSongBg.png) top left no-repeat; background-size: auto 100%; } .songs.w50{ width:50%; } .description .songViews{ color: #a7a7a7; float: left; margin-top: -23px; } .inlineBlock{ display: inline-block; } @font-face { font-family: 'Alef'; src: url('../fonts/Alef-Regular.eot'); src: url('../fonts/Alef-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Alef-Regular.woff') format('woff'), url('../fonts/Alef-Regular.ttf') format('truetype'), url('../fonts/Alef-Regular.svg#alefregular') format('svg'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Alef'; src: url('../fonts/Alef-Bold.eot'); src: url('../fonts/Alef-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Alef-Bold.woff') format('woff'), url('../fonts/Alef-Bold.ttf') format('truetype'), url('../fonts/Alef-Bold.svg#alefbold') format('svg'); font-weight: 700; font-style: normal; } @font-face { font-family: 'almoni'; src: url('../fonts/almoni-dl-aaa-400.eot'); src: url('../fonts/almoni-dl-aaa-400.eot?#iefix') format('embedded-opentype'), url('../fonts/almoni-dl-aaa-400.woff') format('woff'), url('../fonts/almoni-dl-aaa-400.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'almoni'; src: url('../fonts/almoni-dl-aaa-700.eot'); src: url('../fonts/almoni-dl-aaa-700.eot?#iefix') format('embedded-opentype'), url('../fonts/almoni-dl-aaa-700.woff') format('woff'), url('../fonts/almoni-dl-aaa-700.ttf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'karaoketv'; src:url('../fonts/karaoketv.eot?2r3b63'); src:url('../fonts/karaoketv.eot?#iefix2r3b63') format('embedded-opentype'), url('../fonts/karaoketv.ttf?2r3b63') format('truetype'), url('../fonts/karaoketv.woff?2r3b63') format('woff'), url('../fonts/karaoketv.svg?2r3b63#karaoketv') format('svg'); font-weight: 400; font-style: normal; } [class^="i-"], [class*=" i-"] { font-family: 'karaoketv'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .i-arrow-bottom:before { content: "\0049"; } .i-facebook:before { content: "\004A"; } .icon_addToCart{ width: 27px; height: 23px; fill: #b5165d; } .selectionInnerWrapper2 a:nth-child(2):hover{ color: #b5165d; } .i-favorites:before { content: "\0042"; } .i-favorites.checked:before { content: "\0041"; } .i-info:before { content: "\0043"; } .i-magnify:before { content: "\0044"; } .i-play:before { content: "\0045"; } .i-playlist:before { content: "\0046"; } .i-share:before { content: "\0047"; } .i-x:before { content: "\0048"; } /* == malihu jquery custom scrollbar plugin == Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller */ /* CONTENTS: 1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar. 4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes. */ /* ------------------------------------------------------------------------------------------------------------------------ 1. BASIC STYLE ------------------------------------------------------------------------------------------------------------------------ */ .mCustomScrollbar{ -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ } .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; } .mCustomScrollBox{ /* contains plugin's markup */ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr; } .mCSB_container{ /* contains the original content */ overflow: hidden; width: auto; height: auto; } /* ------------------------------------------------------------------------------------------------------------------------ 2. VERTICAL SCROLLBAR y-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_inside > .mCSB_container{ margin-right: 30px; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */ .mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */ .mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ position: absolute; width: 16px; height: auto; left: auto; top: 0; right: 0; bottom: 0; } .mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */ .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */ right: auto; left: 0; } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */ .mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; } .mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; } .mCSB_scrollTools .mCSB_draggerRail{ width: 2px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCSB_scrollTools .mCSB_dragger{ /* the draggable element */ cursor: pointer; width: 100%; height: 30px; /* minimum dragger height */ z-index: 1; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */ position: relative; width: 4px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; text-align: center; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown{ display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 3. HORIZONTAL SCROLLBAR x-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_horizontal.mCSB_inside > .mCSB_container{ margin-right: 0; margin-bottom: 30px; } .mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; } .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ width: auto; height: 16px; top: auto; right: 0; bottom: 0; left: 0; } .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */ .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 2px; margin: 7px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 30px; /* minimum dragger width */ height: 100%; left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 12px; /* auto-expanded scrollbar */ margin: 2px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 8px; /* auto-expanded scrollbar */ margin: 4px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonleft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonright{ display: block; position: absolute; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonleft{ left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonright{ right: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 4. VERTICAL AND HORIZONTAL SCROLLBARS yx-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_container_wrapper{ position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px; } .mCSB_container_wrapper > .mCSB_container{ padding-right: 30px; padding-bottom: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; } /* non-visible horizontal scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; } /* non-visible vertical scrollbar/RTL direction/left-side scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; } /* non-visible scrollbar/RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 0; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; /* non-visible scrollbar */ margin-left: 0; } /* non-visible horizontal scrollbar */ .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 5. TRANSITIONS ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonleft, .mCSB_scrollTools .mCSB_buttonright{ -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; transition: opacity .2s ease-in-out, background-color .2s ease-in-out; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */ .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{ -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; } /* ------------------------------------------------------------------------------------------------------------------------ 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS ------------------------------------------------------------------------------------------------------------------------ */ /* ---------------------------------------- 6.1 THEMES ---------------------------------------- */ /* default theme ("light") */ .mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; } .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } .mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.4); filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; } .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonleft, .mCSB_scrollTools .mCSB_buttonright{ background-image: url(mCSB_buttons.png); /* css sprites */ background-repeat: no-repeat; opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 0; /* sprites locations light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px */ } .mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -20px; /* sprites locations light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px */ } .mCSB_scrollTools .mCSB_buttonleft{ background-position: 0 -40px; /* sprites locations light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px */ } .mCSB_scrollTools .mCSB_buttonright{ background-position: 0 -56px; /* sprites locations light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px */ } .mCSB_scrollTools .mCSB_buttonUp:hover, .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonleft:hover, .mCSB_scrollTools .mCSB_buttonright:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonleft:active, .mCSB_scrollTools .mCSB_buttonright:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } /* theme: "dark" */ .mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.85); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.9); } .mCS-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonleft{ background-position: -80px -40px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonright{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme: "light-2", "dark-2" */ .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px 0; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -20px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonleft{ background-position: -40px -40px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonright{ background-position: -40px -56px; } /* theme: "dark-2" */ .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px 0; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -20px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonleft{ background-position: -120px -40px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonright{ background-position: -120px -56px; } /* ---------------------------------------- */ /* theme: "light-thick", "dark-thick" */ .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; background-color: #fff; background-color: rgba(255,255,255,0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 4px; margin: 6px 0; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 6px; margin: 5px auto; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px 0; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -20px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonleft{ background-position: -20px -40px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonright{ background-position: -20px -56px; } /* theme: "dark-thick" */ .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px 0; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -20px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonleft{ background-position: -100px -40px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonright{ background-position: -100px -56px; } /* ---------------------------------------- */ /* theme: "light-thin", "dark-thin" */ .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.1); } .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 2px; margin: 7px auto; } /* theme "dark-thin" */ .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonleft{ background-position: -80px -40px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonright{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */ .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); } .mCS-rounded.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; } .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 14px; margin: 0 1px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 14px; margin: 1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 16px; /* auto-expanded scrollbar */ height: 16px; margin: -1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 4px; /* auto-expanded scrollbar */ } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 16px; /* auto-expanded scrollbar */ width: 16px; margin: 0 -1px; } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 4px; /* auto-expanded scrollbar */ margin: 6px 0; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 -72px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -92px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonleft{ background-position: 0 -112px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonright{ background-position: 0 -128px; } /* theme "rounded-dark", "rounded-dots-dark" */ .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px -72px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -92px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonleft{ background-position: -80px -112px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonright{ background-position: -80px -128px; } /* theme "rounded-dots", "rounded-dots-dark" */ .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ background-color: transparent; background-position: center; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg=="); background-repeat: repeat-y; opacity: 0.3; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ height: 4px; margin: 6px 0; background-repeat: repeat-x; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px -72px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -92px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonleft{ background-position: -20px -112px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonright{ background-position: -20px -128px; } /* theme "rounded-dots-dark" */ .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII="); } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px -72px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -92px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonleft{ background-position: -100px -112px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonright{ background-position: -100px -128px; } /* ---------------------------------------- */ /* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */ .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-y; background-image: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-x; background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } /* theme "3d", "3d-dark" */ .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; } .mCS-3d.mCSB_scrollTools, .mCS-3d-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 8px; background-color: #000; background-color: rgba(0,0,0,0.2); box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 8px; margin: 4px 0; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 8px; margin: 4px auto; } .mCS-3d.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonleft{ background-position: -40px -112px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonright{ background-position: -40px -128px; } /* theme "3d-dark" */ .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); box-shadow: inset 1px 0 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonleft{ background-position: -120px -112px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonright{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "3d-thick", "3d-thick-dark" */ .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; } .mCS-3d-thick.mCSB_scrollTools_vertical, .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools_horizontal, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ bottom: 1px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4); width: 12px; margin: 2px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 12px; width: auto; } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #000; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonleft{ background-position: -40px -112px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonright{ background-position: -40px -128px; } /* theme: "3d-thick-dark" */ .mCS-3d-thick-dark.mCSB_scrollTools{ box-shadow: inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #fff; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonleft{ background-position: -120px -112px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonright{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "minimal", "minimal-dark" */ .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ right: 0; margin: 12px 0; } .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: 0; margin: 0 12px; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ left: 0; right: auto; } .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; } .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* theme: "minimal-dark" */ .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* ---------------------------------------- */ /* theme "light-3", "dark-3" */ .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ width: 6px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; } .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 6px; margin: 5px 0; } .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 12px; } .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 12px; margin: 2px 0; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonleft{ background-position: -40px -112px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonright{ background-position: -40px -128px; } /* theme "dark-3" */ .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonleft{ background-position: -120px -112px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonright{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */ .mCS-inset.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 12px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; margin: 3px 5px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 6px; margin: 5px 3px; position: absolute; width: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 12px; margin: 2px 0; } .mCS-inset.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonleft, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonleft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonleft{ background-position: -40px -112px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonright, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonright, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonright{ background-position: -40px -128px; } /* theme "inset-dark", "inset-2-dark", "inset-3-dark" */ .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonleft, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonleft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonleft{ background-position: -120px -112px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonright, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonright, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonright{ background-position: -120px -128px; } /* theme "inset-2", "inset-2-dark" */ .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; border-width: 1px; border-style: solid; border-color: #fff; border-color: rgba(255,255,255,0.2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ border-color: #000; border-color: rgba(0,0,0,0.2); } /* theme "inset-3", "inset-3-dark" */ .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } /* ---------------------------------------- */ .form-control::-moz-placeholder {opacity:1;color: #363f45;} .form-control:-ms-input-placeholder {opacity:1;color: #363f45;} .form-control::-webkit-input-placeholder {opacity:1;color: #363f45;} a{ -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } ::selection{color:#3e464c;background: #d1dc00} ::-moz-selection{color:#3e464c;background: #d1dc00} html{font-size:19px;min-height: 100%;} body{ /*font-family: 'Alef', Arial;*/ font-family: 'almoni', Arial; font-weight:400; font-size:100%; color:#464646; /* overflow-x: hidden;*/ min-height: 100%; } /*body.categoryPage{ font-weight:400; font-size:100%; color:#464646; overflow-x: hidden; min-height: 100%; }*/ .wrapper{ min-height: 100%; margin: 0 auto -195px; } .push{height:195px;} #skippy { background-color: #d5e14d; color: #464646; display: block; padding:10px; } .container{width:1140px;} .header-top{ padding:0 0 2px 0; background:#292e32; font-size:0.895em; color:rgb(255,255,255); color:rgba(255,255,255,.66); line-height:25px; } .header-top a{ color:rgb(255,255,255); color:rgba(255,255,255,.66); text-decoration:underline; } .header-top a:hover, .header-top a:focus{ color:rgb(213,225,77); color:rgba(213,225,77,.66); text-decoration:none; } .register{ margin-right:40px; margin-left: 24px; letter-spacing: 0.3px; } .header-bottom{ background:#3e464c; height:95px; position:relative; } .logo{margin-top:10px;} .logo a{display:block;} .search{ position:relative; margin-top:27px; margin-left: 0px; padding: 3px 4px; background:#b5b5b5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .search .form-control{ float:right; margin-right: 62px; padding:5px 0; width: 248px; height:35px; background:transparent; border:0; box-shadow:none; font-size:0.895em; } .region-song .col-md-4{ padding-left:0; width: 34.21%; } .btn{ float:left; width:58px; height:35px; background:#d1dc00; border:0; padding:0; color:#3e464c; font-size:0.895em; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } .btn:hover, .btn:focus{ background:#333031; color:#ffffff; } .search .i-magnify{ position:absolute; top:9px; right:17px; font-size: 21px !important; color:#676c70; } .dropdown-menu{ border:0; box-shadow:none; font-size:100%; display: block; opacity:0; z-index: -1; transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -webkit-transition: opacity .6s ease-in-out; } .navbar-nav li:hover .dropdown-menu, .open>.dropdown-menu{ opacity:1; z-index: 1; transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -webkit-transition: opacity .6s ease-in-out; } .mainmenu{ padding:0; } .mainmenu .navbar-nav li{position:static;} .mainmenu .navbar-nav > li > a{ padding: 40px 25px 35px 27px; font-size:0.895em; color:#ffffff; } .mainmenu .navbar-nav > li > a:hover, .mainmenu .navbar-nav > li > a:focus, .mainmenu .navbar-nav > li.active > a, .mainmenu .nav .open > a, .nav .open > a:hover, .mainmenu .nav .open > a:focus{ background-color:transparent; border:0; color:#d1dc00; } .mainmenu .navbar-nav li:last-child a{padding-left:0;} .mainmenu .caret{ margin-top: 1px; border-top:6px solid; margin-right: 6px; } .mainmenu .navbar-nav li .dropdown-menu{ left:0; padding:24px 0 26px 0; background:#d8d8d8; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; } .mainmenu .navbar-nav li .dropdown-menu li ul{ margin:0; padding:0; list-style:none; } .mainmenu .navbar-nav li .dropdown-menu ul{ margin:0; font-size:0.895em; } .mainmenu .navbar-nav li .dropdown-menu ul li{ margin:1px 0; list-style: none; } .mainmenu .navbar-nav li .dropdown-menu ul li a{ display:inline-block; padding:0 1px; padding-left:15px; color:#3e464c; text-decoration:none; font-size: 1.1em; } .catUl li{ float: right; width: 100%; } .mainmenu .navbar-nav li .dropdown-menu ul li a:hover, .mainmenu .navbar-nav li .dropdown-menu ul li a:focus{ background:#b7b7b7; font-weight:700; } .mainmenu .navbar-nav li .dropdown-menu .mainmenu-image{padding-right:0;text-align: left;} .mainmenu .navbar-nav li .dropdown-menu ul.categories{padding: 0px;} .mainmenu .navbar-nav li .dropdown-menu .categories ul{padding-right:257px;} .mainmenu .navbar-nav li .dropdown-menu .categories ul .col-md-4{padding-right:0;padding-left:0;} .mainmenu .navbar-nav li .dropdown-menu .mykaraoke ul{padding-right:395px;} .mainmenu .navbar-nav li .dropdown-menu ul li.mykaraoke-favorites{ margin-right:-50px; font-weight:700; margin-bottom: 3px; } .mainmenu .navbar-nav li .dropdown-menu .mykaraoke-favorites a:hover, .mainmenu .navbar-nav li .dropdown-menu .mykaraoke-favorites a:focus{ background:transparent; } .mainmenu .navbar-nav li .dropdown-menu .mykaraoke-favorites i, .mainmenu .navbar-nav li .dropdown-menu .mykaraoke-favorites span{ float:right; margin-left:13px; line-height:28px; } .mainmenu .navbar-nav li .dropdown-menu .mykaraoke-favorites .i-favorites{font-size:28px;} .mainmenu .navbar-nav li .dropdown-menu ul li.mykaraoke-playlist{ margin-right:-46px; font-weight:700; } .mainmenu .navbar-nav li .dropdown-menu .mykaraoke-playlist a:hover, .mainmenu .navbar-nav li .dropdown-menu .mykaraoke-playlist a:focus{ background:transparent; } .mainmenu .navbar-nav li .dropdown-menu .mykaraoke-playlist i, .mainmenu .navbar-nav li .dropdown-menu .mykaraoke-playlist span{ float:right; margin-left:16px; line-height:28px; margin-right: 2px; } .mainmenu .navbar-nav li .dropdown-menu .mykaraoke-playlist .plus{ font-size: 34px; font-style: normal; font-weight: 400; line-height:20px; } .mainmenu .navbar-nav li .dropdown-menu .mykaraoke-song{margin-right:-8px;} .mainmenu .navbar-nav li .dropdown-menu .mykaraoke .divider{ background-color: #3e464c; margin:9px 0 !important; margin-right:-4px !important; width:185px; } .mainmenu .navbar-nav li .dropdown-menu .mykaraoke ul:not('.mykaraoke-favorites') { -webkit-columns: 2 150px; -moz-columns: 2 150px; columns: 2 150px; } .banner{ width:100%; /*height:498px;*/ height:auto; } .gradient{ background:url(../images/bg-gradient.png) repeat-y center top; } .top-rated .container{ min-height: 570px; height:auto; } .container{position: relative;} .top-rated-text{margin-right:26px;} .top-rated .title{ margin-top:45px; margin-bottom: 10px; font-size:1.684em; } #new10List, #top10List{ padding: 5px 0 0 0; float: right; min-width: 210px; width:650px; max-width: 100%; } .songs{ padding:0; width: 29.3%; } #top10List .songs:nth-child(2) .song-text{ padding-right: 27px; } /*#top10List .songs:nth-child(2) .song-image{ padding-right: 15px; }*/ .songs ul{ margin:0; padding:0; list-style:none; } .songs ul li{ margin:23px 0 0 0; height:77px; overflow:hidden; } /* .songs ul li a{ display: table-row; color:#464646; font-size: 0.895em; text-decoration:none; } */ .song-no, .song-image, .song-text{ display: table-cell; vertical-align:middle; } .song-views{ color: #76797A; font-size: 15px; } #top10List .song-views,.category-list .song-views{ display: block; } .song-image{ vertical-align:top; } .song-no{ float:right; margin-top:15px; width:31px; height:31px; background:#ffffff; -webkit-border-radius: 31px; -moz-border-radius: 31px; border-radius: 31px; border:solid 1px #d1dc00; color:#464646; text-align:center; /*line-height:29px; font-size:1.353em;*/ line-height: 30px; font-size: 21px; } .song-image{padding-right:13px;position: relative;} .song-image img {width: 68px; max-height: 100%; border: 1px solid #cacaca;} .song-text{ padding-right:12px; /* width: 64%;*/ max-width: 64%; } .song-text a:hover, .song-text a:focus{ background:#b7b7b7; padding-right:5px; padding-left:15px; } .all-list{ float:left; margin:-50px 0 30px 0; margin-left:-210px; width:210px; height:50px; background:#ffffff; border:solid 1px #d1dc00; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; color:#3e464c; text-align:center; line-height:48px; font-size:1.053em; } .all-list:hover, .all-list:focus{ background:#d1dc00; color:#3e464c; text-decoration:none; } .party{background:#ffffff;} .party-image{ float:right; padding:102px 0 122px 0; width:48.85964912280702%; margin: 0 -7px 0 0; } .party-text{ padding:102px 3.070175438596491% 122px 3.070175438596491%; width:45%; font-size:1.053em; line-height:26px; } .party-text .title{ margin-top: -8px; margin-right: 3px; margin-bottom: 11px; font-size:1.600em; } .party-link{ display:inline-block; margin:20px 0 0 0; width:210px; height:50px; background:#ffffff; border:solid 1px #d1dc00; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; color:#3e464c; text-align:center; line-height:48px; font-size:1em; } .party-link:hover, .party-link:focus{ background:#d1dc00; color:#3e464c; text-decoration:none; } .product .container{position:relative;} .product-image{ position:absolute; top:60px; left: -135px; float:left; height:565px; } .product-text{ margin-right:50px; padding:0; width:505px; font-size:1.053em; line-height:34px; } .product-text .title{ margin:30px 0 15px 0; font-size:1.600em; } .product-text > .title{ margin:30px 0 -28px 0; } .product-text .clearfix .title{margin: 30px 7px 19px 0;} .product-link{ display:inline-block; margin: 13px 3px 60px 0; width:210px; height:50px; background:#ffffff; border:solid 1px #d1dc00; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; color:#3e464c; text-align:center; line-height:48px; font-size:1em; } .product-link:hover, .product-link:focus{ background:#d1dc00; color:#3e464c; text-decoration:none; } .app{ clear:both; background:#ffffff; } .app-image{ float:right; margin: 47px -11px 63px 41px; /*margin:47px 0 65px 0; margin-left:3.070175438596491%;*/ padding:0; width:48.24561403508772%; text-align:center; } .app-image img{max-width:100%;} .app-text{ margin-top:228px; padding:0; width:48.68421052631579%; font-size:1.053em; line-height:30px; } .app .title{ margin-top:0; margin-bottom:7px; font-size:1.600em; } .app-link{ display: inline-block; margin-top: 17px; margin-left: 18px; margin-right: 3px; } .footer{ border-top:solid 1px #959595; padding:11px 0 0 0; } .footerLinks{ padding: 0 9px 0 0; } .footermenu ul{ margin:0; padding:0; list-style:none; } .footermenu ul li{ display:inline; float:right; width:25%; padding-left:20px; color:#747474; font-size:0.947em; } .footermenu ul li a, .footermenu ul li a:hover, .footermenu ul li a:focus{ color:#747474; text-decoration:none; } .footermenu ul li a:hover, .footermenu ul li a:focus{font-weight:700;} .footermenu ul li ul li{ display:block; width:100%; padding:0; font-size:0.778em; line-height:normal; } .newsletternsocial{ float:left; padding:0; width: 372px; } .newsletter-title{ margin: 4px 0px 2px 0; font-size:0.895em; color:#747474; } .newsletter-form{ width:368px; height:50px; padding:3px; border:solid 1px #d1dc00; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; margin: 0 -4px 0 0; } .newsletter-form .form-group{margin:0;} .newsletter-form label, .newsletter-form .form-control{ margin:0; font-weight:400; font-size:0.895em; color:#c1c1c1; } .newsletter-form label{ width: 23%; padding-right:2px; line-height:42px; } .newsletter-form .form-control{ width: 52%; height:42px; border:0; box-shadow:none; padding:3px 0; } .newsletter-form .form-control::-moz-placeholder {color: #c1c1c1;} .newsletter-form .form-control:-ms-input-placeholder {color: #c1c1c1;} .newsletter-form .form-control::-webkit-input-placeholder {color: #c1c1c1;} .newsletter-form .btn{ width:22%; height:42px; font-weight:700; color:#3e464c; } .newsletter-form .btn:hover, .newsletter-form .btn:focus{color:#ffffff;} .social{ margin:20px 0 0 0; line-height:28px; } .social h4{ margin:0; margin-left: 18px; display:inline-block; font-size:0.947em; } .social a{color:#231f20;text-decoration:none;} .social .i-facebook{ border-top:solid 2px #231f20; border-bottom:solid 2px #231f20; padding:2px 5px; color:#231f20; vertical-align:middle; } .footer-bottom{ margin-top:29px; min-height:32px; height:auto !important; height:32px; background:#292e32; color:#ffffff; } .tyco{ float:left; margin: 9px 0; height: 20px; overflow: hidden; background:url(../images/tyco.png) no-repeat left center; font-size: 0.678em; color:#ffffff; text-decoration:none; padding: 0 5px 0; } .tyco span{ display: block; margin-left: -65px; opacity: 0; padding-left: 64px; line-height: 20px; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } .tyco:hover, .tyco:focus{ color:#ffffff; text-decoration:none; } .tyco:hover span, .tyco:focus span{ margin-left:5px; opacity: 1; } .section-title{ width:100%; height:185px; background-color:#d1dc00; background-repeat:no-repeat; background-position:center center; } .section-register{background-image:url(../images/title-register.jpg);} .section-title .title{ margin:43px 0 0 0; font-size:1.632em; color:rgba(255,255,255,.66); } .section-title .title span{ display:inline-block; margin:0 0 3px 0; padding:6px 30px 7px 30px; background:#292e32; } .region-register, .region-info{ padding:40px 0 120px 0; } .region-info{ min-height: 450px; height:auto !important; height: 450px; } .form-text{ font-size:1.053em; text-align:center; } .form-register{ margin:0 auto; width:320px; font-size:1.053em; text-align:center; } .facebook-connect{ display:block; margin:30px 0 0 0; width:100%; height:59px; background:url(../images/facebook-connect.png) no-repeat left center; } .facebook-connect span{ float:right; width:257px; height:59px; background:#3b5998; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color:#ffffff; line-height:59px; text-decoration:none; } .karaoke_loading { position: fixed; width: 100%; height: 100%; top:0px; background: rgba(0,0,0,0.5); z-index: 1050; } .bannerContent .karaoke_loading { position: absolute; z-index: 2; } .karaoke_loading .loading{ width: 100%; height: 100%; } .register-o{ margin:50px 0 0 0; border-top:solid 2px #ababab; } .register-o span{ display:block; margin:-17px auto 0 auto; width:48px; background:#ffffff; } .form-register .form-group{ display:block; margin:0 auto; width: 100%; border-bottom: solid 1px #dfdfdf; } .form-checkbox{ width: 100%; float: right; } .regBtn{ width: 100%; float: right; } .form-register .form-group label, .form-register .form-control{ float:right; height:77px; margin:0; padding:0; border:0; /*border-bottom:solid 1px #dfdfdf;*/ line-height: 77px; padding-right:5px; } .form-register .form-group:nth-child(3) label, .form-register .form-group:nth-child(3) .form-control{border:0;} .form-login .form-group:nth-child(2) label, .form-login .form-group:nth-child(2) .form-control{border:0;} .form-register .form-group label{ width:115px; padding-right:6px; font-weight:400; text-align:right; } .form-register .form-control{ width:195px; box-shadow:none; font-size:1em; } /*.form-checkbox{margin-right:-58px;}*/ .form-checkbox-check{ float:right; background:#ffffff; border:solid 2px #969696; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; cursor: pointer; height: 35px; line-height: 35px; margin:30px 0 0 0; text-align: center; width: 35px; } .form-checkbox-check input{display:none;} .form-checkbox.checked .form-checkbox-check{background:#ffffff url(../images/checkbox.png) no-repeat center center;} .form-checkbox label{ float:right; margin:0; margin:25px 0 0 0; margin-right:15px ; width: 83%; font-weight:400; font-size:1em; text-align:right; } .form-register .btn{ margin:30px 0 0 0; width:100%; height:50px; font-weight:700; font-size:1.111em; } #searchForm .btn{ font-size: 0.895em; } .form-login-forgot{ float:left; margin-top:28px; margin-left:-150px; color:#464646 !important; text-decoration:underline; font-size:0.850em; } .form-login-forgot:hover, .form-login-forgot:focus{text-decoration:none;} .form-login-new{margin:30px 0 0 0;} .form-login-new a{ color: #464646 !important; text-decoration:underline; } .form-login-new a:hover, .form-login-new a:focus{text-decoration:none;} .section-title{ width:100%; height:185px; background-color:#d1dc00; background-repeat:no-repeat; background-position:center center; background-size: cover; } .section-category{ height:290px; background-color:#fae76f; background-image:url(../images/title-category.jpg); } .section-category .title{margin-top:100px;} .region-category {padding:13px 0 60px;} .category-top{ font-size:1.053em; line-height:46px; } .category-top .category-filter, .category-top p{margin:0;} .category-top span{ display:inline-block; margin-left:15px; } .category-top .category-filter{ margin-left:10px; font-size:1em; line-height:46px; } .select { position: relative; display: block; width: 210px; height:50px; border:solid 1px #898989; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; background:#ffffff; } .select .fancyText { position: absolute; padding:10px 15px; width: 210px; height:50px; color: #000000; font-size:1em; line-height: 24px; } .select .fancySelect { float:right; position: relative; width: 100%; z-index: 2; height: 50px; opacity: 0; cursor: pointer; color: #000000; font-size:1em; } .select .i-arrow-bottom{ float:left; margin-top:-30px; margin-left:16px; font-size:10px; } .pagination{ margin:80px 0 0 0; width:100%; text-align:center; direction:rtl; } .pagination > li {display:inline-block;} .pagination > li > a, .pagination > li > span{margin-right:-4px;} .pagination > li > a, .pagination > li > span { border:0; border-right:solid 1px #464646; display:inline-block; float:none; width:37px; margin:18px 0; padding:0; position:relative; text-decoration:none; line-height:14px; color:#464646; font-size:0.895em; } .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus, .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus{ background:#ffffff; border-right:solid 1px #464646; color:#d1dc00; font-weight:700; } .pagination > li.pagination-last a{border:0;} .pagination > li:nth-child(2) > a, .pagination > li:nth-child(2) > span, .pagination > li:nth-child(2) > a:hover, .pagination > li:nth-child(2) > span:hover, .pagination > li:nth-child(2) > a:focus, .pagination > li:nth-child(2) > span:focus{border:0;} .pagination > li:first-child > a, .pagination > li:first-child > span, .pagination > li:last-child > a, .pagination > li:last-child > span{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; margin:0 35px; padding:17px 0; width:160px; border:solid 1px #d1dc00; direction:rtl; } .pagination > li:first-child > a:hover, .pagination > li:first-child > span:hover, .pagination > li:last-child > a:hover, .pagination > li:last-child > span:hover, .pagination > li:first-child > a:focus, .pagination > li:first-child > span:focus, .pagination > li:last-child > a:focus, .pagination > li:last-child > span:focus{ background:#d1dc00; color:#464646; font-weight:400; } .category-content{ padding:26px 0 0 0; position: relative; } .category-content .col-md-4{ padding-right:0; padding-left:2.631578947368421%; } ul.category-list{ margin:0; padding:0; list-style:none; } ul.category-list li{ margin:8px 0 0 0; padding: 2px 0; box-sizing: content-box; height:66px; overflow:hidden; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; position: relative; } ul.category-list li:hover a, ul.category-list li.hover a{ background:#e5e5e5; } ul.category-list li a{ display:block; color:#464646; font-size: 0.895em; text-decoration:none; /*position:relative;*/ } ul.category-list li .song-image, ul.category-list li .song-text{ display:inline-block; vertical-align:middle; } ul.category-list li .song-image{padding:0;} ul.category-list li .song-no + .song-image { padding-right:13px; } ul.category-list li .song-text{ line-height: 17px; padding-right: 8px; width: 55%; box-sizing: content-box; } .song-text{ line-height: 17px !important; } ul.category-list .song-add{ position:absolute; font-size:30px; height:30px; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; opacity:0; } ul.category-list .song-add{ top: calc(50% - 20px); top: -webkit-calc(50% - 20px); left:62px; } ul.category-list .song-add.addToPlayList{ top: calc(50% - 20px); top: -webkit-calc(50% - 20px ); left: 8px; } ul.category-list li:hover .song-add, ul.category-list li:focus .song-add{ opacity:1; } ul.category-list li .i-favorites:hover, ul.category-list li .i-playlist:hover, ul.category-list li .i-favorites:focus, ul.category-list li .i-playlist:focus{ color:#d1dc00; } ul.category-list li .i-favorites.active, ul.category-list li .i-playlist.active{ opacity:1; color:#d1dc00; } .region-song{padding:0 0 20px 0;} .region-song .nowPlay, .region-song .nextSongs{padding:0;} .region-song .nowPlay{width:65.78947368421053%;} .region-song .nextSongs{padding-right:15px;width: 34.21%;} .song-now, .song-next{ margin:15px 0; font-size:1.263em; font-weight:400; line-height:25px; } .media{ background:url(../images/image_750x510.jpg) no-repeat center center; padding-top: calc(360 / 640 * 100%); position: relative; width:100%; height: 0; /* height:510px;*/ } .media iframe { min-height: 100% !important; min-width: 100% !important; height: 100% !important; width: 100% !important; position: absolute; bottom: 0; right: 0; left: 0; top: 0; } .actions{ padding:15px 5px; border-bottom:solid 1px #c2c2c2; text-align:center; line-height:33px; } .actions a{ display:inline-block; margin:0 14px; text-decoration:none; color:#464646; font-size:0.895em; } .actions i{ margin-left: 10px; font-size:27px; color:#333031; vertical-align: middle; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } .actions a.arrow_right, .actions a.arrow_left{ margin:0; width:100%; height:33px; background:url(../images/arrow-right.png) no-repeat center top; -webkit-transition:none; -moz-transition:none; -o-transition:none; transition:none; } .actions a.arrow_left{background-image:url(../images/arrow-left.png);} .actions a:hover, .actions a.active, .actions a.active i, .actions a:hover i{ color:#d1dc00; } .actions a.arrow_right:hover, .actions a.arrow_right:focus, .actions a.arrow_left:hover, .actions a.arrow_left:focus{background-position:center bottom;} .description{margin:0 7px;} .description.disable { display: none; } .title{ margin:40px 0 0 0; font-size:1.684em; font-weight:400; } .performer{ margin:0; font-size:1.316em; color:#a7a7a7; } .subtitle{ margin:10px 0 0; font-size:0.895em; line-height:22px; } .song-next-list{ /*padding:32px 14px 10px 14px;*/ background:#e5e5e5; } .song-next-list ul{ margin:0; padding:0; list-style:none; } .song-next-list ul li{ /*margin-top:8px;*/ height:76px; overflow:hidden; } .song-next-list ul li a{color:#464646;text-decoration:none;} .song-next-list ul li .song-image, .song-next-list ul li .song-text {display: inline-block;} .song-next-list ul li .song-image {padding-right: 0;} .song-next-list ul li .song-text {width: 76%;} .region-pay{font-size:1.053em;} .region-pay-text{ margin:25px 0; text-align:center; } .cart_table{ width:79.29824561403509%; margin:0 auto; display:table; border-top:solid 1px #c9c9c9; border-bottom:solid 1px #c9c9c9; } .total_table{ margin:12px auto 0 auto; width:79.29824561403509%; height:50px; background:#ebebeb; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .cart_1, .cart_2, .cart_3, .cart_4, .cart_total_desc, .cart_total_sum, .coupon_desc{ display: table-cell; vertical-align: middle; } .cart_1, .cart_2, .cart_3, .cart_4{padding:18px 0;padding-right:30px;} .cart_total_desc, .cart_total_sum, .coupon_desc{padding:10px;font-weight:700;} .cart_1{width:70px;} .cart_2{width:330px;} .cart_3{width:260px;} .cart_total_desc{ padding-left:5px; /*width:690px;*/ text-align:left; } /*.cart_total_sum{width:80px;}*/ .coupon_desc a{ font-size:0.900em; color:#464646; text-decoration:none; font-weight:400; } .coupon_desc a:hover, .coupon_desc a:focus{font-weight:700;} .region-payform{ margin:65px 0 0 0; } .region-payform ul{ margin:0 auto; padding:0; list-style:none; width:79.2982%; } .region-payform ul li{ padding:16px 167px; border-top:solid 1px #c9c9c9; line-height:44px; } .region-payform ul li:first-child{ border-top:0; } .region-payform ul li.last-child{border:0;} .region-payform .form-group{margin:0;} .form-control-wide{ float:right; margin:16px 0 0 0; margin-right:43px; padding:0 18px; width:438px; height:50px; box-shadow:none; border:solid 1px #848484; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; font-size:1.053em; } .form-control-wide:focus{box-shadow:none;border-color:#848484;} .form-control-wide::-moz-placeholder {opacity:1;color: #b8b8b8;} .form-control-wide:-ms-input-placeholder {opacity:1;color: #b8b8b8;} .form-control-wide::-webkit-input-placeholder {opacity:1;color: #b8b8b8;} .form-credit{width:265px;margin-left:27px;} .form-cvv{width:145px;margin-right:0;padding:0 9px;} .form-security{ margin:8px 0 0 0; margin-right:47px; padding-right:26px; background:url(../images/lock.png) no-repeat center right; } .form-i{ float:right; margin:26px 0 0 0; margin-right:12px; width:29px; height:30px; background:url(../images/i.png) no-repeat center center; cursor:pointer; } .label-valid{ margin:16px 0 0 0; margin-right:45px; width:118px; color:#333031; font-weight:400; } .valid-select{ margin:16px 0 0 0; margin-left:27px; width:145px; border-color:#848484; } .valid-select .fancyText{width:143px;} .tooltip{font-size:14px;} .tooltip-inner{padding:3px 8px 4px 8px;} .region-payform .btn-big{ float:right; margin:12px 0 70px 0; margin-right:210px; width:438px; height:50px; font-size:1.053em; font-weight:700; } .form-radio-check{ float:right; margin:5px 0; background:#ffffff; border:solid 1px #808080; -webkit-border-radius:32px; -moz-border-radius:32px; border-radius:32px; width: 32px; height: 32px; line-height: 32px; text-align: center; cursor: pointer; } .form-radio-check span{ display:none; margin:5px; width: 20px; height: 20px; background:#d1dc00; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; } .form-radio-check input{display:none;} .form-radio.checked .form-radio-check span{display:block;} .form-radio label{ float:right; margin:0; margin-right:14px; font-size:1.053em; font-weight:700; text-align:right; } .form-radio label img{display:inline-block;margin-right:10px;} .song-list-item{ width:100%; padding:0 0 0 0; padding-right:14px; background:#e5e5e5; font-size:0.737em; line-height:18px; position: relative; } .song-list-name{ margin: 7px 0; width:90%; } .song-list-title{ margin:0; font-size:1.214em; font-weight:700; } .song-list-item p{margin:0;} .song-list-item ul{ margin:0; padding:0; list-style:none; width:10%; } /*.song-list-item ul li{position:relative;}*/ .song-list-item ul li span.song-list-more{ display: block; margin:-1px 0 0 0; padding:12px 15px 11px; width:35px; height:46px; cursor:pointer; float: left; } .pull-left li{ float:left; } .pull-left li ul li{ float:none; } .song-list-item ul li span.song-list-more span{ display:block; width:5px; height:5px; margin:0 0 5px 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background:#333031; } .song-list-item ul li ul{ position:absolute; z-index:2; display:none; top:45px; left:0; background: #3e464c; width:100%; font-size:1.214em; box-shadow:0 5px 5px rgba(0,0,0,.2); } .song-list-item ul li:hover, .song-list-item ul li:focus{background:#3e464c;} .song-list-item ul li:hover span.song-list-more span, .song-list-item ul li:focus span.song-list-more span{background:#d5e14d;} .song-list-item ul li:hover ul, .song-list-item ul li:focus ul{display:block;padding:0 0 20px 0;} .song-list-item ul li ul li a{ display:block; padding:20px 25px 0 25px; color:#ffffff; text-decoration:none; } .song-list-item ul li ul li a:hover{color:#d5e14d;} .song-search{ padding:0 13px; background: #e5e5e5; position:relative; } .song-search form{ height:42px; border-top:solid 1px #000000; border-bottom:solid 1px #000000; } .song-search .i-magnify{ float:right; margin:9px 0 0 0; font-size:20px; } .song-search input{ float:right; margin-right:25px; width:85%; height:40px; border:0; padding:0; background:transparent; } .song-playlist{ /*padding:4px 9px 10px 9px;*/ /* padding-right:13px;*/ overflow:auto; height:847px; } .song-playlist ul li{padding:8px;height:96px;} .song-playlist ul li a:hover, .song-playlist ul li:hover, .song-playlist ul li.open{background:#c9c8c8;} .song-playlist ul li:first-child{margin-top:0;} .song-playlist ul li .song-text {width:65%;font-size:0.737em;line-height:18px;} .song-playlist ul li .song-text strong{font-size:1.214em;} .mCSB_scrollTools{width:4px;} .mCS-dir-rtl > .mCSB_inside > .mCSB_container {margin-left: 4px;} .mCSB_scrollTools .mCSB_draggerRail{background-color:transparent;} .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000000;} .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000000;filter:"alpha(opacity=100)";-ms-filter:"alpha(opacity=100)"} .dragndrop{ display:inline-block; margin-left:2px; vertical-align: middle; width:31px; height:13px; cursor:all-scroll; } .dragndrop span{ display:block; margin:0 0 5px 0; width:100%; height:1px; background:#000000; } .song-playlist ul li .song-text{width: 55%;} .trash{ display:none; vertical-align: middle; width:20px; height:29px; background:url(../images/trash.png) no-repeat center center; cursor:pointer; } .song-playlist ul li:hover .trash, .song-playlist ul li:focus .trash, .song-playlist ul li.open .trash{display:inline-block;} .song-suggestions{ position:absolute; z-index:2; top:42px; right:13px; width:calc(100% - 26px); width:-webkit-calc(100% - 26px); background:#ffffff; box-shadow:0 5px 5px rgba(0,0,0,.2); padding:13px 47px 18px 47px; display: none; } .song-suggestions ul{ margin:0; padding:0; list-style:none; } .song-suggestions ul li{margin-top:5px;} .song-suggestions ul li a{ color:#464646; text-decoration:none; } .song-suggestions ul li .song-image, .song-suggestions ul li .song-text{display:inline-block;} .song-suggestions ul li .song-image{ padding:0; width:49px; } .song-suggestions ul li .song-image img{ width:100%; height:auto; } .song-suggestions ul li .song-text{ padding-right:6px; width:181px; font-size:0.684em; line-height: 16px; } .song-suggestions ul li .song-text strong{font-size:1.231em;} .modal-content{ background: #ebebeb; border:0; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; box-shadow:none; direction: rtl; } .modal-header { border-bottom:0; background:#3e464c; color:#ffffff; text-align:center; direction:rtl; } .modal-title{font-size:1.053em;} .modal-header .close, .modal-header .close:hover, .modal-header .close:focus{ margin-top: 4px; font-size:18px; color: #f5f6f6; filter:alpha(opacity=100); opacity:1; } .modal-body{ padding:20px; text-align:center; line-height:35px; direction:rtl; } .modal-inner{ width:100%; margin:0 auto; } .select-playlist{ margin-top: 20px; width:100%; } .select-playlist .fancyText{ width:330px; text-align:right; } .btn-popup{ margin:27px 0 15px 0; float:none; width:100%; height:50px; font-size:1.053em; font-weight:700; } .add-new-playlist{ display:inline-block; margin:20px 0 10px 0; font-size:1.053em; color:#333031; line-height:normal; } .add-new-playlist:hover, .add-new-playlist:focus{ color:#333031; text-decoration:none; font-weight:700; } .form-group-popup{margin:20px 0 0;} .form-group-popup .form-control{ border: 1px solid #848484; border-radius: 8px; box-shadow: none; font-size:1.053em; height: 50px; padding: 0 18px; width:100%; } .form-group-popup .form-control::-moz-placeholder {opacity:1;color: #c3c1c1;} .form-group-popup .form-control:-ms-input-placeholder {opacity:1;color: #c3c1c1;} .form-group-popup .form-control::-webkit-input-placeholder {opacity:1;color: #c3c1c1;} .bt-share{ margin:40px 0 20px; width:235px; height:50px; background:#ffffff; border:solid 1px #d1dc00; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; font-size:1.053em; font-weight:700; line-height:46px; color:#3e464c; text-decoration:none; } .bt-share:hover, .bt-share:focus{ background:#d1dc00; color:#3e464c; text-decoration:none; } .i-favorites-popup{ color:#d1dc00; font-size:66px; } hr{ border-top:solid 2px #333031; display: block; margin: 15px auto; width:74%; } .v{ display:inline-block; width:49px; height:46px !important; background:url(../images/v.png) no-repeat center center; } .x{ display:inline-block; width:49px; height:46px !important; background:url(../images/x.png) no-repeat center center; } .songs ul li .songbox{ display: table-row; color:#464646; font-size: 0.895em; text-decoration:none; } .songs ul li a{color: #464646;} .songs ul li a:hover, .songs ul li a:focus{text-decoration:none;} #aswift_0_expand, #aswift_1_expand{margin: auto !important; display: block !important;} .main_side_banner, .ip_side_banner{ width: 300px; position: absolute; top: 54%; left: 0; right: auto; -webkit-transform: translate(0%, -50%); -moz-transform: translate(0%, -50%); transform: translate(0%, -50%); } .ip_side_banner { right: -350px; } .banner{ position:relative; width:100%; margin:0 auto; background: #CCC url(../images/logopreload.jpg) no-repeat center center; /*min-height: 498px;*/ min-height: 294px; } .bannerContent{ position:relative; top:0; width: 100%; height: 100%; min-height: 294px; } .banner ol{ margin:0; /*margin-right: 6px;*/ margin-right: 0px; padding:0; list-style: none; text-align: center; } .banner ol li{ display: inline-block; /*margin-right:-6px;*/ width: 10%; position: relative; } .banner ol li img{ -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; width: 100%; } .banner ol li .banner-play{ display: block; position: absolute; top:0; right:0; width:100%; height: 100%; background:rgb(0,0,0,0); opacity: 0; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; color:#ffffff; text-decoration:none; font-size:25px; text-align: center; } .banner ol li:hover .banner-image{ opacity: 1; } .banner ol li:hover .banner-image img, .banner ol li a:focus + .banner-image img{ -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .banner ol li .banner-play:hover, .banner ol li .banner-play:focus{color:#ffffff;text-decoration:none;} .banner ol li:hover, .banner ol li:focus{z-index:2;} .banner ol li .banner-play span{ position:absolute; top:50%; margin-top:-25px; left:50%; margin-left: -25px; padding-left: 5px; width: 50px; height: 50px; border: 2px solid #ffffff; border-radius: 50%; line-height: 50px; text-align: center; } .unsubscribe .myinput{ border: 1px solid #848484; border-radius: 8px; box-shadow: none; float: right; font-size: 1.053em; height: 50px; padding: 0 18px; width: 438px; } .unsubscribe .btn{ clear:both; float: right; margin:10px 0 0 0; width: 438px; height: 50px; font-size: 1.053em; font-weight: 700; } .loading{ width:58%; height:380px; display: flex; flex-direction: column; justify-content: center; text-align: center; } .line-scale-pulse-out > div { background: #d1dc00; } .selectionInnerWrapper2{ display: table; padding: 0; width: 100%; } .selectionInnerWrapper2 a{ display: table-cell; } .arrowInnerWrapper{ width:33px; } .innerTotalTable{ width: 100%; float:left; } .song-next-list ul li:first-child{ margin:0; } .song-next-list ul li{ height:auto; } .song-next-list ul li a{ display: table; width: 100%; height: 100%; } .song-next-list ul li a span{ display:table-cell; vertical-align: middle; } .song-next-list ul li a span span { display:inline-block; } .song-next-list ul li .song-image{ width:25%; display: table-cell; } .song-next-list ul li .song-text{ width:75%; display: table-cell; } .actions{ display: table; } .actions .arrowInnerWrapper, .actions .selectionInnerWrapper{ display: table-cell; vertical-align: middle; } .actions.disable { opacity: 0.5; } .actions.disable .share, .actions.disable .add_to_favorites, .actions.disable .add_to_playlist { cursor: not-allowed; } .arrowInnerWrapper{ width:7%; } .selectionInnerWrapper{ width:100%; text-align: center; padding: 0 10px; } .selectionInnerWrapper a{ padding: 0 5px; vertical-align: middle; } .cart_total_desc, .cart_total_sum, .coupon_desc{ float:left; } .playlistItem{ display: table; width:100%; } .playlistItem .dragndrop, .playlistItem .itemDet, .playlistItem .trash{ display: table-cell; vertical-align: middle; } .playlistItem .itemDet{ width:auto; padding: 0 20px 0 0; } .playlistItem .trash{ width:20px; } .playlistItem .trash span{ display:none; height:29px; width:20px; background:url(../images/trash.png) no-repeat center center; cursor:pointer; } .playlistItem:hover .trash span, .playlistItem:focus .trash span{ display:inline-block; } .playlistItem .itemDet .song-image{ width:30%; } .nowPlay .media{ margin-top:0; } .cutrrentName{ color:#fff; text-align: center; background: #333333; height: 40px; line-height: 40px; } .cutrrentName.disable { display: none; } .innerCategoryUl{ width:33.3%; float:right; } html.openMenu, html.openMenu body{ overflow: hidden; } .song-playlist ul li a { display: inline-block; width: 78%; } .song-playlist ul li.active { background: #c9c8c8; } .song-playlist ul li .song-image { width: 31.5%; display: inline-block; } .song-playlist ul li .song-text { display: inline-block; width: 55%; } [data-href] {cursor: pointer;} .ui-state-highlight { background: none; border:2px dashed #c9c8c8; padding: 50px 0 !important; } .modal { text-align: center; padding: 0!important; } .modal:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px; /* Adjusts for spacing */ } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } .banner-image { opacity: 0.9; } .song-add { display: inline-block !important; } .needSave { display: block; background: #3e464c; padding: 6px 14px; color: #fff; } .needSave:hover { background: #d5e14d; text-decoration: none; color:#3e464c; } .innerMykaraoke{ padding:0; } .icon-checked { overflow: hidden; opacity: 0; height: 0; text-align: center; line-height: 48px; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; height: auto; } .animated.bounceIn{ -webkit-animation-duration: .9s; animation-duration: .9s; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } .icon-checked svg { height: 20px; } .icon-checked svg path { fill: #d1dc00; } .icon-checked.in { height: auto; } @keyframes blind-right { 0% { width: 0; opacity: 0; } 1% { width: 0; opacity: 1; } 100% { width: 35px; opacity: 1; } } .loader { float: left; display: none; background: #3e464c; border-radius: 4px; width: 22%; height: 42px; line-height: 54px; } .loader .loading { height: auto; width: 100%; } .loader .loading .line-scale-pulse-out>div { height: 20px; } .toggle_karaoke.disable { opacity: 0.5; cursor: not-allowed; } .arrow_left.disable { opacity: 0.3; cursor: not-allowed; } .arrow_right.disable { opacity: 0.3; cursor: not-allowed; } .add_to_favorites.disable { opacity: 0.5; cursor: not-allowed; } .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace-inactive { display: none; } .pace .pace-progress { background: #d1dc00; position: fixed; z-index: 2000; top: 0; right: 100%; width: 100%; height: 3px; } .svg-favorites { background-color: #464646; background-size: contain; width: 27px; height: 27px; display: inline-block; margin: 0px !important; -webkit-mask: url(../images/favorite.svg) top left / cover; mask-image: url(../images/favorite.svg) top left / cover; } .svg-favorites.checked, a:hover .svg-favorites.checked { background-color: transparent; background: url(../images/favoriteFill.svg) no-repeat; background-size: contain; -webkit-mask: inherit; mask-image: inherit; } a:hover .svg-favorites { background-color: #d1dc00; } #total_song { margin: 0; } .loaderW { background: #fff; width: 100%; height: 100%; position: absolute; z-index: 0; opacity: 0; transition: opacity 0.8s ease; } .loaderW.in { opacity: 0.8; z-index: 1; transition: opacity 0.8s ease; } #mainSearch { position: absolute; z-index: 1001; top: 42px; width: calc(100% - 8px); width: -webkit-calc(100% - 8px); background: #ffffff; box-shadow: 0 5px 5px rgba(0,0,0,.2); display: none; } #mainSearch ul { list-style: none; padding: 0; margin: 0; } #mainSearch li { float: none; } #mainSearch a { color: #464646; text-decoration: none; display: block; padding: 4px 35px; } #mainSearch a:hover { background: #eee; } #mainSearch .song-image { width: 75px; display: inline-block; vertical-align: middle; } #mainSearch .song-text { font-size: 0.9em; display: inline-block; line-height: 16px; } input:-webkit-autofill { transition: background-color 600s ease-in-out 0s; -webkit-text-fill-color: #000 !important; } .kobiRazon{ font-size: 0.7em; color: #fff; margin: 10px 0; margin-left:15px; float:right; } .akum{ display: block; margin:5px 0; float:right; } .akum span{ color:#fff; font-size: 0.7em; display: inline-block; margin-left: 5px; } .kobiRazon:hover, .kobiRazon:focus{ color: #fff; } .at4-icon-left{ display: none!important;} #shareSong .modal-body{ padding:30px 50px; } body.categoryPage{ font-family: 'almoni', Arial; font-weight:400; font-size:100%; color:#464646; overflow-x: hidden; min-height: 100%; } .menuitem:focus { box-shadow: 2px 2px 2px red inset; } .next.disabled, .previous.disabled { opacity: 0.4; } .accessibility_skip { padding: 0 !important; margin: 0 !important; } .accessibility_skip a{ line-height: 1.5em !important; font-size: 15px !important; position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; z-index: 999999; } /*.select .fancySelect:focus {*/ /*opacity: 1;*/ /*outline: 0;*/ /*}*/ .mykaraoke-song a{ display:block!important; } .accesContainer{ width: 38px; height: 38px; } .awb_bright #awbt, .hc_bb_color #awbt{ background-color: transparent!important; display: inline-block; } #awbt svg#awb-accessibility{ fill: #d1dc00; } .register, .login{ line-height: 38px; } .mCS-dir-rtl>.mCSB_inside>.mCSB_container:not(.mCS_no_scrollbar_y){ margin-left: 16px!important; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: rgba(0,0,0,.75)!important; } .banner ol li:hover .banner-play, .banner ol li:focus .banner-play, .banner ol li .banner-play:focus, .banner ol li .banner-play:focus{ background: rgba(0,0,0,.2); } .banner ol li:hover .banner-play, .banner ol li:focus .banner-play, .banner ol li .banner-play:focus{ -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); opacity: 1; z-index: 2; } .siteMapSection{ padding-top:59px; padding-bottom:60px; } .siteMapSection .section a{ color:#3e464c; } .langWrap{ margin-left:24px; position: relative; } .langWrap button{ background: none; border:0; color:rgba(255,255,255,.66); position: relative; line-height: 38px; padding-left: 20px; } .langWrap button:after{ content: ""; position: absolute; left:0; top:15px; border-top: 6px solid rgba(255,255,255,.66); border-right: 4px solid transparent; border-left: 4px solid transparent; } .langWrap ul li.active{ display: none; } .langWrap ul li{ float: none; display: block; text-align: center; } .langWrap ul.dropdown-menu{ min-width: 100px; right: -20px; } .innerWrapperWidth{ width: 600px; margin: 0 auto; } .payPreText{ margin:25px 0 0; padding: 25px 80px; border-top: solid 1px #c9c9c9; border-bottom: solid 1px #c9c9c9; text-align: center; } .innerWrapperWidth .formRow{ padding: 20px 0; float: right; width: 100%; } .innerWrapperWidth .formRow ul{ margin: 0; padding: 0; padding-right: 15px; list-style: none; display: inline-block; float: left; } .innerWrapperWidth .formRow>span{ float: left; } .innerWrapperWidth .formRow>label{ float: right; margin-top: 10px; position: relative; } .innerWrapperWidth .formRow input[type="submit"]{ float: left; background: #d1dc00; color:#3e464c; border:0; border-radius: 4px; padding: 7px 20px; font-size: 17px; } .innerWrapperWidth .formRow ul li{ display: inline-block; } .innerWrapperWidth .form-group{ position: relative; } .innerWrapperWidth .form-control-wide{ margin-right:0 ; width: 100%; } .innerWrapperWidth .form-control-wide.form-credit{ width: calc(60% - 20px); margin-left: 20px; } .innerWrapperWidth .form-i{ position: absolute; margin: 0; top: 25px; left: -40px; } .innerWrapperWidth h3{ margin: 40px 0; text-align: center; } .innerWrapperWidth .label-valid{ margin-right: 0; width: 33.3%; text-align: right; line-height: 50px; } .innerWrapperWidth .valid-select{ width: calc(33.3% - 10px); margin-left: 10px; } .innerWrapperWidth .valid-select + .valid-select{ margin-right: 10px; margin-left: 0; } .innerWrapperWidth .valid-select .fancyText{ color:#b8b8b8; text-align:right; } .innerWrapperWidth .form-security{ float: right; width: 100%; text-align: right; margin: 25px 0; padding-top: 11px; } .innerWrapperWidth .form-control-wide.form-cvv{ width: 40%; } .payPreText p{ margin: 0; } .paypalBtn{ display: inline-block; margin-right: 15px; background: #e1e1e1; padding: 7px 15px; border-radius: 4px; float: left; } .innerWrapperWidth .divider{ height: 1px; background: #c9c9c9; position: relative; } .innerWrapperWidth .divider span{ position: absolute; display: block; background: #fff; padding: 0 10px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .packDet{ display: inline-block; margin-left: 15px; ; } .packDet span{ display: inline-block; font-size: 19px; } .packDet>span{ margin-left: 10px; } .packDet span.spanColor{ color:#d1dc00; font-weight: 700; padding-right:10px; } #subscriptionPopup .modal-body p b{ padding:0 6px; } #subscriptionPopup .modal-body p a{ padding-right: 10px; color:#464646; } #subscriptionRegister .modal-body .subType{ display: inline-block; width:calc(33.3% - 5px); padding: 0 35px; } #subscriptionRegister .modal-body .subType + .subType{ border-right:1px solid #dcdcdc; } #subscriptionRegister .modal-body .subType .type{ font-size: 18px; font-weight: 700; } #subscriptionRegister .modal-body .subType .price{ font-size: 45px; margin-bottom: 7px; } #subscriptionRegister .modal-body .subType a{ display: block; border-radius: 4px; background: #d1dc00; color:#fff; font-size: 18px; } .formRow input[type="radio"]{ appearance: none; -moz-appearance: none; -webkit-appearance: none; opacity: 0; width: 20px; height: 20px; border-radius: 50%; margin-top: 0; vertical-align: middle; margin-left: 7px; } .formRow input[type="radio"] + span{ width: 20px; height: 20px; border-radius: 50%; position: absolute; top: calc(50% - 11px); right: 0; border: 1px solid #000!important; } .formRow input[type="radio"]:checked + span{ background: url("../images/radioChecked.png") 3px 3px no-repeat; background-size: 70%; } .errorP{ direction: ltr; } /*NEW*/ .search{float: right;} .pluginLink{float: right;color:#fff;font-size: 0.895em;line-height: 0.895em;margin-left: 15px;margin-top: 20px;} .pluginLink:hover, .pluginLink:focus{color:#fff;text-decoration: none;} .pluginLink span, .pluginLink img{float:right; } .pluginLink span{margin-top: 22px;margin-left: 10px;} .pluginName{text-transform: uppercase;color:#b1185c;font-weight: bold;} .pluginName span{color:#464646;} /*.top-rated .container{ background: url(../images/top10_new.png) no-repeat left bottom!important;}*/ .pluginStrip .party-text{/*padding-top:0;*/ } .pluginStrip .party-link span{text-transform: uppercase;color:#b1185c;font-weight: bold;} .pluginStrip .party-link span span{color:#464646;} .newA{ display: block; width: calc(100% - 650px); float: right; } .newA img{ margin: 0 auto; height: 467px !important; margin-top: 30px; margin-right: 44%; margin-bottom: 30px; } .noAdsButton{ margin-top: 30px; box-shadow: none; width: 146px; padding-top: 10px; color: #3e464c; } .noAdsButton:hover{ color:white } /*NEW*/ /************************************************************/ @media only screen and (max-device-width:1140px) { .container{ width:98%; margin: 0 auto; } } @media only screen and (max-device-width:1140px) and (min-device-width:992px){ .mainmenu .navbar-nav > li > a {padding: 38px 15px 38px 15px;} .header-bottom{height:auto;} .navbar-collapse.collapse{width:30%;} .searchWrap{width: 55%;} .search .form-control{width: 54%;} .footerLinks{width: 55%; float: right;padding: 0 15px 0 0;} .newsletternsocial{width:45%;} .newsletter-form{width:100%;} .newsletter-form label{width:26%;} .song-next-list{padding:14px;} .song-next-list ul li .song-image{width:30%;} .song-next-list ul li .song-text{width:66%;} .cart_total_desc{width: 550px;} .region-payform ul li{padding: 16px 110px;} .actions i{display: block;margin: 0 auto;} .party-image img{max-width: 100%;} .product-image{left: 0;height: 444px;width:46%;} .product-image img{max-width: 100%;} #top10List{width: auto;} .newA img{ display: none; } } @media only screen and (max-device-width:991px) and (min-device-width:768px){ .category-content .col-md-4{width:50%;} .product-image{left: 0;height: 444px; width:46%;} .product-image img{max-width: 100%;} .songs{float: right;} .app-text{float: left;margin-top: 180px;} .app-image{margin: 47px 0 63px 0;} .party-image img{max-width: 100%;} .party-text{float: left;} .header-bottom{height:auto;padding: 10px;} .logo{margin:0;} .search{ margin:0;} .mainmenu .navbar-nav > li > a {padding: 37px 20px 38px 20px;} .footerLinks{width: 55%; float: right;padding: 0 15px 0 0;} .newsletternsocial{width: 45%; float: right;} .newsletter-form{width:100%; } .newsletter-form label{width: 26%;} .region-song .nowPlay{width:100%;} .region-song .nextSongs{width:100%;padding: 0 10px;} .actions{display: table;} .actions .arrowInnerWrapper, .actions .selectionInnerWrapper{display: table-cell;vertical-align: middle;} .arrowInnerWrapper{ width:5%;} .selectionInnerWrapper{width:100%;text-align: center;padding: 0 10px;} .selectionInnerWrapper a{padding: 0 5px;vertical-align: middle;} .song-next-list ul li:first-child{margin: 0;} .song-next-list ul li:nth-child(2){margin: 0;} .song-next-list ul li:nth-child(3){margin: 0;} .song-next-list ul li{height:auto;width:50%;float:right;} .song-next-list{padding: 14px;height: 350px;} .song-next-list ul li .song-image{width:30%;} .song-next-list ul li .song-text{width:67%;} .region-payform ul li{width: 100%;padding: 0;} .cart_total_desc, .cart_total_sum, .coupon_desc{width:auto;padding: 10px;text-align: right;} .cart_1, .cart_2, .cart_3, .cart_4{padding:10px;width:auto;} .cart_4{padding-left:0;} .cart_1{padding-right: 0;} .region-payform{padding:25px 0;margin:0;} .form-radio{padding:10px 0;} .region-payform .btn-big{margin: 12px auto 0; float:none;display: block;} .innerTotalTable{width:60%;} .banner ol li{width:20%;height: auto;} .banner ol li img {width: 100%;height: auto;} .banner ol li .banner-play { width: 100%; height: 100%; } .kobiRazon{float:left;width:100%;margin: 0px 0 5px 0;text-align: left;} .akum{margin: 30px 0 5px;} .adsSongs li{margin-bottom: 0!important;} .adsSongs li:first-child{margin-left: 2px!important;} #top10List{width: auto;} .top-rated .container{background-size: 35%!important;} } @media only screen and (max-device-width:992px){ .banner ol li:hover .banner-play, .banner ol li:focus .banner-play, .banner ol li .banner-play:focus, .banner ol li .banner-play:focus{ background: rgba(0,0,0,.2); } .banner ol li:hover .banner-play, .banner ol li:focus .banner-play, .banner ol li .banner-play:focus{ -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); opacity: 1; z-index: 2; } .pluginLink{float: none;display: block; margin: 0;} .search{margin-top: 5px;} .mobileNoBg{background: transparent!important;} .newA{display: none;} } @media only screen and (max-device-width:767px) { .song-image img { width: 100%; max-height: 100%; border: 1px solid #cacaca; } .clearMobile {clear:both} .song-playlist ul li{padding:5px;padding-left:0;} .modal:before{height: 15%;} .headerWrapper{position: fixed;top:0;right:0;width:100%;background: #3e464c;} /* .navbar-nav li:hover .dropdown-menu{display: block;}*/ .region-song .col-md-4{width:100%;padding:0 15px;} .mainmenu .navbar-nav li .dropdown-menu ul li a{display: block;} .mainmenu .navbar-nav li .dropdown-menu{padding:20px 0;} .all-list{margin-top: 0;margin-bottom: 15px;width: 170px;height: 35px;line-height: 33px;font-size: 0.9em;position: absolute; right: calc(50% - 85px);right: -webkit-calc(50% - 85px);} .party-image{width:100%;padding:0 15px; margin: 0;} .party-image img{width:100%;height:auto;} .party-text{width:100%;padding:10px 15px 0 ;} .party-text .title{ margin-top: 0;font-size: 1.1em;text-align: center;} .party-text .lego-col{text-align: center; font-size: 0.8em;} .mainmenu-image{display: none;} .mainmenu .navbar-nav li ul.dropdown-menu .categories ul{padding-right: 0px; margin: 0;} .song-next-list{height: 400px;} .wrapper{min-height: 100%;margin: 0 auto -188px;} .push{height:201px;} .container {width: 100%;} .header-bottom {height: 102px;z-index: 2;} .logo {float: left !important;margin: 5px 0;margin-left: 15px;} .logo a {display: block;width: 73px;height: 37px;/*background: url(../images/m-logo.png) no-repeat center center;background-size: 73px 37px;*/} .logo a img{width: 100%; height: 100%;} .navbar-toggle {float: right;margin: 15px 15px 0 15px;padding: 0;width: 32px;border: 0;} .navbar-toggle .icon-bar {width: 100%;background: #d5e14d;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;} .navbar-toggle.collapsed .icon-bar.first {-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;margin-top: 0px;height: 3px;} .navbar-toggle.collapsed .icon-bar.second, .navbar-toggle.collapsed .icon-bar.third {-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;margin-top: 4px;height: 3px;} .navbar-toggle .icon-bar.first {-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;margin-top: 8px;height: 2px;} .navbar-toggle .icon-bar.second, .navbar-toggle .icon-bar.third {-ms-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;margin-top: -2px;height: 1px;} .mainmenu {background: #ffffff;border: 0;position: fixed;top: 47px;right: 0;height: calc(100% - 47px);height: -webkit-calc(100% - 47px);width: 100%;z-index: 9;} .login-mobile {padding: 15px 50px;font-size: 0.842em; color: #333031;} .login-mobile a {color: #333031;text-decoration: underline;} .mainmenu .navbar-nav {margin: 0;} .mainmenu .navbar-nav > li > a {padding: 10px 50px;font-size: 1em;color: #71716b;} .mainmenu .navbar-nav > li.active > a {background: #e4e4e4;} .searchWrap {float: none !important;margin: 47px 0 0 0;padding: 11px 15px;background: #292e32;display:flex;} .search form {background: #b5b5b5;height: 33px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .search .form-control {margin: 0 2%;width: 78%;height: 30px;font-size: 0.737em;} .search .btn {margin: 2px;width: 16%;height: 29px;text-indent: -1000px;overflow: hidden;background: #d1dc00 url(../images/m-search.png) no-repeat center center !important;background-size: 19px 19px;} .banner {width: 100%;height: auto; min-height: 233px;} .bannerContent {width: 100%;position: static;} .banner ol li {width: 20%;height: auto;} .banner ol li img {width: 100%;height: auto;} .banner ol li .banner-play {width: 100%;height: 100%;} .banner ol li .banner-play span {border: 1px solid #ffffff;font-size: 10px;height: 20px;line-height: 20px;margin-left: -10px;margin-top: -10px;padding-left: 0px;width: 20px;} .top-rated {background: #ffffff;} .top-rated .container {background-image: none !important;} .top-rated-text {margin: 0;} .top-rated .title {margin: 20px 0 0 0;font-size: 1.211em;text-align: center;} #top10List{position: relative;margin: 0px 0px 50px 0;width:100%} .songs {float: right;width: 50%;padding-right: 15px;position: static;} .songs:nth-child(2) {padding-right: 0; padding-left: 15px;} .song-image {padding: 0;width: 31.475409836065577%;} ul.category-list li .song-text {padding-right: 2.5%;font-size: 0.85em;width: 40%;} .product {padding: 30px 15px;} .product-text { width: 100%;margin: 0;} .product-text .title {margin: 0 0 5px;font-size: 0.9em;line-height: normal;} .product-text .lego-row {font-size: 0.742em;line-height: 25px;} .product-link, .party-link { clear: both;display: block;margin: 10px auto 30px auto;width: 152px;height: 36px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;font-size: 0.737em;line-height: 32px;} .product-image {position: relative;top: auto;left: auto;height: auto;} .product-image img {width: 88%;} .app {margin: 0 15px;} .app-text {margin: 0;padding: 0 0 20px;width: 100%;border-top: solid 1px #959595;line-height: normal;} .app-text p {margin: 0;padding: 11px 0;font-size: 0.684em;text-align: center;color: #747474;} .app-link {float: none;margin: 0 5px;width: 123px;height: 38px;background: url(../images/m-app-store.png) no-repeat center center;background-size: 123px 38px;} .app-play {float: none;margin: 0 5px;background-image: url(../images/m-app-play.png);} .footer {border: 0;padding: 0;} .newsletternsocial {float: none;width: 100%;padding: 0 15px;} .newsletter-title {margin: 0;padding: 11px 0;border-top: solid 1px #959595;font-size: 0.737em;text-align: center;} .newsletter-form {width: 100%;height: 40px;} .newsletter-form label {padding: 0;font-size: 0.737em;line-height: 32px;white-space: nowrap;text-indent: 8px;} .newsletter-form .form-control, .newsletter-form .btn {height: 32px;font-size: 0.737em;} .newsletter-form .form-control{margin-right: 8px;} .social {border-top: solid 1px #959595;margin: 23px 0 0 0;padding: 17px 15px 20px 15px;} .social h4 {font-size: 0.737em;} .social .i-facebook {float: left;margin: 3px 0 0;} .footer-bottom {margin: 0;} /*.tyco {margin-left: 15px;}*/ .section-title {height: 102px;background-size: auto 102px;} .section-title .title {margin-top: 20px;font-size: 1.158em;} .section-title .title span {padding: 4px 18px 6px 18px;padding-left: 37px;margin-bottom: 2px;} .region-register, .region-info {padding: 25px 0;min-height: 10px;height: auto !important;height: 10px;font-size: 80%;} .unsubscribe .myinput, .unsubscribe .btn {width: 100%;} .region-song .nowPlay{width:100%;} .region-song .nextSongs{width:100%;padding: 0;} .song-now, .song-next{font-size: 1.284em;margin: 5px 14px 15px 0;} .actions a{font-size: 0.8em;margin: 0 5px;text-align: center; line-height: 20px;} .actions a i{display: block; margin: 0 auto;} .description{margin: 0;width: 100%;float: right;padding: 0 10px;} .title{margin:20px 0 0 0;font-size: 1.284em;} .performer{font-size: 1.016em;} .subtitle{font-size: 0.795em;} .song-next-list{padding: 10px;} .song-next-list ul li:first-child{margin: 0;} /*.song-next-list ul li:nth-child(2){margin: 0;}*/ .song-next-list ul li{height:auto;width: 50%;float:right;margin:8px 0 0 0;} .song-next-list ul li .song-image{width:30%;} .song-next-list ul li .song-text{width:66%;} .selectionInnerWrapper a span{display: none;} .selectionInnerWrapper2{height:33px;} .form-register{width:100%;padding: 0 15px;} .facebook-connect span{width: calc(100% - 65px);width: -webkit-calc(100% - 65px);} .facebook-connect{margin:15px 0 0 0;width: 50%; margin:15px auto 0;} .form-register .form-group label{width:40%;} .form-register .form-control{width:60%;} .form-checkbox{margin: 10px 0 0 0;} .form-checkbox.checked .form-checkbox-check{background-size: 70%;} .form-checkbox-check{height: 25px;line-height: 25px;width:25px;-webkit-border-radius: 7px;-moz-border-radius: 7px; border-radius: 7px;margin: 6px 0;} .form-register .btn{margin:20px 0 0 0;} .form-checkbox label{margin:7px 15px 0 0;} .region-pay{font-size: 0.85em;width: 95%;margin: 0 auto;} .cart_table{width:100%;} .cart_1, .cart_2, .cart_3, .cart_4{padding:10px;width:auto;} .cart_4{padding-left:0;} .cart_1{padding-right: 0;} .total_table{width:100%;height:auto;display: table;} .cart_total_desc, .cart_total_sum, .coupon_desc{width:auto;padding: 7px;text-align: right;} .region-payform{margin: 25px auto;} .region-payform ul{width: 100%;} .region-payform ul li{width: 100%;padding: 0;} .form-radio-check span{margin: 4px;width: 15px;height: 15px;} .form-radio-check{width: 25px;height: 25px;line-height: 25px;-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px;} .region-payform{margin: 15px auto; width:95%;} .form-radio label{width: 70%;} .form-radio label{margin: -5px 14px 0 0;} .form-radio label{width: 85%;font-size: 0.8em;} .form-control-wide{width:100%;margin:15px 0 0 0;} .form-control-wide.form-cvv{width:80%;} .label-valid{margin:16px 0 0 0;width:30%;line-height: 25px;} .valid-select{width:33%;margin:16px 0 0 0;} .valid-select .fancyText{width:100%;} .form-group .select{margin:16px 0 0 1.5%;} .form-group .select:last-child{margin:16px 1.5% 0 0;} .form-security{margin:15px 0;font-size: 0.9em;line-height: 25px;} .paypalImg{width:100px;} .form-radio{padding:10px 0;} .region-payform .btn-big{width:100%;margin:15px 0 0 0;} .form-i{float: left;} .innerTotalTable{width:55%;} .song-search input{margin-right: 10px;width: 87%;font-size: 0.85em;} .song-list-item ul.pull-left{width: 10%;} .playlistItem .trash span{display: inline-block;} .app-link img{width:100%;height:100%;} .appDown{font-size: 0.7em;text-align: center;padding: 0 15px 15px 15px;} .region-song{padding: 0 0 10px 0;} .appLinkWrapper{text-align: center;} .app-link2{float:none;margin: 0 5px;} .form-login-forgot{position: absolute;top: 265%;right: 0;margin: 0;width: 100%;font-size: 1.053em;} .passInput{position:relative;} .category-top span:not(:first-child){display: none;} .category-top > span:first-child{width:100%;margin:0;} .category-top span{margin-left: 0;} .category-top .category-filter{display: none;} .category-top .select{width:100%;} .category-top .categoryTopInner{width:50%;font-size: 0.8em;} .category-top{padding: 0 10px;} .category-content{padding:10px;} .pagination{display: none;} .region-category{padding: 15px 0;} .loadMore{background: url(../images/loadMoreBtn.png) no-repeat 10% center; background-size: 15px;margin:0 10px;height: 40px;border: solid 1px #d1dc00;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;} .loadMore span{line-height: 40px;text-align: center;display: block;color: #3e464c;} .innerCategoryUl{width:50%;padding:0;} ul.category-list li{height:auto;} .bt-share{width:100%;margin: 20px 0 0 0;} .mainmenu .caret.hasChildren{background: url(../images/mobileMenuArr.png) no-repeat center center; background-size:7px;border-right:0;border-left:0;border-top:0;position: absolute;top: 0;left: 0;width: 50px;height: 100%;margin: 0;} .mainmenu ul li:hover a .caret.hasChildren{background: url(../images/mobileMenuArrHover.png) no-repeat center center;background-size:7px;} /*.categories, .mykaraoke{position: fixed;width: 100%;z-index: 9;height: 100%;top: 47px;right: 0;margin: 0;background: #fff;}*/ .dropdown-menu{transition: none;-moz-transition: none;-webkit-transition: none;transition: none;} .open>.dropdown-menu{position: fixed!important;height: calc(100% - 47px);width: 100%;z-index: 9;top: 47px;right: 0;margin: 0;background: #fff!important;transition: none;-moz-transition: none;-webkit-transition: none;-o-transition: opacity 0 ease-in;transition: none;} .categories ul, .mykaraoke ul{padding: 0; background-color: #fff;height: 100%;} .categories, .mykaraoke{overflow: auto;} .categories > div{width:100%; height:100%;} .categories > div > ul{width:100%; height:100%;} .mainmenu .navbar-nav li .dropdown-menu .categories ul, .mainmenu .navbar-nav li .dropdown-menu .mykaraoke ul{padding:0 50px;} .backToMenu{margin-top: 20px!important;margin-right: -27px!important;background: url(../images/mobileMenuArr_left.png) no-repeat right 9px;background-size: 7px; padding: 0 27px 10px 0;} .mainLi{border-top: 1px #b5b5b5 solid;padding: 10px 0 0 0;margin: 10px 0 0 0;} .mainmenu .navbar-nav li .dropdown-menu ul li.mykaraoke-favorites{border-top: 1px #b5b5b5 solid;padding: 20px 0 0 0; margin-right: 0;} .mainmenu .navbar-nav li .dropdown-menu ul li.mykaraoke-playlist{margin-right: 0;} ul.category-list .song-add{font-size: 25px;height: 25px;top: -webkit-calc(50% - 14px);left: 45px;} ul.category-list .song-add.addToPlayList{top: -webkit-calc(50% - 14px);} .icon-checked {line-height: 32px;} .icon-checked svg{height: 15px;} .loader{height: 32px;line-height: 45px;} .kobiRazon{float:left;width:100%;margin: 0px 0 5px 0;text-align: left;} .akum{margin: 5px 0 5px;} .songs ul li{height:auto;} .banner ol li{display: none} .banner ol li:nth-child(-n+10){display: inline-block;} .actions a:hover, .actions a:hover i{color: #333031; } .actions a.active i{color: #d1dc00;} ul.category-list .song-add{opacity:1;} .trash{background: url(../images/trashMobile.png) no-repeat center center;background-size: 19px;display: inline-block;} .dropdown-menu{display: none;overflow: auto;} body.active{overflow: hidden;} .adsSongs li{margin-bottom: 0!important;} .innerWrapperWidth{width: 80%;} .search{float: none;margin-top:0;flex-grow:1;} .pluginLink{margin-left: 15px;width: auto; padding: 10px 16px; height: auto; display: flex; align-items: center;} } @media only screen and (max-device-width:600px){ .songs ul li .songbox{font-size: 0.86em;width:100%;} .songs, .songs:nth-child(2), .songs.w50{float:none;width:100%!important;padding:0 15px;} /* .media{height: 400px;}*/ .song-next-list ul li{height:auto;width: 100%;float:right;} .innerTotalTable{width:70%;} .song-next-list ul li .song-image{width:15%;} .facebook-connect{width: 100%;} .category-content .col-md-4{padding-left:0;} .banner ol li {width: 33.3%;} .innerCategoryUl{width:100%;padding:0;} .song-next-list ul li { height: auto;} .song-text{padding-right: 20px;} .song-image{max-width: 25%;} .banner{min-height: 200px;} .banner ol li:nth-child(-n+10){display: none;} .banner ol li:nth-child(-n+6){display: inline-block;} #subscriptionRegister .modal-body .subType{width: 100%;} #subscriptionRegister .modal-body .subType + .subType{border-right: 0;} .modal-dialog{margin:0;} } @media only screen and (max-device-width:480px){ .song-playlist ul li .song-text strong{font-size: 1.114em;} .song-playlist ul li a{width: 70%;} /* .media{height: 250px;}*/ .selectionInnerWrapper a{padding: 0 5px;} .innerTotalTable{width:100%;} .title {margin: 10px 0 0 0;} .song-next-list {/*height: 195px;*/height: 300px;} .song-next-list ul li .song-image{width:30%;} .song-next-list ul li { height: auto;} .banner, .bannerContent{min-height: 213px;} .payPreText{padding: 25px;} .innerWrapperWidth .form-control-wide.form-credit{width: 100%; margin-left: 0px;} .innerWrapperWidth .form-i{position: relative;left: auto;} } @media only screen and (max-device-width:360px){ .song-next-list ul li{height:auto;width: 100%;float:none;} /*.song-next-list ul li:nth-child(2){margin: 8px 0 0 0;}*/ } /************************************************************/ @media (max-width:1140px) { .container{ width:98%; margin: 0 auto; } } @media (max-width:1140px) and (min-width:992px){ .mainmenu .navbar-nav > li > a {padding: 38px 15px 38px 15px;} .header-bottom{height:auto;} .navbar-collapse.collapse{width: 30%;} .searchWrap{width: 55%;} .search .form-control{width: 54%;} .footerLinks{width: 55%; float: right;padding: 0 15px 0 0;} .newsletternsocial{width:45%;} .newsletter-form{width:100%;} .newsletter-form label{width:26%;} .song-next-list{padding:14px;} .song-next-list ul li .song-image{width:30%;} .song-next-list ul li .song-text{width:66%;} .cart_total_desc{width: 550px;} .region-payform ul li{padding: 16px 110px;} .actions i{display: block;margin: 0 auto;} .party-image img{max-width: 100%;} .product-image{left: 0;height: 444px;width:46%;} .product-image img{max-width: 100%;} #top10List{width: auto;} } @media (max-width:991px) and (min-width:768px){ .category-content .col-md-4{width:50%;} .product-image{left: 0;height: 444px; width:46%;} .product-image img{max-width: 100%;} .songs{float: right;} .app-text{float: left;margin-top: 180px;} .app-image{margin: 47px 0 63px 0;} .party-image img{max-width: 100%;} .party-text{float: left;} .header-bottom{height:auto;padding: 10px;} .logo{margin:0;} .searchWrap{ margin:0;} .mainmenu .navbar-nav > li > a {padding: 37px 20px 38px 20px;} .footerLinks{width: 55%; float: right;padding: 0 15px 0 0;} .newsletternsocial{width: 45%; float: right;} .newsletter-form{width:100%; } .newsletter-form label{width: 26%;} .region-song .nowPlay{width:100%;} .region-song .nextSongs{width:100%;padding: 0 10px;} .actions{display: table;} .actions .arrowInnerWrapper, .actions .selectionInnerWrapper{display: table-cell;vertical-align: middle;} .arrowInnerWrapper{ width:5%;} .selectionInnerWrapper{width:100%;text-align: center;padding: 0 10px;} .selectionInnerWrapper a{padding: 0 5px;vertical-align: middle;} .song-next-list ul li:first-child{margin: 0;} .song-next-list ul li:nth-child(2){margin: 0;} .song-next-list ul li:nth-child(3){margin: 0;} .song-next-list ul li{height:auto;width:50%;float:right;} .song-next-list{padding: 14px;height: 350px;} .song-next-list ul li .song-image{width:30%;} .song-next-list ul li .song-text{width:67%;} .region-payform ul li{width: 100%;padding: 0;} .cart_total_desc, .cart_total_sum, .coupon_desc{width:auto;padding: 10px;text-align: right;} .cart_1, .cart_2, .cart_3, .cart_4{padding:10px;width:auto;} .cart_4{padding-left:0;} .cart_1{padding-right: 0;} .region-payform{padding:25px 0;margin:0;} .form-radio{padding:10px 0;} .region-payform .btn-big{margin: 12px auto 0; float:none;display: block;} .innerTotalTable{width:60%;} .banner ol li{width:20%;height: auto;} .banner ol li img {width: 100%;height: auto;} .banner ol li .banner-play { width: 100%; height: 100%; } .kobiRazon{float:left;width:100%;margin: 0px 0 5px 0;text-align: left;} .akum{margin: 30px 0 5px 0;} .adsSongs li{margin-bottom: 0!important;} #top10List{width: auto;} .top-rated .container{background-size: 35%!important;} } @media (max-width: 992px){ .pluginLink{float: none;display: block; margin: 0;} .search{margin-top: 5px;} .mobileNoBg{background: transparent!important;} .newA{display: none;} } @media (min-width: 767px){ .selectionInnerWrapper2 .toggle_karaoke{display:none;} } @media (max-width: 767px) { body{padding-bottom: 50px;} .clearMobile {clear:both} .modal:before{height: 15%;} .song-playlist ul li{padding:5px;padding-left:0;} .headerWrapper{position: fixed;top:0;right:0;width:100%;background: #3e464c; z-index: 2;} /* .navbar-nav li:hover .dropdown-menu{display: block;}*/ .mainmenu .navbar-nav li .dropdown-menu ul li a{display: block;} .innerMykaraoke ul li{float:right;width:100%;} .region-song .col-md-4{width:100%;padding:0 15px;} .mainmenu .navbar-nav li .dropdown-menu{padding:20px 0;} .all-list{margin-bottom: 15px;width: 170px;height: 35px;line-height: 33px;font-size: 0.9em;position: absolute; right: calc(50% - 85px);right: -webkit-calc(50% - 85px);} .party-image{width:100%;padding:0 15px; margin: 0;} .party-image img{width:100%;height:auto;} .party-text{width:100%;padding:10px 15px 0 ;} .party-text .title{ margin-top: 0;font-size: 1.1em;text-align: center;} .party-text .lego-col{text-align: center; font-size: 0.8em;} .mainmenu-image{display: none;} .mainmenu .navbar-nav li ul.dropdown-menu .categories ul{padding-right: 0px; margin: 0;} .song-next-list{height: 400px;} .wrapper{min-height: 100%;margin: 0 auto -188px;} .push{height:201px;} .container {width: 100%;} .header-bottom {height: 102px;z-index: 2;} .logo {float: left !important;margin: 5px 0;margin-left: 15px;} .logo a {display: block;width: 73px;height: 37px;/*background: url(../images/m-logo.png) no-repeat center center;background-size: 73px 37px;*/} .logo a img{width: 100%; height: 100%;} .navbar-toggle {float: right;margin: 15px 15px 0 15px;padding: 0;width: 32px;border: 0;} .navbar-toggle .icon-bar {width: 100%;background: #d5e14d;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;} .navbar-toggle.collapsed .icon-bar.first {-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;margin-top: 0px;height: 3px;} .navbar-toggle.collapsed .icon-bar.second, .navbar-toggle.collapsed .icon-bar.third {-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;margin-top: 4px;height: 3px;} .navbar-toggle .icon-bar.first {-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;margin-top: 8px;height: 2px;} .navbar-toggle .icon-bar.second, .navbar-toggle .icon-bar.third {-ms-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;margin-top: -2px;height: 1px;} .mainmenu {background: #ffffff;border: 0;position: fixed;top: 47px;right: 0;height: calc(100% - 47px);height: -webkit-calc(100% - 47px);width: 100%;z-index: 9;} .login-mobile {padding: 15px 50px;font-size: 0.842em; color: #333031;} .login-mobile a {color: #333031;text-decoration: underline;} .mainmenu .navbar-nav {margin: 0;} .mainmenu .navbar-nav > li > a {padding: 10px 50px;font-size: 1em;color: #71716b;} .mainmenu .navbar-nav > li.active > a {background: #e4e4e4;} .searchWrap {float: none !important;margin: 47px 0 0 0;padding: 11px 15px;background: #292e32;} .search form {background: #b5b5b5;height: 33px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .search .form-control {margin: 0 2%;width: 78%;height: 30px;font-size: 0.737em;} .search .btn {margin: 2px;width: 16%;height: 29px;text-indent: -1000px;overflow: hidden;background: #d1dc00 url(../images/m-search.png) no-repeat center center !important;background-size: 19px 19px;} .banner {width: 100%;height: auto; min-height: 233px;} .bannerContent {width: 100%;position: static;} .banner ol li {width: 20%;height: auto;} .banner ol li img {width: 100%;height: auto;} .banner ol li .banner-play {width: 100%;height: 100%;} .banner ol li .banner-play span {border: 1px solid #ffffff;font-size: 10px;height: 20px;line-height: 20px;margin-left: -10px;margin-top: -10px;padding-left: 0px;width: 20px;} .top-rated {background: #ffffff;} .top-rated .container {background-image: none !important;} .top-rated-text {margin: 0;} .top-rated .title {margin: 20px 0 0 0;font-size: 1.211em;text-align: center;} #top10List{position: relative;margin: 0px 0px 50px 0;width:100%;} .songs {float: right;width: 50%;padding-right: 15px;position:static;} .songs:nth-child(2) {padding-right: 0; padding-left: 15px;} .song-image {padding: 0;width: 31.475409836065577%;} ul.category-list li .song-text {padding-right: 2.5%;font-size: 0.85em;width: 40%;} .product {padding: 30px 15px;} .product-text { width: 100%;margin: 0;} .product-text .title {margin: 0 0 5px;font-size: 0.9em;line-height: normal;} .product-text .lego-row {font-size: 0.742em;line-height: 25px;} .product-link, .party-link { clear: both;display: block;margin: 10px auto 30px auto;width: 152px;height: 36px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;font-size: 0.737em;line-height: 32px;} .product-image {position: relative;top: auto;left: auto;height: auto;} .product-image img {width: 88%;} .app {margin: 0 15px;} .app-text {margin: 0;padding: 0 0 20px;width: 100%;border-top: solid 1px #959595;line-height: normal;} .app-text p {margin: 0;padding: 11px 0;font-size: 0.684em;text-align: center;color: #747474;} .app-link {float: none;margin: 0 5px;width: 123px;height: 38px;background: url(../images/m-app-store.png) no-repeat center center;background-size: 123px 38px;} .app-play {float: none;margin: 0 5px;background-image: url(../images/m-app-play.png);} .footer {border: 0;padding: 0;} .newsletternsocial {float: none;width: 100%;padding: 0 15px;} .newsletter-title {margin: 0;padding: 11px 0;border-top: solid 1px #959595;font-size: 0.737em;text-align: center;} .newsletter-form {width: 100%;height: 40px;} .newsletter-form label {padding: 0;font-size: 0.737em;line-height: 32px;white-space: nowrap;} .newsletter-form .form-control, .newsletter-form .btn {height: 32px;font-size: 0.737em;} .newsletter-form .form-control{margin-right: 8px;} .social {border-top: solid 1px #959595;margin: 23px 0 0 0;padding: 17px 15px 20px 15px;} .social h4 {font-size: 0.737em;} .social .i-facebook {float: left;margin: 3px 0 0;} .footer-bottom {margin: 0;} /*.tyco {margin-left: 15px;}*/ .section-title {height: 102px;background-size: auto 102px;} .section-title .title {margin-top: 20px;font-size: 1.158em;} .section-title .title span {padding: 4px 18px 6px 18px;padding-left: 37px;margin-bottom: 2px;} .region-register, .region-info {padding: 25px 0;min-height: 10px;height: auto !important;height: 10px;font-size: 80%;} .unsubscribe .myinput, .unsubscribe .btn {width: 100%;} .region-song .nowPlay{width:100%;} .region-song .nextSongs{width:100%;padding: 0;} .song-now, .song-next{font-size: 1.284em;margin: 5px 14px 15px 0;} .actions a{font-size: 0.8em;margin: 0 5px;text-align: center; line-height: 20px;} .actions a i{display: block; margin: 0 auto;} .description{margin: 0;width: 100%;float: right;padding: 0 10px;} .title{margin:20px 0 0 0;font-size: 1.284em;} .performer{font-size: 1.016em;} .subtitle{font-size: 0.795em;} .song-next-list{padding: 10px;} .song-next-list ul li:first-child{margin: 0;} /*.song-next-list ul li:nth-child(2){margin: 0;}*/ .song-next-list ul li{height:auto;width: 50%;float:right;margin:8px 0 0 0;} .song-next-list ul li .song-image{width:30%;} .song-next-list ul li .song-text{width:66%;} .selectionInnerWrapper a span{display: none;} .selectionInnerWrapper2{height:33px;} .form-register{width:100%;padding: 0 15px;} .facebook-connect span{width: calc(100% - 65px);width: -webkit-calc(100% - 65px);} .facebook-connect{margin:15px 0 0 0;width: 50%; margin:15px auto 0;} .form-register .form-group label{width:40%;} .form-register .form-control{width:60%;} .form-checkbox{margin: 10px 0 0 0;} .form-checkbox.checked .form-checkbox-check{background-size: 70%;} .form-checkbox-check{height: 25px;line-height: 25px;width:25px;-webkit-border-radius: 7px;-moz-border-radius: 7px; border-radius: 7px;margin: 6px 0;} .form-register .btn{margin:20px 0 0 0;} .form-checkbox label{margin:7px 15px 0 0;} .region-pay{font-size: 0.85em;width: 95%;margin: 0 auto;} .cart_table{width:100%;} .cart_1, .cart_2, .cart_3, .cart_4{padding:10px;width:auto;} .cart_4{padding-left:0;} .cart_1{padding-right: 0;} .total_table{width:100%;height:auto;display: table;} .cart_total_desc, .cart_total_sum, .coupon_desc{width:auto;padding: 7px;text-align: right;} .region-payform{margin: 25px auto;} .region-payform ul{width: 100%;} .region-payform ul li{width: 100%;padding: 0;} .form-radio-check span{margin: 4px;width: 15px;height: 15px;} .form-radio-check{width: 25px;height: 25px;line-height: 25px;-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px;} .region-payform{margin: 15px auto; width:95%;} .form-radio label{width: 70%;} .form-radio label{margin: -5px 14px 0 0;} .form-radio label{width: 85%;font-size: 0.8em;} .form-control-wide{width:100%;margin:15px 0 0 0;} .form-control-wide.form-cvv{width:80%;} .label-valid{margin:16px 0 0 0;width:30%;line-height: 25px;} .valid-select{width:33%;margin:16px 0 0 0;} .valid-select .fancyText{width:100%;} .form-group .select{margin:16px 0 0 1.5%;} .form-group .select:last-child{margin:16px 1.5% 0 0;} .form-security{margin:15px 0;font-size: 0.9em;line-height: 25px;} .paypalImg{width:100px;} .form-radio{padding:10px 0;} .region-payform .btn-big{width:100%;margin:15px 0 0 0;} .form-i{float: left;} .innerTotalTable{width:55%;} .song-search input{margin-right: 10px;width: 87%;font-size: 0.85em;} .song-list-item ul.pull-left{width: 10%;} .playlistItem .trash span{display: inline-block;} .app-link img{width:100%;height:100%;} .appDown{font-size: 0.7em;text-align: center;padding: 0 15px 15px 15px;} .region-song{padding: 0 0 10px 0;} .appLinkWrapper{text-align: center;} .app-link2{float:none;margin: 0 5px;} .form-login-forgot{position: absolute;top: 265%;right: 0;margin: 0;width: 100%;font-size: 1.053em;} .passInput{position:relative;} .category-top span:not(:first-child){display: none;} .category-top > span:first-child{width:100%;margin:0;} .category-top span{margin-left: 0;} .category-top .category-filter{display: none;} .category-top .select{width:100%;} .category-top .categoryTopInner{width:50%;font-size: 0.8em;} .category-top{padding: 0 10px;} .category-content{padding:10px;} .pagination{display: none;} .region-category{padding: 15px 0;} .loadMore{background: url(../images/loadMoreBtn.png) no-repeat 10% center; background-size: 15px;margin:0 10px;height: 40px;border: solid 1px #d1dc00;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;} .loadMore span{line-height: 40px;text-align: center;display: block;color: #3e464c;} .innerCategoryUl{width:50%;padding:0;} ul.category-list li{height:auto;} .bt-share{width:100%;margin: 20px 0 0 0;} .mainmenu .caret.hasChildren{background: url(../images/mobileMenuArr.png) no-repeat center center; background-size:7px;border-right:0;border-left:0;border-top:0;position: absolute;top: 0;left: 0;width: 50px;height: 100%;margin: 0;} .mainmenu ul li:hover a .caret.hasChildren{background: url(../images/mobileMenuArrHover.png) no-repeat center center;background-size:7px;} /*.categories, .mykaraoke{position: fixed;width: 100%;z-index: 9;height: 100%;top: 47px;right: 0;margin: 0;background: #fff;}*/ .dropdown-menu{transition: none;-moz-transition: none;-webkit-transition: none;transition: none;} .open>.dropdown-menu{position: fixed!important;height: calc(100% - 47px);width: 100%;z-index: 9;top: 47px;right: 0;margin: 0;background: #fff!important;transition: none;-moz-transition: none;-webkit-transition: none;-o-transition: opacity 0 ease-in;transition: none;} .categories ul, .mykaraoke ul{padding: 0; background-color: #fff;height: 100%;} .categories, .mykaraoke{overflow: auto;} .categories > div{width:100%; height:100%;} .categories > div > ul{width:100%; height:100%;} .mainmenu .navbar-nav li .dropdown-menu .categories ul, .mainmenu .navbar-nav li .dropdown-menu .mykaraoke ul{padding:0 50px;} .backToMenu{margin-top: 20px!important;margin-right: -27px!important;background: url(../images/mobileMenuArr_left.png) no-repeat right 9px;background-size: 7px; padding: 0 27px 10px 0;} .mainLi{border-top: 1px #b5b5b5 solid;padding: 10px 0 0 0;margin: 10px 0 0 0;} .mainmenu .navbar-nav li .dropdown-menu ul li.mykaraoke-favorites{border-top: 1px #b5b5b5 solid;padding: 20px 0 0 0; margin-right: 0;} .mainmenu .navbar-nav li .dropdown-menu ul li.mykaraoke-playlist{margin-right: 0;} ul.category-list .song-add{font-size: 25px;height: 25px;top: -webkit-calc(50% - 14px);left: 45px;} ul.category-list .song-add.addToPlayList{top: -webkit-calc(50% - 14px);} .icon-checked {line-height: 32px;} .icon-checked svg{height: 15px;} .loader{height: 32px;line-height: 45px;} .kobiRazon{float:left;width:100%;margin: 0px 0 5px 0;text-align: left;} .akum{margin: 5px 0 5px;} .songs ul li{height:auto;} .banner ol li{display: none} .banner ol li:nth-child(-n+10){display: inline-block;} .actions a:hover, .actions a:hover i{color: #333031; } .actions a.active i{color: #d1dc00;} ul.category-list .song-add{opacity:1;} .trash{background: url(../images/trashMobile.png) no-repeat center center;background-size: 19px;display: inline-block;} .dropdown-menu{display: none;overflow: auto;padding: 20px 0;} body.active{overflow: hidden;} .accesContainer{position: fixed;z-index: 99;top: 5px;right: 55px;} .pace-done #addwat_buttons{top: 50px!important;} #awbt svg#awb-accessibility{fill:#b5b5b5!important;} .adsSongs li{margin-bottom: 0!important;} .innerWrapperWidth{width: 80%;} .search{float: none;margin-top:0;flex-grow:1;} .pluginLink{margin-left: 15px;width: auto; padding: 10px 16px; height: auto; display: flex; align-items: center;} } @media (max-width:600px){ /* .media{height: 400px;}*/ .songs ul li .songbox{font-size: 0.86em;width:100%} .songs, .songs:nth-child(2), .songs.w50{float:none;width:100%!important;padding:0 15px;} .song-next-list ul li{height:auto;width: 100%!important;float:right;} .innerTotalTable{width:70%;} .song-next-list ul li .song-image{width:15%;} .facebook-connect{width: 100%;} .category-content .col-md-4{padding-left:0;} .banner ol li {width: 33.3%;} .innerCategoryUl{width:100%;padding:0;} .songs ul li{height:auto;} .song-next-list ul li { height: auto;} .song-text{padding-right: 20px;} .song-image{max-width: 25%;} .banner{min-height: 200px;} .banner ol li:nth-child(-n+10){display: none;} .banner ol li:nth-child(-n+6){display: inline-block;} #subscriptionRegister .modal-body .subType{width: 100%;} #subscriptionRegister .modal-body .subType + .subType{border-right: 0;} .modal-dialog{margin:0;} } @media (max-width:480px){ .song-playlist ul li a{width: 70%;} .song-playlist ul li .song-text strong{font-size: 1.114em;} /* .media{height: 250px;}*/ .selectionInnerWrapper a{padding: 0 5px;} .innerTotalTable{width:100%;} .title {margin: 10px 0 0 0;} .song-next-list {/*height: 195px;*/height: 300px} .song-next-list ul li .song-image{width:30%;} .banner, .bannerContent{min-height: 213px;} .payPreText{padding: 25px;} .innerWrapperWidth .form-control-wide.form-credit{width: 100%; margin-left: 0px;} .innerWrapperWidth .form-i{position: relative;left: auto;} } @media (max-width:360px){ .song-next-list ul li{height:auto;width: 100%;float:none;} /*.song-next-list ul li:nth-child(2){margin: 8px 0 0 0;}*/ } .banner-side{ width: 319px; height: 200px; margin-bottom: 10px; } .banner-side-img{ border: 2px solid #ccc; } .green-label { background-color:#d5e14d; padding: .1rem .3rem; display:inline-block; margin:0 .3rem; font-weight:bold; color:#000; line-height:1; } .license-required { display:flex; width:100%; height:100%; position:absolute; top:0; left:0; align-items:center; justify-content: center; background-color: #efefef; flex-direction:column; } .license-required .noAdsButton { margin:1rem 0 0; } @media (max-width:767px) { .license-required img { width: 25%; } .license-required h2 { font-size: 24px; margin-top: 10px; } .license-required .noAdsButton { margin: 0; } }