changeset 2239:800fa5f31489

Modena: Lots of tweeks. Styling for tabs. New tab tests for left right and bottom. Workarounds for RT-27627, so can share arrow styles and tree-table works. Changed style for separators. Added toolbar button for idependently changing background color.
author "Jasper Potts"
date Mon, 14 Jan 2013 19:25:16 -0800
parents 692177a0af9d
children c47b77160532
files apps/experiments/Modena/nbproject/configs/Run_as_WebStart.properties apps/experiments/Modena/nbproject/configs/Run_in_Browser.properties apps/experiments/Modena/src/modena/Modena.css apps/experiments/Modena/src/modena/Modena.java apps/experiments/Modena/src/modena/SamplePage.java apps/experiments/Modena/src/modena/SamplePageHelpers.java apps/experiments/Modena/src/modena/ui-mosaic.fxml
diffstat 7 files changed, 312 insertions(+), 268 deletions(-) [+]
line wrap: on
line diff
--- a/apps/experiments/Modena/nbproject/configs/Run_as_WebStart.properties	Mon Jan 14 17:19:08 2013 -0800
+++ b/apps/experiments/Modena/nbproject/configs/Run_as_WebStart.properties	Mon Jan 14 19:25:16 2013 -0800
@@ -0,0 +1,2 @@
+# Do not modify this property in this configuration. It can be re-generated.
+$label=Run as WebStart
--- a/apps/experiments/Modena/nbproject/configs/Run_in_Browser.properties	Mon Jan 14 17:19:08 2013 -0800
+++ b/apps/experiments/Modena/nbproject/configs/Run_in_Browser.properties	Mon Jan 14 19:25:16 2013 -0800
@@ -0,0 +1,2 @@
+# Do not modify this property in this configuration. It can be re-generated.
+$label=Run in Browser
--- a/apps/experiments/Modena/src/modena/Modena.css	Mon Jan 14 17:19:08 2013 -0800
+++ b/apps/experiments/Modena/src/modena/Modena.css	Mon Jan 14 19:25:16 2013 -0800
@@ -208,20 +208,17 @@
         derive(-fx-background, -15%) 30%
     );
      
-     /* Typically lighter than -fx-background and used to provide a small
-     * highlight under controls and tick marks for checkboxes and radio buttons.
-     * Often used with an insets of 0 0 -1 0, and is also often the first
-     * color in a -fx-background-color list.  Also is typically replaced by
-     * -fx-focus-color with an insets of -1.4 in the "focused" pseudoclass.
+    /* Lighter than -fx-background and used to provide a small highlight when
+     * needed ontop of -fx-background. This is never a shadow in Modena but
+     * keep -fx-shadow-highlight-color name to be compatable with Caspian.
      */
     -fx-shadow-highlight-color: ladder(
         -fx-background,
-        transparent 0%,
-        derive(-fx-background,40%)   5%,
-        derive(-fx-background,60%)  70%,
-        derive(-fx-background,100%) 85%,
-        derive(-fx-background,100%) 97%,
-        derive(-fx-background,-10%) 97.5%
+        rgba(255,255,255,0.2) 0%,
+        rgba(255,255,255,0.2) 20%,
+        rgba(255,255,255,0.2) 70%,
+        rgba(255,255,255,1) 90%,
+        rgba(255,255,255,1) 100%
       );
     
     /* A gradient that goes from a little darker than -fx-color on the top to
@@ -329,12 +326,6 @@
         -fx-mid-text-color   51%
     );
 
-    /* The default border color for a tab.
-     *
-     * TODO: should this be -fx-box-border or derived from some other color?
-     */
-    -fx-tab-border-color: -fx-box-border;
-
     /* These are needed for Popup */
     -fx-background-color: inherit;
     -fx-background-radius: inherit;
@@ -399,7 +390,8 @@
 .choice-box:hover,
 .color-picker.split-button > .arrow-button:hover,
 .color-picker.split-button > .color-picker-label:hover,
-.combo-box-base:hover{
+.combo-box-base:hover,
+.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:hover {
     -fx-color: -fx-hover-base;
 }
 .button:armed,
@@ -415,7 +407,8 @@
 .scroll-bar > .increment-button:pressed, 
 .scroll-bar > .decrement-button:pressed,
 .choice-box:showing,
-.combo-box-base:showing {
+.combo-box-base:showing,
+.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:pressed {
     -fx-color: -fx-pressed-base;
 }
 .button:focused,
@@ -451,7 +444,9 @@
 .list-view:disabled,
 .tree-view:disabled,
 .table-view:disabled,
-.tree-table-view:disabled {
+.tree-table-view:disabled,
+.tab-pane:disabled,
+.tab-pane > .tab-header-area > .headers-region > .tab:disabled {
     -fx-opacity: -fx-disabled-opacity;
 }
 
@@ -489,24 +484,13 @@
 .menu-button:openvertically > .arrow-button > .arrow,
 .split-menu-button:openvertically > .arrow-button > .arrow,
 .combo-box-base > .arrow-button > .arrow,
-.web-view .form-select-button .arrow {
+.web-view .form-select-button .arrow,
+.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button > .arrow  {
     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
     -fx-background-insets: 0 0 -1 0, 0;
     -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
     -fx-shape: "M 0 0 h 7 l -3.5 4 z";
 }
-/* TODO for some reason I can not remove this next two rules even though they 
-   should be the same as the one above */
-.choice-box > .open-button > .arrow {
-    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-    -fx-background-insets: 1 0 -1 0, 0;
-    -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /*  2 3.5 2 3.5  */
-    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
-}
-.split-menu-button:openvertically > .arrow-button > .arrow {
-    -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em;
-    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
-}
 
 /* ====   CHOICE BOX LIKE THINGS   ========================================== */
 
@@ -765,17 +749,15 @@
     -fx-background-color:
         linear-gradient(to right, derive(-fx-base,0%) 0%, derive(-fx-base,10%) 50%, derive(-fx-base,0%) 100%);
     -fx-background-insets: 0;
-    -fx-background-radius: 0 ;
-    -fx-padding: 0.833em 0.416667em 0.833em 0.416667em; /* 10 5 10 5 */
+    -fx-padding: 0.833em; /* 5 */
     -fx-spacing: 0.333em; /* 4 */
     -fx-alignment: TOP_LEFT;
 }
 .tool-bar:horizontal {
     -fx-background-color:
-        linear-gradient(to bottom, derive(-fx-base,75%) 0%, derive(-fx-base,-26.0%) 90%),
+        linear-gradient(to bottom, derive(-fx-base,75%) 0%, -fx-outer-border 90%),
         linear-gradient(to bottom, derive(-fx-base,46.9%) 2%, derive(-fx-base,-2.1%) 95%);
-    -fx-background-insets: 0 0 0 0, 1 0 0 0;
-    -fx-background-radius: 0, 0 ;
+    -fx-background-insets: 0 0 0 0, 1 0 1 0;
     -fx-padding: 0.416667em 0.833em 0.416667em 0.833em; /* 5 10 5 10 */
     -fx-spacing: 0.333em; /* 4 */
     -fx-alignment: CENTER_LEFT;
@@ -786,23 +768,6 @@
 .tool-bar:vertical > .container > .separator {
     -fx-orientation: horizontal;    
 }
-/*
-.tool-bar .separator:vertical .line {
-    -fx-border-style: solid;
-    -fx-background-color: null;
-    -fx-border-color:  transparent derive(-fx-base,-35%) transparent transparent;
-}
-
-.tool-bar .separator:horizontal .line {
-    -fx-border-style: solid;
-    -fx-background-color: null;
-    -fx-border-color:  transparent transparent derive(-fx-base,-35%) transparent;
-}
-
-.tool-bar:vertical .separator {
-    -fx-orientation: horizontal;    
-    -fx-padding: 0.0em 0.0835em 0.0em 0.0835em;  0 1 0 1 
-}*/
 
 /*******************************************************************************
  *                                                                             *
@@ -857,7 +822,7 @@
         -fx-control-inner-background;*/
     -fx-background-insets: 0 0 -1 0, 0, 1;
     -fx-background-radius: 5, 4, 3;
-    -fx-padding: 3;
+    -fx-padding: 0.25em; /* 3 */
 }
 .slider:vertical .track {
     -fx-background-color: 
@@ -994,19 +959,16 @@
  *                                                                             *
  ******************************************************************************/
 
-.separator .line {
-    -fx-border-style: segments(0.166667em, 0.166667em);
-    -fx-border-width: 0.083333em; /* 1 */
-}
 .separator:horizontal .line {
-    -fx-background-color: null;
-    -fx-padding: 0.083333em 0.0em 0.0em 0.0em; /* 1 0 0 0 */
-    -fx-border-color: derive(-fx-background,-20%) transparent transparent transparent;
+    -fx-border-color: -fx-text-box-border transparent transparent transparent,
+        -fx-shadow-highlight-color transparent transparent transparent;
+    -fx-border-insets: 0, 1 0 0 0;
 }
 .separator:vertical .line {
-    -fx-background-color: null;
-    -fx-padding: 0.0em 0.083333em 0.0em 0.0em; /* 0 1 0 0 */
-    -fx-border-color:  transparent derive(-fx-background,-20%) transparent transparent;
+    -fx-border-color: transparent transparent transparent -fx-shadow-highlight-color,
+        transparent transparent transparent -fx-text-box-border;
+    -fx-border-width: 3, 1;
+    -fx-border-insets: 0, 0 0 0 1;
 }
 
 /*******************************************************************************
@@ -1397,111 +1359,77 @@
  ******************************************************************************/
 
 .tab-pane {
-    /* -fx-tab-min-width: 4.583em;  55 */
-    /* -fx-tab-max-width: 4.583em; 55 */
-    -fx-tab-min-height: 2em; /* 24 */
-    -fx-tab-max-height: 2em; /* 24 */
-}
-.tab-pane:disabled {
-    -fx-opacity: -fx-disabled-opacity;
+    -fx-tab-min-height: 1.8333em; /* 22 */
+    -fx-tab-max-height: 1.8333em; /* 22 */
 }
 .tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
-    -fx-background-color: transparent;    
     -fx-alignment: CENTER;
     -fx-text-fill: -fx-text-base-color;
 }
-/*
-.tab *.tab-label Text {
-    -fx-effect: dropshadow(two-pass-box , rgba(255, 255, 255, 0.4), 1, 0.0 , 0, 1);
-}*/
-.tab-pane > .tab-content-area {
-    -fx-padding: 0.0em; /* 0 */
-}
 .tab-pane > .tab-header-area > .headers-region > .tab {
-    /* This is how it is done in Button, but the -1 inset caused a white line  */
-    /* to appear beneath the tab, which looks bad, so it's taken out below.    */
-    -fx-background-insets: 0, 1, 2;
+    -fx-background-insets: 0 1 1 0, 1 2 1 1, 2 3 1 2;
     -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
     -fx-padding: 0.083333em 0.5em 0.083333em 0.5em; /* 1 6 1 6 */
-/*    -fx-text-fill: -fx-text-base-color;*/
 }
 .tab-pane > .tab-header-area > .headers-region > .tab:top {
-    -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
+    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
 }
 .tab-pane > .tab-header-area > .headers-region > .tab:right {
-    -fx-background-color: -fx-tab-border-color, -fx-inner-border-bottomup, -fx-body-color-bottomup;
+    -fx-background-color: -fx-outer-border, -fx-inner-border-bottomup, -fx-body-color-bottomup;
 }
 .tab-pane > .tab-header-area > .headers-region > .tab:bottom {
-    -fx-background-color: -fx-tab-border-color, -fx-inner-border-bottomup, -fx-body-color-bottomup;
+    -fx-background-color: -fx-outer-border, -fx-inner-border-bottomup, -fx-body-color-bottomup;
 }
 .tab-pane > .tab-header-area > .headers-region > .tab:left {
-    -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
+    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
 }
 .tab-pane > .tab-header-area > .headers-region > .tab:hover {
     -fx-color: -fx-hover-base;
 }
 .tab-pane > .tab-header-area > .headers-region > .tab:selected {
-/*    -fx-background-color: white;*/
-
-/*    -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
-    -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
-    -fx-background-insets: 0, 1 1 0 1, 2 2 0 2;*/
-    -fx-background-color: -fx-tab-border-color, -fx-background;
-    -fx-background-insets: 0, 1 1 0 1;
-    -fx-background-radius: 5 5 0 0, 4 4 0 0;
+    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-background;
+    -fx-background-insets: 0 1 1 0, 1 2 0 1, 2 3 0 2;
 }
 .tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
     -fx-border-style: segments(0.166667em, 0.166667em);
     -fx-border-width: 1;
     -fx-border-color: -fx-focus-color;
 }
-.tab-pane > .tab-header-area > .headers-region > .tab:disabled {
-    -fx-opacity: -fx-disabled-opacity;
-}
 .tab-pane > .tab-header-area > .headers-region > .tab:disabled:hover {
     -fx-color: -fx-base;
     -fx-opacity: -fx-disabled-opacity;
 }
-/*.tab-pane > .tab-header-area > .tab-header-background {
-    -fx-background-color: -fx-outer-border, -fx-inner-border, derive(-fx-color, -20%);
-    -fx-effect: innershadow(two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 0);
-}*/
-
 .tab-pane > .tab-header-area > .tab-header-background {
+    /* TODO should not be using text-box-border I tink? */
     -fx-background-color:  
-        linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
-        -fx-inner-border,
+        -fx-outer-border,
+        -fx-text-box-border, 
         linear-gradient(from 0px 0px to 0px 5px, -fx-text-box-border, derive(-fx-text-box-border, 30%));
-    -fx-background-insets: 0, 1, 1 1 2 1;
-}
-
-/*-fx-shadow-highlight-color*/
-/*-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;*/ 
-
-/*.tab-pane *.tab-header-area {*/
-    /* I would like to use -fx-tab-border-color here, but for some reason it */
-    /* just isn't the correct color, even though it works in :top above */
-/*    -fx-background-color: -fx-tab-border-color, lightgray;*/
-/*}*/
+}
+.tab-pane:top > .tab-header-area > .tab-header-background {
+    -fx-background-insets: 0, 0 0 1 0, 1;
+}
+.tab-pane:bottom > .tab-header-area > .tab-header-background {
+    -fx-background-insets: 0, 1 0 0 0, 1;
+}
+.tab-pane:left > .tab-header-area > .tab-header-background {
+    -fx-background-insets: 0, 0 1 0 0, 1;
+}
+.tab-pane:right > .tab-header-area > .tab-header-background {
+    -fx-background-insets: 0, 0 0 0 1, 1;
+}
 .tab-pane:top > .tab-header-area {
-    -fx-background-insets: 0, 0 0 1 0;
-    -fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */
+    -fx-padding: 0.416667em 0.166667em 0.0em 0.416667em; /* 5 2 0 5 */
 }
 .tab-pane:bottom > .tab-header-area {
-    -fx-background-insets: 0, 1 0 0 0;
-    -fx-padding: 0 0.166667em 0.416667em 0.833em; /* 0 2 5 0 */
+    -fx-padding: 0 0.166667em 0.416667em 0.416667em; /* 0 2 5 5 */
 }
 .tab-pane:left > .tab-header-area {
-    -fx-background-insets: 0, 0 1 0 0;
-    -fx-padding: 0.833em 0.0em 0.166667em 0.416667em; /* 10 0 2 5 */
+    -fx-padding: 0.416667em 0.0em 0.166667em 0.416667em; /* 5 0 2 5 */
 }
 .tab-pane:right > .tab-header-area {
-    -fx-background-insets: 0, 0 0 0 1;
-    -fx-padding: 0.833em 0.416667em 0.166667em 0.0em; /* 10 5 2 0 */
-}
-/*.tab-pane > .tab-header-area > .headers-region {
-    -fx-effect: dropshadow(two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0, 0);
-}*/
+    -fx-padding: 0.416667em 0.416667em 0.166667em 0.0em; /* 5 5 2 0 */
+}
 /* TODO: scaling the shape seems to make it way too large */
 .tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button {
     -fx-background-color: -fx-mark-color;
@@ -1513,25 +1441,11 @@
     -fx-background-color: derive(-fx-mark-color, -30%);
 }
 /* CONTROL BUTTONS */
-.tab-pane > .tab-header-area > .control-buttons-tab {
-    -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
-    -fx-background-insets: 0, 1, 2;
-    -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
-    -fx-padding: 0.083333em 0.25em 0.083333em 0.25em; /* 1 3 1 3 */
-}
 .tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button {
-    -fx-background-color: transparent;
-    -fx-padding: 0.0em 0.416667em 0.0em 0.416667em; /* 0 5 0 5 */
-}
-.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:hover {
-    -fx-background-color: -fx-body-color;
-    -fx-color: -fx-hover-base;
-}
-.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button .arrow {
-    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-    -fx-background-insets: 1 0 -1 0, 0;
-    -fx-padding: 0.238083em 0.416667em 0.238083em 0.416667em; /* 2.857 5 2.857 5 */
-    -fx-shape: "M 0 0 H 7 L 3.5 4 z";
+    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
+    -fx-background-insets: 4 0 3 0, 5 1 4 1, 6 2 5 2;
+    -fx-padding: 0 4 0 4; /* 0 5 0 5 */
+    -fx-background-radius: 5,4,3;
 }
 /* FLOATING TABS CUSTOMISATION */
 .tab-pane.floating > .tab-header-area > .tab-header-background {
@@ -1541,27 +1455,11 @@
     -fx-background-color: null;
 }
 .tab-pane.floating > .tab-content-area {
-    -fx-background-color: -fx-tab-border-color, -fx-control-inner-background;
+    -fx-background-color: -fx-outer-border, -fx-background;
     -fx-background-insets: 0, 1;
-    -fx-background-radius: 5, 4;
+    -fx-background-radius: 3, 2;
     -fx-padding: 2;
 }
-.tab-pane.floating > .tab-header-area > .headers-region > .tab {
-    -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
-    -fx-background-insets: 0, 1, 2;
-    -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
-}
-.tab-pane.floating  > .tab-header-area > .headers-region > .tab:selected {
-    -fx-background-color: -fx-tab-border-color, -fx-control-inner-background;
-    -fx-background-insets: 0 0 -1 0, 1 1 -1 1;
-    -fx-background-radius: 5 5 0 0, 4 4 0 0;
-}
-/*.tab-pane:floating *.control-buttons-tab {
-    -fx-padding: 0.083333em 0.25em 0.083333em 0.25em;
-    -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
-    -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
-    -fx-background-insets: 0, 1 1 0 1, 2 2 0 2;
-}*/
 
 /*******************************************************************************
  *                                                                             *
@@ -2575,10 +2473,6 @@
 .tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .check-box-table-cell > .check-box > .box {
     -fx-border-color: derive(-fx-accent,20%);
 }
-.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected > .check-box-table-cell > .check-box:selected > .box > .mark,
-.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .check-box-table-cell > .check-box:selected > .box > .mark {
-    -fx-background-color: -fx-selection-bar-text;
-}
 /*******************************************************************************
  *                                                                             *
  * TreeTableView                                                               *
@@ -3021,4 +2915,51 @@
 .split-pane > * > .split-pane {
     -fx-background-insets: 0, 0;
     -fx-padding: 0;
- }
\ No newline at end of file
+ }
+ 
+ /* ############################################################################
+    # Workaround for RT-27627                                                  #
+    ############################################################################ */
+ 
+.choice-box > .open-button > .arrow { doh: true; }
+.split-menu-button:openvertically > .arrow-button > .arrow { doh: true; }
+.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button > .arrow { doh: true; }
+.tree-table-view { doh: true; }
+.tree-table-view:focused { doh: true; }
+.tree-table-view > .virtual-flow > .scroll-bar:vertical { doh: true; }
+.tree-table-view > .virtual-flow > .scroll-bar:horizontal { doh: true; }
+.tree-table-view > .virtual-flow > .corner { doh: true; }
+.tree-table-row-cell:focused { doh: true; }
+.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected { doh: true; }
+.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .tree-table-cell { doh: true; }
+.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected { doh: true; }
+.tree-table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover{ doh: true; }
+.tree-table-row-cell:filled:selected:focused { doh: true; }
+.tree-table-row-cell:filled:selected { doh: true; }
+.tree-table-row-cell:selected:disabled { doh: true; }
+.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:hover { doh: true; }
+.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover { doh: true; }
+.tree-table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:last-visible { doh: true; }
+.tree-table-view:constrained-resize > .column-header:last-visible { doh: true; }
+.tree-table-view:constrained-resize .filler { doh: true; }
+.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:focused { doh: true; }
+.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled .tree-table-cell:focused:selected { doh: true; }
+.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:selected { doh: true; }
+.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover:selected { doh: true; }
+.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:selected:hover{ doh: true; }
+.tree-table-row-cell:filled > .tree-table-cell:selected:focused { doh: true; }
+.tree-table-row-cell:filled > .tree-table-cell:selected { doh: true; }
+.tree-table-cell:selected:disabled { doh: true; }
+.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover { doh: true; }
+.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:hover { doh: true; }
+.tree-table-view .column-resize-line { doh: true; }
+.tree-table-view > .column-header-background { doh: true; }
+.tree-table-view .column-header { doh: true; }
+.tree-table-view .filler { doh: true; }
+.tree-table-view .column-header .sort-order{ doh: true; }
+.tree-table-view > .column-header-background > .show-hide-columns-button{ doh: true; }
+.tree-table-view .show-hide-column-image { doh: true; }
+.tree-table-view .column-drag-header { doh: true; }
+.tree-table-view .column-overlay { doh: true; }
+.tree-table-view /*> column-header-background > nested-column-header >*/ .arrow { doh: true; }
+.tree-table-view .empty-table { doh: true; }
\ No newline at end of file
--- a/apps/experiments/Modena/src/modena/Modena.java	Mon Jan 14 17:19:08 2013 -0800
+++ b/apps/experiments/Modena/src/modena/Modena.java	Mon Jan 14 19:25:16 2013 -0800
@@ -90,6 +90,7 @@
     private Node mosaic;
     private Node heightTest;
     private Stage mainStage;
+    private Color backgroundColor;
     private Color baseColor;
     private Color accentColor;
     private String fontName = null;
@@ -214,6 +215,9 @@
                 new Label("Base:"),
                 createBaseColorPicker(),
                 new Separator(),
+                new Label("Background:"),
+                createBackgroundColorPicker(),
+                new Separator(),
                 new Label("Accent:"),
                 createAccentColorPicker(),
                 new Separator(),
@@ -319,6 +323,38 @@
         return colorPicker;
     }
     
+    private ColorPicker createBackgroundColorPicker() {
+        ColorPicker colorPicker = new ColorPicker(Color.TRANSPARENT);
+        colorPicker.getCustomColors().addAll(
+                Color.TRANSPARENT,
+                Color.web("#f3622d"),
+                Color.web("#fba71b"),
+                Color.web("#57b757"),
+                Color.web("#41a9c9"),
+                Color.web("#888"),
+                Color.RED,
+                Color.ORANGE,
+                Color.YELLOW,
+                Color.GREEN,
+                Color.CYAN,
+                Color.BLUE,
+                Color.PURPLE,
+                Color.MAGENTA,
+                Color.BLACK
+        );
+        colorPicker.valueProperty().addListener(new ChangeListener<Color>() {
+            @Override public void changed(ObservableValue<? extends Color> observable, Color oldValue, Color c) {
+                if (c == null) {
+                    backgroundColor = null;
+                } else {
+                    backgroundColor = c;
+                }
+                updateCSSOverrides();
+            }
+        });
+        return colorPicker;
+    }
+    
     private ColorPicker createAccentColorPicker() {
         ColorPicker colorPicker = new ColorPicker(Color.web("#0096C9"));
         colorPicker.getCustomColors().addAll(
@@ -357,6 +393,7 @@
         cssOverride = ".root {\n";
         System.out.println("baseColor = "+baseColor);
         System.out.println("accentColor = " + accentColor);
+        System.out.println("backgroundColor = " + backgroundColor);
         if (baseColor != null && baseColor != Color.TRANSPARENT) {
             final String color = String.format((Locale) null, "#%02x%02x%02x", 
                     Math.round(baseColor.getRed() * 255), 
@@ -364,6 +401,13 @@
                     Math.round(baseColor.getBlue() * 255));
             cssOverride += "    -fx-base:"+color+";\n";
         }
+        if (backgroundColor != null && backgroundColor != Color.TRANSPARENT) {
+            final String color = String.format((Locale) null, "#%02x%02x%02x", 
+                    Math.round(backgroundColor.getRed() * 255), 
+                    Math.round(backgroundColor.getGreen() * 255), 
+                    Math.round(backgroundColor.getBlue() * 255));
+            cssOverride += "    -fx-background:"+color+";\n";
+        }
         if (accentColor != null && accentColor != Color.TRANSPARENT) {
             final String color = String.format((Locale) null, "#%02x%02x%02x", 
                     Math.round(accentColor.getRed() * 255), 
--- a/apps/experiments/Modena/src/modena/SamplePage.java	Mon Jan 14 17:19:08 2013 -0800
+++ b/apps/experiments/Modena/src/modena/SamplePage.java	Mon Jan 14 19:25:16 2013 -0800
@@ -427,16 +427,52 @@
                 withState(createToolBar(true,false), "disabled")
                 );
         newSection(      
-                "Tabs:", 
-                createTabPane(3, 250,null,false),
-                withState(createTabPane(5, 200,"Tab Disabled &\nMany Tabs", false), null, ".tab", "disabled"),
-                withState(createTabPane(5, 200,"Disabled", false), "disabled")
+                "Tabs\n(Top):", 
+                wrapBdr(createTabPane(4, 250,null,false, false, Side.TOP)),
+                wrapBdr(withState(createTabPane(5, 200,"Tab Disabled &\nMany Tabs", false, true, Side.TOP), null, ".tab", "disabled")),
+                wrapBdr(withState(createTabPane(5, 200,"Disabled", false, false, Side.TOP), "disabled"))
                 );
         newSection(      
-                "Tabs Floating:", 
-                createTabPane(3, 250,null,true),
-                withState(createTabPane(5, 200,"Tab Disabled &\nMany Tabs", true), null, ".tab", "disabled"),
-                withState(createTabPane(5, 200,"Disabled", true), "disabled")
+                "Tabs Floating\n(Top):", 
+                createTabPane(4, 250,null,true, false, Side.TOP),
+                withState(createTabPane(5, 200,"Tab Disabled &\nMany Tabs", true, true, Side.TOP), null, ".tab", "disabled"),
+                withState(createTabPane(5, 200,"Disabled", true, false, Side.TOP), "disabled")
+                );
+        newSection(      
+                "Tabs\n(Bottom):", 
+                wrapBdr(createTabPane(4, 250,null,false, false, Side.BOTTOM)),
+                wrapBdr(withState(createTabPane(5, 200,"Tab Disabled &\nMany Tabs", false, true, Side.BOTTOM), null, ".tab", "disabled")),
+                wrapBdr(withState(createTabPane(5, 200,"Disabled", false, false, Side.BOTTOM), "disabled"))
+                );
+        newSection(      
+                "Tabs Floating\n(Bottom):", 
+                createTabPane(4, 250,null,true, false, Side.BOTTOM),
+                withState(createTabPane(5, 200,"Tab Disabled &\nMany Tabs", true, true, Side.BOTTOM), null, ".tab", "disabled"),
+                withState(createTabPane(5, 200,"Disabled", true, false, Side.BOTTOM), "disabled")
+                );
+        newSection(      
+                "Tabs\n(Left):", 
+                wrapBdr(createTabPane(4, 250,null,false, false, Side.LEFT)),
+                wrapBdr(withState(createTabPane(5, 200,"Tab Disabled &\nMany Tabs", false, true, Side.LEFT), null, ".tab", "disabled")),
+                wrapBdr(withState(createTabPane(5, 200,"Disabled", false, false, Side.LEFT), "disabled"))
+                );
+        newSection(      
+                "Tabs Floating\n(Left):", 
+                createTabPane(4, 250,null,true, false, Side.LEFT),
+                withState(createTabPane(5, 200,"Tab Disabled &\nMany Tabs", true, true, Side.LEFT), null, ".tab", "disabled"),
+                withState(createTabPane(5, 200,"Disabled", true, false, Side.LEFT), "disabled")
+                );
+        newSection(      
+                "Tabs\n(Right):", 
+                wrapBdr(createTabPane(4, 250,null,false, false, Side.RIGHT)),
+                wrapBdr(withState(createTabPane(5, 200,"Tab Disabled &\nMany Tabs", false, true, Side.RIGHT), null, ".tab", "disabled")),
+                wrapBdr(withState(createTabPane(5, 200,"Disabled", false, false, Side.RIGHT), "disabled"))
+                );
+        newSection(      
+                "Tabs Floating\n(Right):", 
+                createTabPane(4, 250,null,true, false, Side.RIGHT),
+                withState(createTabPane(5, 200,"Tab Disabled &\nMany Tabs", true, true, Side.RIGHT), null, ".tab", "disabled"),
+                withState(createTabPane(5, 200,"Disabled", true, false, Side.RIGHT), "disabled")
                 );
         newDetailedSection(
                 new String[] {"TitledPane:", "normal", "focused", "disabled"}, 
--- a/apps/experiments/Modena/src/modena/SamplePageHelpers.java	Mon Jan 14 17:19:08 2013 -0800
+++ b/apps/experiments/Modena/src/modena/SamplePageHelpers.java	Mon Jan 14 19:25:16 2013 -0800
@@ -40,6 +40,7 @@
 import javafx.event.ActionEvent;
 import javafx.event.EventHandler;
 import javafx.geometry.Orientation;
+import javafx.geometry.Side;
 import javafx.scene.GroupBuilder;
 import javafx.scene.Node;
 import javafx.scene.control.Accordion;
@@ -66,6 +67,7 @@
 import javafx.scene.image.ImageView;
 import javafx.scene.input.KeyCharacterCombination;
 import javafx.scene.input.KeyCombination;
+import javafx.scene.layout.StackPaneBuilder;
 import javafx.scene.paint.Color;
 import javafx.scene.shape.LineBuilder;
 import javafx.scene.shape.RectangleBuilder;
@@ -104,22 +106,30 @@
             ).build();
     }
     
-    static TabPane createTabPane(int numOfTabs, int prefWidth, String firstTabText, boolean floating) {
+    static Node createTabPane(int numOfTabs, int prefWidth, String firstTabText, boolean floating, boolean disableFirst, Side side) {
         TabPane tabPane = new TabPane();
+        tabPane.setSide(side);
         if (floating) tabPane.getStyleClass().add("floating");
         for (int i=1; i<=numOfTabs; i++) {
             tabPane.getTabs().add(
                 TabBuilder.create()
                     .text("Tab "+i)
+                    .disable(i==0 && disableFirst)
                     .content(new Label((i==1 && firstTabText!=null)? firstTabText :"Tab "+i+" Content"))
                     .build()
             );
         }
+        if (disableFirst) tabPane.getSelectionModel().select(1);
         tabPane.setPrefWidth(prefWidth);
         tabPane.setPrefHeight(100);
         return tabPane;
     }
     
+    static Node wrapBdr(Node node) {
+        return StackPaneBuilder.create().children(node)
+                .style("-fx-border-color: black; -fx-border-width: 3;").build();
+    }
+    
     static ToolBar createToolBar(boolean vertical, boolean overFlow) {
         ToolBar toolBar = new ToolBar();
         if (vertical) toolBar.setOrientation(Orientation.VERTICAL);
--- a/apps/experiments/Modena/src/modena/ui-mosaic.fxml	Mon Jan 14 17:19:08 2013 -0800
+++ b/apps/experiments/Modena/src/modena/ui-mosaic.fxml	Mon Jan 14 19:25:16 2013 -0800
@@ -3,15 +3,14 @@
 <?import java.lang.*?>
 <?import java.util.*?>
 <?import javafx.collections.*?>
+<?import javafx.geometry.*?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
 <?import javafx.scene.paint.*?>
 
-<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="800.0" prefWidth="800.0" xmlns:fx="http://javafx.com/fxml">
+<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="691.0" prefWidth="927.0" xmlns:fx="http://javafx.com/fxml">
   <children>
     <Button layoutX="40.0" layoutY="41.0" mnemonicParsing="false" text="Button" />
-    <CheckBox layoutX="561.0" layoutY="400.0" mnemonicParsing="false" text="CheckBox" />
-    <CheckBox layoutX="561.0" layoutY="367.0" mnemonicParsing="false" selected="true" text="CheckBox" />
     <ComboBox layoutX="234.0" layoutY="41.0" prefWidth="160.0">
       <items>
         <FXCollections fx:factory="observableArrayList">
@@ -23,35 +22,10 @@
     </ComboBox>
     <Hyperlink layoutX="134.0" layoutY="40.0" text="Hyperlink" />
     <Label layoutX="242.0" layoutY="153.0" text="A label" />
-    <ListView layoutX="560.0" layoutY="94.0" prefHeight="216.0" prefWidth="200.0" />
-    <MenuBar layoutX="560.0" layoutY="40.0" prefWidth="200.0">
-      <menus>
-        <Menu mnemonicParsing="false" text="File">
-          <items>
-            <MenuItem mnemonicParsing="false" text="Close" />
-          </items>
-        </Menu>
-        <Menu mnemonicParsing="false" text="Edit">
-          <items>
-            <MenuItem mnemonicParsing="false" text="Delete" />
-          </items>
-        </Menu>
-        <Menu mnemonicParsing="false" text="Help">
-          <items>
-            <MenuItem mnemonicParsing="false" text="About" />
-          </items>
-        </Menu>
-      </menus>
-    </MenuBar>
     <PasswordField layoutX="240.0" layoutY="243.0" prefWidth="138.0" promptText="Password" />
-    <ProgressBar layoutX="241.0" layoutY="291.0" prefWidth="200.0" progress="0.3" />
-    <ProgressIndicator layoutX="445.0" layoutY="48.0" prefHeight="59.0" prefWidth="56.0" progress="0.58" />
-    <RadioButton layoutX="587.0" layoutY="121.0" mnemonicParsing="false" text="RadioButton 1">
-      <toggleGroup>
-        <ToggleGroup fx:id="toggle2" />
-      </toggleGroup>
-    </RadioButton>
-    <ScrollBar layoutX="41.0" layoutY="329.0" prefWidth="719.0" />
+    <ProgressBar layoutX="291.0" layoutY="291.0" prefWidth="200.0" progress="0.3" />
+    <ProgressIndicator layoutX="435.0" layoutY="45.0" prefHeight="59.0" prefWidth="56.0" progress="0.58" />
+    <ScrollBar layoutX="41.0" layoutY="329.0" prefWidth="493.0" />
     <Separator layoutX="41.0" layoutY="129.0" prefWidth="490.0" />
     <Separator layoutX="217.0" layoutY="151.0" orientation="VERTICAL" prefHeight="158.0" />
     <SplitMenuButton layoutX="40.0" layoutY="83.0" mnemonicParsing="false" prefWidth="153.0" text="SplitMenuButton">
@@ -60,38 +34,19 @@
         <MenuItem mnemonicParsing="false" text="Action 2" />
       </items>
     </SplitMenuButton>
-    <TextField layoutX="39.0" layoutY="149.0" prefWidth="160.0" promptText="Textfield" />
-    <TextArea layoutX="39.0" layoutY="180.0" prefHeight="130.0" prefWidth="160.0" promptText="Text Area" wrapText="true" />
-    <ToggleButton layoutX="341.0" layoutY="196.0" mnemonicParsing="false" prefWidth="90.0" selected="true" text="Toggle">
+    <TextField layoutX="40.0" layoutY="149.0" prefWidth="160.0" promptText="Textfield" text="Textfield" />
+    <TextArea layoutX="40.0" layoutY="180.0" prefHeight="130.0" prefWidth="160.0" promptText="Text Area" text="Text Area with some text spanning over a few lines." wrapText="true" />
+    <ToggleButton layoutX="241.0" layoutY="196.0" mnemonicParsing="false" prefWidth="90.0" selected="true" text="Toggle">
       <toggleGroup>
         <ToggleGroup fx:id="toggle1" />
       </toggleGroup>
     </ToggleButton>
-    <RadioButton layoutX="587.0" layoutY="146.0" mnemonicParsing="false" text="RadioButton 2" toggleGroup="$toggle2" />
-    <ScrollPane layoutX="560.0" layoutY="439.0" prefHeight="330.0" prefWidth="200.0">
+    <ToggleButton layoutX="341.0" layoutY="196.0" mnemonicParsing="false" prefWidth="90.0" selected="false" text="Toggle" toggleGroup="$toggle1" />
+    <ScrollPane layoutX="560.0" layoutY="439.0" prefHeight="194.0" prefWidth="336.9999000000025">
       <content>
         <AnchorPane id="Content" minHeight="0.0" minWidth="0.0" prefHeight="400.0" prefWidth="400.0" />
       </content>
     </ScrollPane>
-    <TabPane layoutX="39.0" layoutY="561.0" prefHeight="158.0" prefWidth="454.0" tabClosingPolicy="UNAVAILABLE">
-      <tabs>
-        <Tab text="Tab 1">
-          <content>
-            <AnchorPane id="Content" minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
-          </content>
-        </Tab>
-        <Tab text="Tab 2">
-          <content>
-            <AnchorPane id="Content" minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
-          </content>
-        </Tab>
-        <Tab text="Tab 3">
-          <content>
-            <AnchorPane id="Content" minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
-          </content>
-        </Tab>
-      </tabs>
-    </TabPane>
     <ChoiceBox layoutX="234.0" layoutY="85.0" prefWidth="160.0">
       <items>
         <FXCollections fx:factory="observableArrayList">
@@ -101,21 +56,28 @@
         </FXCollections>
       </items>
     </ChoiceBox>
-    <ToolBar layoutX="39.0" layoutY="738.0" prefWidth="200.0">
+    <Slider layoutX="304.0" layoutY="154.0" prefWidth="230.0" />
+    <Slider layoutX="502.0" layoutY="361.0" orientation="VERTICAL" prefHeight="291.0" showTickMarks="true" />
+    <ToggleButton layoutX="441.0" layoutY="196.0" mnemonicParsing="false" prefWidth="90.0" selected="false" text="Toggle">
+      <toggleGroup>
+        <ToggleGroup />
+      </toggleGroup>
+    </ToggleButton>
+    <ComboBox editable="true" layoutX="395.0" layoutY="243.0" prefWidth="136.0001220703125" promptText="Choose">
       <items>
-        <Button mnemonicParsing="false" text="New" />
-        <Button mnemonicParsing="false" text="Delete" />
-        <Button mnemonicParsing="false" text="Save" />
-        <Button mnemonicParsing="false" text="Exit" />
+        <FXCollections fx:factory="observableArrayList">
+          <String fx:value="Item 1" />
+          <String fx:value="Item 2" />
+          <String fx:value="Item 3" />
+        </FXCollections>
       </items>
-    </ToolBar>
-    <Slider layoutX="304.0" layoutY="154.0" prefWidth="230.0" />
-    <Slider layoutX="518.0" layoutY="556.0" orientation="VERTICAL" prefHeight="216.0" showTickMarks="true" />
-    <SplitPane dividerPositions="0.4180327868852459" focusTraversable="true" layoutX="39.0" layoutY="364.0" prefHeight="172.0" prefWidth="490.0">
+    </ComboBox>
+    <ProgressIndicator layoutX="571.0" layoutY="367.0" prefHeight="59.0" prefWidth="56.0" progress="-1.0" />
+    <SplitPane dividerPositions="0.5086505190311419" focusTraversable="true" layoutX="39.0" layoutY="361.0" orientation="VERTICAL" prefHeight="291.0" prefWidth="447.0">
       <items>
-        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
-          <children>
-            <TreeView prefHeight="158.0" prefWidth="56.0" showRoot="false" AnchorPane.bottomAnchor="20.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="20.0">
+        <SplitPane dividerPositions="0.49435665914221216" focusTraversable="true" prefHeight="172.0" prefWidth="490.0">
+          <items>
+            <TreeView prefHeight="130.0" prefWidth="179.0" showRoot="false">
               <root>
                 <TreeItem value="Family">
                   <children>
@@ -150,33 +112,80 @@
                 </TreeItem>
               </root>
             </TreeView>
-          </children>
-        </AnchorPane>
-        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
-          <children>
-            <TableView prefHeight="158.0" prefWidth="136.0" AnchorPane.bottomAnchor="20.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="20.0">
+            <TableView prefHeight="130.0" prefWidth="241.0">
               <columns>
                 <TableColumn prefWidth="75.0" text="Column X" />
                 <TableColumn prefWidth="75.0" text="Column X" />
               </columns>
             </TableView>
-          </children>
-        </AnchorPane>
+          </items>
+        </SplitPane>
+        <ListView prefHeight="130.0" prefWidth="200.0" />
       </items>
     </SplitPane>
-    <ToggleButton layoutX="441.0" layoutY="196.0" mnemonicParsing="false" prefWidth="90.0" selected="false" text="Toggle" toggleGroup="$toggle1" />
-    <ComboBox editable="true" layoutX="395.0" layoutY="244.0" prefWidth="136.0001220703125" promptText="Choose">
-      <items>
-        <FXCollections fx:factory="observableArrayList">
-          <String fx:value="Item 1" />
-          <String fx:value="Item 2" />
-          <String fx:value="Item 3" />
-        </FXCollections>
-      </items>
-    </ComboBox>
-    <ProgressIndicator layoutX="680.0" layoutY="361.0" prefHeight="59.0" prefWidth="56.0" progress="-1.0" />
-    <CheckBox layoutX="473.0" layoutY="288.0" mnemonicParsing="false" text="Check" />
-    <RadioButton layoutX="242.0" layoutY="199.0" mnemonicParsing="false" text="r1" toggleGroup="$toggle1" />
-    <RadioButton layoutX="291.0" layoutY="199.0" mnemonicParsing="false" text="r2" toggleGroup="$toggle1" />
+    <VBox layoutX="560.0" layoutY="39.0" prefHeight="235.0" prefWidth="337.0" style="-fx-border-color: black; -fx-border-width: 3; -fx-border-insets: -3;&#10;">
+      <children>
+        <MenuBar prefWidth="200.0">
+          <menus>
+            <Menu mnemonicParsing="false" text="File">
+              <items>
+                <MenuItem mnemonicParsing="false" text="Close" />
+              </items>
+            </Menu>
+            <Menu mnemonicParsing="false" text="Edit">
+              <items>
+                <MenuItem mnemonicParsing="false" text="Delete" />
+              </items>
+            </Menu>
+            <Menu mnemonicParsing="false" text="Help">
+              <items>
+                <MenuItem mnemonicParsing="false" text="About" />
+              </items>
+            </Menu>
+          </menus>
+        </MenuBar>
+        <ToolBar prefWidth="200.0">
+          <items>
+            <Button mnemonicParsing="false" text="New" />
+            <Button mnemonicParsing="false" text="Delete" />
+            <Button mnemonicParsing="false" text="Save" />
+            <Button mnemonicParsing="false" text="Exit" />
+          </items>
+        </ToolBar>
+        <TabPane prefHeight="130.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE" VBox.vgrow="ALWAYS">
+          <tabs>
+            <Tab text="Tab 1">
+              <content>
+                <VBox prefHeight="200.0" prefWidth="100.0" spacing="6.0">
+                  <children>
+                    <RadioButton mnemonicParsing="false" text="RadioButton 1">
+                      <toggleGroup>
+                        <ToggleGroup fx:id="toggle2" />
+                      </toggleGroup>
+                    </RadioButton>
+                    <RadioButton mnemonicParsing="false" text="RadioButton 2" toggleGroup="$toggle2" />
+                    <CheckBox mnemonicParsing="false" selected="true" text="CheckBox" />
+                    <CheckBox mnemonicParsing="false" text="CheckBox" />
+                  </children>
+                  <padding>
+                    <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
+                  </padding>
+                </VBox>
+              </content>
+            </Tab>
+            <Tab text="Tab 2">
+              <content>
+                <AnchorPane id="Content" minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
+              </content>
+            </Tab>
+            <Tab text="Tab 3">
+              <content>
+                <AnchorPane id="Content" minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
+              </content>
+            </Tab>
+          </tabs>
+        </TabPane>
+      </children>
+    </VBox>
   </children>
 </AnchorPane>