Changeset 411 for Dev/branches/rest-dojo-ui/client/rft/css/main.css

Timestamp:

10/10/12 17:45:49 (13 years ago)

Author:

tjcschipper

Message:

• LESS is finally ready for use. Some small visual bugs remain.

File:

• Dev/branches/rest-dojo-ui/client/rft/css/main.css (modified) (1 diff)

Dev/branches/rest-dojo-ui/client/rft/css/main.css

@@ -1 @@
-@import url('external.css');
-@import url('claroOverride.css');
+/* Menu.css */
+@import "external.css";
+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!
+*/
 
-@import url('layout.css');
-@import url('general.css');
-
-@import url('rftLineWithButtons.css');
-@import url('rftButtons.css');
-@import url('rftIcons.css');
-@import url('rftSelector.css');
-@import url('rftObjectBox.css');
-@import url('sessionEditor.css');
-@import url('surveyEditor.css');
+}
+#rft.claro .blue.textColor {
+  color: #0072bc;
+}
+#rft.claro .blue.textColor.doesHover:hover {
+  color: #0794d1;
+}
+#rft.claro .blue.bgColor {
+  background-color: #0072bc;
+  color: #ffffff;
+}
+#rft.claro .blue.bgColor.doesHover:hover {
+  background-color: #0794d1;
+  color: #111111;
+}
+#rft.claro .blue.hoverTextColor:hover {
+  color: #0072bc;
+}
+#rft.claro .blue.hoverBgColor:hover {
+  background-color: #0072bc;
+}
+#rft.claro .red.textColor {
+  color: #8c0310;
+}
+#rft.claro .red.textColor.doesHover:hover {
+  color: #bd0013;
+}
+#rft.claro .red.bgColor {
+  background-color: #8c0310;
+  color: #ffffff;
+}
+#rft.claro .red.bgColor.doesHover:hover {
+  background-color: #bd0013;
+  color: #111111;
+}
+#rft.claro .red.hoverTextColor:hover {
+  color: #8c0310;
+}
+#rft.claro .red.hoverBgColor:hover {
+  background-color: #8c0310;
+}
+#rft.claro .orange.textColor {
+  color: #ff5b12;
+}
+#rft.claro .orange.textColor.doesHover:hover {
+  color: #ff9140;
+}
+#rft.claro .orange.bgColor {
+  background-color: #ff5b12;
+  color: #ffffff;
+}
+#rft.claro .orange.bgColor.doesHover:hover {
+  background-color: #ff9140;
+  color: #111111;
+}
+#rft.claro .orange.hoverTextColor:hover {
+  color: #ff5b12;
+}
+#rft.claro .orange.hoverBgColor:hover {
+  background-color: #ff5b12;
+}
+#rft.claro .green.textColor {
+  color: #3aa605;
+}
+#rft.claro .green.textColor.doesHover:hover {
+  color: #79ca0a;
+}
+#rft.claro .green.bgColor {
+  background-color: #3aa605;
+  color: #ffffff;
+}
+#rft.claro .green.bgColor.doesHover:hover {
+  background-color: #79ca0a;
+  color: #111111;
+}
+#rft.claro .green.hoverTextColor:hover {
+  color: #3aa605;
+}
+#rft.claro .green.hoverBgColor:hover {
+  background-color: #3aa605;
+}
+#rft.claro .purple.textColor {
+  color: #6529b7;
+}
+#rft.claro .purple.textColor.doesHover:hover {
+  color: #993dec;
+}
+#rft.claro .purple.bgColor {
+  background-color: #6529b7;
+  color: #ffffff;
+}
+#rft.claro .purple.bgColor.doesHover:hover {
+  background-color: #993dec;
+  color: #111111;
+}
+#rft.claro .purple.hoverTextColor:hover {
+  color: #6529b7;
+}
+#rft.claro .purple.hoverBgColor:hover {
+  background-color: #6529b7;
+}
+#rft.claro .textColor,
+#rft.claro .hoverTextColor {
+  transition: color 0.2s;
+}
+#rft.claro .bgColor,
+#rft.claro .hoverBgColor {
+  transition: background-color 0.2s;
+}
+/* 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;
+}
+*: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 .dijitBorderContainer,
+#rft.claro .dijitContentPane,
+#rft.claro .dijitTabContainer,
+#rft.claro .dijitTabPaneWrapper {
+  background: transparent;
+  border: none;
+}
+#rft.claro h1 {
+  margin: 0 0 0 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 0 0 0;
+  padding: 0 0 0 0;
+  color: #999999;
+  font-size: 22px;
+  line-height: 30px;
+}
+#rft.claro h2 .rftIcon {
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  padding: 0 0 0 0;
+  background-image: url('images/icons/rftIcons32.png');
+  margin-right: 8px;
+}
+#rft.claro h3 {
+  margin: 0 0 0 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 0 0 0;
+  padding: 0 0 0 0;
+}
+#rft.claro .dijitContentPane.content {
+  margin: 0 0 0 0;
+  padding: 0 0 0 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 .dijitTabContainerLeft-tabs {
+  border: none;
+  padding: 4px;
+}
+#rft.claro .dijitTabContainerLeft-tabs .dijitTab {
+  margin: 4px;
+  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 .dijitTabContainerLeft-tabs .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 .dijitTab.dijitTabChecked.dijitTabHover {
+  border: 1px solid transparent;
+}
+#rft.claro .dijitTabContainerLeft-tabs .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 .dijitTabContainerLeft-tabs .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.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 0 0 0;
+}
+#rft.claro .rftLineListView {
+  max-width: 200px;
+  max-height: 500px;
+}
+#rft.claro .rftLineListView .rftLineListViewContent {
+  width: auto;
+  overflow: auto;
+}
+#rft.claro .rftIcon {
+  margin: 0 0 0 0;
+  padding: 0 0 0 0;
+  float: left;
+  display: inline-block;
+  border: none;
+  background-color: transparent;
+  background-repeat: no-repeat;
+}
+#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 0 0 0;
+  padding: 0 0 0 0;
+  margin: 4px;
+}
+#rft.claro .rftSelector .rftLineWithActions {
+  margin: 0 0 0 0;
+  padding: 0 0 0 0;
+}
+#rft.claro .rftSelector .rftSelectorSelected .rftSelectorIndicator {
+  margin: 0 0 0 0;
+  padding: 0 0 0 0;
+  float: left;
+  width: 8px;
+  height: 24px;
+  background-color: #bedead;
+}
+#rft.claro .rftSelector .rftSelectorSelected .rftSelectorIndicator.conflict {
+  background-color: #ff0000;
+}
+#rft.claro .rftSelector .rftSelectorSelected .rftSelectorIndicator.pending {
+  background-color: #ff8000;
+}
+#rft.claro .rftSelector .rftSelectorSelected .rftSelectorIndicator.success {
+  background-color: #00ff00;
+}
+#rft.claro .rftSelector .rftSelectorOptions .rftLineWithActions,
+#rft.claro .rftSelector .rftSelectorSelected .rftLineWithActions {
+  background-color: #ffffff;
+  color: #111111;
+}
+#rft.claro .rftLineWithActions {
+  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;
+  color: #ffffff;
+}
+#rft.claro .rftLineWithActions.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 .rftLineWithActions.dojoDndItem.dojoDndItemBefore {
+  margin-top: 6px;
+  border-top: 6px solid #ffffff;
+}
+#rft.claro .rftLineWithActions.dojoDndItem.dojoDndItemAfter {
+  margin-bottom: 6px;
+  border-bottom: 6px solid #ffffff;
+}
+#rft.claro .rftLineWithActions.dojoDndItem.dojoDndItemover,
+#rft.claro .rftLineWithActions.dojoDndItem.dojoDndItemAnchor {
+  background-image: none;
+  border: none;
+  padding: 2px;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+#rft.claro .rftLineWithActions .rftLineWithActionsTitle {
+  float: left;
+  margin: 0 8px;
+  overflow: hidden;
+  white-space: nowrap;
+  word-wrap: break-word;
+}
+#rft.claro .rftLineWithActions .rftLineWithActionsButtons {
+  margin: 0 0 0 0;
+  padding: 0 0 0 0;
+  line-height: 24px;
+  height: 24px;
+  position: absolute;
+  right: 0;
+  float: left;
+}
+#rft.claro .dojoDndSourceMoved .rftLineWithActions.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;
+  padding: 0 0 0 0;
+  background-image: url('images/icons/rftIcons32.png');
+  float: left;
+  margin: 184px 8px 0 8px;
+}
+#rft.claro .rftIndexMenuButton {
+  border: none;
+  background-image: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 0;
+  margin: 0 0 0 0;
+  padding: 0 0 0 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;
+  line-height: 32px;
+  border: none;
+}
+#rft.claro .rftIndexMenuButton .dijitButtonNode {
+  border: none;
+  color: #999999;
+  font-size: 22px;
+}
+#rft.claro .rftIndexMenuButton .dijitButtonNode .dijitButtonContents {
+  vertical-align: top;
+}
+#rft.claro .rftIndexMenuButton .dijitButtonNode .dijitButtonContents .dijitButtonText {
+  padding-bottom: 10px;
+  line-height: 20px;
+}
+#rft.claro .rftIndexMenuButton .dijitButtonNode .dijitButtonContents .rftIcon {
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  padding: 0 0 0 0;
+  background-image: url('images/icons/rftIcons32.png');
+  margin: 0 8px;
+}
+#rft.claro .rftIndexMenuButton.oneHeight {
+  height: 100px;
+  width: 400px;
+}
+#rft.claro .rftIndexMenuButton.oneHeight .dijitButtonNode {
+  margin: 38px 0 0 0;
+}
+#rft.claro .rftIndexMenuButton.twoHeight {
+  height: 200px;
+  width: 400px;
+}
+#rft.claro .rftIndexMenuButton.twoHeight .dijitButtonNode {
+  margin: 88px 0 0 0;
+}
+#rft.claro .rftIndexMenuButton.fourHeight {
+  height: 400px;
+  width: 400px;
+}
+#rft.claro .rftIndexMenuButton.fourHeight .dijitButtonNode {
+  margin: 188px 0 0 0;
+}
+#rft.claro .rftIndexMenuButton.rftIndexMenuButtonHover {
+  color: #ffffff;
+  -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 .rftIndexMenuButton.rftIndexMenuButtonHover .dijitButtonText {
+  color: #ffffff;
+  -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 .rftIndexMenuButton.rftIndexMenuButtonHover.blue {
+  background-color: #0072bc;
+}
+#rft.claro .rftIndexMenuButton.rftIndexMenuButtonHover.red {
+  background-color: #8c0310;
+}
+#rft.claro .rftIndexMenuButton.rftIndexMenuButtonHover.green {
+  background-color: #3aa605;
+}
+#rft.claro .rftIndexMenuButton.rftIndexMenuButtonHover.orange {
+  background-color: #ff5b12;
+}
+#rft.claro .rftIndexMenuButton.rftIndexMenuButtonHover.purple {
+  background-color: #6529b7;
+}
+#rft.claro .rftIndexMenuButton.rftIndexMenuButtonActive {
+  -webkit-transition: all 0.3s;
+  -moz-transition: all 0.3s;
+  -o-transition: all 0.3s;
+  -ms-transition: all 0.3s;
+  transition: all 0.3s;
+  color: #111111;
+  background: #ffffff;
+}
+#rft.claro .rftIndexMenuButton.rftIndexMenuButtonActive .rftIcon {
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  padding: 0 0 0 0;
+  background-image: url('images/icons/rftIcons32b.png');
+}
+#rft.claro .dijitMenuPopup .dijitMenu {
+  border: none;
+  background-image: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 0;
+  color: #999999;
+  background-color: #333333;
+  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: #333333;
+}
+#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.dijitMenuItemHover.red,
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive.red,
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemSelected.red {
+  background-color: #8c0310;
+}
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover.blue,
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive.blue,
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemSelected.blue {
+  background-color: #0072bc;
+}
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover.green,
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive.green,
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemSelected.green {
+  background-color: #3aa605;
+}
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover.orange,
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive.orange,
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemSelected.orange {
+  background-color: #ff5b12;
+}
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover.purple,
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive.purple,
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemSelected.purple {
+  background-color: #6529b7;
+}
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem .rftIcon {
+  width: 16px;
+  height: 16px;
+  margin: 4px 0;
+  padding: 0 0 0 0;
+  background-image: url('images/icons/rftIcons16.png');
+  margin: 0 0 0 0;
+  margin-right: 8px;
+}
+#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive .rftIcon {
+  width: 16px;
+  height: 16px;
+  margin: 4px 0;
+  padding: 0 0 0 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 0 0 0;
+}
+#rft.claro .dojoxTitleGroup .dijitTitlePane .dijitTitlePaneTitle {
+  border: none;
+  background-image: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 0;
+  margin: 0 0 0 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 0 0 0;
+}
+#rft.claro .rftSurveyListView .rftSurveyListViewContent {
+  min-height: 300px;
+  background: #444444;
+  overflow: auto;
+}
+#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: 0 0 0 0;
+  padding: 0 0 0 0;
+  background-image: url('images/icons/rftIcons24.png');
+}
+#rft.claro .rftLargeButton .dijitButtonNode .dijitButtonText {
+  line-height: 24px;
+  margin: 0 0 0 0;
+  padding-left: 8px;
+}
+#rft.claro .rftLargeButton.black .dijitButtonNode .rftIcon {
+  width: 24px;
+  height: 24px;
+  margin: 0 0 0 0;
+  padding: 0 0 0 0;
+  background-image: url('images/icons/rftIcons24b.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 0 0 0;
+  height: 24px;
+  line-height: 24px;
+  vertical-align: top;
+}
+#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;
+  line-height: 24px;
+  vertical-align: top;
+  height: 24px;
+  padding: 0 4px;
+  border: none;
+  color: #ffffff;
+  font-size: 13px;
+}
+#rft.claro .rftBlockButton .dijitButtonNode .rftIcon {
+  width: 16px;
+  height: 16px;
+  margin: 4px 0;
+  padding: 0 0 0 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 {
+  vertical-align: top;
+  width: 16px;
+  height: 16px;
+  margin: 4px 0;
+  padding: 0 0 0 0;
+  background-image: url('images/icons/rftIcons16b.png');
+}
+#rft.claro .rftInlineButton {
+  float: right;
+  height: 24px;
+  width: 24px;
+}
+#rft.claro .rftInlineButton .dijitButtonNode {
+  margin: 0 0 0 0;
+  padding: 0 0 0 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;
+  padding: 0 0 0 0;
+  background-image: url('images/icons/rftIcons16.png');
+}
+#rft.claro .rftInlineButton.white .rftIcon {
+  width: 16px;
+  height: 16px;
+  margin: 4px 0;
+  padding: 0 0 0 0;
+  background-image: url('images/icons/rftIcons16.png');
+}
+#rft.claro .rftInlineButton.black .rftIcon {
+  width: 16px;
+  height: 16px;
+  margin: 4px 0;
+  padding: 0 0 0 0;
+  background-image: url('images/icons/rftIcons16b.png');
+}
+#rft.claro .rftInlineButton.rftInlineButtonHover.white {
+  width: 16px;
+  height: 16px;
+  margin: 4px 0;
+  padding: 0 0 0 0;
+  background-image: url('images/icons/rftIcons16b.png');
+}
+#rft.claro .rftInlineButton.rftInlineButtonHover.black {
+  width: 16px;
+  height: 16px;
+  margin: 4px 0;
+  padding: 0 0 0 0;
+  background-image: url('images/icons/rftIcons16b.png');
+}
+#rft.claro .rftObjectBox {
+  margin: 8px 0;
+}
+#rft.claro .rftObjectBox .rftIcon {
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  padding: 0 0 0 0;
+  background-image: url('images/icons/rftIcons32.png');
+  float: left;
+  margin: 20px 8px;
+}
+#rft.claro .rftObjectBox .rftLineWithActions {
+  margin: 0 0 0 0;
+  padding: 0 0 0 0;
+}
+#rft.claro .rftSessionObject {
+  margin: 0 0 0 0;
+  padding: 0 0 0 0;
+  width: 100px;
+  height: 100px;
+  background: #999999;
+  margin: 8px;
+  display: inline-block;
+}
+#rft.claro .rftSessionObject .rftIcon {
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  padding: 0 0 0 0;
+  background-image: url('images/icons/rftIcons32.png');
+  margin: 8px 34px 0 34px;
+}
+#rft.claro .rftSessionObject label {
+  margin: 0 0 0 0;
+  padding: 0 0 0 0;
+  float: left;
+  clear: both;
+  width: 100px;
+  text-align: center;
+  color: #ffffff;
+  overflow: hidden;
+}
+#rft.claro .rftSessionObject.blue {
+  background-color: #0072bc;
+}
+#rft.claro .rftSessionObject.blue.selected {
+  background-color: #0794d1;
+}
+#rft.claro .rftSessionObject.green {
+  background-color: #3aa605;
+}
+#rft.claro .rftSessionObject.green.selected {
+  background-color: #79ca0a;
+}
+#rft.claro .rftSessionObject.red {
+  background-color: #8c0310;
+}
+#rft.claro .rftSessionObject.red.selected {
+  background-color: #bd0013;
+}
+#rft.claro .rftObjectBox {
+  padding: 0 0 0 0;
+  color: #ffffff;
+}
+#rft.claro .rftObjectBox .typeIcon.rftIcon {
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  padding: 0 0 0 0;
+  background-image: url('images/icons/rftIcons32.png');
+}
+#rft.claro .rftObjectBox .rftLineWithActions {
+  background-color: #3aa605;
+}
+#rft.claro .page_questions .rftSelector .rftSelectorCategory .rftLineWithActions {
+  background-color: #ff5b12;
+}
+#rft.claro .page_questions .rftSelector .rftSelectorSelected .rftLineWithActions {
+  background-color: #ffffff;
+  color: #111111;
+}
+#rft.claro .page_questions .rftSelector .rftSelectorSelected .rftBlockButton {
+  background-color: #ff00ff;
+}
+#rft.claro .page_questions .rftSelector .rftSelectorSelected .rftBlockButton .dijitButtonNode {
+  background-color: #ff5b12;
+}
+#rft.claro .page_questions .rftSelector .rftSelectorSelected .rftBlockButton.dijitHover .dijitButtonNode {
+  background-color: #ffffff;
+}
+#rft.claro .page_questions .rftSelector .rftSelectorSelected .rftBlockButton.dijitActive .dijitButtonNode {
+  background-color: #ff9140;
+}