text: /* ************************************************************************
  
     qooxdoo - the new era of web development
  
     http://qooxdoo.org
  
     Copyright:
       2004-2011 1&1 Internet AG, Germany, http://www.1und1.de
  
     License:
       MIT: https://opensource.org/licenses/MIT
       See the LICENSE file in the project's top-level directory for details.
  
     Authors:
     * Martin Wittemann (martinwittemann)
  
  ************************************************************************* */
  
  /* ************************************************************************
  
  
  ************************************************************************* */
  
  /**
   * The simple qooxdoo appearance theme.
   *
   * @asset(qx/icon/Tango/16/apps/office-calendar.png)
   * @asset(qx/icon/Tango/16/places/folder-open.png)
   * @asset(qx/icon/Tango/16/places/folder.png)
   * @asset(qx/icon/Tango/16/mimetypes/text-plain.png)
   * @asset(qx/icon/Tango/16/actions/view-refresh.png)
   * @asset(qx/icon/Tango/16/actions/window-close.png)
   * @asset(qx/icon/Tango/16/actions/dialog-cancel.png)
   * @asset(qx/icon/Tango/16/actions/dialog-ok.png)
   */
  qx.Theme.define("qx.theme.simple.Appearance",
  {
    appearances :
    {
      /*
      ---------------------------------------------------------------------------
        CORE
      ---------------------------------------------------------------------------
      */
  
      "widget" : {},
  
      "label" :
      {
        style : function(states)
        {
          return {
            textColor : states.disabled ? "text-disabled" : undefined
          };
        }
      },
  
      "image" :
      {
        style : function(states)
        {
          return {
            opacity : !states.replacement && states.disabled ? 0.3 : undefined
          };
        }
      },
  
      "atom" : {},
      "atom/label" : "label",
      "atom/icon" : "image",
  
      "root" :
      {
        style : function(states)
        {
          return {
            backgroundColor : "background",
            textColor : "text",
            font : "default"
          };
        }
      },
  
      "popup" :
      {
        style : function(states)
        {
          return {
            decorator : "popup",
            backgroundColor : "background-pane"
          };
        }
      },
  
      "tooltip" :
      {
        include : "popup",
  
        style : function(states)
        {
          return {
            backgroundColor : "tooltip",
            textColor : "tooltip-text",
            decorator : "tooltip",
            padding : [ 1, 3, 2, 3 ],
            offset : [ 10, 5, 5, 5 ]
          };
        }
      },
  
      "tooltip/atom" : "atom",
  
      "tooltip-error" :
      {
        include : "tooltip",
  
        style : function(states)
        {
          return {
            textColor: "text-selected",
            showTimeout: 100,
            hideTimeout: 10000,
            decorator: "tooltip-error",
            font: "bold",
            backgroundColor: undefined
          };
        }
      },
  
      "tooltip-error/atom" : "atom",
  
      "iframe" :
      {
        style : function(states)
        {
          return {
            backgroundColor : "white",
            decorator : "main-dark"
          };
        }
      },
  
      "move-frame" :
      {
        style : function(states)
        {
          return {
            decorator : "main-dark"
          };
        }
      },
  
      "resize-frame" : "move-frame",
  
      "dragdrop-cursor" :
      {
        style : function(states)
        {
          var icon = "nodrop";
  
          if (states.copy) {
            icon = "copy";
          } else if (states.move) {
            icon = "move";
          } else if (states.alias) {
            icon = "alias";
          }
  
          return {
            source : qx.theme.simple.Image.URLS["cursor-" + icon],
            position : "right-top",
            offset : [ 2, 16, 2, 6 ]
          };
        }
      },
  
  
      /*
      ---------------------------------------------------------------------------
        SLIDEBAR
      ---------------------------------------------------------------------------
      */
  
      "slidebar" : {},
      "slidebar/scrollpane" : {},
      "slidebar/content" : {},
  
      "slidebar/button-forward" :
      {
        alias : "button",
        include : "button",
  
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS["arrow-" + (states.vertical ? "down" : "right")]
          };
        }
      },
  
      "slidebar/button-backward" :
      {
        alias : "button",
        include : "button",
  
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS["arrow-" + (states.vertical ? "up" : "left")]
          };
        }
      },
  
  
      /*
      ---------------------------------------------------------------------------
        TABLE
      ---------------------------------------------------------------------------
      */
  
      "table" : "widget",
  
      "table/statusbar" :
      {
        style : function(states)
        {
          return {
            decorator : "statusbar",
            padding : [2, 5]
          };
        }
      },
  
      "table/column-button" :
      {
        alias : "button",
  
        style : function(states)
        {
          return {
            decorator : "table-header-column-button",
            padding : 3,
            icon : qx.theme.simple.Image.URLS["select-column-order"]
          };
        }
      },
  
      "table-column-reset-button" :
      {
        include : "menu-button",
        alias : "menu-button",
  
        style : function()
        {
          return {
            icon : "icon/16/actions/view-refresh.png"
          };
        }
      },
  
      "table-scroller/scrollbar-x": "scrollbar",
      "table-scroller/scrollbar-y": "scrollbar",
  
      "table-scroller" : "widget",
  
      "table-scroller/header": {
        style : function() {
          return {
            decorator : "table-header"
          };
        }
      },
  
      "table-scroller/pane" : {},
  
      "table-scroller/focus-indicator" :
      {
        style : function(states)
        {
          return {
            decorator : "main"
          };
        }
      },
  
      "table-scroller/resize-line" :
      {
        style : function(states)
        {
          return {
            backgroundColor: "button-border",
            width: 3
          };
        }
      },
  
      "table-header-cell" :
      {
        alias : "atom",
  
        style : function(states)
        {
          return {
            decorator : states.first ? "table-header-cell-first" : "table-header-cell",
            minWidth: 13,
            font : "bold",
            paddingTop: 3,
            paddingLeft: 5,
            cursor : states.disabled ? undefined : "pointer",
            sortIcon : states.sorted ?
                (qx.theme.simple.Image.URLS["table-" +
                   (states.sortedAscending ? "ascending" : "descending")
                ]) : undefined
          };
        }
      },
  
      "table-header-cell/icon" :
      {
        include : "atom/icon",
  
        style : function(states) {
          return {
            paddingRight : 5
          };
        }
      },
  
      "table-header-cell/sort-icon" :
      {
        style : function(states)
        {
          return {
            alignY : "middle",
            alignX : "right",
            paddingRight : 5
          };
        }
      },
  
      "table-editor-textfield" :
      {
        include : "textfield",
  
        style : function(states)
        {
          return {
            decorator : undefined,
            padding : [ 2, 2 ]
          };
        }
      },
  
      "table-editor-selectbox" :
      {
        include : "selectbox",
        alias : "selectbox",
  
        style : function(states)
        {
          return {
            padding : [ 0, 2 ]
          };
        }
      },
  
      "table-editor-combobox" :
      {
        include : "combobox",
        alias : "combobox",
  
        style : function(states)
        {
          return {
            decorator : undefined
          };
        }
      },
  
      "progressive-table-header" : {
        style : function(states) {
          return {
            decorator: "progressive-table-header"
          };
        }
      },
  
      "progressive-table-header-cell" : {
        style : function(states) {
          return {
            decorator: "progressive-table-header-cell",
            padding : [5, 6, 5, 6]
          };
        }
      },
  
  
      /*
      ---------------------------------------------------------------------------
        TREEVIRTUAL
      ---------------------------------------------------------------------------
      */
  
      "treevirtual" : {
        include : "textfield",
        alias : "table",
        style : function(states, superStyles) {
          return {
            padding : [superStyles.padding[0] + 2, superStyles.padding[1] + 1]
          };
        }
      },
  
      "treevirtual-folder" :
      {
        style : function(states)
        {
          return {
            icon : (states.opened ?
                    "icon/16/places/folder-open.png" : "icon/16/places/folder.png"),
            opacity : states.drag ? 0.5 : undefined
          };
        }
      },
  
      "treevirtual-file" :
      {
        include : "treevirtual-folder",
        alias : "treevirtual-folder",
  
        style : function(states)
        {
          return {
            icon : "icon/16/mimetypes/text-plain.png",
            opacity : states.drag ? 0.5 : undefined
          };
        }
      },
  
      "treevirtual-line" :
      {
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS["treevirtual-line"]
          };
        }
      },
  
      "treevirtual-contract" :
      {
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS["tree-minus"]
          };
        }
      },
  
      "treevirtual-expand" :
      {
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS["tree-plus"]
          };
        }
      },
  
      "treevirtual-only-contract" :
      {
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS["treevirtual-minus-only"]
          };
        }
      },
  
      "treevirtual-only-expand" :
      {
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS["treevirtual-plus-only"]
          };
        }
      },
  
      "treevirtual-start-contract" :
      {
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS["treevirtual-minus-start"]
          };
        }
      },
  
      "treevirtual-start-expand" :
      {
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS["treevirtual-plus-start"]
          };
        }
      },
  
      "treevirtual-end-contract" :
      {
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS["treevirtual-minus-end"]
          };
        }
      },
  
      "treevirtual-end-expand" :
      {
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS["treevirtual-plus-end"]
          };
        }
      },
  
      "treevirtual-cross-contract" :
      {
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS["treevirtual-minus-cross"]
          };
        }
      },
  
      "treevirtual-cross-expand" :
      {
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS["treevirtual-plus-cross"]
          };
        }
      },
  
  
      "treevirtual-end" :
      {
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS["treevirtual-end"]
          };
        }
      },
  
      "treevirtual-cross" :
      {
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS["treevirtual-cross"]
          };
        }
      },
  
  
      /*
      ---------------------------------------------------------------------------
        RESIZER
      ---------------------------------------------------------------------------
      */
  
      "resizer" :
      {
        style : function(states)
        {
          return {
            decorator : "main-dark"
          };
        }
      },
  
  
      /*
      ---------------------------------------------------------------------------
        SPLITPANE
      ---------------------------------------------------------------------------
      */
  
      "splitpane" : {},
  
      "splitpane/splitter" :
      {
        style : function(states)
        {
          return {
            backgroundColor : "light-background"
          };
        }
      },
  
      "splitpane/splitter/knob" :
      {
        style : function(states)
        {
          return {
            source : qx.theme.simple.Image.URLS[
              "knob-" + (states.horizontal ? "horizontal" : "vertical")
            ],
            padding : 2
          };
        }
      },
  
      "splitpane/slider" :
      {
        style : function(states)
        {
          return {
            backgroundColor : "border-light-shadow",
            opacity : 0.3
          };
        }
      },
  
  
  
      /*
      ---------------------------------------------------------------------------
        MENU
      ---------------------------------------------------------------------------
      */
  
      "menu" :
      {
        style : function(states)
        {
          var result =
          {
            backgroundColor : "background",
            decorator : "main",
            spacingX : 6,
            spacingY : 1,
            iconColumnWidth : 16,
            arrowColumnWidth : 4,
            padding : 1,
            placementModeY : states.submenu || states.contextmenu ? "best-fit" : "keep-align"
          };
  
          if (states.submenu)
          {
            result.position = "right-top";
            result.offset = [-2, -3];
          }
  
          if (states.contextmenu) {
            result.offset = 4;
          }
  
          return result;
        }
      },
  
      "menu/slidebar" : "menu-slidebar",
  
      "menu-slidebar" : "widget",
  
      "menu-slidebar-button" :
      {
        style : function(states)
        {
          return {
            backgroundColor : states.hovered  ? "background-selected" : undefined,
            padding : 6,
            center : true
          };
        }
      },
  
      "menu-slidebar/button-backward" :
      {
        include : "menu-slidebar-button",
  
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS[
              "arrow-up" + (states.hovered ? "-invert" : "")
            ]
          };
        }
      },
  
      "menu-slidebar/button-forward" :
      {
        include : "menu-slidebar-button",
  
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS[
              "arrow-down" + (states.hovered ? "-invert" : "")
            ]
          };
        }
      },
  
      "menu-separator" :
      {
        style : function(states)
        {
          return {
            height : 0,
            decorator : "menu-separator",
            marginTop : 4,
            marginBottom: 4,
            marginLeft : 2,
            marginRight : 2
          };
        }
      },
  
      "menu-button" :
      {
        alias : "atom",
  
        style : function(states)
        {
          return {
            backgroundColor : states.selected ? "background-selected" : undefined,
            textColor : states.selected ? "text-selected" : undefined,
            padding : [ 2, 6 ]
          };
        }
      },
  
      "menu-button/icon" :
      {
        include : "image",
  
        style : function(states)
        {
          return {
            alignY : "middle"
          };
        }
      },
  
      "menu-button/label" :
      {
        include : "label",
  
        style : function(states)
        {
          return {
            alignY : "middle",
            padding : 1
          };
        }
      },
  
      "menu-button/shortcut" :
      {
        include : "label",
  
        style : function(states)
        {
          return {
            alignY : "middle",
            marginLeft : 14,
            padding : 1
          };
        }
      },
  
      "menu-button/arrow" :
      {
        include : "image",
  
        style : function(states)
        {
          return {
            source : qx.theme.simple.Image.URLS[
              "arrow-right" + (states.selected ? "-invert" : "")
            ],
            alignY : "middle"
          };
        }
      },
  
      "menu-checkbox" :
      {
        alias : "menu-button",
        include : "menu-button",
  
        style : function(states)
        {
          return {
            icon : !states.checked ? undefined :
              qx.theme.simple.Image.URLS[
                "menu-checkbox" + (states.selected ?  "-invert" : "")
              ]
          };
        }
      },
  
      "menu-radiobutton" :
      {
        alias : "menu-button",
        include : "menu-button",
  
        style : function(states)
        {
          return {
            icon : !states.checked ? undefined :
              qx.theme.simple.Image.URLS[
                "menu-radiobutton" + (states.selected ?  "-invert" : "")
              ]
          };
        }
      },
  
  
      /*
      ---------------------------------------------------------------------------
        MENU BAR
      ---------------------------------------------------------------------------
      */
  
      "menubar" :
      {
        style : function(states)
        {
          return {
            backgroundColor : "light-background",
            padding: [4, 2]
          };
        }
      },
  
      "menubar-button" :
      {
        style : function(states)
        {
          var decorator;
          var padding = [2, 6];
          if (!states.disabled) {
            if (states.pressed) {
              decorator = "menubar-button-pressed";
              padding = [1, 5, 2, 5];
            } else if (states.hovered) {
              decorator = "menubar-button-hovered";
              padding = [1, 5];
            }
          }
  
          return {
            padding : padding,
            cursor : states.disabled ? undefined : "pointer",
            textColor : "link",
            decorator : decorator
          };
        }
      },
  
  
      /*
      ---------------------------------------------------------------------------
        VIRTUAL WIDGETS
      ---------------------------------------------------------------------------
      */
      "virtual-list" : "list",
      "virtual-list/row-layer" : "row-layer",
  
      "row-layer" : "widget",
      "column-layer" : "widget",
  
      "group-item" :
      {
        include : "label",
        alias : "label",
  
        style : function(states)
        {
          return {
            padding : 4,
            backgroundColor : "#BABABA",
            textColor : "white",
            font: "bold"
          };
        }
      },
  
      "virtual-selectbox" : "selectbox",
      "virtual-selectbox/dropdown" : "popup",
      "virtual-selectbox/dropdown/list" : {
        alias : "virtual-list"
      },
  
      "virtual-combobox" : "combobox",
      "virtual-combobox/dropdown" : "popup",
      "virtual-combobox/dropdown/list" : {
        alias : "virtual-list"
      },
  
      "virtual-tree" :
      {
        include : "tree",
        alias : "tree",
  
        style : function(states)
        {
          return {
            itemHeight : 21
          };
        }
      },
  
      "virtual-tree-folder" : "tree-folder",
      "virtual-tree-file" : "tree-file",
  
      "cell" :
      {
        style : function(states)
        {
          return {
            backgroundColor: states.selected ?
              "table-row-background-selected" :
              "table-row-background-even",
            textColor: states.selected ? "text-selected" : "text",
            padding: [3, 6]
          };
        }
      },
  
      "cell-string" : "cell",
      "cell-number" :
      {
        include : "cell",
        style : function(states)
        {
          return {
            textAlign : "right"
          };
        }
      },
      "cell-image" : "cell",
      "cell-boolean" : "cell",
      "cell-atom" : "cell",
      "cell-date" : "cell",
      "cell-html" : "cell",
  
  
      /*
      ---------------------------------------------------------------------------
        SCROLLBAR
      ---------------------------------------------------------------------------
      */
  
      "scrollbar" : {},
      "scrollbar/slider" : {},
  
      "scrollbar/slider/knob" :
      {
        style : function(states)
        {
          var decorator = "scroll-knob";
  
          if (!states.disabled) {
            if (states.hovered && !states.pressed && !states.checked) {
              decorator = "scroll-knob-hovered";
            } else if (states.hovered && (states.pressed || states.checked)) {
              decorator = "scroll-knob-pressed-hovered";
            } else if (states.pressed || states.checked) {
              decorator = "scroll-knob-pressed";
            }
          }
  
          return {
            height : 14,
            width : 14,
            cursor : states.disabled ? undefined : "pointer",
            decorator : decorator,
            minHeight : states.horizontal ? undefined : 20,
            minWidth : states.horizontal ? 20 : undefined
          };
        }
      },
  
  
      "scrollbar/button" :
      {
        style : function(states)
        {
          var styles = {};
          styles.padding = 4;
  
          var icon = "";
          if (states.left) {
            icon = "left";
            styles.marginRight = 2;
          } else if (states.right) {
            icon += "right";
            styles.marginLeft = 2;
          } else if (states.up) {
            icon += "up";
            styles.marginBottom = 2;
          } else {
            icon += "down";
            styles.marginTop = 2;
          }
  
          styles.icon = qx.theme.simple.Image.URLS["arrow-" + icon];
  
          styles.cursor = "pointer";
          styles.decorator = "button-box";
          return styles;
        }
      },
  
      "scrollbar/button-begin" : "scrollbar/button",
      "scrollbar/button-end" : "scrollbar/button",
  
  
      /*
      ---------------------------------------------------------------------------
        SCROLLAREA
      ---------------------------------------------------------------------------
      */
  
      "scrollarea/corner" :
      {
        style : function(states)
        {
          return {
            backgroundColor : "background"
          };
        }
      },
  
      "scrollarea" : "widget",
      "scrollarea/pane" : "widget",
      "scrollarea/scrollbar-x" : "scrollbar",
      "scrollarea/scrollbar-y" : "scrollbar",
  
  
      /*
      ---------------------------------------------------------------------------
        TEXT FIELD
      ---------------------------------------------------------------------------
      */
  
      "textfield" :
      {
        style : function(states)
        {
          var textColor;
          if (states.disabled) {
            textColor = "text-disabled";
          } else if (states.showingPlaceholder) {
            textColor = "text-placeholder";
          } else {
            textColor = undefined;
          }
  
          var decorator;
          var padding;
          if (states.disabled) {
            decorator = "inset";
            padding = [2, 3];
          } else if (states.invalid) {
            decorator = "border-invalid";
            padding = [1, 2];
          } else if (states.focused) {
            decorator = "focused-inset";
            padding = [1, 2];
          } else {
            padding = [2, 3];
            decorator = "inset";
          }
  
          return {
            decorator : decorator,
            padding   : padding,
            textColor : textColor,
            backgroundColor : states.disabled ? "background-disabled" : "white"
          };
        }
      },
  
      "textarea" : "textfield",
  
  
  
      /*
      ---------------------------------------------------------------------------
        RADIO BUTTON
      ---------------------------------------------------------------------------
      */
      "radiobutton/icon" : {
        style : function(states)
        {
          var decorator = "radiobutton";
  
          if (states.focused && !states.invalid) {
            decorator = "radiobutton-focused";
          }
  
          decorator += states.invalid && !states.disabled ? "-invalid" : "";
  
          var backgroundColor;
          if (states.disabled && states.checked) {
            backgroundColor = "background-disabled-checked";
          } else if (states.disabled) {
            backgroundColor = "background-disabled";
          } else if (states.checked) {
            backgroundColor = "background-selected";
          }
  
          return {
            decorator : decorator,
            width: 12,
            height: 12,
            backgroundColor : backgroundColor
          };
        }
      },
  
      "radiobutton":
      {
        style : function(states)
        {
          // set an empty icon to be sure that the icon image is rendered
          return {
            icon : qx.theme.simple.Image.URLS["blank"]
          };
        }
      },
  
      /*
      ---------------------------------------------------------------------------
        FORM
      ---------------------------------------------------------------------------
      */
      "form-renderer-label" : {
        include : "label",
        style : function() {
          return {
            paddingTop: 3
          };
        }
      },
  
      /*
      ---------------------------------------------------------------------------
        CHECK BOX
      ---------------------------------------------------------------------------
      */
      "checkbox":
      {
        alias : "atom",
  
        style : function(states)
        {
          // The "disabled" icon is set to an icon **without** the -disabled
          // suffix on purpose. This is because the Image widget handles this
          // already by replacing the current image with a disabled version
          // (if available). If no disabled image is found, the opacity style
          // is used.
          var icon;
  
          // Checked
          if (states.checked) {
            icon = qx.theme.simple.Image.URLS["checkbox-checked"];
          // Undetermined
          } else if (states.undetermined) {
            icon = qx.theme.simple.Image.URLS["checkbox-undetermined"];
          // Unchecked
          } else {
            // empty icon
            icon = qx.theme.simple.Image.URLS["blank"];
          }
  
          return {
            icon: icon,
            gap: 6
          };
        }
      },
  
  
      "checkbox/icon" : {
        style : function(states)
        {
          var decorator = "checkbox";
  
          if (states.focused && !states.invalid) {
            decorator = "checkbox-focused";
          }
  
          decorator += states.invalid && !states.disabled ? "-invalid" : "";
  
          var padding;
          // Checked
          if (states.checked) {
            padding = 2;
          // Undetermined
          } else if (states.undetermined) {
            padding = [4, 2];
          }
  
          return {
            decorator : decorator,
            width: 12,
            height: 12,
            padding: padding,
            backgroundColor : "white"
          };
        }
      },
  
  
      /*
      ---------------------------------------------------------------------------
        SPINNER
      ---------------------------------------------------------------------------
      */
  
      "spinner" :
      {
        style : function(states)
        {
          return {
            textColor : states.disabled ? "text-disabled" : undefined
          };
        }
      },
  
      "spinner/textfield" : "textfield",
  
      "spinner/upbutton" :
      {
        alias : "combobox/button",
        include : "combobox/button",
  
        style : function(states)
        {
          var decorator = "button-box-top-right";
  
          if (states.hovered && !states.pressed && !states.checked) {
            decorator = "button-box-hovered-top-right";
          } else if (states.hovered && (states.pressed || states.checked)) {
            decorator = "button-box-pressed-hovered-top-right";
          } else if (states.pressed || states.checked) {
            decorator = "button-box-pressed-top-right";
          }
  
          return {
            icon : qx.theme.simple.Image.URLS["arrow-up-small"],
            decorator : decorator,
            width: 17
          };
        }
      },
  
      "spinner/downbutton" :
      {
        alias : "combobox/button",
        include : "combobox/button",
  
        style : function(states)
        {
          var decorator = "button-box-bottom-right";
  
          if (states.hovered && !states.pressed && !states.checked) {
            decorator = "button-box-hovered-bottom-right";
          } else if (states.hovered && (states.pressed || states.checked)) {
            decorator = "button-box-pressed-hovered-bottom-right";
          } else if (states.pressed || states.checked) {
            decorator = "button-box-pressed-bottom-right";
          }
  
          return {
            icon : qx.theme.simple.Image.URLS["arrow-down-small"],
            decorator : decorator,
            width: 17
          };
        }
      },
  
  
      /*
      ---------------------------------------------------------------------------
        SELECTBOX
      ---------------------------------------------------------------------------
      */
  
      "selectbox" : "button-frame",
  
      "selectbox/atom" : "atom",
      "selectbox/popup" : "popup",
      "selectbox/list" : {
        alias : "list",
        include : "list",
  
        style : function()
        {
          return {
            decorator : undefined
          };
        }
      },
  
      "selectbox/arrow" :
      {
        include : "image",
  
        style : function(states)
        {
          return {
            source : qx.theme.simple.Image.URLS["arrow-down"],
            paddingRight : 4,
            paddingLeft : 5
          };
        }
      },
  
  
      /*
      ---------------------------------------------------------------------------
        COMBO BOX
      ---------------------------------------------------------------------------
      */
  
      "combobox" :{},
  
      "combobox/button" :
      {
        alias : "button-frame",
        include : "button-frame",
  
        style : function(states)
        {
          var decorator = "button-box-right-borderless";
  
          if (states.hovered && !states.pressed && !states.checked) {
            decorator = "button-box-hovered-right-borderless";
          } else if (states.hovered && (states.pressed || states.checked)) {
            decorator = "button-box-pressed-hovered-right-borderless";
          } else if (states.pressed || states.checked) {
            decorator = "button-box-pressed-right-borderless";
          }
  
          return {
            icon : qx.theme.simple.Image.URLS["arrow-down"],
            decorator : decorator,
            padding : [0, 5],
            width: 19
          };
        }
      },
  
      "combobox/popup" : "popup",
      "combobox/list" :
      {
        alias : "list"
      },
  
      "combobox/textfield" : "textfield",
  
  
      /*
      ---------------------------------------------------------------------------
        DATEFIELD
      ---------------------------------------------------------------------------
      */
  
      "datefield" : "textfield",
  
      "datefield/button" :
      {
        alias : "combobox/button",
        include : "combobox/button",
  
        style : function(states)
        {
          return {
            icon : "icon/16/apps/office-calendar.png",
            padding : [0, 0, 0, 3],
            backgroundColor : undefined,
            decorator : undefined,
            width: 19
          };
        }
      },
  
      "datefield/textfield" : {
        alias : "textfield",
        include : "textfield",
  
        style : function(states)
        {
          return {
            decorator : undefined,
            padding: 0
          };
        }
      },
  
      "datefield/list" :
      {
        alias : "datechooser",
        include : "datechooser",
  
        style : function(states)
        {
          return {
            decorator : undefined
          };
        }
      },
  
  
  
      /*
      ---------------------------------------------------------------------------
        LIST
      ---------------------------------------------------------------------------
      */
  
      "list" :
      {
        alias : "scrollarea",
        include : "textfield"
      },
  
      "listitem" :
      {
        alias : "atom",
  
        style : function(states)
        {
          var padding = [3, 5, 3, 5];
          if (states.lead) {
            padding = [ 2, 4 , 2, 4];
          }
          if (states.dragover) {
            padding[2] -= 2;
          }
  
          var backgroundColor;
          if (states.selected) {
            backgroundColor = "background-selected";
            if (states.disabled) {
              backgroundColor += "-disabled";
            }
          }
          return {
            gap : 4,
            padding : padding,
            backgroundColor : backgroundColor,
            textColor : states.selected ? "text-selected" : undefined,
            decorator : states.lead ? "lead-item" : states.dragover ? "dragover" : undefined,
            opacity : states.drag ? 0.5 : undefined
          };
        }
      },
  
  
      /*
      ---------------------------------------------------------------------------
        SLIDER
      ---------------------------------------------------------------------------
      */
  
      "slider" :
      {
        style : function(states)
        {
          var decorator;
          var padding;
          if (states.disabled) {
            decorator = "inset";
            padding = [2, 3];
          } else if (states.invalid) {
            decorator = "border-invalid";
            padding = [1, 2];
          } else if (states.focused) {
            decorator = "focused-inset";
            padding = [1, 2];
          } else {
            padding = [2, 3];
            decorator = "inset";
          }
  
          return {
            decorator : decorator,
            padding   : padding
          };
        }
      },
  
      "slider/knob" : "scrollbar/slider/knob",
  
  
      /*
      ---------------------------------------------------------------------------
        BUTTON
      ---------------------------------------------------------------------------
      */
      "button-frame" :
      {
        alias : "atom",
  
        style : function(states)
        {
          var decorator = "button-box";
  
          if (!states.disabled) {
            if (states.hovered && !states.pressed && !states.checked) {
              decorator = "button-box-hovered";
            } else if (states.hovered && (states.pressed || states.checked)) {
              decorator = "button-box-pressed-hovered";
            } else if (states.pressed || states.checked) {
              decorator = "button-box-pressed";
            }
          }
  
          if (states.invalid && !states.disabled) {
            decorator += "-invalid";
          } else if (states.focused) {
            decorator += "-focused";
          }
  
          return {
            decorator : decorator,
            padding : [3, 8],
            cursor: states.disabled ? undefined : "pointer",
            minWidth: 5,
            minHeight: 5
          };
        }
      },
  
      "button-frame/label" : {
        alias : "atom/label",
  
        style : function(states)
        {
          return {
            textColor : states.disabled ? "text-disabled" : undefined
          };
        }
      },
  
      "button" :
      {
        alias : "button-frame",
        include : "button-frame",
  
        style : function(states)
        {
          return {
            center : true
          };
        }
      },
  
      "hover-button" :
      {
        alias : "button",
        include : "button",
  
        style : function(states)
        {
          return {
            decorator : states.hovered ? "button-hover" : undefined
          };
        }
      },
  
      "menubutton" : {
        include : "button",
        alias : "button",
  
        style : function(states) {
          return {
            icon : qx.theme.simple.Image.URLS["arrow-down"],
            iconPosition : "right"
          };
        }
      },
  
      /*
      ---------------------------------------------------------------------------
        SPLIT BUTTON
      ---------------------------------------------------------------------------
      */
      "splitbutton" : {},
  
      "splitbutton/button" :
      {
        alias : "atom",
  
        style : function(states)
        {
          var decorator = "button-box";
  
          if (!states.disabled) {
            if (states.pressed || states.checked) {
              decorator += "-pressed";
            }
            if (states.hovered) {
              decorator += "-hovered";
            }
          }
  
          if (states.focused) {
            decorator += "-focused";
          }
  
          decorator += "-left";
  
          return {
            decorator : decorator,
            padding : [3, 8],
            cursor : states.disabled ? undefined : "pointer"
          };
        }
      },
  
      "splitbutton/arrow" : {
  
        style : function(states)
        {
          var decorator = "button-box";
  
          if (!states.disabled) {
            if (states.pressed || states.checked) {
              decorator += "-pressed";
            }
            if (states.hovered) {
              decorator += "-hovered";
            }
          }
  
          if (states.focused) {
            decorator += "-focused";
          }
  
          decorator += "-right";
  
          return {
            icon : qx.theme.simple.Image.URLS["arrow-down"],
            decorator : decorator,
            cursor : states.disabled ? undefined : "pointer",
            padding: [3, 4]
          };
        }
      },
  
  
  
      /*
      ---------------------------------------------------------------------------
        GROUP BOX
      ---------------------------------------------------------------------------
      */
  
      "groupbox" : {},
  
      "groupbox/legend" :
      {
        alias : "atom",
  
        style : function(states)
        {
          return {
            textColor : states.invalid ? "invalid" : undefined,
            padding : 5,
            margin : 4,
            font: "bold"
          };
        }
      },
  
      "groupbox/frame" :
      {
        style : function(states)
        {
          return {
            backgroundColor : "background",
            padding : [6, 9],
            margin: [18, 2, 2, 2],
            decorator  : "white-box"
          };
        }
      },
  
      "check-groupbox" : "groupbox",
  
      "check-groupbox/legend" :
      {
        alias : "checkbox",
        include : "checkbox",
  
        style : function(states)
        {
          return {
            textColor : states.invalid ? "invalid" : undefined,
            padding : 5,
            margin : 4,
            font: "bold"
          };
        }
      },
  
      "radio-groupbox" : "groupbox",
  
      "radio-groupbox/legend" :
      {
        alias : "radiobutton",
        include : "radiobutton",
  
        style : function(states)
        {
          return {
            textColor : states.invalid ? "invalid" : undefined,
            padding : 5,
            margin : 4,
            font: "bold"
          };
        }
      },
  
  
  
      /*
      ---------------------------------------------------------------------------
        TREE
      ---------------------------------------------------------------------------
      */
  
      "tree-folder/open" :
      {
        include : "image",
        style : function(states)
        {
          return {
            source : states.opened ?
              qx.theme.simple.Image.URLS["tree-minus"] :
              qx.theme.simple.Image.URLS["tree-plus"]
          };
        }
      },
  
  
      "tree-folder" :
      {
        style : function(states)
        {
          var backgroundColor;
          if (states.selected) {
            backgroundColor = "background-selected";
            if (states.disabled) {
              backgroundColor += "-disabled";
            }
          }
          return {
            padding : [2, 8, 2, 5],
            icon : states.opened ? "icon/16/places/folder-open.png" : "icon/16/places/folder.png",
            backgroundColor : backgroundColor,
            iconOpened : "icon/16/places/folder-open.png",
            opacity : states.drag ? 0.5 : undefined
          };
        }
      },
  
      "tree-folder/icon" :
      {
        include : "image",
        style : function(states)
        {
          return {
            padding : [0, 4, 0, 0]
          };
        }
      },
  
      "tree-folder/label" :
      {
        style : function(states)
        {
          return {
            padding : [ 1, 2 ],
            textColor : states.selected && !states.disabled ? "text-selected" : undefined
          };
        }
      },
  
      "tree-file" :
      {
        include : "tree-folder",
        alias : "tree-folder",
  
        style : function(states)
        {
          return {
            icon : "icon/16/mimetypes/text-plain.png",
            opacity : states.drag ? 0.5 : undefined
          };
        }
      },
  
      "tree" :
      {
        include : "list",
        alias : "list",
  
        style : function(states)
        {
          return {
            contentPadding : states.invalid && !states.disabled? [3, 0] : [4, 1],
            padding : states.focused ? 0 : 1
          };
        }
      },
  
  
  
      /*
      ---------------------------------------------------------------------------
        WINDOW
      ---------------------------------------------------------------------------
      */
  
      "window" :
      {
        style : function(states)
        {
          return {
            contentPadding : [ 10, 10, 10, 10 ],
            backgroundColor : "background",
            decorator : states.maximized ? undefined : states.active ? "window-active" : "window"
          };
        }
      },
  
      "window-resize-frame" : "resize-frame",
  
      "window/pane" : {},
  
      "window/captionbar" :
      {
        style : function(states)
        {
          return {
            backgroundColor : states.active ? "light-background" : "background-disabled",
            padding : 8,
            font: "bold",
            decorator : "window-caption"
          };
        }
      },
  
      "window/icon" :
      {
        style : function(states)
        {
          return {
            marginRight : 4
          };
        }
      },
  
      "window/title" :
      {
        style : function(states)
        {
          return {
            cursor : "default",
            font : "bold",
            marginRight : 20,
            alignY: "middle"
          };
        }
      },
  
      "window/minimize-button" :
      {
        alias : "button",
  
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS["window-minimize"],
            padding : [ 1, 2 ],
            cursor : states.disabled ? undefined : "pointer"
          };
        }
      },
  
      "window/restore-button" :
      {
        alias : "button",
  
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS["window-restore"],
            padding : [ 1, 2 ],
            cursor : states.disabled ? undefined : "pointer"
          };
        }
      },
  
      "window/maximize-button" :
      {
        alias : "button",
  
        style : function(states)
        {
          return {
            icon : qx.theme.simple.Image.URLS["window-maximize"],
            padding : [ 1, 2 ],
            cursor : states.disabled ? undefined : "pointer"
          };
        }
      },
  
      "window/close-button" :
      {
        alias : "button",
  
        style : function(states)
        {
          return {
            marginLeft : 2,
            icon : qx.theme.simple.Image.URLS["window-close"],
            padding : [ 1, 2 ],
            cursor : states.disabled ? undefined : "pointer"
          };
        }
      },
  
      "window/statusbar" :
      {
        style : function(states)
        {
          return {
            decorator : "statusbar",
            padding : [ 2, 6 ]
          };
        }
      },
  
      "window/statusbar-text" : "label",
  
  
  
      /*
      ---------------------------------------------------------------------------
        DATE CHOOSER
      ---------------------------------------------------------------------------
      */
  
      "datechooser" :
      {
        style : function(states)
        {
          return {
            decorator : "main",
            minWidth: 220
          };
        }
      },
  
      "datechooser/navigation-bar" :
      {
        style : function(states)
        {
          return {
            backgroundColor : "background",
            textColor : states.disabled ? "text-disabled" : states.invalid ? "invalid" : undefined,
            padding : [2, 10]
          };
        }
      },
  
      "datechooser/last-year-button-tooltip" : "tooltip",
      "datechooser/last-month-button-tooltip" : "tooltip",
      "datechooser/next-year-button-tooltip" : "tooltip",
      "datechooser/next-month-button-tooltip" : "tooltip",
  
      "datechooser/last-year-button"  : "datechooser/button",
      "datechooser/last-month-button" : "datechooser/button",
      "datechooser/next-year-button"  : "datechooser/button",
      "datechooser/next-month-button" : "datechooser/button",
      "datechooser/button/icon" : {},
  
      "datechooser/button" :
      {
        style : function(states)
        {
          var result = {
            width  : 17,
            show   : "icon",
            cursor : states.disabled ? undefined : "pointer"
          };
  
          if (states.lastYear) {
            result.icon = qx.theme.simple.Image.URLS["arrow-rewind"];
          } else if (states.lastMonth) {
            result.icon = qx.theme.simple.Image.URLS["arrow-left"];
          } else if (states.nextYear) {
            result.icon = qx.theme.simple.Image.URLS["arrow-forward"];
          } else if (states.nextMonth) {
            result.icon = qx.theme.simple.Image.URLS["arrow-right"];
          }
  
          return result;
        }
      },
  
      "datechooser/month-year-label" :
      {
        style : function(states)
        {
          return {
            font          : "bold",
            textAlign     : "center"
          };
        }
      },
  
      "datechooser/date-pane" :
      {
        style : function(states)
        {
          return {
            decorator       : "datechooser-date-pane",
            backgroundColor : "background"
          };
        }
      },
  
      "datechooser/weekday" :
      {
        style : function(states)
        {
          return {
            decorator       : "datechooser-weekday",
            font            : "bold",
            textAlign       : "center",
            textColor       : states.disabled ? "text-disabled" : states.weekend ? "background-selected-dark" : "background",
            backgroundColor : states.weekend ? "background" : "background-selected-dark",
            paddingTop: 2
          };
        }
      },
  
      "datechooser/day" :
      {
        style : function(states)
        {
          return {
            textAlign       : "center",
            decorator       : states.today ? "main" : undefined,
            textColor       : states.disabled ? "text-disabled" : states.selected ? "text-selected" : states.otherMonth ? "text-disabled" : undefined,
            backgroundColor : states.disabled ? undefined : states.selected ? "background-selected" : undefined,
            padding         : states.today ? [ 1, 3 ] : [2, 4]
          };
        }
      },
  
      "datechooser/week" :
      {
        style : function(states)
        {
          return {
            textAlign : "center",
            textColor : "background-selected-dark",
            padding   : [ 2, 4 ],
            decorator : states.header ? "datechooser-week-header" : "datechooser-week"
          };
        }
      },
  
  
  
  
  
      /*
      ---------------------------------------------------------------------------
        PROGRESSBAR
      ---------------------------------------------------------------------------
      */
      "progressbar":
      {
        style: function(states) {
          return {
            decorator: "progressbar",
            padding: 1,
            backgroundColor: "white",
            width : 200,
            height : 20
          };
        }
      },
  
      "progressbar/progress":
      {
        style: function(states) {
          return {
            backgroundColor: states.disabled ?
              "background-disabled-checked" :
              "background-selected"
          };
        }
      },
  
  
  
      /*
      ---------------------------------------------------------------------------
        TOOLBAR
      ---------------------------------------------------------------------------
      */
  
      "toolbar" :
      {
        style : function(states)
        {
          return {
            backgroundColor : "light-background",
            padding : 0
          };
        }
      },
  
      "toolbar/part" : {
        style : function(states)
        {
          return {
            margin : [0 , 15]
          };
        }
      },
  
      "toolbar/part/container" : {},
      "toolbar/part/handle" : {},
  
      "toolbar-separator" :
      {
        style : function(states)
        {
          return {
            decorator : "toolbar-separator",
            margin: [7, 0],
            width: 4
          };
        }
      },
  
      "toolbar-button" :
      {
        alias : "atom",
  
        style : function(states)
        {
          var decorator = "button-box";
  
          if (states.disabled) {
            decorator = "button-box";
          } else if (states.hovered && !states.pressed && !states.checked) {
            decorator = "button-box-hovered";
          } else if (states.hovered && (states.pressed || states.checked)) {
            decorator = "button-box-pressed-hovered";
          } else if (states.pressed || states.checked) {
            decorator = "button-box-pressed";
          }
  
          // set the right left and right decorator
          if (states.left) {
            decorator += "-left";
          } else if (states.right) {
            decorator += "-right";
          } else if (states.middle) {
            decorator += "-middle";
          }
  
          // set the margin
          var margin = [7, 10];
          if (states.left || states.middle || states.right) {
            margin = [7, 0];
          }
  
          return {
            cursor  : states.disabled ? undefined : "pointer",
            decorator : decorator,
            margin : margin,
            padding: [3, 5]
          };
        }
      },
  
      "toolbar-menubutton" :
      {
        alias : "toolbar-button",
        include : "toolbar-button",
  
        style : function(states)
        {
          return {
            showArrow : true
          };
        }
      },
  
      "toolbar-menubutton/arrow" :
      {
        alias : "image",
        include : "image",
  
        style : function(states)
        {
          return {
            source : qx.theme.simple.Image.URLS["arrow-down"],
            cursor : states.disabled ? undefined : "pointer",
            padding : [0, 5],
            marginLeft: 2
          };
        }
      },
  
      "toolbar-splitbutton" : {},
      "toolbar-splitbutton/button" :
      {
        alias : "toolbar-button",
        include : "toolbar-button",
  
        style : function(states)
        {
          var decorator = "button-box";
  
          if (states.disabled) {
            decorator = "button-box";
          } else if (states.hovered && !states.pressed && !states.checked) {
            decorator = "button-box-hovered";
          } else if (states.hovered && (states.pressed || states.checked)) {
            decorator = "button-box-pressed-hovered";
          } else if (states.pressed || states.checked) {
            decorator = "button-box-pressed";
          }
  
          // set the right left and right decorator
          if (states.left) {
            decorator += "-left";
          } else if (states.right) {
            decorator += "-middle";
          } else if (states.middle) {
            decorator += "-middle";
          }
  
          return {
            icon : qx.theme.simple.Image.URLS["arrow-down"],
            decorator : decorator
          };
        }
      },
  
  
      "toolbar-splitbutton/arrow" :
      {
        alias : "toolbar-button",
        include : "toolbar-button",
  
        style : function(states)
        {
          var decorator = "button-box";
  
          if (states.disabled) {
            decorator = "button-box";
          } else if (states.hovered && !states.pressed && !states.checked) {
            decorator = "button-box-hovered";
          } else if (states.hovered && (states.pressed || states.checked)) {
            decorator = "button-box-pressed-hovered";
          } else if (states.pressed || states.checked) {
            decorator = "button-box-pressed";
          }
  
          // set the right left and right decorator
          if (states.left) {
            decorator += "-middle";
          } else if (states.right) {
            decorator += "-right";
          } else if (states.middle) {
            decorator += "-middle";
          }
  
          return {
            icon : qx.theme.simple.Image.URLS["arrow-down"],
            decorator : decorator
          };
        }
      },
  
  
      /*
      ---------------------------------------------------------------------------
        TABVIEW
      ---------------------------------------------------------------------------
      */
  
      "tabview" : {},
  
      "tabview/bar" :
      {
        alias : "slidebar",
  
        style : function(states)
        {
          var marginTop=0, marginRight=0, marginBottom=0, marginLeft=0;
  
          if (states.barTop) {
            marginBottom -= 1;
          } else if (states.barBottom) {
            marginTop -= 1;
          } else if (states.barRight) {
            marginLeft -= 1;
          } else {
            marginRight -= 1;
          }
  
          return {
            marginBottom : marginBottom,
            marginTop : marginTop,
            marginLeft : marginLeft,
            marginRight : marginRight
          };
        }
      },
  
  
      "tabview/bar/button-forward" :
      {
        include : "slidebar/button-forward",
        alias : "slidebar/button-forward",
  
        style : function(states)
        {
          if (states.barTop) {
            return {
              marginTop : 4,
              marginBottom: 2,
              decorator : null
            };
          } else if (states.barBottom) {
            return {
              marginTop : 2,
              marginBottom: 4,
              decorator : null
            };
          } else if (states.barLeft) {
            return {
              marginLeft : 4,
              marginRight : 2,
              decorator : null
            };
          } else {
            return {
              marginLeft : 2,
              marginRight : 4,
              decorator : null
            };
          }
        }
      },
  
      "tabview/bar/button-backward" :
      {
        include : "slidebar/button-backward",
        alias : "slidebar/button-backward",
  
        style : function(states)
        {
          if (states.barTop) {
            return {
              marginTop : 4,
              marginBottom: 2,
              decorator : null
            };
          } else if (states.barBottom) {
            return {
              marginTop : 2,
              marginBottom: 4,
              decorator : null
            };
          } else if (states.barLeft) {
            return {
              marginLeft : 4,
              marginRight : 2,
              decorator : null
            };
          } else {
            return {
              marginLeft : 2,
              marginRight : 4,
              decorator : null
            };
          }
        }
      },
  
      "tabview/pane" :
      {
        style : function(states)
        {
          return {
            backgroundColor : "background",
            decorator : "main",
            padding : 10
          };
        }
      },
  
      "tabview-page" : "widget",
  
      "tabview-page/button" :
      {
        style : function(states)
        {
          var decorator;
  
          // default padding
          if (states.barTop || states.barBottom) {
            var padding = [8, 16, 8, 13];
          } else {
            var padding = [8, 4, 8, 4];
          }
  
          // decorator
          if (states.checked) {
            if (states.barTop) {
              decorator = "tabview-page-button-top";
            } else if (states.barBottom) {
              decorator = "tabview-page-button-bottom";
            } else if (states.barRight) {
              decorator = "tabview-page-button-right";
            } else if (states.barLeft) {
              decorator = "tabview-page-button-left";
            }
          } else {
            for (var i=0; i < padding.length; i++) {
              padding[i] += 1;
            }
            // reduce the size by 1 because we have different decorator border width
            if (states.barTop) {
              padding[2] -= 1;
            } else if (states.barBottom) {
              padding[0] -= 1;
            } else if (states.barRight) {
              padding[3] -= 1;
            } else if (states.barLeft) {
              padding[1] -= 1;
            }
          }
  
          return {
            zIndex : states.checked ? 10 : 5,
            decorator : decorator,
            textColor : states.disabled ? "text-disabled" : states.checked ? null : "link",
            padding : padding,
            cursor: "pointer"
          };
        }
      },
  
      "tabview-page/button/label" :
      {
        alias : "label",
  
        style : function(states)
        {
          return {
            padding : [0, 1, 0, 1]
          };
        }
      },
  
      "tabview-page/button/icon" : "image",
      "tabview-page/button/close-button" :
      {
        alias : "atom",
        style : function(states)
        {
          return {
            cursor : states.disabled ? undefined : "pointer",
            icon : qx.theme.simple.Image.URLS["tabview-close"]
          };
        }
      },
  
  
      /*
      ---------------------------------------------------------------------------
        COLOR POPUP
      ---------------------------------------------------------------------------
      */
  
  
      "colorpopup" :
      {
        alias : "popup",
        include : "popup",
  
        style : function(states)
        {
          return {
            padding : 5
          };
        }
      },
  
      "colorpopup/field":
      {
        style : function(states)
        {
          return {
            margin : 2,
            width : 14,
            height : 14,
            backgroundColor : "background",
            decorator : "main-dark"
          };
        }
      },
  
      "colorpopup/selector-button" : "button",
      "colorpopup/auto-button" : "button",
  
      "colorpopup/preview-pane" : "groupbox",
  
      "colorpopup/current-preview":
      {
        style : function(state)
        {
          return {
            height : 20,
            padding: 4,
            marginLeft : 4,
            decorator : "main-dark",
            allowGrowX : true
          };
        }
      },
  
      "colorpopup/selected-preview":
      {
        style : function(state)
        {
          return {
            height : 20,
            padding: 4,
            marginRight : 4,
            decorator : "main-dark",
            allowGrowX : true
          };
        }
      },
  
      "colorpopup/colorselector-okbutton":
      {
        alias : "button",
        include : "button",
  
        style : function(states)
        {
          return {
            icon : "icon/16/actions/dialog-ok.png"
          };
        }
      },
  
      "colorpopup/colorselector-cancelbutton":
      {
        alias : "button",
        include : "button",
  
        style : function(states)
        {
          return {
            icon : "icon/16/actions/dialog-cancel.png"
          };
        }
      },
  
  
      /*
      ---------------------------------------------------------------------------
        COLOR SELECTOR
      ---------------------------------------------------------------------------
      */
  
      "colorselector" : "widget",
      "colorselector/control-bar" : "widget",
      "colorselector/visual-pane" : "groupbox",
      "colorselector/control-pane": "widget",
      "colorselector/preset-grid" : "widget",
  
      "colorselector/colorbucket":
      {
        style : function(states)
        {
          return {
            decorator : "main-dark",
            width : 16,
            height : 16
          };
        }
      },
  
      "colorselector/preset-field-set" : "groupbox",
      "colorselector/input-field-set" : {
        include : "groupbox",
        alias : "groupbox",
        style : function() {
          return {
            paddingTop: 12
          };
        }
      },
  
      "colorselector/preview-field-set" : {
        include : "groupbox",
        alias : "groupbox",
        style : function() {
          return {
            paddingTop: 12
          };
        }
      },
  
      "colorselector/hex-field-composite" : "widget",
      "colorselector/hex-field" : "textfield",
  
      "colorselector/rgb-spinner-composite" : "widget",
      "colorselector/rgb-spinner-red" : "spinner",
      "colorselector/rgb-spinner-green" : "spinner",
      "colorselector/rgb-spinner-blue" : "spinner",
  
      "colorselector/hsb-spinner-composite" : "widget",
      "colorselector/hsb-spinner-hue" : "spinner",
      "colorselector/hsb-spinner-saturation" : "spinner",
      "colorselector/hsb-spinner-brightness" : "spinner",
  
      "colorselector/preview-content-old":
      {
        style : function(states)
        {
          return {
            decorator : "main-dark",
            width : 50,
            height : 25
          };
        }
      },
  
      "colorselector/preview-content-new":
      {
        style : function(states)
        {
          return {
            decorator : "main-dark",
            backgroundColor : "white",
            width : 50,
            height : 25
          };
        }
      },
  
      "colorselector/hue-saturation-field":
      {
        style : function(states)
        {
          return {
            decorator : "main-dark",
            margin : 5
          };
        }
      },
  
      "colorselector/brightness-field":
      {
        style : function(states)
        {
          return {
            decorator : "main-dark",
            margin : [5, 7]
          };
        }
      },
  
      "colorselector/hue-saturation-pane": "widget",
      "colorselector/hue-saturation-handle" : "widget",
      "colorselector/brightness-pane": "widget",
      "colorselector/brightness-handle" : "widget",
  
  
  
      /*
      ---------------------------------------------------------------------------
        APPLICATION
      ---------------------------------------------------------------------------
      */
  
      "app-header" :
      {
        style : function(states)
        {
          return {
            font : "headline",
            textColor : "text-selected",
            backgroundColor: "background-selected-dark",
            padding : [8, 12]
          };
        }
      },
  
      "app-header-label" :
      {
        style : function(states)
        {
          return {
            paddingTop : 5
          };
        }
      },
  
  
      "app-splitpane" : {
        alias : "splitpane",
        style : function(states) {
          return {
            padding: [0, 10, 10, 10],
            backgroundColor: "light-background"
          };
        }
      }
    }
  });
  