upgrade dojo to 1.8.3 (refs #570)

25 files changed, 310 insertions, 260 deletions

diff --git a/lib/dijit/themes/claro/form/Button.css b/lib/dijit/themes/claro/form/Button.css
index bc7c3dc18..f7718c105 100644
--- a/lib/dijit/themes/claro/form/Button.css
+++ b/lib/dijit/themes/claro/form/Button.css
@@ -43,16 +43,20 @@
 
   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);
+  background-color: #bcd8f4;
+  background-image: url("images/buttonEnabled.png");
+  background-repeat: repeat-x;
+  background-image: -moz-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%);
+  background-image: -webkit-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%);
+  background-image: -o-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%);
+  background-image: linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%);
+  _background-image: none;
 }
 .claro .dijitComboButton .dijitArrowButton {
   border-left-width: 0;
@@ -100,7 +104,7 @@
 .claro .dijitComboButton .dijitButtonNodeHover,
 .claro .dijitComboButton .dijitDownArrowButtonHover,
 .claro .dijitToggleButtonHover .dijitButtonNode {
-  background-color: #abd6ff;
+  background-color: #86bdf2;
   color: #000000;
   -webkit-transition-duration: 0.2s;
   -moz-transition-duration: 0.2s;
@@ -111,11 +115,11 @@
 .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);
+.claro .dijitToggleButtonChecked .dijitButtonNode {
+  background-color: #86bdf2;
+  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
   -webkit-transition-duration: 0.1s;
   -moz-transition-duration: 0.1s;
   transition-duration: 0.1s;
@@ -132,13 +136,18 @@
 .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);
+  background-image: url("images/buttonDisabled.png");
+  background-image: -moz-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%);
+  background-image: -webkit-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%);
+  background-image: -o-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%);
+  background-image: linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%);
+  _background-image: none;
 }
 .claro .dijitComboButtonDisabled .dijitArrowButton {
   border-left-width: 0;
@@ -149,9 +158,6 @@
   /* 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;
diff --git a/lib/dijit/themes/claro/form/Button.less b/lib/dijit/themes/claro/form/Button.less
index 208e4de52..5d5953237 100644
--- a/lib/dijit/themes/claro/form/Button.less
+++ b/lib/dijit/themes/claro/form/Button.less
@@ -40,16 +40,22 @@
 .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;
+	padding: 2px 4px 4px 4px;
 	color: @text-color;
 	.border-radius(@button-border-radius);
 	.box-shadow(0 1px 1px rgba(0,0,0,0.15));
+
+	background-color: desaturate(darken(@button-background-color, 10), 20);
+
+	// Alpha transparency layer to add gradient to above background color.
+	// Use CSS gradient with fallback to image for IE.
+	background-image: url("images/buttonEnabled.png");
+	background-repeat: repeat-x;
+	.alpha-white-gradient(1, 0px, 0, 3px, 0.75, 100%);
+	_background-image: none;	// IE6 can't handle background-color and background-image at once.
 }
 
+
 .claro .dijitComboButton .dijitArrowButton {
 	border-left-width: 0;
 	padding: 4px 2px 4px 2px;	/* TODO: still needed? */
@@ -101,7 +107,7 @@
 .claro .dijitComboButton .dijitButtonNodeHover, 
 .claro .dijitComboButton .dijitDownArrowButtonHover,
 .claro .dijitToggleButtonHover .dijitButtonNode {
-	background-color: @button-hovered-background-color;
+	background-color: desaturate(darken(@button-hovered-background-color, 10), 20);
 	color:@text-color;
  	.transition-duration(.2s);
 }
@@ -111,9 +117,9 @@
 .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));
+.claro .dijitToggleButtonChecked .dijitButtonNode {
+	background-color: desaturate(darken(@button-pressed-background-color, 10), 20);
+	.box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2));
  	.transition-duration(.1s);
 }
 
@@ -129,13 +135,19 @@
 .claro .dijitButtonDisabled .dijitButtonNode,
 .claro .dijitDropDownButtonDisabled .dijitButtonNode,
 .claro .dijitComboButtonDisabled .dijitButtonNode,
-.claro .dijitToggleButtonDisabled .dijitButtonNode { 
-	background-position:0 -149px;
+.claro .dijitToggleButtonDisabled .dijitButtonNode {
 	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));
+
+	// Change the gradient from light to dark.
+	// Again using CSS gradient with fallback to image for IE.
+	background-image: url("images/buttonDisabled.png");
+	.alpha-white-gradient(1, 0%, 0, 40%);
+	_background-image: none;	// IE6 can't handle background-color and background-image at once.
 }
+
 .claro .dijitComboButtonDisabled .dijitArrowButton{ 
 	border-left-width: 0;
 }
@@ -144,10 +156,6 @@
 	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);
 }
diff --git a/lib/dijit/themes/claro/form/Common.css b/lib/dijit/themes/claro/form/Common.css
index ce108c1ae..b7b91c134 100644
--- a/lib/dijit/themes/claro/form/Common.css
+++ b/lib/dijit/themes/claro/form/Common.css
@@ -4,15 +4,17 @@
 .claro .dijitTextBox, .claro .dijitInputInner {
   color: #000000;
 }
-.claro .dijitTextBoxError .dijitValidationContainer {
+.claro .dijitValidationTextBoxError .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 {
+.claro .dijitTextBoxError .dijitValidationContainer {
+  border-left-width: 1px;
+}
+.claro .dijitValidationTextBoxError .dijitValidationIcon {
   width: 0;
   background-color: transparent !important;
   /* so the INPUT doesn't obscure the border in rtl+a11y */
@@ -26,13 +28,16 @@
 .claro .dijitTextArea, .claro .dijitInputField .dijitPlaceHolder {
   padding: 2px;
 }
-.claro .dijitTextBox .dijitInputField {
+.claro .dijitSelect .dijitInputField, .claro .dijitTextBox .dijitInputField {
   padding: 1px 2px;
 }
 .dj_gecko .claro .dijitTextBox .dijitInputInner, .dj_webkit .claro .dijitTextBox .dijitInputInner {
   padding: 1px;
 }
-.claro .dijitTextBox, .claro .dijitTextBox .dijitButtonNode {
+.claro .dijitSelect,
+.claro .dijitSelect .dijitButtonContents,
+.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;
@@ -43,11 +48,14 @@
   -moz-transition-duration: 0.35s;
   transition-duration: 0.35s;
 }
-.claro .dijitTextBox {
+.claro .dijitSelect, .claro .dijitTextBox {
   background-color: #ffffff;
 }
 /* hover */
-.claro .dijitTextBoxHover, .claro .dijitTextBoxHover .dijitButtonNode {
+.claro .dijitSelectHover,
+.claro .dijitSelectHover .dijitButtonContents,
+.claro .dijitTextBoxHover,
+.claro .dijitTextBoxHover .dijitButtonNode {
   border-color: #759dc0;
   -webkit-transition-duration: 0.25s;
   -moz-transition-duration: 0.25s;
@@ -55,18 +63,23 @@
 }
 .claro .dijitTextBoxHover {
   background-color: #e5f2fe;
-  background-image: url("../form/images/textBox_back.png");
-  background-repeat: repeat-x;
+  background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
+  background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
+  background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
+  background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
 }
 /* error state */
-.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitButtonNode {
+.claro .dijitSelectError,
+.claro .dijitSelectError .dijitButtonContents,
+.claro .dijitTextBoxError,
+.claro .dijitTextBoxError .dijitButtonNode {
   border-color: #d46464;
 }
-.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitInputContainer {
-  background-color: #ffffff;
-}
 /* focused state */
-.claro .dijitTextBoxFocused, .claro .dijitTextBoxFocused .dijitButtonNode {
+.claro .dijitSelectFocused,
+.claro .dijitSelectFocused .dijitButtonContents,
+.claro .dijitTextBoxFocused,
+.claro .dijitTextBoxFocused .dijitButtonNode {
   border-color: #759dc0;
   -webkit-transition-duration: 0.1s;
   -moz-transition-duration: 0.1s;
@@ -74,27 +87,35 @@
 }
 .claro .dijitTextBoxFocused {
   background-color: #ffffff;
-  background-image: url("../form/images/textBox_back.png");
-  background-repeat: repeat-x;
+  background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
+  background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
+  background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
+  background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
 }
 .claro .dijitTextBoxFocused .dijitInputContainer {
   background: #ffffff;
 }
-.claro .dijitTextBoxErrorFocused, .claro .dijitTextBoxErrorFocused .dijitButtonNode {
+.claro .dijitSelectErrorFocused,
+.claro .dijitSelectErrorFocused .dijitButtonContents,
+.claro .dijitTextBoxErrorFocused,
+.claro .dijitTextBoxErrorFocused .dijitButtonNode {
   border-color: #ce5050;
 }
 /* disabled state */
-.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitButtonNode {
+.claro .dijitSelectDisabled,
+.claro .dijitSelectDisabled .dijitButtonContents,
+.claro .dijitTextBoxDisabled,
+.claro .dijitTextBoxDisabled .dijitButtonNode {
   border-color: #d3d3d3;
 }
-.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer {
+.claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer {
   background-color: #efefef;
   background-image: none;
 }
-.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputInner {
+.claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputInner {
   color: #818181;
 }
-.dj_webkit .claro .dijitTextBoxDisabled input {
+.dj_webkit .claro .dijitDisabled input {
   /* because WebKit lightens disabled input/textarea no matter what color you specify */
 
   color: #757575;
@@ -106,12 +127,14 @@
 }
 /*========================= for special widgets =========================*/
 /* Input boxes with an arrow (for a drop down) */
-.claro .dijitComboBox .dijitArrowButtonInner {
+.claro .dijitSelect .dijitArrowButtonInner, .claro .dijitComboBox .dijitArrowButtonInner {
   background-image: url("../form/images/commonFormArrows.png");
   background-position: -35px 53%;
   background-repeat: no-repeat;
   margin: 0;
   width: 16px;
+}
+.claro .dijitComboBox .dijitArrowButtonInner {
   border: 1px solid #ffffff;
 }
 .claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
@@ -122,13 +145,18 @@
 }
 /* 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 {
+.claro .dijitSelectLabel, .claro .dijitTextBox .dijitInputInner, .claro .dijitValidationTextBox .dijitValidationContainer {
   padding: 1px 0;
 }
 .claro .dijitComboBox .dijitButtonNode {
   background-color: #efefef;
-  background-image: url("../form/images/formHighlight.png");
+  background-image: url("../images/standardGradient.png");
   background-repeat: repeat-x;
+  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  _background-image: none;
 }
 /* Arrow "hover" effect:
  * The arrow button should change color whenever the mouse is in a position such that clicking it
@@ -144,9 +172,18 @@
 /* Arrow Button change when drop down is open */
 .claro .dijitComboBox .dijitHasDropDownOpen {
   background-color: #7dbdfa;
-  background-position: 0 -177px;
+  background-image: url("../images/activeGradient.png");
+  background-repeat: repeat-x;
+  background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
+  background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
+  background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
+  _background-image: none;
   padding: 1px;
 }
+.dj_iequirks .claro .dijitComboBox .dijitHasDropDownOpen {
+  padding: 1px 0;
+}
 .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
   background-position: -70px 53%;
   border: 0 none;
@@ -166,10 +203,6 @@
   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;
 }
diff --git a/lib/dijit/themes/claro/form/Common.less b/lib/dijit/themes/claro/form/Common.less
index 742a43ff7..3c625f46f 100644
--- a/lib/dijit/themes/claro/form/Common.less
+++ b/lib/dijit/themes/claro/form/Common.less
@@ -13,15 +13,19 @@
 	color: @text-color;
 }
 
-.claro .dijitTextBoxError .dijitValidationContainer {
+.claro .dijitValidationTextBoxError .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 {
+
+.claro .dijitTextBoxError .dijitValidationContainer {
+	border-left-width: 1px;
+}
+
+.claro .dijitValidationTextBoxError .dijitValidationIcon {
 	width: 0;
 	background-color: transparent !important; /* so the INPUT doesn't obscure the border in rtl+a11y */
 }
@@ -35,12 +39,15 @@
 .claro .dijitInputField .dijitPlaceHolder {
 	padding: @textbox-padding;
 }
+
+.claro .dijitSelect .dijitInputField,
 .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,
@@ -48,6 +55,8 @@
 	padding: @textbox-padding - 1px;
 }
 
+.claro .dijitSelect,
+.claro .dijitSelect .dijitButtonContents,
 .claro .dijitTextBox,
 .claro .dijitTextBox .dijitButtonNode {
 	/* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */
@@ -55,70 +64,84 @@
 	.transition-property(background-color, border);
  	.transition-duration(.35s);
 }
+
+.claro .dijitSelect,
 .claro .dijitTextBox {
 	background-color: @textbox-background-color;
 }
 
 /* hover */
+.claro .dijitSelectHover,
+.claro .dijitSelectHover .dijitButtonContents,
 .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;
+	.textbox-background-image;
 }
 
 /* error state */
+.claro .dijitSelectError,
+.claro .dijitSelectError .dijitButtonContents,
 .claro .dijitTextBoxError,
 .claro .dijitTextBoxError .dijitButtonNode {
 	border-color: @error-border-color;
 }
-.claro .dijitTextBoxError,
-.claro .dijitTextBoxError .dijitInputContainer {
-	background-color: @textbox-error-background-color;
-}
 
 /* focused state */
+.claro .dijitSelectFocused,
+.claro .dijitSelectFocused .dijitButtonContents,
 .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;
+	.textbox-background-image;
 }
 .claro .dijitTextBoxFocused .dijitInputContainer {
 	background: @textbox-focused-background-color;
 }
 
+.claro .dijitSelectErrorFocused,
+.claro .dijitSelectErrorFocused .dijitButtonContents,
 .claro .dijitTextBoxErrorFocused,
 .claro .dijitTextBoxErrorFocused .dijitButtonNode {
 	border-color: @error-focused-border-color;
 }
 
 /* disabled state */
+.claro .dijitSelectDisabled,
+.claro .dijitSelectDisabled .dijitButtonContents,
 .claro .dijitTextBoxDisabled,
 .claro .dijitTextBoxDisabled .dijitButtonNode {
 	border-color: @disabled-border-color;
 }
+
+.claro .dijitSelectDisabled,
 .claro .dijitTextBoxDisabled,
 .claro .dijitTextBoxDisabled .dijitInputContainer {
 	background-color: @textbox-disabled-background-color;
 	background-image: none;
 }
+
+.claro .dijitSelectDisabled,
 .claro .dijitTextBoxDisabled,
 .claro .dijitTextBoxDisabled .dijitInputInner {
 	color: @disabled-text-color;
 }
-.dj_webkit .claro .dijitTextBoxDisabled input {
+
+.dj_webkit .claro .dijitDisabled 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%)
@@ -128,12 +151,16 @@
 
 /* Input boxes with an arrow (for a drop down) */
 
+.claro .dijitSelect .dijitArrowButtonInner,
 .claro .dijitComboBox .dijitArrowButtonInner {
 	background-image: url("../@{image-form-common-arrows}");
 	background-position:-35px 53%;
 	background-repeat: no-repeat;
 	margin: 0;
 	width:16px;
+}
+
+.claro .dijitComboBox .dijitArrowButtonInner {
 	border: 1px solid @arrowbutton-inner-border-color;	// white gutter around the arrow button
 }
 
@@ -147,15 +174,15 @@
 
 /* Add 1px vertical padding to the <input> where user types and the validation icon,
    to match the 1px border on arrow button */
+.claro .dijitSelectLabel,
 .claro .dijitTextBox .dijitInputInner,
-.claro .dijitTextBox .dijitValidationContainer {
+.claro .dijitValidationTextBox .dijitValidationContainer {
 	padding: 1px 0;
 }
 
 .claro .dijitComboBox .dijitButtonNode {
 	background-color: @arrowbutton-background-color;
-	background-image: url("../@{image-form-highlight}");
-	background-repeat:repeat-x;
+	.standard-gradient("../");
 }
 
 /* Arrow "hover" effect:
@@ -167,6 +194,7 @@
 .claro .dijitComboBox .dijitDownArrowButtonHover {
 	background-color:@arrowbutton-hovered-background-color;
 }
+
 .claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner,
 .claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner {
 	background-position:-70px 53%;
@@ -175,9 +203,14 @@
 /* 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;
+	.active-gradient("../");
 	padding: 1px;		// Since no border on arrow button (see rule below)
 }	
+
+.dj_iequirks .claro .dijitComboBox .dijitHasDropDownOpen {
+	padding: 1px 0;
+}
+
 .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
 	background-position:-70px 53%;
 	border: 0 none;
@@ -199,14 +232,10 @@
 	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/lib/dijit/themes/claro/form/Common_rtl.css b/lib/dijit/themes/claro/form/Common_rtl.css
index 74827c16f..f5206c196 100644
--- a/lib/dijit/themes/claro/form/Common_rtl.css
+++ b/lib/dijit/themes/claro/form/Common_rtl.css
@@ -1,10 +1,5 @@
 /* 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;
+  border-left-width: 0 !important;
+  border-right-width: 1px !important;
 }
diff --git a/lib/dijit/themes/claro/form/Common_rtl.less b/lib/dijit/themes/claro/form/Common_rtl.less
index fd4975a51..7c9952993 100644
--- a/lib/dijit/themes/claro/form/Common_rtl.less
+++ b/lib/dijit/themes/claro/form/Common_rtl.less
@@ -2,12 +2,7 @@
 
 @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;
+	border-left-width: 0 !important;
+	border-right-width: 1px !important;
 }
diff --git a/lib/dijit/themes/claro/form/NumberSpinner.css b/lib/dijit/themes/claro/form/NumberSpinner.css
index fcc804969..70603b7e7 100644
--- a/lib/dijit/themes/claro/form/NumberSpinner.css
+++ b/lib/dijit/themes/claro/form/NumberSpinner.css
@@ -35,9 +35,13 @@
 .claro .dijitSpinner .dijitArrowButton {
   width: auto;
   background-color: #efefef;
-  background-image: url("../form/images/formHighlight.png");
-  background-position: 0 0;
+  background-image: url("../images/standardGradient.png");
   background-repeat: repeat-x;
+  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  _background-image: none;
   overflow: hidden;
 }
 .dj_iequirks .claro .dijitSpinner .dijitArrowButton {
@@ -70,7 +74,10 @@
   /* compensate for inner border */
 
 }
-.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner, .dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner {
+.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner,
+.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner,
+.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner,
+.dj_ie8 .claro .dijitSpinner .dijitArrowButtonInner {
   margin-top: 0;
   /* since its bottom aligned */
 
@@ -104,7 +111,13 @@
 /* mouse down status */
 .claro .dijitSpinner .dijitDownArrowButtonActive, .claro .dijitSpinner .dijitUpArrowButtonActive {
   background-color: #7dbefa;
-  background-position: 0 -177px;
+  background-image: url("../images/activeGradient.png");
+  background-repeat: repeat-x;
+  background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
+  background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
+  background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
+  _background-image: none;
 }
 .claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {
   /* hide inner border while button is depressed */
diff --git a/lib/dijit/themes/claro/form/NumberSpinner.less b/lib/dijit/themes/claro/form/NumberSpinner.less
index 1c79d3a37..e15c7821d 100644
--- a/lib/dijit/themes/claro/form/NumberSpinner.less
+++ b/lib/dijit/themes/claro/form/NumberSpinner.less
@@ -37,9 +37,7 @@
 .claro .dijitSpinner .dijitArrowButton {
 	width:auto;
 	background-color: @arrowbutton-background-color;
-	background-image: url("../@{image-form-highlight}");
-	background-position:0 0;
-	background-repeat:repeat-x;
+	.standard-gradient("../");
 	overflow: hidden;
 }
 .dj_iequirks .claro .dijitSpinner .dijitArrowButton {
@@ -68,8 +66,10 @@
 	margin: -1px 0 -1px 0;	/* compensate for inner border */
 }
 
+.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner,
 .dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner,
-.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner {
+.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner,
+.dj_ie8 .claro .dijitSpinner .dijitArrowButtonInner {
 	margin-top: 0; /* since its bottom aligned */
 }
 
@@ -112,7 +112,7 @@
 .claro .dijitSpinner .dijitDownArrowButtonActive,
 .claro .dijitSpinner .dijitUpArrowButtonActive {
 	background-color: #7dbefa;		// TODO.  Mailed Jason about inconsistent ComboBox/Spinner behavior.
-	background-position:0 -177px;
+	.active-gradient("../");
 }
 .claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner,
 .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {
diff --git a/lib/dijit/themes/claro/form/Select.css b/lib/dijit/themes/claro/form/Select.css
index bfbca4ec8..5158dbd17 100644
--- a/lib/dijit/themes/claro/form/Select.css
+++ b/lib/dijit/themes/claro/form/Select.css
@@ -16,82 +16,69 @@
  * 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 .dijitArrowButtonContainer {
+  border: 1px solid #ffffff;
 }
 .claro .dijitSelect .dijitArrowButton {
   padding: 0;
-  border: 1px solid #ffffff;
-  border-top: none;
   background-color: #efefef;
-  background-image: url("../form/images/formHighlight.png");
+  background-image: url("../images/standardGradient.png");
   background-repeat: repeat-x;
+  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
+  _background-image: none;
 }
 .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-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
+  background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
+  background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
+  background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
   background-repeat: repeat-x;
 }
-.claro .dijitSelectHover .dijitButtonContents {
+.claro .dijitSelectFocused, .claro .dijitSelectHover {
   border-color: #759dc0;
 }
 .claro .dijitSelectHover .dijitArrowButton {
   background-color: #abd6ff;
 }
 .claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {
-  background-position: -70px 70%;
+  background-position: -70px 53%;
 }
 /* focused status */
-.claro .dijitSelectFocused {
-  border: 1px solid #759dc0;
-}
-.claro .dijitSelectFocused .dijitButtonContents {
-  border-color: #759dc0;
-}
 .claro .dijitSelectFocused .dijitArrowButton {
   background-color: #7dbefa;
-  background-position: 0 -177px;
+  background-image: url("../images/activeGradient.png");
+  background-repeat: repeat-x;
+  background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
+  background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
+  background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
+  _background-image: none;
+}
+.claro .dijitSelectFocused .dijitArrowButton {
   border: none;
-  padding: 0 1px;
+  padding: 1px;
 }
 .claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner {
-  background-position: -70px 70%;
-  margin-bottom: 1px;
+  background-position: -70px 53%;
 }
 /* disable status */
 .claro .dijitSelectDisabled {
-  border: 1px solid #d3d3d3;
+  border-color: #d3d3d3;
   background-color: #efefef;
   background-image: none;
   color: #818181;
 }
-.claro .dijitSelectDisabled .dijitArrowButton {
-  background-color: #efefef;
-}
 .claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner {
-  background-position: 0 70%;
+  background-position: 0 53%;
 }
 /* Dropdown menu style for select */
 .claro .dijitSelectMenu td.dijitMenuItemIconCell, .claro .dijitSelectMenu td.dijitMenuArrowCell {
diff --git a/lib/dijit/themes/claro/form/Select.less b/lib/dijit/themes/claro/form/Select.less
index 0e7426112..3c2cac682 100644
--- a/lib/dijit/themes/claro/form/Select.less
+++ b/lib/dijit/themes/claro/form/Select.less
@@ -19,101 +19,75 @@
 
 @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 .dijitArrowButtonContainer {
+	border: 1px solid @arrowbutton-inner-border-color;
 }
 
 .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;
+	.standard-gradient("../");
 }
 
 .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}");
+	.textbox-background-image;
 	background-repeat: repeat-x;
 }
 
-.claro .dijitSelectHover .dijitButtonContents {
+.claro .dijitSelectFocused,
+.claro .dijitSelectHover {
 	border-color:@hovered-border-color;
 }
 
 .claro .dijitSelectHover .dijitArrowButton {
 	background-color:@arrowbutton-hovered-background-color;
 }
+
 .claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {
-	background-position:-70px 70%;
+	background-position:-70px 53%;
 }
 
 /* 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;
+	.active-gradient("../");
+}
+
+.claro .dijitSelectFocused .dijitArrowButton {
 	border: none;
-	padding: 0 1px;
+	padding: 1px;
 }
+
 .claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner {
-	background-position:-70px 70%;
-	margin-bottom: 1px;
+	background-position:-70px 53%;
 }
 
 /* disable status */
 .claro .dijitSelectDisabled {
-	border: 1px solid @disabled-border-color;
+	border-color: @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%
+	background-position:0 53%
 }
 
 /* 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;
diff --git a/lib/dijit/themes/claro/form/Select_rtl.css b/lib/dijit/themes/claro/form/Select_rtl.css
deleted file mode 100644
index a14d4ec42..000000000
--- a/lib/dijit/themes/claro/form/Select_rtl.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.claro .dijitSelectRtl .dijitButtonContents {
-  border-right-width: 0;
-  border-left-width: 1px;
-}
diff --git a/lib/dijit/themes/claro/form/Select_rtl.less b/lib/dijit/themes/claro/form/Select_rtl.less
deleted file mode 100644
index ffa40dc44..000000000
--- a/lib/dijit/themes/claro/form/Select_rtl.less
+++ /dev/null
@@ -1,6 +0,0 @@
-@import "../variables";
-
-.claro .dijitSelectRtl .dijitButtonContents {
-	border-right-width: 0;
-	border-left-width: 1px;
-}
diff --git a/lib/dijit/themes/claro/form/Slider.css b/lib/dijit/themes/claro/form/Slider.css
index eb82e17ad..b704a1b56 100644
--- a/lib/dijit/themes/claro/form/Slider.css
+++ b/lib/dijit/themes/claro/form/Slider.css
@@ -63,7 +63,7 @@
   background-image: none;
   border-color: #d3d3d3;
 }
-.claro .dijitRuleLabel {
+.claro .dijitRuleLabelsContainer {
   color: #000000;
 }
 /* Horizontal Slider */
@@ -71,16 +71,14 @@
   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;
+  background-image: -moz-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px);
+  background-image: -webkit-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px);
+  background-image: -o-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px);
+  background-image: linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px);
 }
 .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;
 }
@@ -91,24 +89,26 @@
   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;
+  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
 }
 .claro .dijitSliderFocused .dijitSliderRemainingBarH, .claro .dijitSliderFocused .dijitSliderRightBumper {
-  background-position: 0 -9px;
   background-color: #ffffff;
   border-color: #759dc0;
+  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
 }
 .claro .dijitSliderDisabled .dijitSliderProgressBarH, .claro .dijitSliderDisabled .dijitSliderLeftBumper {
   background-color: #d3d3d3;
@@ -124,16 +124,14 @@
   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;
+  background-image: -moz-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px);
+  background-image: -webkit-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px);
+  background-image: -o-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px);
+  background-image: linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px);
 }
 .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;
 }
@@ -144,20 +142,26 @@
   border-top: solid 1px #b5bcc7;
 }
 .claro .dijitSliderHover .dijitSliderProgressBarV, .claro .dijitSliderHover .dijitSliderBottomBumper {
-  background-position: -36px 0;
   background-color: #abd6ff;
+  border-color: #759dc0;
 }
 .claro .dijitSliderHover .dijitSliderRemainingBarV, .claro .dijitSliderHover .dijitSliderTopBumper {
-  background-position: 0 0;
   background-color: #ffffff;
+  border-color: #759dc0;
 }
 .claro .dijitSliderFocused .dijitSliderProgressBarV, .claro .dijitSliderFocused .dijitSliderBottomBumper {
-  background-position: -56px 0;
   background-color: #abd6ff;
+  border-color: #759dc0;
+  -webkit-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2);
 }
 .claro .dijitSliderFocused .dijitSliderRemainingBarV, .claro .dijitSliderFocused .dijitSliderTopBumper {
-  background-position: -18px 0;
   background-color: #ffffff;
+  border-color: #759dc0;
+  -webkit-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2);
 }
 .claro .dijitSliderDisabled .dijitSliderProgressBarV, .claro .dijitSliderDisabled .dijitSliderBottomBumper {
   background-color: #d3d3d3;
@@ -317,13 +321,3 @@
   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/lib/dijit/themes/claro/form/Slider.less b/lib/dijit/themes/claro/form/Slider.less
index db0f8cb24..2c5bfe914 100644
--- a/lib/dijit/themes/claro/form/Slider.less
+++ b/lib/dijit/themes/claro/form/Slider.less
@@ -66,7 +66,7 @@
 	background-image: none;
 	border-color: @disabled-border-color;
 }
-.claro .dijitRuleLabel {
+.claro .dijitRuleLabelsContainer {
 	color: @text-color;
 }
 
@@ -77,17 +77,12 @@
 }
 .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;
+	.alpha-white-gradient (top, 1,0px, 1,1px, 0,2px);
 }
 .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;
 }
@@ -99,27 +94,25 @@
 }
 .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;
+	.box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2));
 }
 .claro .dijitSliderFocused .dijitSliderRemainingBarH,
 .claro .dijitSliderFocused .dijitSliderRightBumper{
-	background-position:0 -9px;
 	background-color: @slider-focused-remainingbar-background-color;
 	border-color: @focused-border-color;
+	.box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2));
 }
 .claro .dijitSliderDisabled .dijitSliderProgressBarH,
 .claro .dijitSliderDisabled .dijitSliderLeftBumper{
@@ -138,17 +131,12 @@
 }
 .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;
+	.alpha-white-gradient (left, 1,0px, 0,1px);
 }
 .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;
 }
@@ -160,23 +148,25 @@
 }
 .claro .dijitSliderHover .dijitSliderProgressBarV,
 .claro .dijitSliderHover .dijitSliderBottomBumper{
-	background-position:-36px 0;
 	background-color: @slider-hovered-fullbar-background-color;
+	border-color: @hovered-border-color;
 }
 .claro .dijitSliderHover .dijitSliderRemainingBarV,
 .claro .dijitSliderHover .dijitSliderTopBumper{
-	background-position:0 0;
 	background-color: @slider-hovered-remainingbar-background-color;
+	border-color: @hovered-border-color;
 }
 .claro .dijitSliderFocused .dijitSliderProgressBarV,
 .claro .dijitSliderFocused .dijitSliderBottomBumper{
-	background-position:-56px 0;
 	background-color: @slider-focused-fullbar-background-color;
+	border-color: @focused-border-color;
+	.box-shadow(inset 1px 0px 1px rgba(0, 0, 0, 0.2));
 }
 .claro .dijitSliderFocused .dijitSliderRemainingBarV,
 .claro .dijitSliderFocused .dijitSliderTopBumper{
-	background-position:-18px 0;
 	background-color: @slider-focused-remainingbar-background-color;
+	border-color: @focused-border-color;
+	.box-shadow(inset 1px 0px 1px rgba(0, 0, 0, 0.2));
 }
 .claro .dijitSliderDisabled .dijitSliderProgressBarV,
 .claro .dijitSliderDisabled .dijitSliderBottomBumper{
@@ -352,14 +342,3 @@
 	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/lib/dijit/themes/claro/form/images/button.png b/lib/dijit/themes/claro/form/images/button.png
deleted file mode 100644
index cb787cb2c..000000000
--- a/lib/dijit/themes/claro/form/images/button.png
+++ /dev/null
diff --git a/lib/dijit/themes/claro/form/images/buttonDisabled.png b/lib/dijit/themes/claro/form/images/buttonDisabled.png
new file mode 100644
index 000000000..faf57ba1d
--- /dev/null
+++ b/lib/dijit/themes/claro/form/images/buttonDisabled.png
diff --git a/lib/dijit/themes/claro/form/images/buttonDisabled.svg b/lib/dijit/themes/claro/form/images/buttonDisabled.svg
new file mode 100644
index 000000000..72a51a017
--- /dev/null
+++ b/lib/dijit/themes/claro/form/images/buttonDisabled.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" ?>
+<!--
+	Source file for buttonDisabled.png, which is used by IE7-9 for Button gradients.
+	Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
+
+	Output should match gradients defined in Button.css.  It is however an approximation, since generated
+	output has a constant height, rather than matching the height of each button.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="18px" viewBox="0 0 1 18" preserveAspectRatio="none">
+
+	<defs>
+		<linearGradient id="disabled" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%">
+			<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
+			<stop offset="50%" stop-color="#ffffff" stop-opacity="0"/>
+		</linearGradient>
+	</defs>
+
+	<!--
+		Swatch for disabled buttons.   It will only fill the top part of the disabled buttons.
+		The bottom of disabled buttons are pure background-color
+	-->
+	<rect x="0" y="0" width="1" height="18" fill="url(#disabled)"/>
+</svg>
\ No newline at end of file
diff --git a/lib/dijit/themes/claro/form/images/buttonEnabled.png b/lib/dijit/themes/claro/form/images/buttonEnabled.png
new file mode 100644
index 000000000..0932a9947
--- /dev/null
+++ b/lib/dijit/themes/claro/form/images/buttonEnabled.png
diff --git a/lib/dijit/themes/claro/form/images/buttonEnabled.svg b/lib/dijit/themes/claro/form/images/buttonEnabled.svg
new file mode 100644
index 000000000..d9e564ab8
--- /dev/null
+++ b/lib/dijit/themes/claro/form/images/buttonEnabled.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" ?>
+<!--
+	Source file for buttonEnabled.png, which is used by IE7-9 for Button gradients.
+	Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
+
+	Output should match gradients defined in Button.css.  It is however an approximation, since generated
+	output has a constant height, rather than matching the height of each button.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="149px" viewBox="0 0 1 149" preserveAspectRatio="none">
+
+	<defs>
+		<linearGradient id="enabled" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%">
+			<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
+			<stop offset="2%" stop-color="#ffffff" stop-opacity="0"/>
+			<stop offset="15%" stop-color="#ffffff" stop-opacity="0.7"/> <!-- near bottom of average height buttons -->
+		</linearGradient>
+	</defs>
+
+	<!--
+		Swatch for enabled buttons.   It's 149px tall to account for tall buttons, but usually
+		only the top will be visible.
+	-->
+	<rect x="0" y="0" width="1" height="149" fill="url(#enabled)"/>
+</svg>
\ No newline at end of file
diff --git a/lib/dijit/themes/claro/form/images/button_grad_d.png b/lib/dijit/themes/claro/form/images/button_grad_d.png
deleted file mode 100644
index 3a71a4653..000000000
--- a/lib/dijit/themes/claro/form/images/button_grad_d.png
+++ /dev/null
diff --git a/lib/dijit/themes/claro/form/images/formHighlight.png b/lib/dijit/themes/claro/form/images/formHighlight.png
deleted file mode 100644
index f90eb25ba..000000000
--- a/lib/dijit/themes/claro/form/images/formHighlight.png
+++ /dev/null
diff --git a/lib/dijit/themes/claro/form/images/shadow.png b/lib/dijit/themes/claro/form/images/shadow.png
deleted file mode 100644
index 72d60e628..000000000
--- a/lib/dijit/themes/claro/form/images/shadow.png
+++ /dev/null
diff --git a/lib/dijit/themes/claro/form/images/sliderHorizontal.png b/lib/dijit/themes/claro/form/images/sliderHorizontal.png
deleted file mode 100644
index d769a6489..000000000
--- a/lib/dijit/themes/claro/form/images/sliderHorizontal.png
+++ /dev/null
diff --git a/lib/dijit/themes/claro/form/images/sliderVertical.png b/lib/dijit/themes/claro/form/images/sliderVertical.png
deleted file mode 100644
index 9d69d04c2..000000000
--- a/lib/dijit/themes/claro/form/images/sliderVertical.png
+++ /dev/null
diff --git a/lib/dijit/themes/claro/form/images/textBox_back.png b/lib/dijit/themes/claro/form/images/textBox_back.png
deleted file mode 100644
index dfc752afe..000000000
--- a/lib/dijit/themes/claro/form/images/textBox_back.png
+++ /dev/null