Added support for $primaryStyleName to Runo

Change-Id: I2c1a24b2655c1b9361b52e24f542deb64be8a914

22 files changed, 383 insertions, 383 deletions

diff --git a/WebContent/VAADIN/themes/runo/absolutelayout/absolutelayout.scss b/WebContent/VAADIN/themes/runo/absolutelayout/absolutelayout.scss
index 623110ff63..e87d9f64ad 100644
--- a/WebContent/VAADIN/themes/runo/absolutelayout/absolutelayout.scss
+++ b/WebContent/VAADIN/themes/runo/absolutelayout/absolutelayout.scss
@@ -1,6 +1,6 @@
-@mixin runo-absolutelayout {
+@mixin runo-absolutelayout($primaryStyleName : v-absolutelayout) {
 
-.v-absolutelayout-wrapper {
+.#{$primaryStyleName}-wrapper {
 	position: absolute;
 	overflow:hidden;
 }
diff --git a/WebContent/VAADIN/themes/runo/accordion/accordion.scss b/WebContent/VAADIN/themes/runo/accordion/accordion.scss
index f9c9487536..deeb494371 100644
--- a/WebContent/VAADIN/themes/runo/accordion/accordion.scss
+++ b/WebContent/VAADIN/themes/runo/accordion/accordion.scss
@@ -1,6 +1,6 @@
-@mixin runo-accordion {
+@mixin runo-accordion($primaryStyleName : v-accordion) {
 
-.v-accordion-item-caption {
+.#{$primaryStyleName}-item-caption {
 	height: 31px;
 	background: #edf0f0 url(img/bg.png);
 	font-size: 15px;
@@ -8,35 +8,35 @@
 	border: none;
 	border-top: 1px solid #c8cccd;
 }
-.v-accordion-item-caption .v-caption {
+.#{$primaryStyleName}-item-caption .v-caption {
 	padding: 7px 0 6px 31px;
 	background: transparent url(img/collapsed-icon.png) no-repeat 18px 50%;
 }
-.v-accordion-item-open .v-accordion-item-caption {
+.#{$primaryStyleName}-item-open .#{$primaryStyleName}-item-caption {
 	color: #3b4b57;
 	background: #d5dee2 url(img/selected-bg.png);
 	border-bottom: 1px solid #b4b9ba;
 	text-shadow: 0 1px 0 #fff;
 }
-.v-accordion-item-open .v-accordion-item-caption .v-caption {
+.#{$primaryStyleName}-item-open .#{$primaryStyleName}-item-caption .v-caption {
 	background-image: url(img/expanded-icon.png);
 	background-position: 17px 50%;
 }
-.v-accordion-item-first .v-accordion-item-caption {
+.#{$primaryStyleName}-item-first .#{$primaryStyleName}-item-caption {
 	border-top: none;
 }
-.v-accordion-item-caption .v-caption:hover {
+.#{$primaryStyleName}-item-caption .v-caption:hover {
 	color: #3b4b57;
 }
 
 /* Light style */
-.v-accordion-light .v-accordion-item-caption {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-item-caption {
 	height: 24px;
 	padding: 3px 2px;
 	background: transparent;
 	border: none;
 }
-.v-accordion-light .v-accordion-item-caption .v-caption {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-item-caption .v-caption {
 	padding: 4px 15px 4px 28px;
 	font-size: 12px;
 	line-height: 16px;
diff --git a/WebContent/VAADIN/themes/runo/button/button.scss b/WebContent/VAADIN/themes/runo/button/button.scss
index 5da6211804..b303dd2e02 100644
--- a/WebContent/VAADIN/themes/runo/button/button.scss
+++ b/WebContent/VAADIN/themes/runo/button/button.scss
@@ -1,16 +1,16 @@
-@mixin runo-button {
+@mixin runo-button($primaryStyleName : v-button) {
 
-.v-button {
+.#{$primaryStyleName} {
 	padding: 1px;
 	border: none;
 	background: transparent;
 	}
 
-.v-button:focus {
+.#{$primaryStyleName}:focus {
 	outline: none;
 	}
 
-.v-button:focus .v-button-wrap {
+.#{$primaryStyleName}:focus .#{$primaryStyleName}-wrap {
 	border-color: #57a7ed;
 	border-top-color: #60aef1;
 	border-bottom-color: #4c9adf;
@@ -18,8 +18,8 @@
 	-moz-box-shadow:  0 0 2px #57a7ed;
 	}
 	
-.v-button:active .v-button-wrap,
-.v-button.v-pressed .v-button-wrap {
+.#{$primaryStyleName}:active .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}.v-pressed .#{$primaryStyleName}-wrap {
 	background-position: 0 -79px;
 	background-color: #e7e9e9;
 	border-color: #b8bdbe;
@@ -32,8 +32,8 @@
 	text-shadow: none;
 	}
 
-.v-button .v-button-wrap,
-.v-disabled.v-button .v-button-wrap {
+.#{$primaryStyleName} .#{$primaryStyleName}-wrap,
+.v-disabled.#{$primaryStyleName} .#{$primaryStyleName}-wrap {
 	display: block;
 	font-size: 12px;
 	border: 1px solid #bdc1c2;
@@ -59,8 +59,8 @@
 	}
 
 /* Small style */
-.v-button-small .v-button-wrap,
-.v-disabled.v-button-small .v-button-wrap {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-wrap,
+.v-disabled.#{$primaryStyleName}-small .#{$primaryStyleName}-wrap {
 	font-size: 11px;
 	line-height: 13px;
 	padding: 1px 12px;
@@ -69,8 +69,8 @@
 
 
 /* Big style */
-.v-button-big .v-button-wrap,
-.v-disabled.v-button-big .v-button-wrap {
+.#{$primaryStyleName}-big .#{$primaryStyleName}-wrap,
+.v-disabled.#{$primaryStyleName}-big .#{$primaryStyleName}-wrap {
 	font-size: 15px;
 	line-height: 18px;
 	padding: 4px 18px;
@@ -83,14 +83,14 @@
 
 
 /* Default style */
-.v-button-default:focus .v-button-wrap {
+.#{$primaryStyleName}-default:focus .#{$primaryStyleName}-wrap {
 	background-color: #60839a;
 	background-position: 0 -158px;
 	text-shadow: 0 -1px 0 #657883;
 	}
 
-.v-button-default:active .v-button-wrap,
-.v-button-default.v-pressed .v-button-wrap {
+.#{$primaryStyleName}-default:active .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-default.v-pressed .#{$primaryStyleName}-wrap {
 	background-position: 0 -79px;
 	background-color: #8f9898;
 	border-color: #737e81;
@@ -102,8 +102,8 @@
 	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4) inset;
 	}
 
-.v-button-default .v-button-wrap,
-.v-disabled.v-button-default .v-button-wrap {
+.#{$primaryStyleName}-default .#{$primaryStyleName}-wrap,
+.v-disabled.#{$primaryStyleName}-default .#{$primaryStyleName}-wrap {
 	border-color: #899395;
 	border-top-color: #a4abae;
 	border-bottom-color: #727b7d;
@@ -119,15 +119,15 @@
 
 
 /* Link style */
-.v-button-link,
-.v-disabled.v-button-link {
+.#{$primaryStyleName}-link,
+.v-disabled.#{$primaryStyleName}-link {
 	padding: 0;
 	}
 
-.v-button-link .v-button-wrap,
-.v-disabled.v-button-link .v-button-wrap,
-.v-button-link:active .v-button-wrap,
-.v-disabled.v-button-pressedv-button-link .v-button-wrap {
+.#{$primaryStyleName}-link .#{$primaryStyleName}-wrap,
+.v-disabled.#{$primaryStyleName}-link .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-link:active .#{$primaryStyleName}-wrap,
+.v-disabled.#{$primaryStyleName}-pressedv-button-link .#{$primaryStyleName}-wrap {
 	border: none;
 	background: transparent;
 	padding: 0;
@@ -140,11 +140,11 @@
 	text-shadow: none;
 	}
 
-.v-button-link:focus {
+.#{$primaryStyleName}-link:focus {
 	outline: 1px dotted #4897dc;
 	}
 
-.v-button-link:focus .v-button-wrap {
+.#{$primaryStyleName}-link:focus .#{$primaryStyleName}-wrap {
 	-webkit-box-shadow: none;
 	-moz-box-shadow: none;
 	}
diff --git a/WebContent/VAADIN/themes/runo/formlayout/formlayout.scss b/WebContent/VAADIN/themes/runo/formlayout/formlayout.scss
index bb27da1d5b..59151feeb7 100644
--- a/WebContent/VAADIN/themes/runo/formlayout/formlayout.scss
+++ b/WebContent/VAADIN/themes/runo/formlayout/formlayout.scss
@@ -1,33 +1,33 @@
-@mixin runo-formlayout {
+@mixin runo-formlayout($primaryStyleName : v-formlayout) {
 
-.v-formlayout-cell .v-errorindicator {
+.#{$primaryStyleName}-cell .v-errorindicator {
 	width: 10px;
 	height: 16px;
 	background: transparent url(../icons/16/error.png) no-repeat top right;
 }
-.v-formlayout-captioncell {
+.#{$primaryStyleName}-captioncell {
 	text-align:right;
 	white-space: nowrap;
 }
-.v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-captioncell, 
-.v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-contentcell,
-.v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-errorcell {
+.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-captioncell, 
+.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-contentcell,
+.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-errorcell {
 	padding-top: 8px;
 }
-.v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-captioncell, 
-.v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-contentcell,
-.v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-errorcell {
+.#{$primaryStyleName}-margin-top > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-captioncell, 
+.#{$primaryStyleName}-margin-top > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-contentcell,
+.#{$primaryStyleName}-margin-top > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-errorcell {
 	padding-top: 15px;
 }
-.v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-captioncell,
-.v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-contentcell,
-.v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-errorcell {
+.#{$primaryStyleName}-margin-bottom > tbody > .#{$primaryStyleName}-lastrow > .#{$primaryStyleName}-captioncell,
+.#{$primaryStyleName}-margin-bottom > tbody > .#{$primaryStyleName}-lastrow > .#{$primaryStyleName}-contentcell,
+.#{$primaryStyleName}-margin-bottom > tbody > .#{$primaryStyleName}-lastrow > .#{$primaryStyleName}-errorcell {
 	padding-bottom: 15px;
 }
-.v-formlayout-margin-left > tbody > .v-formlayout-row > .v-formlayout-captioncell {
+.#{$primaryStyleName}-margin-left > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-captioncell {
 	padding-left: 18px;
 } 
-.v-formlayout-margin-right > tbody > .v-formlayout-row > .v-formlayout-contentcell {
+.#{$primaryStyleName}-margin-right > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-contentcell {
 	padding-right: 18px;
 }
 /* form */
diff --git a/WebContent/VAADIN/themes/runo/gridlayout/gridlayout.scss b/WebContent/VAADIN/themes/runo/gridlayout/gridlayout.scss
index a8e9f7a7cd..e3fb628a6b 100644
--- a/WebContent/VAADIN/themes/runo/gridlayout/gridlayout.scss
+++ b/WebContent/VAADIN/themes/runo/gridlayout/gridlayout.scss
@@ -1,18 +1,18 @@
-@mixin runo-gridlayout {
+@mixin runo-gridlayout($primaryStyleName : v-gridlayout) {
 
-.v-gridlayout-margin-top {
+.#{$primaryStyleName}-margin-top {
 	padding-top: 15px;
 }
-.v-gridlayout-margin-bottom {
+.#{$primaryStyleName}-margin-bottom {
 	padding-bottom: 15px;
 }
-.v-gridlayout-margin-left {
+.#{$primaryStyleName}-margin-left {
 	padding-left: 18px;
 } 
-.v-gridlayout-margin-right {
+.#{$primaryStyleName}-margin-right {
 	padding-right: 18px;
 }
-.v-gridlayout-spacing-on {
+.#{$primaryStyleName}-spacing-on {
 	padding-left: 8px;
 	padding-top: 8px;
 }
diff --git a/WebContent/VAADIN/themes/runo/label/label.scss b/WebContent/VAADIN/themes/runo/label/label.scss
index b5308e4696..926f1d2cc3 100644
--- a/WebContent/VAADIN/themes/runo/label/label.scss
+++ b/WebContent/VAADIN/themes/runo/label/label.scss
@@ -1,16 +1,16 @@
-@mixin runo-label {
+@mixin runo-label($primaryStyleName : v-label) {
 
-.v-label h1,
-.v-label h2,
-.v-label h3,
-.v-label h4,
-.v-label h5,
-.v-label h6 {
+.#{$primaryStyleName} h1,
+.#{$primaryStyleName} h2,
+.#{$primaryStyleName} h3,
+.#{$primaryStyleName} h4,
+.#{$primaryStyleName} h5,
+.#{$primaryStyleName} h6 {
 	color: #404749;
 }
 
-.v-label-h1,
-.v-label h1 {
+.#{$primaryStyleName}-h1,
+.#{$primaryStyleName} h1 {
 	margin: 0;
 	padding: 8px 0 4px;
 	font-size: 24px;
@@ -20,8 +20,8 @@
 	text-shadow: 0 1px 1px #fff;
 }
 
-.v-label-h2,
-.v-label h2 {
+.#{$primaryStyleName}-h2,
+.#{$primaryStyleName} h2 {
 	color: #f14c1a;
 	font-size: 18px;
 	letter-spacing: -0.03em;
@@ -29,16 +29,16 @@
 	padding: 13px 0 5px;
 }
 
-.v-label-h3,
-.v-label h3 {
+.#{$primaryStyleName}-h3,
+.#{$primaryStyleName} h3 {
 	font-size: 15px;
 	letter-spacing: -0.03em;
 	font-weight: normal;
 	text-shadow: 0 1px 1px #fff;
 }
 
-.v-label-h4,
-.v-label h4 {
+.#{$primaryStyleName}-h4,
+.#{$primaryStyleName} h4 {
 	font-size: 13px;
 	font-weight: normal;
 	text-shadow: 0 1px 1px #fff;
@@ -46,14 +46,14 @@
 	padding: 8px 0 4px;
 }
 
-.v-label-small {
+.#{$primaryStyleName}-small {
 	font-size: .87em;
 	line-height: 1.4;
 	color: #707679;
 }
 
-.v-label hr,
-.v-label-hr {
+.#{$primaryStyleName} hr,
+.#{$primaryStyleName}-hr {
 	height: 2px;
 	overflow: hidden;
 	background: #ccd2d3;
@@ -62,12 +62,12 @@
 	border-bottom: 1px solid #fff;
 	margin: 0;
 }
-.v-label-hr {
+.#{$primaryStyleName}-hr {
 	height: 1px;
 }
 
-.v-sa & .v-label hr,
-.v-ie8 & .v-label hr {
+.v-sa & .#{$primaryStyleName} hr,
+.v-ie8 & .#{$primaryStyleName} hr {
 	height: 1px;
 }
 
diff --git a/WebContent/VAADIN/themes/runo/link/link.scss b/WebContent/VAADIN/themes/runo/link/link.scss
index 8c08a718b8..6970c6b2d8 100644
--- a/WebContent/VAADIN/themes/runo/link/link.scss
+++ b/WebContent/VAADIN/themes/runo/link/link.scss
@@ -1,6 +1,6 @@
-@mixin runo-link {
+@mixin runo-link($primaryStyleName : v-link) {
 
-.v-link a {
+.#{$primaryStyleName} a {
 	color: #464f52;
 }
 
diff --git a/WebContent/VAADIN/themes/runo/menubar/menubar.scss b/WebContent/VAADIN/themes/runo/menubar/menubar.scss
index a9c26a4b24..51efc6f28f 100644
--- a/WebContent/VAADIN/themes/runo/menubar/menubar.scss
+++ b/WebContent/VAADIN/themes/runo/menubar/menubar.scss
@@ -1,21 +1,21 @@
-@mixin runo-menubar {
+@mixin runo-menubar($primaryStyleName : v-menubar) {
 
-.v-menubar {
+.#{$primaryStyleName} {
 	color: #464f52;
 	border-left: 1px solid #c6cbcc;
 }
-.v-menubar .v-menubar-menuitem {
+.#{$primaryStyleName} .#{$primaryStyleName}-menuitem {
 	padding: 1px 10px;
 	border: 1px solid #c6cbcc;
 	border-left: none;
 	height: 18px;
 	line-height: 18x;
 }
-.v-menubar-menuitem-selected {
+.#{$primaryStyleName}-menuitem-selected {
 	color: #fff;
 	background: #5daee8;
 }
-.v-menubar-submenu {
+.#{$primaryStyleName}-submenu {
 	background: #e9eced url(../tabsheet/img/tab-bg.png);
 	font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
 	color: #464f52;
@@ -26,13 +26,13 @@
 	border-top: 1px solid #d0d4d5;
 	border-left: 1px solid #d0d4d5;
 }
-.v-menubar-submenu .v-menubar-menuitem {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem {
 	padding-top: 1px;
 	padding-bottom: 1px;
 	line-height: 16px;
 	padding-left: 10px;
 }
-.v-menubar-submenu .v-menubar-menuitem-caption .v-icon { 
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-caption .v-icon { 
 	vertical-align: middle;
 }
 
diff --git a/WebContent/VAADIN/themes/runo/notification/notification.scss b/WebContent/VAADIN/themes/runo/notification/notification.scss
index f81f304923..af0a2edc32 100644
--- a/WebContent/VAADIN/themes/runo/notification/notification.scss
+++ b/WebContent/VAADIN/themes/runo/notification/notification.scss
@@ -1,6 +1,6 @@
-@mixin runo-notification {
+@mixin runo-notification($primaryStyleName : v-Notification) {
 
-.v-Notification {
+.#{$primaryStyleName} {
 	font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
 	background-color: #94a0a3;
 	color: #ffffff;
@@ -15,35 +15,35 @@
 	-moz-box-shadow: 0 3px 10px rgba(0,0,0,.3);
 	margin: 10px;
 }
-.v-Notification h1,
-.v-Notification p,
-.v-Notification-error h1,
-.v-Notification-error p,
-.v-Notification-warning h1,
-.v-Notification-warning p {
+.#{$primaryStyleName} h1,
+.#{$primaryStyleName} p,
+.#{$primaryStyleName}-error h1,
+.#{$primaryStyleName}-error p,
+.#{$primaryStyleName}-warning h1,
+.#{$primaryStyleName}-warning p {
 	display: inline;
 	font-weight: normal;
 	line-height: normal;
 	margin: 0 10px 0 0;
 }
-.v-Notification-warning {
+.#{$primaryStyleName}-warning {
 	background: #fff1e4;
 	color: #dd3400;
 	border: 2px solid #ffaa90;
 	opacity: 1;
 }
-.v-Notification-error {
+.#{$primaryStyleName}-error {
 	background: #f13d13 url(img/close-error.png) no-repeat right 5px;
 	padding-right: 50px;
 }
-.v-Notification-tray {
+.#{$primaryStyleName}-tray {
 	background: #575e60;
 	padding: 3px;
 	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
 	-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
 	max-width: 17em;
 }
-.v-Notification-tray h1 {
+.#{$primaryStyleName}-tray h1 {
 	display: block;
 	font-weight: bold;
 	font-size: 0.9em;
@@ -55,14 +55,14 @@
 	-webkit-border-radius: 2px;
 	border-radius: 2px;
 }
-.v-Notification-tray p {
+.#{$primaryStyleName}-tray p {
 	display: block;
 	font-size: 0.8em;
 	line-height: 1.2;
 	margin: 4px 10px 5px 10px;
 	color: #e4e7ea;
 }
-.v-Notification-system {
+.#{$primaryStyleName}-system {
 	background-color: #ff0a0a;
 	font-size: .9em;
 	padding: 14px 32px;
diff --git a/WebContent/VAADIN/themes/runo/orderedlayout/orderedlayout.scss b/WebContent/VAADIN/themes/runo/orderedlayout/orderedlayout.scss
index bb202433b5..d01371599c 100644
--- a/WebContent/VAADIN/themes/runo/orderedlayout/orderedlayout.scss
+++ b/WebContent/VAADIN/themes/runo/orderedlayout/orderedlayout.scss
@@ -1,34 +1,34 @@
-@mixin runo-orderedlayout {
+@mixin runo-orderedlayout($primaryStyleName : v-orderedlayout) {
 
-.v-orderedlayout-margin-top,
+.#{$primaryStyleName}-margin-top,
 .v-horizontallayout-margin-top,
 .v-verticallayout-margin-top,
 .v-csslayout-margin-top,
 .v-layout.v-margin-top {
 	padding-top: 15px;
 }
-.v-orderedlayout-margin-right,
+.#{$primaryStyleName}-margin-right,
 .v-horizontallayout-margin-right,
 .v-verticallayout-margin-right,
 .v-csslayout-margin-right,
 .v-layout.v-margin-right {
 	padding-right: 18px;
 }
-.v-orderedlayout-margin-bottom,
+.#{$primaryStyleName}-margin-bottom,
 .v-horizontallayout-margin-bottom,
 .v-verticallayout-margin-bottom,
 .v-csslayout-margin-bottom,
 .v-layout.v-margin-bottom {
 	padding-bottom: 15px;
 }
-.v-orderedlayout-margin-left,
+.#{$primaryStyleName}-margin-left,
 .v-horizontallayout-margin-left,
 .v-verticallayout-margin-left,
 .v-csslayout-margin-left,
 .v-layout.v-margin-left {
 	padding-left: 18px;
 }
-.v-orderedlayout-spacing-on,
+.#{$primaryStyleName}-spacing-on,
 .v-horizontallayout-spacing-on,
 .v-verticallayout-spacing-on {
 	padding-top: 8px;
diff --git a/WebContent/VAADIN/themes/runo/panel/panel.scss b/WebContent/VAADIN/themes/runo/panel/panel.scss
index d33bcc5c62..1243cfbb77 100644
--- a/WebContent/VAADIN/themes/runo/panel/panel.scss
+++ b/WebContent/VAADIN/themes/runo/panel/panel.scss
@@ -1,15 +1,15 @@
-@mixin runo-panel {
+@mixin runo-panel($primaryStyleName : v-panel) {
 
-.v-panel {
+.#{$primaryStyleName} {
 	background: transparent url(img/top-left.png) no-repeat;
 }
-.v-panel-caption .v-errorindicator {
+.#{$primaryStyleName}-caption .v-errorindicator {
 	padding-right: 20px;
 	background: transparent url(../icons/16/error.png) no-repeat bottom center;
 	
 }
-.v-panel-caption,
-.v-panel-caption-light {
+.#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-caption-light {
 	font-size: 18px;
 	line-height: normal;
 	font-weight: normal;
@@ -21,22 +21,22 @@
 	background: transparent url(img/top-right.png) no-repeat right top;
 	text-overflow: ellipsis;
 }
-.v-panel-nocaption {
+.#{$primaryStyleName}-nocaption {
 	height: 9px;
 	margin-left: 10px;
 	background: transparent url(img/top-right.png) no-repeat right top;
 }
-.v-panel-content {
+.#{$primaryStyleName}-content {
 	border: 1px solid #babfc0;
 	border-bottom: 1px solid #dee2e3;
 	background-color: #fff;
 }
-.v-panel-deco {
+.#{$primaryStyleName}-deco {
 	height: 9px;
 	background: transparent url(img/bottom-right.png) repeat-x right top;
 	margin-left: 9px;
 }
-.v-panel-deco:before {
+.#{$primaryStyleName}-deco:before {
 	display: block;
 	
 	width: 9px;
@@ -45,37 +45,37 @@
 	background: transparent url(img/bottom-left.png) no-repeat;
 }
 /* Light panel style */
-.v-panel-light,
-.v-panel-caption-light {
+.#{$primaryStyleName}-light,
+.#{$primaryStyleName}-caption-light {
 	background: transparent;
 }
-.v-panel-caption-light {
+.#{$primaryStyleName}-caption-light {
 	border-bottom: 1px solid #babfc0;
 	margin: 0;
 	padding-left: 18px;
 }
-.v-panel-nocaption-light {
+.#{$primaryStyleName}-nocaption-light {
 	background: transparent;
 	border: none;
 	height: 0;
 	margin: 0;
 }
-.v-panel-content-light {
+.#{$primaryStyleName}-content-light {
 	border: none;
 	background: transparent;
 }
-.v-panel-deco-light {
+.#{$primaryStyleName}-deco-light {
 	height: 0;
 	overflow: hidden;
 }
 /* IE specific rules */
-.v-ie8 & .v-panel-content {
+.v-ie8 & .#{$primaryStyleName}-content {
 	border-bottom: 1px solid #babfc0;
 }
-.v-ie8 & .v-panel-content-light {
+.v-ie8 & .#{$primaryStyleName}-content-light {
 	border-bottom: none;
 }
-.v-ie8 & .v-panel-deco { 
+.v-ie8 & .#{$primaryStyleName}-deco { 
 	height: 0;
 	overflow: hidden;
 }
diff --git a/WebContent/VAADIN/themes/runo/popupview/popupview.scss b/WebContent/VAADIN/themes/runo/popupview/popupview.scss
index ddae62902e..e5bc664fdd 100644
--- a/WebContent/VAADIN/themes/runo/popupview/popupview.scss
+++ b/WebContent/VAADIN/themes/runo/popupview/popupview.scss
@@ -1,9 +1,9 @@
-@mixin runo-popupview {
+@mixin runo-popupview($primaryStyleName : v-popupview) {
 
-.v-popupview {
+.#{$primaryStyleName} {
 	background: transparent;
 }
-.v-popupview-popup {
+.#{$primaryStyleName}-popup {
 	border: 1px solid #babfc0;
 	border-bottom: 1px solid #dee2e3;
 	background: #fff;
diff --git a/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.scss b/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.scss
index 31d4493b78..9664a473b2 100644
--- a/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.scss
+++ b/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.scss
@@ -1,22 +1,22 @@
-@mixin runo-progressindicator {
+@mixin runo-progressindicator($primaryStyleName : v-progressindicator) {
 
-.v-progressindicator-wrapper {
+.#{$primaryStyleName}-wrapper {
 	background: #dfe2e4 url(img/base.gif) repeat-x;
 	border: 1px solid #b6bbbc;
 }
-.v-disabled .v-progressindicator-wrapper {
+.v-disabled .#{$primaryStyleName}-wrapper {
 	background-image: url(img/disabled.gif);
 }
-.v-progressindicator-indicator {
+.#{$primaryStyleName}-indicator {
 	background: #f7f9f9 url(img/progress.png);
 }
-.v-progressindicator-indicator {
+.#{$primaryStyleName}-indicator {
 	background: #f7f9f9 url(img/progress.png);
 }
-.v-progressindicator-indeterminate {
+.#{$primaryStyleName}-indeterminate {
 	background: #fff url(../../base/common/img/ajax-loader-medium.gif) no-repeat 50%;
 }
-.v-progressindicator-indeterminate-disabled {
+.#{$primaryStyleName}-indeterminate-disabled {
 	background: #dfe2e4;
 }
 
diff --git a/WebContent/VAADIN/themes/runo/select/select.scss b/WebContent/VAADIN/themes/runo/select/select.scss
index 6ba9acecd7..cc9846f145 100644
--- a/WebContent/VAADIN/themes/runo/select/select.scss
+++ b/WebContent/VAADIN/themes/runo/select/select.scss
@@ -1,4 +1,4 @@
-@mixin runo-select {
+@mixin runo-select($primaryStyleName : v-filterselect) {
 
 .v-select-select {
 	font-size: 13px;
@@ -14,14 +14,14 @@
 
 /** Filterselect aka ComboBox styles */
 
-.v-filterselect {
+.#{$primaryStyleName} {
 	height: 23px;
 	background: transparent url(img/bg-left-filter.png) no-repeat;
 	padding-left: 4px;
 }
-&.v-app .v-filterselect .v-filterselect-input,
-.v-window .v-filterselect .v-filterselect-input,
-.v-popupview-popup .v-filterselect .v-filterselect-input {
+&.v-app .#{$primaryStyleName} .#{$primaryStyleName}-input,
+.v-window .#{$primaryStyleName} .#{$primaryStyleName}-input,
+.v-popupview-popup .#{$primaryStyleName} .#{$primaryStyleName}-input {
 	background: transparent url(img/bg-center-filter.png) no-repeat 1px 0;
 	border: none;
 	height: 23px;
@@ -29,38 +29,38 @@
 	padding: 2px 0 1px 2px;
 	font-size: 13px;
 }
-.v-filterselect-prompt .v-filterselect-input {
+.#{$primaryStyleName}-prompt .#{$primaryStyleName}-input {
 	font-style: normal;
 }
-.v-filterselect-input:focus {
+.#{$primaryStyleName}-input:focus {
 	/* remove safari/mac outline from this element */
 	outline: none;
 }
-.v-filterselect-focus {
+.#{$primaryStyleName}-focus {
 	outline: 1px solid #5daee8;
 	outline-offset: -1px;
 }
-.v-sa & .v-filterselect-focus {
+.v-sa & .#{$primaryStyleName}-focus {
 	/* place safari focus outline around the whole thing */
 	outline: 5px auto -webkit-focus-ring-color;
 	outline-offset: -4px;
 }
-.v-filterselect-button {
+.#{$primaryStyleName}-button {
 	width: 25px;
 	height: 23px;
 	background: transparent url(img/bg-right-filter.png);
 }
-.v-filterselect-button:hover {
+.#{$primaryStyleName}-button:hover {
 	background-position: bottom left;
 }
-.v-disabled .v-filterselect-button:hover,
-.v-readonly .v-filterselect-button:hover {
+.v-disabled .#{$primaryStyleName}-button:hover,
+.v-readonly .#{$primaryStyleName}-button:hover {
 	background-position: top left;
 }
-.v-filterselect.v-readonly .v-filterselect-input {
+.#{$primaryStyleName}.v-readonly .#{$primaryStyleName}-input {
 	background: transparent;
 }
-.v-filterselect-suggestpopup {
+.#{$primaryStyleName}-suggestpopup {
 	background: #f6f7f7;
 	border: 1px solid #b6bbbc;
 	font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
@@ -69,45 +69,45 @@
 	line-height: 18px;
 	margin-top: -1px;
 }
-.v-filterselect-suggestmenu .gwt-MenuItem {
+.#{$primaryStyleName}-suggestmenu .gwt-MenuItem {
 	padding: 1px 6px;
 	cursor: pointer;
 	height: 18px;
 }
-.v-ff & .v-filterselect-suggestmenu .gwt-MenuItem {
+.v-ff & .#{$primaryStyleName}-suggestmenu .gwt-MenuItem {
 	height: 20px;
 }
-.v-filterselect-suggestmenu .gwt-MenuItem .v-icon {
+.#{$primaryStyleName}-suggestmenu .gwt-MenuItem .v-icon {
 	margin-right: 3px;
 }
-.v-filterselect-suggestmenu .gwt-MenuItem-selected {
+.#{$primaryStyleName}-suggestmenu .gwt-MenuItem-selected {
 	background: #5daee8;
 	color: #fff;
 }
-.v-filterselect-nextpage,
-.v-filterselect-nextpage-off,
-.v-filterselect-prevpage-off,
-.v-filterselect-prevpage {
+.#{$primaryStyleName}-nextpage,
+.#{$primaryStyleName}-nextpage-off,
+.#{$primaryStyleName}-prevpage-off,
+.#{$primaryStyleName}-prevpage {
 	height: 11px;
 	width:100%;
 	background: transparent url(img/button-bg.png) no-repeat 50% 0;
 	margin: 2px 0 0 0;
 }
-.v-filterselect-prevpage,
-.v-filterselect-prevpage-off {
+.#{$primaryStyleName}-prevpage,
+.#{$primaryStyleName}-prevpage-off {
 	background-position: 50% -1px;
 	margin: 0 0 2px 0;
 }
-.v-filterselect-prevpage:hover {
+.#{$primaryStyleName}-prevpage:hover {
 	background-position: 50% bottom;
 }
-.v-filterselect-nextpage:hover {
+.#{$primaryStyleName}-nextpage:hover {
 	background-position: 50% -12px;
 }
-.v-filterselect-nextpage span,
-.v-filterselect-nextpage-off span,
-.v-filterselect-prevpage-off span,
-.v-filterselect-prevpage span {
+.#{$primaryStyleName}-nextpage span,
+.#{$primaryStyleName}-nextpage-off span,
+.#{$primaryStyleName}-prevpage-off span,
+.#{$primaryStyleName}-prevpage span {
 	display: block;
 	height: 12px;
 	width:100%;
@@ -116,11 +116,11 @@
 	cursor: pointer;
 	overflow: hidden;
 }
-.v-filterselect-nextpage span,
-.v-filterselect-nextpage-off span {
+.#{$primaryStyleName}-nextpage span,
+.#{$primaryStyleName}-nextpage-off span {
 	background: transparent url(img/arrow-down.png) no-repeat 50% 60%;
 }
-.v-filterselect-status {
+.#{$primaryStyleName}-status {
 	font-size: 11px;
 	line-height: 11px;
 	width: 100%;
@@ -133,13 +133,13 @@
 /* Error styles (disabled by default)
    ----------------------------------
 
-.v-filterselect-error {
+.#{$primaryStyleName}-error {
 	background-image: url(img/bg-left-filter-error.png);
 }
-.v-filterselect-error .v-filterselect-input {
+.#{$primaryStyleName}-error .#{$primaryStyleName}-input {
 	background-image: url(img/bg-center-filter-error.png);
 }
-.v-filterselect-error .v-filterselect-button {
+.#{$primaryStyleName}-error .#{$primaryStyleName}-button {
 	background-image: url(img/bg-right-filter-error.png);
 }
 .v-select-error .v-select-option,
diff --git a/WebContent/VAADIN/themes/runo/shadow/shadow.scss b/WebContent/VAADIN/themes/runo/shadow/shadow.scss
index 96a911fca4..f24cab1bd2 100644
--- a/WebContent/VAADIN/themes/runo/shadow/shadow.scss
+++ b/WebContent/VAADIN/themes/runo/shadow/shadow.scss
@@ -1,31 +1,31 @@
-@mixin runo-shadow {
+@mixin runo-shadow($primaryStyleName : v-shadow) {
 
-.v-shadow {
+.#{$primaryStyleName} {
 	position: absolute;
 }
 
-.v-shadow .top-left {
+.#{$primaryStyleName} .top-left {
     position: absolute; overflow: hidden;
     top: -3px;             left: -4px;
     width: 8px;         height: 8px;
     background: transparent url(img/top-left.png);
 }
 
-.v-shadow .top {
+.#{$primaryStyleName} .top {
     position: absolute; overflow: hidden;
     top: -3px;             left: 4px;
     height: 8px;           right: 4px;
     background: transparent url(img/top.png);
 }
 
-.v-shadow .top-right {
+.#{$primaryStyleName} .top-right {
     position: absolute; overflow: hidden;
     top: -3px;             right: -4px;
     width: 8px;         height: 8px;
     background: transparent url(img/top-right.png);
 }
 
-.v-shadow .left {
+.#{$primaryStyleName} .left {
     position: absolute; overflow: hidden;
     top: 5px;           left: -4px;
     width: 8px;
@@ -33,14 +33,14 @@
     background: transparent url(img/left.png);
 }
 
-.v-shadow .center {
+.#{$primaryStyleName} .center {
     position: absolute; overflow: hidden;
     top: 5px;           left: 4px;
     bottom: 3px;        right: 4px;
     background: transparent url(img/center.png);
 }
 
-.v-shadow .right {
+.#{$primaryStyleName} .right {
     position: absolute; overflow: hidden;
     top: 5px;           right: -4px;
     width: 8px;
@@ -48,21 +48,21 @@
     background: transparent url(img/right.png);
 }
 
-.v-shadow .bottom-left {
+.#{$primaryStyleName} .bottom-left {
     position: absolute; overflow: hidden;
     bottom: -5px;           left: -4px;
     width: 8px;          height: 8px;
     background: transparent url(img/bottom-left.png);
 }
 
-.v-shadow .bottom {
+.#{$primaryStyleName} .bottom {
     position: absolute; overflow: hidden;
     bottom: -5px;           left: 4px;
     right: 4px;          height: 8px;
     background: transparent url(img/bottom.png);
 }
 
-.v-shadow .bottom-right {
+.#{$primaryStyleName} .bottom-right {
     position: absolute; overflow: hidden;
     bottom: -5px;           right: -4px;
     width: 8px;          height: 8px;
diff --git a/WebContent/VAADIN/themes/runo/slider/slider.scss b/WebContent/VAADIN/themes/runo/slider/slider.scss
index 3bc9e28702..aa8cbe3e7a 100644
--- a/WebContent/VAADIN/themes/runo/slider/slider.scss
+++ b/WebContent/VAADIN/themes/runo/slider/slider.scss
@@ -1,11 +1,11 @@
-@mixin runo-slider {
+@mixin runo-slider($primaryStyleName : v-slider) {
 
-.v-slider {
+.#{$primaryStyleName} {
 	border-top: 1px solid #cccfd0;
 	border-bottom: 1px solid #cccfd0;
 	margin: 5px 0;
 }
-.v-slider-base {
+.#{$primaryStyleName}-base {
 	/* changing the borders will require adjustments to ISlider.java */
 	height: 2px;
 	background: #f3f3f4;
@@ -13,18 +13,18 @@
 	border-left: 1px solid #cccfd0;
 	border-right: 1px solid #cccfd0;
 }
-.v-slider-handle {
+.#{$primaryStyleName}-handle {
 	background: transparent url(img/handle-horizontal.png);
 	width: 12px;
 	height: 12px;
 	margin-top: -5px;
 	cursor: pointer;
 }
-.v-slider-handle:hover {
+.#{$primaryStyleName}-handle:hover {
 	background-position: left bottom;
 }
-.v-slider-scrollbar .v-slider-handle,
-.v-slider-scrollbar.v-slider-vertical .v-slider-handle {
+.#{$primaryStyleName}-scrollbar .#{$primaryStyleName}-handle,
+.#{$primaryStyleName}-scrollbar.#{$primaryStyleName}-vertical .#{$primaryStyleName}-handle {
 	background: #ffffff;
 	border: 1px solid #cccfd0;
 	border-radius: 6px;
@@ -32,14 +32,14 @@
 	-webkit-border-radius: 6px;
 }
 
-.v-slider-vertical {
+.#{$primaryStyleName}-vertical {
 	width: 3px;
 	margin: 0 5px;
 	border: none;
 	border-left: 1px solid #cccfd0;
 	border-right: 1px solid #cccfd0;
 }
-.v-slider-vertical .v-slider-base {
+.#{$primaryStyleName}-vertical .#{$primaryStyleName}-base {
 	width: 2px;
 	border-left: 1px solid #cbcdce;
 	border-right: none;
@@ -47,25 +47,25 @@
 	border-top: 1px solid #cccfd0;
 	border-bottom: 1px solid #cccfd0;	
 }
-.v-slider-vertical .v-slider-handle {
+.#{$primaryStyleName}-vertical .#{$primaryStyleName}-handle {
 	background: transparent url(img/handle-vertical.png);
 	width: 12px;
 	height: 12px;
 	margin-left: -5px;
 }
-.v-slider-vertical .v-slider-handle-active {
+.#{$primaryStyleName}-vertical .#{$primaryStyleName}-handle-active {
 	background-position: left bottom;
 }
 
 /* Disabled by default
-.v-slider-error .v-slider-base {
+.#{$primaryStyleName}-error .#{$primaryStyleName}-base {
 	background:transparent;
 	background-color: #FFE0E0;
 }
 */
 
 /* Disabled by default
-.v-slider-required .v-slider-base {
+.#{$primaryStyleName}-required .#{$primaryStyleName}-base {
 	background:transparent;
 	background-color: #FFE0E0;
 }
diff --git a/WebContent/VAADIN/themes/runo/splitpanel/splitpanel.scss b/WebContent/VAADIN/themes/runo/splitpanel/splitpanel.scss
index dd01217380..84b8f5cd44 100644
--- a/WebContent/VAADIN/themes/runo/splitpanel/splitpanel.scss
+++ b/WebContent/VAADIN/themes/runo/splitpanel/splitpanel.scss
@@ -1,17 +1,17 @@
-@mixin runo-splitpanel {
+@mixin runo-splitpanel($primaryStyleName : v-splitpanel) {
 
-.v-splitpanel-horizontal,
-.v-splitpanel-vertical {
+.#{$primaryStyleName}-horizontal,
+.#{$primaryStyleName}-vertical {
 	overflow: hidden;
 }
 
-.v-splitpanel-hsplitter,
-.v-splitpanel-hsplitter-locked {
+.#{$primaryStyleName}-hsplitter,
+.#{$primaryStyleName}-hsplitter-locked {
 	width: 6px;
 }
 
-.v-splitpanel-hsplitter div,
-.v-splitpanel-hsplitter-locked div {
+.#{$primaryStyleName}-hsplitter div,
+.#{$primaryStyleName}-hsplitter-locked div {
 	width: 6px;
 	position: absolute;
 	top: 0;
@@ -21,13 +21,13 @@
 	margin: 0 -1px;
 }
 
-.v-splitpanel-vsplitter,
-.v-splitpanel-vsplitter-locked {
+.#{$primaryStyleName}-vsplitter,
+.#{$primaryStyleName}-vsplitter-locked {
 	height: 6px;
 }
 
-.v-splitpanel-vsplitter div,
-.v-splitpanel-vsplitter-locked div {
+.#{$primaryStyleName}-vsplitter div,
+.#{$primaryStyleName}-vsplitter-locked div {
 	height: 6px;
 	background: #ccd2d0 url(img/bg_ver.png);
 	border: 1px solid #b6bbbc;
@@ -36,49 +36,49 @@
 
 
 /* Rounded style */
-.v-splitpanel-hsplitter-rounded div,
-.v-splitpanel-vsplitter-rounded div,
-.v-splitpanel-hsplitter-rounded-locked div,
-.v-splitpanel-vsplitter-rounded-locked div {
+.#{$primaryStyleName}-hsplitter-rounded div,
+.#{$primaryStyleName}-vsplitter-rounded div,
+.#{$primaryStyleName}-hsplitter-rounded-locked div,
+.#{$primaryStyleName}-vsplitter-rounded-locked div {
 	-webkit-border-radius: 4px;
 	-moz-border-radius: 4px;
 	border-radius: 4px;
 }
-.v-splitpanel-hsplitter-rounded div,
-.v-splitpanel-hsplitter-rounded-locked div {
+.#{$primaryStyleName}-hsplitter-rounded div,
+.#{$primaryStyleName}-hsplitter-rounded-locked div {
 	top: 4px;
 	bottom: 4px;
 }
-.v-splitpanel-vsplitter-rounded div,
-.v-splitpanel-vsplitter-rounded-locked div {
+.#{$primaryStyleName}-vsplitter-rounded div,
+.#{$primaryStyleName}-vsplitter-rounded-locked div {
 	margin: -1px 4px;
 }
 
 
 /* Small style */
-.v-splitpanel-hsplitter-small,
-.v-splitpanel-vsplitter-small,
-.v-splitpanel-hsplitter-small-locked,
-.v-splitpanel-vsplitter-small-locked {
+.#{$primaryStyleName}-hsplitter-small,
+.#{$primaryStyleName}-vsplitter-small,
+.#{$primaryStyleName}-hsplitter-small-locked,
+.#{$primaryStyleName}-vsplitter-small-locked {
 	background: #b6bbbc;
 }
-.v-splitpanel-hsplitter-small,
-.v-splitpanel-hsplitter-small-locked {
+.#{$primaryStyleName}-hsplitter-small,
+.#{$primaryStyleName}-hsplitter-small-locked {
 	width: 1px;
 }
-.v-splitpanel-vsplitter-small,
-.v-splitpanel-vsplitter-small-locked {
+.#{$primaryStyleName}-vsplitter-small,
+.#{$primaryStyleName}-vsplitter-small-locked {
 	height: 1px;
 }
-.v-splitpanel-hsplitter-small div,
-.v-splitpanel-hsplitter-small-locked div {
+.#{$primaryStyleName}-hsplitter-small div,
+.#{$primaryStyleName}-hsplitter-small-locked div {
 	border: none;
 	background: transparent;
 	width: 5px;
 	margin: 0 0 0 -2px;
 }
-.v-splitpanel-vsplitter-small div,
-.v-splitpanel-vsplitter-small-locked div {
+.#{$primaryStyleName}-vsplitter-small div,
+.#{$primaryStyleName}-vsplitter-small-locked div {
 	border: none;
 	background: transparent;
 	height: 5px;
diff --git a/WebContent/VAADIN/themes/runo/table/table.scss b/WebContent/VAADIN/themes/runo/table/table.scss
index 47bcb2caca..3902ed7cb0 100644
--- a/WebContent/VAADIN/themes/runo/table/table.scss
+++ b/WebContent/VAADIN/themes/runo/table/table.scss
@@ -1,86 +1,86 @@
-@mixin runo-table {
+@mixin runo-table($primaryStyleName : v-table) {
 
-.v-table-header-wrap {
+.#{$primaryStyleName}-header-wrap {
 	height: 36px;
 	border: 1px solid #b6bbbc;
 	border-bottom: none;
 	background: #e7e9ea url(img/header-bg.png) repeat-x;
 }
-.v-table-header {
+.#{$primaryStyleName}-header {
 	height: 36px;
 }
-.v-table-footer-wrap {
+.#{$primaryStyleName}-footer-wrap {
 	border-color: #b6bbbc;
 	background: #e7e9ea url(img/header-bg.png) repeat-x;
 }
-.v-table-footer td {
+.#{$primaryStyleName}-footer td {
 	border-right-color: #e8eaec;
 	padding-top: 3px;
 	padding-bottom: 3px;
 }
-.v-table-resizer {
+.#{$primaryStyleName}-resizer {
 	height: 36px;
 	width: 4px;
 	background: transparent url(img/resizer-bg.png) repeat-y 100% 50%;
 }
-.v-table-caption-container {
+.#{$primaryStyleName}-caption-container {
 	color: #393a3c;
 	font-size: 15px;
 	padding: 9px 2px 9px 0;
 	text-shadow: #ffffff 0 1px 0;
 	margin-left: 4px;
 }
-.v-table-sort-indicator {
+.#{$primaryStyleName}-sort-indicator {
 	width: 0;
 	height: 36px;
 }
-.v-table-header-cell-asc .v-table-sort-indicator {
+.#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator {
 	background: transparent url(img/sort-asc.png) no-repeat right 50%;
 	width: 20px;
 	height: 36px;
 }
-.v-table-header-cell-desc .v-table-sort-indicator {
+.#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator {
 	background: transparent url(img/sort-desc.png) no-repeat right 50%;
 	width: 20px;
 	height: 36px;
 }
-.v-table-header-cell:hover,
-.v-table-header-cell-asc:hover,
-.v-table-header-cell-desc:hover {
+.#{$primaryStyleName}-header-cell:hover,
+.#{$primaryStyleName}-header-cell-asc:hover,
+.#{$primaryStyleName}-header-cell-desc:hover {
 	background: transparent url(img/header-bg-over.png) repeat-x;
 }
-.v-table-body {
+.#{$primaryStyleName}-body {
 	background: #fff;
 	border: 1px solid #b6bbbc;
 }
-tr.v-table-row:hover,
-tr.v-table-row-odd:hover {
+tr.#{$primaryStyleName}-row:hover,
+tr.#{$primaryStyleName}-row-odd:hover {
 	background-color: #edeeee;
 }
-.v-table-row,
-.v-table-body-noselection .v-table-row:hover {
+.#{$primaryStyleName}-row,
+.#{$primaryStyleName}-body-noselection .#{$primaryStyleName}-row:hover {
 	background-color: #fff;
 }
-.v-table-row-odd,
-.v-table-body-noselection .v-table-row-odd:hover {
+.#{$primaryStyleName}-row-odd,
+.#{$primaryStyleName}-body-noselection .#{$primaryStyleName}-row-odd:hover {
 	background-color: #f6f7f7;
 }
-.v-table-generated-row {
+.#{$primaryStyleName}-generated-row {
     color: #393a3c;
     font-size: 15px;
     padding: 9px 2px 9px 0;
     text-shadow: #ffffff 0 1px 0;
     background: #e7e9ea;
 }
-.v-table tr.v-selected {
+.#{$primaryStyleName} tr.v-selected {
 	background: #57a7ed;
 	color: #fff;
 }
-.v-table-cell-content {
+.#{$primaryStyleName}-cell-content {
 	padding: 0 6px 0 4px;
 	border-right: none;
 }
-.v-table-cell-wrapper {
+.#{$primaryStyleName}-cell-wrapper {
 	white-space: nowrap;
 	overflow: hidden;
 	line-height: 23px;
@@ -88,40 +88,40 @@ tr.v-table-row-odd:hover {
 	padding: 3px 0 0 0;
 }
 /* Fix textfield size to correspond label size inside table */
-.v-table-cell-content .v-textfield,
-.v-table-cell-content .v-button {
+.#{$primaryStyleName}-cell-content .v-textfield,
+.#{$primaryStyleName}-cell-content .v-button {
 	margin: -3px 0 0 0;
 }
-.v-table-cell-content .v-textfield,
-.v-table-cell-content .v-datefield {
+.#{$primaryStyleName}-cell-content .v-textfield,
+.#{$primaryStyleName}-cell-content .v-datefield {
 	width: 97%; /* approximate */
 }
 /* ...but not for datefield textarea */
-.v-table-cell-content .v-datefield .v-textfield {
+.#{$primaryStyleName}-cell-content .v-datefield .v-textfield {
 	width: auto;
 	
 }
 /* datefield button is too high for table cell */
-.v-table-cell-content .v-datefield-button {
+.#{$primaryStyleName}-cell-content .v-datefield-button {
 	height: 25px;
 	margin: -3px 0 0 0;
 }
-.v-table-column-selector {
+.#{$primaryStyleName}-column-selector {
 	background: transparent url(img/colsel.png) no-repeat;
 	margin: -36px 0 0 0;
 	height: 36px;
 	width: 15px;
 }
-.v-table-focus-slot-left {
+.#{$primaryStyleName}-focus-slot-left {
 	border-color: #b6bbbc;
 	margin-bottom: -36px;
 	width: auto;
 	border-right: none;
 }
-.v-table-focus-slot-right {
+.#{$primaryStyleName}-focus-slot-right {
 	border-color: #b6bbbc;
 }
-.v-table-header-drag {
+.#{$primaryStyleName}-header-drag {
 	background: #e7edf3 url(img/header-bg.png) repeat-x;
 	border: 1px solid #b6bbbc;
 	padding: 4px;
@@ -130,13 +130,13 @@ tr.v-table-row-odd:hover {
 	font-size: 15px;
 	margin-top: 20px;
 }
-.v-table-scrollposition {
+.#{$primaryStyleName}-scrollposition {
 	width: 160px;
 	height: 39px;
 	background: transparent url(img/scroll-position-bg.png);
 	border: none;
 }
-.v-table-scrollposition span {
+.#{$primaryStyleName}-scrollposition span {
 	display: block;
 	margin-top: 8px;
 	text-align: center;
@@ -153,52 +153,52 @@ tr.v-table-row-odd:hover {
 .v-off div {
 	text-indent: 6px;
 }
-.v-table .v-link {
+.#{$primaryStyleName} .v-link {
 	display: inline;
 }
 
 /* Borderless style */
-.v-table-borderless .v-table-header-wrap,
-.v-table-borderless .v-table-body {
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-header-wrap,
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-body {
 	border: none;
 }
-.v-table-borderless .v-table-header-wrap {
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-header-wrap {
 	border-bottom: 1px solid #b6bbbc;
 }
-.v-table-borderless .v-table-body {
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-body {
 	background: transparent;
 }
-.v-table-borderless .v-table-row,
-.v-table-borderless .v-table-row-odd,
-.v-table-borderless .v-table-body-noselection .v-table-row:hover,
-.v-table-borderless .v-table-body-noselection .v-table-row-odd:hover {
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-row,
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-row-odd,
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-body-noselection .#{$primaryStyleName}-row:hover,
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-body-noselection .#{$primaryStyleName}-row-odd:hover {
 	background-color: transparent;
 }
 
 
 /* Small style */
-.v-table-small .v-table-header-wrap,
-.v-table-small .v-table-header {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-header-wrap,
+.#{$primaryStyleName}-small .#{$primaryStyleName}-header {
 	height: 22px;
 }
-.v-table-small .v-table-sort-indicator,
-.v-table-small .v-table-header-cell-asc .v-table-sort-indicator,
-.v-table-small .v-table-header-cell-desc .v-table-sort-indicator {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-sort-indicator,
+.#{$primaryStyleName}-small .#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator,
+.#{$primaryStyleName}-small .#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator {
 	height: 22px;
 }
-.v-table-small .v-table-caption-container {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-caption-container {
 	font-size: 13px;
 	padding-top: 3px;
 	padding-bottom: 3px;
 }
-.v-table-small .v-table-column-selector {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-column-selector {
 	margin-top: -21px;
 	height: 21px;
 }
-.v-table-small .v-table-body {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-body {
 	font-size: 12px;
 }
-.v-table-small .v-table-cell-wrapper {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-cell-wrapper {
 	line-height: 18px;
 	padding: 2px 0;
 }
diff --git a/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.scss b/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.scss
index 6ed8585547..cb32136086 100644
--- a/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.scss
+++ b/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.scss
@@ -1,23 +1,23 @@
-@mixin runo-tabsheet {
+@mixin runo-tabsheet($primaryStyleName : v-tabsheet) {
 
-.v-tabsheet-tabs {
+.#{$primaryStyleName}-tabs {
 	height: 48px;
 }
 
-.v-tabsheet-spacertd div {
+.#{$primaryStyleName}-spacertd div {
 	height: 37px;
 	border: 1px solid #b6bbbc;
 	background: transparent url(img/tab-bg.png);
 	padding: 0;
 }
-.v-tabsheet-scroller {
+.#{$primaryStyleName}-scroller {
 	margin-top: -37px;
 	float: right;
 }
-.v-tabsheet-scrollerPrev,
-.v-tabsheet-scrollerNext,
-.v-tabsheet-scrollerPrev-disabled,
-.v-tabsheet-scrollerNext-disabled {
+.#{$primaryStyleName}-scrollerPrev,
+.#{$primaryStyleName}-scrollerNext,
+.#{$primaryStyleName}-scrollerPrev-disabled,
+.#{$primaryStyleName}-scrollerNext-disabled {
 	border: none;
 	width: 12px;
 	padding: 0;
@@ -25,27 +25,27 @@
 	opacity: 0.9999;
 	margin-top: -1px;
 }
-.v-tabsheet-scrollerNext,
-.v-tabsheet-scrollerNext-disabled {
+.#{$primaryStyleName}-scrollerNext,
+.#{$primaryStyleName}-scrollerNext-disabled {
 	background: transparent url(img/next.png) no-repeat;
 }
-.v-tabsheet-scrollerPrev,
-.v-tabsheet-scrollerPrev-disabled {
+.#{$primaryStyleName}-scrollerPrev,
+.#{$primaryStyleName}-scrollerPrev-disabled {
 	background: transparent url(img/prev.png) no-repeat;
 }
-.v-tabsheet-scrollerPrev:hover,
-.v-tabsheet-scrollerNext:hover {
+.#{$primaryStyleName}-scrollerPrev:hover,
+.#{$primaryStyleName}-scrollerNext:hover {
 	background-position: -24px 0px;
 }
-.v-tabsheet-scrollerPrev-disabled,
-.v-tabsheet-scrollerNext-disabled {
+.#{$primaryStyleName}-scrollerPrev-disabled,
+.#{$primaryStyleName}-scrollerNext-disabled {
 	background-position: -12px 0px;
 }
-.v-tabsheet-scrollerPrev-disabled:hover,
-.v-tabsheet-scrollerNext-disabled:hover {
+.#{$primaryStyleName}-scrollerPrev-disabled:hover,
+.#{$primaryStyleName}-scrollerNext-disabled:hover {
 	background-position: -12px 0px;
 }
-.v-tabsheet-tabitem {
+.#{$primaryStyleName}-tabitem {
 	border: 1px solid #b6bbbc;
 	border-right: none;
 	height: 37px;
@@ -56,11 +56,11 @@
 	line-height: 18px;
 	background: #f8f9f9 url(img/tab-bg.png);
 }
-.v-tabsheet-tabitem .v-caption {
+.#{$primaryStyleName}-tabitem .v-caption {
 	height: 20px;
 	padding: 9px 15px 8px 15px;
 }
-.v-tabsheet-tabitem-selected {
+.#{$primaryStyleName}-tabitem-selected {
 	border: none;
 	background: transparent url(../panel/img/top-left.png) no-repeat;
 	margin: 0;
@@ -68,20 +68,20 @@
 	height: 48px;
 	color: #ee5311;
 }
-.v-tabsheet-tabitem:hover {
+.#{$primaryStyleName}-tabitem:hover {
 	color: #4b5257;
 }
-.v-tabsheet-tabitem-selected:hover {
+.#{$primaryStyleName}-tabitem-selected:hover {
 	color: #ee5311;
 }
-.v-tabsheet-tabitem-selected .v-caption {
+.#{$primaryStyleName}-tabitem-selected .v-caption {
 	background: transparent url(../panel/img/top-right.png) repeat-x right top;
 	margin: 0 -1px 0 9px;
 	height: 18px;
 	padding: 16px 16px 14px 7px;
 	overflow: visible;
 }
-.v-tabsheet-caption-close {
+.#{$primaryStyleName}-caption-close {
 	margin-left: 3px;
 	margin-right: -3px;
 	margin-top: 2px;
@@ -93,29 +93,29 @@
 	color: #777f85;
 	line-height: 13px;
 }
-.v-tabsheet-caption-close:hover {
+.#{$primaryStyleName}-caption-close:hover {
 	background: #dce0e0;
 }
-.v-tabsheet-caption-close:active {
+.#{$primaryStyleName}-caption-close:active {
 	background: #b6bbbc;
 	color: #fff;
 }
-.v-tabsheet-content {
+.#{$primaryStyleName}-content {
 	border: 1px solid #babfc0;
 	background-color: #fff;
 	border-bottom: 1px solid #dee2e3;
 	border-top: none;
 }
-.v-tabsheet-hidetabs .v-tabsheet-content {
+.#{$primaryStyleName}-hidetabs .#{$primaryStyleName}-content {
 	border-top: 1px solid #b5babb;
 }
-.v-tabsheet-deco {
+.#{$primaryStyleName}-deco {
 	height: 10px;
 	background: transparent url(../panel/img/bottom-right.png) repeat-x right top;
 	margin-left: 9px;
 	overflow: visible;
 }
-.v-tabsheet-deco:before {
+.#{$primaryStyleName}-deco:before {
 	display: block;
 	
 	width: 9px;
@@ -124,7 +124,7 @@
 	background: transparent url(../panel/img/bottom-left.png) no-repeat;
 }
 /* Progress indication *
-.v-tabsheet-loading .v-tabsheet-tabitem-selected .v-captiontext {
+.#{$primaryStyleName}-loading .#{$primaryStyleName}-tabitem-selected .v-captiontext {
 	background: transparent url(../../base/common/img/ajax-loader.gif) no-repeat top right;
 	margin-left: -10px;
 	padding-left: 10px;
@@ -134,36 +134,36 @@
 	padding-top: 12px;
 }*/
 /* IE specific styles */
-.v-ie & .v-tabsheet-content {
+.v-ie & .#{$primaryStyleName}-content {
 	border-bottom: none;
 }
-.v-ie & .v-tabsheet-deco {
+.v-ie & .#{$primaryStyleName}-deco {
 	height: 1px;
 	background: #babfc0;
 	overflow: hidden;
 	margin: 0;
 }
-.v-ie8 & .v-tabsheet-deco,
-.v-ie9 & .v-tabsheet-deco {
+.v-ie8 & .#{$primaryStyleName}-deco,
+.v-ie9 & .#{$primaryStyleName}-deco {
 	width: 100%;
 }
 /* Light-style */
-.v-tabsheet-tabcontainer-light {
+.#{$primaryStyleName}-tabcontainer-light {
 	height: 32px;
 }
-.v-tabsheet-tabs-light {
+.#{$primaryStyleName}-tabs-light {
 	height: 32px;
 	width: 100%;
 	overflow:hidden;
 	background: transparent;
 }
-.v-tabsheet-tabs-light .v-tabsheet-spacertd div {
+.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-spacertd div {
 	height: 31px;
 	border: none;
 	border-bottom: 1px solid #b6bbbc;
 	background: transparent url(img/inline-tab-bg.png) repeat-x;
 }
-.v-tabsheet-tabs-light .v-tabsheet-tabitem {
+.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem {
 	border: none;
 	border-bottom: 1px solid #b6bbbc;
 	height: 30px;
@@ -176,20 +176,20 @@
 	cursor: pointer;
 	text-shadow: #fff 0 1px 0;
 }
-.v-tabsheet-tabs-light .v-tabsheet-tabitem .v-caption {
+.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem .v-caption {
 	height: 24px;
 	padding: 8px 10px 0 11px;
 	background: transparent url(img/inline-tab-border.png) no-repeat;
 }
-.v-tabsheet-tabs-light .v-tabsheet-tabitemcell-first .v-caption {
+.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitemcell-first .v-caption {
 	margin-left: 5px;
 	background: transparent;
 }
-.v-tabsheet-tabs-light .v-tabsheet-tabitemcell-selected + .v-tabsheet-tabitemcell .v-caption,
-.v-tabsheet-tabs-light .v-tabsheet-tabitemcell-selected-first + .v-tabsheet-tabitemcell .v-caption {
+.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitemcell-selected + .#{$primaryStyleName}-tabitemcell .v-caption,
+.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitemcell-selected-first + .#{$primaryStyleName}-tabitemcell .v-caption {
 	background: transparent;
 }
-.v-tabsheet-tabs-light .v-tabsheet-tabitem-selected {
+.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem-selected {
 	border: none;
 	background: transparent url(img/inline-tab-right.png) no-repeat right top;
 	margin: 0;
@@ -199,58 +199,58 @@
 	color: #ee5311;
 	text-shadow: none;
 }
-.v-tabsheet-tabs-light .v-tabsheet-tabitem:hover {
+.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem:hover {
 	color: #4b5257;
 }
-.v-tabsheet-tabs-light .v-tabsheet-tabitem-selected:hover {
+.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem-selected:hover {
 	color: #ee5311;
 }
-.v-tabsheet-tabs-light .v-tabsheet-tabitem-selected .v-caption {
+.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem-selected .v-caption {
 	background: transparent url(img/inline-tab-left.png) no-repeat -7px 0;
 	margin: 0;
 	height: 23px;
 	padding: 9px 10px 0 11px;
 	overflow: visible;
 }
-.v-tabsheet-tabs-light .v-tabsheet-tabitemcell-first .v-tabsheet-tabitem-selected .v-caption {
+.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitemcell-first .#{$primaryStyleName}-tabitem-selected .v-caption {
 	background: transparent url(img/inline-tab-left.png) no-repeat -3px 0;
 	padding-left: 16px;
 }
-.v-tabsheet-tabs-light .v-tabsheet-caption-close {
+.#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-caption-close {
 	margin-top: 0;
 	text-shadow: none;
 }
-.v-tabsheet-content-light {
+.#{$primaryStyleName}-content-light {
 	border: none;
 	background: transparent;
 }
-.v-tabsheet-light .v-tabsheet-hidetabs .v-tabsheet-content {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-hidetabs .#{$primaryStyleName}-content {
 	border: none;
 }
-.v-tabsheet-deco-light {
+.#{$primaryStyleName}-deco-light {
 	height: 0;
 	overflow: hidden;
 }
-.v-tabsheet-deco-light:before {
+.#{$primaryStyleName}-deco-light:before {
 	display: none;
 }
 /* Scroller */
-.v-tabsheet-tabcontainer-light .v-tabsheet-scrollerPrev,
-.v-tabsheet-tabcontainer-light .v-tabsheet-scrollerNext {
+.#{$primaryStyleName}-tabcontainer-light .#{$primaryStyleName}-scrollerPrev,
+.#{$primaryStyleName}-tabcontainer-light .#{$primaryStyleName}-scrollerNext {
 	margin-top: 2px;
 	height: 34px;
 }
-.v-tabsheet-tabcontainer-light .v-tabsheet-scrollerPrev-disabled,
-.v-tabsheet-tabcontainer-light .v-tabsheet-scrollerNext-disabled {
+.#{$primaryStyleName}-tabcontainer-light .#{$primaryStyleName}-scrollerPrev-disabled,
+.#{$primaryStyleName}-tabcontainer-light .#{$primaryStyleName}-scrollerNext-disabled {
 	margin-top: 2px;
 	height: 34px;
 }
 /* Progress indication *
-.v-tabsheet-loading .v-tabsheet-tabs-light .v-tabsheet-tabitem-selected .v-captiontext {
+.#{$primaryStyleName}-loading .#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem-selected .v-captiontext {
 	margin-left: -3px;
 	padding-left: 3px;
 }*/
-.v-ie & .v-tabsheet-deco-light {
+.v-ie & .#{$primaryStyleName}-deco-light {
 	height: 0;
 }
 
diff --git a/WebContent/VAADIN/themes/runo/textfield/textfield.scss b/WebContent/VAADIN/themes/runo/textfield/textfield.scss
index 3382fbee91..3516f529ce 100644
--- a/WebContent/VAADIN/themes/runo/textfield/textfield.scss
+++ b/WebContent/VAADIN/themes/runo/textfield/textfield.scss
@@ -1,6 +1,6 @@
-@mixin runo-textfield {
+@mixin runo-textfield($primaryStyleName : v-textfield) {
 
-.v-textfield,
+.#{$primaryStyleName},
 .v-textarea {
 	background: #fff url(img/bg.png) repeat-x;
 	border: 1px solid #b6b6b6;
@@ -10,8 +10,8 @@
 	margin: 0;
 	line-height: 14px;
 }
-input.v-textfield,
-input[type=text].v-textfield,
+input.#{$primaryStyleName},
+input[type=text].#{$primaryStyleName},
 textarea.v-textarea {
 	font-size: 12px;
 	height: 22px;
@@ -20,11 +20,11 @@ textarea.v-textarea {
 textarea.v-textarea {
 	height: auto;
 }
-.v-textfield-focus,
+.#{$primaryStyleName}-focus,
 .v-textarea-focus {
 	border-color: #5daee8;
 }
-input.v-textfield-prompt,
+input.#{$primaryStyleName}-prompt,
 textarea.v-textarea-prompt {
 	color: #999;
 	font-style: normal;
@@ -37,8 +37,8 @@ textarea.v-textarea-prompt {
 }
 
 /* Small style */
-input.v-textfield-small,
-input[type=text].v-textfield-small,
+input.#{$primaryStyleName}-small,
+input[type=text].#{$primaryStyleName}-small,
 textarea.v-textarea-small {
 	font-size: 11px;
 	height: 18px;
diff --git a/WebContent/VAADIN/themes/runo/tree/tree.scss b/WebContent/VAADIN/themes/runo/tree/tree.scss
index cb3dff3156..677e0e8a93 100644
--- a/WebContent/VAADIN/themes/runo/tree/tree.scss
+++ b/WebContent/VAADIN/themes/runo/tree/tree.scss
@@ -1,24 +1,24 @@
-@mixin runo-tree {
+@mixin runo-tree($primaryStyleName : v-tree) {
 
-.v-tree-node {
+.#{$primaryStyleName}-node {
 	background: transparent url(img/collapsed.png) no-repeat 2px 1px;
 }
-.v-tree-node-expanded {
+.#{$primaryStyleName}-node-expanded {
 	background: transparent url(img/expanded.png) no-repeat 2px 1px;
 }
-.v-tree-node-caption {
+.#{$primaryStyleName}-node-caption {
 	margin-left: 18px;
 }
-.v-tree-connectors .v-tree-node-caption {
+.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-caption {
 	padding-bottom: 1px;
 }
-.v-tree-node-caption .v-icon {
+.#{$primaryStyleName}-node-caption .v-icon {
 	margin: 0 2px 0 -2px;
 }
-.v-tree-node-caption span {
+.#{$primaryStyleName}-node-caption span {
 	padding: 0 1px;
 }
-.v-tree-node-selected span {
+.#{$primaryStyleName}-node-selected span {
 	background: #57a7ed;
 	color: #fff;
 	padding: 1px 2px 0;
@@ -29,32 +29,32 @@
 	-moz-border-radius: 2px;
 	border-radius: 2px;	
 }
-.v-tree-node-children {
+.#{$primaryStyleName}-node-children {
 	padding-left: 16px;
 }
-.v-tree{
+.#{$primaryStyleName}{
 	outline:none;	
 }
-.v-tree-node-caption.v-tree-node-focused span{
+.#{$primaryStyleName}-node-caption.#{$primaryStyleName}-node-focused span{
 	padding-left: 1px;
 	padding-top: 0px;
 	padding-bottom: 0px;
 }
-.v-tree-node-focused span{
+.#{$primaryStyleName}-node-focused span{
 	border: 1px dotted black;	
 }
 /***************************************
  * Drag'n'drop styles
  ***************************************/
-.v-tree .v-tree-node-drag-top,
-.v-tree .v-tree-node-drag-top.v-tree-node-expanded {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top,
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-node-expanded {
 	background-position: 2px 0;
 }
-.v-tree-connectors .v-tree-node-drag-top,
-.v-tree-connectors .v-tree-node-expanded.v-tree-node-drag-top {
+.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top,
+.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded.#{$primaryStyleName}-node-drag-top {
 	background-position: 2px -53px;
 }
-.v-tree-connectors .v-tree-node-drag-top.v-tree-node-leaf {
+.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-node-leaf {
 	background-position: 2px 50%;
 }
 
diff --git a/WebContent/VAADIN/themes/runo/window/window.scss b/WebContent/VAADIN/themes/runo/window/window.scss
index b08f87b7fa..454b6914c9 100644
--- a/WebContent/VAADIN/themes/runo/window/window.scss
+++ b/WebContent/VAADIN/themes/runo/window/window.scss
@@ -1,22 +1,22 @@
-@mixin runo-window {
+@mixin runo-window($primaryStyleName : v-window) {
 
-.v-window {
+.#{$primaryStyleName} {
 	color: #464f52;
 	font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
 	font-size: 13px;
 	line-height: 18px;
 	background: transparent url(img/bottom-left.png) no-repeat left bottom;
 }
-.v-window-wrap {
+.#{$primaryStyleName}-wrap {
 	background: transparent url(img/top-left.png) no-repeat;
 }
-.v-window-outerheader {
+.#{$primaryStyleName}-outerheader {
 	height: 49px;
 	margin-left: 9px;
 	padding: 15px 40px 11px 12px;
 	background: transparent url(img/top-right.png) no-repeat right top;
 }
-.v-window-header {
+.#{$primaryStyleName}-header {
 	font-size: 18px;
 	line-height: 1.2;
 	font-weight: normal;
@@ -24,7 +24,7 @@
 	color: #f14c1a;
 	text-shadow: 0 1px 0 #fff;
 }
-.v-window-contents > div {
+.#{$primaryStyleName}-contents > div {
 	background: #fff;
 	border: 2px solid #babfc0;
 	border-top: none;
@@ -33,13 +33,13 @@
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-.v-window div.v-window-footer {
+.#{$primaryStyleName} div.#{$primaryStyleName}-footer {
 	height: 8px;
 	margin-left: 9px;
 	background: transparent url(img/bottom-right.png) no-repeat right bottom;
 	overflow: visible;
 }
-.v-window-resizebox {
+.#{$primaryStyleName}-resizebox {
 	position: absolute; /* Needed to position the element over ScrollPanel, which is relatively positioned */
 	right: 5px;
 	width: 10px;
@@ -47,11 +47,11 @@
 	margin-top: -7px;
 	background: transparent url(img/resize.png);
 }
-.v-window-resizebox-disabled {
+.#{$primaryStyleName}-resizebox-disabled {
 	background: transparent;
 	display: block;
 }
-.v-window-closebox {
+.#{$primaryStyleName}-closebox {
 	position: absolute;
 	top: 21px;
 	right: 24px;
@@ -59,35 +59,35 @@
 	height: 12px;
 	background: transparent url(img/close.png);
 }
-.v-window-closebox:hover {
+.#{$primaryStyleName}-closebox:hover {
 	background-position: 0 -12px;
 }
-.v-window-modalitycurtain {
+.#{$primaryStyleName}-modalitycurtain {
 	background: #fff;
 }
 /* Dialog style */
-.v-window-dialog {
+.#{$primaryStyleName}-dialog {
 	background-image: url(img/dialog/bottom-left.png);
 }
-.v-window-dialog .v-window-outerheader {
+.#{$primaryStyleName}-dialog .#{$primaryStyleName}-outerheader {
 	height: 14px;
 	padding: 13px 30px 5px 8px;
 	background: transparent url(img/top-right.png) no-repeat right top;
 }
-.v-window-dialog .v-window-header {
+.#{$primaryStyleName}-dialog .#{$primaryStyleName}-header {
 	font-size: 12px;
 	line-height: normal;
 	font-weight: bold;
 	letter-spacing: 0;
 	text-shadow: 0 1px 0 #fff;
 }
-.v-window-dialog .v-window-contents {
+.#{$primaryStyleName}-dialog .#{$primaryStyleName}-contents {
 	background: #f1f3f3;
 }
-.v-window-dialog div.v-window-footer {
+.#{$primaryStyleName}-dialog div.#{$primaryStyleName}-footer {
 	background-image: url(img/dialog/bottom-right.png);
 }
-.v-window-dialog .v-window-closebox {
+.#{$primaryStyleName}-dialog .#{$primaryStyleName}-closebox {
 	top: 14px;
 	right: 16px;
 	background-image: url(img/dialog/close.png);

path: root/l10n/oc/files_encryption.po

# SOME DESCRIPTIVE TITLE.
# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
# This file is distributed under the same license as the PACKAGE package.
# 
# Translators:
msgid ""
msgstr ""
"Project-Id-Version: ownCloud\n"
"Report-Msgid-Bugs-To: http://bugs.owncloud.org/\n"
"POT-Creation-Date: 2013-02-10 00:08+0100\n"
"PO-Revision-Date: 2013-02-09 23:09+0000\n"
"Last-Translator: I Robot <owncloud-bot@tmit.eu>\n"
"Language-Team: Occitan (post 1500) (http://www.transifex.com/projects/p/owncloud/language/oc/)\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Language: oc\n"
"Plural-Forms: nplurals=2; plural=(n > 1);\n"

#: templates/settings-personal.php:4 templates/settings.php:5
msgid "Encryption"
msgstr ""

#: templates/settings-personal.php:7
msgid "File encryption is enabled."
msgstr ""

#: templates/settings-personal.php:11
msgid "The following file types will not be encrypted:"
msgstr ""

#: templates/settings.php:7
msgid "Exclude the following file types from encryption:"
msgstr ""

#: templates/settings.php:12
msgid "None"
msgstr ""