Adds styles and updates html markup to stats

app/assets/stylesheets/stats.scss

@@ -1,55 +1,34 @@
-.polls-results-stats {
+.participation-stats {
 
   .sidebar {
     border-right: 1px solid $border;
 
-    > ul {
-      display: block;
-      font-size: rem-calc(20);
+    ul {
+      margin-left: $line-height / 2;
+      margin-top: 0;
       padding: 0;
-
-      ul {
-        font-size: rem-calc(15);
-        list-style-type: none;
-        margin-left: 0.8rem;
-        margin-top: 1rem;
-      }
-
-      li a {
-        color: $link;
-        padding: 0;
-      }
     }
   }
 
-  h2 {
+  .section-title {
+    font-size: rem-calc(24);
     border-bottom: 1px solid $border;
   }
 
-  section section {
-    clear: both;
-    margin-top: rem-calc(30);
-    margin-bottom: rem-calc(30);
-    overflow: hidden;
-  }
-
-  h3 {
-    font-size: rem-calc(20);
-    margin-bottom: rem-calc(12);
+  .stats-group {
+    margin-bottom: $line-height;
+    margin-top: $line-height;
   }
 
   .participants {
-    $background-width: 52px;
-
-    float: left;
-    margin-left: $background-width;
-    margin-right: rem-calc(22);
+    display: inline-block;
+    margin-right: $line-height * 2;
+    padding-left: $line-height * 2.5;
     position: relative;
 
     &::before {
-      // TODO: change image and move it to a non-custom folder
-      content: image-url("custom/polls/stats_man.png");
-      left: -$background-width;
+      content: image-url('stats_man.png');
+      left: 0;
       position: absolute;
     }
 
@@ -61,48 +40,31 @@
     }
 
     .info {
-      color: $dark-gray;
+      color: $text-medium;
       font-style: italic;
     }
+  }
 
-    &.gender {
+  .gender {
 
-      &.male {
-        &::before {
-          content: image-url("custom/polls/stats_man.png");
-        }
-      }
+    &.male::before {
+      content: image-url('stats_man.png');
+    }
 
-      &.female {
-        &::before {
-          content: image-url("custom/polls/stats_woman.png");
-        }
-      }
+    &.female::before {
+      content: image-url('stats_woman.png');
     }
   }
 
-  meter {
-    background: none;
-    background-color: #ebf0f4;
-    border-radius: 0.3rem;
-    display: block;
-    width: 100%;
-  }
-
-  meter::-moz-meter-bar {
-    background: #52a4ee;
-    border-bottom-left-radius: 0.3rem;
-    border-top-left-radius: 0.3rem;
-  }
-
-  meter::-webkit-meter-optimum-value {
-    background: #52a4ee;
-    border-bottom-left-radius: 0.3rem;
-    border-top-left-radius: 0.3rem;
-  }
-
-  meter::-webkit-meter-bar {
+  .progress {
     background: #ebf0f4;
-    border-radius: 0.3rem;
+    border-radius: rem-calc(20);
+    height: $line-height / 2;
+  }
+
+  .progress-meter {
+    background: #52a4ee;
+    border-bottom-left-radius: rem-calc(20);
+    border-top-left-radius: rem-calc(20);
   }
 }