Index: /Dev/branches/rest-dojo-ui/client/mockup.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/mockup.html	(revision 338)
+++ /Dev/branches/rest-dojo-ui/client/mockup.html	(revision 339)
@@ -48,11 +48,10 @@
             });
         </script>
-
     </head>
-    <body class="dijitReset gamelab">
+    <body class="dijitReset claro">
         <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
+            <!-- Top menu bar -->
             <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
                 <h1>ResearchTool</h1>
-                <!-- And now the menu! -->
                 <div data-dojo-type="dijit.MenuBar">
                     <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Sessions</div>
@@ -67,5 +66,5 @@
                 </div>
             </div>
-
+            <!-- Main content window -->
             <div class="content" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
                 <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
@@ -80,5 +79,5 @@
                             Presets
                         </div>
-                        <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="tabPosition:'left-h',region:'center'">
+                        <div data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
                             <div data-dojo-type="dijit.layout.ContentPane" title="Category One">
                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
@@ -110,8 +109,10 @@
                         </div>
                     </div>
+                    <!-- "Shopping cart" -->
                     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
                         <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
-                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, class:'black'}}}"></div>
-                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, class:'black'}}}"></div>
+                            <!-- These would have to be dynamically generated instead of declared here! -->
+                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, modifiers:'white'}}}"></div>
+                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, modifiers:'white'}}}"></div>
                         </div>
                     </div>
Index: /Dev/branches/rest-dojo-ui/client/rft/css/general.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/general.css	(revision 338)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/general.css	(revision 339)
@@ -2,5 +2,5 @@
 They are typically small fixes or tweaks to adjust spacing and/or borders/colours */
 
-.gamelab .dijitTabPaneWrapper {
+.claro .dijitTabPaneWrapper {
     border: none;
 }
Index: /Dev/branches/rest-dojo-ui/client/rft/css/layout.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/layout.css	(revision 338)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/layout.css	(revision 339)
@@ -9,5 +9,5 @@
     background-color: #333333;
 }
-.gamelab {
+.claro {
     font-family: 'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
     color: #ffffff;
@@ -15,5 +15,5 @@
 
 /* Headings */
-.gamelab h1 {   
+.claro h1 {   
     /* Main logo */
     float: left;
@@ -28,5 +28,5 @@
     -moz-user-select: none;
 }
-.gamelab h2 {
+.claro h2 {
     /* Content pane title */
     font-size: 22px;
@@ -35,5 +35,5 @@
     padding: 0;
 }
-.gamelab h2 .rftIcon {
+.claro h2 .rftIcon {
     float: left;
     width: 32px;
@@ -42,9 +42,9 @@
     margin-right: 8px;
 }
-.gamelab h3 {
+.claro h3 {
     /* Section headers */
     font-size: 18px;
 }
-.gamelab h4 {
+.claro h4 {
     /* Small text headers/paragraph headers */
     font-size: 16px;
@@ -137,2 +137,76 @@
     width: 190px;
 }
+
+
+/* Tabs */
+.claro .dijitTabContainerLeft-tabs {
+    border: none;
+}
+.claro .dijitTabContainerLeft-tabs .dijitTab {
+    margin: 4px 0;
+    width: 200px;
+    height: 30px;
+}
+.claro .dijitTab {
+    color: #999999;
+    border: 1px solid #999999;
+    transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    -webkit-transition: all 0.3s;
+    -o-transition: all 0.3s;
+}
+.claro .dijitTab.dijitTabHover {
+    color: #ffffff;
+    transition: all 0.1s;
+    -moz-transition: all 0.1s;
+    -webkit-transition: all 0.1s;
+    -o-transition: all 0.1s;
+}
+.claro .dijitTab.dijitTabActive {
+    color: #0072bc;
+    transition: all 0.1s;
+    -moz-transition: all 0.1s;
+    -webkit-transition: all 0.1s;
+    -o-transition: all 0.1s;
+    /* The delay on clicking is wrong, needs to be quicker! */
+}
+.claro .dijitTab.dijitTabChecked {
+    color: #ffffff;
+    border: 1px solid transparent;
+    transition: all 0.1s;
+    -moz-transition: all 0.1s;
+    -webkit-transition: all 0.1s;
+    -o-transition: all 0.1s;
+}
+
+.claro .dijitTabContainer.blue .dijitTab.dijitTabChecked {
+    background-color: #0072bc;
+}
+.claro .dijitTabContainer.orange .dijitTab.dijitTabChecked {
+    background-color: #ff5b12;
+}
+.claro .dijitTabContainer.red .dijitTab.dijitTabChecked {
+    background-color: #8c0310;
+}
+.claro .dijitTabContainer.purple .dijitTab.dijitTabChecked {
+    background-color: #6529b7;
+}
+.claro .dijitTabContainer.green .dijitTab.dijitTabChecked {
+    background-color: #3aa605;
+}
+
+.claro .dijitTabContainer.blue .dijitTab.dijitTabActive {
+    color: #0072bc;
+}
+.claro .dijitTabContainer.orange .dijitTab.dijitTabActive {
+    color: #ff5b12;
+}
+.claro .dijitTabContainer.red .dijitTab.dijitTabActive {
+    color: #8c0310;
+}
+.claro .dijitTabContainer.purple .dijitTab.dijitTabActive {
+    color: #6529b7;
+}
+.claro .dijitTabContainer.green .dijitTab.dijitTabActive {
+    color: #3aa605;
+}
Index: /Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css	(revision 338)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css	(revision 339)
@@ -1,8 +1,8 @@
 /* And now for the RFT specific stuff! */
 /*LargeButton*/
-.gamelab .rftLargeButton {
+.claro .rftLargeButton {
     margin-right: 16px;
 }
-.gamelab .rftLargeButton .dijitButtonNode {
+.claro .rftLargeButton .dijitButtonNode {
     border: none;
     height: 24px;
@@ -17,15 +17,15 @@
     -o-transition: color 0.3s;
 }
-.gamelab .rftLargeButton .rftIcon {
+.claro .rftLargeButton .rftIcon {
     width: 24px;
     height: 24px;
     background-image: url('images/icons/rftIcons24.png');
 }
-.gamelab .rftLargeButton .dijitButtonText {
+.claro .rftLargeButton .dijitButtonText {
     line-height: 24px;
     margin-left: 6px;
     padding: 0;
 }
-.gamelab .rftLargeButton.rftLargeButtonHover .dijitButtonNode {
+.claro .rftLargeButton.rftLargeButtonHover .dijitButtonNode {
     transition: color 0.1s;
     -moz-transition: color 0.1s;
@@ -34,5 +34,5 @@
     color: #ffffff;
 }
-.gamelab .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+.claro .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
     color: #0794d1;
     transition: color 0.1s;
@@ -43,10 +43,10 @@
 
 /*BlockButton*/
-.gamelab .rftBlockButton {
+.claro .rftBlockButton {
     height: 24px;
     margin: 0;
     line-height: 20px;
 }
-.gamelab .rftBlockButton .dijitButtonNode {
+.claro .rftBlockButton .dijitButtonNode {
     height: 24px;
     padding: 0 4px;
@@ -62,13 +62,13 @@
     -o-transition: background-color 0.3s;
 }
-.gamelab .rftBlockButton .rftIcon {
+.claro .rftBlockButton .rftIcon {
     height: 16px;
     width: 16px;
     background-image: url('images/icons/rftIcons16.png');
 }
-.gamelab .rftBlockButton.rftBlockButtonHover .rftIcon {
+.claro .rftBlockButton.rftBlockButtonHover .rftIcon {
     background-image: url('images/icons/rftIcons16black.png');
 }
-.gamelab .rftBlockButton.rftBlockButtonHover .dijitButtonNode {
+.claro .rftBlockButton.rftBlockButtonHover .dijitButtonNode {
     /*background: #999999 !important;*/
     /* Currently not used, only applicable when all the different colours of BlockButton need the same background colour on hover */
@@ -78,36 +78,36 @@
     -o-transition: background-color 0.1s;
 }
-.gamelab .rftBlockButton.blue .dijitButtonNode {
+.claro .rftBlockButton.blue .dijitButtonNode {
     background: #0794d1;
 }
-.gamelab .rftBlockButton.blue.rftBlockButtonHover .dijitButtonNode {
+.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;
 }
-.gamelab .rftBlockButton.red .dijitButtonNode {
+.claro .rftBlockButton.red .dijitButtonNode {
     background: #bd0013;
 }
-.gamelab .rftBlockButton.red.rftBlockButtonHover .dijitButtonNode {
+.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;
 }
-.gamelab .rftBlockButton.green .dijitButtonNode {
+.claro .rftBlockButton.green .dijitButtonNode {
     background: #79ca0a;
 }
-.gamelab .rftBlockButton.green.rftBlockButtonHover .dijitButtonNode {
+.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;
 }
-.gamelab .rftBlockButton.orange .dijitButtonNode {
+.claro .rftBlockButton.orange .dijitButtonNode {
     background: #ff9140;
 }
-.gamelab .rftBlockButton.orange.rftBlockButtonHover .dijitButtonNode {
+.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;
 }
-.gamelab .rftBlockButton.purple .dijitButtonNode {
+.claro .rftBlockButton.purple .dijitButtonNode {
     background: #993dec;
 }
-.gamelab .rftBlockButton.purple.rftBlockButtonHover .dijitButtonNode {
+.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;
@@ -116,9 +116,10 @@
 
 /* InlineButton */
-.gamelab .rftInlineButton {
+.claro .rftInlineButton {
+    float: right;
     height: 24px;
-    margin: 0 -6px 0 -2px;
+    width: 24px;
 }
-.gamelab .rftInlineButton .dijitButtonNode {
+.claro .rftInlineButton .dijitButtonNode {
     width: 24px;
     height: 24px;
@@ -128,32 +129,27 @@
     border: none;
 }
-.gamelab .rftInlineButton .rftIcon {
+.claro .rftInlineButton .rftIcon {
     width: 16px;
     height: 16px;
-    margin: 0 4px 0 4px;
     background-image: url('images/icons/rftIcons16.png');
 }
-.gamelab .rftInlineButton.white .rftIcon {
+.claro .rftInlineButton.white .rftIcon {
     background-image: url('images/icons/rftIcons16.png');
 }
-.gamelab .rftInlineButton.black .rftIcon {
+.claro .rftInlineButton.black .rftIcon {
     background-image: url('images/icons/rftIcons16black.png');
 }
-.gamelab .rftInlineButton.rftInlineButtonHover .dijitButtonNode {
-    /* No changes so far */
-    /*background-color: #ff00ff;*/
-}
-.gamelab .rftInlineButton.rftInlineButtonHover .rftIcon {
+.claro .rftInlineButton.rftInlineButtonHover .rftIcon {
     /* We should use either the displacement or the background image change, not both! */
     /*background-image: url('../../icons/images/rftIcons16c.png');*/
-    margin: 1px 4px -1px 4px;
+    margin-top: 1px;
 }
-.gamelab .rftInlineButton.rftInlineButtonActive .rftIcon {
+.claro .rftInlineButton.rftInlineButtonActive .rftIcon {
     /* This "afterclick" is optional. Check to see if people like it or not! */
-    margin: 2px 4px -2px 4px;
+    /* Good, the displacement on click does not come from these settings! */
 }
 
 /* MainMenuButton */
-.gamelab .dijitMenuBar .rftMainMenuButton {
+.claro .dijitMenuBar .rftMainMenuButton {
     border: none;
     height: 30px;
@@ -173,5 +169,5 @@
     -o-transition: all 0.3s;
 }
-.gamelab .dijitMenuBar .rftMainMenuButton.dijitMenuItemHover {
+.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemHover {
     color: #ffffff;
     font-size: 26px;
@@ -181,5 +177,5 @@
     -o-transition: all 0.1s;
 }
-.gamelab .dijitMenuBar .rftMainMenuButton.dijitMenuItemActive {
+.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemActive {
     color: #0794d1 !important;
     font-size: 26px;
@@ -189,5 +185,5 @@
     -o-transition: all 0.1s;
 }
-.gamelab .dijitMenuBar .rftMainMenuButton.dijitMenuItemSelected {
+.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemSelected {
     color: #ffffff;
     font-size: 26px;
Index: /Dev/branches/rest-dojo-ui/client/rft/css/rftSelector.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/rftSelector.css	(revision 338)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/rftSelector.css	(revision 339)
@@ -1,14 +1,17 @@
-.gamelab .rftSelector {
+.claro .rftSelector {
     margin: 4px;
     font-size: 13px;
 }
-.gamelab .rftLineWithButtons {
+.claro .rftLineWithButtons {
     height: 24px;
     line-height: 24px;
     font-size: 13px;
-    margin: 0;
+    margin: 4px 0;
     white-space: nowrap;
 }
-.gamelab .rftLineWithButtons .rftLineWithButtonsButtons {
+.claro .rftSelector .rftLineWithButtons {
+    margin: 0;
+}
+.claro .rftLineWithButtons .rftLineWithButtonsButtons {
     float: right;
     height: 24px;
@@ -17,13 +20,13 @@
     padding: 0;
 }
-.gamelab .rftLineWithButtons .rftLineWithButtonsButtons .rftBlockButton {
+.claro .rftLineWithButtons .rftLineWithButtonsButtons .rftBlockButton {
     float: right;
     clear: none;
 }
-.gamelab .rftLineWithButtons .rftLineWithButtonsTitle {
+.claro .rftLineWithButtons .rftLineWithButtonsTitle {
     float: left;
     margin: 0 8px 0 8px;
 }
-.gamelab .rftSelectorSelected .rftSelectorColor {
+.claro .rftSelectorSelected .rftSelectorColor {
     width: 8px;
     height: 24px;
@@ -32,26 +35,48 @@
 }
 
+/* Own standard colour settings */
+.claro .rftLineWithButtons.blue {
+    background-color: #0072bc;
+    color: #ffffff;
+}
+.claro .rftLineWithButtons.red {
+    background-color: #8c0310;
+    color: #ffffff;
+}
+.claro .rftLineWithButtons.green {
+    background-color: #3aa605;
+    color: #ffffff;
+}
+.claro .rftLineWithButtons.purple {
+    background-color: #6529b7;
+    color: #ffffff;
+}
+.claro .rftLineWithButtons.orange {
+    background-color: #ff5b12;
+    color: #ffffff;
+}
+
 /* Background colour settings for the various contexts of rftLineWithButtons */
-.gamelab .rftSelector .rftLineWithButtons {
+.claro .rftSelector .rftLineWithButtons {
     background-color: #ffffff;
     color: #000000;
 }
-.gamelab .blue.rftSelector .rftLineWithButtons {
+.claro .blue.rftSelector .rftLineWithButtons {
     background-color: #0072bc;
     color: #ffffff;
 }
-.gamelab .red.rftSelector .rftLineWithButtons {
+.claro .red.rftSelector .rftLineWithButtons {
     background-color: #8c0310;
     color: #ffffff;
 }
-.gamelab .green.rftSelector .rftLineWithButtons {
+.claro .green.rftSelector .rftLineWithButtons {
     background-color: #3aa605;
     color: #ffffff;
 }
-.gamelab .purple.rftSelector .rftLineWithButtons {
+.claro .purple.rftSelector .rftLineWithButtons {
     background-color: #6529b7;
     color: #ffffff;
 }
-.gamelab .orange.rftSelector .rftLineWithButtons {
+.claro .orange.rftSelector .rftLineWithButtons {
     background-color: #ff5b12;
     color: #ffffff;
@@ -59,9 +84,9 @@
 
 /* Black-on-white setting for non-header lines in the rftSelector */
-.gamelab .rftSelector .rftSelectorSelected .rftLineWithButtons {
+.claro .rftSelector .rftSelectorSelected .rftLineWithButtons {
     background-color: #ffffff;
     color: #000000;
 }
-.gamelab .rftSelector .rftSelectorOptions .rftLineWithButtons {
+.claro .rftSelector .rftSelectorOptions .rftLineWithButtons {
     background-color: #ffffff;
     color: #000000;
@@ -69,18 +94,11 @@
 
 /* Colour settings for the rftSelectorColor status indicator */
-.gamelab .rftSelectorSelected .rftSelectorColor.conflict {
+.claro .rftSelectorSelected .rftSelectorColor.conflict {
     background-color: #ff0000;
 }
-.gamelab .rftSelectorSelected .rftSelectorColor.pending {
+.claro .rftSelectorSelected .rftSelectorColor.pending {
     background-color: #ff8000;
 }
-.gamelab .rftSelectorSelected .rftSelectorColor.success {
+.claro .rftSelectorSelected .rftSelectorColor.success {
     background-color: #00ff00;
 }
-
-/*  NOT SURE WHAT THIS DOES ATM...KEEP HERE FOR FUTURE REFERENCE IF NON-SELECTOR LINES FAIL TO DISPLAY PROPERLY
-.gamelab .rftSelector .rftSelectorCategory .rftLineWithButtons {
-    display: inline-block;
-    width: 100% !important;
-}
-*/
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidgetThijs.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidgetThijs.js	(revision 338)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidgetThijs.js	(revision 339)
@@ -2,5 +2,5 @@
     'dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin',
     'dojo/text!./templates/LineWithActionsWidget.html'
-],
+    ],
     function(declare,lang,on,dom,domClass,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
         return declare('rft.ui.LineWithActionsWidgetThijs',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
@@ -8,5 +8,5 @@
             baseClass: 'rftLineWithButtons',
             title: '',
-            modifiers: "red",
+            modifiers: "blue",
             userObject: null,
             actions: {},
@@ -25,6 +25,5 @@
                     
                     if (this.actions[action].properties.blockButton == true) {  // BlockButton
-                        var properties = lang.mixin(
-                        {
+                        var properties = lang.mixin({
                             baseClass: 'rftBlockButton',
                             modifiers: this.modifiers,
@@ -38,18 +37,19 @@
                         this.actions[action].properties);
                         properties["class"] = properties.modifiers;
-                        
                         new Button(properties).placeAt(this.buttonsNode);
                     } else {    //InlineButton
-                        new Button(
-                            lang.mixin({
-                                baseClass: 'rftInlineButton',
-                                "class": "black",
-                                showLabel: false,
-                                iconClass: 'rftIcon rftIcon'+action,
-                                title: action,
-                                onClick: lang.hitch(this, function(){
-                                    this.actions[action].callback(this.userObject);
-                                })
-                            }, this.actions[action].properties)).placeAt(this.buttonsNode);
+                        var properties = lang.mixin({
+                            baseClass: 'rftInlineButton',
+                            modifiers: 'black',
+                            showLabel: false,
+                            iconClass: 'rftIcon rftIcon'+action,
+                            title: action,
+                            onClick: lang.hitch(this, function(){
+                                this.actions[action].callback(this.userObject);
+                            })
+                        },
+                        this.actions[action].properties);
+                        properties["class"] = properties.modifiers;
+                        new Button(properties).placeAt(this.buttonsNode);
                     }
                 }
