Added first screenshot image. Started styling troubleshooting parts differently.

diff --git a/css/main.css b/css/main.css
index 865376d90325fb78003f6c307f0933ffff0c255e..48ba2bafa1e4da9b561d8e349e8d098813aa3055 100644 (file)
--- a/css/main.css
+++ b/css/main.css
@@ -132,21 +132,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;      }
 
+.troubleshooting h4,
 .troubleshooting dt,
 strong {
                font-family: 'Signika Bold';
 }
 
 .nav,
-.footer,
+#footer,
 small {
                font-size: 0.75em;
 }
 
-.troubleshooting {
+.troubleshooting dl {
                font-size: 0.85em;
 }
 
+.troubleshooting h4 {
+               font-size: .75em;
+}
+
 
 /* Colours
 */
@@ -160,15 +165,15 @@ a {
                text-decoration: none;
 }
 
-.section1,
-.section3,
-.section5,
-.faq { background: #dcdfe5;    }
+#section1,
+#section3,
+#section5,
+#faq { background: #dcdfe5;    }
 
-.section2,
-.section4,
-.section6,
-.footer {      background: #f4eed7; }
+#section2,
+#section4,
+#section6,
+#footer {      background: #f4eed7; }
 
 
 /* Layout
@@ -189,12 +194,13 @@ a {
 
 .row {
                margin: 0;
+               padding: 2em 0;
 }
 
 .row > div {
                width: 96%;
                margin: 0 auto;
-               padding: 2em 0;
+               padding: .5em 0;
 }
 
 .nav > div {
@@ -212,18 +218,18 @@ a {
                padding: .5em;
 }
 
-.header > div {
+#header > div {
                width: 96%;
                clear: both;
                margin: 0 auto;
                padding: 1em 0;
 }
 
-.header a {
+#header a {
                display: block;
 }
 
-.header h1 {
+#header h1 {
                line-height: 1;
                padding: .5em 0 0;
 }
@@ -241,6 +247,10 @@ a {
 
 .main h3:first-child { margin: 0 0 0.5em; }
 
+.main > h3 em {
+               color: #94b3e2;
+}
+
 .main,
 .sidebar  {
                margin: 1em 0 0.5em;
@@ -255,16 +265,29 @@ a {
 }
 
 .troubleshooting {
-               border-left: 8px solid #ff9b12;
+/*             border-left: 8px solid #ff9b12; */
                margin-top: .8em;
 }
 
+.troubleshooting > h4 {
+               letter-spacing: 2px;
+               padding: .25em 0;
+               color: #2f5faa;
+               cursor: pointer;
+               opacity: .5;
+}
+
+.troubleshooting h4:hover {
+               opacity: .8;
+}
+
+.main dt, 
+.main dd,
 .troubleshooting dt, 
 .troubleshooting dd {
-               margin-left: .5em;
 }
 
-.footer h4 {
+#footer h4 {
                margin-bottom: 1em;
 }
 
@@ -286,7 +309,7 @@ a {
 
                .row > div,
                .nav > div,
-               .header > div {
+               #header > div {
                                width: 92%;
                                margin: 0 auto;
                }
@@ -301,7 +324,7 @@ a {
 
                .row > div,
                .nav > div,
-               .header > div {
+               #header > div {
                                width: 86%;
                }
 
@@ -320,13 +343,7 @@ a {
                                margin: 0 0 0 0.5em;
                }
 
-               .nav p {
-                               position: absolute;
-                               top: 0.5em;
-                               right: 0;
-               }
-
-               .header h1 {
+               #header h1 {
                                font-size: 5em;
                                text-align: center;
                }

diff --git a/img/screenshots/step1a-install-wizard.png b/img/screenshots/step1a-install-wizard.png
new file mode 100644 (file)
index 0000000..dbe8238
Binary files /dev/null and b/img/screenshots/step1a-install-wizard.png differ

diff --git a/js/scripts.js b/js/scripts.js
new file mode 100644 (file)
index 0000000..39cb09d
--- /dev/null
+++ b/js/scripts.js
@@ -0,0 +1,9 @@
+
+$(document).ready( function() {
+         $('.troubleshooting > h4').click( function() {
+                               $(this).toggleClass("highlighted");
+             $('.troubleshooting dl').slideToggle('slow');
+         });
+});
+
+