Merge remote branch 'origin/master' into fmb-read-only

Conflicts:
	bin/send-reports
	perllib/FixMyStreet/Cobrand/Default.pm
	perllib/FixMyStreet/Cobrand/FixMyStreet.pm
	templates/web/fixmystreet/alert/index.html
	templates/web/fixmystreet/around/display_location.html
	web/cobrands/fixmystreet/_layout.scss
	web/js/map-OpenLayers.js

16 files changed, 499 insertions, 283 deletions

diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss
index c0376274e..e178c9db2 100644
--- a/web/cobrands/bromley/_colours.scss
+++ b/web/cobrands/bromley/_colours.scss
@@ -1,8 +1,9 @@
 /* COLOURS */
 
-$primary: rgb(76,120,168);
+$primary: rgb(91,120,147);
 $primary_b: #000000;
 $primary_text: #ffffff;
 
-$contrast1: #00BD08;
+$contrast1: rgb(91,120,147);
+$contrast1_dark: darken(rgb(91,120,147), 10%);
 $contrast2: #AA8D11;
diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss
index 4594f832f..9c5ff2b0f 100644
--- a/web/cobrands/bromley/base.scss
+++ b/web/cobrands/bromley/base.scss
@@ -5,3 +5,56 @@
 
 @import "../fixmystreet/_base";
 
+a, a:visited {
+    color: #369;
+    &:hover, &:active {
+        color: #369;
+    }
+}
+
+h1.main {
+    color: $primary;
+    text-align: center;
+    margin: 0.5em 0;
+}
+
+// Want a white header, and logo is slightly bigger
+#site-header {
+    @include background(linear-gradient(#ddd, #fff 10%, #fff));
+    height: 4em;
+}
+
+// Colour tab to match colour scheme
+#nav-link {
+  width: 50px;
+  height: 48px;
+  background: url('/cobrands/bromley/tab-blue.png') 0 0 no-repeat;
+}
+
+// Change logo to logo of council
+#site-logo {
+  display: block;
+  width: 80px;
+  height: 44px;
+  top: 0.9em;
+  background: url('/cobrands/bromley/bromley-logo.s.jpg') 0 0 no-repeat;
+}
+
+#problems-nav {
+    border-bottom:0.25em solid $primary;
+    ul li a {
+        text-transform: none;
+        &.active {
+            background: $primary;
+            color: #fff;
+        }
+    }
+}
+
+.big-green-banner {
+    text-transform: none;
+}
+
+#form_sign_in {
+    margin-top: 1em;
+}
diff --git a/web/cobrands/bromley/bromley-logo.jpg b/web/cobrands/bromley/bromley-logo.jpg
new file mode 100644
index 000000000..28da8b7ea
--- /dev/null
+++ b/web/cobrands/bromley/bromley-logo.jpg
diff --git a/web/cobrands/bromley/bromley-logo.s.jpg b/web/cobrands/bromley/bromley-logo.s.jpg
new file mode 100644
index 000000000..16f632848
--- /dev/null
+++ b/web/cobrands/bromley/bromley-logo.s.jpg
diff --git a/web/cobrands/bromley/bromley.scss b/web/cobrands/bromley/bromley.scss
new file mode 100644
index 000000000..91ec75fea
--- /dev/null
+++ b/web/cobrands/bromley/bromley.scss
@@ -0,0 +1,110 @@
+/* Parts of Bromley's main CSS needed for its header/footer and adjusted (see
+ * bottom) to not be affected by main FixMyStreet CSS. Not very sustainable;
+ * perhaps we should wrap all council CSS within a SCSS #council ID? Hmm.
+ */
+
+@import "compass";
+
+// Bits of Bromley's forms.css, adjusted
+input[type=text],
+input[type=password],
+input[type=email],
+input[type=file],
+textarea, 
+select { background: #fff; border: 1px solid #768b9a; border-color: #768b9a #d1dee8 #d1dee8 #768b9a; color: #333; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; padding: 8px;
+@include border-radius(0); }
+
+.green-btn, button.green-btn, input.green-btn {
+    background: #5b7189 url("https://www.bromley.gov.uk/site/styles/css_img/button.gif") repeat-x 0 -1px; border: 1px solid #8e9eb0; color: #fff; font-family: 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; font-weight: normal; margin: 0; min-height: 23px; outline: 1px solid #405062; padding: 4px 8px; text-transform: uppercase; }
+.green-btn:hover, button.green-btn:hover, input.green-btn:hover { background: #5b7189; border: 1px solid #8e9eb0; }
+.form-txt-submit-box input[type=submit] {
+    padding-top: 0; padding-bottom: 0; width: auto;
+}
+
+
+h1, h2, h3, h4, h5, h6, legend { font-family: 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; }
+body { color: #333; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; line-height: 1.4; }
+
+// #header renamed to #bromley-header
+#bromley-header { padding: 0 18px 0 25px; }
+
+.header-nav {float:right; background:url('https://www.bromley.gov.uk/site/styles/css_img/header-nav.gif') no-repeat; overflow:hidden; width:651px; height:34px; line-height:34px; padding:0 20px;}
+.header-nav li {float:left; width:130px; text-align:center; background:url('https://www.bromley.gov.uk/site/styles/css_img/header-nav-divider.gif') top right no-repeat;}
+.header-nav li:last-child {background:none;}
+.header-nav a:link, .header-nav a:visited {color:#fff; text-decoration:none;}
+.header-nav a:hover, .header-nav a:active {text-decoration:underline;}
+
+/* -------- For Google translate select box only */
+.header-nav div#google_translate_element .goog-te-gadget { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;    }
+.header-nav div#google_translate_element .goog-te-gadget .goog-te-combo { margin:5px 0 0 5px; padding:0 0 0 2px; background: #9b9b9b; color: #fff; border: 1px solid #606060; font-size: 12px; width: 138px;}
+.header-nav div#google_translate_element .goog-te-gadget .goog-te-combo option { background:#fff; color: #666; padding: 1px 0; margin: 0; }
+/* --- */
+
+.logo {padding:10px 0;}
+
+.sign-in {float:right; margin-top:-87px; width: 650px; text-align: right;}
+.sign-in a:link, .sign-in a:visited {color:#333; font-weight:bold; text-decoration:none;}
+.sign-in a:hover, .sign-in a:active {text-decoration:underline;}
+
+.main-menu {background:url('https://www.bromley.gov.uk/site/styles/css_img/main-menu.gif') no-repeat; width:689px; height:45px; margin-top:-60px; float:right; clear:right;}
+.main-menu li {float:left; width:126px; padding-right:2px; text-align:center; font:150%/45px 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif;}
+.main-menu li a:link, .main-menu li a:visited {color:#fff; display:block; text-decoration:none;}
+.main-menu li a:hover, .main-menu li a:active {background:url('https://www.bromley.gov.uk/site/styles/css_img/main-menu-hover.gif') repeat-x;}
+.main-menu li.home a:hover, .main-menu li.home a:active {background:url('https://www.bromley.gov.uk/site/styles/css_img/main-menu-hover-home.gif') repeat-x;}
+
+//#search { float: right; padding: 10px 17px; width: 270px; }
+//#search label {display:none;}
+//#search input { background: #ececec; border: 1px solid #768b9a; border-color: #768b9a #d1dee8 #d1dee8 #768b9a; line-height: 9px; padding: 6px 5px 4px; width: 184px; }
+//#search input.button { background: #fff; border: 1px solid #8596a8; color: #333; font-family: 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; font-size:133%; height: 27px; line-height: 27px; padding: 0; vertical-align: top; width: 70px; }
+
+// #footer renamed to #bromley-footer, fixed font size.
+#bromley-footer { background: #666 url('https://www.bromley.gov.uk/site/styles/css_img/footer.gif') top center no-repeat; clear: both; width:100%; padding:30px 15px 50px; margin-left:-15px; color:#fff; font-size:92%;}
+#bromley-footer a:link, 
+#bromley-footer a:visited 				{ color: #fff; text-decoration: none; }
+#bromley-footer a:hover,
+#bromley-footer a:active 				{ text-decoration: underline;}
+#bromley-footer img 					{ float: right; margin-top: -18px; }
+#bromley-footer .footer-nav 			{ float: right; height:35px; margin-top: -15px; }
+#bromley-footer .footer-nav li 			{ border-right:1px solid #fff; float: left; line-height: 1; padding: 0 20px; }
+#bromley-footer .footer-nav li:last-child 	{ border: none; }
+
+// Bromley IE specific CSS
+.ie6 {
+    div { zoom: 1; }
+    #bromley-wrapper { padding: 0; }
+    #bromley-footer { margin: 0; }
+    //#search input { padding: 8px 5px 2px; }
+    //#search input.button { padding: 0; width: 68px; line-height: 24px; }
+    input.button { overflow: visible; width: 1%; }
+}
+.ie7 {
+    div { zoom: 1; }
+    //#search input { padding: 8px 5px 2px; }
+    //#search input.button { padding: 0; width: 68px; line-height: 24px; }
+    input.button { overflow: visible; }
+}
+.ie8 {
+    //#search input { padding: 8px 5px 2px; }
+    //#search input.button { padding: 0; line-height: 24px; }
+}
+
+// mySociety additions
+#bromley-header { font-size: 12px; }
+.header-nav ul { margin: 0; }
+.header-nav li { list-style-type: none; }
+// Width is actually 637, but that causes wrap-around, need to ask for fixes and corner image
+.main-menu { background: url('/cobrands/bromley/main-menu1.gif') no-repeat; width: 638px; }
+.main-menu ul { margin: 0; }
+.main-menu li { list-style-type: none; color: #ccf; }
+.main-menu li.last { padding-right: 0; }
+.main-menu li.last a:hover, .main-menu li.last a:active {background:url('/cobrands/bromley/main-menu-hover-home-right.gif') repeat-x;}
+//#search input { display: inline; margin: 0; @include border-radius(0em); }
+//#search input.button { font-weight: normal; text-transform: none; }
+#bromley-footer { padding-bottom: 60px; }
+#bromley-footer .footer-nav li { list-style-type: none; }
+#bromley-footer p { margin: 0; }
+
+#bromley-powered-by {
+    clear: both;
+}
+
diff --git a/web/cobrands/bromley/favicon.ico b/web/cobrands/bromley/favicon.ico
new file mode 100644
index 000000000..cf0577755
--- /dev/null
+++ b/web/cobrands/bromley/favicon.ico
diff --git a/web/cobrands/bromley/favicon.png b/web/cobrands/bromley/favicon.png
new file mode 100644
index 000000000..0acd804e7
--- /dev/null
+++ b/web/cobrands/bromley/favicon.png
diff --git a/web/cobrands/bromley/fms-logo.png b/web/cobrands/bromley/fms-logo.png
new file mode 100644
index 000000000..23bea6b0f
--- /dev/null
+++ b/web/cobrands/bromley/fms-logo.png
diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss
index 3dc34c6c7..eef0ee679 100644
--- a/web/cobrands/bromley/layout.scss
+++ b/web/cobrands/bromley/layout.scss
@@ -1,11 +1,155 @@
 @import "_colours";
 @import "../fixmystreet/_layout";
 
-body {
-    background: #fff;
+body { background: #9b9b9b url('https://www.bromley.gov.uk/site/styles/css_img/repeater.gif') repeat-x; }
+#bromley-wrapper { background: #fff url('https://www.bromley.gov.uk/site/styles/css_img/header-corners.gif') center 110px no-repeat; margin: 1px auto 0; padding: 0 15px; width: 955px;}
+.offline #bromley-wrapper { padding: 0 15px 20px; }
+
+// So that map appears underneath the header
+.wrapper {
+    position: relative;
+}
+.ie6, .ie7 {
+    .wrapper {
+        padding-top: 1em;
+    }
+}
+
+// To prevent font size larger interfering with the fixed Bromley layout
+.container { width: auto; }
+.full-width { width: 464px; }
+.shadow-wrap { width: 464px; }
+#map_box { width: 464px; }
+.content { width: 432px; }
+body.fullwidthpage .content { width: auto; }
+body.twothirdswidthpage .content {
+    width: 640px;
+    aside {
+        left: 672px;
+        width: 208px;
+        padding: 16px;
+    }
+    .sticky-sidebar {
+        left: 672px;
+        aside {
+            top:7em;
+        }
+    }
+}
+.ie6, .ie7 {
+    body.mappage .container {
+        width: 464px;
+        margin-left: 0;
+    }
 }
 
 #front-main {
     background: $primary;
+    @include border-radius(1em 1em 0 0);
+    margin: 2em 1em 0;
+    padding-top: 0;
+    // layout sets this because base has it slightly lighter
+    h2 {
+        color: $primary_text;
+    }
+    a#geolocate_link {
+        color: $primary_text;
+    }
+}
+
+// Don't want gap that normal site has
+body.frontpage {
+    .table-cell {
+        .content {
+            margin-top: 0;
+        }
+    }
+}
+
+// Don't want FixMyStreet logo on desktop, and we have a skip to content in
+// Bromley header
+#site-header {
+    display: none;
+}
+
+#user-meta {
+    display: none;
+}
+
+// Currently hiding, but do want some internal navigation somewhere at the end
+.nav-wrapper {
+    display: none;
+}
+
+// White background, so no shadow or margin needed.
+.content {
+    margin: 0;
+    @include box-shadow(none);
+}
+.ie6, .ie7, .ie8  {
+    .content {
+        margin: 0;
+        border: none;
+    }
+}
+
+// As map can scroll and isn't at the top, give it an edge
+#map_box {
+    border: solid 1px #999;
+    top: 1em;
+    right: 0em;
+    margin: 0;
+}
+
+// Perhaps fix map location (should be in central?)
+.ie6 #map_box, .ie7 #map_box {
+    right: -480px;
+}
+
+.general-sidebar-notes,
+#report-a-problem-sidebar {
+  position: static;
+  width: auto;
+  @include box-shadow(rgba(0, 0, 0, 0), 0, 0, 0);
+  .sidebar-tips,
+  .sidebar-notes {
+    font-size:1em;
+  }
+}
+
+.ie7 .big-green-banner {
+    right: 0;
+}
+
+// Pull OpenLayers navigation down a bit
+#fms_pan_zoom {
+    top: 0.5em !important;
+}
+
+// Fix location of aside sidebar
+body.twothirdswidthpage {
+    .content {
+        aside {
+            @include box-shadow(none);
+        }
+        .sticky-sidebar {
+            top: 1em;
+            aside {
+                position: absolute;
+                top: 0;
+            }
+        }
+    }
+}
+
+// So as not to interfere with the Bromley footer, make the fixed nav static.
+.shadow-wrap {
+    position: static;
+    padding-top: 0;
+    margin-bottom: 1em;
+    ul#key-tools {
+        border-top: none;
+        border-bottom: 1px solid $primary;
+    }
 }
 
diff --git a/web/cobrands/bromley/main-menu-hover-home-right.gif b/web/cobrands/bromley/main-menu-hover-home-right.gif
new file mode 100644
index 000000000..80c11c782
--- /dev/null
+++ b/web/cobrands/bromley/main-menu-hover-home-right.gif
diff --git a/web/cobrands/bromley/main-menu1.gif b/web/cobrands/bromley/main-menu1.gif
new file mode 100644
index 000000000..21ab45668
--- /dev/null
+++ b/web/cobrands/bromley/main-menu1.gif
diff --git a/web/cobrands/bromley/tab-blue.png b/web/cobrands/bromley/tab-blue.png
new file mode 100644
index 000000000..62e6285b7
--- /dev/null
+++ b/web/cobrands/bromley/tab-blue.png
diff --git a/web/cobrands/fixmystreet/_base.scss b/web/cobrands/fixmystreet/_base.scss
index 644b015b5..4d3b36888 100644
--- a/web/cobrands/fixmystreet/_base.scss
+++ b/web/cobrands/fixmystreet/_base.scss
@@ -31,9 +31,6 @@ h1 {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
 }
-#front-main h1 {
-  margin-top: 0.7em;
-}
 h1#reports_heading span {
   display: none;
 }
@@ -145,12 +142,23 @@ img {
   //do this otherwise IE will just not display
   //any img without a height defined
   height:auto;
+  max-width: 100%;
+}
+// So that map popups display correctly
+#popup img {
+    max-width: none;
 }
 
 select, input, textarea {
   font-size: 99%;
   max-width: 95%;
 }
+.ie7 {
+    select, input, textarea {
+        max-width: none;
+    }
+}
+
 // To deal with bug from drop-down being wider than holder
 select {
   width: 100%;
@@ -247,10 +255,27 @@ input[type=password],
 input[type=email],
 input[type=file],
 textarea {
+  @include box-sizing(border-box);
   width: 100%;
   // adjust so the sides line up
   padding: 0.5em;
-  margin: 0 0 0 -0.5em;
+}
+.ie7 {
+    input[type=text],
+    input[type=password],
+    input[type=email],
+    input[type=file],
+    textarea {
+        max-width: 95%;
+    }
+    // In order to work around the IE7 specific issue of inheriting left margins
+    // http://techblog.willshouse.com/2009/07/12/ie6ie7-form-element-margin-inheritance-bug/
+    fieldset > input[type=text],
+    fieldset > input[type=password],
+    fieldset > input[type=email],
+    fieldset > textarea {
+        margin-left: -1em;
+    }
 }
 
 textarea {
@@ -294,7 +319,6 @@ label{
   margin: 0 -2em 0.25em -2em;
   background:#eeeeee;
   padding:1em 2em 1em 2em;
-  max-width:26em;
   >input[type=text] {
     margin-bottom:1em;
   }
@@ -303,7 +327,7 @@ label{
     margin:0.5em 0;
   }
   h5 {
-    margin:0;
+    margin:0 0 1em;
     font: {
       size:1.125em;
       weight:normal;
@@ -319,6 +343,14 @@ label{
 // it looks okay.
 .ie6 .form-box {
     margin: 0 0 0.25em 0;
+    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] {
+        margin-left: 2em;
+    }
 }
 
 .form-txt-submit-box {
@@ -350,8 +382,14 @@ p.form-error {
   background:#ff0000;
   color:#fff;
   padding:0 0.5em;
-  margin:0 0 0 -0.5em;
   @include border-radius(0.25em 0.25em 0 0);
+  a {
+    color: white;
+    text-decoration: underline;
+  }
+  a:hover {
+    text-decoration: none;
+  }
 }
 
 input.form-error,
@@ -364,7 +402,6 @@ ul.error {
   background:#ff0000;
   color:#fff;
   padding:0 0.5em;
-  margin:0 0 0 -0.5em;
   @include border-radius(0.25em);
 }
 
@@ -457,7 +494,8 @@ p.label-valid {
     &#mysoc-menu{
       li {
         a {
-          background:$primary;
+          color: $primary_text;
+          background: $primary;
           &#mysoc-logo {
             background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIkAAAAyCAMAAABf9whNAAAACW9GRnMAAADwAAAAJgAMZizzAAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAAF5AAAQZgCwCYXlAAAANlBMVEUAAAAiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiL///90WH2CAAAAEHRSTlMADx8vP09fb3+Pn6+/z9/v+t8hjgAAAAFiS0dEEeK1PboAAAGqSURBVFjD7ZbNjtwgEAY/oIE2YKj3f9ocPDOZ3eN6FCUKdWsJQ+H+saXNZrPZbDabzf/GovwdIhH8LUzHn/PqI32Jcw1v0fjidQf30EZPqmMURXeT5F5kbYwqSQbeWpAU6xg961pT+mgm+WR4Ke6SzG9JwQRWB6iaTClCzQBLknT0AibZAnCBSx2ALACGQ5JOznsmq1TA82LKIalC6Jwh5seaMGdUWKxiJQpclWVqLNlJsxThUIB6z8Qft3FQgEODrs4qUuj9qoljpAr2euKkmxVIjzrpTBUI90xMGgzJQGrMAEUGrGKQn6c7/HbngT1MMqRO1wdNDA6WpNgW5Ld38s1kuLt7fPbO5Lg7Z76ZaLJoV3WAa6wsxbmiyrMMruyMVxc3SaqvAv+YSQWS1Fs9oAi8jQKmsGB4zwJXgdO9VWnAkaUAHJ81CTAkLYAm5ZbB/QhSmm9d7Ff7Splr5jaI90zMgpQsScHsGmRFUsheH6O1jecR5m5BZlFSzF5NkpJ7lMJ85etDlPWjHdMJ6aMiFdYPdgzw6Q90Yvwo2+fM+3dps9lsNpvNP8gvi7UYry9B6TcAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTItMDUtMDJUMTk6NDY6NTErMDE6MDAcdbR4AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDEyLTA1LTAyVDE5OjQ2OjUxKzAxOjAwbSgMxAAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAASUVORK5CYII=');
             background-repeat:no-repeat;
@@ -485,7 +523,8 @@ p.label-valid {
 #user-meta {
   p {
     position: relative;
-    background:$primary;
+    color: $primary_text;
+    background: $primary;
     padding:1em 6em 1em 1em;
     a {
       position: absolute;
@@ -518,7 +557,11 @@ p.label-valid {
       &:last-child {
         border-right:none;
       }
-      a {
+      input[type=submit] {
+          width: 100%;
+          border: none;
+      }
+      a, input[type=submit] {
         display: block;
         background-color: #f5f5f5;
         background-repeat: no-repeat;
@@ -529,7 +572,7 @@ p.label-valid {
           size:0.6875em;
           family: Helmet, Freesans, sans-serif;
         }
-        &:hover, &.hover, &.active {
+        &:hover, &.hover {
           text-decoration:none;
           background-color:#333;
           color:#fff;
@@ -546,7 +589,7 @@ p.label-valid {
           background-image:url('/cobrands/fixmystreet/images/sprite.png');
           background-position:center -2716px;
         }
-        &.hover, &.active {
+        &.hover {
           background-image:url('/cobrands/fixmystreet/images/sprite.png');
           background-position:center -2064px;
         }
@@ -717,7 +760,7 @@ a:hover.button-left {
     width: 0;
     height: 0;
     border-left: 0.5em solid transparent;
-    border-bottom: 0.5em solid #4B8304;
+    border-bottom: 0.5em solid $contrast1_dark;
   }
 }
 
@@ -753,7 +796,7 @@ a:hover.button-left {
       color:#fff;
       background: $contrast1;
       &:before {
-        border-bottom: 0.5em solid #4B8304;
+        border-bottom: 0.5em solid $contrast1_dark;
       }
     }
   }
@@ -838,6 +881,7 @@ a:hover.button-left {
       }
       .img {
         text-align:right;
+        width: 90px;
         img {
           height:auto;
         }
@@ -906,7 +950,7 @@ a:hover.button-left {
       width:20px;
       height:20px;
       opacity: 0.5;
-      background:#fff url(images/sprite.png) -16px -1098px no-repeat;
+      background:#fff url(/cobrands/fixmystreet/images/sprite.png) -16px -1098px no-repeat;
       //hide text - http://nicolasgallagher.com/another-css-image-replacement-technique/
       font: 0/0 a;
       color: transparent;
@@ -1286,7 +1330,8 @@ table.nicetable {
 
 .promo {
   @extend .full-width;
-  background:$primary;
+  color: $primary_text;
+  background: $primary;
   padding:1em;
   margin-bottom:1em;
   overflow:hidden;
@@ -1299,10 +1344,10 @@ table.nicetable {
     width:16px;
     height:16px;
     text-indent:-999999px;
-    background:url(images/sprite.png) -341px -263px no-repeat;
+    background:url(/cobrands/fixmystreet/images/sprite.png) -341px -263px no-repeat;
     @include border-radius(4px);
     &:hover {
-      background:#222 url(images/sprite.png) -341px -223px no-repeat;
+      background:#222 url(/cobrands/fixmystreet/images/sprite.png) -341px -223px no-repeat;
     }
   }
 }
@@ -1333,7 +1378,8 @@ table.nicetable {
   }
   a {
     @include inline-block;
-    background:$primary;
+    color: $primary_text;
+    background: $primary;
     padding-left:0.5em;
     padding-right:0.5em;
     color:#1a1a1a;
@@ -1347,7 +1393,7 @@ table.nicetable {
 
 // this is a bit of a hack to get some differentation between desk and mobile
 .desk-only {
-  display:none !important;
+  display:none;
 }
 
 // hide anything with this class if js is working
@@ -1366,6 +1412,7 @@ table.nicetable {
 /* Front page */
 #front-main {
   text-align:center;
+  margin: 1em;
   h2 {
     font: {
       style:italic;
@@ -1374,6 +1421,9 @@ table.nicetable {
     }
     color:#4d4d4d;
   }
+  p {
+    margin: 0.5em 0 0;
+  }
   #postcodeForm {
     @extend .full-width;
     padding:1em;
@@ -1392,7 +1442,7 @@ table.nicetable {
         display:table-cell;
         margin:0;
         padding:0.25em 2%;
-        width:82%;
+        width:86%;
         border:none;
         background:none;
         line-height:1.5em;
@@ -1460,7 +1510,6 @@ table.nicetable {
 #front-recently {
   .issue-list-a {
     border-bottom:none;
-    margin-bottom:0;
   }
 }
 
diff --git a/web/cobrands/fixmystreet/_colours.scss b/web/cobrands/fixmystreet/_colours.scss
index 2463cdeeb..1a62d0282 100644
--- a/web/cobrands/fixmystreet/_colours.scss
+++ b/web/cobrands/fixmystreet/_colours.scss
@@ -5,4 +5,5 @@ $primary_b: #F3B11E;
 $primary_text: #222;
 
 $contrast1: #00BD08;
+$contrast1_dark: #4B8304;
 $contrast2: #AA8D11;
diff --git a/web/cobrands/fixmystreet/_layout.scss b/web/cobrands/fixmystreet/_layout.scss
index b4c108ce9..cdd7a41e2 100644
--- a/web/cobrands/fixmystreet/_layout.scss
+++ b/web/cobrands/fixmystreet/_layout.scss
@@ -3,10 +3,10 @@
 
 //hacks for desk/mob only stuff
 .desk-only {
-  display:block !important;
+    display: block;
 }
 .mob-only {
-  display:none !important;
+    display: none;
 }
 
 body {
@@ -147,7 +147,8 @@ h1 {
           @include background(linear-gradient(#000, #444 10%, #444 95%, #111));
         }
         a.report-a-problem-btn {
-          background:$primary;
+          color: $primary_text;
+          background: $primary;
           padding:0.25em;
           margin:0.5em;
           color:#333;
@@ -197,28 +198,23 @@ h1 {
 // .content Is the white box
 
 // The narrow single column box
-.content{
+.content {
   width: 27em;
   margin-top: 3em;
-  background: #fff;
-  padding: 1em;
-  padding-bottom: 3em;
-  margin-left: 0.5em;
   margin-bottom: -1em;
+  margin-left: 0.5em;
+  padding: 1em 1em 3em;
+  background: #fff;
   @include box-shadow(0px 0px 6px 1px #000);
 }
 .ie6, .ie7, .ie8  {
   .content {
     // If no box-shadow, just want a boring black border to stand it out from the map.
-    border: 1px solid black;
+    border: 1px solid #666;
     //take off margins so we line up properly
-    margin: 0;
+    margin: 0 0 0 0.5em;
   }
 }
-//weird margining thing for ie8
-.ie8 .content {
-  margin-top:3em;
-}
 
 // map page - has fixed header and different styling
 body.mappage {
@@ -253,7 +249,7 @@ body.mappage {
     .container {
       float: left;
       width: 27em;
-      margin-left: 1.4em;
+      margin-left: 0.7em;
     }
     .nav-wrapper{
       z-index:1;
@@ -266,13 +262,6 @@ body.mappage {
     }
   }
 }
-.ie6 {
-  body.mappage {
-    .container {
-      margin-left: 0.7em;
-    }
-  }
-}
 //ie8 needs different stuff on .nav-wrapper so we 
 //have to define all the rest of it again as this resets
 //the z-index base yet again :S
@@ -415,10 +404,6 @@ body.twothirdswidthpage {
         &.m-app-iphone {
           background-position: -12px -3610px;
         }
-        &.m-app-iphone-streetreport {
-          background-position: -12px -3678px;
-          height:50px;
-        }
         &.m-app-droid {
           background-position: -12px -3756px;
         }
@@ -438,10 +423,6 @@ body.twothirdswidthpage {
 }
 .ie6 #footer-mobileapps ul li a {
   background:url(/cobrands/fixmystreet/images/ie_mobileapps.gif) -1px -1px no-repeat;
-  &.m-app-iphone-streetreport {
-    background-position: -1px -69px;
-    height:50px;
-  }
   &.m-app-droid {
     background-position: -1px -148px;
   }
@@ -596,7 +577,7 @@ body.twothirdswidthpage {
     @include box-shadow(-0em 0px 1em 1em #fff);
     li {
       border:none;
-      a {
+      a, input[type=submit] {
         font-size: 0.75em;
         color:#666;
         padding: 0.5em 1.5em 0.5em 0;
@@ -652,9 +633,14 @@ body.twothirdswidthpage {
     top:-0.5em;
     position: absolute;
     border-top: 0.5em solid transparent;
-    border-left: 0.5em solid #4B8304;
+    border-left: 0.5em solid $contrast1_dark;
     border-bottom:none;
   }
+  span {
+    display: block;
+    font-size: 80%;
+    padding-top: 0.5em;
+  }
 }
 .ie6 .big-green-banner {
   background: $contrast1 url(/cobrands/fixmystreet/images/ie_green_chevron.gif) right center no-repeat;
@@ -676,7 +662,7 @@ body.twothirdswidthpage {
       background-position:-324px -326px;
       background-repeat:no-repeat;
       &:before {
-        border-bottom: 0.75em solid #4B8304;
+        border-bottom: 0.75em solid $contrast1_dark;
       }
     }
   }
@@ -702,18 +688,13 @@ input[type=text],
 input[type=password],
 input[type=email],
 textarea{
-  width: 25em;
-}
-.form-box {
-  max-width:25em;
+    max-width: 25em;
 }
 
-
 /* form errors */
 div.form-error,
 p.form-error {
   display:block;
-  width:24.7em;
 }
 
 input.form-error,
@@ -743,7 +724,7 @@ textarea.form-error {
   }
 }
 .ie6, .ie7 {
-  #report-a-problem-sidebar {
+  #report-a-problem-sidebar, .general-sidebar-notes {
     left: 29em; // 0.5em left margin gone on .content in IE6/7, so reduce this accordingly.
   }
 }
@@ -782,19 +763,15 @@ textarea.form-error {
 
 body.frontpage {
   .table-cell {
-    // we do this so we can have full screen width elements
-    >.container {
-      width:100%;
-    }
     .content {
-      margin:14em auto 0 auto;
+      margin: 1em auto 0;
     }
   }
   .nav-wrapper-2{
     height:6em;
   }
   #site-header{
-    height:9em;
+    height:8em;
   }
   #site-logo{
     top:3em;
@@ -807,7 +784,7 @@ body.frontpage {
     p {
       top:-4em;
       right:0;
-      color: $primary;
+      color:$primary;
       background:none;
       @include box-shadow(rgba(0, 0, 0, 0) 0 0 0);
       a {
@@ -833,7 +810,7 @@ body.frontpage {
 .ie6, .ie7 {
   body.frontpage {
     #site-header {
-      height:3em;
+      height:4em;
     }
     #site-logo {
       top:-1em;
@@ -846,24 +823,13 @@ body.frontpage {
 .ie6 body.frontpage #site-logo {
   background:url(/cobrands/fixmystreet/images/ie_front_logo.gif) 0 0 no-repeat;
 }
-//weird margining thing for ie8
-.ie8 body.frontpage {
-  #front-main {
-    top:-12em;
-  }
-  .table-cell .content {
-    margin-top:12em;
-  }
-}
 
 // big yellow bit full screen width
 #front-main {
   color: $primary_text;
   background: $primary url(/cobrands/fixmystreet/images/tile-y.jpg);
-  position:absolute;
-  width:100%;
-  left:0;
-  top:-15em;
+  margin: 0;
+  padding: 1em;
   #front-main-container {
     max-width: 57em;
     margin:0 auto;
@@ -876,6 +842,7 @@ body.frontpage {
   #postcodeForm {
     background:none;
     overflow:hidden;
+    padding-bottom: 0;
     margin-right:0.5em;
     label {
       margin:0.5em 0;
@@ -889,8 +856,8 @@ body.frontpage {
         display:block;
         float:left;
         padding:0.25em 0.5em;
-        height:1.5em;
-        width:16em;
+        height:2em;
+        width:17em;
       }
       input#submit {
         display:block;
@@ -901,27 +868,40 @@ body.frontpage {
       }
     }
   }
+  a {
+    color: $primary_text;
+    text-decoration: underline;
+    &:hover {
+      text-decoration: none;
+    }
+  }
   a#geolocate_link {
     background:none;
     color:#222;
-    margin:-1em 0 0.5em 0;
+    text-decoration: none;
+    padding-bottom: 0;
     &:hover {
       text-decoration:underline;
       background:none;
     }
   }
 }
-.ie6, .ie7 {
-  #front-main {
-    top:2em;
+.ie7 #front-main {
+  #postcodeForm {
+    div {
+      input#pc {
+        height:1.5em;
+        width:16em;
+      }
+    }
   }
 }
 
-
 #front-howto {
   border-right:1em solid #fff;
   #front_stats {
     background:none;
+    color: #222;
     border-top:0.25em solid $primary;
     padding-top:1em;
     div {
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 9d5151189..09dbc46a7 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -3,33 +3,6 @@
  * FixMyStreet JavaScript
  */
 
-function form_category_onchange() {
-    var cat = $('#form_category');
-    var args = {
-        category: cat.val()
-    };
-
-    if ( typeof fixmystreet !== 'undefined' ) {
-        args.latitude = fixmystreet.latitude;
-        args.longitude = fixmystreet.longitude;
-    } else {
-        args.latitude = $('input[name="latitude"]').val();
-        args.longitude = $('input[name="longitude"]').val();
-    }
-
-    $.getJSON('/report/new/category_extras', args, function(data) {
-        if ( data.category_extra ) {
-            if ( $('#category_meta').size() ) {
-                $('#category_meta').html( data.category_extra);
-            } else {
-                $('#form_category_row').after( data.category_extra );
-            }
-        } else {
-            $('#category_meta').empty();
-        }
-    });
-}
-
 /*
  * general height fixing function
  *
@@ -80,12 +53,12 @@ function tabs(elem, indirect) {
 $(function(){
     var $html = $('html');
 
-    $html.removeClass('no-js').addClass('js');
-
-
-    // Preload the new report pin
-    document.createElement('img').src = '/i/pin-green.png';
+    var cobrand;
+    if (window.location.href.indexOf('bromley') != -1) {
+        cobrand = 'bromley';
+    }
 
+    // Deal with switching between mobile and desktop versions on resize
     var last_type;
     $(window).resize(function(){
         var type = $('#site-header').css('borderTopWidth');
@@ -106,7 +79,9 @@ $(function(){
             }
             if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') {
                 // Immediately go full screen map if on around page
-                $('#site-header').hide();
+                if (cobrand != 'bromley') {
+                    $('#site-header').hide();
+                }
                 $('#map_box').prependTo('.wrapper').css({
                     position: 'absolute',
                     top: 0, left: 0, right: 0, bottom: 0,
@@ -128,167 +103,61 @@ $(function(){
         } else {
             // Make map full screen on non-mobile sizes.
             $html.removeClass('mobile');
-            var map_pos = 'fixed', map_height = '100%';
-            if ($html.hasClass('ie6')) {
-                map_pos = 'absolute';
-                map_height = $(window).height();
+            if (cobrand == 'bromley') {
+                var bromley_right;
+                if ($html.hasClass('ie6') || $html.hasClass('ie7')) {
+                    bromley_right = '-480px';
+                } else {
+                    bromley_right = '0em';
+                }
+                // Do the same as CSS (in case resized from mobile).
+                $('#map_box').prependTo('.content').css({
+                    zIndex: 1, position: 'absolute',
+                    top: '1em', left: '', right: bromley_right, bottom: '',
+                    width: '464px', height: '464px',
+                    margin: 0
+                });
+            } else if ($html.hasClass('ie6')) {
+                $('#map_box').prependTo('.wrapper').css({
+                    zIndex: 0, position: 'absolute',
+                    top: 0, left: 0, right: 0, bottom: 0,
+                    width: '100%', height: $(window).height(),
+                    margin: 0
+                });
+            } else {
+                $('#map_box').prependTo('.wrapper').css({
+                    zIndex: 0, position: 'fixed',
+                    top: 0, left: 0, right: 0, bottom: 0,
+                    width: '100%', height: '100%',
+                    margin: 0
+                });
             }
-            $('#map_box').prependTo('.wrapper').css({
-                zIndex: 0, position: map_pos,
-                top: 0, left: 0, right: 0, bottom: 0,
-                width: '100%', height: map_height,
-                margin: 0
-            });
             if (typeof fixmystreet !== 'undefined') {
-                fixmystreet.state_map = 'full';
+                if (cobrand == 'bromley') {
+                    //$('#bromley-footer').hide();
+                } else {
+                    fixmystreet.state_map = 'full';
+                }
             }
             if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') {
                 // Remove full-screen-ness
-                $('#site-header').show();
+                var banner_text;
+                if (cobrand == 'bromley') {
+                    banner_text = 'Click map to report a problem<span>Yellow pins show existing reports</span>';
+                } else {
+                    $('#site-header').show();
+                    banner_text = 'Click map to report a problem';
+                }
                 $('#fms_pan_zoom').css({ top: '4.75em !important' });
                 $('.big-green-banner')
                     .removeClass('mobile-map-banner')
                     .prependTo('#side')
-                    .text('Click map to report a problem');
+                    .html(banner_text);
             }
             $('span.report-a-problem-btn').css({ cursor:'' }).off('.reportBtn');
         }
         last_type = type;
-    });
-
-    //add mobile class if small screen
-    $(window).resize();
-
-    $('#pc').focus();
-
-    $('input[type=submit]').removeAttr('disabled');
-    /*
-    $('#mapForm').submit(function() {
-        if (this.submit_problem) {
-            $('input[type=submit]', this).prop("disabled", true);
-        }
-        return true;
-    });
-    */
-
-    if (!$('#been_fixed_no').prop('checked') && !$('#been_fixed_unknown').prop('checked')) {
-        $('#another_qn').hide();
-    }
-    $('#been_fixed_no').click(function() {
-        $('#another_qn').show('fast');
-    });
-    $('#been_fixed_unknown').click(function() {
-        $('#another_qn').show('fast');
-    });
-    $('#been_fixed_yes').click(function() {
-        $('#another_qn').hide('fast');
-    });
-
-    // FIXME - needs to use translated string
-    jQuery.validator.addMethod('validCategory', function(value, element) {
-        return this.optional(element) || value != '-- Pick a category --'; }, validation_strings.category );
-
-    jQuery.validator.addMethod('validName', function(value, element) {
-        var validNamePat = /\ba\s*n+on+((y|o)mo?u?s)?(ly)?\b/i;
-        return this.optional(element) || value.length > 5 && value.match( /\S/ ) && !value.match( validNamePat ); }, validation_strings.category );
-
-    var form_submitted = 0;
-    var submitted = false;
-
-    $("form.validate").validate({
-        rules: {
-            title: { required: true },
-            detail: { required: true },
-            email: { required: true },
-            update: { required: true },
-            rznvy: { required: true }
-        },
-        messages: validation_strings,
-        onkeyup: false,
-        onfocusout: false,
-        errorElement: 'div',
-        errorClass: 'form-error',
-        // we do this to stop things jumping around on blur
-        success: function (err) { if ( form_submitted ) { err.addClass('label-valid').removeClass('label-valid-hidden').html( '&nbsp;' ); } else { err.addClass('label-valid-hidden'); } },
-        errorPlacement: function( error, element ) {
-            element.before( error );
-        },
-        submitHandler: function(form) {
-            if (form.submit_problem) {
-                $('input[type=submit]', form).prop("disabled", true);
-            }
-
-            form.submit();
-        },
-        // make sure we can see the error message when we focus on invalid elements
-        showErrors: function( errorMap, errorList ) {
-            if ( submitted && errorList.length ) {
-               $(window).scrollTop( $(errorList[0].element).offset().top - 120 );
-            }
-            this.defaultShowErrors();
-            submitted = false;
-        },
-        invalidHandler: function(form, validator) { submitted = true; }
-    });
-
-    $('input[type=submit]').click( function(e) { form_submitted = 1; } );
-
-    /* set correct required status depending on what we submit 
-    * NB: need to add things to form_category as the JS updating 
-    * of this we do after a map click removes them */
-    $('#submit_sign_in').click( function(e) {
-        $('#form_category').addClass('required validCategory').removeClass('valid');
-        $('#form_name').removeClass();
-    } );
-
-    $('#submit_register').click( function(e) { 
-        $('#form_category').addClass('required validCategory').removeClass('valid');
-        $('#form_name').addClass('required validName');
-    } );
-
-    $('#problem_submit > input[type="submit"]').click( function(e) { 
-        $('#form_category').addClass('required validCategory').removeClass('valid');
-        $('#form_name').addClass('required validName');
-    } );
-
-    $('#update_post').click( function(e) { 
-        $('#form_name').addClass('required').removeClass('valid');
-    } );
-
-    $('#form_category').change( form_category_onchange );
-
-    // Geolocation
-    if (geo_position_js.init()) {
-        $('#postcodeForm').after('<a href="#" id="geolocate_link">&hellip; or locate me automatically</a>');
-        $('#geolocate_link').click(function(e) {
-            e.preventDefault();
-            // Spinny thing!
-            if($('.mobile').length){
-                $(this).append(' <img src="/cobrands/fixmystreet/images/spinner-black.gif" alt="" align="bottom">');
-            }else{
-                $(this).append(' <img src="/cobrands/fixmystreet/images/spinner-yellow.gif" alt="" align="bottom">');
-            }
-            geo_position_js.getCurrentPosition(function(pos) {
-                $('img', this).remove();
-                var latitude = pos.coords.latitude;
-                var longitude = pos.coords.longitude;
-                location.href = '/around?latitude=' + latitude + ';longitude=' + longitude;
-            }, function(err) {
-                $('img', this).remove();
-                if (err.code == 1) { // User said no
-                } else if (err.code == 2) { // No position
-                    $(this).html("Could not look up location");
-                } else if (err.code == 3) { // Too long
-                    $('this').html("No result returned");
-                } else { // Unknown
-                    $('this').html("Unknown error");
-                }
-            }, {
-                enableHighAccuracy: true,
-                timeout: 10000
-            });
-        });
-    }
+    }).resize();
 
     /* 
      * Report a problem page 
@@ -361,10 +230,15 @@ $(function(){
     /*
      * Show stuff on input focus
      */
-    $('.form-focus-hidden').hide();
-    $('.form-focus-trigger').on('focus', function(){
-        $('.form-focus-hidden').fadeIn(500);
-    });
+    var form_focus_data = $('.form-focus-trigger').map(function() {
+        return $(this).val();
+    }).get().join('');
+    if (!form_focus_data) {
+        $('.form-focus-hidden').hide();
+        $('.form-focus-trigger').on('focus', function(){
+            $('.form-focus-hidden').fadeIn(500);
+        });
+    }
 
     /*
      * Show on click - pretty generic
@@ -479,12 +353,12 @@ $.fn.drawer = function(id, ajax) {
     });
 };
 
-    if ($('html.mobile').length) {
+    if ($('html.mobile').length || cobrand == 'bromley') {
         $('#council_wards').hide().removeClass('hidden-js').find('h2').hide();
         $('#key-tool-wards').click(function(e){
             e.preventDefault();
             $('#council_wards').slideToggle('800', function(){
-              $('#key-tool-wards').toggleClass('active');
+              $('#key-tool-wards').toggleClass('hover');
             });
         });
     } else {
@@ -575,7 +449,11 @@ $.fn.drawer = function(id, ajax) {
      */
     if (!$('html.mobile').length) {
         if (!($('body').hasClass('frontpage'))){
-            heightFix(window, '.content', -176);
+            var offset = -176;
+            if (cobrand == 'bromley') {
+                offset = -110;
+            }
+            heightFix(window, '.content', offset);
         }
     }