* == malihu jquery custom scrollbar plugin == Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller */ /* CONTENTS: 1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar. 4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes. */ /* ------------------------------------------------------------------------------------------------------------------------ 1. BASIC STYLE ------------------------------------------------------------------------------------------------------------------------ */ .mCustomScrollbar{ -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ } .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; } .mCustomScrollBox{ /* contains plugin's markup */ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr; } .mCSB_container{ /* contains the original content */ overflow: hidden; width: auto; height: auto; } /* ------------------------------------------------------------------------------------------------------------------------ 2. VERTICAL SCROLLBAR y-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_inside > .mCSB_container{ margin-right: 30px; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */ .mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */ .mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ position: absolute; width: 16px; height: auto; left: auto; top: 0; right: 0; bottom: 0; } .mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */ .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */ right: auto; left: 0; } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */ .mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; } .mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; } .mCSB_scrollTools .mCSB_draggerRail{ width: 2px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCSB_scrollTools .mCSB_dragger{ /* the draggable element */ cursor: pointer; width: 100%; height: 30px; /* minimum dragger height */ z-index: 1; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */ position: relative; width: 4px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; text-align: center; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown{ display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 3. HORIZONTAL SCROLLBAR x-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_horizontal.mCSB_inside > .mCSB_container{ margin-right: 0; margin-bottom: 30px; } .mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; } .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ width: auto; height: 16px; top: auto; right: 0; bottom: 0; left: 0; } .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */ .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 2px; margin: 7px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 30px; /* minimum dragger width */ height: 100%; left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 12px; /* auto-expanded scrollbar */ margin: 2px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 8px; /* auto-expanded scrollbar */ margin: 4px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ display: block; position: absolute; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 4. VERTICAL AND HORIZONTAL SCROLLBARS yx-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_container_wrapper{ position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px; } .mCSB_container_wrapper > .mCSB_container{ padding-right: 30px; padding-bottom: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; } /* non-visible horizontal scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; } /* non-visible vertical scrollbar/RTL direction/left-side scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; } /* non-visible scrollbar/RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 0; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; /* non-visible scrollbar */ margin-left: 0; } /* non-visible horizontal scrollbar */ .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 5. TRANSITIONS ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; transition: opacity .2s ease-in-out, background-color .2s ease-in-out; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */ .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{ -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; } /* ------------------------------------------------------------------------------------------------------------------------ 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS ------------------------------------------------------------------------------------------------------------------------ */ /* ---------------------------------------- 6.1 THEMES ---------------------------------------- */ /* default theme ("light") */ .mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; } .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } .mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.4); filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; } .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ background-image: url(mCSB_buttons.png); /* css sprites */ background-repeat: no-repeat; opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 0; /* sprites locations light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px */ } .mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -20px; /* sprites locations light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px */ } .mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -40px; /* sprites locations light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px */ } .mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -56px; /* sprites locations light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px */ } .mCSB_scrollTools .mCSB_buttonUp:hover, .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } /* theme: "dark" */ .mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.85); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.9); } .mCS-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme: "light-2", "dark-2" */ .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px 0; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -20px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -40px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -56px; } /* theme: "dark-2" */ .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px 0; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -20px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -40px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -56px; } /* ---------------------------------------- */ /* theme: "light-thick", "dark-thick" */ .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; background-color: #fff; background-color: rgba(255,255,255,0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 4px; margin: 6px 0; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 6px; margin: 5px auto; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px 0; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -20px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -40px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -56px; } /* theme: "dark-thick" */ .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px 0; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -20px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -40px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -56px; } /* ---------------------------------------- */ /* theme: "light-thin", "dark-thin" */ .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.1); } .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 2px; margin: 7px auto; } /* theme "dark-thin" */ .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */ .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); } .mCS-rounded.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; } .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 14px; margin: 0 1px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 14px; margin: 1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 16px; /* auto-expanded scrollbar */ height: 16px; margin: -1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 4px; /* auto-expanded scrollbar */ } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 16px; /* auto-expanded scrollbar */ width: 16px; margin: 0 -1px; } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 4px; /* auto-expanded scrollbar */ margin: 6px 0; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 -72px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -92px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -112px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -128px; } /* theme "rounded-dark", "rounded-dots-dark" */ .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px -72px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -92px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -112px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -128px; } /* theme "rounded-dots", "rounded-dots-dark" */ .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ background-color: transparent; background-position: center; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg=="); background-repeat: repeat-y; opacity: 0.3; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ height: 4px; margin: 6px 0; background-repeat: repeat-x; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px -72px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -92px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -112px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -128px; } /* theme "rounded-dots-dark" */ .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII="); } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px -72px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -92px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -112px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -128px; } /* ---------------------------------------- */ /* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */ .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-y; background-image: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-x; background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } /* theme "3d", "3d-dark" */ .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; } .mCS-3d.mCSB_scrollTools, .mCS-3d-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 8px; background-color: #000; background-color: rgba(0,0,0,0.2); box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 8px; margin: 4px 0; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 8px; margin: 4px auto; } .mCS-3d.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "3d-dark" */ .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); box-shadow: inset 1px 0 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "3d-thick", "3d-thick-dark" */ .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; } .mCS-3d-thick.mCSB_scrollTools_vertical, .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools_horizontal, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ bottom: 1px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4); width: 12px; margin: 2px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 12px; width: auto; } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #000; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme: "3d-thick-dark" */ .mCS-3d-thick-dark.mCSB_scrollTools{ box-shadow: inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #fff; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "minimal", "minimal-dark" */ .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ right: 0; margin: 12px 0; } .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: 0; margin: 0 12px; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ left: 0; right: auto; } .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; } .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* theme: "minimal-dark" */ .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* ---------------------------------------- */ /* theme "light-3", "dark-3" */ .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ width: 6px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; } .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 6px; margin: 5px 0; } .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 12px; } .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 12px; margin: 2px 0; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "dark-3" */ .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */ .mCS-inset.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 12px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; margin: 3px 5px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 6px; margin: 5px 3px; position: absolute; width: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 12px; margin: 2px 0; } .mCS-inset.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "inset-dark", "inset-2-dark", "inset-3-dark" */ .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* theme "inset-2", "inset-2-dark" */ .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; border-width: 1px; border-style: solid; border-color: #fff; border-color: rgba(255,255,255,0.2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ border-color: #000; border-color: rgba(0,0,0,0.2); } /* theme "inset-3", "inset-3-dark" */ .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } /* ---------------------------------------- */ / *! * Bootstrap v3.1.1 (http://getbootstrap.com) * Bản quyền 2011-2014 Twitter, Inc. * Được cấp phép theo MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * / / *! * Được tạo bằng Trình tùy chỉnh Bootstrap (http://getbootstrap.com.vn/customize/?id=89fdac4e80029a96b8fdd0f4896b9db9) * Cấu hình được lưu vào config.json và https://gist.github.com/89fdac4e80029a96b8fdd0f4896b9db9 * // *! chuẩn hóa.css v3.0.1 | Giấy phép MIT | git.io/n normalize * / html {font-family: sans-serif; -ms-text-size-điều chỉnh: 100%; - webkit-text-size-điều chỉnh: 100%} body {lề: 0} bài viết, sang một bên , chi tiết, figcaption, hình, chân trang, tiêu đề, nhóm, chính, điều hướng, phần, tóm tắt {display: block} audio, canvas, tiến trình, video {display: inline-block; vertical-align: baseline} audio: not ([ controls]) {display: none; height: 0} [hidden], template {display: none} a {nền: trong suốt} a: active, a: hover {phác thảo: 0} abbr [title] {Border-bottom: 1px rải rác} b, mạnh {font-weight: bold} dfn {font-style: italic} h1 {font-size: 2em; lề: 0.67em 0} mark {background: # ff0; color: # 000} small {font- kích thước: 80%} sub, sup {font-size: 75%; line-height: 0; vị trí: tương đối; dọc-align: baseline} sup {top: -0.5em} sub {bottom: -0.25em} img { Border: 0} svg: not (: root) {overflow: hidden} hình {lề: 1em 40px} hr {-moz-box-sizing: content-box; box-sizing:thuê} .navbar-default .navbar-nav> .active> a, .navbar-default .navbar-nav> .active> a: hover, .navbar-default .navbar-nav> .active> a: Focus {color: # 555; màu nền: # e7e7e7} .navbar-default .navbar-nav>. bị vô hiệu hóa> a: tập trung {color: #ccc; màu nền: trong suốt} .navbar-default .navbar-toggle {Border-color: #ddd} .navbar-default .navbar-toggle: hover, .navbar-default -toggle: tập trung {nền-màu: #ddd} .navbar-default .navbar-toggle .icon-bar {background-color: # 888} .navbar-default .navbar-crash, .navbar-default .navbar-form viền màu: # e7e7e7} .navbar-default .navbar-nav> .open> a, .navbar-default .navbar-nav> .open> a: hover, .navbar-default : tập trung {màu nền: # e7e7e7; màu: # 555} @media (chiều rộng tối đa:767px) {. Navbar-default .navbar-nav .open .dropdown-menu> li> a {color: # 777} .navbar-default .navbar-nav .open .dropdown-menu> li> a: hover, .navbar -default .navbar-nav .open .dropdown-menu> li> a: tập trung {color: # 333; màu nền: trong suốt} .navbar-default .navbar-nav .open .dropdown-menu> .active> a, .navbar-default .navbar-nav .open .dropdown-menu> .active> a: hover, .navbar-default .navbar-nav .open .dropdown-menu> .active> a: Focus {color: # 555; nền -color: # e7e7e7} .navbar-default .navbar-nav .open .dropdown-menu> .disables> a, .navbar-default .navbar-nav .open .dropdown-menu> .disatted> a: hover, .navbar -default .navbar-nav .open .dropdown-menu> .disables> a: Focus {color: #ccc; background-color: suốt}}. navbar-default .navbar-link {color: # 777} .navbar-default .navbar-link: hover {color: # 333} .navbar-default.btn-link {color: # 777} .navbar-default .btn-link: hover, .navbar-default .btn-link: Focus {color: # 333} .navbar-default .btn-link [bị vô hiệu hóa]: hover, fieldset [bị vô hiệu hóa] .navbar-default .btn-link: hover, .navbar-default .btn-link [bị vô hiệu hóa]: tập trung, fieldset [bị vô hiệu hóa] .navbar-default navbar-inverse {phông nền nhãn hiệu: tập trung {color: #fff; màu nền: trong suốt} .navbar-inverse .navbar-text {color: # 999} .navbar-inverse .navbar-nav> li> a {color: # 999} .navbar- nghịch đảo .navbar-nav> li> a: hover, .navbar-inverse .navbar-nav> li> a: tập trung {color: #fff; nền-màu: trong suốt} .navbar-inverse .navbar-nav> .active> a, .navbar-inverse .navbar-nav> .active> a: hover, .navbar-inverse .navbar-nav> .active>a: tập trung {color: #fff; background-color: # 080808} .navbar-inverse .navbar-nav> .disables> a, .navbar-inverse .navbar-nav> .disables> a: tập trung {color: # 444; màu nền: trong suốt} .navbar-inverse .navbar-toggle {Border-color: # 333} .navbar-inverse .navbar-toggle: hover, .navbar-inverse .navbar-toggle: tập trung {nền-màu: # 333} .navbar-inverse .navbar-toggle nghịch đảo nav> .open> a: tập trung {màu nền: # 080808; màu: #fff} @media (max-width: 767px) {. navbar-inverse .navbar-nav .open .dropdown-menu> .dropdown-header {viền ​​màu: # 080808} .navbar-inverse .navbar-nav .open.menu thả xuống .divider {nền-màu: # 080808} .navbar-inverse .navbar-nav .open. menu> li> a: hover, .navbar-inverse .navbar-nav .open .dropdown-menu> li> a: tập trung {color: #fff; nền-màu: trong suốt} .navbar-inverse .navbar-nav .open .dropdown-menu> .active> a, .navbar-inverse .navbar-nav .open .dropdown-menu> .active> a: hover, .navbar-inverse .navbar-nav .open .dropdown-menu> .active> a: tập trung {color: #fff; background-color: # 080808} .navbar-inverse .navbar-nav .open. > .disables> a: hover, .navbar-inverse .navbar-nav .open .dropdown-menu> .disables> a: Focus {color: # 444; background-color: minh bạch}}. navbar-inverse .navbar-link {màu: # 999} .navbar-nghịch đảo .navbar-link:hover {color: #fff} .navbar-inverse .btn-link {color: # 999} .navbar-inverse .btn-link: hover, .navbar-nghịch đảo -inverse .btn-link [bị vô hiệu hóa]: hover, fieldset [bị vô hiệu hóa] .navbar-inverse .btn-link: hover, .navbar-inverse .btn-link [tật]: tập trung, bộ trường btn-link: tập trung {color: # 444} .breadcrumb {padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: # f5f5f5; Border-radius: 4px} : inline-block} .breadcrumb> li + li: before {content: "/ \ 00a0"; padding: 0 5px; color: #ccc} .breadcrumb> .active {color: # 999} .pagination {display: inline- block; padding-left: 0; lề: 20px 0; Border-radius: 4px} .pagination> li {display: inline} .pagination> li> a, .pagination> li> span {vị trí: tương đối; float: left; padding: 6px 12px; line-height: 1.42857143; text-trang trí: none; color: # 428bca;màu nền: #fff; Border: 1px solid #ddd; margin-left: -1px} .pagination> li: First-child> a, .pagination> li: First-child> span {margin-left: 0; Border -bottom-left-radius: 4px; Border-top-left-radius: 4px} .pagination> li: last-child> a, .pagination> li: last-child> span {Border-bottom-right-radius: 4px ; Border-top-right-radius: 4px} .pagination> li> a: hover, .pagination> li> span: hover, .pagination> li> a: Focus, .pagination> li> span: Focus {color: # 2a6496; màu nền: #eee; đường viền màu: #ddd} .pagination> .active> a, .pagination> .active> span, .pagination> .active> a: hover, .pagination> .active> span: hover, .pagination> .active> a: tập trung, .pagination> .active> span: tập trung {z-index: 2; color: #fff; background-color: # 428bca; Border-color: # 428bca; con trỏ: mặc định } .pagination> .disables> span, .pagination> .disables> span:hover, .pagination> .disables> span: Focus, .pagination> .disables> a, .pagination> .disables> a: hover, .pagination> .disables> a: Focus {color: # 999; background-color: # fff; Border-color: #ddd; con trỏ: không được phép} .pagination-lg> li> a, .pagination-lg> li> span {padding: 10px 16px; font-size: 18px} .pagination-lg> li : First-child> a, .pagination-lg> li: First-child> span {Border-bottom-left-radius: 6px; Border-top-left-radius: 6px} .pagination-lg> li: last-child > a, .pagination-lg> li: last-child> span {Border-bottom-right-radius: 6px; Border-top-right-radius: 6px} .pagination-sm> li> a, .pagination-sm> li> span {padding: 5px 10px; font-size: 12px} .pagination-sm> li: First-child> a, .pagination-sm> li: First-child> span {Border-bottom-left-radius: 3px ; Border-top-left-radius: 3px} .pagination-sm> li: last-child> a, .pagination-sm> li:last-child> span {Border-bottom-right-radius: 3px; Border-top-right-radius: 3px} .pager {padding-left: 0; lề: 20px 0; list-style: none; text-align: centre} .pager li {display: inline} .pager li> a, .pager li> span {display: inline-block; padding: 5px 14px; background-color: #fff; Border: 1px solid #ddd; Border-radius : 15px} .pager li> a: hover, .pager li> a: tập trung {text-trang trí: none; màu nền: #eee} .pager .next> a, .pager .next> span {float: right} .pager .preingly> a, .pager .preingly> span {float: left} .pager .disables> a, .pager .disables> a: hover, .pager .disables> a: Focus, .pager .disables> span { màu: # 999; màu nền: #fff; con trỏ: không được phép} .label {display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: bold; line-height : 1; color: #fff; text-align: centre; white-space: nowrap; vertical-align: baseline; Border-radius: .25em} a.label: hover, a.label:tập trung {color: #fff; text-trang trí: none; con trỏ: con trỏ} .label: blank {display: none} .btn .label {vị trí: tương đối; top: -1px} .label-default {background-color: # 999} .label-default [href]: hover, .label-default [href]: tập trung {màu nền: # 808080} .label-chính {nền-màu: # 428bca} .label-chính [href]: hover , .label-chính [href]: tập trung {màu nền: # 3071a9} .label-thành công {màu nền: # 5cb85c} .label-thành công [href]: hover, .label-thành công [href]: tập trung { màu nền: # 449d44} .label-thông tin {nền-màu: # 5bc0de} .label-thông tin [href]: hover, .label-thông tin [href]: tập trung {màu nền: # 31b0d5}. {màu nền: # f0ad4e} .label-warning [href]: hover, .label-warning [href]: tập trung {màu nền: # ec971f} .label-risk {nền-màu: # d9534f} .label- nguy hiểm [href]: hover, .label-risk [href]: tập trung {màu nền: # c9302c} .badge {display: inline-block; min-width: 10px;padding: 3px 7px; font-size: 12px; font-weight: bold; color: #fff; line-height: 1; vertical-align: baseline; white-space: nowrap; text-align: centre; background-color: # 999; Border-radius: 10px} .badge: blank {display: none} .btn .badge {vị trí: tương đối; top: -1px} .btn-xs .badge {top: 0; padding: 1px 5px} a. Badge: hover, a.badge: Focus {color: #fff; text-trang trí: none; con trỏ: con trỏ} a.list-group-item.active> .badge, .nav-viên> .active> a> .badge {color: # 428bca; background-color: #fff} .nav-viên> li> a> .badge {lề-left: 3px} .jumbotron {padding: 30px; lề-bottom: 30px; color: inherit; background- color: #eee} .jumbotron h1, .jumbotron .h1 {color: inherit} .jumbotron p {margin-bottom: 15px; font-size: 21px; font-weight: 200} .jumbotron> hr {Border-top-color : # d5d5d5} .container .jumbotron {Border-radius: 6px} .jumbotron .container {max-width: 100%} @ màn hình phương tiện và (min-width: 768px) {.jumbotron {padding-top: 48px; padding-bottom: 48px} .container .jumbotron {padding-left: 60px; padding-right: 60px} .jumbotron h1, .jumbotron .h1 {font-size: 63px}. display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857143; background-color: #fff; Border: 1px solid #ddd; Border-radius: 4px; -webkit-quá trình: all. in-out; -o-trans: all .2s easy-in-out; quá trình chuyển đổi: all .2s easy-in-out} .thumbnail> img, .thumbnail a> img {margin-left: auto; lề-phải: auto} a.thumbnail: hover, a.thumbnail: tập trung, a.thumbnail.active {viền-màu: # 428bca} .thumbnail bottom: 20px; Border: 1px solid trong suốt; Border-radius: 4px} .alert h4 {margin-top: 0; color: inherit} .alert .alert-link {font-weight: bold} .alert> p, .alert > ul {margin-bottom: 0} .alert> p + p {margin-top: 5px} .alert-notifyable {padding-right: 35px}.alert-notifyable .close {vị trí: tương đối; top: -2px; phải: -21px; color: inherit} .alert-thành công -success hr {Border-top-color: # c9e2b3} .alert-thành công .alert-link {color: # 2b542c} .alert-information {background-color: # d9edf7; Border-color: # bce8f1; color: # 31708f } .alert-information hr {Border-top-color: # a6e1ec} .alert-information .alert-link {color: # 245269} .alert-warning {background-color: # fcf8e3; Border-color: #faebcc; color : # 8a6d3b} .alert-cảnh báo ebccd1; color: # a94442} .alert-risk hr {Border-top-color: # e4b9c0} .alert-risk .alert-link {color: # 843534} @keyframes sọc tiến trình {từ {nền 40px 0} đến {nền-vị trí: 0 0}}. Tiến trình {overflow: hidden; height: 20px; margin-bottom: 20px;màu nền: # f5f5f5; Border-radius: 4px; -webkit-box-Shadow: inset 0 1px 2px rgba (0,0,0,0.1); box-Shadow: inset 0 1px 2px rgba (0,0,0 , 0.1)}. Thanh tiến trình {float: left; width: 0%; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: centre; background-color: # 428bca; -webkit-box-Shadow: inet 0 -1px 0 rgba (0,0,0,0.15); box-Shadow: inset 0 -1px 0 rgba (0,0,0,0.15); - chuyển đổi webkit : width .6s easy; -o-trans: width .6s easy; quá trình: width .6s easy} .proTHER-sọc .proTHER-bar {background-image: -webkit-linear-gradient (45deg, rgba (255,255,255,0.15 ) 25%, trong suốt 25%, trong suốt 50%, rgba (255,255,255,0,15) 50%, rgba (255,255,255,0,15) 75%, trong suốt 75%, trong suốt); hình nền: -o-linear-gradient (45deg, rgba (255,255,255,0,15) 25%, trong suốt 25%, trong suốt 50%, rgba (255,255,255,0,15) 50%, rgba (255,255,255,0,15) 75%, trong suốt 75%,trong suốt); ảnh nền: gradient tuyến tính (45deg, rgba (255,255,255,0,15) 25%, trong suốt 25%, trong suốt 50%, rgba (255,255,255,0,15) 50%, rgba (255,255,255,0,15) 75%, trong suốt 75% %, trong suốt); kích thước nền: 40px 40px} .proTHER.active .proTHER-bar {-webkit-animation: Progress-bar-sọc 2s linear infinite; -o-animation: Progress-bar-sọc 2s linear infinite; : Progress-bar-sọc 2s tuyến tính vô hạn} .proTHER-bar [aria-valuenow = "1"], process-bar [aria-valuenow = "2"] {min-width: 30px} .proTHER-bar [aria -valuenow = "0"] {color: # 999; min-width: 30px; background-color: trong suốt; nền-hình ảnh: none; box-Shadow: none} .proTHER-bar-thành công {nền-màu: # 5cb85c } .proceed-sọc .proceed-bar-thành công {hình nền: -webkit-linear-gradient (45deg, rgba (255,255,255,0.15) 25%, trong suốt 25%, trong suốt 50%,rgba (255,255,255,0,15) 50%, rgba (255,255,255,0,15) 75%, trong suốt 75%, trong suốt); hình nền: -o-linear-gradient (45deg, rgba (255,255,255,0,15) 25%, trong suốt 25% , trong suốt 50%, rgba (255,255,255,0,15) 50%, rgba (255,255,255,0,15) 75%, trong suốt 75%, trong suốt); hình nền: gradient tuyến tính (45deg, rgba (255,255,255,0,15) 25%, trong suốt 25%, trong suốt 50%, rgba (255,255,255,0,15) 50%, rgba (255,255,255,0,15) 75%, trong suốt 75%, trong suốt)}. Tiến trình-bar-thông tin {màu nền: # 5bc0de}. .proTHER-bar-information {nền-hình ảnh: -webkit-linear-gradient (45deg, rgba (255,255,255,0.15) 25%, trong suốt 25%, trong suốt 50%, rgba (255,255,255,0,15) 50%, rgba (255,255,255, 0,15) 75%, trong suốt 75%, trong suốt); ảnh nền: -o-linear-gradient (45deg, rgba (255,255,255,0.15) 25%, trong suốt 25%, trong suốt 50%, rgba (255,255,255,0,15) 50%, rgba (255,255,255,0,15) 75%, trong suốt 75%, trong suốt); ảnh nền: gradient tuyến tính (45deg, rgba (255,255,255,0,15) 25%, trong suốt 25%, trong suốt 50%, rgba (255,255,255,0,15) 50%, rgba (255,255,255,0,15) 75%, trong suốt 75%, minh bạch)}. tiến trình thanh cảnh báo {nền-màu: # f0ad4e} .projection-sọc. ảnh nền: -webkit-linear-gradient (45deg, rgba (255,255,255,0.15) 25%, trong suốt 25%, trong suốt 50%, rgba (255,255,255,0,15) 50%, rgba (255,255,255,0,15) 75% %, trong suốt); ảnh nền: -o-linear-gradient (45deg, rgba (255,255,255,0,15) 25%, trong suốt 25%, trong suốt 50%, rgba (255,255,255,0,15) 50%, rgba (255,255,255,0.15) 75%, trong suốt 75%, trong suốt); ảnh nền: gradient tuyến tính (45deg, rgba (255,255,255,0,15) 25%, trong suốt 25%, trong suốt 50%, rgba (255,255,255,0.15) 50%, rgba (255,255,255,0,15) 75%, trong suốt 75%, trong suốt)}. Tiến trình-bar-nguy hiểm {nền-màu: # d9534f} .projection-sọc .proTHER-bar-risk {hình nền: -webkit-linear-gradient (45deg, rgba (255,255,255,0.15) 25%, trong suốt 25%, trong suốt 50%, rgba (255,255,255,0,15) 50%, rgba (255,255,255,0,15) 75%, trong suốt 75%, minh bạch ; ảnh nền: -o-linear-gradient (45deg, rgba (255,255,255,0.15) 25%, trong suốt 25%, trong suốt 50%, rgba (255,255,255,0,15) 50%, rgba (255,255,255,0,15) 75%, trong suốt 75%, trong suốt); ảnh nền: gradient tuyến tính (45deg, rgba (255,255,255,0,15) 25%, trong suốt 25%, trong suốt 50%, rgba (255,255,255,0,15) 50%, rgba (255,255,255,0,15) 75% , trong suốt 75%, trong suốt)}. media, .media-body {overflow: hidden; zoom: 1} .media, .media .media {margin-top: 15px} .media: First-child {margin-top: 0 } .media-object {display:khối} .media-title {lề: 0 0 5px} .media> .pull-left {lề-phải: 10px} .media> .pull-phải {lề-trái: 10px} .media-list {padding-left: 0; list-style: none} .list-group {margin-bottom: 20px; padding-left: 0} .list-group-item {vị trí: tương đối; display: block; padding: 10px 15px; lề-bottom: - 1px; màu nền: #fff; Border: 1px solid #ddd} .list-group-item: First-child {Border-top-right-radius: 4px; Border-top-left-radius: 4px} .list- nhóm-item: last-child {lề-bottom: 0; Border-bottom-right-radius: 4px; Border-bottom-left-radius: 4px} .list-group-item> .badge {float: right} .list -group-item> .badge + .badge {lề-phải: 5px} a.list-group-item {color: # 555} a.list-group-item .list-group-item-title {color: # 333} a.list-group-item: hover, a.list-group-item: Focus {text-trang trí: none; color: # 555; background-color: # f5f5f5} .list-group-item.disables, .list- nhóm-item.disables: hover ,.list-group-item.disables: Focus {background-color: #eee; color: # 999} .list-group-item.disables .list-group-item-title, .list-group-item.disatted: hover. list-group-item-title, .list-group-item.disables: tập trung .list-group-item-title {color: inherit} .list-group-item.disables .list-group-item-text, .list -group-item.disables: hover .list-group-item-text, .list-group-item.disables: tập trung .list-group-item-text {color: # 999} .list-group-item.active, .list-group-item.active: hover, .list-group-item.active: Focus {z-index: 2; color: #fff; background-color: # 428bca; Border-color: # 428bca} .list- nhóm-item.active .list-group-item-title, .list-group-item.active: hover .list-group-item-title, .list-group-item.active: tập trung .list-group-item- tiêu đề {color: inherit} .list-group-item.active .list-group-item-text, .list-group-item.active: hover .list-group-item-text, .list-group-item.active :tập trung .list-group-item-text {color: # e1edf7} .list-group-item-thành công {color: # 3c763d; background-color: # dff0d8} a.list-group-item-thành công {color: # 3c763d } a.list-group-item-thành công .list-group-item-title {color: inherit} a.list-group-item-thành công: hover, a.list-group-item-thành công: tập trung {color: # 3c763d; màu nền: # d0e9c6} a.list-group-item-thành công.active, a.list-group-item-thành công.active: hover, a.list-group-item-thành công. : #fff; màu nền: # 3c763d; đường viền màu: # 3c763d} .list-nhóm-item-thông tin {color: # 31708f; màu nền: # d9edf7} a.list-nhóm-item-information {color : # 31708f} a.list-group-item-information .list-group-item-title {color: inherit} a.list-group-item-information: hover, a.list-group-item-information: Focus { màu: # 31708f; màu nền: # c4e3f3} a.list-group-item-information.active, a.list-group-item-information.active: hover, a.list-group-item-information.active: tiêu điểm {màu: #fff;màu nền: # 31708f; viền-màu: # 31708f} .list-nhóm-mục-cảnh báo {color: # 8a6d3b; màu nền: # fcf8e3} ​​a.list-nhóm-item-cảnh báo {color: # 8a6d3b} a.list-nhóm-mục-cảnh báo .list-nhóm-mục-mục {màu: kế thừa} a.list-nhóm-mục-cảnh báo: hover, a.list-nhóm-mục-cảnh báo: tập trung {color: # 8a6d3b ; màu nền: # faf2cc} a.list-group-item-warning.active, a.list-group-item-warning.active: hover, a.list-group-item-warning.active: Focus {color: #fff; màu nền: # 8a6d3b; đường viền màu: # 8a6d3b} .list-nhóm-item-risk {color: # a94442; màu nền: # f2dede} a.list-nhóm-item-risk {color: # a94442} a.list-group-item-risk .list-group-item-title {color: inherit} a.list-group-item-risk: hover, a.list-group-item-risk: Focus {color : # a94442; màu nền: #ebcccc} a.list-group-item-risk.active, a.list-group-item-risk.active: hover, a.list-group-item-risk.active:tập trung {color: #fff; background-color: # a94442; Border-color: # a94442} .list-group-item-title {lề-top: 0; lề-bottom: 5px} .list-group-item-text {lề-bottom: 0; line-height: 1.3} .panel {lề-bottom: 20px; background-color: #fff; Border: 1px solid trong suốt; Border-radius: 4px; -webkit-box-Shadow: 0 1px 1px rgba (0,0,0,0,05); box-bóng: 0 1px 1px rgba (0,0,0,0,05)}. Bảng điều khiển-body {padding: 15px} .panel-title {padding: 10px 15px; Border -bottom: 1px solid trong suốt; Border-top-right-radius: 3px; Border-top-left-radius: 3px} .panel-title> .dropdown .dropdown-toggle {color: inherit} .panel-title {margin- top: 0; lề-bottom: 0; font-size: 16px; color: inherit} .panel-title> a {color: inherit} .panel-footer {padding: 10px 15px; background-color: # f5f5f5; Border- top: 1px solid #ddd; Border-bottom-right-radius: 3px; Border-bottom-left-radius: 3px} .panel> .list-group {margin-bottom: 0} .panel>.list-group .list-group-item {Border-width: 1px 0; Border-radius: 0} .panel> .list-group: First-child .list-group-item: First-child {Border-top: 0 ; Border-top-right-radius: 3px; Border-top-left-radius: 3px} .panel> .list-group: last-child .list-group-item: last-child {Border-bottom: 0; Border -bottom-right-radius: 3px; Border-bottom-left-radius: 3px} .panel-title + .list-group .list-group-item: First-child {Border-top-width: 0} .panel>. bảng, .panel> .table-responsive> .table {margin-bottom: 0} .panel> .table: First-child, .panel> .table-responsive: First-child> .table: First-child {Border- top-right-radius: 3px; Border-top-left-radius: 3px} .panel> .table: First-child> thead: First-child> tr: First-child td: First-child, .panel> .table -responsive: First-child> .table: First-child> thead: First-child> tr: First-child td: First-child, .panel> .table: First-child>tbody: First-child> tr: First-child td: First-child, .panel> .table-responsive: First-child> .table: First-child> tbody: First-child> tr: First-child td: First -child, .panel> .table: First-child> thead: First-child> tr: First-child th: First-child, .panel> .table-responsive: First-child> .table: First-child> thead : First-child> tr: First-child th: First-child, .panel> .table: First-child> tbody: First-child> tr: First-child th: First-child, .panel> .table-responsive : First-child> .table: First-child> tbody: First-child> tr: First-child th: First-child {Border-top-left-radius: 3px} .panel> .table: First-child> thead : First-child> tr: First-child td: last-child, .panel> .table-responsive: First-child> .table: First-child> thead: First-child> tr: First-child td: last- con, .panel> .table: con đầu lòng> tbody: con đầu lòng> tr: con đầu lòng td:Last-child, .panel> .table-responsive: First-child> .table: First-child> tbody: First-child> tr: First-child td: last-child, .panel> .table: First-child> thead: First-child> tr: First-child th: last-child, .panel> .table-responsive: First-child> .table: First-child> thead: First-child> tr: First-child th: last -child, .panel> .table: First-child> tbody: First-child> tr: First-child th: last-child, .panel> .table-responsive: First-child> .table: First-child> tbody : First-child> tr: First-child th: last-child {Border-top-right-radius: 3px} .panel> .table: last-child, .panel> .table-responsive: last-child> .table : last-child {Border-bottom-right-radius: 3px; Border-bottom-left-radius: 3px} .panel> .table: last-child> tbody: last-child> tr: last-child td: first- con, .panel> .table-responsive: last-child> .table: last-child> tbody: last-child>tr: Last-child td: First-child, .panel> .table: last-child> t feet: last-child> tr: last-child td: First-child, .panel> .table-responsive: last-child> .table: last-child> tfoot: last-child> tr: last-child td: First-child, .panel> .table: last-child> tbody: last-child> tr: last-child th: First-child , .panel> .table-responsive: last-child> .table: last-child> tbody: last-child> tr: last-child th: First-child, .panel> .table: last-child> t feet: last -child> tr: last-child th: First-child, .panel> .table-responsive: last-child> .table: last-child> t feet: last-child> tr: last-child th: First-child { Border-bottom-left-radius: 3px} .panel> .table: last-child> tbody: last-child> tr: last-child td: last-child, .panel> .table-responsive: last-child>. bảng: Last-child> tbody: last-child> tr: last-child td: last-child, .panel> .table: last-child>tfoot: last-child> tr: last-child td: last-child, .panel> .table-responsive: last-child> .table: last-child> tfoot: last-child> tr: last-child td: last -child, .panel> .table: last-child> tbody: last-child> tr: last-child th: last-child, .panel> .table-responsive: last-child> .table: last-child> tbody : last-child> tr: last-child th: last-child, .panel> .table: last-child> t feet: last-child> tr: last-child th: last-child, .panel> .table-responsive : last-child> .table: last-child> tfoot: last-child> tr: last-child th: last-child {Border-bottom-right-radius: 3px} .panel> .panel-body + .table ,. bảng điều khiển> .panel-body + .table-responsive {Border-top: 1px solid #ddd} .panel> .table> tbody: First-child> tr: First-child th, .panel> .table> tbody: First-child > tr: con đầu tiên td {Border-top: 0} .panel> .table-bordered, .panel> .table-responsive>.bảng có viền {viền: 0} .panel> .table-bordered> thead> tr> th: First-child, .panel> .table-responsive> .table-bordered> thead> tr> th: bảng điều khiển> .table-bordered> tbody> tr> th: First-child, .panel> .table-responsive> .table-bordered> tbody> tr> th: First-child, .panel> .table-bordered> tr> th: First-child, .panel> .table-responsive> .table-bordered> tfoot> tr> th: First-child, .panel> .table-bordered> thead> tr> td: bảng điều khiển> .table-responsive> .table-bordered> thead> tr> td: First-child, .panel> .table-bordered> tbody> tr> td: First-child, .panel> .table-responsive -bordered> tbody> tr> td: con đầu lòng, .panel> .table-bordered> t feet> tr> td: con đầu lòng, .panel>First-child {Border-left: 0} .panel> .table-giáp , .panel> .table-bordered> tbody> tr> th: con cuối cùng, tfoot> tr> th: last-child, .panel> .table-responsive> .table-bordered> tfoot> tr> th: last-child, .panel> .table-bordered> thead> tr> td: last-child , .panel> .table-responsive> .table-giáp> thead> tr> td: last-child, .panel> .table-bordered> tbody> tr> td: last-child, .panel> .table-responsive> .table-bordered> tbody> tr> td: last-child, .panel> .table-bordered> t feet> tr> td: last-child, .panel> .table-responsive> .table-bordered> td:Last-child {Border-right: 0} .panel> .table-bordered> thead> tr: First-child> td, .panel> .table-responsive> .table-giáp> , .panel> .table-bordered> tbody> tr: con đầu lòng> td, .panel> .table-responsive> .table-bordered> tbody> tr: con đầu tiên> td, .panel> thead> tr: First-child> th, .panel> .table-responsive> .table-bordered> thead> tr: first-child> th, .panel> .table-bordered> tbody> tr: , .panel> .table-responsive> .table-giáp > .table-responsive> .table-giáp giáp> t feet> tr:last-child> td, .panel> .table-bordered> tbody> tr: last-child> th, .panel> .table-responsive> .table-giáp responsive {Border: 0; margin-bottom: 0} .panel-group {margin-bottom: 20px} .panel-group .panel {margin-bottom: 0; Border-radius: 4px} .panel-group .panel + .panel {margin-top: 5px} .panel-group .panel-title {Border-bottom: 0} .panel-group .panel-title + .panel-sụp đổ .panel-body {Border-top: 1px solid #ddd} .panel -group .panel-footer {Border-top: 0} .panel-group .panel-footer + .panel-sụp đổ .panel-body {Border-bottom: 1px solid #ddd} .panel-default {Border-color: #ddd } .panel-default> .panel-title {color: # 333; background-color: # f5f5f5; Border-color: #ddd}.panel-default> .panel-title + .panel-crash> .panel-body {Border-top-color: #ddd} .panel-default> .panel-footer + .panel-sụp đổ> .panel-body {Border-bottom- color: #ddd} .panel-sơ cấp {viền-màu: # 428bca} .panel-chính> .panel-đề {màu: #fff; màu nền: # 428bca; viền-màu: # 428bca} .panel-chính > .panel-title + .panel-crash> .panel-body {Border-top-color: # 428bca} .panel-sơ cấp> .panel-footer + .panel-sụp đổ> .panel-body {Border-bottom-color: # 428bca} .panel-thành công {viền-màu: # d6e9c6} .panel-thành công> .panel-đề {màu: # 3c763d; màu nền: # dff0d8; viền màu: # d6e9c6} .panel-thành công> .panel -heading + .panel-crash> .panel-body {Border-top-color: # d6e9c6} .panel-thành công> .panel-footer + .panel-sụp đổ> .panel-body {Border-bottom-color: # d6e9c6}. panel-information {Border-color: # bce8f1} .panel-information> .panel-title {color:# 31708f; màu nền: # d9edf7; viền màu: # bce8f1} .panel-thông tin> .panel-đề + .panel-sụp đổ> .panel-body {Border-top-color: # bce8f1} .panel-information> .panel-footer + .panel-crash> .panel-body {Border-bottom-color: # bce8f1} .panel-warning {Border-color: #faebcc} .panel-warning> .panel-title {color: # 8a6d3b; màu nền: # fcf8e3; viền-màu: #faebcc} .panel-cảnh báo> .panel-đề + .panel-sụp đổ footer + .panel-crash> .panel-body {Border-bottom-color: #faebcc} .panel-risk {Border-color: # ebccd1} .panel-risk> .panel-title {color: # a94442; màu nền : # f2dede; Border-color: # ebccd1} .panel-risk> .panel-title + .panel-crash> .panel-body {Border-top-color: # ebccd1} .panel-risk> .panel-footer + .panel -collapse> .panel-body {Border-bottom-color: # ebccd1}.embed-responsive {location: tương đối; display: block; height: 0; padding: 0; overflow: hidden} .embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive nhúng, .embed- đối tượng responsive {vị trí: tuyệt đối; top: 0; left: 0; bottom: 0; height: 100%; width: 100%; Border: 0} .embed-responsive.embed-responsive-16by9 {padding-bottom: 56,25% } .embed-responsive.embed-responsive-4by3 {padding-bottom: 75%}. well {min-height: 20px; padding: 19px; lề-bottom: 20px; background-color: # f5f5f5; Border: 1px solid # e3e3e3; Border-radius: 4px; -webkit-box-Shadow: inset 0 1px 1px rgba (0,0,0,0,05); box-Shadow: inset 0 1px 1px rgba (0,0,0,0,05)}. well blockquote {Border-color: #ddd; Border-color: rgba (0,0,0,0.15)}. well-lg {padding: 24px; Border-radius: 6px} .well-sm {padding: 9px; Border -radius: 3px} .close {float: right; font-size: 21px; font-weight: bold; line-height: 1; color: # 000; text-Shadow: 0 1px 0 #fff;opacity: .2; filter: alpha (opacity = 20)}. close: hover, .close: Focus {color: # 000; text-trang trí: none; con trỏ: con trỏ; opacity: .5; filter: alpha (opacity = 50)} button.c Đóng {padding: 0; con trỏ: con trỏ; nền: trong suốt; đường viền: 0; -webkit-ngoại hình: none} .modal-open {overflow: hidden} .modal {display: none; overflow: auto; overflow-y: scroll; vị trí: cố định; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; -webkit-overflow-scrolling: touch; phác thảo: 0} .modal.fade. modal-đàm thoại {-webkit-Transform: dịch (0, -25%); - ms-Transform: dịch (0, -25%); - o-Transform: dịch (0, -25%); Transform: dịch ( 0, -25%); - chuyển đổi webkit: -webkit-biến đổi 0,3 dễ dàng; -moz-chuyển đổi: -moz-biến đổi 0,3 dễ dàng; -o-chuyển đổi: -o-biến đổi 0,3 dễ dàng- out; quá trình chuyển đổi: biến đổi 0,3 giây dễ dàng} .modal.in .modal-hộp thoại {-webkit-Transform: dịch (0, 0); - ms-Transform: dịch (0, 0); - o-Transform:dịch (0, 0); biến đổi: dịch (0, 0)}. modal-hộp thoại {vị trí: tương đối; chiều rộng: tự động; lề: 10px} .modal-content {vị trí: tương đối; màu nền: #fff; viền : 1px solid # 999; Border: 1px solid rgba (0,0,0,0.2); Border-radius: 6px; -webkit-box-Shadow: 0 3px 9px rgba (0,0,0,0,5); box- bóng: 0 3px 9px rgba (0,0,0,0,5); phông nền-clip: padding-box; phác thảo: 0} .modal-backdrop {vị trí: cố định; đầu: 0; phải: 0; dưới: 0; trái : 0; z-index: 1040; màu nền: # 000} .modal-backdrop.fade {opacity: 0; filter: alpha (opacity = 0)}. Modal-backdrop.in {opacity: .5; filter: alpha (opacity = 50)}. modal-header {padding: 15px; Border-bottom: 1px solid # e5e5e5; min-height: 16.42857143px} .modal-header .close {margin-top: -2px} .modal-title {lề: 0; line-height: 1.42857143} .modal-body {vị trí: tương đối; padding: 15px} .modal-footer {padding: 15px; text-align: right; Border-top: 1px solid # e5e5e5} .modal -footer .btn +.btn {lề-trái: 5px; lề-dưới: 0} .modal-footer .btn-group .btn + .btn {lề-left: -1px} .modal-footer .btn-block + .btn-block {lề-trái : 0} .modal-scrollbar-đo {vị trí: tuyệt đối; top: -9999px; width: 50px; height: 50px; overflow: scroll} @media (min-width: 768px) {. Modal-hộp thoại {width: 600px; lề: 30px tự động} .modal-content {-webkit-box-Shadow: 0 5px 15px rgba (0,0,0,0,5); box-Shadow: 0 5px 15px rgba (0,0,0,0,5)}. modal-sm {width: 300px}} @ media (min-width: 992px) {. modal-lg {width: 900px}}. tooltip {vị trí: tuyệt đối; z-index: 1070; display: block; font-size: 12px; line-height: 1.4; opacity: 0; filter: alpha (opacity = 0)}. tooltip.in {opacity: .9; filter: alpha (opacity = 90)}. tooltip.top {lề -top: -3px; padding: 5px 0} .tooltip.right {lề-trái: 3px; padding: 0 5px} .tooltip.bottom {lề-top: 3px; padding: 5px 0} .tooltip.left {lề- left: -3px; padding: 0 5px} .tooltip-Inside {max-width:200px; padding: 3px 8px; color: #fff; text-align: centre; text-trang trí: none; background-color: # 000; Border-radius: 4px} .tooltip-arrow {vị trí: tuyệt đối; chiều rộng: 0; height: 0; Border-color: trong suốt; Border-style: solid} .tooltip.top .tooltip-arrow {bottom: 0; left: 50%; lề-left: -5px; Border-width: 5px 5px 0; Border -top-color: # 000} .tooltip.top-left .tooltip-arrow {bottom: 0; left: 5px; Border-width: 5px 5px 0; Border-top-color: # 000} .tooltip.top-right .tooltip-arrow {bottom: 0; right: 5px; Border-width: 5px 5px 0; Border-top-color: # 000} .tooltip.right .tooltip-arrow {top: 50%; left: 0; lề- top: -5px; Border-width: 5px 5px 5px 0; Border-right-color: # 000} .tooltip.left .tooltip-arrow {top: 50%; right: 0; lề-top: -5px; Border- width: 5px 0 5px 5px; Border-left-color: # 000} .tooltip.bottom .tooltip-arrow {top: 0; left: 50%; margin-left: -5px; Border-width: 0 5px 5px; Border -bottom-color: # 000} .tooltip.phía dưới bên trái .tooltip-mũi tên {top: 0; left: 5px; Border-width: 0 5px 5px; Border-bottom-color: # 000} .tooltip.bottom-right .tooltip-arrow {top: 0; right: 5px; Border-width: 0 5px 5px; Border-bottom-color: # 000} .popover {vị trí: tuyệt đối; top: 0; left: 0; z-index: 1060; display: none; max-width: 276px; padding: 1px; text-align: left; background-color: #fff; background-clip: padding-box; Border: 1px solid #ccc; Border: 1px solid rgba (0,0,0,0.2); Border-radius : 6px; -webkit-box-Shadow: 0 5px 10px rgba (0,0,0,0.2); box-Shadow: 0 5px 10px rgba (0,0,0,0.2); trắng-space: normal} .popover .top {lề-top: -10px} .popover.right {lề-trái: 10px} .popover.bottom {lề-top: 10px} .popover.left {lề-trái: -10px} .popover-title {lề : 0; padding: 8px 14px; font-size: 14px; font-weight: normal; line-height: 18px; background-color: # f7f7f7; Border-bottom: 1px solid #ebebeb; Border-radius: 5px 5px 0 0 } .popover-content {phần đệm:9px 14px} .popover> .arrow, .popover> .arrow: after {location: perfect; display: block; width: 0; height: 0; Border-color: trong suốt; Border-style: solid} .popover> .arrow {Border-width: 11px} .popover> .arrow: after {Border-width: 10px; content: ""}. popover.top> .arrow {left: 50%; lề-trái: -11px; Border-bottom- width: 0; Border-top-color: # 999; Border-top-color: rgba (0,0,0,0.25); bottom: -11px} .popover.top> .arrow: after {content: ""; bottom: 1px; lề-trái: -10px; Border-bottom-width: 0; Border-top-color: #fff} .popover.right> .arrow {top: 50%; left: -11px; margin-top: -11px; Border-left-width: 0; Border-right-color: # 999; Border-right-color: rgba (0,0,0,0.25)}. Popover.right> .arrow: after {content: " "; left: 1px; bottom: -10px; Border-left-width: 0; Border-right-color: #fff} .popover.bottom> .arrow {left: 50%; lề-left: -11px; Border- chiều rộng trên cùng: 0;Border-bottom-color: # 999; Border-bottom-color: rgba (0,0,0,0.25); top: -11px} .popover.bottom> .arrow: after {content: ""; top: 1px; lề-trái: -10px; Border-top-width: 0; Border-bottom-color: #fff} .popover.left> .arrow {top: 50%; right: -11px; margin-top: -11px; Border -right-width: 0; Border-left-color: # 999; Border-left-color: rgba (0,0,0,0.25)}. popover.left> .arrow: after {content: ""; right: 1px; Border-right-width: 0; Border-left-color: #fff; bottom: -10px} .carousel {vị trí: tương đối} .carousel-bên trong {vị trí: tương đối; tràn: ẩn; chiều rộng: 100%}. carousel-Internal> .item {display: none; vị trí: tương đối; -webkit-quá trình chuyển đổi: .6s dễ dàng rời khỏi bên trái; -o-quá trình chuyển đổi: .6s dễ dàng rời khỏi bên trái; quá trình chuyển đổi: -out trái} .carousel-bên trong> .item> img, .carousel-bên trong> .item> a> img {line-height: 1} .carousel-bên trong> .active, .carousel-bên trong> .next ,.carousel-Internal> .prev {display: block} .carousel-Internal> .active {left: 0} .carousel-Internal> .next, .carousel-Internal> .prev {vị trí: tuyệt đối; top: 0; width: 100 %}. carousel-Internal> .next {left: 100%}. carousel-Internal> .prev {left: -100%}. carousel-Internal> .next.left, .carousel-Internal> .prev.right {left : 0} .carousel-Internal> .active.left {left: -100%}. Carousel-Internal> .active.right {left: 100%}. Carousel-control {vị trí: tuyệt đối; top: 0; left: 0 ; bottom: 0; width: 15%; opacity: .5; filter: alpha (opacity = 50); font-size: 20px; color: #fff; text-align: centre; text-Shadow: 0 1px 2px rgba ( 0,0,0,0,6)}. Carousel-control.left {nền-hình ảnh: -webkit-linear-gradient (trái, dừng màu (rgba (0,0,0,0,5) 0), dừng màu ( rgba (0,0,0,0.0001) 100%)); ảnh nền: -o-linear-gradient (trái, rgba (0,0,0,0,5) 0, rgba (0,0,0,0.0001) 100%); ảnh nền: gradient tuyến tính (sang phải, rgba (0,0,0,0,5) 0,rgba (0,0,0,0.0001) 100%); lặp lại nền: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 80000000', endColorstr = '# 00000000', GradientType = 1) } .carousel-control.right {left: auto; right: 0; nền-hình ảnh: -webkit-linear-gradient (trái, dừng màu (rgba (0,0,0,0.0001) 0), dừng màu ( rgba (0,0,0,0,5) 100%)); ảnh nền: -o-linear-gradient (trái, rgba (0,0,0,0.0001) 0, rgba (0,0,0,0,5) 100%); ảnh nền: gradient tuyến tính (sang phải, rgba (0,0,0,0.0001) 0, rgba (0,0,0,0,5) 100%); lặp lại nền: lặp lại-x; bộ lọc : progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 00000000', endColorstr = '# 80000000', GradientType = 1)}. carousel-control: hover, .carousel-control: Focus {phác thảo: 0; color ; text-trang trí: none; opacity: .9; filter: alpha (opacity = 90)}. carousel-control .icon-trước, .carousel-control.icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {vị trí: tuyệt đối; top: 50%; z-index: 5; display: inline-block} .carousel- kiểm soát .icon-trước, .carousel-control .glyphicon-chevron-left {left: 50%; lề-trái: -10px} .carousel-control .icon-next, .carousel-control .glyphicon-chevron-right {phải : 50%; lề-phải: -10px} .carousel-control .icon-trước, .carousel-control .icon-next {width: 20px; height: 20px; margin-top: -10px; font-family: serif} .carousel-control .icon-trước: trước {content: '\ 2039'}. carousel-control .icon-next: before {content: '\ 203a'}. carousel-Indicator {vị trí: tuyệt đối; dưới cùng: 10px; bên trái : 50%; z-index: 15; width: 60%; lề-left: -30%; padding-left: 0; list-style: none; text-align: centre} .carousel-Indicator li {display: inline -block; width: 10px; height: 10px; lề: 1px; text-indent: -999px; Border: 1px solid #fff;Border-radius: 10px; con trỏ: con trỏ; màu nền: # 000 \ 9; màu nền: rgba (0,0,0,0)}. carousel-Indicator .active {lề: 0; width: 12px; height : 12px; màu nền: #fff} .carousel-caption {vị trí: tuyệt đối; trái: 15%; phải: 15%; dưới cùng: 20px; z-index: 10; padding-top: 20px; padding-bottom: 20px ; color: #fff; text-align: centre; text-Shadow: 0 1px 2px rgba (0,0,0,0,6)}. carousel-caption .btn {text-Shadow: none} @media màn hình và (min- width: 768px) {. carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-trước, .carousel-control .icon-next {width: 30px; : 30px; lề-top: -15px; font-size: 30px} .carousel-control .glyphicon-chevron-left, .carousel-control .icon-trước {lề-left: -15px} .carousel-control .glyphicon- chevron-right, .carousel-control .icon-next {lề-phải: -15px} .carousel-caption {left: 20%; right: 20%;padding-bottom: 30px} .carousel-Indicator {bottom: 20px}}. Clearfix: before, .clearfix: after, .dl-vertical dd: before, .dl-vertical dd: after, .container: before, .container: after, .container-liquid: before, .container-liquid: after, .row: before, .row: after, .form-vertical .form-group: before, .form-vertical .form-group: after, .btn -toolbar: trước, .btn-thanh công cụ: after, .btn-group-vertical> .btn-group: before, .btn-group-vertical> .btn-group: after, .nav: before, .nav: after, .navbar: before, .navbar: after, .navbar-header: before, .navbar-header: after, .navbar-sụp đổ -body: before, .panel-body: after, .modal-footer: before, .modal-footer: after {content: ""; display: bảng} .clearfix: after, .dl-vertical dd: after, .container : after, .container-liquid: after, .row: after, .form-vertical .form-group: after, .btn-bar: after,.btn-group-vertical> .btn-group: after, .nav: after, .navbar: after, .navbar-header: after, .navbar-sụp đổ: after, .pager: after, .panel-body: after, .modal-footer: after {clear: Cả} .center-block {display: block; lề-left: auto; lề-phải: auto} .pull-right {float: right! Quan trọng} .pull-left {float: left! Quan trọng}. leather {display: none! Quan trọng} .show {display: block! Quan trọng} .invisible {visual: hidden} .text-hide {font: 0/0 a; color: trong suốt; text-Shadow: none ; màu nền: trong suốt; viền: 0} .hidden {display: none! Quan trọng; khả năng hiển thị: ẩn! quan trọng} .affix {vị trí: đã sửa} @ - ms-viewport {width: device-width} .visible-xs, .visible-sm, .visible-md, .visible-lg {display: none! Quan trọng} .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block , .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline ,.nhìn thấy-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block {display: none! Quan trọng} @media (max-width: 767px) {. xs {display: block! Quan trọng} bảng.visible-xs {display: table} tr.visible-xs {display: table-row! Quan trọng} th.visible-xs, td.visible-xs {display: bảng-cell! quan trọng}} @ media (max-width: 767px) {. thấy-xs-block {display: block! Quan trọng}} @ media (max-width: 767px) {. thấy-xs-inline {display: inline! Quan trọng} } @media (max-width: 767px) {. thấy-xs-inline-block {display: inline-block! Quan trọng}} @ media (min-width: 768px) và (max-width: 991px) {. sm {display: block! Quan trọng} bảng.visible-sm {display: table} tr.visible-sm {display: table-row! Quan trọng} th.visible-sm, td.visible-sm {display: bảng-cell! quan trọng}} @ media (min-width: 768px) và (max-width: 991px) {. thấy-sm-block {display: block! Quan trọng}} @ media (min-width:768px) và (max-width: 991px) {. Hiển thị-sm-inline {display: inline! Quan trọng}} @ media (min-width: 768px) và (max-width: 991px) {. Hiển thị-sm-inline- khối {display: inline-block! Quan trọng}} @ media (min-width: 992px) và (max-width: 1199px) {. thấy-md {display: block! Quan trọng} bảng.visible-md {display: table} tr.visible-md {display: table-row! Quan trọng} th.visible-md, td.visible-md {display: table-cell! Quan trọng}} @ media (min-width: 992px) và (max-width: 1199px) {. Hiển thị-md-block {display: block! Quan trọng}} @ media (min-width: 992px) và (max-width: 1199px) {. Hiển thị-md-inline {display: inline! Quan trọng}} @ media (min-width: 992px) và (max-width: 1199px) {. thấy-md-inline-block {display: inline-block! Quan trọng}} @ media (min-width: 1200px) {. thấy-lg { display: block! Quan trọng} bảng.visible-lg {display: table} tr.visible-lg {display: table-row! Quan trọng} th.visible-lg, td.nhìn thấy-lg {display: cell-cell! Quan trọng}} @ media (min-width: 1200px) {. thấy-lg-block {display: block! Quan trọng}} @ media (min-width: 1200px) {. lg-inline {display: inline! Quan trọng}} @ media (min-width: 1200px) {. thấy-lg-inline-block {display: inline-block! Quan trọng}} @ media (max-width: 767px) {. hidden-xs {display: none! Quan trọng}} @ media (min-width: 768px) và (max-width: 991px) {. hidden-sm {display: none! Quan trọng}} @ media (min-width: 992px) và (max-width: 1199px) {. hidden-md {display: none! Quan trọng}} @ media (min-width: 1200px) {. hidden-lg {display: none! Quan trọng}}. thấy-print {display: none! Quan trọng} @media print {.visible-print {display: block! Quan trọng} bảng.visible-print {display: table} tr.visible-print {display: row-row! Quan trọng} th.visible-print, td .visible-print {display: cell-cell! Quan trọng}}. thấy-print-block {display: none! Quan trọng} @media print {.nhìn thấy-print-block {display: block! Quan trọng}}. thấy-print-inline {display: none! Quan trọng} @media print {.visible-print-inline {display: inline! Quan trọng}}. -block {display: none! Quan trọng} @media print {.visible-print-inline-block {display: inline-block! Quan trọng}} @ media print {.hidden-print {display: none! Quan trọng}}

.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { chiều rộng: 100%; chiều cao: 8px; lề: tự động 4px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonUp {nền-vị trí: -32px -72px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonDown {nền-vị trí: -32px -92px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonLeft {nền-vị trí: -40px -112px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonRight {nền-vị trí: -40px -128px; } / * chủ đề "3d-dark" * / .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail { màu nền: # 000; màu nền: rgba (0,0,0,0.1); hộp bóng: inet 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 {nền-vị trí: -112px -72px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown {nền-vị trí: -112px -92px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft {nền-vị trí: -120px -112px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight {nền-vị trí: -120px -128px; } / * ---------------------------------------- * / / * chủ đề: "3d-thick", "3d-thick-dark" * / .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools { độ mờ đục: 1; bộ lọc: "alpha (độ mờ = 30)"; -ms-bộ lọc: "alpha (opacity = 30)"; } .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-dày-dark.mCSB_scrollTools .mCSB_draggerContainer {-webkit-border-radius: 7px; -moz-Border-radius: 7px; bán kính đường viền: 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-viền-bán kính: 5px; bán kính đường viền: 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: inet 1px 0 1px rgba (0,0,0,0.1), chèn 0 0 14px rgba (0,0,0,0,5); } .mCS-3d-thick.mCSB_scrollTools_horizontal, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal { dưới cùng: 1px; box-Shadow: inet 0 1px 1px rgba (0,0,0,0.1), chèn 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 { hộp bóng: in 1px 0 0 rgba (255,255,255,0.4); chiều rộng: 12px; lề: 2px; vị trí: tuyệt đối; chiều cao: tự động; đầu trang: 0; đáy: 0; trái: 0; phải: 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: hoạt động .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {màu nền: # 555; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { chiều cao: 12px; chiều rộng: tự động; } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer { màu nền: # 000; màu nền: rgba (0,0,0,0,05); box-Shadow: in 1px 1px 16px rgba (0,0,0,0.1); } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail {nền-màu: trong suốt; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp {nền-vị trí: -32px -72px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown {nền-vị trí: -32px -92px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft {nền-vị trí: -40px -112px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight {nền-vị trí: -40px -128px; } / * Chủ đề: "3d-dày-tối" * / .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), in 0 0 14px rgba (0,0,0,0.2); } .mCS-3d-dày-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {hộp-shadow: inset 1px 0 0 rgba (255,255,255,0.4), inset -1px 0 0 rgba (0,0,0,0.2); } .mCS-3d-dày-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {hộp-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: hoạt động .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {màu nền: # 777; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer { màu nền: #fff; màu nền: rgba (0,0,0,0,05); box-Shadow: in 1px 1px 16px rgba (0,0,0,0.1); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail {nền-màu: trong suốt; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp {nền-vị trí: -112px -72px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown {nền-vị trí: -112px -92px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft {nền-vị trí: -120px -112px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight {nền-vị trí: -120px -128px; } / * ---------------------------------------- * / / * chủ đề: "tối thiểu", "tối thiểu tối" * / .mCSB_outside + .mCS-Minimal.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-Minimal-dark.mCSB_scrollTools_vertical { phải: 0; lề: 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 { đáy: 0; lề: 0 12px; } / * Hướng RTL / thanh cuộn bên trái * / .mCS-dir-rtl> .mCSB_outside + .mCS-Minimal.mCSB_scrollTools_vertical, .mCS-dir-rtl> .mCSB_outside + .mCS-Minimal-dark.mCSB_scrollTools_vertical { trái: 0; phải: tự động; } .mCS-Minimal.mCSB_scrollTools .mCSB_draggerRail, .mCS-Minimal-dark.mCSB_scrollTools .mCSB_draggerRail {nền-màu: trong suốt; } .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 { màu nền: #fff; màu nền: rgba (255,255,255,0,2); bộ lọc: "alpha (opacity = 20)"; -ms-bộ lọc: "alpha (opacity = 20)"; } .mCS-Minimal.mCSB_scrollTools .mCSB_dragger: hoạt động .mCSB_dragger_bar, .mCS-Minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { màu nền: #fff; màu nền: rgba (255,255,255,0,5); bộ lọc: "alpha (độ mờ = 50)"; -ms-bộ lọc: "alpha (opacity = 50)"; } / * chủ đề: "tối-tối" * / .mCS-Minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { màu nền: # 000; màu nền: rgba (0,0,0,0,2); bộ lọc: "alpha (opacity = 20)"; -ms-bộ lọc: "alpha (opacity = 20)"; } .mCS-Minimal-dark.mCSB_scrollTools .mCSB_dragger: hoạt động .mCSB_dragger_bar, .mCS-Minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { màu nền: # 000; màu nền: rgba (0,0,0,0,5); bộ lọc: "alpha (độ mờ = 50)"; -ms-bộ lọc: "alpha (opacity = 50)"; } / * ---------------------------------------- * / / * chủ đề "light-3", "dark-3" * / .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-tối-3.mCSB_scrollTools .mCSB_draggerRail { chiều rộng: 6px; màu nền: # 000; màu nền: rgba (0,0,0,0,2); } .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-tối-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {width: 6px; } .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-tối-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 { chiều rộng: 100%; chiều cao: 6px; lề: 5px 0; } .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_Exand .mCSB_dragger.mCSB_dragger_onDrag_Exanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_Exand .mCSB_draggerContainer: hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_Exand .mCSB_dragger.mCSB_dragger_onDrag_Exanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_Exand .mCSB_draggerContainer: hover .mCSB_draggerRail { chiều rộng: 12px; } .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_Exand .mCSB_dragger.mCSB_dragger_onDrag_Exanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_Exand .mCSB_draggerContainer: hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_Exand .mCSB_dragger.mCSB_dragger_onDrag_Exanded + .mCSB_draggerRail, .mCS-tối-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer: hover {.mCSB_draggerRail chiều cao: 12px; lề: 2px 0; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp {nền-vị trí: -32px -72px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown {nền-vị trí: -32px -92px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft {nền-vị trí: -40px -112px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonRight {nền-vị trí: -40px -128px; } / * chủ đề "tối-3" * / .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {màu nền: # 000; màu nền: rgba (0,0,0,0,75); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger: hover .mCSB_dragger_bar {màu nền: # 000; màu nền: rgba (0,0,0,0,85); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger: hoạt động .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {màu nền: # 000; màu nền: rgba (0,0,0,0,9); } .mCS-tối-3.mCSB_scrollTools .mCSB_draggerRail {background-color: # 000; màu nền: rgba (0,0,0,0.1); } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp {nền-vị trí: -112px -72px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown {nền-vị trí: -112px -92px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft {nền-vị trí: -120px -112px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight {nền-vị trí: -120px -128px; } / * ---------------------------------------- * / / * chủ đề "inet", "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 { chiều rộng: 12px; màu nền: # 000; màu nền: 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 { chiều rộng: 6px; lề: 3px 5px; vị trí: tuyệt đối; chiều cao: tự động; đầu trang: 0; đáy: 0; trái: 0; phải: 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 { chiều cao: 6px; lề: 5px 3px; vị trí: tuyệt đối; chiều rộng: tự động; đầu trang: 0; đáy: 0; trái: 0; phải: 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 { chiều rộng: 100%; chiều cao: 12px; lề: 2px 0; } .mCS-inset.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp {nền-vị trí: -32px -72px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown {nền-vị trí: -32px -92px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft {nền-vị trí: -40px -112px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight {nền-vị trí: -40px -128px; } / * chủ đề "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 {màu nền: # 000; màu nền: rgba (0,0,0,0,75); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger: di chuột .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 {màu nền: # 000; màu nền: rgba (0,0,0,0,85); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger: hoạt động .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger: hoạt động .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: hoạt động .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {màu nền: # 000; màu nền: 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 {nền-màu: # 000; màu nền: 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 {nền-vị trí: -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 {nền-vị trí: -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 {nền-vị trí: -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 {nền-vị trí: -120px -128px; } / * chủ đề "inet-2", "inset-2-dark" * / .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail { màu nền: trong suốt; đường viền rộng: 1px; kiểu viền: chắc chắn; viền màu: #fff; màu viền: rgba (255,255,255,0,2); -webkit-box-sizing: hộp viền; -moz-box-sizing: hộp viền; kích thước hộp: hộp viền; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail {Border-color: # 000; màu viền: rgba (0,0,0,0,2); } / * chủ đề "inet-3", "inset-3-dark" * / .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail {màu nền: #fff; màu nền: rgba (255,255,255,0,6); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail {nền-màu: # 000; màu nền: rgba (0,0,0,0,6); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {màu nền: # 000; màu nền: rgba (0,0,0,0,75); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger: hover .mCSB_dragger_bar {màu nền: # 000; màu nền: rgba (0,0,0,0,85); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger: hoạt động .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {màu nền: # 000; màu nền: rgba (0,0,0,0,9); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {nền-màu: #fff; màu nền: rgba (255,255,255,0,75); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger: hover .mCSB_dragger_bar {nền-màu: #fff; màu nền: rgba (255,255,255,0,85); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger: hoạt động .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {nền-màu: #fff; màu nền: rgba (255,255,255,0,9); }