1 files changed, 81 insertions, 49 deletions

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;
 }