From: Reda Lazri <the.red.shortcut@gmail.com>
Date: Sat, 10 Sep 2016 17:30:43 +0000 (+0100)
Subject: Optimizations, tweaks and fixes
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=1d987574d1a25e529bec381714e7c9a34b8a5023;p=fsf-giving-guide.git

Optimizations, tweaks and fixes
---

diff --git a/css/master.css b/css/master.css
index 7e34d77..eaa5b28 100644
--- a/css/master.css
+++ b/css/master.css
@@ -1,7 +1,6 @@
 /*Bootstrap overrides*/
 .navbar {
   margin-bottom: 0;
-
   border: 0;
   border-radius: 0;
   background: #2caf8f;
@@ -24,7 +23,6 @@
 .navbar-default .navbar-toggle .icon-bar {
   width: 40px;
   height: 5px;
-
   border-radius: 6px;
   background-color: #ffd429;
 }
@@ -52,65 +50,64 @@
 }
 
 .alert {
-  border: 0;
   margin-top: 20px;
   max-width: 700px;
+  border: 0;
 }
 
 .alert-success {
+  background: #dff0d9;
   color: #E8FBF2;
   color: rgba(255,255,255,0.9);
-  background: #dff0d9;
 }
 
 .alert-info {
+  background: #6eadf5;
   color: #F1F7FE;
   color: rgba(255,255,255,0.9);
-  background: #6eadf5;
 }
 
 /*.label-info {
   background: #2B81E3;
 }*/
 
+.panel-body {
+  padding: 0;
+}
+
 /*Typography*/
 @font-face {
-  font-family: "Open Sans";
   font-weight: 400;
   font-style: normal;
-
+  font-family: "Open Sans";
   src: url("../fonts/opensans-regular-webfont.eot");
   src: url("../fonts/opensans-regular-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/opensans-regular-webfont.woff2") format('woff2'), url("../fonts/opensans-regular-webfont.woff") format('woff'), url("../fonts/opensans-regular-webfont.ttf") format('truetype');
 }
 @font-face {
-  font-family: "Open Sans Bold";
   font-weight: 700;
   font-style: normal;
-
+  font-family: "Open Sans Bold";
   src: url("../fonts/opensans-bold-webfont.eot");
   src: url("../fonts/opensans-bold-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/opensans-bold-webfont.woff2") format('woff2'), url("../fonts/opensans-bold-webfont.woff") format('woff'), url("../fonts/opensans-bold-webfont.ttf") format('truetype');
 }
 @font-face {
-  font-family: "Signika Bold";
   font-weight: 600;
   font-style: normal;
-
+  font-family: "Signika Bold";
   src: url("../fonts/signika-bold-webfont.eot");
   src: url("../fonts/signika-bold-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/signika-bold-webfont.woff2") format('woff2'), url("../fonts/signika-bold-webfont.woff") format('woff'), url("../fonts/signika-bold-webfont.ttf") format('truetype');
 }
 @font-face {
-  font-family: "Signika Light";
   font-weight: 100;
   font-style: normal;
-
+  font-family: "Signika Light";
   src: url("../fonts/signika-light-webfont.eot");
   src: url("../fonts/signika-light-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/signika-light-webfont.woff2") format('woff2'), url("../fonts/signika-light-webfont.woff") format('woff'), url("../fonts/signika-light-webfont.ttf") format('truetype');
 }
 @font-face {
-  font-family: "Signika Regular";
   font-weight: 400;
   font-style: normal;
-
+  font-family: "Signika Regular";
   src: url("../fonts/signika-regular-webfont.eot");
   src: url("../fonts/signika-regular-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/signika-regular-webfont.woff2") format('woff2'), url("../fonts/signika-regular-webfont.woff") format('woff'), url("../fonts/signika-regular-webfont.ttf") format('truetype');
 }
@@ -118,73 +115,61 @@
 h1 {
   /*margin-top: 10px;*/
   margin-bottom: 20px;
-
   color: #4B423B;
-
-  font-family: "Signika Light";
   font-size: 35px;
+  font-family: "Signika Light";
 }
 
 h2 {
   color: #4B423B;
-
-  font-family: "Signika Light";
   font-size: 28px;
+  font-family: "Signika Light";
 }
 
 h3 {
   color: #333;
-
-  font-family: "Signika Regular";
   font-size: 25px;
+  font-family: "Signika Regular";
 }
 
 h4 {
   color: #9b9b9b;
-
-  font-family: "Signika Light";
   font-size: 24px;
+  font-family: "Signika Light";
 }
 
 h5 {
   color: #4a4a4a;
-
-  font-family: "Signika Regular";
   font-size: 20px;
+  font-family: "Signika Regular";
 }
 
 li,
 p {
   margin-bottom: 20px;
-
-  list-style: outside;
-
   color: #1c1c1c;
-
-  font-family: "Open Sans";
+  list-style: outside;
   font-size: 17px;
+  font-family: "Open Sans";
   line-height: 30px;
 }
 
 li {
   margin-bottom: 20px;
-
   list-style-type: disc;
 }
 
 a {
+  border-bottom: 2px solid #ffd429;
+  color: #2caf8f;
+  text-decoration: none;
   -webkit-transition: .3s all ease;
   transition: .3s all ease;
-  text-decoration: none;
-
-  color: #2caf8f;
-  border-bottom: 2px solid #ffd429;
 }
 
 a:hover {
-  text-decoration: none;
-
   color: #0f4639;
+  text-decoration: none;
 }
 
 section {
@@ -228,13 +213,10 @@ section {
 
 .navbar li {
   padding-top: 20px;
-
-  text-align: center;
-
   color: #9b9b9b;
-
-  font-family: "Signika Regular";
+  text-align: center;
   font-size: 30px;
+  font-family: "Signika Regular";
 }
 
 .navbar-brand {
@@ -249,7 +231,6 @@ section {
 .intro-text {
   padding-top: 20px;
   padding-bottom: 0;
-
   background: #2caf8f;
 }
 
@@ -263,7 +244,6 @@ section {
 
 .intro-text {
   padding-bottom: 40px;
-
   background: #fff;
 }
 /*Actions*/
@@ -278,81 +258,69 @@ section {
 .action-button {
   position: relative;
   bottom: 10px;
-
   margin-bottom: 30px;
   padding: 6px 35px;
-
-  color: #4B423B;
   border: 0;
   border-bottom: 0;
   border-radius: 100px;
   background: #FFD429;
-
-  font-family: "Signika Regular";
+  color: #4B423B;
   font-size: 22px;
+  font-family: "Signika Regular";
 }
 
 .action-button:hover {
-  color: white;
   background: #2caf8f;
+  color: white;
 }
 /*Comparisons*/
 .title {
   margin-top: 40px;
   padding-bottom: 8px;
-
   background-image: url("../img/underline.svg");
-  background-repeat: no-repeat;
   background-position: center bottom;
+  background-repeat: no-repeat;
 }
 
 .sale {
-
-  display: none; /* Remove when using*/
   position: absolute;
   top: 0;
   left: 0;
-
+  display: none; /* Remove when using*/
   width: 0;
   height: 0;
-
-  color: #fff;
   border-width: 100px 100px 0 0;
   border-style: solid;
   border-color: #0AD778 transparent transparent transparent;
+  color: #fff;
 }
 
 .sale-text {
   position: absolute;
   top: -81px;
   left: 4px;
-
-  -webkit-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-  text-transform: uppercase;
-
   color: white;
-
-  font-size: 20px;
+  text-transform: uppercase;
   font-weight: bold;
+  font-size: 20px;
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
 }
 
 .rfy {
-  /*text-align: center;*/
-  text-decoration: underline;
-  text-transform: uppercase;
-  /*background: #2B81E3;*/
-
-  color: #fff;
   /*position: absolute;*/
   /*top: 44px;*/
   /*left: -71px;*/
   /*padding: 10px 0;*/
   /*width: 266px;*/
   border-bottom: 0;
-
-  font-size: 14px;
+  /*background: #2B81E3;*/
+  color: #fff;
+  /*text-align: center;*/
+  text-decoration: underline;
+  text-transform: uppercase;
   font-weight: 700;
+  font-size: 14px;
   /*-webkit-transform: rotate(-45deg);*/
   /*-moz-transform: rotate(-45deg);*/
   /*transform: rotate(-45deg);*/
@@ -363,9 +331,8 @@ section {
 }
 
 .bad,
-.good {
+.good, {
   overflow: hidden;
-
   margin-top: 30px;
   padding-top: 30px;
   padding-bottom: 30px;
@@ -374,8 +341,8 @@ section {
 .bad {
   background-color: transparent;
   background-image: url("../img/bad-pattern.png");
-  background-repeat: repeat;
   background-size: 40px;
+  background-repeat: repeat;
 }
 
 .pros li {
@@ -396,43 +363,39 @@ li.neutral {
 }
 
 .cons li,
-.pros li {
+.pros li,
+.info {
   padding-left: 30px;
-
-  list-style: none;
-
+  background-position: top center left;
   background-repeat: no-repeat;
+  list-style: none;
 }
 
 .bad img,
 .good img {
+  margin-bottom: 20px;
   width: 250px;
   height: 250px;
-  margin-bottom: 20px;
 }
 
 .get-item {
   position: absolute;
   right: 20px;
   bottom: 6px;
-
-  width: 60px;
-  height: 60px;
   /*margin: 0 auto 5px;*/
   padding: 15px 11px;
-
-  text-align: center;
-  vertical-align: middle;
-  text-decoration: none;
-
-  color: white;
+  width: 60px;
+  height: 60px;
   border-bottom: 0;
   border-radius: 50%;
   background: #2B81E3;
   box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
-
-  font-family: "Signika Regular";
+  color: white;
+  vertical-align: middle;
+  text-align: center;
+  text-decoration: none;
   font-size: 21px;
+  font-family: "Signika Regular";
 }
 
 .get-item:active,
@@ -441,10 +404,9 @@ li.neutral {
 .rfy:active,
 .rfy:focus,
 .rfy:hover {
-  text-decoration: none;
-
-  color: white;
   background: #6eadf5;
+  color: white;
+  text-decoration: none;
 }
 
 .get-item:active {
@@ -455,21 +417,30 @@ li.neutral {
   position: absolute;
   right: 20px;
   bottom: 70px;
-
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
   /*padding: 10px;*/
   text-align: center;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
 }
 
 .seller {
   display: block;
-
   /*width: 50px;*/
   /*height: 50px;*/
-
   text-align: center;
 }
+
+.info {
+   margin-bottom: 0;
+  background-image: url("../img/info.svg");
+   background-position: center left;
+
+}
+
+.info p {
+  margin-bottom: 0;
+}
+
 /*Recommended Lines*/
 
 .certified {
@@ -484,37 +455,34 @@ li.neutral {
 .recommended-section {
   padding-top: 30px;
   padding-bottom: 30px;
-
   background: #fffae5;
 }
 /*Charities*/
 .charities {
   margin-bottom: 0;
-
   background-color: #F5FFF7;
 }
 
 .charities img {
+  -webkit-filter: brightness(0.39) contrast(150%) opacity(0.6) saturate(0);
+  filter: brightness(0.39) contrast(150%) opacity(0.6) saturate(0);
   -webkit-transition: .3s all ease;
   transition: .3s all ease;
 
-  -webkit-filter: brightness(0.8) opacity(0.8) grayscale(1);
-  filter: brightness(0.8) opacity(0.8) grayscale(1);
-  -moz-filter: brightness(0.8) opacity(0.8) grayscale(1);
+  -moz-filter: brightness(0.39) contrast(150%) opacity(0.6) saturate(0);
 }
 
 .charities img:hover {
+  -webkit-filter: brightness(1) contrast(100%) opacity(1) saturate(1);
+  filter: brightness(1) contrast(100%) opacity(1) saturate(1);
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 
-  -webkit-filter: brightness(1) opacity(1) grayscale(0);
-  filter: brightness(1) opacity(1) grayscale(0);
-  -moz-filter: brightness(1) opacity(1) grayscale(0);
+  -moz-filter: brightness(1) contrast(100%) opacity(1) saturate(1);
 }
 /*Licenses*/
 .licenses {
   margin-bottom: 0;
-
   background-color: #fffae5;
 }
 
@@ -524,6 +492,20 @@ li.neutral {
   box-shadow: 0 0 0 transparent;
 }
 
+.lcs-col {
+  margin: 0;
+  position:inherit;
+}
+
+.lcs-col:before {
+   content:'Expand';
+   font-size: 16px;
+}
+
+.lcs-col[aria-expanded="true"]:before {
+    content:'Collapse';
+}
+
 .fix-margin {
   margin: 0;
 }
@@ -531,7 +513,6 @@ li.neutral {
 footer {
   padding-top: 30px;
   /*padding-bottom: 30px;*/
-
   background-color: #4B423B;
 }
 
@@ -542,7 +523,6 @@ footer p {
 
 footer a {
   color: #FFD429;
-
   font-weight: 700;
 }
 
@@ -551,14 +531,13 @@ footer a:hover {
 }
 
 .footer-logo {
-  max-height: 220px;
   margin-bottom: 15px;
+  max-height: 220px;
 }
 
 .ornament {
-  height: 5px;
   margin-top: 20px;
-
+  height: 5px;
   background: -webkit-linear-gradient(left, #FFD429 15%, #2B81E3 15%, #2B81E3 30%,#2CAF8F 30%, #2CAF8F 45%, #F3FAFF 45%, #F3FAFF 60%, #0AD778 60%, #0AD778 75%, #D70A0A 75%, #D70A0A 85%);
   background: linear-gradient(90deg, #FFD429 15%, #2B81E3 15%, #2B81E3 30%,#2CAF8F 30%, #2CAF8F 45%, #F3FAFF 45%, #F3FAFF 60%, #0AD778 60%, #0AD778 75%, #D70A0A 75%, #D70A0A 85%);
 }
@@ -568,30 +547,24 @@ footer a:hover {
   /*Navbar*/
   .navbar-nav {
     float: right;
-
     margin: 10px;
     /*margin-left: 100px;*/
   }
 
   .navbar-default .navbar-nav > li > a {
     padding: 7px;
-
     color: #2caf8f;
   }
 
   .navbar li {
     padding: 0 25px;
-
-    list-style-type: none;
-
-    -webkit-transition: .3s all ease;
-    transition: .3s all ease;
-
     border-right: 1px #9BD2BF solid;
     background-color: white;
-
-    font-family: "Signika Regular";
+    list-style-type: none;
     font-size: 1.1em;
+    font-family: "Signika Regular";
+    -webkit-transition: .3s all ease;
+    transition: .3s all ease;
   }
 
   .navbar li:first-child {
@@ -609,10 +582,9 @@ footer a:hover {
 
   .navbar li a {
     display: block;
-
+    text-decoration: none;
     -webkit-transition: .3s all ease;
     transition: .3s all ease;
-    text-decoration: none;
   }
 
   .navbar li a:hover {
@@ -633,15 +605,17 @@ footer a:hover {
   .is-table-row [class*="col-"] {
        display: table-cell;
        float: none;
-
        vertical-align: top;
    }
 
   .recommended-section h5 {
     padding-left: 46px;
-
     text-align: left;
   }
+
+  .charities img {
+    width: 80%;
+  }
   /*Footer*/
   .footer-logo {
     margin-bottom: 0;
@@ -660,23 +634,18 @@ footer a:hover {
 
   .navbar-default .navbar-nav > li > a {
     padding: 7px;
-
     color: #2caf8f;
   }
 
   .navbar li {
     padding: 0 30px;
-
-    list-style-type: none;
-
-    -webkit-transition: .3s all ease;
-    transition: .3s all ease;
-
     border-right: 1px #9BD2BF solid;
     background-color: white;
-
-    font-family: "Signika Regular";
+    list-style-type: none;
     font-size: 1.2em;
+    font-family: "Signika Regular";
+    -webkit-transition: .3s all ease;
+    transition: .3s all ease;
   }
 
   .navbar li:first-child {
@@ -694,10 +663,9 @@ footer a:hover {
 
   .navbar li a {
     display: block;
-
+    text-decoration: none;
     -webkit-transition: .3s all ease;
     transition: .3s all ease;
-    text-decoration: none;
   }
 
   .navbar li:hover a {
@@ -709,8 +677,8 @@ footer a:hover {
   }
 
   .join img {
-    width: 200px;
     margin: 10px;
+    width: 200px;
   }
   /*Intro*/
   .intro {
@@ -723,7 +691,6 @@ footer a:hover {
 
   .intro-text h1 {
     margin-top: 0;
-
     color: white;
     color: rgba(255, 255, 255, 0.95);
   }
@@ -734,13 +701,12 @@ footer a:hover {
 
   .intro-text h4 {
     color: #FFDD55;
-
     font-family: "Signika Light";
   }
 
   .illustration img {
-    width: 90%;
     margin-top: 30px;
+    width: 90%;
   }
   /*Footer*/
   .footer-logo img {
@@ -750,7 +716,7 @@ footer a:hover {
 /* Large devices (large desktops, 1200px and up) */
 @media (min-width: 1200px) {
   .illustration img {
-    width: 70%;
     margin-top: 10px;
+    width: 70%;
   }
 }
diff --git a/givingguide.html b/givingguide.html
index f03f2db..566f88e 100644
--- a/givingguide.html
+++ b/givingguide.html
@@ -99,6 +99,46 @@
   </section>
   <!--End Intro-->
 
+  <!--Begin Actions-->
+  <section class="actions">
+    <div class="container">
+      <div class="row is-table-row">
+        <!-- Begin Share -->
+        <div class="action col-md-4 col-sm-4 text-center">
+          <h2>Share</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
+          </p>
+          <a class="action-button" href="https://www.fsf.org/share?u=https://www.fsf.org/givingguide/&amp;t=Check out the Free Software Foundation Ethical Tech Giving Guide">#givefreely</a>
+        </div>
+        <!-- End Share -->
+
+        <!-- Begin Share -->
+        <div class="action col-md-4 col-sm-4 text-center">
+          <h2>Organize</h2>
+          <p>
+            Download the printable version and organize a <a href="https://www.fsf.org/givingguide/giving-guide-giveaway-primer">Giving Guide Giveaway</a> to share it with your community.
+          </p>
+          <a class="action-button" href="https://www.fsf.org/givingguide/giving-guide-giveaway-primer#printable">Print the guide</a>
+        </div>
+        <!-- End Share -->
+
+        <!-- Begin Share -->
+        <div class="action col-md-4 col-sm-4 text-center">
+          <h2>Non-profit</h2>
+          <p>
+            Donating to a <a href="#charities">nonprofit</a> in someone's name is at least as meaningful as buying them an electronic device.
+          </p>
+          <a class="action-button" href="#charities">Donate</a>
+        </div>
+        <!-- End Share -->
+      </div>
+      <!-- End Row -->
+    </div>
+    <!-- End Container -->
+  </section>
+  <!--End Actions-->
+
   <!--Begin Comparisons-->
   <section class="comparisons">
 
@@ -438,9 +478,11 @@
       </div>
       <!--End Row-->
       <div class="alert alert-success ryf center-block">
+        <li class="info">
         <p>
           All the items recommended by the Free Software Foundation are <a href="https://www.fsf.org/resources/hw/endorsement/respects-your-freedom" class="alert-link">RYF-Certified</a>
         </p>
+        </li>
       </div>
     </div>
     <!--End Container-->
@@ -493,51 +535,10 @@
   </section>
   <!-- End Certified -->
 
-
-  <!--Begin Actions-->
-  <section class="actions">
-    <div class="container">
-      <div class="row is-table-row">
-        <!-- Begin Share -->
-        <div class="action col-md-4 col-sm-4 text-center">
-          <h2>Share</h2>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
-          </p>
-          <a class="action-button" href="https://www.fsf.org/share?u=https://www.fsf.org/givingguide/&amp;t=Check out the Free Software Foundation Ethical Tech Giving Guide">#givefreely</a>
-        </div>
-        <!-- End Share -->
-
-        <!-- Begin Share -->
-        <div class="action col-md-4 col-sm-4 text-center">
-          <h2>Organize</h2>
-          <p>
-            Download the printable version and organize a <a href="https://www.fsf.org/givingguide/giving-guide-giveaway-primer">Giving Guide Giveaway</a> to share it with your community.
-          </p>
-          <a class="action-button" href="https://www.fsf.org/givingguide/giving-guide-giveaway-primer#printable">Print the guide</a>
-        </div>
-        <!-- End Share -->
-
-        <!-- Begin Share -->
-        <div class="action col-md-4 col-sm-4 text-center">
-          <h2>Non-profit</h2>
-          <p>
-            Donating to a <a href="#charities">nonprofit</a> in someone's name is at least as meaningful as buying them an electronic device.
-          </p>
-          <a class="action-button" href="#charities">Donate</a>
-        </div>
-        <!-- End Share -->
-      </div>
-      <!-- End Row -->
-    </div>
-    <!-- End Container -->
-  </section>
-  <!--End Actions-->
-
   <!-- Begin Donations -->
   <section class="charities" id="charities">
     <div class="container">
-      <h1>Recommended organizations for holiday donations</h1>
+      <h1 class="text-center">Recommended organizations for holiday donations</h1>
       <div class="row">
         <div class="col-md-3 col-sm-4 col-xs-6">
           <a href="http://www.fsf.org/"><img src="img/charities/fsf.png" alt="fsf" class="center-block img-responsive" /></a>
@@ -575,9 +576,10 @@
         <div class="col-md-12">
           <div class="panel-default">
             <div class="panel-heading">
-              <h1 class="fix-margin">Licenses</h1>
+              <h1 class="fix-margin">Licenses <span><button data-toggle="collapse" data-target="#licenses" class="btn action-button pull-right lcs-col"></button></span></h1>
+
             </div>
-            <div class="panel-body">
+            <div class="panel-body collapsing" id="licenses">
               <p>This page by the Free Software Foundation is licensed under a <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 Unported.</a>
               </p>
               <p>The graphics and photos used on this page have been modified by the Free Software Foundation and are licensed separately under the following terms: </p>
diff --git a/img/Illustration.png b/img/Illustration.png
index f8a9184..115d6c6 100644
Binary files a/img/Illustration.png and b/img/Illustration.png differ
diff --git a/img/charities/eff.png b/img/charities/eff.png
index 685566c..0097358 100644
Binary files a/img/charities/eff.png and b/img/charities/eff.png differ
diff --git a/img/favicons/android-icon-192x192.png b/img/favicons/android-icon-192x192.png
index 0784de1..1100077 100644
Binary files a/img/favicons/android-icon-192x192.png and b/img/favicons/android-icon-192x192.png differ
diff --git a/img/favicons/apple-icon-114x114.png b/img/favicons/apple-icon-114x114.png
index 195585a..b829210 100644
Binary files a/img/favicons/apple-icon-114x114.png and b/img/favicons/apple-icon-114x114.png differ
diff --git a/img/favicons/apple-icon-120x120.png b/img/favicons/apple-icon-120x120.png
index 5668ae0..128c9cb 100644
Binary files a/img/favicons/apple-icon-120x120.png and b/img/favicons/apple-icon-120x120.png differ
diff --git a/img/favicons/apple-icon-144x144.png b/img/favicons/apple-icon-144x144.png
index 5b7be2d..d7b20cc 100644
Binary files a/img/favicons/apple-icon-144x144.png and b/img/favicons/apple-icon-144x144.png differ
diff --git a/img/favicons/apple-icon-152x152.png b/img/favicons/apple-icon-152x152.png
index ad106b3..de86ec5 100644
Binary files a/img/favicons/apple-icon-152x152.png and b/img/favicons/apple-icon-152x152.png differ
diff --git a/img/favicons/apple-icon-180x180.png b/img/favicons/apple-icon-180x180.png
index b146325..dbe8e95 100644
Binary files a/img/favicons/apple-icon-180x180.png and b/img/favicons/apple-icon-180x180.png differ
diff --git a/img/favicons/apple-icon-57x57.png b/img/favicons/apple-icon-57x57.png
index d7d284f..09b83be 100644
Binary files a/img/favicons/apple-icon-57x57.png and b/img/favicons/apple-icon-57x57.png differ
diff --git a/img/favicons/apple-icon-60x60.png b/img/favicons/apple-icon-60x60.png
index 88ce969..c1ab7db 100644
Binary files a/img/favicons/apple-icon-60x60.png and b/img/favicons/apple-icon-60x60.png differ
diff --git a/img/favicons/apple-icon-72x72.png b/img/favicons/apple-icon-72x72.png
index f624f7d..2e78485 100644
Binary files a/img/favicons/apple-icon-72x72.png and b/img/favicons/apple-icon-72x72.png differ
diff --git a/img/favicons/apple-icon-76x76.png b/img/favicons/apple-icon-76x76.png
index 601a870..ab4c088 100644
Binary files a/img/favicons/apple-icon-76x76.png and b/img/favicons/apple-icon-76x76.png differ
diff --git a/img/favicons/favicon-16x16.png b/img/favicons/favicon-16x16.png
index 4f09e19..eb30ac6 100644
Binary files a/img/favicons/favicon-16x16.png and b/img/favicons/favicon-16x16.png differ
diff --git a/img/favicons/favicon-32x32.png b/img/favicons/favicon-32x32.png
index 6ee2e2d..78803ed 100644
Binary files a/img/favicons/favicon-32x32.png and b/img/favicons/favicon-32x32.png differ
diff --git a/img/favicons/favicon-96x96.png b/img/favicons/favicon-96x96.png
index b52255e..71b315b 100644
Binary files a/img/favicons/favicon-96x96.png and b/img/favicons/favicon-96x96.png differ
diff --git a/img/favicons/ms-icon-144x144.png b/img/favicons/ms-icon-144x144.png
index db15a6a..c146665 100644
Binary files a/img/favicons/ms-icon-144x144.png and b/img/favicons/ms-icon-144x144.png differ
diff --git a/img/info.svg b/img/info.svg
new file mode 100644
index 0000000..82b4fe6
--- /dev/null
+++ b/img/info.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">        <title>info</title>        <defs/>    <g id="Graphics" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">        <g id="info" fill="#0F4639">            <g id="Shape">                <path d="M8.56338011,6.64553947 L8.56338011,4.72769924 L10.4366199,4.72769924 L10.4366199,6.64553947 L8.56338011,6.64553947 Z M9.5,17.1267609 C11.5813771,17.1267609 13.3728484,16.3759785 14.8744131,14.874413 C16.3759779,13.3728482 17.1267602,11.5813776 17.1267602,9.49999962 C17.1267602,7.41862319 16.3759779,5.62715182 14.8744131,4.12558703 C13.3728484,2.62402149 11.5813771,1.87323909 9.5,1.87323909 C7.41862289,1.87323909 5.62715159,2.62402149 4.12558687,4.12558703 C2.62402214,5.62715182 1.87323978,7.41862319 1.87323978,9.49999962 C1.87323978,11.5813776 2.62402214,13.3728482 4.12558687,14.874413 C5.62715159,16.3759785 7.41862289,17.1267609 9.5,17.1267609 L9.5,17.1267609 Z M9.5,0 C12.1165884,0 14.3540687,0.929186152 16.2124409,2.78755846 C18.0708139,4.64593076 19,6.88341115 19,9.49999962 C19,12.1165881 18.0708139,14.3540692 16.2124409,16.2124415 C14.3540687,18.0708138 12.1165884,19 9.5,19 C6.88341163,19 4.64593133,18.0708138 2.78755911,16.2124415 C0.929186115,14.3540692 0,12.1165881 0,9.49999962 C0,6.88341115 0.929186115,4.64593076 2.78755911,2.78755846 C4.64593133,0.929186152 6.88341163,0 9.5,0 L9.5,0 Z M8.56338011,14.2723008 L8.56338011,8.56338045 L10.4366199,8.56338045 L10.4366199,14.2723008 L8.56338011,14.2723008 Z"/>            </g>        </g>    </g></svg>
\ No newline at end of file