Fixes #1595: Close button on TabSheet control

 * Added new sample to Sampler/TabSheets
 * Made all tabs in Reindeer theme demo closable.

svn changeset:9737/svn branch:6.2

21 files changed, 835 insertions, 432 deletions

diff --git a/WebContent/VAADIN/themes/base/styles.css b/WebContent/VAADIN/themes/base/styles.css
index 5908dcec9f..e0908ddd88 100644
--- a/WebContent/VAADIN/themes/base/styles.css
+++ b/WebContent/VAADIN/themes/base/styles.css
@@ -1387,6 +1387,9 @@ div.v-progressindicator-indeterminate-disabled {
 .v-ff2 .v-tabsheet-scroller {
 	position: relative;
 }
+.v-disabled .v-tabsheet-scroller {
+	display: none;
+}
 .v-tabsheet-scrollerPrev,
 .v-tabsheet-scrollerNext,
 .v-tabsheet-scrollerPrev-disabled,
@@ -1412,12 +1415,26 @@ div.v-progressindicator-indeterminate-disabled {
 	zoom: 1;
 	width: 16px;
 	height: 16px;
-	background: url(common/img/close.png) no-repeat;
+	text-align: center;
+	font-weight: bold;
 	cursor: pointer;
 	vertical-align: middle;
+	user-select: none;
+	-khtml-user-select: none;
+	-ms-user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
 }
-.v-disabled .v-tabsheet-caption-close {
+.v-tabsheet .v-disabled .v-tabsheet-caption-close {
 	cursor: default;
+	visibility: hidden;
+}
+.v-tabsheet-tabitemcell:hover .v-tabsheet-caption-close,
+.v-ie6 .v-tabsheet-caption-close {
+	visibility: visible;
+}
+.v-ie6 .v-tabsheet-caption-close {
+	float: right;
 }
 .v-tabsheet-tabitem {
 	border: 1px solid #aaa;
@@ -1642,9 +1659,9 @@ div.v-tree-node-leaf {
 	position: absolute;
 	top: 0;
 	right: 0;
-	width: 16px;
-	height: 16px;
-	background: url(common/img/close.png) no-repeat;
+	width: 1em;
+	height: 1em;
+	background: red;
 	cursor: pointer;
 	overflow: hidden;
 }
diff --git a/WebContent/VAADIN/themes/base/tabsheet/tabsheet.css b/WebContent/VAADIN/themes/base/tabsheet/tabsheet.css
index 8520f35913..6fd1f1470a 100644
--- a/WebContent/VAADIN/themes/base/tabsheet/tabsheet.css
+++ b/WebContent/VAADIN/themes/base/tabsheet/tabsheet.css
@@ -39,6 +39,9 @@
 .v-ff2 .v-tabsheet-scroller {
 	position: relative;
 }
+.v-disabled .v-tabsheet-scroller {
+	display: none;
+}
 .v-tabsheet-scrollerPrev,
 .v-tabsheet-scrollerNext,
 .v-tabsheet-scrollerPrev-disabled,
@@ -58,6 +61,33 @@
 .v-tabsheet-tabs .v-caption span {
 	white-space: nowrap;
 }
+.v-tabsheet-caption-close {
+	display: inline;
+	display: inline-block;
+	zoom: 1;
+	width: 16px;
+	height: 16px;
+	text-align: center;
+	font-weight: bold;
+	cursor: pointer;
+	vertical-align: middle;
+	user-select: none;
+	-khtml-user-select: none;
+	-ms-user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+}
+.v-tabsheet .v-disabled .v-tabsheet-caption-close {
+	cursor: default;
+	visibility: hidden;
+}
+.v-tabsheet-tabitemcell:hover .v-tabsheet-caption-close,
+.v-ie6 .v-tabsheet-caption-close {
+	visibility: visible;
+}
+.v-ie6 .v-tabsheet-caption-close {
+	float: right;
+}
 .v-tabsheet-tabitem {
 	border: 1px solid #aaa;
 	border-right: none;
diff --git a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png
index c4ee4bdcd1..c11ee47f9e 100644
--- a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png
+++ b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png
diff --git a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png
index b68e51aca4..4a4537ac06 100644
--- a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png
+++ b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png
diff --git a/WebContent/VAADIN/themes/reindeer/styles.css b/WebContent/VAADIN/themes/reindeer/styles.css
index 1aa84f88d3..be563abfc3 100644
--- a/WebContent/VAADIN/themes/reindeer/styles.css
+++ b/WebContent/VAADIN/themes/reindeer/styles.css
@@ -1387,6 +1387,9 @@ div.v-progressindicator-indeterminate-disabled {
 .v-ff2 .v-tabsheet-scroller {
 	position: relative;
 }
+.v-disabled .v-tabsheet-scroller {
+	display: none;
+}
 .v-tabsheet-scrollerPrev,
 .v-tabsheet-scrollerNext,
 .v-tabsheet-scrollerPrev-disabled,
@@ -1412,12 +1415,26 @@ div.v-progressindicator-indeterminate-disabled {
 	zoom: 1;
 	width: 16px;
 	height: 16px;
-	background: url(../base/common/img/close.png) no-repeat;
+	text-align: center;
+	font-weight: bold;
 	cursor: pointer;
 	vertical-align: middle;
+	user-select: none;
+	-khtml-user-select: none;
+	-ms-user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
 }
-.v-disabled .v-tabsheet-caption-close {
+.v-tabsheet .v-disabled .v-tabsheet-caption-close {
 	cursor: default;
+	visibility: hidden;
+}
+.v-tabsheet-tabitemcell:hover .v-tabsheet-caption-close,
+.v-ie6 .v-tabsheet-caption-close {
+	visibility: visible;
+}
+.v-ie6 .v-tabsheet-caption-close {
+	float: right;
 }
 .v-tabsheet-tabitem {
 	border: 1px solid #aaa;
@@ -1642,9 +1659,9 @@ div.v-tree-node-leaf {
 	position: absolute;
 	top: 0;
 	right: 0;
-	width: 16px;
-	height: 16px;
-	background: url(../base/common/img/close.png) no-repeat;
+	width: 1em;
+	height: 1em;
+	background: red;
 	cursor: pointer;
 	overflow: hidden;
 }
@@ -3143,6 +3160,8 @@ td.v-datefield-calendarpanel-nextyear {
 	border-bottom: none;
 	border-top: none;
 }
+.blue .v-panel-caption,
+.blue .v-panel-nocaption,
 .blue .v-panel-content {
 	border-color: #a8bcc5;
 }
@@ -3150,11 +3169,13 @@ td.v-datefield-calendarpanel-nextyear {
 .v-ff3 .v-panel-content {
 	border-color: rgba(0,0,0,.1);
 }
-.v-panel-content > div,
-.v-ie6 .v-panel-content {
+.v-panel-content > div {
 	background: #fff;
 	min-height: 100%;
 }
+.v-ie6 .v-panel-content {
+	background: #fff;
+}
 .v-panel-deco {
 	height: 1px;
 	border-top: 1px solid #bebebe;
@@ -3196,6 +3217,9 @@ td.v-datefield-calendarpanel-nextyear {
 .v-panel-content-light > div {
 	background: transparent;
 }
+.v-ie6 .v-panel-content-light {
+	background: transparent;
+}
 .v-panel-deco-light {
 	height: 0;
 	border: none;
@@ -3967,6 +3991,10 @@ td.v-datefield-calendarpanel-nextyear {
 	border: none;
 }
 
+/* These styles get catenated together on build */
+
+/* Default Tabsheet styles */
+
 .v-tabsheet-tabitemcell,
 .v-tabsheet-spacertd {
 	height: 32px;
@@ -4005,33 +4033,80 @@ td.v-datefield-calendarpanel-nextyear {
   background-position: right -1304px;
 	padding: 9px 8px 0 6px;
 }
+.v-tabsheet-tabitem .v-caption-closable {
+	padding-right: 0;
+	padding-left: 17px;
+}
 .v-tabsheet-tabitem .v-captiontext {
 	height: 16px;
 	line-height: 16px;
 }
 .v-tabsheet-caption-close {
-	
+	float: right;
+	width: 19px;
+	height: 18px;
+	margin: -1px -1px 0;
+	padding-left: 2px;
+	background: transparent;
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1336px;
+	cursor: default;
+	text-indent: -999px;
+	overflow: hidden;
+}
+.v-ff .v-tabsheet-caption-close,
+.v-ie7 .v-tabsheet-caption-close {
+	margin-top: -17px;
+}
+.v-ie6 .v-tabsheet-caption-close {
+	float: none;
+}
+.v-tabsheet-caption-close:hover {
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1354px;
+}
+.v-tabsheet-caption-close:active {
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1372px;
+}
+.v-tabsheet-tabitem-selected .v-tabsheet-caption-close {
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1390px;
+}
+.v-tabsheet-tabitem-selected .v-tabsheet-caption-close:hover {
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1408px;
+}
+.v-tabsheet-tabitem-selected .v-tabsheet-caption-close:active {
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1426px;
 }
 .v-tabsheet-tabitemcell-selected {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1336px;
+  background-position: left -1444px;
 }
 .v-tabsheet-tabitemcell-selected-first {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1368px;
+  background-position: left -1476px;
 }
 .v-tabsheet-tabitem-selected {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1400px;
+  background-position: left -1508px;
 	color: #232930;
 }
 .v-tabsheet-tabitem-selected .v-caption {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: right -1432px;
+  background-position: right -1540px;
 }
 .v-tabsheet-spacertd div {
 	margin-right: 4px;
@@ -4040,7 +4115,7 @@ td.v-datefield-calendarpanel-nextyear {
 	background: transparent no-repeat right top;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: right -1464px;
+  background-position: right -1572px;
 }
 .v-tabsheet-content {
 	border: 1px solid #dcdcdc;
@@ -4074,13 +4149,53 @@ td.v-datefield-calendarpanel-nextyear {
 	border-top-color: rgba(0,0,0,.1);
 	background: rgba(0,0,0,.08);
 }
+
+
+/* Icons & error indicators */
+
+.v-tabsheet-tabs .v-icon,
+.v-tabsheet-tabs .v-captiontext,
+.v-tabsheet-tabs .v-errorindicator {
+	display: inline;
+	float: none;
+}
+.v-sa .v-tabsheet-tabs .v-captiontext {
+	display: inline-block;
+}
+.v-tabsheet-tabs .v-icon {
+	width: 16px !important;
+	height: 16px !important;
+}
+.v-tabsheet-tabs .v-errorindicator {
+	display: inline-block;
+	width: 13px;
+	height: 16px;
+	background: transparent url(common/icons/error.png) no-repeat 50%;
+}
+.v-ff2 .v-tabsheet-tabs .v-icon,
+.v-ff2 .v-tabsheet-tabs .v-errorindicator {
+	display: -moz-inline-stack;
+}
+.v-ie6 .v-tabsheet-tabs .v-errorindicator {
+	background-image: url(common/icons/error-ie6.png);
+}
+.v-ie .v-tabsheet-tabs .v-errorindicator {
+	zoom: 1;
+	display: inline;
+}
+
+/* Tabsheet scroller styles */
+
 .v-tabsheet-scroller {
 	height: 31px;
 	margin-top: -31px;
-	padding-right: 3px;
-	border-right: 1px solid #afafaf;
+	padding: 0 3px 0 4px;
+	border-right: 1px solid #c2c2c2;
+	border-left: 1px solid #cfcfcf;
 	position: relative;
 	float: right;
+	background: transparent url(tabsheet/img/framed/tab-bg.png) repeat-x left -1px;
+	width: 36px;
 }
 .v-tabsheet-scroller button {
 	margin-top: 7px;
@@ -4093,7 +4208,7 @@ td.v-datefield-calendarpanel-nextyear {
 	background: transparent;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1496px;
+  background-position: left -1604px;
 	width: 18px;
 	height: 17px;
 	overflow: hidden;
@@ -4105,23 +4220,23 @@ td.v-datefield-calendarpanel-nextyear {
 .v-tabsheet-scrollerNext {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1513px;
+  background-position: left -1621px;
 }
 .v-tabsheet-scrollerPrev:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1530px;
+  background-position: left -1638px;
 }
 .v-tabsheet-scrollerNext:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1547px;
+  background-position: left -1655px;
 }
 .v-tabsheet-scrollerPrev-disabled,
 .v-tabsheet-scrollerPrev-disabled:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1564px;
+  background-position: left -1672px;
 	opacity: 1;
 	filter: none;
 }
@@ -4129,48 +4244,13 @@ td.v-datefield-calendarpanel-nextyear {
 .v-tabsheet-scrollerNext-disabled:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1581px;
+  background-position: left -1689px;
 	opacity: 1;
 	filter: none;
 }
-.v-tabsheet-tabs .v-icon,
-.v-tabsheet-tabs .v-captiontext,
-.v-tabsheet-tabs .v-errorindicator {
-	display: inline;
-	float: none;
-}
-.v-sa .v-tabsheet-tabs .v-captiontext {
-	display: inline-block;
-}
-.v-tabsheet-tabs .v-icon {
-	width: 16px !important;
-	height: 16px !important;
-}
-.v-tabsheet-tabs .v-errorindicator {
-	display: inline-block;
-	width: 13px;
-	height: 16px;
-	background: transparent url(common/icons/error.png) no-repeat 50%;
-}
-.v-ff2 .v-tabsheet-tabs .v-icon,
-.v-ff2 .v-tabsheet-tabs .v-errorindicator {
-	display: -moz-inline-stack;
-}
-.v-ie6 .v-tabsheet-tabs .v-errorindicator {
-	background-image: url(common/icons/error-ie6.png);
-}
-.v-ie .v-tabsheet-tabs .v-errorindicator {
-	zoom: 1;
-	display: inline;
-}
-
-
-
-
-
 
 /**
- * Minimal style --------------
+ * Tabsheet "minimal" style --------------
  */
 .v-tabsheet-minimal .v-tabsheet-spacertd div {
 	border-bottom: 1px solid #bfbfbf;
@@ -4210,6 +4290,10 @@ td.v-datefield-calendarpanel-nextyear {
 	background: transparent;
 	padding: 4px 15px 6px 15px;
 }
+.v-tabsheet-minimal .v-tabsheet-tabitem .v-caption-closable,
+.v-tabsheet-minimal .v-tabsheet-tabitem-selected .v-caption-closable {
+	padding-right: 6px;
+}
 .v-tabsheet-content-minimal {
 	border: none;
 }
@@ -4223,20 +4307,58 @@ td.v-datefield-calendarpanel-nextyear {
 .v-tabsheet-minimal .v-tabsheet-scroller {
 	margin-top: -20px;
 	height: 17px;
-	padding-right: 0;
-	border-right: none;
-	position: static;
-	float: none;
+	padding: 0;
+	border: none;
+	background: transparent;
 }
 .v-tabsheet-minimal .v-tabsheet-scroller button {
 	margin-top: 0;
 }
+.v-tabsheet-minimal .v-tabsheet-caption-close,
+.v-tabsheet-minimal .v-tabsheet-caption-close:hover,
+.v-tabsheet-minimal .v-tabsheet-caption-close:active {
+	text-indent: 0;
+	background: transparent;
+	margin-left: 3px;
+	margin-right: -3px;
+	padding: 0;
+	color: #999;
+	width: 15px;
+	height: 15px;
+	line-height: 14px;
+	-webkit-border-radius: 7px;
+	-moz-border-radius: 7px;
+}
+.v-tabsheet-minimal .v-tabsheet-caption-close {
+	margin-top: 1px;
+}
+.v-ff .v-tabsheet-minimal .v-tabsheet-caption-close,
+.v-ie7 .v-tabsheet-minimal .v-tabsheet-caption-close {
+	margin-top: -15px;
+}
+.v-tabsheet-minimal .v-tabsheet-caption-close:hover {
+	color: #fff;
+	background: #aaa;
+}
+.v-tabsheet-minimal .v-tabsheet-caption-close:active {
+	background: #777;
+}
 /* Minimal tabsheet on blue background */
 .blue .v-tabsheet-minimal .v-tabsheet-spacertd div,
 .blue .v-tabsheet-minimal .v-tabsheet-tabitem,
 .blue .v-tabsheet-minimal .v-tabsheet-tabitem-selected  {
 	border-color: #7c8a91;
 }
+.blue .v-tabsheet-minimal .v-tabsheet-caption-close {
+	color: #7c8a91;
+}
+.blue .v-tabsheet-minimal .v-tabsheet-caption-close:hover {
+	color: #BCD3DE;
+	background: #778d98;
+}
+.blue .v-tabsheet-minimal .v-tabsheet-caption-close:active {
+	background: #4f6874;
+}
 /* Minimal tabsheet on black background */
 .black .v-tabsheet-minimal .v-tabsheet-spacertd div,
 .black .v-tabsheet-minimal .v-tabsheet-tabitem,
@@ -4252,14 +4374,19 @@ td.v-datefield-calendarpanel-nextyear {
 	color: #c9ccce;
 	text-shadow: #000 0 0 1px;
 }
-
-
-
-
-
+.black .v-tabsheet-minimal .v-tabsheet-caption-close {
+	color: #72787c;
+}
+.black .v-tabsheet-minimal .v-tabsheet-caption-close:hover {
+	color: #1d2021;
+	background: #4d5154;
+}
+.black .v-tabsheet-minimal .v-tabsheet-caption-close:active {
+	background: #626669;
+}
 
 /**
- * Bar style ---------------
+ * Tabsheet bar style ---------------
  */
 .v-tabsheet-bar .v-tabsheet-tabitemcell,
 .v-tabsheet-bar .v-tabsheet-spacertd {
@@ -4271,20 +4398,20 @@ td.v-datefield-calendarpanel-nextyear {
 .v-tabsheet-bar .v-tabsheet-tabitemcell {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1599px;
+  background-position: left -1707px;
 }
 .v-tabsheet-bar .v-tabsheet-tabitemcell-first {
 	padding-left: 6px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1619px;
+  background-position: left -1727px;
 }
 .v-tabsheet-bar .v-tabsheet-tabitem,
 .v-tabsheet-bar .v-tabsheet-spacertd div {
 	height: 20px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1639px;
+  background-position: left -1747px;
 	font-size: 11px;
 	margin: 0;
 }
@@ -4292,43 +4419,86 @@ td.v-datefield-calendarpanel-nextyear {
 	height: 18px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: right -1659px;
+  background-position: right -1767px;
 	padding: 2px 12px 0 10px;
 }
+.v-tabsheet-bar .v-tabsheet-tabitem .v-caption-closable,
+.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-caption-closable {
+	padding-right: 8px;
+	padding-left: 14px;
+}
+.v-tabsheet-bar .v-tabsheet-caption-close,
+.v-tabsheet-bar .v-tabsheet-caption-close:hover,
+.v-tabsheet-bar .v-tabsheet-caption-close:active {
+	text-indent: 0;
+	background: transparent;
+	margin-left: 3px;
+	margin-right: -3px;
+	padding: 0;
+	color: #3c3c3c;
+	width: 14px;
+	height: 14px;
+	line-height: 12px;
+	-webkit-border-radius: 7px;
+	-moz-border-radius: 7px;
+}
+.v-tabsheet-bar .v-tabsheet-caption-close {
+	margin-top: 0;
+}
+.v-ff .v-tabsheet-bar .v-tabsheet-caption-close,
+.v-ie7 .v-tabsheet-bar .v-tabsheet-caption-close {
+	margin-top: -15px;
+}
+.v-tabsheet-bar .v-tabsheet-caption-close:hover {
+	background: #bfbfbf;
+	-webkit-box-shadow: 0 1px 0 #fff;
+}
+.v-tabsheet-bar .v-tabsheet-caption-close:active {
+	background: #a9a9a9;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close {
+	color: #404142;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:hover {
+	background: #5e666e;
+	color: #fff;
+	text-shadow: 0 -1px 0 #222;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:active {
+	background: #404142;
+}
+
 .v-tabsheet-bar .v-tabsheet-tabitemcell-selected {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1679px;
+  background-position: left -1787px;
 }
 .v-tabsheet-bar .v-tabsheet-tabitemcell-selected-first {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1699px;
+  background-position: left -1807px;
 }
 .v-tabsheet-bar .v-tabsheet-tabitem-selected {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1719px;
+  background-position: left -1827px;
 	color: #232930;
 }
 .v-tabsheet-bar .v-tabsheet-tabitem-selected .v-caption {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: right -1739px;
+  background-position: right -1847px;
 }
 .v-tabsheet-bar .v-tabsheet-scroller {
-	margin-top: -19px;
-}
-.v-tabsheet-bar .v-tabsheet-scroller {
-	margin-top: -19px;
-	height: 17px;
-	padding-right: 0;
+	margin-top: -20px;
+	height: 19px;
 	border-right: none;
-	position: static;
-	float: none;
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1867px;
 }
 .v-tabsheet-bar .v-tabsheet-scroller button {
-	margin-top: 0;
+	margin-top: 1px;
 }
 .v-tabsheet-content-bar {
 	border: none;
@@ -4353,7 +4523,7 @@ td.v-datefield-calendarpanel-nextyear {
 	background-repeat: repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1759px;
+  background-position: left -1887px;
 	border-radius: 3px;
 	-moz-border-radius: 3px;
 	margin: 0;
@@ -4512,7 +4682,7 @@ input.v-textfield-readonly,
 	background: #4d749f repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1782px;
+  background-position: left -1910px;
 	color: #fff;
 	padding: 1px 2px;
 	-webkit-border-radius: 2px;
@@ -4567,7 +4737,7 @@ input.v-textfield-readonly,
 	background: transparent repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1802px;
+  background-position: left -1930px;
 }
 .v-window-header {
 	font-weight: bold;
@@ -4594,13 +4764,13 @@ input.v-textfield-readonly,
 	background: transparent;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1839px;
+  background-position: left -1967px;
 }
 .v-window-footer {
 	background-repeat: repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1854px;
+  background-position: left -1982px;
 	height: 15px;
 }
 .v-window-closebox {
@@ -4611,17 +4781,17 @@ input.v-textfield-readonly,
 	background: transparent;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1869px;
+  background-position: left -1997px;
 }
 .v-window-closebox:hover {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1885px;
+  background-position: left -2013px;
 }
 .v-window-closebox:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1901px;
+  background-position: left -2029px;
 }
 .v-window-contents {
 	background: #fff;
@@ -4654,7 +4824,7 @@ input.v-textfield-readonly,
 	height: 12px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1917px;
+  background-position: left -2045px;
 }
 .v-window-light .v-window-footer {
 	background: transparent;
@@ -4667,17 +4837,17 @@ input.v-textfield-readonly,
 	height: 15px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1929px;
+  background-position: left -2057px;
 }
 .v-window-light .v-window-closebox:hover {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1944px;
+  background-position: left -2072px;
 }
 .v-window-light .v-window-closebox:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1959px;
+  background-position: left -2087px;
 }
 .v-window-light .v-window-contents {
 	background: transparent;
@@ -4687,7 +4857,7 @@ input.v-textfield-readonly,
 	background: #f7f7f8 repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1974px;
+  background-position: left -2102px;
 }
 .v-ie6 .v-window-light .v-window-wrap2 {
 	background-image: none;
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-hover.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-hover.png
new file mode 100644
index 0000000000..f548db838a
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-hover.png
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-pressed.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-pressed.png
new file mode 100644
index 0000000000..a39a4431b3
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-pressed.png
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-hover.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-hover.png
new file mode 100644
index 0000000000..31a0d1f3f5
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-hover.png
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-pressed.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-pressed.png
new file mode 100644
index 0000000000..9aae58c427
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-pressed.png
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel.png
new file mode 100644
index 0000000000..e0cd398707
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel.png
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn.png
new file mode 100644
index 0000000000..9407f7b82c
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn.png
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-bar-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-bar-style.css
new file mode 100644
index 0000000000..ec985ad993
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-bar-style.css
@@ -0,0 +1,108 @@
+/**
+ * Tabsheet bar style ---------------
+ */
+.v-tabsheet-bar .v-tabsheet-tabitemcell,
+.v-tabsheet-bar .v-tabsheet-spacertd {
+	height: 20px;
+}
+.v-tabsheet-bar .v-tabsheet-spacertd {
+	background: transparent;
+}
+.v-tabsheet-bar .v-tabsheet-tabitemcell {
+	background-image: url(img/bar/tab-left.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-bar .v-tabsheet-tabitemcell-first {
+	padding-left: 6px;
+	background-image: url(img/bar/tab-first-left.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-bar .v-tabsheet-tabitem,
+.v-tabsheet-bar .v-tabsheet-spacertd div {
+	height: 20px;
+	background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
+	font-size: 11px;
+	margin: 0;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem .v-caption {
+	height: 18px;
+	background-image: url(img/bar/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */
+	padding: 2px 12px 0 10px;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem .v-caption-closable,
+.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-caption-closable {
+	padding-right: 8px;
+	padding-left: 14px;
+}
+.v-tabsheet-bar .v-tabsheet-caption-close,
+.v-tabsheet-bar .v-tabsheet-caption-close:hover,
+.v-tabsheet-bar .v-tabsheet-caption-close:active {
+	text-indent: 0;
+	background: transparent;
+	margin-left: 3px;
+	margin-right: -3px;
+	padding: 0;
+	color: #3c3c3c;
+	width: 14px;
+	height: 14px;
+	line-height: 12px;
+	-webkit-border-radius: 7px;
+	-moz-border-radius: 7px;
+}
+.v-tabsheet-bar .v-tabsheet-caption-close {
+	margin-top: 0;
+}
+.v-ff .v-tabsheet-bar .v-tabsheet-caption-close,
+.v-ie7 .v-tabsheet-bar .v-tabsheet-caption-close {
+	margin-top: -15px;
+}
+.v-tabsheet-bar .v-tabsheet-caption-close:hover {
+	background: #bfbfbf;
+	-webkit-box-shadow: 0 1px 0 #fff;
+}
+.v-tabsheet-bar .v-tabsheet-caption-close:active {
+	background: #a9a9a9;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close {
+	color: #404142;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:hover {
+	background: #5e666e;
+	color: #fff;
+	text-shadow: 0 -1px 0 #222;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:active {
+	background: #404142;
+}
+
+.v-tabsheet-bar .v-tabsheet-tabitemcell-selected {
+	background-image: url(img/bar/tab-left-sel.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-bar .v-tabsheet-tabitemcell-selected-first {
+	background-image: url(img/bar/tab-first-left-sel.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-bar .v-tabsheet-tabitem-selected {
+	background-image: url(img/bar/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
+	color: #232930;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-caption {
+	background-image: url(img/bar/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */
+}
+.v-tabsheet-bar .v-tabsheet-scroller {
+	margin-top: -20px;
+	height: 19px;
+	border-right: none;
+	background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
+}
+.v-tabsheet-bar .v-tabsheet-scroller button {
+	margin-top: 1px;
+}
+.v-tabsheet-content-bar {
+	border: none;
+}
+.v-tabsheet-content-bar .v-tabsheet-tabsheetpanel {
+	background: transparent;
+}
+.v-tabsheet-deco-bar {
+	height: 0;
+	border: none;
+}
+/* Content area font color specified with minimal style (reduces additional selectors) */
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.css
new file mode 100644
index 0000000000..d80f292055
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.css
@@ -0,0 +1,135 @@
+/**
+ * Tabsheet "minimal" style --------------
+ */
+.v-tabsheet-minimal .v-tabsheet-spacertd div {
+	border-bottom: 1px solid #bfbfbf;
+	height: auto;
+	background: transparent;
+}
+.v-tabsheet-minimal .v-tabsheet-tabitemcell,
+.v-tabsheet-minimal .v-tabsheet-spacertd {
+	height: auto;
+	background: transparent;
+	padding-left: 0;
+}
+.v-tabsheet-minimal .v-tabsheet-tabitem {
+	border: none;
+	border-bottom: 1px solid #bfbfbf;
+	color: #4d748f;
+	padding: 0;
+	height: auto;
+	background: transparent;
+	text-shadow: none;
+}
+.v-tabsheet-minimal .v-tabsheet-tabitem .v-caption {
+	padding: 5px 16px;
+	height: auto;
+	background: transparent;
+}
+.v-tabsheet-minimal .v-tabsheet-tabitemcell-selected {
+	background: transparent;
+}
+.v-tabsheet-minimal .v-tabsheet-tabitem-selected {
+	background: transparent;
+	border: 1px solid #bfbfbf;
+	border-bottom: none;
+	color: #222;
+}
+.v-tabsheet-minimal .v-tabsheet-tabitem-selected .v-caption {
+	background: transparent;
+	padding: 4px 15px 6px 15px;
+}
+.v-tabsheet-minimal .v-tabsheet-tabitem .v-caption-closable,
+.v-tabsheet-minimal .v-tabsheet-tabitem-selected .v-caption-closable {
+	padding-right: 6px;
+}
+.v-tabsheet-content-minimal {
+	border: none;
+}
+.v-tabsheet-content-minimal .v-tabsheet-tabsheetpanel {
+	background: transparent;
+}
+.v-tabsheet-deco-minimal {
+	height: 0;
+	border: none;
+}
+.v-tabsheet-minimal .v-tabsheet-scroller {
+	margin-top: -20px;
+	height: 17px;
+	padding: 0;
+	border: none;
+	background: transparent;
+}
+.v-tabsheet-minimal .v-tabsheet-scroller button {
+	margin-top: 0;
+}
+.v-tabsheet-minimal .v-tabsheet-caption-close,
+.v-tabsheet-minimal .v-tabsheet-caption-close:hover,
+.v-tabsheet-minimal .v-tabsheet-caption-close:active {
+	text-indent: 0;
+	background: transparent;
+	margin-left: 3px;
+	margin-right: -3px;
+	padding: 0;
+	color: #999;
+	width: 15px;
+	height: 15px;
+	line-height: 14px;
+	-webkit-border-radius: 7px;
+	-moz-border-radius: 7px;
+}
+.v-tabsheet-minimal .v-tabsheet-caption-close {
+	margin-top: 1px;
+}
+.v-ff .v-tabsheet-minimal .v-tabsheet-caption-close,
+.v-ie7 .v-tabsheet-minimal .v-tabsheet-caption-close {
+	margin-top: -15px;
+}
+.v-tabsheet-minimal .v-tabsheet-caption-close:hover {
+	color: #fff;
+	background: #aaa;
+}
+.v-tabsheet-minimal .v-tabsheet-caption-close:active {
+	background: #777;
+}
+/* Minimal tabsheet on blue background */
+.blue .v-tabsheet-minimal .v-tabsheet-spacertd div,
+.blue .v-tabsheet-minimal .v-tabsheet-tabitem,
+.blue .v-tabsheet-minimal .v-tabsheet-tabitem-selected  {
+	border-color: #7c8a91;
+}
+.blue .v-tabsheet-minimal .v-tabsheet-caption-close {
+	color: #7c8a91;
+}
+.blue .v-tabsheet-minimal .v-tabsheet-caption-close:hover {
+	color: #BCD3DE;
+	background: #778d98;
+}
+.blue .v-tabsheet-minimal .v-tabsheet-caption-close:active {
+	background: #4f6874;
+}
+/* Minimal tabsheet on black background */
+.black .v-tabsheet-minimal .v-tabsheet-spacertd div,
+.black .v-tabsheet-minimal .v-tabsheet-tabitem,
+.black .v-tabsheet-minimal .v-tabsheet-tabitem-selected  {
+	border-color: #3e4044;
+	color: #6a7f89;
+}
+.black .v-tabsheet-minimal .v-tabsheet-tabitem-selected {
+	color: #c9ccce;
+}
+.black .v-tabsheet-content-minimal,
+.black .v-tabsheet-content-bar {
+	color: #c9ccce;
+	text-shadow: #000 0 0 1px;
+}
+.black .v-tabsheet-minimal .v-tabsheet-caption-close {
+	color: #72787c;
+}
+.black .v-tabsheet-minimal .v-tabsheet-caption-close:hover {
+	color: #1d2021;
+	background: #4d5154;
+}
+.black .v-tabsheet-minimal .v-tabsheet-caption-close:active {
+	background: #626669;
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.css
new file mode 100644
index 0000000000..607b25b794
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.css
@@ -0,0 +1,160 @@
+/* Default Tabsheet styles */
+
+.v-tabsheet-tabitemcell,
+.v-tabsheet-spacertd {
+	height: 32px;
+}
+.v-tabsheet-tabitemcell {
+	background: no-repeat;
+	background-image: url(img/framed/tab-left.png); /** sprite-ref: verticals */
+	padding-left: 3px;
+}
+.v-tabsheet-tabitemcell-first {
+	padding-left: 10px;
+	background-image: url(img/framed/tab-first-left.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-tabitem,
+.v-tabsheet-spacertd div {
+	border: none;
+	height: 32px;
+	background: transparent repeat-x;
+	background-image: url(img/framed/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
+	padding: 0;
+	color: #222;
+	text-shadow: #fff 0 1px 0;
+}
+.v-tabsheet-tabitem .v-caption {
+	border: none;
+	height: 23px;
+	background: no-repeat right top;
+	background-image: url(img/framed/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */
+	padding: 9px 8px 0 6px;
+}
+.v-tabsheet-tabitem .v-caption-closable {
+	padding-right: 0;
+	padding-left: 17px;
+}
+.v-tabsheet-tabitem .v-captiontext {
+	height: 16px;
+	line-height: 16px;
+}
+.v-tabsheet-caption-close {
+	float: right;
+	width: 19px;
+	height: 18px;
+	margin: -1px -1px 0;
+	padding-left: 2px;
+	background: transparent;
+	background-image: url(img/close-btn.png); /** sprite-ref: verticals */
+	cursor: default;
+	text-indent: -999px;
+	overflow: hidden;
+}
+.v-ff .v-tabsheet-caption-close,
+.v-ie7 .v-tabsheet-caption-close {
+	margin-top: -17px;
+}
+.v-ie6 .v-tabsheet-caption-close {
+	float: none;
+}
+.v-tabsheet-caption-close:hover {
+	background-image: url(img/close-btn-hover.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-caption-close:active {
+	background-image: url(img/close-btn-pressed.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-tabitem-selected .v-tabsheet-caption-close {
+	background-image: url(img/close-btn-sel.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-tabitem-selected .v-tabsheet-caption-close:hover {
+	background-image: url(img/close-btn-sel-hover.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-tabitem-selected .v-tabsheet-caption-close:active {
+	background-image: url(img/close-btn-sel-pressed.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-tabitemcell-selected {
+	background-image: url(img/framed/tab-left-sel.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-tabitemcell-selected-first {
+	background-image: url(img/framed/tab-first-left-sel.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-tabitem-selected {
+	background-image: url(img/framed/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
+	color: #232930;
+}
+.v-tabsheet-tabitem-selected .v-caption {
+	background-image: url(img/framed/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */
+}
+.v-tabsheet-spacertd div {
+	margin-right: 4px;
+}
+.v-tabsheet-spacertd {
+	background: transparent no-repeat right top;
+	background-image: url(img/framed/tab-spacer-right.png); /** sprite-ref: verticals; sprite-alignment: right */
+}
+.v-tabsheet-content {
+	border: 1px solid #dcdcdc;
+	border-bottom: none;
+	border-top: none;
+	color: #222;
+	text-shadow: none;
+}
+.blue .v-tabsheet-content {
+	border-color: #a8bcc5;
+}
+.v-tabsheet-tabsheetpanel {
+	background: #fff;
+}
+.v-sa .v-tabsheet-content,
+.v-ff3 .v-tabsheet-content {
+	border-color: rgba(0,0,0,.1);
+}
+.v-tabsheet-deco {
+	height: 1px;
+	border-top: 1px solid #bebebe;
+	background: #e2e2e2;
+	overflow: hidden;
+}
+.blue .v-tabsheet-deco {
+	border-color: #92a3ac;
+	background: #adc2cd;
+}
+.v-sa .v-tabsheet-deco,
+.v-ff3 .v-tabsheet-deco {
+	border-top-color: rgba(0,0,0,.1);
+	background: rgba(0,0,0,.08);
+}
+
+
+/* Icons & error indicators */
+
+.v-tabsheet-tabs .v-icon,
+.v-tabsheet-tabs .v-captiontext,
+.v-tabsheet-tabs .v-errorindicator {
+	display: inline;
+	float: none;
+}
+.v-sa .v-tabsheet-tabs .v-captiontext {
+	display: inline-block;
+}
+.v-tabsheet-tabs .v-icon {
+	width: 16px !important;
+	height: 16px !important;
+}
+.v-tabsheet-tabs .v-errorindicator {
+	display: inline-block;
+	width: 13px;
+	height: 16px;
+	background: transparent url(../common/icons/error.png) no-repeat 50%;
+}
+.v-ff2 .v-tabsheet-tabs .v-icon,
+.v-ff2 .v-tabsheet-tabs .v-errorindicator {
+	display: -moz-inline-stack;
+}
+.v-ie6 .v-tabsheet-tabs .v-errorindicator {
+	background-image: url(../common/icons/error-ie6.png);
+}
+.v-ie .v-tabsheet-tabs .v-errorindicator {
+	zoom: 1;
+	display: inline;
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.css
new file mode 100644
index 0000000000..217676558e
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.css
@@ -0,0 +1,52 @@
+/* Tabsheet scroller styles */
+
+.v-tabsheet-scroller {
+	height: 31px;
+	margin-top: -31px;
+	padding: 0 3px 0 4px;
+	border-right: 1px solid #c2c2c2;
+	border-left: 1px solid #cfcfcf;
+	position: relative;
+	float: right;
+	background: transparent url(img/framed/tab-bg.png) repeat-x left -1px;
+	width: 36px;
+}
+.v-tabsheet-scroller button {
+	margin-top: 7px;
+}
+.v-tabsheet-scrollerPrev,
+.v-tabsheet-scrollerNext,
+.v-tabsheet-scrollerPrev-disabled,
+.v-tabsheet-scrollerNext-disabled {
+	border: none;
+	background: transparent;
+	background-image: url(img/tab-prev.png); /** sprite-ref: verticals */
+	width: 18px;
+	height: 17px;
+	overflow: hidden;
+	cursor: default;
+}
+.v-tabsheet-scroller button::-moz-focus-inner {
+	border: none;
+}
+.v-tabsheet-scrollerNext {
+	background-image: url(img/tab-next.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-scrollerPrev:active {
+	background-image: url(img/tab-prev-pressed.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-scrollerNext:active {
+	background-image: url(img/tab-next-pressed.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-scrollerPrev-disabled,
+.v-tabsheet-scrollerPrev-disabled:active {
+	background-image: url(img/tab-prev-disabled.png); /** sprite-ref: verticals */
+	opacity: 1;
+	filter: none;
+}
+.v-tabsheet-scrollerNext-disabled,
+.v-tabsheet-scrollerNext-disabled:active {
+	background-image: url(img/tab-next-disabled.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */
+	opacity: 1;
+	filter: none;
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css
index 289660eb3b..fddef9a287 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css
@@ -1,325 +1,5 @@
-.v-tabsheet-tabitemcell,
-.v-tabsheet-spacertd {
-	height: 32px;
-}
-.v-tabsheet-tabitemcell {
-	background: no-repeat;
-	background-image: url(img/framed/tab-left.png); /** sprite-ref: verticals */
-	padding-left: 3px;
-}
-.v-tabsheet-tabitemcell-first {
-	padding-left: 10px;
-	background-image: url(img/framed/tab-first-left.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-tabitem,
-.v-tabsheet-spacertd div {
-	border: none;
-	height: 32px;
-	background: transparent repeat-x;
-	background-image: url(img/framed/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
-	padding: 0;
-	color: #222;
-	text-shadow: #fff 0 1px 0;
-}
-.v-tabsheet-tabitem .v-caption {
-	border: none;
-	height: 23px;
-	background: no-repeat right top;
-	background-image: url(img/framed/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */
-	padding: 9px 8px 0 6px;
-}
-.v-tabsheet-tabitem .v-captiontext {
-	height: 16px;
-	line-height: 16px;
-}
-.v-tabsheet-tabitemcell-selected {
-	background-image: url(img/framed/tab-left-sel.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-tabitemcell-selected-first {
-	background-image: url(img/framed/tab-first-left-sel.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-tabitem-selected {
-	background-image: url(img/framed/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
-	color: #232930;
-}
-.v-tabsheet-tabitem-selected .v-caption {
-	background-image: url(img/framed/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */
-}
-.v-tabsheet-spacertd div {
-	margin-right: 4px;
-}
-.v-tabsheet-spacertd {
-	background: transparent no-repeat right top;
-	background-image: url(img/framed/tab-spacer-right.png); /** sprite-ref: verticals; sprite-alignment: right */
-}
-.v-tabsheet-content {
-	border: 1px solid #dcdcdc;
-	border-bottom: none;
-	border-top: none;
-	color: #222;
-	text-shadow: none;
-}
-.blue .v-tabsheet-content {
-	border-color: #a8bcc5;
-}
-.v-tabsheet-tabsheetpanel {
-	background: #fff;
-}
-.v-sa .v-tabsheet-content,
-.v-ff3 .v-tabsheet-content {
-	border-color: rgba(0,0,0,.1);
-}
-.v-tabsheet-deco {
-	height: 1px;
-	border-top: 1px solid #bebebe;
-	background: #e2e2e2;
-	overflow: hidden;
-}
-.blue .v-tabsheet-deco {
-	border-color: #92a3ac;
-	background: #adc2cd;
-}
-.v-sa .v-tabsheet-deco,
-.v-ff3 .v-tabsheet-deco {
-	border-top-color: rgba(0,0,0,.1);
-	background: rgba(0,0,0,.08);
-}
-.v-tabsheet-scroller {
-	height: 31px;
-	margin-top: -31px;
-	padding-right: 3px;
-	border-right: 1px solid #afafaf;
-	position: relative;
-	float: right;
-}
-.v-tabsheet-scroller button {
-	margin-top: 7px;
-}
-.v-tabsheet-scrollerPrev,
-.v-tabsheet-scrollerNext,
-.v-tabsheet-scrollerPrev-disabled,
-.v-tabsheet-scrollerNext-disabled {
-	border: none;
-	background: transparent;
-	background-image: url(img/tab-prev.png); /** sprite-ref: verticals */
-	width: 18px;
-	height: 17px;
-	overflow: hidden;
-	cursor: default;
-}
-.v-tabsheet-scroller button::-moz-focus-inner {
-	border: none;
-}
-.v-tabsheet-scrollerNext {
-	background-image: url(img/tab-next.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-scrollerPrev:active {
-	background-image: url(img/tab-prev-pressed.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-scrollerNext:active {
-	background-image: url(img/tab-next-pressed.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-scrollerPrev-disabled,
-.v-tabsheet-scrollerPrev-disabled:active {
-	background-image: url(img/tab-prev-disabled.png); /** sprite-ref: verticals */
-	opacity: 1;
-	filter: none;
-}
-.v-tabsheet-scrollerNext-disabled,
-.v-tabsheet-scrollerNext-disabled:active {
-	background-image: url(img/tab-next-disabled.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */
-	opacity: 1;
-	filter: none;
-}
-.v-tabsheet-tabs .v-icon,
-.v-tabsheet-tabs .v-captiontext,
-.v-tabsheet-tabs .v-errorindicator {
-	display: inline;
-	float: none;
-}
-.v-sa .v-tabsheet-tabs .v-captiontext {
-	display: inline-block;
-}
-.v-tabsheet-tabs .v-icon {
-	width: 16px !important;
-	height: 16px !important;
-}
-.v-tabsheet-tabs .v-errorindicator {
-	display: inline-block;
-	width: 13px;
-	height: 16px;
-	background: transparent url(../common/icons/error.png) no-repeat 50%;
-}
-.v-ff2 .v-tabsheet-tabs .v-icon,
-.v-ff2 .v-tabsheet-tabs .v-errorindicator {
-	display: -moz-inline-stack;
-}
-.v-ie6 .v-tabsheet-tabs .v-errorindicator {
-	background-image: url(../common/icons/error-ie6.png);
-}
-.v-ie .v-tabsheet-tabs .v-errorindicator {
-	zoom: 1;
-	display: inline;
-}
-
-
-
-
-
-
-/**
- * Minimal style --------------
- */
-.v-tabsheet-minimal .v-tabsheet-spacertd div {
-	border-bottom: 1px solid #bfbfbf;
-	height: auto;
-	background: transparent;
-}
-.v-tabsheet-minimal .v-tabsheet-tabitemcell,
-.v-tabsheet-minimal .v-tabsheet-spacertd {
-	height: auto;
-	background: transparent;
-	padding-left: 0;
-}
-.v-tabsheet-minimal .v-tabsheet-tabitem {
-	border: none;
-	border-bottom: 1px solid #bfbfbf;
-	color: #4d748f;
-	padding: 0;
-	height: auto;
-	background: transparent;
-	text-shadow: none;
-}
-.v-tabsheet-minimal .v-tabsheet-tabitem .v-caption {
-	padding: 5px 16px;
-	height: auto;
-	background: transparent;
-}
-.v-tabsheet-minimal .v-tabsheet-tabitemcell-selected {
-	background: transparent;
-}
-.v-tabsheet-minimal .v-tabsheet-tabitem-selected {
-	background: transparent;
-	border: 1px solid #bfbfbf;
-	border-bottom: none;
-	color: #222;
-}
-.v-tabsheet-minimal .v-tabsheet-tabitem-selected .v-caption {
-	background: transparent;
-	padding: 4px 15px 6px 15px;
-}
-.v-tabsheet-content-minimal {
-	border: none;
-}
-.v-tabsheet-content-minimal .v-tabsheet-tabsheetpanel {
-	background: transparent;
-}
-.v-tabsheet-deco-minimal {
-	height: 0;
-	border: none;
-}
-.v-tabsheet-minimal .v-tabsheet-scroller {
-	margin-top: -20px;
-	height: 17px;
-	padding-right: 0;
-	border-right: none;
-	position: static;
-	float: none;
-}
-.v-tabsheet-minimal .v-tabsheet-scroller button {
-	margin-top: 0;
-}
-/* Minimal tabsheet on blue background */
-.blue .v-tabsheet-minimal .v-tabsheet-spacertd div,
-.blue .v-tabsheet-minimal .v-tabsheet-tabitem,
-.blue .v-tabsheet-minimal .v-tabsheet-tabitem-selected  {
-	border-color: #7c8a91;
-}
-/* Minimal tabsheet on black background */
-.black .v-tabsheet-minimal .v-tabsheet-spacertd div,
-.black .v-tabsheet-minimal .v-tabsheet-tabitem,
-.black .v-tabsheet-minimal .v-tabsheet-tabitem-selected  {
-	border-color: #3e4044;
-	color: #6a7f89;
-}
-.black .v-tabsheet-minimal .v-tabsheet-tabitem-selected {
-	color: #c9ccce;
-}
-.black .v-tabsheet-content-minimal,
-.black .v-tabsheet-content-bar {
-	color: #c9ccce;
-	text-shadow: #000 0 0 1px;
-}
-
-
-
-
-
-
-/**
- * Bar style ---------------
- */
-.v-tabsheet-bar .v-tabsheet-tabitemcell,
-.v-tabsheet-bar .v-tabsheet-spacertd {
-	height: 20px;
-}
-.v-tabsheet-bar .v-tabsheet-spacertd {
-	background: transparent;
-}
-.v-tabsheet-bar .v-tabsheet-tabitemcell {
-	background-image: url(img/bar/tab-left.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-bar .v-tabsheet-tabitemcell-first {
-	padding-left: 6px;
-	background-image: url(img/bar/tab-first-left.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-bar .v-tabsheet-tabitem,
-.v-tabsheet-bar .v-tabsheet-spacertd div {
-	height: 20px;
-	background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
-	font-size: 11px;
-	margin: 0;
-}
-.v-tabsheet-bar .v-tabsheet-tabitem .v-caption {
-	height: 18px;
-	background-image: url(img/bar/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */
-	padding: 2px 12px 0 10px;
-}
-.v-tabsheet-bar .v-tabsheet-tabitemcell-selected {
-	background-image: url(img/bar/tab-left-sel.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-bar .v-tabsheet-tabitemcell-selected-first {
-	background-image: url(img/bar/tab-first-left-sel.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-bar .v-tabsheet-tabitem-selected {
-	background-image: url(img/bar/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
-	color: #232930;
-}
-.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-caption {
-	background-image: url(img/bar/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */
-}
-.v-tabsheet-bar .v-tabsheet-scroller {
-	margin-top: -19px;
-}
-.v-tabsheet-bar .v-tabsheet-scroller {
-	margin-top: -19px;
-	height: 17px;
-	padding-right: 0;
-	border-right: none;
-	position: static;
-	float: none;
-}
-.v-tabsheet-bar .v-tabsheet-scroller button {
-	margin-top: 0;
-}
-.v-tabsheet-content-bar {
-	border: none;
-}
-.v-tabsheet-content-bar .v-tabsheet-tabsheetpanel {
-	background: transparent;
-}
-.v-tabsheet-deco-bar {
-	height: 0;
-	border: none;
-}
-/* Content area font color specified with minimal style (reduces additional selectors) */
\ No newline at end of file
+/* These styles get catenated together on build */
+@import "tabsheet-normal-style.css";
+@import "tabsheet-scroller.css";
+@import "tabsheet-minimal-style.css";
+@import "tabsheet-bar-style.css";
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/styles.css b/WebContent/VAADIN/themes/runo/styles.css
index e2a5dd418f..8a35c1e439 100644
--- a/WebContent/VAADIN/themes/runo/styles.css
+++ b/WebContent/VAADIN/themes/runo/styles.css
@@ -1387,6 +1387,9 @@ div.v-progressindicator-indeterminate-disabled {
 .v-ff2 .v-tabsheet-scroller {
 	position: relative;
 }
+.v-disabled .v-tabsheet-scroller {
+	display: none;
+}
 .v-tabsheet-scrollerPrev,
 .v-tabsheet-scrollerNext,
 .v-tabsheet-scrollerPrev-disabled,
@@ -1412,12 +1415,26 @@ div.v-progressindicator-indeterminate-disabled {
 	zoom: 1;
 	width: 16px;
 	height: 16px;
-	background: url(../base/common/img/close.png) no-repeat;
+	text-align: center;
+	font-weight: bold;
 	cursor: pointer;
 	vertical-align: middle;
+	user-select: none;
+	-khtml-user-select: none;
+	-ms-user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
 }
-.v-disabled .v-tabsheet-caption-close {
+.v-tabsheet .v-disabled .v-tabsheet-caption-close {
 	cursor: default;
+	visibility: hidden;
+}
+.v-tabsheet-tabitemcell:hover .v-tabsheet-caption-close,
+.v-ie6 .v-tabsheet-caption-close {
+	visibility: visible;
+}
+.v-ie6 .v-tabsheet-caption-close {
+	float: right;
 }
 .v-tabsheet-tabitem {
 	border: 1px solid #aaa;
@@ -1642,9 +1659,9 @@ div.v-tree-node-leaf {
 	position: absolute;
 	top: 0;
 	right: 0;
-	width: 16px;
-	height: 16px;
-	background: url(../base/common/img/close.png) no-repeat;
+	width: 1em;
+	height: 1em;
+	background: red;
 	cursor: pointer;
 	overflow: hidden;
 }
@@ -3019,6 +3036,23 @@ div.v-tree-node-leaf {
 	padding: 16px 16px 14px 7px;
 	overflow: visible;
 }
+.v-tabsheet-caption-close {
+	margin-left: 3px;
+	margin-right: -3px;
+	width: 16px;
+	height: 16px;
+	-webkit-border-radius: 8px;
+	-moz-border-radius: 8px;
+	color: #777f85;
+	line-height: 13px;
+}
+.v-tabsheet-caption-close:hover {
+	background: #dce0e0;
+}
+.v-tabsheet-caption-close:active {
+	background: #b6bbbc;
+	color: #fff;
+}
 .v-tabsheet-content {
 	border: 1px solid #babfc0;
 	background-color: #fff;
diff --git a/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.css b/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.css
index fa99f6ae43..3b738107b2 100644
--- a/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.css
+++ b/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.css
@@ -83,6 +83,23 @@
 	padding: 16px 16px 14px 7px;
 	overflow: visible;
 }
+.v-tabsheet-caption-close {
+	margin-left: 3px;
+	margin-right: -3px;
+	width: 16px;
+	height: 16px;
+	-webkit-border-radius: 8px;
+	-moz-border-radius: 8px;
+	color: #777f85;
+	line-height: 13px;
+}
+.v-tabsheet-caption-close:hover {
+	background: #dce0e0;
+}
+.v-tabsheet-caption-close:active {
+	background: #b6bbbc;
+	color: #fff;
+}
 .v-tabsheet-content {
 	border: 1px solid #babfc0;
 	background-color: #fff;
diff --git a/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-bottom.png b/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-bottom.png
new file mode 100644
index 0000000000..976e6fad5e
--- /dev/null
+++ b/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-bottom.png
diff --git a/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-top.png b/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-top.png
new file mode 100644
index 0000000000..87a687f10f
--- /dev/null
+++ b/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-top.png
diff --git a/WebContent/VAADIN/themes/sampler/sampler/home/label-grad.png b/WebContent/VAADIN/themes/sampler/sampler/home/label-grad.png
new file mode 100644
index 0000000000..d44d24bf2c
--- /dev/null
+++ b/WebContent/VAADIN/themes/sampler/sampler/home/label-grad.png