Added new test app/ui for Valo

New “tests-valo” theme also included multiple variations to test with.

Change-Id: I3dd3b91526b32ae8d080d2fa431d2a64f6f7fef4

32 files changed, 12185 insertions, 1756 deletions

diff --git a/WebContent/VAADIN/themes/tests-valo/_blueprint.scss b/WebContent/VAADIN/themes/tests-valo/_blueprint.scss
new file mode 100644
index 0000000000..a876a5a528
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-valo/_blueprint.scss
@@ -0,0 +1,19 @@
+$v-app-loading-text: "Blueprint Valo";
+$v-background-color: #1a61b7;
+$v-focus-color: #fff;
+$v-panel-background-color: $v-background-color;
+$v-overlay-background-color: $v-background-color;
+$valo-menu-background-color: $v-background-color;
+$v-overlay-shadow: 0 0 0 1px rgba(#fff, .5);
+$v-window-shadow: $v-overlay-shadow;
+$v-bevel: false;
+$v-gradient: false;
+$v-shadow: false;
+$v-textfield-bevel: false;
+$v-textfield-shadow: false;
+$v-border: 1px solid (v-tint 1.5);
+$v-textfield-background-color: $v-background-color;
+$v-font-family: sans-serif;
+$v-font-size: 18px;
+
+@import "../valo/valo";
diff --git a/WebContent/VAADIN/themes/tests-valo/_dark.scss b/WebContent/VAADIN/themes/tests-valo/_dark.scss
new file mode 100644
index 0000000000..21bcd00ae9
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-valo/_dark.scss
@@ -0,0 +1,18 @@
+$v-app-loading-text: "Dark Valo";
+$v-background-color: #444d50;
+$v-focus-color: #07a9ca;
+$v-focus-style: 0 0 3px 2px $v-focus-color;
+$v-bevel-depth: 40%;
+$v-gradient: v-linear 12%;
+$v-border-radius: 10px;
+$v-font-family: Roboto, sans-serif;
+$v-font-weight: 400;
+$v-font-weight--header: 400;
+$v-bevel: inset 0 1px 2px v-tint, inset 0 0 1px (v-tint 0.1);
+$v-shadow: 0 0 0 3px darken($v-background-color, 3%), 0 1px 1px 3px lighten($v-background-color, 5%);
+$v-textfield-bevel: inset 0 2px 2px v-shade;
+$v-textfield-shadow: $v-shadow;
+$v-unit-size: 40px;
+$v-overlay-shadow: 0 0 0 3px (v-shade 8), 0 5px 10px (v-shade 4);
+
+@import "../valo/valo";
diff --git a/WebContent/VAADIN/themes/tests-valo/_default.scss b/WebContent/VAADIN/themes/tests-valo/_default.scss
new file mode 100644
index 0000000000..c227156e2e
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-valo/_default.scss
@@ -0,0 +1,3 @@
+$v-app-loading-text: "Default Valo";
+
+@import "../valo/valo";
diff --git a/WebContent/VAADIN/themes/tests-valo/_facebook.scss b/WebContent/VAADIN/themes/tests-valo/_facebook.scss
new file mode 100644
index 0000000000..5b83aae4ca
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-valo/_facebook.scss
@@ -0,0 +1,24 @@
+$v-app-loading-text: "Facebook Valo";
+$v-background-color: #fafafa;
+$v-app-background-color: #e7ebf2;
+$v-panel-background-color: #fff;
+$v-focus-color: #3b5998;
+$v-focus-style: 0 0 1px 1px rgba($v-focus-color, .5);
+$v-border-radius: 3px;
+$v-textfield-border-radius: 0;
+$v-font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
+$v-font-size: 14px;
+$v-font-color: #37404E;
+$v-font-weight: 400;
+$v-link-text-decoration: none;
+$v-shadow: 0 1px 0 (v-shade 0.2);
+$v-bevel: inset 0 1px 0 v-tint;
+$v-unit-size: 30px;
+$v-gradient: v-linear 12%;
+$v-overlay-shadow: 0 3px 8px v-shade, 0 0 0 1px (v-shade 0.7);
+$v-shadow-opacity: 20%;
+$v-selection-overlay-padding-horizontal: 0;
+$v-selection-overlay-padding-vertical: 6px;
+$v-selection-item-border-radius: 0;
+
+@import "../valo/valo";
diff --git a/WebContent/VAADIN/themes/tests-valo/_flat-dark.scss b/WebContent/VAADIN/themes/tests-valo/_flat-dark.scss
new file mode 100644
index 0000000000..f68f9c266d
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-valo/_flat-dark.scss
@@ -0,0 +1,20 @@
+$v-app-loading-text: "Dark & Flat Valo";
+
+$v-background-color: #000;
+$v-focus-color: orange;
+$v-font-size: 15px;
+$v-font-weight: 600;
+$v-unit-size: 42px;
+$v-bevel: false;
+$v-shadow: false;
+$v-gradient: false;
+$v-textfield-bevel: false;
+$v-textfield-shadow: false;
+$v-border-radius: 0;
+$v-border: 2px solid v-tone;
+$v-overlay-shadow: 0 0 0 2px (v-tint 10);
+$v-focus-style: $v-focus-color;
+$v-font-family: "Lato", sans-serif;
+$v-font-weight--header: 600;
+
+@import "../valo/valo";
diff --git a/WebContent/VAADIN/themes/tests-valo/_flat.scss b/WebContent/VAADIN/themes/tests-valo/_flat.scss
new file mode 100644
index 0000000000..d6e2857a83
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-valo/_flat.scss
@@ -0,0 +1,42 @@
+$v-app-loading-text: "Flat Valo";
+
+$v-font-family: "Roboto", sans-serif;
+$v-font-weight: 400;
+$v-background-color: #fff;
+$v-focus-color: rgb(150,190,90);
+$v-luminance-threshold: 180;
+$v-border: 2px solid v-shade;
+$v-border-radius: 6px;
+$v-bevel: false;
+$v-gradient: false;
+$v-shadow: false;
+$v-textfield-bevel: false;
+$v-textfield-shadow: false;
+$v-link-text-decoration: false;
+$v-selection-overlay-padding-horizontal: 0;
+$v-selection-overlay-padding-vertical: 6px;
+$v-selection-item-height: 30px;
+$v-selection-item-border-radius: 0;
+
+
+@import "../valo/valo";
+
+
+.valo-test {
+  .v-button-primary.v-button-primary {
+    background: #fff;
+    border-color: $v-focus-color;
+    color: $v-focus-color;
+  }
+
+  .v-button-danger.v-button-danger {
+    background: #fff;
+    border-color: $v-error-indicator-color;
+    color: $v-error-indicator-color;
+  }
+
+  .v-slider-base:before,
+  .v-slider-base:after {
+    border: none !important;
+  }
+}
diff --git a/WebContent/VAADIN/themes/tests-valo/_metro.scss b/WebContent/VAADIN/themes/tests-valo/_metro.scss
new file mode 100644
index 0000000000..f11cdb8b64
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-valo/_metro.scss
@@ -0,0 +1,26 @@
+$v-app-loading-text: "Metro Valo";
+
+$v-font-family: "Source Sans Pro", sans-serif;
+$v-app-background-color: #fff;
+$v-background-color: #eee;
+$v-focus-color: #0072C6;
+$v-focus-style: 0 0 0 1px $v-focus-color;
+$valo-menu-background-color: darken($v-focus-color, 10%);
+$v-border: 0 solid v-shade;
+$v-border-radius: 0px;
+$v-bevel: false;
+$v-gradient: false;
+$v-shadow: false;
+$v-textfield-bevel: false;
+$v-textfield-shadow: false;
+$v-textfield-border: 1px solid v-shade;
+$v-link-text-decoration: none;
+$v-overlay-shadow: 0 0 0 2px #000;
+$v-overlay-border-width: 2px; // For IE8
+$v-window-shadow: $v-overlay-shadow;
+$v-selection-overlay-background-color: #fff;
+$v-selection-overlay-padding-horizontal: 0;
+$v-selection-overlay-padding-vertical: 6px;
+$v-panel-border: 2px solid v-shade;
+
+@import "../valo/valo";
diff --git a/WebContent/VAADIN/themes/tests-valo/styles.css b/WebContent/VAADIN/themes/tests-valo/styles.css
new file mode 100644
index 0000000000..2e0c1b6143
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-valo/styles.css
@@ -0,0 +1,7312 @@
+@charset "UTF-8";
+@-webkit-keyframes valo-anim-fade-in {
+  0% {
+    opacity: 0; } }
+
+@-moz-keyframes valo-anim-fade-in {
+  0% {
+    opacity: 0; } }
+
+@keyframes valo-anim-fade-in {
+  0% {
+    opacity: 0; } }
+
+@-webkit-keyframes valo-anim-fade-out {
+  100% {
+    opacity: 0; } }
+
+@-moz-keyframes valo-anim-fade-out {
+  100% {
+    opacity: 0; } }
+
+@keyframes valo-anim-fade-out {
+  100% {
+    opacity: 0; } }
+
+@-webkit-keyframes valo-anim-slide-down {
+  0% {
+    -webkit-transform: translateY(-100%); } }
+
+@-moz-keyframes valo-anim-slide-down {
+  0% {
+    -moz-transform: translateY(-100%); } }
+
+@keyframes valo-anim-slide-down {
+  0% {
+    -webkit-transform: translateY(-100%);
+    transform: translateY(-100%); } }
+
+@-webkit-keyframes valo-anim-slide-up {
+  0% {
+    -webkit-transform: translateY(100%); } }
+
+@-moz-keyframes valo-anim-slide-up {
+  0% {
+    -moz-transform: translateY(100%); } }
+
+@keyframes valo-anim-slide-up {
+  0% {
+    -webkit-transform: translateY(100%);
+    transform: translateY(100%); } }
+
+@-webkit-keyframes valo-anim-slide-left {
+  0% {
+    -webkit-transform: translateX(100%); } }
+
+@-moz-keyframes valo-anim-slide-left {
+  0% {
+    -moz-transform: translateX(100%); } }
+
+@keyframes valo-anim-slide-left {
+  0% {
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%); } }
+
+@-webkit-keyframes valo-anim-slide-right {
+  0% {
+    -webkit-transform: translateX(-100%); } }
+
+@-moz-keyframes valo-anim-slide-right {
+  0% {
+    -moz-transform: translateX(-100%); } }
+
+@keyframes valo-anim-slide-right {
+  0% {
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%); } }
+
+@font-face {
+  font-family: FontAwesome;
+  font-weight: normal;
+  font-style: normal;
+  src: url("../valo/fonts/font-awesome/fontawesome-webfont.eot");
+  src: url("../valo/fonts/font-awesome/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("../valo/fonts/font-awesome/fontawesome-webfont.woff") format("woff"), url("../valo/fonts/font-awesome/fontawesome-webfont.ttf") format("truetype"), url("../valo/fonts/font-awesome/fontawesome-webfont.svg#FontAwesome") format("svg"); }
+
+.FontAwesome {
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+  text-align: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none; }
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url("../valo/fonts/open-sans/OpenSans-Light-webfont.eot");
+  src: url("../valo/fonts/open-sans/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("../valo/fonts/open-sans/OpenSans-Light-webfont.woff") format("woff"), url("../valo/fonts/open-sans/OpenSans-Light-webfont.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal; }
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url("../valo/fonts/open-sans/OpenSans-Regular-webfont.eot");
+  src: url("../valo/fonts/open-sans/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../valo/fonts/open-sans/OpenSans-Regular-webfont.woff") format("woff"), url("../valo/fonts/open-sans/OpenSans-Regular-webfont.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal; }
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url("../valo/fonts/open-sans/OpenSans-Semibold-webfont.eot");
+  src: url("../valo/fonts/open-sans/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../valo/fonts/open-sans/OpenSans-Semibold-webfont.woff") format("woff"), url("../valo/fonts/open-sans/OpenSans-Semibold-webfont.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal; }
+
+@-webkit-keyframes v-rotate-360 {
+  to {
+    -webkit-transform: rotate(360deg); } }
+
+@-moz-keyframes v-rotate-360 {
+  to {
+    -moz-transform: rotate(360deg); } }
+
+@-o-keyframes v-rotate-360 {
+  to {
+    -o-transform: rotate(360deg); } }
+
+@keyframes v-rotate-360 {
+  to {
+    transform: rotate(360deg); } }
+
+@-webkit-keyframes v-progress-start {
+  0% {
+    width: 0%; }
+
+  100% {
+    width: 50%; } }
+
+@-moz-keyframes v-progress-start {
+  0% {
+    width: 0%; }
+
+  100% {
+    width: 50%; } }
+
+@keyframes v-progress-start {
+  0% {
+    width: 0%; }
+
+  100% {
+    width: 50%; } }
+
+@-webkit-keyframes v-progress-delay {
+  0% {
+    width: 50%; }
+
+  100% {
+    width: 90%; } }
+
+@-moz-keyframes v-progress-delay {
+  0% {
+    width: 50%; }
+
+  100% {
+    width: 90%; } }
+
+@keyframes v-progress-delay {
+  0% {
+    width: 50%; }
+
+  100% {
+    width: 90%; } }
+
+@-webkit-keyframes v-progress-wait {
+  0% {
+    width: 90%;
+    height: 4px; }
+
+  3% {
+    width: 91%;
+    height: 7px; }
+
+  100% {
+    width: 96%;
+    height: 7px; } }
+
+@-moz-keyframes v-progress-wait {
+  0% {
+    width: 90%;
+    height: 4px; }
+
+  3% {
+    width: 91%;
+    height: 7px; }
+
+  100% {
+    width: 96%;
+    height: 7px; } }
+
+@keyframes v-progress-wait {
+  0% {
+    width: 90%;
+    height: 4px; }
+
+  3% {
+    width: 91%;
+    height: 7px; }
+
+  100% {
+    width: 96%;
+    height: 7px; } }
+
+@-webkit-keyframes v-progress-wait-pulse {
+  0% {
+    opacity: 1; }
+
+  50% {
+    opacity: .1; }
+
+  100% {
+    opacity: 1; } }
+
+@-moz-keyframes v-progress-wait-pulse {
+  0% {
+    opacity: 1; }
+
+  50% {
+    opacity: .1; }
+
+  100% {
+    opacity: 1; } }
+
+@keyframes v-progress-wait-pulse {
+  0% {
+    opacity: 1; }
+
+  50% {
+    opacity: .1; }
+
+  100% {
+    opacity: 1; } }
+
+.v-shadow,
+.v-shadow-window {
+  display: none; }
+  .v-ie8 .v-shadow, .v-ie8
+  .v-shadow-window {
+    display: block;
+    /*.center {
+      position: absolute;
+      top: -$v-overlay-border-width;
+      right: -$v-overlay-border-width;
+      bottom: -$v-overlay-border-width;
+      left: -$v-overlay-border-width;
+      background: darken(valo-overlay-background-color(), $v-bevel-depth);
+      filter: alpha(opacity=round($v-bevel-depth/1%));
+    }*/ }
+    .v-ie8 .v-shadow .top, .v-ie8
+    .v-shadow-window .top {
+      position: absolute;
+      top: -2px;
+      right: 4px;
+      bottom: 2px;
+      left: -4px;
+      background: black;
+      filter: alpha(opacity=5) progid:DXImageTransform.Microsoft.blur(pixelradius=4, makeShadow=true); }
+    .v-ie8 .v-shadow .top-left, .v-ie8
+    .v-shadow-window .top-left {
+      position: absolute;
+      top: -1px;
+      right: -1px;
+      bottom: -1px;
+      left: -1px;
+      background: black;
+      filter: alpha(opacity=10) progid:DXImageTransform.Microsoft.blur(pixelradius=0, makeShadow=true); }
+
+@-webkit-keyframes valo-overlay-open {
+  0% {
+    -webkit-transform: translatey(-3px);
+    opacity: 0; } }
+
+@-moz-keyframes valo-overlay-open {
+  0% {
+    -moz-transform: translatey(-3px);
+    opacity: 0; } }
+
+@keyframes valo-overlay-open {
+  0% {
+    -webkit-transform: translatey(-3px);
+    transform: translatey(-3px);
+    opacity: 0; } }
+
+@-webkit-keyframes valo-combobox-show-status {
+  0% {
+    opacity: 0;
+    -webkit-transform: translatey(-100%); } }
+
+@-moz-keyframes valo-combobox-show-status {
+  0% {
+    opacity: 0;
+    -moz-transform: translatey(-100%); } }
+
+@keyframes valo-combobox-show-status {
+  0% {
+    opacity: 0;
+    -webkit-transform: translatey(-100%);
+    transform: translatey(-100%); } }
+
+/*
+@mixin valo-splitpanel-style ($splitter-size: ) {
+  > div > .v-splitpanel-hsplitter {
+    width: ;
+
+    div:after {
+      @include valo-splitpanel-splitter-handle-style($horizontal: true);
+    }
+
+    &:after {
+      left: 0;
+      right: 0;
+    }
+  }
+  .v-splitpanel-horizontal .v-splitpanel-second-container
+}
+*/
+@-webkit-keyframes valo-modal-window-indication {
+  0% {
+    opacity: 0; }
+
+  100% {
+    opacity: 1; } }
+
+@-moz-keyframes valo-modal-window-indication {
+  0% {
+    opacity: 0; }
+
+  100% {
+    opacity: 1; } }
+
+@keyframes valo-modal-window-indication {
+  0% {
+    opacity: 0; }
+
+  100% {
+    opacity: 1; } }
+
+.v-widget {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: inline-block;
+  text-align: left;
+  white-space: normal;
+  line-height: 1.55; }
+
+.v-generated-body {
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  border: 0; }
+
+.v-app {
+  height: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+
+.v-ui {
+  position: relative; }
+
+.v-ui.v-ui-embedded {
+  margin-top: -1px;
+  border-top: 1px solid transparent; }
+
+.v-ui:focus {
+  outline: none; }
+
+.v-overlay-container {
+  width: 0;
+  height: 0; }
+
+input::-ms-clear {
+  display: none; }
+
+.v-drag-element {
+  z-index: 60000;
+  position: absolute !important;
+  cursor: default; }
+
+.v-clip {
+  overflow: hidden; }
+
+.v-scrollable {
+  overflow: auto;
+  line-height: 0; }
+
+.v-ios.v-webkit .v-scrollable {
+  -webkit-overflow-scrolling: touch; }
+
+.v-ios5.v-webkit .v-scrollable {
+  -webkit-overflow-scrolling: none; }
+
+.v-assistive-device-only {
+  position: absolute;
+  top: -2000px;
+  left: -2000px;
+  width: 10px;
+  overflow: hidden; }
+
+.v-icon {
+  cursor: inherit; }
+
+.v-icon,
+.v-errorindicator,
+.v-required-field-indicator {
+  display: inline-block;
+  line-height: inherit; }
+
+.v-caption {
+  display: inline-block;
+  white-space: nowrap;
+  line-height: 1.55; }
+
+.v-captiontext {
+  display: inline-block;
+  line-height: inherit; }
+
+div.v-layout.v-horizontal.v-widget {
+  white-space: nowrap; }
+
+.v-layout.v-vertical > .v-expand,
+.v-layout.v-horizontal > .v-expand {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%; }
+
+.v-slot,
+.v-spacing {
+  display: inline-block;
+  white-space: normal;
+  vertical-align: top;
+  line-height: 0; }
+
+.v-vertical > .v-slot:after {
+  display: inline-block;
+  clear: both;
+  width: 0;
+  height: 0;
+  overflow: hidden; }
+
+.v-vertical > .v-slot,
+.v-vertical > .v-expand > .v-slot {
+  display: block;
+  clear: both; }
+
+.v-horizontal > .v-slot,
+.v-horizontal > .v-expand > .v-slot {
+  height: 100%; }
+
+.v-vertical > .v-spacing,
+.v-vertical > .v-expand > .v-spacing {
+  width: 0;
+  display: block;
+  clear: both; }
+
+.v-horizontal > .v-spacing,
+.v-horizontal > .v-expand > .v-spacing {
+  height: 0; }
+
+.v-align-middle:before,
+.v-align-bottom:before,
+.v-expand > .v-align-middle:before,
+.v-expand > .v-align-bottom:before {
+  content: "";
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+  width: 0;
+  overflow: hidden; }
+
+.v-align-middle,
+.v-align-bottom {
+  white-space: nowrap; }
+
+.v-align-middle > .v-widget,
+.v-align-bottom > .v-widget {
+  display: inline-block; }
+
+.v-align-middle > .v-widget {
+  vertical-align: middle; }
+
+.v-align-bottom > .v-widget {
+  vertical-align: bottom; }
+
+.v-align-center {
+  text-align: center; }
+
+.v-align-center > .v-widget {
+  margin-left: auto;
+  margin-right: auto; }
+
+.v-align-right {
+  text-align: right; }
+
+.v-align-right > .v-widget {
+  margin-left: auto; }
+
+.v-has-caption,
+.v-has-caption > .v-caption {
+  display: inline-block; }
+
+.v-caption-on-left,
+.v-caption-on-right {
+  white-space: nowrap; }
+
+.v-caption-on-top > .v-caption,
+.v-caption-on-bottom > .v-caption {
+  display: block; }
+
+.v-caption-on-left > .v-caption {
+  padding-right: .5em; }
+
+.v-caption-on-left > .v-widget,
+.v-caption-on-right > .v-widget {
+  display: inline-block; }
+
+.v-has-caption.v-has-width > .v-widget {
+  width: 100% !important; }
+
+.v-has-caption.v-has-height > .v-widget {
+  height: 100% !important; }
+
+.v-gridlayout {
+  position: relative;
+  line-height: 0; }
+
+.v-gridlayout-slot {
+  position: absolute;
+  line-height: 1.55; }
+
+.v-gridlayout-spacing-on {
+  overflow: hidden; }
+
+.v-gridlayout-spacing,
+.v-gridlayout-spacing-off {
+  padding-left: 0;
+  padding-top: 0; }
+
+.v-gridlayout-spacing-off {
+  overflow: hidden; }
+
+.v-calendar-month-day-scrollable {
+  overflow-y: scroll; }
+
+.v-calendar-week-wrapper {
+  position: relative;
+  overflow: hidden; }
+
+.v-calendar-current-time {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: red;
+  z-index: 2; }
+
+.v-calendar-event-resizetop,
+.v-calendar-event-resizebottom {
+  position: absolute;
+  height: 5%;
+  min-height: 3px;
+  width: 100%;
+  z-index: 1; }
+
+.v-calendar-event-resizetop {
+  cursor: row-resize;
+  top: 0; }
+
+.v-calendar-event-resizebottom {
+  cursor: row-resize;
+  bottom: 0; }
+
+.v-calendar-header-month td:first-child {
+  padding-left: 20px; }
+
+.v-calendar-month-sizedheight .v-calendar-month-day {
+  height: 100px; }
+
+.v-calendar-month-sizedwidth .v-calendar-month-day {
+  width: 100px; }
+
+.v-calendar-header-month-Hsized .v-calendar-header-day {
+  width: 101px; }
+
+.v-calendar-header-month-Hsized td:first-child {
+  padding-left: 21px; }
+
+.v-calendar-header-day-Hsized {
+  width: 200px; }
+
+.v-calendar-week-numbers-Vsized .v-calendar-week-number {
+  height: 100px;
+  line-height: 100px; }
+
+.v-calendar-week-wrapper-Vsized {
+  height: 400px;
+  overflow-x: hidden !important; }
+
+.v-calendar-times-Vsized .v-calendar-time {
+  height: 38px; }
+
+.v-calendar-times-Hsized .v-calendar-time {
+  width: 42px; }
+
+.v-calendar-day-times-Vsized .v-datecellslot,
+.v-calendar-day-times-Vsized .v-datecellslot-even {
+  height: 18px; }
+
+.v-calendar-day-times-Hsized,
+.v-calendar-day-times-Hsized .v-datecellslot,
+.v-calendar-day-times-Hsized .v-datecellslot-even {
+  width: 200px; }
+
+.v-colorpicker-popup.v-window {
+  min-width: 220px !important; }
+
+.v-colorpicker-gradient-container {
+  overflow: visible !important; }
+
+.v-colorpicker-gradient-clicklayer {
+  opacity: 0;
+  filter: alpha(opacity=0); }
+
+.rgb-gradient .v-colorpicker-gradient-background {
+  background: url(../valo/components/img/colorpicker/gradient2.png); }
+
+.hsv-gradient .v-colorpicker-gradient-foreground {
+  background: url(../valo/components/img/colorpicker/gradient.png); }
+
+.v-colorpicker-gradient-higherbox:before {
+  content: "";
+  width: 11px;
+  height: 11px;
+  border-radius: 7px;
+  border: 1px solid #fff;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.3);
+  position: absolute;
+  bottom: -6px;
+  left: -6px; }
+
+.v-colorpicker-popup .v-slider.v-slider-red:before {
+  background-color: red; }
+
+.v-colorpicker-popup .v-slider.v-slider-green:before {
+  background-color: green; }
+
+.v-colorpicker-popup .v-slider.v-slider-blue:before {
+  background-color: blue; }
+
+.v-colorpicker-popup .v-slider.hue-slider:before {
+  background: url(../valo/components/img/colorpicker/slider_hue_bg.png); }
+
+.v-colorpicker-popup input.v-textfield-dark {
+  color: #fff; }
+
+.v-colorpicker-popup input.v-textfield-light {
+  color: #000; }
+
+.v-colorpicker-grid {
+  height: 319px; }
+
+.v-colorpicker-popup .colorselect td {
+  line-height: 15px; }
+
+.v-table-header table,
+.v-table-footer table,
+.v-table-table {
+  border-spacing: 0;
+  border-collapse: separate;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  line-height: 1.55; }
+
+.v-table-resizer,
+.v-table-sort-indicator {
+  float: right; }
+
+.v-table-cell-wrapper {
+  overflow: hidden; }
+
+.v-table-caption-container-align-right {
+  text-align: right; }
+
+.v-table-header td,
+.v-table-footer td,
+.v-table-cell-content {
+  padding: 0; }
+
+.v-table-sort-indicator {
+  width: 0; }
+
+.v-tabsheet-hidetabs > .v-tabsheet-tabcontainer,
+.v-tabsheet-spacertd,
+.v-tabsheet-deco,
+.v-disabled .v-tabsheet-scroller,
+.v-tabsheet .v-disabled .v-tabsheet-caption-close {
+  display: none; }
+
+.v-tabsheet-content {
+  position: relative; }
+
+.v-splitpanel-vertical,
+.v-splitpanel-horizontal {
+  overflow: hidden;
+  white-space: nowrap; }
+
+.v-splitpanel-hsplitter {
+  z-index: 100;
+  cursor: e-resize;
+  cursor: col-resize; }
+
+.v-splitpanel-vsplitter {
+  z-index: 100;
+  cursor: s-resize;
+  cursor: row-resize; }
+
+.v-splitpanel-hsplitter:after,
+.v-splitpanel-vsplitter:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0; }
+.v-splitpanel-hsplitter div,
+.v-splitpanel-vsplitter div {
+  width: inherit;
+  height: inherit;
+  overflow: hidden;
+  position: relative; }
+
+.v-splitpanel-hsplitter div:before,
+.v-splitpanel-vsplitter div:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0; }
+
+.v-disabled [class$="splitter"] div {
+  cursor: default; }
+  .v-disabled [class$="splitter"] div:before {
+    display: none; }
+
+.v-splitpanel-horizontal .v-splitpanel-second-container {
+  position: static !important;
+  display: inline-block;
+  vertical-align: top; }
+.v-splitpanel-horizontal .v-splitpanel-first-container {
+  display: inline-block;
+  vertical-align: top; }
+
+html {
+  height: auto; }
+
+.v-generated-body {
+  height: auto;
+  overflow: auto;
+  background-color: #fafafa; }
+
+.v-app,
+.v-ui.v-scrollable {
+  width: auto !important;
+  height: auto !important;
+  overflow: visible !important; }
+
+.tests-valo.v-app, .tests-valo.v-app-loading {
+  font: 300 16px/1.55 "Open Sans", sans-serif;
+  color: #464646;
+  background-color: #fafafa;
+  cursor: default; }
+.tests-valo .v-app-loading {
+  width: 100%;
+  height: 100%;
+  background: #fafafa; }
+  .tests-valo .v-app-loading:before {
+    content: "";
+    position: fixed;
+    z-index: 100;
+    top: 45%;
+    left: 50%;
+    width: 28px;
+    height: 28px;
+    padding: 9px;
+    margin-top: -24px;
+    margin-left: -24px;
+    background: white url("../valo/shared/img/spinner.gif") no-repeat 50%;
+    border-radius: 4px; }
+  .tests-valo .v-app-loading:after {
+    position: fixed;
+    z-index: 100;
+    top: 45%;
+    padding-top: 47px;
+    text-align: center;
+    left: 0;
+    right: 0;
+    content: "Default Valo"; }
+.tests-valo .v-loading-indicator {
+  position: fixed !important;
+  z-index: 99999;
+  left: 0;
+  right: auto;
+  top: 0;
+  width: 50%;
+  opacity: 1;
+  height: 4px;
+  background-color: #197de1;
+  pointer-events: none;
+  -webkit-transition: none;
+  -moz-transition: none;
+  transition: none;
+  -webkit-animation: v-progress-start 1000ms 200ms both;
+  -moz-animation: v-progress-start 1000ms 200ms both;
+  animation: v-progress-start 1000ms 200ms both; }
+  .tests-valo .v-loading-indicator[style*="none"] {
+    display: block !important;
+    width: 100% !important;
+    opacity: 0;
+    -webkit-animation: none;
+    -moz-animation: none;
+    animation: none;
+    -webkit-transition: opacity 500ms 300ms, width 300ms;
+    -moz-transition: opacity 500ms 300ms, width 300ms;
+    transition: opacity 500ms 300ms, width 300ms; }
+.tests-valo .v-loading-indicator-delay {
+  width: 90%;
+  -webkit-animation: v-progress-delay 3.8s forwards;
+  -moz-animation: v-progress-delay 3.8s forwards;
+  animation: v-progress-delay 3.8s forwards; }
+  .v-ff .tests-valo .v-loading-indicator-delay {
+    width: 50%; }
+.tests-valo .v-loading-indicator-wait {
+  width: 96%;
+  -webkit-animation: v-progress-wait 5s forwards, v-progress-wait-pulse 1s 4s infinite backwards;
+  -moz-animation: v-progress-wait 5s forwards, v-progress-wait-pulse 1s 4s infinite backwards;
+  animation: v-progress-wait 5s forwards, v-progress-wait-pulse 1s 4s infinite backwards; }
+  .v-ff .tests-valo .v-loading-indicator-wait {
+    width: 90%; }
+.v-ie8 .tests-valo .v-loading-indicator,
+.v-ie8 .tests-valo .v-loading-indicator-delay,
+.v-ie8 .tests-valo .v-loading-indicator-wait, .v-ie9 .tests-valo .v-loading-indicator,
+.v-ie9 .tests-valo .v-loading-indicator-delay,
+.v-ie9 .tests-valo .v-loading-indicator-wait {
+  width: 28px !important;
+  height: 28px;
+  padding: 9px;
+  background: white url("../valo/shared/img/spinner.gif") no-repeat 50%;
+  border-radius: 4px;
+  top: 9px;
+  right: 9px;
+  left: auto;
+  filter: alpha(opacity=50); }
+  .v-ie8 .tests-valo .v-loading-indicator[style*="none"],
+  .v-ie8 .tests-valo .v-loading-indicator-delay[style*="none"],
+  .v-ie8 .tests-valo .v-loading-indicator-wait[style*="none"], .v-ie9 .tests-valo .v-loading-indicator[style*="none"],
+  .v-ie9 .tests-valo .v-loading-indicator-delay[style*="none"],
+  .v-ie9 .tests-valo .v-loading-indicator-wait[style*="none"] {
+    display: none !important; }
+.v-ie8 .tests-valo .v-loading-indicator-wait, .v-ie9 .tests-valo .v-loading-indicator-wait {
+  filter: alpha(opacity=100); }
+.tests-valo .v-scrollable:focus {
+  outline: none; }
+.tests-valo img.v-icon {
+  vertical-align: middle; }
+.tests-valo .v-caption {
+  font-size: 14px;
+  font-weight: 400;
+  padding-bottom: .3em;
+  padding-left: 1px; }
+.tests-valo .v-caption-on-left .v-caption,
+.tests-valo .v-caption-on-right .v-caption {
+  padding-top: 0;
+  padding-bottom: 0; }
+.tests-valo .v-icon + .v-captiontext,
+.tests-valo .v-icon + span {
+  margin-left: 7px; }
+  .tests-valo .v-icon + .v-captiontext:empty,
+  .tests-valo .v-icon + span:empty {
+    margin-left: 0; }
+.tests-valo .v-errorindicator {
+  color: #ed473b;
+  font-weight: 600;
+  width: 19px;
+  text-align: center; }
+  .tests-valo .v-errorindicator:before {
+    content: "!"; }
+.tests-valo .v-required-field-indicator {
+  color: #ed473b;
+  padding: 0 .2em; }
+.tests-valo select {
+  font: inherit;
+  font-weight: 400;
+  line-height: inherit;
+  color: inherit;
+  padding: 5px;
+  margin: 0;
+  border-radius: 4px;
+  border: 1px solid #cecece;
+  background-color: #fafafa;
+  background-image: -webkit-linear-gradient(top, #fafafa 2%, #efefef 98%);
+  background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%); }
+  .tests-valo select:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+.tests-valo button {
+  font: inherit;
+  font-weight: 400;
+  line-height: 1.55; }
+.tests-valo a {
+  cursor: pointer;
+  color: #197de1;
+  text-decoration: underline;
+  font-weight: inherit;
+  -webkit-transition: color 140ms;
+  -moz-transition: color 140ms;
+  transition: color 140ms; }
+  .tests-valo a:hover {
+    color: #4396ea; }
+.tests-valo .v-disabled {
+  cursor: default !important; }
+.tests-valo .v-drag-element {
+  background: #fafafa;
+  color: #464646;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  overflow: hidden;
+  opacity: 0.5;
+  filter: alpha(opacity=50); }
+.tests-valo .v-tooltip {
+  background-color: #323232;
+  background-color: rgba(50, 50, 50, 0.9);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
+  color: white;
+  padding: 5px 9px;
+  border-radius: 3px;
+  max-width: 35em;
+  overflow: hidden !important;
+  font-size: 14px; }
+  .tests-valo .v-tooltip div[style*="width"] {
+    width: auto !important; }
+  .tests-valo .v-tooltip .v-errormessage {
+    background-color: white;
+    background-color: white;
+    color: #ed473b;
+    margin: -5px -9px;
+    padding: 5px 9px;
+    max-height: 10em;
+    overflow: auto;
+    font-weight: 400; }
+    .tests-valo .v-tooltip .v-errormessage h2:only-child {
+      font: inherit;
+      line-height: inherit; }
+  .tests-valo .v-tooltip .v-tooltip-text {
+    max-height: 10em;
+    overflow: auto;
+    margin-top: 10px; }
+  .tests-valo .v-tooltip .v-errormessage[aria-hidden="true"] + .v-tooltip-text {
+    margin-top: 0; }
+  .tests-valo .v-tooltip h1,
+  .tests-valo .v-tooltip h2,
+  .tests-valo .v-tooltip h3,
+  .tests-valo .v-tooltip h4 {
+    color: inherit; }
+.tests-valo .v-contextmenu {
+  padding: 4px 4px;
+  border-radius: 4px;
+  background-color: white;
+  color: #474747;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 3px 5px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
+  -webkit-animation: valo-overlay-open 200ms;
+  -moz-animation: valo-overlay-open 200ms;
+  animation: valo-overlay-open 200ms;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden;
+  padding: 4px 4px; }
+  .tests-valo .v-contextmenu table {
+    border-spacing: 0; }
+.tests-valo .v-contextmenu .gwt-MenuItem {
+  cursor: pointer;
+  line-height: 27px;
+  padding: 0 20px 0 10px;
+  border-radius: 3px;
+  font-weight: 400;
+  white-space: nowrap;
+  position: relative; }
+  .tests-valo .v-contextmenu .gwt-MenuItem:active:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: #0957a6;
+    opacity: 0.15;
+    filter: alpha(opacity=15);
+    pointer-events: none;
+    border-radius: inherit; }
+  .tests-valo .v-contextmenu .gwt-MenuItem .v-icon {
+    max-height: 27px;
+    margin-right: 5px;
+    min-width: 1em; }
+.tests-valo .v-contextmenu .gwt-MenuItem-selected {
+  background-color: #197de1;
+  background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
+  background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
+  color: #ecf2f8; }
+.tests-valo .v-absolutelayout-wrapper {
+  position: absolute; }
+.tests-valo .v-absolutelayout-margin,
+.tests-valo .v-absolutelayout-canvas {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box; }
+.tests-valo .v-absolutelayout.v-has-height > div,
+.tests-valo .v-absolutelayout.v-has-height .v-absolutelayout-margin {
+  height: 100%; }
+.tests-valo .v-absolutelayout.v-has-height > div,
+.tests-valo .v-absolutelayout.v-has-width .v-absolutelayout-margin {
+  width: 100%; }
+.tests-valo .v-margin-top {
+  padding-top: 37px; }
+.tests-valo .v-margin-right {
+  padding-right: 37px; }
+.tests-valo .v-margin-bottom {
+  padding-bottom: 37px; }
+.tests-valo .v-margin-left {
+  padding-left: 37px; }
+.tests-valo .v-spacing {
+  width: 12px;
+  height: 12px; }
+.tests-valo .v-button {
+  position: relative;
+  text-align: center;
+  white-space: nowrap;
+  outline: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-touch-callout: none;
+  cursor: pointer;
+  height: 37px;
+  padding: 0 16px;
+  color: #2f2f2f;
+  font-weight: 400;
+  border-radius: 4px;
+  border: 1px solid #cecece;
+  border-top-color: #cecece;
+  border-bottom-color: #c5c5c5;
+  background-color: #fafafa;
+  background-image: -webkit-linear-gradient(top, #fafafa 2%, #efefef 98%);
+  background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%);
+  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #eaeaea, 0 2px 3px rgba(0, 0, 0, 0.05);
+  text-shadow: 0 1px 0 #fafafa; }
+  .tests-valo .v-button:before {
+    content: "";
+    display: inline-block;
+    width: 0;
+    height: 100%;
+    vertical-align: middle; }
+  .tests-valo .v-button > div {
+    vertical-align: middle; }
+  .v-sa .tests-valo .v-button:before {
+    height: 110%; }
+  .v-ff .tests-valo .v-button:before {
+    height: 107%; }
+  .v-ie .tests-valo .v-button:before {
+    margin-top: 4px; }
+  .tests-valo .v-button:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: inherit;
+    -webkit-transition: box-shadow 180ms, border 180ms;
+    -moz-transition: box-shadow 180ms, border 180ms;
+    transition: box-shadow 180ms, border 180ms; }
+  .tests-valo .v-button:focus:after {
+    -webkit-transition: none;
+    -moz-transition: none;
+    transition: none; }
+  .tests-valo .v-button.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+    .tests-valo .v-button.v-disabled:after {
+      display: none; }
+  .tests-valo .v-button:after {
+    border: inherit;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px; }
+  .tests-valo .v-button:hover:after {
+    background-color: rgba(186, 186, 186, 0.1); }
+  .tests-valo .v-button:focus:after {
+    border-color: #197de1;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-button:active:after {
+    background-color: rgba(125, 125, 125, 0.2); }
+.tests-valo .v-checkbox,
+.tests-valo .v-radiobutton {
+  position: relative;
+  line-height: 19px;
+  white-space: nowrap; }
+  .tests-valo .v-checkbox.v-has-width label,
+  .tests-valo .v-radiobutton.v-has-width label {
+    white-space: normal; }
+  :root .tests-valo .v-checkbox, :root
+  .tests-valo .v-radiobutton {
+    padding-left: 25px; }
+    :root .tests-valo .v-checkbox label, :root
+    .tests-valo .v-radiobutton label {
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      -webkit-touch-callout: none;
+      cursor: pointer; }
+  :root .tests-valo .v-checkbox > input, :root
+  .tests-valo .v-radiobutton > input {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+    left: .2em;
+    top: .2em;
+    z-index: 0;
+    margin: 0; }
+    :root .tests-valo .v-checkbox > input:focus ~ label:before, :root
+    .tests-valo .v-radiobutton > input:focus ~ label:before {
+      border-color: #197de1;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 white, inset 0 -1px 0 #eaeaea, 0 2px 3px rgba(0, 0, 0, 0.05); }
+    :root .tests-valo .v-checkbox > input ~ label:before, :root .tests-valo .v-checkbox > input ~ label:after, :root
+    .tests-valo .v-radiobutton > input ~ label:before, :root
+    .tests-valo .v-radiobutton > input ~ label:after {
+      content: "";
+      display: inline-block;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      width: 19px;
+      height: 19px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-radius: 4px;
+      font-size: 13px;
+      text-align: center; }
+    :root .tests-valo .v-checkbox > input ~ label:before, :root
+    .tests-valo .v-radiobutton > input ~ label:before {
+      height: 18.5px;
+      padding: 0 9px;
+      color: #2f2f2f;
+      font-weight: 400;
+      border-radius: 4px;
+      border: 1px solid #cecece;
+      border-top-color: #cecece;
+      border-bottom-color: #c5c5c5;
+      background-color: #fafafa;
+      background-image: -webkit-linear-gradient(top, #fafafa 2%, #efefef 98%);
+      background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%);
+      box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #eaeaea, 0 2px 3px rgba(0, 0, 0, 0.05);
+      text-shadow: 0 1px 0 #fafafa;
+      padding: 0;
+      height: 19px; }
+      :root .tests-valo .v-checkbox > input ~ label:before:after, :root
+      .tests-valo .v-radiobutton > input ~ label:before:after {
+        border: inherit;
+        top: -1px;
+        right: -1px;
+        bottom: -1px;
+        left: -1px; }
+      :root .tests-valo .v-checkbox > input ~ label:before:hover:after, :root
+      .tests-valo .v-radiobutton > input ~ label:before:hover:after {
+        background-color: rgba(186, 186, 186, 0.1); }
+      :root .tests-valo .v-checkbox > input ~ label:before:focus:after, :root
+      .tests-valo .v-radiobutton > input ~ label:before:focus:after {
+        border-color: #197de1;
+        box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+      :root .tests-valo .v-checkbox > input ~ label:before:active:after, :root
+      .tests-valo .v-radiobutton > input ~ label:before:active:after {
+        background-color: rgba(125, 125, 125, 0.2); }
+    :root .tests-valo .v-checkbox > input ~ label:after, :root
+    .tests-valo .v-radiobutton > input ~ label:after {
+      content: "\f00c";
+      font-family: FontAwesome;
+      color: transparent;
+      -webkit-transition: color 100ms;
+      -moz-transition: color 100ms;
+      transition: color 100ms; }
+    :root .tests-valo .v-checkbox > input:active ~ label:after, :root
+    .tests-valo .v-radiobutton > input:active ~ label:after {
+      background-color: rgba(125, 125, 125, 0.2); }
+    :root .tests-valo .v-checkbox > input:checked ~ label:after, :root
+    .tests-valo .v-radiobutton > input:checked ~ label:after {
+      color: #197de1; }
+    :root .tests-valo .v-checkbox > input[disabled] ~ label,
+    :root .tests-valo .v-checkbox > input[disabled] ~ label .v-icon,
+    :root .tests-valo .v-checkbox > input[disabled] ~ .v-icon, :root
+    .tests-valo .v-radiobutton > input[disabled] ~ label,
+    :root
+    .tests-valo .v-radiobutton > input[disabled] ~ label .v-icon,
+    :root
+    .tests-valo .v-radiobutton > input[disabled] ~ .v-icon {
+      cursor: default; }
+    :root .tests-valo .v-checkbox > input[disabled] ~ label:before,
+    :root .tests-valo .v-checkbox > input[disabled] ~ label:after, :root
+    .tests-valo .v-radiobutton > input[disabled] ~ label:before,
+    :root
+    .tests-valo .v-radiobutton > input[disabled] ~ label:after {
+      opacity: 0.5;
+      filter: alpha(opacity=50); }
+    :root .tests-valo .v-checkbox > input[disabled]:active ~ label:after, :root
+    .tests-valo .v-radiobutton > input[disabled]:active ~ label:after {
+      background: transparent; }
+  .tests-valo .v-checkbox > .v-icon, .tests-valo .v-checkbox > label .v-icon,
+  .tests-valo .v-radiobutton > .v-icon,
+  .tests-valo .v-radiobutton > label .v-icon {
+    margin: 0 6px 0 3px;
+    min-width: 1em;
+    cursor: pointer; }
+.tests-valo .v-filterselect {
+  position: relative;
+  width: 185px;
+  height: 37px;
+  border-radius: 4px;
+  white-space: nowrap; }
+  .tests-valo .v-filterselect .v-filterselect-input {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    margin: 0;
+    font: inherit;
+    font-weight: 400;
+    line-height: normal;
+    height: 37px;
+    border-radius: 4px;
+    padding: 4px 9px;
+    border: 1px solid #cecece;
+    background: white;
+    color: #474747;
+    box-shadow: inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1);
+    -webkit-transition: box-shadow 180ms, border 180ms;
+    -moz-transition: box-shadow 180ms, border 180ms;
+    transition: box-shadow 180ms, border 180ms;
+    width: 100% !important;
+    height: 100%;
+    padding-right: 44px;
+    border-radius: inherit; }
+    .tests-valo .v-filterselect .v-filterselect-input.v-disabled {
+      opacity: 0.5;
+      filter: alpha(opacity=50); }
+    .tests-valo .v-filterselect .v-filterselect-input:focus {
+      outline: none;
+      -webkit-transition: none;
+      -moz-transition: none;
+      transition: none;
+      border-color: #197de1;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1); }
+    .tests-valo .v-filterselect .v-filterselect-input.v-textfield-prompt, .tests-valo .v-filterselect .v-filterselect-input.v-textarea-prompt {
+      color: #a3a3a3; }
+  .tests-valo .v-filterselect .v-icon + .v-filterselect-input {
+    padding-left: 37px; }
+  .tests-valo .v-filterselect img.v-icon {
+    max-height: 37px;
+    margin-left: 9px; }
+  .tests-valo .v-filterselect span.v-icon {
+    color: #474747;
+    width: 37px; }
+  .tests-valo .v-filterselect.v-filterselect-prompt > .v-filterselect-input {
+    color: #a3a3a3; }
+  .tests-valo .v-filterselect .v-filterselect-button {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-touch-callout: none;
+    cursor: pointer;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    bottom: 1px;
+    width: 37px;
+    cursor: pointer;
+    border-left: 1px solid #e8e8e8;
+    border-radius: 0 3px 3px 0; }
+    .v-ie8 .tests-valo .v-filterselect .v-filterselect-button {
+      background-color: white; }
+    .tests-valo .v-filterselect .v-filterselect-button:before {
+      font-family: FontAwesome;
+      content: "\f078";
+      color: #474747;
+      color: #a3a3a3;
+      -webkit-transition: color 140ms;
+      -moz-transition: color 140ms;
+      transition: color 140ms;
+      position: absolute;
+      width: 37px;
+      text-align: center;
+      top: 50%;
+      line-height: 1;
+      margin-top: -.47em; }
+    .tests-valo .v-filterselect .v-filterselect-button:hover:before {
+      color: #474747; }
+    .tests-valo .v-filterselect .v-filterselect-button:active:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border-radius: inherit;
+      background-color: rgba(128, 128, 128, 0.2); }
+  .tests-valo .v-filterselect.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+    .tests-valo .v-filterselect.v-disabled .v-filterselect-button {
+      cursor: default;
+      pointer-events: none; }
+      .tests-valo .v-filterselect.v-disabled .v-filterselect-button:active:after {
+        display: none; }
+  .tests-valo .v-filterselect.v-readonly .v-filterselect-input {
+    background: transparent;
+    box-shadow: none; }
+    .tests-valo .v-filterselect.v-readonly .v-filterselect-input:focus {
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-filterselect.v-readonly .v-filterselect-button {
+    cursor: default;
+    pointer-events: none; }
+    .tests-valo .v-filterselect.v-readonly .v-filterselect-button:active:after {
+      display: none; }
+  .tests-valo .v-filterselect .v-icon {
+    position: absolute;
+    pointer-events: none; }
+.tests-valo .v-filterselect-suggestpopup {
+  margin-top: 5px !important; }
+  .tests-valo .v-filterselect-suggestpopup .v-filterselect-suggestmenu {
+    padding: 4px 4px;
+    border-radius: 4px;
+    background-color: white;
+    color: #474747;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 3px 5px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
+    -webkit-animation: valo-overlay-open 200ms;
+    -moz-animation: valo-overlay-open 200ms;
+    animation: valo-overlay-open 200ms;
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
+    backface-visibility: hidden;
+    padding: 4px 4px;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 1; }
+  .tests-valo .v-filterselect-suggestpopup table,
+  .tests-valo .v-filterselect-suggestpopup tbody,
+  .tests-valo .v-filterselect-suggestpopup tr,
+  .tests-valo .v-filterselect-suggestpopup td {
+    display: block; }
+  .tests-valo .v-filterselect-suggestpopup .gwt-MenuItem {
+    cursor: pointer;
+    line-height: 27px;
+    padding: 0 20px 0 10px;
+    border-radius: 3px;
+    font-weight: 400;
+    white-space: nowrap;
+    position: relative; }
+    .tests-valo .v-filterselect-suggestpopup .gwt-MenuItem:active:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: #0957a6;
+      opacity: 0.15;
+      filter: alpha(opacity=15);
+      pointer-events: none;
+      border-radius: inherit; }
+    .tests-valo .v-filterselect-suggestpopup .gwt-MenuItem .v-icon {
+      max-height: 27px;
+      margin-right: 5px;
+      min-width: 1em; }
+  .tests-valo .v-filterselect-suggestpopup .gwt-MenuItem-selected {
+    background-color: #197de1;
+    background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
+    background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
+    color: #ecf2f8; }
+  .tests-valo .v-filterselect-suggestpopup .v-filterselect-status {
+    position: absolute;
+    right: 4px;
+    background: rgba(212, 212, 212, 0.9);
+    color: #3b3b3b;
+    border-radius: 0 0 4px 4px;
+    height: 23px;
+    bottom: -23px;
+    font-size: 12px;
+    line-height: 23px;
+    padding: 0 6px;
+    cursor: default;
+    pointer-events: none;
+    -webkit-animation: valo-combobox-show-status 200ms 80ms backwards;
+    -moz-animation: valo-combobox-show-status 200ms 80ms backwards;
+    animation: valo-combobox-show-status 200ms 80ms backwards; }
+    .tests-valo .v-filterselect-suggestpopup .v-filterselect-status > * {
+      color: #3b3b3b;
+      text-decoration: none; }
+  .tests-valo .v-filterselect-suggestpopup div[class*="page"] {
+    position: absolute;
+    z-index: 3;
+    right: 0;
+    opacity: 0.2;
+    filter: alpha(opacity=20);
+    cursor: pointer;
+    -webkit-transition: all 200ms;
+    -moz-transition: all 200ms;
+    transition: all 200ms;
+    width: 25px;
+    height: 25px;
+    line-height: 25px;
+    text-align: center;
+    font-family: FontAwesome;
+    -webkit-transform: scale(0.8);
+    -moz-transform: scale(0.8);
+    -ms-transform: scale(0.8);
+    -o-transform: scale(0.8);
+    transform: scale(0.8);
+    color: #464646; }
+    .tests-valo .v-filterselect-suggestpopup div[class*="page"]:hover {
+      opacity: 1;
+      filter: none;
+      background: rgba(250, 250, 250, 0.5); }
+    .tests-valo .v-filterselect-suggestpopup div[class*="page"] span {
+      display: none; }
+  .tests-valo .v-filterselect-suggestpopup:hover div[class*="page"] {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+  .tests-valo .v-filterselect-suggestpopup div[class*="prev"] {
+    top: 0;
+    -webkit-transform-origin: 100% 0%;
+    -moz-transform-origin: 100% 0%;
+    -ms-transform-origin: 100% 0%;
+    -o-transform-origin: 100% 0%;
+    transform-origin: 100% 0%;
+    border-radius: 0 4px 0 4px; }
+    .tests-valo .v-filterselect-suggestpopup div[class*="prev"]:before {
+      content: "\f0d8"; }
+  .tests-valo .v-filterselect-suggestpopup div[class*="next"] {
+    bottom: 0;
+    -webkit-transform-origin: 100% 100%;
+    -moz-transform-origin: 100% 100%;
+    -ms-transform-origin: 100% 100%;
+    -o-transform-origin: 100% 100%;
+    transform-origin: 100% 100%;
+    border-radius: 4px 0 4px 0; }
+    .tests-valo .v-filterselect-suggestpopup div[class*="next"]:before {
+      content: "\f0d7"; }
+  .tests-valo .v-filterselect-suggestpopup div[class*="-off"] {
+    display: none; }
+.tests-valo .v-filterselect-no-input {
+  cursor: pointer;
+  text-shadow: 0 1px 0 #fafafa; }
+  .tests-valo .v-filterselect-no-input .v-filterselect-input {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-color: #fafafa;
+    background-image: -webkit-linear-gradient(top, #fafafa 2%, #efefef 98%);
+    background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%);
+    cursor: inherit;
+    box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #eaeaea, 0 2px 3px rgba(0, 0, 0, 0.05);
+    border: 1px solid #cecece;
+    border-top-color: #cecece;
+    border-bottom-color: #c5c5c5;
+    text-shadow: inherit;
+    text-overflow: ellipsis; }
+    .tests-valo .v-filterselect-no-input .v-filterselect-input:focus {
+      outline: none;
+      -webkit-transition: none;
+      -moz-transition: none;
+      transition: none;
+      border-color: #197de1;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 white, inset 0 -1px 0 #eaeaea, 0 2px 3px rgba(0, 0, 0, 0.05); }
+  .tests-valo .v-filterselect-no-input .v-filterselect-button {
+    border-left: none !important; }
+  .tests-valo .v-filterselect-no-input:hover .v-filterselect-button:before {
+    color: inherit; }
+.tests-valo .v-form fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+  height: 100%; }
+.tests-valo .v-form-content {
+  height: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box; }
+.tests-valo .v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-captioncell,
+.tests-valo .v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-contentcell,
+.tests-valo .v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-errorcell {
+  padding-top: 12px; }
+.tests-valo .v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-captioncell,
+.tests-valo .v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-contentcell,
+.tests-valo .v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-errorcell {
+  padding-top: 37px; }
+.tests-valo .v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-captioncell,
+.tests-valo .v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-contentcell,
+.tests-valo .v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-errorcell {
+  padding-bottom: 37px; }
+.tests-valo .v-formlayout-margin-left > tbody > .v-formlayout-row > .v-formlayout-captioncell {
+  padding-left: 37px; }
+.tests-valo .v-formlayout-margin-right > tbody > .v-formlayout-row > .v-formlayout-contentcell {
+  padding-right: 37px; }
+.tests-valo .v-formlayout > table {
+  border-spacing: 0;
+  position: relative;
+  padding: 0 12px; }
+.tests-valo .v-formlayout.v-has-width > table,
+.tests-valo .v-formlayout.v-has-width .v-formlayout-contentcell {
+  width: 100%; }
+.tests-valo .v-formlayout-error-indicator {
+  width: 19px; }
+.tests-valo .v-formlayout-captioncell {
+  vertical-align: top;
+  line-height: 36px; }
+  .tests-valo .v-formlayout-captioncell .v-caption {
+    padding-bottom: 0; }
+.tests-valo .v-formlayout-contentcell .v-checkbox,
+.tests-valo .v-formlayout-contentcell .v-radiobutton {
+  font-weight: 400; }
+.tests-valo .v-formlayout-contentcell > .h4 {
+  position: absolute;
+  left: 0;
+  margin-top: -0.5em;
+  padding-bottom: 0.5em;
+  border-bottom: 1px solid #e4e4e4;
+  color: #898989; }
+.tests-valo .v-escalator {
+  position: relative;
+  background-color: white; }
+.tests-valo .v-escalator-scroller {
+  position: absolute;
+  overflow: auto;
+  z-index: 20; }
+.tests-valo .v-escalator-scroller-horizontal {
+  left: 0;
+  /* Left position adjusted to align with frozen columns */
+  right: 0;
+  bottom: 0;
+  overflow-y: hidden;
+  -ms-overflow-y: hidden; }
+.tests-valo .v-escalator-scroller-vertical {
+  right: 0;
+  top: 0;
+  /* this will be overridden by code, but it's a good default behavior */
+  bottom: 0;
+  /* this will be overridden by code, but it's a good default behavior */
+  overflow-x: hidden;
+  -ms-overflow-x: hidden; }
+.tests-valo .v-escalator-tablewrapper {
+  position: absolute;
+  overflow: hidden; }
+.tests-valo .v-escalator-tablewrapper > table {
+  border-spacing: 0;
+  table-layout: fixed;
+  width: inherit;
+  /* a decent default fallback */ }
+.tests-valo .v-escalator-header,
+.tests-valo .v-escalator-body,
+.tests-valo .v-escalator-footer {
+  position: absolute;
+  left: 0;
+  width: inherit;
+  z-index: 10; }
+.tests-valo .v-escalator-header {
+  top: 0; }
+.tests-valo .v-escalator-footer {
+  bottom: 0; }
+.tests-valo .v-escalator-body {
+  z-index: 0;
+  top: 0; }
+  .tests-valo .v-escalator-body .v-escalator-row {
+    position: absolute;
+    top: 0;
+    left: 0; }
+.tests-valo .v-escalator-row {
+  display: block; }
+  .v-ie8 .tests-valo .v-escalator-row {
+    /* IE8 doesn't let table rows be longer than body only with display block. Moar hax. */
+    float: left;
+    clear: left;
+    /* 
+     * The inline style of margin-top from the <tbody> to offset the header's dimension is, 
+     * for some strange reason, inherited into each contained <tr>. 
+     * We need to cancel it: 
+     */
+    margin-top: 0; }
+  .tests-valo .v-escalator-row > td, .tests-valo .v-escalator-row > th {
+    /* IE8 likes the bgcolor here instead of on the row */
+    background-color: white; }
+.tests-valo .v-escalator-row {
+  width: inherit; }
+.tests-valo .v-escalator-cell {
+  display: block;
+  float: left;
+  border: 1px solid #aaaaaa;
+  padding: 2px;
+  white-space: nowrap;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box; }
+.tests-valo .v-escalator-cell.frozen {
+  position: relative;
+  z-index: 0; }
+.tests-valo .v-textfield {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  margin: 0;
+  font: inherit;
+  font-weight: 400;
+  line-height: normal;
+  height: 37px;
+  border-radius: 4px;
+  padding: 4px 9px;
+  border: 1px solid #cecece;
+  background: white;
+  color: #474747;
+  box-shadow: inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1);
+  -webkit-transition: box-shadow 180ms, border 180ms;
+  -moz-transition: box-shadow 180ms, border 180ms;
+  transition: box-shadow 180ms, border 180ms;
+  width: 185px; }
+  .tests-valo .v-textfield.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+  .tests-valo .v-textfield:focus {
+    outline: none;
+    -webkit-transition: none;
+    -moz-transition: none;
+    transition: none;
+    border-color: #197de1;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1); }
+  .tests-valo .v-textfield.v-textfield-prompt, .tests-valo .v-textfield.v-textarea-prompt {
+    color: #a3a3a3; }
+.tests-valo .v-textfield-readonly {
+  background: transparent;
+  box-shadow: none; }
+  .tests-valo .v-textfield-readonly:focus {
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+.tests-valo .v-textfield-error {
+  border-color: #ed473b;
+  background: #fffbfb;
+  color: #6a2823; }
+.tests-valo .v-textarea {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  margin: 0;
+  font: inherit;
+  font-weight: 400;
+  line-height: normal;
+  height: 37px;
+  border-radius: 4px;
+  padding: 6px;
+  border: 1px solid #cecece;
+  background: white;
+  color: #474747;
+  box-shadow: inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1);
+  -webkit-transition: box-shadow 180ms, border 180ms;
+  -moz-transition: box-shadow 180ms, border 180ms;
+  transition: box-shadow 180ms, border 180ms;
+  height: auto;
+  resize: none;
+  width: 185px; }
+  .tests-valo .v-textarea.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+  .tests-valo .v-textarea:focus {
+    outline: none;
+    -webkit-transition: none;
+    -moz-transition: none;
+    transition: none;
+    border-color: #197de1;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1); }
+  .tests-valo .v-textarea.v-textfield-prompt, .tests-valo .v-textarea.v-textarea-prompt {
+    color: #a3a3a3; }
+.tests-valo .v-textarea-readonly {
+  background: transparent;
+  box-shadow: none; }
+  .tests-valo .v-textarea-readonly:focus {
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+.tests-valo .v-textarea-error {
+  border-color: #ed473b;
+  background: #fffbfb;
+  color: #6a2823; }
+.tests-valo .v-datefield {
+  position: relative;
+  width: 185px;
+  height: 37px;
+  border-radius: 4px; }
+  .tests-valo .v-datefield .v-datefield-textfield {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    margin: 0;
+    font: inherit;
+    font-weight: 400;
+    line-height: normal;
+    height: 37px;
+    border-radius: 4px;
+    padding: 4px 9px;
+    border: 1px solid #cecece;
+    background: white;
+    color: #474747;
+    box-shadow: inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1);
+    -webkit-transition: box-shadow 180ms, border 180ms;
+    -moz-transition: box-shadow 180ms, border 180ms;
+    transition: box-shadow 180ms, border 180ms;
+    padding-left: 44.4px;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit; }
+    .tests-valo .v-datefield .v-datefield-textfield.v-disabled {
+      opacity: 0.5;
+      filter: alpha(opacity=50); }
+    .tests-valo .v-datefield .v-datefield-textfield:focus {
+      outline: none;
+      -webkit-transition: none;
+      -moz-transition: none;
+      transition: none;
+      border-color: #197de1;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1); }
+    .tests-valo .v-datefield .v-datefield-textfield.v-textfield-prompt, .tests-valo .v-datefield .v-datefield-textfield.v-textarea-prompt {
+      color: #a3a3a3; }
+  .tests-valo .v-datefield.v-datefield-prompt > .v-datefield-textfield {
+    color: #a3a3a3; }
+  .tests-valo .v-datefield .v-datefield-button {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-touch-callout: none;
+    cursor: pointer;
+    -webkit-appearance: none;
+    background: transparent;
+    border: none;
+    padding: 0;
+    position: absolute;
+    z-index: 10;
+    top: 1px;
+    bottom: 1px;
+    left: 1px;
+    width: 37px;
+    line-height: 35px;
+    text-align: center;
+    cursor: pointer;
+    font: inherit;
+    border-right: 1px solid #e8e8e8;
+    outline: none;
+    margin: 0;
+    border-radius: 3px 0 0 3px; }
+    .tests-valo .v-datefield .v-datefield-button:before {
+      font-family: FontAwesome;
+      content: "\f073";
+      color: #474747;
+      color: #a3a3a3;
+      -webkit-transition: color 140ms;
+      -moz-transition: color 140ms;
+      transition: color 140ms; }
+    .tests-valo .v-datefield .v-datefield-button:hover:before {
+      color: #474747; }
+    .tests-valo .v-datefield .v-datefield-button:active:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: rgba(128, 128, 128, 0.2);
+      border-radius: inherit; }
+  .tests-valo .v-datefield.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+    .tests-valo .v-datefield.v-disabled .v-datefield-button {
+      cursor: default;
+      pointer-events: none; }
+      .tests-valo .v-datefield.v-disabled .v-datefield-button:active:after {
+        display: none; }
+  .tests-valo .v-datefield.v-readonly .v-datefield-textfield {
+    background: transparent;
+    box-shadow: none; }
+    .tests-valo .v-datefield.v-readonly .v-datefield-textfield:focus {
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-datefield.v-readonly .v-datefield-button {
+    cursor: default;
+    pointer-events: none; }
+    .tests-valo .v-datefield.v-readonly .v-datefield-button:active:after {
+      display: none; }
+.tests-valo .v-datefield-full {
+  width: 240px; }
+.tests-valo .v-datefield-day {
+  width: 185px; }
+.tests-valo .v-datefield-month {
+  width: 120px; }
+.tests-valo .v-datefield-year {
+  width: 104px; }
+.tests-valo .v-datefield-popup {
+  padding: 4px 4px;
+  border-radius: 4px;
+  background-color: white;
+  color: #474747;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 3px 5px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
+  -webkit-animation: valo-overlay-open 200ms;
+  -moz-animation: valo-overlay-open 200ms;
+  animation: valo-overlay-open 200ms;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin-top: 5px !important;
+  cursor: default;
+  width: auto; }
+  .tests-valo .v-datefield-popup table {
+    border-collapse: collapse;
+    border-spacing: 0; }
+  .tests-valo .v-datefield-popup td {
+    padding: 2px; }
+  .tests-valo .v-datefield-popup .v-datefield-calendarpanel {
+    font-size: 16px;
+    text-align: center; }
+    .tests-valo .v-datefield-popup .v-datefield-calendarpanel:focus {
+      outline: none; }
+  .tests-valo .v-datefield-popup .v-datefield-calendarpanel-day {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 30px;
+    height: 26px;
+    border: 1px solid transparent;
+    line-height: 26px;
+    text-align: center;
+    font-size: 14px;
+    background: #fafafa;
+    border-radius: 2px;
+    -webkit-transition: color 200ms;
+    -moz-transition: color 200ms;
+    transition: color 200ms;
+    display: inline-block;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    cursor: pointer; }
+    .tests-valo .v-datefield-popup .v-datefield-calendarpanel-day:hover {
+      color: #197de1; }
+  .tests-valo .v-datefield-popup .v-datefield-calendarpanel-day-offmonth {
+    color: #a0a0a0;
+    background: transparent; }
+  .tests-valo .v-datefield-popup .v-datefield-calendarpanel-day-today {
+    color: #2f2f2f;
+    font-weight: 600;
+    border-color: #b6b6b6; }
+  .tests-valo .v-datefield-popup .v-datefield-calendarpanel-day.v-datefield-calendarpanel-day-selected,
+  .tests-valo .v-datefield-popup .v-datefield-calendarpanel-day.v-datefield-calendarpanel-day-selected:hover {
+    color: #d9e5f1;
+    background-color: #197de1;
+    background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
+    background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
+    border: none; }
+  .tests-valo .v-datefield-popup .v-datefield-calendarpanel-day.v-datefield-calendarpanel-day-focused {
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
+    position: relative; }
+    .v-ie8 .tests-valo .v-datefield-popup .v-datefield-calendarpanel-day.v-datefield-calendarpanel-day-focused {
+      border-color: #197de1; }
+  .tests-valo .v-datefield-popup .v-datefield-calendarpanel-weekdays {
+    height: 26px;
+    color: rgba(133, 133, 133, 0.85); }
+    .tests-valo .v-datefield-popup .v-datefield-calendarpanel-weekdays strong {
+      font: inherit;
+      font-size: 14px; }
+  .tests-valo .v-datefield-popup .v-datefield-calendarpanel-header {
+    white-space: nowrap; }
+  .tests-valo .v-datefield-popup td[class$="year"] button,
+  .tests-valo .v-datefield-popup td[class$="month"] button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    border: none;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    color: transparent;
+    font-size: 0;
+    width: 19px;
+    height: 25px;
+    outline: none;
+    position: relative;
+    vertical-align: middle; }
+    .tests-valo .v-datefield-popup td[class$="year"] button:before,
+    .tests-valo .v-datefield-popup td[class$="month"] button:before {
+      color: #a0a0a0;
+      font-size: 21px;
+      line-height: 24px;
+      -webkit-transition: color 200ms;
+      -moz-transition: color 200ms;
+      transition: color 200ms; }
+    .tests-valo .v-datefield-popup td[class$="year"] button:hover,
+    .tests-valo .v-datefield-popup td[class$="month"] button:hover {
+      opacity: 1;
+      filter: none; }
+      .tests-valo .v-datefield-popup td[class$="year"] button:hover:before,
+      .tests-valo .v-datefield-popup td[class$="month"] button:hover:before {
+        color: #197de1; }
+  .tests-valo .v-datefield-popup .v-button-prevyear:before {
+    font-family: FontAwesome;
+    content: "\f100"; }
+  .tests-valo .v-datefield-popup .v-button-prevmonth:before {
+    font-family: FontAwesome;
+    content: "\f104"; }
+  .tests-valo .v-datefield-popup .v-button-nextyear:before {
+    font-family: FontAwesome;
+    content: "\f101"; }
+  .tests-valo .v-datefield-popup .v-button-nextmonth:before {
+    font-family: FontAwesome;
+    content: "\f105"; }
+  .tests-valo .v-datefield-popup td.v-datefield-calendarpanel-month {
+    width: 130px;
+    color: #197de1; }
+  .tests-valo .v-datefield-popup .v-datefield-year td.v-datefield-calendarpanel-month {
+    width: 74px; }
+  .tests-valo .v-datefield-popup .v-datefield-calendarpanel-weeknumber,
+  .tests-valo .v-datefield-popup .v-datefield-calendarpanel-weekdays.v-datefield-calendarpanel-weeknumbers td:first-child {
+    width: 30px;
+    color: rgba(133, 133, 133, 0.85);
+    font-size: 14px;
+    display: inline-block;
+    text-align: left; }
+  .tests-valo .v-datefield-popup .v-datefield-calendarpanel-weeknumber {
+    position: relative; }
+  .tests-valo .v-datefield-popup .v-datefield-calendarpanel-weeknumbers .v-first:before {
+    content: "";
+    position: absolute;
+    top: 38px;
+    bottom: 0;
+    left: 0;
+    width: 34px;
+    border-top: 1px solid #ececec;
+    border-right: 1px solid #ececec;
+    border-top-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    background: #fafafa; }
+  .tests-valo .v-datefield-popup td.v-datefield-calendarpanel-time {
+    width: 100%;
+    font-size: 14px; }
+    .tests-valo .v-datefield-popup td.v-datefield-calendarpanel-time .v-label {
+      display: inline-block;
+      margin: 0 0.1em;
+      font-weight: 400; }
+.tests-valo .v-datefield-calendarpanel {
+  font-size: 16px;
+  text-align: center; }
+  .tests-valo .v-datefield-calendarpanel:focus {
+    outline: none; }
+.tests-valo .v-datefield-calendarpanel-day {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 30px;
+  height: 26px;
+  border: 1px solid transparent;
+  line-height: 26px;
+  text-align: center;
+  font-size: 14px;
+  background: #fafafa;
+  border-radius: 2px;
+  -webkit-transition: color 200ms;
+  -moz-transition: color 200ms;
+  transition: color 200ms;
+  display: inline-block;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  cursor: pointer; }
+  .tests-valo .v-datefield-calendarpanel-day:hover {
+    color: #197de1; }
+.tests-valo .v-datefield-calendarpanel-day-offmonth {
+  color: #a0a0a0;
+  background: transparent; }
+.tests-valo .v-datefield-calendarpanel-day-today {
+  color: #2f2f2f;
+  font-weight: 600;
+  border-color: #b6b6b6; }
+.tests-valo .v-datefield-calendarpanel-day.v-datefield-calendarpanel-day-selected,
+.tests-valo .v-datefield-calendarpanel-day.v-datefield-calendarpanel-day-selected:hover {
+  color: #d9e5f1;
+  background-color: #197de1;
+  background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
+  background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
+  border: none; }
+.tests-valo .v-datefield-calendarpanel-day.v-datefield-calendarpanel-day-focused {
+  box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
+  position: relative; }
+  .v-ie8 .tests-valo .v-datefield-calendarpanel-day.v-datefield-calendarpanel-day-focused {
+    border-color: #197de1; }
+.tests-valo .v-datefield-calendarpanel-weekdays {
+  height: 26px;
+  color: rgba(133, 133, 133, 0.85); }
+  .tests-valo .v-datefield-calendarpanel-weekdays strong {
+    font: inherit;
+    font-size: 14px; }
+.tests-valo .v-datefield-calendarpanel-header {
+  white-space: nowrap; }
+.tests-valo td[class$="year"] button,
+.tests-valo td[class$="month"] button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  color: transparent;
+  font-size: 0;
+  width: 19px;
+  height: 25px;
+  outline: none;
+  position: relative;
+  vertical-align: middle; }
+  .tests-valo td[class$="year"] button:before,
+  .tests-valo td[class$="month"] button:before {
+    color: #a0a0a0;
+    font-size: 21px;
+    line-height: 24px;
+    -webkit-transition: color 200ms;
+    -moz-transition: color 200ms;
+    transition: color 200ms; }
+  .tests-valo td[class$="year"] button:hover,
+  .tests-valo td[class$="month"] button:hover {
+    opacity: 1;
+    filter: none; }
+    .tests-valo td[class$="year"] button:hover:before,
+    .tests-valo td[class$="month"] button:hover:before {
+      color: #197de1; }
+.tests-valo .v-button-prevyear:before {
+  font-family: FontAwesome;
+  content: "\f100"; }
+.tests-valo .v-button-prevmonth:before {
+  font-family: FontAwesome;
+  content: "\f104"; }
+.tests-valo .v-button-nextyear:before {
+  font-family: FontAwesome;
+  content: "\f101"; }
+.tests-valo .v-button-nextmonth:before {
+  font-family: FontAwesome;
+  content: "\f105"; }
+.tests-valo td.v-datefield-calendarpanel-month {
+  width: 130px;
+  color: #197de1; }
+.tests-valo .v-datefield-year td.v-datefield-calendarpanel-month {
+  width: 74px; }
+.tests-valo .v-datefield-calendarpanel-weeknumber,
+.tests-valo .v-datefield-calendarpanel-weekdays.v-datefield-calendarpanel-weeknumbers td:first-child {
+  width: 30px;
+  color: rgba(133, 133, 133, 0.85);
+  font-size: 14px;
+  display: inline-block;
+  text-align: left; }
+.tests-valo .v-datefield-calendarpanel-weeknumber {
+  position: relative; }
+.tests-valo .v-datefield-calendarpanel-weeknumbers .v-first:before {
+  content: "";
+  position: absolute;
+  top: 38px;
+  bottom: 0;
+  left: 0;
+  width: 34px;
+  border-top: 1px solid #ececec;
+  border-right: 1px solid #ececec;
+  border-top-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  background: #fafafa; }
+.tests-valo td.v-datefield-calendarpanel-time {
+  width: 100%;
+  font-size: 14px; }
+  .tests-valo td.v-datefield-calendarpanel-time .v-label {
+    display: inline-block;
+    margin: 0 0.1em;
+    font-weight: 400; }
+.tests-valo .v-inline-datefield-calendarpanel {
+  font-size: 16px;
+  text-align: center; }
+  .tests-valo .v-inline-datefield-calendarpanel:focus {
+    outline: none; }
+.tests-valo .v-inline-datefield-calendarpanel-day {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 30px;
+  height: 26px;
+  border: 1px solid transparent;
+  line-height: 26px;
+  text-align: center;
+  font-size: 14px;
+  background: #fafafa;
+  border-radius: 2px;
+  -webkit-transition: color 200ms;
+  -moz-transition: color 200ms;
+  transition: color 200ms;
+  display: inline-block;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  cursor: pointer; }
+  .tests-valo .v-inline-datefield-calendarpanel-day:hover {
+    color: #197de1; }
+.tests-valo .v-inline-datefield-calendarpanel-day-offmonth {
+  color: #a0a0a0;
+  background: transparent; }
+.tests-valo .v-inline-datefield-calendarpanel-day-today {
+  color: #2f2f2f;
+  font-weight: 600;
+  border-color: #b6b6b6; }
+.tests-valo .v-inline-datefield-calendarpanel-day.v-inline-datefield-calendarpanel-day-selected,
+.tests-valo .v-inline-datefield-calendarpanel-day.v-inline-datefield-calendarpanel-day-selected:hover {
+  color: #d9e5f1;
+  background-color: #197de1;
+  background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
+  background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
+  border: none; }
+.tests-valo .v-inline-datefield-calendarpanel-day.v-inline-datefield-calendarpanel-day-focused {
+  box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
+  position: relative; }
+  .v-ie8 .tests-valo .v-inline-datefield-calendarpanel-day.v-inline-datefield-calendarpanel-day-focused {
+    border-color: #197de1; }
+.tests-valo .v-inline-datefield-calendarpanel-weekdays {
+  height: 26px;
+  color: rgba(133, 133, 133, 0.85); }
+  .tests-valo .v-inline-datefield-calendarpanel-weekdays strong {
+    font: inherit;
+    font-size: 14px; }
+.tests-valo .v-inline-datefield-calendarpanel-header {
+  white-space: nowrap; }
+.tests-valo td[class$="year"] button,
+.tests-valo td[class$="month"] button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  color: transparent;
+  font-size: 0;
+  width: 19px;
+  height: 25px;
+  outline: none;
+  position: relative;
+  vertical-align: middle; }
+  .tests-valo td[class$="year"] button:before,
+  .tests-valo td[class$="month"] button:before {
+    color: #a0a0a0;
+    font-size: 21px;
+    line-height: 24px;
+    -webkit-transition: color 200ms;
+    -moz-transition: color 200ms;
+    transition: color 200ms; }
+  .tests-valo td[class$="year"] button:hover,
+  .tests-valo td[class$="month"] button:hover {
+    opacity: 1;
+    filter: none; }
+    .tests-valo td[class$="year"] button:hover:before,
+    .tests-valo td[class$="month"] button:hover:before {
+      color: #197de1; }
+.tests-valo .v-button-prevyear:before {
+  font-family: FontAwesome;
+  content: "\f100"; }
+.tests-valo .v-button-prevmonth:before {
+  font-family: FontAwesome;
+  content: "\f104"; }
+.tests-valo .v-button-nextyear:before {
+  font-family: FontAwesome;
+  content: "\f101"; }
+.tests-valo .v-button-nextmonth:before {
+  font-family: FontAwesome;
+  content: "\f105"; }
+.tests-valo td.v-inline-datefield-calendarpanel-month {
+  width: 130px;
+  color: #197de1; }
+.tests-valo .v-datefield-year td.v-datefield-calendarpanel-month {
+  width: 74px; }
+.tests-valo .v-inline-datefield-calendarpanel-weeknumber,
+.tests-valo .v-inline-datefield-calendarpanel-weekdays.v-inline-datefield-calendarpanel-weeknumbers td:first-child {
+  width: 30px;
+  color: rgba(133, 133, 133, 0.85);
+  font-size: 14px;
+  display: inline-block;
+  text-align: left; }
+.tests-valo .v-inline-datefield-calendarpanel-weeknumber {
+  position: relative; }
+.tests-valo .v-inline-datefield-calendarpanel-weeknumbers .v-first:before {
+  content: "";
+  position: absolute;
+  top: 38px;
+  bottom: 0;
+  left: 0;
+  width: 34px;
+  border-top: 1px solid #ececec;
+  border-right: 1px solid #ececec;
+  border-top-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  background: #fafafa; }
+.tests-valo td.v-datefield-calendarpanel-time {
+  width: 100%;
+  font-size: 14px; }
+  .tests-valo td.v-datefield-calendarpanel-time .v-label {
+    display: inline-block;
+    margin: 0 0.1em;
+    font-weight: 400; }
+.tests-valo .v-inline-datefield-calendarpanel {
+  position: relative;
+  background: white;
+  padding: 6px; }
+.tests-valo .v-margin-top {
+  padding-top: 37px; }
+.tests-valo .v-margin-right {
+  padding-right: 37px; }
+.tests-valo .v-margin-bottom {
+  padding-bottom: 37px; }
+.tests-valo .v-margin-left {
+  padding-left: 37px; }
+.tests-valo .v-spacing {
+  width: 12px;
+  height: 12px; }
+.tests-valo .v-gridlayout-margin-top {
+  padding-top: 37px; }
+.tests-valo .v-gridlayout-margin-bottom {
+  padding-bottom: 37px; }
+.tests-valo .v-gridlayout-margin-left {
+  padding-left: 37px; }
+.tests-valo .v-gridlayout-margin-right {
+  padding-right: 37px; }
+.tests-valo .v-gridlayout-spacing-on {
+  padding-left: 12px;
+  padding-top: 12px; }
+.tests-valo .v-menubar {
+  position: relative;
+  text-align: center;
+  white-space: nowrap;
+  outline: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-touch-callout: none;
+  cursor: pointer;
+  height: 37px;
+  padding: 0 16px;
+  color: #2f2f2f;
+  font-weight: 400;
+  cursor: default;
+  border-radius: 4px;
+  border: 1px solid #cecece;
+  border-top-color: #cecece;
+  border-bottom-color: #c5c5c5;
+  background-color: #fafafa;
+  background-image: -webkit-linear-gradient(top, #fafafa 2%, #efefef 98%);
+  background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%);
+  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #eaeaea, 0 2px 3px rgba(0, 0, 0, 0.05);
+  text-shadow: 0 1px 0 #fafafa;
+  padding: 0;
+  text-align: left;
+  overflow: hidden; }
+  .tests-valo .v-menubar:focus:not(.v-disabled) {
+    border-color: #197de1;
+    box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #eaeaea, 0 2px 3px rgba(0, 0, 0, 0.05), 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-menubar.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+.tests-valo .v-menubar:active:after {
+  background: transparent; }
+.tests-valo .v-menubar > .v-menubar-menuitem {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  height: 37px;
+  padding: 0 15px;
+  color: inherit;
+  font-weight: 400;
+  cursor: pointer;
+  border-radius: 0;
+  border: 1px solid #cecece;
+  border-top-color: #cecece;
+  border-bottom-color: #c5c5c5;
+  background-color: #fafafa;
+  background-image: -webkit-linear-gradient(top, #fafafa 2%, #efefef 98%);
+  background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%);
+  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #eaeaea;
+  background: transparent;
+  border-width: 0 1px 0 0;
+  height: 100%;
+  vertical-align: top;
+  line-height: 34px;
+  text-align: center; }
+  .tests-valo .v-menubar > .v-menubar-menuitem:after {
+    border: inherit;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px; }
+  .tests-valo .v-menubar > .v-menubar-menuitem:hover:after {
+    background-color: rgba(186, 186, 186, 0.1); }
+  .tests-valo .v-menubar > .v-menubar-menuitem:focus:after {
+    border-color: #197de1;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-menubar > .v-menubar-menuitem:active:after {
+    background-color: rgba(125, 125, 125, 0.2); }
+  .tests-valo .v-menubar > .v-menubar-menuitem:first-child {
+    border-left-width: 0;
+    border-radius: 2px 0 0 2px; }
+  .tests-valo .v-menubar > .v-menubar-menuitem:last-child {
+    border-radius: 0 2px 2px 0;
+    margin-right: -1px; }
+  .tests-valo .v-menubar > .v-menubar-menuitem:first-child:last-child {
+    border-radius: 2px;
+    border-right-width: 0;
+    margin-right: 0; }
+  .tests-valo .v-menubar > .v-menubar-menuitem:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: inherit; }
+  .tests-valo .v-menubar > .v-menubar-menuitem:hover:before {
+    background-color: rgba(186, 186, 186, 0.1);
+    border: none; }
+  .tests-valo .v-menubar > .v-menubar-menuitem:active:before {
+    background-color: rgba(125, 125, 125, 0.2); }
+  .tests-valo .v-menubar > .v-menubar-menuitem .v-icon {
+    margin: 0 4px 0 -4px;
+    cursor: inherit; }
+  .tests-valo .v-menubar > .v-menubar-menuitem[class*="-icon-only"] {
+    width: 37px;
+    padding: 0; }
+    .tests-valo .v-menubar > .v-menubar-menuitem[class*="-icon-only"] .v-icon {
+      margin: 0; }
+.tests-valo .v-menubar > .v-menubar-menuitem-checked {
+  box-shadow: none;
+  background-color: #ededed;
+  background-image: -webkit-linear-gradient(bottom, #ededed 2%, #e9e9e9 98%);
+  background-image: linear-gradient(to top,#ededed 2%, #e9e9e9 98%);
+  color: #2d2d2d; }
+.tests-valo .v-disabled > .v-menubar-menuitem,
+.tests-valo .v-menubar > .v-menubar-menuitem-disabled {
+  cursor: default; }
+  .tests-valo .v-disabled > .v-menubar-menuitem:before,
+  .tests-valo .v-menubar > .v-menubar-menuitem-disabled:before {
+    display: none; }
+.tests-valo .v-menubar-menuitem-disabled {
+  opacity: 0.5;
+  filter: alpha(opacity=50); }
+.tests-valo .v-menubar > .v-menubar-menuitem-selected {
+  color: #ecf2f8;
+  border-radius: 0;
+  border: 1px solid #1467b9;
+  border-top-color: #166fbb;
+  border-bottom-color: #125aaf;
+  background-color: #197de1;
+  background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
+  background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
+  box-shadow: inset 0 1px 0 #4595e5, inset 0 -1px 0 #166ccd;
+  text-shadow: 0 -1px 0 #197de1;
+  border-top-width: 0;
+  border-left-width: 0;
+  border-bottom-width: 0;
+  z-index: 2; }
+  .tests-valo .v-menubar > .v-menubar-menuitem-selected:hover:before {
+    background: none; }
+.tests-valo .v-menubar .v-menubar-submenu-indicator {
+  display: none; }
+.tests-valo .v-menubar-popup {
+  padding: 4px 4px;
+  border-radius: 4px;
+  background-color: white;
+  color: #474747;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 3px 5px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
+  -webkit-animation: valo-overlay-open 200ms;
+  -moz-animation: valo-overlay-open 200ms;
+  animation: valo-overlay-open 200ms;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden;
+  padding: 4px 4px;
+  margin: 5px 0 0 1px !important; }
+  .tests-valo .v-menubar-popup .v-menubar-submenu {
+    outline: none; }
+  .tests-valo .v-menubar-popup .v-menubar-menuitem {
+    display: block;
+    cursor: pointer;
+    line-height: 27px;
+    padding: 0 20px 0 10px;
+    border-radius: 3px;
+    font-weight: 400;
+    white-space: nowrap;
+    position: relative;
+    padding-left: 32px;
+    padding-right: 37px;
+    position: relative; }
+    .tests-valo .v-menubar-popup .v-menubar-menuitem:active:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: #0957a6;
+      opacity: 0.15;
+      filter: alpha(opacity=15);
+      pointer-events: none;
+      border-radius: inherit; }
+    .tests-valo .v-menubar-popup .v-menubar-menuitem .v-icon {
+      max-height: 27px;
+      margin-right: 5px;
+      min-width: 1em; }
+  .tests-valo .v-menubar-popup .v-menubar-submenu-indicator {
+    display: none; }
+    .tests-valo .v-menubar-popup .v-menubar-submenu-indicator + .v-menubar-menuitem-caption:after {
+      position: absolute;
+      right: 10px;
+      font-family: FontAwesome;
+      content: "\f054";
+      line-height: 29px; }
+  .tests-valo .v-menubar-popup .v-menubar-menuitem-selected {
+    background-color: #197de1;
+    background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
+    background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
+    color: #ecf2f8; }
+  .tests-valo .v-menubar-popup .v-menubar-separator {
+    display: block;
+    margin: 4px 0;
+    height: 0;
+    overflow: hidden;
+    border-bottom: 1px solid #e8e8e8; }
+  .tests-valo .v-menubar-popup [class*="checked"] .v-menubar-menuitem-caption:before {
+    content: "\f00c";
+    font-family: FontAwesome;
+    position: absolute;
+    left: 10px; }
+  .tests-valo .v-menubar-popup [class*="unchecked"] .v-menubar-menuitem-caption:before {
+    content: ""; }
+  .tests-valo .v-menubar-popup [class*="disabled"] {
+    cursor: default; }
+:root .tests-valo .v-radiobutton > input:checked ~ label:after {
+  width: 7px;
+  height: 7px;
+  top: 6px;
+  left: 6px;
+  background: #197de1; }
+:root .tests-valo .v-radiobutton > input ~ label:before, :root .tests-valo .v-radiobutton > input ~ label:after {
+  border-radius: 50%;
+  content: ""; }
+.tests-valo .v-select-optiongroup .v-radiobutton,
+.tests-valo .v-select-optiongroup .v-checkbox {
+  display: block;
+  margin: 9px 16px 0 0; }
+  .tests-valo .v-select-optiongroup .v-radiobutton:first-child,
+  .tests-valo .v-select-optiongroup .v-checkbox:first-child {
+    margin-top: 6px; }
+  .tests-valo .v-select-optiongroup .v-radiobutton:last-child,
+  .tests-valo .v-select-optiongroup .v-checkbox:last-child {
+    margin-bottom: 6px; }
+.tests-valo .v-select-optiongroup.v-has-width label {
+  white-space: normal; }
+.tests-valo .v-link {
+  cursor: pointer;
+  color: #197de1;
+  text-decoration: underline;
+  font-weight: inherit;
+  -webkit-transition: color 140ms;
+  -moz-transition: color 140ms;
+  transition: color 140ms; }
+  .tests-valo .v-link:hover {
+    color: #4396ea; }
+  .tests-valo .v-link a {
+    cursor: inherit;
+    color: inherit;
+    text-decoration: inherit;
+    -webkit-transition: inherit;
+    -moz-transition: inherit;
+    transition: inherit; }
+  .tests-valo .v-link .v-icon {
+    cursor: inherit; }
+.tests-valo .v-window {
+  padding: 4px 4px;
+  border-radius: 4px;
+  background-color: white;
+  color: #474747;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 3px 5px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
+  -webkit-animation: valo-overlay-open 200ms;
+  -moz-animation: valo-overlay-open 200ms;
+  animation: valo-overlay-open 200ms;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden;
+  box-shadow: 0 4px 12px 6px rgba(0, 0, 0, 0.05), 0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 3px 5px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
+  padding: 0;
+  min-width: 148px !important;
+  min-height: 37px !important;
+  overflow: hidden !important;
+  white-space: nowrap;
+  -webkit-transition: width 200ms, height 200ms, top 200ms, left 200ms;
+  -moz-transition: width 200ms, height 200ms, top 200ms, left 200ms;
+  transition: width 200ms, height 200ms, top 200ms, left 200ms; }
+.tests-valo .v-window-modalitycurtain {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: #fafafa;
+  opacity: 0.5;
+  filter: alpha(opacity=50); }
+.tests-valo .v-window-draggingCurtain {
+  position: fixed !important; }
+.tests-valo .v-window-resizingCurtain + .v-window,
+.tests-valo .v-window-draggingCurtain + .v-window {
+  -webkit-transition: none;
+  -moz-transition: none;
+  transition: none; }
+.tests-valo .v-window-outerheader {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  right: 0;
+  -webkit-transform: translatez(0);
+  -moz-transform: translatez(0);
+  -ms-transform: translatez(0);
+  -o-transform: translatez(0);
+  transform: translatez(0); }
+  .tests-valo .v-window-outerheader:after {
+    content: "";
+    position: absolute;
+    bottom: -1px;
+    right: 0;
+    left: 0;
+    height: 1px;
+    background: #e4e4e4; }
+.tests-valo .v-window-header {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: move;
+  line-height: 36px;
+  padding-left: 12px;
+  margin-right: 74px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #7e7e7e; }
+.tests-valo .v-window-closebox,
+.tests-valo .v-window-maximizebox,
+.tests-valo .v-window-restorebox {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 0;
+  width: 37px;
+  height: 36px;
+  line-height: 34px;
+  text-align: center;
+  cursor: pointer;
+  font-family: FontAwesome;
+  font-size: 21px;
+  opacity: 0.4;
+  filter: alpha(opacity=40);
+  -webkit-transition: all 140ms;
+  -moz-transition: all 140ms;
+  transition: all 140ms; }
+  .tests-valo .v-window-closebox:focus,
+  .tests-valo .v-window-maximizebox:focus,
+  .tests-valo .v-window-restorebox:focus {
+    outline: none; }
+  .tests-valo .v-window-closebox:hover,
+  .tests-valo .v-window-maximizebox:hover,
+  .tests-valo .v-window-restorebox:hover {
+    opacity: 1;
+    filter: none;
+    color: #197de1; }
+  .tests-valo .v-window-closebox:active,
+  .tests-valo .v-window-maximizebox:active,
+  .tests-valo .v-window-restorebox:active {
+    color: inherit; }
+.tests-valo .v-window-closebox:before {
+  content: "\00d7"; }
+.tests-valo .v-window-maximizebox,
+.tests-valo .v-window-restorebox {
+  right: 37px; }
+.tests-valo .v-window-restorebox-disabled,
+.tests-valo .v-window-maximizebox-disabled {
+  display: none; }
+.tests-valo .v-window-maximizebox:before {
+  content: "+"; }
+.tests-valo .v-window-restorebox:before {
+  content: "\2013"; }
+.tests-valo .v-window > .popupContent,
+.tests-valo .v-window-wrap,
+.tests-valo .v-window-contents,
+.tests-valo .v-window-contents > .v-scrollable {
+  height: 100%; }
+.tests-valo .v-window-contents {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border-radius: 4px;
+  margin-top: 0 !important; }
+  .tests-valo .v-window-contents > .v-scrollable {
+    position: relative; }
+    .tests-valo .v-window-contents > .v-scrollable > .v-margin-top {
+      padding-top: 12px; }
+    .tests-valo .v-window-contents > .v-scrollable > .v-margin-right {
+      padding-right: 12px; }
+    .tests-valo .v-window-contents > .v-scrollable > .v-margin-bottom {
+      padding-bottom: 12px; }
+    .tests-valo .v-window-contents > .v-scrollable > .v-margin-left {
+      padding-left: 12px; }
+    .tests-valo .v-window-contents > .v-scrollable > .v-formlayout .v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-captioncell,
+    .tests-valo .v-window-contents > .v-scrollable > .v-formlayout .v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-contentcell,
+    .tests-valo .v-window-contents > .v-scrollable > .v-formlayout .v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-errorcell {
+      padding-top: 12px; }
+    .tests-valo .v-window-contents > .v-scrollable > .v-formlayout .v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-captioncell,
+    .tests-valo .v-window-contents > .v-scrollable > .v-formlayout .v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-contentcell,
+    .tests-valo .v-window-contents > .v-scrollable > .v-formlayout .v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-errorcell {
+      padding-bottom: 12px; }
+    .tests-valo .v-window-contents > .v-scrollable > .v-formlayout .v-formlayout-margin-left > tbody > .v-formlayout-row > .v-formlayout-captioncell {
+      padding-left: 12px; }
+    .tests-valo .v-window-contents > .v-scrollable > .v-formlayout .v-formlayout-margin-right > tbody > .v-formlayout-row > .v-formlayout-contentcell {
+      padding-right: 12px; }
+    .tests-valo .v-window-contents > .v-scrollable:focus {
+      outline: none; }
+    .tests-valo .v-window-contents > .v-scrollable:before {
+      content: "";
+      position: absolute;
+      z-index: 2;
+      top: 0;
+      height: 1px;
+      background: white;
+      left: 0;
+      right: 0; }
+    .tests-valo .v-window-contents > .v-scrollable .v-panel-captionwrap:after {
+      background: #e4e4e4; }
+    .tests-valo .v-window-contents > .v-scrollable .v-panel-content:before {
+      background: white; }
+.tests-valo .v-window-footer {
+  height: 0; }
+.tests-valo .v-window-resizebox {
+  position: absolute;
+  z-index: 1000;
+  right: 0;
+  bottom: 0;
+  width: 19px;
+  height: 19px;
+  cursor: nwse-resize; }
+  .v-ie8 .tests-valo .v-window-resizebox {
+    background: #000;
+    filter: alpha(opacity=0.1); }
+  .v-ie8 .tests-valo .v-window-resizebox, .v-ie9 .tests-valo .v-window-resizebox {
+    cursor: se-resize; }
+.tests-valo .v-window-resizebox-disabled {
+  display: none; }
+.tests-valo .v-window-modalitycurtain:active ~ .v-window {
+  -webkit-animation: none;
+  -moz-animation: none;
+  animation: none; }
+.tests-valo .v-window-bottom-toolbar {
+  padding: 7px 12px;
+  background-color: #fafafa;
+  background-image: -webkit-linear-gradient(top, #f0f0f0 0, #fafafa 4px);
+  background-image: linear-gradient(to bottom,#f0f0f0 0, #fafafa 4px);
+  border-top: 1px solid #e4e4e4; }
+  .tests-valo .v-window-bottom-toolbar .v-expand {
+    overflow: visible; }
+  .tests-valo .v-window-bottom-toolbar .v-label {
+    line-height: 36px; }
+  .tests-valo .v-window-bottom-toolbar .v-spacing {
+    width: 6px; }
+.tests-valo .v-margin-left.v-margin-right.v-margin-bottom .v-window-bottom-toolbar {
+  margin: 0 -12px -12px;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box; }
+.tests-valo .v-tree {
+  position: relative;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none; }
+  .tests-valo .v-tree:focus {
+    outline: none; }
+.tests-valo .v-tree-node:before {
+  content: "";
+  position: absolute;
+  display: inline-block;
+  z-index: 3;
+  width: 1.9em;
+  height: 28px;
+  cursor: pointer; }
+  .v-ie8 .tests-valo .v-tree-node:before {
+    content: "+";
+    position: static;
+    margin-left: -1.9em;
+    vertical-align: top;
+    content: "\f0da";
+    font-family: FontAwesome;
+    text-align: center; }
+.v-ie8 .tests-valo .v-tree-node {
+  padding-left: 1.9em; }
+.tests-valo .v-tree-node-caption {
+  height: 28px;
+  line-height: 27px;
+  overflow: hidden;
+  white-space: nowrap; }
+  .tests-valo .v-tree-node-caption > div {
+    display: inline-block;
+    width: 100%;
+    position: relative;
+    z-index: 2; }
+    .tests-valo .v-tree-node-caption > div:before {
+      content: "\f0da";
+      font-family: FontAwesome;
+      display: inline-block;
+      width: .5em;
+      text-align: center;
+      margin: 0 .6em 0 .8em;
+      -webkit-transition: all 100ms;
+      -moz-transition: all 100ms;
+      transition: all 100ms; }
+      .v-ie8 .tests-valo .v-tree-node-caption > div:before {
+        display: none; }
+  .tests-valo .v-tree-node-caption span {
+    padding-right: 28px;
+    cursor: pointer;
+    display: inline-block;
+    width: 100%; }
+    .v-ie .tests-valo .v-tree-node-caption span {
+      width: auto; }
+  .tests-valo .v-tree-node-caption .v-icon {
+    padding-right: 0;
+    width: auto;
+    min-width: 1em; }
+  .tests-valo .v-tree-node-caption:after {
+    content: "";
+    display: inline-block;
+    vertical-align: top;
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    width: 100%;
+    height: 28px;
+    border-radius: 4px;
+    opacity: 0;
+    -webkit-transition: opacity 120ms;
+    -moz-transition: opacity 120ms;
+    transition: opacity 120ms; }
+    .v-ie8 .tests-valo .v-tree-node-caption:after {
+      content: none; }
+  .v-ie8 .tests-valo .v-tree-node-caption {
+    display: inline-block; }
+.tests-valo .v-tree-node-expanded > .v-tree-node-caption > div:before {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+  content: "\f0da";
+  font-family: FontAwesome; }
+.v-ie8 .tests-valo .v-tree-node-expanded:before {
+  content: "\f0d7";
+  font-family: FontAwesome; }
+.tests-valo .v-tree-node-leaf > .v-tree-node-caption > div:before, .v-ie8 .tests-valo .v-tree-node-leaf:before {
+  visibility: hidden; }
+.tests-valo .v-tree-node-focused:after {
+  opacity: 1;
+  border: 1px solid #197de1; }
+.v-ie8 .tests-valo .v-tree-node-focused {
+  outline: 1px dotted #197de1; }
+.tests-valo .v-tree-node-selected {
+  color: #ecf2f8;
+  text-shadow: valo-button-text-shadow(#197de1, 25%); }
+  .tests-valo .v-tree-node-selected:after {
+    opacity: 1;
+    background-color: #197de1;
+    background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
+    background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
+    border: none; }
+  .v-ie8 .tests-valo .v-tree-node-selected {
+    background-color: #197de1;
+    background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
+    background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%); }
+.tests-valo .v-tree-node-children {
+  padding-left: 19px; }
+  .v-ie8 .tests-valo .v-tree-node-children {
+    padding-left: 0; }
+.tests-valo .v-tree-node-drag-top:before,
+.tests-valo .v-tree-node-drag-bottom:after {
+  content: "\2022";
+  display: block;
+  position: absolute;
+  height: 2px;
+  width: 100%;
+  background: #197de1;
+  font-size: 32px;
+  line-height: 2px;
+  color: #197de1;
+  text-indent: -4px;
+  text-shadow: 0 0 1px #fafafa, 0 0 1px #fafafa; }
+.tests-valo .v-tree-node-caption-drag-center {
+  box-shadow: 0 0 0 2px #197de1;
+  position: relative;
+  border-radius: 4px; }
+  .v-ie8 .tests-valo .v-tree-node-caption-drag-center {
+    outline: 2px solid #197de1; }
+.v-ff .tests-valo .v-tree-node-drag-top:before, .v-ff .tests-valo .v-tree-node-drag-bottom:after {
+  line-height: 1px; }
+.v-ie8 .tests-valo .v-tree-node-drag-top:before, .v-ie8 .tests-valo .v-tree-node-drag-bottom:after {
+  line-height: 0; }
+.tests-valo .v-table {
+  position: relative;
+  background: #fafafa;
+  color: #464646; }
+.tests-valo .v-table-header table,
+.tests-valo .v-table-footer table,
+.tests-valo .v-table-table {
+  outline: 1px solid #dbdbdb; }
+.tests-valo .v-table-header-wrap,
+.tests-valo .v-table-footer-wrap,
+.tests-valo .v-table-header-drag {
+  border: 1px solid #dbdbdb;
+  background-color: #fafafa;
+  background-image: -webkit-linear-gradient(top, #fafafa 2%, #efefef 98%);
+  background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%);
+  white-space: nowrap;
+  font-size: 14px;
+  text-shadow: valo-text-shadow; }
+.tests-valo .v-table-header-wrap {
+  position: relative;
+  border-bottom: none; }
+.tests-valo .v-table-footer-wrap {
+  border-top: none; }
+.tests-valo .v-table-footer td {
+  border-left: 1px solid #dbdbdb; }
+.tests-valo .v-table-footer-container,
+.tests-valo .v-table-caption-container {
+  overflow: hidden;
+  line-height: 1; }
+.tests-valo .v-table-footer-container {
+  padding-top: 11px;
+  padding-bottom: 12px;
+  float: right;
+  padding-right: 13px; }
+.tests-valo [class^="v-table-header-cell"] {
+  position: relative;
+  display: inline-block; }
+.tests-valo .v-table-caption-container,
+.tests-valo .v-table-header-drag {
+  padding-top: 12px;
+  padding-bottom: 11px;
+  padding-left: 12px;
+  padding-right: 12px;
+  border-left: 1px solid #dbdbdb; }
+.tests-valo .v-table-resizer {
+  height: 37px;
+  background: transparent;
+  width: 7px;
+  cursor: e-resize;
+  cursor: col-resize;
+  position: absolute;
+  right: 0;
+  z-index: 1; }
+.tests-valo .v-table-cell-content {
+  border-left: 1px solid #dbdbdb;
+  padding: 0 12px; }
+  .tests-valo .v-table-cell-content:first-child {
+    border-left: none;
+    padding-left: 13px; }
+.tests-valo .v-table-header td:first-child .v-table-caption-container,
+.tests-valo .v-table-footer td:first-child {
+  border-left-color: transparent; }
+.tests-valo .v-table-cell-wrapper {
+  white-space: nowrap;
+  line-height: 1;
+  padding: 11px 0; }
+.tests-valo .v-table-body {
+  border: 1px solid #dbdbdb; }
+.tests-valo .v-table-table {
+  background-color: white; }
+.tests-valo .v-table-table td {
+  border-top: 1px solid #dbdbdb; }
+.tests-valo .v-table-table tr:first-child td {
+  border-top: none; }
+.tests-valo .v-table-row {
+  background-color: white; }
+.tests-valo .v-table-row-odd {
+  background-color: whitesmoke; }
+.tests-valo .v-table [class*="-row"].v-selected {
+  background-color: #197de1;
+  background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
+  background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
+  background-origin: border-box;
+  color: #ecf2f8;
+  text-shadow: valo-button-text-shadow(#197de1, 25%); }
+  .tests-valo .v-table [class*="-row"].v-selected + .v-selected {
+    background: #166ed5; }
+    .tests-valo .v-table [class*="-row"].v-selected + .v-selected td {
+      border-top-color: #166ed5; }
+  .tests-valo .v-table [class*="-row"].v-selected .v-table-cell-content {
+    border-color: transparent;
+    border-left-color: #1d69b4; }
+    .tests-valo .v-table [class*="-row"].v-selected .v-table-cell-content:first-child {
+      border-left-color: transparent; }
+.tests-valo .v-table-header-cell-asc .v-table-sort-indicator,
+.tests-valo .v-table-header-cell-desc .v-table-sort-indicator {
+  background: transparent;
+  width: 19px;
+  height: 37px;
+  line-height: 37px;
+  position: absolute;
+  right: 0; }
+  .tests-valo .v-table-header-cell-asc .v-table-sort-indicator + .v-table-caption-container,
+  .tests-valo .v-table-header-cell-desc .v-table-sort-indicator + .v-table-caption-container {
+    padding-right: 19px; }
+.tests-valo .v-table-header-cell-asc .v-table-sort-indicator:before,
+.tests-valo .v-table-header-cell-desc .v-table-sort-indicator:before {
+  font-style: normal;
+  font-weight: normal;
+  display: inline-block; }
+.tests-valo .v-table-header-cell-asc .v-table-sort-indicator:before {
+  content: '\f0dd';
+  font-family: FontAwesome; }
+.tests-valo .v-table-header-cell-desc .v-table-sort-indicator:before {
+  content: '\f0de';
+  font-family: FontAwesome; }
+.tests-valo .v-table-focus {
+  outline: 1px solid #197de1;
+  outline-offset: -1px; }
+.tests-valo .v-drag-element.v-table-focus,
+.tests-valo .v-drag-element .v-table-focus {
+  outline: none; }
+.tests-valo .v-table-header-drag {
+  position: absolute;
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+  margin-top: -19px;
+  z-index: 30000;
+  line-height: 1; }
+.tests-valo .v-table-focus-slot-right {
+  border-right: 2px solid rgba(25, 125, 225, 0.5); }
+.tests-valo .v-table-focus-slot-left {
+  border-left: 2px solid rgba(25, 125, 225, 0.5);
+  left: 0;
+  right: auto;
+  margin-left: 0 !important; }
+.tests-valo .v-table-column-selector {
+  height: 37px;
+  padding: 0 16px;
+  color: #2f2f2f;
+  font-weight: 400;
+  border-radius: 4px;
+  border: 1px solid #cecece;
+  border-top-color: #cecece;
+  border-bottom-color: #c5c5c5;
+  background-color: #fafafa;
+  background-image: -webkit-linear-gradient(top, #fafafa 2%, #efefef 98%);
+  background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%);
+  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #eaeaea, 0 2px 3px rgba(0, 0, 0, 0.05);
+  text-shadow: 0 1px 0 #fafafa;
+  position: absolute;
+  z-index: 2;
+  top: -9px;
+  right: -9px;
+  height: 19px;
+  line-height: 19px;
+  width: 19px;
+  padding: 0;
+  border-radius: 50%;
+  cursor: pointer;
+  text-align: center;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  -webkit-transition: opacity 200ms 1s;
+  -moz-transition: opacity 200ms 1s;
+  transition: opacity 200ms 1s; }
+  .tests-valo .v-table-column-selector:after {
+    border: inherit;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px; }
+  .tests-valo .v-table-column-selector:hover:after {
+    background-color: rgba(186, 186, 186, 0.1); }
+  .tests-valo .v-table-column-selector:focus:after {
+    border-color: #197de1;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-table-column-selector:active:after {
+    background-color: rgba(125, 125, 125, 0.2); }
+  .tests-valo .v-table-column-selector:after {
+    content: "";
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px;
+    border-radius: inherit; }
+  .tests-valo .v-table-column-selector:active:after {
+    background-color: rgba(125, 125, 125, 0.2); }
+  .tests-valo .v-table-column-selector:before {
+    font-family: FontAwesome;
+    content: "\f013"; }
+.tests-valo .v-table-header-wrap:hover .v-table-column-selector {
+  opacity: 1;
+  filter: none;
+  -webkit-transition-delay: 100ms;
+  -moz-transition-delay: 100ms;
+  transition-delay: 100ms; }
+.tests-valo .v-on:before,
+.tests-valo .v-off:before {
+  content: "\f00c";
+  font-family: FontAwesome;
+  font-size: 0.9em;
+  margin-right: 6px; }
+.tests-valo .v-on div,
+.tests-valo .v-off div {
+  display: inline; }
+.tests-valo .v-off:before {
+  visibility: hidden; }
+.tests-valo tbody.v-drag-element {
+  display: block;
+  overflow: visible;
+  box-shadow: none;
+  background: transparent;
+  opacity: 1;
+  filter: none; }
+  .tests-valo tbody.v-drag-element tr {
+    display: block;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    overflow: hidden;
+    opacity: 0.5;
+    filter: alpha(opacity=50);
+    background: white; }
+.tests-valo .v-table-body {
+  position: relative;
+  z-index: 1; }
+.tests-valo .v-table-scrollposition {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  height: 37px;
+  line-height: 37px;
+  margin: -19px 0 0 !important;
+  text-align: center; }
+.tests-valo .v-table-drag .v-table-body {
+  box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
+  border-color: #197de1; }
+  .v-ie8 .tests-valo .v-table-drag .v-table-body {
+    border-color: #197de1; }
+  .tests-valo .v-table-drag .v-table-body .v-table-focus {
+    outline: none; }
+.tests-valo .v-table-row-drag-middle td:first-child:before {
+  content: "";
+  display: block;
+  position: absolute;
+  height: 38px;
+  left: 0;
+  right: 0;
+  background: #197de1;
+  opacity: 0.2;
+  filter: alpha(opacity=20); }
+.tests-valo .v-table-row-drag-top td:first-child:before,
+.tests-valo .v-table-row-drag-bottom td:first-child:after {
+  content: "\2022";
+  display: block;
+  position: absolute;
+  height: 2px;
+  left: 0;
+  right: 0;
+  background: #197de1;
+  font-size: 32px;
+  line-height: 2px;
+  color: #197de1;
+  text-indent: -4px;
+  text-shadow: 0 0 1px white, 0 0 1px white; }
+.tests-valo .v-table-row-drag-top td:first-child:before {
+  margin-top: -1px; }
+.v-ff .tests-valo .v-table-row-drag-top td:first-child:before, .v-ff .tests-valo .v-table-row-drag-bottom td:first-child:after {
+  line-height: 1px; }
+.v-ie .tests-valo .v-table-row-drag-top td:first-child:before, .v-ie .tests-valo .v-table-row-drag-bottom td:first-child:after {
+  line-height: 0; }
+.tests-valo .v-treetable-treespacer {
+  display: inline-block;
+  background: transparent;
+  width: 19px;
+  left: 0;
+  position: absolute;
+  text-align: right; }
+.tests-valo .v-treetable-node-closed:before {
+  content: "\f0da";
+  font-family: FontAwesome; }
+.tests-valo .v-treetable-node-open:before {
+  content: "\f0d7";
+  font-family: FontAwesome; }
+.tests-valo .v-splitpanel-hsplitter {
+  width: 1px; }
+.tests-valo .v-splitpanel-vsplitter {
+  height: 1px; }
+.tests-valo .v-splitpanel-hsplitter:after {
+  left: -6px;
+  right: -6px; }
+.tests-valo .v-splitpanel-vsplitter:after {
+  top: -6px;
+  bottom: -6px; }
+.tests-valo .v-splitpanel-hsplitter div:before,
+.tests-valo .v-splitpanel-vsplitter div:before {
+  height: 37px;
+  padding: 0 16px;
+  color: #2f2f2f;
+  font-weight: 400;
+  border-radius: 4px;
+  border: 1px solid #cecece;
+  border-top-color: #cecece;
+  border-bottom-color: #c5c5c5;
+  background-color: #fafafa;
+  background-image: -webkit-linear-gradient(top, #fafafa 2%, #efefef 98%);
+  background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%);
+  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #eaeaea, none;
+  text-shadow: 0 1px 0 #fafafa;
+  height: auto;
+  padding: 0;
+  border-radius: 0; }
+  .tests-valo .v-splitpanel-hsplitter div:before:after,
+  .tests-valo .v-splitpanel-vsplitter div:before:after {
+    border: inherit;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px; }
+  .tests-valo .v-splitpanel-hsplitter div:before:hover:after,
+  .tests-valo .v-splitpanel-vsplitter div:before:hover:after {
+    background-color: rgba(186, 186, 186, 0.1); }
+  .tests-valo .v-splitpanel-hsplitter div:before:focus:after,
+  .tests-valo .v-splitpanel-vsplitter div:before:focus:after {
+    border-color: #197de1;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-splitpanel-hsplitter div:before:active:after,
+  .tests-valo .v-splitpanel-vsplitter div:before:active:after {
+    background-color: rgba(125, 125, 125, 0.2); }
+.tests-valo .v-splitpanel-hsplitter div:before {
+  background-color: #fafafa;
+  background-image: -webkit-linear-gradient(left, #fafafa 2%, #efefef 98%);
+  background-image: linear-gradient(to right,#fafafa 2%, #efefef 98%); }
+.tests-valo.v-splitpanel-horizontal .v-splitpanel-second-container {
+  margin-left: 1px; }
+.tests-valo .v-progressbar-wrapper {
+  border-radius: 4px;
+  height: 9px;
+  background-color: #dbdbdb;
+  background-image: -webkit-linear-gradient(bottom, #dddddd 2%, #cfcfcf 98%);
+  background-image: linear-gradient(to top,#dddddd 2%, #cfcfcf 98%);
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  min-width: 74px; }
+.tests-valo .v-progressbar-indicator {
+  border-radius: 4px;
+  height: inherit;
+  background-color: #197de1;
+  background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
+  background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
+  border: 1px solid #1467b9;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 8px;
+  -webkit-transition: width 160ms;
+  -moz-transition: width 160ms;
+  transition: width 160ms; }
+.tests-valo .v-progressbar-point .v-progressbar-indicator {
+  background: transparent;
+  box-shadow: none;
+  border: none;
+  text-align: right;
+  overflow: hidden; }
+  .tests-valo .v-progressbar-point .v-progressbar-indicator:before {
+    content: "";
+    display: inline-block;
+    border-radius: 4px;
+    height: inherit;
+    background-color: #197de1;
+    background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
+    background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
+    border: 1px solid #1467b9;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    max-width: 100%;
+    width: 9px;
+    vertical-align: top; }
+.tests-valo .v-slider {
+  position: relative; }
+  .tests-valo .v-slider:focus {
+    outline: none; }
+    .tests-valo .v-slider:focus .v-slider-handle:after {
+      opacity: 1; }
+      .v-ie8 .tests-valo .v-slider:focus .v-slider-handle:after {
+        visibility: visible; }
+  .tests-valo .v-slider.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+.tests-valo .v-slider-base {
+  border-radius: 4px;
+  height: 9px;
+  background-color: #dbdbdb;
+  background-image: -webkit-linear-gradient(bottom, #dddddd 2%, #cfcfcf 98%);
+  background-image: linear-gradient(to top,#dddddd 2%, #cfcfcf 98%);
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  min-width: 74px;
+  height: 6px;
+  margin: 16px 11px;
+  white-space: nowrap;
+  overflow: hidden; }
+  .tests-valo .v-slider-base:before {
+    content: "";
+    position: absolute;
+    top: 16px;
+    bottom: 16px;
+    left: 11px;
+    width: 4px;
+    border-radius: 4px;
+    border-left: 1px solid #1467b9; }
+  .tests-valo .v-slider-base:after {
+    border-radius: 4px;
+    height: inherit;
+    background-color: #197de1;
+    background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
+    background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
+    border: 1px solid #1467b9;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    max-width: 100%;
+    content: "";
+    display: inline-block;
+    margin-left: -100%;
+    width: 100%;
+    vertical-align: top; }
+    .v-ie8 .tests-valo .v-slider-base:after {
+      position: relative;
+      left: -11px; }
+.tests-valo .v-slider-handle {
+  margin-top: -16px;
+  width: .1px;
+  display: inline-block;
+  vertical-align: top; }
+  .tests-valo .v-slider-handle:before {
+    height: 37px;
+    padding: 0 16px;
+    color: #2f2f2f;
+    font-weight: 400;
+    border-radius: 4px;
+    border: 1px solid #cecece;
+    border-top-color: #cecece;
+    border-bottom-color: #c5c5c5;
+    background-color: #fafafa;
+    background-image: -webkit-linear-gradient(top, #fafafa 2%, #efefef 98%);
+    background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%);
+    box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #eaeaea, 0 2px 3px rgba(0, 0, 0, 0.05);
+    text-shadow: 0 1px 0 #fafafa; }
+    .tests-valo .v-slider-handle:before:after {
+      border: inherit;
+      top: -1px;
+      right: -1px;
+      bottom: -1px;
+      left: -1px; }
+    .tests-valo .v-slider-handle:before:hover:after {
+      background-color: rgba(186, 186, 186, 0.1); }
+    .tests-valo .v-slider-handle:before:focus:after {
+      border-color: #197de1;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+    .tests-valo .v-slider-handle:before:active:after {
+      background-color: rgba(125, 125, 125, 0.2); }
+  .tests-valo .v-slider-handle:after {
+    border: 1px solid #cecece;
+    border-color: #197de1;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
+    opacity: 0;
+    -webkit-transition: opacity 200ms;
+    -moz-transition: opacity 200ms;
+    transition: opacity 200ms; }
+    .v-ie8 .tests-valo .v-slider-handle:after {
+      visibility: hidden; }
+  .tests-valo .v-slider-handle:before, .tests-valo .v-slider-handle:after {
+    content: "";
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0;
+    width: 22px;
+    height: 22px;
+    border-radius: 11px;
+    position: absolute;
+    z-index: 1;
+    margin-top: 8px;
+    margin-left: -11px; }
+.tests-valo .v-slider-feedback {
+  background-color: #323232;
+  background-color: rgba(50, 50, 50, 0.9);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
+  color: white;
+  padding: 5px 9px;
+  border-radius: 3px;
+  max-width: 35em;
+  overflow: hidden !important;
+  font-size: 14px; }
+.tests-valo .v-slider-vertical {
+  padding: 11px 0;
+  height: 96px; }
+  .tests-valo .v-slider-vertical .v-slider-base {
+    background-color: #dbdbdb;
+    background-image: -webkit-linear-gradient(right, #dddddd 2%, #cfcfcf 98%);
+    background-image: linear-gradient(to left,#dddddd 2%, #cfcfcf 98%);
+    width: 6px;
+    height: 100% !important;
+    min-width: 0;
+    margin: 0 16px; }
+    .tests-valo .v-slider-vertical .v-slider-base:before {
+      top: auto;
+      bottom: 11px;
+      left: 16px;
+      right: 16px;
+      width: auto;
+      height: 4px;
+      border-left: none;
+      border-bottom: 1px solid #1467b9; }
+    .tests-valo .v-slider-vertical .v-slider-base:after {
+      height: 101%;
+      margin-left: 0;
+      background-color: #197de1;
+      background-image: -webkit-linear-gradient(left, #1b87e3 2%, #166ed5 98%);
+      background-image: linear-gradient(to right,#1b87e3 2%, #166ed5 98%); }
+      .v-ie8 .tests-valo .v-slider-vertical .v-slider-base:after {
+        top: 11px;
+        left: 0;
+        height: 130%; }
+  .tests-valo .v-slider-vertical .v-slider-handle {
+    width: 0;
+    height: .1px;
+    width: 37px;
+    display: block; }
+    .tests-valo .v-slider-vertical .v-slider-handle:before, .tests-valo .v-slider-vertical .v-slider-handle:after {
+      width: 22px;
+      height: 22px;
+      margin-top: -11px;
+      margin-left: -8px; }
+.tests-valo .v-tabsheet:not(.v-has-width) {
+  width: auto !important; }
+.tests-valo .v-tabsheet-spacertd {
+  display: none !important; }
+.tests-valo .v-tabsheet-tabcontainer {
+  position: relative;
+  line-height: 37px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none; }
+  .tests-valo .v-tabsheet-tabcontainer table,
+  .tests-valo .v-tabsheet-tabcontainer tbody,
+  .tests-valo .v-tabsheet-tabcontainer tr {
+    display: inline-block;
+    border-spacing: 0;
+    border-collapse: collapse;
+    vertical-align: top; }
+  .tests-valo .v-tabsheet-tabcontainer td {
+    display: inline-block;
+    padding: 0; }
+  .tests-valo .v-tabsheet-tabcontainer:before {
+    content: "";
+    position: absolute;
+    height: 1px;
+    background: #dbdbdb;
+    bottom: 0;
+    left: 0;
+    right: 0; }
+.tests-valo .v-tabsheet-tabs {
+  height: 37px;
+  position: relative;
+  white-space: nowrap;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box; }
+  .tests-valo .v-tabsheet-tabs .v-caption {
+    height: 37px;
+    margin-left: 19px;
+    padding: 0 4px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    cursor: pointer;
+    text-align: center;
+    line-height: 37px;
+    font-size: 16px;
+    font-weight: 300;
+    color: #737373;
+    width: auto !important;
+    -webkit-transition: border-bottom 200ms, color 200ms;
+    -moz-transition: border-bottom 200ms, color 200ms;
+    transition: border-bottom 200ms, color 200ms; }
+    .tests-valo .v-tabsheet-tabs .v-caption .v-icon {
+      cursor: inherit; }
+    .tests-valo .v-tabsheet-tabs .v-caption .v-icon + .v-captiontext {
+      margin-left: 9px; }
+    .tests-valo .v-tabsheet-tabs .v-caption:hover {
+      color: #197de1; }
+    .tests-valo .v-tabsheet-tabs .v-caption.v-disabled {
+      opacity: 0.5;
+      filter: alpha(opacity=50);
+      cursor: default;
+      color: inherit !important;
+      border-bottom: none; }
+  .tests-valo .v-tabsheet-tabs td:first-child .v-caption,
+  .tests-valo .v-tabsheet-tabs [aria-hidden="true"] + td .v-caption {
+    margin-left: 0; }
+.tests-valo .v-tabsheet-tabitemcell:focus {
+  outline: none; }
+  .tests-valo .v-tabsheet-tabitemcell:focus .v-caption {
+    color: #197de1;
+    border-bottom: 1px solid #197de1; }
+.tests-valo .v-tabsheet-tabitem-selected .v-caption.v-caption {
+  border-bottom: 2px solid #197de1;
+  color: #197de1; }
+.tests-valo .v-tabsheet-caption-close {
+  display: inline-block;
+  font-size: 1.2em;
+  line-height: 1;
+  vertical-align: middle;
+  padding: 2px 4px;
+  margin: -2px -4px -2px 4px;
+  border-radius: 2px; }
+  .tests-valo .v-tabsheet-caption-close:hover {
+    background: #197de1;
+    color: #d9e5f1; }
+  .tests-valo .v-tabsheet-caption-close:active {
+    background: #1670ca;
+    color: #d9e5f1; }
+.tests-valo .v-tabsheet-scroller {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding-left: 19px;
+  background-color: transparent;
+  background-image: -webkit-linear-gradient(right, #fafafa 70%, rgba(250, 250, 250, 0) 100%);
+  background-image: linear-gradient(to left,#fafafa 70%, rgba(250, 250, 250, 0) 100%);
+  pointer-events: none;
+  line-height: 37px; }
+  .tests-valo .v-tabsheet-scroller:after {
+    content: "";
+    height: 1px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: block;
+    background-color: transparent;
+    background-image: -webkit-linear-gradient(right, #dbdbdb 70%, rgba(219, 219, 219, 0) 100%);
+    background-image: linear-gradient(to left,#dbdbdb 70%, rgba(219, 219, 219, 0) 100%); }
+  .v-ie8 .tests-valo .v-tabsheet-scroller, .v-ie9 .tests-valo .v-tabsheet-scroller {
+    background-color: #fafafa; }
+    .v-ie8 .tests-valo .v-tabsheet-scroller:after, .v-ie9 .tests-valo .v-tabsheet-scroller:after {
+      background-color: #dbdbdb; }
+  .tests-valo .v-tabsheet-scroller button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    border: none;
+    background: transparent;
+    font: inherit;
+    color: inherit;
+    height: 37px;
+    line-height: 37px;
+    margin: 0;
+    padding: 0 9px;
+    outline: none;
+    cursor: pointer;
+    pointer-events: auto;
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+    .tests-valo .v-tabsheet-scroller button:hover {
+      opacity: 1;
+      filter: none;
+      color: #197de1; }
+    .tests-valo .v-tabsheet-scroller button:active {
+      opacity: 0.7;
+      filter: alpha(opacity=70);
+      color: #197de1; }
+    .tests-valo .v-tabsheet-scroller button::-moz-focus-inner {
+      padding: 0;
+      border: 0; }
+  .tests-valo .v-tabsheet-scroller [class*="Next"] {
+    padding-left: 5px; }
+    .tests-valo .v-tabsheet-scroller [class*="Next"]:before {
+      font-family: FontAwesome;
+      content: "\f054"; }
+  .tests-valo .v-tabsheet-scroller [class*="Prev"] {
+    padding-right: 5px; }
+    .tests-valo .v-tabsheet-scroller [class*="Prev"]:before {
+      font-family: FontAwesome;
+      content: "\f053"; }
+  .tests-valo .v-tabsheet-scroller [class*="disabled"] {
+    cursor: default;
+    color: inherit !important;
+    opacity: 0.1 !important;
+    filter: alpha(opacity=10) !important; }
+.tests-valo .v-tabsheet-tabsheetpanel > .v-scrollable > .v-widget {
+  -webkit-animation: valo-anim-fade-in 300ms;
+  -moz-animation: valo-anim-fade-in 300ms;
+  animation: valo-anim-fade-in 300ms; }
+.tests-valo .v-colorpicker-popup.v-window {
+  min-width: 220px !important; }
+.tests-valo .v-colorpicker-popup .v-tabsheet-tabs {
+  padding: 0 9px; }
+.tests-valo .v-colorpicker-popup [class$="sliders"] {
+  padding: 12px; }
+  .tests-valo .v-colorpicker-popup [class$="sliders"] .v-widget {
+    width: 100% !important;
+    vertical-align: middle; }
+  .tests-valo .v-colorpicker-popup [class$="sliders"] .v-has-caption {
+    white-space: nowrap;
+    padding-left: 48px; }
+  .tests-valo .v-colorpicker-popup [class$="sliders"] .v-caption {
+    display: inline-block;
+    margin-left: -48px;
+    width: 48px; }
+  .tests-valo .v-colorpicker-popup [class$="sliders"] .v-slot-hue-slider + .v-slot .v-has-caption {
+    padding-left: 80px; }
+  .tests-valo .v-colorpicker-popup [class$="sliders"] .v-slot-hue-slider + .v-slot .v-caption {
+    margin-left: -80px;
+    width: 80px; }
+.tests-valo .v-colorpicker-popup .v-slider-red .v-slider-base:after {
+  background: red;
+  border: none;
+  box-shadow: none; }
+.tests-valo .v-colorpicker-popup .v-slider-green .v-slider-base:after {
+  background: green;
+  border: none;
+  box-shadow: none; }
+.tests-valo .v-colorpicker-popup .v-slider-blue .v-slider-base:after {
+  background: blue;
+  border: none;
+  box-shadow: none; }
+.tests-valo .v-colorpicker-popup .v-margin-bottom {
+  padding-bottom: 0; }
+.tests-valo .v-colorpicker-popup .resize-button {
+  width: 100% !important;
+  height: auto !important;
+  text-align: center;
+  outline: none; }
+  .tests-valo .v-colorpicker-popup .resize-button:before {
+    font-family: FontAwesome;
+    content: "\F141"; }
+.tests-valo .v-colorpicker-popup .resize-button-caption {
+  display: none; }
+.tests-valo .v-colorpicker-popup .v-horizontallayout {
+  height: auto !important;
+  padding: 9px 0;
+  background-color: #fafafa;
+  border-top: 1px solid #ededed; }
+  .tests-valo .v-colorpicker-popup .v-horizontallayout .v-expand {
+    overflow: visible; }
+  .tests-valo .v-colorpicker-popup .v-horizontallayout .v-button {
+    width: 80% !important; }
+.tests-valo .v-colorpicker-preview {
+  width: 100% !important;
+  height: auto !important;
+  padding: 9px; }
+.tests-valo .v-colorpicker-preview-textfield {
+  height: auto !important;
+  text-align: center;
+  border: none; }
+.tests-valo .v-colorpicker {
+  width: auto !important; }
+.tests-valo .v-colorpicker-button-color {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  bottom: 6px;
+  left: 6px;
+  border-radius: 3px;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  max-width: 23px; }
+  .tests-valo .v-colorpicker-button-color + .v-button-caption:not(:empty) {
+    margin-left: 19px; }
+.tests-valo .v-panel {
+  background: white;
+  color: #474747;
+  border-radius: 4px;
+  border: 1px solid #dbdbdb;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05); }
+.tests-valo .v-panel-caption {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 12px;
+  line-height: 36px;
+  border-bottom: 1px solid #e4e4e4;
+  border-radius: 3px 3px 0 0;
+  background-color: #fafafa;
+  background-image: -webkit-linear-gradient(top, #fafafa 2%, #f6f6f6 98%);
+  background-image: linear-gradient(to bottom,#fafafa 2%, #f6f6f6 98%);
+  color: #464646;
+  font-weight: 400;
+  font-size: 14px;
+  box-shadow: inset 0 1px 0 white;
+  text-shadow: 0 1px 0 #fafafa; }
+.tests-valo .v-panel-content {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%; }
+  .tests-valo .v-panel-content > .v-margin-top {
+    padding-top: 12px; }
+  .tests-valo .v-panel-content > .v-margin-right {
+    padding-right: 12px; }
+  .tests-valo .v-panel-content > .v-margin-bottom {
+    padding-bottom: 12px; }
+  .tests-valo .v-panel-content > .v-margin-left {
+    padding-left: 12px; }
+.tests-valo .v-accordion {
+  background: white;
+  color: #474747;
+  border-radius: 4px;
+  border: 1px solid #dbdbdb;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
+  background-color: #fafafa;
+  background-image: -webkit-linear-gradient(top, #fafafa 2%, #f4f4f4 98%);
+  background-image: linear-gradient(to bottom,#fafafa 2%, #f4f4f4 98%);
+  overflow: hidden; }
+.tests-valo .v-accordion-item {
+  position: relative;
+  overflow: hidden; }
+  .tests-valo .v-accordion-item:first-child {
+    border-radius: 3px 3px 0 0; }
+    .tests-valo .v-accordion-item:first-child .v-accordion-item-caption {
+      border-radius: inherit; }
+  .tests-valo .v-accordion-item:last-child {
+    border-radius: 0 0 3px 3px; }
+.tests-valo .v-accordion-item-caption .v-caption {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 12px;
+  line-height: 36px;
+  border-bottom: 1px solid #e4e4e4;
+  border-radius: 3px 3px 0 0;
+  background-color: #fafafa;
+  background-image: -webkit-linear-gradient(top, #fafafa 2%, #f6f6f6 98%);
+  background-image: linear-gradient(to bottom,#fafafa 2%, #f6f6f6 98%);
+  color: #464646;
+  font-weight: 400;
+  font-size: 14px;
+  box-shadow: inset 0 1px 0 white;
+  text-shadow: 0 1px 0 #fafafa;
+  border-radius: inherit;
+  display: block;
+  background: transparent;
+  border-bottom-color: #d2d2d2;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none; }
+  .tests-valo .v-accordion-item-caption .v-caption:hover:before, .tests-valo .v-accordion-item-caption .v-caption:active:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0; }
+  .tests-valo .v-accordion-item-caption .v-caption:hover:before {
+    background-color: rgba(186, 186, 186, 0.1);
+    border: none; }
+  .tests-valo .v-accordion-item-caption .v-caption:active:before {
+    background-color: rgba(125, 125, 125, 0.2); }
+.tests-valo .v-accordion-item:last-child:not(.v-accordion-item-open) .v-caption {
+  border-bottom: none; }
+.tests-valo .v-accordion-item-content {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  right: 0;
+  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.05);
+  background-color: white;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box; }
+  .tests-valo .v-accordion-item-content > .v-margin-top {
+    padding-top: 12px; }
+  .tests-valo .v-accordion-item-content > .v-margin-right {
+    padding-right: 12px; }
+  .tests-valo .v-accordion-item-content > .v-margin-bottom {
+    padding-bottom: 12px; }
+  .tests-valo .v-accordion-item-content > .v-margin-left {
+    padding-left: 12px; }
+.tests-valo .v-accordion-item-open + .v-accordion-item {
+  border-top: 1px solid #dfdfdf; }
+.tests-valo .v-select-twincol {
+  white-space: normal; }
+  .tests-valo .v-select-twincol select {
+    border: 1px solid #cecece;
+    background-color: #fafafa;
+    background-image: -webkit-linear-gradient(top, #fafafa 2%, #efefef 98%);
+    background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%); }
+    .tests-valo .v-select-twincol select:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-select-twincol .v-textfield,
+  .tests-valo .v-select-twincol .v-nativebutton {
+    width: auto !important;
+    margin-top: 9px; }
+  .tests-valo .v-select-twincol .v-nativebutton {
+    margin-left: 9px; }
+.tests-valo .v-select-twincol-caption-left,
+.tests-valo .v-select-twincol-caption-right {
+  font-size: 14px;
+  font-weight: 400;
+  padding-bottom: .3em;
+  padding-left: 1px; }
+.tests-valo .v-select-twincol-buttons {
+  white-space: nowrap;
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  min-width: 3.5em; }
+  .tests-valo .v-select-twincol-buttons .v-button {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    display: inline-block;
+    text-align: left;
+    white-space: normal;
+    line-height: 1.55;
+    position: absolute;
+    left: 9px;
+    right: 9px;
+    top: 36px;
+    padding: 0;
+    text-align: center; }
+    .tests-valo .v-select-twincol-buttons .v-button:first-child {
+      top: 0; }
+  .tests-valo .v-select-twincol-buttons .v-button-caption {
+    display: none; }
+  .tests-valo .v-select-twincol-buttons .v-button:focus {
+    z-index: 1; }
+  .tests-valo .v-select-twincol-buttons .v-button:first-child {
+    border-radius: 4px 4px 0 0; }
+  .tests-valo .v-select-twincol-buttons .v-button:last-child {
+    border-radius: 0 0 4px 4px; }
+  .tests-valo .v-select-twincol-buttons .v-button-wrap:before {
+    font-family: FontAwesome;
+    content: "\f053"; }
+  .tests-valo .v-select-twincol-buttons .v-button:first-child .v-button-wrap:before {
+    font-family: FontAwesome;
+    content: "\f054"; }
+.tests-valo .v-select select {
+  border: 1px solid #cecece;
+  background-color: #fafafa;
+  background-image: -webkit-linear-gradient(top, #fafafa 2%, #efefef 98%);
+  background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%); }
+  .tests-valo .v-select select:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+.tests-valo .v-select-select {
+  display: block; }
+  .tests-valo .v-select-select + .v-textfield {
+    width: auto !important;
+    margin-top: 9px; }
+    .tests-valo .v-select-select + .v-textfield + .v-nativebutton {
+      margin-top: 9px;
+      margin-left: 9px; }
+.tests-valo .v-calendar-header-day {
+  font-weight: 400;
+  text-align: center;
+  padding: 7px 0; }
+.tests-valo .v-calendar-header-week .v-calendar-back,
+.tests-valo .v-calendar-header-week .v-calendar-next {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  outline: none;
+  color: inherit;
+  opacity: 0.5;
+  filter: alpha(opacity=50); }
+  .tests-valo .v-calendar-header-week .v-calendar-back:focus,
+  .tests-valo .v-calendar-header-week .v-calendar-next:focus {
+    outline: none; }
+  .tests-valo .v-calendar-header-week .v-calendar-back:hover,
+  .tests-valo .v-calendar-header-week .v-calendar-next:hover {
+    opacity: 1;
+    filter: none; }
+  .tests-valo .v-calendar-header-week .v-calendar-back:active,
+  .tests-valo .v-calendar-header-week .v-calendar-next:active {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+.tests-valo .v-calendar-header-week .v-calendar-back:before {
+  font-family: FontAwesome;
+  content: "\f053"; }
+.tests-valo .v-calendar-header-week .v-calendar-next:before {
+  font-family: FontAwesome;
+  content: "\f054"; }
+.tests-valo .v-calendar-month {
+  outline: none;
+  overflow: hidden; }
+  .tests-valo .v-calendar-month td {
+    vertical-align: top; }
+.tests-valo .v-calendar-week-number {
+  cursor: pointer;
+  width: 20px;
+  text-align: center;
+  font-size: 0.8em;
+  opacity: 0.5;
+  filter: alpha(opacity=50); }
+  .tests-valo .v-calendar-week-number:hover {
+    opacity: 1;
+    filter: none; }
+.tests-valo .v-calendar-month-day {
+  outline: none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  line-height: 1.2; }
+.tests-valo .v-calendar-bottom-spacer,
+.tests-valo .v-calendar-spacer,
+.tests-valo .v-calendar-bottom-spacer-empty {
+  height: 19px;
+  margin-bottom: 3px; }
+.tests-valo .v-calendar-bottom-spacer {
+  font-size: 0.8em;
+  padding: 0 5px;
+  cursor: pointer; }
+  .tests-valo .v-calendar-bottom-spacer:hover {
+    color: #197de1; }
+.tests-valo .v-calendar-day-number {
+  line-height: 25px;
+  font-size: 16px;
+  text-align: right;
+  margin: 0 5px;
+  white-space: nowrap;
+  border-top: 1px solid #f2f2f2;
+  cursor: pointer; }
+  .tests-valo .v-calendar-day-number:hover {
+    color: #197de1; }
+.tests-valo .v-calendar-month-day-today {
+  background: #eef3f8; }
+  .tests-valo .v-calendar-month-day-today .v-calendar-day-number {
+    font-weight: 400;
+    color: #197de1;
+    border-top: 2px solid #197de1;
+    line-height: 24px;
+    margin: 0;
+    padding: 0 5px; }
+.tests-valo .v-calendar-month-day-selected {
+  background-color: #e3edf7; }
+.tests-valo .v-calendar-month-day-dragemphasis {
+  background-color: #a8a8a8; }
+.tests-valo .v-calendar-month-day-scrollable {
+  overflow-y: scroll; }
+.tests-valo .v-calendar-weekly-longevents {
+  margin-left: 50px;
+  border-bottom: 3px solid #e0e0e0; }
+  .tests-valo .v-calendar-weekly-longevents .v-calendar-event-all-day {
+    height: 22px;
+    line-height: 1.6;
+    margin-bottom: 3px; }
+.tests-valo .v-calendar-header-week td {
+  vertical-align: middle !important; }
+.tests-valo .v-calendar-header-week .v-calendar-header-day {
+  cursor: pointer; }
+.tests-valo .v-calendar-times {
+  width: 50px;
+  font-size: 0.77em;
+  line-height: 1;
+  white-space: nowrap; }
+.tests-valo .v-calendar-time {
+  text-align: right;
+  padding-right: 9px;
+  margin-top: -6px;
+  padding-bottom: 6px; }
+.tests-valo .v-calendar-day-times,
+.tests-valo .v-calendar-day-times-today {
+  outline: none;
+  border-right: 1px solid transparent; }
+  .tests-valo .v-calendar-day-times:focus,
+  .tests-valo .v-calendar-day-times-today:focus {
+    outline: none; }
+.tests-valo .v-calendar .v-datecellslot,
+.tests-valo .v-calendar .v-datecellslot-even {
+  border-top: 1px solid #ededed; }
+  .tests-valo .v-calendar .v-datecellslot:first-child,
+  .tests-valo .v-calendar .v-datecellslot-even:first-child {
+    border-top-color: transparent; }
+.tests-valo .v-calendar .v-datecellslot {
+  border-top-style: dotted; }
+.tests-valo .v-calendar .v-datecellslot,
+.tests-valo .v-calendar .v-datecellslot-even {
+  margin-right: 5px; }
+.tests-valo .v-calendar-current-time {
+  background: #197de1;
+  line-height: 1px;
+  pointer-events: none;
+  opacity: 0.5;
+  filter: alpha(opacity=50); }
+  .tests-valo .v-calendar-current-time:before {
+    content: "\2022";
+    color: #197de1;
+    font-size: 22px;
+    margin-left: -0.07em; }
+.tests-valo .v-calendar .v-daterange {
+  position: relative; }
+  .tests-valo .v-calendar .v-daterange:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: -1px;
+    left: 0;
+    background: #197de1;
+    opacity: 0.5;
+    filter: alpha(opacity=50);
+    border-radius: 4px 4px 0 0; }
+  .tests-valo .v-calendar .v-daterange + .v-daterange {
+    border-color: transparent; }
+    .tests-valo .v-calendar .v-daterange + .v-daterange:before {
+      border-radius: 0; }
+.tests-valo .v-calendar-event {
+  font-size: 0.85em;
+  overflow: hidden;
+  cursor: pointer;
+  outline: none;
+  border-radius: 4px; }
+  .tests-valo .v-calendar-event:focus {
+    outline: none; }
+.tests-valo .v-calendar-event-month {
+  padding: 0 5px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  margin-bottom: 3px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  height: 19px;
+  line-height: 19px; }
+  .tests-valo .v-calendar-event-month .v-calendar-event-time {
+    float: right;
+    font-size: 0.9em;
+    line-height: 19px;
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+  .tests-valo .v-calendar-event-month:before {
+    content: "\25cf";
+    margin-right: .2em; }
+.tests-valo .v-calendar-event-all-day {
+  padding: 0 5px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  height: 19px;
+  line-height: 19px;
+  border-radius: 0;
+  margin-left: -1px;
+  white-space: nowrap; }
+  .tests-valo .v-calendar-event-all-day:before {
+    content: ""; }
+.tests-valo .v-calendar-event-start {
+  overflow: visible;
+  margin-left: 0; }
+  .tests-valo .v-calendar-event-start.v-calendar-event-continued-to, .tests-valo .v-calendar-event-start.v-calendar-event-end {
+    overflow: hidden;
+    text-overflow: ellipsis; }
+.tests-valo .v-calendar-event-start {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  margin-left: 5px; }
+.tests-valo .v-calendar-event-end {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  margin-right: 5px; }
+.tests-valo .v-calendar-event-caption {
+  font-weight: 500;
+  line-height: 1.2;
+  padding: 5px 0;
+  position: absolute;
+  overflow: hidden;
+  right: 9px;
+  left: 5px;
+  bottom: 0;
+  top: 0; }
+  .tests-valo .v-calendar-event-caption span {
+    font-weight: 300;
+    white-space: nowrap; }
+.tests-valo .v-calendar-week-wrapper .v-calendar-event {
+  overflow: visible; }
+.tests-valo .v-calendar-week-wrapper .v-calendar-event-content {
+  margin-top: -1px;
+  border-radius: 5px;
+  border: 1px solid #fafafa;
+  padding-top: 3px;
+  margin-right: 5px; }
+.tests-valo .v-calendar-event-month:before {
+  color: dodgerblue; }
+.tests-valo .v-calendar-event-all-day {
+  background-color: #cee4fb;
+  background-color: rgba(206, 228, 251, 0.8);
+  color: dodgerblue; }
+.tests-valo .v-calendar-week-wrapper .v-calendar-event {
+  color: dodgerblue; }
+  .tests-valo .v-calendar-week-wrapper .v-calendar-event .v-calendar-event-content {
+    background-color: #cee4fb;
+    background-color: rgba(206, 228, 251, 0.8); }
+.tests-valo .v-calendar-event-month[class*="color2"]:before {
+  color: seagreen; }
+.tests-valo .v-calendar-event-all-day[class*="color2"] {
+  background-color: #d1e3d9;
+  background-color: rgba(209, 227, 217, 0.8);
+  color: seagreen; }
+.tests-valo .v-calendar-week-wrapper .v-calendar-event[class*="color2"] {
+  color: seagreen; }
+  .tests-valo .v-calendar-week-wrapper .v-calendar-event[class*="color2"] .v-calendar-event-content {
+    background-color: #d1e3d9;
+    background-color: rgba(209, 227, 217, 0.8); }
+.tests-valo .v-calendar-event-month[class*="color3"]:before {
+  color: darkgoldenrod; }
+.tests-valo .v-calendar-event-all-day[class*="color3"] {
+  background-color: #ece2ca;
+  background-color: rgba(236, 226, 202, 0.8);
+  color: darkgoldenrod; }
+.tests-valo .v-calendar-week-wrapper .v-calendar-event[class*="color3"] {
+  color: darkgoldenrod; }
+  .tests-valo .v-calendar-week-wrapper .v-calendar-event[class*="color3"] .v-calendar-event-content {
+    background-color: #ece2ca;
+    background-color: rgba(236, 226, 202, 0.8); }
+.tests-valo .v-calendar-event-month[class*="color4"]:before {
+  color: firebrick; }
+.tests-valo .v-calendar-event-all-day[class*="color4"] {
+  background-color: #ebcece;
+  background-color: rgba(235, 206, 206, 0.8);
+  color: firebrick; }
+.tests-valo .v-calendar-week-wrapper .v-calendar-event[class*="color4"] {
+  color: firebrick; }
+  .tests-valo .v-calendar-week-wrapper .v-calendar-event[class*="color4"] .v-calendar-event-content {
+    background-color: #ebcece;
+    background-color: rgba(235, 206, 206, 0.8); }
+.tests-valo .v-calendar-event-month[class*="color5"]:before {
+  color: slateblue; }
+.tests-valo .v-calendar-event-all-day[class*="color5"] {
+  background-color: #dddaf1;
+  background-color: rgba(221, 218, 241, 0.8);
+  color: slateblue; }
+.tests-valo .v-calendar-week-wrapper .v-calendar-event[class*="color5"] {
+  color: slateblue; }
+  .tests-valo .v-calendar-week-wrapper .v-calendar-event[class*="color5"] .v-calendar-event-content {
+    background-color: #dddaf1;
+    background-color: rgba(221, 218, 241, 0.8); }
+.tests-valo .v-calendar.v-disabled * {
+  cursor: default; }
+.tests-valo .v-label-undef-w {
+  white-space: nowrap; }
+.tests-valo h1, .tests-valo .h1,
+.tests-valo h2, .tests-valo .h2,
+.tests-valo h3, .tests-valo .h3 {
+  line-height: 1.1;
+  font-weight: 200;
+  color: #131313; }
+.tests-valo h1, .tests-valo .h1 {
+  font-size: 2.4em;
+  margin-top: 1.4em;
+  margin-bottom: 1em;
+  letter-spacing: -0.03em; }
+.tests-valo h2, .tests-valo .h2 {
+  font-size: 1.6em;
+  margin-top: 1.6em;
+  margin-bottom: 0.77em;
+  letter-spacing: -0.02em; }
+.tests-valo h3, .tests-valo .h3 {
+  font-size: 1.2em;
+  margin-top: 1.8em;
+  margin-bottom: 0.77em;
+  letter-spacing: 0; }
+.tests-valo h4, .tests-valo .h4 {
+  line-height: 1.1;
+  font-weight: 500;
+  font-size: 0.87em;
+  color: #404040;
+  text-transform: uppercase;
+  letter-spacing: 0;
+  margin-top: 2.4em;
+  margin-bottom: 0.8em; }
+.tests-valo .v-csslayout > h1:first-child,
+.tests-valo .v-csslayout > h2:first-child,
+.tests-valo .v-csslayout > h3:first-child,
+.tests-valo .v-csslayout > h4
+> .h1:first-child,
+.tests-valo .v-csslayout > .h2:first-child,
+.tests-valo .v-csslayout > .h3
+> .h4:first-child {
+  margin-top: 16px; }
+.tests-valo .v-verticallayout > .v-slot:first-child h1, .tests-valo .v-verticallayout > .v-slot:first-child .h1,
+.tests-valo .v-verticallayout > .v-slot:first-child h2, .tests-valo .v-verticallayout > .v-slot:first-child .h2,
+.tests-valo .v-verticallayout > .v-slot:first-child h3, .tests-valo .v-verticallayout > .v-slot:first-child .h3
+h4, .tests-valo .v-verticallayout > .v-slot:first-child .h4,
+.tests-valo .v-verticallayout > div > .v-slot:first-child h1,
+.tests-valo .v-verticallayout > div > .v-slot:first-child .h1,
+.tests-valo .v-verticallayout > div > .v-slot:first-child h2,
+.tests-valo .v-verticallayout > div > .v-slot:first-child .h2,
+.tests-valo .v-verticallayout > div > .v-slot:first-child h3,
+.tests-valo .v-verticallayout > div > .v-slot:first-child .h3
+h4,
+.tests-valo .v-verticallayout > div > .v-slot:first-child .h4 {
+  margin-top: 16px; }
+.tests-valo h1.no-margin, .tests-valo .h1.no-margin,
+.tests-valo h2.no-margin, .tests-valo .h2.no-margin,
+.tests-valo h3.no-margin, .tests-valo .h3.no-margin,
+.tests-valo h4.no-margin, .tests-valo .h4.no-margin {
+  margin: 0 !important; }
+.tests-valo .v-label-large {
+  font-size: 1.2em; }
+.tests-valo .v-label-small {
+  font-size: 0.87em; }
+.tests-valo .v-label-bold {
+  font-weight: 500; }
+.tests-valo .v-label-light {
+  font-weight: 200;
+  color: #898989; }
+.tests-valo [draggable=true] {
+  -khtml-user-drag: element;
+  -webkit-user-drag: element;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none; }
+.tests-valo .v-ddwrapper {
+  position: relative; }
+.tests-valo .v-ddwrapper-over:before,
+.tests-valo .v-ddwrapper-over:after {
+  content: "";
+  position: absolute;
+  z-index: 10;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px; }
+.tests-valo .v-ddwrapper-over-top:before {
+  border-top-width: 2px; }
+.tests-valo .v-ddwrapper-over-right:before {
+  border-right-width: 2px; }
+.tests-valo .v-ddwrapper-over-bottom:before {
+  border-bottom-width: 2px; }
+.tests-valo .v-ddwrapper-over-left:before {
+  border-left-width: 2px; }
+.tests-valo .no-vertical-drag-hints .v-ddwrapper-over-top:before, .tests-valo .no-vertical-drag-hints.v-ddwrapper-over-top:before {
+  border-top-width: 0; }
+.tests-valo .no-vertical-drag-hints .v-ddwrapper-over-top:after, .tests-valo .no-vertical-drag-hints.v-ddwrapper-over-top:after {
+  border-width: 2px;
+  border-radius: 4px;
+  opacity: 0.3;
+  filter: alpha(opacity=30);
+  background: #8abef2; }
+.tests-valo .no-vertical-drag-hints .v-ddwrapper-over-bottom:before, .tests-valo .no-vertical-drag-hints.v-ddwrapper-over-bottom:before {
+  border-bottom-width: 0; }
+.tests-valo .no-vertical-drag-hints .v-ddwrapper-over-bottom:after, .tests-valo .no-vertical-drag-hints.v-ddwrapper-over-bottom:after {
+  border-width: 2px;
+  border-radius: 4px;
+  opacity: 0.3;
+  filter: alpha(opacity=30);
+  background: #8abef2; }
+.tests-valo .no-horizontal-drag-hints.v-ddwrapper-over-left:before,
+.tests-valo .no-horizontal-drag-hints .v-ddwrapper-over-left:before {
+  border-left-width: 0; }
+.tests-valo .no-horizontal-drag-hints.v-ddwrapper-over-left:after,
+.tests-valo .no-horizontal-drag-hints .v-ddwrapper-over-left:after {
+  border-width: 2px;
+  border-radius: 4px;
+  opacity: 0.3;
+  filter: alpha(opacity=30);
+  background: #8abef2; }
+.tests-valo .no-horizontal-drag-hints.v-ddwrapper-over-right:before,
+.tests-valo .no-horizontal-drag-hints .v-ddwrapper-over-right:before {
+  border-right-width: 0; }
+.tests-valo .no-horizontal-drag-hints.v-ddwrapper-over-right:after,
+.tests-valo .no-horizontal-drag-hints .v-ddwrapper-over-right:after {
+  border-width: 2px;
+  border-radius: 4px;
+  opacity: 0.3;
+  filter: alpha(opacity=30);
+  background: #8abef2; }
+.tests-valo .v-ddwrapper-over-middle:after,
+.tests-valo .v-ddwrapper-over-center:after {
+  border-width: 2px;
+  border-radius: 4px;
+  opacity: 0.3;
+  filter: alpha(opacity=30);
+  background: #8abef2; }
+.tests-valo .no-box-drag-hints.v-ddwrapper:after,
+.tests-valo .no-box-drag-hints .v-ddwrapper:after {
+  display: none !important;
+  content: none; }
+.tests-valo .v-nativebutton {
+  -webkit-touch-callout: none; }
+.tests-valo .v-select select {
+  border: 1px solid #cecece;
+  background-color: #fafafa;
+  background-image: -webkit-linear-gradient(top, #fafafa 2%, #efefef 98%);
+  background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%); }
+  .tests-valo .v-select select:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+.tests-valo .v-select-select {
+  display: block; }
+  .tests-valo .v-select-select + .v-textfield {
+    width: auto !important;
+    margin-top: 9px; }
+    .tests-valo .v-select-select + .v-textfield + .v-nativebutton {
+      margin-top: 9px;
+      margin-left: 9px; }
+.tests-valo .v-popupview-popup {
+  padding: 4px 4px;
+  border-radius: 4px;
+  background-color: white;
+  color: #474747;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 3px 5px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
+  -webkit-animation: valo-overlay-open 200ms;
+  -moz-animation: valo-overlay-open 200ms;
+  animation: valo-overlay-open 200ms;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden; }
+  .tests-valo .v-popupview-popup .popupContent > .v-margin-top {
+    padding-top: 12px; }
+  .tests-valo .v-popupview-popup .popupContent > .v-margin-right {
+    padding-right: 12px; }
+  .tests-valo .v-popupview-popup .popupContent > .v-margin-bottom {
+    padding-bottom: 12px; }
+  .tests-valo .v-popupview-popup .popupContent > .v-margin-left {
+    padding-left: 12px; }
+.tests-valo .v-richtextarea {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  margin: 0;
+  font: inherit;
+  font-weight: 400;
+  line-height: normal;
+  height: 37px;
+  border-radius: 4px;
+  padding: 0;
+  border: 1px solid #cecece;
+  background: white;
+  color: #474747;
+  box-shadow: inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1);
+  -webkit-transition: box-shadow 180ms, border 180ms;
+  -moz-transition: box-shadow 180ms, border 180ms;
+  transition: box-shadow 180ms, border 180ms;
+  height: auto;
+  overflow: hidden; }
+  .tests-valo .v-richtextarea.v-textfield-prompt, .tests-valo .v-richtextarea.v-textarea-prompt {
+    color: #a3a3a3; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar {
+  background-color: #fafafa;
+  background-image: -webkit-linear-gradient(top, #fafafa 2%, #efefef 98%);
+  background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%);
+  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #eaeaea;
+  border-bottom: 1px solid #cecece;
+  color: #464646; }
+.tests-valo .v-richtextarea .gwt-ToggleButton,
+.tests-valo .v-richtextarea .gwt-PushButton {
+  display: inline-block;
+  line-height: 37px;
+  width: 37px;
+  text-align: center;
+  outline: none; }
+  .tests-valo .v-richtextarea .gwt-ToggleButton:hover,
+  .tests-valo .v-richtextarea .gwt-PushButton:hover {
+    color: #191919; }
+.tests-valo .v-richtextarea .gwt-ToggleButton-down,
+.tests-valo .v-richtextarea .gwt-ToggleButton-down-hovering {
+  background-color: #e0e0e0;
+  background-image: -webkit-linear-gradient(bottom, #e0e0e0 2%, gainsboro 98%);
+  background-image: linear-gradient(to top,#e0e0e0 2%, gainsboro 98%); }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top img {
+  display: none; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top div:before {
+  font-family: FontAwesome; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Bold"]:before {
+  content: "\f032"; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Italic"]:before {
+  content: "\f033"; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Underline"]:before {
+  content: "\f0cd"; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Subscript"]:before {
+  content: "\f12c"; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Superscript"]:before {
+  content: "\f12b"; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top div[title="Left Justify"]:before {
+  content: "\f036"; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top div[title="Center"]:before {
+  content: "\f037"; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top div[title="Right Justify"]:before {
+  content: "\f038"; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Strikethrough"]:before {
+  content: "\f0cc"; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top div[title="Indent Right"]:before {
+  content: "\f03c"; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top div[title="Indent Left"]:before {
+  content: "\f03b"; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top div[title="Insert Horizontal Rule"]:before {
+  content: "—"; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top div[title="Insert Ordered List"]:before {
+  content: "\f0cb"; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top div[title="Insert Unordered List"]:before {
+  content: "\f0ca"; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top div[title="Insert Image"]:before {
+  content: "\f03e"; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top div[title="Create Link"]:before {
+  content: "\f0c1"; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top div[title="Remove Link"]:before {
+  content: "\f127"; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-top div[title="Remove Formatting"]:before {
+  content: "\f12d"; }
+.tests-valo .v-richtextarea .gwt-RichTextToolbar-bottom {
+  font-size: 13px;
+  padding: 0 9px 9px 0; }
+  .tests-valo .v-richtextarea .gwt-RichTextToolbar-bottom select {
+    margin: 9px 0 0 9px; }
+.tests-valo .v-richtextarea .gwt-RichTextArea {
+  background: #fff;
+  border: none;
+  display: block; }
+.tests-valo .v-upload .v-button {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: inline-block;
+  text-align: left;
+  white-space: normal;
+  line-height: 1.55; }
+.tests-valo .v-Notification[style*=" top: 0"] {
+  margin-top: 12px !important; }
+.tests-valo .v-Notification[style*="right: 0"] {
+  margin-right: 12px; }
+.tests-valo .v-Notification[style*="bottom: 0"] {
+  margin-bottom: 12px; }
+.tests-valo .v-Notification[style*=" left: 0"] {
+  margin-left: 12px !important; }
+.tests-valo .v-Notification[style*=" top: 0"] {
+  -webkit-animation: valo-anim-slide-down 600ms;
+  -moz-animation: valo-anim-slide-down 600ms;
+  animation: valo-anim-slide-down 600ms; }
+.tests-valo .v-Notification[style*="bottom: 0"] {
+  -webkit-animation: valo-anim-slide-up 600ms;
+  -moz-animation: valo-anim-slide-up 600ms;
+  animation: valo-anim-slide-up 600ms; }
+.tests-valo .v-Notification[style*="right: 0"] {
+  -webkit-animation: valo-anim-slide-left 600ms;
+  -moz-animation: valo-anim-slide-left 600ms;
+  animation: valo-anim-slide-left 600ms; }
+.tests-valo .v-Notification[style*=" left: 0"]:not(.v-Notification-system):not(.bar) {
+  -webkit-animation: valo-anim-slide-right 600ms;
+  -moz-animation: valo-anim-slide-right 600ms;
+  animation: valo-anim-slide-right 600ms; }
+.tests-valo .v-Notification {
+  border-radius: 4px;
+  text-align: center;
+  position: fixed !important;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden;
+  background: white;
+  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
+  padding: 19px 22px;
+  -webkit-animation: valo-anim-fade-in 120ms;
+  -moz-animation: valo-anim-fade-in 120ms;
+  animation: valo-anim-fade-in 120ms; }
+  .tests-valo .v-Notification h1 {
+    margin: 0;
+    display: inline-block;
+    text-align: left;
+    font-weight: inherit;
+    line-height: inherit;
+    white-space: nowrap;
+    letter-spacing: 0; }
+  .tests-valo .v-Notification p {
+    margin: 0;
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 30em;
+    text-align: left; }
+  .tests-valo .v-Notification h1 ~ p {
+    margin-left: 24px; }
+  .tests-valo .v-Notification .v-icon + h1 {
+    margin-left: 16px; }
+  .tests-valo .v-Notification[style*="opacity: 0.9;"] {
+    opacity: 1 !important;
+    filter: none !important; }
+  .tests-valo .v-Notification h1 {
+    color: #197de1;
+    font-size: 19px;
+    line-height: 1; }
+  .tests-valo .v-Notification p {
+    line-height: 1.4; }
+.tests-valo .v-Notification-system {
+  left: 0 !important;
+  right: 0;
+  max-width: 100%;
+  margin: 0 !important;
+  border-radius: 0;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
+  padding: 12px 15px;
+  background-color: #444;
+  font-weight: 400;
+  line-height: 22px; }
+  .tests-valo .v-Notification-system p {
+    max-width: 50em; }
+  .tests-valo .v-Notification-system h1 {
+    color: #fff;
+    vertical-align: middle; }
+  .tests-valo .v-Notification-system p {
+    color: #e6e6e6; }
+  .tests-valo .v-Notification-system u {
+    text-decoration: none; }
+.tests-valo .v-Notification-system.v-Notification-system {
+  margin: 0 !important; }
+.tests-valo .v-Notification.tray {
+  text-align: left; }
+  .tests-valo .v-Notification.tray h1 + p {
+    display: block;
+    margin: .5em 0 0; }
+.tests-valo .v-Notification.warning {
+  background: #FFF3D2; }
+  .tests-valo .v-Notification.warning h1 {
+    color: #AC7C00; }
+  .tests-valo .v-Notification.warning p {
+    color: #9D874D; }
+.tests-valo .v-Notification.error {
+  background: #ed473b;
+  font-weight: 400;
+  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25); }
+  .tests-valo .v-Notification.error h1 {
+    color: white; }
+  .tests-valo .v-Notification.error p {
+    color: #f4e0df; }
+.tests-valo .v-Notification.bar {
+  left: 0 !important;
+  right: 0;
+  max-width: 100%;
+  margin: 0 !important;
+  border-radius: 0;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
+  padding: 12px 15px; }
+  .tests-valo .v-Notification.bar p {
+    max-width: 50em; }
+.tests-valo .v-Notification.closable {
+  padding-right: 59px;
+  overflow: hidden !important;
+  cursor: pointer; }
+  .tests-valo .v-Notification.closable:after {
+    content: "\00d7";
+    font-size: 1.5em;
+    position: absolute;
+    top: 50%;
+    margin-top: -12px;
+    right: 12px;
+    width: 25px;
+    height: 25px;
+    line-height: 24px;
+    cursor: pointer;
+    color: #000;
+    opacity: 0.5;
+    filter: alpha(opacity=50);
+    text-align: center;
+    border: 1px solid black;
+    border-color: rgba(0, 0, 0, 0.3);
+    border-radius: 50%;
+    -webkit-transition: opacity 200ms;
+    -moz-transition: opacity 200ms;
+    transition: opacity 200ms; }
+  .tests-valo .v-Notification.closable:hover:after {
+    opacity: 1;
+    filter: none; }
+  .tests-valo .v-Notification.closable:active:after {
+    background-color: #000;
+    color: #fff;
+    opacity: 0.3;
+    filter: alpha(opacity=30);
+    -webkit-transition: none 200ms;
+    -moz-transition: none 200ms;
+    transition: none 200ms; }
+  .tests-valo .v-Notification.closable.error:after, .tests-valo .v-Notification.closable.system:after {
+    color: #fff;
+    border-color: #fff;
+    border-color: rgba(255, 255, 255, 0.3); }
+  .tests-valo .v-Notification.closable.error:active:after, .tests-valo .v-Notification.closable.system:active:after {
+    background-color: #fff;
+    color: #000; }
+  .tests-valo .v-Notification.closable.tray:after {
+    top: 16px;
+    margin-top: 0; }
+.tests-valo .v-button-primary {
+  height: 37px;
+  padding: 0 16px;
+  color: #ecf2f8;
+  font-weight: 400;
+  border-radius: 4px;
+  border: 1px solid #1467b9;
+  border-top-color: #166fbb;
+  border-bottom-color: #125aaf;
+  background-color: #197de1;
+  background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
+  background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
+  box-shadow: inset 0 1px 0 #4595e5, inset 0 -1px 0 #166ccd, 0 2px 3px rgba(0, 0, 0, 0.05);
+  text-shadow: 0 -1px 0 #197de1;
+  padding: 0 19px;
+  font-weight: bold;
+  min-width: 81px; }
+  .tests-valo .v-button-primary:after {
+    border: inherit;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px; }
+  .tests-valo .v-button-primary:hover:after {
+    background-color: rgba(90, 163, 237, 0.1); }
+  .tests-valo .v-button-primary:focus:after {
+    border: inherit;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-button-primary:active:after {
+    background-color: rgba(2, 62, 122, 0.2); }
+  .v-ie8 .tests-valo .v-button-primary {
+    min-width: 43px; }
+.tests-valo .v-button-friendly {
+  height: 37px;
+  padding: 0 16px;
+  color: #eaf4e9;
+  font-weight: 400;
+  border-radius: 4px;
+  border: 1px solid #247c1a;
+  border-top-color: #26831c;
+  border-bottom-color: #1f7016;
+  background-color: #2c9720;
+  background-image: -webkit-linear-gradient(top, #2f9f22 2%, #26881b 98%);
+  background-image: linear-gradient(to bottom,#2f9f22 2%, #26881b 98%);
+  box-shadow: inset 0 1px 0 #42af36, inset 0 -1px 0 #26831b, 0 2px 3px rgba(0, 0, 0, 0.05);
+  text-shadow: 0 -1px 0 #2c9720; }
+  .tests-valo .v-button-friendly:after {
+    border: inherit;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px; }
+  .tests-valo .v-button-friendly:hover:after {
+    background-color: rgba(65, 211, 48, 0.1); }
+  .tests-valo .v-button-friendly:focus:after {
+    border: inherit;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-button-friendly:active:after {
+    background-color: rgba(14, 86, 6, 0.2); }
+.tests-valo .v-button-danger {
+  height: 37px;
+  padding: 0 16px;
+  color: #f9f0ef;
+  font-weight: 400;
+  border-radius: 4px;
+  border: 1px solid #c33a30;
+  border-top-color: #c43e33;
+  border-bottom-color: #b9332a;
+  background-color: #ed473b;
+  background-image: -webkit-linear-gradient(top, #ee4c3f 2%, #e13e33 98%);
+  background-image: linear-gradient(to bottom,#ee4c3f 2%, #e13e33 98%);
+  box-shadow: inset 0 1px 0 #ef7167, inset 0 -1px 0 #dd3c31, 0 2px 3px rgba(0, 0, 0, 0.05);
+  text-shadow: 0 -1px 0 #ed473b; }
+  .tests-valo .v-button-danger:after {
+    border: inherit;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px; }
+  .tests-valo .v-button-danger:hover:after {
+    background-color: rgba(243, 137, 129, 0.1); }
+  .tests-valo .v-button-danger:focus:after {
+    border: inherit;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-button-danger:active:after {
+    background-color: rgba(146, 12, 2, 0.2); }
+.tests-valo .v-button-borderless {
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  color: inherit; }
+.tests-valo .v-button-link {
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  color: #197de1;
+  text-decoration: underline;
+  font-weight: inherit;
+  -webkit-transition: color 140ms;
+  -moz-transition: color 140ms;
+  transition: color 140ms; }
+  .tests-valo .v-button-link:hover {
+    color: #4396ea; }
+.tests-valo .v-button-small {
+  height: 30px;
+  padding: 0 14px;
+  font-size: 13px;
+  border-radius: 4px; }
+  .tests-valo .v-button-small:after {
+    border: inherit;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px; }
+.tests-valo .v-button-large {
+  height: 45px;
+  padding: 0 20px;
+  font-size: 20px;
+  border-radius: 4px; }
+  .tests-valo .v-button-large:after {
+    border: inherit;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px; }
+.tests-valo .v-button-icon-align-right .v-button-wrap {
+  display: inline-block; }
+.tests-valo .v-button-icon-align-right .v-icon {
+  float: right;
+  margin-left: 13px; }
+  .tests-valo .v-button-icon-align-right .v-icon + span:not(:empty) {
+    margin-left: 0; }
+.tests-valo .v-button-icon-only {
+  width: 37px;
+  padding: 0; }
+  .tests-valo .v-button-icon-only.v-button-small {
+    width: 30px; }
+.tests-valo .v-link-small {
+  font-size: 13px; }
+.tests-valo .v-link-large {
+  font-size: 20px; }
+.tests-valo .v-tabsheet-centered-tabs .v-tabsheet-tabcontainer {
+  text-align: center; }
+.tests-valo .v-tabsheet-equal-width-tabs .v-tabsheet-tabcontainer table,
+.tests-valo .v-tabsheet-equal-width-tabs .v-tabsheet-tabcontainer tbody,
+.tests-valo .v-tabsheet-equal-width-tabs .v-tabsheet-tabcontainer tr {
+  width: 100%; }
+.tests-valo .v-tabsheet-equal-width-tabs .v-tabsheet-tabcontainer tr {
+  display: table;
+  table-layout: fixed; }
+.tests-valo .v-tabsheet-equal-width-tabs .v-tabsheet-tabcontainer td {
+  display: table-cell; }
+.tests-valo .v-tabsheet-equal-width-tabs .v-tabsheet-tabcontainer .v-caption {
+  margin: 0;
+  display: block; }
+.tests-valo .v-tabsheet-padded-tabbar > .v-tabsheet-tabcontainer .v-tabsheet-tabs {
+  padding: 0 9px; }
+.tests-valo .v-tabsheet-icons-on-top .v-tabsheet-tabs {
+  height: 74px; }
+  .tests-valo .v-tabsheet-icons-on-top .v-tabsheet-tabs .v-caption {
+    height: 74px;
+    padding-top: 37px; }
+  .tests-valo .v-tabsheet-icons-on-top .v-tabsheet-tabs .v-icon {
+    display: block;
+    font-size: 32px;
+    margin: -28px auto -9px;
+    min-height: 37px; }
+    .tests-valo .v-tabsheet-icons-on-top .v-tabsheet-tabs .v-icon + .v-captiontext.v-captiontext {
+      margin-left: 0; }
+.tests-valo .v-tabsheet-icons-on-top .v-tabsheet-scroller {
+  line-height: 74px; }
+  .tests-valo .v-tabsheet-icons-on-top .v-tabsheet-scroller button[class] {
+    padding: 0 9px;
+    display: block; }
+.tests-valo .v-panel-borderless {
+  background: transparent;
+  color: inherit;
+  border: none;
+  box-shadow: none; }
+  .tests-valo .v-panel-borderless .v-panel-caption {
+    background: transparent;
+    box-shadow: none;
+    color: inherit;
+    padding: 0;
+    margin: 0 12px;
+    border-bottom: none; }
+.tests-valo .v-formlayout.light > table {
+  padding: 0; }
+.tests-valo .v-formlayout.light > table > tbody > .v-formlayout-row > .v-formlayout-captioncell,
+.tests-valo .v-formlayout.light > table > tbody > .v-formlayout-row > .v-formlayout-contentcell,
+.tests-valo .v-formlayout.light > table > tbody > .v-formlayout-row > .v-formlayout-errorcell {
+  padding-top: 0;
+  height: 37px; }
+.tests-valo .v-formlayout.light > table > tbody > .v-formlayout-row td {
+  border-bottom: 1px solid #ececec; }
+.tests-valo .v-formlayout.light > table > tbody > .v-formlayout-lastrow td {
+  border-bottom: none; }
+.tests-valo .v-formlayout.light > table > tbody > .v-formlayout-row > .v-formlayout-captioncell {
+  color: #898989;
+  text-align: right;
+  padding-left: 13px;
+  line-height: 37px; }
+.tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-textfield,
+.tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-textarea,
+.tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-filterselect,
+.tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-datefield,
+.tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-filterselect-input,
+.tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-datefield-textfield {
+  width: 100%; }
+.tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-textfield,
+.tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-textarea,
+.tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-filterselect input,
+.tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-datefield input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  margin: 0;
+  font: inherit;
+  font-weight: 400;
+  line-height: normal;
+  height: 37px;
+  border-radius: 0;
+  padding: 4px 7px;
+  box-shadow: none;
+  -webkit-transition: box-shadow 180ms, border 180ms;
+  -moz-transition: box-shadow 180ms, border 180ms;
+  transition: box-shadow 180ms, border 180ms;
+  background: transparent;
+  border: none;
+  color: inherit; }
+  .tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-textfield.v-disabled,
+  .tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-textarea.v-disabled,
+  .tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-filterselect input.v-disabled,
+  .tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-datefield input.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+  .tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-textfield:focus,
+  .tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-textarea:focus,
+  .tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-filterselect input:focus,
+  .tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-datefield input:focus {
+    outline: none;
+    -webkit-transition: none;
+    -moz-transition: none;
+    transition: none;
+    border-color: #197de1;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), none; }
+.tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-textfield-prompt,
+.tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-textarea-prompt,
+.tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-filterselect-prompt input,
+.tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-datefield-prompt input {
+  color: #a3a3a3; }
+.tests-valo .v-formlayout.light .v-formlayout-contentcell > .v-textarea {
+  height: auto; }
+.tests-valo .v-formlayout.light .v-richtextarea {
+  margin: 5px 0; }
+.tests-valo .v-formlayout.light .v-filterselect-button,
+.tests-valo .v-formlayout.light .v-datefield-button {
+  border: none; }
+  .tests-valo .v-formlayout.light .v-filterselect-button:active:after,
+  .tests-valo .v-formlayout.light .v-datefield-button:active:after {
+    display: none; }
+.tests-valo .v-formlayout.light .v-datefield-button {
+  right: 0;
+  left: auto; }
+.tests-valo .v-formlayout.light .v-checkbox {
+  margin-left: 7px; }
+.tests-valo .v-formlayout.light > table > tbody > .v-formlayout-row > .v-formlayout-contentcell > .h4 {
+  border-bottom: none;
+  color: #197de1;
+  margin-top: -0.2em; }
+.tests-valo .v-textfield-borderless,
+.tests-valo .v-textarea-borderless {
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none; }
+  .tests-valo .v-textfield-borderless:focus,
+  .tests-valo .v-textarea-borderless:focus {
+    box-shadow: none; }
+.tests-valo .v-textfield-small {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  margin: 0;
+  font: inherit;
+  font-weight: 400;
+  line-height: normal;
+  height: 30px;
+  border-radius: 4px;
+  padding: 3px 7px;
+  border: 1px solid #cecece;
+  background: white;
+  color: #474747;
+  box-shadow: inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1);
+  -webkit-transition: box-shadow 180ms, border 180ms;
+  -moz-transition: box-shadow 180ms, border 180ms;
+  transition: box-shadow 180ms, border 180ms;
+  font-size: 13px; }
+  .tests-valo .v-textfield-small.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+  .tests-valo .v-textfield-small:focus {
+    outline: none;
+    -webkit-transition: none;
+    -moz-transition: none;
+    transition: none;
+    border-color: #197de1;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1); }
+  .tests-valo .v-textfield-small.v-textfield-prompt, .tests-valo .v-textfield-small.v-textarea-prompt {
+    color: #a3a3a3; }
+.tests-valo .v-textfield-large {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  margin: 0;
+  font: inherit;
+  font-weight: 400;
+  line-height: normal;
+  height: 45px;
+  border-radius: 4px;
+  padding: 5px 10px;
+  border: 1px solid #cecece;
+  background: white;
+  color: #474747;
+  box-shadow: inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1);
+  -webkit-transition: box-shadow 180ms, border 180ms;
+  -moz-transition: box-shadow 180ms, border 180ms;
+  transition: box-shadow 180ms, border 180ms;
+  font-size: 20px; }
+  .tests-valo .v-textfield-large.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+  .tests-valo .v-textfield-large:focus {
+    outline: none;
+    -webkit-transition: none;
+    -moz-transition: none;
+    transition: none;
+    border-color: #197de1;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1); }
+  .tests-valo .v-textfield-large.v-textfield-prompt, .tests-valo .v-textfield-large.v-textarea-prompt {
+    color: #a3a3a3; }
+.tests-valo .v-slot-inline-icon {
+  position: relative; }
+.tests-valo .v-caption-inline-icon {
+  padding: 0; }
+  .tests-valo .v-caption-inline-icon .v-captiontext {
+    font-size: 14px;
+    font-weight: 400;
+    padding-bottom: .3em;
+    padding-left: 1px;
+    margin: 0; }
+  .tests-valo .v-caption-inline-icon .v-icon {
+    position: absolute;
+    z-index: 10; }
+  .tests-valo .v-caption-inline-icon span.v-icon {
+    left: 1px;
+    bottom: 1px;
+    width: 37px;
+    line-height: 35px;
+    text-align: center;
+    font-size: 16px; }
+  .tests-valo .v-caption-inline-icon img.v-icon {
+    left: 11px;
+    bottom: 11px; }
+.tests-valo .v-textfield-inline-icon,
+.tests-valo .v-textarea-inline-icon {
+  padding-left: 37px; }
+.tests-valo .v-textarea-small {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  margin: 0;
+  font: inherit;
+  font-weight: 400;
+  line-height: normal;
+  height: 30px;
+  border-radius: 4px;
+  padding: 6px;
+  border: 1px solid #cecece;
+  background: white;
+  color: #474747;
+  box-shadow: inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1);
+  -webkit-transition: box-shadow 180ms, border 180ms;
+  -moz-transition: box-shadow 180ms, border 180ms;
+  transition: box-shadow 180ms, border 180ms;
+  height: auto;
+  resize: none;
+  font-size: 13px; }
+  .tests-valo .v-textarea-small.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+  .tests-valo .v-textarea-small:focus {
+    outline: none;
+    -webkit-transition: none;
+    -moz-transition: none;
+    transition: none;
+    border-color: #197de1;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1); }
+  .tests-valo .v-textarea-small.v-textfield-prompt, .tests-valo .v-textarea-small.v-textarea-prompt {
+    color: #a3a3a3; }
+.tests-valo .v-textarea-large {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  margin: 0;
+  font: inherit;
+  font-weight: 400;
+  line-height: normal;
+  height: 45px;
+  border-radius: 4px;
+  padding: 6px;
+  border: 1px solid #cecece;
+  background: white;
+  color: #474747;
+  box-shadow: inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1);
+  -webkit-transition: box-shadow 180ms, border 180ms;
+  -moz-transition: box-shadow 180ms, border 180ms;
+  transition: box-shadow 180ms, border 180ms;
+  height: auto;
+  resize: none;
+  font-size: 20px; }
+  .tests-valo .v-textarea-large.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+  .tests-valo .v-textarea-large:focus {
+    outline: none;
+    -webkit-transition: none;
+    -moz-transition: none;
+    transition: none;
+    border-color: #197de1;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1); }
+  .tests-valo .v-textarea-large.v-textfield-prompt, .tests-valo .v-textarea-large.v-textarea-prompt {
+    color: #a3a3a3; }
+.tests-valo .v-textfield-align-right,
+.tests-valo .v-textarea-align-right {
+  text-align: right; }
+.tests-valo .v-textfield-align-center,
+.tests-valo .v-textarea-align-center {
+  text-align: center; }
+.tests-valo .v-filterselect-small {
+  height: 30px;
+  font-size: 13px; }
+  .tests-valo .v-filterselect-small .v-filterselect-input {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    margin: 0;
+    font: inherit;
+    font-weight: 400;
+    line-height: normal;
+    height: 30px;
+    padding: 3px 5px;
+    color: #474747;
+    -webkit-transition: box-shadow 180ms, border 180ms;
+    -moz-transition: box-shadow 180ms, border 180ms;
+    transition: box-shadow 180ms, border 180ms;
+    width: 100% !important;
+    height: 100%;
+    padding-right: 36px;
+    border-radius: inherit; }
+    .tests-valo .v-filterselect-small .v-filterselect-input.v-disabled {
+      opacity: 0.5;
+      filter: alpha(opacity=50); }
+    .tests-valo .v-filterselect-small .v-filterselect-input:focus {
+      outline: none;
+      -webkit-transition: none;
+      -moz-transition: none;
+      transition: none;
+      border-color: #197de1;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+    .tests-valo .v-filterselect-small .v-filterselect-input.v-textfield-prompt, .tests-valo .v-filterselect-small .v-filterselect-input.v-textarea-prompt {
+      color: #a3a3a3; }
+  .tests-valo .v-filterselect-small .v-icon + .v-filterselect-input {
+    padding-left: 30px; }
+  .tests-valo .v-filterselect-small img.v-icon {
+    max-height: 30px;
+    margin-left: 5px; }
+  .tests-valo .v-filterselect-small span.v-icon {
+    color: #474747;
+    width: 30px; }
+  .tests-valo .v-filterselect-small.v-filterselect-prompt > .v-filterselect-input {
+    color: #a3a3a3; }
+  .tests-valo .v-filterselect-small .v-filterselect-button {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-touch-callout: none;
+    cursor: pointer;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    bottom: 1px;
+    width: 30px;
+    cursor: pointer;
+    border-left: 1px solid #e8e8e8;
+    border-radius: 0 3px 3px 0; }
+    .v-ie8 .tests-valo .v-filterselect-small .v-filterselect-button {
+      background-color: white; }
+    .tests-valo .v-filterselect-small .v-filterselect-button:before {
+      font-family: FontAwesome;
+      content: "\f078";
+      color: #474747;
+      color: #a3a3a3;
+      -webkit-transition: color 140ms;
+      -moz-transition: color 140ms;
+      transition: color 140ms;
+      position: absolute;
+      width: 30px;
+      text-align: center;
+      top: 50%;
+      line-height: 1;
+      margin-top: -.47em; }
+    .tests-valo .v-filterselect-small .v-filterselect-button:hover:before {
+      color: #474747; }
+    .tests-valo .v-filterselect-small .v-filterselect-button:active:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border-radius: inherit;
+      background-color: rgba(128, 128, 128, 0.2); }
+  .tests-valo .v-filterselect-small.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+    .tests-valo .v-filterselect-small.v-disabled .v-filterselect-button {
+      cursor: default;
+      pointer-events: none; }
+      .tests-valo .v-filterselect-small.v-disabled .v-filterselect-button:active:after {
+        display: none; }
+  .tests-valo .v-filterselect-small.v-readonly .v-filterselect-input {
+    background: transparent;
+    box-shadow: none; }
+    .tests-valo .v-filterselect-small.v-readonly .v-filterselect-input:focus {
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-filterselect-small.v-readonly .v-filterselect-button {
+    cursor: default;
+    pointer-events: none; }
+    .tests-valo .v-filterselect-small.v-readonly .v-filterselect-button:active:after {
+      display: none; }
+.tests-valo .v-filterselect-large {
+  height: 45px;
+  font-size: 20px; }
+  .tests-valo .v-filterselect-large .v-filterselect-input {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    margin: 0;
+    font: inherit;
+    font-weight: 400;
+    line-height: normal;
+    height: 45px;
+    padding: 5px 8px;
+    color: #474747;
+    -webkit-transition: box-shadow 180ms, border 180ms;
+    -moz-transition: box-shadow 180ms, border 180ms;
+    transition: box-shadow 180ms, border 180ms;
+    width: 100% !important;
+    height: 100%;
+    padding-right: 54px;
+    border-radius: inherit; }
+    .tests-valo .v-filterselect-large .v-filterselect-input.v-disabled {
+      opacity: 0.5;
+      filter: alpha(opacity=50); }
+    .tests-valo .v-filterselect-large .v-filterselect-input:focus {
+      outline: none;
+      -webkit-transition: none;
+      -moz-transition: none;
+      transition: none;
+      border-color: #197de1;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+    .tests-valo .v-filterselect-large .v-filterselect-input.v-textfield-prompt, .tests-valo .v-filterselect-large .v-filterselect-input.v-textarea-prompt {
+      color: #a3a3a3; }
+  .tests-valo .v-filterselect-large .v-icon + .v-filterselect-input {
+    padding-left: 45px; }
+  .tests-valo .v-filterselect-large img.v-icon {
+    max-height: 45px;
+    margin-left: 8px; }
+  .tests-valo .v-filterselect-large span.v-icon {
+    color: #474747;
+    width: 45px; }
+  .tests-valo .v-filterselect-large.v-filterselect-prompt > .v-filterselect-input {
+    color: #a3a3a3; }
+  .tests-valo .v-filterselect-large .v-filterselect-button {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-touch-callout: none;
+    cursor: pointer;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    bottom: 1px;
+    width: 45px;
+    cursor: pointer;
+    border-left: 1px solid #e8e8e8;
+    border-radius: 0 3px 3px 0; }
+    .v-ie8 .tests-valo .v-filterselect-large .v-filterselect-button {
+      background-color: white; }
+    .tests-valo .v-filterselect-large .v-filterselect-button:before {
+      font-family: FontAwesome;
+      content: "\f078";
+      color: #474747;
+      color: #a3a3a3;
+      -webkit-transition: color 140ms;
+      -moz-transition: color 140ms;
+      transition: color 140ms;
+      position: absolute;
+      width: 45px;
+      text-align: center;
+      top: 50%;
+      line-height: 1;
+      margin-top: -.47em; }
+    .tests-valo .v-filterselect-large .v-filterselect-button:hover:before {
+      color: #474747; }
+    .tests-valo .v-filterselect-large .v-filterselect-button:active:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border-radius: inherit;
+      background-color: rgba(128, 128, 128, 0.2); }
+  .tests-valo .v-filterselect-large.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+    .tests-valo .v-filterselect-large.v-disabled .v-filterselect-button {
+      cursor: default;
+      pointer-events: none; }
+      .tests-valo .v-filterselect-large.v-disabled .v-filterselect-button:active:after {
+        display: none; }
+  .tests-valo .v-filterselect-large.v-readonly .v-filterselect-input {
+    background: transparent;
+    box-shadow: none; }
+    .tests-valo .v-filterselect-large.v-readonly .v-filterselect-input:focus {
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-filterselect-large.v-readonly .v-filterselect-button {
+    cursor: default;
+    pointer-events: none; }
+    .tests-valo .v-filterselect-large.v-readonly .v-filterselect-button:active:after {
+      display: none; }
+.tests-valo .v-datefield-small {
+  height: 30px;
+  border-radius: 4px;
+  font-size: 13px; }
+  .tests-valo .v-datefield-small .v-datefield-textfield {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    margin: 0;
+    font: inherit;
+    font-weight: 400;
+    line-height: normal;
+    height: 30px;
+    border-radius: 4px;
+    padding: 3px 7px;
+    border: 1px solid #cecece;
+    background: white;
+    color: #474747;
+    box-shadow: inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1);
+    -webkit-transition: box-shadow 180ms, border 180ms;
+    -moz-transition: box-shadow 180ms, border 180ms;
+    transition: box-shadow 180ms, border 180ms;
+    padding-left: 36px;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit; }
+    .tests-valo .v-datefield-small .v-datefield-textfield.v-disabled {
+      opacity: 0.5;
+      filter: alpha(opacity=50); }
+    .tests-valo .v-datefield-small .v-datefield-textfield:focus {
+      outline: none;
+      -webkit-transition: none;
+      -moz-transition: none;
+      transition: none;
+      border-color: #197de1;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1); }
+    .tests-valo .v-datefield-small .v-datefield-textfield.v-textfield-prompt, .tests-valo .v-datefield-small .v-datefield-textfield.v-textarea-prompt {
+      color: #a3a3a3; }
+  .tests-valo .v-datefield-small.v-datefield-prompt > .v-datefield-textfield {
+    color: #a3a3a3; }
+  .tests-valo .v-datefield-small .v-datefield-button {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-touch-callout: none;
+    cursor: pointer;
+    -webkit-appearance: none;
+    background: transparent;
+    border: none;
+    padding: 0;
+    position: absolute;
+    z-index: 10;
+    top: 1px;
+    bottom: 1px;
+    left: 1px;
+    width: 30px;
+    line-height: 28px;
+    text-align: center;
+    cursor: pointer;
+    font: inherit;
+    border-right: 1px solid #e8e8e8;
+    outline: none;
+    margin: 0;
+    border-radius: 3px 0 0 3px; }
+    .tests-valo .v-datefield-small .v-datefield-button:before {
+      font-family: FontAwesome;
+      content: "\f073";
+      color: #474747;
+      color: #a3a3a3;
+      -webkit-transition: color 140ms;
+      -moz-transition: color 140ms;
+      transition: color 140ms; }
+    .tests-valo .v-datefield-small .v-datefield-button:hover:before {
+      color: #474747; }
+    .tests-valo .v-datefield-small .v-datefield-button:active:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: rgba(128, 128, 128, 0.2);
+      border-radius: inherit; }
+  .tests-valo .v-datefield-small.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+    .tests-valo .v-datefield-small.v-disabled .v-datefield-button {
+      cursor: default;
+      pointer-events: none; }
+      .tests-valo .v-datefield-small.v-disabled .v-datefield-button:active:after {
+        display: none; }
+  .tests-valo .v-datefield-small.v-readonly .v-datefield-textfield {
+    background: transparent;
+    box-shadow: none; }
+    .tests-valo .v-datefield-small.v-readonly .v-datefield-textfield:focus {
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-datefield-small.v-readonly .v-datefield-button {
+    cursor: default;
+    pointer-events: none; }
+    .tests-valo .v-datefield-small.v-readonly .v-datefield-button:active:after {
+      display: none; }
+.tests-valo .v-datefield-large {
+  height: 45px;
+  border-radius: 4px;
+  font-size: 20px; }
+  .tests-valo .v-datefield-large .v-datefield-textfield {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    margin: 0;
+    font: inherit;
+    font-weight: 400;
+    line-height: normal;
+    height: 45px;
+    border-radius: 4px;
+    padding: 5px 10px;
+    border: 1px solid #cecece;
+    background: white;
+    color: #474747;
+    box-shadow: inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1);
+    -webkit-transition: box-shadow 180ms, border 180ms;
+    -moz-transition: box-shadow 180ms, border 180ms;
+    transition: box-shadow 180ms, border 180ms;
+    padding-left: 54px;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit; }
+    .tests-valo .v-datefield-large .v-datefield-textfield.v-disabled {
+      opacity: 0.5;
+      filter: alpha(opacity=50); }
+    .tests-valo .v-datefield-large .v-datefield-textfield:focus {
+      outline: none;
+      -webkit-transition: none;
+      -moz-transition: none;
+      transition: none;
+      border-color: #197de1;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #f9f9f9, 0 1px 0 rgba(255, 255, 255, 0.1); }
+    .tests-valo .v-datefield-large .v-datefield-textfield.v-textfield-prompt, .tests-valo .v-datefield-large .v-datefield-textfield.v-textarea-prompt {
+      color: #a3a3a3; }
+  .tests-valo .v-datefield-large.v-datefield-prompt > .v-datefield-textfield {
+    color: #a3a3a3; }
+  .tests-valo .v-datefield-large .v-datefield-button {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-touch-callout: none;
+    cursor: pointer;
+    -webkit-appearance: none;
+    background: transparent;
+    border: none;
+    padding: 0;
+    position: absolute;
+    z-index: 10;
+    top: 1px;
+    bottom: 1px;
+    left: 1px;
+    width: 45px;
+    line-height: 43px;
+    text-align: center;
+    cursor: pointer;
+    font: inherit;
+    border-right: 1px solid #e8e8e8;
+    outline: none;
+    margin: 0;
+    border-radius: 3px 0 0 3px; }
+    .tests-valo .v-datefield-large .v-datefield-button:before {
+      font-family: FontAwesome;
+      content: "\f073";
+      color: #474747;
+      color: #a3a3a3;
+      -webkit-transition: color 140ms;
+      -moz-transition: color 140ms;
+      transition: color 140ms; }
+    .tests-valo .v-datefield-large .v-datefield-button:hover:before {
+      color: #474747; }
+    .tests-valo .v-datefield-large .v-datefield-button:active:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: rgba(128, 128, 128, 0.2);
+      border-radius: inherit; }
+  .tests-valo .v-datefield-large.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+    .tests-valo .v-datefield-large.v-disabled .v-datefield-button {
+      cursor: default;
+      pointer-events: none; }
+      .tests-valo .v-datefield-large.v-disabled .v-datefield-button:active:after {
+        display: none; }
+  .tests-valo .v-datefield-large.v-readonly .v-datefield-textfield {
+    background: transparent;
+    box-shadow: none; }
+    .tests-valo .v-datefield-large.v-readonly .v-datefield-textfield:focus {
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-datefield-large.v-readonly .v-datefield-button {
+    cursor: default;
+    pointer-events: none; }
+    .tests-valo .v-datefield-large.v-readonly .v-datefield-button:active:after {
+      display: none; }
+.tests-valo .v-checkbox-small {
+  position: relative;
+  line-height: 15px;
+  white-space: nowrap;
+  font-size: 13px; }
+  .tests-valo .v-checkbox-small.v-has-width label {
+    white-space: normal; }
+  :root .tests-valo .v-checkbox-small {
+    padding-left: 20px; }
+    :root .tests-valo .v-checkbox-small label {
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      -webkit-touch-callout: none;
+      cursor: pointer; }
+  :root .tests-valo .v-checkbox-small > input {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+    left: .2em;
+    top: .2em;
+    z-index: 0;
+    margin: 0; }
+    :root .tests-valo .v-checkbox-small > input:focus ~ label:before {
+      border-color: #197de1;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 white, inset 0 -1px 0 #eaeaea, 0 2px 3px rgba(0, 0, 0, 0.05); }
+    :root .tests-valo .v-checkbox-small > input ~ label:before, :root .tests-valo .v-checkbox-small > input ~ label:after {
+      content: "";
+      display: inline-block;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      width: 15px;
+      height: 15px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-radius: 4px;
+      font-size: 10px;
+      text-align: center; }
+    :root .tests-valo .v-checkbox-small > input ~ label:before {
+      height: 15px;
+      padding: 0 7px;
+      color: #2f2f2f;
+      font-weight: 400;
+      border-radius: 4px;
+      border: 1px solid #cecece;
+      border-top-color: #cecece;
+      border-bottom-color: #c5c5c5;
+      background-color: #fafafa;
+      background-image: -webkit-linear-gradient(top, #fafafa 2%, #efefef 98%);
+      background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%);
+      box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #eaeaea, 0 2px 3px rgba(0, 0, 0, 0.05);
+      text-shadow: 0 1px 0 #fafafa;
+      padding: 0;
+      height: 15px; }
+      :root .tests-valo .v-checkbox-small > input ~ label:before:after {
+        border: inherit;
+        top: -1px;
+        right: -1px;
+        bottom: -1px;
+        left: -1px; }
+      :root .tests-valo .v-checkbox-small > input ~ label:before:hover:after {
+        background-color: rgba(186, 186, 186, 0.1); }
+      :root .tests-valo .v-checkbox-small > input ~ label:before:focus:after {
+        border-color: #197de1;
+        box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+      :root .tests-valo .v-checkbox-small > input ~ label:before:active:after {
+        background-color: rgba(125, 125, 125, 0.2); }
+    :root .tests-valo .v-checkbox-small > input ~ label:after {
+      content: "\f00c";
+      font-family: FontAwesome;
+      color: transparent;
+      -webkit-transition: color 100ms;
+      -moz-transition: color 100ms;
+      transition: color 100ms; }
+    :root .tests-valo .v-checkbox-small > input:active ~ label:after {
+      background-color: rgba(125, 125, 125, 0.2); }
+    :root .tests-valo .v-checkbox-small > input:checked ~ label:after {
+      color: #197de1; }
+    :root .tests-valo .v-checkbox-small > input[disabled] ~ label,
+    :root .tests-valo .v-checkbox-small > input[disabled] ~ label .v-icon,
+    :root .tests-valo .v-checkbox-small > input[disabled] ~ .v-icon {
+      cursor: default; }
+    :root .tests-valo .v-checkbox-small > input[disabled] ~ label:before,
+    :root .tests-valo .v-checkbox-small > input[disabled] ~ label:after {
+      opacity: 0.5;
+      filter: alpha(opacity=50); }
+    :root .tests-valo .v-checkbox-small > input[disabled]:active ~ label:after {
+      background: transparent; }
+  .tests-valo .v-checkbox-small > .v-icon, .tests-valo .v-checkbox-small > label .v-icon {
+    margin: 0 5px 0 3px;
+    min-width: 1em;
+    cursor: pointer; }
+.tests-valo .v-checkbox-large {
+  position: relative;
+  line-height: 23px;
+  white-space: nowrap;
+  font-size: 20px; }
+  .tests-valo .v-checkbox-large.v-has-width label {
+    white-space: normal; }
+  :root .tests-valo .v-checkbox-large {
+    padding-left: 30px; }
+    :root .tests-valo .v-checkbox-large label {
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      -webkit-touch-callout: none;
+      cursor: pointer; }
+  :root .tests-valo .v-checkbox-large > input {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+    left: .2em;
+    top: .2em;
+    z-index: 0;
+    margin: 0; }
+    :root .tests-valo .v-checkbox-large > input:focus ~ label:before {
+      border-color: #197de1;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 white, inset 0 -1px 0 #eaeaea, 0 2px 3px rgba(0, 0, 0, 0.05); }
+    :root .tests-valo .v-checkbox-large > input ~ label:before, :root .tests-valo .v-checkbox-large > input ~ label:after {
+      content: "";
+      display: inline-block;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      width: 23px;
+      height: 23px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-radius: 4px;
+      font-size: 16px;
+      text-align: center; }
+    :root .tests-valo .v-checkbox-large > input ~ label:before {
+      height: 22.5px;
+      padding: 0 10px;
+      color: #2f2f2f;
+      font-weight: 400;
+      border-radius: 4px;
+      border: 1px solid #cecece;
+      border-top-color: #cecece;
+      border-bottom-color: #c5c5c5;
+      background-color: #fafafa;
+      background-image: -webkit-linear-gradient(top, #fafafa 2%, #efefef 98%);
+      background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%);
+      box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #eaeaea, 0 2px 3px rgba(0, 0, 0, 0.05);
+      text-shadow: 0 1px 0 #fafafa;
+      padding: 0;
+      height: 23px; }
+      :root .tests-valo .v-checkbox-large > input ~ label:before:after {
+        border: inherit;
+        top: -1px;
+        right: -1px;
+        bottom: -1px;
+        left: -1px; }
+      :root .tests-valo .v-checkbox-large > input ~ label:before:hover:after {
+        background-color: rgba(186, 186, 186, 0.1); }
+      :root .tests-valo .v-checkbox-large > input ~ label:before:focus:after {
+        border-color: #197de1;
+        box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+      :root .tests-valo .v-checkbox-large > input ~ label:before:active:after {
+        background-color: rgba(125, 125, 125, 0.2); }
+    :root .tests-valo .v-checkbox-large > input ~ label:after {
+      content: "\f00c";
+      font-family: FontAwesome;
+      color: transparent;
+      -webkit-transition: color 100ms;
+      -moz-transition: color 100ms;
+      transition: color 100ms; }
+    :root .tests-valo .v-checkbox-large > input:active ~ label:after {
+      background-color: rgba(125, 125, 125, 0.2); }
+    :root .tests-valo .v-checkbox-large > input:checked ~ label:after {
+      color: #197de1; }
+    :root .tests-valo .v-checkbox-large > input[disabled] ~ label,
+    :root .tests-valo .v-checkbox-large > input[disabled] ~ label .v-icon,
+    :root .tests-valo .v-checkbox-large > input[disabled] ~ .v-icon {
+      cursor: default; }
+    :root .tests-valo .v-checkbox-large > input[disabled] ~ label:before,
+    :root .tests-valo .v-checkbox-large > input[disabled] ~ label:after {
+      opacity: 0.5;
+      filter: alpha(opacity=50); }
+    :root .tests-valo .v-checkbox-large > input[disabled]:active ~ label:after {
+      background: transparent; }
+  .tests-valo .v-checkbox-large > .v-icon, .tests-valo .v-checkbox-large > label .v-icon {
+    margin: 0 8px 0 4px;
+    min-width: 1em;
+    cursor: pointer; }
+.tests-valo .v-label-spinner {
+  height: 24px !important;
+  width: 24px !important;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border: 4px solid rgba(25, 125, 225, 0.2);
+  border-top-color: rgba(25, 125, 225, 0.85);
+  border-radius: 100%;
+  -webkit-animation: v-rotate-360 500ms infinite linear;
+  -moz-animation: v-rotate-360 500ms infinite linear;
+  animation: v-rotate-360 500ms infinite linear;
+  pointer-events: none;
+  -webkit-transition: all ease-in-out 300ms;
+  -moz-transition: all ease-in-out 300ms;
+  transition: all ease-in-out 300ms; }
+.tests-valo .v-panel-well {
+  background: whitesmoke;
+  color: #454545;
+  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05), inset 0 2px 3px rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  border: 1px solid #cecece; }
+  .tests-valo .v-panel-well .v-panel-caption {
+    background: transparent;
+    box-shadow: none; }
+.tests-valo .v-panel-borderless {
+  background: transparent;
+  color: inherit;
+  border: none;
+  box-shadow: none; }
+  .tests-valo .v-panel-borderless .v-panel-caption {
+    background: transparent;
+    box-shadow: none;
+    color: inherit;
+    padding: 0;
+    margin: 0 12px;
+    border-bottom: none; }
+.tests-valo .v-panel-scroll-divider > .v-panel-captionwrap {
+  position: relative;
+  z-index: 2; }
+  .tests-valo .v-panel-scroll-divider > .v-panel-captionwrap:after {
+    content: "";
+    position: absolute;
+    bottom: -1px;
+    right: 0;
+    left: 0;
+    height: 1px;
+    background: #e4e4e4; }
+.tests-valo .v-panel-scroll-divider > .v-panel-content:before {
+  content: "";
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  height: 1px;
+  background: #fafafa;
+  left: 0;
+  right: 0; }
+.tests-valo .v-csslayout-well {
+  background: whitesmoke;
+  color: #454545;
+  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05), inset 0 2px 3px rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  border: 1px solid #cecece; }
+  .tests-valo .v-csslayout-well .v-panel-caption {
+    background: transparent;
+    box-shadow: none; }
+  .tests-valo .v-csslayout-well > .v-margin-top {
+    padding-top: 12px; }
+  .tests-valo .v-csslayout-well > .v-margin-right {
+    padding-right: 12px; }
+  .tests-valo .v-csslayout-well > .v-margin-bottom {
+    padding-bottom: 12px; }
+  .tests-valo .v-csslayout-well > .v-margin-left {
+    padding-left: 12px; }
+.tests-valo .v-csslayout-card {
+  background: white;
+  color: #474747;
+  border-radius: 4px;
+  border: 1px solid #dbdbdb;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05); }
+  .tests-valo .v-csslayout-card > .v-margin-top {
+    padding-top: 12px; }
+  .tests-valo .v-csslayout-card > .v-margin-right {
+    padding-right: 12px; }
+  .tests-valo .v-csslayout-card > .v-margin-bottom {
+    padding-bottom: 12px; }
+  .tests-valo .v-csslayout-card > .v-margin-left {
+    padding-left: 12px; }
+.tests-valo .v-splitpanel-horizontal.large .v-splitpanel-hsplitter,
+.tests-valo .v-splitpanel-vertical.large .v-splitpanel-hsplitter {
+  width: 12px; }
+.tests-valo .v-splitpanel-horizontal.large .v-splitpanel-vsplitter,
+.tests-valo .v-splitpanel-vertical.large .v-splitpanel-vsplitter {
+  height: 12px; }
+.tests-valo .v-splitpanel-horizontal.large .v-splitpanel-hsplitter:after,
+.tests-valo .v-splitpanel-vertical.large .v-splitpanel-hsplitter:after {
+  left: 0px;
+  right: 0px; }
+.tests-valo .v-splitpanel-horizontal.large .v-splitpanel-vsplitter:after,
+.tests-valo .v-splitpanel-vertical.large .v-splitpanel-vsplitter:after {
+  top: 0px;
+  bottom: 0px; }
+.tests-valo .v-splitpanel-horizontal.large .v-splitpanel-hsplitter div:before,
+.tests-valo .v-splitpanel-horizontal.large .v-splitpanel-vsplitter div:before,
+.tests-valo .v-splitpanel-vertical.large .v-splitpanel-hsplitter div:before,
+.tests-valo .v-splitpanel-vertical.large .v-splitpanel-vsplitter div:before {
+  height: 37px;
+  padding: 0 16px;
+  color: #2f2f2f;
+  font-weight: 400;
+  border-radius: 4px;
+  border: 1px solid #cecece;
+  border-top-color: #cecece;
+  border-bottom-color: #c5c5c5;
+  background-color: #fafafa;
+  background-image: -webkit-linear-gradient(top, #fafafa 2%, #efefef 98%);
+  background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%);
+  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #eaeaea, none;
+  text-shadow: 0 1px 0 #fafafa;
+  height: auto;
+  padding: 0;
+  border-radius: 0; }
+  .tests-valo .v-splitpanel-horizontal.large .v-splitpanel-hsplitter div:before:after,
+  .tests-valo .v-splitpanel-horizontal.large .v-splitpanel-vsplitter div:before:after,
+  .tests-valo .v-splitpanel-vertical.large .v-splitpanel-hsplitter div:before:after,
+  .tests-valo .v-splitpanel-vertical.large .v-splitpanel-vsplitter div:before:after {
+    border: inherit;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px; }
+  .tests-valo .v-splitpanel-horizontal.large .v-splitpanel-hsplitter div:before:hover:after,
+  .tests-valo .v-splitpanel-horizontal.large .v-splitpanel-vsplitter div:before:hover:after,
+  .tests-valo .v-splitpanel-vertical.large .v-splitpanel-hsplitter div:before:hover:after,
+  .tests-valo .v-splitpanel-vertical.large .v-splitpanel-vsplitter div:before:hover:after {
+    background-color: rgba(186, 186, 186, 0.1); }
+  .tests-valo .v-splitpanel-horizontal.large .v-splitpanel-hsplitter div:before:focus:after,
+  .tests-valo .v-splitpanel-horizontal.large .v-splitpanel-vsplitter div:before:focus:after,
+  .tests-valo .v-splitpanel-vertical.large .v-splitpanel-hsplitter div:before:focus:after,
+  .tests-valo .v-splitpanel-vertical.large .v-splitpanel-vsplitter div:before:focus:after {
+    border-color: #197de1;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-splitpanel-horizontal.large .v-splitpanel-hsplitter div:before:active:after,
+  .tests-valo .v-splitpanel-horizontal.large .v-splitpanel-vsplitter div:before:active:after,
+  .tests-valo .v-splitpanel-vertical.large .v-splitpanel-hsplitter div:before:active:after,
+  .tests-valo .v-splitpanel-vertical.large .v-splitpanel-vsplitter div:before:active:after {
+    background-color: rgba(125, 125, 125, 0.2); }
+.tests-valo .v-splitpanel-horizontal.large .v-splitpanel-hsplitter div:before,
+.tests-valo .v-splitpanel-vertical.large .v-splitpanel-hsplitter div:before {
+  background-color: #fafafa;
+  background-image: -webkit-linear-gradient(left, #fafafa 2%, #efefef 98%);
+  background-image: linear-gradient(to right,#fafafa 2%, #efefef 98%); }
+.tests-valo .v-splitpanel-horizontal.large .v-splitpanel-vsplitter div:after,
+.tests-valo .v-splitpanel-horizontal.large .v-splitpanel-hsplitter div:after,
+.tests-valo .v-splitpanel-vertical.large .v-splitpanel-vsplitter div:after,
+.tests-valo .v-splitpanel-vertical.large .v-splitpanel-hsplitter div:after {
+  content: "";
+  border: 1px solid #dfdfdf;
+  border-top-color: #c5c5c5;
+  border-left-color: #c5c5c5;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 37px;
+  height: 0;
+  margin-left: -19px;
+  margin-top: -1px; }
+.tests-valo .v-splitpanel-horizontal.large .v-splitpanel-hsplitter div:after,
+.tests-valo .v-splitpanel-vertical.large .v-splitpanel-hsplitter div:after {
+  width: 0;
+  height: 37px;
+  margin-left: -1px;
+  margin-top: -19px; }
+.tests-valo .v-splitpanel-horizontal.large.v-splitpanel-horizontal .v-splitpanel-second-container,
+.tests-valo .v-splitpanel-vertical.large.v-splitpanel-horizontal .v-splitpanel-second-container {
+  margin-left: 12px; }
+.tests-valo .v-menubar-small {
+  height: 30px;
+  font-size: 13px; }
+  .tests-valo .v-menubar-small .v-menubar-menuitem {
+    line-height: 28px; }
+    .tests-valo .v-menubar-small .v-menubar-menuitem[class*="-icon-only"] {
+      width: 30px; }
+.tests-valo .v-menubar-borderless {
+  border: none;
+  padding: 1px;
+  box-shadow: none;
+  background: transparent;
+  color: inherit; }
+  .tests-valo .v-menubar-borderless:focus:not(.v-disabled) {
+    border: none;
+    box-shadow: none; }
+  .tests-valo .v-menubar-borderless .v-menubar-menuitem {
+    box-shadow: none;
+    border: none;
+    margin-right: 1px;
+    border-radius: 4px;
+    text-shadow: 0 -1px 0 #fafafa;
+    -webkit-transition: color 140ms;
+    -moz-transition: color 140ms;
+    transition: color 140ms; }
+    .tests-valo .v-menubar-borderless .v-menubar-menuitem:first-child, .tests-valo .v-menubar-borderless .v-menubar-menuitem:last-child {
+      border-radius: inherit; }
+    .tests-valo .v-menubar-borderless .v-menubar-menuitem:hover:before {
+      display: none; }
+    .tests-valo .v-menubar-borderless .v-menubar-menuitem:active:not(.v-menubar-menuitem-disabled):before {
+      display: block; }
+    .tests-valo .v-menubar-borderless .v-menubar-menuitem:hover {
+      color: #197de1; }
+  .tests-valo .v-menubar-borderless .v-menubar-menuitem-checked {
+    border: 1px solid #cecece;
+    line-height: 32px;
+    color: #197de1; }
+  .tests-valo .v-menubar-borderless .v-menubar-menuitem-selected {
+    text-shadow: 0 -1px 0 #197de1; }
+    .tests-valo .v-menubar-borderless .v-menubar-menuitem-selected:hover {
+      color: #ecf2f8; }
+  .tests-valo .v-menubar-borderless .v-menubar-menuitem-disabled:hover {
+    color: inherit; }
+.tests-valo .v-csslayout-v-component-group {
+  white-space: nowrap;
+  position: relative; }
+  .tests-valo .v-csslayout-v-component-group .v-widget ~ .v-widget:not(:last-child) {
+    border-radius: 0; }
+  .tests-valo .v-csslayout-v-component-group .v-widget:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0; }
+  .tests-valo .v-csslayout-v-component-group .v-widget:first-child,
+  .tests-valo .v-csslayout-v-component-group .v-caption:first-child + .v-widget {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0; }
+  .tests-valo .v-csslayout-v-component-group .v-widget ~ .v-widget.first.first {
+    border-radius: 4px 0 0 4px; }
+  .tests-valo .v-csslayout-v-component-group .v-widget ~ .v-widget.last.last {
+    border-radius: 0 4px 4px 0; }
+  .tests-valo .v-csslayout-v-component-group .v-widget {
+    vertical-align: middle;
+    margin-left: -1px; }
+    .tests-valo .v-csslayout-v-component-group .v-widget:first-child {
+      margin-left: 0; }
+    .tests-valo .v-csslayout-v-component-group .v-widget:focus, .tests-valo .v-csslayout-v-component-group .v-widget[class*="focus"],
+    .tests-valo .v-csslayout-v-component-group .v-widget [class*="focus"] {
+      position: relative;
+      z-index: 5; }
+.tests-valo .wrapping {
+  white-space: normal !important; }
+  .tests-valo .wrapping > .v-spacing + .v-slot, .tests-valo .wrapping > .v-slot:first-child {
+    margin-bottom: 12px; }
+  .tests-valo .wrapping > .v-slot:first-child:last-child {
+    margin-bottom: 0; }
+.tests-valo .v-Notification.success,
+.tests-valo .v-Notification.failure {
+  background: #fff;
+  color: #555;
+  border: 2px solid #2c9720; }
+  .tests-valo .v-Notification.success h1,
+  .tests-valo .v-Notification.failure h1 {
+    color: #2c9720;
+    font-weight: 400; }
+    .tests-valo .v-Notification.success h1:before,
+    .tests-valo .v-Notification.failure h1:before {
+      font-family: FontAwesome;
+      content: "\f00c";
+      margin-right: .5em; }
+  .tests-valo .v-Notification.success.bar,
+  .tests-valo .v-Notification.failure.bar {
+    margin: -2px !important; }
+.tests-valo .v-Notification.failure {
+  border-color: #ed473b; }
+  .tests-valo .v-Notification.failure h1 {
+    color: #ed473b; }
+    .tests-valo .v-Notification.failure h1:before {
+      content: "\f05e"; }
+.tests-valo .v-label-success,
+.tests-valo .v-label-failure {
+  background: #fff;
+  color: #555;
+  border: 2px solid #2c9720;
+  border-radius: 4px;
+  padding: 7px 19px 7px 37px;
+  font-weight: 400;
+  font-size: 15px; }
+  .tests-valo .v-label-success:before,
+  .tests-valo .v-label-failure:before {
+    font-family: FontAwesome;
+    content: "\f00c";
+    margin-right: .5em;
+    margin-left: -19px;
+    color: #2c9720; }
+.tests-valo .v-label-failure {
+  border-color: #ed473b; }
+  .tests-valo .v-label-failure:before {
+    content: "\f05e";
+    color: #ed473b; }
+.tests-valo .v-panel-caption.v-horizontallayout {
+  height: auto !important;
+  line-height: 0; }
+  .tests-valo .v-panel-caption.v-horizontallayout .v-slot {
+    vertical-align: middle; }
+  .tests-valo .v-panel-caption.v-horizontallayout .v-label {
+    line-height: 37px; }
+.tests-valo .v-select-optiongroup-horizontal {
+  white-space: nowrap; }
+  .tests-valo .v-select-optiongroup-horizontal .v-radiobutton,
+  .tests-valo .v-select-optiongroup-horizontal .v-checkbox {
+    display: inline-block; }
+  .tests-valo .v-select-optiongroup-horizontal.v-has-width {
+    white-space: normal; }
+    .tests-valo .v-select-optiongroup-horizontal.v-has-width label {
+      white-space: nowrap; }
+.tests-valo .v-table-no-stripes .v-table-row,
+.tests-valo .v-table-no-stripes .v-table-row-odd {
+  background: transparent; }
+.tests-valo .v-table-no-vertical-lines .v-table-cell-content,
+.tests-valo .v-table-no-vertical-lines [class*="row"].v-selected .v-table-cell-content {
+  border-left: none;
+  border-right: none;
+  padding-left: 13px;
+  padding-right: 13px; }
+.tests-valo .v-table-no-horizontal-lines .v-table-cell-content,
+.tests-valo .v-table-no-horizontal-lines [class*="row"].v-selected .v-table-cell-content {
+  border-top: none;
+  border-bottom: none; }
+.tests-valo .v-table-no-header .v-table-header-wrap {
+  display: none; }
+.tests-valo .v-table-borderless .v-table-header-wrap,
+.tests-valo .v-table-borderless .v-table-footer-wrap,
+.tests-valo .v-table-borderless .v-table-header-drag,
+.tests-valo .v-table-borderless .v-table-body {
+  border: none; }
+.tests-valo .v-table-borderless .v-table-header-wrap {
+  border-bottom: 1px solid #dfdfdf; }
+.tests-valo .v-table-borderless .v-table-footer-wrap {
+  border-top: 1px solid #dfdfdf; }
+.tests-valo .v-table-compact .v-table-header-wrap,
+.tests-valo .v-table-compact .v-table-footer-wrap,
+.tests-valo .v-table-compact .v-table-header-drag,
+.tests-valo .v-table-small .v-table-header-wrap,
+.tests-valo .v-table-small .v-table-footer-wrap,
+.tests-valo .v-table-small .v-table-header-drag {
+  font-size: 14px; }
+.tests-valo .v-table-compact .v-table-footer-container,
+.tests-valo .v-table-small .v-table-footer-container {
+  padding-top: 7px;
+  padding-bottom: 8px;
+  padding-right: 7px; }
+.tests-valo .v-table-compact .v-table-caption-container,
+.tests-valo .v-table-compact .v-table-header-drag,
+.tests-valo .v-table-small .v-table-caption-container,
+.tests-valo .v-table-small .v-table-header-drag {
+  padding-top: 8px;
+  padding-bottom: 7px;
+  padding-left: 6px;
+  padding-right: 6px; }
+.tests-valo .v-table-compact .v-table-resizer,
+.tests-valo .v-table-small .v-table-resizer {
+  height: 30px; }
+.tests-valo .v-table-compact .v-table-cell-wrapper,
+.tests-valo .v-table-small .v-table-cell-wrapper {
+  padding: 7px 0; }
+.tests-valo .v-table-compact .v-table-cell-content,
+.tests-valo .v-table-small .v-table-cell-content {
+  padding: 0 6px; }
+  .tests-valo .v-table-compact .v-table-cell-content:first-child,
+  .tests-valo .v-table-small .v-table-cell-content:first-child {
+    padding-left: 7px; }
+.tests-valo .v-table-compact .v-table-header-cell-asc .v-table-sort-indicator,
+.tests-valo .v-table-compact .v-table-header-cell-desc .v-table-sort-indicator,
+.tests-valo .v-table-small .v-table-header-cell-asc .v-table-sort-indicator,
+.tests-valo .v-table-small .v-table-header-cell-desc .v-table-sort-indicator {
+  height: 30px;
+  line-height: 30px; }
+.tests-valo .v-table-compact .v-table-header-drag,
+.tests-valo .v-table-small .v-table-header-drag {
+  margin-top: -15px; }
+.tests-valo .v-table-compact .v-table-row-drag-middle td:first-child:before,
+.tests-valo .v-table-small .v-table-row-drag-middle td:first-child:before {
+  height: 31px; }
+.tests-valo .v-table-small {
+  font-size: 13px; }
+.tests-valo .v-accordion-borderless {
+  border: none;
+  border-radius: 0;
+  box-shadow: none; }
+  .tests-valo .v-accordion-borderless > .v-accordion-item {
+    border-radius: 0; }
+.tests-valo .v-slot-valo-menu {
+  position: fixed; }
+.tests-valo .valo-menu {
+  position: fixed;
+  height: 100%;
+  overflow: auto;
+  padding-bottom: 37px;
+  background-color: #646464;
+  background-image: -webkit-linear-gradient(right, #5c5c5c 0%, #646464 9px);
+  background-image: linear-gradient(to left,#5c5c5c 0%, #646464 9px);
+  color: #e0e0e0;
+  font-size: 14px;
+  line-height: 30px;
+  border-right: 1px solid #525252; }
+  .tests-valo .valo-menu .valo-menu-title,
+  .tests-valo .valo-menu .valo-menu-subtitle,
+  .tests-valo .valo-menu .valo-menu-item {
+    display: block;
+    line-height: inherit; }
+  .tests-valo .valo-menu .valo-menu-title {
+    line-height: 1.2;
+    background-color: #197de1;
+    background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
+    background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
+    color: white;
+    text-shadow: 0 -1px 0 #197de1;
+    padding: 12px 19px;
+    font-size: 0.9em;
+    border-bottom: 1px solid #1467b9;
+    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05); }
+    .tests-valo .valo-menu .valo-menu-title .v-menubar {
+      background: transparent;
+      border-color: #1467b9;
+      color: inherit;
+      box-shadow: none;
+      text-shadow: inherit; }
+    .tests-valo .valo-menu .valo-menu-title .v-menubar-menuitem {
+      background: transparent;
+      box-shadow: inset 0 1px 0 #4595e5, inset 0 -1px 0 #166ccd;
+      text-shadow: inherit;
+      font-size: 16px;
+      border-color: inherit; }
+  .tests-valo .valo-menu .valo-menu-subtitle {
+    color: #b1b1b1;
+    margin: 7px 0 7px 19px;
+    border-bottom: 1px solid #5b5b5b;
+    position: relative; }
+    .tests-valo .valo-menu .valo-menu-subtitle .badge {
+      position: absolute;
+      right: 19px;
+      color: #7caee0; }
+  .tests-valo .valo-menu .valo-menu-item {
+    outline: none;
+    font-weight: 400;
+    padding: 0 37px 0 19px;
+    cursor: pointer;
+    position: relative; }
+    .tests-valo .valo-menu .valo-menu-item:before {
+      content: "";
+      background: #4396ea;
+      position: absolute;
+      left: 0;
+      height: 100%;
+      width: 0;
+      border-radius: 0 4px 4px 0;
+      -webkit-transition: width 300ms;
+      -moz-transition: width 300ms;
+      transition: width 300ms; }
+    .tests-valo .valo-menu .valo-menu-item:hover, .tests-valo .valo-menu .valo-menu-item.selected {
+      color: white; }
+    .tests-valo .valo-menu .valo-menu-item.selected:before {
+      width: 5px; }
+.tests-valo .valo-menu .v-checkbox {
+  margin: 19px;
+  font-weight: 400; }
+.tests-valo .view {
+  min-height: 600px; }
+.tests-valo .v-textfield-color1 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  margin: 0;
+  font: inherit;
+  font-weight: 400;
+  line-height: normal;
+  height: 37px;
+  border-radius: 4px;
+  padding: 4px 9px;
+  border: 1px solid #4b4e54;
+  background: #5c5f66;
+  color: #dedfe0;
+  box-shadow: inset 0 1px 0 #5a5d63, 0 1px 0 rgba(255, 255, 255, 0.1);
+  -webkit-transition: box-shadow 180ms, border 180ms;
+  -moz-transition: box-shadow 180ms, border 180ms;
+  transition: box-shadow 180ms, border 180ms; }
+  .tests-valo .v-textfield-color1.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+  .tests-valo .v-textfield-color1:focus {
+    outline: none;
+    -webkit-transition: none;
+    -moz-transition: none;
+    transition: none;
+    border-color: #197de1;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #5a5d63, 0 1px 0 rgba(255, 255, 255, 0.1); }
+  .tests-valo .v-textfield-color1.v-textfield-prompt, .tests-valo .v-textfield-color1.v-textarea-prompt {
+    color: #9a9ea6; }
+.tests-valo .v-textfield-color2 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  margin: 0;
+  font: inherit;
+  font-weight: 400;
+  line-height: normal;
+  height: 37px;
+  border-radius: 4px;
+  padding: 4px 9px;
+  border: 1px solid #329b15;
+  background: #3dbc1a;
+  color: #daefd4;
+  box-shadow: inset 0 1px 0 #3db51a, 0 1px 0 rgba(255, 255, 255, 0.1);
+  -webkit-transition: box-shadow 180ms, border 180ms;
+  -moz-transition: box-shadow 180ms, border 180ms;
+  transition: box-shadow 180ms, border 180ms; }
+  .tests-valo .v-textfield-color2.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+  .tests-valo .v-textfield-color2:focus {
+    outline: none;
+    -webkit-transition: none;
+    -moz-transition: none;
+    transition: none;
+    border-color: #197de1;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #3db51a, 0 1px 0 rgba(255, 255, 255, 0.1); }
+  .tests-valo .v-textfield-color2.v-textfield-prompt, .tests-valo .v-textfield-color2.v-textarea-prompt {
+    color: #98ef80; }
+.tests-valo .v-textfield-color3 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  margin: 0;
+  font: inherit;
+  font-weight: 400;
+  line-height: normal;
+  height: 37px;
+  border-radius: 4px;
+  padding: 4px 9px;
+  border: 1px solid #adc9c8;
+  background: #d2f4f3;
+  color: #285755;
+  box-shadow: inset 0 1px 0 #cbf1f0, 0 1px 0 rgba(255, 255, 255, 0.1);
+  -webkit-transition: box-shadow 180ms, border 180ms;
+  -moz-transition: box-shadow 180ms, border 180ms;
+  transition: box-shadow 180ms, border 180ms; }
+  .tests-valo .v-textfield-color3.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+  .tests-valo .v-textfield-color3:focus {
+    outline: none;
+    -webkit-transition: none;
+    -moz-transition: none;
+    transition: none;
+    border-color: #197de1;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #cbf1f0, 0 1px 0 rgba(255, 255, 255, 0.1); }
+  .tests-valo .v-textfield-color3.v-textfield-prompt, .tests-valo .v-textfield-color3.v-textarea-prompt {
+    color: #6db5b4; }
+.tests-valo .v-textarea-color1 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  margin: 0;
+  font: inherit;
+  font-weight: 400;
+  line-height: normal;
+  height: 37px;
+  border-radius: 4px;
+  padding: 6px;
+  border: 1px solid #4b4e54;
+  background: #5c5f66;
+  color: #dedfe0;
+  box-shadow: inset 0 1px 0 #5a5d63, 0 1px 0 rgba(255, 255, 255, 0.1);
+  -webkit-transition: box-shadow 180ms, border 180ms;
+  -moz-transition: box-shadow 180ms, border 180ms;
+  transition: box-shadow 180ms, border 180ms;
+  height: auto;
+  resize: none; }
+  .tests-valo .v-textarea-color1.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+  .tests-valo .v-textarea-color1:focus {
+    outline: none;
+    -webkit-transition: none;
+    -moz-transition: none;
+    transition: none;
+    border-color: #197de1;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #5a5d63, 0 1px 0 rgba(255, 255, 255, 0.1); }
+  .tests-valo .v-textarea-color1.v-textfield-prompt, .tests-valo .v-textarea-color1.v-textarea-prompt {
+    color: #9a9ea6; }
+.tests-valo .v-textarea-color2 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  margin: 0;
+  font: inherit;
+  font-weight: 400;
+  line-height: normal;
+  height: 37px;
+  border-radius: 4px;
+  padding: 6px;
+  border: 1px solid #329b15;
+  background: #3dbc1a;
+  color: #daefd4;
+  box-shadow: inset 0 1px 0 #3db51a, 0 1px 0 rgba(255, 255, 255, 0.1);
+  -webkit-transition: box-shadow 180ms, border 180ms;
+  -moz-transition: box-shadow 180ms, border 180ms;
+  transition: box-shadow 180ms, border 180ms;
+  height: auto;
+  resize: none; }
+  .tests-valo .v-textarea-color2.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+  .tests-valo .v-textarea-color2:focus {
+    outline: none;
+    -webkit-transition: none;
+    -moz-transition: none;
+    transition: none;
+    border-color: #197de1;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #3db51a, 0 1px 0 rgba(255, 255, 255, 0.1); }
+  .tests-valo .v-textarea-color2.v-textfield-prompt, .tests-valo .v-textarea-color2.v-textarea-prompt {
+    color: #98ef80; }
+.tests-valo .v-textarea-color3 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  margin: 0;
+  font: inherit;
+  font-weight: 400;
+  line-height: normal;
+  height: 37px;
+  border-radius: 4px;
+  padding: 6px;
+  border: 1px solid #adc9c8;
+  background: #d2f4f3;
+  color: #285755;
+  box-shadow: inset 0 1px 0 #cbf1f0, 0 1px 0 rgba(255, 255, 255, 0.1);
+  -webkit-transition: box-shadow 180ms, border 180ms;
+  -moz-transition: box-shadow 180ms, border 180ms;
+  transition: box-shadow 180ms, border 180ms;
+  height: auto;
+  resize: none; }
+  .tests-valo .v-textarea-color3.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+  .tests-valo .v-textarea-color3:focus {
+    outline: none;
+    -webkit-transition: none;
+    -moz-transition: none;
+    transition: none;
+    border-color: #197de1;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #cbf1f0, 0 1px 0 rgba(255, 255, 255, 0.1); }
+  .tests-valo .v-textarea-color3.v-textfield-prompt, .tests-valo .v-textarea-color3.v-textarea-prompt {
+    color: #6db5b4; }
+.tests-valo .v-datefield-color1 {
+  height: 37px;
+  border-radius: 4px; }
+  .tests-valo .v-datefield-color1 .v-datefield-textfield {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    margin: 0;
+    font: inherit;
+    font-weight: 400;
+    line-height: normal;
+    height: 37px;
+    border-radius: 4px;
+    padding: 4px 9px;
+    border: 1px solid #4b4e54;
+    background: #5c5f66;
+    color: #dedfe0;
+    box-shadow: inset 0 1px 0 #5a5d63, 0 1px 0 rgba(255, 255, 255, 0.1);
+    -webkit-transition: box-shadow 180ms, border 180ms;
+    -moz-transition: box-shadow 180ms, border 180ms;
+    transition: box-shadow 180ms, border 180ms;
+    padding-left: 44.4px;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit; }
+    .tests-valo .v-datefield-color1 .v-datefield-textfield.v-disabled {
+      opacity: 0.5;
+      filter: alpha(opacity=50); }
+    .tests-valo .v-datefield-color1 .v-datefield-textfield:focus {
+      outline: none;
+      -webkit-transition: none;
+      -moz-transition: none;
+      transition: none;
+      border-color: #197de1;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #5a5d63, 0 1px 0 rgba(255, 255, 255, 0.1); }
+    .tests-valo .v-datefield-color1 .v-datefield-textfield.v-textfield-prompt, .tests-valo .v-datefield-color1 .v-datefield-textfield.v-textarea-prompt {
+      color: #9a9ea6; }
+  .tests-valo .v-datefield-color1.v-datefield-prompt > .v-datefield-textfield {
+    color: #9a9ea6; }
+  .tests-valo .v-datefield-color1 .v-datefield-button {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-touch-callout: none;
+    cursor: pointer;
+    -webkit-appearance: none;
+    background: transparent;
+    border: none;
+    padding: 0;
+    position: absolute;
+    z-index: 10;
+    top: 1px;
+    bottom: 1px;
+    left: 1px;
+    width: 37px;
+    line-height: 35px;
+    text-align: center;
+    cursor: pointer;
+    font: inherit;
+    border-right: 1px solid #53565d;
+    outline: none;
+    margin: 0;
+    border-radius: 3px 0 0 3px; }
+    .tests-valo .v-datefield-color1 .v-datefield-button:before {
+      font-family: FontAwesome;
+      content: "\f073";
+      color: #dedfe0;
+      color: #9d9fa3;
+      -webkit-transition: color 140ms;
+      -moz-transition: color 140ms;
+      transition: color 140ms; }
+    .tests-valo .v-datefield-color1 .v-datefield-button:hover:before {
+      color: #dedfe0; }
+    .tests-valo .v-datefield-color1 .v-datefield-button:active:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: rgba(44, 47, 53, 0.2);
+      border-radius: inherit; }
+  .tests-valo .v-datefield-color1.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+    .tests-valo .v-datefield-color1.v-disabled .v-datefield-button {
+      cursor: default;
+      pointer-events: none; }
+      .tests-valo .v-datefield-color1.v-disabled .v-datefield-button:active:after {
+        display: none; }
+  .tests-valo .v-datefield-color1.v-readonly .v-datefield-textfield {
+    background: transparent;
+    box-shadow: none; }
+    .tests-valo .v-datefield-color1.v-readonly .v-datefield-textfield:focus {
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-datefield-color1.v-readonly .v-datefield-button {
+    cursor: default;
+    pointer-events: none; }
+    .tests-valo .v-datefield-color1.v-readonly .v-datefield-button:active:after {
+      display: none; }
+.tests-valo .v-datefield-color2 {
+  height: 37px;
+  border-radius: 4px; }
+  .tests-valo .v-datefield-color2 .v-datefield-textfield {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    margin: 0;
+    font: inherit;
+    font-weight: 400;
+    line-height: normal;
+    height: 37px;
+    border-radius: 4px;
+    padding: 4px 9px;
+    border: 1px solid #329b15;
+    background: #3dbc1a;
+    color: #daefd4;
+    box-shadow: inset 0 1px 0 #3db51a, 0 1px 0 rgba(255, 255, 255, 0.1);
+    -webkit-transition: box-shadow 180ms, border 180ms;
+    -moz-transition: box-shadow 180ms, border 180ms;
+    transition: box-shadow 180ms, border 180ms;
+    padding-left: 44.4px;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit; }
+    .tests-valo .v-datefield-color2 .v-datefield-textfield.v-disabled {
+      opacity: 0.5;
+      filter: alpha(opacity=50); }
+    .tests-valo .v-datefield-color2 .v-datefield-textfield:focus {
+      outline: none;
+      -webkit-transition: none;
+      -moz-transition: none;
+      transition: none;
+      border-color: #197de1;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #3db51a, 0 1px 0 rgba(255, 255, 255, 0.1); }
+    .tests-valo .v-datefield-color2 .v-datefield-textfield.v-textfield-prompt, .tests-valo .v-datefield-color2 .v-datefield-textfield.v-textarea-prompt {
+      color: #98ef80; }
+  .tests-valo .v-datefield-color2.v-datefield-prompt > .v-datefield-textfield {
+    color: #98ef80; }
+  .tests-valo .v-datefield-color2 .v-datefield-button {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-touch-callout: none;
+    cursor: pointer;
+    -webkit-appearance: none;
+    background: transparent;
+    border: none;
+    padding: 0;
+    position: absolute;
+    z-index: 10;
+    top: 1px;
+    bottom: 1px;
+    left: 1px;
+    width: 37px;
+    line-height: 35px;
+    text-align: center;
+    cursor: pointer;
+    font: inherit;
+    border-right: 1px solid #37ab17;
+    outline: none;
+    margin: 0;
+    border-radius: 3px 0 0 3px; }
+    .tests-valo .v-datefield-color2 .v-datefield-button:before {
+      font-family: FontAwesome;
+      content: "\f073";
+      color: #daefd4;
+      color: #8bd577;
+      -webkit-transition: color 140ms;
+      -moz-transition: color 140ms;
+      transition: color 140ms; }
+    .tests-valo .v-datefield-color2 .v-datefield-button:hover:before {
+      color: #daefd4; }
+    .tests-valo .v-datefield-color2 .v-datefield-button:active:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: rgba(25, 104, 3, 0.2);
+      border-radius: inherit; }
+  .tests-valo .v-datefield-color2.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+    .tests-valo .v-datefield-color2.v-disabled .v-datefield-button {
+      cursor: default;
+      pointer-events: none; }
+      .tests-valo .v-datefield-color2.v-disabled .v-datefield-button:active:after {
+        display: none; }
+  .tests-valo .v-datefield-color2.v-readonly .v-datefield-textfield {
+    background: transparent;
+    box-shadow: none; }
+    .tests-valo .v-datefield-color2.v-readonly .v-datefield-textfield:focus {
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-datefield-color2.v-readonly .v-datefield-button {
+    cursor: default;
+    pointer-events: none; }
+    .tests-valo .v-datefield-color2.v-readonly .v-datefield-button:active:after {
+      display: none; }
+.tests-valo .v-datefield-color3 {
+  height: 37px;
+  border-radius: 4px; }
+  .tests-valo .v-datefield-color3 .v-datefield-textfield {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    margin: 0;
+    font: inherit;
+    font-weight: 400;
+    line-height: normal;
+    height: 37px;
+    border-radius: 4px;
+    padding: 4px 9px;
+    border: 1px solid #adc9c8;
+    background: #d2f4f3;
+    color: #285755;
+    box-shadow: inset 0 1px 0 #cbf1f0, 0 1px 0 rgba(255, 255, 255, 0.1);
+    -webkit-transition: box-shadow 180ms, border 180ms;
+    -moz-transition: box-shadow 180ms, border 180ms;
+    transition: box-shadow 180ms, border 180ms;
+    padding-left: 44.4px;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit; }
+    .tests-valo .v-datefield-color3 .v-datefield-textfield.v-disabled {
+      opacity: 0.5;
+      filter: alpha(opacity=50); }
+    .tests-valo .v-datefield-color3 .v-datefield-textfield:focus {
+      outline: none;
+      -webkit-transition: none;
+      -moz-transition: none;
+      transition: none;
+      border-color: #197de1;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #cbf1f0, 0 1px 0 rgba(255, 255, 255, 0.1); }
+    .tests-valo .v-datefield-color3 .v-datefield-textfield.v-textfield-prompt, .tests-valo .v-datefield-color3 .v-datefield-textfield.v-textarea-prompt {
+      color: #6db5b4; }
+  .tests-valo .v-datefield-color3.v-datefield-prompt > .v-datefield-textfield {
+    color: #6db5b4; }
+  .tests-valo .v-datefield-color3 .v-datefield-button {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-touch-callout: none;
+    cursor: pointer;
+    -webkit-appearance: none;
+    background: transparent;
+    border: none;
+    padding: 0;
+    position: absolute;
+    z-index: 10;
+    top: 1px;
+    bottom: 1px;
+    left: 1px;
+    width: 37px;
+    line-height: 35px;
+    text-align: center;
+    cursor: pointer;
+    font: inherit;
+    border-right: 1px solid #bfdedd;
+    outline: none;
+    margin: 0;
+    border-radius: 3px 0 0 3px; }
+    .tests-valo .v-datefield-color3 .v-datefield-button:before {
+      font-family: FontAwesome;
+      content: "\f073";
+      color: #285755;
+      color: #7da5a4;
+      -webkit-transition: color 140ms;
+      -moz-transition: color 140ms;
+      transition: color 140ms; }
+    .tests-valo .v-datefield-color3 .v-datefield-button:hover:before {
+      color: #285755; }
+    .tests-valo .v-datefield-color3 .v-datefield-button:active:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: rgba(18, 209, 204, 0.2);
+      border-radius: inherit; }
+  .tests-valo .v-datefield-color3.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+    .tests-valo .v-datefield-color3.v-disabled .v-datefield-button {
+      cursor: default;
+      pointer-events: none; }
+      .tests-valo .v-datefield-color3.v-disabled .v-datefield-button:active:after {
+        display: none; }
+  .tests-valo .v-datefield-color3.v-readonly .v-datefield-textfield {
+    background: transparent;
+    box-shadow: none; }
+    .tests-valo .v-datefield-color3.v-readonly .v-datefield-textfield:focus {
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-datefield-color3.v-readonly .v-datefield-button {
+    cursor: default;
+    pointer-events: none; }
+    .tests-valo .v-datefield-color3.v-readonly .v-datefield-button:active:after {
+      display: none; }
+.tests-valo .v-filterselect-color1 {
+  height: 37px;
+  border-radius: 4px; }
+  .tests-valo .v-filterselect-color1 .v-filterselect-input {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    margin: 0;
+    font: inherit;
+    font-weight: 400;
+    line-height: normal;
+    height: 37px;
+    border-radius: 4px;
+    padding: 4px 9px;
+    border: 1px solid #4b4e54;
+    background: #5c5f66;
+    color: #dedfe0;
+    box-shadow: inset 0 1px 0 #5a5d63, 0 1px 0 rgba(255, 255, 255, 0.1);
+    -webkit-transition: box-shadow 180ms, border 180ms;
+    -moz-transition: box-shadow 180ms, border 180ms;
+    transition: box-shadow 180ms, border 180ms;
+    width: 100% !important;
+    height: 100%;
+    padding-right: 44px;
+    border-radius: inherit; }
+    .tests-valo .v-filterselect-color1 .v-filterselect-input.v-disabled {
+      opacity: 0.5;
+      filter: alpha(opacity=50); }
+    .tests-valo .v-filterselect-color1 .v-filterselect-input:focus {
+      outline: none;
+      -webkit-transition: none;
+      -moz-transition: none;
+      transition: none;
+      border-color: #197de1;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #5a5d63, 0 1px 0 rgba(255, 255, 255, 0.1); }
+    .tests-valo .v-filterselect-color1 .v-filterselect-input.v-textfield-prompt, .tests-valo .v-filterselect-color1 .v-filterselect-input.v-textarea-prompt {
+      color: #9a9ea6; }
+  .tests-valo .v-filterselect-color1 .v-icon + .v-filterselect-input {
+    padding-left: 37px; }
+  .tests-valo .v-filterselect-color1 img.v-icon {
+    max-height: 37px;
+    margin-left: 9px; }
+  .tests-valo .v-filterselect-color1 span.v-icon {
+    color: #dedfe0;
+    width: 37px; }
+  .tests-valo .v-filterselect-color1.v-filterselect-prompt > .v-filterselect-input {
+    color: #9a9ea6; }
+  .tests-valo .v-filterselect-color1 .v-filterselect-button {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-touch-callout: none;
+    cursor: pointer;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    bottom: 1px;
+    width: 37px;
+    cursor: pointer;
+    border-left: 1px solid #53565d;
+    border-radius: 0 3px 3px 0; }
+    .v-ie8 .tests-valo .v-filterselect-color1 .v-filterselect-button {
+      background-color: #5c5f66; }
+    .tests-valo .v-filterselect-color1 .v-filterselect-button:before {
+      font-family: FontAwesome;
+      content: "\f078";
+      color: #dedfe0;
+      color: #9d9fa3;
+      -webkit-transition: color 140ms;
+      -moz-transition: color 140ms;
+      transition: color 140ms;
+      position: absolute;
+      width: 37px;
+      text-align: center;
+      top: 50%;
+      line-height: 1;
+      margin-top: -.47em; }
+    .tests-valo .v-filterselect-color1 .v-filterselect-button:hover:before {
+      color: #dedfe0; }
+    .tests-valo .v-filterselect-color1 .v-filterselect-button:active:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border-radius: inherit;
+      background-color: rgba(44, 47, 53, 0.2); }
+  .tests-valo .v-filterselect-color1.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+    .tests-valo .v-filterselect-color1.v-disabled .v-filterselect-button {
+      cursor: default;
+      pointer-events: none; }
+      .tests-valo .v-filterselect-color1.v-disabled .v-filterselect-button:active:after {
+        display: none; }
+  .tests-valo .v-filterselect-color1.v-readonly .v-filterselect-input {
+    background: transparent;
+    box-shadow: none; }
+    .tests-valo .v-filterselect-color1.v-readonly .v-filterselect-input:focus {
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-filterselect-color1.v-readonly .v-filterselect-button {
+    cursor: default;
+    pointer-events: none; }
+    .tests-valo .v-filterselect-color1.v-readonly .v-filterselect-button:active:after {
+      display: none; }
+.tests-valo .v-filterselect-color2 {
+  height: 37px;
+  border-radius: 4px; }
+  .tests-valo .v-filterselect-color2 .v-filterselect-input {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    margin: 0;
+    font: inherit;
+    font-weight: 400;
+    line-height: normal;
+    height: 37px;
+    border-radius: 4px;
+    padding: 4px 9px;
+    border: 1px solid #329b15;
+    background: #3dbc1a;
+    color: #daefd4;
+    box-shadow: inset 0 1px 0 #3db51a, 0 1px 0 rgba(255, 255, 255, 0.1);
+    -webkit-transition: box-shadow 180ms, border 180ms;
+    -moz-transition: box-shadow 180ms, border 180ms;
+    transition: box-shadow 180ms, border 180ms;
+    width: 100% !important;
+    height: 100%;
+    padding-right: 44px;
+    border-radius: inherit; }
+    .tests-valo .v-filterselect-color2 .v-filterselect-input.v-disabled {
+      opacity: 0.5;
+      filter: alpha(opacity=50); }
+    .tests-valo .v-filterselect-color2 .v-filterselect-input:focus {
+      outline: none;
+      -webkit-transition: none;
+      -moz-transition: none;
+      transition: none;
+      border-color: #197de1;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #3db51a, 0 1px 0 rgba(255, 255, 255, 0.1); }
+    .tests-valo .v-filterselect-color2 .v-filterselect-input.v-textfield-prompt, .tests-valo .v-filterselect-color2 .v-filterselect-input.v-textarea-prompt {
+      color: #98ef80; }
+  .tests-valo .v-filterselect-color2 .v-icon + .v-filterselect-input {
+    padding-left: 37px; }
+  .tests-valo .v-filterselect-color2 img.v-icon {
+    max-height: 37px;
+    margin-left: 9px; }
+  .tests-valo .v-filterselect-color2 span.v-icon {
+    color: #daefd4;
+    width: 37px; }
+  .tests-valo .v-filterselect-color2.v-filterselect-prompt > .v-filterselect-input {
+    color: #98ef80; }
+  .tests-valo .v-filterselect-color2 .v-filterselect-button {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-touch-callout: none;
+    cursor: pointer;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    bottom: 1px;
+    width: 37px;
+    cursor: pointer;
+    border-left: 1px solid #37ab17;
+    border-radius: 0 3px 3px 0; }
+    .v-ie8 .tests-valo .v-filterselect-color2 .v-filterselect-button {
+      background-color: #3dbc1a; }
+    .tests-valo .v-filterselect-color2 .v-filterselect-button:before {
+      font-family: FontAwesome;
+      content: "\f078";
+      color: #daefd4;
+      color: #8bd577;
+      -webkit-transition: color 140ms;
+      -moz-transition: color 140ms;
+      transition: color 140ms;
+      position: absolute;
+      width: 37px;
+      text-align: center;
+      top: 50%;
+      line-height: 1;
+      margin-top: -.47em; }
+    .tests-valo .v-filterselect-color2 .v-filterselect-button:hover:before {
+      color: #daefd4; }
+    .tests-valo .v-filterselect-color2 .v-filterselect-button:active:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border-radius: inherit;
+      background-color: rgba(25, 104, 3, 0.2); }
+  .tests-valo .v-filterselect-color2.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+    .tests-valo .v-filterselect-color2.v-disabled .v-filterselect-button {
+      cursor: default;
+      pointer-events: none; }
+      .tests-valo .v-filterselect-color2.v-disabled .v-filterselect-button:active:after {
+        display: none; }
+  .tests-valo .v-filterselect-color2.v-readonly .v-filterselect-input {
+    background: transparent;
+    box-shadow: none; }
+    .tests-valo .v-filterselect-color2.v-readonly .v-filterselect-input:focus {
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-filterselect-color2.v-readonly .v-filterselect-button {
+    cursor: default;
+    pointer-events: none; }
+    .tests-valo .v-filterselect-color2.v-readonly .v-filterselect-button:active:after {
+      display: none; }
+.tests-valo .v-filterselect-color3 {
+  height: 37px;
+  border-radius: 4px; }
+  .tests-valo .v-filterselect-color3 .v-filterselect-input {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    margin: 0;
+    font: inherit;
+    font-weight: 400;
+    line-height: normal;
+    height: 37px;
+    border-radius: 4px;
+    padding: 4px 9px;
+    border: 1px solid #adc9c8;
+    background: #d2f4f3;
+    color: #285755;
+    box-shadow: inset 0 1px 0 #cbf1f0, 0 1px 0 rgba(255, 255, 255, 0.1);
+    -webkit-transition: box-shadow 180ms, border 180ms;
+    -moz-transition: box-shadow 180ms, border 180ms;
+    transition: box-shadow 180ms, border 180ms;
+    width: 100% !important;
+    height: 100%;
+    padding-right: 44px;
+    border-radius: inherit; }
+    .tests-valo .v-filterselect-color3 .v-filterselect-input.v-disabled {
+      opacity: 0.5;
+      filter: alpha(opacity=50); }
+    .tests-valo .v-filterselect-color3 .v-filterselect-input:focus {
+      outline: none;
+      -webkit-transition: none;
+      -moz-transition: none;
+      transition: none;
+      border-color: #197de1;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #cbf1f0, 0 1px 0 rgba(255, 255, 255, 0.1); }
+    .tests-valo .v-filterselect-color3 .v-filterselect-input.v-textfield-prompt, .tests-valo .v-filterselect-color3 .v-filterselect-input.v-textarea-prompt {
+      color: #6db5b4; }
+  .tests-valo .v-filterselect-color3 .v-icon + .v-filterselect-input {
+    padding-left: 37px; }
+  .tests-valo .v-filterselect-color3 img.v-icon {
+    max-height: 37px;
+    margin-left: 9px; }
+  .tests-valo .v-filterselect-color3 span.v-icon {
+    color: #285755;
+    width: 37px; }
+  .tests-valo .v-filterselect-color3.v-filterselect-prompt > .v-filterselect-input {
+    color: #6db5b4; }
+  .tests-valo .v-filterselect-color3 .v-filterselect-button {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-touch-callout: none;
+    cursor: pointer;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    bottom: 1px;
+    width: 37px;
+    cursor: pointer;
+    border-left: 1px solid #bfdedd;
+    border-radius: 0 3px 3px 0; }
+    .v-ie8 .tests-valo .v-filterselect-color3 .v-filterselect-button {
+      background-color: #d2f4f3; }
+    .tests-valo .v-filterselect-color3 .v-filterselect-button:before {
+      font-family: FontAwesome;
+      content: "\f078";
+      color: #285755;
+      color: #7da5a4;
+      -webkit-transition: color 140ms;
+      -moz-transition: color 140ms;
+      transition: color 140ms;
+      position: absolute;
+      width: 37px;
+      text-align: center;
+      top: 50%;
+      line-height: 1;
+      margin-top: -.47em; }
+    .tests-valo .v-filterselect-color3 .v-filterselect-button:hover:before {
+      color: #285755; }
+    .tests-valo .v-filterselect-color3 .v-filterselect-button:active:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border-radius: inherit;
+      background-color: rgba(18, 209, 204, 0.2); }
+  .tests-valo .v-filterselect-color3.v-disabled {
+    opacity: 0.5;
+    filter: alpha(opacity=50); }
+    .tests-valo .v-filterselect-color3.v-disabled .v-filterselect-button {
+      cursor: default;
+      pointer-events: none; }
+      .tests-valo .v-filterselect-color3.v-disabled .v-filterselect-button:active:after {
+        display: none; }
+  .tests-valo .v-filterselect-color3.v-readonly .v-filterselect-input {
+    background: transparent;
+    box-shadow: none; }
+    .tests-valo .v-filterselect-color3.v-readonly .v-filterselect-input:focus {
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-filterselect-color3.v-readonly .v-filterselect-button {
+    cursor: default;
+    pointer-events: none; }
+    .tests-valo .v-filterselect-color3.v-readonly .v-filterselect-button:active:after {
+      display: none; }
+.tests-valo .v-checkbox-color1 {
+  position: relative;
+  line-height: 19px;
+  white-space: nowrap; }
+  .tests-valo .v-checkbox-color1.v-has-width label {
+    white-space: normal; }
+  :root .tests-valo .v-checkbox-color1 {
+    padding-left: 25px; }
+    :root .tests-valo .v-checkbox-color1 label {
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      -webkit-touch-callout: none;
+      cursor: pointer; }
+  :root .tests-valo .v-checkbox-color1 > input {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+    left: .2em;
+    top: .2em;
+    z-index: 0;
+    margin: 0; }
+    :root .tests-valo .v-checkbox-color1 > input:focus ~ label:before {
+      border: 1px solid #4b4e54;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #787878, inset 0 -1px 0 #4e5157, 0 2px 3px rgba(0, 0, 0, 0.05); }
+    :root .tests-valo .v-checkbox-color1 > input ~ label:before, :root .tests-valo .v-checkbox-color1 > input ~ label:after {
+      content: "";
+      display: inline-block;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      width: 19px;
+      height: 19px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-radius: 4px;
+      font-size: 13px;
+      text-align: center; }
+    :root .tests-valo .v-checkbox-color1 > input ~ label:before {
+      height: 18.5px;
+      padding: 0 9px;
+      color: #efeff0;
+      font-weight: 400;
+      border-radius: 4px;
+      border: 1px solid #4b4e54;
+      border-top-color: #51545a;
+      border-bottom-color: #424449;
+      background-color: #5c5f66;
+      background-image: -webkit-linear-gradient(top, #63666e 2%, #505359 98%);
+      background-image: linear-gradient(to bottom,#63666e 2%, #505359 98%);
+      box-shadow: inset 0 1px 0 #787878, inset 0 -1px 0 #4e5157, 0 2px 3px rgba(0, 0, 0, 0.05);
+      text-shadow: 0 -1px 0 #5c5f66;
+      padding: 0;
+      height: 19px; }
+      :root .tests-valo .v-checkbox-color1 > input ~ label:before:after {
+        border: inherit;
+        top: -1px;
+        right: -1px;
+        bottom: -1px;
+        left: -1px; }
+      :root .tests-valo .v-checkbox-color1 > input ~ label:before:hover:after {
+        background-color: rgba(129, 133, 141, 0.1); }
+      :root .tests-valo .v-checkbox-color1 > input ~ label:before:focus:after {
+        border: inherit;
+        box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+      :root .tests-valo .v-checkbox-color1 > input ~ label:before:active:after {
+        background-color: rgba(44, 47, 53, 0.2); }
+    :root .tests-valo .v-checkbox-color1 > input ~ label:after {
+      content: "\f00c";
+      font-family: FontAwesome;
+      color: transparent;
+      -webkit-transition: color 100ms;
+      -moz-transition: color 100ms;
+      transition: color 100ms; }
+    :root .tests-valo .v-checkbox-color1 > input:active ~ label:after {
+      background-color: rgba(44, 47, 53, 0.2); }
+    :root .tests-valo .v-checkbox-color1 > input:checked ~ label:after {
+      color: white; }
+    :root .tests-valo .v-checkbox-color1 > input[disabled] ~ label,
+    :root .tests-valo .v-checkbox-color1 > input[disabled] ~ label .v-icon,
+    :root .tests-valo .v-checkbox-color1 > input[disabled] ~ .v-icon {
+      cursor: default; }
+    :root .tests-valo .v-checkbox-color1 > input[disabled] ~ label:before,
+    :root .tests-valo .v-checkbox-color1 > input[disabled] ~ label:after {
+      opacity: 0.5;
+      filter: alpha(opacity=50); }
+    :root .tests-valo .v-checkbox-color1 > input[disabled]:active ~ label:after {
+      background: transparent; }
+  .tests-valo .v-checkbox-color1 > .v-icon, .tests-valo .v-checkbox-color1 > label .v-icon {
+    margin: 0 6px 0 3px;
+    min-width: 1em;
+    cursor: pointer; }
+.tests-valo .v-checkbox-color2 {
+  position: relative;
+  line-height: 19px;
+  white-space: nowrap; }
+  .tests-valo .v-checkbox-color2.v-has-width label {
+    white-space: normal; }
+  :root .tests-valo .v-checkbox-color2 {
+    padding-left: 25px; }
+    :root .tests-valo .v-checkbox-color2 label {
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      -webkit-touch-callout: none;
+      cursor: pointer; }
+  :root .tests-valo .v-checkbox-color2 > input {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+    left: .2em;
+    top: .2em;
+    z-index: 0;
+    margin: 0; }
+    :root .tests-valo .v-checkbox-color2 > input:focus ~ label:before {
+      border: 1px solid #4c5e9e;
+      box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5), inset 0 1px 0 #8795c9, inset 0 -1px 0 #5062ad, 0 2px 3px rgba(0, 0, 0, 0.05); }
+    :root .tests-valo .v-checkbox-color2 > input ~ label:before, :root .tests-valo .v-checkbox-color2 > input ~ label:after {
+      content: "";
+      display: inline-block;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      width: 19px;
+      height: 19px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-radius: 4px;
+      font-size: 13px;
+      text-align: center; }
+    :root .tests-valo .v-checkbox-color2 > input ~ label:before {
+      height: 18.5px;
+      padding: 0 9px;
+      color: #f1f2f6;
+      font-weight: 400;
+      border-radius: 4px;
+      border: 1px solid #4c5e9e;
+      border-top-color: #5266a2;
+      border-bottom-color: #425292;
+      background-color: #5d73c0;
+      background-image: -webkit-linear-gradient(top, #647cc5 2%, #5164b2 98%);
+      background-image: linear-gradient(to bottom,#647cc5 2%, #5164b2 98%);
+      box-shadow: inset 0 1px 0 #8795c9, inset 0 -1px 0 #5062ad, 0 2px 3px rgba(0, 0, 0, 0.05);
+      text-shadow: 0 -1px 0 #5d73c0;
+      padding: 0;
+      height: 19px; }
+      :root .tests-valo .v-checkbox-color2 > input ~ label:before:after {
+        border: inherit;
+        top: -1px;
+        right: -1px;
+        bottom: -1px;
+        left: -1px; }
+      :root .tests-valo .v-checkbox-color2 > input ~ label:before:hover:after {
+        background-color: rgba(148, 163, 213, 0.1); }
+      :root .tests-valo .v-checkbox-color2 > input ~ label:before:focus:after {
+        border: inherit;
+        box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+      :root .tests-valo .v-checkbox-color2 > input ~ label:before:active:after {
+        background-color: rgba(22, 44, 120, 0.2); }
+    :root .tests-valo .v-checkbox-color2 > input ~ label:after {
+      content: "\f00c";
+      font-family: FontAwesome;
+      color: transparent;
+      -webkit-transition: color 100ms;
+      -moz-transition: color 100ms;
+      transition: color 100ms; }
+    :root .tests-valo .v-checkbox-color2 > input:active ~ label:after {
+      background-color: rgba(22, 44, 120, 0.2); }
+    :root .tests-valo .v-checkbox-color2 > input:checked ~ label:after {
+      color: white; }
+    :root .tests-valo .v-checkbox-color2 > input[disabled] ~ label,
+    :root .tests-valo .v-checkbox-color2 > input[disabled] ~ label .v-icon,
+    :root .tests-valo .v-checkbox-color2 > input[disabled] ~ .v-icon {
+      cursor: default; }
+    :root .tests-valo .v-checkbox-color2 > input[disabled] ~ label:before,
+    :root .tests-valo .v-checkbox-color2 > input[disabled] ~ label:after {
+      opacity: 0.5;
+      filter: alpha(opacity=50); }
+    :root .tests-valo .v-checkbox-color2 > input[disabled]:active ~ label:after {
+      background: transparent; }
+  .tests-valo .v-checkbox-color2 > .v-icon, .tests-valo .v-checkbox-color2 > label .v-icon {
+    margin: 0 6px 0 3px;
+    min-width: 1em;
+    cursor: pointer; }
+.tests-valo .v-slider-color1 .v-slider-handle:before {
+  color: #efeff0;
+  font-weight: 400;
+  border: 1px solid #4b4e54;
+  border-top-color: #51545a;
+  border-bottom-color: #424449;
+  background-color: #5c5f66;
+  background-image: -webkit-linear-gradient(top, #63666e 2%, #505359 98%);
+  background-image: linear-gradient(to bottom,#63666e 2%, #505359 98%);
+  box-shadow: inset 0 1px 0 #787878, inset 0 -1px 0 #4e5157, 0 2px 3px rgba(0, 0, 0, 0.05);
+  text-shadow: 0 -1px 0 #5c5f66; }
+  .tests-valo .v-slider-color1 .v-slider-handle:before:after {
+    border: inherit;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px; }
+  .tests-valo .v-slider-color1 .v-slider-handle:before:hover:after {
+    background-color: rgba(129, 133, 141, 0.1); }
+  .tests-valo .v-slider-color1 .v-slider-handle:before:focus:after {
+    border: inherit;
+    box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+  .tests-valo .v-slider-color1 .v-slider-handle:before:active:after {
+    background-color: rgba(44, 47, 53, 0.2); }
+.tests-valo .v-slider-color1 .v-slider-handle:after {
+  border: 1px solid #4b4e54;
+  border: inherit;
+  box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5); }
+.tests-valo .v-slider-color2 .v-slider-base {
+  border-radius: 4px;
+  height: 9px;
+  background-color: #3a9c20;
+  background-image: -webkit-linear-gradient(bottom, #3ea322 2%, #328e1b 98%);
+  background-image: linear-gradient(to top,#3ea322 2%, #328e1b 98%);
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  height: 6px; }
+.tests-valo .v-slider-color2.v-slider-vertical .v-slider-base {
+  background-color: #3a9c20;
+  background-image: -webkit-linear-gradient(right, #3ea322 2%, #328e1b 98%);
+  background-image: linear-gradient(to left,#3ea322 2%, #328e1b 98%); }
+.tests-valo .v-slider-color3 .v-slider-base:before {
+  border-color: #b5b518; }
+.tests-valo .v-slider-color3 .v-slider-base:after {
+  border-radius: 4px;
+  height: inherit;
+  background-color: #dcdc1e;
+  background-image: -webkit-linear-gradient(top, #dede20 2%, #d0d019 98%);
+  background-image: linear-gradient(to bottom,#dede20 2%, #d0d019 98%);
+  border: 1px solid #b5b518;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  max-width: 100%; }
+.tests-valo .v-slider-color3.v-slider-vertical .v-slider-base:after {
+  background-color: #dcdc1e;
+  background-image: -webkit-linear-gradient(left, #dede20 2%, #d0d019 98%);
+  background-image: linear-gradient(to right,#dede20 2%, #d0d019 98%); }
+.tests-valo .v-slider-no-indicator .v-slider-base:before,
+.tests-valo .v-slider-no-indicator .v-slider-base:after {
+  display: none; }
+.tests-valo .v-panel-caption-color1 {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 12px;
+  line-height: 36px;
+  border-bottom: 1px solid #53565d;
+  border-radius: 3px 3px 0 0;
+  background-color: #5c5f66;
+  background-image: -webkit-linear-gradient(top, #5d6068 2%, #595c62 98%);
+  background-image: linear-gradient(to bottom,#5d6068 2%, #595c62 98%);
+  color: #dedfe0;
+  font-weight: 400;
+  font-size: 14px;
+  box-shadow: inset 0 1px 0 #727272;
+  text-shadow: 0 -1px 0 #5c5f66; }
+.tests-valo .v-panel-caption-color2 {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 12px;
+  line-height: 36px;
+  border-bottom: 1px solid #37ab17;
+  border-radius: 3px 3px 0 0;
+  background-color: #3dbc1a;
+  background-image: -webkit-linear-gradient(top, #3ebd1a 2%, #3ab818 98%);
+  background-image: linear-gradient(to bottom,#3ebd1a 2%, #3ab818 98%);
+  color: #daefd4;
+  font-weight: 400;
+  font-size: 14px;
+  box-shadow: inset 0 1px 0 #50cd2d;
+  text-shadow: 0 -1px 0 #3dbc1a; }
+.tests-valo .v-panel-caption-color3 {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 12px;
+  line-height: 36px;
+  border-bottom: 1px solid #e78326;
+  border-radius: 3px 3px 0 0;
+  background-color: #fe902a;
+  background-image: -webkit-linear-gradient(top, #fe922a 2%, #fa8b28 98%);
+  background-image: linear-gradient(to bottom,#fe922a 2%, #fa8b28 98%);
+  color: #f6e9dd;
+  font-weight: 400;
+  font-size: 14px;
+  box-shadow: inset 0 1px 0 #fea255;
+  text-shadow: 0 -1px 0 #fe902a; }
+.tests-valo .v-splitpanel-vertical,
+.tests-valo .v-splitpanel-horizontal {
+  outline: 1px dotted rgba(128, 128, 128, 0.2); }
+.tests-valo .v-slider-ticks:before {
+  content: "";
+  height: 15%;
+  position: absolute;
+  background-color: transparent;
+  background-image: -webkit-linear-gradient(left, #dbdbdb 1px, transparent 1px);
+  background-image: linear-gradient(to right,#dbdbdb 1px, transparent 1px);
+  background-repeat: repeat-x;
+  background-size: 24.9% 100%;
+  left: 11px;
+  right: 11px; }
+.tests-valo .v-slider-ticks.v-slider-vertical:before {
+  height: auto;
+  width: 15%;
+  background-color: transparent;
+  background-image: -webkit-linear-gradient(top, #dbdbdb 1px, transparent 1px);
+  background-image: linear-gradient(to bottom,#dbdbdb 1px, transparent 1px);
+  background-repeat: repeat-y;
+  background-size: 100% 24.99%;
+  right: auto;
+  left: 0;
+  top: 11px;
+  bottom: 11px; }
diff --git a/WebContent/VAADIN/themes/tests-valo/styles.scss b/WebContent/VAADIN/themes/tests-valo/styles.scss
new file mode 100644
index 0000000000..2c825cc245
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-valo/styles.scss
@@ -0,0 +1,133 @@
+@import "default";
+// @import "flat";
+// @import "flat-dark";
+// @import "facebook";
+// @import "metro";
+// @import "dark";
+// @import "blueprint";
+
+
+@include valo-natural-page-scrolling;
+
+.tests-valo {
+  @include valo;
+
+  .valo-menu .v-checkbox {
+    margin: round($v-unit-size/2);
+    font-weight: 400;
+  }
+
+  .view {
+    min-height: 600px;
+  }
+
+  $color1: hsl(220, 5%, 38%);
+  $color2: #5d73c0;
+  $color3: #3dbc1a;
+  $color4: #d2f4f3;
+  $color5: #fe902a;
+  $colors: $color1, $color2, $color3, $color4, $color5;
+
+  .v-textfield-color1 {
+    @include valo-textfield-style($background-color: $color1);
+  }
+
+  .v-textfield-color2 {
+    @include valo-textfield-style($background-color: $color3);
+  }
+
+  .v-textfield-color3 {
+    @include valo-textfield-style($background-color: $color4);
+  }
+
+
+  .v-textarea-color1 {
+    @include valo-textarea-style($background-color: $color1);
+  }
+
+  .v-textarea-color2 {
+    @include valo-textarea-style($background-color: $color3);
+  }
+
+  .v-textarea-color3 {
+    @include valo-textarea-style($background-color: $color4);
+  }
+
+
+  .v-datefield-color1 {
+    @include valo-datefield-style($background-color: $color1);
+  }
+
+  .v-datefield-color2 {
+    @include valo-datefield-style($background-color: $color3);
+  }
+
+  .v-datefield-color3 {
+    @include valo-datefield-style($background-color: $color4);
+  }
+
+
+  .v-filterselect-color1 {
+    @include valo-combobox-style($background-color: $color1);
+  }
+
+  .v-filterselect-color2 {
+    @include valo-combobox-style($background-color: $color3);
+  }
+
+  .v-filterselect-color3 {
+    @include valo-combobox-style($background-color: $color4);
+  }
+
+
+  $copy: $v-selection-color;
+  $v-selection-color: white;
+  .v-checkbox-color1 {
+    @include valo-checkbox-style($background-color: $color1);
+  }
+
+  .v-checkbox-color2 {
+    @include valo-checkbox-style($background-color: $color2);
+  }
+  $v-selection-color: $copy;
+
+
+  .v-slider-color1 {
+    @include valo-slider-handle-style($background-color: $color1);
+  }
+
+  .v-slider-color2 {
+    @include valo-slider-track-style($background-color: $color3);
+  }
+
+  .v-slider-color3 {
+    @include valo-slider-indicator-style($background-color: #dcdc1e);
+  }
+
+  .v-slider-no-indicator {
+    @include valo-slider-no-indicator;
+  }
+
+
+  .v-panel-caption-color1 {
+    @include valo-panel-caption-style($background-color: $color1);
+  }
+
+  .v-panel-caption-color2 {
+    @include valo-panel-caption-style($background-color: $color3);
+  }
+
+  .v-panel-caption-color3 {
+    @include valo-panel-caption-style($background-color: $color5);
+  }
+
+  // Show splitpanel borders
+  .v-splitpanel-vertical,
+  .v-splitpanel-horizontal {
+    outline: 1px dotted rgba(gray, .2);
+  }
+
+  .v-slider-ticks {
+    @include valo-slider-ticks($tick-count: 5);
+  }
+}
diff --git a/uitest/src/com/vaadin/tests/themes/ValoThemeTest.java b/uitest/src/com/vaadin/tests/themes/ValoThemeTest.java
deleted file mode 100644
index 71c27eca4f..0000000000
--- a/uitest/src/com/vaadin/tests/themes/ValoThemeTest.java
+++ /dev/null
@@ -1,1756 +0,0 @@
-package com.vaadin.tests.themes;
-
-import java.util.ArrayList;
-import java.util.Arrays;
-import java.util.Collection;
-import java.util.Collections;
-import java.util.Date;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Locale;
-import java.util.Map.Entry;
-
-import com.vaadin.annotations.Theme;
-import com.vaadin.annotations.Title;
-import com.vaadin.data.Container;
-import com.vaadin.data.Container.Hierarchical;
-import com.vaadin.data.Item;
-import com.vaadin.data.Property.ValueChangeEvent;
-import com.vaadin.data.Property.ValueChangeListener;
-import com.vaadin.data.util.HierarchicalContainer;
-import com.vaadin.data.util.IndexedContainer;
-import com.vaadin.event.Action;
-import com.vaadin.event.Action.Handler;
-import com.vaadin.event.dd.DragAndDropEvent;
-import com.vaadin.event.dd.DropHandler;
-import com.vaadin.event.dd.acceptcriteria.AcceptAll;
-import com.vaadin.event.dd.acceptcriteria.AcceptCriterion;
-import com.vaadin.server.AbstractErrorMessage;
-import com.vaadin.server.ErrorMessage.ErrorLevel;
-import com.vaadin.server.ExternalResource;
-import com.vaadin.server.FontAwesome;
-import com.vaadin.server.Page;
-import com.vaadin.server.Resource;
-import com.vaadin.server.ThemeResource;
-import com.vaadin.server.UserError;
-import com.vaadin.server.VaadinRequest;
-import com.vaadin.shared.Position;
-import com.vaadin.shared.ui.datefield.Resolution;
-import com.vaadin.shared.ui.label.ContentMode;
-import com.vaadin.shared.ui.slider.SliderOrientation;
-import com.vaadin.ui.AbstractColorPicker.PopupStyle;
-import com.vaadin.ui.Accordion;
-import com.vaadin.ui.Button;
-import com.vaadin.ui.Button.ClickEvent;
-import com.vaadin.ui.Button.ClickListener;
-import com.vaadin.ui.CheckBox;
-import com.vaadin.ui.ColorPicker;
-import com.vaadin.ui.ComboBox;
-import com.vaadin.ui.Component;
-import com.vaadin.ui.CssLayout;
-import com.vaadin.ui.DateField;
-import com.vaadin.ui.HorizontalLayout;
-import com.vaadin.ui.HorizontalSplitPanel;
-import com.vaadin.ui.Label;
-import com.vaadin.ui.Link;
-import com.vaadin.ui.ListSelect;
-import com.vaadin.ui.MenuBar;
-import com.vaadin.ui.MenuBar.Command;
-import com.vaadin.ui.MenuBar.MenuItem;
-import com.vaadin.ui.NativeButton;
-import com.vaadin.ui.NativeSelect;
-import com.vaadin.ui.Notification;
-import com.vaadin.ui.OptionGroup;
-import com.vaadin.ui.Panel;
-import com.vaadin.ui.Slider;
-import com.vaadin.ui.TabSheet;
-import com.vaadin.ui.TabSheet.Tab;
-import com.vaadin.ui.Table;
-import com.vaadin.ui.Table.Align;
-import com.vaadin.ui.Table.TableDragMode;
-import com.vaadin.ui.TextArea;
-import com.vaadin.ui.TextField;
-import com.vaadin.ui.Tree;
-import com.vaadin.ui.Tree.TreeDragMode;
-import com.vaadin.ui.TreeTable;
-import com.vaadin.ui.TwinColSelect;
-import com.vaadin.ui.UI;
-import com.vaadin.ui.VerticalLayout;
-import com.vaadin.ui.VerticalSplitPanel;
-import com.vaadin.ui.Window;
-
-@Theme("valo")
-@Title("Valo Theme Test")
-public class ValoThemeTest extends UI implements Handler {
-
-    CssLayout root = new CssLayout();
-    CssLayout components = new CssLayout();
-    CssLayout menu = new CssLayout();
-
-    HashMap<Category, ArrayList<Link>> menuItems = new HashMap<Category, ArrayList<Link>>();
-
-    enum Category {
-        Common, Basic_Components, Component_Containers, Selection_Components, Inputs, Feedback, Other
-    }
-
-    Container tableData = generateContainer(200, false);
-
-    static final String CAPTION_PROPERTY = "caption";
-    static final String DESCRIPTION_PROPERTY = "description";
-    static final String ICON_PROPERTY = "icon";
-    static final String INDEX_PROPERTY = "index";
-
-    @SuppressWarnings("unchecked")
-    Container generateContainer(final int size, final boolean hierarchical) {
-        IndexedContainer container = hierarchical ? new HierarchicalContainer()
-                : new IndexedContainer();
-
-        container.addContainerProperty(CAPTION_PROPERTY, String.class, null);
-        container.addContainerProperty(ICON_PROPERTY, Resource.class, null);
-        container.addContainerProperty(INDEX_PROPERTY, Integer.class, null);
-        container
-                .addContainerProperty(DESCRIPTION_PROPERTY, String.class, null);
-        for (int i = 1; i < size + 1; i++) {
-            Item item = container.addItem(i);
-            item.getItemProperty(CAPTION_PROPERTY).setValue(nextString(true));
-            item.getItemProperty(INDEX_PROPERTY).setValue(i);
-            item.getItemProperty(DESCRIPTION_PROPERTY).setValue(
-                    nextString(false));
-            item.getItemProperty(ICON_PROPERTY).setValue(icon(false));
-        }
-        container.getItem(container.getIdByIndex(0))
-                .getItemProperty(ICON_PROPERTY).setValue(icon(false));
-
-        if (hierarchical) {
-            for (int i = 1; i < size + 1; i++) {
-                for (int j = 1; j < 5; j++) {
-                    String id = i + " -> " + j;
-                    Item child = container.addItem(id);
-                    child.getItemProperty(CAPTION_PROPERTY).setValue(
-                            getCaption());
-                    ((Hierarchical) container).setChildrenAllowed(id, true);
-                    ((Hierarchical) container).setParent(id, i);
-                }
-            }
-        }
-        return container;
-    }
-
-    @Override
-    protected void init(VaadinRequest request) {
-        // Show .v-app-loading badge
-        try {
-            Thread.sleep(3000);
-        } catch (InterruptedException e) {
-            e.printStackTrace();
-        }
-
-        container = generateContainer(200, true);
-        Collection<?> itemIds = container.getItemIds();
-        firstItemId = itemIds.iterator().next();
-
-        getPage().setTitle("Valo Theme Test");
-        setContent(root);
-        root.setWidth("100%");
-
-        root.addComponent(commonParts());
-
-        components.setWidth("100%");
-        root.addComponent(components);
-
-        for (int i = 1; i <= 1; i++) {
-            components.addComponent(components(i));
-        }
-        components.addStyleName("components-root");
-
-        // root.addComponentAsFirst(buildMenu());
-
-    }
-
-    CssLayout buildMenu() {
-        menu.setPrimaryStyleName("valo-menu");
-
-        Label title = new Label("Valo Theme");
-        title.setSizeUndefined();
-        title.setPrimaryStyleName("valo-menu-title");
-        menu.addComponent(title);
-
-        final CheckBox enabled = new CheckBox("Enabled", true);
-        enabled.setPrimaryStyleName("valo-menu-enabled");
-        menu.addComponent(enabled);
-        enabled.addValueChangeListener(new ValueChangeListener() {
-            @Override
-            public void valueChange(ValueChangeEvent event) {
-                components.setEnabled(enabled.getValue());
-            }
-        });
-
-        for (Entry<Category, ArrayList<Link>> entry : menuItems.entrySet()) {
-            Label caption = new Label(entry.getKey().toString()
-                    .replaceAll("_", " "));
-            caption.setSizeUndefined();
-            caption.setPrimaryStyleName("valo-menu-category");
-            menu.addComponent(caption);
-
-            for (Link link : entry.getValue()) {
-                menu.addComponent(link);
-                link.setPrimaryStyleName("valo-menu-item");
-            }
-        }
-
-        return menu;
-    }
-
-    VerticalLayout commonParts() {
-        final VerticalLayout root = new VerticalLayout();
-        root.setMargin(true);
-        root.addStyleName("common-parts");
-
-        /**
-         * Loading incidator
-         */
-        HorizontalLayout row = addSection(
-                root,
-                "Loading Indicator",
-                Category.Common,
-                "You can test the loading indicator by pressing the buttons. The theme also provides a mixin that you can use to include a spinner anywhere in your application.");
-
-        Button loading = new Button("Loading (800ms)…");
-        loading.addClickListener(new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                try {
-                    Thread.sleep(800);
-                } catch (InterruptedException e) {
-                }
-            }
-        });
-        row.addComponent(loading);
-
-        Button delay = new Button("Task Delayed (3s)…");
-        delay.addClickListener(new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                try {
-                    Thread.sleep(3000);
-                } catch (InterruptedException e) {
-                }
-            }
-        });
-        row.addComponent(delay);
-
-        Button wait = new Button("Please Wait (15s)…");
-        wait.addClickListener(new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                try {
-                    Thread.sleep(15000);
-                } catch (InterruptedException e) {
-                }
-            }
-        });
-        row.addComponent(wait);
-
-        /**
-         * Notifications
-         */
-
-        row = addSection(root, "Notifications", Category.Common, null);
-
-        final Notification notification = new Notification("Notification Title");
-
-        final Notification notification2 = new Notification(
-                "Notification Title");
-        notification2
-                .setDescription("A more informative message about what has happened. Nihil hic munitissimus habendi senatus locus, nihil horum? Inmensae subtilitatis, obscuris et malesuada fames. Hi omnes lingua, institutis, legibus inter se differunt.");
-
-        CssLayout group = new CssLayout();
-        group.addStyleName("v-component-group");
-        row.addComponent(group);
-        Button notify = new Button("Humanized", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                notification.setPosition(Position.MIDDLE_CENTER);
-                notification.setDelayMsec(-1);
-                notification.setStyleName("humanized");
-                notification.show(getPage());
-            }
-        });
-        group.addComponent(notify);
-
-        notify = new Button("+ description", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                notification2.setPosition(Position.TOP_LEFT);
-                notification2.setDelayMsec(-1);
-                notification2.setStyleName("humanized closable");
-                notification2.show(getPage());
-            }
-        });
-        group.addComponent(notify);
-
-        group = new CssLayout();
-        group.addStyleName("v-component-group");
-        row.addComponent(group);
-        notify = new Button("Tray", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                notification.setPosition(Position.TOP_RIGHT);
-                notification.setDelayMsec(-1);
-                notification.setStyleName("tray");
-                notification.show(getPage());
-            }
-        });
-        group.addComponent(notify);
-
-        notify = new Button("+ description", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                notification2.setPosition(Position.BOTTOM_RIGHT);
-                notification2.setDelayMsec(-1);
-                notification2.setStyleName("tray closable");
-                notification2.show(getPage());
-            }
-        });
-        group.addComponent(notify);
-
-        group = new CssLayout();
-        group.addStyleName("v-component-group");
-        row.addComponent(group);
-        notify = new Button("Warning", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                notification.setPosition(Position.MIDDLE_CENTER);
-                notification.setDelayMsec(1500);
-                notification.setStyleName("warning");
-                notification.show(getPage());
-            }
-        });
-        group.addComponent(notify);
-
-        notify = new Button("+ description", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                notification2.setPosition(Position.TOP_CENTER);
-                notification2.setDelayMsec(-1);
-                notification2.setStyleName("warning closable");
-                notification2.show(getPage());
-            }
-        });
-        group.addComponent(notify);
-
-        notify = new Button("No caption", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                Notification n3 = new Notification(null,
-                        "Just a simple description for this warning message.");
-                n3.setPosition(Position.TOP_CENTER);
-                n3.setDelayMsec(-1);
-                n3.setStyleName("warning closable");
-                n3.show(getPage());
-            }
-        });
-        group.addComponent(notify);
-
-        group = new CssLayout();
-        group.addStyleName("v-component-group");
-        row.addComponent(group);
-        notify = new Button("Error", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                notification.setPosition(Position.MIDDLE_CENTER);
-                notification.setDelayMsec(2000);
-                notification.setStyleName("error");
-                notification.show(getPage());
-            }
-        });
-        group.addComponent(notify);
-
-        notify = new Button("+ description", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                notification2.setPosition(Position.BOTTOM_CENTER);
-                notification2.setDelayMsec(-1);
-                notification2.setStyleName("error closable");
-                notification2.show(getPage());
-            }
-        });
-        group.addComponent(notify);
-
-        notify = new Button("System Message", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                Notification n = new Notification(
-                        "Session Expired",
-                        "A really long description this time, to test how well this will wrap to new lines. Morbi fringilla convallis sapien, id pulvinar odio volutpat. Sed haec quis possit intrepidus aestimare tellus.");
-                n.setDelayMsec(-1);
-                n.setPosition(Position.TOP_LEFT);
-                n.setStyleName("system closable");
-                n.show(getPage());
-            }
-        });
-        row.addComponent(notify);
-
-        /**
-         * Windows
-         */
-        row = addSection(root, "Windows", Category.Component_Containers, null);
-
-        final Window win = new Window("Window Caption");
-        win.setWidth("320px");
-        win.setContent(windowContents(false));
-
-        group = new CssLayout();
-        group.addStyleName("v-component-group");
-        row.addComponent(group);
-
-        Button button = new Button("Fixed footer", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                win.close();
-                win.setContent(windowContents(true));
-                win.setHeight("240px");
-                win.setResizable(true);
-                UI.getCurrent().addWindow(win);
-                win.setPositionX(Page.getCurrent().getBrowserWindowWidth() / 3);
-                win.setPositionY(Page.getCurrent().getBrowserWindowHeight() / 3);
-            }
-        });
-        group.addComponent(button);
-
-        button = new Button("Auto height", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                win.close();
-                win.setContent(windowContents(false));
-                win.setHeight(null);
-                win.setResizable(false);
-                UI.getCurrent().addWindow(win);
-                win.setPositionX(Page.getCurrent().getBrowserWindowWidth() / 3);
-                win.setPositionY(Page.getCurrent().getBrowserWindowHeight() / 3);
-            }
-        });
-        group.addComponent(button);
-
-        group = new CssLayout();
-        group.addStyleName("v-component-group");
-        row.addComponent(group);
-
-        button = new Button("Toggle caption", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                if (win.getCaption().equals("")) {
-                    win.setCaption("Window Caption");
-                } else {
-                    win.setCaption("");
-                }
-            }
-        });
-        group.addComponent(button);
-
-        button = new Button("Toggle close", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                win.setClosable(!win.isClosable());
-            }
-        });
-        group.addComponent(button);
-
-        button = new Button("Toggle maximize", new ClickListener() {
-            @Override
-            public void buttonClick(ClickEvent event) {
-                win.setResizable(!win.isResizable());
-            }
-        });
-        group.addComponent(button);
-
-        /**
-         * Tooltips
-         */
-        row = addSection(root, "Tooltips", Category.Common, null);
-
-        Label label = new Label("Simple");
-        label.setDescription("Simple tooltip message");
-        row.addComponent(label);
-
-        label = new Label("Long");
-        label.setDescription("Long tooltip message. Inmensae subtilitatis, obscuris et malesuada fames. Salutantibus vitae elit libero, a pharetra augue.");
-        row.addComponent(label);
-
-        label = new Label("HTML");
-        label.setDescription("<div><h1>Ut enim ad minim veniam, quis nostrud exercitation</h1><p><span>Morbi fringilla convallis sapien, id pulvinar odio volutpat.</span> <span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</span> <span>Donec sed odio operae, eu vulputate felis rhoncus.</span> <span>At nos hinc posthac, sitientis piros Afros.</span> <span>Tu quoque, Brute, fili mi, nihil timor populi, nihil!</span></p><p><span>Gallia est omnis divisa in partes tres, quarum.</span> <span>Praeterea iter est quasdam res quas ex communi.</span> <span>Cum ceteris in veneratione tui montes, nascetur mus.</span> <span>Quam temere in vitiis, legem sancimus haerentia.</span> <span>Idque Caesaris facere voluntate liceret: sese habere.</span></p></div>");
-        row.addComponent(label);
-
-        label = new Label("w/ Error message");
-        label.setDescription("Simple tooltip message");
-        label.setComponentError(new UserError("Something terrible has happened"));
-        row.addComponent(label);
-
-        label = new Label("w/ Long error message");
-        label.setDescription("Simple tooltip message");
-        label.setComponentError(new UserError(
-                "<h2>Contra legem facit qui id facit quod lex prohibet <span>Tityre, tu patulae recubans sub tegmine fagi  dolor.</span> <span>Tityre, tu patulae recubans sub tegmine fagi  dolor.</span> <span>Prima luce, cum quibus mons aliud  consensu ab eo.</span> <span>Quid securi etiam tamquam eu fugiat nulla pariatur.</span> <span>Fabio vel iudice vincam, sunt in culpa qui officia.</span> <span>Nihil hic munitissimus habendi senatus locus, nihil horum?</span></p><p><span>Plura mihi bona sunt, inclinet, amari petere vellent.</span> <span>Integer legentibus erat a ante historiarum dapibus.</span> <span>Quam diu etiam furor iste tuus nos eludet?</span> <span>Nec dubitamus multa iter quae et nos invenerat.</span> <span>Quisque ut dolor gravida, placerat libero vel, euismod.</span> <span>Quae vero auctorem tractata ab fiducia dicuntur.</span></h2>",
-                AbstractErrorMessage.ContentMode.HTML, ErrorLevel.CRITICAL));
-        row.addComponent(label);
-
-        label = new Label("Error message only");
-        label.setComponentError(new UserError("Something terrible has happened"));
-        row.addComponent(label);
-
-        return root;
-    }
-
-    VerticalLayout components(int num) {
-        menuItems.clear();
-
-        final VerticalLayout root = new VerticalLayout();
-        root.setWidth("33.333%");
-        root.setMargin(true);
-        root.addStyleName("components");
-        root.addStyleName("color-context" + num);
-
-        labels(root);
-        buttonsAndLinks(root);
-        textfields(root);
-        textareas(root);
-        comboboxes(root);
-        menubars(root);
-        checkboxes(root);
-        optiongroups(root);
-        datefields(root);
-        panels(root);
-        trees(root);
-        tables(root);
-        treetables(root);
-        sliders(root);
-        splitpanels(root);
-        tabsheets(root);
-        colorpickers(root);
-        accordions(root);
-        nativeselects(root);
-
-        return root;
-    }
-
-    void nativeselects(VerticalLayout root) {
-        HorizontalLayout row = addSection(root, "Native Selects",
-                Category.Selection_Components, null);
-
-        NativeSelect select = new NativeSelect("Drop Down Select");
-        row.addComponent(select);
-
-        ListSelect list = new ListSelect("List Select");
-        list.setNewItemsAllowed(true);
-        row.addComponent(list);
-
-        TwinColSelect tcs = new TwinColSelect("TwinCol Select");
-        tcs.setLeftColumnCaption("Left Column");
-        tcs.setRightColumnCaption("Right Column");
-        tcs.setNewItemsAllowed(true);
-        row.addComponent(tcs);
-
-        TwinColSelect tcs2 = new TwinColSelect("Sized TwinCol Select");
-        tcs2.setLeftColumnCaption("Left Column");
-        tcs2.setRightColumnCaption("Right Column");
-        tcs2.setNewItemsAllowed(true);
-        tcs2.setWidth("280px");
-        tcs2.setHeight("200px");
-        row.addComponent(tcs2);
-
-        for (int i = 1; i <= 10; i++) {
-            select.addItem("Option " + i);
-            list.addItem("Option " + i);
-            tcs.addItem("Option " + i);
-            tcs2.addItem("Option " + i);
-        }
-    }
-
-    void accordions(VerticalLayout root) {
-        HorizontalLayout row = addSection(root, "Accordions",
-                Category.Component_Containers, null);
-        row.setWidth("100%");
-
-        Accordion ac = new Accordion();
-        row.addComponent(ac);
-        ac.addTab(new VerticalLayout() {
-            {
-                setMargin(true);
-                addComponent(new Label(
-                        "Fabio vel iudice vincam, sunt in culpa qui officia. Ut enim ad minim veniam, quis nostrud exercitation."));
-            }
-        }, "First Caption", icon(false));
-        ac.addTab(new VerticalLayout() {
-            {
-                setMargin(true);
-                addComponent(new Label(
-                        "Gallia est omnis divisa in partes tres, quarum."));
-            }
-        }, "Second Caption", icon(false));
-        ac.addTab(new VerticalLayout() {
-            {
-                setMargin(true);
-                addComponent(new Label(
-                        "Nihil hic munitissimus habendi senatus locus, nihil horum? Sed haec quis possit intrepidus aestimare tellus."));
-            }
-        }, "Third Caption", icon(false));
-        ac.addTab(new VerticalLayout() {
-            {
-                setMargin(true);
-                addComponent(new Label(
-                        "Inmensae subtilitatis, obscuris et malesuada fames. Quisque ut dolor gravida, placerat libero vel, euismod."));
-            }
-        }, "Custom Caption Style", icon(false)).setStyleName("color1");
-    }
-
-    void tabsheets(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Tabs", Category.Component_Containers, null);
-        row.setWidth("100%");
-
-        final VerticalLayout wrap = new VerticalLayout();
-        wrap.setSpacing(true);
-        row.addComponent(wrap);
-
-        final CheckBox closable = new CheckBox("Closable");
-        closable.setImmediate(true);
-        wrap.addComponent(closable);
-
-        final CheckBox overflow = new CheckBox("Overflow");
-        overflow.setImmediate(true);
-        wrap.addComponent(overflow);
-
-        final CheckBox icon = new CheckBox("Icons");
-        icon.setImmediate(true);
-        wrap.addComponent(icon);
-
-        ValueChangeListener update = new ValueChangeListener() {
-            @Override
-            public void valueChange(ValueChangeEvent event) {
-                wrap.removeAllComponents();
-
-                wrap.addComponents(closable, overflow, icon);
-
-                wrap.addComponent(getTabSheet("Normal", null,
-                        closable.getValue(), overflow.getValue(),
-                        icon.getValue()));
-                wrap.addComponent(getTabSheet("Centered tabs", "centered-tabs",
-                        closable.getValue(), overflow.getValue(),
-                        icon.getValue()));
-                wrap.addComponent(getTabSheet("Equal-width tabs",
-                        "equal-width-tabs", closable.getValue(),
-                        overflow.getValue(), icon.getValue()));
-                wrap.addComponent(getTabSheet("Icons on top + padded tabbar",
-                        "icons-on-top padded-tabbar", closable.getValue(),
-                        overflow.getValue(), icon.getValue()));
-                wrap.addComponent(getTabSheet("Only selected tab is closable",
-                        "selected-closable", closable.getValue(),
-                        overflow.getValue(), icon.getValue()));
-            }
-        };
-        closable.addValueChangeListener(update);
-        overflow.addValueChangeListener(update);
-        icon.addValueChangeListener(update);
-
-        // Generate initial view
-        icon.setValue(true);
-    }
-
-    void splitpanels(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Split Panels", Category.Component_Containers,
-                null);
-
-        HorizontalSplitPanel sp = new HorizontalSplitPanel();
-        sp.setWidth("200px");
-        sp.setHeight(null);
-        sp.setFirstComponent(new Label(
-                "Fictum,  deserunt mollit anim laborum astutumque!"));
-        sp.setSecondComponent(new Label(
-                "Non equidem invideo, miror magis posuere velit aliquet."));
-        row.addComponent(sp);
-
-        VerticalSplitPanel sp2 = new VerticalSplitPanel();
-        sp2.setWidth("200px");
-        sp2.setHeight("6em");
-        sp2.setFirstComponent(new Label(
-                "Fictum,  deserunt mollit anim laborum astutumque!"));
-        sp2.setSecondComponent(new Label(
-                "Non equidem invideo, miror magis posuere velit aliquet."));
-        row.addComponent(sp2);
-
-        sp = new HorizontalSplitPanel();
-        sp.setWidth("200px");
-        sp.setHeight("200px");
-        sp.addStyleName("small");
-        sp.setFirstComponent(new Label(
-                "Fictum,  deserunt mollit anim laborum astutumque!"));
-        sp.setSecondComponent(new Label(
-                "Non equidem invideo, miror magis posuere velit aliquet."));
-        row.addComponent(sp);
-
-        sp2 = new VerticalSplitPanel();
-        sp2.setWidth("200px");
-        sp2.setHeight("6em");
-        sp2.addStyleName("small");
-        sp2.setFirstComponent(new Label(
-                "Fictum,  deserunt mollit anim laborum astutumque!"));
-        sp2.setSecondComponent(new Label(
-                "Non equidem invideo, miror magis posuere velit aliquet."));
-        row.addComponent(sp2);
-    }
-
-    void sliders(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Sliders", Category.Basic_Components, null);
-
-        Slider slider = new Slider("Horizontal");
-        slider.setValue(50.0);
-        row.addComponent(slider);
-
-        slider = new Slider("Horizontal, sized");
-        slider.setValue(50.0);
-        slider.setWidth("200px");
-        row.addComponent(slider);
-
-        slider = new Slider("Vertical");
-        slider.setValue(50.0);
-        slider.setOrientation(SliderOrientation.VERTICAL);
-        row.addComponent(slider);
-
-        slider = new Slider("Vertical, sized");
-        slider.setValue(50.0);
-        slider.setOrientation(SliderOrientation.VERTICAL);
-        slider.setHeight("200px");
-        row.addComponent(slider);
-
-        slider = new Slider("Disabled");
-        slider.setValue(50.0);
-        slider.setEnabled(false);
-        row.addComponent(slider);
-    }
-
-    void tables(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Tables", Category.Selection_Components, null);
-        row.setWidth("100%");
-
-        VerticalLayout wrap = new VerticalLayout();
-        wrap.setSpacing(true);
-        row.addComponent(wrap);
-
-        Table table = getTable("Normal");
-        wrap.addComponent(table);
-
-        table = getTable("Sized & Footer");
-        table.setWidth("100%");
-        table.setColumnExpandRatio("Lorem", 1.0f);
-        table.setColumnExpandRatio("Foo", 1.0f);
-        table.setColumnExpandRatio("Bar", 1.0f);
-        table.setFooterVisible(true);
-        table.setColumnFooter("Lorem", "lorem");
-        table.setColumnFooter("Foo", "foo");
-        table.setColumnFooter("Bar", "bar");
-        wrap.addComponent(table);
-    }
-
-    void treetables(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "TreeTables", Category.Selection_Components,
-                null);
-        row.setWidth("100%");
-
-        VerticalLayout wrap = new VerticalLayout();
-        wrap.setSpacing(true);
-        row.addComponent(wrap);
-
-        TreeTable table = getTreeTable("Normal");
-        wrap.addComponent(table);
-    }
-
-    void trees(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Tree", Category.Selection_Components, null);
-        Tree tree = new Tree();
-        tree.setSelectable(true);
-        tree.setMultiSelect(true);
-        tree.setContainerDataSource(generateContainer(10, true));
-        tree.setDragMode(TreeDragMode.NODE);
-        row.addComponent(tree);
-        tree.setItemCaptionPropertyId(CAPTION_PROPERTY);
-        tree.setItemIconPropertyId(ICON_PROPERTY);
-        tree.expandItem(firstItemId);
-        // TODO fix the issue that tree selection focuses the component (and
-        // then scrolls to that component)
-        // tree.select(firstItemId);
-        tree.setItemIcon(firstItemId, icon(false));
-
-        tree.setDropHandler(new DropHandler() {
-            @Override
-            public AcceptCriterion getAcceptCriterion() {
-                return AcceptAll.get();
-            }
-
-            @Override
-            public void drop(DragAndDropEvent event) {
-                Notification.show(event.getTransferable().toString());
-            }
-        });
-
-        // Add actions (context menu)
-        tree.addActionHandler(this);
-    }
-
-    void panels(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Panels & Layout panels",
-                Category.Component_Containers, null);
-
-        Panel panel = new Panel("Normal");
-        panel.setIcon(icon(false));
-        panel.setContent(panelContent());
-        row.addComponent(panel);
-
-        panel = new Panel("Sized");
-        panel.setIcon(icon(false));
-        panel.setWidth("10em");
-        panel.setHeight("250px");
-        panel.setContent(panelContent());
-        row.addComponent(panel);
-
-        panel = new Panel("Custom Caption");
-        panel.setIcon(icon(false));
-        panel.addStyleName("color1");
-        panel.setContent(panelContent());
-        row.addComponent(panel);
-
-        panel = new Panel("Custom Caption");
-        panel.setIcon(icon(false));
-        panel.addStyleName("color2");
-        panel.setContent(panelContent());
-        row.addComponent(panel);
-
-        panel = new Panel("Custom Caption");
-        panel.setIcon(icon(false));
-        panel.addStyleName("color3");
-        panel.setContent(panelContent());
-        row.addComponent(panel);
-
-        panel = new Panel("Borderless style");
-        panel.setIcon(icon(false));
-        panel.addStyleName("borderless");
-        panel.setContent(panelContent());
-        row.addComponent(panel);
-
-        panel = new Panel("Well style");
-        panel.setIcon(icon(false));
-        panel.addStyleName("well");
-        panel.setContent(panelContent());
-        row.addComponent(panel);
-
-        CssLayout layout = new CssLayout();
-        layout.setIcon(icon(false));
-        layout.setCaption("Panel style layout");
-        layout.addStyleName("card");
-        layout.addComponent(panelContent());
-        row.addComponent(layout);
-
-        layout = new CssLayout();
-        layout.setIcon(icon(false));
-        layout.setCaption("Well style layout");
-        layout.addStyleName("well");
-        layout.addComponent(panelContent());
-        row.addComponent(layout);
-    }
-
-    void datefields(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Date Fields", Category.Inputs, null);
-
-        DateField date = new DateField("Default resolution");
-        date.setValue(new Date());
-        row.addComponent(date);
-
-        date = new DateField("Default resolution, explicit size");
-        date.setValue(new Date());
-        row.addComponent(date);
-        date.setWidth("260px");
-        date.setHeight("60px");
-
-        date = new DateField("Second resolution");
-        date.setValue(new Date());
-        date.setResolution(Resolution.SECOND);
-        row.addComponent(date);
-
-        date = new DateField("Minute resolution");
-        date.setValue(new Date());
-        date.setResolution(Resolution.MINUTE);
-        row.addComponent(date);
-
-        date = new DateField("Hour resolution");
-        date.setValue(new Date());
-        date.setResolution(Resolution.HOUR);
-        row.addComponent(date);
-
-        date = new DateField("Disabled");
-        date.setValue(new Date());
-        date.setResolution(Resolution.HOUR);
-        date.setEnabled(false);
-        row.addComponent(date);
-
-        date = new DateField("Day resolution");
-        date.setValue(new Date());
-        date.setResolution(Resolution.DAY);
-        row.addComponent(date);
-
-        date = new DateField("Month resolution");
-        date.setValue(new Date());
-        date.setResolution(Resolution.MONTH);
-        row.addComponent(date);
-
-        date = new DateField("Year resolution");
-        date.setValue(new Date());
-        date.setResolution(Resolution.YEAR);
-        row.addComponent(date);
-
-        date = new DateField("Custom color");
-        date.setValue(new Date());
-        date.setResolution(Resolution.DAY);
-        date.addStyleName("color1");
-        row.addComponent(date);
-
-        date = new DateField("Custom color");
-        date.setValue(new Date());
-        date.setResolution(Resolution.DAY);
-        date.addStyleName("color2");
-        row.addComponent(date);
-
-        date = new DateField("Custom color");
-        date.setValue(new Date());
-        date.setResolution(Resolution.DAY);
-        date.addStyleName("color3");
-        row.addComponent(date);
-
-        date = new DateField("Small");
-        date.setValue(new Date());
-        date.setResolution(Resolution.DAY);
-        date.addStyleName("small");
-        row.addComponent(date);
-
-        date = new DateField("Large");
-        date.setValue(new Date());
-        date.setResolution(Resolution.DAY);
-        date.addStyleName("large");
-        row.addComponent(date);
-
-        date = new DateField("Week numbers");
-        date.setValue(new Date());
-        date.setResolution(Resolution.DAY);
-        date.setLocale(new Locale("fi", "fi"));
-        date.setShowISOWeekNumbers(true);
-        row.addComponent(date);
-
-        date = new DateField("US locale");
-        date.setValue(new Date());
-        date.setResolution(Resolution.SECOND);
-        date.setLocale(new Locale("en", "US"));
-        row.addComponent(date);
-
-        date = new DateField("Custom format");
-        date.setValue(new Date());
-        date.setDateFormat("E dd/MM/yyyy");
-        row.addComponent(date);
-    }
-
-    void optiongroups(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Option Groups", Category.Selection_Components,
-                null);
-
-        OptionGroup options = new OptionGroup("Choose one, explicit width");
-        options.setWidth("200px");
-        options.addItem("Option One");
-        Item two = options
-                .addItem("Option Two, with a longer caption that should wrap when the components width is explicitly set.");
-        options.addItem("Option Three");
-        options.select("Option One");
-        options.setItemIcon("Option One", icon(false));
-        options.setItemIcon(two, icon(false));
-        options.setItemIcon("Option Three", icon(true));
-        row.addComponent(options);
-
-        options = new OptionGroup("Choose many, explicit width");
-        options.setMultiSelect(true);
-        options.setWidth("200px");
-        options.addItem("Option One");
-        two = options
-                .addItem("Option Two, with a longer caption that should wrap when the components width is explicitly set.");
-        options.addItem("Option Three");
-        options.select("Option One");
-        options.setItemIcon("Option One", icon(false));
-        options.setItemIcon(two, icon(false));
-        options.setItemIcon("Option Three", icon(true));
-        row.addComponent(options);
-    }
-
-    void checkboxes(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Check Boxes", Category.Inputs, null);
-
-        CheckBox check = new CheckBox("Checked", true);
-        row.addComponent(check);
-
-        check = new CheckBox(
-                "Checked, explicit width, so that the caption should wrap",
-                true);
-        row.addComponent(check);
-        check.setWidth("150px");
-
-        check = new CheckBox("Not checked");
-        row.addComponent(check);
-
-        check = new CheckBox(null, true);
-        check.setDescription("No caption");
-        row.addComponent(check);
-
-        check = new CheckBox("Custom color", true);
-        check.addStyleName("color1");
-        row.addComponent(check);
-
-        check = new CheckBox("Custom color", true);
-        check.addStyleName("color2");
-        check.setIcon(icon(false));
-        row.addComponent(check);
-
-        check = new CheckBox("With Icon", true);
-        check.setIcon(icon(false));
-        row.addComponent(check);
-
-        check = new CheckBox();
-        check.setIcon(icon(true));
-        row.addComponent(check);
-
-        check = new CheckBox("Small", true);
-        check.addStyleName("small");
-        row.addComponent(check);
-
-        check = new CheckBox("Large", true);
-        check.addStyleName("large");
-        row.addComponent(check);
-    }
-
-    void menubars(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Menu Bars", Category.Basic_Components, null);
-        row.setWidth("100%");
-        row.addComponent(getMenuBar());
-    }
-
-    void comboboxes(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Combo Boxes", Category.Selection_Components,
-                null);
-
-        Container generatedContainer = generateContainer(200, false);
-        ComboBox combo = new ComboBox("Normal");
-        combo.setInputPrompt("You can type here");
-        combo.setContainerDataSource(generatedContainer);
-        combo.setItemCaptionPropertyId(CAPTION_PROPERTY);
-        combo.setItemIconPropertyId(ICON_PROPERTY);
-        row.addComponent(combo);
-
-        combo = new ComboBox("Explicit size");
-        combo.setInputPrompt("You can type here");
-        combo.addItem("Option One");
-        combo.addItem("Option Two");
-        combo.addItem("Option Three");
-        combo.setWidth("260px");
-        combo.setHeight("60px");
-        row.addComponent(combo);
-
-        combo = new ComboBox("Disabled");
-        combo.setInputPrompt("You can type here");
-        combo.addItem("Option One");
-        combo.addItem("Option Two");
-        combo.addItem("Option Three");
-        combo.setEnabled(false);
-        row.addComponent(combo);
-
-        combo = new ComboBox("Custom color");
-        combo.setInputPrompt("You can type here");
-        combo.setContainerDataSource(generatedContainer);
-        combo.setItemCaptionPropertyId(CAPTION_PROPERTY);
-        combo.setItemIconPropertyId(ICON_PROPERTY);
-        combo.addStyleName("color1");
-        row.addComponent(combo);
-
-        combo = new ComboBox("Custom color");
-        combo.setInputPrompt("You can type here");
-        combo.setContainerDataSource(generatedContainer);
-        combo.setItemCaptionPropertyId(CAPTION_PROPERTY);
-        combo.setItemIconPropertyId(ICON_PROPERTY);
-        combo.addStyleName("color2");
-        row.addComponent(combo);
-
-        combo = new ComboBox("Custom color");
-        combo.setInputPrompt("You can type here");
-        combo.setContainerDataSource(generatedContainer);
-        combo.setItemCaptionPropertyId(CAPTION_PROPERTY);
-        combo.setItemIconPropertyId(ICON_PROPERTY);
-        combo.addStyleName("color3");
-        row.addComponent(combo);
-
-        combo = new ComboBox("Small");
-        combo.setInputPrompt("You can type here");
-        combo.addItem("Option One");
-        combo.addItem("Option Two");
-        combo.addItem("Option Three");
-        combo.addStyleName("small");
-        row.addComponent(combo);
-
-        combo = new ComboBox("Large");
-        combo.setInputPrompt("You can type here");
-        combo.addItem("Option One");
-        combo.addItem("Option Two");
-        combo.addItem("Option Three");
-        combo.addStyleName("large");
-        row.addComponent(combo);
-    }
-
-    void textareas(final VerticalLayout root) {
-        HorizontalLayout row;
-        row = addSection(root, "Text Areas", Category.Inputs, null);
-
-        TextArea ta = new TextArea("Normal");
-        ta.setInputPrompt("Write your comment…");
-        row.addComponent(ta);
-
-        ta = new TextArea("Focused");
-        ta.setInputPrompt("Write your comment…");
-        ta.addStyleName("focused");
-        row.addComponent(ta);
-
-        ta = new TextArea("Custom color");
-        ta.addStyleName("color1");
-        ta.setInputPrompt("Write your comment…");
-        row.addComponent(ta);
-
-        ta = new TextArea("Custom color, read-only");
-        ta.addStyleName("color2");
-        ta.setValue("Field value, spanning multiple lines of text");
-        ta.setReadOnly(true);
-        row.addComponent(ta);
-
-        ta = new TextArea("Custom color, inline icon");
-        ta.addStyleName("color3");
-        ta.setValue("Inline icon not really working…");
-        ta.addStyleName("inline-icon");
-        ta.setIcon(icon(false));
-        row.addComponent(ta);
-
-        ta = new TextArea("Small");
-        ta.addStyleName("small");
-        ta.setInputPrompt("Write your comment…");
-        row.addComponent(ta);
-
-        ta = new TextArea("Large");
-        ta.addStyleName("large");
-        ta.setInputPrompt("Write your comment…");
-        row.addComponent(ta);
-
-        ta = new TextArea("Borderless");
-        ta.addStyleName("borderless");
-        ta.setInputPrompt("Write your comment…");
-        row.addComponent(ta);
-    }
-
-    void textfields(final VerticalLayout root) {
-        HorizontalLayout row = addSection(root, "Text Fields", Category.Inputs,
-                null);
-
-        TextField tf = new TextField("Normal");
-        tf.setInputPrompt("First name");
-        tf.setIcon(icon(false));
-        row.addComponent(tf);
-
-        tf = new TextField("Focused");
-        tf.setInputPrompt("Last name");
-        tf.addStyleName("focused");
-        row.addComponent(tf);
-
-        tf = new TextField("Custom color");
-        tf.setInputPrompt("Email");
-        tf.addStyleName("color1");
-        row.addComponent(tf);
-
-        tf = new TextField("User Color");
-        tf.setInputPrompt("Gender");
-        tf.addStyleName("color2");
-        row.addComponent(tf);
-
-        tf = new TextField("Themed");
-        tf.setInputPrompt("Age");
-        tf.addStyleName("color3");
-        row.addComponent(tf);
-
-        tf = new TextField("Read-only");
-        tf.setInputPrompt("Nationality");
-        tf.setValue("Finnish");
-        tf.setReadOnly(true);
-        row.addComponent(tf);
-
-        tf = new TextField("Small");
-        tf.setValue("Field value");
-        tf.addStyleName("small");
-        row.addComponent(tf);
-
-        tf = new TextField("Large");
-        tf.setValue("Field value");
-        tf.addStyleName("large");
-        tf.setIcon(icon(true));
-        row.addComponent(tf);
-
-        tf = new TextField("Icon inside");
-        tf.setInputPrompt("Ooh, an icon");
-        tf.addStyleName("inline-icon");
-        tf.setIcon(icon(false));
-        row.addComponent(tf);
-
-        tf = new TextField("16px supported by default");
-        tf.setInputPrompt("Image icon");
-        tf.addStyleName("inline-icon");
-        tf.setIcon(icon(true, 16));
-        row.addComponent(tf);
-
-        tf = new TextField();
-        tf.setValue("Font, no caption");
-        tf.addStyleName("inline-icon");
-        tf.setIcon(icon(false));
-        row.addComponent(tf);
-
-        tf = new TextField();
-        tf.setValue("Image, no caption");
-        tf.addStyleName("inline-icon");
-        tf.setIcon(icon(true, 16));
-        row.addComponent(tf);
-
-        CssLayout group = new CssLayout();
-        group.addStyleName("v-component-group");
-        row.addComponent(group);
-
-        tf = new TextField();
-        tf.setInputPrompt("Grouped with a button");
-        tf.addStyleName("inline-icon");
-        tf.setIcon(icon(false));
-        tf.setWidth("260px");
-        group.addComponent(tf);
-
-        Button button = new Button("Do It");
-        // button.addStyleName("primary");
-        group.addComponent(button);
-
-        tf = new TextField("Borderless");
-        tf.setInputPrompt("Write here…");
-        tf.addStyleName("inline-icon");
-        tf.addStyleName("borderless");
-        tf.setIcon(icon(false));
-        row.addComponent(tf);
-    }
-
-    void buttonsAndLinks(final VerticalLayout root) {
-        HorizontalLayout row = addSection(root, "Buttons",
-                Category.Basic_Components, null);
-
-        Button button = new Button("Normal");
-        row.addComponent(button);
-
-        button = new Button("Focused");
-        button.addStyleName("focus");
-        row.addComponent(button);
-
-        button = new Button("Pressed");
-        button.addStyleName("active");
-        button.addStyleName("focus");
-        row.addComponent(button);
-
-        button = new Button("Disabled");
-        button.setEnabled(false);
-        row.addComponent(button);
-
-        button = new Button("Primary");
-        button.addStyleName("primary");
-        row.addComponent(button);
-
-        button = new Button("Friendly");
-        button.addStyleName("friendly");
-        row.addComponent(button);
-
-        button = new Button("Danger");
-        button.addStyleName("danger");
-        row.addComponent(button);
-
-        // button = new Button("Custom");
-        // button.addStyleName("color2");
-        // row.addComponent(button);
-        //
-        // button = new Button("User Color");
-        // button.addStyleName("color3");
-        // row.addComponent(button);
-        //
-        // button = new Button("Themed");
-        // button.addStyleName("color4");
-        // row.addComponent(button);
-        //
-        // button = new Button("Alternate");
-        // button.addStyleName("color5");
-        // row.addComponent(button);
-        //
-        // button = new Button("Other");
-        // button.addStyleName("color6");
-        // row.addComponent(button);
-
-        button = new Button("Small");
-        button.addStyleName("small");
-        button.setIcon(icon(false));
-        row.addComponent(button);
-
-        button = new Button("Large");
-        button.addStyleName("large");
-        button.addStyleName("icon-align-right");
-        button.setIcon(icon(false));
-        row.addComponent(button);
-
-        button = new Button("Image icon");
-        button.setIcon(icon(true, 16));
-        row.addComponent(button);
-
-        button = new Button("Image icon");
-        button.addStyleName("icon-align-right");
-        button.setIcon(icon(true));
-        row.addComponent(button);
-
-        button = new Button("Photos");
-        button.setIcon(icon(false));
-        row.addComponent(button);
-
-        button = new Button();
-        button.setIcon(icon(false));
-        button.addStyleName("icon");
-        row.addComponent(button);
-
-        button = new Button("Borderless");
-        button.setIcon(icon(false));
-        button.addStyleName("borderless");
-        row.addComponent(button);
-
-        button = new Button("Link style");
-        button.setIcon(icon(false));
-        button.addStyleName("link");
-        row.addComponent(button);
-
-        button = new Button("Icon on right");
-        button.setIcon(icon(false));
-        button.addStyleName("icon-align-right");
-        row.addComponent(button);
-
-        CssLayout group = new CssLayout();
-        group.addStyleName("v-component-group");
-        row.addComponent(group);
-
-        button = new Button("One");
-        group.addComponent(button);
-        button = new Button("Two");
-        group.addComponent(button);
-        button = new Button("Three");
-        group.addComponent(button);
-
-        NativeButton nbutton = new NativeButton("Native");
-        row.addComponent(nbutton);
-
-        Link link = new Link("Link to vaadin.com", new ExternalResource(
-                "https://vaadin.com"));
-        row.addComponent(link);
-
-        link = new Link("Custom color", new ExternalResource(
-                "https://vaadin.com"));
-        link.addStyleName("color3");
-        link.setIcon(icon(false));
-        row.addComponent(link);
-
-        link = new Link("Small", new ExternalResource("https://vaadin.com"));
-        link.addStyleName("small");
-        row.addComponent(link);
-
-        link = new Link("Large", new ExternalResource("https://vaadin.com"));
-        link.addStyleName("large");
-        row.addComponent(link);
-
-        link = new Link(null, new ExternalResource("https://vaadin.com"));
-        link.setIcon(icon(false));
-        row.addComponent(link);
-    }
-
-    void colorpickers(final VerticalLayout root) {
-        HorizontalLayout row = addSection(root, "Color Pickers",
-                Category.Inputs, null);
-
-        ColorPicker cp = new ColorPicker();
-        cp.setDefaultCaptionEnabled(true);
-        cp.setIcon(icon(false));
-        cp.setComponentError(new UserError("Test error"));
-        row.addComponent(cp);
-
-        cp = new ColorPicker();
-        cp.setPopupStyle(PopupStyle.POPUP_SIMPLE);
-        cp.setTextfieldVisibility(true);
-        row.addComponent(cp);
-    }
-
-    void labels(final VerticalLayout root) {
-        addSection(root, "Labels", Category.Basic_Components, null);
-
-        Label large = new Label(
-                "Large type for introductory text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
-        large.addStyleName("large");
-        root.addComponent(large);
-
-        Label h2 = new Label("Subtitle");
-        h2.addStyleName("h2");
-        root.addComponent(h2);
-
-        Label normal = new Label(
-                "Normal type for plain text, with a <a href=\"https://vaadin.com\">regular link</a>. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.",
-                ContentMode.HTML);
-        root.addComponent(normal);
-
-        Label h3 = new Label("Small Title");
-        h3.addStyleName("h3");
-        root.addComponent(h3);
-
-        Label small = new Label(
-                "Small type for additional text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
-        small.addStyleName("small");
-        root.addComponent(small);
-
-        Label h4 = new Label("Section Title");
-        h4.addStyleName("h4");
-        root.addComponent(h4);
-
-        normal = new Label(
-                "Normal type for plain text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
-        root.addComponent(normal);
-
-        h4 = new Label("Spinner");
-        h4.addStyleName("h4");
-        root.addComponent(h4);
-
-        Label spinnerDesc = new Label(
-                "Below is a Label with a custom style name, for which the spinner mixin is added.");
-        spinnerDesc.addStyleName("small");
-        root.addComponent(spinnerDesc);
-
-        Label spinner = new Label();
-        spinner.addStyleName("spinner");
-        root.addComponent(spinner);
-    }
-
-    HorizontalLayout addSection(VerticalLayout root, String title,
-            Category category, String description) {
-        String id = title.toLowerCase().replace(" ", "-");
-
-        Label h1 = new Label(title);
-        h1.addStyleName("h1");
-        h1.setId("" + id);
-        root.addComponent(h1);
-
-        if (description != null) {
-            Label desc = new Label(description + "<br><br>", ContentMode.HTML);
-            root.addComponent(desc);
-        }
-
-        Link link = new Link(title, new ExternalResource("#" + id));
-
-        ArrayList<Link> items = menuItems.get(category);
-        if (items == null) {
-            items = new ArrayList<Link>();
-            menuItems.put(category, items);
-        }
-        items.add(link);
-
-        HorizontalLayout row = new HorizontalLayout();
-        row.addStyleName("wrapping");
-        row.setSpacing(true);
-        root.addComponent(row);
-        return row;
-    }
-
-    private Component windowContents(boolean scrollable) {
-        VerticalLayout root = new VerticalLayout();
-
-        HorizontalLayout footer = new HorizontalLayout();
-        footer.setWidth("100%");
-        footer.setSpacing(true);
-        footer.addStyleName("v-window-bottom-toolbar");
-
-        Label footerText = new Label("Footer text");
-        footerText.setSizeUndefined();
-
-        Button ok = new Button("OK");
-        ok.addStyleName("primary");
-
-        Button cancel = new Button("Cancel");
-
-        footer.addComponents(footerText, ok, cancel);
-        footer.setExpandRatio(footerText, 1);
-
-        Component content = null;
-        if (scrollable) {
-            Panel panel = new Panel();
-            panel.setSizeFull();
-            panel.addStyleName("borderless");
-            VerticalLayout l = new VerticalLayout();
-            l.addComponent(new Label(
-                    "<h2>Subtitle</h2><p>Quam diu etiam furor iste tuus nos eludet? Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ut enim ad minim veniam, quis nostrud exercitation. Quae vero auctorem tractata ab fiducia dicuntur.</p><p>Quisque ut dolor gravida, placerat libero vel, euismod. Etiam habebis sem dicantur magna mollis euismod. Nihil hic munitissimus habendi senatus locus, nihil horum? Curabitur est gravida et libero vitae dictum. Ullamco laboris nisi ut aliquid ex ea commodi consequat. Morbi odio eros, volutpat ut pharetra vitae, lobortis sed nibh.</p>",
-                    ContentMode.HTML));
-            l.setMargin(true);
-            panel.setContent(l);
-            content = panel;
-        } else {
-            content = new Label(
-                    "<h2>Subtitle</h2><p>Normal type for plain text. Etiam at risus et justo dignissim congue.</p>",
-                    ContentMode.HTML);
-        }
-        root.addComponents(content, footer);
-        if (scrollable) {
-            root.setSizeFull();
-            root.setExpandRatio(content, 1);
-        }
-        root.setMargin(!scrollable);
-
-        return root;
-    }
-
-    Component panelContent() {
-        // return new Button("Panel content");
-        VerticalLayout layout = new VerticalLayout();
-        layout.setSizeFull();
-        layout.setMargin(true);
-        layout.setSpacing(true);
-        Label content = new Label(
-                "Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio.");
-        content.setWidth("10em");
-        layout.addComponent(content);
-        Button button = new Button("Button");
-        button.setSizeFull();
-        layout.addComponent(button);
-        return layout;
-    }
-
-    Table getTable(String caption) {
-        Table table = new Table(caption);
-        table.setSelectable(true);
-        table.setMultiSelect(true);
-        table.setSortEnabled(true);
-        table.setColumnCollapsingAllowed(true);
-        table.setColumnReorderingAllowed(true);
-        table.setPageLength(6);
-        table.addActionHandler(this);
-        table.setDragMode(TableDragMode.MULTIROW);
-        table.setDropHandler(new DropHandler() {
-            @Override
-            public AcceptCriterion getAcceptCriterion() {
-                return AcceptAll.get();
-            }
-
-            @Override
-            public void drop(DragAndDropEvent event) {
-                Notification.show(event.getTransferable().toString());
-            }
-        });
-        table.setContainerDataSource(tableData);
-        table.select(tableData.getItemIds().iterator().next());
-        table.setSortContainerPropertyId(CAPTION_PROPERTY);
-        table.setItemIconPropertyId(ICON_PROPERTY);
-        table.setColumnAlignment(DESCRIPTION_PROPERTY, Align.RIGHT);
-
-        return table;
-    }
-
-    TreeTable getTreeTable(String caption) {
-        TreeTable table = new TreeTable(caption);
-        table.setSelectable(true);
-        table.setMultiSelect(true);
-        table.setSortEnabled(true);
-        table.setAnimationsEnabled(true);
-        table.setColumnCollapsingAllowed(true);
-        table.setColumnReorderingAllowed(true);
-        table.setPageLength(6);
-        table.addActionHandler(this);
-        table.setDragMode(TableDragMode.MULTIROW);
-        table.setDropHandler(new DropHandler() {
-
-            @Override
-            public AcceptCriterion getAcceptCriterion() {
-                return AcceptAll.get();
-            }
-
-            @Override
-            public void drop(DragAndDropEvent event) {
-                Notification.show(event.getTransferable().toString());
-            }
-        });
-        table.setContainerDataSource(container);
-        table.select(tableData.getItemIds().iterator().next());
-        table.setItemIconPropertyId(ICON_PROPERTY);
-
-        return table;
-    }
-
-    // Actions for the context menu
-    private static final Action ACTION_ONE = new Action("Action One");
-    private static final Action ACTION_TWO = new Action("Action Two");
-    private static final Action ACTION_THREE = new Action("Action Three");
-    private static final Action[] ACTIONS = new Action[] { ACTION_ONE,
-            ACTION_TWO, ACTION_THREE };
-    private Container container;
-    private Object firstItemId;
-
-    @Override
-    public Action[] getActions(Object target, Object sender) {
-        return ACTIONS;
-    }
-
-    @Override
-    public void handleAction(Action action, Object sender, Object target) {
-        Notification.show(action.getCaption());
-    }
-
-    MenuBar getMenuBar() {
-        MenuBar menubar = new MenuBar();
-        menubar.setWidth("100%");
-        final MenuBar.MenuItem file = menubar.addItem("File", null);
-        final MenuBar.MenuItem newItem = file.addItem("New", null);
-        file.addItem("Open file...", null);
-        file.addSeparator();
-
-        newItem.addItem("File", null);
-        newItem.addItem("Folder", null);
-        newItem.addItem("Project...", null);
-
-        file.addItem("Close", null);
-        file.addItem("Close All", null);
-        file.addSeparator();
-
-        file.addItem("Save", null);
-        file.addItem("Save As...", null);
-        file.addItem("Save All", null);
-
-        final MenuBar.MenuItem edit = menubar.addItem("Edit", null);
-        edit.addItem("Undo", null);
-        edit.addItem("Redo", null).setEnabled(false);
-        edit.addSeparator();
-
-        edit.addItem("Cut", null);
-        edit.addItem("Copy", null);
-        edit.addItem("Paste", null);
-        edit.addSeparator();
-
-        final MenuBar.MenuItem find = edit.addItem("Find/Replace", null);
-
-        find.addItem("Google Search", null);
-        find.addSeparator();
-        find.addItem("Find/Replace...", null);
-        find.addItem("Find Next", null);
-        find.addItem("Find Previous", null);
-
-        Command check = new Command() {
-            @Override
-            public void menuSelected(MenuItem selectedItem) {
-                Notification.show(selectedItem.isChecked() ? "Checked"
-                        : "Unchecked");
-            }
-        };
-
-        final MenuBar.MenuItem view = menubar.addItem("View", null);
-        view.addItem("Show Status Bar", check).setCheckable(true);
-        MenuItem title = view.addItem("Show Title Bar", check);
-        title.setCheckable(true);
-        title.setChecked(true);
-        view.addItem("Customize Toolbar...", null);
-        view.addSeparator();
-
-        view.addItem("Actual Size", null);
-        view.addItem("Zoom In", null);
-        view.addItem("Zoom Out", null);
-
-        MenuItem fav = menubar.addItem("", check);
-        fav.setIcon(icon(false));
-        fav.setStyleName("icon-only");
-        fav.setCheckable(true);
-        fav.setChecked(true);
-
-        fav = menubar.addItem("", check);
-        fav.setIcon(icon(false));
-        fav.setStyleName("icon-only");
-        fav.setCheckable(true);
-        fav.setCheckable(true);
-
-        menubar.addItem("Attach", null).setIcon(FontAwesome.PAPERCLIP);
-        menubar.addItem("Undo", null).setIcon(FontAwesome.UNDO);
-        menubar.addItem("Redo", null).setIcon(FontAwesome.REPEAT);
-        menubar.addItem("Upload", null).setIcon(FontAwesome.UPLOAD);
-
-        return menubar;
-    }
-
-    public static Resource icon(boolean isImage) {
-        return icon(isImage, 32);
-    }
-
-    public static Resource icon(boolean isImage, int imageSize) {
-        if (!isImage) {
-            if (++iconCount >= SIZE) {
-                iconCount = 0;
-            }
-            return ICONS.get(iconCount);
-        }
-        return new ThemeResource("../runo/icons/" + imageSize + "/document.png");
-    }
-
-    static List<FontAwesome> ICONS = Collections.unmodifiableList(Arrays
-            .asList(FontAwesome.values()));
-    static final int SIZE = ICONS.size();
-    static int iconCount = 110;
-
-    TabSheet getTabSheet(String caption, String style, boolean closable,
-            boolean scrolling, boolean icon) {
-        TabSheet ts = new TabSheet();
-        ts.addStyleName(style);
-        ts.setCaption(caption);
-
-        for (int i = 0; i < (scrolling ? 10 : 3); i++) {
-            String tabcaption = nextString(true);
-            if (i == 0 && icon) {
-                tabcaption = null;
-            }
-            Tab t = ts.addTab(new Label(" "), tabcaption);
-            t.setClosable(closable);
-
-            if (icon) {
-                t.setIcon(icon(i == 2));
-            }
-        }
-        return ts;
-    }
-
-    static String[] strings = new String[] { "lorem", "ipsum", "dolor", "sit",
-            "amet", "consectetur" };
-    static int stringCount = -1;
-
-    String nextString(boolean capitalize) {
-        if (++stringCount >= strings.length) {
-            stringCount = 0;
-        }
-        return capitalize ? strings[stringCount].substring(0, 1).toUpperCase()
-                + strings[stringCount].substring(1) : strings[stringCount];
-    }
-}
\ No newline at end of file
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Accordions.java b/uitest/src/com/vaadin/tests/themes/valo/Accordions.java
new file mode 100644
index 0000000000..b401451271
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/Accordions.java
@@ -0,0 +1,86 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.ui.Accordion;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.VerticalLayout;
+
+public class Accordions extends VerticalLayout implements View {
+    public Accordions() {
+        setMargin(true);
+
+        Label h1 = new Label("Accordions");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.setSpacing(true);
+        row.setWidth("100%");
+        addComponent(row);
+
+        row.addComponent(getAccordion("Normal"));
+
+        Accordion ac = getAccordion("Borderless");
+        ac.addStyleName("borderless");
+        row.addComponent(ac);
+
+    }
+
+    Accordion getAccordion(String caption) {
+        Accordion ac = new Accordion();
+        ac.setCaption(caption);
+        ac.addTab(new VerticalLayout() {
+            {
+                setMargin(true);
+                addComponent(new Label(
+                        "Fabio vel iudice vincam, sunt in culpa qui officia. Ut enim ad minim veniam, quis nostrud exercitation."));
+            }
+        }, "First Caption", TestIcon.get());
+        ac.addTab(new VerticalLayout() {
+            {
+                setMargin(true);
+                addComponent(new Label(
+                        "Gallia est omnis divisa in partes tres, quarum."));
+            }
+        }, "Second Caption", TestIcon.get());
+        ac.addTab(new VerticalLayout() {
+            {
+                setMargin(true);
+                addComponent(new Label(
+                        "Nihil hic munitissimus habendi senatus locus, nihil horum? Sed haec quis possit intrepidus aestimare tellus."));
+            }
+        }, "Third Caption", TestIcon.get());
+        ac.addTab(new VerticalLayout() {
+            {
+                setMargin(true);
+                addComponent(new Label(
+                        "Inmensae subtilitatis, obscuris et malesuada fames. Quisque ut dolor gravida, placerat libero vel, euismod."));
+            }
+        }, "Custom Caption Style", TestIcon.get()).setStyleName("color1");
+        return ac;
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/ButtonsAndLinks.java b/uitest/src/com/vaadin/tests/themes/valo/ButtonsAndLinks.java
new file mode 100644
index 0000000000..8f7b7c6a00
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/ButtonsAndLinks.java
@@ -0,0 +1,186 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.server.ExternalResource;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Link;
+import com.vaadin.ui.NativeButton;
+import com.vaadin.ui.VerticalLayout;
+
+/**
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+public class ButtonsAndLinks extends VerticalLayout implements View {
+    /**
+ * 
+ */
+    public ButtonsAndLinks() {
+        setMargin(true);
+
+        Label h1 = new Label("Buttons");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        Button button = new Button("Normal");
+        row.addComponent(button);
+
+        button = new Button("Disabled");
+        button.setEnabled(false);
+        row.addComponent(button);
+
+        button = new Button("Primary");
+        button.addStyleName("primary");
+        row.addComponent(button);
+
+        button = new Button("Friendly");
+        button.addStyleName("friendly");
+        row.addComponent(button);
+
+        button = new Button("Danger");
+        button.addStyleName("danger");
+        row.addComponent(button);
+
+        // button = new Button("Custom");
+        // button.addStyleName("color2");
+        // row.addComponent(button);
+        //
+        // button = new Button("User Color");
+        // button.addStyleName("color3");
+        // row.addComponent(button);
+        //
+        // button = new Button("Themed");
+        // button.addStyleName("color4");
+        // row.addComponent(button);
+        //
+        // button = new Button("Alternate");
+        // button.addStyleName("color5");
+        // row.addComponent(button);
+        //
+        // button = new Button("Other");
+        // button.addStyleName("color6");
+        // row.addComponent(button);
+
+        button = new Button("Small");
+        button.addStyleName("small");
+        button.setIcon(TestIcon.get());
+        row.addComponent(button);
+
+        button = new Button("Large");
+        button.addStyleName("large");
+        button.addStyleName("icon-align-right");
+        button.setIcon(TestIcon.get());
+        row.addComponent(button);
+
+        button = new Button("Image icon");
+        button.setIcon(TestIcon.get(true, 16));
+        row.addComponent(button);
+
+        button = new Button("Image icon");
+        button.addStyleName("icon-align-right");
+        button.setIcon(TestIcon.get(true));
+        row.addComponent(button);
+
+        button = new Button("Photos");
+        button.setIcon(TestIcon.get());
+        row.addComponent(button);
+
+        button = new Button();
+        button.setIcon(TestIcon.get());
+        button.addStyleName("icon-only");
+        row.addComponent(button);
+
+        button = new Button("Borderless");
+        button.setIcon(TestIcon.get());
+        button.addStyleName("borderless");
+        row.addComponent(button);
+
+        button = new Button("Link style");
+        button.setIcon(TestIcon.get());
+        button.addStyleName("link");
+        row.addComponent(button);
+
+        button = new Button("Icon on right");
+        button.setIcon(TestIcon.get());
+        button.addStyleName("icon-align-right");
+        row.addComponent(button);
+
+        CssLayout group = new CssLayout();
+        group.addStyleName("v-component-group");
+        row.addComponent(group);
+
+        button = new Button("One");
+        group.addComponent(button);
+        button = new Button("Two");
+        group.addComponent(button);
+        button = new Button("Three");
+        group.addComponent(button);
+
+        NativeButton nbutton = new NativeButton("Native");
+        row.addComponent(nbutton);
+
+        h1 = new Label("Links");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        Link link = new Link("vaadin.com", new ExternalResource(
+                "https://vaadin.com"));
+        row.addComponent(link);
+
+        link = new Link("Link with icon", new ExternalResource(
+                "https://vaadin.com"));
+        link.addStyleName("color3");
+        link.setIcon(TestIcon.get());
+        row.addComponent(link);
+
+        link = new Link("Small", new ExternalResource("https://vaadin.com"));
+        link.addStyleName("small");
+        row.addComponent(link);
+
+        link = new Link("Large", new ExternalResource("https://vaadin.com"));
+        link.addStyleName("large");
+        row.addComponent(link);
+
+        link = new Link(null, new ExternalResource("https://vaadin.com"));
+        link.setIcon(TestIcon.get());
+        link.addStyleName("large");
+        row.addComponent(link);
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/CalendarTest.java b/uitest/src/com/vaadin/tests/themes/valo/CalendarTest.java
new file mode 100644
index 0000000000..17dfd6cb67
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/CalendarTest.java
@@ -0,0 +1,1278 @@
+package com.vaadin.tests.themes.valo;
+
+import java.text.DateFormatSymbols;
+import java.util.Date;
+import java.util.GregorianCalendar;
+import java.util.Locale;
+import java.util.Map;
+import java.util.TimeZone;
+
+import com.vaadin.annotations.Theme;
+import com.vaadin.data.Item;
+import com.vaadin.data.Property;
+import com.vaadin.data.Property.ValueChangeEvent;
+import com.vaadin.data.Property.ValueChangeListener;
+import com.vaadin.data.fieldgroup.FieldGroup;
+import com.vaadin.data.fieldgroup.FieldGroup.CommitException;
+import com.vaadin.data.util.BeanItem;
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.shared.ui.combobox.FilteringMode;
+import com.vaadin.shared.ui.datefield.Resolution;
+import com.vaadin.tests.components.calendar.CalendarTestEvent;
+import com.vaadin.ui.Alignment;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.Button.ClickListener;
+import com.vaadin.ui.Calendar;
+import com.vaadin.ui.Calendar.TimeFormat;
+import com.vaadin.ui.CheckBox;
+import com.vaadin.ui.ComboBox;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.DateField;
+import com.vaadin.ui.FormLayout;
+import com.vaadin.ui.GridLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Layout;
+import com.vaadin.ui.TextArea;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.Window;
+import com.vaadin.ui.components.calendar.CalendarComponentEvents.DateClickEvent;
+import com.vaadin.ui.components.calendar.CalendarComponentEvents.EventClick;
+import com.vaadin.ui.components.calendar.CalendarComponentEvents.EventClickHandler;
+import com.vaadin.ui.components.calendar.CalendarComponentEvents.RangeSelectEvent;
+import com.vaadin.ui.components.calendar.CalendarComponentEvents.RangeSelectHandler;
+import com.vaadin.ui.components.calendar.CalendarComponentEvents.WeekClick;
+import com.vaadin.ui.components.calendar.CalendarComponentEvents.WeekClickHandler;
+import com.vaadin.ui.components.calendar.event.BasicEvent;
+import com.vaadin.ui.components.calendar.event.BasicEventProvider;
+import com.vaadin.ui.components.calendar.event.CalendarEvent;
+import com.vaadin.ui.components.calendar.handler.BasicDateClickHandler;
+import com.vaadin.ui.components.calendar.handler.BasicWeekClickHandler;
+
+/** Calendar component test application */
+@Theme("valo-test")
+public class CalendarTest extends GridLayout implements View {
+
+    private static final long serialVersionUID = -5436777475398410597L;
+
+    private static final String DEFAULT_ITEMID = "DEFAULT";
+
+    private enum Mode {
+        MONTH, WEEK, DAY;
+    }
+
+    /**
+     * This Gregorian calendar is used to control dates and time inside of this
+     * test application.
+     */
+    private GregorianCalendar calendar;
+
+    /** Target calendar component that this test application is made for. */
+    private Calendar calendarComponent;
+
+    private Date currentMonthsFirstDate;
+
+    private final Label captionLabel = new Label("");
+
+    private Button monthButton;
+
+    private Button weekButton;
+
+    private Button dayButton;
+
+    private Button nextButton;
+
+    private Button prevButton;
+
+    private ComboBox timeZoneSelect;
+
+    private ComboBox formatSelect;
+
+    private ComboBox localeSelect;
+
+    private CheckBox hideWeekendsButton;
+
+    private CheckBox readOnlyButton;
+
+    private TextField captionField;
+
+    private Window scheduleEventPopup;
+
+    private final FormLayout scheduleEventFieldLayout = new FormLayout();
+    private FieldGroup scheduleEventFieldGroup = new FieldGroup();
+
+    private Button deleteEventButton;
+
+    private Button applyEventButton;
+
+    private Mode viewMode = Mode.MONTH;
+
+    private BasicEventProvider dataSource;
+
+    private Button addNewEvent;
+
+    /*
+     * When testBench is set to true, CalendarTest will have static content that
+     * is more suitable for Vaadin TestBench testing. Calendar will use a static
+     * date Mon 10 Jan 2000. Enable by starting the application with a
+     * "testBench" parameter in the URL.
+     */
+    private boolean testBench = false;
+
+    private String calendarHeight = null;
+
+    private String calendarWidth = null;
+
+    private CheckBox disabledButton;
+
+    private Integer firstHour;
+
+    private Integer lastHour;
+
+    private Integer firstDay;
+
+    private Integer lastDay;
+
+    private Locale defaultLocale = Locale.US;
+
+    private boolean showWeeklyView;
+
+    private boolean useSecondResolution;
+
+    private DateField startDateField;
+    private DateField endDateField;
+
+    public CalendarTest() {
+        setSizeFull();
+        setHeight("1000px");
+        setMargin(true);
+        setSpacing(true);
+
+        // handleURLParams(request.getParameterMap());
+
+        initContent();
+    }
+
+    private void handleURLParams(Map<String, String[]> parameters) {
+        testBench = parameters.containsKey("testBench")
+                || parameters.containsKey("?testBench");
+
+        if (parameters.containsKey("width")) {
+            calendarWidth = parameters.get("width")[0];
+        }
+
+        if (parameters.containsKey("height")) {
+            calendarHeight = parameters.get("height")[0];
+        }
+
+        if (parameters.containsKey("firstDay")) {
+            firstDay = Integer.parseInt(parameters.get("firstDay")[0]);
+        }
+
+        if (parameters.containsKey("lastDay")) {
+            lastDay = Integer.parseInt(parameters.get("lastDay")[0]);
+        }
+
+        if (parameters.containsKey("firstHour")) {
+            firstHour = Integer.parseInt(parameters.get("firstHour")[0]);
+        }
+
+        if (parameters.containsKey("lastHour")) {
+            lastHour = Integer.parseInt(parameters.get("lastHour")[0]);
+        }
+
+        if (parameters.containsKey("locale")) {
+            String localeArray[] = parameters.get("locale")[0].split("_");
+            defaultLocale = new Locale(localeArray[0], localeArray[1]);
+            setLocale(defaultLocale);
+        }
+
+        if (parameters.containsKey(("secondsResolution"))) {
+            useSecondResolution = true;
+        }
+
+        showWeeklyView = parameters.containsKey("weekly");
+
+    }
+
+    public void initContent() {
+        // Set default Locale for this application
+        if (testBench) {
+            setLocale(defaultLocale);
+
+        } else {
+            setLocale(Locale.getDefault());
+        }
+
+        // Initialize locale, timezone and timeformat selects.
+        localeSelect = createLocaleSelect();
+        timeZoneSelect = createTimeZoneSelect();
+        formatSelect = createCalendarFormatSelect();
+
+        initCalendar();
+        initLayoutContent();
+        addInitialEvents();
+    }
+
+    private Date resolveFirstDateOfWeek(Date today,
+            java.util.Calendar currentCalendar) {
+        int firstDayOfWeek = currentCalendar.getFirstDayOfWeek();
+        currentCalendar.setTime(today);
+        while (firstDayOfWeek != currentCalendar
+                .get(java.util.Calendar.DAY_OF_WEEK)) {
+            currentCalendar.add(java.util.Calendar.DATE, -1);
+        }
+        return currentCalendar.getTime();
+    }
+
+    private Date resolveLastDateOfWeek(Date today,
+            java.util.Calendar currentCalendar) {
+        currentCalendar.setTime(today);
+        currentCalendar.add(java.util.Calendar.DATE, 1);
+        int firstDayOfWeek = currentCalendar.getFirstDayOfWeek();
+        // Roll to weeks last day using firstdayofweek. Roll until FDofW is
+        // found and then roll back one day.
+        while (firstDayOfWeek != currentCalendar
+                .get(java.util.Calendar.DAY_OF_WEEK)) {
+            currentCalendar.add(java.util.Calendar.DATE, 1);
+        }
+        currentCalendar.add(java.util.Calendar.DATE, -1);
+        return currentCalendar.getTime();
+    }
+
+    private void addInitialEvents() {
+        Date originalDate = calendar.getTime();
+        Date today = getToday();
+
+        // Add a event that last a whole week
+
+        Date start = resolveFirstDateOfWeek(today, calendar);
+        Date end = resolveLastDateOfWeek(today, calendar);
+        CalendarTestEvent event = getNewEvent("Whole week event", start, end);
+        event.setAllDay(true);
+        event.setStyleName("color4");
+        event.setDescription("Description for the whole week event.");
+        dataSource.addEvent(event);
+
+        // Add a allday event
+        calendar.setTime(start);
+        calendar.add(GregorianCalendar.DATE, 3);
+        start = calendar.getTime();
+        end = start;
+        event = getNewEvent("All-day event", start, end);
+        event.setAllDay(true);
+        event.setDescription("Some description.");
+        event.setStyleName("color3");
+        dataSource.addEvent(event);
+
+        // Add a second allday event
+        calendar.add(GregorianCalendar.DATE, 1);
+        start = calendar.getTime();
+        end = start;
+        event = getNewEvent("Second all-day event", start, end);
+        event.setAllDay(true);
+        event.setDescription("Some description.");
+        event.setStyleName("color2");
+        dataSource.addEvent(event);
+
+        calendar.add(GregorianCalendar.DATE, -3);
+        calendar.set(GregorianCalendar.HOUR_OF_DAY, 9);
+        calendar.set(GregorianCalendar.MINUTE, 30);
+        start = calendar.getTime();
+        calendar.add(GregorianCalendar.HOUR_OF_DAY, 5);
+        calendar.set(GregorianCalendar.MINUTE, 0);
+        end = calendar.getTime();
+        event = getNewEvent("Appointment", start, end);
+        event.setWhere("Office");
+        event.setStyleName("color1");
+        event.setDescription("A longer description, which should display correctly.");
+        dataSource.addEvent(event);
+
+        calendar.add(GregorianCalendar.DATE, 1);
+        calendar.set(GregorianCalendar.HOUR_OF_DAY, 11);
+        calendar.set(GregorianCalendar.MINUTE, 0);
+        start = calendar.getTime();
+        calendar.add(GregorianCalendar.HOUR_OF_DAY, 8);
+        end = calendar.getTime();
+        event = getNewEvent("Training", start, end);
+        event.setStyleName("color2");
+        dataSource.addEvent(event);
+
+        calendar.add(GregorianCalendar.DATE, 4);
+        calendar.set(GregorianCalendar.HOUR_OF_DAY, 9);
+        calendar.set(GregorianCalendar.MINUTE, 0);
+        start = calendar.getTime();
+        calendar.add(GregorianCalendar.HOUR_OF_DAY, 9);
+        end = calendar.getTime();
+        event = getNewEvent("Free time", start, end);
+        dataSource.addEvent(event);
+
+        calendar.setTime(originalDate);
+    }
+
+    private void initLayoutContent() {
+        initNavigationButtons();
+        initHideWeekEndButton();
+        initReadOnlyButton();
+        initDisabledButton();
+        initAddNewEventButton();
+
+        HorizontalLayout hl = new HorizontalLayout();
+        hl.setWidth("100%");
+        hl.setSpacing(true);
+        hl.addComponent(prevButton);
+        hl.addComponent(captionLabel);
+
+        CssLayout group = new CssLayout();
+        group.addStyleName("v-component-group");
+        group.addComponent(dayButton);
+        group.addComponent(weekButton);
+        group.addComponent(monthButton);
+        hl.addComponent(group);
+
+        hl.addComponent(nextButton);
+        hl.setComponentAlignment(prevButton, Alignment.MIDDLE_LEFT);
+        hl.setComponentAlignment(captionLabel, Alignment.MIDDLE_CENTER);
+        hl.setComponentAlignment(group, Alignment.MIDDLE_CENTER);
+        hl.setComponentAlignment(nextButton, Alignment.MIDDLE_RIGHT);
+
+        // monthButton.setVisible(viewMode == Mode.WEEK);
+        // weekButton.setVisible(viewMode == Mode.DAY);
+
+        HorizontalLayout controlPanel = new HorizontalLayout();
+        controlPanel.setSpacing(true);
+        controlPanel.setWidth("100%");
+        controlPanel.addComponent(localeSelect);
+        controlPanel.addComponent(timeZoneSelect);
+        controlPanel.addComponent(formatSelect);
+        controlPanel.addComponent(hideWeekendsButton);
+        controlPanel.addComponent(readOnlyButton);
+        controlPanel.addComponent(disabledButton);
+        controlPanel.addComponent(addNewEvent);
+
+        controlPanel.setComponentAlignment(timeZoneSelect,
+                Alignment.MIDDLE_LEFT);
+        controlPanel.setComponentAlignment(formatSelect, Alignment.MIDDLE_LEFT);
+        controlPanel.setComponentAlignment(localeSelect, Alignment.MIDDLE_LEFT);
+        controlPanel.setComponentAlignment(hideWeekendsButton,
+                Alignment.MIDDLE_LEFT);
+        controlPanel.setComponentAlignment(readOnlyButton,
+                Alignment.MIDDLE_LEFT);
+        controlPanel.setComponentAlignment(disabledButton,
+                Alignment.MIDDLE_LEFT);
+        controlPanel.setComponentAlignment(addNewEvent, Alignment.MIDDLE_LEFT);
+
+        addComponent(controlPanel);
+        addComponent(hl);
+        addComponent(calendarComponent);
+        setRowExpandRatio(getRows() - 1, 1.0f);
+    }
+
+    private void initNavigationButtons() {
+        monthButton = new Button("Month", new ClickListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                switchToMonthView();
+            }
+        });
+
+        weekButton = new Button("Week", new ClickListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                // simulate week click
+                WeekClickHandler handler = (WeekClickHandler) calendarComponent
+                        .getHandler(WeekClick.EVENT_ID);
+                handler.weekClick(new WeekClick(calendarComponent, calendar
+                        .get(GregorianCalendar.WEEK_OF_YEAR), calendar
+                        .get(GregorianCalendar.YEAR)));
+            }
+        });
+
+        dayButton = new Button("Day", new ClickListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                // simulate day click
+                BasicDateClickHandler handler = (BasicDateClickHandler) calendarComponent
+                        .getHandler(DateClickEvent.EVENT_ID);
+                handler.dateClick(new DateClickEvent(calendarComponent,
+                        calendar.getTime()));
+            }
+        });
+
+        nextButton = new Button("Next", new Button.ClickListener() {
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                handleNextButtonClick();
+            }
+        });
+
+        prevButton = new Button("Prev", new Button.ClickListener() {
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                handlePreviousButtonClick();
+            }
+        });
+    }
+
+    private void initHideWeekEndButton() {
+        hideWeekendsButton = new CheckBox("Hide weekends");
+        hideWeekendsButton.setImmediate(true);
+        hideWeekendsButton
+                .addValueChangeListener(new Property.ValueChangeListener() {
+
+                    private static final long serialVersionUID = 1L;
+
+                    @Override
+                    public void valueChange(ValueChangeEvent event) {
+                        setWeekendsHidden(hideWeekendsButton.getValue());
+                    }
+                });
+    }
+
+    private void setWeekendsHidden(boolean weekendsHidden) {
+        if (weekendsHidden) {
+            int firstToShow = (GregorianCalendar.MONDAY - calendar
+                    .getFirstDayOfWeek()) % 7;
+            calendarComponent.setFirstVisibleDayOfWeek(firstToShow + 1);
+            calendarComponent.setLastVisibleDayOfWeek(firstToShow + 5);
+        } else {
+            calendarComponent.setFirstVisibleDayOfWeek(1);
+            calendarComponent.setLastVisibleDayOfWeek(7);
+        }
+
+    }
+
+    private void initReadOnlyButton() {
+        readOnlyButton = new CheckBox("Read-only mode");
+        readOnlyButton.setImmediate(true);
+        readOnlyButton
+                .addValueChangeListener(new Property.ValueChangeListener() {
+
+                    private static final long serialVersionUID = 1L;
+
+                    @Override
+                    public void valueChange(ValueChangeEvent event) {
+                        calendarComponent.setReadOnly(readOnlyButton.getValue());
+                    }
+                });
+    }
+
+    private void initDisabledButton() {
+        disabledButton = new CheckBox("Disabled");
+        disabledButton.setImmediate(true);
+        disabledButton
+                .addValueChangeListener(new Property.ValueChangeListener() {
+
+                    private static final long serialVersionUID = 1L;
+
+                    @Override
+                    public void valueChange(ValueChangeEvent event) {
+                        calendarComponent.setEnabled(!disabledButton.getValue());
+                    }
+                });
+    }
+
+    public void initAddNewEventButton() {
+        addNewEvent = new Button("Add new event");
+        addNewEvent.addClickListener(new Button.ClickListener() {
+
+            private static final long serialVersionUID = -8307244759142541067L;
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                Date start = getToday();
+                start.setHours(0);
+                start.setMinutes(0);
+                start.setSeconds(0);
+
+                Date end = getEndOfDay(calendar, start);
+
+                showEventPopup(createNewEvent(start, end), true);
+            }
+        });
+    }
+
+    private void initFormFields(Layout formLayout,
+            Class<? extends CalendarEvent> eventClass) {
+
+        startDateField = createDateField("Start date");
+        endDateField = createDateField("End date");
+
+        final CheckBox allDayField = createCheckBox("All-day");
+        allDayField.addValueChangeListener(new Property.ValueChangeListener() {
+
+            private static final long serialVersionUID = -7104996493482558021L;
+
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+                Object value = event.getProperty().getValue();
+                if (value instanceof Boolean && Boolean.TRUE.equals(value)) {
+                    setFormDateResolution(Resolution.DAY);
+
+                } else {
+                    setFormDateResolution(Resolution.MINUTE);
+                }
+            }
+
+        });
+
+        captionField = createTextField("Caption");
+        captionField.setInputPrompt("Event name");
+        captionField.setRequired(true);
+        final TextField whereField = createTextField("Where");
+        whereField.setInputPrompt("Address or location");
+        final TextArea descriptionField = createTextArea("Description");
+        descriptionField.setInputPrompt("Describe the event");
+        descriptionField.setRows(3);
+        // descriptionField.setRequired(true);
+
+        final ComboBox styleNameField = createStyleNameComboBox();
+        styleNameField.setInputPrompt("Choose calendar");
+        styleNameField.setTextInputAllowed(false);
+
+        formLayout.addComponent(startDateField);
+        // startDateField.setRequired(true);
+        formLayout.addComponent(endDateField);
+        formLayout.addComponent(allDayField);
+        formLayout.addComponent(captionField);
+        // captionField.setComponentError(new UserError("Testing error"));
+        if (eventClass == CalendarTestEvent.class) {
+            formLayout.addComponent(whereField);
+        }
+        formLayout.addComponent(descriptionField);
+        formLayout.addComponent(styleNameField);
+
+        scheduleEventFieldGroup.bind(startDateField, "start");
+        scheduleEventFieldGroup.bind(endDateField, "end");
+        scheduleEventFieldGroup.bind(captionField, "caption");
+        scheduleEventFieldGroup.bind(descriptionField, "description");
+        if (eventClass == CalendarTestEvent.class) {
+            scheduleEventFieldGroup.bind(whereField, "where");
+        }
+        scheduleEventFieldGroup.bind(styleNameField, "styleName");
+        scheduleEventFieldGroup.bind(allDayField, "allDay");
+    }
+
+    private CheckBox createCheckBox(String caption) {
+        CheckBox cb = new CheckBox(caption);
+        cb.setImmediate(true);
+        return cb;
+    }
+
+    private TextField createTextField(String caption) {
+        TextField f = new TextField(caption);
+        f.setNullRepresentation("");
+        return f;
+    }
+
+    private TextArea createTextArea(String caption) {
+        TextArea f = new TextArea(caption);
+        f.setNullRepresentation("");
+        return f;
+    }
+
+    private DateField createDateField(String caption) {
+        DateField f = new DateField(caption);
+        if (useSecondResolution) {
+            f.setResolution(Resolution.SECOND);
+        } else {
+            f.setResolution(Resolution.MINUTE);
+        }
+        return f;
+    }
+
+    private ComboBox createStyleNameComboBox() {
+        ComboBox s = new ComboBox("Calendar");
+        s.addContainerProperty("c", String.class, "");
+        s.setItemCaptionPropertyId("c");
+        Item i = s.addItem("color1");
+        i.getItemProperty("c").setValue("Work");
+        i = s.addItem("color2");
+        i.getItemProperty("c").setValue("Personal");
+        i = s.addItem("color3");
+        i.getItemProperty("c").setValue("Family");
+        i = s.addItem("color4");
+        i.getItemProperty("c").setValue("Hobbies");
+        return s;
+    }
+
+    private void initCalendar() {
+        dataSource = new BasicEventProvider();
+
+        calendarComponent = new Calendar(dataSource);
+        calendarComponent.setLocale(getLocale());
+        calendarComponent.setImmediate(true);
+
+        if (calendarWidth != null || calendarHeight != null) {
+            if (calendarHeight != null) {
+                calendarComponent.setHeight(calendarHeight);
+            }
+            if (calendarWidth != null) {
+                calendarComponent.setWidth(calendarWidth);
+            }
+        } else {
+            calendarComponent.setSizeFull();
+        }
+
+        if (firstHour != null && lastHour != null) {
+            calendarComponent.setFirstVisibleHourOfDay(firstHour);
+            calendarComponent.setLastVisibleHourOfDay(lastHour);
+        }
+
+        if (firstDay != null && lastDay != null) {
+            calendarComponent.setFirstVisibleDayOfWeek(firstDay);
+            calendarComponent.setLastVisibleDayOfWeek(lastDay);
+        }
+
+        Date today = getToday();
+        calendar = new GregorianCalendar(getLocale());
+        calendar.setTime(today);
+        calendarComponent.getInternalCalendar().setTime(today);
+
+        int rollAmount = calendar.get(GregorianCalendar.DAY_OF_MONTH) - 1;
+        calendar.add(GregorianCalendar.DAY_OF_MONTH, -rollAmount);
+        currentMonthsFirstDate = calendar.getTime();
+
+        updateCaptionLabel();
+
+        if (!showWeeklyView) {
+            // resetTime(false);
+            // currentMonthsFirstDate = calendar.getTime();
+            // calendarComponent.setStartDate(currentMonthsFirstDate);
+            // calendar.add(GregorianCalendar.MONTH, 1);
+            // calendar.add(GregorianCalendar.DATE, -1);
+            // calendarComponent.setEndDate(calendar.getTime());
+        }
+
+        addCalendarEventListeners();
+    }
+
+    private Date getToday() {
+        if (testBench) {
+            GregorianCalendar testDate = new GregorianCalendar();
+            testDate.set(GregorianCalendar.YEAR, 2000);
+            testDate.set(GregorianCalendar.MONTH, 0);
+            testDate.set(GregorianCalendar.DATE, 10);
+            testDate.set(GregorianCalendar.HOUR_OF_DAY, 0);
+            testDate.set(GregorianCalendar.MINUTE, 0);
+            testDate.set(GregorianCalendar.SECOND, 0);
+            testDate.set(GregorianCalendar.MILLISECOND, 0);
+            return testDate.getTime();
+        }
+        return new Date();
+    }
+
+    @SuppressWarnings("serial")
+    private void addCalendarEventListeners() {
+        // Register week clicks by changing the schedules start and end dates.
+        calendarComponent.setHandler(new BasicWeekClickHandler() {
+
+            @Override
+            public void weekClick(WeekClick event) {
+                // let BasicWeekClickHandler handle calendar dates, and update
+                // only the other parts of UI here
+                super.weekClick(event);
+                updateCaptionLabel();
+                switchToWeekView();
+            }
+        });
+
+        calendarComponent.setHandler(new EventClickHandler() {
+
+            @Override
+            public void eventClick(EventClick event) {
+                showEventPopup(event.getCalendarEvent(), false);
+            }
+        });
+
+        calendarComponent.setHandler(new BasicDateClickHandler() {
+
+            @Override
+            public void dateClick(DateClickEvent event) {
+                // let BasicDateClickHandler handle calendar dates, and update
+                // only the other parts of UI here
+                super.dateClick(event);
+                switchToDayView();
+            }
+        });
+
+        calendarComponent.setHandler(new RangeSelectHandler() {
+
+            @Override
+            public void rangeSelect(RangeSelectEvent event) {
+                handleRangeSelect(event);
+            }
+        });
+    }
+
+    private ComboBox createTimeZoneSelect() {
+        ComboBox s = new ComboBox("Timezone");
+        s.addContainerProperty("caption", String.class, "");
+        s.setItemCaptionPropertyId("caption");
+        s.setFilteringMode(FilteringMode.CONTAINS);
+
+        Item i = s.addItem(DEFAULT_ITEMID);
+        i.getItemProperty("caption").setValue(
+                "Default (" + TimeZone.getDefault().getID() + ")");
+        for (String id : TimeZone.getAvailableIDs()) {
+            if (!s.containsId(id)) {
+                i = s.addItem(id);
+                i.getItemProperty("caption").setValue(id);
+            }
+        }
+
+        if (testBench) {
+            s.select("America/New_York");
+        } else {
+            s.select(DEFAULT_ITEMID);
+        }
+        s.setImmediate(true);
+        s.addValueChangeListener(new ValueChangeListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+
+                updateCalendarTimeZone(event.getProperty().getValue());
+            }
+        });
+
+        return s;
+    }
+
+    private ComboBox createCalendarFormatSelect() {
+        ComboBox s = new ComboBox("Calendar format");
+        s.addContainerProperty("caption", String.class, "");
+        s.setItemCaptionPropertyId("caption");
+
+        Item i = s.addItem(DEFAULT_ITEMID);
+        i.getItemProperty("caption").setValue("Default by locale");
+        i = s.addItem(TimeFormat.Format12H);
+        i.getItemProperty("caption").setValue("12H");
+        i = s.addItem(TimeFormat.Format24H);
+        i.getItemProperty("caption").setValue("24H");
+
+        s.select(DEFAULT_ITEMID);
+        s.setImmediate(true);
+        s.addValueChangeListener(new ValueChangeListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+                updateCalendarFormat(event.getProperty().getValue());
+            }
+        });
+
+        return s;
+    }
+
+    private ComboBox createLocaleSelect() {
+        ComboBox s = new ComboBox("Locale");
+        s.addContainerProperty("caption", String.class, "");
+        s.setItemCaptionPropertyId("caption");
+        s.setFilteringMode(FilteringMode.CONTAINS);
+
+        for (Locale l : Locale.getAvailableLocales()) {
+            if (!s.containsId(l)) {
+                Item i = s.addItem(l);
+                i.getItemProperty("caption").setValue(getLocaleItemCaption(l));
+            }
+        }
+
+        s.select(getLocale());
+        s.setImmediate(true);
+        s.addValueChangeListener(new ValueChangeListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+                updateCalendarLocale((Locale) event.getProperty().getValue());
+            }
+        });
+
+        return s;
+    }
+
+    private void updateCalendarTimeZone(Object timezoneId) {
+        TimeZone tz = null;
+        if (!DEFAULT_ITEMID.equals(timezoneId)) {
+            tz = TimeZone.getTimeZone((String) timezoneId);
+        }
+
+        // remember the week that was showing, so we can re-set it later
+        Date startDate = calendarComponent.getStartDate();
+        calendar.setTime(startDate);
+        int weekNumber = calendar.get(java.util.Calendar.WEEK_OF_YEAR);
+        calendarComponent.setTimeZone(tz);
+        calendar.setTimeZone(calendarComponent.getTimeZone());
+
+        if (viewMode == Mode.WEEK) {
+            calendar.set(java.util.Calendar.WEEK_OF_YEAR, weekNumber);
+            calendar.set(java.util.Calendar.DAY_OF_WEEK,
+                    calendar.getFirstDayOfWeek());
+
+            calendarComponent.setStartDate(calendar.getTime());
+            calendar.add(java.util.Calendar.DATE, 6);
+            calendarComponent.setEndDate(calendar.getTime());
+        }
+    }
+
+    private void updateCalendarFormat(Object format) {
+        TimeFormat calFormat = null;
+        if (format instanceof TimeFormat) {
+            calFormat = (TimeFormat) format;
+        }
+
+        calendarComponent.setTimeFormat(calFormat);
+    }
+
+    private String getLocaleItemCaption(Locale l) {
+        String country = l.getDisplayCountry(getLocale());
+        String language = l.getDisplayLanguage(getLocale());
+        StringBuilder caption = new StringBuilder(country);
+        if (caption.length() != 0) {
+            caption.append(", ");
+        }
+        caption.append(language);
+        return caption.toString();
+    }
+
+    private void updateCalendarLocale(Locale l) {
+        int oldFirstDayOfWeek = calendar.getFirstDayOfWeek();
+        setLocale(l);
+        calendarComponent.setLocale(l);
+        calendar = new GregorianCalendar(l);
+        int newFirstDayOfWeek = calendar.getFirstDayOfWeek();
+
+        // we are showing 1 week, and the first day of the week has changed
+        // update start and end dates so that the same week is showing
+        if (viewMode == Mode.WEEK && oldFirstDayOfWeek != newFirstDayOfWeek) {
+            calendar.setTime(calendarComponent.getStartDate());
+            calendar.add(java.util.Calendar.DAY_OF_WEEK, 2);
+            // starting at the beginning of the week
+            calendar.set(GregorianCalendar.DAY_OF_WEEK, newFirstDayOfWeek);
+            Date start = calendar.getTime();
+
+            // ending at the end of the week
+            calendar.add(GregorianCalendar.DATE, 6);
+            Date end = calendar.getTime();
+
+            calendarComponent.setStartDate(start);
+            calendarComponent.setEndDate(end);
+
+            // Week days depend on locale so this must be refreshed
+            setWeekendsHidden(hideWeekendsButton.getValue());
+        }
+
+    }
+
+    private void handleNextButtonClick() {
+        switch (viewMode) {
+        case MONTH:
+            nextMonth();
+            break;
+        case WEEK:
+            nextWeek();
+            break;
+        case DAY:
+            nextDay();
+            break;
+        }
+    }
+
+    private void handlePreviousButtonClick() {
+        switch (viewMode) {
+        case MONTH:
+            previousMonth();
+            break;
+        case WEEK:
+            previousWeek();
+            break;
+        case DAY:
+            previousDay();
+            break;
+        }
+    }
+
+    private void handleRangeSelect(RangeSelectEvent event) {
+        Date start = event.getStart();
+        Date end = event.getEnd();
+
+        /*
+         * If a range of dates is selected in monthly mode, we want it to end at
+         * the end of the last day.
+         */
+        if (event.isMonthlyMode()) {
+            end = getEndOfDay(calendar, end);
+        }
+
+        showEventPopup(createNewEvent(start, end), true);
+    }
+
+    private void showEventPopup(CalendarEvent event, boolean newEvent) {
+        if (event == null) {
+            return;
+        }
+
+        updateCalendarEventPopup(newEvent);
+        updateCalendarEventForm(event);
+        // TODO this only works the first time
+        captionField.focus();
+
+        if (!getUI().getWindows().contains(scheduleEventPopup)) {
+            getUI().addWindow(scheduleEventPopup);
+        }
+
+    }
+
+    /* Initializes a modal window to edit schedule event. */
+    private void createCalendarEventPopup() {
+        VerticalLayout layout = new VerticalLayout();
+        // layout.setMargin(true);
+        layout.setSpacing(true);
+
+        scheduleEventPopup = new Window(null, layout);
+        scheduleEventPopup.setWidth("300px");
+        scheduleEventPopup.setModal(true);
+        scheduleEventPopup.center();
+
+        scheduleEventFieldLayout.addStyleName("light");
+        scheduleEventFieldLayout.setMargin(false);
+        layout.addComponent(scheduleEventFieldLayout);
+
+        applyEventButton = new Button("Apply", new ClickListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                try {
+                    commitCalendarEvent();
+                } catch (CommitException e) {
+                    e.printStackTrace();
+                }
+            }
+        });
+        applyEventButton.addStyleName("primary");
+        Button cancel = new Button("Cancel", new ClickListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                discardCalendarEvent();
+            }
+        });
+        deleteEventButton = new Button("Delete", new ClickListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                deleteCalendarEvent();
+            }
+        });
+        deleteEventButton.addStyleName("borderless");
+        scheduleEventPopup.addCloseListener(new Window.CloseListener() {
+
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            public void windowClose(Window.CloseEvent e) {
+                discardCalendarEvent();
+            }
+        });
+
+        HorizontalLayout buttons = new HorizontalLayout();
+        buttons.addStyleName("v-window-bottom-toolbar");
+        buttons.setWidth("100%");
+        buttons.setSpacing(true);
+        buttons.addComponent(deleteEventButton);
+        buttons.addComponent(applyEventButton);
+        buttons.setExpandRatio(applyEventButton, 1);
+        buttons.setComponentAlignment(applyEventButton, Alignment.TOP_RIGHT);
+        buttons.addComponent(cancel);
+        layout.addComponent(buttons);
+
+    }
+
+    private void updateCalendarEventPopup(boolean newEvent) {
+        if (scheduleEventPopup == null) {
+            createCalendarEventPopup();
+        }
+
+        if (newEvent) {
+            scheduleEventPopup.setCaption("New event");
+        } else {
+            scheduleEventPopup.setCaption("Edit event");
+        }
+
+        deleteEventButton.setVisible(!newEvent);
+        deleteEventButton.setEnabled(!calendarComponent.isReadOnly());
+        applyEventButton.setEnabled(!calendarComponent.isReadOnly());
+    }
+
+    private void updateCalendarEventForm(CalendarEvent event) {
+        BeanItem<CalendarEvent> item = new BeanItem<CalendarEvent>(event);
+        scheduleEventFieldLayout.removeAllComponents();
+        scheduleEventFieldGroup = new FieldGroup();
+        initFormFields(scheduleEventFieldLayout, event.getClass());
+        scheduleEventFieldGroup.setBuffered(true);
+        scheduleEventFieldGroup.setItemDataSource(item);
+    }
+
+    private void setFormDateResolution(Resolution resolution) {
+        if (startDateField != null && endDateField != null) {
+            startDateField.setResolution(resolution);
+            endDateField.setResolution(resolution);
+        }
+    }
+
+    private CalendarEvent createNewEvent(Date startDate, Date endDate) {
+        BasicEvent event = new BasicEvent();
+        event.setCaption("");
+        event.setStart(startDate);
+        event.setEnd(endDate);
+        event.setStyleName("color1");
+        return event;
+    }
+
+    /* Removes the event from the data source and fires change event. */
+    private void deleteCalendarEvent() {
+        BasicEvent event = getFormCalendarEvent();
+        if (dataSource.containsEvent(event)) {
+            dataSource.removeEvent(event);
+        }
+        getUI().removeWindow(scheduleEventPopup);
+    }
+
+    /* Adds/updates the event in the data source and fires change event. */
+    private void commitCalendarEvent() throws CommitException {
+        scheduleEventFieldGroup.commit();
+        BasicEvent event = getFormCalendarEvent();
+        if (event.getEnd() == null) {
+            event.setEnd(event.getStart());
+        }
+        if (!dataSource.containsEvent(event)) {
+            dataSource.addEvent(event);
+        }
+
+        getUI().removeWindow(scheduleEventPopup);
+    }
+
+    private void discardCalendarEvent() {
+        scheduleEventFieldGroup.discard();
+        getUI().removeWindow(scheduleEventPopup);
+    }
+
+    @SuppressWarnings("unchecked")
+    private BasicEvent getFormCalendarEvent() {
+        BeanItem<CalendarEvent> item = (BeanItem<CalendarEvent>) scheduleEventFieldGroup
+                .getItemDataSource();
+        CalendarEvent event = item.getBean();
+        return (BasicEvent) event;
+    }
+
+    private void nextMonth() {
+        rollMonth(1);
+    }
+
+    private void previousMonth() {
+        rollMonth(-1);
+    }
+
+    private void nextWeek() {
+        rollWeek(1);
+    }
+
+    private void previousWeek() {
+        rollWeek(-1);
+    }
+
+    private void nextDay() {
+        rollDate(1);
+    }
+
+    private void previousDay() {
+        rollDate(-1);
+    }
+
+    private void rollMonth(int direction) {
+        calendar.setTime(currentMonthsFirstDate);
+        calendar.add(GregorianCalendar.MONTH, direction);
+        resetTime(false);
+        currentMonthsFirstDate = calendar.getTime();
+        calendarComponent.setStartDate(currentMonthsFirstDate);
+
+        updateCaptionLabel();
+
+        calendar.add(GregorianCalendar.MONTH, 1);
+        calendar.add(GregorianCalendar.DATE, -1);
+        resetCalendarTime(true);
+    }
+
+    private void rollWeek(int direction) {
+        calendar.add(GregorianCalendar.WEEK_OF_YEAR, direction);
+        calendar.set(GregorianCalendar.DAY_OF_WEEK,
+                calendar.getFirstDayOfWeek());
+        resetCalendarTime(false);
+        resetTime(true);
+        calendar.add(GregorianCalendar.DATE, 6);
+        calendarComponent.setEndDate(calendar.getTime());
+    }
+
+    private void rollDate(int direction) {
+        calendar.add(GregorianCalendar.DATE, direction);
+        resetCalendarTime(false);
+        resetCalendarTime(true);
+    }
+
+    private void updateCaptionLabel() {
+        DateFormatSymbols s = new DateFormatSymbols(getLocale());
+        String month = s.getShortMonths()[calendar.get(GregorianCalendar.MONTH)];
+        captionLabel.setValue(month + " "
+                + calendar.get(GregorianCalendar.YEAR));
+    }
+
+    private CalendarTestEvent getNewEvent(String caption, Date start, Date end) {
+        CalendarTestEvent event = new CalendarTestEvent();
+        event.setCaption(caption);
+        event.setStart(start);
+        event.setEnd(end);
+
+        return event;
+    }
+
+    /*
+     * Switch the view to week view.
+     */
+    public void switchToWeekView() {
+        viewMode = Mode.WEEK;
+        // weekButton.setVisible(false);
+        // monthButton.setVisible(true);
+    }
+
+    /*
+     * Switch the Calendar component's start and end date range to the target
+     * month only. (sample range: 01.01.2010 00:00.000 - 31.01.2010 23:59.999)
+     */
+    public void switchToMonthView() {
+        viewMode = Mode.MONTH;
+        // monthButton.setVisible(false);
+        // weekButton.setVisible(false);
+
+        int rollAmount = calendar.get(GregorianCalendar.DAY_OF_MONTH) - 1;
+        calendar.add(GregorianCalendar.DAY_OF_MONTH, -rollAmount);
+
+        calendarComponent.setStartDate(calendar.getTime());
+
+        updateCaptionLabel();
+
+        calendar.add(GregorianCalendar.MONTH, 1);
+        calendar.add(GregorianCalendar.DATE, -1);
+
+        calendarComponent.setEndDate(calendar.getTime());
+
+        calendar.setTime(getToday());
+        // resetCalendarTime(true);
+    }
+
+    /*
+     * Switch to day view (week view with a single day visible).
+     */
+    public void switchToDayView() {
+        viewMode = Mode.DAY;
+        // monthButton.setVisible(true);
+        // weekButton.setVisible(true);
+    }
+
+    private void resetCalendarTime(boolean resetEndTime) {
+        resetTime(resetEndTime);
+        if (resetEndTime) {
+            calendarComponent.setEndDate(calendar.getTime());
+        } else {
+            calendarComponent.setStartDate(calendar.getTime());
+            updateCaptionLabel();
+        }
+    }
+
+    /*
+     * Resets the calendar time (hour, minute second and millisecond) either to
+     * zero or maximum value.
+     */
+    private void resetTime(boolean max) {
+        if (max) {
+            calendar.set(GregorianCalendar.HOUR_OF_DAY,
+                    calendar.getMaximum(GregorianCalendar.HOUR_OF_DAY));
+            calendar.set(GregorianCalendar.MINUTE,
+                    calendar.getMaximum(GregorianCalendar.MINUTE));
+            calendar.set(GregorianCalendar.SECOND,
+                    calendar.getMaximum(GregorianCalendar.SECOND));
+            calendar.set(GregorianCalendar.MILLISECOND,
+                    calendar.getMaximum(GregorianCalendar.MILLISECOND));
+        } else {
+            calendar.set(GregorianCalendar.HOUR_OF_DAY, 0);
+            calendar.set(GregorianCalendar.MINUTE, 0);
+            calendar.set(GregorianCalendar.SECOND, 0);
+            calendar.set(GregorianCalendar.MILLISECOND, 0);
+        }
+    }
+
+    private static Date getEndOfDay(java.util.Calendar calendar, Date date) {
+        java.util.Calendar calendarClone = (java.util.Calendar) calendar
+                .clone();
+
+        calendarClone.setTime(date);
+        calendarClone.set(java.util.Calendar.MILLISECOND,
+                calendarClone.getActualMaximum(java.util.Calendar.MILLISECOND));
+        calendarClone.set(java.util.Calendar.SECOND,
+                calendarClone.getActualMaximum(java.util.Calendar.SECOND));
+        calendarClone.set(java.util.Calendar.MINUTE,
+                calendarClone.getActualMaximum(java.util.Calendar.MINUTE));
+        calendarClone.set(java.util.Calendar.HOUR,
+                calendarClone.getActualMaximum(java.util.Calendar.HOUR));
+        calendarClone.set(java.util.Calendar.HOUR_OF_DAY,
+                calendarClone.getActualMaximum(java.util.Calendar.HOUR_OF_DAY));
+
+        return calendarClone.getTime();
+    }
+
+    private static Date getStartOfDay(java.util.Calendar calendar, Date date) {
+        java.util.Calendar calendarClone = (java.util.Calendar) calendar
+                .clone();
+
+        calendarClone.setTime(date);
+        calendarClone.set(java.util.Calendar.MILLISECOND, 0);
+        calendarClone.set(java.util.Calendar.SECOND, 0);
+        calendarClone.set(java.util.Calendar.MINUTE, 0);
+        calendarClone.set(java.util.Calendar.HOUR, 0);
+        calendarClone.set(java.util.Calendar.HOUR_OF_DAY, 0);
+
+        return calendarClone.getTime();
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+}
\ No newline at end of file
diff --git a/uitest/src/com/vaadin/tests/themes/valo/CheckBoxes.java b/uitest/src/com/vaadin/tests/themes/valo/CheckBoxes.java
new file mode 100644
index 0000000000..65575c764b
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/CheckBoxes.java
@@ -0,0 +1,146 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.data.Item;
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.ui.CheckBox;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.OptionGroup;
+import com.vaadin.ui.VerticalLayout;
+
+public class CheckBoxes extends VerticalLayout implements View {
+    public CheckBoxes() {
+        setMargin(true);
+
+        Label h1 = new Label("Check Boxes");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        CheckBox check = new CheckBox("Checked", true);
+        row.addComponent(check);
+
+        check = new CheckBox(
+                "Checked, explicit width, so that the caption should wrap",
+                true);
+        row.addComponent(check);
+        check.setWidth("150px");
+
+        check = new CheckBox("Not checked");
+        row.addComponent(check);
+
+        check = new CheckBox(null, true);
+        check.setDescription("No caption");
+        row.addComponent(check);
+
+        check = new CheckBox("Custom color", true);
+        check.addStyleName("color1");
+        row.addComponent(check);
+
+        check = new CheckBox("Custom color", true);
+        check.addStyleName("color2");
+        check.setIcon(TestIcon.get());
+        row.addComponent(check);
+
+        check = new CheckBox("With Icon", true);
+        check.setIcon(TestIcon.get());
+        row.addComponent(check);
+
+        check = new CheckBox();
+        check.setIcon(TestIcon.get(true));
+        row.addComponent(check);
+
+        check = new CheckBox("Small", true);
+        check.addStyleName("small");
+        row.addComponent(check);
+
+        check = new CheckBox("Large", true);
+        check.addStyleName("large");
+        row.addComponent(check);
+
+        h1 = new Label("Option Groups");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        OptionGroup options = new OptionGroup("Choose one, explicit width");
+        options.setWidth("200px");
+        options.addItem("Option One");
+        Item two = options
+                .addItem("Option Two, with a longer caption that should wrap when the components width is explicitly set.");
+        options.addItem("Option Three");
+        options.select("Option One");
+        options.setItemIcon("Option One", TestIcon.get());
+        options.setItemIcon(two, TestIcon.get());
+        options.setItemIcon("Option Three", TestIcon.get(true));
+        row.addComponent(options);
+
+        options = new OptionGroup("Choose many, explicit width");
+        options.setMultiSelect(true);
+        options.setWidth("200px");
+        options.addItem("Option One");
+        two = options
+                .addItem("Option Two, with a longer caption that should wrap when the components width is explicitly set.");
+        options.addItem("Option Three");
+        options.select("Option One");
+        options.setItemIcon("Option One", TestIcon.get());
+        options.setItemIcon(two, TestIcon.get());
+        options.setItemIcon("Option Three", TestIcon.get(true));
+        row.addComponent(options);
+
+        options = new OptionGroup("Horizontal items");
+        options.addStyleName("horizontal");
+        options.addItem("Option One");
+        two = options.addItem("Option Two, with a longer caption");
+        options.addItem("Option Three");
+        options.select("Option One");
+        options.setItemIcon("Option One", TestIcon.get());
+        options.setItemIcon(two, TestIcon.get());
+        options.setItemIcon("Option Three", TestIcon.get());
+        row.addComponent(options);
+
+        options = new OptionGroup("Horizontal items, explicit width");
+        options.setMultiSelect(true);
+        options.setWidth("500px");
+        options.addStyleName("horizontal");
+        options.addItem("Option One");
+        two = options.addItem("Option Two, with a longer caption");
+        options.addItem("Option Three");
+        options.select("Option One");
+        options.setItemIcon("Option One", TestIcon.get());
+        options.setItemIcon(two, TestIcon.get());
+        options.setItemIcon("Option Three", TestIcon.get());
+        row.addComponent(options);
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/ColorPickers.java b/uitest/src/com/vaadin/tests/themes/valo/ColorPickers.java
new file mode 100644
index 0000000000..b841b0b116
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/ColorPickers.java
@@ -0,0 +1,58 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.shared.ui.colorpicker.Color;
+import com.vaadin.ui.AbstractColorPicker.PopupStyle;
+import com.vaadin.ui.ColorPicker;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.VerticalLayout;
+
+public class ColorPickers extends VerticalLayout implements View {
+    public ColorPickers() {
+        setMargin(true);
+
+        Label h1 = new Label("Color Pickers");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        ColorPicker cp = new ColorPicker();
+        cp.setDefaultCaptionEnabled(true);
+        cp.setIcon(TestIcon.get());
+        cp.setColor(new Color(138, 73, 115));
+        row.addComponent(cp);
+
+        cp = new ColorPicker();
+        cp.setPopupStyle(PopupStyle.POPUP_SIMPLE);
+        cp.setTextfieldVisibility(true);
+        row.addComponent(cp);
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java b/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java
new file mode 100644
index 0000000000..6c1253c841
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java
@@ -0,0 +1,146 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.data.Container;
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.server.ThemeResource;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.ComboBox;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.VerticalLayout;
+
+public class ComboBoxes extends VerticalLayout implements View {
+    public ComboBoxes() {
+        setMargin(true);
+
+        Label h1 = new Label("Combo Boxes");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        Container generatedContainer = ValoThemeTest.generateContainer(200,
+                false);
+        ComboBox combo = new ComboBox("Normal");
+        combo.setInputPrompt("You can type here");
+        combo.setContainerDataSource(generatedContainer);
+        combo.setNullSelectionAllowed(false);
+        combo.select(generatedContainer.getItemIds().iterator().next());
+        combo.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY);
+        combo.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY);
+        combo.setItemIcon(combo.getItemIds().iterator().next(),
+                new ThemeResource("../runo/icons/16/document.png"));
+        row.addComponent(combo);
+
+        CssLayout group = new CssLayout();
+        group.setCaption("Grouped with a Button");
+        group.addStyleName("v-component-group");
+        row.addComponent(group);
+
+        combo = new ComboBox();
+        combo.setInputPrompt("You can type here");
+        combo.setContainerDataSource(generatedContainer);
+        combo.setNullSelectionAllowed(false);
+        combo.select(generatedContainer.getItemIds().iterator().next());
+        combo.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY);
+        combo.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY);
+        combo.setWidth("240px");
+        group.addComponent(combo);
+        Button today = new Button("Do It");
+        group.addComponent(today);
+
+        combo = new ComboBox("Explicit size");
+        combo.setInputPrompt("You can type here");
+        combo.addItem("Option One");
+        combo.addItem("Option Two");
+        combo.addItem("Option Three");
+        combo.setWidth("260px");
+        combo.setHeight("60px");
+        row.addComponent(combo);
+
+        combo = new ComboBox("No text input allowed");
+        combo.setInputPrompt("You can click here");
+        combo.addItem("Option One");
+        combo.addItem("Option Two");
+        combo.addItem("Option Three");
+        combo.setTextInputAllowed(false);
+        combo.setNullSelectionAllowed(false);
+        combo.select("Option One");
+        row.addComponent(combo);
+
+        combo = new ComboBox("Disabled");
+        combo.setInputPrompt("You can't type here");
+        combo.addItem("Option One");
+        combo.addItem("Option Two");
+        combo.addItem("Option Three");
+        combo.setEnabled(false);
+        row.addComponent(combo);
+
+        combo = new ComboBox("Custom color");
+        combo.setInputPrompt("You can type here");
+        combo.setContainerDataSource(generatedContainer);
+        combo.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY);
+        combo.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY);
+        combo.addStyleName("color1");
+        row.addComponent(combo);
+
+        combo = new ComboBox("Custom color");
+        combo.setInputPrompt("You can type here");
+        combo.setContainerDataSource(generatedContainer);
+        combo.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY);
+        combo.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY);
+        combo.addStyleName("color2");
+        row.addComponent(combo);
+
+        combo = new ComboBox("Custom color");
+        combo.setInputPrompt("You can type here");
+        combo.setContainerDataSource(generatedContainer);
+        combo.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY);
+        combo.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY);
+        combo.addStyleName("color3");
+        row.addComponent(combo);
+
+        combo = new ComboBox("Small");
+        combo.setInputPrompt("You can type here");
+        combo.addItem("Option One");
+        combo.addItem("Option Two");
+        combo.addItem("Option Three");
+        combo.addStyleName("small");
+        row.addComponent(combo);
+
+        combo = new ComboBox("Large");
+        combo.setInputPrompt("You can type here");
+        combo.addItem("Option One");
+        combo.addItem("Option Two");
+        combo.addItem("Option Three");
+        combo.addStyleName("large");
+        row.addComponent(combo);
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/CommonParts.java b/uitest/src/com/vaadin/tests/themes/valo/CommonParts.java
new file mode 100644
index 0000000000..59b712d8b2
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/CommonParts.java
@@ -0,0 +1,582 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.data.Property.ValueChangeEvent;
+import com.vaadin.data.Property.ValueChangeListener;
+import com.vaadin.event.ShortcutAction.KeyCode;
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.server.AbstractErrorMessage;
+import com.vaadin.server.ErrorMessage.ErrorLevel;
+import com.vaadin.server.Page;
+import com.vaadin.server.UserError;
+import com.vaadin.shared.Position;
+import com.vaadin.shared.ui.label.ContentMode;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.Button.ClickListener;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.GridLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.MenuBar;
+import com.vaadin.ui.MenuBar.Command;
+import com.vaadin.ui.MenuBar.MenuItem;
+import com.vaadin.ui.Notification;
+import com.vaadin.ui.Panel;
+import com.vaadin.ui.TextArea;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.Window;
+import com.vaadin.ui.Window.CloseEvent;
+import com.vaadin.ui.Window.CloseListener;
+
+public class CommonParts extends VerticalLayout implements View {
+    public CommonParts() {
+        setMargin(true);
+
+        Label h1 = new Label("Common UI Elements");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        GridLayout row = new GridLayout(2, 3);
+        row.setWidth("100%");
+        row.setSpacing(true);
+        addComponent(row);
+
+        row.addComponent(loadingIndicators());
+        row.addComponent(notifications(), 1, 0, 1, 2);
+        row.addComponent(tooltips());
+        row.addComponent(windows());
+
+    }
+
+    Panel loadingIndicators() {
+        Panel p = new Panel("Loading Indicator");
+        VerticalLayout content = new VerticalLayout();
+        p.setContent(content);
+        content.setSpacing(true);
+        content.setMargin(true);
+        content.addComponent(new Label(
+                "You can test the loading indicator by pressing the buttons."));
+
+        CssLayout group = new CssLayout();
+        group.setCaption("Show the loading indicator for…");
+        group.addStyleName("v-component-group");
+        content.addComponent(group);
+        Button loading = new Button("0.8");
+        loading.addClickListener(new ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                try {
+                    Thread.sleep(800);
+                } catch (InterruptedException e) {
+                }
+            }
+        });
+        group.addComponent(loading);
+
+        Button delay = new Button("3");
+        delay.addClickListener(new ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                try {
+                    Thread.sleep(3000);
+                } catch (InterruptedException e) {
+                }
+            }
+        });
+        group.addComponent(delay);
+
+        Button wait = new Button("15");
+        wait.addClickListener(new ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                try {
+                    Thread.sleep(15000);
+                } catch (InterruptedException e) {
+                }
+            }
+        });
+        wait.addStyleName("last");
+        group.addComponent(wait);
+        Label label = new Label("&nbsp;&nbsp; seconds", ContentMode.HTML);
+        label.setSizeUndefined();
+        group.addComponent(label);
+
+        Label spinnerDesc = new Label(
+                "The theme also provides a mixin that you can use to include a spinner anywhere in your application. Below is a Label with a custom style name, for which the spinner mixin is added.");
+        spinnerDesc.addStyleName("small");
+        spinnerDesc.setCaption("Spinner");
+        content.addComponent(spinnerDesc);
+
+        Label spinner = new Label();
+        spinner.addStyleName("spinner");
+        content.addComponent(spinner);
+
+        return p;
+    }
+
+    Panel notifications() {
+        Panel p = new Panel("Notifications");
+        VerticalLayout content = new VerticalLayout() {
+            Notification notification = new Notification("");
+            TextField title = new TextField("Title");
+            TextArea description = new TextArea("Description");
+            MenuBar style = new MenuBar();
+            MenuBar type = new MenuBar();
+            String typeString = "";
+            String styleString = "";
+            TextField delay = new TextField();
+            {
+                setSpacing(true);
+                setMargin(true);
+
+                title.setInputPrompt("Title for the notification");
+                title.addValueChangeListener(new ValueChangeListener() {
+                    @Override
+                    public void valueChange(ValueChangeEvent event) {
+                        if (title.getValue() == null
+                                || title.getValue().length() == 0) {
+                            notification.setCaption(null);
+                        } else {
+                            notification.setCaption(title.getValue());
+                        }
+                    }
+                });
+                title.setValue("Notification Title");
+                title.setWidth("100%");
+                addComponent(title);
+
+                description.setInputPrompt("Description for the notification");
+                description.addStyleName("small");
+                description.addValueChangeListener(new ValueChangeListener() {
+                    @Override
+                    public void valueChange(ValueChangeEvent event) {
+                        if (description.getValue() == null
+                                || description.getValue().length() == 0) {
+                            notification.setDescription(null);
+                        } else {
+                            notification.setDescription(description.getValue());
+                        }
+                    }
+                });
+                description
+                        .setValue("A more informative message about what has happened. Nihil hic munitissimus habendi senatus locus, nihil horum? Inmensae subtilitatis, obscuris et malesuada fames. Hi omnes lingua, institutis, legibus inter se differunt.");
+                description.setWidth("100%");
+                addComponent(description);
+
+                Command typeCommand = new Command() {
+                    @Override
+                    public void menuSelected(MenuItem selectedItem) {
+                        if (selectedItem.getText().equals("Humanized")) {
+                            typeString = "";
+                            notification.setStyleName(styleString.trim());
+                        } else {
+                            typeString = selectedItem.getText().toLowerCase();
+                            notification.setStyleName(typeString + " "
+                                    + styleString.trim());
+                        }
+                        for (MenuItem item : type.getItems()) {
+                            item.setChecked(false);
+                        }
+                        selectedItem.setChecked(true);
+                    }
+                };
+
+                type.setCaption("Type");
+                MenuItem humanized = type.addItem("Humanized", typeCommand);
+                humanized.setCheckable(true);
+                humanized.setChecked(true);
+                type.addItem("Tray", typeCommand).setCheckable(true);
+                type.addItem("Warning", typeCommand).setCheckable(true);
+                type.addItem("Error", typeCommand).setCheckable(true);
+                type.addItem("System", typeCommand).setCheckable(true);
+                addComponent(type);
+                type.addStyleName("small");
+
+                Command styleCommand = new Command() {
+                    @Override
+                    public void menuSelected(MenuItem selectedItem) {
+                        styleString = "";
+                        for (MenuItem item : style.getItems()) {
+                            if (item.isChecked()) {
+                                styleString += " "
+                                        + item.getText().toLowerCase();
+                            }
+                        }
+                        if (styleString.trim().length() > 0) {
+                            notification.setStyleName(typeString + " "
+                                    + styleString.trim());
+                        } else if (typeString.length() > 0) {
+                            notification.setStyleName(typeString);
+                        } else {
+                            notification.setStyleName(null);
+                        }
+                    }
+                };
+
+                style.setCaption("Additional style");
+                style.addItem("Success", styleCommand).setCheckable(true);
+                style.addItem("Failure", styleCommand).setCheckable(true);
+                style.addItem("Bar", styleCommand).setCheckable(true);
+                style.addItem("Closable", styleCommand).setCheckable(true);
+                addComponent(style);
+                style.addStyleName("small");
+
+                CssLayout group = new CssLayout();
+                group.setCaption("Fade delay");
+                group.addStyleName("v-component-group");
+                addComponent(group);
+
+                delay.setInputPrompt("Infinite");
+                delay.addStyleName("align-right");
+                delay.addStyleName("small");
+                delay.setWidth("7em");
+                delay.addValueChangeListener(new ValueChangeListener() {
+                    @Override
+                    public void valueChange(ValueChangeEvent event) {
+                        try {
+                            notification.setDelayMsec(Integer.parseInt(delay
+                                    .getValue()));
+                        } catch (Exception e) {
+                            notification.setDelayMsec(-1);
+                            delay.setValue("");
+                        }
+
+                    }
+                });
+                delay.setValue("1000");
+                group.addComponent(delay);
+
+                Button clear = new Button("×", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        delay.setValue("");
+                    }
+                });
+                clear.addStyleName("last");
+                clear.addStyleName("small");
+                clear.addStyleName("icon-only");
+                group.addComponent(clear);
+                group.addComponent(new Label("&nbsp; msec", ContentMode.HTML));
+
+                GridLayout grid = new GridLayout(3, 3);
+                grid.setCaption("Show in position");
+                addComponent(grid);
+                grid.setSpacing(true);
+
+                Button pos = new Button("", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        notification.setPosition(Position.TOP_LEFT);
+                        notification.show(Page.getCurrent());
+                    }
+                });
+                pos.addStyleName("small");
+                grid.addComponent(pos);
+
+                pos = new Button("", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        notification.setPosition(Position.TOP_CENTER);
+                        notification.show(Page.getCurrent());
+                    }
+                });
+                pos.addStyleName("small");
+                grid.addComponent(pos);
+
+                pos = new Button("", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        notification.setPosition(Position.TOP_RIGHT);
+                        notification.show(Page.getCurrent());
+                    }
+                });
+                pos.addStyleName("small");
+                grid.addComponent(pos);
+
+                pos = new Button("", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        notification.setPosition(Position.MIDDLE_LEFT);
+                        notification.show(Page.getCurrent());
+                    }
+                });
+                pos.addStyleName("small");
+                grid.addComponent(pos);
+
+                pos = new Button("", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        notification.setPosition(Position.MIDDLE_CENTER);
+                        notification.show(Page.getCurrent());
+                    }
+                });
+                pos.addStyleName("small");
+                grid.addComponent(pos);
+
+                pos = new Button("", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        notification.setPosition(Position.MIDDLE_RIGHT);
+                        notification.show(Page.getCurrent());
+                    }
+                });
+                pos.addStyleName("small");
+                grid.addComponent(pos);
+
+                pos = new Button("", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        notification.setPosition(Position.BOTTOM_LEFT);
+                        notification.show(Page.getCurrent());
+                    }
+                });
+                pos.addStyleName("small");
+                grid.addComponent(pos);
+
+                pos = new Button("", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        notification.setPosition(Position.BOTTOM_CENTER);
+                        notification.show(Page.getCurrent());
+                    }
+                });
+                pos.addStyleName("small");
+                grid.addComponent(pos);
+
+                pos = new Button("", new ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        notification.setPosition(Position.BOTTOM_RIGHT);
+                        notification.show(Page.getCurrent());
+                    }
+                });
+                pos.addStyleName("small");
+                grid.addComponent(pos);
+
+            }
+        };
+        p.setContent(content);
+
+        return p;
+    }
+
+    Panel tooltips() {
+        Panel p = new Panel("Tooltips");
+        HorizontalLayout content = new HorizontalLayout() {
+            {
+                setSpacing(true);
+                setMargin(true);
+                addStyleName("wrapping");
+
+                addComponent(new Label(
+                        "Try out different tooltips/descriptions by hovering over the labels."));
+
+                Label label = new Label("Simple");
+                label.addStyleName("bold");
+                label.setDescription("Simple tooltip message");
+                addComponent(label);
+
+                label = new Label("Long");
+                label.addStyleName("bold");
+                label.setDescription("Long tooltip message. Inmensae subtilitatis, obscuris et malesuada fames. Salutantibus vitae elit libero, a pharetra augue.");
+                addComponent(label);
+
+                label = new Label("HTML tooltip");
+                label.addStyleName("bold");
+                label.setDescription("<div><h1>Ut enim ad minim veniam, quis nostrud exercitation</h1><p><span>Morbi fringilla convallis sapien, id pulvinar odio volutpat.</span> <span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</span> <span>Donec sed odio operae, eu vulputate felis rhoncus.</span> <span>At nos hinc posthac, sitientis piros Afros.</span> <span>Tu quoque, Brute, fili mi, nihil timor populi, nihil!</span></p><p><span>Gallia est omnis divisa in partes tres, quarum.</span> <span>Praeterea iter est quasdam res quas ex communi.</span> <span>Cum ceteris in veneratione tui montes, nascetur mus.</span> <span>Quam temere in vitiis, legem sancimus haerentia.</span> <span>Idque Caesaris facere voluntate liceret: sese habere.</span></p></div>");
+                addComponent(label);
+
+                label = new Label("With an error message");
+                label.addStyleName("bold");
+                label.setDescription("Simple tooltip message");
+                label.setComponentError(new UserError(
+                        "Something terrible has happened"));
+                addComponent(label);
+
+                label = new Label("With a long error message");
+                label.addStyleName("bold");
+                label.setDescription("Simple tooltip message");
+                label.setComponentError(new UserError(
+                        "<h2>Contra legem facit qui id facit quod lex prohibet <span>Tityre, tu patulae recubans sub tegmine fagi  dolor.</span> <span>Tityre, tu patulae recubans sub tegmine fagi  dolor.</span> <span>Prima luce, cum quibus mons aliud  consensu ab eo.</span> <span>Quid securi etiam tamquam eu fugiat nulla pariatur.</span> <span>Fabio vel iudice vincam, sunt in culpa qui officia.</span> <span>Nihil hic munitissimus habendi senatus locus, nihil horum?</span></p><p><span>Plura mihi bona sunt, inclinet, amari petere vellent.</span> <span>Integer legentibus erat a ante historiarum dapibus.</span> <span>Quam diu etiam furor iste tuus nos eludet?</span> <span>Nec dubitamus multa iter quae et nos invenerat.</span> <span>Quisque ut dolor gravida, placerat libero vel, euismod.</span> <span>Quae vero auctorem tractata ab fiducia dicuntur.</span></h2>",
+                        AbstractErrorMessage.ContentMode.HTML,
+                        ErrorLevel.CRITICAL));
+                addComponent(label);
+
+                label = new Label("Error message only");
+                label.addStyleName("bold");
+                label.setComponentError(new UserError(
+                        "Something terrible has happened"));
+                addComponent(label);
+            }
+        };
+        p.setContent(content);
+        return p;
+
+    }
+
+    Panel windows() {
+        Panel p = new Panel("Dialogs");
+        VerticalLayout content = new VerticalLayout() {
+            final Window win = new Window();
+            MenuBar footer = new MenuBar();
+            String prevHeight = "300px";
+            {
+                setSpacing(true);
+                setMargin(true);
+                win.setWidth("320px");
+                win.setHeight(prevHeight);
+                win.setClosable(false);
+                win.setResizable(false);
+                win.setContent(windowContents(true));
+                win.setCloseShortcut(KeyCode.ESCAPE, null);
+
+                Command footerCommand = new Command() {
+                    @Override
+                    public void menuSelected(MenuItem selectedItem) {
+                        if (selectedItem.getText().equals("Fixed")) {
+                            win.setContent(windowContents(true));
+                            win.setHeight(prevHeight);
+                        } else {
+                            win.setContent(windowContents(false));
+                            prevHeight = win.getHeight()
+                                    + win.getHeightUnits().toString();
+                            win.setHeight(null);
+                        }
+                        for (MenuItem item : footer.getItems()) {
+                            item.setChecked(false);
+                        }
+                        selectedItem.setChecked(true);
+                    }
+                };
+
+                footer.setCaption("Footer type");
+                MenuItem fixed = footer.addItem("Fixed", footerCommand);
+                fixed.setCheckable(true);
+                fixed.setChecked(true);
+                footer.addItem("Scroll", footerCommand).setCheckable(true);
+                footer.addStyleName("small");
+                addComponent(footer);
+
+                Command optionsCommand = new Command() {
+                    @Override
+                    public void menuSelected(MenuItem selectedItem) {
+                        if (selectedItem.getText().equals("Caption")) {
+                            win.setCaption(selectedItem.isChecked() ? "Window caption"
+                                    : null);
+                        } else if (selectedItem.getText().equals("Closable")) {
+                            win.setClosable(selectedItem.isChecked());
+                        } else if (selectedItem.getText().equals("Resizable")) {
+                            win.setResizable(selectedItem.isChecked());
+                        } else if (selectedItem.getText().equals("Modal")) {
+                            win.setModal(selectedItem.isChecked());
+                        }
+                    }
+                };
+
+                MenuBar options = new MenuBar();
+                options.setCaption("Options");
+                options.addItem("Caption", optionsCommand).setCheckable(true);
+                options.addItem("Closable", optionsCommand).setCheckable(true);
+                options.addItem("Resizable", optionsCommand).setCheckable(true);
+                options.addItem("Modal", optionsCommand).setCheckable(true);
+                options.addStyleName("small");
+                addComponent(options);
+
+                final Button show = new Button("Open Window",
+                        new ClickListener() {
+                            @Override
+                            public void buttonClick(ClickEvent event) {
+                                getUI().addWindow(win);
+                                win.center();
+                                win.focus();
+                                event.getButton().setEnabled(false);
+                            }
+                        });
+                show.addStyleName("primary");
+                addComponent(show);
+
+                win.addCloseListener(new CloseListener() {
+                    @Override
+                    public void windowClose(CloseEvent e) {
+                        show.setEnabled(true);
+                    }
+                });
+            }
+        };
+        p.setContent(content);
+        return p;
+
+    }
+
+    VerticalLayout windowContents(boolean scrollable) {
+        VerticalLayout root = new VerticalLayout();
+
+        HorizontalLayout footer = new HorizontalLayout();
+        footer.setWidth("100%");
+        footer.setSpacing(true);
+        footer.addStyleName("v-window-bottom-toolbar");
+
+        Label footerText = new Label("Footer text");
+        footerText.setSizeUndefined();
+
+        Button ok = new Button("OK");
+        ok.addStyleName("primary");
+
+        Button cancel = new Button("Cancel");
+
+        footer.addComponents(footerText, ok, cancel);
+        footer.setExpandRatio(footerText, 1);
+
+        Component content = null;
+        if (scrollable) {
+            Panel panel = new Panel();
+            panel.setSizeFull();
+            panel.addStyleName("borderless");
+            // Adds a border between the caption and the content
+            panel.addStyleName("scroll-divider");
+            VerticalLayout l = new VerticalLayout();
+            l.addComponent(new Label(
+                    "<h2>Subtitle</h2><p>Quam diu etiam furor iste tuus nos eludet? Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ut enim ad minim veniam, quis nostrud exercitation. Quae vero auctorem tractata ab fiducia dicuntur.</p><p>Quisque ut dolor gravida, placerat libero vel, euismod. Etiam habebis sem dicantur magna mollis euismod. Nihil hic munitissimus habendi senatus locus, nihil horum? Curabitur est gravida et libero vitae dictum. Ullamco laboris nisi ut aliquid ex ea commodi consequat. Morbi odio eros, volutpat ut pharetra vitae, lobortis sed nibh.</p>",
+                    ContentMode.HTML));
+            l.setMargin(true);
+            panel.setContent(l);
+            content = panel;
+        } else {
+            content = new Label(
+                    "<h2>Subtitle</h2><p>Normal type for plain text. Etiam at risus et justo dignissim congue. Phasellus laoreet lorem vel dolor tempus vehicula.</p>",
+                    ContentMode.HTML);
+        }
+        root.addComponents(content, footer);
+        if (scrollable) {
+            root.setSizeFull();
+            root.setExpandRatio(content, 1);
+        }
+        root.setMargin(!scrollable);
+
+        return root;
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/DateFields.java b/uitest/src/com/vaadin/tests/themes/valo/DateFields.java
new file mode 100644
index 0000000000..a9a9018dbb
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/DateFields.java
@@ -0,0 +1,172 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import java.util.Date;
+import java.util.Locale;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.shared.ui.datefield.Resolution;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.Button.ClickListener;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.DateField;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.InlineDateField;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.VerticalLayout;
+
+public class DateFields extends VerticalLayout implements View {
+    public DateFields() {
+        setMargin(true);
+
+        Label h1 = new Label("Date Fields");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        DateField date = new DateField("Default resolution");
+        date.setValue(new Date());
+        row.addComponent(date);
+
+        CssLayout group = new CssLayout();
+        group.setCaption("Grouped with a Button");
+        group.addStyleName("v-component-group");
+        row.addComponent(group);
+
+        final DateField date2 = new DateField();
+        group.addComponent(date2);
+
+        Button today = new Button("Today", new ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                date2.setValue(new Date());
+            }
+        });
+        group.addComponent(today);
+
+        date = new DateField("Default resolution, explicit size");
+        date.setValue(new Date());
+        row.addComponent(date);
+        date.setWidth("260px");
+        date.setHeight("60px");
+
+        date = new DateField("Second resolution");
+        date.setValue(new Date());
+        date.setResolution(Resolution.SECOND);
+        row.addComponent(date);
+
+        date = new DateField("Minute resolution");
+        date.setValue(new Date());
+        date.setResolution(Resolution.MINUTE);
+        row.addComponent(date);
+
+        date = new DateField("Hour resolution");
+        date.setValue(new Date());
+        date.setResolution(Resolution.HOUR);
+        row.addComponent(date);
+
+        date = new DateField("Disabled");
+        date.setValue(new Date());
+        date.setResolution(Resolution.HOUR);
+        date.setEnabled(false);
+        row.addComponent(date);
+
+        date = new DateField("Day resolution");
+        date.setValue(new Date());
+        date.setResolution(Resolution.DAY);
+        row.addComponent(date);
+
+        date = new DateField("Month resolution");
+        date.setValue(new Date());
+        date.setResolution(Resolution.MONTH);
+        row.addComponent(date);
+
+        date = new DateField("Year resolution");
+        date.setValue(new Date());
+        date.setResolution(Resolution.YEAR);
+        row.addComponent(date);
+
+        date = new DateField("Custom color");
+        date.setValue(new Date());
+        date.setResolution(Resolution.DAY);
+        date.addStyleName("color1");
+        row.addComponent(date);
+
+        date = new DateField("Custom color");
+        date.setValue(new Date());
+        date.setResolution(Resolution.DAY);
+        date.addStyleName("color2");
+        row.addComponent(date);
+
+        date = new DateField("Custom color");
+        date.setValue(new Date());
+        date.setResolution(Resolution.DAY);
+        date.addStyleName("color3");
+        row.addComponent(date);
+
+        date = new DateField("Small");
+        date.setValue(new Date());
+        date.setResolution(Resolution.DAY);
+        date.addStyleName("small");
+        row.addComponent(date);
+
+        date = new DateField("Large");
+        date.setValue(new Date());
+        date.setResolution(Resolution.DAY);
+        date.addStyleName("large");
+        row.addComponent(date);
+
+        date = new DateField("Week numbers");
+        date.setValue(new Date());
+        date.setResolution(Resolution.DAY);
+        date.setLocale(new Locale("fi", "fi"));
+        date.setShowISOWeekNumbers(true);
+        row.addComponent(date);
+
+        date = new DateField("US locale");
+        date.setValue(new Date());
+        date.setResolution(Resolution.SECOND);
+        date.setLocale(new Locale("en", "US"));
+        row.addComponent(date);
+
+        date = new DateField("Custom format");
+        date.setValue(new Date());
+        date.setDateFormat("E dd/MM/yyyy");
+        row.addComponent(date);
+
+        date = new InlineDateField("Date picker");
+        row.addComponent(date);
+
+        date = new InlineDateField("Date picker with week numbers");
+        date.setLocale(new Locale("fi", "fi"));
+        date.setShowISOWeekNumbers(true);
+        row.addComponent(date);
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Forms.java b/uitest/src/com/vaadin/tests/themes/valo/Forms.java
new file mode 100644
index 0000000000..da147cbdc9
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/Forms.java
@@ -0,0 +1,174 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import java.util.Date;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.server.UserError;
+import com.vaadin.ui.Alignment;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.Button.ClickListener;
+import com.vaadin.ui.CheckBox;
+import com.vaadin.ui.ComboBox;
+import com.vaadin.ui.DateField;
+import com.vaadin.ui.FormLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.OptionGroup;
+import com.vaadin.ui.RichTextArea;
+import com.vaadin.ui.TextArea;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.VerticalLayout;
+
+/**
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+public class Forms extends VerticalLayout implements View {
+    public Forms() {
+        setSpacing(true);
+        setMargin(true);
+
+        Label title = new Label("Form");
+        title.addStyleName("h1");
+        addComponent(title);
+
+        final FormLayout form = new FormLayout();
+        form.setMargin(false);
+        form.setWidth("800px");
+        form.addStyleName("light");
+        addComponent(form);
+
+        Label section = new Label("Personal Info");
+        section.addStyleName("h4");
+        form.addComponent(section);
+
+        TextField name = new TextField("Name");
+        name.setValue(ValoThemeTest.nextString(true) + " "
+                + ValoThemeTest.nextString(true));
+        name.setWidth("50%");
+        form.addComponent(name);
+
+        DateField birthday = new DateField("Birthday");
+        birthday.setValue(new Date(80, 0, 31));
+        form.addComponent(birthday);
+
+        TextField username = new TextField("Username");
+        username.setValue(ValoThemeTest.nextString(false)
+                + ValoThemeTest.nextString(false));
+        username.setRequired(true);
+        form.addComponent(username);
+
+        OptionGroup sex = new OptionGroup("Sex");
+        sex.addItem("Female");
+        sex.addItem("Male");
+        sex.select("Male");
+        sex.addStyleName("horizontal");
+        form.addComponent(sex);
+
+        section = new Label("Contact Info");
+        section.addStyleName("h4");
+        form.addComponent(section);
+
+        TextField email = new TextField("Email");
+        email.setValue(ValoThemeTest.nextString(false) + "@"
+                + ValoThemeTest.nextString(false) + ".com");
+        email.setWidth("50%");
+        email.setRequired(true);
+        form.addComponent(email);
+
+        TextField location = new TextField("Location");
+        location.setValue(ValoThemeTest.nextString(true) + ", "
+                + ValoThemeTest.nextString(true));
+        location.setWidth("50%");
+        location.setComponentError(new UserError("This address doesn't exist"));
+        form.addComponent(location);
+
+        TextField phone = new TextField("Phone");
+        phone.setWidth("50%");
+        form.addComponent(phone);
+
+        HorizontalLayout wrap = new HorizontalLayout();
+        wrap.setSpacing(true);
+        wrap.setDefaultComponentAlignment(Alignment.MIDDLE_LEFT);
+        wrap.setCaption("Newsletter");
+        CheckBox newsletter = new CheckBox("Subscribe to newsletter", true);
+        wrap.addComponent(newsletter);
+
+        ComboBox period = new ComboBox();
+        period.setTextInputAllowed(false);
+        period.addItem("Daily");
+        period.addItem("Weekly");
+        period.addItem("Montly");
+        period.setNullSelectionAllowed(false);
+        period.select("Weekly");
+        period.addStyleName("small");
+        period.setWidth("10em");
+        wrap.addComponent(period);
+        form.addComponent(wrap);
+
+        section = new Label("Additional Info");
+        section.addStyleName("h4");
+        form.addComponent(section);
+
+        TextField website = new TextField("Website");
+        website.setInputPrompt("http://");
+        website.setWidth("100%");
+        form.addComponent(website);
+
+        TextArea shortbio = new TextArea("Short Bio");
+        shortbio.setValue("Quis aute iure reprehenderit in voluptate velit esse. Cras mattis iudicium purus sit amet fermentum.");
+        shortbio.setWidth("100%");
+        shortbio.setRows(2);
+        form.addComponent(shortbio);
+
+        RichTextArea bio = new RichTextArea("Bio");
+        bio.setWidth("100%");
+        form.addComponent(bio);
+
+        form.setReadOnly(true);
+
+        Button edit = new Button("Edit", new ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                boolean readOnly = form.isReadOnly();
+                if (readOnly) {
+                    form.setReadOnly(false);
+                    form.removeStyleName("light");
+                    event.getButton().setCaption("Save");
+                    event.getButton().addStyleName("primary");
+                } else {
+                    form.setReadOnly(true);
+                    form.addStyleName("light");
+                    event.getButton().setCaption("Edit");
+                    event.getButton().removeStyleName("primary");
+                }
+            }
+        });
+
+        addComponent(edit);
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Labels.java b/uitest/src/com/vaadin/tests/themes/valo/Labels.java
new file mode 100644
index 0000000000..08378ad9e6
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/Labels.java
@@ -0,0 +1,112 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.shared.ui.MarginInfo;
+import com.vaadin.shared.ui.label.ContentMode;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Panel;
+import com.vaadin.ui.VerticalLayout;
+
+/**
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+public class Labels extends VerticalLayout implements View {
+    public Labels() {
+        setMargin(true);
+
+        Label h1 = new Label("Labels");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout split = new HorizontalLayout();
+        split.setWidth("100%");
+        addComponent(split);
+
+        VerticalLayout left = new VerticalLayout();
+        left.setMargin(new MarginInfo(false, true, false, false));
+        split.addComponent(left);
+
+        Label large = new Label(
+                "Large type for introductory text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
+        large.addStyleName("large");
+        left.addComponent(large);
+
+        Label h2 = new Label("Subtitle");
+        h2.addStyleName("h2");
+        left.addComponent(h2);
+
+        Label normal = new Label(
+                "Normal type for plain text, with a <a href=\"https://vaadin.com\">regular link</a>. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.",
+                ContentMode.HTML);
+        left.addComponent(normal);
+
+        Label h3 = new Label("Small Title");
+        h3.addStyleName("h3");
+        left.addComponent(h3);
+
+        Label small = new Label(
+                "Small type for additional text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
+        small.addStyleName("small");
+        left.addComponent(small);
+
+        Label h4 = new Label("Section Title");
+        h4.addStyleName("h4");
+        left.addComponent(h4);
+
+        normal = new Label(
+                "Normal type for plain text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
+        left.addComponent(normal);
+
+        Panel p = new Panel("Additional Label Styles");
+        split.addComponent(p);
+
+        VerticalLayout right = new VerticalLayout();
+        right.setSpacing(true);
+        right.setMargin(true);
+        p.setContent(right);
+
+        Label label = new Label(
+                "Bold type for prominent text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
+        label.addStyleName("bold");
+        right.addComponent(label);
+
+        label = new Label(
+                "Light type for subtle text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
+        label.addStyleName("light");
+        right.addComponent(label);
+
+        label = new Label("A label for success");
+        label.addStyleName("success");
+        right.addComponent(label);
+
+        label = new Label("A label for failure");
+        label.addStyleName("failure");
+        right.addComponent(label);
+
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/MenuBars.java b/uitest/src/com/vaadin/tests/themes/valo/MenuBars.java
new file mode 100644
index 0000000000..c75338912a
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/MenuBars.java
@@ -0,0 +1,138 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.server.FontAwesome;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.MenuBar;
+import com.vaadin.ui.MenuBar.Command;
+import com.vaadin.ui.MenuBar.MenuItem;
+import com.vaadin.ui.Notification;
+import com.vaadin.ui.VerticalLayout;
+
+public class MenuBars extends VerticalLayout implements View {
+    public MenuBars() {
+        setMargin(true);
+        setSpacing(true);
+
+        Label h1 = new Label("Menu Bars");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        MenuBar menuBar = getMenuBar();
+        menuBar.setCaption("Normal style");
+        addComponent(menuBar);
+
+        menuBar = getMenuBar();
+        menuBar.setCaption("Small style");
+        menuBar.addStyleName("small");
+        addComponent(menuBar);
+
+        menuBar = getMenuBar();
+        menuBar.setCaption("Borderless style");
+        menuBar.addStyleName("borderless");
+        addComponent(menuBar);
+    }
+
+    MenuBar getMenuBar() {
+        MenuBar menubar = new MenuBar();
+        menubar.setWidth("100%");
+        final MenuBar.MenuItem file = menubar.addItem("File", null);
+        final MenuBar.MenuItem newItem = file.addItem("New", null);
+        file.addItem("Open file...", null);
+        file.addSeparator();
+
+        newItem.addItem("File", null);
+        newItem.addItem("Folder", null);
+        newItem.addItem("Project...", null);
+
+        file.addItem("Close", null);
+        file.addItem("Close All", null);
+        file.addSeparator();
+
+        file.addItem("Save", null);
+        file.addItem("Save As...", null);
+        file.addItem("Save All", null);
+
+        final MenuBar.MenuItem edit = menubar.addItem("Edit", null);
+        edit.addItem("Undo", null);
+        edit.addItem("Redo", null).setEnabled(false);
+        edit.addSeparator();
+
+        edit.addItem("Cut", null);
+        edit.addItem("Copy", null);
+        edit.addItem("Paste", null);
+        edit.addSeparator();
+
+        final MenuBar.MenuItem find = edit.addItem("Find/Replace", null);
+
+        find.addItem("Google Search", null);
+        find.addSeparator();
+        find.addItem("Find/Replace...", null);
+        find.addItem("Find Next", null);
+        find.addItem("Find Previous", null);
+
+        Command check = new Command() {
+            @Override
+            public void menuSelected(MenuItem selectedItem) {
+                Notification.show(selectedItem.isChecked() ? "Checked"
+                        : "Unchecked");
+            }
+        };
+
+        final MenuBar.MenuItem view = menubar.addItem("View", null);
+        view.addItem("Show Status Bar", check).setCheckable(true);
+        MenuItem title = view.addItem("Show Title Bar", check);
+        title.setCheckable(true);
+        title.setChecked(true);
+        view.addItem("Customize Toolbar...", null);
+        view.addSeparator();
+
+        view.addItem("Actual Size", null);
+        view.addItem("Zoom In", null);
+        view.addItem("Zoom Out", null);
+
+        MenuItem fav = menubar.addItem("", check);
+        fav.setIcon(TestIcon.get());
+        fav.setStyleName("icon-only");
+        fav.setCheckable(true);
+        fav.setChecked(true);
+
+        fav = menubar.addItem("", check);
+        fav.setIcon(TestIcon.get());
+        fav.setStyleName("icon-only");
+        fav.setCheckable(true);
+        fav.setCheckable(true);
+
+        menubar.addItem("Attach", null).setIcon(FontAwesome.PAPERCLIP);
+        menubar.addItem("Undo", null).setIcon(FontAwesome.UNDO);
+        MenuItem redo = menubar.addItem("Redo", null);
+        redo.setIcon(FontAwesome.REPEAT);
+        redo.setEnabled(false);
+        menubar.addItem("Upload", null).setIcon(FontAwesome.UPLOAD);
+
+        return menubar;
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/NativeSelects.java b/uitest/src/com/vaadin/tests/themes/valo/NativeSelects.java
new file mode 100644
index 0000000000..284f7c8d6e
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/NativeSelects.java
@@ -0,0 +1,75 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.ListSelect;
+import com.vaadin.ui.NativeSelect;
+import com.vaadin.ui.TwinColSelect;
+import com.vaadin.ui.VerticalLayout;
+
+public class NativeSelects extends VerticalLayout implements View {
+    public NativeSelects() {
+        setMargin(true);
+
+        Label h1 = new Label("Selects");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        NativeSelect select = new NativeSelect("Drop Down Select");
+        row.addComponent(select);
+
+        ListSelect list = new ListSelect("List Select");
+        list.setNewItemsAllowed(true);
+        row.addComponent(list);
+
+        TwinColSelect tcs = new TwinColSelect("TwinCol Select");
+        tcs.setLeftColumnCaption("Left Column");
+        tcs.setRightColumnCaption("Right Column");
+        tcs.setNewItemsAllowed(true);
+        row.addComponent(tcs);
+
+        TwinColSelect tcs2 = new TwinColSelect("Sized TwinCol Select");
+        tcs2.setLeftColumnCaption("Left Column");
+        tcs2.setRightColumnCaption("Right Column");
+        tcs2.setNewItemsAllowed(true);
+        tcs2.setWidth("280px");
+        tcs2.setHeight("200px");
+        row.addComponent(tcs2);
+
+        for (int i = 1; i <= 10; i++) {
+            select.addItem("Option " + i);
+            list.addItem("Option " + i);
+            tcs.addItem("Option " + i);
+            tcs2.addItem("Option " + i);
+        }
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Panels.java b/uitest/src/com/vaadin/tests/themes/valo/Panels.java
new file mode 100644
index 0000000000..62bb600bde
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/Panels.java
@@ -0,0 +1,175 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.server.FontAwesome;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.MenuBar;
+import com.vaadin.ui.MenuBar.MenuItem;
+import com.vaadin.ui.Panel;
+import com.vaadin.ui.VerticalLayout;
+
+public class Panels extends VerticalLayout implements View {
+    public Panels() {
+        setMargin(true);
+
+        Label h1 = new Label("Panels & Layout panels");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        Panel panel = new Panel("Normal");
+        panel.setIcon(TestIcon.get());
+        panel.setContent(panelContent());
+        row.addComponent(panel);
+
+        panel = new Panel("Sized");
+        panel.setIcon(TestIcon.get());
+        panel.setWidth("10em");
+        panel.setHeight("250px");
+        panel.setContent(panelContent());
+        row.addComponent(panel);
+
+        panel = new Panel("Custom Caption");
+        panel.setIcon(TestIcon.get());
+        panel.addStyleName("color1");
+        panel.setContent(panelContent());
+        row.addComponent(panel);
+
+        panel = new Panel("Custom Caption");
+        panel.setIcon(TestIcon.get());
+        panel.addStyleName("color2");
+        panel.setContent(panelContent());
+        row.addComponent(panel);
+
+        panel = new Panel("Custom Caption");
+        panel.setIcon(TestIcon.get());
+        panel.addStyleName("color3");
+        panel.setContent(panelContent());
+        row.addComponent(panel);
+
+        panel = new Panel("Borderless style");
+        panel.setIcon(TestIcon.get());
+        panel.addStyleName("borderless");
+        panel.setContent(panelContent());
+        row.addComponent(panel);
+
+        panel = new Panel("Borderless + scroll divider");
+        panel.setIcon(TestIcon.get());
+        panel.addStyleName("borderless");
+        panel.addStyleName("scroll-divider");
+        panel.setContent(panelContentScroll());
+        panel.setHeight("17em");
+        row.addComponent(panel);
+
+        panel = new Panel("Well style");
+        panel.setIcon(TestIcon.get());
+        panel.addStyleName("well");
+        panel.setContent(panelContent());
+        row.addComponent(panel);
+
+        CssLayout layout = new CssLayout();
+        layout.setIcon(TestIcon.get());
+        layout.setCaption("Panel style layout");
+        layout.addStyleName("card");
+        layout.addComponent(panelContent());
+        row.addComponent(layout);
+
+        layout = new CssLayout();
+        layout.addStyleName("card");
+        row.addComponent(layout);
+        HorizontalLayout panelCaption = new HorizontalLayout();
+        panelCaption.addStyleName("v-panel-caption");
+        panelCaption.setWidth("100%");
+        // panelCaption.setDefaultComponentAlignment(Alignment.MIDDLE_LEFT);
+        Label label = new Label("Panel style layout");
+        panelCaption.addComponent(label);
+        panelCaption.setExpandRatio(label, 1);
+
+        Button action = new Button();
+        action.setIcon(FontAwesome.PENCIL);
+        action.addStyleName("borderless");
+        action.addStyleName("small");
+        action.addStyleName("icon-only");
+        panelCaption.addComponent(action);
+        MenuBar dropdown = new MenuBar();
+        dropdown.addStyleName("borderless");
+        dropdown.addStyleName("small");
+        MenuItem addItem = dropdown.addItem("", FontAwesome.CHEVRON_DOWN, null);
+        addItem.setStyleName("icon-only");
+        addItem.addItem("Settings", null);
+        addItem.addItem("Preferences", null);
+        addItem.addSeparator();
+        addItem.addItem("Sign Out", null);
+        panelCaption.addComponent(dropdown);
+
+        layout.addComponent(panelCaption);
+        layout.addComponent(panelContent());
+        layout.setWidth("14em");
+
+        layout = new CssLayout();
+        layout.setIcon(TestIcon.get());
+        layout.setCaption("Well style layout");
+        layout.addStyleName("well");
+        layout.addComponent(panelContent());
+        row.addComponent(layout);
+    }
+
+    Component panelContent() {
+        VerticalLayout layout = new VerticalLayout();
+        layout.setSizeFull();
+        layout.setMargin(true);
+        layout.setSpacing(true);
+        Label content = new Label(
+                "Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio.");
+        content.setWidth("10em");
+        layout.addComponent(content);
+        Button button = new Button("Button");
+        button.setSizeFull();
+        layout.addComponent(button);
+        return layout;
+    }
+
+    Component panelContentScroll() {
+        VerticalLayout layout = new VerticalLayout();
+        layout.setMargin(true);
+        layout.setSpacing(true);
+        Label content = new Label(
+                "Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio.");
+        content.setWidth("10em");
+        layout.addComponent(content);
+        Button button = new Button("Button");
+        layout.addComponent(button);
+        return layout;
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/PopupViews.java b/uitest/src/com/vaadin/tests/themes/valo/PopupViews.java
new file mode 100644
index 0000000000..b13544c26a
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/PopupViews.java
@@ -0,0 +1,68 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.PopupView;
+import com.vaadin.ui.PopupView.Content;
+import com.vaadin.ui.VerticalLayout;
+
+public class PopupViews extends VerticalLayout implements View {
+    public PopupViews() {
+        setMargin(true);
+
+        Label h1 = new Label("Popup Views");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        PopupView pv = new PopupView(new Content() {
+            @Override
+            public Component getPopupComponent() {
+                return new VerticalLayout() {
+                    {
+                        setMargin(true);
+                        addComponent(new Label(
+                                "Fictum,  deserunt mollit anim laborum astutumque! Magna pars studiorum, prodita quaerimus."));
+                    }
+                };
+            }
+
+            @Override
+            public String getMinimizedValueAsHTML() {
+                return "Click to view";
+            }
+        });
+
+        row.addComponent(pv);
+        pv.setHideOnMouseOut(false);
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Sliders.java b/uitest/src/com/vaadin/tests/themes/valo/Sliders.java
new file mode 100644
index 0000000000..516254cb40
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/Sliders.java
@@ -0,0 +1,201 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.shared.ui.slider.SliderOrientation;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.ProgressBar;
+import com.vaadin.ui.Slider;
+import com.vaadin.ui.VerticalLayout;
+
+public class Sliders extends VerticalLayout implements View {
+    public Sliders() {
+        setMargin(true);
+
+        Label h1 = new Label("Sliders");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        Slider slider = new Slider("Horizontal");
+        slider.setValue(50.0);
+        row.addComponent(slider);
+
+        slider = new Slider("Horizontal, sized");
+        slider.setValue(50.0);
+        slider.setWidth("200px");
+        row.addComponent(slider);
+
+        slider = new Slider("Custom handle");
+        slider.setValue(50.0);
+        slider.setWidth("200px");
+        slider.addStyleName("color1");
+        row.addComponent(slider);
+
+        slider = new Slider("Custom track");
+        slider.setValue(50.0);
+        slider.setWidth("200px");
+        slider.addStyleName("color2");
+        row.addComponent(slider);
+
+        slider = new Slider("Custom indicator");
+        slider.setValue(50.0);
+        slider.setWidth("200px");
+        slider.addStyleName("color3");
+        row.addComponent(slider);
+
+        slider = new Slider("No indicator");
+        slider.setValue(50.0);
+        slider.setWidth("200px");
+        slider.addStyleName("no-indicator");
+        row.addComponent(slider);
+
+        slider = new Slider("With ticks (not in IE8 & IE9)");
+        slider.setValue(50.0);
+        slider.setWidth("200px");
+        slider.addStyleName("ticks");
+        row.addComponent(slider);
+
+        slider = new Slider("Vertical");
+        slider.setValue(50.0);
+        slider.setOrientation(SliderOrientation.VERTICAL);
+        row.addComponent(slider);
+
+        slider = new Slider("Vertical, sized");
+        slider.setValue(50.0);
+        slider.setOrientation(SliderOrientation.VERTICAL);
+        slider.setHeight("200px");
+        row.addComponent(slider);
+
+        slider = new Slider("Custom handle");
+        slider.setValue(50.0);
+        slider.setHeight("200px");
+        slider.addStyleName("color1");
+        slider.setOrientation(SliderOrientation.VERTICAL);
+        row.addComponent(slider);
+
+        slider = new Slider("Custom track");
+        slider.setValue(50.0);
+        slider.setHeight("200px");
+        slider.addStyleName("color2");
+        slider.setOrientation(SliderOrientation.VERTICAL);
+        row.addComponent(slider);
+
+        slider = new Slider("Custom indicator");
+        slider.setValue(50.0);
+        slider.setHeight("200px");
+        slider.addStyleName("color3");
+        slider.setOrientation(SliderOrientation.VERTICAL);
+        row.addComponent(slider);
+
+        slider = new Slider("No indicator");
+        slider.setValue(50.0);
+        slider.setHeight("200px");
+        slider.addStyleName("no-indicator");
+        slider.setOrientation(SliderOrientation.VERTICAL);
+        row.addComponent(slider);
+
+        slider = new Slider("With ticks");
+        slider.setValue(50.0);
+        slider.setHeight("200px");
+        slider.addStyleName("ticks");
+        slider.setOrientation(SliderOrientation.VERTICAL);
+        row.addComponent(slider);
+
+        slider = new Slider("Disabled");
+        slider.setValue(50.0);
+        slider.setEnabled(false);
+        row.addComponent(slider);
+
+        h1 = new Label("Progress Bars");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        pb = new ProgressBar();
+        pb.setCaption("Default");
+        pb.setWidth("300px");
+        // pb.setValue(0.6f);
+        row.addComponent(pb);
+
+        pb2 = new ProgressBar();
+        pb2.setCaption("Point style");
+        pb2.setWidth("300px");
+        pb2.addStyleName("point");
+        // pb2.setValue(0.6f);
+        row.addComponent(pb2);
+
+        ProgressBar pb3 = new ProgressBar();
+        pb3.setIndeterminate(true);
+        pb3.setCaption("Indeterminate");
+        row.addComponent(pb3);
+
+    }
+
+    float progress = 0;
+
+    Thread update = new Thread() {
+        @Override
+        public void run() {
+            while (true) {
+                try {
+                    Thread.sleep(1000);
+                    getUI().access(new Runnable() {
+                        @Override
+                        public void run() {
+                            pb.setValue(progress);
+                            pb2.setValue(progress);
+                            if (progress > 1) {
+                                progress = 0;
+                            } else {
+                                progress += 0.2 * Math.random();
+                            }
+                        }
+                    });
+                } catch (InterruptedException e) {
+                    break;
+                }
+            }
+        };
+    };
+    private ProgressBar pb;
+    private ProgressBar pb2;
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        getUI().setPollInterval(1000);
+        update.start();
+    }
+
+    @Override
+    public void detach() {
+        getUI().setPollInterval(-1);
+        update.interrupt();
+        super.detach();
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/SplitPanels.java b/uitest/src/com/vaadin/tests/themes/valo/SplitPanels.java
new file mode 100644
index 0000000000..9a6d86ae04
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/SplitPanels.java
@@ -0,0 +1,95 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.shared.ui.MarginInfo;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.HorizontalSplitPanel;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.VerticalSplitPanel;
+
+public class SplitPanels extends VerticalLayout implements View {
+    public SplitPanels() {
+        setMargin(true);
+
+        Label h1 = new Label("Split Panels");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        addComponent(new Label(
+                "Outlines are just to show the areas of the SplitPanels. They are not part of the actual component style."));
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        row.setMargin(new MarginInfo(true, false, false, false));
+        addComponent(row);
+
+        HorizontalSplitPanel sp = new HorizontalSplitPanel();
+        sp.setCaption("Default style");
+        sp.setWidth("400px");
+        sp.setHeight(null);
+        sp.setFirstComponent(getContent());
+        sp.setSecondComponent(getContent());
+        row.addComponent(sp);
+
+        VerticalSplitPanel sp2 = new VerticalSplitPanel();
+        sp2.setCaption("Default style");
+        sp2.setWidth("300px");
+        sp2.setHeight("200px");
+        sp2.setFirstComponent(getContent());
+        sp2.setSecondComponent(getContent());
+        row.addComponent(sp2);
+
+        sp = new HorizontalSplitPanel();
+        sp.setCaption("Large style");
+        sp.setWidth("300px");
+        sp.setHeight("200px");
+        sp.addStyleName("large");
+        sp.setFirstComponent(getContent());
+        sp.setSecondComponent(getContent());
+        row.addComponent(sp);
+
+        sp2 = new VerticalSplitPanel();
+        sp2.setCaption("Large style");
+        sp2.setWidth("300px");
+        sp2.setHeight("200px");
+        sp2.addStyleName("large");
+        sp2.setFirstComponent(getContent());
+        sp2.setSecondComponent(getContent());
+        row.addComponent(sp2);
+    }
+
+    VerticalLayout getContent() {
+        return new VerticalLayout() {
+            {
+                setMargin(true);
+                addComponent(new Label(
+                        "Fictum,  deserunt mollit anim laborum astutumque!"));
+            }
+        };
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Tables.java b/uitest/src/com/vaadin/tests/themes/valo/Tables.java
new file mode 100644
index 0000000000..d9e4bdd3ab
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/Tables.java
@@ -0,0 +1,158 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.data.Container;
+import com.vaadin.event.dd.DragAndDropEvent;
+import com.vaadin.event.dd.DropHandler;
+import com.vaadin.event.dd.acceptcriteria.AcceptAll;
+import com.vaadin.event.dd.acceptcriteria.AcceptCriterion;
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Notification;
+import com.vaadin.ui.Table;
+import com.vaadin.ui.Table.Align;
+import com.vaadin.ui.Table.TableDragMode;
+import com.vaadin.ui.TreeTable;
+import com.vaadin.ui.VerticalLayout;
+
+public class Tables extends VerticalLayout implements View {
+
+    static final Container normalContainer = ValoThemeTest.generateContainer(
+            200, false);
+    static final Container hierarchicalContainer = ValoThemeTest
+            .generateContainer(200, true);
+
+    public Tables() {
+        setMargin(true);
+        setSpacing(true);
+
+        Label h1 = new Label("Tables");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        Table table = getTable("Normal");
+        addComponent(table);
+
+        table = getTable("Footer");
+        table.setFooterVisible(true);
+        table.setColumnFooter(ValoThemeTest.CAPTION_PROPERTY, "caption");
+        table.setColumnFooter(ValoThemeTest.DESCRIPTION_PROPERTY, "description");
+        table.setColumnFooter(ValoThemeTest.ICON_PROPERTY, "icon");
+        table.setColumnFooter(ValoThemeTest.INDEX_PROPERTY, "index");
+        addComponent(table);
+
+        table = getTable("Sized ");
+        table.setWidth("300px");
+        addComponent(table);
+
+        table = getTable("Sized w/ expand ratios");
+        table.setWidth("100%");
+        table.setColumnExpandRatio(ValoThemeTest.CAPTION_PROPERTY, 1.0f);
+        table.setColumnExpandRatio(ValoThemeTest.DESCRIPTION_PROPERTY, 1.0f);
+        // table.setColumnExpandRatio(ValoThemeTest.ICON_PROPERTY, 1.0f);
+        // table.setColumnExpandRatio(ValoThemeTest.INDEX_PROPERTY, 1.0f);
+        addComponent(table);
+
+        table = getTable("No stripes");
+        table.addStyleName("no-stripes");
+        addComponent(table);
+
+        table = getTable("No vertical lines");
+        table.addStyleName("no-vertical-lines");
+        addComponent(table);
+
+        table = getTable("No horizontal lines");
+        table.addStyleName("no-horizontal-lines");
+        addComponent(table);
+
+        table = getTable("Borderless");
+        table.addStyleName("borderless");
+        addComponent(table);
+
+        table = getTable("No headers");
+        table.addStyleName("no-header");
+        addComponent(table);
+
+        table = getTable("Compact");
+        table.addStyleName("compact");
+        addComponent(table);
+
+        table = getTable("Small");
+        table.addStyleName("small");
+        addComponent(table);
+
+        h1 = new Label("Tree Tables");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        addComponent(new Label(
+                "TreeTables have all the same features as Tables, but they support hierarchical containers as well."));
+
+        table = getTreeTable(null);
+        addComponent(table);
+    }
+
+    TreeTable getTreeTable(String caption) {
+        TreeTable table = new TreeTable(caption);
+        configure(table, true);
+        return table;
+    }
+
+    Table getTable(String caption) {
+        Table table = new Table(caption);
+        configure(table, false);
+        return table;
+    }
+
+    void configure(Table table, boolean hierarchical) {
+        table.setSelectable(true);
+        table.setMultiSelect(true);
+        table.setSortEnabled(true);
+        table.setColumnCollapsingAllowed(true);
+        table.setColumnReorderingAllowed(true);
+        table.setPageLength(6);
+        table.addActionHandler(ValoThemeTest.getActionHandler());
+        table.setDragMode(TableDragMode.MULTIROW);
+        table.setDropHandler(new DropHandler() {
+            @Override
+            public AcceptCriterion getAcceptCriterion() {
+                return AcceptAll.get();
+            }
+
+            @Override
+            public void drop(DragAndDropEvent event) {
+                Notification.show(event.getTransferable().toString());
+            }
+        });
+        Container tableData = hierarchical ? hierarchicalContainer
+                : normalContainer;
+        table.setContainerDataSource(tableData);
+        table.select(tableData.getItemIds().iterator().next());
+        // table.setSortContainerPropertyId(ValoThemeTest.CAPTION_PROPERTY);
+        // table.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY);
+        table.setColumnAlignment(ValoThemeTest.DESCRIPTION_PROPERTY,
+                Align.RIGHT);
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Tabsheets.java b/uitest/src/com/vaadin/tests/themes/valo/Tabsheets.java
new file mode 100644
index 0000000000..079a9c6b95
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/Tabsheets.java
@@ -0,0 +1,111 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.data.Property.ValueChangeEvent;
+import com.vaadin.data.Property.ValueChangeListener;
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.ui.CheckBox;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.TabSheet;
+import com.vaadin.ui.TabSheet.Tab;
+import com.vaadin.ui.VerticalLayout;
+
+public class Tabsheets extends VerticalLayout implements View {
+    public Tabsheets() {
+        setMargin(true);
+
+        Label h1 = new Label("Tabs");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        final VerticalLayout wrap = new VerticalLayout();
+        wrap.setSpacing(true);
+        addComponent(wrap);
+
+        final CheckBox closable = new CheckBox("Closable");
+        closable.setImmediate(true);
+        wrap.addComponent(closable);
+
+        final CheckBox overflow = new CheckBox("Overflow");
+        overflow.setImmediate(true);
+        wrap.addComponent(overflow);
+
+        final CheckBox icon = new CheckBox("Icons");
+        icon.setImmediate(true);
+        wrap.addComponent(icon);
+
+        ValueChangeListener update = new ValueChangeListener() {
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+                wrap.removeAllComponents();
+
+                wrap.addComponents(closable, overflow, icon);
+
+                wrap.addComponent(getTabSheet("Normal", null,
+                        closable.getValue(), overflow.getValue(),
+                        icon.getValue()));
+                wrap.addComponent(getTabSheet("Centered tabs", "centered-tabs",
+                        closable.getValue(), overflow.getValue(),
+                        icon.getValue()));
+                wrap.addComponent(getTabSheet("Equal-width tabs",
+                        "equal-width-tabs", closable.getValue(),
+                        overflow.getValue(), icon.getValue()));
+                wrap.addComponent(getTabSheet("Icons on top + padded tabbar",
+                        "icons-on-top padded-tabbar", closable.getValue(),
+                        overflow.getValue(), icon.getValue()));
+                wrap.addComponent(getTabSheet("Only selected tab is closable",
+                        "selected-closable", closable.getValue(),
+                        overflow.getValue(), icon.getValue()));
+            }
+        };
+        closable.addValueChangeListener(update);
+        overflow.addValueChangeListener(update);
+        icon.addValueChangeListener(update);
+
+        // Generate initial view
+        icon.setValue(true);
+    }
+
+    TabSheet getTabSheet(String caption, String style, boolean closable,
+            boolean scrolling, boolean icon) {
+        TabSheet ts = new TabSheet();
+        ts.addStyleName(style);
+        ts.setCaption(caption);
+
+        for (int i = 0; i < (scrolling ? 10 : 3); i++) {
+            String tabcaption = ValoThemeTest.nextString(true);
+            if (i == 0 && icon) {
+                tabcaption = null;
+            }
+            Tab t = ts.addTab(new Label(" "), tabcaption);
+            t.setClosable(closable);
+
+            if (icon) {
+                t.setIcon(TestIcon.get(i == 2));
+            }
+        }
+        return ts;
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/TestIcon.java b/uitest/src/com/vaadin/tests/themes/valo/TestIcon.java
new file mode 100644
index 0000000000..18b834f1bf
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/TestIcon.java
@@ -0,0 +1,55 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.List;
+
+import com.vaadin.server.FontAwesome;
+import com.vaadin.server.Resource;
+import com.vaadin.server.ThemeResource;
+
+/**
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+public class TestIcon {
+
+    public static Resource get() {
+        return get(false, 32);
+    }
+
+    public static Resource get(boolean isImage) {
+        return get(isImage, 32);
+    }
+
+    public static Resource get(boolean isImage, int imageSize) {
+        if (!isImage) {
+            if (++iconCount >= ICONS.size()) {
+                iconCount = 0;
+            }
+            return ICONS.get(iconCount);
+        }
+        return new ThemeResource("../runo/icons/" + imageSize + "/document.png");
+    }
+
+    static List<FontAwesome> ICONS = Collections.unmodifiableList(Arrays
+            .asList(FontAwesome.values()));
+
+    static int iconCount = 0;
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/TextFields.java b/uitest/src/com/vaadin/tests/themes/valo/TextFields.java
new file mode 100644
index 0000000000..1201071f84
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/TextFields.java
@@ -0,0 +1,186 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.RichTextArea;
+import com.vaadin.ui.TextArea;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.VerticalLayout;
+
+public class TextFields extends VerticalLayout implements View {
+    public TextFields() {
+        setMargin(true);
+
+        Label h1 = new Label("Text Fields");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        TextField tf = new TextField("Normal");
+        tf.setInputPrompt("First name");
+        tf.setIcon(TestIcon.get());
+        row.addComponent(tf);
+
+        tf = new TextField("Custom color");
+        tf.setInputPrompt("Email");
+        tf.addStyleName("color1");
+        row.addComponent(tf);
+
+        tf = new TextField("User Color");
+        tf.setInputPrompt("Gender");
+        tf.addStyleName("color2");
+        row.addComponent(tf);
+
+        tf = new TextField("Themed");
+        tf.setInputPrompt("Age");
+        tf.addStyleName("color3");
+        row.addComponent(tf);
+
+        tf = new TextField("Read-only");
+        tf.setInputPrompt("Nationality");
+        tf.setValue("Finnish");
+        tf.setReadOnly(true);
+        row.addComponent(tf);
+
+        tf = new TextField("Small");
+        tf.setValue("Field value");
+        tf.addStyleName("small");
+        row.addComponent(tf);
+
+        tf = new TextField("Large");
+        tf.setValue("Field value");
+        tf.addStyleName("large");
+        tf.setIcon(TestIcon.get(true));
+        row.addComponent(tf);
+
+        tf = new TextField("Icon inside");
+        tf.setInputPrompt("Ooh, an icon");
+        tf.addStyleName("inline-icon");
+        tf.setIcon(TestIcon.get());
+        row.addComponent(tf);
+
+        tf = new TextField("16px supported by default");
+        tf.setInputPrompt("Image icon");
+        tf.addStyleName("inline-icon");
+        tf.setIcon(TestIcon.get(true, 16));
+        row.addComponent(tf);
+
+        tf = new TextField();
+        tf.setValue("Font, no caption");
+        tf.addStyleName("inline-icon");
+        tf.setIcon(TestIcon.get());
+        row.addComponent(tf);
+
+        tf = new TextField();
+        tf.setValue("Image, no caption");
+        tf.addStyleName("inline-icon");
+        tf.setIcon(TestIcon.get(true, 16));
+        row.addComponent(tf);
+
+        CssLayout group = new CssLayout();
+        group.addStyleName("v-component-group");
+        row.addComponent(group);
+
+        tf = new TextField();
+        tf.setInputPrompt("Grouped with a button");
+        tf.addStyleName("inline-icon");
+        tf.setIcon(TestIcon.get());
+        tf.setWidth("260px");
+        group.addComponent(tf);
+
+        Button button = new Button("Do It");
+        // button.addStyleName("primary");
+        group.addComponent(button);
+
+        tf = new TextField("Borderless");
+        tf.setInputPrompt("Write here…");
+        tf.addStyleName("inline-icon");
+        tf.addStyleName("borderless");
+        tf.setIcon(TestIcon.get());
+        row.addComponent(tf);
+
+        h1 = new Label("Text Areas");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        TextArea ta = new TextArea("Normal");
+        ta.setInputPrompt("Write your comment…");
+        row.addComponent(ta);
+
+        ta = new TextArea("Inline icon");
+        ta.setInputPrompt("Inline icon not really working");
+        ta.addStyleName("inline-icon");
+        ta.setIcon(TestIcon.get());
+        row.addComponent(ta);
+
+        ta = new TextArea("Custom color");
+        ta.addStyleName("color1");
+        ta.setInputPrompt("Write your comment…");
+        row.addComponent(ta);
+
+        ta = new TextArea("Custom color, read-only");
+        ta.addStyleName("color2");
+        ta.setValue("Field value, spanning multiple lines of text");
+        ta.setReadOnly(true);
+        row.addComponent(ta);
+
+        ta = new TextArea("Custom color");
+        ta.addStyleName("color3");
+        ta.setValue("Field value, spanning multiple lines of text");
+        row.addComponent(ta);
+
+        ta = new TextArea("Small");
+        ta.addStyleName("small");
+        ta.setInputPrompt("Write your comment…");
+        row.addComponent(ta);
+
+        ta = new TextArea("Large");
+        ta.addStyleName("large");
+        ta.setInputPrompt("Write your comment…");
+        row.addComponent(ta);
+
+        ta = new TextArea("Borderless");
+        ta.addStyleName("borderless");
+        ta.setInputPrompt("Write your comment…");
+        row.addComponent(ta);
+
+        RichTextArea rta = new RichTextArea();
+        rta.setValue("<b>Some</b> <i>rich</i> content");
+        row.addComponent(rta);
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Trees.java b/uitest/src/com/vaadin/tests/themes/valo/Trees.java
new file mode 100644
index 0000000000..bb406e4f39
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/Trees.java
@@ -0,0 +1,78 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.data.Container;
+import com.vaadin.event.dd.DragAndDropEvent;
+import com.vaadin.event.dd.DropHandler;
+import com.vaadin.event.dd.acceptcriteria.AcceptAll;
+import com.vaadin.event.dd.acceptcriteria.AcceptCriterion;
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Notification;
+import com.vaadin.ui.Tree;
+import com.vaadin.ui.Tree.TreeDragMode;
+import com.vaadin.ui.VerticalLayout;
+
+public class Trees extends VerticalLayout implements View {
+    public Trees() {
+        setMargin(true);
+
+        Label h1 = new Label("Trees");
+        h1.addStyleName("h1");
+        addComponent(h1);
+
+        HorizontalLayout row = new HorizontalLayout();
+        row.addStyleName("wrapping");
+        row.setSpacing(true);
+        addComponent(row);
+
+        Tree tree = new Tree();
+        tree.setSelectable(true);
+        tree.setMultiSelect(true);
+        Container generateContainer = ValoThemeTest.generateContainer(10, true);
+        tree.setContainerDataSource(generateContainer);
+        tree.setDragMode(TreeDragMode.NODE);
+        row.addComponent(tree);
+        tree.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY);
+        tree.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY);
+        tree.expandItem(generateContainer.getItemIds().iterator().next());
+
+        tree.setDropHandler(new DropHandler() {
+            @Override
+            public AcceptCriterion getAcceptCriterion() {
+                return AcceptAll.get();
+            }
+
+            @Override
+            public void drop(DragAndDropEvent event) {
+                Notification.show(event.getTransferable().toString());
+            }
+        });
+
+        // Add actions (context menu)
+        tree.addActionHandler(ValoThemeTest.getActionHandler());
+    }
+
+    @Override
+    public void enter(ViewChangeEvent event) {
+        // TODO Auto-generated method stub
+
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/ValoThemeTest.java b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeTest.java
new file mode 100644
index 0000000000..0336be05a2
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeTest.java
@@ -0,0 +1,308 @@
+package com.vaadin.tests.themes.valo;
+
+import java.util.Iterator;
+import java.util.LinkedHashMap;
+import java.util.Map.Entry;
+
+import com.vaadin.annotations.Theme;
+import com.vaadin.annotations.Title;
+import com.vaadin.data.Container;
+import com.vaadin.data.Container.Hierarchical;
+import com.vaadin.data.Item;
+import com.vaadin.data.Property.ValueChangeEvent;
+import com.vaadin.data.Property.ValueChangeListener;
+import com.vaadin.data.util.HierarchicalContainer;
+import com.vaadin.data.util.IndexedContainer;
+import com.vaadin.event.Action;
+import com.vaadin.event.Action.Handler;
+import com.vaadin.navigator.Navigator;
+import com.vaadin.navigator.ViewChangeListener;
+import com.vaadin.server.FontAwesome;
+import com.vaadin.server.Page;
+import com.vaadin.server.Resource;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.shared.ui.label.ContentMode;
+import com.vaadin.ui.Alignment;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.Button.ClickListener;
+import com.vaadin.ui.CheckBox;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.MenuBar;
+import com.vaadin.ui.MenuBar.MenuItem;
+import com.vaadin.ui.Notification;
+import com.vaadin.ui.UI;
+
+@Theme("tests-valo")
+@Title("Valo Theme Test")
+public class ValoThemeTest extends UI {
+
+    HorizontalLayout root = new HorizontalLayout();
+    CssLayout viewDisplay = new CssLayout();
+    CssLayout menu = new CssLayout();
+    private Navigator navigator;
+    private LinkedHashMap<String, String> menuItems = new LinkedHashMap<String, String>();
+
+    @Override
+    protected void init(VaadinRequest request) {
+        // Show .v-app-loading badge
+        // try {
+        // Thread.sleep(2000);
+        // } catch (InterruptedException e) {
+        // e.printStackTrace();
+        // }
+
+        getPage().setTitle("Valo Theme Test");
+        setContent(root);
+        root.setWidth("100%");
+
+        root.addComponent(buildMenu());
+
+        viewDisplay.setWidth("100%");
+        viewDisplay.addStyleName("view");
+        root.addComponent(viewDisplay);
+        root.setExpandRatio(viewDisplay, 1);
+
+        navigator = new Navigator(this, viewDisplay);
+
+        navigator.addView("common", CommonParts.class);
+        navigator.addView("labels", Labels.class);
+        navigator.addView("buttons-and-links", ButtonsAndLinks.class);
+        navigator.addView("textfields", TextFields.class);
+        navigator.addView("datefields", DateFields.class);
+        navigator.addView("comboboxes", ComboBoxes.class);
+        navigator.addView("checkboxes", CheckBoxes.class);
+        navigator.addView("sliders", Sliders.class);
+        navigator.addView("menubars", MenuBars.class);
+        navigator.addView("panels", Panels.class);
+        navigator.addView("trees", Trees.class);
+        navigator.addView("tables", Tables.class);
+        navigator.addView("splitpanels", SplitPanels.class);
+        navigator.addView("tabs", Tabsheets.class);
+        navigator.addView("accordions", Accordions.class);
+        navigator.addView("colorpickers", ColorPickers.class);
+        navigator.addView("selects", NativeSelects.class);
+        navigator.addView("calendar", CalendarTest.class);
+        navigator.addView("forms", Forms.class);
+        navigator.addView("popupviews", PopupViews.class);
+
+        String f = Page.getCurrent().getUriFragment();
+        if (f == null || f.equals("")) {
+            navigator.navigateTo("common");
+        }
+
+        navigator.addViewChangeListener(new ViewChangeListener() {
+
+            @Override
+            public boolean beforeViewChange(ViewChangeEvent event) {
+                return true;
+            }
+
+            @Override
+            public void afterViewChange(ViewChangeEvent event) {
+                for (Iterator<Component> it = menu.iterator(); it.hasNext();) {
+                    it.next().removeStyleName("selected");
+                }
+                for (Entry<String, String> item : menuItems.entrySet()) {
+                    if (event.getViewName().equals(item.getKey())) {
+                        for (Iterator<Component> it = menu.iterator(); it
+                                .hasNext();) {
+                            Component c = it.next();
+                            if (item.getValue().equals(c.getCaption())) {
+                                c.addStyleName("selected");
+                                break;
+                            }
+                        }
+                        break;
+                    }
+                }
+            }
+        });
+
+    }
+
+    CssLayout buildMenu() {
+        // Add items
+        menuItems.put("common", "Common UI Elements");
+        menuItems.put("labels", "Labels");
+        menuItems.put("buttons-and-links", "Buttons & Links");
+        menuItems.put("textfields", "Text Fields");
+        menuItems.put("datefields", "Date Fields");
+        menuItems.put("comboboxes", "Combo Boxes");
+        menuItems.put("selects", "Selects");
+        menuItems.put("checkboxes", "Check Boxes & Option Groups");
+        menuItems.put("sliders", "Sliders & Progress Bars");
+        menuItems.put("colorpickers", "Color Pickers");
+        menuItems.put("menubars", "Menu Bars");
+        menuItems.put("trees", "Trees");
+        menuItems.put("tables", "Tables");
+        menuItems.put("panels", "Panels");
+        menuItems.put("splitpanels", "Split Panels");
+        menuItems.put("tabs", "Tabs");
+        menuItems.put("accordions", "Accordions");
+        menuItems.put("popupviews", "Popup Views");
+        menuItems.put("calendar", "Calendar");
+        menuItems.put("forms", "Forms");
+
+        menu.setStyleName("valo-menu");
+
+        HorizontalLayout top = new HorizontalLayout();
+        top.setWidth("100%");
+        top.setDefaultComponentAlignment(Alignment.MIDDLE_LEFT);
+        top.addStyleName("valo-menu-title");
+        menu.addComponent(top);
+
+        Label title = new Label("Vaadin<br><strong>Valo Theme Styles</strong>",
+                ContentMode.HTML);
+        title.setSizeUndefined();
+        top.addComponent(title);
+        top.setExpandRatio(title, 1);
+
+        MenuBar settings = new MenuBar();
+        MenuItem settingsItem = settings.addItem("", FontAwesome.COG, null);
+        settingsItem.setStyleName("icon-only");
+        settingsItem.addItem("Edit Profile", null);
+        settingsItem.addItem("Preferences", null);
+        settingsItem.addSeparator();
+        settingsItem.addItem("Sign Out", null);
+        top.addComponent(settings);
+
+        final CheckBox enabled = new CheckBox("Enabled", true);
+        enabled.setDescription("Enable or disable the components on the right side");
+        menu.addComponent(enabled);
+        enabled.addValueChangeListener(new ValueChangeListener() {
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+                viewDisplay.setEnabled(enabled.getValue());
+            }
+        });
+
+        Label label = null;
+        int count = -1;
+        for (final Entry<String, String> item : menuItems.entrySet()) {
+            if (item.getKey().equals("labels")) {
+                label = new Label("Components", ContentMode.HTML);
+                label.setPrimaryStyleName("valo-menu-subtitle");
+                label.addStyleName("h4");
+                label.setSizeUndefined();
+                menu.addComponent(label);
+            }
+            if (item.getKey().equals("panels")) {
+                label.setValue(label.getValue() + " <span class=\"badge\">"
+                        + count + "</span>");
+                count = 0;
+                label = new Label("Containers", ContentMode.HTML);
+                label.setPrimaryStyleName("valo-menu-subtitle");
+                label.addStyleName("h4");
+                label.setSizeUndefined();
+                menu.addComponent(label);
+            }
+            if (item.getKey().equals("calendar")) {
+                label.setValue(label.getValue() + " <span class=\"badge\">"
+                        + count + "</span>");
+                count = 0;
+                label = new Label("Other", ContentMode.HTML);
+                label.setPrimaryStyleName("valo-menu-subtitle");
+                label.addStyleName("h4");
+                label.setSizeUndefined();
+                menu.addComponent(label);
+            }
+            Button b = new Button(item.getValue(), new ClickListener() {
+                @Override
+                public void buttonClick(ClickEvent event) {
+                    navigator.navigateTo(item.getKey());
+                }
+            });
+            b.setPrimaryStyleName("valo-menu-item");
+            menu.addComponent(b);
+            count++;
+        }
+        label.setValue(label.getValue() + " <span class=\"badge\">" + count
+                + "</span>");
+
+        return menu;
+    }
+
+    static String[] strings = new String[] { "lorem", "ipsum", "dolor", "sit",
+            "amet", "consectetur" };
+    static int stringCount = -1;
+
+    static String nextString(boolean capitalize) {
+        if (++stringCount >= strings.length) {
+            stringCount = 0;
+        }
+        return capitalize ? strings[stringCount].substring(0, 1).toUpperCase()
+                + strings[stringCount].substring(1) : strings[stringCount];
+    }
+
+    static Handler actionHandler = new Handler() {
+        private final Action ACTION_ONE = new Action("Action One");
+        private final Action ACTION_TWO = new Action("Action Two");
+        private final Action ACTION_THREE = new Action("Action Three");
+        private final Action[] ACTIONS = new Action[] { ACTION_ONE, ACTION_TWO,
+                ACTION_THREE };
+
+        @Override
+        public void handleAction(Action action, Object sender, Object target) {
+            Notification.show(action.getCaption());
+        }
+
+        @Override
+        public Action[] getActions(Object target, Object sender) {
+            return ACTIONS;
+        }
+    };
+
+    static Handler getActionHandler() {
+        return actionHandler;
+    }
+
+    static final String CAPTION_PROPERTY = "caption";
+    static final String DESCRIPTION_PROPERTY = "description";
+    static final String ICON_PROPERTY = "icon";
+    static final String INDEX_PROPERTY = "index";
+
+    @SuppressWarnings("unchecked")
+    static Container generateContainer(final int size,
+            final boolean hierarchical) {
+        IndexedContainer container = hierarchical ? new HierarchicalContainer()
+                : new IndexedContainer();
+
+        container.addContainerProperty(CAPTION_PROPERTY, String.class, null);
+        container.addContainerProperty(ICON_PROPERTY, Resource.class, null);
+        container.addContainerProperty(INDEX_PROPERTY, Integer.class, null);
+        container
+                .addContainerProperty(DESCRIPTION_PROPERTY, String.class, null);
+        for (int i = 1; i < size + 1; i++) {
+            Item item = container.addItem(i);
+            item.getItemProperty(CAPTION_PROPERTY).setValue(
+                    nextString(true) + " " + nextString(false));
+            item.getItemProperty(INDEX_PROPERTY).setValue(i);
+            item.getItemProperty(DESCRIPTION_PROPERTY).setValue(
+                    nextString(true) + " " + nextString(false) + " "
+                            + nextString(false));
+            item.getItemProperty(ICON_PROPERTY).setValue(TestIcon.get());
+        }
+        container.getItem(container.getIdByIndex(0))
+                .getItemProperty(ICON_PROPERTY).setValue(TestIcon.get());
+
+        if (hierarchical) {
+            for (int i = 1; i < size + 1; i++) {
+                for (int j = 1; j < 5; j++) {
+                    String id = i + " -> " + j;
+                    Item child = container.addItem(id);
+                    child.getItemProperty(CAPTION_PROPERTY).setValue(
+                            nextString(true) + " " + nextString(false));
+                    child.getItemProperty(ICON_PROPERTY).setValue(
+                            TestIcon.get());
+                    ((Hierarchical) container).setChildrenAllowed(id, false);
+                    ((Hierarchical) container).setParent(id, i);
+                }
+            }
+        }
+        return container;
+    }
+}
\ No newline at end of file