scrollbar-rails 1.0.0

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