1 files changed, 102 insertions, 43 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);
 }