Index: Dev/branches/rest-dojo-ui/client/rft/css/layout.css
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/css/layout.css	(revision 394)
+++ Dev/branches/rest-dojo-ui/client/rft/css/layout.css	(revision 395)
@@ -342,6 +342,39 @@
 }
 
+/* DojoX.TitleGroup, replacement of AccordionContainer in Question Editor */
+.claro .dojoxTitleGroup {
+    /* No styling yet */
+}
+.claro .dojoxTitleGroup .dijitTitlePane {
+    margin: 0;
+}
+.claro .orange .dojoxTitleGroup .dijitTitlePaneTitle {
+    background-color: #ff5b12;
+    background-image: none;
+    border: none;
+    padding: 0 4px;
+    height: 24px;
+    margin: 0;
+}
+.claro .orange .dojoxTitleGroup .dijitTitlePaneTitleHover, 
+.claro .ornage .dojoxTitleGroup .dijitTitlePanelTitleFocused {
+    background-color: #ff9140;
+}
+.claro .dojoxTitleGroup .dijitTitlePaneTextNode {
+    color: #ffffff;
+    font-size: 13px;
+    line-height: 24px;
+}
+.claro .dojoxTitleGroup .dijitTitlePaneContentOuter {
+    background-color: #444;
+    border: none;
+}
+.claro .dojoxTitleGroup .dijitTitlePaneTitleFocus {
+    margin: 0;
+}
+
 /* Experimental background colour inheritance */
 .claro div.blue.inheritBgColor,
+.claro span.blue.inheritBgColor,
 .claro .blue .inheritBgColor {
     background-color: #0072bc;
@@ -349,4 +382,5 @@
 }
 .claro div.green.inheritBgColor,
+.claro span.green.inheritBgColor,
 .claro .green .inheritBgColor {
     background-color: #3aa605;
@@ -354,4 +388,5 @@
 }
 .claro div.orange.inheritBgColor,
+.claro span.orange.inheritBgColor,
 .claro .orange .inheritBgColor {
     background-color: #ff5b12;
@@ -359,4 +394,5 @@
 }
 .claro div.purple.inheritBgColor,
+.claro span.purple.inheritBgColor,
 .claro .purple .inheritBgColor {
     background-color: #6529b7;
@@ -364,4 +400,5 @@
 }
 .claro div.red.inheritBgColor,
+.claro span.red.inheritBgColor,
 .claro .red .inheritBgColor {
     background-color: #8c0310;
@@ -369,4 +406,5 @@
 }
 .claro div.trans.inheritBgColor,
+.claro span.trans.inheritBgColor,
 .claro .trans .inheritBgColor {
     background-color: transparent;
@@ -374,4 +412,5 @@
 }
 .claro div.blue.inheritBgColor.light,
+.claro span.blue.inheritBgColor.light,
 .claro .blue .inheritBgColor.light {
     background-color: #0794d1;
@@ -379,4 +418,5 @@
 }
 .claro div.green.inheritBgColor.light,
+.claro span.green.inheritBgColor.light,
 .claro .green .inheritBgColor.light {
     background-color: #79ca0a;
@@ -384,4 +424,5 @@
 }
 .claro div.orange.inheritBgColor.light,
+.claro span.orange.inheritBgColor.light,
 .claro .orange .inheritBgColor.light {
     background-color: #ff9140;
@@ -389,4 +430,5 @@
 }
 .claro div.purple.inheritBgColor.light,
+.claro span.purple.inheritBgColor.light,
 .claro .purple .inheritBgColor.light {
     background-color: #993dec;
@@ -394,4 +436,5 @@
 }
 .claro div.red.inheritBgColor.light,
+.claro span.red.inheritBgColor.light,
 .claro .red .inheritBgColor.light {
     background-color: #bd0013;
Index: Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css	(revision 394)
+++ Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css	(revision 395)
@@ -1,3 +1,2 @@
-/* And now for the RFT specific stuff! */
 /*LargeButton*/
 .claro .rftLargeButton, 
@@ -82,4 +81,7 @@
     background-image: url('images/icons/rftIcons16b.png') !important;
 }
+.claro .rftBlockButton.rftBlockButtonActive .rftIcon {
+    background-image: url('images/icons/rftIcons16b.png') !important;
+}
 .claro .rftBlockButton.rftBlockButtonHover .dijitButtonNode {
     /*background: #999999 !important;*/
@@ -90,46 +92,86 @@
     -o-transition: background-color 0.1s;
 }
-.claro .rftBlockButton.blue .dijitButtonNode {
-    background: #0794d1;
-}
-.claro .rftBlockButton.blue.rftBlockButtonHover .dijitButtonNode {
-    background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
-    color: #0794d1;
-}
-.claro .rftBlockButton.red .dijitButtonNode {
-    background: #bd0013;
-}
-.claro .rftBlockButton.red.rftBlockButtonHover .dijitButtonNode {
-    background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
-    color: #bd0013;
-}
-.claro .rftBlockButton.green .dijitButtonNode {
-    background: #79ca0a;
-}
-.claro .rftBlockButton.green.rftBlockButtonHover .dijitButtonNode {
-    background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
-    color: #79ca0a;
-}
-.claro .rftBlockButton.orange .dijitButtonNode {
-    background: #ff9140;
-}
-.claro .rftBlockButton.orange.rftBlockButtonHover .dijitButtonNode {
-    background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
-    color: #ff9140;
-}
-.claro .rftBlockButton.purple .dijitButtonNode {
-    background: #993dec;
-}
-.claro .rftBlockButton.purple.rftBlockButtonHover .dijitButtonNode {
-    background: #ffffff !important; /* This should be changed to an appropriate color once it is defined in the colour scheme! */
-    color: #993dec;
-}
-.claro .rftBlockButton.trans .dijitButtonNode {
-    background: transparent;
-}
-.claro .rftBlockButton.trans.rftBlockButtonHover .dijitButtonNode {
-    background: #ffffff !important;
+
+/* Color hovers */
+/* These pertain to the 'normal' blockButtons - those that are placed on an empty background (gray) */
+.claro span.orange.inheritBgColor.rftBlockButtonHover,
+.claro .orange .inheritBgColor.rftBlockButtonHover {
+    background-color: #ff9140 !important;
+}
+.claro span.orange.inheritBgColor.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 .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 .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 .purple .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
+    color: #6529b7;
+}
+.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,
+.claro .green .light.inheritBgColor.rftBlockButtonActive {
+    background-color: #3aa605 !important;
+}
+.claro span.red.light.inheritBgColor.rftBlockButtonActive,
+.claro .red .light.inheritBgColor.rftBlockButtonActive {
+    background-color: #8c0310 !important;
+}
+.claro span.purple.light.inheritBgColor.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 */
Index: Dev/branches/rest-dojo-ui/client/rft/css/rftLineWithButtons.css
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/css/rftLineWithButtons.css	(revision 394)
+++ Dev/branches/rest-dojo-ui/client/rft/css/rftLineWithButtons.css	(revision 395)
@@ -20,4 +20,5 @@
     float: left;
     margin: 0 8px 0 8px;
+    overflow: hidden;
 }
 
Index: Dev/branches/rest-dojo-ui/client/rft/css/rftSelector.css
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/css/rftSelector.css	(revision 394)
+++ Dev/branches/rest-dojo-ui/client/rft/css/rftSelector.css	(revision 395)
@@ -39,6 +39,2 @@
     background-color: #00ff00;
 }
-
-.claro .rftSelector .rftSelectorOptions .rftLineWithButtons.selected {
-    
-}
Index: Dev/branches/rest-dojo-ui/client/rft/css/surveyEditor.css
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/css/surveyEditor.css	(revision 394)
+++ Dev/branches/rest-dojo-ui/client/rft/css/surveyEditor.css	(revision 395)
@@ -14,4 +14,5 @@
 .claro .surveyEditorPreviewItem .topBorder .title {
 	margin: 0 16px 0 16px;
+	font-weight: bold;
 }
 
@@ -31,3 +32,29 @@
 	padding: 8px;
 	border: 1px solid #ffffff;
+	border-top-width: 0;
+	color: #ffffff;
 }
+
+.claro div.orange .surveyEditorPreviewItemContent {
+	border-color: #ff5b12;
+}
+
+.claro div.blue .surveyEditorPreviewItemContent {
+	border-color: #0794d1;
+}
+
+.claro div.orange .surveyEditorPreviewItem.dojoDndItemAnchor .inheritBgColor {
+	background-color: #FF9140;
+}
+.claro div.blue .surveyEditorPreviewItem.dojoDndItemAnchor .inheritBgColor {
+	background-color: #0794D1;
+}
+.claro div.green .surveyEditorPreviewItem.dojoDndItemAnchor .inheritBgColor {
+	background-color: #79CA0A;
+}
+.claro div.red .surveyEditorPreviewItem.dojoDndItemAnchor .inheritBgColor {
+	background-color: #BD0013;
+}
+.claro div.purple .surveyEditorPreviewItem.dojoDndItemAnchor .inheritBgColor {
+	background-color: #993DEC;
+}
Index: Dev/branches/rest-dojo-ui/client/rft/ui/templates/QuestionEditorPreviewItem.html
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/templates/QuestionEditorPreviewItem.html	(revision 394)
+++ Dev/branches/rest-dojo-ui/client/rft/ui/templates/QuestionEditorPreviewItem.html	(revision 395)
@@ -1,20 +1,15 @@
-<div class="inheritBgColor light">
-	<div class="topBorder inheritBgColor light dojoDndHandle" data-dojo-attach-point="topBorderNode">
+<div>
+	<div class="topBorder inheritBgColor dojoDndHandle">
 		<span class="title" data-dojo-attach-point="titleNode">Default title</span>
-		<span class="floatRight">
-			<button class="blue" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftBlockButton', showLabel: false, iconClass: 'rftIcon rftIconHalfArrowUp'" data-dojo-attach-point="foldButtonNode">Fold</button>
-			<button class="blue" data-dojo-type="dijit.form.Button" data-dojo-attach-point="removeButtonNode" data-dojo-props="baseClass: 'rftBlockButton', showLabel: false, iconClass: 'rftIcon rftIconDelete'">Remove</button>
+		<span class="floatRight" data-dojo-attach-point="buttonsNode">
+			<button class="trans" data-dojo-type="dijit.form.Button" data-dojo-attach-point="editButtonNode" data-dojo-props="baseClass: 'rftBlockButton', iconClass: 'rftIcon rftIconEdit'">Edit</button>
+			<button class="trans" data-dojo-type="dijit.form.Button" data-dojo-attach-point="foldButtonNode" data-dojo-props="baseClass: 'rftBlockButton', showLabel: false, iconClass: 'rftIcon rftIconHalfArrowUp'">Fold</button>
+			<button class="trans" data-dojo-type="dijit.form.Button" data-dojo-attach-point="removeButtonNode" data-dojo-props="baseClass: 'rftBlockButton', showLabel: false, iconClass: 'rftIcon rftIconDelete'">Remove</button>
 		</span>
 	</div>
 	
 	<div class="surveyEditorPreviewItemInner" data-dojo-attach-point="innerNode">
-		<div class="surveyEditorPreviewItemContent inheritBgColor" data-dojo-attach-point="containerNode">
+		<div class="surveyEditorPreviewItemContent" data-dojo-attach-point="containerNode">
 		</div>
 	</div>
-	
-	<div class="bottomBorder inheritBgColor light" data-dojo-attach-point="bottomBorderNode">
-		<span class="floatRight">
-			<button class="trans" data-dojo-type="dijit.form.Button" data-dojo-attach-point="editButtonNode" data-dojo-props="baseClass: 'rftBlockButton', iconClass: 'rftIcon rftIconEdit'">Edit</button>
-		</span>
-	</div>
 </div>
Index: Dev/branches/rest-dojo-ui/client/rft/ui/templates/QuestionEditorToolkit.html
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/templates/QuestionEditorToolkit.html	(revision 394)
+++ Dev/branches/rest-dojo-ui/client/rft/ui/templates/QuestionEditorToolkit.html	(revision 395)
@@ -9,5 +9,5 @@
 					<div data-dojo-attach-point="listNode" class="rftLineListView"></div> 
 					<div data-dojo-attach-point="categoriesBoxNode"></div>
-					<button data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:onCategoryAdd" data-dojo-props="baseClass:'rftBlockButton', class:'orange', iconClass: 'rftIcon rftIconPlus'">Add</button><br>
+					<button class="inheritBgColor light" data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:onCategoryAdd" data-dojo-props="baseClass:'rftBlockButton', iconClass: 'rftIcon rftIconPlus'">Add</button><br>
 					<label>Topic:</label>
 					<div data-dojo-attach-point="topicBoxNode"></div>
