Fix highlighted step on tour in IE8

We grey-out the non-current step in the tour so the user knows whether
they’re at step 1, 2, or 3.

This is done using CSS opacity.

IE8 doesn’t support the standard CSS opacity syntax. But it does support
the weird, old, Microsoft-specific `filter:` syntax. So this commit:

- makes the greying out a class rather than an inline style, to reduce
  duplication
- adds the filter syntax so the greying out works in IE8

app/assets/stylesheets/components/banner.scss

@@ -167,6 +167,18 @@
 
   }
 
+  .greyed-out-step {
+
+    $opacity: 0.6;
+
+    opacity: $opacity;
+
+    @include ie-lte(8) {
+      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + ($opacity * 100) + ")";
+    }
+
+  }
+
 }
 
 .banner-warning {

app/templates/main_nav.html

@@ -3,7 +3,7 @@
 {% if help %}
   {% call banner_wrapper(type='tour') %}
       <p class="heading-medium">Try sending yourself this example</p>
-      <div class="grid-row bottom-gutter" {% if help != '1' %}style="opacity: 0.6"{% endif %}>
+      <div class="grid-row bottom-gutter {% if help != '1' %}greyed-out-step{% endif %}">
         <div class="column-one-sixth">
           <p class="heading-large" style="float: left;">1.</p>
         </div>
@@ -13,7 +13,7 @@
           </p>
         </div>
       </div>
-      <div class="grid-row bottom-gutter" {% if help != '2' %}style="opacity: 0.6"{% endif %}>
+      <div class="grid-row bottom-gutter {% if help != '2' %}greyed-out-step{% endif %}">
         <div class="column-one-sixth">
           <p class="heading-large">2.</p>
         </div>
@@ -23,7 +23,7 @@
           </p>
         </div>
       </div>
-      <div class="grid-row bottom-gutter" {% if help != '3' %}style="opacity: 0.6"{% endif %}>
+      <div class="grid-row bottom-gutter {% if help != '3' %}greyed-out-step{% endif %}">
         <div class="column-one-sixth">
           <p class="heading-large">3.</p>
         </div>