Completely new design!

[fsf-giving-guide.git] / stylesheet.css

diff --git a/stylesheet.css b/stylesheet.css
old mode 100755 (executable)
new mode 100644 (file)
index 5bac547..228180b
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -5,58 +5,165 @@
     src: local('Signika Light'), url('fonts/Signika-Light.ttf') format('truetype');
 }
 
+@font-face {
+    font-family: 'Signika Bold';
+    src: local('Signika Bold'), url('fonts/Signika-Bold.ttf') format('truetype');
+}
+
 @font-face {
     font-family: 'Open Sans';
     src: local('Open Sans'), url('fonts/OpenSans-Regular.ttf') format('truetype');
 }
 
+@font-face {
+    font-family: 'Open Sans Bold';
+    src: local('Open Sans Bold'), url('fonts/OpenSans-Bold.ttf') format('truetype');
+}
+
 /*Style common HTML tags*/
 
 html {
-    line-height: 1.4em;
     font-family: 'Open Sans', 'DejaVu Sans', Arial, sans-serif;
-    font-size: 1em;
+    font-size: 0.9em;
+    line-height: 1.4em;
     color: #363636;
+    background-color: #fffefb;
     width: 100%;
 }
 
-a { color: #b495d3;}
-a:link { text-decoration: none; }
-a:visited { text-decoration: none; }
-a:hover { text-decoration: underline; }
-a:active { text-decoration: underline; }
 
+/* Type something: */
 
-p { line-height: 1.4em; margin-bottom: 1.2em; }
+a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none;}
+
+p { line-height: 1.4em; margin-bottom: 1.5em; font-size: 1em;}
 
 i { font-style: italic; }
 b { font-style: oblique; }
 
 li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4em; }
-ul {margin: 1em 2em 0em 4em;}
+/* ul {margin: 1em 2em 0em 4em;} */
 
 br {margin-bottom: 20em; margin-top: 20em;}
 
 h1 {  font-size: 2.75em;  font-family: 'Signika Light'; margin-bottom: 0.5em; margin-top: 1em; }
-h2 {  font-size: 1.75em;  font-family: 'Signika Light';        color: #6c6c6c; margin-bottom: 0.5em; margin-top: 1em; }
-h3 {  font-size: 1.625em; font-family: 'Signika Light';        color: #b495d3; margin-bottom: 0.5em; margin-top: 1em; }
-h4 {  font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d;        margin-bottom: 0.5em; margin-top: 1em; }
-h5 {  font-size: 1.25em;  font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 1em; }
-h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 1em; }
+h2 {  font-size: 1.75em;  font-family: 'Signika Light';        color: #2CAF8F; margin-bottom: 0.5em; margin-top: 2em; }
+h3 {  font-size: 1.625em; font-family: 'Signika Light';        color: #b495d3; margin-bottom: 0.5em; margin-top: 2em; }
+h4 {  font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d;        margin-bottom: 0.5em; margin-top: 2em; }
+h5 {  font-size: 1.25em;  font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
+h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
 
 /*Site-specific*/
 
-#banner > img {
-  width: 100%;
+  /* Header */
+
+.header {
+  background-image: url("images/banner.png");
+  background-color: #2CAF8F;
+  background-repeat: no-repeat;
+  height: 776px;
+  background-size: 110%;
+  background-position: bottom;
+}
+
+.logo {
+  width: 180px;
+  height: 21px;
+  padding: 1.3em;
+
+}
+
+.logo_wrapper {
 }
 
-#wrapper {
-  margin: auto 5em;
+.top {
+  position: relative;
+}
+
+.top a {
+  border-bottom: 0;
+  color: white;
+}
+
+.upper_links {
+  position: absolute;
+  text-align: center;
+  margin-left: 23%;
+}
+
+.upper_links li {
+  list-style: none;
+  display: inline-block;
+  padding: 1em;
+  float: left;
+}
+
+.navbar ul {
+  background-color: white;
+  border-radius: 100px;
+  text-align: center;
+  width: 875px;
+  height: 3.55556em;
+  margin: auto;
+  -webkit-transition: background 3s;
+  transition:  background-color 3s;
 }
 
-#comparisons {
-  /* padding-top: 10em; */
+ .navbar li {
+  font-weight: bold;
+  list-style-type: none;
+  border-right: 1px #9BD2BF solid;
+  padding: 0 10px 0 10px;
+  line-height: 3.7;
+  float: left;
+  width: 91px;
+  height: 3.55556em;
+}
+
+.navbar li:first-child {
+  border-radius: 100px 0 0 100px;
+  width: 81px;
+}
+
+.navbar li:last-child {
+  border-right: 0;
+  border-radius: 0 100px 100px 0;
+  width: 81px;
+}
+.navbar li:hover {
+  background-color: #FFDD55;
+
+}
+
+.navbar li a {
+  display: block;
+  text-decoration: none;
+  border: 0;
+
+}
+
+.navbar li a:hover {
+  color: #4B423B;
+}
+
+.wrapper {
+  width: 700px;
+  margin: auto;
+}
+
+.wrapper .intro_phrase {
+  width: 450px;
+  text-align: center;
+  font-family: Signika Bold;
+  margin: 1.2em auto;
+  color: #bababa;
+
+}
+
+/* #comparisons {
+  padding-top: 100px;
   background-color: #fbfbfb;
+  background-size: cover;
   position: absolute;
   width: 100%;
   max-width: 1150px;
@@ -78,7 +185,7 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
 
 #free {
   position: relative;
-  /* background-color: red; */
+  background-color: red;
   float: left;
   width: 45%;
   max-width: 450px;
@@ -86,7 +193,7 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
 
 #sign {
   position: relative;
-  /* background-color: green; */
+  background-color: green;
   width: 240px;
   float: left;
   margin-top: 3em;
@@ -94,7 +201,7 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
 
 #proprietary {
   position: relative;
-  /* background-color: blue; */
+  background-color: blue;
   width: 45%;
   max-width: 450px;
   float: right;
@@ -119,17 +226,8 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
   height: 324px;
   margin: auto;
   margin-left: 7.5em;
-  margin-top: 3em;
-}
+  margin-top: 3em;}
 
 #section_wrapper {
   position: relative;
-}
-
-/* #test {
-  height: 10em;
-  position: relative;
-  background-color: white;
-  display: block;
-  float: left;
 } */