Index: Dev/branches/rest-dojo-ui/client/mockup.html
===================================================================
--- Dev/branches/rest-dojo-ui/client/mockup.html	(revision 329)
+++ Dev/branches/rest-dojo-ui/client/mockup.html	(revision 331)
@@ -41,4 +41,6 @@
                 'rft/ui/Selector',
                 'rft/ui/TitleGroup',
+                'rft/ui/LargeButton',
+                'rft/ui/BlockButton',
                 'dojo/domReady!'
             ],function(parser){
@@ -46,151 +48,5 @@
             });
         </script>
-        <!--
-        <style>
-            /*  
-             CLARO EXTEND STYLE for researchtool
-             Note: Possibly overwrites important claro properties, so instead of altering standard elements, try to add a new class for them.
-             This also has the effect of ensuring that the new rules will overwrite the rules specified in claro.css!
-            */
 
-            body, html {
-                font-family: 'Segoe UI', Verdana, sans-serif;
-                font-size: 13px;
-                background-color: #333333;
-            }
-
-            .claro .header {
-                background-color: #333;
-                height: 80px;
-            }
-
-            .claro .header .mainLogo {
-                float: left;
-                height: 54px;
-                font-size: 48px;
-                margin: 0 0 0 50px;
-            }
-
-            .claro .header .mainMenu {
-                margin: 10px 0 17px 500px;
-                font-size: 20px;
-                line-height: 30px;
-                width: 370px;
-                height: 30px;
-                float: left;
-            }
-
-            .claro .header .mainMenu.dijitMenuPassive .dijitMenuItem {
-                color: #999999;
-                font-size: 20px;
-                line-height: 30px;
-                margin: 0;
-                padding:0;
-            }
-            
-            .claro .header .mainMenu.dijitMenuPassive .dijitMenuItemSelected {
-                background: none;
-                background-color: transparent;
-                border: none;
-                margin: 0;
-                color: #ffffff;
-                font-size: 30px;
-            }
-            
-            .claro .header .mainMenu.dijitMenuPassive .dijitMenuItemHover {
-                background: none;
-                background-color: transparent;
-                border: none;
-                margin: 0;
-                color: #ffffff;
-            }
-            
-            
-            
-            
-            
-            .claro .header .dijitMenuBar {
-                border: none;
-                background: transparent;
-            }
-
-            .claro .header .breadcrumbs {
-                height: 14px;
-                text-align: center;
-                clear: both;
-                margin: 0;
-            }
-
-            .claro .header .breadcrumbs .breadcrumb {
-                padding: 3px 0;
-                font-size: 14px;
-                line-height: 16px;
-                color: #999999;
-            }
-            
-            .claro .header .breadcrumbs .breadcrumb:hover {
-                color: #ffffff;
-            }
-
-            .claro .header .breadcrumbs .breadcrumb.current {
-                font-size: 16px;
-                color: #ffffff;
-            }
-
-            .dijitTab {
-                width: 190px;
-                white-space: normal;
-            }
-
-            .claro .dijitContentPane.content {
-                background-color: #444444;
-            }
-
-
-
-
-
-
-
-
-
-
-            .rftLineWithButtons {
-                display: table;
-                width: 100%;
-                height: 24px;
-                background-color: #0072bc;
-                border: 1px gray solid;
-                margin: 2px;
-            }
-            .rftLineWithButtons.includedQuestion {
-                background-color: lightgreen;
-            }
-            .rftLineWithButtons.conflictedQuestion {
-                background-color: lightcoral;
-            }
-            .rftLineWithButtons.dijitSelected {
-                background-color: lightblue;
-            }
-            .rftLineWithButtonsTitle {
-                display: table-cell;
-                padding-left: 4px;
-            }
-            .rftLineWithButtonsButtons {
-                display: table-cell;
-                text-align: right;
-            }
-
-            /* Softbutton is the type of button/element that is 50% 'transparent' in idle state (#Disabled), and opaque (#White) on active/hover/select. Icon is always opaque */
-            .softButton {
-                color: #999999;
-            }
-
-            .softButton.softButtonOn {
-                color: #fff;
-            }
-
-        </style>
-        -->
     </head>
     <body class="dijitReset gamelab">
@@ -213,7 +69,7 @@
         <div class="content" data-dojo-type="dijit.layout.ContentPane">
             <div class="title">
-                <span class="titleIcon"><img style="width: 32px; height: 32px; background-color: #ff00ff;" /></span><h2 class="titleText">Survey 123 [Editing]</h2>
+                <div class="rftIcon rftMainIcon rftMainIconSurvey"></div><h2 class="titleText">Survey 123 [Editing]</h2>
             </div>
-            <div data-dojo-type="dijit.layout.BorderContainer" style="width: 100%; height: 500px;">
+            <div data-dojo-type="dijit.layout.BorderContainer" style="height: 500px;">
                 <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
@@ -227,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.Selector" data-dojo-props="title:'Intrinsic motivation'"></div>
-                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Extrinsic motivation'"></div>
-                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Motivation to participate'"></div>
-                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Experience with games'"></div>
-                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Participant context'"></div>
+                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Intrinsic motivation'"></div>
+                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Extrinsic motivation'"></div>
+                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Motivation to participate'"></div>
+                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Experience with games'"></div>
+                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Participant context'"></div>
                         </div>
                         <div title="Declarative, procedural and stragegic knowledge" data-dojo-type="dijit.layout.ContentPane"></div>
@@ -242,4 +98,8 @@
                         <div>Selected question is not yet in survey. These van be included in the survey.</div>
                         <div>Selected question conflicts with an included question. You can only swap these.</div>
+                        --BUTTON TESTS--
+                        <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: null">Add to survey</button>
                     </div>
                 </div>
@@ -254,8 +114,8 @@
                     </div>
                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
-                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconConfigure'">Properties</button>
-                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconSample'">Preview</button>
-                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconUndo'">Discard</button>
-                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconSave'">Save</button>
+                        Nothing here! yet....
+
+                        //sooooooon......
+
                     </div>
                 </div>
Index: Dev/branches/rest-dojo-ui/client/rft/ui/BlockButton.js
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/BlockButton.js	(revision 331)
+++ Dev/branches/rest-dojo-ui/client/rft/ui/BlockButton.js	(revision 331)
@@ -0,0 +1,31 @@
+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.
+            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, "rftBlockButton 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/LargeButton.js
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/LargeButton.js	(revision 331)
+++ Dev/branches/rest-dojo-ui/client/rft/ui/LargeButton.js	(revision 331)
@@ -0,0 +1,27 @@
+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
+            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, "rftLargeButton 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)
+ */
