Styled section introduction (with interspersed text); styled step titles; styled...

diff --git a/css/main.css b/css/main.css
index ed199f2cc57ffa5d265d77ebc625f75729464d52..c30f776908129f7cafca022e9a4905f24c820463 100644 (file)
--- a/css/main.css
+++ b/css/main.css
@@ -63,11 +63,6 @@ html {
     text-shadow: none;
 }
 
-::selection {
-    background: #b3d4fc;
-    text-shadow: none;
-}
-
 hr {
     display: block;
     height: 1px;
@@ -126,7 +121,7 @@ textarea {
 
 
 body {
-               font-family: 'Signika Light', DejaVu Sans, Arial, sans-serif;
+               font-family: 'Signika Light', 'DejaVu Sans', Arial, sans-serif;
                font-size: 1.25em;
                line-height: 1.4;
 }
@@ -138,16 +133,26 @@ h4 {  font-size: 1.375em; line-height: 1.2; font-family: 'Dosis'; text-transform
 h5 {  font-size: 1.25em;  line-height: 1.2; font-family: 'Dosis'; text-transform: uppercase; letter-spacing: 1px;      }
 h6 {  font-size: 1.125em; line-height: 1.2; font-family: 'Dosis'; text-transform: uppercase; letter-spacing: 1px;      }
 
+.nav .os a.current,
+.main .highlight p,
+.main p.highlight,
 .troubleshooting dt,
 strong {
                font-family: 'Signika Bold';
+               color: #4d4d4d;
 }
 
+.main > h3 em,
+.highlight h4,
 .troubleshooting h4,
 .newsletter input[type='submit'] {
                font-family: 'Dosis EBold';
 }
 
+.step .main p {
+               font-size: .85em;
+}
+
 .nav,
 #footer,
 .troubleshooting h4,
@@ -253,6 +258,31 @@ a {
                margin: 0 0 0.75em;
 }
 
+.section-intro {
+               padding-bottom: 1.5em;
+               border-bottom: 1px solid #5f8dd3;
+               margin-bottom: 2em:
+}
+
+.section-intro h2,
+.sidebar h2 {
+               margin: 0 0 .5em;
+}
+
+.section-intro h2 {
+               text-align: center;
+}
+
+.section-intro h2 em,
+.sidebar h2 em {
+               color: #94b3e2;
+}
+
+.step {
+               padding: .5em 0;
+}
+
+.section-intro  p,
 .intro p,
 .main p {
                margin: 0.5em 0;
@@ -262,12 +292,15 @@ a {
 
 .main h3 {
                margin: 1em 0 0.5em;
+               padding-left:.5em;
+               border-left: 8px solid #ff9b12;
 }
 
 .main h3:first-child { margin: 0 0 0.5em; }
 
 .main > h3 em {
                color: #94b3e2;
+               display: block;
 }
 
 .main,
@@ -275,19 +308,22 @@ a {
                margin: 1em 0 0.5em;
 }
 
-.sidebar h2 {
-               margin: 0 0 1em;
+.main .highlight h4 {
+               color: #5f8dd3;
+               margin: .5em 0 0;
+               border-bottom: .5em solid #5f8dd3;
 }
 
-.sidebar h2 em {
-               color: #94b3e2;
+.main .highlight h4 + p {
+               margin: 0 0 .5em;
 }
 
+
+
 /* Troubleshooting panel
 */
 
 .troubleshooting {
-/*             border-left: 8px solid #ff9b12; */
                margin-top: .8em;
 }
 
@@ -511,65 +547,3 @@ a {
 }
 
 
-/* ==========================================================================
-   Helper classes
-   ========================================================================== */
-
-.ir {
-    background-color: transparent;
-    border: 0;
-    overflow: hidden;
-    *text-indent: -9999px;
-}
-
-.ir:before {
-    content: "";
-    display: block;
-    width: 0;
-    height: 150%;
-}
-
-.hidden {
-    display: none !important;
-    visibility: hidden;
-}
-
-.visuallyhidden {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-
-.visuallyhidden.focusable:active,
-.visuallyhidden.focusable:focus {
-    clip: auto;
-    height: auto;
-    margin: 0;
-    overflow: visible;
-    position: static;
-    width: auto;
-}
-
-.invisible {
-    visibility: hidden;
-}
-
-.clearfix:before,
-.clearfix:after {
-    content: " ";
-    display: table;
-}
-
-.clearfix:after {
-    clear: both;
-}
-
-.clearfix {
-    *zoom: 1;
-}
-