Update SCSS to handle right-to-left layout.

Adds a '$direction' parameter that can be used to switch all
layout to either left or right.

18 files changed, 378 insertions, 352 deletions

diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
index 485f0ffc2..ecd729364 100644
--- a/web/cobrands/fixmystreet.com/base.scss
+++ b/web/cobrands/fixmystreet.com/base.scss
@@ -6,7 +6,6 @@
 
 @import "../sass/h5bp";
 @import "_colours";
-@import "../sass/mixins";
 @import "compass";
 @import "../sass/base";
 
@@ -16,9 +15,17 @@
 
 #country_banner {
     display: none;
-    color: $primary_text; background: $primary;
-    p#international_message { margin: auto; padding: 0.5em 2em; max-width: 40em; text-align: center; }
-    #message_close { float: right; }
+    color: $primary_text;
+    background: $primary;
+    p#international_message {
+        margin: auto;
+        padding: 0.5em 2em;
+        max-width: 40em;
+        text-align: center;
+    }
+    #message_close {
+        float: $right;
+    }
 }
 
 #site-logo {
@@ -56,11 +63,11 @@
   padding-top: 0.4em; // extra padding between buttons and previous paragraph
 
   a {
-    float: left;
-    margin: 1em 0.6em 0 0;
+    float: $left;
+    margin: flip(1em 0.6em 0 0, 1em 0 0 0.6em);
 
     &:last-child {
-      margin-right: 0;
+      margin-#{$right}: 0;
     }
   }
 
@@ -79,9 +86,9 @@
   @include pie-clearfix;
 
   .goodies-preview {
-    float: right;
-    margin-left: 1em;
-    margin-right: -0.5em;
+    float: $right;
+    margin-#{$left}: 1em;
+    margin-#{$right}: -0.5em;
   }
 }
 
diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss
index 23f3c575d..fed24af53 100644
--- a/web/cobrands/fixmystreet.com/layout.scss
+++ b/web/cobrands/fixmystreet.com/layout.scss
@@ -98,11 +98,6 @@ body.mappage {
     ul#mysoc-menu {
         background: #515151;
         margin-top: -4px;
-        li a {
-            &#mysoc-logo {
-                background-position: 0px 15px;
-            }
-        }
     }
 }
 
@@ -147,13 +142,13 @@ body.fullwidthpage {
         }
         a#geolocate_link {
             font-family: MuseoSans,Helmet,Freesans,sans-serif;
-            background: url(images/locate-me.png) no-repeat;
+            background: url(images/locate-me.png) $left 0 no-repeat;
             height: 34px;
-            padding-left: 24px;
+            padding-#{$left}: 24px;
             margin-top: 0.25em;
             @media only screen and (min-resolution: 320dpi),
             only screen and (-webkit-min-device-pixel-ratio: 2) {
-                background: url(images/locate-me@2.png) no-repeat;
+                background-image: url(images/locate-me@2.png);
             }
         }
     }
@@ -222,13 +217,13 @@ body.twothirdswidthpage {
         list-style: none;
         padding: 0px;
         margin: 0px;
-        float:left;
+        float: $left;
         li {
           list-style: none;
           display: inline;
           margin: 0px;
           padding: 0px;
-          float:left;
+          float: $left;
           a,
           span {
             display: block;
@@ -244,7 +239,7 @@ body.twothirdswidthpage {
         display: block;
       }
       #footer-help-nav {
-        float: right;
+        float: $right;
       }
     }
 }
@@ -256,13 +251,13 @@ body.twothirdswidthpage {
 
 .next-steps__step {
   font-family: MuseoSans,Helmet,Freesans,sans-serif;
-  float: left;
+  float: $left;
   width: 33%;
   padding: 1.8em;
 
   & + .next-steps__step {
     border-top: none;
-    border-left: 1px solid #ede8c9;
+    border-#{$left}: 1px solid #ede8c9;
   }
 
   h2 {
@@ -316,9 +311,9 @@ body.unresponsive-council {
 .unresponsive-council-cta {
     margin: 1.5em 0;
     max-width: 20em;
-    padding-right: 6em;
+    padding-#{$right}: 6em;
     background-image: url(images/unresponsive-council-cta-arrow.png);
-    background-position: right center;
+    background-position: $right center;
     background-repeat: no-repeat;
 
     @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
diff --git a/web/cobrands/fixmystreet.com/posters.scss b/web/cobrands/fixmystreet.com/posters.scss
index 8c4f0c1ed..ee8da9d32 100644
--- a/web/cobrands/fixmystreet.com/posters.scss
+++ b/web/cobrands/fixmystreet.com/posters.scss
@@ -1,4 +1,5 @@
 @import "_colours";
+@import "../sass/mixins";
 
 body.goodies {
   .content {
@@ -23,14 +24,14 @@ body.goodies {
   }
 
   .pack-preview {
-    float: right;
-    margin: 0 0 1em 1em;
+    float: $right;
+    margin: flip(0 0 1em 1em, 0 1em 1em 0);
     max-width: 33%;
   }
 
   .download-button {
     display: inline-block;
-    padding: 0.7em 1.2em 0.5em 1.2em;
+    padding: 0.7em 1.2em 0.5em;
     font-weight: bold;
     line-height: 1em;
     background-color: $primary;
@@ -43,19 +44,19 @@ body.goodies {
       width: 16px;
       height: 16px;
       background: transparent url(images/arrow-down-16px-16px.png) 0 0 no-repeat;
-      margin-right: 0.5em;
+      margin-#{$right}: 0.5em;
       vertical-align: -0.1em;
     }
   }
 
   .badge-preview {
-    float: right;
+    float: $right;
     margin-top: -3em;
-    margin-left: 1em;
+    margin-#{$left}: 1em;
   }
 
   .downloads {
-    margin-left: 0;
+    margin-#{$left}: 0;
 
     li {
       list-style: none;
@@ -89,7 +90,7 @@ body.goodies {
       overflow: auto;
 
       li {
-        float: left;
+        float: $left;
         width: 50%;
       }
 
@@ -100,7 +101,7 @@ body.goodies {
 
       li:nth-child(even) {
         width: 48%;
-        float: right;
+        float: $right;
       }
     }
   }
@@ -111,7 +112,7 @@ body.goodies {
       .container .content {
         // overloaded selector to match default .content styling
         width: auto;
-        padding: 1.5em 2em 1.5em 16em;
+        padding: flip(1.5em 2em 1.5em 16em, 1.5em 16em 1.5em 2em);
 
         & > :last-child {
           margin-bottom: 0;
@@ -120,7 +121,7 @@ body.goodies {
 
       .content {
         .sticky-sidebar {
-          left: 0;
+          #{$left}: 0;
           top: 0;
           bottom: 0;
           z-index: 1;
diff --git a/web/cobrands/fixmystreet/dashboard.scss b/web/cobrands/fixmystreet/dashboard.scss
index ca862aaa4..fb4fd7a8a 100644
--- a/web/cobrands/fixmystreet/dashboard.scss
+++ b/web/cobrands/fixmystreet/dashboard.scss
@@ -1,3 +1,5 @@
+@import "../sass/_mixins";
+
     select {
         width: auto;
     }
@@ -15,17 +17,18 @@
     }
 
     th {
-        text-align:left;
+        text-align: $left;
         &[scope=col] {
-            border-left:1px solid #ccc;
-            padding:10px 0 10px 10px;
-            font-weight:bold;
+            border-#{$left}: 1px solid #ccc;
+            padding: flip(10px 0 10px 10px, 10px 10px 10px 0);
+            font-weight: bold;
         }
 
         &[scope=row] {
-            font-weight: normal;text-align:left;
-            border-top:1px solid #ddd;
-            padding-left:10px;
+            font-weight: normal;
+            text-align: $left;
+            border-top: 1px solid #ddd;
+            padding-#{$left}: 10px;
         }
 
         abbr[title] {
@@ -35,9 +38,9 @@
 
     td {
         width:10%;
-        border-left:1px solid #ccc;
-        border-top:1px solid #ddd;
-        padding-left:10px;
+        border-#{$left}: 1px solid #ccc;
+        border-top: 1px solid #ddd;
+        padding-#{$left}: 10px;
     }
 
     tr.subtotal {
@@ -54,7 +57,7 @@
 
     #reports{
         th {
-            padding-left: 20px;
+            padding-#{$left}: 20px;
             border-bottom: none;
         }
         date {
@@ -70,7 +73,7 @@
         padding:0 1em;
 
         p {
-            float:left;
+            float: $left;
             padding:0 1em;
             width:25%;
             font-size:0.75em;
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index fc09ea84a..30a6ac7cd 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -127,7 +127,7 @@ $(function(){
     }
 
     //show/hide notes on mobile
-    $('.mobile #report-a-problem-sidebar').after('<a href="#" class="rap-notes-trigger button-right">' + translation_strings.how_to_send + '</a>').hide();
+    $('.mobile #report-a-problem-sidebar').after('<a href="#" class="rap-notes-trigger button-fwd">' + translation_strings.how_to_send + '</a>').hide();
     $('.rap-notes-trigger').click(function(e){
         e.preventDefault();
         //check if we've already moved the notes
@@ -138,7 +138,7 @@ $(function(){
         }else{
             //if not, move them and show, hiding .content
             $('.content').after('<div class="content rap-notes"></div>').hide();
-            $('#report-a-problem-sidebar').appendTo('.rap-notes').show().after('<a href="#" class="rap-notes-close button-left">' + translation_strings.back + '</a>');
+            $('#report-a-problem-sidebar').appendTo('.rap-notes').show().after('<a href="#" class="rap-notes-close button-back">' + translation_strings.back + '</a>');
         }
         $('html, body').scrollTop($('#report-a-problem-sidebar').offset().top);
         location.hash = 'rap-notes';
diff --git a/web/cobrands/fixmystreet/images/chevron-grey-left.svg b/web/cobrands/fixmystreet/images/chevron-grey-left.svg
new file mode 100644
index 000000000..650eeac26
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/chevron-grey-left.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="33">
+    <polygon points="26,0 13,0 0,16 13,32 26,32 13,16" fill="#d1d1d1"/>
+</svg>
diff --git a/web/cobrands/fixmystreet/images/chevron-grey-right.svg b/web/cobrands/fixmystreet/images/chevron-grey-right.svg
new file mode 100644
index 000000000..18432eb3b
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/chevron-grey-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="33">
+    <polygon points="0,0 13,0 26,16 13,32 0,32 13,16" fill="#d1d1d1"/>
+</svg>
diff --git a/web/cobrands/fixmystreet/images/chevron-white-left-on-green.gif b/web/cobrands/fixmystreet/images/chevron-white-left-on-green.gif
new file mode 100644
index 000000000..e8e6f79d8
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/chevron-white-left-on-green.gif
diff --git a/web/cobrands/fixmystreet/images/chevron-white-left.svg b/web/cobrands/fixmystreet/images/chevron-white-left.svg
new file mode 100644
index 000000000..95f9fd8a8
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/chevron-white-left.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="33">
+    <polygon points="26,0 13,0 0,16 13,32 26,32 13,16" fill="#ffffff"/>
+</svg>
diff --git a/web/cobrands/fixmystreet/images/ie_green_chevron.gif b/web/cobrands/fixmystreet/images/chevron-white-right-on-green.gif
index 341ac1eeb..341ac1eeb 100644
--- a/web/cobrands/fixmystreet/images/ie_green_chevron.gif
+++ b/web/cobrands/fixmystreet/images/chevron-white-right-on-green.gif
diff --git a/web/cobrands/fixmystreet/images/chevron-white-right.svg b/web/cobrands/fixmystreet/images/chevron-white-right.svg
new file mode 100644
index 000000000..43f321782
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/chevron-white-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="33">
+    <polygon points="0,0 13,0 26,16 13,32 0,32 13,16" fill="#ffffff"/>
+</svg>
diff --git a/web/cobrands/fixmystreet/images/triangle-grey-left.svg b/web/cobrands/fixmystreet/images/triangle-grey-left.svg
new file mode 100644
index 000000000..26ea59a23
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/triangle-grey-left.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="4" height="7">
+    <polygon points="3,0 0,3 3,6" fill="#f1f1f1"/>
+</svg>
diff --git a/web/cobrands/fixmystreet/images/triangle-grey-right.svg b/web/cobrands/fixmystreet/images/triangle-grey-right.svg
new file mode 100644
index 000000000..8ea307b21
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/triangle-grey-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="4" height="7">
+    <polygon points="0,0 3,3 0,6" fill="#f1f1f1"/>
+</svg>
diff --git a/web/cobrands/sass/_admin.scss b/web/cobrands/sass/_admin.scss
index a668712ae..b7c208773 100644
--- a/web/cobrands/sass/_admin.scss
+++ b/web/cobrands/sass/_admin.scss
@@ -23,8 +23,8 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
             color: white;
             background-color: $table_heading_bg_col;
             border-bottom: 2px solid $table_heading_underline_col;
-            border-left: 1px solid $table_heading_border_col;
-            border-right: 1px solid $table_heading_border_col;
+            border-#{$left}: 1px solid $table_heading_border_col;
+            border-#{$right}: 1px solid $table_heading_border_col;
             a:link, a:visited {
                 color: white;
             }
@@ -35,10 +35,10 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
         }
         tr.filter-row td {
             display: none; /* TODO: reveal when filtering is implemented */
-            padding: 4px 4px 4px 40px;
+            padding: flip(4px 4px 4px 40px, 4px 40px 4px 4px);
             background-color: $button_bg_col;
             background-image: url('search-icon-white.png');
-            background-position: 14px center;
+            background-position: flip(14px, right) center;
             background-repeat: no-repeat;
             border-bottom: 2px solid $table_border_color;
         }
@@ -57,7 +57,7 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
         }
     }
     .no-bullets {
-      margin-left: 0;
+      margin-#{$left}: 0;
       > li {
         list-style: none;
       }
@@ -78,7 +78,7 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
     font-size: 90%;
     border-style: solid;
     border-width: 1px;
-    border-left-width: 1em;
+    border-#{$left}-width: 1em;
     margin-bottom: 1em;
   }
   .fms-admin-warning {
@@ -98,10 +98,10 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
     font-size: 80%; // little question marks are small
     cursor: pointer;
     display: block;
-    float:left;
+    float: $left;
     overflow: hidden;
     padding: 0.2em;
-    margin-right: 0.666em;
+    margin-#{$right}: 0.666em;
     text-align: center;
     color: #fff;
     font-weight: bold;
@@ -115,7 +115,7 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
     &:before { content: "?" }
     &.admin-hint-show {
       font-size: 90%;
-      text-align: left;
+      text-align: $left;
       display: block;
       float:none;
       margin:1em 0;
@@ -128,7 +128,7 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
         color: #000;
         border-style: solid;
         border-width: 1px;
-        border-left-width: 1em;
+        border-#{$left}-width: 1em;
         border-color: #f93;
         padding:1em;
         margin: 0;
@@ -136,9 +136,9 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
     }
   }
   .admin-offsite-link {
-    padding-right: 12px;
+    padding-#{$right}: 12px;
     background-image: url(../../i/external-link.png);
-    background-position: right top;
+    background-position: $right top;
     background-repeat: no-repeat;
   }
 }
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 32626d1d7..a660bf928 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -6,6 +6,8 @@ $heading-font: 'Museo300-display', MuseoSans, Helmet, Freesans, sans-serif !defa
 $image-sprite: '/cobrands/fixmystreet/images/sprite.png' !default;
 $menu-image: 'menu-white' !default;
 
+@import "_mixins";
+
 body {
   font-family: $body-font;
   margin:0;
@@ -19,7 +21,7 @@ body {
 p {
   font-size: 1em;
   font-weight: normal;
-  margin:0 0 1em 0;
+  margin: 0 0 1em;
 }
 
 small{
@@ -72,7 +74,7 @@ h4 {
 ul, ol {
   font-size: 1em;
   margin-bottom: 2em;
-  margin-left: 2em;
+  margin-#{$left}: 2em;
   padding:0;
 }
 
@@ -97,13 +99,13 @@ ol.big-numbers {
   > li {
     position: relative;
     list-style: none;
-    padding:0 0 0 2.5em;
+    padding: flip(0 0 0 2.5em, 0 2.5em 0 0);
     margin-bottom:2em;
     &:before {
       content: counter(li); // set the content to be whatever the 'li' var is
       counter-increment: li; // add to the counter var
       position: absolute;
-      left: 0;
+      #{$left}: 0;
       top:-0.2em;
       color:#ccc;
       line-height:1;
@@ -127,7 +129,7 @@ dl {
   dd {
     font-weight: 1em;
     line-height: 1.5em;
-    margin:0 0 1em 0;
+    margin: 0 0 1em;
   }
 }
 
@@ -296,14 +298,14 @@ label{
   font-weight: bold;
   &.inline{
     display: inline;
-    padding: 0 2em 0 1em;
+    padding: flip(0 2em 0 1em, 0 1em 0 2em);
     font-weight: normal;
   }
 }
 
 // grey background, full width box
 .form-box {
-  margin: 0 -1em 0.25em -1em;
+  margin: 0 -1em 0.25em;
   background: #eee;
   padding: 1em;
   > input[type=text], input[type=email] {
@@ -321,7 +323,7 @@ label{
     }
     strong {
       font-size:2em;
-      margin-right:0.25em;
+      margin-#{$right}: 0.25em;
     }
   }
 }
@@ -329,21 +331,22 @@ label{
 // the password box falls off screen for some reason. Just have boring margins,
 // it looks okay.
 .ie6 .form-box {
-    margin: 0 0 0.25em 0;
+    margin: 0 0 0.25em;
     padding: 1em;
 }
 // Prevent grey displaying oddly by giving it a width, and stop odd left margin issue
 .ie7 .form-box {
     width: 100%;
     > input[type=text], input[type=email] {
-        margin-left: 2em;
+        margin-#{$left}: 2em;
     }
 }
 
 .change_location {
     color: #666;
-    padding-left: 24px;
-    background: transparent url(/cobrands/fixmystreet/images/wrong-location.png) 4px 50% no-repeat;
+    padding-#{$left}: 20px;
+    background: transparent url(/cobrands/fixmystreet/images/wrong-location.png) $left 50% no-repeat;
+    border-#{$left}: solid 4px #fff;
     margin-top: -0.5em;
 }
 
@@ -353,12 +356,12 @@ label{
   input[type=text],
   input[type=email] {
     width: 65%;
-    float:left;
+    float: $left;
   }
   input[type=submit] {
-    float:right;
+    float: $right;
     width:28%;
-    margin-right:0.25em;
+    margin-#{$right}: 0.25em;
     padding-top:0.7em;
     padding-bottom:0.6em;
   }
@@ -443,7 +446,7 @@ p.label-valid {
   width: 175px;
   height: 40px;
   top: 0.4em;
-  left: 0.5em;
+  #{$left}: 0.5em;
   background: url($image-sprite) -3px -3px no-repeat;
   text-indent: -999999px;
   position: absolute;
@@ -458,12 +461,12 @@ p.label-valid {
   width: 3em;
   height: 3em; // same height as #site-header
   background: transparent url(/cobrands/fixmystreet/images/#{$menu-image}.png) center center no-repeat;
-  background-image: url(/cobrands/fixmystreet/images/#{$menu-image}.svg), none;
+  background-image: inline-image("../fixmystreet/images/#{$menu-image}.svg"), none;
   background-size: 22px 18px;
   display: block;
   text-indent: -999999px;
   position: absolute;
-  right: 0;
+  #{$right}: 0;
   top: 0.25em; // same as border-top on #site-header
 }
 
@@ -472,7 +475,7 @@ p.label-valid {
   display: block;
   position: absolute;
   top: (3em / 2); // half the height of #site-header
-  right: 3.5em;
+  #{$right}: 3.5em;
   margin-top: -0.5em;
 
   font-size: 0.9em;
@@ -516,7 +519,8 @@ p.label-valid {
           color: $primary_text;
           background: $primary;
           &#mysoc-logo {
-            background-position: 20px 13px;
+            background-origin: content-box;
+            background-position: $left 3px;
             background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAAYCAYAAAArrNkGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABBtJREFUaN7tmT2u1DAQx/cIPgBCQUJCICH5BuQIPkIq6hzBB0AyiAP4ABQ5ghtEm54mEtVrICUNkpmsJjBvdvyR1S7hPa2lv1aJs5PEP894xjkc/tMWY+xADhRQA8iC9I7PtD6PP9xa9aC1oCnmm9lpgtHW3WiVB03HuqYeA9DlPZbJuXj8o5wgGM5os+ixLb74MeTt+Hz+kiGXva99jEDjJV7w+5Pn3aIHNoEvB/Tu7s6iejzuQAEUQRPIgxT2KTwesX+5rkvYs7yP2KDXLN7XXCKkAUgHiii3MaQuideI9x/x2GB/gxFjVZMIoY6AmtBGJ+QJluUKgdheI1LpfveuoQMciTw7XrUAbEFzot8Re4GcnwWghv23Ezx0PiejBYiBAA0/Pz7VoOV3AKnEup1LwhyBQFsr2Jkzdjy51hZyBIuwaOuFZ6fPPaaA5jQX+hvi4fS8YUC9BBzXqJOB4INXAGpAM8oAxBEUUbYSQiCD1ZWACnZGhDJIUacGaBbY34ghAxfAdHheCxBHAs6yvp7YpP/zDOgk9WHIGhMvOZ5TrjCgfUUSptigqQqg1M7A7kHhTVvWUAF8Q/r6ZObPQy4bfMf62wycoeSFOEmoPS2sQ74mdFUC1RhuHQ25QonkKurjE6CCpzTC+9CmNwBNeiHz/oGvabnweG+9E9ZDul6GDDiD53tybsoMYIMJhhQSjy/28YVzoAgKoGRt+uvHMwUaQRHkS7N/I1AjhGuuGs+2ifsOPOwKk6TLAeUe2J4DFPtG7vnsnK3MQPngTwg0ErUZoC3CPEqyWbmDJQG1cVvbCpRPmIadm6Wy5VpAeXKkpCRqQ1F/DwBAnAlQnQHaEKDzlYGGgvQWoEJy1LOx8P8SqOLJEU2uNhbhvQC0AVn76n3/9vWHpIe++/Km/fxVL17aL3ATSYU5E2h77rbkBqA2kYFHsbS7FlAhOTrJpIXwkirYRynMAEgDiignwHSgiGozCceUg5EBqs5N2hhQX8gnpDaldoquCVQn6lmV2foLbJdkSmWkANESoNPLT98UyKMUgbnIFsqWGRMxQ0JbW1G2eCHsdmQferWlMwlPxHuLnwiFa9NefU2gQiJ0UholBixm6lGV8lAEGVFDykMr6l5e5OeA1tg5ASB8wcmVMEa4rtkLqM3VnqQuDJnBmHnhT6A2oKPNBSIFuq6hoCbzCatY91Zs/ZXspED5Ws+rDu0IbZUSEps//YmQuvbrCg8NFd8I1zBl8bd66w8galBA6Q3rmWKb3YZlpIqE0Da13pLrVjtd6flxMtP7qorvse1hjyYkRfs8yMP/8E83WMIeII2wdrobnk0gG6HOnUu7WteAqRKf39QN0yagTlhf9/lwz9fNG8yzgBrmmWa3h8Ftv0HaQLi1TYlaSGX3UvsNzdBKw+waoEEAAAAASUVORK5CYII=');
             background-repeat:no-repeat;
             text-indent:-999999px;
@@ -545,10 +549,10 @@ p.label-valid {
     position: relative;
     color: $primary_text;
     background: $primary;
-    padding:1em 6em 1em 1em;
+    padding: flip(1em 6em 1em 1em, 1em 1em 1em 6em);
     a {
       position: absolute;
-      right:1em;
+      #{$right}: 1em;
       @include inline-block;
       text-transform:uppercase;
       font-size:0.75em;
@@ -573,9 +577,9 @@ p.label-valid {
       display: table-cell;
       vertical-align: bottom;
       text-align: center;
-      border-right:0.25em solid #fff;
+      border-#{$right}: 0.25em solid #fff;
       &:last-child {
-        border-right:none;
+        border-#{$right}: none;
       }
       input[type=submit] {
           width: 100%;
@@ -586,7 +590,7 @@ p.label-valid {
         background-color: #f5f5f5;
         background-repeat: no-repeat;
         color:#333;
-        padding:4em 2em 1em 2em;
+        padding:4em 2em 1em;
         text-transform:uppercase;
         font: {
           size:0.6875em;
@@ -610,8 +614,9 @@ p.label-valid {
           background-position: center 25%;
         }
         &.chevron {
-          background-image:url($image-sprite);
-          background-position:center -2716px;
+          background-image: inline-image("../fixmystreet/images/chevron-grey-#{$right}.svg");
+          background-position: center 25%;
+          background-size: 20px 25px;
         }
         &.hover {
           background-image:url($image-sprite);
@@ -628,10 +633,10 @@ p.label-valid {
     ul#key-tools{
       background:#f5f5f5;
       li{
-        float:left;
+        float: $left;
         a {
-          padding-left:1.5em;
-          padding-right:3em;
+          padding-#{$left}: 1.5em;
+          padding-#{$right}: 3em;
         }
       }
     }
@@ -640,23 +645,25 @@ p.label-valid {
 .ie6 .shadow-wrap ul#key-tools li a {
   &.abuse {
     background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif');
-    background-position: right 0px;
+    background-position: $right 0px;
   }
   &.feed {
     background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif');
-    background-position: right -58px;
-  }
-  &.chevron {
-    background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif');
-    background-position: right -116px;
+    background-position: $right -58px;
   }
   &:hover {
     background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite_dark.gif');
   }
 }
+.iel8 {
+  .shadow-wrap ul#key-tools li a.chevron {
+    background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif');
+    background-position: $right -116px;
+  }
+}
 
 #report-updates-data img {
-    float: right;
+    float: $right;
 }
 
 #report-share iframe {
@@ -670,7 +677,7 @@ footer {
 
 #footer-mobileapps {
   @extend .full-width;
-  padding:1em 1em 0 1em;
+  padding: 1em 1em 0;
   h4 {
     margin:0;
   }
@@ -690,7 +697,7 @@ footer {
         border-bottom:none;
       }
       h4 {
-        margin:0.75em 0 0.25em 0;
+        margin:0.75em 0 0.25em;
       }
       p {
         font-size:0.75em;
@@ -723,14 +730,20 @@ input.red-btn{
 
 .final-submit,
 input.final-submit {
-  margin:1em 0.5em;
-  float:right;
+  margin: 1em 0.5em;
+  float: $right;
 }
 
-.button-right,
-.button-left,
-a.button-right,
-a.button-left {
+.button-fwd {
+  padding: flip(1em 3em 1em 1em, 1em 1em 1em 3em);
+  background: inline-image("../fixmystreet/images/chevron-grey-#{$right}.svg") $right 50% no-repeat;
+}
+.button-back {
+  padding: flip(1em 1em 1em 3em, 1em 3em 1em 1em);
+  background: inline-image("../fixmystreet/images/chevron-grey-#{$left}.svg") $left 50% no-repeat;
+}
+.button-fwd,
+.button-back {
   @include inline-block;
   cursor:pointer;
   font-size: 1em;
@@ -738,33 +751,27 @@ a.button-left {
   margin:0;
   border:1px solid #999;
   color:#333;
-  background: #eee;
+  background-color: #eee;
+  background-size: 20px+16px 25px;
   @include border-radius(4px);
   &:hover{
     color:#fff;
-    background:#777;
+    background-color: #777;
     text-decoration: none;
     border:1px solid #666;
   }
 }
-.button-right,
-a.button-right,
-:hover.button-right,
-a:hover.button-right {
-  padding:1em 3em 1em 1em;
-  background-image: url($image-sprite);
-  background-repeat:no-repeat;
-  background-position:right -686px;
-}
-
-.button-left,
-a.button-left,
-:hover.button-left,
-a:hover.button-left {
-  padding:1em 1em 1em 3em;
-  background-image: url($image-sprite);
-  background-repeat:no-repeat;
-  background-position:-18px -802px;
+.iel8 {
+  .button-fwd, .button-back {
+    background-image: url($image-sprite);
+    background-repeat: no-repeat;
+  }
+  .button-fwd {
+    background-position: right -686px;
+  }
+  .button-back {
+    background-position: -18px -802px;
+  }
 }
 
 .big-green-banner {
@@ -780,12 +787,12 @@ a:hover.button-left {
   font-size:0.875em;
   &:before {
     content: "";
-    left:-0.5em;
+    #{$left}: -0.5em;
     top:0;
     position: absolute;
     width: 0;
     height: 0;
-    border-left: 0.5em solid transparent;
+    border-#{$left}: 0.5em solid transparent;
     border-bottom: 0.5em solid $col_click_map_dark;
   }
 }
@@ -795,7 +802,7 @@ a:hover.button-left {
   p {
     position: absolute;
     top:-1.95em;
-    right:0;
+    #{$right}: 0;
     @include inline-block;
     font-size:0.6875em;//11px
     line-height:1em;
@@ -809,12 +816,12 @@ a:hover.button-left {
     }
     &:before {
       content: "";
-      left:-0.5em;
+      #{$left}: -0.5em;
       top:0;
       position: absolute;
       width: 0;
       height: 0;
-      border-left: 0.5em solid transparent;
+      border-#{$left}: 0.5em solid transparent;
       border-bottom: 0.5em solid #888;
     }
     &#fixed {
@@ -837,13 +844,13 @@ a:hover.button-left {
 }
 
 .issue-list{
-  margin: 0 0 1em 0;
+  margin: 0 0 1em;
   padding: 0;
   border-bottom: 0.25em solid $primary;
   li{
     list-style: none;
     background: #f6f6f6;
-    margin: 0.25em 0 0 0;
+    margin: 0.25em 0 0;
     padding: 0.5em 1em;
     display:block;
     .update-wrap {
@@ -853,21 +860,21 @@ a:hover.button-left {
       margin-bottom: 0.5em;
     }
     .update-img {
-      float: right;
-      margin: 0.5em 0 0.5em 1em; // gutter between text and floated image
+      float: $right;
+      margin: flip(0.5em 0 0.5em 1em, 0.5em 1em 0.5em 0); // gutter between text and floated image
     }
   }
 }
 
 .issue-list-a {
-  margin: 0 0 1em 0;
+  margin: 0 0 1em;
   padding: 0;
   border-bottom: 0.25em solid $primary;
   li {
     list-style: none;
     margin:0;
     padding:0;
-      margin: 0.25em 0 0 0;
+      margin: 0.25em 0 0;
       /* see note below about this */
       display:table;
       background: #f6f6f6;
@@ -892,27 +899,27 @@ a:hover.button-left {
         display: table-cell;
         width: 100%;
         vertical-align:top;
-        padding: 0px 0px 0px 1em;
+        padding: flip(0 0 0 1em, 0 1em 0 0);
         .img {
           width: 90px;
-          float: right;
+          float: $right;
           height:auto;
         }
         h4 {
-          padding-right: 1em;
+          padding-#{$right}: 1em;
           padding-top: 0.25em;
           margin:0;
         }
         small {
           color:#666;
           display: block;
-          padding-right: 1em;
+          padding-#{$right}: 1em;
           padding-top: 0.25em;
           padding-bottom: 0.25em;
         }
       }
     >p {
-      margin: 0.25em 0 0 0;
+      margin: 0.25em 0 0;
       padding: 0.5em 1em;
       background: #f6f6f6;
     }
@@ -935,7 +942,7 @@ a:hover.button-left {
       display:block;
       overflow:hidden;
       .text {
-        float:left;
+        float: $left;
       }
     }
   }
@@ -955,7 +962,7 @@ a:hover.button-left {
     span {
       position:absolute;
       top:0;
-      right:0;
+      #{$right}: 0;
       display:block;
       width:20px;
       height:20px;
@@ -975,8 +982,8 @@ a:hover.button-left {
   margin-bottom:1em;
 }
 .problem-header .update-img {
-    float: right;
-    margin-left: 0.5em;
+    float: $right;
+    margin-#{$left}: 0.5em;
     margin-bottom: 0.5em;
 }
 
@@ -1011,13 +1018,13 @@ a:hover.button-left {
 // OpenLayers fix for navigation being top right
 // Left and right so that zoom can be left, pan right.
 #fms_pan_zoom {
-  right: 0.5em !important;
   top: 0.5em;
-  left: 0.5em !important;
+  #{$left}: 0.5em !important;
+  #{$right}: 0.5em !important;
 }
 // The left and right of the above causes the navigation to move off-screen left in IE6.
 .ie6 #fms_pan_zoom {
-  left: auto !important;
+  #{$left}: auto !important;
 }
 
 // Openlayers map controls (overrides)
@@ -1029,7 +1036,7 @@ a:hover.button-left {
 #fms_pan_zoom_zoomout {
   width:36px !important;
   height:36px !important;
-  text-indent:-999999px;
+  text-indent: flip(-999999px, 999999px); // text-align from OL style makes this necessary
   background:url($image-sprite) no-repeat;
   filter: none !important; // Override OpenLayers PNG handling of the navigation
 }
@@ -1041,48 +1048,48 @@ a:hover.button-left {
 
 #fms_pan_zoom_panup {
   background-position:-42px -222px;
-  right:30px !important;
-  left: auto !important;
+  #{$right}: 30px !important;
+  #{$left}: auto !important;
   top:0 !important;
 }
 #fms_pan_zoom_pandown {
   background-position:-42px -282px;
-  right:30px !important;
-  left: auto !important;
+  #{$right}: 30px !important;
+  #{$left}: auto !important;
   top:72px !important;
 }
 #fms_pan_zoom_panleft {
   background-position:-12px -252px;
   width:48px !important;
-  right:48px !important;
-  left: auto !important;
+  #{$right}: flip(48px, 0) !important;
+  #{$left}: auto !important;
   top:36px !important;
 }
 #fms_pan_zoom_panright {
   background-position:-60px -252px;
   width:48px !important;
-  right:0 !important;
-  left: auto !important;
+  #{$right}: flip(0, 48px) !important;
+  #{$left}: auto !important;
   top:36px !important;
 }
 #fms_pan_zoom_zoomin {
   background-position:-152px -223px;
   height:44px !important;
-  left:0 !important;
+  #{$left}: 0 !important;
   top:0 !important;
 }
 #fms_pan_zoom_zoomout {
   background-position:-152px -259px;
   height:44px !important;
-  left:0 !important;
+  #{$left}: 0 !important;
   top:44px !important;
 }
 
 //hide pins, show old reports etc
 #sub_map_links {
   position: absolute;
-  left: 0;
-  right:0;
+  #{$left}: 0;
+  #{$right}: 0;
   bottom: 0;
   background:#333;
   background:rgba(0, 0, 0, 0.7);
@@ -1091,23 +1098,23 @@ a:hover.button-left {
     @include inline-block;
     font-size:0.6875em;
     color:#fff;
-    padding:0.6em 3em 0.5em 1em;
+    padding: flip(0.6em 3em 0.5em 1em, 0.6em 1em 0.5em 3em);
     background-repeat:no-repeat;
     &#hide_pins_link {
       background-image:url($image-sprite);
-      background-position: right -3976px;
+      background-position: flip(right, -341px) -3976px;
     }
     &#all_pins_link {
       background-image:url($image-sprite);
-      background-position: right -4022px;
+      background-position: flip(right, -337px) -4022px;
     }
     &#map_permalink {
       background-image:url($image-sprite);
-      background-position: right -4070px;
+      background-position: flip(right, -341px) -4070px;
     }
     &.feed {
       background-image:url($image-sprite);
-      background-position: right -3936px;
+      background-position: flip(right, -341px) -3936px;
     }
     &:hover {
       background-color:#000;
@@ -1119,15 +1126,15 @@ a:hover.button-left {
 .ie6 #sub_map_links a {
   &#hide_pins_link {
     background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif');
-    background-position: right 1px;
+    background-position: $right 1px;
   }
   &#all_pins_link {
     background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif');
-    background-position: right -45px;
+    background-position: $right -45px;
   }
   &#map_permalink {
     background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif');
-    background-position: right -93px;
+    background-position: $right -93px;
   }
 }
 
@@ -1158,7 +1165,7 @@ a:hover.button-left {
     a#try_again {
       position: absolute;
       display: block;
-      left: 25%;
+      left: 25%; // along with width of 50%, centres it
       bottom: 0;
       margin-bottom: 6em;
       background: rgba(0, 0, 0, 0.8);
@@ -1167,7 +1174,7 @@ a:hover.button-left {
     a#mob_ok {
       position: absolute;
       display: block;
-      right: 1em;
+      #{$right}: 1em;
       bottom: 0;
       height: 20px;
       padding-top: 30px;
@@ -1182,8 +1189,8 @@ a:hover.button-left {
   margin:0;
   position: absolute;
   top:0;
-  left:0;
-  right:0;
+  #{$left}: 0;
+  #{$right}: 0;
   font-size:0.75em;
   background:rgba(0, 0, 0, 0.7);
   padding:0.75em 30px;
@@ -1196,15 +1203,15 @@ a:hover.button-left {
     line-height:1;
     padding:0.5em 0.75em;
     position:absolute;
-    left:0.3em;
+    #{$left}: 0.3em;
     top:0.3em;
   }
 }
 
 .olControlAttribution {
     bottom: 3.25em !important;
-    right: 0.25em !important;
-    left: 0.25em !important;
+    #{$right}: 0.25em !important;
+    #{$left}: 0.25em !important;
     color: #222222;
     font-size:0.75em !important;
 }
@@ -1213,7 +1220,7 @@ a:hover.button-left {
 }
 .olControlPermalink {
     bottom: 3px !important;
-    right: 3px;
+    #{$right}: 3px;
 }
 
 /* Drag is only present in noscript form. XXX Copy from core. */
@@ -1245,8 +1252,8 @@ a.rap-notes-trigger,
 a:hover.rap-notes-trigger {
   display:block;
   width:90%;
-  padding-left:5%;
-  padding-right:5%;
+  padding-#{$left}: 5%;
+  padding-#{$right}: 5%;
 }
 .rap-notes {
   margin:1em 0;
@@ -1263,9 +1270,9 @@ a:hover.rap-notes-trigger {
     width:100%;
     li {
       display:table-cell;
-      border-right:0.25em solid #fff;
+      border-#{$right}: 0.25em solid #fff;
       &:last-child {
-        border-right:none;
+        border-#{$right}: none;
       }
       a {
         display:block;
@@ -1296,7 +1303,7 @@ a:hover.rap-notes-trigger {
     margin:0;
     padding:0;
     ul li {
-      float:left;
+      float: $left;
     }
   }
 }
@@ -1319,16 +1326,17 @@ label .muted {
   ul {
     width: 49%;
     margin: 0;
-    float: left;
+    float: $left;
     font-size: 14px;
     line-height: 20px;
   }
 
   li {
     margin-bottom: 0;
-    padding-left: 20px;
+    padding-#{$left}: 16px;
     list-style: none;
-    background: transparent url(/cobrands/fixmystreet/images/tick-10px-8px.png) 4px 5px no-repeat;
+    background: transparent url(/cobrands/fixmystreet/images/tick-10px-8px.png) $left 5px no-repeat;
+    border-#{$left}: solid 4px #fff;
   }
 
   .do {
@@ -1336,12 +1344,14 @@ label .muted {
   }
 
   .dont {
-    float: right;
+    float: $right;
     color: #881111;
 
     li {
       background-image: url(/cobrands/fixmystreet/images/cross-7px-7px.png);
-      background-position: 6px 6px;
+      background-position: $left 6px;
+      padding-#{$left}: 14px;
+      border-#{$left}: solid 6px #fff;
     }
   }
 }
@@ -1382,7 +1392,7 @@ table.nicetable {
     }
   }
   .title {
-    text-align:left;
+    text-align: $left;
   }
   .data {
     width:12%;
@@ -1400,7 +1410,7 @@ table.nicetable {
   .close-promo {
     position:absolute;
     top:0.5em;
-    right:0.5em;
+    #{$right}: 0.5em;
     display:block;
     width:16px;
     height:16px;
@@ -1431,18 +1441,18 @@ table.nicetable {
   position:relative;
   .prev {
     position:absolute;
-    left:0.5em;
+    #{$left}: 0.5em;
   }
   .next {
     position:absolute;
-    right:0.5em;
+    #{$right}: 0.5em;
   }
   a {
     @include inline-block;
     color: $primary_text;
     background: $primary;
-    padding-left:0.5em;
-    padding-right:0.5em;
+    padding-#{$left}: 0.5em;
+    padding-#{$right}: 0.5em;
     &:hover {
       text-decoration:none;
       background:$primary/1.1;
@@ -1584,7 +1594,7 @@ table.nicetable {
         background: #f6f6f6;
     }
     img[width="16"] {
-        float: right;
+        float: $right;
     }
 }
 
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index c04d9f1c1..ea85c0f13 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -78,7 +78,7 @@ h1 {
   .nav-wrapper {
     position: absolute;
     top:0;
-    left:0;
+    #{$left}: 0;
     width:100%;
     .nav-wrapper-2 {
       // position static as well so we fix lots of the z-index issues
@@ -100,7 +100,7 @@ h1 {
 }
 #site-logo {
   top: 0.9em;
-  left: auto;
+  #{$left}: auto;
   position: absolute;
   z-index: 3;
 }
@@ -120,8 +120,8 @@ h1 {
 }
 #nav-link,
 #report-cta {
-  right: auto;
-  left: -999999px;
+  #{$right}: auto;
+  #{$left}: -999999px;
 }
 #main-nav{
   margin: 0 auto;
@@ -131,13 +131,13 @@ h1 {
     list-style: none;
     padding: 0px;
     margin: 0px;
-    float:right;
+    float: $right;
     li{
       list-style: none;
       display: inline;
       margin: 0px;
       padding: 0px;
-      float:left;
+      float: $left;
       a,
       span {
         display: block;
@@ -175,7 +175,7 @@ h1 {
     }
     &#mysoc-menu{
       padding: 0em 0.5em;
-      margin-left: 0.25em;
+      margin-#{$left}: 0.25em;
       background: $primary;
       @include border-radius(0 0 0.375em 0.375em);
       li{
@@ -184,12 +184,12 @@ h1 {
           color: $primary_text;
           text-transform: uppercase;
           font-size: 0.6875em;
-          padding: 1.3em 0.7em 1em 0.7em;
+          padding: 1.3em 0.7em 1em;
           &#mysoc-logo {
             width:84px;
             height:16px;
             background-size: 100px auto;
-            background-position: 0px 10px;
+            background-position: -8px 0px;
             opacity: 0.8;
             &:hover {
               opacity: 1;
@@ -237,28 +237,28 @@ body.mappage {
   }
 
   .content {
-    float:left;
+    float: $left;
     padding: 1em 1em 10em;
     margin: 0;
   }
 
   #site-logo {
-    left: 12px;
+    #{$left}: 12px;
   }
 
   #main-nav {
     width: auto;
-    margin-right: 1em;
+    margin-#{$right}: 1em;
   }
 
   #main-nav ul#main-menu li a,
   #main-nav ul#main-menu li span {
-    padding: 1.4em 0.75em 1.35em 0.75em;
+    padding: 1.4em 0.75em 1.35em;
   }
 
   #main-nav ul#main-menu li a.report-a-problem-btn {
     padding: 0.5em;
-    margin:0.9em 0.25em 0.85em 0.25em;
+    margin: 0.9em 0.25em 0.85em;
   }
 
   .nav-wrapper{
@@ -278,9 +278,9 @@ body.mappage {
       display: block;
       height: auto;
       width: 22.2em; // 27em (.content width) - 2em (.content padding) - 6em - 0.8em
-      padding: 0.5em 6em 0.5em 0.8em;
+      padding: flip(0.5em 6em 0.5em 0.8em, 0.5em 0.8em 0.5em 6em);
       top: 0;
-      left: 0;
+      #{$left}: 0;
       z-index: 1;
       box-shadow: none;
       background: #FCEA9A;
@@ -289,7 +289,7 @@ body.mappage {
       a {
         // move the "Sign out" link in and down a bit, because of extra padding on parent
         top: 0.8em;
-        right: 0.8em;
+        #{$right}: 0.8em;
       }
     }
 
@@ -309,9 +309,9 @@ body.mappage {
   body.mappage {
     // The below is *mandatory* to allow pins/zoom to be clickable in IE6/7. Do NOT remove.
     .container {
-      float: left;
+      float: $left;
       width: 27em;
-      margin-left: 0.7em;
+      margin-#{$left}: 0.7em;
     }
     .nav-wrapper{
       z-index:1;
@@ -323,7 +323,7 @@ body.mappage {
       position: absolute;
     }
     #user-meta {
-      margin-left: 2em;
+      margin-#{$left}: 2em;
     }
   }
 }
@@ -407,7 +407,7 @@ body.fullwidthpage {
                     }
                     #footer-mobileapps {
                         a {
-                            padding-left: 0.5em;
+                            padding-#{$left}: 0.5em;
                         }
                     }
                     h4 {
@@ -426,7 +426,7 @@ body.fullwidthpage {
                     text-indent: -1000%;
                     height: 1.7em;
                     width: 16em;
-                    padding-right: 0.25em;
+                    padding-#{$right}: 0.25em;
                 }
             }
         }
@@ -463,7 +463,7 @@ body.twothirdswidthpage {
     aside {
       background:#eee;
       position:absolute;
-      left:42em;
+      #{$left}: 42em;
       top:0;
       z-index: -1;
       width:13em;
@@ -478,12 +478,12 @@ body.twothirdswidthpage {
     }
     .sticky-sidebar {
       position: absolute;
-      left:42em;
+      #{$left}: 42em;
       z-index: -1;
       aside {
         position: fixed;
         top:7em;
-        left:auto;
+        #{$left}: auto;
       }
     }
   }
@@ -493,7 +493,7 @@ body.twothirdswidthpage {
   position:static;
   aside {
     position:absolute;
-    left:42em;
+    #{$left}: 42em;
     top:0;
   }
 }
@@ -504,7 +504,7 @@ body.twothirdswidthpage {
 .tablewrapper {
   display:table;
   width:100%;
-  padding:0 0 1em 0;
+  padding: 0 0 1em;
   >div {
     display:table-cell;
     width:50%;
@@ -522,7 +522,7 @@ body.twothirdswidthpage {
     div {//ie6 doesn't support '>div', so we'll go with the somewhat risker 'div'
       width:48%;
       display:block;
-      float: left;
+      float: $left;
       border:none !important;
     }
   }
@@ -538,7 +538,7 @@ body.twothirdswidthpage {
 
 //footer blocks
 #footer-mobileapps {
-  border-right:1em solid transparent;
+  border-#{$right}: 1em solid transparent;
   background:none;
   padding:0;
   @include box-shadow(inset rgba(0, 0, 0, 0) 0 0 0);
@@ -553,31 +553,31 @@ body.twothirdswidthpage {
 .ie6, .ie7 {
   #footer-mobileapps {
       margin:0 0.5em;
-      margin-right:2%;
+      margin-#{$right}: 2%;
   }
 }
 
 #footer-help {
-  border-left:1em solid transparent;
+  border-#{$left}: 1em solid transparent;
   ul {
     display:table;
     li {
       display:table-cell;
       border-bottom:none;
       &:last-child {
-        border-left:1.25em solid transparent;
+        border-#{$left}: 1.25em solid transparent;
       }
     }
   }
 }
 .ie6, .ie7 {
   #footer-help {
-    margin-left:2%;
+    margin-#{$left}: 2%;
     ul {
       width:100%;
       li {
-        float:left;
-        width:45%
+        float: $left;
+        width: 45%;
       }
     }
   }
@@ -589,7 +589,7 @@ body.twothirdswidthpage {
   position: absolute;
   height: 29em;
   width: 29em;
-  right: 1em;
+  #{$right}: 1em;
   top: 3em;
   z-index:1;
 }
@@ -609,50 +609,49 @@ body.twothirdswidthpage {
 
 // push zoom back over to right
 #fms_pan_zoom_zoomin {
-  left:auto !important;
-  right:30px;
+  #{$left}: auto !important;
+  #{$right}: 30px !important;
   top:130px !important;
 }
 #fms_pan_zoom_zoomout {
-  left:auto !important;
-  right:30px;
+  #{$left}: auto !important;
+  #{$right}: 30px !important;
   top:174px !important;
 }
 
 .olControlAttribution {
   bottom:0.5em !important;
-  left: auto !important;
+  #{$left}: auto !important;
 }
 
 #sub_map_links {
-  left:auto;
-  bottom:auto;
-  bottom:2em;
+  #{$left}: auto;
+  bottom: 2em;
   #map_links_toggle {
     display:block;
     cursor: pointer;
     position:absolute;
-    left: -0.97em; /* 1em leaves a tiny gap, font issue */
+    #{$left}: -0.97em; /* 1em leaves a tiny gap, font issue */
     width: 1em;
     height:100%;
-    background:#000 url($image-sprite) right -4119px no-repeat;
-    @include border-radius(0.25em 0 0 0.25em);
+    background:#000 inline-image("../fixmystreet/images/triangle-grey-#{$right}.svg") 50% 50% no-repeat;
+    @include border-radius(flip(0.25em 0 0 0.25em, 0 0.25em 0.25em 0));
     &:hover {
-      left:-1.5em;
+      #{$left}: -1.5em;
       //use border so we don't have to redefine the background-position
-      border-right:0.5em solid #000;
+      border-#{$right}: 0.5em solid #000;
     }
     &.closed {
-      background-position: right -4159px;
+      background-image: inline-image("../fixmystreet/images/triangle-grey-#{$left}.svg");
     }
   }
 }
-.ie6 #sub_map_links #map_links_toggle {
-  height:1.75em;
-  background:#000 url('images/ie_sub_map_links_sprite.gif') center -143px no-repeat;
-  &.closed {
-    background-position: center -183px;
-  }
+.iel8 #sub_map_links #map_links_toggle {
+    height: 1.75em;
+    background: #000 url('images/ie_sub_map_links_sprite.gif') center -143px no-repeat;
+    &.closed {
+      background-position: center -183px;
+    }
 }
 
 // log in bit, pokes above the .content div
@@ -665,13 +664,13 @@ body.twothirdswidthpage {
     @include inline-block;
     position: absolute;
     top: 1em;
-    left: 1em;
+    #{$left}: 1em;
     height:2em;
-    padding:0.25em 6em 0.5em 0.5em;
+    padding: flip(0.25em 6em 0.5em 0.5em, 0.25em 0.5em 0.5em 6em);
     @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px);
     a {
       top:0.5em;
-      right:0.5em;
+      #{$right}: 0.5em;
       font-size:0.6875em;
       padding:0.5em 0.75em;
       line-height:1em;
@@ -712,42 +711,44 @@ body.twothirdswidthpage {
       a, input[type=submit] {
         font-size: 0.75em;
         color:#666;
-        padding: 0.5em 1.5em 0.5em 0;
+        padding: flip(0.5em 1.5em 0.5em 0, 0.5em 0 0.5em 1.5em);
         text-transform:none;
         &.abuse {
           background-image:url($image-sprite);
-          background-position:right -2935px;
+          background-position: flip(right, -337px) -2935px;
         }
         &.feed {
           background-image:url($image-sprite);
-          background-position:right -3074px;
+          background-position: flip(right, -337px) -3074px;
         }
         &.share {
           min-width: 5em;
           background-image: url(/cobrands/fixmystreet/images/share.png);
-          background-position: 90% 50%;
+          background-position: flip(80%, 20%) 50%;
         }
         &.chevron {
-          background-image:url($image-sprite);
-          background-position:right -3225px;
+          border-#{$right}: solid 1em transparent;
+          padding-#{$right}: 0.5em;
+          background-position: $right 50%;
+          background-size: 12px 15px;
         }
         &.hover {
           background-image:url($image-sprite);
-          background-position:right -1876px;
+          background-position: flip(right, -337px) -1876px;
         }
       }
     }
     &.singleton {
       li {
-        text-align:right;
+        text-align: $right;
         a {
-          padding-right:3em;
+          padding-#{$right}: 3em;
         }
       }
     }
   }
   &.static {
-    padding:0 0 1em 0;
+    padding: 0 0 1em;
     position: static;
   }
 }
@@ -767,19 +768,20 @@ body.twothirdswidthpage {
 
 // pokes over the RHS with a little triangle
 .big-green-banner {
-  top:auto;
-  right:-1.25em;
-  margin-left:-2em;
-  font-size:1.375em;
-  padding:1em 3em 1em 1em;
-  background: $col_click_map url($image-sprite) right -2188px no-repeat;
+  top: auto;
+  #{$right}: -1.25em;
+  margin-#{$left}: -2em;
+  font-size: 1.375em;
+  padding: flip(1em 3em 1em 1em, 1em 1em 1em 3em);
+  background: $col_click_map inline-image("../fixmystreet/images/chevron-white-#{$right}.svg") $right center no-repeat;
+  background-size: 27px+36px 33px;
   &:before {
-    right:0;
-    left:auto;
-    top:-0.5em;
+    left: flip(auto, 0);
+    right: flip(0, auto);
+    top: -0.5em;
     position: absolute;
     border-top: 0.5em solid transparent;
-    border-left: 0.5em solid $col_click_map_dark;
+    border-#{$left}: 0.5em solid $col_click_map_dark;
     border-bottom:none;
   }
   span {
@@ -788,8 +790,10 @@ body.twothirdswidthpage {
     padding-top: 0.5em;
   }
 }
-.ie6 .big-green-banner {
-  background: $col_click_map url(/cobrands/fixmystreet/images/ie_green_chevron.gif) right center no-repeat;
+.iel8 {
+  .big-green-banner {
+    background-image: url(/cobrands/fixmystreet/images/chevron-white-#{$right}-on-green.gif);
+  }
 }
 
 .banner {
@@ -798,8 +802,8 @@ body.twothirdswidthpage {
     top:-2.25em;
     padding:1em;
     &:before {
-      left:-0.75em;
-      border-left: 0.75em solid transparent;
+      #{$left}: -0.75em;
+      border-#{$left}: 0.75em solid transparent;
       border-bottom: 0.75em solid #888;
     }
     &#fixed {
@@ -834,7 +838,7 @@ body.twothirdswidthpage {
 // for pulling elements fullwidth regardless
 // of .contents' padding
 .full-width{
-  margin: 0 0 0em -1em;
+  margin: flip(0 0 0em -1em, 0 -1em 0 0);
   width: 29em;
 }
 
@@ -859,7 +863,7 @@ textarea.form-error {
 
 #report-a-problem-sidebar {
     position: absolute;
-    left: 29em;
+    #{$left}: 29em;
     width: 15em;
     @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px);
 }
@@ -879,7 +883,7 @@ textarea.form-error {
 }
 .ie6, .ie7 {
   #report-a-problem-sidebar {
-    left: 28.5em; // 0.5em left margin gone on .content in IE6/7, so reduce this accordingly.
+    #{$left}: 28.5em; // 0.5em left margin gone on .content in IE6/7, so reduce this accordingly.
     z-index: 1;
   }
 }
@@ -923,8 +927,8 @@ body.frontpage {
     z-index:10;
     p {
       top: -4em;
-      left: auto;
-      right: 0;
+      #{$left}: auto;
+      #{$right}: 0;
       color:$primary;
       background:none;
       @include box-shadow(rgba(0, 0, 0, 0) 0 0 0);
@@ -982,7 +986,7 @@ body.frontpage {
     background:none;
     overflow:hidden;
     padding-bottom: 0;
-    margin-right:0.5em;
+    margin-#{$right}: 0.5em;
     label {
       margin:0.5em 0;
     }
@@ -993,14 +997,14 @@ body.frontpage {
       overflow:hidden;
       input#pc {
         display:block;
-        float:left;
+        float: $left;
         padding:0.25em 0.5em;
         height:2em;
         width:17em;
       }
       input#sub {
         display:block;
-        float:right;
+        float: $right;
         width:3em;
         height:2.3em;
         padding-top:0.2em;
@@ -1037,7 +1041,7 @@ body.frontpage {
 }
 
 #front-howto {
-  border-right:1em solid transparent;
+  border-#{$right}: 1em solid transparent;
   #front_stats {
     background:none;
     color: #222;
@@ -1055,13 +1059,13 @@ body.frontpage {
   #front_stats {
     div {
       width:8em;
-      float:left;
+      float: $left;
     }
   }
 }
 
 #front-recently {
-  border-left:1em solid transparent;
+  border-#{$left}: 1em solid transparent;
 }
 
 #front-howto h2,
@@ -1073,10 +1077,10 @@ body.frontpage {
 .ie6, .ie7 {
   .tablewrapper {
     #front-howto {
-      margin-right:2%;
+      margin-#{$right}: 2%;
     }
     #front-recently {
-      margin-left:2%;
+      margin-#{$left}: 2%;
     }
   }
 }
@@ -1084,15 +1088,15 @@ body.frontpage {
 .confirmation-header {
     width: 25em;
     margin: 0 auto 1em;
-    text-align: left;
-    padding: 3em 0 3em 132px; // for tick icon
-    background-position: 0 2em;
+    text-align: $left;
+    padding: flip(3em 0 3em 132px, 3em 132px 3em 0); // for tick icon
+    background-position: $left 2em;
 }
 
 /* Admin interface */
 
 .fms-admin-floated {
-    float: right;
+    float: $right;
     width: 25%;
 }
 
@@ -1108,8 +1112,8 @@ body.frontpage {
 
   #main-nav{
     width: auto;
-    float:right;
-    padding-left: 180px;
+    float: $right;
+    padding-#{$left}: 180px;
   }
 
   html #main-nav ul#mysoc-menu li a#mysoc-logo {
@@ -1122,14 +1126,14 @@ body.frontpage {
 
   //Map becomes percentage width
   #map_box{
-    left: 32em;
+    #{$left}: 32em;
     width:auto;
   }
 
   //Revert to mobile use of the .full-width class
   .full-width{
     width: auto;
-    margin: 0em -1em 0 -1em;
+    margin: 0em -1em;
   }
 
   //make twothirdswidthpage nearly as small as main
@@ -1138,7 +1142,7 @@ body.frontpage {
     .content {
       width:30em;
       .sticky-sidebar {
-        left:32em;
+        #{$left}: 32em;
       }
     }
   }
diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss
index 4c7bc5af8..be274e9bb 100644
--- a/web/cobrands/sass/_mixins.scss
+++ b/web/cobrands/sass/_mixins.scss
@@ -1,3 +1,5 @@
+$direction: 'left' !default;
+
 // Button reset
 @mixin button-reset($c1: #eee, $c2: #ccc, $c3: #999, $c4: #333, $c5: #777, $c6: #999, $c7: #666, $c8: #fff){
   cursor:pointer;
@@ -8,7 +10,7 @@
   }
   text-transform:uppercase;
   line-height: 1.375em;
-  padding:0.7em 0.5em 0.5em 0.5em;
+  padding: 0.7em 0.5em 0.5em;
   margin:0;
   width: auto;
   height: auto;
@@ -26,22 +28,7 @@
   }
 }
 
-
-
-// list resets
-@mixin list-reset-copy {
-  padding-left:30px;
-  margin-bottom:20px;
-  li {
-    font-size:14px;
-    line-height:20px;
-    list-style:disc;
-    margin-bottom:10px;
-    background:none;
-    padding:0;
-  }
-}
-
+// list reset
 @mixin list-reset-soft {
   list-style-type:none;
   padding: 0;
@@ -54,19 +41,21 @@
   }
 }
 
-@mixin list-reset {
-  list-style-type:none;
-  padding: 0;
-  margin: 0;
-  li{
-    list-style-type:none;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    float:left;
-    a {
-      float:left;
-      display:block;
+// LTR / RTL
+$left: left;
+@if $direction == right {
+  $left: right;
+}
+
+$right: right;
+@if $direction == right {
+  $right: left;
+}
+
+@function flip($ltr, $rtl) {
+    @if $direction == left {
+        @return $ltr;
+    } @else {
+        @return $rtl;
     }
-  }
 }
diff --git a/web/cobrands/sass/_report_list.scss b/web/cobrands/sass/_report_list.scss
index 179a7983c..0ba69fd4b 100644
--- a/web/cobrands/sass/_report_list.scss
+++ b/web/cobrands/sass/_report_list.scss
@@ -2,7 +2,7 @@
 // the new-style combined report list with category/status filters.
 
 .report-list-filters {
-  padding: 1em 1em 0 1em;
+  padding: 1em 1em 0;
   margin-bottom: 0.5em;
   color: #666;
   font-size: 0.85em;
@@ -17,7 +17,7 @@
     margin: 0;
 
     & + label {
-      margin-left: 0.2em;
+      margin-#{$left}: 0.2em;
     }
   }
 
@@ -29,13 +29,13 @@
     border: 1px solid #ced7c4;
     box-shadow: 0 1px 0 #fff;
     height: 2em;
-    margin-left: 0.2em;
+    margin-#{$left}: 0.2em;
     max-width: 13em;
   }
 }
 
 .report-list, .issue-list-a {
-  margin-left: 0;
+  margin-#{$left}: 0;
 
   li {
     list-style: none;
@@ -46,14 +46,11 @@
     a {
       display: block;
       padding: 1em;
-      padding-left: 4em;
-      background: transparent url(/i/pin-yellow-small.png) no-repeat 1em center;
+      padding-#{$left}: 4em;
+      border-#{$left}: solid 1em transparent;
+      background: transparent url(/i/pin-yellow-small.png) no-repeat $left center;
 
       &:hover, &:focus {
-        background-color: #fff;
-        background-repeat: no-repeat;
-        background-position: 1em center;
-        background: transparent url(/i/pin-yellow-small.png) no-repeat 1em center;
         text-decoration: none;
       }
     }
@@ -83,14 +80,14 @@
       display: block;
       height: 1px;
       position: absolute;
-      left: 4em;
-      right: 0;
+      #{$left}: 4em;
+      #{$right}: 0;
       bottom: 0;
       background-color: #e5e5e5;
     }
 
     &.empty:after {
-        left: 0;
+        #{$left}: 0;
     }
   }
 
@@ -113,7 +110,7 @@
 // which removes the left padding. However, our new reports list still needs
 // it:
 .issue-list-a.full-width {
-  margin-left: -1em;
+  margin-#{$left}: -1em;
 }
 
 .big-green-banner {
@@ -126,14 +123,15 @@
 
 .click-the-map {
   color: #000;
-  margin: -10px -1em 0 -1em; // overlap padding on parents
+  margin: -10px -1em 0; // overlap padding on parents
   padding: 18px;
   border-bottom: 1px solid #e5e5e5;
+  // TODO This is not right-to-left enabled yet
   background: #fff url('/i/click-map-chevron-big.gif') 90% 12px no-repeat;
 
   h2 {
     font-family: inherit;
-    margin: 0 0 5px 0;
+    margin: 0 0 5px;
   }
 
   p {
@@ -141,22 +139,23 @@
     font-size: 18px;
     line-height: 20px;
     color: $primary;
-    padding-right: 20px;
-    background: transparent url('/i/click-map-chevron-small.gif') 100% center no-repeat;
+    padding-#{$right}: 20px;
+    // TODO This is not right-to-left enabled yet, image wise
+    background: transparent url('/i/click-map-chevron-small.gif') $right center no-repeat;
     display: inline-block;
   }
 
   img {
     // the little chevron icon
     vertical-align: -1px;
-    margin-left: 0.2em;
+    margin-#{$left}: 0.2em;
   }
 }
 
 body.frontpage {
     .issue-list-a, .list-a {
         li .text {
-            padding-left: 3em;
+            padding-#{$left}: 3em;
         }
     }
 }