Merge branch 'master' into fmb-read-only

Conflicts:
	.gitignore
	bin/make_css
	perllib/FixMyStreet/Cobrand/FixMyStreet.pm

26 files changed, 616 insertions, 44 deletions

diff --git a/web/cobrands/barnet/_colours.scss b/web/cobrands/barnet/_colours.scss
new file mode 100644
index 000000000..2f5ccc42b
--- /dev/null
+++ b/web/cobrands/barnet/_colours.scss
@@ -0,0 +1,9 @@
+/* COLOURS */
+
+$primary: #E9E9EA;
+$primary_b: #000000;
+$primary_text: #3E3D44;
+
+$contrast1: #E1E3E4;
+$contrast1_dark: darken(#E1E3E4, 10%);
+$contrast2: #AA8D11;
diff --git a/web/cobrands/barnet/barnet.scss b/web/cobrands/barnet/barnet.scss
new file mode 100644
index 000000000..a6feb018f
--- /dev/null
+++ b/web/cobrands/barnet/barnet.scss
@@ -0,0 +1,115 @@
+/* Parts of barnet'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";
+
+#column_nav li { list-style: none ;}
+
+#content ol.big-numbers li {
+    padding: 0 0 0 2.5em;
+}
+
+#barnet-wrapper {
+  width: 100%;
+  display: table;
+  caption-side: bottom;
+}
+
+#barnet-powered-by {
+    clear: both;
+}
+
+body {font-size: 75%; font-family: Arial, Helvetica, sans-serif; color: #3e3d44; padding: 0; margin: 0; line-height: 1.5; background: #e9e9ea;}
+body > html {font-size: 12px;}
+
+#barnet-wrapper {padding: 0; margin: 20px auto; width: 960px; background: #fff;}
+#ie_wrapper {display: block; padding: 20px 25px 25px;}
+#page {float: left; width: 100%;}
+
+#mast {clear: both;}
+
+#mast .pseudoH1 {margin: 0 0 0 -3px; padding: 0; background: url(img/barnet-logo.gif) no-repeat top left; width: 240px; height: 38px; float: left;}
+#mast .pseudoH1 a, #mast .pseudoH1 a:link, #mast .pseudoH1 a:visited, #mast .pseudoH1 a:hover, #mast .pseudoH1 a:active {display: block; width: 240px; height: 38px; padding: 0; background: url(img/barnet-logo.gif) no-repeat top left;}
+#mast .pseudoH1 span {position: absolute; margin-top: -13000px; top: -13000px;}
+
+#mast .mast_links {float: right; display: inline; margin: 0; padding: 10px 0 0; list-style: none; overflow: hidden;}
+
+#mast #search {clear: both; float: right; margin: 8px 0 0; background: #e1e3e4; border-top: 6px solid #bddadc; border-bottom: 2px solid #c8cacb; width: 100%; padding: 3px 0 2px; height: 21px;}
+
+/* ############################################################## */
+
+#content {margin: 0; width: 910px; overflow: hidden; min-height: 350px;}
+#content.withWidth {margin: 0 0 0 232px; width: 446px; overflow: hidden; float: left; display: inline;}
+#content.fullWidth {width: 678px;}
+#content.home {margin-top: 18px;}
+
+.mappage {
+    #content.withWidth {margin: 0 0 0 0px; width: auto; overflow: hidden; float: left; display: inline;}
+    #content.fullWidth {width: 900px;}
+}
+
+/* IE6 ignore the second #foo.bar rule so we have to fudge it another way */
+.ie6 {
+    .mappage {
+        #content {
+            margin: 0 0 0 0px;
+            overflow: hidden;
+            float: left;
+            display: inline;
+            width: 900px;
+        }
+    }
+}
+
+#breadcrumb {font-size: .9em; color: #5c6267; padding: 6px 0; margin: 0 0 0 232px;}
+#breadcrumb.full {margin: 0;}
+#breadcrumb ul {margin: 0; padding: 0; list-style: none;}
+#breadcrumb ul li {margin: 0; padding: 0 4px 0 0; display: inline;}
+#breadcrumb ul li a:link, #breadcrumb ul li a:visited, #breadcrumb ul li a:hover, #breadcrumb ul li a:active {color: #5c6267; background: url(img/bcArrow.gif) no-repeat right center; padding: 0 10px 0 0; font-weight: normal;}
+#breadcrumb ul li span {font-weight: normal; color: #5c6267;}
+
+/* ############################################################## */
+
+#column_nav {width: 214px; float: left; display: inline; padding: 0; margin: -35px 0 0 -910px; border-right: 3px solid #fff;}
+
+.ie6 #column_nav {
+    float: none;
+    position: absolute;
+    top: 85px;
+    margin: 0 0 0 0px;
+}
+
+body.mappage #column_nav { display: none; }
+
+#content h1 {margin: 0 0 20px; font-size: 1.8em; border-bottom: 6px solid #bed9dd; font-family: Georgia, Times, 'Times New Roman', serif; color: #5d6167;}
+#content h1 span {padding: 6px 7px 3px; border: 1px solid #eff1f2; border-bottom: 0 none; display: block;}
+#content h1#reports_heading span { display: none; }
+
+#column_nav .navigation {background: #fff; margin: 0 0 4px;}
+#column_nav h2 {font-size: 1.2em; padding: 0; height: 29px; margin: 0; border-radius: 0 0 3px 3px; background: url(img/nav-bg-active.gif) left bottom repeat-x; border-top: 6px solid #bddadc;}
+#column_nav #nav1 h2 {border-radius: 0 0 0 3px;}
+#column_nav h2 a {color: #fff; padding: 3px 10px 0 26px; display: block; background: url(img/nav-arrow.gif) 8px 7px no-repeat;}
+#column_nav .active h2 a {background: url(img/nav-arrow-active.gif) 8px 8px no-repeat;}
+#column_nav ul {margin: 0 0 0 4px; padding: 8px 7px 4px; border-width: 0 1px 1px; border-color: #e1e1e1; border-style: solid; border-radius: 3px; list-style: none; background: #fff; background: -moz-linear-gradient(top, #ffffff 0%, #f7f9f8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f7f9f8)); background: -webkit-linear-gradient(top, #ffffff 0%,#f7f9f8 100%); background: -o-linear-gradient(top, #ffffff 0%,#f7f9f8 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f7f9f8 100%); background: linear-gradient(top, #ffffff 0%,#f7f9f8 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f9f8',GradientType=0);}
+#column_nav ul li {margin: 0; padding: 2px 4px; border-bottom: 1px solid #bfc0c1; color: #333; font-size: .9em;}
+#column_nav ul li.lastItem {border-bottom: none;}
+#column_nav ul li a:link, #column_nav ul li a:visited, #column_nav ul li a:hover, #column_nav ul li a:active {display: block; color: #333; font-weight: normal;}
+#column_nav ul li a:hover, #column_nav ul li a:active {text-decoration: none; color: #0090a2;}
+
+/* ############################################################## */
+
+#footer {clear: both; margin: 10px 0 0; padding: 15px 0 0; text-align: left;}
+#footer p {border-top: 1px solid #dadadb; border-bottom: 1px solid #dadadb; margin: 0 0 5px; color: #5d6167; float: left; display: inline; height: 24px; padding: 8px 0 2px; width: 551px;}
+#footer p a {color: #5d6167; font-weight: normal; padding: 0 2px;}
+#footer p.assocLinks {float: right; display: inline; padding: 5px 0; width: 359px;}
+#footer p.assocLinks a {float: left; display: inline; margin: 0 0 0 8px; padding: 0; background-position: center top; background-repeat: no-repeat; width: 24px; height: 24px;}
+#footer p.assocLinks a:active, #footer p.assocLinks a:hover, #footer p.assocLinks a:focus {background-position: center bottom;}
+#footer a#goto_browsealoud {background-image: url(img/browsealoud.gif); width: 95px; height: 25px; margin-top: 1px;}
+#footer a#goto_directgov {background-image: url(img/directgov.gif); width: 90px; margin: 0 0 0 22px;}
+#footer a#share_facebook {background-image: url(img/social1-facebook.gif); margin: 0 0 0 24px;}
+#footer a#share_twitter {background-image: url(img/social2-twitter.gif);}
+#footer a#share_youtube {background-image: url(img/social3-youtube.gif);}
+#footer a#share_flickr {background-image: url(img/social4-flickr.gif);}
+#bottomBar {background: url(img/barnet-footer-logo.gif) 771px 12px no-repeat #21aaaa; display: block; width: 100%; height: 56px; border-top: 6px solid #bddadc;}
diff --git a/web/cobrands/barnet/base.scss b/web/cobrands/barnet/base.scss
new file mode 100644
index 000000000..0447c6779
--- /dev/null
+++ b/web/cobrands/barnet/base.scss
@@ -0,0 +1,39 @@
+@import "../fixmystreet/_h5bp";
+@import "./_colours";
+@import "../fixmystreet/_mixins";
+@import "compass";
+
+@import "../fixmystreet/_base";
+
+#mast,
+#breadcrumb,
+#page-title,
+#column_nav,
+#footer,
+#bottomBar
+{ display: none }
+
+#site-header{
+    @include background(none);
+    background-color: white;
+}
+#site-logo {
+    width: 235px;
+    background: url('/cobrands/barnet/img/barnet-logo.gif') -3px -3px no-repeat;
+}
+#nav-link {
+    right: 1em;
+    background: url('/cobrands/barnet/img/barnet-skipnav.png') no-repeat;
+}
+
+#front-main #postcodeForm div input#submit,
+.green-btn,
+button.green-btn,
+input.green-btn,
+.red-btn,
+button.red-btn,
+input.red-btn{
+  @include button-reset;
+  background: #5D6167;
+  color: white;
+}
diff --git a/web/cobrands/barnet/config.rb b/web/cobrands/barnet/config.rb
new file mode 100644
index 000000000..cab97b18f
--- /dev/null
+++ b/web/cobrands/barnet/config.rb
@@ -0,0 +1,25 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = ""
+sass_dir = ""
+images_dir = ""
+javascripts_dir = ""
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
+
+line_comments = false # by Compass.app 
diff --git a/web/cobrands/barnet/img/barnet-footer-logo.gif b/web/cobrands/barnet/img/barnet-footer-logo.gif
new file mode 100644
index 000000000..afba1cca2
--- /dev/null
+++ b/web/cobrands/barnet/img/barnet-footer-logo.gif
diff --git a/web/cobrands/barnet/img/barnet-logo.gif b/web/cobrands/barnet/img/barnet-logo.gif
new file mode 100644
index 000000000..86e0f4ee8
--- /dev/null
+++ b/web/cobrands/barnet/img/barnet-logo.gif
diff --git a/web/cobrands/barnet/img/barnet-skipnav.png b/web/cobrands/barnet/img/barnet-skipnav.png
new file mode 100644
index 000000000..21efe0f67
--- /dev/null
+++ b/web/cobrands/barnet/img/barnet-skipnav.png
diff --git a/web/cobrands/barnet/img/bcArrow.gif b/web/cobrands/barnet/img/bcArrow.gif
new file mode 100644
index 000000000..4e7c1848e
--- /dev/null
+++ b/web/cobrands/barnet/img/bcArrow.gif
diff --git a/web/cobrands/barnet/img/browsealoud.gif b/web/cobrands/barnet/img/browsealoud.gif
new file mode 100644
index 000000000..4fbb3eded
--- /dev/null
+++ b/web/cobrands/barnet/img/browsealoud.gif
diff --git a/web/cobrands/barnet/img/directgov.gif b/web/cobrands/barnet/img/directgov.gif
new file mode 100644
index 000000000..1c9dd22e2
--- /dev/null
+++ b/web/cobrands/barnet/img/directgov.gif
diff --git a/web/cobrands/barnet/img/fms-logo.png b/web/cobrands/barnet/img/fms-logo.png
new file mode 100644
index 000000000..23bea6b0f
--- /dev/null
+++ b/web/cobrands/barnet/img/fms-logo.png
diff --git a/web/cobrands/barnet/img/nav-arrow-active.gif b/web/cobrands/barnet/img/nav-arrow-active.gif
new file mode 100644
index 000000000..89ff9d0b3
--- /dev/null
+++ b/web/cobrands/barnet/img/nav-arrow-active.gif
diff --git a/web/cobrands/barnet/img/nav-bg-active.gif b/web/cobrands/barnet/img/nav-bg-active.gif
new file mode 100644
index 000000000..0d2ec9873
--- /dev/null
+++ b/web/cobrands/barnet/img/nav-bg-active.gif
diff --git a/web/cobrands/barnet/img/social1-facebook.gif b/web/cobrands/barnet/img/social1-facebook.gif
new file mode 100644
index 000000000..41b404df0
--- /dev/null
+++ b/web/cobrands/barnet/img/social1-facebook.gif
diff --git a/web/cobrands/barnet/img/social2-twitter.gif b/web/cobrands/barnet/img/social2-twitter.gif
new file mode 100644
index 000000000..17f368536
--- /dev/null
+++ b/web/cobrands/barnet/img/social2-twitter.gif
diff --git a/web/cobrands/barnet/img/social3-youtube.gif b/web/cobrands/barnet/img/social3-youtube.gif
new file mode 100644
index 000000000..eeb6ba356
--- /dev/null
+++ b/web/cobrands/barnet/img/social3-youtube.gif
diff --git a/web/cobrands/barnet/img/social4-flickr.gif b/web/cobrands/barnet/img/social4-flickr.gif
new file mode 100644
index 000000000..300e75da0
--- /dev/null
+++ b/web/cobrands/barnet/img/social4-flickr.gif
diff --git a/web/cobrands/barnet/layout.scss b/web/cobrands/barnet/layout.scss
new file mode 100644
index 000000000..97b27cfff
--- /dev/null
+++ b/web/cobrands/barnet/layout.scss
@@ -0,0 +1,260 @@
+@import "_colours";
+@import "../fixmystreet/_layout";
+
+#mast,
+#breadcrumb,
+#page-title,
+#column_nav,
+#footer,
+#bottomBar {
+    display: block;
+}
+
+// So that map appears underneath the header
+.wrapper {
+    position: relative;
+}
+.ie6, .ie7 {
+    .wrapper {
+        padding-top: 1em;
+    }
+}
+
+#front-main {
+    background: $primary;
+    @include border-radius(1em 1em 0 0);
+    margin-bottom: 1em;
+    padding-top: 0;
+    width: 678px;
+    // layout sets this because base has it slightly lighter
+    h2 {
+        color: $primary_text;
+    }
+    #front-main-container {
+        padding: 1em;
+    }
+}
+
+#front_intro {
+    float: left;
+    margin-right: 3em;
+}
+
+#front_recent {
+    margin-left: 3em;
+}
+
+body.fullwidthpage {
+    .content {
+        width: 52em;
+    }
+}
+.ie6 {
+    body.fullwidthpage {
+        #front-main {
+            margin-top: -4em;
+        }
+        #front-howto,
+        #front-recently {
+            width: 26em;
+        }
+        .container {
+            padding: 0;
+        }
+        .content {
+            margin-left: 0px;
+            width: 55em;
+        }
+        div.img {
+            margin-top: -3.3em;
+        }
+    }
+}
+
+body.twothirdswidthpage {
+    .content {
+        @include box-shadow(none);
+        width: 640px;
+        margin-top: 0;
+        .sticky-sidebar {
+            display: none;
+            aside {
+                top: 25em;
+            }
+        }
+    }
+}
+
+.nav-wrapper {
+    display: none;
+}
+
+.mappage {
+    #breadcrumb {
+        margin-left: 0px;
+    }
+}
+
+.frontpage .content {
+    margin: 0;
+    @include box-shadow(none);
+}
+.ie6, .ie7, .ie8  {
+    .frontpage .content {
+        border: none;
+    }
+}
+
+#content .container h1 {
+    border-bottom: none;
+    font-size: 2em;
+    margin-bottom: 0.5em;
+}
+
+.shadow-wrap {
+  position: static;
+  padding-top: 0;
+  margin-bottom: 1em;
+  ul#key-tools {
+    border-top: none;
+    border-bottom: 1px solid $primary;
+    li {
+        a.chevron {
+            background-position: right -3230px;
+        }
+        a.feed {
+            background-position: right -3080px;
+        }
+        a.abuse {
+            background-position: right -2940px;
+        }
+    }
+  }
+  ul#key-tools.singleton {
+    li a {
+        padding-right: 4em;
+    }
+  }
+}
+
+#content h1.big-green-banner {
+    font-size: 1.4em;
+    margin-left: -2em;
+    background: #e1e3e4 url(/cobrands/fixmystreet/images/sprite.png) right -2192px no-repeat
+}
+
+body.frontpage {
+    #user-meta {
+        p {
+            top: 1em;
+            color: $primary_text;
+            a {
+                background: none;
+            }
+        }
+    }
+}
+#user-meta {
+    float: right;
+    p {
+        @include box-shadow(none);
+        color: $primary_text;
+        position: relative;
+        background: none;
+        a {
+            color: $primary_text;
+            background: none;
+        }
+        a:hover {
+            background: $primary;
+        }
+    }
+}
+.ie6 {
+    #user-meta {
+        float: none;
+        p {
+            position: absolute;
+            margin-top: 35px;
+            margin-right: 20px;
+            right: 0px;
+            left: auto;
+        }
+
+    }
+    .mappage {
+        #user-meta {
+            p {
+                margin-right: -100px;
+            }
+        }
+    }
+}
+
+/* barnet styles */
+
+.clear {
+    clear: both;
+}
+
+.container {
+  padding: 0 1em;
+}
+
+#site-header,
+#site-logo {
+    display: none !important;
+}
+
+
+#report-a-problem-sidebar {
+    left: 30em;
+    top: 4em;
+    width: 17em;
+    .sidebar-tips,
+    .sidebar-notes {
+        font-size: 0.9em;
+    }
+}
+.ie6 {
+    #report-a-problem-sidebar {
+        margin-top: -4em;
+        left: 30em;
+        .sidebar-notes {
+            padding-bottom: 0.5em;
+        }
+        p {
+            margin-bottom: 0.4em;
+        }
+    }
+}
+
+
+.general-sidebar-notes {
+    left: 25em;
+    width: 14em;
+    font-size: 1.2em;
+    p {
+        margin-bottom: 0 !important;
+    }
+}
+
+#front-howto #front_stats div big,
+ol.big-numbers > li::before {
+    color: #C0E8E8;
+}
+
+.banner {
+    p {
+        top: -2em;
+    }
+    p#fixed {
+        padding-top: 4em;
+        background: #00BD08;
+    }
+}
+
+
+#map_box {
+    border: 1px solid black;
+}
diff --git a/web/cobrands/barnet/position_map.js b/web/cobrands/barnet/position_map.js
new file mode 100644
index 000000000..465d852ec
--- /dev/null
+++ b/web/cobrands/barnet/position_map.js
@@ -0,0 +1,25 @@
+function position_map_box() {
+    var map_pos = 'absolute', map_height = $('.wrapper').height();
+    // on the all reports page the height of the wrapper leads to a very
+    // large map so we set a maximum size
+    if ( map_height > 600 ) {
+        map_height = 600;
+    }
+    $('#map_box').prependTo('.wrapper').css({
+        zIndex: 0, position: map_pos,
+        top: 1, left: $('.wrapper').left,
+        right: 0, bottom: $('.wrapper').bottom + 1,
+        width: '898px', height: map_height,
+        margin: 0
+    });
+}
+
+function map_fix() {
+    var height = $('.wrapper').height() - 3;
+    if ( height > 600 ) {
+        height = 600;
+    }
+    $('#map_box').height(height);
+}
+
+var slide_wards_down = 1;
diff --git a/web/cobrands/bromley/position_map.js b/web/cobrands/bromley/position_map.js
new file mode 100644
index 000000000..dddef3def
--- /dev/null
+++ b/web/cobrands/bromley/position_map.js
@@ -0,0 +1,19 @@
+function position_map_box() {
+    var $html = $('html');
+    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
+    });
+}
+
+function map_fix() {}
+var slide_wards_down = 1;
diff --git a/web/cobrands/fixmystreet/_layout.scss b/web/cobrands/fixmystreet/_layout.scss
index cdd7a41e2..0973e645d 100644
--- a/web/cobrands/fixmystreet/_layout.scss
+++ b/web/cobrands/fixmystreet/_layout.scss
@@ -293,7 +293,6 @@ body.fullwidthpage {
 }
 // two thirds width page, also has option for a sidebar which can be sticky or not
 body.twothirdswidthpage {
-  @extend .fullwidthpage;
   .content {
     width:40em;
     position: relative;
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 09dbc46a7..c8ed8ae51 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -103,35 +103,7 @@ $(function(){
         } else {
             // Make map full screen on non-mobile sizes.
             $html.removeClass('mobile');
-            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
-                });
-            }
+            position_map_box();
             if (typeof fixmystreet !== 'undefined') {
                 if (cobrand == 'bromley') {
                     //$('#bromley-footer').hide();
@@ -353,7 +325,7 @@ $.fn.drawer = function(id, ajax) {
     });
 };
 
-    if ($('html.mobile').length || cobrand == 'bromley') {
+    if ($('html.mobile').length || slide_wards_down ) {
         $('#council_wards').hide().removeClass('hidden-js').find('h2').hide();
         $('#key-tool-wards').click(function(e){
             e.preventDefault();
@@ -382,6 +354,7 @@ $.fn.drawer = function(id, ajax) {
             var $v = $(this);
             $('<input/>').attr({ name:$v.attr('name'), value:$v.val(), type:'hidden' }).appendTo(form);
         });
+        $('body').append(form);
         form.submit();
     });
 
@@ -454,6 +427,8 @@ $.fn.drawer = function(id, ajax) {
                 offset = -110;
             }
             heightFix(window, '.content', offset);
+            // in case we have a map that isn't full screen
+            map_fix();
         }
     }
 
diff --git a/web/cobrands/fixmystreet/position_map.js b/web/cobrands/fixmystreet/position_map.js
new file mode 100644
index 000000000..4a18d9f9a
--- /dev/null
+++ b/web/cobrands/fixmystreet/position_map.js
@@ -0,0 +1,21 @@
+function position_map_box() {
+    var $html = $('html');
+    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
+        });
+    }
+}
+
+function map_fix() {}
+var slide_wards_down = 0;
diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js
index 36d47b5b2..b689d501c 100644
--- a/web/js/fixmystreet.js
+++ b/web/js/fixmystreet.js
@@ -47,7 +47,7 @@ $(function(){
 
     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 );
+        return this.optional(element) || value.length > 5 && value.match( /\S/ ) && value.match( /\s/ ) && !value.match( validNamePat ); }, validation_strings.category );
 
     var form_submitted = 0;
     var submitted = false;
@@ -108,7 +108,10 @@ $(function(){
 
     $('#submit_register').click( function(e) {
         $('#form_category').addClass('required validCategory').removeClass('valid');
-        $('#form_name').addClass('required validName');
+        $('#form_name').addClass('required');
+        if ( $('#mapForm').length ) {
+            $('#form_name').addClass('validName');
+        }
         $('#form_first_name').addClass('required');
         $('#form_last_name').addClass('required');
         $('#form_fms_extra_title').addClass('required');
@@ -116,7 +119,10 @@ $(function(){
 
     $('#problem_submit > input[type="submit"]').click( function(e) {
         $('#form_category').addClass('required validCategory').removeClass('valid');
-        $('#form_name').addClass('required validName');
+        $('#form_name').addClass('required');
+        if ( $('#mapForm').length ) {
+            $('#form_name').addClass('validName');
+        }
         $('#form_first_name').addClass('required');
         $('#form_last_name').addClass('required');
         $('#form_fms_extra_title').addClass('required');
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index cf873edd6..eca1fc074 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -504,6 +504,8 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
             // e.xy is relative to top left of map, which might not be top left of page
             e.xy.x += bo.left;
             e.xy.y += bo.top;
+
+            // 24 and 64 is the width and height of the marker pin
             if (e.xy.y <= o.top || (e.xy.x >= o.left && e.xy.x <= o.left + w + 24 && e.xy.y >= o.top && e.xy.y <= o.top + h + 64)) {
                 // top of the page, pin hidden by header;
                 // or underneath where the new sidebar will appear
diff --git a/web/js/southampton.js b/web/js/southampton.js
index c0fa48b06..af090d89b 100644
--- a/web/js/southampton.js
+++ b/web/js/southampton.js
@@ -3,6 +3,37 @@
  * FixMyStreet JavaScript for Southampton
  */
 
+function update_category_extra(msg) {
+    var content = '<div style="margin: 1em 0em 1em 6.5em"><strong>' + msg + '</strong></div>';
+    var el = $('#category_extra');
+    if ( el.length ) {
+        el.html( content );
+    } else {
+        var cat_extra = '<div id="category_extra" style="margin:0; display_none;">' +
+            content +
+            '</div>';
+        $('#form_title').closest('div.form-field').after(cat_extra);
+    }
+    $('#category_extra').show('fast');
+}
+
+function check_depth() {
+    var depth = $(this).val();
+    if ('Deeper than a tennis ball' == depth) {
+        var content = '<div style="margin: 1em 0em 1em 6.5em"><strong>' +
+            'Please contact Actionline on 0800 5 19 19 19 so your report can be dealt with urgently' +
+            '</strong></div>';
+        var depth_extra = $('#depth_extra');
+        if ( depth_extra.length ) {
+            depth_extra.html( content );
+            depth_extra.show('fast');
+        } else {
+            $('#form_depth').after( '<div id="depth_extra">' + content + '</div>' );
+        }
+    } else {
+        $('#depth_extra').hide('fast');
+    }
+}
 
 $(function(){
 
@@ -20,15 +51,19 @@ $(function(){
             input.val(input.attr('placeholder'));
         }
     }).blur();
-        
+
     // use on() here because the #form_category may be replaced 
     // during the page's lifetime
     $("#problem_form").on("change.southampton", "select#form_category", 
-      function() {    
+      function() {
+        $('#form_sign_in').show('fast');
+        $('#problem_submit').show('fast');
+        $('#street_light_report').hide('fast');
+        $('#depth_extra').hide('fast');
+        $('#category_extra').hide('fast');
         var category = $(this).val();
         if ('Potholes' == category) {
-            if (!$('#potholes_extra').length) {
-                var qns = '<div id="potholes_extra" style="margin:0; display:none;">' +
+            var content =
                 '<div class="form-field"><label for="form_size">Size:</label>' +
                 '<select name="detail_size"><option>-- Please select --<option>Unknown' +
                 '<option>Small: No larger than a dinner plate (up to 30cm/12inches)' +
@@ -36,17 +71,59 @@ $(function(){
                 '<option>Large: Larger than a dustbin lid (over 60cm/24inches)' +
                 '</select></div>' +
                 '<div class="form-field"><label for="form_depth">Depth:</label>' +
-                '<select name="detail_depth"><option>-- Please select --<option>Unknown' +
+                '<select id="form_depth" name="detail_depth"><option>-- Please select --<option>Unknown' +
                 '<option>No deeper than a golf ball (up to 4cm/1.5inches)' +
                 '<option>No deeper than a tennis ball (up to 6.5cm/2.5inches)' +
                 '<option>Deeper than a tennis ball' +
-                '</select></div></div>';
+                '</select></div>';
+            if (!$('#category_extra').length) {
+                var qns = '<div id="category_extra" style="margin:0; display:none;">' +
+                content +
+                '</div>';
                 $('#form_title').closest('div.form-field').after(qns);
-            } 
-            $('#potholes_extra').show('fast');
+            } else {
+                $('#category_extra').html( content );
+            }
+            $('#category_extra').show('fast');
+            $('#form_depth').on('change', check_depth );
+        } else if ('Fly Tipping' == category) {
+            update_category_extra( 'Please list/detail items fly-tipped in the description box &amp; if it has been left on council or private property (if you know).' );
+        } else if ('Litter' == category) {
+            update_category_extra( 'Please detail the type of litter.  If you are reporting broken glass, syringes, oil spills or human excrement, please contact Actionline on 0800 5 19 19 19 so your report can be dealt with.' );
+        } else if ('Leaves' == category) {
+            update_category_extra( 'Please give as much information as you can, e.g. approximate quantity in bin bags. Thank you' );
+        } else if ('Dead animals' == category) {
+            update_category_extra( 'Please give as much information as you can, e.g. which animal, on road or pavement. Thank you' );
+        } else if ('Shopping trolleys' == category) {
+            update_category_extra( 'Please give as much information as you can, e.g. which supermarket. Thank you' );
+        } else if ('Bollards' == category) {
+            update_category_extra( 'Please give as much information as you can, e.g. are they lit, metal or concrete. Thank you' );
+        } else if ('Overhanging vegetation' == category) {
+            update_category_extra( 'Please give as much information as you can, e.g. is it coming from a private property or open area. Thank you' );
+        } else if ('Graffiti' == category) {
+            var graffiti_content =
+                '<div class="form-field"><label for="form_offensive">Is it racist/ offensive:</label>' +
+                '<select name="detail_offensive"><option>-- Please select --' +
+                '<option>Yes<option>No</select></div>';
+            if (!$('#category_extra').length) {
+                var graffiti_qns = '<div id="category_extra" style="margin:0; display:none;">' +
+                graffiti_content +
+                '</div>';
+                $('#form_title').closest('div.form-field').after(graffiti_qns);
+            } else {
+                $('#category_extra').html( graffiti_content );
+            }
+            $('#category_extra').show('fast');
+        } else if ('Street lighting' == category) {
+            $('#form_sign_in').hide('fast');
+            $('#problem_submit').hide('fast');
+            $('#category_extra').hide('fast');
+            var lighting_content =
+                '<div id="street_light_report" style="margin: 1em 0em 1em 6.5em">Please report Street light problems using the Southampton Street Lighting site at: <a href="http://www.lightsoninsouthampton.co.uk/Public/ReportFault.aspx">http://www.lightsoninsouthampton.co.uk/Public/ReportFault.aspx</a></div>';
+            $('#form_category_row').after(lighting_content);
         } else {
-            $('#potholes_extra').hide('fast');
-        }   
+            $('#category_extra').hide('fast');
+        }
     }
     ).change(); // change called to trigger (in case we've come in with potholes selected)