Styled the newsletter subscription form. Changed font used in thr Troublehsooting...

diff --git a/css/main.css b/css/main.css
index 48ba2bafa1e4da9b561d8e349e8d098813aa3055..77c24931f76394a69c3556ff5666b8114ea1bbce 100644 (file)
--- a/css/main.css
+++ b/css/main.css
@@ -108,6 +108,12 @@ textarea {
          src: local('Dosis'), url('../fonts/Dosis/Dosis-ExtraLight.ttf') format('truetype');
 }
 
+@font-face {
+         font-family: 'Dosis EBold';
+         src: local('Dosis EBold'), url('../fonts/Dosis/Dosis-ExtraBold.ttf') format('truetype');
+}
+
+
 @font-face {
          font-family: 'Signika Light';
          src: local('Signika Light'), url('../fonts/Signika/Signika-Light.ttf') format('truetype');
@@ -132,14 +138,19 @@ 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';
 }
 
+.troubleshooting h4,
+.newsletter input[type='submit'] {
+               font-family: 'Dosis EBold';
+}
+
 .nav,
 #footer,
+.troubleshooting h4,
 small {
                font-size: 0.75em;
 }
@@ -148,11 +159,16 @@ small {
                font-size: 0.85em;
 }
 
-.troubleshooting h4 {
-               font-size: .75em;
+#header .intro {
+       font-size: 1.1em;
+}
+
+#header #fsf-intro {
+       font-size: .7em;
 }
 
 
+
 /* Colours
 */
 
@@ -225,13 +241,16 @@ a {
                padding: 1em 0;
 }
 
-#header a {
+#header h1 {
+               line-height: 1;
+}
+
+#header h1 a {
                display: block;
 }
 
-#header h1 {
-               line-height: 1;
-               padding: .5em 0 0;
+#header > div > .intro p {
+               margin: 0 0 0.75em;
 }
 
 .intro p,
@@ -291,6 +310,65 @@ a {
                margin-bottom: 1em;
 }
 
+/* FSF Introduction, before the header +  Newsletter form
+*/
+
+#fsf-intro h3,
+#fsf-intro p {
+               margin-bottom: 1em;
+}
+
+.newsletter input {
+  -webkit-transition: all 0.1s linear;
+  -moz-transition: all 0.1s linear;
+  -o-transition: all 0.1s linear;
+  transition: all 0.1s linear;
+}
+
+.newsletter input[type='text'],
+.newsletter input[type='submit'] {
+               font-size: .75em;
+         line-height: 1;
+               vertical-align: bottom;
+}
+
+.newsletter input[type='text'] {
+               border: none;
+               height: 3em;
+               border-radius: 3px;
+               border: .1em solid #5f8dd3;
+               width: 16em;
+               padding: .2em .65em;
+               background: #fff;
+               color: #666;
+}
+
+.newsletter input[type='text']:focus,
+.newsletter input[type='text']:hover {
+               border-color: #2f5faa;
+               outline: none;
+               color: #333333;
+}
+
+.newsletter input[type='submit'] {
+               border: none;
+               cursor: pointer;
+               text-transform: uppercase;
+               letter-spacing: 2px;
+               color: #fff;
+               height: 3.1em;
+               padding: .5em 1em;
+               margin-left: 5px;
+               border-radius: 3px;
+               background-color: #5f8dd3;
+}
+
+.newsletter input[type='submit']:focus,
+.newsletter input[type='submit']:hover {
+               background-color: #2f5faa;
+               outline: none;
+}
+
 
 /* ==========================================================================
    Media Queries
@@ -329,8 +407,9 @@ a {
                }
 
                .nav > div {
+                       overflow: auto;
                        position: relative;
-                       padding: 0.5em 0 0;
+                       padding: 0.35em 0 0;
                }
 
                .nav ul.os {
@@ -341,57 +420,51 @@ a {
                .nav ul.lang {
                                display: inline-block;
                                margin: 0 0 0 0.5em;
+                               float: right;
                }
 
                #header h1 {
-                               font-size: 5em;
-                               text-align: center;
+                               font-size: 6em;
                }
 
-               .row > div,
-               .intro > div {
-                               overflow: hidden;
+               #header .intro {
+                               float: left;
+                               width: 62.5%;
                }
 
-               .row .sidebar,
-               .intro .sidebar { /* 3 columns 125px + 20px margins*/
-                               float: left;
-                               clear: left;
+               #header #fsf-intro {
+                               float: right;
                                width: 34.05%;
-                               margin-right: 1.72%;
+                               padding-left: 1.72%;
+                               border-left: 8px solid #ff9b12;
                }
 
-               .row .main,
-               .intro .main { /* 5 columns 125px + 100px margins*/
-                               float: right;
-                               width: 62.5%;
+               #fsf-intro .newsletter {
                }
 
-               .intro > div {
-                               padding: .5em 0;
+               .row > div,
+               #header > div,
+               .row > div .section-intro,
+               .row > div .step {
+                               overflow: hidden;
                }
 
-               .intro .sidebar { /* 2 columns 125px + 20px margins*/
+               .row .sidebar { /* 3 columns 125px + 20px margins*/
                                float: left;
                                clear: left;
-                               width: 23.27%;
-                               margin-right: 1.72%;
+                               width: 34.05%;
                }
 
-               .intro .main { /* 6 columns 125px + 100px margins*/
+               .row .main { /* 5 columns 125px + 100px margins*/
                                float: right;
-                               width: 75%;
-               }
-
-               .intro .sidebar img {
-                               width: 70%;
+                               width: 62.5%;
+                               margin-left: 1.72%;
                }
 
                .row .sidebar img {
                                width: 100%;
                }
 
-
 }
 
 

diff --git a/img/email-intro01.png b/img/placeholders/email-intro01.png
similarity index 100%
rename from img/email-intro01.png
rename to img/placeholders/email-intro01.png

diff --git a/img/email-intro02.png b/img/placeholders/email-intro02.png
similarity index 100%
rename from img/email-intro02.png
rename to img/placeholders/email-intro02.png

diff --git a/img/email-intro03.png b/img/placeholders/email-intro03.png
similarity index 100%
rename from img/email-intro03.png
rename to img/placeholders/email-intro03.png

diff --git a/img/placeholder.png b/img/placeholders/placeholder.png
similarity index 100%
rename from img/placeholder.png
rename to img/placeholders/placeholder.png