Add styling for details.why blocks.

Author: tabatkins

default.css

@@ -39,12 +39,12 @@ h4 { margin-top: 4em; }
 
 h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 1.2em }
 
-p, div.note, div.issue {
+p, div.note, div.issue, details.why {
 	margin-top: 1em;
 	margin-bottom: 1em;
 }
 
-dd > p:first-child, li > p:first-child, .note > p:first-child, .issue > p:first-child {
+dd > p:first-child, li > p:first-child, .note > p:first-child, .issue > p:first-child, .why > summary + p {
 	margin-top: 0
 }
 
@@ -251,14 +251,27 @@ span.note, span.issue { padding: .1em .5em .15em; }
 /* Example box */
 .example {
 	border-color: #E0CB52;
-	background: #FCFAEE;
+	background: #FCFAEE;    
 }
 
-.example:before {
-	color: #B9AB2D;
+.example:before { 
+	color: #B9AB2D; 
 	font-family: sans-serif;
 }
 
+details.why {
+	border-color: #52E052;
+	background: #E9FBE9;
+}
+
+details.why > summary {
+	font-style: italic;
+}
+
+details.why[open] > summary {
+	border-bottom: 1px silver solid;
+}
+
 /* ToC not indented, but font style shows hierarchy */
 ul.toc {margin: 1em 0; padding: 0; line-height: 1.3; font-weight: bold; /*text-transform: uppercase;*/ }
 ul.toc ul {margin: 0; padding: 0; font-weight: normal; text-transform: none; }
@@ -614,7 +627,6 @@ table.features td {
  text-align: left;
 }
 
-
 .data img {
 	vertical-align: middle;
 }