X-Git-Url: https://vcs.fsf.org/?a=blobdiff_plain;f=stylesheet.css;h=0e6aaad5c2dda5cf084aa4b498f66a37129474f8;hb=92541b22680a9877877be60e9639c2d919c83c47;hp=90468c386243f58dca8a572e96286d87050580b0;hpb=f5810b4582ebc5efcb8e14991e2884cb009c5ba5;p=fsf-giving-guide.git

diff --git a/stylesheet.css b/stylesheet.css
index 90468c3..0e6aaad 100755
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -32,7 +32,7 @@ html {
     font-size: 14px;
     line-height: 1.4;
     color: #363636;
-    background-color: #fffefb;
+    background-color: #fff;
     width: 100%;
 }
 
@@ -48,9 +48,9 @@ b { font-style: oblique; }
 li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4; }
 /* ul {margin: 1em 2em 0em 4em;} */
 
-br {margin-bottom: 20em; margin-top: 20em;}
+br {margin-bottom: 0.5em; margin-top: 0.5em;}
 
-h1 {  font-size: 2.75em;  font-family: 'Signika Light'; margin-bottom: 0.5em; margin-top: 1em; }
+h1 {  font-size: 2.20em;  font-family: 'Signika Light'; color: #2CAF8F; 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 Bold';	color: #484848; 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; }
@@ -62,26 +62,24 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
   /* Header */
 
 .header {
-/*   background-image: url("images/banner.png"); */
-/*   background-color: #2CAF8F; */
-/*   background-repeat: no-repeat; */
-/*   height: 710px; */
-/*   background-size: 550px; */
-/*   background-position: 5% 30%; */
 }
 
 /* Navbar */
 
 .header_wrapper {
   background-color: #2CAF8F;
-  height: 450px;
+  height: 486px;
+  margin: auto;
+  width: 100%;
+  /*width: 1300px;*/
 }
 
 .header a {
   border-bottom: 0;
 }
 
-.navbar_wrapper {
+.navbar_wrapper,
+.comparisons {
   max-width: 1300px;
   min-width: 1110px;
   margin: auto;
@@ -105,18 +103,29 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
 }
 
 .share_wrapper {
-  padding: 1.2em;
-  float: right;
-  display: inline-block;
 }
 
 .share {
-  max-width: 36px;
-  min-width: 36px;
+  position: relative;
+  bottom: 0.8em;
+  text-align: center;
+}
+
+.share a{
+  background-color: #FDD53A;
+  border-bottom: 0;
+  padding: .6em 2em;
+  font-family: 'Signika Bold';
+  font-size: 1.4em;
+  color: #2CAF8F;
+  border-radius: 50em;
+}
+
+.share a:hover {
+  background-color: #FDDE56;
 }
 
 .navbar {
-  width: 537px;
   padding: 1em;
   height: 2.55556em;
   display: inline-block;
@@ -156,47 +165,62 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
   color: #4B423B;
 }
 
-.intro {
-  margin: auto;
+.intro,
+.share {
   max-width: 1300px;
   min-width: 1170px;
+  margin: auto;
 }
 
-.intro_wrapper {
-/*   width: 40%; */
+.intro_wrapper,
+.intro_img {
   max-width: 500px;
-  min-width: 500px;
+  min-width: 00px;
+}
+
+.intro_wrapper {
   float: right;
-  color: white !important;
-/*   padding-right: 3em; */
+  color: white;
+  padding-right: 4em;
+}
+
+.intro_img{
+  float: left;
+  padding-left: 4em;
 }
 
 .intro_wrapper h2 {
   color: #FFDD55;
 }
 
-.intro_img img{
-  width: 40%;
-  max-width: 500px;
-  float: left;
-  padding: 2em;
-  padding-left: 3em;
+.intro_wrapper a {
+  border-bottom: 1px solid #FDD53A;
+  color: #FDD53A;
+}
 
+.intro_img img{
+  padding-top: 1.7em;
+  width: 100%;
 }
 
 /* Comparisons */
 
 .wrapper,
 .section_wrapper,
-.recommended {
-  width: 750px;
+.buy_avoid,
+.recommended,
+.licenses {
+  max-width: 750px;
   min-width: 750px;
   margin: auto;
 }
 
 .main_title {
-  text-align: center;
+  width: 100%;
+  text-align: left;
+  border-bottom: 1px solid lightgray;
   margin-top: 3em;
+  margin-bottom: 2em;
   display: inline-block;
 }
 
@@ -204,21 +228,57 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
   border-bottom: none;
 }
 
-.product_img,
+.product_img {
+  margin: auto;
+  max-width: 168px;
+  max-height: 168px;
+  position: relative;
+}
+
 .product {
+  text-align: center;
+  position: relative;
   margin: auto;
+  display: block;
+  height: 168px;
   width: 168px;
+  /* margin-bottom: 8em; */
+/*   max-height: 168px; */
+}
+/*
+ .proprietary .product_img:after {
+  content: "";
+  background-image: url("images/bad.png");
+  background-size: 25px;
+  background-repeat: no-repeat;
+  width: 25px;
+  height: 25px;
+  position: absolute;
 }
 
+ .free h4:after {
+  content: "";
+  background-image: url("images/good.png");
+  background-size: 25px;
+  background-repeat: no-repeat;
+  width: 25px;
+  height: 25px;
+  position: absolute;
+}
+ */
+
+
 .good,
 .bad {
-  position: relative;
-  top: 175px;
-  left: 84px;
-  width: 60px;
+  z-index: 999;
+  width: 65px;
+  top: 8em;
+  left: 9em;
+  position: absolute;
+
 }
 
-.buy, .avoid,
+
 .free, .proprietary {
   text-align: center;
 }
@@ -230,24 +290,45 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
 
 .buy img,
 .avoid img {
-  margin-top: 2em;
   max-width: 151px;
   height: 42px;
 }
 
+.buy_avoid_wrapper {
+  margin-top: 2em;
+  min-width: 100%;
+  max-width: 100%;
+  display: inline-block;
+}
+
+.buy {
+  text-align: center;
+  margin: auto;
+  width: 45.555555%;
+  float: left;
+
+}
+
+.avoid {
+  text-align: center;
+  margin: auto;
+  width: 45.555555%;
+  float: right;
+}
+
 .free {
   float: left;
-  width: 45%;
+  width: 45.555555%;
 }
 
 .proprietary {
   float: right;
-  width: 45%;
+  width: 45.555555%;
 }
 
 /* Recommended Section */
 
-.recommend_title {
+.topic_title {
   border-bottom: 1px solid #2CAF8F;
   width: 100%;
   text-align: left;
@@ -271,3 +352,36 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
 .recommended_product_img {
   width: 120px;
 }
+
+.recommend_wrapper .buy {
+  float: none;
+  text-align: center;
+  width: 100%;
+}
+
+.remark {
+  margin-top: 3em;
+  font-weight: bold;
+}
+
+/* Licenses */
+
+.licenses h1 {
+  margin-top: 0.6em;
+}
+
+/* Footer */
+
+footer {
+  display: block;
+  background-color: #1a1a1a;
+  width: 100%;
+  /*width: 1300px;*/
+}
+
+.footer_wrapper {
+  width: 750px;
+  margin: auto;
+  padding: 2em;
+  color: white;
+}