12 files changed, 1336 insertions, 362 deletions

diff --git a/lib/dijit/themes/claro/layout/AccordionContainer.css b/lib/dijit/themes/claro/layout/AccordionContainer.css
index 77b8bd967..f76947959 100644
--- a/lib/dijit/themes/claro/layout/AccordionContainer.css
+++ b/lib/dijit/themes/claro/layout/AccordionContainer.css
@@ -1,65 +1,124 @@
-
+/* Accordion
+ * 
+ * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer)
+ * and the title inside of it (dijitAccordionTitle).   There are 4 basic states to style:
+ * 
+ * 1. closed pane (and default styling): 
+ * 		.dijitAccordionInnerContainer - container for each accordion child
+ * 		.dijitAccordionTitle - title for each accordion child
+ *
+ * 2. active closed pane (ie, mouse down on a title bar)
+ * 		.dijitAccordionInnerContainerActive - for background-color, border
+ * 		.dijitAccordionInnerContainerActive dijitAccordionTitle - for text color
+ * 
+ * 3. open pane (expanded child)
+ *		.dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane)
+ *			setting a margin so that there's blue trim all the way around the child
+ *
+ * 		These rules need to override the closed pane active:
+ *
+ * 		.dijitAccordionInnerContainerSelected - for background-color, border
+ * 		.dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color
+ * 
+ * 4. hovered pane, open or closed
+ * 		The selectors below affect hovering over both a closed pane (ie, hovering a title bar),
+ * 		and hovering over an open pane.   Also, treat mouse down on an open pane as a hover:
+ *
+ * 		.dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border
+ * 		.dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color
+ */
 .claro .dijitAccordionContainer {
-	border:none;
+  border: none;
 }
 .claro .dijitAccordionInnerContainer {
-	background-color: #e6e6e7;	
-	border:solid 1px #b5bcc7;
-	margin-bottom:1px;
-	-webkit-transition-property:background-color,border;
- 	-webkit-transition-duration:.3s;
-	-webkit-transition-timing-function:linear;
+  background-color: #efefef;
+  /* gray, for closed pane */
+
+  border: solid 1px #b5bcc7;
+  margin-bottom: 1px;
+  -webkit-transition-property: background-color, border;
+  -moz-transition-property: background-color, border;
+  transition-property: background-color, border;
+  -webkit-transition-duration: 0.3s;
+  -moz-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-timing-function: linear;
+  -moz-transition-timing-function: linear;
+  transition-timing-function: linear;
 }
 .claro .dijitAccordionTitle {
-	background-color: transparent;	
-	background-image: url("images/accordion.png");
-	background-position:0px 0px;
-	background-repeat:repeat-x;
-	padding: 5px 7px 2px 7px;
-	min-height:17px;
-	color:#4a4a4a;
+  background-color: transparent;
+  /* pick up color from dijitAccordionInnerContainer */
+
+  background-image: url("images/accordion.png");
+  background-position: 0 0;
+  background-repeat: repeat-x;
+  padding: 5px 7px 2px 7px;
+  min-height: 17px;
+  color: #4a4a4a;
+}
+.claro .dijitAccordionTitleHover {
+  color: #000000;
 }
 .dj_ie6 .claro .dijitAccordionTitle {
-	background-image: none;
+  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
+	 */
+
+  background-color: #ffffff;
+  border: 1px solid #769dc0;
+  margin: 0 2px 2px;
 }
 .claro .dijitAccordionContainer .dijitAccordionContainer-child {
-	background-color:#fff;
-	
-	border:1px solid #92bce1 !important;
-	margin: 0px 2px 2px;
-	padding: 9px;
+  /* this is affecting the child widget itself */
+
+  padding: 9px;
 }
+/* Active state for closed pane */
 .claro .dijitAccordionInnerContainerActive {
-	border:1px solid #769DC0;
-	background-color:#7dbefa;
-	-webkit-transition-duration:.1s;
+  border: 1px solid #769dc0;
+  background-color: #7dbefa;
+  -webkit-transition-duration: 0.1s;
+  -moz-transition-duration: 0.1s;
+  transition-duration: 0.1s;
 }
 .claro .dijitAccordionInnerContainerActive .dijitAccordionTitle {
-	background-position:0px -136px;
-	color:#000;
+  background-position: 0 -136px;
+  color: #000000;
 }
+/* Open (a.k.a. selected) pane */
 .claro .dijitAccordionInnerContainerSelected {
-	border-color:#92bce1;
-	background-color: #cde8ff;
+  border-color: #769dc0;
+  background-color: #cfe5fa;
 }
 .claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle {
-	color:#000;
-	background-position: 0 0;	
+  color: #000000;
+  background-position: 0 0;
+  /* avoid effect when clicking the title of the open pane */
+
 }
+/* Hovering open or closed pane */
 .claro .dijitAccordionInnerContainerHover dijitAccordionTitle {
-	
-	color:#000;
+  /* both open and closed */
+
+  color: #000000;
 }
-.claro .dijitAccordionInnerContainerHover,
-.claro .dijitAccordionInnerContainerSelectedActive {
-	border:1px solid #769DC0;
-	background-color:#9dcfff;
-	-webkit-transition-duration:.2s;
+.claro .dijitAccordionInnerContainerHover, .claro .dijitAccordionInnerContainerSelectedActive {
+  /* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */
+
+  border: 1px solid #769dc0;
+  background-color: #abd6ff;
+  -webkit-transition-duration: 0.2s;
+  -moz-transition-duration: 0.2s;
+  transition-duration: 0.2s;
 }
-.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionContainer-child,
-.claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionContainer-child {
-	background-color:#ffffff;
-	border:1px solid #769DC0 !important;
-	-webkit-box-shadow:inset 0px 0px 3px rgba(0, 0, 0, .25);
-	-moz-box-shadow:inset 0px 0px 3px rgba(0, 0, 0, .25);
+.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, .claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper {
+  background-color: #ffffff;
+  border: 1px solid #769dc0 !important;
+  -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
new file mode 100644
index 000000000..01f4427f4
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/AccordionContainer.less
@@ -0,0 +1,116 @@
+/* Accordion
+ * 
+ * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer)
+ * and the title inside of it (dijitAccordionTitle).   There are 4 basic states to style:
+ * 
+ * 1. closed pane (and default styling): 
+ * 		.dijitAccordionInnerContainer - container for each accordion child
+ * 		.dijitAccordionTitle - title for each accordion child
+ *
+ * 2. active closed pane (ie, mouse down on a title bar)
+ * 		.dijitAccordionInnerContainerActive - for background-color, border
+ * 		.dijitAccordionInnerContainerActive dijitAccordionTitle - for text color
+ * 
+ * 3. open pane (expanded child)
+ *		.dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane)
+ *			setting a margin so that there's blue trim all the way around the child
+ *
+ * 		These rules need to override the closed pane active:
+ *
+ * 		.dijitAccordionInnerContainerSelected - for background-color, border
+ * 		.dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color
+ * 
+ * 4. hovered pane, open or closed
+ * 		The selectors below affect hovering over both a closed pane (ie, hovering a title bar),
+ * 		and hovering over an open pane.   Also, treat mouse down on an open pane as a hover:
+ *
+ * 		.dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border
+ * 		.dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color
+ */
+
+@import "../variables";
+
+.claro .dijitAccordionContainer {
+	border:none;
+}
+.claro .dijitAccordionInnerContainer {
+	background-color: @unselected-background-color;	/* gray, for closed pane */
+	border:solid 1px @border-color;
+	margin-bottom:1px;
+	.transition-property(background-color,border);
+ 	.transition-duration(.3s);
+	.transition-timing-function(linear);
+}
+.claro .dijitAccordionTitle {
+	background-color: transparent;	/* pick up color from dijitAccordionInnerContainer */
+	background-image: url("images/accordion.png");
+	background-position:0 0;
+	background-repeat:repeat-x;
+	padding: 5px 7px 2px 7px;
+	min-height:17px;
+	color:@unselected-text-color;
+}
+.claro .dijitAccordionTitleHover {
+	color:@hovered-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
+	 */
+	background-color:@pane-background-color;
+	border:1px solid @selected-border-color;
+	margin: 0 2px 2px;
+}
+	
+.claro .dijitAccordionContainer .dijitAccordionContainer-child {
+	/* this is affecting the child widget itself */
+	padding: 9px;
+}
+
+/* Active state for closed pane */
+
+.claro .dijitAccordionInnerContainerActive {
+	border:1px solid @selected-border-color;
+	background-color:@pressed-background-color;
+	.transition-duration(.1s);
+}
+.claro .dijitAccordionInnerContainerActive .dijitAccordionTitle {
+	background-position:0 -136px;
+	color:@selected-text-color;
+}
+
+/* Open (a.k.a. selected) pane */
+
+.claro .dijitAccordionInnerContainerSelected {
+	border-color:@selected-border-color;
+	background-color: @selected-background-color;
+}
+.claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle {
+	color:@selected-text-color;
+	background-position: 0 0;	/* avoid effect when clicking the title of the open pane */
+}
+
+/* Hovering open or closed pane */
+
+.claro .dijitAccordionInnerContainerHover dijitAccordionTitle {
+	/* both open and closed */
+	color:@hovered-text-color;
+}
+
+.claro .dijitAccordionInnerContainerHover,
+.claro .dijitAccordionInnerContainerSelectedActive {
+	/* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */
+	border:1px solid @hovered-border-color;
+	background-color:@hovered-background-color;
+	.transition-duration(.2s);
+}
+
+.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper,
+.claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper {
+	background-color:@pane-background-color;
+	border:1px solid @hovered-border-color !important;
+	.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 333a45890..ede2a56c5 100644
--- a/lib/dijit/themes/claro/layout/BorderContainer.css
+++ b/lib/dijit/themes/claro/layout/BorderContainer.css
@@ -1,77 +1,109 @@
+/* BorderContainer 
 
+Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable. 
+
+Styling the BorderContainer widget consists of the following: 
+
+.dijitBorderContainer - for border and padding of the entire border container
+
+.dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer.  
+
+.dijitBorderContainer-dijitTabContainerTop,
+.dijitBorderContainer-dijitTabContainerBottom,
+.dijitBorderContainer-dijitTabContainerLeft,
+.dijitBorderContainer-dijitTabContainerRight,
+.dijitBorderContainer-dijitAccordionContainer   -for border of the border containers within TabContainer or AccordionContainer widget
+
+.dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers
+
+Splitters and gutters:  
+
+.dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter 
+.dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter
+.dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter 
+.dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter
+.dijitSplitterHHover - for background-color of a hovered horizontal splitter
+.dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter
+.dijitSplitterVHover  - for background-color of a hovered vertical splitter
+.dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter
+.dijitSplitterHActive - for background-color of an active horizontal splitter
+.dijitSplitterVActive - for background-color of an active horizontal splitter
+*/
 .claro .dijitBorderContainer {
-	border: 1px #b5bcc7 solid;
-	padding: 5px;
+  /* matches the width of the splitters between panes */
+
+  padding: 5px;
 }
-.claro .dijitSplitContainer-child,
-.claro .dijitBorderContainer-child {
-	
-	border: 1px #b5bcc7 solid;
+.claro .dijitSplitContainer-child, .claro .dijitBorderContainer-child {
+  /* By default put borders on all children of BorderContainer,
+	 *  to give illusion of borders on the splitters themselves.
+	 */
+
+  border: 1px #b5bcc7 solid;
 }
 .claro .dijitBorderContainer-dijitTabContainerTop,
 .claro .dijitBorderContainer-dijitTabContainerBottom,
 .claro .dijitBorderContainer-dijitTabContainerLeft,
 .claro .dijitBorderContainer-dijitTabContainerRight,
 .claro .dijitBorderContainer-dijitAccordionContainer {
-	
-	 border: none;
+  /* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper),
+	 * so override rule setting border on domNode
+	 */
+
+  border: none;
 }
 .claro .dijitBorderContainer-dijitBorderContainer {
-	
-	border: 1px #c0ccdf solid;
-	padding: 5px;
+  /* make nested BorderContainers look like a single big widget with lots of splitters */
+
+  border: 0;
+  padding: 0;
 }
-.claro .dijitSplitterH,
-.claro .dijitGutterH {
-	background:none;
-	border:0;
-	height:5px;
+/* Splitters and gutters */
+.claro .dijitSplitterH, .claro .dijitGutterH {
+  background: none;
+  border: 0;
+  height: 5px;
 }
 .claro .dijitSplitterH .dijitSplitterThumb {
-	background:#dde2e9 none;
-	height:1px;
-	top:2px;
-	width:19px;
+  background: #b5bcc7 none;
+  height: 1px;
+  top: 2px;
+  width: 19px;
 }
-.claro .dijitSplitterV,
-.claro .dijitGutterV {
-	background:none;
-	border:0;
-	width:5px;
-	margin: 0;
+.claro .dijitSplitterV, .claro .dijitGutterV {
+  background: none;
+  border: 0;
+  width: 5px;
+  margin: 0;
 }
 .claro .dijitSplitterV .dijitSplitterThumb {
-	background:#dde2e9 none;
-	height:19px;
-	left:2px;
-	width:1px;
-	margin: 0;
+  background: #b5bcc7 none;
+  height: 19px;
+  left: 2px;
+  width: 1px;
+  margin: 0;
 }
+/* hovered splitter */
 .claro .dijitSplitterHHover {
-	font-size: 1px;
-	background: url("images/splitterHorizontalHover.png") no-repeat center top;
+  font-size: 1px;
+  background: url("images/splitterHorizontalHover.png") no-repeat center top;
 }
 .claro .dijitSplitterHHover .dijitSplitterThumb {
-	background:#769dc0 none;
+  background: #769dc0 none;
 }
 .claro .dijitSplitterVHover {
-	font-size: 1px;
-	background: url("images/splitterVerticalHover.png") no-repeat center left;
+  font-size: 1px;
+  background: url("images/splitterVerticalHover.png") no-repeat center left;
 }
 .claro .dijitSplitterVHover .dijitSplitterThumb {
-	background:#769dc0 none;
-}
-.dj_ie6 .dijitSplitterHHover,
-.dj_ie6 .claro .dijitSplitterVHover {
-	background-color:#cfe9ff;
-	background-image:none;
+  background: #769dc0 none;
 }
-.claro .dijitSplitterHActive {
-	font-size: 1px;
-	background-color:#abd4fb;
-	border-top:blue;
+.dj_ie6 .dijitSplitterHHover, .dj_ie6 .claro .dijitSplitterVHover {
+  background-color: #cfe5fa;
+  background-image: none;
 }
-.claro .dijitSplitterVActive {
-	font-size: 1px;
-	background-color:#abd4fb;
+/* active splitter */
+.claro .dijitSplitterHActive, .claro .dijitSplitterVActive {
+  font-size: 1px;
+  background-color: #abd6ff;
 }
diff --git a/lib/dijit/themes/claro/layout/BorderContainer.less b/lib/dijit/themes/claro/layout/BorderContainer.less
new file mode 100644
index 000000000..17c4b63cb
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/BorderContainer.less
@@ -0,0 +1,128 @@
+/* BorderContainer 
+
+Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable. 
+
+Styling the BorderContainer widget consists of the following: 
+
+.dijitBorderContainer - for border and padding of the entire border container
+
+.dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer.  
+
+.dijitBorderContainer-dijitTabContainerTop,
+.dijitBorderContainer-dijitTabContainerBottom,
+.dijitBorderContainer-dijitTabContainerLeft,
+.dijitBorderContainer-dijitTabContainerRight,
+.dijitBorderContainer-dijitAccordionContainer   -for border of the border containers within TabContainer or AccordionContainer widget
+
+.dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers
+
+Splitters and gutters:  
+
+.dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter 
+.dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter
+.dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter 
+.dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter
+.dijitSplitterHHover - for background-color of a hovered horizontal splitter
+.dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter
+.dijitSplitterVHover  - for background-color of a hovered vertical splitter
+.dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter
+.dijitSplitterHActive - for background-color of an active horizontal splitter
+.dijitSplitterVActive - for background-color of an active horizontal splitter
+*/
+
+@import "../variables";
+
+.claro .dijitBorderContainer {
+	/* matches the width of the splitters between panes */
+	padding: 5px;
+}
+
+.claro .dijitSplitContainer-child,
+.claro .dijitBorderContainer-child {
+	/* By default put borders on all children of BorderContainer,
+	 *  to give illusion of borders on the splitters themselves.
+	 */
+	border: 1px @border-color solid;
+}
+
+.claro .dijitBorderContainer-dijitTabContainerTop,
+.claro .dijitBorderContainer-dijitTabContainerBottom,
+.claro .dijitBorderContainer-dijitTabContainerLeft,
+.claro .dijitBorderContainer-dijitTabContainerRight,
+.claro .dijitBorderContainer-dijitAccordionContainer {
+	/* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper),
+	 * so override rule setting border on domNode
+	 */
+	 border: none;
+
+}
+.claro .dijitBorderContainer-dijitBorderContainer {
+	/* make nested BorderContainers look like a single big widget with lots of splitters */
+	border: 0;
+	padding: 0;
+}
+
+/* Splitters and gutters */
+
+.claro .dijitSplitterH,
+.claro .dijitGutterH {
+	background:none;
+	border:0;
+	height:5px;
+}
+
+.claro .dijitSplitterH .dijitSplitterThumb {
+	background:@border-color none;
+	height:1px;
+	top:2px;
+	width:19px;
+}
+
+.claro .dijitSplitterV,
+.claro .dijitGutterV {
+	background:none;
+	border:0;
+	width:5px;
+	margin: 0;
+}
+
+.claro .dijitSplitterV .dijitSplitterThumb {
+	background:@border-color none;
+	height:19px;
+	left:2px;
+	width:1px;
+	margin: 0;
+}
+
+/* hovered splitter */
+.claro .dijitSplitterHHover {
+	font-size: 1px;
+	background: url("images/splitterHorizontalHover.png") no-repeat center top;
+}
+
+
+.claro .dijitSplitterHHover .dijitSplitterThumb {
+	background:@hovered-border-color none;
+}
+
+.claro .dijitSplitterVHover {
+	font-size: 1px;
+	background: url("images/splitterVerticalHover.png") no-repeat center left;
+}
+
+.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;
+}
diff --git a/lib/dijit/themes/claro/layout/ContentPane.css b/lib/dijit/themes/claro/layout/ContentPane.css
index f9f543cd1..a7753de1d 100644
--- a/lib/dijit/themes/claro/layout/ContentPane.css
+++ b/lib/dijit/themes/claro/layout/ContentPane.css
@@ -1,17 +1,38 @@
-
+/* ContentPane 
+ *	
+ * .dijitContentPane
+ * 	set padding for basic content pane
+ * 	
+ * Nested layouts:
+ * 
+ * .dijitTabContainerTop-dijitContentPane,
+ * .dijitTabContainerLeft-dijitContentPane,
+ * .dijitTabContainerBottom-dijitContentPane,
+ * .dijitTabContainerRight-dijitContentPane
+ * 	set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container
+ *
+ * .dijitAccordionContainer-dijitContentPane
+ * 	set background-color and padding of ContentPane nested within Accordion
+ *
+ * .dijitSplitContainer-dijitContentPane, 
+ *	set background-color and padding of ContentPane nested within a SplitContainer 
+ *
+ * .dijitBorderContainer-dijitContentPane
+ *	set background-color and padding of ContentPane nested within a BorderContainer 
+ */
 .claro .dijitContentPane {
-	padding: 8px;
-}		
+  padding: 8px;
+}
+/* nested layouts */
 .claro .dijitTabContainerTop-dijitContentPane,
 .claro .dijitTabContainerLeft-dijitContentPane,
 .claro .dijitTabContainerBottom-dijitContentPane,
 .claro .dijitTabContainerRight-dijitContentPane,
 .claro .dijitAccordionContainer-dijitContentPane {
-	background-color: #fff;
-	padding: 8px;		
+  background-color: #ffffff;
+  padding: 8px;
 }
-.claro .dijitSplitContainer-dijitContentPane,
-.claro .dijitBorderContainer-dijitContentPane {
-	background-color: #fff;		
-	padding: 8px;
+.claro .dijitSplitContainer-dijitContentPane, .claro .dijitBorderContainer-dijitContentPane {
+  background-color: #ffffff;
+  padding: 8px;
 }
diff --git a/lib/dijit/themes/claro/layout/ContentPane.less b/lib/dijit/themes/claro/layout/ContentPane.less
new file mode 100644
index 000000000..83329bdb7
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/ContentPane.less
@@ -0,0 +1,43 @@
+/* ContentPane 
+ *	
+ * .dijitContentPane
+ * 	set padding for basic content pane
+ * 	
+ * Nested layouts:
+ * 
+ * .dijitTabContainerTop-dijitContentPane,
+ * .dijitTabContainerLeft-dijitContentPane,
+ * .dijitTabContainerBottom-dijitContentPane,
+ * .dijitTabContainerRight-dijitContentPane
+ * 	set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container
+ *
+ * .dijitAccordionContainer-dijitContentPane
+ * 	set background-color and padding of ContentPane nested within Accordion
+ *
+ * .dijitSplitContainer-dijitContentPane, 
+ *	set background-color and padding of ContentPane nested within a SplitContainer 
+ *
+ * .dijitBorderContainer-dijitContentPane
+ *	set background-color and padding of ContentPane nested within a BorderContainer 
+ */
+
+@import "../variables";
+
+.claro .dijitContentPane {
+	padding: 8px;
+}		
+
+/* nested layouts */
+.claro .dijitTabContainerTop-dijitContentPane,
+.claro .dijitTabContainerLeft-dijitContentPane,
+.claro .dijitTabContainerBottom-dijitContentPane,
+.claro .dijitTabContainerRight-dijitContentPane,
+.claro .dijitAccordionContainer-dijitContentPane {
+	background-color: @pane-background-color;
+	padding: 8px;		
+}
+.claro .dijitSplitContainer-dijitContentPane,
+.claro .dijitBorderContainer-dijitContentPane {
+	background-color: @pane-background-color;		
+	padding: 8px;
+}
\ No newline at end of file
diff --git a/lib/dijit/themes/claro/layout/TabContainer.css b/lib/dijit/themes/claro/layout/TabContainer.css
index 95fe2c262..030e4b761 100644
--- a/lib/dijit/themes/claro/layout/TabContainer.css
+++ b/lib/dijit/themes/claro/layout/TabContainer.css
@@ -1,348 +1,434 @@
-
+/* TabContainer 
+ * 
+ * Styling TabContainer means styling the TabList and Its content container  (dijitTitlePane)
+ * 
+ * Tab List: (including 4 kinds of tab location)
+ * 		.dijitTabContainerTop-tabs     - tablist container at top
+ * 		.dijitTabContainerBottom-tabs  - tablist container at bottom
+ * 		.dijitTabContainerLeft-tabs    - tablist container at left
+ * 		.dijitTabContainerRight-tabs   - tablist container at right
+ * 
+ * Tab Strip Button:
+ * 		.dijitTabStripIcon - tab strip button icon
+ * 		.dijitTabStripMenuIcon - down arrow icon position
+ * 		.dijitTabStripSlideLeftIcon - left arrow icon position
+ * 		.dijitTabStripSlideRightIcon - right arrow icon position
+ * 
+ * 		.tabStripButtonDisabled - styles for disabled tab strip buttons
+ * 
+ * Tab Button:
+ * 		.dijitTabContainerTop-tabs .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 .dijitTabChecked .dijitTabInnerDiv/.dijitTabContent    
+ * 				- 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		
+ * 
+ * 		.dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs
+ * 		.dijitTabCloseButtonHover - styles when mouse hover on close action button
+ * 		.dijitTabCloseButtonActive - styles when mouse down on close action button
+ * 
+ * Tab Button: (checked status)
+ * 
+ * Tab Content Container:
+ * 		.dijitTabContainerTop-dijitContentPane
+ * 		.dijitTabContainerBottom-dijitContentPane
+ * 		.dijitTabContainerLeft-dijitContentPane
+ * 		.dijitTabContainerRight-dijitContentPane - for background and padding
+ * 
+ * Nested Tabs:
+ * 		.dijitTabContainerNested - Container for nested tabs
+ * 		.dijitTabContainerTabListNested - tab list container for nested tabs
+ */
+/*** some common features ***/
 .claro .dijitTabPaneWrapper {
-	background:#fff;
+  background: #ffffff;
 }
 .claro .dijitTabPaneWrapper,
 .claro .dijitTabContainerTop-tabs,
 .claro .dijitTabContainerBottom-tabs,
 .claro .dijitTabContainerLeft-tabs,
 .claro .dijitTabContainerRight-tabs {
-	
-	border-color: #b5bcc7;
+  /* todo: add common class name for this div */
+
+  border-color: #b5bcc7;
 }
 .claro .dijitTabCloseButton {
-	background: url("images/tabClose.png") no-repeat;
-	width: 14px;
-	height: 14px;
-	margin-left: 5px;
-	margin-right:-3px;
+  background: url("images/tabClose.png") no-repeat;
+  width: 14px;
+  height: 14px;
+  margin-left: 5px;
+  margin-right: -5px;
 }
 .claro .dijitTabCloseButtonHover {
-	background-position:-14px;
+  background-position: -14px;
 }
 .claro .dijitTabCloseButtonActive {
-	background-position:-28px;
+  background-position: -28px;
 }
 .claro .dijitTabSpacer {
-	
-	display: none;
+  /* set the spacer invisible.  note that height:0 doesn't work on IE/quirks, it's still 10px. */
+
+  display: none;
 }
 .claro .dijitTabInnerDiv {
-	background-color:#e6e6e7;
-	-webkit-transition-property:background-color, border;
- 	-webkit-transition-duration:.35s;
-	color:#4a4a4a;
+  background-color: #efefef;
+  -webkit-transition-property: background-color, border;
+  -moz-transition-property: background-color, border;
+  transition-property: background-color, border;
+  -webkit-transition-duration: 0.35s;
+  -moz-transition-duration: 0.35s;
+  transition-duration: 0.35s;
+  color: #4a4a4a;
 }
 .claro .dijitTabHover .dijitTabInnerDiv {
-	background-color:#a9d6ff;
- 	-webkit-transition-duration:.25s;
-	color:#000;
+  background-color: #abd6ff;
+  -webkit-transition-duration: 0.25s;
+  -moz-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+  color: #000000;
 }
 .claro .dijitTabActive .dijitTabInnerDiv {
-	background-color:#8bc4f9;
-	color:#000;
-	-webkit-transition-duration:.1s;
+  background-color: #7dbefa;
+  color: #000000;
+  -webkit-transition-duration: 0.1s;
+  -moz-transition-duration: 0.1s;
+  transition-duration: 0.1s;
 }
 .claro .dijitTabChecked .dijitTabInnerDiv {
-	background-color:#b2d4f3;
-	color:#000;
+  background-color: #cfe5fa;
+  color: #000000;
 }
 .claro .dijitTabContent {
-	border: 1px solid #b5bcc7;
+  border: 1px solid #b5bcc7;
+}
+.claro .dijitTabHover .dijitTabContent {
+  border-color: #769dc0;
 }
-.claro .dijitTabHover .dijitTabContent,
 .claro .dijitTabActive .dijitTabContent {
-	border-color: #769dc0;
+  border-color: #769dc0;
 }
 .claro .dijitTabChecked .dijitTabContent {
-	color:#000;
-	border-color: #b5bcc7;	
+  color: #000000;
+  border-color: #b5bcc7;
 }
 .claro .tabStripButton .dijitTabInnerDiv {
-	background-color: transparent;
+  background-color: transparent;
 }
 .claro .tabStripButton .dijitTabContent {
-	border: none;
+  border: none;
 }
+/*** end common ***/
+/*************** top tab ***************/
 .claro .dijitTabContainerTop-tabs .dijitTab {
-	top: 1px;	
-	margin-right: 1px;
-	padding-top: 3px;
+  top: 1px;
+  /* used for overlap */
+
+  margin-right: 1px;
+  padding-top: 3px;
 }
 .dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTab {
-	top: 3px;
+  top: 3px;
 }
+/* for top tab padding. change height when status changes */
 .claro .dijitTabContainerTop-tabs .dijitTabContent {
-	padding:3px 8px 3px 4px;
-	border-bottom: 1px;
-	background-image:url("images/tabTop.png");
-	background-position:0px 0px;
-	background-repeat:repeat-x;
-	min-width: 60px;
-	text-align: center;
+  padding: 3px 6px;
+  border-bottom-width: 0;
+  background-image: url("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;
-}
-.dj_ie .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent {
-	border-bottom: none;
+  padding-bottom: 4px;
+  padding-top: 6px;
 }
+/* normal status */
 .claro .dijitTabContainerTop-tabs .dijitTabInnerDiv {
-	background-image:url("images/tabTop.png");
-	background-position:0px -248px;
-	background-position:bottom;
-	background-repeat:repeat-x;
-	box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04);
-	-webkit-box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04);
-	-moz-box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04);
-}
+  background-image: url("images/tabTop.png");
+  background-position: 0 -248px;
+  background-position: bottom;
+  background-repeat: repeat-x;
+  -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;
-	box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05);
-	-webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05);
-	-moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05);
+  background-image: none;
+  -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:0px -102px;
-	background-repeat:repeat-x;
+  background-position: 0 -102px;
+  background-repeat: repeat-x;
 }
+/** end top tab **/
+/*************** bottom tab ***************/
 .claro .dijitTabContainerBottom-tabs .dijitTab {
-	top: -1px;	
-	margin-right: 1px;
+  top: -1px;
+  /* used for overlap */
+
+  margin-right: 1px;
 }
+/* calculate the position and size */
 .claro .dijitTabContainerBottom-tabs .dijitTabContent {
-	padding:3px 8px 4px 4px;
-	border-top: none;
-	background-image: url("images/tabBottom.png");
-	background-position:0px -249px;
-	background-repeat: repeat-x;
-	background-position:bottom;
-	min-width: 60px;
-	text-align: center;
+  padding: 3px 6px;
+  border-top-width: 0;
+  background-image: url("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;
+  padding-bottom: 3px;
 }
+/* normal status */
 .claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv {
-	background-image: url("images/tabBottom.png");
-	background-position: top;
-	background-repeat: repeat-x;
-	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04);
-	-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04);
-	-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04);
-	
-}
+  background-image: url("images/tabBottom.png");
+  background-position: top;
+  background-repeat: repeat-x;
+  -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:0px -119px;
+  padding-bottom: 7px;
+  padding-top: 4px;
+  background-position: 0 -119px;
 }
 .claro .dijitTabContainerBottom-tabs .dijitTabChecked {
-	padding-bottom: 0;
+  padding-bottom: 0;
 }
 .claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
-	background-image:none;
-	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
-	-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
-	-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
+  background-image: none;
+  -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);
 }
+/** end bottom tab **/
+/*************** left tab ***************/
 .claro .dijitTabContainerLeft-tabs .dijitTab {
-	left: 1px;	
-	margin-bottom: 1px;
+  border-right-width: 0;
+  left: 1px;
+  /* used for overlap */
+
+  margin-bottom: 1px;
 }
+/* normal status */
 .claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
-	background-image: url("images/tabLeft.png");
-	background-position: -347px -340px;
-	background-repeat: repeat-y;
+  background-image: url("images/tabLeft.png");
+  background-position: -347px -340px;
+  background-repeat: repeat-y;
 }
 .claro .dijitTabContainerLeft-tabs .dijitTabContent {
-	padding:3px 8px 4px 4px;
-	background-image: url("images/tabLeft.png");
-	background-repeat: repeat-y;
-	background-position:0px 0px;
+  padding: 3px 8px 4px 4px;
+  background-image: url("images/tabLeft.png");
+  background-repeat: repeat-y;
+  background-position: 0 0;
 }
+/* checked status */
 .claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent {
-	padding-right: 9px;
-	border-right: none;
-	background-image: none;
+  padding-right: 9px;
+  border-right: none;
+  background-image: none;
 }
 .claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv {
-	background-position:0px -179px;
-	background-repeat:repeat-y;
-	box-shadow: -1px 0px 2px rgba(0, 0, 0, .05);
-	-webkit-box-shadow: -1px 0px 2px rgba(0, 0, 0, .05);
-	-moz-box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.05);
-}
+  background-position: 0 -179px;
+  background-repeat: repeat-y;
+  -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);
+}
+/** end left tab **/
+/*************** right tab ***************/
 .claro .dijitTabContainerRight-tabs .dijitTab {
-	left: -1px;	
-	margin-bottom: 1px;
+  border-left-width: 0;
+  left: -1px;
+  /* used for overlap */
+
+  margin-bottom: 1px;
 }
+/* normal status */
 .claro .dijitTabContainerRight-tabs .dijitTabInnerDiv {
-	background-image: url("images/tabRight.png");
-	background-repeat: repeat-y;
-	background-position: -1px -347px;
+  background-image: url("images/tabRight.png");
+  background-repeat: repeat-y;
+  background-position: -1px -347px;
 }
 .claro .dijitTabContainerRight-tabs .dijitTabContent {
-	padding:3px 8px 4px 4px;
-	background-image: url("images/tabRight.png");
-	background-position:right top;
-	background-repeat: repeat-y;
+  padding: 3px 8px 4px 4px;
+  background-image: url("images/tabRight.png");
+  background-position: right top;
+  background-repeat: repeat-y;
 }
+/* checked status */
 .claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent {
-	padding-left: 5px;
-	border-left: none;
-	background-image: none;
+  padding-left: 5px;
+  border-left: none;
+  background-image: none;
 }
 .claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv {
-	background-position:-348px -179px;
-	box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07);
-	-webkit-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07);
-	-moz-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07);
-}
-.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv,
-.claro .dijitTabContainerTop-tabs .dijitTabContent {
-	border-radius: 2px 2px 0px 0px;
-	-moz-border-radius: 2px 2px 0px 0px;
-	-webkit-border-top-left-radius:2px;
-	-webkit-border-top-right-radius:2px;
-}
-.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv,
-.claro .dijitTabContainerBottom-tabs .dijitTabContent{
-	border-radius: 0px 0px 2px 2px;
-	-moz-border-radius: 0px 0px 2px 2px;
-	-webkit-border-bottom-right-radius:2px;
-	-webkit-border-bottom-left-radius:2px;
-}
-.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv,
-.claro .dijitTabContainerLeft-tabs .dijitTabContent{
-	border-radius: 2px 0px 0px 2px;
-	-moz-border-radius: 2px 0px 0px 2px;
-	-webkit-border-top-left-radius:2px;
-	-webkit-border-bottom-left-radius:2px;
-}
-.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv,
-.claro .dijitTabContainerRight-tabs .dijitTabContent{
-	border-radius: 0px 2px 2px 0px;
-	-moz-border-radius: 0px 2px 2px 0px;
-	-webkit-border-top-right-radius:2px;
-	-webkit-border-bottom-right-radius:2px;
-}
+  background-position: -348px -179px;
+  -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 {
+  -moz-border-radius: 2px 2px 0 0;
+  border-radius: 2px 2px 0 0;
+}
+.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, .claro .dijitTabContainerBottom-tabs .dijitTabContent {
+  -moz-border-radius: 0 0 2px 2px;
+  border-radius: 0 0 2px 2px;
+}
+.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, .claro .dijitTabContainerLeft-tabs .dijitTabContent {
+  -moz-border-radius: 2px 0 0 2px;
+  border-radius: 2px 0 0 2px;
+}
+.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, .claro .dijitTabContainerRight-tabs .dijitTabContent {
+  -moz-border-radius: 0 2px 2px 0;
+  border-radius: 0 2px 2px 0;
+}
+/************ left/right scroll buttons + menu button ************/
 .claro .tabStripButton {
-	background-color:#deecf9;
-	border: 1px solid #b5bcc7;
+  background-color: #e9f4fe;
+  border: 1px solid #b5bcc7;
 }
 .claro .dijitTabListContainer-top .tabStripButton {
-	padding: 4px 3px;
-	margin-top:7px;
-	background-image: url("images/tabTop.png");
-	background-position:0px 0px;
+  padding: 4px 3px;
+  margin-top: 7px;
+  background-image: url("images/tabTop.png");
+  background-position: 0 0;
 }
 .claro .dijitTabListContainer-bottom .tabStripButton {
-	padding:5px 3px;
-	margin-bottom:4px;
-	background-image: url("images/tabTop.png");
-	background-position:0px -248px;
-	background-position:bottom;
+  padding: 5px 3px;
+  margin-bottom: 4px;
+  background-image: url("images/tabTop.png");
+  background-position: 0 -248px;
+  background-position: bottom;
 }
 .claro .tabStripButtonHover {
-	background-color:#a6d2fb;
+  background-color: #abd6ff;
 }
 .claro .tabStripButtonActive {
-	background-color:#7dbefa;
+  background-color: #7dbefa;
 }
 .claro .dijitTabStripIcon {
-	height:15px;
-	width:15px;
-	margin: 0 auto;
-	background:url("../form/images/buttonArrows.png") no-repeat -75px 50%;
-	background-color: transparent;
+  height: 15px;
+  width: 15px;
+  margin: 0 auto;
+  background: url("../form/images/buttonArrows.png") no-repeat -75px 50%;
+  background-color: transparent;
 }
-.claro .dijitTabStripSlideRightIcon{
-	background-position: -24px 50%;
+.claro .dijitTabStripSlideRightIcon {
+  background-position: -24px 50%;
 }
 .claro .dijitTabStripMenuIcon {
-	background-position: -51px 50%;
+  background-position: -51px 50%;
 }
-.claro .dijitTabListContainer-top .tabStripButtonDisabled,
-.claro .dijitTabListContainer-bottom .tabStripButtonDisabled {
-	background-color:#dddddd;
-	border:1px solid #c9c9c9;
+/*disabled styles for tab strip buttons*/
+.claro .dijitTabListContainer-top .tabStripButtonDisabled, .claro .dijitTabListContainer-bottom .tabStripButtonDisabled {
+  background-color: #d3d3d3;
+  border: 1px solid #b5bcc7;
+  /* to match border of TabContainer itself */
+
 }
 .claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon {
-	background-position:-175px 50%;
+  background-position: -175px 50%;
 }
 .claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon {
-	background-position: -124px 50%;
+  background-position: -124px 50%;
 }
 .claro .tabStripButtonDisabled .dijitTabStripMenuIcon {
-	background-position: -151px 50%;
-} 
+  background-position: -151px 50%;
+}
+/* Nested Tabs */
 .claro .dijitTabContainerNested .dijitTabListWrapper {
-	height: auto;
+  height: auto;
 }
 .claro .dijitTabContainerNested .dijitTabContainerTop-tabs {
-	border-bottom:solid 1px #b5bcc7;
-	padding:1px 2px 4px;
-	margin-top:-2px;
+  border-bottom: solid 1px #b5bcc7;
+  padding: 1px 2px 4px;
+  margin-top: -2px;
 }
 .claro .dijitTabContainerTabListNested .dijitTabContent {
-	background:rgba(255, 255, 255, 0) none repeat scroll 0 0;
-	border: none;
-	padding: 4px;
-	border-color: rgba(118,157,192,0);
-	-webkit-transition-property:background-color, border-color;
- 	-webkit-transition-duration:.3s;
+  background: rgba(255, 255, 255, 0) none repeat scroll 0 0;
+  border: none;
+  padding: 4px;
+  border-color: rgba(118, 157, 192, 0);
+  -webkit-transition-property: background-color, border-color;
+  -moz-transition-property: background-color, border-color;
+  transition-property: background-color, border-color;
+  -webkit-transition-duration: 0.3s;
+  -moz-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
 }
 .claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv {
-	
-	background: none;
-	border: none;
-	top: 0px;
-	box-shadow: none;
-	-webkit-box-shadow: none;
-	-moz-box-shadow: none;
+  /* 4 element selector to override box-shadow setting from above rule:
+	 *		.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { ... }
+	 */
+
+  background: none;
+  border: none;
+  top: 0;
+  /* to override top: 1px/-1px for normal tabs */
+
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
 .claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent {
-	background-color:#eaf4fc;
-	border-radius: 2px 2px 2px 2px;
-	-moz-border-radius: 2px 2px 2px 2px;
-	-webkit-border-radius:2px;
-	border:solid 1px #c8dff3;
-	padding: 3px;
-	webkit-transition-duration:.2s;
+  background-color: #e9f4fe;
+  border: solid 1px #cfe5fa;
+  padding: 3px;
+  -webkit-transition-duration: 0.2s;
+  -moz-transition-duration: 0.2s;
+  transition-duration: 0.2s;
 }
 .claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
-	text-decoration: none;
+  text-decoration: none;
 }
 .claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent {
-	border-radius: 2px 2px 2px 2px;
-	-moz-border-radius: 2px 2px 2px 2px;
-	-webkit-border-radius:2px;
-	border:solid 1px #a8c7e2;
-	padding: 3px;
-	background:#b9d9f5 url("images/tabNested.png") repeat-x;
-	-webkit-transition-duration:.1s;
+  border: solid 1px #769dc0;
+  padding: 3px;
+  background: #abd6ff url("images/tabNested.png") repeat-x;
+  -webkit-transition-duration: 0.1s;
+  -moz-transition-duration: 0.1s;
+  transition-duration: 0.1s;
 }
 .claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent {
-	border-radius: 2px 2px 2px 2px;
-	-moz-border-radius: 2px 2px 2px 2px;
-	-webkit-border-radius:2px;
-	padding: 3px;
-	border:solid 1px #a8c7e2;
-	background-position: 0px 105px;
-	background-color:#d4e8f9;
+  padding: 3px;
+  border: solid 1px #769dc0;
+  background-position: 0 105px;
+  background-color: #cfe5fa;
 }
 .claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
-	text-decoration: none;
-	background-image:none;
+  text-decoration: none;
+  background-image: none;
 }
 .claro .dijitTabPaneWrapperNested {
-	border: none;
+  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;
+.dj_ie6 .dijitTabListContainer-bottom .tabStripButton {
+  background-image: none;
 }
diff --git a/lib/dijit/themes/claro/layout/TabContainer.less b/lib/dijit/themes/claro/layout/TabContainer.less
new file mode 100644
index 000000000..691900eba
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/TabContainer.less
@@ -0,0 +1,408 @@
+/* TabContainer 
+ * 
+ * Styling TabContainer means styling the TabList and Its content container  (dijitTitlePane)
+ * 
+ * Tab List: (including 4 kinds of tab location)
+ * 		.dijitTabContainerTop-tabs     - tablist container at top
+ * 		.dijitTabContainerBottom-tabs  - tablist container at bottom
+ * 		.dijitTabContainerLeft-tabs    - tablist container at left
+ * 		.dijitTabContainerRight-tabs   - tablist container at right
+ * 
+ * Tab Strip Button:
+ * 		.dijitTabStripIcon - tab strip button icon
+ * 		.dijitTabStripMenuIcon - down arrow icon position
+ * 		.dijitTabStripSlideLeftIcon - left arrow icon position
+ * 		.dijitTabStripSlideRightIcon - right arrow icon position
+ * 
+ * 		.tabStripButtonDisabled - styles for disabled tab strip buttons
+ * 
+ * Tab Button:
+ * 		.dijitTabContainerTop-tabs .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 .dijitTabChecked .dijitTabInnerDiv/.dijitTabContent    
+ * 				- 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		
+ * 
+ * 		.dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs
+ * 		.dijitTabCloseButtonHover - styles when mouse hover on close action button
+ * 		.dijitTabCloseButtonActive - styles when mouse down on close action button
+ * 
+ * Tab Button: (checked status)
+ * 
+ * Tab Content Container:
+ * 		.dijitTabContainerTop-dijitContentPane
+ * 		.dijitTabContainerBottom-dijitContentPane
+ * 		.dijitTabContainerLeft-dijitContentPane
+ * 		.dijitTabContainerRight-dijitContentPane - for background and padding
+ * 
+ * Nested Tabs:
+ * 		.dijitTabContainerNested - Container for nested tabs
+ * 		.dijitTabContainerTabListNested - tab list container for nested tabs
+ */
+
+@import "../variables";
+
+/*** some common features ***/
+.claro .dijitTabPaneWrapper {
+	background:@pane-background-color;
+}
+.claro .dijitTabPaneWrapper,
+.claro .dijitTabContainerTop-tabs,
+.claro .dijitTabContainerBottom-tabs,
+.claro .dijitTabContainerLeft-tabs,
+.claro .dijitTabContainerRight-tabs {
+	/* todo: add common class name for this div */
+	border-color: @border-color;
+}
+.claro .dijitTabCloseButton {
+	background: url("images/tabClose.png") no-repeat;
+	width: 14px;
+	height: 14px;
+	margin-left: 5px;
+	margin-right:-5px;
+}
+.claro .dijitTabCloseButtonHover {
+	background-position:-14px;
+}
+.claro .dijitTabCloseButtonActive {
+	background-position:-28px;
+}
+.claro .dijitTabSpacer {
+	/* set the spacer invisible.  note that height:0 doesn't work on IE/quirks, it's still 10px. */
+	display: none;
+}
+.claro .dijitTabInnerDiv {
+	background-color:@unselected-background-color;
+	.transition-property(background-color, border);
+ 	.transition-duration(.35s);
+	color:@unselected-text-color;
+}
+.claro .dijitTabHover .dijitTabInnerDiv {
+	background-color:@hovered-background-color;
+ 	.transition-duration(.25s);
+	color:@hovered-text-color;
+}
+.claro .dijitTabActive .dijitTabInnerDiv {
+	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?
+	border-color: @border-color;			// don't use @selected-border-color because need to match border of TabContainer
+}
+
+.claro .tabStripButton .dijitTabInnerDiv {
+	background-color: transparent;
+}
+.claro .tabStripButton .dijitTabContent {
+	border: none;
+}
+/*** end common ***/
+
+
+/*************** top tab ***************/
+.claro .dijitTabContainerTop-tabs .dijitTab {
+	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("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("images/tabTop.png");
+	background-position:0 -248px;
+	background-position:bottom;
+	background-repeat:repeat-x;
+	.box-shadow(0 -1px 1px rgba(0, 0, 0, 0.04));
+}
+
+/* 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 {
+	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("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("images/tabBottom.png");
+	background-position: top;
+	background-repeat: repeat-x;
+	.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;
+}
+.claro .dijitTabContainerBottom-tabs .dijitTabChecked {
+	padding-bottom: 0;
+}
+.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
+	background-image:none;
+	.box-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
+}
+/** end bottom tab **/
+
+/*************** left tab ***************/
+.claro .dijitTabContainerLeft-tabs .dijitTab {
+	border-right-width: 0;
+	left: 1px;	/* used for overlap */
+	margin-bottom: 1px;
+}
+/* normal status */
+.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
+	background-image: url("images/tabLeft.png");
+	background-position: -347px -340px;
+	background-repeat: repeat-y;
+}
+.claro .dijitTabContainerLeft-tabs .dijitTabContent {
+	padding:3px 8px 4px 4px;
+	background-image: url("images/tabLeft.png");
+	background-repeat: repeat-y;
+	background-position:0 0;
+}
+/* checked status */
+.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent {
+	padding-right: 9px;
+	border-right: none;
+	background-image: none;
+}
+.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv {
+	background-position:0 -179px;
+	background-repeat:repeat-y;
+	.box-shadow(-1px 0 2px rgba(0, 0, 0, .05));
+}
+/** end left tab **/
+
+/*************** right tab ***************/
+.claro .dijitTabContainerRight-tabs .dijitTab {
+	border-left-width: 0;
+	left: -1px;	/* used for overlap */
+	margin-bottom: 1px;
+}
+/* normal status */
+.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv {
+	background-image: url("images/tabRight.png");
+	background-repeat: repeat-y;
+	background-position: -1px -347px;
+}
+.claro .dijitTabContainerRight-tabs .dijitTabContent {
+	padding:3px 8px 4px 4px;
+	background-image: url("images/tabRight.png");
+	background-position:right top;
+	background-repeat: repeat-y;
+}
+/* checked status */
+.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent {
+	padding-left: 5px;
+	border-left: none;
+	background-image: none;
+}
+.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv {
+	background-position:-348px -179px;
+	.box-shadow(1px 0 2px rgba(0, 0, 0, 0.07));
+}
+/** end right tab **/
+
+/** round corner **/
+.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv,
+.claro .dijitTabContainerTop-tabs .dijitTabContent {
+	.border-radius(2px 2px 0 0);
+}
+.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv,
+.claro .dijitTabContainerBottom-tabs .dijitTabContent{
+	.border-radius(0 0 2px 2px);
+}
+.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv,
+.claro .dijitTabContainerLeft-tabs .dijitTabContent{
+	.border-radius(2px 0 0 2px);
+}
+
+.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv,
+.claro .dijitTabContainerRight-tabs .dijitTabContent{
+	.border-radius(0 2px 2px 0);
+}
+
+/************ left/right scroll buttons + menu button ************/
+.claro .tabStripButton {
+	background-color:@button-background-color;
+	border: 1px solid @border-color;
+}
+.claro .dijitTabListContainer-top .tabStripButton {
+	padding: 4px 3px;
+	margin-top:7px;
+	background-image: url("images/tabTop.png");
+	background-position:0 0;
+}
+.claro .dijitTabListContainer-bottom .tabStripButton {
+	padding:5px 3px;
+	margin-bottom:4px;
+	background-image: url("images/tabTop.png");
+	background-position:0 -248px;
+	background-position:bottom;
+}
+.claro .tabStripButtonHover {
+	background-color:@hovered-background-color;
+}
+.claro .tabStripButtonActive {
+	background-color:@pressed-background-color;
+}
+.claro .dijitTabStripIcon {
+	height:15px;
+	width:15px;
+	margin: 0 auto;
+	background:url("../form/images/buttonArrows.png") no-repeat -75px 50%;
+	background-color: transparent;
+}
+.claro .dijitTabStripSlideRightIcon{
+	background-position: -24px 50%;
+}
+.claro .dijitTabStripMenuIcon {
+	background-position: -51px 50%;
+}
+
+/*disabled styles for tab strip buttons*/
+.claro .dijitTabListContainer-top .tabStripButtonDisabled,
+.claro .dijitTabListContainer-bottom .tabStripButtonDisabled {
+	background-color:@tab-disabled-background-color;
+	border:1px solid @border-color;	/* to match border of TabContainer itself */
+}
+.claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon {
+	background-position:-175px 50%;
+}
+.claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon {
+	background-position: -124px 50%;
+}
+.claro .tabStripButtonDisabled .dijitTabStripMenuIcon {
+	background-position: -151px 50%;
+} 
+/* Nested Tabs */
+.claro .dijitTabContainerNested .dijitTabListWrapper {
+	height: auto;
+}
+.claro .dijitTabContainerNested .dijitTabContainerTop-tabs {
+	border-bottom:solid 1px @border-color;
+	padding:1px 2px 4px;
+	margin-top:-2px;
+}
+.claro .dijitTabContainerTabListNested .dijitTabContent {
+	background:rgba(255, 255, 255, 0) none repeat scroll 0 0;
+	border: none;
+	padding: 4px;
+	border-color: rgba(118,157,192,0);
+	.transition-property(background-color, border-color);
+ 	.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 { ... }
+	 */
+	background: none;
+	border: none;
+	top: 0;/* to override top: 1px/-1px for normal tabs */
+	.box-shadow(none);
+}
+.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent {
+	background-color: @nestedtab-hovered-background-color;
+	border:solid 1px @nestedtab-hovered-border-color;
+	padding: 3px;
+	.transition-duration(.2s);
+}
+.claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
+	text-decoration: none;
+}
+.claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent {
+	border:solid 1px @nestedtab-selected-border-color;
+	padding: 3px;
+	background: @nestedtab-selected-background-color url("images/tabNested.png") repeat-x;
+	.transition-duration(.1s);
+}
+.claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent {
+	padding: 3px;
+	border:solid 1px @selected-border-color;
+	background-position: 0 105px;
+	background-color:@selected-background-color;
+}
+.claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
+	text-decoration: none;
+	background-image:none;
+}
+.claro .dijitTabPaneWrapperNested {
+	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;
+}
diff --git a/lib/dijit/themes/claro/layout/TabContainer_rtl.css b/lib/dijit/themes/claro/layout/TabContainer_rtl.css
index 156cea977..89fdff097 100644
--- a/lib/dijit/themes/claro/layout/TabContainer_rtl.css
+++ b/lib/dijit/themes/claro/layout/TabContainer_rtl.css
@@ -1,67 +1,67 @@
-.claro .dijitTabContainerTop-tabs .dijitTabRtl,
-.claro .dijitTabContainerBottom-tabs .dijitTabRtl {
-	margin-right: 0;
-	margin-left: 1px;
+.claro .dijitTabContainerTop-tabs .dijitTabRtl, .claro .dijitTabContainerBottom-tabs .dijitTabRtl {
+  margin-right: 0;
+  margin-left: 1px;
 }
 .claro .dijitTabRtl {
-	-moz-box-orient:horizontal;
-	text-align: right;
+  -moz-box-orient: horizontal;
+  text-align: right;
 }
 .dj_ie7 .claro .dijitTabRtl .dijitTabContent {
-	display: block;
-	left: 0;
+  display: block;
+  left: 0;
 }
-.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl,
-.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl {
-	top: 1px;
+.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_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;
+  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 {
-	
-	zoom:1;
+  /*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 .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 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs, .dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs {
+  width: 1%;
 }
-.dj_ie6 .dijitTabContainerTopStrip,
-.dj_ie6 .dijitTabContainerBottomStrip {
-	position:absolute;
+.dj_ie6 .dijitTabContainerTopStrip, .dj_ie6 .dijitTabContainerBottomStrip {
+  position: absolute;
 }
 .dj_iequirks .claro .dijitTabContainerTopRtl .dijitTabContainerTopStrip {
-	padding-top: 10px;
+  padding-top: 10px;
 }
 .dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtlChecked .dijitTabInnerDiv {
-	background-position:-341px -179px;
+  background-position: -341px -179px;
 }
-.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon,
-.dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon {
-   position: relative;
+.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon, .dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon {
+  position: relative;
 }
-.dj_ie6-rtl .claro .dijitTabContainerTop-tabs {	
-	
-	padding-left: 3px;
+.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 {
-	
-	border-left: 1px solid #fff;
-	border-right: 1px solid #fff;
+  /* 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
new file mode 100644
index 000000000..eaada0d0a
--- /dev/null
+++ b/lib/dijit/themes/claro/layout/TabContainer_rtl.less
@@ -0,0 +1,81 @@
+@import "../variables";
+
+.claro .dijitTabContainerTop-tabs .dijitTabRtl,
+.claro .dijitTabContainerBottom-tabs .dijitTabRtl {
+	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/tabBottom.png b/lib/dijit/themes/claro/layout/images/tabBottom.png
index bf232406f..dbcfc851b 100644
--- a/lib/dijit/themes/claro/layout/images/tabBottom.png
+++ b/lib/dijit/themes/claro/layout/images/tabBottom.png
diff --git a/lib/dijit/themes/claro/layout/images/tabTop.png b/lib/dijit/themes/claro/layout/images/tabTop.png
index db7626ea8..2822487ed 100644
--- a/lib/dijit/themes/claro/layout/images/tabTop.png
+++ b/lib/dijit/themes/claro/layout/images/tabTop.png