Fixes #22 - Add download page

static/css/main.css

-*
-{
-  font-family: Arial, sans;
-  font-size: 16px;
-}
-
 body
 {
+  font-family: "Source Sans Pro", Arial, sans-serif;
   margin: 0;
   /* Start below fixed navbar */
   padding-top: 4em;
   line-height: 1.5;
 }
 
 #content,
 #blog
 {
   padding-bottom: 2em;
@@ skipping 121 matching lines @@
 .section
 {
   padding: 2em 0;
 }
 
 /******************************************************************************
  * .content
  *****************************************************************************/
 
 .content h1,
+.content .h1,
 .content h2,
 .content h3,
 .content h4,
 .content h5
 {
   font-weight: bold;
   margin: 32px 0 16px 0;
   margin: 2rem 0 1rem 0;
+  line-height: 1.4;
 }
 
 .content h1,
-.content .h1 { font-size: 1.8em; }
-
-.content h2 { font-size: 1.4em; }
-.content h3 { font-size: 1.3em; }
-.content h4 { font-size: 1.2em; }
-.content h5 { font-size: 1.1em; }
+.content .h1 { font-size: 1.4em; }
+.content h2 { font-size: 1.3em; }
+.content h3 { font-size: 1.2em; }
+.content h4 { font-size: 1.1em; }
+.content h5 { font-size: 1em; }
+
+@media(min-width: 576px)
+{
+  .content h1,
+  .content .h1 { font-size: 1.6em; }
+  .content h2 { font-size: 1.4em; }
+  .content h3 { font-size: 1.3em; }
+  .content h4 { font-size: 1.2em; }
+  .content h5 { font-size: 1.1em; }
+}
 
 @media(min-width: 768px)
 {
-  .content h1 { font-size: 2.4em; }
+  .content h1,
+  .content .h1
+  {
+    font-size: 2.4em;
+    line-height: 1.3;
+  }
+
   .content h2 { font-size: 1.6em; }
 }
 
 .content a,
 .content a:visited
 {
   color: #c70d2c;
 }
 
 /* Buttons
@@ skipping 17 matching lines @@
 {
   .button
   {
     display: block;
     width: 100%;
   }
 }
 
 .button.primary
 {
-  color: #fff;
-  background-color: #c70d2c;
+  color: #fff !important;
+  background-color: #c70d2c !important;
   box-shadow: 0px 2px 5px #95989A;
 }
 
 .button.primary:hover
 {
-  background-color: #E00F32;
+  background-color: #E00F32 !important;
 }
 
 .button.primary:active
 {
-  background-color: #AD102A;
+  background-color: #AD102A !important;
 }
 
 .button.accent,
 .button.accent:visited
 {
-  background: #077CA6;
-  color: #fff;
+  background: #077CA6 !important;
+  color: #fff !important;
   margin-left: 2px;
   margin-right: 2px;
 }
 
 .button.accent:hover,
 .button.accent:active,
 .button.accent:focus
 {
   box-shadow: inset 0 0 0 3px #005D80;
 }
@@ skipping 449 matching lines @@
   #footer .column
   {
     display: none;
   }
 
   /* overriding display:none above */
   #footer #social-list
   {
     display: block;
   }
-}
-
-/* Items
- *****************************************************************************/
-
-.item-group,
-.item-body
-{
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-
-.item
-{
-  padding-top: 2em;
-  padding-bottom: 2em;
-}
-
-.item-heading
-{
-  text-transform: uppercase;
 }
 
 /* Video
  ****************************************************************************/
 
 .video-parent
 {
   position: relative;
   display: block;
   width: 100%;
@@ skipping 67 matching lines @@
   width: 80px;
   margin-top: -60px;
   margin-left: -40px;
 }
 
 .hide-disclaimer .video-play
 {
   margin-top: -40px;
 }
 
+/******************************************************************************
+ * .item-group
+ *****************************************************************************/
+
+.item-group
+{
+  text-align: center;
+  padding-top: 3em;
+  padding-bottom: 3em;
+}
+
+.item-group img
+{
+  height: 5em;
+  width: auto;
+}
+
+.item-group h2
+{
+  text-transform: uppercase;
+}
+
+@media (max-width: 575px)
+{
+  .item-group .column
+  {
+    margin-bottom: 3em;
+  }
+
+  .item-group .column:last-of-type
+  {
+    margin-bottom: 0;
+  }
+}
+
+@media (min-width: 576px) and (max-width: 1023px)
+{
+  .item-group
+  {
+    text-align: left;
+  }
+
+  [dir="rtl"] .item-group
+  {
+    text-align: right;
+  }
+
+  .item-group .column
+  {
+    position: relative;
+    width: auto;
+    padding: 0 3em 2em 10.5em;
+    min-height: 7em; /* Height of image plus 2em bottom padding */
+  }
+
+  [dir="rtl"] .item-group .column
+  {
+    padding: 0 10.5em 2em 3em;
+  }
+
+  .item-group .column:last-of-type
+  {
+    padding-bottom: 0;
+    min-height: 6em; /* Height of image */
+  }
+
+  .item-group img
+  {
+    position: absolute;
+    left: 3em;
+    top: 0.5em;
+  }
+
+  [dir="rtl"] .item-group img
+  {
+    left: auto;
+    right: 3em;
+  }
+
+  .item-group h2
+  {
+    margin: 0;
+  }
+}
+
 /* Horizontal List

[ire, 2018/03/14 13:34:37]

Taken from help.eyeo.com. I'm thinking we should add this to website-defaults? 

[juliandoucette, 2018/03/14 17:54:53]

Agreed.

[ire, 2018/03/15 09:38:12]

https://issues.adblockplus.org/ticket/6484

  ******************************************************************************/
 
- .horizontal-list
- {
-   display: inline;
-   list-style: none;
- }
- 
- .horizontal-list li
- {
-   display: inline;
-   list-style: none;
- }
- 
- [dir="rtl"] .horizontal-list
- {
-   padding: 0;
- }
+.horizontal-list
+{
+  display: inline;
+  list-style: none;
+}
+
+.horizontal-list,
+.content .horizontal-list
+{
+  padding: 0;
+}
+
+.horizontal-list li
+{
+  display: inline;
+  list-style: none;
+}