From: Jouni Koivuviita <jouni.koivuviita@itmill.com>
Date: Thu, 12 Nov 2009 08:44:03 +0000 (+0000)
Subject: Fixes #1595: Close button on TabSheet control
X-Git-Tag: 6.7.0.beta1~2310
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=42a83baa7af1d2d5b9c739d1e6ce81e5608bdf9e;p=vaadin-framework.git

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
---

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
Binary files a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png and b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png differ
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
Binary files a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png and b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png differ
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
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-hover.png differ
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
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-pressed.png differ
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
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-hover.png differ
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
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-pressed.png differ
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
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel.png differ
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
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn.png differ
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
Binary files /dev/null and b/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-bottom.png differ
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
Binary files /dev/null and b/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-top.png differ
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
Binary files /dev/null and b/WebContent/VAADIN/themes/sampler/sampler/home/label-grad.png differ
diff --git a/src/com/vaadin/terminal/gwt/client/ui/VTabsheet.java b/src/com/vaadin/terminal/gwt/client/ui/VTabsheet.java
index f73a2d4fc1..e66bf0fbc9 100644
--- a/src/com/vaadin/terminal/gwt/client/ui/VTabsheet.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/VTabsheet.java
@@ -36,6 +36,8 @@ public class VTabsheet extends VTabsheetBase {
     private class TabSheetCaption extends VCaption {
 
         private boolean hidden = false;
+        private boolean closable = false;
+        private Element closeButton;
 
         TabSheetCaption() {
             super(null, client);
@@ -57,12 +59,29 @@ public class VTabsheet extends VTabsheetBase {
                 client.registerTooltip(VTabsheet.this, getElement(), null);
             }
 
-            return super.updateCaption(uidl);
+            boolean ret = super.updateCaption(uidl);
+
+            setClosable(uidl.hasAttribute("closable"));
+
+            return ret;
         }
 
         @Override
         public void onBrowserEvent(Event event) {
+            if (closable && event.getTypeInt() == Event.ONCLICK
+                    && event.getEventTarget().cast() == closeButton) {
+                final String tabKey = tabKeys.get(tb.getTabIndex(this))
+                        .toString();
+                if (!disabledTabKeys.contains(tabKey)) {
+                    client.updateVariable(id, "close", tabKey, true);
+                    event.stopPropagation();
+                    event.preventDefault();
+                    return;
+                }
+            }
+
             super.onBrowserEvent(event);
+
             if (event.getTypeInt() == Event.ONLOAD) {
                 // icon onloads may change total width of tabsheet
                 if (isDynamicWidth()) {
@@ -108,6 +127,35 @@ public class VTabsheet extends VTabsheetBase {
             this.hidden = hidden;
         }
 
+        public void setClosable(boolean closable) {
+            this.closable = closable;
+            if (closable && closeButton == null) {
+                closeButton = DOM.createSpan();
+                closeButton.setInnerText("x");
+                closeButton
+                        .setClassName(VTabsheet.CLASSNAME + "-caption-close");
+                getElement().insertBefore(closeButton,
+                        getElement().getLastChild());
+            } else if (!closable && closeButton != null) {
+                getElement().removeChild(closeButton);
+                closeButton = null;
+            }
+            if (closable) {
+                addStyleDependentName("closable");
+            } else {
+                removeStyleDependentName("closable");
+            }
+        }
+
+        @Override
+        public int getRequiredWidth() {
+            int width = super.getRequiredWidth();
+            if (closeButton != null) {
+                width += Util.getRequiredWidth(closeButton);
+            }
+            return width;
+        }
+
     }
 
     class TabBar extends ComplexPanel implements ClickHandler {
@@ -217,6 +265,10 @@ public class VTabsheet extends VTabsheetBase {
             return (TabSheetCaption) getWidget(index);
         }
 
+        public int getTabIndex(TabSheetCaption tab) {
+            return getChildren().indexOf(tab);
+        }
+
         public void setVisible(int index, boolean visible) {
             com.google.gwt.dom.client.Element e = getTab(index).getElement()
                     .getParentElement().getParentElement();
@@ -804,13 +856,13 @@ public class VTabsheet extends VTabsheetBase {
         // Make sure scrollerIndex is valid
         if (scrollerIndex > tb.getTabCount()) {
             scrollerIndex = getNextVisibleTab(-1);
-        } else if (tb.getTab(scrollerIndex).isHidden()) {
+        } else if (tb.getTabCount() > 0 && tb.getTab(scrollerIndex).isHidden()) {
             scrollerIndex = getNextVisibleTab(scrollerIndex);
         }
 
         boolean scrolled = isScrolledTabs();
         boolean clipped = isClippedTabs();
-        if (tb.isVisible() && (scrolled || clipped)) {
+        if (tb.getTabCount() > 0 && tb.isVisible() && (scrolled || clipped)) {
             DOM.setStyleAttribute(scroller, "display", "");
             DOM.setElementProperty(scrollerPrev, "className",
                     SCROLLER_CLASSNAME + (scrolled ? "Prev" : "Prev-disabled"));
diff --git a/src/com/vaadin/ui/TabSheet.java b/src/com/vaadin/ui/TabSheet.java
index ed81fdb655..b58e7be7bf 100644
--- a/src/com/vaadin/ui/TabSheet.java
+++ b/src/com/vaadin/ui/TabSheet.java
@@ -35,7 +35,7 @@ public class TabSheet extends AbstractComponentContainer implements
     /**
      * Linked list of component tabs.
      */
-    private final LinkedList components = new LinkedList();
+    private final LinkedList<Component> components = new LinkedList<Component>();
 
     /**
      * Map containing information related to the tabs (caption, icon etc).
@@ -54,7 +54,9 @@ public class TabSheet extends AbstractComponentContainer implements
      */
     private boolean tabsHidden;
 
-    private LinkedList paintedTabs = new LinkedList();
+    private LinkedList<Component> paintedTabs = new LinkedList<Component>();
+
+    private CloseHandler closeHandler;
 
     /**
      * Constructs a new Tabsheet. Tabsheet is immediate by default.
@@ -64,6 +66,11 @@ public class TabSheet extends AbstractComponentContainer implements
         // expand horizontally by default
         setWidth(100, UNITS_PERCENTAGE);
         setImmediate(true);
+        setCloseHandler(new CloseHandler() {
+            public void onTabClose(TabSheet tabsheet, Component c) {
+                tabsheet.removeComponent(c);
+            }
+        });
     }
 
     /**
@@ -72,7 +79,7 @@ public class TabSheet extends AbstractComponentContainer implements
      * 
      * @return the Iterator of the components inside the container.
      */
-    public Iterator getComponentIterator() {
+    public Iterator<Component> getComponentIterator() {
         return java.util.Collections.unmodifiableList(components).iterator();
     }
 
@@ -93,7 +100,7 @@ public class TabSheet extends AbstractComponentContainer implements
                 if (components.isEmpty()) {
                     selected = null;
                 } else {
-                    selected = (Component) components.getFirst();
+                    selected = components.getFirst();
                     fireSelectedTabChange();
                 }
             }
@@ -168,8 +175,9 @@ public class TabSheet extends AbstractComponentContainer implements
      */
     @Override
     public void moveComponentsFrom(ComponentContainer source) {
-        for (final Iterator i = source.getComponentIterator(); i.hasNext();) {
-            final Component c = (Component) i.next();
+        for (final Iterator<Component> i = source.getComponentIterator(); i
+                .hasNext();) {
+            final Component c = i.next();
             String caption = null;
             Resource icon = null;
             if (TabSheet.class.isAssignableFrom(source.getClass())) {
@@ -199,8 +207,8 @@ public class TabSheet extends AbstractComponentContainer implements
 
         target.startTag("tabs");
 
-        for (final Iterator i = getComponentIterator(); i.hasNext();) {
-            final Component component = (Component) i.next();
+        for (final Iterator<Component> i = getComponentIterator(); i.hasNext();) {
+            final Component component = i.next();
             Tab tab = tabs.get(component);
 
             /*
@@ -236,6 +244,10 @@ public class TabSheet extends AbstractComponentContainer implements
                 target.addAttribute("hidden", true);
             }
 
+            if (tab.isClosable()) {
+                target.addAttribute("closable", true);
+            }
+
             final Resource icon = tab.getIcon();
             if (icon != null) {
                 target.addAttribute("icon", icon);
@@ -417,6 +429,13 @@ public class TabSheet extends AbstractComponentContainer implements
             setSelectedTab((Component) keyMapper.get((String) variables
                     .get("selected")));
         }
+        if (variables.containsKey("close")) {
+            final Component tab = (Component) keyMapper.get((String) variables
+                    .get("close"));
+            if (tab != null) {
+                closeHandler.onTabClose(this, tab);
+            }
+        }
     }
 
     /* Documented in superclass */
@@ -453,8 +472,8 @@ public class TabSheet extends AbstractComponentContainer implements
         int oldLocation = -1;
         int newLocation = -1;
         int location = 0;
-        for (final Iterator i = components.iterator(); i.hasNext();) {
-            final Component component = (Component) i.next();
+        for (final Iterator<Component> i = components.iterator(); i.hasNext();) {
+            final Component component = i.next();
 
             if (component == oldComponent) {
                 oldLocation = location;
@@ -635,6 +654,23 @@ public class TabSheet extends AbstractComponentContainer implements
          */
         public void setVisible(boolean visible);
 
+        /**
+         * Returns the closability status for the tab.
+         * 
+         * @return true if the tab is allowed to be closed by the end user,
+         *         false for not allowing closing
+         */
+        public boolean isClosable();
+
+        /**
+         * Sets the closability status for the tab.
+         * 
+         * @param visible
+         *            true if the end user is allowed to close the tab, false
+         *            for not allowing to close. Should default to false.
+         */
+        public void setClosable(boolean closable);
+
         /**
          * Returns the enabled status for the tab.
          * 
@@ -710,6 +746,7 @@ public class TabSheet extends AbstractComponentContainer implements
         private Resource icon = null;
         private boolean enabled = true;
         private boolean visible = true;
+        private boolean closable = false;
         private String description = null;
         private ErrorMessage componentError = null;
 
@@ -760,6 +797,19 @@ public class TabSheet extends AbstractComponentContainer implements
             requestRepaint();
         }
 
+        public boolean isClosable() {
+            return closable;
+        }
+
+        public void setClosable(boolean closable) {
+            this.closable = closable;
+            requestRepaint();
+        }
+
+        public void close() {
+
+        }
+
         public String getDescription() {
             return description;
         }
@@ -777,6 +827,44 @@ public class TabSheet extends AbstractComponentContainer implements
             this.componentError = componentError;
             requestRepaint();
         }
+    }
+
+    /**
+     * CloseHandler is used to process tab closing events. Default behavior is
+     * to remove the tab from the TabSheet.
+     * 
+     * @author Jouni Koivuviita / IT Mill Ltd.
+     * @since 6.2.0
+     * 
+     */
+    public interface CloseHandler {
 
+        /**
+         * Called when a user has pressed the close icon of a tab in the client
+         * side widget.
+         * 
+         * @param tabsheet
+         *            the TabSheet to which the tab belongs to
+         * @param tabContent
+         *            the component that corresponds to the tab whose close
+         *            button was clicked
+         */
+        void onTabClose(final TabSheet tabsheet, final Component tabContent);
+    }
+
+    /**
+     * Provide a custom {@link CloseHandler} for this TabSheet if you wish to
+     * perform some additional tasks when a user clicks on a tabs close button,
+     * e.g. show a confirmation dialogue before removing the tab.
+     * 
+     * To remove the tab, if you provide your own close handler, you must call
+     * {@link #removeComponent(Component)} yourself.
+     * 
+     * The default CloseHandler for TabSheet will only remove the tab.
+     * 
+     * @param handler
+     */
+    public void setCloseHandler(CloseHandler handler) {
+        closeHandler = handler;
     }
 }