Fix ticks and crosses on team page in IE8

The ticks and crosses on the team page are served bigger than actual
size (128×128px). They are then resized using CSS3 `background-size`
to their displayed size (19px).

The reason for doing this is so they display crisply on retina screens.

IE8 doesn’t support `background-size` (see
http://caniuse.com/#feat=background-img-opts). This means that the ticks
and crosses get show at their original size (way too big).

This commit adds resized versions of the ticks and crosses which are
then served to these older browsers only.

app/assets/stylesheets/components/banner.scss

@@ -30,6 +30,9 @@
 .banner-with-tick {
   padding: $gutter-half ($gutter + $gutter-half);
   background-image: file-url('tick-white.png');
+  @include ie-lte(8) {
+    background-image: file-url('tick-white-16px.png');
+  }
   background-size: 19px;
   background-repeat: no-repeat;
   background-position: $gutter-half $gutter-half;

app/assets/stylesheets/components/tick-cross.scss

@@ -1,23 +1,41 @@
 %tick-cross {
+
   @include core-16;
   display: inline-block;
   background-size: 19px 19px;
   background-repeat: no-repeat;
   background-position: 0 0;
   padding: 1px 0 0 25px;
+
+  @include ie-lte(8) {
+    background-position: 0 3px;
+  }
+
 }
 
 .tick-cross {
 
   &-tick {
+
     @extend %tick-cross;
     background-image: file-url('tick.png');
+
+    @include ie-lte(8) {
+      background-image: file-url('tick-16px.png');
+    }
+
   }
 
   &-cross {
+
     @extend %tick-cross;
-    background-image: file-url('cross-grey.png');
     color: $secondary-text-colour;
+    background-image: file-url('cross-grey.png');
+
+    @include ie-lte(8) {
+      background-image: file-url('cross-grey-16px.png');
+    }
+
   }
 
   &-list {