Index: Dev/branches/rest-dojo-ui/client/mockup.html
===================================================================
--- Dev/branches/rest-dojo-ui/client/mockup.html	(revision 333)
+++ Dev/branches/rest-dojo-ui/client/mockup.html	(revision 335)
@@ -43,7 +43,4 @@
                 'rft/ui/LineWithActionsWidgetThijs',
                 'rft/ui/TitleGroup',
-                'rft/ui/LargeButton',
-                'rft/ui/BlockButton',
-                'rft/ui/InlineButton',
                 'dojo/domReady!'
             ],function(parser){
@@ -86,9 +83,9 @@
                         <div title="Emotional, moral and relational attitudes" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Emotional, moral and relational attitudes'"></div>
                         <div title="The professional as a participant" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="selected:true">
-                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Intrinsic motivation'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Extrinsic motivation'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Motivation to participate'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Experience with games'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Participant context'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Intrinsic motivation', color: 'blue'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Extrinsic motivation', color: 'blue'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Motivation to participate', color: 'blue'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Experience with games', color: 'blue'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Participant context', color: 'blue'"></div>
                         </div>
                         <div title="Declarative, procedural and stragegic knowledge" data-dojo-type="dijit.layout.ContentPane"></div>
@@ -102,10 +99,5 @@
                         <div>Selected question conflicts with an included question. You can only swap these.</div>
                         
-                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Save'">Save</button>
-                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Cancel'">Cancel</button>
-                        <button data-dojo-type="rft.ui.BlockButton" data-dojo-props="highlightColor: 'Orange', iconType: 'Accept'">Add to survey</button>
-                        <button data-dojo-type="rft.ui.BlockButton" data-dojo-props="highlightColor: 'Orange', iconType: 'Cancel'">Cancel</button>
-                        <button data-dojo-type="rft.ui.InlineButton" data-dojo-props="highlightColor: 'White', iconType: 'Help', label:'Help?'">Add to survey</button>
-                        <button data-dojo-type="rft.ui.InlineButton" data-dojo-props="highlightColor: 'White', iconType: 'Inspect', label:'See more details'">Add to survey</button>
+
                     </div>
                 </div>
@@ -120,9 +112,8 @@
                     </div>
                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
-                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Settings'">Properties</button>
-                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Preview'">Preview</button>
-                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Undo'">Discard</button>
-                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Accept'">Accept changes</button>
-
+                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconSettings'">Properties</button>
+                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconPreview'">Preview</button>
+                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconCancel'">Discard</button>
+                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconAccept'">Accept changes</button>
                     </div>
                 </div>
Index: Dev/branches/rest-dojo-ui/client/rft/css/general.css
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/css/general.css	(revision 335)
+++ Dev/branches/rest-dojo-ui/client/rft/css/general.css	(revision 335)
@@ -0,0 +1,3 @@
+.gamelab .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 335)
+++ Dev/branches/rest-dojo-ui/client/rft/css/layout.css	(revision 335)
@@ -0,0 +1,129 @@
+*:focus {
+    outline: none;
+}
+html,body {
+    width: 100%;
+    height: 100%;
+    font-size: .813em;
+    background-color: #333333;
+}
+.gamelab {
+    font-family: 'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
+    color: #ffffff;
+}
+
+/* Headings */
+.gamelab h1 {
+    font-size: 3em;
+    margin-bottom: 0.727em;
+    font-weight: normal !important;
+}
+.gamelab h2 {
+    font-size: 1.375em;
+    line-height: 1.5em;
+    margin-top: 1em;
+    margin-bottom: 0.60em;
+    font-weight: normal;
+}
+.gamelab h3,
+.gamelab h4,
+.gamelab h5,
+.gamelab h6 {
+    font-size: 1.125em;
+    font-weight: normal;
+}
+.mainLogo {
+    float: left;
+    height: 50px;
+    font-size: 50px;
+    width: auto;
+    -webkit-margin: 5px 20px 5px 20px !important;
+    padding: 0 !important;
+    line-height: 50px;
+    color: #999999;
+}
+.gamelab .dijitMenuBar.mainMenu {
+    width: auto;
+    float: right;
+    margin: 10px 50px 10px 20px;
+}
+.breadcrumbs {
+    float: left;
+    clear: left;
+    width: 100%;
+    text-align: center;
+}
+.breadcrumb {
+    color: #999999;
+    font-size: 13px;
+}
+.breadcrumbCurrent {
+    color: #ffffff;
+    font-size: 14px;
+}
+.menuItem {
+    margin: 0px 5px 0px 5px;
+}
+.content {
+    width: 100%;
+    display: block;
+    clear: both;
+    background-color: #555555;
+}
+.loginLabel {
+    float: left;
+    clear: left;
+    width: 100px;
+}
+.loginInput {
+    float: left;
+    clear: right;
+    width: 150px;
+}
+.rftMultipleChoiceWidget {
+    display: table;
+}
+.rftMultipleChoiceWidget .row {
+    display: table-row;
+}
+.rftMultipleChoiceWidget .rowBox {
+    display: table-cell;
+}
+.rftMultipleChoiceWidget .rowText {
+    display: table-cell;
+    width: 100px;
+}
+.rftMultipleChoiceWidget .rowBtn {
+    display: table-cell;
+    width: 30px;
+}
+
+/* Basic layout */
+.gamelab .header {
+    background-color: #333333;
+    height: 80px;
+    font-size: 16px;
+}
+.title {
+    height: 24px;
+    padding: 4px 0;
+    margin: 4px;
+}
+.title .titleIcon {
+    float: left;
+    width: 32px;
+    height: 32px;
+    clear: none;
+    margin-right: 8px;
+    margin-top: -4px;
+    margin-bottom: -4px;
+}
+.title .titleText {
+    float: left;
+    line-height: 24px;
+    font-size: 24px;
+    margin: 0;
+}
+.verticalTabList {
+    width: 190px;
+}
Index: Dev/branches/rest-dojo-ui/client/rft/css/main.css
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/css/main.css	(revision 333)
+++ Dev/branches/rest-dojo-ui/client/rft/css/main.css	(revision 335)
@@ -1,149 +1,6 @@
-*:focus {
-    outline: none;
-}
+@import url('layout.css');
+@import url('general.css');
 
-html,body {
-    width: 100%;
-    height: 100%;
-    font-size: .813em;
-    background-color: #333333;
-}
-
-.gamelab {
-    font-family: 'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
-    color: #ffffff;
-}
-
-/* Headings */
-.gamelab h1 {
-    font-size: 3em;
-    margin-bottom: 0.727em;
-    font-weight: normal !important;
-}
-.gamelab h2 {
-    font-size: 1.375em;
-    line-height: 1.5em;
-    margin-top: 1em;
-    margin-bottom: 0.60em;
-    font-weight: normal;
-}
-.gamelab h3,
-.gamelab h4,
-.gamelab h5,
-.gamelab h6 {
-    font-size: 1.125em;
-    font-weight: normal;
-}
-
-.mainLogo {
-    float: left;
-    height: 50px;
-    font-size: 50px;
-    width: auto;
-    -webkit-margin: 5px 20px 5px 20px !important;
-    padding: 0 !important;
-    line-height: 50px;
-    color: #999999;
-}
-
-.gamelab .dijitMenuBar.mainMenu {
-    width: auto;
-    float: right;
-    margin: 10px 50px 10px 20px;
-}
-
-.breadcrumbs {
-    float: left;
-    clear: left;
-    width: 100%;
-    text-align: center;
-}
-
-.breadcrumb {
-    color: #999999;
-    font-size: 13px;
-}
-
-.breadcrumbCurrent {
-    color: #ffffff;
-    font-size: 14px;
-}
-
-.menuItem {
-    margin: 0px 5px 0px 5px;
-}
-
-.content {
-    width: 100%;
-    display: block;
-    clear: both;
-    background-color: #555555;
-}
-
-.loginLabel {
-    float: left;
-    clear: left;
-    width: 100px;
-}
-
-.loginInput {
-    float: left;
-    clear: right;
-    width: 150px;
-}
-
-.rftMultipleChoiceWidget {
-    display: table;
-}
-
-.rftMultipleChoiceWidget .row {
-    display: table-row;
-}
-
-.rftMultipleChoiceWidget .rowBox {
-    display: table-cell;
-}
-
-.rftMultipleChoiceWidget .rowText {
-    display: table-cell;
-    width: 100px;
-}
-
-.rftMultipleChoiceWidget .rowBtn {
-    display: table-cell;
-    width: 30px;
-}
-
-/* Basic layout */
-.gamelab .header {
-    background-color: #333333;
-    height: 80px;
-    font-size: 16px;
-}
-
-.title {
-    height: 24px;
-    padding: 4px 0;
-    margin: 4px;
-}
-
-.title .titleIcon {
-    float: left;
-    width: 32px;
-    height: 32px;
-    clear: none;
-    margin-right: 8px;
-    margin-top: -4px;
-    margin-bottom: -4px;
-}
-
-.title .titleText {
-    float: left;
-    line-height: 24px;
-    font-size: 24px;
-    margin: 0;
-}
-
-.verticalTabList {
-    width: 190px;
-}
+@import url('rftButtons.css');
+@import url('rftIcons.css');
+@import url('rftSelector.css');
Index: Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css	(revision 335)
+++ Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css	(revision 335)
@@ -0,0 +1,154 @@
+/* And now for the RFT specific stuff! */
+/*LargeButton*/
+.gamelab .rftLargeButton {
+    margin-right: 16px;
+}
+.gamelab .rftLargeButton .dijitButtonNode {
+    border: none;
+    height: 24px;
+    background-image: none;
+    background: transparent;
+    color: #999999;
+    font-size: 20px;
+    box-shadow: none;
+    transition: color 0.3s;
+    -moz-transition: color 0.3s;
+    -webkit-transition: color 0.3s;
+    -o-transition: color 0.3s;
+}
+.gamelab .rftLargeButton .rftIcon {
+    width: 24px;
+    height: 24px;
+    background-image: url('images/icons/rftIcons24.png');
+}
+.gamelab .rftLargeButton .dijitButtonText {
+    line-height: 24px;
+    margin-left: 6px;
+    padding: 0;
+}
+.gamelab .rftLargeButton.rftLargeButtonHover .dijitButtonNode {
+    transition: color 0.1s;
+    -moz-transition: color 0.1s;
+    -webkit-transition: color 0.1s;
+    -o-transition: color 0.1s;
+    color: #ffffff;
+}
+.gamelab .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+    color: #0794d1;
+    transition: color 0.1s;
+    -moz-transition: color 0.1s;
+    -webkit-transition: color 0.1s;
+    -o-transition: color 0.1s;
+}
+
+/*BlockButton*/
+.gamelab .rftBlockButton {
+    height: 24px;
+    margin: 0;
+    line-height: 20px;
+}
+.gamelab .rftBlockButton .dijitButtonNode {
+    height: 24px;
+    padding: 0 4px;
+    border: none;
+    background-image: none;
+    color: #ffffff;
+    font-size: 13px;
+    border-radius: 0;
+    -moz-border-radius: 0;
+    transition: background-color 0.3s;
+    -moz-transition: background-color 0.3s;
+    -webkit-transition: background-color 0.3s;
+    -o-transition: background-color 0.3s;
+}
+.gamelab .rftBlockButton .rftIcon {
+    height: 16px;
+    width: 16px;
+    background-image: url('images/icons/rftIcons16.png');
+}
+.gamelab .rftBlockButton.rftBlockButtonHover .rftIcon {
+    background-image: url('images/icons/rftIcons16black.png');
+}
+.gamelab .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 */
+    transition: background-color 0.1s;
+    -moz-transition: background-color 0.1s;
+    -webkit-transition: background-color 0.1s;
+    -o-transition: background-color 0.1s;
+}
+.gamelab .rftBlockButton.blue .dijitButtonNode {
+    background: #0794d1;
+}
+.gamelab .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 {
+    background: #bd0013;
+}
+.gamelab .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 {
+    background: #79ca0a;
+}
+.gamelab .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 {
+    background: #ff9140;
+}
+.gamelab .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 {
+    background: #993dec;
+}
+.gamelab .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;
+}
+
+
+/* InlineButton */
+.gamelab .rftInlineButton {
+    height: 24px;
+    margin: 0 -6px 0 -2px;
+}
+.gamelab .rftInlineButton .dijitButtonNode {
+    width: 24px;
+    height: 24px;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    border: none;
+}
+.gamelab .rftInlineButton .rftIcon {
+    width: 16px;
+    height: 16px;
+    margin: 0 4px 0 4px;
+    background-image: url('images/icons/rftIcons16.png');
+}
+.gamelab .rftInlineButton.white .rftIcon {
+    background-image: url('images/icons/rftIcons16.png');
+}
+.gamelab .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 {
+    /* 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;
+}
+.gamelab .rftInlineButton.rftInlineButtonActive .rftIcon {
+    /* This "afterclick" is optional. Check to see if people like it or not! */
+    margin: 2px 4px -2px 4px;
+}
Index: Dev/branches/rest-dojo-ui/client/rft/css/rftIcons.css
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/css/rftIcons.css	(revision 335)
+++ Dev/branches/rest-dojo-ui/client/rft/css/rftIcons.css	(revision 335)
@@ -0,0 +1,125 @@
+/*  
+    The icon's parent element class decides the icon size and url. (.rftLargeButton .rftIcon / .rftInlineButton .rftIcon, for example)
+    The icon gets two classes: .rftIcon (which sets general spacing/positioning, etc), 
+    and an icon identifier such as .rftIconAccept (Which sets the background offset.
+*/
+.rftIcon {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    background-repeat: no-repeat;
+}
+
+/* Settings for different icon sizes and contexts */
+.rftIcon.rftMainIcon {
+    float: left;
+    width: 32px;
+    height: 32px;
+    background-image: url('images/icons/rftIcons32.png');
+}
+
+/*  Specific icon indices 
+    If extra icons are added to the spritesheets, make sure that shared icons retain the same index!
+    Also, if possible put common/shared icons at the start of the list to prevent excessively large spritesheets.
+*/
+.rftIconApplication {
+    background-position: 0px 0px;
+}
+.rftIconDashboard {
+    background-position: -32px 0px;
+}
+.rftIconSession {
+    background-position: -64px 0px;
+}
+.rftIconSurvey {
+    background-position: -96px 0px;
+}
+.rftIconQuestion {
+    background-position: -128px 0px;
+}
+.rftIconQuestionAlt {
+    background-position: -160px 0px;
+}
+.rftIconAccept {
+    background-position: -192px 0px;
+}
+.rftIconCancel {
+    background-position: -224px 0px;
+}
+.rftIconDelete {
+    background-position: -256px 0px;
+}
+.rftIconHome {
+    background-position: -288px 0px;
+}
+.rftIconPreview {
+    background-position: -320px 0px;
+}
+.rftIconSave {
+    background-position: -352px 0px;
+}
+.rftIconSettings {
+    background-position: -384px 0px;
+}
+.rftIconUndo {
+    background-position: -416px 0px;
+}
+.rftIconPrevious {
+    background-position: -448px 0px;
+}
+.rftIconNext {
+    background-position: -480px 0px;
+}
+.rftIconHalfArrowUp {
+    background-position: -512px 0px;
+}
+.rftIconHalfArrowDown {
+    background-position: -544px 0px;
+}
+.rftIconHalfArrowLeft {
+    background-position: -576px 0px;
+}
+.rftIconHalfArrowRight {
+    background-position: -608px 0px;
+}
+.rftIconFullArrowUp {
+    background-position: -640px 0px;
+}
+.rftIconFullArrowDown {
+    background-position: -672px 0px;
+}
+.rftIconFullArrowLeft {
+    background-position: -704px 0px;
+}
+.rftIconFullArrowRight {
+    background-position: -736px 0px;
+}
+.rftIconHelp {
+    background-position: -768px 0px;
+}
+.rftIconInspect {
+    background-position: -800px 0px;
+}
+.rftIconMinus {
+    background-position: -832px 0px;
+}
+.rftIconPlus {
+    background-position: -864px 0px;
+}
+
+/*  The following do not yet have an icon and are displaced a bit to make room for possible extra inlineIcons.
+    The reserved offsets are:  896, 928, 960, 992, 1024, 1056 and 1088 */
+.rftIconRespondent {
+    background-position: -1120px 0px;
+}
+.rftIconAnswerSet {
+    background-position: -1152px 0px;
+}
+.rftIconAnswer {
+    background-position: -1184px 0px;
+}
+.rftIconGameData {
+    background-position: -1216px 0px;
+}
Index: Dev/branches/rest-dojo-ui/client/rft/css/rftSelector.css
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/css/rftSelector.css	(revision 335)
+++ Dev/branches/rest-dojo-ui/client/rft/css/rftSelector.css	(revision 335)
@@ -0,0 +1,65 @@
+/* IT'S LIKE THAT, AND THAT'S THE WAY IT IS! HUH! */
+.gamelab .rftSelector {
+    margin: 4px;
+    font-size: 13px;
+    color: #ffffff;
+}
+.gamelab .rftLineWithButtons {
+    height: 24px;
+    line-height: 24px;
+    font-size: 13px;
+    margin: 0;
+    background-color: #ffffff;
+    color: #000000;
+    white-space: nowrap;
+}
+.gamelab .rftSelector .rftSelectorCategory {
+    height: 24px;
+}
+
+/* Colour scheme */
+.gamelab .blue.rftSelector .rftSelectorCategory {
+        background-color: #0072bc;
+}
+.gamelab .red.rftSelector .rftSelectorCategory {
+        background-color: #8c0310;
+}
+.gamelab .purple.rftSelector .rftSelectorCategory {
+        background-color: #6529b7;
+}
+.gamelab .green.rftSelector .rftSelectorCategory {
+        background-color: #3aa605;
+}
+.gamelab .orange.rftSelector .rftSelectorCategory {
+        background-color: #ff5b12;
+}
+.gamelab .rftLineWithButtons .rftLineWithButtonsButtons {
+    float: right;
+    height: 24px;
+    line-height: 24px;
+    margin: 0;
+}
+.gamelab .rftLineWithButtons .rftLineWithButtonsButtons .rftBlockButton {
+    float: right;
+    clear: none;
+}
+.gamelab .rftSelector .rftLineWithButtons .rftLineWithButtonsTitle {
+    float: left;
+    margin: 0 8px 0 8px;
+}
+.gamelab .rftSelectorSelected .rftSelectorColor {
+    width: 8px;
+    height: 24px;
+    background-color: #ff0000;
+    float: left;
+    margin: 0;
+}
+.gamelab .rftSelectorSelected rftSelectorColor.red {
+    /* NO. Don't do that! Change the background color property using JS instead! Event handler for changeContentStatus on the rftSelector!!! */
+}
+.gamelab .rftSelector .rftSelectorCategory .rftLineWithButtons {
+    display: inline-block;
+    color: #ffffff;
+    background-color: transparent;
+    width: 100% !important;
+}
Index: Dev/branches/rest-dojo-ui/client/rft/ui/BlockButton.js
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/BlockButton.js	(revision 333)
+++ 	(revision )
@@ -1,32 +1,0 @@
-define([
-    'dojo/_base/declare',
-    'dijit/form/Button',
-    'dojo/dom-class'
-    ], function(declare, Button, domClass){
-        return declare("rft.ui.BlockButton", [Button], {
-            showLabel: true,    // Or false? Documentation is retarded about this boolean... true = no label???
-            highlightColor: 'blue', // Use the CSS class "highlightBlue" this adds to style active/hover transitions.
-            baseClass: "rftBlockButton",
-            postMixInProperties: function(){
-                if (this.iconType == "none" || this.iconType == null) {
-                    this.iconClass = "dijitNoIcon";
-                } else {
-                    this.iconClass = "rftIcon rftIcon"+this.iconType;
-                }
-                this.inherited(arguments);  
-            },
-            postCreate: function(){
-                var capitalizedHighlightColor = this.highlightColor.charAt(0).toUpperCase() + this.highlightColor.slice(1);
-                domClass.add(this.domNode, "highlight"+capitalizedHighlightColor);
-                this.inherited(arguments);
-            }
-        });
-    });
-    
-/*  DESCRIPTION:
- *  
- *  A configuration preset for dijit.form.Button. Automatically sets certain properties on the instantiation instead of having to manually do that in declaration markup
- *  BlockButton has no icon (rftIcon.css) and label by default
- *  Flat coloured background (highlightColor), no border, 24px height
- *  Label is white (#White). Background lights up to white when hovered.
- */
Index: Dev/branches/rest-dojo-ui/client/rft/ui/InlineButton.js
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/InlineButton.js	(revision 333)
+++ 	(revision )
@@ -1,37 +1,0 @@
-define([
-    'dojo/_base/declare',
-    'dijit/form/Button',
-    'dojo/dom-class'
-    ], function(declare, Button, domClass){
-        return declare("rft.ui.InlineButton", [Button], {
-            showLabel: false,
-            highlightColor: "blue",
-            baseClass: "rftInlineButton",
-            postMixInProperties: function(){
-                this.iconClass = "rftIcon rftIcon"+this.iconType;
-                this.inherited(arguments);
-            },
-            postCreate: function(){
-                this.label = this.containerNode.innerHTML;
-                this.containerNode.innerHTML = "";
-                var capitalizedHighlightColor = this.highlightColor.charAt(0).toUpperCase() + this.highlightColor.slice(1);
-                domClass.add(this.domNode, "highlight"+capitalizedHighlightColor);
-                // Set up hover event
-                dojo.connect(this.domNode, "onmouseenter", this, "_toggleHover");
-                dojo.connect(this.domNode, "onmouseleave", this, "_toggleHover");
-                this.inherited(arguments);
-            },
-            _toggleHover: function(evt){
-                // This does nothing yet, but was wired up in case we want to change icon colour or something on hover!
-                // domClass.toggle(this.domNode, "hovering");
-            }
-        });
-    });
-    
-/*  DESCRIPTION:
- *  
- *  A configuration preset for dijit.form.Button. Automatically sets certain properties on the instantiation instead of having to manually do that in declaration markup
- *  InlineButton has a 16x16px icon (rftIcon.css) and NO label by default
- *  Transparent background, no border, 24px height
- *  Perhaps a drop shadow or outline on hover/click? If not, add a class that highlights the icon red or something.
- */
Index: Dev/branches/rest-dojo-ui/client/rft/ui/LargeButton.js
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/LargeButton.js	(revision 333)
+++ 	(revision )
@@ -1,28 +1,0 @@
-define([
-    'dojo/_base/declare',
-    'dijit/form/Button',
-    'dojo/dom-class'
-    ], function(declare, Button, domClass){
-        return declare("rft.ui.LargeButton", [Button], {
-            showLabel: true,    // Or false? Documentation is retarded about this boolean... true = no label???
-            highlightColor: "blue", // Use the CSS class "highlightBlue" this adds to style active/hover transitions
-            baseClass: "rftLargeButton",
-            postMixInProperties: function(){
-                this.iconClass = "rftIcon rftIcon"+this.iconType;
-                this.inherited(arguments);
-            },
-            postCreate: function(){
-                var capitalizedHighlightColor = this.highlightColor.charAt(0).toUpperCase() + this.highlightColor.slice(1);
-                domClass.add(this.domNode, "highlight"+capitalizedHighlightColor);
-                this.inherited(arguments);
-            }
-        });
-    });
-    
-/*  DESCRIPTION:
- *  
- *  A configuration preset for dijit.form.Button. Automatically sets certain properties on the instantiation instead of having to manually do that in declaration markup
- *  LargeButton has a 24x24px icon (rftIcon.css) and label by default
- *  Transparent background, no border, 24px height
- *  Label is gray (#ButtonText), lights up when hovered (#White)
- */
Index: Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidgetThijs.js
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidgetThijs.js	(revision 333)
+++ Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidgetThijs.js	(revision 335)
@@ -1,11 +1,12 @@
 define(['dojo/_base/declare','dojo/_base/lang','dojo/on','dojo/dom','dijit/form/Button',
     'dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin',
-    'dojo/text!./templates/LineWithActionsWidget.html',
-    'rft/ui/InlineButton', 'rft/ui/BlockButton'],
-    function(declare,lang,on,dom,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString, InlineButton, BlockButton){
+    'dojo/text!./templates/LineWithActionsWidget.html'
+],
+    function(declare,lang,on,dom,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
         return declare('rft.ui.LineWithActionsWidgetThijs',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
             templateString: templateString,
             baseClass: 'rftLineWithButtons',
             title: '',
+            color: "blue",
             userObject: null,
             actions: {},
@@ -21,12 +22,55 @@
             _setupActions: function() {
                 for (var action in this.actions) {
-                    new InlineButton({
-                        label: action,
-                        iconType: action,
-                        highlightColor: "White",
-                        onClick: lang.hitch(this, function(){
-                            this.actions[action](this.userObject);
-                        })
-                    }).placeAt(this.buttonsNode);
+                    
+                    if (this.actions[action].properties.blockButton == true) {  // BlockButton
+                        new Button(
+                            lang.mixin({
+                                baseClass: 'rftBlockButton',
+                                "class": this.color,
+                                label: action,
+                                iconClass: 'rftIcon rftIcon'+action,
+                                title: action,
+                                onClick: lang.hitch(this, function(){
+                                    this.actions[action].callback(this.userObject);
+                                })
+                            }, this.actions[action].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);
+                    }
+                    
+                    
+                    
+                /*  THIS USES DEPRECATED CLASSES!!!
+                    if (this.actions[action].blockButton == true) {    // BlockButton!
+                        new BlockButton({
+                            label: action,
+                            iconType: action,
+                            highlightColor: this.actions[action].color || "green",
+                            onClick: lang.hitch(this, function(){
+                                this.actions[action].callback(this.userObject);
+                            })
+                        }).placeAt(this.buttonsNode);
+                        
+                    } else {    // InlineButton!
+                        new InlineButton({
+                            label: action,
+                            iconType: action,
+                            highlightColor: "Black",
+                            onClick: lang.hitch(this, function(){
+                                this.actions[action].callback(this.userObject);
+                            })
+                        }).placeAt(this.buttonsNode);
+                    }
+                    */
                 }
             },
Index: Dev/branches/rest-dojo-ui/client/rft/ui/SelectorThijs.js
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/SelectorThijs.js	(revision 333)
+++ Dev/branches/rest-dojo-ui/client/rft/ui/SelectorThijs.js	(revision 335)
@@ -8,5 +8,5 @@
     'dijit/_Container',
     './LineWithActionsWidgetThijs',
-    'dojo/text!./templates/Selector.html',
+    'dojo/text!./templates/SelectorThijs.html',
     'dojo/dom-class'
     ],function(
@@ -26,4 +26,5 @@
             title: "The professional as a participant",
             baseClass: 'rftSelector',
+            color: 'red',    // This is hardcoded for now, will serve as default value later! (Selector defaults to blue!) Only affects color of lineWithActions
             postCreate: function() {
                 var infoFunction = function() {
@@ -32,44 +33,59 @@
                 new LineWithActionsWidget({
                     title: this.title,
+                    color: this.color,
                     actions: {
-                        "Accept" : function(){}
+                        "Accept" : {
+                            callback: function(arg){},
+                            properties: {
+                                blockButton: true,
+                                color: this.color
+                            }
+                        }
                     }
                 },this.titleNode);
                 var selectorLine = new LineWithActionsWidget({
                     title: 'None',
+                    color: this.color,
                     actions: {
-                        "HalfArrowDown" : lang.hitch(this,function(){
-                            var node = this.optionsNode;
-                            var show = fx.wipeIn({
-                                node: node
-                            });
-                            var hide = fx.wipeOut({
-                                node: node
-                            });
-                            hide.play();
-                            var folded = true;
-                            return function(e) {
-                                if ( folded ) {
-                                    // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
-                                    var downArrowIcon = dojo.query(".rftInlineButton .rftIconHalfArrowDown", selectorLine.buttonsNode)[0];  // Query the down arrow rftIcon span
-                                    if (downArrowIcon){
-                                        domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
+                        "HalfArrowDown" : {
+                            callback: lang.hitch(this,function(){
+                                var node = this.optionsNode;
+                                var show = fx.wipeIn({
+                                    node: node
+                                });
+                                var hide = fx.wipeOut({
+                                    node: node
+                                });
+                                hide.play();
+                                var folded = true;
+                                return function(e) {
+                                    if ( folded ) {
+                                        // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
+                                        var downArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowDown", selectorLine.buttonsNode)[0];  // Query the down arrow rftIcon span
+                                        if (downArrowIcon){
+                                            domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
+                                        }
+                                        show.play();
+                                        folded = false;
+                                    } else {
+                                        // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
+                                        var upArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowUp", selectorLine.buttonsNode)[0];  // Query the up arrow rftIcon span
+                                        if (upArrowIcon){
+                                            domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
+                                        }
+                                        hide.play();
+                                        folded = true;
+                            
                                     }
-                                    show.play();
-                                    folded = false;
-                                } else {
-                                    // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
-                                    var upArrowIcon = dojo.query(".rftInlineButton .rftIconHalfArrowUp", selectorLine.buttonsNode)[0];  // Query the up arrow rftIcon span
-                                    if (upArrowIcon){
-                                        domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
-                                    }
-                                    hide.play();
-                                    folded = true;
-                            
-                                }
-                                e.preventDefault();
-                                e.stopPropagation();
-                            };
-                        })()
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                };
+                            })(),
+                            properties: {
+                                blockButton: true,
+                                color: this.color,
+                                showLabel: false
+                            }
+                        }
                     }
                 },this.selectedItemNode);
@@ -77,7 +93,14 @@
                     title: 'Are there direct colleagues among the other participants?',
                     actions: {
-                        "Inspect" : infoFunction
+                        "Inspect" : {
+                            callback: infoFunction,
+                            properties: {
+                                blockButton: false,
+                                showLabel: false
+                            }
+                        }
                     }
                 }).placeAt(this.optionsNode);
+                /*
                 new LineWithActionsWidget({
                     title: 'Do you personally know ithers present at the current session?',
@@ -92,4 +115,5 @@
                     }
                 }).placeAt(this.optionsNode);
+                */
             }
         });
Index: Dev/branches/rest-dojo-ui/client/rft/ui/templates/SelectorThijs.html
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/templates/SelectorThijs.html	(revision 333)
+++ Dev/branches/rest-dojo-ui/client/rft/ui/templates/SelectorThijs.html	(revision 335)
@@ -1,4 +1,6 @@
-<div>
-    <div class="${baseClass}Title" data-dojo-attach-point="titleNode"></div>
+<div class="${color}">
+    <div class="${baseClass}Category">
+        <div class="${baseClass}Title" data-dojo-attach-point="titleNode"></div>
+    </div>
     <div class="${baseClass}Selected">
         <div class="${baseClass}Color" data-dojo-attach-point="selectedColorNode"></div>
