.div-scroll-bar {height:650px;width:440px} .mCustomScrollbar{ -ms-touch-action: none; touch-action: none; /* MSPointer events - direct all pointer events to js */ } .mCustomScrollbar.mCS_no_scrollbar{ -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: 0px; } .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:2px; 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; } .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; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .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: #31302B; background-color:#31302B; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #31302B; background-color:#31302B; 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:#31302B; background-color:#31302B; 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(../images/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); } /* ---------------------------------------- */ .loader{background-image: url(../images/plus-d2.png);} /*track the product*/ .track-pack{background-color: #5cb85c;color: #fff;padding: 5px 11px;border-radius: 4px;border: none;} .track-pack:hover{background: #ffffff;color: #5cb85c;border: 1px solid #5cb85c} .trackprogressbar{counter-reset: step;} .container-part{width: 100%;display: table;position: relative;padding: 11px 11px;} .trackprogressbar div{list-style-type: none;float: left;width: 19%;position: relative;text-align: center;} .trackprogressbar div::before{content: counter(step);counter-increment: step; border: 2px solid #ddd;display: block;width: 30px;line-height: 30px;height: 30px;text-align: center; /*margin: 0 auto 10px auto*/;border-radius: 50px;background-color: #ffffff;} .trackprogressbar div:after{content: '';position: absolute;width: 100%;height: 2px;/*background-color : #ddd*/;top: 15px;/*left: -50%;*/;left:0;z-index: -1;border-top: 2px solid #ddd;} .trackprogressbar div:last-child:after{content: none;} .trackprogressbar div:last-child{width:auto;} .trackprogressbar div.act_tran{color: green;} .trackprogressbar .custom-table{margin-top: 10px;} .trackprogressbar div.act_tran:after{animation: changeWidth 0.5s linear;animation-fill-mode: forwards;animation-duration:infinite;} .trackprogressbar div.act_tran:before{border-color: green;animation: changeBackground .5s linear;animation-fill-mode: forwards;transition:background 500ms linear 0s;} @keyframes changeWidth {from {width:0%;border-top: 2px solid green;left: 0px; }to {width:100%;border-top: 2px solid green;left: 0px;}} @keyframes changeBackground {from {background: #fff;border-color: #ddd;}to {background: #fff;border-color:green;}} .trackprogressbar div.act_tran + div:after{background-color: green;} .track-part .modal-dialog{width: 95% !important;} .track-part .modal-content{margin-top: 48px;z-index: -1;} .track-part .modal-content{margin-top: 48px;z-index: -1;} table thead th{color: #000000} /*media query*/ @media only screen and (max-width: 600px) { .trackprogressbar div{ width: 100%;float: none;/*transform: rotate(90deg);padding-bottom: 20px;*/} .trackprogressbar div::after{ height:0px; width:0px; border-left:1px solid green; margin:0px 0px 0px 15px; -webkit-animation: increase 3s; -moz-animation: increase 3s; -o-animation: increase 3s; animation: increase 3s; animation-fill-mode: forwards; } @keyframes increase { 100% { height:100%; } } .trackprogressbar .custom-table{margin-left: 26px;} .track-pack{vertical-align: text-top;margin-top: 3px;} .trackprogressbar div.act_tran:after{height:0px;width:1px;border-left:1px solid green;-webkit-animation: increase 3s;-moz-animation:increase 3s;-o-animation:increase 3s; animation:increase 3s;animation-fill-mode: forwards;} .trackprogressbar div:after{top: 20px;} .table{width: 95% !important;} } /*track the product*/ /*06-02-2018 */ .policy-terms{line-height: 19px;} .terms-condition ul li{padding-bottom: 5px;} .terms-condition {line-height: 19px;} .le-link{color: #da251c;} /*02-1-2017 */ .btn.btn-default.text_orange{background: #da251c;border: 1px solid #da251c;color: #ffffff;} .btn.btn-default.text_orange:hover{background: #fff;color:#da251c;} .dash-head{margin-bottom: 4px;} .frnd_ref .errorinvalid{padding-left: 3px;margin-top: 5px;} .btn.btn-edit-new{padding: 4px 12px;} .btn.btn-addr-edit{padding: 4px 12px;margin-bottom: 5px;} .add-h4{text-transform: uppercase;font-size: 18px !important;color: #575656;margin-top: 5px;} #mobile-search{background-color: #da251c;} .errorinvalid {padding-left: 10px;color:#FF0000;font-weight: 500;} .title-track{font-weight: 500;} .pdt-sum-title{font-weight: 500;font-size: 14px;padding-top: 11px;} .space-top-val{margin-top: 20px;} .new-sign-val{margin-top: 7px;display:block;} #accordion .panel-title{font-weight: 500;} #accordion button.button{padding: 4px 8px 4px 15px;position: relative;} .button.back-prev-new-sty{color: #666;font-size: 12px;letter-spacing: 0px;float:right;background: none;border:none;} .icon-login::before {position: absolute;top:7px;left:5px;} .chkout_login h5{font-weight: 500;} .button.back-prev-new-sty:hover{border: none;color:#666;} #paynw:disabled:hover{color: #fff;} /* 29-12-2017 */ .special-price .price i{font-size: 15px;padding-right: 5px;} .special-price .price{font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;} .regular-price .price{font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;} .price-sum{font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;} .old-price .price i{padding-right: 0px;} .footer-content .address{line-height: 1.6em;} .footer-content{font-size: 0.9em;} .col-main .shop-inner{padding: 2px 0;} .product-view-area .short-description p{line-height: 20px;} .product-view-area .product-name h1{font-size: 30px;letter-spacing: 1px;} .product-view-area .product-details-area .price{font-size: 22px;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;} .product-view-area .product-details-area .special-price .price i{font-size: 19px;padding-right: 2px;} .product-view-area .product-details-area .old-price .price i{font-size: 19px;padding-right: 3px;} .product-view-area .short-description h2{font-size: 13px;font-weight: 600;} button.button.pro-add-to-cart{padding: 7px 11px;} .desc-list-down {list-style-type: decimal;} ol.desc-list-down li{list-style-type: decimal;padding-left: 4px;padding-bottom: 2px;} .product-cart-option.pdt-opt ul li{padding-right: 0px;letter-spacing: 1px;} #productTagName{line-height: 23px;} #productTagName a{border:1px solid #ddd;padding: 3px 8px 3px 8px;font-weight: normal;} .content-dum{line-height: 22px;} /* 28-12-2017 */ .mtmegamenu.mega-menu a .title.title_font span{color:#000;font-weight: normal;} .nav.menu-blw-logo > li > a:first-child{padding-left: 0px;} .success_msg{ text-align: left; margin-top: 2%; color: #008000; font-size: 13px; } .error_msg{ text-align: center; margin-top: 2%; color:#FF0000; font-size: 20px; } .ui-datepicker-calendar th,.ui-datepicker-calendar td{padding: 9px} .ui-datepicker-calendar td{border: 1px solid #ccc; background: #f6f6f6 url("images/ui-bg_glass_100_f6f6f6_1x400.png") 50% 50% repeat-x;text-align: center;cursor: pointer} .ui-datepicker-calendar td a{background: none !important;border: none !important;} .ui-datepicker .ui-datepicker-header .ui-datepicker-prev{ float: left !important; width: 10% !important; padding: 1% !important; } .ui-datepicker .ui-datepicker-header .ui-datepicker-prev-hover .ui-icon{color: #f6a828 !important;} .ui-datepicker .ui-datepicker-header .ui-datepicker-next{ float: right !important; width: 10% !important; padding: 1% !important; } .ui-datepicker .ui-datepicker-header .ui-datepicker-next-hover .ui-icon{color: #f6a828 !important;} .ui-datepicker .ui-datepicker-header .ui-datepicker-title{ width: 78% !important; float: left !important; text-align: center !important; } .ui-datepicker .ui-datepicker-header .ui-datepicker-title .ui-datepicker-year{ color: #000; padding: 0; } .ui-datepicker .ui-widget-header{padding: 6px 0;} /****************************************** 1. Home Page ******************************************/ .daily-deal-section { text-align: center; padding: 0px 0px; margin-bottom: 10px; margin-top: 30px; } .logo.logo-cusina{margin-bottom: 0;margin-top: 0;} .call-us.call-cucina{width:100%;text-align: right;vertical-align: middle;padding-top:30px;margin-right: 0;} .call-us i{vertical-align: top;padding: 0 10px 0 0;} span.call-num{vertical-align: middle;} .call-us-inner{display: table;float: right;} .call-cucina .call-num{font-size: 10px;} .call-us.call-cucina .call-us-inner i{font-size: 20px;} .mtmegamenu.mega-menu{margin: 0;} .top-site-search{padding-top: 20px;} .mtmegamenu.mega-menu ul li:first-child{margin-left: 0px;} .mtmegamenu.mega-menu ul li{font-size: 14px;font-weight: normal;text-transform: capitalize;} .top-cart-contain.top-cart-logo{padding-top: 20px;position: relative;} .mtmegamenu.mega-menu > ul > li{margin-left: 11px;margin-right: 11px;} .top-cart-logo .mini-cart .basket a .cart-title{color:#000;font-size: 11px;} .top-cart-logo .mini-cart .basket a .cart-total{color:#000;font-size: 11px;} .top-cart-logo .top-cart-content{top:66px;} /*20-12-2017*/ .home-nav-tabs > li.list-view-bf::before { display: none; } .home-nav-tabs > li.list-view-bf{float:right;margin-right: 30px;} .home-nav-tabs > li.list-view-bf a.spc-bf{background-color: #da251c;font-size: 12px;color:#fff;border:1px solid #da251c;padding: 3px 10px;font-weight: normal;} .home-nav-tabs > li.list-view-bf a.spc-bf:hover{background-color: #fff;border:1px solid #da251c;color:#da251c;} .spec-div{float:right;margin-right: 11px;} .spec-div .spc-bf{background-color: #da251c;font-size: 12px;color:#fff;border:1px solid #da251c;padding: 3px 10px;line-height: 24px;font-weight: normal;} .spec-div .spc-bf:hover{background-color: #fff;border:1px solid #da251c;color:#da251c;} .page-header.page-special h2:before{background-color: #F4A137} .page-header.page-special h2{color:#da251c;} .jtv-single-cat{margin-top: 10px;/*font-family: 'Gotham Medium';font-weight: normal;*/} .add-to-cart-mt:hover {background-color:#fbb459;color:#fff;border-left:1px solid #fff;} .add-to-cart-mt:hover i{border-right:1px solid #fff;} /*.jtv-category-area .jtv-extra-link a:hover{background-color: #da251c;color:#fff;border:1px solid #da251c;}*/ button.button:hover{background-color: #fff;color:#da251c;border-radius: 4px;border: 1px solid #F4A137;} button.button.subscribe{border-radius:4px;border:1px solid #da251c;} #nav-menu ul li a:hover{color: #ec1d25!important;} .mtmegamenu a .title.title_font span:hover{color: #ec1d25;} .social .fb a:hover{color:#3C5B9B;} .social .googleplus a:hover{color:#E33729;} .social .tw a:hover{color:#359bed;} .social .linkedin a:hover{color: #027ba5;} .social .instagram a:hover{color:#da251c;} .social .rss a:hover{color:#da251c;} button.button.pro-add-to-cart{background-color: #da251c;border-color: #da251c;border-radius: 4px;font-weight: 600!important;border-width:1px;} button.button.pro-add-to-cart:hover{background-color: #fff;border-color: #da251c;border-radius: 4px;border-width: 1px;color: #da251c;} .nav-tabs > li > a:hover{border:2px solid #da251c;background-color: #fff;color: #da251c;} .product-details-area .social.social-share-icon ul.inline-mode li a{height: 30px;width:30px;line-height: 30px;} .product-details-area .social.social-share-icon ul.inline-mode li {margin-right: 15px;} /************************ Featured product **********/ .home-tab .tab-content .featured-pro .owl-wrapper-outer{padding-top: 15px;} /************************ Featured product End **********/ /******************************************* Home Menu **************************************/ .menu-blw-logo li a i{padding-right: 10px;} #nav-menu{background-color: #f1f0f0;} #nav-menu ul li a{color:#000;} /*************************** Back Sec ***************************/ .deal-one , .deal-two{position: relative;display: block;} .overlay-sec{position: absolute;width:auto;top:10%;z-index: 5;left:8%;} .sht-one .overlay-div{background:rgba(93,193,255,0.8);padding: 20px;position: relative;z-index: 2;} .sht-two .overlay-div{background:rgba(246,194,107,0.9);padding: 20px;position: relative;z-index: 2;} .overlay-div p{vertical-align: middle;margin-bottom: 0;color:#fff;z-index: 3;position: relative;text-align: left;} .overlay-div h5{font-size: 24px;color:#fff;margin-bottom: 0;text-transform: uppercase;} .mini-cart .actions .view-cart , .mini-cart .actions .btn-checkout{background-color: #da251c;border:1px solid #da251c;color:#fff;text-transform: capitalize;font-size: 15px;} .mini-cart .actions .view-cart:hover, .mini-cart .actions .btn-checkout:hover{background-color: #fff;border:1px solid #da251c;color: #da251c;} /****************************************** 3. Login page ******************************************/ .account-login { display: inline-block; width: 100%; } .box-authentication { display: inline-block; width: 95%; float: left; margin-left: 12px; margin-top: 3px; } .box-authentication>h3 { margin-bottom: 15px; } .box-authentication>h4 { font-weight: 500; } .box-authentication label { margin-top: 0; margin-bottom: 2px; font-weight: 500; } .box-authentication input, .box-authentication textarea { border-radius: 0px; border: 1px solid #ccc; -webkit-box-shadow: inherit; box-shadow: inherit; width: 100%; } .dashboard_lnk .active_lnk a { color: #da251c; font-size: 13px; } .dashboard_lnk .active_lnk a i { color: #da251c; font-size: 13px; } .layered-Category .active_lnk a{ color:#da251c; font-size: 15px; /*font-weight: bold;*/ } /*.dashboard_lnk .active_lnk{ background-color: #da251c;color:#fff!important; }*/ .thank_u_msg{text-align: center;padding: 5%;} .thank_u_msg .information{text-align: right;padding: 5px 7px;color:#09e1ed;} .thank_u_msg .details{text-align: left;padding: 5px 7px;} @media only screen and (min-width: 300px) and (max-width: 767px) { .box-authentication { width: 100%; margin-bottom: 20px; } .account-login .box-authentication:last-child { margin-bottom: 0px; } .box-authentication input, .box-authentication textarea { width: 90%; } .thank_u_msg{font-size: 13px!important;} } /****************************************** 2. Newsletter Popup ******************************************/ .title-subscribe h1 { font-size: 28px; font-weight: 600; line-height: 1.3; margin-bottom: 0; margin-top: 20px; text-transform: uppercase; letter-spacing: 1px; color: #fff; } .modal-dialog.newsletter-popup { /* background: rgba(0, 0, 0, 0) url("../images/newsletter.jpg") repeat scroll 0 0;*/ width: 800px; min-height: 300px; height: auto!important; margin-top: 12%; border-radius: 10px; background-color: #f8f8f8; border: 10px #fff solid; background-size: cover; } .newsletter-popup .modal-content { background: inherit; box-shadow: none; border: none; padding: 20px; } .newsletter-popup .close { background: #da251c; cursor: pointer; line-height: 40px; min-width: 40px; min-height: 40px; position: absolute; right: -31px; text-align: center; text-transform: uppercase; top: -31px; font-size: 33px; font-weight: 300; border-radius: 50px; color: #fff; opacity: 1; } .newsletter-popup .close:hover { background: #fe1300; color: #fff; } .newsletter-popup h4.modal-title { font-size: 26px; font-weight: 700; line-height: 1; margin-bottom: 0; margin-top: 30px; text-transform: uppercase; letter-spacing: 1px; color: #fff; } #newsletter-form .content-subscribe { overflow: hidden } .form-subscribe-header label { color: #eee; font-size: 15px; font-weight: normal; line-height: 25px; margin: 10px 0 15px; max-width: 95%; } #newsletter-form .input-box .input-text { border: 1px solid #999; height: 45px; line-height: 40px; margin: 0 0 15px; padding-left: 15px; width: 320px; border-radius: 5px; color: #333333; } .subscribe-bottom input[type=checkbox] { vertical-align: sub; } #newsletter-form .actions .button-subscribe { background-color: #da251c; border: medium none; color: #fff; font-size: 1em; line-height: 26px; padding: 8px 30px; text-transform: uppercase; font-weight: 500; border-radius: 5px; } #newsletter-form .actions .button-subscribe:hover { background: #334141; color: #fff; } .subscribe-bottom { color: #eee; display: block; margin-top: 30px; overflow: hidden; } .subscribe-bottom label { color: #333333; margin-bottom: 0; } #dont_show { margin: 0; vertical-align: middle; } .modal-open .modal { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6); } /* Product Detail*/ .pro-detil-container .attr-sec ul li{margin-right: 5px;border: 2px solid #eaeaea;color: #666;float: left;font-size: 11px;font-weight: 600;text-decoration: none;text-transform: uppercase;} .pro-detil-container .attr-sec ul li label{margin-bottom:0 !important;padding: 3px} .pro-detil-container .attr-sec ul li input{display: none} /*********** CheckOut Page ***********/ .icon-success{color: #00cc00;font-size:13px;} .table-pdt-detail .table > thead > tr > th{padding: 5px;vertical-align: middle;text-align: center;} /***MyAccount Page Css**/ .cart_header{margin-top: 3%;font-weight: bold;} .link_head{padding: 1% 0% 0% 8%;font-size: 12px;} .border_bot{margin-top:12px;border-top: 2px solid #eee;} .cont_align{background-color: #f7f7f7;border: 1px solid #e2dddb;;text-align: center;padding: 20px;line-height: 55px;margin-bottom: 10%;height: 200px;} .text_orange{color: #da251c;} .text_blue{color: #42cbf4;} .text_red{color: #e02f2f;} .purchase_row{margin-bottom: 10px;padding-left: 14px;} .purchase_cont{font-size: 10px;margin-left: 1%;} .dashboard_lnk{border:1px solid #e2dddb;line-height: 25px;padding: 20px 0px;} /*order_dashboard*/ .order-section-container .cart_order{margin-top: 20px;font-size: 18px;} .dashboard_lnk ul li a i{font-size:12px;margin-right: 6%;margin-bottom: 15px;color:#626161;} .dashboard_lnk ul{list-style-type: none;} .dashboard_lnk ul li.active a{color:#da251c!important;} .order-section-container table > thead {background-color: #f7f7f7;} .dashboard_lnk li a{color:#626161;} .cont_align p{font-weight: bold;} h3.hd-dash-account{font-size: 20px;} /* Menu in home page */ .menu-blw-logo .dropdown .dropdown-menu li ul.submenu{list-style-type: none;margin: 10px 10px 10px 0;} .menu-blw-logo .dropdown .dropdown-menu li ul.submenu li{padding: 5px 0 5px 0;} .menu-blw-logo .dropdown .dropdown-menu li ul.submenu li a:hover{color:#ec1d25!important;} /*.menu-blw-logo .dropdown .dropdown-menu{padding: 15px;}*/ .title-menu a{color:#e1850f!important;padding-bottom: 5px;font-weight: 500;border-bottom: 1px solid #ddd;margin-bottom: 10px;} /*.menu-blw-logo .dropdown .dropdown-menu li ul.submenu li:before { content: "\f105"; FontAwesome Unicode font-family: FontAwesome; display: inline-block; margin-left: -1.3em; same as padding-left set on li width: 1.3em; same as padding-left set on li }*/ li.dropdown:hover > .dropdown-menu {display: block;} /* CSS used here will be applied after bootstrap.css */ .nav { margin-bottom: 0; } .nav > li.dropdown.dropdwn-full{ position: static; } .nav > li.dropdown.dropdwn-full:hover .dropdown-menu {display:table; width: 100%;text-align: left;margin-left: 10px!important;padding: 31px;} .menu-blw-logo li.menucol-1-4{padding-left: 10px;padding-right: 10px;} .menu-blw-logo li.menucol-1-4:last-child{border-right: none;} .mnu-col-div{padding:10px;border-right:1px solid #ddd;min-height: 400px;} .mnu-col-div.mnu-remedy{border-right: none;} /* 06-09-2017 style */ .offer-img{margin: 10px 0;} .cart_sty{padding:11px;background-color: orange;color:#fff;} .cart_let_sty{padding:10px 15px;} .cart_let_sty:hover{background-color: black;color: white;} .frnd_ref{padding: 2% 8%; border: 1px solid #e3e3e3; border-radius: 2%;margin: 2%;} /*profile_dashboard*/ /*.addr-header{padding: 5% 0%;}*/ .order-section-container .personal_info{border: 1px solid #e2dddb;padding: 3% 0%;line-height: 30px;margin-top: 4px;} .order-section-container .personal_info .pro_detail_head{font-weight: bold;float: right;} /* Add new customer address*/ .profile_form_edit .add_new_cus_addr .addr_zip_from_grp{display: none;} /*edit_profile_dashboard*/ .order-section-container .well.box-container{border: 1px solid #e2dddb;background-color: white;border-radius: 0px;margin-top: 14px;} /*Address_new_page*/ .order-section-container .save-btn{background-color: #F4A137;color: white;float: right;} .frnd-referal-container .save-btn{background-color: #F4A137;color: white;float: right;margin-right: 12%;} .frnd-referal-container .row{margin: 1.5%;} .order-section-container .addr-text-size{font-size: 12px;font-weight: lighter; } /*Address_dashboard*/ .order-section-container .addr-header a{background-color: #F4A137;color: white;} .order-section-container .cont_align_addr a{background-color: #F4A137;color: white;} .order-section-container .cont_align_addr{background-color: #f7f7f7;border: 1px solid #e2dddb;padding: 20px;margin-bottom: 10%;} /* Order Listing */ .order-list-star{margin-bottom: 35px;} .order-list-segment {border:1px solid #ddd;margin:10px auto 10px auto;} .order-num p{text-align: center;vertical-align: middle;height: 100%;padding-top: 15px;} .order-num{/*background-color: #7dc5ff;*/min-height: 47px;color:#807e7e ;font-weight: bold;border-right:1px solid #ddd;} .order-dt{padding: 4px 0 4px 0;} .order-val{padding: 4px 0 4px 0;} .btn.btn-vw{margin-right: 5px;padding: 4px 2px;font-size: 12px;letter-spacing: 0;background-color: #F4A137;color:#fff;text-transform: uppercase;border-radius: 0px!important;} .hd-s-val{font-size: 12px;} .btn-inline{padding: 10px 0 0 0;} .order-head{font-size: 18px;} .hd-dt p{margin-bottom: 0;color:#706e6e;font-size: 12px; } .hd-s-val p{margin-bottom: 0;} .btn.btn-vw:hover{background-color: #fff;color:#F4A137;border:1px solid #da251c;} .button-blue{background-color: #7dc5ff!important;border:1px solid #79c5ff!important;} .button-blue:hover{border: 1px solid #7dc5ff!important;background-color: #fff!important;color:#7dc5ff!important;border-radius:0px!important;} /* Order Detail */ .order-hd-top h4{text-transform: uppercase;font-size: 18px!important;color:#575656;padding-top: 7px;} .order-cont-seg{margin-top: 10px;} .order-cont-seg .col-div{background-color: #fff;padding: 15px 20px;} .col-div .order-data{margin-bottom: 25px;} .col-div h6{color:#a3a3a3;font-size: 14px;} .col-div p{color:#494949;font-size: 16px;font-weight: 500;} .col-div .del-pay{color:#77bb00;} .btn.btn-bluecss{font-weight: 600;background-color: #79c5ff;color:#fff;border-radius:0px;border:1px solid #79c5ff;padding: 3px 9px;} .btn.btn-bluecss:hover{background-color: #fff;color: #42cbf4;border:1px solid #79c5ff;} #order-purchase-section{margin: 10px auto;width:100%;position: relative;} .seperate-order-rw{width:100%;border:1px solid #ddd;margin: 10px auto;padding: 15px 20px;} .rt-tbl{display: inline-block;width:49%;} .rt-tbl h6{font-weight: 600;color: #a3a3a3;text-transform: uppercase;font-size: 14px;} .rt-tbl.rat-tblcol{width:37%;} .rw-pdt-title{padding-bottom: 15px;} .rw-pdt-title h5{font-size: 20px;letter-spacing: 0px;} .rt-tbl p{color:#494949;font-size: 14px;font-weight: 500;} .order-destination p{font-size: 14px;} .lft-hd-ship{width:16%;display: inline-block;} .lft-hd-ship.lft-color-col p{font-size: 16px;} .total-link{color: #F4A137;font-size: 16px;text-transform: uppercase;} .rgt-hd-ship{display: inline-block} .ship-charged{width:100%;position: relative;display: table;} .rw-pdt-title p{font-size: 14px;color:#494949;font-weight: 500;} .review-btn .btn{padding: 3px 6px;} .review-btn .btn:hover{background: #fff;color:#F4A137;border:1px solid #F4A137;} /*Media Queries */ /*Popup start*/ .modal-dialog.model-popup{ background-color: #fff; width: 400px; min-height: 300px; height: auto !important; margin-top: 12%; background-color: #f8f8f8; border: 10px #fff solid; background-size: cover; padding: 0px 10px 15px; } .box-authentication .forgot-pass { float: left; text-align: right; width: 100%; margin-top: 3px; font-size: 12px; } .box-authentication .button { margin-top: 0; color: #fff; } .error {color:#FF0000;font-weight: normal;margin-top:7px!important;display: block;} .modal-dialog.model-popup .model-popup-content .form-horizontal .form-group.frm-grp{margin-bottom: 0} .modal-dialog.model-popup .model-popup-content label{font-weight: 500;} .modal-dialog.model-popup .model-popup-content .form-content{margin-top: 20px} .modal-dialog.model-popup.register-popup{margin-top: 1.5% !important;} /*Popup end*/ /*Wallet Start*/ .wallet-page .deposit-val{ width: 84px; margin-bottom: 10px; height: 27px; margin-right: 10px; border: 1px solid #ccc; } .wallet-page .btn.btn-vw{ margin-right: 5px; padding: 4px 6px; font-size: 12px; letter-spacing: 0; background-color: #F4A137; color: #fff; text-transform: uppercase; border-radius: 0px !important; letter-spacing: 0.1em; } .wallet-page .cont_align{height:auto;margin-top: 5px;} /*Wallet End*/ button.button{padding: 4px 15px;border:1px solid #da251c;border-radius:4px ;/*font-family:'Gotham Medium';*/font-size: 14px;/*font-weight: normal!important;*/} .wish_clr{color: red!important;} .modal-dialog.model-popup .model-popup-content .error { font-size: 11.5px!important; color: red!important; } .box-authentication .frm-grp .hide-err { font-size: 11.5px!important; color: red!important; margin-left: 3%!important; } .modal-dialog.model-popup .model-popup-content .hide-err { font-size: 11.5px!important; color: red!important; margin-left: 3%!important; } .no_order_msg{margin: 3%;color:red;font-size: 18px;} .cart_summary .qty input{width: 44px!important;} /*11-10-2017 */ .menu-items.menu-item-to-be-list{list-style-type:none;} .mnu-col-div{min-height:auto;} .menucol-1-4{width:33% !important} /*giftcard*/ #mar_top{margin-top: 23px;} .brd_btm{border-bottom: 1px solid #9D9D9D;} .hbd_content{border: 1px solid #9D9D9D;} /*.rs{ font-size: 25px; font-weight: normal; color: #000; position: relative;padding: 0 92px;}*/ .rs{ font-size: 25px; font-weight: normal; color: #000; position: relative;} /*.rs::before{ content: '\f156'; font-family: 'FontAwesome'; padding-right: 5px;}*/ /*.hbd_content .gift_logo{display:inline-block;}*/ .hbd_content .msg_gift{border-top: 1px solid #9D9D9D;padding: 22px 19px 10px;} .hbd_content .msg_gift_part{color: #B5B5B5;font-size: 18px;} .img_perview {text-align: center;margin-top: 10px;} .img_perview a{color: #848484;} .mail_form_part .gift_heading{color: #000000;font-size: 35px;font-weight: 600;margin-top: 20px;} .mail_form_part .slider_text{margin-top: 15px;font-size: 13px;font-weight: 500;} /*silder image gift cards*/ /* carousel */ /*.media-carousel { margin-bottom: 0; padding: 0 40px 30px 40px; margin-top: 30px; } Previous button .media-carousel .carousel-control.left { left: 583px; background-image: none; background: none repeat scroll 0 0 #222222; border: 1px solid #C5C5C5; border-radius: 23px 23px 23px 23px; height: 30px; width: 30px; margin-top: 53px; padding: 5px 12px; font-size: 26px; color: #4B4B4B; position: absolute; top: 27px; } Next button .media-carousel .carousel-control.right { right: -43px !important; background-image: none; background: none repeat scroll 0 0 #222222; border: 1px solid #C5C5C5; border-radius: 23px 23px 23px 23px; height: 30px; width: 30px; margin-top: 7px; padding: 5px 12px; font-size: 26px; color: #4B4B4B; position: absolute; top:31px; } Changes the position of the indicators .media-carousel .carousel-indicators { right: 50%; top: auto; bottom: 0px; margin-right: -19px; } Changes the colour of the indicators .media-carousel .carousel-indicators li { background: #c0c0c0; } .media-carousel .carousel-indicators .active { background: #333333; } .media-carousel img { width: 250px; height: 100px } .thumbnail{margin-bottom: 15px !important;padding: 0px;border: none;} .media-carousel .carousel-inner{border-bottom: 1px solid #9D9D9D;border-top: 1px solid #9D9D9D;}*/ .btn-radio { width: 100%; } .img-radio { opacity: 0.5; margin-bottom: 5px; } .space-20 { margin-top: 20px; } /* End carousel */ .mail_form_part .box-authentication .hidden{display: none!important;} /*ammount part*/ .donate-now { list-style-type:none; /* margin:25px 0 0 0;*/ padding:0; margin-left:14px; } .donate-now li { float:left; margin:0 5px 0 0; width:75px; height:40px; position:relative; } .donate-now label, .donate-now input { display:block; position:absolute; top:0; left:0; right:0; bottom:0; width:100%;height: 100%; } .donate-now input[type="radio"] { opacity:0.011; z-index:100; } /*.donate-now input[type="radio"]:checked + label { background:yellow; }*/ .donate-now label { /*padding: 8px 10px;*/ border:1px solid #CCC; cursor:pointer; z-index:90; /*width: 63px;*/line-height: 39px;text-align: center; } #otherAmount{width: 100px; text-align: center;} .search_err{ color: red; text-align: center; } /*.donate-now label:hover { background:#DDD; }*/ .form-horizontal .checkbox, .form-horizontal .checkbox-inline, .form-horizontal .radio, .form-horizontal .radio-inline{padding-top: 7px;margin-top: 0;margin-bottom: 0;margin-right: 30px;} .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"], .radio input[type="radio"], .radio-inline input[type="radio"]{position: absolute;margin-left: -48px;} .place_btn{display: inline-block;border: 0;background: #43BDEE;padding: 2px 44px;border: 2px solid #43BDEE;font-weight: 500;text-align: center;white-space: nowrap;color: #fff;transition: all 0.3s linear;-moz-transition: all 0.3s linear;-webkit-transition: all 0.3s linear;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;text-transform: uppercase;margin-right: 13px;} .proceed_btn{display: inline-block;border: 0; background: #F4A137;padding: 2px 44px;border: 2px solid #F4A137; font-weight: 500; text-align: center;white-space: nowrap;color: #fff;transition: all 0.3s linear;-moz-transition: all 0.3s linear;-webkit-transition: all 0.3s linear;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;text-transform: uppercase;margin-right: 13px;} .gift_logo div{display: inline-block;} .col-main-one{background-color: #F1EFF0;margin-top: 5px;padding: 10px;} .col-main-one .product_des .pro_des{font-size: 13px;margin-top: 17px;font-weight: 600;} .col-main-one .product_des .pro_siz_col{color: #5C5C5C;font-size: 12px;} .col-main-one .product_des span{margin-left: 5px;} .col-main-one .place_btn{margin-top: 41px;padding: 4px 6px;font-size: 11px;} /*.col-main-one .rs{display: block;font-size: 14px;color: #D45157;margin-left: -80px;}*/ /*.col-main-one .rs{display: block;font-size: 16px;color: #D45157;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}*/ /*29-12-2017*/ .cart-price-new-cs .rs{display: block;font-size: 16px;color: #D45157;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;} .col-main-one .unit_price{margin-top: 24px;font-weight: 500;color: #515659} .col-main-one .quality{margin-top: 24px;font-weight: 500;color: #515659} .col-main-one .form-control{border-radius:0px!important;margin-top:-9px;display: inline-block;width: 78%;height: 27px; } .col-main-one .total_price{text-align: center;margin-top: 24px;} /*.col-main-one .total_part .rs {margin-left: -40px;margin-top: 4px;text-align: center}*/ .col-main-one .total_part .rs {text-align: center} .col-main-one .product_des{margin-top: 24px;} .col-main-one .total_part .delete_box{margin-top: 38px;font-size: 23px;} .col-main-one .x_btn{color: red;font-size: 33px;font-weight: 500} .col-main-one .close{opacity:1!important;} /*whitepart*/ .col-main-two{background-color: #F7F7F7;margin-top: 5px;padding: 10px;} .col-main-two .product_des .pro_des{font-size: 13px;margin-top: 17px;font-weight: 600;} .col-main-two .product_des .pro_siz_col{color: #5C5C5C;font-size: 12px;} .col-main-two .product_des span{margin-left: 5px;} .col-main-two .place_btn{margin-top: 44px;padding: 2px 6px;font-size: 11px;} /*.col-main-two .rs{display: block;font-size: 14px;color: #D45157;margin-left: -80px461;}*/ /*.col-main-two .rs{display: block;font-size: 14px;color: #D45157;}*/ .col-main-two .unit_price{margin-top: 29px;font-weight: 500;color: #515659} .col-main-two .quality{margin-top: 29px;font-weight: 500;color: #515659} .col-main-two .form-control{border-radius:0px!important;margin-top:-9px;display: inline-block;width: 78%;height: 27px; } .col-main-two .total_price{text-align: center;margin-top: 29px;} /*.col-main-two .total_part .rs {margin-left: -40px;margin-top: 4px;}*/ .col-main-two .total_part .rs {text-align: center} .col-main-two .product_des{margin-top: 24px;} .col-main-two .total_part .delete_box{margin-top: 38px;font-size: 23px;} .col-main-two .x_btn{color: red;font-size: 33px;font-weight: 500} .col-main-two .close{opacity:1!important;} .col-main-two .place_btn_red{margin-top: 44px;font-size: 11px;display: inline-block;border: 0;background: #D95352;padding: 2px 6px;border: 2px solid #D95352;font-weight: 500;text-align: center;white-space: nowrap;color: #fff;transition: all 0.3s linear;-moz-transition: all 0.3s linear;-webkit-transition: all 0.3s linear;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;text-transform: uppercase;margin-right: 13px;} .total_amount{margin-top: 39px;} .total_num{font-size: 26px;color: #F4A137;margin-left: 56px;} .total_num .rs{font-size: 2.2rem;font-weight: normal;position: relative;padding: 0 23px;color: #F4A137;} .checkout_part{margin-top: 31px;margin-left: 62px;} .checkout_part .fa-check:before {font-size: 13px;padding-right: 8px} .checkout_part .btn-checkout {background: #da251c;color: #fff;padding: 8px 37px;border: 1px solid #da251c;cursor: pointer;display: inline-block;transition: color 300ms ease-in-out 0s, background-color 300ms ease-in-out 0s, background-position 300ms ease-in-out 0s;border-radius: 4px;text-transform: uppercase;font-weight: 600;font-size: 16px;} .checkout_part .btn-checkout:hover {background: #fff;color: #da251c;border:1px solid #da251c;} .continue-shopping {margin-top: 31px;} .continue-shopping .fa-check:before {font-size: 13px;padding-right: 8px} .continue-shopping .mar_rgt{margin-right: 10px;} .continue-shopping .btn-checkout {background: #da251c;color: #fff;padding: 8px 22px;border: 1px solid #da251c;cursor: pointer;display: inline-block;transition: color 300ms ease-in-out 0s, background-color 300ms ease-in-out 0s, background-position 300ms ease-in-out 0s;border-radius: 4px;text-transform: uppercase;font-weight: 600;font-size: 16px;} .continue-shopping .btn-checkout:hover {background: #fff;color: #da251c;border:1px solid #da251c;} /*.loder-gif-part{background-repeat:no-repeat;background-position: right top;}*/ .loder-gif-part{float: left;margin-left: 12px;margin-top: 5px;} .frnd_ref .hide-err{ color: red; font-size: 12px; font-weight: unset; display: none; } /*new slider part*/ .slide { position: relative; width: 100%; } .carousel-inner { position: relative; } .thumb-images { position: relative; } /*LOOKS CSS*/ .lks-img{position: relative;} .lks-img img{width:100%;display: block;} .lks-caption{position: absolute;width: 100%;bottom: 38%;z-index: 6;text-align: center;} .lks-caption h1{font-family: "Century Gothic Bold";font-weight: bold;margin:0 auto;font-size:8em;color: #ffffff;letter-spacing: 80px;margin: 0;} button.close{padding-bottom: 30px;} .lks-slider-carousel .lks-slider-arrow span{color: #3c3c3c;font-size: 18px;} #animate-arrow{color: #EC1D25 !important;} .button-home{background-color: #da251c;border: 1px solid #da251c;color: #fff;text-transform: capitalize;font-size: 15px;padding: 4px 12px 4px 12px;border-radius: 4px;} .button-home:hover{background-color: #ffffff;color:#da251c; } .sign-in{color:#6b6969;float: left;display: inline-block;} .sign-in span i{padding-left: 5px;} .sign-in span {padding-right: 10px;} .sign-in span:hover{color:#ec1d25;cursor:pointer; } .sign-in span:last-child{padding-left: 10px;color: #ec1d25;} #myCarousel1 a span{ content: ""; width: 38px; height: 38px; background-color: #ed1c24; font-size: 18px; text-align: center; line-height: 38px; } #mobCarousel1{ display: none } .mob-sign{ display: none;} @media(max-width:1039px){ .lks-caption h1{font-size:7em;letter-spacing: 70px;} } @media(max-width:980px){ .ftr-nav{padding-left: 0;} } @media(max-width:888px){ .lks-caption h1{font-size:7em;letter-spacing: 50px;} } @media(max-width:767px){ .lks-caption h1{font-size:6em;letter-spacing: 40px;} } @media(max-width:760px){ .sh-one{overflow: hidden;} .mobile-menu .expand{margin-left: 2px;} .mobile-menu li a{font-size: 12px;} } @media(max-width:593px){ .lks-caption h1{font-size:5em;letter-spacing: 35px;} } @media(max-width:517px){ .lks-caption h1{font-size:3em;letter-spacing: 25px;} } @media(max-width:390px){ .lks-caption h1{font-size:2em;letter-spacing: 20px;} } @media (min-width: 992px ) { /*.carousel-inner .active.left { left: -50%; } .carousel-inner .active.right { left: 50%; } .carousel-inner .next { left: 50%; } .carousel-inner .prev { left: -50%; } .carousel-inner > .item.next{ left: 0; -webkit-transform: translate3d(50%, 0, 0); -moz-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } .carousel-inner > .item.active.right { left: 0; -webkit-transform: translate3d(0%, 0, 0); -moz-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } .carousel-inner > .item{-moz-transition: all 0.6s ease-in-out 0s;} .carousel-inner > .item.prev{ left: 0; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0); } .carousel-inner > .item.active.left { left: 0; -webkit-transform: translate3d(-0%, 0, 0); transform: translate3d(-0%, 0, 0); -moz-transform: translate3d(-0%, 0, 0); }*/ } @media (min-width: 767px) and (max-width: 992px ) { /* .carousel-inner .active.left { left: -50%; } .carousel-inner .next { left: 50%; } .carousel-inner .prev { left: -50%; } .carousel-inner > .item.next, .carousel-inner > .item.active.right { left: 0; -webkit-transform: translate3d(50%, 0, 0); -moz-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } .carousel-inner > .item{-moz-transition: all 0.6s ease-in-out 0s;} .carousel-inner > .item.prev, .carousel-inner > .item.active.left { left: 0; -webkit-transform: translate3d(-0%, 0, 0); transform: translate3d(-0%, 0, 0); -moz-transform: translate3d(-0%, 0, 0); }*/ } @media (max-width: 1070px) and (min-width:50px) { .lks-slider-carousel .carousel-indicators{bottom:-13px!important;} } @media (max-width: 767px ) { /* .carousel-inner .active.left { left: -90%; } .carousel-inner .next { left: 90%; } .carousel-inner .prev { left: -90%; } .active > div { display:none; } .active > div:first-child { display:block; } .indicator-looks{margin-top:10px;width:100%;max-height: 20px;height: 20px;}*/ } .modal-body{padding: 11px 11px 11px 11px;} .carousel-control.left,.carousel-control.right {background-image:none;} .modal-dialog{width:100%;background: transparent;} .modal-dialog{margin: 0 auto;} .modal-content{border-radius: 0;} .lks-slider-carousel .carousel-indicators li{border: 1px solid #000;} .lks-slider-carousel .carousel-indicators li.active{background: #cccccc;} .lks-slider-carousel .carousel-indicators{bottom:-38px;} @media(max-width:1200px){ .mtmegamenu.mega-menu > ul > li {margin-left: 5px;margin-right: 5px;font-size: 12px;} .top-cart-logo .mini-cart .basket a .fa-shopping-cart::before{padding: 5px 7px 5px 5px;} .mini-cart .basket a .fa-shopping-cart::before{margin-right: 8px;} .top-cart-logo .mini-cart .basket a .cart-title{font-size: 10px;} .call-us.call-cucina{padding-top: 3px;} .top-site-search{padding-top: 0;} .nav.menu-blw-logo > li > a{padding:10px 10px;} #nav-menu{height: auto!important;} /*Order Listing*/ .btn.btn-vw{margin-right: 4px;padding: 4px 3px;letter-spacing: 0px;} .lft-hd-ship{width:24%;} .order-num p{padding-top:2px;} .hbd_content .logo-part{width: 40%;} .hbd_content .cost_part{width: 50%;} } @media(max-width:989px){ .logo.logo-cusina{margin-top: 11px;} .mtmegamenu.mega-menu > ul > li {margin-left: 3px;margin-right: 3px;font-size: 11px;} .top-cart-contain.top-cart-logo{padding-top: 0px;} .nav.menu-blw-logo > li > a{font-size: 10px;padding: 6px;font-weight: 400;} .menu-blw-logo .dropdown-menu{top:30px;} .title-menu a{display: block;} .gift_logo div{display: inline-block;width: 100%} .cost_part{margin-top: 20px;} } @media(max-width:767px){ .menu-bar-side{width:19.3% !important;display: inline-block;float: left;} .call-and-cart{display: inline-block;float: right;} .col-mob-menu-item{background-color: #fff; padding: 15px} .top-cart-logo .mini-cart .basket a .fa-shopping-cart::before{padding: 11px 13px 11px 10px;font-size: 18px;} .modal-dialog.newsletter-popup{width:94%!important;} /*Order Listing */ .hd-dt{display: inline-block;width:40%;padding-left: 5px;} .hd-s-val{display: inline-block;} .btn-inline{float:none!important;margin-bottom: 10px;width: 100%;text-align: center;} .btn.btn-vw{margin-right: 10px;padding: 9px 7px;letter-spacing: 1px;} .gift_logo div{display: inline-block;width: 100%} .cost_part{margin-top: 20px;} .mail_form_part .gift_heading{font-size: 20px;} .hbd_content .logo-part{width: 100%;} .hbd_content .cost_part{width: 100%;} } @media(max-width:820px){ .modal-dialog.newsletter-popup{width:600px;} .newsletter-popup .modal-content{padding: 10px;} .gift_logo div{display: inline-block;width: 100%} .cost_part{margin-top: 20px;} .mail_form_part .gift_heading{font-size: 20px;} } @media(max-width:767px){ .col-tr-img{float: none;margin: 0 auto;text-align: center;width:100%;} .col-tr-img img{margin: 0 auto;} .rt-tbl p{margin-bottom: 2px;} .btn.btn-bluecss{margin: 5px;float: left;} .cancel-head{float: none!important;} .lft-hd-ship{width:31%;} .gift_logo div{display: inline-block;width: 100%} .cost_part{margin-top: 20px;} .mail_form_part .gift_heading{font-size: 20px;} /*25-10-2017 */ .logo.logo-cusina.logo-mob-cusine{float: left;width:53%;padding: 2px;margin-top: 0px;} .logo-mob-cusine a{display: block;} .logo-mob-cusine img{width:70%!important;} .col-mob-menu-item .mm-toggle{background:none;padding: 5px;margin-top:22px;} .mini-cart .basket a .fa-shopping-cart::before {background: none;padding: 5px!important;margin-top: 20px;} .cart-icon{margin-top: -1px;} .review-btn .btn{padding: 3px 6px;margin-top: 10px;} .mob-sign{ display: block; float: left;} .desk-sign{display: none} .top-cart-contain.top-cart-logo{ padding-top: 16px; } } @media(max-width:540px){ .rt-tbl{width:42%;} .rt-tbl.rat-tblcol{width:62%;} .rt-tbl h6{font-size: 12px;} .rt-tbl p{font-size: 12px;} .seperate-order-rw{padding: 10px 5px;} .order-cont-seg .col-div{padding: 4px 5px;} .col-div h6{font-size: 13px;} .col-div p{font-size: 12px;} .col-div .order-data{margin-bottom: 10px;} .order-hd-top h4{font-size:14px!important;} .lft-hd-ship{width:45%;} .gift_logo div{display: inline-block;width: 100%} .cost_part{margin-top: 20px;} .mail_form_part .gift_heading{font-size: 20px;} .rw-pdt-title h5{font-size: 18px;font-weight: 500;} } @media(max-width:390px){ .owl-item figure img{width:100%;} .lft-hd-ship{width:60%;} .gift_logo div{display: inline-block;width: 100%} .cost_part{margin-top: 20px;} .mail_form_part .gift_heading{font-size: 20px;} .logo.logo-cusina.logo-mob-cusine{ width: 50%; } } @media(max-width:390px){ .menu-bar-side{ width: 5.3% !important; } } @media(max-width:359px){ .rt-tbl{display: block!important;width:auto;} .rt-tbl h6{margin-bottom: 0px;} .rt-seg{margin-bottom: 5px;} .btn.btn-bluecss{padding: 2px 3px;} .gift_logo div{display: inline-block;width: 100%} .cost_part{margin-top: 20px;} .mail_form_part .gift_heading{font-size: 20px;} .col-main-one .place_btn{margin-top:0px;} .col-main-two .place_btn {margin-top: 20px;} .col-main-one .unit_price{margin-top:0px;color: #515659;} .col-main-one .quality{margin-top: 0px;} .col-main-one .total_price{margin-top: 0px;margin-right: 55px;} /*.col-main-one .total_part .rs{margin-left: 70px;margin-top: 10px;}*/ .col-main-one .total_part .rs{margin-left: 70px;margin-top: 10px;margin-right:60px;} .col-main-one .rs{margin-top: 10px;} .col-main-one .total_part .delete_box{margin-top: 29px;margin-left: 95px;font-size: 31px;} /*white part*/ .col-main-two .place_btn_red{margin-top:0px;} .col-main-two .unit_price{margin-top:0px;color: #515659;} .col-main-two .quality{margin-top: 0px;} .col-main-two .total_price{margin-top: 0px;margin-right:55px;} /*.col-main-two .total_part .rs{margin-left: 70px;margin-top: 10px;}*/ .col-main-two .total_part .rs{margin-left: 70px;margin-top: 10px;margin-right:50px;} .col-main-two .rs{margin-top: 10px;} .col-main-two .total_part .delete_box{margin-top: 29px;margin-left: 95px;font-size: 31px;} .total_num .rs{font-size: 2.1rem;padding: 0 12px;} .continue-shopping{text-align: center;} .checkout_part{margin-left: 0px;text-align: center;} .checkout_part .btn-checkout{padding: 8px 12px;} } /*#news-carousel .carousel-inner img{transition: all ease-in-out 2s;animation-timing-function: ease; } #news-carousel1 .carousel-inner img{transition: all ease-in-out 2s;animation-timing-function: ease; }*/ /*::-webkit-input-placeholder { Chrome/Opera/Safari color: pink; } ::-moz-placeholder { Firefox 19+ color: pink; } :-ms-input-placeholder { IE 10+ color: pink; } :-moz-placeholder { Firefox 18- color: pink; }*/ ::-webkit-input-placeholder { /* Chrome */ color: #c6c6c6!important; /* font-style: italic;*/ font-size: 14px!important; } :-ms-input-placeholder { /* IE 10+ */ color: #c6c6c6!important; /* font-style: italic;*/ font-size: 14px!important; } ::-moz-placeholder { /* Firefox 19+ */ color: #c6c6c6!important; /* font-style: italic;*/ font-size: 14px!important; opacity: 1; } :-moz-placeholder { /* Firefox 4 - 18 */ color: #c6c6c6!important; /* font-style: italic;*/ font-size: 14px!important; opacity: 1; } /* 13-11-2017 About Us Page */ .hd-about{font-weight:bold;} .about-page p span{font-weight: bold;} #pass_match{display: none;color:red;margin-top: 40px;} #member-section{margin: 20px auto 10px auto;display: block;position: relative;} #member-section .benefit-list > ul > li{padding: 5px 0 5px 0;} #career-section{margin: 20px auto 10px auto;display: block;position: relative;} /*Customer Product Rating*/ #review_thank{color:green;display: none;} .product_rate > i{margin: 0.6% 0.5%;font-size: 23px;} .product_rate > span > i{font-size: 24px;} .chkout_login{margin-left: 4%;} .loginverify{margin-left: 4%;} #paynw:disabled{background-color: #EFEFEF;border: none;} a.totop:hover{color:#da251c;background-color: #fff;border:1px solid #da251c;} .fa-star-o::before{color: #c6c6c6;} p.no-rev{font-size: 12px;margin: 20px;font-weight: normal;text-transform: none} @media(max-width:767px){ .table-responsive > .table-bordered{border:1px solid #ddd;} #accordion button.button{margin-bottom: 10px;} .lg-cur span .lg-fr{display: block;} .new-right-home{right: 0px;} .home-product-tabs{width:69%;} .slider-items-products .owl-controls{top:-24px;} .home-nav-tabs > li.list-view-bf{float: none;width:54%;} .jtv-single-cat .page-header{height: auto;} .spec-div{float: left;margin-bottom: 20px;} .language-currency-wrapper .block.block-language{width:auto;} .page-title h1, .page-title h2{font-size: 18px;} aside{margin-top: 20px;} .product-view-area .product-name h1{font-size: 16px;line-height: 20px;} .product-cart-option.pdt-opt ul li{padding-right: 3px;} .wish-text{margin-left: -1px!important;} .language-currency-wrapper{margin-left: 11px;float: left;font-size: 12px;} .headerlinkmenu div.links div a{padding: 0 4px 0 4px;} .col-main-one .x_btn{font-size: 26px;} .checkout_part .btn-checkout{font-size: 14px;} .continue-shopping .btn-checkout{font-size: 14px;} .total_num{text-align: center;font-size:23px; margin-left:0;} .checkout_part{margin-top: 19px;} .continue-shopping{margin-top: 9px;} .dash-head{font-size: 18px;margin: 10px 0;} h3.hd-dash-account{font-size: 18px;} .addr-header{margin-top: 10px;} .order-section-container .personal_info .pro_detail_head{float: left;} .order-section-container .personal_info{padding: 3% 2%;} .info-lft-span{font-size: 12px;line-height: 20px;} .order-head{margin-top:10px;} .rfr-head4{margin-top: 8px;} .well.well-refer-gd{padding: 7px;} } @media(max-width:360px){ .top-cart-content{width:298px!important;right:-2px!important;} } @media(max-width:320px){ .menu-bar-side{ width: 5.3%; } .col-mob-menu-item .mm-toggle{ margin-top: 16px; } .top-cart-contain.top-cart-logo{ padding-top: 10px; } } .dropdown-backdrop{z-index: -1} .flt-lft{float: left} @media(max-width:414px){ #mobCarousel1{ display: block; } #myCarousel1{ display: none; } } .jtv-service-area{ background-color: #f7f4e4; } footer{ margin: 30px auto 0 auto; width: 100%; display: table; } .back-arrow:after{content:"\f105";position: absolute;right:5px;top:0;display: block;font-family:FontAwesome;line-height: 37px;} /* Menu in home page */ .menu-blw-logo .dropdown .dropdown-menu li ul.submenu{list-style-type: none;margin: 10px 10px 10px 0;} .menu-blw-logo .dropdown .dropdown-menu li ul.submenu li{padding: 5px 0 5px 0;} .menu-blw-logo .dropdown .dropdown-menu li ul.submenu li a:hover{color:#ec1d25!important;} /*.menu-blw-logo .dropdown .dropdown-menu{padding: 15px;}*/ .title-menu a{color:#e1850f!important;padding-bottom: 5px;font-weight: bold;border-bottom: 1px solid #ddd;margin-bottom: 10px;} /*.menu-blw-logo .dropdown .dropdown-menu li ul.submenu li:before { content: "\f105"; FontAwesome Unicode font-family: FontAwesome; display: inline-block; margin-left: -1.3em; same as padding-left set on li width: 1.3em; same as padding-left set on li }*/ li.dropdown:hover > .dropdown-menu {display: block;} /* CSS used here will be applied after bootstrap.css */ .nav { margin-bottom: 0; } .nav > li.dropdown.dropdwn-full{ position: static; } .nav > li.dropdown.dropdwn-full:hover .dropdown-menu {display:table; width: 100%;text-align: left;margin-left: 10px!important;padding: 31px;} .menu-blw-logo li.menucol-1-4{padding-left: 10px;padding-right: 10px;} .menu-blw-logo li.menucol-1-4:last-child{border-right: none;} .mnu-col-div{padding:10px;border-right:1px solid #ddd;min-height: 400px;} .mnu-col-div.mnu-remedy{border-right: none;} .dropdown-menu > li > a{padding: 10px 20px;} .dropdown-menu > li > a:hover{background: #d91c13;color:#fff;} .dropdown-menu{padding:0;}