updating dialog

build/css/ox.ui.classic.css

@@ -34,17 +34,21 @@ Dialog
 */
 
 .OxThemeClassic .OxDialog {
-    background: rgba(224, 224, 224, 0.96);
     -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
     -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
 }
 
-.OxThemeClassic .OxDialog .OxTitle {
+.OxThemeClassic .OxDialog .OxBar {
-    color: rgb(48, 48, 48);
+    background: -moz-linear-gradient(top, rgba(192, 192, 192, 0.96), rgba(160, 160, 160, 0.96));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(192, 192, 192, 0.96)), to(rgba(160, 160, 160, 0.96)));
 }
 
-.OxThemeClassic .OxDialog > .OxButtonsBar {
+.OxThemeClassic .OxDialog .OxContent {
-    border-top: 1px solid rgb(192, 192, 192);
+    background: rgba(224, 224, 224, 0.96);
+}
+
+.OxThemeClassic .OxDialog .OxTitle {
+    color: rgb(48, 48, 48);
 }
 
 /*

build/css/ox.ui.css

@@ -90,7 +90,7 @@ Dialog
 .OxDialog > .OxContent {
     top: 24px;
     height: 100%;
-    padding: 16px 16px 0 16px;
+    padding: 16px;
     font-size: 12px;
     line-height: 16px;
 }
@@ -100,8 +100,6 @@ Dialog
     right: 0;
     bottom: 0;
     height: 24px;
-    padding: 5px 4px 0 4px;
-    border-top-width: 1px;
     text-align: right;
     -moz-border-radius-bottomleft: 8px;
     -moz-border-radius-bottomright: 8px;
@@ -110,7 +108,10 @@ Dialog
 }
 
 .OxDialog > .OxButtonsBar > .OxButton {
-    margin: 0 4px 0 4px;
+    margin: 4px 2px 0 2px;
+}
+.OxDialog > .OxButtonsBar > .OxButton:last-child {
+    margin-right: 4px;
 }
 
 /*

build/css/ox.ui.modern.css

@@ -29,11 +29,20 @@ Dialog
 */
 
 .OxThemeModern .OxDialog {
-    background: rgba(48, 48, 48, 0.96);
     -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
     -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
 }
 
+.OxThemeModern .OxDialog .OxBar {
+    background: -moz-linear-gradient(top, rgba(64, 64, 64, 0.96), rgba(32, 32, 32, 0.96));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(64, 64, 64, 0.96)), to(rgba(32, 32, 32, 0.96)));
+}
+
+.OxThemeModern .OxDialog .OxContent {
+    background: rgba(48, 48, 48, 0.96);
+}
+
+
 /*
 ================================================================================
 Forms

build/js/ox.ui.js

@@ -1168,7 +1168,7 @@ requires
             that = new Ox.Element({}, self)
                 .defaults({
                     orientation: "horizontal",
-                    size: 16
+                    size: "medium"                  // can be int
                 })
                 .options(options || {})
                 .addClass("OxBar Ox" + Ox.toTitleCase(self.options.orientation)),
@@ -1241,9 +1241,9 @@ requires
                 .addClass("OxDialog")
                 .css({
                     left: (($document.width() - self.options.width) / 2) + "px",
-                    top: (($document.height() - self.options.height - 68) / 2) + "px",
+                    top: (($document.height() - self.options.height - 80) / 2) + "px",
                     width: self.options.width + "px",
-                    height: (self.options.height + 68) + "px"
+                    height: (self.options.height + 80) + "px"
                 });
         that.$titlebar = new Ox.Bar({
                 size: "medium"
@@ -1287,7 +1287,7 @@ requires
                 height: self.options.height + "px"
             })
             .appendTo(that);
-        that.$buttonsbar = new Ox.Element()
+        that.$buttonsbar = new Ox.Bar({})
             .addClass("OxButtonsBar")
             .appendTo(that);
         that.$buttons = [];

demos/test/index.html

@@ -458,8 +458,8 @@
                             title: "Dialog",
                             buttons: [
                                 {
-                                    value: "Do Nothing",
+                                    value: "Switch Theme",
-                                    click: function() {}
+                                    click: switchTheme
                                 },
                                 {
                                     value: "Close",