Index: /Dev/branches/rest-dojo-ui/client/rft/css/LESS/colors.less
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/colors.less	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/colors.less	(revision 403)
@@ -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) {
+			&.bgColorHover:hover {
+				background-color: @@color !important;
+				&.light {
+					@colorName: "@{color}_light";
+					background-color: @@colorName !important;
+				}
+			}
+			.bgColorHover:hover {
+				background-color: @@color;
+				&.light {
+					@colorName: "@{color}_light";
+					background-color: @@colorName;
+				}
+			}
+		}
+
+		.hoverTextColorMixin (@color) {
+			&.textColorHover:hover {
+				color: @@color !important;
+				&.light {
+					@colorName: "@{color}_light";
+					color: @@colorName !important;
+				}
+			}
+			.textColorHover: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/branches/rest-dojo-ui/client/rft/css/LESS/layout.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/layout.css	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/layout.css	(revision 403)
@@ -0,0 +1,9 @@
+*:focus {
+  outline: none;
+}
+html,
+body {
+  width: 100%;
+  height: 100%;
+  background-color: 5px;
+}
Index: /Dev/branches/rest-dojo-ui/client/rft/css/LESS/layout.less
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/layout.less	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/layout.less	(revision 403)
@@ -0,0 +1,270 @@
+*: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;
+
+		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;
+
+			&.dijitTabHover {
+				.transition (0.1s);
+				color: @text;
+				border-color: @text;
+			}
+
+			&.dijitTabActive {
+				.transition (0.1s);
+				color: @headers;
+			}
+
+			&.dijitTabChecked {
+				.transition (0.1s);
+				color: @text;
+				border: 1px solid transparent;
+			}
+		}
+
+		.dijitTabContainerLeft-tabs {
+			border: none;
+			padding: @std_offset;
+
+			.dijitTab {
+				margin: @std_offset 0;
+				width: 200px;
+				min-height: @tab_height;
+				border: 1px solid @headers;
+
+				.dijitTabContent {
+					min-height: @tab_height;
+					line-height: @tab_height;
+					width: 190px;
+				}
+			}
+		}
+		//Tab colour settings
+		&.blue .dijitTabChecked,
+		.blue .dijitTabChecked,
+		div.blue.dijitTabChecked {
+			background-color: @blue;
+		}
+		&.green .dijitTabChecked,
+		.green .dijitTabChecked,
+		div.green.dijitTabChecked {
+			background-color: @green;
+		}
+		&.red .dijitTabChecked,
+		.red .dijitTabChecked,
+		div.red.dijitTabChecked {
+			background-color: @red;
+		}
+		&.orange .dijitTabChecked,
+		.orange .dijitTabChecked,
+		div.orange.dijitTabChecked {
+			background-color: @orange;
+		}
+		&.purple .dijitTabChecked,
+		.purple .dijitTabChecked,
+		div.purple.dijitTabChecked {
+			background-color: @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/branches/rest-dojo-ui/client/rft/css/LESS/main.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/main.css	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/main.css	(revision 403)
@@ -0,0 +1,1067 @@
+*:focus {
+  outline: none;
+}
+html,
+body {
+  width: 100%;
+  height: 100%;
+  background-color: #333333;
+}
+#rft.claro {
+  font-family: 'Segoe UI', Helvetica, Verdana, Arial, sans-serif;
+  font-size: 13px;
+  color: #111111;
+}
+#rft.claro h1 {
+  margin: 0;
+  padding: 0 10px 8px 10px;
+  float: left;
+  clear: left;
+  font-size: 48px;
+  color: #999999;
+  line-height: 48px;
+  font-weight: normal;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+#rft.claro h2 {
+  margin: 0;
+  padding: 0;
+  color: #999999;
+  font-size: 22px;
+  line-height: 30px;
+}
+#rft.claro h2 .rftIcon {
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  background-image: url('images/icons/rftIcons24.png');
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  background-image: url('images/icons/rftIcons32.png');
+  margin-right: 8px;
+}
+#rft.claro h3 {
+  margin: 0;
+  font-size: 18px;
+  margin-bottom: 4px;
+}
+#rft.claro h4 {
+  font-size: 16px;
+}
+#rft.claro .topbar {
+  overflow-y: hidden;
+}
+#rft.claro .topbar .dijitMenuBar {
+  border: none;
+  background-image: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 0;
+  background-color: transparent;
+  float: right;
+  clear: right;
+  margin-top: 16px;
+}
+#rft.claro .topbar .breadcrumbs {
+  color: #999999;
+}
+#rft.claro .topbar .breadcrumbs .breadcrumb {
+  font-size: 13px;
+}
+#rft.claro .topbar .breadcrumbs .breadcrumb.breadcrumbCurrent {
+  color: #ffffff;
+  font-size: 15px;
+}
+#rft.claro .topbar .breadcrumbs .breadcrumb.breadcrumbHover {
+  color: #0072bc;
+}
+#rft.claro .dijitContentPane.page {
+  margin: 0;
+  padding: 0;
+}
+#rft.claro .dijitContentPane.content {
+  margin: 0;
+  padding: 0;
+  display: block;
+  clear: both;
+  background-color: #555555;
+  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%);
+}
+#rft.claro .dijitContentPane.content .dijitBorderContainer {
+  padding: 4px;
+}
+#rft.claro .loginLabel {
+  float: left;
+  clear: left;
+  width: 100px;
+}
+#rft.claro .loginInput {
+  width: 150px;
+}
+#rft.claro .rftMultipleChoiceWidget {
+  display: table;
+}
+#rft.claro .rftMultipleChoiceWidget .row {
+  display: table-row;
+}
+#rft.claro .rftMultipleChoiceWidget .rowBox {
+  display: table-cell;
+}
+#rft.claro .rftMultipleChoiceWidget .rowText {
+  display: table-cell;
+  width: 100px;
+}
+#rft.claro .rftMultipleChoiceWidget .rowBtn {
+  display: table-cell;
+  width: 30px;
+}
+#rft.claro .verticalTabList {
+  width: 190px;
+}
+#rft.claro .dijitTab {
+  -webkit-transition: all 0.2s;
+  -moz-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  -ms-transition: all 0.2s;
+  transition: all 0.2s;
+  background-color: transparent;
+  padding: 4px 8px;
+  color: #999999;
+  overflow: hidden;
+}
+#rft.claro .dijitTab.dijitTabHover {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  color: #ffffff;
+  border-color: #ffffff;
+}
+#rft.claro .dijitTab.dijitTabActive {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  color: #999999;
+}
+#rft.claro .dijitTab.dijitTabChecked {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  color: #ffffff;
+  border: 1px solid transparent;
+}
+#rft.claro .dijitTabContainerLeft-tabs {
+  border: none;
+  padding: 4px;
+}
+#rft.claro .dijitTabContainerLeft-tabs .dijitTab {
+  margin: 4px 0;
+  width: 200px;
+  min-height: 30px;
+  border: 1px solid #999999;
+}
+#rft.claro .dijitTabContainerLeft-tabs .dijitTab .dijitTabContent {
+  min-height: 30px;
+  line-height: 30px;
+  width: 190px;
+}
+#rft.claro.blue .dijitTabChecked,
+#rft.claro .blue .dijitTabChecked,
+#rft.claro div.blue.dijitTabChecked {
+  background-color: #0072bc;
+}
+#rft.claro.green .dijitTabChecked,
+#rft.claro .green .dijitTabChecked,
+#rft.claro div.green.dijitTabChecked {
+  background-color: #3aa605;
+}
+#rft.claro.red .dijitTabChecked,
+#rft.claro .red .dijitTabChecked,
+#rft.claro div.red.dijitTabChecked {
+  background-color: #8c0310;
+}
+#rft.claro.orange .dijitTabChecked,
+#rft.claro .orange .dijitTabChecked,
+#rft.claro div.orange.dijitTabChecked {
+  background-color: #ff5b12;
+}
+#rft.claro.purple .dijitTabChecked,
+#rft.claro .purple .dijitTabChecked,
+#rft.claro div.purple.dijitTabChecked {
+  background-color: #6529b7;
+}
+#rft.claro fieldset {
+  border: none;
+}
+#rft.claro fieldset.align input,
+#rft.claro fieldset.align .dijitTextBox,
+#rft.claro fieldset.align textarea {
+  margin-left: 0;
+}
+#rft.claro fieldset.align label {
+  color: #ffffff;
+  display: inline-block;
+  width: 100px !important;
+}
+#rft.claro .newline {
+  float: left;
+  clear: left;
+  display: block;
+}
+#rft.claro .floatRight {
+  float: right;
+  margin: 0;
+}
+#rft.claro .rftLineListView {
+  max-width: 200px;
+  max-height: 500px;
+}
+#rft.claro .rftLineListView .rftLineListViewContent {
+  width: auto;
+  overflow: auto;
+}
+#rft.claro .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;
+}
+#rft.claro .blue.bgColor,
+#rft.claro.blue.bgColor {
+  background-color: #0072bc !important;
+}
+#rft.claro .blue.bgColor.light,
+#rft.claro.blue.bgColor.light {
+  background-color: #0794d1 !important;
+}
+#rft.claro .blue .bgColor,
+#rft.claro.blue .bgColor {
+  background-color: #0072bc;
+}
+#rft.claro .blue .bgColor.light,
+#rft.claro.blue .bgColor.light {
+  background-color: #0794d1;
+}
+#rft.claro .blue.bgColorHover:hover,
+#rft.claro.blue.bgColorHover:hover {
+  background-color: #0072bc !important;
+}
+#rft.claro .blue.bgColorHover:hover.light,
+#rft.claro.blue.bgColorHover:hover.light {
+  background-color: #0794d1 !important;
+}
+#rft.claro .blue .bgColorHover:hover,
+#rft.claro.blue .bgColorHover:hover {
+  background-color: #0072bc;
+}
+#rft.claro .blue .bgColorHover:hover.light,
+#rft.claro.blue .bgColorHover:hover.light {
+  background-color: #0794d1;
+}
+#rft.claro .green.bgColor,
+#rft.claro.green.bgColor {
+  background-color: #3aa605 !important;
+}
+#rft.claro .green.bgColor.light,
+#rft.claro.green.bgColor.light {
+  background-color: #79ca0a !important;
+}
+#rft.claro .green .bgColor,
+#rft.claro.green .bgColor {
+  background-color: #3aa605;
+}
+#rft.claro .green .bgColor.light,
+#rft.claro.green .bgColor.light {
+  background-color: #79ca0a;
+}
+#rft.claro .green.bgColorHover:hover,
+#rft.claro.green.bgColorHover:hover {
+  background-color: #3aa605 !important;
+}
+#rft.claro .green.bgColorHover:hover.light,
+#rft.claro.green.bgColorHover:hover.light {
+  background-color: #79ca0a !important;
+}
+#rft.claro .green .bgColorHover:hover,
+#rft.claro.green .bgColorHover:hover {
+  background-color: #3aa605;
+}
+#rft.claro .green .bgColorHover:hover.light,
+#rft.claro.green .bgColorHover:hover.light {
+  background-color: #79ca0a;
+}
+#rft.claro .orange.bgColor,
+#rft.claro.orange.bgColor {
+  background-color: #ff5b12 !important;
+}
+#rft.claro .orange.bgColor.light,
+#rft.claro.orange.bgColor.light {
+  background-color: #ff9140 !important;
+}
+#rft.claro .orange .bgColor,
+#rft.claro.orange .bgColor {
+  background-color: #ff5b12;
+}
+#rft.claro .orange .bgColor.light,
+#rft.claro.orange .bgColor.light {
+  background-color: #ff9140;
+}
+#rft.claro .orange.bgColorHover:hover,
+#rft.claro.orange.bgColorHover:hover {
+  background-color: #ff5b12 !important;
+}
+#rft.claro .orange.bgColorHover:hover.light,
+#rft.claro.orange.bgColorHover:hover.light {
+  background-color: #ff9140 !important;
+}
+#rft.claro .orange .bgColorHover:hover,
+#rft.claro.orange .bgColorHover:hover {
+  background-color: #ff5b12;
+}
+#rft.claro .orange .bgColorHover:hover.light,
+#rft.claro.orange .bgColorHover:hover.light {
+  background-color: #ff9140;
+}
+#rft.claro .red.bgColor,
+#rft.claro.red.bgColor {
+  background-color: #8c0310 !important;
+}
+#rft.claro .red.bgColor.light,
+#rft.claro.red.bgColor.light {
+  background-color: #bd0013 !important;
+}
+#rft.claro .red .bgColor,
+#rft.claro.red .bgColor {
+  background-color: #8c0310;
+}
+#rft.claro .red .bgColor.light,
+#rft.claro.red .bgColor.light {
+  background-color: #bd0013;
+}
+#rft.claro .red.bgColorHover:hover,
+#rft.claro.red.bgColorHover:hover {
+  background-color: #8c0310 !important;
+}
+#rft.claro .red.bgColorHover:hover.light,
+#rft.claro.red.bgColorHover:hover.light {
+  background-color: #bd0013 !important;
+}
+#rft.claro .red .bgColorHover:hover,
+#rft.claro.red .bgColorHover:hover {
+  background-color: #8c0310;
+}
+#rft.claro .red .bgColorHover:hover.light,
+#rft.claro.red .bgColorHover:hover.light {
+  background-color: #bd0013;
+}
+#rft.claro .purple.bgColor,
+#rft.claro.purple.bgColor {
+  background-color: #6529b7 !important;
+}
+#rft.claro .purple.bgColor.light,
+#rft.claro.purple.bgColor.light {
+  background-color: #993dec !important;
+}
+#rft.claro .purple .bgColor,
+#rft.claro.purple .bgColor {
+  background-color: #6529b7;
+}
+#rft.claro .purple .bgColor.light,
+#rft.claro.purple .bgColor.light {
+  background-color: #993dec;
+}
+#rft.claro .purple.bgColorHover:hover,
+#rft.claro.purple.bgColorHover:hover {
+  background-color: #6529b7 !important;
+}
+#rft.claro .purple.bgColorHover:hover.light,
+#rft.claro.purple.bgColorHover:hover.light {
+  background-color: #993dec !important;
+}
+#rft.claro .purple .bgColorHover:hover,
+#rft.claro.purple .bgColorHover:hover {
+  background-color: #6529b7;
+}
+#rft.claro .purple .bgColorHover:hover.light,
+#rft.claro.purple .bgColorHover:hover.light {
+  background-color: #993dec;
+}
+#rft.claro .rftIcon {
+  margin: 0;
+  padding: 0;
+  float: left;
+  display: inline-block;
+  border: none;
+  background-color: transparent;
+  background-repeat: no-repeat;
+}
+#rft.claro .rftIcon.rftMainIcon {
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  background-image: url('images/icons/rftIcons24.png');
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  background-image: url('images/icons/rftIcons32.png');
+}
+#rft.claro .rftIcon.rftMidIcon {
+  width: 24px;
+  height: 24px;
+  margin: 0px 0;
+  background-image: url('images/icons/rftIcons16.png');
+}
+#rft.claro .rftIcon.rftSmallIcon {
+  width: 16px;
+  height: 16px;
+  margin: 4px 0;
+  background-image: url('images/icons/rftIcons16.png');
+}
+#rft .rftIconApplication {
+  background-position: 0px 0px;
+}
+#rft .rftIconDashboard {
+  background-position: -32px 0px;
+}
+#rft .rftIconSession {
+  background-position: -64px 0px;
+}
+#rft .rftIconSessionActive {
+  background-position: -96px 0px;
+}
+#rft .rftIconSessionTemplate {
+  background-position: -128px 0px;
+}
+#rft .rftIconSurvey {
+  background-position: -160px 0px;
+}
+#rft .rftIconQuestion {
+  background-position: -192px 0px;
+}
+#rft .rftIconQuestionFill {
+  background-position: -224px 0px;
+}
+#rft .rftIconRespondent {
+  background-position: -256px 0px;
+}
+#rft .rftIconAnswer {
+  background-position: -288px 0px;
+}
+#rft .rftIconAnswerSet {
+  background-position: -320px 0px;
+}
+#rft .rftIconGameData {
+  background-position: -352px 0px;
+}
+#rft .rftIconUser {
+  background-position: -384px 0px;
+}
+#rft .rftIconAccept {
+  background-position: -416px 0px;
+}
+#rft .rftIconCancel {
+  background-position: -448px 0px;
+}
+#rft .rftIconPlus {
+  background-position: -480px 0px;
+}
+#rft .rftIconMinus {
+  background-position: -512px 0px;
+}
+#rft .rftIconIncrease {
+  background-position: -544px 0px;
+}
+#rft .rftIconDecrease {
+  background-position: -576px 0px;
+}
+#rft .rftIconDelete {
+  background-position: -608px 0px;
+}
+#rft .rftIconHome {
+  background-position: -640px 0px;
+}
+#rft .rftIconPreview {
+  background-position: -672px 0px;
+}
+#rft .rftIconSave {
+  background-position: -704px 0px;
+}
+#rft .rftIconDiscard {
+  background-position: -736px 0px;
+}
+#rft .rftIconProperties {
+  background-position: -768px 0px;
+}
+#rft .rftIconUndo {
+  background-position: -800px 0px;
+}
+#rft .rftIconRedo {
+  background-position: -832px 0px;
+}
+#rft .rftIconBack {
+  background-position: -864px 0px;
+}
+#rft .rftIconForward {
+  background-position: -896px 0px;
+}
+#rft .rftIconRefresh {
+  background-position: -928px 0px;
+}
+#rft .rftIconHelp {
+  background-position: -960px 0px;
+}
+#rft .rftIconInspect {
+  background-position: -992px 0px;
+}
+#rft .rftIconTag {
+  background-position: -1024px 0px;
+}
+#rft .rftIconImage {
+  background-position: -1056px 0px;
+}
+#rft .rftIconEdit {
+  background-position: -1088px 0px;
+}
+#rft .rftIconLock {
+  background-position: -1120px 0px;
+}
+#rft .rftIconUnlock {
+  background-position: -1152px 0px;
+}
+#rft .rftIconPreset {
+  background-position: -1184px 0px;
+}
+#rft .rftIconTextBlock {
+  background-position: -1216px 0px;
+}
+#rft .rftIconPageBreak {
+  background-position: -1248px 0px;
+}
+#rft .rftIconExternal {
+  background-position: -1280px 0px;
+}
+#rft .rftIconInput {
+  background-position: -1312px 0px;
+}
+#rft .rftIconPublish {
+  background-position: -1344px 0px;
+}
+#rft .rftIconFullArrowUp {
+  background-position: -1696px 0px;
+}
+#rft .rftIconFullArrowDown {
+  background-position: -1728px 0px;
+}
+#rft .rftIconFullArrowLeft {
+  background-position: -1760px 0px;
+}
+#rft .rftIconFullArrowRight {
+  background-position: -1792px 0px;
+}
+#rft .rftIconHalfArrowUp {
+  background-position: -1824px 0px;
+}
+#rft .rftIconHalfArrowDown {
+  background-position: -1856px 0px;
+}
+#rft .rftIconHalfArrowLeft {
+  background-position: -1888px 0px;
+}
+#rft .rftIconHalfArrowRight {
+  background-position: -1920px 0px;
+}
+#rft .claro .rftSelector {
+  margin: 0;
+  padding: 0;
+  margin: 4px;
+}
+#rft .claro .rftSelector .rftLineWithButtons {
+  margin: 0;
+  padding: 0;
+}
+#rft .claro .rftSelector .rftSelectorSelected .rftSelectorColor {
+  margin: 0;
+  padding: 0;
+  float: left;
+  width: 8px;
+  height: 24px;
+}
+#rft .claro .rftSelector .rftSelectorSelected .rftSelectorColor.conflict {
+  background-color: #ff0000;
+}
+#rft .claro .rftSelector .rftSelectorSelected .rftSelectorColor.pending {
+  background-color: #ff8000;
+}
+#rft .claro .rftSelector .rftSelectorSelected .rftSelectorColor.success {
+  background-color: #00ff00;
+}
+#rft .claro .rftSelector .rftSelectorOptions .rftLineWithButtons,
+#rft .claro .rftSelector .rftSelectorSelected .rftLineWithButtons {
+  background-color: #ffffff;
+  color: #111111;
+}
+#rft.claro .rftLineWithButtons {
+  border: none;
+  background-image: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 0;
+  position: relative;
+  height: 24px;
+  white-space: nowrap;
+  margin: 4px 0;
+}
+#rft.claro .rftLineWithButtons.dojoDndItem {
+  -webkit-transition: all 0.2s;
+  -moz-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  -ms-transition: all 0.2s;
+  transition: all 0.2s;
+}
+#rft.claro .rftLineWithButtons.dojoDndItem.dojoDndItemBefore {
+  margin-top: 6px;
+  border-top: 6px solid #ffffff;
+}
+#rft.claro .rftLineWithButtons.dojoDndItem.dojoDndItemAfter {
+  margin-bottom: 6px;
+  border-bottom: 6px solid #ffffff;
+}
+#rft.claro .rftLineWithButtons.dojoDndItem.dojoDndItemover,
+#rft.claro .rftLineWithButtons.dojoDndItem.dojoDndItemAnchor {
+  background-image: none;
+  border: none;
+  padding: 2px;
+}
+#rft.claro .rftLineWithButtons.dojoDndItem.dojoDndItemover *,
+#rft.claro .rftLineWithButtons.dojoDndItem.dojoDndItemAnchor * {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+#rft.claro .rftLineWithButtons .rftLineWithButtonsTitle {
+  float: left;
+  margin: 0 8px;
+  overflow: hidden;
+  white-space: nowrap;
+  word-wrap: break-word;
+}
+#rft.claro .rftLineWithButtons .rftLineWithButtonsButtons {
+  margin: 0;
+  padding: 0;
+  line-height: 24px;
+  height: 24px;
+  position: absolute;
+  right: 0;
+  float: left;
+}
+#rft.claro .dojoDndSourceMoved .rftLineWithButtons.dojoDndItemAnchor {
+  height: 0;
+}
+#rft.claro .rftIndexMenuBlock {
+  width: 400px;
+  height: 400px;
+  background: #444444;
+  float: left;
+  margin: 16px;
+  overflow: hidden;
+}
+#rft.claro .rftIndexMenuBlock:hover .rftIndexMenuMask {
+  margin-top: -400px;
+}
+#rft.claro .rftIndexMenuMask {
+  width: 400px;
+  height: 400px;
+  background: #444444;
+  color: #999999;
+  margin-top: 0;
+}
+#rft.claro .rftIndexMenuMask .label {
+  color: #999999;
+  font-size: 32px;
+  height: 32px;
+  line-height: 32px;
+  margin-top: 184px;
+  float: left;
+}
+#rft.claro .rftIndexMenuMask .rftIcon {
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  background-image: url('images/icons/rftIcons24.png');
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  background-image: url('images/icons/rftIcons32.png');
+  float: left;
+  margin: 184px 8px 0 8px;
+}
+#rft.claro .dijitMenuPopup .dijitMenu {
+  border: none;
+  background-image: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 0;
+  color: #999999;
+  border: none;
+}
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem {
+  color: #999999;
+  border: none;
+  background-image: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 0;
+  background-color: transparent;
+}
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover .dijitMenuItemLabel,
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive .dijitMenuItemLabel,
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemSelected .dijitMenuItemLabel {
+  color: #ffffff;
+}
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem .rftIcon {
+  width: 16px;
+  height: 16px;
+  margin: 4px 0;
+  background-image: url('images/icons/rftIcons16.png');
+  margin: 0;
+  margin-right: 8px;
+}
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive .rftIcon {
+  width: 16px;
+  height: 16px;
+  margin: 4px 0;
+  background-image: url('images/icons/rftIcons16b.png');
+}
+#rft.claro .dijitMenuBar .rftMainMenuButton {
+  border: none;
+  background-image: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 0;
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  border: none;
+  height: 30px;
+  width: auto;
+  background: transparent;
+  color: #999999;
+  text-align: center;
+  font-size: 24px;
+  line-height: 30px;
+  padding: 0 4px;
+  margin: 0 5px;
+}
+#rft.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemHover,
+#rft.claro .dijitMenuBar .rftMainMenuButton.dijitMenuitemActive {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+}
+#rft.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemHover {
+  color: #ffffff;
+  font-size: 26px;
+}
+#rft.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemActive {
+  color: #0072bc;
+  font-size: 26px;
+}
+#rft.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemSelected {
+  font-size: 26px;
+  color: #ffffff;
+}
+#rft.claro .dojoxTitleGroup .dijitTitlePane {
+  margin: 0;
+}
+#rft.claro .dojoxTitleGroup .dijitTitlePane .dijitTitlePaneTitle {
+  border: none;
+  background-image: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 0;
+  margin: 0;
+  background-color: #ff5b12;
+  border: none;
+  padding: 0 4px;
+  height: 24px;
+}
+#rft.claro .dojoxTitleGroup .dijitTitlePane .dijitTitlePaneTitle.dijitTitlePaneTitleHover,
+#rft.claro .dojoxTitleGroup .dijitTitlePane .dijitTitlePaneTitle.dijitTitlePaneTitleFocused {
+  background-color: #ff9140;
+}
+#rft.claro .dojoxTitleGroup .dijitTitlePane .dijitTitlePaneTextNode {
+  color: #ffffff;
+  font-size: 13px;
+  line-height: 24px;
+}
+#rft.claro .dojoxTitleGroup .dijitTitlePane .dijitTitlePaneContentOuter {
+  background-color: #444444;
+  border: none;
+}
+#rft.claro .dojoxTitleGroup .dijitTitlePane .dijitTitlePaneTitleFocus {
+  margin: 0;
+}
+#rft.claro .rftLargeButton {
+  border: none;
+  background-image: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 0;
+  margin-right: 16px;
+  height: 24px;
+}
+#rft.claro .rftLargeButton*,
+#rft.claro .rftLargeButton * {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+#rft.claro .rftLargeButton .dijitButtonNode {
+  border: none;
+  background-image: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 0;
+  border: none;
+  height: 24px;
+  background: transparent;
+  color: #999999;
+  font-size: 20px;
+  -webkit-transition: all 0.3s;
+  -moz-transition: all 0.3s;
+  -o-transition: all 0.3s;
+  -ms-transition: all 0.3s;
+  transition: all 0.3s;
+}
+#rft.claro .rftLargeButton .dijitButtonNode .rftIcon {
+  width: 24px;
+  height: 24px;
+  margin: 0px 0;
+  background-image: url('images/icons/rftIcons16.png');
+}
+#rft.claro .rftLargeButton .dijitButtonNode .dijitButtonText {
+  line-height: 24px;
+  margin: 0;
+  padding-left: 8px;
+}
+#rft.claro .rftLargeButton.black .dijitButtonNode .rftIcon {
+  width: 24px;
+  height: 24px;
+  margin: 0px 0;
+  background-image: url('images/icons/rftIcons16b.png');
+}
+#rft.claro .rftLargeButton.rftLargeButtonHover .dijitButtonNode,
+#rft.claro .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+}
+#rft.claro span.blue.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+#rft.claro .blue .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+  color: #0794d1;
+}
+#rft.claro span.orange.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+#rft.claro .orange .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+  color: #ff9140;
+}
+#rft.claro span.green.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+#rft.claro .green .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+  color: #79ca0a;
+}
+#rft.claro span.red.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+#rft.claro .red .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+  color: #bd0013;
+}
+#rft.claro span.purple.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+#rft.claro .purple .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+  color: #993dec;
+}
+#rft.claro .rftBlockButton {
+  border: none;
+  background-image: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 0;
+  margin: 0;
+  height: 24px;
+  line-height: 24px;
+}
+#rft.claro .rftBlockButton .dijitButtonNode {
+  border: none;
+  background-image: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 0;
+  -webkit-transition: all 0.3s;
+  -moz-transition: all 0.3s;
+  -o-transition: all 0.3s;
+  -ms-transition: all 0.3s;
+  transition: all 0.3s;
+  height: 24px;
+  padding: 0 4px;
+  border: none;
+  color: #ffffff;
+  font-size: 13px;
+}
+#rft.claro .rftBlockButton .dijitButtonNode .rftIcon {
+  width: 24px;
+  height: 24px;
+  margin: 0px 0;
+  background-image: url('images/icons/rftIcons16.png');
+}
+#rft.claro .rftBlockButton.rftBlockButtonHover,
+#rft.claro .rftBlockButton.rftBlockButtonActive {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+}
+#rft.claro .rftBlockButton.rftBlockButtonHover .rftIcon,
+#rft.claro .rftBlockButton.rftBlockButtonActive .rftIcon {
+  width: 24px;
+  height: 24px;
+  margin: 0px 0;
+  background-image: url('images/icons/rftIcons16b.png');
+}
+#rft.claro .blue.rftBlockButtonHover .dijitButtonNode {
+  background-color: #0072bc;
+}
+#rft.claro .blue.rftBlockButtonHover.light .dijitButtonNode {
+  background-color: #0794d1;
+}
+#rft.claro .blue .rftBlockButtonHover .dijitButtonNode {
+  background-color: #0072bc;
+}
+#rft.claro .blue .rftBlockButtonHover.light .dijitButtonNode {
+  background-color: #0794d1;
+}
+#rft.claro .blue.light .rftBlockButtonHover .dijitButtonNode {
+  background-color: #0794d1;
+}
+#rft.claro .green.rftBlockButtonHover .dijitButtonNode {
+  background-color: #3aa605;
+}
+#rft.claro .green.rftBlockButtonHover.light .dijitButtonNode {
+  background-color: #79ca0a;
+}
+#rft.claro .green .rftBlockButtonHover .dijitButtonNode {
+  background-color: #3aa605;
+}
+#rft.claro .green .rftBlockButtonHover.light .dijitButtonNode {
+  background-color: #79ca0a;
+}
+#rft.claro .green.light .rftBlockButtonHover .dijitButtonNode {
+  background-color: #79ca0a;
+}
+#rft.claro .orange.rftBlockButtonHover .dijitButtonNode {
+  background-color: #ff5b12;
+}
+#rft.claro .orange.rftBlockButtonHover.light .dijitButtonNode {
+  background-color: #ff9140;
+}
+#rft.claro .orange .rftBlockButtonHover .dijitButtonNode {
+  background-color: #ff5b12;
+}
+#rft.claro .orange .rftBlockButtonHover.light .dijitButtonNode {
+  background-color: #ff9140;
+}
+#rft.claro .orange.light .rftBlockButtonHover .dijitButtonNode {
+  background-color: #ff9140;
+}
+#rft.claro .red.rftBlockButtonHover .dijitButtonNode {
+  background-color: #8c0310;
+}
+#rft.claro .red.rftBlockButtonHover.light .dijitButtonNode {
+  background-color: #bd0013;
+}
+#rft.claro .red .rftBlockButtonHover .dijitButtonNode {
+  background-color: #8c0310;
+}
+#rft.claro .red .rftBlockButtonHover.light .dijitButtonNode {
+  background-color: #bd0013;
+}
+#rft.claro .red.light .rftBlockButtonHover .dijitButtonNode {
+  background-color: #bd0013;
+}
+#rft.claro .purple.rftBlockButtonHover .dijitButtonNode {
+  background-color: #6529b7;
+}
+#rft.claro .purple.rftBlockButtonHover.light .dijitButtonNode {
+  background-color: #993dec;
+}
+#rft.claro .purple .rftBlockButtonHover .dijitButtonNode {
+  background-color: #6529b7;
+}
+#rft.claro .purple .rftBlockButtonHover.light .dijitButtonNode {
+  background-color: #993dec;
+}
+#rft.claro .purple.light .rftBlockButtonHover .dijitButtonNode {
+  background-color: #993dec;
+}
+#rft.claro .rftInlineButton {
+  float: right;
+  height: 24px;
+  width: 24px;
+}
+#rft.claro .rftInlineButton .dijitButtonNode {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background-image: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 0;
+  width: 24px;
+  height: 24px;
+  border: none;
+}
+#rft.claro .rftInlineButton .rftIcon {
+  width: 16px;
+  height: 16px;
+  margin: 4px 0;
+  background-image: url('images/icons/rftIcons16.png');
+}
+#rft.claro .rftInlineButton.white .rftIcon {
+  width: 16px;
+  height: 16px;
+  margin: 4px 0;
+  background-image: url('images/icons/rftIcons16.png');
+}
+#rft.claro .rftInlineButton.black .rftIcon {
+  width: 16px;
+  height: 16px;
+  margin: 4px 0;
+  background-image: url('images/icons/rftIcons16b.png');
+}
+#rft.claro .rftInlineButton.rftInlineButtonHover.white {
+  width: 16px;
+  height: 16px;
+  margin: 4px 0;
+  background-image: url('images/icons/rftIcons16b.png');
+}
+#rft.claro .rftInlineButton.rftInlineButtonHover.black {
+  width: 16px;
+  height: 16px;
+  margin: 4px 0;
+  background-image: url('images/icons/rftIcons16b.png');
+}
Index: /Dev/branches/rest-dojo-ui/client/rft/css/LESS/main.less
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/main.less	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/main.less	(revision 403)
@@ -0,0 +1,10 @@
+@import "variables.less";
+@import "mixins.less";
+@import "layout.less";
+@import "colors.less";
+@import "rftIcons.less";
+@import "rftSelector.less";
+@import "rftLineWithActions.less";
+@import "menus.less";
+@import "questionEditor.less";
+@import "rftButtons.less";
Index: /Dev/branches/rest-dojo-ui/client/rft/css/LESS/menus.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/menus.css	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/menus.css	(revision 403)
@@ -0,0 +1,2 @@
+
+/* This beautiful CSS-File has been crafted with LESS (lesscss.org) and compiled by simpLESS (wearekiss.com/simpless) */
Index: /Dev/branches/rest-dojo-ui/client/rft/css/LESS/menus.less
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/menus.less	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/menus.less	(revision 403)
@@ -0,0 +1,110 @@
+#rft {
+	&.claro {
+		//Index menu
+		.rftIndexMenuBlock {
+			width: @mm_blockwidth;
+			height: @mm_blockheight;
+			background: @base1;
+			float: left;
+			margin: @mm_blockmargin;
+			overflow: hidden;
+
+			&:hover .rftIndexMenuMask {
+				margin-top: -@mm_blockheight;
+			}
+		}
+		.rftIndexMenuMask {
+			width: @mm_blockwidth;
+			height: @mm_blockheight;
+			background: @base1;
+			color: @headers;
+			margin-top: 0;
+
+			.label {
+				color: @headers;
+				font-size: @mm_font_size;
+				height: @mm_font_size;
+				line-height: @mm_font_size;
+				margin-top: (@mm_blockheight - @mm_font_size) / 2;
+				float: left;
+			}
+
+			.rftIcon {
+				.setIcon(32px);
+				float: left;
+				margin: ((@mm_blockheight - @mm_font_size)/2) 8px 0 8px;
+			}
+		}
+
+		//Topbar dropdown menu
+		.dijitMenuPopup {
+			.dijitMenu {
+				
+				.flatShading;
+				color: @headers;
+				border: none;
+
+				.dijitMenuItem {
+					color: @headers;
+					.flatShading;
+					background-color: transparent;
+
+					&.dijitMenuItemHover,
+					&.dijitMenuItemActive,
+					&.dijitMenuItemSelected {
+						.dijitMenuItemLabel {
+							color: @text;
+						}
+					}
+
+					.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/branches/rest-dojo-ui/client/rft/css/LESS/mixins.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/mixins.css	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/mixins.css	(revision 403)
@@ -0,0 +1,2 @@
+
+/* This beautiful CSS-File has been crafted with LESS (lesscss.org) and compiled by simpLESS (wearekiss.com/simpless) */
Index: /Dev/branches/rest-dojo-ui/client/rft/css/LESS/mixins.less
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/mixins.less	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/mixins.less	(revision 403)
@@ -0,0 +1,69 @@
+//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;
+}
+
+.noPadding () {
+	padding: 0;
+}
+//------------------------------------------
+//ICONS
+
+.setIconSize (@size, @b) when (@size =< 24px) {
+	width: @size;
+	height: @size;
+	margin: ((24px - @size) / 2) 0;
+	background-image: url('images/icons/rftIcons16@{b}.png');
+}
+
+.setIconSize (@size, @b) when (@size > 24px) {
+	width: @size;
+	height: @size;
+	margin: 0;
+	background-image: url('images/icons/rftIcons24@{b}.png');
+}
+
+.setIconSize (@size, @b) when (@size >= 32px) {
+	width: @size;
+	height: @size;
+	margin: 0;
+	background-image: url('images/icons/rftIcons32@{b}.png');
+}
+
+.setIcon (@size, black) {
+	.setIconSize(@size, "b");
+}
+.setIcon (@size, white) {
+	.setIconSize(@size, "");
+}
+.setIcon (@size) {
+	.setIconSize(@size, "");
+}
+//------------------------------------------
Index: /Dev/branches/rest-dojo-ui/client/rft/css/LESS/questionEditor.less
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/questionEditor.less	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/questionEditor.less	(revision 403)
@@ -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/branches/rest-dojo-ui/client/rft/css/LESS/rftButtons.less
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftButtons.less	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftButtons.less	(revision 403)
@@ -0,0 +1,190 @@
+#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
+		span.blue.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+		.blue .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+			color: #0794d1;
+		}
+		span.orange.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+		.orange .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+			color: #ff9140;
+		}
+		span.green.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+		.green .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+			color: #79ca0a;
+		}
+		span.red.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+		.red .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+			color: #bd0013;
+		}
+		span.purple.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
+		.purple .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
+			color: #993dec;
+		}
+
+		//BLOCKBUTTON---------------------------------
+		.rftBlockButton {
+			
+			.flatShading;
+			.noMargin;
+			height: @button_block_height;
+			line-height: @button_block_height;
+
+			.dijitButtonNode {
+				.flatShading;
+				.transition (0.3s);
+				height: @button_block_height;
+				padding: 0 @std_offset;
+				border: none;
+				color: @text;
+				font-size: @button_block_font_size;
+
+				.rftIcon {
+					.setIcon(24px);
+				}
+			}
+
+			&.rftBlockButtonHover, 
+			&.rftBlockButtonActive {
+				.transition (0.1s);
+				.rftIcon {
+					.setIcon(24px, black);
+				}
+			}
+		}
+
+		//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?
+		.buttonColorMixin (@color) {
+			&.rftBlockButtonHover {
+				.dijitButtonNode {
+					background-color: @@color;
+				}
+				&.light {
+					.dijitButtonNode {
+						@colorName: "@{color}_light";
+						background-color: @@colorName;
+					}
+				}
+			}
+			.rftBlockButtonHover {
+				.dijitButtonNode {
+					background-color: @@color;
+				}
+				&.light {
+					.dijitButtonNode {
+						@colorName: "@{color}_light";
+						background-color: @@colorName;
+					}
+				}
+			}
+			&.light {
+				.rftBlockButtonHover {
+					.dijitButtonNode {
+						@colorName: "@{color}_light";
+						background-color: @@colorName;
+					}
+				}
+			}
+		}
+
+		.blue {
+			.buttonColorMixin ("blue");
+		}
+		.green {
+			.buttonColorMixin ("green");
+		}
+		.orange {
+			.buttonColorMixin ("orange");
+		}
+		.red {
+			.buttonColorMixin ("red");
+		}
+		.purple {
+			.buttonColorMixin ("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);
+			}
+
+			&.rftInlineButtonHover.white {
+				.setIcon(16px, black);
+			}
+			&.rftInlineButtonHover.black {
+				.setIcon(16px, black);
+			}
+		}
+
+		//MAINMENUBUTTON---------------------------------
+
+	}
+}
Index: /Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftIcons.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftIcons.css	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftIcons.css	(revision 403)
@@ -0,0 +1,180 @@
+#rft .claro .rftIcon {
+  margin: 0;
+  padding: 0;
+  float: left;
+  display: inline-block;
+  border: none;
+  background-color: transparent;
+  background-repeat: no-repeat;
+}
+#rft .claro .rftIcon.rftMainIcon {
+  background-image: url('images/icons/rftIcons32png');
+  width: 32px;
+  height: 32px;
+  margin: 0;
+}
+#rft .claro .rftIcon.rftMidIcon {
+  background-image: url('images/icons/rftIcons24png');
+  width: 24px;
+  height: 24px;
+  margin: 0px 0;
+}
+#rft .claro .rftIcon.rftSmallIcon {
+  background-image: url('images/icons/rftIcons16png');
+  width: 16px;
+  height: 16px;
+  margin: 4px 0;
+}
+#rft .rftIconApplication {
+  background-position: 0px 0px;
+}
+#rft .rftIconDashboard {
+  background-position: -32px 0px;
+}
+#rft .rftIconSession {
+  background-position: -64px 0px;
+}
+#rft .rftIconSessionActive {
+  background-position: -96px 0px;
+}
+#rft .rftIconSessionTemplate {
+  background-position: -128px 0px;
+}
+#rft .rftIconSurvey {
+  background-position: -160px 0px;
+}
+#rft .rftIconQuestion {
+  background-position: -192px 0px;
+}
+#rft .rftIconQuestionFill {
+  background-position: -224px 0px;
+}
+#rft .rftIconRespondent {
+  background-position: -256px 0px;
+}
+#rft .rftIconAnswer {
+  background-position: -288px 0px;
+}
+#rft .rftIconAnswerSet {
+  background-position: -320px 0px;
+}
+#rft .rftIconGameData {
+  background-position: -352px 0px;
+}
+#rft .rftIconUser {
+  background-position: -384px 0px;
+}
+#rft .rftIconAccept {
+  background-position: -416px 0px;
+}
+#rft .rftIconCancel {
+  background-position: -448px 0px;
+}
+#rft .rftIconPlus {
+  background-position: -480px 0px;
+}
+#rft .rftIconMinus {
+  background-position: -512px 0px;
+}
+#rft .rftIconIncrease {
+  background-position: -544px 0px;
+}
+#rft .rftIconDecrease {
+  background-position: -576px 0px;
+}
+#rft .rftIconDelete {
+  background-position: -608px 0px;
+}
+#rft .rftIconHome {
+  background-position: -640px 0px;
+}
+#rft .rftIconPreview {
+  background-position: -672px 0px;
+}
+#rft .rftIconSave {
+  background-position: -704px 0px;
+}
+#rft .rftIconDiscard {
+  background-position: -736px 0px;
+}
+#rft .rftIconProperties {
+  background-position: -768px 0px;
+}
+#rft .rftIconUndo {
+  background-position: -800px 0px;
+}
+#rft .rftIconRedo {
+  background-position: -832px 0px;
+}
+#rft .rftIconBack {
+  background-position: -864px 0px;
+}
+#rft .rftIconForward {
+  background-position: -896px 0px;
+}
+#rft .rftIconRefresh {
+  background-position: -928px 0px;
+}
+#rft .rftIconHelp {
+  background-position: -960px 0px;
+}
+#rft .rftIconInspect {
+  background-position: -992px 0px;
+}
+#rft .rftIconTag {
+  background-position: -1024px 0px;
+}
+#rft .rftIconImage {
+  background-position: -1056px 0px;
+}
+#rft .rftIconEdit {
+  background-position: -1088px 0px;
+}
+#rft .rftIconLock {
+  background-position: -1120px 0px;
+}
+#rft .rftIconUnlock {
+  background-position: -1152px 0px;
+}
+#rft .rftIconPreset {
+  background-position: -1184px 0px;
+}
+#rft .rftIconTextBlock {
+  background-position: -1216px 0px;
+}
+#rft .rftIconPageBreak {
+  background-position: -1248px 0px;
+}
+#rft .rftIconExternal {
+  background-position: -1280px 0px;
+}
+#rft .rftIconInput {
+  background-position: -1312px 0px;
+}
+#rft .rftIconPublish {
+  background-position: -1344px 0px;
+}
+#rft .rftIconFullArrowUp {
+  background-position: -1696px 0px;
+}
+#rft .rftIconFullArrowDown {
+  background-position: -1728px 0px;
+}
+#rft .rftIconFullArrowLeft {
+  background-position: -1760px 0px;
+}
+#rft .rftIconFullArrowRight {
+  background-position: -1792px 0px;
+}
+#rft .rftIconHalfArrowUp {
+  background-position: -1824px 0px;
+}
+#rft .rftIconHalfArrowDown {
+  background-position: -1856px 0px;
+}
+#rft .rftIconHalfArrowLeft {
+  background-position: -1888px 0px;
+}
+#rft .rftIconHalfArrowRight {
+  background-position: -1920px 0px;
+}
Index: /Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftIcons.less
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftIcons.less	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftIcons.less	(revision 403)
@@ -0,0 +1,181 @@
+#rft {
+	&.claro {
+		.rftIcon {
+			.noOffset;
+			float: left;
+			display: inline-block;
+			border: none;
+			background-color: transparent;
+			background-repeat: no-repeat;
+
+			&.rftMainIcon {
+				.setIcon(@icon_mainSize);
+			}
+			&.rftMidIcon {
+				.setIcon(@icon_midSize);
+			}
+			&.rftSmallIcon {
+				.setIcon(@icon_smallSize);
+			}
+
+		}
+	}
+
+	.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/branches/rest-dojo-ui/client/rft/css/LESS/rftLineWithActions.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftLineWithActions.css	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftLineWithActions.css	(revision 403)
@@ -0,0 +1,54 @@
+#rft .claro .rftLineWithButtons {
+  border: none;
+  background-image: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  position: relative;
+  height: 24px;
+  white-space: nowrap;
+  margin: 4px 0;
+}
+#rft .claro .rftLineWithButtons.dojoDndItem {
+  -webkit-transition: all 0.2s;
+  -moz-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  -ms-transition: all 0.2s;
+  transition: all 0.2s;
+}
+#rft .claro .rftLineWithButtons.dojoDndItem.dojoDndItemBefore {
+  margin-top: 6px;
+  border-top: 6px solid #ffffff;
+}
+#rft .claro .rftLineWithButtons.dojoDndItem.dojoDndItemAfter {
+  margin-bottom: 6px;
+  border-bottom: 6px solid #ffffff;
+}
+#rft .claro .rftLineWithButtons.dojoDndItem.dojoDndItemover,
+#rft .claro .rftLineWithButtons.dojoDndItem.dojoDndItemAnchor {
+  background-image: none;
+  border: none;
+  padding: 2px;
+}
+#rft .claro .rftLineWithButtons.dojoDndItem.dojoDndItemover *,
+#rft .claro .rftLineWithButtons.dojoDndItem.dojoDndItemAnchor * {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+#rft .claro .rftLineWithButtons .rftLineWithButtonsTitle {
+  float: left;
+  margin: 0 8px;
+  overflow: hidden;
+  white-space: nowrap;
+  word-wrap: break-word;
+}
+#rft .claro .rftLineWithButtons .rftLineWithButtonsButtons {
+  margin: 0;
+  padding: 0;
+  line-height: 24px;
+  height: 24px;
+  position: absolute;
+  right: 0;
+  float: left;
+}
+#rft .claro .dojoDndSourceMoved .rftLineWithButtons.dojoDndItemAnchor {
+  height: 0;
+}
Index: /Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftLineWithActions.less
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftLineWithActions.less	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftLineWithActions.less	(revision 403)
@@ -0,0 +1,59 @@
+@dndBorderSize: 6px;
+
+#rft {	//rft nameSpace, apply this to base page! Adds 1000 to specificity by default, so easier overrides of Claro
+	&.claro {
+
+		.rftLineWithButtons {
+			.flatShading();
+			position: relative;
+			height: @std_height;
+			white-space: nowrap;
+			margin: @std_offset 0;
+
+			&.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.
+					}
+				}
+			}
+
+			.rftLineWithButtonsTitle {
+				float: left;
+				margin: 0 8px;
+				overflow: hidden;
+				white-space: nowrap;
+				word-wrap: break-word;
+			}
+
+			.rftLineWithButtonsButtons {
+				.noOffset();
+				line-height: @std_height;
+				height: @std_height;
+				position: absolute;
+				right: 0;
+				float: left;
+			}
+		}
+		
+		.dojoDndSourceMoved {
+			.rftLineWithButtons.dojoDndItemAnchor {
+				height: 0;
+			}
+		}	
+	}
+}
Index: /Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftSelector.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftSelector.css	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftSelector.css	(revision 403)
@@ -0,0 +1,30 @@
+#rft .claro .rftSelector {
+  margin: 0;
+  padding: 0;
+  margin: 4px 8px;
+}
+#rft .claro .rftSelector .rftLineWithButtons {
+  margin: 0;
+  padding: 0;
+}
+#rft .claro .rftSelector .rftSelectorSelected .rftSelectorColor {
+  margin: 0;
+  padding: 0;
+  float: left;
+  width: 8px;
+  height: 24px;
+}
+#rft .claro .rftSelector .rftSelectorSelected .rftSelectorColor.conflict {
+  background-color: #ff0000;
+}
+#rft .claro .rftSelector .rftSelectorSelected .rftSelectorColor.pending {
+  background-color: #ff8000;
+}
+#rft .claro .rftSelector .rftSelectorSelected .rftSelectorColor.success {
+  background-color: #00ff00;
+}
+#rft .claro .rftSelector .rftSelectorOptions .rftLineWithButtons,
+#rft .claro .rftSelector .rftSelectorSelected .rftLineWithButtons {
+  background-color: #ffffff;
+  color: #111111;
+}
Index: /Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftSelector.less
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftSelector.less	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftSelector.less	(revision 403)
@@ -0,0 +1,47 @@
+//Variables
+@indicatorWidth: 8px;
+@colorConflict: #ff0000;
+@colorPending: #ff8000;
+@colorSuccess: #00ff00;
+
+#rft {
+	.claro {
+		
+		.rftSelector {
+			.noOffset;
+			margin: @std_offset;
+
+			.rftLineWithButtons {
+				.noOffset;
+			}
+
+			.rftSelectorSelected {
+				// Operation indicator styling
+				.rftSelectorColor {
+					.noOffset;
+					float: left;
+					width: @indicatorWidth;
+					height: @std_height;
+
+					&.conflict {
+						background-color: @colorConflict;
+					}
+					&.pending {
+						background-color: @colorPending;
+					}
+					&.success {
+						background-color: @colorSuccess;
+					}
+				}
+			}
+			// Set dropdown background and text color to black on white
+			.rftSelectorOptions, .rftSelectorSelected {
+
+				.rftLineWithButtons {
+					background-color: @text;
+					color: @darkest;
+				}
+			}
+		}
+	}
+}
Index: /Dev/branches/rest-dojo-ui/client/rft/css/LESS/surveyEditor.less
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/surveyEditor.less	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/surveyEditor.less	(revision 403)
@@ -0,0 +1,16 @@
+#rft {
+	&.claro {
+
+		.rftSurveyListView {
+
+			.rftSurveyListViewContent {
+				min-height: 300px;
+				background: @base1;
+				overflow: auto;
+			}
+		}
+
+		
+
+	}
+}
Index: /Dev/branches/rest-dojo-ui/client/rft/css/LESS/tutorial.less
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/tutorial.less	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/tutorial.less	(revision 403)
@@ -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/branches/rest-dojo-ui/client/rft/css/LESS/variables.less
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/LESS/variables.less	(revision 403)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/LESS/variables.less	(revision 403)
@@ -0,0 +1,65 @@
+// Graytones
+@darkest: #111111;
+@base: #333333;
+@base1: #444444;
+@base2: #555555;
+@headers: #999999;
+@text: #ffffff;
+
+// Colours
+@blue: #0072bc;
+@blue_light: #0794d1;
+@green: #3aa605;
+@green_light: #79ca0a;
+@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;
+
+// MainMenu
+@mm_blockheight: 400px;
+@mm_blockwidth: 400px;
+@mm_blockmargin: 16px;
+@mm_font_size: 32px;
+
+// 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;
+
+@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: /Dev/branches/rest-dojo-ui/client/rft/css/claroOverride.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/claroOverride.css	(revision 402)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/claroOverride.css	(revision 403)
@@ -107,8 +107,2 @@
     border: none;
 }
-
-
-
-
-
-
Index: /Dev/branches/rest-dojo-ui/client/rft/css/layout.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/layout.css	(revision 402)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/layout.css	(revision 403)
@@ -114,4 +114,13 @@
 }
 
+
+
+
+
+
+
+
+
+
 /* General */
 .loginLabel {
@@ -155,9 +164,10 @@
     width: 200px;
     min-height: 30px;
+    border: 1px solid #888888;
 }
 .claro .dijitTab {
+    background-color: transparent;
     padding: 2px 8px;
     color: #999999;
-    border: 1px solid #999999;
     white-space: normal;
     overflow: hidden;
@@ -358,5 +368,5 @@
 }
 .claro .orange .dojoxTitleGroup .dijitTitlePaneTitleHover, 
-.claro .ornage .dojoxTitleGroup .dijitTitlePanelTitleFocused {
+.claro .orange .dojoxTitleGroup .dijitTitlePanelTitleFocused {
     background-color: #ff9140;
 }
Index: /Dev/branches/rest-dojo-ui/client/rft/css/rftIcons.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/rftIcons.css	(revision 402)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/rftIcons.css	(revision 403)
@@ -1,189 +1,182 @@
-/*  
-    The icon's parent element class decides the icon size and url. (.rftLargeButton .rftIcon / .rftInlineButton .rftIcon, for example)
-    The icon gets two classes: .rftIcon (which sets general spacing/positioning, etc), 
-    and an icon identifier such as .rftIconAccept (Which sets the background offset.
-*/
-.rftIcon {
-    display: inline-block;
-    margin: 0;
-    padding: 0;
-    border: none;
-    background-color: transparent;
-    background-repeat: no-repeat;
-}
+/*The icon's parent element class decides the icon size and url. (.rftLargeButton .rftIcon / .rftInlineButton .rftIcon, for example)*/
+/*The icon gets two classes: .rftIcon (which sets general spacing/positioning, etc), */
+/*and an icon identifier such as .rftIconAccept (Which sets the background offset.*/
+	.rftIcon {
+		display: inline-block;
+		margin: 0;
+		padding: 0;
+		border: none;
+		background-color: transparent;
+		background-repeat: no-repeat;
+	}
+	
+	/*Settings for different icon sizes and contexts */
+	.rftIcon.rftMainIcon {
+		float: left;
+		width: 32px;
+		height: 32px;
+		background-image: url('images/icons/rftIcons32.png');
+	}
 
-/* Settings for different icon sizes and contexts */
-.rftIcon.rftMainIcon {
-    float: left;
-    width: 32px;
-    height: 32px;
-    background-image: url('images/icons/rftIcons32.png');
-}
-
-/*  Specific icon indices 
-    If extra icons are added to the spritesheets, make sure that shared icons retain the same index!
-    Also, if possible put common/shared icons at the start of the list to prevent excessively large spritesheets.
-*/
-
-/* Types */
-.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;
-}
+	/*Specific icon indices */
+	/*If extra icons are added to the spritesheets, make sure that shared icons retain the same index!*/
+	/*Also, if possible put common/shared icons at the start of the list to prevent excessively large spritesheets.*/
 
 
-/* TODO: rftIcons24.png and rftIcons16.png have icons that are 1px too wide!
- * Fix this in the .psd and re-export!
- */
+	/*Types */
+	.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/branches/rest-dojo-ui/client/rft/css/rftLineWithButtons.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/rftLineWithButtons.css	(revision 402)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/rftLineWithButtons.css	(revision 403)
@@ -1,3 +1,4 @@
 .claro .rftLineWithButtons {
+    position: relative;
     height: 24px;
     line-height: 24px;
@@ -7,5 +8,6 @@
 }
 .claro .rftLineWithButtons .rftLineWithButtonsButtons {
-    float: right;
+    position: absolute;
+    right: 0;
     height: 24px;
     line-height: 24px;
@@ -24,4 +26,5 @@
 
 /* SurveyListView stuff */
+/*
 .claro div.blue.inheritBgColor.dojoDndItemAnchor,
 .claro .blue .inheritBgColor.dojoDndItemAnchor,
@@ -53,5 +56,5 @@
     background-color: #bd0013;
     color: #ffffff;
-}
+}*/
 
 .claro .rftLineWithButtons.dojoDndItem {
@@ -76,2 +79,14 @@
     overflow: hidden;
 }
+
+
+.claro .rftLineWithButtons.dojoDndItemOver {
+    background-image: none;
+    border: none;
+    padding: 2px;
+}
+.claro .rftLineWithButtons.dojoDndItemAnchor {
+    background-image: none;
+    padding: 2px;
+    border: none;
+}
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/templates/MainMenu.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/templates/MainMenu.html	(revision 402)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/templates/MainMenu.html	(revision 403)
@@ -5,8 +5,8 @@
             <span>Content</span>
             <div data-dojo-type="dijit.DropDownMenu">
-                <div data-dojo-type="rft.ui.MenuLink" class="blue" data-dojo-props="pageId:'surveys', iconClass:'rftIcon rftIconSurvey'">Surveys</div>
-                <div data-dojo-type="rft.ui.MenuLink" class="orange" data-dojo-props="pageId:'questions', iconClass:'rftIcon rftIconQuestion'">Questions</div>
-                <div data-dojo-type="rft.ui.MenuLink" class="purple" data-dojo-props="pageId:'applications', iconClass: 'rftIcon rftIconApplication'">Applications</div>
-                <div data-dojo-type="rft.ui.MenuLink" class="red" data-dojo-props="pageId:'dashboards', iconClass: 'rftIcon rftIconDashboard'">Dashboards</div>
+                <div data-dojo-type="rft.ui.MenuLink" class="blue bgColorHover" data-dojo-props="pageId:'surveys', iconClass:'rftIcon rftIconSurvey'">Surveys</div>
+                <div data-dojo-type="rft.ui.MenuLink" class="orange bgColorHover" data-dojo-props="pageId:'questions', iconClass:'rftIcon rftIconQuestion'">Questions</div>
+                <div data-dojo-type="rft.ui.MenuLink" class="purple bgColorHover" data-dojo-props="pageId:'applications', iconClass: 'rftIcon rftIconApplication'">Applications</div>
+                <div data-dojo-type="rft.ui.MenuLink" class="red bgColorHover" data-dojo-props="pageId:'dashboards', iconClass: 'rftIcon rftIconDashboard'">Dashboards</div>
             </div>
         </div>
