Tweaked appearance of color bars for H1s to remove diagonal line

Header (and all H1s, I guess) now has the same margin in Firefox as in Chrome

Author: tjgrathwell

public/css/doc_page.css

@@ -6,10 +6,7 @@ body {
 
 h1 {
   font-size: 1.5em;
-  -webkit-margin-before: 0;
-  -webkit-margin-after: 0;
-  -webkit-margin-start: 0;
-  -webkit-margin-end: 0;
+  margin: 0;
 }
 
 .top {
@@ -130,15 +127,16 @@ h1 {
   font-size: 13pt;
   overflow-x: auto;
 }
+
 .doc code {
   font-size: 13pt;
   background: #f2f2f2;
   padding-left: 4px;
   padding-right: 4px;
 }
+
 .doc h1 {
   border-bottom: 2px solid #EEE;
-  padding-left: 12px;
 }
 
 .doc blockquote {
@@ -182,4 +180,3 @@ img {
 .bottom:after {
   clear: both;
 }
-

public/css/step.css

@@ -48,12 +48,10 @@ img.noborder {
 }
 
 .important {
-  border: 1px solid red;
   border: 5px solid maroon;
 }
 
 .tip {
-  border: 1px solid blue;
   padding: 1em;
   border: 10px solid #eee;
 }
@@ -83,49 +81,64 @@ div.back:before {
   padding-bottom: 1em;
 }
 
-.goals > h1 {
-  border-left: 20px solid #FECACD;
+table.bordered td,
+table.bordered tr {
+  border-style: solid;
+  border-width: 1px;
+  border-color: black;
+  padding-left: 5px;
+  padding-right: 5px;
 }
 
-.steps > h1 {
-  border-left: 20px solid #FBFFCA;
+.requirements > h1:before,
+.discussion > h1:before,
+.hints > h1:before,
+.tools_and_references > h1:before,
+.goals > h1:before,
+.steps > h1:before,
+.explanation > h1:before,
+.deploying > h1:before,
+.further-reading > h1:before {
+  content: "\00a0";
+  display: inline-block;
+  width: 20px;
+  margin-right: 10px;
 }
 
-.explanation > h1 {
-  border-left: 20px solid #C8FFC9;
+.goals > h1:before {
+  background-color: #FECACD;
 }
 
-.deploying > h1 {
-  border-left: 20px solid #B0DEE7;
+.steps > h1:before {
+  background-color: #FBFFCA;
 }
 
-.further-reading > h1 {
-  border-left: 20px solid #87e5f2;
+.explanation > h1:before {
+  background-color: #C8FFC9;
 }
 
-table.bordered td,
-table.bordered tr {
-  border-style: solid;
-  border-width: 1px;
-  border-color: black;
-  padding-left: 5px;
-  padding-right: 5px;
+.deploying > h1:before {
+  background-color: #B0DEE7;
 }
 
-.requirements > h1 {
-  border-left: 20px solid #93B5DA;
+.further-reading > h1:before {
+  background-color: #87e5f2;
 }
 
-.discussion > h1 {
-  border-left: 20px solid #92F59A;
+.requirements > h1:before {
+  background-color: #93B5DA;
 }
 
-.hints > h1 {
-  border-left: 20px solid #86DFD4;
+.discussion > h1:before {
+  background-color: #92F59A;
 }
 
-.tools_and_references > h1 {
-  border-left: 20px solid #C8A9E0;
+.hints > h1:before {
+  background-color: #86DFD4;
+}
+
+.tools_and_references > h1:before {
+  background-color: #C8A9E0;
 }
 
 .console > pre {
@@ -140,15 +153,18 @@ table.bordered tr {
 }
 
 .fuzzy-result {
-  margin  : 20px;
+  margin: 20px;
 }
+
 .fuzzy-result > pre {
   margin-bottom: 0px;
 }
+
 .fuzzy-result .fuzzy-hint {
   font-size: 12px;
   text-align: right;
 }
+
 .fuzzy-result .fuzzy-lightened {
   color: #aaa;
 }