Initial commit of intern.ccwn.org contentsHEADmaster

35 files changed, 2355 insertions, 0 deletions

diff --git a/js/dojo/dijit/themes/claro/form/Button.css b/js/dojo/dijit/themes/claro/form/Button.css
new file mode 100644
index 0000000..bc7c3dc
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/Button.css
@@ -0,0 +1,162 @@
+/* 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 
+ */
+.claro .dijitButtonNode {
+  /* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */
+
+  -webkit-transition-property: background-color;
+  -moz-transition-property: background-color;
+  transition-property: background-color;
+  -webkit-transition-duration: 0.3s;
+  -moz-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+}
+.claro .dijitButton .dijitButtonNode,
+.claro .dijitDropDownButton .dijitButtonNode,
+.claro .dijitComboButton .dijitButtonNode,
+.claro .dijitToggleButton .dijitButtonNode {
+  /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */
+
+  border: 1px solid #759dc0;
+  padding: 2px 4px 4px 4px;
+  background-image: url("../form/images/button.png");
+  background-position: center top;
+  background-repeat: repeat-x;
+  background-color: #e5f2fe;
+  color: #000000;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+}
+.claro .dijitComboButton .dijitArrowButton {
+  border-left-width: 0;
+  padding: 4px 2px 4px 2px;
+  /* TODO: still needed? */
+
+}
+/*arrow styles for down/up/left/right directions*/
+.claro .dijitArrowButtonInner {
+  width: 15px;
+  height: 15px;
+  margin: 0 auto;
+  background-image: url("../form/images/buttonArrows.png");
+  background-repeat: no-repeat;
+  background-position: -51px 53%;
+}
+.claro .dijitLeftArrowButton .dijitArrowButtonInner {
+  background-position: -77px 53%;
+}
+.claro .dijitRightArrowButton .dijitArrowButtonInner {
+  background-position: -26px 53%;
+}
+.claro .dijitUpArrowButton .dijitArrowButtonInner {
+  background-position: 0 53%;
+}
+.claro .dijitDisabled .dijitArrowButtonInner {
+  background-position: -151px 53%;
+}
+.claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner {
+  background-position: -177px 53%;
+}
+.claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner {
+  background-position: -126px 53%;
+}
+.claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner {
+  background-position: -100px 53%;
+}
+.claro .dijitButtonText {
+  padding: 0 0.3em;
+  text-align: center;
+}
+/* hover status */
+.claro .dijitButtonHover .dijitButtonNode,
+.claro .dijitDropDownButtonHover .dijitButtonNode,
+.claro .dijitComboButton .dijitButtonNodeHover,
+.claro .dijitComboButton .dijitDownArrowButtonHover,
+.claro .dijitToggleButtonHover .dijitButtonNode {
+  background-color: #abd6ff;
+  color: #000000;
+  -webkit-transition-duration: 0.2s;
+  -moz-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+}
+/* active, checked status */
+.claro .dijitButtonActive .dijitButtonNode,
+.claro .dijitDropDownButtonActive .dijitButtonNode,
+.claro .dijitComboButtonActive .dijitButtonNode,
+.claro .dijitToggleButtonActive .dijitButtonNode,
+.claro .dijitStackController .dijitToggleButtonChecked .dijitButtonNode {
+  background-color: #abd6ff;
+  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  -webkit-transition-duration: 0.1s;
+  -moz-transition-duration: 0.1s;
+  transition-duration: 0.1s;
+}
+/* disabled status */
+.claro .dijitButtonDisabled,
+.claro .dijitDropDownButtonDisabled,
+.claro .dijitComboButtonDisabled,
+.claro .dijitToggleButtonDisabled {
+  background-image: none;
+  outline: none;
+}
+.claro .dijitButtonDisabled .dijitButtonNode,
+.claro .dijitDropDownButtonDisabled .dijitButtonNode,
+.claro .dijitComboButtonDisabled .dijitButtonNode,
+.claro .dijitToggleButtonDisabled .dijitButtonNode {
+  background-position: 0 -149px;
+  background-color: #efefef;
+  border: solid 1px #d3d3d3;
+  color: #818181;
+  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+}
+.claro .dijitComboButtonDisabled .dijitArrowButton {
+  border-left-width: 0;
+}
+/* for ComboButton */
+.claro table.dijitComboButton {
+  border-collapse: separate;
+  /* override dijit.css so that ComboBox rounded corners work */
+
+}
+.dj_ie6 .claro .dijitButtonNode {
+  background-image: none;
+}
+.claro .dijitComboButton .dijitStretch {
+  -moz-border-radius: 4px 0 0 4px;
+  border-radius: 4px 0 0 4px;
+}
+.claro .dijitComboButton .dijitArrowButton {
+  -moz-border-radius: 0 4px 4px 0;
+  border-radius: 0 4px 4px 0;
+}
diff --git a/js/dojo/dijit/themes/claro/form/Button.less b/js/dojo/dijit/themes/claro/form/Button.less
new file mode 100644
index 0000000..208e4de
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/Button.less
@@ -0,0 +1,156 @@
+/* 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 "../variables";
+
+.claro .dijitButtonNode {
+	/* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */
+	.transition-property(background-color);
+ 	.transition-duration(.3s);
+}
+
+.claro .dijitButton .dijitButtonNode,
+.claro .dijitDropDownButton .dijitButtonNode,
+.claro .dijitComboButton .dijitButtonNode,
+.claro .dijitToggleButton .dijitButtonNode {
+	/* rules for the dijit.form.*Button widgets (see also ComboButton section below) */
+	border: 1px solid @button-border-color;
+	padding:2px 4px 4px 4px;
+	background-image: url("../@{image-form-button}");
+	background-position: center top;
+	background-repeat: repeat-x;
+	background-color: @button-background-color;
+	color: @text-color;
+	.border-radius(@button-border-radius);
+	.box-shadow(0 1px 1px rgba(0,0,0,0.15));
+}
+
+.claro .dijitComboButton .dijitArrowButton {
+	border-left-width: 0;
+	padding: 4px 2px 4px 2px;	/* TODO: still needed? */
+}
+
+/*arrow styles for down/up/left/right directions*/
+.claro .dijitArrowButtonInner {
+	width: 15px;
+	height: 15px;
+	margin: 0 auto;
+	background-image:url("../@{image-form-button-arrows}");
+	background-repeat:no-repeat;
+	background-position:-51px 53%;
+}
+.claro .dijitLeftArrowButton .dijitArrowButtonInner {
+	background-position: -77px 53%;
+}
+.claro .dijitRightArrowButton .dijitArrowButtonInner {
+	background-position: -26px 53%;
+}
+.claro .dijitUpArrowButton .dijitArrowButtonInner {
+	background-position: 0 53%;
+}
+.claro .dijitDisabled .dijitArrowButtonInner {
+	background-position: -151px 53%;
+}
+.claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner {
+	background-position: -177px 53%;
+}
+.claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner {
+	background-position: -126px 53%;
+}
+.claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner {
+	background-position: -100px 53%;
+}
+
+.claro .dijitButtonText {
+	padding: 0 0.3em;
+	text-align: center;
+}
+
+
+
+
+
+/* hover status */
+.claro .dijitButtonHover .dijitButtonNode,
+.claro .dijitDropDownButtonHover .dijitButtonNode,
+.claro .dijitComboButton .dijitButtonNodeHover, 
+.claro .dijitComboButton .dijitDownArrowButtonHover,
+.claro .dijitToggleButtonHover .dijitButtonNode {
+	background-color: @button-hovered-background-color;
+	color:@text-color;
+ 	.transition-duration(.2s);
+}
+
+/* active, checked status */
+.claro .dijitButtonActive .dijitButtonNode, 
+.claro .dijitDropDownButtonActive .dijitButtonNode,
+.claro .dijitComboButtonActive .dijitButtonNode,
+.claro .dijitToggleButtonActive .dijitButtonNode,
+.claro .dijitStackController .dijitToggleButtonChecked .dijitButtonNode {
+	background-color: @button-pressed-background-color;
+	.box-shadow(0 0 0 rgba(0,0,0,0));
+ 	.transition-duration(.1s);
+}
+
+/* disabled status */
+.claro .dijitButtonDisabled,
+.claro .dijitDropDownButtonDisabled,
+.claro .dijitComboButtonDisabled,
+.claro .dijitToggleButtonDisabled {
+	background-image: none;
+	outline: none;
+}
+
+.claro .dijitButtonDisabled .dijitButtonNode,
+.claro .dijitDropDownButtonDisabled .dijitButtonNode,
+.claro .dijitComboButtonDisabled .dijitButtonNode,
+.claro .dijitToggleButtonDisabled .dijitButtonNode { 
+	background-position:0 -149px;
+	background-color: @disabled-background-color;
+	border: solid 1px @disabled-border-color;
+	color: @disabled-text-color;
+	.box-shadow(0 0 0 rgba(0,0,0,0));
+}
+.claro .dijitComboButtonDisabled .dijitArrowButton{ 
+	border-left-width: 0;
+}
+/* for ComboButton */
+.claro table.dijitComboButton {
+	border-collapse: separate;	/* override dijit.css so that ComboBox rounded corners work */
+}
+
+.dj_ie6 .claro .dijitButtonNode {
+	background-image: none;
+}
+
+.claro .dijitComboButton .dijitStretch {
+	.border-radius(@button-border-radius 0 0 @button-border-radius);
+}
+.claro .dijitComboButton .dijitArrowButton {
+	.border-radius(0 @button-border-radius @button-border-radius 0);
+}
diff --git a/js/dojo/dijit/themes/claro/form/Button_rtl.css b/js/dojo/dijit/themes/claro/form/Button_rtl.css
new file mode 100644
index 0000000..2d5b08b
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/Button_rtl.css
@@ -0,0 +1,13 @@
+/* Combo Button */
+.claro .dijitComboButtonRtl .dijitStretch {
+  -moz-border-radius: 0 4px 4px 0;
+  border-radius: 0 4px 4px 0;
+}
+.claro .dijitComboButtonRtl .dijitArrowButton {
+  -moz-border-radius: 4px 0 0 4px;
+  border-radius: 4px 0 0 4px;
+  padding: 3px 0 4px;
+  border-left-width: 1px;
+  border-right-width: 0;
+}
+/* End Combo Button */
\ No newline at end of file
diff --git a/js/dojo/dijit/themes/claro/form/Button_rtl.less b/js/dojo/dijit/themes/claro/form/Button_rtl.less
new file mode 100644
index 0000000..6225d68
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/Button_rtl.less
@@ -0,0 +1,16 @@
+@import "../variables";
+
+/* Combo Button */
+
+.claro .dijitComboButtonRtl .dijitStretch {
+	.border-radius(0 @button-border-radius @button-border-radius 0);
+}
+
+.claro .dijitComboButtonRtl .dijitArrowButton {
+	.border-radius(@button-border-radius 0 0  @button-border-radius);
+	padding:3px 0 4px;
+	border-left-width: 1px;
+	border-right-width: 0;
+}
+
+/* End Combo Button */
\ No newline at end of file
diff --git a/js/dojo/dijit/themes/claro/form/Checkbox.css b/js/dojo/dijit/themes/claro/form/Checkbox.css
new file mode 100644
index 0000000..1c1a3c4
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/Checkbox.css
@@ -0,0 +1,71 @@
+/* CheckBox
+ * 
+ * Styling CheckBox mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitCheckBox|.dijitCheckBoxIcon - for border, padding, width|height and background image
+ * 
+ * 2. CheckBox within ToggleButton
+ * 		.dijitToggleButton|.dijitToggleButtonChecked .* - for background image
+ * 
+ * 3. Checked state
+ * 		.dijitCheckBoxChecked - for checked background-color|image
+ * 		.dijitToggleButtonChecked - for border, background-color|image, display and width|height
+ * 
+ * 4. Hover state
+ * 		.dijitCheckBoxHover|.dijitCheckBoxCheckedHover - for background image
+ * 
+ * 5. Disabled state
+ * 		.dijitCheckBoxDisabled|.dijitCheckBoxCheckedDisabled - for background image
+ */
+.claro .dijitToggleButton .dijitCheckBoxIcon {
+  background-image: url("../images/checkmarkNoBorder.png");
+}
+.dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon {
+  background-image: url("../images/checkmarkNoBorder.gif");
+}
+.claro .dijitCheckBox, .claro .dijitCheckBoxIcon {
+  background-image: url("../form/images/checkboxRadioButtonStates.png");
+  /* checkbox sprite image */
+
+  background-repeat: no-repeat;
+  width: 15px;
+  height: 16px;
+  margin: 0 2px 0 0;
+  padding: 0;
+}
+.dj_ie6 .claro .dijitCheckBox, .dj_ie6 .claro .dijitCheckBoxIcon {
+  background-image: url("../form/images/checkboxAndRadioButtons_IE6.png");
+  /* checkbox sprite image */
+
+}
+.claro .dijitCheckBox, .claro .dijitToggleButton .dijitCheckBoxIcon {
+  /* unchecked */
+
+  background-position: -15px;
+}
+.claro .dijitCheckBoxChecked, .claro .dijitToggleButtonChecked .dijitCheckBoxIcon {
+  /* checked */
+
+  background-position: 0;
+}
+.claro .dijitCheckBoxDisabled {
+  /* disabled */
+
+  background-position: -75px;
+}
+.claro .dijitCheckBoxCheckedDisabled {
+  /* disabled but checked */
+
+  background-position: -60px;
+}
+.claro .dijitCheckBoxHover {
+  /* hovering over an unchecked enabled checkbox */
+
+  background-position: -45px;
+}
+.claro .dijitCheckBoxCheckedHover {
+  /* hovering over an checked enabled checkbox */
+
+  background-position: -30px;
+}
diff --git a/js/dojo/dijit/themes/claro/form/Checkbox.less b/js/dojo/dijit/themes/claro/form/Checkbox.less
new file mode 100644
index 0000000..6ce4448
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/Checkbox.less
@@ -0,0 +1,79 @@
+/* CheckBox
+ * 
+ * Styling CheckBox mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitCheckBox|.dijitCheckBoxIcon - for border, padding, width|height and background image
+ * 
+ * 2. CheckBox within ToggleButton
+ * 		.dijitToggleButton|.dijitToggleButtonChecked .* - for background image
+ * 
+ * 3. Checked state
+ * 		.dijitCheckBoxChecked - for checked background-color|image
+ * 		.dijitToggleButtonChecked - for border, background-color|image, display and width|height
+ * 
+ * 4. Hover state
+ * 		.dijitCheckBoxHover|.dijitCheckBoxCheckedHover - for background image
+ * 
+ * 5. Disabled state
+ * 		.dijitCheckBoxDisabled|.dijitCheckBoxCheckedDisabled - for background image
+ */
+
+@import "../variables";
+
+.claro .dijitToggleButton .dijitCheckBoxIcon {
+	background-image: url("../@{image-checkmark}");
+}
+
+.dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon {
+	background-image: url("../@{image-checkmark-ie6}");
+}
+
+.claro .dijitCheckBox,
+.claro .dijitCheckBoxIcon		/* inside a toggle button */	{
+	background-image: url("../@{image-form-checkbox-and-radios}"); /* checkbox sprite image */
+	background-repeat: no-repeat;
+	width: 15px;
+	height: 16px;
+	margin: 0 2px 0 0;
+	padding: 0;
+}
+
+.dj_ie6 .claro .dijitCheckBox,
+.dj_ie6 .claro .dijitCheckBoxIcon		/* inside a toggle button */	{
+	background-image: url("../@{image-form-checkbox-and-radios-ie6}"); /* checkbox sprite image */
+}
+
+.claro .dijitCheckBox,
+.claro .dijitToggleButton .dijitCheckBoxIcon {
+	/* unchecked */
+	background-position: -15px;
+}
+
+.claro .dijitCheckBoxChecked,
+.claro .dijitToggleButtonChecked .dijitCheckBoxIcon {
+	/* checked */
+	background-position: -0;
+}
+
+.claro .dijitCheckBoxDisabled {
+	/* disabled */
+	background-position: -75px;
+}
+
+.claro .dijitCheckBoxCheckedDisabled {
+	/* disabled but checked */
+	background-position: -60px;
+}
+
+.claro .dijitCheckBoxHover {
+	/* hovering over an unchecked enabled checkbox */
+	background-position: -45px;
+}
+
+.claro .dijitCheckBoxCheckedHover {
+	/* hovering over an checked enabled checkbox */
+	background-position: -30px;
+}
+
+
diff --git a/js/dojo/dijit/themes/claro/form/Common.css b/js/dojo/dijit/themes/claro/form/Common.css
new file mode 100644
index 0000000..ce108c1
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/Common.css
@@ -0,0 +1,178 @@
+/* claro/form/Common.css */
+/*========================= common css =========================*/
+/* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' */
+.claro .dijitTextBox, .claro .dijitInputInner {
+  color: #000000;
+}
+.claro .dijitTextBoxError .dijitValidationContainer {
+  background-color: #d46464;
+  background-image: url("../form/images/error.png");
+  background-position: top center;
+  border: solid #d46464 0;
+  border-left-width: 1px;
+  width: 9px;
+}
+.claro .dijitTextBoxError .dijitValidationIcon {
+  width: 0;
+  background-color: transparent !important;
+  /* so the INPUT doesn't obscure the border in rtl+a11y */
+
+}
+/* Padding for the input area of TextBox based widgets, and corresponding padding for the
+ * down arrow button and the placeholder.   placeholder is explicitly listed  because
+ * dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField
+ * won't affect it
+ */
+.claro .dijitTextArea, .claro .dijitInputField .dijitPlaceHolder {
+  padding: 2px;
+}
+.claro .dijitTextBox .dijitInputField {
+  padding: 1px 2px;
+}
+.dj_gecko .claro .dijitTextBox .dijitInputInner, .dj_webkit .claro .dijitTextBox .dijitInputInner {
+  padding: 1px;
+}
+.claro .dijitTextBox, .claro .dijitTextBox .dijitButtonNode {
+  /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */
+
+  border-color: #b5bcc7;
+  -webkit-transition-property: background-color, border;
+  -moz-transition-property: background-color, border;
+  transition-property: background-color, border;
+  -webkit-transition-duration: 0.35s;
+  -moz-transition-duration: 0.35s;
+  transition-duration: 0.35s;
+}
+.claro .dijitTextBox {
+  background-color: #ffffff;
+}
+/* hover */
+.claro .dijitTextBoxHover, .claro .dijitTextBoxHover .dijitButtonNode {
+  border-color: #759dc0;
+  -webkit-transition-duration: 0.25s;
+  -moz-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+}
+.claro .dijitTextBoxHover {
+  background-color: #e5f2fe;
+  background-image: url("../form/images/textBox_back.png");
+  background-repeat: repeat-x;
+}
+/* error state */
+.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitButtonNode {
+  border-color: #d46464;
+}
+.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitInputContainer {
+  background-color: #ffffff;
+}
+/* focused state */
+.claro .dijitTextBoxFocused, .claro .dijitTextBoxFocused .dijitButtonNode {
+  border-color: #759dc0;
+  -webkit-transition-duration: 0.1s;
+  -moz-transition-duration: 0.1s;
+  transition-duration: 0.1s;
+}
+.claro .dijitTextBoxFocused {
+  background-color: #ffffff;
+  background-image: url("../form/images/textBox_back.png");
+  background-repeat: repeat-x;
+}
+.claro .dijitTextBoxFocused .dijitInputContainer {
+  background: #ffffff;
+}
+.claro .dijitTextBoxErrorFocused, .claro .dijitTextBoxErrorFocused .dijitButtonNode {
+  border-color: #ce5050;
+}
+/* disabled state */
+.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitButtonNode {
+  border-color: #d3d3d3;
+}
+.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer {
+  background-color: #efefef;
+  background-image: none;
+}
+.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputInner {
+  color: #818181;
+}
+.dj_webkit .claro .dijitTextBoxDisabled input {
+  /* because WebKit lightens disabled input/textarea no matter what color you specify */
+
+  color: #757575;
+}
+.dj_webkit .claro textarea.dijitTextAreaDisabled {
+  /* because WebKit lightens disabled input/textarea no matter what color you specify */
+
+  color: #1b1b1b;
+}
+/*========================= for special widgets =========================*/
+/* Input boxes with an arrow (for a drop down) */
+.claro .dijitComboBox .dijitArrowButtonInner {
+  background-image: url("../form/images/commonFormArrows.png");
+  background-position: -35px 53%;
+  background-repeat: no-repeat;
+  margin: 0;
+  width: 16px;
+  border: 1px solid #ffffff;
+}
+.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
+  border: none;
+}
+.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
+  border: none;
+}
+/* Add 1px vertical padding to the <input> where user types and the validation icon,
+   to match the 1px border on arrow button */
+.claro .dijitTextBox .dijitInputInner, .claro .dijitTextBox .dijitValidationContainer {
+  padding: 1px 0;
+}
+.claro .dijitComboBox .dijitButtonNode {
+  background-color: #efefef;
+  background-image: url("../form/images/formHighlight.png");
+  background-repeat: repeat-x;
+}
+/* Arrow "hover" effect:
+ * The arrow button should change color whenever the mouse is in a position such that clicking it
+ * will toggle the drop down.   That's either (1) anywhere over the ComboBox or (2) over the arrow
+ * button, depending on the openOnClick setting for the widget.
+ */
+.claro .dijitComboBoxOpenOnClickHover .dijitButtonNode, .claro .dijitComboBox .dijitDownArrowButtonHover {
+  background-color: #abd6ff;
+}
+.claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner, .claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner {
+  background-position: -70px 53%;
+}
+/* Arrow Button change when drop down is open */
+.claro .dijitComboBox .dijitHasDropDownOpen {
+  background-color: #7dbdfa;
+  background-position: 0 -177px;
+  padding: 1px;
+}
+.claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
+  background-position: -70px 53%;
+  border: 0 none;
+}
+/* disabled state */
+.claro div.dijitComboBoxDisabled .dijitArrowButtonInner {
+  /* specific selector set to override background-position setting from Button.js
+	 * (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) */
+
+  background-position: 0 50%;
+  background-color: #efefef;
+}
+/*========================= hacks for browsers =========================*/
+/* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calculate error */
+.dj_ff3 .claro .dijitInputField input[type="hidden"] {
+  display: none;
+  height: 0;
+  width: 0;
+}
+/* ie6 doesn't support transparent background img */
+.dj_ie6 .claro .dijitTextBox, .dj_ie6 .claro .dijitComboBox .dijitButtonNode {
+  background-image: none;
+}
+.dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
+  width: 18px;
+}
+.dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner {
+  width: 16px;
+}
diff --git a/js/dojo/dijit/themes/claro/form/Common.less b/js/dojo/dijit/themes/claro/form/Common.less
new file mode 100644
index 0000000..742a43f
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/Common.less
@@ -0,0 +1,212 @@
+/* claro/form/Common.css */
+
+/*========================= common css =========================*/
+
+@import "../variables";
+
+/* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' */
+
+.claro .dijitTextBox,
+.claro .dijitInputInner {
+    // .dijitInputInner selector needed for ValidationTextBox on IE6 because <input> doesn't inherit
+    // the color setting from the ancestor div.dijitTextBox
+	color: @text-color;
+}
+
+.claro .dijitTextBoxError .dijitValidationContainer {
+	background-color: @erroricon-background-color;
+	background-image: url("../@{image-form-error}");
+	background-position: top center;
+	border: solid @erroricon-background-color 0;
+	border-left-width: 1px;
+	width: 9px;
+}
+.claro .dijitTextBoxError .dijitValidationIcon {
+	width: 0;
+	background-color: transparent !important; /* so the INPUT doesn't obscure the border in rtl+a11y */
+}
+
+/* Padding for the input area of TextBox based widgets, and corresponding padding for the
+ * down arrow button and the placeholder.   placeholder is explicitly listed  because
+ * dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField
+ * won't affect it
+ */
+.claro .dijitTextArea,
+.claro .dijitInputField .dijitPlaceHolder {
+	padding: @textbox-padding;
+}
+.claro .dijitTextBox .dijitInputField {
+	// Subtract 1px from top/bottom because we add 1px to other nodes, see rules below.
+	// Although we are theoretically only adding 1px to top/bottom browsers seem to pad inputs by 1px on left/right,
+	// although that varies by so compensate for that too.
+	padding: @textbox-padding - 1px  @textbox-padding;
+}
+.dj_gecko .claro .dijitTextBox .dijitInputInner,
+.dj_webkit .claro .dijitTextBox .dijitInputInner {
+	// Although we are theoretically only adding 1px to top/bottom, some browsers seem to pad inputs by 1px on left/right,
+	// so compensate for that too.
+	padding: @textbox-padding - 1px;
+}
+
+.claro .dijitTextBox,
+.claro .dijitTextBox .dijitButtonNode {
+	/* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */
+	border-color: @border-color;
+	.transition-property(background-color, border);
+ 	.transition-duration(.35s);
+}
+.claro .dijitTextBox {
+	background-color: @textbox-background-color;
+}
+
+/* hover */
+.claro .dijitTextBoxHover,
+.claro .dijitTextBoxHover .dijitButtonNode {
+	border-color: @hovered-border-color;
+ 	.transition-duration(.25s);
+}
+.claro .dijitTextBoxHover {
+	background-color: @textbox-hovered-background-color;
+	background-image: url("../@{image-form-textbox-background}");
+	background-repeat: repeat-x;
+}
+
+/* error state */
+.claro .dijitTextBoxError,
+.claro .dijitTextBoxError .dijitButtonNode {
+	border-color: @error-border-color;
+}
+.claro .dijitTextBoxError,
+.claro .dijitTextBoxError .dijitInputContainer {
+	background-color: @textbox-error-background-color;
+}
+
+/* focused state */
+.claro .dijitTextBoxFocused,
+.claro .dijitTextBoxFocused .dijitButtonNode {
+	border-color:@focused-border-color;
+ 	.transition-duration(.1s);
+}
+.claro .dijitTextBoxFocused {
+	background-color: @textbox-focused-background-color;
+	background-image: url("../@{image-form-textbox-background}");
+	background-repeat: repeat-x;
+}
+.claro .dijitTextBoxFocused .dijitInputContainer {
+	background: @textbox-focused-background-color;
+}
+
+.claro .dijitTextBoxErrorFocused,
+.claro .dijitTextBoxErrorFocused .dijitButtonNode {
+	border-color: @error-focused-border-color;
+}
+
+/* disabled state */
+.claro .dijitTextBoxDisabled,
+.claro .dijitTextBoxDisabled .dijitButtonNode {
+	border-color: @disabled-border-color;
+}
+.claro .dijitTextBoxDisabled,
+.claro .dijitTextBoxDisabled .dijitInputContainer {
+	background-color: @textbox-disabled-background-color;
+	background-image: none;
+}
+.claro .dijitTextBoxDisabled,
+.claro .dijitTextBoxDisabled .dijitInputInner {
+	color: @disabled-text-color;
+}
+.dj_webkit .claro .dijitTextBoxDisabled input {
+    /* because WebKit lightens disabled input/textarea no matter what color you specify */
+	color: darken(@disabled-text-color, 5%)
+}
+.dj_webkit .claro textarea.dijitTextAreaDisabled {
+    /* because WebKit lightens disabled input/textarea no matter what color you specify */
+	color: darken(@disabled-text-color, 40%)
+}
+
+/*========================= for special widgets =========================*/
+
+/* Input boxes with an arrow (for a drop down) */
+
+.claro .dijitComboBox .dijitArrowButtonInner {
+	background-image: url("../@{image-form-common-arrows}");
+	background-position:-35px 53%;
+	background-repeat: no-repeat;
+	margin: 0;
+	width:16px;
+	border: 1px solid @arrowbutton-inner-border-color;	// white gutter around the arrow button
+}
+
+.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
+	border: none;
+}
+
+.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
+	border: none;
+}
+
+/* Add 1px vertical padding to the <input> where user types and the validation icon,
+   to match the 1px border on arrow button */
+.claro .dijitTextBox .dijitInputInner,
+.claro .dijitTextBox .dijitValidationContainer {
+	padding: 1px 0;
+}
+
+.claro .dijitComboBox .dijitButtonNode {
+	background-color: @arrowbutton-background-color;
+	background-image: url("../@{image-form-highlight}");
+	background-repeat:repeat-x;
+}
+
+/* Arrow "hover" effect:
+ * The arrow button should change color whenever the mouse is in a position such that clicking it
+ * will toggle the drop down.   That's either (1) anywhere over the ComboBox or (2) over the arrow
+ * button, depending on the openOnClick setting for the widget.
+ */
+.claro .dijitComboBoxOpenOnClickHover .dijitButtonNode,
+.claro .dijitComboBox .dijitDownArrowButtonHover {
+	background-color:@arrowbutton-hovered-background-color;
+}
+.claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner,
+.claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner {
+	background-position:-70px 53%;
+}
+
+/* Arrow Button change when drop down is open */
+.claro .dijitComboBox .dijitHasDropDownOpen {	// .dijitHasDropDown is on dijitArrowButton node
+	background-color: @pressed-background-color;
+	background-position:0 -177px;
+	padding: 1px;		// Since no border on arrow button (see rule below)
+}	
+.claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
+	background-position:-70px 53%;
+	border: 0 none;
+}
+
+/* disabled state */
+.claro div.dijitComboBoxDisabled .dijitArrowButtonInner {
+	/* specific selector set to override background-position setting from Button.js
+	 * (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) */
+	background-position:0 50%;
+	background-color:@disabled-background-color;
+}
+
+/*========================= hacks for browsers =========================*/
+/* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calculate error */
+.dj_ff3 .claro .dijitInputField input[type="hidden"] {
+	display: none;
+	height: 0;
+	width: 0;
+}
+
+/* ie6 doesn't support transparent background img */
+.dj_ie6 .claro .dijitTextBox,
+.dj_ie6 .claro .dijitComboBox .dijitButtonNode {
+	background-image: none;
+}
+.dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
+	width:18px;				// quirks mode means border-box sizing, so 18px with the border (same as 16px without border)
+}
+.dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner {
+	width:16px;				// when no border, then back to 16px just like content-box sizing
+}
diff --git a/js/dojo/dijit/themes/claro/form/Common_rtl.css b/js/dojo/dijit/themes/claro/form/Common_rtl.css
new file mode 100644
index 0000000..74827c1
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/Common_rtl.css
@@ -0,0 +1,10 @@
+/* claro/form/Common_rtl.css */
+/*claro should not have the icon on the container
+.claro .dijitTextBoxRtlError .dijitValidationIcon {
+	border-left-width: 0;
+	border-right-width: 1px;
+}*/
+.claro .dijitTextBoxRtlError .dijitValidationContainer {
+  border-left-width: 0;
+  border-right-width: 1px;
+}
diff --git a/js/dojo/dijit/themes/claro/form/Common_rtl.less b/js/dojo/dijit/themes/claro/form/Common_rtl.less
new file mode 100644
index 0000000..fd4975a
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/Common_rtl.less
@@ -0,0 +1,13 @@
+/* claro/form/Common_rtl.css */
+
+@import "../variables";
+
+/*claro should not have the icon on the container
+.claro .dijitTextBoxRtlError .dijitValidationIcon {
+	border-left-width: 0;
+	border-right-width: 1px;
+}*/
+.claro .dijitTextBoxRtlError .dijitValidationContainer {
+	border-left-width: 0;
+	border-right-width: 1px;
+}
diff --git a/js/dojo/dijit/themes/claro/form/NumberSpinner.css b/js/dojo/dijit/themes/claro/form/NumberSpinner.css
new file mode 100644
index 0000000..fcc8049
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/NumberSpinner.css
@@ -0,0 +1,138 @@
+/* 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
+ */
+.claro .dijitSpinnerButtonContainer {
+  overflow: hidden;
+  position: relative;
+  width: auto;
+  padding: 0 2px;
+}
+.claro .dijitSpinnerButtonContainer .dijitSpinnerButtonInner {
+  border-width: 1px 0;
+  /* reserve space to match the claro combobox button border with border and not padding to make IE happier */
+
+  border-style: solid none;
+}
+/* button */
+.claro .dijitSpinner .dijitArrowButton {
+  width: auto;
+  background-color: #efefef;
+  background-image: url("../form/images/formHighlight.png");
+  background-position: 0 0;
+  background-repeat: repeat-x;
+  overflow: hidden;
+}
+.dj_iequirks .claro .dijitSpinner .dijitArrowButton {
+  overflow: visible;
+  /* 0 height w/o this */
+
+}
+.claro .dijitSpinner .dijitSpinnerButtonInner {
+  width: 15px;
+}
+/* up & down button icons */
+.claro .dijitSpinner .dijitArrowButtonInner {
+  border: solid 1px #ffffff;
+  border-bottom-width: 0;
+  /* 2 top borders = 1 top+bottom border in ComboBox */
+
+  background-image: url("../form/images/commonFormArrows.png");
+  background-repeat: no-repeat;
+  height: 100%;
+  width: 15px;
+  padding-left: 1px;
+  padding-right: 1px;
+  /* for up arrow */
+
+  background-position: -139px center;
+  /* override button.css (TODO: move to Common.css since ComboBox needs this too) */
+
+  display: block;
+  margin: -1px 0 -1px 0;
+  /* compensate for inner border */
+
+}
+.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner, .dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner {
+  margin-top: 0;
+  /* since its bottom aligned */
+
+}
+.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner {
+  width: 19px;
+}
+.claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner {
+  background-position: -34px;
+}
+.claro .dijitSpinner .dijitArrowButtonInner .dijitInputField {
+  padding: 0;
+}
+/** hover & focused status **/
+.claro .dijitUpArrowButtonActive, .claro .dijitDownArrowButtonActive {
+  background-color: #abd6ff;
+}
+.claro .dijitSpinner .dijitUpArrowButtonHover, .claro .dijitSpinner .dijitDownArrowButtonHover, .claro .dijitSpinnerFocused .dijitArrowButton {
+  background-color: #abd6ff;
+}
+.claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner {
+  background-position: -174px;
+}
+.claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner {
+  background-position: -69px;
+}
+.claro .dijitSpinnerFocused {
+  background-color: #ffffff;
+  background-image: none;
+}
+/* mouse down status */
+.claro .dijitSpinner .dijitDownArrowButtonActive, .claro .dijitSpinner .dijitUpArrowButtonActive {
+  background-color: #7dbefa;
+  background-position: 0 -177px;
+}
+.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {
+  /* hide inner border while button is depressed */
+
+  border: 0;
+  padding: 1px;
+  margin-right: 2px;
+  margin-bottom: 1px;
+}
+.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner {
+  background-position: -173px;
+}
+.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {
+  background-position: -68px;
+}
+/* disabled */
+.claro .dijitSpinnerDisabled .dijitArrowButtonInner {
+  background-color: #efefef;
+}
+.claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner {
+  background-position: -104px;
+}
+.claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner {
+  background-position: 1px;
+}
+/** hacks for browsers **/
+/* for IE 7, when div is enlarged, 
+ * should be no empty space between dijitInputLayoutContainer and dijitSpinner*/
+.dj_ie7 .claro .dijitSpinner {
+  overflow: visible;
+}
diff --git a/js/dojo/dijit/themes/claro/form/NumberSpinner.less b/js/dojo/dijit/themes/claro/form/NumberSpinner.less
new file mode 100644
index 0000000..1c79d3a
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/NumberSpinner.less
@@ -0,0 +1,150 @@
+/* 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 "../variables";
+
+.claro .dijitSpinnerButtonContainer {
+	overflow: hidden;
+	position: relative;
+	width: auto;
+	padding: 0 2px;
+}
+.claro .dijitSpinnerButtonContainer .dijitSpinnerButtonInner {
+	border-width: 1px 0; /* reserve space to match the claro combobox button border with border and not padding to make IE happier */
+	border-style: solid none;
+}
+
+/* button */
+.claro .dijitSpinner .dijitArrowButton {
+	width:auto;
+	background-color: @arrowbutton-background-color;
+	background-image: url("../@{image-form-highlight}");
+	background-position:0 0;
+	background-repeat:repeat-x;
+	overflow: hidden;
+}
+.dj_iequirks .claro .dijitSpinner .dijitArrowButton {
+	overflow: visible; /* 0 height w/o this */
+}
+
+.claro .dijitSpinner .dijitSpinnerButtonInner {
+	width: 15px;
+}
+/* up & down button icons */
+.claro .dijitSpinner .dijitArrowButtonInner {
+	border:solid 1px @arrowbutton-inner-border-color;
+	border-bottom-width: 0; /* 2 top borders = 1 top+bottom border in ComboBox */
+	background-image: url("../@{image-form-common-arrows}");
+	background-repeat: no-repeat;
+	height: 100%;
+	width:15px;
+	padding-left: 1px;
+	padding-right: 1px;
+
+	/* for up arrow */
+	background-position:-139px center;
+
+	/* override button.css (TODO: move to Common.css since ComboBox needs this too) */
+	display: block;
+	margin: -1px 0 -1px 0;	/* compensate for inner border */
+}
+
+.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner,
+.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner {
+	margin-top: 0; /* since its bottom aligned */
+}
+
+.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner {
+	width: 19px;
+}
+.claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner {
+	background-position:-34px;
+}
+.claro .dijitSpinner .dijitArrowButtonInner .dijitInputField {
+	padding: 0;
+}
+
+/** hover & focused status **/
+
+.claro .dijitUpArrowButtonActive,
+.claro .dijitDownArrowButtonActive {
+	background-color:@arrowbutton-pressed-background-color;
+}
+
+.claro .dijitSpinner .dijitUpArrowButtonHover,
+.claro .dijitSpinner .dijitDownArrowButtonHover,
+.claro .dijitSpinnerFocused .dijitArrowButton {
+	background-color: @arrowbutton-hovered-background-color;
+}
+
+.claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner {
+	background-position:-174px;
+}
+.claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner {
+	background-position:-69px;
+}
+
+.claro .dijitSpinnerFocused {
+	background-color: @textbox-focused-background-color;
+	background-image: none;
+}
+
+/* mouse down status */
+.claro .dijitSpinner .dijitDownArrowButtonActive,
+.claro .dijitSpinner .dijitUpArrowButtonActive {
+	background-color: #7dbefa;		// TODO.  Mailed Jason about inconsistent ComboBox/Spinner behavior.
+	background-position:0 -177px;
+}
+.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner,
+.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {
+	/* hide inner border while button is depressed */
+	border: 0;
+	padding: 1px;
+	margin-right:2px;
+	margin-bottom:1px;
+}
+.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner {
+	background-position:-173px;
+}
+.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {
+	background-position:-68px;
+}
+
+/* disabled */
+
+.claro .dijitSpinnerDisabled .dijitArrowButtonInner {
+	background-color: @disabled-background-color;
+}
+.claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner {
+	background-position:-104px;
+}
+.claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner {
+	background-position:1px;
+}
+
+/** hacks for browsers **/
+
+/* for IE 7, when div is enlarged, 
+ * should be no empty space between dijitInputLayoutContainer and dijitSpinner*/
+.dj_ie7 .claro .dijitSpinner {
+	overflow:visible;
+} 
diff --git a/js/dojo/dijit/themes/claro/form/RadioButton.css b/js/dojo/dijit/themes/claro/form/RadioButton.css
new file mode 100644
index 0000000..bad1854
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/RadioButton.css
@@ -0,0 +1,79 @@
+/* RadioButton
+ * 
+ * Styling RadioButton mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitRadio|.dijitRadioIcon - for border, padding, width|height and background image
+ * 
+ * 2. RadioButton within ToggleButton
+ * 		.dijitToggleButton|.dijitToggleButtonChecked .* - for background image
+ * 
+ * 3. Checked state
+ * 		.dijitRadioChecked - for checked background-color|image
+ * 		.dijitToggleButtonChecked - for border, background-color|image, display and width|height
+ * 
+ * 4. Hover state
+ * 		.dijitRadioHover|.dijitRadioCheckedHover - for background image
+ * 
+ * 5. Disabled state
+ * 		.dijitRadioDisabled|.dijitRadioCheckedDisabled - for background image
+ */
+.claro .dijitToggleButton .dijitRadio, .claro .dijitToggleButton .dijitRadioIcon {
+  background-image: url("../form/images/checkboxRadioButtonStates.png");
+}
+.dj_ie6 .claro .dijitToggleButton .dijitRadio, .dj_ie6 .claro .dijitToggleButton .dijitRadioIcon {
+  background-image: url("../form/images/checkboxAndRadioButtons_IE6.png");
+}
+.claro .dijitRadio, .claro .dijitRadioIcon {
+  /* inside a toggle button */
+
+  background-image: url("../form/images/checkboxRadioButtonStates.png");
+  /* checkbox sprite image */
+
+  background-repeat: no-repeat;
+  width: 15px;
+  height: 15px;
+  margin: 0 2px 0 0;
+  padding: 0;
+}
+.dj_ie6 .claro .dijitRadio, .dj_ie6 .claro .dijitRadioIcon {
+  /* inside a toggle button */
+
+  background-image: url("../form/images/checkboxAndRadioButtons_IE6.png");
+  /* checkbox sprite image */
+
+}
+.claro .dijitRadio {
+  /* unselected */
+
+  background-position: -105px;
+}
+.claro .dijitToggleButton .dijitRadioIcon {
+  /* unselected */
+
+  background-position: -107px;
+}
+.claro .dijitRadioDisabled {
+  /* unselected and disabled */
+
+  background-position: -165px;
+}
+.claro .dijitRadioHover {
+  /* hovering over an unselected enabled radio button */
+
+  background-position: -135px;
+}
+.claro .dijitRadioChecked {
+  background-position: -90px;
+}
+.claro .dijitToggleButtonChecked .dijitRadioIcon {
+  background-position: -92px;
+}
+.claro .dijitRadioCheckedHover {
+  background-position: -120px;
+}
+.claro .dijitRadioCheckedDisabled {
+  /* selected but disabled */
+
+  background-position: -150px;
+}
diff --git a/js/dojo/dijit/themes/claro/form/RadioButton.less b/js/dojo/dijit/themes/claro/form/RadioButton.less
new file mode 100644
index 0000000..f48cb67
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/RadioButton.less
@@ -0,0 +1,84 @@
+/* RadioButton
+ * 
+ * Styling RadioButton mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitRadio|.dijitRadioIcon - for border, padding, width|height and background image
+ * 
+ * 2. RadioButton within ToggleButton
+ * 		.dijitToggleButton|.dijitToggleButtonChecked .* - for background image
+ * 
+ * 3. Checked state
+ * 		.dijitRadioChecked - for checked background-color|image
+ * 		.dijitToggleButtonChecked - for border, background-color|image, display and width|height
+ * 
+ * 4. Hover state
+ * 		.dijitRadioHover|.dijitRadioCheckedHover - for background image
+ * 
+ * 5. Disabled state
+ * 		.dijitRadioDisabled|.dijitRadioCheckedDisabled - for background image
+ */
+
+@import "../variables";
+
+.claro .dijitToggleButton .dijitRadio,
+.claro .dijitToggleButton .dijitRadioIcon {
+	background-image: url("../@{image-form-checkbox-and-radios}");
+}
+
+.dj_ie6 .claro .dijitToggleButton .dijitRadio,
+.dj_ie6 .claro .dijitToggleButton .dijitRadioIcon {
+	background-image: url("../@{image-form-checkbox-and-radios-ie6}");
+}
+
+.claro .dijitRadio,
+.claro .dijitRadioIcon	{		/* inside a toggle button */
+	background-image: url("../@{image-form-checkbox-and-radios}"); /* checkbox sprite image */
+	background-repeat: no-repeat;
+	width: 15px;
+	height: 15px;
+	margin: 0 2px 0 0;
+	padding: 0;
+}
+
+.dj_ie6 .claro .dijitRadio,
+.dj_ie6 .claro .dijitRadioIcon	{		/* inside a toggle button */
+	background-image: url("../@{image-form-checkbox-and-radios-ie6}"); /* checkbox sprite image */
+}
+
+.claro .dijitRadio{
+	/* unselected */
+	background-position: -105px;
+}
+
+.claro .dijitToggleButton .dijitRadioIcon {
+	/* unselected */
+	background-position: -107px;
+}
+
+.claro .dijitRadioDisabled {
+	/* unselected and disabled */
+	background-position: -165px;
+}
+
+.claro .dijitRadioHover {
+	/* hovering over an unselected enabled radio button */
+	background-position: -135px;
+}
+
+.claro .dijitRadioChecked{
+	background-position: -90px;
+}
+
+.claro .dijitToggleButtonChecked .dijitRadioIcon {
+	background-position: -92px;
+}
+
+.claro .dijitRadioCheckedHover{
+	background-position: -120px;
+}
+
+.claro .dijitRadioCheckedDisabled {
+	/* selected but disabled */
+	background-position: -150px;
+}
diff --git a/js/dojo/dijit/themes/claro/form/Select.css b/js/dojo/dijit/themes/claro/form/Select.css
new file mode 100644
index 0000000..bfbca4e
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/Select.css
@@ -0,0 +1,109 @@
+/* Select
+ * 
+ * Styling Select mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitSelect - for border, background-color
+ * 		.dijitButtonContents - for border
+ *
+ * 2. Arrow
+ * 		.dijitArrowButton - for border, padding and background-color|image
+ * 		.dijitArrowButtonInner - for border, background-color|image, display and width|height
+ * 
+ * 3. Menu
+ * 		.dijitSelectMenu .* - for border, padding
+ * 
+ * 4. Various states
+ * 		.dijitSelectHover|.dijitSelectFocused|.dijitSelectDisabled .* - for border, padding and background-color|image 
+ */
+.claro .dijitSelect .dijitButtonText {
+  padding: 2px;
+}
+/* normal status */
+.claro .dijitSelect {
+  border: 1px solid #b5bcc7;
+  background-color: #ffffff;
+  border-collapse: separate;
+}
+.dj_ie6 .claro .dijitSelect, .dj_ie6 .claro .dijitSelect .dijitButtonNode {
+  background-image: none;
+}
+.claro .dijitSelect .dijitButtonContents {
+  border: 0 solid #b5bcc7;
+  border-right-width: 1px;
+}
+.claro .dijitSelect .dijitArrowButton {
+  padding: 0;
+  border: 1px solid #ffffff;
+  border-top: none;
+  background-color: #efefef;
+  background-image: url("../form/images/formHighlight.png");
+  background-repeat: repeat-x;
+}
+.claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner {
+  background-image: url("../form/images/commonFormArrows.png");
+  background-position: -35px 70%;
+  background-repeat: no-repeat;
+  width: 16px;
+  height: 16px;
+}
+/* hover status */
+.claro .dijitSelectHover {
+  border: 1px solid #759dc0;
+  background-color: #e5f2fe;
+  background-image: url("../form/images/textBox_back.png");
+  background-repeat: repeat-x;
+}
+.claro .dijitSelectHover .dijitButtonContents {
+  border-color: #759dc0;
+}
+.claro .dijitSelectHover .dijitArrowButton {
+  background-color: #abd6ff;
+}
+.claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {
+  background-position: -70px 70%;
+}
+/* focused status */
+.claro .dijitSelectFocused {
+  border: 1px solid #759dc0;
+}
+.claro .dijitSelectFocused .dijitButtonContents {
+  border-color: #759dc0;
+}
+.claro .dijitSelectFocused .dijitArrowButton {
+  background-color: #7dbefa;
+  background-position: 0 -177px;
+  border: none;
+  padding: 0 1px;
+}
+.claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner {
+  background-position: -70px 70%;
+  margin-bottom: 1px;
+}
+/* disable status */
+.claro .dijitSelectDisabled {
+  border: 1px solid #d3d3d3;
+  background-color: #efefef;
+  background-image: none;
+  color: #818181;
+}
+.claro .dijitSelectDisabled .dijitArrowButton {
+  background-color: #efefef;
+}
+.claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner {
+  background-position: 0 70%;
+}
+/* Dropdown menu style for select */
+.claro .dijitSelectMenu td.dijitMenuItemIconCell, .claro .dijitSelectMenu td.dijitMenuArrowCell {
+  /* so that arrow and icon cells from MenuItem are not displayed */
+
+  display: none;
+}
+.claro .dijitSelectMenu td.dijitMenuItemLabel {
+  /* line up menu text with text in select box (in LTR and RTL modes) */
+
+  padding: 2px;
+}
+.claro .dijitSelectMenu .dijitMenuSeparatorTop {
+  border-bottom: 1px solid #759dc0;
+}
diff --git a/js/dojo/dijit/themes/claro/form/Select.less b/js/dojo/dijit/themes/claro/form/Select.less
new file mode 100644
index 0000000..0e74261
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/Select.less
@@ -0,0 +1,124 @@
+/* Select
+ * 
+ * Styling Select mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitSelect - for border, background-color
+ * 		.dijitButtonContents - for border
+ *
+ * 2. Arrow
+ * 		.dijitArrowButton - for border, padding and background-color|image
+ * 		.dijitArrowButtonInner - for border, background-color|image, display and width|height
+ * 
+ * 3. Menu
+ * 		.dijitSelectMenu .* - for border, padding
+ * 
+ * 4. Various states
+ * 		.dijitSelectHover|.dijitSelectFocused|.dijitSelectDisabled .* - for border, padding and background-color|image 
+ */
+
+@import "../variables";
+
+.claro .dijitSelect .dijitButtonText {
+	padding: @textbox-padding;
+}
+
+/* normal status */
+.claro .dijitSelect {
+	border: 1px solid @border-color;
+	background-color: @textbox-background-color;
+	border-collapse: separate;
+}
+.dj_ie6 .claro .dijitSelect,
+.dj_ie6 .claro .dijitSelect .dijitButtonNode {
+	background-image:none;
+}
+
+.claro .dijitSelect .dijitButtonContents {
+	border: 0 solid @border-color;
+	border-right-width: 1px;
+}
+
+.claro .dijitSelect .dijitArrowButton {
+	padding: 0;
+	border: 1px solid @arrowbutton-inner-border-color;
+	border-top:none;
+	background-color: @arrowbutton-background-color;
+	background-image: url("../@{image-form-highlight}");
+	background-repeat:repeat-x;
+}
+
+.claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner {
+	background-image: url("../@{image-form-common-arrows}");
+	background-position:-35px 70%;
+	background-repeat: no-repeat;
+	width:16px;
+	height:16px;
+}
+
+/* hover status */
+.claro .dijitSelectHover {
+	border: 1px solid @hovered-border-color;
+	background-color: @textbox-hovered-background-color;
+	background-image: url("../@{image-form-textbox-background}");
+	background-repeat: repeat-x;
+}
+
+.claro .dijitSelectHover .dijitButtonContents {
+	border-color:@hovered-border-color;
+}
+
+.claro .dijitSelectHover .dijitArrowButton {
+	background-color:@arrowbutton-hovered-background-color;
+}
+.claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {
+	background-position:-70px 70%;
+}
+
+/* focused status */
+.claro .dijitSelectFocused {
+	border: 1px solid @focused-border-color;
+}
+.claro .dijitSelectFocused .dijitButtonContents {
+	border-color:@focused-border-color;
+}
+.claro .dijitSelectFocused .dijitArrowButton {
+	background-color:#7dbefa;		// TODO.  Mailed Jason about inconsistent ComboBox/Spinner behavior.
+	background-position:0 -177px;
+	border: none;
+	padding: 0 1px;
+}
+.claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner {
+	background-position:-70px 70%;
+	margin-bottom: 1px;
+}
+
+/* disable status */
+.claro .dijitSelectDisabled {
+	border: 1px solid @disabled-border-color;
+	background-color: @disabled-background-color;
+	background-image: none;
+	color: @disabled-text-color;
+}
+.claro .dijitSelectDisabled .dijitArrowButton { 
+	background-color: @disabled-background-color;
+}
+.claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner {
+	background-position:0 70%
+}
+
+/* Dropdown menu style for select */
+
+.claro .dijitSelectMenu td.dijitMenuItemIconCell,
+.claro .dijitSelectMenu td.dijitMenuArrowCell { 
+	/* so that arrow and icon cells from MenuItem are not displayed */
+	display: none;  
+}
+.claro .dijitSelectMenu td.dijitMenuItemLabel {
+	/* line up menu text with text in select box (in LTR and RTL modes) */
+	padding: @textbox-padding;
+}
+
+.claro .dijitSelectMenu .dijitMenuSeparatorTop {
+	border-bottom:1px solid @focused-border-color;
+}
diff --git a/js/dojo/dijit/themes/claro/form/Select_rtl.css b/js/dojo/dijit/themes/claro/form/Select_rtl.css
new file mode 100644
index 0000000..a14d4ec
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/Select_rtl.css
@@ -0,0 +1,4 @@
+.claro .dijitSelectRtl .dijitButtonContents {
+  border-right-width: 0;
+  border-left-width: 1px;
+}
diff --git a/js/dojo/dijit/themes/claro/form/Select_rtl.less b/js/dojo/dijit/themes/claro/form/Select_rtl.less
new file mode 100644
index 0000000..ffa40dc
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/Select_rtl.less
@@ -0,0 +1,6 @@
+@import "../variables";
+
+.claro .dijitSelectRtl .dijitButtonContents {
+	border-right-width: 0;
+	border-left-width: 1px;
+}
diff --git a/js/dojo/dijit/themes/claro/form/Slider.css b/js/dojo/dijit/themes/claro/form/Slider.css
new file mode 100644
index 0000000..eb82e17
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/Slider.css
@@ -0,0 +1,329 @@
+/* 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
+ */
+.claro .dijitSliderBar {
+  border-style: solid;
+  outline: 1px;
+}
+.claro .dijitSliderFocused .dijitSliderBar {
+  border-color: #759dc0;
+}
+.claro .dijitSliderHover .dijitSliderBar {
+  border-color: #759dc0;
+}
+.claro .dijitSliderDisabled .dijitSliderBar {
+  background-image: none;
+  border-color: #d3d3d3;
+}
+.claro .dijitRuleLabel {
+  color: #000000;
+}
+/* Horizontal Slider */
+.claro .dijitRuleLabelsContainerH {
+  padding: 2px 0;
+}
+.claro .dijitSlider .dijitSliderProgressBarH, .claro .dijitSlider .dijitSliderLeftBumper {
+  background-image: url("../form/images/sliderHorizontal.png");
+  background-repeat: repeat-x;
+  background-position: 0 -20px;
+  border-color: #b5bcc7;
+  background-color: #cfe5fa;
+}
+.claro .dijitSlider .dijitSliderRemainingBarH, .claro .dijitSlider .dijitSliderRightBumper {
+  background-image: url("../form/images/sliderHorizontal.png");
+  background-repeat: repeat-x;
+  background-position: 0 -11px;
+  border-color: #b5bcc7;
+  background-color: #ffffff;
+}
+.claro .dijitSliderRightBumper {
+  border-right: solid 1px #b5bcc7;
+}
+.claro .dijitSliderLeftBumper {
+  border-left: solid 1px #b5bcc7;
+}
+.claro .dijitSliderHover .dijitSliderProgressBarH, .claro .dijitSliderHover .dijitSliderLeftBumper {
+  background-position: 0 -20px;
+  background-color: #abd6ff;
+  border-color: #759dc0;
+}
+.claro .dijitSliderHover .dijitSliderRemainingBarH, .claro .dijitSliderHover .dijitSliderRightBumper {
+  background-position: 0 0;
+  background-color: #ffffff;
+  border-color: #759dc0;
+}
+.claro .dijitSliderFocused .dijitSliderProgressBarH, .claro .dijitSliderFocused .dijitSliderLeftBumper {
+  background-position: 0 -30px;
+  background-color: #abd6ff;
+  border-color: #759dc0;
+}
+.claro .dijitSliderFocused .dijitSliderRemainingBarH, .claro .dijitSliderFocused .dijitSliderRightBumper {
+  background-position: 0 -9px;
+  background-color: #ffffff;
+  border-color: #759dc0;
+}
+.claro .dijitSliderDisabled .dijitSliderProgressBarH, .claro .dijitSliderDisabled .dijitSliderLeftBumper {
+  background-color: #d3d3d3;
+  /* left side of slider, fill matches border */
+
+  background-image: none;
+}
+.claro .dijitSliderDisabled .dijitSliderRemainingBarH, .claro .dijitSliderDisabled .dijitSliderRightBumper {
+  background-color: #efefef;
+}
+/* Vertical Slider */
+.claro .dijitRuleLabelsContainerV {
+  padding: 0 2px;
+}
+.claro .dijitSlider .dijitSliderProgressBarV, .claro .dijitSlider .dijitSliderBottomBumper {
+  background-image: url("../form/images/sliderVertical.png");
+  background-repeat: repeat-y;
+  background-position: -36px 0;
+  border-color: #b5bcc7;
+  background-color: #cfe5fa;
+}
+.claro .dijitSlider .dijitSliderRemainingBarV, .claro .dijitSlider .dijitSliderTopBumper {
+  background-image: url("../form/images/sliderVertical.png");
+  background-repeat: repeat-y;
+  background-position: -3px 0;
+  border-color: #b5bcc7;
+  background-color: #ffffff;
+}
+.claro .dijitSliderBottomBumper {
+  border-bottom: solid 1px #b5bcc7;
+}
+.claro .dijitSliderTopBumper {
+  border-top: solid 1px #b5bcc7;
+}
+.claro .dijitSliderHover .dijitSliderProgressBarV, .claro .dijitSliderHover .dijitSliderBottomBumper {
+  background-position: -36px 0;
+  background-color: #abd6ff;
+}
+.claro .dijitSliderHover .dijitSliderRemainingBarV, .claro .dijitSliderHover .dijitSliderTopBumper {
+  background-position: 0 0;
+  background-color: #ffffff;
+}
+.claro .dijitSliderFocused .dijitSliderProgressBarV, .claro .dijitSliderFocused .dijitSliderBottomBumper {
+  background-position: -56px 0;
+  background-color: #abd6ff;
+}
+.claro .dijitSliderFocused .dijitSliderRemainingBarV, .claro .dijitSliderFocused .dijitSliderTopBumper {
+  background-position: -18px 0;
+  background-color: #ffffff;
+}
+.claro .dijitSliderDisabled .dijitSliderProgressBarV, .claro .dijitSliderDisabled .dijitSliderBottomBumper {
+  background-color: #d3d3d3;
+  /* bottom side of slider, fill matches border */
+
+}
+.claro .dijitSliderDisabled .dijitSliderRemainingBarV, .claro .dijitSliderDisabled .dijitSliderTopBumper {
+  background-color: #efefef;
+}
+/* ------- Thumbs ------- */
+.claro .dijitSliderImageHandleH {
+  border: 0;
+  width: 18px;
+  height: 16px;
+  background-image: url("../form/images/sliderThumbs.png");
+  background-repeat: no-repeat;
+  background-position: 0 0;
+}
+.claro .dijitSliderHover .dijitSliderImageHandleH {
+  background-position: -18px 0;
+}
+.claro .dijitSliderFocused .dijitSliderImageHandleH {
+  background-position: -36px 0;
+}
+.claro .dijitSliderProgressBarH .dijitSliderThumbHover {
+  background-position: -36px 0;
+}
+.claro .dijitSliderProgressBarH .dijitSliderThumbActive {
+  background-position: -36px 0;
+}
+.claro .dijitSliderReadOnly .dijitSliderImageHandleH, .claro .dijitSliderDisabled .dijitSliderImageHandleH {
+  background-position: -54px 0;
+}
+.claro .dijitSliderImageHandleV {
+  border: 0;
+  width: 18px;
+  height: 16px;
+  background-image: url("../form/images/sliderThumbs.png");
+  background-repeat: no-repeat;
+  background-position: -289px 0;
+}
+.claro .dijitSliderHover .dijitSliderImageHandleV {
+  background-position: -307px 0;
+}
+.claro .dijitSliderFocused .dijitSliderImageHandleV {
+  background-position: -325px 0;
+}
+.claro .dijitSliderProgressBarV .dijitSliderThumbHover {
+  background-position: -325px 0;
+}
+.claro .dijitSliderProgressBarV .dijitSliderThumbActive {
+  background-position: -325px 0;
+}
+.claro .dijitSliderReadOnly .dijitSliderImageHandleV, .claro .dijitSliderDisabled .dijitSliderImageHandleV {
+  background-position: -343px 0;
+}
+/* ---- Increment/Decrement Buttons ---- */
+.claro .dijitSliderButtonContainerH {
+  padding: 1px 3px 1px 2px;
+}
+.claro .dijitSliderButtonContainerV {
+  padding: 3px 1px 2px 1px;
+}
+.claro .dijitSliderDecrementIconH,
+.claro .dijitSliderIncrementIconH,
+.claro .dijitSliderDecrementIconV,
+.claro .dijitSliderIncrementIconV {
+  background-image: url("../form/images/commonFormArrows.png");
+  background-repeat: no-repeat;
+  background-color: #efefef;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  border: solid 1px #b5bcc7;
+  font-size: 1px;
+}
+.claro .dijitSliderDecrementIconH, .claro .dijitSliderIncrementIconH {
+  height: 12px;
+  width: 9px;
+}
+.claro .dijitSliderDecrementIconV, .claro .dijitSliderIncrementIconV {
+  height: 9px;
+  width: 12px;
+}
+.claro .dijitSliderActive .dijitSliderDecrementIconH,
+.claro .dijitSliderActive .dijitSliderIncrementIconH,
+.claro .dijitSliderActive .dijitSliderDecrementIconV,
+.claro .dijitSliderActive .dijitSliderIncrementIconV,
+.claro .dijitSliderHover .dijitSliderDecrementIconH,
+.claro .dijitSliderHover .dijitSliderIncrementIconH,
+.claro .dijitSliderHover .dijitSliderDecrementIconV,
+.claro .dijitSliderHover .dijitSliderIncrementIconV {
+  /* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */
+
+  border: solid 1px #759dc0;
+  background-color: #ffffff;
+}
+.claro .dijitSliderDecrementIconH {
+  background-position: -357px 50%;
+}
+.claro .dijitSliderActive .dijitSliderDecrementIconH.claro .dijitSliderHover .dijitSliderDecrementIconH {
+  background-position: -393px 50%;
+}
+.claro .dijitSliderIncrementIconH {
+  background-position: -251px 50%;
+}
+.claro .dijitSliderActive .dijitSliderIncrementIconH.claro .dijitSliderHover .dijitSliderIncrementIconH {
+  background-position: -283px 50%;
+}
+.claro .dijitSliderDecrementIconV {
+  background-position: -38px 50%;
+}
+.claro .dijitSliderActive .dijitSliderDecrementIconV.claro .dijitSliderHover .dijitSliderDecrementIconV {
+  background-position: -73px 50%;
+}
+.claro .dijitSliderIncrementIconV {
+  background-position: -143px 49%;
+}
+.claro .dijitSliderActive .dijitSliderIncrementIconV.claro .dijitSliderHover .dijitSliderIncrementIconV {
+  background-position: -178px 49%;
+}
+.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover,
+.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover,
+.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover,
+.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover {
+  background-color: #cfe5fa;
+}
+.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive,
+.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive,
+.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive,
+.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive {
+  background-color: #abd6ff;
+  border-color: #759dc0;
+}
+.claro .dijitSliderButtonInner {
+  visibility: hidden;
+}
+.claro .dijitSliderDisabled .dijitSliderBar {
+  border-color: #d3d3d3;
+}
+.claro .dijitSliderReadOnly *, .claro .dijitSliderDisabled * {
+  border-color: #d3d3d3;
+  color: #818181;
+}
+.claro .dijitSliderReadOnly .dijitSliderDecrementIconH, .claro .dijitSliderDisabled .dijitSliderDecrementIconH {
+  background-position: -321px 50%;
+  background-color: #efefef;
+}
+.claro .dijitSliderReadOnly .dijitSliderIncrementIconH, .claro .dijitSliderDisabled .dijitSliderIncrementIconH {
+  background-position: -215px 50%;
+  background-color: #efefef;
+}
+.claro .dijitSliderReadOnly .dijitSliderDecrementIconV, .claro .dijitSliderDisabled .dijitSliderDecrementIconV {
+  background-position: -3px 49%;
+  background-color: #efefef;
+}
+.claro .dijitSliderReadOnly .dijitSliderIncrementIconV, .claro .dijitSliderDisabled .dijitSliderIncrementIconV {
+  background-position: -107px 49%;
+  background-color: #efefef;
+}
+.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarH,
+.dj_ie6 .claro .dijitSlider .dijitSliderLeftBumper,
+.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarH,
+.dj_ie6 .claro .dijitSlider .dijitSliderRightBumper,
+.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarV,
+.dj_ie6 .claro .dijitSlider .dijitSliderTopBumper,
+.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarV,
+.dj_ie6 .claro .dijitSlider .dijitSliderBottomBumper {
+  background-image: none;
+}
diff --git a/js/dojo/dijit/themes/claro/form/Slider.less b/js/dojo/dijit/themes/claro/form/Slider.less
new file mode 100644
index 0000000..db0f8cb
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/Slider.less
@@ -0,0 +1,365 @@
+/* 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 "../variables";
+
+.claro .dijitSliderBar {
+	border-style: solid;
+	outline: 1px;
+}
+.claro .dijitSliderFocused .dijitSliderBar {
+	border-color: @focused-border-color;
+}
+.claro .dijitSliderHover .dijitSliderBar {
+	border-color: @hovered-border-color;
+}
+.claro .dijitSliderDisabled .dijitSliderBar {
+	background-image: none;
+	border-color: @disabled-border-color;
+}
+.claro .dijitRuleLabel {
+	color: @text-color;
+}
+
+/* Horizontal Slider */
+
+.claro .dijitRuleLabelsContainerH {
+	padding: 2px 0;
+}
+.claro .dijitSlider .dijitSliderProgressBarH,
+.claro .dijitSlider .dijitSliderLeftBumper{
+	background-image: url("../@{image-form-slider-horizontal}");
+	background-repeat:repeat-x;
+	background-position:0 -20px;
+	border-color: @border-color;
+	background-color: @slider-fullbar-background-color;
+}
+.claro .dijitSlider .dijitSliderRemainingBarH,
+.claro .dijitSlider .dijitSliderRightBumper{
+	background-image: url("../@{image-form-slider-horizontal}");
+	background-repeat:repeat-x;
+	background-position:0 -11px;
+	border-color: @border-color;
+	background-color: @slider-remainingbar-background-color;
+}
+.claro .dijitSliderRightBumper {
+	border-right: solid 1px @border-color;
+}
+.claro .dijitSliderLeftBumper {
+	border-left: solid 1px @border-color;
+}
+.claro .dijitSliderHover .dijitSliderProgressBarH,
+.claro .dijitSliderHover .dijitSliderLeftBumper{
+	background-position:0 -20px;
+	background-color: @slider-hovered-fullbar-background-color;
+	border-color: @hovered-border-color;
+}
+.claro .dijitSliderHover .dijitSliderRemainingBarH,
+.claro .dijitSliderHover .dijitSliderRightBumper{
+	background-position:0 0;
+	background-color: @slider-hovered-remainingbar-background-color;
+	border-color: @hovered-border-color;
+}
+.claro .dijitSliderFocused .dijitSliderProgressBarH,
+.claro .dijitSliderFocused .dijitSliderLeftBumper{
+	background-position:0 -30px;
+	background-color: @slider-focused-fullbar-background-color;
+	border-color: @focused-border-color;
+}
+.claro .dijitSliderFocused .dijitSliderRemainingBarH,
+.claro .dijitSliderFocused .dijitSliderRightBumper{
+	background-position:0 -9px;
+	background-color: @slider-focused-remainingbar-background-color;
+	border-color: @focused-border-color;
+}
+.claro .dijitSliderDisabled .dijitSliderProgressBarH,
+.claro .dijitSliderDisabled .dijitSliderLeftBumper{
+	background-color: @disabled-border-color;		/* left side of slider, fill matches border */
+	background-image:none;
+}
+.claro .dijitSliderDisabled .dijitSliderRemainingBarH,
+.claro .dijitSliderDisabled .dijitSliderRightBumper{
+	background-color: @disabled-background-color;
+}
+
+/* Vertical Slider */
+
+.claro .dijitRuleLabelsContainerV {
+	padding: 0 2px;
+}
+.claro .dijitSlider .dijitSliderProgressBarV,
+.claro .dijitSlider .dijitSliderBottomBumper{
+	background-image: url("../@{image-form-slider-vertical}");
+	background-repeat:repeat-y;
+	background-position:-36px 0;
+	border-color: @border-color;
+	background-color: @slider-fullbar-background-color;
+}
+.claro .dijitSlider .dijitSliderRemainingBarV,
+.claro .dijitSlider .dijitSliderTopBumper{
+	background-image: url("../@{image-form-slider-vertical}");
+	background-repeat:repeat-y;
+	background-position:-3px 0;
+	border-color: @border-color;
+	background-color: @slider-remainingbar-background-color;
+}
+.claro .dijitSliderBottomBumper {
+	border-bottom: solid 1px @border-color;
+}
+.claro .dijitSliderTopBumper {
+	border-top: solid 1px @border-color;
+}
+.claro .dijitSliderHover .dijitSliderProgressBarV,
+.claro .dijitSliderHover .dijitSliderBottomBumper{
+	background-position:-36px 0;
+	background-color: @slider-hovered-fullbar-background-color;
+}
+.claro .dijitSliderHover .dijitSliderRemainingBarV,
+.claro .dijitSliderHover .dijitSliderTopBumper{
+	background-position:0 0;
+	background-color: @slider-hovered-remainingbar-background-color;
+}
+.claro .dijitSliderFocused .dijitSliderProgressBarV,
+.claro .dijitSliderFocused .dijitSliderBottomBumper{
+	background-position:-56px 0;
+	background-color: @slider-focused-fullbar-background-color;
+}
+.claro .dijitSliderFocused .dijitSliderRemainingBarV,
+.claro .dijitSliderFocused .dijitSliderTopBumper{
+	background-position:-18px 0;
+	background-color: @slider-focused-remainingbar-background-color;
+}
+.claro .dijitSliderDisabled .dijitSliderProgressBarV,
+.claro .dijitSliderDisabled .dijitSliderBottomBumper{
+	background-color: @disabled-border-color;	/* bottom side of slider, fill matches border */
+}
+.claro .dijitSliderDisabled .dijitSliderRemainingBarV,
+.claro .dijitSliderDisabled .dijitSliderTopBumper{
+	background-color: @disabled-background-color;
+}
+
+
+/* ------- Thumbs ------- */
+
+.claro .dijitSliderImageHandleH {
+	border: 0;
+	width: 18px;
+	height: 16px;
+	background-image: url("../@{image-form-slider-thumbs}");
+	background-repeat:no-repeat;
+	background-position:0 0;
+}
+.claro .dijitSliderHover .dijitSliderImageHandleH {
+	background-position:-18px 0;
+}
+.claro .dijitSliderFocused .dijitSliderImageHandleH {
+	background-position:-36px 0;
+}
+.claro .dijitSliderProgressBarH .dijitSliderThumbHover{
+	background-position:-36px 0;
+}
+.claro .dijitSliderProgressBarH .dijitSliderThumbActive{
+	background-position:-36px 0;
+}
+.claro .dijitSliderReadOnly .dijitSliderImageHandleH,
+.claro .dijitSliderDisabled .dijitSliderImageHandleH {
+	background-position:-54px 0;
+}
+.claro .dijitSliderImageHandleV {
+	border: 0;
+	width: 18px;
+	height: 16px;
+	background-image: url("../@{image-form-slider-thumbs}");
+	background-repeat:no-repeat;
+	background-position:-289px 0;
+}
+.claro .dijitSliderHover .dijitSliderImageHandleV {
+	background-position:-307px 0;
+}
+.claro .dijitSliderFocused .dijitSliderImageHandleV {
+	background-position:-325px 0;
+}
+.claro .dijitSliderProgressBarV .dijitSliderThumbHover{
+	background-position:-325px 0;
+}
+.claro .dijitSliderProgressBarV .dijitSliderThumbActive{
+	background-position:-325px 0;
+}
+.claro .dijitSliderReadOnly .dijitSliderImageHandleV,
+.claro .dijitSliderDisabled .dijitSliderImageHandleV {
+	background-position:-343px 0;
+}
+
+/* ---- Increment/Decrement Buttons ---- */
+
+.claro .dijitSliderButtonContainerH{
+	padding: 1px 3px 1px 2px;
+}
+.claro .dijitSliderButtonContainerV{
+	padding: 3px 1px 2px 1px;
+}
+.claro .dijitSliderDecrementIconH,
+.claro .dijitSliderIncrementIconH,
+.claro .dijitSliderDecrementIconV,
+.claro .dijitSliderIncrementIconV {
+	background-image: url("../@{image-form-common-arrows}");
+	background-repeat:no-repeat;
+	background-color: @arrowbutton-background-color;
+	.border-radius(2px);
+	border: solid 1px @border-color;
+	font-size: 1px;
+}
+.claro .dijitSliderDecrementIconH,
+.claro .dijitSliderIncrementIconH {
+	height: 12px;
+	width: 9px;
+}
+.claro .dijitSliderDecrementIconV,
+.claro .dijitSliderIncrementIconV {
+	height: 9px;
+	width: 12px;
+}
+.claro .dijitSliderActive .dijitSliderDecrementIconH,
+.claro .dijitSliderActive .dijitSliderIncrementIconH,
+.claro .dijitSliderActive .dijitSliderDecrementIconV,
+.claro .dijitSliderActive .dijitSliderIncrementIconV,
+.claro .dijitSliderHover .dijitSliderDecrementIconH,
+.claro .dijitSliderHover .dijitSliderIncrementIconH,
+.claro .dijitSliderHover .dijitSliderDecrementIconV,
+.claro .dijitSliderHover .dijitSliderIncrementIconV {
+	/* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */
+	border: solid 1px @hovered-border-color;
+	background-color: @slider-hoveredButton-background-color;
+}
+
+.claro .dijitSliderDecrementIconH {
+	background-position:-357px 50%;
+}
+.claro .dijitSliderActive .dijitSliderDecrementIconH
+.claro .dijitSliderHover .dijitSliderDecrementIconH {
+	background-position:-393px 50%;
+}
+.claro .dijitSliderIncrementIconH {
+	background-position:-251px 50%;
+}
+.claro .dijitSliderActive .dijitSliderIncrementIconH
+.claro .dijitSliderHover .dijitSliderIncrementIconH {
+	background-position:-283px 50%;
+}
+.claro .dijitSliderDecrementIconV {
+	background-position:-38px 50%;
+}
+.claro .dijitSliderActive .dijitSliderDecrementIconV
+.claro .dijitSliderHover .dijitSliderDecrementIconV {
+	background-position:-73px 50%;
+}
+.claro .dijitSliderIncrementIconV {
+	background-position:-143px 49%;
+}
+.claro .dijitSliderActive .dijitSliderIncrementIconV
+.claro .dijitSliderHover .dijitSliderIncrementIconV {
+	background-position:-178px 49%;
+}
+.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover,
+.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover,
+.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover,
+.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover {
+	background-color: @slider-button-hovered-background-color;
+}
+.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive,
+.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive,
+.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive,
+.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive {
+	background-color: @slider-button-pressed-background-color;
+	border-color:@pressed-border-color;
+}
+.claro .dijitSliderButtonInner {
+	visibility: hidden;
+}
+.claro .dijitSliderDisabled .dijitSliderBar{
+	border-color: @disabled-border-color;
+}
+.claro .dijitSliderReadOnly *,.claro .dijitSliderDisabled * {
+	border-color: @disabled-border-color;
+	color: @disabled-text-color;
+}
+.claro .dijitSliderReadOnly .dijitSliderDecrementIconH,
+.claro .dijitSliderDisabled .dijitSliderDecrementIconH {
+	background-position:-321px 50%;
+	background-color:@disabled-background-color;
+}
+.claro .dijitSliderReadOnly .dijitSliderIncrementIconH,
+.claro .dijitSliderDisabled .dijitSliderIncrementIconH {
+	background-position:-215px 50%;
+	background-color:@disabled-background-color;
+}
+.claro .dijitSliderReadOnly .dijitSliderDecrementIconV,
+.claro .dijitSliderDisabled .dijitSliderDecrementIconV {
+	background-position:-3px 49%;
+	background-color:@disabled-background-color;
+}
+.claro .dijitSliderReadOnly .dijitSliderIncrementIconV,
+.claro .dijitSliderDisabled .dijitSliderIncrementIconV {
+	background-position:-107px 49%;
+	background-color:@disabled-background-color;
+}
+
+.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarH,
+.dj_ie6 .claro .dijitSlider .dijitSliderLeftBumper,
+.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarH,
+.dj_ie6 .claro .dijitSlider .dijitSliderRightBumper,
+.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarV,
+.dj_ie6 .claro .dijitSlider .dijitSliderTopBumper,
+.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarV,
+.dj_ie6 .claro .dijitSlider .dijitSliderBottomBumper {
+	background-image:none;
+}
diff --git a/js/dojo/dijit/themes/claro/form/Slider_rtl.css b/js/dojo/dijit/themes/claro/form/Slider_rtl.css
new file mode 100644
index 0000000..97e078b
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/Slider_rtl.css
@@ -0,0 +1,24 @@
+.claro .dijitSliderRtl .dijitSliderProgressBarH,
+.claro .dijitSliderRtl .dijitSliderRemainingBarH,
+.claro .dijitSliderRtl .dijitSliderLeftBumper,
+.claro .dijitSliderRtl .dijitSliderRightBumper,
+.claro .dijitSliderRtl .dijitSliderTopBumper {
+  background-position: top right;
+}
+.claro .dijitSliderRtl .dijitSliderProgressBarV, .claro .dijitSliderRtl .dijitSliderRemainingBarV, .claro .dijitSliderRtl .dijitSliderBottomBumper {
+  background-position: bottom right;
+}
+.claro .dijitSliderRtl .dijitSliderLeftBumper {
+  border-left-width: 0;
+  border-right-width: 1px;
+}
+.claro .dijitSliderRtl .dijitSliderRightBumper {
+  border-left-width: 1px;
+  border-right-width: 0;
+}
+.claro .dijitSliderRtl .dijitSliderIncrementIconH {
+  background-position: -357px 50%;
+}
+.claro .dijitSliderRtl .dijitSliderDecrementIconH {
+  background-position: -251px 50%;
+}
diff --git a/js/dojo/dijit/themes/claro/form/Slider_rtl.less b/js/dojo/dijit/themes/claro/form/Slider_rtl.less
new file mode 100644
index 0000000..66a7116
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/Slider_rtl.less
@@ -0,0 +1,33 @@
+@import "../variables";
+
+.claro .dijitSliderRtl .dijitSliderProgressBarH,
+.claro .dijitSliderRtl .dijitSliderRemainingBarH,
+.claro .dijitSliderRtl .dijitSliderLeftBumper,
+.claro .dijitSliderRtl .dijitSliderRightBumper,
+.claro .dijitSliderRtl .dijitSliderTopBumper {
+	background-position: top right;
+}
+
+.claro .dijitSliderRtl .dijitSliderProgressBarV,
+.claro .dijitSliderRtl .dijitSliderRemainingBarV,
+.claro .dijitSliderRtl .dijitSliderBottomBumper {
+	background-position: bottom right;
+}
+
+.claro .dijitSliderRtl .dijitSliderLeftBumper {
+	border-left-width: 0;
+	border-right-width: 1px;
+}
+
+.claro .dijitSliderRtl .dijitSliderRightBumper {
+	border-left-width: 1px;
+	border-right-width: 0;
+}
+
+.claro .dijitSliderRtl .dijitSliderIncrementIconH {
+	background-position:-357px 50%;
+}
+
+.claro .dijitSliderRtl .dijitSliderDecrementIconH {
+	background-position:-251px 50%;
+}
diff --git a/js/dojo/dijit/themes/claro/form/images/button.png b/js/dojo/dijit/themes/claro/form/images/button.png
new file mode 100644
index 0000000..cb787cb
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/images/button.png
diff --git a/js/dojo/dijit/themes/claro/form/images/buttonArrows.png b/js/dojo/dijit/themes/claro/form/images/buttonArrows.png
new file mode 100644
index 0000000..642eff3
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/images/buttonArrows.png
diff --git a/js/dojo/dijit/themes/claro/form/images/button_grad_d.png b/js/dojo/dijit/themes/claro/form/images/button_grad_d.png
new file mode 100644
index 0000000..3a71a46
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/images/button_grad_d.png
diff --git a/js/dojo/dijit/themes/claro/form/images/checkboxAndRadioButtons_IE6.png b/js/dojo/dijit/themes/claro/form/images/checkboxAndRadioButtons_IE6.png
new file mode 100644
index 0000000..92d2221
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/images/checkboxAndRadioButtons_IE6.png
diff --git a/js/dojo/dijit/themes/claro/form/images/checkboxRadioButtonStates.png b/js/dojo/dijit/themes/claro/form/images/checkboxRadioButtonStates.png
new file mode 100644
index 0000000..2d06a82
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/images/checkboxRadioButtonStates.png
diff --git a/js/dojo/dijit/themes/claro/form/images/commonFormArrows.png b/js/dojo/dijit/themes/claro/form/images/commonFormArrows.png
new file mode 100644
index 0000000..6d04742
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/images/commonFormArrows.png
diff --git a/js/dojo/dijit/themes/claro/form/images/error.png b/js/dojo/dijit/themes/claro/form/images/error.png
new file mode 100644
index 0000000..46de1cd
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/images/error.png
diff --git a/js/dojo/dijit/themes/claro/form/images/formHighlight.png b/js/dojo/dijit/themes/claro/form/images/formHighlight.png
new file mode 100644
index 0000000..f90eb25
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/images/formHighlight.png
diff --git a/js/dojo/dijit/themes/claro/form/images/shadow.png b/js/dojo/dijit/themes/claro/form/images/shadow.png
new file mode 100644
index 0000000..72d60e6
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/images/shadow.png
diff --git a/js/dojo/dijit/themes/claro/form/images/sliderHorizontal.png b/js/dojo/dijit/themes/claro/form/images/sliderHorizontal.png
new file mode 100644
index 0000000..d769a64
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/images/sliderHorizontal.png
diff --git a/js/dojo/dijit/themes/claro/form/images/sliderThumbs.png b/js/dojo/dijit/themes/claro/form/images/sliderThumbs.png
new file mode 100644
index 0000000..70ab2fe
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/images/sliderThumbs.png
diff --git a/js/dojo/dijit/themes/claro/form/images/sliderVertical.png b/js/dojo/dijit/themes/claro/form/images/sliderVertical.png
new file mode 100644
index 0000000..9d69d04
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/images/sliderVertical.png
diff --git a/js/dojo/dijit/themes/claro/form/images/textBox_back.png b/js/dojo/dijit/themes/claro/form/images/textBox_back.png
new file mode 100644
index 0000000..dfc752a
--- /dev/null
+++ b/js/dojo/dijit/themes/claro/form/images/textBox_back.png