1/* 2== malihu jquery custom scrollbar plugin == 3Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller 4*/ 5 6 7 8/* 9CONTENTS: 10 1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 11 2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 12 3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar. 13 4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 14 5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 15 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 16 6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes. 17*/ 18 19 20 21/* 22------------------------------------------------------------------------------------------------------------------------ 231. BASIC STYLE 24------------------------------------------------------------------------------------------------------------------------ 25*/ 26 27 .mCustomScrollbar{ -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ } 28 .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; } 29 30 .mCustomScrollBox{ /* contains plugin's markup */ 31 position: relative; 32 overflow: hidden; 33 height: 100%; 34 max-width: 100%; 35 outline: none; 36 direction: ltr; 37 } 38 39 .mCSB_container{ /* contains the original content */ 40 overflow: hidden; 41 width: auto; 42 height: auto; 43 } 44 45 46 47/* 48------------------------------------------------------------------------------------------------------------------------ 492. VERTICAL SCROLLBAR 50y-axis 51------------------------------------------------------------------------------------------------------------------------ 52*/ 53 54 .mCSB_inside > .mCSB_container{ margin-right: 30px; } 55 56 .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */ 57 58 .mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */ 59 margin-right: 0; 60 margin-left: 30px; 61 } 62 63 .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */ 64 65 .mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ 66 position: absolute; 67 width: 16px; 68 height: auto; 69 left: auto; 70 top: 0; 71 right: 0; 72 bottom: 0; 73 } 74 75 .mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */ 76 77 .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, 78 .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */ 79 right: auto; 80 left: 0; 81 } 82 83 .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */ 84 85 .mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */ 86 position: absolute; 87 top: 0; 88 left: 0; 89 bottom: 0; 90 right: 0; 91 height: auto; 92 } 93 94 .mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; } 95 96 .mCSB_scrollTools .mCSB_draggerRail{ 97 width: 2px; 98 height: 100%; 99 margin: 0 auto; 100 -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; 101 } 102 103 .mCSB_scrollTools .mCSB_dragger{ /* the draggable element */ 104 cursor: pointer; 105 width: 100%; 106 height: 30px; /* minimum dragger height */ 107 z-index: 1; 108 } 109 110 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */ 111 position: relative; 112 width: 4px; 113 height: 100%; 114 margin: 0 auto; 115 -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; 116 text-align: center; 117 } 118 119 .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 120 .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ } 121 122 .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 123 .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ } 124 125 .mCSB_scrollTools .mCSB_buttonUp, 126 .mCSB_scrollTools .mCSB_buttonDown{ 127 display: block; 128 position: absolute; 129 height: 20px; 130 width: 100%; 131 overflow: hidden; 132 margin: 0 auto; 133 cursor: pointer; 134 } 135 136 .mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; } 137 138 139 140/* 141------------------------------------------------------------------------------------------------------------------------ 1423. HORIZONTAL SCROLLBAR 143x-axis 144------------------------------------------------------------------------------------------------------------------------ 145*/ 146 147 .mCSB_horizontal.mCSB_inside > .mCSB_container{ 148 margin-right: 0; 149 margin-bottom: 30px; 150 } 151 152 .mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; } 153 154 .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */ 155 156 .mCSB_scrollTools.mCSB_scrollTools_horizontal{ 157 width: auto; 158 height: 16px; 159 top: auto; 160 right: 0; 161 bottom: 0; 162 left: 0; 163 } 164 165 .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 166 .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */ 167 168 .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; } 169 170 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{ 171 width: 100%; 172 height: 2px; 173 margin: 7px 0; 174 } 175 176 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{ 177 width: 30px; /* minimum dragger width */ 178 height: 100%; 179 left: 0; 180 } 181 182 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ 183 width: 100%; 184 height: 4px; 185 margin: 6px auto; 186 } 187 188 .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 189 .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ 190 height: 12px; /* auto-expanded scrollbar */ 191 margin: 2px auto; 192 } 193 194 .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 195 .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ 196 height: 8px; /* auto-expanded scrollbar */ 197 margin: 4px 0; 198 } 199 200 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, 201 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ 202 display: block; 203 position: absolute; 204 width: 20px; 205 height: 100%; 206 overflow: hidden; 207 margin: 0 auto; 208 cursor: pointer; 209 } 210 211 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0; } 212 213 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right: 0; } 214 215 216 217/* 218------------------------------------------------------------------------------------------------------------------------ 2194. VERTICAL AND HORIZONTAL SCROLLBARS 220yx-axis 221------------------------------------------------------------------------------------------------------------------------ 222*/ 223 224 .mCSB_container_wrapper{ 225 position: absolute; 226 height: auto; 227 width: auto; 228 overflow: hidden; 229 top: 0; 230 left: 0; 231 right: 0; 232 bottom: 0; 233 margin-right: 30px; 234 margin-bottom: 30px; 235 } 236 237 .mCSB_container_wrapper > .mCSB_container{ 238 padding-right: 30px; 239 padding-bottom: 30px; 240 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 241 } 242 243 .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; } 244 245 .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; } 246 247 /* non-visible horizontal scrollbar */ 248 .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; } 249 250 /* non-visible vertical scrollbar/RTL direction/left-side scrollbar */ 251 .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, 252 .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; } 253 254 /* RTL direction/left-side scrollbar */ 255 .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; } 256 257 /* non-visible scrollbar/RTL direction/left-side scrollbar */ 258 .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; } 259 260 .mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */ 261 margin-right: 0; 262 margin-left: 30px; 263 } 264 265 .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; } 266 267 .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; } 268 269 .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{ 270 margin-right: 0; /* non-visible scrollbar */ 271 margin-left: 0; 272 } 273 274 /* non-visible horizontal scrollbar */ 275 .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } 276 277 278 279/* 280------------------------------------------------------------------------------------------------------------------------ 2815. TRANSITIONS 282------------------------------------------------------------------------------------------------------------------------ 283*/ 284 285 .mCSB_scrollTools, 286 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 287 .mCSB_scrollTools .mCSB_buttonUp, 288 .mCSB_scrollTools .mCSB_buttonDown, 289 .mCSB_scrollTools .mCSB_buttonLeft, 290 .mCSB_scrollTools .mCSB_buttonRight{ 291 -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; 292 -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; 293 -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; 294 transition: opacity .2s ease-in-out, background-color .2s ease-in-out; 295 } 296 297 .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */ 298 .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, 299 .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, 300 .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{ 301 -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, 302 margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 303 margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, 304 opacity .2s ease-in-out, background-color .2s ease-in-out; 305 -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, 306 margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 307 margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, 308 opacity .2s ease-in-out, background-color .2s ease-in-out; 309 -o-transition: width .2s ease-out .2s, height .2s ease-out .2s, 310 margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 311 margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, 312 opacity .2s ease-in-out, background-color .2s ease-in-out; 313 transition: width .2s ease-out .2s, height .2s ease-out .2s, 314 margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 315 margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, 316 opacity .2s ease-in-out, background-color .2s ease-in-out; 317 } 318 319 320 321/* 322------------------------------------------------------------------------------------------------------------------------ 3236. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 324------------------------------------------------------------------------------------------------------------------------ 325*/ 326 327 /* 328 ---------------------------------------- 329 6.1 THEMES 330 ---------------------------------------- 331 */ 332 333 /* default theme ("light") */ 334 335 .mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } 336 337 .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, 338 .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; } 339 340 .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, 341 .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, 342 .mCustomScrollBox:hover > .mCSB_scrollTools, 343 .mCustomScrollBox:hover ~ .mCSB_scrollTools, 344 .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, 345 .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } 346 347 .mCSB_scrollTools .mCSB_draggerRail{ 348 background-color: #000; background-color: rgba(0,0,0,0.4); 349 filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; 350 } 351 352 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ 353 background-color: #fff; background-color: rgba(255,255,255,0.75); 354 filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; 355 } 356 357 .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ 358 background-color: #fff; background-color: rgba(255,255,255,0.85); 359 filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; 360 } 361 .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 362 .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ 363 background-color: #fff; background-color: rgba(255,255,255,0.9); 364 filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; 365 } 366 367 .mCSB_scrollTools .mCSB_buttonUp, 368 .mCSB_scrollTools .mCSB_buttonDown, 369 .mCSB_scrollTools .mCSB_buttonLeft, 370 .mCSB_scrollTools .mCSB_buttonRight{ 371 background-image: url(../icons/default/mCSB_buttons.png); /* css sprites */ 372 background-repeat: no-repeat; 373 opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; 374 } 375 376 .mCSB_scrollTools .mCSB_buttonUp{ 377 background-position: 0 0; 378 /* 379 sprites locations 380 light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px 381 dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px 382 */ 383 } 384 385 .mCSB_scrollTools .mCSB_buttonDown{ 386 background-position: 0 -20px; 387 /* 388 sprites locations 389 light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px 390 dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px 391 */ 392 } 393 394 .mCSB_scrollTools .mCSB_buttonLeft{ 395 background-position: 0 -40px; 396 /* 397 sprites locations 398 light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px 399 dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px 400 */ 401 } 402 403 .mCSB_scrollTools .mCSB_buttonRight{ 404 background-position: 0 -56px; 405 /* 406 sprites locations 407 light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px 408 dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px 409 */ 410 } 411 412 .mCSB_scrollTools .mCSB_buttonUp:hover, 413 .mCSB_scrollTools .mCSB_buttonDown:hover, 414 .mCSB_scrollTools .mCSB_buttonLeft:hover, 415 .mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } 416 417 .mCSB_scrollTools .mCSB_buttonUp:active, 418 .mCSB_scrollTools .mCSB_buttonDown:active, 419 .mCSB_scrollTools .mCSB_buttonLeft:active, 420 .mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } 421 422 423 /* theme: "dark" */ 424 425 .mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } 426 427 .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } 428 429 .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.85); } 430 431 .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 432 .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.9); } 433 434 .mCS-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } 435 436 .mCS-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } 437 438 .mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } 439 440 .mCS-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } 441 442 /* ---------------------------------------- */ 443 444 445 446 /* theme: "light-2", "dark-2" */ 447 448 .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, 449 .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ 450 width: 4px; 451 background-color: #666; background-color: rgba(255,255,255,0.1); 452 -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; 453 } 454 455 .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 456 .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ 457 width: 4px; 458 background-color: #fff; background-color: rgba(255,255,255,0.75); 459 -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; 460 } 461 462 .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, 463 .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, 464 .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 465 .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ 466 width: 100%; 467 height: 4px; 468 margin: 6px auto; 469 } 470 471 .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } 472 473 .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 474 .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } 475 476 .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px 0; } 477 478 .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -20px; } 479 480 .mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -40px; } 481 482 .mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -56px; } 483 484 485 /* theme: "dark-2" */ 486 487 .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ 488 background-color: #000; background-color: rgba(0,0,0,0.1); 489 -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; 490 } 491 492 .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ 493 background-color: #000; background-color: rgb(115, 182, 224); 494 -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; 495 } 496 497 .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(115, 182, 224,0.85); } 498 499 .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 500 .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(115, 182, 224,0.9); } 501 502 .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px 0; } 503 504 .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -20px; } 505 506 .mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -40px; } 507 508 .mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -56px; } 509 510 /* ---------------------------------------- */ 511 512 513 514 /* theme: "light-thick", "dark-thick" */ 515 516 .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, 517 .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ 518 width: 4px; 519 background-color: #fff; background-color: rgba(255,255,255,0.1); 520 -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; 521 } 522 523 .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 524 .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ 525 width: 6px; 526 background-color: #fff; background-color: rgba(255,255,255,0.75); 527 -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; 528 } 529 530 .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, 531 .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{ 532 width: 100%; 533 height: 4px; 534 margin: 6px 0; 535 } 536 537 .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 538 .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ 539 width: 100%; 540 height: 6px; 541 margin: 5px auto; 542 } 543 544 .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } 545 546 .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 547 .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } 548 549 .mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px 0; } 550 551 .mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -20px; } 552 553 .mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -40px; } 554 555 .mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -56px; } 556 557 558 /* theme: "dark-thick" */ 559 560 .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ 561 background-color: #000; background-color: rgba(0,0,0,0.1); 562 -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; 563 } 564 565 .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ 566 background-color: #000; background-color: rgba(0,0,0,0.75); 567 -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; 568 } 569 570 .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } 571 572 .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 573 .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } 574 575 .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px 0; } 576 577 .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -20px; } 578 579 .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -40px; } 580 581 .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -56px; } 582 583 /* ---------------------------------------- */ 584 585 586 587 /* theme: "light-thin", "dark-thin" */ 588 589 .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.1); } 590 591 .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 592 .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; } 593 594 .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, 595 .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; } 596 597 .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 598 .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ 599 width: 100%; 600 height: 2px; 601 margin: 7px auto; 602 } 603 604 605 /* theme "dark-thin" */ 606 607 .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } 608 609 .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } 610 611 .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } 612 613 .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 614 .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } 615 616 .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } 617 618 .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } 619 620 .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } 621 622 .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } 623 624 /* ---------------------------------------- */ 625 626 627 628 /* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */ 629 630 .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); } 631 632 .mCS-rounded.mCSB_scrollTools .mCSB_dragger, 633 .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, 634 .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, 635 .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; } 636 637 .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 638 .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 639 .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 640 .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ 641 width: 14px; 642 margin: 0 1px; 643 } 644 645 .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, 646 .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, 647 .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, 648 .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; } 649 650 .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 651 .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 652 .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 653 .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ 654 height: 14px; 655 margin: 1px 0; 656 } 657 658 .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 659 .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, 660 .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 661 .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ 662 width: 16px; /* auto-expanded scrollbar */ 663 height: 16px; 664 margin: -1px 0; 665 } 666 667 .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 668 .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 669 .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 670 .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 4px; /* auto-expanded scrollbar */ } 671 672 .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 673 .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, 674 .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 675 .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ 676 height: 16px; /* auto-expanded scrollbar */ 677 width: 16px; 678 margin: 0 -1px; 679 } 680 681 .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 682 .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 683 .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 684 .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ 685 height: 4px; /* auto-expanded scrollbar */ 686 margin: 6px 0; 687 } 688 689 .mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 -72px; } 690 691 .mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -92px; } 692 693 .mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -112px; } 694 695 .mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -128px; } 696 697 698 /* theme "rounded-dark", "rounded-dots-dark" */ 699 700 .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 701 .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } 702 703 .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } 704 705 .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 706 .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } 707 708 .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 709 .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 710 .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 711 .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); } 712 713 .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px -72px; } 714 715 .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -92px; } 716 717 .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -112px; } 718 719 .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -128px; } 720 721 722 /* theme "rounded-dots", "rounded-dots-dark" */ 723 724 .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, 725 .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; } 726 727 .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 728 .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, 729 .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, 730 .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ 731 background-color: transparent; 732 background-position: center; 733 } 734 735 .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 736 .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ 737 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg=="); 738 background-repeat: repeat-y; 739 opacity: 0.3; 740 filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; 741 } 742 743 .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, 744 .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ 745 height: 4px; 746 margin: 6px 0; 747 background-repeat: repeat-x; 748 } 749 750 .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px -72px; } 751 752 .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -92px; } 753 754 .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -112px; } 755 756 .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -128px; } 757 758 759 /* theme "rounded-dots-dark" */ 760 761 .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ 762 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII="); 763 } 764 765 .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px -72px; } 766 767 .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -92px; } 768 769 .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -112px; } 770 771 .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -128px; } 772 773 /* ---------------------------------------- */ 774 775 776 777 /* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */ 778 779 .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 780 .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 781 .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 782 .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ 783 background-repeat: repeat-y; 784 background-image: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); 785 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))); 786 background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); 787 background-image: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); 788 background-image: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); 789 background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); 790 } 791 792 .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 793 .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 794 .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 795 .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ 796 background-repeat: repeat-x; 797 background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); 798 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))); 799 background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); 800 background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); 801 background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); 802 background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); 803 } 804 805 806 /* theme "3d", "3d-dark" */ 807 808 .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, 809 .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; } 810 811 .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, 812 .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; } 813 814 .mCS-3d.mCSB_scrollTools, 815 .mCS-3d-dark.mCSB_scrollTools{ 816 opacity: 1; 817 filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; 818 } 819 820 .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, 821 .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 822 .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, 823 .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } 824 825 .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, 826 .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ 827 width: 8px; 828 background-color: #000; background-color: rgba(0,0,0,0.2); 829 box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2); 830 } 831 832 .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 833 .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 834 .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 835 .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 836 .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 837 .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 838 .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 839 .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } 840 841 .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 842 .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; } 843 844 .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, 845 .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ 846 width: 100%; 847 height: 8px; 848 margin: 4px 0; 849 box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2); 850 } 851 852 .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 853 .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ 854 width: 100%; 855 height: 8px; 856 margin: 4px auto; 857 } 858 859 .mCS-3d.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } 860 861 .mCS-3d.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } 862 863 .mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } 864 865 .mCS-3d.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } 866 867 868 /* theme "3d-dark" */ 869 870 .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ 871 background-color: #000; background-color: rgba(0,0,0,0.1); 872 box-shadow: inset 1px 0 1px rgba(0,0,0,0.1); 873 } 874 875 .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); } 876 877 .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } 878 879 .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } 880 881 .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } 882 883 .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } 884 885 /* ---------------------------------------- */ 886 887 888 889 /* theme: "3d-thick", "3d-thick-dark" */ 890 891 .mCS-3d-thick.mCSB_scrollTools, 892 .mCS-3d-thick-dark.mCSB_scrollTools{ 893 opacity: 1; 894 filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; 895 } 896 897 .mCS-3d-thick.mCSB_scrollTools, 898 .mCS-3d-thick-dark.mCSB_scrollTools, 899 .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, 900 .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } 901 902 .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 903 .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } 904 905 .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, 906 .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; } 907 908 .mCS-3d-thick.mCSB_scrollTools_vertical, 909 .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); } 910 911 .mCS-3d-thick.mCSB_scrollTools_horizontal, 912 .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ 913 bottom: 1px; 914 box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); 915 } 916 917 .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 918 .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ 919 box-shadow: inset 1px 0 0 rgba(255,255,255,0.4); 920 width: 12px; 921 margin: 2px; 922 position: absolute; 923 height: auto; 924 top: 0; 925 bottom: 0; 926 left: 0; 927 right: 0; 928 } 929 930 .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 931 .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); } 932 933 .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 934 .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 935 .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 936 .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } 937 938 .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 939 .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ 940 height: 12px; 941 width: auto; 942 } 943 944 .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{ 945 background-color: #000; background-color: rgba(0,0,0,0.05); 946 box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); 947 } 948 949 .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } 950 951 .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } 952 953 .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } 954 955 .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } 956 957 .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } 958 959 960 /* theme: "3d-thick-dark" */ 961 962 .mCS-3d-thick-dark.mCSB_scrollTools{ box-shadow: inset 0 0 14px rgba(0,0,0,0.2); } 963 964 .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); } 965 966 .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); } 967 968 .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); } 969 970 .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 971 .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 972 .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 973 .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; } 974 975 .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ 976 background-color: #fff; background-color: rgba(0,0,0,0.05); 977 box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); 978 } 979 980 .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } 981 982 .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } 983 984 .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } 985 986 .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } 987 988 .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } 989 990 /* ---------------------------------------- */ 991 992 993 994 /* theme: "minimal", "minimal-dark" */ 995 996 .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, 997 .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ 998 right: 0; 999 margin: 12px 0; 1000 } 1001 1002 .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 1003 .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 1004 .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 1005 .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ 1006 bottom: 0; 1007 margin: 0 12px; 1008 } 1009 1010 /* RTL direction/left-side scrollbar */ 1011 .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, 1012 .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ 1013 left: 0; 1014 right: auto; 1015 } 1016 1017 .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, 1018 .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } 1019 1020 .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, 1021 .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; } 1022 1023 .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, 1024 .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; } 1025 1026 .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ 1027 background-color: #fff; background-color: rgba(255,255,255,0.2); 1028 filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; 1029 } 1030 1031 .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 1032 .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ 1033 background-color: #fff; background-color: rgba(255,255,255,0.5); 1034 filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; 1035 } 1036 1037 1038 /* theme: "minimal-dark" */ 1039 1040 .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ 1041 background-color: #000; background-color: rgba(0,0,0,0.2); 1042 filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; 1043 } 1044 1045 .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 1046 .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ 1047 background-color: #000; background-color: rgba(0,0,0,0.5); 1048 filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; 1049 } 1050 1051 /* ---------------------------------------- */ 1052 1053 1054 1055 /* theme "light-3", "dark-3" */ 1056 1057 .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, 1058 .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ 1059 width: 6px; 1060 background-color: #000; background-color: rgba(0,0,0,0.2); 1061 } 1062 1063 .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 1064 .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; } 1065 1066 .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 1067 .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 1068 .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, 1069 .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{ 1070 width: 100%; 1071 height: 6px; 1072 margin: 5px 0; 1073 } 1074 1075 .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 1076 .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 1077 .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 1078 .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ 1079 width: 12px; 1080 } 1081 1082 .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 1083 .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 1084 .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 1085 .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ 1086 height: 12px; 1087 margin: 2px 0; 1088 } 1089 1090 .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } 1091 1092 .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } 1093 1094 .mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } 1095 1096 .mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } 1097 1098 1099 /* theme "dark-3" */ 1100 1101 .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } 1102 1103 .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } 1104 1105 .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 1106 .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } 1107 1108 .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } 1109 1110 .mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } 1111 1112 .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } 1113 1114 .mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } 1115 1116 .mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } 1117 1118 /* ---------------------------------------- */ 1119 1120 1121 1122 /* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */ 1123 1124 .mCS-inset.mCSB_scrollTools .mCSB_draggerRail, 1125 .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, 1126 .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, 1127 .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, 1128 .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, 1129 .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ 1130 width: 12px; 1131 background-color: #000; background-color: rgba(0,0,0,0.2); 1132 } 1133 1134 .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 1135 .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 1136 .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 1137 .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 1138 .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 1139 .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ 1140 width: 6px; 1141 margin: 3px 5px; 1142 position: absolute; 1143 height: auto; 1144 top: 0; 1145 bottom: 0; 1146 left: 0; 1147 right: 0; 1148 } 1149 1150 .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 1151 .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 1152 .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 1153 .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 1154 .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 1155 .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ 1156 height: 6px; 1157 margin: 5px 3px; 1158 position: absolute; 1159 width: auto; 1160 top: 0; 1161 bottom: 0; 1162 left: 0; 1163 right: 0; 1164 } 1165 1166 .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, 1167 .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, 1168 .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, 1169 .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, 1170 .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, 1171 .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ 1172 width: 100%; 1173 height: 12px; 1174 margin: 2px 0; 1175 } 1176 1177 .mCS-inset.mCSB_scrollTools .mCSB_buttonUp, 1178 .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, 1179 .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } 1180 1181 .mCS-inset.mCSB_scrollTools .mCSB_buttonDown, 1182 .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, 1183 .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } 1184 1185 .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, 1186 .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, 1187 .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } 1188 1189 .mCS-inset.mCSB_scrollTools .mCSB_buttonRight, 1190 .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, 1191 .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } 1192 1193 1194 /* theme "inset-dark", "inset-2-dark", "inset-3-dark" */ 1195 1196 .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 1197 .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 1198 .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } 1199 1200 .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 1201 .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 1202 .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } 1203 1204 .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 1205 .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 1206 .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 1207 .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 1208 .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 1209 .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); } 1210 1211 .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, 1212 .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, 1213 .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } 1214 1215 .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, 1216 .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, 1217 .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } 1218 1219 .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, 1220 .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, 1221 .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } 1222 1223 .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, 1224 .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, 1225 .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } 1226 1227 .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, 1228 .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, 1229 .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } 1230 1231 1232 /* theme "inset-2", "inset-2-dark" */ 1233 1234 .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, 1235 .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ 1236 background-color: transparent; 1237 border-width: 1px; 1238 border-style: solid; 1239 border-color: #fff; 1240 border-color: rgba(255,255,255,0.2); 1241 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 1242 } 1243 1244 .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ border-color: #000; border-color: rgba(0,0,0,0.2); } 1245 1246 1247 /* theme "inset-3", "inset-3-dark" */ 1248 1249 .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); } 1250 1251 .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); } 1252 1253 .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } 1254 1255 .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } 1256 1257 .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 1258 .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } 1259 1260 .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); } 1261 1262 .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } 1263 1264 .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, 1265 .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); } 1266 1267 /* ---------------------------------------- */ 1268
