Added a 'Recommended' section

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

diff --git a/stylesheet.css b/stylesheet.css
index 947ff25cf586cf392fec451866946ba343a3b424..90468c386243f58dca8a572e96286d87050580b0 100755 (executable)
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -36,7 +36,6 @@ html {
     width: 100%;
 }
 
-
 /* Type something: */
 
 a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none; }
@@ -63,43 +62,68 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
   /* Header */
 
 .header {
-  background-image: url("images/banner.png");
+/*   background-image: url("images/banner.png"); */
 /*   background-color: #2CAF8F; */
-  background-repeat: no-repeat;
-  height: 710px;
-  background-size: 550px;
-  background-position: 5% 30%;
+/*   background-repeat: no-repeat; */
+/*   height: 710px; */
+/*   background-size: 550px; */
+/*   background-position: 5% 30%; */
 }
 
-.navbar {
+/* Navbar */
+
+.header_wrapper {
   background-color: #2CAF8F;
-  height: 64px;
+  height: 450px;
 }
+
 .header a {
   border-bottom: 0;
 }
 
+.navbar_wrapper {
+  max-width: 1300px;
+  min-width: 1110px;
+  margin: auto;
+  text-align: center;
+}
+
 .logo_wrapper {
   padding: 1.3em;
-  float: left
+  float: left;
 }
 
 .join_wrapper {
   padding: 1.2em;
   float: right;
+  display: inline-block;
 }
 
 .logo, .join {
-  width: 210px;
+  max-width: 200px;
+  min-width: 200px;
 }
 
-.nav_wrapper {
-  padding: 1em 5em 1em 9em;
+.share_wrapper {
+  padding: 1.2em;
+  float: right;
+  display: inline-block;
+}
+
+.share {
+  max-width: 36px;
+  min-width: 36px;
+}
+
+.navbar {
+  width: 537px;
+  padding: 1em;
   height: 2.55556em;
-  float: left;
+  display: inline-block;
+/*   float: left; */
 }
 
- .navbar li {
+.navbar li {
   font-family: 'Signika Regular';
   font-size: 1em;
   background-color: white;
@@ -132,9 +156,41 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
   color: #4B423B;
 }
 
+.intro {
+  margin: auto;
+  max-width: 1300px;
+  min-width: 1170px;
+}
+
+.intro_wrapper {
+/*   width: 40%; */
+  max-width: 500px;
+  min-width: 500px;
+  float: right;
+  color: white !important;
+/*   padding-right: 3em; */
+}
+
+.intro_wrapper h2 {
+  color: #FFDD55;
+}
+
+.intro_img img{
+  width: 40%;
+  max-width: 500px;
+  float: left;
+  padding: 2em;
+  padding-left: 3em;
+
+}
+
+/* Comparisons */
+
 .wrapper,
-.section_wrapper {
+.section_wrapper,
+.recommended {
   width: 750px;
+  min-width: 750px;
   margin: auto;
 }
 
@@ -144,14 +200,6 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
   display: inline-block;
 }
 
-.wrapper .intro_phrase {
-  width: 450px;
-  text-align: center;
-  font-family: Signika Bold;
-  margin: 1.2em auto;
-  color: #bababa;
-}
-
 .buy a {
   border-bottom: none;
 }
@@ -197,6 +245,29 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
   width: 45%;
 }
 
-section {
-  padding: 3em;
+/* Recommended Section */
+
+.recommend_title {
+  border-bottom: 1px solid #2CAF8F;
+  width: 100%;
+  text-align: left;
+  margin-top: 3em;
+  display: inline-block;
+}
+
+.recommend_wrapper {
+  padding-top: 1em;
+  margin: auto;
+  width: 750px;
+}
+
+.recommended_product {
+  text-align: center;
+  width: 29%;
+  margin: 1em;
+  display: inline-block
+}
+
+.recommended_product_img {
+  width: 120px;
 }