upgrade dojo to 1.8.3 (refs #570)

140 files changed, 1898 insertions, 1812 deletions

diff --git a/lib/dijit/themes/claro/Calendar.css b/lib/dijit/themes/claro/Calendar.css
index a0f959759..1b0ddaed0 100644
--- a/lib/dijit/themes/claro/Calendar.css
+++ b/lib/dijit/themes/claro/Calendar.css
@@ -33,15 +33,18 @@
  */
 .claro .dijitCalendar {
   border: solid 1px #b5bcc7;
+  border-collapse: separate;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
   background-color: #cfe5fa;
-  background-image: url("images/calendarContainerImages.png");
-  background-position: 0 -448px;
+  background-image: url("images/calendar.png");
   background-repeat: repeat-x;
+  background-image: -moz-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%);
+  background-image: -webkit-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%);
+  background-image: -o-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%);
   text-align: center;
   padding: 6px 5px 3px 5px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  border-collapse: separate;
 }
 .dj_ie6 .claro .dijitCalendar {
   background-image: none;
@@ -50,7 +53,7 @@
   border: none;
 }
 .claro .dijitCalendarHover, .claro .dijitCalendar:hover, .claro .dijitCalendarActive {
-  /* treat dijitCalenderActive like hover since there's
+  /* treat dijitCalendarActive like hover since there's
 	 * no concept of clicking a Calendar as a whole (although you can click things inside the calendar)
 	 */
 
@@ -113,9 +116,6 @@
 .claro .dijitCalendarDateTemplate {
   text-align: center;
   background-color: #ffffff;
-  background-image: url("images/calendarContainerImages.png");
-  background-position: 0 0;
-  background-repeat: repeat-x;
   border-bottom: 1px solid #d3d3d3;
   padding-top: 0;
   font-size: 0.909em;
@@ -215,8 +215,6 @@
   background-color: #7dbdfa;
 }
 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel, .claro .dijitCalendarEnabledDate:active .dijitCalendarDateLabel {
-  background-image: url("images/calendarContainerImages.png");
-  background-position: 0 -300px;
   background-color: #7dbdfa;
   border: solid 1px #ffffff;
   -webkit-transition-duration: 0.1s;
@@ -249,13 +247,13 @@
   margin-right: -4px;
 }
 .claro .dijitCalendar .dijitDropDownButton .dijitButtonNode {
-  background-color: transparent;
-  background-image: none;
   padding: 0 3px 0 2px;
   border: solid 1px #b5bcc7;
   -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-color: transparent;
+  background-image: none;
 }
 .claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode, .claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode {
   background-color: #e5f2fe;
@@ -276,9 +274,12 @@
   padding: 2px 0;
 }
 .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover, .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover {
-  background-color: #abd6ff;
   border-color: #759dc0;
   border-width: 1px 0;
-  background-image: url("images/commonHighlight.png");
-  background-repeat: repeat-x;
+  background-color: #abd6ff;
+  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
+  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
+  background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= #ffffff , endColorstr= #abd6ff );
 }
diff --git a/lib/dijit/themes/claro/Calendar.less b/lib/dijit/themes/claro/Calendar.less
index 55decd3b4..8b8f5794f 100644
--- a/lib/dijit/themes/claro/Calendar.less
+++ b/lib/dijit/themes/claro/Calendar.less
@@ -35,25 +35,28 @@
 @import "variables";
 
 .claro .dijitCalendar {
-	border:solid 1px @border-color;
+	border: solid 1px @border-color;
+	border-collapse: separate;	// in case user CSS has set border-collapse: collapse for tables
+	.border-radius(4px);
+
+	// Background color and alpha-gradient
 	background-color: @calendar-background-color;
-	background-image:url(@image-calendar-container);
-	background-position:0 -448px;
-	background-repeat:repeat-x;
+	background-image: url("images/calendar.png");	// fallback for browsers that don't support CSS gradients
+	background-repeat: repeat-x;	// so bottom of calendar isn't affected by gradient image repeating
+	.alpha-white-gradient(1, 0px, 0.4, 2px, 0, 100%);
+
 	text-align:center;
 	padding:6px 5px 3px 5px;
-	.border-radius(4px);
-	border-collapse: separate;	// in case user CSS has set border-collapse: collapse for tables
 }
 .dj_ie6 .claro .dijitCalendar {
-	background-image:none;
+	background-image:none;	// because on IE6 background-image overrides background-color
 }
 .claro .dijitCalendar img {
 	border:none;
 }
 .claro .dijitCalendarHover, .claro .dijitCalendar:hover,
 .claro .dijitCalendarActive {
-	/* treat dijitCalenderActive like hover since there's
+	/* treat dijitCalendarActive like hover since there's
 	 * no concept of clicking a Calendar as a whole (although you can click things inside the calendar)
 	 */
 	background-color: @hovered-background-color;
@@ -120,9 +123,6 @@
 .claro .dijitCalendarDateTemplate {
 	text-align:center;
 	background-color:@calendar-currentmonth-background-color;
-	background-image:url(@image-calendar-container);
-	background-position:0 0;
-	background-repeat:repeat-x;
 	border-bottom: 1px solid @minor-border-color;
 	padding-top:0;
 	font-size:0.909em;
@@ -209,8 +209,6 @@
 }
 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel,
 .claro .dijitCalendarEnabledDate:active .dijitCalendarDateLabel {
-	background-image:url(@image-calendar-container);
-	background-position:0 -300px;
 	background-color: @calendar-date-pressed-background-color;
 	border:solid 1px @calendar-date-pressed-border-color;
 	.transition-duration(.1s);
@@ -244,11 +242,13 @@
 	margin-right:-4px;
 }
 .claro .dijitCalendar .dijitDropDownButton .dijitButtonNode {
-	background-color: transparent;
-	background-image: none;
 	padding: 0 3px 0 2px;
 	border:solid 1px @border-color;
 	.box-shadow(0 0 0 rgba(0,0,0,0));
+
+    // Override background settings from vanilla .dijitButtonNode.   We want to inherit background of Calendar.
+	background-color: transparent;
+	background-image: none;
 }
 .claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode,
 .claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode {
@@ -271,9 +271,7 @@
 }
 .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover,
 .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover {
-	background-color: @hovered-background-color;
 	border-color: @hovered-border-color;
 	border-width:1px 0;
-	background-image: url(@image-common-highlight);
-	background-repeat:repeat-x;
+	.gradient-and-filter(@hovered-background-color, 70, 0);
 }
diff --git a/lib/dijit/themes/claro/ColorPalette.css b/lib/dijit/themes/claro/ColorPalette.css
index a23b2dfd0..cc768ac60 100644
--- a/lib/dijit/themes/claro/ColorPalette.css
+++ b/lib/dijit/themes/claro/ColorPalette.css
@@ -20,7 +20,7 @@
  *		.dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg
  *		adds border for active or selected state
  */
-.claro  .dijitColorPalette {
+.claro .dijitColorPalette {
   border: 1px solid #b5bcc7;
   background: #ffffff;
   -moz-border-radius: 0;
diff --git a/lib/dijit/themes/claro/Common.css b/lib/dijit/themes/claro/Common.css
index 83f6128c1..8984e1654 100644
--- a/lib/dijit/themes/claro/Common.css
+++ b/lib/dijit/themes/claro/Common.css
@@ -20,12 +20,44 @@
 
   outline: 1px dotted #494949;
 }
-/* Drag and Drop */
-.claro .dojoDndItemBefore, .claro .dojoDndItemAfter {
-  border-top: 1px solid #759dc0;
+/* Drag and Drop*/
+.claro .dojoDndItem {
+  border-color: rgba(0, 0, 0, 0);
+  -webkit-transition-duration: 0.25s;
+  -moz-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+  -webkit-transition-property: background-color, border-color;
+  -moz-transition-property: background-color, border-color;
+  transition-property: background-color, border-color;
 }
 .claro .dojoDndItemOver {
-  cursor: pointer;
+  background-color: #abd6ff;
+  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;
+  padding: 1px;
+  border: solid 1px #759dc0;
+  color: #000000;
+}
+.claro .dojoDndItemAnchor, .claro .dojoDndItemSelected {
+  background-color: #cfe5fa;
+  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;
+  padding: 1px;
+  border: solid 1px #759dc0;
+  color: #000000;
+}
+.claro .dojoDndItemBefore, .claro .dojoDndItemAfter {
+  border-color: #759dc0;
 }
 .claro table.dojoDndAvatar {
   border: 1px solid #b5bcc7;
diff --git a/lib/dijit/themes/claro/Common.less b/lib/dijit/themes/claro/Common.less
index 248fc1ab8..078d6fdca 100644
--- a/lib/dijit/themes/claro/Common.less
+++ b/lib/dijit/themes/claro/Common.less
@@ -20,14 +20,36 @@
 	outline: 1px dotted @focus-outline-color;
 }
 
-/* Drag and Drop */
-.claro .dojoDndItemBefore,
-.claro .dojoDndItemAfter{
-	border-top: 1px solid @dnd-dropseparator-color;
+/* Drag and Drop*/
+.claro .dojoDndItem {
+	border-color: rgba(0,0,0,0);	// rgba() instead of none to prevent flash on hover fade-in
+	.transition-duration(.25s);
+	.transition-property(background-color, border-color)
 }
 .claro .dojoDndItemOver {
-	cursor:pointer;
-	}
+    // Hovered item.  Matches dijitTreeRowHover.
+	background-color:@hovered-background-color;
+	.standard-gradient;
+	padding: 1px;	// reduce from 2px in dijit.css
+	border:solid 1px @hovered-border-color;
+	color:@hovered-text-color;
+}
+.claro .dojoDndItemAnchor,
+.claro .dojoDndItemSelected {
+    // Selected items(s).   Matches dijitTreeRowSelected.
+	background-color:@selected-background-color;
+	.standard-gradient;
+	padding: 1px;	// reduce from 2px in dijit.css
+	border:solid 1px @selected-border-color;
+	color:@selected-text-color;
+}
+
+.claro .dojoDndItemBefore,
+.claro .dojoDndItemAfter {
+    // line to indicate that user is dropping before/after this dojoDndItem
+	border-color: @dnd-dropseparator-color;
+}
+
 .claro table.dojoDndAvatar {
 	border: 1px solid @border-color;
 	border-collapse: collapse;
diff --git a/lib/dijit/themes/claro/Dialog.css b/lib/dijit/themes/claro/Dialog.css
index ae0b18df6..744b649dd 100644
--- a/lib/dijit/themes/claro/Dialog.css
+++ b/lib/dijit/themes/claro/Dialog.css
@@ -56,6 +56,15 @@
   border-top: 1px solid #d3d3d3;
   margin: 10px -8px -10px;
 }
+.claro .dijitTooltipDialog .dijitDialogPaneActionBar {
+  -webkit-border-bottom-right-radius: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -moz-border-radius-bottomleft: 4px;
+  margin: 10px -10px -8px;
+}
 .claro .dijitDialogPaneActionBar .dijitButton {
   float: none;
 }
@@ -65,8 +74,13 @@
   border: 1px solid #ffffff;
   border-top: none;
   background-color: #abd6ff;
-  background-image: url("images/titlebar.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;
   padding: 5px 7px 4px 7px;
 }
 .claro .dijitDialogTitle {
@@ -121,8 +135,10 @@
   /* the part with the text */
 
   background-color: #ffffff;
-  background-image: url("images/tooltipGradient.png");
-  background-repeat: repeat-x;
+  background-image: -moz-linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px);
+  background-image: -webkit-linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px);
+  background-image: -o-linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px);
+  background-image: linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px);
   background-position: bottom;
   border: 1px solid #759dc0;
   padding: 6px 8px;
@@ -134,9 +150,6 @@
   font-size: 1em;
   color: #000000;
 }
-.dj_ie6 .claro .dijitTooltipContainer {
-  background-image: none;
-}
 .claro .dijitTooltipConnector {
   /* the arrow piece */
 
diff --git a/lib/dijit/themes/claro/Dialog.less b/lib/dijit/themes/claro/Dialog.less
index 5e74be747..8b5b38673 100644
--- a/lib/dijit/themes/claro/Dialog.less
+++ b/lib/dijit/themes/claro/Dialog.less
@@ -59,6 +59,15 @@
 	border-top: 1px solid @minor-border-color;
 	margin: 10px -8px -10px;
 }
+.claro .dijitTooltipDialog .dijitDialogPaneActionBar {
+  -webkit-border-bottom-right-radius: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -moz-border-radius-bottomleft: 4px;
+  margin: 10px -10px -8px;
+}
 .claro .dijitDialogPaneActionBar .dijitButton {
 	float: none;
 }
@@ -68,8 +77,7 @@
 	border: 1px solid @dialog-titlebar-border-color;
 	border-top:none;
 	background-color: @dialog-titlebar-background-color;
-	background-image: url(@image-titlebar);
-	background-repeat:repeat-x;
+	.standard-gradient;
 	padding: 5px 7px 4px 7px;
 }
 
@@ -123,8 +131,7 @@
 .claro .dijitTooltipContainer {
 	/* the part with the text */
 	background-color:@popup-background-color;
-	background-image:url(@image-tooltip-gradient);
-	background-repeat:repeat-x;
+	.linear-gradient(bottom, @tooltip-gradient-color 0px, @popup-background-color 10px);
 	background-position:bottom;
 	border:1px solid @popup-border-color;
 	padding:6px 8px;
@@ -134,9 +141,6 @@
 	color: @text-color;
 } 
 
-.dj_ie6 .claro .dijitTooltipContainer {
-	background-image: none;
-}
 .claro .dijitTooltipConnector {
 	/* the arrow piece */
 	border: 0;
diff --git a/lib/dijit/themes/claro/Editor.css b/lib/dijit/themes/claro/Editor.css
index 9f167f921..8d691f8b4 100644
--- a/lib/dijit/themes/claro/Editor.css
+++ b/lib/dijit/themes/claro/Editor.css
@@ -25,20 +25,20 @@
 }
 .claro .dijitEditor .dijitEditorIFrameContainer {
   background-color: #ffffff;
-  background-image: url("form/images/textBox_back.png");
   background-repeat: repeat-x;
 }
-.dj_ie6 .claro .dijitEditor .dijitEditorIFrameContainer {
-  background-image: none;
-}
 .claro .dijitEditorHover .dijitEditorIFrameContainer, .claro .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame {
   background-color: #e5f2fe;
 }
 .claro .dijitEditorFocused .dijitEditorIFrameContainer, .claro .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame {
-  /* TODO: contradicts rule above, which background-color do you want? */
-
   background-color: #ffffff;
 }
+.claro .dijitEditorHover .dijitEditorIFrameContainer, .claro .dijitEditorFocused .dijitEditorIFrameContainer {
+  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);
+}
 /* Disabled */
 .claro .dijitEditorDisabled {
   border: 1px solid #d3d3d3;
diff --git a/lib/dijit/themes/claro/Editor.less b/lib/dijit/themes/claro/Editor.less
index f74a5d462..ddc59ccb4 100644
--- a/lib/dijit/themes/claro/Editor.less
+++ b/lib/dijit/themes/claro/Editor.less
@@ -28,22 +28,20 @@
 }
 .claro .dijitEditor .dijitEditorIFrameContainer{
 	background-color: @textbox-background-color;
-	background-image: url(@image-form-textbox-background);
 	background-repeat:repeat-x;
 }
-.dj_ie6 .claro .dijitEditor .dijitEditorIFrameContainer{
-	background-image: none;
-}
 .claro .dijitEditorHover .dijitEditorIFrameContainer,
 .claro .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame{
 	background-color: @textbox-hovered-background-color;
 }
 .claro .dijitEditorFocused .dijitEditorIFrameContainer,
 .claro .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame{
-	/* TODO: contradicts rule above, which background-color do you want? */
 	background-color: @textbox-focused-background-color;
 }
-
+.claro .dijitEditorHover .dijitEditorIFrameContainer,
+.claro .dijitEditorFocused .dijitEditorIFrameContainer {
+	.textbox-background-image;
+}
 
 /* Disabled */
 .claro .dijitEditorDisabled {
diff --git a/lib/dijit/themes/claro/Menu.css b/lib/dijit/themes/claro/Menu.css
index e1c1562e8..d54f04ddc 100644
--- a/lib/dijit/themes/claro/Menu.css
+++ b/lib/dijit/themes/claro/Menu.css
@@ -4,8 +4,8 @@ There are three areas of styling for the Menu:
  
  1. The menu 
  	There are three types of menus:
- 	i)Context Menu
- 	ii)Drop down Menu
+ 	i) Context Menu
+ 	ii) Drop down Menu
  	iii) Navigation Menu
  	All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border
  	.dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect
@@ -18,7 +18,7 @@ There are three areas of styling for the Menu:
  3. Menu items - items in the menu.  
  	.dijitMenuItem - for color
  	.dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected	
- 	.dijitMenuItemActive - for bacgkround-color of an active (mousedown) menu item
+ 	.dijitMenuItemActive - for background-color of an active (mousedown) menu item
 	td.dijitMenuItemIconCell - for padding around a  menu item's icon
 	td.dijitMenuItemLabel - for padding around a menu item's label	
 	.dijitMenuSeparatorTop - for border, top border, of the separator
@@ -34,15 +34,15 @@ There are three areas of styling for the Menu:
   margin: 0;
   padding: 0;
   background-color: #efefef;
-  background-image: url("images/commonHighlight.png");
-  background-position: 0 0;
+  background-image: url("images/standardGradient.png");
   background-repeat: repeat-x;
-}
-.dj_ie6 .claro .dijitMenuBar {
-  background-image: none;
+  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 .dijitMenu {
-  background-repeat: repeat-y;
   background-color: #ffffff;
   border: 1px solid #759dc0;
   /* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */
@@ -54,16 +54,16 @@ There are three areas of styling for the Menu:
   /* above -1px makes top/bottom borders disappear on IE6 */
 
 }
+.claro .dijitMenuItem {
+  color: #000000;
+}
 .claro .dijitMenuBar .dijitMenuItem {
   padding: 6px 10px 7px;
-  background-position: 0 100px;
   margin: -1px;
 }
-.claro .dijitMenuItem {
-  background-image: url("images/menuHighlight.png");
-  background-position: 0 -40px;
-  background-repeat: repeat-x;
-  color: #000000;
+.claro .dijitMenuBar .dijitMenuItemHover, .claro .dijitMenuBar .dijitMenuItemSelected {
+  border: solid 1px #759dc0;
+  padding: 5px 9px 6px;
 }
 /* this prevents jiggling upon hover of a menu item */
 .claro .dijitMenuTable {
@@ -74,27 +74,28 @@ There are three areas of styling for the Menu:
 .claro .dijitMenuItem td {
   padding: 1px;
 }
-/* hover over a MenuBarItem */
-.claro .dijitMenuPassive .dijitMenuItemHover, .claro .dijitMenuPassive .dijitMenuItemSelected {
+/* hover over a MenuItem or MenuBarItem */
+.claro .dijitSelectMenu .dijitMenuItemHover td,
+.claro .dijitSelectMenu .dijitMenuItemSelected td,
+.claro .dijitMenuItemHover,
+.claro .dijitMenuItemSelected {
   background-color: #abd6ff;
-  border: solid 1px #759dc0;
-  background-position: 0 0;
-  color: #000000;
-  padding: 5px 9px 6px;
-}
-.claro .dijitMenuPassive .dijitMenuItemActive {
-  background-position: 0 -177px;
-}
-.dj_ie6 .claro .dijitMenuItem, .dj_ie6 .claro .dijitMenuPassive .dijitMenuItem {
-  background-image: none;
+  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;
 }
-/* MenuBarItem that has been selected and menu drops down from it */
-.claro .dijitMenuActive .dijitMenuItemHover, .claro .dijitMenuActive .dijitMenuItemSelected {
-  border: solid 1px #759dc0;
-  padding: 5px 9px 6px;
-  background-color: #abd6ff;
-  background-position: 0 0;
-  color: #000000;
+.claro .dijitMenuItemActive {
+  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;
 }
 .dj_ie .claro .dijitMenuActive .dijitMenuItemHover,
 .dj_ie .claro .dijitMenuActive .dijitMenuItemSelected,
@@ -104,13 +105,6 @@ There are three areas of styling for the Menu:
   padding-bottom: 5px;
   margin-top: -3px;
 }
-.claro .dijitMenuActive .dijitMenuItemActive {
-  background-color: #7dbdfa;
-  background-position: 0 -177px;
-}
-.claro .dijitMenuItemActive {
-  background-position: 0 -177px;
-}
 .claro td.dijitMenuItemIconCell {
   padding: 2px;
   margin: 0 0 0 4px;
@@ -162,25 +156,23 @@ There are three areas of styling for the Menu:
   margin-left: 0;
   background-image: none;
 }
-.claro .dijitComboBoxMenu .dijitMenuItem {
+.claro .dijitSelectMenu .dijitMenuItem td, .claro .dijitComboBoxMenu .dijitMenuItem {
   padding: 2px;
   border-width: 1px 0 1px 0;
   border-style: solid;
   border-color: #ffffff;
 }
-.claro .dijitComboBoxMenu .dijitMenuItemSelected {
+.claro .dijitSelectMenu .dijitMenuItemSelected td, .claro .dijitComboBoxMenu .dijitMenuItemSelected {
   color: #000000;
   border-color: #759dc0;
   background-color: #abd6ff;
 }
-.claro .dijitComboBoxMenu .dijitMenuItemHover {
+.claro .dijitSelectMenu .dijitMenuItemHover td, .claro .dijitComboBoxMenu .dijitMenuItemHover {
   color: #000000;
   border-color: #769dc0;
   background-color: #abd6ff;
-  background-position: 0 0;
 }
 .claro .dijitComboBoxMenuActive .dijitMenuItemSelected {
-  background-position: 0 -177px;
   background-color: #7dbdfa;
   /* TODO: why is this a different color than normal .dijitMenuItemSelected? */
 
diff --git a/lib/dijit/themes/claro/Menu.less b/lib/dijit/themes/claro/Menu.less
index 80467a5b6..9f4f86071 100644
--- a/lib/dijit/themes/claro/Menu.less
+++ b/lib/dijit/themes/claro/Menu.less
@@ -4,8 +4,8 @@ There are three areas of styling for the Menu:
  
  1. The menu 
  	There are three types of menus:
- 	i)Context Menu
- 	ii)Drop down Menu
+ 	i) Context Menu
+ 	ii) Drop down Menu
  	iii) Navigation Menu
  	All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border
  	.dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect
@@ -18,7 +18,7 @@ There are three areas of styling for the Menu:
  3. Menu items - items in the menu.  
  	.dijitMenuItem - for color
  	.dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected	
- 	.dijitMenuItemActive - for bacgkround-color of an active (mousedown) menu item
+ 	.dijitMenuItemActive - for background-color of an active (mousedown) menu item
 	td.dijitMenuItemIconCell - for padding around a  menu item's icon
 	td.dijitMenuItemLabel - for padding around a menu item's label	
 	.dijitMenuSeparatorTop - for border, top border, of the separator
@@ -37,15 +37,10 @@ There are three areas of styling for the Menu:
 	margin: 0;
 	padding: 0;
 	background-color: @bar-background-color;
-	background-image: url(@image-common-highlight);
-	background-position:0 0;
-	background-repeat:repeat-x;
-}
-.dj_ie6 .claro .dijitMenuBar {
-	background-image:none;
+	.standard-gradient;
 }
+
 .claro .dijitMenu {
-	background-repeat:repeat-y;
 	background-color:@menu-background-color;
 	border: 1px solid @popup-border-color;
 
@@ -55,16 +50,19 @@ There are three areas of styling for the Menu:
 .dj_ie6 .claro .dijitMenu {
 	margin: 0;	/* above -1px makes top/bottom borders disappear on IE6 */
 }
+
+.claro .dijitMenuItem {
+	color: @text-color;
+}
 .claro .dijitMenuBar .dijitMenuItem {  
 	padding: 6px 10px 7px;
-	background-position:0 100px;
 	margin:-1px;
-}	
-.claro .dijitMenuItem {
-	background-image: url(@image-menu-highlight);
-	background-position:0 -40px;
-	background-repeat:repeat-x;
-	color: @text-color;
+}
+.claro .dijitMenuBar .dijitMenuItemHover,
+.claro .dijitMenuBar .dijitMenuItemSelected {
+    // on hover or selection of MenuBar item, add border and reduce padding to compensate
+	border:solid 1px @hovered-border-color;
+	padding: 5px 9px 6px;
 }
 
 /* this prevents jiggling upon hover of a menu item */
@@ -76,50 +74,36 @@ There are three areas of styling for the Menu:
 .claro .dijitMenuItem td{
 	padding:1px;
 }
-/* hover over a MenuBarItem */
-.claro .dijitMenuPassive .dijitMenuItemHover,
-.claro .dijitMenuPassive .dijitMenuItemSelected {
+/* hover over a MenuItem or MenuBarItem */
+.claro .dijitSelectMenu .dijitMenuItemHover td,
+.claro .dijitSelectMenu .dijitMenuItemSelected td,
+.claro .dijitMenuItemHover,
+.claro .dijitMenuItemSelected {
+    // note: seems like the selected MenuItem should use @pressed-background-color
+    // and .active-gradient, but claro didn't to that
 	background-color: @hovered-background-color;
-	border:solid 1px @hovered-border-color;
-	background-position:0 0;
-	color:@text-color;
-	padding: 5px 9px 6px;
+	.standard-gradient;
 }
-.claro .dijitMenuPassive .dijitMenuItemActive{
-	background-position:0 -177px;
-}
-.dj_ie6 .claro .dijitMenuItem,
-.dj_ie6 .claro .dijitMenuPassive .dijitMenuItem {
-	background-image: none;
-}
-
-/* MenuBarItem that has been selected and menu drops down from it */
-.claro .dijitMenuActive .dijitMenuItemHover,
-.claro .dijitMenuActive .dijitMenuItemSelected {
-	border:solid 1px @hovered-border-color;
-	padding: 5px 9px 6px;
-	background-color: @hovered-background-color;
-	background-position:0 0;
-	color:@hovered-text-color;
+.claro .dijitMenuItemActive {
+    // todo: seems like the selected MenuItem should come here
+    // todo: seems like should use @pressed-background-color
+    .active-gradient;
 }
 .dj_ie .claro .dijitMenuActive .dijitMenuItemHover,
 .dj_ie .claro .dijitMenuActive .dijitMenuItemSelected,
 .dj_ie .claro .dijitMenuPassive .dijitMenuItemHover,
 .dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected {
+    // Selectivity set to override ComboBox rules below.
+    // If this rule isn't present, on IE6 hovering an item in the ComboBox drop down causes two
+    // items to be highlighted (except when hovering the first item in the list)
 	padding-top: 6px;
 	padding-bottom: 5px;
 	margin-top: -3px;
 }
-.claro .dijitMenuActive .dijitMenuItemActive{
-	background-color: @pressed-background-color;
-	background-position:0 -177px;
-}
-.claro .dijitMenuItemActive {
-	background-position:0 -177px;
-}
+
 .claro td.dijitMenuItemIconCell {
- padding: 2px;
- margin: 0 0 0 4px;
+	padding: 2px;
+	margin: 0 0 0 4px;
 }
 .claro td.dijitMenuItemLabel {
 	padding-top: 5px;
@@ -168,25 +152,26 @@ There are three areas of styling for the Menu:
 	background-image: none;
 }
 
+.claro .dijitSelectMenu .dijitMenuItem td,
 .claro .dijitComboBoxMenu .dijitMenuItem {
 	padding: @textbox-padding;	// Make drop down menu text line up with text in <input>.
 	border-width:1px 0 1px 0;
 	border-style:solid;
 	border-color: @select-dropdownitem-background-color;
 }
+.claro .dijitSelectMenu .dijitMenuItemSelected td,
 .claro .dijitComboBoxMenu .dijitMenuItemSelected {
 	color:@selected-text-color;
 	border-color:@hovered-border-color;
 	background-color:@hovered-background-color;
 }
+.claro .dijitSelectMenu .dijitMenuItemHover td,
 .claro .dijitComboBoxMenu .dijitMenuItemHover {
 	color: #000000;
 	border-color: #769dc0;
 	background-color: #abd6ff;
-	background-position: 0 0;
 }
 .claro .dijitComboBoxMenuActive .dijitMenuItemSelected {
-	background-position:0 -177px;
 	background-color: @select-dropdownitem-hovered-background-color;	/* TODO: why is this a different color than normal .dijitMenuItemSelected? */
 }
 .claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton {
diff --git a/lib/dijit/themes/claro/ProgressBar.css b/lib/dijit/themes/claro/ProgressBar.css
index 925021f7a..5716c4ae7 100644
--- a/lib/dijit/themes/claro/ProgressBar.css
+++ b/lib/dijit/themes/claro/ProgressBar.css
@@ -30,13 +30,20 @@
 .claro .dijitProgressBarEmpty {
   /* outer container and background of the bar that's not finished yet*/
 
-  background: #ffffff url("images/progressBarEmpty.png") no-repeat left;
+  background-color: #ffffff;
   border-color: #759dc0;
 }
 .claro .dijitProgressBarTile {
   /* inner container for finished portion when in 'tile' (image) mode */
 
-  background: #abd6ff url("images/progressBarFull.png") repeat-x top;
+  background-color: #abd6ff;
+  background-image: url("images/progressBarFull.png");
+  background-repeat: repeat-x;
+  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%);
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%);
+  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%);
+  background-attachment: scroll;
 }
 .dj_ie6 .claro .dijitProgressBarTile {
   background-image: none;
diff --git a/lib/dijit/themes/claro/ProgressBar.less b/lib/dijit/themes/claro/ProgressBar.less
index 8edf426a0..096618f08 100644
--- a/lib/dijit/themes/claro/ProgressBar.less
+++ b/lib/dijit/themes/claro/ProgressBar.less
@@ -32,12 +32,18 @@
 }
 .claro .dijitProgressBarEmpty {
 	/* outer container and background of the bar that's not finished yet*/
-	background: @progressbar-empty-background-color url(@image-progressbar-empty) no-repeat left;
+	background-color: @progressbar-empty-background-color;
 	border-color: @progressbar-border-color;
 }
 .claro .dijitProgressBarTile {
 	/* inner container for finished portion when in 'tile' (image) mode */
-	background: @progressbar-full-background-color url(@image-progressbar-full) repeat-x top;	
+	background-color: @progressbar-full-background-color;
+
+	// gradient background using CSS gradient, with fallback to image for IE
+	background-image: url("images/progressBarFull.png");
+	background-repeat: repeat-x;
+	.alpha-white-gradient(0.93,0px, 0.41,1px, 0.7,2px, 0,100%);
+	background-attachment: scroll;	// override strange "fixed" setting from dijit.css
 }
 .dj_ie6 .claro .dijitProgressBarTile {
 	background-image: none;
diff --git a/lib/dijit/themes/claro/README b/lib/dijit/themes/claro/README
index 3b4b4aa4e..0a254623f 100644
--- a/lib/dijit/themes/claro/README
+++ b/lib/dijit/themes/claro/README
@@ -1,41 +1,11 @@
 These are "less" files that compile into the CSS of claro.
 
----------
-Installing and running on Windows:
-
-1. Install node:
-    a) Go to https://github.com/ajaxorg/node-builds, press download button, and select "download zip"
-    b) unzip the file into C:\
-
-2. Add node environment variables:
-
-    a) open Control Panel --> click System icon --> select Advanced tab --> click Environment variables button
-    b) press "edit" on path
-    c) depending on what directory you unzipped to and the exact filenames, you will add something like
-
-	;C:\ajaxorg-node-builds-0fcee7d\win32
-
-4. To compile all the files:
-
-	C:\> cd C:\myworkspace\dijit\themes\claro
-	C:\> node compile.js
-
---------
-To install/run less version 2 on mac:
-
-1. Install Node.js
-	Download a built copy from https://github.com/ajaxorg/node-builds.
-	Alternately, go to http://nodejs.org/#download   (./configure, make, make install).
+1. Install node from http://nodejs.org/#download
 	
-2. Edit .bash_profile etc. to add node to your path
-
-	export PATH=$PATH:/opt/less/bin
-
-To compile all the files:
+2. To compile all the files:
 
   $ cd dijit/themes/claro
   $ node compile.js
 
------
 
 See http://lesscss.org/ and https://github.com/cloudhead/less.js/ for more information.
diff --git a/lib/dijit/themes/claro/TimePicker.css b/lib/dijit/themes/claro/TimePicker.css
index c8d6bb29d..847bcc192 100644
--- a/lib/dijit/themes/claro/TimePicker.css
+++ b/lib/dijit/themes/claro/TimePicker.css
@@ -35,19 +35,19 @@
 .claro .dijitTimePickerItem {
   /* dijitTimePickerItem refers to both Tick's (minor values like 2:15, 2:30, 2:45) and Marker's (major values like 2PM, 3PM) */
 
-  background-image: url("images/commonHighlight.png");
-  background-position: 0 -1px;
+  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;
   border-top: solid 1px #b5bcc7;
   border-bottom: solid 1px #b5bcc7;
   margin-right: -1px;
   margin-left: -1px;
   margin-top: -1px;
 }
-/* to make up for lack of alpha transparency in IE6 */
-.dj_ie6 .claro .dijitTimePickerItem {
-  background-image: none;
-}
 .claro .dijitTimePickerTick {
   /* minor value */
 
@@ -100,12 +100,13 @@
   border-right: none;
   border-color: #b5bcc7;
   background-color: #efefef;
-  background-image: url("images/commonHighlight.png");
-  background-position: 0 -1px;
+  background-image: url("images/standardGradient.png");
   background-repeat: repeat-x;
-}
-.dj_ie6 .claro .dijitTimePicker .dijitButtonNode {
-  background-image: none;
+  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 .dijitTimePicker .dijitArrowButtonInner {
   height: 100%;
diff --git a/lib/dijit/themes/claro/TimePicker.less b/lib/dijit/themes/claro/TimePicker.less
index a6253f7dd..0f3bf9c1a 100644
--- a/lib/dijit/themes/claro/TimePicker.less
+++ b/lib/dijit/themes/claro/TimePicker.less
@@ -34,19 +34,13 @@
 }
 .claro .dijitTimePickerItem{
 	/* dijitTimePickerItem refers to both Tick's (minor values like 2:15, 2:30, 2:45) and Marker's (major values like 2PM, 3PM) */
-	background-image: url(@image-common-highlight);
-	background-position:0 -1px;
-	background-repeat:repeat-x;
+	.standard-gradient;
 	border-top:solid 1px @border-color;
 	border-bottom:solid 1px @border-color;
 	margin-right:-1px;
 	margin-left:-1px;
 	margin-top:-1px;
 }
-/* to make up for lack of alpha transparency in IE6 */
-.dj_ie6 .claro .dijitTimePickerItem {
-	background-image: none;
-}
 .claro .dijitTimePickerTick {
 	/* minor value */
 	color:@timepicker-minorvalue-text-color;
@@ -95,12 +89,7 @@
 	border-right:none;
 	border-color:@border-color;
 	background-color: @unselected-background-color;
-	background-image: url(@image-common-highlight);
-	background-position:0 -1px;
-	background-repeat:repeat-x;
-}
-.dj_ie6 .claro .dijitTimePicker .dijitButtonNode {
-	background-image: none;
+	.standard-gradient;
 }
 .claro .dijitTimePicker .dijitArrowButtonInner{
 	height: 100%; /* hack claro.button.css */
@@ -122,3 +111,5 @@
 .claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner {
 	background-position:-70px 45%;
 }
+
+// TODO: should have active rule, for clicking a .dijitTimePickerItem
\ No newline at end of file
diff --git a/lib/dijit/themes/claro/TitlePane.css b/lib/dijit/themes/claro/TitlePane.css
index 141561506..356aef1cc 100644
--- a/lib/dijit/themes/claro/TitlePane.css
+++ b/lib/dijit/themes/claro/TitlePane.css
@@ -19,15 +19,17 @@
  */
 .claro .dijitTitlePaneTitle {
   background-color: #efefef;
-  background-image: url("images/titlebar.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;
   border: 1px solid #b5bcc7;
   padding: 0 7px 3px 7px;
   min-height: 17px;
 }
-.dj_ie6 .claro .dijitTitlePaneTitle {
-  background-image: none;
-}
 .claro .dijitTitlePaneTitleHover {
   background-color: #abd6ff;
   border-color: #759dc0;
@@ -35,7 +37,13 @@
 .claro .dijitTitlePaneTitleActive {
   background-color: #7dbdfa;
   border-color: #759dc0;
-  background-position: 0 -136px;
+  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 .dijitTitlePaneTitleFocus {
   margin-top: 3px;
diff --git a/lib/dijit/themes/claro/TitlePane.less b/lib/dijit/themes/claro/TitlePane.less
index 89da9f3d9..d899453d6 100644
--- a/lib/dijit/themes/claro/TitlePane.less
+++ b/lib/dijit/themes/claro/TitlePane.less
@@ -22,15 +22,11 @@
 
 .claro .dijitTitlePaneTitle {
 	background-color: @unselected-background-color;	// TODO: Mailed Jason, shouldn't this toggle to @selected-background-color when pane opened?
-	background-image: url(@image-titlebar);
-	background-repeat:repeat-x;
+	.standard-gradient;
 	border:1px solid @border-color;
 	padding: 0 7px 3px 7px;
 	min-height:17px;
 }
-.dj_ie6 .claro .dijitTitlePaneTitle {
-	background-image: none;
-}
 .claro .dijitTitlePaneTitleHover {
 	background-color: @hovered-background-color;
 	border-color: @hovered-border-color;
@@ -38,7 +34,7 @@
 .claro .dijitTitlePaneTitleActive {
 	background-color: @pressed-background-color;
 	border-color: @pressed-border-color;
-	background-position:0 -136px;
+	.active-gradient;
 }
 .claro .dijitTitlePaneTitleFocus {
 	margin-top:3px;
diff --git a/lib/dijit/themes/claro/Toolbar.css b/lib/dijit/themes/claro/Toolbar.css
index 18c605c66..da9cc015e 100644
--- a/lib/dijit/themes/claro/Toolbar.css
+++ b/lib/dijit/themes/claro/Toolbar.css
@@ -20,9 +20,13 @@
 .claro .dijitToolbar {
   border-bottom: 1px solid #b5bcc7;
   background-color: #efefef;
-  background-image: url("images/commonHighlight.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;
   padding: 2px 0 2px 4px;
   zoom: 1;
 }
@@ -47,13 +51,13 @@
   -webkit-transition-property: background-color;
   -moz-transition-property: background-color;
   transition-property: background-color;
-  -webkit-transition-duration: 0.3s, 0.35s;
-  -moz-transition-duration: 0.3s, 0.35s;
-  transition-duration: 0.3s, 0.35s;
-  background-image: url("images/commonHighlight.png");
-  background-position: 0 -30px;
-  background-repeat: repeat-x;
+  -webkit-transition-duration: 0.3s;
+  -moz-transition-duration: 0.3s;
+  transition-duration: 0.3s;
   background-color: rgba(171, 214, 255, 0);
+  background-image: none;
+  /* cancel gradient for normal buttons, we don't want any gradient besides toolbar's on non-hovered buttons */
+
 }
 .dj_ie .claro .dijitToolbar .dijitButton .dijitButtonNode,
 .dj_ie .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
@@ -64,15 +68,6 @@
   /* for IE, which doesn't understand rgba(...) */
 
 }
-.dj_ie6 .claro .dijitToolbar .dijitButton .dijitButtonNode,
-.dj_ie6 .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
-.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNode,
-.dj_ie6 .claro .dijitToolbar .dijitToggleButton .dijitButtonNode,
-.dj_ie6 .claro .dijitToolbar .dijitComboBox .dijitButtonNode {
-  background: none;
-  /* because background-color: transparent above doesn't work on IE*/
-
-}
 /* hover status */
 .dj_ie .claro .dijitToolbar .dijitButtonHover .dijitButtonNode,
 .dj_ie .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
@@ -112,13 +107,18 @@
 .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
 .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode,
 .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode {
-  background-position: 0 0;
   border-width: 1px;
   background-color: #abd6ff;
+  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;
   padding: 1px;
 }
 .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton {
-  background-position: 0 0;
   background-color: #f3ffff;
 }
 .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover, .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButtonHover {
@@ -128,7 +128,13 @@
 .claro .dijitToolbar .dijitButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode {
   border-width: 1px;
   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;
 }
 .claro .dijitToolbar .dijitComboButtonActive {
@@ -140,14 +146,27 @@
 }
 .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton {
   background-color: #f3ffff;
-  background-position: 0 -177px;
   padding: 2px;
 }
 .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive {
   background-color: #7dbdfa;
+  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 .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive {
   background-color: #7dbdfa;
+  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;
 }
 /* Avoid double border between button and arrow */
 .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton, .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton {
@@ -170,9 +189,6 @@
   background-color: #ffffff;
   padding: 1px;
 }
-.dj_ie6 .claro .dijitToolbar {
-  background-image: none;
-}
 .claro .dijitToolbarSeparator {
   /* separator icon in the editor sprite */
 
diff --git a/lib/dijit/themes/claro/Toolbar.less b/lib/dijit/themes/claro/Toolbar.less
index b61e8191a..90b9009e2 100644
--- a/lib/dijit/themes/claro/Toolbar.less
+++ b/lib/dijit/themes/claro/Toolbar.less
@@ -23,9 +23,7 @@
 .claro .dijitToolbar {
 	border-bottom: 1px solid @border-color;
 	background-color: @bar-background-color;
-	background-image: url(@image-common-highlight);
-	background-position:0 0;
-	background-repeat:repeat-x;
+	.standard-gradient;
 	padding: 2px 0 2px 4px;
 	zoom: 1;
 }
@@ -45,12 +43,10 @@
 	.border-radius(@toolbar-button-border-radius);
 	.box-shadow(none);
 	.transition-property(background-color);
-	.transition-duration(.3s, .35s);
+	.transition-duration(.3s);
 
-	background-image: url(@image-common-highlight);
-	background-position:0 -30px;
-	background-repeat:repeat-x;
 	background-color:rgba(171,214,255,0);
+	background-image: none;	/* cancel gradient for normal buttons, we don't want any gradient besides toolbar's on non-hovered buttons */
 }
 .dj_ie .claro .dijitToolbar .dijitButton .dijitButtonNode,
 .dj_ie .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
@@ -59,13 +55,7 @@
 .dj_ie .claro .dijitToolbar .dijitComboBox .dijitButtonNode {
 	background-color: transparent;   /* for IE, which doesn't understand rgba(...) */
 }
-.dj_ie6 .claro .dijitToolbar .dijitButton .dijitButtonNode,
-.dj_ie6 .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
-.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNode,
-.dj_ie6 .claro .dijitToolbar .dijitToggleButton .dijitButtonNode,
-.dj_ie6 .claro .dijitToolbar .dijitComboBox .dijitButtonNode {
-	background: none;	/* because background-color: transparent above doesn't work on IE*/
-}
+
 /* hover status */
 .dj_ie .claro .dijitToolbar .dijitButtonHover .dijitButtonNode,
 .dj_ie .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
@@ -103,14 +93,13 @@
 .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
 .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode,
 .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode {
-	background-position:0 0;
 	border-width:1px;
 	background-color: @hovered-background-color;
+	.standard-gradient;
 	padding: 1px;
 }
 .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode,
 .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton {
-	background-position:0 0;
 	background-color: @toolbar-combobutton-hovered-unhoveredsection-background-color;
 }
 .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover,
@@ -124,7 +113,7 @@
 .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode {
 	border-width: 1px;
 	background-color:@pressed-background-color;
-	background-position:0 -177px;
+	.active-gradient;
 	padding: 1px;
 }
 .claro .dijitToolbar .dijitComboButtonActive {
@@ -135,14 +124,15 @@
 .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode,
 .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton {
 	background-color: @toolbar-combobutton-hovered-unhoveredsection-background-color;
-	background-position:0 -177px;
 	padding: 2px;
 }
 .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive {
 	background-color: @pressed-background-color;
+	.active-gradient;
 }
 .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive {
 	background-color: @pressed-background-color;
+	.active-gradient;
 }
 
 /* Avoid double border between button and arrow */
@@ -165,10 +155,6 @@
 	padding: 1px;
 }
 
-.dj_ie6 .claro .dijitToolbar {
-	background-image: none;
-}
-
 .claro .dijitToolbarSeparator {
 	/* separator icon in the editor sprite */
 	background: url(@image-editor-icons-enabled);
diff --git a/lib/dijit/themes/claro/Tree.css b/lib/dijit/themes/claro/Tree.css
index 738bb3313..f41b1da37 100644
--- a/lib/dijit/themes/claro/Tree.css
+++ b/lib/dijit/themes/claro/Tree.css
@@ -37,17 +37,13 @@
 .claro .dijitTreeRow, .claro .dijitTreeNode .dojoDndItemBefore, .claro .dijitTreeNode .dojoDndItemAfter {
   /* so insert line shows up on IE when dropping after a target element */
 
-  padding: 4px 1px 2px 0;
-  margin: 0 1px;
-  /* replaced by border for selected/hovered row */
-
+  padding: 4px 0 2px 0;
   background-color: none;
   background-color: transparent;
   background-color: rgba(171, 214, 255, 0);
   background-position: 0 0;
   background-repeat: repeat-x;
-  border-color: rgba(118, 157, 192, 0);
-  border-width: 0;
+  border: solid 0 transparent;
   color: #000000;
   -webkit-transition-property: background-color, border-color;
   -moz-transition-property: background-color, border-color;
@@ -60,20 +56,31 @@
   transition-timing-function: ease-out;
 }
 .claro .dijitTreeRowSelected {
-  background-repeat: repeat-x;
   background-color: #cfe5fa;
-  background-image: url("images/commonHighlight.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;
   padding: 3px 0 1px;
-  margin: 0;
-  border: solid 1px #759dc0;
+  border-color: #759dc0;
+  border-width: 1px 0;
   color: #000000;
 }
 .claro .dijitTreeRowHover {
   background-color: #abd6ff;
-  background-image: url("images/commonHighlight.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;
   padding: 3px 0 1px;
-  margin: 0;
-  border: solid 1px #759dc0;
+  border-color: #759dc0;
+  border-width: 1px 0;
   color: #000000;
   -webkit-transition-duration: 0.25s;
   -moz-transition-duration: 0.25s;
@@ -81,16 +88,18 @@
 }
 .claro .dijitTreeRowActive {
   background-color: #7dbdfa;
-  background-image: url("images/commonHighlight.png");
-  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: 3px 0 1px;
-  margin-left: 0;
-  border: solid 1px #759dc0;
+  border-color: #759dc0;
+  border-width: 1px 0;
   color: #000000;
 }
-.dj_ie6 .claro .dijitTreeRow {
-  background-image: none;
-}
 .claro .dijitTreeRowFocused {
   background-repeat: repeat;
 }
diff --git a/lib/dijit/themes/claro/Tree.less b/lib/dijit/themes/claro/Tree.less
index ff6cd5a14..1b027769b 100644
--- a/lib/dijit/themes/claro/Tree.less
+++ b/lib/dijit/themes/claro/Tree.less
@@ -40,8 +40,7 @@
 .claro .dijitTreeNode .dojoDndItemBefore,
 .claro .dijitTreeNode .dojoDndItemAfter {
 	/* so insert line shows up on IE when dropping after a target element */
-	padding: 4px 1px 2px 0;
-	margin: 0 1px;	/* replaced by border for selected/hovered row */
+	padding: 4px 0 2px 0;
 
 	background-color: none;	// IE6 doesn't understand rgba() or transparent below
 	background-color: transparent;	// IE8 doesn't understand rgba() below
@@ -49,8 +48,7 @@
 	background-position:0 0;
 	background-repeat:repeat-x;
 
-	border-color: rgba(118,157,192,0);	// rgba() instead of none to prevent flash on hover fade-in
-	border-width: 0;
+	border: solid 0 transparent;
 
 	color: @text-color;
 
@@ -60,34 +58,29 @@
 }
 
 .claro .dijitTreeRowSelected {
-	background-repeat:repeat-x;
-	background-color:@selected-background-color;
-	background-image: url(@image-common-highlight);
+	background-color: @selected-background-color;
+	.standard-gradient;
 	padding: 3px 0 1px;
-	margin: 0;
-	border:solid 1px @selected-border-color;
-	color:@selected-text-color;
+	border-color: @selected-border-color;
+	border-width: 1px 0;
+	color: @selected-text-color;
 }
 .claro .dijitTreeRowHover {
-	background-color:@hovered-background-color;
-	background-image: url(@image-common-highlight);
+	background-color: @hovered-background-color;
+	.standard-gradient;
 	padding: 3px 0 1px;
-	margin: 0;
-	border:solid 1px @hovered-border-color;
-	color:@hovered-text-color;
+	border-color: @hovered-border-color;
+	border-width: 1px 0;
+	color: @hovered-text-color;
 	.transition-duration(.25s);
 }
 .claro .dijitTreeRowActive {
 	background-color:@pressed-background-color;
-	background-image: url(@image-common-highlight);
-	background-position:0 -177px;
+	.active-gradient;
 	padding: 3px 0 1px;
-	margin-left: 0;
-	border:solid 1px @pressed-border-color;
-	color:@selected-text-color;
-}
-.dj_ie6 .claro .dijitTreeRow {
-	background-image: none;
+	border-color: @pressed-border-color;
+	border-width: 1px 0;
+	color: @selected-text-color;
 }
 .claro .dijitTreeRowFocused {
 	background-repeat: repeat;
diff --git a/lib/dijit/themes/claro/claro_rtl.css b/lib/dijit/themes/claro/claro_rtl.css
index 6f85707f5..aab8f0873 100644
--- a/lib/dijit/themes/claro/claro_rtl.css
+++ b/lib/dijit/themes/claro/claro_rtl.css
@@ -4,7 +4,6 @@
 @import url("form/Button_rtl.css");
 @import url("layout/TabContainer_rtl.css");
 @import url("form/Slider_rtl.css");
-@import url("form/Select_rtl.css");
 @import url("Dialog_rtl.css");
 @import url("Editor_rtl.css");
 @import url("../../icons/editorIcons_rtl.css");/* RTL sprite for editor icons to be used by all themes*/
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
diff --git a/lib/dijit/themes/claro/images/activeGradient.png b/lib/dijit/themes/claro/images/activeGradient.png
new file mode 100644
index 000000000..7e5716c0b
--- /dev/null
+++ b/lib/dijit/themes/claro/images/activeGradient.png
diff --git a/lib/dijit/themes/claro/images/activeGradient.svg b/lib/dijit/themes/claro/images/activeGradient.svg
new file mode 100644
index 000000000..8ab6ce9c1
--- /dev/null
+++ b/lib/dijit/themes/claro/images/activeGradient.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" ?>
+<!--
+	Source file for standardGradient.png, which is used by IE7-9 for light-to-dark gradient of many widgets.
+	Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
+
+	Output should match CSS gradient from .standard-gradient() mixin in variables.css.
+	It is however an approximation, since generated
+	output has a constant height, rather than matching the height of each node.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="16px" viewBox="0 0 1 1" preserveAspectRatio="none">
+	<defs>
+		<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%">
+			<stop offset="0%" stop-color="rgb(190,190,190)" stop-opacity="0.98"/>
+			<stop offset="20%" stop-color="#ffffff" stop-opacity="0.65"/>
+			<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
+		</linearGradient>
+	</defs>
+	<rect x="0" y="0" width="1" height="1" fill="url(#gradient)"/>
+</svg>
\ No newline at end of file
diff --git a/lib/dijit/themes/claro/images/calendar.png b/lib/dijit/themes/claro/images/calendar.png
new file mode 100644
index 000000000..de66cbdb4
--- /dev/null
+++ b/lib/dijit/themes/claro/images/calendar.png
diff --git a/lib/dijit/themes/claro/images/calendarContainerImages.png b/lib/dijit/themes/claro/images/calendarContainerImages.png
deleted file mode 100644
index 44fa088b7..000000000
--- a/lib/dijit/themes/claro/images/calendarContainerImages.png
+++ /dev/null
diff --git a/lib/dijit/themes/claro/images/commonHighlight.png b/lib/dijit/themes/claro/images/commonHighlight.png
deleted file mode 100644
index f90eb25ba..000000000
--- a/lib/dijit/themes/claro/images/commonHighlight.png
+++ /dev/null
diff --git a/lib/dijit/themes/claro/images/dnd.png b/lib/dijit/themes/claro/images/dnd.png
index 8cb04aa43..29bef4d38 100644
--- a/lib/dijit/themes/claro/images/dnd.png
+++ b/lib/dijit/themes/claro/images/dnd.png
diff --git a/lib/dijit/themes/claro/images/menuHighlight.png b/lib/dijit/themes/claro/images/menuHighlight.png
deleted file mode 100644
index 22328a7d8..000000000
--- a/lib/dijit/themes/claro/images/menuHighlight.png
+++ /dev/null
diff --git a/lib/dijit/themes/claro/images/progressBarEmpty.png b/lib/dijit/themes/claro/images/progressBarEmpty.png
deleted file mode 100644
index e0a68561f..000000000
--- a/lib/dijit/themes/claro/images/progressBarEmpty.png
+++ /dev/null
diff --git a/lib/dijit/themes/claro/images/standardGradient.png b/lib/dijit/themes/claro/images/standardGradient.png
new file mode 100644
index 000000000..345402f62
--- /dev/null
+++ b/lib/dijit/themes/claro/images/standardGradient.png
diff --git a/lib/dijit/themes/claro/images/standardGradient.svg b/lib/dijit/themes/claro/images/standardGradient.svg
new file mode 100644
index 000000000..807c3c70b
--- /dev/null
+++ b/lib/dijit/themes/claro/images/standardGradient.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" ?>
+<!--
+	Source file for standardGradient.png, which is used by IE7-9 for light-to-dark gradient of many widgets.
+	Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
+
+	Output should match CSS gradient from .standard-gradient() mixin in variables.css.
+	It is however an approximation, since generated
+	output has a constant height, rather than matching the height of each node.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 1 1" preserveAspectRatio="none">
+	<defs>
+		<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%">
+			<stop offset="0%" stop-color="#ffffff" stop-opacity="0.7"/>
+			<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
+		</linearGradient>
+	</defs>
+	<rect x="0" y="0" width="1" height="1" fill="url(#gradient)"/>
+</svg>
\ No newline at end of file
diff --git a/lib/dijit/themes/claro/images/titlebar.png b/lib/dijit/themes/claro/images/titlebar.png
deleted file mode 100644
index 48181035a..000000000
--- a/lib/dijit/themes/claro/images/titlebar.png
+++ /dev/null
diff --git a/lib/dijit/themes/claro/images/tooltipGradient.png b/lib/dijit/themes/claro/images/tooltipGradient.png
deleted file mode 100644
index ce4860e79..000000000
--- a/lib/dijit/themes/claro/images/tooltipGradient.png
+++ /dev/null
diff --git a/lib/dijit/themes/claro/images/treeExpand_loading.gif b/lib/dijit/themes/claro/images/treeExpand_loading.gif
deleted file mode 100644
index 424d376ac..000000000
--- a/lib/dijit/themes/claro/images/treeExpand_loading.gif
+++ /dev/null
diff --git a/lib/dijit/themes/claro/layout/AccordionContainer.css b/lib/dijit/themes/claro/layout/AccordionContainer.css
index 34831764c..b59aeca8b 100644
--- a/lib/dijit/themes/claro/layout/AccordionContainer.css
+++ b/lib/dijit/themes/claro/layout/AccordionContainer.css
@@ -50,16 +50,17 @@
   background-color: transparent;
   /* pick up color from dijitAccordionInnerContainer */
 
-  background-image: url("../layout/images/accordion.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;
   padding: 5px 7px 2px 7px;
   min-height: 17px;
   color: #494949;
 }
-.dj_ie6 .claro .dijitAccordionTitle {
-  background-image: none;
-}
 .claro .dijitAccordionContainer .dijitAccordionChildWrapper {
   /* this extends the blue trim styling of the title bar to wrapping around the node.
 	 * done by setting margin
@@ -83,7 +84,13 @@
   transition-duration: 0.1s;
 }
 .claro .dijitAccordionInnerContainerActive .dijitAccordionTitle {
-  background-position: 0 -136px;
+  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;
   color: #000000;
 }
 /* Open (a.k.a. selected) pane */
@@ -93,7 +100,13 @@
 }
 .claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle {
   color: #000000;
-  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;
   /* avoid effect when clicking the title of the open pane */
 
 }
@@ -114,7 +127,7 @@
 }
 .claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, .claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper {
   background-color: #ffffff;
-  border: 1px solid #759dc0 !important;
+  border: 1px solid #759dc0;
   -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25);
   -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25);
   box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25);
diff --git a/lib/dijit/themes/claro/layout/AccordionContainer.less b/lib/dijit/themes/claro/layout/AccordionContainer.less
index b3aa62248..fd4308c30 100644
--- a/lib/dijit/themes/claro/layout/AccordionContainer.less
+++ b/lib/dijit/themes/claro/layout/AccordionContainer.less
@@ -43,16 +43,12 @@
 }
 .claro .dijitAccordionTitle {
 	background-color: transparent;	/* pick up color from dijitAccordionInnerContainer */
-	background-image: url("../@{image-layout-accordion}");
-	background-position:0 0;
-	background-repeat:repeat-x;
+	.standard-gradient("../");
 	padding: 5px 7px 2px 7px;
 	min-height:17px;
 	color:@unselected-text-color;
 }
-.dj_ie6 .claro .dijitAccordionTitle {
-	background-image: none;
-}
+
 .claro .dijitAccordionContainer .dijitAccordionChildWrapper {
 	/* this extends the blue trim styling of the title bar to wrapping around the node.
 	 * done by setting margin
@@ -75,7 +71,7 @@
 	.transition-duration(.1s);
 }
 .claro .dijitAccordionInnerContainerActive .dijitAccordionTitle {
-	background-position:0 -136px;
+	.active-gradient("../");
 	color:@selected-text-color;
 }
 
@@ -87,7 +83,7 @@
 }
 .claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle {
 	color:@selected-text-color;
-	background-position: 0 0;	/* avoid effect when clicking the title of the open pane */
+	.standard-gradient("../");	/* avoid effect when clicking the title of the open pane */
 }
 
 /* Hovering open or closed pane */
@@ -97,6 +93,8 @@
 	color:@hovered-text-color;
 }
 
+// TODO: why do we have any hover effect on the selected pane?
+// Since you can't click it, there shouldn't be a hover effect.
 .claro .dijitAccordionInnerContainerHover,
 .claro .dijitAccordionInnerContainerSelectedActive {
 	/* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */
@@ -108,6 +106,6 @@
 .claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper,
 .claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper {
 	background-color:@pane-background-color;
-	border:1px solid @hovered-border-color !important;
+	border:1px solid @hovered-border-color;
 	.box-shadow(inset 0 0 3px rgba(0, 0, 0, .25));
 }
diff --git a/lib/dijit/themes/claro/layout/BorderContainer.css b/lib/dijit/themes/claro/layout/BorderContainer.css
index 8c0a5fa96..f00c5d1d7 100644
--- a/lib/dijit/themes/claro/layout/BorderContainer.css
+++ b/lib/dijit/themes/claro/layout/BorderContainer.css
@@ -84,26 +84,28 @@ Splitters and gutters:
   margin: 0;
 }
 /* hovered splitter */
-.claro .dijitSplitterHHover {
+.claro .dijitSplitterHHover, .claro .dijitSplitterVHover {
   font-size: 1px;
-  background: url("../layout/images/splitterHorizontalHover.png") no-repeat center top;
+  background-color: #cfe5fa;
 }
-.claro .dijitSplitterHHover .dijitSplitterThumb {
-  background: #759dc0 none;
+.claro .dijitSplitterHHover {
+  background-image: -moz-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%);
+  background-image: -webkit-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%);
+  background-image: -o-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%);
+  background-image: linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%);
 }
 .claro .dijitSplitterVHover {
-  font-size: 1px;
-  background: url("../layout/images/splitterVerticalHover.png") no-repeat center left;
+  background-image: -moz-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%);
+  background-image: -webkit-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%);
+  background-image: -o-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%);
+  background-image: linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%);
 }
-.claro .dijitSplitterVHover .dijitSplitterThumb {
+.claro .dijitSplitterHHover .dijitSplitterThumb, .claro .dijitSplitterVHover .dijitSplitterThumb {
   background: #759dc0 none;
 }
-.dj_ie6 .dijitSplitterHHover, .dj_ie6 .claro .dijitSplitterVHover {
-  background-color: #cfe5fa;
-  background-image: none;
-}
 /* active splitter */
 .claro .dijitSplitterHActive, .claro .dijitSplitterVActive {
   font-size: 1px;
   background-color: #abd6ff;
+  background-image: none;
 }
diff --git a/lib/dijit/themes/claro/layout/BorderContainer.less b/lib/dijit/themes/claro/layout/BorderContainer.less
index b7c672e63..f3edcd3c5 100644
--- a/lib/dijit/themes/claro/layout/BorderContainer.less
+++ b/lib/dijit/themes/claro/layout/BorderContainer.less
@@ -95,34 +95,30 @@ Splitters and gutters:
 }
 
 /* hovered splitter */
-.claro .dijitSplitterHHover {
+.claro .dijitSplitterHHover,
+.claro .dijitSplitterVHover {
 	font-size: 1px;
-	background: url("../@{image-layout-splitter-horizontal-hover}") no-repeat center top;
+	background-color: @splitter-hovered-background-color;
 }
 
-
-.claro .dijitSplitterHHover .dijitSplitterThumb {
-	background:@hovered-border-color none;
+.claro .dijitSplitterHHover {
+	.alpha-white-gradient (left, 1,0px,  0,50%, 1,100%);
 }
 
 .claro .dijitSplitterVHover {
-	font-size: 1px;
-	background: url("../@{image-layout-splitter-vertical-hover}") no-repeat center left;
+	.alpha-white-gradient (top, 1,0px,  0,50%, 1,100%);
 }
 
+.claro .dijitSplitterHHover .dijitSplitterThumb,
 .claro .dijitSplitterVHover .dijitSplitterThumb {
 	background:@hovered-border-color none;
 }
 
-.dj_ie6 .dijitSplitterHHover,
-.dj_ie6 .claro .dijitSplitterVHover {
-	background-color: @splitter-hovered-background-color;
-	background-image:none;
-}
 
 /* active splitter */
 .claro .dijitSplitterHActive,
 .claro .dijitSplitterVActive {
 	font-size: 1px;
 	background-color:@splitter-dragged-background-color;
+	background-image: none;		// color all the way across, not gradient like in hover mode
 }
diff --git a/lib/dijit/themes/claro/layout/TabContainer.css b/lib/dijit/themes/claro/layout/TabContainer.css
index 641b921ec..6db8550ec 100644
--- a/lib/dijit/themes/claro/layout/TabContainer.css
+++ b/lib/dijit/themes/claro/layout/TabContainer.css
@@ -17,18 +17,18 @@
  * 		.tabStripButtonDisabled - styles for disabled tab strip buttons
  * 
  * Tab Button:
- * 		.dijitTabContainerTop-tabs .dijitTabInnerDiv/.dijitTabContent     - styles for top tab button container
- * 		.dijitTabContainerBottom-tabs .dijitTabInnerDiv/.dijitTabContent  - styles for bottom tab button container
- * 		.dijitTabContainerLeft-tabs .dijitTabInnerDiv/.dijitTabContent    - styles for left tab button container
- * 		.dijitTabContainerRight-tabs .dijitTabInnerDiv/.dijitTabContent   - styles for right tab button container
+ * 		.dijitTabContainerTop-tabs .dijitTab     - styles for top tab button container
+ * 		.dijitTabContainerBottom-tabs .dijitTab  - styles for bottom tab button container
+ * 		.dijitTabContainerLeft-tabs .dijitTab    - styles for left tab button container
+ * 		.dijitTabContainerRight-tabs .dijitTab   - styles for right tab button container
  * 
- * 		.dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv/.dijitTabContent    
+ * 		.dijitTabContainerTop-tabs .dijitTabChecked .dijitTab
  * 				- styles for selected status of top tab button
  * 		same to Bottom, Left, Right Tabs
  * 
- * 		.dijitTabHover .dijitTabInnerDiv   - styles when mouse hover on tab buttons
- * 		.dijitTabActive .dijitTabInnerDiv  - styles when mouse down on tab buttons
- * 		.dijitTabChecked .dijitTabInnerDiv  - styles when on buttons of selected tab		
+ * 		.dijitTabHover .dijitTab   - styles when mouse hover on tab buttons
+ * 		.dijitTabActive .dijitTab  - styles when mouse down on tab buttons
+ * 		.dijitTabChecked .dijitTab  - styles when on buttons of selected tab
  * 
  * 		.dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs
  * 		.dijitTabCloseButtonHover - styles when mouse hover on close action button
@@ -77,7 +77,8 @@
 
   display: none;
 }
-.claro .dijitTabInnerDiv {
+.claro .dijitTab {
+  border: 1px solid #b5bcc7;
   background-color: #efefef;
   -webkit-transition-property: background-color, border;
   -moz-transition-property: background-color, border;
@@ -87,132 +88,104 @@
   transition-duration: 0.35s;
   color: #494949;
 }
-.claro .dijitTabHover .dijitTabInnerDiv {
+.claro .dijitTabHover {
+  border-color: #759dc0;
   background-color: #abd6ff;
   -webkit-transition-duration: 0.25s;
   -moz-transition-duration: 0.25s;
   transition-duration: 0.25s;
   color: #000000;
 }
-.claro .dijitTabActive .dijitTabInnerDiv {
+.claro .dijitTabActive {
+  border-color: #759dc0;
   background-color: #7dbdfa;
   color: #000000;
   -webkit-transition-duration: 0.1s;
   -moz-transition-duration: 0.1s;
   transition-duration: 0.1s;
 }
-.claro .dijitTabChecked .dijitTabInnerDiv {
+.claro .dijitTabChecked {
+  border-color: #b5bcc7;
   background-color: #cfe5fa;
   color: #000000;
 }
-.claro .dijitTabContent {
-  border: 1px solid #b5bcc7;
-}
-.claro .dijitTabHover .dijitTabContent {
-  border-color: #759dc0;
-}
-.claro .dijitTabActive .dijitTabContent {
-  border-color: #759dc0;
-}
-.claro .dijitTabChecked .dijitTabContent {
-  color: #000000;
-  border-color: #b5bcc7;
+.claro .dijitTabDisabled {
+  background-color: #d3d3d3;
 }
-.claro .tabStripButton .dijitTabInnerDiv {
+.claro .tabStripButton {
   background-color: transparent;
-}
-.claro .tabStripButton .dijitTabContent {
   border: none;
 }
 /*** end common ***/
 /*************** top tab ***************/
 .claro .dijitTabContainerTop-tabs .dijitTab {
+  /* unselected (and not hovered/pressed) tab */
+
   top: 1px;
   /* used for overlap */
 
   margin-right: 1px;
-  padding-top: 3px;
-}
-.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTab {
-  top: 3px;
-}
-/* for top tab padding. change height when status changes */
-.claro .dijitTabContainerTop-tabs .dijitTabContent {
   padding: 3px 6px;
   border-bottom-width: 0;
-  background-image: url("../layout/images/tabTop.png");
-  background-position: 0 0;
-  background-repeat: repeat-x;
   min-width: 60px;
   text-align: center;
-}
-.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent {
-  padding-bottom: 4px;
-  padding-top: 6px;
-}
-/* normal status */
-.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv {
-  background-image: url("../layout/images/tabTop.png");
-  background-position: 0 -248px;
-  background-position: bottom;
+  background-image: url("images/tabTopUnselected.png");
   background-repeat: repeat-x;
+  background-image: -moz-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
+  background-image: -webkit-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
+  background-image: -o-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
   -webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04);
   -moz-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04);
   box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04);
 }
-/* checked status */
-.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv {
-  background-image: none;
+.claro .dijitTabContainerTop-tabs .dijitTabChecked {
+  /* selected tab */
+
+  padding-bottom: 4px;
+  padding-top: 9px;
+  background-image: url("images/tabTopSelected.png");
+  background-image: -moz-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px);
+  background-image: -webkit-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px);
+  background-image: -o-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px);
+  background-image: linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px);
   -webkit-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05);
   -moz-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05);
   box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05);
 }
-.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent {
-  background-position: 0 -102px;
-  background-repeat: repeat-x;
-}
 /** end top tab **/
 /*************** bottom tab ***************/
 .claro .dijitTabContainerBottom-tabs .dijitTab {
+  /* unselected (and not hovered/pressed) tab */
+
   top: -1px;
   /* used for overlap */
 
   margin-right: 1px;
-}
-/* calculate the position and size */
-.claro .dijitTabContainerBottom-tabs .dijitTabContent {
   padding: 3px 6px;
   border-top-width: 0;
-  background-image: url("../layout/images/tabBottom.png");
-  background-position: 0 -249px;
-  background-repeat: repeat-x;
-  background-position: bottom;
   min-width: 60px;
   text-align: center;
-}
-.claro .dijitTabContainerBottom-tabs .dijitTab {
-  padding-bottom: 3px;
-}
-/* normal status */
-.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv {
-  background-image: url("../layout/images/tabBottom.png");
-  background-position: top;
+  background-image: url("images/tabBottomUnselected.png");
   background-repeat: repeat-x;
+  background-position: bottom;
+  background-image: -moz-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
+  background-image: -webkit-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
+  background-image: -o-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
   -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
 }
-/* checked status */
-.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabContent {
-  padding-bottom: 7px;
-  padding-top: 4px;
-  background-position: 0 -119px;
-}
+/* selected tab */
 .claro .dijitTabContainerBottom-tabs .dijitTabChecked {
-  padding-bottom: 0;
-}
-.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
-  background-image: none;
+  padding-bottom: 9px;
+  padding-top: 4px;
+  background-image: url("images/tabBottomSelected.png");
+  background-image: -moz-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px);
+  background-image: -webkit-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px);
+  background-image: -o-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px);
+  background-image: linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px);
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -220,33 +193,29 @@
 /** end bottom tab **/
 /*************** left tab ***************/
 .claro .dijitTabContainerLeft-tabs .dijitTab {
-  border-right-width: 0;
+  /* unselected (and not hovered/pressed) tab */
+
   left: 1px;
   /* used for overlap */
 
   margin-bottom: 1px;
-}
-/* normal status */
-.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
-  background-image: url("../layout/images/tabLeft.png");
-  background-position: -347px -340px;
-  background-repeat: repeat-y;
-}
-.claro .dijitTabContainerLeft-tabs .dijitTabContent {
   padding: 3px 8px 4px 4px;
-  background-image: url("../layout/images/tabLeft.png");
+  background-image: url("images/tabLeftUnselected.png");
   background-repeat: repeat-y;
-  background-position: 0 0;
+  background-image: -moz-linear-gradient(left, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
+  background-image: -webkit-linear-gradient(left, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
+  background-image: -o-linear-gradient(left, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(left, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
 }
-/* checked status */
-.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent {
+/* selected tab */
+.claro .dijitTabContainerLeft-tabs .dijitTabChecked {
+  border-right-width: 0;
   padding-right: 9px;
-  border-right: none;
-  background-image: none;
-}
-.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv {
-  background-position: 0 -179px;
-  background-repeat: repeat-y;
+  background-image: url("images/tabLeftSelected.png");
+  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px);
+  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px);
+  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px);
+  background-image: linear-gradient(left, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px);
   -webkit-box-shadow: -1px 0 2px rgba(0, 0, 0, 0.05);
   -moz-box-shadow: -1px 0 2px rgba(0, 0, 0, 0.05);
   box-shadow: -1px 0 2px rgba(0, 0, 0, 0.05);
@@ -254,51 +223,50 @@
 /** end left tab **/
 /*************** right tab ***************/
 .claro .dijitTabContainerRight-tabs .dijitTab {
-  border-left-width: 0;
+  /* unselected (and not hovered/pressed) tab */
+
   left: -1px;
   /* used for overlap */
 
   margin-bottom: 1px;
-}
-/* normal status */
-.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv {
-  background-image: url("../layout/images/tabRight.png");
-  background-repeat: repeat-y;
-  background-position: -1px -347px;
-}
-.claro .dijitTabContainerRight-tabs .dijitTabContent {
   padding: 3px 8px 4px 4px;
-  background-image: url("../layout/images/tabRight.png");
-  background-position: right top;
+  background-image: url("images/tabRightUnselected.png");
   background-repeat: repeat-y;
-}
-/* checked status */
-.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent {
+  background-position: right;
+  background-image: -moz-linear-gradient(right, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
+  background-image: -webkit-linear-gradient(right, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
+  background-image: -o-linear-gradient(right, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(right, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
+}
+.claro .dijitTabContainerRight-tabs .dijitTabChecked {
+  /* selected tab */
+
   padding-left: 5px;
-  border-left: none;
-  background-image: none;
-}
-.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv {
-  background-position: -348px -179px;
+  border-left-width: 0;
+  background-image: url("images/tabRightSelected.png");
+  background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px);
+  background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px);
+  background-image: -o-linear-gradient(right, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px);
+  background-image: linear-gradient(right, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px);
   -webkit-box-shadow: 1px 0 2px rgba(0, 0, 0, 0.07);
   -moz-box-shadow: 1px 0 2px rgba(0, 0, 0, 0.07);
   box-shadow: 1px 0 2px rgba(0, 0, 0, 0.07);
 }
 /** end right tab **/
 /** round corner **/
-.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, .claro .dijitTabContainerTop-tabs .dijitTabContent {
+.claro .dijitTabContainerTop-tabs .dijitTab {
   -moz-border-radius: 2px 2px 0 0;
   border-radius: 2px 2px 0 0;
 }
-.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, .claro .dijitTabContainerBottom-tabs .dijitTabContent {
+.claro .dijitTabContainerBottom-tabs .dijitTab {
   -moz-border-radius: 0 0 2px 2px;
   border-radius: 0 0 2px 2px;
 }
-.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, .claro .dijitTabContainerLeft-tabs .dijitTabContent {
+.claro .dijitTabContainerLeft-tabs .dijitTab {
   -moz-border-radius: 2px 0 0 2px;
   border-radius: 2px 0 0 2px;
 }
-.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, .claro .dijitTabContainerRight-tabs .dijitTabContent {
+.claro .dijitTabContainerRight-tabs .dijitTab {
   -moz-border-radius: 0 2px 2px 0;
   border-radius: 0 2px 2px 0;
 }
@@ -310,15 +278,18 @@
 .claro .dijitTabListContainer-top .tabStripButton {
   padding: 4px 3px;
   margin-top: 7px;
-  background-image: url("../layout/images/tabTop.png");
-  background-position: 0 0;
+  background-image: -moz-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%);
+  background-image: -webkit-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%);
+  background-image: -o-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%);
 }
 .claro .dijitTabListContainer-bottom .tabStripButton {
-  padding: 5px 3px;
-  margin-bottom: 4px;
-  background-image: url("../layout/images/tabTop.png");
-  background-position: 0 -248px;
-  background-position: bottom;
+  padding: 4px 3px;
+  margin-bottom: 7px;
+  background-image: -moz-linear-gradient(bottom, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%);
+  background-image: -webkit-linear-gradient(bottom, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%);
+  background-image: -o-linear-gradient(bottom, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(bottom, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%);
 }
 .claro .tabStripButtonHover {
   background-color: #abd6ff;
@@ -361,10 +332,9 @@
 }
 .claro .dijitTabContainerNested .dijitTabContainerTop-tabs {
   border-bottom: solid 1px #b5bcc7;
-  padding: 1px 2px 4px;
-  margin-top: -2px;
+  padding: 2px 2px 4px;
 }
-.claro .dijitTabContainerTabListNested .dijitTabContent {
+.claro .dijitTabContainerTabListNested .dijitTab {
   background: rgba(255, 255, 255, 0) none repeat scroll 0 0;
   border: none;
   padding: 4px;
@@ -378,11 +348,7 @@
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
-.claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv {
-  /* 4 element selector to override box-shadow setting from above rule:
-	 *		.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { ... }
-	 */
-
+.claro .dijitTabContainerTabListNested .dijitTab {
   background: none;
   border: none;
   top: 0;
@@ -392,7 +358,7 @@
   -moz-box-shadow: none;
   box-shadow: none;
 }
-.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent {
+.claro .dijitTabContainerTabListNested .dijitTabHover {
   background-color: #e5f2fe;
   border: solid 1px #cfe5fa;
   padding: 3px;
@@ -403,18 +369,21 @@
 .claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
   text-decoration: none;
 }
-.claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent {
+.claro .dijitTabContainerTabListNested .dijitTabActive {
   border: solid 1px #759dc0;
   padding: 3px;
-  background: #abd6ff url("../layout/images/tabNested.png") repeat-x;
+  background: #abd6ff url("images/tabNested.png") repeat-x;
+  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.61) 0%, rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0.61) 100%);
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.61) 0%, rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0.61) 100%);
+  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.61) 0%, rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0.61) 100%);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.61) 0%, rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0.61) 100%);
   -webkit-transition-duration: 0.1s;
   -moz-transition-duration: 0.1s;
   transition-duration: 0.1s;
 }
-.claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent {
+.claro .dijitTabContainerTabListNested .dijitTabChecked {
   padding: 3px;
   border: solid 1px #759dc0;
-  background-position: 0 105px;
   background-color: #cfe5fa;
 }
 .claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
@@ -426,9 +395,6 @@
   /* prevent double border */
 
 }
-.dj_ie6 .claro .dijitTabContent,
-.dj_ie6 .claro .dijitTabInnerDiv,
-.dj_ie6 .dijitTabListContainer-top .tabStripButton,
-.dj_ie6 .dijitTabListContainer-bottom .tabStripButton {
-  background-image: none;
+.claro .dijitTab, .claro .tabStripButton {
+  _background-image: none !important;
 }
diff --git a/lib/dijit/themes/claro/layout/TabContainer.less b/lib/dijit/themes/claro/layout/TabContainer.less
index 16947ff9c..74495b209 100644
--- a/lib/dijit/themes/claro/layout/TabContainer.less
+++ b/lib/dijit/themes/claro/layout/TabContainer.less
@@ -17,18 +17,18 @@
  * 		.tabStripButtonDisabled - styles for disabled tab strip buttons
  * 
  * Tab Button:
- * 		.dijitTabContainerTop-tabs .dijitTabInnerDiv/.dijitTabContent     - styles for top tab button container
- * 		.dijitTabContainerBottom-tabs .dijitTabInnerDiv/.dijitTabContent  - styles for bottom tab button container
- * 		.dijitTabContainerLeft-tabs .dijitTabInnerDiv/.dijitTabContent    - styles for left tab button container
- * 		.dijitTabContainerRight-tabs .dijitTabInnerDiv/.dijitTabContent   - styles for right tab button container
+ * 		.dijitTabContainerTop-tabs .dijitTab     - styles for top tab button container
+ * 		.dijitTabContainerBottom-tabs .dijitTab  - styles for bottom tab button container
+ * 		.dijitTabContainerLeft-tabs .dijitTab    - styles for left tab button container
+ * 		.dijitTabContainerRight-tabs .dijitTab   - styles for right tab button container
  * 
- * 		.dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv/.dijitTabContent    
+ * 		.dijitTabContainerTop-tabs .dijitTabChecked .dijitTab
  * 				- styles for selected status of top tab button
  * 		same to Bottom, Left, Right Tabs
  * 
- * 		.dijitTabHover .dijitTabInnerDiv   - styles when mouse hover on tab buttons
- * 		.dijitTabActive .dijitTabInnerDiv  - styles when mouse down on tab buttons
- * 		.dijitTabChecked .dijitTabInnerDiv  - styles when on buttons of selected tab		
+ * 		.dijitTabHover .dijitTab   - styles when mouse hover on tab buttons
+ * 		.dijitTabActive .dijitTab  - styles when mouse down on tab buttons
+ * 		.dijitTabChecked .dijitTab  - styles when on buttons of selected tab
  * 
  * 		.dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs
  * 		.dijitTabCloseButtonHover - styles when mouse hover on close action button
@@ -49,6 +49,13 @@
 
 @import "../variables";
 
+.unselected-tab-gradient (@direction) {
+    // white line, dark line, then fade from light to dark
+	.alpha-white-gradient (@direction, 1,0px, 1,1px, 0.1,2px, 0.6,7px, 0,100%);
+}
+.topBottom-selected-tab-gradient (@direction) {
+	.alpha-white-gradient (@direction, 1,0px,  1,1px, 0,2px, 1,7px);	// white line, blue line, remainder white
+}
 /*** some common features ***/
 .claro .dijitTabPaneWrapper {
 	background:@pane-background-color;
@@ -78,45 +85,37 @@
 	/* set the spacer invisible.  note that height:0 doesn't work on IE/quirks, it's still 10px. */
 	display: none;
 }
-.claro .dijitTabInnerDiv {
+.claro .dijitTab {
+	border: 1px solid @border-color;
 	background-color:@unselected-background-color;
 	.transition-property(background-color, border);
  	.transition-duration(.35s);
 	color:@unselected-text-color;
 }
-.claro .dijitTabHover .dijitTabInnerDiv {
+.claro .dijitTabHover {
+	border-color: @hovered-border-color;
 	background-color:@hovered-background-color;
  	.transition-duration(.25s);
 	color:@hovered-text-color;
 }
-.claro .dijitTabActive .dijitTabInnerDiv {
+.claro .dijitTabActive {
+	border-color: @pressed-border-color;
 	background-color:@pressed-background-color;
 	color:@selected-text-color;
 	.transition-duration(.1s);
 }
-.claro .dijitTabChecked .dijitTabInnerDiv {
-	background-color:@selected-background-color;
-	color:@selected-text-color;
-}
-
-.claro .dijitTabContent {
-	border: 1px solid @border-color;
-}
-.claro .dijitTabHover .dijitTabContent {
-	border-color: @hovered-border-color;
-}
-.claro .dijitTabActive .dijitTabContent {
-	border-color: @pressed-border-color;
-}
-.claro .dijitTabChecked .dijitTabContent {
-	color:@selected-text-color;			// todo: redundant with .claro .dijitTabChecked .dijitTabInnerDiv above?
+.claro .dijitTabChecked {
+    // selected tab
 	border-color: @border-color;			// don't use @selected-border-color because need to match border of TabContainer
+	background-color: @selected-background-color;
+	color: @selected-text-color;
+}
+.claro .dijitTabDisabled {
+	background-color: @tab-disabled-background-color;
 }
 
-.claro .tabStripButton .dijitTabInnerDiv {
+.claro .tabStripButton {
 	background-color: transparent;
-}
-.claro .tabStripButton .dijitTabContent {
 	border: none;
 }
 /*** end common ***/
@@ -124,169 +123,133 @@
 
 /*************** top tab ***************/
 .claro .dijitTabContainerTop-tabs .dijitTab {
+    /* unselected (and not hovered/pressed) tab */
 	top: 1px;	/* used for overlap */
 	margin-right: 1px;
-	padding-top: 3px;
-}
-.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTab {
-	top: 3px;
-}
-/* for top tab padding. change height when status changes */
-.claro .dijitTabContainerTop-tabs .dijitTabContent {
 	padding:3px 6px;
 	border-bottom-width: 0;
-	background-image:url("../@{image-layout-tab-top}");
-	background-position:0 0;
-	background-repeat:repeat-x;
 	min-width: 60px;
 	text-align: center;
+
+	// gradient (CSS gradient, with backup image for IE6-9)
+	background-image: url("images/tabTopUnselected.png");
+	background-repeat: repeat-x;
+	.unselected-tab-gradient(top);
+
+ 	.box-shadow(0 -1px 1px rgba(0, 0, 0, 0.04));
 }
-.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent {
+
+.claro .dijitTabContainerTop-tabs .dijitTabChecked {
+	/* selected tab */
 	padding-bottom: 4px;
-	padding-top: 6px;
-}
+	padding-top: 9px;
 
-/* normal status */
-.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv {
-	background-image:url("../@{image-layout-tab-top}");
-	background-position:0 -248px;
-	background-position:bottom;
-	background-repeat:repeat-x;
-	.box-shadow(0 -1px 1px rgba(0, 0, 0, 0.04));
-}
+	// gradient (CSS gradient, with backup image for IE6-9)
+	background-image: url("images/tabTopSelected.png");
+	.topBottom-selected-tab-gradient (top);
 
-/* checked status */
-.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv {
-	background-image:none;
 	.box-shadow(0 -1px 2px rgba(0, 0, 0, 0.05));
 }
-.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent {
-	background-position:0 -102px;
-	background-repeat:repeat-x;
-}
+
 /** end top tab **/
 
 
 /*************** bottom tab ***************/
 .claro .dijitTabContainerBottom-tabs .dijitTab {
+	/* unselected (and not hovered/pressed) tab */
 	top: -1px;	/* used for overlap */
 	margin-right: 1px;
-}
-/* calculate the position and size */
-.claro .dijitTabContainerBottom-tabs .dijitTabContent {
 	padding:3px 6px;
 	border-top-width: 0;
-	background-image: url("../@{image-layout-tab-bottom}");
-	background-position:0 -249px;
-	background-repeat: repeat-x;
-	background-position:bottom;
 	min-width: 60px;
 	text-align: center;
-}
-.claro .dijitTabContainerBottom-tabs .dijitTab {
-	padding-bottom: 3px;
-}
-/* normal status */
-.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv {
-	background-image: url("../@{image-layout-tab-bottom}");
-	background-position: top;
+
+	// gradient (CSS gradient, with backup image for IE6-9)
+	background-image: url("images/tabBottomUnselected.png");
 	background-repeat: repeat-x;
+	background-position: bottom;
+	.unselected-tab-gradient(bottom);
+
 	.box-shadow(0 1px 1px rgba(0, 0, 0, 0.04));
-	
 }
 
-/* checked status */
-.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabContent {
-	padding-bottom: 7px;
-	padding-top: 4px;
-	background-position:0 -119px;
-}
+/* selected tab */
 .claro .dijitTabContainerBottom-tabs .dijitTabChecked {
-	padding-bottom: 0;
-}
-.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
-	background-image:none;
+	padding-bottom: 9px;
+	padding-top: 4px;
+
+	// gradient (CSS gradient, with backup image for IE6-9)
+	background-image: url("images/tabBottomSelected.png");
+	.topBottom-selected-tab-gradient (bottom);
+
 	.box-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
 }
 /** end bottom tab **/
 
 /*************** left tab ***************/
 .claro .dijitTabContainerLeft-tabs .dijitTab {
-	border-right-width: 0;
+	/* unselected (and not hovered/pressed) tab */
 	left: 1px;	/* used for overlap */
 	margin-bottom: 1px;
-}
-/* normal status */
-.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
-	background-image: url("../@{image-layout-tab-left}");
-	background-position: -347px -340px;
-	background-repeat: repeat-y;
-}
-.claro .dijitTabContainerLeft-tabs .dijitTabContent {
 	padding:3px 8px 4px 4px;
-	background-image: url("../@{image-layout-tab-left}");
+
+	// gradient (CSS gradient, with backup image for IE6-9)
+	background-image: url("images/tabLeftUnselected.png");
 	background-repeat: repeat-y;
-	background-position:0 0;
+	.unselected-tab-gradient(left);
 }
-/* checked status */
-.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent {
+
+/* selected tab */
+.claro .dijitTabContainerLeft-tabs .dijitTabChecked {
+	border-right-width: 0;
 	padding-right: 9px;
-	border-right: none;
-	background-image: none;
-}
-.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv {
-	background-position:0 -179px;
-	background-repeat:repeat-y;
+
+	// gradient (CSS gradient, with backup image for IE6-9)
+	background-image: url("images/tabLeftSelected.png");
+	.alpha-white-gradient (left, 0.5,0px, 1,30px);  // 1/2 inch blue gradient, remainder white
+
 	.box-shadow(-1px 0 2px rgba(0, 0, 0, .05));
 }
 /** end left tab **/
 
 /*************** right tab ***************/
 .claro .dijitTabContainerRight-tabs .dijitTab {
-	border-left-width: 0;
+	/* unselected (and not hovered/pressed) tab */
 	left: -1px;	/* used for overlap */
 	margin-bottom: 1px;
-}
-/* normal status */
-.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv {
-	background-image: url("../@{image-layout-tab-right}");
-	background-repeat: repeat-y;
-	background-position: -1px -347px;
-}
-.claro .dijitTabContainerRight-tabs .dijitTabContent {
 	padding:3px 8px 4px 4px;
-	background-image: url("../@{image-layout-tab-right}");
-	background-position:right top;
+
+	// gradient (CSS gradient, with backup image for IE6-9)
+	background-image: url("images/tabRightUnselected.png");
 	background-repeat: repeat-y;
+	background-position: right;
+	.unselected-tab-gradient(right);
 }
-/* checked status */
-.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent {
+.claro .dijitTabContainerRight-tabs .dijitTabChecked {
+	/* selected tab */
 	padding-left: 5px;
-	border-left: none;
-	background-image: none;
-}
-.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv {
-	background-position:-348px -179px;
+	border-left-width: 0;
+
+	// gradient (CSS gradient, with backup image for IE6-9)
+	background-image: url("images/tabRightSelected.png");
+	.alpha-white-gradient (right, 0.5,0px, 1,30px);	// 1/2 inch blue gradient, remainder white
+
 	.box-shadow(1px 0 2px rgba(0, 0, 0, 0.07));
 }
 /** end right tab **/
 
 /** round corner **/
-.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv,
-.claro .dijitTabContainerTop-tabs .dijitTabContent {
+.claro .dijitTabContainerTop-tabs .dijitTab {
 	.border-radius(2px 2px 0 0);
 }
-.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv,
-.claro .dijitTabContainerBottom-tabs .dijitTabContent{
+.claro .dijitTabContainerBottom-tabs .dijitTab {
 	.border-radius(0 0 2px 2px);
 }
-.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv,
-.claro .dijitTabContainerLeft-tabs .dijitTabContent{
+.claro .dijitTabContainerLeft-tabs .dijitTab {
 	.border-radius(2px 0 0 2px);
 }
 
-.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv,
-.claro .dijitTabContainerRight-tabs .dijitTabContent{
+.claro .dijitTabContainerRight-tabs .dijitTab {
 	.border-radius(0 2px 2px 0);
 }
 
@@ -298,15 +261,12 @@
 .claro .dijitTabListContainer-top .tabStripButton {
 	padding: 4px 3px;
 	margin-top:7px;
-	background-image: url("../@{image-layout-tab-top}");
-	background-position:0 0;
+	.alpha-white-gradient (top, 1,0px, 0.1,1px, 0.6,6px, 0,100%);	// to match unselected tab, but had to tweak numbers
 }
 .claro .dijitTabListContainer-bottom .tabStripButton {
-	padding:5px 3px;
-	margin-bottom:4px;
-	background-image: url("../@{image-layout-tab-top}");
-	background-position:0 -248px;
-	background-position:bottom;
+	padding:4px 3px;
+	margin-bottom:7px;
+	.alpha-white-gradient (bottom, 1,0px, 0.1,1px, 0.6,6px, 0,100%);	// to match unselected tab, but had to tweak numbers
 }
 .claro .tabStripButtonHover {
 	background-color:@hovered-background-color;
@@ -349,10 +309,9 @@
 }
 .claro .dijitTabContainerNested .dijitTabContainerTop-tabs {
 	border-bottom:solid 1px @border-color;
-	padding:1px 2px 4px;
-	margin-top:-2px;
+	padding:2px 2px 4px;
 }
-.claro .dijitTabContainerTabListNested .dijitTabContent {
+.claro .dijitTabContainerTabListNested .dijitTab {
 	background:rgba(255, 255, 255, 0) none repeat scroll 0 0;
 	border: none;
 	padding: 4px;
@@ -361,34 +320,35 @@
  	.transition-duration(.3s);
 	.border-radius(2px);
 }
-.claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv {
-	/* 4 element selector to override box-shadow setting from above rule:
-	 *		.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { ... }
-	 */
+.claro .dijitTabContainerTabListNested .dijitTab {
 	background: none;
 	border: none;
 	top: 0;/* to override top: 1px/-1px for normal tabs */
 	.box-shadow(none);
 }
-.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent {
+.claro .dijitTabContainerTabListNested .dijitTabHover {
 	background-color: @nestedtab-hovered-background-color;
 	border:solid 1px @nestedtab-hovered-border-color;
-	padding: 3px;
+	padding: 3px;	// 4px above padding - 1px compensation for border
 	.transition-duration(.2s);
 }
 .claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
 	text-decoration: none;
 }
-.claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent {
+.claro .dijitTabContainerTabListNested .dijitTabActive {
 	border:solid 1px @nestedtab-selected-border-color;
 	padding: 3px;
-	background: @nestedtab-selected-background-color url("../@{image-layout-tab-nested}") repeat-x;
+
+	// CSS gradient with fallback to image for IE
+	// this is in a weird place, only for active state; mailed Jason about it
+	background: @nestedtab-selected-background-color url("images/tabNested.png") repeat-x;
+	.alpha-white-gradient (0.61,0%, 0,17%, 0,83%, 0.61,100%);
+
 	.transition-duration(.1s);
 }
-.claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent {
+.claro .dijitTabContainerTabListNested .dijitTabChecked {
 	padding: 3px;
 	border:solid 1px @selected-border-color;
-	background-position: 0 105px;
 	background-color:@selected-background-color;
 }
 .claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
@@ -399,10 +359,8 @@
 	border: none;/* prevent double border */
 }
 
-
-.dj_ie6 .claro .dijitTabContent,
-.dj_ie6 .claro .dijitTabInnerDiv,
-.dj_ie6 .dijitTabListContainer-top .tabStripButton,
-.dj_ie6 .dijitTabListContainer-bottom .tabStripButton{
-	background-image: none;
+.claro .dijitTab,
+.claro .tabStripButton {
+    // IE6 can't handle background-image and background-color on same node
+	_background-image: none !important;
 }
diff --git a/lib/dijit/themes/claro/layout/TabContainer_rtl.css b/lib/dijit/themes/claro/layout/TabContainer_rtl.css
index 89fdff097..3b4d87ad3 100644
--- a/lib/dijit/themes/claro/layout/TabContainer_rtl.css
+++ b/lib/dijit/themes/claro/layout/TabContainer_rtl.css
@@ -2,66 +2,3 @@
   margin-right: 0;
   margin-left: 1px;
 }
-.claro .dijitTabRtl {
-  -moz-box-orient: horizontal;
-  text-align: right;
-}
-.dj_ie7 .claro .dijitTabRtl .dijitTabContent {
-  display: block;
-  left: 0;
-}
-.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl, .dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl {
-  top: 1px;
-}
-.dj_ie7 .claro .tabStripButtonRtl .dijitButtonContents,
-.dj_ie8 .claro .tabStripButtonRtl .dijitButtonContents,
-.dj_ie6 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv,
-.dj_ie6 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv,
-.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv,
-.dj_ie7 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv,
-.dj_iequirks .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv,
-.dj_iequirks .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv {
-  float: left;
-}
-.dj_ie6 .claro .dijitTabRtl .tabLabel,
-.dj_ie6 .claro .dijitTabContainerRight-tabs .dijitTabRtl,
-.dj_ie6 .claro .dijitTabContainerLeft-tabs .dijitTabRtl,
-.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtl .dijitTabInnerDiv,
-.dj_ie7 .claro .dijitTabContainerLeft-tabs .dijitTabRtl .dijitTabInnerDiv {
-  /*Make the .tablabel have width in ie6 with haslayout property, fix Close icon position bug*/
-
-  zoom: 1;
-}
-.dj_ie6 .claro .dijitTabRtl .dijitTabCloseButton, .dj_ie7 .claro .dijitTabRtl .dijitTabCloseButton, .dj_iequirks .claro .dijitTabRtl .dijitTabCloseButton {
-  margin-right: 5px;
-}
-.dj_ie6 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs, .dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs {
-  width: 1%;
-}
-.dj_ie6 .dijitTabContainerTopStrip, .dj_ie6 .dijitTabContainerBottomStrip {
-  position: absolute;
-}
-.dj_iequirks .claro .dijitTabContainerTopRtl .dijitTabContainerTopStrip {
-  padding-top: 10px;
-}
-.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtlChecked .dijitTabInnerDiv {
-  background-position: -341px -179px;
-}
-.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon, .dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon {
-  position: relative;
-}
-.dj_ie6-rtl .claro .dijitTabContainerTop-tabs {
-  /* this strange rule prevents IE6 bug in themeTester.html?dir=rtl upon closing
-	 * "Closable" tab, where the other tabs disappear
-	 */
-
-  padding-left: 3px;
-}
-.dj_iequirks-rtl .claro .dijitTabListWrapper {
-  /* this strange rule prevents IE6 bug in themeTesterQuirk.html?dir=rtl upon closing
-	 * "Closable" tab, where the other tabs disappear
-	 */
-
-  border-left: 1px solid #ffffff;
-  border-right: 1px solid #ffffff;
-}
diff --git a/lib/dijit/themes/claro/layout/TabContainer_rtl.less b/lib/dijit/themes/claro/layout/TabContainer_rtl.less
index eaada0d0a..c6cec49fd 100644
--- a/lib/dijit/themes/claro/layout/TabContainer_rtl.less
+++ b/lib/dijit/themes/claro/layout/TabContainer_rtl.less
@@ -5,77 +5,3 @@
 	margin-right: 0;
 	margin-left: 1px;
 }
-.claro .dijitTabRtl {
-	-moz-box-orient:horizontal;
-	text-align: right;
-}
-.dj_ie7 .claro .dijitTabRtl .dijitTabContent {
-	display: block;
-	left: 0;
-}
-.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl,
-.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl {
-	top: 1px;
-}
-
-// Note that .tabStripButtonRtl .dijitButtonContents needed for IE8 quirks but breaks IE6 quirks
-.dj_ie7 .claro .tabStripButtonRtl .dijitButtonContents,
-.dj_ie8 .claro .tabStripButtonRtl .dijitButtonContents,
-.dj_ie6 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv,
-.dj_ie6 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv,
-.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv,
-.dj_ie7 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv,
-.dj_iequirks .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv,
-.dj_iequirks .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv {
-	float:left;
-}
-.dj_ie6 .claro .dijitTabRtl .tabLabel,
-.dj_ie6 .claro .dijitTabContainerRight-tabs .dijitTabRtl,
-.dj_ie6 .claro .dijitTabContainerLeft-tabs .dijitTabRtl,
-.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtl .dijitTabInnerDiv,
-.dj_ie7 .claro .dijitTabContainerLeft-tabs .dijitTabRtl .dijitTabInnerDiv {
-	/*Make the .tablabel have width in ie6 with haslayout property, fix Close icon position bug*/
-	zoom:1;
-}
-.dj_ie6 .claro .dijitTabRtl .dijitTabCloseButton,
-.dj_ie7 .claro .dijitTabRtl .dijitTabCloseButton,
-.dj_iequirks .claro .dijitTabRtl .dijitTabCloseButton {
-	margin-right:5px;
-}
-
-.dj_ie6 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs,
-.dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs {
-	width:1%;
-}
-
-.dj_ie6 .dijitTabContainerTopStrip,
-.dj_ie6 .dijitTabContainerBottomStrip {
-	position:absolute;
-}
-.dj_iequirks .claro .dijitTabContainerTopRtl .dijitTabContainerTopStrip {
-	padding-top: 10px;
-}
-.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtlChecked .dijitTabInnerDiv {
-	background-position:-341px -179px;
-}
-
-.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon,
-.dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon {
-   position: relative;
-}
-
-
-.dj_ie6-rtl .claro .dijitTabContainerTop-tabs {	
-	/* this strange rule prevents IE6 bug in themeTester.html?dir=rtl upon closing
-	 * "Closable" tab, where the other tabs disappear
-	 */
-	padding-left: 3px;
-}
-
-.dj_iequirks-rtl .claro .dijitTabListWrapper {
-	/* this strange rule prevents IE6 bug in themeTesterQuirk.html?dir=rtl upon closing
-	 * "Closable" tab, where the other tabs disappear
-	 */
-	border-left: 1px solid @pane-background-color;
-	border-right: 1px solid @pane-background-color;
-}
diff --git a/lib/dijit/themes/claro/layout/images/accordion.png b/lib/dijit/themes/claro/layout/images/accordion.png
deleted file mode 100644
index 48181035a..000000000
--- a/lib/dijit/themes/claro/layout/images/accordion.png
+++ /dev/null
diff --git a/lib/dijit/themes/claro/layout/images/splitterHorizontalHover.png b/lib/dijit/themes/claro/layout/images/splitterHorizontalHover.png
deleted file mode 100644
index 0f5b691f6..000000000
--- a/lib/dijit/themes/claro/layout/images/splitterHorizontalHover.png
+++ /dev/null
diff --git a/lib/dijit/themes/claro/layout/images/splitterVerticalHover.png b/lib/dijit/themes/claro/layout/images/splitterVerticalHover.png
deleted file mode 100644
index 2c3c6960e..000000000
--- a/lib/dijit/themes/claro/layout/images/splitterVerticalHover.png
+++ /dev/null
diff --git a/lib/dijit/themes/claro/layout/images/tabBottom.png b/lib/dijit/themes/claro/layout/images/tabBottom.png
deleted file mode 100644
index dbcfc851b..000000000
--- a/lib/dijit/themes/claro/layout/images/tabBottom.png
+++ /dev/null
diff --git a/lib/dijit/themes/claro/layout/images/tabBottomSelected.png b/lib/dijit/themes/claro/layout/images/tabBottomSelected.png
new file mode 100644
index 000000000..f92b05f45
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/images/tabBottomSelected.png
diff --git a/lib/dijit/themes/claro/layout/images/tabBottomSelected.svg b/lib/dijit/themes/claro/layout/images/tabBottomSelected.svg
new file mode 100644
index 000000000..4e6ff6d43
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/images/tabBottomSelected.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" ?>
+<!--
+	Source file for tabBottomSelected.png, which is used by IE7-9 for selected tabs.
+	Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
+
+	Output should match CSS gradient from .topBottom-selected-tab-gradient() from TabContainer.less.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="250px" viewBox="0 0 1 250" preserveAspectRatio="none">
+	<defs>
+		<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%">
+			<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
+			<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
+		</linearGradient>
+	</defs>
+	<rect x="0" y="0" width="1" height="242" fill="white"/>
+	<rect x="0" y="242" width="1" height="6" fill="url(#gradient)"/>
+	<rect x="0" y="248" width="1" height="2" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/lib/dijit/themes/claro/layout/images/tabBottomUnselected.png b/lib/dijit/themes/claro/layout/images/tabBottomUnselected.png
new file mode 100644
index 000000000..7815d9cfb
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/images/tabBottomUnselected.png
diff --git a/lib/dijit/themes/claro/layout/images/tabBottomUnselected.svg b/lib/dijit/themes/claro/layout/images/tabBottomUnselected.svg
new file mode 100644
index 000000000..4193238e8
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/images/tabBottomUnselected.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" ?>
+<!--
+	Source file for tabBottomUnselected.png, which is used by IE7-9 for the selected tabs.
+	Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
+
+	Output should match CSS gradient from TabContainer.less.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="16px" viewBox="0 0 1 16" preserveAspectRatio="none">
+	<defs>
+		<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="100%" x2="0%" y2="0%">
+			<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
+			<stop offset="6%" stop-color="#ffffff" stop-opacity="1"/>
+			<stop offset="13%" stop-color="#ffffff" stop-opacity="0.2"/>
+			<stop offset="43%" stop-color="#ffffff" stop-opacity="0.6"/>
+			<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
+		</linearGradient>
+	</defs>
+	<rect x="0" y="0" width="1" height="16" fill="url(#gradient)"/>
+</svg>
\ No newline at end of file
diff --git a/lib/dijit/themes/claro/layout/images/tabLeft.png b/lib/dijit/themes/claro/layout/images/tabLeft.png
deleted file mode 100644
index 8e9fcba27..000000000
--- a/lib/dijit/themes/claro/layout/images/tabLeft.png
+++ /dev/null
diff --git a/lib/dijit/themes/claro/layout/images/tabLeftSelected.png b/lib/dijit/themes/claro/layout/images/tabLeftSelected.png
new file mode 100644
index 000000000..9700afb37
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/images/tabLeftSelected.png
diff --git a/lib/dijit/themes/claro/layout/images/tabLeftSelected.svg b/lib/dijit/themes/claro/layout/images/tabLeftSelected.svg
new file mode 100644
index 000000000..12e7d8a64
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/images/tabLeftSelected.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" ?>
+<!--
+	Source file for tabLeftSelected.png, which is used by IE7-9 for selected tabs.
+	Compile to png with batik, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
+
+	Output should match CSS gradient from TabContainer.less.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="1000px" height="1px" viewBox="0 0 1000 1" preserveAspectRatio="none">
+	<defs>
+		<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%">
+			<stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/>
+			<stop offset="100%" stop-color="#ffffff" stop-opacity="1"/>
+		</linearGradient>
+	</defs>
+	<rect x="0" y="0" width="30" height="1" fill="url(#gradient)"/>
+	<rect x="30" y="0" width="970" height="1" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/lib/dijit/themes/claro/layout/images/tabLeftUnselected.png b/lib/dijit/themes/claro/layout/images/tabLeftUnselected.png
new file mode 100644
index 000000000..412390e08
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/images/tabLeftUnselected.png
diff --git a/lib/dijit/themes/claro/layout/images/tabLeftUnselected.svg b/lib/dijit/themes/claro/layout/images/tabLeftUnselected.svg
new file mode 100644
index 000000000..e31c211b7
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/images/tabLeftUnselected.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" ?>
+<!--
+	Source file for tabLeftUnselected.png, which is used by IE7-9 for the selected tabs.
+	Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
+
+	Output should match CSS gradient from TabContainer.less.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="150px" height="1px" viewBox="0 0 100 1" preserveAspectRatio="none">
+	<defs>
+		<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%">
+			<stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/>
+			<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
+		</linearGradient>
+	</defs>
+	<rect x="0" y="0" width="150" height="1" fill="url(#gradient)"/>
+</svg>
\ No newline at end of file
diff --git a/lib/dijit/themes/claro/layout/images/tabRight.png b/lib/dijit/themes/claro/layout/images/tabRight.png
deleted file mode 100644
index 0aaae53a1..000000000
--- a/lib/dijit/themes/claro/layout/images/tabRight.png
+++ /dev/null
diff --git a/lib/dijit/themes/claro/layout/images/tabRightSelected.png b/lib/dijit/themes/claro/layout/images/tabRightSelected.png
new file mode 100644
index 000000000..1a2843499
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/images/tabRightSelected.png
diff --git a/lib/dijit/themes/claro/layout/images/tabRightSelected.svg b/lib/dijit/themes/claro/layout/images/tabRightSelected.svg
new file mode 100644
index 000000000..d8d3d674a
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/images/tabRightSelected.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" ?>
+<!--
+	Source file for tabRightSelected.png, which is used by IE7-9 for selected tabs.
+	Compile to png with batik, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
+
+	Output should match CSS gradient from TabContainer.less.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="1000px" height="1px" viewBox="0 0 1000 1" preserveAspectRatio="none">
+	<defs>
+		<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="100%" y1="0%" x2="0%" y2="0%">
+			<stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/>
+			<stop offset="100%" stop-color="#ffffff" stop-opacity="1"/>
+		</linearGradient>
+	</defs>
+	<rect x="0" y="0" width="970" height="1" fill="white"/>
+	<rect x="970" y="0" width="30" height="1" fill="url(#gradient)"/>
+</svg>
\ No newline at end of file
diff --git a/lib/dijit/themes/claro/layout/images/tabRightUnselected.png b/lib/dijit/themes/claro/layout/images/tabRightUnselected.png
new file mode 100644
index 000000000..2bdd00e4d
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/images/tabRightUnselected.png
diff --git a/lib/dijit/themes/claro/layout/images/tabRightUnselected.svg b/lib/dijit/themes/claro/layout/images/tabRightUnselected.svg
new file mode 100644
index 000000000..d1379a717
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/images/tabRightUnselected.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" ?>
+<!--
+	Source file for tabRightUnselected.png, which is used by IE7-9 for the selected tabs.
+	Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
+
+	Output should match CSS gradient from TabContainer.less.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="150px" height="1px" viewBox="0 0 100 1" preserveAspectRatio="none">
+	<defs>
+		<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="100%" y1="0%" x2="0%" y2="0%">
+			<stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/>
+			<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
+		</linearGradient>
+	</defs>
+	<rect x="0" y="0" width="150" height="1" fill="url(#gradient)"/>
+</svg>
\ No newline at end of file
diff --git a/lib/dijit/themes/claro/layout/images/tabTop.png b/lib/dijit/themes/claro/layout/images/tabTop.png
deleted file mode 100644
index 2822487ed..000000000
--- a/lib/dijit/themes/claro/layout/images/tabTop.png
+++ /dev/null
diff --git a/lib/dijit/themes/claro/layout/images/tabTopSelected.png b/lib/dijit/themes/claro/layout/images/tabTopSelected.png
new file mode 100644
index 000000000..f4d577258
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/images/tabTopSelected.png
diff --git a/lib/dijit/themes/claro/layout/images/tabTopSelected.svg b/lib/dijit/themes/claro/layout/images/tabTopSelected.svg
new file mode 100644
index 000000000..d06e646ea
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/images/tabTopSelected.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" ?>
+<!--
+	Source file for tabTopSelected.png, which is used by IE7-9 for the selected tabs.
+	Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
+
+	Output should match CSS gradient from .topBottom-selected-tab-gradient() from TabContainer.less.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="250px" viewBox="0 0 1 250" preserveAspectRatio="none">
+	<defs>
+		<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%">
+			<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
+			<stop offset="100%" stop-color="#ffffff" stop-opacity="1"/>
+		</linearGradient>
+	</defs>
+	<rect x="0" y="0" width="1" height="2" fill="white"/>
+	<rect x="0" y="2" width="1" height="6" fill="url(#gradient)"/>
+	<rect x="0" y="8" width="1" height="242" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/lib/dijit/themes/claro/layout/images/tabTopUnselected.png b/lib/dijit/themes/claro/layout/images/tabTopUnselected.png
new file mode 100644
index 000000000..8c34545f5
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/images/tabTopUnselected.png
diff --git a/lib/dijit/themes/claro/layout/images/tabTopUnselected.svg b/lib/dijit/themes/claro/layout/images/tabTopUnselected.svg
new file mode 100644
index 000000000..c55e92532
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/images/tabTopUnselected.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" ?>
+<!--
+	Source file for tabTopUnSelected.png, which is used by IE7-9 for the selected tabs.
+	Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
+
+	Output should match CSS gradient from TabContainer.less.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="16px" viewBox="0 0 1 16" preserveAspectRatio="none">
+	<defs>
+		<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%">
+			<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
+			<stop offset="6%" stop-color="#ffffff" stop-opacity="1"/>
+			<stop offset="13%" stop-color="#ffffff" stop-opacity="0.2"/>
+			<stop offset="43%" stop-color="#ffffff" stop-opacity="0.6"/>
+			<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
+		</linearGradient>
+	</defs>
+	<rect x="0" y="0" width="1" height="16" fill="url(#gradient)"/>
+</svg>
\ No newline at end of file
diff --git a/lib/dijit/themes/claro/variables.less b/lib/dijit/themes/claro/variables.less
index ca7d6773c..ac21a5ff7 100644
--- a/lib/dijit/themes/claro/variables.less
+++ b/lib/dijit/themes/claro/variables.less
@@ -6,7 +6,7 @@
 @disabled-color: #d3d3d3;												// Base for disabled backgrounds and borders
 @error-color: #d46464;
 
-@container-background-color:#fff;										// Backgrounds for various content areas such as TitlePane, ContentPane and Inputs
+@container-background-color:#fff;										// Backgrounds for various content areas such as TitlePane, ContentPane and Inputs (if changed, adjust selected tab to match)
 
 @minor-selected-color: spin(saturate(darken(@primary-color, 6), 19), 0);						// Color for various arrows and buttons
 @base-border-color: spin(desaturate(darken(@primary-color, 29), 44), -1);		// Augmented and used directly by variables to create border colors for various widgets
@@ -136,6 +136,9 @@
 @dialog-titlebar-border-color: @container-background-color;	// Inner border around the title sectionof a Dialog, inside the main border of the Dialog and the border between title and content
 @dialog-titlebar-background-color: @minor-selected-color;
 
+// Tooltip
+@tooltip-gradient-color: fade(@primary-color,10%);		// a little swath of color at the bottom of tooltips
+
 // BorderContainer
 @splitter-hovered-background-color: @primary-color;	// Color of splitter when user hovers it, before mouse down
 @splitter-dragged-background-color: @minor-selected-color;	// Color of splitter while it's being dragged
@@ -156,49 +159,29 @@
 @document-shadedsection-background-color: @bar-background-color;// background color used for <pre>, <code>, and table header rows
 @document-border-color: @disabled-color;								// Border for <pre>, <code>, tables, etc.
 
-// Images
+// Icons, arrows, etc.
 @image-arrow-sprite: "images/spriteArrows.png";
-@image-calendar-container: "images/calendarContainerImages.png";
 @image-calendar-arrows: "images/calendarArrows.png";
 @image-calendar-arrows-ie6: "images/calendarArrows8bit.png";
 @image-checkmark: "images/checkmarkNoBorder.png";
 @image-checkmark-ie6: "images/checkmarkNoBorder.gif";
-@image-common-highlight: "images/commonHighlight.png";
 @image-dialog-close: "images/dialogCloseIcon.png";
 @image-dialog-close-ie6: "images/dialogCloseIcon8bit.png";
 @image-dnd: "images/dnd.png";
 @image-editor-icons-enabled: "../../icons/images/editorIconsEnabled.png";
-@image-form-button: "form/images/button.png";
 @image-form-button-arrows: "form/images/buttonArrows.png";
 @image-form-checkbox-and-radios: "form/images/checkboxRadioButtonStates.png";
 @image-form-checkbox-and-radios-ie6: "form/images/checkboxAndRadioButtons_IE6.png";
 @image-form-common-arrows: "form/images/commonFormArrows.png";
 @image-form-error: "form/images/error.png";
-@image-form-highlight: "form/images/formHighlight.png";
-@image-form-slider-horizontal: "form/images/sliderHorizontal.png";
 @image-form-slider-thumbs: "form/images/sliderThumbs.png";
-@image-form-slider-vertical: "form/images/sliderVertical.png";
-@image-form-textbox-background: "form/images/textBox_back.png";
-@image-layout-accordion: "layout/images/accordion.png";
-@image-layout-splitter-horizontal-hover: "layout/images/splitterHorizontalHover.png";
-@image-layout-splitter-vertical-hover: "layout/images/splitterVerticalHover.png";
-@image-layout-tab-bottom: "layout/images/tabBottom.png";
-@image-layout-tab-close: "layout/images/tabClose.png";
-@image-layout-tab-left: "layout/images/tabLeft.png";
-@image-layout-tab-nested: "layout/images/tabNested.png";
-@image-layout-tab-right: "layout/images/tabRight.png";
-@image-layout-tab-top: "layout/images/tabTop.png";
+@image-layout-tab-close: "layout/images/tabClose.png";	// [x] icon to close a tab
 @image-loading-animation: "images/loadingAnimation.gif";
-@image-menu-highlight: "images/menuHighlight.png";
-@image-progressbar-empty: "images/progressBarEmpty.png";
-@image-progressbar-full: "images/progressBarFull.png";
-@image-progressbar-anim: "images/progressBarAnim.gif";
-@image-titlebar: "images/titlebar.png";
-@image-tooltip: "images/tooltip.png";
-@image-tooltip-ie6: "images/tooltip8bit.png";
-@image-tooltip-gradient: "images/tooltipGradient.png";
+@image-tooltip: "images/tooltip.png";	// arrow connectors
+@image-tooltip-ie6: "images/tooltip8bit.png";	// arrow connectors (8 bit)
 @image-tree-expand: "images/treeExpandImages.png";
 @image-tree-expand-ie6: "images/treeExpandImages8bit.png";
+@image-progressbar-anim: "images/progressBarAnim.gif";
 
 // Mixins
 
@@ -242,3 +225,154 @@
 	-moz-transition-timing-function: @value;
 	transition-timing-function: @value;
 }
+
+.linear-gradient (@value1, @value2) {
+	// summary:
+	//		Expands to browser specific background-image specifications for a linear-gradient (2 stops)
+ 	background-image: -moz-linear-gradient(@value1, @value2); // FF3.6 - FF15 (FF16+ supports linear-gradient)
+ 	background-image: -webkit-linear-gradient(@value1, @value2); // Chrome10+, Safari5.1+
+ 	background-image: -o-linear-gradient(@value1, @value2); // Opera 11.10+
+ 	background-image: linear-gradient(@value1, @value2);
+}
+.linear-gradient (@value1, @value2, @value3) {
+ 	background-image: -moz-linear-gradient(@value1, @value2, @value3); // FF3.6 - FF15 (FF16+ supports linear-gradient)
+ 	background-image: -webkit-linear-gradient(@value1, @value2, @value3); // Chrome10+, Safari5.1+
+ 	background-image: -o-linear-gradient(@value1, @value2, @value3); // Opera 11.10+
+ 	background-image: linear-gradient(@value1, @value2, @value3);
+}
+.linear-gradient (@value1, @value2, @value3, @value4) {
+ 	background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4); // FF3.6 - FF15 (FF16+ supports linear-gradient)
+ 	background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4); // Chrome10+, Safari5.1+
+ 	background-image: -o-linear-gradient(@value1, @value2, @value3, @value4); // Opera 11.10+
+ 	background-image: linear-gradient(@value1, @value2, @value3, @value4);
+}
+.linear-gradient (@value1, @value2, @value3, @value4, @value5) {
+ 	background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4, @value5); // FF3.6 - FF15 (FF16+ supports linear-gradient)
+ 	background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4, @value5); // Chrome10+, Safari5.1+
+ 	background-image: -o-linear-gradient(@value1, @value2, @value3, @value4, @value5); // Opera 11.10+
+ 	background-image: linear-gradient(@value1, @value2, @value3, @value4, @value5);
+}
+.linear-gradient (@value1, @value2, @value3, @value4, @value5, @value6) {
+ 	background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6); // FF3.6 - FF15 (FF16+ supports linear-gradient)
+ 	background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6); // Chrome10+, Safari5.1+
+ 	background-image: -o-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6); // Opera 11.10+
+ 	background-image: linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6);
+}
+.linear-gradient (@value1, @value2, @value3, @value4, @value5, @value6, @value7) {
+ 	background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7); // FF3.6 - FF15 (FF16+ supports linear-gradient)
+ 	background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7); // Chrome10+, Safari5.1+
+ 	background-image: -o-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7); // Opera 11.10+
+ 	background-image: linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7);
+}
+
+.alpha-white-gradient (@opacity1, @stop1, @opacity2, @stop2) {
+	// summary:
+	//		For setting up white background-image with variable transparency.
+	// example:
+	//		Gradient starts at top (0%) with 30% opacity, and then ends at bottom (100%) with full transparency
+	//		|	.alpha-white-gradient(0.3, 0%, 0, 100%)
+	//
+	.linear-gradient(rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2);
+}
+.alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2) {
+	.linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2);
+}
+.alpha-white-gradient (@opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3) {
+	.linear-gradient(rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3);
+}
+.alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3) {
+	.linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3);
+}
+.alpha-white-gradient (@opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4) {
+	.linear-gradient(rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3, rgba(255,255,255, @opacity4) @stop4);
+}
+.alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4) {
+	.linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3, rgba(255,255,255, @opacity4) @stop4);
+}
+.alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4, @opacity5, @stop5) {
+	.linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3, rgba(255,255,255, @opacity4) @stop4, rgba(255,255,255, @opacity5) @stop5);
+}
+.alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4, @opacity5, @stop5, @opacity6, @stop6) {
+	.linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3, rgba(255,255,255, @opacity4) @stop4, rgba(255,255,255, @opacity5) @stop5, rgba(255,255,255, @opacity6) @stop6);
+}
+
+.gradient-and-filter (@color, @fade1, @fade2) {
+	// summary:
+	//		Sets up a background color with a vertical gradient.
+	//		In order to make transitions work properly on mozilla and webkit, this is done by combining
+	//		a background-color which will be changed based on state (ex: hover) with a constant
+	//		white alpha-transparency background-image.  On IE it creates a DXImageTransform filter.
+	// @color:
+	//		The color
+	// @fade1:
+	//		The percent to fade at the top
+	// @fade2:
+	//		The percent to fade at the bottom
+	background-color: @color; // the base color
+	.linear-gradient(fadeout(#fff, 100-@fade1), fadeout(#fff, 100-@fade2));
+	filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="lighten(@color, @fade1)~", endColorstr="lighten(@color, @fade2)~")"; // IE
+}
+.horizontal-gradient-and-filter (@color, @fade1, @fade2) {
+	// summary:
+	//		Sets up a background color with a horizontal gradient.
+	//		In order to make transitions work properly on mozilla and webkit, this is done by combining
+	//		a background-color which will be changed based on state (ex: hover) with a constant
+	//		white alpha-transparency background-image.  On IE it creates a DXImageTransform filter.
+	// @color:
+	//		The color
+	// @fade1:
+	//		The percent to fade at the top
+	// @fade2:
+	//		The percent to fade at the bottom
+	background-color: @color; // the base color
+	.linear-gradient(left, fadeout(#fff, 100-@fade1), fadeout(#fff, 100-@fade2));
+	filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="lighten(@color, @fade1)~", endColorstr="lighten(@color, @fade2)~"gradientType=1)"; // IE
+}
+
+
+// Mixins defining gradients
+
+.textbox-background-image () {
+	// summary:
+	//		Background image used for hovered TextBoxes and similar controls.
+	//		It's just a small inset shadow below the top border (inside of the TextBox).
+	.linear-gradient(rgba(127,127,127,0.2) 0%, rgba(127,127,127,0) 2px);
+}
+
+.standard-gradient (@pathToRoot: "") {
+	// summary:
+	//		Light to dark background-image used by widgets with short height (~16px) including:
+	//			- MenuBar, and hovered MenuItem/MenuBarItem
+	//			- arrow icon wrapper for Select, ComboBox, Spinner
+	//			- Toolbar and hovered Toolbar buttons
+	//			- TitlePane title bar, AccordionContainer title bar, Dialog title bar
+
+	// Fallback for IE
+	background-image: url("@{pathToRoot}images/standardGradient.png");
+	background-repeat: repeat-x;
+
+	// CSS gradient for other browsers
+	.alpha-white-gradient(0.7, 0%, 0, 100%);
+
+	// IE6 can't handle a background-image with transparency and a background-color; the color is blocked out
+	_background-image: none;
+}
+.active-gradient (@pathToRoot: "") {
+	// summary:
+	//		Light to dark background-image with an inset gray shadow at the top,
+	//		used by widgets when they are active (ie: mousedown) or selected, including:
+	//			- active MenuItem/MenuBarItem
+	//			- arrow icon wrapper for Select, ComboBox, Spinner when active or drop down is open
+	//			- active Toolbar buttons
+	//			- active TitlePane title bar, AccordionContainer title bar
+
+	// Fallback for IE
+	background-image: url("@{pathToRoot}images/activeGradient.png");
+	background-repeat: repeat-x;
+
+	// CSS gradient for other browsers
+	.linear-gradient(rgba(190,190,190,0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
+
+	// IE6 can't handle a background-image with transparency and a background-color; the color is blocked out
+	_background-image: none;
+}
diff --git a/lib/dijit/themes/dijit.css b/lib/dijit/themes/dijit.css
index 4c60bf371..dbf900663 100644
--- a/lib/dijit/themes/dijit.css
+++ b/lib/dijit/themes/dijit.css
@@ -17,11 +17,11 @@
 	margin:0;
 	border:0;
 	padding:0;
-	line-height:normal;
 	font: inherit;
+	line-height:normal;
 	color: inherit;
 }
-.dijit_a11y .dijitReset {
+.dj_a11y .dijitReset {
 	-moz-appearance: none; /* remove predefined high-contrast styling in Firefox */
 }
 
@@ -56,32 +56,45 @@ table.dijitInline {
 	position: relative;			/* to support setting width/height, see #2033 */
 }
 
+.dj_ie6 .dijitComboBox .dijitInputContainer,
 .dijitInputContainer {
 	/* for positioning of placeHolder */
 	#zoom: 1;
 	overflow: hidden;
-	float: none !important; /* needed by FF to squeeze the INPUT in */
+	float: none !important; /* needed to squeeze the INPUT in */
 	position: relative;
-	vertical-align: middle;
-	#display: inline;
+}
+.dj_ie7 .dijitInputContainer {
+	float: left !important; /* needed by IE to squeeze the INPUT in */
+	clear: left;
+	display: inline-block !important; /* to fix wrong text alignment in rtl text box */
 }
 
+.dj_ie .dijitSelect input,
 .dj_ie input.dijitTextBox,
 .dj_ie .dijitTextBox input {
 	font-size: 100%;
 }
+.dijitSelect .dijitButtonText {
+	float: left;
+	vertical-align: top;
+}
+TABLE.dijitSelect {
+	padding: 0 !important; /* messes up border alignment */
+}
 .dijitTextBox .dijitSpinnerButtonContainer,
 .dijitTextBox .dijitArrowButtonContainer,
-.dijitTextBox .dijitValidationContainer {
+.dijitValidationTextBox .dijitValidationContainer {
 	float: right;
 	text-align: center;
 }
+.dijitSelect input.dijitInputField,
 .dijitTextBox input.dijitInputField {
 	/* override unreasonable user styling of buttons and icons */
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 }
-.dijitTextBox .dijitValidationContainer {
+.dijitValidationTextBox .dijitValidationContainer {
 	display: none;
 }
 
@@ -90,10 +103,10 @@ table.dijitInline {
 	line-height:1px;
 }
 
-.dijitOffScreen {
-	position: absolute;
-	left: 50%;
-	top: -10000px;
+.dijitOffScreen { /* these class attributes should supercede any inline positioning style */
+	position: absolute !important;
+	left: 50% !important;
+	top: -10000px !important;
 }
 
 /*
@@ -152,12 +165,12 @@ table.dijitInline {
 /****
 		A11Y
  ****/
-.dijit_a11y .dijitIcon,
-.dijit_a11y div.dijitArrowButtonInner, /* is this only for Spinner?  if so, it should be deleted */
-.dijit_a11y span.dijitArrowButtonInner,
-.dijit_a11y img.dijitArrowButtonInner,
-.dijit_a11y .dijitCalendarIncrementControl,
-.dijit_a11y .dijitTreeExpando {
+.dj_a11y .dijitIcon,
+.dj_a11y div.dijitArrowButtonInner, /* is this only for Spinner?  if so, it should be deleted */
+.dj_a11y span.dijitArrowButtonInner,
+.dj_a11y img.dijitArrowButtonInner,
+.dj_a11y .dijitCalendarIncrementControl,
+.dj_a11y .dijitTreeExpando {
 	/* hide icon nodes in high contrast mode; when necessary they will be replaced by character equivalents
 	 * exception for input.dijitArrowButtonInner, because the icon and character are controlled by the same node */
 	display: none;
@@ -166,7 +179,7 @@ table.dijitInline {
 	display: block; /* override previous rule */
 }
 
-.dijit_a11y .dijitA11ySideArrow {
+.dj_a11y .dijitA11ySideArrow {
 	display: inline !important; /* display text instead */
 	cursor: pointer;
 }
@@ -177,20 +190,20 @@ table.dijitInline {
  * Avoid screen jitter when switching selected date by compensating for the selected node's
  * border w/padding on other nodes.
  */
-.dijit_a11y .dijitCalendarDateLabel {
+.dj_a11y .dijitCalendarDateLabel {
 	padding: 1px;
 	border: 0px !important;
 }
-.dijit_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel {
+.dj_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel {
 	border-style: solid !important;
 	border-width: 1px !important;
 	padding: 0;
 }
-.dijit_a11y .dijitCalendarDateTemplate {
+.dj_a11y .dijitCalendarDateTemplate {
 	padding-bottom: 0.1em !important;	/* otherwise bottom border doesn't appear on IE */
 	border: 0px !important;
 }
-.dijit_a11y .dijitButtonNode {
+.dj_a11y .dijitButtonNode {
 	border: black outset medium !important;
 
 	/* In claro, hovering a toolbar button reduces padding and adds a border.
@@ -198,13 +211,16 @@ table.dijitInline {
 	 */
 	padding: 0 !important;
 }
+.dj_a11y .dijitArrowButton {
+	padding: 0 !important;
+}
 
-.dijit_a11y .dijitButtonContents{
+.dj_a11y .dijitButtonContents {
 	margin: 0.15em; /* Margin needed to make focus outline visible */
 }
 
-.dijit_a11y .dijitTextBoxReadOnly .dijitInputField,
-.dijit_a11y .dijitTextBoxReadOnly .dijitButtonNode {
+.dj_a11y .dijitTextBoxReadOnly .dijitInputField,
+.dj_a11y .dijitTextBoxReadOnly .dijitButtonNode {
 	border-style: outset!important;
 	border-width: medium!important;
 	border-color: #999 !important;
@@ -215,6 +231,7 @@ table.dijitInline {
 .dijitButtonNode * {
 	vertical-align: middle;
 }
+.dijitSelect .dijitArrowButtonInner,
 .dijitButtonNode .dijitArrowButtonInner {
 	/* the arrow icon node */
 	background: no-repeat center;
@@ -248,7 +265,7 @@ table.dijitInline {
 }
 
 /* Buttons */
-.dj_gecko .dijit_a11y .dijitButtonDisabled .dijitButtonNode {
+.dj_gecko .dj_a11y .dijitButtonDisabled .dijitButtonNode {
 	opacity: 0.5;
 }
 
@@ -299,6 +316,9 @@ td.dijitButtonContents {
 	padding:0;
 }
 
+.dijitSelect {
+	border:1px solid gray;
+}
 .dijitButtonNode {
 	/* Node that is acting as a button -- may or may not be a BUTTON element */
 	border:1px solid gray;
@@ -318,6 +338,8 @@ td.dijitButtonContents {
 	border-width: 0;
 }
 
+.dijitSelect,
+.dijitSelect *,
 .dijitButtonNode,
 .dijitButtonNode * {
 	cursor: pointer;
@@ -356,11 +378,11 @@ div.dijitArrowButton {
 .dijitTextBoxDisabled {
 	color: gray;
 }
-.dj_webkit .dijitTextBoxDisabled input {
-	color: #eee; /* because WebKit lightens disabled input/textarea no matter what color you specify */
+.dj_safari .dijitTextBoxDisabled input {
+	color: #B0B0B0; /* because Safari lightens disabled input/textarea no matter what color you specify */
 }
-.dj_webkit textarea.dijitTextAreaDisabled {
-	color: #333; /* because WebKit lightens disabled input/textarea no matter what color you specify */
+.dj_safari textarea.dijitTextAreaDisabled {
+	color: #333; /* because Safari lightens disabled input/textarea no matter what color you specify */
 }
 .dj_gecko .dijitTextBoxReadOnly input.dijitInputField, /* disable arrow and validation presentation inputs but allow real input for text selection */
 .dj_gecko .dijitTextBoxDisabled input {
@@ -389,13 +411,17 @@ div.dijitArrowButton {
 	outline: 5px -webkit-focus-ring-color;
 }
 
+.dijitSelect input,
 .dijitTextBox input {
 	float: left; /* needed by IE to remove secret margin */
 }
+.dj_ie6 input.dijitTextBox,
+.dj_ie6 .dijitTextBox input {
+	float: none;
+}
 .dijitInputInner {
 	/* for when an <input> is embedded inside an inline-block <div> with a size and border */
 	border:0 !important;
-	vertical-align:middle !important;
 	background-color:transparent !important;
 	width:100% !important;
 	/* IE dislikes horizontal tweaking combined with width:100% so punish everyone for consistency */
@@ -404,15 +430,16 @@ div.dijitArrowButton {
 	margin-left: 0 !important;
 	margin-right: 0 !important;
 }
-.dijit_a11y .dijitTextBox input {
+.dj_a11y .dijitTextBox input {
 	margin: 0 !important;
 }
-.dijitTextBoxError input.dijitValidationInner,
+.dijitValidationTextBoxError input.dijitValidationInner,
+.dijitSelect input,
 .dijitTextBox input.dijitArrowButtonInner {
 	/* <input> used to display arrow icon/validation icon, or in arrow character in high contrast mode.
 	 * The css below is a trick to hide the character in non-high-contrast mode
 	 */
-	text-indent: -1em !important;
+	text-indent: -2em !important;
 	direction: ltr !important;
 	text-align: left !important;
 	height: auto !important;
@@ -420,15 +447,26 @@ div.dijitArrowButton {
 	#letter-spacing: -5em !important;
 	#text-align: right !important;
 }
+.dj_ie .dijitSelect input,
 .dj_ie .dijitTextBox input,
 .dj_ie input.dijitTextBox {
 	overflow-y: visible; /* inputs need help expanding when padding is added or line-height is adjusted */
 	line-height: normal; /* strict mode */
 }
-.dj_ie7 .dijitTextBox input.dijitValidationInner,
-.dj_ie7 .dijitTextBox input.dijitArrowButtonInner {
-	line-height: 86%; /* IE7 problem where the icon is vertically too low w/o this - real input stays at normal */
+.dijitSelect .dijitSelectLabel span {
+	line-height: 100%;
+}
+.dj_ie .dijitSelect .dijitSelectLabel {
+	line-height: normal;
 }
+.dj_ie6 .dijitSelect .dijitSelectLabel,
+.dj_ie7 .dijitSelect .dijitSelectLabel,
+.dj_ie8 .dijitSelect .dijitSelectLabel,
+.dj_iequirks .dijitSelect .dijitSelectLabel,
+.dijitSelect td,
+.dj_ie6 .dijitSelect input,
+.dj_iequirks .dijitSelect input,
+.dj_ie6 .dijitSelect .dijitValidationContainer,
 .dj_ie6 .dijitTextBox input,
 .dj_ie6 input.dijitTextBox,
 .dj_iequirks .dijitTextBox input.dijitValidationInner,
@@ -438,14 +476,15 @@ div.dijitArrowButton {
 .dj_iequirks input.dijitTextBox {
 	line-height: 100%; /* IE7 problem where the icon is vertically way too low w/o this */
 }
-.dijit_a11y input.dijitValidationInner,
-.dijit_a11y input.dijitArrowButtonInner {
+.dj_a11y input.dijitValidationInner,
+.dj_a11y input.dijitArrowButtonInner {
 	/* (in high contrast mode) revert rules from above so character displays */
 	text-indent: 0 !important;
 	width: 1em !important;
 	#text-align: left !important;
+	color: black !important;
 }
-.dijitTextBoxError .dijitValidationContainer {
+.dijitValidationTextBoxError .dijitValidationContainer {
 	display: inline;
 	cursor: default;
 }
@@ -457,6 +496,7 @@ div.dijitArrowButton {
 	/* dividing line between input area and up/down button(s) for ComboBox and Spinner */
 	border-width: 0 0 0 1px !important; /* !important needed due to wayward ".theme .dijitButtonNode" rules */
 }
+.dj_a11y .dijitSelect .dijitArrowButtonContainer,
 .dijitToolbar .dijitComboBox .dijitArrowButtonContainer {
 	/* overrides above rule plus mirror-image rule in dijit_rtl.css to have no divider when ComboBox in Toolbar */
 	border-width: 0 !important;
@@ -470,7 +510,7 @@ div.dijitArrowButton {
 	/* dividing line between input area and up/down button(s) for ComboBox and Spinner */
 	border-width: 0;
 }
-.dj_ie .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode {
+.dj_ie .dj_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode {
 	clear: both; /* IE workaround */
 }
 
@@ -495,35 +535,36 @@ div.dijitArrowButton {
 .dijitSpinnerButtonContainer .dijitButtonNode {
 	border-width: 0;
 }
-.dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode {
-	border: 0 none !important;
+.dj_a11y .dijitSpinnerButtonContainer .dijitButtonNode {
+	border-width: 0px !important;
+	border-style: solid !important;
 }
-.dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer,
-.dijit_a11y .dijitSpinner .dijitArrowButtonInner,
-.dijit_a11y .dijitSpinnerButtonContainer input {
+.dj_a11y .dijitTextBox .dijitSpinnerButtonContainer,
+.dj_a11y .dijitSpinner .dijitArrowButtonInner,
+.dj_a11y .dijitSpinnerButtonContainer input {
 	width: 1em !important;
 }
-.dijit_a11y .dijitSpinner .dijitArrowButtonInner {
+.dj_a11y .dijitSpinner .dijitArrowButtonInner {
 	margin: 0 auto !important; /* should auto-center */
 }
-.dj_ie .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
+.dj_ie .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 	padding-left: 0.3em !important;
 	padding-right: 0.3em !important;
 	margin-left: 0.3em !important;
 	margin-right: 0.3em !important;
 	width: 1.4em !important;
 }
-.dj_ie7 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
+.dj_ie7 .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 	padding-left: 0 !important; /* manually center INPUT: character is .5em and total width = 1em */
 	padding-right: 0 !important;
 	width: 1em !important;
 }
-.dj_ie6 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
+.dj_ie6 .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 	margin-left: 0.1em !important;
 	margin-right: 0.1em !important;
 	width: 1em !important;
 }
-.dj_iequirks .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
+.dj_iequirks .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 	margin-left: 0 !important;
 	margin-right: 0 !important;
 	width: 2em !important;
@@ -545,7 +586,7 @@ div.dijitArrowButton {
 .dj_iequirks .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
 	width: auto;
 }
-.dijit_a11y .dijitSpinnerButtonContainer .dijitArrowButton {
+.dj_a11y .dijitSpinnerButtonContainer .dijitArrowButton {
 	overflow: visible !important;
 }
 .dijitSpinner .dijitSpinnerButtonContainer .dijitDownArrowButton {
@@ -578,6 +619,7 @@ div.dijitArrowButton {
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	width: 100%;
+	visibility: hidden;
 }
 .dj_ie .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 	zoom: 50%; /* emulate transform: scale(0.5) */
@@ -586,26 +628,19 @@ div.dijitArrowButton {
 	overflow: hidden;
 }
 
-.dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
+.dj_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
 	width: 100%;
 }
-.dj_iequirks .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
-	width: 1em; /* matches .dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer rule - 100% is the whole screen width in quirks */
+.dj_iequirks .dj_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
+	width: 1em; /* matches .dj_a11y .dijitTextBox .dijitSpinnerButtonContainer rule - 100% is the whole screen width in quirks */
 }
-.dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	visibility: hidden;
-}
-.dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
+.dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 	vertical-align:top;
 	visibility: visible;
 }
-.dijit_a11y .dijitSpinnerButtonContainer {
+.dj_a11y .dijitSpinnerButtonContainer {
 	width: 1em;
 }
-.dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode {
-	border-width: 1px 0 0 0;
-	border-style: solid !important;
-}
 
 /****
 		dijit.form.CheckBox
@@ -641,20 +676,20 @@ div.dijitArrowButton {
 	filter: alpha(opacity=0);
 }
 
-.dijit_a11y .dijitCheckBox,
-.dijit_a11y .dijitRadio {
+.dj_a11y .dijitCheckBox,
+.dj_a11y .dijitRadio {
 	/* in a11y mode we display the native checkbox (not the icon), so don't restrict the size */
 	width: auto !important;
 	height: auto !important;
 }
-.dijit_a11y .dijitCheckBoxInput {
+.dj_a11y .dijitCheckBoxInput {
 	opacity: 1;
 	filter: none;
 	width: auto;
 	height: auto;
 }
 
-.dijit_a11y .dijitFocusedLabel {
+.dj_a11y .dijitFocusedLabel {
 	/* for checkboxes or radio buttons in high contrast mode, use border rather than outline to indicate focus (outline does not work in FF)*/
 	border: 1px dotted;
 	outline: 0px !important;
@@ -664,6 +699,9 @@ div.dijitArrowButton {
 		dijit.ProgressBar
  ****/
 
+.dijitProgressBar {
+    z-index: 0; /* so z-index settings below have no effect outside of the ProgressBar */
+}
 .dijitProgressBarEmpty {
 	/* outer container and background of the bar that's not finished yet*/
 	position:relative;overflow:hidden;
@@ -699,7 +737,7 @@ div.dijitArrowButton {
 	background-attachment: fixed;
 }
 
-.dijit_a11y .dijitProgressBarTile {
+.dj_a11y .dijitProgressBarTile {
 	/* a11y:  The border provides visibility in high-contrast mode */
 	border-width:2px;
 	border-style:solid;
@@ -721,7 +759,7 @@ div.dijitArrowButton {
 	display:none;
 }
 
-.dijit_a11y .dijitProgressBarIndeterminate .dijitProgressBarIndeterminateHighContrastImage {
+.dj_a11y .dijitProgressBarIndeterminate .dijitProgressBarIndeterminateHighContrastImage {
 	display:block;
 	position:absolute;
 	top:0;
@@ -768,7 +806,7 @@ div.dijitArrowButton {
 .dijitTooltipConnector {
 	position: absolute;
 }
-.dijit_a11y .dijitTooltipConnector {
+.dj_a11y .dijitTooltipConnector {
 	display: none;	/* won't show b/c it's background-image; hide to avoid border gap */
 }
 
@@ -804,6 +842,7 @@ body .dijitAlignClient { position: absolute; }
 .dijitBorderContainer, .dijitBorderContainerNoGutter {
 	position:relative;
 	overflow: hidden;
+    z-index: 0; /* so z-index settings below have no effect outside of the BorderContainer */
 }
 
 .dijitBorderContainerPane,
@@ -883,7 +922,7 @@ body .dijitAlignClient { position: absolute; }
 	overflow: hidden;
 	display: block;
 }
-.dj_ff3 .dijit_a11y div.dijitSplitter:focus {
+.dj_ff3 .dj_a11y div.dijitSplitter:focus {
 	outline-style:dotted;
 	outline-width: 2px;
 }
@@ -932,11 +971,11 @@ body .dijitAlignClient { position: absolute; }
 	cursor: row-resize;
 }
 
-.dijit_a11y .dijitSplitterH {
+.dj_a11y .dijitSplitterH {
 	border-top:1px solid #d3d3d3 !important;
 	border-bottom:1px solid #d3d3d3 !important;
 }
-.dijit_a11y .dijitSplitterV {
+.dj_a11y .dijitSplitterV {
 	border-left:1px solid #d3d3d3 !important;
 	border-right:1px solid #d3d3d3 !important;
 }
@@ -974,6 +1013,12 @@ body .dijitAlignClient { position: absolute; }
 	/* TitlePane that cannot be toggled */
 	cursor: default;
 }
+.dijitFixedOpen .dijitArrowNode, .dijitFixedOpen .dijitArrowNodeInner,
+.dijitFixedClosed .dijitArrowNode, .dijitFixedClosed .dijitArrowNodeInner{
+	/* don't show the open close icon, it makes the user think the pane is closable*/
+	display: none;
+}
+
 .dijitTitlePaneTitle * {
 	vertical-align: middle;
 }
@@ -981,12 +1026,12 @@ body .dijitAlignClient { position: absolute; }
 	/* normally, hide arrow text in favor of icon */
 	display: none;
 }
-.dijit_a11y .dijitTitlePane .dijitArrowNodeInner {
+.dj_a11y .dijitTitlePane .dijitArrowNodeInner {
 	/* ... except in a11y mode, then show text arrow */
 	display:inline !important;
 	font-family: monospace;		/* because - and + are different widths */
 }
-.dijit_a11y .dijitTitlePane .dijitArrowNode {
+.dj_a11y .dijitTitlePane .dijitArrowNode {
 	/* ... and hide icon */
 	display:none;
 }
@@ -1066,8 +1111,8 @@ body .dijitAlignClient { position: absolute; }
 }
 
 
-.dijit_a11y .dijitColorPalette .dijitPaletteTable,
-.dijit_a11y .dijitColorPalette .dijitPaletteTable * {
+.dj_a11y .dijitColorPalette .dijitPaletteTable,
+.dj_a11y .dijitColorPalette .dijitPaletteTable * {
 	/* table cells are to catch events, but the swatches are in the PaletteImg behind the table */
 	background-color: transparent !important;
 }
@@ -1093,12 +1138,12 @@ body .dijitAlignClient { position: absolute; }
 	font-weight: normal !important;
 }
 
-.dijit_a11y .dijitAccordionTitle .arrowTextUp,
-.dijit_a11y .dijitAccordionTitleSelected .arrowTextDown {
+.dj_a11y .dijitAccordionTitle .arrowTextUp,
+.dj_a11y .dijitAccordionTitleSelected .arrowTextDown {
 	display: inline;
 }
 
-.dijit_a11y .dijitAccordionTitleSelected .arrowTextUp {
+.dj_a11y .dijitAccordionTitleSelected .arrowTextUp {
 	display: none;
 }
 
@@ -1185,6 +1230,15 @@ body .dijitAlignClient { position: absolute; }
 	cursor:pointer;
 }
 
+/*
+No need to show a focus border since it's obvious from the shading, and there's a .dj_a11y .dijitMenuItemSelected
+rule below that handles the high contrast case when there's no shading.
+Hiding the focus border also works around webkit bug https://code.google.com/p/chromium/issues/detail?id=125779.
+*/
+.dijitMenuItem:focus {
+	outline: none
+}
+
 .dijitMenuPassive .dijitMenuItemHover,
 .dijitMenuItemSelected {
 	/*
@@ -1207,11 +1261,10 @@ body .dijitAlignClient { position: absolute; }
 	opacity:0.5;
 	cursor:default;
 }
-.dj_ie .dijit_a11y .dijitMenuItemDisabled,
-.dj_ie .dijit_a11y .dijitMenuItemDisabled td,
-.dj_ie .dijitMenuItemDisabled *,
-.dj_ie .dijitMenuItemDisabled td {
-	color:gray !important;
+.dj_ie .dj_a11y .dijitMenuItemDisabled,
+.dj_ie .dj_a11y .dijitMenuItemDisabled *,
+.dj_ie .dijitMenuItemDisabled * {
+	color: gray;
 	filter: alpha(opacity=35);
 }
 
@@ -1220,25 +1273,25 @@ body .dijitAlignClient { position: absolute; }
 	vertical-align: middle;
 }
 
-.dijit_a11y .dijitMenuItemSelected {
-	border: 1px dotted black !important;
+.dj_a11y .dijitMenuItemSelected {
+	border: 1px dotted black !important;	/* for 2.0 use outline instead, to prevent jitter */
 }
-.dj_ff3 .dijit_a11y .dijitMenuItem td {
+.dj_ff3 .dj_a11y .dijitMenuItem td {
 	padding: 0 !important;
 	background:none !important;
 }
-.dijit_a11y .dijitMenuItemSelected .dijitMenuItemLabel {
+.dj_a11y .dijitMenuItemSelected .dijitMenuItemLabel {
 	border-width: 1px;
 	border-style: solid;
 }
-.dj_ie8 .dijit_a11y .dijitMenuItemLabel {
+.dj_ie8 .dj_a11y .dijitMenuItemLabel {
 	position:static;
 }
 
 .dijitMenuExpandA11y {
 	display: none;
 }
-.dijit_a11y .dijitMenuExpandA11y {
+.dj_a11y .dijitMenuExpandA11y {
 	display: inline;
 }
 
@@ -1270,13 +1323,13 @@ body .dijitAlignClient { position: absolute; }
 .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIconChar {
 	visibility: visible;
 }
-.dijit_a11y .dijitCheckedMenuItemIconChar {
+.dj_a11y .dijitCheckedMenuItemIconChar {
 	display:inline !important;
 }
-.dijit_a11y .dijitCheckedMenuItemIcon {
+.dj_a11y .dijitCheckedMenuItemIcon {
 	display: none;
 }
-.dj_ie .dijit_a11y .dijitMenuBar .dijitMenuItem {
+.dj_ie .dj_a11y .dijitMenuBar .dijitMenuItem {
 	/* so bottom border of MenuBar appears on IE7 in high-contrast mode */
 	margin: 0;
 }
@@ -1287,8 +1340,27 @@ body .dijitAlignClient { position: absolute; }
 	cursor: default;	/* because pressing it has no effect */
 }
 
-/* TabContainer */
+/***
+TabContainer
+
+Main class hierarchy:
+
+.dijitTabContainer - the whole TabContainer
+   .dijitTabController / .dijitTabListContainer-top - wrapper for tab buttons, scroll buttons
+	 .dijitTabListWrapper / .dijitTabContainerTopStrip - outer wrapper for tab buttons (normal width)
+		.nowrapTabStrip / .dijitTabContainerTop-tabs - inner wrapper for tab buttons (50K width)
+   .dijitTabPaneWrapper - wrapper for content panes, has all borders except the one between content and tabs
+***/
+
+.dijitTabContainer {
+    z-index: 0; /* so z-index settings below have no effect outside of the TabContainer */
+    overflow-y: visible; /* prevent off-by-one-pixel errors from hiding bottom border (opposite tab labels) */
+}
+.dj_ie6 .dijitTabContainer {
+    /* workaround IE6 problem when tall content overflows TabContainer, see editor/test_FullScreen.html */
+   overflow: hidden;
 
+}
 .dijitTabContainerNoLayout {
 	width: 100%;	/* otherwise ScrollingTabController goes to 50K pixels wide */
 }
@@ -1297,9 +1369,13 @@ body .dijitAlignClient { position: absolute; }
 .dijitTabContainerTop-tabs,
 .dijitTabContainerLeft-tabs,
 .dijitTabContainerRight-tabs {
+    z-index: 1;
 	overflow: visible !important;  /* so tabs can cover up border adjacent to container */
 }
 
+.dijitTabController {
+    z-index: 1;
+}
 .dijitTabContainerBottom-container,
 .dijitTabContainerTop-container,
 .dijitTabContainerLeft-container,
@@ -1313,12 +1389,14 @@ body .dijitAlignClient { position: absolute; }
 	display: block;
 	position: relative;
     text-align: left;  /* just in case ancestor has non-standard setting */
+    z-index: 1;
 }
 .dijitTabListWrapper {
 	overflow: hidden;
+    z-index: 1;
 }
 
-.dijit_a11y .tabStripButton img {
+.dj_a11y .tabStripButton img {
 	/* hide the icons (or rather the empty space where they normally appear) because text will appear instead */
 	display: none;
 }
@@ -1332,7 +1410,7 @@ body .dijitAlignClient { position: absolute; }
 
 .dijitTabContainerLeft-tabs {
 	border-right: 1px solid black;
-	float: left;
+	float: left;    /* needed for IE7 RTL mode */
 }
 .dijitTabContainerLeft-container {
 	border-left: 0;
@@ -1347,7 +1425,7 @@ body .dijitAlignClient { position: absolute; }
 
 .dijitTabContainerRight-tabs {
 	border-left: 1px solid black;
-	float: left;
+	float: left;    /* needed for IE7 RTL mode */
 }
 .dijitTabContainerRight-container {
 	border-right: 0;
@@ -1393,11 +1471,6 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	#display:inline; /* don't use .dj_ie since that increases the priority */
 }
 
-.dijitTabInnerDiv {
-	position:relative;
-}
-
-
 .tabStripButton {
 	z-index: 12;
 }
@@ -1435,13 +1508,13 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 
 /* images off, high-contrast mode styles */
 
-.dijit_a11y .dijitTabCloseButton {
+.dj_a11y .dijitTabCloseButton {
 	background-image: none !important;
 	width: auto !important;
 	height: auto !important;
 }
 
-.dijit_a11y .dijitTabCloseText {
+.dj_a11y .dijitTabCloseText {
 	display: inline;
 }
 
@@ -1460,14 +1533,14 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	cursor: text;
 }
 
-.dijit_a11y .dijitInlineEditBoxDisplayMode,
+.dj_a11y .dijitInlineEditBoxDisplayMode,
 .dj_ie6 .dijitInlineEditBoxDisplayMode {
 	/* except that IE6 doesn't support transparent borders, nor does high contrast mode */
 	border: none;
 }
 
 .dijitInlineEditBoxDisplayModeHover,
-.dijit_a11y .dijitInlineEditBoxDisplayModeHover,
+.dj_a11y .dijitInlineEditBoxDisplayModeHover,
 .dj_ie6 .dijitInlineEditBoxDisplayModeHover {
 	/* An InlineEditBox in view mode (click this to edit the text) */
 	background-color: #e2ebf2;
@@ -1505,7 +1578,7 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	display: none;
 }
 
-.dijit_a11y .dijitExpandoText {
+.dj_a11y .dijitExpandoText {
 	display: inline;
 	padding-left: 10px;
 	padding-right: 10px;
@@ -1524,7 +1597,7 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 .dijitDialog {
 	position: absolute;
 	z-index: 999;
-	overflow: hidden;       /* override overflow: auto; from ContentPane to make dragging smoother */
+	overflow: hidden;	/* override overflow: auto; from ContentPane to make dragging smoother */
 }
 
 .dijitDialogTitleBar {
@@ -1555,8 +1628,8 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 }
 
 /* images off, high-contrast mode styles */
-.dijit_a11y .dijitSpinnerButtonContainer,
-.dijit_a11y .dijitDialog {
+.dj_a11y .dijitSpinnerButtonContainer,
+.dj_a11y .dijitDialog {
 	opacity: 1 !important;
 	background-color: white !important;
 }
@@ -1567,7 +1640,7 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	position:absolute;
 }
 
-.dijit_a11y .dijitDialog .closeText {
+.dj_a11y .dijitDialog .closeText {
 	display:inline;
 }
 
@@ -1587,7 +1660,7 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	right:50%;
 }
 
-.dijit_a11y div.dijitSliderImageHandle,
+.dj_a11y div.dijitSliderImageHandle,
 .dijitSliderImageHandle {
 	margin:0;
 	padding:0;
@@ -1597,16 +1670,16 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	height:0;
 	cursor: pointer;
 }
-.dj_iequirks .dijit_a11y .dijitSliderImageHandle {
+.dj_iequirks .dj_a11y .dijitSliderImageHandle {
 	font-size: 0;
 }
 .dj_ie7 .dijitSliderImageHandle {
 	overflow: hidden; /* IE7 workaround to make slider handle VISIBLE in non-a11y mode */
 }
-.dj_ie7 .dijit_a11y .dijitSliderImageHandle {
+.dj_ie7 .dj_a11y .dijitSliderImageHandle {
 	overflow: visible; /* IE7 workaround to make slider handle VISIBLE in a11y mode */
 }
-.dijit_a11y .dijitSliderFocused .dijitSliderImageHandle {
+.dj_a11y .dijitSliderFocused .dijitSliderImageHandle {
 	border:4px solid #000;
 	height:8px;
 	width:8px;
@@ -1727,6 +1800,7 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 
 .dijitSliderDecorationV {
 	height: 100%;
+	white-space: nowrap;
 }
 
 .dijitSliderButton {
@@ -1736,7 +1810,7 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	display:block;
 }
 
-.dijit_a11y .dijitSliderButtonInner {
+.dj_a11y .dijitSliderButtonInner {
 	visibility:visible !important;
 }
 
@@ -1825,17 +1899,17 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	margin-top:-.55em;
 }
 
-.dijit_a11y .dijitSliderReadOnly,
-.dijit_a11y .dijitSliderDisabled {
+.dj_a11y .dijitSliderReadOnly,
+.dj_a11y .dijitSliderDisabled {
 	opacity:0.6;
 }
-.dj_ie .dijit_a11y .dijitSliderReadOnly .dijitSliderBar,
-.dj_ie .dijit_a11y .dijitSliderDisabled .dijitSliderBar {
+.dj_ie .dj_a11y .dijitSliderReadOnly .dijitSliderBar,
+.dj_ie .dj_a11y .dijitSliderDisabled .dijitSliderBar {
 	filter: alpha(opacity=40);
 }
 
 /* + and - Slider buttons: override theme settings to display icons */
-.dijit_a11y .dijitSlider .dijitSliderButtonContainer div {
+.dj_a11y .dijitSlider .dijitSliderButtonContainer div {
 	font-family: monospace; /* otherwise hyphen is larger and more vertically centered */
 	font-size: 1em;
 	line-height: 1em;
@@ -1845,10 +1919,16 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 }
 
 /* Icon-only buttons (often in toolbars) still display the text in high-contrast mode */
-.dijit_a11y .dijitButtonContents .dijitButtonText,
-.dijit_a11y .dijitTab .tabLabel {
+.dj_a11y .dijitButtonContents .dijitButtonText,
+.dj_a11y .dijitTab .tabLabel {
 	display: inline !important;
 }
+.dj_a11y .dijitSelect .dijitButtonText {
+	display: inline-block !important;
+}
+.dijitSelectError .dijitButtonContents .dijitButtonText {
+	display: none !important;
+}
 
 /* TextArea, SimpleTextArea */
 .dijitTextArea {
@@ -1932,10 +2012,16 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	color:white;
 	cursor:pointer;
 }
-.dijit_a11y .dijitTimePickerItemSelected .dijitTimePickerItemInner {
+
+.dijitTimePickerItemDisabled {
+	color:gray;
+	text-decoration:line-through;
+}
+
+.dj_a11y .dijitTimePickerItemSelected .dijitTimePickerItemInner {
 	border: solid 4px black;
 }
-.dijit_a11y .dijitTimePickerItemHover .dijitTimePickerItemInner {
+.dj_a11y .dijitTimePickerItemHover .dijitTimePickerItemInner {
 	border: dashed 4px black;
 }
 
@@ -1944,60 +2030,72 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	/* character (instead of icon) to show that ToggleButton is checked */
 	display:none !important;
 }
-.dijit_a11y .dijitToggleButton .dijitToggleButtonIconChar {
+.dj_a11y .dijitToggleButton .dijitToggleButtonIconChar {
 	display:inline !important;
 	visibility:hidden;
 }
 .dj_ie6 .dijitToggleButtonIconChar, .dj_ie6 .tabStripButton .dijitButtonText {
 	font-family: "Arial Unicode MS";	/* otherwise the a11y character (checkmark, arrow, etc.) appears as a box */
 }
-.dijit_a11y .dijitToggleButtonChecked .dijitToggleButtonIconChar {
+.dj_a11y .dijitToggleButtonChecked .dijitToggleButtonIconChar {
 	display: inline !important; /* In high contrast mode, display the check symbol */
 	visibility:visible !important;
 }
 
 .dijitArrowButtonChar {
-        display:none !important;
+	display:none !important;
 }
-.dijit_a11y .dijitArrowButtonChar {
-        display:inline !important;
+.dj_a11y .dijitArrowButtonChar {
+	display:inline !important;
 }
 
-.dijit_a11y .dijitDropDownButton .dijitArrowButtonInner,
-.dijit_a11y .dijitComboButton .dijitArrowButtonInner {
+.dj_a11y .dijitDropDownButton .dijitArrowButtonInner,
+.dj_a11y .dijitComboButton .dijitArrowButtonInner {
 	display:none !important;
 }
 
 /* Select */
-.dijitSelect {
-	margin: 0.2em;
-	border-collapse: collapse;
+.dj_a11y .dijitSelect {
+	border-collapse: separate !important;
+	border-width: 1px;
+	border-style: solid;
 }
-.dj_ie .dijitSelect,
-.dj_ie7 .dijitSelect,
-.dj_iequirks .dijitSelect {
+.dj_ie .dijitSelect {
 	vertical-align: middle; /* Set this back for what we hack in dijit inline */
 }
+.dj_ie6 .dijitSelect .dijitValidationContainer,
 .dj_ie8 .dijitSelect .dijitButtonText {
 	vertical-align: top;
 }
+.dj_ie6 .dijitTextBox .dijitInputContainer,
+.dj_iequirks .dijitTextBox .dijitInputContainer,
+.dj_ie6 .dijitTextBox .dijitArrowButtonInner,
+.dj_ie6 .dijitSpinner .dijitSpinnerButtonInner,
+.dijitSelect .dijitSelectLabel {
+	vertical-align: baseline;
+}
+
+.dijitNumberTextBox {
+	text-align: left;
+	direction: ltr;
+}
+
+.dijitNumberTextBox .dijitInputInner {
+	text-align: inherit; /* input */
+}
+
 .dijitToolbar .dijitSelect {
 	margin: 0;
 }
 .dj_webkit .dijitToolbar .dijitSelect {
 	padding-left: 0.3em;
 }
-.dijit_a11y .dijitSelectDisabled .dijitButtonNode {
-	border-style: outset!important;
-	border-width: medium!important;
-	border-color: #999 !important;
-	color:#999 !important;
-}
 .dijitSelect .dijitButtonContents {
 	padding: 0;
-	background: transparent none;
 	white-space: nowrap;
 	text-align: left;
+	border-style: none solid none none;
+	border-width: 1px;
 }
 .dijitSelectFixedWidth .dijitButtonContents {
 	width: 100%;
@@ -2049,3 +2147,46 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	/* a region the user would be able to click on, but it's disabled */
 	cursor: default;
 }
+
+/* Drag and Drop */
+.dojoDndItem {
+    padding: 2px;  /* will be replaced by border during drag over (dojoDndItemBefore, dojoDndItemAfter) */
+
+	/* Prevent magnifying-glass text selection icon to appear on mobile webkit as it causes a touchout event */
+	-webkit-touch-callout: none;
+	-webkit-user-select: none; /* Disable selection/Copy of UIWebView */
+}
+.dojoDndHorizontal .dojoDndItem {
+    /* make contents of horizontal container be side by side, rather than vertical */
+    #display: inline;
+    display: inline-block;
+}
+
+.dojoDndItemBefore,
+.dojoDndItemAfter {
+	border: 0px solid #369;
+}
+.dojoDndItemBefore {
+    border-width: 2px 0 0 0;
+    padding: 0 2px 2px 2px;
+}
+.dojoDndItemAfter {
+    border-width: 0 0 2px 0;
+    padding: 2px 2px 0 2px;
+}
+.dojoDndHorizontal .dojoDndItemBefore {
+    border-width: 0 0 0 2px;
+    padding: 2px 2px 2px 0;
+}
+.dojoDndHorizontal .dojoDndItemAfter {
+    border-width: 0 2px 0 0;
+    padding: 2px 0 2px 2px;
+}
+
+.dojoDndItemOver {
+	cursor:pointer;
+}
+.dj_gecko .dijitArrowButtonInner INPUT,
+.dj_gecko INPUT.dijitArrowButtonInner {
+	-moz-user-focus:ignore;
+}
diff --git a/lib/dijit/themes/dijit_rtl.css b/lib/dijit/themes/dijit_rtl.css
index 9c1b69c0d..432b79ecd 100644
--- a/lib/dijit/themes/dijit_rtl.css
+++ b/lib/dijit/themes/dijit_rtl.css
@@ -15,6 +15,9 @@
 	/* workaround bug where label invisible (themeTesterQuirk.html?dir=rtl) */
 	float:left;
 }
+.dj_ie .dijitTextBoxRtl .dijitInputContainer {
+	clear: right;
+}
 
 /* TextBox, ComboBox, Spinner */
 
@@ -31,17 +34,20 @@
 	left: auto;
 }
 
-.dj_ie7 .dijitInputContainer {
-	/* to fix wrong text alignment in rtl text box in IE */
-	display: inline-block;
+.dijitSelectRtl .dijitButtonText {
+	float: right;
 }
 
 .dijitTextBoxRtl .dijitSpinnerButtonContainer,
-.dijitTextBoxRtl .dijitValidationContainer,
+.dijitValidationTextBoxRtl .dijitValidationContainer,
 .dijitTextBoxRtl .dijitArrowButtonContainer {
 	float: left;
 }
 
+div.dijitNumberTextBoxRtl {
+	text-align: right;
+}
+
 /* Calendar */
 
 .dijitCalendarRtl .dijitCalendarNextYear {
@@ -108,6 +114,23 @@
 	margin-left: 0;
 	margin-right: 1em;
 }
+.dj_ie6 .dijitTabRtl .tabLabel,
+.dj_ie6 .dijitTabContainerRight-tabs .dijitTabRtl,
+.dj_ie6 .dijitTabContainerLeft-tabs .dijitTabRtl,
+.dj_ie7 .dijitTabContainerRight-tabs .dijitTabRtl,
+.dj_ie7 .dijitTabContainerLeft-tabs .dijitTabRtl {
+	zoom: 1;
+}
+.dj_ie6 .dijitTabContainerRight-tabs .dijitTabRtl,
+.dj_ie7 .dijitTabContainerRight-tabs .dijitTabRtl {
+    left: 0;
+}
+
+.dj_ie6 .dijitTabContainerRightRtl .dijitTabContainerRight-tabs,
+.dj_ie6 .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs {
+    /* otherwise tab labels invisible */
+	width: 1%;
+}
 
 /* TimePicker */
 .dj_ie .dijitTimePickerRtl .dijitTimePickerItem {
@@ -124,5 +147,19 @@
 
 /* Select */
 .dijitSelectRtl .dijitButtonContents {
+	border-style: none none none solid;
 	text-align: right;
 }
+
+/* DnD
+ * These rules should apply for containers that are dir=rtl (either set directly, or inherited)
+ * but seems the best we can do is look for .dijitRtl on an ancestor node.
+ */
+.dijitRtl .dojoDndHorizontal .dojoDndItemBefore {
+    border-width: 0 2px 0 0;
+    padding: 2px 0 2px 2px;
+}
+.dijitRtl .dojoDndHorizontal .dojoDndItemAfter {
+    border-width: 0 0 0 2px;
+    padding: 2px 2px 2px 0;
+}
diff --git a/lib/dijit/themes/nihilo/Common.css b/lib/dijit/themes/nihilo/Common.css
index 498699083..1a1c7f930 100644
--- a/lib/dijit/themes/nihilo/Common.css
+++ b/lib/dijit/themes/nihilo/Common.css
@@ -1,17 +1,9 @@
-/* DnD avatar-specific settings */
-/* For now it uses a default set of rules. Some other DnD classes can be modified as well. */
-.nihilo .dojoDndItemBefore {
-	border-top: 2px solid #369;
-}
-
-.nihilo .dojoDndItemAfter {
-	border-bottom: 2px solid #369;
-}
-
 .nihilo .dojoDndItemOver {
-	cursor:pointer;
+	background-image: url(images/treeHover.png);
 }
 
+/* DnD avatar-specific settings */
+/* For now it uses a default set of rules. Some other DnD classes can be modified as well. */
 .nihilo table.dojoDndAvatar { -moz-border-radius: 0; border: 1px solid #ccc; border-collapse: collapse; background-color: #fff; font-size: 75%; color: black;}
 .nihilo .dojoDndAvatar td	{ border: none; }
 .nihilo .dojoDndAvatar tr	{ border: none; }
diff --git a/lib/dijit/themes/nihilo/Dialog.css b/lib/dijit/themes/nihilo/Dialog.css
index 4affeb866..248260467 100644
--- a/lib/dijit/themes/nihilo/Dialog.css
+++ b/lib/dijit/themes/nihilo/Dialog.css
@@ -67,15 +67,7 @@
 }
 
 .nihilo .dijitTooltipContainer {
-	/*
-		The part with the text.
-
-		NOTE:
-			FF doesn't clip images used as CSS bgs if you specify a border
-			radius. If you use a solid color, it does. Webkit gets it right.
-			Sigh.
-		background: #ffffff url("images/popupMenuBg.gif") repeat-x bottom left;
-	*/
+	/* The part with the text. */
 	background-color: #fff;
 	border:1px solid #d3d3d3;
 	padding:0.45em;
diff --git a/lib/dijit/themes/nihilo/form/Button.css b/lib/dijit/themes/nihilo/form/Button.css
index 90e1ee2cc..83c719b25 100644
--- a/lib/dijit/themes/nihilo/form/Button.css
+++ b/lib/dijit/themes/nihilo/form/Button.css
@@ -16,14 +16,13 @@
 	background: #fff url("../images/buttonEnabled.png") repeat-x top left;
 }
 
-.nihilo .dijitSelect .dijitButtonContents {
-	border-right: none;
-}
-
 .nihilo .dijitButtonText {
 	text-align: center;
 	padding: 0 0.3em;
 }
+.nihilo .dijitInputField {
+	padding: 0; /* set padding:0 for .nihilo .dijitSelect .dijitButtonText but with a low priority rule that can be easily trumped by the user */
+}
 
 .nihilo .dijitComboBox .dijitButtonNode {
 	border-width: 0 0 0 1px;
diff --git a/lib/dijit/themes/nihilo/form/Button_rtl.css b/lib/dijit/themes/nihilo/form/Button_rtl.css
index 60d4c4da4..07886d058 100644
--- a/lib/dijit/themes/nihilo/form/Button_rtl.css
+++ b/lib/dijit/themes/nihilo/form/Button_rtl.css
@@ -1,8 +1,4 @@
-.dijitRtl .nihilo .dijitComboBox .dijitButtonNode {
+.nihilo .dijitComboBoxRtl .dijitButtonNode {
 	border-width: 0 0 0 1px;
 }
-.dijitRtl .nihilo .dijitSelect .dijitButtonContents {
-	border-left: none;
-	border-right-width: 1px;
-}
 
diff --git a/lib/dijit/themes/nihilo/form/Common.css b/lib/dijit/themes/nihilo/form/Common.css
index b67195f4b..31bf95ee3 100644
--- a/lib/dijit/themes/nihilo/form/Common.css
+++ b/lib/dijit/themes/nihilo/form/Common.css
@@ -10,11 +10,12 @@
 		dijit.form.ComboBox (partial)
  ****/
 
-.nihilo .dijitInputContainer input,
-.nihilo .dijitTextBox {
+.nihilo .dijitInputContainer input {
 	margin: 0 0.1em;
 }
 
+.nihilo .dijitSelect .dijitButtonContents,
+.nihilo .dijitSelect,
 .nihilo .dijitTextBox,
 .nihilo .dijitTextArea {
 	/* 	For all except dijit.form.NumberSpinner:  the actual input element.
@@ -23,26 +24,34 @@
 	*/
 	background:#fff url("../images/validationInputBg.png") repeat-x top left;
 	#background:#fff url('../images/validationInputBg.gif') repeat-x top left;
+}
+.nihilo .dijitSelect,
+.nihilo .dijitTextBox,
+.nihilo .dijitTextArea {
 	border:1px solid #d3d3d3;
 }
 
+.nihilo .dijitSelect .dijitArrowButton,
 .nihilo .dijitComboBox .dijitButtonNode {
-	padding: 0 0.2em !important;
+	padding: 0 0.2em;
 }
+.nihilo .dijitSelect .dijitButtonContents,
 .nihilo .dijitTextBox .dijitButtonNode {
 	/* line between the input area and the drop down button */
 	border-color: #d3d3d3;
 }
 
+.nihilo .dijitSelectFocused,
 .nihilo .dijitTextBoxFocused,
 .nihilo .dijitTextAreaFocused {
 	/* input field when focused (ie: typing affects it) */
 	border-color:#b3b3b3;
 }
+.nihilo .dijitSelectFocused TD,
 .nihilo .dijitTextBoxFocused .dijitButtonNode,
 .nihilo .dijitSpinner .dijitUpArrowButtonActive,
 .nihilo .dijitSpinner .dijitDownArrowButtonActive {
-	border-left-color:#d3d3d3;
+	border-color:#d3d3d3;
 }
 .nihilo .dijitSpinnerFocused .dijitDownArrowButton,
 .nihilo .dijitSpinner .dijitUpArrowButtonActive,
@@ -62,7 +71,7 @@
 }
 
 /* Validation errors  */
-.nihilo .dijitValidationIcon {
+.nihilo .dijitValidationTextBoxError .dijitValidationIcon {
 	/* prevent height change when widget goes from valid to invalid state */
 	width: 16px;
 	background: transparent url('../images/warning.png') no-repeat center center;
diff --git a/lib/dijit/themes/nihilo/form/Select.css b/lib/dijit/themes/nihilo/form/Select.css
index 61967e550..6e6a9c442 100644
--- a/lib/dijit/themes/nihilo/form/Select.css
+++ b/lib/dijit/themes/nihilo/form/Select.css
@@ -1,45 +1,38 @@
-.nihilo .dijitSelect .dijitButtonNode {
-	padding: 0;
-}
-
-/* Make unselected "look" more like a text box and less like a button */
-.nihilo .dijitSelect .dijitButtonContents {
-	padding-top: 1px;
-    background:#fff url("../images/validationInputBg.png") repeat-x top left;
-    #background:#fff url('../images/validationInputBg.gif') repeat-x top left;
-}
-.nihilo .dijitSelectHover .dijitButtonContents,
-.nihilo .dijitSelectActive .dijitButtonContents,
-.nihilo .dijitSelectOpened .dijitButtonContents,
-.nihilo .dijitSelectDisabled .dijitButtonContents,
-.nihilo .dijitSelectReadOnly .dijitButtonContents{
+.nihilo .dijitSelectError .dijitButtonContents,
+.nihilo .dijitSelectHover .dijitArrowButton,
+.nihilo .dijitSelectActive .dijitArrowButton,
+.nihilo .dijitSelectOpened .dijitArrowButton,
+.nihilo .dijitSelectDisabled .dijitArrowButton,
+.nihilo .dijitSelectReadOnly .dijitArrowButton {
 	background: transparent none;
 }
-.dj_ie .nihilo .dijitSelect .dijitButtonContents {
-	padding-top: 0;
-}
 
 .nihilo .dijitSelect .dijitArrowButton {
-	padding: 0 2px;
+	background: #bcd5f0 url("../images/buttonEnabled.png") repeat-x top left;
+	border-width: 0;
 }
 
 /* Mirror DropDownButton */
-.nihilo .dijitSelectDisabled .dijitButtonNode {
-    border-color: #dedede;
+.nihilo .dijitSelectDisabled,
+.nihilo .dijitSelectDisabled TD {
+    border-color: #dedede !important;
     background:#fafafa url("../images/buttonDisabled.png") top repeat-x;
 }
-.dj_ie .nihilo .dijitSelectDisabled  .dijitButtonNode * {
+.dj_ie .nihilo .dijitSelectDisabled  TD * {
 	filter: gray() alpha(opacity=50);
 }
 
-.nihilo .dijitSelectHover .dijitButtonNode {
+.nihilo .dijitSelectHover,
+.nihilo .dijitSelectHover TD {
     color:#000;
     background:#fcfcfc url("../images/buttonHover.png") repeat-x top left;
 }
 
-.nihilo .dijitSelectActive .dijitButtonNode,
-.nihilo .dijitSelectOpened .dijitButtonNode {
-    border-color:#dedede;
+.nihilo .dijitSelectActive,
+.nihilo .dijitSelectOpened,
+.nihilo .dijitSelectActive TD,
+.nihilo .dijitSelectOpened TD {
+    border-color:#dedede !important;
     background: #f5f5f5 url("../images/buttonActive.png") top left repeat-x;
 }
 
@@ -51,4 +44,3 @@
 .nihilo .dijitSelectMenu .dijitMenuArrowCell {
 	padding: 0.1em 0.2em;
 }
-
diff --git a/lib/dijit/themes/nihilo/form/TimeTextBox.css b/lib/dijit/themes/nihilo/form/TimeTextBox.css
index bf67b66d0..d450925b4 100644
--- a/lib/dijit/themes/nihilo/form/TimeTextBox.css
+++ b/lib/dijit/themes/nihilo/form/TimeTextBox.css
@@ -1 +1 @@
-@CHARSET "UTF-8";
\ No newline at end of file
+@CHARSET "UTF-8";
diff --git a/lib/dijit/themes/nihilo/images/dndNoCopy.png b/lib/dijit/themes/nihilo/images/dndNoCopy.png
index 9bf9c3396..998c2f269 100644
--- a/lib/dijit/themes/nihilo/images/dndNoCopy.png
+++ b/lib/dijit/themes/nihilo/images/dndNoCopy.png
diff --git a/lib/dijit/themes/nihilo/images/dndNoMove.png b/lib/dijit/themes/nihilo/images/dndNoMove.png
index cb8bd8bdd..e909173e0 100644
--- a/lib/dijit/themes/nihilo/images/dndNoMove.png
+++ b/lib/dijit/themes/nihilo/images/dndNoMove.png
diff --git a/lib/dijit/themes/nihilo/images/tabBottomActiveSpriteLR.gif b/lib/dijit/themes/nihilo/images/tabBottomActiveSpriteLR.gif
deleted file mode 100644
index 6803db442..000000000
--- a/lib/dijit/themes/nihilo/images/tabBottomActiveSpriteLR.gif
+++ /dev/null
diff --git a/lib/dijit/themes/nihilo/images/tabBottomEnabledSpriteLR.gif b/lib/dijit/themes/nihilo/images/tabBottomEnabledSpriteLR.gif
deleted file mode 100644
index b6b08ce48..000000000
--- a/lib/dijit/themes/nihilo/images/tabBottomEnabledSpriteLR.gif
+++ /dev/null
diff --git a/lib/dijit/themes/nihilo/images/tabBottomHoverSpriteLR.gif b/lib/dijit/themes/nihilo/images/tabBottomHoverSpriteLR.gif
deleted file mode 100644
index 010b08ae9..000000000
--- a/lib/dijit/themes/nihilo/images/tabBottomHoverSpriteLR.gif
+++ /dev/null
diff --git a/lib/dijit/themes/nihilo/images/tabLeftChecked.gif b/lib/dijit/themes/nihilo/images/tabLeftChecked.gif
deleted file mode 100644
index d59fd4a5b..000000000
--- a/lib/dijit/themes/nihilo/images/tabLeftChecked.gif
+++ /dev/null
diff --git a/lib/dijit/themes/nihilo/images/tabRightChecked.gif b/lib/dijit/themes/nihilo/images/tabRightChecked.gif
deleted file mode 100644
index d32f44e3c..000000000
--- a/lib/dijit/themes/nihilo/images/tabRightChecked.gif
+++ /dev/null
diff --git a/lib/dijit/themes/nihilo/images/tabStripe.gif b/lib/dijit/themes/nihilo/images/tabStripe.gif
deleted file mode 100644
index a93467520..000000000
--- a/lib/dijit/themes/nihilo/images/tabStripe.gif
+++ /dev/null
diff --git a/lib/dijit/themes/nihilo/images/tabStripeBottom.gif b/lib/dijit/themes/nihilo/images/tabStripeBottom.gif
deleted file mode 100644
index 64c3376bd..000000000
--- a/lib/dijit/themes/nihilo/images/tabStripeBottom.gif
+++ /dev/null
diff --git a/lib/dijit/themes/nihilo/images/tabStripeLeft.gif b/lib/dijit/themes/nihilo/images/tabStripeLeft.gif
deleted file mode 100644
index d607a45f7..000000000
--- a/lib/dijit/themes/nihilo/images/tabStripeLeft.gif
+++ /dev/null
diff --git a/lib/dijit/themes/nihilo/images/tabStripeRight.gif b/lib/dijit/themes/nihilo/images/tabStripeRight.gif
deleted file mode 100644
index 9778cedf7..000000000
--- a/lib/dijit/themes/nihilo/images/tabStripeRight.gif
+++ /dev/null
diff --git a/lib/dijit/themes/nihilo/layout/TabContainer.css b/lib/dijit/themes/nihilo/layout/TabContainer.css
index 21266577e..dba38c3fa 100644
--- a/lib/dijit/themes/nihilo/layout/TabContainer.css
+++ b/lib/dijit/themes/nihilo/layout/TabContainer.css
@@ -1,9 +1,5 @@
 /**
  * dijit.layout.TabContainer
- *
- * To style TabContainer with rounded corners
- * you can use these classes: .dijitTab (left), .dijitTabContent (center), dijitTabInnerDiv (right)
- * For tabs aligned to top you can style a stripe div right underneath the tabs using .dijitTabStripe
  */
 @import url("../Menu.css");
 
@@ -28,54 +24,25 @@
 	padding: 0;
 }
 
-.nihilo .dijitTabInnerDiv {
-	padding:0 3px 0 0;
-	margin: 0 0 0 4px;
-	background: url("../images/tabContainerSprite.gif") no-repeat;
-	background-position: right -400px;
-}
-
 .nihilo .dijitTab {
+    padding:3px 6px 3px 4px;
+    background: url("../images/tabContainerSprite.gif") repeat-x 0 -350px;
+    position: relative;
 	line-height:normal;
-	margin:0 2px 0 0;	/* space between one tab and the next in top/bottom mode */
-	padding:0;
-	background: url("../images/tabContainerSprite.gif") no-repeat 0 -300px;
+	margin: 0 1px;	/* space between one tab and the next in top/bottom mode */
 	color: #6d6d6d;
+    border: 1px #dedede solid;
 	border-bottom: 1px #ccc solid;
 }
 
-.nihilo .dijitTabInnerDiv .dijitTabContent {
-	padding:3px 3px 3px 4px;
-	background: url("../images/tabContainerSprite.gif") repeat-x 0 -350px;
-	position: relative;
-}
-
 /* hovered tab */
 .nihilo .dijitTabHover {
 	color: #243C5F;
-	background: url("../images/tabContainerSprite.gif") no-repeat 0 -150px;
-}
-
-.nihilo .dijitTabHover .dijitTabInnerDiv {
-	background: url("../images/tabContainerSprite.gif") no-repeat right -250px;
-}
-
-.nihilo .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
 	background: url("../images/tabContainerSprite.gif") repeat-x 0 -200px;
 }
 
-/* checked tab*/
-.nihilo .dijitTabChecked
-{
-	/* the selected tab (with or without hover) */
-	background: url("../images/tabContainerSprite.gif") no-repeat 0 -0;
-}
-
-.nihilo .dijitTabChecked .dijitTabInnerDiv {
-	background: url("../images/tabContainerSprite.gif") no-repeat right -100px;
-}
-
-.nihilo .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
+/* selected tab */
+.nihilo .dijitTabChecked {
 	background: url("../images/tabContainerSprite.gif") repeat-x 0 -50px;
 	color: #243C5F !important;
 }
@@ -95,11 +62,7 @@
 	border: none;
 	top: 0;	/* override top:1px setting of top-level tabs */
 }
-.nihilo .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv,
-.nihilo .dijitTabContainerTabListNested .dijitTab .dijitTabContent {
-	background: none;
-}
-.nihilo .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent .tabLabel {
+.nihilo .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
 	text-decoration: underline;
 }
 .nihilo .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
@@ -142,6 +105,10 @@
 	background-position: bottom;
 	padding-left: 3px;
 }
+.nihilo .dijitTabContainerTop-tabs .dijitTab {
+    border-radius: 4px 4px 0 0;
+    -moz-border-radius: 4px 4px 0 0;
+}
 
 .dj_ie6 .nihilo .dijitTabListContainer-top,
 .dj_ie7 .nihilo .dijitTabListContainer-top {
@@ -163,7 +130,7 @@
 	border-top: none;
 }
 
-/* checked tabs */
+/* selected tab */
 .nihilo .dijitTabContainerTop-tabs .dijitTabChecked {
 	border-bottom-color: #f8f8f8;
 }
@@ -187,68 +154,43 @@
 	background-position: top;
 	padding-left: 3px;
 }
-
-.dj_ie6 .nihilo .dijitTabListContainer-bottom,
-.dj_ie7 .nihilo .dijitTabListContainer-bottom {
-	z-index: 3;
-}
-
-.dj_ie6 .nihilo .dijitTabContainerBottom-tabs,
-.dj_ie7 .nihilo .dijitTabContainerBottom-tabs {
-	border-top: 1px solid #ccc;
-	margin-top: -1px;
-}
-
-/* bottom container */
-.nihilo .dijitTabContainerBottom-container {
-	border-bottom: none;
-}
-
 .nihilo .dijitTabContainerBottom-tabs .dijitTab {
-	border-bottom: none;
-	border-top: 1px solid #ccc;
-	background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom left;
-}
-
-/* checked tabs */
-.nihilo .dijitTabContainerBottom-tabs .dijitTabChecked {
-	border-top-color: #f8f8f8;
-}
-
-.nihilo .dijitTabContainerBottom-tabs .dijitTabInnerDiv .dijitTabContent {
-	padding-top: 3px;
-	padding-bottom: 3px;
-	background: url("../images/tabBottomEnabledC.gif") repeat-x bottom left;
+    border-radius: 0 0 4px 4px;
+    -moz-border-radius: 0 0 4px 4px;
+    border-bottom: none;
+    border-top: 1px solid #ccc;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    background: url("../images/tabBottomEnabledC.gif") repeat-x bottom left;
 }
 
-.nihilo .dijitTabContainerBottom-tabs .dijitTabInnerDiv {
-	background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom right;
-}
 
 .nihilo .dijitTabContainerBottom-tabs .dijitTabHover {
 	color: #243C5F;
-	background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom left;
-}
-
-.nihilo .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv {
-	background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom right;
-}
-
-.nihilo .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
 	background: url("../images/tabBottomHoverC.gif") repeat-x bottom left;
 }
 
 .nihilo .dijitTabContainerBottom-tabs .dijitTabChecked {
 	/* the selected tab (with or without hover) */
-	background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom left;
+    border-top-color: #f8f8f8;
+	background: url("../images/tabBottomActiveC.gif") repeat-x bottom left;
 }
 
-.nihilo .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
-	background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom right;
+
+.dj_ie6 .nihilo .dijitTabListContainer-bottom,
+.dj_ie7 .nihilo .dijitTabListContainer-bottom {
+	z-index: 3;
 }
 
-.nihilo .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
-	background: url("../images/tabBottomActiveC.gif") repeat-x bottom left;
+.dj_ie6 .nihilo .dijitTabContainerBottom-tabs,
+.dj_ie7 .nihilo .dijitTabContainerBottom-tabs {
+	border-top: 1px solid #ccc;
+	margin-top: -1px;
+}
+
+/* bottom container */
+.nihilo .dijitTabContainerBottom-container {
+	border-bottom: none;
 }
 
 /* strip */
@@ -264,14 +206,15 @@
 .nihilo .dijitTabContainerTop-spacer {
 	height: 2px;
 	border: 1px solid #ccc;
-	background: #f8f8f8;
 }
 
 .nihilo  .dijitTabContainerTop-spacer {
 	margin-top: -1px;
+    background: #f3f3f3;
 }
 .nihilo .dijitTabContainerBottom-spacer {
 	margin-bottom: -1px;
+    background: #f8f8f8;
 }
 
 
@@ -281,49 +224,42 @@
 	border-color: #ccc;
 	padding-top: 3px;
 }
+.nihilo .dijitTabContainerRight-tabs .dijitTab {
+    border-radius: 0 4px 4px 0;
+    -moz-border-radius: 0 4px 4px 0;
+    border-left: 1px solid #ccc;
+    border-bottom: 1px solid #dedede !important;
+}
+
 .nihilo .dijitTabContainerRight .dijitTabListWrapper {
 	padding-right: 3px;
 }
+.nihilo .dijitTabContainerRight-tabs .dijitTabChecked {
+	border-left: 1px solid #f8f8f8;
+}
+
 
 /* right container */
 .nihilo .dijitTabContainerRight-container {
 	border-right: none;
 }
 
-.nihilo .dijitTabContainerRight-tabs .dijitTab {
-	border-bottom: none;
-	border-left: 1px solid #ccc;
-	border-bottom: 1px solid #dedede !important;
-}
-
-
-/* some odd ie bug when borders dissapear when setting a bottom margin, this sortof helps */
-.dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabInnerDiv {
+/* some odd ie bug when borders disappear when setting a bottom margin, this sort of helps */
+.dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTab {
 	border-bottom: solid #fff 1px;
 }
 
-/* checked tabs */
+/* selected tab */
 .nihilo .dijitTabContainerRight-tabs .dijitTabChecked {
 	border-left-color: #f8f8f8;
 }
 
-.nihilo .dijitTabContainerRight-tabs .dijitTabChecked {
-	background: url("../images/tabRightChecked.gif") no-repeat left top !important;
-}
-
-/* some odd ie bug when borders dissapear when setting a bottom margin, this sortof helps */
-.dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv,
-.dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
+/* some odd ie bug when borders disappear when setting a bottom margin, this sort of helps */
+.dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabChecked,
+.dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabCheckedHover {
 	border-bottom: solid #efefef 1px;
 }
 
-.nihilo .dijitTabContainerRight-tabs .dijitTab {
-	background: url("../images/tabContainerSprite.gif") no-repeat left -350px;
-}
-.nihilo .dijitTabContainerRight-tabs .dijitTabHover .dijitTab {
-	background: url("../images/tabContainerSprite.gif") no-repeat left -200px;
-}
-
 /* strip */
 .nihilo .dijitTabContainerRightStrip {
 	padding-right: 2px;
@@ -338,35 +274,26 @@
 	border-color: #ccc;
 	padding-top: 3px;
 }
-
-/* left conatiner */
-.nihilo .dijitTabContainerLeft-container {
-	border-left: none;
-}
-
 .nihilo .dijitTabContainerLeft-tabs .dijitTab {
-	border-right: 1px solid #ccc;
-	border-bottom: 1px solid #dedede;
+    border-radius: 4px 0 0 4px;
+    -moz-border-radius: 4px 0 0 4px;
+    border-right: 1px solid #ccc;
+    border-bottom: 1px solid #dedede;
 }
 
-/* checked tabs */
+/* selected tab */
 .nihilo .dijitTabContainerLeft-tabs .dijitTabChecked {
 	border-right: 1px solid #f8f8f8;
 }
 
-.nihilo .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
-	background: url("../images/tabContainerSprite.gif") no-repeat right -350px;
-}
-.nihilo .dijitTabContainerLeft-tabs .dijitTabHover .dijitTabInnerDiv {
-	background: url("../images/tabContainerSprite.gif") no-repeat right -200px;
-}
-.nihilo .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
-.nihilo .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
-	background: url("../images/tabLeftChecked.gif") no-repeat right top;
+/* left container */
+.nihilo .dijitTabContainerLeft-container {
+	border-left: none;
 }
 
-.dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
-.dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
+
+.dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabChecked,
+.dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabCheckedHover {
 	border-bottom: solid #efefef 1px;
 }
 
@@ -389,8 +316,7 @@
 /* left/right tabs */
 .nihilo .dijitTabContainerLeft-tabs .dijitTab,
 .nihilo .dijitTabContainerRight-tabs .dijitTab {
-	margin-right:auto;
-	margin-bottom:2px;	/* space between one tab and the next in left/right mode */
+	margin: 1px 0;	/* space between one tab and the next in left/right mode */
 }
 
 /* left/right tabstrip */
@@ -419,7 +345,7 @@
 
 /* ================================ */
 
-/* this resets the tabcontainer stripe when within a contentpane */
+/* this resets the tabcontainer strip when within a contentpane */
 .nihilo .dijitTabContainerTop-dijitContentPane .dijitTabContainerTop-tabs {
 	border-left: 0 solid #ccc;
 	border-top: 0 solid #ccc;
@@ -433,10 +359,7 @@
 /* Menu and slider control styles */
 .nihilo .dijitTabContainer .tabStripButton {
 	margin-right: 0;
-}
-
-.nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent {
-	padding: 5px 0 6px;
+	padding: 5px 3px 6px 0px;
 }
 
 .dj_ie6 .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent,
@@ -445,10 +368,6 @@
 	padding-bottom: 7px;
 }
 
-.nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent {
-	padding: 3px 0 5px;
-}
-
 .dj_ie6 .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent,
 .dj_ie7 .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent,
 .dj_opera .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent {
@@ -482,15 +401,6 @@
 }
 
 .nihilo .dijitTabContainer .tabStripButton-bottom {
-	background: transparent url(../images/tabBottomEnabledSpriteLR.gif) no-repeat scroll left bottom;
 	border-bottom: medium none;
 	border-top: 1px solid #CCCCCC;
 }
-
-.nihilo .dijitTabContainer .tabStripButton-bottom .dijitTabInnerDiv {
-	background: transparent url(../images/tabBottomEnabledSpriteLR.gif) no-repeat scroll right bottom;
-}
-
-.nihilo .dijitTabContainer .tabStripButton-bottom .dijitTabContent {
-	background: transparent;
-}
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/Common.css b/lib/dijit/themes/soria/Common.css
index d5a7c9df6..93efae7ba 100644
--- a/lib/dijit/themes/soria/Common.css
+++ b/lib/dijit/themes/soria/Common.css
@@ -1,16 +1,15 @@
-/* DnD avatar-specific settings */
-/* For now it uses a default set of rules. Some other DnD classes can be modified as well. */
-.soria .dojoDndItemBefore {
-	border-top: 2px solid #369;
+/* DnD hovered and selected node(s) */
+.soria .dojoDndItemOver {
+	background-image: url(images/treeHover.png);
 }
-
-.soria .dojoDndItemAfter {
-	border-bottom: 2px solid #369;
+.soria .dojoDndItemAnchor,
+.soria .dojoDndItemSelected {
+	background-color: #B8CBEC;
 }
 
-.soria .dojoDndItemOver {
-	cursor:pointer;
-}
+
+/* DnD avatar-specific settings */
+/* For now it uses a default set of rules. Some other DnD classes can be modified as well. */
 
 .soria table.dojoDndAvatar { -moz-border-radius: 0; border: 1px solid #ccc; border-collapse: collapse; background-color: #fff; font-size: 75%; color: black;}
 .soria .dojoDndAvatar td	{ border: none; }
diff --git a/lib/dijit/themes/soria/Dialog.css b/lib/dijit/themes/soria/Dialog.css
index 1e0503a0b..956df8d5e 100644
--- a/lib/dijit/themes/soria/Dialog.css
+++ b/lib/dijit/themes/soria/Dialog.css
@@ -67,15 +67,7 @@
 }
 
 .soria .dijitTooltipContainer {
-	/*
-		The part with the text.
-
-		NOTE:
-			FF doesn't clip images used as CSS bgs if you specify a border
-			radius. If you use a solid color, it does. Webkit gets it right.
-			Sigh.
-		background: #ffffff url("images/popupMenuBg.gif") repeat-x bottom left;
-	*/
+	/* The part with the text. */
 	background-color: #fff;
 	border:1px solid #cbcbcb;
 	padding:0.45em;
diff --git a/lib/dijit/themes/soria/form/Button.css b/lib/dijit/themes/soria/form/Button.css
index 9efe7ead8..e00c48f58 100644
--- a/lib/dijit/themes/soria/form/Button.css
+++ b/lib/dijit/themes/soria/form/Button.css
@@ -14,14 +14,14 @@
 	padding: 0.1em 0.2em 0.2em 0.2em;
 	background: #bcd5f0 url("../images/buttonEnabled.png") repeat-x top left;
 }
-.soria .dijitSelect .dijitButtonContents {
-	border-right: none;
-}
 
 .soria .dijitButtonText {
 	text-align: center;
 	padding: 0 0.3em;
 }
+.soria .dijitInputField {
+	padding: 0; /* set padding:0 for .soria .dijitSelect .dijitButtonText but with a low priority rule that can be easily trumped by the user */
+}
 
 .soria .dijitArrowButton {
 	color: #111;
diff --git a/lib/dijit/themes/soria/form/Button_rtl.css b/lib/dijit/themes/soria/form/Button_rtl.css
index e2f3728f3..cf47470a9 100644
--- a/lib/dijit/themes/soria/form/Button_rtl.css
+++ b/lib/dijit/themes/soria/form/Button_rtl.css
@@ -1,7 +1,3 @@
-.dijitRtl .soria .dijitComboBox .dijitButtonNode {
+.soria .dijitComboBoxRtl .dijitButtonNode {
 	border-width: 0 0 0 1px;
 }
-.dijitRtl .soria .dijitSelect .dijitButtonContents {
-	border-left: none;
-	border-right-width: 1px;
-}
diff --git a/lib/dijit/themes/soria/form/Common.css b/lib/dijit/themes/soria/form/Common.css
index 42dfefa2e..d6ea6e275 100644
--- a/lib/dijit/themes/soria/form/Common.css
+++ b/lib/dijit/themes/soria/form/Common.css
@@ -10,11 +10,12 @@
 		dijit.form.ComboBox (partial)
  ****/
 
-.soria .dijitInputContainer input,
-.soria .dijitTextBox {
+.soria .dijitInputContainer input {
 	margin: 0 0.1em;
 }
 
+.soria .dijitSelect .dijitButtonContents,
+.soria .dijitSelect,
 .soria .dijitTextBox,
 .soria .dijitTextArea {
 	/* 	For all except dijit.form.NumberSpinner:  the actual input element.
@@ -23,26 +24,35 @@
 	*/
 	background:#fff url("../images/validationInputBg.png") repeat-x top left;
 	#background:#fff url('../images/validationInputBg.gif') repeat-x top left;
+}
+.soria .dijitSelect,
+.soria .dijitTextBox,
+.soria .dijitTextArea {
 	border:1px solid #8ba0bd;
 }
 
+.soria .dijitSelect .dijitArrowButton,
 .soria .dijitComboBox .dijitButtonNode {
 	padding: 0 0.2em;
 }
+
+.soria .dijitSelect .dijitButtonContents,
 .soria .dijitTextBox .dijitButtonNode {
 	/* line between the input area and the drop down button */
 	border-color: #8ba0bd;
 }
 
+.soria .dijitSelectFocused,
 .soria .dijitTextBoxFocused,
 .soria .dijitTextAreaFocused {
 	/* input field when focused (ie: typing affects it) */
 	border-color:#406b9b;
 }
+.soria .dijitSelectFocused TD,
 .soria .dijitTextBoxFocused .dijitButtonNode,
 .soria .dijitSpinner .dijitUpArrowButtonActive,
 .soria .dijitSpinner .dijitDownArrowButtonActive {
-	border-left-color:#8ba0bd;
+	border-color:#8ba0bd;
 }
 .soria .dijitSpinnerFocused .dijitDownArrowButton,
 .soria .dijitSpinner .dijitUpArrowButtonActive,
@@ -62,7 +72,7 @@
 }
 
 /* Validation errors  */
-.soria .dijitValidationIcon {
+.soria .dijitValidationTextBoxError .dijitValidationIcon {
 	/* prevent height change when widget goes from valid to invalid state */
 	width: 16px;
 	background: transparent url('../images/warning.png') no-repeat center center;
diff --git a/lib/dijit/themes/soria/form/Select.css b/lib/dijit/themes/soria/form/Select.css
index 18567720e..895ab7eaa 100644
--- a/lib/dijit/themes/soria/form/Select.css
+++ b/lib/dijit/themes/soria/form/Select.css
@@ -1,46 +1,40 @@
-.soria .dijitSelect .dijitButtonNode {
-	padding: 0;
-}
-
 /* Make unselected "look" more like a text box and less like a button */
-.soria .dijitSelect .dijitButtonContents {
-	padding-top: 1px;
-    background:#fff url("../images/validationInputBg.png") repeat-x top left;
-    #background:#fff url('../images/validationInputBg.gif') repeat-x top left;
-}
-.soria .dijitSelectHover .dijitButtonContents,
-.soria .dijitSelectActive .dijitButtonContents,
-.soria .dijitSelectOpened .dijitButtonContents,
-.soria .dijitSelectDisabled .dijitButtonContents,
-.soria .dijitSelectReadOnly .dijitButtonContents{
+.soria .dijitSelectError .dijitButtonContents,
+.soria .dijitSelectHover .dijitArrowButton,
+.soria .dijitSelectActive .dijitArrowButton,
+.soria .dijitSelectOpened .dijitArrowButton,
+.soria .dijitSelectDisabled .dijitArrowButton,
+.soria .dijitSelectReadOnly .dijitArrowButton {
 	background: transparent none;
 }
-.dj_ie .soria .dijitSelect .dijitButtonContents {
-	padding-top: 0;
-}
-
 .soria .dijitSelect .dijitArrowButton {
-	padding: 0 2px;
+	background: #bcd5f0 url("../images/buttonEnabled.png") repeat-x top left;
+	border-width: 0;
 }
 
 /* Mirror DropDownButton */
-.soria .dijitSelectDisabled .dijitButtonNode {
-    border-color: #b9bbdd #b9bbdd #b9bbdd #b9bbdd;
-    background:#c3d3e5 url("../images/buttonDisabled.png") top repeat-x;
+.soria .dijitSelectDisabled,
+.soria .dijitSelectDisabled TD {
+	border-color: #b9bbdd !important;
+	background:#c3d3e5 url("../images/buttonDisabled.png") top repeat-x;
 }
-.dj_ie .soria .dijitSelectDisabled  .dijitButtonNode * {
+.dj_ie .soria .dijitSelectDisabled TD * {
 	filter: gray() alpha(opacity=50);
 }
 
-.soria .dijitSelectHover .dijitButtonNode {
-    color:#000;
-    background:#acc5e2 url("../images/buttonHover.png") repeat-x top left;
+.soria .dijitSelectHover,
+.soria .dijitSelectHover TD {
+	border-color:#a5beda #5c7590 #5c7590 #a5beda !important;
+	color:#000;
+	background:#acc5e2 url("../images/buttonHover.png") repeat-x top left;
 }
 
-.soria .dijitSelectActive .dijitButtonNode,
-.soria .dijitSelectOpened .dijitButtonNode {
-    border-color:#657c9c;
-    background: #91b4e5 url("../images/buttonActive.png") top left repeat-x;
+.soria .dijitSelectActive,
+.soria .dijitSelectOpened,
+.soria .dijitSelectActive TD,
+.soria .dijitSelectOpened TD {
+	border-color:#657c9c !important;
+	background: #91b4e5 url("../images/buttonActive.png") top left repeat-x;
 }
 
 /* Make the menu look more combobox-like */
@@ -51,4 +45,3 @@
 .soria .dijitSelectMenu .dijitMenuArrowCell {
 	padding: 0.1em 0.2em;
 }
-
diff --git a/lib/dijit/themes/soria/form/TimeTextBox.css b/lib/dijit/themes/soria/form/TimeTextBox.css
index bf67b66d0..d450925b4 100644
--- a/lib/dijit/themes/soria/form/TimeTextBox.css
+++ b/lib/dijit/themes/soria/form/TimeTextBox.css
@@ -1 +1 @@
-@CHARSET "UTF-8";
\ No newline at end of file
+@CHARSET "UTF-8";
diff --git a/lib/dijit/themes/soria/images/dndNoCopy.png b/lib/dijit/themes/soria/images/dndNoCopy.png
index 9bf9c3396..998c2f269 100644
--- a/lib/dijit/themes/soria/images/dndNoCopy.png
+++ b/lib/dijit/themes/soria/images/dndNoCopy.png
diff --git a/lib/dijit/themes/soria/images/dndNoMove.png b/lib/dijit/themes/soria/images/dndNoMove.png
index cb8bd8bdd..e909173e0 100644
--- a/lib/dijit/themes/soria/images/dndNoMove.png
+++ b/lib/dijit/themes/soria/images/dndNoMove.png
diff --git a/lib/dijit/themes/soria/images/tabBottomActiveSpriteLR.gif b/lib/dijit/themes/soria/images/tabBottomActiveSpriteLR.gif
deleted file mode 100644
index 7c2ed86d2..000000000
--- a/lib/dijit/themes/soria/images/tabBottomActiveSpriteLR.gif
+++ /dev/null
diff --git a/lib/dijit/themes/soria/images/tabBottomHoverSpriteLR.gif b/lib/dijit/themes/soria/images/tabBottomHoverSpriteLR.gif
deleted file mode 100644
index 59f3edd60..000000000
--- a/lib/dijit/themes/soria/images/tabBottomHoverSpriteLR.gif
+++ /dev/null
diff --git a/lib/dijit/themes/soria/images/tabLeftChecked.gif b/lib/dijit/themes/soria/images/tabLeftChecked.gif
index 3e7475aa5..439aa6b44 100644
--- a/lib/dijit/themes/soria/images/tabLeftChecked.gif
+++ b/lib/dijit/themes/soria/images/tabLeftChecked.gif
diff --git a/lib/dijit/themes/soria/images/tabRightChecked.gif b/lib/dijit/themes/soria/images/tabRightChecked.gif
index ec4b65936..cfffd1e70 100644
--- a/lib/dijit/themes/soria/images/tabRightChecked.gif
+++ b/lib/dijit/themes/soria/images/tabRightChecked.gif
diff --git a/lib/dijit/themes/soria/images/tabStripe.gif b/lib/dijit/themes/soria/images/tabStripe.gif
deleted file mode 100644
index 51a2d40aa..000000000
--- a/lib/dijit/themes/soria/images/tabStripe.gif
+++ /dev/null
diff --git a/lib/dijit/themes/soria/images/tabStripeBottom.gif b/lib/dijit/themes/soria/images/tabStripeBottom.gif
deleted file mode 100644
index 41b1ac0f6..000000000
--- a/lib/dijit/themes/soria/images/tabStripeBottom.gif
+++ /dev/null
diff --git a/lib/dijit/themes/soria/images/tabStripeLeft.gif b/lib/dijit/themes/soria/images/tabStripeLeft.gif
deleted file mode 100644
index b2214fa41..000000000
--- a/lib/dijit/themes/soria/images/tabStripeLeft.gif
+++ /dev/null
diff --git a/lib/dijit/themes/soria/images/tabStripeRight.gif b/lib/dijit/themes/soria/images/tabStripeRight.gif
deleted file mode 100644
index bff311553..000000000
--- a/lib/dijit/themes/soria/images/tabStripeRight.gif
+++ /dev/null
diff --git a/lib/dijit/themes/soria/layout/TabContainer.css b/lib/dijit/themes/soria/layout/TabContainer.css
index b96d16955..38a1a77e1 100644
--- a/lib/dijit/themes/soria/layout/TabContainer.css
+++ b/lib/dijit/themes/soria/layout/TabContainer.css
@@ -1,9 +1,5 @@
 /**
  * dijit.layout.TabContainer
- *
- * To style TabContainer with rounded corners
- * you can use these classes: .dijitTab (left), .dijitTabContent (center), dijitTabInnerDiv (right)
- * For tabs aligned to top you can style a stripe div right underneath the tabs using .dijitTabStripe
  */
 
 /* Classes for all types of tabs (top/bottom/left/right) */
@@ -32,68 +28,39 @@
 	padding-left: 0;
 }
 
-.soria .dijitTabInnerDiv {
-	padding:0 3px 0 0;
-	margin: 0 0 0 4px;
-	background: url("../images/tabContainerSprite.gif") no-repeat;
-	background-position: right -400px;
-}
-
 .soria .dijitTab {
+    padding:4px 6px 2px 4px;
+    background: url("../images/tabContainerSprite.gif") repeat-x 0 -351px;
+    position: relative;
 	line-height:normal;
 	margin:0 2px 0 0;	/* space between one tab and the next in top/bottom mode */
-	padding:0;
-	background: url("../images/tabContainerSprite.gif") no-repeat 0 -300px;
 	color: #243C5F;
+    border: 1px #8BA0BD solid;
 	border-bottom: 1px #B1BADF solid;
 }
 
-.soria .dijitTabInnerDiv .dijitTabContent {
-	padding:4px 3px 2px 4px;
-	background: url("../images/tabContainerSprite.gif") repeat-x 0 -350px;
-	position: relative;
-}
-
-
-
-.soria .dijitTabListWrapper {
-	z-index: 10;
-}
-
 /* hovered tab */
 .soria .dijitTabHover {
 	color: #243C5F;
-	background: url("../images/tabContainerSprite.gif") no-repeat 0 -150px;
-}
-
-.soria .dijitTabHover .dijitTabInnerDiv {
-	background: url("../images/tabContainerSprite.gif") no-repeat right -250px;
+	background: url("../images/tabContainerSprite.gif") repeat-x 0 -201px;
 }
 
-.soria .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
-	background: url("../images/tabContainerSprite.gif") repeat-x 0 -200px;
-}
-
-/* checked tab*/
+/* selected tab*/
 .soria .dijitTabChecked
 {
-	/* the selected tab (with or without hover) */
-	background: url("../images/tabContainerSprite.gif") no-repeat 0 -0;
+	background: url("../images/tabContainerSprite.gif") repeat-x 0 -51px;
+	color: #243C5F !important;
 }
 
-.soria .dijitTabChecked .dijitTabInnerDiv {
-	background: url("../images/tabContainerSprite.gif") no-repeat right -100px;
-}
 
-.soria .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
-	background: url("../images/tabContainerSprite.gif") repeat-x 0 -50px;
-	color: #243C5F !important;
+.soria .dijitTabListWrapper {
+	z-index: 10;
 }
 
+
 /* Nested Tabs */
 
 .soria .dijitTabContainerTabListNested {
-	background: #F0F4FC;
 	background: #D9E9F9;
 	border: none;
 }
@@ -102,11 +69,7 @@
 	border: none;
 	top: 0;	/* override top:1px setting of top-level tabs */
 }
-.soria .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv,
-.soria .dijitTabContainerTabListNested .dijitTab .dijitTabContent {
-	background: none;
-}
-.soria .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent .tabLabel {
+.soria .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
 	text-decoration: underline;
 }
 .soria .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
@@ -146,6 +109,10 @@
 	border-color: #B1BADF;
 	padding-left: 3px;
 }
+.soria .dijitTabContainerTop-tabs .dijitTab {
+    border-radius: 4px 4px 0 0;
+    -moz-border-radius: 4px 4px 0 0;
+}
 
 .soria .dijitTabContainerTopNoStrip {
 	padding-top: 3px;
@@ -160,12 +127,12 @@
 	border-bottom: none;
 }
 
-/*non-checked tabs */
+/*unselected tabs */
 .soria .dijitTabContainerTop-tabs .dijitTab {
 	top: 1px;
 }
 
-/* checked tabs */
+/* selected tabs */
 .soria .dijitTabContainerTop-tabs .dijitTabChecked {
 	border-bottom-color: #94b4e6;
 }
@@ -202,59 +169,32 @@
 	float: left;
 }
 
-/* bottom container */
-.soria .dijitTabContainerBottom-container {
-	border-bottom: none;
-}
-
 .soria .dijitTabContainerBottom-tabs .dijitTab {
-	border-bottom: none;
-	border-top: 1px solid #B1BADF;
-	background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom left;
-}
-
-/* checked tabs */
-.soria .dijitTabContainerBottom-tabs .dijitTabChecked {
-	border-top-color:#94b4e6;
-}
-
-
-.soria .dijitTabContainerBottom-tabs .dijitTabInnerDiv .dijitTabContent {
-	padding-top: 3px;
-	padding-bottom: 3px;
-	background: url("../images/tabBottomEnabledC.gif") repeat-x bottom left;
-}
-
-.soria .dijitTabContainerBottom-tabs .dijitTabInnerDiv {
-	background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom right;
+    border-bottom: none;
+    border-top: 1px solid #B1BADF;
+    border-radius: 0 0 4px 4px;
+    -moz-border-radius: 0 0 4px 4px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    background: url("../images/tabBottomEnabledC.gif") repeat-x bottom left;
 }
 
 .soria .dijitTabContainerBottom-tabs .dijitTabHover {
-	color: #243C5F;
-	background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom left;
-}
-
-.soria .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv {
-	background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom right;
-}
-
-.soria .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
 	background: url("../images/tabBottomHoverC.gif") repeat-x bottom left;
 }
 
-.soria .dijitTabContainerBottom-tabs .dijitTabChecked {
-	/* the selected tab (with or without hover) */
-	background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom left;
+.soria .dijitTabContainerBottom-tabs .dijitTabChecked  {
+    border-top-color:#94b4e6;
+	background: url("../images/tabBottomActiveC.gif") repeat-x bottom left;
 }
 
-.soria .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
-	background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom right;
-}
 
-.soria .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
-	background: url("../images/tabBottomActiveC.gif") repeat-x bottom left;
+/* bottom container */
+.soria .dijitTabContainerBottom-container {
+	border-bottom: none;
 }
 
+
 /* strip */
 .soria .dijitTabContainerBottomStrip {
 	padding-bottom: 2px;
@@ -288,51 +228,44 @@
 	border-color: #ccc;
 	padding-top: 3px;
 }
+.soria .dijitTabContainerRight-tabs .dijitTab {
+    border-radius: 0 4px 4px 0;
+    -moz-border-radius: 0 4px 4px 0;
+    border-bottom: none;
+    border-left: 1px solid #B1BADF;
+    border-bottom: 1px solid #B1BADF !important;
+    padding:  4px 6px 2px 8px;
+}
+
+.soria .dijitTabContainerRight-tabs .dijitTabChecked {
+	border-left-color: #94b4e6;
+    background: url("../images/tabRightChecked.gif") no-repeat left top !important;
+}
+
 
 /* right container */
 .soria .dijitTabContainerRight-container {
 	border-right: none;
 }
 
-.soria .dijitTabContainerRight-tabs .dijitTab {
-	border-bottom: none;
-	border-left: 1px solid #B1BADF;
-	border-bottom: 1px solid #B1BADF !important;
-}
 
-
-/* some odd ie bug when borders dissapear when setting a bottom margin, this sortof helps */
-.dj_ie6 .soria .dijitTabContainerRight-tabs .dijitTabInnerDiv,
-.dj_ie7 .soria .dijitTabContainerRight-tabs .dijitTabInnerDiv {
+/* some odd ie bug when borders disappear when setting a bottom margin, this sort of helps */
+.dj_ie6 .soria .dijitTabContainerRight-tabs .dijitTab,
+.dj_ie7 .soria .dijitTabContainerRight-tabs .dijitTab {
 	border-bottom: solid #B1BADF 1px;
 	margin-bottom: -1px;
 }
 
-/* checked tabs */
-.soria .dijitTabContainerRight-tabs .dijitTabChecked {
-	border-left-color: #94b4e6;
-}
-
-.soria .dijitTabContainerRight-tabs .dijitTabChecked {
-	background: url("../images/tabRightChecked.gif") no-repeat left top !important;
-}
 
-/* some odd ie bug when borders dissapear when setting a bottom margin, this sortof helps */
-.dj_ie6 .soria .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv,
-.dj_ie7 .soria .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv,
-.dj_ie6 .soria .dijitTabContainerRight-tabs .dijitTabCheckedHover .dijitTabInnerDiv,
-.dj_ie7 .soria .dijitTabContainerRight-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
+/* some odd ie bug when borders disappear when setting a bottom margin, this sort of helps */
+.dj_ie6 .soria .dijitTabContainerRight-tabs .dijitTabChecked,
+.dj_ie7 .soria .dijitTabContainerRight-tabs .dijitTabChecked,
+.dj_ie6 .soria .dijitTabContainerRight-tabs .dijitTabCheckedHover,
+.dj_ie7 .soria .dijitTabContainerRight-tabs .dijitTabCheckedHover {
 	border-bottom: solid #94b4e6 1px;
 	margin-bottom: -1px;
 }
 
-.soria .dijitTabContainerRight-tabs .dijitTab {
-	background: url("../images/tabContainerSprite.gif") no-repeat left -350px;
-}
-.soria .dijitTabContainerRight-tabs .dijitTabHover .dijitTab {
-	background: url("../images/tabContainerSprite.gif") no-repeat left -200px;
-}
-
 /* strip */
 .soria .dijitTabContainerRightStrip {
 	padding-right: 2px;
@@ -348,43 +281,34 @@
 	padding-top: 3px;
 	height: 100%;
 }
-
-/* left conatiner */
-.soria .dijitTabContainerLeft-container {
-	border-left: none;
-}
-
 .soria .dijitTabContainerLeft-tabs .dijitTab {
-	border-right: 1px solid #B1BADF;
-	border-bottom: 1px solid #B1BADF;
+    border-radius: 4px 0 0 4px;
+    -moz-border-radius: 4px 0 0 4px;
+    border-right: 1px solid #B1BADF;
+    border-bottom: 1px solid #B1BADF;
 }
 
-/* checked tabs */
 .soria .dijitTabContainerLeft-tabs .dijitTabChecked {
 	border-right: 1px solid #94b4e6;
+    background: url("../images/tabLeftChecked.gif") no-repeat right top;
 }
 
-.soria .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
-	background: url("../images/tabContainerSprite.gif") no-repeat right -350px;
-}
-.soria .dijitTabContainerLeft-tabs .dijitTabHover .dijitTabInnerDiv {
-	background: url("../images/tabContainerSprite.gif") no-repeat right -200px;
-}
-.soria .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
-.soria .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
-	background: url("../images/tabLeftChecked.gif") no-repeat right top;
+/* left container */
+.soria .dijitTabContainerLeft-container {
+	border-left: none;
 }
 
-.dj_ie6 .soria .dijitTabContainerLeft-tabs .dijitTabInnerDiv,
-.dj_ie7 .soria .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
+
+.dj_ie6 .soria .dijitTabContainerLeft-tabs .dijitTab,
+.dj_ie7 .soria .dijitTabContainerLeft-tabs .dijitTab {
 	border-bottom: solid #B1BADF 1px;
 	margin-bottom: -1px;
 }
 
-.dj_ie6 .soria .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
-.dj_ie7 .soria .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
-.dj_ie6 .soria .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv,
-.dj_ie7 .soria .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
+.dj_ie6 .soria .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTab,
+.dj_ie7 .soria .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTab,
+.dj_ie6 .soria .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTab,
+.dj_ie7 .soria .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTab {
 	border-bottom: solid #94b4e6 1px;
 	margin-bottom: -1px;
 }
@@ -401,8 +325,7 @@
 /* left/right tabs */
 .soria .dijitTabContainerLeft-tabs .dijitTab,
 .soria .dijitTabContainerRight-tabs .dijitTab {
-	margin-right:auto;
-	margin-bottom:2px;	/* space between one tab and the next in left/right mode */
+    margin: 1px 0;	/* space between one tab and the next in left/right mode */
 }
 
 /* left/right tabstrip */
@@ -421,7 +344,7 @@
 }
 /* ================================ */
 
-/* this resets the tabcontainer stripe when within a contentpane */
+/* this resets the tabcontainer strip when within a contentpane */
 .soria .dijitTabContainerTop-dijitContentPane .dijitTabContainerTop-tabs {
 	border-left: 0 solid #ccc;
 	border-top: 0 solid #ccc;
@@ -441,19 +364,11 @@
 	margin-top: 1px;
 }
 
-.soria .tabStripButton .dijitTabContent{
-	padding: 6px 0 5px 0;
-}
-
 .dj_ie6 .soria .tabStripButton .dijitTabContent,
 .dj_ie7 .soria .tabStripButton .dijitTabContent {
 	padding-top: 7px;
 }
 
-.soria .tabStrip-disabled .tabStripButton .dijitTabContent {
-	padding: 5px 0 3px 0;
-}
-
 .dj_ie6 .soria .tabStrip-disabled .tabStripButton .dijitTabContent,
 .dj_ie7 .soria .tabStrip-disabled .tabStripButton .dijitTabContent {
 	padding-top: 6px;
@@ -465,14 +380,10 @@
 	border-top: 1px solid #B1BADF;
 }
 
-.soria .dijitTabContainer .tabStripButton-bottom .dijitTabInnerDiv {
+.soria .dijitTabContainer .tabStripButton-bottom .dijitTab {
 	background: transparent url(../images/tabBottomEnabledSpriteLR.gif) no-repeat scroll right bottom;
 }
 
-.soria .dijitTabContainer .tabStripButton-bottom .dijitTabContent {
-	background: transparent;
-}
-
 .soria .dijitTabStripIcon {
 	height: 14px;
 	width: 14px;
diff --git a/lib/dijit/themes/tundra/Common.css b/lib/dijit/themes/tundra/Common.css
index eb3e341f7..82a133bec 100644
--- a/lib/dijit/themes/tundra/Common.css
+++ b/lib/dijit/themes/tundra/Common.css
@@ -1,16 +1,14 @@
-/* DnD avatar-specific settings */
-/* For now it uses a default set of rules. Some other DnD classes can be modified as well. */
-.tundra .dojoDndItemBefore {
-	border-top: 2px solid #369;
+/* DnD hovered and selected node(s) */
+.tundra .dojoDndItemOver {
+	background-image: url(images/treeHover.png);
 }
-
-.tundra .dojoDndItemAfter {
-	border-bottom: 2px solid #369;
+.tundra .dojoDndItemAnchor,
+.tundra .dojoDndItemSelected {
+	background-color: #E2EBFE;
 }
 
-.tundra .dojoDndItemOver {
-	cursor:pointer;
-}
+/* DnD avatar-specific settings */
+/* For now it uses a default set of rules. Some other DnD classes can be modified as well. */
 
 .tundra table.dojoDndAvatar { -moz-border-radius: 0; border: 1px solid #ccc; border-collapse: collapse; background-color: #fff; font-size: 75%; color: black;}
 .tundra .dojoDndAvatar td	{ border: none; }
diff --git a/lib/dijit/themes/tundra/form/Button.css b/lib/dijit/themes/tundra/form/Button.css
index 2c68aef04..d274745e9 100644
--- a/lib/dijit/themes/tundra/form/Button.css
+++ b/lib/dijit/themes/tundra/form/Button.css
@@ -18,6 +18,9 @@
 	text-align: center;
 	padding: 0 0.3em;
 }
+.tundra .dijitInputField {
+	padding: 0; /* set padding:0 for .tundra .dijitSelect .dijitButtonText but with a low priority rule that can be easily trumped by the user */
+}
 
 .tundra .dijitDisabled .dijitButtonText {
 	color: #7F7F7F;
@@ -112,12 +115,11 @@
 .tundra .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner {
 	background-position: -49px center;
 }
-.dj_webkit .tundra .dijitSpinner .dijitUpArrowButton .dijitArrowButtonInner {
-	margin-top: -1px; /* image has too many blank pixels on top */
-}
 .dj_ie .tundra .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner {
 	margin-top: -2px; /* image has too many blank pixels on top */
 }
+.dj_webkit .tundra .dijitSpinner .dijitUpArrowButton .dijitArrowButtonInner,
+.dj_iequirks .tundra .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner,
 .dj_ie8 .tundra .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner {
 	margin-top: -1px; /* image has too many blank pixels on top */
 }
diff --git a/lib/dijit/themes/tundra/form/Common.css b/lib/dijit/themes/tundra/form/Common.css
index 96899e138..2122184da 100644
--- a/lib/dijit/themes/tundra/form/Common.css
+++ b/lib/dijit/themes/tundra/form/Common.css
@@ -10,8 +10,7 @@
 		dijit.form.ComboBox (partial)
  ****/
 
-.tundra .dijitInputContainer input,
-.tundra .dijitTextBox {
+.tundra .dijitInputContainer input {
 	margin: 0 0.1em;
 }
 
@@ -19,6 +18,8 @@
 	padding: 3px;
 }
 
+.tundra .dijitSelect .dijitButtonContents,
+.tundra .dijitSelect,
 .tundra .dijitTextBox {
 	/* 	For all except dijit.form.NumberSpinner:  the actual input element.
 		For TextBox, ComboBox, Spinner: the div that contains the input.
@@ -26,13 +27,17 @@
 	*/
 	background:#fff url("../images/validationInputBg.png") repeat-x top left;
 	#background:#fff url('../images/validationInputBg.gif') repeat-x top left;
+}
+.tundra .dijitSelect,
+.tundra .dijitTextBox {
 	border:1px solid #b3b3b3;
 }
 
-/* ComboBox specific rules*/
+.tundra .dijitSelect .dijitArrowButton,
 .tundra .dijitComboBox .dijitButtonNode {
 	padding: 0 0.2em;
 }
+.tundra .dijitSelect .dijitButtonContents,
 .tundra .dijitTextBox .dijitButtonNode {
 	/* line between the input area and the drop down button, and also between
 	 * the up and down buttons of a spinner
@@ -40,10 +45,12 @@
 	border-color: #9b9b9b;
 }
 
+.tundra .dijitSelectFocused,
 .tundra .dijitTextBoxFocused {
 	/* input field when focused (ie: typing affects it) */
 	border-color:#406b9b;
 }
+.tundra .dijitSelectFocused TD,
 .tundra .dijitTextBoxFocused .dijitButtonNode {
 	border-color:#366dba;
 }
@@ -59,7 +66,7 @@
 }
 
 /* Validation errors  */
-.tundra .dijitValidationIcon {
+.tundra .dijitValidationTextBoxError .dijitValidationIcon {
 	/* prevent height change when widget goes from valid to invalid state */
 	width: 16px;
 	background: transparent url('../images/warning.png') no-repeat center center;
diff --git a/lib/dijit/themes/tundra/form/Select.css b/lib/dijit/themes/tundra/form/Select.css
index b0290167a..3e0e77e0a 100644
--- a/lib/dijit/themes/tundra/form/Select.css
+++ b/lib/dijit/themes/tundra/form/Select.css
@@ -1,47 +1,39 @@
-.tundra .dijitSelect .dijitButtonNode {
-	padding: 0;
-}
-.tundra .dijitSelect .dijitButtonNode .dijitArrowButtonInner {
-	margin: 0 4px 0 5px;
-}
-
 /* Make unselected content portion "look" more like a text box and less like a button */
-.tundra .dijitSelect .dijitButtonContents {
-	padding-top: 1px;
-	background:#fff url("../images/validationInputBg.png") repeat-x top left;
-	#background:#fff url('../images/validationInputBg.gif') repeat-x top left;
-}
-.tundra .dijitSelectHover .dijitButtonContents,
-.tundra .dijitSelectActive .dijitButtonContents,
-.tundra .dijitSelectOpened .dijitButtonContents,
-.tundra .dijitSelectDisabled .dijitButtonContents,
-.tundra .dijitSelectReadOnly .dijitButtonContents{
+.tundra .dijitSelectError .dijitButtonContents,
+.tundra .dijitSelectHover .dijitArrowButton,
+.tundra .dijitSelectActive .dijitArrowButton,
+.tundra .dijitSelectOpened .dijitArrowButton,
+.tundra .dijitSelectDisabled .dijitArrowButton,
+.tundra .dijitSelectReadOnly .dijitArrowButton {
 	background: transparent none;
 }
-.dj_ie .tundra .dijitSelect .dijitButtonContents {
-	padding-top: 0;
+.tundra .dijitSelect .dijitArrowButton {
+	background: #fff url("../images/buttonEnabled.png") repeat-x bottom left;
+	border-width: 0;
 }
 
 /* Mirror DropDownButton */
-.tundra .dijitSelectDisabled .dijitButtonNode {
-	border-color: #d5d5d5 #bdbdbd #bdbdbd #d5d5d5;
+.tundra .dijitSelectDisabled,
+.tundra .dijitSelectDisabled TD {
+	border-color: #d5d5d5 #bdbdbd #bdbdbd #d5d5d5 !important;
 	background:#e4e4e4 url("../images/buttonDisabled.png") top repeat-x;
 }
-.dj_ie .tundra .dijitSelectDisabled  .dijitButtonNode * {
+.dj_ie .tundra .dijitSelectDisabled TD * {
 	filter: gray() alpha(opacity=50);
 }
 
-.tundra .dijitSelectHover .dijitButtonNode {
-	border-color:#a5beda;
-	border-bottom-color:#5c7590;
-	border-right-color:#5c7590;
+.tundra .dijitSelectHover,
+.tundra .dijitSelectHover TD {
+	border-color:#a5beda #5c7590 #5c7590 #a5beda !important;
 	color:#243C5F;
 	background:#fcfdff url("../images/buttonHover.png") repeat-x bottom;
 }
 
-.tundra .dijitSelectActive .dijitButtonNode,
-.tundra .dijitSelectOpened .dijitButtonNode {
-	border-color:#366dba;
+.tundra .dijitSelectActive,
+.tundra .dijitSelectOpened,
+.tundra .dijitSelectActive TD,
+.tundra .dijitSelectOpened TD {
+	border-color:#366dba !important;
 	background: #ededed url("../images/buttonActive.png") bottom repeat-x;
 }
 
@@ -53,5 +45,3 @@
 .tundra .dijitSelectMenu .dijitMenuArrowCell {
 	padding: 0.1em 0.2em;
 }
-
-
diff --git a/lib/dijit/themes/tundra/images/dndNoCopy.png b/lib/dijit/themes/tundra/images/dndNoCopy.png
index 9bf9c3396..998c2f269 100644
--- a/lib/dijit/themes/tundra/images/dndNoCopy.png
+++ b/lib/dijit/themes/tundra/images/dndNoCopy.png
diff --git a/lib/dijit/themes/tundra/images/dndNoMove.png b/lib/dijit/themes/tundra/images/dndNoMove.png
index cb8bd8bdd..e909173e0 100644
--- a/lib/dijit/themes/tundra/images/dndNoMove.png
+++ b/lib/dijit/themes/tundra/images/dndNoMove.png
diff --git a/lib/dijit/themes/tundra/layout/TabContainer.css b/lib/dijit/themes/tundra/layout/TabContainer.css
index 667da4ad9..a6676c673 100644
--- a/lib/dijit/themes/tundra/layout/TabContainer.css
+++ b/lib/dijit/themes/tundra/layout/TabContainer.css
@@ -9,15 +9,11 @@
 .tundra .dijitTab {
 	line-height:normal;
 	margin-right:4px;	/* space between one tab and the next in top/bottom mode */
-	padding:0;
+    padding:2px 8px 2px 9px;
 	border:1px solid #ccc;
 	background:#e2e2e2 url("../images/tabEnabled.png") repeat-x;
 }
 
-.tundra .dijitTabInnerDiv {
-	padding:2px 8px 2px 9px;
-}
-
 .tundra .dijitTabSpacer {
 	display: none;
 }
@@ -37,7 +33,7 @@
 	bottom: 2px;
 }
 
-/* checked tab*/
+/* selected tab */
 .tundra .dijitTabChecked {
 	/* the selected tab (with or without hover) */
 	background-color:#fff;
@@ -98,12 +94,11 @@
 	border: none;
 	top: 0;		/* to override top: 1px/-1px for normal tabs */
 }
-.tundra .dijitTabContainerTabListNested .dijitTab .dijitTabContent {
-}
-.tundra .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent .tabLabel {
+
+.tundra .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
 	text-decoration: underline;
 }
-.tundra .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent .tabLabel {
+.tundra .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
 	text-decoration: underline;
 	font-weight: bold;
 	/*background:#f3f3f3;*/
@@ -149,7 +144,7 @@
 	border-top: none;
 }
 
-/* checked tabs */
+/* selected tab */
 .tundra .dijitTabContainerTop-tabs .dijitTabChecked {
 	border-bottom-color:white;
 }
@@ -192,7 +187,7 @@
 	border-bottom: none;
 }
 
-/* checked tabs */
+/* selected tab */
 .tundra .dijitTabContainerBottom-tabs .dijitTabChecked {
 	border-top-color:white;
 }
@@ -222,7 +217,7 @@
 	border-right: none;
 }
 
-/* checked tabs */
+/* selected tab */
 .tundra .dijitTabContainerRight-tabs .dijitTabChecked {
 	border-left-color:white;
 }
@@ -245,12 +240,12 @@
 	height: 100%;
 }
 
-/* left conatiner */
+/* left container */
 .tundra .dijitTabContainerLeft-container {
 	border-left: none;
 }
 
-/* checked tabs */
+/* selected tab */
 .tundra .dijitTabContainerLeft-tabs .dijitTabChecked {
 	border-right-color:white;
 }
@@ -292,29 +287,18 @@
 }
 
 .tundra .dijitTabContainerBottom .tabStripButton {
-	padding-top: 2px;
+	padding-top: 3px;
 }
 
-.tundra .tabStrip-disabled .tabStripButton .dijitTabInnerDiv {
+.tundra .tabStrip-disabled .tabStripButton {
 	padding-bottom: 3px;
 	padding-top: 1px;
 }
 
-.tundra .tabStripButton .dijitTabInnerDiv {
+.tundra .tabStripButton {
 	padding: 3px 2px 4px 2px;
 }
 
-.dj_ie6 .tundra .tabStripButton .dijitTabInnerDiv,
-.dj_ie7 .tundra .tabStripButton .dijitTabInnerDiv,
-.dj_opera .tundra .tabStripButton .dijitTabInnerDiv {
-	padding-bottom: 5px;
-}
-.dj_ie6 .tundra .tabStrip-disabled .tabStripButton .dijitTabInnerDiv,
-.dj_ie7 .tundra .tabStrip-disabled .tabStripButton .dijitTabInnerDiv,
-.dj_opera .tundra .tabStrip-disabled .tabStripButton .dijitTabInnerDiv {
-	padding-bottom: 4px;
-}
-
 .tundra .dijitTabStripIcon {
 	height: 14px;
 	width: 14px;
diff --git a/lib/dijit/themes/tundra/layout/TabContainer_rtl.css b/lib/dijit/themes/tundra/layout/TabContainer_rtl.css
index fb8e28e9b..6e5ba7580 100644
--- a/lib/dijit/themes/tundra/layout/TabContainer_rtl.css
+++ b/lib/dijit/themes/tundra/layout/TabContainer_rtl.css
@@ -1,51 +1,3 @@
 .tundra .dijitTabRtl {
-	-moz-box-orient:horizontal;
-	text-align: right;
-}
-
-.tundra .dijitTabRtl .dijitTabInnerDiv {
 	padding:2px 9px 2px 8px;
 }
-
-.tundra .tabStrip-disabled .tabStripButtonRtl .dijitTabInnerDiv {
-	/* this is not special for RTL mode, but just here to override rule above (for enabled tabstrip) */
-	padding-bottom: 3px;
-	padding-top: 1px;
-}
-
-.tundra .tabStripButtonRtl .dijitTabInnerDiv {
-	padding: 3px 2px 4px 2px;
-}
-
-.tundra .dijitTabPaneWrapper {
-	#zoom: 1;
-}
-
-.dj_ie-rtl .tundra .dijitTabContainerLeft-tabs {
-	margin-left: 1px !important;
-}
-
-.dj_ie-rtl .tundra .dijitTabContainerRight-tabs {
-	margin-right: 1px !important;
-}
-
-.tundra .dijitTabContainerLeft-tabs .dijitTabRtl,
-.tundra .dijitTabContainerRight-tabs .dijitTabRtl {
-	margin-left:0;
-}
-
-.dj_ie .tundra .dijitTabRtl .dijitTabInnerDiv {
-	/* without this the tab label and icon become invisible, as though they were set to visibility:hidden */
-	width : 0.1% !important;
-}
-
-
-
-.dj_iequirks-rtl .tundra .dijitTabContainerTopNone,
-.dj_iequirks-rtl .tundra .dijitTabContainerBottomNone {
-	/* this strange rule prevents IE6 bug in themeTesterQuirk.html?dir=rtl upon closing
-	 * "Closable" tab, where the other tabs disappear
-	 */
-	border-left: 1px solid #fff;
-	border-right: 1px solid #fff;
-}