1 files changed, 49 insertions, 30 deletions
diff --git a/lib/dijit/themes/claro/TitlePane.css b/lib/dijit/themes/claro/TitlePane.css
index a0191fc53..7f0cdbfb7 100644
--- a/lib/dijit/themes/claro/TitlePane.css
+++ b/lib/dijit/themes/claro/TitlePane.css
@@ -1,54 +1,73 @@
-
+/* TitlePane 
+ * 
+ * Styling TitlePane means styling the TitlePane title and its content container  (dijitTitlePane)
+ * 
+ * TitlePane title:
+ * 1. TitlePane title (default styling): 
+ * 		.dijitTitlePaneTitle - TitlePane's title div style: background-color, border
+ *
+ * 2. hovered TitlePane title (ie, mouse hover on a title bar)
+ * 		.dijitTitlePaneTitleHover - styles when mouse hover on the title div
+ * 
+ * 3. active TitlePane title (ie, mouse down on a title bar)
+ * 		.dijitTitlePaneTitleActive - styles when mouse down on the title div
+ * 
+ * 
+ * TitlePane Content Container:
+ * 1. outer/inner container: 
+ * 		.dijitTitlePaneContentOuter / dijitTitlePaneContentInner - styles for the content outer div
+ */
 .claro .dijitTitlePaneTitle {
-	background-color: #e6e6e7;
-	background-image: url("images/titlebar.png");
-	background-repeat:repeat-x;
-	border:1px solid #b5bcc7;
-	padding: 0px 7px 3px 7px;
-	min-height:17px;
-	color:#131313;
+  background-color: #efefef;
+  background-image: url("images/titlebar.png");
+  background-repeat: repeat-x;
+  border: 1px solid #b5bcc7;
+  padding: 0 7px 3px 7px;
+  min-height: 17px;
 }
 .dj_ie6 .claro .dijitTitlePaneTitle {
-	background-image: none;
+  background-image: none;
 }
 .claro .dijitTitlePaneTitleHover {
-	background-color: #abd6ff;
-	border-color: #769dc0;
+  background-color: #abd6ff;
+  border-color: #769dc0;
 }
 .claro .dijitTitlePaneTitleActive {
-	background-color: #7dbefa;
-	border-color: #769dc0;
-	background-position:0px -136px;
+  background-color: #7dbefa;
+  border-color: #769dc0;
+  background-position: 0 -136px;
 }
 .claro .dijitTitlePaneTitleFocus {
-	margin-top:3px;
-	padding-bottom:2px;
+  margin-top: 3px;
+  padding-bottom: 2px;
 }
 .claro .dijitTitlePane .dijitArrowNode {
-	background-image: url('images/spriteArrows.png');
-	background-repeat: no-repeat;
-	height: 8px;
-	width: 7px;
+  background-image: url('images/spriteArrows.png');
+  background-repeat: no-repeat;
+  height: 8px;
+  width: 7px;
 }
 .claro .dijitTitlePane .dijitOpen .dijitArrowNode {
-	background-position: 0px 0px;
+  background-position: 0 0;
 }
 .claro .dijitTitlePane .dijitClosed .dijitArrowNode {
-	background-position: -14px 0px;
+  background-position: -14px 0;
 }
 .claro .dijitTitlePaneFocused .dijitTitlePaneTextNode {
-	color:#000;
+  color: #000000;
+  /* TODO: do we need this?   we usually don't change text color on focus */
+
 }
 .claro .dijitTitlePaneContentOuter {
-	background: #ffffff;
-	border:1px solid #b5bcc7;
-	border-top:none;
+  background: #ffffff;
+  border: 1px solid #b5bcc7;
+  border-top: none;
 }
 .claro .dijitTitlePaneContentInner {
-	padding:10px;
+  padding: 10px;
 }
 .claro .dijitTitlePaneTextNode {
-	margin-left: 4px;
-	margin-right: 4px;
-	vertical-align:text-top;
+  margin-left: 4px;
+  margin-right: 4px;
+  vertical-align: text-top;
 }