Added 'Share' button, fixed 'Buy/avoid' buttons, added img template, removed old img
authorReda Lazri <the.red.shortcut@gmail.com>
Wed, 19 Nov 2014 14:47:24 +0000 (15:47 +0100)
committerReda Lazri <the.red.shortcut@gmail.com>
Wed, 19 Nov 2014 14:47:24 +0000 (15:47 +0100)
Guidelines.md
givingguide.html
images/Template.png [new file with mode: 0644]
images/separator.png [deleted file]
stylesheet.css

index ffa035f27c7cbb009720594a69aebf4772b8a5a7..a48283e0b1ce350c00edb5faef4cb09956b9f98a 100644 (file)
@@ -3,7 +3,7 @@
 ##Images:
 
 * Use high resolution images with transparent backgrounds.
-* If it's a logo then export the images from its verctor source.
+* If it's a logo then ALWAYS export the images from its verctor source.
 * Do not put a logo next to a product or vice-versa. Always use images with the same nature (i.e. product versus product; logo versus logo)
 * Always export images and logos to 500px*500px.
 
index 7428ff92b1aad1cb02f24e954cdaf582e28a4c68..86d371d37b1c1009547c36df85760637e8ed1b50 100755 (executable)
                                                        </ul>
                                                </div>
 
-                                               <span class="share_wrapper">
-                                                       <a href="https://fsf.org/share"><img class="share" src="images/share.png" alt="share" /></a>
-                                               </span>
-
                                                <span class="join_wrapper">
                                                        <a href="http://fsf.org/jfb"><img class="join" src="images/join.png" alt="join" /></a>
                                                </span>
                        </div>
                </div>
 
+               <div class="share">
+                       <span class="share_wrapper">
+                               <a href="https://fsf.org/share">Share</a>
+                       </span>
+               </div>
+
                <!--We compare different products from here-->
 
-                               <div class="comparisons">
-                                               <div class="section_wrapper">
-                                                       <h3 class="main_title">Operating System</h3>
-
-                                                       <div class="free">
-                                                               <div class="product">
-                                                                       <img class="good" src="images/good.png" alt="good"/>
-                                                                       <img class="product_img" src="images/linux.png" alt="Linux"/>
-                                                               </div>
-
-                                                               <h4 class="title">Trisquel</h4>
-                                                               <ul>
-                                                                       <li>
-                          Completely free operating system:
-                          transparent and modifiable
-                        </li>
-
-                        <li>
-                          Break the cycle of forced upgrades and
-                          planned obsolescence
-                        </li>
-
-                        <li>
-                          Comes with all the software you need and an
-                          easy software manager to find more.
-                        </li>
-                        <li>Works great with the Wi-Fi adapters in this guide.</li>
-                                                               </ul>
-
-                                                               <div class="buy">
-
-                                                                       <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
-
-                                                               </div>
-
-                                                       </div>
-
-                                                       <div class="proprietary">
-                                                               <div class="product">
-                                                                       <img class="bad" src="images/bad.png" alt="bad"/>
-                                                                       <img class="product_img" src="images/windows.png" alt="Windows"/>
-                                                               </div>
-
-                                                               <h4 class="title">Windows</h4>
-                                                               <ul>
-                        <li>
-                          Proprietary software that profits from
-                          controlling how you use your computer
-                        </li>
-
-                        <li>
-                          Invades privacy and exposes personal data to
-                          Microsoft,
-                          <a href="http://www.theguardian.com/world/2013/sep/05/nsa-how-to-remain-secure-surveillance">
-                            the NSA,
-                          </a> and other malicious attackers
-                        </li>
-
-                        <li>
-                          Dependent on mandatory upgrades and devices
-                          that don't support older versions of Windows
-                        </li>
-                      </ul>
-
-                                                               <div class="avoid">
-
-                                                                       <img src="images/avoid.png" alt="avoid" />
-
-                                                               </div>
-                                                       </div>
+               <div class="comparisons">
+                       <div class="section_wrapper">
+                               <h3 class="main_title">Operating System</h3>
+
+                               <div class="free">
+                                       <div class="product">
+                                               <img class="good" src="images/good.png" alt="good"/>
+                                               <img class="product_img" src="images/linux.png" alt="Linux"/>
+                                       </div>
+
+                                       <h4 class="title">Trisquel</h4>
+                                       <ul>
+                                               <li>
+                         Completely free operating system:
+                         transparent and modifiable
+                       </li>
+
+                       <li>
+                         Break the cycle of forced upgrades and
+                         planned obsolescence
+                       </li>
+
+                       <li>
+                         Comes with all the software you need and an
+                         easy software manager to find more.
+                       </li>
+                       <li>Works great with the Wi-Fi adapters in this guide.</li>
+                                       </ul>
+
+
+
+                               </div>
+
+                               <div class="proprietary">
+                                       <div class="product">
+                                               <img class="bad" src="images/bad.png" alt="bad"/>
+                                               <img class="product_img" src="images/windows.png" alt="Windows"/>
+                                       </div>
+
+                                       <h4 class="title">Windows</h4>
+                                       <ul>
+                       <li>
+                         Proprietary software that profits from
+                         controlling how you use your computer
+                       </li>
+
+                       <li>
+                         Invades privacy and exposes personal data to
+                         Microsoft,
+                         <a href="http://www.theguardian.com/world/2013/sep/05/nsa-how-to-remain-secure-surveillance">
+                           the NSA,
+                         </a> and other malicious attackers
+                       </li>
+
+                       <li>
+                         Dependent on mandatory upgrades and devices
+                         that don't support older versions of Windows
+                       </li>
+                     </ul>
+
+
+                               </div>
+
+                               <div class="buy_avoid">
+                                       <div class="buy_avoid_wrapper">
+                                               <div class="buy">
+                                                       <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
+                                               </div>
+
+                                               <div class="avoid">
+                                                       <img src="images/avoid.png" alt="avoid" />
                                                </div>
+                                       </div>
+                               </div>
 
+                       </div>
 
 
-                                               <div class="section_wrapper">
-                                                       <h3 class="main_title">3D Printers</h3>
 
-                                                       <div class="free">
-                                                               <div class="product">
-                                                                       <img class="good" src="images/good.png" alt="good"/>
-                                                                       <img class="product_img" src="//static.fsf.org/nosvn/images/taz4.png" alt="TAZ 4.0"/>
-                                                               </div>
+                       <div class="section_wrapper">
+                               <h3 class="main_title">3D Printers</h3>
 
-                                                               <h4 class="title">Lulzbot TAZ 4.0</h4>
-                                                               <ul>
-                        <li>
-                          <a href="https://www.fsf.org/resources/hw/endorsement/respects-your-freedom">
-                            Respects Your Freedom
-                          </a>
+                               <div class="free">
+                                       <div class="product">
+                                               <img class="good" src="images/good.png" alt="good"/>
+                                               <img class="product_img" src="//static.fsf.org/nosvn/images/taz4.png" alt="TAZ 4.0"/>
+                                       </div>
 
-                          certified by the Free Software Foundation
-                        </li>
+                                       <h4 class="title">Lulzbot TAZ 4.0</h4>
+                                       <ul>
+                       <li>
+                         <a href="https://www.fsf.org/resources/hw/endorsement/respects-your-freedom">
+                           Respects Your Freedom
+                         </a>
+
+                         certified by the Free Software Foundation
+                       </li>
+
+                       <li>
+                         Powered by free software, making 3D printing
+                         more accessible and encouraging innovation
+                       </li>
+
+                       <li>
+                         Learn more about the Lulzbot at
+                         <a href="http://www.lulzbot.com/">
+                           www.lulzbot.com
+                         </a>
+                       </li>
+                     </ul>
+
+                               </div>
+
+                               <div class="proprietary">
+                                       <div class="product">
+                                               <img class="bad" src="images/bad.png" alt="bad"/>
+                                               <img class="product_img" src="//static.fsf.org/fsforg/img/MakerbotPrepped.png" alt="Makerbot Replicator 2"/>
+                                       </div>
+
+                                       <h4 class="title">Makerbot Replicator 2</h4>
+                                       <ul>
+                       <li>
+                         MakerWare software is proprietary,
+                         restricting freedom and stifling innovation
+                       </li>
+
+                       <li>
+                         Hardware patents threaten free printers like
+                         the Lulzbot
+                       </li>
+
+                       <li>
+                         Recently announced an increasingly
+                         proprietary approach, further distancing
+                         itself from the free software community
+                       </li>
+                     </ul>
+
+                               </div>
+
+                               <div class="buy_avoid">
+                                       <div class="buy_avoid_wrapper">
+                                               <div class="buy">
+                                                       <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
+                                               </div>
 
-                        <li>
-                          Powered by free software, making 3D printing
-                          more accessible and encouraging innovation
-                        </li>
+                                               <div class="avoid">
+                                                       <img src="images/avoid.png" alt="avoid" />
+                                               </div>
+                                       </div>
+                               </div>
+       </div>
 
-                        <li>
-                          Learn more about the Lulzbot at
-                          <a href="http://www.lulzbot.com/">
-                            www.lulzbot.com
-                          </a>
-                        </li>
-                      </ul>
 
-                                                               <div class="buy">
 
-                                                                       <a href="http://fedoraproject.org/"><img src="images/buy.png" alt="Buy" /></a>
 
-                                                               </div>
+                       <div class="section_wrapper">
+                               <h3 class="main_title">Ebooks</h3>
 
-                                                       </div>
+                               <div class="free">
+                                       <div class="product">
+                                               <img class="good" src="images/good.png" alt="good"/>
+                                               <img class="product_img" src="//static.fsf.org/fsforg/img/ProjectGutenbergPrepped.png" alt="Project Gutenberg"/>
+                                       </div>
 
-                                                       <div class="proprietary">
-                                                               <div class="product">
-                                                                       <img class="bad" src="images/bad.png" alt="bad"/>
-                                                                       <img class="product_img" src="//static.fsf.org/fsforg/img/MakerbotPrepped.png" alt="Makerbot Replicator 2"/>
-                                                               </div>
+                                       <h4 class="title">Project Gutenberg</h4>
+
+                     <ul>
+                       <li>
+                         The original purveyor of DRM-free eBooks
+                       </li>
+
+                       <li>
+                         Enjoy the freedom to read your ebooks on any
+                         device
+                       </li>
+
+                       <li>
+                         All of the ebooks on Project Gutenberg,
+                         including classics like Peter Pan and Huck
+                         Finn, are gratis
+                       </li>
+
+                       <li>
+                         Pick out the perfect books for the whole
+                         family at
+                         <a href="http://www.gutenberg.org/">
+                           www.gutenberg.org
+                         </a>
+                         or from other
+                         <a href="http://www.defectivebydesign.org/guide/ebooks">
+                           DRM-free ebooks sites
+                         </a>
+                       </li>
+                     </ul>
 
-                                                               <h4 class="title">Makerbot Replicator 2</h4>
-                                                               <ul>
-                        <li>
-                          MakerWare software is proprietary,
-                          restricting freedom and stifling innovation
-                        </li>
+                               </div>
 
-                        <li>
-                          Hardware patents threaten free printers like
-                          the Lulzbot
-                        </li>
+                               <div class="proprietary">
+                                       <div class="product">
+                                               <img class="bad" src="images/bad.png" alt="bad"/>
+                                               <img class="product_img" src="//static.fsf.org/fsforg/img/amazon.jpg" alt="Amazon"/>
+                                       </div>
 
-                        <li>
-                          Recently announced an increasingly
-                          proprietary approach, further distancing
-                          itself from the free software community
-                        </li>
-                      </ul>
+                                       <h4 class="title">Amazon</h4>
+                                       <ul>
+                       <li>
+                         Amazon can remotely block or delete
+                         individual ebooks or your entire library
+                         with no warning or explanation (they've done
+                         it before--read about it
+                         <a href="http://www.defectivebydesign.org/node/2250">
+                           here
+                         </a>).
+                       </li>
+
+                       <li>
+                         DRM prevents you from sharing your favorite
+                         books with friends, and Amazon uses DRM to
+                         <a href="http://www.defectivebydesign.org/faq#harm">
+                           maintain their monopoly
+                         </a>
+                       </li>
+
+                       <li>
+                         Amazon claims
+                         <a href="http://www.defectivebydesign.org/amazon-kindle-swindle">
+                           you don't actually own or control your
+                           ebooks
+                         </a>
+                       </li>
+
+                       <li>
+                         Thanks to DRM, you won't be able to transfer
+                         your books to any other reader
+                       </li>
+                     </ul>
 
-                                                               <div class="avoid">
+                               </div>
 
-                                                                       <img src="images/avoid.png" alt="avoid" />
+                               <div class="buy_avoid">
+                                       <div class="buy_avoid_wrapper">
+                                               <div class="buy">
+                                                       <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
+                                               </div>
 
-                                                               </div>
-                                                       </div>
+                                               <div class="avoid">
+                                                       <img src="images/avoid.png" alt="avoid" />
+                                               </div>
+                                       </div>
                                </div>
+                       </div>
 
+                       <div class="section_wrapper">
+                               <h3 class="main_title">Mobile OS</h3>
 
+                               <div class="free">
+                                       <div class="product">
+                                               <img class="good" src="images/good.png" alt="good"/>
+                                               <img class="product_img" src="http://static.fsf.org/nosvn/images/Replicant_logo.png" alt="Replicant"/>
+                                       </div>
+
+                                       <h4 class="title">Replicant</h4>
+                                       <ul>
+                       <li>
+                         Fully free software mobile OS based on
+                         Android
+                       </li>
+
+                       <li>
+                         <a href="http://redmine.replicant.us/projects/replicant/wiki/ReplicantImages">
+                           Supported devices
+                         </a>
+                         include both phones and tablets
+                       </li>
 
+                       <li>
+                         Used devices can be purchased, so your
+                         dollars won't go to proprietary OS
+                         companies.
+                       </li>
+                     </ul>
 
-                                               <div class="section_wrapper">
-                                                       <h3 class="main_title">Ebooks</h3>
-
-                                                       <div class="free">
-                                                               <div class="product">
-                                                                       <img class="good" src="images/good.png" alt="good"/>
-                                                                       <img class="product_img" src="//static.fsf.org/fsforg/img/ProjectGutenbergPrepped.png" alt="Project Gutenberg"/>
-                                                               </div>
-
-                                                               <h4 class="title">Project Gutenberg</h4>
-
-                      <ul>
-                        <li>
-                          The original purveyor of DRM-free eBooks
-                        </li>
-
-                        <li>
-                          Enjoy the freedom to read your ebooks on any
-                          device
-                        </li>
-
-                        <li>
-                          All of the ebooks on Project Gutenberg,
-                          including classics like Peter Pan and Huck
-                          Finn, are gratis
-                        </li>
-
-                        <li>
-                          Pick out the perfect books for the whole
-                          family at
-                          <a href="http://www.gutenberg.org/">
-                            www.gutenberg.org
-                          </a>
-                          or from other
-                          <a href="http://www.defectivebydesign.org/guide/ebooks">
-                            DRM-free ebooks sites
-                          </a>
-                        </li>
-                      </ul>
-
-                                                               <div class="buy">
-
-                                                                       <a href="http://fedoraproject.org/"><img src="images/buy.png" alt="Buy" /></a>
-
-                                                               </div>
-
-                                                       </div>
-
-                                                       <div class="proprietary">
-                                                               <div class="product">
-                                                                       <img class="bad" src="images/bad.png" alt="bad"/>
-                                                                       <img class="product_img" src="//static.fsf.org/fsforg/img/amazon.jpg" alt="Amazon"/>
-                                                               </div>
-
-                                                               <h4 class="title">Amazon</h4>
-                                                               <ul>
-                        <li>
-                          Amazon can remotely block or delete
-                          individual ebooks or your entire library
-                          with no warning or explanation (they've done
-                          it before--read about it
-                          <a href="http://www.defectivebydesign.org/node/2250">
-                            here
-                          </a>).
-                        </li>
-
-                        <li>
-                          DRM prevents you from sharing your favorite
-                          books with friends, and Amazon uses DRM to
-                          <a href="http://www.defectivebydesign.org/faq#harm">
-                            maintain their monopoly
-                          </a>
-                        </li>
-
-                        <li>
-                          Amazon claims
-                          <a href="http://www.defectivebydesign.org/amazon-kindle-swindle">
-                            you don't actually own or control your
-                            ebooks
-                          </a>
-                        </li>
-
-                        <li>
-                          Thanks to DRM, you won't be able to transfer
-                          your books to any other reader
-                        </li>
-                      </ul>
-
-                                                               <div class="avoid">
-
-                                                                       <img src="images/avoid.png" alt="avoid" />
-
-                                                               </div>
-                                                       </div>
+
+                               </div>
+
+                               <div class="proprietary">
+                                       <div class="product">
+                                               <img class="bad" src="images/bad.png" alt="bad"/>
+                                               <img class="product_img" src="http://static.fsf.org/nosvn/images/iOS.png" alt="Apple iPhone, iPad and Watch"/>
+                                       </div>
+
+                                       <h4 class="title">Apple iPhone, iPad and Watch</h4>
+                                       <ul>
+                       <li>
+                         iOS is a fully proprietary operating system,
+                         giving Apple ultimate control over devices
+                         running it
+                       </li>
+
+                       <li>
+                         Apple uses DRM to block competing software.
+                       </li>
+
+                       <li>
+                         The company claims to take away your freedom
+                         <a href="http://www.defectivebydesign.org/blog/1256">
+                           for your own good
+                         </a>.
+                       </li>
+                     </ul>
+                               </div>
+
+                               <div class="buy_avoid">
+                                       <div class="buy_avoid_wrapper">
+                                               <div class="buy">
+                                                       <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
                                                </div>
-                               
-
-
-                                               <div class="section_wrapper">
-                                                       <h3 class="main_title">Mobile OS</h3>
-
-                                                       <div class="free">
-                                                               <div class="product">
-                                                                       <img class="good" src="images/good.png" alt="good"/>
-                                                                       <img class="product_img" src="//static.fsf.org/nosvn/images/Replicant_logo.png" alt="Replicant"/>
-                                                               </div>
-
-                                                               <h4 class="title">Replicant</h4>
-                                                               <ul>
-                        <li>
-                          Fully free software mobile OS based on
-                          Android
-                        </li>
-
-                        <li>
-                          <a href="http://redmine.replicant.us/projects/replicant/wiki/ReplicantImages">
-                            Supported devices
-                          </a>
-                          include both phones and tablets
-                        </li>
-
-                        <li>
-                          Used devices can be purchased, so your
-                          dollars won't go to proprietary OS
-                          companies.
-                        </li>
-                      </ul>
-
-                                                               <div class="buy">
-
-                                                                       <a href="http://fedoraproject.org/"><img src="images/buy.png" alt="Buy" /></a>
-
-                                                               </div>
-
-                                                       </div>
-
-                                                       <div class="proprietary">
-                                                               <div class="product">
-                                                                       <img class="bad" src="images/bad.png" alt="bad"/>
-                                                                       <img class="product_img" src="//static.fsf.org/nosvn/images/iOS.png" alt="Apple iPhone, iPad and Watch"/>
-                                                               </div>
-
-                                                               <h4 class="title">Apple iPhone, iPad and Watch</h4>
-                                                               <ul>
-                        <li>
-                          iOS is a fully proprietary operating system,
-                          giving Apple ultimate control over devices
-                          running it
-                        </li>
-
-                        <li>
-                          Apple uses DRM to block competing software.
-                        </li>
-
-                        <li>
-                          The company claims to take away your freedom
-                          <a href="http://www.defectivebydesign.org/blog/1256">
-                            for your own good
-                          </a>.
-                        </li>
-                      </ul>
-
-                                                               <div class="avoid">
-
-                                                                       <img src="images/avoid.png" alt="avoid" />
-
-                                                               </div>
-                                                       </div>
+
+                                               <div class="avoid">
+                                                       <img src="images/avoid.png" alt="avoid" />
                                                </div>
-</div>
+                                       </div>
+                               </div>
+                       </div>
+       </div>
+
+                       <!-- Recommended Section -->
+
                        <div class="recommended">
-                               <h2 class="recommend_title">Recomended Products</h2>
+                               <h1 class="topic_title">Recomended Products</h1>
 
                                <div class="recommend_wrapper">
                                        <div class="recommended_product">
                                                </div>
                                        </div>
                                </div>
-                       </div>
+                               <div class="licenses">
+                                       <h1 class="topic_title">Licenses</h1>
 
+                               </div>
+                       </div>
        </body>
-
-       <footer>
-
-
-       </footer>
 </html>
diff --git a/images/Template.png b/images/Template.png
new file mode 100644 (file)
index 0000000..2ac96f3
Binary files /dev/null and b/images/Template.png differ
diff --git a/images/separator.png b/images/separator.png
deleted file mode 100644 (file)
index 4ebee7b..0000000
Binary files a/images/separator.png and /dev/null differ
index 46f7c520b1542f8f83e99b4d1c1d53e9b3ecd593..13b2ea8309b229c16c7d9a3a1ce32cb61913a826 100755 (executable)
@@ -50,7 +50,7 @@ li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4; }
 
 br {margin-bottom: 20em; margin-top: 20em;}
 
-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; }
@@ -105,14 +105,24 @@ 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;
+  text-align: center;
+}
+
+.share a{
+  background-color: #FFE859;
+  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 {
@@ -188,16 +198,19 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
 
 .wrapper,
 .section_wrapper,
+.buy_avoid,
 .recommended {
-  width: 750px;
+  max-width: 750px;
   min-width: 750px;
   margin: auto;
 }
 
 .main_title {
   width: 100%;
-  text-align: center;
+  text-align: left;
+  border-bottom: 1px solid lightgray;
   margin-top: 3em;
+  margin-bottom: 2em;
   display: inline-block;
 }
 
@@ -205,21 +218,29 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
   border-bottom: none;
 }
 
-.product_img,
+.product_img {
+  margin: auto;
+  /* width: 168px; */
+  height: 168px;
+}
+
 .product {
   margin: auto;
-  width: 168px;
+  display: block;
+  /* margin-bottom: 8em; */
+  /* max-width: 168px; */
+  max-height: 168px;
 }
 
 .good,
 .bad {
+  display: none; /* FIXME: This is temporary until I fix the sizes*/
   position: relative;
   top: 175px;
   left: 84px;
   width: 60px;
 }
 
-.buy, .avoid,
 .free, .proprietary {
   text-align: center;
 }
@@ -231,24 +252,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;
@@ -272,3 +314,9 @@ 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%;
+}