download-dl: rework the download links

Adding two CSS download buttons for the installer images but also for
the LiveCD part. As we want to also promote the non-free variants this
finally ends in four required buttons.

The CSS will need some tweeks in the end as it loosk not that as wanted
an smaller screens. But this is styling the layout, not the content
itself.

1 files changed, 53 insertions, 12 deletions

diff --git a/english/download/index.wml b/english/download/index.wml
index cf6833ded08..7ad9b122038 100644
--- a/english/download/index.wml
+++ b/english/download/index.wml
@@ -31,41 +31,82 @@
   <div align="center">
     <h3>Step 1 - Download</h3>
   </div>
-
+  <!-- The left side with the download option for the installer images. -->
   <div class="item col50">
     <div align="center">
       <p><strong>Download an installation image</strong></p>
       <p><img src="img/download.png" alt="[Pic: Debian Installer]"></p>
-      <p><strong>Current Debian stable version: <current_release_short></strong></p><br>
+      <br/>
+      <!-- The official Debian variant with not included non-free firmware. -->
       <div class="col50">
         <div align="center">
-          <p>&#9654; <a href="<stable-images-url/>/amd64/iso-cd/debian-<current-tiny-cd-release-filename/>-amd64-netinst.iso">64-bit PC Network installer</a></p>
+          <span class="dl-btn-img dl-btn-img-free">
+            <a href="<stable-images-url/>/amd64/iso-cd/debian-<current-tiny-cd-release-filename/>-amd64-netinst.iso">Download Debian <current_release_short>
+              <em>(64-bit PC Network)</em>
+            </a>
+          </span>
         </div>
       </div>
+
+      <!-- The non official Debian variant with non-free firmware. -->
       <div class="col50">
         <div align="center">
-          <p>&#9654; <a href="<stable-images-url/>/amd64/iso-cd/debian-<current-tiny-cd-release-filename/>-amd64-netinst.iso">64-bit PC Network installer (non-free)</a></p>
-        </div>
+          <span class="dl-btn-img dl-btn-img-nonfree">
+            <a href="<stable-images-url/>/amd64/iso-cd/debian-<current-tiny-cd-release-filename/>-amd64-netinst.iso">Download Debian <current_release_short>
+              <em>(64-bit PC Network non-free)</em>
+            </a>
+          </span>
+         </div>
       </div>
     </div>
-    <div class="item">
-      <div align="center">
-        <p><span style="margin-left:16px; margin-right:16px">These are the most
-          commonly used images. There are also <a href="more_installer">more images</a>
-          available (e.g DVD images and images for other architectures).</span>
+    <div align="center">
+      <div class="col50-text">
+        <p>These are the most commonly used variants of images. Both images
+          are network based installations. There existing
+          <a href="more_installer">more images</a> you can choose from (e.g
+          DVD images and images for other architectures).
         </p>
       </div>
     </div>
   </div>
+  <!-- END of the left side with the download option for the installer images. -->
+
 
+  <!-- The right side with the download option for the Live CD images. -->
   <div class="item col50 lastcol">
     <div align="center">
       <p><strong>Download a live image</strong></p>
       <p><img src="img/try1.png" alt="[Pic: Debian Live]"></p>
-      <p><a href="<stable-images-url/>/amd64/iso-cd/debian-<current-tiny-cd-release-filename/>-amd64-netinst.iso">Debian <current_release_short></a>
+      <br/>
+      <!-- The official Debian variant with not included non-free firmware. -->
+      <div class="col50">
+        <div align="center">
+          <span class="dl-btn-img dl-btn-img-free dl-btn-live-free"><a href="<stable-images-url/>/amd64/iso-cd/debian-<current-tiny-cd-release-filename/>-amd64-netinst.iso">Download Debian <current_release_short><em>(64-bit LiveCD)</em></a> </span>
+        </div>
+      </div>
+
+      <!-- The non official Debian variant with non-free firmware. -->
+      <div class="col50">
+        <div align="center">
+          <span class="dl-btn-img dl-btn-img-nonfree dl-btn-live-nonfree"><a href="<stable-images-url/>/amd64/iso-cd/debian-<current-tiny-cd-release-filename/>-amd64-netinst.iso">Download Debian <current_release_short><em>(64-bit LiveCD non-free)</em></a> </span>
+         </div>
+      </div>
+    </div>
+    <div align="center">
+      <div class="col50-text">
+        <p>The two links pointing also to the most typically used LiveCD images,
+          currently this is based on the architecture amd64. Also here you
+          have the  possibility to grab <a href="more_installer">more CD
+          images</a> for other possible Desktop Environments and the i386
+          architecture available. Please note that LiveCD images are only
+          provide for the amd64 and i386 architecture! They can be also used
+          on a USB stick.
+        </p>
+      </div>
     </div>
   </div>
-</div>
+  <!-- END of right download section for the LiveCD images. -->
+</div> <!-- END of download section. -->
 
 <!-- 2 - Verification -->
 <div align="center">