External FXML file within AnchorPane/BorderPane/Pane

Question

I need to load a FXML file into a panel (AnchorPane, BorderPane, Pane, etc) but I had some problems.
Initially I tried to load my external FXML file within AnchorPane the following manner:
package signa;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.Parent;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
public class Estructura_GeneralController {
    /*ignore this section
    @FXML Button modalidadButton;
    @FXML Button closeButton;
    @FXML Button chatButton;
    @FXML Button helpButton;
    @FXML HBox herramientas;
    @FXML Button latLonBtn;
    @FXML Button utmBtn;
    @FXML AnchorPane paneles;
    @FXML Button agregarUnidadBtn;
    @FXML Button derrotasBtn;
    @FXML Button editarUnidadBtn;
    @FXML Button marcadoresBtn;
    @FXML Button organizacionTareasBtn;
    @FXML Button nuevoPlanBtn;
    @FXML Button patronesBtn;
    @FXML Parent agregarUnidadPanel;
    @FXML Parent derrotasPanel;
    @FXML Parent editarUnidadPanel;
    @FXML Parent marcadoresPanel;
    @FXML Parent organizacionTareasPanel;
    @FXML Parent nuevoPlanPanel;
    @FXML Parent patronesPanel;
    public void switchPane(ActionEvent event) {
          Object eventSource = event.getSource();
          if (eventSource == agregarUnidadBtn) {
//               paneles.setCenter(agregarUnidadPanel);//.addAll(pane1);
                        paneles.setLeftAnchor(agregarUnidadPanel, null);
                        paneles.getChildren().addAll(agregarUnidadPanel);
          } else if (eventSource == derrotasBtn) {
               paneles.setLeftAnchor(derrotasPanel, null);
                        paneles.getChildren().addAll(derrotasPanel);
          } else if (eventSource == editarUnidadBtn) {
               paneles.setLeftAnchor(editarUnidadPanel, null);
                        paneles.getChildren().addAll(editarUnidadPanel);
          } else if (eventSource == marcadoresBtn) {
               paneles.setLeftAnchor(marcadoresPanel, null);
                        paneles.getChildren().addAll(marcadoresPanel);
          }else if (eventSource == organizacionTareasBtn) {
               paneles.setLeftAnchor(organizacionTareasPanel, null);
                        paneles.getChildren().addAll(organizacionTareasPanel);
          }else if (eventSource == nuevoPlanBtn) {
               paneles.setLeftAnchor(nuevoPlanPanel, null);
                        paneles.getChildren().addAll(nuevoPlanPanel);
          }else if (eventSource == patronesBtn) {
               paneles.setLeftAnchor(patronesPanel, null);
                        paneles.getChildren().addAll(patronesPanel);
}Now, in the FXML file:
//All this is within a AnchorPane
                  <AnchorPane fx:id="paneles" minHeight="0.0" minWidth="0.0" styleClass="anchorpane">
                  <prefHeight>
                    <Long fx:value="851" />
                  </prefHeight>
                  <prefWidth>
                    <Long fx:value="426" />
                  </prefWidth>
                  <stylesheets>
                    <URL value="@SIGNA.css" />
                  </stylesheets>
                  <fx:define>
                         <fx:include source="Panel_AgregarUnidades.fxml" fx:id="agregarUnidadPanel"/>
                  </fx:define>
                  <fx:define>
                         <fx:include source="Panel_Derrotas.fxml" fx:id="derrotasPanel"/>
                  </fx:define>
                  <fx:define>
                         <fx:include source="Panel_EditarUnidades.fxml" fx:id="editarUnidadPanel"/>
                  </fx:define>
                  <fx:define>
                         <fx:include source="Panel_Marcadores.fxml" fx:id="marcadoresPanel"/>
                  </fx:define>
                  <fx:define>
                        <fx:include source="Panel_OrganizacionTareas.fxml" fx:id="organizacionTareasPanel"/>
                  </fx:define>
                  <fx:define>
                        <fx:include source="Panel_NuevoPlan.fxml" fx:id="nuevoPlanPanel"/>
                  </fx:define>
                  <fx:define>
                        <fx:include source="Panel_PatronesPanel.fxml" fx:id="patronesPanel"/>
                  </fx:define>
                </AnchorPane>
                //With these buttons try to load the external panels
                <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" styleClass="anchorpane, Vbox">
                  <children>
                    <Button fx:id="agregarUnidadBtn" contentDisplay="CENTER" layoutX="5.0" layoutY="12.0" mnemonicParsing="false" onAction="#switchPane" prefWidth="88.0" text="${'Agregar' + '\n' + 'Unidades'}" />
                    <Button id="derrotasPanel" fx:id="derrotasBtn" contentDisplay="CENTER" layoutX="5.0" layoutY="57.0" mnemonicParsing="false" onAction="#switchPane" prefHeight="37.0" prefWidth="88.0" text="Derrotas" />
                    <Button fx:id="editarUnidadBtn" contentDisplay="CENTER" layoutX="5.0" layoutY="102.0" mnemonicParsing="false" onAction="#switchPane" prefWidth="88.0" text="${'Editar' + '\n' + 'Unidades'}" />
                    <Button fx:id="marcadoresBtn" contentDisplay="CENTER" layoutX="5.0" layoutY="147.0" mnemonicParsing="false" onAction="#switchPane" prefHeight="37.0" prefWidth="88.0" text="Marcadores" />
                    <Button fx:id="organizacionTareasBtn" contentDisplay="CENTER" layoutX="5.0" layoutY="192.0" mnemonicParsing="false" onAction="#switchPane" prefWidth="88.0" text="${'Organización' + '\n' + 'de Tareas'}" />
                    <Button fx:id="nuevoPlanBtn" contentDisplay="CENTER" layoutX="5.0" layoutY="237.0" mnemonicParsing="false" onAction="#switchPane" prefWidth="88.0" text="${'Nuevo' + '\n' + 'Plan'}" />
                    <Button fx:id="patronesBtn" contentDisplay="CENTER" layoutX="5.0" layoutY="282.0" mnemonicParsing="false" onAction="#switchPane" prefHeight="37.0" prefWidth="88.0" text="Patrones" />
                  </children>In this way I managed to load the external FXML file but but gives me an exception.
WARNING: com.sun.javafx.css.StyleHelper calculateValue caught:
java.lang.IllegalArgumentException: No enum constant javafx.geometry.Pos.left
furthermore if I press a button pressed previously, I have another problem of exception.
java.lang.RuntimeException: java.lang.reflect.InvocationTargetException*
Caused by: java.lang.reflect.InvocationTargetException
*Caused by: java.lang.IllegalArgumentException: Children: duplicate children added: parent = AnchorPane[id=paneles, styleClass=anchorpane]*
I also tried a slightly changing BordePane controller code:
public void switchPane(ActionEvent event) {
          Object eventSource = event.getSource();
          if (eventSource == agregarUnidadBtn) {
               paneles.setCenter(agregarUnidadPanel);
                        paneles.getChildren().addAll(agregarUnidadPanel);
          } Now obviously the variable "paneles" is a BorderPane.
however the result is the same only without having the problem of the second exception I had with the AnchorPane
I attached a picture to have some idea
Thank you very much any help and I ask an apology for the bad English.
http://img42.imageshack.us/img42/5770/panelssigna.png
http://img17.imageshack.us/img17/117/examplepanelagregarunid.png
Edited by: biochemistry43 on 11/12/2012 12:55 PM

Answer 1

This is the only part in my CSS file where the word left
.table-view .column-header .label{
    -fx-font-size: 11px;
    -fx-font-family: "Calibri";
    -fx-text-fill: white;
    -fx-alignment: left;
}This is the only part in my CSS file where the word left
If I suppress the error goes away which is great and I am happy but ... I do not understand why ... Why does that matter?
If I put the word left (without quotes) returns the error and if I put it back (with quotes), however get the error.
This is all my CSS code:
.theme {
        master-color: gray;
    -fx-border-width: 1px;
/*    -fx-border-color: rgb(30,30,30);*/
    -fx-background-color: rgb(50,50,50);
    -fx-font-size: 11px;
    -fx-font-family: "Calibri";
*.split-pane {
    -fx-padding: 0;
    -fx-border-width: 0;
*.anchorpane {
    -fx-background-color: rgb(50,50,50);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
    /*-fx-background-insets: 0,1,4,5,6;*/
    -fx-background-radius: 9,8,5,4,3;   
    -fx-padding: 3 11 3 11;
    -fx-font-size: 11px;
    -fx-font-family: "Calibri";
    -fx-border: 1px;
    -fx-border-color: rgb(30,30,30);
.borderpane {
    -fx-background-color: rgb(50,50,50);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
    /*-fx-background-insets: 0,1,4,5,6;*/
    -fx-background-radius: 9,8,5,4,3;   
    -fx-padding: 3 11 3 11;
    -fx-font-size: 11px;
    -fx-font-family: "Calibri";
    -fx-border: 1px;
    -fx-border-color: rgb(30,30,30);
/*Layouts menores*/
*.Hbox {
-fx-background-color: rgb(80,80,80);
-fx-background-radius: 10px;
-fx-border-width: 2px;
-fx-border-color: rgb(110,110,110);
-fx-border-radius: 10px;
-fx-padding: 5px;
-fx-spacing: 5px;
*.Vbox {
-fx-background-color: rgb(80,80,80);
-fx-background-radius: 10px;
-fx-border-width: 2px;
-fx-border-color: rgb(110,110,110);
-fx-border-radius: 10px;
-fx-padding: 5px;
.frame {
    -fx-background-color: rgb(80, 80, 80);
    -fx-padding: 2px;
    -fx-border-width: 2px;
    -fx-border-color: rgb(110, 110, 110) ;
.display-frame {
    -fx-border-color: rgb(230, 230, 230);
    -fx-border-radius: 10px;
    -fx-border-width: 2px;
    -fx-padding: 2px;
    -fx-background-color: linear-gradient(#505050 5%, #505050 60%, #404040 80%);
/*botones*/
.toggle-button{
    min-width: 25px;
     max-width: 80px;
     min-height: 18px;
     max-height: 19px;
    -fx-border-radius:10px;
    -fx-padding: 5; /*espacio entre los bordes del boton*/
    -fx-background-radius: 10px;
    -fx-background-color:
        #090a0c,
        linear-gradient(#404040 0%, #404040 5%, #303030 60%)
        radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1);
    -fx-text-fill: white ;
    -fx-font-size: 11px;
    -fx-font-family: "Calibri";
.toggle-button:hover {
    -fx-effect: dropshadow( three-pass-box , #808080  , 5, 0.6 , 0 , 0);
.toggle-button:selected {
    -fx-background-color: rgb(130,130,130);
    -fx-text-fill: white;
    -fx-border-insets: 0;
    -fx-effect: dropshadow( three-pass-box , rgba(0, 225, 255,1) , 5, 0.3 , 0 , 0);
/*.menu-item {
    -fx-background-color: gray;
.button {
     min-width: 25px;
     max-width: 80px;
     min-height: 18px;
     max-height: 19px;
    -fx-border-radius:10px;
    -fx-padding: 5; /*espacio entre los bordes del boton*/
    -fx-background-radius: 10px;
    -fx-background-color:
        #090a0c,
        linear-gradient(#404040 0%, #404040 5%, #303030 60%)
        radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1);
    -fx-text-fill: white ;
    -fx-font-size: 11px;
    -fx-font-family: "Calibri";
.button:hover {
   -fx-effect: dropshadow( three-pass-box , #808080  , 5, 0.6 , 0 , 0);
.button:pressed {
/*    -fx-border-color:rgb(0, 225, 255);*/
/*    -fx-border-width: 2px;*/
    -fx-background-color: rgb(130,130,130);
    -fx-text-fill: white;
    -fx-border-insets: 0;
    -fx-effect: dropshadow( three-pass-box , rgba(0, 225, 255,1) , 5, 0.3 , 0 , 0);
#nvoPlanBtn:focused, #openPlanBtn:focused, #savePlanBtn:focused, #closePlanBtn:focused,
#addUnitsBtn:focused, #editUnitsBtn:focused, #tareasBtn:focused, #marcadoresBtn:focused, #derrotasBtn:focused,
#patronesBtn:focused, #metOCBtn:focused {
    -fx-background-color: rgb(130,130,130);
    -fx-text-fill: white;
    -fx-border-insets: 0;
    -fx-effect: dropshadow( three-pass-box , rgba(0, 225, 255,1) , 5, 0.3 , 0 , 0);
.etiquetas-botones {
    -fx-text-fill: white;
    -fx-font-style: italic;
#newButton:pressed, #openButton:pressed, #saveButton:pressed, #saveAsButton:pressed, #layersButton:pressed,
#zoomInButton:pressed, #zoomOutButton:pressed, #zoomMexicoButton:pressed, #zoomMundoButton:pressed, #zoomBoxButton:pressed,
#panViewButton:pressed, #selectButton:pressed, #pointButton:pressed, #poliLineButton:pressed{
    -fx-background-color: rgb(130,130,130);
    -fx-text-fill: white;
    -fx-border-insets: 0;
    -fx-effect: dropshadow( three-pass-box , rgba(0, 225, 255,1) , 5, 0.3 , 0 , 0);
.split-pane .split-pane-divider {
    -fx-background-color: rgb(50,50,50);
    -fx-border-color: rgb(50,50,50);
    -fx-minor-tick-visible: false;
#newButton {
/*    -fx-text-fill: null;*/
    -fx-graphic: url("../signa/img/file_new.png");
/*    -fx-background-color: transparent;*/
#openButton {
/*    -fx-text-fill: null;*/
    -fx-graphic: url("../signa/img/abrir.png");
/*    -fx-background-color: transparent;*/
#saveButton {
/*    -fx-text-fill: null;*/
    -fx-graphic: url("../signa/img/guardar.png");
/*    -fx-background-color: transparent;*/
#saveAsButton {
/*    -fx-text-fill: null;*/
    -fx-graphic: url("../signa/img/guardar_como.png");
/*    -fx-background-color: transparent;*/
#layersButton {
/*    -fx-text-fill: null;*/
    -fx-graphic: url("../signa/img/Layers.png");
/*    -fx-background-color: transparent;*/
#zoomInButton {
/*    -fx-text-fill: null;*/
    -fx-graphic: url("../signa/img/Zoom_In.png");
/*    -fx-background-color: transparent;*/
#zoomOutButton {
/*    -fx-text-fill: null;*/
    -fx-graphic: url("../signa/img/Zoom_Out.png");
/*    -fx-background-color: transparent;*/
#zoomMexicoButton {
/*    -fx-text-fill: null;*/
    -fx-graphic: url("../signa/img/mexico.png");
/*    -fx-background-color: transparent;*/
#zoomMundoButton{
/*    -fx-text-fill: null;*/
    -fx-graphic: url("../signa/img/mundo.png");
/*    -fx-background-color: transparent;*/
#zoomBoxButton{
/*    -fx-text-fill: null;*/
    -fx-graphic: url("../signa/img/zoom-box.png");
/*    -fx-background-color: transparent;*/
#panViewButton {
/*    -fx-text-fill: null;*/
    -fx-graphic: url("../signa/img/pan.png");
/*    -fx-background-color: transparent;*/
#selectButton {
/*    -fx-text-fill: null;*/
    -fx-graphic: url("../signa/img/pointer.png");
/*    -fx-background-color: transparent;*/
#pointButton {
/*    -fx-text-fill: null;*/
    -fx-graphic: url("../signa/img/punto.png");
/*    -fx-background-color: transparent;*/
#poliLineButton {
/*    -fx-text-fill: null;*/
    -fx-graphic: url("../signa/img/polilinea.png");
/*    -fx-background-color: transparent;*/
#shapeButton {
/*    -fx-text-fill: null;*/
    -fx-graphic: url("../signa/img/poligono.png");
/*    -fx-background-color: transparent;*/
#closeButton {
    -fx-text-fill: null;
    -fx-graphic: url("../signa/img/close.png");
    -fx-background-color: transparent;
#closeButton:hover{
    -fx-effect: dropshadow( three-pass-box , red  , 5, 0.6 , 0 , 0);
#closeButton:pressed{
    -fx-effect: dropshadow( three-pass-box , aqua  , 5, 0.6 , 0 , 0);
#helpButton {
    -fx-text-fill: null;
    -fx-graphic: url("../signa/img/Help_Icon.png");
    -fx-background-color: transparent;
#chatButton {
    -fx-text-fill: null;
    -fx-graphic: url("../signa/img/chat.png");
    -fx-background-color: transparent;
/*.menu-button {
     min-width: 25px;
     max-width: 80px;
     min-height: 18px;
     max-height: 19px;
    -fx-text-fill:white;
    -fx-border-radius:10px;
    -fx-padding: 5; espacio entre los bordes del boton
    -fx-background-radius: 10px;
    -fx-background-color:
        #090a0c,
        linear-gradient(#404040 0%, #404040 5%, #303030 60%)
        radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1);
    -fx-text-fill: aliceblue;
.menu-item:hover {
     -fx-blend-mode: darken;
.label{
    -fx-font-weight: bold;
.label.headPaneLabel{
    -fx-font-size:20px;
    -fx-font-family: "Calibri";
    -fx-text-fill: rgb(234,254,254);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1);
.label.contentLabel {
    -fx-font-size:11px;
    -fx-font-family:"Calibri";
    -fx-font-style: normal ;
    -fx-text-fill: rgb(234,254,254);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1);  
.label-name {
    -fx-text-fill: rgb(0, 225, 255);
    -fx-font-size: 36px;
    -fx-font-weight: bold;
.label-unit-station {
    -fx-text-fill: rgb(0, 225, 255);
    -fx-font-size: 17px;
    -fx-font-weight: bold;
.label-date-timeUTC-gps {
    -fx-text-fill: rgb(0, 225, 255);
    -fx-font-size: 14px;
    -fx-font-weight: bold;
.label-cog-sog-hdg {
    -fx-text-fill: rgb(0, 225, 255);
    -fx-font-size: 16px;
    -fx-font-weight: bold;
.label-long-lat {
    -fx-text-fill: rgb(0, 225, 255);
    -fx-font-size: 22px;
    -fx-font-weight: bold;
/*radiobuttons*/
.radio-button {
    -fx-text-fill: rgb(234,254,254);
    -fx-border: transparent;
.radio-button:pressed .dot {
    -fx-background-color: black;
.radio-button:hover .radio {
    -fx-effect: dropshadow( three-pass-box , #00FFFF , 3, 0.0 , 0 , 1);      
.radio-button:focused .radio{
  -fx-effect: dropshadow( three-pass-box , #00FFFF , 3, 0.0 , 0 , 1);
.separator {
    -fx-background-color: rgb(234,254,254);
    -fx-border-style: none;
    -fx-border-width: 0px;
.text-field {
    -fx-border-width: 1px;
    -fx-border-color: rgb(130,130,130);
    -fx-border-radius: 5px;
    -fx-background-radius: 5px;
    -fx-background-color: rgb(50,50,50);
    -fx-text-fill: white;
.choice-box {
    -fx-border-width: 1px;
    -fx-border-color: rgb(130, 130, 130);
    -fx-border-radius: 5px;
    -fx-text-fill: white;
    -fx-background-radius: 5px;
    -fx-background-color: rgb(50,50,50);
.table-view {
    -fx-background-color: rgb(70,70,70);
    -fx-text-fill: white;
    -fx-border-style: solid;
    -fx-border-color: transparent;
/*    -fx-border-insets: 0 1 1 0, 0 0 0 0;*/
    -fx-border-width: 0.083333em, 0.083333em;
.table-view .column-header{
    -fx-border-style: solid;
    -fx-border-color: rgb(130, 130, 130);
    -fx-border-radius: 5px;
    -fx-background-radius: 5px;
    -fx-border-insets: 0 1 1 0, 0 0 0 0;
    -fx-border-width: 0.083333em, 0.083333em;
.table-view .column-header .label{
    -fx-font-size: 11px;
    -fx-font-family: "Calibri";
    -fx-text-fill: white;
/*    -fx-alignment: "left";*/
.table-view .column-header-background {
    -fx-background-radius: 5px;
    -fx-font-family: "Calibri";
    -fx-background-color:  rgb(50,50,50);
.table-view .column-header-background .filler{
    -fx-background-color: rgb(50,50,50);
    -fx-border-color: rgb(50,50,50);
.table-row-cell {
    -fx-background-color: rgb(100,100,100);
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0.0em;
.table-row-cell:selected {
    -fx-background-color: dimgrey;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0.0em;
/*.table-cell {
    -fx-font-style: bold;
    -fx-text-fill: black;
.table view .table-cell:selected{
    -fx-text-fill: white;
/*.table-row-cell:odd {
    -fx-background-color: #414141;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0.0em;  0
    -fx-text-fill: white;
.scroll-bar .track{
    -fx-background-color: rgb(130,130,130);
    -fx-border-width: 1px;
    -fx-border-color: gray;
.scroll-bar .track:pressed{
    -fx-background-color: white;
.scroll-bar .thumb{
    -fx-background-color:
        #090a0c,
        linear-gradient(#404040 0%, #404040 5%, #303030 60%)
        radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1);
.scroll-bar .thumb:hover{
    -fx-effect: dropshadow( three-pass-box , #808080  , 5, 0.6 , 0 , 0);
.scroll-bar .thumb:pressed{
   -fx-background-color: rgb(130,130,130);
   -fx-effect: dropshadow( three-pass-box , rgba(0, 225, 255,1) , 5, 0.3 , 0 , 0);
.scroll-bar .decrement-button{
   -fx-background-color:
        #090a0c,
        linear-gradient(#404040 0%, #404040 5%, #303030 60%)
        radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1);
.scroll-bar .decrement-button:hover {
      -fx-effect: dropshadow( three-pass-box , #808080  , 5, 0.6 , 0 , 0);
.scroll-bar .decrement-button:pressed{
    -fx-background-color: rgb(130,130,130);
    -fx-effect: dropshadow( three-pass-box , rgba(0, 225, 255,1) , 5, 0.3 , 0 , 0);
.scroll-bar .decrement-button .decrement-arrow{
    -fx-background-color: gray;
    -fx-border-color: transparent;
    -fx-border-width: 0px;
.scroll-bar .decrement-button .decrement-arrow:pressed{
    -fx-background-color: white;   
.scroll-bar .increment-button{
    -fx-background-color:
        #090a0c,
        linear-gradient(#404040 0%, #404040 5%, #303030 60%)
        radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1);
.scroll-bar .increment-button:hover{
     -fx-effect: dropshadow( three-pass-box , #808080  , 5, 0.6 , 0 , 0);
.scroll-bar .increment-button:pressed{
    -fx-background-color: rgb(130,130,130);
    -fx-effect: dropshadow( three-pass-box , rgba(0, 225, 255,1) , 5, 0.3 , 0 , 0);
.scroll-bar .increment-button .increment-arrow{
    -fx-background-color: gray;
    -fx-border-color: transparent;
    -fx-border-width: 0px;
.scroll-bar .increment-button .increment-arrow:pressed{
    -fx-background-color: white;
.scroll-pane .corner{
    -fx-background-color: transparent;
.tab-pane{
    -fx-tab-max-height: 12pt;
.tab-pane .tab-content-area{
   -fx-background-color: rgb(80, 80, 80);
   -fx-padding: 2px;
   -fx-border-width: 2px;
   -fx-border-color: rgb(110, 110, 110) ;
.tab-pane .tab-header-area .tab{
    -fx-background-color: rgb(60, 60, 60);
    -fx-background-radius: 4px;
    -fx-border-width: 2px;
    -fx-border-color: #707070;
    -fx-border-radius: 4px;
    -fx-padding: 0 0 0 0;
.tab-pane .tab-header-area .tab:hover{
    -fx-border-color:  linear-gradient(#909090 60%, #909090 5%, #909090 0%);
.tab-pane .tab-header-area .tab:selected{
    -fx-border-color:  linear-gradient(#00FFFF 60%, #00FFFF 5%, #00FFFF 0%);
    -fx-background-color: rgb(130,130,130);
    -fx-text-fill: white;
    -fx-border-insets: 0;
.tab-pane .tab-header-area .tab-header-background {
    -fx-background-color:transparent;
.tab-pane .tab-header-area .tab .tab-label{
    -fx-text-fill: white;
     -fx-font-size: 11px;
    -fx-font-family: "Calibri";
    -fx-alignment: center;
}Edited by: biochemistry43 on 13/12/2012 09:06 AM