Index: Dev/trunk/client/qed/css/claroOverride.less
===================================================================
--- Dev/trunk/client/qed/css/claroOverride.less	(revision 425)
+++ Dev/trunk/client/qed/css/claroOverride.less	(revision 425)
@@ -0,0 +1,108 @@
+/* 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/trunk/client/qed/css/colors.less
===================================================================
--- Dev/trunk/client/qed/css/colors.less	(revision 425)
+++ Dev/trunk/client/qed/css/colors.less	(revision 425)
@@ -0,0 +1,90 @@
+#rft {
+	&.claro {
+		
+		.colorMixin (@color) {
+			&.bgColor {
+				background-color: @@color !important;
+				&.light {
+					@colorName: "@{color}_light";
+					background-color: @@colorName !important;
+				}
+			}
+			.bgColor {
+				background-color: @@color;
+				&.light {
+					@colorName: "@{color}_light";
+					background-color: @@colorName;
+				}
+			}
+		}
+
+		.hoverColorMixin (@color) {
+			&.hoverBgColor:hover {
+				background-color: @@color !important;
+				&.light {
+					@colorName: "@{color}_light";
+					background-color: @@colorName !important;
+				}
+			}
+			.hoverBgColor:hover {
+				background-color: @@color;
+				&.light {
+					@colorName: "@{color}_light";
+					background-color: @@colorName;
+				}
+			}
+		}
+
+		.hoverTextColorMixin (@color) {
+			&.hoverTextColor:hover {
+				color: @@color !important;
+				&.light {
+					@colorName: "@{color}_light";
+					color: @@colorName !important;
+				}
+			}
+			.hoverTextColor:hover {
+				color: @@color;
+				&.light {
+					@colorName: "@{color}_light";
+					color: @@colorName;
+				}
+			}
+		}
+
+		.bgColor {
+			-webkit-transition-property: background-color 0.2s;
+			-moz-transition-property: background-color 0.2s;
+			-o-transition-property: background-color 0.2s;
+			-ms-transition-property: background-color 0.2s;
+			transition-property: background-color 0.2s;			
+		}
+
+		.blue,
+		&.blue {
+			.colorMixin ("blue");
+			.hoverColorMixin ("blue");
+		}
+		.green,
+		&.green {
+			.colorMixin ("green");
+			.hoverColorMixin ("green");
+		}
+		.orange,
+		&.orange {
+			.colorMixin ("orange");
+			.hoverColorMixin ("orange");
+		}
+		.red,
+		&.red {
+			.colorMixin ("red");
+			.hoverColorMixin ("red");
+		}
+		.purple,
+		&.purple {
+			.colorMixin ("purple");
+			.hoverColorMixin ("purple");
+		}
+
+	}
+}
Index: Dev/trunk/client/qed/css/colors2.less
===================================================================
--- Dev/trunk/client/qed/css/colors2.less	(revision 425)
+++ Dev/trunk/client/qed/css/colors2.less	(revision 425)
@@ -0,0 +1,106 @@
+DESCRIPTION {
+	/*
+How to use colour system:
+Apply a combination of at most 1 "colour" class and one or more "modifier" classes.
+Colour classes: Red, Blue, Green, Orange, Purple
+Modifer classes:
+- textColor: Change the font colour of element to the "colour" class combined with.
+- bgColor: Change the background colour to the "colour" class combined with.
+- doesHover: If present in combination with one of the above two modifiers, 
+the element will shift it's background- or text colour to a lighter version on hover.
+- hoverTextColor: Same as .textColor, but only affects elements being hovered over.
+- hoverBgColor: Same as .bgColor, but only affects elements being hovered over.
+NOTE: .doesHover does nothing in combination with the above two modifiers!
+*/
+}
+
+// Variables/Colour scheme parameters
+.textColor (@color) {
+	color: @@color;
+}
+.textColorH (@color) {
+	color: @@color;
+	&.doesHover:hover {
+		@colorName: "@{color}_light";
+		color: @@colorName;
+	}
+}
+.hoverTextColor (@color) {
+	&:hover {
+		color: @@color;
+
+	}
+}
+.bgColor (@color) {
+	background-color: @@color;
+}
+.bgColorH (@color) {
+	background-color: @@color;
+	&.doesHover:hover {
+		@colorName: "@{color}_light";
+		background-color: @@colorName;
+	}
+}
+.hoverBgColor (@color) {
+	&:hover {
+		background-color: @@color;
+
+	}
+}
+
+
+// Private color mixin is used to assign the colour classes below, don't use this in external CSS!
+.privateColorMixin (@color) {
+	&.textColor {	//Change text colour to C-Class
+		color: @@color;
+		&.doesHover:hover {	//If also .doesHover, shift colour to light version on hover
+			@colorName: "@{color}_light";
+			color: @@colorName;
+		}
+	}
+	&.bgColor {	// Change background colour to C-Class
+		background-color: @@color;
+		color: @text;
+		&.doesHover:hover {	//If .doesHover, shift to light on hover
+			@colorName: "@{color}_light";
+			background-color: @@colorName;
+			color: @darkest;
+		}
+	}
+	&.hoverTextColor:hover {	// Only change text colour to C-class on hover
+		color: @@color;
+	}
+	&.hoverBgColor:hover {	// Only change background colour to C-class on hover
+		background-color: @@color;
+	}
+}
+
+#rft {
+	&.claro {
+
+		.blue {
+			.privateColorMixin("blue");
+		}
+		.red {
+			.privateColorMixin("red");
+		}
+		.orange {
+			.privateColorMixin("orange");
+		}
+		.green {
+			.privateColorMixin("green");
+		}
+		.purple {
+			.privateColorMixin("purple");
+		}
+
+		.textColor,
+		.hoverTextColor {
+			transition: color 0.2s;
+		}
+		.bgColor, 
+		.hoverBgColor {
+			transition: background-color 0.2s;
+		}
+	}
+}
Index: Dev/trunk/client/qed/css/layout.less
===================================================================
--- Dev/trunk/client/qed/css/layout.less	(revision 425)
+++ Dev/trunk/client/qed/css/layout.less	(revision 425)
@@ -0,0 +1,285 @@
+*:focus {
+	//disable Chrome outline of focused elements
+	outline: none;
+}
+html, body {
+	width: 100%;
+	height: 100%;
+	background-color: @base;
+}
+
+#rft {
+	&.claro {
+		font-family: @font;
+		font-size: @font_size;
+		color: @darkest;
+
+		.dijitBorderContainer, .dijitContentPane, .dijitTabContainer, .dijitTabPaneWrapper {
+			background: transparent;
+			border: none;
+		}		
+
+
+		h1 {
+			.noMargin;
+			padding: 0 10px 8px 10px;
+			float: left;
+			clear: left;
+			font-size: @h1Size;
+			color: @headers;
+			line-height: @h1Size;
+			font-weight: normal;
+			-webkit-user-select: none;
+			-moz-user-select: none;
+			-ms-user-select: none;
+			user-select: none;
+		}
+
+		h2 {
+			.noOffset;
+			color: @headers;
+			font-size: @h2Size;
+			line-height: floor(@h2Size * 1.365);
+
+			.rftIcon {
+				.setIcon(32px);
+				margin-right: 8px;
+			}
+		}
+
+		h3 {
+			.noMargin;
+			font-size: @h3Size;
+			margin-bottom: @std_offset;
+		}
+
+		h4 {
+			font-size: @h4Size;
+		}
+
+		//Main screen layout
+		.topbar {
+
+			overflow-y: hidden;
+
+			.dijitMenuBar {
+				.flatShading;
+				background-color: transparent;
+				float: right;
+				clear: right;
+				margin-top: 16px;
+			}
+
+			.breadcrumbs {
+				color: @headers;
+				.breadcrumb {
+					font-size: @font_size;
+					&.breadcrumbCurrent {
+						color: @text;
+						font-size: round(@font_size * 1.125);
+					}
+					&.breadcrumbHover {
+						color: @blue;
+					}
+				}
+			}
+		}
+
+		.dijitContentPane.page {
+			.noOffset;
+		}
+
+		.dijitContentPane.content {
+			.noOffset;
+			display: block;
+			clear: both;
+			background-color: @base2;
+			background-image: -webkit-gradient(
+				50% 50%, 
+				circle, 
+				#666666 1%,
+				#444444 100%
+				);
+			-moz-background-image: gradient(
+				50% 50%, 
+				circle, 
+				#666666 1%,
+				#444444 100%
+				);
+			-o-background-image: gradient(
+				50% 50%, 
+				circle, 
+				#666666 1%,
+				#444444 100%
+				);
+			-ms-background-image: gradient(
+				50% 50%, 
+				circle, 
+				#666666 1%,
+				#444444 100%
+				);
+			background-image: gradient(
+				50% 50%, 
+				circle, 
+				#666666 1%,
+				#444444 100%
+				);
+
+			.dijitBorderContainer {
+				padding: @std_offset;
+			}
+		}
+
+		//Form stuff?
+		.loginLabel {
+			.newLine;
+			width: 100px;
+		}
+		.loginInput {
+			width: 150px;
+		}
+
+		.rftMultipleChoiceWidget {
+			display: table;
+			.row {
+				display: table-row;
+			}
+			.rowBox {
+				display: table-cell;
+			}
+			.rowText {
+				display: table-cell;
+				width: 100px;
+			}
+			.rowBtn {
+				display: table-cell;
+				width: 30px;
+			}
+		}
+
+		//Tabs
+		.verticalTabList {
+			width: 190px;
+		}
+
+		.dijitTab {
+			.transition(0.2s);
+			background-color: transparent;
+			padding: @std_offset @std_offset_big;
+			color: @headers;
+			overflow: hidden;
+
+			
+
+			
+		}
+
+		.dijitTabContainerLeft-tabs {
+			border: none;
+			padding: @std_offset;
+
+			.dijitTab {
+				margin: @std_offset;
+				width: 200px;
+				min-height: @tab_height;
+				border: 1px solid @headers;
+
+				.dijitTabContent {
+					min-height: @tab_height;
+					line-height: @tab_height;
+					width: 190px;
+				}
+
+				&.dijitTabChecked {
+					.transition (0.1s);
+					color: @text;
+					border: 1px solid transparent;
+
+					&.dijitTabHover {
+						border: 1px solid transparent;
+					}
+				}
+
+				&.dijitTabHover {
+					.transition (0.1s);
+					color: @text;
+					border-color: @text;
+				}
+
+				&.dijitTabActive {
+					.transition (0.1s);
+					color: @headers;
+				}
+			}
+
+		}
+		//Tab colour settings
+		&.blue .dijitTabChecked,
+		.blue .dijitTabChecked,
+		div.blue.dijitTabChecked {
+			.bgColor ("blue");
+		}
+		&.green .dijitTabChecked,
+		.green .dijitTabChecked,
+		div.green.dijitTabChecked {
+			.bgColor ("green");
+		}
+		&.red .dijitTabChecked,
+		.red .dijitTabChecked,
+		div.red.dijitTabChecked {
+			.bgColor ("red");
+		}
+		&.orange .dijitTabChecked,
+		.orange .dijitTabChecked,
+		div.orange.dijitTabChecked {
+			.bgColor ("orange");
+		}
+		&.purple .dijitTabChecked,
+		.purple .dijitTabChecked,
+		div.purple.dijitTabChecked {
+			.bgColor ("purple");
+		}
+
+
+		// Inputs
+		fieldset {
+			border: none;
+			
+			&.align {
+				
+				input,
+				.dijitTextBox,
+				textarea {
+					margin-left: 0;
+				}
+
+				label {
+					color: @text;
+					display: inline-block;
+					width: 100px !important;
+				}
+			}
+		}
+
+		.newline {
+			.newLine;
+			display: block;
+		}
+
+		.floatRight {
+			float: right;
+			.noMargin
+		}
+
+		.rftLineListView {
+			max-width: 200px;
+			max-height: 500px;
+			
+			.rftLineListViewContent {
+				width: auto;
+				overflow: auto;
+			}
+		}
+	}
+}
+
Index: Dev/trunk/client/qed/css/main.css
===================================================================
--- Dev/trunk/client/qed/css/main.css	(revision 424)
+++ Dev/trunk/client/qed/css/main.css	(revision 425)
@@ -1,4 +1,4 @@
-/* Menu.css */
 @import "external.css";
+
 @import "hva-mods.css";
 DESCRIPTION {
@@ -764,5 +764,4 @@
 }
 #rft.claro .rftIndexMenuButton {
-  border: none;
   background-image: none;
   -webkit-box-shadow: none;
@@ -868,5 +867,4 @@
 }
 #rft.claro .dijitMenuPopup .dijitMenu {
-  border: none;
   background-image: none;
   -webkit-box-shadow: none;
@@ -933,5 +931,4 @@
 }
 #rft.claro .dijitMenuBar .rftMainMenuButton {
-  border: none;
   background-image: none;
   -webkit-box-shadow: none;
@@ -978,5 +975,4 @@
 }
 #rft.claro .dojoxTitleGroup .dijitTitlePane .dijitTitlePaneTitle {
-  border: none;
   background-image: none;
   -webkit-box-shadow: none;
@@ -1027,5 +1023,4 @@
 }
 #rft.claro .rftLargeButton .dijitButtonNode {
-  border: none;
   background-image: none;
   -webkit-box-shadow: none;
@@ -1104,5 +1099,4 @@
 }
 #rft.claro .rftBlockButton .dijitButtonNode {
-  border: none;
   background-image: none;
   -webkit-box-shadow: none;
@@ -1157,5 +1151,4 @@
   margin: 0 0 0 0;
   padding: 0 0 0 0;
-  border: none;
   background-image: none;
   -webkit-box-shadow: none;
Index: Dev/trunk/client/qed/css/main.less
===================================================================
--- Dev/trunk/client/qed/css/main.less	(revision 425)
+++ Dev/trunk/client/qed/css/main.less	(revision 425)
@@ -0,0 +1,26 @@
+// Setup up compilation context and shared functionality
+@import "variables.less";
+@import "mixins.less";
+@import "colors2.less";
+
+// Link to dijit/claro/dojox css
+@import "external.css";
+@import "hva-mods.css";
+@import "claroOverride.less";
+
+// RFT specific styling
+@import "layout.less";
+@import "rftIcons.less";
+@import "rftSelector.less";
+@import "rftLineWithActions.less";
+@import "menus.less";
+@import "questionEditor.less";
+@import "surveyEditor.less";
+@import "rftButtons.less";
+@import "rftObjectBox.less";
+@import "sessionEditor.less";
+
+
+// Page specific stylesheets!
+@import "pages/questions.less";
+@import "pages/sessions.less";
Index: Dev/trunk/client/qed/css/menus.less
===================================================================
--- Dev/trunk/client/qed/css/menus.less	(revision 425)
+++ Dev/trunk/client/qed/css/menus.less	(revision 425)
@@ -0,0 +1,213 @@
+#rft {
+	&.claro {
+		//Index menu
+		.rftIndexMenuBlock {
+			width: @indexmenu_blockwidth;
+			height: @indexmenu_blockheight;
+			background: @base1;
+			float: left;
+			margin: @indexmenu_blockmargin;
+			overflow: hidden;
+
+			&:hover .rftIndexMenuMask {
+				margin-top: -@indexmenu_blockheight;
+			}
+		}
+		.rftIndexMenuMask {
+			width: @indexmenu_blockwidth;
+			height: @indexmenu_blockheight;
+			background: @base1;
+			color: @headers;
+			margin-top: 0;
+
+			.label {
+				color: @headers;
+				font-size: @indexmenu_font_size;
+				height: @indexmenu_font_size;
+				line-height: @indexmenu_font_size;
+				margin-top: (@indexmenu_blockheight - @indexmenu_font_size) / 2;
+				float: left;
+			}
+
+			.rftIcon {
+				.setIcon(32px);
+				float: left;
+				margin: ((@indexmenu_blockheight - @indexmenu_font_size)/2) 8px 0 8px;
+			}
+		}
+		.rftIndexMenuButton {
+			.flatShading;
+			.noOffset;
+			.transition (0.3s);
+			line-height: @button_indexmenu_height;
+			border: none;
+
+			.dijitButtonNode {
+				border: none;
+				color: @headers;
+				font-size: @h2Size;
+
+				.dijitButtonContents {
+					vertical-align: top;
+
+					.dijitButtonText {
+						padding-bottom: 10px;
+						line-height: 20px;
+					}
+
+					.rftIcon {
+						.setIcon (32px);
+						margin: 0 @std_offset_big;
+					}
+				}
+
+				
+			}
+
+			.indexMenuMixin (@number) when (@number > 0){
+				@height: @indexmenu_blockheight / @number;
+				height: @height;
+				width: @indexmenu_blockwidth;
+				
+				.dijitButtonNode {
+					margin: ((@height - @button_indexmenu_content_size)/2) 0 0 0;
+				}
+			}
+
+			&.oneHeight {
+				.indexMenuMixin (4);
+			}
+			&.twoHeight {
+				.indexMenuMixin (2);
+			}
+			&.fourHeight {
+				.indexMenuMixin (1);
+			}
+
+			&.rftIndexMenuButtonHover {
+				color: @text;
+				.transition (0.1s);
+				.dijitButtonText {
+					color: @text;
+					.transition(0.1s);
+				}
+
+				&.blue {
+					background-color: @blue;
+				}
+				&.red {
+					background-color: @red;
+				}
+				&.green {
+					background-color: @green;
+				}
+				&.orange {
+					background-color: @orange;
+				}
+				&.purple {
+					background-color: @purple;
+				}
+			}
+
+			&.rftIndexMenuButtonActive {
+				.rftIcon {
+					.setIcon (32px, black);
+				}
+				.transition(0.3s);
+				color: @darkest;
+				background: @text;
+
+			}
+
+		}
+
+		//Topbar dropdown menu
+		.dijitMenuPopup {
+			.dijitMenu {
+				
+				.flatShading;
+				color: @headers;
+				background-color: @base;
+				border: none;
+
+				.dijitMenuItem {
+					color: @headers;
+					.flatShading;
+					background-color: @base;
+
+					&.dijitMenuItemHover,
+					&.dijitMenuItemActive,
+					&.dijitMenuItemSelected {
+						.dijitMenuItemLabel {
+							color: @text;
+						}
+
+						&.red {
+							background-color: @red;
+						}
+						&.blue {
+							background-color: @blue;
+						}
+						&.green {
+							background-color: @green;
+						}
+						&.orange {
+							background-color: @orange;
+						}
+						&.purple {
+							background-color: @purple;
+						}
+
+					}
+
+					.rftIcon {
+						.setIcon (16px);
+						.noMargin;
+						margin-right: @std_offset_big;
+					}
+
+					&.dijitMenuItemActive .rftIcon {
+						.setIcon(16px, black);
+					}
+				}
+
+			}
+		}
+
+
+		//Main menu
+		.dijitMenuBar .rftMainMenuButton {
+			.flatShading;
+			.transition (0.1s);
+			border: none;
+			height: @button_mainmenu_height;
+			width: auto;
+			background: transparent;
+			color: @headers;
+			text-align: center;
+			font-size: @button_mainmenu_font_size;
+			line-height: @button_mainmenu_height;
+			padding: 0 @button_mainmenu_padding;
+			margin: 0 @button_mainmenu_spacing;
+
+			&.dijitMenuItemHover, 
+			&.dijitMenuitemActive {
+				.transition (0.1s);
+			}
+
+			&.dijitMenuItemHover {
+				color: @text;
+				font-size: @button_mainmenu_font_size + @button_mainmenu_font_grow;
+			}
+
+			&.dijitMenuItemActive {
+				color: @blue;
+				font-size: @button_mainmenu_font_size + @button_mainmenu_font_grow;
+			}
+			&.dijitMenuItemSelected {
+				font-size: @button_mainmenu_font_size + @button_mainmenu_font_grow;
+				color: @text;
+			}
+		}
+	}
+}
Index: Dev/trunk/client/qed/css/mixins.less
===================================================================
--- Dev/trunk/client/qed/css/mixins.less	(revision 425)
+++ Dev/trunk/client/qed/css/mixins.less	(revision 425)
@@ -0,0 +1,96 @@
+//LAYOUT
+.newLine () {
+	float: left;
+	clear: left;
+}
+
+.transition (@time: @transition_time) {
+	-webkit-transition: all @time;
+	-moz-transition: all @time;
+	-o-transition: all @time;
+	-ms-transition: all @time;
+	transition: all @time;
+}
+
+.flatShading () {
+	//Disable borders, gradients and other effects. One flat colour shading.
+	border: none;
+	background-image: none;
+	-webkit-box-shadow: none;
+	box-shadow: none;
+	border-radius: 0;
+}
+
+.noOffset () {
+	.noMargin;
+	.noPadding;
+}
+
+.noMargin () {
+	margin: 0 0 0 0;
+}
+
+.noPadding () {
+	padding: 0 0 0 0;
+}
+//------------------------------------------
+//ICONS
+
+.setIconSize (@size, @b) when (@size < 24px) {
+	width: @size;
+	height: @size;
+	margin: ((24px - @size) / 2) 0;
+	.noPadding ();
+	background-image: url('images/icons/rftIcons16@{b}.png');
+}
+
+.setIconSize (@size, @b) when (@size >= 24px) and (@size < 32) {
+	width: 24px;
+	height: 24px;
+	.noMargin ();
+	.noPadding ();
+	background-image: url('images/icons/rftIcons24@{b}.png');
+}
+
+.setIconSize (@size, @b) when (@size >= 32px) {
+	width: 32px;
+	height: 32px;
+	margin: 0;
+	.noPadding ();
+	background-image: url('images/icons/rftIcons32@{b}.png');
+}
+
+.setIcon (@size, black) {
+	.setIconSize(@size, "b");
+}
+.setIcon (@size, white) {
+	.setIconSize(@size, "");
+}
+.setIcon (@size) {
+	.setIconSize(@size, "");
+}
+//------------------------------------------
+
+//Old colour settings
+//TODO: I AM NOT SURE IF THIS ACTUALLY WORKS! THOROUGHLY TEST WHEN APPLIED TO PAGES!!!!
+// Oke, wat. Deze shit is echt niet te snappen. :P Gewoon maar weer de oude meuk erin hangen?
+.blockButtonColorMixin (@color) {
+	.dijitButtonNode {
+		background-color: @@color;
+	}
+
+	&.dijitHover {
+		.dijitButtonNode {
+			background-color: @text;
+			color: @darkest;
+		}
+	}
+	&.dijitActive {
+		.dijitButtonNode {
+			@colorName: "@{color}_light";
+			background-color: @@colorName;
+			color: @text;
+		}
+	}
+
+}
Index: Dev/trunk/client/qed/css/pages/questions.less
===================================================================
--- Dev/trunk/client/qed/css/pages/questions.less	(revision 425)
+++ Dev/trunk/client/qed/css/pages/questions.less	(revision 425)
@@ -0,0 +1,23 @@
+#rft.claro {
+	.page_questions {
+		
+		.rftSelector {
+			.rftSelectorCategory .rftLineWithActions {
+				.bgColor ("orange");
+			}
+
+			.rftSelectorSelected { 
+				.rftLineWithActions {
+					.bgColor ("text");
+					color: @darkest;
+				}
+
+				.rftBlockButton {
+					background-color: #ff00ff;
+					.blockButtonColorMixin ("orange");
+				}
+				
+			}
+		}
+	}
+}
Index: Dev/trunk/client/qed/css/pages/sessions.less
===================================================================
--- Dev/trunk/client/qed/css/pages/sessions.less	(revision 425)
+++ Dev/trunk/client/qed/css/pages/sessions.less	(revision 425)
@@ -0,0 +1,20 @@
+#rft.claro {
+	.page_sessions {
+
+		.rftObjectBox {
+			.noPadding ();
+			color: @text;
+
+			.typeIcon.rftIcon {
+				.setIcon(32px);
+			}
+
+			.rftLineWithActions {
+				background-color: @green;
+				.rftBlockButton {
+					.blockButtonColorMixin ("green");
+				}
+			}
+		}
+	}
+}
Index: Dev/trunk/client/qed/css/questionEditor.less
===================================================================
--- Dev/trunk/client/qed/css/questionEditor.less	(revision 425)
+++ Dev/trunk/client/qed/css/questionEditor.less	(revision 425)
@@ -0,0 +1,43 @@
+#rft {
+	&.claro {
+
+		.dojoxTitleGroup {
+			.dijitTitlePane {
+				.noMargin;
+
+				.dijitTitlePaneTitle {
+					.flatShading;
+					.noMargin;
+					background-color: @orange;
+					border: none;
+					padding: 0 @std_offset;
+					height: @std_height;
+
+					&.dijitTitlePaneTitleHover,
+					&.dijitTitlePaneTitleFocused {
+						background-color: @orange_light;
+					}
+
+				}
+
+				.dijitTitlePaneTextNode {
+					color: @text;
+					font-size: @font_size;
+					line-height: @std_height;
+				}
+
+				.dijitTitlePaneContentOuter {
+					background-color: @base1;
+					border: none;
+				}
+
+				.dijitTitlePaneTitleFocus {
+					.noMargin;
+				}
+			}
+
+
+		}
+
+	}
+}
Index: Dev/trunk/client/qed/css/rftButtons.less
===================================================================
--- Dev/trunk/client/qed/css/rftButtons.less	(revision 425)
+++ Dev/trunk/client/qed/css/rftButtons.less	(revision 425)
@@ -0,0 +1,166 @@
+#rft {
+	&.claro {
+		
+		//LARGEBUTTON---------------------------------
+		.rftLargeButton {
+
+			.flatShading;
+			margin-right: @button_large_spacing;
+			height: @button_large_height;
+
+			&*, * {
+				-webkit-user-select: none;
+				-moz-user-select: none;
+				-ms-user-select: none;
+				user-select: none;
+			}
+
+			.dijitButtonNode {
+
+				.flatShading;
+				border: none;
+				height: @button_large_height;
+				background: transparent;
+				color: @headers;
+				font-size: @button_large_font_size;
+				.transition(0.3s);
+
+				.rftIcon {
+					.setIcon(24px);
+				}
+
+				.dijitButtonText {
+					line-height: @button_large_height;
+					.noMargin;
+					padding-left: @std_offset_big;
+				}
+			}
+			
+			&.black .dijitButtonNode .rftIcon {
+				.setIcon(24px, black);
+			}
+
+			&.rftLargeButtonHover .dijitButtonNode,
+			&.rftLargeButtonActive .dijitButtonNode {
+				.transition (0.1s);
+			}
+		}
+
+		//colors on hover
+		span.blue.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+		.blue .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+			color: @blue_light;
+		}
+		span.orange.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+		.orange .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+			color: @orange_light;
+		}
+		span.green.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+		.green .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+			color: @green_light;
+		}
+		span.red.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+		.red .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+			color: @red_light;
+		}
+		span.purple.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+		.purple .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+			color: @purple_light;
+		}
+
+		//BLOCKBUTTON---------------------------------
+		.rftBlockButton {
+			
+			.flatShading;
+			.noMargin;
+			height: @button_block_height;
+			vertical-align: top;
+
+			.dijitButtonContents {
+				height: 24px;
+			}
+
+			.dijitButtonNode {
+				.flatShading;
+				.transition (0.3s);
+				line-height: @button_block_height;
+				vertical-align: top;
+				height: @button_block_height;
+				padding: 0 @std_offset;
+				border: none;
+				color: @text;
+				font-size: @button_block_font_size;
+
+				.dijitButtonText {
+					line-height: @button_block_height;
+				}
+
+				.rftIcon {
+					.setIcon(16px);
+				}
+			}
+
+			&.rftBlockButtonHover, 
+			&.rftBlockButtonActive {
+				.transition (0.1s);
+				.rftIcon {
+					vertical-align: top;
+					.setIcon(16px, black);
+				}
+			}
+
+			//Disabled because this is presumably useless
+			// &.blue {
+			// 	.blockButtonColorMixin ("blue");
+			// }
+			// &.green {
+			// 	.blockButtonColorMixin ("green");
+			// }
+			// &.orange {
+			// 	.blockButtonColorMixin ("orange");
+			// }
+			// &.red {
+			// 	.blockButtonColorMixin ("red");
+			// }
+			// &.purple {
+			// 	.blockButtonColorMixin ("purple");
+			// }
+		}
+
+		
+
+		
+
+
+		//INLINEBUTTON---------------------------------
+		.rftInlineButton {
+			float: right;
+			height: @button_inline_height;
+			width: @button_inline_height;
+
+			.dijitButtonNode {
+				.noOffset;
+				.flatShading;
+				width: @button_inline_height;
+				height: @button_inline_height;
+				border: none;
+			}
+
+			.rftIcon {
+				.setIcon(16px);
+			}
+			&.white .rftIcon {
+				.setIcon(16px);
+			}
+			&.black .rftIcon {
+				.setIcon(16px, black);
+			}
+
+			&.dijitHover {
+				.rftIcon {
+					// outline: @headers solid thin;
+				}
+			}
+		}
+	}
+}
Index: Dev/trunk/client/qed/css/rftIcons.less
===================================================================
--- Dev/trunk/client/qed/css/rftIcons.less	(revision 425)
+++ Dev/trunk/client/qed/css/rftIcons.less	(revision 425)
@@ -0,0 +1,168 @@
+#rft {
+	&.claro {
+		.rftIcon {
+			.noOffset;
+			float: left;
+			display: inline-block;
+			border: none;
+			background-color: transparent;
+			background-repeat: no-repeat;
+		}
+	}
+
+	.rftIconApplication {
+		background-position: 0px 0px;
+	}
+	.rftIconDashboard {
+		background-position: -32px 0px;
+	}
+	.rftIconSession {
+		background-position: -64px 0px;
+	}
+	.rftIconSessionActive {
+		background-position: -96px 0px;
+	}
+	.rftIconSessionTemplate {
+		background-position: -128px 0px;
+	}
+	.rftIconSurvey {
+		background-position: -160px 0px;
+	}
+	.rftIconQuestion {
+		background-position: -192px 0px;
+	}
+	.rftIconQuestionFill {
+		background-position: -224px 0px;
+	}
+	.rftIconRespondent {
+		background-position: -256px 0px;
+	}
+	.rftIconAnswer {
+		background-position: -288px 0px;
+	}
+	.rftIconAnswerSet {
+		background-position: -320px 0px;
+	}
+	.rftIconGameData {
+		background-position: -352px 0px;
+	}
+	.rftIconUser {
+		background-position: -384px 0px;
+	}
+		//Actions
+	.rftIconAccept {
+		background-position: -416px 0px;
+	}
+	.rftIconCancel {
+		background-position: -448px 0px;
+	}
+	.rftIconPlus {
+		background-position: -480px 0px;
+	}
+	.rftIconMinus {
+		background-position: -512px 0px;
+	}
+	.rftIconIncrease {
+		background-position: -544px 0px;
+	}
+	.rftIconDecrease {
+		background-position: -576px 0px;
+	}
+	.rftIconDelete {
+		background-position: -608px 0px;
+	}
+	.rftIconHome {
+		background-position: -640px 0px;
+	}
+	.rftIconPreview {
+		background-position: -672px 0px;
+	}
+	.rftIconSave {
+		background-position: -704px 0px;
+	}
+	.rftIconDiscard {
+		background-position: -736px 0px;
+	}
+	.rftIconProperties {
+		background-position: -768px 0px;
+	}
+	.rftIconUndo {
+		background-position: -800px 0px;
+	}
+	.rftIconRedo {
+		background-position: -832px 0px;
+	}
+	.rftIconBack {
+		background-position: -864px 0px;
+	}
+	.rftIconForward {
+		background-position: -896px 0px;
+	}
+	.rftIconRefresh {
+		background-position: -928px 0px;
+	}
+	.rftIconHelp {
+		background-position: -960px 0px;
+	}
+	.rftIconInspect {
+		background-position: -992px 0px;
+	}
+	.rftIconTag {
+		background-position: -1024px 0px;
+	}
+	.rftIconImage {
+		background-position: -1056px 0px;
+	}
+	.rftIconEdit {
+		background-position: -1088px 0px;
+	}
+	.rftIconLock {
+		background-position: -1120px 0px;
+	}
+	.rftIconUnlock {
+		background-position: -1152px 0px;
+	}
+	.rftIconPreset {
+		background-position: -1184px 0px;
+	}
+	.rftIconTextBlock {
+		background-position: -1216px 0px;
+	}
+	.rftIconPageBreak {
+		background-position: -1248px 0px;
+	}
+	.rftIconExternal {
+		background-position: -1280px 0px;
+	}
+	.rftIconInput {
+		background-position: -1312px 0px;
+	}
+	.rftIconPublish {
+		background-position: -1344px 0px;
+	}
+	//Arrows
+	.rftIconFullArrowUp {
+		background-position: -1696px 0px;
+	}
+	.rftIconFullArrowDown {
+		background-position: -1728px 0px;
+	}
+	.rftIconFullArrowLeft {
+		background-position: -1760px 0px;
+	}
+	.rftIconFullArrowRight {
+		background-position: -1792px 0px;
+	}
+	.rftIconHalfArrowUp {
+		background-position: -1824px 0px;
+	}
+	.rftIconHalfArrowDown {
+		background-position: -1856px 0px;
+	}
+	.rftIconHalfArrowLeft {
+		background-position: -1888px 0px;
+	}
+	.rftIconHalfArrowRight {
+		background-position: -1920px 0px;
+	}
+}
Index: Dev/trunk/client/qed/css/rftLineWithActions.less
===================================================================
--- Dev/trunk/client/qed/css/rftLineWithActions.less	(revision 425)
+++ Dev/trunk/client/qed/css/rftLineWithActions.less	(revision 425)
@@ -0,0 +1,61 @@
+@dndBorderSize: 6px;
+
+#rft {	//rft nameSpace, apply this to base page! Adds 1000 to specificity by default, so easier overrides of Claro
+	&.claro {
+
+		.rftLineWithActions {
+			.flatShading();
+			position: relative;
+			height: @std_height;
+			white-space: nowrap;
+			margin: @std_offset 0;
+			color: @text;
+			.bgColor("blue");
+
+			&.dojoDndItem {
+				.transition;
+
+				&.dojoDndItemBefore {
+					margin-top: @dndBorderSize;
+					border-top: @dndBorderSize solid @text;
+				}
+				&.dojoDndItemAfter {
+					margin-bottom: @dndBorderSize;
+					border-bottom: @dndBorderSize solid @text;
+				}
+				&.dojoDndItemover, &.dojoDndItemAnchor {
+					background-image: none;
+					border: none;
+					padding: 2px;
+					background-color: fade(#fff, 10%);	// Not sure if this will work.
+					// This is an attempt to lighten the rftLWA's colour by overlaying with transparent white.
+				}
+			}
+
+			.rftLineWithActionsTitle {
+				float: left;
+				margin: 0 8px;
+				overflow: hidden;
+				white-space: nowrap;
+				word-wrap: break-word;
+				line-height: 24px;
+			}
+
+			.rftLineWithActionsButtons {
+				.noOffset();
+				line-height: @std_height;
+				height: @std_height;
+				position: absolute;
+				right: 0;
+				float: left;
+			}
+		}
+
+		// Make the currently lineWithActions draggable "wipe out" when dragging, so only the Avatar is visible!
+		.dojoDndSourceMoved {
+			.rftLineWithActions.dojoDndItemAnchor {
+				height: 0;
+			}
+		}	
+	}
+}
Index: Dev/trunk/client/qed/css/rftLineWithButtons.less
===================================================================
--- Dev/trunk/client/qed/css/rftLineWithButtons.less	(revision 425)
+++ Dev/trunk/client/qed/css/rftLineWithButtons.less	(revision 425)
@@ -0,0 +1,60 @@
+@dndBorderSize: 6px;
+
+#rft {	//rft nameSpace, apply this to base page! Adds 1000 to specificity by default, so easier overrides of Claro
+	&.claro {
+
+		.rftLineWithActions {
+			.flatShading();
+			position: relative;
+			height: @std_height;
+			white-space: nowrap;
+			margin: @std_offset 0;
+			//Color ("blue");
+
+			&.dojoDndItem {
+				.transition;
+
+				&.dojoDndItemBefore {
+					margin-top: @dndBorderSize;
+					border-top: @dndBorderSize solid @text;
+				}
+				&.dojoDndItemAfter {
+					margin-bottom: @dndBorderSize;
+					border-bottom: @dndBorderSize solid @text;
+				}
+				&.dojoDndItemover, &.dojoDndItemAnchor {
+					background-image: none;
+					border: none;
+					padding: 2px;
+					* {
+						background-color: fade(#fff, 10%);	// Not sure if this will work.
+						// This is an attempt to lighten the rftLWB's colour by overlaying with transparent white.
+					}
+				}
+			}
+
+			.rftLineWithActionsTitle {
+				float: left;
+				margin: 0 8px;
+				overflow: hidden;
+				white-space: nowrap;
+				word-wrap: break-word;
+			}
+
+			.rftLineWithActionsButtons {
+				.noOffset();
+				line-height: @std_height;
+				height: @std_height;
+				position: absolute;
+				right: 0;
+				float: left;
+			}
+		}
+		
+		.dojoDndSourceMoved {
+			.rftLineWithActions.dojoDndItemAnchor {
+				height: 0;
+			}
+		}	
+	}
+}
Index: Dev/trunk/client/qed/css/rftObjectBox.less
===================================================================
--- Dev/trunk/client/qed/css/rftObjectBox.less	(revision 425)
+++ Dev/trunk/client/qed/css/rftObjectBox.less	(revision 425)
@@ -0,0 +1,17 @@
+#rft {
+	&.claro {
+
+		.rftObjectBox {
+			margin: @std_offset_big 0;
+
+			.typeIcon {
+				// .setIcon (32px);
+				// margin: 20px @std_offset_big;
+			}
+
+			.rftLineWithActions {
+				.noOffset;
+			}
+		}
+	}
+}
Index: Dev/trunk/client/qed/css/rftSelector.less
===================================================================
--- Dev/trunk/client/qed/css/rftSelector.less	(revision 425)
+++ Dev/trunk/client/qed/css/rftSelector.less	(revision 425)
@@ -0,0 +1,58 @@
+//Variables
+@indicatorWidth: 8px;
+@colorConflict: #ff0000;
+@colorPending: #ff8000;
+@colorSuccess: #00ff00;
+
+#rft {
+	&.claro {
+		
+		.rftSelector {
+			.noOffset;
+			margin: @std_offset;
+
+			.rftLineWithActions {
+				.noOffset;
+			}
+
+			.rftSelectorSelected {
+				// Operation indicator styling
+				.rftSelectorIndicator {
+					.noOffset;
+					float: left;
+					width: @indicatorWidth;
+					height: @std_height;
+					background-color: #bedead;
+
+					&.conflict {
+						background-color: @colorConflict;
+					}
+					&.pending {
+						background-color: @colorPending;
+					}
+					&.success {
+						background-color: @colorSuccess;
+					}
+				}
+			}
+			// Set dropdown background and text color to black on white
+			.rftSelectorOptions, .rftSelectorSelected {
+
+				.rftLineWithActions {
+					background-color: @text;
+					color: @darkest;
+				}
+			}
+
+			.rftSelectorOptions {
+				.rftLineWithActions {
+					.rftInlineButton {
+						.rftIcon {
+							.setIcon (16px, black);
+						}
+					}
+				}
+			}
+		}
+	}
+}
Index: Dev/trunk/client/qed/css/sessionEditor.less
===================================================================
--- Dev/trunk/client/qed/css/sessionEditor.less	(revision 425)
+++ Dev/trunk/client/qed/css/sessionEditor.less	(revision 425)
@@ -0,0 +1,53 @@
+#rft {
+	&.claro {
+
+		.rftSessionObject {
+			.noOffset;
+			width: @sessionobject_size;
+			height: @sessionobject_size;
+			background: @headers;
+			margin: @std_offset_big;
+			display: inline-block;
+
+
+			.rftIcon {
+				.setIcon (32px);
+				@iconOffsetX: ((@sessionobject_size - 32px)/2);
+				margin: @std_offset_big @iconOffsetX 0 @iconOffsetX;
+			}
+
+			label {
+				.noOffset;
+				float: left;
+				clear: both;
+				width: @sessionobject_size;
+				text-align: center;
+				color: @text;
+				overflow: hidden;
+			}
+
+
+
+
+			&.blue {
+				background-color: @blue;
+				&.selected {
+					background-color: @blue_light;
+				}
+			}
+			&.green {
+				background-color: @green;
+				&.selected {
+					background-color: @green_light;
+				}
+			}
+			&.red {
+				background-color: @red;
+				&.selected {
+					background-color: @red_light;
+				}
+			}
+			
+		}
+	}
+}
Index: Dev/trunk/client/qed/css/surveyEditor.less
===================================================================
--- Dev/trunk/client/qed/css/surveyEditor.less	(revision 425)
+++ Dev/trunk/client/qed/css/surveyEditor.less	(revision 425)
@@ -0,0 +1,16 @@
+#rft {
+	&.claro {
+
+		.rftSurveyListView {
+
+			.rftSurveyListViewContent {
+				min-height: 300px;
+				background: @base1;
+				overflow: auto;
+			}
+		}
+
+		
+
+	}
+}
Index: Dev/trunk/client/qed/css/tutorial.less
===================================================================
--- Dev/trunk/client/qed/css/tutorial.less	(revision 425)
+++ Dev/trunk/client/qed/css/tutorial.less	(revision 425)
@@ -0,0 +1,142 @@
+//Variables and operations
+@variable: value;
+@variable2; @variable + value;	// /*-+, etc...
+//Variables are a constant!
+
+//You can use variables in varnames - eval()??
+@varName: "This is the value";
+@var: "varName";
+property: @@var; // read this as: Paste @var into X for the expression 'property is variable X'
+//property = variable(variable(a));
+
+//Mixins
+.mixin {
+	border-top: 1px solid #fff;	//Compilation preserves, so can be used as actual class in HTML
+}
+.mixin () {
+	border-top: 1px solid #fff;	//Compilation does not preserve, only for LESS purposes.
+}
+.mixin (@color: #default) {
+	border-top: 1px solid @color;	//Arguments.
+}
+.mixin (@x: 0, @y: 0) {
+	margin: @arguments;	//Use this to get space-separated list of all arguments!
+}
+
+// The following two mixins use a switch argument, behaving like an if/else or switch(arg1){}.
+.mixin (black, @color) {
+	border-top: 1px solid #fff;
+	background-color: black;
+}
+.mixin (white, @color) {
+	border-top: 1px solid #fff;
+	background-color: white;
+}
+
+//Match on arity (argument count):
+.mixin (@a) {
+	content: "Only if one arg: @{a}";
+}
+.mixin (@a, @b) {
+	content: "When two args: @{a}, @{b}";
+}
+
+//GUARDS! When you want to match on expressions!
+.mixin (@a) when (lightness(@a) >= 50%) {
+	background-color: black;
+}
+
+.mixin (@a) when (isnumber(@a)), (isstring(@a)) {
+	//This matches when @a is a string OR number (comma separated guards)
+}
+.mixin (@a) when (iscolor(@a)) and (lightness(@a) < 50%) {
+	// This matches when @a is a color with lightness under 50% (AND separated guards)
+}
+.mixin (@a) when not (@a > 0) {
+	//derp. Not keyword werkt ook
+}
+
+/*Expressions:
+- iscolor
+- isnumber
+- isstring
+- iskeyword?
+- isurl
+
+isnumber specifiek:
+- ispixel
+- ispercentage
+- isem
+*/
+
+.parent {
+	.descendant {
+		//descendant selector, evaluates to .parent .descendant{}
+	}
+	&.concat {
+		//concatenate selector, evaluates to .parent.concat{}
+	}
+	&[dojo-type="Button"] {
+		// works as well, evaluates to .parent[dojo-type="Button"]{}
+	}
+	&:hover {
+		//sets hover property for .parent:hover !!
+	}
+}
+
+// Operations: Can be applied to all numbers, color and variables. //These can be nested as well!
+@base: 5%;
+@other: @base + #aaa; //apaarently, LESS understands and converts these units?
+@var123: 1px + 5; // Output will be in px as well, since you specified them.
+border: (@width * 2) solid black; // Use brackets in compound statements!
+
+// Color operations: all colours are first converted to HSL space
+lighten/darken	//lightness (%)
+saturate/desaturate	//saturation (%)
+fadein/fadeout/fade	//transparency. fade sets absolute alpha, the others are relative to @color passed in (%)
+spin //hue, degrees spun on colour wheel (unitless number)
+mix // mix two colours.
+
+hue/saturation/lightness/alpha //return these for @color passed as argument
+@new = hsl(hue(@old), 45%, 90%); // generate new colour
+
+//Math functions!
+round, ceil, floor	//do what you'd expect.
+percentage	//returns rational as percentage
+
+//NAMESPACES
+#nameSpace {
+	.button() {
+		//stuff
+	}
+}
+
+.header a {
+	#nameSpace > .button;	// Access namespace variables:) CANNOT DO THIS WITH VARIABLES!!!!
+}
+
+/* These will be added to compiled CSS */
+// These won't, and are for use in LESS sheet only
+
+@import "lib.less";
+@import "lib";	//assumed to be LESS file
+@import "file.css";	//normal css imports
+
+
+//String interpolation: Same as DOJO templates, with @ instead of $
+@base-url: "http://assets.fnord.com";
+background-image: url("@{base-url}/images/bg.png");
+
+//String escapes:
+~"stuffffff"; //Will be added to compiled CSS as-is. Useful for retarded MS-specific (invalid CSS) statements/hacks
+
+//Wait, WHUT
+//JAVASCRIPT EVALUATION?!?!?!?!
+
+@var: `"hello".toUpperCase() + '!'`; // Wrap stuff in backticks and it will eval before compilation! :D
+@str: "hello";
+@var: ~`"@{str}".toUpperCase() + '!'`;	//You can still use string interp for this! Why the ~ though?
+
+@height: `document.body.clientHeight`; //WTF. How does this even work if it is compiled serverside?
+@color: color(`window.colors.baseColor`);	//Use color() to parse JS colours as CSS colours
+@darkcolor: darken(@color, 10%);
Index: Dev/trunk/client/qed/css/variables.less
===================================================================
--- Dev/trunk/client/qed/css/variables.less	(revision 425)
+++ Dev/trunk/client/qed/css/variables.less	(revision 425)
@@ -0,0 +1,78 @@
+// Graytones
+@darkest: #111111;
+@base: #333333;
+@base1: #444444;
+@base2: #555555;
+@headers: #999999;
+@text: #ffffff;
+
+// Colours
+@blue: #0072bc;
+@blue_light: #0794d1;
+// @green: #3aa605;					For now use the newer colours. Almost negligible difference, but looks better on non-calibrated monitors
+// @green_light: #79ca0a;
+@green: #25a000;
+@green_light: #63c400;
+
+@orange: #ff5b12;
+@orange_light: #ff9140;
+@purple: #6529b7;
+@purple_light: #993dec;
+@red: #8c0310;
+@red_light: #bd0013;
+
+// Layout related
+@std_height: 24px;
+@std_offset: 4px;
+@std_offset_big: 8px;
+@transition_time: 0.2s;
+@tab_height: 30px;
+@tab_width: 200px;
+
+// Headers and fonts
+@h1Size: 48px;
+@h2Size: 22px;
+@h3Size: 18px;
+@h4Size: 16px;
+@font_size: 13px;
+@font: 'Segoe UI', Helvetica, Verdana, Arial, sans-serif;
+
+// Icons
+@icon_mainSize: 32px;
+@icon_midSize: 24px;
+@icon_smallSize: 16px;
+
+// IndexMenu
+@indexmenu_blockheight: 400px;
+@indexmenu_blockwidth: 400px;
+@indexmenu_blockmargin: 16px;
+@indexmenu_font_size: 32px;
+
+// Mainmenu
+@button_mainmenu_height: 30px;
+@button_mainmenu_spacing: 5px;
+@button_mainmenu_padding: 4px;
+@button_mainmenu_font_size: 24px;
+@button_mainmenu_font_grow: @button_mainmenu_font_size / 12;
+
+// Index menu
+@button_indexmenu_height: 32px;
+@button_indexmenu_content_size: 24px;
+@button_indexmenu_font_size: @h1Size;
+
+// SessionObject
+@sessionobject_size: 100px;
+@sessionObject_spacing: 2 * @std_offset_big;
+
+// Buttons
+@button_large_height: 24px;
+@button_large_spacing: @std_offset_big * 2;
+@button_large_font_size: @button_large_height / 1.2;
+
+@button_block_height: 24px;
+@button_block_spacing: 0;
+@button_block_font_size: @font_size;
+
+@button_inline_height: 24px;
+@button_inline_spacing: 0;
+@button_inline_font_size: @font_size;
