jquery.mCustomScrollbar.css 52 KB

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