Index: /Dev/branches/rest-dojo-ui/client/mMenu.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/mMenu.html	(revision 344)
+++ /Dev/branches/rest-dojo-ui/client/mMenu.html	(revision 344)
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <title>Research Facilitator Tool</title>
+        <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/claro/claro.css" />
+        <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/Grid.css" />
+        <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/claroGrid.css" />
+        <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/widget/Toaster/Toaster.css" />
+        <link rel="stylesheet" type="text/css" href="rft/css/main.css" />
+        <script type="text/javascript" src="dojotoolkit/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false, tlmSiblingOfDojo: false, isDebug: true, baseUrl: '', packagePaths: {'dojotoolkit':['dojo','dijit', 'dojox'], '.':['rft']}"></script>
+        <script type="text/javascript">
+            require([
+                'dojo/parser',
+                'dijit/DropDownMenu',
+                'dijit/layout/AccordionContainer',
+                'dijit/layout/BorderContainer',
+                'dijit/layout/ContentPane',
+                'dijit/layout/TabContainer',
+                'dijit/layout/SplitContainer',
+                'dijit/MenuBar',
+                'dijit/MenuBarItem',
+                'dijit/form/Button',
+                'dijit/form/ComboBox',
+                'dijit/form/Form',
+                'dijit/form/Select',
+                'dijit/form/SimpleTextarea',
+                'dijit/form/TextBox',
+                'dijit/form/Textarea',
+                'dijit/PopupMenuBarItem',
+                'dijit/TitlePane',
+                'dojox/grid/DataGrid',
+                'dojox/widget/TitleGroup',
+                'rft/ui/List',
+                'rft/ui/MainMenu',
+                'rft/ui/MenuBarLink',
+                'rft/ui/MenuLink',
+                'rft/ui/Notifications',
+                'rft/ui/LineWithActionsWidget',
+                'rft/ui/QuestionWidget',
+                'rft/ui/Selector',
+                'rft/ui/SelectorThijs',
+                'rft/ui/LineWithActionsWidgetThijs',
+                'rft/ui/TitleGroup',
+                'dojo/domReady!'
+            ],function(parser){
+                parser.parse();
+            });
+        </script>
+    </head>
+    <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>
+                <div data-dojo-type="rft.ui.MainMenu"></div>
+                <div class="breadcrumbs">
+                    <span class="breadcrumb breadcrumbCurrent">User</span>
+                </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;">
+                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
+                        <h2>
+                            <span class="rftIcon rftIconUser"></span>
+                            <span class="headerText">Main Menu</span>
+                        </h2>
+                    </div>
+
+                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
+
+                        <div class="rftIndexMenuBlock">
+                            <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconPlus'">Create and edit</div>
+                            <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconForward'">Facilitate</div>
+                        </div>
+                        
+
+
+                        <div class="rftIndexMenuBlock">
+                            <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue oneHeight', iconClass: 'rftIcon rftIconSurvey'">Surveys</div>
+                            <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'orange oneHeight', iconClass: 'rftIcon rftIconQuestion'">Questions</div>
+                            <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'purple oneHeight', iconClass: 'rftIcon rftIconApplication'">Applications</div>
+                            <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'red oneHeight', iconClass: 'rftIcon rftIconDashboard'">Dashboards</div>
+                        </div>
+                        
+
+
+                        <div class="rftIndexMenuBlock">
+
+                        </div>
+                        
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
Index: /Dev/branches/rest-dojo-ui/client/mSessions.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/mSessions.html	(revision 343)
+++ /Dev/branches/rest-dojo-ui/client/mSessions.html	(revision 344)
@@ -4,5 +4,5 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <title>Research Facilitator Tool</title>
-        <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/gamelab/gamelab.css" />
+        <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/claro/claro.css" />
         <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/Grid.css" />
         <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/claroGrid.css" />
@@ -43,4 +43,5 @@
                 'rft/ui/SelectorThijs',
                 'rft/ui/LineWithActionsWidgetThijs',
+                'rft/ui/ObjectBox',
                 'rft/ui/TitleGroup',
                 'dojo/domReady!'
@@ -51,66 +52,37 @@
         <script>
             function createNew(){
-                /* There is no way this should be handled as such. Create an rftSessionBar templated widget for this! */
-                
-                require([
-                    'dojo/_base/array',
-                    'dojo/query',
-                    'dojo/dom-construct'
-                ], function(array, query, domConstruct){
-                    var props1 = {
-                        title: 'Session name',
-                        modifiers: 'purple',
-                        actions: {
-                            "Inspect": {
-                                callback: function(){alert("Info display!");},
-                                properties: {
-                                    modifiers: 'trans',
-                                    blockButton: false
-                                }
-                            }
-                        }
-                    };
-                    var props2 = {
-                        modifiers: 'purple',
-                        title: 'Creator and creation date'
-                    };
-                    var props3 = {
-                        modifiers: 'purple',
-                        actions: {
-                            "FullArrowUp": {
-                                callback: function(){alert("Moving up...");},
-                                properties: {
-                                    modifiers: 'trans',
-                                    blockButton: true}
-                            },
-                            "FullArrowDown": {
-                                callback: function(){alert("Moving down...");},
-                                properties: {
-                                    blockButton: true,
-                                    modifiers: 'trans'
-                                }
-                            }
-                        }
-                    };
-                    // Tab container div
-                    var container = array.filter(query(".dijitContentPane"), function(item){
-                        return item.id.toLowerCase() == "mainOne".toLowerCase();
-                    })[0];
-                    // rftSessionBar root node
-                    var root = domConstruct.create("div", {
-                        className: "rftSessionBar"
-                    }, container);
-                    // Icon
-                    domConstruct.create("div", {
-                        className: "rftIcon typeIcon rftIconSession"
-                    }, root);
-                    var line1 = new rft.ui.LineWithActionsWidgetThijs(props1).placeAt(root);
-                    var line2 = new rft.ui.LineWithActionsWidgetThijs(props2).placeAt(root);
-                    var line3 = new rft.ui.LineWithActionsWidgetThijs(props3).placeAt(root);
-                    line1.startup();
-                    line2.startup();
-                    line3.startup();
-                    
+                debugger;
+                var newBox = new rft.ui.ObjectBox({
+                    title: 'TeamUp Basic Template',
+                    subTitle: '',
+                    lowerTitle: '',
+                    objectType: 'SessionTemplate',
+                    actions: {
+                        "edit": function() {},
+                        "delete": function() {}
+                    }
                 });
+                newBox.startup();
+                newBox.placeAt("containerTemplates", "last");
+            }
+            
+            function createInstance(args) {
+            // Create a template instance in the "Sessions" tab
+            debugger;
+            var args;
+            args.objectType = "Session";
+            var d = new Date();
+            var dateString = d.getDate()+"-"+d.getMonth()+"-"+d.getFullYear();
+            var creator = "Igor Mayer"; // Use currently logged in profile instead!
+            args.subTitle = "Created on "+dateString+" by "+creator;
+            
+            args.actions = {
+                        "edit": function() {},
+                        "delete": function() {}
+                    }
+            var newBox = new rft.ui.ObjectBox(args);
+            newBox.startup();
+            newBox.placeAt("containerSessions", "last");
+            // TODO: Then switch tabs to the Sessions tab!
             }
             
@@ -125,10 +97,5 @@
             <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
                 <h1>ResearchTool</h1>
-                <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 data-dojo-type="rft.ui.MainMenu"></div>
                 <div class="breadcrumbs">
                     <span class="breadcrumb">User > </span>
@@ -147,18 +114,19 @@
                     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
                         <div data-dojo-type="dijit.layout.TabContainer" class="green" data-dojo-props="tabPosition:'left-h',region:'center'">
-                            <div data-dojo-type="dijit.layout.ContentPane" title="Templates" id="mainOne">
-
-                                <div class="rftSessionBar">
-                                    <div class="rftIcon typeIcon rftIconSession"></div>
-                                    <div style="font-weight: bold;" data-dojo-type="rft.ui.LineWithActionsWidgetThijs" title="Teamup 25-5-2012" data-dojo-props="modifiers: 'green', actions: {'Inspect':{callback: function(){}, properties: {blockButton: false, modifiers: 'white', showLabel: false}}}"></div>
-                                    <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" title="Created by Arne Bezuijen on 25-01-2012 15:19" data-dojo-props="modifiers: 'green', actions: {}"></div>
-                                    <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" title="" data-dojo-props="modifiers: 'green', actions: {'FullArrowUp':{callback: function(){}, properties: {blockButton: true, modifiers: 'trans', label: 'Publish'}}, 'Cancel':{callback: function(){}, properties: {blockButton: true, modifiers: 'trans', label: 'Delete'}},'Accept':{callback: function(){this.set('title','NEW TITLE YO');}, properties: {blockButton: true, modifiers: 'trans', label:'Edit/View'}}}"></div>
+                            <div data-dojo-type="dijit.layout.BorderContainer" title="Templates">
+                                <div id="containerTemplates" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
+                                    <div data-dojo-type="rft.ui.ObjectBox" data-dojo-props="actions: {'edit': function(){alert('Custom edit code');}, 'New Command': function(){alert('newCommand');}, 'publish': createInstance}"></div>
                                 </div>
-
-                                <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconSession', onClick: createNew">Create new session</div>
-
+                                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
+                                    <div data-dojo-type="dijit.form.Button" data-dojo-props="region: 'bottom', baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconSession', onClick: createNew">Create new session</div>
+                                </div>
                             </div>
                             <div data-dojo-type="dijit.layout.ContentPane" title="Sessions">
-
+                                <div id="containerSessions" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
+                                    
+                                </div>
+                                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
+                                    <!-- Buttons? -->
+                                </div>
                             </div>
                         </div>
Index: /Dev/branches/rest-dojo-ui/client/mSurvey.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/mSurvey.html	(revision 343)
+++ /Dev/branches/rest-dojo-ui/client/mSurvey.html	(revision 344)
@@ -4,5 +4,5 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <title>Research Facilitator Tool</title>
-        <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/gamelab/gamelab.css" />
+        <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/claro/claro.css" />
         <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/Grid.css" />
         <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/claroGrid.css" />
@@ -54,10 +54,5 @@
             <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
                 <h1>ResearchTool</h1>
-                <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 data-dojo-type="rft.ui.MainMenu"></div>
                 <div class="breadcrumbs">
                     <span class="breadcrumb">User > </span>
@@ -102,7 +97,7 @@
                                 <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat four'"></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 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 rftIconCancel'">Cancel</button>
                                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconAccept'">Accept changes</button>
                             </div>
@@ -116,6 +111,6 @@
                         <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
                             <!-- 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 data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
+                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
                         </div>
                     </div>
Index: /Dev/branches/rest-dojo-ui/client/rft/css/claroOverride.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/claroOverride.css	(revision 344)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/claroOverride.css	(revision 344)
@@ -0,0 +1,114 @@
+/* This stylesheet compensates for the restoration of the claro style to its original specs. (21-6-2012)
+ * These changes should be moved to relevant stylesheets as soon as possible!
+*/
+
+
+/* Menu.css */
+.claro .topbar .dijitMenuitem {
+    width: 90px;
+    background-image: none;
+    background-position: top;
+    text-align: center;
+}
+.claro .dijitMenuPassive .dijitMenuItemHover, .claro .dijitMenuPassive .dijitMenuItemSelected {
+    background-color: transparent;
+    color: #ffffff;
+    border: none;
+    padding: 0 4px;
+}
+.claro .dijitMenuPassive .dijitMenuItemActive {
+    background-position: top;
+}
+
+/* layout/BorderContainer.css */
+.claro .dijitSplitContainer-child, .claro .dijitBorderContainer-child {
+    border: none;
+}
+.claro .dijitTabContainerTop-dijitContentPane,
+.claro .dijitTabContainerLeft-dijitContentPane,
+.claro .dijitTabContainerBottom-dijitContentPane,
+.claro .dijitTabContainerRight-dijitContentPane,
+.claro .dijitAccordionContainer-dijitContentPane {
+    background-color: transparent;
+}
+.claro .dijitSplitContainer-dijitContentPane,
+.claro .dijitBorderContainer-dijitContentPane {
+    background-color: transparent;
+}
+
+/* layout/TabContainer.css */
+.claro .dijitTabPaneWrapper {
+    background: transparent;
+}
+.claro .dijitTabInnerDiv {
+    background-color: transparent;
+    color: #999999;
+    border: none;
+}
+.claro .dijitTabContent {
+    border: none;
+}
+.claro .dijitTabHover .dijitTabInnerDiv {
+    background-color: transparent;
+    color: #ffffff;
+}
+.claro .dijitTabActive .dijitTabInnerDiv {
+    color: #0072bc;
+}
+.claro .dijitTabChecked .dijitTabInnerDiv {
+    background-color: transparent;
+    color: #ffffff;
+}
+.claro .dijitTabContent {
+    border: 1px solid #999999;
+}
+.claro .dijitTabHover .dijitTabContent {
+    border-color: #ffffff;
+}
+.claro .dijitTabActive .dijitTabContent {
+    border-color: transparent;
+}
+.claro .dijitTabChecked .dijitTabContent {
+    color: #ffffff;
+    border-color: #0072bc;
+}
+/*lefttabs*/
+.claro .dijitTabContainerLeft-tabs .dijitTab {
+    border-width: 1px;
+    left: 0;
+    margin-bottom: 4px;
+    margin-right: 8px;
+}
+.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
+    border: none;
+    background: transparent;
+    background-image: none;
+    background-position: top;
+    background-repeat: no-repeat;
+}
+.claro .dijitTabContainerLeft-tabs .dijitTabContent {
+    padding: 3px 8px 4px 8px;
+    background-image: none;
+
+}
+.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent {
+    padding-right: 8px;
+    background-image: none;
+}
+.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv {
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+}
+.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv,
+.claro .dijitTabContainerLeft-tabs .dijitTabContent {
+    -moz-border-radius: 0;
+    border-radius: 0;
+    border: none;
+}
+
+
+
+
+
+
Index: /Dev/branches/rest-dojo-ui/client/rft/css/layout.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/layout.css	(revision 343)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/layout.css	(revision 344)
@@ -53,8 +53,11 @@
 
 /* Topbar  */
-.topbar {
+.claro .topbar {
     overflow-y: hidden;
 }
-.topbar .dijitMenuBar {
+.claro .topbar .dijitMenuBar {
+    border: none;
+    background-color: transparent;
+    background-image: none;    
     float: right;
     clear: right;
@@ -172,4 +175,5 @@
 .claro .dijitTab.dijitTabHover {
     color: #ffffff;
+    border-color: #ffffff;
     transition: all 0.1s;
     -moz-transition: all 0.1s;
@@ -183,5 +187,4 @@
     -webkit-transition: all 0.1s;
     -o-transition: all 0.1s;
-    /* The delay on clicking is wrong, needs to be quicker! */
 }
 .claro .dijitTab.dijitTabChecked {
@@ -225,2 +228,26 @@
     color: #3aa605;
 }
+
+
+/* Index Menu */
+.rftIndexMenuBlock {
+    width: 400px;
+    height: 400px;
+    background: #444444;
+    float: left;
+    margin: 16px;
+    padding: 0;
+}
+
+.rftIndexMenuBlockMask {
+    height: 400px;
+    width: 400px;
+    margin: 0 0 0 -400px;
+    background: #ff00ff;
+    color: #999999;
+    visibility: visible;
+    float: left;
+}
+.rftIndexMenuBlockMask:hover {
+    visibility: hidden;
+}
Index: /Dev/branches/rest-dojo-ui/client/rft/css/main.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/main.css	(revision 343)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/main.css	(revision 344)
@@ -1,6 +1,10 @@
+@import url('claroOverride.css');
+
 @import url('layout.css');
 @import url('general.css');
 
+@import url('rftLineWithButtons.css');
 @import url('rftButtons.css');
 @import url('rftIcons.css');
 @import url('rftSelector.css');
+@import url('rftObjectBox.css');
Index: /Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css	(revision 343)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css	(revision 344)
@@ -196,2 +196,72 @@
     font-size: 26px;
 }
+
+/* IndexMenuButton */
+.claro .rftIndexMenuButton {
+    display: block;
+    margin: 0;
+    padding: 0;
+    line-height: 32px;
+    vertical-align: middle;
+    text-align: left;
+    transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    -webkit-transition: all 0.3s;
+    -o-transition: all 0.3s;
+}
+.claro .rftIndexMenuButton .dijitButtonNode {
+    border: none;
+    color: #999999;
+    font-size: 24px;
+    font-weight: normal;
+}
+.claro .rftIndexMenuButton .rftIcon {
+    height: 32px;
+    width: 32px;
+    margin: 0 8px;
+    padding: 0;
+    background-image: url('images/icons/rftIcons32.png');
+}
+.claro .oneHeight {
+    height: 100px;
+}
+.claro .oneHeight .dijitButtonContents {
+    margin: 34px 0 0 0;
+}
+.claro .twoHeight {
+    height: 200px;
+}
+.claro .twoHeight .dijitButtonContents {
+    margin: 82px 0 0 0;
+}
+.claro .fourHeight {
+    height: 400px;
+}
+.claro .fourHeight .dijitButtonContents {
+    margin: 184px 0 0 0;
+}
+.claro .rftIndexMenuButton.rftIndexMenuButtonHover,
+.claro .rftIndexMenuButton.rftIndexMenuButtonHover .rftButtonText{
+    transition: all 0.1s;
+    -moz-transition: all 0.1s;
+    -webkit-transition: all 0.1s;
+    -o-transition: all 0.1s;
+}
+.claro .rftIndexMenuButton.rftIndexMenuButtonHover .dijitButtonText {
+    color: #ffffff;
+}
+.claro .rftIndexMenuButton.rftIndexMenuButtonHover.blue {
+    background: #0072bc;
+}
+.claro .rftIndexMenuButton.rftIndexMenuButtonHover.green {
+    background: #3aa605;
+}
+.claro .rftIndexMenuButton.rftIndexMenuButtonHover.red {
+    background: #8c0310;
+}
+.claro .rftIndexMenuButton.rftIndexMenuButtonHover.purple {
+    background: #6529b7;
+}
+.claro .rftIndexMenuButton.rftIndexMenuButtonHover.orange {
+    background: #ff5b12;
+}
Index: /Dev/branches/rest-dojo-ui/client/rft/css/rftIcons.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/rftIcons.css	(revision 343)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/rftIcons.css	(revision 344)
@@ -145,2 +145,7 @@
     background-position: -1248px 0px;
 }
+
+
+/* TODO: rftIcons24.png and rftIcons16.png have icons that are 1px too wide!
+ * Fix this in the .psd and re-export!
+ */
Index: /Dev/branches/rest-dojo-ui/client/rft/css/rftLineWithButtons.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/rftLineWithButtons.css	(revision 344)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/rftLineWithButtons.css	(revision 344)
@@ -0,0 +1,54 @@
+.claro .rftLineWithButtons {
+    height: 24px;
+    line-height: 24px;
+    font-size: 13px;
+    margin: 4px 0;
+    white-space: nowrap;
+}
+.claro .rftLineWithButtons .rftLineWithButtonsButtons {
+    float: right;
+    height: 24px;
+    line-height: 24px;
+    margin: 0;
+    padding: 0;
+}
+.claro .rftLineWithButtons .rftLineWithButtonsButtons .rftBlockButton {
+    float: right;
+    clear: none;
+}
+.claro .rftLineWithButtons .rftLineWithButtonsTitle {
+    float: left;
+    margin: 0 8px 0 8px;
+}
+
+/* Colour settings */
+.claro div.blue.rftLineWithButtons,
+.claro .blue .rftLineWithButtons {
+    background-color: #0072bc;
+    color: #ffffff;
+}
+.claro div.red.rftLineWithButtons,
+.claro .red .rftLineWithButtons {
+    background-color: #8c0310;
+    color: #ffffff;
+}
+.claro div.green.rftLineWithButtons,
+.claro .green .rftLineWithButtons {
+    background-color: #3aa605;
+    color: #ffffff;
+}
+.claro div.purple.rftLineWithButtons,
+.claro .purple .rftLineWithButtons {
+    background-color: #6529b7;
+    color: #ffffff;
+}
+.claro div.orange.rftLineWithButtons,
+.claro .orange .ftLineWithButtons {
+    background-color: #ff5b12;
+    color: #ffffff;
+}
+.claro div.trans.rftLineWithButtons,
+.claro .trans .rftLineWithButtons {
+    background-color: transparent;
+    color: #ffffff;
+}
Index: /Dev/branches/rest-dojo-ui/client/rft/css/rftObjectBox.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/rftObjectBox.css	(revision 344)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/rftObjectBox.css	(revision 344)
@@ -0,0 +1,15 @@
+/* rftObjectBox */
+.claro .rftObjectBox {
+    margin: 8px 0;
+}
+.claro .rftObjectBox .rftIcon.typeIcon {
+    background-image: url('images/icons/rftIcons32.png');
+    height: 32px;
+    width: 32px;
+    margin: 20px 8px;
+    float: left;
+}
+.claro .rftObjectBox .rftLineWithButtons {
+    margin: 0;
+    padding: 0;
+}
Index: /Dev/branches/rest-dojo-ui/client/rft/css/rftSelector.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/rftSelector.css	(revision 343)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/rftSelector.css	(revision 344)
@@ -3,28 +3,6 @@
     font-size: 13px;
 }
-.claro .rftLineWithButtons {
-    height: 24px;
-    line-height: 24px;
-    font-size: 13px;
-    margin: 4px 0;
-    white-space: nowrap;
-}
 .claro .rftSelector .rftLineWithButtons {
     margin: 0;
-}
-.claro .rftLineWithButtons .rftLineWithButtonsButtons {
-    float: right;
-    height: 24px;
-    line-height: 24px;
-    margin: 0;
-    padding: 0;
-}
-.claro .rftLineWithButtons .rftLineWithButtonsButtons .rftBlockButton {
-    float: right;
-    clear: none;
-}
-.claro .rftLineWithButtons .rftLineWithButtonsTitle {
-    float: left;
-    margin: 0 8px 0 8px;
 }
 .claro .rftSelectorSelected .rftSelectorColor {
@@ -35,54 +13,8 @@
 }
 
-/* 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;
-}
-.claro .rftLineWithButtons.trans {
-    background-color: transparent;
-    color: #ffffff;
-}
-
-/* Background colour settings for the various contexts of rftLineWithButtons */
+/* Set default LWB colour to white. */
 .claro .rftSelector .rftLineWithButtons {
     background-color: #ffffff;
     color: #000000;
-}
-.claro .blue.rftSelector .rftLineWithButtons {
-    background-color: #0072bc;
-    color: #ffffff;
-}
-.claro .red.rftSelector .rftLineWithButtons {
-    background-color: #8c0310;
-    color: #ffffff;
-}
-.claro .green.rftSelector .rftLineWithButtons {
-    background-color: #3aa605;
-    color: #ffffff;
-}
-.claro .purple.rftSelector .rftLineWithButtons {
-    background-color: #6529b7;
-    color: #ffffff;
-}
-.claro .orange.rftSelector .rftLineWithButtons {
-    background-color: #ff5b12;
-    color: #ffffff;
 }
 
@@ -107,18 +39,2 @@
     background-color: #00ff00;
 }
-
-/* rftSessionBar */
-.claro .rftSessionBar {
-    margin: 8px 0;
-}
-.claro .rftSessionBar .rftIcon.typeIcon {
-    background-image: url('images/icons/rftIcons32.png');
-    height: 32px;
-    width: 32px;
-    margin: 20px 8px;
-    float: left;
-}
-.claro .rftSessionBar .rftLineWithButtons {
-    margin: 0;
-    padding: 0;
-}
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/ObjectBox.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/ObjectBox.js	(revision 344)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/ObjectBox.js	(revision 344)
@@ -0,0 +1,146 @@
+define([
+    'dojo/_base/declare',
+    'dojo/_base/lang',
+    'dijit/_WidgetBase',
+    'dijit/_TemplatedMixin',
+    'dijit/_WidgetsInTemplateMixin',
+    'rft/ui/LineWithActionsWidgetThijs',
+    'dojo/text!./templates/ObjectBox.html',
+    ], function(declare, lang, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, LineWithActionsWidgetThijs, template){
+        return declare('rft.ui.ObjectBox', [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
+            baseClass: "rftObjectBox",
+            templateString: template,
+            
+            constructor: function() {
+                this.title = "";
+                this.subTitle = "";
+                this.lowerTitle = "";
+                this.objectType = "SessionActive";
+                this.actions = {}
+                
+            },
+            postCreate: function() {
+                this.line1 = new LineWithActionsWidgetThijs({
+                    title: this.title || "Untitled",
+                    modifiers: 'green',
+                    actions: {
+                        "inspectIcon": {
+                            callback: lang.hitch(this, "_inspectObject"),
+                            properties: {
+                                blockButton: false,
+                                modifiers: "white",
+                                icon: "Inspect"
+                            }
+                        }
+                    }
+                }).placeAt(this.line1Node);
+                this.line2 = new LineWithActionsWidgetThijs({
+                    title: this.subTitle || "",
+                    modifiers: 'green',
+                    actions: {}
+                }).placeAt(this.line1Node);
+                var line3Actions = this._createLine3Actions();
+                this.line3 = new LineWithActionsWidgetThijs({
+                    title: this.lowerTitle || "",
+                    modifiers: 'green',
+                    actions: line3Actions
+                }).placeAt(this.line1Node);
+                this.line1.startup();
+                this.line2.startup();
+                this.line3.startup();
+                this.inherited(arguments);
+            },
+            _createLine3Actions: function() {
+                var ac = {};
+                if (this.actions["edit"]) {
+                    ac["edit"] = {
+                        callback: lang.hitch(this, "_editObject", this.actions["edit"]),
+                        properties: {
+                            blockButton: true,
+                            label: "Edit/View",
+                            modifiers: "trans",
+                            icon: "Settings"
+                        }
+                    };
+                    delete this.actions["edit"];
+                }
+                if (this.actions["delete"]) {
+                    ac["delete"] = {
+                        callback: lang.hitch(this, "_deleteObject", this.actions["delete"]),
+                        properties: {
+                            blockButton: true,
+                            label: "Delete",
+                            modifiers: "trans",
+                            icon: "Delete"
+                        }
+                    };
+                    delete this.actions["delete"];
+                }
+                for (action in this.actions) {
+                    ac[action] = {
+                        callback: lang.hitch(this, this.actions[action]),
+                        properties: {
+                            blockButton: true,
+                            label: action,
+                            modifiers: "trans",
+                            icon: action.charAt(0).toUpperCase()+action.slice(1)
+                        }
+                    }
+                }
+                return ac;
+            },
+            
+            _setObjectReference: function(identifier) {
+            // TODO: Set this ObjectBox to refer to a certain database object
+            },
+            _getObjectInfo: function() {
+            // TODO: Query the database and retrieve a JSON array of object properties
+            },
+            _inspectObject: function() {
+            // TODO: Get object information (or retrieve from cache), then display in popup
+            },
+            _editObject: function(customFunction) {
+                // TODO: Pass an edit call to the page script, along with reference to the object contained in this ObjectBox
+                alert("Default edit code");
+                customFunction();
+            },
+            _deleteObject: function(customFunction) {
+                // TODO: Pass a delete call to the page script, along with reference to the object contained in this ObjectBox
+                customFunction();
+            },
+            
+            
+            _setTitleAttr: function(value) {
+                this.title = value;
+                if (this.line1 && this.line1.set) {
+                    this.line1.set('title', this.title);
+                }
+            },
+            _setSubTitleAttr: function(value) {
+                this.subTitle = value;
+                if (this.line2 && this.line2.set) {
+                    this.line2.set('title', this.subTitle);
+                }
+            },
+            _setLowerTitleAttr: function(value) {
+                this.lowerTitle = value;
+                if (this.line3 && this.line3.set) {
+                    this.line3.set('title', this.lowerTitle);
+                }
+            },
+            _setObjectTypeAttr: function(value) {
+                this.objectType = value;
+                this.iconNode.className = "rftIcon typeIcon rftIcon"+this.objectType;
+            },
+
+            /* This is an experiment to embed the creation function in the ObjectBox class itself. This method cannot be static, but can be called externally as such:
+             * rft.ui.ObjectBox().CreateNew(args, ref, loc);
+             * TODO: Check with Hendrik if I should do this or not!
+             * */
+            CreateNew: function(arguments, reference, location) {
+                var newBox = new rft.ui.ObjectBox(arguments);
+                newBox.startup();
+                newBox.placeAt(reference, location);
+            }
+        });
+    });
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/templates/MainMenu.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/templates/MainMenu.html	(revision 343)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/templates/MainMenu.html	(revision 344)
@@ -1,7 +1,6 @@
 <div class="mainMenu">
     <div  data-dojo-type="dijit.MenuBar">
-        <div data-dojo-type="dijit.MenuBarItem" data-dojo-props="disabled: true">Research Facilitator Tool</div>
-        <div data-dojo-type="rft.ui.MenuBarLink" data-dojo-props="pageId:'sessions'">Sessions</div>
-        <div data-dojo-type="dijit.PopupMenuBarItem">
+        <div class="rftMainMenuButton" data-dojo-type="rft.ui.MenuBarLink" data-dojo-props="pageId:'sessions'">Sessions</div>
+        <div class="rftMainMenuButton" data-dojo-type="dijit.PopupMenuBarItem">
             <span>Content</span>
             <div data-dojo-type="dijit.DropDownMenu">
@@ -12,6 +11,6 @@
             </div>
         </div>
-        <div data-dojo-type="rft.ui.MenuBarLink" data-dojo-props="pageId:'results'">Results</div>
-        <div data-dojo-type="dijit.MenuBarItem" id="loginMenu" style="float:right;">Login/Register</div>
+        <div class="rftMainMenuButton" data-dojo-type="rft.ui.MenuBarLink" data-dojo-props="pageId:'results'">Results</div>
+        <div class="rftMainMenuButton" data-dojo-type="rft.ui.MenuBarLink" id="loginMenu">Logout</div>
     </div>
 </div>
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/templates/ObjectBox.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/templates/ObjectBox.html	(revision 344)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/templates/ObjectBox.html	(revision 344)
@@ -0,0 +1,6 @@
+<div class="${baseClass}">
+    <div class="rftIcon typeIcon rftIcon${objectType}" data-dojo-attach-point="iconNode"></div>
+    <div data-dojo-attach-point="line1Node"></div>
+    <div data-dojo-attach-point="line2Node"></div>
+    <div data-dojo-attach-point="line3Node"></div>
+</div>
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/templates/SessionBar.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/templates/SessionBar.html	(revision 344)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/templates/SessionBar.html	(revision 344)
@@ -0,0 +1,5 @@
+<div class="${baseClass}">
+    <span class="rftIcon rftIconSession" data-dojo-attach-point="iconNode"></span>
+    <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-attach-point="upperNode" data-dojo-props="modifiers: 'green', actions: {'inspect':{callback: inspect, properties: {blockButton: true, modifiers: 'white'}}}"></div>
+    <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-attach-point="lowerNode"></div>
+</div>
