reindeer theme update: black style for layout, textfield and buttons.

svn changeset:7935/svn branch:6.0

35 files changed, 416 insertions, 9 deletions

diff --git a/WebContent/VAADIN/themes/base/formlayout/formlayout.css b/WebContent/VAADIN/themes/base/formlayout/formlayout.css
index dd5e8d6662..47ae45df52 100644
--- a/WebContent/VAADIN/themes/base/formlayout/formlayout.css
+++ b/WebContent/VAADIN/themes/base/formlayout/formlayout.css
@@ -1,6 +1,10 @@
 .v-formlayout-cell .v-errorindicator {
 	display: block;
 }
+.v-formlayout-error-indicator {
+	/* fix width so layout is not jumpy when error disappears */
+	width: 12px;
+}
 .v-formlayout-captioncell {
 	text-align:right;
 	white-space: nowrap;
diff --git a/WebContent/VAADIN/themes/base/styles.css b/WebContent/VAADIN/themes/base/styles.css
index 6f8c895eb0..28e9f5a996 100644
--- a/WebContent/VAADIN/themes/base/styles.css
+++ b/WebContent/VAADIN/themes/base/styles.css
@@ -438,6 +438,10 @@
 .v-formlayout-cell .v-errorindicator {
 	display: block;
 }
+.v-formlayout-error-indicator {
+	/* fix width so layout is not jumpy when error disappears */
+	width: 12px;
+}
 .v-formlayout-captioncell {
 	text-align:right;
 	white-space: nowrap;
diff --git a/WebContent/VAADIN/themes/reindeer/a-sprite-definitions/a-sprite-definitions.css b/WebContent/VAADIN/themes/reindeer/a-sprite-definitions/a-sprite-definitions.css
index fe459e92d7..2b3eeb2a7a 100644
--- a/WebContent/VAADIN/themes/reindeer/a-sprite-definitions/a-sprite-definitions.css
+++ b/WebContent/VAADIN/themes/reindeer/a-sprite-definitions/a-sprite-definitions.css
@@ -4,8 +4,11 @@
 /** sprite: verticals; sprite-image: url(../common/img/vertical-sprites.png); sprite-layout: vertical */
 /** sprite: horizontals; sprite-image: url(../common/img/horizontal-sprites.png); sprite-layout: horizontal */
 
+/** sprite: black-verticals; sprite-image: url(../common/img/black-vertical-sprites.png); sprite-layout: vertical */
+/** sprite: black-horizontals; sprite-image: url(../common/img/black-horizontal-sprites.png); sprite-layout: horizontal */
+
 /*------------
  * Buttons 
  * -----------*/
 /** sprite: buttons; sprite-image: url(../button/img/button-sprites.png); sprite-layout: vertical */
-/** sprite: buttons-black; sprite-image: url(../button/img/button-black-sprites.png); sprite-layout: vertical */
\ No newline at end of file
+/** sprite: black-buttons; sprite-image: url(../button/img/black-button-sprites.png); sprite-layout: vertical */
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/button.css b/WebContent/VAADIN/themes/reindeer/button/button.css
index 3917dad575..16cb529904 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button.css
+++ b/WebContent/VAADIN/themes/reindeer/button/button.css
@@ -234,6 +234,93 @@ div > .v-button-small .v-button-caption,
 	background-image: url(img/small-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
 }
 
+/*------------
+* Black buttons
+*------------*/
+.black div > .v-button,
+.black .v-ie7 .v-button {
+	background-image: url(img/black/left.png); /** sprite-ref: black-buttons */
+}
+.black div > .v-button .v-button-caption,
+.black .v-ie7 .v-button .v-button-caption {
+	background-image: url(img/black/right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
+	color: #c9ccce;
+	text-shadow: #000 0 1px 0;
+	font-weight: normal;
+}
+.black .v-button:focus {
+	background-image: url(img/black/left-focus.png); /** sprite-ref: black-buttons */
+}
+.black .v-button:focus .v-button-caption {
+	background-image: url(img/black/right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
+}
+.black .v-button:active,
+.black .v-ie7 .v-button.v-pressed {
+	background-image: url(img/black/left-pressed.png); /** sprite-ref: black-buttons */
+}
+.black .v-button:active .v-button-caption,
+.black .v-ie7 .v-button.v-pressed .v-button-caption {
+	background-image: url(img/black/right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
+}
+
+/*
+ * Primary-style ----------------------------
+ */
+.black div > .v-button-primary,
+.black .v-ie7 .v-button-primary {
+	background-image: url(img/black/primary-left.png); /** sprite-ref: black-buttons */
+}
+.black div > .v-button-primary .v-button-caption,
+.black .v-ie7 .v-button-primary .v-button-caption {
+	background-image: url(img/black/primary-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
+	text-shadow: #26282a 0 1px 0;
+}
+.black .v-button-primary:focus {
+	background-image: url(img/black/primary-left-focus.png); /** sprite-ref: black-buttons */
+}
+.black .v-button-primary:focus .v-button-caption {
+	background-image: url(img/black/primary-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
+	color: #eaf4fb;
+}
+.black .v-button-primary:active,
+.black .v-ie7 .v-button-primary.v-pressed {
+	background-image: url(img/black/primary-left-pressed.png); /** sprite-ref: black-buttons */
+}
+.black .v-button-primary:active .v-button-caption,
+.black .v-ie7 .v-button-primary.v-pressed .v-button-caption {
+	background-image: url(img/black/primary-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
+}
+
+/* 
+ * Small-style --------------------------
+ */
+.black div > .v-button-small,
+.black .v-ie7 .v-button-small {
+	background-image: url(img/black/small-left.png); /** sprite-ref: black-buttons */
+}
+.black div > .v-button-small .v-button-caption,
+.black .v-ie7 .v-button-small .v-button-caption {
+	background-image: url(img/black/small-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
+	text-shadow: #000 0 -1px 0;
+}
+.black .v-button-small:focus {
+	background-image: url(img/black/small-left-focus.png); /** sprite-ref: black-buttons */
+}
+.black .v-button-small:focus .v-button-caption {
+	background-image: url(img/black/small-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
+}
+.black .v-button-small:active,
+.black .v-ie7 .v-button-small.v-pressed {
+	background-image: url(img/black/small-left-pressed.png); /** sprite-ref: black-buttons */
+}
+.black .v-button-small:active .v-button-caption,
+.black .v-ie7 .v-button-small.v-pressed .v-button-caption {
+	background-image: url(img/black/small-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
+}
+
+
+
+
 /**
  * IE6 buttons --------------------------
  */
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites-ie6.png b/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites-ie6.png
new file mode 100644
index 0000000000..295237a5fd
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites-ie6.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites.png b/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites.png
new file mode 100644
index 0000000000..197b9b5d21
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black/left-focus.png b/WebContent/VAADIN/themes/reindeer/button/img/black/left-focus.png
new file mode 100644
index 0000000000..4361800079
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black/left-focus.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black/left-pressed.png b/WebContent/VAADIN/themes/reindeer/button/img/black/left-pressed.png
new file mode 100644
index 0000000000..ab0d245b15
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black/left-pressed.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black/left.png b/WebContent/VAADIN/themes/reindeer/button/img/black/left.png
new file mode 100644
index 0000000000..e77900abc5
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black/left.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black/primary-left-focus.png b/WebContent/VAADIN/themes/reindeer/button/img/black/primary-left-focus.png
new file mode 100644
index 0000000000..47bfc36a5b
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black/primary-left-focus.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black/primary-left-pressed.png b/WebContent/VAADIN/themes/reindeer/button/img/black/primary-left-pressed.png
new file mode 100644
index 0000000000..d20fa467f8
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black/primary-left-pressed.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black/primary-left.png b/WebContent/VAADIN/themes/reindeer/button/img/black/primary-left.png
new file mode 100644
index 0000000000..e05e8cf8ae
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black/primary-left.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black/primary-right-focus.png b/WebContent/VAADIN/themes/reindeer/button/img/black/primary-right-focus.png
new file mode 100644
index 0000000000..ecc06c52ab
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black/primary-right-focus.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black/primary-right-pressed.png b/WebContent/VAADIN/themes/reindeer/button/img/black/primary-right-pressed.png
new file mode 100644
index 0000000000..b71eecc3d8
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black/primary-right-pressed.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black/primary-right.png b/WebContent/VAADIN/themes/reindeer/button/img/black/primary-right.png
new file mode 100644
index 0000000000..94d5e93f85
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black/primary-right.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black/right-focus.png b/WebContent/VAADIN/themes/reindeer/button/img/black/right-focus.png
new file mode 100644
index 0000000000..43e6edb2b9
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black/right-focus.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black/right-pressed.png b/WebContent/VAADIN/themes/reindeer/button/img/black/right-pressed.png
new file mode 100644
index 0000000000..2612f6869d
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black/right-pressed.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black/right.png b/WebContent/VAADIN/themes/reindeer/button/img/black/right.png
new file mode 100644
index 0000000000..bfeafb779e
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black/right.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black/small-left-focus.png b/WebContent/VAADIN/themes/reindeer/button/img/black/small-left-focus.png
new file mode 100644
index 0000000000..55e76701b8
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black/small-left-focus.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black/small-left-pressed.png b/WebContent/VAADIN/themes/reindeer/button/img/black/small-left-pressed.png
new file mode 100644
index 0000000000..01eea1ea58
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black/small-left-pressed.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black/small-left.png b/WebContent/VAADIN/themes/reindeer/button/img/black/small-left.png
new file mode 100644
index 0000000000..28aca63243
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black/small-left.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black/small-right-focus.png b/WebContent/VAADIN/themes/reindeer/button/img/black/small-right-focus.png
new file mode 100644
index 0000000000..4415262cb6
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black/small-right-focus.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black/small-right-pressed.png b/WebContent/VAADIN/themes/reindeer/button/img/black/small-right-pressed.png
new file mode 100644
index 0000000000..7095241499
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black/small-right-pressed.png
diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black/small-right.png b/WebContent/VAADIN/themes/reindeer/button/img/black/small-right.png
new file mode 100644
index 0000000000..1be4b2c327
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/img/black/small-right.png
diff --git a/WebContent/VAADIN/themes/reindeer/common/img/black-vertical-sprites.png b/WebContent/VAADIN/themes/reindeer/common/img/black-vertical-sprites.png
new file mode 100644
index 0000000000..887eca49ac
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/common/img/black-vertical-sprites.png
diff --git a/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.css b/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.css
new file mode 100644
index 0000000000..4bc4098fe8
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.css
@@ -0,0 +1,53 @@
+.v-formlayout-cell .v-errorindicator {
+	width: 13px;
+	height: 16px;
+	background: transparent url(../common/icons/error.png) no-repeat 50%;
+}
+.v-ie6 .v-formlayout-cell .v-errorindicator {
+	background-image: url(../common/icons/error-ie6.png);
+}
+.v-formlayout-captioncell {
+	text-align: right;
+	white-space: nowrap;
+}
+.v-formlayout-spacing .v-formlayout-row .v-formlayout-captioncell, 
+.v-formlayout-spacing .v-formlayout-row .v-formlayout-contentcell,
+.v-formlayout-spacing .v-formlayout-row .v-formlayout-errorcell {
+	padding-top: 8px;
+}
+.v-formlayout-margin-top .v-formlayout-firstrow .v-formlayout-captioncell, 
+.v-formlayout-margin-top .v-formlayout-firstrow .v-formlayout-contentcell,
+.v-formlayout-margin-top .v-formlayout-firstrow .v-formlayout-errorcell {
+	padding-top: 15px;
+}
+.v-formlayout-margin-bottom .v-formlayout-lastrow .v-formlayout-captioncell,
+.v-formlayout-margin-bottom .v-formlayout-lastrow .v-formlayout-contentcell,
+.v-formlayout-margin-bottom .v-formlayout-lastrow .v-formlayout-errorcell {
+	padding-bottom: 15px;
+}
+.v-formlayout-margin-left .v-formlayout-captioncell {
+	padding-left: 18px;
+} 
+.v-formlayout-margin-right .v-formlayout-contentcell {
+	padding-right: 18px;
+}
+/* form */
+.v-form-errormessage {
+	background: transparent url(../icons/16/error.png) no-repeat top left;
+	padding-left: 20px;
+	margin-bottom: 5px;
+	margin-top: 5px;
+	min-height: 20px;
+}
+.v-ie6 .v-form-errormessage {
+	height: 20px
+}
+.v-form fieldset {
+	border: none;
+	border-top: 1px solid #babfc0;
+}
+.v-form legend {
+	margin: 0;
+	padding: 0 4px 0.3em 4px;
+	font-weight: bold;
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/layouts/img/black-bg.png b/WebContent/VAADIN/themes/reindeer/layouts/img/black-bg.png
new file mode 100644
index 0000000000..124b13f7c3
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/layouts/img/black-bg.png
diff --git a/WebContent/VAADIN/themes/reindeer/layouts/layouts.css b/WebContent/VAADIN/themes/reindeer/layouts/layouts.css
index a668e76433..1d2c485580 100644
--- a/WebContent/VAADIN/themes/reindeer/layouts/layouts.css
+++ b/WebContent/VAADIN/themes/reindeer/layouts/layouts.css
@@ -29,4 +29,12 @@
 .v-horizontallayout-blue,
 .v-orderedlayout-blue {
 	background-color: #bcd3de;
+}
+/* Black background */
+.v-verticallayout-black,
+.v-horizontallayout-black,
+.v-orderedlayout-black {
+	background: #16181a url(img/black-bg.png) repeat-x;
+	color: #c9ccce;
+	text-shadow: #000 0 0 1px;
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/styles.css b/WebContent/VAADIN/themes/reindeer/styles.css
index 19d60487de..5980634744 100644
--- a/WebContent/VAADIN/themes/reindeer/styles.css
+++ b/WebContent/VAADIN/themes/reindeer/styles.css
@@ -438,6 +438,10 @@
 .v-formlayout-cell .v-errorindicator {
 	display: block;
 }
+.v-formlayout-error-indicator {
+	/* fix width so layout is not jumpy when error disappears */
+	width: 12px;
+}
 .v-formlayout-captioncell {
 	text-align:right;
 	white-space: nowrap;
@@ -1562,6 +1566,7 @@ div.v-window-header {
  * General vertical and horizontal sprites 
  * -----------*/
 
+
 /*------------
  * Buttons 
  * -----------*/
@@ -1890,6 +1895,129 @@ div > .v-button-small .v-button-caption,
   background-position: right -412px;
 }
 
+/*------------
+* Black buttons
+*------------*/
+.black div > .v-button,
+.black .v-ie7 .v-button {
+  background-image: url(button/img/black-button-sprites.png);
+  -background-image: url(button/img/black-button-sprites-ie6.png);
+  background-position: left -0px;
+}
+.black div > .v-button .v-button-caption,
+.black .v-ie7 .v-button .v-button-caption {
+  background-image: url(button/img/black-button-sprites.png);
+  -background-image: url(button/img/black-button-sprites-ie6.png);
+  background-position: right -26px;
+	color: #c9ccce;
+	text-shadow: #000 0 1px 0;
+	font-weight: normal;
+}
+.black .v-button:focus {
+  background-image: url(button/img/black-button-sprites.png);
+  -background-image: url(button/img/black-button-sprites-ie6.png);
+  background-position: left -52px;
+}
+.black .v-button:focus .v-button-caption {
+  background-image: url(button/img/black-button-sprites.png);
+  -background-image: url(button/img/black-button-sprites-ie6.png);
+  background-position: right -78px;
+}
+.black .v-button:active,
+.black .v-ie7 .v-button.v-pressed {
+  background-image: url(button/img/black-button-sprites.png);
+  -background-image: url(button/img/black-button-sprites-ie6.png);
+  background-position: left -104px;
+}
+.black .v-button:active .v-button-caption,
+.black .v-ie7 .v-button.v-pressed .v-button-caption {
+  background-image: url(button/img/black-button-sprites.png);
+  -background-image: url(button/img/black-button-sprites-ie6.png);
+  background-position: right -130px;
+}
+
+/*
+ * Primary-style ----------------------------
+ */
+.black div > .v-button-primary,
+.black .v-ie7 .v-button-primary {
+  background-image: url(button/img/black-button-sprites.png);
+  -background-image: url(button/img/black-button-sprites-ie6.png);
+  background-position: left -156px;
+}
+.black div > .v-button-primary .v-button-caption,
+.black .v-ie7 .v-button-primary .v-button-caption {
+  background-image: url(button/img/black-button-sprites.png);
+  -background-image: url(button/img/black-button-sprites-ie6.png);
+  background-position: right -182px;
+	text-shadow: #26282a 0 1px 0;
+}
+.black .v-button-primary:focus {
+  background-image: url(button/img/black-button-sprites.png);
+  -background-image: url(button/img/black-button-sprites-ie6.png);
+  background-position: left -208px;
+}
+.black .v-button-primary:focus .v-button-caption {
+  background-image: url(button/img/black-button-sprites.png);
+  -background-image: url(button/img/black-button-sprites-ie6.png);
+  background-position: right -234px;
+	color: #eaf4fb;
+}
+.black .v-button-primary:active,
+.black .v-ie7 .v-button-primary.v-pressed {
+  background-image: url(button/img/black-button-sprites.png);
+  -background-image: url(button/img/black-button-sprites-ie6.png);
+  background-position: left -260px;
+}
+.black .v-button-primary:active .v-button-caption,
+.black .v-ie7 .v-button-primary.v-pressed .v-button-caption {
+  background-image: url(button/img/black-button-sprites.png);
+  -background-image: url(button/img/black-button-sprites-ie6.png);
+  background-position: right -286px;
+}
+
+/* 
+ * Small-style --------------------------
+ */
+.black div > .v-button-small,
+.black .v-ie7 .v-button-small {
+  background-image: url(button/img/black-button-sprites.png);
+  -background-image: url(button/img/black-button-sprites-ie6.png);
+  background-position: left -312px;
+}
+.black div > .v-button-small .v-button-caption,
+.black .v-ie7 .v-button-small .v-button-caption {
+  background-image: url(button/img/black-button-sprites.png);
+  -background-image: url(button/img/black-button-sprites-ie6.png);
+  background-position: right -332px;
+	text-shadow: #000 0 -1px 0;
+}
+.black .v-button-small:focus {
+  background-image: url(button/img/black-button-sprites.png);
+  -background-image: url(button/img/black-button-sprites-ie6.png);
+  background-position: left -352px;
+}
+.black .v-button-small:focus .v-button-caption {
+  background-image: url(button/img/black-button-sprites.png);
+  -background-image: url(button/img/black-button-sprites-ie6.png);
+  background-position: right -372px;
+}
+.black .v-button-small:active,
+.black .v-ie7 .v-button-small.v-pressed {
+  background-image: url(button/img/black-button-sprites.png);
+  -background-image: url(button/img/black-button-sprites-ie6.png);
+  background-position: left -392px;
+}
+.black .v-button-small:active .v-button-caption,
+.black .v-ie7 .v-button-small.v-pressed .v-button-caption {
+  background-image: url(button/img/black-button-sprites.png);
+  -background-image: url(button/img/black-button-sprites-ie6.png);
+  background-position: right -412px;
+}
+
+
+
+
 /**
  * IE6 buttons --------------------------
  */
@@ -2338,6 +2466,61 @@ td.v-datefield-calendarpanel-nextyear {
   background-position: left -357px;
 }
 
+/* ./WebContent/VAADIN/themes/reindeer/formlayout/formlayout.css */
+.v-formlayout-cell .v-errorindicator {
+	width: 13px;
+	height: 16px;
+	background: transparent url(common/icons/error.png) no-repeat 50%;
+}
+.v-ie6 .v-formlayout-cell .v-errorindicator {
+	background-image: url(common/icons/error-ie6.png);
+}
+.v-formlayout-captioncell {
+	text-align: right;
+	white-space: nowrap;
+}
+.v-formlayout-spacing .v-formlayout-row .v-formlayout-captioncell, 
+.v-formlayout-spacing .v-formlayout-row .v-formlayout-contentcell,
+.v-formlayout-spacing .v-formlayout-row .v-formlayout-errorcell {
+	padding-top: 8px;
+}
+.v-formlayout-margin-top .v-formlayout-firstrow .v-formlayout-captioncell, 
+.v-formlayout-margin-top .v-formlayout-firstrow .v-formlayout-contentcell,
+.v-formlayout-margin-top .v-formlayout-firstrow .v-formlayout-errorcell {
+	padding-top: 15px;
+}
+.v-formlayout-margin-bottom .v-formlayout-lastrow .v-formlayout-captioncell,
+.v-formlayout-margin-bottom .v-formlayout-lastrow .v-formlayout-contentcell,
+.v-formlayout-margin-bottom .v-formlayout-lastrow .v-formlayout-errorcell {
+	padding-bottom: 15px;
+}
+.v-formlayout-margin-left .v-formlayout-captioncell {
+	padding-left: 18px;
+} 
+.v-formlayout-margin-right .v-formlayout-contentcell {
+	padding-right: 18px;
+}
+/* form */
+.v-form-errormessage {
+	background: transparent url(icons/16/error.png) no-repeat top left;
+	padding-left: 20px;
+	margin-bottom: 5px;
+	margin-top: 5px;
+	min-height: 20px;
+}
+.v-ie6 .v-form-errormessage {
+	height: 20px
+}
+.v-form fieldset {
+	border: none;
+	border-top: 1px solid #babfc0;
+}
+.v-form legend {
+	margin: 0;
+	padding: 0 4px 0.3em 4px;
+	font-weight: bold;
+}
+
 /* ./WebContent/VAADIN/themes/reindeer/label/label.css */
 .v-label {
 	line-height: 18px;
@@ -2399,6 +2582,14 @@ td.v-datefield-calendarpanel-nextyear {
 .v-orderedlayout-blue {
 	background-color: #bcd3de;
 }
+/* Black background */
+.v-verticallayout-black,
+.v-horizontallayout-black,
+.v-orderedlayout-black {
+	background: #16181a url(layouts/img/black-bg.png) repeat-x;
+	color: #c9ccce;
+	text-shadow: #000 0 0 1px;
+}
 
 /* ./WebContent/VAADIN/themes/reindeer/notification/notification.css */
 .v-Notification {
@@ -3128,6 +3319,37 @@ input.v-textfield-prompt {
 .v-ie .v-table input.v-textfield {
 	padding-top: 1px;
 }
+/* Textfield on black background */
+.black .v-textfield {
+	border-color: #343536;
+	border-top-color: #2a2a2b;
+	border-bottom-color: #3a3b3c;
+	background: #1b1d1e;
+  background-image: url(common/img/black-vertical-sprites.png);
+  background-position: left -0px;
+	color: #c9ccce;
+	text-shadow: #000 0 0 1px;
+}
+.v-app .black .v-textfield-focus,
+.v-window .black .v-textfield-focus,
+.v-popupview-popup .black .v-textfield-focus {
+	border-color: #4e6a80;
+	border-top-color: #3a5163;
+	border-bottom-color: #557086;
+}
+/* Capable browsers get fancier border images */
+.v-sa .black input.v-textfield,
+.v-ff35 .black input.v-textfield {
+	-webkit-border-image: url(textfield/img/bg-border-image-black.png) 0 3 0 3 stretch stretch;
+	-moz-border-image: url(textfield/img/bg-border-image-black.png) 0 3 0 3 stretch stretch;
+	-o-border-image: url(textfield/img/bg-border-image-black.png) 0 3 0 3 stretch stretch;
+}
+.v-sa .black input.v-textfield-focus,
+.v-ff35 .black input.v-textfield-focus {
+	-webkit-border-image: url(textfield/img/bg-border-image-black-focus.png) 0 3 0 3 stretch stretch;
+	-moz-border-image: url(textfield/img/bg-border-image-black-focus.png) 0 3 0 3 stretch stretch;
+	-o-border-image: url(textfield/img/bg-border-image-black-focus.png) 0 3 0 3 stretch stretch;
+}
 
 /* ./WebContent/VAADIN/themes/reindeer/tree/tree.css */
 .v-tree-node {
diff --git a/WebContent/VAADIN/themes/reindeer/textfield/img/bg-black.png b/WebContent/VAADIN/themes/reindeer/textfield/img/bg-black.png
new file mode 100644
index 0000000000..ed00223de9
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/textfield/img/bg-black.png
diff --git a/WebContent/VAADIN/themes/reindeer/textfield/img/bg-border-image-black-focus.png b/WebContent/VAADIN/themes/reindeer/textfield/img/bg-border-image-black-focus.png
new file mode 100644
index 0000000000..5c992745ec
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/textfield/img/bg-border-image-black-focus.png
diff --git a/WebContent/VAADIN/themes/reindeer/textfield/img/bg-border-image-black.png b/WebContent/VAADIN/themes/reindeer/textfield/img/bg-border-image-black.png
new file mode 100644
index 0000000000..c88b3d31ad
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/textfield/img/bg-border-image-black.png
diff --git a/WebContent/VAADIN/themes/reindeer/textfield/textfield.css b/WebContent/VAADIN/themes/reindeer/textfield/textfield.css
index 20f898ac98..e4a0425e87 100644
--- a/WebContent/VAADIN/themes/reindeer/textfield/textfield.css
+++ b/WebContent/VAADIN/themes/reindeer/textfield/textfield.css
@@ -70,4 +70,34 @@ input.v-textfield-prompt {
 }
 .v-ie .v-table input.v-textfield {
 	padding-top: 1px;
+}
+/* Textfield on black background */
+.black .v-textfield {
+	border-color: #343536;
+	border-top-color: #2a2a2b;
+	border-bottom-color: #3a3b3c;
+	background: #1b1d1e;
+	background-image: url(img/bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat; sprite-margin-bottom: 22px */
+	color: #c9ccce;
+	text-shadow: #000 0 0 1px;
+}
+.v-app .black .v-textfield-focus,
+.v-window .black .v-textfield-focus,
+.v-popupview-popup .black .v-textfield-focus {
+	border-color: #4e6a80;
+	border-top-color: #3a5163;
+	border-bottom-color: #557086;
+}
+/* Capable browsers get fancier border images */
+.v-sa .black input.v-textfield,
+.v-ff35 .black input.v-textfield {
+	-webkit-border-image: url(img/bg-border-image-black.png) 0 3 0 3 stretch stretch;
+	-moz-border-image: url(img/bg-border-image-black.png) 0 3 0 3 stretch stretch;
+	-o-border-image: url(img/bg-border-image-black.png) 0 3 0 3 stretch stretch;
+}
+.v-sa .black input.v-textfield-focus,
+.v-ff35 .black input.v-textfield-focus {
+	-webkit-border-image: url(img/bg-border-image-black-focus.png) 0 3 0 3 stretch stretch;
+	-moz-border-image: url(img/bg-border-image-black-focus.png) 0 3 0 3 stretch stretch;
+	-o-border-image: url(img/bg-border-image-black-focus.png) 0 3 0 3 stretch stretch;
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/formlayout/formlayout.css b/WebContent/VAADIN/themes/runo/formlayout/formlayout.css
index 86e66a841d..4c773b2e6e 100644
--- a/WebContent/VAADIN/themes/runo/formlayout/formlayout.css
+++ b/WebContent/VAADIN/themes/runo/formlayout/formlayout.css
@@ -7,10 +7,6 @@
 	text-align:right;
 	white-space: nowrap;
 }
-.v-formlayout-error-indicator {
-	/* fix width so layout is not jumpy when error disapear */
-	width: 12px;
-}
 .v-formlayout-spacing .v-formlayout-row .v-formlayout-captioncell, 
 .v-formlayout-spacing .v-formlayout-row .v-formlayout-contentcell,
 .v-formlayout-spacing .v-formlayout-row .v-formlayout-errorcell {
diff --git a/WebContent/VAADIN/themes/runo/styles.css b/WebContent/VAADIN/themes/runo/styles.css
index de8355f01e..6268d7f1bf 100644
--- a/WebContent/VAADIN/themes/runo/styles.css
+++ b/WebContent/VAADIN/themes/runo/styles.css
@@ -438,6 +438,10 @@
 .v-formlayout-cell .v-errorindicator {
 	display: block;
 }
+.v-formlayout-error-indicator {
+	/* fix width so layout is not jumpy when error disappears */
+	width: 12px;
+}
 .v-formlayout-captioncell {
 	text-align:right;
 	white-space: nowrap;
@@ -1892,10 +1896,6 @@ div.v-window-header {
 	text-align:right;
 	white-space: nowrap;
 }
-.v-formlayout-error-indicator {
-	/* fix width so layout is not jumpy when error disapear */
-	width: 12px;
-}
 .v-formlayout-spacing .v-formlayout-row .v-formlayout-captioncell, 
 .v-formlayout-spacing .v-formlayout-row .v-formlayout-contentcell,
 .v-formlayout-spacing .v-formlayout-row .v-formlayout-errorcell {