toggle controller selection
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index 898e483..807aa4c 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -55,6 +55,10 @@
border-right: 1px solid white;
}
+.controller {
+ padding: .25em;
+}
+
#logo {
height: 50px;
@@ -89,3 +93,69 @@
#traceButton {
visibility: hidden
}
+
+.color1, .color2, .color3, .color4, .color5, .color6, .color7, .color8, .color9, .color10, .color11, .color12 {
+ fill: rgba(255, 255, 255, .15);
+ background-color: rgba(255, 255, 255, .15);
+}
+
+
+.color1-selected .color1 {
+ fill: #EC0033;
+ background-color: #EC0033;
+}
+
+.color2-selected .color2 {
+ fill: #FFBA00;
+ background-color: #FFBA00;
+}
+
+.color3-selected .color3 {
+ fill: #3714B0;
+ background-color: #3714B0;
+}
+
+.color4-selected .color4 {
+ fill: #B12C49;
+ background-color: #B12C49;
+}
+
+.color5-selected .color5 {
+ fill: #402C84;
+ background-color: #402C84;
+}
+
+.color6-selected .color6 {
+ fill: #990021;
+ background-color: #990021;
+}
+
+.color7-selected .color7 {
+ fill: #990021;
+ background-color: ;
+}
+
+.color8-selected .color8 {
+ fill: #A67900;
+ background-color: #A67900;
+}
+
+.color9-selected .color9 {
+ fill: #F53D65;
+ background-color: #F53D65;
+}
+
+.color10-selected .color10 {
+ fill: #1F0772;
+ background-color: #1F0772;
+}
+
+.color11-selected .color11 {
+ fill: #F56E8B;
+ background-color: #F56E8B;
+}
+
+.color12-selected .color12 {
+ fill: #6949D7;
+ background-color: #6949D7;
+}