[gimp-web/testing] Implement download buttons as suggested by C R on gimp-developer

[Michael Schumacher <schumaml src gnome org>]

commit 989efc2247d488d3cb61a0dc1ed39edfeae859b9
Author: Michael Schumacher <schumaml gmx de>
Date:   Sun May 31 23:33:20 2015 +0200

    Implement download buttons as suggested by C R on gimp-developer
    
    See https://mail.gnome.org/archives/gimp-developer-list/2015-May/msg00143.html

 downloads/Windows.htrw |   63 +++++++++++++++++++++------------
 style/wgo.css          |   92 +++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 124 insertions(+), 31 deletions(-)
---
diff --git a/downloads/Windows.htrw b/downloads/Windows.htrw
index 3ca5f9d..904aec5 100644
--- a/downloads/Windows.htrw
+++ b/downloads/Windows.htrw
@@ -6,28 +6,46 @@
 The installer contains both 32 bit and 64 bit versions of GIMP, and will install the appropriate one.
 </p>
 
-<ul>
-        <li><a style="font-size: 1.4em;" href="http:Package-GIMP-windows-stable-jernej-torrent">Download 
GIMP 2.8.14</a><br/>
-       Have a look at <a href="https://en.wikipedia.org/wiki/Comparison_of_BitTorrent_clients";>Wikipedia's 
BitTorrent client list</a> (and steer clear of the adware-laden ones).<br/>
-    If the torrent download doesn't work, you can also follow <a 
href="http:Package-GIMP-windows-stable-jernej">this link</a>.</li>
-  <li>This installer package is known to run on:
-    <ul>
-      <li>Windows XP SP3 and XP x64 SP2</li>
-      <li>Windows Vista</li>
-      <li>Windows 7</li>
-      <li>Windows 8 and Windows 8.1</li>
-      <li>Windows Server 2003 SP2 and 2003 R2</li>
-      <li>Windows Server 2008 and 2008 R2</li>
-      <li>Windows Server 2012 and 2012 R2</li>
-    </ul>
-  </li>
-  <li>It <strong>does not run</strong> on:
-    <ul>
-      <li>Anything that came before Windows XP</li>
-      <li>Windows RT</li>
-    </ul>
-  </li>
-</ul>
+<table style="width:100%;padding: 15px; border:0;border-spacing: 10px;border-collapse: separate">
+<tr>
+<td>
+       <a href="http:Package-GIMP-windows-stable-jernej" title="Download GIMP via http">
+       <div class="button_container" style="float:none;">
+               <div class="button_bottom gimp_orange_dark">
+                       <div class="button_subtitle">Via HTTP (.exe)</div>
+               </div>
+               <div class="button_top gimp_orange">
+                       <div class="button_headline">Download GIMP 2.8.14</div>
+               </div>
+       </div>
+       </a>
+</td>
+<td>
+<p>
+This link downloads the GIMP installer for Windows via gimp.org</p>
+</td>
+</tr>
+<tr>
+<td>
+       <a href="http:Package-GIMP-windows-stable-jernej-torrent" title="Download GIMP via BitTorrent">
+       <div class="button_container" style="float:none;">
+               <div class="button_bottom gimp_teal_dark">
+                       <div class="button_subtitle">Via BitTorrent (.torrent)</div>
+               </div>
+               <div class="button_top gimp_teal">
+                       <div class="button_headline">Download GIMP 2.8.14 </div>
+               </div>
+       </div>
+       </a>
+</td>
+<td>
+<p>
+BitTorrent is a peer-to-peer file sharing system. BitTorrent works by downloading GIMP from a distributed 
network of BitTorrent users called "seeders". Choosing this option will download the torrent link file for 
GIMP. You may need to install a torrent client to make use of this link. <a 
href="http://en.wikipedia.org/wiki/BitTorrent"; target="Learn More About BitTorrent">Learn more...</a>
+</p>
+</td>
+</tr>
+
+</table>
 
 <h3>GIMP User Manual</h3>
 
@@ -53,4 +71,3 @@ The installer contains both 32 bit and 64 bit versions of GIMP, and will install
 <li><a 
href="http://download.gimp.org/pub/gimp/help/windows/2.8/2.8.1/gimp-help-2-2.8.1-es-setup.exe";>Spanish</a> 
(24.9 MB)</li>
 <li><a 
href="http://download.gimp.org/pub/gimp/help/windows/2.8/2.8.1/gimp-help-2-2.8.1-sv-setup.exe";>Swedish</a> 
(24.7 MB)</li>
 </ul>
-
diff --git a/style/wgo.css b/style/wgo.css
index d767be9..c813769 100644
--- a/style/wgo.css
+++ b/style/wgo.css
@@ -185,7 +185,7 @@ dt {
   margin-bottom: .5em;
 }
 
-div.book-of-wilber { 
+div.book-of-wilber {
   font-size: large;
   background: #CC9966 url(../images/wilberbook.jpg);
   font-family:  postantiqua, "zapf chancery", "urw chancery l", fantasy;
@@ -227,11 +227,11 @@ p.images, p.logos {
 
 
 
-/* Imageslices: work-around to keep the renderer from reserving 
-space for the descenders of images by making the images blocks 
-instead of inline elements. See 
-http://devedge.netscape.com/viewsource/2002/img-table/ for a 
-description of the problem. Other than that, 'imageslices' should 
+/* Imageslices: work-around to keep the renderer from reserving
+space for the descenders of images by making the images blocks
+instead of inline elements. See
+http://devedge.netscape.com/viewsource/2002/img-table/ for a
+description of the problem. Other than that, 'imageslices' should
 act like 'images'. */
 
 p.imageslices img {
@@ -690,6 +690,82 @@ div.splash.release26 {
 /* fix the flattr button alignment */
 iframe.FlattrButton
 {
-       margin-left: 3px;
-       padding-left: 8px;
+  margin-left: 3px;
+  padding-left: 8px;
+}
+
+/* download buttons */
+
+.button_container {
+  float:left;
+  position:relative;
+  width:300px;
+  height:55px;
+  text-align:center;
+}
+.button_top {
+  position:absolute;
+  width: 100%;
+  height:66%;
+  top:0px;
+  left:0px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  background-color:blue;
+  box-shadow: 1px 1px 1px #000000;
+  text-align:center;
+}
+
+.gimp_orange {background-color:#f57900;}
+.gimp_orange_dark {background-color:#633100;}
+.gimp_teal {background-color:#008080;}
+.gimp_teal_dark {background-color:#00413b;}
+
+.button_bottom {
+  position:absolute;
+  bottom:0px;
+  width:100%;
+  height:50%;
+  left:0px;
+  -webkit-border-top-right-radius: 0;
+  -webkit-border-top-left-radius: 0;
+  -webkit-border-bottom-right-radius: 10px;
+  -webkit-border-bottom-left-radius: 10px;
+  -moz-border-radius-topright: 0;
+  -moz-border-radius-topleft: 0;
+  -moz-border-radius-bottomright: 10px;
+  -moz-border-radius-bottomleft: 10px;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
+  box-shadow: 0px 0px 10px #000000;
+}
+
+.button_headline
+{
+  position:relative;
+  margin:0 auto;
+  color: #FFFFFF;
+  max-width: 95%;
+  padding: 5px;
+  margin-bottom: 1em;
+  font-weight: bold;
+  font-size: 130%;
+  clear: left;
+  font-family: Segoe, Myriad, Tahoma, "Trebuchet MS", Sans-Serif;
+}
+
+.button_subtitle
+{
+  position:relative;
+  margin:0 auto;
+  color: #FFFFFF;
+  bottom:-5px;
+  max-width: 95%;
+  padding: 5px;
+  font-weight: bold;
+  font-size: 80%;
+  font-family: Segoe, Myriad, Tahoma, "Trebuchet MS", Sans-Serif;
 }