body { height: 100%; } .bgsCalc { box-sizing: border-box; /* Tables still need 'cellspacing="0"' in the markup. */ /* Remove possible quote marks (") from ,
. */ /* Remove annoying border on linked images. */ } .bgsCalc html, .bgsCalc body, .bgsCalc div, .bgsCalc span, .bgsCalc object, .bgsCalc iframe, .bgsCalc h1, .bgsCalc h2, .bgsCalc h3, .bgsCalc h4, .bgsCalc h5, .bgsCalc h6, .bgsCalc p, .bgsCalc blockquote, .bgsCalc pre, .bgsCalc a, .bgsCalc abbr, .bgsCalc acronym, .bgsCalc address, .bgsCalc code, .bgsCalc del, .bgsCalc dfn, .bgsCalc em, .bgsCalc img, .bgsCalc q, .bgsCalc dl, .bgsCalc dt, .bgsCalc dd, .bgsCalc ol, .bgsCalc ul, .bgsCalc li, .bgsCalc fieldset, .bgsCalc form, .bgsCalc label, .bgsCalc legend, .bgsCalc table, .bgsCalc caption, .bgsCalc tbody, .bgsCalc tfoot, .bgsCalc thead, .bgsCalc tr, .bgsCalc th, .bgsCalc td, .bgsCalc article, .bgsCalc aside, .bgsCalc dialog, .bgsCalc figure, .bgsCalc footer, .bgsCalc header, .bgsCalc hgroup, .bgsCalc nav, .bgsCalc section { box-sizing: border-box; border-radius: 0px; margin: 0; padding: 0; border: 0; border: none; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: BrandonTextWeb-Regular; vertical-align: baseline; } .bgsCalc article, .bgsCalc aside, .bgsCalc dialog, .bgsCalc figure, .bgsCalc footer, .bgsCalc header, .bgsCalc hgroup, .bgsCalc nav, .bgsCalc section { display: block; } .bgsCalc body { line-height: 1.5; } .bgsCalc table { border-collapse: separate; border-spacing: 0; } .bgsCalc caption, .bgsCalc th, .bgsCalc td { text-align: left; font-weight: normal; } .bgsCalc table, .bgsCalc td, .bgsCalc th { vertical-align: middle; } .bgsCalc blockquote:before, .bgsCalc blockquote:after, .bgsCalc q:before, .bgsCalc q:after { content: ""; } .bgsCalc blockquote, .bgsCalc q { quotes: "" ""; } .bgsCalc a img { border: none; } .bgsCalc form { /* Remove the stupid outer glow in Webkit */ /* Box Sizing Reset -----------------------------------------------*/ /* All of our custom controls should be what we expect them to be */ /* These elements are usually rendered a certain way by the browser */ /* Text Inputs -----------------------------------------------*/ /* Button Controls -----------------------------------------------*/ /* File Uploads -----------------------------------------------*/ /* Search Input -----------------------------------------------*/ /* Make webkit render the search input like a normal text field */ /* Turn off the recent search for webkit. It adds about 15px padding on the left */ /* Buttons -----------------------------------------------*/ /* IE8 and FF freak out if this rule is within another selector */ /* Textarea -----------------------------------------------*/ /* Selects -----------------------------------------------*/ } .bgsCalc form input, .bgsCalc form label, .bgsCalc form select, .bgsCalc form button, .bgsCalc form textarea { box-sizing: border-box; margin: 0; border: 0; padding: 0; display: inline-block; vertical-align: middle; white-space: normal; background: none; line-height: 1; border-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; /* Browsers have different default form fonts */ font-size: 13px; font-family: BrandonTextWeb-Regular; } .bgsCalc form input:focus { outline: 0; } .bgsCalc form button, .bgsCalc form input[type=reset], .bgsCalc form input[type=button], .bgsCalc form input[type=submit], .bgsCalc form input[type=checkbox], .bgsCalc form input[type=radio], .bgsCalc form select { border-radius: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .bgsCalc form input[type=checkbox], .bgsCalc form input[type=radio] { width: 13px; height: 13px; } .bgsCalc form input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; } .bgsCalc form ::-webkit-search-decoration { display: none; } .bgsCalc form button, .bgsCalc form input[type="reset"], .bgsCalc form input[type="button"], .bgsCalc form input[type="submit"] { /* Fix IE7 display bug */ overflow: visible; width: auto; } .bgsCalc form ::-webkit-file-upload-button { padding: 0; border: 0; background: none; } .bgsCalc form textarea { max-width: 100%; /* Move the label to the top */ vertical-align: top; /* Turn off scroll bars in IE unless needed */ overflow: auto; } .bgsCalc form select[multiple] { /* Move the label to the top */ vertical-align: top; } /* == 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); } /* ---------------------------------------- */ body.bgsActive { overflow: hidden; } #content { border: 1px solid #d5d5d5; } #bgssplash { display: none; text-align: center; height: 100%; z-index: 3800; overflow-y: visible; font-family: BrandonTextWeb-Regular; font-weight: bold; /* The CSS */ /* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */ } #bgssplash h2 { text-transform: none!important; max-width: 600px; text-align: center; font-size: 38px; padding: 0px 30px; margin: 15px auto; } #bgssplash p { max-width: 600px; text-align: center; margin: 15px auto; padding: 0px 30px; } #bgssplash p:after { content: ''; clear: both; display: block; } #bgssplash #startCalculatorButton { border-radius: 5px; text-decoration: none; color: #ffffff; background: #5BB85D; margin: 20px auto; padding: 14px 40px; display: inline-block; clear: both; } #bgssplash.active { display: block; } #bgssplash select { min-width: 200px; padding: 3px; margin: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; background: #ffffff; color: #000000; border: none; border: 2px solid #f04632; outline: none; display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } #bgssplash select option:checked { background: #f04632; padding: 20px; } @media screen and (-webkit-min-device-pixel-ratio: 0) { #bgssplash select { padding-right: 18px; } } #bgssplash label { position: relative; } #bgssplash label:after { content: '<>'; font: 11px "Consolas", monospace; color: #aaa; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); right: 8px; top: 2px; padding: 0 0 2px; border-bottom: 1px solid #ddd; position: absolute; pointer-events: none; } #bgssplash label:before { content: ''; right: 6px; top: 0px; width: 20px; height: 20px; background: #f8f8f8; position: absolute; pointer-events: none; display: block; } .bgsCalc { display: none; background: #ffffff !important; position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; overflow-x: display; overflow-y: auto ; font-size: 18px; color: #43494D; z-index: 2000; padding-bottom: 30px; box-sizing: content-box; } .bgsCalc h2 { text-transform: none!important; } .bgsCalc .modalToggle { float: right; width: 35px; height: 35px; margin-right: 15px; display: block; z-index: 1400; cursor: pointer; padding: 3px; } .bgsCalc .modalToggle .svgIcon { width: 32px; height: 32px; } .bgsCalc .calculatorClose { margin-top: 4px; float: right; width: 35px; height: 35px; display: block; cursor: pointer; padding: 3px; z-index: 1350; } .bgsCalc .calculatorClose .svgIcon { width: 32px; height: 32px; } .bgsCalc .formWrap { clear: both; width: 90%; margin: 0px auto; height: auto; overflow-y: auto ; overflow-x: hidden ; padding-bottom: 10px; } .bgsCalc .formWrap form { max-width: 100%; margin: 0px auto; height: auto; } .bgsCalc .formWrap form:after { content: ''; clear: both; display: block; } .bgsCalc fieldset { position: relative; margin: 0px auto; display: none; width: 100%; max-width: 100%; padding: 0px 0px 0px 0px; margin-bottom: 0px; min-width: 280px; } .bgsCalc fieldset .fieldsetContent { height: auto; width: 100%; max-width: 100%; overflow-y: auto; overflow-x: hidden; margin: 0px 0px 10px 0px; min-width: 280px; } .bgsCalc fieldset .fieldsetContent label { font-size: 14px; } .bgsCalc fieldset .fieldsetContent:after { content: ''; display: block; clear: both; } .bgsCalc fieldset legend { position: relative; font-size: 25px; margin-bottom: 10px; line-height: normal; display: block; max-width: 100%; } .bgsCalc fieldset legend span.bullet { position: absolute; margin-left: 0px; margin-top: -40px; z-index: 1400; color: #929da7; float: none; clear: none; vertical-align: top; } .bgsCalc fieldset legend span.bullet:after { display: block; content: ''; clear: both; } .bgsCalc fieldset.active { display: block; } .bgsCalc fieldset .fluid__select input[type="radio"] { display: none; } .bgsCalc fieldset .fluid__select input[type="radio"] + label { display: inline-block; border: 2px solid #d5d5d5; padding: 10px 40px; margin: 5px auto 5px auto; border-radius: 5px; width: 98%; text-align: center; cursor: pointer; } .bgsCalc fieldset .fluid__select input[type="radio"] + label:hover { border: 2px solid #f04632; color: red; } .bgsCalc fieldset .fluid__select input[type="radio"]:checked + label { border: 2px solid #f04632; color: #ffffff; background: #f04632; } .bgsCalc fieldset#clothing .integerSlideWrapper { min-width: 400px; } .bgsCalc fieldset#clothing .integerSlideWrapper .integerSlide { margin-left: 0px; } .bgsCalc fieldset#clothing legend { margin-left: 0px; } .bgsCalc fieldset#clothing h2 { font-size: 24px; margin-top: 24px; } .bgsCalc fieldset#clothing .grid__select input[type="radio"] + label { text-transform: uppercase !important; width: 110px; height: 110px; min-height: 110px; padding: 21px 18px 1px 18px; margin-right: 20px; } .bgsCalc #colcResults { display: none; } .bgsCalc #colcResults:after { content: ''; clear: both; display: block; } .bgsCalc.showingIntro .controlBar { display: none; } .bgsCalc.showingIntro span.modalToggle, .bgsCalc.showingIntro span.calculatorClose { display: none!important; } .bgsCalc.showingResults .controlBar { display: none; } .bgsCalc.showingResults span.modalToggle, .bgsCalc.showingResults span.calculatorClose { display: none!important; } .bgsCalc.active { display: block; } @media only screen and (min-width: 400px) { .bgsCalc .formWrap form fieldset .fluid__select input[type="radio"] { display: none; } .bgsCalc .formWrap form fieldset .fluid__select input[type="radio"] + label { display: inline-block; border: 2px solid #d5d5d5; padding: 10px 40px; margin: 5px auto 5px auto; border-radius: 5px; width: 100%; text-align: center; cursor: pointer; } .bgsCalc .formWrap form fieldset .fluid__select input[type="radio"] + label:hover { border: 2px solid #f04632; color: #f04632; } .bgsCalc .formWrap form fieldset .fluid__select input[type="radio"]:checked + label { border: 2px solid #f04632; color: #ffffff; background: #f04632; } .bgsCalc.active { display: block; } } @media only screen and (min-width: 720px) { .bgsCalc { display: none; width: 100%; } .bgsCalc .formWrap { width: 90%; max-width: 100%; } .bgsCalc .formWrap form { margin-top: 0px; } .bgsCalc .calculatorClose { margin-right: 35px; cursor: pointer; padding: 3px; } .bgsCalc .modalToggle { cursor: pointer; padding: 3px; } .bgsCalc fieldset { padding: 40px 10%; margin-bottom: 80px; } .bgsCalc fieldset .fieldsetContent { margin-bottom: 30px; margin-left: 60px; } .bgsCalc fieldset .fieldsetContent label { font-size: 16px; } .bgsCalc fieldset legend { width: 100%; margin: 0px 60px 0px 60px; font-size: 30px; } .bgsCalc fieldset legend span.bullet { position: absolute; margin-left: -60px; margin-top: 0px; color: #929da7; float: none; clear: none; } .bgsCalc fieldset#clothing legend { width: 100%; margin-left: 60px; margin-right: 60px; } .bgsCalc fieldset#clothing .grid__select input[type="radio"] + label { width: 150px; height: 150px; padding: 36px 40px 36px 40px; margin-right: 45px; } .bgsCalc fieldset .fluid__select input[type="radio"] + label { clear: none; width: auto !important; float: left !important; margin-right: 20px!important; padding: 10px 30px; margin-bottom: 15px; } .bgsCalc.active { display: block; } } @media only screen and (min-width: 1040px) { .bgsCalc { display: none; width: 100%; padding-top: 0px; } .bgsCalc .formWrap form { width: 100%; } .bgsCalc fieldset { padding: 40px 10%; width: 100%; } .bgsCalc fieldset legend { font-size: 37px; width: 100%; margin: 0px 60px 10px 60px; } .bgsCalc fieldset legend span.bullet { margin-left: -90px; } .bgsCalc fieldset .fieldsetContent { width: 100%; overflow-x: visible; margin: 0px auto; margin-left: 60px; } .bgsCalc fieldset .fieldsetContent:after { content: ''; display: table; clear: both; } .bgsCalc fieldset .grid__select .fieldsetContent { width: 100%; } .bgsCalc fieldset .integerSlideWrapper .integerSlide { margin-left: 50px; } .bgsCalc fieldset .integerSlideWrapper .integerSlide input[type="radio"] { display: none; } .bgsCalc fieldset .integerSlideWrapper .integerSlide label { height: 40px; width: 40px; font-size: 16px; line-height: 40px; padding: 0px 10px; margin: 0px; } .bgsCalc fieldset .integerSlideWrapper .integerSlide label:hover { height: 40px; width: 40px; } .bgsCalc fieldset .integerSlideWrapper .integerSlide label.active:hover { height: 40px; width: 40px; } .bgsCalc fieldset .integerSlideWrapper .integerSlide label.selected:before { position: absolute; content: ''; width: 40px; height: 40px; } .bgsCalc fieldset .integerSlideWrapper .integerSlide label.selected:after { width: 40px; height: 40px; } .bgsCalc fieldset .integerSlideWrapper .integerSlide span.sliderRepr { height: 40px; } .bgsCalc fieldset .integerSlideWrapper .integerSlide span.sliderRepr:before { content: ''; width: 40px; height: 40px; } .bgsCalc fieldset .integerSlideWrapper .integerSlide span.sliderRepr:after { width: 40px; height: 40px; } .bgsCalc fieldset .fluid__select input[type="radio"] + label { text-transform: uppercase; margin-right: 28px; padding: 13px 46px; margin-bottom: 15px; font-size: 16px; } .bgsCalc fieldset .fluid__select label:last-child:after { content: ''; display: table; clear: both; } .bgsCalc fieldset .calculatorClose { cursor: pointer; padding: 3px; } .bgsCalc fieldset .modalToggle { margin-right: 15%; cursor: pointer; padding: 3px; } .bgsCalc.active { display: block; } } @media only screen and (min-width: 1300px) { .bgsCalc .scrollWrap { padding-top: 110px; } .bgsCalc .scrollWrap fieldset { zoom: 1.2; } } @media only screen and (max-width: 640px) { .sumome-share-client-wrapper { display: none; } } @media only screen and (max-width: 640px) { .controlBar .leftBar { position: relative; clear: both; display: inline-block; width: 100%; } .controlBar .leftBar:after { content: ''; display: block; clear: both; } .controlBar .leftBar.active .frequency { position: absolute; bottom: 0px; display: table-cell; } .controlBar .leftBar.active .summary { margin-bottom: 40px; } } .bgsCalc .controlBar { display: inline-block; color: #929da7; font-size: 16px; line-height: 38px; width: 100%; padding: 5px 25px; position: fixed; bottom: 0px; left: 0px; background: #ffffff; z-index: 1340; -webkit-box-shadow: 0px -2px 8px rgba(68, 74, 78, 0.2); -moz-box-shadow: 0px -2px px rgba(68, 74, 78, 0.2); box-shadow: 0px -2px 8px rgba(68, 74, 78, 0.2); } .bgsCalc .controlBar div.controlInnerWrap { width: 90%; margin: 0px auto; position: relative; margin-left: auto; margin-right: auto; -webkit-margin-start: auto; -webkit-margin-end: auto; -webkit-padding-start: 0; display: block; margin-bottom: 8px; } .bgsCalc .controlBar div.controlInnerWrap:after { content: ''; display: block; clear: both; } .bgsCalc .controlBar .leftBar { position: relative; clear: both; display: inline-block; width: 100%; } .bgsCalc .controlBar .leftBar:after { content: ''; display: block; clear: both; } .bgsCalc .controlBar .label { color: #929da7; } .bgsCalc .controlBar .frequency { display: none; padding-right: 10px; } .bgsCalc .controlBar .frequency .currencySelectWrap { display: inline-block; float: left; border: 1px solid #d5d5d5; overflow: hidden; width: 105px; position: relative; height: 27px; border-radius: 3px; margin-right: 15px; clear: none; /* &:after { content: ''; position: absolute; top: 9px; right: 5px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid @lightgrey; }*/ } .bgsCalc .controlBar .frequency .currencySelectWrap select { position: absolute; top: 0px; color: #929da7; background: transparent; border: none; outline: none; font-size: 14px; height: 27px; line-height: 32px; padding: 0px; margin: 0px 5px; width: 150px; } .bgsCalc .controlBar .frequency .frequencySelectWrap { display: inline-block; border: 1px solid #d5d5d5; overflow: hidden; width: 105px; position: relative; height: 27px; border-radius: 3px; float: left; clear: none; /* &:after { content: ''; position: absolute; top: 9px; right: 5px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid @lightgrey; }*/ } .bgsCalc .controlBar .frequency .frequencySelectWrap select { position: absolute; top: 0px; color: #929da7; background: transparent; border: none; outline: none; font-size: 14px; height: 27px; line-height: 23px; padding: 0px 5px; /* If you add too much padding here, the options won't show in IE */ width: 150px; } .bgsCalc .controlBar .summary { width: 100%; position: relative; padding-left: 10px; display: block; clear: both; } .bgsCalc .controlBar .summary span.foodSummary { display: inline; float: left; margin-left: 0px; width: 33%; } .bgsCalc .controlBar .summary span.accomodationSummary { display: inline; float: left; margin-left: 20px; width: 33%; } .bgsCalc .controlBar .summary span.runningTotal { display: inline; float: left; margin-left: 20px; width: 33%; } .bgsCalc .controlBar .summary span.value { clear: both; display: block; color: #43494D; font-size: 22px; line-height: 22px; margin-left: 0px; margin-right: 0px; } .bgsCalc .controlBar .summary span.settingsIcon { position: absolute; font-weight: bold; right: 5px; bottom: 5px; cursor: pointer; } .bgsCalc .controlBar .summary:after { content: ''; display: block; clear: both; } .bgsCalc .controlBar .pagination { padding-top: 10px; margin-top: 10px; border-top: 1px solid #d5d5d5; display: inline-block; width: 100%; text-align: center; } .bgsCalc .controlBar .pagination a.next, .bgsCalc .controlBar .pagination a.previous { font-weight: bold; cursor: pointer; display: inline-block; text-transform: uppercase; text-decoration: none; padding: 0px 15px; width: auto; margin: 0px 10px 0px 0px; background: #f04632; color: #ffffff; border-radius: 5px; } .bgsCalc .controlBar .pagination a.next.disabled, .bgsCalc .controlBar .pagination a.previous.disabled { font-weight: bold; background: #d5d5d5; } .bgsCalc .controlBar .pagination a.previous { float: left; } .bgsCalc .controlBar .pagination a.next { float: right; } @media only screen and (min-width: 420px) { .bgsCalc .controlBar .frequency { display: none; padding-right: 10px; } .bgsCalc .controlBar .frequency .currencySelectWrap { width: 135px; margin-right: 20px; } .bgsCalc .controlBar .frequency .frequencySelectWrap { width: 135px; } } @media only screen and (min-width: 720px) { .bgsCalc .controlBar { display: table; color: #929da7; font-size: 16px; line-height: 38px; position: fixed; bottom: 0px; } .bgsCalc .controlBar div.controlInnerWrap { width: 700px; } .bgsCalc .controlBar span.rowSpoof { margin-top: 8px; width: 700px; display: block; } .bgsCalc .controlBar span.leftBar { display: inline; float: left; max-width: 380px; border-right: 1px solid #d5d5d5; } .bgsCalc .controlBar span.leftBar .frequency { display: table-cell; width: 139px; clear: none; display: inline-block; padding-right: 10px; float: left; border-right: 1px solid #d5d5d5; } .bgsCalc .controlBar span.leftBar .frequency .currencySelectWrap { clear: both; margin-bottom: 6px; } .bgsCalc .controlBar span.leftBar .frequency .frequencySelectWrap { clear: both; margin-top: 10px; margin-bottom: 6px; } .bgsCalc .controlBar span.leftBar .summary { position: relative; display: table-cell; padding-bottom: 4px; left: none; clear: none; width: 220px; padding-left: 25px; padding-top: 4px; float: left; border: none; line-height: 25px; vertical-align: middle; } .bgsCalc .controlBar span.leftBar .summary span.foodSummary { display: block; clear: both; width: 100%; } .bgsCalc .controlBar span.leftBar .summary span.runningTotal { display: block; clear: both; width: 100%; margin-left: 0px; } .bgsCalc .controlBar span.leftBar .summary span.settingsIcon { display: none; } .bgsCalc .controlBar span.leftBar .summary span.value { clear: none; display: inline-block; font-size: 16px; line-height: 25px; margin-left: 20px; margin-right: 10px; height: 25px; } .bgsCalc .controlBar span.leftBar .summary span.label { height: 25px; font-size: 15px; display: inline-block; line-height: 25px; } .bgsCalc .controlBar .pagination { clear: none; display: table-cell; border-top: none; padding-top: 10px; width: 250px; margin: 0px 0px; float: right; } .bgsCalc .controlBar .pagination a.next, .bgsCalc .controlBar .pagination .previous { cursor: pointer; padding: 0px 20px; margin: 0px 10px 0px 0px; } } @media only screen and (min-width: 1040px) { .bgsCalc .controlBar { display: table; position: fixed; bottom: 0px; font-size: 16px; line-height: 38px; left: 0px; } .bgsCalc .controlBar div.controlInnerWrap { width: 992px; margin: 0px auto; margin-top: 8px; } .bgsCalc .controlBar span.rowSpoof { width: 992px; display: block; } .bgsCalc .controlBar span.leftBar { width: 66%; max-width: none; clear: none; } .bgsCalc .controlBar span.leftBar .frequency { display: table-cell; width: 33%; padding-right: 10px; padding-top: 10px; float: left; } .bgsCalc .controlBar span.leftBar .frequency .currencySelectWrap { display: inline-block; width: 80px; clear: none; float: left; } .bgsCalc .controlBar span.leftBar .frequency .frequencySelectWrap { width: 80px; margin-top: 0px; display: inline-block; clear: none; float: left; } .bgsCalc .controlBar span.leftBar .summary { text-align: center; vertical-align: middle; display: table-cell; width: 66%; padding-left: 10px; float: left; } .bgsCalc .controlBar span.leftBar .summary span.foodSummary { display: inline-block; clear: none; float: left; width: auto; min-width: 45%; } .bgsCalc .controlBar span.leftBar .summary span.runningTotal { display: inline-block; clear: none; float: left; width: auto; } .bgsCalc .controlBar span.leftBar .summary span.label { padding-bottom: 5px; } .bgsCalc .controlBar span.leftBar .summary span.value { font-size: 22px; line-height: 38px; margin-left: 20px; margin-right: 10px; } .bgsCalc .controlBar .pagination { display: table-cell; margin: 0px 0px; padding-top: 0px; float: right; } .bgsCalc .controlBar .pagination a.next, .bgsCalc .controlBar .pagination .previous { cursor: pointer; font-size: 14px; padding: 0px 16px; margin: 0px 8px 0px 0px; } } @media only screen and (min-width: 1300px) { .bgsCalc .controlBar { background: #ffffff; font-size: 16px; line-height: 38px; position: fixed; bottom: 0px; } .bgsCalc .controlBar div.controlInnerWrap { width: 1240px; } .bgsCalc .controlBar div.controlInnerWrap .rowSpoof { display: block; width: 1240px; } .bgsCalc .controlBar span.leftBar { width: 70%; } .bgsCalc .controlBar span.leftBar .frequency { width: 243px; padding-right: 10px; } .bgsCalc .controlBar span.leftBar .summary { width: 428px; padding-left: 10px; } .bgsCalc .controlBar span.leftBar .summary span.value { font-size: 22px; line-height: 38px; margin-left: 20px; margin-right: 10px; } .bgsCalc .controlBar .pagination { margin: 0px 0px; float: right; } .bgsCalc .controlBar .pagination a.next, .bgsCalc .controlBar .pagination .previous { cursor: pointer; padding: 0px 20px; margin: 0px 10px 0px 0px; } } /* .controlBar { background: #ffffff; font-size: 16px; line-height: 38px; position: fixed; bottom: 0px; .frequency { width: 243px; padding-right: 10px; } .summary { width: 428px; padding-left: 10px; span.value { font-size: 22px; line-height: 38px; margin-left: 20px; margin-right: 10px; } } .pagination { //width: 378px; margin: 0px 0px; float: right; a.next, .previous { cursor: pointer; padding: 0px 20px; margin: 0px 0px 0px 0px; } } } */ .integerSlideWrapper { display: block; position: relative; clear: both; margin: 20px 0px; height: 85px; } .integerSlideWrapper > label { display: block; width: 40%; position: absolute; left: 0px; top: 0px; font-size: 16px; } .integerSlideWrapper > label.groupLabel { position: absolute; right: 0px; left: auto; top: 0px; font-size: 15px; } .integerSlideWrapper img, .integerSlideWrapper svg { display: inline; width: 40px; float: left; margin-right: 10px; } .integerSlideWrapper .svgIcon { position: absolute; top: 18px; left: 0px; } .integerSlideWrapper .integerSlide { float: left; position: relative; margin-left: 50px; margin-top: 22px; } .integerSlideWrapper .integerSlide input[type="radio"] { display: none; } .integerSlideWrapper .integerSlide label { position: relative; border-top: 2px solid transparent; text-align: center; height: 40px; width: 40px; display: inline-block; border: none; font-size: 13px; line-height: 40px; padding: 0px 0px; margin: 10px; border-radius: 50%; cursor: pointer; color: #f04632; } .integerSlideWrapper .integerSlide label:hover { height: 40px; width: 40px; background: #ffffff; border: 2px solid #f04632; color: #f04632; } .integerSlideWrapper .integerSlide label.active { background: #f04632; border-top: 2px solid transparent; color: #ffffff; } .integerSlideWrapper .integerSlide label.active:hover { height: 40px; width: 40px; background: #ffffff; border: 2px solid #f04632; color: #f04632 !important; } .integerSlideWrapper .integerSlide label.selected { border-top: 2px solid transparent; background: #f04632; color: #ffffff !important; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-top-left-radius: 50%; border-bottom-left-radius: 50%; z-index: 1310; position: relative; top: 0px; } .integerSlideWrapper .integerSlide label.selected:hover { border-radius: 50%; background: #ffffff; border: 2px solid #f04632; color: #f04632 !important; z-index: 1310; } .integerSlideWrapper .integerSlide span.sliderRepr { display: none; position: absolute; top: 1px; left: 14px; background: #f04632; z-index: 0; } .integerSlideWrapper:after { content: ''; display: table; clear: both; } @media only screen and (min-width: 720px) { .integerSlideWrapper .integerSlide { float: left; position: relative; margin-left: 50px; } .integerSlideWrapper .integerSlide input[type="radio"] { display: none; } .integerSlideWrapper .integerSlide label { border-top: 2px solid transparent; text-align: center; height: 40px; width: 40px; display: inline-block; border: none; font-size: 16px; line-height: 40px; padding: 0px 10px; margin: 0px; border-radius: 50%; cursor: pointer; color: #f04632; } .integerSlideWrapper .integerSlide label:hover { height: 40px; width: 40px; background: #ffffff; border: 2px solid #f04632; color: #f04632; } .integerSlideWrapper .integerSlide label.groupLabel { position: absolute; left: 250px; right: auto; top: 0px; font-size: 15px; } .integerSlideWrapper .integerSlide label.active { border-top: 2px solid transparent; color: #ffffff; } .integerSlideWrapper .integerSlide label.active:hover { height: 40px; width: 40px; background: #ffffff; border: 2px solid #f04632; color: #f04632; } .integerSlideWrapper .integerSlide label.selected { border-top: 2px solid transparent; background: #f04632; color: #ffffff !important; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-top-left-radius: 50%; border-bottom-left-radius: 50%; z-index: 110; position: relative; top: 0px; } .integerSlideWrapper .integerSlide label.selected:hover { border-radius: 50%; background: #ffffff; border: 2px solid #f04632; color: #f04632; z-index: 1310; } .integerSlideWrapper .integerSlide span.sliderRepr { position: absolute; top: 0px; left: 20px; display: block; height: 40px; background: #f04632; z-index: 0; } } .grid__select { min-width: 280px; max-width: 100%; } .grid__select input[type="radio"] { display: none; } .grid__select input[type="radio"] + label { min-height: 140px; display: inline-block; width: 46%; text-transform: uppercase; border: 2px solid #d5d5d5; padding: 15px 20px 15px 20px; margin: 10px 2% 10px 1%; border-radius: 5px; text-align: center; cursor: pointer; /* &:hover { border: @chilBorderThickness solid @red; color: @red; svg g, svg polygon, svg polyline, svg path, svg { stroke: @red !important; } }*/ } .grid__select input[type="radio"] + label img, .grid__select input[type="radio"] + label svg { width: 70px; display: block; margin: 15px auto; clear: both; } .grid__select input[type="radio"] + label .svgIcon.selected { display: none; } .grid__select input[type="radio"]:checked + label { border: 2px solid #f04632; color: #ffffff; background: #f04632; } .grid__select input[type="radio"]:checked + label .svgIcon { display: none; } .grid__select input[type="radio"]:checked + label .svgIcon.selected { display: block !important; } @media only screen and (min-width: 400px) { .grid__select { min-width: 400px; } .grid__select input[type="radio"] { display: none; } .grid__select input[type="radio"] + label { max-width: 320px; display: inline-block; width: 43%; min-height: 115px; text-transform: uppercase; border: 2px solid #d5d5d5; padding: 20px 40px 10px 40px; margin: 10px 10px 10px 0px; border-radius: 5px; text-align: center; cursor: pointer; /* &:hover { border: @chilBorderThickness solid @red; color: @red; svg g, svg polygon, svg polyline, svg path, svg { stroke: @red !important; } } */ } .grid__select input[type="radio"] + label img, .grid__select input[type="radio"] + label svg { display: block; margin: 0px auto; clear: both; margin-bottom: 15px; } .grid__select input[type="radio"] + label .svgIcon.selected { display: none; } .grid__select input[type="radio"]:checked + label { border: 2px solid #f04632; color: #ffffff; background: #f04632; } .grid__select input[type="radio"]:checked + label .svgIcon { display: none; } .grid__select input[type="radio"]:checked + label .svgIcon.selected { display: block !important; } } @media only screen and (min-width: 400px) { .grid__select { min-width: 400px; } .grid__select input[type="radio"] { display: none; } .grid__select input[type="radio"] + label { max-width: 320px; display: inline-block; width: 43%; min-height: 140px; text-transform: uppercase; border: 2px solid #d5d5d5; padding: 20px 40px 10px 40px; margin: 10px 10px 10px 0px; border-radius: 5px; text-align: center; cursor: pointer; /* &:hover { border: @chilBorderThickness solid @red; color: @red; svg g, svg polygon, svg polyline, svg path, svg { stroke: @red !important; } }*/ } .grid__select input[type="radio"] + label img, .grid__select input[type="radio"] + label svg { display: block; margin: 0px auto; clear: both; margin-bottom: 15px; } .grid__select input[type="radio"] + label .svgIcon.selected { display: none; } .grid__select input[type="radio"]:checked + label { border: 2px solid #f04632; color: #ffffff; background: #f04632; } .grid__select input[type="radio"]:checked + label .svgIcon { display: none; } .grid__select input[type="radio"]:checked + label .svgIcon.selected { display: block !important; } } .multi_list__select .list_select { min-width: 400px; padding: 10px; margin: 10px 0px; min-height: 60px; display: block; position: relative; clear: both; } .multi_list__select .list_select ul { display: none; } .multi_list__select .list_select select { font-size: 15px; line-height: 21px; border-radius: 5px; height: auto; margin: 5px 10px; background: #f7f7f7; border: 1px solid #ababab; width: 120px; z-index: 1301; float: left; list-style-type: none; margin-left: 25px; height: 40px; background: #ffffff; position: relative; } .multi_list__select label { text-transform: capitalize; display: block; padding-bottom: 15px; clear: both; } .multi_list__select label:after { content: ' '; display: block; clear: both; } .multi_list__select img, .multi_list__select svg { float: left; } .multi_list__select img:before, .multi_list__select svg:before { content: ''; display: table; clear: both; } .multi_list__select .svgIcon { display: inline-block; width: 28px; height: 28px; float: left; } .multi_list__select .svgIcon svg { margin-left: auto; margin-right: auto; max-height: 40px; max-width: 100%; } .multi_list__select .svgIcon:before { content: ''; display: table; clear: both; } .multi_list__select .list_select { min-width: 400px; padding: 10px; margin: 10px 0px; min-height: 60px; display: block; position: relative; clear: both; } .multi_list__select .list_select label { text-transform: capitalize; display: block; padding-bottom: 15px; } .multi_list__select .list_select label:after { content: ' '; display: block; clear: both; } .multi_list__select .list_select img, .multi_list__select .list_select svg { float: left; } .multi_list__select .list_select img:before, .multi_list__select .list_select svg:before { content: ''; display: table; clear: both; } .multi_list__select .list_select .svgIcon { display: inline-block; width: 28px; height: 28px; float: left; } .multi_list__select .list_select .svgIcon svg { margin-left: auto; margin-right: auto; max-height: 40px; max-width: 100%; } .multi_list__select .list_select .svgIcon:before { content: ''; display: table; clear: both; } @media only screen and (min-width: 720px) { .multi_list__select { min-width: 600px; } .multi_list__select .list_select { padding-left: 0px; position: relative; clear: both; height: 110px; } .multi_list__select .list_select select { display: none; } .multi_list__select .list_select label:first-child { display: block !important; margin-left: 75px; width: 40%; clear: both; } .multi_list__select .list_select img, .multi_list__select .list_select svg { margin: 0; padding: 0; text-indent: 0; list-style-type: 0; display: inline-block; clear: none; width: auto; position: absolute; left: 0px; margin-top: -4px !important; top: 10 !important; bottom: 10; width: 40px; height: auto; margin: 10px 10px 10px 0px; display: block; } .multi_list__select .list_select ul, .multi_list__select .list_select ul li, .multi_list__select .list_select ul li input[type="radio"] + label, .multi_list__select .list_select ul li input[type="radio"]:checked + label, .multi_list__select .list_select ul li label, .multi_list__select .list_select ul:hover, .multi_list__select .list_select ul:hover li, .multi_list__select .list_select ul:hover li:first-child, .multi_list__select .list_select ul:hover li:last-child { margin: 0; padding: 0; text-indent: 0; list-style-type: 0; display: inline-block; position: relative !important; clear: none; text-align: center; padding-left: 0px; padding-right: 0px; } .multi_list__select .list_select ul:after, .multi_list__select .list_select ul li:after, .multi_list__select .list_select ul li input[type="radio"] + label:after, .multi_list__select .list_select ul li input[type="radio"]:checked + label:after, .multi_list__select .list_select ul li label:after, .multi_list__select .list_select ul:hover:after, .multi_list__select .list_select ul:hover li:after, .multi_list__select .list_select ul:hover li:first-child:after, .multi_list__select .list_select ul:hover li:last-child:after { content: none; margin: 0; padding: 0; text-indent: 0; list-style-type: 0; display: initial; position: relative; clear: none; } .multi_list__select .list_select ul:before, .multi_list__select .list_select ul li:before, .multi_list__select .list_select ul li input[type="radio"] + label:before, .multi_list__select .list_select ul li input[type="radio"]:checked + label:before, .multi_list__select .list_select ul li label:before, .multi_list__select .list_select ul:hover:before, .multi_list__select .list_select ul:hover li:before, .multi_list__select .list_select ul:hover li:first-child:before, .multi_list__select .list_select ul:hover li:last-child:before { margin: 0; padding: 0; text-indent: 0; list-style-type: 0; display: initial; position: relative; clear: initial; } .multi_list__select .list_select ul:hover { margin: 0; padding: 0; text-indent: 0; list-style-type: 0; display: initial; position: relative; clear: initial; left: 0px; } .multi_list__select .list_select ul:hover li, .multi_list__select .list_select ul:hover li:first-child, .multi_list__select .list_select ul:hover li:last-child { margin: 0; padding: 0; text-indent: 0; list-style-type: 0; display: inline-block; position: relative !important; clear: none; text-align: center; padding-left: 0px; padding-right: 0px; } .multi_list__select .list_select ul:hover li input[type=radio] + label, .multi_list__select .list_select ul:hover li:first-child input[type=radio] + label, .multi_list__select .list_select ul:hover li:last-child input[type=radio] + label { margin: 0; padding: 0; text-indent: 0; list-style-type: 0; position: relative !important; clear: none; text-align: center; padding-left: 0px; padding-right: 0px; padding: 10px 0px; margin: 0px 10px 0px 0px; border: 2px solid #d5d5d5; border-radius: 5px; display: inline-block; } .multi_list__select .list_select ul:hover li input[type=radio] + label:after, .multi_list__select .list_select ul:hover li:first-child input[type=radio] + label:after, .multi_list__select .list_select ul:hover li:last-child input[type=radio] + label:after { content: ''; display: table; clear: both; } .multi_list__select .list_select ul, .multi_list__select .list_select ul:hover { height: auto; padding-left: 50px; display: inline; background: transparent; } .multi_list__select .list_select ul:after, .multi_list__select .list_select ul:hover:after { content: ''; display: table; clear: both; } .multi_list__select .list_select ul li, .multi_list__select .list_select ul:hover li { display: inline-block; } .multi_list__select .list_select ul li input[type="radio"], .multi_list__select .list_select ul:hover li input[type="radio"] { display: none; } .multi_list__select .list_select ul li input[type="radio"] + label, .multi_list__select .list_select ul:hover li input[type="radio"] + label { width: 110px; display: inline-block; border: 2px solid #d5d5d5; text-align: center; padding: 10px 0px; margin: 0px 10px 0px 0px; border-radius: 5px; cursor: pointer; } .multi_list__select .list_select ul li input[type="radio"] + label:hover, .multi_list__select .list_select ul:hover li input[type="radio"] + label:hover { border: 2px solid #f04632; color: #f04632; } .multi_list__select .list_select ul li input[type="radio"]:checked + label, .multi_list__select .list_select ul:hover li input[type="radio"]:checked + label { display: inline-block; padding: 10px 0px; margin: 0px 10px 0px 0px; border: 2px solid #f04632; color: #ffffff; background: #f04632; } .multi_list__select .list_select ul li input[type="radio"]:checked + label:hover, .multi_list__select .list_select ul:hover li input[type="radio"]:checked + label:hover { border: 2px solid #f04632; color: #ffffff; } .multi_list__select .list_select ul li input[type="radio"]:checked + label:after, .multi_list__select .list_select ul:hover li input[type="radio"]:checked + label:after { content: ''; position: absolute; right: 10px; } .multi_list__select .list_select ul:after, .multi_list__select .list_select ul:hover:after { content: ''; display: table; clear: both; } } @media only screen and (min-width: 1040px) { .multi_list__select .list_select { height: 100px; margin: 0px; padding: 0px; } .multi_list__select .list_select label:first-child { margin-left: 75px; width: 40%; } .multi_list__select .list_select ul:hover li input[type=radio] + label, .multi_list__select .list_select ul:hover li:first-child input[type=radio] + label, .multi_list__select .list_select ul:hover li:last-child input[type=radio] + label { padding: 10px 0px; margin: 0px 10px 0px 0px; } .multi_list__select .list_select ul, .multi_list__select .list_select ul:hover { padding-left: 50px; } .multi_list__select .list_select ul li input[type="radio"] + label, .multi_list__select .list_select ul:hover li input[type="radio"] + label { width: 130px; padding: 10px 0px; margin: 0px 10px 0px 0px; } .multi_list__select .list_select ul li input[type="radio"] + label:hover, .multi_list__select .list_select ul:hover li input[type="radio"] + label:hover { border: 2px solid #f04632; color: red; } .multi_list__select .list_select ul li input[type="radio"]:checked + label, .multi_list__select .list_select ul:hover li input[type="radio"]:checked + label { padding: 10px 0px; margin: 0px 10px 0px 0px; } } @media only screen and (min-width: 1300px) { .multi_list__select .list_select { height: 100px; margin: 0px; padding: 0px; } .multi_list__select .list_select label:first-child { margin-left: 75px; width: 40%; } .multi_list__select .list_select ul:hover li input[type=radio] + label, .multi_list__select .list_select ul:hover li:first-child input[type=radio] + label, .multi_list__select .list_select ul:hover li:last-child input[type=radio] + label { padding: 10px 0px; margin: 0px 10px 0px 0px; } .multi_list__select .list_select ul, .multi_list__select .list_select ul:hover { padding-left: 50px; } .multi_list__select .list_select ul li input[type="radio"] + label, .multi_list__select .list_select ul:hover li input[type="radio"] + label { width: 130px; padding: 10px 0px; margin: 0px 10px 0px 0px; } .multi_list__select .list_select ul li input[type="radio"] + label:hover, .multi_list__select .list_select ul:hover li input[type="radio"] + label:hover { border: 2px solid #f04632; color: red; } .multi_list__select .list_select ul li input[type="radio"]:checked + label, .multi_list__select .list_select ul:hover li input[type="radio"]:checked + label { padding: 10px 0px; margin: 0px 10px 0px 0px; } } .bgsCalc .modalInfo { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1) !important; z-index: 1360; } .bgsCalc .modalInfo .modalInfoInnerWrap { display: none; position: relative; margin-top: 5%; margin-left: auto; margin-right: auto; max-height: 80%; width: 90%; background: #ffffff; z-index: 1330; padding: 20px; border-radius: 5px; overflow-y: hidden; } .bgsCalc .modalInfo .modalInfoInnerWrap a.close:link, .bgsCalc .modalInfo .modalInfoInnerWrap a.close:visited { font-size: 40px; color: #929da7; position: absolute; top: 7px; right: 15px; font-weight: 300; z-index: 1400; opacity: 1; } .bgsCalc .modalInfo .modalInfoInnerWrap a.close:link:hover, .bgsCalc .modalInfo .modalInfoInnerWrap a.close:visited:hover { color: #929da7; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent { display: block; margin: 0px 10px 0px 20px; clear: both; font-size: 15px; max-height: 80%; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent .mCSB_dragger_bar { background-color: #d5d5d5; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent a.btn { text-transform: uppercase; border-radius: 5px; text-decoration: none; display: inline-block; padding: 7px 20px; border: 1px solid #f04632; color: #f04632; margin-right: 12px; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent a.btn:hover { border: 1px solid #f04632; color: #ffffff; background: #f04632; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent .btnSolid, .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent a.btnSolid, .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent a.btnSolid:link, .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent a.btnSolid:visited { border-radius: 5px; text-decoration: none; display: inline-block; padding: 7px 20px; border: 1px solid #f04632; color: #ffffff; background: #f04632; margin-right: 12px; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent .btnSolid:hover, .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent a.btnSolid:hover, .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent a.btnSolid:link:hover, .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent a.btnSolid:visited:hover { border: 1px solid #f04632; color: #f04632; background: #ffffff; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent p { margin: 10px 0px; clear: both; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent hr { margin: 10px 0px; clear: both; } .bgsCalc .modalInfo .modalInfoInnerWrap a:visited, .bgsCalc .modalInfo .modalInfoInnerWrap a:link { text-decoration: none; color: #f04632; } .bgsCalc .modalInfo.transactional { text-align: center; } .bgsCalc .modalInfo.transactional .modalInfoInnerWrap { height: auto; width: 90%; } .bgsCalc .modalInfo.transactional .modalInfoInnerWrap .modalContent { height: auto; } .bgsCalc .modalInfo.active { display: block; } .bgsCalc .modalInfo.active .modalInfoInnerWrap { display: block; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent { overflow-x: hidden!important; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave h3.responseMessage { font-size: 15px; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave h3.responseMessage.success { color: green; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave h3.responseMessage.error { color: red; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave h2 { font-size: 28px; margin-bottom: 20px; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave label { font-weight: bold; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave input { min-width: 190px; display: block; clear: both; padding: 7px; margin: 5px auto; border: 1px solid #dcdada; color: #43494D; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave select { min-width: 190px; display: block; clear: both; padding: 7px; margin: 5px auto; border: 1px solid #dcdada; color:darkgrey; height: 42px; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave select{ color:darkgrey; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave select option{ color:#444A4E; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave span.subscribeConsentLabel { display: block; margin-top: 0px; margin-bottom: 20px; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave span.subscribeConsentLabel input[type=checkbox] { display: none; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave span.subscribeConsentLabel input[type=checkbox] + label { cursor: pointer; margin-top: 10px; padding-left: 20px; padding-top: 0px; float: left; background: transparent; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave span.subscribeConsentLabel input[type=checkbox] + label:before { content: ""; display: inline-block; width: 23px; height: 23px; background: #D8D8D8; border: 1px solid #A7A7A7; border-radius: 5px; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave span.subscribeConsentLabel input[type=checkbox]:checked + label:before { content: url(../img/checkmark.png); text-align: center; line-height: 23px; background: #f04632; border: 1px solid #f04632; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave span.subscribeConsentLabel span.labelText { margin-top: 7px; float: left; width: 85%; font-size: 16px; line-height: 21px; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave #submitEmail { margin-top: 20px; width: 170px!important; max-width: 300px; display: block; clear: both; margin: 15px auto; font-weight: bold; color: #fff; background: #f04632; border: 1px solid #f04632; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave #submitEmail:before { content: ''; display: block; clear: both; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave span.sent { display: none; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave.sent span.send { display: none; } .bgsCalc .modalInfo.active.email .modalInfoInnerWrap .modalContent #emailSave.sent span.send { display: block; } @media only screen and (min-width: 720px) { .bgsCalc .modalInfo { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1320; } .bgsCalc .modalInfo .modalInfoInnerWrap { display: none; position: relative; margin-top: 5%; margin-left: auto; margin-right: auto; max-height: 60%; width: 40%; background: #ffffff; z-index: 1330; padding: 20px; } .bgsCalc .modalInfo .modalInfoInnerWrap .close { color: #929da7; position: absolute; top: 10px; right: 10px; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalHeader h2 { font-size: 28px; margin: 10px 20px 10px 20px; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent { display: block; margin: 0px 20px 0px 20px; clear: both; max-height: 250px; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent span.subscribeConsentLabel { display: block; margin-top: 0px; margin-bottom: 20px; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent span.subscribeConsentLabel input[type=checkbox] { display: none; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent span.subscribeConsentLabel input[type=checkbox] + label { cursor: pointer; margin-top: 10px; padding-left: 20px; padding-top: 0px; float: left; background: transparent; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent span.subscribeConsentLabel input[type=checkbox] + label:before { content: ""; display: inline-block; width: 23px; height: 23px; background: #D8D8D8; border: 1px solid #A7A7A7; border-radius: 5px; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent span.subscribeConsentLabel input[type=checkbox]:checked + label:before { content: url(../img/checkmark.png); text-align: center; line-height: 23px; background: #f04632; border: 1px solid #f04632; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent span.subscribeConsentLabel span.labelText { margin-top: 7px; float: left; width: 85%; font-size: 16px; line-height: 21px; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent em { font-weight: bold; clear: both; } .bgsCalc .modalInfo .modalInfoInnerWrap a:visited, .bgsCalc .modalInfo .modalInfoInnerWrap a:link { text-decoration: none; color: #f04632; } .bgsCalc .modalInfo.transactional { text-align: center; } .bgsCalc .modalInfo.transactional .modalInfoInnerWrap { height: auto; width: 550px; } .bgsCalc .modalInfo.transactional .modalInfoInnerWrap .modalContent { height: auto; } .bgsCalc .modalInfo.active { display: block; } .bgsCalc .modalInfo.active .modalInfoInnerWrap { display: block; } } @media only screen and (min-width: 1040px) { .bgsCalc .modalInfo .modalInfoInnerWrap { max-height: 500px; width: 656px; padding: 50px; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalHeader h2 { font-size: 36px; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent { max-height: 450px; overflow-y: hidden; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent .mCSB_scrollTools { background: none; } .bgsCalc .modalInfo.transactional { text-align: center; } .bgsCalc .modalInfo.transactional .modalInfoInnerWrap { height: auto; width: 550px; } .bgsCalc .modalInfo.transactional .modalInfoInnerWrap .modalContent { height: auto; } } @media only screen and (min-width: 1300px) { .bgsCalc .modalInfo .modalInfoInnerWrap { height: 650px; width: 815px; } .bgsCalc .modalInfo .modalInfoInnerWrap .modalContent { height: 570px; overflow-y: hidden; } .bgsCalc .modalInfo.transactional { text-align: center; } .bgsCalc .modalInfo.transactional .modalInfoInnerWrap { height: auto; width: 570px; } .bgsCalc .modalInfo.transactional .modalInfoInnerWrap .modalContent { height: auto; } } .bgsCalc.showingResults #colcResults { width: 500px; max-width: 100%; margin: 0px auto; display: block; clear: both; overflow-y: auto!important; } .bgsCalc.showingResults #colcResults .resultHeader { clear: both; text-align: center; margin-bottom: 62px; } .bgsCalc.showingResults #colcResults .resultHeader img { display: block; clear: both; margin: 10px auto; } .bgsCalc.showingResults #colcResults .resultHeader h3 { margin: 10px auto; font-size: 30px; } .bgsCalc.showingResults #colcResults .resultHeader .resultVal { display: block; clear: both; font-weight: bold; font-size: 40px; } .bgsCalc.showingResults #colcResults .resultHeader .optionsBar select { font-size: 15px; line-height: 21px; border-radius: 5px; height: auto; margin: 5px 10px; background: #f7f7f7; border: 1px solid #ababab; max-width: 100px; clear: none; } .bgsCalc.showingResults #colcResults .resultControlBar { text-align: center; } .bgsCalc.showingResults #colcResults .resultControlBar a.startAgain { text-align: center; text-decoration: none; display: inline-block; padding: 7px 20px; margin-top: 10px; margin-bottom: 10px; border: 2px solid #f04632; color: #f04632; border-radius: 5px; } .bgsCalc.showingResults #colcResults .resultControlBar a.startAgain:hover { border: 1px solid #f04632; color: #ffffff; background: #f04632; } .bgsCalc.showingResults #colcResults .resultControlBar a.save { text-align: center; text-decoration: none; display: none; padding: 7px 20px; border: 2px solid #f04632; color: #ffffff; background: #f04632; margin-left: 20px; margin-bottom: 10px; margin-top: 10px; border-radius: 5px; } .bgsCalc.showingResults #colcResults .resultControlBar a.save:hover { border: 1px solid #f04632; color: #f04632; background: #ffffff; } .bgsCalc.showingResults #colcResults .resultControlBar:after { content: ''; clear: both; display: block; } .bgsCalc.showingResults #colcResults table#colcResultTable { position: relative; display: block; margin-bottom: 5px; clear: both; border-spacing: 0; border-collapse: collapse; } .bgsCalc.showingResults #colcResults table#colcResultTable tr.resultGroup td.animateWrap { padding-top: 0px; background: #f7f7f7; max-height: 42PX; width: 300px; vertical-align: middle; } .bgsCalc.showingResults #colcResults table#colcResultTable tr.resultGroup td.resultGroupLabel { padding-top: 7px; padding-right: 7px; height: 42px; vertical-align: middle; } .bgsCalc.showingResults #colcResults table#colcResultTable tr.resultGroup:first-child td.animateWrap { border-top-right-radius: 5px; border-top-left-radius: 5px; } .bgsCalc.showingResults #colcResults table#colcResultTable tr.resultGroup:last-child td.animateWrap { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .bgsCalc.showingResults #colcResults table#colcResultTable span.resultVal { display: inline-block; height: 31px; padding: 3px 5px; width: 100px; background: #f04632; border-radius: 5px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; color: #ffffff; } .bgsCalc.showingResults #colcResults table#colcResultTable span.resultVal:after { content: ''; display: table; clear: both; } .bgsCalc.showingResults #colcResults table#colcResultTable .resultGroupLabel { vertical-align: baseline; display: inline-block; width: 150px; float: left; } .bgsCalc.showingResults #colcResults table#colcResultTable .resultBar { max-height: 37px; vertical-align: baseline; display: block; clear: both; padding-left: 6px; margin-left: 6px; margin-bottom: 5px; color: #ffffff; width: 85px; min-width: 85px; position: relative; background: #f04632; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; /* &:after { content: ''; display: block; clear: both; } */ } .bgsCalc.showingResults #colcResults table#cityCompareTable { position: relative; display: block; margin-bottom: 5px; clear: both; border-spacing: 0; border-collapse: collapse; } .bgsCalc.showingResults #colcResults table#cityCompareTable tr.resultGroup td.animateWrap { padding-top: 0px; background: #f7f7f7; max-height: 42PX; padding-left: 5px; padding-right: 5px; width: 300px; vertical-align: middle; } .bgsCalc.showingResults #colcResults table#cityCompareTable tr.resultGroup td.resultGroupLabel { padding-top: 7px; padding-right: 7px; height: 42px; vertical-align: middle; } .bgsCalc.showingResults #colcResults table#cityCompareTable tr.resultGroup:first-child td.animateWrap { border-top-right-radius: 5px; border-top-left-radius: 5px; } .bgsCalc.showingResults #colcResults table#cityCompareTable tr.resultGroup:last-child td.animateWrap { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .bgsCalc.showingResults #colcResults table#cityCompareTable span.resultVal { display: inline-block; height: 31px; padding: 3px 5px; width: 100px; background: #f04632; border-radius: 5px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; color: #ffffff; } .bgsCalc.showingResults #colcResults table#cityCompareTable span.resultVal:after { content: ''; display: table; clear: both; } .bgsCalc.showingResults #colcResults table#cityCompareTable .resultGroupLabel { vertical-align: baseline; display: inline-block; width: 150px; float: left; } .bgsCalc.showingResults #colcResults table#cityCompareTable .resultBar { max-height: 37px; vertical-align: baseline; display: block; clear: both; padding-left: 6px; /*margin-left: 6px;*/ margin-bottom: 5px; color: #ffffff; width: 85px; min-width: 85px; position: relative; background: #f04632; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; /* &:after { content: ''; display: block; clear: both; } */ } .bgsCalc.showingResults #colcResults ul.cityCompare { font-size: 18px; margin-top: 62px; padding-bottom: 31px; border-bottom: 1px solid #d5d5d5; margin-bottom: 31px; display: block; } .bgsCalc.showingResults #colcResults ul.cityCompare li { display: inline-block; padding: 0px 10px; float: left; text-align: center; } .bgsCalc.showingResults #colcResults ul.cityCompare li span.cityTitle { font-size: 16px; clear: both; display: inline-block; } .bgsCalc.showingResults #colcResults ul.cityCompare li span.cityTotal { clear: both; display: inline-block; color: #43494D; font-weight: bold; } .bgsCalc.showingResults #colcResults ul.cityCompare li span.cityDifference { clear: both; display: inline-block; } .bgsCalc.showingResults #colcResults ul.cityCompare:after { content: ''; clear: both; display: block; }