Index: /Dev/branches/rest-dojo-ui/client/mockup.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/mockup.html	(revision 336)
+++ /Dev/branches/rest-dojo-ui/client/mockup.html	(revision 337)
@@ -51,116 +51,71 @@
     </head>
     <body class="dijitReset gamelab">
-        <div class="header">
-            <div class="mainLogo">Research Tool</div>
+        <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
+            <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>
+                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Content</div>
+                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Results</div>
+                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Log out</div>
+                </div>
+                <div class="breadcrumbs">
+                    <span class="breadcrumb">User > </span>
+                    <span class="breadcrumb">Session > </span>
+                    <span class="breadcrumbCurrent">Survey A [editing]</span>
+                </div>
+            </div>
 
-            <div data-dojo-type="dijit.MenuBar" class="mainMenu">
-                <div data-dojo-type="dijit.MenuBarItem" >Sessions</div>
-                <div data-dojo-type="dijit.MenuBarItem" >Content</div>
-                <div data-dojo-type="dijit.MenuBarItem" >Results</div>
-                <div data-dojo-type="dijit.MenuBarItem" >Log out</div>
-            </div>
-            <div class="breadcrumbs">
-                <span class="breadcrumb">Home > </span>
-                <span class="breadcrumb">Sessions > </span>
-                <span class="breadcrumb">Session A > </span>
-                <span class="breadcrumb breadcrumbCurrent">Survey 123 [Editing]</span>
-            </div>
-        </div>  <!-- HEADER -->
-        <div class="content" data-dojo-type="dijit.layout.ContentPane">
-            <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
-                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
-                    Title and icon
-                </div>
-                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
+            <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;">
                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
-                        Presets
+                        <h2>
+                            <span class="rftIcon rftIconSurvey"></span>
+                            <span class="headerText">Survey A [editing]</span>
+                        </h2>
                     </div>
-                    <div data-dojo-type="dijit.layout.TabContainer" 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', color: 'blue'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'blue'"></div>
+                    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
+                        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
+                            Presets
                         </div>
-                        <div data-dojo-type="dijit.layout.ContentPane" title="Category Two">
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'orange'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'orange'"></div>
+                        <div data-dojo-type="dijit.layout.TabContainer" 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', color: 'blue'"></div>
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'blue'"></div>
+                            </div>
+                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Two">
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'blue'"></div>
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'blue'"></div>
+                            </div>
+                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Three">
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'blue'"></div>
+                            </div>
+                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Four">
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'blue'"></div>
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'blue'"></div>
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three', color: 'blue'"></div>
+                            </div>
+                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Five">
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'purple'"></div>
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'purple'"></div>
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three', color: 'purple'"></div>
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat four', color: 'purple'"></div>
+
+                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconAccept'">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>
-                        <div data-dojo-type="dijit.layout.ContentPane" title="Category Three">
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'green'"></div>
-                        </div>
-                        <div data-dojo-type="dijit.layout.ContentPane" title="Category Four">
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'red'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'red'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three', color: 'red'"></div>
-                        </div>
-                        <div data-dojo-type="dijit.layout.ContentPane" title="Category Five">
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'purple'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'purple'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three', color: 'purple'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat four', color: 'purple'"></div>
-
+                    </div>
+                    <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>
                         </div>
                     </div>
                 </div>
-                <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>
-                    </div>
-                </div>
             </div>
-
-            <!--
-            <div class="title">
-                <div class="rftIcon rftMainIcon rftMainIconSurvey"></div><h2 class="titleText">Survey 123 [Editing]</h2>
-            </div>
-            <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'">
-                        <span>Load preset</span>
-                        <select data-dojo-type="dijit.form.ComboBox">
-                            <option>Preset A</option>
-                            <option>Preset B</option>
-                        </select>
-                    </div>
-                    <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center',tabPosition:'left-h'">
-                        <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" 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>
-                        <div title="Motoric, cognitive and social skills" data-dojo-type="dijit.layout.ContentPane"></div>
-                        <div title="Scientific, competitive and commercial acchievements" data-dojo-type="dijit.layout.ContentPane"></div>
-                    </div>
-                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
-                        <div>Legend</div>
-                        <div>Selected question is included in survey.</div>
-                        <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>
-                        
-
-                    </div>
-                </div>
-                <div title="Included questions" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right',splitter:true">
-                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
-                        <span>Included questions</span>
-                        <div data-dojo-type="rft.ui.List">
-                            <div class="includedQuestion" data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Why are you participating in this session?',actions:{'+':function(){ alert('Bah!'); }},onClick:function(evt){ alert('Buh!'); return false; }"></div>
-                            <div class="conflictedQuestion" data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Is this a long-term goal or immediate?',actions:{'+':function(){ alert('Bah!'); }},onClick:function(evt){ alert('Buh!'); return false; }"></div>
-                            <div class="includedQuestion" data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Have you played &quot;serious games&quot; before?',actions:{'+':function(){ alert('Bah!'); }},onClick:function(evt){ alert('Buh!'); return false; }"></div>
-                        </div>
-                    </div>
-                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
-                        <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>
-            </div>
-            -->
         </div>
     </body>
Index: /Dev/branches/rest-dojo-ui/client/rft/css/general.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/general.css	(revision 336)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/general.css	(revision 337)
@@ -1,2 +1,5 @@
+/* General.css contains general fixes that are not strongly related to any other stylesheets.
+They are typically small fixes or tweaks to adjust spacing and/or borders/colours */
+
 .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 336)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/layout.css	(revision 337)
@@ -1,3 +1,4 @@
 *:focus {
+    /* Disabled Chrome focus outlines! */
     outline: none;
 }
@@ -5,5 +6,5 @@
     width: 100%;
     height: 100%;
-    font-size: .813em;
+    font-size: 13px;
     background-color: #333333;
 }
@@ -14,38 +15,51 @@
 
 /* Headings */
-.gamelab h1 {
-    font-size: 3em;
-    margin-bottom: 0.727em;
+.gamelab h1 {   
+    /* Main logo */
+    float: left;
+    clear: left;
+    font-size: 48px;
+    color: #999999;
+    margin: 0 10px 8px 10px;
+    padding: 0;
+    line-height: 48px;
     font-weight: normal !important;
+    -webkit-user-select: none;
+    -moz-user-select: none;
 }
 .gamelab h2 {
-    font-size: 1.375em;
-    line-height: 1.5em;
-    margin-top: 1em;
-    margin-bottom: 0.60em;
-    font-weight: normal;
+    /* Content pane title */
+    font-size: 22px;
+    line-height: 30px;
+    margin: 0;
+    padding: 0;
 }
-.gamelab h3,
-.gamelab h4,
-.gamelab h5,
-.gamelab h6 {
-    font-size: 1.125em;
-    font-weight: normal;
+.gamelab h2 .rftIcon {
+    float: left;
+    width: 32px;
+    height: 32px;
+    background-image: url('images/icons/rftIcons32.png');
+    margin-right: 8px;
 }
-.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 h3 {
+    /* Section headers */
+    font-size: 18px;
 }
-.gamelab .dijitMenuBar.mainMenu {
-    width: auto;
+.gamelab h4 {
+    /* Small text headers/paragraph headers */
+    font-size: 16px;
+}
+
+/* Topbar  */
+.topbar {
+    overflow-y: hidden;
+}
+.topbar .dijitMenuBar {
     float: right;
-    margin: 10px 50px 10px 20px;
+    clear: right;
+    margin-top: 16px;
 }
+
+/* Breadcrumbs */
 .breadcrumbs {
     float: left;
@@ -53,4 +67,6 @@
     width: 100%;
     text-align: center;
+    height: 16px;
+    line-height: 16px;
 }
 .breadcrumb {
@@ -62,10 +78,13 @@
     font-size: 14px;
 }
-.menuItem {
-    margin: 0px 5px 0px 5px;
+
+/* Content */
+.dijitContentPane.page {
+    padding: 0;
 }
-.content {
+.content.dijitContentPane {
     display: block;
     clear: both;
+    padding: 0;
     background-color: #555555;
     /* Background gradient time! */
@@ -83,4 +102,9 @@
         );
 }
+.content.dijitContentPane .dijitBorderContainer {
+    padding: 2px;
+}
+
+/* General */
 .loginLabel {
     float: left;
@@ -110,31 +134,4 @@
     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/rftButtons.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css	(revision 336)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css	(revision 337)
@@ -153,2 +153,42 @@
     margin: 2px 4px -2px 4px;
 }
+
+/* MainMenuButton */
+.gamelab .dijitMenuBar .rftMainMenuButton {
+    border: none;
+    height: 30px;
+    width: auto;
+    background-image: none;
+    background: transparent;
+    text-align: center;
+    color: #999999;
+    font-size: 24px;
+    line-height: 30px;
+    padding: 0 4px;
+    margin: 0 5px;
+    box-shadow: none;
+    transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    -webkit-transition: all 0.3s;
+    -o-transition: all 0.3s;
+}
+.gamelab .dijitMenuBar .rftMainMenuButton.dijitMenuItemHover {
+    color: #ffffff;
+    font-size: 26px;
+    transition: all 0.1s;
+    -moz-transition: all 0.1s;
+    -webkit-transition: all 0.1s;
+    -o-transition: all 0.1s;
+}
+.gamelab .dijitMenuBar .rftMainMenuButton.dijitMenuItemActive {
+    color: #0794d1 !important;
+    font-size: 26px;
+    transition: all 0.1s;
+    -moz-transition: all 0.1s;
+    -webkit-transition: all 0.1s;
+    -o-transition: all 0.1s;
+}
+.gamelab .dijitMenuBar .rftMainMenuButton.dijitMenuItemSelected {
+    color: #ffffff;
+    font-size: 26px;
+}
