Index: Dev/branches/rest-dojo-ui/client/rft/css/layout.css
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/css/layout.css	(revision 395)
+++ Dev/branches/rest-dojo-ui/client/rft/css/layout.css	(revision 396)
@@ -374,79 +374,129 @@
 }
 
-/* Experimental background colour inheritance */
-.claro div.blue.inheritBgColor,
-.claro span.blue.inheritBgColor,
+/****************************************************
+/*  Self- and Inherit Colours
+/***************************************************/
+
+/* InheritColours */
+.claro .inheritBgColor,
+.claro .bg {
+    transition: all 0.2s;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+}
+
 .claro .blue .inheritBgColor {
     background-color: #0072bc;
     color: #ffffff;
 }
-.claro div.green.inheritBgColor,
-.claro span.green.inheritBgColor,
+.claro .blue.light .inheritBgColor,
+.claro .blue .light.inheritBgColor {
+    background-color: #0794d1;
+    color: #ffffff;
+}
 .claro .green .inheritBgColor {
     background-color: #3aa605;
     color: #ffffff;
 }
-.claro div.orange.inheritBgColor,
-.claro span.orange.inheritBgColor,
+.claro .green.light .inheritBgColor,
+.claro .green .light.inheritBgColor {
+    background-color: #79ca0a;
+    color: #ffffff;
+}
 .claro .orange .inheritBgColor {
     background-color: #ff5b12;
     color: #ffffff;
 }
-.claro div.purple.inheritBgColor,
-.claro span.purple.inheritBgColor,
+.claro .orange.light .inheritBgColor,
+.claro .orange .light.inheritBgColor {
+    background-color: #ff9140;
+    color: #ffffff;
+}
+.claro .red .inheritBgColor {
+    background-color: #8c0310;
+    color: #ffffff;
+}
+.claro .red.light .inheritBgColor,
+.claro .red .light.inheritBgColor {
+   background-color: #bd0013;
+   color: #ffffff;   
+}
 .claro .purple .inheritBgColor {
     background-color: #6529b7;
     color: #ffffff;
 }
-.claro div.red.inheritBgColor,
-.claro span.red.inheritBgColor,
-.claro .red .inheritBgColor {
+.claro .purple.light .inheritBgColor,
+.claro .purple .light.inheritBgColor {
+    background-color: #993dec;
+    color: #ffffff;
+}
+.claro .white .inheritBgColor {
+    background-color: #ffffff;
+    color: #000000;
+}
+.claro .black .inheritBgColor {
+    background-color: #000000;
+    color: #ffffff;
+}
+.claro .trans .inheritBgColor {
+    background: transparent;
+    color: #ffffff;
+}
+
+/*SelfColours! */
+.claro .blue.bg {
+    background-color: #0072bc;
+    color: #ffffff;
+}
+.claro .blue.light.bg {
+    background-color: #0794d1;
+    color: #ffffff;
+}
+.claro .green.bg {
+    background-color: #3aa605;
+    color: #ffffff;
+}
+.claro .green.light.bg {
+    background-color: #79ca0a;
+    color: #ffffff;
+}
+.claro .orange.bg {
+    background-color: #ff5b12;
+    color: #ffffff;
+}
+.claro .orange.light.bg {
+    background-color: #ff9140;
+    color: #ffffff;
+}
+.claro .red.bg {
     background-color: #8c0310;
     color: #ffffff;
 }
-.claro div.trans.inheritBgColor,
-.claro span.trans.inheritBgColor,
-.claro .trans .inheritBgColor {
-    background-color: transparent;
-    color: #ffffff;
-}
-.claro div.blue.inheritBgColor.light,
-.claro span.blue.inheritBgColor.light,
-.claro .blue .inheritBgColor.light {
-    background-color: #0794d1;
-    color: #ffffff;
-}
-.claro div.green.inheritBgColor.light,
-.claro span.green.inheritBgColor.light,
-.claro .green .inheritBgColor.light {
-    background-color: #79ca0a;
-    color: #ffffff;
-}
-.claro div.orange.inheritBgColor.light,
-.claro span.orange.inheritBgColor.light,
-.claro .orange .inheritBgColor.light {
-    background-color: #ff9140;
-    color: #ffffff;
-}
-.claro div.purple.inheritBgColor.light,
-.claro span.purple.inheritBgColor.light,
-.claro .purple .inheritBgColor.light {
+.claro .red.light.bg {
+    background-color: #bd0013;
+    color: #ffffff;   
+}
+.claro .purple.bg {
+    background-color: #6529b7;
+    color: #ffffff;
+}
+.claro .purple.light.bg {
     background-color: #993dec;
     color: #ffffff;
 }
-.claro div.red.inheritBgColor.light,
-.claro span.red.inheritBgColor.light,
-.claro .red .inheritBgColor.light {
-    background-color: #bd0013;
-    color: #ffffff;
-}
-
-/*TODO: Apply these classes to display elements that need to inherit the interface's object colour!
-Remove/disable other references to these colours from files like rftButtons, rftLineWithButtons, etc to make sure it works properly.
-Put these settings in a separate "colours.css" file to separate the concern of styling these objects from other layout-oriented properties.
-When we add things like highlightColours, borders, etc, the list could become quite long, especially if more colours are added to the colour scheme in time.
-
-
-Dropdown menu on MenuBar*/
+.claro .white.bg {
+    background-color: #ffffff;
+    color: #000000;
+}
+.claro .black.bg {
+    background-color: #000000;
+    color: #ffffff;
+}
+.claro .trans.bg {
+    background: transparent;
+    color: #ffffff;
+}
+
+/*Dropdown menu on MenuBar */
 .claro .dijitMenuPopup {
 
@@ -541,5 +591,4 @@
   padding-left: 5px;
 }
-
 .labelsAndValues-valueCell {
   padding-left: 20px;
Index: Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css	(revision 395)
+++ Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css	(revision 396)
@@ -43,5 +43,4 @@
 }
 .claro .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
-    color: #0794d1;
     transition: color 0.1s;
     -moz-transition: color 0.1s;
@@ -49,6 +48,29 @@
     -o-transition: color 0.1s;
 }
-
-/*BlockButton*/
+.claro span.blue.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+.claro .blue .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+    color: #0794d1;
+}
+.claro span.orange.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+.claro .orange .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+    color: #ff9140;
+}
+.claro span.green.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+.claro .green .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+    color: #79ca0a;
+}
+.claro span.red.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+.claro .red .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+    color: #bd0013;
+}
+.claro span.purple.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+.claro .purple .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+    color: #993dec;
+}
+
+/****************************************************
+/*  BlockButton
+/***************************************************/
+
 .claro .rftBlockButton {
     height: 24px;
@@ -93,87 +115,110 @@
 }
 
-/* Color hovers */
-/* These pertain to the 'normal' blockButtons - those that are placed on an empty background (gray) */
-.claro span.orange.inheritBgColor.rftBlockButtonHover,
+/* Hover effects */
+/*Normal*/
+.claro span.blue.bg.rftBlockButtonHover,
+.claro .blue .inheritBgColor.rftBlockButtonHover {
+    background-color: #0794d1;
+}
+.claro span.orange.bg.rftBlockButtonHover,
 .claro .orange .inheritBgColor.rftBlockButtonHover {
-    background-color: #ff9140 !important;
-}
-.claro span.orange.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
+    background-color: #ff9140;
+}
+.claro span.green.bg.rftBlockButtonHover,
+.claro .green .inheritBgColor.rftBlockButtonHover {
+    background-color: #79ca0a;
+}
+.claro span.red.bg.rftBlockButtonHover,
+.claro .red .inheritBgColor.rftBlockButtonHover {
+    background-color: #bd0013;
+}
+.claro span.purple.bg.rftBlockButtonHover,
+.claro .purple .inheritBgColor.rftBlockButtonHover {
+    background-color: #993dec;
+}
+/*Light*/
+.claro span.blue.light.bg.rftBlockButtonHover .dijitButtonNode,
+.claro .blue .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
+    color: #0072bc;
+}
+.claro span.orange.light.bg.rftBlockButtonHover .dijitButtonNode,
+.claro .orange .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
+    color: #ff5b12;
+}
+.claro span.green.light.bg.rftBlockButtonHover .dijitButtonNode,
+.claro .green .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
+    color: #3aa605;
+}
+.claro span.red.light.bg.rftBlockButtonHover .dijitButtonNode,
+.claro .red .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
+    color: #8c0310;
+}
+.claro span.purple.light.bg.rftBlockButtonHover .dijitButtonNode,
+.claro .purple .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
+    color: #6529b7;
+}
+/* Set all .light .bg/.inheritBgColors hover to White background! */
+.claro span.light.bg.rftBlockButtonHover,
+.claro .light.inheritBgColor.rftBlockButtonHover {
+    background-color: #ffffff;
+}
+
+/* Active effects */
+/*Normal*/
+.claro span.blue.bg.rftBlockButtonActive .dijitButtonNode,
+.claro .blue .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
+    color: #0072bc;
+}
+.claro span.orange.bg.rftBlockButtonActive .dijitButtonNode,
 .claro .orange .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
     color: #ff5b12;
 }
-.claro span.blue.inheritBgColor.rftBlockButtonHover,
-.claro .blue .inheritBgColor.rftBlockButtonHover {
-    background-color: #0794d1 !important;
-}
-.claro span.blue.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
-.claro .blue .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
-    color: #0072bc;
-}
-.claro span.green.inheritBgColor.rftBlockButtonHover,
-.claro .green .inheritBgColor.rftBlockButtonHover {
-    background-color: #79ca0a !important;
-}
-.claro span.green.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
+.claro span.green.bg.rftBlockButtonActive .dijitButtonNode,
 .claro .green .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
     color: #3aa605;
 }
-.claro span.red.inheritBgColor.rftBlockButtonHover,
-.claro .red .inheritBgColor.rftBlockButtonHover {
-    background-color: #bd0013 !important;
-}
-.claro span.red.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
+.claro span.red.bg.rftBlockButtonActive .dijitButtonNode,
 .claro .red .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
     color: #8c0310;
 }
-.claro span.purple.inheritBgColor.rftBlockButtonHover,
-.claro .purple .inheritBgColor.rftBlockButtonHover {
-    background-color: #993dec !important;
-}
-.claro span.purple.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
+.claro span.purple.bg.rftBlockButtonActive .dijitButtonNode,
 .claro .purple .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
     color: #6529b7;
 }
+/* Set bg color to white for all normal .bg/.inheritBgColors on active! */
+.claro span.bg.rftBlockButtonActive,
 .claro .inheritBgColor.rftBlockButtonActive {
-    background-color: #ffffff !important;
-}
-
-/* These pertain to 'docked' BlockButtons, those on a coloured background, identified by the class "light" */
-.claro span.light.inheritBgColor.rftBlockButtonHover,
-.claro .light .inheritBgColor.rftBlockButtonHover {
-    background-color: #ffffff !important;
-}
-.claro span.light.inheritBgColor.rftBlockButtonHover .dijitButtonNode,
-.claro .light .inheritBgColor.rftBlockButtonHover .dijitButtonNode {
-    color: #000000;
-}
-.claro span.light.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
-.claro .light .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
-    color: #ffffff;
-}
-/* colour specific ones*/
-.claro span.orange.light.inheritBgColor.rftBlockButtonActive .dijitButtonNode,
-.claro .orange .light.inheritBgColor.rftBlockButtonActive .dijitButtonNode {
-    background-color: #ff5b12 !important;
-}
-.claro span.green.light.inheritBgColor.rftBlockButtonActive,
+    background-color: #ffffff;
+}
+/*Light*/
+.claro span.blue.light.bg.rftBlockButtonActive,
+.claro .blue .light.inheritBgColor.rftBlockButtonActive {
+    background-color: #0072bc;
+}
+.claro span.orange.light.bg.rftBlockButtonActive,
+.claro .orange .light.inheritBgColor.rftBlockButtonActive {
+    background-color: #ff5b12;
+}
+.claro span.green.light.bg.rftBlockButtonActive,
 .claro .green .light.inheritBgColor.rftBlockButtonActive {
-    background-color: #3aa605 !important;
-}
-.claro span.red.light.inheritBgColor.rftBlockButtonActive,
+    background-color: #3aa605;
+}
+.claro span.red.light.bg.rftBlockButtonActive,
 .claro .red .light.inheritBgColor.rftBlockButtonActive {
-    background-color: #8c0310 !important;
-}
-.claro span.purple.light.inheritBgColor.rftBlockButtonActive,
+    background-color: #8c0310;
+}
+.claro span.purple.light.bg.rftBlockButtonActive,
 .claro .purple .light.inheritBgColor.rftBlockButtonActive {
-    background-color: #6529b7 !important;
-}
-.claro span.blue.light.inheritBgColor.rftBlockButtonActive,
-.claro .blue .light.inheritBgColor.rftBlockButtonActive {
-    background-color: #0072bc !important;
-}
-
-
-/* InlineButton */
+    background-color: #6529b7;
+}
+/* Set text color to white for all .light.bg/.light.inheritBgColor on active! */
+.claro span.light.bg.rftBlockButtonActive .dijitButtonNode,
+.claro .light.inheritBgColor.rftBlockButtonActive .dijitButtonNode {
+    color: #ffffff;
+}
+
+/****************************************************
+/*  InlineButton
+/***************************************************/
 .claro .rftInlineButton {
     float: right;
Index: Dev/branches/rest-dojo-ui/client/rft/css/rftSelector.css
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/css/rftSelector.css	(revision 395)
+++ Dev/branches/rest-dojo-ui/client/rft/css/rftSelector.css	(revision 396)
@@ -11,10 +11,4 @@
     float: left;
     margin: 0;
-}
-
-/* Set default LWB colour to white. */
-.claro .rftSelector .rftLineWithButtons {
-    background-color: #ffffff;
-    color: #000000;
 }
 
Index: Dev/branches/rest-dojo-ui/client/rft/pages/question.html
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/pages/question.html	(revision 395)
+++ Dev/branches/rest-dojo-ui/client/rft/pages/question.html	(revision 396)
@@ -17,4 +17,5 @@
         </div>
         <div data-rft-attach-point="QuestionEditorPreviewNode"></div>
+
     </div>
 </div>
Index: Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidget.js
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidget.js	(revision 395)
+++ Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidget.js	(revision 396)
@@ -16,5 +16,4 @@
 			baseClass: 'rftLineWithButtons',
 			title: '',
-			modifiers: "blue",
 			selectable: false,
 			userObject: null,
@@ -28,5 +27,5 @@
 				this.inherited(arguments);
 				this._setupActions();
-				domClass.add(this.domNode, this.modifiers);
+				domClass.add(this.domNode, "inheritBgColor bg");
 				this.refresh();
 			},
@@ -37,5 +36,5 @@
 						properties = lang.mixin({
 							baseClass: 'rftBlockButton',
-							modifiers: this.modifiers,
+                            "class": "inheritBgColor light",
 							label: "Default",
 							iconClass: 'rftIcon rftIcon'+this.actions[action].properties.icon,
@@ -47,10 +46,8 @@
                             }, this.actions[action])
 						}, this.actions[action].properties);
-                        properties["class"] = properties.modifiers;
                         new Button(properties).placeAt(this.buttonsNode);
                     } else {
                         properties = lang.mixin({
                             baseClass: 'rftInlineButton',
-                            modifiers: 'black',
                             label: "Default",
                             showLabel: false,
@@ -63,5 +60,4 @@
                             }, this.actions[action])
                         }, this.actions[action].properties);
-                        properties["class"] = properties.modifiers;
                         new Button(properties).placeAt(this.buttonsNode);
                     }
Index: Dev/branches/rest-dojo-ui/client/rft/ui/ObjectBox.js
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/ObjectBox.js	(revision 395)
+++ Dev/branches/rest-dojo-ui/client/rft/ui/ObjectBox.js	(revision 396)
@@ -15,5 +15,4 @@
             startup: function() {
                 this.line1 = new LineWithActionsWidget({
-                    modifiers: 'green',
                     actions: {
                         "inspectIcon": {
@@ -21,5 +20,4 @@
                             properties: {
                                 blockButton: false,
-                                modifiers: "white",
                                 icon: "Inspect"
                             }
@@ -28,9 +26,7 @@
                 }).placeAt(this.line1Node);
                 this.line2 = new LineWithActionsWidget({
-                    modifiers: 'green'
                 }).placeAt(this.line1Node);
                 var line3Actions = this._createLine3Actions();
                 this.line3 = new LineWithActionsWidget({
-                    modifiers: 'green',
                     actions: line3Actions
                 }).placeAt(this.line1Node);
@@ -50,5 +46,4 @@
                             blockButton: true,
                             label: action,
-                            modifiers: "trans",
                             icon: action.charAt(0).toUpperCase()+action.slice(1)
                         }
@@ -76,3 +71,3 @@
             }
         });
-    });
+});
Index: Dev/branches/rest-dojo-ui/client/rft/ui/Selector.js
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/Selector.js	(revision 395)
+++ Dev/branches/rest-dojo-ui/client/rft/ui/Selector.js	(revision 396)
@@ -31,5 +31,4 @@
             templateString: templateString,
             baseClass: 'rftSelector',
-            modifiers: 'blue',
 
             title: "",
@@ -47,5 +46,4 @@
 
             startup: function() {
-                domClass.add(this.domNode, this.modifiers);
                 domClass.add(this.selectedColorNode, "pending");
 
@@ -69,5 +67,4 @@
                             properties: {
                                  blockButton: true,
-                                 modifiers: this.modifiers,
                                  label: action.title || actionName,
                                  icon: action.icon,
@@ -81,5 +78,4 @@
                 this._titleLine = new LineWithActionsWidget({
                     title: this.title,
-                    modifiers: this.modifiers,
                     actions: actions
                 },this.titleNode);
@@ -89,5 +85,4 @@
                 this._selectorLine = new LineWithActionsWidget({
                     title: 'None',
-                    modifiers: this.modifiers,
                     actions: {
                         "Toggle dropdown" : {
@@ -95,5 +90,4 @@
                             properties: {
                                 blockButton: true,
-                                modifiers: this.modifiers,
                                 showLabel: false,
                                 icon: "HalfArrowDown"
@@ -162,5 +156,5 @@
                                 blockButton: false,
                                 showLabel: false,
-                                icon: action.icon,
+                                icon: action.icon + " black",
                                 tooltip: action.description
                             }
Index: Dev/branches/rest-dojo-ui/client/rft/ui/lists/AccountListView.js
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/lists/AccountListView.js	(revision 395)
+++ Dev/branches/rest-dojo-ui/client/rft/ui/lists/AccountListView.js	(revision 396)
@@ -31,6 +31,5 @@
         					properties: {
         						blockButton: false,
-        						icon: "Delete",
-        						modifiers: "white"
+        						icon: "Delete"
         					}
         				}
Index: Dev/branches/rest-dojo-ui/client/rft/ui/lists/CategoryListView.js
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/lists/CategoryListView.js	(revision 395)
+++ Dev/branches/rest-dojo-ui/client/rft/ui/lists/CategoryListView.js	(revision 396)
@@ -31,6 +31,5 @@
                             properties: {
                                 blockButton: false,
-                                icon: "Delete",
-                                modifiers: "white"
+                                icon: "Delete"
                             }
                         }
Index: Dev/branches/rest-dojo-ui/client/rft/ui/lists/MultipleChoiceListView.js
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/lists/MultipleChoiceListView.js	(revision 395)
+++ Dev/branches/rest-dojo-ui/client/rft/ui/lists/MultipleChoiceListView.js	(revision 396)
@@ -31,6 +31,5 @@
                             properties: {
                                 blockButton: false,
-                                icon: "Delete",
-                                modifiers: "white"
+                                icon: "Delete"
                             }
                         }
Index: Dev/branches/rest-dojo-ui/client/rft/ui/lists/QuestionListView.js
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/lists/QuestionListView.js	(revision 395)
+++ Dev/branches/rest-dojo-ui/client/rft/ui/lists/QuestionListView.js	(revision 396)
@@ -32,5 +32,4 @@
                                 blockButton: false,
                                 icon: "Delete",
-                                modifiers: "white",
                                 label: "Remove"
                             }
@@ -41,5 +40,4 @@
                                 blockButton: false,
                                 icon: "Inspect",
-                                modifiers: "white",
                                 label: "Show info"
                             }
Index: Dev/branches/rest-dojo-ui/client/rft/ui/templates/SessionBar.html
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/templates/SessionBar.html	(revision 395)
+++ Dev/branches/rest-dojo-ui/client/rft/ui/templates/SessionBar.html	(revision 396)
@@ -1,5 +1,5 @@
 <div class="${baseClass}">
     <span class="rftIcon rftIconSession" data-dojo-attach-point="iconNode"></span>
-    <div data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-attach-point="upperNode" data-dojo-props="modifiers: 'green', actions: {'inspect':{callback: inspect, properties: {blockButton: true, modifiers: 'white'}}}"></div>
+    <div data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-attach-point="upperNode" data-dojo-props="actions: {'inspect':{callback: inspect, properties: {blockButton: true}}}"></div>
     <div data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-attach-point="lowerNode"></div>
 </div>
