Standard themes in SCSS form, updated CompileDefaultTheme (#9223)

Conversion performed for most themes trivial, just rename file and wrap
in a mixin. For chameleon compounds, also nesting used. In some cases,
related small files combined in a single SCSS file

Chameleon accordion and select contain fixes other than just a missing
semicolon.

155 files changed, 1342 insertions, 584 deletions

diff --git a/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.css b/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss
index 4373c52922..ddb030c00f 100644
--- a/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.css
+++ b/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss
@@ -1,3 +1,5 @@
+@mixin base-absolutelayout {
+
 .v-absolutelayout-wrapper {
 	position: absolute;
 	overflow: hidden;
@@ -13,3 +15,5 @@
 .v-absolutelayout.v-has-width > div, .v-absolutelayout.v-has-width > div > div {
 	width: 100%;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/accordion/accordion.css b/WebContent/VAADIN/themes/base/accordion/accordion.scss
index ad762ee0ac..6f4825f16b 100644
--- a/WebContent/VAADIN/themes/base/accordion/accordion.css
+++ b/WebContent/VAADIN/themes/base/accordion/accordion.scss
@@ -1,8 +1,10 @@
+@mixin base-accordion {
+
 .v-accordion {
 	position: relative;
 	outline: none;
 	overflow: hidden;
-	text-align: left /* Force default alignment */
+	text-align: left; /* Force default alignment */
 }
 .v-accordion-item {
 	position: relative;
@@ -23,4 +25,6 @@
 .v-accordion-item-content {
 	position: absolute;
 	width: 100%;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/base.scss b/WebContent/VAADIN/themes/base/base.scss
new file mode 100644
index 0000000000..58f0c32af7
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/base.scss
@@ -0,0 +1,34 @@
+@import "absolutelayout/absolutelayout.scss";
+@import "accordion/accordion.scss";
+@import "button/button.scss";
+@import "caption/caption.scss";
+@import "common/common.scss";
+@import "csslayout/csslayout.scss";
+@import "customcomponent/customcomponent.scss";
+@import "customlayout/customlayout.scss";
+@import "datefield/datefield.scss";
+@import "dragwrapper/dragwrapper.scss";
+@import "embedded/embedded.scss";
+@import "formlayout/formlayout.scss";
+@import "gridlayout/gridlayout.scss";
+@import "label/label.scss";
+@import "link/link.scss";
+@import "loginform/loginform.scss";
+@import "menubar/menubar.scss";
+@import "notification/notification.scss";
+@import "orderedlayout/orderedlayout.scss";
+@import "paintable/paintable.scss";
+@import "panel/panel.scss";
+@import "popupview/popupview.scss";
+@import "progressindicator/progressindicator.scss";
+@import "select/select.scss";
+@import "shadow/shadow.scss";
+@import "slider/slider.scss";
+@import "splitpanel/splitpanel.scss";
+@import "table/table.scss";
+@import "tabsheet/tabsheet.scss";
+@import "textfield/textfield.scss";
+@import "tree/tree.scss";
+@import "treetable/treetable.scss";
+@import "upload/upload.scss";
+@import "window/window.scss";
diff --git a/WebContent/VAADIN/themes/base/button/button.css b/WebContent/VAADIN/themes/base/button/button.scss
index 2e14d59a90..1d3c4abec1 100644
--- a/WebContent/VAADIN/themes/base/button/button.css
+++ b/WebContent/VAADIN/themes/base/button/button.scss
@@ -1,3 +1,5 @@
+@mixin base-button {
+
 /*
  * Default button (more customizable)
  * -------------------------------------- */
@@ -156,4 +158,6 @@
 .v-checkbox-required {
 	background: #ffe0e0;
 }
-*/
\ No newline at end of file
+*/
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/caption/caption.css b/WebContent/VAADIN/themes/base/caption/caption.scss
index 364b68a226..c6fd124ad6 100644
--- a/WebContent/VAADIN/themes/base/caption/caption.css
+++ b/WebContent/VAADIN/themes/base/caption/caption.scss
@@ -1,3 +1,5 @@
+@mixin base-caption {
+
 .v-captionwrapper {
 	text-align: left; /* Force default alignment */
 }
@@ -21,3 +23,5 @@
 .v-caption .v-required-field-indicator {
 	display: inline-block;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/common/common.css b/WebContent/VAADIN/themes/base/common/common.scss
index d2695a8015..40bea2c9d6 100644
--- a/WebContent/VAADIN/themes/base/common/common.css
+++ b/WebContent/VAADIN/themes/base/common/common.scss
@@ -1,3 +1,5 @@
+@mixin base-common {
+
 /* References the BODY tag generated by Vaadin application servlet */
 .v-generated-body {
 	width: 100%;
@@ -249,3 +251,5 @@ div.v-app-loading {
 .v-scrollable {
 	overflow: auto;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/csslayout/csslayout.css b/WebContent/VAADIN/themes/base/csslayout/csslayout.scss
index 064edd28a4..7bd26d4197 100644
--- a/WebContent/VAADIN/themes/base/csslayout/csslayout.css
+++ b/WebContent/VAADIN/themes/base/csslayout/csslayout.scss
@@ -1,3 +1,5 @@
+@mixin base-csslayout {
+
 .v-csslayout {
 	overflow: hidden;
 }
@@ -25,4 +27,6 @@
 }
 .v-csslayout-margin-right {
 	padding-right: 12px;	
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/customcomponent/customcomponent.css b/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss
index f6cfd31390..aaf3e75251 100644
--- a/WebContent/VAADIN/themes/base/customcomponent/customcomponent.css
+++ b/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss
@@ -1,3 +1,7 @@
+@mixin base-customcomponent {
+
 .v-customcomponent {
 	overflow: hidden;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/customlayout/customlayout.css b/WebContent/VAADIN/themes/base/customlayout/customlayout.scss
index b9c20dbbf8..26e1538d29 100644
--- a/WebContent/VAADIN/themes/base/customlayout/customlayout.css
+++ b/WebContent/VAADIN/themes/base/customlayout/customlayout.scss
@@ -1,3 +1,7 @@
+@mixin base-customlayout {
+
 .v-customlayout {
 	overflow: hidden;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/datefield/datefield.css b/WebContent/VAADIN/themes/base/datefield/datefield.scss
index 7af440c735..12ce3df980 100644
--- a/WebContent/VAADIN/themes/base/datefield/datefield.css
+++ b/WebContent/VAADIN/themes/base/datefield/datefield.scss
@@ -1,3 +1,5 @@
+@mixin base-datefield {
+
 .v-datefield {
 	white-space: nowrap;
 	float: left; /* Force minimum width */
@@ -87,3 +89,5 @@
 	background-color: #ffe0e0;
 }
 */
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.css b/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss
index 2061fec8c3..558b305742 100644
--- a/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.css
+++ b/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss
@@ -1,3 +1,5 @@
+@mixin base-dragwrapper {
+
 .v-ddwrapper {
 	padding: 2px;
 	-moz-border-radius: 4px;
@@ -156,3 +158,5 @@
 .no-vertical-drag-hints .v-ddwrapper-over-bottom:after {
 	display: none;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/embedded/embedded.css b/WebContent/VAADIN/themes/base/embedded/embedded.scss
index eea5937e59..53faaef2e8 100644
--- a/WebContent/VAADIN/themes/base/embedded/embedded.css
+++ b/WebContent/VAADIN/themes/base/embedded/embedded.scss
@@ -1,5 +1,8 @@
+@mixin base-embedded {
 
 .v-table .v-embedded-image {
     /* make embeddeds be centered in centered table cells. */
 	display: inline-block;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/formlayout/formlayout.css b/WebContent/VAADIN/themes/base/formlayout/formlayout.scss
index 755a59bc89..a45840ebab 100644
--- a/WebContent/VAADIN/themes/base/formlayout/formlayout.css
+++ b/WebContent/VAADIN/themes/base/formlayout/formlayout.scss
@@ -1,3 +1,5 @@
+@mixin base-formlayout {
+
 .v-formlayout.v-has-width > table {
 	width: 100%;
 }
@@ -49,4 +51,6 @@
 }
 .v-formlayout-captioncell .v-caption .v-required-field-indicator {
 	float: none;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/gridlayout/gridlayout.css b/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss
index 9edaf152a0..72f7437e6e 100644
--- a/WebContent/VAADIN/themes/base/gridlayout/gridlayout.css
+++ b/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss
@@ -1,3 +1,5 @@
+@mixin base-gridlayout {
+
 .v-gridlayout {
 	position: relative;
 }
@@ -29,3 +31,5 @@
 .v-gridlayout-spacing-off {
 	overflow: hidden;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/label/label.css b/WebContent/VAADIN/themes/base/label/label.scss
index 366dbdf26f..e4f3f89062 100644
--- a/WebContent/VAADIN/themes/base/label/label.css
+++ b/WebContent/VAADIN/themes/base/label/label.scss
@@ -1,3 +1,7 @@
+@mixin base-label {
+
 .v-label {
 	overflow: hidden;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/link/link.css b/WebContent/VAADIN/themes/base/link/link.scss
index 322fb3e7ba..710f95d832 100644
--- a/WebContent/VAADIN/themes/base/link/link.css
+++ b/WebContent/VAADIN/themes/base/link/link.scss
@@ -1,3 +1,5 @@
+@mixin base-link {
+
 .v-link {
 	white-space: nowrap;	
 }
@@ -15,4 +17,6 @@
 .v-link img {
 	vertical-align: middle;
 	border:none;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/loginform/loginform.css b/WebContent/VAADIN/themes/base/loginform/loginform.scss
index 109d1a0a69..d2784fad47 100644
--- a/WebContent/VAADIN/themes/base/loginform/loginform.css
+++ b/WebContent/VAADIN/themes/base/loginform/loginform.scss
@@ -1,3 +1,5 @@
+@mixin base-loginform {
+
 .v-loginform {
 	height: 140px;
 	width: 200px;
@@ -6,4 +8,6 @@
 .v-app-loginpage .v-button,
 .v-app-loginpage .v-button {
 	float: left; /* Force minimum width for button */
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/menubar/menubar.css b/WebContent/VAADIN/themes/base/menubar/menubar.scss
index 943d0dcc21..79b94a63af 100644
--- a/WebContent/VAADIN/themes/base/menubar/menubar.css
+++ b/WebContent/VAADIN/themes/base/menubar/menubar.scss
@@ -1,3 +1,5 @@
+@mixin base-menubar {
+
 .v-menubar {
 	float: left; /* Force minimum width */
 	white-space: nowrap;
@@ -92,3 +94,5 @@
 .v-menubar-submenu .v-menubar-menuitem-checked .v-menubar-menuitem-caption { 
 	background: transparent url(img/check.gif) no-repeat left;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/notification/notification.css b/WebContent/VAADIN/themes/base/notification/notification.scss
index ccd5b8d218..e67ac14050 100644
--- a/WebContent/VAADIN/themes/base/notification/notification.css
+++ b/WebContent/VAADIN/themes/base/notification/notification.scss
@@ -1,3 +1,5 @@
+@mixin base-notification {
+
 .v-Notification {
 	background: #999;
 	color: #fff;
@@ -37,3 +39,5 @@
 	display: block;
 	margin: 0;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/orderedlayout/orderedlayout.css b/WebContent/VAADIN/themes/base/orderedlayout/orderedlayout.scss
index 727ca92f72..7820d842fc 100644
--- a/WebContent/VAADIN/themes/base/orderedlayout/orderedlayout.css
+++ b/WebContent/VAADIN/themes/base/orderedlayout/orderedlayout.scss
@@ -1,3 +1,5 @@
+@mixin base-orderedlayout {
+
 .v-orderedlayout,
 .v-horizontallayout,
 .v-verticallayout {
@@ -41,3 +43,5 @@
 .v-horizontallayout-slot, .v-verticallayout-slot {
 	position: absolute;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/paintable/paintable.css b/WebContent/VAADIN/themes/base/paintable/paintable.scss
index 41fc0ef287..87431ee225 100644
--- a/WebContent/VAADIN/themes/base/paintable/paintable.css
+++ b/WebContent/VAADIN/themes/base/paintable/paintable.scss
@@ -1,5 +1,9 @@
+@mixin base-paintable {
+
 .v-connector {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/panel/panel.css b/WebContent/VAADIN/themes/base/panel/panel.scss
index d5a9915490..93d82cd615 100644
--- a/WebContent/VAADIN/themes/base/panel/panel.css
+++ b/WebContent/VAADIN/themes/base/panel/panel.scss
@@ -1,3 +1,5 @@
+@mixin base-panel {
+
 .v-panel,
 .v-panel-caption,
 .v-panel-content,
@@ -7,7 +9,7 @@
 .v-panel-content-light,
 .v-panel-deco-light {
 	outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */
-	text-align: left /* Force default alignment */
+	text-align: left; /* Force default alignment */
 }
 .v-panel-caption .v-errorindicator {
 	float: none;
@@ -40,4 +42,6 @@
 	height: 100%;
 }
 .v-panel-deco {
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/popupview/popupview.css b/WebContent/VAADIN/themes/base/popupview/popupview.scss
index 8e31681c2d..e192d0d147 100644
--- a/WebContent/VAADIN/themes/base/popupview/popupview.css
+++ b/WebContent/VAADIN/themes/base/popupview/popupview.scss
@@ -1,3 +1,5 @@
+@mixin base-popupview {
+
 .v-popupview {
 	cursor: pointer;
 	text-decoration: underline;
@@ -10,4 +12,6 @@
 	width: 30px;
 	height: 30px;
 	background: transparent url(../common/img/ajax-loader-medium.gif) no-repeat 50%;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/progressindicator/progressindicator.css b/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss
index 4037802cf2..4c1483886b 100644
--- a/WebContent/VAADIN/themes/base/progressindicator/progressindicator.css
+++ b/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss
@@ -1,3 +1,5 @@
+@mixin base-progressindicator {
+
 .v-progressindicator {
 	width: 150px;
 }
@@ -28,4 +30,6 @@ div.v-progressindicator-indeterminate-disabled {
 	height: 20px;
 	width: 20px;
 	background: transparent;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/select/select.css b/WebContent/VAADIN/themes/base/select/select.scss
index b9d0dda51f..d6ef6d3585 100644
--- a/WebContent/VAADIN/themes/base/select/select.css
+++ b/WebContent/VAADIN/themes/base/select/select.scss
@@ -1,3 +1,5 @@
+@mixin base-select {
+
 .v-select {
 	text-align: left;
 }
@@ -161,4 +163,6 @@
 .v-select-required .v-select-twincol-options {
 	background: #ffaaaa;
 }
-*/
\ No newline at end of file
+*/
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/shadow/shadow.css b/WebContent/VAADIN/themes/base/shadow/shadow.scss
index c576a026bd..4e1085aa5a 100644
--- a/WebContent/VAADIN/themes/base/shadow/shadow.css
+++ b/WebContent/VAADIN/themes/base/shadow/shadow.scss
@@ -1,3 +1,5 @@
+@mixin base-shadow {
+
 .v-shadow {
 	position: absolute;
 }
@@ -66,3 +68,5 @@
     width: 10px;          height: 10px;
     background: transparent url(img/bottom-right.png);
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/slider/slider.css b/WebContent/VAADIN/themes/base/slider/slider.scss
index 1be474f04e..0c65bf1e73 100644
--- a/WebContent/VAADIN/themes/base/slider/slider.css
+++ b/WebContent/VAADIN/themes/base/slider/slider.scss
@@ -1,3 +1,5 @@
+@mixin base-slider {
+
 .v-slider {
 	margin: 5px 0;
 }
@@ -63,3 +65,5 @@
 	background: #FFE0E0;
 }
 */
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/splitpanel/splitpanel.css b/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss
index 7831a8d9ce..2c3e578b0b 100644
--- a/WebContent/VAADIN/themes/base/splitpanel/splitpanel.css
+++ b/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss
@@ -1,3 +1,5 @@
+@mixin base-splitpanel {
+
 .v-splitpanel-horizontal,
 .v-splitpanel-vertical {
 	overflow: hidden;
@@ -29,3 +31,5 @@
 .v-disabled .v-splitpanel-vsplitter div {
 	cursor: default;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/styles.scss b/WebContent/VAADIN/themes/base/styles.scss
new file mode 100644
index 0000000000..89f76947f8
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/styles.scss
@@ -0,0 +1,45 @@
+@import "base.scss";
+
+// @include base-app;
+
+// everything included from base theme
+// other themes should enclose corresponding definitions in theme selectors 
+
+@include base-absolutelayout;
+@include base-accordion;
+@include base-button;
+@include base-caption;
+
+// here for now to preserve old semantics
+@include base-common;
+
+@include base-csslayout;
+@include base-customcomponent;
+@include base-customlayout;
+@include base-datefield;
+@include base-dragwrapper;
+@include base-embedded;
+@include base-formlayout;
+@include base-gridlayout;
+@include base-label;
+@include base-link;
+@include base-loginform;
+@include base-menubar;
+@include base-notification;
+@include base-orderedlayout;
+@include base-paintable;
+@include base-panel;
+@include base-popupview;
+@include base-progressindicator;
+@include base-select;
+@include base-shadow;
+@include base-slider;
+@include base-splitpanel;
+@include base-table;
+@include base-tabsheet;
+@include base-textfield;
+@include base-richtextarea;
+@include base-tree;
+@include base-treetable;
+@include base-upload;
+@include base-window;
diff --git a/WebContent/VAADIN/themes/base/table/table.css b/WebContent/VAADIN/themes/base/table/table.scss
index 55728e3264..d521b5ebae 100644
--- a/WebContent/VAADIN/themes/base/table/table.css
+++ b/WebContent/VAADIN/themes/base/table/table.scss
@@ -1,3 +1,5 @@
+@mixin base-table {
+
 /* Table theme building instructions
  * 
  * Vaadin scroll table is very complex widget with dozens of features. These 
@@ -241,11 +243,6 @@
 .v-off {
 	color: #ddd;
 }
-
-.v-table .v-checkbox {
-	display: inline-block;
-}
-
 /*************************************
  * Drag'n'drop styles
  *************************************/
@@ -281,4 +278,6 @@
 .v-ff .v-table-row-drag-bottom .v-table-cell-content:first-child:after,
 .v-ie .v-table-row-drag-bottom .v-table-cell-content:first-child:after {
 	margin-top: -2px;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/tabsheet/tabsheet.css b/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss
index d369cd99f0..c58c25be58 100644
--- a/WebContent/VAADIN/themes/base/tabsheet/tabsheet.css
+++ b/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss
@@ -1,8 +1,10 @@
+@mixin base-tabsheet {
+
 .v-tabsheet,
 .v-tabsheet-content,
 .v-tabsheet-deco {
 	outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */
-	text-align: left /* Force default alignment */
+	text-align: left; /* Force default alignment */
 }
 .v-tabsheet-tabs {
 	empty-cells: hide;
@@ -121,4 +123,6 @@
 }
 .v-tabsheet-hidetabs .v-tabsheet-deco {
 	height: 0;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/textfield/textfield-normal.css b/WebContent/VAADIN/themes/base/textfield/textfield-normal.css
deleted file mode 100644
index 557a960c76..0000000000
--- a/WebContent/VAADIN/themes/base/textfield/textfield-normal.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.v-textfield {
-	text-align: left /* Force default alignment */
-}
-.v-textarea {
-	resize: none;
-}
-.v-textfield-focus,
-.v-textarea-focus {
-}
-input.v-textfield-prompt,
-textarea.v-textarea-prompt {
-	color: #999;
-	font-style: italic;
-}
-input.v-textfield-readonly,
-textarea.v-textarea-readonly {
-	background: transparent;
-	border: none;
-	resize: none;
-}
-input.v-disabled,
-textarea.v-disabled {
-	resize: none;
-}
-input.v-textfield-readonly:focus,
-textarea.v-textarea-readonly:focus {
-	outline: none;
-}
-/* Disabled by default
-.v-textarea-error,
-.v-textfield-error,
-.v-richtextarea-error iframe.gwt-RichTextArea {
-	background: #FFE0E0;	
-}
-*/
-/* Disabled by default
-.v-textarea-required,
-.v-textfield-required,
-.v-richtextarea-required iframe.gwt-RichTextArea {
-	background: #FFE0E0;	
-}
-*/
-/* Safari focus glow fix */
-.v-sa input:focus, 
-.v-sa textarea:focus {
-	outline-width: medium;
-}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/textfield/textfield.css b/WebContent/VAADIN/themes/base/textfield/textfield.css
deleted file mode 100644
index 956b302efe..0000000000
--- a/WebContent/VAADIN/themes/base/textfield/textfield.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "textfield-normal.css";
-@import "richtext.css";
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/textfield/richtext.css b/WebContent/VAADIN/themes/base/textfield/textfield.scss
index 6a236886cc..b8e54e6887 100644
--- a/WebContent/VAADIN/themes/base/textfield/richtext.css
+++ b/WebContent/VAADIN/themes/base/textfield/textfield.scss
@@ -1,3 +1,61 @@
+// textfield-normal.css
+
+@mixin base-textfield {
+
+.v-textfield {
+	text-align: left; /* Force default alignment */
+}
+.v-textarea {
+	resize: none;
+}
+.v-textfield-focus,
+.v-textarea-focus {
+}
+input.v-textfield-prompt,
+textarea.v-textarea-prompt {
+	color: #999;
+	font-style: italic;
+}
+input.v-textfield-readonly,
+textarea.v-textarea-readonly {
+	background: transparent;
+	border: none;
+	resize: none;
+}
+input.v-disabled,
+textarea.v-disabled {
+	resize: none;
+}
+input.v-textfield-readonly:focus,
+textarea.v-textarea-readonly:focus {
+	outline: none;
+}
+/* Disabled by default
+.v-textarea-error,
+.v-textfield-error,
+.v-richtextarea-error iframe.gwt-RichTextArea {
+	background: #FFE0E0;	
+}
+*/
+/* Disabled by default
+.v-textarea-required,
+.v-textfield-required,
+.v-richtextarea-required iframe.gwt-RichTextArea {
+	background: #FFE0E0;	
+}
+*/
+/* Safari focus glow fix */
+.v-sa input:focus, 
+.v-sa textarea:focus {
+	outline-width: medium;
+}
+
+}
+
+// richtext.css
+
+@mixin base-richtextarea {
+
 .v-richtextarea {
 	border: 1px solid #aaa;
 	overflow: hidden;
@@ -55,4 +113,6 @@
 
 .v-richtextarea-readonly {
 	border: none;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/tree/tree-connectors.css b/WebContent/VAADIN/themes/base/tree/tree-connectors.css
deleted file mode 100644
index c60e41c48b..0000000000
--- a/WebContent/VAADIN/themes/base/tree/tree-connectors.css
+++ /dev/null
@@ -1,35 +0,0 @@
-/* Make item caption height an even number (so that the connector dots overlap nicely) */
-.v-tree-connectors .v-tree-node-caption {
-	padding-top: 1px;
-}
-.v-tree-connectors .v-tree-node {
-	background: transparent url(img/connector-expand.png) no-repeat 2px -52px;
-}
-.v-tree-connectors .v-tree-node-expanded {
-	background: transparent url(img/connector-collapse.png) no-repeat 2px -52px;
-}
-.v-tree-connectors .v-tree-node-last {
-	background: transparent url(img/connector-expand-last.png) no-repeat 2px -52px;
-}
-.v-tree-connectors .v-tree-node-expanded.v-tree-node-last {
-	background: transparent url(img/connector-collapse-last.png) no-repeat 2px -52px;
-}
-.v-tree-connectors .v-tree-node-leaf {
-	background: transparent url(img/connector-leaf.png) repeat-y 2px 50%;
-}
-.v-tree-connectors .v-tree-node-leaf-last {
-	background: transparent url(img/connector-leaf-last.png) repeat-y 2px 50%;
-}
-.v-tree-connectors .v-tree-node-children {
-	background: transparent url(img/connector.png) repeat-y 2px 0;
-}
-.v-tree-connectors .v-tree-node-children-last {
-	background: transparent;
-}
-.v-tree-connectors .v-tree-node-drag-top,
-.v-tree-connectors .v-tree-node-expanded.v-tree-node-drag-top {
-	background-position: 2px -53px;
-}
-.v-tree-connectors .v-tree-node-drag-top.v-tree-node-leaf {
-	background-position: 2px 50%;
-}
diff --git a/WebContent/VAADIN/themes/base/tree/tree.css b/WebContent/VAADIN/themes/base/tree/tree.css
deleted file mode 100644
index 59987731b0..0000000000
--- a/WebContent/VAADIN/themes/base/tree/tree.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "tree-default.css";
-@import "tree-connectors.css";
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/tree/tree-default.css b/WebContent/VAADIN/themes/base/tree/tree.scss
index 23721c77ae..0319bbe994 100644
--- a/WebContent/VAADIN/themes/base/tree/tree-default.css
+++ b/WebContent/VAADIN/themes/base/tree/tree.scss
@@ -1,3 +1,7 @@
+@mixin base-tree {
+
+// tree-default.css
+
 .v-tree {
 	text-align: left; /* Force default alignment */
 	overflow: hidden;
@@ -37,9 +41,9 @@ div.v-tree-node-leaf {
 .v-tree-node-children {
 	padding-left: 1em;
 }
-/***************************************
- * Drag'n'drop styles
- ***************************************/
+
+// Drag'n'drop styles
+
 .v-tree .v-tree-node-drag-top {
 	border-top: 2px solid #1d9dff;
 	margin-top: -1px;
@@ -92,4 +96,46 @@ div.v-tree-node-leaf {
 .v-tree .v-tree-node-drag-top,
 .v-tree .v-tree-node-drag-bottom {
 	border-color: rgba(0,109,232,.6);
+}
+
+// tree-connectors.css
+
+.v-tree-connectors {
+	// Make item caption height an even number (so that the connector dots overlap nicely)
+	.v-tree-node-caption {
+		padding-top: 1px;
+	}
+	.v-tree-node {
+		background: transparent url(img/connector-expand.png) no-repeat 2px -52px;
+	}
+	.v-tree-node-expanded {
+		background: transparent url(img/connector-collapse.png) no-repeat 2px -52px;
+	}
+	.v-tree-node-last {
+		background: transparent url(img/connector-expand-last.png) no-repeat 2px -52px;
+	}
+	.v-tree-node-expanded.v-tree-node-last {
+		background: transparent url(img/connector-collapse-last.png) no-repeat 2px -52px;
+	}
+	.v-tree-node-leaf {
+		background: transparent url(img/connector-leaf.png) repeat-y 2px 50%;
+	}
+	.v-tree-node-leaf-last {
+		background: transparent url(img/connector-leaf-last.png) repeat-y 2px 50%;
+	}
+	.v-tree-node-children {
+		background: transparent url(img/connector.png) repeat-y 2px 0;
+	}
+	.v-tree-node-children-last {
+		background: transparent;
+	}
+	.v-tree-node-drag-top,
+	.v-tree-node-expanded.v-tree-node-drag-top {
+		background-position: 2px -53px;
+	}
+	.v-tree-node-drag-top.v-tree-node-leaf {
+		background-position: 2px 50%;
+	}
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/treetable/treetable.css b/WebContent/VAADIN/themes/base/treetable/treetable.scss
index 4d9ad5031b..30e6b9ccbd 100644
--- a/WebContent/VAADIN/themes/base/treetable/treetable.css
+++ b/WebContent/VAADIN/themes/base/treetable/treetable.scss
@@ -1,3 +1,5 @@
+@mixin base-treetable {
+
 .v-treetable-treespacer {
     display: inline-block;
     background: transparent;
@@ -63,3 +65,5 @@ div table.v-treetable-animation-clone tr.v-table-row td.v-table-cell-content,
 div table.v-treetable-animation-clone tr.v-table-row-odd td.v-table-cell-content {
 	visibility: visible;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/upload/upload.css b/WebContent/VAADIN/themes/base/upload/upload.scss
index adc5751d7c..e5d94ce678 100644
--- a/WebContent/VAADIN/themes/base/upload/upload.css
+++ b/WebContent/VAADIN/themes/base/upload/upload.scss
@@ -1,3 +1,5 @@
+@mixin base-upload {
+
 .v-upload {
 	white-space: nowrap;
 }
@@ -33,4 +35,5 @@
 	width: 100%;
 	text-align: left;
 }
-  
\ No newline at end of file
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/window/window.css b/WebContent/VAADIN/themes/base/window/window.scss
index d728e7f60e..33e54b046f 100644
--- a/WebContent/VAADIN/themes/base/window/window.css
+++ b/WebContent/VAADIN/themes/base/window/window.scss
@@ -1,3 +1,5 @@
+@mixin base-window {
+
 .v-window {
 	background: #fff;
 }
@@ -160,3 +162,5 @@ div.v-window-header {
     width: 28px;          height: 28px;
     background: transparent url(img/shadow/bottom-right.png);
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/chameleon.scss b/WebContent/VAADIN/themes/chameleon/chameleon.scss
new file mode 100644
index 0000000000..16f95bbbb4
--- /dev/null
+++ b/WebContent/VAADIN/themes/chameleon/chameleon.scss
@@ -0,0 +1,10 @@
+// this file just defines all chameleon mixins by importing them
+
+// common (mostly application or page level) parts of the theme
+
+@import "common/common.scss";
+
+// components - can override or replace in user themes
+
+@import "components/components.scss";
+@import "compound/compound.scss";
diff --git a/WebContent/VAADIN/themes/chameleon/common/common.css b/WebContent/VAADIN/themes/chameleon/common/common.css
deleted file mode 100644
index 9d5a64b2ad..0000000000
--- a/WebContent/VAADIN/themes/chameleon/common/common.css
+++ /dev/null
@@ -1,157 +0,0 @@
-/*
- * Base theme is automatically included in the compiled theme.
- * @import "../../base/styles.css";
- */
-
-/*******************************************************************************
- * App background & tooltip
- ******************************************************************************/
-
-.v-app {
-	background: transparent;
-	overflow: hidden;
-	}
-
-.v-view {
-	margin-top: 0;
-	border-top: none;
-	}
-
-.v-tooltip {
-	background: #fdfdee;
-	border: 1px solid #c0c0b9;
-	padding: 1px 5px;
-	color: #222;
-	font-size: 0.9em;
-	line-height: normal;
-	-webkit-border-radius: 4px;
-	-moz-border-radius: 4px;
-	}
-
-.v-sa .v-tooltip {
-	outline: 1px solid rgba(0,0,0,.2);
-	-webkit-border-radius: 0;
-	-moz-border-radius: 0;
-	border: none;
-	}
-
-
-/*******************************************************************************
- * Global fonts
- ******************************************************************************/
-
-/* First all the containers that have other components inside them, and are 
- * possibly overlay elements (which reside inside the BODY element, not the .v-app element)
- */
-/* Then come all other overlay elements, that do not have other arbitrary 
- * components inside them (from v-filterselect-suggestpopup onwards) */
-.v-app,
-.v-window,
-.v-popupview-popup,
-.v-tooltip,
-.v-app input,
-.v-app select,
-.v-app button,
-.v-app textarea,
-.v-window input,
-.v-window select,
-.v-window button,
-.v-window textarea,
-.v-popupview-popup input,
-.v-popupview-popup select,
-.v-popupview-popup button,
-.v-popupview-popup textarea,
-.v-filterselect-suggestpopup,
-.v-datefield-popup,
-.v-contextmenu,
-.v-Notification,
-.v-menubar-submenu,
-.v-table-header-drag,
-.v-menubar-submenu,
-.v-drag-element {
-	font-family: Arial, Helvetica, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
-	font-size: 13px;
-	line-height: 1.4;
-	color: #222;
-	}
-
-
-
-/*******************************************************************************
- * Generic overlay elements
- ******************************************************************************/
-.v-window,
-.v-popupview-popup,
-.v-filterselect-suggestpopup,
-.v-datefield-popup,
-.v-contextmenu,
-.v-Notification,
-.v-menubar-submenu {
-	background: #fff url(../img/grad-light-top.png) repeat-x;
-	background-color: rgba(255,255,255,.85);
-	border: 1px solid #adadad;
-	border-color: rgba(0,0,0,.4);
-	border-radius: 4px;
-	-webkit-border-radius: 4px;
-	-moz-border-radius: 4px;
-	overflow: hidden;
-	}
-
-.v-filterselect-suggestpopup,
-.v-contextmenu,
-.v-menubar-submenu {
-	padding: 3px 0;
-	}
-
-.v-contextmenu .gwt-MenuItem,
-.v-filterselect-suggestpopup .gwt-MenuItem,
-.v-menubar-submenu .v-menubar-menuitem {
-	padding: .05em .7em;
-	user-select: none;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	cursor: default;
-	}
-
-.v-contextmenu td.gwt-MenuItem-selected div,
-.v-filterselect-suggestpopup td.gwt-MenuItem-selected,
-.v-table .v-table-body .v-selected,
-.v-menubar-submenu span.v-menubar-menuitem-selected {
-	text-shadow: none;
-	}
-
-.v-contextmenu .gwt-MenuItem-selected,
-.v-filterselect-suggestpopup .gwt-MenuItem-selected,
-.v-table .v-selected,
-.v-menubar-submenu .v-menubar-menuitem-selected {
-	background-color: #333;
-	}
-
-.v-contextmenu .gwt-MenuItem-selected div {
-	background: transparent;
-	}
-
-
-/*******************************************************************************
- * Misc. generics
- ******************************************************************************/
-.v-errorindicator {
-	width: 13px;
-	height: 1.4em;
-	background: transparent url(../img/error-indicator.png) no-repeat right 50%;
-	}
-
-.v-caption-small .v-errorindicator {
-	height: 1.2em;
-	}
-
-.v-caption-big .v-errorindicator {
-	height: 1.8em;
-	}
-
-.v-tooltip .v-errormessage {
-	color: #b2320b;
-	padding-left: 14px;
-	background: transparent url(../img/error-indicator.png) no-repeat 0 50%;
-	}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/common/common.scss b/WebContent/VAADIN/themes/chameleon/common/common.scss
new file mode 100644
index 0000000000..a7878b38ec
--- /dev/null
+++ b/WebContent/VAADIN/themes/chameleon/common/common.scss
@@ -0,0 +1,164 @@
+// this file defines the common chameleon mixin any related variables etc.
+
+$chameleon-app-background: transparent;
+
+$chameleon-font-family: Arial, Helvetica, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
+$chameleon-font-size: 13px;
+$chameleon-line-height: 1.4;
+
+
+// rules on the application level, above theme selection
+@mixin chameleon-app {
+	// App background & tooltip
+	.v-app {
+		background: transparent;
+		overflow: hidden;
+		}
+	
+	.v-view {
+		margin-top: 0;
+		border-top: none;
+		}
+	
+	.v-tooltip {
+		background: #fdfdee;
+		border: 1px solid #c0c0b9;
+		padding: 1px 5px;
+		color: #222;
+		font-size: 0.9em;
+		line-height: normal;
+		-webkit-border-radius: 4px;
+		-moz-border-radius: 4px;
+		}
+	
+	.v-sa .v-tooltip {
+		outline: 1px solid rgba(0,0,0,.2);
+		-webkit-border-radius: 0;
+		-moz-border-radius: 0;
+		border: none;
+		}
+
+	// TODO move most of the rest to chameleon-common
+
+	// Global fonts
+	
+	// First all the containers that have other components inside them, and are 
+	// possibly overlay elements (which reside inside the BODY element, not the .v-app element)
+	
+	// Then come all other overlay elements, that do not have other arbitrary 
+	// components inside them (from v-filterselect-suggestpopup onwards)
+	
+	.v-app,
+	.v-window,
+	.v-popupview-popup,
+	.v-tooltip,
+	.v-app input,
+	.v-app select,
+	.v-app button,
+	.v-app textarea,
+	.v-window input,
+	.v-window select,
+	.v-window button,
+	.v-window textarea,
+	.v-popupview-popup input,
+	.v-popupview-popup select,
+	.v-popupview-popup button,
+	.v-popupview-popup textarea,
+	.v-filterselect-suggestpopup,
+	.v-datefield-popup,
+	.v-contextmenu,
+	.v-Notification,
+	.v-menubar-submenu,
+	.v-table-header-drag,
+	.v-menubar-submenu,
+	.v-drag-element {
+		font-family: $chameleon-font-family;
+		font-size: $chameleon-font-size;
+		line-height: $chameleon-line-height;
+		color: #222;
+		}
+	
+	
+	
+	// Generic overlay elements
+	
+	.v-window,
+	.v-popupview-popup,
+	.v-filterselect-suggestpopup,
+	.v-datefield-popup,
+	.v-contextmenu,
+	.v-Notification,
+	.v-menubar-submenu {
+		background: #fff url(../img/grad-light-top.png) repeat-x;
+		background-color: rgba(255,255,255,.85);
+		border: 1px solid #adadad;
+		border-color: rgba(0,0,0,.4);
+		border-radius: 4px;
+		-webkit-border-radius: 4px;
+		-moz-border-radius: 4px;
+		overflow: hidden;
+		}
+	
+	.v-filterselect-suggestpopup,
+	.v-contextmenu,
+	.v-menubar-submenu {
+		padding: 3px 0;
+		}
+	
+	.v-contextmenu .gwt-MenuItem,
+	.v-filterselect-suggestpopup .gwt-MenuItem,
+	.v-menubar-submenu .v-menubar-menuitem {
+		padding: .05em .7em;
+		user-select: none;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		cursor: default;
+		}
+	
+	.v-contextmenu td.gwt-MenuItem-selected div,
+	.v-filterselect-suggestpopup td.gwt-MenuItem-selected,
+	.v-table .v-table-body .v-selected,
+	.v-menubar-submenu span.v-menubar-menuitem-selected {
+		text-shadow: none;
+		}
+	
+	.v-contextmenu .gwt-MenuItem-selected,
+	.v-filterselect-suggestpopup .gwt-MenuItem-selected,
+	.v-table .v-selected,
+	.v-menubar-submenu .v-menubar-menuitem-selected {
+		background-color: #333;
+		}
+	
+	.v-contextmenu .gwt-MenuItem-selected div {
+		background: transparent;
+		}
+	
+	
+	// Misc. generics
+	
+	.v-tooltip .v-errormessage {
+		color: #b2320b;
+		padding-left: 14px;
+		background: transparent url(../img/error-indicator.png) no-repeat 0 50%;
+		}
+
+}
+
+@mixin chameleon-common {
+	// Misc. generics
+	
+	.v-errorindicator {
+		width: 13px;
+		height: 1.4em;
+		background: transparent url(../img/error-indicator.png) no-repeat right 50%;
+		}
+	
+	.v-caption-small .v-errorindicator {
+		height: 1.2em;
+		}
+	
+	.v-caption-big .v-errorindicator {
+		height: 1.8em;
+		}	
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/accordion/accordion.css b/WebContent/VAADIN/themes/chameleon/components/accordion/accordion.scss
index 8fb7254008..f33577db9e 100644
--- a/WebContent/VAADIN/themes/chameleon/components/accordion/accordion.css
+++ b/WebContent/VAADIN/themes/chameleon/components/accordion/accordion.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-accordion {
+
 .v-accordion {
 	border: 1px solid #b3b3b3;
 	}
@@ -39,7 +41,7 @@ div.v-accordion-item-open .v-accordion-item-caption:active {
 
 .v-accordion-opaque .v-accordion-item-caption,
 .v-accordion-opaque .v-accordion-item-open {
-	border-none;
+	border: none;
 	}
 
 .v-accordion-opaque .v-accordion-item-caption,
@@ -73,4 +75,6 @@ div.v-accordion-item-open .v-accordion-item-caption:active {
 	border-radius: 0;
 	-webkit-border-radius: 0;
 	-moz-border-radius: 0;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/button/button.css b/WebContent/VAADIN/themes/chameleon/components/button/button.scss
index 1dffddb4c2..beeba2478f 100644
--- a/WebContent/VAADIN/themes/chameleon/components/button/button.css
+++ b/WebContent/VAADIN/themes/chameleon/components/button/button.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-button {
+
 .v-button:active,
 .v-ie8 .v-pressed.v-button,
 div.v-button-down {
@@ -255,3 +257,5 @@ body.v-ie .v-pressed.v-button-borderless .v-button-wrap {
 .v-button-icon-only .v-icon {
 	margin-right: -.5em;
 	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/components.css b/WebContent/VAADIN/themes/chameleon/components/components.css
deleted file mode 100644
index c497a4a323..0000000000
--- a/WebContent/VAADIN/themes/chameleon/components/components.css
+++ /dev/null
@@ -1,17 +0,0 @@
-@import "accordion/accordion.css";
-@import "button/button.css";
-@import "label/label.css";
-@import "menubar/menubar.css";
-@import "notification/notification.css";
-@import "panel/panel.css";
-@import "popupview/popupview.css";
-@import "progressindicator/progressindicator.css";
-@import "slider/slider.css";
-@import "splitpanel/splitpanel.css";
-@import "table/table.css";
-@import "textfield/textfield.css";
-@import "datefield/datefield.css"; /* datefield and selects must be after textfield */
-@import "selects/selects.css";
-@import "tabsheet/tabsheet.css";
-@import "tree/tree.css";
-@import "window/window.css";
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/components.scss b/WebContent/VAADIN/themes/chameleon/components/components.scss
new file mode 100644
index 0000000000..45a313ed60
--- /dev/null
+++ b/WebContent/VAADIN/themes/chameleon/components/components.scss
@@ -0,0 +1,41 @@
+@import "accordion/accordion.scss";
+@import "button/button.scss";
+@import "label/label.scss";
+@import "menubar/menubar.scss";
+@import "notification/notification.scss";
+@import "panel/panel.scss";
+@import "popupview/popupview.scss";
+@import "progressindicator/progressindicator.scss";
+@import "slider/slider.scss";
+@import "splitpanel/splitpanel.scss";
+@import "table/table.scss";
+@import "textfield/textfield.scss";
+// datefield and selects must be after textfield
+@import "datefield/datefield.scss";
+@import "selects/selects.scss";
+@import "tabsheet/tabsheet.scss";
+@import "tree/tree.scss";
+@import "window/window.scss";
+
+@mixin chameleon-components {
+
+	@include chameleon-accordion;
+	@include chameleon-button;
+	@include chameleon-label;
+	@include chameleon-menubar;
+	@include chameleon-notification;
+	@include chameleon-panel;
+	@include chameleon-popupview;
+	@include chameleon-progressindicator;
+	@include chameleon-slider;
+	@include chameleon-splitpanel;
+	@include chameleon-table;
+	@include chameleon-textfield;
+	// datefield and selects must be after textfield
+	@include chameleon-datefield;
+	@include chameleon-selects;
+	@include chameleon-tabsheet;
+	@include chameleon-tree;
+	@include chameleon-window;
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.css b/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss
index 3804ab52e0..2f9705ca58 100644
--- a/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.css
+++ b/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-datefield {
+
 .v-datefield-button {
 	background: #dadada url(../../img/date-btn.png) repeat-x 50% 0;
 	border: 1px solid gray;
@@ -272,4 +274,6 @@ td.v-datefield-calendarpanel-nextyear {
 	padding: 0;
 	font-size: 0.9em;
 	margin: 0;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/label/label.css b/WebContent/VAADIN/themes/chameleon/components/label/label.scss
index f2d8e8ef69..7471242f70 100644
--- a/WebContent/VAADIN/themes/chameleon/components/label/label.css
+++ b/WebContent/VAADIN/themes/chameleon/components/label/label.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-label {
+
 /*******************************************************************************
  * Different headers
  ******************************************************************************/
@@ -124,4 +126,6 @@ body .v-label-loading {
 	border-radius: 2px;
 	-webkit-border-radius: 2px;
 	-moz-border-radius: 2px;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/menubar/menubar.css b/WebContent/VAADIN/themes/chameleon/components/menubar/menubar.scss
index 4f6be1b923..55ade4c060 100644
--- a/WebContent/VAADIN/themes/chameleon/components/menubar/menubar.css
+++ b/WebContent/VAADIN/themes/chameleon/components/menubar/menubar.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-menubar {
+
 .v-menubar {
 	padding: 0 .4em;
 	background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x;
@@ -22,3 +24,5 @@
 	background-image: url(../../img/grad-light-top2.png);
 	background-position: 0 -1px;
 	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/notification/notification.css b/WebContent/VAADIN/themes/chameleon/components/notification/notification.scss
index ee686912c5..9036c5c2d6 100644
--- a/WebContent/VAADIN/themes/chameleon/components/notification/notification.css
+++ b/WebContent/VAADIN/themes/chameleon/components/notification/notification.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-notification {
+
 div.v-Notification {
 	-moz-border-radius: 0;
 	-webkit-border-radius: 0;
@@ -61,4 +63,6 @@ div.v-Notification-system {
 	color: #fff;
 	border: none;
 	background-color: #b40000;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/panel/panel.css b/WebContent/VAADIN/themes/chameleon/components/panel/panel.scss
index 0e5dcb8a38..88b3d7b804 100644
--- a/WebContent/VAADIN/themes/chameleon/components/panel/panel.css
+++ b/WebContent/VAADIN/themes/chameleon/components/panel/panel.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-panel {
+
 .v-panel-caption {
 	background: #b9dcff;
 	font-size: 1.2em;
@@ -117,4 +119,6 @@ div.v-panel-borderless .v-panel-deco-bubble {
 
 div.v-panel-borderless .v-panel-content-bubble {
 	background: transparent;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/popupview/popupview.css b/WebContent/VAADIN/themes/chameleon/components/popupview/popupview.scss
index ab270d7c4b..88e13cb46d 100644
--- a/WebContent/VAADIN/themes/chameleon/components/popupview/popupview.css
+++ b/WebContent/VAADIN/themes/chameleon/components/popupview/popupview.scss
@@ -1,3 +1,7 @@
+@mixin chameleon-popupview {
+
 .v-popupview-popup {
 	padding: .3em .4em;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/progressindicator/progressindicator.css b/WebContent/VAADIN/themes/chameleon/components/progressindicator/progressindicator.scss
index c080c0fc43..6bacf31e3e 100644
--- a/WebContent/VAADIN/themes/chameleon/components/progressindicator/progressindicator.css
+++ b/WebContent/VAADIN/themes/chameleon/components/progressindicator/progressindicator.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-progressindicator {
+
 .v-progressindicator-wrapper {
 	border-radius: 2px;
 	-webkit-border-radius: 2px;
@@ -109,4 +111,6 @@
 
 .v-progressindicator-indeterminate.bar.v-disabled .v-progressindicator-indicator {
 	background: #fff;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/selects/selects.css b/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss
index 3c8496f0fe..5e21ddff35 100644
--- a/WebContent/VAADIN/themes/chameleon/components/selects/selects.css
+++ b/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-selects {
+
 .v-filterselect {
 	overflow: hidden;
 	}
@@ -86,7 +88,8 @@ body .v-filterselect-suggestpopup-big td {
 
 .v-filterselect-prevpage:active,
 .v-filterselect-nextpage:active {
-	background-image: (../../img/grad-dark-bottom2.png);
+	// TODO check - was missing a part of the rule
+	background-image: #c9c9c9 url(../../img/grad-dark-bottom2.png);
 	background-position: left bottom;
 	}
 
@@ -161,3 +164,5 @@ body .v-filterselect-suggestpopup-big td {
 	height: 100%;
 	background-position: 100% -8px;
 	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/slider/slider.css b/WebContent/VAADIN/themes/chameleon/components/slider/slider.scss
index 6a430723e2..bef69b3472 100644
--- a/WebContent/VAADIN/themes/chameleon/components/slider/slider.css
+++ b/WebContent/VAADIN/themes/chameleon/components/slider/slider.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-slider {
+
 .v-slider {
 	border-top: 1px solid #9a9c9e;
 	border-bottom: 1px solid #bdbfc1;
@@ -54,3 +56,5 @@
 	margin: 0;
 	margin-left: -5px;
 	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/splitpanel/splitpanel.css b/WebContent/VAADIN/themes/chameleon/components/splitpanel/splitpanel.scss
index 1cb04bc29b..99f51edc01 100644
--- a/WebContent/VAADIN/themes/chameleon/components/splitpanel/splitpanel.css
+++ b/WebContent/VAADIN/themes/chameleon/components/splitpanel/splitpanel.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-splitpanel {
+
 .v-splitpanel-hsplitter div,
 .v-splitpanel-vsplitter div {
 	background: transparent url(../../img/split-handle.png) no-repeat 2px 50%;
@@ -61,3 +63,5 @@ body .v-splitpanel-vsplitter-small-locked {
 	background: transparent;
 	overflow: hidden;
 	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/table/table.css b/WebContent/VAADIN/themes/chameleon/components/table/table.scss
index 2bc52bc844..8ecc1878ae 100644
--- a/WebContent/VAADIN/themes/chameleon/components/table/table.css
+++ b/WebContent/VAADIN/themes/chameleon/components/table/table.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-table {
+
 .v-table-header-wrap,
 .v-table-header-drag {
 	background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x;
@@ -160,4 +162,6 @@ div.v-table-focus-slot-right {
 
 div.v-table-borderless .v-table-body {
 	background: transparent;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/tabsheet/tabsheet.css b/WebContent/VAADIN/themes/chameleon/components/tabsheet/tabsheet.scss
index d1697c584a..258df79922 100644
--- a/WebContent/VAADIN/themes/chameleon/components/tabsheet/tabsheet.css
+++ b/WebContent/VAADIN/themes/chameleon/components/tabsheet/tabsheet.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-tabsheet {
+
 .v-tabsheet-spacertd div {
 	border-color: #b3b3b3;
 	border-left: none;
@@ -155,4 +157,6 @@
 .v-tabsheet-tabs-borderless .v-tabsheet-tabitem-selected,
 .v-tabsheet-tabs-borderless .v-tabsheet-tabitem-selected .v-caption {
 	background-color: transparent;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.css b/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss
index 74882fa693..f8f3788c9e 100644
--- a/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.css
+++ b/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-textfield {
+
 input.v-textfield,
 textarea.v-textarea,
 .v-filterselect {
@@ -127,3 +129,5 @@ input.v-textfield-search[type=text],
 .v-filterselect-search {
 	padding-left: 17px;
 	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/tree/tree.css b/WebContent/VAADIN/themes/chameleon/components/tree/tree.scss
index 64f59c116a..fc80f51a2a 100644
--- a/WebContent/VAADIN/themes/chameleon/components/tree/tree.css
+++ b/WebContent/VAADIN/themes/chameleon/components/tree/tree.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-tree {
+
 .v-tree-node-caption {
 	margin-left: 16px;
 	}
@@ -19,4 +21,6 @@
 
 .v-tree-connectors .v-tree-node-caption {
 	padding-bottom: 1px;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/window/window.css b/WebContent/VAADIN/themes/chameleon/components/window/window.scss
index 6ca8622a76..f1a6b5e529 100644
--- a/WebContent/VAADIN/themes/chameleon/components/window/window.css
+++ b/WebContent/VAADIN/themes/chameleon/components/window/window.scss
@@ -1,3 +1,5 @@
+@mixin chameleon-window {
+
 .v-window-closebox {
 	width: 14px;
 	height: 15px;
@@ -50,4 +52,6 @@
 	width: 14px;
 	height: 14px;
 	bottom: 0;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/compound/compound.css b/WebContent/VAADIN/themes/chameleon/compound/compound.css
deleted file mode 100644
index 2a193ae46b..0000000000
--- a/WebContent/VAADIN/themes/chameleon/compound/compound.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "sidebar-menu/sidebar-menu.css";
-@import "segment/segment.css";
-@import "toolbar/toolbar.css";
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/compound/compound.scss b/WebContent/VAADIN/themes/chameleon/compound/compound.scss
new file mode 100644
index 0000000000..b3f0e72f8f
--- /dev/null
+++ b/WebContent/VAADIN/themes/chameleon/compound/compound.scss
@@ -0,0 +1,134 @@
+@mixin chameleon-compound {
+
+	// segment.css
+
+	.v-horizontallayout-segment {
+		.v-button {
+			-webkit-border-radius: 0;
+			-moz-border-radius: 0;
+			border-radius: 0;
+			border-left-width: 0;
+			zoom: 1;
+			overflow: visible;
+
+			.v-button-wrap {
+				-webkit-border-radius: 0;
+				-moz-border-radius: 0;
+				border-radius: 0;
+				zoom: 1;
+				}
+			}
+		
+		.first {
+			-webkit-border-top-left-radius: 3px;
+			-webkit-border-bottom-left-radius: 3px;
+			-moz-border-radius-topleft: 3px;
+			-moz-border-radius-bottomleft: 3px;
+			border-top-left-radius: 3px;
+			border-bottom-left-radius: 3px;
+			border-left-width: 1px;
+
+			.v-button-wrap {
+				-webkit-border-top-left-radius: 2px;
+				-webkit-border-bottom-left-radius: 2px;
+				-moz-border-radius-topleft: 2px;
+				-moz-border-radius-bottomleft: 2px;
+				border-top-left-radius: 2px;
+				border-bottom-left-radius: 2px;
+				}
+		
+			}
+		
+		.last {
+			-webkit-border-top-right-radius: 3px;
+			-webkit-border-bottom-right-radius: 3px;
+			-moz-border-radius-topright: 3px;
+			-moz-border-radius-bottomright: 3px;
+			border-top-right-radius: 3px;
+			border-bottom-right-radius: 3px;
+		
+			.v-button-wrap {
+				-webkit-border-top-right-radius: 2px;
+				-webkit-border-bottom-right-radius: 2px;
+				-moz-border-radius-topright: 2px;
+				-moz-border-radius-bottomright: 2px;
+				border-top-right-radius: 2px;
+				border-bottom-right-radius: 2px;
+				}
+			}
+	}
+
+	// sidebar-menu.css
+	
+	.sidebar-menu * {
+		white-space: normal;
+		}
+	
+	.sidebar-menu {
+		.v-label {
+			font-size: 0.85em;
+			text-transform: uppercase;
+			font-weight: bold;
+			letter-spacing: 0.03em;
+			padding: 1em .9em .3em;
+			text-shadow: 0 1px 0 rgba(255,255,255,1);
+			}
+		
+		.v-nativebutton {
+			width: 100%;
+			padding: .1em 1.1em;
+			border: none;
+			background: transparent;
+			text-align: left;
+			}
+		
+		.v-nativebutton:focus {
+			outline: none;
+			font-weight: bold;
+			}
+		
+		.tab-selected,
+		.selected {
+			font-weight: bold;
+			background-color: #333;
+			background-image: url(../img/grad-light-top2.png);
+			background-position: 0 -1px;
+			color: #fff;
+			}
+		
+		.tab-selected:focus,
+		.selected:focus {
+			outline: none;
+			}
+		
+		.v-nativebutton::-moz-focus-inner {
+			border: none;
+			padding: 0;
+			}
+	}
+	
+	// toolbar.css
+	
+	.v-csslayout-toolbar {
+		background: transparent url(../img/grad-light-top.png) repeat-x;
+		border: 1px solid #b3b3b3;
+		border-width: 1px 0;
+	
+		.v-csslayout-margin {
+			margin: 3px .3em 2px;
+			padding-bottom: 1px;
+			overflow: hidden;
+			}
+		
+		.v-button,
+		.segment {
+			margin-right: 2px;
+			float: left;
+			}
+		
+		.segment .v-button {
+			margin-right: 0;
+			}
+		}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/compound/segment/segment.css b/WebContent/VAADIN/themes/chameleon/compound/segment/segment.css
deleted file mode 100644
index a529bff173..0000000000
--- a/WebContent/VAADIN/themes/chameleon/compound/segment/segment.css
+++ /dev/null
@@ -1,52 +0,0 @@
-.v-horizontallayout-segment .v-button {
-	-webkit-border-radius: 0;
-	-moz-border-radius: 0;
-	border-radius: 0;
-	border-left-width: 0;
-	zoom: 1;
-	overflow: visible;
-	}
-
-.v-horizontallayout-segment .v-button .v-button-wrap {
-	-webkit-border-radius: 0;
-	-moz-border-radius: 0;
-	border-radius: 0;
-	zoom: 1;
-	}
-
-.v-horizontallayout-segment .first {
-	-webkit-border-top-left-radius: 3px;
-	-webkit-border-bottom-left-radius: 3px;
-	-moz-border-radius-topleft: 3px;
-	-moz-border-radius-bottomleft: 3px;
-	border-top-left-radius: 3px;
-	border-bottom-left-radius: 3px;
-	border-left-width: 1px;
-	}
-
-.v-horizontallayout-segment .first .v-button-wrap {
-	-webkit-border-top-left-radius: 2px;
-	-webkit-border-bottom-left-radius: 2px;
-	-moz-border-radius-topleft: 2px;
-	-moz-border-radius-bottomleft: 2px;
-	border-top-left-radius: 2px;
-	border-bottom-left-radius: 2px;
-	}
-
-.v-horizontallayout-segment .last {
-	-webkit-border-top-right-radius: 3px;
-	-webkit-border-bottom-right-radius: 3px;
-	-moz-border-radius-topright: 3px;
-	-moz-border-radius-bottomright: 3px;
-	border-top-right-radius: 3px;
-	border-bottom-right-radius: 3px;
-	}
-
-.v-horizontallayout-segment .last .v-button-wrap {
-	-webkit-border-top-right-radius: 2px;
-	-webkit-border-bottom-right-radius: 2px;
-	-moz-border-radius-topright: 2px;
-	-moz-border-radius-bottomright: 2px;
-	border-top-right-radius: 2px;
-	border-bottom-right-radius: 2px;
-	}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/compound/sidebar-menu/sidebar-menu.css b/WebContent/VAADIN/themes/chameleon/compound/sidebar-menu/sidebar-menu.css
deleted file mode 100644
index e2ab7f2080..0000000000
--- a/WebContent/VAADIN/themes/chameleon/compound/sidebar-menu/sidebar-menu.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.sidebar-menu * {
-	white-space: normal;
-	}
-
-.sidebar-menu .v-label {
-	font-size: 0.85em;
-	text-transform: uppercase;
-	font-weight: bold;
-	letter-spacing: 0.03em;
-	padding: 1em .9em .3em;
-	text-shadow: 0 1px 0 rgba(255,255,255,1);
-	}
-
-.sidebar-menu .v-nativebutton {
-	width: 100%;
-	padding: .1em 1.1em;
-	border: none;
-	background: transparent;
-	text-align: left;
-	}
-
-.sidebar-menu .v-nativebutton:focus {
-	outline: none;
-	font-weight: bold;
-	}
-
-.sidebar-menu .tab-selected,
-.sidebar-menu .selected {
-	font-weight: bold;
-	background-color: #333;
-	background-image: url(../../img/grad-light-top2.png);
-	background-position: 0 -1px;
-	color: #fff;
-	}
-
-.sidebar-menu .tab-selected:focus,
-.sidebar-menu .selected:focus {
-	outline: none;
-	}
-
-.sidebar-menu .v-nativebutton::-moz-focus-inner {
-	border: none;
-	padding: 0;
-	}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/compound/toolbar/toolbar.css b/WebContent/VAADIN/themes/chameleon/compound/toolbar/toolbar.css
deleted file mode 100644
index 468172037e..0000000000
--- a/WebContent/VAADIN/themes/chameleon/compound/toolbar/toolbar.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.v-csslayout-toolbar {
-	background: transparent url(../../img/grad-light-top.png) repeat-x;
-	border: 1px solid #b3b3b3;
-	border-width: 1px 0;
-	}
-
-.v-csslayout-toolbar .v-csslayout-margin {
-	margin: 3px .3em 2px;
-	padding-bottom: 1px;
-	overflow: hidden;
-	}
-
-.v-csslayout-toolbar .v-button,
-.v-csslayout-toolbar .segment {
-	margin-right: 2px;
-	float: left;
-	}
-
-.v-csslayout-toolbar .segment .v-button {
-	margin-right: 0;
-	}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/styles.scss b/WebContent/VAADIN/themes/chameleon/styles.scss
new file mode 100644
index 0000000000..ee905c17e9
--- /dev/null
+++ b/WebContent/VAADIN/themes/chameleon/styles.scss
@@ -0,0 +1,10 @@
+@import "../base/styles.scss";
+@import "chameleon.scss";
+
+@include chameleon-app;
+
+// .v-theme-chameleon {
+@include chameleon-common;
+@include chameleon-components;
+@include chameleon-compound;
+// }
diff --git a/WebContent/VAADIN/themes/liferay/accordion/accordion.css b/WebContent/VAADIN/themes/liferay/accordion/accordion.scss
index 8faff71137..840c02feec 100644
--- a/WebContent/VAADIN/themes/liferay/accordion/accordion.css
+++ b/WebContent/VAADIN/themes/liferay/accordion/accordion.scss
@@ -1,3 +1,5 @@
+@mixin liferay-accordion {
+
 .v-accordion {
 	border: 1px solid #999;
 	-webkit-border-radius: 4px;
@@ -25,4 +27,6 @@
 
 .v-accordion-item-open .v-accordion-item-caption {
 	border-bottom: 1px solid #999;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/liferay/button/button.css b/WebContent/VAADIN/themes/liferay/button/button.scss
index bd0f307947..3a2e4a7acb 100644
--- a/WebContent/VAADIN/themes/liferay/button/button.css
+++ b/WebContent/VAADIN/themes/liferay/button/button.scss
@@ -1,3 +1,5 @@
+@mixin liferay-button {
+
 .v-button:focus {
 	outline: none;
 }
@@ -101,4 +103,6 @@ button.v-nativebutton-link-pressed,
 /* CheckBox */
 .v-checkbox input {
 	margin-right: 3px;	
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/liferay/common/common.css b/WebContent/VAADIN/themes/liferay/common/common.scss
index 521c4f3ac1..a94431d4cb 100644
--- a/WebContent/VAADIN/themes/liferay/common/common.css
+++ b/WebContent/VAADIN/themes/liferay/common/common.scss
@@ -1,3 +1,5 @@
+@mixin liferay-common {
+
 div.v-app {
 	background-color: transparent;
 }
@@ -33,3 +35,5 @@ div.v-app {
 	font-weight: bold;
 	margin: 1px 0 4px 0;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/liferay/contextmenu/contextmenu.css b/WebContent/VAADIN/themes/liferay/contextmenu/contextmenu.scss
index e29f0976e1..7748580f0c 100644
--- a/WebContent/VAADIN/themes/liferay/contextmenu/contextmenu.css
+++ b/WebContent/VAADIN/themes/liferay/contextmenu/contextmenu.scss
@@ -1,3 +1,5 @@
+@mixin liferay-contextmenu {
+
 .v-contextmenu {
 	background: #ccc9c9 url(/html/themes/classic/images/application/menu_bg.png) repeat-x 0 0;
 	border: 1px solid;
@@ -37,4 +39,6 @@
 
 .v-contextmenu .gwt-MenuItem-selected div {
 	background: transparent;	
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/liferay/datefield/datefield.css b/WebContent/VAADIN/themes/liferay/datefield/datefield.scss
index 6040052798..4bfc810b52 100644
--- a/WebContent/VAADIN/themes/liferay/datefield/datefield.css
+++ b/WebContent/VAADIN/themes/liferay/datefield/datefield.scss
@@ -1,3 +1,5 @@
+@mixin liferay-datefield {
+
 .v-datefield-popup {
 	padding: 3px;
 	-webkit-border-radius: 4px;
@@ -163,4 +165,6 @@ span.v-datefield-calendarpanel-month {
 .v-datefield-calendarpanel-body table {
 	margin: 0 auto;
 	width: 200px;	
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/liferay/formlayout/formlayout.css b/WebContent/VAADIN/themes/liferay/formlayout/formlayout.scss
index 9cf250627e..3fa6fa20ee 100644
--- a/WebContent/VAADIN/themes/liferay/formlayout/formlayout.css
+++ b/WebContent/VAADIN/themes/liferay/formlayout/formlayout.scss
@@ -1,3 +1,7 @@
+@mixin liferay-formlayout {
+
 .v-formlayout .v-caption {
 	font-weight: normal;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/liferay/liferay.scss b/WebContent/VAADIN/themes/liferay/liferay.scss
new file mode 100644
index 0000000000..68e9efbfe2
--- /dev/null
+++ b/WebContent/VAADIN/themes/liferay/liferay.scss
@@ -0,0 +1,25 @@
+// this file just defines all reindeer mixins by importing them
+
+// common between others for now for backwards compatibility
+
+@import "accordion/accordion.scss";
+@import "button/button.scss";
+
+@import "common/common.scss";
+
+@import "contextmenu/contextmenu.scss";
+@import "datefield/datefield.scss";
+@import "formlayout/formlayout.scss";
+@import "menubar/menubar.scss";
+@import "notification/notification.scss";
+@import "panel/panel.scss";
+@import "popupview/popupview.scss";
+@import "progressindicator/progressindicator.scss";
+@import "select/select.scss";
+@import "slider/slider.scss";
+@import "splitpanel/splitpanel.scss";
+@import "table/table.scss";
+@import "tabsheet/tabsheet.scss";
+@import "textfield/textfield.scss";
+@import "tree/tree.scss";
+@import "window/window.scss";
diff --git a/WebContent/VAADIN/themes/liferay/menubar/menubar.css b/WebContent/VAADIN/themes/liferay/menubar/menubar.scss
index cb0812f268..71891ff059 100644
--- a/WebContent/VAADIN/themes/liferay/menubar/menubar.css
+++ b/WebContent/VAADIN/themes/liferay/menubar/menubar.scss
@@ -1,3 +1,5 @@
+@mixin liferay-menubar {
+
 .v-menubar {
 	background: #97A1AE url(/html/themes/classic/images/dockbar/dockbar_bg.png) repeat-x 0 0;
 	border-bottom: 1px solid #636364;
@@ -61,4 +63,6 @@
 .v-menubar span.v-menubar-menuitem-disabled:focus,
 .v-menubar span.v-menubar-menuitem-disabled:active {
 	color: #999;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/liferay/notification/notification.css b/WebContent/VAADIN/themes/liferay/notification/notification.scss
index 10168fecbd..2312768287 100644
--- a/WebContent/VAADIN/themes/liferay/notification/notification.css
+++ b/WebContent/VAADIN/themes/liferay/notification/notification.scss
@@ -1,3 +1,5 @@
+@mixin liferay-notification {
+
 .v-Notification {
 	background: #dff4ff;
 	color: #34404F;
@@ -45,4 +47,6 @@
 .v-Notification-system h1 {
 	display: block;
 	margin: 0;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/liferay/panel/panel.css b/WebContent/VAADIN/themes/liferay/panel/panel.scss
index bb0bbe5338..79172b2474 100644
--- a/WebContent/VAADIN/themes/liferay/panel/panel.css
+++ b/WebContent/VAADIN/themes/liferay/panel/panel.scss
@@ -1,3 +1,5 @@
+@mixin liferay-panel {
+
 .v-panel {
 	background: transparent url(top-left.png) no-repeat;
 }
@@ -80,3 +82,5 @@
 .v-ie .v-panel-caption-light {
 	border-bottom: 1px solid #999;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/liferay/popupview/popupview.css b/WebContent/VAADIN/themes/liferay/popupview/popupview.scss
index 06cfddb7fe..ab06d18c98 100644
--- a/WebContent/VAADIN/themes/liferay/popupview/popupview.css
+++ b/WebContent/VAADIN/themes/liferay/popupview/popupview.scss
@@ -1,3 +1,5 @@
+@mixin liferay-popupview {
+
 .v-popupview-popup {
 	background: #d4d4d4 url(/html/themes/classic/images/application/state_default_bg.png) repeat-x 0 0;
 	padding: 8px;
@@ -6,4 +8,6 @@
 	border-radius: 4px;
 	border: 1px solid #c8c9ca;
 	border-color :#c8c9ca #9e9e9e #9e9e9e #c8c9ca; 
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/liferay/progressindicator/progressindicator.css b/WebContent/VAADIN/themes/liferay/progressindicator/progressindicator.scss
index ad8fb1c871..4371b2aeef 100644
--- a/WebContent/VAADIN/themes/liferay/progressindicator/progressindicator.css
+++ b/WebContent/VAADIN/themes/liferay/progressindicator/progressindicator.scss
@@ -1,3 +1,5 @@
+@mixin liferay-progressindicator {
+
 .v-progressindicator-wrapper {
 	background: #dfe2e4 url(../../reindeer/progressindicator/img/base.gif) repeat-x;
 	border: 1px solid #bfbfbf;
@@ -9,4 +11,6 @@
 
 .v-progressindicator-indicator {
 	background: #f7f9f9 url(../../reindeer/progressindicator/img/progress.png);
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/liferay/select/select.css b/WebContent/VAADIN/themes/liferay/select/select.scss
index 66672cc573..3dbeaeab9d 100644
--- a/WebContent/VAADIN/themes/liferay/select/select.css
+++ b/WebContent/VAADIN/themes/liferay/select/select.scss
@@ -1,3 +1,5 @@
+@mixin liferay-select {
+
 .v-app select,
 .v-window select {
 	padding: 1px;	
@@ -74,4 +76,6 @@ select {
 .v-select-twincol-buttons .v-button-wrap { 
 	padding-left: 11px;
 	padding-right: 11px;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/liferay/slider/slider.css b/WebContent/VAADIN/themes/liferay/slider/slider.scss
index 4f11091f16..d30de67da0 100644
--- a/WebContent/VAADIN/themes/liferay/slider/slider.css
+++ b/WebContent/VAADIN/themes/liferay/slider/slider.scss
@@ -1,3 +1,5 @@
+@mixin liferay-slider {
+
 .v-slider {
 	border: 1px solid #9e9e9e;
 	border-right: 1px solid #c8c9ca;
@@ -24,6 +26,11 @@
 	height: 10px;
 }
 
+/* Invalid rule (not used at least by some browsers */
+/*
 .v-slider-feedback {
 	background: #33;
+}
+*/
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/liferay/splitpanel/splitpanel.css b/WebContent/VAADIN/themes/liferay/splitpanel/splitpanel.scss
index 5ee753389f..b8058f8cb1 100644
--- a/WebContent/VAADIN/themes/liferay/splitpanel/splitpanel.css
+++ b/WebContent/VAADIN/themes/liferay/splitpanel/splitpanel.scss
@@ -1,3 +1,5 @@
+@mixin liferay-splitpanel {
+
 .v-splitpanel-hsplitter, 
 .v-splitpanel-hsplitter-locked {
 	font-size: 1px;
@@ -60,4 +62,6 @@
 	font-size: 1px;
 	height: 1px;
 	background: #c8c9ca;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/liferay/styles.scss b/WebContent/VAADIN/themes/liferay/styles.scss
new file mode 100644
index 0000000000..78fbd62c25
--- /dev/null
+++ b/WebContent/VAADIN/themes/liferay/styles.scss
@@ -0,0 +1,28 @@
+// this file actually attaches all liferay mixins to a parent style
+
+@import "../base/styles.scss";
+@import "liferay.scss";
+
+// .v-theme-liferay {
+	@include liferay-accordion;
+	@include liferay-button;
+	
+	@include liferay-common;
+	
+	@include liferay-contextmenu;
+	@include liferay-datefield;
+	@include liferay-formlayout;
+	@include liferay-menubar;
+	@include liferay-notification;
+	@include liferay-panel;
+	@include liferay-popupview;
+	@include liferay-progressindicator;
+	@include liferay-select;
+	@include liferay-slider;
+	@include liferay-splitpanel;
+	@include liferay-table;
+	@include liferay-tabsheet;
+	@include liferay-textfield;
+	@include liferay-tree;
+	@include liferay-window;
+// }
diff --git a/WebContent/VAADIN/themes/liferay/table/table.css b/WebContent/VAADIN/themes/liferay/table/table.scss
index 81446d4628..0e1b96f5b0 100644
--- a/WebContent/VAADIN/themes/liferay/table/table.css
+++ b/WebContent/VAADIN/themes/liferay/table/table.scss
@@ -1,3 +1,5 @@
+@mixin liferay-table {
+
 .v-table-body {
 	border: 1px solid #999;
 }
@@ -132,4 +134,6 @@
 
 .v-off {
 	color: #999;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/liferay/tabsheet/tabsheet.css b/WebContent/VAADIN/themes/liferay/tabsheet/tabsheet.scss
index 7f23edb809..73e2c71dcb 100644
--- a/WebContent/VAADIN/themes/liferay/tabsheet/tabsheet.css
+++ b/WebContent/VAADIN/themes/liferay/tabsheet/tabsheet.scss
@@ -1,3 +1,5 @@
+@mixin liferay-tabsheet {
+
 .v-tabsheet-content {
 	border: none;
 }
@@ -139,4 +141,6 @@
 	text-indent: -999px;
 	width: 13px;
 	height: 9px;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/liferay/textfield/textfield.css b/WebContent/VAADIN/themes/liferay/textfield/textfield.scss
index b66a805eb0..9e3d2ece03 100644
--- a/WebContent/VAADIN/themes/liferay/textfield/textfield.css
+++ b/WebContent/VAADIN/themes/liferay/textfield/textfield.scss
@@ -1,3 +1,5 @@
+@mixin liferay-textfield {
+
 .v-app input[type="text"],
 .v-app input[type="password"],
 .v-app input[type="reset"],
@@ -12,4 +14,6 @@
 input.v-textfield-prompt, 
 textarea.v-textarea-prompt {
 	font-style: normal;	
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/liferay/tree/tree.css b/WebContent/VAADIN/themes/liferay/tree/tree.scss
index 33da398736..99ce8e709f 100644
--- a/WebContent/VAADIN/themes/liferay/tree/tree.css
+++ b/WebContent/VAADIN/themes/liferay/tree/tree.scss
@@ -1,3 +1,5 @@
+@mixin liferay-tree {
+
 .v-tree-node {
 	background: transparent url(arrows_sprites.png) no-repeat -42px 1px;
 }
@@ -55,4 +57,6 @@
 
 .v-tree-node-children {
 	padding-left: 14px;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/liferay/window/window.css b/WebContent/VAADIN/themes/liferay/window/window.scss
index f034d7503f..54bfb37938 100644
--- a/WebContent/VAADIN/themes/liferay/window/window.css
+++ b/WebContent/VAADIN/themes/liferay/window/window.scss
@@ -1,3 +1,5 @@
+@mixin liferay-window {
+
 .v-window {
 	background: transparent;
 }
@@ -62,4 +64,6 @@
 	width: 10px;
 	height: 10px;
 	bottom: 0;	
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/a-sprite-definitions/a-sprite-definitions.css b/WebContent/VAADIN/themes/reindeer/a-sprite-definitions/a-sprite-definitions.scss
index 87c598956f..87c598956f 100644
--- a/WebContent/VAADIN/themes/reindeer/a-sprite-definitions/a-sprite-definitions.css
+++ b/WebContent/VAADIN/themes/reindeer/a-sprite-definitions/a-sprite-definitions.scss
diff --git a/WebContent/VAADIN/themes/reindeer/accordion/accordion.css b/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss
index 5e51a115d9..8ba0b2151f 100644
--- a/WebContent/VAADIN/themes/reindeer/accordion/accordion.css
+++ b/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-accordion {
+
 .v-accordion {
 	border: 1px solid #bebebe;
 	border-radius: 2px;
@@ -42,4 +44,6 @@
 	border-radius: 0;
 	-webkit-border-radius: 0;
 	-moz-border-radius: 0;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-ie.css b/WebContent/VAADIN/themes/reindeer/button/button-ie.scss
index 47d9496e81..5bf38c4442 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-ie.css
+++ b/WebContent/VAADIN/themes/reindeer/button/button-ie.scss
@@ -1,4 +1,8 @@
+@mixin reindeer-button-ie {
+
 .v-ie8 .v-nativebutton-link {
 	padding: 0;
 	text-align: left;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-link-style.css b/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss
index f4ba80b3cd..aebda24cd4 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-link-style.css
+++ b/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-button-link-style {
+
 .v-button.v-button-link,
 .v-button.v-button-link:focus,
 .v-button.v-button-link:active,
@@ -32,4 +34,6 @@
 .v-button-link:focus .v-button-caption,
 .v-nativebutton-link:focus .v-nativebutton-caption {
 	outline: 1px dotted #1b699f;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-primary-style.css b/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss
index fdfe90ce3a..ffb4d250d3 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-primary-style.css
+++ b/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-button-primary-style {
+
 .v-button-primary:focus {
 	background-image: url(img/primary-left-focus.png); /** sprite-ref: buttons */
 	}
@@ -60,3 +62,5 @@
 .black .v-disabled.v-button-primary .v-button-wrap {
 	background-image: url(img/black/primary-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-small-style.css b/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss
index fa6b177624..0ec33e330c 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-small-style.css
+++ b/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-button-small-style {
+
 .v-button-small:focus {
 	background-image: url(img/small-left-focus.png); /** sprite-ref: buttons */
 	}
@@ -64,4 +66,6 @@
 .black .v-button-small .v-button-wrap,
 .black .v-disabled.v-button-small .v-button-wrap {
 	background-image: url(img/black/small-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-standard.css b/WebContent/VAADIN/themes/reindeer/button/button-standard.scss
index becd20457d..4df09bc1bd 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-standard.css
+++ b/WebContent/VAADIN/themes/reindeer/button/button-standard.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-button-standard {
+
 .v-button:focus {
 	background-image: url(img/left-focus.png); /** sprite-ref: buttons */
 	outline: none;
@@ -87,4 +89,6 @@
 .black .v-button-caption {
 	color: #c9ccce;
 	text-shadow: #121314 0 -1px 0;
-	}
\ No newline at end of file
+	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/button.css b/WebContent/VAADIN/themes/reindeer/button/button.css
deleted file mode 100644
index 1948e5aafb..0000000000
--- a/WebContent/VAADIN/themes/reindeer/button/button.css
+++ /dev/null
@@ -1,10 +0,0 @@
-/* Standard implementation of the button theme
- * These files contain styles that apply to all browsers
- */
-@import "button-standard.css";
-@import "button-primary-style.css";
-@import "button-small-style.css";
-@import "button-link-style.css";
-
-/* Browser-specific corrections to the standard implementation */
-@import "button-ie.css";
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/button/button.scss b/WebContent/VAADIN/themes/reindeer/button/button.scss
new file mode 100644
index 0000000000..34a4efda04
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/button.scss
@@ -0,0 +1,22 @@
+/* Standard implementation of the button theme
+ * These files contain styles that apply to all browsers
+ */
+@import "button-standard.scss";
+@import "button-primary-style.scss";
+@import "button-small-style.scss";
+@import "button-link-style.scss";
+
+/* Browser-specific corrections to the standard implementation */
+@import "button-ie.scss";
+
+@mixin reindeer-button {
+
+	@include reindeer-button-standard;
+	@include reindeer-button-primary-style;
+	@include reindeer-button-small-style;
+	@include reindeer-button-link-style;
+
+	/* Browser-specific corrections to the standard implementation */
+	@include reindeer-button-ie;
+
+}
diff --git a/WebContent/VAADIN/themes/reindeer/common/common.css b/WebContent/VAADIN/themes/reindeer/common/common.scss
index ff8ae47036..86f546a6a2 100644
--- a/WebContent/VAADIN/themes/reindeer/common/common.css
+++ b/WebContent/VAADIN/themes/reindeer/common/common.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-common {
+
 .v-generated-body,
 .v-app {
 	background: #f5f5f5;
@@ -119,4 +121,6 @@
 .portlet .v-popupview-popup .v-checkbox input {
 	margin-right: 3px;
 	background: transparent;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/datefield/datefield.css b/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss
index 1ececf9fb4..17b9d42cdb 100644
--- a/WebContent/VAADIN/themes/reindeer/datefield/datefield.css
+++ b/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-datefield {
+
 .v-datefield {
 	overflow: hidden;
 }
@@ -366,4 +368,6 @@ td.v-datefield-calendarpanel-nextyear {
 }
 .black .v-datefield-prompt .v-datefield-textfield {
 	color: #5f6366;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.css b/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss
index b28040a0e9..ab47767dcf 100644
--- a/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.css
+++ b/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-formlayout {
+
 .v-formlayout-errorcell {
 	width: 13px;
 }
@@ -57,4 +59,6 @@
 }
 .black .v-form legend {
 	color: #e3e6e8;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/label/label.css b/WebContent/VAADIN/themes/reindeer/label/label.scss
index 905ed7251d..a8418718e0 100644
--- a/WebContent/VAADIN/themes/reindeer/label/label.css
+++ b/WebContent/VAADIN/themes/reindeer/label/label.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-label {
+
 .v-label {
 	line-height: 18px;
 }
@@ -119,4 +121,6 @@
 /* Labels inside Table don't need a line-height */
 .v-table .v-label {
 	line-height: normal;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/layouts/layouts.css b/WebContent/VAADIN/themes/reindeer/layouts/layouts.scss
index 528d4b9174..832e480010 100644
--- a/WebContent/VAADIN/themes/reindeer/layouts/layouts.css
+++ b/WebContent/VAADIN/themes/reindeer/layouts/layouts.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-layouts {
+
 .v-orderedlayout-margin-top,
 .v-horizontallayout-margin-top,
 .v-verticallayout-margin-top {
@@ -85,4 +87,6 @@
 }
 .v-panel-content > div.black {
 	background: #1e2022 url(img/black-bg.png) repeat-x;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/link/link.css b/WebContent/VAADIN/themes/reindeer/link/link.scss
index e3847f1180..291479b2d1 100644
--- a/WebContent/VAADIN/themes/reindeer/link/link.css
+++ b/WebContent/VAADIN/themes/reindeer/link/link.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-link {
+
 .v-link a:link span {
 	color: #1b699f;
 }
@@ -6,4 +8,6 @@
 }
 .v-link a:hover span {
 	color: #2483c4;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/menubar/menubar.css b/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss
index 165eacc840..78f4a9fa45 100644
--- a/WebContent/VAADIN/themes/reindeer/menubar/menubar.css
+++ b/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-menubar {
+
 .v-menubar {
 	height: 23px;
 	background: #323336 repeat-x;
@@ -70,3 +72,5 @@
 .v-menubar-submenu .v-menubar-menuitem-selected-unchecked .v-menubar-menuitem-caption {
 	background: transparent url(img/unchecked-selected.png) no-repeat left;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/notification/notification.css b/WebContent/VAADIN/themes/reindeer/notification/notification.scss
index 33b56ef891..d9ddd4da27 100644
--- a/WebContent/VAADIN/themes/reindeer/notification/notification.css
+++ b/WebContent/VAADIN/themes/reindeer/notification/notification.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-notification {
+
 .v-Notification {
 	color: #fff;
 	border-radius: 4px;
@@ -41,4 +43,6 @@
 }
 .v-Notification-system {
 	background-color: #b40000;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/panel/panel.css b/WebContent/VAADIN/themes/reindeer/panel/panel.scss
index 23575799ab..00483c5546 100644
--- a/WebContent/VAADIN/themes/reindeer/panel/panel.css
+++ b/WebContent/VAADIN/themes/reindeer/panel/panel.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-panel {
+
 .blue .v-panel-caption,
 .blue .v-panel-nocaption,
 .blue .v-panel-content {
@@ -71,4 +73,6 @@
 .v-panel-light .v-panel-deco-light {
 	height: 0;
 	border: none;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/popupview/popupview.css b/WebContent/VAADIN/themes/reindeer/popupview/popupview.scss
index 8336f46505..7e7f55fda5 100644
--- a/WebContent/VAADIN/themes/reindeer/popupview/popupview.css
+++ b/WebContent/VAADIN/themes/reindeer/popupview/popupview.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-popupview {
+
 .v-popupview {
 	color: #1b699f;
 }
@@ -7,4 +9,6 @@
 .v-popupview-popup {
 	background: #fff;
 	padding: 3px;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.css b/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss
index 70a42e483e..f3f3a59afb 100644
--- a/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.css
+++ b/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-progressindicator {
+
 .v-progressindicator-wrapper {
 	background: #dfe2e4 url(img/base.gif) repeat-x;
 	border: 1px solid #bfbfbf;
@@ -7,4 +9,6 @@
 }
 .v-progressindicator-indicator {
 	background: #f7f9f9 url(img/progress.png);
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/reindeer.scss b/WebContent/VAADIN/themes/reindeer/reindeer.scss
new file mode 100644
index 0000000000..6033466f63
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/reindeer.scss
@@ -0,0 +1,29 @@
+// this file just defines all reindeer mixins by importing them
+
+// common between others for now for backwards compatibility
+
+@import "accordion/accordion.scss";
+// TODO this is problematic: comments get stripped out
+@import "a-sprite-definitions/a-sprite-definitions.scss";
+@import "button/button.scss";
+
+@import "common/common.scss";
+
+@import "datefield/datefield.scss";
+@import "formlayout/formlayout.scss";
+@import "label/label.scss";
+@import "layouts/layouts.scss";
+@import "link/link.scss";
+@import "menubar/menubar.scss";
+@import "notification/notification.scss";
+@import "panel/panel.scss";
+@import "popupview/popupview.scss";
+@import "progressindicator/progressindicator.scss";
+@import "select/select.scss";
+@import "slider/slider.scss";
+@import "splitpanel/splitpanel.scss";
+@import "table/table.scss";
+@import "tabsheet/tabsheet.scss";
+@import "textfield/textfield.scss";
+@import "tree/tree.scss";
+@import "window/window.scss";
diff --git a/WebContent/VAADIN/themes/reindeer/select/select.css b/WebContent/VAADIN/themes/reindeer/select/select.scss
index 8962862702..4a8d07fd91 100644
--- a/WebContent/VAADIN/themes/reindeer/select/select.css
+++ b/WebContent/VAADIN/themes/reindeer/select/select.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-select {
+
 .v-filterselect {
 	height: 24px;
 	background-repeat: no-repeat;
@@ -258,3 +260,5 @@
 	background: #151717;
 	color: #c9ccce;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/slider/slider.css b/WebContent/VAADIN/themes/reindeer/slider/slider.scss
index cb5a0f7dbe..047237d262 100644
--- a/WebContent/VAADIN/themes/reindeer/slider/slider.css
+++ b/WebContent/VAADIN/themes/reindeer/slider/slider.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-slider {
+
 .v-slider {
 	border-top: 1px solid #9a9c9e;
 	border-bottom: 1px solid #bdbfc1;
@@ -38,4 +40,6 @@
 	width: 10px;
 	height: 10px;
 	margin-left: -5px;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.css b/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss
index ac27629187..07a38891f5 100644
--- a/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.css
+++ b/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-splitpanel {
+
 .v-splitpanel-hsplitter,
 .v-splitpanel-hsplitter-locked {
 	width: 7px;
@@ -63,4 +65,6 @@
 	height: 5px;
 	margin-top: -2px;
 	background: transparent;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/styles.scss b/WebContent/VAADIN/themes/reindeer/styles.scss
new file mode 100644
index 0000000000..51daace9d3
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/styles.scss
@@ -0,0 +1,32 @@
+// this file actually attaches all reindeer mixins to a parent style
+
+@import "../base/styles.scss";
+@import "reindeer.scss";
+
+// .v-theme-reindeer {
+	@include reindeer-accordion;
+	// TODO this is problematic: comments get stripped out
+	// @include a-sprite-definitions;
+	@include reindeer-button;
+	
+	@include reindeer-common;
+	
+	@include reindeer-datefield;
+	@include reindeer-formlayout;
+	@include reindeer-label;
+	@include reindeer-layouts;
+	@include reindeer-link;
+	@include reindeer-menubar;
+	@include reindeer-notification;
+	@include reindeer-panel;
+	@include reindeer-popupview;
+	@include reindeer-progressindicator;
+	@include reindeer-select;
+	@include reindeer-slider;
+	@include reindeer-splitpanel;
+	@include reindeer-table;
+	@include reindeer-tabsheet;
+	@include reindeer-textfield;
+	@include reindeer-tree;
+	@include reindeer-window;
+// }
diff --git a/WebContent/VAADIN/themes/reindeer/table/table.css b/WebContent/VAADIN/themes/reindeer/table/table.scss
index 5d67cfe564..cb190e1f30 100644
--- a/WebContent/VAADIN/themes/reindeer/table/table.css
+++ b/WebContent/VAADIN/themes/reindeer/table/table.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-table {
+
 /* Table on blue background */
 .blue .v-table-header-wrap {
 	border-color: #92a2aa;
@@ -286,4 +288,6 @@
 .v-table-borderless .v-table-header-wrap,
 .v-table-borderless .v-table-body {
 	border: none;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss
index e9325404da..1efdab68af 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.css
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-tabsheet-borderless-style {
+
 .v-tabsheet-borderless .v-tabsheet-tabitemcell-first {
 	padding-left: 7px;
 	background: url(img/framed/tab-first-left.png) no-repeat -3px 0;
@@ -17,4 +19,6 @@
 .v-tabsheet-borderless .v-tabsheet-deco {
 	height: 0;
 	border-top: none;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss
index 40b75c59b3..dda381b1b0 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.css
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss
@@ -1,6 +1,10 @@
+@mixin reindeer-tabsheet-hover-closable-style {
+
 .v-tabsheet-tabs-hover-closable .v-tabsheet-caption-close {
 	visibility: hidden;
 }
 .v-tabsheet-tabs-hover-closable .v-tabsheet-tabitem:hover .v-tabsheet-caption-close {
 	visibility: visible;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
index dfa83d7088..608aae55cb 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.css
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-tabsheet-minimal-style {
+
 /**
  * Tabsheet "minimal" style --------------
  */
@@ -142,4 +144,6 @@
 }
 .black .v-tabsheet-tabs-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.scss
index 3d23fa110a..11bb98536a 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.css
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-tabsheet-normal-style {
+
 /* Default Tabsheet styles */
 
 .v-tabsheet-tabitemcell,
@@ -149,4 +151,6 @@
 .v-ie8 .v-tabsheet-tabs .v-errorindicator,
 .v-ie9 .v-tabsheet-tabs .v-errorindicator {
 	display: inline-block;
+}
+
 }
\ 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.scss
index 18ad5c9194..8f176e2150 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.css
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-tabsheet-scroller {
+
 /* Tabsheet scroller styles */
 
 .v-tabsheet-scroller {
@@ -48,4 +50,6 @@
 	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-selected-closable-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss
index e4b8e0cd5f..d26a569c25 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.css
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-tabsheet-selected-closable-style {
+
 .v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem .v-tabsheet-caption-close,
 .v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem:hover .v-tabsheet-caption-close {
 	visibility: hidden;
@@ -5,4 +7,6 @@
 .v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem-selected .v-tabsheet-caption-close,
 .v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem-selected:hover .v-tabsheet-caption-close {
 	visibility: visible;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss
index c7c79d35ee..e4f098046c 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.css
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-tabsheet-small-style {
+
 /**
  * Tabsheet bar style ---------------
  */
@@ -107,3 +109,5 @@
 	border: none;
 }
 /* Content area font color specified with minimal style (reduces additional selectors) */
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css
deleted file mode 100644
index b636effb0f..0000000000
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/* These styles get catenated together on build */
-@import "tabsheet-normal-style.css";
-@import "tabsheet-scroller.css";
-@import "tabsheet-borderless-style.css";
-@import "tabsheet-minimal-style.css";
-@import "tabsheet-small-style.css";
-@import "tabsheet-selected-closable-style.css";
-@import "tabsheet-hover-closable-style.css";
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.scss
new file mode 100644
index 0000000000..8b9252cf68
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.scss
@@ -0,0 +1,20 @@
+/* These styles get catenated together on build */
+@import "tabsheet-normal-style.scss";
+@import "tabsheet-scroller.scss";
+@import "tabsheet-borderless-style.scss";
+@import "tabsheet-minimal-style.scss";
+@import "tabsheet-small-style.scss";
+@import "tabsheet-selected-closable-style.scss";
+@import "tabsheet-hover-closable-style.scss";
+
+@mixin reindeer-tabsheet {
+
+	@include reindeer-tabsheet-normal-style;
+	@include reindeer-tabsheet-scroller;
+	@include reindeer-tabsheet-borderless-style;
+	@include reindeer-tabsheet-minimal-style;
+	@include reindeer-tabsheet-small-style;
+	@include reindeer-tabsheet-selected-closable-style;
+	@include reindeer-tabsheet-hover-closable-style;
+
+}
diff --git a/WebContent/VAADIN/themes/reindeer/textfield/textfield.css b/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss
index 09c47dc8d4..8db2dda567 100644
--- a/WebContent/VAADIN/themes/reindeer/textfield/textfield.css
+++ b/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-textfield {
+
 /* Textfield on blue background */
 .blue .v-textfield,
 .blue .v-textarea {
@@ -113,4 +115,6 @@ textarea.v-textarea-readonly,
 .black textarea.v-textarea-readonly {
 	border: none;
 	background: transparent;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tree/tree.css b/WebContent/VAADIN/themes/reindeer/tree/tree.scss
index f72f61c545..3a1ad35c81 100644
--- a/WebContent/VAADIN/themes/reindeer/tree/tree.css
+++ b/WebContent/VAADIN/themes/reindeer/tree/tree.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-tree {
+
 .v-tree-node {
 	background: transparent url(img/arrows.png) no-repeat 6px -10px;
 }
@@ -48,4 +50,6 @@
 }
 .v-tree-connectors .v-tree-node-drag-top.v-tree-node-leaf {
 	background-position: 2px 50%;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/window/window.css b/WebContent/VAADIN/themes/reindeer/window/window.scss
index e1091ef98d..ac8fa9c2c9 100644
--- a/WebContent/VAADIN/themes/reindeer/window/window.css
+++ b/WebContent/VAADIN/themes/reindeer/window/window.scss
@@ -1,3 +1,5 @@
+@mixin reindeer-window {
+
 .v-window {
 	background: transparent;
 }
@@ -179,4 +181,6 @@
 	border: none;
 	background: transparent repeat-x;
 	background-image: url(img/black/content-bg.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/absolutelayout/absolutelayout.css b/WebContent/VAADIN/themes/runo/absolutelayout/absolutelayout.scss
index 9373b73db8..623110ff63 100644
--- a/WebContent/VAADIN/themes/runo/absolutelayout/absolutelayout.css
+++ b/WebContent/VAADIN/themes/runo/absolutelayout/absolutelayout.scss
@@ -1,4 +1,8 @@
+@mixin runo-absolutelayout {
+
 .v-absolutelayout-wrapper {
 	position: absolute;
 	overflow:hidden;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/accordion/accordion.css b/WebContent/VAADIN/themes/runo/accordion/accordion.scss
index cad4bb94ba..f9c9487536 100644
--- a/WebContent/VAADIN/themes/runo/accordion/accordion.css
+++ b/WebContent/VAADIN/themes/runo/accordion/accordion.scss
@@ -1,3 +1,5 @@
+@mixin runo-accordion {
+
 .v-accordion-item-caption {
 	height: 31px;
 	background: #edf0f0 url(img/bg.png);
@@ -45,4 +47,6 @@
 	-moz-border-radius: 12px;
 	border-radius: 12px;
 	background-position: 15px 50%;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/button/button.css b/WebContent/VAADIN/themes/runo/button/button.scss
index 5515db5aec..5da6211804 100644
--- a/WebContent/VAADIN/themes/runo/button/button.css
+++ b/WebContent/VAADIN/themes/runo/button/button.scss
@@ -1,3 +1,5 @@
+@mixin runo-button {
+
 .v-button {
 	padding: 1px;
 	border: none;
@@ -26,7 +28,7 @@
 	border-color: rgba(146,151,152,.9);
 	border-top-color: rgba(146,151,152,1);
 	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4) inset;
-	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4) inset;;
+	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4) inset;
 	text-shadow: none;
 	}
 
@@ -96,8 +98,8 @@
 	border-bottom-color: #747f82;
 	color: #f0f2f2;
 	text-shadow: 0 -1px 0 #5d6969;
-	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4) inset;;
-	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4) inset;;
+	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4) inset;
+	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4) inset;
 	}
 
 .v-button-default .v-button-wrap,
@@ -154,3 +156,5 @@
 .v-checkbox .v-errorindicator {
 	padding-left: 10px;
 	}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/caption/caption.css b/WebContent/VAADIN/themes/runo/caption/caption.scss
index 93d7874665..dab33c99c7 100644
--- a/WebContent/VAADIN/themes/runo/caption/caption.css
+++ b/WebContent/VAADIN/themes/runo/caption/caption.scss
@@ -1,3 +1,5 @@
+@mixin runo-caption {
+
 .v-captionwrapper {
 	margin: 0.3em 0 0 0;
 }
@@ -6,3 +8,5 @@
 	height: 16px;
 	background: transparent url(../icons/16/error.png) no-repeat top right;
 }
+
+}
diff --git a/WebContent/VAADIN/themes/runo/common/common.css b/WebContent/VAADIN/themes/runo/common/common.scss
index 2b3aa372a2..a7c8d7ab7e 100644
--- a/WebContent/VAADIN/themes/runo/common/common.css
+++ b/WebContent/VAADIN/themes/runo/common/common.scss
@@ -1,3 +1,5 @@
+@mixin runo-common {
+
 .v-generated-body {
 	background: #e9eced;
 }
@@ -105,4 +107,6 @@
 .v-embedded-icon-16 img {
 	width:16px;
 	height:16px;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/datefield/datefield.css b/WebContent/VAADIN/themes/runo/datefield/datefield.scss
index 0bfa060a09..57ad061b65 100644
--- a/WebContent/VAADIN/themes/runo/datefield/datefield.css
+++ b/WebContent/VAADIN/themes/runo/datefield/datefield.scss
@@ -1,3 +1,5 @@
+@mixin runo-datefield {
+
 .v-datefield input.v-textfield,
 .v-datefield input.v-textfield[type=text] {
 	height: 18px;
@@ -107,7 +109,7 @@ td.v-datefield-calendarpanel-month {
 .v-datefield-calendarpanel-day-today {
 	border: 1px solid #429ce9;
 	width: 12px;
-	height: 14px
+	height: 14px;
 }
 .v-datefield-calendarpanel-day-entry {
 	color: #6a98b5;
@@ -143,3 +145,5 @@ td.v-datefield-calendarpanel-month {
 	color: #999;
 	font-style: normal;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/formlayout/formlayout.css b/WebContent/VAADIN/themes/runo/formlayout/formlayout.scss
index 466baafd8c..0766269d8b 100644
--- a/WebContent/VAADIN/themes/runo/formlayout/formlayout.css
+++ b/WebContent/VAADIN/themes/runo/formlayout/formlayout.scss
@@ -1,3 +1,5 @@
+@mixin runo-formlayout {
+
 .v-formlayout-cell .v-errorindicator {
 	width: 10px;
 	height: 16px;
@@ -51,4 +53,6 @@
 	padding: 0 4px 0.3em 4px;
 	font-weight: bold;
 	color: #464f52;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/gridlayout/gridlayout.css b/WebContent/VAADIN/themes/runo/gridlayout/gridlayout.scss
index a9c1fef15e..a8e9f7a7cd 100644
--- a/WebContent/VAADIN/themes/runo/gridlayout/gridlayout.css
+++ b/WebContent/VAADIN/themes/runo/gridlayout/gridlayout.scss
@@ -1,3 +1,5 @@
+@mixin runo-gridlayout {
+
 .v-gridlayout-margin-top {
 	padding-top: 15px;
 }
@@ -13,4 +15,6 @@
 .v-gridlayout-spacing-on {
 	padding-left: 8px;
 	padding-top: 8px;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/label/label.css b/WebContent/VAADIN/themes/runo/label/label.scss
index e851bd74f3..94bb5637e9 100644
--- a/WebContent/VAADIN/themes/runo/label/label.css
+++ b/WebContent/VAADIN/themes/runo/label/label.scss
@@ -1,3 +1,5 @@
+@mixin runo-label {
+
 .v-label h1,
 .v-label h2,
 .v-label h3,
@@ -67,4 +69,6 @@
 .v-sa .v-label hr,
 .v-ie8 .v-label hr {
 	height: 1px;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/link/link.css b/WebContent/VAADIN/themes/runo/link/link.scss
index a123156cb6..8c08a718b8 100644
--- a/WebContent/VAADIN/themes/runo/link/link.css
+++ b/WebContent/VAADIN/themes/runo/link/link.scss
@@ -1,3 +1,7 @@
+@mixin runo-link {
+
 .v-link a {
 	color: #464f52;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/menubar/menubar.css b/WebContent/VAADIN/themes/runo/menubar/menubar.scss
index 91cf78189d..a9c26a4b24 100644
--- a/WebContent/VAADIN/themes/runo/menubar/menubar.css
+++ b/WebContent/VAADIN/themes/runo/menubar/menubar.scss
@@ -1,3 +1,5 @@
+@mixin runo-menubar {
+
 .v-menubar {
 	color: #464f52;
 	border-left: 1px solid #c6cbcc;
@@ -32,4 +34,6 @@
 }
 .v-menubar-submenu .v-menubar-menuitem-caption .v-icon { 
 	vertical-align: middle;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/notification/notification.css b/WebContent/VAADIN/themes/runo/notification/notification.scss
index 1d9f868a14..f81f304923 100644
--- a/WebContent/VAADIN/themes/runo/notification/notification.css
+++ b/WebContent/VAADIN/themes/runo/notification/notification.scss
@@ -1,3 +1,5 @@
+@mixin runo-notification {
+
 .v-Notification {
 	font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
 	background-color: #94a0a3;
@@ -64,4 +66,6 @@
 	background-color: #ff0a0a;
 	font-size: .9em;
 	padding: 14px 32px;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/orderedlayout/orderedlayout.css b/WebContent/VAADIN/themes/runo/orderedlayout/orderedlayout.scss
index 306292d843..a8c85d9af6 100644
--- a/WebContent/VAADIN/themes/runo/orderedlayout/orderedlayout.css
+++ b/WebContent/VAADIN/themes/runo/orderedlayout/orderedlayout.scss
@@ -1,3 +1,5 @@
+@mixin runo-orderedlayout {
+
 .v-orderedlayout-margin-top,
 .v-horizontallayout-margin-top,
 .v-verticallayout-margin-top,
@@ -105,4 +107,6 @@ div.v-csslayout-box-shadow {
 .v-gecko .v-csslayout-box-shadow > .v-csslayout-margin {
 	-webkit-box-shadow: 0 2px 8px rgba(0,0,0,.4);
 	-moz-box-shadow: 0 2px 8px rgba(0,0,0,.4);
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/panel/panel.css b/WebContent/VAADIN/themes/runo/panel/panel.scss
index 138fb07f9c..5963f73434 100644
--- a/WebContent/VAADIN/themes/runo/panel/panel.css
+++ b/WebContent/VAADIN/themes/runo/panel/panel.scss
@@ -1,3 +1,5 @@
+@mixin runo-panel {
+
 .v-panel {
 	background: transparent url(img/top-left.png) no-repeat;
 }
@@ -76,4 +78,6 @@
 .v-ie8 .v-panel-deco { 
 	height: 0;
 	overflow: hidden;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/popupview/popupview.css b/WebContent/VAADIN/themes/runo/popupview/popupview.scss
index bbbfb69108..ddae62902e 100644
--- a/WebContent/VAADIN/themes/runo/popupview/popupview.css
+++ b/WebContent/VAADIN/themes/runo/popupview/popupview.scss
@@ -1,3 +1,5 @@
+@mixin runo-popupview {
+
 .v-popupview {
 	background: transparent;
 }
@@ -6,4 +8,6 @@
 	border-bottom: 1px solid #dee2e3;
 	background: #fff;
 	padding: 3px;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.css b/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.scss
index d8c110471a..31d4493b78 100644
--- a/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.css
+++ b/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.scss
@@ -1,3 +1,5 @@
+@mixin runo-progressindicator {
+
 .v-progressindicator-wrapper {
 	background: #dfe2e4 url(img/base.gif) repeat-x;
 	border: 1px solid #b6bbbc;
@@ -16,4 +18,6 @@
 }
 .v-progressindicator-indeterminate-disabled {
 	background: #dfe2e4;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/runo.scss b/WebContent/VAADIN/themes/runo/runo.scss
new file mode 100644
index 0000000000..9ef3ed118a
--- /dev/null
+++ b/WebContent/VAADIN/themes/runo/runo.scss
@@ -0,0 +1,27 @@
+// this file just defines all runo mixins by importing them
+
+@import "absolutelayout/absolutelayout.scss";
+@import "accordion/accordion.scss";
+@import "button/button.scss";
+@import "caption/caption.scss";
+@import "common/common.scss";
+@import "datefield/datefield.scss";
+@import "formlayout/formlayout.scss";
+@import "gridlayout/gridlayout.scss";
+@import "label/label.scss";
+@import "link/link.scss";
+@import "menubar/menubar.scss";
+@import "notification/notification.scss";
+@import "orderedlayout/orderedlayout.scss";
+@import "panel/panel.scss";
+@import "popupview/popupview.scss";
+@import "progressindicator/progressindicator.scss";
+@import "select/select.scss";
+@import "shadow/shadow.scss";
+@import "slider/slider.scss";
+@import "splitpanel/splitpanel.scss";
+@import "table/table.scss";
+@import "tabsheet/tabsheet.scss";
+@import "textfield/textfield.scss";
+@import "tree/tree.scss";
+@import "window/window.scss";
diff --git a/WebContent/VAADIN/themes/runo/select/select.css b/WebContent/VAADIN/themes/runo/select/select.scss
index 5c66cf81db..e043f143e3 100644
--- a/WebContent/VAADIN/themes/runo/select/select.css
+++ b/WebContent/VAADIN/themes/runo/select/select.scss
@@ -1,3 +1,5 @@
+@mixin runo-select {
+
 .v-select-select {
 	font-size: 13px;
 }
@@ -157,4 +159,5 @@
 .v-select-required .v-select-twincol-options {
 	background: #FFE0E0;
 }
-*/
\ No newline at end of file
+*/
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/shadow/shadow.css b/WebContent/VAADIN/themes/runo/shadow/shadow.scss
index 2fc9a1c608..96a911fca4 100644
--- a/WebContent/VAADIN/themes/runo/shadow/shadow.css
+++ b/WebContent/VAADIN/themes/runo/shadow/shadow.scss
@@ -1,3 +1,5 @@
+@mixin runo-shadow {
+
 .v-shadow {
 	position: absolute;
 }
@@ -65,4 +67,6 @@
     bottom: -5px;           right: -4px;
     width: 8px;          height: 8px;
     background: transparent url(img/bottom-right.png);
-} 
\ No newline at end of file
+}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/slider/slider.css b/WebContent/VAADIN/themes/runo/slider/slider.scss
index 698d15de90..3bc9e28702 100644
--- a/WebContent/VAADIN/themes/runo/slider/slider.css
+++ b/WebContent/VAADIN/themes/runo/slider/slider.scss
@@ -1,3 +1,5 @@
+@mixin runo-slider {
+
 .v-slider {
 	border-top: 1px solid #cccfd0;
 	border-bottom: 1px solid #cccfd0;
@@ -68,3 +70,4 @@
 	background-color: #FFE0E0;
 }
 */
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/splitpanel/splitpanel.css b/WebContent/VAADIN/themes/runo/splitpanel/splitpanel.scss
index d7851c27e6..dd01217380 100644
--- a/WebContent/VAADIN/themes/runo/splitpanel/splitpanel.css
+++ b/WebContent/VAADIN/themes/runo/splitpanel/splitpanel.scss
@@ -1,3 +1,5 @@
+@mixin runo-splitpanel {
+
 .v-splitpanel-horizontal,
 .v-splitpanel-vertical {
 	overflow: hidden;
@@ -81,4 +83,6 @@
 	background: transparent;
 	height: 5px;
 	margin: -2px 0 0 0;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/styles.scss b/WebContent/VAADIN/themes/runo/styles.scss
new file mode 100644
index 0000000000..1bbe531b23
--- /dev/null
+++ b/WebContent/VAADIN/themes/runo/styles.scss
@@ -0,0 +1,32 @@
+@import "../base/styles.scss";
+@import "runo.scss";
+
+// .v-theme-runo {
+@include runo-absolutelayout;
+@include runo-accordion;
+@include runo-button;
+@include runo-caption;
+
+@include runo-common;
+
+@include runo-datefield;
+@include runo-formlayout;
+@include runo-gridlayout;
+@include runo-label;
+@include runo-link;
+@include runo-menubar;
+@include runo-notification;
+@include runo-orderedlayout;
+@include runo-panel;
+@include runo-popupview;
+@include runo-progressindicator;
+@include runo-select;
+@include runo-shadow;
+@include runo-slider;
+@include runo-splitpanel;
+@include runo-table;
+@include runo-tabsheet;
+@include runo-textfield;
+@include runo-tree;
+@include runo-window;
+// }
diff --git a/WebContent/VAADIN/themes/runo/table/table.css b/WebContent/VAADIN/themes/runo/table/table.scss
index 42f93752be..47bcb2caca 100644
--- a/WebContent/VAADIN/themes/runo/table/table.css
+++ b/WebContent/VAADIN/themes/runo/table/table.scss
@@ -1,3 +1,5 @@
+@mixin runo-table {
+
 .v-table-header-wrap {
 	height: 36px;
 	border: 1px solid #b6bbbc;
@@ -200,3 +202,5 @@ tr.v-table-row-odd:hover {
 	line-height: 18px;
 	padding: 2px 0;
 }
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.css b/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.scss
index 7028b3ed16..683eb35f4c 100644
--- a/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.css
+++ b/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.scss
@@ -1,3 +1,5 @@
+@mixin runo-tabsheet {
+
 .v-tabsheet-tabs {
 	height: 48px;
 }
@@ -250,4 +252,6 @@
 }*/
 .v-ie .v-tabsheet-deco-light {
 	height: 0;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/textfield/textfield.css b/WebContent/VAADIN/themes/runo/textfield/textfield.scss
index af4443c80f..3382fbee91 100644
--- a/WebContent/VAADIN/themes/runo/textfield/textfield.css
+++ b/WebContent/VAADIN/themes/runo/textfield/textfield.scss
@@ -1,3 +1,5 @@
+@mixin runo-textfield {
+
 .v-textfield,
 .v-textarea {
 	background: #fff url(img/bg.png) repeat-x;
@@ -42,4 +44,6 @@ textarea.v-textarea-small {
 	height: 18px;
 	line-height: 12px;
 	padding: 1px 2px;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/tree/tree.css b/WebContent/VAADIN/themes/runo/tree/tree.scss
index 14061b8afb..cb3dff3156 100644
--- a/WebContent/VAADIN/themes/runo/tree/tree.css
+++ b/WebContent/VAADIN/themes/runo/tree/tree.scss
@@ -1,3 +1,5 @@
+@mixin runo-tree {
+
 .v-tree-node {
 	background: transparent url(img/collapsed.png) no-repeat 2px 1px;
 }
@@ -54,4 +56,6 @@
 }
 .v-tree-connectors .v-tree-node-drag-top.v-tree-node-leaf {
 	background-position: 2px 50%;
+}
+
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/window/window.css b/WebContent/VAADIN/themes/runo/window/window.scss
index 675c8942bf..b08f87b7fa 100644
--- a/WebContent/VAADIN/themes/runo/window/window.css
+++ b/WebContent/VAADIN/themes/runo/window/window.scss
@@ -1,3 +1,5 @@
+@mixin runo-window {
+
 .v-window {
 	color: #464f52;
 	font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
@@ -138,4 +140,6 @@
     bottom: -27px;           right: -20px;
     width: 39px;          height: 39px;
     background: transparent url(img/shadow/bottom-right.png);
+}
+
 }
\ No newline at end of file
diff --git a/build/buildhelpers/com/vaadin/buildhelpers/CompileDefaultTheme.java b/build/buildhelpers/com/vaadin/buildhelpers/CompileDefaultTheme.java
index 0f7ec4a14b..a23e5e912e 100644
--- a/build/buildhelpers/com/vaadin/buildhelpers/CompileDefaultTheme.java
+++ b/build/buildhelpers/com/vaadin/buildhelpers/CompileDefaultTheme.java
@@ -1,21 +1,16 @@
 package com.vaadin.buildhelpers;
 
-import java.io.BufferedReader;
 import java.io.BufferedWriter;
-import java.io.DataInputStream;
 import java.io.File;
-import java.io.FileInputStream;
 import java.io.FileNotFoundException;
 import java.io.FileWriter;
 import java.io.IOException;
-import java.io.InputStreamReader;
-import java.util.Arrays;
-import java.util.Comparator;
+
+import com.vaadin.sass.ScssStylesheet;
 
 /**
- * Helper to combine css divded into separate per component dirs into one to
+ * Helper to combine css divided into separate per component dirs into one to
  * optimize http requests.
- * 
  */
 public class CompileDefaultTheme {
 
@@ -42,79 +37,83 @@ public class CompileDefaultTheme {
                 break;
             }
         }
+
+        for (String themeName : new String[] { BASE, RUNO, LIFERAY, CHAMELEON }) {
+            try {
+                processSassTheme(themeName, false, ver);
+                System.out.println("Compiling theme " + themeName
+                        + " successful");
+            } catch (Exception e) {
+                System.err.println("Compiling theme " + themeName + " failed");
+                e.printStackTrace();
+            }
+        }
+
         // Compile Reindeer last, since it requires the spriting operation
         // (makes testing the other themes a bit faster, since you don't need to
         // wait for the spriting operation to finish before the theme CSS is
         // compiled)
-        combineTheme(new String[] { BASE }, false, ver);
-        combineTheme(new String[] { BASE, RUNO }, false, ver);
-        combineTheme(new String[] { BASE, LIFERAY }, false, ver);
-        combineTheme(new String[] { BASE, CHAMELEON }, false, ver);
-        combineTheme(new String[] { BASE, REINDEER }, true, ver);
+        for (String themeName : new String[] { REINDEER }) {
+            try {
+                processSassTheme(themeName, true, ver);
+                System.out.println("Compiling theme " + themeName
+                        + " successful");
+            } catch (Exception e) {
+                System.err.println("Compiling theme " + themeName + " failed");
+                e.printStackTrace();
+            }
+        }
     }
 
-    /**
-     * 
-     * @param themeNames
-     *            All themes that should be combined together (to include
-     *            inheritance). The order is the same in which the styles are
-     *            catenated. The resulted file is placed in the last specified
-     *            theme folder.
-     * 
-     * @param
-     * @throws IOException
-     */
-    private static void combineTheme(String[] themeNames,
-            boolean useSmartSprites, String version) throws IOException {
+    private static void processSassTheme(String themeName,
+            boolean useSmartSprites, String version) throws Exception {
 
-        StringBuffer combinedCss = new StringBuffer();
+        StringBuffer cssHeader = new StringBuffer();
 
         // Theme version
         if (version == null) {
             version = "9.9.9.INTERNAL-DEBUG-BUILD";
         }
         version = version.replaceAll("\\.", "_");
-        combinedCss.append(".v-theme-version:after {content:\"" + version
+        cssHeader.append(".v-theme-version:after {content:\"" + version
                 + "\";}\n");
-        combinedCss.append(".v-theme-version-" + version
-                + " {display: none;}\n");
-
-        for (int j = 0; j < themeNames.length; j++) {
-            File f = new File(THEME_DIR + themeNames[j]);
-            combinedCss
-                    .append("/* Automatically compiled css file from subdirectories. */\n");
-
-            File[] subdir = f.listFiles();
-            Arrays.sort(subdir, new Comparator<File>() {
-                public int compare(File arg0, File arg1) {
-                    return arg0.compareTo(arg1);
-                }
-            });
+        cssHeader.append(".v-theme-version-" + version + " {display: none;}\n");
 
-            for (int i = 0; i < subdir.length; i++) {
-                File dir = subdir[i];
-                String folder = dir.getName();
-                String filename = dir.getPath() + "/" + folder + ".css";
-
-                processCSSFile(new File(filename), folder, themeNames[j],
-                        combinedCss, j < themeNames.length - 1);
-            }
+        // TODO temporary hack for Reindeer
+        if (useSmartSprites) {
+            // TODO removed "../" from paths here
+            cssHeader
+                    .append("/** sprite: verticals; sprite-image: url(common/img/vertical-sprites.png); sprite-layout: vertical */\n");
+            cssHeader
+                    .append("/** sprite: horizontals; sprite-image: url(common/img/horizontal-sprites.png); sprite-layout: horizontal */\n");
+            cssHeader
+                    .append("/** sprite: black-verticals; sprite-image: url(common/img/black-vertical-sprites.png); sprite-layout: vertical; sprite-matte-color: #1e2022 */\n");
+            cssHeader
+                    .append("/** sprite: black-horizontals; sprite-image: url(common/img/black-horizontal-sprites.png); sprite-layout: horizontal; sprite-matte-color: #1e2022 */\n");
+            cssHeader
+                    .append("/** sprite: buttons; sprite-image: url(button/img/button-sprites.png); sprite-layout: vertical */\n");
+            cssHeader
+                    .append("/** sprite: black-buttons; sprite-image: url(button/img/black-button-sprites.png); sprite-layout: vertical */\n");
         }
 
-        String stylesCssDir = THEME_DIR + themeNames[themeNames.length - 1]
-                + "/";
+        String stylesCssDir = THEME_DIR + themeName + "/";
         String stylesCssName = stylesCssDir + "styles.css";
 
+        // Process as SASS file
+        File inputFile = new File(stylesCssDir + "styles.scss");
+        ScssStylesheet scss = ScssStylesheet.get(inputFile);
+        scss.compile();
+
         BufferedWriter out = new BufferedWriter(new FileWriter(stylesCssName));
-        out.write(combinedCss.toString());
+        out.write(cssHeader.toString());
+        out.write(scss.toString());
         out.close();
 
-        System.out.println("Compiled CSS to " + THEME_DIR
-                + themeNames[themeNames.length - 1] + "/styles.css ("
-                + combinedCss.toString().length() + " bytes)");
+        System.out.println("Compiled CSS to " + stylesCssName + " ("
+                + scss.toString().length() + " bytes)");
 
         if (useSmartSprites) {
-            createSprites(themeNames[themeNames.length - 1]);
+            createSprites(themeName);
             System.out.println("Used SmartSprites to create sprites");
             File oldCss = new File(stylesCssName);
             oldCss.delete();
@@ -128,99 +127,6 @@ public class CompileDefaultTheme {
         }
     }
 
-    private static void processCSSFile(File cssFile, String folder,
-            String themeName, StringBuffer combinedCss, boolean inheritedFile)
-            throws FileNotFoundException, IOException {
-        if (cssFile.isFile()) {
-
-            combinedCss.append("\n");
-
-            FileInputStream fstream = new FileInputStream(cssFile);
-            // Get the object of DataInputStream
-            DataInputStream in = new DataInputStream(fstream);
-            BufferedReader br = new BufferedReader(new InputStreamReader(in));
-            String strLine;
-            while ((strLine = br.readLine()) != null) {
-
-                // Parse import rules
-                if (strLine.startsWith("@import")) {
-                    // All import statements must be exactly
-                    // @import "file-to-import.css";
-                    // or
-                    // @import "subdir1[/subdir2]*/file-to-import.css"
-                    // ".." and other similar paths are not allowed in the url
-                    String importFilename = strLine.split("\"")[1];
-
-                    File importFile = new File(THEME_DIR + themeName + "/"
-                            + folder + "/" + importFilename);
-                    if (importFile.isFile()) {
-                        String currentFolder = folder;
-                        if (importFilename.contains("/")) {
-                            currentFolder = currentFolder
-                                    + "/"
-                                    + importFilename.substring(0,
-                                            importFilename.lastIndexOf("/"));
-                        }
-                        processCSSFile(importFile, currentFolder, themeName,
-                                combinedCss, inheritedFile);
-                    } else {
-                        System.out
-                                .println("File not found for @import statement "
-                                        + THEME_DIR
-                                        + themeName
-                                        + "/"
-                                        + folder
-                                        + "/" + importFilename);
-                    }
-                }
-
-                strLine = updateUrls(folder, themeName, inheritedFile, strLine);
-
-                if (!strLine.startsWith("@import")) {
-                    combinedCss.append(strLine);
-                    combinedCss.append("\n");
-                }
-            }
-            // Close the input stream
-            in.close();
-        }
-    }
-
-    private static String updateUrls(String folder, String themeName,
-            boolean inheritedFile, String strLine) {
-        // Define image url prefix
-        String urlPrefix = "";
-        if (inheritedFile) {
-            urlPrefix = "../" + themeName + "/";
-        }
-
-        if (strLine.indexOf("url(/") > 0) {
-            // Do nothing for urls beginning with /
-        } else if (strLine.indexOf("url(../") >= 0) {
-            // eliminate a path segment in the folder name for every
-            // "../"
-            String[] folderSegments = folder.split("/");
-            int segmentCount = folderSegments.length;
-            while (segmentCount > 0 && strLine.indexOf("url(../") >= 0) {
-                segmentCount--;
-                strLine = strLine.replaceAll("url\\(../", ("url\\("));
-            }
-            // add remaining path segments to urlPrefix
-            StringBuilder sb = new StringBuilder(urlPrefix);
-            for (int i = 0; i < segmentCount; i++) {
-                sb.append(folderSegments[i]);
-                sb.append("/");
-            }
-            strLine = strLine.replaceAll("url\\(", ("url\\(" + sb.toString()));
-
-        } else {
-            strLine = strLine.replaceAll("url\\(", ("url\\(" + urlPrefix
-                    + folder + "/"));
-
-        }
-        return strLine;
-    }
-
     private static void createSprites(String themeName)
             throws FileNotFoundException, IOException {
         String[] parameters = new String[] { "--sprite-png-depth", "AUTO",