initial

103 files changed, 16727 insertions, 0 deletions

diff --git a/lib/flat/README.md b/lib/flat/README.md
new file mode 100644
index 000000000..abb2a9cea
--- /dev/null
+++ b/lib/flat/README.md
@@ -0,0 +1,37 @@
+### Flat Theme
+
+A flat theme for Dojo Dijit.
+
+![Image of Dojo flat theme](https://cloud.githubusercontent.com/assets/4641297/9564775/6cae1f44-4e65-11e5-8415-5c8b5b68875a.png)
+
+**To Do:**
+
+1. Fix any outlying dijits using opacity for disabled.
+2. TitlePane and Accordion headers should have a separate mixin function from buttons.
+3. Alternate color classes TitlePane headers.
+4. Alternate color classes for AccordionContainer (active pane header).
+5. Alternate color classes for Sliders; and remove transparency for disabled.
+
+**Icons:**
+
+All icons are Material Design icons by Google ([LICENSE](https://github.com/google/material-design-icons/blob/master/LICENSE)), and were generated using the [IcoMoon App](https://icomoon.io/app).
+
+Icons, along with class names, `.dijitIcon*` aliases and hex codes, can be viewed in Flat Theme Test app.
+
+This theme includes the `selection.json` file, which can be loaded into the IcoMoon App for editing. This icon font includes all the icons needed for icons used in dijits (close in Dialog, etc) and all aliased `.dijitIcon*` and `.dijitEditorIcon*` classes. The hex codes should be maintained as is.
+
+The test app uses the `selection.json` to create the icons tests. The test app includes a globally exposed method `createIconClasses()`, which will create and download a text file containing the icon classes and dijit aliases, which can then be added to `flat-icons.sty` when changes are made to the icon set.
+
+NOTE: This icon set is incomplete. Many of the `.dijitIcon*` and `.dijitEditorIcon*` icons do not have suitable icons in the Google icon set. These icons have a placeholder and have been assigned hex codes. Instead of using icons which do not quite fit the use, or from different icon sets, SVGs for these icons need to be created and added to the font. The SVGs need to be created on a 24 x 24 grid and generally be of the same design as the other icons.
+
+**Issues:**
+
+1. Toggle button doesn't maintain width when unchecked.
+2. For input dijits with alternate color and required/validate, the border should also change via `.dijitTextBoxError` and equivalents. Alternate color styles are overriding.
+3. Hover and selected calendar days with background 50% border radius looks a bit off on some days.
+4. `.dijitIcon` class can cause issues when using certain icon fonts.
+
+**Improvements:**
+
+1. Consider typography, complimentary styling for native elements, helper classes, etc; and some components like Bootstrap.
+2. Alternate colors for text input dijits, checkboxes, radio buttons, sliders, title pane, tooltips.
diff --git a/lib/flat/dgrid/README.md b/lib/flat/dgrid/README.md
new file mode 100644
index 000000000..7d99fc726
--- /dev/null
+++ b/lib/flat/dgrid/README.md
@@ -0,0 +1,8 @@
+The dgrid flat theme builds on the Stylus-based CSS refactor found in dgrid 1.0.
+This portion of the theme requires the [dgrid](http://dgrid.io/) package.
+
+To build your own flat dgrid theme, you may want to adjust the path to dgrid. By
+default, we assume that dgrid is a sibling directory to themes. If this is not
+the case within your application directory structure, simply specify a different
+value for `$flat_path_to_dgrid` in your stylus file for your theme, before
+importing themes/flat/dgrid/flat.styl.
diff --git a/lib/flat/dgrid/flat.css b/lib/flat/dgrid/flat.css
new file mode 100644
index 000000000..e10737013
--- /dev/null
+++ b/lib/flat/dgrid/flat.css
@@ -0,0 +1,12 @@
+.flat {
+  import: '../../dgrid/css/skins/skin';
+}
+.flat .dgrid-cell-padding {
+  padding: 5px 10px;
+}
+.flat .dgrid-header .dgrid-cell {
+  border-bottom-width: 2px;
+}
+.flat .dgrid-selected {
+  border: 1px solid #007ac2;
+}
diff --git a/lib/flat/dgrid/flat.styl b/lib/flat/dgrid/flat.styl
new file mode 100644
index 000000000..9f5eaf3b2
--- /dev/null
+++ b/lib/flat/dgrid/flat.styl
@@ -0,0 +1,48 @@
+@require 'nib/gradients';
+@require 'nib/vendor';
+
+$flat_path_to_dgrid ?= '../../dgrid';
+
+$dgrid-background ?= #fff;
+$dgrid-border-color ?= #d0d0d0;
+$dgrid-cell-padding ?= 5px 10px;
+
+$dgrid-cell-has-vertical-border ?= false;
+
+$dgrid-header-background ?= #fff;
+$dgrid-header-cell-border-color ?= #d0d0d0;
+$dgrid-header-cell-border-bottom-width ?= 2px;
+$dgrid-header-cell-font-weight ?= bold;
+$dgrid-header-cell-hover-background ?= #f2f2f2;
+$dgrid-header-text-transform ?= uppercase;
+
+$dgrid-body-cell-border-color ?= #d0d0d0;
+$dgrid-body-row-transition-duration ?= 0.1s;
+$dgrid-body-row-transition-property ?= unquote('background-color');
+$dgrid-body-row-background ?= transparent;
+
+$dgrid-body-row-hover-background-color ?= #f2f2f2;
+
+$dgrid-selected-background-color ?= #fff;
+$dgrid-selected-border ?= 1px solid #007ac2;
+$dgrid-selected-hover-background-color ?= #f2f2f2;
+
+.flat {
+	import $flat_path_to_dgrid + '/css/skins/skin';
+
+	.dgrid-cell-padding {
+		padding: $dgrid-cell-padding;
+	}
+	.dgrid-header .dgrid-cell {
+		border-bottom-width: $dgrid-header-cell-border-bottom-width;
+	}
+	$dgrid-header-cell-border-bottom-width .dgrid-cell {
+		if (!$dgrid-cell-has-vertical-border) {
+			border-left: 0;
+			border-right: 0;
+		}
+	}
+	.dgrid-selected {
+		border: $dgrid-selected-border;
+	}
+}
diff --git a/lib/flat/dijit/Calendar.css b/lib/flat/dijit/Calendar.css
new file mode 100755
index 000000000..1201591e0
--- /dev/null
+++ b/lib/flat/dijit/Calendar.css
@@ -0,0 +1,216 @@
+/* Calendar
+ *
+ * Styling Calendar mainly includes:
+ *
+ * 1. Calendar container
+ * 		.dijitCalendar - main container
+ * 		.dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active
+ *
+ * 2. Month
+ * 		.dijitCalendarMonthContainer
+ * 		.dijitCalendarMonthLabel
+ *      .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month
+ *      .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active
+ *
+ * 3. Date
+ * 		.dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S
+ * 		.dijitCalendarDateTemplate - date label wrapper
+ * 		.dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month
+ *      .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date
+ * 		.dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date
+ * 		.dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active
+ *
+ * 4. Year
+ * 		.dijitCalendarYearContainer
+ * 		.dijitCalendarYearLabel
+ * 		.dijitCalendarPreviousYear /.dijitCalendarNextYear
+ *      .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active
+ *
+ * 5. Dropdown Month Menu
+ * 		.dijitCalendarMonthMenu - menu container
+ * 		.dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item
+ * 		.dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state
+ */
+.flat .dijitCalendar {
+  background-color: #fff;
+  text-align: center;
+  padding: 4px;
+  border: 1px solid #9e9e9e;
+  border-collapse: separate;
+  border-radius: 3px;
+  -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+}
+.flat .dijitCalendarMonthContainer th {
+  text-align: center;
+  line-height: 20px;
+  vertical-align: middle;
+  margin: 4px 0;
+}
+.flat .dijitCalendarArrow {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: pointer;
+  font-size: 24px;
+  border: 1px solid transparent;
+  padding: 4px;
+}
+.flat .dijitCalendarDecrease,
+.flat .dijitCalendarIncrease {
+  display: none;
+}
+.flat .dijitCalendarDecrementArrow {
+  float: left;
+  padding-left: 2px;
+}
+.flat .dijitCalendarDecrementArrow:before {
+  content: "\f000";
+}
+.flat .dijitCalendarIncrementArrow {
+  float: right;
+  padding-right: 2px;
+}
+.flat .dijitCalendarIncrementArrow:before {
+  content: "\f001";
+}
+.flat .dijitCalendarArrowHover .dijitCalendarIncrementControl,
+.flat .dijitCalendarArrow:hover .dijitCalendarIncrementControl,
+.flat .dijitCalendarNextYearHover,
+.flat .dijitCalendarNextYear:hover,
+.flat .dijitCalendarPreviousYearHover,
+.flat .dijitCalendarPreviousYear:hover {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #9e9e9e;
+  padding: 4px;
+  border-radius: 3px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-transition: all 0.05s linear;
+  -moz-transition: all 0.05s linear;
+  -o-transition: all 0.05s linear;
+  -ms-transition: all 0.05s linear;
+  transition: all 0.05s linear;
+  background: #fff;
+  padding: 4px;
+}
+.flat .dijitCalendarArrowActive .dijitCalendarIncrementControl,
+.flat .dijitCalendarArrow:active .dijitCalendarIncrementControl,
+.flat .dijitCalendarNextYearActive,
+.flat .dijitCalendarNextYear:active,
+.flat .dijitCalendarPreviousYearActive,
+.flat .dijitCalendarPreviousYear:active {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+}
+.flat .dijitA11ySideArrow {
+/* text +/- labels instead of arrow icons, for high contrast mode */
+  display: none;
+}
+.flat .dijitCalendarContainer th,
+.flat .dijitCalendarContainer td {
+  padding: 4px;
+}
+.flat .dijitCalendarDayLabelTemplate {
+  text-align: center;
+  border-bottom: #9e9e9e;
+}
+.flat .dijitCalendarDayLabel {
+  font-weight: bold;
+  text-align: center;
+}
+.flat .dijitCalendarDateTemplate {
+  font-size: 0.9em;
+  letter-spacing: 0.05em;
+  text-align: center;
+}
+.flat .dijitCalendarDateTemplate .dijitCalendarDateLabel {
+  text-decoration: none;
+  display: block;
+  padding: 2px 4px;
+  border: 0 none;
+  border-radius: 50%;
+}
+.flat .dijitCalendarPreviousMonth .dijitCalendarDateLabel,
+.flat .dijitCalendarNextMonth .dijitCalendarDateLabel {
+  color: #c2c2c2;
+}
+.flat .dijitCalendarCurrentDate .dijitCalendarDateLabel {
+  border-color: #2196f3;
+}
+.flat .dijitCalendarHoveredDate .dijitCalendarDateLabel,
+.flat .dijitCalendarEnabledDate:hover .dijitCalendarDateLabel {
+  background-color: #f2f2f2;
+}
+.flat .dijitCalendarActiveDate .dijitCalendarDateLabel,
+.flat .dijitCalendarEnabledDate:active .dijitCalendarDateLabel {
+  background-color: #e6e6e6;
+}
+.flat .dijitCalendarSelectedDate .dijitCalendarDateLabel,
+.flat .dijitCalendarSelectedDate.dijitCalendarHoveredDate .dijitCalendarDateLabel {
+  color: #fff;
+  background-color: #2196f3;
+}
+.flat .dijitCalendarDisabledDate .dijitCalendarDateLabel {
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .dijitCalendarYearContainer {
+  vertical-align: middle;
+}
+.flat .dijitCalendarYearLabel {
+  padding: 4px 0 0 0;
+  margin: 0;
+  font-size: 1.15em;
+}
+.flat .dijitCalendarYearLabel span {
+  vertical-align: middle;
+}
+.flat .dijitCalendarSelectedYear,
+.flat .dijitCalendarNextYear,
+.flat .dijitCalendarPreviousYear {
+  padding: 4px;
+}
+.flat .dijitCalendarSelectedYear {
+  color: #2196f3;
+}
+.flat .dijitCalendarNextYear,
+.flat .dijitCalendarPreviousYear {
+  color: #2196f3;
+  font-size: 0.9em;
+  line-height: 20px;
+  border: 1px solid transparent;
+}
+.flat .dijitCalendarSelectedYear {
+  padding: 0 4px;
+}
+.flat .dijitCalendar .dijitDropDownButton {
+  margin: 0;
+}
+.flat .dijitCalendarMonthMenu {
+  padding: 8px 0;
+}
+.flat .dijitCalendarMonthMenu .dijitCalendarMonthLabel {
+  padding: 4px;
+}
+.flat .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover {
+  color: #fff;
+  background-color: #2196f3;
+}
diff --git a/lib/flat/dijit/Calendar.styl b/lib/flat/dijit/Calendar.styl
new file mode 100755
index 000000000..9c7032f25
--- /dev/null
+++ b/lib/flat/dijit/Calendar.styl
@@ -0,0 +1,247 @@
+/* Calendar
+ *
+ * Styling Calendar mainly includes:
+ *
+ * 1. Calendar container
+ * 		.dijitCalendar - main container
+ * 		.dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active
+ *
+ * 2. Month
+ * 		.dijitCalendarMonthContainer
+ * 		.dijitCalendarMonthLabel
+ *      .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month
+ *      .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active
+ *
+ * 3. Date
+ * 		.dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S
+ * 		.dijitCalendarDateTemplate - date label wrapper
+ * 		.dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month
+ *      .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date
+ * 		.dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date
+ * 		.dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active
+ *
+ * 4. Year
+ * 		.dijitCalendarYearContainer
+ * 		.dijitCalendarYearLabel
+ * 		.dijitCalendarPreviousYear /.dijitCalendarNextYear
+ *      .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active
+ *
+ * 5. Dropdown Month Menu
+ * 		.dijitCalendarMonthMenu - menu container
+ * 		.dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item
+ * 		.dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state
+ */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitCalendar {
+		background-color: $calendar-background-color;
+		text-align:center;
+		padding: $calendar-padding;
+		border: 1px solid $calendar-border-color;
+		border-collapse: separate;	// in case user CSS has set border-collapse: collapse for tables
+		border-radius: $calendar-border-radius;
+		box-shadow: $calendar-box-shadow;
+	}
+
+	.dijitCalendarMonthContainer th {
+		text-align:center;
+		line-height: $line-height;
+		vertical-align:middle;
+		margin: $calendar-padding 0;
+	}
+
+	/* next/previous month arrows */
+
+	.dijitCalendarArrow {
+		_icon-core-style();
+		cursor: pointer;
+		font-size: $calendar-icon-size;
+		border: 1px solid transparent;
+		padding: $padding;
+	}
+
+	// Since the arrow icons are pulled from the font, the `img` tags are not needed.
+	.dijitCalendarDecrease,
+	.dijitCalendarIncrease {
+		display: none;
+	}
+
+	.dijitCalendarDecrementArrow {
+		float: left;
+		padding-left: ($padding / 2);
+
+		&:before {
+			content: $calendar-icon-decrease;
+		}
+	}
+
+	.dijitCalendarIncrementArrow {
+		float: right;
+		padding-right: ($padding / 2);
+
+		&:before {
+			content: $calendar-icon-increase;
+		}
+	}
+
+	.dijitCalendarArrowHover .dijitCalendarIncrementControl,
+	.dijitCalendarArrow:hover .dijitCalendarIncrementControl,
+	.dijitCalendarNextYearHover, .dijitCalendarNextYear:hover,
+	.dijitCalendarPreviousYearHover, .dijitCalendarPreviousYear:hover  {
+		button-style();
+		padding: $padding;
+	}
+
+	.dijitCalendarArrowActive .dijitCalendarIncrementControl,
+	.dijitCalendarArrow:active .dijitCalendarIncrementControl,
+	.dijitCalendarNextYearActive, .dijitCalendarNextYear:active
+	.dijitCalendarPreviousYearActive, .dijitCalendarPreviousYear:active  {
+		button-active-style();
+	}
+
+	.dijitA11ySideArrow {
+		/* text +/- labels instead of arrow icons, for high contrast mode */
+		display: none;
+	}
+
+	.dijitCalendarContainer {
+		th, td {
+			padding: $calendar-day-cell-padding;
+		}
+	}
+
+	/* day */
+
+	.dijitCalendarDayLabelTemplate {
+		text-align: center;
+		border-bottom: $border-color;
+	}
+
+	.dijitCalendarDayLabel {
+		font-weight: $calendar-day-cell-font-weight;
+		text-align: center;
+	}
+
+	/* date */
+
+	.dijitCalendarDateTemplate {
+		font-size: $calendar-date-font-size;
+		letter-spacing: .05em;
+		text-align:center;
+
+		.dijitCalendarDateLabel {
+			text-decoration: none;
+			display: block;
+			padding: $calendar-date-cell-padding;
+			border: 0 none;
+			border-radius: $calendar-date-cell-border-radius;
+		}
+	}
+
+	.dijitCalendarPreviousMonth,
+	.dijitCalendarNextMonth {
+		.dijitCalendarDateLabel {
+			color: $calendar-date-cell-prev-next-month-text-color;
+		}
+	}
+
+	.dijitCalendarCurrentDate {
+		.dijitCalendarDateLabel {
+			border-color: $calendar-date-cell-current-border-color;
+		}
+	}
+
+	/* hover */
+
+	.dijitCalendarHoveredDate .dijitCalendarDateLabel,
+	.dijitCalendarEnabledDate:hover .dijitCalendarDateLabel {
+		background-color: $calendar-date-cell-hovered-background-color;
+	}
+
+	/* active */
+
+	.dijitCalendarActiveDate .dijitCalendarDateLabel,
+	.dijitCalendarEnabledDate:active .dijitCalendarDateLabel {
+		background-color: $calendar-date-cell-active-background-color;
+	}
+
+	/* selected */
+
+	.dijitCalendarSelectedDate,
+	.dijitCalendarSelectedDate.dijitCalendarHoveredDate {
+		 .dijitCalendarDateLabel {
+			color:$calendar-date-cell-selected-text-color;
+			background-color: $calendar-date-cell-selected-background-color;
+		}
+	}
+
+	/* disabled */
+
+	.dijitCalendarDisabledDate .dijitCalendarDateLabel {
+		opacity: $disabled-opacity;
+	}
+
+	/* year */
+
+	.dijitCalendarYearContainer {
+		vertical-align:middle;
+	}
+
+	.dijitCalendarYearLabel {
+		padding: $calendar-year-cell-padding 0 0 0;
+		margin: 0;
+		font-size: $calendar-year-font-size;
+
+		span {
+			vertical-align:middle;
+		}
+	}
+
+	.dijitCalendarSelectedYear,
+	.dijitCalendarNextYear,
+	.dijitCalendarPreviousYear {
+		padding: $padding;
+	}
+
+	.dijitCalendarSelectedYear {
+		color: $calendar-year-prev-current-year-text-color;
+	}
+
+	.dijitCalendarNextYear,
+	.dijitCalendarPreviousYear {
+		color: $calendar-year-prev-next-year-text-color;
+		font-size: $calendar-year-prev-next-year-font-size;
+		line-height: $line-height;
+		border: 1px solid transparent;
+	}
+
+	.dijitCalendarSelectedYear {
+		padding: 0 $calendar-year-cell-padding;
+	}
+
+	/* month dropdown */
+
+	.dijitCalendar .dijitDropDownButton {
+		margin: 0;
+
+		.dijitButtonNode {
+		}
+	}
+
+	.dijitCalendarMonthMenu {
+		padding: $calendar-month-dropdown-menu-padding 0;
+
+		.dijitCalendarMonthLabel {
+			padding: $calendar-month-dropdown-menu-item-padding;
+		}
+
+		.dijitCalendarMonthLabelHover {
+			color: $calendar-month-dropdown-menu-item-hovered-text-color;
+			background-color: $calendar-month-dropdown-menu-item-hovered-background-color;
+		}
+	}
+
+}
diff --git a/lib/flat/dijit/Calendar_rtl.css b/lib/flat/dijit/Calendar_rtl.css
new file mode 100755
index 000000000..d0b88bf59
--- /dev/null
+++ b/lib/flat/dijit/Calendar_rtl.css
@@ -0,0 +1,6 @@
+.flat .dijitCalendarRtl .dijitCalendarDecrease:before {
+  content: "\f001";
+}
+.flat .dijitCalendarRtl .dijitCalendarIncrease:before {
+  content: "\f000";
+}
diff --git a/lib/flat/dijit/Calendar_rtl.styl b/lib/flat/dijit/Calendar_rtl.styl
new file mode 100755
index 000000000..dc93e4bd5
--- /dev/null
+++ b/lib/flat/dijit/Calendar_rtl.styl
@@ -0,0 +1,17 @@
+@import 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitCalendarRtl .dijitCalendarDecrease {
+		&:before {
+			content: $calendar-icon-increase;
+		}
+	}
+
+	.dijitCalendarRtl .dijitCalendarIncrease {
+		&:before {
+			content: $calendar-icon-decrease;
+		}
+	}
+	
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/ColorPalette.css b/lib/flat/dijit/ColorPalette.css
new file mode 100755
index 000000000..530df5a31
--- /dev/null
+++ b/lib/flat/dijit/ColorPalette.css
@@ -0,0 +1,66 @@
+/* ColorPalette
+ * 
+ * Styling of the ColorPalette consists of the following:
+ * 
+ * 1. the whole color palette
+ *		.dijitColorPalette - for outline, border, and background color of the whole color palette
+ *		Note: outline does not work for IE
+ *
+ * 2. the color swatch 
+ *		.dijitColorPalette .dijitPaletteImg
+ *		transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch.
+ *		displays border around a color swatch
+ *
+ * 3. hovered swatch
+ * 		.dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg
+ *		the hovered state of the color swatch - adds border
+ * 	
+ * 4. active and selected swatch
+ * 		.dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg
+ *		.dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg
+ *		adds border for active or selected state
+ */
+.flat .dijitColorPalette {
+  border: 1px solid #9e9e9e;
+  background-color: #fff;
+  border-radius: 3px;
+/* swatch */
+}
+.flat .dijitColorPalette .dijitPaletteTable {
+  padding: 4px;
+}
+.flat .dijitColorPalette .dijitColorPaletteSwatch {
+  height: 15px;
+  width: 15px;
+  border-radius: 2px;
+}
+.flat .dijitColorPalette .dijitPaletteImg {
+/* transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch.
+			 * displays border around a color swatch
+			 * overrides border color in dijit.css */
+  border: 1px solid transparent;
+  line-height: normal;
+}
+.flat .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg {
+  border-color: #9e9e9e;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 2px;
+  -webkit-transform: scale(1.2);
+  -moz-transform: scale(1.2);
+  -o-transform: scale(1.2);
+  -ms-transform: scale(1.2);
+  transform: scale(1.2);
+}
+.flat .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg,
+.flat .dijitColorPalette .dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg {
+  border: 1px solid #2196f3;
+  -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2);
+  box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2);
+  border-radius: 2px;
+  -webkit-transform: scale(1.2);
+  -moz-transform: scale(1.2);
+  -o-transform: scale(1.2);
+  -ms-transform: scale(1.2);
+  transform: scale(1.2);
+}
diff --git a/lib/flat/dijit/ColorPalette.styl b/lib/flat/dijit/ColorPalette.styl
new file mode 100755
index 000000000..87f2806c5
--- /dev/null
+++ b/lib/flat/dijit/ColorPalette.styl
@@ -0,0 +1,69 @@
+/* ColorPalette
+ * 
+ * Styling of the ColorPalette consists of the following:
+ * 
+ * 1. the whole color palette
+ *		.dijitColorPalette - for outline, border, and background color of the whole color palette
+ *		Note: outline does not work for IE
+ *
+ * 2. the color swatch 
+ *		.dijitColorPalette .dijitPaletteImg
+ *		transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch.
+ *		displays border around a color swatch
+ *
+ * 3. hovered swatch
+ * 		.dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg
+ *		the hovered state of the color swatch - adds border
+ * 	
+ * 4. active and selected swatch
+ * 		.dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg
+ *		.dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg
+ *		adds border for active or selected state
+ */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitColorPalette {
+		border: 1px solid $colorpalette-border-color;
+		background-color: $colorpalette-background-color;
+		border-radius: $colorpalette-border-radius;
+
+		.dijitPaletteTable {
+			padding: $colorpalette-padding;
+		}
+
+		/* swatch */
+
+		.dijitColorPaletteSwatch {
+			height: $colorpalette-swatch-height;
+			width: $colorpalette-swatch-width;
+			border-radius:$colorpalette-swatch-radius;
+		}
+
+		.dijitPaletteImg {
+			/* transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch.
+			 * displays border around a color swatch
+			 * overrides border color in dijit.css */
+			border: 1px solid $colorpalette-swatch-border-color;
+			line-height: normal;
+		}
+
+		.dijitPaletteCell:hover .dijitPaletteImg {
+			border-color: $colorpalette-swatch-hover-border-color;
+			box-shadow: $colorpalette-swatch-hover-box-shadow;
+			border-radius: $colorpalette-swatch-radius;
+			transform: scale(1.2);
+		}
+
+		.dijitPaletteCell:active .dijitPaletteImg,
+		.dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg {
+			border: 1px solid $colorpalette-swatch-selected-border-color;
+			box-shadow: $colorpalette-swatch-selected-box-shadow;
+			border-radius: $colorpalette-swatch-radius;
+			transform: scale(1.2);
+		}
+	}
+	
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/ColorPalette_rtl.css b/lib/flat/dijit/ColorPalette_rtl.css
new file mode 100644
index 000000000..25953cc11
--- /dev/null
+++ b/lib/flat/dijit/ColorPalette_rtl.css
@@ -0,0 +1,4 @@
+.flat .dijitColorPaletteRtl .dijitColorPaletteUnder {
+  left: auto;
+  right: 0;
+}
diff --git a/lib/flat/dijit/ColorPalette_rtl.styl b/lib/flat/dijit/ColorPalette_rtl.styl
new file mode 100644
index 000000000..62fe06ab6
--- /dev/null
+++ b/lib/flat/dijit/ColorPalette_rtl.styl
@@ -0,0 +1,10 @@
+@import 'dijit_variables';
+
+.{$theme-name} {
+	
+	.dijitColorPaletteRtl .dijitColorPaletteUnder {
+		left: auto;
+		right: 0;
+	}
+	
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/Common.css b/lib/flat/dijit/Common.css
new file mode 100644
index 000000000..c6613d0ec
--- /dev/null
+++ b/lib/flat/dijit/Common.css
@@ -0,0 +1,87 @@
+.dijitPopup {
+  border-radius: 3px;
+}
+/* ----- Drag and Drop ----- */
+.dojoDndItem {
+  border: 1px solid transparent;
+  cursor: pointer;
+  -webkit-transition-duration: 0.25s;
+  -moz-transition-duration: 0.25s;
+  -o-transition-duration: 0.25s;
+  -ms-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+  -webkit-transition-property: background-color, border-color, opacity;
+  -moz-transition-property: background-color, border-color, opacity;
+  -o-transition-property: background-color, border-color, opacity;
+  -ms-transition-property: background-color, border-color, opacity;
+  transition-property: background-color, border-color, opacity;
+}
+/* hover */
+.dojoDndItemOver {
+  background-color: #f5f5f5;
+  border-radius: 3px;
+}
+.dojoDndItemAnchor {
+  background-color: transparent;
+  border: 1px dashed #2196f3;
+  border-radius: 3px;
+}
+/* selected */
+.dojoDndItemBefore {
+  background: transparent;
+  padding-top: 2px;
+  border-top: 1px solid #2196f3;
+}
+.dojoDndItemAfter {
+  background: transparent;
+  padding-bottom: 2px;
+  border-bottom: 1px solid #2196f3;
+}
+/* Avatar */
+table.dojoDndAvatar {
+  display: block;
+}
+.dojoDndAvatarHeader td {
+  display: none;
+}
+.dojoDndAvatarHeader:before {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: table-cell;
+}
+/* cannot drop */
+.dojoDndMove .dojoDndAvatarHeader:before {
+  color: #dd2c00;
+  content: "\f01c";
+}
+.dojoDndCopy .dojoDndAvatarHeader:before {
+  color: #dd2c00;
+  content: "\f01c";
+}
+/* can drop */
+.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader:before {
+  color: #43a047;
+  content: "\f008";
+}
+.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader:before {
+  color: #43a047;
+  content: "\f008";
+}
+.dojoDndAvatarItem {
+  border-radius: 3px;
+}
+.dojoDndAvatarItem td > * {
+  padding: 4px 8px;
+  list-style-type: none;
+  background-color: #fff;
+  -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+}
diff --git a/lib/flat/dijit/Common.styl b/lib/flat/dijit/Common.styl
new file mode 100755
index 000000000..8b2119a03
--- /dev/null
+++ b/lib/flat/dijit/Common.styl
@@ -0,0 +1,104 @@
+@import 'dijit_variables';
+
+.dijitPopup {
+	border-radius: $popup-border-radius;
+}
+
+/* ----- Drag and Drop ----- */
+
+.dojoDndItem {
+	border: 1px solid $dnd-item-border-color;
+	cursor: pointer;
+	transition-duration: .25s;
+	transition-property: background-color, border-color, opacity;
+}
+
+/* hover */
+
+.dojoDndItemOver {
+	background-color: $dnd-hover-background-color;
+	border-radius: $dnd-hover-border-radius;
+}
+
+.dojoDndItemAnchor {
+	background-color: $dnd-anchor-background-color;
+	border: 1px dashed $dnd-anchor-border-color;
+	border-radius: $dnd-anchor-border-radius;
+}
+
+/* selected */
+
+.dojoDndItemSelected {
+}
+
+.dojoDndItemBefore {
+	background: transparent;
+	padding-top: 2px;
+	border-top: 1px solid $dnd-avatar-item-insert-indicator-color;
+}
+
+.dojoDndItemAfter {
+	background: transparent;
+	padding-bottom: 2px;
+	border-bottom: 1px solid $dnd-avatar-item-insert-indicator-color;
+}
+
+/* Avatar */
+
+table.dojoDndAvatar {
+	display: block;
+}
+
+.dojoDndAvatarHeader {
+	td	{ 
+		display: none;
+	}
+	&:before {
+		_icon-core-style();
+		display: table-cell;
+	}
+}
+
+/* cannot drop */
+
+.dojoDndMove .dojoDndAvatarHeader {
+	&:before {
+		color: $error;
+		content: $dnd-icon-no-drop;
+	}
+}
+
+.dojoDndCopy .dojoDndAvatarHeader {
+	&:before {
+		color: $error;
+		content: $dnd-icon-no-drop;
+	}
+}
+
+/* can drop */
+
+.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader	{
+	&:before {
+		color: $success;
+		content: $dnd-icon-drop;
+	}
+}
+
+.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader	{
+	&:before {
+		color: $success;
+		content: $dnd-icon-drop;
+	}
+}
+
+.dojoDndAvatarItem {
+	border-radius: $dnd-avatar-item-border-radius;
+	td {
+		> * {
+			padding: $dnd-avatar-item-padding;
+			list-style-type: none;
+			background-color: $dnd-avatar-item-background-color;
+			box-shadow: $dnd-avatar-item-box-shadow;
+		}
+	}
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/Dialog.css b/lib/flat/dijit/Dialog.css
new file mode 100755
index 000000000..557a7cf21
--- /dev/null
+++ b/lib/flat/dijit/Dialog.css
@@ -0,0 +1,274 @@
+/* Dialog 
+ * 
+ * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog
+ * 
+ * Dialog:
+ * 1. Dialog (default styling): 
+ * 		.dijitDialog - styles for dialog's bounding box
+ *
+ * 2. Dialog title 
+ * 		.dijitDialogTitleBar - styles for the title container at the top of dialog
+ * 		.dijitDialogTitle - the text container in dialog title
+ * 
+ * 3. Dialog content 
+ * 		.dijitDialogPaneContent - main container for content area and action bar
+ * 		.dijitDialogPaneContentArea - styles for content container
+ * 
+ * 4. Dialog action bar 
+ * 		.dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content
+ * 
+ * 5. Dialog underlay 
+ * 		.dijitDialogUnderlay - div under the dialog which used for separate dialog and page content
+ * 
+ * 
+ * Tooltip & TooltipDialog:
+ * 1. tooltip content container: 
+ * 		.dijitTooltipContainer - tooltip content container
+ *
+ * 2. tooltip connector: 
+ * 		.dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right)
+ */
+.flat .dijitDialog {
+  background-color: #fff;
+  border: 1px solid #9e9e9e;
+  border-radius: 3px;
+  -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+}
+.flat .dijitDialogPaneContent {
+  background-color: #fff;
+  border-radius: 0 0 3px 3px;
+  padding: 8px;
+  position: relative;
+}
+.flat .dijitDialogPaneActionBar {
+/* the bar at bottom with OK/Cancel buttons */
+  padding-top: 8px;
+  text-align: right;
+  position: relative;
+}
+.flat .dijitDialogPaneActionBar .dijitButton {
+  float: none;
+}
+.flat .dijitTooltipDialog .dijitDialogPaneActionBar {
+  border-radius: 0 0 3px 3px;
+  margin: 8px 0 0;
+}
+.flat .dijitDialogTitleBar {
+/* outer container for the titlebar of the dialog */
+  line-height: 20px;
+  border-bottom: 1px solid #e0e0e0;
+  padding: 8px 12px;
+  border-radius: 3px 3px 0 0;
+}
+.flat .dijitDialogTitle {
+/* typography and styling of the dialog title */
+  font-size: 1.1em;
+  font-weight: bold;
+}
+.flat .dijitDialogCloseIcon {
+/* the default close icon for the dialog */
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .dijitDialogCloseIcon:before {
+  content: "\f00e";
+  font-size: 20px;
+}
+.flat .dijitDialogCloseIcon .closeText {
+  display: none;
+}
+.flat .dijitDialogCloseIconHover,
+.flat .dijitDialogCloseIconActive {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.flat .dijitDialogUnderlay {
+  background: #000;
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .dijitTooltip,
+.flat .dijitTooltipDialog {
+/* the outermost dom node, holding the connector and container */
+  background: transparent; /* make the area on the sides of the arrow transparent */
+}
+.flat .dijitTooltipContainer {
+  background-color: #424242;
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+  padding: 4px 8px;
+  border-radius: 3px;
+}
+.flat .dijitTooltip .dijitTooltipContainer {
+  color: #fff;
+  border: 0 none;
+}
+.flat .dijitTooltipConnector {
+/* the arrow */
+  z-index: 2;
+  width: auto;
+  height: auto;
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.flat .dijitTooltipABRight .dijitTooltipConnector {
+/* above or below tooltip, but the arrow appears on the right,
+			and the right edges of target and tooltip are aligned rather than the left */
+  left: auto !important;
+  right: 8px;
+}
+.flat .dijitTooltipBelow {
+/* leave room for arrow above content */
+  padding-top: 4px;
+}
+.flat .dijitTooltipBelow .dijitTooltipConnector {
+/* the arrow piece for tooltips below an element */
+  top: 0;
+  left: 8px;
+  border-bottom: 4px solid #424242;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 0;
+}
+.flat .dijitTooltipAbove {
+/* leave room for arrow below content */
+  padding-bottom: 4px;
+}
+.flat .dijitTooltipAbove .dijitTooltipConnector {
+/* the arrow piece for tooltips above an element */
+  bottom: 0;
+  left: 8px;
+  border-top: 4px solid #424242;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 0;
+}
+.flat .dijitTooltipLeft {
+  padding-right: 4px;
+}
+.flat .dijitTooltipLeft .dijitTooltipConnector {
+/* the arrow piece for tooltips to the left of an element, bottom borders aligned */
+  right: 0;
+  border-left: 4px solid #424242;
+  border-bottom: 4px solid transparent;
+  border-top: 4px solid transparent;
+  border-right: 0;
+}
+.flat .dijitTooltipRight {
+  padding-left: 4px;
+}
+.flat .dijitTooltipRight .dijitTooltipConnector {
+/* the arrow piece for tooltips to the right of an element, bottom borders aligned */
+  left: 0;
+  border-bottom: 4px solid transparent;
+  border-top: 4px solid transparent;
+  border-right: 4px solid #424242;
+}
+.flat .dijitTooltipDialog .dijitTooltipContainer {
+  background: #fff;
+  border: 1px solid #9e9e9e;
+  border-radius: 3px;
+  -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.flat .dijitTooltipDialog.dijitTooltipBelow {
+  padding-top: 6px;
+}
+.flat .dijitTooltipDialog.dijitTooltipAbove {
+  padding-bottom: 6px;
+}
+.flat .dijitTooltipDialog.dijitTooltipLeft {
+  padding-right: 6px;
+}
+.flat .dijitTooltipDialog.dijitTooltipRight {
+  padding-left: 6px;
+}
+.flat .dijitTooltipDialog .dijitTooltipConnector {
+  height: 0;
+  width: 0;
+  position: absolute;
+  z-index: 2;
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.flat .dijitTooltipDialog .dijitTooltipConnector:after {
+  content: "";
+  height: 0;
+  width: 0;
+  position: absolute;
+}
+.flat .dijitTooltipDialog.dijitTooltipAbove .dijitTooltipConnector {
+  border-color: #9e9e9e transparent transparent;
+  border-width: 7px 7px 0; /* one extra pixel is added as the border of the arrows */
+  border-style: solid;
+}
+.flat .dijitTooltipDialog.dijitTooltipAbove .dijitTooltipConnector:after {
+  border-color: #fff transparent transparent;
+  border-width: 6px 6px 0;
+  border-style: solid;
+  left: -6px;
+  top: -7px;
+}
+.flat .dijitTooltipDialog.dijitTooltipBelow .dijitTooltipConnector {
+  border-color: transparent transparent #9e9e9e;
+  border-width: 0 7px 7px;
+  border-style: solid;
+}
+.flat .dijitTooltipDialog.dijitTooltipBelow .dijitTooltipConnector:after {
+  border-color: transparent transparent #fff;
+  border-width: 0 6px 6px;
+  border-style: solid;
+  left: -6px;
+  bottom: -7px;
+}
+.flat .dijitTooltipDialog.dijitTooltipLeft .dijitTooltipConnector {
+  border-color: transparent transparent transparent #9e9e9e;
+  border-width: 7px 0 7px 7px;
+  border-style: solid;
+}
+.flat .dijitTooltipDialog.dijitTooltipLeft .dijitTooltipConnector:after {
+  border-color: transparent transparent transparent #fff;
+  border-width: 6px 0 6px 6px;
+  border-style: solid;
+  top: -6px;
+  left: -7px;
+}
+.flat .dijitTooltipDialog.dijitTooltipRight .dijitTooltipConnector {
+  border-color: transparent #9e9e9e transparent transparent;
+  border-width: 7px 7px 7px 0;
+  border-style: solid;
+}
+.flat .dijitTooltipDialog.dijitTooltipRight .dijitTooltipConnector:after {
+  border-color: transparent #fff transparent transparent;
+  border-width: 6px 6px 6px 0;
+  border-style: solid;
+  top: -6px;
+  right: -7px;
+}
diff --git a/lib/flat/dijit/Dialog.styl b/lib/flat/dijit/Dialog.styl
new file mode 100755
index 000000000..2c869bda4
--- /dev/null
+++ b/lib/flat/dijit/Dialog.styl
@@ -0,0 +1,308 @@
+/* Dialog 
+ * 
+ * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog
+ * 
+ * Dialog:
+ * 1. Dialog (default styling): 
+ * 		.dijitDialog - styles for dialog's bounding box
+ *
+ * 2. Dialog title 
+ * 		.dijitDialogTitleBar - styles for the title container at the top of dialog
+ * 		.dijitDialogTitle - the text container in dialog title
+ * 
+ * 3. Dialog content 
+ * 		.dijitDialogPaneContent - main container for content area and action bar
+ * 		.dijitDialogPaneContentArea - styles for content container
+ * 
+ * 4. Dialog action bar 
+ * 		.dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content
+ * 
+ * 5. Dialog underlay 
+ * 		.dijitDialogUnderlay - div under the dialog which used for separate dialog and page content
+ * 
+ * 
+ * Tooltip & TooltipDialog:
+ * 1. tooltip content container: 
+ * 		.dijitTooltipContainer - tooltip content container
+ *
+ * 2. tooltip connector: 
+ * 		.dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right)
+ */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+		
+	/* ----- Dialog ----- */
+	
+	.dijitDialog {
+		background-color: $dialog-background-color;
+		border: 1px solid $dialog-border-color;
+		border-radius: $dialog-border-radius;
+		box-shadow: $dialog-box-shadow;
+	}
+
+	/* content pane */
+
+	.dijitDialogPaneContent {
+		background-color: $dialog-content-bg-color;
+		border-radius: 0 0 $dialog-border-radius $dialog-border-radius;
+		padding: $dialog-padding;
+		position: relative;
+	}
+
+	/* action bar */
+
+	.dijitDialogPaneActionBar {
+		/* the bar at bottom with OK/Cancel buttons */
+		padding-top: $dialog-padding;
+		text-align: right;
+		position: relative;
+		.dijitButton {
+			float: none;
+		}
+	}
+
+	/* action bar within a TooltipDialog */
+	.dijitTooltipDialog .dijitDialogPaneActionBar {
+		border-radius: 0 0 $dialog-border-radius $dialog-border-radius
+		margin: $dialog-padding  0 0;
+	}
+
+	/* title bar */
+
+	.dijitDialogTitleBar {
+		/* outer container for the titlebar of the dialog */
+		line-height: $line-height;
+		border-bottom: 1px solid $dialog-titlebar-border-color;
+		padding: $dialog-padding $dialog-padding * 1.5;
+		border-radius: $dialog-border-radius $dialog-border-radius 0 0;
+	}
+
+	.dijitDialogTitle {
+		/* typography and styling of the dialog title */
+		font-size: $dialog-titlebar-font-size;
+		font-weight: bold;
+	}
+
+	/* close button */
+	
+	.dijitDialogCloseIcon {
+		/* the default close icon for the dialog */
+		width: $dialog-close-icon-size;
+		height: @width;
+		line-height: @height;
+		text-align: center;
+		position: absolute;
+		top: ($line-height + $dialog-padding * 2 - 20px ) * 0.5;
+		right: $dialog-padding * 1.5;
+		_icon-core-style();
+		opacity: 0.65;
+		
+		&:before {
+			content: $dialog-close-icon;
+			font-size: $dialog-close-icon-size;
+		}
+
+		.closeText {
+			display: none;
+		}
+	}
+
+	.dijitDialogCloseIconHover,
+	.dijitDialogCloseIconActive {
+		opacity: 1;
+	}
+
+	/* underlay */
+		
+	.dijitDialogUnderlay {
+		background: $dialog-underlay-color;
+		opacity: $dialog-underlay-opacity;
+	}
+
+	/* ----- Tooltip and TooltipDialog ----- */
+
+	.dijitTooltip,
+	.dijitTooltipDialog {
+		/* the outermost dom node, holding the connector and container */
+		background: transparent; /* make the area on the sides of the arrow transparent */
+	}
+
+	.dijitTooltipContainer {
+		background-color: $tooltip-background-color;
+		opacity: $tooltip-opacity;
+		padding: $tooltip-padding $tooltip-padding * 2;
+		border-radius: $tooltip-border-radius;
+	} 
+
+	.dijitTooltip .dijitTooltipContainer {
+		color: $tooltip-text-color;
+		border: $tooltip-border;
+	}
+
+	.dijitTooltipConnector {
+		/* the arrow */
+		z-index: 2;
+		width:auto;
+		height:auto;
+		opacity: $tooltip-opacity;
+	}
+
+	.dijitTooltipABRight .dijitTooltipConnector {
+		/* above or below tooltip, but the arrow appears on the right,
+			and the right edges of target and tooltip are aligned rather than the left */
+		left: auto !important;
+		right: $tooltip-padding * 2;
+	}
+
+	.dijitTooltipBelow {
+		/* leave room for arrow above content */
+		padding-top: $tooltip-arrow-thickness;
+
+		.dijitTooltipConnector {
+			/* the arrow piece for tooltips below an element */
+			top: 0;
+			left: $tooltip-padding * 2;
+			border-bottom: $tooltip-arrow-thickness solid $tooltip-arrow-color;
+			border-left: $tooltip-arrow-thickness solid transparent;
+			border-right: $tooltip-arrow-thickness solid transparent;
+			border-top: 0;
+		}
+	}
+
+	.dijitTooltipAbove {
+		/* leave room for arrow below content */
+		padding-bottom: $tooltip-arrow-thickness;
+
+		.dijitTooltipConnector {
+			/* the arrow piece for tooltips above an element */
+			bottom: 0;
+			left: $tooltip-padding * 2;
+			border-top: $tooltip-arrow-thickness solid $tooltip-arrow-color;
+			border-left: $tooltip-arrow-thickness solid transparent;
+			border-right: $tooltip-arrow-thickness solid transparent;
+			border-bottom: 0;
+		}
+	}
+
+	.dijitTooltipLeft {
+		padding-right: $tooltip-arrow-thickness;
+
+		.dijitTooltipConnector {
+			/* the arrow piece for tooltips to the left of an element, bottom borders aligned */
+			right: 0;
+			border-left: $tooltip-arrow-thickness solid $tooltip-arrow-color;
+			border-bottom: $tooltip-arrow-thickness solid transparent;
+			border-top: $tooltip-arrow-thickness solid transparent;
+			border-right: 0;
+		}
+	}
+
+	.dijitTooltipRight {
+		padding-left: $tooltip-arrow-thickness;
+
+		.dijitTooltipConnector {
+			/* the arrow piece for tooltips to the right of an element, bottom borders aligned */
+			left: 0;
+			border-bottom: $tooltip-arrow-thickness solid transparent;
+			border-top: $tooltip-arrow-thickness solid transparent;
+			border-right: $tooltip-arrow-thickness solid $tooltip-arrow-color;
+		}
+	}
+
+	/* ----- TooltipDialog ----- */
+
+	.dijitTooltipDialog {
+		.dijitTooltipContainer {
+			background: $dialog-background-color;
+			border: 1px solid $dialog-border-color;
+			border-radius: $dialog-border-radius;
+			box-shadow: $dialog-box-shadow;
+			opacity:1;
+		}
+		&.dijitTooltipBelow {
+			padding-top: $dialog-arrow-thickness;
+		}
+		&.dijitTooltipAbove {
+			padding-bottom: $dialog-arrow-thickness;
+		}
+		&.dijitTooltipLeft {
+			padding-right: $dialog-arrow-thickness;
+		}
+		&.dijitTooltipRight {
+			padding-left: $dialog-arrow-thickness;
+		}
+
+		/* The tooltip dialog's connector itself serves as the "border" of the arrows,*/
+		/* then using :after to overlay the connector to "fill" the arrows with the same color as the container. */
+		.dijitTooltipConnector {
+			height: 0;
+			width: 0;
+			position: absolute;
+			z-index: 2;
+			opacity: 1;
+
+			&:after {
+				content: "";
+				height: 0;
+				width: 0;
+				position: absolute;
+			}
+		}
+
+		&.dijitTooltipAbove .dijitTooltipConnector {
+			border-color: $dialog-arrow-border-color transparent transparent;
+			border-width: $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px 0; /* one extra pixel is added as the border of the arrows */;
+			border-style: solid;
+
+			&:after {
+				border-color: $dialog-arrow-background-color transparent transparent;
+				border-width: $dialog-arrow-thickness $dialog-arrow-thickness 0;
+				border-style: solid;
+				left: - $dialog-arrow-thickness;
+				top: - $dialog-arrow-thickness - 1px;
+			}
+		}
+		&.dijitTooltipBelow .dijitTooltipConnector {
+			border-color: transparent transparent $dialog-arrow-border-color;
+			border-width: 0 $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px;
+			border-style: solid;
+
+			&:after {
+				border-color: transparent transparent $dialog-arrow-background-color;
+				border-width: 0 $dialog-arrow-thickness $dialog-arrow-thickness;
+				border-style: solid;
+				left: - $dialog-arrow-thickness;
+				bottom: - $dialog-arrow-thickness - 1px;
+			}
+		}
+		&.dijitTooltipLeft .dijitTooltipConnector {
+			border-color: transparent transparent transparent $dialog-arrow-border-color;
+			border-width: $dialog-arrow-thickness + 1px 0 $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px;
+			border-style: solid;
+
+			&:after {
+				border-color: transparent transparent transparent $dialog-arrow-background-color;
+				border-width: $dialog-arrow-thickness 0 $dialog-arrow-thickness $dialog-arrow-thickness;
+				border-style: solid;
+				top: - $dialog-arrow-thickness;
+				left: - $dialog-arrow-thickness - 1px;
+			}
+		}
+		&.dijitTooltipRight .dijitTooltipConnector {
+			border-color: transparent $dialog-arrow-border-color transparent transparent;
+			border-width: $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px 0;
+			border-style: solid;
+
+			&:after {
+				border-color: transparent $dialog-arrow-background-color transparent transparent;
+				border-width: $dialog-arrow-thickness $dialog-arrow-thickness $dialog-arrow-thickness 0;
+				border-style: solid;
+				top: - $dialog-arrow-thickness;
+				right: - $dialog-arrow-thickness - 1px;
+			}
+		}
+	}
+	
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/Dialog_rtl.css b/lib/flat/dijit/Dialog_rtl.css
new file mode 100755
index 000000000..5f7d17d71
--- /dev/null
+++ b/lib/flat/dijit/Dialog_rtl.css
@@ -0,0 +1,8 @@
+.flat .dijitDialogRtl .dijitDialogCloseIcon {
+  right: auto;
+  left: 12px;
+}
+.flat .dijitDialogRtl .dijitDialogPaneActionBar,
+.flat .dijitTooltipDialogRtl .dijitDialogPaneActionBar {
+  text-align: left;
+}
diff --git a/lib/flat/dijit/Dialog_rtl.styl b/lib/flat/dijit/Dialog_rtl.styl
new file mode 100755
index 000000000..7be49deaa
--- /dev/null
+++ b/lib/flat/dijit/Dialog_rtl.styl
@@ -0,0 +1,17 @@
+@import 'dijit_variables';
+
+.{$theme-name} {
+	
+	.dijitDialogRtl .dijitDialogCloseIcon {
+		right: auto;
+		left: $dialog-padding * 1.5;
+	}
+
+	.dijitDialogRtl,
+	.dijitTooltipDialogRtl {
+		.dijitDialogPaneActionBar {
+			text-align: left;
+		}
+	}
+
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/Editor.css b/lib/flat/dijit/Editor.css
new file mode 100755
index 000000000..b6a6bb86f
--- /dev/null
+++ b/lib/flat/dijit/Editor.css
@@ -0,0 +1,53 @@
+/* Editor 
+ * 
+ * Styling Editor means styling the Editor inside iframe container (dijitEditorIFrameContainer)
+ * 
+ * 1. Editor iframe container (default styling): 
+ * 		.dijitEditorIFrameContainer - normal state styles: background-color, border, padding
+ *
+ * 2. hovered Editor iframe container (ie, mouse hover on editor)
+ * 		.dijitEditorHover .dijitEditorIFrameContainer/dijitEditorIFrame - styles when mouse hover on the container
+ * 
+ * 3. focused Editor iframe container (ie, mouse focus on the editor pane)
+ * 		.dijitEditorFocused .dijitEditorIFrameContainer/dijitEditorIFrame - styles when container focused
+ * 
+ * 3. disabled Editor iframe container 
+ * 		.dijitEditorDisabled - editor's inner iframe container disable status styles: background, border
+ */
+.flat .dijitEditor {
+  background-color: #fff;
+  border: 1px solid #9e9e9e;
+  border-radius: 3px;
+}
+.flat .dijitEditor .dijitEditorIFrameContainer {
+  border: 1px solid transparent;
+  border-top: 1px solid #9e9e9e;
+  padding: 4px 8px;
+  -webkit-transition: border 0.2s linear 0s;
+  -moz-transition: border 0.2s linear 0s;
+  -o-transition: border 0.2s linear 0s;
+  -ms-transition: border 0.2s linear 0s;
+  transition: border 0.2s linear 0s;
+}
+.flat .dijitEditorHover .dijitEditorIFrameContainer,
+.flat .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame {
+  border: 1px solid #2196f3;
+}
+.flat .dijitEditorFocused .dijitEditorIFrameContainer {
+  border: 1px solid #2196f3;
+}
+.flat .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame {
+  border: 1px solid #2196f3;
+}
+.flat .dijitEditorDisabled {
+  border: 1px solid #9e9e9e;
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .dijitEditorDisabled .dijitEditorIFrame,
+.flat .dijitEditorDisabled .dijitEditorIFrameContainer,
+.flat .dijitEditorDisabled .dijitEditorIFrameContainer .dijitEditorIFrame {
+  background-color: #f5f5f5;
+  border: 1px solid transparent;
+}
diff --git a/lib/flat/dijit/Editor.styl b/lib/flat/dijit/Editor.styl
new file mode 100755
index 000000000..1be19acb2
--- /dev/null
+++ b/lib/flat/dijit/Editor.styl
@@ -0,0 +1,69 @@
+/* Editor 
+ * 
+ * Styling Editor means styling the Editor inside iframe container (dijitEditorIFrameContainer)
+ * 
+ * 1. Editor iframe container (default styling): 
+ * 		.dijitEditorIFrameContainer - normal state styles: background-color, border, padding
+ *
+ * 2. hovered Editor iframe container (ie, mouse hover on editor)
+ * 		.dijitEditorHover .dijitEditorIFrameContainer/dijitEditorIFrame - styles when mouse hover on the container
+ * 
+ * 3. focused Editor iframe container (ie, mouse focus on the editor pane)
+ * 		.dijitEditorFocused .dijitEditorIFrameContainer/dijitEditorIFrame - styles when container focused
+ * 
+ * 3. disabled Editor iframe container 
+ * 		.dijitEditorDisabled - editor's inner iframe container disable status styles: background, border
+ */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitEditor {
+		background-color: $editor-background-color;
+		border: 1px solid $editor-border-color;
+		border-radius: $editor-border-radius;
+
+		.dijitEditorIFrameContainer {
+			border: 1px solid $editor-iframe-border-color;
+			border-top: 1px solid $editor-border-color;
+			padding: $editor-iframe-padding;
+			transition: border 0.2s linear 0s;
+		}
+	}
+
+	/* Hover */
+
+	.dijitEditorHover {
+		.dijitEditorIFrameContainer,
+		.dijitEditorIFrameContainer .dijitEditorIFrame {
+			border: 1px solid $editor-iframe-hover-border-color;
+		}
+	}
+
+	/* Focused */
+
+	.dijitEditorFocused {
+		.dijitEditorIFrameContainer {
+			border: 1px solid $editor-iframe-focused-border-color;
+		}
+		.dijitEditorIFrameContainer .dijitEditorIFrame {
+			border: 1px solid $editor-iframe-focused-border-color;
+		}
+	}
+
+	/* Disabled */
+
+	.dijitEditorDisabled {
+		border: 1px solid $editor-disabled-border-color;
+		opacity: $disabled-opacity;
+
+		.dijitEditorIFrame,
+		.dijitEditorIFrameContainer,
+		.dijitEditorIFrameContainer .dijitEditorIFrame {
+			background-color: $editor-iframe-disabled-background-color;
+			border: 1px solid $editor-iframe-disabled-border-color;
+		}
+	}
+	
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/Editor_rtl.css b/lib/flat/dijit/Editor_rtl.css
new file mode 100755
index 000000000..e69de29bb
--- /dev/null
+++ b/lib/flat/dijit/Editor_rtl.css
diff --git a/lib/flat/dijit/Editor_rtl.styl b/lib/flat/dijit/Editor_rtl.styl
new file mode 100755
index 000000000..2567a43d1
--- /dev/null
+++ b/lib/flat/dijit/Editor_rtl.styl
@@ -0,0 +1,8 @@
+@import 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitEditorRtl {
+	}
+
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/InlineEditBox.css b/lib/flat/dijit/InlineEditBox.css
new file mode 100755
index 000000000..eb9f5a75a
--- /dev/null
+++ b/lib/flat/dijit/InlineEditBox.css
@@ -0,0 +1,23 @@
+/* InlineEditBox
+ * 
+ * Styling InlineEditBox mainly includes:
+ * 
+ * 1. Normal state
+ * 		.dijitInlineEditBoxDisplayMode  - for border
+ * 
+ * 2. Hover state
+ * 		.dijitInlineEditBoxDisplayModeHover - for border and background color
+ */
+.flat .dijitInlineEditBoxDisplayMode {
+  border: 1px dashed transparent;
+  padding: 4px 6px;
+}
+.flat .dijitInlineEditBoxDisplayModeHover {
+  background-color: transparent;
+  border: 1px dashed #2196f3;
+}
+.flat .dijitInlineEditBoxDisplayModeDisabled {
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
diff --git a/lib/flat/dijit/InlineEditBox.styl b/lib/flat/dijit/InlineEditBox.styl
new file mode 100755
index 000000000..b91f441fc
--- /dev/null
+++ b/lib/flat/dijit/InlineEditBox.styl
@@ -0,0 +1,31 @@
+/* InlineEditBox
+ * 
+ * Styling InlineEditBox mainly includes:
+ * 
+ * 1. Normal state
+ * 		.dijitInlineEditBoxDisplayMode  - for border
+ * 
+ * 2. Hover state
+ * 		.dijitInlineEditBoxDisplayModeHover - for border and background color
+ */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+			
+	.dijitInlineEditBoxDisplayMode {
+		border: 1px dashed $inlineeditbox-border-color;
+		padding: $inlineeditbox-padding;
+		border-radius: $inlineeditbox-border-radius;
+	}
+
+	.dijitInlineEditBoxDisplayModeHover {
+		background-color: $inlineeditbox-hover-background-color;
+		border: 1px dashed $inlineeditbox-hover-border-color;
+	}
+
+	.dijitInlineEditBoxDisplayModeDisabled {
+		opacity: $disabled-opacity;
+	}
+
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/Menu.css b/lib/flat/dijit/Menu.css
new file mode 100755
index 000000000..c7a354ce6
--- /dev/null
+++ b/lib/flat/dijit/Menu.css
@@ -0,0 +1,157 @@
+/* Menu 
+
+There are three areas of styling for the Menu:  
+ 
+ 1. The menu 
+ 	There are three types of menus:
+ 	i) Context Menu
+ 	ii) Drop down Menu
+ 	iii) Navigation Menu
+ 	All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border
+ 	.dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect
+  .dijitMenuTable - for padding - also affects Select widget 	
+  	
+ 2. The menu bar
+ 	.dijitMenuBar - for border, margins, padding, background-color of the menu bar
+ 	.dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem) 
+ 	
+ 3. Menu items - items in the menu.  
+ 	.dijitMenuItem - for color
+ 	.dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected	
+ 	.dijitMenuItemActive - for background-color of an active (mousedown) menu item
+	td.dijitMenuItemIconCell - for padding around a  menu item's icon
+	td.dijitMenuItemLabel - for padding around a menu item's label	
+	.dijitMenuSeparatorTop - for border, top border, of the separator
+	.dijitMenuSeparatorBottom - for bottom margin of the separator
+	
+	Styles specific to ComboBox and FilteringSelect widgets: 
+	.dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu
+	.dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu
+
+*/
+.flat .dijitMenu {
+  background: #fff;
+  border: 1px solid #9e9e9e;
+  border-radius: 3px;
+  margin: 0;
+  -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+}
+.flat .dijitMenuTable,
+.flat .dijitComboBoxMenu {
+  padding: 8px 0;
+}
+.flat .dijitComboBoxMenu {
+  margin-left: 0;
+  background-image: none;
+}
+.flat .dijitMenuTable {
+/* this prevents jiggling upon hover of a menu item */
+  border-collapse: separate;
+  border-spacing: 0 0;
+}
+.flat .dijitMenuItem,
+.flat .dijitMenuItem td {
+  line-height: 20px;
+  padding: 8px;
+  white-space: nowrap;
+}
+.flat .dijitMenuItemHover td,
+.flat .dijitMenuItemHover {
+  color: #fff;
+  background-color: #2196f3;
+}
+.flat .dijitMenuItemActive td,
+.flat .dijitMenuItemActive {
+  color: #fff;
+  background-color: #2196f3;
+}
+.flat .dijitMenuItemSelected td,
+.flat .dijitMenuItemSelected {
+  color: #fff;
+  background-color: #2196f3;
+}
+.flat .dijitMenuItemDisabled {
+  color: #9e9e9e;
+}
+.flat .dijitMenuItemDisabled.dijitMenuItemSelected td,
+.flat .dijitMenuItemDisabled.dijitMenuItemSelected {
+  color: #f2f2f2;
+  background: #6fbbf7;
+}
+.flat .dijitMenuSeparatorTop {
+  height: auto;
+  margin-top: 1px; /* prevents spacing above/below separator */
+  border-bottom: 1px solid #9e9e9e;
+}
+.flat .dijitMenuSeparatorBottom {
+  height: auto;
+  margin-bottom: 1px;
+  border-top: 1px solid transparent;
+}
+.flat td.dijitMenuItemIconCell {
+  padding: 4px;
+  margin: 0 0 0 4px;
+  text-align: center;
+}
+.flat .dijitMenuExpand {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.flat .dijitMenuExpand:before {
+  content: "\f001";
+}
+.flat .dijitCheckedMenuItemIconChar {
+  display: none;
+}
+.flat .dijitMenuPreviousButton,
+.flat .dijitMenuNextButton {
+  font-style: italic;
+}
+.flat .dijitMenuBar {
+  margin: 0;
+  padding: 0;
+  background-color: #f5f5f5;
+}
+.flat .dijitMenuBar .dijitMenuItem {
+  padding: 8px 12px;
+  margin: 0;
+}
+.flat .dijitMenuBar .dijitMenuItemHover {
+  color: #fff;
+  background-color: #2196f3;
+}
+.flat .dijitMenuBar .dijitMenuItemActive {
+  color: #fff;
+  background-color: #2196f3;
+}
+.flat .dijitMenuBar .dijitMenuItemSelected,
+.flat .dijitMenuBar .dijitMenuItemHover.dijitMenuItemSelected,
+.flat .dijitMenuBar .dijitMenuItemActive.dijitMenuItemSelected {
+  color: #fff;
+  background-color: #2196f3;
+}
+.flat .dijitMenuBar .dijitMenuItemDisabled.dijitMenuItemSelected {
+  color: #f2f2f2;
+  background: #6fbbf7;
+}
+.flat .dijitMenuPopup {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.flat .dijitMenuPopup .dijitMenu {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.flat .dijitMenuPopup .dijitMenuItem,
+.flat .dijitMenuPopup .dijitMenuItem td {
+  padding: 8px;
+}
diff --git a/lib/flat/dijit/Menu.styl b/lib/flat/dijit/Menu.styl
new file mode 100755
index 000000000..f6caa412b
--- /dev/null
+++ b/lib/flat/dijit/Menu.styl
@@ -0,0 +1,191 @@
+/* Menu 
+
+There are three areas of styling for the Menu:  
+ 
+ 1. The menu 
+ 	There are three types of menus:
+ 	i) Context Menu
+ 	ii) Drop down Menu
+ 	iii) Navigation Menu
+ 	All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border
+ 	.dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect
+  .dijitMenuTable - for padding - also affects Select widget 	
+  	
+ 2. The menu bar
+ 	.dijitMenuBar - for border, margins, padding, background-color of the menu bar
+ 	.dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem) 
+ 	
+ 3. Menu items - items in the menu.  
+ 	.dijitMenuItem - for color
+ 	.dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected	
+ 	.dijitMenuItemActive - for background-color of an active (mousedown) menu item
+	td.dijitMenuItemIconCell - for padding around a  menu item's icon
+	td.dijitMenuItemLabel - for padding around a menu item's label	
+	.dijitMenuSeparatorTop - for border, top border, of the separator
+	.dijitMenuSeparatorBottom - for bottom margin of the separator
+	
+	Styles specific to ComboBox and FilteringSelect widgets: 
+	.dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu
+	.dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu
+
+*/
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+	/* ----- Menu (Common) ----- */
+	.dijitMenu {
+		background: $menu-background-color;
+		border: 1px solid $menu-border-color;
+		border-radius: $menu-border-radius;
+		margin: 0;
+		box-shadow: $popup-box-shadow;
+	}
+
+	.dijitMenuTable,
+	.dijitComboBoxMenu {
+		padding: $menu-padding 0;
+	}
+
+	.dijitComboBoxMenu {
+		margin-left:0;
+		background-image: none;
+	}
+
+	.dijitMenuTable {
+		/* this prevents jiggling upon hover of a menu item */
+		border-collapse: separate;
+		border-spacing: 0 0;
+	}
+
+	/* ---- MenuItem ---- */
+	.dijitMenuItem,
+	.dijitMenuItem td {
+		line-height: $line-height;
+		padding: $menu-item-padding;
+		white-space: nowrap;
+	}
+
+	// hover
+	.dijitMenuItemHover td,
+	.dijitMenuItemHover {
+		color: $menu-item-hovered-text-color;
+		background-color: $menu-item-hovered-background-color;
+	}
+
+	// active
+	.dijitMenuItemActive td,
+	.dijitMenuItemActive {
+		color: $menu-item-active-text-color;
+		background-color: $menu-item-active-background-color;
+	}
+
+	// selected
+	.dijitMenuItemSelected td,
+	.dijitMenuItemSelected {
+		color: $menu-item-selected-text-color;
+		background-color: $menu-item-selected-background-color;
+	}
+	
+	// disabled
+	.dijitMenuItemDisabled {
+		color: $menu-item-disabled-text-color;
+	}
+	
+	.dijitMenuItemDisabled.dijitMenuItemSelected td,
+	.dijitMenuItemDisabled.dijitMenuItemSelected {
+		color: $menu-item-disabled-hovered-text-color;
+		background: $menu-item-disabled-hovered-background-color;
+	}
+
+	/* ---- MenuItemSeparator ---- */
+	.dijitMenuSeparatorTop {
+		height: auto
+		margin-top: 1px; /* prevents spacing above/below separator */
+		border-bottom: 1px solid $menu-item-separator-top-color;
+	}
+
+	.dijitMenuSeparatorBottom {
+		height: auto;
+		margin-bottom:1px;
+		border-top: 1px solid $menu-item-separator-bottom-color;
+	}
+
+	/* ---- MenuItem icons ---- */
+	td.dijitMenuItemIconCell {
+		padding: $menu-item-icon-padding;
+		margin: 0 0 0 $menu-item-icon-margin;
+		text-align: center;
+	}
+
+	// popup menu icon
+	.dijitMenuExpand {
+		_icon-core-style();
+		&:before {
+			content: $menu-item-icon;
+		}
+	}
+
+	// checked icon
+	.dijitCheckedMenuItemIconChar {
+		display: none;
+	}
+
+	.dijitMenuPreviousButton, .dijitMenuNextButton {
+		font-style: italic;
+	}
+
+	/* ----- Menu Bar ----- */
+	.dijitMenuBar {
+		margin: 0;
+		padding: 0;
+		background-color: $menubar-background-color;
+
+		.dijitMenuItem {  
+			padding: $menubar-item-padding;
+			margin: 0;	
+		}
+		
+		// hover
+		.dijitMenuItemHover {
+			color: $menubar-item-hover-color;
+			background-color: $menubar-item-hover-background-color;
+		}
+
+		// active
+		.dijitMenuItemActive {
+			color: $menubar-item-active-color;
+			background-color: $menubar-item-active-background-color;
+		}
+		
+		// selected
+		.dijitMenuItemSelected,
+		.dijitMenuItemHover.dijitMenuItemSelected,
+		.dijitMenuItemActive.dijitMenuItemSelected {
+			color: $menubar-item-selected-text-color;
+			background-color: $menubar-item-selected-background-color;
+		}
+		
+		// disabled
+		.dijitMenuItemDisabled.dijitMenuItemSelected,
+		.dijitMenuItemDisabled.dijitMenuItemSelected {
+			color: $menu-item-disabled-hovered-text-color;
+			background: $menu-item-disabled-hovered-background-color;
+		}
+	}
+
+	/* ---- MenuBar Dropdown ---- */
+	.dijitMenuPopup {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+
+		.dijitMenu {
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+		}
+		.dijitMenuItem, 
+		.dijitMenuItem td {
+			padding: $menubar-popup-item-padding;
+		}
+	}
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/Menu_rtl.css b/lib/flat/dijit/Menu_rtl.css
new file mode 100755
index 000000000..c2ec906cc
--- /dev/null
+++ b/lib/flat/dijit/Menu_rtl.css
@@ -0,0 +1,9 @@
+.flat .dijitMenuBarRtl {
+  text-align: right;
+}
+.flat .dijitMenuItemRtl {
+  text-align: right;
+}
+.flat .dijitMenuItemRtl .dijitMenuExpand:before {
+  content: "\f000";
+}
diff --git a/lib/flat/dijit/Menu_rtl.styl b/lib/flat/dijit/Menu_rtl.styl
new file mode 100755
index 000000000..d5d3d3d41
--- /dev/null
+++ b/lib/flat/dijit/Menu_rtl.styl
@@ -0,0 +1,20 @@
+@import 'dijit_variables';
+
+
+.{$theme-name} {
+
+	.dijitMenuBarRtl {
+		text-align: right;
+	}
+
+	.dijitMenuItemRtl {
+		text-align: right;
+		
+		.dijitMenuExpand {
+			&:before {
+				content: $menu-item-icon-rtl;
+			}
+		}
+	}
+	
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/ProgressBar.css b/lib/flat/dijit/ProgressBar.css
new file mode 100755
index 000000000..0e96e7d41
--- /dev/null
+++ b/lib/flat/dijit/ProgressBar.css
@@ -0,0 +1,110 @@
+/* ProgressBar
+ * 
+ * Styling of the ProgressBar consists of the following:
+ * 
+ * 1. the base progress bar
+ *		.dijitProgressBar -	sets margins for the progress bar
+ *
+ * 2. the empty bar
+ *		.dijitProgressBarEmpty  - sets background img and color for bar or parts of bar that are not finished yet
+ *		Also sets border color for whole bar
+ *
+ * 3. tile mode
+ * 		.dijitProgressBarTile
+ *		inner container for finished portion when in 'tile' (image) mode 
+ * 	
+ * 4. full bar mode
+ * 		.dijitProgressBarFull
+ *		adds border to right side of the filled portion of bar
+ *
+ * 5. text for label of  bar
+ *		.dijitProgressBarLabel - sets text color, which must contrast with both the "Empty" and "Full" parts. 
+ * 	
+ * 6. indeterminate mode
+ *		.dijitProgressBarIndeterminate .dijitProgressBarTile 
+ * 		sets animated gif for the progress bar in 'indeterminate' mode
+ */
+.flat .dijitProgressBar {
+  background-color: #e0e0e0;
+  border: 0 none;
+  border-radius: 3px;
+}
+.flat .dijitProgressBarTile {
+  background: url("images/progressBarStrips.png") repeat-x top;
+  -webkit-animation: progress-bar-stripes 2s linear infinite;
+  -moz-animation: progress-bar-stripes 2s linear infinite;
+  -o-animation: progress-bar-stripes 2s linear infinite;
+  -ms-animation: progress-bar-stripes 2s linear infinite;
+  animation: progress-bar-stripes 2s linear infinite;
+}
+.flat .dijitProgressBarFull {
+  background-color: #2196f3;
+  -webkit-transition-property: width;
+  -moz-transition-property: width;
+  -o-transition-property: width;
+  -ms-transition-property: width;
+  transition-property: width;
+  -webkit-transition-duration: 0.25s;
+  -moz-transition-duration: 0.25s;
+  -o-transition-duration: 0.25s;
+  -ms-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+  height: 100%;
+}
+.flat .dijitProgressBar.alt-primary .dijitProgressBarFull {
+  background-color: #1e88e5;
+}
+.flat .dijitProgressBar.alt-success .dijitProgressBarFull {
+  background-color: #43a047;
+}
+.flat .dijitProgressBar.alt-info .dijitProgressBarFull {
+  background-color: #03a9f4;
+}
+.flat .dijitProgressBar.alt-warning .dijitProgressBarFull {
+  background-color: #fb8c00;
+}
+.flat .dijitProgressBar.alt-danger .dijitProgressBarFull {
+  background-color: #e53935;
+}
+.flat .dijitProgressBar.alt-inverse .dijitProgressBarFull {
+  background-color: #616161;
+}
+.flat .dijitProgressBarLabel {
+  margin-top: 0.2em;
+  margin-bottom: 0.2em;
+  color: #fff;
+  font-size: 1em;
+  text-shadow: 0.1em 0.1em 1px #424242;
+}
+@-moz-keyframes progress-bar-stripes {
+  from {
+    background-position: 75px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+@-webkit-keyframes progress-bar-stripes {
+  from {
+    background-position: 75px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+@-o-keyframes progress-bar-stripes {
+  from {
+    background-position: 75px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 75px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
diff --git a/lib/flat/dijit/ProgressBar.styl b/lib/flat/dijit/ProgressBar.styl
new file mode 100755
index 000000000..c7af6b499
--- /dev/null
+++ b/lib/flat/dijit/ProgressBar.styl
@@ -0,0 +1,70 @@
+/* ProgressBar
+ * 
+ * Styling of the ProgressBar consists of the following:
+ * 
+ * 1. the base progress bar
+ *		.dijitProgressBar -	sets margins for the progress bar
+ *
+ * 2. the empty bar
+ *		.dijitProgressBarEmpty  - sets background img and color for bar or parts of bar that are not finished yet
+ *		Also sets border color for whole bar
+ *
+ * 3. tile mode
+ * 		.dijitProgressBarTile
+ *		inner container for finished portion when in 'tile' (image) mode 
+ * 	
+ * 4. full bar mode
+ * 		.dijitProgressBarFull
+ *		adds border to right side of the filled portion of bar
+ *
+ * 5. text for label of  bar
+ *		.dijitProgressBarLabel - sets text color, which must contrast with both the "Empty" and "Full" parts. 
+ * 	
+ * 6. indeterminate mode
+ *		.dijitProgressBarIndeterminate .dijitProgressBarTile 
+ * 		sets animated gif for the progress bar in 'indeterminate' mode
+ */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+	
+	.dijitProgressBar {
+		background-color: $progress-bar-empty-color;
+		border: 0 none;
+		border-radius: $progress-bar-border-radius; 
+	}
+
+	.dijitProgressBarTile {	
+		background: url($progress-bar-strips-image-url) repeat-x top;
+		animation: progress-bar-stripes 2s linear infinite;
+	} 
+
+	.dijitProgressBarFull {
+		_progress-bar-color-properties($progress-bar-color);
+		transition-property: width;
+		transition-duration: .25s;
+		height: 100%;
+	}
+
+	// alternative colors
+	for class in $progress-bar-alternative-colors {
+		.dijitProgressBar.{class} .dijitProgressBarFull {
+			_progress-bar-color-properties($progress-bar-alternative-colors[class]);
+		}
+	}
+
+	.dijitProgressBarLabel {
+		margin-top: 0.2em;
+		margin-bottom: 0.2em;
+		color: $progress-bar-text-color;
+		font-size: $progress-bar-font-size;
+		text-shadow: $progress-bar-text-shadow;
+	}
+}
+
+// animation
+@keyframes progress-bar-stripes {
+  from { background-position: 75px 0; }
+  to { background-position: 0 0; }
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/TimePicker.css b/lib/flat/dijit/TimePicker.css
new file mode 100755
index 000000000..2305e6f67
--- /dev/null
+++ b/lib/flat/dijit/TimePicker.css
@@ -0,0 +1,60 @@
+/* Time Picker 
+ *
+ * Styling the Time Picker consists of the following: 
+ *
+ * 1. minor time values
+ * 		.dijitTimePickerTick - set text color, size, background color of minor values
+ * 		.dijitTimePickerTickHover - set hover style of minor time values
+ * 		dijitTimePickerTickSelected - set selected style of minor time values
+ *
+ * 2. major time values - 1:00, 2:00, times on the hour 
+ * 		set text color, size, background color, left/right margins for "zoom" affect
+ * 		.dijitTimePickerMarkerHover - to set hover style of major time values
+ * 		.dijitTimePickerMarkerSelected - set selected style of major time values
+ * 
+ * 3. up and down arrow buttons
+ * 		.dijitTimePicker .dijitButtonNode - background-color, border
+ * 		.dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state
+ *
+ *	Other classes provide the fundamental structure of the TimePicker and should not be modified. 
+ */
+.dijitTimePickerPopup {
+  -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  height: 200px;
+}
+.dijitTimePicker {
+  background-color: #fff;
+  padding: 4px 0;
+  border: 1px solid #9e9e9e;
+  border-radius: 3px;
+}
+.dijitTimePickerItem {
+  margin: 0;
+}
+.dijitTimePickerTick {
+/* minor value */
+  color: #9e9e9e;
+  border: 0 none;
+}
+.dijitTimePickerMarker {
+/* major value - 1:00, 2:00, times on the hour */
+  background-color: transparent;
+  white-space: nowrap;
+  border: 0 none;
+}
+.dijitTimePickerTickHover,
+.dijitTimePickerMarkerHover {
+  background: #f2f2f2;
+  color: #424242;
+}
+.dijitTimePickerMarkerSelected,
+.dijitTimePickerTickSelected {
+  background: #f2f2f2;
+  color: #424242;
+}
+.dijitTimePickerTick .dijitTimePickerItemInner,
+.dijitTimePickerMarker .dijitTimePickerItemInner {
+  padding: 8px;
+  margin: 0;
+}
diff --git a/lib/flat/dijit/TimePicker.styl b/lib/flat/dijit/TimePicker.styl
new file mode 100755
index 000000000..6d16c0c30
--- /dev/null
+++ b/lib/flat/dijit/TimePicker.styl
@@ -0,0 +1,71 @@
+/* Time Picker 
+ *
+ * Styling the Time Picker consists of the following: 
+ *
+ * 1. minor time values
+ * 		.dijitTimePickerTick - set text color, size, background color of minor values
+ * 		.dijitTimePickerTickHover - set hover style of minor time values
+ * 		dijitTimePickerTickSelected - set selected style of minor time values
+ *
+ * 2. major time values - 1:00, 2:00, times on the hour 
+ * 		set text color, size, background color, left/right margins for "zoom" affect
+ * 		.dijitTimePickerMarkerHover - to set hover style of major time values
+ * 		.dijitTimePickerMarkerSelected - set selected style of major time values
+ * 
+ * 3. up and down arrow buttons
+ * 		.dijitTimePicker .dijitButtonNode - background-color, border
+ * 		.dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state
+ *
+ *	Other classes provide the fundamental structure of the TimePicker and should not be modified. 
+ */
+
+@import 'dijit_variables';
+
+.dijitTimePickerPopup {
+	box-shadow: $timepicker-box-shadow;
+	height: 200px;
+}
+
+.dijitTimePicker {
+	background-color: $timepicker-background-color;
+	padding: $timepicker-padding;
+	border: 1px solid $timepicker-border-color;
+	border-radius: $timepicker-border-radius;
+}
+
+.dijitTimePickerItem {
+	margin:0;
+}
+
+.dijitTimePickerTick {
+	/* minor value */
+	color: $timepicker-tick-text-color;
+	border: 0 none;
+}
+
+.dijitTimePickerMarker {
+	/* major value - 1:00, 2:00, times on the hour */
+	background-color: $timepicker-marker-background-color;
+	white-space: nowrap;
+    border: 0 none;
+}
+
+.dijitTimePickerTickHover,
+.dijitTimePickerMarkerHover {
+	background: $timepicker-item-hovered-background-color;
+	color: $timepicker-item-hovered-text-color;
+}
+
+.dijitTimePickerMarkerSelected,
+.dijitTimePickerTickSelected {
+	background: $timepicker-item-selected-background-color;
+	color: $timepicker-item-selected-text-color;
+}
+
+.dijitTimePickerTick,
+.dijitTimePickerMarker {
+	.dijitTimePickerItemInner {
+		padding: $timepicker-item-padding;
+		margin:0;
+	}
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/TitlePane.css b/lib/flat/dijit/TitlePane.css
new file mode 100755
index 000000000..f3950bce7
--- /dev/null
+++ b/lib/flat/dijit/TitlePane.css
@@ -0,0 +1,118 @@
+/* TitlePane and Fieldset
+ *
+ * Styling TitlePane means styling the TitlePane title and its content container  (dijitTitlePane)
+ *
+ * TitlePane title:
+ * 1. TitlePane title (default styling):
+ * 		.dijitTitlePaneTitle - TitlePane's title div style: background-color, border
+ *
+ * 2. hovered TitlePane title (ie, mouse hover on a title bar)
+ * 		.dijitTitlePaneTitleHover - styles when mouse hover on the title div
+ *
+ * 3. active TitlePane title (ie, mouse down on a title bar)
+ * 		.dijitTitlePaneTitleActive - styles when mouse down on the title div
+ *
+ *
+ * TitlePane Content Container:
+ * 1. outer/inner container:
+ * 		.dijitTitlePaneContentOuter / dijitTitlePaneContentInner - styles for the content outer div
+ */
+.flat .dijitTitlePaneTitle {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #9e9e9e;
+  padding: 4px;
+  border-radius: 3px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-transition: all 0.05s linear;
+  -moz-transition: all 0.05s linear;
+  -o-transition: all 0.05s linear;
+  -ms-transition: all 0.05s linear;
+  transition: all 0.05s linear;
+  background: #fff;
+  border-radius: 3px 3px 0 0;
+}
+.flat .dijitTitlePaneTitleHover,
+.flat .dijitFieldsetTitleHover {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  background: #f2f2f2;
+  border-color: #d9d9d9;
+}
+.flat .dijitTitlePaneTitleActive,
+.flat .dijitFieldsetTitleActive {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+}
+.flat .dijitFieldset {
+  border-radius: 3px 3px 0 0;
+}
+.flat .dijitFieldset .dijitArrowNodeInner {
+  display: none;
+}
+.flat .dijitFieldset .dijitFieldsetTitleClosed .dijitArrowNode:before {
+  content: "\f006";
+}
+.flat .dijitTitlePane .dijitArrowNode,
+.flat .dijitFieldset .dijitArrowNode {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 18px;
+  text-align: center;
+}
+.flat .dijitTitlePane .dijitArrowNode:before,
+.flat .dijitFieldset .dijitArrowNode:before {
+  content: "\f007";
+}
+.flat .dijitTitlePane .dijitClosed,
+.flat .dijitFieldset .dijitClosed {
+  border-radius: 3px;
+}
+.flat .dijitTitlePane .dijitClosed .dijitArrowNode:before,
+.flat .dijitFieldset .dijitClosed .dijitArrowNode:before {
+  content: "\f006";
+}
+.flat .dijitTitlePaneContentOuter {
+  background-color: #fff;
+  border: 1px solid #9e9e9e;
+  border-top: none;
+  border-radius: 0 0 3px 3px;
+}
+.flat .dijitFieldset {
+  background-color: #fff;
+  border: 1px solid #9e9e9e;
+  border-radius: 3px;
+}
+.flat .dijitTitlePaneContentInner,
+.flat .dijitFieldsetContentInner {
+  padding: 8px;
+}
+.flat .dijitTitlePaneTextNode,
+.flat .dijitFieldsetLegendNode {
+  margin-left: 8px;
+  margin-right: 8px;
+  vertical-align: text-top;
+}
+.flat .dijitFieldsetLegendNode {
+  cursor: default;
+}
diff --git a/lib/flat/dijit/TitlePane.styl b/lib/flat/dijit/TitlePane.styl
new file mode 100755
index 000000000..78d9dab68
--- /dev/null
+++ b/lib/flat/dijit/TitlePane.styl
@@ -0,0 +1,110 @@
+/* TitlePane and Fieldset
+ *
+ * Styling TitlePane means styling the TitlePane title and its content container  (dijitTitlePane)
+ *
+ * TitlePane title:
+ * 1. TitlePane title (default styling):
+ * 		.dijitTitlePaneTitle - TitlePane's title div style: background-color, border
+ *
+ * 2. hovered TitlePane title (ie, mouse hover on a title bar)
+ * 		.dijitTitlePaneTitleHover - styles when mouse hover on the title div
+ *
+ * 3. active TitlePane title (ie, mouse down on a title bar)
+ * 		.dijitTitlePaneTitleActive - styles when mouse down on the title div
+ *
+ *
+ * TitlePane Content Container:
+ * 1. outer/inner container:
+ * 		.dijitTitlePaneContentOuter / dijitTitlePaneContentInner - styles for the content outer div
+ */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitTitlePaneTitle {
+		button-style();
+		if($titlepane-border-radius && $titlepane-border-radius >= 0) {
+			border-radius: $titlepane-border-radius $titlepane-border-radius 0 0;
+		}
+	}
+
+	.dijitTitlePaneTitleHover, .dijitFieldsetTitleHover {
+		button-hover-style();
+	}
+
+	.dijitTitlePaneTitleActive, .dijitFieldsetTitleActive {
+		button-active-style();
+	}
+
+	//.dijitTitlePaneTitleFocus {
+	//}
+
+	.dijitFieldset {
+		if($titlepane-border-radius && $titlepane-border-radius >= 0) {
+			border-radius: $titlepane-border-radius $titlepane-border-radius 0 0;
+		}
+
+		.dijitArrowNodeInner {
+			display: none;
+		}
+
+		.dijitFieldsetTitleClosed .dijitArrowNode:before {
+			content: $icon-expand;
+		}
+	}
+
+	.dijitTitlePane, .dijitFieldset {
+		.dijitArrowNode {
+			_icon-core-style();
+			font-size: $icon-expand-collapse-size;
+			text-align: center;
+			&:before {
+				content: $icon-collapse;
+			}
+		}
+
+		.dijitClosed {
+			if($titlepane-has-border-radius) {
+				border-radius: $titlepane-border-radius;
+			} else {
+				border-radius: 0;
+			}
+			.dijitArrowNode:before {
+				content: $icon-expand;
+			}
+		}
+	}
+
+	.dijitTitlePaneContentOuter {
+		background-color: $titlepane-content-background-color;
+		border: 1px solid $titlepane-content-border-color;
+		border-top: none;
+		if($titlepane-border-radius && $titlepane-border-radius >= 0) {
+			border-radius: 0 0 $titlepane-border-radius $titlepane-border-radius;
+		}
+	}
+
+	.dijitFieldset {
+		background-color: $titlepane-content-background-color;
+		border: 1px solid $titlepane-content-border-color;
+		if($titlepane-border-radius && $titlepane-border-radius >= 0) {
+			border-radius: $titlepane-border-radius;
+		}
+	}
+
+	.dijitTitlePaneContentInner, .dijitFieldsetContentInner {
+		padding: $titlepane-content-padding;
+	}
+
+	.dijitTitlePaneTextNode, .dijitFieldsetLegendNode {
+		margin-left: $padding*2;
+		margin-right: $padding*2;
+		vertical-align:text-top;
+	}
+
+	.dijitFieldsetLegendNode {
+		cursor: default;
+	}
+
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/TitlePane_rtl.css b/lib/flat/dijit/TitlePane_rtl.css
new file mode 100755
index 000000000..96a035f12
--- /dev/null
+++ b/lib/flat/dijit/TitlePane_rtl.css
@@ -0,0 +1,7 @@
+/* TitlePane */
+.flat .dijitTitlePaneRtl .dijitTitlePaneTitle {
+  text-align: right;
+}
+.flat .dijitTitlePaneRtl .dijitClosed .dijitArrowNode:before {
+  content: "\f006";
+}
diff --git a/lib/flat/dijit/TitlePane_rtl.styl b/lib/flat/dijit/TitlePane_rtl.styl
new file mode 100755
index 000000000..370179d86
--- /dev/null
+++ b/lib/flat/dijit/TitlePane_rtl.styl
@@ -0,0 +1,18 @@
+/* TitlePane */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitTitlePaneRtl {
+		.dijitTitlePaneTitle {
+			text-align: right;
+		}
+		.dijitClosed {
+			.dijitArrowNode:before {
+				content: $icon-expand;
+			}
+		}
+	}
+
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/Toolbar.css b/lib/flat/dijit/Toolbar.css
new file mode 100755
index 000000000..4d8c73961
--- /dev/null
+++ b/lib/flat/dijit/Toolbar.css
@@ -0,0 +1,137 @@
+/* Toolbar 
+ * 
+ * Styling Toolbar means styling the toolbar container and the widget inside toolbar  (dijitToolbar)
+ * 
+ * 1. toolbar (default styling): 
+ * 		.dijitToolbar - styles for outer container
+ *
+ * 2. widget inside toolbar
+ * 		.dijitToolbar .dijitButtonNode   - Button widget
+ * 					  .dijitComboButton  - ComboButton widget
+ * 					  .dijitDropDownButton  - DropDownButton widget
+ * 					  .dijitToggleButton  - ToggleButton widget
+ * 		
+ * 3. hovered widget inside toolbar (ie, mouse hover on the widget inside)
+ * 			.dijitToolbar .dijitButtonNodeHover  - styles for hovered Button widget
+ * 
+ * 4. actived widget inside toolbar (ie, mouse down on the widget inside)
+ * 			.dijitToolbar .dijitButtonNodeActive  - mouse down on Button widget
+ */
+.flat .dijitToolbar {
+  background-color: #f5f5f5;
+  padding: 4px;
+  zoom: 1;
+/* Override default button styles */
+/* Hover */
+/*
+		.dijitComboButtonHover {
+			.dijitButtonNode,
+			.dijitDownArrowButton {
+			}
+
+			.dijitButtonNodeHover,
+			.dijitDownArrowButtonHover {
+			}
+		}
+		*/
+/* Active */
+/* Toggle button checked status */
+}
+.flat .dijitToolbar label {
+  padding: 8px;
+}
+.flat .dijitToolbar .dijitToggleButton,
+.flat .dijitToolbar .dijitButton,
+.flat .dijitToolbar .dijitDropDownButton,
+.flat .dijitToolbar .dijitComboButton {
+  margin-right: 4px;
+}
+.flat .dijitToolbar .dijitButton .dijitButtonNode,
+.flat .dijitToolbar .dijitDropDownButton .dijitButtonNode,
+.flat .dijitToolbar .dijitComboButton .dijitButtonNode,
+.flat .dijitToolbar .dijitToggleButton .dijitButtonNode,
+.flat .dijitToolbar .dijitComboBox .dijitButtonNode {
+  border-color: transparent;
+  padding: 4px;
+  background-color: transparent;
+  border-radius: 3px;
+  -webkit-transition-property: background-color;
+  -moz-transition-property: background-color;
+  -o-transition-property: background-color;
+  -ms-transition-property: background-color;
+  transition-property: background-color;
+  -webkit-transition-duration: 0.3s;
+  -moz-transition-duration: 0.3s;
+  -o-transition-duration: 0.3s;
+  -ms-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+}
+.flat .dijitToolbar .dijitComboButton .dijitStretch {
+/* no rounded border on side adjacent to arrow */
+  border-radius: 3px 0 0 3px;
+}
+.flat .dijitToolbar .dijitComboButton .dijitArrowButton {
+/* no rounded border on side adjacent to button */
+  border-radius: 0 3px 3px 0;
+}
+.flat .dijitToolbar .dijitComboBox .dijitButtonNode {
+  padding: 0 8px;
+}
+.flat .dijitToolbar .dijitComboBox .dijitInputInner {
+  padding: 0;
+}
+.flat .dijitToolbar .dijitDropDownButton .dijitArrowButtonInner {
+  margin-left: 4px;
+}
+.flat .dijitToolbar .dijitButtonHover .dijitButtonNode,
+.flat .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
+.flat .dijitToolbar .dijitToggleButtonHover .dijitButtonNode,
+.flat .dijitToolbar .dijitComboButtonHover .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;
+  background: #f2f2f2;
+  border-color: #d9d9d9;
+  border: 1px solid #9e9e9e;
+}
+.flat .dijitToolbar .dijitButtonActive .dijitButtonNode,
+.flat .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode,
+.flat .dijitToolbar .dijitToggleButtonActive .dijitButtonNode {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+  border: 1px solid #9e9e9e;
+}
+.flat .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+  border: 1px solid #9e9e9e;
+}
+.flat .dijitToolbarSeparator {
+  width: 1px;
+  height: 20px;
+  background-color: #9e9e9e;
+  padding: 0;
+  margin: 0 4px;
+}
+.flat .dijitDisabled .dijitToolbar {
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #9e9e9e;
+}
diff --git a/lib/flat/dijit/Toolbar.styl b/lib/flat/dijit/Toolbar.styl
new file mode 100755
index 000000000..80710d313
--- /dev/null
+++ b/lib/flat/dijit/Toolbar.styl
@@ -0,0 +1,145 @@
+/* Toolbar 
+ * 
+ * Styling Toolbar means styling the toolbar container and the widget inside toolbar  (dijitToolbar)
+ * 
+ * 1. toolbar (default styling): 
+ * 		.dijitToolbar - styles for outer container
+ *
+ * 2. widget inside toolbar
+ * 		.dijitToolbar .dijitButtonNode   - Button widget
+ * 					  .dijitComboButton  - ComboButton widget
+ * 					  .dijitDropDownButton  - DropDownButton widget
+ * 					  .dijitToggleButton  - ToggleButton widget
+ * 		
+ * 3. hovered widget inside toolbar (ie, mouse hover on the widget inside)
+ * 			.dijitToolbar .dijitButtonNodeHover  - styles for hovered Button widget
+ * 
+ * 4. actived widget inside toolbar (ie, mouse down on the widget inside)
+ * 			.dijitToolbar .dijitButtonNodeActive  - mouse down on Button widget
+ */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+	
+	.dijitToolbar {
+		background-color: $toolbar-background-color;
+		padding: $toolbar-padding;
+		zoom: 1;
+
+		label {
+			padding: $toolbar-label-padding;
+		}
+
+		.dijitToggleButton, 
+		.dijitButton, 
+		.dijitDropDownButton,
+		.dijitComboButton {
+			margin-right: $toolbar-button-spacing;
+		}
+
+		/* Override default button styles */
+
+		.dijitButton .dijitButtonNode,
+		.dijitDropDownButton .dijitButtonNode,
+		.dijitComboButton .dijitButtonNode,
+		.dijitToggleButton .dijitButtonNode,
+		.dijitComboBox .dijitButtonNode {
+			border-color: $toolbar-button-border-color;
+			padding: $toolbar-button-padding;
+			background-color: $toolbar-button-background-color;
+			border-radius: $toolbar-button-border-radius;
+			transition-property: background-color;
+			transition-duration: .3s;
+		}
+
+		.dijitComboButton {
+			.dijitStretch {
+				/* no rounded border on side adjacent to arrow */
+				border-radius: $toolbar-button-border-radius 0 0 $toolbar-button-border-radius;
+			}
+			.dijitArrowButton {
+				/* no rounded border on side adjacent to button */
+				border-radius: 0 $toolbar-button-border-radius $toolbar-button-border-radius 0;
+			}
+		}
+
+		.dijitComboBox {
+			//width: 10em;
+			.dijitButtonNode {
+				padding: 0 $padding*2;
+			}
+			.dijitInputInner {
+				padding: 0;
+			}
+		}
+
+		.dijitDropDownButton .dijitArrowButtonInner {
+			margin-left: $padding;
+		}
+		
+		/* Hover */
+
+		.dijitButtonHover .dijitButtonNode,
+		.dijitDropDownButtonHover .dijitButtonNode,
+		.dijitToggleButtonHover .dijitButtonNode,
+		.dijitComboButtonHover .dijitButtonNode {
+			button-hover-style();
+			border: 1px solid $toolbar-hover-border-color;
+		}
+
+		/*
+		.dijitComboButtonHover {
+			.dijitButtonNode,
+			.dijitDownArrowButton {
+			}
+
+			.dijitButtonNodeHover,
+			.dijitDownArrowButtonHover {
+			}
+		}
+		*/
+
+		/* Active */
+		
+		.dijitButtonActive .dijitButtonNode,
+		.dijitDropDownButtonActive .dijitButtonNode,
+		.dijitToggleButtonActive .dijitButtonNode {
+			button-active-style();
+			border: 1px solid $toolbar-active-border-color;
+		}
+		// .dijitComboButtonActive {
+		// 	.dijitButtonNode,
+		// 	.dijitDownArrowButton {
+		// 	}
+		// 	.dijitButtonNodeActive {
+		// 	}
+		// 	.dijitDownArrowButtonActive {
+		// 	}
+		// }
+		
+		/* Toggle button checked status */
+		
+		.dijitToggleButtonChecked .dijitButtonNode {
+			button-active-style();
+			border: 1px solid $toolbar-active-border-color;
+		}
+	}
+
+	/* Separator */
+
+	.dijitToolbarSeparator {
+		width: $toolbar-separator-width;
+		height: $toolbar-separator-height;
+		background-color: $toolbar-separator-color;
+		padding: 0;
+		margin: $toolbar-separator-margin;
+	}
+
+	/* Toolbar inside of disabled Editor */
+	.dijitDisabled .dijitToolbar {
+		background-color: $toolbar-disabled-background-color;
+		border-bottom: 1px solid $toolbar-disabled-border-bottom-color;
+	}
+
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/Toolbar_rtl.css b/lib/flat/dijit/Toolbar_rtl.css
new file mode 100755
index 000000000..c9e6eb20a
--- /dev/null
+++ b/lib/flat/dijit/Toolbar_rtl.css
@@ -0,0 +1,11 @@
+.flat .dijitToolbar .dijitToggleButtonRtl,
+.flat .dijitToolbar .dijitButtonRtl,
+.flat .dijitToolbar .dijitDropDownButtonRtl,
+.flat .dijitToolbar .dijitComboButtonRtl {
+  margin-left: 4px;
+  margin-right: auto;
+}
+.flat .dijitToolbar .dijitDropDownButtonRtl .dijitArrowButtonInner {
+  margin-left: auto;
+  margin-right: 4px;
+}
diff --git a/lib/flat/dijit/Toolbar_rtl.styl b/lib/flat/dijit/Toolbar_rtl.styl
new file mode 100755
index 000000000..19e0ec8fe
--- /dev/null
+++ b/lib/flat/dijit/Toolbar_rtl.styl
@@ -0,0 +1,20 @@
+@import 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitToolbar {
+		.dijitToggleButtonRtl, 
+		.dijitButtonRtl, 
+		.dijitDropDownButtonRtl,
+		.dijitComboButtonRtl {
+			margin-left: $toolbar-button-spacing;
+			margin-right: auto;
+		}
+
+		.dijitDropDownButtonRtl .dijitArrowButtonInner {
+			margin-left: auto;
+			margin-right: $padding;
+		}
+	}
+
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/Tree.css b/lib/flat/dijit/Tree.css
new file mode 100755
index 000000000..7b3b16540
--- /dev/null
+++ b/lib/flat/dijit/Tree.css
@@ -0,0 +1,181 @@
+/* Tree
+ *
+ * Styling Tree mostly means styling the TreeRow (dijitTreeRow)
+ * There are 4 basic states to style:
+ *
+ * Tree Row:
+ * 1. tree row (default styling):
+ * 		.dijitTreeRow - styles for each row of the tree
+ *
+ * 2. hovered tree row (mouse hover on a tree row)
+ * 		.dijitTreeRowHover - styles when mouse over on one row
+ *
+ * 3. active tree row (mouse down on a tree row)
+ * 		.dijitTreeRowActive - styles when mouse down on one row
+ *
+ * 4. selected tree row
+ * 		dijitTreeRowSelected - style when the row has been selected
+ *
+ * Tree Expando:
+ * 	    dijitTreeExpando - the expando at the left of the text of each tree row
+ *
+ */
+.flat .dijitTreeIsRoot {
+  background-color: transparent;
+}
+.flat .dijitTreeRow,
+.flat .dijitTreeNode .dojoDndItemBefore,
+.flat .dijitTreeNode .dojoDndItemAfter {
+  padding: 8px 0;
+  border: 0 transparent;
+  line-height: 20px;
+  -webkit-transition-property: background-color;
+  -moz-transition-property: background-color;
+  -o-transition-property: background-color;
+  -ms-transition-property: background-color;
+  transition-property: background-color;
+  -webkit-transition-duration: 0.15s;
+  -moz-transition-duration: 0.15s;
+  -o-transition-duration: 0.15s;
+  -ms-transition-duration: 0.15s;
+  transition-duration: 0.15s;
+  -webkit-transition-timing-function: ease-out;
+  -moz-transition-timing-function: ease-out;
+  -o-transition-timing-function: ease-out;
+  -ms-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+}
+.flat .dijitTreeRowHover {
+  background-color: #f2f2f2;
+  border-color: transparent;
+  -webkit-transition-duration: 0.15s;
+  -moz-transition-duration: 0.15s;
+  -o-transition-duration: 0.15s;
+  -ms-transition-duration: 0.15s;
+  transition-duration: 0.15s;
+}
+.flat .dijitTreeRowActive {
+  background-color: #f2f2f2;
+  border-color: transparent;
+}
+.flat .dijitTreeRowSelected,
+.flat .dijitTreeRowHover.dijitTreeRowSelected,
+.flat .dijitTreeRowActive.dijitTreeRowSelected {
+  color: #fff;
+  background-color: #2196f3;
+  border-color: transparent;
+}
+.flat .dijitTreeRowSelected .dijitTreeExpando,
+.flat .dijitTreeRowHover.dijitTreeRowSelected .dijitTreeExpando,
+.flat .dijitTreeRowActive.dijitTreeRowSelected .dijitTreeExpando {
+  color: #fff;
+}
+.flat .dijitTreeExpando {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  text-align: center;
+  margin-left: 4px;
+  margin-right: 4px;
+  color: #2196f3;
+  vertical-align: middle;
+}
+.flat .dijitTreeExpandoOpened:before {
+  content: "\f012";
+  cursor: pointer;
+}
+.flat .dijitTreeExpandoClosed:before {
+  content: "\f011";
+}
+.flat .dijitTreeExpandoLoading {
+  -webkit-animation: spinning 2s linear infinite;
+  -moz-animation: spinning 2s linear infinite;
+  -o-animation: spinning 2s linear infinite;
+  -ms-animation: spinning 2s linear infinite;
+  animation: spinning 2s linear infinite;
+}
+.flat .dijitTreeExpandoLoading:before {
+  content: "\f01d";
+}
+.dj_ie8 .dijitTreeExpandoLoading,
+.dj_ie9 .dijitTreeExpandoLoading {
+  background: url("images/loadingAnimation.gif") no-repeat;
+}
+.dj_ie8 .dijitTreeExpandoLoading:before,
+.dj_ie9 .dijitTreeExpandoLoading:before {
+  content: "";
+}
+@-moz-keyframes spinning {
+  from {
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -o-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+  }
+  to {
+    -webkit-transform: rotate(-360deg);
+    -moz-transform: rotate(-360deg);
+    -o-transform: rotate(-360deg);
+    -ms-transform: rotate(-360deg);
+    transform: rotate(-360deg);
+  }
+}
+@-webkit-keyframes spinning {
+  from {
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -o-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+  }
+  to {
+    -webkit-transform: rotate(-360deg);
+    -moz-transform: rotate(-360deg);
+    -o-transform: rotate(-360deg);
+    -ms-transform: rotate(-360deg);
+    transform: rotate(-360deg);
+  }
+}
+@-o-keyframes spinning {
+  from {
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -o-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+  }
+  to {
+    -webkit-transform: rotate(-360deg);
+    -moz-transform: rotate(-360deg);
+    -o-transform: rotate(-360deg);
+    -ms-transform: rotate(-360deg);
+    transform: rotate(-360deg);
+  }
+}
+@keyframes spinning {
+  from {
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -o-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+  }
+  to {
+    -webkit-transform: rotate(-360deg);
+    -moz-transform: rotate(-360deg);
+    -o-transform: rotate(-360deg);
+    -ms-transform: rotate(-360deg);
+    transform: rotate(-360deg);
+  }
+}
diff --git a/lib/flat/dijit/Tree.styl b/lib/flat/dijit/Tree.styl
new file mode 100755
index 000000000..d5507da87
--- /dev/null
+++ b/lib/flat/dijit/Tree.styl
@@ -0,0 +1,122 @@
+/* Tree
+ *
+ * Styling Tree mostly means styling the TreeRow (dijitTreeRow)
+ * There are 4 basic states to style:
+ *
+ * Tree Row:
+ * 1. tree row (default styling):
+ * 		.dijitTreeRow - styles for each row of the tree
+ *
+ * 2. hovered tree row (mouse hover on a tree row)
+ * 		.dijitTreeRowHover - styles when mouse over on one row
+ *
+ * 3. active tree row (mouse down on a tree row)
+ * 		.dijitTreeRowActive - styles when mouse down on one row
+ *
+ * 4. selected tree row
+ * 		dijitTreeRowSelected - style when the row has been selected
+ *
+ * Tree Expando:
+ * 	    dijitTreeExpando - the expando at the left of the text of each tree row
+ *
+ */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitTreeIsRoot {
+	    background-color: $tree-background-color;
+	}
+
+	.dijitTreeRow,
+	.dijitTreeNode .dojoDndItemBefore,
+	.dijitTreeNode .dojoDndItemAfter {
+		padding: $tree-row-padding;
+		border: 0 $tree-row-border-color;
+		line-height: $tree-row-line-height;
+		transition-property: background-color;
+		transition-duration: .15s;
+		transition-timing-function: ease-out;
+	}
+
+	/* Hover */
+
+	.dijitTreeRowHover {
+		background-color: $tree-row-hover-background-color;
+		border-color: $tree-row-hover-border-color;
+		transition-duration: .15s;
+	}
+
+	/* Active */
+
+	.dijitTreeRowActive {
+		background-color:$tree-row-active-background-color;
+		border-color: $tree-row-active-border-color;
+	}
+
+	/* Selected */
+
+	.dijitTreeRowSelected,
+	.dijitTreeRowHover.dijitTreeRowSelected,
+	.dijitTreeRowActive.dijitTreeRowSelected {
+		color: $tree-row-selected-text-color;
+		background-color: $tree-row-selected-background-color;
+		border-color: $tree-row-selected-border-color;
+		.dijitTreeExpando {
+			color: $tree-expando-icon-selected-color;
+		}
+	}
+
+	/* Focused */
+
+	/*
+	.dijitTreeRowFocused {
+	}
+	*/
+
+	/* expando (open/closed) icon */
+
+	.dijitTreeExpando {
+		_icon-core-style();
+	    width: $tree-expando-icon-width;
+	    height: $tree-expando-icon-height;
+		line-height: @height;
+		text-align: center;
+		margin-left: $tree-expando-margin;
+		margin-right: $tree-expando-margin;
+		color: $tree-expando-icon-color;
+		vertical-align: middle;
+	}
+
+	.dijitTreeExpandoOpened:before {
+		content: "\f012";
+		cursor: pointer;
+	}
+
+	.dijitTreeExpandoClosed:before {
+		content: "\f011";
+	}
+
+	.dijitTreeExpandoLoading {
+		animation: spinning 2s linear infinite;
+		&:before {
+			content: "\f01d";
+
+		}
+	}
+}
+
+.dj_ie8 .dijitTreeExpandoLoading,
+.dj_ie9 .dijitTreeExpandoLoading {
+	background:url('images/loadingAnimation.gif') no-repeat;
+
+	&:before {
+		content: "";
+	}
+}
+
+@keyframes spinning {
+	from {transform: rotate(0);}
+    to {transform: rotate(-360deg);}
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/Tree_rtl.css b/lib/flat/dijit/Tree_rtl.css
new file mode 100644
index 000000000..88f882988
--- /dev/null
+++ b/lib/flat/dijit/Tree_rtl.css
@@ -0,0 +1,9 @@
+.flat .dijitTreeRtl {
+  text-align: right;
+}
+.flat .dijitTreeRtl .dijitTreeContainer {
+  float: right;
+}
+.flat .dijitTreeRtl .dijitTreeExpandoClosed:before {
+  content: "\e60b";
+}
diff --git a/lib/flat/dijit/Tree_rtl.styl b/lib/flat/dijit/Tree_rtl.styl
new file mode 100644
index 000000000..adc066402
--- /dev/null
+++ b/lib/flat/dijit/Tree_rtl.styl
@@ -0,0 +1,16 @@
+@import 'dijit_variables';
+
+.{$theme-name} {
+	
+	.dijitTreeRtl  {
+		text-align: right;
+			
+		.dijitTreeContainer {
+			float: right;	
+		}
+		.dijitTreeExpandoClosed:before {
+			content: "\e60b";
+		}
+	}
+
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/dijit_variables.styl b/lib/flat/dijit/dijit_variables.styl
new file mode 100644
index 000000000..fc9e60b6d
--- /dev/null
+++ b/lib/flat/dijit/dijit_variables.styl
@@ -0,0 +1,361 @@
+/* dijit/* variables */
+
+@import '../variables';
+
+/* Common (Common.styl) */
+
+// Popup (Dropdowns and Tooltip Dialogs)
+$popup-border-radius = $border-radius;
+$popup-box-shadow = $shadow-depth2;
+
+/* Dialog, Tooltip, TooltipDialog */
+
+// Dialog
+$dialog-background-color = $theme-base-color;
+$dialog-border-color = $border-color;
+$dialog-padding = $padding * 2;
+$dialog-border-radius = $border-radius;
+$dialog-box-shadow = $shadow-depth2;
+
+// content pane
+$dialog-content-bg-color = $theme-base-color;
+
+// title bar
+$dialog-titlebar-border-color = $grey-light;
+$dialog-titlebar-font-size = 1.1em;
+
+// close icon
+$dialog-close-icon = "\f00e";
+$dialog-close-icon-size = 20px;
+
+// underlay
+$dialog-underlay-color = $black;
+$dialog-underlay-opacity = 0.65;
+
+// Tooltip Dialog connector (arrow)
+$dialog-arrow-thickness = 6px;
+$dialog-arrow-border-color = $border-color;
+$dialog-arrow-background-color = $dialog-background-color;
+
+// Tooltip
+$tooltip-background-color = $grey-dark;
+$tooltip-text-color = $theme-base-color;
+$tooltip-padding = $padding;
+$tooltip-border = 0 none;
+$tooltip-border-radius = $border-radius;
+$tooltip-opacity = 1;
+
+// tooltip connector (arrow)
+$tooltip-arrow-color = $tooltip-background-color;
+$tooltip-arrow-thickness = 4px;
+
+/* Menu */
+
+$menu-background-color = $theme-base-color;
+$menu-border-color = $border-color;
+$menu-padding = $padding * 2;
+$menu-border-radius = $border-radius;
+
+// MenuItem
+$menu-item-padding = $padding * 2;
+
+// hover
+$menu-item-hovered-text-color = $theme-base-color;
+$menu-item-hovered-background-color = $theme-base;
+
+// active
+$menu-item-active-text-color = $theme-base-color;
+$menu-item-active-background-color = $theme-base;
+
+// selected
+$menu-item-selected-text-color = $theme-base-color;
+$menu-item-selected-background-color = $theme-base;
+
+// disabled
+$menu-item-disabled-text-color = $disabled-color;
+
+// disabled hover
+$menu-item-disabled-hovered-text-color = darken($menu-item-hovered-text-color, 5%);
+$menu-item-disabled-hovered-background-color = lighten($menu-item-hovered-background-color, 35%);
+
+// separator
+$menu-item-separator-top-color = $border-color;
+$menu-item-separator-bottom-color = transparent;
+
+// icon
+$menu-item-icon-padding = $padding;
+$menu-item-icon-margin = $margin;
+$menu-item-icon = $icon-drop-right;
+$menu-item-icon-rtl = $icon-drop-left;
+
+// Menubar
+$menubar-background-color = $grey-lighter;
+$menubar-item-padding = $padding * 2 $padding * 3;
+
+// hover
+$menubar-item-hover-color = $theme-base-color;
+$menubar-item-hover-background-color = $theme-base;
+
+// active
+$menubar-item-active-color = $theme-base-color;
+$menubar-item-active-background-color = $theme-base;
+
+// selected
+$menubar-item-selected-text-color = $theme-base-color;
+$menubar-item-selected-background-color = $theme-base;
+
+// Menubar dropdown (Popup)
+$menubar-popup-item-padding = $menu-item-padding;
+
+/* Calendar */
+
+$calendar-background-color = $theme-base-color;
+$calendar-border-color = $border-color;
+$calendar-padding = $padding;
+$calendar-border-radius = $border-radius;
+$calendar-box-shadow = $shadow-depth2;
+
+// day
+// the "S, M, T, W, T, F, S"
+$calendar-day-cell-font-weight = bold;
+$calendar-day-cell-padding = $padding;
+
+// date
+$calendar-date-cell-padding = $padding * 0.5 $padding;
+$calendar-date-font-size = 0.9em;
+$calendar-date-cell-prev-next-month-text-color = lighten($grey-dark, 50);
+$calendar-date-cell-border-radius = 50%;
+$calendar-date-cell-current-border-color = $theme-base;
+
+// hover 
+$calendar-date-cell-hovered-background-color = darken($theme-base-color, 5%);
+
+// active 
+$calendar-date-cell-active-background-color = darken($theme-base-color, 10%);
+
+// selected 
+$calendar-date-cell-selected-background-color = $theme-base;
+$calendar-date-cell-selected-text-color = $theme-base-color;
+
+// year
+$calendar-year-cell-padding = $padding;
+$calendar-year-font-size = 1.15em;
+$calendar-year-prev-next-year-font-size = 0.9em;
+$calendar-year-prev-current-year-text-color = $theme-base;
+$calendar-year-prev-next-year-text-color = $calendar-year-prev-current-year-text-color;
+
+// month dropdown
+$calendar-month-dropdown-menu-padding = $padding * 2;
+$calendar-month-dropdown-menu-item-padding = $padding;
+
+// hover
+$calendar-month-dropdown-menu-item-hovered-text-color = $menu-item-hovered-text-color;
+$calendar-month-dropdown-menu-item-hovered-background-color = $menu-item-hovered-background-color;
+
+// icons (swapped for rtl)
+$calendar-icon-decrease = $icon-drop-left;
+$calendar-icon-increase = $icon-drop-right;
+$calendar-icon-size = 24px;
+
+/* Color Palette */
+
+$colorpalette-background-color = $theme-base-color;
+$colorpalette-padding = $padding;
+$colorpalette-border-color = $border-color;
+$colorpalette-border-radius = $border-radius;
+
+// Swatch
+$colorpalette-swatch-width = 15px;
+$colorpalette-swatch-height = 15px;
+$colorpalette-swatch-border-color = transparent;
+$colorpalette-swatch-radius = 2px;
+
+// Hover
+$colorpalette-swatch-hover-border-color = $border-color;
+$colorpalette-swatch-hover-box-shadow = none;
+
+// Active, Selected
+$colorpalette-swatch-selected-border-color = $theme-base;
+$colorpalette-swatch-selected-box-shadow = $shadow-depth1;
+
+/* Editor */
+
+$editor-background-color = $theme-base-color;
+$editor-border-color = $border-color;
+$editor-border-radius =$border-radius;
+
+// Iframe container
+$editor-iframe-padding = $padding $padding * 2;
+$editor-iframe-border-color = transparent;
+
+// Hover
+$editor-iframe-hover-border-color = $theme-base;
+
+// Focused
+$editor-iframe-focused-border-color = $theme-base;
+
+// Disabled
+$editor-disabled-border-color = $border-color;
+$editor-iframe-disabled-border-color = transparent;
+$editor-iframe-disabled-background-color = $disabled-background-color;
+
+/* Progress Bar */
+
+// Colors
+$progress-bar-color = $theme-base;
+$progress-bar-alternative-colors = {
+	alt-primary: $primary,
+	alt-success: $success,
+	alt-info: $info,
+	alt-warning: $warning,
+	alt-danger: $danger,
+	alt-inverse: $inverse
+};
+
+$progress-bar-empty-color = $grey-light;
+$progress-bar-border-radius = $border-radius;
+$progress-bar-strips-image-url = "images/progressBarStrips.png";
+
+// label
+$progress-bar-text-color = $theme-base-color;
+$progress-bar-font-size = 1em;
+$progress-bar-text-shadow = (1em / 10) (1em / 10) 1px $grey-dark;
+
+/* Toolbar */
+
+$toolbar-background-color = $grey-lighter;
+$toolbar-padding = $padding;
+
+// Button (Override default djitButton styles)
+$toolbar-button-border-color = transparent;
+$toolbar-button-padding = $padding;
+$toolbar-button-background-color = transparent;
+$toolbar-button-border-radius = $border-radius;
+$toolbar-button-spacing = $padding;
+
+// Label
+$toolbar-label-padding = $padding*2;
+
+// Separator
+$toolbar-separator-width = 1px;
+$toolbar-separator-height = 20px;
+$toolbar-separator-color = $border-color;
+$toolbar-separator-margin = 0 $margin;
+
+// Hover
+$toolbar-hover-border-color = $border-color;
+
+// Active
+$toolbar-active-border-color = $border-color;
+
+// Disabled
+$toolbar-disabled-background-color = $toolbar-background-color;
+$toolbar-disabled-border-bottom-color = $border-color;
+
+/* Tree */
+
+$tree-background-color = transparent;
+
+// Tree row
+// normal
+$tree-row-padding = $padding * 2 0;
+$tree-row-border-color = transparent;
+$tree-row-line-height = $line-height;
+
+// hover
+$tree-row-hover-background-color = darken($theme-base-color, 5%);
+$tree-row-hover-border-color = $tree-row-border-color;
+
+// active
+$tree-row-active-padding = $tree-row-padding;
+$tree-row-active-background-color = darken($theme-base-color, 5%);
+$tree-row-active-border-color = $tree-row-border-color;
+
+// selected
+$tree-row-selected-background-color = $theme-base;
+$tree-row-selected-border-color = $tree-row-border-color;
+$tree-row-selected-text-color = $theme-base-color;
+
+// expando
+$tree-expando-icon-width = $icon-size;
+$tree-expando-icon-height = $icon-size;
+$tree-expando-icon-color = $theme-base;
+$tree-expando-margin = $margin;
+
+// expando selected
+$tree-expando-icon-selected-color = $theme-base-color;
+
+/* Time Picker */
+
+// normal
+$timepicker-background-color = $theme-base-color;
+$timepicker-padding = $padding 0;
+$timepicker-border-color = $border-color;
+$timepicker-border-radius = $border-radius;
+$timepicker-box-shadow = $shadow-depth2;
+$timepicker-item-padding = $padding * 2;
+
+// tick (minor values)
+$timepicker-tick-text-color = $grey;
+
+// marker (major values)
+$timepicker-marker-background-color = transparent;
+
+// hover
+$timepicker-item-hovered-text-color = $grey-dark;
+$timepicker-item-hovered-background-color = darken($theme-base-color, 5%);
+
+// selected
+$timepicker-item-selected-text-color = $grey-dark;
+$timepicker-item-selected-background-color = darken($theme-base-color, 5%);
+
+/* Title Pane */
+
+$titlepane-highlight-color = $theme-base;
+$titlepane-has-border-radius = true;
+$titlepane-border-radius = $border-radius;
+
+// Content Pane
+$titlepane-content-background-color = $theme-base-color;
+$titlepane-content-border-color = $border-color;
+$titlepane-content-padding = $padding * 2;
+
+// icons
+// uses common vars directly
+
+/* Inline Edit Box */
+
+$inlineeditbox-border-color = transparent;
+$inlineeditbox-padding = $padding $padding + 2px;
+$inlineeditbox-border-radius =$input-border-radius;
+
+// hover
+$inlineeditbox-hover-background-color = transparent;
+$inlineeditbox-hover-border-color = $theme-base;
+
+/* DND */
+
+$dnd-item-border-color = transparent;
+
+// hover
+$dnd-hover-background-color = $grey-lighter;
+$dnd-hover-border-radius = $border-radius;
+
+// anchor
+$dnd-anchor-background-color = transparent;
+$dnd-anchor-border-color = $theme-base;
+$dnd-anchor-border-radius = $border-radius;
+
+// insert indicator color
+$dnd-avatar-item-insert-indicator-color = $theme-base;
+
+// avatar
+// item
+$dnd-avatar-item-background-color = $theme-base-color;
+$dnd-avatar-item-padding = $padding $padding * 2;
+$dnd-avatar-item-border-radius = $border-radius;
+$dnd-avatar-item-box-shadow = $shadow-depth2;
+
+// icons
+$dnd-icon-drop = "\f008";
+$dnd-icon-no-drop = "\f01c";
diff --git a/lib/flat/dijit/form/Button.css b/lib/flat/dijit/form/Button.css
new file mode 100644
index 000000000..f88271f84
--- /dev/null
+++ b/lib/flat/dijit/form/Button.css
@@ -0,0 +1,646 @@
+/* Button | DropDownButton | ComboButton | ToggleButton
+ * 
+ * Styling Buttons mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitButton
+ * 		.dijitDropDownButton
+ * 		.dijitComboButton
+ * 		.dijitButtonNode - common button/arrow wrapper shared across all three button types 
+ *
+ * 2. Button text
+ * 		.dijitButtonText
+ * 
+ * 3. Arrows - only for DropDownButton and ComboButton
+ * 	     There are total four directions arrows - down, left, right, up:
+ * 		.dijitArrowButtonInner - down arrow by default
+ *      .dijitLeftArrowButton .dijitArrowButtonInner - left arrow
+ *      .dijitRightArrowButton .dijitArrowButtonInner - right arrow
+ *      .dijitUpArrowButton .dijitArrowButtonInner - up arrow
+ * 
+ * 4. States - Hover, Active, Disabled, e.g.
+ * 		.dijitButtonHover .dijitButtonNode
+ * 		.dijitButtonActive .dijitButtonNode
+ * 		.dijitButtonDisabled .dijitButtonNode
+ *      
+ *      .dijitDisabled .dijitArrowButtonInner  - disabled arrow states 
+ */
+.flat .dijitButtonText {
+  padding: 0 4px;
+  text-align: center;
+}
+.flat .dijitButton .dijitButtonNode,
+.flat .dijitDropDownButton .dijitButtonNode,
+.flat .dijitComboButton .dijitButtonNode,
+.flat .dijitToggleButton .dijitButtonNode {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #9e9e9e;
+  padding: 4px;
+  border-radius: 3px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-transition: all 0.05s linear;
+  -moz-transition: all 0.05s linear;
+  -o-transition: all 0.05s linear;
+  -ms-transition: all 0.05s linear;
+  transition: all 0.05s linear;
+  background: #fff;
+}
+.flat .dijitButton.alt-primary .dijitButtonNode,
+.flat .dijitDropDownButton.alt-primary .dijitButtonNode,
+.flat .dijitComboButton.alt-primary .dijitButtonNode,
+.flat .dijitToggleButton.alt-primary .dijitButtonNode,
+.flat .dijitComboBox.alt-primary .dijitButtonNode,
+.flat .dijitSelect.alt-primary .dijitButtonContents,
+.flat .dijitSelect.alt-primary .dijitButtonNode,
+.flat .dijitSpinner.alt-primary .dijitArrowButton {
+  background: #1e88e5;
+  color: #fff;
+  border-color: #166fbd;
+}
+.flat .dijitComboButton.alt-primary .dijitStretch {
+  border-right-color: #166fbd;
+}
+.flat .dijitComboButtonRtl.alt-primary .dijitStretch {
+  border-left-color: #166fbd;
+}
+.flat .dijitButton.alt-success .dijitButtonNode,
+.flat .dijitDropDownButton.alt-success .dijitButtonNode,
+.flat .dijitComboButton.alt-success .dijitButtonNode,
+.flat .dijitToggleButton.alt-success .dijitButtonNode,
+.flat .dijitComboBox.alt-success .dijitButtonNode,
+.flat .dijitSelect.alt-success .dijitButtonContents,
+.flat .dijitSelect.alt-success .dijitButtonNode,
+.flat .dijitSpinner.alt-success .dijitArrowButton {
+  background: #43a047;
+  color: #fff;
+  border-color: #37823a;
+}
+.flat .dijitComboButton.alt-success .dijitStretch {
+  border-right-color: #37823a;
+}
+.flat .dijitComboButtonRtl.alt-success .dijitStretch {
+  border-left-color: #37823a;
+}
+.flat .dijitButton.alt-info .dijitButtonNode,
+.flat .dijitDropDownButton.alt-info .dijitButtonNode,
+.flat .dijitComboButton.alt-info .dijitButtonNode,
+.flat .dijitToggleButton.alt-info .dijitButtonNode,
+.flat .dijitComboBox.alt-info .dijitButtonNode,
+.flat .dijitSelect.alt-info .dijitButtonContents,
+.flat .dijitSelect.alt-info .dijitButtonNode,
+.flat .dijitSpinner.alt-info .dijitArrowButton {
+  background: #03a9f4;
+  color: #fff;
+  border-color: #028ac7;
+}
+.flat .dijitComboButton.alt-info .dijitStretch {
+  border-right-color: #028ac7;
+}
+.flat .dijitComboButtonRtl.alt-info .dijitStretch {
+  border-left-color: #028ac7;
+}
+.flat .dijitButton.alt-warning .dijitButtonNode,
+.flat .dijitDropDownButton.alt-warning .dijitButtonNode,
+.flat .dijitComboButton.alt-warning .dijitButtonNode,
+.flat .dijitToggleButton.alt-warning .dijitButtonNode,
+.flat .dijitComboBox.alt-warning .dijitButtonNode,
+.flat .dijitSelect.alt-warning .dijitButtonContents,
+.flat .dijitSelect.alt-warning .dijitButtonNode,
+.flat .dijitSpinner.alt-warning .dijitArrowButton {
+  background: #fb8c00;
+  color: #fff;
+  border-color: #cd7200;
+}
+.flat .dijitComboButton.alt-warning .dijitStretch {
+  border-right-color: #cd7200;
+}
+.flat .dijitComboButtonRtl.alt-warning .dijitStretch {
+  border-left-color: #cd7200;
+}
+.flat .dijitButton.alt-danger .dijitButtonNode,
+.flat .dijitDropDownButton.alt-danger .dijitButtonNode,
+.flat .dijitComboButton.alt-danger .dijitButtonNode,
+.flat .dijitToggleButton.alt-danger .dijitButtonNode,
+.flat .dijitComboBox.alt-danger .dijitButtonNode,
+.flat .dijitSelect.alt-danger .dijitButtonContents,
+.flat .dijitSelect.alt-danger .dijitButtonNode,
+.flat .dijitSpinner.alt-danger .dijitArrowButton {
+  background: #e53935;
+  color: #fff;
+  border-color: #cc1e1a;
+}
+.flat .dijitComboButton.alt-danger .dijitStretch {
+  border-right-color: #cc1e1a;
+}
+.flat .dijitComboButtonRtl.alt-danger .dijitStretch {
+  border-left-color: #cc1e1a;
+}
+.flat .dijitButton.alt-inverse .dijitButtonNode,
+.flat .dijitDropDownButton.alt-inverse .dijitButtonNode,
+.flat .dijitComboButton.alt-inverse .dijitButtonNode,
+.flat .dijitToggleButton.alt-inverse .dijitButtonNode,
+.flat .dijitComboBox.alt-inverse .dijitButtonNode,
+.flat .dijitSelect.alt-inverse .dijitButtonContents,
+.flat .dijitSelect.alt-inverse .dijitButtonNode,
+.flat .dijitSpinner.alt-inverse .dijitArrowButton {
+  background: #616161;
+  color: #fff;
+  border-color: #4f4f4f;
+}
+.flat .dijitComboButton.alt-inverse .dijitStretch {
+  border-right-color: #4f4f4f;
+}
+.flat .dijitComboButtonRtl.alt-inverse .dijitStretch {
+  border-left-color: #4f4f4f;
+}
+.flat .dijitButtonHover .dijitButtonNode,
+.flat .dijitDropDownButtonHover .dijitButtonNode,
+.flat .dijitToggleButtonHover .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;
+  background: #f2f2f2;
+  border-color: #d9d9d9;
+}
+.flat .dijitComboButton .dijitButtonNodeHover,
+.flat .dijitComboButton .dijitDownArrowButtonHover {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  background: #f2f2f2;
+  border-color: #d9d9d9;
+}
+.flat .dijitButtonHover.alt-primary .dijitButtonNode,
+.flat .dijitDropDownButtonHover.alt-primary .dijitButtonNode,
+.flat .dijitComboButton.alt-primary .dijitButtonNodeHover,
+.flat .dijitComboButton.alt-primary .dijitDownArrowButtonHover,
+.flat .dijitToggleButtonHover.alt-primary .dijitButtonNode,
+.flat .dijitComboBoxHover.alt-primary .dijitButtonNode,
+.flat .dijitSelectHover.alt-primary .dijitButtonContents,
+.flat .dijitSelectHover.alt-primary .dijitButtonNode,
+.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitArrowButton,
+.flat .dijitSpinner.alt-primary .dijitUpArrowButtonHover,
+.flat .dijitSpinner.alt-primary .dijitDownArrowButtonHover {
+  background: #1981dd;
+  border-color: #1774c5;
+}
+.flat .dijitButtonHover.alt-success .dijitButtonNode,
+.flat .dijitDropDownButtonHover.alt-success .dijitButtonNode,
+.flat .dijitComboButton.alt-success .dijitButtonNodeHover,
+.flat .dijitComboButton.alt-success .dijitDownArrowButtonHover,
+.flat .dijitToggleButtonHover.alt-success .dijitButtonNode,
+.flat .dijitComboBoxHover.alt-success .dijitButtonNode,
+.flat .dijitSelectHover.alt-success .dijitButtonContents,
+.flat .dijitSelectHover.alt-success .dijitButtonNode,
+.flat .dijitSelect.dijitSelectOpened.alt-success .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-success .dijitArrowButton,
+.flat .dijitSpinner.alt-success .dijitUpArrowButtonHover,
+.flat .dijitSpinner.alt-success .dijitDownArrowButtonHover {
+  background: #409843;
+  border-color: #39883c;
+}
+.flat .dijitButtonHover.alt-info .dijitButtonNode,
+.flat .dijitDropDownButtonHover.alt-info .dijitButtonNode,
+.flat .dijitComboButton.alt-info .dijitButtonNodeHover,
+.flat .dijitComboButton.alt-info .dijitDownArrowButtonHover,
+.flat .dijitToggleButtonHover.alt-info .dijitButtonNode,
+.flat .dijitComboBoxHover.alt-info .dijitButtonNode,
+.flat .dijitSelectHover.alt-info .dijitButtonContents,
+.flat .dijitSelectHover.alt-info .dijitButtonNode,
+.flat .dijitSelect.dijitSelectOpened.alt-info .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-info .dijitArrowButton,
+.flat .dijitSpinner.alt-info .dijitUpArrowButtonHover,
+.flat .dijitSpinner.alt-info .dijitDownArrowButtonHover {
+  background: #03a1e8;
+  border-color: #0390cf;
+}
+.flat .dijitButtonHover.alt-warning .dijitButtonNode,
+.flat .dijitDropDownButtonHover.alt-warning .dijitButtonNode,
+.flat .dijitComboButton.alt-warning .dijitButtonNodeHover,
+.flat .dijitComboButton.alt-warning .dijitDownArrowButtonHover,
+.flat .dijitToggleButtonHover.alt-warning .dijitButtonNode,
+.flat .dijitComboBoxHover.alt-warning .dijitButtonNode,
+.flat .dijitSelectHover.alt-warning .dijitButtonContents,
+.flat .dijitSelectHover.alt-warning .dijitButtonNode,
+.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitArrowButton,
+.flat .dijitSpinner.alt-warning .dijitUpArrowButtonHover,
+.flat .dijitSpinner.alt-warning .dijitDownArrowButtonHover {
+  background: #ee8500;
+  border-color: #d57700;
+}
+.flat .dijitButtonHover.alt-danger .dijitButtonNode,
+.flat .dijitDropDownButtonHover.alt-danger .dijitButtonNode,
+.flat .dijitComboButton.alt-danger .dijitButtonNodeHover,
+.flat .dijitComboButton.alt-danger .dijitDownArrowButtonHover,
+.flat .dijitToggleButtonHover.alt-danger .dijitButtonNode,
+.flat .dijitComboBoxHover.alt-danger .dijitButtonNode,
+.flat .dijitSelectHover.alt-danger .dijitButtonContents,
+.flat .dijitSelectHover.alt-danger .dijitButtonNode,
+.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitArrowButton,
+.flat .dijitSpinner.alt-danger .dijitUpArrowButtonHover,
+.flat .dijitSpinner.alt-danger .dijitDownArrowButtonHover {
+  background: #e32d29;
+  border-color: #d4201b;
+}
+.flat .dijitButtonHover.alt-inverse .dijitButtonNode,
+.flat .dijitDropDownButtonHover.alt-inverse .dijitButtonNode,
+.flat .dijitComboButton.alt-inverse .dijitButtonNodeHover,
+.flat .dijitComboButton.alt-inverse .dijitDownArrowButtonHover,
+.flat .dijitToggleButtonHover.alt-inverse .dijitButtonNode,
+.flat .dijitComboBoxHover.alt-inverse .dijitButtonNode,
+.flat .dijitSelectHover.alt-inverse .dijitButtonContents,
+.flat .dijitSelectHover.alt-inverse .dijitButtonNode,
+.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitArrowButton,
+.flat .dijitSpinner.alt-inverse .dijitUpArrowButtonHover,
+.flat .dijitSpinner.alt-inverse .dijitDownArrowButtonHover {
+  background: #5c5c5c;
+  border-color: #525252;
+}
+.flat .dijitButtonActive .dijitButtonNode,
+.flat .dijitDropDownButtonActive .dijitButtonNode,
+.flat .dijitToggleButtonActive .dijitButtonNode,
+.flat .dijitToggleButtonChecked .dijitButtonNode {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+}
+.flat .dijitComboButton .dijitButtonNodeActive,
+.flat .dijitComboButton .dijitDownArrowButtonActive {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+}
+.flat .dijitButtonActive.alt-primary .dijitButtonNode,
+.flat .dijitDropDownButtonActive.alt-primary .dijitButtonNode,
+.flat .dijitComboButton.alt-primary .dijitButtonNodeActive,
+.flat .dijitToggleButtonActive.alt-primary .dijitButtonNode,
+.flat .dijitComboBoxActive.alt-primary .dijitButtonNode,
+.flat .dijitSelectActive.alt-primary .dijitButtonContents,
+.flat .dijitSelectActive.alt-primary .dijitArrowButton,
+.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitArrowButton,
+.flat .dijitComboBox.alt-primary .dijitButtonNode.dijitHasDropDownOpen,
+.flat .dijitSpinner.alt-primary .dijitUpArrowButtonActive,
+.flat .dijitSpinner.alt-primary .dijitDownArrowButtonActive {
+  background: #1878cc;
+  border-color: #135fa3;
+}
+.flat .dijitButtonActive.alt-success .dijitButtonNode,
+.flat .dijitDropDownButtonActive.alt-success .dijitButtonNode,
+.flat .dijitComboButton.alt-success .dijitButtonNodeActive,
+.flat .dijitToggleButtonActive.alt-success .dijitButtonNode,
+.flat .dijitComboBoxActive.alt-success .dijitButtonNode,
+.flat .dijitSelectActive.alt-success .dijitButtonContents,
+.flat .dijitSelectActive.alt-success .dijitArrowButton,
+.flat .dijitSelect.dijitSelectOpened.alt-success .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-success .dijitArrowButton,
+.flat .dijitComboBox.alt-success .dijitButtonNode.dijitHasDropDownOpen,
+.flat .dijitSpinner.alt-success .dijitUpArrowButtonActive,
+.flat .dijitSpinner.alt-success .dijitDownArrowButtonActive {
+  background: #3b8d3e;
+  border-color: #2f7032;
+}
+.flat .dijitButtonActive.alt-info .dijitButtonNode,
+.flat .dijitDropDownButtonActive.alt-info .dijitButtonNode,
+.flat .dijitComboButton.alt-info .dijitButtonNodeActive,
+.flat .dijitToggleButtonActive.alt-info .dijitButtonNode,
+.flat .dijitComboBoxActive.alt-info .dijitButtonNode,
+.flat .dijitSelectActive.alt-info .dijitButtonContents,
+.flat .dijitSelectActive.alt-info .dijitArrowButton,
+.flat .dijitSelect.dijitSelectOpened.alt-info .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-info .dijitArrowButton,
+.flat .dijitComboBox.alt-info .dijitButtonNode.dijitHasDropDownOpen,
+.flat .dijitSpinner.alt-info .dijitUpArrowButtonActive,
+.flat .dijitSpinner.alt-info .dijitDownArrowButtonActive {
+  background: #0395d7;
+  border-color: #0276ab;
+}
+.flat .dijitButtonActive.alt-warning .dijitButtonNode,
+.flat .dijitDropDownButtonActive.alt-warning .dijitButtonNode,
+.flat .dijitComboButton.alt-warning .dijitButtonNodeActive,
+.flat .dijitToggleButtonActive.alt-warning .dijitButtonNode,
+.flat .dijitComboBoxActive.alt-warning .dijitButtonNode,
+.flat .dijitSelectActive.alt-warning .dijitButtonContents,
+.flat .dijitSelectActive.alt-warning .dijitArrowButton,
+.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitArrowButton,
+.flat .dijitComboBox.alt-warning .dijitButtonNode.dijitHasDropDownOpen,
+.flat .dijitSpinner.alt-warning .dijitUpArrowButtonActive,
+.flat .dijitSpinner.alt-warning .dijitDownArrowButtonActive {
+  background: #dd7b00;
+  border-color: #b06200;
+}
+.flat .dijitButtonActive.alt-danger .dijitButtonNode,
+.flat .dijitDropDownButtonActive.alt-danger .dijitButtonNode,
+.flat .dijitComboButton.alt-danger .dijitButtonNodeActive,
+.flat .dijitToggleButtonActive.alt-danger .dijitButtonNode,
+.flat .dijitComboBoxActive.alt-danger .dijitButtonNode,
+.flat .dijitSelectActive.alt-danger .dijitButtonContents,
+.flat .dijitSelectActive.alt-danger .dijitArrowButton,
+.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitArrowButton,
+.flat .dijitComboBox.alt-danger .dijitButtonNode.dijitHasDropDownOpen,
+.flat .dijitSpinner.alt-danger .dijitUpArrowButtonActive,
+.flat .dijitSpinner.alt-danger .dijitDownArrowButtonActive {
+  background: #dc211c;
+  border-color: #af1a17;
+}
+.flat .dijitButtonActive.alt-inverse .dijitButtonNode,
+.flat .dijitDropDownButtonActive.alt-inverse .dijitButtonNode,
+.flat .dijitComboButton.alt-inverse .dijitButtonNodeActive,
+.flat .dijitToggleButtonActive.alt-inverse .dijitButtonNode,
+.flat .dijitComboBoxActive.alt-inverse .dijitButtonNode,
+.flat .dijitSelectActive.alt-inverse .dijitButtonContents,
+.flat .dijitSelectActive.alt-inverse .dijitArrowButton,
+.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitArrowButton,
+.flat .dijitComboBox.alt-inverse .dijitButtonNode.dijitHasDropDownOpen,
+.flat .dijitSpinner.alt-inverse .dijitUpArrowButtonActive,
+.flat .dijitSpinner.alt-inverse .dijitDownArrowButtonActive {
+  background: #555;
+  border-color: #444;
+}
+.flat .dijitButtonDisabled,
+.flat .dijitDropDownButtonDisabled,
+.flat .dijitComboButtonDisabled,
+.flat .dijitToggleButtonDisabled {
+  outline: none;
+}
+.flat .dijitButtonDisabled .dijitButtonNode,
+.flat .dijitDropDownButtonDisabled .dijitButtonNode,
+.flat .dijitComboButtonDisabled .dijitButtonNode,
+.flat .dijitToggleButtonDisabled .dijitButtonNode {
+  cursor: default;
+  color: #9e9e9e;
+  background-color: #f5f5f5;
+  border-color: #e3e3e3;
+}
+.flat .dijitButtonDisabled.alt-primary .dijitButtonNode,
+.flat .dijitDropDownButtonDisabled.alt-primary .dijitButtonNode,
+.flat .dijitComboButtonDisabled.alt-primary .dijitButtonNode,
+.flat .dijitToggleButtonDisabled.alt-primary .dijitButtonNode {
+  background: #6db2ee;
+  border-color: #50a2eb;
+  color: #f2f2f2;
+}
+.flat .dijitComboButtonDisabled.alt-primary .dijitStretch {
+  border-right-color: #50a2eb;
+}
+.flat .dijitComboButtonRtlDisabled.alt-primary .dijitStretch {
+  border-left-color: #50a2eb;
+}
+.flat .dijitComboBoxDisabled.alt-primary .dijitButtonNode {
+  border-left-color: #50a2eb;
+}
+.flat .dijitComboBoxRtlDisabled.alt-primary .dijitButtonNode {
+  border-right-color: #50a2eb;
+}
+.flat .dijitTimeTextBoxDisabled.alt-primary .dijitButtonNode {
+  border-left-color: #50a2eb;
+}
+.flat .dijitTimeTextBoxRtlDisabled.alt-primary .dijitButtonNode {
+  border-right-color: #50a2eb;
+}
+.flat .dijitDateTextBoxDisabled.alt-primary .dijitButtonNode {
+  border-left-color: #50a2eb;
+}
+.flat .dijitDateTextBoxRtlDisabled.alt-primary .dijitButtonNode {
+  border-right-color: #50a2eb;
+}
+.flat .dijitButtonDisabled.alt-success .dijitButtonNode,
+.flat .dijitDropDownButtonDisabled.alt-success .dijitButtonNode,
+.flat .dijitComboButtonDisabled.alt-success .dijitButtonNode,
+.flat .dijitToggleButtonDisabled.alt-success .dijitButtonNode {
+  background: #7dc981;
+  border-color: #63be67;
+  color: #f2f2f2;
+}
+.flat .dijitComboButtonDisabled.alt-success .dijitStretch {
+  border-right-color: #63be67;
+}
+.flat .dijitComboButtonRtlDisabled.alt-success .dijitStretch {
+  border-left-color: #63be67;
+}
+.flat .dijitComboBoxDisabled.alt-success .dijitButtonNode {
+  border-left-color: #63be67;
+}
+.flat .dijitComboBoxRtlDisabled.alt-success .dijitButtonNode {
+  border-right-color: #63be67;
+}
+.flat .dijitTimeTextBoxDisabled.alt-success .dijitButtonNode {
+  border-left-color: #63be67;
+}
+.flat .dijitTimeTextBoxRtlDisabled.alt-success .dijitButtonNode {
+  border-right-color: #63be67;
+}
+.flat .dijitDateTextBoxDisabled.alt-success .dijitButtonNode {
+  border-left-color: #63be67;
+}
+.flat .dijitDateTextBoxRtlDisabled.alt-success .dijitButtonNode {
+  border-right-color: #63be67;
+}
+.flat .dijitButtonDisabled.alt-info .dijitButtonNode,
+.flat .dijitDropDownButtonDisabled.alt-info .dijitButtonNode,
+.flat .dijitComboButtonDisabled.alt-info .dijitButtonNode,
+.flat .dijitToggleButtonDisabled.alt-info .dijitButtonNode {
+  background: #56c9fd;
+  border-color: #34befd;
+  color: #f2f2f2;
+}
+.flat .dijitComboButtonDisabled.alt-info .dijitStretch {
+  border-right-color: #34befd;
+}
+.flat .dijitComboButtonRtlDisabled.alt-info .dijitStretch {
+  border-left-color: #34befd;
+}
+.flat .dijitComboBoxDisabled.alt-info .dijitButtonNode {
+  border-left-color: #34befd;
+}
+.flat .dijitComboBoxRtlDisabled.alt-info .dijitButtonNode {
+  border-right-color: #34befd;
+}
+.flat .dijitTimeTextBoxDisabled.alt-info .dijitButtonNode {
+  border-left-color: #34befd;
+}
+.flat .dijitTimeTextBoxRtlDisabled.alt-info .dijitButtonNode {
+  border-right-color: #34befd;
+}
+.flat .dijitDateTextBoxDisabled.alt-info .dijitButtonNode {
+  border-left-color: #34befd;
+}
+.flat .dijitDateTextBoxRtlDisabled.alt-info .dijitButtonNode {
+  border-right-color: #34befd;
+}
+.flat .dijitButtonDisabled.alt-warning .dijitButtonNode,
+.flat .dijitDropDownButtonDisabled.alt-warning .dijitButtonNode,
+.flat .dijitComboButtonDisabled.alt-warning .dijitButtonNode,
+.flat .dijitToggleButtonDisabled.alt-warning .dijitButtonNode {
+  background: #ffb557;
+  border-color: #ffa635;
+  color: #f2f2f2;
+}
+.flat .dijitComboButtonDisabled.alt-warning .dijitStretch {
+  border-right-color: #ffa635;
+}
+.flat .dijitComboButtonRtlDisabled.alt-warning .dijitStretch {
+  border-left-color: #ffa635;
+}
+.flat .dijitComboBoxDisabled.alt-warning .dijitButtonNode {
+  border-left-color: #ffa635;
+}
+.flat .dijitComboBoxRtlDisabled.alt-warning .dijitButtonNode {
+  border-right-color: #ffa635;
+}
+.flat .dijitTimeTextBoxDisabled.alt-warning .dijitButtonNode {
+  border-left-color: #ffa635;
+}
+.flat .dijitTimeTextBoxRtlDisabled.alt-warning .dijitButtonNode {
+  border-right-color: #ffa635;
+}
+.flat .dijitDateTextBoxDisabled.alt-warning .dijitButtonNode {
+  border-left-color: #ffa635;
+}
+.flat .dijitDateTextBoxRtlDisabled.alt-warning .dijitButtonNode {
+  border-right-color: #ffa635;
+}
+.flat .dijitButtonDisabled.alt-danger .dijitButtonNode,
+.flat .dijitDropDownButtonDisabled.alt-danger .dijitButtonNode,
+.flat .dijitComboButtonDisabled.alt-danger .dijitButtonNode,
+.flat .dijitToggleButtonDisabled.alt-danger .dijitButtonNode {
+  background: #ee7e7c;
+  border-color: #eb6561;
+  color: #f2f2f2;
+}
+.flat .dijitComboButtonDisabled.alt-danger .dijitStretch {
+  border-right-color: #eb6561;
+}
+.flat .dijitComboButtonRtlDisabled.alt-danger .dijitStretch {
+  border-left-color: #eb6561;
+}
+.flat .dijitComboBoxDisabled.alt-danger .dijitButtonNode {
+  border-left-color: #eb6561;
+}
+.flat .dijitComboBoxRtlDisabled.alt-danger .dijitButtonNode {
+  border-right-color: #eb6561;
+}
+.flat .dijitTimeTextBoxDisabled.alt-danger .dijitButtonNode {
+  border-left-color: #eb6561;
+}
+.flat .dijitTimeTextBoxRtlDisabled.alt-danger .dijitButtonNode {
+  border-right-color: #eb6561;
+}
+.flat .dijitDateTextBoxDisabled.alt-danger .dijitButtonNode {
+  border-left-color: #eb6561;
+}
+.flat .dijitDateTextBoxRtlDisabled.alt-danger .dijitButtonNode {
+  border-right-color: #eb6561;
+}
+.flat .dijitButtonDisabled.alt-inverse .dijitButtonNode,
+.flat .dijitDropDownButtonDisabled.alt-inverse .dijitButtonNode,
+.flat .dijitComboButtonDisabled.alt-inverse .dijitButtonNode,
+.flat .dijitToggleButtonDisabled.alt-inverse .dijitButtonNode {
+  background: #989898;
+  border-color: #848484;
+  color: #f2f2f2;
+}
+.flat .dijitComboButtonDisabled.alt-inverse .dijitStretch {
+  border-right-color: #848484;
+}
+.flat .dijitComboButtonRtlDisabled.alt-inverse .dijitStretch {
+  border-left-color: #848484;
+}
+.flat .dijitComboBoxDisabled.alt-inverse .dijitButtonNode {
+  border-left-color: #848484;
+}
+.flat .dijitComboBoxRtlDisabled.alt-inverse .dijitButtonNode {
+  border-right-color: #848484;
+}
+.flat .dijitTimeTextBoxDisabled.alt-inverse .dijitButtonNode {
+  border-left-color: #848484;
+}
+.flat .dijitTimeTextBoxRtlDisabled.alt-inverse .dijitButtonNode {
+  border-right-color: #848484;
+}
+.flat .dijitDateTextBoxDisabled.alt-inverse .dijitButtonNode {
+  border-left-color: #848484;
+}
+.flat .dijitDateTextBoxRtlDisabled.alt-inverse .dijitButtonNode {
+  border-right-color: #848484;
+}
+.flat .dijitComboButtonDisabled .dijitArrowButton {
+  border-left-width: 0;
+}
+.flat .dijitDropDownButton .dijitButtonNode {
+  padding-right: 8px;
+}
+.flat table.dijitComboButton {
+  border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */
+}
+.flat table.dijitComboButton .dijitStretch {
+  border-radius: 3px 0 0 3px;
+}
+.flat table.dijitComboButton .dijitArrowButton {
+  padding: 4px;
+  width: 20px;
+  border-radius: 0 3px 3px 0;
+  border-left-width: 0;
+}
+.flat .dijitToggleButton .dijitCheckBoxIcon {
+  display: none;
+}
+.flat .dijitToggleButtonChecked .dijitIcon {
+  display: inline-block;
+}
+.flat .dijitDropDownButton .dijitArrowButtonInner {
+  margin-left: 3px;
+}
+.flat .dijitDropDownButton .dijitArrowButtonInner,
+.flat .dijitArrowButton {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.flat .dijitDropDownButton .dijitArrowButtonInner:before,
+.flat .dijitArrowButton:before {
+  content: "\f002";
+}
+.flat .dijitLeftArrowButton:before {
+  content: "\f000";
+}
+.flat .dijitRightArrowButton:before {
+  content: "\f001";
+}
+.flat .dijitUpArrowButton:before {
+  content: "\f003";
+}
diff --git a/lib/flat/dijit/form/Button.styl b/lib/flat/dijit/form/Button.styl
new file mode 100755
index 000000000..dfeb602b4
--- /dev/null
+++ b/lib/flat/dijit/form/Button.styl
@@ -0,0 +1,165 @@
+/* Button | DropDownButton | ComboButton | ToggleButton
+ * 
+ * Styling Buttons mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitButton
+ * 		.dijitDropDownButton
+ * 		.dijitComboButton
+ * 		.dijitButtonNode - common button/arrow wrapper shared across all three button types 
+ *
+ * 2. Button text
+ * 		.dijitButtonText
+ * 
+ * 3. Arrows - only for DropDownButton and ComboButton
+ * 	     There are total four directions arrows - down, left, right, up:
+ * 		.dijitArrowButtonInner - down arrow by default
+ *      .dijitLeftArrowButton .dijitArrowButtonInner - left arrow
+ *      .dijitRightArrowButton .dijitArrowButtonInner - right arrow
+ *      .dijitUpArrowButton .dijitArrowButtonInner - up arrow
+ * 
+ * 4. States - Hover, Active, Disabled, e.g.
+ * 		.dijitButtonHover .dijitButtonNode
+ * 		.dijitButtonActive .dijitButtonNode
+ * 		.dijitButtonDisabled .dijitButtonNode
+ *      
+ *      .dijitDisabled .dijitArrowButtonInner  - disabled arrow states 
+ */
+
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+	/* ----- Button ----- */
+	.dijitButtonText {
+		padding: 0 $padding;
+		text-align: center;
+	}
+
+	.dijitButton,
+	.dijitDropDownButton,
+	.dijitComboButton,
+	.dijitToggleButton {
+		.dijitButtonNode {
+			button-style();
+		}
+	}
+
+	create-alternative-buttons($button-alternative-colors);
+
+	// hover
+	.dijitButtonHover,
+	.dijitDropDownButtonHover,
+	.dijitToggleButtonHover {
+		.dijitButtonNode {
+			button-hover-style();
+		}
+	}
+	.dijitComboButton {
+		.dijitButtonNodeHover, 
+		.dijitDownArrowButtonHover {
+			button-hover-style();
+		}
+	}
+
+	create-alternative-buttons-hover($button-alternative-colors);
+
+	// active and checked
+	.dijitButtonActive, 
+	.dijitDropDownButtonActive,
+	.dijitToggleButtonActive,
+	.dijitToggleButtonChecked {
+		.dijitButtonNode {
+			button-active-style();
+		}
+	}
+	.dijitComboButton {
+		.dijitButtonNodeActive, 
+		.dijitDownArrowButtonActive {
+			button-active-style();
+		}
+	}
+
+	create-alternative-buttons-active($button-alternative-colors);
+
+	// disabled
+	.dijitButtonDisabled,
+	.dijitDropDownButtonDisabled,
+	.dijitComboButtonDisabled,
+	.dijitToggleButtonDisabled {
+		outline: none;
+	}
+
+	.dijitButtonDisabled,
+	.dijitDropDownButtonDisabled,
+	.dijitComboButtonDisabled,
+	.dijitToggleButtonDisabled { 
+		.dijitButtonNode {
+			button-disabled-style();
+		}
+	}
+	
+	create-alternative-buttons-disabled($button-alternative-colors);
+
+	.dijitComboButtonDisabled .dijitArrowButton { 
+		border-left-width: 0;
+	}
+
+	/* ----- DropDownButton ----- */
+	.dijitDropDownButton .dijitButtonNode {
+		padding-right: $padding * 2;
+	}
+	
+	/* ----- ComboButton ----- */
+	table.dijitComboButton {
+		border-collapse: separate;	/* override dijit.css so that ComboBox rounded corners work */
+		.dijitStretch {
+			border-radius: $border-radius 0 0 $border-radius;
+		}
+		.dijitArrowButton {
+			padding: $padding;
+			width: $button-arrow-width;
+			border-radius: 0 $border-radius $border-radius 0;
+			border-left-width: 0;
+		}
+	}
+
+	/* ----- ToggleButton ----- */
+	.dijitToggleButton {
+		.dijitCheckBoxIcon {
+			display: none;
+		}
+	}
+
+	.dijitToggleButtonChecked {
+		.dijitIcon {
+			display: inline-block;
+		}
+	}
+
+	// arrow styles for down/up/left/right directions
+	.dijitDropDownButton .dijitArrowButtonInner{
+		margin-left: $padding * 0.75;
+	}
+
+	.dijitDropDownButton .dijitArrowButtonInner,
+	.dijitArrowButton  {
+		_icon-core-style();
+	}
+
+	.dijitDropDownButton .dijitArrowButtonInner:before,
+	.dijitArrowButton:before {
+		content: $icon-drop-down;
+	}
+
+	.dijitLeftArrowButton:before {
+		content: $icon-drop-left;
+	}
+
+	.dijitRightArrowButton:before {
+		content: $icon-drop-right;
+	}
+
+	.dijitUpArrowButton:before {
+		content: $icon-drop-up;
+	}
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/form/Button_rtl.css b/lib/flat/dijit/form/Button_rtl.css
new file mode 100644
index 000000000..2653de756
--- /dev/null
+++ b/lib/flat/dijit/form/Button_rtl.css
@@ -0,0 +1,15 @@
+.flat table.dijitComboButtonRtl .dijitStretch {
+  border-radius: 0 3px 3px 0;
+}
+.flat table.dijitComboButtonRtl .dijitArrowButton {
+  border-radius: 3px 0 0 3px;
+  border-left-width: 1px;
+  border-right-width: 0;
+}
+.flat .dijitDropDownButtonRtl .dijitButtonNode {
+  padding-left: 8px;
+}
+.flat .dijitDropDownButtonRtl .dijitArrowButtonInner {
+  margin-left: 0;
+  margin-right: 12px;
+}
diff --git a/lib/flat/dijit/form/Button_rtl.styl b/lib/flat/dijit/form/Button_rtl.styl
new file mode 100755
index 000000000..8dab1cd23
--- /dev/null
+++ b/lib/flat/dijit/form/Button_rtl.styl
@@ -0,0 +1,27 @@
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+
+	/* ----- ComboButton ----- */
+
+	table.dijitComboButtonRtl .dijitStretch  {
+		border-radius: 0 $button-border-radius $button-border-radius 0;
+	}
+	table.dijitComboButtonRtl .dijitArrowButton {
+		border-radius: $button-border-radius 0 0 $button-border-radius;
+		border-left-width: 1px;
+		border-right-width: 0;
+	}
+
+	/* ----- DropDownButton ----- */
+
+	.dijitDropDownButtonRtl {
+		.dijitButtonNode {
+			padding-left: $padding*2;
+		}
+		.dijitArrowButtonInner {
+			margin-left: 0;
+			margin-right: $padding * 3;
+		}
+	}
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/form/Checkbox.css b/lib/flat/dijit/form/Checkbox.css
new file mode 100644
index 000000000..236eb40e8
--- /dev/null
+++ b/lib/flat/dijit/form/Checkbox.css
@@ -0,0 +1,131 @@
+/* CheckBox
+ * 
+ * Styling CheckBox mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitCheckBox
+ * 
+ * 2. CheckBox within ToggleButton
+ * 		.dijitCheckBoxIcon
+ * 
+ * 3. States - Checked, Hover, Disabled.
+ *		.dijitCheckBoxChecked
+ * 		.dijitCheckBoxHover
+ * 		.dijitCheckBoxCheckedHover
+ * 		.dijitCheckBoxDisabled
+ *		.dijitCheckBoxCheckedDisabled
+ */
+.flat .dijitCheckBox {
+  background-color: #fff;
+  border: 1px solid #9e9e9e;
+  width: 16px;
+  height: 16px;
+  line-height: 1;
+  padding: 0;
+  border-radius: 2px;
+  text-align: center;
+  position: relative;
+  overflow: visible;
+  -webkit-transition: all 0.1s linear;
+  -moz-transition: all 0.1s linear;
+  -o-transition: all 0.1s linear;
+  -ms-transition: all 0.1s linear;
+  transition: all 0.1s linear;
+}
+.flat .dijitCheckBox input {
+  position: absolute;
+  top: 0;
+}
+.flat .dijitCheckBoxIcon:before,
+.flat .dijitCheckBoxChecked:before,
+.flat .dijitCheckBoxCheckedDisabled:before {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\f00c";
+  color: #fff;
+}
+.flat .dijitCheckBoxIcon {
+  padding: 0;
+}
+.flat .dijitCheckBoxIcon:before {
+  color: #2196f3;
+}
+.flat .alt-primary .dijitCheckBoxIcon:before {
+  color: #fff;
+}
+.flat .alt-success .dijitCheckBoxIcon:before {
+  color: #fff;
+}
+.flat .alt-info .dijitCheckBoxIcon:before {
+  color: #fff;
+}
+.flat .alt-warning .dijitCheckBoxIcon:before {
+  color: #fff;
+}
+.flat .alt-danger .dijitCheckBoxIcon:before {
+  color: #fff;
+}
+.flat .alt-inverse .dijitCheckBoxIcon:before {
+  color: #fff;
+}
+.flat .dijitCheckBoxChecked {
+  background-color: #2196f3;
+  border-color: #2196f3;
+}
+.flat .dijitCheckBoxHover {
+  background-color: #fff;
+  border: 1px solid #2196f3;
+}
+.flat .dijitCheckBoxCheckedHover {
+  background-color: #42a6f5;
+  border: 1px solid #2196f3;
+}
+.flat .dijitCheckBoxDisabled {
+  color: #9e9e9e;
+  background-color: #f5f5f5;
+  border-color: #e3e3e3;
+}
+.flat .dijitCheckBoxCheckedDisabled {
+  color: #a6a6a6;
+  background-color: #6fbbf7;
+  border-color: #6fbbf7;
+}
+.flat .dijitCheckedMenuItem .dijitCheckedMenuItemIcon {
+  background-color: #fff;
+  border: 1px solid #9e9e9e;
+  width: 16px;
+  height: 16px;
+  line-height: 1;
+  padding: 0;
+  border-radius: 2px;
+  text-align: center;
+  position: relative;
+  overflow: visible;
+  -webkit-transition: all 0.1s linear;
+  -moz-transition: all 0.1s linear;
+  -o-transition: all 0.1s linear;
+  -ms-transition: all 0.1s linear;
+  transition: all 0.1s linear;
+}
+.flat .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon:before {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\f00c";
+  color: #2196f3;
+}
diff --git a/lib/flat/dijit/form/Checkbox.styl b/lib/flat/dijit/form/Checkbox.styl
new file mode 100755
index 000000000..556afaf68
--- /dev/null
+++ b/lib/flat/dijit/form/Checkbox.styl
@@ -0,0 +1,137 @@
+/* CheckBox
+ * 
+ * Styling CheckBox mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitCheckBox
+ * 
+ * 2. CheckBox within ToggleButton
+ * 		.dijitCheckBoxIcon
+ * 
+ * 3. States - Checked, Hover, Disabled.
+ *		.dijitCheckBoxChecked
+ * 		.dijitCheckBoxHover
+ * 		.dijitCheckBoxCheckedHover
+ * 		.dijitCheckBoxDisabled
+ *		.dijitCheckBoxCheckedDisabled
+ */
+
+
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+		
+	.dijitCheckBox {
+		background-color: $checkbox-background-color;
+		border: 1px solid $checkbox-border-color;
+		width: $checkbox-width;
+		height: $checkbox-height;
+		line-height: 1;
+		padding: $checkbox-padding;
+		border-radius: $checkbox-border-radius;
+		text-align: center;
+		position: relative;
+		overflow: visible;
+		transition: all 0.1s linear;
+		input {
+			position: absolute;
+			top: 0;
+		}
+	}
+
+	/* Icon */
+
+	.dijitCheckBoxIcon,
+	.dijitCheckBoxChecked,
+	.dijitCheckBoxCheckedDisabled {
+		&:before {
+			_icon-core-style();
+			content: $checkbox-icon;
+			color: $checkbox-checked-icon-color;
+		}
+	}
+
+	/* This is the checkbox icon within a widget, e.g. toggle button */
+	
+	.dijitCheckBoxIcon {
+		padding: $checkbox-icon-padding;
+
+		&:before {
+			color: $checkbox-icon-checked-icon-color;
+		}
+	}
+	
+	// checkbox icon within alternative buttons
+	if($button-alternative-colors && length($button-alternative-colors) > 0) {
+		for class in $button-alternative-colors {
+			.{class} {
+				.dijitCheckBoxIcon {
+					&:before {
+						color: $checkbox-checked-icon-color;
+					}
+				}
+			}
+		}
+	}
+
+	/* checked */
+
+	.dijitCheckBoxChecked {
+		background-color: $checkbox-checked-background-color;
+		border-color: $checkbox-checked-border-color;
+	}
+
+	/* hovered */
+	/* over unchecked */
+
+	.dijitCheckBoxHover {
+		background-color: $checkbox-hover-unchecked-background-color;
+		border: $checkbox-hover-unchecked-border-color;
+	}
+
+	/* over checked */
+
+	.dijitCheckBoxCheckedHover {
+		background-color: $checkbox-hover-checked-background-color;
+		border: $checkbox-hover-checked-border-color;
+	}
+
+	/* disabled */
+
+	.dijitCheckBoxDisabled {
+		color: $checkbox-disabled-color;
+		background-color: $checkbox-disabled-background-color;
+		border-color: $checkbox-disabled-border-color;
+	}
+	
+	.dijitCheckBoxCheckedDisabled {
+		color: $checkbox-checked-disabled-color;
+		background-color: $checkbox-checked-disabled-background-color;
+		border-color: $checkbox-checked-disabled-border-color;
+	}
+	
+	/* Checkbox within a menu item */
+	
+	.dijitCheckedMenuItem .dijitCheckedMenuItemIcon {
+		background-color: $checkbox-background-color;
+		border: 1px solid $checkbox-border-color;
+		width: $checkbox-width;
+		height: $checkbox-height;
+		line-height: 1;
+		padding: $checkbox-padding;
+		border-radius: $checkbox-border-radius;
+		text-align: center;
+		position: relative;
+		overflow: visible;
+		transition: all 0.1s linear;
+	}
+		
+	.dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
+		&:before {
+			_icon-core-style();
+			content: $checkbox-icon;
+			color: $theme-base;
+		}
+	}
+	
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/form/NumberSpinner.css b/lib/flat/dijit/form/NumberSpinner.css
new file mode 100644
index 000000000..6c6ea6b8c
--- /dev/null
+++ b/lib/flat/dijit/form/NumberSpinner.css
@@ -0,0 +1,125 @@
+/* NumberSpinner - namespace "dijitSpinner"
+ * 
+ * Styling NumberSpinner mainly includes:
+ * 
+ * 1. Arrows
+ * 		Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner  - for border, padding and position
+ * 		Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton
+ * 		Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image
+ * 
+ * 2. Hover state
+ * 		.dijitUpArrowButtonHover|.dijitDownArrowButtonHover .*  - for background color|image
+ * 
+ * 3. Active state
+ * 		.dijitUpArrowButtonActive|.dijitDownArrowButtonActive .*  - for border, padding, margin and background color|image
+ * 
+ * 4. Focused state
+ * 		.dijitSpinnerFocused .* - for background color|image
+ * 
+ * 5. Disabled state
+ * 		.dijitSpinnerDisabled .* - for background color|image
+ */
+.flat .dijitSpinner .dijitSpinnerButtonContainer {
+  overflow: hidden;
+  position: relative;
+  width: auto;
+  padding: 0;
+  border: 1px solid #9e9e9e;
+}
+.flat .dijitSpinner .dijitSpinnerButtonInner {
+  width: 30px;
+  padding: 4px 0 !important;
+  margin: 0;
+}
+.flat .dijitSpinner .dijitArrowButton {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #9e9e9e;
+  padding: 4px;
+  border-radius: 3px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-transition: all 0.05s linear;
+  -moz-transition: all 0.05s linear;
+  -o-transition: all 0.05s linear;
+  -ms-transition: all 0.05s linear;
+  transition: all 0.05s linear;
+  background: #fff;
+  border-radius: 0;
+  border: 0;
+  width: auto;
+  overflow: hidden;
+  left: 0;
+  right: 0;
+  padding: 0;
+}
+.flat .dijitSpinner .dijitArrowButton:before {
+  content: none;
+}
+.flat .dijitSpinner .dijitUpArrowButton {
+  border-top-right-radius: 2.000000000000001px;
+}
+.flat .dijitSpinner .dijitDownArrowButton {
+  border-bottom-right-radius: 2.000000000000001px;
+}
+.flat .dijitSpinner .dijitUpArrowButtonHover,
+.flat .dijitSpinner .dijitDownArrowButtonHover {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  background: #f2f2f2;
+  border-color: #d9d9d9;
+}
+.flat .dijitSpinner .dijitDownArrowButtonActive,
+.flat .dijitSpinner .dijitUpArrowButtonActive {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+}
+.flat .dijitSpinner .dijitArrowButtonInner {
+  line-height: 16px;
+  display: block;
+}
+.flat .dijitSpinner .dijitArrowButtonInner .dijitInputField {
+  padding: 0;
+}
+.flat .dijitSpinner .dijitArrowButtonInner:before {
+  content: "\f003";
+}
+.flat .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner:before {
+  content: "\f002";
+}
+.flat .dijitSpinnerDisabled .dijitDownArrowButton,
+.flat .dijitSpinnerDisabled .dijitUpArrowButton {
+  cursor: default;
+  color: #9e9e9e;
+  background-color: #f5f5f5;
+  border-color: #e3e3e3;
+}
+.flat .alt-primary .dijitSpinnerButtonContainer {
+  border-color: #1e88e5;
+}
+.flat .alt-success .dijitSpinnerButtonContainer {
+  border-color: #43a047;
+}
+.flat .alt-info .dijitSpinnerButtonContainer {
+  border-color: #03a9f4;
+}
+.flat .alt-warning .dijitSpinnerButtonContainer {
+  border-color: #fb8c00;
+}
+.flat .alt-danger .dijitSpinnerButtonContainer {
+  border-color: #e53935;
+}
+.flat .alt-inverse .dijitSpinnerButtonContainer {
+  border-color: #616161;
+}
diff --git a/lib/flat/dijit/form/NumberSpinner.styl b/lib/flat/dijit/form/NumberSpinner.styl
new file mode 100755
index 000000000..fa80c36bb
--- /dev/null
+++ b/lib/flat/dijit/form/NumberSpinner.styl
@@ -0,0 +1,124 @@
+/* NumberSpinner - namespace "dijitSpinner"
+ * 
+ * Styling NumberSpinner mainly includes:
+ * 
+ * 1. Arrows
+ * 		Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner  - for border, padding and position
+ * 		Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton
+ * 		Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image
+ * 
+ * 2. Hover state
+ * 		.dijitUpArrowButtonHover|.dijitDownArrowButtonHover .*  - for background color|image
+ * 
+ * 3. Active state
+ * 		.dijitUpArrowButtonActive|.dijitDownArrowButtonActive .*  - for border, padding, margin and background color|image
+ * 
+ * 4. Focused state
+ * 		.dijitSpinnerFocused .* - for background color|image
+ * 
+ * 5. Disabled state
+ * 		.dijitSpinnerDisabled .* - for background color|image
+ */
+
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+	
+	.dijitSpinner {
+
+		.dijitSpinnerButtonContainer {
+			overflow: hidden;
+			position: relative;
+			width: auto;
+			padding: 0;
+			border: $numberspinner-button-border;
+		}
+
+		.dijitSpinnerButtonInner {
+			width: $numberspinner-button-width;
+			padding: $numberspinner-button-inner-padding 0 !important;
+			margin: 0;
+		}
+
+		/* up & down buttons */
+		
+		.dijitArrowButton {
+			button-style();
+			border-radius: 0;
+			border: 0;
+			width: auto;
+			overflow: hidden;
+			left: 0;
+			right: 0;
+			padding: $numberspinner-button-padding;
+			&:before {
+				content: none; // remove arrow icons from dijitArrowButton nodes
+			}
+		}
+
+		/* up button */
+		.dijitUpArrowButton {
+			border-top-right-radius: $numberspinner-button-border-radius
+		}
+
+		/* down button */
+		.dijitDownArrowButton {
+			border-bottom-right-radius: $numberspinner-button-border-radius
+		}
+
+		/* hover */
+
+		.dijitUpArrowButtonHover,
+		.dijitDownArrowButtonHover {
+			button-hover-style();
+		}
+
+		/* active */
+
+		.dijitDownArrowButtonActive,
+		.dijitUpArrowButtonActive {
+			button-active-style();
+		}
+
+		/* up & down arrows */
+
+		.dijitArrowButtonInner {
+			line-height: $icon-size;
+			display: block;
+
+			.dijitInputField {
+				padding: 0;
+			}
+
+			&:before {
+				content: $numberspinner-icon-up;
+			}
+		}
+
+		.dijitDownArrowButton .dijitArrowButtonInner {
+			&:before {
+				content: $numberspinner-icon-down;
+			}
+		}
+	}
+
+	/* disabled */
+
+	.dijitSpinnerDisabled {
+		.dijitDownArrowButton,
+		.dijitUpArrowButton {
+			button-disabled-style();
+		}
+	}
+	
+	// checkbox icon within alternative buttons
+	if($button-alternative-colors && length($button-alternative-colors) > 0) {
+		for class in $button-alternative-colors {
+			.{class} {
+				.dijitSpinnerButtonContainer {
+					border-color: $button-alternative-colors[class];
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/form/NumberSpinner_rtl.css b/lib/flat/dijit/form/NumberSpinner_rtl.css
new file mode 100644
index 000000000..462d66195
--- /dev/null
+++ b/lib/flat/dijit/form/NumberSpinner_rtl.css
@@ -0,0 +1,4 @@
+.flat .dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton {
+  right: 0;
+  left: auto;
+}
diff --git a/lib/flat/dijit/form/NumberSpinner_rtl.styl b/lib/flat/dijit/form/NumberSpinner_rtl.styl
new file mode 100644
index 000000000..1fe335c3f
--- /dev/null
+++ b/lib/flat/dijit/form/NumberSpinner_rtl.styl
@@ -0,0 +1,10 @@
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+	
+	.dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton {
+		right: 0;
+		left: auto;
+	}
+	
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/form/RadioButton.css b/lib/flat/dijit/form/RadioButton.css
new file mode 100644
index 000000000..34503fb4e
--- /dev/null
+++ b/lib/flat/dijit/form/RadioButton.css
@@ -0,0 +1,157 @@
+/* RadioButton
+ * 
+ * Styling RadioButton mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitRadio|.dijitRadioIcon
+ * 
+ * 2. RadioButton within ToggleButton
+ * 		.dijitToggleButton|.dijitToggleButtonChecked
+ * 
+ * 3. Checked state
+ * 		.dijitRadioChecked
+ * 		.dijitToggleButtonChecked
+ * 
+ * 4. Hover state
+ * 		.dijitRadioHover|.dijitRadioCheckedHover
+ * 
+ * 5. Disabled state
+ * 		.dijitRadioDisabled|.dijitRadioCheckedDisabled
+ */
+.flat .dijitRadio,
+.flat .dijitRadioIcon {
+/* inside a toggle button */
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border: 1px solid #2196f3;
+  border-radius: 50%;
+  position: relative;
+  overflow: visible;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.flat .dijitRadio:after,
+.flat .dijitRadioIcon:after {
+  content: " ";
+  display: block;
+  width: 0;
+  height: 0;
+  background-color: #2196f3;
+  border-radius: 50%;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: alpha(opacity=0);
+  margin: 8px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-transition: all 0.15s ease-in-out;
+  -moz-transition: all 0.15s ease-in-out;
+  -o-transition: all 0.15s ease-in-out;
+  -ms-transition: all 0.15s ease-in-out;
+  transition: all 0.15s ease-in-out;
+}
+.flat .dijitRadioHover {
+  border-color: #59b0f6;
+}
+.flat .dijitRadioChecked:after,
+.flat .dijitChecked .dijitRadioIcon:after {
+  width: 8px;
+  height: 8px;
+  margin: 3px;
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.flat .alt-primary .dijitRadioIcon {
+  border-color: #fff;
+}
+.flat .alt-primary .dijitRadioIcon:after {
+  background-color: #fff;
+}
+.flat .alt-success .dijitRadioIcon {
+  border-color: #fff;
+}
+.flat .alt-success .dijitRadioIcon:after {
+  background-color: #fff;
+}
+.flat .alt-info .dijitRadioIcon {
+  border-color: #fff;
+}
+.flat .alt-info .dijitRadioIcon:after {
+  background-color: #fff;
+}
+.flat .alt-warning .dijitRadioIcon {
+  border-color: #fff;
+}
+.flat .alt-warning .dijitRadioIcon:after {
+  background-color: #fff;
+}
+.flat .alt-danger .dijitRadioIcon {
+  border-color: #fff;
+}
+.flat .alt-danger .dijitRadioIcon:after {
+  background-color: #fff;
+}
+.flat .alt-inverse .dijitRadioIcon {
+  border-color: #fff;
+}
+.flat .alt-inverse .dijitRadioIcon:after {
+  background-color: #fff;
+}
+.flat .dijitRadioDisabled {
+  background-color: #f5f5f5;
+  border-color: #e3e3e3;
+}
+.flat .dijitRadioCheckedDisabled {
+  background-color: #f5f5f5;
+  border-color: #6fbbf7;
+}
+.flat .dijitRadioCheckedDisabled:after {
+  background-color: #6fbbf7;
+}
+.flat .dijitRadioMenuItem .dijitCheckedMenuItemIcon {
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border: 1px solid #9e9e9e;
+  border-radius: 50%;
+  position: relative;
+  overflow: visible;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.flat .dijitRadioMenuItem .dijitCheckedMenuItemIcon:after {
+  content: " ";
+  display: block;
+  width: 0;
+  height: 0;
+  background-color: #2196f3;
+  border-radius: 50%;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: alpha(opacity=0);
+  margin: 8px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-transition: all 0.15s ease-in-out;
+  -moz-transition: all 0.15s ease-in-out;
+  -o-transition: all 0.15s ease-in-out;
+  -ms-transition: all 0.15s ease-in-out;
+  transition: all 0.15s ease-in-out;
+}
+.flat .dijitRadioMenuItemChecked .dijitCheckedMenuItemIcon {
+  border-color: #9e9e9e;
+}
+.flat .dijitRadioMenuItemChecked .dijitCheckedMenuItemIcon:after {
+  width: 8px;
+  height: 8px;
+  margin: 3px;
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
diff --git a/lib/flat/dijit/form/RadioButton.styl b/lib/flat/dijit/form/RadioButton.styl
new file mode 100755
index 000000000..b93eff66e
--- /dev/null
+++ b/lib/flat/dijit/form/RadioButton.styl
@@ -0,0 +1,136 @@
+/* RadioButton
+ * 
+ * Styling RadioButton mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitRadio|.dijitRadioIcon
+ * 
+ * 2. RadioButton within ToggleButton
+ * 		.dijitToggleButton|.dijitToggleButtonChecked
+ * 
+ * 3. Checked state
+ * 		.dijitRadioChecked
+ * 		.dijitToggleButtonChecked
+ * 
+ * 4. Hover state
+ * 		.dijitRadioHover|.dijitRadioCheckedHover
+ * 
+ * 5. Disabled state
+ * 		.dijitRadioDisabled|.dijitRadioCheckedDisabled
+ */
+
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+	
+	.dijitRadio,
+	.dijitRadioIcon	{ /* inside a toggle button */
+		width: $radio-width;
+		height: $radio-height;
+		background: $radio-background-color;
+		border: 1px solid $radio-border-color;
+		border-radius: 50%;
+		position: relative;
+		overflow: visible;
+		box-sizing: border-box;
+		&:after {
+			content: " ";
+			display: block;
+			width: 0;
+			height: 0;
+			background-color: $radio-checked-color;
+			border-radius: 50%;
+			opacity: 0;
+			margin: ($radio-width) * .5;
+			position: absolute;
+			top: 0;
+			left: 0;
+			transition: all 0.15s ease-in-out;
+		}
+	}
+
+	// hover
+	.dijitRadioHover {
+		border-color: $radio-hover-border-color;
+	}
+
+	// checked
+	.dijitRadioChecked,
+	.dijitChecked .dijitRadioIcon {
+		&:after {
+			width: $radio-width - 8px;
+			height: @width;
+			margin: 3px;
+			opacity: 1;
+		}
+	}
+
+	// checkbox icon within alternative buttons
+	if($button-alternative-colors && length($button-alternative-colors) > 0) {
+		for class in $button-alternative-colors {
+			.{class} {
+				.dijitRadioIcon {
+					border-color: $white;
+					&:after {
+						background-color: $white;
+					}
+				}
+			}
+		}
+	}
+
+	// disabled
+	.dijitRadioDisabled {
+		background-color: $radio-disabled-background-color;
+		border-color: $radio-disabled-border-color;
+	}
+	
+	.dijitRadioCheckedDisabled {
+		background-color: $radio-disabled-background-color;
+		border-color: $radio-checked-disabled-color;
+		&:after {
+			background-color: $radio-checked-disabled-color;
+		}
+	}
+
+	/* ---- RadioMenuItem ---- */
+	.dijitRadioMenuItem {
+		.dijitCheckedMenuItemIcon {
+			width: $radio-width;
+			height: $radio-height;
+			background: $radio-background-color;
+			border: 1px solid $border-color;
+			border-radius: 50%;
+			position: relative;
+			overflow: visible;
+			box-sizing: border-box;
+			&:after {
+				content: " ";
+				display: block;
+				width: 0;
+				height: 0;
+				background-color: $radio-checked-color;
+				border-radius: 50%;
+				opacity: 0;
+				margin: ($radio-width) * .5;
+				position: absolute;
+				top: 0;
+				left: 0;
+				transition: all 0.15s ease-in-out;
+			}
+		}
+	}
+	
+	.dijitRadioMenuItemChecked {
+		.dijitCheckedMenuItemIcon {
+			border-color: $border-color;
+			&:after {
+				width: $radio-width - 8px;
+				height: @width;
+				margin: 3px;
+				opacity: 1;
+			}
+		}
+	}
+
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/form/Select.css b/lib/flat/dijit/form/Select.css
new file mode 100644
index 000000000..148f4a59a
--- /dev/null
+++ b/lib/flat/dijit/form/Select.css
@@ -0,0 +1,167 @@
+/* Select | Combobox
+ * And minor style for DateTextBox | MultiSelect
+ *
+ * Styling Select mainly includes:
+ * 
+ * 1. Containers
+ *	Select:
+ * 		.dijitSelect
+ * 		.dijitButtonContents
+ *	Combobox:
+ *		.dijitComboBox
+ *
+ * 2. Arrow Button
+ * 		.dijitArrowButton
+ * 		.dijitArrowButtonInner
+ *		.dijitComboBox .dijitButtonNode
+ *
+ * 3. Menu
+ * 		.dijitSelectMenu
+ * 
+ * 4. States - Hover, Active, Focused, Disabled, e.g.
+ *
+ *	Select: Hover, Active, Focused, Disabled
+ * 		.dijitSelectHover
+ * 		.dijitSelectFocused
+ * 		.dijitSelectDisabled
+ *
+ *	Combobox: Hover, Focused (Open), Disabled
+ *		.dijitComboBox .dijitDownArrowButtonHover		
+ *		.dijitComboBoxOpenHover .dijitButtonNode
+ *		.dijitComboBoxDisabled .dijitButtonNode
+ *
+ */
+.flat .dijitSelect .dijitArrowButtonInner,
+.flat .dijitComboBox .dijitArrowButtonInner {
+  margin: 0;
+  width: 0;
+  height: 0;
+}
+.flat .dijitSelect {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #9e9e9e;
+  padding: 4px;
+  border-radius: 3px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-transition: all 0.05s linear;
+  -moz-transition: all 0.05s linear;
+  -o-transition: all 0.05s linear;
+  -ms-transition: all 0.05s linear;
+  transition: all 0.05s linear;
+  background: #fff;
+  table-layout: fixed;
+}
+.flat .dijitSelect .dijitButtonContents,
+.flat .dijitSelect .dijitArrowButton {
+  line-height: 20px;
+  padding: 4px 12px;
+  border: 0;
+  border-radius: 0 2.000000000000001px 2.000000000000001px 0;
+}
+.flat .dijitSelect .dijitButtonContents {
+  padding: 0;
+  overflow: hidden;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  border-radius: 2.000000000000001px 0 0 2.000000000000001px;
+}
+.flat .dijitSelect .dijitInputField {
+  padding: 0 0 0 12px;
+}
+.flat .dijitSelect .dijitArrowButton {
+  width: 20px;
+  padding: 4px;
+}
+.flat .dijitSelectHover {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  background: #f2f2f2;
+  border-color: #d9d9d9;
+}
+.flat .dijitSelectActive {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+}
+.flat .dijitSelectFocused {
+  border: 1px solid #9e9e9e;
+}
+.flat .dijitSelectDisabled {
+  cursor: default;
+  color: #9e9e9e;
+  background-color: #f5f5f5;
+  border-color: #e3e3e3;
+}
+.flat .dijitComboBox .dijitButtonNode {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #9e9e9e;
+  padding: 4px;
+  border-radius: 3px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-transition: all 0.05s linear;
+  -moz-transition: all 0.05s linear;
+  -o-transition: all 0.05s linear;
+  -ms-transition: all 0.05s linear;
+  transition: all 0.05s linear;
+  background: #fff;
+  border-radius: 0 2.000000000000001px 2.000000000000001px 0;
+}
+.flat .dijitComboBoxOpenHover .dijitButtonNode,
+.flat .dijitComboBox .dijitDownArrowButtonHover {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  background: #f2f2f2;
+  border-color: #d9d9d9;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.flat .dijitComboBoxDisabled .dijitButtonNode {
+  cursor: default;
+  color: #9e9e9e;
+  background-color: #f5f5f5;
+  border-color: #e3e3e3;
+}
+.flat .dijitComboBox .dijitArrowButton {
+  width: 20px;
+  padding: 4px;
+}
+.flat .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
+  border: none;
+}
+.flat .dijitDateTextBox .dijitArrowButton:before {
+  content: "\f01e";
+}
+.flat .dijitTimeTextBox .dijitArrowButton:before {
+  content: "\f01f";
+}
+.flat select {
+  padding: 4px 0;
+  border: 1px solid #9e9e9e;
+  -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2);
+  box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2);
+}
+.flat select option {
+  padding: 4px 8px;
+}
+.flat .dijitSelectMenu td.dijitMenuItemIconCell,
+.flat .dijitSelectMenu td.dijitMenuArrowCell {
+/* so that arrow and icon cells from MenuItem are not displayed */
+  display: none;
+}
diff --git a/lib/flat/dijit/form/Select.styl b/lib/flat/dijit/form/Select.styl
new file mode 100755
index 000000000..28559995b
--- /dev/null
+++ b/lib/flat/dijit/form/Select.styl
@@ -0,0 +1,164 @@
+/* Select | Combobox
+ * And minor style for DateTextBox | MultiSelect
+ *
+ * Styling Select mainly includes:
+ * 
+ * 1. Containers
+ *	Select:
+ * 		.dijitSelect
+ * 		.dijitButtonContents
+ *	Combobox:
+ *		.dijitComboBox
+ *
+ * 2. Arrow Button
+ * 		.dijitArrowButton
+ * 		.dijitArrowButtonInner
+ *		.dijitComboBox .dijitButtonNode
+ *
+ * 3. Menu
+ * 		.dijitSelectMenu
+ * 
+ * 4. States - Hover, Active, Focused, Disabled, e.g.
+ *
+ *	Select: Hover, Active, Focused, Disabled
+ * 		.dijitSelectHover
+ * 		.dijitSelectFocused
+ * 		.dijitSelectDisabled
+ *
+ *	Combobox: Hover, Focused (Open), Disabled
+ *		.dijitComboBox .dijitDownArrowButtonHover		
+ *		.dijitComboBoxOpenHover .dijitButtonNode
+ *		.dijitComboBoxDisabled .dijitButtonNode
+ *
+ */
+
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+		
+	/* arrows */
+
+	.dijitSelect,
+	.dijitComboBox {
+		.dijitArrowButtonInner {
+			margin: 0;
+			width:0;
+			height: 0;
+		}
+	}
+
+	/* ----- Select ----- */
+
+	.dijitSelect {
+		button-style();
+		table-layout: fixed;
+
+		.dijitButtonContents,
+		.dijitArrowButton {
+			line-height: 20px;
+			padding: $button-padding;
+			border: 0;
+			border-radius: 0 $select-button-border-radius $select-button-border-radius 0;
+		}
+		.dijitButtonContents {
+			padding:0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			border-radius: $select-button-border-radius 0 0 $select-button-border-radius;
+		}
+		.dijitInputField {
+			padding: 0 0 0 $input-padding*3;
+		}
+		.dijitArrowButton {
+			width: $button-arrow-width;
+			padding: $button-arrow-padding;
+		}
+	}
+
+	/* hover */
+
+	.dijitSelectHover {
+		button-hover-style();
+	}
+
+	.dijitSelectActive {
+		button-active-style();
+	}
+
+	/* focused */
+
+	.dijitSelectFocused {
+		border: $select-focus-border;
+	}
+
+	/* disabled */
+
+	.dijitSelectDisabled {
+		button-disabled-style();
+	}
+
+	/* ----- Combobox ----- */
+
+	.dijitComboBox .dijitButtonNode {
+		button-style();
+		border-radius: 0 $select-button-border-radius $select-button-border-radius 0;
+	}
+
+	/* hover */
+
+	.dijitComboBoxOpenHover .dijitButtonNode,
+	.dijitComboBox .dijitDownArrowButtonHover {
+		button-hover-style();
+		box-shadow: none;
+	}
+
+	/* disabled */
+
+	.dijitComboBoxDisabled .dijitButtonNode {
+		button-disabled-style();
+	}
+
+	.dijitComboBox .dijitArrowButton {
+		width: $button-arrow-width;
+		padding: $button-arrow-padding;
+	}
+
+	// remove arrow when wrapped in a toolbar dijit
+	.dijitToolbar .dijitComboBox .dijitArrowButtonInner {
+		border: none;
+	}
+
+	/* -----  DateTextBox ----- */
+
+	.dijitDateTextBox .dijitArrowButton:before {
+		content: $select-date-icon;
+	}
+	/* -----  TimeTextBox ----- */
+
+	.dijitTimeTextBox .dijitArrowButton:before {
+		content: $select-time-icon;
+	}
+
+	/* ----- Multiple Select ----- */
+
+	select  {
+		padding: $input-padding 0;
+		border: 1px solid $input-border-color;
+		box-shadow: $shadow-depth1;
+	}
+
+	select option {
+		padding: $input-padding $input-padding * 2;
+	}
+
+	/* Dropdown menu styles for "Select" 
+	 * Most of menu styles are defined in Menu.styl 
+	 */
+
+	.dijitSelectMenu td.dijitMenuItemIconCell,
+	.dijitSelectMenu td.dijitMenuArrowCell { 
+		/* so that arrow and icon cells from MenuItem are not displayed */
+		display: none;
+	}
+	
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/form/Select_rtl.css b/lib/flat/dijit/form/Select_rtl.css
new file mode 100644
index 000000000..d42ef90ef
--- /dev/null
+++ b/lib/flat/dijit/form/Select_rtl.css
@@ -0,0 +1,15 @@
+.flat .dijitSelectRtl .dijitButtonText {
+  float: right;
+  padding: 0 12px 0 0;
+}
+.flat .dijitSelectRtl .dijitButtonContents {
+  border-style: none none none solid;
+  text-align: right;
+}
+.flat .dijitComboBoxRtl .dijitButtonNode.dijitArrowButtonContainer {
+  border-radius: 3px 0 0 3px;
+}
+.flat .dijitComboBoxRtl .dijitArrowButtonContainer {
+  border-right-width: 1px !important;
+  border-left-width: 0 !important;
+}
diff --git a/lib/flat/dijit/form/Select_rtl.styl b/lib/flat/dijit/form/Select_rtl.styl
new file mode 100644
index 000000000..c04aa1722
--- /dev/null
+++ b/lib/flat/dijit/form/Select_rtl.styl
@@ -0,0 +1,27 @@
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+	
+	.dijitSelectRtl {
+		.dijitButtonText {
+			float: right;
+			padding: 0 $input-padding*3 0 0;
+		}
+		.dijitButtonContents {
+			border-style: none none none solid;
+			text-align: right;
+		}
+	}
+	
+	.dijitComboBoxRtl {
+		.dijitButtonNode.dijitArrowButtonContainer {
+			border-radius: $button-border-radius 0 0 $button-border-radius;
+		}
+	
+		.dijitArrowButtonContainer {
+			border-right-width: 1px !important;
+			border-left-width: 0 !important;
+		}
+	}
+	
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/form/Slider.css b/lib/flat/dijit/form/Slider.css
new file mode 100644
index 000000000..5e966882b
--- /dev/null
+++ b/lib/flat/dijit/form/Slider.css
@@ -0,0 +1,300 @@
+/* Slider 
+ * 
+ * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar)
+ * 
+ * Slider progress bar:
+ * 1. Slider progress bar (default styling): 
+ * 		.dijitSliderProgressBarH - progress bar at the middle of horizontal slider
+ * 		.dijitSliderLeftBumper - bar at the left of horizontal slider
+ * 		.dijitSliderRightBumper - bar at the right of horizontal slider
+ * 		.dijitSliderProgressBarV - progress bar at the middle of vertical slider
+ * 		.dijitSliderTopBumper - bar at the top of vertical slider
+ * 		.dijitSliderBottomtBumper - bar at the bottom of vertical slider
+ * 
+ * 2. hovered Slider progress bar (ie, mouse hover on progress bar)
+ * 		.dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border
+ * 
+ * 3. focused Slider progress bar (ie, mouse focused on progress bar)
+ * 		.dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border
+ * 
+ * 4. disabled/read-only Slider progress bar 
+ * 		.dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled
+ * 
+ * 
+ * Slider Thumbs:
+ * 1. Slider Thumbs (default styling): 
+ * 		.dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar
+ * 
+ * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs)
+ * 		.dijitSliderHover .dijitSliderImageHandleH - hovered controller style
+ * 
+ * 3. focused Slider progress bar (ie, mouse focused on slider thumbs)
+ * 		.dijitSliderFocused .dijitSliderImageHandleV - focused controller style
+ * 
+ * 
+ * Slider Increment/Decrement Buttons:
+ * 1. Slider Increment/Decrement Buttons (default styling): 
+ * 		.dijitSliderDecrementIconH - decrement icon which lies at the left of horizontal slider
+ * 		.dijitSliderIncrementIconH - increment icon which lies at the right of horizontal slider
+ * 		.dijitSliderDecrementIconV - decrement icon which lies at the bottom of vertical slider
+ * 		.dijitSliderIncrementIconV - increment icon which lies at the top of vertical slider
+ * 
+ * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons)
+ * 		.dijitSliderHover .dijitSliderDecrementIconH - for background, border
+ * 
+ * 3. active Slider Increment/Decrement Buttons (mouse down on the icons)
+ * 		.dijitSliderActive .dijitSliderIncrementIconV - for background, border
+ * 
+ * 4. disabled/read-only Slider Increment/Decrement Buttons
+ * 		.dijitSliderDisabled .dijitSliderDecrementIconH - styles for the icons in disabled slider
+ * 		.dijitSliderReadOnly .dijitSliderIncrementIconV - styles for the icons in read-only slider
+ */
+.flat .dijitSliderBar {
+  border-style: solid;
+  outline: 1px;
+}
+.flat .dijitRuleLabelsContainer {
+  color: #424242;
+  font-size: smaller;
+}
+.flat .dijitSliderDisabled {
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .dijitRuleLabelsContainerH {
+  padding: 0;
+}
+.flat .dijitSliderBarH,
+.flat .dijitSliderBumperH {
+  height: 3px;
+}
+.flat .dijitSlider .dijitSliderLeftBumper {
+  border-radius: 1.5px 0 0 1.5px;
+  border: 0 none;
+  margin-left: 4px;
+}
+.flat .dijitSlider .dijitSliderRightBumper {
+  border-radius: 0 1.5px 1.5px 0;
+  border: 0 none;
+  margin-left: -2px;
+  margin-right: 4px;
+}
+.flat .dijitSlider .dijitSliderProgressBarH,
+.flat .dijitSlider .dijitSliderLeftBumper {
+  border: 0 none;
+  background-color: #2196f3;
+  background-image: none;
+}
+.flat .dijitSlider .dijitSliderRemainingBarH,
+.flat .dijitSlider .dijitSliderRightBumper {
+  border: 0 none;
+  background-color: #9e9e9e;
+}
+.flat .dijitSliderHover .dijitSliderProgressBarH,
+.flat .dijitSliderHover .dijitSliderLeftBumper {
+  background-color: #0d8cf1;
+  background-image: none;
+}
+.flat .dijitSliderFocused .dijitSliderProgressBarH,
+.flat .dijitSliderFocused .dijitSliderLeftBumper {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.flat .dijitSliderFocused .dijitSliderRemainingBarH,
+.flat .dijitSliderFocused .dijitSliderRightBumper {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.flat .dijitRuleLabelsContainerV {
+  padding: 0;
+}
+.flat .dijitSliderBarV,
+.flat .dijitSliderBumperV {
+  width: 3px;
+}
+.flat .dijitSlider .dijitSliderTopBumper {
+  border-radius: 1.5px 1.5px 0 0;
+  border: 0 none;
+  margin-top: 4px;
+  margin-bottom: -2px;
+}
+.flat .dijitSlider .dijitSliderBottomBumper {
+  border-radius: 0 0 1.5px 1.5px;
+  border: 0 none;
+  margin-bottom: 4px;
+}
+.flat .dijitSlider .dijitSliderProgressBarV,
+.flat .dijitSlider .dijitSliderBottomBumper {
+  border: 0 none;
+  background-color: #2196f3;
+  background-image: none;
+}
+.flat .dijitSlider .dijitSliderRemainingBarV,
+.flat .dijitSlider .dijitSliderTopBumper {
+  border: 0 none;
+  background-color: #9e9e9e;
+}
+.flat .dijitSliderHover .dijitSliderProgressBarV,
+.flat .dijitSliderHover .dijitSliderBottomBumper {
+  background-color: #0d8cf1;
+  background-image: none;
+}
+.flat .dijitSliderFocused .dijitSliderProgressBarV,
+.flat .dijitSliderFocused .dijitSliderBottomBumper {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.flat .dijitSliderFocused .dijitSliderRemainingBarV,
+.flat .dijitSliderFocused .dijitSliderTopBumper {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.flat .dijitSliderImageHandle {
+  background: #fff;
+  -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2);
+  box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2);
+  border-radius: 50%;
+  border: 1px solid #2196f3;
+  width: 16px;
+  height: 16px;
+  margin-top: -2px;
+  position: absolute;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.flat .dijitSliderImageHandle:after {
+  content: "";
+  display: block;
+  background: #2196f3;
+  border-radius: 50%;
+  height: 10px;
+  width: 10px;
+  left: 2px;
+  top: 2px;
+  position: absolute;
+}
+.flat .dijitSliderImageHandleV {
+  margin-top: 0;
+}
+.flat .dijitSliderHover .dijitSliderImageHandle,
+.flat .dijitSliderFocused .dijitSliderImageHandle {
+  -webkit-box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.2);
+  box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.2);
+}
+.flat .dijitSliderDisabled.dijitSliderFocused .dijitSliderImageHandle:after {
+  display: none;
+}
+.flat .dijitSliderDecrementIconH,
+.flat .dijitSliderIncrementIconH,
+.flat .dijitSliderDecrementIconV,
+.flat .dijitSliderIncrementIconV {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #9e9e9e;
+  padding: 4px;
+  border-radius: 3px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-transition: all 0.05s linear;
+  -moz-transition: all 0.05s linear;
+  -o-transition: all 0.05s linear;
+  -ms-transition: all 0.05s linear;
+  transition: all 0.05s linear;
+  background: #fff;
+  height: 20px;
+  width: 20px;
+  cursor: pointer;
+  color: #2196f3;
+  padding: 0;
+}
+.flat .dijitSliderDecrementIconH:hover,
+.flat .dijitSliderIncrementIconH:hover,
+.flat .dijitSliderDecrementIconV:hover,
+.flat .dijitSliderIncrementIconV:hover {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  background: #f2f2f2;
+  border-color: #d9d9d9;
+}
+.flat .dijitSliderDecrementIconH:active,
+.flat .dijitSliderIncrementIconH:active,
+.flat .dijitSliderDecrementIconV:active,
+.flat .dijitSliderIncrementIconV:active {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+}
+.flat .dijitSliderReadOnly .dijitSliderDecrementIconH,
+.flat .dijitSliderDisabled .dijitSliderDecrementIconH,
+.flat .dijitSliderReadOnly .dijitSliderDecrementIconV,
+.flat .dijitSliderDisabled .dijitSliderDecrementIconV,
+.flat .dijitSliderReadOnly .dijitSliderIncrementIconH,
+.flat .dijitSliderDisabled .dijitSliderIncrementIconH,
+.flat .dijitSliderReadOnly .dijitSliderIncrementIconV,
+.flat .dijitSliderDisabled .dijitSliderIncrementIconV {
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .dijitSliderIncrementIconH,
+.flat .dijitSliderIncrementIconV,
+.flat .dijitSliderDecrementIconH,
+.flat .dijitSliderDecrementIconV {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.flat .dijitSliderIncrementIconH:before,
+.flat .dijitSliderIncrementIconV:before,
+.flat .dijitSliderDecrementIconH:before,
+.flat .dijitSliderDecrementIconV:before {
+  content: "\f011";
+  top: 0;
+  line-height: 20px;
+}
+.flat .dijitSliderIncrementIconH .dijitSliderButtonInner,
+.flat .dijitSliderIncrementIconV .dijitSliderButtonInner,
+.flat .dijitSliderDecrementIconH .dijitSliderButtonInner,
+.flat .dijitSliderDecrementIconV .dijitSliderButtonInner {
+  display: none;
+}
+.flat .dijitSliderDecrementIconH:before,
+.flat .dijitSliderDecrementIconV:before {
+  content: "\f012";
+}
+.flat .dijitRuleMark {
+  border: 0 none;
+}
+.flat .dijitRuleMarkH {
+  border-right: 1px solid #e0e0e0;
+}
+.flat .dijitRuleMarkV {
+  border-bottom: 1px solid #e0e0e0;
+}
+.flat .dijitRuleLabelContainerH {
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+.flat .dijitRuleLabelContainerV {
+  margin-left: 2px;
+  margin-right: 2px;
+}
diff --git a/lib/flat/dijit/form/Slider.styl b/lib/flat/dijit/form/Slider.styl
new file mode 100755
index 000000000..76fe95949
--- /dev/null
+++ b/lib/flat/dijit/form/Slider.styl
@@ -0,0 +1,345 @@
+/* Slider 
+ * 
+ * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar)
+ * 
+ * Slider progress bar:
+ * 1. Slider progress bar (default styling): 
+ * 		.dijitSliderProgressBarH - progress bar at the middle of horizontal slider
+ * 		.dijitSliderLeftBumper - bar at the left of horizontal slider
+ * 		.dijitSliderRightBumper - bar at the right of horizontal slider
+ * 		.dijitSliderProgressBarV - progress bar at the middle of vertical slider
+ * 		.dijitSliderTopBumper - bar at the top of vertical slider
+ * 		.dijitSliderBottomtBumper - bar at the bottom of vertical slider
+ * 
+ * 2. hovered Slider progress bar (ie, mouse hover on progress bar)
+ * 		.dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border
+ * 
+ * 3. focused Slider progress bar (ie, mouse focused on progress bar)
+ * 		.dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border
+ * 
+ * 4. disabled/read-only Slider progress bar 
+ * 		.dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled
+ * 
+ * 
+ * Slider Thumbs:
+ * 1. Slider Thumbs (default styling): 
+ * 		.dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar
+ * 
+ * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs)
+ * 		.dijitSliderHover .dijitSliderImageHandleH - hovered controller style
+ * 
+ * 3. focused Slider progress bar (ie, mouse focused on slider thumbs)
+ * 		.dijitSliderFocused .dijitSliderImageHandleV - focused controller style
+ * 
+ * 
+ * Slider Increment/Decrement Buttons:
+ * 1. Slider Increment/Decrement Buttons (default styling): 
+ * 		.dijitSliderDecrementIconH - decrement icon which lies at the left of horizontal slider
+ * 		.dijitSliderIncrementIconH - increment icon which lies at the right of horizontal slider
+ * 		.dijitSliderDecrementIconV - decrement icon which lies at the bottom of vertical slider
+ * 		.dijitSliderIncrementIconV - increment icon which lies at the top of vertical slider
+ * 
+ * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons)
+ * 		.dijitSliderHover .dijitSliderDecrementIconH - for background, border
+ * 
+ * 3. active Slider Increment/Decrement Buttons (mouse down on the icons)
+ * 		.dijitSliderActive .dijitSliderIncrementIconV - for background, border
+ * 
+ * 4. disabled/read-only Slider Increment/Decrement Buttons
+ * 		.dijitSliderDisabled .dijitSliderDecrementIconH - styles for the icons in disabled slider
+ * 		.dijitSliderReadOnly .dijitSliderIncrementIconV - styles for the icons in read-only slider
+ */
+
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+	
+	.dijitSlider {
+	}
+
+	.dijitSliderBar {
+		border-style: solid;
+		outline: 1px;
+	}
+
+	.dijitRuleLabelsContainer {
+		color: $slider-label-text-color;
+		font-size: smaller;
+	}
+
+	/* disabled */
+
+	.dijitSliderDisabled {
+		opacity: $disabled-opacity;
+	}
+
+	/* ----- Horizontal Slider ----- */
+
+	.dijitRuleLabelsContainerH {
+		padding: 0;
+	}
+
+	/* ----- Bar ----- */
+
+	.dijitSliderBarH,
+	.dijitSliderBumperH {
+		height: $slider-bar-width;
+	}
+
+	.dijitSlider {
+		.dijitSliderLeftBumper {
+			border-radius: $slider-bar-radius 0 0 $slider-bar-radius;
+			border: 0 none;
+			margin-left: $slider-bar-spacing;
+		}
+		.dijitSliderRightBumper {
+			border-radius: 0 $slider-bar-radius $slider-bar-radius 0;
+			border: 0 none;
+			margin-left: -2px;
+			margin-right: $slider-bar-spacing;
+		}
+
+		.dijitSliderProgressBarH, 
+		.dijitSliderLeftBumper {
+			border: 0 none;
+			background-color: $slider-progressbar-background-color;
+			background-image: none;
+		}
+		.dijitSliderRemainingBarH,
+		.dijitSliderRightBumper {
+			border: 0 none;
+			background-color: $slider-remainingbar-background-color;
+		}
+	}
+
+	/* hover */
+
+	.dijitSliderHover {
+		.dijitSliderProgressBarH,
+		.dijitSliderLeftBumper {
+			background-color: darken($slider-progressbar-background-color, 8%);
+			background-image: none;
+		}
+	 	.dijitSliderRemainingBarH,
+		.dijitSliderRightBumper {
+		}
+	}
+
+	/* focus */
+
+	.dijitSliderFocused {
+		.dijitSliderProgressBarH,
+		.dijitSliderLeftBumper {
+			box-shadow: none;
+		}
+		.dijitSliderRemainingBarH,
+		.dijitSliderRightBumper {
+			box-shadow: none;
+		}
+	}
+
+	/* ----- Vertical Slider ----- */
+
+	.dijitRuleLabelsContainerV {
+		padding: 0;
+	}
+
+	.dijitSliderBarV,
+	.dijitSliderBumperV {
+		width: $slider-bar-width;
+	}
+
+	.dijitSlider {
+		.dijitSliderTopBumper {
+			border-radius: $slider-bar-radius $slider-bar-radius 0 0;
+			border: 0 none;
+			margin-top: $slider-bar-spacing;
+			margin-bottom: -2px;
+		}
+		.dijitSliderBottomBumper {
+			border-radius: 0 0 $slider-bar-radius $slider-bar-radius;
+			border: 0 none;
+			margin-bottom: $slider-bar-spacing;
+		}
+
+		.dijitSliderProgressBarV,
+		.dijitSliderBottomBumper {
+			border: 0 none;
+			background-color: $slider-progressbar-verticalr-background-color;
+			background-image: none;
+		}
+		.dijitSliderRemainingBarV,
+		.dijitSliderTopBumper {
+			border: 0 none;
+			background-color: $slider-remainingbar-vertical-background-color;
+		}
+	}
+
+	/* hover */
+
+	.dijitSliderHover {
+		.dijitSliderProgressBarV,
+		.dijitSliderBottomBumper{
+			background-color: darken($slider-progressbar-verticalr-background-color, 8%);
+			background-image: none;
+		}
+		.dijitSliderRemainingBarV,
+		.dijitSliderTopBumper {
+		}
+	}
+
+	/* focused */
+
+	.dijitSliderFocused {
+		.dijitSliderProgressBarV,
+		.dijitSliderBottomBumper{
+			box-shadow: none;
+		}
+		.dijitSliderRemainingBarV,
+		.dijitSliderTopBumper {
+			box-shadow: none;
+		}
+	}
+
+	/* ------- Thumbs ------- */
+
+	.dijitSliderImageHandle {
+		background: $slider-thumb-background-color;
+		box-shadow: $slider-thumb-box-shadow;
+		border-radius: $slider-thumb-border-radius;
+		border: 1px solid $slider-thumb-border-color;
+		width: $slider-thumb-width;
+		height: $slider-thumb-height;
+		margin-top: -2px;
+		position: absolute;
+		box-sizing: border-box;
+		&:after {
+			content: "";
+			display: block;
+			background: $slider-thumb-inner-background-color;
+			border-radius: $slider-thumb-inner-border-radius;
+			height: $slider-thumb-inner-height;
+			width: $slider-thumb-inner-width;
+			left: ($slider-thumb-width - $slider-thumb-inner-width) * 0.5 - 1px;
+			top: ($slider-thumb-height - $slider-thumb-inner-height) * 0.5 - 1px;
+			position: absolute;
+		}
+	}
+	
+	.dijitSliderImageHandleV {
+		margin-top: 0;
+	}
+	
+	/* hover & focused */
+
+	.dijitSliderHover,
+	.dijitSliderFocused {
+		.dijitSliderImageHandle {
+			box-shadow: $shadow-depth1_5;
+		}
+	}
+
+	.dijitSliderDisabled.dijitSliderFocused {
+		.dijitSliderImageHandle {
+			&:after {
+				display: none;
+			}
+		}
+	}
+
+	/* ---- Increment/Decrement Buttons ---- */
+
+	.dijitSliderDecrementIconH,
+	.dijitSliderIncrementIconH,
+	.dijitSliderDecrementIconV,
+	.dijitSliderIncrementIconV {
+		button-style();
+		height: $slider-button-height;
+		width: $slider-button-width;
+		cursor: pointer;
+		color: $slider-button-text-color;
+		padding: 0;
+	}
+
+	.dijitSliderDecrementIconH,
+	.dijitSliderIncrementIconH,
+	.dijitSliderDecrementIconV,
+	.dijitSliderIncrementIconV {
+		
+		/* hover */
+		
+		&:hover{
+			button-hover-style();
+		}
+		
+		/* active */
+		
+		&:active{
+			button-active-style();
+		}
+	}
+
+	/* read only & disabled */
+
+	.dijitSliderReadOnly,
+	.dijitSliderDisabled {
+		.dijitSliderDecrementIconH,
+		.dijitSliderDecrementIconV,
+		.dijitSliderIncrementIconH,
+		.dijitSliderIncrementIconV {
+			opacity: $disabled-opacity;
+		}
+	}
+
+	/* icons */
+
+	.dijitSliderButtonInner {
+	}
+
+	.dijitSliderIncrementIconH,
+	.dijitSliderIncrementIconV,
+	.dijitSliderDecrementIconH,
+	.dijitSliderDecrementIconV {
+		_icon-core-style();
+		&:before {
+			content: $slider-icon-increment;
+			top:0;
+			line-height: $slider-button-height;
+		}
+		.dijitSliderButtonInner {
+			display: none;
+		}
+	}
+
+	.dijitSliderDecrementIconH,
+	.dijitSliderDecrementIconV {
+		&:before {
+			content: $slider-icon-decrement;
+		}
+	}
+
+	/* ---- Rule Mark ---- */
+	
+	.dijitRuleMark {
+		border: 0 none;
+	}
+	
+	.dijitRuleMarkH {
+		border-right: 1px solid $slider-ruler-color;
+	}
+	
+	.dijitRuleMarkV {
+		border-bottom: 1px solid $slider-ruler-color;
+	}
+	
+	.dijitRuleLabelContainerH {
+		margin-top: $slider-ruler-padding;
+		margin-bottom: $slider-ruler-padding;
+	}
+
+	.dijitRuleLabelContainerV {
+		margin-left: $slider-ruler-padding;
+		margin-right: $slider-ruler-padding;
+	}
+
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/form/Slider_rtl.css b/lib/flat/dijit/form/Slider_rtl.css
new file mode 100644
index 000000000..131dd19ae
--- /dev/null
+++ b/lib/flat/dijit/form/Slider_rtl.css
@@ -0,0 +1,32 @@
+.flat .dijitSliderRtl .dijitSliderProgressBarH {
+  float: right;
+  right: 0;
+  left: auto;
+}
+.flat .dijitSliderRtl .dijitSliderLeftBumper {
+  border-left-width: 0;
+  border-right-width: 1px;
+  margin-left: 0;
+  margin-right: 4px;
+  border-radius: 0 1.5px 1.5px 0;
+}
+.flat .dijitSliderRtl .dijitSliderRightBumper {
+  border-left-width: 1px;
+  border-right-width: 0;
+  margin-left: 4px;
+  margin-right: -2px;
+  border-radius: 1.5px 0 0 1.5px;
+}
+.flat .dijitSliderRtl .dijitSliderMoveableH {
+  right: auto;
+  left: 0;
+}
+.flat .dijitSliderRtl .dijitSliderImageHandleV {
+  left: auto;
+}
+.flat .dijitSliderRtl .dijitSliderImageHandleH {
+  left: -50%;
+}
+.flat .dijitSliderRtl .dijitRuleContainerV {
+  float: right;
+}
diff --git a/lib/flat/dijit/form/Slider_rtl.styl b/lib/flat/dijit/form/Slider_rtl.styl
new file mode 100755
index 000000000..f8c53d85b
--- /dev/null
+++ b/lib/flat/dijit/form/Slider_rtl.styl
@@ -0,0 +1,39 @@
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+		
+	.dijitSliderRtl {
+		.dijitSliderProgressBarH {
+			float:right;
+			right:0;
+			left:auto;
+		}
+		.dijitSliderLeftBumper {
+			border-left-width: 0;
+			border-right-width: 1px;
+			margin-left: 0;
+			margin-right: $slider-bar-spacing;
+			border-radius: 0 $slider-bar-radius $slider-bar-radius 0;
+		}
+		.dijitSliderRightBumper {
+			border-left-width: 1px;
+			border-right-width: 0;
+			margin-left: $slider-bar-spacing;
+			margin-right: -2px;
+			border-radius: $slider-bar-radius 0 0 $slider-bar-radius;
+		}
+		.dijitSliderMoveableH {
+			right: auto;
+			left: 0;
+		}
+		.dijitSliderImageHandleV {
+			left:auto;
+		}
+		.dijitSliderImageHandleH {
+			left:-50%;
+		}
+		.dijitRuleContainerV {
+			float:right;
+		}
+	}
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/form/TextBox.css b/lib/flat/dijit/form/TextBox.css
new file mode 100644
index 000000000..568fb9e93
--- /dev/null
+++ b/lib/flat/dijit/form/TextBox.css
@@ -0,0 +1,275 @@
+/* Text Inputs: [TextBox | DateTextBox | CurrencyTextBox | ValidationTextBox | ...] | TextArea
+ * Mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitTextBox
+ * 		.dijitInputField - container that wraps "dijitInputInner" or "dijitPlaceHolder"
+ *
+ * 2. Textbox input
+ * 		.dijitInputInner
+ * 		.dijitPlaceHolder
+ *
+ * 3. States - Hover, Focused, Disabled, Error, Error while Focused e.g.
+ * 		.dijitTextBoxHover
+ * 		.dijitTextBoxFocused
+ * 		.dijitTextBoxDisabled
+ *      .dijitTextBoxError
+ *      .dijitTextBoxErrorFocused
+ *
+*/
+.flat .dijitTextBox,
+.flat .dijitInputInner {
+  line-height: 20px;
+}
+.flat .dijitTextBox {
+  background: #fff;
+  border: 1px solid #9e9e9e;
+  border-radius: 3px;
+  -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
+  -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
+  -o-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
+  -ms-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
+  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
+}
+.flat .dijitTextArea {
+  padding: 4px 6px;
+}
+.flat .dijitTextBox .dijitInputField {
+  padding: 0 4px;
+  margin: 0 2px;
+}
+.flat .dijitSelect.alt-primary,
+.flat .dijitComboBox.alt-primary,
+.flat .dijitSpinner.alt-primary {
+  border-color: #1e88e5;
+}
+.flat .dijitSelect.alt-success,
+.flat .dijitComboBox.alt-success,
+.flat .dijitSpinner.alt-success {
+  border-color: #43a047;
+}
+.flat .dijitSelect.alt-info,
+.flat .dijitComboBox.alt-info,
+.flat .dijitSpinner.alt-info {
+  border-color: #03a9f4;
+}
+.flat .dijitSelect.alt-warning,
+.flat .dijitComboBox.alt-warning,
+.flat .dijitSpinner.alt-warning {
+  border-color: #fb8c00;
+}
+.flat .dijitSelect.alt-danger,
+.flat .dijitComboBox.alt-danger,
+.flat .dijitSpinner.alt-danger {
+  border-color: #e53935;
+}
+.flat .dijitSelect.alt-inverse,
+.flat .dijitComboBox.alt-inverse,
+.flat .dijitSpinner.alt-inverse {
+  border-color: #616161;
+}
+.flat .dijitTextBox .dijitInputInner,
+.flat .dijitValidationTextBox .dijitValidationContainer,
+.flat .dijitTextBox .dijitInputField .dijitPlaceHolder {
+  padding: 4px;
+}
+.flat .dijitTextBoxHover {
+  border-color: #2196f3;
+  -webkit-transition-duration: 0.25s;
+  -moz-transition-duration: 0.25s;
+  -o-transition-duration: 0.25s;
+  -ms-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+}
+.flat .dijitTextBoxFocused {
+  border-color: #2196f3;
+  -webkit-transition-duration: 0.1s;
+  -moz-transition-duration: 0.1s;
+  -o-transition-duration: 0.1s;
+  -ms-transition-duration: 0.1s;
+  transition-duration: 0.1s;
+}
+.flat .dijitTextBoxDisabled {
+  color: #9e9e9e;
+  background-color: #f5f5f5;
+  border-color: #e3e3e3;
+}
+.flat .dijitComboBoxDisabled.alt-primary,
+.flat .dijitSpinnerDisabled.alt-primary {
+  background: #f5f5f5;
+  color: #9e9e9e;
+  border: 1px solid #6db2ee;
+}
+.flat .dijitComboBoxDisabled.alt-primary .dijitButtonNode,
+.flat .dijitSpinnerDisabled.alt-primary .dijitButtonNode {
+  background: #6db2ee;
+  color: #f2f2f2;
+}
+.flat .dijitSpinnerDisabled.alt-primary .dijitSpinnerButtonContainer {
+  border-left-color: #6db2ee;
+}
+.flat .dijitSpinnerRtlDisabled.alt-primary .dijitSpinnerButtonContainer {
+  border-right-color: #6db2ee;
+}
+.flat .dijitSelectDisabled.alt-primary {
+  border-color: #6db2ee;
+}
+.flat .dijitSelectDisabled.alt-primary .dijitStretch,
+.flat .dijitSelectDisabled.alt-primary .dijitButtonNode {
+  background: #6db2ee;
+  color: #f2f2f2;
+}
+.flat .dijitComboBoxDisabled.alt-success,
+.flat .dijitSpinnerDisabled.alt-success {
+  background: #f5f5f5;
+  color: #9e9e9e;
+  border: 1px solid #7dc981;
+}
+.flat .dijitComboBoxDisabled.alt-success .dijitButtonNode,
+.flat .dijitSpinnerDisabled.alt-success .dijitButtonNode {
+  background: #7dc981;
+  color: #f2f2f2;
+}
+.flat .dijitSpinnerDisabled.alt-success .dijitSpinnerButtonContainer {
+  border-left-color: #7dc981;
+}
+.flat .dijitSpinnerRtlDisabled.alt-success .dijitSpinnerButtonContainer {
+  border-right-color: #7dc981;
+}
+.flat .dijitSelectDisabled.alt-success {
+  border-color: #7dc981;
+}
+.flat .dijitSelectDisabled.alt-success .dijitStretch,
+.flat .dijitSelectDisabled.alt-success .dijitButtonNode {
+  background: #7dc981;
+  color: #f2f2f2;
+}
+.flat .dijitComboBoxDisabled.alt-info,
+.flat .dijitSpinnerDisabled.alt-info {
+  background: #f5f5f5;
+  color: #9e9e9e;
+  border: 1px solid #56c9fd;
+}
+.flat .dijitComboBoxDisabled.alt-info .dijitButtonNode,
+.flat .dijitSpinnerDisabled.alt-info .dijitButtonNode {
+  background: #56c9fd;
+  color: #f2f2f2;
+}
+.flat .dijitSpinnerDisabled.alt-info .dijitSpinnerButtonContainer {
+  border-left-color: #56c9fd;
+}
+.flat .dijitSpinnerRtlDisabled.alt-info .dijitSpinnerButtonContainer {
+  border-right-color: #56c9fd;
+}
+.flat .dijitSelectDisabled.alt-info {
+  border-color: #56c9fd;
+}
+.flat .dijitSelectDisabled.alt-info .dijitStretch,
+.flat .dijitSelectDisabled.alt-info .dijitButtonNode {
+  background: #56c9fd;
+  color: #f2f2f2;
+}
+.flat .dijitComboBoxDisabled.alt-warning,
+.flat .dijitSpinnerDisabled.alt-warning {
+  background: #f5f5f5;
+  color: #9e9e9e;
+  border: 1px solid #ffb557;
+}
+.flat .dijitComboBoxDisabled.alt-warning .dijitButtonNode,
+.flat .dijitSpinnerDisabled.alt-warning .dijitButtonNode {
+  background: #ffb557;
+  color: #f2f2f2;
+}
+.flat .dijitSpinnerDisabled.alt-warning .dijitSpinnerButtonContainer {
+  border-left-color: #ffb557;
+}
+.flat .dijitSpinnerRtlDisabled.alt-warning .dijitSpinnerButtonContainer {
+  border-right-color: #ffb557;
+}
+.flat .dijitSelectDisabled.alt-warning {
+  border-color: #ffb557;
+}
+.flat .dijitSelectDisabled.alt-warning .dijitStretch,
+.flat .dijitSelectDisabled.alt-warning .dijitButtonNode {
+  background: #ffb557;
+  color: #f2f2f2;
+}
+.flat .dijitComboBoxDisabled.alt-danger,
+.flat .dijitSpinnerDisabled.alt-danger {
+  background: #f5f5f5;
+  color: #9e9e9e;
+  border: 1px solid #ee7e7c;
+}
+.flat .dijitComboBoxDisabled.alt-danger .dijitButtonNode,
+.flat .dijitSpinnerDisabled.alt-danger .dijitButtonNode {
+  background: #ee7e7c;
+  color: #f2f2f2;
+}
+.flat .dijitSpinnerDisabled.alt-danger .dijitSpinnerButtonContainer {
+  border-left-color: #ee7e7c;
+}
+.flat .dijitSpinnerRtlDisabled.alt-danger .dijitSpinnerButtonContainer {
+  border-right-color: #ee7e7c;
+}
+.flat .dijitSelectDisabled.alt-danger {
+  border-color: #ee7e7c;
+}
+.flat .dijitSelectDisabled.alt-danger .dijitStretch,
+.flat .dijitSelectDisabled.alt-danger .dijitButtonNode {
+  background: #ee7e7c;
+  color: #f2f2f2;
+}
+.flat .dijitComboBoxDisabled.alt-inverse,
+.flat .dijitSpinnerDisabled.alt-inverse {
+  background: #f5f5f5;
+  color: #9e9e9e;
+  border: 1px solid #989898;
+}
+.flat .dijitComboBoxDisabled.alt-inverse .dijitButtonNode,
+.flat .dijitSpinnerDisabled.alt-inverse .dijitButtonNode {
+  background: #989898;
+  color: #f2f2f2;
+}
+.flat .dijitSpinnerDisabled.alt-inverse .dijitSpinnerButtonContainer {
+  border-left-color: #989898;
+}
+.flat .dijitSpinnerRtlDisabled.alt-inverse .dijitSpinnerButtonContainer {
+  border-right-color: #989898;
+}
+.flat .dijitSelectDisabled.alt-inverse {
+  border-color: #989898;
+}
+.flat .dijitSelectDisabled.alt-inverse .dijitStretch,
+.flat .dijitSelectDisabled.alt-inverse .dijitButtonNode {
+  background: #989898;
+  color: #f2f2f2;
+}
+.flat .dijitTextBoxError,
+.flat .dijitTextBoxError .dijitButtonNode {
+  border-color: #dd2c00;
+}
+.flat .dijitTextBoxErrorFocused,
+.flat .dijitTextBoxErrorFocused .dijitButtonNode {
+  border: 1px solid #bc2500;
+}
+.flat .dijitValidationTextBoxError .dijitValidationContainer {
+  color: #dd2c00;
+  width: 18px;
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 18px;
+}
+.flat .dijitValidationTextBoxError .dijitValidationContainer:before {
+  content: "\f017";
+}
+.flat .dijitValidationTextBoxError .dijitValidationIcon {
+  display: none;
+}
diff --git a/lib/flat/dijit/form/TextBox.styl b/lib/flat/dijit/form/TextBox.styl
new file mode 100755
index 000000000..b8a1da2e6
--- /dev/null
+++ b/lib/flat/dijit/form/TextBox.styl
@@ -0,0 +1,104 @@
+/* Text Inputs: [TextBox | DateTextBox | CurrencyTextBox | ValidationTextBox | ...] | TextArea
+ * Mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitTextBox
+ * 		.dijitInputField - container that wraps "dijitInputInner" or "dijitPlaceHolder"
+ *
+ * 2. Textbox input
+ * 		.dijitInputInner
+ * 		.dijitPlaceHolder
+ *
+ * 3. States - Hover, Focused, Disabled, Error, Error while Focused e.g.
+ * 		.dijitTextBoxHover
+ * 		.dijitTextBoxFocused
+ * 		.dijitTextBoxDisabled
+ *      .dijitTextBoxError
+ *      .dijitTextBoxErrorFocused
+ *
+*/
+
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+
+	.dijitTextBox,
+	.dijitInputInner {
+		line-height: $line-height;
+	}
+
+	.dijitTextBox {
+		background: $input-background;
+		border: 1px solid $input-border-color;
+		border-radius: $input-border-radius;
+		transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
+	}
+
+	.dijitTextArea {
+		padding: $input-padding $input-padding + 2px;
+	}
+
+	.dijitTextBox {
+		.dijitInputField {
+			padding: 0  $input-padding;
+			margin:0 2px;
+		}
+	}
+
+	create-alternative-textboxes($button-alternative-colors);
+
+	.dijitTextBox .dijitInputInner,
+	.dijitValidationTextBox .dijitValidationContainer,
+	.dijitTextBox .dijitInputField .dijitPlaceHolder {
+		padding: $input-padding;
+	}
+
+	// hover
+	.dijitTextBoxHover {
+		border-color: $input-hover-border-color;
+		transition-duration: .25s;
+	}
+
+	// focused
+	.dijitTextBoxFocused {
+		border-color: $input-focused-border-color;
+		transition-duration: .1s;
+	}
+
+	// disabled
+	.dijitTextBoxDisabled {
+		color: $input-disabled-color;
+		background-color: $input-disabled-background-color;
+		border-color: $input-disabled-border-color;
+	}
+	
+	create-alternative-textboxes-disabled($button-alternative-colors);
+
+	// error
+	.dijitTextBoxError,
+	.dijitTextBoxError .dijitButtonNode {
+		border-color: $input-error-border-color;
+	}
+
+	// error: focused
+	.dijitTextBoxErrorFocused,
+	.dijitTextBoxErrorFocused .dijitButtonNode {
+		border: $input-focused-error-border;
+	}
+
+	// error: icon
+	.dijitValidationTextBoxError {
+		.dijitValidationContainer {
+			color: $input-error-icon-background-color;
+			width: $input-error-icon-width;
+			_icon-core-style();
+			font-size: $input-error-icon-width;
+			&:before {
+				content: $icon-error;
+			}
+		}
+		.dijitValidationIcon {
+			display: none;
+		}
+	}
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/form/TextBox_rtl.css b/lib/flat/dijit/form/TextBox_rtl.css
new file mode 100644
index 000000000..9117b674d
--- /dev/null
+++ b/lib/flat/dijit/form/TextBox_rtl.css
@@ -0,0 +1,21 @@
+.flat .dijitTextBoxRtl .dijitValidationContainer,
+.flat .dijitTextBoxRtl .dijitSpinnerButtonContainer {
+  border-right-width: 1px !important;
+  border-left-width: 0 !important;
+}
+.flat .dijitTextBoxRtlError .dijitValidationContainer {
+  border-left-width: 0;
+  border-right-width: 1px;
+}
+.flat .dijitRtl .dijitPlaceHolder {
+  left: auto;
+  right: 0;
+}
+.flat .dijitTextBoxRtl .dijitSpinnerButtonContainer,
+.flat .dijitValidationTextBoxRtl .dijitValidationContainer,
+.flat .dijitTextBoxRtl .dijitArrowButtonContainer {
+  float: left;
+}
+.flat div.dijitNumberTextBoxRtl {
+  text-align: right;
+}
diff --git a/lib/flat/dijit/form/TextBox_rtl.styl b/lib/flat/dijit/form/TextBox_rtl.styl
new file mode 100755
index 000000000..b7ec2bd08
--- /dev/null
+++ b/lib/flat/dijit/form/TextBox_rtl.styl
@@ -0,0 +1,30 @@
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+	.dijitTextBoxRtl .dijitValidationContainer,
+	.dijitTextBoxRtl .dijitSpinnerButtonContainer {
+		border-right-width: 1px !important;
+		border-left-width: 0 !important;
+	}
+
+	.dijitTextBoxRtlError .dijitValidationContainer {
+  		border-left-width: 0;
+  		border-right-width: 1px;
+	}
+	
+	.dijitRtl .dijitPlaceHolder {
+		left: auto;
+		right: 0;
+	}
+	
+	.dijitTextBoxRtl .dijitSpinnerButtonContainer,
+	.dijitValidationTextBoxRtl .dijitValidationContainer,
+	.dijitTextBoxRtl .dijitArrowButtonContainer {
+		float: left;
+	}
+	
+	div.dijitNumberTextBoxRtl {
+		text-align: right;
+	}
+
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/form/dijit_form_variables.styl b/lib/flat/dijit/form/dijit_form_variables.styl
new file mode 100644
index 000000000..ad1163a61
--- /dev/null
+++ b/lib/flat/dijit/form/dijit_form_variables.styl
@@ -0,0 +1,212 @@
+/* dijit/form/* variables */
+
+@import '../../variables';
+
+/* Button (default) */
+
+$button-default-color = $theme-base-color;
+$button-default-border-color = $border-color;
+$button-padding = $padding $padding * 3;
+$button-border-radius = $border-radius;
+
+// arrow button
+$button-arrow-width = $line-height; // The arrow button size will be 30px by 30px
+$button-arrow-padding = $padding;
+
+// disabled
+$button-disabled-color = $disabled-color;
+$button-disabled-background-color = $disabled-background-color;
+$button-disabled-border-color = $disabled-border-color;
+
+// alternatice button styles
+
+$button-alternative-text-color = $theme-base-color;
+$button-alternative-colors = {
+	alt-primary: $primary,
+	alt-success: $success,
+	alt-info: $info,
+	alt-warning: $warning,
+	alt-danger: $danger,
+	alt-inverse: $inverse
+};
+
+/* Text Inputs (textbox, textarea, validation textbox, etc.) */
+
+$input-padding = $padding;
+$input-border-radius = $border-radius;
+
+// normal
+$input-border-color = $border-color;
+$input-background = $theme-base-color;
+
+// hover
+$input-hover-border-color = $theme-base;
+
+// focused
+$input-focused-border-color = $theme-base;
+
+// disabled
+$input-disabled-color = $disabled-color;
+$input-disabled-background-color = $disabled-background-color;
+$input-disabled-border-color = $disabled-border-color;
+
+// error
+$input-error-border-color = $error;
+
+// error: focused
+$input-focused-error-border = 1px solid darken($error, 15%);
+
+// error icon
+$input-error-icon-width = 18px; // the width of the error icon container and icon height
+$input-error-icon-background-color = $error;
+
+/* CheckBox (and Checkbox Icon) */
+
+$checkbox-height = 16px;
+$checkbox-width = 16px;
+$checkbox-padding = 0;
+$checkbox-border-radius = 2px;
+$checkbox-icon-size = $icon-size;
+$checkbox-icon = "\f00c";
+
+// normal
+$checkbox-background-color = $theme-base-color;
+$checkbox-border-color = $border-color;
+
+// checked
+$checkbox-checked-icon-color = $theme-base-color;
+$checkbox-checked-background-color = $theme-base;
+$checkbox-checked-border-color = $theme-base;
+
+// hover
+// hover unchecked
+$checkbox-hover-unchecked-background-color = $checkbox-background-color;
+$checkbox-hover-unchecked-border-color = 1px solid $theme-base;
+
+// hover checked
+$checkbox-hover-checked-background-color = lighten($checkbox-checked-background-color, 15%);
+$checkbox-hover-checked-border-color = $checkbox-checked-border-color;
+
+// Checkbox icon (within a widget, e.g. toggle button)
+$checkbox-icon-checked-icon-color = $theme-base;
+$checkbox-icon-padding = 0;
+
+// disabled
+$checkbox-disabled-color = $disabled-color;
+$checkbox-disabled-background-color = $disabled-background-color;
+$checkbox-disabled-border-color = $disabled-border-color;
+$checkbox-checked-disabled-color = darken($checkbox-checked-icon-color, 35%); // may need a &:before for icon in Checkbox.styl
+$checkbox-checked-disabled-background-color = lighten($checkbox-checked-background-color, 35%);
+$checkbox-checked-disabled-border-color = $checkbox-checked-disabled-background-color;
+
+/* Radio (and Radio Icon)the styles are using pure CSS */
+
+$radio-height = 16px;
+$radio-width = 16px;
+$radio-icon-size = 16px;
+
+//  normal
+$radio-background-color = $theme-base-color;
+$radio-border-color = $theme-base;
+$radio-border-radius = 50%;
+
+// checked
+$radio-checked-color = $theme-base;
+
+// hover
+$radio-hover-border-color = lighten($radio-checked-color, 25%);
+
+// disabled
+$radio-disabled-background-color = $disabled-background-color;
+$radio-disabled-border-color = $disabled-border-color;
+$radio-checked-disabled-color = lighten($radio-checked-color, 35%); // both border and check
+
+/* Select (only for the button part, the styles for the "dropdown" are defined in the "Menu" section) */
+
+$select-border = 1px solid $border-color;
+$select-button-border-radius = $border-radius * (2/3);
+
+// Select's normal, hover, active and disabled styles are the same as "form/Button"
+
+// focus 
+$select-focus-border = $select-border;
+
+// icons
+$select-date-icon = "\f01e";
+$select-time-icon = "\f01f";
+
+/* Slider */
+
+// bar 
+$slider-bar-width = 3px;// the height for the horizontal slider and the width for the vertical slider
+$slider-bar-radius = $slider-bar-width * .5;
+$slider-bar-spacing = $padding;// the spacing between the buttons and the bar
+
+// honrizontal slider
+// normal 
+$slider-progressbar-background-color = $theme-base;// Background color for the progress(highlight) part of slider bar
+$slider-remainingbar-background-color = $border-color;// Background color for the remaining part of slider bar
+
+// hover
+$slider-hovered-progressbar-border-color = darken($theme-base, 25%);
+
+// focus
+$slider-focused-progressbar-border-color = $slider-progressbar-border-color;
+
+// vertical slider
+// normal 
+$slider-progressbar-verticalr-background-color = $theme-base; 
+$slider-remainingbar-vertical-background-color = $slider-remainingbar-background-color;
+
+// hover
+$slider-hovered-progressbar-vertical-border-color = $slider-hovered-progressbar-border-color;
+
+// focus
+$slider-focused-progressbar-vertical-border-color = $slider-progressbar-vertical-border-color;
+
+// thumbs
+$slider-thumb-background-color = $theme-base-color;
+$slider-thumb-box-shadow = $shadow-depth1;
+$slider-thumb-border-radius = 50%;
+$slider-thumb-border-color = $theme-base;
+$slider-thumb-height = 16px;
+$slider-thumb-width = 16px;
+
+// The center part of the thumb
+$slider-thumb-inner-border-radius = 50%;
+$slider-thumb-inner-height = 10px;
+$slider-thumb-inner-width = 10px;
+$slider-thumb-inner-background-color = $theme-base;
+
+// hover (& focused)
+$slider-thumb-hover-box-shadow = $shadow-depth2;
+
+// label
+$slider-label-text-color = $grey-dark; // text color for labeling
+
+// ruler
+$slider-ruler-color = $grey-light;
+$slider-ruler-padding = $padding * 0.5;
+
+// increment and decrement buttons
+$slider-button-text-color = $theme-base;
+$slider-button-width = 20px;
+$slider-button-height = $slider-button-width;
+$slider-icon-increment = "\f011";
+$slider-icon-decrement = "\f012";
+
+/* Number Spinner */
+
+$numberspinner-button-border = 1px solid $border-color;
+$numberspinner-button-inner-padding = $padding;
+$numberspinner-button-width = ($line-height + $numberspinner-button-inner-padding * 2) + 2px; // 30px
+$numberspinner-button-padding = 0;
+$numberspinner-arrow-padding = $padding;
+$numberspinner-button-border-radius = $border-radius * (2/3);
+
+// icons
+$numberspinner-icon-up = $icon-drop-up;
+$numberspinner-icon-down = $icon-drop-down;
+
+// number spinner button's normal, active and disabled status styles are the same as "form/Button"
+// and the styles of the text input field are the same as "form/TextBox", which is defined in "form/Common.styl"
diff --git a/lib/flat/dijit/images/loadingAnimation.gif b/lib/flat/dijit/images/loadingAnimation.gif
new file mode 100755
index 000000000..d76e4cd7f
--- /dev/null
+++ b/lib/flat/dijit/images/loadingAnimation.gif
diff --git a/lib/flat/dijit/images/progressBarStrips.png b/lib/flat/dijit/images/progressBarStrips.png
new file mode 100755
index 000000000..50644f98c
--- /dev/null
+++ b/lib/flat/dijit/images/progressBarStrips.png
diff --git a/lib/flat/dijit/layout/AccordionContainer.css b/lib/flat/dijit/layout/AccordionContainer.css
new file mode 100644
index 000000000..a5241a770
--- /dev/null
+++ b/lib/flat/dijit/layout/AccordionContainer.css
@@ -0,0 +1,169 @@
+/* Accordion
+ * 
+ * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer)
+ * and the title inside of it (dijitAccordionTitle).   There are 4 basic states to style:
+ * 
+ * 1. closed pane (and default styling): 
+ * 		.dijitAccordionInnerContainer - container for each accordion child
+ * 		.dijitAccordionTitle - title for each accordion child
+ *
+ * 2. active closed pane (ie, mouse down on a title bar)
+ * 		.dijitAccordionInnerContainerActive - for background-color, border
+ * 		.dijitAccordionInnerContainerActive dijitAccordionTitle - for text color
+ * 
+ * 3. open pane (expanded child)
+ *		.dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane)
+ *			setting a margin so that there's blue trim all the way around the child
+ *
+ * 		These rules need to override the closed pane active:
+ *
+ * 		.dijitAccordionInnerContainerSelected - for background-color, border
+ * 		.dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color
+ * 
+ * 4. hovered pane, open or closed
+ * 		The selectors below affect hovering over both a closed pane (ie, hovering a title bar),
+ * 		and hovering over an open pane.   Also, treat mouse down on an open pane as a hover:
+ *
+ * 		.dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border
+ * 		.dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color
+ */
+.flat .dijitAccordionContainer {
+  border: 0 none;
+  border-radius: 3px;
+}
+.flat .dijitAccordionInnerContainer {
+  background-color: #fff;
+  border: 1px solid #9e9e9e;
+  border-radius: 3px;
+  -webkit-transition-property: background-color, border;
+  -moz-transition-property: background-color, border;
+  -o-transition-property: background-color, border;
+  -ms-transition-property: background-color, border;
+  transition-property: background-color, border;
+  -webkit-transition-duration: 0.3s;
+  -moz-transition-duration: 0.3s;
+  -o-transition-duration: 0.3s;
+  -ms-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-timing-function: linear;
+  -moz-transition-timing-function: linear;
+  -o-transition-timing-function: linear;
+  -ms-transition-timing-function: linear;
+  transition-timing-function: linear;
+}
+.flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainer {
+  margin-top: 0;
+  position: relative;
+}
+.flat .dijitAccordionTitle {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #9e9e9e;
+  padding: 4px;
+  border-radius: 3px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-transition: all 0.05s linear;
+  -moz-transition: all 0.05s linear;
+  -o-transition: all 0.05s linear;
+  -ms-transition: all 0.05s linear;
+  transition: all 0.05s linear;
+  background: #fff;
+  border: 0 none;
+  border-radius: 3px;
+}
+.flat .dijitAccordionTitle .arrowTextUp,
+.flat .dijitAccordionTitle .arrowTextDown {
+  display: none;
+  float: right;
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  font-size: 0px;
+}
+.flat .dijitAccordionTitle .arrowTextUp:before,
+.flat .dijitAccordionTitle .arrowTextDown:before {
+  content: "\f007";
+  font-size: 18px;
+}
+.flat .dijitAccordionTitle .arrowTextUp {
+  display: block;
+}
+.flat .dijitAccordionTitle .arrowTextUp:before {
+  content: "\f006";
+}
+.flat .dijitAccordionInnerContainerHover .dijitAccordionTitle {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  background: #f2f2f2;
+  border-color: #d9d9d9;
+}
+.flat .dijitAccordionInnerContainerActive .dijitAccordionTitle {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+}
+.flat .dijitAccordionInnerContainerSelected {
+  border: 0 none;
+}
+.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle {
+  color: #fff;
+  background-color: #2196f3;
+  border-radius: 3px 3px 0 0;
+}
+.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextUp {
+  display: none;
+}
+.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextDown {
+  display: block;
+}
+.flat .dijitAccordionContainer .dijitAccordionChildWrapper {
+  background-color: #fff;
+  border: 1px solid #9e9e9e;
+  border-top: 0 none;
+  position: relative;
+  z-index: 1;
+  clear: both;
+  border-radius: 0 0 3px 3px;
+}
+.flat .dijitAccordionInnerContainer {
+  border-radius: 0;
+}
+.flat .dijitAccordionInnerContainer .dijitAccordionTitle {
+  border-radius: 0;
+}
+.flat .dijitAccordionInnerContainer:not(:last-child) .dijitAccordionChildWrapper {
+  border-radius: 0;
+}
+.flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainer {
+  border-top: 0 none;
+}
+.flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainerSelected:last-child .dijitAccordionTitle {
+  border-radius: 0;
+}
+.flat .dijitAccordionInnerContainer:first-child,
+.flat .dijitAccordionInnerContainer:first-child .dijitAccordionTitle {
+  border-radius: 3px 3px 0 0;
+}
+.flat .dijitAccordionInnerContainer:last-child,
+.flat .dijitAccordionInnerContainer:last-child .dijitAccordionTitle {
+  border-radius: 0 0 3px 3px;
+}
diff --git a/lib/flat/dijit/layout/AccordionContainer.styl b/lib/flat/dijit/layout/AccordionContainer.styl
new file mode 100755
index 000000000..ebfcd538b
--- /dev/null
+++ b/lib/flat/dijit/layout/AccordionContainer.styl
@@ -0,0 +1,160 @@
+/* Accordion
+ * 
+ * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer)
+ * and the title inside of it (dijitAccordionTitle).   There are 4 basic states to style:
+ * 
+ * 1. closed pane (and default styling): 
+ * 		.dijitAccordionInnerContainer - container for each accordion child
+ * 		.dijitAccordionTitle - title for each accordion child
+ *
+ * 2. active closed pane (ie, mouse down on a title bar)
+ * 		.dijitAccordionInnerContainerActive - for background-color, border
+ * 		.dijitAccordionInnerContainerActive dijitAccordionTitle - for text color
+ * 
+ * 3. open pane (expanded child)
+ *		.dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane)
+ *			setting a margin so that there's blue trim all the way around the child
+ *
+ * 		These rules need to override the closed pane active:
+ *
+ * 		.dijitAccordionInnerContainerSelected - for background-color, border
+ * 		.dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color
+ * 
+ * 4. hovered pane, open or closed
+ * 		The selectors below affect hovering over both a closed pane (ie, hovering a title bar),
+ * 		and hovering over an open pane.   Also, treat mouse down on an open pane as a hover:
+ *
+ * 		.dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border
+ * 		.dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color
+ */
+
+@import 'dijit_layout_variables';
+
+.{$theme-name} {
+
+	.dijitAccordionContainer {
+		border: 0 none;
+		border-radius: $accordion-border-radius;
+	}
+
+	.dijitAccordionInnerContainer {
+		background-color: $accordion-background-color;
+		border: 1px solid $accordion-border-color;
+		border-radius: $accordion-border-radius;
+		transition-property: background-color, border;
+		transition-duration: .3s;
+		transition-timing-function: linear;
+
+		+.dijitAccordionInnerContainer {
+			margin-top: $accordion-spacing;
+			position: relative;
+		}
+	}
+
+	/* title bar */
+
+	.dijitAccordionTitle {
+		button-style();
+		border: 0 none;
+		border-radius: $accordion-border-radius;
+
+		.arrowTextUp,
+		.arrowTextDown {
+			display: none;
+			float: right;
+			_icon-core-style();
+			text-align: center;
+			font-size: 0px;
+			&:before {
+				content: $icon-collapse;
+				font-size: $icon-expand-collapse-size;
+			}
+		}
+		.arrowTextUp {
+			display: block;
+			&:before {
+				content: $icon-expand;
+			}
+		}
+	}
+
+	/* Hover */
+
+	.dijitAccordionInnerContainerHover .dijitAccordionTitle {
+		button-hover-style();
+	}
+
+	/* Active */
+
+	.dijitAccordionInnerContainerActive .dijitAccordionTitle {
+		button-active-style();
+	}
+
+	/* Selected */
+
+	.dijitAccordionInnerContainerSelected {
+		border: 0 none;
+		.dijitAccordionTitle {
+			color: $accordion-title-bar-checked-text-color;
+			background-color: $accordion-title-bar-checked-background-color;
+			border-radius: $accordion-border-radius $accordion-border-radius 0 0;
+
+			.arrowTextUp {
+				display: none;
+			}
+			.arrowTextDown {
+				display: block;
+			}
+		}
+	}
+
+	/* content wrapper */
+
+	.dijitAccordionContainer .dijitAccordionChildWrapper {
+		background-color: $accordion-content-background-color;
+		border: 1px solid $accordion-content-border-color;
+		border-top: 0 none;
+		position: relative;
+		z-index: 1;
+		clear: both;
+		border-radius: 0 0 $accordion-border-radius $accordion-border-radius;
+	}
+
+
+	/* if the spacing between panes is 0 */
+
+	if($accordion-spacing[0] <= "0") {
+		.dijitAccordionInnerContainer {
+			border-radius: 0;
+			
+			.dijitAccordionTitle {
+				border-radius: 0;
+			}
+
+			&:not(:last-child) {
+				.dijitAccordionChildWrapper {
+					border-radius: 0;
+				}
+			}
+
+			+.dijitAccordionInnerContainer {
+				border-top: 0 none;
+			}
+			+.dijitAccordionInnerContainerSelected:last-child {
+				.dijitAccordionTitle {
+					border-radius: 0;
+				}
+			}
+
+			&:first-child,
+			&:first-child .dijitAccordionTitle {
+				border-radius: $accordion-border-radius $accordion-border-radius 0 0;
+			}
+			&:last-child,
+			&:last-child .dijitAccordionTitle {
+				border-radius: 0 0 $accordion-border-radius $accordion-border-radius;
+			}
+		}	
+	}
+	
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/layout/AccordionContainer_rtl.css b/lib/flat/dijit/layout/AccordionContainer_rtl.css
new file mode 100644
index 000000000..578a93728
--- /dev/null
+++ b/lib/flat/dijit/layout/AccordionContainer_rtl.css
@@ -0,0 +1,4 @@
+.flat .dijitAccordionTitle .arrowTextUp,
+.flat .dijitAccordionTitle .arrowTextDown {
+  float: left;
+}
diff --git a/lib/flat/dijit/layout/AccordionContainer_rtl.styl b/lib/flat/dijit/layout/AccordionContainer_rtl.styl
new file mode 100644
index 000000000..76ab2d37c
--- /dev/null
+++ b/lib/flat/dijit/layout/AccordionContainer_rtl.styl
@@ -0,0 +1,12 @@
+@import 'dijit_layout_variables';
+
+.{$theme-name} {
+
+	.dijitAccordionTitle  {
+		.arrowTextUp, 
+		.arrowTextDown {
+			float: left;
+		}
+	}
+
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/layout/BorderContainer.css b/lib/flat/dijit/layout/BorderContainer.css
new file mode 100644
index 000000000..464ebf5a5
--- /dev/null
+++ b/lib/flat/dijit/layout/BorderContainer.css
@@ -0,0 +1,97 @@
+/* BorderContainer 
+
+Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable. 
+
+Styling the BorderContainer widget consists of the following: 
+
+.dijitBorderContainer - for border and padding of the entire border container
+
+.dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer.  
+
+.dijitBorderContainer-dijitTabContainerTop,
+.dijitBorderContainer-dijitTabContainerBottom,
+.dijitBorderContainer-dijitTabContainerLeft,
+.dijitBorderContainer-dijitTabContainerRight,
+.dijitBorderContainer-dijitAccordionContainer   -for border of the border containers within TabContainer or AccordionContainer widget
+
+.dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers
+
+Splitters and gutters:  
+
+.dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter 
+.dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter
+.dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter 
+.dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter
+.dijitSplitterHHover - for background-color of a hovered horizontal splitter
+.dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter
+.dijitSplitterVHover  - for background-color of a hovered vertical splitter
+.dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter
+.dijitSplitterHActive - for background-color of an active horizontal splitter
+.dijitSplitterVActive - for background-color of an active horizontal splitter
+*/
+.flat .dijitBorderContainer {
+/* matches the width of the splitters between panes */
+  padding: 5px;
+}
+.flat .dijitSplitContainer-child,
+.flat .dijitBorderContainer-child {
+  border: 1px solid #9e9e9e;
+}
+.flat .dijitBorderContainer-dijitTabContainerTop,
+.flat .dijitBorderContainer-dijitTabContainerBottom,
+.flat .dijitBorderContainer-dijitTabContainerLeft,
+.flat .dijitBorderContainer-dijitTabContainerRight,
+.flat .dijitBorderContainer-dijitAccordionContainer {
+/* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper),
+		 * so override rule setting border on domNode
+		 */
+  border: none;
+}
+.flat .dijitBorderContainer-dijitBorderContainer {
+  border: 0;
+  padding: 0;
+}
+.flat .dijitSplitterH,
+.flat .dijitGutterH {
+  background: none;
+  border: 0;
+  height: 5px;
+}
+.flat .dijitSplitterH .dijitSplitterThumb {
+  background: #9e9e9e;
+  height: 1px;
+  top: 2px;
+  width: 19px;
+}
+.flat .dijitSplitterV,
+.flat .dijitGutterV {
+  background: none;
+  border: 0;
+  width: 5px;
+  margin: 0;
+}
+.flat .dijitSplitterV .dijitSplitterThumb {
+  background: #9e9e9e;
+  height: 19px;
+  left: 2px;
+  width: 1px;
+  margin: 0;
+}
+.flat .dijitSplitterHHover,
+.flat .dijitSplitterVHover {
+  font-size: 1px;
+  background: #f2f2f2;
+}
+.flat .dijitSplitterHHover .dijitSplitterThumb,
+.flat .dijitSplitterVHover .dijitSplitterThumb {
+  background: #767676;
+}
+.flat .dijitSplitterHActive,
+.flat .dijitSplitterVActive {
+  font-size: 1px;
+  background: #f2f2f2;
+}
+.flat .dijitSplitterHActive .dijitSplitterThumb,
+.flat .dijitSplitterVActive .dijitSplitterThumb {
+  background: #767676;
+}
diff --git a/lib/flat/dijit/layout/BorderContainer.styl b/lib/flat/dijit/layout/BorderContainer.styl
new file mode 100755
index 000000000..c8c4de295
--- /dev/null
+++ b/lib/flat/dijit/layout/BorderContainer.styl
@@ -0,0 +1,117 @@
+/* BorderContainer 
+
+Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable. 
+
+Styling the BorderContainer widget consists of the following: 
+
+.dijitBorderContainer - for border and padding of the entire border container
+
+.dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer.  
+
+.dijitBorderContainer-dijitTabContainerTop,
+.dijitBorderContainer-dijitTabContainerBottom,
+.dijitBorderContainer-dijitTabContainerLeft,
+.dijitBorderContainer-dijitTabContainerRight,
+.dijitBorderContainer-dijitAccordionContainer   -for border of the border containers within TabContainer or AccordionContainer widget
+
+.dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers
+
+Splitters and gutters:  
+
+.dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter 
+.dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter
+.dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter 
+.dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter
+.dijitSplitterHHover - for background-color of a hovered horizontal splitter
+.dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter
+.dijitSplitterVHover  - for background-color of a hovered vertical splitter
+.dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter
+.dijitSplitterHActive - for background-color of an active horizontal splitter
+.dijitSplitterVActive - for background-color of an active horizontal splitter
+*/
+
+@import 'dijit_layout_variables';
+
+.{$theme-name} {
+
+	.dijitBorderContainer {
+		/* matches the width of the splitters between panes */
+		padding: $splitter-size;
+	}
+
+	.dijitSplitContainer-child,
+	.dijitBorderContainer-child {
+		border: 1px solid $bordercontainer-border-color;
+	}
+
+	.dijitBorderContainer-dijitTabContainerTop,
+	.dijitBorderContainer-dijitTabContainerBottom,
+	.dijitBorderContainer-dijitTabContainerLeft,
+	.dijitBorderContainer-dijitTabContainerRight,
+	.dijitBorderContainer-dijitAccordionContainer {
+		/* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper),
+		 * so override rule setting border on domNode
+		 */
+		 border: none;
+	}
+
+	.dijitBorderContainer-dijitBorderContainer {
+		border: 0;
+		padding: 0;
+	}
+
+	/* Splitters and gutters */
+
+	.dijitSplitterH,
+	.dijitGutterH {
+		background:none;
+		border:0;
+		height: $splitter-size;
+	}
+
+	.dijitSplitterH .dijitSplitterThumb {
+		background: $splitter-color;
+		height: 1px;
+		top: isEven($splitter-size) ? half($splitter-size) : half($splitter-size - 1);
+		width: 19px;
+	}
+
+	.dijitSplitterV,
+	.dijitGutterV {
+		background:	$splitter-background-color;
+		border: 0;
+		width:	$splitter-size;
+		margin: 0;
+	}
+
+	.dijitSplitterV .dijitSplitterThumb {
+		background: $splitter-color;
+		height: 19px;
+		left: isEven($splitter-size) ? half($splitter-size) : half($splitter-size - 1);
+		width: 1px;
+		margin: 0;
+	}
+
+	/* hovered */
+	.dijitSplitterHHover,
+	.dijitSplitterVHover {
+		font-size: 1px;
+		background: $splitter-hovered-background-color;
+
+		.dijitSplitterThumb {
+			background: $splitter-hovered-color;
+		}
+	}
+
+	/* active (dragged) */
+
+	.dijitSplitterHActive,
+	.dijitSplitterVActive {
+		font-size: 1px;
+		background: $splitter-dragged-background-color;
+		.dijitSplitterThumb {
+			background: $splitter-dragged-color;
+		}
+	}
+	
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/layout/ContentPane.css b/lib/flat/dijit/layout/ContentPane.css
new file mode 100644
index 000000000..d912ba4ee
--- /dev/null
+++ b/lib/flat/dijit/layout/ContentPane.css
@@ -0,0 +1,36 @@
+/* ContentPane 
+ *	
+ * .dijitContentPane
+ * 	set padding for basic content pane
+ * 	
+ * Nested layouts:
+ * 
+ * .dijitTabContainerTop-dijitContentPane,
+ * .dijitTabContainerLeft-dijitContentPane,
+ * .dijitTabContainerBottom-dijitContentPane,
+ * .dijitTabContainerRight-dijitContentPane
+ * 	set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container
+ *
+ * .dijitAccordionContainer-dijitContentPane
+ * 	set background-color and padding of ContentPane nested within Accordion
+ *
+ * .dijitSplitContainer-dijitContentPane, 
+ *	set background-color and padding of ContentPane nested within a SplitContainer 
+ *
+ * .dijitBorderContainer-dijitContentPane
+ *	set background-color and padding of ContentPane nested within a BorderContainer 
+ */
+.flat .dijitContentPane {
+  background-color: #fff;
+  padding: 8px;
+}
+.flat .dijitTabContainerTop-dijitContentPane,
+.flat .dijitTabContainerLeft-dijitContentPane,
+.flat .dijitTabContainerBottom-dijitContentPane,
+.flat .dijitTabContainerRight-dijitContentPane,
+.flat .dijitAccordionContainer-dijitContentPane {
+  background-color: #fff;
+  padding: 8px;
+  left: 0 !important;
+  top: 0 !important;
+}
diff --git a/lib/flat/dijit/layout/ContentPane.styl b/lib/flat/dijit/layout/ContentPane.styl
new file mode 100755
index 000000000..eadc8ea7f
--- /dev/null
+++ b/lib/flat/dijit/layout/ContentPane.styl
@@ -0,0 +1,45 @@
+/* ContentPane 
+ *	
+ * .dijitContentPane
+ * 	set padding for basic content pane
+ * 	
+ * Nested layouts:
+ * 
+ * .dijitTabContainerTop-dijitContentPane,
+ * .dijitTabContainerLeft-dijitContentPane,
+ * .dijitTabContainerBottom-dijitContentPane,
+ * .dijitTabContainerRight-dijitContentPane
+ * 	set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container
+ *
+ * .dijitAccordionContainer-dijitContentPane
+ * 	set background-color and padding of ContentPane nested within Accordion
+ *
+ * .dijitSplitContainer-dijitContentPane, 
+ *	set background-color and padding of ContentPane nested within a SplitContainer 
+ *
+ * .dijitBorderContainer-dijitContentPane
+ *	set background-color and padding of ContentPane nested within a BorderContainer 
+ */
+
+@import 'dijit_layout_variables';
+
+.{$theme-name} {
+
+	.dijitContentPane {
+		background-color: $contentpane-background-color;
+		padding: $contentpane-padding;
+	}		
+
+	/* contentpane in other layouts */
+	.dijitTabContainerTop-dijitContentPane,
+	.dijitTabContainerLeft-dijitContentPane,
+	.dijitTabContainerBottom-dijitContentPane,
+	.dijitTabContainerRight-dijitContentPane,
+	.dijitAccordionContainer-dijitContentPane {
+		background-color: $contentpane-nested-background-color;
+		padding: $contentpane-nested-padding;
+	    left: 0 !important;
+	    top: 0 !important;
+	}
+	
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/layout/TabContainer.css b/lib/flat/dijit/layout/TabContainer.css
new file mode 100644
index 000000000..21fa58920
--- /dev/null
+++ b/lib/flat/dijit/layout/TabContainer.css
@@ -0,0 +1,359 @@
+/* TabContainer 
+ * 
+ * Styling TabContainer means styling the TabList and Its content container  (dijitTitlePane)
+ * 
+ * Tab List: (including 4 kinds of tab location)
+ * 		.dijitTabContainerTop-tabs     - tablist container at top
+ * 		.dijitTabContainerBottom-tabs  - tablist container at bottom
+ * 		.dijitTabContainerLeft-tabs    - tablist container at left
+ * 		.dijitTabContainerRight-tabs   - tablist container at right
+ * 
+ * Tab Strip Button:
+ * 		.dijitTabStripIcon - tab strip button icon
+ * 		.dijitTabStripMenuIcon - down arrow icon position
+ * 		.dijitTabStripSlideLeftIcon - left arrow icon position
+ * 		.dijitTabStripSlideRightIcon - right arrow icon position
+ * 
+ * 		.tabStripButtonDisabled - styles for disabled tab strip buttons
+ * 
+ * Tab Button:
+ * 		.dijitTabContainerTop-tabs .dijitTab     - styles for top tab button container
+ * 		.dijitTabContainerBottom-tabs .dijitTab  - styles for bottom tab button container
+ * 		.dijitTabContainerLeft-tabs .dijitTab    - styles for left tab button container
+ * 		.dijitTabContainerRight-tabs .dijitTab   - styles for right tab button container
+ * 
+ * 		.dijitTabContainerTop-tabs .dijitTabChecked .dijitTab
+ * 				- styles for selected status of top tab button
+ * 		same to Bottom, Left, Right Tabs
+ * 
+ * 		.dijitTabHover .dijitTab   - styles when mouse hover on tab buttons
+ * 		.dijitTabActive .dijitTab  - styles when mouse down on tab buttons
+ * 		.dijitTabChecked .dijitTab  - styles when on buttons of selected tab
+ * 
+ * 		.dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs
+ * 		.dijitTabCloseButtonHover - styles when mouse hover on close action button
+ * 		.dijitTabCloseButtonActive - styles when mouse down on close action button
+ * 
+ * Tab Button: (checked status)
+ * 
+ * Tab Content Container:
+ * 		.dijitTabContainerTop-dijitContentPane
+ * 		.dijitTabContainerBottom-dijitContentPane
+ * 		.dijitTabContainerLeft-dijitContentPane
+ * 		.dijitTabContainerRight-dijitContentPane - for background and padding
+ * 
+ * Nested Tabs:
+ * 		.dijitTabContainerNested - Container for nested tabs
+ * 		.dijitTabContainerTabListNested - tab list container for nested tabs
+ */
+.flat .dijitTabContainer {
+  border-radius: 3px;
+}
+.flat .dijitTabPaneWrapper {
+  background: #fff;
+  border: 1px solid #9e9e9e;
+  margin: 0;
+  padding: 0;
+  border-radius: 0 0 3px 3px;
+}
+.flat .dijitTabContainerTop-tabs,
+.flat .dijitTabContainerBottom-tabs,
+.flat .dijitTabContainerLeft-tabs,
+.flat .dijitTabContainerRight-tabs {
+  border: none;
+}
+.flat .dijitTabSpacer {
+  display: none;
+}
+.flat .dijitTab {
+  border: 1px solid transparent;
+  background-color: #fff;
+  text-align: center;
+  -webkit-transition-property: background, padding, margin;
+  -moz-transition-property: background, padding, margin;
+  -o-transition-property: background, padding, margin;
+  -ms-transition-property: background, padding, margin;
+  transition-property: background, padding, margin;
+  -webkit-transition-duration: 0.2s;
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -ms-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  -webkit-transition-timing-function: ease;
+  -moz-transition-timing-function: ease;
+  -o-transition-timing-function: ease;
+  -ms-transition-timing-function: ease;
+  transition-timing-function: ease;
+  position: relative;
+  z-index: 0;
+}
+.flat .dijitTab:before {
+  content: "";
+  display: block;
+  position: absolute;
+}
+.flat .dijitTabHover {
+  background-color: #f2f2f2;
+}
+.flat .dijitTabActive {
+  background-color: #e6e6e6;
+}
+.flat .dijitTabChecked {
+  border: 1px solid #9e9e9e;
+  z-index: 1;
+}
+.flat .dijitTabChecked.dijitTabHover,
+.flat .dijitTabChecked.dijitTabActive {
+  border: 1px solid #9e9e9e;
+  background-color: #fff;
+  color: #424242;
+}
+.flat .dijitTabDisabled {
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .tabStripButton {
+  background-color: transparent;
+  border: none;
+}
+.flat .dijitTabCloseButton {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1;
+  font-size: 1em;
+  vertical-align: middle;
+  margin-left: 4px;
+  opacity: 0.35;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
+  filter: alpha(opacity=35);
+}
+.flat .dijitTabCloseButton:before {
+  content: "\f00e";
+}
+.flat .dijitTabCloseButtonHover {
+  opacity: 0.75;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
+  filter: alpha(opacity=75);
+}
+.flat .dijitTabCloseButtonActive {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.flat .dijitTabContainerTop-tabs .dijitTab {
+  margin-right: 0;
+  padding: 6px 16px;
+  border-bottom-color: #9e9e9e;
+  border-left: none;
+  border-right: none;
+}
+.flat .dijitTabContainerTop-tabs .dijitTabChecked {
+  border-bottom: 1px solid #fff;
+  border-left: 1px solid #9e9e9e;
+  border-right: 1px solid #9e9e9e;
+}
+.flat .dijitTabContainerTop-tabs .dijitTabChecked:before {
+  height: 3px;
+  background: #2196f3;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+}
+.flat .dijitTabListContainer-top {
+  margin-top: 1px;
+}
+.flat .dijitTabListContainer-top .dijitTab {
+  top: 0;
+}
+.flat .dijitTabPaneWrapper.dijitTabContainerBottom-container {
+  border-radius: 3px 3px 0 0;
+}
+.flat .dijitTabContainerBottom-tabs .dijitTab {
+  margin-right: 0;
+  padding: 6px 16px;
+  border-top-color: #9e9e9e;
+  border-left: none;
+  border-right: none;
+}
+.flat .dijitTabContainerBottom-tabs .dijitTabChecked {
+  border-top: 1px solid #fff;
+  border-left: 1px solid #9e9e9e;
+  border-right: 1px solid #9e9e9e;
+}
+.flat .dijitTabContainerBottom-tabs .dijitTabChecked:before {
+  height: 3px;
+  background: #2196f3;
+  bottom: -1px;
+  left: -1px;
+  right: -1px;
+}
+.flat .dijitTabListContainer-bottom {
+  margin-top: -1px;
+}
+.flat .dijitTabListContainer-bottom .dijitTab {
+  top: 0;
+}
+.flat .dijitTabPaneWrapper.dijitTabContainerLeft-container {
+  border-radius: 0 3px 3px 0;
+}
+.flat .dijitTabContainerLeft-tabs .dijitTab {
+  margin-bottom: 0;
+  padding: 8px 12px;
+  border-right-color: #9e9e9e;
+  border-top: none;
+  border-bottom: none;
+}
+.flat .dijitTabContainerLeft-tabs .dijitTabChecked {
+  border-right: 1px solid #fff;
+  border-top: 1px solid #9e9e9e;
+  border-bottom: 1px solid #9e9e9e;
+}
+.flat .dijitTabContainerLeft-tabs .dijitTabChecked:before {
+  width: 3px;
+  background: #2196f3;
+  bottom: -1px;
+  left: -1px;
+  top: -1px;
+}
+.flat .dijitTabPaneWrapper.dijitTabContainerRight-container {
+  border-radius: 3px 0 0 3px;
+}
+.flat .dijitTabContainerRight-tabs .dijitTab {
+  margin-bottom: 0;
+  padding: 8px 12px;
+  border-left-color: #9e9e9e;
+  border-top: none;
+  border-bottom: none;
+}
+.flat .dijitTabContainerRight-tabs .dijitTabChecked {
+  border-left: 1px solid #fff;
+  border-top: 1px solid #9e9e9e;
+  border-bottom: 1px solid #9e9e9e;
+}
+.flat .dijitTabContainerRight-tabs .dijitTabChecked:before {
+  width: 3px;
+  background: #2196f3;
+  bottom: -1px;
+  right: -1px;
+  top: -1px;
+}
+.flat .tabStripButton {
+  background-color: #fff;
+  border: 1px solid transparent;
+  -webkit-transition-property: background-color;
+  -moz-transition-property: background-color;
+  -o-transition-property: background-color;
+  -ms-transition-property: background-color;
+  transition-property: background-color;
+}
+.flat .dijitTabListContainer-top .tabStripButton,
+.flat .dijitTabListContainer-bottom .tabStripButton {
+  padding: 4px 8px;
+  margin-left: 0;
+  margin-right: 0;
+}
+.flat .dijitTabListContainer-top .tabStripButton {
+  margin-bottom: 1px;
+}
+.flat .dijitTabListContainer-bottom .tabStripButton {
+  margin-top: 1px;
+}
+.flat .tabStripButtonHover {
+  background-color: #f2f2f2;
+}
+.flat .tabStripButtonActive {
+  background-color: #e6e6e6;
+}
+.flat .dijitTabStripIcon {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2196f3;
+  vertical-align: middle;
+}
+.flat .dijitTabStripIcon:before {
+  content: "\f004";
+}
+.flat .dijitTabStripSlideRightIcon:before {
+  content: "\f005";
+}
+.flat .dijitTabStripMenuIcon:before {
+  content: "\f006";
+}
+.flat .dijitTabListContainer-top .tabStripButtonDisabled,
+.flat .dijitTabListContainer-bottom .tabStripButtonDisabled {
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .dijitTabContainerNested .dijitTabListWrapper {
+  height: auto;
+}
+.flat .dijitTabContainerTabListNested .dijitTab {
+  color: #2196f3;
+  margin: 4px;
+  padding: 4px 8px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  -webkit-transition-property: background-color, border-color;
+  -moz-transition-property: background-color, border-color;
+  -o-transition-property: background-color, border-color;
+  -ms-transition-property: background-color, border-color;
+  transition-property: background-color, border-color;
+  -webkit-transition-duration: 0.3s;
+  -moz-transition-duration: 0.3s;
+  -o-transition-duration: 0.3s;
+  -ms-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+}
+.flat .dijitTabContainerTabListNested .dijitTabHover {
+  background-color: #f2f2f2;
+}
+.flat .dijitTabContainerTabListNested .dijitTabActive {
+  color: #2196f3;
+  background-color: #e6e6e6;
+}
+.flat .dijitTabContainerTabListNested .dijitTabChecked,
+.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabHover,
+.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabActive {
+  color: #fff;
+  background-color: #2196f3;
+}
+.flat .dijitTabContainerTabListNested .dijitTabChecked:before,
+.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabHover:before,
+.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabActive:before {
+  display: none;
+}
+.flat .dijitTabContainerTabListNested.dijitTabContainerTop-tabs .dijitTab {
+  margin-right: 4px;
+}
+.flat .dijitTabContainerTabListNested.dijitTabContainerBottom-tabs .dijitTab {
+  margin-right: 4px;
+}
+.flat .dijitTabContainerTabListNested.dijitTabContainerLeft-tabs .dijitTab {
+  margin-bottom: 4px;
+}
+.flat .dijitTabContainerTabListNested.dijitTabContainerRight-tabs .dijitTab {
+  margin-bottom: 4px;
+}
+.flat .dijitTabPaneWrapperNested {
+  border: none; /* prevent double border */
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
diff --git a/lib/flat/dijit/layout/TabContainer.styl b/lib/flat/dijit/layout/TabContainer.styl
new file mode 100755
index 000000000..a341ed064
--- /dev/null
+++ b/lib/flat/dijit/layout/TabContainer.styl
@@ -0,0 +1,446 @@
+/* TabContainer 
+ * 
+ * Styling TabContainer means styling the TabList and Its content container  (dijitTitlePane)
+ * 
+ * Tab List: (including 4 kinds of tab location)
+ * 		.dijitTabContainerTop-tabs     - tablist container at top
+ * 		.dijitTabContainerBottom-tabs  - tablist container at bottom
+ * 		.dijitTabContainerLeft-tabs    - tablist container at left
+ * 		.dijitTabContainerRight-tabs   - tablist container at right
+ * 
+ * Tab Strip Button:
+ * 		.dijitTabStripIcon - tab strip button icon
+ * 		.dijitTabStripMenuIcon - down arrow icon position
+ * 		.dijitTabStripSlideLeftIcon - left arrow icon position
+ * 		.dijitTabStripSlideRightIcon - right arrow icon position
+ * 
+ * 		.tabStripButtonDisabled - styles for disabled tab strip buttons
+ * 
+ * Tab Button:
+ * 		.dijitTabContainerTop-tabs .dijitTab     - styles for top tab button container
+ * 		.dijitTabContainerBottom-tabs .dijitTab  - styles for bottom tab button container
+ * 		.dijitTabContainerLeft-tabs .dijitTab    - styles for left tab button container
+ * 		.dijitTabContainerRight-tabs .dijitTab   - styles for right tab button container
+ * 
+ * 		.dijitTabContainerTop-tabs .dijitTabChecked .dijitTab
+ * 				- styles for selected status of top tab button
+ * 		same to Bottom, Left, Right Tabs
+ * 
+ * 		.dijitTabHover .dijitTab   - styles when mouse hover on tab buttons
+ * 		.dijitTabActive .dijitTab  - styles when mouse down on tab buttons
+ * 		.dijitTabChecked .dijitTab  - styles when on buttons of selected tab
+ * 
+ * 		.dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs
+ * 		.dijitTabCloseButtonHover - styles when mouse hover on close action button
+ * 		.dijitTabCloseButtonActive - styles when mouse down on close action button
+ * 
+ * Tab Button: (checked status)
+ * 
+ * Tab Content Container:
+ * 		.dijitTabContainerTop-dijitContentPane
+ * 		.dijitTabContainerBottom-dijitContentPane
+ * 		.dijitTabContainerLeft-dijitContentPane
+ * 		.dijitTabContainerRight-dijitContentPane - for background and padding
+ * 
+ * Nested Tabs:
+ * 		.dijitTabContainerNested - Container for nested tabs
+ * 		.dijitTabContainerTabListNested - tab list container for nested tabs
+ */
+
+@import 'dijit_layout_variables';
+
+.{$theme-name} {
+
+	/************ common styles *************/
+
+	.dijitTabContainer {
+		border-radius: $tab-wrapper-border-radius;
+	}
+
+	.dijitTabPaneWrapper {
+		background: $tab-wrapper-background-color;
+		border: 1px solid $tab-wrapper-border-color;
+		margin: 0;
+		padding: 0;
+		border-radius: 0 0 $tab-wrapper-border-radius $tab-wrapper-border-radius;
+	}
+
+	.dijitTabContainerTop-tabs,
+	.dijitTabContainerBottom-tabs,
+	.dijitTabContainerLeft-tabs,
+	.dijitTabContainerRight-tabs {
+		border: none;
+	}
+
+	.dijitTabSpacer {
+		// display: none if !$tab-has-gutter;
+		display: none;
+	}
+
+	/* tabs */
+
+	.dijitTab {
+		border: 1px solid $tab-border-color;
+		background-color: $tab-background-color;
+		text-align: center;
+		transition-property: background, padding, margin;
+		transition-duration: .2s;
+		transition-timing-function: ease;
+		position: relative;
+		z-index: 0;
+		if ($tab-checked-has-highlight-border) {
+			&:before {
+				content: "";
+				display: block;
+				position: absolute;
+			}
+		}
+	}
+
+	/* tabs: hover */
+
+	.dijitTabHover {
+		background-color: $tab-hover-background-color;
+	}
+
+	/* tabs: active */
+
+	.dijitTabActive {
+		background-color: $tab-active-background-color;
+	}
+
+	/* tabs: checked */
+
+	.dijitTabChecked {
+		border: 1px solid $tab-checked-border-color;
+		z-index: 1;
+		&.dijitTabHover,
+		&.dijitTabActive {
+			border: 1px solid $tab-checked-border-color;
+			background-color: $tab-checked-background-color;
+			color: $tab-checked-text-color;
+		}
+	}
+
+	/* tabs: disabled */
+
+	.dijitTabDisabled {
+		opacity: $disabled-opacity;
+	}
+
+	/* tabs: strip button */
+
+	.tabStripButton {
+		background-color: transparent;
+		border: none;
+	}
+
+	/* tabs: close button */
+
+	.dijitTabCloseButton {
+		_icon-core-style();
+		line-height: 1;
+		font-size: 1em;
+		vertical-align: middle;
+		margin-left: $tab-padding;
+		opacity: $tab-close-button-opacity;
+		&:before {
+			content: $tab-close-button-icon;
+		}
+	}
+	.dijitTabCloseButtonHover {
+		opacity: $tab-close-button-hover-opacity;
+	}
+	.dijitTabCloseButtonActive {
+		opacity: $tab-close-button-active-opacity;
+	}
+
+	/************* end common **************/
+
+
+	/*************** top tabs ***************/
+
+	.dijitTabContainerTop-tabs {
+		.dijitTab {
+			margin-right: $tab-spacing;
+			padding: $tab-top-padding;
+			border-bottom-color: $tab-wrapper-border-color;
+			border-left: none;
+			border-right: none;
+		}
+		// .dijitTabHover,
+		// .dijitTabActive,
+		// .dijitTabChecked {
+		// }
+		.dijitTabChecked {
+			border-bottom: 1px solid $tab-wrapper-background-color;
+			border-left: 1px solid $tab-wrapper-border-color;
+			border-right: 1px solid $tab-wrapper-border-color;
+			if ($tab-checked-has-highlight-border) {
+				&:before {
+					height: 3px;
+					background: $tab-highlight-color;
+					top: -1px;
+					left: -1px;
+					right: -1px;
+				}
+			}
+		}
+	}
+
+	.dijitTabListContainer-top {
+		margin-top: 1px;
+		.dijitTab {
+			top:0;
+		}
+	}
+
+	/*************** end top tabs **************/
+
+	/*************** bottom tabs ***************/
+
+	.dijitTabPaneWrapper.dijitTabContainerBottom-container {
+		border-radius: $tab-wrapper-border-radius $tab-wrapper-border-radius 0 0;
+	}
+
+	.dijitTabContainerBottom-tabs {
+		.dijitTab {
+			margin-right: $tab-spacing;
+			padding: $tab-bottom-padding;
+			border-top-color: $tab-wrapper-border-color;
+			border-left: none;
+			border-right: none;
+		}
+		// .dijitTabHover,
+		// .dijitTabActive,
+		// .dijitTabChecked {
+		// }
+		.dijitTabChecked {
+			border-top: 1px solid $tab-wrapper-background-color;
+			border-left: 1px solid $tab-wrapper-border-color;
+			border-right: 1px solid $tab-wrapper-border-color;
+			if ($tab-checked-has-highlight-border) {
+				&:before {
+					height: 3px;
+					background: $tab-highlight-color;
+					bottom: -1px;
+					left: -1px;
+					right: -1px;
+				}
+			}
+		}
+	}
+
+	.dijitTabListContainer-bottom {
+		margin-top: -1px;
+		.dijitTab {
+			top: 0;
+		}
+	}
+
+	/************ end bottom tabs ************/
+
+	/*************** left tabs ***************/
+
+	.dijitTabPaneWrapper.dijitTabContainerLeft-container {
+		border-radius: 0 $tab-wrapper-border-radius $tab-wrapper-border-radius 0;
+	}
+
+	.dijitTabContainerLeft-tabs {
+		.dijitTab {
+			margin-bottom: $tab-spacing;
+			padding: $tab-left-padding;
+			border-right-color: $tab-wrapper-border-color;
+			border-top: none;
+			border-bottom: none;
+		}
+		// .dijitTabHover,
+		// .dijitTabActive,
+		// .dijitTabChecked {
+		// }
+		.dijitTabChecked {
+			border-right: 1px solid $tab-wrapper-background-color;
+			border-top: 1px solid $tab-wrapper-border-color;
+			border-bottom: 1px solid $tab-wrapper-border-color;
+			if ($tab-checked-has-highlight-border) {
+				&:before {
+					width: 3px;
+					background: $tab-highlight-color;
+					bottom: -1px;
+					left: -1px;
+					top: -1px;
+				}
+			}
+		}
+	}
+
+	/************** end left tabs *************/
+
+	/*************** right tabs ***************/
+
+	.dijitTabPaneWrapper.dijitTabContainerRight-container{
+		border-radius: $tab-wrapper-border-radius 0 0 $tab-wrapper-border-radius
+	 }
+
+	.dijitTabContainerRight-tabs {
+		 .dijitTab {
+			margin-bottom: $tab-spacing;
+			padding: $tab-right-padding;
+			border-left-color: $tab-wrapper-border-color;
+			border-top: none;
+			border-bottom: none;
+		}
+		// .dijitTabHover,
+		// .dijitTabActive,
+		// .dijitTabChecked {
+		// }
+		.dijitTabChecked {
+			border-left: 1px solid $tab-wrapper-background-color;
+			border-top: 1px solid $tab-wrapper-border-color;
+			border-bottom: 1px solid $tab-wrapper-border-color;
+			if ($tab-checked-has-highlight-border) {
+				&:before {
+					width: 3px;
+					background: $tab-highlight-color;
+					bottom: -1px;
+					right: -1px;
+					top: -1px;
+				}
+			}
+		}
+	}
+
+	/************* end right tabs *************/
+
+	/************ left/right scroll buttons + menu button ***********/
+	.tabStripButton {
+		background-color: $tab-strip-button-background-color;
+		border: 1px solid $tab-strip-button-border-color;
+		transition-property: background-color;
+	}
+
+	.dijitTabListContainer-top ,
+	.dijitTabListContainer-bottom {
+		.tabStripButton {
+			padding: $tab-padding $tab-padding*2;
+			margin-left: $tab-spacing;
+			margin-right $tab-spacing;
+		}
+	}
+
+	.dijitTabListContainer-top {
+		.tabStripButton {
+			margin-bottom: 1px;
+		}
+	}
+
+	.dijitTabListContainer-bottom {
+		.tabStripButton {
+			margin-top: 1px;
+		}
+	}
+
+	.tabStripButtonHover {
+		background-color: $tab-strip-button-hover-background-color;
+	}
+
+	.tabStripButtonActive {
+		background-color: $tab-strip-button-active-background-color;
+	}
+
+	.dijitTabStripIcon {
+		_icon-core-style();
+		color: $tab-strip-button-arrow-color;
+		vertical-align: middle;
+		&:before {
+			content: $tab-left-icon;
+		}
+	}
+
+	.dijitTabStripSlideRightIcon {
+		&:before {
+			content: $tab-right-icon;
+		}
+	}
+
+	.dijitTabStripMenuIcon {
+		&:before {
+			content: $tab-menu-icon;
+		}
+	}
+
+	/* disabled */
+
+	.dijitTabListContainer-top .tabStripButtonDisabled,
+	.dijitTabListContainer-bottom .tabStripButtonDisabled {
+		opacity: $disabled-opacity;
+	}
+
+	/*********** end left/right scroll buttons + menu button *********/
+
+	/*************** nested tabs ***************/
+
+	.dijitTabContainerNested .dijitTabListWrapper {
+		height: auto;
+	}
+
+	.dijitTabContainerTabListNested {
+		.dijitTab {
+			color: $nestedtab-text-color;
+			margin: $tab-padding;
+			padding: $nestedtab-padding;
+			border: 1px solid $nestedtab-border-color;
+			border-radius: $nestedtab-border-radius;
+			transition-property: background-color, border-color;
+	 		transition-duration: .3s;
+		}
+		.dijitTabHover {
+			background-color: $nestedtab-hover-background-color;
+		}
+		.dijitTabActive {
+			color: $nestedtab-active-text-color;
+			background-color:$nestedtab-active-background-color;
+		}
+		.dijitTabChecked,
+		.dijitTabChecked.dijitTabHover,
+		.dijitTabChecked.dijitTabActive {
+			color: $nestedtab-checked-text-color;
+			background-color: $nestedtab-checked-background-color;
+			&:before {
+				display: none;
+			}
+		}
+
+	}
+
+	/************* nested top tabs *************/
+
+	.dijitTabContainerTabListNested.dijitTabContainerTop-tabs .dijitTab {
+		margin-right: $nestedtab-spacing;
+	}
+
+	/************* nested bottom tabs *************/
+
+	.dijitTabContainerTabListNested.dijitTabContainerBottom-tabs .dijitTab {
+		margin-right: $nestedtab-spacing;
+	}
+
+	/************* nested left tabs *************/
+
+	.dijitTabContainerTabListNested.dijitTabContainerLeft-tabs .dijitTab {
+		margin-bottom: $nestedtab-spacing;
+	}
+
+	/************* nested right tabs *************/
+
+	.dijitTabContainerTabListNested.dijitTabContainerRight-tabs .dijitTab {
+		margin-bottom: $nestedtab-spacing;
+	}
+
+
+	.dijitTabPaneWrapperNested {
+		border: none; /* prevent double border */
+		box-shadow: none;
+	}
+
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/layout/TabContainer_rtl.css b/lib/flat/dijit/layout/TabContainer_rtl.css
new file mode 100644
index 000000000..b60a895fa
--- /dev/null
+++ b/lib/flat/dijit/layout/TabContainer_rtl.css
@@ -0,0 +1,13 @@
+.flat .dijitTabContainerTop-tabs .dijitTabRtl,
+.flat .dijitTabContainerBottom-tabs .dijitTabRtl {
+  margin-right: 0;
+  margin-left: -1px;
+}
+.flat .dijitTabControllerRtl,
+.flat .dijitTabControllerRtl .nowrapTabStrip {
+  text-align: right;
+}
+.flat .dijitTabRtl .dijitTabCloseButton {
+  margin-left: 0;
+  margin-right: 4px;
+}
diff --git a/lib/flat/dijit/layout/TabContainer_rtl.styl b/lib/flat/dijit/layout/TabContainer_rtl.styl
new file mode 100755
index 000000000..ea4892d02
--- /dev/null
+++ b/lib/flat/dijit/layout/TabContainer_rtl.styl
@@ -0,0 +1,23 @@
+@import 'dijit_layout_variables';
+
+.{$theme-name} {
+
+	.dijitTabContainerTop-tabs,
+	.dijitTabContainerBottom-tabs {
+		.dijitTabRtl {
+			margin-right: 0;
+			margin-left: -1px;
+		}
+	}
+
+	.dijitTabControllerRtl,
+	.dijitTabControllerRtl .nowrapTabStrip {
+	    text-align: right;  
+	}
+
+	.dijitTabRtl .dijitTabCloseButton {
+		margin-left: 0;
+		margin-right: $tab-padding;
+	}
+	
+}
\ No newline at end of file
diff --git a/lib/flat/dijit/layout/dijit_layout_variables.styl b/lib/flat/dijit/layout/dijit_layout_variables.styl
new file mode 100644
index 000000000..fdda4b59e
--- /dev/null
+++ b/lib/flat/dijit/layout/dijit_layout_variables.styl
@@ -0,0 +1,135 @@
+/* dijit/layout/* variables */
+
+@import '../../variables';
+
+/* BorderContainer*/
+
+$bordercontainer-padding = $padding;
+$bordercontainer-border-color = $border-color;
+
+// splitter
+$splitter-size = isEven($bordercontainer-padding) ? $bordercontainer-padding + 1 : $bordercontainer-padding; // the width of the splitter, will always be an odd number since the splitter bar's width is always 1px 
+$splitter-color = $border-color; // color of the splitter thumb (the 1px wide bar)
+$splitter-hovered-color = darken($splitter-color, 25%);
+$splitter-dragged-color = $splitter-hovered-color;
+$splitter-background-color = none;
+$splitter-hovered-background-color = darken(#fff, 5%);
+$splitter-dragged-background-color = darken(#fff, 5%);
+ 
+/* ContentPane */
+
+$contentpane-padding = $padding * 2;
+$contentpane-background-color = $theme-base-color;
+
+// contentpane in other layout widgets (accordion and tab container)
+$contentpane-nested-padding = $padding * 2;
+$contentpane-nested-background-color = $theme-base-color;
+
+/* TabContainer */
+
+$tab-highlight-color = $theme-base;
+$tab-padding = $padding;
+$tab-checked-has-highlight-border = true; // whether to have a highlight bar on the edge of the tab
+
+// TabContainer: wrapper
+// (the outer container)
+$tab-wrapper-background-color = $theme-base-color;
+$tab-wrapper-border-color = $border-color;
+$tab-wrapper-border-radius = $border-radius;
+
+// tabs
+$tab-background-color = $tab-wrapper-background-color;
+$tab-border-color = transparent;
+$tab-spacing = 0; // space between tabs
+
+// hover
+$tab-hover-background-color = darken($theme-base-color, 5%);
+
+// active
+$tab-active-background-color = darken($theme-base-color, 10%);
+
+// checked
+$tab-checked-border-color = $tab-wrapper-border-color;
+$tab-checked-background-color = $tab-wrapper-background-color;
+$tab-checked-text-color = $grey-dark;
+
+// icons
+$tab-left-icon = "\f004";
+$tab-right-icon = "\f005";
+$tab-menu-icon = "\f006";
+
+// close button
+$tab-close-button-icon = "\f00e";
+$tab-close-button-opacity = .35;
+
+// hover
+$tab-close-button-hover-opacity = .75;
+
+// active
+$tab-close-button-active-opacity = 1;
+
+// tab dtrip button
+$tab-strip-button-background-color = $tab-background-color;
+$tab-strip-button-border-color = $tab-border-color;
+
+// hover
+$tab-strip-button-hover-background-color = $tab-hover-background-color;
+
+// active
+$tab-strip-button-active-background-color = $tab-active-background-color;
+
+// arrow
+$tab-strip-button-arrow-color = $theme-base;
+
+// tabs: top
+$tab-top-padding = $tab-padding * 1.5 $tab-padding * 4;
+
+// tabs: bottom
+$tab-bottom-padding = $tab-top-padding;
+
+// tabs: left
+$tab-left-padding = $tab-padding * 2 $tab-padding * 3;
+
+// tabs: right
+$tab-right-padding = $tab-left-padding;
+
+// nested tab container
+$nestedtab-spacing = $padding;
+$nestedtab-padding = $tab-padding $tab-padding * 2;
+$nestedtab-border-color = transparent;
+$nestedtab-border-radius = $border-radius;
+
+// normal
+$nestedtab-text-color = $theme-base;
+
+// hover
+$nestedtab-hover-background-color = $tab-hover-background-color;
+
+// active
+$nestedtab-active-text-color = $theme-base;
+$nestedtab-active-background-color = $tab-active-background-color;
+
+// checked
+$nestedtab-checked-background-color = $theme-base;
+$nestedtab-checked-text-color = $theme-base-color;
+
+/* AccordionContainer */
+
+$accordion-spacing = 0; // space between accordion panes; minimum value is 0
+$accordion-border-color = $border-color;
+$accordion-border-radius = $border-radius;
+$accordion-background-color = $theme-base-color;
+
+// accordion title bar 
+// normal, hover and active status styles are inherited from "form/Button"
+
+// checked
+$accordion-title-bar-checked-background-color = $theme-base;
+$accordion-title-bar-checked-text-color = $theme-base-color;
+
+// content pane
+$accordion-content-border-color = $accordion-border-color;
+$accordion-content-background-color = $theme-base-color;
+
+// icons
+// uses common vars directly
diff --git a/lib/flat/dojox/dijit/README.md b/lib/flat/dojox/dijit/README.md
new file mode 100644
index 000000000..7e3d71bd3
--- /dev/null
+++ b/lib/flat/dojox/dijit/README.md
@@ -0,0 +1 @@
+dojox/dijit
diff --git a/lib/flat/dojox/layout/README.md b/lib/flat/dojox/layout/README.md
new file mode 100644
index 000000000..6bb6b2f2b
--- /dev/null
+++ b/lib/flat/dojox/layout/README.md
@@ -0,0 +1 @@
+dojox/layout
\ No newline at end of file
diff --git a/lib/flat/flat.css b/lib/flat/flat.css
new file mode 100755
index 000000000..569982c04
--- /dev/null
+++ b/lib/flat/flat.css
@@ -0,0 +1,37 @@
+/* dijit base */
+@import url("flat_dijit.css");
+
+/* dijit */
+@import url("dijit/Calendar.css");
+@import url("dijit/ColorPalette.css");
+@import url("dijit/Common.css");
+@import url("dijit/Dialog.css");
+@import url("dijit/Editor.css");
+@import url("dijit/InlineEditBox.css");
+@import url("dijit/Menu.css");
+@import url("dijit/ProgressBar.css");
+@import url("dijit/TimePicker.css");
+@import url("dijit/TitlePane.css");
+@import url("dijit/Toolbar.css");
+@import url("dijit/Tree.css"); 
+
+/* layout */
+@import url("dijit/layout/AccordionContainer.css");
+@import url("dijit/layout/BorderContainer.css");
+@import url("dijit/layout/ContentPane.css");
+@import url("dijit/layout/TabContainer.css");
+
+/* form */
+@import url("dijit/form/Button.css");
+@import url("dijit/form/Checkbox.css");
+@import url("dijit/form/NumberSpinner.css");
+@import url("dijit/form/RadioButton.css");
+@import url("dijit/form/Select.css");
+@import url("dijit/form/Slider.css");
+@import url("dijit/form/TextBox.css");
+
+/* icons */
+@import url("icons/flat-icons.css");
+
+/* rtl */
+@import url("flat_rtl.css");
diff --git a/lib/flat/flat_dijit.css b/lib/flat/flat_dijit.css
new file mode 100644
index 000000000..ab6002a42
--- /dev/null
+++ b/lib/flat/flat_dijit.css
@@ -0,0 +1,1690 @@
+.dijitReset {	
+	margin:0;
+	border:0;
+	padding:0;
+	font: inherit;
+	/*line-height:normal;*/
+	color: inherit;
+}
+.dj_a11y .dijitReset {
+	-moz-appearance: none; 
+}
+.dijitInline {
+	display:inline-block;			
+	#zoom: 1; 
+	#display:inline; 
+	border:0;
+	padding:0;
+	vertical-align:middle;
+	#vertical-align: auto;	
+}
+table.dijitInline {
+	display:inline-table;
+	box-sizing: content-box; -moz-box-sizing: content-box;
+}
+.dijitHidden {
+	display: none !important;
+}
+.dijitVisible {
+	display: block !important;	
+	position: relative;			
+}
+.dj_ie6 .dijitComboBox .dijitInputContainer,
+.dijitInputContainer {
+	#zoom: 1;
+	overflow: hidden;
+	float: none !important; 
+	position: relative;
+}
+.dj_ie7 .dijitInputContainer {
+	float: left !important; 
+	clear: left;
+	display: inline-block !important; 
+}
+.dj_ie .dijitSelect input,
+.dj_ie input.dijitTextBox,
+.dj_ie .dijitTextBox input {
+	font-size: 100%;
+}
+.dijitSelect .dijitButtonText {
+	float: left;
+	vertical-align: top;
+}
+TABLE.dijitSelect {
+	padding: 0 !important; 
+}
+.dijitTextBox .dijitSpinnerButtonContainer,
+.dijitTextBox .dijitArrowButtonContainer,
+.dijitValidationTextBox .dijitValidationContainer {
+	float: right;
+	text-align: center;
+}
+.dijitSelect input.dijitInputField,
+.dijitTextBox input.dijitInputField {
+	
+	padding-left: 0 !important;
+	padding-right: 0 !important;
+}
+.dijitValidationTextBox .dijitValidationContainer {
+	display: none;
+}
+.dijitTeeny {
+	font-size:1px;
+	line-height:1px;
+}
+.dijitOffScreen { 
+	position: absolute !important;
+	left: 50% !important;
+	top: -10000px !important;
+}
+.dijitPopup {
+	position: absolute;
+	background-color: transparent;
+	margin: 0;
+	border: 0;
+	padding: 0;
+}
+.dijitPositionOnly {
+	padding: 0 !important;
+	border: 0 !important;
+	background-color: transparent !important;
+	background-image: none !important;
+	height: auto !important;
+	width: auto !important;
+}
+.dijitNonPositionOnly {
+	float: none !important;
+	position: static !important;
+	margin: 0 0 0 0 !important;
+	vertical-align: middle !important;
+}
+.dijitBackgroundIframe {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	z-index: -1;
+	border: 0;
+	padding: 0;
+	margin: 0;
+}
+.dijitDisplayNone {
+	display:none !important;
+}
+.dijitContainer {
+	overflow: hidden;	
+}
+.dj_a11y .dijitIcon,
+.dj_a11y div.dijitArrowButtonInner, 
+.dj_a11y span.dijitArrowButtonInner,
+.dj_a11y img.dijitArrowButtonInner,
+.dj_a11y .dijitCalendarIncrementControl,
+.dj_a11y .dijitTreeExpando {
+	display: none;
+}
+.dijitSpinner div.dijitArrowButtonInner {
+	display: block; 
+}
+.dj_a11y .dijitA11ySideArrow {
+	display: inline !important; 
+	cursor: pointer;
+}
+.dj_a11y .dijitCalendarDateLabel {
+	padding: 1px;
+	border: 0px !important;
+}
+.dj_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel {
+	border-style: solid !important;
+	border-width: 1px !important;
+	padding: 0;
+}
+.dj_a11y .dijitCalendarDateTemplate {
+	padding-bottom: 0.1em !important;	
+	border: 0px !important;
+}
+.dj_a11y .dijitButtonNode {
+	border: black outset medium !important;
+	
+	padding: 0 !important;
+}
+.dj_a11y .dijitArrowButton {
+	padding: 0 !important;
+}
+.dj_a11y .dijitButtonContents {
+	margin: 0.15em; 
+}
+.dj_a11y .dijitTextBoxReadOnly .dijitInputField,
+.dj_a11y .dijitTextBoxReadOnly .dijitButtonNode {
+	border-style: outset!important;
+	border-width: medium!important;
+	border-color: #999 !important;
+	color:#999 !important;
+}
+.dijitButtonNode * {
+	vertical-align: middle;
+	/*vertical-align: baseline;*/
+}
+.dijitSelect .dijitArrowButtonInner,
+.dijitButtonNode .dijitArrowButtonInner {
+	background: no-repeat center;
+	direction: ltr; 
+}
+.dijitLeft {
+	background-position:left top;
+	background-repeat:no-repeat;
+}
+.dijitStretch {
+	white-space:nowrap;			
+	background-repeat:repeat-x;
+}
+.dijitRight {
+	#display:inline;				
+	background-position:right top;
+	background-repeat:no-repeat;
+}
+.dj_gecko .dj_a11y .dijitButtonDisabled .dijitButtonNode {
+	opacity: 0.5;
+}
+.dijitToggleButton,
+.dijitButton,
+.dijitDropDownButton,
+.dijitComboButton {
+	margin: 0.2em;
+	vertical-align: middle;
+}
+.dijitButtonContents {
+	display: block;		
+}
+td.dijitButtonContents {
+	display: table-cell;	
+}
+.dijitButtonNode img {
+	vertical-align:middle;
+}
+.dijitToolbar .dijitComboButton {
+	border-collapse: separate;
+}
+.dijitToolbar .dijitToggleButton,
+.dijitToolbar .dijitButton,
+.dijitToolbar .dijitDropDownButton,
+.dijitToolbar .dijitComboButton {
+	margin: 0;
+}
+.dijitToolbar .dijitButtonContents {
+	padding: 1px 2px;
+}
+.dj_webkit .dijitToolbar .dijitDropDownButton {
+	/*padding-left: 0.3em;*/
+}
+.dj_gecko .dijitToolbar .dijitButtonNode::-moz-focus-inner {
+	padding:0;
+}
+.dijitSelect {
+	border:1px solid gray;
+}
+.dijitButtonNode {
+	border:1px solid gray;
+	margin:0;
+	line-height:20px;
+	vertical-align: middle;
+	#vertical-align: auto;
+	text-align:center;
+	white-space: nowrap;
+}
+.dj_webkit .dijitSpinner .dijitSpinnerButtonContainer {
+	line-height:inherit;
+}
+.dijitTextBox .dijitButtonNode {
+	border-width: 0;
+}
+.dijitSelect,
+.dijitSelect *,
+.dijitButtonNode,
+.dijitButtonNode * {
+	cursor: pointer;
+}
+.dj_ie .dijitButtonNode {
+	zoom: 1;
+}
+.dj_ie .dijitButtonNode button {
+	overflow: visible;
+}
+div.dijitArrowButton {
+	float: right;
+}
+.dijitTextBox {
+	border: solid black 1px;
+	#overflow: hidden; 
+	width: 15em;	
+	vertical-align: middle;
+}
+.dijitTextBoxReadOnly,
+.dijitTextBoxDisabled {
+	color: gray;
+}
+.dj_safari .dijitTextBoxDisabled input {
+	color: #B0B0B0; 
+}
+.dj_safari textarea.dijitTextAreaDisabled {
+	color: #333; 
+}
+.dj_gecko .dijitTextBoxReadOnly input.dijitInputField, 
+.dj_gecko .dijitTextBoxDisabled input {
+	-moz-user-input: none; 
+}
+.dijitPlaceHolder {
+	color: #999;
+	/*font-style: italic;*/
+	position: absolute;
+	top: 0;
+	left: 0;
+	#filter: ""; 
+}
+.dijitTimeTextBox {
+	width: 8em;
+}
+.dijitTextBox input:focus {
+	outline: none;	
+}
+.dijitTextBoxFocused {
+	outline: 5px -webkit-focus-ring-color;
+}
+.dijitSelect input,
+.dijitTextBox input {
+	float: left; 
+}
+.dj_ie6 input.dijitTextBox,
+.dj_ie6 .dijitTextBox input {
+	float: none;
+}
+.dijitInputInner {
+	border:0 !important;
+	background-color:transparent !important;
+	width:100% !important;
+	box-shadow: none !important;
+	padding-left: 0 !important;
+	padding-right: 0 !important;
+	margin-left: 0 !important;
+	margin-right: 0 !important;
+}
+.dj_a11y .dijitTextBox input {
+	margin: 0 !important;
+}
+.dijitValidationTextBoxError input.dijitValidationInner,
+.dijitSelect input,
+.dijitTextBox input.dijitArrowButtonInner {
+	text-indent: -2em !important;
+	direction: ltr !important;
+	text-align: left !important;
+	/*height: auto !important;*/
+	#text-indent: 0 !important;
+	#letter-spacing: -5em !important;
+	#text-align: right !important;
+}
+.dj_ie .dijitSelect input,
+.dj_ie .dijitTextBox input,
+.dj_ie input.dijitTextBox {
+	overflow-y: visible; 
+	line-height: 20px;
+    height: 20px; 
+}
+.dijitSelect .dijitSelectLabel span {
+	line-height: 100%;
+}
+.dj_ie .dijitSelect .dijitSelectLabel {
+	line-height: normal;
+}
+.dj_ie6 .dijitSelect .dijitSelectLabel,
+.dj_ie7 .dijitSelect .dijitSelectLabel,
+.dj_ie8 .dijitSelect .dijitSelectLabel,
+.dj_iequirks .dijitSelect .dijitSelectLabel,
+.dijitSelect td,
+.dj_ie6 .dijitSelect input,
+.dj_iequirks .dijitSelect input,
+.dj_ie6 .dijitSelect .dijitValidationContainer,
+.dj_ie6 .dijitTextBox input,
+.dj_ie6 input.dijitTextBox,
+.dj_iequirks .dijitTextBox input.dijitValidationInner,
+.dj_iequirks .dijitTextBox input.dijitArrowButtonInner,
+.dj_iequirks .dijitTextBox input.dijitSpinnerButtonInner,
+.dj_iequirks .dijitTextBox input.dijitInputInner,
+.dj_iequirks input.dijitTextBox {
+	line-height: 100%; 
+}
+.dj_a11y input.dijitValidationInner,
+.dj_a11y input.dijitArrowButtonInner {
+	text-indent: 0 !important;
+	width: 1em !important;
+	text-align: left !important;
+	color: black !important;
+}
+.dijitValidationTextBoxError .dijitValidationContainer {
+	display: inline;
+	cursor: default;
+}
+.dijitSpinner .dijitSpinnerButtonContainer,
+.dijitComboBox .dijitArrowButtonContainer,
+.bootstrap .dijitSelect .dijitArrowButton {
+	border-width: 0 0 0 1px !important; 
+}
+.dj_a11y .dijitSelect .dijitArrowButtonContainer,
+.dijitToolbar .dijitComboBox .dijitArrowButtonContainer {
+	border-width: 0 !important;
+}
+.dijitComboBoxMenu {
+	list-style-type: none;
+}
+.dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode {
+	border-width: 0;
+}
+.dj_ie .dj_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode {
+	clear: both; 
+}
+.dj_ie .dijitToolbar .dijitComboBox {
+	vertical-align: middle;
+}
+.dijitTextBox .dijitSpinnerButtonContainer {
+	width: 1em;
+	position: relative !important;
+	overflow: hidden;
+}
+.dijitSpinner .dijitSpinnerButtonInner {
+	width:1em;
+	visibility:hidden !important; 
+	overflow-x:hidden;
+}
+.dijitComboBox .dijitButtonNode,
+.dijitSpinnerButtonContainer .dijitButtonNode {
+	border-width: 0;
+}
+.dj_a11y .dijitSpinnerButtonContainer .dijitButtonNode {
+	border-width: 0px !important;
+	border-style: solid !important;
+}
+.dj_a11y .dijitTextBox .dijitSpinnerButtonContainer,
+.dj_a11y .dijitSpinner .dijitArrowButtonInner,
+.dj_a11y .dijitSpinnerButtonContainer input {
+	width: 1em !important;
+}
+.dj_a11y .dijitSpinner .dijitArrowButtonInner {
+	margin: 0 auto !important; 
+}
+.dj_ie .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
+	padding-left: 0.3em !important;
+	padding-right: 0.3em !important;
+	margin-left: 0.3em !important;
+	margin-right: 0.3em !important;
+	width: 1.4em !important;
+}
+.dj_ie7 .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
+	padding-left: 0 !important; 
+	padding-right: 0 !important;
+	width: 1em !important;
+}
+.dj_ie6 .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
+	margin-left: 0.1em !important;
+	margin-right: 0.1em !important;
+	width: 1em !important;
+}
+.dj_iequirks .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
+	margin-left: 0 !important;
+	margin-right: 0 !important;
+	width: 2em !important;
+}
+.dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
+	padding: 0;
+	position: absolute !important;
+	right: 0;
+	float: none;
+	height: 50%;
+	width: 100%;
+	bottom: auto;
+	left: 0;
+	right: auto;
+}
+.dj_iequirks .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
+	width: auto;
+}
+.dj_a11y .dijitSpinnerButtonContainer .dijitArrowButton {
+	overflow: visible !important;
+}
+.dijitSpinner .dijitSpinnerButtonContainer .dijitDownArrowButton {
+	top: 50%;
+	border-top-width: 1px !important;
+}
+.dijitSpinner .dijitSpinnerButtonContainer .dijitUpArrowButton {
+	#bottom: 50%;	
+	top: 0;
+}
+.dijitSpinner .dijitArrowButtonInner {
+	margin: auto;
+	overflow-x: hidden;
+	/*height: 100% !important;*/
+}
+.dj_iequirks .dijitSpinner .dijitArrowButtonInner {
+	height: auto !important;
+}
+.dijitSpinner .dijitArrowButtonInner .dijitInputField {
+	-moz-transform: scale(0.5);
+	-moz-transform-origin: center top;
+	-webkit-transform: scale(0.5);
+	-webkit-transform-origin: center top;
+	-o-transform: scale(0.5);
+	-o-transform-origin: center top;
+	transform: scale(0.5);
+	transform-origin: left top;
+	padding-top: 0;
+	padding-bottom: 0;
+	padding-left: 0 !important;
+	padding-right: 0 !important;
+	width: 100%;
+	visibility: hidden;
+}
+.dj_ie .dijitSpinner .dijitArrowButtonInner .dijitInputField {
+	/*zoom: 50%;*/ 
+    display: none;
+}
+.dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButtonInner {
+	overflow: hidden;
+}
+.dj_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
+	width: 100%;
+}
+.dj_iequirks .dj_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
+	width: 1em; 
+}
+.dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
+	vertical-align:top;
+	visibility: visible;
+}
+.dj_a11y .dijitSpinnerButtonContainer {
+	width: 1em;
+}
+.dijitCheckBox,
+.dijitRadio,
+.dijitCheckBoxInput {
+	padding: 0;
+	border: 0;
+	width: 20px;
+	height: 20px;
+	background-position:center center;
+	background-repeat:no-repeat;
+	overflow: hidden;
+	cursor: pointer;
+}
+.dijitCheckBox input,
+.dijitRadio input {
+	margin: 0;
+	padding: 0;
+	display: block;
+}
+.dijitCheckBoxInput {
+	opacity: 0.01;
+}
+.dj_ie .dijitCheckBoxInput {
+	filter: alpha(opacity=0);
+}
+.dj_a11y .dijitCheckBox,
+.dj_a11y .dijitRadio {
+	width: auto !important;
+	height: auto !important;
+}
+.dj_a11y .dijitCheckBoxInput {
+	opacity: 1;
+	filter: none;
+	width: auto;
+	height: auto;
+}
+.dj_a11y .dijitFocusedLabel {
+	border: 1px dotted;
+	outline: 0px !important;
+}
+.dijitProgressBar {
+    z-index: 0; 
+}
+.dijitProgressBarEmpty {
+	position:relative;overflow:hidden;
+	border:1px solid black; 	
+	z-index:0;			
+}
+.dijitProgressBarFull {
+	position:absolute;
+	overflow:hidden;
+	z-index:-1;
+	top:0;
+	width:100%;
+}
+.dj_ie6 .dijitProgressBarFull {
+	height:1.6em;
+}
+.dijitProgressBarTile {
+	position:absolute;
+	overflow:hidden;
+	top:0;
+	left:0;
+	bottom:0;
+	right:0;
+	margin:0;
+	padding:0;
+	width: 100%;    
+	height:auto;
+	background-color:#aaa;
+	/*background-attachment: fixed;*/
+}
+.dj_a11y .dijitProgressBarTile {
+	border-width:2px;
+	border-style:solid;
+	background-color:transparent !important;
+}
+.dj_ie6 .dijitProgressBarTile {
+	position:static;
+	height:1.6em;
+}
+.dijitProgressBarIndeterminate .dijitProgressBarTile {
+	
+}
+.dijitProgressBarIndeterminateHighContrastImage {
+	display:none;
+}
+.dj_a11y .dijitProgressBarIndeterminate .dijitProgressBarIndeterminateHighContrastImage {
+	display:block;
+	position:absolute;
+	top:0;
+	bottom:0;
+	margin:0;
+	padding:0;
+	width:100%;
+	height:auto;
+}
+.dijitProgressBarLabel {
+	display:block;
+	position:static;
+	width:100%;
+	text-align:center;
+	background-color:transparent !important;
+}
+.dijitTooltip {
+	position: absolute;
+	z-index: 2000;
+	display: block;
+	
+	left: 0;
+	top: -10000px;
+	overflow: visible;
+}
+.dijitTooltipContainer {
+	border: solid black 2px;
+	background: #b8b5b5;
+	color: black;
+	font-size: small;
+}
+.dijitTooltipFocusNode {
+	padding: 2px 2px 2px 2px;
+}
+.dijitTooltipConnector {
+	position: absolute;
+}
+.dj_a11y .dijitTooltipConnector {
+	display: none;	
+}
+.dijitTooltipData {
+	display:none;
+}
+.dijitLayoutContainer {
+	position: relative;
+	display: block;
+	overflow: hidden;
+}
+.dijitAlignTop,
+.dijitAlignBottom,
+.dijitAlignLeft,
+.dijitAlignRight {
+	position: absolute;
+	overflow: hidden;
+}
+body .dijitAlignClient { position: absolute; }
+.dijitBorderContainer, .dijitBorderContainerNoGutter {
+	position:relative;
+	overflow: hidden;
+    z-index: 0; 
+}
+.dijitBorderContainerPane,
+.dijitBorderContainerNoGutterPane {
+	position: absolute !important;	
+	z-index: 2;		
+}
+.dijitBorderContainer > .dijitTextArea {
+	resize: none;
+}
+.dijitGutter {
+	position: absolute;
+	font-size: 1px;		
+}
+.dijitSplitter {
+	position: absolute;
+	overflow: hidden;
+	z-index: 10;		
+	background-color: #fff;
+	border-color: gray;
+	border-style: solid;
+	border-width: 0;
+}
+.dj_ie .dijitSplitter {
+	z-index: 1;	
+}
+.dijitSplitterActive {
+	z-index: 11 !important;
+}
+.dijitSplitterCover {
+	position:absolute;
+	z-index:-1;
+	top:0;
+	left:0;
+	width:100%;
+	height:100%;
+}
+.dijitSplitterCoverActive {
+	z-index:3 !important;
+}
+.dj_ie .dijitSplitterCover {
+	background: white;
+	filter: alpha(opacity=0);
+}
+.dijitSplitterH {
+	height: 7px;
+	border-top:1px;
+	border-bottom:1px;
+	cursor: row-resize;
+}
+.dijitSplitterV {
+	width: 7px;
+	border-left:1px;
+	border-right:1px;
+	cursor: col-resize;
+}
+.dijitSplitContainer {
+	position: relative;
+	overflow: hidden;
+	display: block;
+}
+.dijitSplitPane {
+	position: absolute;
+}
+.dijitSplitContainerSizerH,
+.dijitSplitContainerSizerV {
+	position:absolute;
+	font-size: 1px;
+	background-color: ThreeDFace;
+	border: 1px solid;
+	border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight;
+	margin: 0;
+}
+.dijitSplitContainerSizerH .thumb, .dijitSplitterV .dijitSplitterThumb {
+	overflow:hidden;
+	position:absolute;
+	top:49%;
+}
+.dijitSplitContainerSizerV .thumb, .dijitSplitterH .dijitSplitterThumb {
+	position:absolute;
+	left:49%;
+}
+.dijitSplitterShadow,
+.dijitSplitContainerVirtualSizerH,
+.dijitSplitContainerVirtualSizerV {
+	font-size: 1px;
+	background-color: ThreeDShadow;
+	-moz-opacity: 0.5;
+	opacity: 0.5;
+	filter: Alpha(Opacity=50);
+	margin: 0;
+}
+.dijitSplitContainerSizerH, .dijitSplitContainerVirtualSizerH {
+	cursor: col-resize;
+}
+.dijitSplitContainerSizerV, .dijitSplitContainerVirtualSizerV {
+	cursor: row-resize;
+}
+.dj_a11y .dijitSplitterH {
+	border-top:1px solid #d3d3d3 !important;
+	border-bottom:1px solid #d3d3d3 !important;
+}
+.dj_a11y .dijitSplitterV {
+	border-left:1px solid #d3d3d3 !important;
+	border-right:1px solid #d3d3d3 !important;
+}
+.dijitContentPane {
+	display: block;
+	overflow: auto;	
+}
+.dijitContentPaneSingleChild {
+	overflow: hidden;
+}
+.dijitContentPaneLoading .dijitIconLoading,
+.dijitContentPaneError .dijitIconError {
+	margin-right: 9px;
+}
+.dijitTitlePane {
+	display: block;
+	overflow: hidden;
+}
+.dijitTitlePaneTitle {
+	cursor: pointer;
+}
+.dijitFixedOpen, .dijitFixedClosed {
+	cursor: default;
+}
+.dijitFixedOpen .dijitArrowNode, .dijitFixedOpen .dijitArrowNodeInner,
+.dijitFixedClosed .dijitArrowNode, .dijitFixedClosed .dijitArrowNodeInner{
+	display: none;
+}
+.dijitTitlePaneTitle * {
+	vertical-align: middle;
+}
+.dijitTitlePane .dijitArrowNodeInner {
+	display: none;
+}
+.dj_a11y .dijitTitlePane .dijitArrowNodeInner {
+	display:inline !important;
+	font-family: monospace;		
+}
+.dj_a11y .dijitTitlePane .dijitArrowNode {
+	display:none;
+}
+.dj_ie6 .dijitTitlePaneContentOuter,
+.dj_ie6 .dijitTitlePane .dijitTitlePaneTitle {
+	zoom: 1;
+}
+.dijitColorPalette {
+	border: 1px solid #999;
+	background: #fff;
+	position: relative;
+}
+.dijitColorPalette .dijitPaletteTable {
+	padding: 2px 3px 3px 3px;
+	position: relative;
+	overflow: hidden;
+	outline: 0;
+	border-collapse: separate;
+}
+.dj_ie6 .dijitColorPalette .dijitPaletteTable,
+.dj_ie7 .dijitColorPalette .dijitPaletteTable,
+.dj_iequirks .dijitColorPalette .dijitPaletteTable {
+	padding: 0;
+	margin: 2px 3px 3px 3px;
+}
+.dijitColorPalette .dijitPaletteCell {
+	font-size: 1px;
+	vertical-align: middle;
+	text-align: center;
+	background: none;
+}
+.dijitColorPalette .dijitPaletteImg {
+	padding: 1px;		
+	border: 1px solid #999;
+	margin: 2px 1px;
+	cursor: default;
+	font-size: 1px;		
+}
+.dj_gecko .dijitColorPalette .dijitPaletteImg {
+	padding-bottom: 0;	
+}
+.dijitColorPalette .dijitColorPaletteSwatch {
+	width: 14px;
+	height: 12px;
+}
+.dijitPaletteTable td {
+	padding: 0;
+}
+.dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg {
+	border: 1px solid #000;
+}
+.dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg,
+.dijitColorPalette .dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg {
+	border: 2px solid #000;
+	margin: 1px 0;	
+}
+.dj_a11y .dijitColorPalette .dijitPaletteTable,
+.dj_a11y .dijitColorPalette .dijitPaletteTable * {
+	background-color: transparent !important;
+}
+.dijitAccordionContainer {
+	border:1px solid #b7b7b7;
+	border-top:0 !important;
+}
+.dijitAccordionTitle {
+	cursor: pointer;
+}
+.dijitAccordionTitleSelected {
+	cursor: default;
+}
+.dijitAccordionTitle .arrowTextUp,
+.dijitAccordionTitle .arrowTextDown {
+	display: none;
+}
+.dj_a11y .dijitAccordionTitle .arrowTextUp,
+.dj_a11y .dijitAccordionTitleSelected .arrowTextDown {
+	display: inline;
+}
+.dj_a11y .dijitAccordionTitleSelected .arrowTextUp {
+	display: none;
+}
+.dijitAccordionChildWrapper {
+	overflow: hidden;
+}
+.dijitCalendarContainer {
+	width: auto;	
+}
+.dijitCalendarContainer th, .dijitCalendarContainer td {
+	padding: 1px 2px 2px;
+	vertical-align: middle;
+}
+.dijitCalendarYearLabel {
+    white-space: nowrap;    
+}
+.dijitCalendarNextYear {
+	margin:0 0 0 0.55em;
+}
+.dijitCalendarPreviousYear {
+	margin:0 0.55em 0 0;
+}
+.dijitCalendarIncrementControl {
+	vertical-align: middle;
+}
+.dijitCalendarIncrementControl,
+.dijitCalendarDateTemplate,
+.dijitCalendarMonthLabel,
+.dijitCalendarPreviousYear,
+.dijitCalendarNextYear {
+	cursor: pointer;
+}
+.dijitCalendarDisabledDate {
+	color: gray;
+	text-decoration: line-through;
+	cursor: default;
+}
+.dijitSpacer {
+  	position: relative;
+  	height: 1px;
+  	overflow: hidden;
+  	visibility: hidden;
+}
+.dijitCalendarMonthMenu .dijitCalendarMonthLabel {
+	text-align:center;
+}
+.dijitMenu {
+	border:1px solid black;
+	background-color:white;
+}
+.dijitMenuTable {
+	border-collapse:collapse;
+	border-width:0;
+	background-color:white;
+}
+.dj_webkit .dijitMenuTable td[colspan="2"]{
+	border-right:hidden;
+}
+.dijitMenuItem {
+	text-align: left;
+	white-space: nowrap;
+	padding:.1em .2em;
+	cursor:pointer;
+}
+.dijitMenuItem:focus {
+	outline: none
+}
+.dijitMenuPassive .dijitMenuItemHover,
+.dijitMenuItemSelected {
+	background-color:black;
+	color:white;
+}
+.dijitMenuItemIcon, .dijitMenuExpand {
+	background-repeat: no-repeat;
+}
+.dijitMenuItemDisabled * {
+	/* flat theme styles disabled menu items */
+	/*opacity:0.5;*/
+	cursor:default;
+}
+.dj_ie .dj_a11y .dijitMenuItemDisabled,
+.dj_ie .dj_a11y .dijitMenuItemDisabled *,
+.dj_ie .dijitMenuItemDisabled * {
+	color: gray;
+	filter: alpha(opacity=35);
+}
+.dijitMenuItemLabel {
+	position: relative;
+	vertical-align: middle;
+}
+.dj_a11y .dijitMenuItemSelected {
+	border: 1px dotted black !important;	
+}
+.dj_a11y .dijitMenuItemSelected .dijitMenuItemLabel {
+	border-width: 1px;
+	border-style: solid;
+}
+.dj_ie8 .dj_a11y .dijitMenuItemLabel {
+	position:static;
+}
+.dijitMenuExpandA11y {
+	display: none;
+}
+.dj_a11y .dijitMenuExpandA11y {
+	display: inline;
+}
+.dijitMenuSeparator td {
+	border: 0;
+	padding: 0;
+}
+.dijitMenuSeparatorTop {
+	height: 50%;
+	margin: 0;
+	margin-top:3px;
+	font-size: 1px;
+}
+.dijitMenuSeparatorBottom {
+	height: 50%;
+	margin: 0;
+	margin-bottom:3px;
+	font-size: 1px;
+}
+.dijitCheckedMenuItemIconChar {
+	vertical-align: middle;
+	visibility:hidden;
+}
+.dijitCheckedMenuItemChecked .dijitCheckedMenuItemIconChar {
+	visibility: visible;
+}
+.dj_a11y .dijitCheckedMenuItemIconChar {
+	display:inline !important;
+}
+.dj_a11y .dijitCheckedMenuItemIcon {
+	display: none;
+}
+.dj_ie .dj_a11y .dijitMenuBar .dijitMenuItem {
+	
+	margin: 0;
+}
+.dijitStackController .dijitToggleButtonChecked * {
+	cursor: default;	
+}
+.dijitTabContainer {
+    z-index: 0; 
+    overflow: visible; 
+}
+.dj_ie6 .dijitTabContainer {
+   overflow: hidden;
+}
+.dijitTabContainerNoLayout {
+	width: 100%;	
+}
+.dijitTabContainerBottom-tabs,
+.dijitTabContainerTop-tabs,
+.dijitTabContainerLeft-tabs,
+.dijitTabContainerRight-tabs {
+    z-index: 1;
+	overflow: visible !important;  
+}
+.dijitTabController {
+    z-index: 1;
+}
+.dijitTabContainerBottom-container,
+.dijitTabContainerTop-container,
+.dijitTabContainerLeft-container,
+.dijitTabContainerRight-container {
+	z-index:0;
+	overflow: hidden;
+	border: 1px solid black;
+}
+.nowrapTabStrip {
+	width: 50000px;
+	display: block;
+	position: relative;
+    text-align: left;  
+    z-index: 1;
+}
+.dijitTabListWrapper {
+	overflow: hidden;
+    z-index: 1;
+}
+.dj_a11y .tabStripButton img {
+	display: none;
+}
+.dijitTabContainerTop-tabs {
+	border-bottom: 1px solid black;
+}
+.dijitTabContainerTop-container {
+	border-top: 0;
+}
+.dijitTabContainerLeft-tabs {
+	border-right: 1px solid black;
+	float: left;    
+}
+.dijitTabContainerLeft-container {
+	border-left: 0;
+}
+.dijitTabContainerBottom-tabs {
+	border-top: 1px solid black;
+}
+.dijitTabContainerBottom-container {
+	border-bottom: 0;
+}
+.dijitTabContainerRight-tabs {
+	border-left: 1px solid black;
+	float: left;    
+}
+.dijitTabContainerRight-container {
+	border-right: 0;
+}
+div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
+	cursor: auto;
+}
+.dijitTab {
+	position:relative;
+	cursor:pointer;
+	white-space:nowrap;
+	z-index:3;
+}
+.dijitTab * {
+	vertical-align: middle;
+}
+.dijitTabChecked {
+	cursor: default;	
+}
+.dijitTabContainerTop-tabs .dijitTab {
+	top: 1px;	
+}
+.dijitTabContainerBottom-tabs .dijitTab {
+	top: -1px;	
+}
+.dijitTabContainerLeft-tabs .dijitTab {
+	left: 1px;	
+}
+.dijitTabContainerRight-tabs .dijitTab {
+	left: -1px;	
+}
+.dijitTabContainerTop-tabs .dijitTab,
+.dijitTabContainerBottom-tabs .dijitTab {
+	display:inline-block;			
+	#zoom: 1; 
+	#display:inline; 
+}
+.tabStripButton {
+	z-index: 12;
+}
+.dijitTabButtonDisabled .tabStripButton {
+	display: none;
+}
+.dijitTabCloseButton {
+	margin-left: 1em;
+}
+.dijitTabCloseText {
+	display:none;
+}
+.dijitTab .tabLabel {
+	/*min-height: 16px;*/
+	display: inline-block;
+}
+.dijitNoIcon {
+	display: none;
+}
+.dj_ie6 .dijitTab .dijitNoIcon {
+	display: inline;
+	height: 15px;
+	width: 1px;
+}
+.dj_a11y .dijitTabCloseButton {
+	background-image: none !important;
+	width: auto !important;
+	height: auto !important;
+}
+.dj_a11y .dijitTabCloseText {
+	display: inline;
+}
+.dijitTabPane,
+.dijitStackContainer-child,
+.dijitAccordionContainer-child {
+    border: none !important;
+}
+.dijitInlineEditBoxDisplayMode {
+	border: 1px solid transparent;	
+	cursor: text;
+}
+.dj_a11y .dijitInlineEditBoxDisplayMode,
+.dj_ie6 .dijitInlineEditBoxDisplayMode {
+	border: none;
+}
+.dijitInlineEditBoxDisplayModeHover,
+.dj_a11y .dijitInlineEditBoxDisplayModeHover,
+.dj_ie6 .dijitInlineEditBoxDisplayModeHover {
+	background-color: #e2ebf2;
+	border: solid 1px black;
+}
+.dijitInlineEditBoxDisplayModeDisabled {
+	cursor: default;
+}
+.dijitTree {
+	overflow: auto;	
+}
+.dijitTreeContainer {
+	float: left;	
+}
+.dijitTreeIndent {
+	width: 19px;
+}
+.dijitTreeRow, .dijitTreeContent {
+	white-space: nowrap;
+}
+.dj_ie .dijitTreeLabel:focus {
+	outline: 1px dotted black;
+}
+.dijitTreeRow img {
+	vertical-align: middle;
+}
+.dijitTreeContent {
+    cursor: default;
+}
+.dijitExpandoText {
+	display: none;
+}
+.dj_a11y .dijitExpandoText {
+	display: inline;
+	padding-left: 10px;
+	padding-right: 10px;
+	font-family: monospace;
+	border-style: solid;
+	border-width: thin;
+	cursor: pointer;
+}
+.dijitTreeLabel {
+	margin: 0 4px;
+}
+.dijitDialog {
+	position: absolute;
+	z-index: 999;
+	overflow: hidden;	
+}
+.dijitDialogTitleBar {
+	cursor: move;
+}
+.dijitDialogFixed .dijitDialogTitleBar {
+	cursor:default;
+}
+.dijitDialogCloseIcon {
+	cursor: pointer;
+}
+.dijitDialogPaneContent {
+	-webkit-overflow-scrolling: touch;
+}
+.dijitDialogUnderlayWrapper {
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 998;
+	display: none;
+	background: transparent !important;
+}
+.dijitDialogUnderlay {
+	background: #eee;
+	opacity: 0.5;
+}
+.dj_ie .dijitDialogUnderlay {
+	filter: alpha(opacity=50);
+}
+.dj_a11y .dijitSpinnerButtonContainer,
+.dj_a11y .dijitDialog {
+	opacity: 1 !important;
+	background-color: white !important;
+}
+.dijitDialog .closeText {
+	/*display:none;*/
+	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+	display: block;
+	color: #000000;
+	text-shadow: 0 1px 0 #FFFFFF;
+	position:absolute;
+}
+.dj_a11y .dijitDialog .closeText {
+	display:inline;
+}
+.dijitSliderMoveable {
+	z-index:99;
+	position:absolute !important;
+	display:block;
+	vertical-align:middle;
+}
+.dijitSliderMoveableH {
+	right:0;
+}
+.dijitSliderMoveableV {
+	right:50%;
+}
+.dj_a11y div.dijitSliderImageHandle,
+.dijitSliderImageHandle {
+	margin:0;
+	padding:0;
+	position:relative !important;
+	border:8px solid gray;
+	width:0;
+	height:0;
+	cursor: pointer;
+}
+.dj_iequirks .dj_a11y .dijitSliderImageHandle {
+	font-size: 0;
+}
+.dj_ie7 .dijitSliderImageHandle {
+	overflow: hidden; 
+}
+.dj_ie7 .dj_a11y .dijitSliderImageHandle {
+	overflow: visible; 
+}
+.dj_a11y .dijitSliderFocused .dijitSliderImageHandle {
+	border:4px solid #000;
+	height:8px;
+	width:8px;
+}
+.dijitSliderImageHandleV {
+	top:-8px;
+	right: -50%;
+}
+.dijitSliderImageHandleH {
+	left:50%;
+	top:-5px;
+	vertical-align:top;
+}
+.dijitSliderBar {
+	border-style:solid;
+	border-color:black;
+	cursor: pointer;
+}
+.dijitSliderBarContainerV {
+	position:relative;
+	height:100%;
+	z-index:1;
+}
+.dijitSliderBarContainerH {
+	position:relative;
+	z-index:1;
+}
+.dijitSliderBarH {
+	height:4px;
+	border-width:1px 0;
+}
+.dijitSliderBarV {
+	width:4px;
+	border-width:0 1px;
+}
+.dijitSliderProgressBar {
+	background-color:red;
+	z-index:1;
+}
+.dijitSliderProgressBarV {
+	position:static !important;
+	height:0;
+	vertical-align:top;
+	text-align:left;
+}
+.dijitSliderProgressBarH {
+	position:absolute !important;
+	width:0;
+	vertical-align:middle;
+	overflow:visible;
+}
+.dijitSliderRemainingBar {
+	overflow:hidden;
+	background-color:transparent;
+	z-index:1;
+}
+.dijitSliderRemainingBarV {
+	height:100%;
+	text-align:left;
+}
+.dijitSliderRemainingBarH {
+	width:100% !important;
+}
+.dijitSliderBumper {
+	overflow:hidden;
+	z-index:1;
+}
+.dijitSliderBumperV {
+	width:4px;
+	height:8px;
+	border-width:0 1px;
+}
+.dijitSliderBumperH {
+	width:8px;
+	height:4px;
+	border-width:1px 0;
+}
+.dijitSliderBottomBumper,
+.dijitSliderLeftBumper {
+	background-color:red;
+}
+.dijitSliderTopBumper,
+.dijitSliderRightBumper {
+	background-color:transparent;
+}
+.dijitSliderDecoration {
+	text-align:center;
+}
+.dijitSliderDecorationC,
+.dijitSliderDecorationV {
+	position: relative; 
+}
+.dijitSliderDecorationH {
+	width: 100%;
+}
+.dijitSliderDecorationV {
+	height: 100%;
+	white-space: nowrap;
+}
+.dijitSliderButton {
+	font-family:monospace;
+	margin:0;
+	padding:0;
+	display:block;
+}
+.dj_a11y .dijitSliderButtonInner {
+	visibility:visible !important;
+}
+.dijitSliderButtonContainer {
+	text-align:center;
+	height:0;	
+}
+.dijitSliderButtonContainer * {
+	cursor: pointer;
+}
+.dijitSlider .dijitButtonNode {
+	padding:0;
+	display:block;
+}
+.dijitRuleContainer {
+	position:relative;
+	overflow:visible;
+}
+.dijitRuleContainerV {
+	height:100%;
+	line-height:0;
+	float:left;
+	text-align:left;
+}
+.dj_opera .dijitRuleContainerV {
+	line-height:2%;
+}
+.dj_ie .dijitRuleContainerV {
+	line-height:normal;
+}
+.dj_gecko .dijitRuleContainerV {
+	margin:0 0 1px 0; 
+}
+.dijitRuleMark {
+	position:absolute;
+	border:1px solid black;
+	line-height:0;
+	height:100%;
+}
+.dijitRuleMarkH {
+	width:0;
+	border-top-width:0 !important;
+	border-bottom-width:0 !important;
+	/*border-left-width:0 !important;*/
+}
+.dijitRuleLabelContainer {
+	position:absolute;
+}
+.dijitRuleLabelContainerH {
+	text-align:center;
+	display:inline-block;
+}
+.dijitRuleLabelH {
+	position:relative;
+	left:-50%;
+}
+.dijitRuleLabelV {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+.dijitRuleMarkV {
+	height:0;
+	border-right-width:0 !important;
+	/*border-bottom-width:0 !important;*/
+	border-left-width:0 !important;
+	width:100%;
+	left:0;
+}
+.dj_ie .dijitRuleLabelContainerV {
+	margin-top:-.55em;
+}
+.dj_a11y .dijitSliderReadOnly,
+.dj_a11y .dijitSliderDisabled {
+	opacity:0.6;
+}
+.dj_ie .dj_a11y .dijitSliderReadOnly .dijitSliderBar,
+.dj_ie .dj_a11y .dijitSliderDisabled .dijitSliderBar {
+	filter: alpha(opacity=40);
+}
+.dj_a11y .dijitSlider .dijitSliderButtonContainer div {
+	font-family: monospace; 
+	font-size: 1em;
+	line-height: 1em;
+	height: auto;
+	width: auto;
+	margin: 0 4px;
+}
+.dj_a11y .dijitButtonContents .dijitButtonText,
+.dj_a11y .dijitTab .tabLabel {
+	display: inline !important;
+}
+.dj_a11y .dijitSelect .dijitButtonText {
+	display: inline-block !important;
+}
+.dijitSelectError .dijitButtonContents .dijitButtonText {
+	display: none !important;
+}
+.dijitTextArea {
+	width:100%;
+	overflow-y: auto;	
+}
+.dijitTextArea[cols] {
+	width:auto; 
+}
+.dj_ie .dijitTextAreaCols {
+	width:auto;
+}
+.dijitExpandingTextArea {
+	
+	resize: none;
+}
+.dijitToolbarSeparator {
+	height: 18px;
+	width: 5px;
+	padding: 0 1px;
+	margin: 0;
+}
+.dijitIEFixedToolbar {
+	position:absolute;
+	top: expression(eval((document.documentElement||document.body).scrollTop));
+}
+.dijitEditor {
+	display: block;	
+}
+.dijitEditorDisabled,
+.dijitEditorReadOnly {
+	color: gray;
+}
+.dijitTimePickerItemInner {
+	text-align:center;
+	border:0;
+	padding:2px 8px 2px 8px;
+}
+.dijitTimePickerTick,
+.dijitTimePickerMarker {
+	border-bottom:1px solid gray;
+}
+.dijitTimePicker .dijitDownArrowButton {
+	border-top: none !important;
+}
+.dijitTimePickerTick {
+	color:#CCC;
+}
+.dijitTimePickerMarker {
+	color:black;
+	background-color:#CCC;
+}
+.dijitTimePickerItemSelected {
+	font-weight:bold;
+	color:#333;
+	background-color:#b7cdee;
+}
+.dijitTimePickerItemHover {
+	background-color:gray;
+	color:white;
+	cursor:pointer;
+}
+.dijitTimePickerItemDisabled {
+	color:gray;
+	text-decoration:line-through;
+}
+.dj_a11y .dijitTimePickerItemSelected .dijitTimePickerItemInner {
+	border: solid 4px black;
+}
+.dj_a11y .dijitTimePickerItemHover .dijitTimePickerItemInner {
+	border: dashed 4px black;
+}
+.dijitToggleButtonIconChar {
+	
+	display:none !important;
+}
+.dj_a11y .dijitToggleButton .dijitToggleButtonIconChar {
+	display:inline !important;
+	visibility:hidden;
+}
+.dj_ie6 .dijitToggleButtonIconChar, .dj_ie6 .tabStripButton .dijitButtonText {
+	font-family: "Arial Unicode MS";	
+}
+.dj_a11y .dijitToggleButtonChecked .dijitToggleButtonIconChar {
+	display: inline !important; 
+	visibility:visible !important;
+}
+.dijitArrowButtonChar {
+	display:none !important;
+}
+.dj_a11y .dijitArrowButtonChar {
+	display:inline !important;
+}
+.dj_a11y .dijitDropDownButton .dijitArrowButtonInner,
+.dj_a11y .dijitComboButton .dijitArrowButtonInner {
+	display:none !important;
+}
+.dj_a11y .dijitSelect {
+	border-collapse: separate !important;
+	border-width: 1px;
+	border-style: solid;
+}
+.dj_ie .dijitSelect {
+	vertical-align: middle; 
+}
+.dj_ie6 .dijitSelect .dijitValidationContainer,
+.dj_ie8 .dijitSelect .dijitButtonText {
+	vertical-align: top;
+}
+.dj_ie6 .dijitTextBox .dijitInputContainer,
+.dj_iequirks .dijitTextBox .dijitInputContainer,
+.dj_ie6 .dijitTextBox .dijitArrowButtonInner,
+.dj_ie6 .dijitSpinner .dijitSpinnerButtonInner,
+.dijitSelect .dijitSelectLabel {
+	vertical-align: baseline;
+}
+.dijitNumberTextBox {
+	text-align: left;
+	direction: ltr;
+}
+.dijitNumberTextBox .dijitInputInner {
+	text-align: inherit; 
+}
+.dijitToolbar .dijitSelect {
+	margin: 0;
+}
+.dj_webkit .dijitToolbar .dijitSelect {
+	padding-left: 0.3em;
+}
+.dijitSelect .dijitButtonContents {
+	padding: 0;
+	white-space: nowrap;
+	text-align: left;
+	border-style: none solid none none;
+	border-width: 0px;
+}
+.dijitSelectFixedWidth .dijitButtonContents {
+	width: 100%;
+}
+.dijitSelectMenu .dijitMenuItemIcon {
+	display:none;
+}
+.dj_ie6 .dijitSelectMenu .dijitMenuItemLabel,
+.dj_ie7 .dijitSelectMenu .dijitMenuItemLabel {
+	position: static;
+}
+.dijitSelectLabel *
+{
+	vertical-align: baseline;
+}
+.dijitSelectSelectedOption * {
+	font-weight: normal;
+}
+.dijitSelectMenu {
+	border-width: 1px;
+}
+.dijitSelectMenu .dijitMenuTable {
+	margin: 0;
+	background-color: transparent;
+}
+.dijitForceStatic {
+	position: static !important;
+}
+.dijitReadOnly *,
+.dijitDisabled *,
+.dijitReadOnly,
+.dijitDisabled {
+	cursor: default;
+}
+.dojoDndItem {
+    padding: 2px;  
+	-webkit-touch-callout: none;
+	-webkit-user-select: none; 
+}
+.dojoDndHorizontal .dojoDndItem {
+    #display: inline;
+    display: inline-block;
+}
+.dojoDndItemBefore,
+.dojoDndItemAfter {
+	border: 0px solid #369;
+}
+.dojoDndItemBefore {
+    border-width: 2px 0 0 0;
+    padding: 0 2px 2px 2px;
+}
+.dojoDndItemAfter {
+    border-width: 0 0 2px 0;
+    padding: 2px 2px 0 2px;
+}
+.dojoDndHorizontal .dojoDndItemBefore {
+    border-width: 0 0 0 2px;
+    padding: 2px 2px 2px 0;
+}
+.dojoDndHorizontal .dojoDndItemAfter {
+    border-width: 0 2px 0 0;
+    padding: 2px 0 2px 2px;
+}
+.dojoDndItemOver {
+	cursor:pointer;
+}
+.dj_gecko .dijitArrowButtonInner INPUT,
+.dj_gecko INPUT.dijitArrowButtonInner {
+	-moz-user-focus:ignore;
+}
+.dijitFocused .dijitMenuItemShortcutKey {
+	text-decoration: underline;
+}
diff --git a/lib/flat/flat_dijit_rtl.css b/lib/flat/flat_dijit_rtl.css
new file mode 100644
index 000000000..881d31a73
--- /dev/null
+++ b/lib/flat/flat_dijit_rtl.css
@@ -0,0 +1,177 @@
+.dijitRtl .dijitOffScreen {
+	/* align on the right side rather than the left so no horizontal scroll bar shown */
+	left: auto !important;
+	right: -10000px !important;
+}
+
+.dijitRtl .dijitPlaceHolder {
+	left: auto;
+	right: 0;
+}
+
+/* Menu */
+
+.dijitMenuItemRtl {
+	text-align: right;
+}
+
+/* Button */
+
+.dj_iequirks .dijitComboButtonRtl button {
+	/* workaround bug where label invisible (themeTesterQuirk.html?dir=rtl) */
+	float:left;
+}
+.dj_ie .dijitTextBoxRtl .dijitInputContainer {
+	clear: right;
+}
+
+/* TextBox, ComboBox, Spinner */
+
+.dijitTextBoxRtl .dijitValidationContainer,
+.dijitTextBoxRtl .dijitSpinnerButtonContainer,
+.dijitComboBoxRtl .dijitArrowButtonContainer {
+	/* combobox and spinner: line between the input area and the drop down button */
+	border-right-width: 1px !important;
+	border-left-width: 0 !important;
+}
+
+.dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton {
+	right: 0;
+	left: auto;
+}
+
+.dijitSelectRtl .dijitButtonText {
+	float: right;
+}
+
+.dijitTextBoxRtl .dijitSpinnerButtonContainer,
+.dijitValidationTextBoxRtl .dijitValidationContainer,
+.dijitTextBoxRtl .dijitArrowButtonContainer {
+	float: left;
+}
+
+div.dijitNumberTextBoxRtl {
+	text-align: right;
+}
+
+/* Calendar */
+
+.dijitCalendarRtl .dijitCalendarNextYear {
+	margin:0 0.55em 0 0;
+}
+
+.dijitCalendarRtl .dijitCalendarPreviousYear {
+	margin:0 0 0 0.55em;
+}
+
+
+/* Slider */
+
+.dijitSliderRtl .dijitSliderImageHandleV {
+	left:auto;
+}
+
+.dijitSliderRtl .dijitSliderImageHandleH {
+	left:-50%;
+}
+
+.dijitSliderRtl .dijitSliderMoveableH {
+	right:auto;
+	left:0;
+}
+
+.dijitSliderRtl .dijitRuleContainerV {
+	float:right;
+}
+
+.dj_ie .dijitSliderRtl .dijitRuleContainerV {
+	text-align:right;
+}
+
+.dj_ie .dijitSliderRtl .dijitRuleLabelV {
+	text-align:left;
+}
+
+.dj_ie .dijitSliderRtl .dijitRuleLabelH {
+	zoom:1;
+}
+
+.dijitSliderRtl .dijitSliderProgressBarH {
+	/* workarounds for IE and FF */
+	float:right;
+	right:0;
+	left:auto;
+}
+
+/* ContentPane*/
+
+.dijitRtl .dijitContentPaneLoading .dijitIconLoading,
+.dijitRtl .dijitContentPaneError .dijitIconError {
+	margin-right: 0;
+	margin-left: 9px;
+}
+
+/* TabContainer */
+
+.dijitTabControllerRtl .nowrapTabStrip {
+    text-align: right;  /* just in case ancestor has non-standard setting */
+}
+.dijitTabRtl .dijitTabCloseButton {
+	margin-left: 0;
+	margin-right: 1em;
+}
+.dj_ie6 .dijitTabRtl .tabLabel,
+.dj_ie6 .dijitTabContainerRight-tabs .dijitTabRtl,
+.dj_ie6 .dijitTabContainerLeft-tabs .dijitTabRtl,
+.dj_ie7 .dijitTabContainerRight-tabs .dijitTabRtl,
+.dj_ie7 .dijitTabContainerLeft-tabs .dijitTabRtl {
+	zoom: 1;
+}
+.dj_ie6 .dijitTabContainerRight-tabs .dijitTabRtl,
+.dj_ie7 .dijitTabContainerRight-tabs .dijitTabRtl {
+    left: 0;
+}
+
+.dj_ie6 .dijitTabContainerRightRtl .dijitTabContainerRight-tabs,
+.dj_ie6 .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs {
+    /* otherwise tab labels invisible */
+	width: 1%;
+}
+
+/* TimePicker */
+.dj_ie .dijitTimePickerRtl .dijitTimePickerItem {
+	width:100%;
+}
+
+
+/* ColorPalette */
+.dijitColorPaletteRtl .dijitColorPaletteUnder {
+	/* needed in RTL mode when DropDownButton expands the ColorPalette beyond it's natural width */
+	left: auto;
+	right: 0;
+}
+
+/* Select */
+.dijitSelectRtl .dijitButtonContents {
+	border-style: none none none solid;
+	text-align: right;
+}
+
+/* Tree */
+
+.dijitTreeRtl .dijitTreeContainer {
+	float: right;	/* for correct highlighting during horizontal scroll, see #16132 */
+}
+
+/* DnD
+ * These rules should apply for containers that are dir=rtl (either set directly, or inherited)
+ * but seems the best we can do is look for .dijitRtl on an ancestor node.
+ */
+.dijitRtl .dojoDndHorizontal .dojoDndItemBefore {
+    border-width: 0 2px 0 0;
+    padding: 2px 0 2px 2px;
+}
+.dijitRtl .dojoDndHorizontal .dojoDndItemAfter {
+    border-width: 0 0 0 2px;
+    padding: 2px 2px 2px 0;
+}
diff --git a/lib/flat/flat_rtl.css b/lib/flat/flat_rtl.css
new file mode 100644
index 000000000..0e779f4a7
--- /dev/null
+++ b/lib/flat/flat_rtl.css
@@ -0,0 +1,26 @@
+/* RTL files */
+@import url("flat_dijit_rtl.css");
+
+/* dijit */
+@import url("dijit/Calendar_rtl.css");
+@import url("dijit/ColorPalette_rtl.css");
+@import url("dijit/Dialog_rtl.css");
+@import url("dijit/Editor_rtl.css");
+@import url("dijit/Menu_rtl.css");
+@import url("dijit/TitlePane_rtl.css");
+@import url("dijit/Toolbar_rtl.css");
+@import url("dijit/Tree_rtl.css");
+
+/* layout */
+@import url("dijit/layout/AccordionContainer_rtl.css");
+@import url("dijit/layout/TabContainer_rtl.css");
+
+/* dijit */
+@import url("dijit/form/Button_rtl.css");
+@import url("dijit/form/NumberSpinner_rtl.css");
+@import url("dijit/form/Select_rtl.css");
+@import url("dijit/form/Slider_rtl.css");
+@import url("dijit/form/TextBox_rtl.css");
+
+/* not in flat theme */
+/*@import url("dijit/ProgressBar_rtl.css");*/
diff --git a/lib/flat/icons/flat-icons.css b/lib/flat/icons/flat-icons.css
new file mode 100644
index 000000000..317422efe
--- /dev/null
+++ b/lib/flat/icons/flat-icons.css
@@ -0,0 +1,639 @@
+/*
+ * font generated with https://icomoon.io/app
+ *
+ * all icons are Material Design icons by Google
+ * https://github.com/google/material-design-icons/blob/master/LICENSE
+ *
+ * see README for more about flat theme icons
+ */
+@font-face {
+  font-family: 'flat-icon';
+  src: url("fonts/flat-icon.eot?90nq1s");
+  src: url("fonts/flat-icon.eot?#iefix90nq1s") format('embedded-opentype'), url("fonts/flat-icon.ttf?90nq1s") format('truetype'), url("fonts/flat-icon.woff?90nq1s") format('woff'), url("fonts/flat-icon.svg?90nq1s#flat-icon") format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+[class^="flat-"],
+[class*=" flat-"] {
+  font-family: 'flat-icon';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.dijitIcon,
+.dijitEditorIcon {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+}
+.flat-drop-left:before {
+  content: "\f000";
+}
+.flat-drop-right:before {
+  content: "\f001";
+}
+.flat-drop-down:before {
+  content: "\f002";
+}
+.flat-drop-up:before {
+  content: "\f003";
+}
+.flat-chevron-left:before {
+  content: "\f004";
+}
+.flat-chevron-right:before {
+  content: "\f005";
+}
+.flat-chevron-down:before {
+  content: "\f006";
+}
+.flat-chevron-up:before {
+  content: "\f007";
+}
+.flat-arrow-left:before {
+  content: "\f008";
+}
+.flat-arrow-right:before {
+  content: "\f009";
+}
+.flat-arrow-down:before {
+  content: "\f00a";
+}
+.flat-arrow-up:before {
+  content: "\f00b";
+}
+.flat-check:before {
+  content: "\f00c";
+}
+.flat-check-circle:before {
+  content: "\f00d";
+}
+.flat-close:before {
+  content: "\f00e";
+}
+.dijitIconClear:before,
+.flat-close-circle:before {
+  content: "\f00f";
+}
+.dijitEditorIconCancel:before,
+.flat-close-circle-o:before {
+  content: "\f010";
+}
+.flat-add:before {
+  content: "\f011";
+}
+.flat-remove:before {
+  content: "\f012";
+}
+.flat-add-circle:before {
+  content: "\f013";
+}
+.flat-remove-circle:before {
+  content: "\f014";
+}
+.flat-add-circle-o:before {
+  content: "\f015";
+}
+.flat-remove-circle-o:before {
+  content: "\f016";
+}
+.dijitIconError:before,
+.flat-error:before {
+  content: "\f017";
+}
+.flat-error-o:before {
+  content: "\f018";
+}
+.flat-warning:before {
+  content: "\f019";
+}
+.flat-report:before {
+  content: "\f01a";
+}
+.flat-help:before {
+  content: "\f01b";
+}
+.flat-no-symbol:before {
+  content: "\f01c";
+}
+.flat-update:before {
+  content: "\f01d";
+}
+.flat-calendar:before {
+  content: "\f01e";
+}
+.flat-clock:before {
+  content: "\f01f";
+}
+.dijitFolderClosed:before,
+.dijitIconFolderClosed:before,
+.flat-folder:before {
+  content: "\f020";
+}
+.dijitFolderOpened:before,
+.dijitIconFolderOpen:before,
+.flat-folder-open:before {
+  content: "\f021";
+}
+.dijitIconEdit:before,
+.flat-edit:before {
+  content: "\f022";
+}
+.dijitIconSave:before,
+.dijitEditorIconSave:before,
+.flat-save:before {
+  content: "\f023";
+}
+.dijitIconPrint:before,
+.dijitEditorIconPrint:before,
+.flat-print:before {
+  content: "\f024";
+}
+.dijitIconDelete:before,
+.dijitEditorIconDelete:before,
+.flat-delete:before {
+  content: "\f025";
+}
+.dijitLeaf:before,
+.flat-page:before {
+  content: "\f026";
+}
+.flat-page-o:before {
+  content: "\f027";
+}
+.flat-page-add:before {
+  content: "\f028";
+}
+.flat-page-remove:before {
+  content: "\f029";
+}
+.flat-page-add-o:before {
+  content: "\f02a";
+}
+.flat-page-remove-o:before {
+  content: "\f02b";
+}
+.dijitIconFile:before,
+.flat-file:before {
+  content: "\f02c";
+}
+.dijitIconMail:before,
+.flat-mail:before {
+  content: "\f02d";
+}
+.dijitIconDatabase:before,
+.flat-storage:before {
+  content: "\f02e";
+}
+.dijitIconConfigure:before,
+.flat-settings:before {
+  content: "\f02f";
+}
+.dijitIconSearch:before,
+.flat-search:before {
+  content: "\f030";
+}
+.dijitIconBookmark:before,
+.flat-bookmark:before {
+  content: "\f031";
+}
+.flat-menu:before {
+  content: "\f032";
+}
+.dijitIconApplication:before,
+.flat-application:before {
+  content: "\f033";
+}
+.dijitIconKey:before,
+.flat-key:before {
+  content: "\f034";
+}
+.dijitIconTable:before,
+.dijitEditorIconInsertTable:before,
+.flat-table:before {
+  content: "\f035";
+}
+.flat-grid:before {
+  content: "\f036";
+}
+.dijitIconChart:before,
+.flat-chart:before {
+  content: "\f037";
+}
+.dijitIconFilter:before,
+.flat-filter:before {
+  content: "\f038";
+}
+.dijitIconFunction:before,
+.flat-function:before {
+  content: "\f039";
+}
+.flat-user:before {
+  content: "\f03a";
+}
+.dijitIconUsers:before,
+.flat-users:before {
+  content: "\f03b";
+}
+.dijitIconConnector:before,
+.flat-connector:before {
+  content: "\f03c";
+}
+.dijitIconDocuments:before,
+.flat-documents:before {
+  content: "\f03d";
+}
+.dijitIconEditProperty:before,
+.flat-edit-property:before {
+  content: "\f03e";
+}
+.dijitIconTask:before,
+.flat-task:before {
+  content: "\f03f";
+}
+.dijitIconNewTask:before,
+.flat-task-new:before {
+  content: "\f040";
+}
+.dijitIconEditTask:before,
+.flat-task-edit:before {
+  content: "\f041";
+}
+.dijitIconSample:before,
+.flat-sample:before {
+  content: "\f042";
+}
+.dijitIconPackage:before,
+.flat-package:before {
+  content: "\f043";
+}
+.dijitEditorIconUndo:before,
+.flat-undo:before {
+  content: "\f044";
+}
+.dijitEditorIconRedo:before,
+.flat-redo:before {
+  content: "\f045";
+}
+.dijitIconCopy:before,
+.dijitEditorIconCopy:before,
+.flat-copy:before {
+  content: "\f046";
+}
+.dijitIconCut:before,
+.dijitEditorIconCut:before,
+.flat-cut:before {
+  content: "\f047";
+}
+.dijitEditorIconPaste:before,
+.flat-paste:before {
+  content: "\f048";
+}
+.dijitEditorIconBold:before,
+.flat-bold:before {
+  content: "\f049";
+}
+.dijitEditorIconItalic:before,
+.flat-italic:before {
+  content: "\f04a";
+}
+.dijitEditorIconUnderline:before,
+.flat-underline:before {
+  content: "\f04b";
+}
+.dijitEditorIconStrikethrough:before,
+.flat-strikethrough:before {
+  content: "\f04c";
+}
+.dijitEditorIconRemoveFormat:before,
+.flat-clear-format:before {
+  content: "\f04d";
+}
+.flat-quote:before {
+  content: "\f04e";
+}
+.dijitEditorIconSuperscript:before,
+.flat-superscript:before {
+  content: "\f04f";
+}
+.dijitEditorIconSubscript:before,
+.flat-subscript:before {
+  content: "\f050";
+}
+.dijitEditorIconForeColor:before,
+.flat-color-text:before {
+  content: "\f051";
+}
+.dijitEditorIconBackColor:before,
+.flat-color-fill:before {
+  content: "\f052";
+}
+.dijitEditorIconHiliteColor:before,
+.flat-color-highlight:before {
+  content: "\f053";
+}
+.flat-font-size:before {
+  content: "\f054";
+}
+.dijitEditorIconJustifyCenter:before,
+.flat-align-center:before {
+  content: "\f055";
+}
+.dijitEditorIconJustifyFull:before,
+.flat-align-justify:before {
+  content: "\f056";
+}
+.dijitEditorIconJustifyLeft:before,
+.flat-align-left:before {
+  content: "\f057";
+}
+.dijitEditorIconJustifyRight:before,
+.flat-align-right:before {
+  content: "\f058";
+}
+.dijitEditorIconIndent:before,
+.flat-indent:before {
+  content: "\f059";
+}
+.dijitEditorIconOutdent:before,
+.flat-outdent:before {
+  content: "\f05a";
+}
+.flat-sort:before {
+  content: "\f05b";
+}
+.dijitEditorIconSpace:before,
+.flat-keyboard-space:before {
+  content: "\f05c";
+}
+.dijitEditorIconTabIndent:before,
+.flat-keyboard-tab:before {
+  content: "\f05d";
+}
+.dijitEditorIconInsertUnorderedList:before,
+.flat-list-bullet:before {
+  content: "\f05e";
+}
+.dijitEditorIconInsertOrderedList:before,
+.flat-list-number:before {
+  content: "\f05f";
+}
+.dijitEditorIconListBulletIndent:before,
+.flat-list-bullet-indent:before {
+  content: "\f060";
+}
+.dijitEditorIconListBulletOutdent:before,
+.flat-list-bullet-outdent:before {
+  content: "\f061";
+}
+.dijitEditorIconListNumIndent:before,
+.flat-list-number-indent:before {
+  content: "\f062";
+}
+.dijitEditorIconListNumOutdent:before,
+.flat-list-number-outdent:before {
+  content: "\f063";
+}
+.dijitEditorIconViewSource:before,
+.flat-code:before {
+  content: "\f064";
+}
+.dijitEditorIconCreateLink:before,
+.flat-link:before {
+  content: "\f065";
+}
+.dijitEditorIconUnlink:before,
+.flat-unlink:before {
+  content: "\f066";
+}
+.dijitEditorIconFullScreen:before,
+.flat-fullscreen:before {
+  content: "\f067";
+}
+.flat-fullscreen-exit:before {
+  content: "\f068";
+}
+.dijitEditorIconInsertImage:before,
+.flat-image:before {
+  content: "\f069";
+}
+.dijitEditorIconNewPage:before,
+.flat-page-new:before {
+  content: "\f06a";
+}
+.dijitEditorIconToggleDir:before,
+.flat-toggle-dir:before {
+  content: "\f06b";
+}
+.dijitEditorIconLeftToRight:before,
+.flat-left-to-right:before {
+  content: "\f06c";
+}
+.dijitEditorIconRightToLeft:before,
+.flat-right-to-left:before {
+  content: "\f06d";
+}
+.dijitEditorIconSelectAll:before,
+.flat-select-all:before {
+  content: "\f06e";
+}
+.dijitEditorIconWikiword:before,
+.flat-wikiword:before {
+  content: "\f06f";
+}
+.icon-spin {
+  -webkit-animation: spin-right 2s infinite linear;
+  -moz-animation: spin-right 2s infinite linear;
+  -o-animation: spin-right 2s infinite linear;
+  -ms-animation: spin-right 2s infinite linear;
+  animation: spin-right 2s infinite linear;
+}
+.dijitIconLoading {
+  font-size: 24px;
+}
+.dijitIconLoading:before {
+  content: "\f01d";
+  -webkit-animation: spin-left 2s linear infinite;
+  -moz-animation: spin-left 2s linear infinite;
+  -o-animation: spin-left 2s linear infinite;
+  -ms-animation: spin-left 2s linear infinite;
+  animation: spin-left 2s linear infinite;
+}
+.dj_ie8 .dijitIconLoading,
+.dj_ie9 .dijitIconLoading {
+  background: url("images/loadingAnimation.gif") no-repeat;
+  height: 20px;
+  width: 20px;
+}
+.dj_ie8 .dijitIconLoading:before,
+.dj_ie9 .dijitIconLoading:before {
+  content: "";
+}
+.dijitRtl .dijitEditorIconUndo:before {
+  content: "\f044";
+}
+.dijitRtl .dijitEditorIconRedo:before {
+  content: "\f044";
+}
+.dijitRtl .dijitEditorIconTabIndent:before {
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.dijitRtl .dijitEditorIconInsertUnorderedList,
+.dijitRtl .dijitEditorIconInsertOrderedList {
+  -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+:root .dijitRtl .dijitEditorIconInsertUnorderedList,
+:root .dijitRtl .dijitEditorIconInsertOrderedList {
+  filter: none;
+}
+@-moz-keyframes spin-right {
+  from {
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -o-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes spin-right {
+  from {
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -o-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes spin-right {
+  from {
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -o-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes spin-right {
+  from {
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -o-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-moz-keyframes spin-left {
+  from {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+  to {
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -o-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+  }
+}
+@-webkit-keyframes spin-left {
+  from {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+  to {
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -o-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+  }
+}
+@-o-keyframes spin-left {
+  from {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+  to {
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -o-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+  }
+}
+@keyframes spin-left {
+  from {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+  to {
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -o-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+  }
+}
diff --git a/lib/flat/icons/flat-icons.styl b/lib/flat/icons/flat-icons.styl
new file mode 100644
index 000000000..b66bddc24
--- /dev/null
+++ b/lib/flat/icons/flat-icons.styl
@@ -0,0 +1,522 @@
+/*
+ * font generated with https://icomoon.io/app
+ *
+ * all icons are Material Design icons by Google
+ * https://github.com/google/material-design-icons/blob/master/LICENSE
+ *
+ * see README for more about flat theme icons
+ */
+ 
+ @import "../variables";
+
+@font-face {
+	font-family: 'flat-icon';
+	src:url('fonts/flat-icon.eot?90nq1s');
+	src:url('fonts/flat-icon.eot?#iefix90nq1s') format('embedded-opentype'),
+		url('fonts/flat-icon.ttf?90nq1s') format('truetype'),
+		url('fonts/flat-icon.woff?90nq1s') format('woff'),
+		url('fonts/flat-icon.svg?90nq1s#flat-icon') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+[class^="flat-"], [class*=" flat-"] {
+	font-family: 'flat-icon';
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+// dijit icon classes
+.dijitIcon,
+.dijitEditorIcon {
+  _icon-core-style();
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+}
+
+// icon classes and dijit aliases
+.flat-drop-left:before {
+	content: "\f000";
+}
+.flat-drop-right:before {
+	content: "\f001";
+}
+.flat-drop-down:before {
+	content: "\f002";
+}
+.flat-drop-up:before {
+	content: "\f003";
+}
+.flat-chevron-left:before {
+	content: "\f004";
+}
+.flat-chevron-right:before {
+	content: "\f005";
+}
+.flat-chevron-down:before {
+	content: "\f006";
+}
+.flat-chevron-up:before {
+	content: "\f007";
+}
+.flat-arrow-left:before {
+	content: "\f008";
+}
+.flat-arrow-right:before {
+	content: "\f009";
+}
+.flat-arrow-down:before {
+	content: "\f00a";
+}
+.flat-arrow-up:before {
+	content: "\f00b";
+}
+.flat-check:before {
+	content: "\f00c";
+}
+.flat-check-circle:before {
+	content: "\f00d";
+}
+.flat-close:before {
+	content: "\f00e";
+}
+.dijitIconClear:before,
+.flat-close-circle:before {
+	content: "\f00f";
+}
+.dijitEditorIconCancel:before,
+.flat-close-circle-o:before {
+	content: "\f010";
+}
+.flat-add:before {
+	content: "\f011";
+}
+.flat-remove:before {
+	content: "\f012";
+}
+.flat-add-circle:before {
+	content: "\f013";
+}
+.flat-remove-circle:before {
+	content: "\f014";
+}
+.flat-add-circle-o:before {
+	content: "\f015";
+}
+.flat-remove-circle-o:before {
+	content: "\f016";
+}
+.dijitIconError:before,
+.flat-error:before {
+	content: "\f017";
+}
+.flat-error-o:before {
+	content: "\f018";
+}
+.flat-warning:before {
+	content: "\f019";
+}
+.flat-report:before {
+	content: "\f01a";
+}
+.flat-help:before {
+	content: "\f01b";
+}
+.flat-no-symbol:before {
+	content: "\f01c";
+}
+.flat-update:before {
+	content: "\f01d";
+}
+.flat-calendar:before {
+	content: "\f01e";
+}
+.flat-clock:before {
+	content: "\f01f";
+}
+.dijitFolderClosed:before,
+.dijitIconFolderClosed:before,
+.flat-folder:before {
+	content: "\f020";
+}
+.dijitFolderOpened:before,
+.dijitIconFolderOpen:before,
+.flat-folder-open:before {
+	content: "\f021";
+}
+.dijitIconEdit:before,
+.flat-edit:before {
+	content: "\f022";
+}
+.dijitIconSave:before,
+.dijitEditorIconSave:before,
+.flat-save:before {
+	content: "\f023";
+}
+.dijitIconPrint:before,
+.dijitEditorIconPrint:before,
+.flat-print:before {
+	content: "\f024";
+}
+.dijitIconDelete:before,
+.dijitEditorIconDelete:before,
+.flat-delete:before {
+	content: "\f025";
+}
+.dijitLeaf:before,
+.flat-page:before {
+	content: "\f026";
+}
+.flat-page-o:before {
+	content: "\f027";
+}
+.flat-page-add:before {
+	content: "\f028";
+}
+.flat-page-remove:before {
+	content: "\f029";
+}
+.flat-page-add-o:before {
+	content: "\f02a";
+}
+.flat-page-remove-o:before {
+	content: "\f02b";
+}
+.dijitIconFile:before,
+.flat-file:before {
+	content: "\f02c";
+}
+.dijitIconMail:before,
+.flat-mail:before {
+	content: "\f02d";
+}
+.dijitIconDatabase:before,
+.flat-storage:before {
+	content: "\f02e";
+}
+.dijitIconConfigure:before,
+.flat-settings:before {
+	content: "\f02f";
+}
+.dijitIconSearch:before,
+.flat-search:before {
+	content: "\f030";
+}
+.dijitIconBookmark:before,
+.flat-bookmark:before {
+	content: "\f031";
+}
+.flat-menu:before {
+	content: "\f032";
+}
+.dijitIconApplication:before,
+.flat-application:before {
+	content: "\f033";
+}
+.dijitIconKey:before,
+.flat-key:before {
+	content: "\f034";
+}
+.dijitIconTable:before,
+.dijitEditorIconInsertTable:before,
+.flat-table:before {
+	content: "\f035";
+}
+.flat-grid:before {
+	content: "\f036";
+}
+.dijitIconChart:before,
+.flat-chart:before {
+	content: "\f037";
+}
+.dijitIconFilter:before,
+.flat-filter:before {
+	content: "\f038";
+}
+.dijitIconFunction:before,
+.flat-function:before {
+	content: "\f039";
+}
+.flat-user:before {
+	content: "\f03a";
+}
+.dijitIconUsers:before,
+.flat-users:before {
+	content: "\f03b";
+}
+.dijitIconConnector:before,
+.flat-connector:before {
+	content: "\f03c";
+}
+.dijitIconDocuments:before,
+.flat-documents:before {
+	content: "\f03d";
+}
+.dijitIconEditProperty:before,
+.flat-edit-property:before {
+	content: "\f03e";
+}
+.dijitIconTask:before,
+.flat-task:before {
+	content: "\f03f";
+}
+.dijitIconNewTask:before,
+.flat-task-new:before {
+	content: "\f040";
+}
+.dijitIconEditTask:before,
+.flat-task-edit:before {
+	content: "\f041";
+}
+.dijitIconSample:before,
+.flat-sample:before {
+	content: "\f042";
+}
+.dijitIconPackage:before,
+.flat-package:before {
+	content: "\f043";
+}
+.dijitEditorIconUndo:before,
+.flat-undo:before {
+	content: "\f044";
+}
+.dijitEditorIconRedo:before,
+.flat-redo:before {
+	content: "\f045";
+}
+.dijitIconCopy:before,
+.dijitEditorIconCopy:before,
+.flat-copy:before {
+	content: "\f046";
+}
+.dijitIconCut:before,
+.dijitEditorIconCut:before,
+.flat-cut:before {
+	content: "\f047";
+}
+.dijitEditorIconPaste:before,
+.flat-paste:before {
+	content: "\f048";
+}
+.dijitEditorIconBold:before,
+.flat-bold:before {
+	content: "\f049";
+}
+.dijitEditorIconItalic:before,
+.flat-italic:before {
+	content: "\f04a";
+}
+.dijitEditorIconUnderline:before,
+.flat-underline:before {
+	content: "\f04b";
+}
+.dijitEditorIconStrikethrough:before,
+.flat-strikethrough:before {
+	content: "\f04c";
+}
+.dijitEditorIconRemoveFormat:before,
+.flat-clear-format:before {
+	content: "\f04d";
+}
+.flat-quote:before {
+	content: "\f04e";
+}
+.dijitEditorIconSuperscript:before,
+.flat-superscript:before {
+	content: "\f04f";
+}
+.dijitEditorIconSubscript:before,
+.flat-subscript:before {
+	content: "\f050";
+}
+.dijitEditorIconForeColor:before,
+.flat-color-text:before {
+	content: "\f051";
+}
+.dijitEditorIconBackColor:before,
+.flat-color-fill:before {
+	content: "\f052";
+}
+.dijitEditorIconHiliteColor:before,
+.flat-color-highlight:before {
+	content: "\f053";
+}
+.flat-font-size:before {
+	content: "\f054";
+}
+.dijitEditorIconJustifyCenter:before,
+.flat-align-center:before {
+	content: "\f055";
+}
+.dijitEditorIconJustifyFull:before,
+.flat-align-justify:before {
+	content: "\f056";
+}
+.dijitEditorIconJustifyLeft:before,
+.flat-align-left:before {
+	content: "\f057";
+}
+.dijitEditorIconJustifyRight:before,
+.flat-align-right:before {
+	content: "\f058";
+}
+.dijitEditorIconIndent:before,
+.flat-indent:before {
+	content: "\f059";
+}
+.dijitEditorIconOutdent:before,
+.flat-outdent:before {
+	content: "\f05a";
+}
+.flat-sort:before {
+	content: "\f05b";
+}
+.dijitEditorIconSpace:before,
+.flat-keyboard-space:before {
+	content: "\f05c";
+}
+.dijitEditorIconTabIndent:before,
+.flat-keyboard-tab:before {
+	content: "\f05d";
+}
+.dijitEditorIconInsertUnorderedList:before,
+.flat-list-bullet:before {
+	content: "\f05e";
+}
+.dijitEditorIconInsertOrderedList:before,
+.flat-list-number:before {
+	content: "\f05f";
+}
+.dijitEditorIconListBulletIndent:before,
+.flat-list-bullet-indent:before {
+	content: "\f060";
+}
+.dijitEditorIconListBulletOutdent:before,
+.flat-list-bullet-outdent:before {
+	content: "\f061";
+}
+.dijitEditorIconListNumIndent:before,
+.flat-list-number-indent:before {
+	content: "\f062";
+}
+.dijitEditorIconListNumOutdent:before,
+.flat-list-number-outdent:before {
+	content: "\f063";
+}
+.dijitEditorIconViewSource:before,
+.flat-code:before {
+	content: "\f064";
+}
+.dijitEditorIconCreateLink:before,
+.flat-link:before {
+	content: "\f065";
+}
+.dijitEditorIconUnlink:before,
+.flat-unlink:before {
+	content: "\f066";
+}
+.dijitEditorIconFullScreen:before,
+.flat-fullscreen:before {
+	content: "\f067";
+}
+.flat-fullscreen-exit:before {
+	content: "\f068";
+}
+.dijitEditorIconInsertImage:before,
+.flat-image:before {
+	content: "\f069";
+}
+.dijitEditorIconNewPage:before,
+.flat-page-new:before {
+	content: "\f06a";
+}
+.dijitEditorIconToggleDir:before,
+.flat-toggle-dir:before {
+	content: "\f06b";
+}
+.dijitEditorIconLeftToRight:before,
+.flat-left-to-right:before {
+	content: "\f06c";
+}
+.dijitEditorIconRightToLeft:before,
+.flat-right-to-left:before {
+	content: "\f06d";
+}
+.dijitEditorIconSelectAll:before,
+.flat-select-all:before {
+	content: "\f06e";
+}
+.dijitEditorIconWikiword:before,
+.flat-wikiword:before {
+	content: "\f06f";
+}
+
+// animations and transformations
+@keyframes spin-right {
+	from {transform: rotate(0);}
+	to {transform: rotate(360deg);}
+}
+@keyframes spin-left {
+	from {transform: rotate(360deg);}
+	to {transform: rotate(0);}
+}
+
+// genaric icon spin class
+.icon-spin {
+  animation: spin-right 2s infinite linear;
+}
+
+// loading
+.dijitIconLoading {
+	font-size: 24px;
+	&:before {
+		// may want to add a another "spinning" icon
+		// which is more loady and less refreshy
+		content: "\f01d";
+		animation: spin-left 2s linear infinite;
+	}
+}
+
+.dj_ie8 .dijitIconLoading,
+.dj_ie9 .dijitIconLoading {
+	background: url('images/loadingAnimation.gif') no-repeat;
+	height: 20px;
+	width: 20px;
+	&:before {
+		content: "";
+	}
+}
+
+// rtl
+.dijitRtl .dijitEditorIconUndo {
+	&:before {
+		content: "\f044";
+	}
+}
+.dijitRtl .dijitEditorIconRedo {
+	&:before {
+		content: "\f044";
+	}
+}
+.dijitRtl .dijitEditorIconTabIndent {
+	&:before {
+		transform: rotate(180deg);
+	}
+}
+.dijitRtl .dijitEditorIconInsertUnorderedList,
+.dijitRtl .dijitEditorIconInsertOrderedList {
+	transform: scale(-1, 1);
+}
+
+:root .dijitRtl .dijitEditorIconInsertUnorderedList,
+:root .dijitRtl .dijitEditorIconInsertOrderedList {
+	filter: none;	
+}
+
diff --git a/lib/flat/icons/fonts/flat-icon.eot b/lib/flat/icons/fonts/flat-icon.eot
new file mode 100755
index 000000000..803a04220
--- /dev/null
+++ b/lib/flat/icons/fonts/flat-icon.eot
diff --git a/lib/flat/icons/fonts/flat-icon.svg b/lib/flat/icons/fonts/flat-icon.svg
new file mode 100755
index 000000000..60db68b50
--- /dev/null
+++ b/lib/flat/icons/fonts/flat-icon.svg
@@ -0,0 +1,122 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="flat-icon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xf000;" glyph-name="drop-left" d="M598 640.667v-428l-214 214z" />
+<glyph unicode="&#xf001;" glyph-name="drop-right" d="M426 212.667v428l214-214z" />
+<glyph unicode="&#xf002;" glyph-name="drop-down" d="M298 512.667h428l-214-214z" />
+<glyph unicode="&#xf003;" glyph-name="drop-up" d="M298 340.667l214 214 214-214h-428z" />
+<glyph unicode="&#xf004;" glyph-name="chevron-left" d="M658 622.667l-196-196 196-196-60-60-256 256 256 256z" />
+<glyph unicode="&#xf005;" glyph-name="chevron-right" d="M426 682.667l256-256-256-256-60 60 196 196-196 196z" />
+<glyph unicode="&#xf006;" glyph-name="chevron-down" d="M708 572.667l60-60-256-256-256 256 60 60 196-196z" />
+<glyph unicode="&#xf007;" glyph-name="chevron-up" d="M512 596.667l256-256-60-60-196 196-196-196-60 60z" />
+<glyph unicode="&#xf008;" glyph-name="arrow-left" d="M854 468.667v-84h-520l238-240-60-60-342 342 342 342 60-60-238-240h520z" />
+<glyph unicode="&#xf009;" glyph-name="arrow-right" d="M512 768.667l342-342-342-342-60 60 238 240h-520v84h520l-238 240z" />
+<glyph unicode="&#xf00a;" glyph-name="arrow-down" d="M854 426.667l-342-342-342 342 60 60 240-238v520h84v-520l240 238z" />
+<glyph unicode="&#xf00b;" glyph-name="arrow-up" d="M170 426.667l342 342 342-342-60-60-240 238v-520h-84v520l-240-238z" />
+<glyph unicode="&#xf00c;" glyph-name="check" d="M384 248.667l452 452 60-60-512-512-238 238 60 60z" />
+<glyph unicode="&#xf00d;" glyph-name="check-circle" d="M426 212.667l384 384-60 62-324-324-152 152-60-60zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125z" />
+<glyph unicode="&#xf00e;" glyph-name="close" d="M810 664.667l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z" />
+<glyph unicode="&#xf00f;" glyph-name="close-circle" d="M726 272.667l-154 154 154 154-60 60-154-154-154 154-60-60 154-154-154-154 60-60 154 154 154-154zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125z" />
+<glyph unicode="&#xf010;" glyph-name="close-circle-o" d="M512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM622 596.667l60-60-110-110 110-110-60-60-110 110-110-110-60 60 110 110-110 110 60 60 110-110z" />
+<glyph unicode="&#xf011;" glyph-name="add" d="M810 384.667h-256v-256h-84v256h-256v84h256v256h84v-256h256v-84z" />
+<glyph unicode="&#xf012;" glyph-name="remove" d="M810 384.667h-596v84h596v-84z" />
+<glyph unicode="&#xf013;" glyph-name="add-circle" d="M726 384.667v84h-172v172h-84v-172h-172v-84h172v-172h84v172h172zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125z" />
+<glyph unicode="&#xf014;" glyph-name="remove-circle" d="M726 384.667v84h-428v-84h428zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125z" />
+<glyph unicode="&#xf015;" glyph-name="add-circle-o" d="M512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM554 640.667v-172h172v-84h-172v-172h-84v172h-172v84h172v172h84z" />
+<glyph unicode="&#xf016;" glyph-name="remove-circle-o" d="M512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM298 468.667h428v-84h-428v84z" />
+<glyph unicode="&#xf017;" glyph-name="error" d="M554 384.667v256h-84v-256h84zM554 212.667v86h-84v-86h84zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125z" />
+<glyph unicode="&#xf018;" glyph-name="error-o" d="M512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM470 640.667h84v-256h-84v256zM470 298.667h84v-86h-84v86z" />
+<glyph unicode="&#xf019;" glyph-name="warning" d="M554 340.667v172h-84v-172h84zM554 170.667v86h-84v-86h84zM42 42.667l470 810 470-810h-940z" />
+<glyph unicode="&#xf01a;" glyph-name="report" d="M554 384.667v256h-84v-256h84zM512 200.667q22 0 39 17t17 39-17 38-39 16-39-16-17-38 17-39 39-17zM672 810.667l224-224v-320l-224-224h-320l-224 224v320l224 224h320z" />
+<glyph unicode="&#xf01b;" glyph-name="help" d="M642 458.667q40 40 40 96 0 70-50 120t-120 50-120-50-50-120h84q0 34 26 60t60 26 60-26 26-60-26-60l-52-54q-50-54-50-120v-22h84q0 66 50 120zM554 128.667v84h-84v-84h84zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125z" />
+<glyph unicode="&#xf01c;" glyph-name="no-symbol" d="M782 216.667q72 90 72 210 0 140-101 241t-241 101q-120 0-210-72zM512 84.667q120 0 210 72l-480 480q-72-90-72-210 0-140 101-241t241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125z" />
+<glyph unicode="&#xf01d;" glyph-name="update" d="M512 170.667v128l170-170-170-172v128q-140 0-241 101t-101 241q0 100 54 182l62-62q-30-54-30-120 0-106 75-181t181-75zM512 768.667q140 0 241-101t101-241q0-100-54-182l-62 62q30 54 30 120 0 106-75 181t-181 75v-128l-170 170 170 172v-128z" />
+<glyph unicode="&#xf01e;" glyph-name="calendar" d="M810 128.667v468h-596v-468h596zM682 896.667h86v-86h42q34 0 60-26t26-60v-596q0-34-26-60t-60-26h-596q-36 0-61 26t-25 60v596q0 34 25 60t61 26h42v86h86v-86h340v86zM726 426.667v-214h-214v214h214z" />
+<glyph unicode="&#xf01f;" glyph-name="clock" d="M534 640.667v-224l192-114-32-54-224 136v256h64zM512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125z" />
+<glyph unicode="&#xf020;" glyph-name="folder" d="M426 768.667l86-86h342q34 0 59-26t25-60v-426q0-34-25-60t-59-26h-684q-34 0-59 26t-25 60v512q0 34 25 60t59 26h256z" />
+<glyph unicode="&#xf021;" glyph-name="folder-open" d="M854 170.667v426h-684v-426h684zM854 682.667q34 0 59-26t25-60v-426q0-34-25-60t-59-26h-684q-34 0-59 26t-25 60v512q0 34 25 60t59 26h256l86-86h342z" />
+<glyph unicode="&#xf022;" glyph-name="edit" d="M884 638.667l-78-78-160 160 78 78q12 12 30 12t30-12l100-100q12-12 12-30t-12-30zM128 202.667l472 472 160-160-472-472h-160v160z" />
+<glyph unicode="&#xf023;" glyph-name="save" d="M640 554.667v170h-426v-170h426zM512 128.667q52 0 90 38t38 90-38 90-90 38-90-38-38-90 38-90 90-38zM726 810.667l170-170v-512q0-34-26-60t-60-26h-596q-36 0-61 26t-25 60v596q0 34 25 60t61 26h512z" />
+<glyph unicode="&#xf024;" glyph-name="print" d="M768 810.667v-170h-512v170h512zM810 426.667q18 0 31 12t13 30-13 31-31 13-30-13-12-31 12-30 30-12zM682 128.667v212h-340v-212h340zM810 596.667q52 0 90-38t38-90v-256h-170v-170h-512v170h-170v256q0 52 38 90t90 38h596z" />
+<glyph unicode="&#xf025;" glyph-name="delete" d="M810 768.667v-86h-596v86h148l44 42h212l44-42h148zM256 128.667v512h512v-512q0-34-26-60t-60-26h-340q-34 0-60 26t-26 60z" />
+<glyph unicode="&#xf026;" glyph-name="page" d="M554 554.667h236l-236 234v-234zM256 852.667h342l256-256v-512q0-34-26-59t-60-25h-512q-34 0-60 25t-26 59l2 684q0 34 25 59t59 25z" />
+<glyph unicode="&#xf027;" glyph-name="page-o" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf028;" glyph-name="page-add" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf029;" glyph-name="page-remove" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf02a;" glyph-name="page-add-o" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf02b;" glyph-name="page-remove-o" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf02c;" glyph-name="file" d="M554 554.667h236l-236 234v-234zM682 340.667v86h-340v-86h340zM682 170.667v86h-340v-86h340zM598 852.667l256-256v-512q0-34-26-59t-60-25h-512q-34 0-60 25t-26 59l2 684q0 34 25 59t59 25h342z" />
+<glyph unicode="&#xf02d;" glyph-name="mail" d="M854 596.667v86l-342-214-342 214v-86l342-212zM854 768.667q34 0 59-26t25-60v-512q0-34-25-60t-59-26h-684q-34 0-59 26t-25 60v512q0 34 25 60t59 26h684z" />
+<glyph unicode="&#xf02e;" glyph-name="storage" d="M170 468.667v-84h86v84h-86zM86 340.667v172h852v-172h-852zM256 640.667v84h-86v-84h86zM86 768.667h852v-172h-852v172zM170 212.667v-84h86v84h-86zM86 84.667v172h852v-172h-852z" />
+<glyph unicode="&#xf02f;" glyph-name="settings" d="M512 276.667q62 0 106 44t44 106-44 106-106 44-106-44-44-106 44-106 106-44zM830 384.667l90-70q14-10 4-28l-86-148q-8-14-26-8l-106 42q-42-30-72-42l-16-112q-4-18-20-18h-172q-16 0-20 18l-16 112q-38 16-72 42l-106-42q-18-6-26 8l-86 148q-10 18 4 28l90 70q-2 14-2 42t2 42l-90 70q-14 10-4 28l86 148q8 14 26 8l106-42q42 30 72 42l16 112q4 18 20 18h172q16 0 20-18l16-112q38-16 72-42l106 42q18 6 26-8l86-148q10-18-4-28l-90-70q2-14 2-42t-2-42z" />
+<glyph unicode="&#xf030;" glyph-name="search" d="M406 340.667q80 0 136 56t56 136-56 136-136 56-136-56-56-136 56-136 136-56zM662 340.667l212-212-64-64-212 212v34l-12 12q-76-66-180-66-116 0-197 80t-81 196 81 197 197 81 196-81 80-197q0-104-66-180l12-12h34z" />
+<glyph unicode="&#xf031;" glyph-name="bookmark" d="M726 810.667q34 0 59-26t25-60v-682l-298 128-298-128v682q0 34 25 60t59 26h428z" />
+<glyph unicode="&#xf032;" glyph-name="menu" d="M128 682.667h768v-86h-768v86zM128 384.667v84h768v-84h-768zM128 170.667v86h768v-86h-768z" />
+<glyph unicode="&#xf033;" glyph-name="application" d="M854 170.667v384h-172v-384h172zM640 384.667v170h-470v-170h470zM640 170.667v170h-470v-170h470zM854 768.667q34 0 59-26t25-60v-512q0-34-25-60t-59-26h-684q-34 0-59 26t-25 60v512q0 34 25 60t59 26h684z" />
+<glyph unicode="&#xf034;" glyph-name="key" d="M298 340.667q34 0 60 26t26 60-26 60-60 26-59-26-25-60 25-60 59-26zM540 512.667h442v-172h-86v-170h-170v170h-186q-26-76-92-123t-150-47q-106 0-181 75t-75 181 75 181 181 75q84 0 150-47t92-123z" />
+<glyph unicode="&#xf035;" glyph-name="table" d="M170 724.667h684v-84h-684v84zM170 468.667v86h684v-86h-684zM170 128.667v84h684v-84h-684zM170 298.667v86h684v-86h-684z" />
+<glyph unicode="&#xf036;" glyph-name="grid" d="M768 724.667h170v-170h-170v170zM768 128.667v170h170v-170h-170zM554 128.667v170h172v-170h-172zM342 128.667v170h170v-170h-170zM128 128.667v170h170v-170h-170zM768 340.667v172h170v-172h-170zM554 724.667h172v-170h-172v170zM342 554.667v170h170v-170h-170zM554 340.667v172h172v-172h-172zM342 340.667v172h170v-172h-170zM128 340.667v172h170v-172h-170zM128 554.667v170h170v-170h-170z" />
+<glyph unicode="&#xf037;" glyph-name="chart" d="M682 554.667h172v-470h-172v470zM170 84.667v342h172v-342h-172zM426 84.667v684h172v-684h-172z" />
+<glyph unicode="&#xf038;" glyph-name="filter" d="M256 384.667v84h512v-84h-512zM128 682.667h768v-86h-768v86zM426 170.667v86h172v-86h-172z" />
+<glyph unicode="&#xf039;" glyph-name="function" d="M768 768.667v-128h-298l212-214-212-214h298v-128h-512v86l278 256-278 256v86h512z" />
+<glyph unicode="&#xf03a;" glyph-name="user" d="M512 340.667q108 0 225-47t117-123v-86h-684v86q0 76 117 123t225 47zM512 426.667q-70 0-120 50t-50 120 50 121 120 51 120-51 50-121-50-120-120-50z" />
+<glyph unicode="&#xf03b;" glyph-name="users" d="M682 384.667q56 0 122-16t122-52 56-82v-106h-256v106q0 88-84 148 14 2 40 2zM342 384.667q56 0 122-16t121-52 55-82v-106h-598v106q0 46 56 82t122 52 122 16zM342 468.667q-52 0-90 38t-38 90 38 90 90 38 89-38 37-90-37-90-89-38zM682 468.667q-52 0-90 38t-38 90 38 90 90 38 90-38 38-90-38-90-90-38z" />
+<glyph unicode="&#xf03c;" glyph-name="connector" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf03d;" glyph-name="documents" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf03e;" glyph-name="edit-property" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf03f;" glyph-name="task" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf040;" glyph-name="task-new" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf041;" glyph-name="task-edit" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf042;" glyph-name="sample" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf043;" glyph-name="package" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf044;" glyph-name="undo" d="M534 596.667q146 0 262-86t162-222l-100-32q-34 104-123 169t-201 65q-124 0-220-80l156-154h-384v384l152-154q126 110 296 110z" />
+<glyph unicode="&#xf045;" glyph-name="redo" d="M786 486.667l152 154v-384h-384l156 154q-96 80-220 80-112 0-201-65t-123-169l-100 32q44 136 161 222t263 86q170 0 296-110z" />
+<glyph unicode="&#xf046;" glyph-name="copy" d="M810 42.667v598h-468v-598h468zM810 724.667q34 0 60-25t26-59v-598q0-34-26-60t-60-26h-468q-34 0-60 26t-26 60v598q0 34 26 59t60 25h468zM682 896.667v-86h-512v-598h-84v598q0 34 25 60t59 26h512z" />
+<glyph unicode="&#xf047;" glyph-name="cut" d="M810 810.667h128v-42l-298-300-86 86zM512 404.667q22 0 22 22t-22 22-22-22 22-22zM256 84.667q34 0 60 25t26 61-26 61-60 25-60-25-26-61 26-61 60-25zM256 596.667q34 0 60 25t26 61-26 61-60 25-60-25-26-61 26-61 60-25zM412 612.667l526-528v-42h-128l-298 298-100-100q14-30 14-70 0-70-50-120t-120-50-120 50-50 120 50 120 120 50q40 0 70-14l100 100-100 100q-30-14-70-14-70 0-120 50t-50 120 50 120 120 50 120-50 50-120q0-40-14-70z" />
+<glyph unicode="&#xf048;" glyph-name="paste" d="M810 84.667v684h-84v-128h-428v128h-84v-684h596zM512 852.667q-18 0-30-12t-12-30 12-30 30-12 30 12 12 30-12 30-30 12zM810 852.667q34 0 60-25t26-59v-684q0-34-26-59t-60-25h-596q-34 0-60 25t-26 59v684q0 34 26 59t60 25h178q14 38 46 62t74 24 74-24 46-62h178z" />
+<glyph unicode="&#xf049;" glyph-name="bold" d="M576 276.667q28 0 46 19t18 45-18 45-46 19h-150v-128h150zM426 660.667v-128h128q26 0 45 19t19 45-19 45-45 19h-128zM666 478.667q92-42 92-146 0-68-45-115t-113-47h-302v598h268q72 0 121-50t49-122-70-118z" />
+<glyph unicode="&#xf04a;" glyph-name="italic" d="M426 768.667h342v-128h-120l-144-342h94v-128h-342v128h120l144 342h-94v128z" />
+<glyph unicode="&#xf04b;" glyph-name="underline" d="M214 128.667h596v-86h-596v86zM512 212.667q-106 0-181 75t-75 181v342h106v-342q0-62 44-105t106-43 106 43 44 105v342h106v-342q0-106-75-181t-181-75z" />
+<glyph unicode="&#xf04c;" glyph-name="strikethrough" d="M128 340.667v86h768v-86h-768zM214 768.667h596v-128h-212v-128h-172v128h-212v128zM426 128.667v128h172v-128h-172z" />
+<glyph unicode="&#xf04d;" glyph-name="clear-format" d="M256 724.667h598v-128h-248l-68-160-90 88 30 72h-102l-120 120v8zM140 724.667l12-10 616-618-54-54-242 242-66-156h-128l104 246-296 296z" />
+<glyph unicode="&#xf04e;" glyph-name="quote" d="M598 212.667l84 172h-128v256h256v-256l-84-172h-128zM256 212.667l86 172h-128v256h256v-256l-86-172h-128z" />
+<glyph unicode="&#xf04f;" glyph-name="superscript" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf050;" glyph-name="subscript" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf051;" glyph-name="color-text" d="M410 426.667h204l-102 270zM470 810.667h84l234-598h-96l-46 128h-268l-48-128h-96zM0 84.667h1024v-170h-1024v170z" />
+<glyph unicode="&#xf052;" glyph-name="color-fill" d="M0 84.667h1024v-170h-1024v170zM810 448.667q86-94 86-150 0-34-26-60t-60-26-59 26-25 60q0 24 21 62t41 62zM222 512.667h410l-206 204zM706 556.667q20-20 20-46t-20-44l-234-234q-20-20-46-20-24 0-44 20l-236 234q-20 18-20 44t20 46l220 220-102 102 62 60z" />
+<glyph unicode="&#xf053;" glyph-name="color-highlight" d="M680 148.667h90l-218 556h-80l-218-556h90l48 128h240zM854 852.667q34 0 59-25t25-59v-684q0-34-25-59t-59-25h-684q-34 0-59 25t-25 59v684q0 34 25 59t59 25h684zM424 362.667l88 236 88-236h-176z" />
+<glyph unicode="&#xf054;" glyph-name="font-size" d="M128 426.667v128h384v-128h-128v-298h-128v298h-128zM384 768.667h554v-128h-212v-512h-128v512h-214v128z" />
+<glyph unicode="&#xf055;" glyph-name="align-center" d="M128 810.667h768v-86h-768v86zM298 640.667h428v-86h-428v86zM128 384.667v84h768v-84h-768zM128 42.667v86h768v-86h-768zM298 298.667h428v-86h-428v86z" />
+<glyph unicode="&#xf056;" glyph-name="align-justify" d="M128 810.667h768v-86h-768v86zM128 554.667v86h768v-86h-768zM128 384.667v84h768v-84h-768zM128 212.667v86h768v-86h-768zM128 42.667v86h768v-86h-768z" />
+<glyph unicode="&#xf057;" glyph-name="align-left" d="M128 810.667h768v-86h-768v86zM128 42.667v86h768v-86h-768zM128 384.667v84h768v-84h-768zM640 640.667v-86h-512v86h512zM640 298.667v-86h-512v86h512z" />
+<glyph unicode="&#xf058;" glyph-name="align-right" d="M128 810.667h768v-86h-768v86zM384 554.667v86h512v-86h-512zM128 384.667v84h768v-84h-768zM384 212.667v86h512v-86h-512zM128 42.667v86h768v-86h-768z" />
+<glyph unicode="&#xf059;" glyph-name="indent" d="M470 384.667v84h426v-84h-426zM470 554.667v86h426v-86h-426zM128 810.667h768v-86h-768v86zM470 212.667v86h426v-86h-426zM128 596.667l170-170-170-170v340zM128 42.667v86h768v-86h-768z" />
+<glyph unicode="&#xf05a;" glyph-name="outdent" d="M470 384.667v84h426v-84h-426zM470 554.667v86h426v-86h-426zM128 810.667h768v-86h-768v86zM128 42.667v86h768v-86h-768zM128 426.667l170 170v-340zM470 212.667v86h426v-86h-426z" />
+<glyph unicode="&#xf05b;" glyph-name="sort" d="M128 384.667v84h512v-84h-512zM128 682.667h768v-86h-768v86zM128 170.667v86h256v-86h-256z" />
+<glyph unicode="&#xf05c;" glyph-name="keyboard-space" d="M768 554.667h86v-256h-684v256h86v-170h512v170z" />
+<glyph unicode="&#xf05d;" glyph-name="keyboard-tab" d="M854 682.667h84v-512h-84v512zM494 622.667l60 60 256-256-256-256-60 60 154 154h-606v84h606z" />
+<glyph unicode="&#xf05e;" glyph-name="list-bullet" d="M298 724.667h598v-84h-598v84zM298 384.667v84h598v-84h-598zM298 128.667v84h598v-84h-598zM170 226.667q24 0 41-16t17-40-17-40-41-16-40 16-16 40 16 40 40 16zM170 746.667q26 0 45-18t19-46-19-46-45-18-45 18-19 46 19 46 45 18zM170 490.667q26 0 45-18t19-46-19-46-45-18-45 18-19 46 19 46 45 18z" />
+<glyph unicode="&#xf05f;" glyph-name="list-number" d="M298 384.667v84h598v-84h-598zM298 128.667v84h598v-84h-598zM298 724.667h598v-84h-598v84zM86 468.667v44h128v-40l-78-88h78v-44h-128v40l76 88h-76zM128 596.667v128h-42v44h84v-172h-42zM86 212.667v44h128v-172h-128v44h84v20h-42v44h42v20h-84z" />
+<glyph unicode="&#xf060;" glyph-name="list-bullet-indent" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf061;" glyph-name="list-bullet-outdent" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf062;" glyph-name="list-number-indent" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf063;" glyph-name="list-number-outdent" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf064;" glyph-name="code" d="M622 230.667l198 196-198 196 60 60 256-256-256-256zM402 230.667l-60-60-256 256 256 256 60-60-198-196z" />
+<glyph unicode="&#xf065;" glyph-name="link" d="M726 640.667q88 0 150-63t62-151-62-151-150-63h-172v82h172q54 0 93 39t39 93-39 93-93 39h-172v82h172zM342 384.667v84h340v-84h-340zM166 426.667q0-54 39-93t93-39h172v-82h-172q-88 0-150 63t-62 151 62 151 150 63h172v-82h-172q-54 0-93-39t-39-93z" />
+<glyph unicode="&#xf066;" glyph-name="unlink" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf067;" glyph-name="fullscreen" d="M598 724.667h212v-212h-84v128h-128v84zM726 212.667v128h84v-212h-212v84h128zM214 512.667v212h212v-84h-128v-128h-84zM298 340.667v-128h128v-84h-212v212h84z" />
+<glyph unicode="&#xf068;" glyph-name="fullscreen-exit" d="M682 596.667h128v-84h-212v212h84v-128zM598 128.667v212h212v-84h-128v-128h-84zM342 596.667v128h84v-212h-212v84h128zM214 256.667v84h212v-212h-84v128h-128z" />
+<glyph unicode="&#xf069;" glyph-name="image" d="M362 362.667l-148-192h596l-192 256-148-192zM896 128.667q0-34-26-60t-60-26h-596q-34 0-60 26t-26 60v596q0 34 26 60t60 26h596q34 0 60-26t26-60v-596z" />
+<glyph unicode="&#xf06a;" glyph-name="page-new" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf06b;" glyph-name="toggle-dir" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf06c;" glyph-name="left-to-right" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf06d;" glyph-name="right-to-left" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf06e;" glyph-name="select-all" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+<glyph unicode="&#xf06f;" glyph-name="wikiword" d="M382 394.667q-40-40-40-96 0-70 50-120t120-50 120 50 50 120h-84q0-34-26-60t-60-26-60 26-26 60 26 60l52 54q50 54 50 120v22h-84q0-66-50-120zM470 724.667v-84h84v84h-84zM512 0.667q-176 0-301 125t-125 301 125 301 301 125 301-125 125-301-125-301-301-125z" />
+</font></defs></svg>
\ No newline at end of file
diff --git a/lib/flat/icons/fonts/flat-icon.ttf b/lib/flat/icons/fonts/flat-icon.ttf
new file mode 100755
index 000000000..96d0c500a
--- /dev/null
+++ b/lib/flat/icons/fonts/flat-icon.ttf
diff --git a/lib/flat/icons/fonts/flat-icon.woff b/lib/flat/icons/fonts/flat-icon.woff
new file mode 100755
index 000000000..a62cb0b77
--- /dev/null
+++ b/lib/flat/icons/fonts/flat-icon.woff
diff --git a/lib/flat/icons/images/loadingAnimation.gif b/lib/flat/icons/images/loadingAnimation.gif
new file mode 100644
index 000000000..694e2cb3f
--- /dev/null
+++ b/lib/flat/icons/images/loadingAnimation.gif
diff --git a/lib/flat/icons/selection.json b/lib/flat/icons/selection.json
new file mode 100755
index 000000000..0207276e4
--- /dev/null
+++ b/lib/flat/icons/selection.json
@@ -0,0 +1,3388 @@
+{
+	"IcoMoonType": "selection",
+	"icons": [
+		{
+			"icon": {
+				"paths": [
+					"M598 298v428l-214-214z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57857,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 23,
+				"id": 798,
+				"name": "drop-left",
+				"prevSize": 24,
+				"code": 61440
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 0
+		},
+		{
+			"icon": {
+				"paths": [
+					"M426 726v-428l214 214z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57857,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 3,
+				"id": 797,
+				"name": "drop-right",
+				"prevSize": 24,
+				"code": 61441
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 1
+		},
+		{
+			"icon": {
+				"paths": [
+					"M298 426h428l-214 214z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57857,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 1,
+				"id": 513,
+				"prevSize": 24,
+				"code": 61442,
+				"name": "drop-down",
+				"ligatures": "arrow-drop-down"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 2
+		},
+		{
+			"icon": {
+				"paths": [
+					"M298 598l214-214 214 214h-428z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57859,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 41,
+				"id": 515,
+				"prevSize": 24,
+				"code": 61443,
+				"name": "drop-up",
+				"ligatures": "arrow-drop-up"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 3
+		},
+		{
+			"icon": {
+				"paths": [
+					"M658 316l-196 196 196 196-60 60-256-256 256-256z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57863,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 33,
+				"id": 519,
+				"prevSize": 24,
+				"code": 61444,
+				"name": "chevron-left",
+				"ligatures": "chevron-left"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 4
+		},
+		{
+			"icon": {
+				"paths": [
+					"M426 256l256 256-256 256-60-60 196-196-196-196z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57864,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 34,
+				"id": 520,
+				"prevSize": 24,
+				"code": 61445,
+				"name": "chevron-right",
+				"ligatures": "chevron-right"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 5
+		},
+		{
+			"icon": {
+				"paths": [
+					"M708 366l60 60-256 256-256-256 60-60 196 196z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57867,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 37,
+				"id": 523,
+				"prevSize": 24,
+				"code": 61446,
+				"name": "chevron-down",
+				"ligatures": "chevron-down"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 6
+		},
+		{
+			"icon": {
+				"paths": [
+					"M512 342l256 256-60 60-196-196-196 196-60-60z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57866,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 36,
+				"id": 522,
+				"prevSize": 24,
+				"code": 61447,
+				"name": "chevron-up",
+				"ligatures": "chevron-up"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 7
+		},
+		{
+			"icon": {
+				"paths": [
+					"M854 470v84h-520l238 240-60 60-342-342 342-342 60 60-238 240h520z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57856,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 31,
+				"id": 512,
+				"prevSize": 24,
+				"code": 61448,
+				"name": "arrow-left",
+				"ligatures": "arrow-back"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 8
+		},
+		{
+			"icon": {
+				"paths": [
+					"M512 170l342 342-342 342-60-60 238-240h-520v-84h520l-238-240z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57860,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 4,
+				"id": 799,
+				"name": "arrow-right",
+				"prevSize": 24,
+				"code": 61449
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 9
+		},
+		{
+			"icon": {
+				"paths": [
+					"M854 512l-342 342-342-342 60-60 240 238v-520h84v520l240-238z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57860,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 5,
+				"id": 800,
+				"name": "arrow-down",
+				"prevSize": 24,
+				"code": 61450
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 10
+		},
+		{
+			"icon": {
+				"paths": [
+					"M170 512l342-342 342 342-60 60-240-238v520h-84v-520l-240 238z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57860,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 156,
+				"id": 516,
+				"prevSize": 24,
+				"code": 61451,
+				"name": "arrow-up",
+				"ligatures": "arrow-forward"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 11
+		},
+		{
+			"icon": {
+				"paths": [
+					"M384 690l452-452 60 60-512 512-238-238 60-60z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57862,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 32,
+				"id": 518,
+				"prevSize": 24,
+				"code": 61452,
+				"name": "check",
+				"ligatures": "check"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 12
+		},
+		{
+			"icon": {
+				"paths": [
+					"M426 726l384-384-60-62-324 324-152-152-60 60zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57985,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 74,
+				"id": 641,
+				"prevSize": 24,
+				"code": 61453,
+				"name": "check-circle",
+				"ligatures": "check-circle"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 13
+		},
+		{
+			"icon": {
+				"paths": [
+					"M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57865,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 35,
+				"id": 521,
+				"prevSize": 24,
+				"code": 61454,
+				"name": "close",
+				"ligatures": "close"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 14
+		},
+		{
+			"icon": {
+				"paths": [
+					"M726 666l-154-154 154-154-60-60-154 154-154-154-60 60 154 154-154 154 60 60 154-154 154 154zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconClear"
+				],
+				"defaultCode": 57861,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 165,
+				"id": 517,
+				"prevSize": 24,
+				"code": 61455,
+				"name": "close-circle",
+				"ligatures": "cancel"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 15
+		},
+		{
+			"icon": {
+				"paths": [
+					"M512 854q140 0 241-101t101-241-101-241-241-101-241 101-101 241 101 241 241 101zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125zM622 342l60 60-110 110 110 110-60 60-110-110-110 110-60-60 110-110-110-110 60-60 110 110z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconCancel"
+				],
+				"defaultCode": 58012,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 75,
+				"id": 668,
+				"prevSize": 24,
+				"code": 61456,
+				"name": "close-circle-o",
+				"ligatures": "cancel-outline"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 16
+		},
+		{
+			"icon": {
+				"paths": [
+					"M810 554h-256v256h-84v-256h-256v-84h256v-256h84v256h256v84z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57449,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 66,
+				"id": 105,
+				"prevSize": 24,
+				"code": 61457,
+				"name": "add",
+				"ligatures": "add"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 17
+		},
+		{
+			"icon": {
+				"paths": [
+					"M810 554h-596v-84h596v84z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57471,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 65,
+				"id": 127,
+				"prevSize": 24,
+				"code": 61458,
+				"name": "remove",
+				"ligatures": "remove"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 18
+		},
+		{
+			"icon": {
+				"paths": [
+					"M726 554v-84h-172v-172h-84v172h-172v84h172v172h84v-172h172zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57451,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 61,
+				"id": 107,
+				"prevSize": 24,
+				"code": 61459,
+				"name": "add-circle",
+				"ligatures": "add-circle"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 19
+		},
+		{
+			"icon": {
+				"paths": [
+					"M726 554v-84h-428v84h428zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57472,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 64,
+				"id": 128,
+				"prevSize": 24,
+				"code": 61460,
+				"name": "remove-circle",
+				"ligatures": "remove-circle"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 20
+		},
+		{
+			"icon": {
+				"paths": [
+					"M512 854q140 0 241-101t101-241-101-241-241-101-241 101-101 241 101 241 241 101zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125zM554 298v172h172v84h-172v172h-84v-172h-172v-84h172v-172h84z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57452,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 62,
+				"id": 108,
+				"prevSize": 24,
+				"code": 61461,
+				"name": "add-circle-o",
+				"ligatures": "add-circle-outline"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 21
+		},
+		{
+			"icon": {
+				"paths": [
+					"M512 854q140 0 241-101t101-241-101-241-241-101-241 101-101 241 101 241 241 101zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125zM298 470h428v84h-428v-84z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57473,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 63,
+				"id": 129,
+				"prevSize": 24,
+				"code": 61462,
+				"name": "remove-circle-o",
+				"ligatures": "remove-circle-outline"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 22
+		},
+		{
+			"icon": {
+				"paths": [
+					"M554 554v-256h-84v256h84zM554 726v-86h-84v86h84zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconError"
+				],
+				"defaultCode": 57344,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 149,
+				"id": 0,
+				"prevSize": 24,
+				"code": 61463,
+				"name": "error",
+				"ligatures": "error"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 23
+		},
+		{
+			"icon": {
+				"paths": [
+					"M512 854q140 0 241-101t101-241-101-241-241-101-241 101-101 241 101 241 241 101zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125zM470 298h84v256h-84v-256zM470 640h84v86h-84v-86z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57345,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 148,
+				"id": 1,
+				"prevSize": 24,
+				"code": 61464,
+				"name": "error-o",
+				"ligatures": "error-outline"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 24
+		},
+		{
+			"icon": {
+				"paths": [
+					"M554 598v-172h-84v172h84zM554 768v-86h-84v86h84zM42 896l470-810 470 810h-940z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57346,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 59,
+				"id": 2,
+				"prevSize": 24,
+				"code": 61465,
+				"name": "warning",
+				"ligatures": "warning"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 25
+		},
+		{
+			"icon": {
+				"paths": [
+					"M554 554v-256h-84v256h84zM512 738q22 0 39-17t17-39-17-38-39-16-39 16-17 38 17 39 39 17zM672 128l224 224v320l-224 224h-320l-224-224v-320l224-224h320z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57476,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 111,
+				"id": 132,
+				"prevSize": 24,
+				"code": 61466,
+				"name": "report",
+				"ligatures": "report"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 26
+		},
+		{
+			"icon": {
+				"paths": [
+					"M642 480q40-40 40-96 0-70-50-120t-120-50-120 50-50 120h84q0-34 26-60t60-26 60 26 26 60-26 60l-52 54q-50 54-50 120v22h84q0-66 50-120zM554 810v-84h-84v84h84zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 82,
+				"id": 667,
+				"prevSize": 24,
+				"code": 61467,
+				"name": "help",
+				"ligatures": "help"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 27
+		},
+		{
+			"icon": {
+				"paths": [
+					"M782 722q72-90 72-210 0-140-101-241t-241-101q-120 0-210 72zM512 854q120 0 210-72l-480-480q-72 90-72 210 0 140 101 241t241 101zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57880,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 42,
+				"id": 536,
+				"prevSize": 24,
+				"code": 61468,
+				"name": "no-symbol",
+				"ligatures": "no-symbol"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 28
+		},
+		{
+			"icon": {
+				"paths": [
+					"M512 768v-128l170 170-170 172v-128q-140 0-241-101t-101-241q0-100 54-182l62 62q-30 54-30 120 0 106 75 181t181 75zM512 170q140 0 241 101t101 241q0 100-54 182l-62-62q30-54 30-120 0-106-75-181t-181-75v128l-170-170 170-172v128z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57899,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 43,
+				"id": 555,
+				"prevSize": 24,
+				"code": 61469,
+				"name": "update",
+				"ligatures": "sync"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 29
+		},
+		{
+			"icon": {
+				"paths": [
+					"M810 810v-468h-596v468h596zM682 42h86v86h42q34 0 60 26t26 60v596q0 34-26 60t-60 26h-596q-36 0-61-26t-25-60v-596q0-34 25-60t61-26h42v-86h86v86h340v-86zM726 512v214h-214v-214h214z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57996,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 123,
+				"id": 652,
+				"prevSize": 24,
+				"code": 61470,
+				"name": "calendar",
+				"ligatures": "event"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 30
+		},
+		{
+			"icon": {
+				"paths": [
+					"M534 298v224l192 114-32 54-224-136v-256h64zM512 854q140 0 241-101t101-241-101-241-241-101-241 101-101 241 101 241 241 101zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57486,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 67,
+				"id": 142,
+				"prevSize": 24,
+				"code": 61471,
+				"name": "clock",
+				"ligatures": "clock"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 31
+		},
+		{
+			"icon": {
+				"paths": [
+					"M426 170l86 86h342q34 0 59 26t25 60v426q0 34-25 60t-59 26h-684q-34 0-59-26t-25-60v-512q0-34 25-60t59-26h256z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitFolderClosed",
+					"dijitIconFolderClosed"
+				],
+				"defaultCode": 57601,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 9,
+				"id": 257,
+				"prevSize": 24,
+				"code": 61472,
+				"name": "folder",
+				"ligatures": "folder"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 32
+		},
+		{
+			"icon": {
+				"paths": [
+					"M854 768v-426h-684v426h684zM854 256q34 0 59 26t25 60v426q0 34-25 60t-59 26h-684q-34 0-59-26t-25-60v-512q0-34 25-60t59-26h256l86 86h342z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitFolderOpened",
+					"dijitIconFolderOpen"
+				],
+				"defaultCode": 57602,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 10,
+				"id": 258,
+				"prevSize": 24,
+				"code": 61473,
+				"name": "folder-open",
+				"ligatures": "folder_open"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 33
+		},
+		{
+			"icon": {
+				"paths": [
+					"M884 300l-78 78-160-160 78-78q12-12 30-12t30 12l100 100q12 12 12 30t-12 30zM128 736l472-472 160 160-472 472h-160v-160z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconEdit"
+				],
+				"defaultCode": 57582,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 109,
+				"id": 238,
+				"prevSize": 24,
+				"code": 61474,
+				"name": "edit",
+				"ligatures": "edit"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 34
+		},
+		{
+			"icon": {
+				"paths": [
+					"M640 384v-170h-426v170h426zM512 810q52 0 90-38t38-90-38-90-90-38-90 38-38 90 38 90 90 38zM726 128l170 170v512q0 34-26 60t-60 26h-596q-36 0-61-26t-25-60v-596q0-34 25-60t61-26h512z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconSave",
+					"dijitEditorIconSave"
+				],
+				"defaultCode": 57477,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 16,
+				"id": 133,
+				"prevSize": 24,
+				"code": 61475,
+				"name": "save",
+				"ligatures": "save"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 35
+		},
+		{
+			"icon": {
+				"paths": [
+					"M768 128v170h-512v-170h512zM810 512q18 0 31-12t13-30-13-31-31-13-30 13-12 31 12 30 30 12zM682 810v-212h-340v212h340zM810 342q52 0 90 38t38 90v256h-170v170h-512v-170h-170v-256q0-52 38-90t90-38h596z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconPrint",
+					"dijitEditorIconPrint"
+				],
+				"defaultCode": 58049,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 21,
+				"id": 705,
+				"prevSize": 24,
+				"code": 61476,
+				"name": "print",
+				"ligatures": "print"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 36
+		},
+		{
+			"icon": {
+				"paths": [
+					"M810 170v86h-596v-86h148l44-42h212l44 42h148zM256 810v-512h512v512q0 34-26 60t-60 26h-340q-34 0-60-26t-26-60z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconDelete",
+					"dijitEditorIconDelete"
+				],
+				"defaultCode": 57991,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 91,
+				"id": 647,
+				"prevSize": 24,
+				"code": 61477,
+				"name": "delete",
+				"ligatures": "delete"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 37
+		},
+		{
+			"icon": {
+				"paths": [
+					"M554 384h236l-236-234v234zM256 86h342l256 256v512q0 34-26 59t-60 25h-512q-34 0-60-25t-26-59l2-684q0-34 25-59t59-25z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitLeaf"
+				],
+				"defaultCode": 57575,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 25,
+				"id": 231,
+				"prevSize": 24,
+				"code": 61478,
+				"name": "page",
+				"ligatures": "page-blank"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 38
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 160,
+				"id": 827,
+				"name": "page-o",
+				"prevSize": 24,
+				"code": 61479
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 39
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 161,
+				"id": 829,
+				"name": "page-add",
+				"prevSize": 24,
+				"code": 61480
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 40
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 162,
+				"id": 830,
+				"name": "page-remove",
+				"prevSize": 24,
+				"code": 61481
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 41
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 163,
+				"id": 828,
+				"name": "page-add-o",
+				"prevSize": 24,
+				"code": 61482
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 42
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 164,
+				"id": 831,
+				"name": "page-remove-o",
+				"prevSize": 24,
+				"code": 61483
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 43
+		},
+		{
+			"icon": {
+				"paths": [
+					"M554 384h236l-236-234v234zM682 598v-86h-340v86h340zM682 768v-86h-340v86h340zM598 86l256 256v512q0 34-26 59t-60 25h-512q-34 0-60-25t-26-59l2-684q0-34 25-59t59-25h342z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconFile"
+				],
+				"defaultCode": 57992,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 92,
+				"id": 648,
+				"prevSize": 24,
+				"code": 61484,
+				"name": "file",
+				"ligatures": "page"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 44
+		},
+		{
+			"icon": {
+				"paths": [
+					"M854 342v-86l-342 214-342-214v86l342 212zM854 170q34 0 59 26t25 60v512q0 34-25 60t-59 26h-684q-34 0-59-26t-25-60v-512q0-34 25-60t59-26h684z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconMail"
+				],
+				"defaultCode": 57836,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 29,
+				"id": 492,
+				"prevSize": 24,
+				"code": 61485,
+				"name": "mail",
+				"ligatures": "mail"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 45
+		},
+		{
+			"icon": {
+				"paths": [
+					"M170 470v84h86v-84h-86zM86 598v-172h852v172h-852zM256 298v-84h-86v84h86zM86 170h852v172h-852v-172zM170 726v84h86v-84h-86zM86 854v-172h852v172h-852z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconDatabase"
+				],
+				"defaultCode": 57532,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 105,
+				"id": 188,
+				"prevSize": 24,
+				"code": 61486,
+				"name": "storage",
+				"ligatures": "storage"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 46
+		},
+		{
+			"icon": {
+				"paths": [
+					"M512 662q62 0 106-44t44-106-44-106-106-44-106 44-44 106 44 106 106 44zM830 554l90 70q14 10 4 28l-86 148q-8 14-26 8l-106-42q-42 30-72 42l-16 112q-4 18-20 18h-172q-16 0-20-18l-16-112q-38-16-72-42l-106 42q-18 6-26-8l-86-148q-10-18 4-28l90-70q-2-14-2-42t2-42l-90-70q-14-10-4-28l86-148q8-14 26-8l106 42q42-30 72-42l16-112q4-18 20-18h172q16 0 20 18l16 112q38 16 72 42l106-42q18-6 26 8l86 148q10 18-4 28l-90 70q2 14 2 42t-2 42z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconConfigure"
+				],
+				"defaultCode": 58059,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 83,
+				"id": 715,
+				"prevSize": 24,
+				"code": 61487,
+				"name": "settings",
+				"ligatures": "settings"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 47
+		},
+		{
+			"icon": {
+				"paths": [
+					"M406 598q80 0 136-56t56-136-56-136-136-56-136 56-56 136 56 136 136 56zM662 598l212 212-64 64-212-212v-34l-12-12q-76 66-180 66-116 0-197-80t-81-196 81-197 197-81 196 81 80 197q0 104-66 180l12 12h34z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconSearch"
+				],
+				"defaultCode": 58058,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 87,
+				"id": 714,
+				"prevSize": 24,
+				"code": 61488,
+				"name": "search",
+				"ligatures": "search"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 48
+		},
+		{
+			"icon": {
+				"paths": [
+					"M726 128q34 0 59 26t25 60v682l-298-128-298 128v-682q0-34 25-60t59-26h428z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconBookmark"
+				],
+				"defaultCode": 58104,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 55,
+				"id": 760,
+				"prevSize": 24,
+				"code": 61489,
+				"name": "bookmark",
+				"ligatures": "bookmark"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 49
+		},
+		{
+			"icon": {
+				"paths": [
+					"M128 256h768v86h-768v-86zM128 554v-84h768v84h-768zM128 768v-86h768v86h-768z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57870,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 76,
+				"id": 526,
+				"prevSize": 24,
+				"code": 61490,
+				"name": "menu",
+				"ligatures": "menu"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 50
+		},
+		{
+			"icon": {
+				"paths": [
+					"M854 768v-384h-172v384h172zM640 554v-170h-470v170h470zM640 768v-170h-470v170h470zM854 170q34 0 59 26t25 60v512q0 34-25 60t-59 26h-684q-34 0-59-26t-25-60v-512q0-34 25-60t59-26h684z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconApplication"
+				],
+				"defaultCode": 57396,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 151,
+				"id": 52,
+				"prevSize": 24,
+				"code": 61491,
+				"name": "application",
+				"ligatures": "application"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 51
+		},
+		{
+			"icon": {
+				"paths": [
+					"M298 598q34 0 60-26t26-60-26-60-60-26-59 26-25 60 25 60 59 26zM540 426h442v172h-86v170h-170v-170h-186q-26 76-92 123t-150 47q-106 0-181-75t-75-181 75-181 181-75q84 0 150 47t92 123z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconKey"
+				],
+				"defaultCode": 57443,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 60,
+				"id": 99,
+				"prevSize": 24,
+				"code": 61492,
+				"name": "key",
+				"ligatures": "key"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 52
+		},
+		{
+			"icon": {
+				"paths": [
+					"M170 214h684v84h-684v-84zM170 470v-86h684v86h-684zM170 810v-84h684v84h-684zM170 640v-86h684v86h-684z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconTable",
+					"dijitEditorIconInsertTable"
+				],
+				"defaultCode": 58112,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 79,
+				"id": 768,
+				"prevSize": 24,
+				"code": 61493,
+				"name": "table",
+				"ligatures": "table"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 53
+		},
+		{
+			"icon": {
+				"paths": [
+					"M768 214h170v170h-170v-170zM768 810v-170h170v170h-170zM554 810v-170h172v170h-172zM342 810v-170h170v170h-170zM128 810v-170h170v170h-170zM768 598v-172h170v172h-170zM554 214h172v170h-172v-170zM342 384v-170h170v170h-170zM554 598v-172h172v172h-172zM342 598v-172h170v172h-170zM128 598v-172h170v172h-170zM128 384v-170h170v170h-170z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57787,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 94,
+				"id": 443,
+				"prevSize": 24,
+				"code": 61494,
+				"name": "grid",
+				"ligatures": "grid"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 54
+		},
+		{
+			"icon": {
+				"paths": [
+					"M682 384h172v470h-172v-470zM170 854v-342h172v342h-172zM426 854v-684h172v684h-172z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconChart"
+				],
+				"defaultCode": 57351,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 137,
+				"id": 7,
+				"prevSize": 24,
+				"code": 61495,
+				"name": "chart",
+				"ligatures": "bar-chart"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 55
+		},
+		{
+			"icon": {
+				"paths": [
+					"M256 554v-84h512v84h-512zM128 256h768v86h-768v-86zM426 768v-86h172v86h-172z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconFilter"
+				],
+				"defaultCode": 57462,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 135,
+				"id": 118,
+				"prevSize": 24,
+				"code": 61496,
+				"name": "filter",
+				"ligatures": "filter"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 56
+		},
+		{
+			"icon": {
+				"paths": [
+					"M768 170v128h-298l212 214-212 214h298v128h-512v-86l278-256-278-256v-86h512z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconFunction"
+				],
+				"defaultCode": 57572,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 24,
+				"id": 228,
+				"prevSize": 24,
+				"code": 61497,
+				"name": "function",
+				"ligatures": "functions"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 57
+		},
+		{
+			"icon": {
+				"paths": [
+					"M512 598q108 0 225 47t117 123v86h-684v-86q0-76 117-123t225-47zM512 512q-70 0-120-50t-50-120 50-121 120-51 120 51 50 121-50 120-120 50z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57939,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 45,
+				"id": 595,
+				"prevSize": 24,
+				"code": 61498,
+				"name": "user",
+				"ligatures": "user"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 58
+		},
+		{
+			"icon": {
+				"paths": [
+					"M682 554q56 0 122 16t122 52 56 82v106h-256v-106q0-88-84-148 14-2 40-2zM342 554q56 0 122 16t121 52 55 82v106h-598v-106q0-46 56-82t122-52 122-16zM342 470q-52 0-90-38t-38-90 38-90 90-38 89 38 37 90-37 90-89 38zM682 470q-52 0-90-38t-38-90 38-90 90-38 90 38 38 90-38 90-90 38z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconUsers"
+				],
+				"defaultCode": 57937,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 46,
+				"id": 593,
+				"prevSize": 24,
+				"code": 61499,
+				"name": "users",
+				"ligatures": "users"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 59
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconConnector"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 11,
+				"id": 810,
+				"name": "connector",
+				"prevSize": 24,
+				"code": 61500
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 60
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconDocuments"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 10,
+				"id": 809,
+				"name": "documents",
+				"prevSize": 24,
+				"code": 61501
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 61
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconEditProperty"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 8,
+				"id": 808,
+				"name": "edit-property",
+				"prevSize": 24,
+				"code": 61502
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 62
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconTask"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 5,
+				"id": 807,
+				"name": "task",
+				"prevSize": 24,
+				"code": 61503
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 63
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconNewTask"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 6,
+				"id": 806,
+				"name": "task-new",
+				"prevSize": 24,
+				"code": 61504
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 64
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconEditTask"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 7,
+				"id": 805,
+				"name": "task-edit",
+				"prevSize": 24,
+				"code": 61505
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 65
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconSample"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 4,
+				"id": 804,
+				"name": "sample",
+				"prevSize": 24,
+				"code": 61506
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 66
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconPackage"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 3,
+				"id": 803,
+				"name": "package",
+				"prevSize": 24,
+				"code": 61507
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 67
+		},
+		{
+			"icon": {
+				"paths": [
+					"M534 342q146 0 262 86t162 222l-100 32q-34-104-123-169t-201-65q-124 0-220 80l156 154h-384v-384l152 154q126-110 296-110z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconUndo"
+				],
+				"defaultCode": 57482,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 2,
+				"id": 138,
+				"prevSize": 24,
+				"code": 61508,
+				"name": "undo",
+				"ligatures": "undo"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 68
+		},
+		{
+			"icon": {
+				"paths": [
+					"M786 452l152-154v384h-384l156-154q-96-80-220-80-112 0-201 65t-123 169l-100-32q44-136 161-222t263-86q170 0 296 110z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconRedo"
+				],
+				"defaultCode": 57470,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 1,
+				"id": 126,
+				"prevSize": 24,
+				"code": 61509,
+				"name": "redo",
+				"ligatures": "redo"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 69
+		},
+		{
+			"icon": {
+				"paths": [
+					"M810 896v-598h-468v598h468zM810 214q34 0 60 25t26 59v598q0 34-26 60t-60 26h-468q-34 0-60-26t-26-60v-598q0-34 26-59t60-25h468zM682 42v86h-512v598h-84v-598q0-34 25-60t59-26h512z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconCopy",
+					"dijitEditorIconCopy"
+				],
+				"defaultCode": 57457,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 13,
+				"id": 113,
+				"prevSize": 24,
+				"code": 61510,
+				"name": "copy",
+				"ligatures": "copy"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 70
+		},
+		{
+			"icon": {
+				"paths": [
+					"M810 128h128v42l-298 300-86-86zM512 534q22 0 22-22t-22-22-22 22 22 22zM256 854q34 0 60-25t26-61-26-61-60-25-60 25-26 61 26 61 60 25zM256 342q34 0 60-25t26-61-26-61-60-25-60 25-26 61 26 61 60 25zM412 326l526 528v42h-128l-298-298-100 100q14 30 14 70 0 70-50 120t-120 50-120-50-50-120 50-120 120-50q40 0 70 14l100-100-100-100q-30 14-70 14-70 0-120-50t-50-120 50-120 120-50 120 50 50 120q0 40-14 70z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitIconCut",
+					"dijitEditorIconCut"
+				],
+				"defaultCode": 57458,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 14,
+				"id": 114,
+				"prevSize": 24,
+				"code": 61511,
+				"name": "cut",
+				"ligatures": "cut"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 71
+		},
+		{
+			"icon": {
+				"paths": [
+					"M810 854v-684h-84v128h-428v-128h-84v684h596zM512 86q-18 0-30 12t-12 30 12 30 30 12 30-12 12-30-12-30-30-12zM810 86q34 0 60 25t26 59v684q0 34-26 59t-60 25h-596q-34 0-60-25t-26-59v-684q0-34 26-59t60-25h178q14-38 46-62t74-24 74 24 46 62h178z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconPaste"
+				],
+				"defaultCode": 57459,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 15,
+				"id": 115,
+				"prevSize": 24,
+				"code": 61512,
+				"name": "paste",
+				"ligatures": "paste"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 72
+		},
+		{
+			"icon": {
+				"paths": [
+					"M576 662q28 0 46-19t18-45-18-45-46-19h-150v128h150zM426 278v128h128q26 0 45-19t19-45-19-45-45-19h-128zM666 460q92 42 92 146 0 68-45 115t-113 47h-302v-598h268q72 0 121 50t49 122-70 118z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconBold"
+				],
+				"defaultCode": 57554,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 12,
+				"id": 210,
+				"prevSize": 24,
+				"code": 61513,
+				"name": "bold",
+				"ligatures": "format-bold"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 73
+		},
+		{
+			"icon": {
+				"paths": [
+					"M426 170h342v128h-120l-144 342h94v128h-342v-128h120l144-342h-94v-128z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconItalic"
+				],
+				"defaultCode": 57561,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 10,
+				"id": 217,
+				"prevSize": 24,
+				"code": 61514,
+				"name": "italic",
+				"ligatures": "format-italic"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 74
+		},
+		{
+			"icon": {
+				"paths": [
+					"M214 810h596v86h-596v-86zM512 726q-106 0-181-75t-75-181v-342h106v342q0 62 44 105t106 43 106-43 44-105v-342h106v342q0 106-75 181t-181 75z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconUnderline"
+				],
+				"defaultCode": 57571,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 11,
+				"id": 227,
+				"prevSize": 24,
+				"code": 61515,
+				"name": "underline",
+				"ligatures": "format-underlined"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 75
+		},
+		{
+			"icon": {
+				"paths": [
+					"M128 598v-86h768v86h-768zM214 170h596v128h-212v128h-172v-128h-212v-128zM426 810v-128h172v128h-172z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconStrikethrough"
+				],
+				"defaultCode": 57568,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 9,
+				"id": 224,
+				"prevSize": 24,
+				"code": 61516,
+				"name": "strikethrough",
+				"ligatures": "format-strikethrough"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 76
+		},
+		{
+			"icon": {
+				"paths": [
+					"M256 214h598v128h-248l-68 160-90-88 30-72h-102l-120-120v-8zM140 214l12 10 616 618-54 54-242-242-66 156h-128l104-246-296-296z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconRemoveFormat"
+				],
+				"defaultCode": 57555,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 28,
+				"id": 211,
+				"prevSize": 24,
+				"code": 61517,
+				"name": "clear-format",
+				"ligatures": "format-clear"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 77
+		},
+		{
+			"icon": {
+				"paths": [
+					"M598 726l84-172h-128v-256h256v256l-84 172h-128zM256 726l86-172h-128v-256h256v256l-86 172h-128z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57566,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 142,
+				"id": 222,
+				"prevSize": 24,
+				"code": 61518,
+				"name": "quote",
+				"ligatures": "format-quote"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 78
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconSuperscript"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 157,
+				"id": 826,
+				"name": "superscript",
+				"prevSize": 24,
+				"code": 61519
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 79
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconSubscript"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 158,
+				"id": 825,
+				"name": "subscript",
+				"prevSize": 24,
+				"code": 61520
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 80
+		},
+		{
+			"icon": {
+				"paths": [
+					"M410 512h204l-102-270zM470 128h84l234 598h-96l-46-128h-268l-48 128h-96zM0 854h1024v170h-1024v-170z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconForeColor"
+				],
+				"defaultCode": 57558,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 26,
+				"id": 214,
+				"prevSize": 24,
+				"code": 61521,
+				"name": "color-text",
+				"ligatures": "format-color-text"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 81
+		},
+		{
+			"icon": {
+				"paths": [
+					"M0 854h1024v170h-1024v-170zM810 490q86 94 86 150 0 34-26 60t-60 26-59-26-25-60q0-24 21-62t41-62zM222 426h410l-206-204zM706 382q20 20 20 46t-20 44l-234 234q-20 20-46 20-24 0-44-20l-236-234q-20-18-20-44t20-46l220-220-102-102 62-60z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconBackColor"
+				],
+				"defaultCode": 57556,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 27,
+				"id": 212,
+				"prevSize": 24,
+				"code": 61522,
+				"name": "color-fill",
+				"ligatures": "format-color-fill"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 82
+		},
+		{
+			"icon": {
+				"paths": [
+					"M680 790h90l-218-556h-80l-218 556h90l48-128h240zM854 86q34 0 59 25t25 59v684q0 34-25 59t-59 25h-684q-34 0-59-25t-25-59v-684q0-34 25-59t59-25h684zM424 576l88-236 88 236h-176z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconHiliteColor"
+				],
+				"defaultCode": 57483,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 11,
+				"id": 139,
+				"prevSize": 24,
+				"code": 61523,
+				"name": "color-highlight",
+				"ligatures": "font_download"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 83
+		},
+		{
+			"icon": {
+				"paths": [
+					"M128 512v-128h384v128h-128v298h-128v-298h-128zM384 170h554v128h-212v512h-128v-512h-214v-128z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57567,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 141,
+				"id": 223,
+				"prevSize": 24,
+				"code": 61524,
+				"name": "font-size",
+				"ligatures": "format-size"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 84
+		},
+		{
+			"icon": {
+				"paths": [
+					"M128 128h768v86h-768v-86zM298 298h428v86h-428v-86zM128 554v-84h768v84h-768zM128 896v-86h768v86h-768zM298 640h428v86h-428v-86z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconJustifyCenter"
+				],
+				"defaultCode": 57550,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 3,
+				"id": 206,
+				"prevSize": 24,
+				"code": 61525,
+				"name": "align-center",
+				"ligatures": "format-align-center"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 85
+		},
+		{
+			"icon": {
+				"paths": [
+					"M128 128h768v86h-768v-86zM128 384v-86h768v86h-768zM128 554v-84h768v84h-768zM128 726v-86h768v86h-768zM128 896v-86h768v86h-768z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconJustifyFull"
+				],
+				"defaultCode": 57551,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 4,
+				"id": 207,
+				"prevSize": 24,
+				"code": 61526,
+				"name": "align-justify",
+				"ligatures": "format-align-justify"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 86
+		},
+		{
+			"icon": {
+				"paths": [
+					"M128 128h768v86h-768v-86zM128 896v-86h768v86h-768zM128 554v-84h768v84h-768zM640 298v86h-512v-86h512zM640 640v86h-512v-86h512z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconJustifyLeft"
+				],
+				"defaultCode": 57552,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 5,
+				"id": 208,
+				"prevSize": 24,
+				"code": 61527,
+				"name": "align-left",
+				"ligatures": "format-align-left"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 87
+		},
+		{
+			"icon": {
+				"paths": [
+					"M128 128h768v86h-768v-86zM384 384v-86h512v86h-512zM128 554v-84h768v84h-768zM384 726v-86h512v86h-512zM128 896v-86h768v86h-768z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconJustifyRight"
+				],
+				"defaultCode": 57553,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 6,
+				"id": 209,
+				"prevSize": 24,
+				"code": 61528,
+				"name": "align-right",
+				"ligatures": "format-align-right"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 88
+		},
+		{
+			"icon": {
+				"paths": [
+					"M470 554v-84h426v84h-426zM470 384v-86h426v86h-426zM128 128h768v86h-768v-86zM470 726v-86h426v86h-426zM128 342l170 170-170 170v-340zM128 896v-86h768v86h-768z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconIndent"
+				],
+				"defaultCode": 57560,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 8,
+				"id": 216,
+				"prevSize": 24,
+				"code": 61529,
+				"name": "indent",
+				"ligatures": "format-indent-increase"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 89
+		},
+		{
+			"icon": {
+				"paths": [
+					"M470 554v-84h426v84h-426zM470 384v-86h426v86h-426zM128 128h768v86h-768v-86zM128 896v-86h768v86h-768zM128 512l170-170v340zM470 726v-86h426v86h-426z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconOutdent"
+				],
+				"defaultCode": 57559,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 7,
+				"id": 215,
+				"prevSize": 24,
+				"code": 61530,
+				"name": "outdent",
+				"ligatures": "format-indent-decrease"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 90
+		},
+		{
+			"icon": {
+				"paths": [
+					"M128 554v-84h512v84h-512zM128 256h768v86h-768v-86zM128 768v-86h256v86h-256z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57480,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 134,
+				"id": 136,
+				"prevSize": 24,
+				"code": 61531,
+				"name": "sort",
+				"ligatures": "sort"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 91
+		},
+		{
+			"icon": {
+				"paths": [
+					"M768 384h86v256h-684v-256h86v170h512v-170z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconSpace"
+				],
+				"defaultCode": 57584,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 71,
+				"id": 240,
+				"prevSize": 24,
+				"code": 61532,
+				"name": "keyboard-space",
+				"ligatures": "keyboard-space"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 92
+		},
+		{
+			"icon": {
+				"paths": [
+					"M854 256h84v512h-84v-512zM494 316l60-60 256 256-256 256-60-60 154-154h-606v-84h606z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconTabIndent"
+				],
+				"defaultCode": 57623,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 132,
+				"id": 279,
+				"prevSize": 24,
+				"code": 61533,
+				"name": "keyboard-tab",
+				"ligatures": "keyboard-tab"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 93
+		},
+		{
+			"icon": {
+				"paths": [
+					"M298 214h598v84h-598v-84zM298 554v-84h598v84h-598zM298 810v-84h598v84h-598zM170 712q24 0 41 16t17 40-17 40-41 16-40-16-16-40 16-40 40-16zM170 192q26 0 45 18t19 46-19 46-45 18-45-18-19-46 19-46 45-18zM170 448q26 0 45 18t19 46-19 46-45 18-45-18-19-46 19-46 45-18z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconInsertUnorderedList"
+				],
+				"defaultCode": 57563,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 18,
+				"id": 219,
+				"prevSize": 24,
+				"code": 61534,
+				"name": "list-bullet",
+				"ligatures": "format-list-bulleted"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 94
+		},
+		{
+			"icon": {
+				"paths": [
+					"M298 554v-84h598v84h-598zM298 810v-84h598v84h-598zM298 214h598v84h-598v-84zM86 470v-44h128v40l-78 88h78v44h-128v-40l76-88h-76zM128 342v-128h-42v-44h84v172h-42zM86 726v-44h128v172h-128v-44h84v-20h-42v-44h42v-20h-84z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconInsertOrderedList"
+				],
+				"defaultCode": 57564,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 19,
+				"id": 220,
+				"prevSize": 24,
+				"code": 61535,
+				"name": "list-number",
+				"ligatures": "format-list-numbered"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 95
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconListBulletIndent"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 13,
+				"id": 814,
+				"name": "list-bullet-indent",
+				"prevSize": 24,
+				"code": 61536
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 96
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconListBulletOutdent"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 14,
+				"id": 815,
+				"name": "list-bullet-outdent",
+				"prevSize": 24,
+				"code": 61537
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 97
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconListNumIndent"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 15,
+				"id": 816,
+				"name": "list-number-indent",
+				"prevSize": 24,
+				"code": 61538
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 98
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconListNumOutdent"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 16,
+				"id": 817,
+				"name": "list-number-outdent",
+				"prevSize": 24,
+				"code": 61539
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 99
+		},
+		{
+			"icon": {
+				"paths": [
+					"M622 708l198-196-198-196 60-60 256 256-256 256zM402 708l-60 60-256-256 256-256 60 60-198 196z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconViewSource"
+				],
+				"defaultCode": 57988,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 51,
+				"id": 644,
+				"prevSize": 24,
+				"code": 61540,
+				"name": "code",
+				"ligatures": "code"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 100
+		},
+		{
+			"icon": {
+				"paths": [
+					"M726 298q88 0 150 63t62 151-62 151-150 63h-172v-82h172q54 0 93-39t39-93-39-93-93-39h-172v-82h172zM342 554v-84h340v84h-340zM166 512q0 54 39 93t93 39h172v82h-172q-88 0-150-63t-62-151 62-151 150-63h172v82h-172q-54 0-93 39t-39 93z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconCreateLink"
+				],
+				"defaultCode": 57578,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 17,
+				"id": 234,
+				"prevSize": 24,
+				"code": 61541,
+				"name": "link",
+				"ligatures": "link"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 101
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconUnlink"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 21,
+				"id": 822,
+				"name": "unlink",
+				"prevSize": 24,
+				"code": 61542
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 102
+		},
+		{
+			"icon": {
+				"paths": [
+					"M598 214h212v212h-84v-128h-128v-84zM726 726v-128h84v212h-212v-84h128zM214 426v-212h212v84h-128v128h-84zM298 598v128h128v84h-212v-212h84z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconFullScreen"
+				],
+				"defaultCode": 57868,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 38,
+				"id": 524,
+				"prevSize": 24,
+				"code": 61543,
+				"name": "fullscreen",
+				"ligatures": "fullscreen"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 103
+		},
+		{
+			"icon": {
+				"paths": [
+					"M682 342h128v84h-212v-212h84v128zM598 810v-212h212v84h-128v128h-84zM342 342v-128h84v212h-212v-84h128zM214 682v-84h212v212h-84v-128h-128z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					""
+				],
+				"defaultCode": 57869,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 39,
+				"id": 525,
+				"prevSize": 24,
+				"code": 61544,
+				"name": "fullscreen-exit",
+				"ligatures": "fullscreen-exit"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 104
+		},
+		{
+			"icon": {
+				"paths": [
+					"M362 576l-148 192h596l-192-256-148 192zM896 810q0 34-26 60t-60 26h-596q-34 0-60-26t-26-60v-596q0-34 26-60t60-26h596q34 0 60 26t26 60v596z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconInsertImage"
+				],
+				"defaultCode": 57579,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 8,
+				"id": 235,
+				"prevSize": 24,
+				"code": 61545,
+				"name": "image",
+				"ligatures": "insert_photo"
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 105
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconNewPage"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 20,
+				"id": 821,
+				"name": "page-new",
+				"prevSize": 24,
+				"code": 61546
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 106
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconToggleDir"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 17,
+				"id": 820,
+				"name": "toggle-dir",
+				"prevSize": 24,
+				"code": 61547
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 107
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconLeftToRight"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 18,
+				"id": 819,
+				"name": "left-to-right",
+				"prevSize": 24,
+				"code": 61548
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 108
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconRightToLeft"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 19,
+				"id": 818,
+				"name": "right-to-left",
+				"prevSize": 24,
+				"code": 61549
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 109
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconSelectAll"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 159,
+				"id": 824,
+				"name": "select-all",
+				"prevSize": 24,
+				"code": 61550
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 110
+		},
+		{
+			"icon": {
+				"paths": [
+					"M382 544q-40 40-40 96 0 70 50 120t120 50 120-50 50-120h-84q0 34-26 60t-60 26-60-26-26-60 26-60l52-54q50-54 50-120v-22h-84q0 66-50 120zM470 214v84h84v-84h-84zM512 938q-176 0-301-125t-125-301 125-301 301-125 301 125 125 301-125 301-301 125z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"dijitEditorIconWikiword"
+				],
+				"defaultCode": 58011,
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 22,
+				"id": 823,
+				"name": "wikiword",
+				"prevSize": 24,
+				"code": 61551
+			},
+			"setIdx": 0,
+			"setId": 0,
+			"iconIdx": 111
+		}
+	],
+	"height": 1024,
+	"metadata": {
+		"name": "flat-icon"
+	},
+	"preferences": {
+		"showGlyphs": true,
+		"showQuickUse": true,
+		"showQuickUse2": true,
+		"showSVGs": true,
+		"fontPref": {
+			"prefix": "flat-",
+			"metadata": {
+				"fontFamily": "flat-icon",
+				"majorVersion": 1,
+				"minorVersion": 0
+			},
+			"metrics": {
+				"emSize": 1024,
+				"baseline": 6.25,
+				"whitespace": 50
+			},
+			"embed": false,
+			"showVersion": false,
+			"showMetadata": false,
+			"showMetrics": false,
+			"showSelector": false,
+			"ie7": false,
+			"includeMetadata": false,
+			"cssVars": false,
+			"cssVarsFormat": "stylus",
+			"resetPoint": 61440
+		},
+		"imagePref": {
+			"prefix": "icon-",
+			"png": true,
+			"useClassSelector": true,
+			"color": 4473924,
+			"bgColor": 16777215
+		},
+		"historySize": 100,
+		"showCodes": true,
+		"gridSize": 16,
+		"showGrid": true,
+		"showLiga": false
+	}
+}
\ No newline at end of file
diff --git a/lib/flat/mixins.styl b/lib/flat/mixins.styl
new file mode 100755
index 000000000..77d87b792
--- /dev/null
+++ b/lib/flat/mixins.styl
@@ -0,0 +1,238 @@
+/*
+ * Includes icon and alternate color mixin functions.
+*/
+
+/* helpers */
+// to calculate when the value is an even number or not
+isEven($value) {
+	if ($value % 2 == 0) {
+ 		true;
+	} else { 
+ 		false;
+	}
+}
+
+// to take half of the given value
+half($value) {
+	$value / 2;
+}
+
+/* icons */
+// line-height and font-size can be overridden after calling _icon-core-style()
+_icon-core-style() {
+	font-family: $icon-font-family;
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+	font-size: $icon-size;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+/* Button */
+_button-hover(color) {
+	background: darken(color, 5%);
+	border-color: darken(color, 15%);
+}
+
+_button-active(color) {
+	background: darken(color, 12%);
+	border-color: darken(color, 30%);
+}
+
+_button-disabled(color) {
+	background: lighten(color, 35%);
+	border-color: lighten(color, 22%)
+	color: darken($button-alternative-text-color, 5%);
+}
+
+// common button style properties
+button-style() {
+	border-style: solid;
+	border-width: 1px;
+	border-color: $border-color;
+	padding: $padding;
+	border-radius: $border-radius;
+	line-height: $line-height;
+	cursor: pointer;
+	transition: all 0.05s linear;
+	background: $theme-base-color;
+}
+
+button-hover-style() {
+	transition: all 0.1s;
+	_button-hover($theme-base-color);
+}
+
+button-active-style() {
+	transition: none;
+	outline: none;
+	box-shadow: $shadow-inset;
+	_button-active($theme-base-color);
+}
+
+button-disabled-style() {
+	cursor: default;
+	color: $button-disabled-color;
+	background-color: $button-disabled-background-color;
+	border-color: $button-disabled-border-color;
+}
+
+// alternative colors
+create-alternative-buttons(colors) {
+	colors = arguments if length(arguments) >= 1;
+	for class in colors {
+		.dijitButton.{class} .dijitButtonNode,
+		.dijitDropDownButton.{class} .dijitButtonNode,
+		.dijitComboButton.{class} .dijitButtonNode,
+		.dijitToggleButton.{class} .dijitButtonNode,
+		.dijitComboBox.{class} .dijitButtonNode,
+		.dijitSelect.{class} .dijitButtonContents, 
+		.dijitSelect.{class} .dijitButtonNode,
+		.dijitSpinner.{class} .dijitArrowButton {
+			background: colors[class];
+			color: $button-alternative-text-color;
+			border-color: darken(colors[class], 18.5%);
+		}
+		// combo button border
+		.dijitComboButton.{class} .dijitStretch {
+			border-right-color: darken(colors[class], 18.5%);
+		}
+		.dijitComboButtonRtl.{class} .dijitStretch {
+			border-left-color: darken(colors[class], 18.5%);;
+		}
+	}
+}
+
+create-alternative-buttons-hover(colors) {
+	colors = arguments if length(arguments) >= 1;
+	for class in colors {
+		.dijitButtonHover.{class} .dijitButtonNode,
+		.dijitDropDownButtonHover.{class} .dijitButtonNode,
+		.dijitComboButton.{class} .dijitButtonNodeHover,
+		.dijitComboButton.{class} .dijitDownArrowButtonHover,
+		.dijitToggleButtonHover.{class} .dijitButtonNode,
+		.dijitComboBoxHover.{class} .dijitButtonNode,
+		.dijitSelectHover.{class} .dijitButtonContents, 
+		.dijitSelectHover.{class} .dijitButtonNode,
+		.dijitSelect.dijitSelectOpened.{class} .dijitButtonContents, 
+		.dijitSelect.dijitSelectOpened.{class} .dijitArrowButton,
+		.dijitSpinner.{class} .dijitUpArrowButtonHover, 
+		.dijitSpinner.{class} .dijitDownArrowButtonHover {
+			_button-hover(colors[class]);
+		}
+	}
+}
+
+create-alternative-buttons-active(colors) {
+	colors = arguments if length(arguments) >= 1;
+	for class in colors {
+		.dijitButtonActive.{class} .dijitButtonNode,
+		.dijitDropDownButtonActive.{class} .dijitButtonNode,
+		.dijitComboButton.{class} .dijitButtonNodeActive,
+		.dijitToggleButtonActive.{class} .dijitButtonNode,
+		.dijitComboBoxActive.{class} .dijitButtonNode,
+		.dijitSelectActive.{class} .dijitButtonContents, .dijitSelectActive.{class} .dijitArrowButton,
+		.dijitSelect.dijitSelectOpened.{class} .dijitButtonContents, .dijitSelect.dijitSelectOpened.{class} .dijitArrowButton ,
+		.dijitComboBox.{class} .dijitButtonNode.dijitHasDropDownOpen,
+		.dijitSpinner.{class} .dijitUpArrowButtonActive, .dijitSpinner.{class} .dijitDownArrowButtonActive {
+			_button-active(colors[class]);
+		}
+	}
+}
+
+create-alternative-buttons-disabled(colors) {
+	colors = arguments if length(arguments) >= 1;
+	for class in colors {
+		.dijitButtonDisabled.{class},
+		.dijitDropDownButtonDisabled.{class},
+		.dijitComboButtonDisabled.{class},
+		.dijitToggleButtonDisabled.{class} { 
+			.dijitButtonNode {
+				_button-disabled(colors[class]);
+			}
+		}
+		// combo button border
+		.dijitComboButtonDisabled.{class} .dijitStretch {
+			border-right-color: lighten(colors[class], 22%);
+		}
+		.dijitComboButtonRtlDisabled.{class} .dijitStretch {
+			border-left-color: lighten(colors[class], 22%);
+		}
+		// combo box
+		.dijitComboBoxDisabled.{class} .dijitButtonNode {
+			border-left-color: lighten(colors[class], 22%);
+		}
+		.dijitComboBoxRtlDisabled.{class} .dijitButtonNode {
+			border-right-color: lighten(colors[class], 22%);
+		}
+		// time textbox
+		.dijitTimeTextBoxDisabled.{class} .dijitButtonNode {
+			border-left-color: lighten(colors[class], 22%);
+		}
+		.dijitTimeTextBoxRtlDisabled.{class} .dijitButtonNode {
+			border-right-color: lighten(colors[class], 22%);
+		}
+		// date textbox
+		.dijitDateTextBoxDisabled.{class} .dijitButtonNode {
+			border-left-color: lighten(colors[class], 22%);
+		}
+		.dijitDateTextBoxRtlDisabled.{class} .dijitButtonNode {
+			border-right-color: lighten(colors[class], 22%);
+		}
+	}
+}
+
+/* TextBox */
+// alternative colors (Textboxes in Select, ComboBox, NumberSpinner, TimeTextBox and DateTextBox)
+create-alternative-textboxes(colors) {
+	colors = arguments if length(arguments) >= 1;
+	for class in colors {
+		.dijitSelect.{class},
+		.dijitComboBox.{class},
+		.dijitSpinner.{class} {
+			border-color: colors[class];
+		}
+	}
+}
+
+create-alternative-textboxes-disabled(colors) {
+	colors = arguments if length(arguments) >= 1;
+	for class in colors {
+		.dijitComboBoxDisabled.{class},
+		.dijitSpinnerDisabled.{class} {
+			background: $disabled-background-color;
+			color: $disabled-color;
+			border: lighten(colors[class], 35%);
+		}
+		.dijitComboBoxDisabled.{class} .dijitButtonNode,
+		.dijitSpinnerDisabled.{class} .dijitButtonNode {
+			background: lighten(colors[class], 35%);
+			color: darken($button-alternative-text-color, 5%);
+		}
+		// number spinner border
+		.dijitSpinnerDisabled.{class} .dijitSpinnerButtonContainer {
+			border-left-color: lighten(colors[class], 35%);
+		}
+		.dijitSpinnerRtlDisabled.{class} .dijitSpinnerButtonContainer {
+			border-right-color: lighten(colors[class], 35%);;
+		}
+		// select
+		.dijitSelectDisabled.{class} {
+			border-color: lighten(colors[class], 35%);
+		}
+		.dijitSelectDisabled.{class} .dijitStretch,
+		.dijitSelectDisabled.{class} .dijitButtonNode {
+			background: lighten(colors[class], 35%);
+			color: darken($button-alternative-text-color, 5%);
+		}
+	}
+}
+
+/* ProgressBar alternate colors */
+_progress-bar-color-properties(color) {
+	background-color: color;
+}
\ No newline at end of file
diff --git a/lib/flat/tests/flat.html b/lib/flat/tests/flat.html
new file mode 100644
index 000000000..d30967db7
--- /dev/null
+++ b/lib/flat/tests/flat.html
@@ -0,0 +1,844 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+<title>Flat Theme Test</title>
+<link rel="stylesheet" type="text/css" href="../flat.css">
+<style type="text/css">
+html, body {
+	height: 100%;
+	width: 100%;
+	padding: 0;
+	margin: 0;
+	border: 0;
+}
+body {
+	font: 12px Myriad,Helvetica,Tahoma,Arial,clean,sans-serif;
+}
+* {
+  outline: none;
+}
+.textarea {
+	width: 60%;
+}
+.tooltips {
+	font-size: 14px;
+}
+.tooltips span {
+	color: #007ac2;
+	cursor: pointer;
+}
+.dijitSliderH {
+	margin: 40px 0;
+	width: 340px;
+}
+.dijitSliderV {
+	float: left;
+	margin: 0 40px;
+	height: 340px;
+}
+.progressBar {
+	margin: 30px 0;
+	width: 320px;
+}
+.dnd {
+	width: 160px;
+}
+.icon {
+	display: inline-block;
+	margin: 8px;
+	padding: 8px;
+	color: #424242;
+	border-radius: 3px;
+	cursor: pointer;
+}
+.icon:hover {
+	background-color: #9E9E9E;
+	color: #FAFAFA;
+}
+.icon.selected {
+	background-color: #424242;
+	color: #FAFAFA;
+}
+.icon i {
+	font-size: 24px;
+}
+</style>
+</head>
+<body class="flat">
+<div style="width:100%;height:100%;" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar'">
+	<div style="width:260px;" data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props="region:'leading', splitter:true, maxSize:420">
+		<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Flat Theme'">
+			<p>A flat theme for Dojo Dijit.</p>
+			<p><input id="rtlCheckbox">&nbsp;Right-To-Left</p>
+		</div>
+		<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'dijit/Calendar'">
+			<div data-dojo-type="dijit/Calendar"></div>
+		</div>
+		<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'dijit/ColorPalette'">
+			<h4>3x4</h4>
+			<div data-dojo-type="dijit/ColorPalette" data-dojo-props="palette:'3x4'"></div>
+			<h4>7x10</h4>
+			<div data-dojo-type="dijit/ColorPalette"></div>
+		</div>
+		<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'dijit/Tree'">
+			<div data-dojo-type="dijit/Tree" data-dojo-props="model: continentModel, query:{ type:'continent'}, label:'Continents', openOnClick:true"></div>
+		</div>
+		<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'dijit/Tree (rootless)'">
+			<div data-dojo-type="dijit/Tree" data-dojo-props="model: continentModel, query:{ type:'continent'}, label:'Continents', openOnClick:true, showRoot: false"></div>
+		</div>
+	</div>
+	<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'center', splitter:true">
+		<div data-dojo-type="dijit/MenuBar" data-dojo-props="region:'top'">
+			<div data-dojo-type="dijit/PopupMenuBarItem" data-dojo-props="label:'File', popup:menu"></div>
+			<div data-dojo-type="dijit/PopupMenuBarItem" data-dojo-props="label:'Edit', popup:menu"></div>
+			<div data-dojo-type="dijit/PopupMenuBarItem" data-dojo-props="label:'Find', popup:menu"></div>
+			<div data-dojo-type="dijit/PopupMenuBarItem" data-dojo-props="label:'View', popup:menu"></div>
+			<div data-dojo-type="dijit/PopupMenuBarItem" data-dojo-props="label:'Help', popup:menu"></div>
+			<div data-dojo-type="dijit/PopupMenuBarItem" data-dojo-props="label:'Disabled', popup:menu, disabled:true"></div>
+		</div>
+		<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center'">
+			<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Form Widgets'">
+				<h4>dijit/form/Button</h4>
+				<button data-dojo-type="dijit/form/Button">Button</button>
+				<button data-dojo-type="dijit/form/Button" data-dojo-props="disabled:true">Disabled</button>
+				<button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'dijitIconSave'">Icon</button>
+				<p>Alternate Button Colors</p>
+				<button class="alt-primary" data-dojo-type="dijit/form/Button">Primary</button>
+				<button class="alt-success" data-dojo-type="dijit/form/Button">Success</button>
+				<button class="alt-info" data-dojo-type="dijit/form/Button">Info</button>
+				<button class="alt-warning" data-dojo-type="dijit/form/Button">Warning</button>
+				<button class="alt-danger" data-dojo-type="dijit/form/Button">Danger</button>
+				<button class="alt-inverse" data-dojo-type="dijit/form/Button">Inverse</button>
+				<p>Alternate Button Colors Disabled</p>
+				<button class="alt-primary" data-dojo-type="dijit/form/Button" data-dojo-props="disabled:true">Primary</button>
+				<button class="alt-success" data-dojo-type="dijit/form/Button" data-dojo-props="disabled:true">Success</button>
+				<button class="alt-info" data-dojo-type="dijit/form/Button" data-dojo-props="disabled:true">Info</button>
+				<button class="alt-warning" data-dojo-type="dijit/form/Button" data-dojo-props="disabled:true">Warning</button>
+				<button class="alt-danger" data-dojo-type="dijit/form/Button" data-dojo-props="disabled:true">Danger</button>
+				<button class="alt-inverse" data-dojo-type="dijit/form/Button" data-dojo-props="disabled:true">Inverse</button>
+				<h4>dijit/form/DropDownButton</h4>
+				<div data-dojo-type="dijit/form/DropDownButton">
+					<span>Basemaps</span>
+					<div data-dojo-type="dijit/DropDownMenu">
+						<div data-dojo-type="dijit/MenuItem">Imagery</div>
+						<div data-dojo-type="dijit/MenuItem">Road</div>
+						<div data-dojo-type="dijit/MenuItem">Hybrid</div>
+					</div>
+				</div>
+				<div data-dojo-type="dijit/form/DropDownButton" data-dojo-props="disabled:true">
+					<span>Basemaps</span>
+					<div data-dojo-type="dijit/DropDownMenu">
+						<div data-dojo-type="dijit/MenuItem">Imagery</div>
+						<div data-dojo-type="dijit/MenuItem">Road</div>
+						<div data-dojo-type="dijit/MenuItem">Hybrid</div>
+					</div>
+				</div>
+				<div class="alt-primary" data-dojo-type="dijit/form/DropDownButton" data-dojo-props="iconClass:'dijitIconTable'">
+					<span>Basemaps</span>
+					<div data-dojo-type="dijit/DropDownMenu">
+						<div data-dojo-type="dijit/MenuItem">Imagery</div>
+						<div data-dojo-type="dijit/MenuItem">Road</div>
+						<div data-dojo-type="dijit/MenuItem">Hybrid</div>
+					</div>
+				</div>
+				<div class="alt-primary" data-dojo-type="dijit/form/DropDownButton" data-dojo-props="iconClass:'dijitIconTable', disabled:true">
+					<span>Basemaps</span>
+					<div data-dojo-type="dijit/DropDownMenu">
+						<div data-dojo-type="dijit/MenuItem">Imagery</div>
+						<div data-dojo-type="dijit/MenuItem">Road</div>
+						<div data-dojo-type="dijit/MenuItem">Hybrid</div>
+					</div>
+				</div>
+				<h4>dijit/form/ComboButton</h4>
+				<div data-dojo-type="dijit/form/ComboButton">
+					<span>All Mail</span>
+					<div data-dojo-type="dijit/DropDownMenu">
+						<div data-dojo-type="dijit/MenuItem">Yahoo</div>
+						<div data-dojo-type="dijit/MenuItem">Google</div>
+					</div>
+				</div>
+				<div data-dojo-type="dijit/form/ComboButton" data-dojo-props="disabled:true">
+					<span>All Mail</span>
+					<div data-dojo-type="dijit/DropDownMenu">
+						<div data-dojo-type="dijit/MenuItem">Yahoo</div>
+						<div data-dojo-type="dijit/MenuItem">Google</div>
+					</div>
+				</div>
+				<div class="alt-primary" data-dojo-type="dijit/form/ComboButton" data-dojo-props="iconClass:'dijitIconMail'">
+					<span>All Mail</span>
+					<div data-dojo-type="dijit/DropDownMenu">
+						<div data-dojo-type="dijit/MenuItem">Yahoo</div>
+						<div data-dojo-type="dijit/MenuItem">Google</div>
+					</div>
+				</div>
+				<div class="alt-primary" data-dojo-type="dijit/form/ComboButton" data-dojo-props="iconClass:'dijitIconMail', disabled:true">
+					<span>All Mail</span>
+					<div data-dojo-type="dijit/DropDownMenu">
+						<div data-dojo-type="dijit/MenuItem">Yahoo</div>
+						<div data-dojo-type="dijit/MenuItem">Google</div>
+					</div>
+				</div>
+				<h4>dijit/form/ToggleButton</h4>
+				<button data-dojo-type="dijit/form/ToggleButton" data-dojo-props="iconClass:'dijitCheckBoxIcon', checked:true">Toggle</button>
+				<button data-dojo-type="dijit/form/ToggleButton" data-dojo-props="iconClass:'dijitCheckBoxIcon', disabled:true, checked:true">Toggle</button>
+				<button class="alt-primary" data-dojo-type="dijit/form/ToggleButton" data-dojo-props="iconClass:'dijitCheckBoxIcon', checked: true">Toggle</button>
+				<button class="alt-primary" data-dojo-type="dijit/form/ToggleButton" data-dojo-props="iconClass:'dijitCheckBoxIcon', checked: true, disabled:true">Toggle</button>
+				<h4>dijit/form/CheckBox</h4>
+				<input data-dojo-type="dijit/form/CheckBox">&nbsp;Check Me&nbsp;&nbsp;
+				<input data-dojo-type="dijit/form/CheckBox" data-dojo-props="disabled:true">&nbsp;Disabled&nbsp;&nbsp;
+				<input data-dojo-type="dijit/form/CheckBox" data-dojo-props="disabled:true, checked:true">&nbsp;Disabled and Checked
+				<h4>dijit/form/RadioButton</h4>
+				<input data-dojo-type="dijit/form/RadioButton" checked name="critters">&nbsp;Beaver&nbsp;&nbsp;
+				<input data-dojo-type="dijit/form/RadioButton" name="critters">&nbsp;Giraffe&nbsp;&nbsp;
+				<input data-dojo-type="dijit/form/RadioButton" name="critters">&nbsp;Squirrel&nbsp;&nbsp;
+				<input data-dojo-type="dijit/form/RadioButton" name="critters" data-dojo-props="disabled:true">&nbsp;Woolly Mammoth
+				<p>Disabled Checked</p>
+				<input data-dojo-type="dijit/form/RadioButton" checked data-dojo-props="disabled:true">
+			</div>
+			<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Text Widgets'">
+				<h4>dijit/form/TextBox</h4>
+				<input data-dojo-type="dijit/form/TextBox" data-dojo-props="placeholder:'Type here'">
+				<input data-dojo-type="dijit/form/TextBox" data-dojo-props="placeholder:'Disabled', disabled:true">
+				<h4>dijit/form/NumberTextBox</h4>
+				<input data-dojo-type="dijit/form/NumberTextBox" required="true" value="3000" data-dojo-props="constraints:{min:-20000,max:20000,places:0}, invalidMessage:'Please enter a numeric value.', rangeMessage:'Invalid elevation.'">
+				<input data-dojo-type="dijit/form/NumberTextBox" required="true" value="3000" data-dojo-props="disabled:true, constraints:{min:-20000,max:20000,places:0}, invalidMessage:'Please enter a numeric value.', rangeMessage:'Invalid elevation.'">
+				<h4>dijit/form/CurrencyTextBox</h4>
+				<input value="54775.53" required="true" data-dojo-type="dijit/form/CurrencyTextBox" data-dojo-props="constraints:{fractional:true}, currency:'USD', invalidMessage:'Invalid amount. Cents are required.'">
+				<input value="54775.53" required="true" data-dojo-type="dijit/form/CurrencyTextBox" data-dojo-props="disabled:true, constraints:{fractional:true}, currency:'USD', invalidMessage:'Invalid amount. Cents are required.'">
+				<h4>dijit/form/DateTextBox</h4>
+				<input value="2005-12-30" data-dojo-type="dijit/form/DateTextBox" required="true">
+				<input value="2005-12-30" data-dojo-type="dijit/form/DateTextBox" data-dojo-props="disabled:true" required="true">
+				<input class="alt-primary" value="2005-12-30" data-dojo-type="dijit/form/DateTextBox" required="true">
+				<input class="alt-primary" value="2005-12-30" data-dojo-type="dijit/form/DateTextBox" data-dojo-props="disabled:true" required="true">
+				<h4>dijit/form/TimeTextBox</h4>
+				<input value="T15:00:00" data-dojo-type="dijit/form/TimeTextBox" required="true">
+				<input value="T15:00:00" data-dojo-type="dijit/form/TimeTextBox" data-dojo-props="disabled:true" required="true">
+				<input class="alt-primary" value="T15:00:00" data-dojo-type="dijit/form/TimeTextBox" required="true">
+				<input class="alt-primary" value="T15:00:00" data-dojo-type="dijit/form/TimeTextBox" data-dojo-props="disabled:true" required="true">
+				<h4>dijit/form/NumberSpinner</h4>
+				<input data-dojo-type="dijit/form/NumberSpinner" value="1000" data-dojo-props="smallDelta:10, constraints:{min:9,max:1550,places:0}">
+				<input data-dojo-type="dijit/form/NumberSpinner" value="1000" data-dojo-props="disabled:true, smallDelta:10, constraints:{min:9,max:1550,places:0}">
+				<input class="alt-primary" data-dojo-type="dijit/form/NumberSpinner" value="1000" data-dojo-props="smallDelta:10, constraints:{min:9,max:1550,places:0}">
+				<input class="alt-primary" data-dojo-type="dijit/form/NumberSpinner" value="1000" data-dojo-props="disabled:true, smallDelta:10, constraints:{min:9,max:1550,places:0}">
+				<h4>dijit/form/Textarea</h4>
+				<textarea class="textarea" data-dojo-type="dijit/form/Textarea">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare mattis dolor, id tincidunt eros auctor a. Duis nisi purus, consectetur malesuada iaculis vitae, dignissim a justo.</textarea>
+				<br><br>
+				<textarea class="textarea" data-dojo-type="dijit/form/Textarea" data-dojo-props="disabled: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare mattis dolor, id tincidunt eros auctor a. Duis nisi purus, consectetur malesuada iaculis vitae, dignissim a justo.</textarea>
+				<h4>dijit/form/SimpleTextarea</h4>
+				<textarea class="textarea" data-dojo-type="dijit/form/SimpleTextarea">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare mattis dolor, id tincidunt eros auctor a. Duis nisi purus, consectetur malesuada iaculis vitae, dignissim a justo.</textarea>
+				<br><br>
+				<textarea class="textarea" data-dojo-type="dijit/form/SimpleTextarea" data-dojo-props="disabled: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare mattis dolor, id tincidunt eros auctor a. Duis nisi purus, consectetur malesuada iaculis vitae, dignissim a justo.</textarea>
+			</div>
+			<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Select Widgets'">
+				<h4>dijit/form/Select</h4>
+				<select data-dojo-type="dijit/form/Select">
+					<option value="TN">Tennessee</option>
+					<option value="VA" selected="selected">Virginia</option>
+					<option value="WA">Washington</option>
+					<option value="FL">Florida</option>
+					<option value="CA">California</option>
+				</select>
+				<select data-dojo-type="dijit/form/Select" data-dojo-props="disabled:true">
+					<option value="TN">Tennessee</option>
+					<option value="VA" selected="selected">Virginia</option>
+					<option value="WA">Washington</option>
+					<option value="FL">Florida</option>
+					<option value="CA">California</option>
+				</select>
+				<select class="alt-primary" data-dojo-type="dijit/form/Select">
+					<option value="TN">Tennessee</option>
+					<option value="VA" selected="selected">Virginia</option>
+					<option value="WA">Washington</option>
+					<option value="FL">Florida</option>
+					<option value="CA">California</option>
+				</select>
+				<select class="alt-primary" data-dojo-type="dijit/form/Select" data-dojo-props="disabled:true">
+					<option value="TN">Tennessee</option>
+					<option value="VA" selected="selected">Virginia</option>
+					<option value="WA">Washington</option>
+					<option value="FL">Florida</option>
+					<option value="CA">California</option>
+				</select>
+				<h4>dijit/form/FilteringSelect</h4>
+				<input data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="placeHolder:'Search a place', store:continentStore, searchAttr:'name'">
+				<input data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="disabled:true, placeHolder:'Search a place', store:continentStore, searchAttr:'name'">
+				<input class="alt-primary" data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="placeHolder:'Search a place', store:continentStore, searchAttr:'name'">
+				<input class="alt-primary" data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="placeHolder:'Search a place', store:continentStore, searchAttr:'name', disabled:true">
+				<h4>dijit/form/MultiSelect</h4>
+				<select data-dojo-type="dijit/form/MultiSelect" size="4">
+					<option value="AP">Apples</option>
+					<option value="OR">Oranges</option>
+					<option value="PE" selected="selected">Pears</option>
+				</select>
+				<h4>dijit/form/ComboBox</h4>
+				<select data-dojo-type="dijit/form/ComboBox" data-dojo-props="store:continentStore"></select>
+				<select data-dojo-type="dijit/form/ComboBox" data-dojo-props="disabled:true, store:continentStore"></select>
+				<select class="alt-primary" data-dojo-type="dijit/form/ComboBox" data-dojo-props="store:continentStore"></select>
+				<select class="alt-primary" data-dojo-type="dijit/form/ComboBox" data-dojo-props="store:continentStore, disabled:true"></select>
+			</div>
+			<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Dialogs &amp; Tooltips'">
+				<h4>dijit/Dialog</h4>
+				<button data-dojo-type="dijit/form/Button" data-dojo-props="onClick:showDialog">Dialog</button>
+				<button data-dojo-type="dijit/form/Button" onclick="actionBarDialog.show()">Dialog with Action Bar</button>
+				<div data-dojo-type="dijit/Dialog" data-dojo-id="actionBarDialog" title="Dialog with Action Bar" style="width: 300px">
+				<div class="dijitDialogPaneContentArea">
+					<br />
+					Content Area
+					<br />
+					<br />
+					</div>
+					<div class="dijitDialogPaneActionBar">
+						<button data-dojo-type="dijit/form/Button" type="submit" id="ok" data-dojo-props="class:'alt-alt alt-success'">OK</button>
+						<button data-dojo-type="dijit/form/Button" type="button" data-dojo-props="onClick:function(){theDialog.hide();}">Cancel</button>
+					</div>
+				</div>
+				<h4>dijit/Tooltip</h4>
+				<div class="tooltips">
+					<span id="tooltipAbove">above</span> |
+					<span id="tooltipAboveCentered">above centered</span> |
+					<span id="tooltipBelow">below</span> |
+					<span id="tooltipBelowCentered">below centered</span> |
+					<span id="tooltipBefore">before</span> |
+					<span id="tooltipAfter">after</span>
+				</div>
+				<h4>dijit/TooltipDialog</h4>
+				<div data-dojo-type="dijit/form/DropDownButton">
+					<span>Tooltip Dialog</span>
+					<div style="max-width:300px;" data-dojo-type="dijit/TooltipDialog" data-dojo-props="title:'Lorem Ipsum'">
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare mattis dolor, id tincidunt eros auctor a. Duis nisi purus, consectetur malesuada iaculis vitae, dignissim a justo. Suspendisse condimentum ex vel aliquet facilisis. Praesent efficitur dolor at nibh tristique mattis. Aliquam vulputate lobortis lacus eget sagittis. Maecenas risus velit, bibendum in nibh vitae, feugiat laoreet quam. Mauris nisi sem, accumsan ut dolor et, iaculis porta ligula.</p>
+					</div>
+				</div>
+				<div data-dojo-type="dijit/form/DropDownButton">
+					<span>Confirm Tooltip Dialog</span>
+					<div data-dojo-type="dijit/ConfirmTooltipDialog" data-dojo-props="title:'Login'">
+						<table>
+							<tr>
+								<td><label for="user">User:</label></td>
+								<td><input data-dojo-type="dijit/form/TextBox"></td>
+							</tr>
+							<tr>
+								<td><label for="pwd">Password:</label></td>
+								<td><input data-dojo-type="dijit/form/TextBox" type="password"></td>
+							</tr>
+						</table>
+					</div>
+				</div>
+			</div>
+			<div id="editorNode"></div>
+			<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="title:'Other Dijits', nested:true">
+				<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Title Pane/Fieldset'">
+					<div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Lorem Ipsum'">
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare mattis dolor, id tincidunt eros auctor a. Duis nisi purus, consectetur malesuada iaculis vitae, dignissim a justo. Suspendisse condimentum ex vel aliquet facilisis. Praesent efficitur dolor at nibh tristique mattis. Aliquam vulputate lobortis lacus eget sagittis. Maecenas risus velit, bibendum in nibh vitae, feugiat laoreet quam. Mauris nisi sem, accumsan ut dolor et, iaculis porta ligula.</p>
+					</div>
+					<p>&nbsp;</p>
+					<div data-dojo-type="dijit/Fieldset" data-dojo-props="title: 'Lorem Ipsum'">
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare mattis dolor, id tincidunt eros auctor a. Duis nisi purus, consectetur malesuada iaculis vitae, dignissim a justo. Suspendisse condimentum ex vel aliquet facilisis. Praesent efficitur dolor at nibh tristique mattis. Aliquam vulputate lobortis lacus eget sagittis. Maecenas risus velit, bibendum in nibh vitae, feugiat laoreet quam. Mauris nisi sem, accumsan ut dolor et, iaculis porta ligula.</p>
+					</div>
+				</div>
+				<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Sliders'">
+					<h4>dijit/form/HorizontalSlider</h4>
+					<div id="horizontalSlider"></div>
+					<div id="horizontalSliderAdvanced"></div>
+					<h4>dijit/form/VerticalSlider</h4>
+					<div id="verticalSlider"></div>
+					<div id="verticalSliderAdvanced"></div>
+				</div>
+				<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Toolbar'">
+					<h4>dijit/Toolbar</h4>
+					<div data-dojo-type="dijit/Toolbar">
+						<button data-dojo-type="dijit/form/Button">One</button>
+						<button data-dojo-type="dijit/form/Button">Two</button>
+						<button data-dojo-type="dijit/form/Button">Three</button>
+						<button data-dojo-type="dijit/form/Button" data-dojo-props="disabled:true">Disabled</button>
+						<button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'dijitIconSave'">Icon</button>
+						<div data-dojo-type="dijit/form/DropDownButton">
+							<span>Basemaps</span>
+							<div data-dojo-type="dijit/DropDownMenu">
+								<div data-dojo-type="dijit/MenuItem">Imagery</div>
+								<div data-dojo-type="dijit/MenuItem">Road</div>
+								<div data-dojo-type="dijit/MenuItem">Hybrid</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Progress Bars'">
+					<h4>Determinate</h4>
+					<div class="progressBar" data-dojo-type="dijit/ProgressBar" data-dojo-props="maximum:1, value:0.5"></div>
+					<div class="progressBar alt-primary" data-dojo-type="dijit/ProgressBar" data-dojo-props="maximum:1, value:0.40"></div>
+					<div class="progressBar alt-success" data-dojo-type="dijit/ProgressBar" data-dojo-props="maximum:1, value:0.75"></div>
+					<div class="progressBar alt-info" data-dojo-type="dijit/ProgressBar" data-dojo-props="maximum:1, value:0.35"></div>
+					<div class="progressBar alt-warning" data-dojo-type="dijit/ProgressBar" data-dojo-props="maximum:1, value:1"></div>
+					<div class="progressBar alt-danger" data-dojo-type="dijit/ProgressBar" data-dojo-props="maximum:1, value:0.82"></div>
+					<div class="progressBar alt-inverse" data-dojo-type="dijit/ProgressBar" data-dojo-props="maximum:1, value:0.37"></div>
+					<h4>Indeterminate</h4>
+					<div class="progressBar" data-dojo-type="dijit/ProgressBar" data-dojo-props="indeterminate:true"></div>
+					<div class="progressBar alt-primary" data-dojo-type="dijit/ProgressBar" data-dojo-props="indeterminate:true"></div>
+					<div class="progressBar alt-success" data-dojo-type="dijit/ProgressBar" data-dojo-props="indeterminate:true"></div>
+					<div class="progressBar alt-info" data-dojo-type="dijit/ProgressBar" data-dojo-props="indeterminate:true"></div>
+					<div class="progressBar alt-warning" data-dojo-type="dijit/ProgressBar" data-dojo-props="indeterminate:true"></div>
+					<div class="progressBar alt-danger" data-dojo-type="dijit/ProgressBar" data-dojo-props="indeterminate:true"></div>
+					<div class="progressBar alt-inverse" data-dojo-type="dijit/ProgressBar" data-dojo-props="indeterminate:true"></div>
+				</div>
+				<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Inline Edit'">
+					<h3 data-dojo-type="dijit/InlineEditBox">Click to edit me</h3>
+					<p data-dojo-type="dijit/InlineEditBox" data-dojo-props='editor: "dijit/form/Textarea", autoSave:false'>I'm one big &#8234;paragraph.&#8236; Go ahead and edit &#8234;me.&#8236; I dare &#8234;you.&#8236;The quick brown fox jumped over the lazy &#8234;dog.&#8236; Blah blah blah blah blah blah &#8234;blah ...&#8236;</p>
+					<span data-dojo-type="dijit/InlineEditBox" data-dojo-props='editor: "dijit/form/FilteringSelect", editorParams:{ store: continentStore, autoComplete: true, promptMessage: "Please enter a place"}, width:"300px"'>The earth</span>
+				</div>
+				<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'DnD'">
+					<ol class="dnd" id="DnDList"></ol>
+				</div>
+				<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Closeable', closable:true">
+					<p>Just a closable tab.</p>
+				</div>
+			</div>
+			<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tabs!!!'">
+				<div style="width:100%;height:100%;" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar'">
+					<div style="width:30%" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'left', tabPosition:'left-h'">
+						<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab'">I'm just a tab.</div>
+						<div style="width:30%" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="title:'Nested', nested:true">
+							<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab'">I'm just a tab.</div>
+							<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Closable', closable:true">I'm a closable tab.</div>
+						</div>
+						<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Closable', closable:true">I'm a closable tab.</div>
+					</div>
+					<div style="height:30%" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'top', tabPosition:'top'">
+						<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab'">I'm just a tab.</div>
+						<div style="width:30%" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="title:'Nested', nested:true">
+							<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab'">I'm just a tab.</div>
+							<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Closable', closable:true">I'm a closable tab.</div>
+						</div>
+						<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Closable', closable:true">I'm a closable tab.</div>
+					</div>
+					<div style="width:30%" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'right', tabPosition:'right-h'">
+						<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab'">I'm just a tab.</div>
+						<div style="width:30%" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="title:'Nested', nested:true">
+							<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab'">I'm just a tab.</div>
+							<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Closable', closable:true">I'm a closable tab.</div>
+						</div>
+						<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Closable', closable:true">I'm a closable tab.</div>
+					</div>
+					<div style="height:30%" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'bottom', tabPosition:'bottom'">
+						<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab'">I'm just a tab.</div>
+						<div style="width:30%" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="title:'Nested', nested:true">
+							<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab'">I'm just a tab.</div>
+							<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Closable', closable:true">I'm a closable tab.</div>
+						</div>
+						<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Closable', closable:true">I'm a closable tab.</div>
+					</div>
+					<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">Hello Tabs!</div>
+				</div>
+			</div>
+			<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Icons'">
+				<h4>Flat Theme Icons</h4>
+				<p>
+					<b>Name:</b> <span id="icon-name"></span><br>
+					<b>Dijit Alias:</b> <span id="icon-alias"></span><br>
+					<b>Code:</b> <span id="icon-code"></span>
+				</p>
+				<div id="icons"></div>
+				<h4>dijitIconLoading and Animation Test</h4>
+				<p>
+					<i class="dijitIcon dijitIconLoading"></i>
+				</p>
+				<p>
+					Just spinning away... <i class="flat-arrow-up icon-spin"></i>
+				</p>
+				<h4>Dijit Icon Alias Test</h4>
+				<div id="dijit-icons"></div>
+			</div>
+		</div>
+	</div>
+</div>
+<script src="//archive.dojotoolkit.org/cdn/1.12.2-cdn/1.12.2/dojo/dojo.js"></script>
+<script>
+var continentStore, continentModel, menu, showDialog;
+require([
+	'dojo/io-query', 'dijit/registry', 'dojo/parser', 'dojo/store/Memory', 'dijit/tree/ObjectStoreModel', 'dojo/dnd/Source', 'dojo/aspect',
+
+	'dojo/request/xhr', 'dojo/_base/array', 'dojo/dom-construct', 'dojo/dom-class', 'dojo/dom-attr', 'dojo/dom', 'dojo/on',
+
+	'dijit/Menu', 'dijit/MenuItem', 'dijit/CheckedMenuItem', 'dijit/RadioMenuItem', 'dijit/PopupMenuItem', 'dijit/MenuSeparator',
+
+	'dijit/Tooltip', 'dijit/ColorPalette', 'dijit/Dialog', 'dijit/Editor', 'dijit/form/CheckBox',
+
+	'dijit/form/HorizontalSlider', 'dijit/form/VerticalSlider', 'dijit/form/HorizontalRule', 'dijit/form/HorizontalRuleLabels', 'dijit/form/VerticalRule', 'dijit/form/VerticalRuleLabels',
+
+	// declarative
+	'dijit/layout/BorderContainer', 'dijit/layout/AccordionContainer', 'dijit/layout/TabContainer', 'dijit/layout/ContentPane',
+
+	'dijit/TitlePane', 'dijit/ProgressBar', 'dijit/Calendar', 'dijit/InlineEditBox', 'dijit/Tree', 'dijit/Toolbar',
+
+	'dijit/MenuBar', 'dijit/PopupMenuBarItem',
+
+	'dijit/form/Button', 'dijit/form/ComboButton', 'dijit/form/DropDownButton', 'dijit/form/ToggleButton', 'dijit/form/RadioButton',
+
+	'dijit/form/TextBox','dijit/form/NumberTextBox', 'dijit/form/CurrencyTextBox', 'dijit/form/DateTextBox', 'dijit/form/TimeTextBox', 'dijit/form/NumberSpinner',
+
+	'dijit/form/Select', 'dijit/form/MultiSelect',
+
+	'dijit/form/Textarea', 'dijit/form/SimpleTextarea',
+
+	'dijit/TooltipDialog', 'dijit/ConfirmTooltipDialog',
+
+	'dijit/form/Textarea', 'dijit/form/SimpleTextarea',
+
+	'dijit/_editor/_Plugin', 'dijit/_editor/plugins/AlwaysShowToolbar', 'dijit/_editor/plugins/FontChoice', 'dijit/_editor/plugins/TextColor', 'dijit/_editor/plugins/LinkDialog',
+	'dijit/_editor/plugins/FullScreen', 'dijit/_editor/plugins/ViewSource', 'dijit/_editor/plugins/NewPage', 'dijit/_editor/plugins/Print', 'dijit/_editor/plugins/TabIndent', 'dijit/_editor/plugins/ToggleDir',
+
+	'dojo/domReady!'
+], function (
+	ioQuery, registry, parser, Memory, ObjectStoreModel, Source, aspect,
+	xhr, array, domConst, domClass, domAttr, dom, on,
+	Menu, MenuItem, CheckedMenuItem, RadioMenuItem, PopupMenuItem, MenuSeparator,
+	Tooltip, ColorPalette, Dialog, Editor, CheckBox,
+	HorizontalSlider, VerticalSlider, HorizontalRule, HorizontalRuleLabels, VerticalRule, VerticalRuleLabels
+) {
+	// RTL
+	var _direction = 'ltr';
+	var uri = location.href;
+	var queryString = uri.substring(uri.indexOf('?') + 1, uri.length);
+	var queryObject = ioQuery.queryToObject(queryString);
+	if (queryObject.dir && queryObject.dir === 'rtl') {
+		document.body.dir = 'rtl';
+		_direction = 'rtl';
+	}
+
+	var rtlCheckbox = new CheckBox({
+		checked: (_direction === 'rtl'),
+		onChange: function (checked) {
+			var uri = window.location.href,
+			uriHash = window.location.hash;
+			if (uriHash) {
+				uri = uri.substring(0, uri.indexOf(uriHash));
+			}
+			if (checked) {
+				if (_direction === 'rtl') {
+					return;
+				}
+				window.location.href = uri + '?dir=rtl';
+			} else {
+				window.location.href = uri.substring(0, uri.indexOf('?'));
+			}
+		}
+	}, 'rtlCheckbox');
+
+	// one menu for most uses
+	menu = new Menu();
+	menu.startup();
+	menu.addChild(new MenuItem({
+		label: 'Menu Item'
+	}));
+	menu.addChild(new MenuItem({
+		label: 'Disabled Menu Item',
+		disabled: true
+	}));
+	menu.addChild(new MenuSeparator());
+	var checkedMenu = new Menu();
+	menu.addChild(new PopupMenuItem({
+		label: 'Checked',
+		popup: checkedMenu
+	}));
+	checkedMenu.addChild(new CheckedMenuItem({
+		label: 'Check',
+		checked: false
+	}));
+	checkedMenu.addChild(new CheckedMenuItem({
+		label: 'Disabled',
+		checked: false,
+		disabled: true
+	}));
+	checkedMenu.addChild(new CheckedMenuItem({
+		label: 'Checked Disabled',
+		checked: true,
+		disabled: true
+	}));
+	var radioMenu = new Menu();
+	menu.addChild(new PopupMenuItem({
+		label: 'Radio',
+		popup: radioMenu
+	}));
+	radioMenu.addChild(new RadioMenuItem({
+		label: 'One',
+		group: 'menu-radio-group',
+		checked: true
+	}));
+	radioMenu.addChild(new RadioMenuItem({
+		label: 'Two',
+		group: 'menu-radio-group'
+	}));
+	radioMenu.addChild(new RadioMenuItem({
+		label: 'Three',
+		group: 'menu-radio-group'
+	}));
+	var iconMenu = new Menu();
+	menu.addChild(new PopupMenuItem({
+		label: 'Icons',
+		popup: iconMenu
+	}));
+	iconMenu.addChild(new MenuItem({
+		label: 'Save',
+		iconClass:'dijitIconSave'
+	}));
+	iconMenu.addChild(new MenuItem({
+		label: 'Copy',
+		iconClass:'dijitIconCopy'
+	}));
+	iconMenu.addChild(new MenuItem({
+		label: 'Paste',
+		iconClass:'dijitEditorIconPaste'
+	}));
+	menu.addChild(new MenuSeparator());
+	menu.addChild(new PopupMenuItem({
+		label: 'Color Palette',
+		popup: new ColorPalette()
+	}));
+
+	// Data for Tree, ComboBox, InlineEditBox
+	var data = [
+		{ id: "earth", name: "The earth", type: "planet", population: "6 billion"},
+		{ id: "AF", name: "Africa", type: "continent", population: "900 million", area: "30,221,532 sq km", timezone: "-1 UTC to +4 UTC", parent: "earth"},
+		{ id: "EG", name: "Egypt", type: "country", parent: "AF" },
+		{ id: "KE", name: "Kenya", type: "country", parent: "AF" },
+		{ id: "Nairobi", name: "Nairobi", type: "city", parent: "KE" },
+		{ id: "Mombasa", name: "Mombasa", type: "city", parent: "KE" },
+		{ id: "SD", name: "Sudan", type: "country", parent: "AF" },
+		{ id: "Khartoum", name: "Khartoum", type: "city", parent: "SD" },
+		{ id: "AS", name: "Asia", type: "continent", parent: "earth" },
+		{ id: "CN", name: "China", type: "country", parent: "AS" },
+		{ id: "IN", name: "India", type: "country", parent: "AS" },
+		{ id: "RU", name: "Russia", type: "country", parent: "AS" },
+		{ id: "MN", name: "Mongolia", type: "country", parent: "AS" },
+		{ id: "OC", name: "Oceania", type: "continent", population: "21 million", parent: "earth"},
+		{ id: "AU", name: "Australia", type: "country", population: "21 million", parent: "OC"},
+		{ id: "EU", name: "Europe", type: "continent", parent: "earth" },
+		{ id: "DE", name: "Germany", type: "country", parent: "EU" },
+		{ id: "FR", name: "France", type: "country", parent: "EU" },
+		{ id: "ES", name: "Spain", type: "country", parent: "EU" },
+		{ id: "IT", name: "Italy", type: "country", parent: "EU" },
+		{ id: "NA", name: "North America", type: "continent", parent: "earth" },
+		{ id: "MX", name: "Mexico", type: "country", population: "108 million", area: "1,972,550 sq km", parent: "NA" },
+		{ id: "Mexico City", name: "Mexico City", type: "city", population: "19 million", timezone: "-6 UTC", parent: "MX"},
+		{ id: "Guadalajara", name: "Guadalajara", type: "city", population: "4 million", timezone: "-6 UTC", parent: "MX" },
+		{ id: "CA", name: "Canada", type: "country", population: "33 million", area: "9,984,670 sq km", parent: "NA" },
+		{ id: "Ottawa", name: "Ottawa", type: "city", population: "0.9 million", timezone: "-5 UTC", parent: "CA"},
+		{ id: "Toronto", name: "Toronto", type: "city", population: "2.5 million", timezone: "-5 UTC", parent: "CA" },
+		{ id: "US", name: "United States of America", type: "country", parent: "NA" },
+		{ id: "SA", name: "South America", type: "continent", parent: "earth" },
+		{ id: "BR", name: "Brazil", type: "country", population: "186 million", parent: "SA" },
+		{ id: "AR", name: "Argentina", type: "country", population: "40 million", parent: "SA" }
+	];
+
+	// Create test store.
+	continentStore = new Memory({
+		data: data
+	});
+
+	// Since dojo.store.Memory doesn't have various store methods we need, we have to add them manually
+	continentStore.getChildren = function(object){
+		// Add a getChildren() method to store for the data model where
+		// children objects point to their parent (aka relational model)
+		return this.query({parent: this.getIdentity(object)});
+	};
+
+	// Create the model for the Tree
+	continentModel = new ObjectStoreModel({store: continentStore, query: {id: "earth"}});
+
+	// dialog
+	var dialog = new Dialog({
+		title: 'Dialog',
+		content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare mattis dolor, id tincidunt eros auctor a. Duis nisi purus, consectetur malesuada iaculis vitae, dignissim a justo. Suspendisse condimentum ex vel aliquet facilisis. Praesent efficitur dolor at nibh tristique mattis. Aliquam vulputate lobortis lacus eget sagittis. Maecenas risus velit, bibendum in nibh vitae, feugiat laoreet quam. Mauris nisi sem, accumsan ut dolor et, iaculis porta ligula.</p>',
+		style: 'width:300px'
+	});
+	showDialog = function () {
+		dialog.show();
+	};
+
+	//tooltips
+	new Tooltip({
+		connectId: 'tooltipAbove',
+		label: 'tooltip: above',
+		position: ['above']
+	});
+	new Tooltip({
+		connectId: 'tooltipAboveCentered',
+		label: 'tooltip: above centered',
+		position: ['above-centered']
+	});
+	new Tooltip({
+		connectId: 'tooltipBelow',
+		label: 'tooltip: below',
+		position: ['below']
+	});
+	new Tooltip({
+		connectId: 'tooltipBelowCentered',
+		label: 'tooltip: below centered',
+		position: ['below-centered']
+	});
+	new Tooltip({
+		connectId: 'tooltipBefore',
+		label: 'tooltip: before',
+		position: ['before']
+	});
+	new Tooltip({
+		connectId: 'tooltipAfter',
+		label: 'tooltip: after',
+		position: ['after']
+	});
+
+	// sliders
+	new HorizontalSlider({
+		value: 5,
+		minimum: -10,
+		maximum: 10,
+		intermediateChanges: true,
+		showButtons: false
+	}, 'horizontalSlider');
+	var sliderRulesH = new HorizontalRule({
+		count: 11,
+		style: { height: '5px' }
+	});
+	var sliderRuleLabelsH = new HorizontalRuleLabels({
+		labels: ['low', 'mid', 'high']
+	});
+	var horizontalSliderAdvanced = new HorizontalSlider({
+		value: 5,
+		minimum: -10,
+		maximum: 10,
+		intermediateChanges: true,
+		discreteValues: 11
+	}, 'horizontalSliderAdvanced');
+	sliderRulesH.placeAt(horizontalSliderAdvanced.containerNode);
+	sliderRuleLabelsH.placeAt(horizontalSliderAdvanced.containerNode);
+	new VerticalSlider({
+		value: 5,
+		minimum: -10,
+		maximum: 10,
+		intermediateChanges: true,
+		style: 'height:240px',
+		showButtons: false
+	}, 'verticalSlider');
+	var sliderRulesV = new VerticalRule({
+		count: 11,
+		style: { width: '5px' }
+	});
+	var sliderRuleLabelsV = new VerticalRuleLabels({
+		labels: ['low', 'mid', 'high']
+	});
+	var verticalSliderAdvanced = new VerticalSlider({
+		value: 5,
+		minimum: -10,
+		maximum: 10,
+		intermediateChanges: true,
+		discreteValues: 11,
+		style: 'height:240px;'
+	}, 'verticalSliderAdvanced');
+	sliderRulesV.placeAt(verticalSliderAdvanced.containerNode);
+	sliderRuleLabelsV.placeAt(verticalSliderAdvanced.containerNode);
+
+	// editor
+	var editor = new Editor({
+		title: 'Editor',
+		//extraPlugins: [dijit._editor.plugins.AlwaysShowToolbar],
+		plugins: ['undo', 'redo', '|', 'cut', 'copy', 'paste', 'selectAll', 'delete', '|',
+		'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'removeFormat', '|',
+		'insertOrderedList', 'insertUnorderedList', 'indent', 'outdent', 'justifyLeft', 'justifyRight', 'justifyCenter', 'justifyFull', '|',
+		'insertHorizontalRule', 'insertImage', 'createLink', 'unlink', 'foreColor', 'hiliteColor', '|',
+		'fontSize', 'formatBlock', 'viewSource', '|', 'newpage', 'fullscreen', 'print', 'tabIndent', 'toggleDir']
+	}, 'editorNode');
+	editor.startup();
+
+	// DnD
+	var dndList = new Source('DnDList', {});
+	dndList.insertNodes(false, [
+		'Wrist watch',
+		'Life jacket',
+		'Toy bulldozer',
+		'Vintage microphone',
+		'TIE fighter'
+	]);
+
+	parser.parse();
+
+	// icons
+	var selectedIcon,
+		iconsDiv = dom.byId('icons'),
+		aliasDiv = dom.byId('dijit-icons'),
+		iconName = dom.byId('icon-name'),
+		iconAlias = dom.byId('icon-alias'),
+		iconCode = dom.byId('icon-code');
+	function makeIcons (result) {
+		array.forEach(result.icons, function (icon) {
+			var name = icon.properties.name,
+				iconClass = 'flat-' + name,
+				decCode = icon.properties.code;
+			var div = domConst.create('div', {
+				'class': 'icon',
+				'title': iconClass + ' (\\' + decCode.toString(16) + ')',
+				'data-name': iconClass,
+				'data-alias': icon.icon.tags.join() || 'n/a',
+				'data-code': '\\' + decCode.toString(16)
+			}, iconsDiv, 'last');
+			domConst.create('i', {
+				'class': iconClass
+			}, div);
+			on(div, 'click', function (evt) {
+				var el = (evt.target.tagName !== 'I') ? evt.target : evt.target.parentNode;
+				if (selectedIcon) {
+					domClass.remove(selectedIcon, 'selected');
+				}
+				selectedIcon = el;
+				domClass.add(el, 'selected');
+				iconName.innerHTML = domAttr.get(el, 'data-name');
+				iconAlias.innerHTML = domAttr.get(el, 'data-alias');
+				iconCode.innerHTML = domAttr.get(el, 'data-code');
+			});
+			if (icon.icon.tags.length && (icon.icon.tags.length >= 1 && icon.icon.tags[0])) {
+				array.forEach(icon.icon.tags, function (tag) {
+					var div = domConst.create('div', {}, aliasDiv, 'last');
+					domConst.create('i', {
+						'class': 'dijitIcon ' + tag,
+						'style': 'font-size: 2em; color: #424242;'
+					}, div);
+					domConst.create('span', {
+						'innerHTML': '&nbsp;&nbsp;' + tag
+					}, div, 'last');
+				});
+			}
+		});
+		iconsDiv.firstChild.click();
+	}
+	xhr('../icons/selection.json', {
+		handleAs: 'json'
+	}).then(makeIcons);
+
+	// helper to create the icon classes from selection.json
+	window.createIconClasses = function () {
+		xhr('../icons/selection.json', {
+			handleAs: 'json'
+		}).then(function (result) {
+			var a = '';
+			array.forEach(result.icons, function (icon) {
+				if (icon.icon.tags.length && (icon.icon.tags.length >= 1 && icon.icon.tags[0])) {
+					array.forEach(icon.icon.tags, function (tag) {
+						a += '.' + tag + ':before,\r\n';
+					});
+				}
+				a += '.flat-' + icon.properties.name + ':before {\r\n\tcontent: "\\' + icon.properties.code.toString(16) + '";\r\n}\r\n';
+			});
+			var blob = new window.Blob([a], {
+				type: 'octet/stream'
+			});
+			var url = window.URL.createObjectURL(blob);
+			var link = domConst.create('a', {
+				'href': url,
+				'download': 'icon-styles.txt'
+			});
+			link.click();
+			window.URL.revokeObjectURL(url);
+		});
+	};
+});
+</script>
+</body>
+</html>
diff --git a/lib/flat/variables.styl b/lib/flat/variables.styl
new file mode 100755
index 000000000..90aafe180
--- /dev/null
+++ b/lib/flat/variables.styl
@@ -0,0 +1,74 @@
+// http://tj.github.io/nib/
+@import 'nib';
+
+// theme mixins and functions
+@import 'mixins';
+
+@import 'variables_material_colors';
+
+// theme name
+// easily copy flat theme, adjust variables and compile new theme
+$theme-name = flat;
+
+// colors
+// base color of the theme
+// default TextBox & CheckBox borders, Menu hover, AccordionPane/TtilePane header, etc 
+$theme-base = $blue-500;
+// base color for default Button, text on $theme-base, ContentPane background, etc
+$theme-base-color = $white;
+
+// gray colors
+$white = $white;
+$black = $black;
+$grey-dark = $grey-800;
+$grey = $grey-500;
+$grey-light = $grey-300;
+$grey-lighter = $grey-100;
+
+// misc colors
+$error = $deep-orange-a700;
+
+// alternate colors
+$primary = $blue-600;
+$success = $green-600;
+$info = $light-blue-500;
+$warning = $orange-600;
+$danger = $red-600;
+$inverse = $grey-700;
+
+// !! should not be using transparency for disabled !!
+$disabled-opacity = 0.65;
+
+// default disabled colors
+$disabled-color = $grey;
+$disabled-background-color = $grey-lighter;
+$disabled-border-color = lighten($grey-light, 10%);
+
+// typography
+$line-height = 20px;
+
+// box 
+$border-color = $grey;
+$border-radius = 3px;
+$padding = 4px;
+$margin = 4px;
+
+// box shadows
+$shadow-depth1 = 0 1px .5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,.2);
+$shadow-depth1_5 = 0 4px 2px -2px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.2);
+$shadow-depth2 = 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,.2);
+$shadow-depth3 = 0 12px 8px -4px rgba(0,0,0,0.3), 0 15px 20px rgba(0,0,0,.2);
+$shadow-inset = inset 0 3px 5px rgba(0,0,0,0.05);
+
+// icons
+$icon-font-family = "flat-icon";
+$icon-size = 16px;
+// common icon vars
+$icon-drop-down = "\f002"; // drop down icons
+$icon-drop-up = "\f003";
+$icon-drop-right = "\f001";
+$icon-drop-left = "\f000";
+$icon-expand = "\f006"; // accordion and title panes
+$icon-collapse = "\f007";
+$icon-expand-collapse-size = 18px;
+$icon-error = "\f017"; // validation error
diff --git a/lib/flat/variables_material_colors.styl b/lib/flat/variables_material_colors.styl
new file mode 100644
index 000000000..5d53d8a99
--- /dev/null
+++ b/lib/flat/variables_material_colors.styl
@@ -0,0 +1,279 @@
+// google material colors
+// https://www.google.com/design/spec/style/color.html
+
+$white = #ffffff;
+
+$black = #000000;
+
+$red-50 = #ffebee;
+$red-100 = #ffcdd2;
+$red-200 = #ef9a9a;
+$red-300 = #e57373;
+$red-400 = #ef5350;
+$red-500 = #f44336;
+$red-600 = #e53935;
+$red-700 = #d32f2f;
+$red-800 = #c62828;
+$red-900 = #b71c1c;
+$red-a100 = #ff8a80;
+$red-a200 = #ff5252;
+$red-a400 = #ff1744;
+$red-a700 = #d50000;
+
+$pink-50 = #fce4ec;
+$pink-100 = #f8bbd0;
+$pink-200 = #f48fb1;
+$pink-300 = #f06292;
+$pink-400 = #ec407a;
+$pink-500 = #e91e63;
+$pink-600 = #d81b60;
+$pink-700 = #c2185b;
+$pink-800 = #ad1457;
+$pink-900 = #880e4f;
+$pink-a100 = #ff80ab;
+$pink-a200 = #ff4081;
+$pink-a400 = #f50057;
+$pink-a700 = #c51162;
+
+$purple-50 = #f3e5f5;
+$purple-100 = #e1bee7;
+$purple-200 = #ce93d8;
+$purple-300 = #ba68c8;
+$purple-400 = #ab47bc;
+$purple-500 = #9c27b0;
+$purple-600 = #8e24aa;
+$purple-700 = #7b1fa2;
+$purple-800 = #6a1b9a;
+$purple-900 = #4a148c;
+$purple-a100 = #ea80fc;
+$purple-a200 = #e040fb;
+$purple-a400 = #d500f9;
+$purple-a700 = #aa00ff;
+
+$deep-purple-50 = #ede7f6;
+$deep-purple-100 = #d1c4e9;
+$deep-purple-200 = #b39ddb;
+$deep-purple-300 = #9575cd;
+$deep-purple-400 = #7e57c2;
+$deep-purple-500 = #673ab7;
+$deep-purple-600 = #5e35b1;
+$deep-purple-700 = #512da8;
+$deep-purple-800 = #4527a0;
+$deep-purple-900 = #311b92;
+$deep-purple-a100 = #b388ff;
+$deep-purple-a200 = #7c4dff;
+$deep-purple-a400 = #651fff;
+$deep-purple-a700 = #6200ea;
+
+$indigo-50 = #e8eaf6;
+$indigo-100 = #c5cae9;
+$indigo-200 = #9fa8da;
+$indigo-300 = #7986cb;
+$indigo-400 = #5c6bc0;
+$indigo-500 = #3f51b5;
+$indigo-600 = #3949ab;
+$indigo-700 = #303f9f;
+$indigo-800 = #283593;
+$indigo-900 = #1a237e;
+$indigo-a100 = #8c9eff;
+$indigo-a200 = #536dfe;
+$indigo-a400 = #3d5afe;
+$indigo-a700 = #304ffe;
+
+$blue-50 = #e3f2fd;
+$blue-100 = #bbdefb;
+$blue-200 = #90caf9;
+$blue-300 = #64b5f6;
+$blue-400 = #42a5f5;
+$blue-500 = #2196f3;
+$blue-600 = #1e88e5;
+$blue-700 = #1976d2;
+$blue-800 = #1565c0;
+$blue-900 = #0d47a1;
+$blue-a100 = #82b1ff;
+$blue-a200 = #448aff;
+$blue-a400 = #2979ff;
+$blue-a700 = #2962ff;
+
+$light-blue-50 = #e1f5fe;
+$light-blue-100 = #b3e5fc;
+$light-blue-200 = #81d4fa;
+$light-blue-300 = #4fc3f7;
+$light-blue-400 = #29b6f6;
+$light-blue-500 = #03a9f4;
+$light-blue-600 = #039be5;
+$light-blue-700 = #0288d1;
+$light-blue-800 = #0277bd;
+$light-blue-900 = #01579b;
+$light-blue-a100 = #80d8ff;
+$light-blue-a200 = #40c4ff;
+$light-blue-a400 = #00b0ff;
+$light-blue-a700 = #0091ea;
+
+$cyan-50 = #e0f7fa;
+$cyan-100 = #b2ebf2;
+$cyan-200 = #80deea;
+$cyan-300 = #4dd0e1;
+$cyan-400 = #26c6da;
+$cyan-500 = #00bcd4;
+$cyan-600 = #00acc1;
+$cyan-700 = #0097a7;
+$cyan-800 = #00838f;
+$cyan-900 = #006064;
+$cyan-a100 = #84ffff;
+$cyan-a200 = #18ffff;
+$cyan-a400 = #00e5ff;
+$cyan-a700 = #00b8d4;
+
+$teal-50 = #e0f2f1;
+$teal-100 = #b2dfdb;
+$teal-200 = #80cbc4;
+$teal-300 = #4db6ac;
+$teal-400 = #26a69a;
+$teal-500 = #009688;
+$teal-600 = #00897b;
+$teal-700 = #00796b;
+$teal-800 = #00695c;
+$teal-900 = #004d40;
+$teal-a100 = #a7ffeb;
+$teal-a200 = #64ffda;
+$teal-a400 = #1de9b6;
+$teal-a700 = #00bfa5;
+
+$green-50 = #e8f5e9;
+$green-100 = #c8e6c9;
+$green-200 = #a5d6a7;
+$green-300 = #81c784;
+$green-400 = #66bb6a;
+$green-500 = #4caf50;
+$green-600 = #43a047;
+$green-700 = #388e3c;
+$green-800 = #2e7d32;
+$green-900 = #1b5e20;
+$green-a100 = #b9f6ca;
+$green-a200 = #69f0ae;
+$green-a400 = #00e676;
+$green-a700 = #00c853;
+
+$light-green-50 = #f1f8e9;
+$light-green-100 = #dcedc8;
+$light-green-200 = #c5e1a5;
+$light-green-300 = #aed581;
+$light-green-400 = #9ccc65;
+$light-green-500 = #8bc34a;
+$light-green-600 = #7cb342;
+$light-green-700 = #689f38;
+$light-green-800 = #558b2f;
+$light-green-900 = #33691e;
+$light-green-a100 = #ccff90;
+$light-green-a200 = #b2ff59;
+$light-green-a400 = #76ff03;
+$light-green-a700 = #64dd17;
+
+$lime-50 = #f9fbe7;
+$lime-100 = #f0f4c3;
+$lime-200 = #e6ee9c;
+$lime-300 = #dce775;
+$lime-400 = #d4e157;
+$lime-500 = #cddc39;
+$lime-600 = #c0ca33;
+$lime-700 = #afb42b;
+$lime-800 = #9e9d24;
+$lime-900 = #827717;
+$lime-a100 = #f4ff81;
+$lime-a200 = #eeff41;
+$lime-a400 = #c6ff00;
+$lime-a700 = #aeea00;
+
+$yellow-50 = #fffde7;
+$yellow-100 = #fff9c4;
+$yellow-200 = #fff59d;
+$yellow-300 = #fff176;
+$yellow-400 = #ffee58;
+$yellow-500 = #ffeb3b;
+$yellow-600 = #fdd835;
+$yellow-700 = #fbc02d;
+$yellow-800 = #f9a825;
+$yellow-900 = #f57f17;
+$yellow-a100 = #ffff8d;
+$yellow-a200 = #ffff00;
+$yellow-a400 = #ffea00;
+$yellow-a700 = #ffd600;
+
+$amber-50 = #fff8e1;
+$amber-100 = #ffecb3;
+$amber-200 = #ffe082;
+$amber-300 = #ffd54f;
+$amber-400 = #ffca28;
+$amber-500 = #ffc107;
+$amber-600 = #ffb300;
+$amber-700 = #ffa000;
+$amber-800 = #ff8f00;
+$amber-900 = #ff6f00;
+$amber-a100 = #ffe57f;
+$amber-a200 = #ffd740;
+$amber-a400 = #ffc400;
+$amber-a700 = #ffab00;
+
+$orange-50 = #fff3e0;
+$orange-100 = #ffe0b2;
+$orange-200 = #ffcc80;
+$orange-300 = #ffb74d;
+$orange-400 = #ffa726;
+$orange-500 = #ff9800;
+$orange-600 = #fb8c00;
+$orange-700 = #f57c00;
+$orange-800 = #ef6c00;
+$orange-900 = #e65100;
+$orange-a100 = #ffd180;
+$orange-a200 = #ffab40;
+$orange-a400 = #ff9100;
+$orange-a700 = #ff6d00;
+
+$deep-orange-50 = #fbe9e7;
+$deep-orange-100 = #ffccbc;
+$deep-orange-200 = #ffab91;
+$deep-orange-300 = #ff8a65;
+$deep-orange-400 = #ff7043;
+$deep-orange-500 = #ff5722;
+$deep-orange-600 = #f4511e;
+$deep-orange-700 = #e64a19;
+$deep-orange-800 = #d84315;
+$deep-orange-900 = #bf360c;
+$deep-orange-a100 = #ff9e80;
+$deep-orange-a200 = #ff6e40;
+$deep-orange-a400 = #ff3d00;
+$deep-orange-a700 = #dd2c00;
+
+$brown-50 = #efebe9;
+$brown-100 = #d7ccc8;
+$brown-200 = #bcaaa4;
+$brown-300 = #a1887f;
+$brown-400 = #8d6e63;
+$brown-500 = #795548;
+$brown-600 = #6d4c41;
+$brown-700 = #5d4037;
+$brown-800 = #4e342e;
+$brown-900 = #3e2723;
+
+$grey-50 = #fafafa;
+$grey-100 = #f5f5f5;
+$grey-200 = #eeeeee;
+$grey-300 = #e0e0e0;
+$grey-400 = #bdbdbd;
+$grey-500 = #9e9e9e;
+$grey-600 = #757575;
+$grey-700 = #616161;
+$grey-800 = #424242;
+$grey-900 = #212121;
+
+$blue-grey-50 = #eceff1;
+$blue-grey-100 = #cfd8dc;
+$blue-grey-200 = #b0bec5;
+$blue-grey-300 = #90a4ae;
+$blue-grey-400 = #78909c;
+$blue-grey-500 = #607d8b;
+$blue-grey-600 = #546e7a;
+$blue-grey-700 = #455a64;
+$blue-grey-800 = #37474f;
+$blue-grey-900 = #263238;