Fixes #33 - Adjustments to features section of index page

static/css/index.css

Index: static/css/index.css
===================================================================
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -194,16 +194,93 @@
 
   #media-list img
   {
     margin: 0 2em;
   }
 }
 
 /******************************************************************************
+ * #features
+ *****************************************************************************/
+
+#features
+{
+  text-align: center;
+  padding-top: 3em;
+  padding-bottom: 3em;
+}
+
+#features h2
+{
+  text-transform: uppercase;
+}
+
+@media (max-width: 575px)
+{
+  #features .column
+  {
+    margin-bottom: 3em;
+  }
+
+  #features .column:last-of-type
+  {
+    margin-bottom: 0;
+  }
+}
+
+@media (min-width: 576px) and (max-width: 1023px)
+{
+  #features
+  {
+    text-align: left;
+  }
+
+  [dir="rtl"] #features
+  {
+    text-align: right;
+  }
+
+  #features .column
+  {
+    position: relative;
+    width: auto;
+    padding: 0 3em 2em 10.5em;
+  }
+
+  [dir="rtl"] #features .column
+  {
+    padding: 0 10.5em 2em 3em;
+  }
+
+  #features .column:last-of-type
+  {
+    padding-bottom: 0;
+  }
+
+  #features img
+  {
+    position: absolute;
+    left: 3em;
+    top: 0.5em;
+  }
+
+  [dir="rtl"] #features img
+  {
+    left: auto;
+    right: 3em;
+  }
+
+  #features h2
+  {
+    margin: 0;
+  }
+}
+
+/******************************************************************************
  * #abb-notification
  *****************************************************************************/
 
 #abb-notification h2,
 #abb-notification h3
 {
   text-transform: uppercase;
 }