download.css: updated due reworked the content

1 files changed, 152 insertions, 99 deletions

diff --git a/english/download/download.css b/english/download/download.css
index 05244147446..c1db15c1dc8 100644
--- a/english/download/download.css
+++ b/english/download/download.css
@@ -34,10 +34,24 @@ h3 {
   padding: 6px;
   border: 2px solid #787878;
   border-radius: 4px;
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.5em;
+  font-style: normal;
+}
+
+.hint-text {
+  text-decoration: underline;
 }
 
+/*
+  Styling elements for centred text and lists in the middle of the site or
+  column.
+*/
 .centered-middle-50 {
-  width: 50%;
+  width: 65%;
   left: 50%;
   top: 50%;
   text-align: left;
@@ -68,132 +82,171 @@ h3 {
   margin-right: 9%;
 }
 
-.tooltip {
-  position: relative;
+/*
+  The CSS styling for all used 'stylish' buttons.
+  Basic data for the classes are taken from http://buttonoptimizer.com/#
+  but got modified a bit.
+*/
+.btn {
   display: inline-block;
-  /*border-bottom: 1px dotted black;*/
-}
-
-.tooltip .tooltiptext {
-  visibility: hidden;
-  width: 120px;
-  bottom: 100%;
-  left: 50%;
-  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
-  background-color: black;
-  color: #fff;
   text-align: center;
-  border-radius: 6px;
-  padding: 5px;
-
-  /* Position the tooltip */
-  position: absolute;
-  z-index: 1;
-}
-
-.tooltip:hover .tooltiptext {
-  visibility: visible;
-}
-
-/* CSS Styling stuff for download buttons
-
-   The following stuff is based on debhome.css line 48 - 85.
-   It's can't be used from this CSS file directly with some override as other
-   style elements get's broken then.
-   As it's need heavily modified anyway the original CSS was taken and adopted.
- */
-
-/* The core classes. */
-.dl-btn-img {
-  display: block;
-  position: absolute;
-  font-size: 1.5em;
-  line-height: 2;
-  background-color: #ededed;
-  margin-top: -25px;
-  border-radius: 20px;
+  margin-top: 0px;
+  padding: 12px 24px;
+  border: 1px solid #0b7e34;
+  border-radius: 8px;
+  background: #12cd55;
+  background: -webkit-gradient(linear, left top, left bottom, from(#12cd55), to(#0b7e34));
+  background: -moz-linear-gradient(top, #12cd55, #0b7e34);
+  background: linear-gradient(to bottom, #12cd55, #0b7e34);
+  -webkit-box-shadow: #11be4e 1px -1px 10px 0px;
+  -moz-box-shadow: #11be4e 1px -1px 10px 0px;
+  box-shadow: #11be4e 1px 0px 21px 0px;
+  text-shadow: #074f21 1px 1px 1px;
+  font: normal normal bold 20px /*arial*/;
+  width: 350px;
+  font-size: 2.3em;
+}
+
+.btn-info {
+  font-size: 0.55em;
+  font-weight: initial;
+  font-style: normal;
+  text-align: center;
+  margin: 0px -30px 0px 0px;
+  color: #ffffff;
+  text-decoration: none;
 }
 
-.dl-btn-img a {
+/* Don't use any decoration for href */
+a.btn {
   color: white;
-  font-weight: bold;
   text-decoration: none;
-  border: 0.15em solid #339900;
-  display: block;
-  background: transparent url('../Pics/emblem-downloads.png') no-repeat 15px 5px;
-  padding-left: 30px;
-  padding-right: 1em;
-  color:#339900;
-  border-radius: 20px;
-}
-
-.dl-btn-img a em {
-  font-size: 0.75em;
-  font-weight: normal;
-  clear: right;
-  line-height: 0.5em;
-  font-style: normal;
-  display: block;
-  margin-bottom: 1em;
-  border-radius: 20px;
 }
 
-.dl-btn-img-nonfree a:hover {
-  color: white;
+a.btn:hover {
+  color: #e7dfdf;
 }
 
-.dl-btn-img-free a:hover em {
+.btn:hover, .btn:focus {
+  border: 1px solid #0e9e41;
+  background: #16f666;
+  background: -webkit-gradient(linear, left top, left bottom, from(#16f666), to(#0d973e));
+  background: -moz-linear-gradient(top, #16f666, #0d973e);
+  background: linear-gradient(to bottom, #16f666, #0d973e);
   color: white;
+  text-decoration: none;
 }
 
-/* The overidden elements for the installer and the LiveCD varaiants. */
-.dl-btn-img-free {
-  left: 5%;
-  right: 78%
+.btn:active {
+  background: #0b7e34;
+  background: -webkit-gradient(linear, left top, left bottom, from(#0b7e34), to(#0b7e34));
+  background: -moz-linear-gradient(top, #0b7e34, #0b7e34);
+  background: linear-gradient(to bottom, #0b7e34, #0b7e34);
+  color: white;
 }
 
-.dl-btn-img-nonfree {
-  left: 23%;
-  right: 56%
+.btn:before{
+  content:  "\0000a0";
+  display: inline-block;
+  height: 30px;
+  width: 30px;
+  line-height: 24px;
+  margin: 0 4px 0px -10px;
+  position: relative;
+  top: 0px;
+  left: -10px;
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB1UlEQVRIibXVMWgUURAG4O82p0UIQUQsDkEEETuDjTYGbUUkVbCyEewsBEshHGIhCOHQ1lqtRKI22qRJJxYWASsRSzEiRgmRi8XOmnXvvc0pcWDYeTPz/pk3O/NeB4X/SBX4MGMf7obcPEGx23JbADiOAVaxEbwaumPGoCLDXdwMwHUs4U7w89BthE+3BWfkWNX6HrbwEL2EXw+Pw2eQOH22RDAfGxcz9qL2rRKZTwXo1JQHcB6HcAVfcAo/EwHqtBevMYkH+IgX+FSPdAlrkUnFl1MZZeSrjb1rgQlmsYllzCh/2Ensb8m6GeBg7OkGxnJgznbwEkdxAt9aQP+GpvAW7yjbbbElu3+VB1gvEobc6C/YrvHCGP6/gVcwh2n5Ycm1ao6nA3OlwC3l0Cz58yfP1bJKXYZ1/dD29M8oJ70X2Nk2/RFBquz7NVu/EWxfgI60aTccHuEVLigH7QOu4UmU8EymRLeV7XxROaj3lUP3DJ+r5HK36SRu4E3LCTYj26c4LdFRXaNU1fU77gbnaE+LbQgTyvtoKyJ2GnwY13EOZ2MtbEdC/x5fE3sr3vFFq5emyf2E/4g8zqOfCtLspCzVp7mNmz95J//ki9Zcp8o1Vlkq+RdF139qw2G1QgAAAABJRU5ErkJggg==") no-repeat left center transparent;
+  background-size: 100% 100%;
+}
+
+.btn-non-free {
+  border: 1px solid #225594;
+  background: #40a0ff;
+  background: -webkit-gradient(linear, left top, left bottom, from(#40a0ff), to(#225594));
+  background: -moz-linear-gradient(top, #40a0ff, #225594);
+  background: linear-gradient(to bottom, #40a0ff, #225594);
+  -webkit-box-shadow: #1169c0 1px -1px 21px 0px;
+  -moz-box-shadow: #1169c0 1px -1px 10px 0px;
+  text-shadow: #143257 1px 1px 1px;
+}
+
+.btn-non-free:hover, .btn-non-free:focus {
+  border: 1px solid #225594;
+  background: #4dc0ff;
+  background: -webkit-gradient(linear, left top, left bottom, from(#4dc0ff), to(#2966b2));
+  background: -moz-linear-gradient(top, #4dc0ff, #2966b2);
+  background: linear-gradient(to bottom, #4dc0ff, #2966b2);
+  color: #ffffff;
+  text-decoration: none;
 }
-
-.dl-btn-live-free {
-  left: 47%;
-  right: 35%
+.btn-non-free:active {
+  background: #225594;
+  background: -webkit-gradient(linear, left top, left bottom, from(#225594), to(#225594));
+  background: -moz-linear-gradient(top, #225594, #225594);
+  background: linear-gradient(to bottom, #225594, #225594);
 }
 
-.dl-btn-live-nonfree {
-  left: 67%;
-  right: 15%
+/* The third extra button for more downloads.*/
+.btn-more-img {
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  padding: 12px 24px;
+  border: 1px solid #5e6270;
+  border-radius: 8px;
+  background: #b2b5bf;
+  background: -webkit-gradient(linear, left top, left bottom, from(#b2b5bf), to(#969cb3));
+  background: -moz-linear-gradient(top, #b2b5bf, #969cb3);
+  background: linear-gradient(to bottom, #b2b5bf, #969cb3);
+  text-shadow: #3b3d46 1px 1px 1px;
+  font: normal normal bold 20px/* arial*/;
+  color: #ffffff;
+  text-decoration: none;
 }
 
-.dl-btn-img-nonfree a {
-  border: 0.15em solid #f92908;
+a.btn-more-img {
+  color: white;
+  text-decoration: none;
 }
 
-.dl-btn-img-free a:hover {
-  background-color: #339900; /* green */
-	color: white;
+a.btn-more-img:hover {
+  color: black;
 }
 
-.dl-btn-img-nonfree a:hover {
-  background-color: #d2351c; /* red */
+.btn-more-img:hover,
+.btn-more-img:focus {
+  border: 1px solid #757a8c;
+  background: #d6d9e5;
+  background: -webkit-gradient(linear, left top, left bottom, from(#d6d9e5), to(#7d7e84));
+  background: -moz-linear-gradient(top, #d6d9e5, #7d7e84);
+  background: linear-gradient(to bottom, #d6d9e5, #7d7e84);
+  color: #ffffff;
+  text-decoration: none;
 }
-
-.dl-btn-img-free a em {
-  color: #339900;
+.btn-more-img:active {
+  background: #6b6d73;
+  background: -webkit-gradient(linear, left top, left bottom, from(#6b6d73), to(#969cb3));
+  background: -moz-linear-gradient(top, #6b6d73, #969cb3);
+  background: linear-gradient(to bottom, #6b6d73, #969cb3);
 }
-
-.dl-btn-img-nonfree a em {
-  color: #f92908;
+.btn-more-img:before{
+  content:  "\0000a0";
+  display: inline-block;
+  height: 24px;
+  width: 24px;
+  line-height: 24px;
+  margin: 0 4px -6px -4px;
+  position: relative;
+  top: 0px;
+  left: 0px;
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABrklEQVRIia3WzW4TQQwH8F9CQFG0qqpKVEhEkXgA4MCZA0/HU3CscuHYN6gQ6oV3CJxAag+E71ZZDuNJJptskq1qyRrvjsde/+2xF/qY4Ay/UXfkOaYYh60mm2BWHLjBzw58E+dmYWtpOK9nofAOT3CEqgOfxtk6bCmN9yLEIZ7iW2wsYn2Egf10jC+4xjN8LzfrCLUqwpsErlcdoMoQX0UkGa4NB2PrObkrz8LWhoOpVU5OWiDp75BPrHIybToYRoh1KG4ru0P4VKqueemdlNBhyNexLoK7yL/wD1XTQZMWW+QBPuByz9mlchu1OR/iBUYaF2rbuV0RtIXfSWffJSphybkpv7wqdP/gtmngUIguJFjy++zsa6HzCW90iCC3i7yOtuiU77KtJoxr96CyuvZt1ElngB9SyCOpfjPtK+GDdPo4l8J7K3XFTPdSRbQ3tzYaSEn/uENnDcZyZOY+VNvdawbBbfsbDjId2Wx2mbrIy2b3QJpqGZK/eInneBww9KTJ9jDWffKxlM9XeN+zXuuknFwEbLdSV+xCecx+xutmiPl5LA2Lubv9xuSR6T/zur71snglUwAAAABJRU5ErkJggg==") no-repeat left center transparent;
+  background-size: 100% 100%;
 }
 
-.dl-btn-img-free a:hover em {
-  background-color: #339900;
+.btn-more-images {
+  margin-top: -1.5em;
 }
 
-.dl-btn-img-nonfree a:hover em {
-  background-color: #d2351c;
-  color: white;
+.btn-more-livecds {
+  margin-top: 0.8em;
 }
-