Commits

shemnon committed 0ea0edf

update Modena to current source

Comments (0)

Files changed (6)

samples/Modena/src/main/java/modena/Modena.java

+/*
+ * Copyright (c) 2008, 2012 Oracle and/or its affiliates.
+ * All rights reserved. Use is subject to license terms.
+ *
+ * This file is available and licensed under the following license:
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ *  - Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ *  - Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in
+ *    the documentation and/or other materials provided with the distribution.
+ *  - Neither the name of Oracle Corporation nor the names of its
+ *    contributors may be used to endorse or promote products derived
+ *    from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
 package modena;
 
+import java.io.IOException;
+import java.util.logging.Level;
+import java.util.logging.Logger;
 import javafx.application.Application;
 import javafx.application.Platform;
 import javafx.event.ActionEvent;
 import javafx.event.EventHandler;
+import javafx.fxml.FXMLLoader;
 import javafx.scene.Group;
 import javafx.scene.Node;
 import javafx.scene.Scene;
 import javafx.scene.control.Label;
 import javafx.scene.control.ScrollPane;
+import javafx.scene.control.ScrollPaneBuilder;
 import javafx.scene.control.Separator;
+import javafx.scene.control.Tab;
+import javafx.scene.control.TabBuilder;
+import javafx.scene.control.TabPane;
 import javafx.scene.control.ToggleButton;
 import javafx.scene.control.ToggleButtonBuilder;
 import javafx.scene.control.ToggleGroup;
 import javafx.scene.control.ToolBar;
 import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.HBoxBuilder;
+import javafx.scene.layout.Pane;
+import javafx.scene.transform.Scale;
+import javafx.scene.transform.Transform;
 import javafx.stage.Stage;
 
 public class Modena extends Application {
     
     @Override public void start(Stage stage) throws Exception {
         // build UI
-        rebuildUI(true, false);
+        rebuildUI(true, false,0);
         // show UI
         Scene scene = new Scene(root, 1024, 768);
         scene.getStylesheets().add(
         stage.show();
     }
     
-    private void rebuildUI(boolean modena, boolean retina) {
-        // load theme
-        if (modena) {
-            setUserAgentStylesheet(
-                    getClass().getResource("Modena.css").toExternalForm());
-        } else {
-            setUserAgentStylesheet(null);
-        }
-        if (root == null) {
-            root = new BorderPane();
-        } else {
-            // clear out old UI
-            root.setTop(null);
-            root.setCenter(null);
-        }
-        // Create Toolbar
-        final Group contentGroup = new Group();
-        final ScrollPane contentScrollPane = new ScrollPane();
-        final ToggleButton modenaButton;;
-        final ToggleButton retinaButton = ToggleButtonBuilder.create()
-            .text("Retina @2x")
-            .selected(retina)
-            .onAction(new EventHandler<ActionEvent>(){
-                @Override public void handle(ActionEvent event) {
-                    ToggleButton btn = (ToggleButton)event.getSource();
-                    Node content = contentGroup.getChildren().get(0);
-                    if (btn.isSelected()) {
-                        content.setScaleX(2);
-                        content.setScaleY(2);
-                    } else {
-                        content.setScaleX(1);
-                        content.setScaleY(1);
+    private void rebuildUI(boolean modena, boolean retina, int selectedTab) {
+        try {
+            // load theme
+            if (modena) {
+                setUserAgentStylesheet(
+                        getClass().getResource("Modena.css").toExternalForm());
+            } else {
+                setUserAgentStylesheet(null);
+            }
+            if (root == null) {
+                root = new BorderPane();
+            } else {
+                // clear out old UI
+                root.setTop(null);
+                root.setCenter(null);
+            }
+            // Create Content Area
+            final TabPane contentTabs = new TabPane();
+            contentTabs.getTabs().addAll(
+                TabBuilder.create().text("All Controls").content(
+                    ScrollPaneBuilder.create().content(
+                        new SamplePage()
+                    ).build()
+                ).build(),
+                TabBuilder.create().text("UI Mosaic").content(
+                    ScrollPaneBuilder.create().content(
+                        (Node)FXMLLoader.load(Modena.class.getResource("ui-mosaic.fxml"))
+                    ).build()
+                ).build()
+            );
+            contentTabs.getSelectionModel().select(selectedTab);
+            // Create Toolbar
+            final ToggleButton modenaButton;;
+            final ToggleButton retinaButton = ToggleButtonBuilder.create()
+                .text("Retina @2x")
+                .selected(retina)
+                .onAction(new EventHandler<ActionEvent>(){
+                    @Override public void handle(ActionEvent event) {
+                        ToggleButton btn = (ToggleButton)event.getSource();
+                        if (btn.isSelected()) {
+                            contentTabs.getTransforms().setAll(new Scale(2,2));
+                        } else {
+                            contentTabs.getTransforms().setAll(new Scale(1,1));
+                        }
+                        contentTabs.requestLayout();
                     }
+                })
+                .build();
+            ToggleGroup themesToggleGroup = new ToggleGroup();
+            ToggleGroup colorToggleGroup = new ToggleGroup();
+            ToolBar toolBar = new ToolBar(
+                HBoxBuilder.create()
+                    .children(
+                        modenaButton = ToggleButtonBuilder.create()
+                            .text("Modena")
+                            .toggleGroup(themesToggleGroup)
+                            .selected(modena)
+                            .onAction(new EventHandler<ActionEvent>(){
+                                @Override public void handle(ActionEvent event) { 
+                                    rebuildUI(true,retinaButton.isSelected(), contentTabs.getSelectionModel().getSelectedIndex());
+                                }
+                            })
+                            .styleClass("left-pill")
+                            .build(),
+                        ToggleButtonBuilder.create()
+                            .text("Caspian")
+                            .toggleGroup(themesToggleGroup)
+                            .selected(!modena)
+                            .onAction(new EventHandler<ActionEvent>(){
+                                @Override public void handle(ActionEvent event) { 
+                                    rebuildUI(false,retinaButton.isSelected(), contentTabs.getSelectionModel().getSelectedIndex());
+                                }
+                            })
+                            .styleClass("right-pill")
+                            .build()
+                    )
+                    .build(),
+                new Separator(),
+                retinaButton,
+                new Separator(),
+                new Label("Base Color:"),
+                HBoxBuilder.create()
+                    .spacing(3)
+                    .children(
+                        createColorButton(null, colorToggleGroup, modena),
+                        createColorButton("#f3622d", colorToggleGroup, modena),
+                        createColorButton("#fba71b", colorToggleGroup, modena),
+                        createColorButton("#57b757", colorToggleGroup, modena),
+                        createColorButton("#41a9c9", colorToggleGroup, modena),
+                        createColorButton("#888", colorToggleGroup, modena),
+                        createColorButton("red", colorToggleGroup, modena),
+                        createColorButton("orange", colorToggleGroup, modena),
+                        createColorButton("yellow", colorToggleGroup, modena),
+                        createColorButton("green", colorToggleGroup, modena),
+                        createColorButton("cyan", colorToggleGroup, modena),
+                        createColorButton("blue", colorToggleGroup, modena),
+                        createColorButton("purple", colorToggleGroup, modena),
+                        createColorButton("magenta", colorToggleGroup, modena),
+                        createColorButton("black", colorToggleGroup, modena)
+                    )
+                    .build()
+            );
+            // Create content group used for scaleing @2x
+            final Pane contentGroup = new Pane() {
+                @Override protected void layoutChildren() {
+                    double scale = contentTabs.getTransforms().isEmpty() ? 1 : ((Scale)contentTabs.getTransforms().get(0)).getX();
+                    contentTabs.resizeRelocate(0,0,getWidth()/scale, getHeight()/scale);
                 }
-            })
-            .build();
-        ToggleGroup themesToggleGroup = new ToggleGroup();
-        ToggleGroup colorToggleGroup = new ToggleGroup();
-        ToolBar toolBar = new ToolBar(
-            HBoxBuilder.create()
-                .children(
-                    modenaButton = ToggleButtonBuilder.create()
-                        .text("Modena")
-                        .toggleGroup(themesToggleGroup)
-                        .selected(modena)
-                        .onAction(new EventHandler<ActionEvent>(){
-                            @Override public void handle(ActionEvent event) { 
-                                rebuildUI(true,retinaButton.isSelected());
-                            }
-                        })
-                        .styleClass("left-pill")
-                        .build(),
-                    ToggleButtonBuilder.create()
-                        .text("Caspian")
-                        .toggleGroup(themesToggleGroup)
-                        .selected(!modena)
-                        .onAction(new EventHandler<ActionEvent>(){
-                            @Override public void handle(ActionEvent event) { 
-                                rebuildUI(false,retinaButton.isSelected());
-                            }
-                        })
-                        .styleClass("right-pill")
-                        .build()
-                )
-                .build(),
-            new Separator(),
-            retinaButton,
-            new Separator(),
-            new Label("Base Color:"),
-            HBoxBuilder.create()
-                .spacing(3)
-                .children(
-                    createColorButton(null, colorToggleGroup, modena),
-                    createColorButton("#f3622d", colorToggleGroup, modena),
-                    createColorButton("#fba71b", colorToggleGroup, modena),
-                    createColorButton("#57b757", colorToggleGroup, modena),
-                    createColorButton("#41a9c9", colorToggleGroup, modena),
-                    createColorButton("#888", colorToggleGroup, modena),
-                    createColorButton("red", colorToggleGroup, modena),
-                    createColorButton("orange", colorToggleGroup, modena),
-                    createColorButton("yellow", colorToggleGroup, modena),
-                    createColorButton("green", colorToggleGroup, modena),
-                    createColorButton("cyan", colorToggleGroup, modena),
-                    createColorButton("blue", colorToggleGroup, modena),
-                    createColorButton("purple", colorToggleGroup, modena),
-                    createColorButton("magenta", colorToggleGroup, modena),
-                    createColorButton("black", colorToggleGroup, modena)
-                )
-                .build()
-        );
-        root.setTop(toolBar);
-        contentScrollPane.setContent(contentGroup);
-        root.setCenter(contentScrollPane);
-        // create sample page
-        contentGroup.getChildren().setAll(new SamplePage());
-        // move foucus out of the way
-        Platform.runLater(new Runnable() {
-            @Override public void run() {
-                modenaButton.requestFocus();
+            };
+            contentGroup.getChildren().add(contentTabs);
+            // populate root
+            root.setTop(toolBar);
+            root.setCenter(contentGroup);
+            // move foucus out of the way
+            Platform.runLater(new Runnable() {
+                @Override public void run() {
+                    modenaButton.requestFocus();
+                }
+            });
+            // apply retina scale
+            if (retina) {
+                contentTabs.getTransforms().setAll(new Scale(2,2));
             }
-        });
-        // apply retina scale
-        if (retina) {
-            Node content = contentGroup.getChildren().get(0);
-            content.setScaleX(2);
-            content.setScaleY(2);
+        } catch (IOException ex) {
+            Logger.getLogger(Modena.class.getName()).log(Level.SEVERE, null, ex);
         }
     }
     

samples/Modena/src/main/java/modena/SamplePage.java

 /*
- * To change this template, choose Tools | Templates
- * and open the template in the editor.
+ * Copyright (c) 2008, 2012 Oracle and/or its affiliates.
+ * All rights reserved. Use is subject to license terms.
+ *
+ * This file is available and licensed under the following license:
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ *  - Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ *  - Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in
+ *    the documentation and/or other materials provided with the distribution.
+ *  - Neither the name of Oracle Corporation nor the names of its
+ *    contributors may be used to endorse or promote products derived
+ *    from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 package modena;
 
 import javafx.application.Platform;
 import javafx.geometry.Insets;
+import javafx.geometry.Orientation;
+import javafx.geometry.Pos;
 import javafx.scene.Node;
 import javafx.scene.control.Button;
 import javafx.scene.control.ButtonBuilder;
 import javafx.scene.control.CheckBox;
+import javafx.scene.control.ChoiceBoxBuilder;
+import javafx.scene.control.ComboBoxBuilder;
+import javafx.scene.control.Hyperlink;
 import javafx.scene.control.Label;
+import javafx.scene.control.PasswordFieldBuilder;
+import javafx.scene.control.ProgressBar;
+import javafx.scene.control.ProgressIndicator;
+import javafx.scene.control.ProgressIndicatorBuilder;
 import javafx.scene.control.RadioButton;
+import javafx.scene.control.ScrollBar;
+import javafx.scene.control.ScrollBarBuilder;
+import javafx.scene.control.ScrollPaneBuilder;
+import javafx.scene.control.SeparatorBuilder;
 import javafx.scene.control.Slider;
+import javafx.scene.control.SliderBuilder;
+import javafx.scene.control.Tab;
+import javafx.scene.control.TabPaneBuilder;
+import javafx.scene.control.TextAreaBuilder;
+import javafx.scene.control.TextField;
+import javafx.scene.control.TextFieldBuilder;
+import javafx.scene.control.TitledPaneBuilder;
 import javafx.scene.control.ToggleButton;
 import javafx.scene.control.ToggleButtonBuilder;
 import javafx.scene.control.ToggleGroup;
 import javafx.scene.layout.GridPane;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.HBoxBuilder;
+import javafx.scene.layout.VBox;
+import static modena.SamplePageHelpers.*;
 
 /**
  * Page showing every control in every state
         Label sectionLabel = new Label(name);
         sectionLabel.getStyleClass().add("section-label");
         HBox box = new HBox(10);
+        box.getStyleClass().add("section-border");
         box.getChildren().addAll(children);
         setConstraints(sectionLabel, 0, rowIndex);
         setConstraints(box, 1, rowIndex++);
         getChildren().addAll(sectionLabel,box);
     }
     
+    private void newDetailedSection(String[] labels, Node ...children) {
+        Label sectionLabel = new Label(labels[0]);
+        sectionLabel.getStyleClass().add("section-label");
+        HBox hbox = new HBox(10);
+        for (int n = 0; n < children.length; n++ ) {
+            VBox vbox = new VBox(10);
+            vbox.getStyleClass().add("section-border");
+            vbox.setAlignment(Pos.CENTER);
+            Label stateLabel = new Label(labels[n+1]);
+            stateLabel.getStyleClass().add("section-label");
+            vbox.getChildren().add(stateLabel);
+            vbox.getChildren().add(children[n]);
+            hbox.getChildren().addAll(vbox);
+        }
+        setConstraints(sectionLabel, 0, rowIndex);
+        setConstraints(hbox, 1, rowIndex++);
+        getChildren().addAll(sectionLabel,hbox);
+    }
+    
     public SamplePage() {
-        setVgap(15);
-        setHgap(15);
+        setVgap(25);
+        setHgap(25);
         setPadding(new Insets(20));
         newSection("Button:", 
                 new Button("Button"),
                 withState(new RadioButton("Focused & Hover"), "selected, focused, hover"),
                 withState(new RadioButton("Focused & Armed"), "selected, focused, armed"),
                 withState(new RadioButton("Disabled"), "selected, disabled"));
-        newSection("Slider:", 
-                new Slider(0,100,50),
-                withState(new Slider(0,100,50), null, ".thumb", "hover"),
-                withState(new Slider(0,100,50), null, ".thumb", "hover, pressed"),
-                withState(new Slider(0,100,50), "disabled"));
-        newSection("Slider Focused:", 
-                withState(new Slider(0,100,50), "focused"),
-                withState(new Slider(0,100,50), "focused", ".thumb", "hover"),
-                withState(new Slider(0,100,50), "focused", ".thumb", "hover, pressed"));
+        newSection("HyperLink:", 
+                new Hyperlink("Hyperlink"),
+                withState(new Hyperlink("Visited"), "visited"),
+                withState(new Hyperlink("Hover"), "hover"),
+                withState(new Hyperlink("Armed"), "armed"),
+                withState(new Hyperlink("Focused"), "focused"),
+                withState(new Hyperlink("F & Visited"), "focused, visited"),
+                withState(new Hyperlink("F & Hover"), "focused, hover"),
+                withState(new Hyperlink("F & Armed"), "focused, armed"),
+                withState(new Hyperlink("Disabled"), "disabled"));
+        newDetailedSection(
+                new String[]{"Slider - H: ", "normal", "hover", "pressed", "disabled", "tickmarks"},
+                withState(SliderBuilder.create().maxWidth(90).min(0).max(100).value(50).build(), null),
+                withState(SliderBuilder.create().maxWidth(90).min(0).max(100).value(50).build(), null, ".thumb", "hover"),
+                withState(SliderBuilder.create().maxWidth(90).min(0).max(100).value(50).build(), null, ".thumb", "hover, pressed"),
+                withState(SliderBuilder.create().maxWidth(90).min(0).max(100).value(50).build(), "disabled"),
+                SliderBuilder.create().min(0).max(100).value(50).showTickMarks(true).showTickLabels(true).build());
+        newDetailedSection(
+                new String[]{"Slider - H - Focused: ", "normal", "hover", "pressed"},
+                withState(new Slider(0, 100, 50), "focused"),
+                withState(new Slider(0, 100, 50), "focused", ".thumb", "hover"),
+                withState(new Slider(0, 100, 50), "focused", ".thumb", "hover, pressed"));
+        newSection("Slider - V:",
+                SliderBuilder.create().min(0).max(100).value(50).orientation(Orientation.VERTICAL).build(),
+                withState(SliderBuilder.create().min(0).max(100).value(50).orientation(Orientation.VERTICAL).build(), null, ".thumb", "hover"),
+                withState(SliderBuilder.create().min(0).max(100).value(50).orientation(Orientation.VERTICAL).build(), null, ".thumb", "hover, pressed"),
+                withState(SliderBuilder.create().min(0).max(100).value(50).orientation(Orientation.VERTICAL).build(), "disabled"),
+                SliderBuilder.create().min(0).max(100).value(50).showTickMarks(true).showTickLabels(true).orientation(Orientation.VERTICAL).build());
+        newDetailedSection(
+                new String[] {"Scrollbar - H: ", "normal", "small", "big thumb"}, 
+                new ScrollBar(),
+                ScrollBarBuilder.create().minWidth(30).prefWidth(30).build(),
+                ScrollBarBuilder.create().visibleAmount(60).max(100).build()
+                );
+        newDetailedSection(
+                new String[] {"Scrollbar - V: ", "normal", "small", "btn hover", "btn pressed", ".thumb hover", ".thumb pressed"}, 
+                withState(ScrollBarBuilder.create().orientation(Orientation.VERTICAL).build(), "vertical"),
+                withState(ScrollBarBuilder.create().orientation(Orientation.VERTICAL).minHeight(30).prefHeight(30).build(), "vertical"),
+                withState(ScrollBarBuilder.create().orientation(Orientation.VERTICAL).build(), "vertical", ".decrement-button", "hover"),
+                withState(ScrollBarBuilder.create().orientation(Orientation.VERTICAL).build(), "vertical", ".decrement-button", "pressed"),
+                withState(ScrollBarBuilder.create().orientation(Orientation.VERTICAL).build(), "vertical", ".thumb", "hover"),
+                withState(ScrollBarBuilder.create().orientation(Orientation.VERTICAL).build(), "vertical", ".thumb", "pressed")
+                );
+        newDetailedSection(
+                new String[] {"ScrollPane: ", "normal", "small", "focused"}, 
+                ScrollPaneBuilder.create().content(scrollPaneContent()).build(),
+                ScrollPaneBuilder.create().content(scrollPaneContent()).minWidth(40).prefWidth(40).minHeight(40).prefHeight(40).build(),
+                withState(ScrollPaneBuilder.create().content(scrollPaneContent()).build(), "focused")
+                ); 
+        newDetailedSection(
+                new String[] {"Separator: ", "horizontal", "vertical"}, 
+                SeparatorBuilder.create().prefWidth(100).build(),
+                SeparatorBuilder.create().orientation(Orientation.VERTICAL).prefHeight(50).build()
+                );
+        newDetailedSection(
+                new String[] {"ProgressBar: ", "normal", "disabled", "indeterminate"}, 
+                new ProgressBar(0.6),
+                withState(new ProgressBar(), "disabled"),
+                new ProgressBar(-1)
+                );
+        newDetailedSection(
+                new String[] {"ProgressIndicator: ", "normal 0%", "normal 60%", "normal 100%", "disabled"}, 
+                new ProgressIndicator(0),
+                new ProgressIndicator(0.6),
+                new ProgressIndicator(1),
+                withState(new ProgressIndicator(0.5), "disabled")
+                );
+        newDetailedSection(
+                new String[] {"ProgressIndicator\nIndeterminate: ", "normal", "small", "large", "disabled"}, 
+                ProgressIndicatorBuilder.create().progress(-1).maxWidth(USE_PREF_SIZE).maxHeight(USE_PREF_SIZE).build(),
+                ProgressIndicatorBuilder.create().progress(-1).prefWidth(30).prefHeight(30).build(),
+                ProgressIndicatorBuilder.create().progress(-1).prefWidth(60).prefHeight(60).build(),
+                ProgressIndicatorBuilder.create().progress(-1).maxWidth(USE_PREF_SIZE).maxHeight(USE_PREF_SIZE).disable(true).build()
+                );
+        newSection(      
+                "TextField:", 
+                new TextField("TextField"),
+                TextFieldBuilder.create().promptText("Prompt Text").build(),
+                withState(new TextField("Focused"), "focused"),
+                withState(new TextField("Disabled"), "disabled")
+                );
+        newSection(      
+                "PasswordField:", 
+                PasswordFieldBuilder.create().text("Password").build(),
+                PasswordFieldBuilder.create().promptText("Prompt Text").build(),
+                withState(PasswordFieldBuilder.create().text("Password").build(), "focused"),
+                withState(PasswordFieldBuilder.create().text("Password").build(), "disabled")
+                );
+        newSection(      
+                "TextArea:", 
+                TextAreaBuilder.create().text("TextArea").prefColumnCount(10).prefRowCount(2).build(),
+                TextAreaBuilder.create().text("Many Lines of\nText.\n#3\n#4\n#5\n#6\n#7\n#8\n#9\n#10").prefColumnCount(10).prefRowCount(3).build(),
+                TextAreaBuilder.create().text("Many Lines of\nText.\n#3\n#4\n#5\n#6\n#7\n#8\n#9\n#10").prefColumnCount(6).prefRowCount(3).build(),
+                TextAreaBuilder.create().promptText("Prompt Text").prefColumnCount(10).prefRowCount(2).build(),
+                withState(TextAreaBuilder.create().text("Focused").prefColumnCount(7).prefRowCount(2).build(), "focused"),
+                withState(TextAreaBuilder.create().text("Disabled").prefColumnCount(8).prefRowCount(2).build(), "disabled")
+                );
+        newSection(      
+                "ChoiceBox:", 
+                ChoiceBoxBuilder.create(String.class).items(sampleItems()).value("Item A").build(),
+                withState(ChoiceBoxBuilder.create(String.class).items(sampleItems()).value("Item B").build(), "hover"),
+                withState(ChoiceBoxBuilder.create(String.class).items(sampleItems()).value("Item B").build(), "showing"),
+                withState(ChoiceBoxBuilder.create(String.class).items(sampleItems()).value("Item B").build(), "focused"),
+                withState(ChoiceBoxBuilder.create(String.class).items(sampleItems()).value("Item C").build(), "disabled")
+                );
+        newSection(      
+                "ComboBox:", 
+                ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item A").build(),
+                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item B").build(), "hover"),
+                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item B").build(), "showing"),
+                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item B").build(), "focused"),
+                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item C").build(), "disabled")
+                );
+        newSection(      
+                "ComboBox\nEditable:", 
+                ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item A").editable(true).build(),
+                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item B").editable(true).build(), "hover"),
+                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item B").editable(true).build(), "showing"),
+                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item B").editable(true).build(), "focused"),
+                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item C").editable(true).build(), "disabled")
+                );
+        newDetailedSection(
+                new String[] {"ToolBar (H):", "normal", "overflow", "disabled"}, 
+                createToolBar(false,false),
+                createToolBar(false,true),
+                withState(createToolBar(false,false), "disabled")
+                );
+        newDetailedSection(
+                new String[] {"ToolBar (V):", "normal", "overflow", "disabled"}, 
+                createToolBar(true,false),
+                createToolBar(true,true),
+                withState(createToolBar(true,false), "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")
+                );
+        newDetailedSection(
+                new String[] {"TitledPane:", "normal", "focused", "disabled"}, 
+                TitledPaneBuilder.create().text("Title").content(new Label("Content\nLine2.")).build(),
+                withState(TitledPaneBuilder.create().text("Title").content(new Label("Content\nLine2.")).build(), "focused"),
+                withState(TitledPaneBuilder.create().text("Title").content(new Label("Content\nLine2.")).build(), "disabled")
+                );
+        newDetailedSection(
+                new String[] {"Accordian:", "normal", "hover", "focused", "disabled"}, 
+                createAccordion(),
+                withState(createAccordion(), null, ".titled-pane", "hover"),
+                withState(createAccordion(), null, ".titled-pane", "focused"),
+                withState(createAccordion(), "disabled")
+                );
     }
 }

samples/Modena/src/main/java/modena/SamplePageHelpers.java

+/*
+ * To change this template, choose Tools | Templates
+ * and open the template in the editor.
+ */
+package modena;
+
+import javafx.collections.FXCollections;
+import javafx.collections.ObservableList;
+import javafx.geometry.Orientation;
+import javafx.scene.GroupBuilder;
+import javafx.scene.Node;
+import javafx.scene.control.Accordion;
+import javafx.scene.control.Button;
+import javafx.scene.control.Label;
+import javafx.scene.control.Separator;
+import javafx.scene.control.TabBuilder;
+import javafx.scene.control.TabPane;
+import javafx.scene.control.TextField;
+import javafx.scene.control.TitledPaneBuilder;
+import javafx.scene.control.ToolBar;
+import javafx.scene.paint.Color;
+import javafx.scene.shape.LineBuilder;
+import javafx.scene.shape.RectangleBuilder;
+
+/**
+ * Helper static methods for Sample Page
+ */
+public class SamplePageHelpers {
+    
+    static ObservableList<String> sampleItems() {
+        return FXCollections.observableArrayList("Item A","Item B","Item C",
+                "Item D","Item E","Item F","Item G");
+    }
+    
+    static Node scrollPaneContent() {
+        return GroupBuilder.create().children(
+                RectangleBuilder.create().width(200).height(200).fill(Color.PALETURQUOISE).build(),
+                LineBuilder.create().endX(200).endY(200).stroke(Color.DODGERBLUE).build(),
+                LineBuilder.create().startX(200).endX(0).endY(200).stroke(Color.DODGERBLUE).build()
+            ).build();
+    }
+    
+    static TabPane createTabPane(int numOfTabs, int prefWidth, String firstTabText, boolean floating) {
+        TabPane tabPane = new TabPane();
+        if (floating) tabPane.getStyleClass().add("floating");
+        for (int i=1; i<=numOfTabs; i++) {
+            tabPane.getTabs().add(
+                TabBuilder.create()
+                    .text("Tab "+i)
+                    .content(new Label((i==1 && firstTabText!=null)? firstTabText :"Tab "+i+" Content"))
+                    .build()
+            );
+        }
+        tabPane.setPrefWidth(prefWidth);
+        tabPane.setPrefHeight(100);
+        return tabPane;
+    }
+    
+    static ToolBar createToolBar(boolean vertical, boolean overFlow) {
+        ToolBar toolBar = new ToolBar();
+        if (vertical) toolBar.setOrientation(Orientation.VERTICAL);
+        toolBar.getItems().addAll(
+                new Button("A"),
+                new Button("B"),
+                new Separator()
+        );
+        if (vertical) {
+            toolBar.getItems().addAll(
+                new Button("C"),
+                new Button("D")
+            );
+        } else {
+            toolBar.getItems().addAll(
+                new Label("Search:"),
+                new TextField()
+            );
+        }
+        if (overFlow) {
+            if (vertical) {
+                toolBar.setPrefHeight(80);
+            } else {
+                toolBar.setPrefWidth(80);
+            }
+        }
+        return toolBar;
+    }
+    
+    static Accordion createAccordion() {
+        Accordion accordian = new Accordion();
+        accordian.getPanes().addAll(
+            TitledPaneBuilder.create().text("Title 1").content(new Label("Content\nLine2.")).build(),
+            TitledPaneBuilder.create().text("Title 2").content(new Label("Content\nLine2.")).build(),
+            TitledPaneBuilder.create().text("Title 3").content(new Label("Content\nLine2.")).build()
+        );
+        return accordian;
+    }
+}

samples/Modena/src/main/resources/modena/Modena.css

      * -fx-text-fill value for text painted on top of backgrounds colored
      * with -fx-control-inner-background.
      */
-    -fx-control-inner-background: white;
+    -fx-control-inner-background: derive(-fx-base,80%);
 
     /* One of these colors will be chosen based upon a ladder calculation
      * that uses the brightness of a background color.  Instead of using these
      * a control. It is typically the same size as the control (i.e., insets
      * are 0).
      */
-    -fx-outer-border: derive(-fx-color,-20%);
+    -fx-outer-border: derive(-fx-color,-23%);
 /*    -fx-outer-border: linear-gradient(
         to bottom,
         derive(-fx-color,-9%) 0%, 
         derive(-fx-color,-18%) 100%
     );*/
     -fx-body-color: linear-gradient(to bottom, derive(-fx-color,10%) ,derive(-fx-color,-6%));
-        
-    -fx-body-color-bottomup:  linear-gradient(
-        to top,
-        derive(-fx-color,34%) 0%,
-        derive(-fx-color,-18%) 100%
-    );
+    -fx-body-color-bottomup: linear-gradient(to top, derive(-fx-color,10%) ,derive(-fx-color,-6%));
+    -fx-body-color-to-right: linear-gradient(to right, derive(-fx-color,10%) ,derive(-fx-color,-6%));
 
     /* The color to use as -fx-text-fill when painting text on top of
      * backgrounds filled with -fx-base, -fx-color, and -fx-body-color.
     -fx-stroke: -fx-text-fill;
 } 
 
+/*******************************************************************************
+ *                                                                             *
+ * Hyperlink                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+
+.hyperlink {
+    -fx-padding: 0.166667em; /* 2 */
+    -fx-cursor: hand;
+    -fx-content-display: LEFT;
+    -fx-text-fill: -fx-text-background-color;
+    -fx-border-color: transparent;
+    -fx-border-width: 1px;
+}
+.hyperlink:visited {
+    -fx-text-fill: -fx-accent;
+}
+.hyperlink:focused {
+    -fx-color: -fx-focused-base;
+    -fx-border-color: -fx-focus-color;
+    -fx-border-style: dotted;
+    -fx-border-width: 1px;
+}
+.hyperlink:disabled {
+    -fx-opacity: -fx-disabled-opacity;
+}
+.hyperlink:hover {
+    -fx-underline: true;
+}
+.hyperlink:show-mnemonics > .mnemonic-underline {
+    -fx-stroke: -fx-text-fill;
+} 
+
+
 /* ====   TOOLBAR   ========================================================= */
 
 .tool-bar:vertical {
 }
 .tool-bar:horizontal {
     /*-fx-background: derive(-fx-base,-30%);*/
-    -fx-background-color:
+/*    -fx-background-color:
         linear-gradient(to bottom, derive(-fx-base,75%) 0%, derive(-fx-base,-26.0%) 90%, derive(-fx-base,-7.0%) 93%, -fx-background 100%),
         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 4 0;
+    -fx-background-insets: 0 0 0 0, 1 0 4 0;*/
+    -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,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-padding: 0.416667em 0.833em 8px 0.833em; /* 5 10 5 10 */
+    -fx-padding: 0.416667em 0.833em 0.416667em 0.833em; /* 5 10 5 10 */
     -fx-spacing: 0.333em; /* 4 */
     -fx-alignment: CENTER_LEFT;
 }
 
+.tool-bar:horizontal > .container > .separator {
+    -fx-orientation: vertical;
+}
+.tool-bar:vertical > .container > .separator {
+    -fx-orientation: horizontal;    
+}
 /*
 .tool-bar .separator:vertical .line {
     -fx-border-style: solid;
     -fx-color: -fx-pressed-base;
 }
 
-.slider .track {
-    -fx-background-color:
-        derive(-fx-color,-22%),
-        linear-gradient(to bottom, derive(-fx-color,-15.5%), derive(-fx-color,34%) 30%, derive(-fx-color,68%));
-    -fx-background-insets: 0, 1;
-    -fx-background-radius: 2.5, 1.5;
-    -fx-padding: 0.208333em; /* 2.5 */
-}
-
-.slider:vertical .track {
-    -fx-background-color:
-        derive(-fx-color,-22%),
-        linear-gradient(to right, derive(-fx-color,-15.5%), derive(-fx-color,34%) 30%, derive(-fx-color,68%));
-    -fx-background-insets: 0, 1;
+.slider .track, .slider:vertical .track {
+    -fx-background-color:  derive(-fx-box-border, 20%), derive(-fx-background, -5%), -fx-background;
+    -fx-background-insets: 0, 1, 2 1 1 1;
+    -fx-background-radius: 2.5, 1.5, 1.5;
+    -fx-padding: 2;
 }
 
 .slider .axis {
  * ScrollBar                                                                   *
  *                                                                             *
  ******************************************************************************/
-
 .scroll-bar:horizontal {
-    -fx-background-color:
-        -fx-box-border,
-        linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%);
+    -fx-background-color: linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
+}
+.scroll-bar:vertical {
+    -fx-background-color: linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
+}
+.scroll-bar:disabled {
+    -fx-opacity: -fx-disabled-opacity;
+}
+.scroll-bar > .thumb {
+    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; 
+    -fx-background-insets: 1, 2, 3;
+    -fx-background-radius: 5, 4, 3;
+}
+.scroll-bar:vertical > .thumb {
+    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color-to-right; 
+}
+.scroll-bar > .increment-button, 
+.scroll-bar > .decrement-button {
+    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; 
+    -fx-background-insets: 0, 1, 2;
+    -fx-color: transparent;
+    -fx-padding: 3px;
+}
+.scroll-bar > .thumb:hover,
+.scroll-bar > .increment-button:hover, 
+.scroll-bar > .decrement-button:hover {
+    -fx-color: -fx-hover-base;
+}
+.scroll-bar > .thumb:pressed,
+.scroll-bar > .increment-button:pressed, 
+.scroll-bar > .decrement-button:pressed {
+    -fx-color: -fx-pressed-base;
+}
+.scroll-bar > .increment-button > .increment-arrow,
+.scroll-bar > .decrement-button > .decrement-arrow {
+    -fx-background-color: derive(-fx-base,-35%);
+}
+.scroll-bar > .increment-button:hover > .increment-arrow,
+.scroll-bar > .decrement-button:hover > .decrement-arrow {
+    -fx-background-color: derive(-fx-base,-40%);
+}
+.scroll-bar > .increment-button:pressed > .increment-arrow,
+.scroll-bar > .decrement-button:pressed > .decrement-arrow {
+    -fx-background-color: derive(-fx-base,-45%);
+}
+.scroll-bar:horizontal > .increment-button > .increment-arrow {
+    -fx-padding: 7 5 0 0;
+    -fx-shape: "M0.315,1.457l1.414-1.414L5.686,4L1.729,7.957L0.315,6.543L2.857,4L0.315,1.457z";
+}
+.scroll-bar:vertical > .increment-button > .increment-arrow {
+    -fx-padding: 5 7 0 0 ;
+    -fx-shape: "M6.543,0.315l1.414,1.414L4,5.686L0.043,1.729l1.414-1.414L4,2.858L6.543,0.315z";
+}
+.scroll-bar:horizontal > .decrement-button > .decrement-arrow {
+    -fx-padding: 7 5 0 0;
+    -fx-shape: "M5.686,6.543L4.271,7.957L0.314,4l3.957-3.957l1.414,1.414L3.143,4L5.686,6.543z";
+}
+.scroll-bar:vertical > .decrement-button > .decrement-arrow {
+    -fx-padding: 5 7 0 0;
+    -fx-shape: "M1.457,5.563L0.042,4.149L4,0.193l3.957,3.957L6.543,5.563L4,3.021L1.457,5.563z";
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ScrollPane                                                                  *
+ *                                                                             *
+ ******************************************************************************/
+.scroll-pane {
+    -fx-background-color: -fx-box-border,-fx-background;
     -fx-background-insets: 0, 1;
+    -fx-padding: 1;
+}
+.scroll-pane:focused {
+    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-background; 
+    -fx-background-insets: -2, -0.3, 1;
+}
+.scroll-pane > .scroll-bar:horizontal {
+    -fx-background-insets: 0 1 1 1;
+    -fx-padding: 0 1 1 1;
+}
+.scroll-pane > .scroll-bar:horizontal > .increment-button, 
+.scroll-pane > .scroll-bar:horizontal > .decrement-button {
+    -fx-padding: 3 3 2 3;
+}
+.scroll-pane > .scroll-bar:vertical > .increment-button, 
+.scroll-pane > .scroll-bar:vertical > .decrement-button {
+    -fx-padding: 3 2 3 3;
+}
+.scroll-pane > .scroll-bar:vertical {
+    -fx-background-insets: 1 1 1 0;
+    -fx-padding: 1 1 1 0;
+}
+.scroll-pane > .corner {
+    -fx-background-color: derive(-fx-base,-1%);
+    -fx-background-insets: 0 1 1 0;
+}
+.scroll-pane:disabled {
+    -fx-opacity: -fx-disabled-opacity;
 }
+/* new styleclass for edge to edge scrollpanes that don't want to draw a border */
+.scroll-pane.edge-to-edge,
+.tab-pane > * > .scroll-pane {
+    -fx-background-color: -fx-background;
+    -fx-background-insets: 0;
+    -fx-padding: 0;
+}
+.scroll-pane.edge-to-edge > .scroll-bar,
+.tab-pane > * > .scroll-pane > .scroll-bar {
+    -fx-background-insets: 0;
+    -fx-padding: 0;
+}
+.scroll-pane.edge-to-edge > .scroll-bar > .increment-button, 
+.scroll-pane.edge-to-edge > .scroll-bar > .decrement-button,
+.tab-pane > * > .scroll-pane > .scroll-bar > .increment-button, 
+.tab-pane > * > .scroll-pane > .scroll-bar > .decrement-button {
+    -fx-padding: 3px;
+}
+/*******************************************************************************
+ *                                                                             *
+ * Separator                                                                   *
+ *                                                                             *
+ ******************************************************************************/
 
-.scroll-bar:horizontal:focused {
-    -fx-background-color:
-        -fx-focus-color,
-        -fx-box-border,
-        linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%);
-    -fx-background-insets: -1.4, 0, 1;
+.separator .line {
+    -fx-border-style: segments(0.166667em, 0.166667em);
+    -fx-border-width: 0.083333em; /* 1 */
 }
 
-.scroll-bar:vertical {
-    -fx-background-color:
+.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;
+}
+
+.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;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ProgressBar                                                                 *
+ *                                                                             *
+ ******************************************************************************/
+.progress-bar {
+    -fx-indeterminate-bar-length: 60;
+    -fx-indeterminate-bar-escape: true;
+    -fx-indeterminate-bar-flip: true;
+    -fx-indeterminate-bar-animation-time: 2;
+}
+.progress-bar > .bar {
+    -fx-background-color: -fx-box-border,-fx-accent;
+    -fx-background-insets: 0, 1;
+    -fx-background-radius: 0.416667em, 0.416667em;
+    -fx-padding: 0.416667em; /* 5 */
+}
+.progress-bar:indeterminate > .bar {
+    -fx-background-color: linear-gradient(to left, transparent, -fx-accent);
+}
+.progress-bar > .track {
+     -fx-background-color:
         -fx-box-border,
-        linear-gradient(to top, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%);
+        linear-gradient(to bottom, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
+    -fx-background-insets:  0, 1;
+    -fx-background-radius: 0.416667em, 0.416667em;
+}
+.progress-bar:disabled {
+    -fx-opacity: -fx-disabled-opacity;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ProgressIndicator                                                           *
+ *                                                                             *
+ ******************************************************************************/
+.progress-indicator {
+    -fx-indeterminate-segment-count: 12;
+    -fx-spin-enabled: true;
+}
+.progress-indicator > .determinate-indicator > .indicator {
+    -fx-background-color: -fx-box-border, derive( -fx-background, -10%);
     -fx-background-insets: 0, 1;
+    -fx-padding: 1;
+}
+.progress-indicator > .determinate-indicator > .progress {
+    -fx-background-color: -fx-accent;
+    -fx-background-insets: 0;
+    -fx-padding: 1em; /* 9 */
+}
+/* TODO: scaling the shape seems to make it disappear */
+.progress-indicator > .determinate-indicator > .tick {
+    -fx-background-color: white;
+    -fx-background-insets: 0;
+    -fx-padding: 0.416667em; /* 5 */
+    -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";
+    -fx-scale-shape: false;
+}
+.progress-indicator:indeterminate > .spinner {
+    -fx-padding: 0.833333em; /* 10 */
+}
+.progress-indicator > .percentage {
+    -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */
+    -fx-fill: -fx-text-background-color;
+}
+.progress-indicator:disabled {
+    -fx-opacity: -fx-disabled-opacity;
+}
+.progress-indicator:indeterminate .segment {
+    -fx-background-color: -fx-accent;
+}
+.progress-indicator:indeterminate .segment0 {
+    -fx-shape:"M10,0C9.998,0,9.995,0,9.992,0C9.991,0,9.991,0,9.99,0C9.988,0,9.986,0,9.985,0S9.982,0,9.981,0S9.979,0,9.978,0S9.975,0,9.974,0S9.972,0,9.971,0C9.969,0,9.968,0,9.966,0H9.965c-0.007,0-0.014,0-0.02,0C9.944,0,9.944,0,9.944,0C9.941,0,9.939,0,9.937,0c-0.77,0.007-1.389,0.634-1.384,1.404C8.557,2.176,9.185,2.8,9.956,2.8c0.001,0,0.003,0,0.004,0H10c0.773-0.002,1.4-0.63,1.4-1.404c0-0.77-0.622-1.393-1.392-1.396C10.006,0,10.003,0,10,0L10,0z";
+}
+.progress-indicator:indeterminate .segment1 {
+    -fx-shape:"M5.688,1.156c-0.236,0-0.476,0.06-0.696,0.187C4.98,1.349,4.969,1.356,4.958,1.363c0,0-0.001,0-0.001,0C4.955,1.364,4.954,1.365,4.952,1.366c-0.001,0-0.002,0.001-0.004,0.002c0,0,0,0-0.001,0C4.944,1.371,4.94,1.373,4.936,1.375c0,0,0,0-0.001,0C4.933,1.377,4.931,1.378,4.929,1.38C4.267,1.772,4.046,2.624,4.438,3.288c0.261,0.444,0.73,0.692,1.212,0.692c0.24,0,0.484-0.062,0.706-0.192l0.034-0.02C7.058,3.378,7.283,2.52,6.896,1.851C6.636,1.405,6.168,1.156,5.688,1.156L5.688,1.156z";
+}
+.progress-indicator:indeterminate .segment2 {
+    -fx-shape:"M2.534,4.326c-0.482,0-0.951,0.25-1.209,0.697C1.323,5.027,1.321,5.029,1.32,5.031l0,0C1.319,5.033,1.318,5.034,1.317,5.036S1.315,5.039,1.314,5.04c0,0.001,0,0.002-0.001,0.002C1.312,5.044,1.311,5.046,1.31,5.048c0,0,0,0,0,0.001C1.309,5.051,1.308,5.053,1.307,5.055C1.302,5.063,1.297,5.071,1.292,5.079l0,0C1.291,5.082,1.29,5.084,1.288,5.087c-0.376,0.67-0.141,1.519,0.529,1.898c0.218,0.123,0.456,0.182,0.69,0.182c0.488,0,0.963-0.255,1.222-0.708l0.02-0.035c0.383-0.671,0.149-1.527-0.521-1.912C3.008,4.386,2.769,4.326,2.534,4.326L2.534,4.326z";
+}
+.progress-indicator:indeterminate .segment3 {
+    -fx-shape:"M1.396,8.648c-0.002,0-0.005,0-0.008,0C0.619,8.652-0.001,9.278,0,10.047c0,0.002,0,0.006,0,0.008l0,0c0,0.019,0,0.037,0,0.056c0,0.001,0,0.002,0,0.003s0,0.003,0,0.004c0.01,0.765,0.632,1.378,1.396,1.378c0.005,0,0.01,0,0.015,0c0.773-0.009,1.395-0.642,1.389-1.415v-0.04C2.794,9.27,2.166,8.648,1.396,8.648L1.396,8.648z";
+}
+.progress-indicator:indeterminate .segment4 {
+    -fx-shape:"M2.579,12.955c-0.242,0-0.487,0.062-0.71,0.194c-0.664,0.391-0.885,1.242-0.499,1.906c0.013,0.021,0.025,0.043,0.038,0.063c0.262,0.436,0.724,0.678,1.197,0.678c0.243,0,0.49-0.063,0.714-0.197c0.665-0.396,0.883-1.257,0.489-1.922l-0.02-0.034C3.526,13.201,3.059,12.955,2.579,12.955L2.579,12.955z";
+}
+.progress-indicator:indeterminate .segment5 {
+    -fx-shape:"M5.772,16.09c-0.489,0-0.965,0.257-1.223,0.712c-0.38,0.671-0.146,1.52,0.523,1.901c0.002,0.001,0.004,0.002,0.007,0.004h0c0.004,0.002,0.008,0.004,0.012,0.007c0,0,0,0,0.001,0c0.001,0.001,0.002,0.002,0.004,0.002c0.001,0.001,0.003,0.002,0.004,0.003c0,0,0.001,0,0.001,0.001c0.012,0.006,0.023,0.013,0.035,0.019c0.214,0.119,0.446,0.176,0.675,0.176c0.489,0,0.963-0.258,1.22-0.716c0.377-0.675,0.137-1.529-0.537-1.908l-0.035-0.02C6.242,16.149,6.006,16.09,5.772,16.09L5.772,16.09z";
+}
+.progress-indicator:indeterminate .segment6 {
+    -fx-shape:"M10.14,17.198c-0.006,0-0.013,0-0.02,0h-0.039c-0.773,0.011-1.394,0.646-1.385,1.419c0.008,0.767,0.631,1.382,1.396,1.382c0.003,0,0.006,0,0.009-0.001c0.024,0,0.051,0,0.075-0.001c0.769-0.016,1.38-0.648,1.367-1.418C11.53,17.813,10.904,17.198,10.14,17.198L10.14,17.198z";
+}
+.progress-indicator:indeterminate .segment7 {
+    -fx-shape:"M14.433,15.97c-0.245,0-0.494,0.064-0.72,0.2l-0.034,0.021c-0.663,0.397-0.88,1.258-0.483,1.922c0.261,0.439,0.725,0.683,1.2,0.683c0.24,0,0.484-0.062,0.707-0.194c0.022-0.013,0.044-0.025,0.065-0.039c0.656-0.399,0.866-1.254,0.469-1.913C15.373,16.212,14.909,15.97,14.433,15.97L14.433,15.97z";
+}
+.progress-indicator:indeterminate .segment8 {
+    -fx-shape:"M17.539,12.748c-0.493,0-0.973,0.261-1.229,0.723l-0.02,0.034c-0.376,0.676-0.133,1.53,0.542,1.907c0.216,0.121,0.45,0.178,0.681,0.178c0.487,0,0.96-0.256,1.217-0.71c0.003-0.006,0.007-0.012,0.01-0.019c0.007-0.013,0.015-0.025,0.021-0.038l0,0c0.002-0.003,0.003-0.005,0.004-0.008c0.369-0.675,0.124-1.521-0.55-1.893C18.001,12.805,17.769,12.748,17.539,12.748L17.539,12.748z";
+}
+.progress-indicator:indeterminate .segment9 {
+    -fx-shape:"M18.603,8.408c-0.011,0-0.021,0-0.031,0c-0.773,0.018-1.388,0.657-1.373,1.431l0.001,0.04c0.015,0.765,0.641,1.377,1.403,1.377c0.008,0,0.016,0,0.023,0c0.77-0.013,1.383-0.646,1.373-1.414c0-0.003,0-0.006,0-0.009l0,0c-0.001-0.019-0.001-0.037-0.001-0.055c0-0.001,0-0.001-0.001-0.002c0-0.002,0-0.004,0-0.006C19.979,9.012,19.358,8.408,18.603,8.408L18.603,8.408z";
+}
+.progress-indicator:indeterminate .segment10 {
+    -fx-shape:"M17.345,4.121c-0.248,0-0.5,0.066-0.728,0.205c-0.659,0.403-0.869,1.266-0.468,1.927l0.021,0.034c0.265,0.435,0.728,0.675,1.202,0.675c0.247,0,0.497-0.065,0.724-0.202c0.659-0.397,0.871-1.252,0.477-1.912c-0.007-0.011-0.013-0.021-0.02-0.032c-0.001-0.002-0.002-0.003-0.002-0.004c-0.001,0-0.001-0.001-0.001-0.002c-0.004-0.005-0.008-0.011-0.011-0.017c0-0.001,0-0.001-0.001-0.001c-0.001-0.002-0.002-0.004-0.004-0.007C18.271,4.358,17.813,4.121,17.345,4.121L17.345,4.121z";
+}
+.progress-indicator:indeterminate .segment11 {
+    -fx-shape:"M14.104,1.039c-0.494,0-0.974,0.264-1.227,0.729c-0.37,0.679-0.12,1.531,0.559,1.903l0.034,0.019c0.214,0.117,0.445,0.173,0.673,0.173c0.495,0,0.976-0.262,1.231-0.726c0.371-0.674,0.129-1.519-0.542-1.894c-0.012-0.006-0.024-0.013-0.036-0.02c-0.007-0.004-0.014-0.008-0.021-0.012c-0.003-0.001-0.006-0.003-0.009-0.005C14.556,1.094,14.329,1.039,14.104,1.039L14.104,1.039z";
 }
 
-.scroll-bar:vertical:focused {
-    -fx-background-color:
-        -fx-focus-color,
-        -fx-box-border,
-        linear-gradient(to top, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%);
-    -fx-background-insets: -1.4, 0, 1;
+/*******************************************************************************
+ *                                                                             *
+ * Text COMMON                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+.text-input {
+    -fx-text-fill: -fx-text-inner-color;
+    -fx-highlight-fill: derive(-fx-control-inner-background,-20%);
+    -fx-highlight-text-fill: -fx-text-inner-color;
+    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
+    -fx-background-color: -fx-text-box-border, -fx-control-inner-background;
+    -fx-background-insets: 0, 1;
+    -fx-background-radius: 2, 2;
+    -fx-cursor: text;
+}
+.text-input:focused {
+    -fx-highlight-fill: -fx-accent;
+    -fx-highlight-text-fill: white;
+    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-control-inner-background; 
+    -fx-background-insets: -2, -0.3, 1;
+    -fx-background-radius: 6, 3.4, 2, 2;
+    -fx-prompt-text-fill: transparent;
+}
+.text-input:disabled {
+    -fx-opacity: -fx-disabled-opacity;
 }
 
-.scroll-bar:horizontal .thumb {
-    -fx-background-color:
-        -fx-box-border,
-        linear-gradient(to bottom, derive(-fx-color,95%), derive(-fx-color,10%)),
-        linear-gradient(to bottom, derive(-fx-color,38%), derive(-fx-color,-16%));
-    -fx-background-insets: 0, 1, 2;
-    -fx-background-radius: 0.5em; /* makes sure this remains circular */
+/*******************************************************************************
+ *                                                                             *
+ * TextField                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+.text-field {
+    -fx-padding: 3 5 3 5;
 }
 
-.scroll-bar:vertical .thumb {
-    -fx-background-color:
-        -fx-box-border,
-        linear-gradient(to right, derive(-fx-color,95%), derive(-fx-color,10%)),
-        linear-gradient(to right, derive(-fx-color,38%), derive(-fx-color,-16%));
+/*******************************************************************************
+ *                                                                             *
+ * TextArea                                                                    *
+ *                                                                             *
+ ******************************************************************************/
+.text-area {
+    -fx-padding: 0;
+    -fx-cursor: default;
+}
+.text-area > .scroll-pane {
+    -fx-background-color: transparent;
+}
+.text-area .content {
+    -fx-padding: 3 5 3 5; 
+    -fx-cursor: text;
+}
+
+
+/*******************************************************************************
+ *                                                                             *
+ * ChoiceBox                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+.choice-box {
+    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; 
     -fx-background-insets: 0, 1, 2;
-    -fx-background-radius: 0.5em; /* makes sure this remains circular */
+    -fx-background-radius: 5, 4, 3;
+    -fx-padding: 0.0em 0.5em 0.0em 0.0em; /* 0 6 0 0 */
+    -fx-alignment: CENTER;
+    -fx-content-display: LEFT;
 }
 
-.scroll-bar:focused .thumb {
+.choice-box:focused {
     -fx-color: -fx-focused-base;
+    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color; 
+    -fx-background-insets: -2, -0.3, 1, 2;
+    -fx-background-radius: 7, 6, 4, 3;
 }
 
-.scroll-bar .thumb:hover {
+.choice-box:hover {
     -fx-color: -fx-hover-base;
 }
 
-/* Uncomment when RT-10521 is fixed.
-.scroll-bar .thumb:pressed {
+.choice-box:showing {
     -fx-color: -fx-pressed-base;
 }
-*/
 
-.scroll-bar:horizontal .track {
-     -fx-background-color:
-        -fx-box-border,
-        linear-gradient(to bottom, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
-    -fx-background-insets:  0, 1;
-    -fx-background-radius: 0.5em; /* makes sure this remains circular */
+.choice-box > .label {
+    -fx-padding: 0.166667em 0.333333em 0.25em 0.5em; /* 2 4 3 6 */
+    -fx-text-fill: -fx-text-base-color;
 }
 
-.scroll-bar:vertical .track {
-     -fx-background-color:
-        -fx-box-border,
-        linear-gradient(to right, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
-    -fx-background-insets:  0, 1;
-    -fx-background-radius: 0.5em; /* makes sure this remains circular */
+.choice-box > .open-button {
+    -fx-background-color: null;
+    -fx-padding: 0.083333em 0.0em 0.0em 0.666667em; /* 1 0 0 8 */
 }
 
-.scroll-bar .increment-button {
-    -fx-background-color:
-        -fx-box-border,
-        linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%));
-    -fx-background-insets:  0, 1;
-    -fx-padding: 0.25em; /* 3 */
+.choice-box > .open-button > .arrow {
+    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
+    -fx-background-insets: 1 0 -1 0, 0;
+    /* padding determines the size of the arrow;
+       this should match the design size in the SVG */
+    -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";
 }
 
-.scroll-bar .decrement-button {
-    -fx-background-color:
-        -fx-box-border,
-        linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%));
-    -fx-background-insets:  0, 1;
-    -fx-padding: 0.25em; /* 3 */
+.choice-box > .context-menu {
+    -fx-background-radius: 6, 5, 4;
 }
 
-.scroll-bar:horizontal .increment-arrow {
-    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-    -fx-background-insets: 1 0 -1 0, 0;
-    -fx-padding: 0.5em 0.333333em 0.0em 0.0em; /* 6 4 0 0 */
-    -fx-shape: "M 4 0 L 0 -3 L 0 3 z";
+/*.choice-box > .context-menu > .menu-item {
+    -fx-accelerator-gutter: 0;
+}*/
+
+/* TODO: need to use the ID here.  For some reason, the other form does not
+ * work.  This might be related to popup issues.
+ */
+/*.choice-box > * > .menu-item-radio {*/
+#choice-box-menu-item > * > .menu-item-radio {
+    /* When we show RadioMenuItems in ChoiceBox, we replace the radio shape with
+       a check mark, which looks much better */
+    -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z";
+    -fx-scale-shape: false;
 }
 
-.scroll-bar:vertical .increment-arrow {
-    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-    -fx-background-insets: 1 0 -1 0, 0;
-    -fx-padding: 0.333333em 0.5em 0.0em 0.0em; /* 4 6 0 0 */
-    -fx-shape: "M -3 0 L 0 4 L 3 0 z";
+.choice-box:disabled {
+    -fx-opacity: -fx-disabled-opacity;
 }
 
-.scroll-bar:horizontal .decrement-arrow {
-    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-    -fx-background-insets: 1 0 -1 0, 0;
-    -fx-padding: 0.5em 0.333333em 0.0em 0.0em; /* 6 4 0 0 */
-    -fx-shape: "M 0 0 L 4 -3 L 4 3 z";
+/*******************************************************************************
+ *                                                                             *
+ * TabPane                                                                     *
+ *                                                                             *
+ ******************************************************************************/
+
+.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;
+}
+
+.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-background-color: -fx-control-inner-background;
+    -fx-padding: 0.0em; /* 0 */
+    /* -fx-opacity: -fx-disabled-opacity;*/
+}
+
+.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-color: -fx-shadow-highlight-color, -fx-tab-border-color, -fx-inner-border, -fx-body-color;
+    -fx-background-radius: 5 5 0 0, 5 5 0 0, 4 4 0 0, 3 3 0 0;
+    -fx-background-insets: 0 0 -1 0, 0, 1, 2;*/
+    -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.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;
+}
+
+.tab-pane > .tab-header-area > .headers-region > .tab:right {
+    -fx-background-color: -fx-tab-border-color, -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;
+}
+
+.tab-pane > .tab-header-area > .headers-region > .tab:left {
+    -fx-background-color: -fx-tab-border-color, -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;
+}
+
+.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 {*/
+    /* 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 {
+    -fx-background-insets: 0, 0 0 1 0;
+    -fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */
+}
+
+.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 */
+}
+
+.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 */
 }
 
-.scroll-bar:vertical .decrement-arrow {
+.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);
+}*/
+
+/* 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;
+    -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";
+    -fx-scale-shape: false;
+    -fx-effect: dropshadow(two-pass-box , rgba(255, 255, 255, 0.4), 1, 0.0 , 0, 1);
+}
+
+.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button:hover {
+    -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.333333em 0.5em 0.0em 0.0em; /* 4 6 0 0 */
-    -fx-shape: "M -3 0 L 0 -4 L 3 0 z";
+    -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";
 }
 
-.scroll-bar:disabled {
-    -fx-opacity: -fx-disabled-opacity;
+/* FLOATING TABS CUSTOMISATION */
+.tab-pane.floating > .tab-header-area > .tab-header-background {
+    -fx-background-color: null;
 }
 
-/* The opacity of the parent is applied to the children.  So we make the
- * opacity 1.0 here to avoid double translucency.
- */
-/*:disabled > * > .scroll-bar {
-    -fx-opacity: 1.0;
+.tab-pane.floating > .tab-header-area {
+    -fx-background-color: null;
+}
+
+.tab-pane.floating > .tab-content-area {
+    -fx-background-color: -fx-tab-border-color, -fx-control-inner-background;
+    -fx-background-insets: 0, 1;
+    -fx-background-radius: 5, 4;
+    -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;
 }*/
-{{{
+
+
+/* -------------- CODE  FOR THE NON-EDITABLE COMBO-BOX -------------- */
+
+/* ------- MAIN BUTTON ------- */
+
+.combo-box-base  {
+    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; 
+    -fx-background-insets: 0, 1, 2;
+    -fx-background-radius: 5, 4, 3;
+    -fx-padding: 0;
+}
+
+.combo-box-base:hover {
+    -fx-color: -fx-hover-base;
+}
+
+/*------- THIS SPECIFIES THE BUTTON COLOR WHEN THE POPUP MENU IS SHOWING -------*/
+.combo-box-base:showing {
+    -fx-color: -fx-pressed-base;
+}
+
+.combo-box-base:focused {
+    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color; 
+    -fx-background-insets: -2, -0.3, 1, 2;
+    -fx-background-radius: 7, 6, 4, 3;
+}
+
+.combo-box-base:disabled {
+    -fx-opacity: .4;
+}
+
+/* ------- OPEN BUTTON ------- */
+.combo-box-base > .arrow-button {
+    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
+    -fx-background-insets: 0, 1, 2;
+    -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
+    -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5  */
+}
+/*    -fx-background-color: null;
+    -fx-background-insets: 0, 1, 2;
+    -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
+    -fx-padding: 0.5em 0.416667em 0.5em 0.416667em;  6 5 6 5 
+}*/
+/*.combo-box-base.split-button .arrow-button {
+    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
+    -fx-background-insets: 0, 1, 2;
+    -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
+    -fx-padding: 0.5em 0.416667em 0.5em 0.416667em;  6 5 6 5 
+}*/
+
+/* ------- ARROW* ------- */
+.combo-box-base > .arrow-button > .arrow,
+.web-view .form-select-button .arrow {
+    -fx-background-insets: 1 0 -1 0, 0;
+    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
+    -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";
+}
+
+.web-view .form-select-button {
+    -fx-background-radius: 2, 2, 1, 0;
+    -fx-background-insets: 2 2 1 2, 2, 3, 4;
+}
+
+/* ------- POPUP MENU ------- */
+/* --- .combo-box .popup-menu, .combo-box .menu-item, .combo-box .popup-menu .menu-item-radio
+all inherit from Menu Control's popup-menu. --- */
+
+
+/* -------------- CODE  FOR THE EDITABLE COMBO-BOX -------------- */
+
+/* ------- TEXTBOX SEGMENT OF COMBO BOX ------- */
+/*--- The editable ComboBox TextBox inherits its properties from the TextBox Control.
+Only the properties with values that are different from the TextBox are specified here. ---*/
+
+.combo-box-base:editable > .text-field {
+    -fx-padding: 3 5 2 5;
+    -fx-background-radius: 4 5 5 4, 3 4 4 3, 2 3 3 2;
+    -fx-background-insets: 0 0 -1 0, 0, 1;
+    -fx-vpos: CENTER;
+    -fx-content-display: LEFT;
+}
+
+.combo-box-base:editable > .text-field:focused {
+    -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-control-inner-background;
+    -fx-background-radius: 5.4, 3, 2;
+    -fx-background-insets: -1.4, 0, 1;
+}
+
+.combo-box-base:editable:focused {
+    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-control-inner-background;
+    -fx-background-radius: 5, 5, 4, 3;
+    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
+}
+
+/* -------------- STYLES FOR THE DEFAULT LISTVIEW-BASED COMBOBOX ------------- */
+
+/* Customie the ListCell that appears in the ComboBox button itself */
+.combo-box > .list-cell {
+    -fx-background: transparent;
+    -fx-background-color: transparent;
+    -fx-text-fill: -fx-text-base-color;
+    -fx-padding: 3 0 2 7;
+    -fx-cell-size: 1.7500em; /* 21 */
+}
+
+.combo-box-popup > .list-view {
+    -fx-background-color: -fx-box-border, -fx-control-inner-background;
+    -fx-background-insets: 0, 1;
+    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 );
+}
+
+.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell {
+    -fx-padding: 4 0 4 5;
+    
+    /* No alternate highlighting */
+    -fx-background-color: -fx-control-inner-background;
+}
+
+.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, 
+.combo-box-popup  > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
+    -fx-background: -fx-accent;
+    -fx-background-color: -fx-selection-bar;
+    -fx-text-fill: -fx-selection-bar-text;
+}
+
+.combo-box-popup  > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:hover {
+    -fx-background-color: -fx-cell-hover-color;
+    -fx-text-fill: -fx-text-inner-color;
+}
+
+
 /*******************************************************************************
  *                                                                             *
- * ScrollPane                                                                  *
+ * TitledPane                                                                  *
  *                                                                             *
  ******************************************************************************/
 
-.scroll-pane:focused {
-    -fx-border-color: -fx-focus-color;
+.titled-pane {
+    -fx-text-fill: -fx-text-base-color;
 }
-.scroll-pane:disabled {
-    -fx-opacity: -fx-disabled-opacity;
+
+.titled-pane:focused {
+    -fx-text-fill: white;
+}
+
+.titled-pane > .title {
+    -fx-background-color: -fx-box-border, -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.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */
+}
+
+.titled-pane:focused > .title {
+    -fx-color: -fx-focus-color;
+}
+
+.titled-pane > .title > .arrow-button {
+    -fx-background-color: null;
+    -fx-background-insets: 0;
+    -fx-background-radius: 0;
+    -fx-padding: 0.0em 0.25em 0.0em 0.0em; /* 0 3 0 0 */
+}
+
+.titled-pane > .title > .arrow-button > .arrow {
+    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
+    -fx-background-insets: 1 0 -1 0, 0;
+    -fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */
+    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
+}
+
+.titled-pane:collapsed > .title > .arrow-button > .arrow {
+    -fx-rotate: -90;
+}
+
+.titled-pane > *.content {
+    -fx-background-color:
+        -fx-box-border,
+        linear-gradient(to bottom, derive(-fx-color,-02%), derive(-fx-color,65%) 12%, derive(-fx-color,23%) 88%, derive(-fx-color,50%) 99%, -fx-box-border);
+    -fx-background-insets: 0, 0 1 1 1;
+    -fx-padding: 0.167em;
+}
+
+.titled-pane:focused > .title > .arrow-button > .arrow {
+    -fx-background-color: white;
 }
 
 /*******************************************************************************
  *                                                                             *
- * Separator                                                                   *
+ * Accordion                                                                   *
  *                                                                             *
  ******************************************************************************/
 
-.separator .line {
-    -fx-border-style: segments(0.166667em, 0.166667em);
-    -fx-border-width: 0.083333em; /* 1 */
+.accordion > .titled-pane > .title {
+    -fx-background-color:
+        -fx-box-border,
+        -fx-inner-border,
+        -fx-body-color;
+    -fx-background-insets: -1 0 0 0, 0 1 1 1, 1 2 2 2;
+    -fx-background-radius: 0, 0, 0;
 }
 
-.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;
+.accordion > .first-titled-pane > .title {
+    -fx-background-insets: 0, 1, 2;
 }
 
-.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;
+.accordion > .titled-pane:focused > .title {
+    -fx-color: -fx-focus-color;
+}
+
+.accordion > .titled-pane:focused {
+    -fx-text-fill: white;
+}
+
+.accordion > .titled-pane:focused > .title > .arrow-button > .arrow {
+    -fx-background-color: white;
+}
+
+.accordion > .titled-pane:focused > .titled-pane:collapsed > .title > .arrow-button > .arrow {
+    -fx-background-color: white;
+}
+
+.accordion > .titled-pane:collapsed:focused > .title {
+    -fx-color: -fx-focus-color;
+}
+
+.accordion > .titled-pane:expanded:focused > .title {
+    -fx-color: -fx-focus-color;
+}
+
+.accordion > .titled-pane:hover > .title {
+    -fx-color: -fx-hover-base;
 }

samples/Modena/src/main/resources/modena/TestApp.css

     -fx-effect: null;
 }
 .section-label {
-    -fx-font-weight: bold;
-    -fx-text-fill: rgba(0,0,0,0.5);
+    -fx-font-weight: normal;
+    -fx-text-fill: derive(-fx-text-background-color,30%);
+}
+
+.section-border {
+    -fx-border-color: ladder(
+        -fx-background,
+        derive(-fx-background,10%) 20%,
+        derive(-fx-background,-10%)  21%
+     );;
+    -fx-padding: 20;
 }

samples/Modena/src/main/resources/modena/ui-mosaic.fxml

+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import java.lang.*?>
+<?import java.util.*?>
+<?import javafx.collections.*?>
+<?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">
+  <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">
+          <String fx:value="Item 1" />
+          <String fx:value="Item 2" />
+          <String fx:value="Item 3" />
+        </FXCollections>
+      </items>
+    </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="291.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" />
+    <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">
+      <items>
+        <MenuItem mnemonicParsing="false" text="Action 1" />
+        <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="241.0" layoutY="196.0" mnemonicParsing="false" prefWidth="90.0" selected="true" text="Toggle">
+      <toggleGroup>
+        <ToggleGroup fx:id="toggle1" />
+      </toggleGroup>
+    </ToggleButton>
+    <ToggleButton layoutX="341.0" layoutY="196.0" mnemonicParsing="false" prefWidth="90.0" selected="false" text="Toggle" toggleGroup="$toggle1" />
+    <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">
+      <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">
+          <String fx:value="Item 1" />
+          <String fx:value="Item 2" />
+          <String fx:value="Item 3" />
+        </FXCollections>
+      </items>
+    </ChoiceBox>
+    <ToolBar layoutX="39.0" layoutY="738.0" 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>
+    <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">