1 /*
   2     Modena
   3     
   4     This is the second generation theme for JavaFX after Caspian.
   5 */
   6 
   7 /*
   8  * Copyright (c) 2009, 2014, Oracle and/or its affiliates. All rights reserved.
   9  * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER. 
  10  *  
  11  * This code is free software; you can redistribute it and/or modify it 
  12  * under the terms of the GNU General Public License version 2 only, as 
  13  * published by the Free Software Foundation.  Oracle designates this 
  14  * particular file as subject to the "Classpath" exception as provided 
  15  * by Oracle in the LICENSE file that accompanied this code. 
  16  *  
  17  * This code is distributed in the hope that it will be useful, but WITHOUT 
  18  * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or 
  19  * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License 
  20  * version 2 for more details (a copy is included in the LICENSE file that 
  21  * accompanied this code). 
  22  *  
  23  * You should have received a copy of the GNU General Public License version 
  24  * 2 along with this work; if not, write to the Free Software Foundation, 
  25  * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA. 
  26  *  
  27  * Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA 
  28  * or visit www.oracle.com if you need additional information or have any 
  29  * questions.
  30  *                                                                              
  31  */
  32 
  33 /*******************************************************************************
  34  *                                                                             *
  35  * THEMING INSTRUCTIONS                                                       *
  36  *                                                                             *
  37  *******************************************************************************
  38 
  39 TODO: Explain here how theming works:
  40 
  41      * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
  42      * -fx-text-background-color for text on top of -fx-background
  43      * -fx-text-inner-color for text on top of -fx-control-inner-color
  44      * -fx-selection-bar-text for text on top of -fx-selection-bar
  45 
  46 RESIZING FOR DIFFERENT SCREEN DPI
  47 -------------------------------
  48 
  49 When the screen DPI changes Windows will use a different font size by default. 
  50 The default is 12px and can change to 15px or 18px depending on user 
  51 preference or screen DPI. On Mac the default is 13px and embedded will depend 
  52 on hardware. To make UI controls scale and be the right proportions for each of 
  53 these font sizes we base the padding (which controls size of control) on the 
  54 font size. This is done using the CSS measurement unit of a "em" where
  55 (1em = font size). The default sizes are based on Windows default of 12px, as
  56 a quick reference here are common px sizes in em units on windows.
  57 
  58 Windows 12px -> em units    -> Mac 13px      | 
  59 ----------------------------------------
  60      1px     -> 0.083333em  -> 1.08px ~ 2px
  61      2px     -> 0.166667em  -> 2.16px ~ 3px
  62      3px  = 0.25em
  63      4px  = 0.333333em
  64      5px  = 0.416667em
  65      6px  = 0.5em
  66      7px  = 0.583333em
  67      8px  = 0.666667em
  68      9px  = 0.75em
  69     10px  = 0.833333em
  70     11px  = 0.916667em
  71     12px  = 1em
  72 
  73 IMPORTANT: Not all sizes are scaled with em units only padding. All borders and 
  74 background insets are still in pixels. Also any padding where it has to match up
  75 is being used to size a border should also be in pixels.
  76 
  77  ******************************************************************************/
  78 
  79 /*******************************************************************************
  80  *                                                                             *
  81  * CSS Styles for core infrastructure bits.  The .root section provides the    *
  82  * overall default colors used by the rest of the sections.                    *
  83  *                                                                             *
  84  ******************************************************************************/
  85 
  86 .root {
  87     /***************************************************************************
  88      *                                                                         *
  89      * The main color palette from which the rest of the colors are derived.   *
  90      *                                                                         *
  91      **************************************************************************/
  92 
  93     /* A light grey that is the base color for objects.  Instead of using
  94      * -fx-base directly, the sections in this file will typically use -fx-color.
  95      */
  96     -fx-base: #ececec;
  97 
  98     /* A very light grey used for the background of windows.  See also
  99      * -fx-text-background-color, which should be used as the -fx-text-fill
 100      * value for text painted on top of backgrounds colored with -fx-background.
 101      */
 102     -fx-background: derive(-fx-base,26.4%);
 103 
 104     /* Used for the inside of text boxes, password boxes, lists, trees, and
 105      * tables.  See also -fx-text-inner-color, which should be used as the
 106      * -fx-text-fill value for text painted on top of backgrounds colored
 107      * with -fx-control-inner-background.
 108      */
 109     -fx-control-inner-background: derive(-fx-base,80%);
 110     /* Version of -fx-control-inner-background for alternative rows */
 111     -fx-control-inner-background-alt: derive(-fx-control-inner-background,-2%);
 112 
 113     /* One of these colors will be chosen based upon a ladder calculation
 114      * that uses the brightness of a background color.  Instead of using these
 115      * colors directly as -fx-text-fill values, the sections in this file should
 116      * use a derived color to match the background in use.  See also:
 117      *
 118      * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
 119      * -fx-text-background-color for text on top of -fx-background
 120      * -fx-text-inner-color for text on top of -fx-control-inner-color
 121      * -fx-selection-bar-text for text on top of -fx-selection-bar
 122      */
 123     -fx-dark-text-color: black;
 124     -fx-mid-text-color: #333;
 125     -fx-light-text-color: white;
 126 
 127     /* A bright blue for highlighting/accenting objects.  For example: selected
 128      * text; selected items in menus, lists, trees, and tables; progress bars */
 129     -fx-accent: #0096C9;
 130 
 131     /* Default buttons color, this is similar to accent but more subtle */
 132     -fx-default-button: #ABD8ED;
 133 
 134     /* A bright blue for the focus indicator of objects. Typically used as the
 135      * first color in -fx-background-color for the "focused" pseudo-class. Also
 136      * typically used with insets of -1.4 to provide a glowing effect.
 137      */
 138     -fx-focus-color: #039ED3;
 139     -fx-faint-focus-color: #039ED322;
 140 
 141     /* The color that is used in styling controls. The default value is based
 142      * on -fx-base, but is changed by pseudoclasses to change the base color.
 143      * For example, the "hover" pseudoclass will typically set -fx-color to
 144      * -fx-hover-base (see below) and the "armed" pseudoclass will typically
 145      * set -fx-color to -fx-pressed-base.
 146      */
 147     -fx-color: -fx-base;
 148 
 149     /* Chart Color Palette */
 150     CHART_COLOR_1: #f3622d;
 151     CHART_COLOR_2: #fba71b;
 152     CHART_COLOR_3: #57b757;
 153     CHART_COLOR_4: #41a9c9;
 154     CHART_COLOR_5: #4258c9;
 155     CHART_COLOR_6: #9a42c8;
 156     CHART_COLOR_7: #c84164;
 157     CHART_COLOR_8: #888888;
 158     /* Chart Color Palette Semi-Transparent
 159      * These are used by charts that need semi transparent versions of the above colors, such as BubbleChart. They
 160      * are exactly the same colors as above just with alpha
 161      *
 162      * 20% opacity
 163      */
 164     CHART_COLOR_1_TRANS_20: #f3622d33;
 165     CHART_COLOR_2_TRANS_20: #fba71b33;
 166     CHART_COLOR_3_TRANS_20: #57b75733;
 167     CHART_COLOR_4_TRANS_20: #41a9c933;
 168     CHART_COLOR_5_TRANS_20: #4258c933;
 169     CHART_COLOR_6_TRANS_20: #9a42c833;
 170     CHART_COLOR_7_TRANS_20: #c8416433;
 171     CHART_COLOR_8_TRANS_20: #88888833;
 172     /* 70% opacity */
 173     CHART_COLOR_1_TRANS_70: #f3622db3;
 174     CHART_COLOR_2_TRANS_70: #fba71bb3;
 175     CHART_COLOR_3_TRANS_70: #57b757b3;
 176     CHART_COLOR_4_TRANS_70: #41a9c9b3;
 177     CHART_COLOR_5_TRANS_70: #4258c9b3;
 178     CHART_COLOR_6_TRANS_70: #9a42c8b3;
 179     CHART_COLOR_7_TRANS_70: #c84164b3;
 180     CHART_COLOR_8_TRANS_70: #888888b3;
 181 
 182     /***************************************************************************
 183      *                                                                         *
 184      * Colors that are derived from the main color palette.                    *
 185      *                                                                         *
 186      **************************************************************************/
 187 
 188     /* A little lighter than -fx-base and used as the -fx-color for the
 189      * "hovered" pseudoclass state.
 190      */
 191     -fx-hover-base: ladder(
 192         -fx-base,
 193         derive(-fx-base,20%) 20%,
 194         derive(-fx-base,30%) 35%,
 195         derive(-fx-base,40%) 50%
 196      );
 197 
 198     /* A little darker than -fx-base and used as the -fx-color for the
 199      * "armed" pseudoclass state.
 200      *
 201      * TODO: should this be renamed to -fx-armed-base?
 202      */
 203     -fx-pressed-base: derive(-fx-base,-6%);
 204 
 205     /* The color to use for -fx-text-fill when text is to be painted on top of
 206      * a background filled with the -fx-background color.
 207      */
 208     -fx-text-background-color: ladder(
 209         -fx-background,
 210         -fx-light-text-color 45%,
 211         -fx-dark-text-color  46%,
 212         -fx-dark-text-color  59%,
 213         -fx-mid-text-color   60%
 214     );
 215 
 216     /* A little darker than -fx-color and used to draw boxes around objects such
 217      * as progress bars, scroll bars, scroll panes, trees, tables, and lists.
 218      */
 219     -fx-box-border: ladder(
 220         -fx-color,
 221         black 20%,
 222         derive(-fx-color,-15%) 30%
 223     );
 224 
 225     /* Darker than -fx-background and used to draw boxes around text boxes and
 226      * password boxes.
 227      */
 228     -fx-text-box-border: ladder(
 229         -fx-background,
 230         black 10%,
 231         derive(-fx-background, -15%) 30%
 232     );
 233 
 234     /* Lighter than -fx-background and used to provide a small highlight when
 235      * needed on top of -fx-background. This is never a shadow in Modena but
 236      * keep -fx-shadow-highlight-color name to be compatible with Caspian.
 237      */
 238     -fx-shadow-highlight-color: ladder(
 239         -fx-background,
 240         rgba(255,255,255,0.07) 0%,
 241         rgba(255,255,255,0.07) 20%,
 242         rgba(255,255,255,0.07) 70%,
 243         rgba(255,255,255,0.7) 90%,
 244         rgba(255,255,255,0.75) 100%
 245       );
 246 
 247     /* A gradient that goes from a little darker than -fx-color on the top to
 248      * even more darker than -fx-color on the bottom.  Typically is the second
 249      * color in the -fx-background-color list as the small thin border around
 250      * a control. It is typically the same size as the control (i.e., insets
 251      * are 0).
 252      */
 253     -fx-outer-border: derive(-fx-color,-23%);
 254 
 255     /* A gradient that goes from a bit lighter than -fx-color on the top to
 256      * a little darker at the bottom.  Typically is the third color in the
 257      * -fx-background-color list as a thin highlight inside the outer border.
 258      * Insets are typically 1.
 259      */
 260     -fx-inner-border: linear-gradient(to bottom,
 261                 ladder(
 262                     -fx-color,
 263                     derive(-fx-color,30%) 0%,
 264                     derive(-fx-color,20%) 40%,
 265                     derive(-fx-color,25%) 60%,
 266                     derive(-fx-color,55%) 80%,
 267                     derive(-fx-color,55%) 90%,
 268                     derive(-fx-color,75%) 100%
 269                 ),
 270                 ladder(
 271                     -fx-color,
 272                     derive(-fx-color,20%) 0%,
 273                     derive(-fx-color,10%) 20%,
 274                     derive(-fx-color,5%) 40%,
 275                     derive(-fx-color,-2%) 60%,
 276                     derive(-fx-color,-5%) 100%
 277                 ));
 278     -fx-inner-border-horizontal: linear-gradient(to right, derive(-fx-color,55%), derive(-fx-color,-5%));
 279     -fx-inner-border-bottomup: linear-gradient(to top, derive(-fx-color,55%), derive(-fx-color,-5%));
 280 
 281     /* A gradient that goes from a little lighter than -fx-color at the top to
 282      * a little darker than -fx-color at the bottom and is used to fill the
 283      * body of many controls such as buttons.
 284      */
 285     -fx-body-color: linear-gradient(to bottom,
 286             ladder(
 287                 -fx-color,
 288                 derive(-fx-color,8%) 75%,
 289                 derive(-fx-color,10%) 80%
 290             ),
 291             derive(-fx-color,-8%));
 292     -fx-body-color-bottomup: linear-gradient(to top, derive(-fx-color,10%) ,derive(-fx-color,-6%));
 293     -fx-body-color-to-right: linear-gradient(to right, derive(-fx-color,10%) ,derive(-fx-color,-6%));
 294 
 295     /* The color to use as -fx-text-fill when painting text on top of
 296      * backgrounds filled with -fx-base, -fx-color, and -fx-body-color.
 297      */
 298     -fx-text-base-color: ladder(
 299         -fx-color,
 300         -fx-light-text-color 45%,
 301         -fx-dark-text-color  46%,
 302         -fx-dark-text-color  59%,
 303         -fx-mid-text-color   60%
 304     );
 305 
 306     /* The color to use as -fx-text-fill when painting text on top of
 307      * backgrounds filled with -fx-control-inner-background.
 308      */
 309     -fx-text-inner-color: ladder(
 310         -fx-control-inner-background,
 311         -fx-light-text-color 45%,
 312         -fx-dark-text-color  46%,
 313         -fx-dark-text-color  59%,
 314         -fx-mid-text-color   60%
 315     );
 316 
 317     /* The color to use for small mark-like objects such as checks on check
 318      * boxes, filled in circles in radio buttons, arrows on scroll bars, etc.
 319      */
 320     -fx-mark-color: ladder(
 321         -fx-color,
 322         white 30%,
 323         derive(-fx-color,-63%) 31%
 324     );
 325 
 326     /* The small thin light "shadow" for mark-like objects. Typically used in
 327      * conjunction with -fx-mark-color with an insets of 1 0 -1 0. */
 328     -fx-mark-highlight-color: ladder(
 329         -fx-color,
 330         derive(-fx-color,80%) 60%,
 331         white 70%
 332     );
 333 
 334     /* Background for items in list like things such as menus, lists, trees,
 335      * and tables. */
 336     -fx-selection-bar: -fx-accent;
 337 
 338     /* Background color to use for selection of list cells etc. This is when
 339      * the control doesn't have focus or the row of a previously selected item. */
 340     -fx-selection-bar-non-focused: lightgrey;
 341 
 342     /* The color to use as -fx-text-fill when painting text on top of
 343      * backgrounds filled with -fx-selection-bar.
 344      *
 345      * TODO: this can be removed
 346      */
 347     -fx-selection-bar-text: -fx-text-background-color;
 348 
 349     /* These are needed for Popup */
 350     -fx-background-color: inherit;
 351     -fx-background-radius: inherit;
 352     -fx-background-insets: inherit;
 353     -fx-padding: inherit;
 354 
 355     /* The color to use in ListView/TreeView/TableView to indicate hover. */
 356     -fx-cell-hover-color: #cce3f4;
 357 
 358     /** Focus line for keyboard focus traversal on cell based controls */
 359     -fx-cell-focus-inner-border: derive(-fx-selection-bar,30%);
 360 
 361     /* The colors to use in Pagination */
 362     -fx-page-bullet-border: #acacac;
 363     -fx-page-indicator-hover-border: #accee5;
 364 
 365     -fx-focused-text-base-color : ladder(
 366         -fx-selection-bar,
 367         -fx-light-text-color 45%,
 368         -fx-dark-text-color 46%,
 369         -fx-dark-text-color 59%,
 370         -fx-mid-text-color 60%
 371     );
 372     -fx-focused-mark-color : -fx-focused-text-base-color ;
 373 
 374     /***************************************************************************
 375      *                                                                         *
 376      * Set the default background color for the scene                          *
 377      *                                                                         *
 378      **************************************************************************/
 379 
 380     -fx-background-color: -fx-background;
 381 }
 382 
 383 /* Make popups transparent */
 384 .root.popup {
 385     -fx-background-color: transparent;
 386 }
 387 
 388 /*******************************************************************************
 389  *                                                                             *
 390  * Common Styles                                                               *
 391  *                                                                             *
 392  * These are styles that give a standard look to a whole range of controls     *
 393  *                                                                             *
 394  ******************************************************************************/
 395 
 396 /* ====   TEXT NODES IN CONTROLS   ========================================== */
 397 
 398 .text {
 399     /* This adjusts text alignment within the bounds of text nodes so that
 400        the text is always vertically centered within the bounds. Based on
 401        the cap height of the text. */
 402     -fx-bounds-type: logical_vertical_center;
 403     /* Enable LCD text rendering */
 404     -fx-font-smoothing-type: lcd;
 405 }
 406 
 407 /* ====   BUTTON LIKE THINGS   ============================================== */
 408 
 409 .button,
 410 .toggle-button,
 411 .radio-button > .radio,
 412 .check-box > .box,
 413 .menu-button,
 414 .choice-box,
 415 .color-picker.split-button > .color-picker-label,
 416 .combo-box-base,
 417 .combo-box-base:editable > .arrow-button {
 418     -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
 419     -fx-background-insets: 0 0 -1 0, 0, 1, 2;
 420     -fx-background-radius: 3px, 3px, 2px, 1px;
 421     -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
 422     -fx-text-fill: -fx-text-base-color;
 423     -fx-alignment: CENTER;
 424     -fx-content-display: LEFT;
 425 }
 426 .menu-button > .label {
 427     -fx-alignment: CENTER_LEFT;
 428 }
 429 .button:hover,
 430 .toggle-button:hover,
 431 .radio-button:hover > .radio,
 432 .check-box:hover > .box,
 433 .menu-button:hover,
 434 .split-menu-button > .label:hover,
 435 .split-menu-button > .arrow-button:hover,
 436 .slider .thumb:hover,
 437 .scroll-bar > .thumb:hover,
 438 .scroll-bar > .increment-button:hover, 
 439 .scroll-bar > .decrement-button:hover,
 440 .choice-box:hover,
 441 .color-picker.split-button > .arrow-button:hover,
 442 .color-picker.split-button > .color-picker-label:hover,
 443 .combo-box-base:hover,
 444 .combo-box-base:editable > .arrow-button:hover,
 445 .spinner .increment-arrow-button:hover,
 446 .spinner .decrement-arrow-button:hover,
 447 .tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:hover {
 448     -fx-color: -fx-hover-base;
 449 }
 450 .button:armed,
 451 .toggle-button:armed,
 452 .radio-button:armed > .radio,
 453 .check-box:armed .box,
 454 .menu-button:armed,
 455 .split-menu-button:armed > .label,
 456 .split-menu-button > .arrow-button:pressed,
 457 .split-menu-button:showing > .arrow-button,
 458 .slider .thumb:pressed,
 459 .scroll-bar > .thumb:pressed,
 460 .scroll-bar > .increment-button:pressed,
 461 .scroll-bar > .decrement-button:pressed,
 462 .choice-box:showing,
 463 .combo-box-base:showing,
 464 .combo-box-base:editable:showing > .arrow-button,
 465 .spinner .increment-arrow-button:pressed,
 466 .spinner .decrement-arrow-button:pressed,
 467 .tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:pressed {
 468     -fx-color: -fx-pressed-base;
 469 }
 470 .button:focused,
 471 .toggle-button:focused,
 472 .radio-button:focused > .radio,
 473 .check-box:focused > .box,
 474 .menu-button:focused,
 475 .choice-box:focused,
 476 .color-picker.split-button:focused > .color-picker-label,
 477 .combo-box-base:focused,
 478 .slider:focused .thumb {
 479     -fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
 480     -fx-background-insets: -0.2, 1, 2, -1.4, 2.6;
 481     -fx-background-radius: 3, 2, 1, 4, 1;
 482 }
 483 
 484 /* ====   DISABLED THINGS   ================================================= */
 485 
 486 .label:disabled,
 487 .button:disabled,
 488 .toggle-button:disabled,
 489 .radio-button:disabled,
 490 .check-box:disabled,
 491 .hyperlink:disabled,
 492 .menu-button:disabled,
 493 .split-menu-button:disabled,
 494 .slider:disabled,
 495 .scroll-bar:disabled,
 496 .scroll-pane:disabled,
 497 .progress-bar:disabled,
 498 .progress-indicator:disabled,
 499 .text-input:disabled,
 500 .choice-box:disabled,
 501 .combo-box-base:disabled,
 502 .date-cell:disabled > *, /* This is set on children so border is not affected. */
 503 .list-view:disabled,
 504 .tree-view:disabled,
 505 .table-view:disabled,
 506 .tree-table-view:disabled,
 507 .tab-pane:disabled,
 508 .titled-pane:disabled > .title,
 509 .accordion:disabled > .titled-pane > .title,
 510 .tab-pane > .tab-header-area > .headers-region > .tab:disabled,
 511 .menu:disabled,
 512 .menu-item:disabled > .label,
 513 .menu-item:disabled,
 514 .list-cell:filled:selected:focused:disabled,
 515 .list-cell:filled:selected:disabled,
 516 .tree-cell:filled:selected:focused:disabled,
 517 .tree-cell:filled:selected:disabled,
 518 .tree-cell > .tree-disclosure-node:disabled,
 519 .tree-table-row-cell > .tree-disclosure-node:disabled,
 520 .table-row-cell:selected:disabled,
 521 .tree-table-row-cell:selected:disabled,
 522 .table-cell:selected:disabled,
 523 .tree-table-cell:selected:disabled,
 524 .spinner:disabled {
 525     -fx-opacity: 0.4;
 526 }
 527 
 528 /* ====   MNEMONIC THINGS   ================================================= */
 529 
 530 .mnemonic-underline {
 531     -fx-stroke: transparent;
 532 }
 533 
 534 .titled-pane:show-mnemonics > .mnemonic-underline,
 535 .label:show-mnemonics > .mnemonic-underline,
 536 .context-menu:show-mnemonics > .mnemonic-underline,
 537 .menu:show-mnemonics > .mnemonic-underline,
 538 .menu-bar:show-mnemonics > .mnemonic-underline,
 539 .menu-item:show-mnemonics > .mnemonic-underline,
 540 .button:show-mnemonics > .mnemonic-underline,
 541 .toggle-button:show-mnemonics > .mnemonic-underline,
 542 .radio-button:show-mnemonics > .mnemonic-underline,
 543 .check-box:show-mnemonics > .mnemonic-underline,
 544 .hyperlink:show-mnemonics > .mnemonic-underline,
 545 .split-menu-button:show-mnemonics > .mnemonic-underline,
 546 .menu-button:show-mnemonics > .mnemonic-underline {
 547     -fx-stroke: -fx-text-base-color;
 548 } 
 549 
 550 /* ====   MARKS   =========================================================== */
 551 
 552 .radio-button:selected > .radio > .dot,
 553 .check-box:selected > .box > .mark,
 554 .check-box:indeterminate  > .box > .mark {
 555     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
 556     -fx-background-insets: 1 0 -1 0, 0;
 557 }
 558 
 559 /* ====   ARROWS   ========================================================== */
 560 
 561 .menu-button > .arrow-button > .arrow,
 562 .split-menu-button > .arrow-button > .arrow {
 563     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
 564     -fx-background-insets: 0 0 -1 0, 0;
 565     -fx-padding: 0.25em;
 566     -fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z";
 567 }
 568 .choice-box > .open-button > .arrow,
 569 .menu-button:openvertically > .arrow-button > .arrow,
 570 .split-menu-button:openvertically > .arrow-button > .arrow,
 571 .combo-box-base > .arrow-button > .arrow,
 572 .web-view .form-select-button .arrow,
 573 .tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button > .arrow  {
 574     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
 575     -fx-background-insets: 0 0 -1 0, 0;
 576     -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
 577     -fx-shape: "M 0 0 h 7 l -3.5 4 z";
 578 }
 579 
 580 /* ====   CHOICE BOX LIKE THINGS   ========================================== */
 581 
 582 .choice-box,
 583 .menu-button,
 584 .combo-box-base {
 585     -fx-padding: 0;
 586 }
 587 .choice-box > .label,
 588 .menu-button > .label,
 589 .color-picker > .label {
 590     -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
 591     -fx-text-fill: -fx-text-base-color;
 592 }
 593 .choice-box > .open-button,
 594 .menu-button > .arrow-button {
 595     -fx-padding: 0.5em 0.667em 0.5em 0.0em; /* 6 8 6 0 */
 596 }
 597 
 598 /* ====   BOX LIKE THINGS   ================================================= */
 599 
 600 .scroll-pane,
 601 .split-pane,
 602 .list-view,
 603 .tree-view,
 604 .table-view, 
 605 .tree-table-view,
 606 .html-editor {
 607     -fx-background-color: -fx-box-border, -fx-control-inner-background;
 608     -fx-background-insets: 0, 1;
 609     -fx-padding: 1;
 610 }
 611 .scroll-pane:focused,
 612 .split-pane:focused,
 613 .list-view:focused,
 614 .tree-view:focused,
 615 .table-view:focused,
 616 .tree-table-view:focused,
 617 .html-editor:contains-focus {
 618     -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-control-inner-background; 
 619     -fx-background-insets: -1.4, -0.3, 1;
 620     -fx-background-radius: 2, 0, 0;
 621 }
 622 /* ones with grey -fx-background not lighter -fx-control-inner-background */
 623 .scroll-pane,
 624 .split-pane {
 625     -fx-background-color: -fx-box-border, -fx-background;
 626 }
 627 .scroll-pane:focused,
 628 .split-pane:focused {
 629     -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-background; 
 630 }
 631 
 632 /*******************************************************************************
 633  *                                                                             *
 634  * Label                                                                       *
 635  *                                                                             *
 636  ******************************************************************************/
 637 
 638 .label {
 639     -fx-text-fill: -fx-text-background-color;
 640 }
 641 
 642 /*******************************************************************************
 643  *                                                                             *
 644  * Button & ToggleButton                                                       *
 645  *                                                                             *
 646  ******************************************************************************/
 647 
 648 /* ====   DEFAULT   ========================================================= */
 649 
 650 .button:default {
 651     -fx-base: -fx-default-button;
 652 }
 653 
 654 /* ====   WEB BUTTONS   ===================================================== */
 655 
 656 .web-view .form-select-button {
 657     -fx-background-radius: 2, 2, 1, 0;
 658     -fx-background-insets: 2 2 1 2, 2, 3, 4;
 659 }
 660 
 661 /* ====   PILL BUTTONS   ==================================================== */
 662 
 663 .button.left-pill,
 664 .toggle-button.left-pill {
 665     -fx-background-radius: 3 0 0 3, 3 0 0 3, 2 0 0 2, 1 0 0 1;
 666     -fx-background-insets: 0 0 -1 0, 0, 1, 2;
 667     -fx-padding: 0.333333em 0.666667em 0.333333em 0.75em; /* 4 8 4 9 */
 668 }
 669 .button.center-pill,
 670 .toggle-button.center-pill {
 671     -fx-background-radius: 0;
 672     -fx-background-insets: 0 0 -1 0, 0 0 0 0, 1 1 1 0, 2 2 2 1 ;
 673 }
 674 .button.right-pill,
 675 .toggle-button.right-pill {
 676     -fx-background-radius: 0 3 3 0, 0 3 3 0, 0 2 2 0, 0 1 1 0;
 677     -fx-background-insets: 0 0 -1 0, 0, 1 1 1 0, 2 2 2 1 ;
 678 }
 679 .button.left-pill:focused,
 680 .toggle-button.left-pill:focused {
 681     -fx-background-insets: -0.2 0 -0.2 -0.2, 1, 2, -1.4 0 -1.4 -1.4, 2.6;
 682     -fx-background-radius: 3 0 0 3, 2 0 0 2, 1 0 0 1, 4 0 0 4, 1 0 0 1;
 683 }
 684 .button.center-pill:focused,
 685 .toggle-button.center-pill:focused {
 686     -fx-background-insets: -0.2 0 -0.2 -1, 1 1 1 0, 2 2 2 1, -1.4 0 -1.4 -1, 2.6 2.6 2.6 1.6;
 687     -fx-background-radius: 0, 0, 0, 0, 0;
 688 }
 689 .button.right-pill:focused,
 690 .toggle-button.right-pill:focused {
 691     -fx-background-insets: -0.2 -0.2 -0.2 -1, 1 1 1 0, 2 2 2 1, -1.4 -1.4 -1.4 -1, 2.6 2.6 2.6 1.6;
 692     -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0, 0 4 4 0, 0 1 1 0;
 693 }
 694 .toggle-button:selected.left-pill:focused {
 695     -fx-background-insets: -0.2 0 -0.2 -0.2, 1, -1.4 0 -1.4 -1.4, 2.6;
 696     -fx-background-radius: 3 0 0 3, 2 0 0 2, 4 0 0 4, 0;
 697 }
 698 .toggle-button:selected.center-pill:focused {
 699     -fx-background-insets: -0.2 0 -0.2 -1, 1 1 1 0, -1.4 0 -1.4 -1, 2.6 2.6 2.6 1.6;
 700     -fx-background-radius: 0, 0, 0, 0;
 701 }
 702 .toggle-button:selected.right-pill:focused {
 703     -fx-background-insets: -0.2 -0.2 -0.2 -1, 1 1 1 0, -1.4 -1.4 -1.4 -1, 2.6 2.6 2.6 1.6;
 704     -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 4 4 0, 0;
 705 }
 706 
 707 /* ====   SELECTED TOGGLE   ================================================= */
 708 
 709 .toggle-button:selected {
 710         -fx-background-color:
 711             -fx-shadow-highlight-color,
 712             linear-gradient(to bottom, derive(-fx-outer-border, -20%), -fx-outer-border),
 713             linear-gradient(to bottom, 
 714                     derive(-fx-color, -22%) 0%,
 715                     derive(-fx-color, -13%) 20%,
 716                     derive(-fx-color, -11%) 50%);
 717     -fx-background-insets: 0 0 -1 0, 0, 1;
 718 }
 719 .toggle-button:selected:focused {
 720     -fx-background-color:
 721         -fx-focus-color,
 722         linear-gradient(to bottom,
 723             derive(-fx-color, -22%) 0%,
 724             derive(-fx-color, -13%) 20%,
 725             derive(-fx-color, -11%) 50%),
 726         -fx-faint-focus-color,
 727         linear-gradient(to bottom,
 728             derive(-fx-color, -22%) 0%,
 729             derive(-fx-color, -13%) 20%,
 730             derive(-fx-color, -11%) 50%);
 731     -fx-background-insets: -0.2, 1, -1.4, 2.6;
 732     -fx-background-radius: 3, 2, 4, 0;
 733 }
 734 
 735 /*******************************************************************************
 736  *                                                                             *
 737  * RadioButton                                                                 *
 738  *                                                                             *
 739  ******************************************************************************/
 740 
 741 .radio-button {
 742     -fx-label-padding: 0.0em 0.0em 0.0em 0.416667em; /* 0 0 0 5 */
 743     -fx-text-fill: -fx-text-background-color;
 744 }
 745 .radio-button > .radio,
 746 .radio-button:focused > .radio  {
 747    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
 748    -fx-padding: 0.333333em; /* 4 -- padding from outside edge to the inner black dot */
 749 }
 750 .radio-button > .radio > .dot {
 751    -fx-background-color: transparent;
 752    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
 753    -fx-padding: 0.333333em; /* 4 -- radius of the inner black dot when selected */
 754 }
 755 
 756 /*******************************************************************************
 757  *                                                                             *
 758  * CheckBox                                                                    *
 759  *                                                                             *
 760  ******************************************************************************/
 761 
 762 .check-box {
 763     -fx-label-padding: 0.0em 0.0em 0.0em 0.416667em; /* 0 0 0 5 */
 764     -fx-text-fill: -fx-text-background-color;
 765 }
 766 .check-box > .box {
 767     -fx-background-radius: 3, 2, 1;
 768     -fx-padding: 0.166667em 0.166667em 0.25em 0.25em; /* 2 2 3 3 */
 769 }
 770 .check-box > .box > .mark {
 771     -fx-background-color: null;
 772     -fx-padding: 0.416667em 0.416667em 0.5em 0.5em; /* 5 5 6 6 */
 773     -fx-shape: "M-0.25,6.083c0.843-0.758,4.583,4.833,5.75,4.833S14.5-1.5,15.917-0.917c1.292,0.532-8.75,17.083-10.5,17.083C3,16.167-1.083,6.833-0.25,6.083z";
 774 }
 775 .check-box:indeterminate > .box {
 776     -fx-padding: 0; 
 777 }
 778 .check-box:indeterminate  > .box > .mark {
 779     -fx-shape: "M0,0H10V2H0Z";
 780     -fx-scale-shape: false;
 781     -fx-padding: 0.666667em; /* 16x16 = 8+8 */
 782 }
 783 
 784 /*******************************************************************************
 785  *                                                                             *
 786  * Hyperlink                                                                   *
 787  *                                                                             *
 788  ******************************************************************************/
 789 
 790 .hyperlink {
 791     -fx-padding: 0.166667em 0.25em 0.166667em 0.25em; /* 2 3 2 3 */
 792     -fx-cursor: hand;
 793     -fx-content-display: LEFT;
 794     -fx-border-color: transparent;
 795     -fx-border-width: 1px;
 796 }
 797 .hyperlink,
 798 .hyperlink:hover,
 799 .hyperlink:hover:visited {
 800     -fx-text-fill: -fx-accent;
 801 }
 802 .hyperlink:armed,
 803 .hyperlink:visited,
 804 .hyperlink:hover:armed {
 805     -fx-text-fill: -fx-text-background-color;
 806 }
 807 .hyperlink:hover,
 808 .hyperlink:visited,
 809 .hyperlink:hover:visited {
 810     -fx-underline: true;
 811 }
 812 .hyperlink:visited:armed {
 813     -fx-underline: false;
 814 }
 815 .hyperlink:focused {
 816     -fx-border-color: -fx-focus-color;
 817     -fx-border-style: segments(0.166667em, 0.166667em);
 818     -fx-border-width: 1px;
 819 }
 820 .hyperlink:show-mnemonics > .mnemonic-underline {
 821     -fx-stroke: -fx-text-fill;
 822 }
 823 
 824 /* Fix for RT-37971 */
 825 .cell:selected .hyperlink,
 826 .cell:selected .hyperlink:hover,
 827 .cell:selected .hyperlink:hover:visited {
 828     -fx-text-fill: -fx-text-background-color;
 829 }
 830 
 831 /*******************************************************************************
 832  *                                                                             *
 833  * SplitMenuButton                                                             *
 834  *                                                                             *
 835  ******************************************************************************/
 836 
 837 .split-menu-button {
 838     -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border; 
 839     -fx-background-insets: 0 0 -1 0, 0;
 840     -fx-background-radius: 3, 3;
 841     -fx-padding: 0;
 842 }
 843 .split-menu-button > .label {
 844     -fx-text-fill: -fx-text-base-color;
 845     -fx-background-color: -fx-inner-border, -fx-body-color; 
 846     -fx-background-insets: 1 0 1 1, 2 1 2 2;
 847     -fx-background-radius: 2 0 0 2, 1 0 0 1;
 848     -fx-padding: 0.333333em 0.667em 0.333333em 0.667em; /* 4 8 4 8 */
 849 }
 850 .split-menu-button > .arrow-button {
 851     -fx-background-color: -fx-inner-border, -fx-body-color; 
 852     -fx-background-insets: 1, 2;
 853     -fx-background-radius: 0 2 2 0, 0 1 1 0;
 854     -fx-padding: 0.5em 0.667em 0.5em 0.667em; /* 6 8 6 8 */
 855 }
 856 .split-menu-button:focused {
 857     -fx-background-color: -fx-focus-color;
 858     -fx-background-insets: -0.2;
 859     -fx-background-radius: 3;
 860 }
 861 .split-menu-button:focused > .label {
 862     -fx-background-color: -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color; 
 863     -fx-background-insets: 1 0 1 1, 2 1 2 2, -1.4 0 -1.4 -1.4, 2.6 1.6 2.6 2.6;
 864     -fx-background-radius: 2 0 0 2, 1 0 0 1, 4 0 0 4, 0;
 865 }
 866 .split-menu-button:focused > .arrow-button {
 867     -fx-background-color: -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color; 
 868     -fx-background-insets: 1, 2, -1.4, 2.6;
 869     -fx-background-radius: 0 2 2 0, 0 1 1 0, 0 4 4 0, 0;
 870 }
 871 
 872 /*******************************************************************************
 873  *                                                                             *
 874  * ToolBar                                                                     *
 875  *                                                                             *
 876  ******************************************************************************/
 877 
 878 .tool-bar:vertical { /* left */
 879     -fx-background-color:
 880         -fx-outer-border,
 881         linear-gradient(to right, derive(-fx-base,0%) 0%, derive(-fx-base,10%) 50%, derive(-fx-base,0%) 100%);
 882     -fx-background-insets: 0, 0 0 0 1;
 883     -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */
 884     -fx-spacing: 0.333em; /* 4 */
 885     -fx-alignment: TOP_LEFT;
 886 }
 887 .tool-bar { /* top */
 888     TOP-COLOR: ladder(
 889         -fx-base,
 890         derive(-fx-base,0%) 0%,
 891         derive(-fx-base,46%) 100%
 892     );
 893     -fx-background-color:
 894         linear-gradient(to bottom, derive(TOP-COLOR,25%) 0%, -fx-outer-border 90%),
 895         linear-gradient(to bottom, TOP-COLOR 2%, derive(-fx-base,-2.1%) 95%);
 896     -fx-background-insets: 0 0 0 0, 1 0 1 0;
 897     -fx-padding: 0.416667em 0.5em 0.416667em 0.5em; /* 5 6  5 6 */
 898     -fx-spacing: 0.333em; /* 4 */
 899     -fx-alignment: CENTER_LEFT;
 900 }
 901 .tool-bar:vertical.right {
 902     -fx-background-insets: 0, 0 1 0 0;
 903 }
 904 .tool-bar.bottom {
 905     -fx-background-color:
 906         -fx-outer-border,
 907         derive(TOP-COLOR,25%),
 908         linear-gradient(to bottom, TOP-COLOR 2%, derive(-fx-base,-2.1%) 95%);
 909     -fx-background-insets: 0, 1 0 0 0, 2 0 0 0;
 910 }
 911 .tool-bar > .container > .separator {
 912     -fx-orientation: vertical;
 913 }
 914 .tool-bar:vertical > .container > .separator {
 915     -fx-orientation: horizontal;    
 916 }
 917 .tool-bar-overflow-button {
 918     -fx-padding: 0 0.75em 0 0 ;
 919 }
 920 .tool-bar:vertical > .tool-bar-overflow-button {
 921     -fx-padding: 0 0 0.75em 0 ;
 922 }
 923 .tool-bar-overflow-button > .arrow {
 924     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
 925     -fx-background-insets: 1 0 -1 0, 0;
 926     -fx-padding: 0.666667em 0.916667em 0em 0em; /* 8 11 0 0 */
 927     -fx-shape: "M337.273,297.622l-0.016,1.069l2.724,2.639l-2.723,2.628l0.015,1.048h0.881l3.81-3.685l-3.788-3.699H337.273z M343.783,297.622h-0.902l-0.015,1.069l2.724,2.639l-2.724,2.628l0.015,1.048h0.882l3.809-3.685L343.783,297.622z" ;
 928 }
 929 
 930 .tool-bar-overflow-button:focused > .arrow {
 931     -fx-background-color: -fx-mark-highlight-color, derive(-fx-accent, -15%);
 932     -fx-background-insets: 1 0 -1 0, 0;
 933 }
 934 
 935 .tool-bar-overflow-button:hover > .arrow {
 936     -fx-background-color: -fx-mark-highlight-color, derive(-fx-hover-base, -35%);
 937     -fx-background-insets: 1 0 -1 0, 0;
 938 }
 939 
 940 /*******************************************************************************
 941  *                                                                             *
 942  * Slider                                                                      *
 943  *                                                                             *
 944  ******************************************************************************/
 945 
 946 .slider .thumb {
 947     -fx-background-color: 
 948         linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),
 949         -fx-inner-border,
 950         -fx-body-color;
 951     -fx-background-insets: 0, 1, 2;
 952     -fx-background-radius: 1.0em; /* makes sure this remains circular */
 953     -fx-padding: 0.583333em;  /* 7 */
 954     -fx-effect: dropshadow(two-pass-box , rgba(0, 0, 0, 0.1), 5, 0.0 , 0, 2);
 955 }
 956 .slider:focused .thumb {
 957     -fx-background-radius: 1.0em; /* makes sure this remains circular */
 958 }
 959 .slider .track {
 960       -fx-background-color: 
 961           -fx-shadow-highlight-color,
 962           linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
 963           linear-gradient(to bottom, 
 964             derive(-fx-control-inner-background, -9%),
 965             derive(-fx-control-inner-background, 0%),
 966             derive(-fx-control-inner-background, -5%),
 967             derive(-fx-control-inner-background, -12%)
 968           );
 969     -fx-background-insets: 0 0 -1 0, 0, 1;
 970     -fx-background-radius: 0.25em, 0.25em, 0.166667em; /* 3 3 2 */
 971     -fx-padding: 0.25em; /* 3 */
 972 }
 973 .slider:vertical .track {
 974     -fx-background-color: 
 975           -fx-shadow-highlight-color,
 976           -fx-text-box-border,
 977           linear-gradient(to right, 
 978             derive(-fx-control-inner-background, -9%),
 979             -fx-control-inner-background,
 980             derive(-fx-control-inner-background, -9%)
 981           );
 982 }
 983 .slider .axis {
 984     -fx-tick-label-fill: derive(-fx-text-background-color, 30%);
 985     -fx-tick-length: 5px;
 986     -fx-minor-tick-length: 3px;
 987     -fx-border-color: null;
 988 }
 989 
 990 /*******************************************************************************
 991  *                                                                             *
 992  * ScrollBar                                                                   *
 993  *                                                                             *
 994  ******************************************************************************/
 995 
 996 .scroll-bar:horizontal {
 997     -fx-background-color: derive(-fx-box-border,30%), linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
 998     -fx-background-insets: 0, 1 0 1 0;
 999 }
1000 .scroll-bar:vertical {
1001     -fx-background-color: derive(-fx-box-border,30%), linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
1002     -fx-background-insets: 0, 0 1 0 1;
1003 }
1004 .scroll-bar:focused {
1005     -fx-background-color: 
1006         -fx-focus-color,
1007         linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%)),
1008         -fx-faint-focus-color,
1009         linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
1010     -fx-background-insets: -0.2, 1, -1.4, 2.6;
1011 }
1012 .scroll-bar:vertical:focused {
1013     -fx-background-color: 
1014         -fx-focus-color,
1015         linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%)),
1016         -fx-faint-focus-color,
1017         linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
1018 }
1019 .scroll-bar > .thumb {
1020     -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; 
1021     /*-fx-background-insets: 1, 2, 3;*/
1022     -fx-background-insets: 2, 3, 4;
1023     /*-fx-background-radius: 0.416667em, 0.333333em, 0.25em; *//* 5, 4,3 */
1024     -fx-background-radius: 3, 2, 1;
1025 }
1026 .scroll-bar:vertical > .thumb {
1027     -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color-to-right; 
1028 }
1029 .scroll-bar > .increment-button, 
1030 .scroll-bar > .decrement-button {
1031     -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;     
1032     -fx-color: transparent;
1033     -fx-padding: 0.25em; /* 3px */
1034 }
1035 .scroll-bar:horizontal > .increment-button,
1036 .scroll-bar:horizontal > .decrement-button {
1037     -fx-background-insets: 2 1 2 1, 3 2 3 2, 4 3 4 3;
1038 }
1039 .scroll-bar:vertical > .increment-button,
1040 .scroll-bar:vertical > .decrement-button {
1041     -fx-background-insets: 1 2 1 2, 2 3 2 3, 3 4 3 4;
1042 }
1043 .scroll-bar > .increment-button > .increment-arrow,
1044 .scroll-bar > .decrement-button > .decrement-arrow {
1045     -fx-background-color: -fx-mark-highlight-color,derive(-fx-base,-45%);
1046 }
1047 .scroll-bar > .increment-button:hover > .increment-arrow,
1048 .scroll-bar > .decrement-button:hover > .decrement-arrow {
1049     -fx-background-color: -fx-mark-highlight-color,derive(-fx-base,-50%);
1050 }
1051 .scroll-bar > .increment-button:pressed > .increment-arrow,
1052 .scroll-bar > .decrement-button:pressed > .decrement-arrow {
1053     -fx-background-color: -fx-mark-highlight-color,derive(-fx-base,-55%);
1054 }
1055 .scroll-bar:horizontal > .decrement-button > .decrement-arrow {
1056     -fx-padding: 0.333em 0.167em 0.333em 0.167em; /* 4 2 4 2 */
1057     -fx-shape: "M5.997,5.072L5.995,6.501l-2.998-4l2.998-4l0.002,1.43l-1.976,2.57L5.997,5.072z";
1058     -fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
1059     /*-fx-background-insets: 2 0 -2 0, 0;*/
1060 }
1061 .scroll-bar:horizontal > .increment-button > .increment-arrow {
1062     -fx-padding: 0.333em 0.167em 0.333em 0.167em; /* 4 2 4 2 */
1063     -fx-shape: "M2.998-0.07L3-1.499l2.998,4L3,6.501l-0.002-1.43l1.976-2.57L2.998-0.07z";
1064     -fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
1065     /*-fx-background-insets: 2 0 -2 0, 0;*/
1066 }
1067 .scroll-bar:vertical > .decrement-button > .decrement-arrow {
1068     -fx-padding: 0.167em 0.333em 0.167em 0.333em; /* 2 4 2 4 */
1069     -fx-shape: "M1.929,4L0.5,3.998L4.5,1l4,2.998L7.07,4L4.5,2.024L1.929,4z";
1070     -fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
1071     /*-fx-background-insets: 2 0 -2 0, 0;*/
1072 }
1073 .scroll-bar:vertical > .increment-button > .increment-arrow {
1074     -fx-padding: 0.167em 0.333em 0.167em 0.333em; /* 2 4 2 4 */
1075     -fx-shape: "M7.071,1L8.5,1.002L4.5,4l-4-2.998L1.93,1L4.5,2.976L7.071,1z";
1076     -fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
1077     /*-fx-background-insets: 2 0 -2 0, 0;*/
1078 }
1079 
1080 /*******************************************************************************
1081  *                                                                             *
1082  * ScrollPane                                                                  *
1083  *                                                                             *
1084  ******************************************************************************/
1085 .scroll-pane > .viewport {
1086     -fx-background-color: -fx-background;
1087 }
1088 .scroll-pane > .scroll-bar:horizontal {
1089     -fx-background-insets: 0 1 1 1, 1;
1090     -fx-padding: 0 1 0 1;
1091 }
1092 .scroll-pane > .scroll-bar:horizontal > .increment-button,
1093 .scroll-pane > .scroll-bar:horizontal > .decrement-button {
1094     -fx-padding: 0.166667em 0.25em 0.25em  0.25em; /* 2 3 3 3 */
1095 }
1096 .scroll-pane > .scroll-bar:vertical > .increment-button,
1097 .scroll-pane > .scroll-bar:vertical > .decrement-button {
1098     -fx-padding: 0.25em 0.25em 0.25em 0.166667em; /* 3 3 3 2 */
1099 }
1100 .scroll-pane > .scroll-bar:vertical {
1101     -fx-background-insets: 1 1 1 0, 1;
1102     -fx-padding: 1 0 1 0;
1103 }
1104 .scroll-pane > .corner {
1105     -fx-background-color: derive(-fx-base,-1%);
1106     -fx-background-insets: 0 1 1 0;
1107 }
1108 /* new styleclass for edge to edge scrollpanes that don't want to draw a border */
1109 .scroll-pane.edge-to-edge,
1110 .tab-pane > * > .scroll-pane {
1111     -fx-background-color: -fx-background;
1112     -fx-background-insets: 0;
1113     -fx-padding: 0;
1114 }
1115 .scroll-pane.edge-to-edge > .scroll-bar,
1116 .tab-pane > * > .scroll-pane > .scroll-bar,
1117 .titled-pane > .content > .scroll-pane > .scroll-bar {
1118     -fx-background-insets: 0;
1119     -fx-padding: 0;
1120 }
1121 .scroll-pane.edge-to-edge > .scroll-bar > .increment-button, 
1122 .scroll-pane.edge-to-edge > .scroll-bar > .decrement-button,
1123 .tab-pane > * > .scroll-pane > .scroll-bar > .increment-button, 
1124 .tab-pane > * > .scroll-pane > .scroll-bar > .decrement-button,
1125 .titled-pane > .content > .scroll-pane > .scroll-bar > .increment-button,
1126 .titled-pane > .content > .scroll-pane > .scroll-bar > .decrement-button {
1127     -fx-padding: 0.25em; /* 3px */
1128 }
1129 
1130 /*******************************************************************************
1131  *                                                                             *
1132  * Separator                                                                   *
1133  *                                                                             *
1134  ******************************************************************************/
1135 
1136 .separator:horizontal .line {
1137     -fx-border-color: -fx-text-box-border transparent transparent transparent,
1138         -fx-shadow-highlight-color transparent transparent transparent;
1139     -fx-border-insets: 0, 1 0 0 0;
1140 }
1141 .separator:vertical .line {
1142     -fx-border-color: transparent transparent transparent -fx-shadow-highlight-color,
1143         transparent transparent transparent -fx-text-box-border;
1144     -fx-border-width: 3, 1;
1145     -fx-border-insets: 0, 0 0 0 1;
1146 }
1147 
1148 /*******************************************************************************
1149  *                                                                             *
1150  * ProgressBar                                                                 *
1151  *                                                                             *
1152  ******************************************************************************/
1153 
1154 .progress-bar {
1155     -fx-indeterminate-bar-length: 60;
1156     -fx-indeterminate-bar-escape: true;
1157     -fx-indeterminate-bar-flip: true;
1158     -fx-indeterminate-bar-animation-time: 2;
1159 }
1160 .progress-bar > .bar {
1161     -fx-background-color: linear-gradient(to bottom, derive(-fx-accent, -7%), derive(-fx-accent, 0%), derive(-fx-accent, -3%), derive(-fx-accent, -9%) );
1162     -fx-background-insets: 3 3 4 3;
1163     /*-fx-background-radius: 0.583em; *//* 7 */
1164     -fx-background-radius: 2;
1165     -fx-padding: 0.75em;
1166 }
1167 .progress-bar:indeterminate > .bar {
1168     -fx-background-color: linear-gradient(to left, transparent, -fx-accent);
1169 }
1170 .progress-bar > .track {
1171       -fx-background-color: 
1172           -fx-shadow-highlight-color,
1173           linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
1174           linear-gradient(to bottom, 
1175             derive(-fx-control-inner-background, -7%),
1176             derive(-fx-control-inner-background, 0%),
1177             derive(-fx-control-inner-background, -3%),
1178             derive(-fx-control-inner-background, -9%)
1179           );
1180     -fx-background-insets: 0, 0 0 1 0, 1 1 2 1;
1181     -fx-background-radius: 4, 3, 2; /* 10, 9, 8 */
1182 }
1183 
1184 /*******************************************************************************
1185  *                                                                             *
1186  * ProgressIndicator                                                           *
1187  *                                                                             *
1188  ******************************************************************************/
1189 
1190 .progress-indicator {
1191     -fx-indeterminate-segment-count: 12;
1192     -fx-spin-enabled: true;
1193 }
1194 .progress-indicator > .determinate-indicator > .indicator {
1195     -fx-background-color: -fx-box-border,
1196         radial-gradient(center 50% 50%, radius 50%, -fx-control-inner-background 70%, derive(-fx-control-inner-background, -9%) 100%), 
1197         -fx-control-inner-background;
1198     -fx-background-insets: 0, 1, 5 2 1 2;
1199     -fx-padding: 0.166667em; /* 2px */
1200 }
1201 .progress-indicator > .determinate-indicator > .progress {
1202     -fx-background-color: -fx-accent;
1203     -fx-padding: 0.083333em; /* 1px */
1204 }
1205 .progress-indicator > .determinate-indicator > .tick {
1206     -fx-background-color: white;
1207     -fx-background-insets: 0;
1208     -fx-padding: 0.666667em; /* 8 */
1209     -fx-shape: "M-0.25,6.083c0.843-0.758,4.583,4.833,5.75,4.833S14.5-1.5,15.917-0.917c1.292,0.532-8.75,17.083-10.5,17.083C3,16.167-1.083,6.833-0.25,6.083z";
1210 }
1211 .progress-indicator > .percentage {
1212     -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */
1213     -fx-fill: -fx-text-background-color;
1214 }
1215 .progress-indicator:indeterminate > .spinner {
1216     /** Applying to undo styling from .spinner, reported in RT-37965 */
1217     -fx-background-color: transparent;
1218     -fx-background-insets: 0;
1219     -fx-background-radius: 0;
1220 }
1221 .progress-indicator:indeterminate .segment {
1222     -fx-background-color: -fx-accent;
1223 }
1224 .progress-indicator:indeterminate .segment0 {
1225     -fx-shape:"M41.98 14.74 a3.5,3.5 0 1,1 0,1 Z";
1226 }
1227 .progress-indicator:indeterminate .segment1 {
1228     -fx-shape:"M33.75 6.51 a3.5,3.5 0 1,1 0,1 Z";
1229 }
1230 .progress-indicator:indeterminate .segment2 {
1231     -fx-shape:"M22.49 3.5 a3.5,3.5 0 1,1 0,1 Z";
1232 }
1233 .progress-indicator:indeterminate .segment3 {
1234     -fx-shape:"M11.24 6.51 a3.5,3.5 0 1,1 0,1 Z";
1235 }
1236 .progress-indicator:indeterminate .segment4 {
1237     -fx-shape:"M3.01 14.74 a3.5,3.5 0 1,1 0,1 Z";
1238 }
1239 .progress-indicator:indeterminate .segment5 {
1240     -fx-shape:"M0.0 26.0 a3.5,3.5 0 1,1 0,1 Z";
1241 }
1242 .progress-indicator:indeterminate .segment6 {
1243     -fx-shape:"M3.01 37.25 a3.5,3.5 0 1,1 0,1 Z";
1244 }
1245 .progress-indicator:indeterminate .segment7 {
1246     -fx-shape:"M11.25 45.48 a3.5,3.5 0 1,1 0,1 Z";
1247 }
1248 .progress-indicator:indeterminate .segment8 {
1249     -fx-shape:"M22.5 48.5 a3.5,3.5 0 1,1 0,1 Z";
1250 }
1251 .progress-indicator:indeterminate .segment9 {
1252     -fx-shape:"M33.75 45.48 a3.5,3.5 0 1,1 0,1 Z";
1253 }
1254 .progress-indicator:indeterminate .segment10 {
1255     -fx-shape:"M41.98 37.25 a3.5,3.5 0 1,1 0,1 Z";
1256 }
1257 .progress-indicator:indeterminate .segment11 {
1258      -fx-shape:"M45.0 26.0 a3.5,3.5 0 1,1 0,1 Z";
1259 }
1260 
1261 /*******************************************************************************
1262  *                                                                             *
1263  * Text COMMON                                                                 *
1264  *                                                                             *
1265  ******************************************************************************/
1266 
1267 .text-input {
1268     -fx-text-fill: -fx-text-inner-color;
1269     -fx-highlight-fill: derive(-fx-control-inner-background,-20%);
1270     -fx-highlight-text-fill: -fx-text-inner-color;
1271     -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
1272     -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
1273         linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
1274     -fx-background-insets: 0, 1;
1275     -fx-background-radius: 3, 2;
1276     -fx-cursor: text;
1277     -fx-padding: 0.333333em 0.583em 0.333333em 0.583em; /* 4 7 4 7 */
1278 }
1279 .text-input:focused {
1280     -fx-highlight-fill: -fx-accent;
1281     -fx-highlight-text-fill: white;
1282     -fx-background-color: 
1283         -fx-focus-color,
1284         -fx-control-inner-background,
1285         -fx-faint-focus-color,
1286         linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
1287     -fx-background-insets: -0.2, 1, -1.4, 3;
1288     -fx-background-radius: 3, 2, 4, 0;
1289     -fx-prompt-text-fill: transparent;
1290 }
1291 
1292 /*******************************************************************************
1293  *                                                                             *
1294  * TextArea                                                                    *
1295  *                                                                             *
1296  ******************************************************************************/
1297 
1298 .text-area {
1299     -fx-padding: 0;
1300     -fx-cursor: default;
1301     -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
1302         derive(-fx-base,-1%);
1303 }
1304 .text-area > .scroll-pane {
1305     -fx-background-color: null;
1306 }
1307 .text-area > .scroll-pane > .scroll-bar:horizontal {
1308     -fx-background-radius: 0 0 2 2;
1309 }
1310 .text-area > .scroll-pane > .scroll-bar:vertical {
1311     -fx-background-radius: 0 2 2 0;
1312 }
1313 .text-area > .scroll-pane > .corner {
1314     -fx-background-radius: 0 0 2 0;
1315 }
1316 .text-area .content {
1317     /*the is 1px less top and bottom than TextInput because of scrollpane border */
1318     -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
1319     -fx-cursor: text;
1320     -fx-background-color:
1321         linear-gradient(from 0px 0px to 0px 4px, derive(-fx-control-inner-background, -8%), -fx-control-inner-background);
1322     -fx-background-radius: 2;
1323 }
1324 .text-area:focused .content {
1325     -fx-background-color: 
1326         -fx-control-inner-background,
1327         -fx-faint-focus-color,
1328         linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
1329     -fx-background-insets: 0, 0, 2;
1330     -fx-background-radius: 2, 1, 0;
1331 }
1332 
1333 /*******************************************************************************
1334  *                                                                             *
1335  * HTML Editor                                                                 *
1336  *                                                                             *
1337  ******************************************************************************/
1338 
1339 .html-editor-foreground {
1340     -fx-color-label-visible: false;
1341     -fx-color-rect-x: 1;
1342     -fx-color-rect-y: 1;
1343     -fx-color-rect-width: 4;
1344     -fx-color-rect-height: 3;
1345     -fx-graphic: url("HTMLEditor-Text-Color.png");
1346 }
1347 .html-editor-background {
1348     -fx-color-label-visible: false;
1349     -fx-color-rect-x: 1;
1350     -fx-color-rect-y: 1;
1351     -fx-color-rect-width: 4;
1352     -fx-color-rect-height: 3;
1353     -fx-graphic: url("HTMLEditor-Background-Color.png");
1354 }
1355 .color-picker.html-editor-foreground > .color-picker-label > .picker-color > .picker-color-rect,
1356 .color-picker.html-editor-background > .color-picker-label > .picker-color > .picker-color-rect {
1357     -fx-stroke: null;
1358 }
1359 .html-editor .button ,
1360 .html-editor .toggle-button {
1361     -fx-padding: 0.333333em 0.416667em 0.333333em 0.416667em; /* 4 5 4 5 */
1362 }
1363 .html-editor-cut {
1364     -fx-graphic: url("HTMLEditor-Cut.png");
1365 }
1366 .html-editor-copy {
1367     -fx-graphic: url("HTMLEditor-Copy.png");
1368 }
1369 .html-editor-paste {
1370     -fx-graphic: url("HTMLEditor-Paste.png");
1371 }
1372 .html-editor-align-left {
1373     -fx-graphic: url("HTMLEditor-Left.png");
1374 }
1375 .html-editor-align-center {
1376     -fx-graphic: url("HTMLEditor-Center.png");
1377 }
1378 .html-editor-align-right {
1379     -fx-graphic: url("HTMLEditor-Right.png");
1380 }
1381 .html-editor-align-justify {
1382     -fx-graphic: url("HTMLEditor-Justify.png");
1383 }
1384 .html-editor-outdent {
1385     -fx-graphic: url("HTMLEditor-Outdent.png");
1386 }
1387 .html-editor-outdent:dir(rtl) {
1388     -fx-graphic: url("HTMLEditor-Outdent-rtl.png");
1389 }
1390 .html-editor-indent {
1391     -fx-graphic: url("HTMLEditor-Indent.png");
1392 }
1393 .html-editor-indent:dir(rtl) {
1394     -fx-graphic: url("HTMLEditor-Indent-rtl.png");
1395 }
1396 .html-editor-bullets {
1397     -fx-graphic: url("HTMLEditor-Bullets.png");
1398 }
1399 .html-editor-bullets:dir(rtl) {
1400     -fx-graphic: url("HTMLEditor-Bullets-rtl.png");
1401 }
1402 .html-editor-numbers {
1403     -fx-graphic: url("HTMLEditor-Numbered.png");
1404 }
1405 .html-editor-numbers:dir(rtl) {
1406     -fx-graphic: url("HTMLEditor-Numbered-rtl.png");
1407 }
1408 .html-editor-bold {
1409     -fx-graphic: url("HTMLEditor-Bold.png");
1410 }
1411 .html-editor-italic {
1412     -fx-graphic: url("HTMLEditor-Italic.png");
1413 }
1414 .html-editor-underline {
1415     -fx-graphic: url("HTMLEditor-Underline.png");
1416 }
1417 .html-editor-strike {
1418     -fx-graphic: url("HTMLEditor-Strikethrough.png");
1419 }
1420 .html-editor-hr {
1421     -fx-graphic: url("HTMLEditor-Break.png");
1422 }
1423 
1424 /*******************************************************************************
1425  *                                                                             *
1426  * PopupMenu                                                                   *
1427  *                                                                             *
1428  ******************************************************************************/
1429 
1430 .context-menu {
1431     -fx-background-color:
1432         linear-gradient(to bottom,
1433             derive(-fx-color,-17%),
1434             derive(-fx-color,-30%)
1435         ),
1436         -fx-control-inner-background;
1437     -fx-background-insets: 0, 1;
1438     -fx-padding: 0.333333em 0.083333em 0.333333em 0.083333em; /* 4 1 8 1 */
1439     -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
1440 }
1441 .context-menu .separator:horizontal .line {
1442     -fx-border-color: -fx-box-border transparent transparent transparent;
1443     -fx-border-insets: 1 0 0 0;
1444 }
1445 .context-menu > .scroll-arrow {
1446     -fx-padding: 0.416667em 0.416667em 0.416667em 0.416667em; /* 5 */
1447     -fx-background-color: transparent;
1448 }
1449 .context-menu > .scroll-arrow:hover {
1450     -fx-background: -fx-selection-bar;
1451     -fx-background-color: -fx-background;
1452     -fx-text-fill: -fx-text-background-color;
1453 }
1454 .context-menu:show-mnemonics > .mnemonic-underline {
1455     -fx-stroke: -fx-text-fill;
1456 } 
1457 
1458 /*******************************************************************************
1459  *                                                                             *
1460  * Menu                                                                        *
1461  *                                                                             *
1462  ******************************************************************************/
1463 
1464 .menu {
1465     -fx-background-color: transparent;
1466     -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
1467 }
1468 .menu:show-mnemonics > .mnemonic-underline {
1469     -fx-stroke: -fx-text-fill;
1470 }
1471 .menu > .right-container > .arrow {
1472     -fx-padding: 0.458em 0.167em 0.458em 0.167em; /* 4.5 2 4.5 2 */
1473     -fx-background-color: -fx-mark-color;
1474     -fx-shape: "M0,-4L4,0L0,4Z";
1475     -fx-scale-shape: false;
1476 }
1477 .menu:focused > .right-container > .arrow {
1478     -fx-background-color: -fx-focused-mark-color;
1479 }
1480 .menu-up-arrow {
1481     -fx-padding: 0.666667em 0.416667em 0.0em 0.416667em;  /* 8 5 0 5 */
1482     -fx-background-color: derive(-fx-color,-2%);
1483     -fx-shape: "M0 1 L1 1 L.5 0 Z";
1484     -fx-effect: innershadow( two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 1 );
1485 }
1486 .menu-down-arrow {
1487     -fx-background-color: derive(-fx-color,-2%);
1488     -fx-padding: 0.666667em 0.416667em 0.0em 0.416667em;  /* 8 5 0 5 */
1489     -fx-shape: "M0 0 L1 0 L.5 1 Z";
1490     -fx-effect: innershadow( two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 1 );
1491 }
1492 
1493 
1494 /*******************************************************************************
1495  *                                                                             *
1496  * MenuBar                                                                     *
1497  *                                                                             *
1498  ******************************************************************************/
1499 
1500 .menu-bar {
1501     -fx-padding: 0.0em 0.666667em 0.0em 0.666667em; /* 0 8 0 8 */
1502     -fx-spacing: 0.166667em; /* 2 */
1503     -fx-background-color:
1504         linear-gradient(to bottom, derive(-fx-base,75%) 0%, -fx-outer-border 90%),
1505         linear-gradient(to bottom, derive(-fx-base,46.9%) 2%, derive(-fx-base,-2.1%) 95%);
1506     -fx-background-insets: 0 0 0 0, 1 0 1 0;
1507     -fx-background-radius: 0, 0 ;
1508 }
1509 /* Show nothing for background of normal menu button in a menu bar */
1510 .menu-bar > .container > .menu-button {
1511     -fx-background-radius: 0;
1512     -fx-background-color: transparent;
1513     -fx-background-insets: 0;
1514 }
1515 /* Change padding of menu buttons when in menu bar */
1516 .menu-bar > .container > .menu-button > .label {
1517     -fx-padding: 0;
1518 }
1519 /* Hide the down arrow for a menu placed in a menubar */
1520 .menu-bar > .container > .menu-button > .arrow-button > .arrow {
1521     -fx-padding: 0.167em 0 0.250em 0; /* 2 0 3 0 */
1522     -fx-background-color: transparent;
1523     -fx-shape: null;
1524 }
1525 .menu-bar > .container > .menu > .arrow-button {
1526     -fx-padding: 0.500em 0 0.500em 0; /* 6 0 6 0 */
1527 }
1528 .menu-bar > .container > .menu-button:hover,
1529 .menu-bar > .container > .menu-button:focused,
1530 .menu-bar > .container > .menu-button:showing {
1531     -fx-background: -fx-selection-bar;
1532     -fx-background-color: -fx-background;
1533 }
1534 .menu-bar > .container > .menu-button:hover > .label,
1535 .menu-bar > .container > .menu-button:focused > .label,
1536 .menu-bar > .container > .menu-button:showing  > .label {
1537     -fx-text-fill: -fx-text-background-color;
1538 }
1539 .menu-bar:show-mnemonics > .mnemonic-underline {
1540     -fx-stroke: -fx-text-fill;
1541 }
1542 
1543 /*******************************************************************************
1544  *                                                                             *
1545  * MenuItem                                                                    *
1546  *                                                                             *
1547  ******************************************************************************/
1548 
1549 .menu-item {
1550     -fx-background-color: transparent;
1551     -fx-padding: 0.333333em 0.41777em 0.333333em 0.41777em;  /* 4 5 4 5 */
1552 }
1553 .menu-item > .left-container {
1554     -fx-padding: 0.458em 0.791em 0.458em 0.458em;
1555 }
1556 .menu-item > .graphic-container {
1557     -fx-padding: 0em 0.333em 0em 0em;
1558 }
1559 .menu-item >.label {
1560     -fx-padding: 0em 0.5em 0em 0em;
1561     -fx-text-fill: -fx-text-base-color;
1562 }
1563 .menu-item:focused {
1564      -fx-background: -fx-selection-bar;
1565      -fx-background-color: -fx-background;
1566      -fx-text-fill:  -fx-text-background-color;
1567 }
1568 .menu-item:focused > .label {
1569     -fx-text-fill: -fx-focused-text-base-color;
1570 }
1571 .menu-item > .right-container {
1572     -fx-padding: 0em 0em 0em 0.5em;
1573 }
1574 .menu-item:show-mnemonics > .mnemonic-underline {
1575     -fx-stroke: -fx-text-fill;
1576 } 
1577 .radio-menu-item:checked > .left-container > .radio {
1578     -fx-background-color: -fx-mark-color;
1579     -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z";
1580     -fx-scale-shape: false;
1581 }
1582 .radio-menu-item:focused:checked > .left-container > .radio {
1583     -fx-background-color: -fx-focused-mark-color;
1584 }
1585 .check-menu-item:checked > .left-container > .check {
1586     -fx-background-color: -fx-mark-color;
1587     -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z";
1588     -fx-scale-shape: false;
1589 }
1590 .check-menu-item:focused:checked > .left-container > .check {
1591     -fx-background-color: -fx-focused-mark-color;
1592 }
1593 /*******************************************************************************
1594  *                                                                             *
1595  * ChoiceBox                                                                   *
1596  *                                                                             *
1597  ******************************************************************************/
1598 
1599 /*.choice-box > .open-button > .arrow {
1600     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
1601     -fx-background-insets: 1 0 -1 0, 0;
1602     -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em;  2 3.5 2 3.5 
1603     -fx-shape: "M 0 0 h 7 l -3.5 4 z";
1604 }*/
1605 .choice-box > .context-menu {
1606     -fx-background-radius: 6, 5, 4;
1607 }
1608 
1609 /*******************************************************************************
1610  *                                                                             *
1611  * TabPane                                                                     *
1612  *                                                                             *
1613  ******************************************************************************/
1614 
1615 .tab-pane {
1616     -fx-tab-min-height: 1.8333em; /* 22 */
1617     -fx-tab-max-height: 1.8333em; /* 22 */
1618 }
1619 .tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
1620     -fx-alignment: CENTER;
1621     -fx-text-fill: -fx-text-base-color;
1622 }
1623 .tab-pane > .tab-header-area > .headers-region > .tab {
1624     -fx-background-insets: 0 1 1 0, 1 2 1 1, 2 3 1 2;
1625     -fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0;
1626     -fx-padding: 0.083333em 0.5em 0.0769em 0.5em; /* 1 6 0.99 6 */
1627 }
1628 .tab-pane > .tab-header-area > .headers-region > .tab:top {
1629     -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
1630 }
1631 .tab-pane > .tab-header-area > .headers-region > .tab:right {
1632     -fx-background-color: -fx-outer-border, -fx-inner-border-bottomup, -fx-body-color-bottomup;
1633 }
1634 .tab-pane > .tab-header-area > .headers-region > .tab:bottom {
1635     -fx-background-color: -fx-outer-border, -fx-inner-border-bottomup, -fx-body-color-bottomup;
1636 }
1637 .tab-pane > .tab-header-area > .headers-region > .tab:left {
1638     -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
1639 }
1640 .tab-pane > .tab-header-area > .headers-region > .tab:hover {
1641     -fx-color: -fx-hover-base;
1642 }
1643 .tab-pane > .tab-header-area > .headers-region > .tab:selected {
1644     -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-background;
1645     -fx-background-insets: 0 1 1 0, 1 2 0 1, 2 3 0 2;
1646 }
1647 .tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
1648     -fx-border-width: 1, 1;
1649     -fx-border-color: -fx-focus-color, -fx-faint-focus-color;
1650     -fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
1651     -fx-border-radius: 2, 1; /* looks sharper if outer border has a tighter radius (2 instead of 3) */
1652 }
1653 .tab-pane:focused > .tab-header-area > .headers-region > .tab:bottom:selected .focus-indicator {
1654     -fx-border-insets: -6 -5 -4 -4, -5 -3 -2 -2;
1655 }
1656 .tab-pane > .tab-header-area > .headers-region > .tab:disabled:hover {
1657     -fx-color: -fx-base;
1658 }
1659 .tab-pane > .tab-header-area > .tab-header-background {
1660     /* TODO should not be using text-box-border I think? */
1661     -fx-background-color:  
1662         -fx-outer-border,
1663         -fx-text-box-border, 
1664         linear-gradient(from 0px 0px to 0px 5px, -fx-text-box-border, derive(-fx-text-box-border, 30%));
1665 }
1666 .tab-pane:top > .tab-header-area > .tab-header-background {
1667     -fx-background-insets: 0, 0 0 1 0, 1;
1668 }
1669 .tab-pane:bottom > .tab-header-area > .tab-header-background {
1670     -fx-background-insets: 0, 1 0 0 0, 1;
1671 }
1672 .tab-pane:left > .tab-header-area > .tab-header-background {
1673     -fx-background-insets: 0, 0 1 0 0, 1;
1674 }
1675 .tab-pane:right > .tab-header-area > .tab-header-background {
1676     -fx-background-insets: 0, 0 0 0 1, 1;
1677 }
1678 .tab-pane:top > .tab-header-area {
1679     /*-fx-padding: 0.416667em 0.166667em 0.0em 0.416667em; *//* 5 2 0 5 */
1680     -fx-padding: 0.416667em 5 0.0em 0.416667em; /* 5 2 0 5 */
1681 }
1682 .tab-pane:bottom > .tab-header-area {
1683     -fx-padding: 0 0.166667em 0.416667em 0.416667em; /* 0 2 5 5 */
1684 }
1685 .tab-pane:left > .tab-header-area {
1686     -fx-padding: 0.416667em 0.0em 0.166667em 0.416667em; /* 5 0 2 5 */
1687 }
1688 .tab-pane:right > .tab-header-area {
1689     -fx-padding: 0.416667em 0.416667em 0.166667em 0.0em; /* 5 5 2 0 */
1690 }
1691 /* TODO: scaling the shape seems to make it way too large */
1692 .tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button {
1693     -fx-background-color: -fx-mark-color;
1694     -fx-shape: "M 0,0 H1 L 4,3 7,0 H8 V1 L 5,4 8,7 V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z";
1695     -fx-scale-shape: false;
1696     -fx-effect: dropshadow(two-pass-box , rgba(255, 255, 255, 0.4), 1, 0.0 , 0, 1);
1697 }
1698 .tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button:hover {
1699     -fx-background-color: derive(-fx-mark-color, -30%);
1700 }
1701 /* CONTROL BUTTONS */
1702 .tab-pane > .tab-header-area > .control-buttons-tab > .container {
1703     -fx-padding: 3 0 0 0; 
1704 }
1705 .tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button {
1706     -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
1707     -fx-background-insets: -1 0 5 0, 0 1 6 1, 1 2 7 2;
1708     -fx-padding: 4 4 9 4;
1709     -fx-background-radius: 10;
1710 }
1711 .tab-pane:bottom > .tab-header-area > .control-buttons-tab > .container > .tab-down-button {
1712     -fx-padding: -5 4 4 4; /* TODO convert to ems */
1713 }
1714 /* FLOATING TABS CUSTOMISATION */
1715 .tab-pane.floating > .tab-header-area > .tab-header-background {
1716     -fx-background-color: null;
1717 }
1718 .tab-pane.floating > .tab-header-area {
1719     -fx-background-color: null;
1720 }
1721 .tab-pane.floating > .tab-content-area {
1722     -fx-background-color: -fx-outer-border, -fx-background;
1723     -fx-background-insets: 0, 1;
1724     -fx-background-radius: 2, 0;
1725     -fx-padding: 2;
1726 }
1727 
1728 /*******************************************************************************
1729  *                                                                             *
1730  * ComboBox                                                                    *
1731  *                                                                             *
1732  ******************************************************************************/
1733 
1734 /* Customise the ListCell that appears in the ComboBox button itself */
1735 .combo-box > .list-cell {
1736     -fx-background: transparent;
1737     -fx-background-color: transparent;
1738     -fx-text-fill: -fx-text-base-color;
1739     -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
1740 }
1741 .combo-box-base > .arrow-button {
1742     -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
1743     -fx-padding: 0.5em 0.667em 0.5em 0.833333em; /* 6 8 6 10 */
1744     -fx-background-color: transparent;
1745 }
1746 
1747 /*******************************************************************************
1748  *                                                                             *
1749  * Editable ComboBox                                                           *
1750  *                                                                             *
1751  * The editable ComboBox TextBox inherits its properties from the TextBox      *
1752  * Control. Only the properties with values that are different from the        *
1753  * TextBox are specified here.                                                 *
1754  *                                                                             *
1755  ******************************************************************************/
1756 
1757 .combo-box-base:editable > .arrow-button,
1758 .date-picker > .arrow-button {
1759     -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
1760     -fx-background-insets: 1 1 1 0, 1, 2;
1761     -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
1762 }
1763 .combo-box-base:editable > .text-field,
1764 .date-picker > .text-field {
1765     -fx-background-color:
1766         linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
1767         linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
1768     -fx-background-insets: 1 0 1 1;
1769     -fx-background-radius: 2 0 0 2;
1770 }
1771 .combo-box-base:editable:contains-focus,
1772 .date-picker:contains-focus {
1773     -fx-background-color: -fx-focus-color;
1774     -fx-background-insets: -0.2;
1775     -fx-background-radius: 3;
1776 }
1777 .combo-box-base:editable:focused > .text-field,
1778 .combo-box-base:editable > .text-field:focused,
1779 .date-picker:focused > .text-field,
1780 .date-picker > .text-field:focused {
1781     -fx-background-color: 
1782         -fx-control-inner-background,
1783         -fx-faint-focus-color,
1784         linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
1785     -fx-background-insets: 1 0 1 1, 1 0 1 1, 3 2 3 3;
1786     -fx-background-radius: 2 0 0 2, 1 0 0 1, 0;
1787 }
1788 .combo-box-base:editable:contains-focus > .arrow-button,
1789 .date-picker:contains-focus > .arrow-button {
1790     -fx-background-color: -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
1791     -fx-background-insets: 1, 2, 1, 2.6;
1792     -fx-background-radius: 0 2 2 0, 0 1 1 0, 0 1 1 0, 0 1 1 0;
1793 }
1794 
1795 /* -------------- STYLES FOR THE DEFAULT LISTVIEW-BASED COMBOBOX ------------- */
1796 
1797 .combo-box-popup > .list-view {
1798     -fx-background-color:
1799         linear-gradient(to bottom,
1800             derive(-fx-color,-17%),
1801             derive(-fx-color,-30%)
1802         ),
1803         -fx-control-inner-background;
1804     -fx-background-insets: 0, 1;
1805     -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
1806 }
1807 .combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell {
1808     -fx-padding: 4 0 4 5;
1809     /* No alternate highlighting */
1810     -fx-background: -fx-control-inner-background;
1811 }
1812 .combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:hover {
1813     -fx-background: -fx-accent;
1814     -fx-background-color: -fx-selection-bar;
1815 }
1816 .combo-box-popup  > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
1817 .combo-box-popup  > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
1818     -fx-background: -fx-accent;
1819     -fx-background-color: -fx-background, -fx-cell-focus-inner-border, -fx-background;
1820     -fx-background-insets: 0, 1, 2;
1821 }
1822 .combo-box-popup > .list-view > .placeholder > .label {
1823     -fx-text-fill: derive(-fx-control-inner-background,-30%);
1824 }
1825 
1826 /*******************************************************************************
1827  *                                                                             *
1828  * TitledPane                                                                  *
1829  *                                                                             *
1830  ******************************************************************************/
1831 
1832 .titled-pane {
1833     -fx-text-fill: -fx-text-base-color;
1834 }
1835 .titled-pane:focused {
1836     -fx-color: -fx-base;
1837 }
1838 .titled-pane > .title {
1839     -fx-background-color:
1840         linear-gradient(to bottom,
1841             derive(-fx-color,-15%) 95%,
1842             derive(-fx-color,-25%) 100%
1843         ),
1844         -fx-inner-border, -fx-body-color;
1845     -fx-background-insets: 0, 1, 2;
1846     -fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0;
1847     -fx-padding: 0.3333em 0.75em 0.3333em 0.75em; /* 4 9 4 9 */
1848 }
1849 /* alternative focus using the ring around the entire title area */
1850 /*.titled-pane:focused > .title {
1851     -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color; 
1852     -fx-background-insets: 0, 0.7, 2, 3;    
1853 }*/
1854 /* focus purely on the arrow */
1855 .titled-pane:focused > .title > .arrow-button > .arrow {
1856     -fx-background-color: -fx-focus-color, -fx-mark-color;
1857     -fx-background-insets: -1, 0;
1858     -fx-effect: dropshadow(two-pass-box , -fx-focus-color, 5, 0.2 , 0, 0);
1859 }
1860 .titled-pane > .title > .arrow-button {
1861     -fx-background-color: null;
1862     -fx-background-insets: 0;
1863     -fx-background-radius: 0;
1864     -fx-padding: 0.0em 0.583em 0.0em 0.0em; /* 0 7 0 0 */
1865 }
1866 .titled-pane > .title > .arrow-button > .arrow {
1867     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
1868     -fx-background-insets: 1 0 -1 0, 0;
1869     -fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */
1870     -fx-shape: "M 0 0 h 7 l -3.5 4 z";
1871 }
1872 .titled-pane > .title:hover {
1873     -fx-color: -fx-hover-base;
1874 }
1875 /* alternative content using a border and a grad to transparent background - why should TitledPane content have a colour? */
1876 .titled-pane > *.content {
1877     -fx-border-color: -fx-box-border;
1878     -fx-border-insets: -1 0 0 0;
1879     -fx-background-color: linear-gradient(from 0px 0px to 0px 5px, derive(-fx-background, -6%), -fx-background);
1880 }
1881 
1882 
1883 
1884 /*******************************************************************************
1885  *                                                                             *
1886  * Accordion                                                                   *
1887  *                                                                             *
1888  ******************************************************************************/
1889 
1890 .accordion > .titled-pane > .title {
1891     -fx-background-color:
1892         linear-gradient(to bottom,
1893         derive(-fx-color,-15%) 95%,
1894         derive(-fx-color,-25%) 100%
1895         ),
1896         -fx-inner-border,
1897         -fx-body-color;
1898     -fx-background-insets: -1 0 0 0, 0 1 1 1, 1 2 2 2;
1899     -fx-background-radius: 0, 0, 0;
1900 }
1901 .accordion > .first-titled-pane > .title {
1902     -fx-background-insets: 0, 1, 2;
1903 }
1904 
1905 /*******************************************************************************
1906  *                                                                             *
1907  * SplitPane                                                                   *
1908  *                                                                             *
1909  ******************************************************************************/
1910 
1911 .split-pane > .split-pane-divider {
1912     -fx-padding: 0 0.25em 0 0.25em; /* 0 3 0 3 */
1913 }
1914 /* horizontal the two nodes are placed to the left/right of each other. */
1915 .split-pane:horizontal > .split-pane-divider {
1916    -fx-background-color: -fx-box-border, -fx-inner-border-horizontal;
1917    -fx-background-insets: 0, 0 1 0 1;
1918 }
1919 /* vertical the two nodes are placed on top of each other. */
1920 .split-pane:vertical > .split-pane-divider {
1921    -fx-background-color: -fx-box-border, -fx-inner-border;
1922    -fx-background-insets: 0, 1 0 1 0;
1923 }
1924 
1925 /*******************************************************************************
1926  *                                                                             *
1927  * ColorPicker                                                                 *
1928  *                                                                             *
1929  ******************************************************************************/
1930 
1931 .color-picker > .arrow-button {
1932     -fx-background-color: null;
1933     -fx-padding: 0.5em 0.667em 0.5em 0; /*  6 8 6 0 */
1934 }
1935 .color-picker.split-button > .arrow-button  {
1936     -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
1937     -fx-background-insets: 1 1 1 0, 1, 2;
1938     -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
1939 }
1940 .color-picker.split-button:focused > .arrow-button {
1941     /*-fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color !important;*/
1942     /*-fx-background-insets: 0, 1, 2;*/
1943     -fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
1944     -fx-background-insets: 1 1 1 0, 1, 2, 1, 2.6;
1945     -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0, 0 1 1 0, 0 1 1 0;
1946 }
1947 .color-picker.split-button > .color-picker-label,
1948 .color-picker.split-button:focused > .color-picker-label{
1949     -fx-background-color: null;
1950 }
1951 .color-picker.split-button > .arrow-button {
1952     /*-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color !important;*/
1953     -fx-padding: 0.5em 0.667em 0.5em 0.667em; /* 6 8 6 8 */
1954 }
1955 .color-picker > .color-picker-label > .picker-color > .picker-color-rect {
1956     -fx-stroke: -fx-box-border;
1957 }
1958 
1959 .color-palette {
1960     -fx-spacing: 0.833333em; /* 10px */
1961     -fx-background-color:
1962         linear-gradient(to bottom,
1963             derive(-fx-color,-17%),
1964             derive(-fx-color,-30%)
1965         ),
1966         linear-gradient(to bottom, 
1967             derive(-fx-background,10%) 0%, 
1968             derive(-fx-background,-5%) 12%, 
1969             derive(-fx-background,15%) 88%, 
1970             derive(-fx-background,-10%) 100%);
1971     -fx-background-insets: 0, 1;
1972     -fx-background-radius: 6, 5;
1973     -fx-padding: 1em; /* 12 */
1974     -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
1975 }
1976 .color-palette > .color-picker-grid {
1977     -fx-padding: 0.5px;
1978     -fx-snap-to-pixel: false;
1979 }
1980 .color-palette > .color-picker-grid > .color-square {
1981     -fx-background-color: transparent;
1982     -fx-padding: 0.5px;
1983 }
1984 /* the color over which the user is hovering */
1985 .color-palette-region > .color-square.hover-square {
1986     -fx-background-color: -fx-faint-focus-color, -fx-focus-color;
1987     -fx-background-insets: -3,-1;
1988     -fx-background-radius: 5,0;
1989     -fx-scale-x: 1.5;
1990     -fx-scale-y: 1.5;
1991 }
1992 /* ------- CUSTOM COLOR DIALOG ------- */
1993 .custom-color-dialog > .color-rect-pane {
1994     -fx-spacing: 0.75em;
1995     -fx-pref-height: 16.666667em;
1996     -fx-alignment: top-left;
1997     -fx-fill-height: true;
1998 }
1999 
2000 .custom-color-dialog .color-rect-pane .color-rect {
2001     -fx-min-width: 16.666667em;
2002     -fx-min-height: 16.666667em;
2003 }
2004 
2005 .custom-color-dialog .color-rect-pane .color-rect-border {
2006     -fx-border-color: derive(-fx-base, -20%);
2007 }
2008 
2009 .custom-color-dialog > .color-rect-pane #color-rect-indicator {
2010     -fx-background-color: null;
2011     -fx-border-color: white;
2012     -fx-border-radius: 0.4166667em;
2013     -fx-translate-x: -0.4166667em;
2014     -fx-translate-y: -0.4166667em;
2015     -fx-pref-width: 0.833333em;
2016     -fx-pref-height: 0.833333em;
2017     -fx-effect: dropshadow(three-pass-box, black, 2, 0.0, 0, 1);
2018 }
2019 
2020 .custom-color-dialog > .color-rect-pane > .color-bar {
2021     -fx-min-width: 1.666667em;
2022     -fx-min-height: 16.666667em;
2023     -fx-max-width: 1.666667em;
2024     -fx-border-color: derive(-fx-base, -20%);
2025 }
2026 
2027 .custom-color-dialog > .color-rect-pane > .color-bar > #color-bar-indicator {
2028     -fx-border-radius: 0.333333em;
2029     -fx-border-color: white;
2030     -fx-effect: dropshadow(three-pass-box, black, 2, 0.0, 0, 1);
2031     -fx-pref-width: 2em;
2032     -fx-pref-height: 0.833333em;
2033     -fx-translate-x: -0.1666667em;
2034     -fx-translate-y: -0.4166667em;
2035 }
2036 
2037 .custom-color-dialog  {
2038     -fx-background-color: -fx-background;
2039     -fx-padding: 1.25em;
2040     -fx-spacing: 1.25em;
2041 }
2042 .custom-color-dialog .controls-pane .current-new-color-grid #current-new-color-border {
2043     -fx-border-color: derive(-fx-base, -20%);
2044     -fx-border-width: 2px;
2045 }
2046 
2047 .custom-color-dialog .controls-pane .current-new-color-grid .color-rect {
2048     -fx-min-width: 10.666667em;
2049     -fx-min-height: 1.75em;
2050     -fx-pref-width: 10.666667em;
2051     -fx-pref-height: 1.75em;
2052 }
2053 
2054 .custom-color-dialog .transparent-pattern {
2055     -fx-background-image: url("pattern-transparent.png"); 
2056     -fx-background-repeat: repeat;
2057     -fx-background-size: auto;
2058 }
2059 
2060 .custom-color-dialog .controls-pane #spacer1 {
2061     -fx-min-height: 0.1666667em;
2062     -fx-max-height: 0.1666667em;
2063     -fx-pref-height: 0.1666667em;
2064 }
2065 
2066 .custom-color-dialog .controls-pane #spacer2 {
2067     -fx-min-height: 1em;
2068     -fx-max-height: 1em;
2069     -fx-pref-height: 1em;
2070 }
2071 
2072 .custom-color-dialog .controls-pane #settings-pane {
2073     -fx-hgap: 0.4166667em;
2074     -fx-vgap: 0.3333333em;
2075 }
2076 
2077 .custom-color-dialog .controls-pane #settings-pane .settings-label {
2078     -fx-min-width: 5.75em;
2079 }
2080 
2081 .custom-color-dialog .controls-pane #settings-pane .settings-unit {
2082     -fx-max-width: 1em;
2083 }
2084 
2085 .custom-color-dialog .controls-pane #settings-pane .slider {
2086     -fx-pref-width: 8.25em;
2087 }
2088 
2089 .custom-color-dialog .controls-pane .color-input-field {
2090     -fx-pref-column-count: 3;
2091     -fx-max-width: 3.25em;
2092     -fx-min-width: 3.25em;
2093     -fx-pref-width: 3.25em;
2094 }
2095 
2096 .custom-color-dialog .controls-pane .web-field {
2097     -fx-pref-column-count: 6;
2098     -fx-pref-width: 8.25em;
2099 }
2100 
2101 .custom-color-dialog .controls-pane #spacer-side {
2102     -fx-min-width: 0.5em;
2103     -fx-pref-width: 0.5em;
2104 }
2105 
2106 .custom-color-dialog .controls-pane #spacer-bottom {
2107     -fx-pref-height: 0.833333em;
2108     -fx-min-height: 0.833333em;
2109 }
2110 
2111 .custom-color-dialog .controls-pane .customcolor-controls-background {
2112     -fx-background-color: -fx-text-box-border, -fx-control-inner-background;
2113     -fx-background-insets: 
2114         0.8333333em 0 0.4166667em 0,
2115         1em 0.166667em 0.5833333em 0.166667em;
2116     -fx-background-radius: 0.3333333em, 0.166667em;
2117 }
2118 
2119 .custom-color-dialog .controls-pane .current-new-color-grid .label {
2120     -fx-padding: 0 0 0 0.4166667em;
2121 }
2122 
2123 .custom-color-dialog .controls-pane #buttons-hbox {
2124     -fx-spacing: 0.333333em;
2125     -fx-padding: 1em 0 0 0;
2126     -fx-alignment: bottom-right;
2127 }
2128 
2129 /* The fix for RT-37494 forces the web color text's major direction to
2130  * LTR. The following keeps the text right-aligned when in RTL mode. */
2131 .custom-color-dialog .webcolor-field:dir(rtl) > .text-field:dir(ltr) {
2132     -fx-alignment: baseline-right;
2133 }
2134 
2135 /*******************************************************************************
2136  *                                                                             *
2137  * Pagination                                                                  *
2138  *                                                                             *
2139  ******************************************************************************/
2140 
2141 .pagination {
2142     -fx-padding: 0;        
2143     -fx-arrows-visible: true;
2144     -fx-tooltip-visible: true;
2145     -fx-page-information-visible: true;
2146     -fx-page-information-alignment: bottom;
2147     -fx-arrow-button-gap: 0;
2148 }
2149 .pagination > .page {
2150     -fx-background-color: transparent;
2151 }
2152 .pagination > .pagination-control {
2153     -fx-background-color: transparent;
2154     -fx-font-size: 0.82em;
2155 }
2156 .pagination > .pagination-control > .control-box {
2157     -fx-padding: 5px 0 0 0;
2158     -fx-spacing: 2;
2159     -fx-alignment: center;
2160 }
2161 .pagination > .pagination-control > .control-box > .left-arrow-button {
2162     -fx-background-radius: 3 0 0 3, 3 0 0 3, 2 0 0 2, 1 0 0 1;
2163     -fx-background-insets: 0 0 -1 5, 0 0 0 5, 1 1 1 6, 2 2 2 7;
2164     -fx-padding: 0em 0.417em 0em 0.833em; /* 0 5 0 10 */
2165 }
2166 .pagination > .pagination-control > .control-box > .right-arrow-button {
2167     -fx-background-radius: 0 3 3 0, 0 3 3 0, 0 2 2 0, 0 1 1 0;
2168     -fx-background-insets: 0 5 -1 0, 0 5 0 0, 1 6 1 1, 2 7 2 2;
2169     -fx-padding: 0em 0.75em 0em 0.417em; /* 0 9 0 5 */
2170 }
2171 .pagination > .pagination-control .left-arrow {
2172     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
2173     -fx-background-insets: 1 0 -1 0, 0;
2174     -fx-padding: 0.375em 0.291em 0.375em 0.291em;
2175     -fx-shape: "M 0 0 L -13 7 L 0 13 z";
2176     -fx-scale-shape: true;
2177 }
2178 .pagination > .pagination-control .right-arrow {
2179     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
2180     -fx-background-insets: 1 0 -1 0, 0;
2181     -fx-padding: 0.375em 0.291em 0.375em 0.291em;
2182     -fx-shape: "M 0 0 L 13 7 L 0 13 z";
2183     -fx-scale-shape: true;
2184 }
2185 .pagination > .pagination-control > .control-box > .bullet-button {   
2186    -fx-background-radius: 0, 4em, 4em, 4em, 4em;
2187    -fx-padding: 0.333em;
2188    -fx-background-color: transparent, -fx-outer-border, -fx-inner-border, -fx-body-color;
2189    -fx-background-insets: 0, 5,  6,  7;
2190 }
2191 .pagination > .pagination-control > .control-box > .bullet-button:selected {   
2192     -fx-base: -fx-accent;
2193 }
2194 .pagination.bullet > .pagination-control > .control-box {
2195     -fx-spacing: 0;
2196     -fx-alignment: center;
2197 }
2198 .pagination.bullet > .pagination-control > .control-box > .left-arrow-button {
2199     -fx-background-radius: 4em;
2200     -fx-background-insets: 0, 1, 2;
2201     -fx-padding: 0em 0.25em 0em 0.083em; /* 0 3 0 1 */
2202 } 
2203 .pagination.bullet > .pagination-control > .control-box > .right-arrow-button {
2204     -fx-background-radius: 4em;
2205     -fx-background-insets: 0, 1, 2;
2206     -fx-padding: 0em 0.083em 0em 0.25em; /* 0 1 0 3 */
2207 }
2208 .pagination > .pagination-control > .control-box > .number-button {
2209     -fx-background-radius: 0;
2210     -fx-padding: 0.166667em 0.333em 0.25em 0.333em;
2211     -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
2212 }
2213 .pagination > .pagination-control > .control-box > .number-button:selected {   
2214     -fx-base: -fx-accent;
2215 }
2216 .pagination > .pagination-control > .page-information {   
2217     -fx-padding: 0.416em 0 0 0;
2218 }
2219 
2220 /*******************************************************************************
2221  *                                                                             *
2222  * Customised CSS for controls placed directly within cells                    *
2223  *                                                                             *
2224  ******************************************************************************/
2225 
2226 .cell > .choice-box {
2227     -fx-background-color: transparent;
2228     -fx-background-insets: 0;
2229     -fx-background-radius: 0;
2230     -fx-padding: 0.0em 0.5em 0.0em 0.0em; /* 0 6 0 0 */
2231     -fx-alignment: CENTER_LEFT;
2232     -fx-content-display: LEFT;
2233 }
2234 .cell > .choice-box > .label {
2235     -fx-padding: 0em 0.333333em 0.0em 0.333333; /* 2 4 3 6 */
2236 }
2237 .cell:focused:selected > .choice-box > .label {
2238     -fx-text-fill: white;
2239 }
2240 .cell:focused:selected > .choice-box > .open-button > .arrow {
2241     -fx-background-color: -fx-mark-highlight-color, white;
2242 }
2243 
2244 /*******************************************************************************
2245  *                                                                             *
2246  * List, Tree, Table COMMON                                                    *
2247  *                                                                             *
2248  ******************************************************************************/
2249 
2250 /* remove double borders from scrollbars */
2251 .list-view > .virtual-flow > .scroll-bar:vertical,
2252 .tree-view > .virtual-flow > .scroll-bar:vertical,
2253 .table-view > .virtual-flow > .scroll-bar:vertical,
2254 .tree-table-view > .virtual-flow > .scroll-bar:vertical {
2255     -fx-background-insets: 0, 0 0 0 1;
2256     -fx-padding: -1 -1 -1 0;
2257 }
2258 .list-view > .virtual-flow > .scroll-bar:horizontal,
2259 .tree-view > .virtual-flow > .scroll-bar:horizontal,
2260 .table-view > .virtual-flow > .scroll-bar:horizontal,
2261 .tree-table-view > .virtual-flow > .scroll-bar:horizontal {
2262     -fx-background-insets: 0, 1 0 0 0;
2263     -fx-padding: 0 -1 -1 -1;
2264 }
2265 .list-view > .virtual-flow > .corner,
2266 .tree-view > .virtual-flow > .corner,
2267 .table-view > .virtual-flow > .corner,
2268 .tree-table-view > .virtual-flow > .corner {
2269     -fx-background-color: derive(-fx-base,-1%);
2270 }
2271 /* standard cell */
2272 .list-cell,
2273 .tree-cell {
2274     -fx-background: -fx-control-inner-background;
2275     -fx-background-color: -fx-background;
2276     -fx-text-fill: -fx-text-background-color;
2277 }
2278 /* Selected rows */
2279 .list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
2280 .tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected,
2281 .table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected,
2282 .tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected,
2283 .table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected,
2284 .tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:selected {
2285     -fx-background: -fx-selection-bar;
2286     -fx-table-cell-border-color: derive(-fx-selection-bar, 20%);
2287 }
2288 /* Selected when control is not focused */
2289 .list-cell:filled:selected,
2290 .tree-cell:filled:selected,
2291 .table-row-cell:filled:selected,
2292 .tree-table-row-cell:filled:selected,
2293 .table-row-cell:filled > .table-cell:selected,
2294 .tree-table-row-cell:filled > .tree-table-cell:selected {
2295     -fx-background: -fx-selection-bar-non-focused;
2296     -fx-table-cell-border-color: derive(-fx-selection-bar-non-focused, 20%);
2297 }
2298 /* focused cell (keyboard navigation) */
2299 .list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused,
2300 .tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:focused,
2301 .table-view:focused:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:focused,
2302 .tree-table-view:focused:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:focused,
2303 .table-view:focused:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:focused,
2304 .tree-table-view:focused:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:focused {
2305     -fx-background-color: -fx-background, -fx-cell-focus-inner-border, -fx-background;
2306     -fx-background-insets: 0, 1, 2;
2307 }
2308 
2309 /*******************************************************************************
2310  *                                                                             *
2311  * ListView and ListCell                                                       *
2312  *                                                                             *
2313  ******************************************************************************/
2314 
2315 .list-cell {
2316     -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
2317 }
2318 .list-cell:odd {
2319     -fx-background: -fx-control-inner-background-alt;
2320 }
2321 
2322 /*******************************************************************************
2323  *                                                                             *
2324  * TreeView and TreeCell                                                       *
2325  *                                                                             *
2326  ******************************************************************************/
2327 
2328 .tree-cell {
2329     -fx-padding: 0.25em; /* 3 */
2330     -fx-indent: 1em;
2331 }
2332 .tree-cell .label {
2333     -fx-padding: 0.0em 0.0em 0.0em 0.25em; /* 0 0 0 3 */
2334 }
2335 .tree-cell > .tree-disclosure-node,
2336 .tree-table-row-cell > .tree-disclosure-node {
2337     -fx-padding: 4 6 4 8;
2338     -fx-background-color: transparent;
2339 }
2340 .tree-cell > .tree-disclosure-node > .arrow,
2341 .tree-table-row-cell > .tree-disclosure-node > .arrow {
2342     -fx-background-color: -fx-text-background-color;
2343     -fx-padding: 0.333333em 0.229em 0.333333em 0.229em; /* 4 */
2344     -fx-shape: "M 0 -3.5 L 4 0 L 0 3.5 z";
2345 }
2346 .tree-cell:expanded > .tree-disclosure-node > .arrow,
2347 .tree-table-row-cell:expanded > .tree-disclosure-node > .arrow {
2348     -fx-rotate: 90;
2349 }
2350 
2351 /*******************************************************************************
2352  *                                                                             *
2353  * TableView                                                                   *
2354  *                                                                             *
2355  ******************************************************************************/
2356 
2357 .table-view,
2358 .tree-table-view {
2359     /* Constants used throughout the tableview. */
2360     -fx-table-header-border-color: -fx-box-border;
2361     -fx-table-cell-border-color: derive(-fx-color,5%);
2362 }
2363 /***** ROW CELLS **************************************************************/
2364 /* Each row in the table is a table-row-cell. Inside a table-row-cell is any
2365    number of table-cell. */
2366 .table-row-cell {
2367     -fx-background: -fx-control-inner-background;
2368     -fx-background-color: -fx-table-cell-border-color, -fx-background;
2369     -fx-background-insets: 0, 0 0 1 0;
2370     -fx-padding: 0;
2371     -fx-text-fill: -fx-text-background-color;
2372 }
2373 .table-row-cell:odd {
2374     -fx-background: -fx-control-inner-background-alt;
2375 }
2376 /***** INDIVIDUAL CELLS ********************************************************/
2377 .table-cell {
2378     -fx-padding: 0.166667em; /* 2px, plus border adds 1px */
2379     -fx-background-color: null;
2380     -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
2381     -fx-cell-size: 2.0em; /* 24 */
2382     -fx-text-fill: -fx-text-background-color;
2383 }
2384 .table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected,
2385 .tree-table-view > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:selected {
2386     -fx-background-color: -fx-table-cell-border-color, -fx-background;
2387     -fx-background-insets: 0, 0 0 1 0;
2388 }
2389 /* When in constrained resize mode, the right-most visible cell should not have
2390    a right-border, as it is not possible to get this cleanly out of view without
2391    introducing horizontal scrollbars (see RT-14886). */
2392 .table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:last-visible,
2393 .tree-table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:last-visible {
2394     -fx-border-color: transparent;
2395 }
2396 /***** HEADER **********************************************************************/
2397 /* The column-resize-line is shown when the user is attempting to resize a column. */
2398 .table-view .column-resize-line,
2399 .tree-table-view .column-resize-line {
2400     -fx-background: -fx-accent;
2401     -fx-background-color: -fx-background;
2402     -fx-padding: 0.0em 0.0416667em 0.0em 0.0416667em; /* 0 0.571429 0 0.571429 */
2403 }
2404 /* This is the area behind the column headers. An ideal place to specify background
2405    and border colors for the whole area (not individual column-header's). */
2406 .table-view .column-header-background,
2407 .tree-table-view > .column-header-background {
2408     -fx-background-color: -fx-inner-border, -fx-body-color;
2409     -fx-background-insets: 0, 1;
2410 }
2411 /* The column header row is made up of a number of column-header, one for each
2412    TableColumn, and a 'filler' area that extends from the right-most column
2413    to the edge of the tableview, or up to the 'column control' button. */
2414 .table-view .column-header,
2415 .tree-table-view .column-header,
2416 .table-view .filler,
2417 .tree-table-view .filler,
2418 .table-view > .column-header-background > .show-hide-columns-button,
2419 .tree-table-view > .column-header-background > .show-hide-columns-button,
2420 .table-view:constrained-resize .filler,
2421 .tree-table-view:constrained-resize .filler {
2422     -fx-background-color: -fx-box-border, -fx-inner-border, -fx-body-color;
2423     -fx-background-insets: 0, 0 1 1 0, 1 2 2 1;
2424     -fx-font-weight: bold;
2425     -fx-size: 2em;
2426     -fx-text-fill: -fx-selection-bar-text;
2427     -fx-padding: 0.166667em;
2428 }
2429 .table-view .column-header .context-menu,
2430 .tree-table-view .column-header .context-menu,
2431 .table-view > .column-header-background > .show-hide-columns-button .context-menu,
2432 .tree-table-view > .column-header-background > .show-hide-columns-button .context-menu {
2433     -fx-font-weight: null;
2434 }
2435 .table-view .filler,
2436 .tree-table-view .filler,
2437 .table-view:constrained-resize .filler,
2438 .tree-table-view:constrained-resize .filler {
2439     -fx-background-insets: 0, 0 0 1 0, 1 1 2 1;
2440 }
2441 .table-view > .column-header-background > .show-hide-columns-button,
2442 .tree-table-view > .column-header-background > .show-hide-columns-button {
2443     -fx-background-insets: 0, 0 0 1 1, 1 1 2 2;
2444 }
2445 .table-view .column-header .sort-order-dots-container,
2446 .tree-table-view .column-header .sort-order-dots-container{
2447     -fx-padding: 2 0 2 0;
2448 }
2449 .table-view .column-header .sort-order,
2450 .tree-table-view .column-header .sort-order{
2451     -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */
2452 }
2453 .table-view .column-header .sort-order-dot,
2454 .tree-table-view .column-header .sort-order-dot {
2455     -fx-background-color: -fx-mark-color;
2456     -fx-padding: 0.115em;
2457     -fx-background-radius: 0.115em;
2458 }
2459 .table-view .column-header .label,
2460 .tree-table-view .column-header .label {
2461     -fx-alignment: center;
2462 }
2463 
2464 /* Plus Symbol */
2465 .table-view .show-hide-column-image,
2466 .tree-table-view .show-hide-column-image {
2467     -fx-background-color: -fx-mark-color;
2468     -fx-padding: 0.25em; /* 3px */
2469     -fx-shape: "M398.902,298.045c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0c0,0.666,0,1.332,0,1.999c-0.667,0-1.333,0-2,0c0-0.667,0-1.333,0-1.999c-0.666,0-1.333,0-1.999,0c0-0.667,0-1.334,0-2c0.666,0,1.333,0,1.999,0C398.902,299.378,398.902,298.711,398.902,298.045z"; 
2470 }
2471 /* When a column is being 'dragged' to be placed in a different position, there
2472    is a region that follows along the column header area to indicate where the
2473    column will be dropped. This region can be styled using the .column-drag-header
2474    name. */
2475 .table-view .column-drag-header,
2476 .tree-table-view .column-drag-header {
2477     -fx-background: -fx-accent;
2478     -fx-background-color: -fx-selection-bar;
2479     -fx-border-color: transparent;
2480     -fx-opacity: 0.6;
2481 }
2482 /* Semi-transparent overlay to indicate the column that is currently being moved */
2483 .table-view .column-overlay,
2484 .tree-table-view .column-overlay {
2485     -fx-background-color: darkgray;
2486     -fx-opacity: 0.3;
2487 }
2488 /* Header Sort Arrows */
2489 .table-view /*> column-header-background > nested-column-header >*/ .arrow,
2490 .tree-table-view /*> column-header-background > nested-column-header >*/ .arrow {
2491     -fx-background-color: -fx-mark-color;
2492     -fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */
2493     -fx-shape: "M 0 0 h 7 l -3.5 4 z";
2494 }
2495 /* This is shown when the table has no rows and/or no columns. */
2496 .table-view .empty-table,
2497 .tree-table-view .empty-table {
2498     -fx-background-color: white;
2499     -fx-font-size: 1.166667em; /* 14pt - 2 more than the default font */
2500 }
2501 
2502 /*******************************************************************************
2503  *                                                                             *
2504  * Table Cells                                                                 *
2505  *                                                                             *
2506  ******************************************************************************/
2507 
2508 .check-box-table-cell {
2509     -fx-alignment: center;
2510     -fx-padding: 0;
2511 }
2512 .check-box-table-cell > .check-box {
2513     -fx-font-size: 0.8em;
2514     -fx-opacity: 1;
2515     -fx-padding: 0 0 1 0;
2516 }
2517 .check-box-table-cell > .check-box > .box {
2518     -fx-background-color: -fx-outer-border, -fx-background;
2519     -fx-background-insets: 0,1;
2520 }
2521 .check-box-table-cell > .check-box:focused > .box {
2522     -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-background;
2523     -fx-background-insets: -0.2, 1, 1.6;
2524     -fx-background-radius: 3, 2, 1;
2525 }
2526 .check-box-table-cell > .check-box:selected > .box > .mark {
2527     -fx-background-color: -fx-text-background-color;
2528     -fx-background-insets: 0;
2529 }
2530 .table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .check-box-table-cell:selected > .check-box > .box,
2531 .tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .check-box-table-cell:selected > .check-box > .box,
2532 .table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected > .check-box-table-cell > .check-box > .box,
2533 .tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .check-box-table-cell > .check-box > .box {
2534     -fx-background-color: derive(-fx-accent,40%), -fx-background;
2535 }
2536 
2537 /*******************************************************************************
2538  *                                                                             *
2539  * TreeTableView                                                               *
2540  *                                                                             *
2541  * Note: A lot of the CSS for TreeTableView is included with the TreeView and  *
2542  * TableView CSS styles elsewhere in modena.css (as they are the same, just   *
2543  * targeting different CSS style classes).                                     *
2544  ******************************************************************************/
2545 
2546 .tree-table-row-cell {
2547     -fx-background: -fx-control-inner-background;
2548     -fx-background-color: -fx-background;
2549     -fx-padding: 0;
2550     -fx-text-fill: -fx-text-background-color;
2551     -fx-indent: 1em;
2552 }
2553 .tree-table-cell {
2554     /* tree-table-cell needs slightly different padding to make the text sit at
2555     the right height for the arrow */
2556     -fx-padding: 0.25em 0.166667em 0.083em 0.166667em; /* 3 2 1 2 , plus border adds 1px */
2557     -fx-background-color: null;
2558     -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
2559     -fx-cell-size: 2.0em; /* 24 */
2560     -fx-text-fill: -fx-text-background-color;
2561 }
2562 
2563 /*******************************************************************************
2564  *                                                                             *
2565  * Tooltip                                                                     *
2566  *                                                                             *
2567  ******************************************************************************/
2568 
2569 .tooltip {
2570     -fx-background: rgba(30,30,30);
2571     -fx-text-fill: white;
2572     -fx-background-color: rgba(30,30,30,0.8);
2573     -fx-background-radius: 6px;
2574     -fx-background-insets: 0;
2575     -fx-padding: 0.667em 0.75em 0.667em 0.75em; /* 10px */
2576     -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.5) , 10, 0.0 , 0 , 3 );
2577     -fx-font-size: 0.85em;
2578 }
2579 
2580 /*******************************************************************************
2581  *                                                                             *
2582  * Charts                                                                      *
2583  *                                                                             *
2584  ******************************************************************************/
2585 
2586 .chart {
2587     -fx-padding: 5px;
2588 }
2589 .chart-plot-background {
2590     -fx-background-color: -fx-background;
2591 }
2592 .chart-content {
2593     -fx-padding: 10px;
2594 }
2595 .chart-title {
2596     -fx-font-size: 1.4em;
2597 }
2598 .chart-legend {
2599    -fx-background-color: -fx-shadow-highlight-color,
2600         linear-gradient(to bottom, derive(-fx-background, -10%), derive(-fx-background, -5%)),
2601         linear-gradient(from 0px 0px to 0px 4px, derive(-fx-background, -4%), derive(-fx-background, 10%));
2602    -fx-background-insets: 0 0 -1 0, 0,1;
2603    -fx-background-radius: 4,4,3;
2604    -fx-padding: 6px;
2605 }
2606 
2607 /*******************************************************************************
2608  *                                                                             *
2609  * Axis                                                                        *
2610  *                                                                             *
2611  ******************************************************************************/
2612 
2613 .axis {
2614     AXIS_COLOR: derive(-fx-background,-20%);
2615     -fx-tick-label-font-size: 0.833333em; /* 10px */
2616     -fx-tick-label-fill: derive(-fx-text-background-color, 30%);
2617 }
2618 .axis:top {
2619     -fx-border-color: transparent transparent AXIS_COLOR transparent;
2620 }
2621 .axis:right {
2622     -fx-border-color: transparent transparent transparent AXIS_COLOR;
2623 }
2624 .axis:bottom {
2625     -fx-border-color: AXIS_COLOR transparent transparent transparent;
2626 }
2627 .axis:left {
2628     -fx-border-color: transparent AXIS_COLOR transparent transparent;
2629 }
2630 .axis:top > .axis-label,
2631 .axis:left > .axis-label { 
2632     -fx-padding: 0 0 4px 0; 
2633 }
2634 .axis:bottom > .axis-label,
2635 .axis:right > .axis-label { 
2636     -fx-padding: 4px 0 0 0; 
2637 }
2638 .axis-tick-mark,
2639 .axis-minor-tick-mark {
2640     -fx-fill: null;
2641     -fx-stroke: AXIS_COLOR;
2642 }
2643 
2644 /*******************************************************************************
2645  *                                                                             *
2646  * ChartPlot                                                                   *
2647  *                                                                             *
2648  ******************************************************************************/
2649 
2650 .chart-vertical-grid-lines {
2651     -fx-stroke: derive(-fx-background,-10%);
2652     -fx-stroke-dash-array: 0.25em, 0.25em;
2653 }
2654 .chart-horizontal-grid-lines {
2655     -fx-stroke: derive(-fx-background,-10%);
2656     -fx-stroke-dash-array: 0.25em, 0.25em;
2657 }
2658 .chart-alternative-column-fill {
2659     -fx-fill: null;
2660     -fx-stroke: null;
2661 }
2662 .chart-alternative-row-fill {
2663     -fx-fill: null;
2664     -fx-stroke: null;
2665 }
2666 .chart-vertical-zero-line,
2667 .chart-horizontal-zero-line {
2668     -fx-stroke: derive(-fx-text-background-color, 40%);
2669 }
2670 
2671 /*******************************************************************************
2672  *                                                                             *
2673  * ScatterChart                                                                *
2674  *                                                                             *
2675  ******************************************************************************/
2676 
2677 .chart-symbol { /* solid circle */
2678     -fx-background-color: CHART_COLOR_1;
2679     -fx-background-radius: 5px;
2680     -fx-padding: 5px;
2681 }
2682 .default-color1.chart-symbol { /* solid square */
2683     -fx-background-color: CHART_COLOR_2;
2684     -fx-background-radius: 0;
2685 }
2686 .default-color2.chart-symbol { /* solid diamond */
2687     -fx-background-color: CHART_COLOR_3;
2688     -fx-background-radius: 0;
2689     -fx-padding: 7px 5px 7px 5px;
2690     -fx-shape: "M5,0 L10,9 L5,18 L0,9 Z";
2691 }
2692 .default-color3.chart-symbol { /* cross */
2693     -fx-background-color: CHART_COLOR_4;
2694     -fx-background-radius: 0;
2695     -fx-background-insets: 0;
2696     -fx-shape: "M2,0 L5,4 L8,0 L10,0 L10,2 L6,5 L10,8 L10,10 L8,10 L5,6 L2,10 L0,10 L0,8 L4,5 L0,2 L0,0 Z";
2697 }
2698 .default-color4.chart-symbol { /* solid triangle */
2699     -fx-background-color: CHART_COLOR_5;
2700     -fx-background-radius: 0;
2701     -fx-background-insets: 0;
2702     -fx-shape: "M5,0 L10,8 L0,8 Z";
2703 }
2704 .default-color5.chart-symbol { /* hollow circle */
2705     -fx-background-color: CHART_COLOR_6, white;
2706     -fx-background-insets: 0, 2;
2707     -fx-background-radius: 5px;
2708     -fx-padding: 5px;
2709 }
2710 .default-color6.chart-symbol { /* hollow square */
2711     -fx-background-color: CHART_COLOR_7, white;
2712     -fx-background-insets: 0, 2;
2713     -fx-background-radius: 0;
2714 }
2715 .default-color7.chart-symbol { /* hollow diamond */
2716     -fx-background-color: CHART_COLOR_8, white;
2717     -fx-background-radius: 0;
2718     -fx-background-insets: 0, 2.5;
2719     -fx-padding: 7px 5px 7px 5px;
2720     -fx-shape: "M5,0 L10,9 L5,18 L0,9 Z";
2721 }
2722 
2723 /*******************************************************************************
2724  *                                                                             *
2725  * LineChart                                                                     *
2726  *                                                                             *
2727  ******************************************************************************/
2728 
2729 .chart-line-symbol {
2730     -fx-background-color: CHART_COLOR_1, white;
2731     -fx-background-insets: 0, 2;
2732     -fx-background-radius: 5px;
2733     -fx-padding: 5px;
2734 }
2735 .chart-series-line {
2736     -fx-stroke: CHART_COLOR_1;
2737     -fx-stroke-width: 3px;
2738 }
2739 .default-color0.chart-line-symbol { -fx-background-color: CHART_COLOR_1, white; }
2740 .default-color1.chart-line-symbol { -fx-background-color: CHART_COLOR_2, white; }
2741 .default-color2.chart-line-symbol { -fx-background-color: CHART_COLOR_3, white; }
2742 .default-color3.chart-line-symbol { -fx-background-color: CHART_COLOR_4, white; }
2743 .default-color4.chart-line-symbol { -fx-background-color: CHART_COLOR_5, white; }
2744 .default-color5.chart-line-symbol { -fx-background-color: CHART_COLOR_6, white; }
2745 .default-color6.chart-line-symbol { -fx-background-color: CHART_COLOR_7, white; }
2746 .default-color7.chart-line-symbol { -fx-background-color: CHART_COLOR_8, white; }
2747 .default-color0.chart-series-line { -fx-stroke: CHART_COLOR_1; }
2748 .default-color1.chart-series-line { -fx-stroke: CHART_COLOR_2; }
2749 .default-color2.chart-series-line { -fx-stroke: CHART_COLOR_3; }
2750 .default-color3.chart-series-line { -fx-stroke: CHART_COLOR_4; }
2751 .default-color4.chart-series-line { -fx-stroke: CHART_COLOR_5; }
2752 .default-color5.chart-series-line { -fx-stroke: CHART_COLOR_6; }
2753 .default-color6.chart-series-line { -fx-stroke: CHART_COLOR_7; }
2754 .default-color7.chart-series-line { -fx-stroke: CHART_COLOR_8; }
2755 
2756 /*******************************************************************************
2757  *                                                                             *
2758  * AreaChart                                                                   *
2759  *                                                                             *
2760  ******************************************************************************/
2761 
2762 .chart-area-symbol {
2763     -fx-background-color: CHART_COLOR_1, white;
2764     -fx-background-insets: 0, 1;
2765     -fx-background-radius: 4px; /* makes sure this remains circular */
2766     -fx-padding: 3px;
2767 }
2768 .default-color0.chart-area-symbol { -fx-background-color: CHART_COLOR_1, white; }
2769 .default-color1.chart-area-symbol { -fx-background-color: CHART_COLOR_2, white; }
2770 .default-color2.chart-area-symbol { -fx-background-color: CHART_COLOR_3, white; }
2771 .default-color3.chart-area-symbol { -fx-background-color: CHART_COLOR_4, white; }
2772 .default-color4.chart-area-symbol { -fx-background-color: CHART_COLOR_5, white; }
2773 .default-color5.chart-area-symbol { -fx-background-color: CHART_COLOR_6, white; }
2774 .default-color6.chart-area-symbol { -fx-background-color: CHART_COLOR_7, white; }
2775 .default-color7.chart-area-symbol { -fx-background-color: CHART_COLOR_8, white; }
2776 .chart-series-area-line {
2777     -fx-stroke: CHART_COLOR_1;
2778     -fx-stroke-width: 1px;
2779 }
2780 .default-color0.chart-series-area-line { -fx-stroke: CHART_COLOR_1; }
2781 .default-color1.chart-series-area-line { -fx-stroke: CHART_COLOR_2; }
2782 .default-color2.chart-series-area-line { -fx-stroke: CHART_COLOR_3; }
2783 .default-color3.chart-series-area-line { -fx-stroke: CHART_COLOR_4; }
2784 .default-color4.chart-series-area-line { -fx-stroke: CHART_COLOR_5; }
2785 .default-color5.chart-series-area-line { -fx-stroke: CHART_COLOR_6; }
2786 .default-color6.chart-series-area-line { -fx-stroke: CHART_COLOR_7; }
2787 .default-color7.chart-series-area-line { -fx-stroke: CHART_COLOR_8; }
2788 .chart-series-area-fill {
2789     -fx-stroke: null;
2790     -fx-fill: CHART_COLOR_1_TRANS_20;
2791 }
2792 .default-color0.chart-series-area-fill { -fx-fill: CHART_COLOR_1_TRANS_20; }
2793 .default-color1.chart-series-area-fill { -fx-fill: CHART_COLOR_2_TRANS_20; }
2794 .default-color2.chart-series-area-fill { -fx-fill: CHART_COLOR_3_TRANS_20; }
2795 .default-color3.chart-series-area-fill { -fx-fill: CHART_COLOR_4_TRANS_20; }
2796 .default-color4.chart-series-area-fill { -fx-fill: CHART_COLOR_5_TRANS_20; }
2797 .default-color5.chart-series-area-fill { -fx-fill: CHART_COLOR_6_TRANS_20; }
2798 .default-color6.chart-series-area-fill { -fx-fill: CHART_COLOR_7_TRANS_20; }
2799 .default-color7.chart-series-area-fill { -fx-fill: CHART_COLOR_8_TRANS_20; }
2800 .area-legend-symbol {
2801     -fx-padding: 6px;
2802     -fx-background-radius: 6px; /* makes sure this remains circular */
2803     -fx-background-insets: 0, 3;
2804 }
2805 
2806 /*******************************************************************************
2807  *                                                                             *
2808  * BubbleChart                                                                 *
2809  *                                                                             *
2810  ******************************************************************************/
2811 
2812 .bubble-legend-symbol {
2813     -fx-background-radius: 8px;
2814     -fx-padding: 8px;
2815 }
2816 .chart-bubble {
2817     -fx-bubble-fill: CHART_COLOR_1_TRANS_70;
2818     -fx-background-color: radial-gradient(center 50% 50%, radius 80%, derive(-fx-bubble-fill,20%), derive(-fx-bubble-fill,-30%));
2819 }
2820 .default-color0.chart-bubble { -fx-bubble-fill: CHART_COLOR_1_TRANS_70; }
2821 .default-color1.chart-bubble { -fx-bubble-fill: CHART_COLOR_2_TRANS_70; }
2822 .default-color2.chart-bubble { -fx-bubble-fill: CHART_COLOR_3_TRANS_70; }
2823 .default-color3.chart-bubble { -fx-bubble-fill: CHART_COLOR_4_TRANS_70; }
2824 .default-color4.chart-bubble { -fx-bubble-fill: CHART_COLOR_5_TRANS_70; }
2825 .default-color5.chart-bubble { -fx-bubble-fill: CHART_COLOR_6_TRANS_70; }
2826 .default-color6.chart-bubble { -fx-bubble-fill: CHART_COLOR_7_TRANS_70; }
2827 .default-color7.chart-bubble { -fx-bubble-fill: CHART_COLOR_8_TRANS_70; }
2828 
2829 /*******************************************************************************
2830  *                                                                             *
2831  * BarChart                                                                    *
2832  *                                                                             *
2833  ******************************************************************************/
2834 
2835 .chart-bar {
2836     -fx-bar-fill: CHART_COLOR_1;
2837     -fx-background-color:   linear-gradient(to right, 
2838                                 derive(-fx-bar-fill, -4%),
2839                                 derive(-fx-bar-fill, -1%),
2840                                 derive(-fx-bar-fill, 0%),
2841                                 derive(-fx-bar-fill, -1%),
2842                                 derive(-fx-bar-fill, -6%)
2843                               );
2844     -fx-background-insets: 0;
2845 }
2846 .chart-bar.negative {
2847     -fx-background-insets: 1 0 0 0;
2848 }
2849 .bar-chart:horizontal .chart-bar {
2850     -fx-background-insets: 0 0 0 1;
2851 }
2852 .bar-chart:horizontal .chart-bar, 
2853 .stacked-bar-chart:horizontal .chart-bar {
2854     -fx-background-color:   linear-gradient(to bottom, 
2855                                 derive(-fx-bar-fill, -4%),
2856                                 derive(-fx-bar-fill, -1%),
2857                                 derive(-fx-bar-fill, 0%),
2858                                 derive(-fx-bar-fill, -1%),
2859                                 derive(-fx-bar-fill, -6%)
2860                               );
2861 }
2862 .default-color0.chart-bar { -fx-bar-fill: CHART_COLOR_1; }
2863 .default-color1.chart-bar { -fx-bar-fill: CHART_COLOR_2; }
2864 .default-color2.chart-bar { -fx-bar-fill: CHART_COLOR_3; }
2865 .default-color3.chart-bar { -fx-bar-fill: CHART_COLOR_4; }
2866 .default-color4.chart-bar { -fx-bar-fill: CHART_COLOR_5; }
2867 .default-color5.chart-bar { -fx-bar-fill: CHART_COLOR_6; }
2868 .default-color6.chart-bar { -fx-bar-fill: CHART_COLOR_7; }
2869 .default-color7.chart-bar { -fx-bar-fill: CHART_COLOR_8; }
2870 .bar-legend-symbol {
2871     -fx-padding: 8px;
2872 }
2873 
2874 /*******************************************************************************
2875  *                                                                             *
2876  * PieChart                                                                    *
2877  *                                                                             *
2878  ******************************************************************************/
2879 
2880 .chart-pie {
2881     -fx-pie-color: CHART_COLOR_1;
2882     -fx-background-color: radial-gradient(radius 100%, derive(-fx-pie-color,20%), derive(-fx-pie-color,-10%));
2883     -fx-background-insets: 1;
2884     -fx-border-color: -fx-background;
2885 }
2886 .chart-pie-label {
2887     -fx-padding: 3px;
2888     -fx-fill: -fx-text-base-color;
2889 }
2890 .chart-pie-label-line {
2891     -fx-stroke: derive(-fx-background,-20%);
2892 }
2893 .default-color0.chart-pie { -fx-pie-color: CHART_COLOR_1; }
2894 .default-color1.chart-pie { -fx-pie-color: CHART_COLOR_2; }
2895 .default-color2.chart-pie { -fx-pie-color: CHART_COLOR_3; }
2896 .default-color3.chart-pie { -fx-pie-color: CHART_COLOR_4; }
2897 .default-color4.chart-pie { -fx-pie-color: CHART_COLOR_5; }
2898 .default-color5.chart-pie { -fx-pie-color: CHART_COLOR_6; }
2899 .default-color6.chart-pie { -fx-pie-color: CHART_COLOR_7; }
2900 .default-color7.chart-pie { -fx-pie-color: CHART_COLOR_8; }
2901 .negative.chart-pie {
2902     -fx-pie-color: transparent;
2903     -fx-background-color: white;
2904 }
2905 .pie-legend-symbol.chart-pie {
2906     -fx-background-radius: 8px;
2907     -fx-padding: 8px;
2908     -fx-border-color: null;
2909 }
2910 
2911 /*******************************************************************************
2912  *                                                                             *
2913  * Combinations                                                                *
2914  *                                                                             *
2915  * This section is for special handling of when one control is nested inside   *
2916  * another control. There are many cases where we would end up with ugly       *
2917  * double borders that are fixed here.                                         *
2918  *                                                                             *
2919  ******************************************************************************/
2920 
2921 .tab-pane > * > .table-view,
2922 .tab-pane > * > .tree-table-view,
2923 .tab-pane > * > .list-view,
2924 .tab-pane > * > .tree-view,
2925 .tab-pane > * > .scroll-pane,
2926 .tab-pane > * > .split-pane,
2927 .tab-pane > * > .text-area,
2928 .tab-pane > * > .html-editor,
2929 .split-pane > * > .tab-pane,
2930 .split-pane > * > .table-view,
2931 .split-pane > * > .tree-table-view,
2932 .split-pane > * > .list-view,
2933 .split-pane > * > .tree-view,
2934 .split-pane > * > .scroll-pane,
2935 .split-pane > * > .split-pane,
2936 .split-pane > * > .text-area,
2937 .split-pane > * > .html-editor {
2938     -fx-background-insets: 0, 0;
2939     -fx-padding: 0;
2940  }
2941  .tab-pane > * > .scroll-pane > .corner {
2942      -fx-background-insets: 0;  /* Fix for RT-35067 */
2943  }
2944 .tab-pane.floating > * > .table-view,
2945 .tab-pane.floating > * > .tree-table-view,
2946 .tab-pane.floating > * > .list-view,
2947 .tab-pane.floating > * > .tree-view,
2948 .tab-pane.floating > * > .scroll-pane,
2949 .tab-pane.floating > * > .split-pane,
2950 .tab-pane.floating > * > .text-area,
2951 .tab-pane.floating > * > .html-editor {
2952     -fx-background-insets: 0, 0;
2953     -fx-padding: -1;
2954 }
2955 .split-pane > * > .accordion > .titled-pane > *.content {
2956     -fx-border-color: null;
2957     -fx-border-insets: 0;
2958 }
2959 .split-pane > * > .accordion > .titled-pane > .title  {
2960     -fx-background-insets: 0,1 0 1 0, 2 1 2 1;
2961 }
2962 .split-pane > * > .accordion > .first-titled-pane > .title  {
2963     -fx-background-insets: 0,0 0 1 0, 1 1 2 1;
2964 }
2965 .split-pane > * > .accordion > .titled-pane:collapsed > .title  {
2966     -fx-background-insets: 0,1 0 0 0, 2 1 1 1;
2967 }
2968 .split-pane > * > .accordion > .first-titled-pane:collapsed > .title  {
2969     -fx-background-insets: 0,0 0 0 0, 1 1 1 1;
2970 }
2971 .titled-pane > .content > .split-pane,
2972 .titled-pane > .content > .text-area,
2973 .titled-pane > .content > .html-editor,
2974 .titled-pane > .content > .list-view,
2975 .titled-pane > .content > .tree-view,
2976 .titled-pane > .content > .table-view,
2977 .titled-pane > .content > .tree-table-view,
2978 .titled-pane > .content > .scroll-pane {
2979     -fx-background-color: null;
2980     -fx-background-insets: 0, 0;
2981     -fx-padding: 0;
2982 }
2983 
2984 .titled-pane > .content > AnchorPane,
2985 .titled-pane > .content > BorderPane,
2986 .titled-pane > .content > FlowPane,
2987 .titled-pane > .content > GridPane,
2988 .titled-pane > .content > HBox,
2989 .titled-pane > .content > Pane,
2990 .titled-pane > .content > StackPane,
2991 .titled-pane > .content > TilePane,
2992 .titled-pane > .content > VBox {
2993     -fx-padding: 0.8em;
2994 }
2995 
2996 /*******************************************************************************
2997  *                                                                             *
2998  * DatePicker                                                                  *
2999  *                                                                             *
3000  ******************************************************************************/
3001 
3002 .date-picker > .arrow-button > .arrow {
3003     -fx-shape: "M0,0v9h9V0H0z M2,8H1V7h1V8z M2,6H1V5h1V6z M2,4H1V3h1V4z M4,8H3V7h1V8z M4,6H3V5h1V6z M4,4H3V3h1V4z M6,8H5V7h1V8z M6,6H5 V5h1V6z M6,4H5V3h1V4z M8,8H7V7h1V8z M8,6H7V5h1V6z M8,4H7V3h1V4z";
3004     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
3005     -fx-background-insets: 1 0 -1 0, 0;
3006     -fx-padding: 0.416667em 0.416667em 0.333333em 0.333333em; /* 5 5 4 4 */
3007     -fx-scale-shape: true;
3008 }
3009 
3010 .date-picker-popup {
3011      -fx-background-color:
3012         linear-gradient(to bottom,
3013             derive(-fx-color,-17%),
3014             derive(-fx-color,-30%)
3015         ),
3016         -fx-control-inner-background;
3017     -fx-background-insets: 0, 1;
3018     -fx-background-radius: 0;
3019     -fx-alignment: CENTER; /* VBox */
3020     -fx-spacing: 0; /* VBox */
3021     -fx-padding: 0.083333em; /* 1 1 1 1 */
3022     -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
3023 }
3024 .date-picker-popup > .month-year-pane {
3025     -fx-padding: 0.588883em 0.5em 0.666667em 0.5em; /* 7 6 8 6 */
3026     -fx-background-color: derive(-fx-box-border,30%), linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
3027     -fx-background-insets: 0 0 0 0, 0 0 1 0;
3028 }
3029 .date-picker-popup > * > .spinner {
3030     -fx-spacing: 0.25em; /* 3 */
3031     -fx-alignment: CENTER;
3032     -fx-fill-height: false;
3033     -fx-background-color: transparent;
3034 }
3035 .date-picker-popup > * > .spinner > .button {
3036     -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
3037     -fx-background-insets: 0, 1, 2;
3038     -fx-color: transparent;
3039     -fx-background-radius: 0;
3040 }
3041 .date-picker-popup > * > .spinner > .button:focused {
3042     -fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
3043     -fx-color: -fx-hover-base;
3044     -fx-background-insets: -0.2, 1, 2, -1.4, 2.6;
3045 }
3046 .date-picker-popup > * > .spinner > .button:hover {
3047     -fx-color: -fx-hover-base;
3048 }
3049 .date-picker-popup > * > .spinner > .button:armed {
3050     -fx-color: -fx-pressed-base;
3051 }
3052 .date-picker-popup > * > .spinner > .left-button {
3053     -fx-padding: 0 0.333333em 0 0.25em; /* 0 4 0 3 */
3054 }
3055 .date-picker-popup > * > .spinner > .right-button {
3056     -fx-padding: 0 0.25em 0 0.333333em; /* 0 3 0 4 */
3057 }
3058 .date-picker-popup > * > .spinner > .button > .left-arrow,
3059 .date-picker-popup > * > .spinner > .button > .right-arrow {
3060     -fx-background-color: -fx-mark-highlight-color, derive(-fx-base,-45%);
3061     -fx-background-insets: 1 0 -1 0, 0;
3062     -fx-padding: 0.333333em 0.166667em 0.333333em 0.166667em; /* 4 2 4 2 */
3063     -fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
3064 }
3065 .date-picker-popup > * > .spinner > .button:hover > .left-arrow,
3066 .date-picker-popup > * > .spinner > .button:hover > .right-arrow {
3067     -fx-background-color: -fx-mark-highlight-color, derive(-fx-base,-50%);
3068 }
3069 .date-picker-popup > * > .spinner > .button:pressed > .left-arrow,
3070 .date-picker-popup > * > .spinner > .button:pressed > .right-arrow {
3071     -fx-background-color: -fx-mark-highlight-color, derive(-fx-base,-55%);
3072 }
3073 .date-picker-popup > * > .spinner > .button > .left-arrow {
3074     -fx-padding: 0.333333em 0.25em 0.333333em 0.166667em; /* 4 3 4 2 */
3075     -fx-shape: "M5.997,5.072L5.995,6.501l-2.998-4l2.998-4l0.002,1.43l-1.976,2.57L5.997,5.072z";
3076     -fx-scale-shape: true;
3077 }
3078 .date-picker-popup > * > .spinner > .button > .right-arrow {
3079     -fx-padding: 0.333333em 0.25em 0.333333em 0.166667em; /* 4 3 4 2 */
3080     -fx-shape: "M2.998-0.07L3-1.499l2.998,4L3,6.501l-0.002-1.43l1.976-2.57L2.998-0.07z";
3081     -fx-scale-shape: true;
3082 }
3083 .date-picker-popup > * > .spinner > .label {
3084     -fx-alignment: CENTER;
3085 }
3086 .date-picker-popup > .month-year-pane > .secondary-label {
3087     -fx-alignment: BASELINE_CENTER;
3088     -fx-padding: 0.5em 0 0 0; /* 6 0 0 0 */
3089     -fx-text-fill: #f3622d;
3090 }
3091 
3092 .date-picker-popup > .calendar-grid {
3093     -fx-background-color: derive(-fx-selection-bar-non-focused, 60%);
3094     /*-fx-background-insets: 1 0 0 0;*/
3095     -fx-padding: 0;
3096 }
3097 .date-picker-popup > * > .date-cell { 
3098     -fx-background-color: transparent;
3099     -fx-background-insets: 1, 2;
3100     -fx-padding: 0;
3101     -fx-alignment: BASELINE_CENTER;
3102     -fx-opacity: 1.0;
3103 }
3104 .date-picker-popup > * > .day-name-cell,
3105 .date-picker-popup > * > .week-number-cell {
3106     -fx-font-size: 0.916667em; 
3107 }
3108 .date-picker-popup > * > .week-number-cell {
3109     -fx-padding: 0.333333em 0.583333em 0.333333em 0.583333em; /* 4 7 4 7 */
3110     -fx-border-color: -fx-control-inner-background;
3111     -fx-border-width: 1px;
3112     -fx-background: -fx-control-inner-background;
3113     -fx-background-color: -fx-background;
3114     -fx-text-fill: -fx-accent;
3115 }
3116 .date-picker-popup > * > .day-cell {
3117     -fx-padding: 0.333333em 0.583333em 0.333333em 0.583333em; /* 4 7 4 7 */
3118     -fx-border-color: derive(-fx-selection-bar-non-focused, 60%);
3119     -fx-border-width: 1px;
3120     -fx-font-size: 1em;
3121     -fx-background: -fx-control-inner-background;
3122     -fx-background-color: -fx-background;
3123     -fx-text-fill: -fx-text-background-color;
3124 }
3125 .date-picker-popup > * > .hijrah-day-cell {
3126     -fx-alignment: TOP_LEFT;
3127     -fx-padding: 0.083333em 0.333333em 0.083333em 0.333333em; /* 1 4 1 4 */
3128     -fx-cell-size: 2.75em;
3129 }
3130 .date-picker-popup > * > .day-cell > .secondary-text {
3131     -fx-fill: #f3622d;
3132 }
3133 .date-picker-popup > * > .today {
3134     -fx-background-color: -fx-control-inner-background, derive(-fx-selection-bar-non-focused, -20%), -fx-control-inner-background;
3135     -fx-background-insets: 1, 2, 3;
3136 }
3137 .date-picker-popup > * > .day-cell:hover,
3138 .date-picker-popup > * > .selected,
3139 .date-picker-popup > * > .previous-month.selected,
3140 .date-picker-popup > * > .next-month.selected {
3141     -fx-background: -fx-selection-bar;
3142 }
3143 .date-picker-popup > * > .previous-month:hover,
3144 .date-picker-popup > * > .next-month:hover {
3145     -fx-background: -fx-selection-bar-non-focused;
3146 }
3147 .date-picker-popup > * > .today:hover,
3148 .date-picker-popup > * > .today.selected {
3149     -fx-background-color: -fx-selection-bar, derive(-fx-selection-bar-non-focused, -20%),-fx-selection-bar;
3150 }
3151 .date-picker-popup > * > .day-cell:focused,
3152 .date-picker-popup > * > .today:focused {
3153     -fx-background-color: -fx-control-inner-background, -fx-cell-focus-inner-border, -fx-control-inner-background;
3154     -fx-background-insets: 1, 2, 3;
3155 }
3156 .date-picker-popup > * > .day-cell:focused:hover,
3157 .date-picker-popup > * > .today:focused:hover,
3158 .date-picker-popup > * > .selected:focused,
3159 .date-picker-popup > * > .today.selected:focused {
3160     -fx-background-color: -fx-selection-bar, -fx-cell-focus-inner-border, -fx-selection-bar;
3161 }
3162 .date-picker-popup > * > .previous-month,
3163 .date-picker-popup > * > .next-month {
3164     -fx-background: derive(-fx-control-inner-background, -4%);
3165 }
3166 .date-picker-popup > * > .day-cell:hover > .secondary-text,
3167 .date-picker-popup > * > .previous-month > .secondary-text,
3168 .date-picker-popup > * > .next-month > .secondary-text,
3169 .date-picker-popup > * > .selected > .secondary-text {
3170     -fx-fill: -fx-text-background-color;
3171 }
3172 .date-picker-popup > * > .previous-month.today,
3173 .date-picker-popup > * > .next-month.today {
3174     -fx-background-color: derive(-fx-control-inner-background, -4%), derive(-fx-selection-bar-non-focused, -20%), derive(-fx-control-inner-background, -4%);
3175 }
3176 
3177 .date-picker-popup > * > .previous-month.today:hover,
3178 .date-picker-popup > * > .next-month.today:hover {
3179     -fx-background-color: -fx-selection-bar-non-focused, derive(-fx-selection-bar-non-focused, -20%), -fx-selection-bar-non-focused;
3180 }
3181 
3182 /*******************************************************************************
3183  *                                                                             *
3184  * Spinner                                                                     *
3185  *                                                                             *
3186  ******************************************************************************/
3187 
3188 .spinner {
3189     -fx-background-color:
3190         linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
3191         linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
3192     -fx-background-insets: 0, 1;
3193     -fx-background-radius: 3, 2;
3194 }
3195 .spinner:focused,
3196 .spinner:contains-focus {
3197     -fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
3198     -fx-background-insets: -0.2, 1, 2, -1.4, 2.6;
3199     -fx-background-radius: 3, 2, 1, 4, 1;
3200 }
3201 .spinner > .text-field {
3202     -fx-background-color:
3203         linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
3204         linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
3205     -fx-background-insets: 0, 1 0 1 1;
3206     -fx-background-radius: 3 0 0 3, 2 0 0 2;
3207 }
3208 .spinner:focused > .text-field,
3209 .spinner:contains-focus > .text-field {
3210     -fx-background-color:
3211         -fx-control-inner-background,
3212         -fx-faint-focus-color,
3213         linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
3214     -fx-background-insets: 1 0 1 1, 1 0 1 1, 3 2 3 3;
3215     -fx-background-radius: 2 0 0 2, 1 0 0 1, 0;
3216 }
3217 
3218 .spinner .increment-arrow-button {
3219     -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
3220      /*Change the two 0's here to -1 to get rid of the horizontal line */
3221     -fx-background-insets: 0 0 -1 0, 1 1 0 1, 2 2 1 2;
3222     -fx-background-radius: 0 3 0 0, 0 2 0 0, 0 1 0 0;
3223     -fx-padding: 0.333335em 0.666667em 0.333335em 0.666667em;  /* 5 8 3 8 */
3224 }
3225 .spinner .decrement-arrow-button {
3226     -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
3227     -fx-background-insets: 0, 1 1 1 1, 1 2 2 2;
3228     -fx-background-radius: 0 0 3 0, 0 0 2 0, 0 0 1 0;
3229     -fx-padding: 0.333335em 0.666667em 0.333335em 0.666667em;  /* 3 8 5 8 */
3230 }
3231 .spinner:focused .increment-arrow-button,
3232 .spinner:contains-focus .increment-arrow-button,
3233 .spinner:focused .decrement-arrow-button,
3234 .spinner:contains-focus .decrement-arrow-button {
3235     -fx-background-color: -fx-focus-color, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
3236 }
3237 
3238 .spinner .increment-arrow-button .increment-arrow {
3239     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
3240     -fx-background-insets: 0 0 -1 0, 0;
3241     -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em;  /* 2 4 2 4 */
3242     -fx-shape: "M 0 4 h 7 l -3.5 -4 z";
3243 }
3244 .spinner .decrement-arrow-button .decrement-arrow {
3245     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
3246     -fx-background-insets: 0 0 -1 0, 0;
3247     -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
3248     -fx-shape: "M 0 0 h 7 l -3.5 4 z";
3249 }
3250 
3251 /* Spinner - Horizontal arrows */
3252 .spinner.split-arrows-horizontal .increment-arrow-button .increment-arrow,
3253 .spinner.arrows-on-right-horizontal .increment-arrow-button .increment-arrow,
3254 .spinner.arrows-on-left-horizontal .increment-arrow-button .increment-arrow {
3255     -fx-padding: 0.333333em 0.166667em 0.333333em 0.166667em; /* 4 2 4 2 */
3256     -fx-shape: "M 0 0 v 7 l 3.5 -4 z";
3257 }
3258 .spinner.split-arrows-horizontal .decrement-arrow-button .decrement-arrow,
3259 .spinner.arrows-on-right-horizontal .decrement-arrow-button .decrement-arrow,
3260 .spinner.arrows-on-left-horizontal .decrement-arrow-button .decrement-arrow {
3261     -fx-padding: 0.333333em 0.166667em 0.333333em 0.166667em; /* 4 2 4 2 */
3262     -fx-shape: "M 4 0 v 7 l -4 -3.5 z";
3263 }
3264 
3265 /* Spinner - STYLE_CLASS_ARROWS_ON_RIGHT_HORIZONTAL */
3266 .spinner.arrows-on-right-horizontal .increment-arrow-button {
3267     -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
3268     -fx-background-insets: 0 0 0 -1, 1 1 1 0, 2 2 2 1;
3269 }
3270 .spinner.arrows-on-right-horizontal .decrement-arrow-button {
3271     -fx-background-radius: 0;
3272     -fx-background-insets: 0, 1, 2;
3273 }
3274 
3275 /* Spinner - STYLE_CLASS_ARROWS_ON_LEFT_VERTICAL */
3276 .spinner.arrows-on-left-vertical > .text-field {
3277     -fx-background-insets: 0, 1 1 1 0;
3278     -fx-background-radius: 0 3 3 0, 0 2 2 0;
3279 }
3280 .spinner.arrows-on-left-vertical .increment-arrow-button {
3281     -fx-background-radius: 3 0 0 0, 2 0 0 0, 1 0 0 0;
3282 }
3283 .spinner.arrows-on-left-vertical .decrement-arrow-button {
3284     -fx-background-radius: 0 0 0 3, 0 0 0 2, 0 0 0 1;
3285 }
3286 
3287 /* Spinner - STYLE_CLASS_ARROWS_ON_LEFT_HORIZONTAL */
3288 .spinner.arrows-on-left-horizontal > .text-field {
3289     -fx-background-insets: 0, 1 1 1 0;
3290     -fx-background-radius: 0 3 3 0, 0 2 2 0;
3291 }
3292 .spinner.arrows-on-left-horizontal .increment-arrow-button {
3293     -fx-background-insets: 0 0 0 -1, 1 1 1 0, 2 2 2 1;
3294     -fx-background-radius: 0;
3295 }
3296 .spinner.arrows-on-left-horizontal .decrement-arrow-button {
3297     -fx-background-insets: 0, 1, 2;
3298     -fx-background-radius: 3 0 0 3, 2 0 0 2, 1 0 0 1;
3299 }
3300 .spinner.arrows-on-left-vertical:focused > .text-field,
3301 .spinner.arrows-on-left-vertical:contains-focus > .text-field,
3302 .spinner.arrows-on-left-horizontal:focused > .text-field,
3303 .spinner.arrows-on-left-horizontal:contains-focus > .text-field {
3304     -fx-background-insets: 1 1 1 0, 1 1 1 0, 3 3 3 2;
3305 }
3306 
3307 /* Spinner - STYLE_CLASS_SPLIT_ARROWS_VERTICAL */
3308 .spinner.split-arrows-vertical > .text-field {
3309     -fx-background-insets: 0, 0 1 0 1;
3310     -fx-background-radius: 0, 0;
3311 }
3312 .spinner.split-arrows-vertical .increment-arrow-button {
3313     -fx-background-insets: 0, 1, 2;
3314     -fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0;
3315 }
3316 .spinner.split-arrows-vertical .decrement-arrow-button {
3317     -fx-background-insets: 0, 1, 2;
3318     -fx-background-radius: 0 0 3 3, 0 0 2 2, 0 0 1 1;
3319 }
3320 .spinner.split-arrows-vertical:focused > .text-field,
3321 .spinner.split-arrows-vertical:contains-focus > .text-field {
3322     -fx-background-insets: 0 1 0 1, 0 1 0 1, 2 3 2 3;
3323 }
3324 
3325 /* Spinner - STYLE_CLASS_SPLIT_ARROWS_HORIZONTAL */
3326 .spinner.split-arrows-horizontal > .text-field {
3327     -fx-background-insets: 0, 1 0 1 0;
3328     -fx-background-radius: 0, 0;
3329 }
3330 .spinner.split-arrows-horizontal .increment-arrow-button {
3331     -fx-background-insets: 0, 1, 2;
3332     -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
3333 }
3334 .spinner.split-arrows-horizontal .decrement-arrow-button {
3335     -fx-background-insets: 0, 1, 2;
3336     -fx-background-radius: 3 0 0 3, 2 0 0 2, 1 0 0 1;
3337 }
3338 .spinner.split-arrows-horizontal:focused > .text-field,
3339 .spinner.split-arrows-horizontal:contains-focus > .text-field {
3340     -fx-background-insets: 1 0 1 0, 1 0 1 0, 3 2 3 2;
3341 }
3342 
3343 /*******************************************************************************
3344  *                                                                             *
3345  * Dialog                                                                      *
3346  *                                                                             *
3347  ******************************************************************************/
3348 
3349 .dialog-pane {
3350     -fx-background-color: -fx-background;
3351     -fx-padding: 0;
3352 }
3353 
3354 .dialog-pane > .expandable-content {
3355     -fx-padding: 0.666em; /* 8px */
3356 }
3357 
3358 .dialog-pane > .button-bar > .container {
3359     -fx-padding: 0.833em; /* 10px */
3360 }
3361 
3362 .dialog-pane > .content.label {
3363     -fx-alignment: top-left;
3364     -fx-padding: 1.333em 0.833em 0 0.833em; /* 16px 10px 0px 10px */
3365 }
3366 
3367 .dialog-pane > .content {
3368     -fx-padding: 0.833em; /* 10 */
3369 }
3370 
3371 .dialog-pane:no-header .graphic-container {
3372     -fx-padding: 0.833em 0 0 0.833em; /* 10px 0px 0px 10px */
3373 }
3374 
3375 .dialog-pane:header .header-panel {
3376     /*-fx-padding: 0.833em 1.166em 0.833em 1.166em; *//* 10px 14px 10px 14px */
3377     -fx-padding: 0.833em; /* 10px */
3378     -fx-background-color: -fx-box-border, linear-gradient(-fx-background, derive(-fx-background, 30%));
3379     -fx-background-insets: 0, 0 0 1 0;
3380 }
3381 
3382 .dialog-pane:header .header-panel .label {
3383     -fx-font-size: 1.167em; /* 14px */
3384     -fx-wrap-text: true;
3385 }
3386 
3387 .dialog-pane:header .header-panel .graphic-container {
3388     /* This prevents the text in the header running directly into the graphic */
3389     -fx-padding: 0 0 0 0.833em; /* 0px 0px 0px 10px */
3390 }
3391 
3392 .dialog-pane > .button-bar > .container > .details-button {
3393   -fx-alignment: baseline-left;
3394   -fx-focus-traversable: false;
3395   -fx-padding: 0.416em; /* 5px */
3396 }
3397 
3398 .dialog-pane > .button-bar > .container > .details-button.more {
3399     -fx-graphic: url("dialog-more-details.png");
3400 }
3401 
3402 .dialog-pane > .button-bar > .container > .details-button.less {
3403     -fx-graphic: url("dialog-fewer-details.png");
3404 }
3405 
3406 .dialog-pane > .button-bar > .container > .details-button:hover {
3407     -fx-underline: true;
3408 }
3409 
3410 .alert.confirmation.dialog-pane,
3411 .text-input-dialog.dialog-pane,
3412 .choice-dialog.dialog-pane {
3413     -fx-graphic: url("dialog-confirm.png");
3414 }
3415 
3416 .alert.information.dialog-pane {
3417     -fx-graphic: url("dialog-information.png");
3418 }
3419 
3420 .alert.error.dialog-pane {
3421     -fx-graphic: url("dialog-error.png");
3422 }
3423 
3424 .alert.warning.dialog-pane {
3425     -fx-graphic: url("dialog-warning.png");
3426 }