bring CSS and JS up to date with web version

3 files changed, 426 insertions, 283 deletions

diff --git a/phonegap/www/css/base.css b/phonegap/www/css/base.css
index 8dd1b1534..35b1853a2 100644
--- a/phonegap/www/css/base.css
+++ b/phonegap/www/css/base.css
@@ -407,10 +407,9 @@ td {
    Print styles.
    Inlined to avoid required HTTP connection: h5bp.com/r
    ========================================================================== */
+/* mySociety removal: bits of * and :after */
 @media print {
   * {
-    background: transparent !important;
-    color: black !important;
     box-shadow: none !important;
     text-shadow: none !important;
     filter: none !important;
@@ -422,19 +421,10 @@ td {
     text-decoration: underline;
   }
 
-  a[href]:after {
-    content: " (" attr(href) ")";
-  }
-
   abbr[title]:after {
     content: " (" attr(title) ")";
   }
 
-  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
-    content: "";
-  }
-
-  /* Don't show links for images, or javascript/internal links */
   pre, blockquote {
     border: 1px solid #999;
     page-break-inside: avoid;
@@ -468,58 +458,13 @@ td {
 }
 /* COLOURS */
 /* HEADINGS and TYPOGRAPHY */
-@font-face {
-  font-family: 'MuseoSans';
-  src: url("../fonts/MuseoSans_300-webfont.eot");
-  src: url("../fonts/MuseoSans_300-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/MuseoSans_300-webfont.woff") format("woff"), url("../fonts/MuseoSans_300-webfont.ttf") format("truetype"), url("../fonts/MuseoSans_300-webfont.svg#MuseoSans300") format("svg");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'MuseoSans';
-  src: url("../fonts/MuseoSans_300_Italic-webfont.eot");
-  src: url("../fonts/MuseoSans_300_Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/MuseoSans_300_Italic-webfont.woff") format("woff"), url("../fonts/MuseoSans_300_Italic-webfont.ttf") format("truetype"), url("../fonts/MuseoSans_300_Italic-webfont.svg#MuseoSans300Italic") format("svg");
-  font-weight: normal;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'MuseoSans';
-  src: url("../fonts/MuseoSans_500-webfont.eot");
-  src: url("../fonts/MuseoSans_500-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/MuseoSans_500-webfont.woff") format("woff"), url("../fonts/MuseoSans_500-webfont.ttf") format("truetype"), url("../fonts/MuseoSans_500-webfont.svg#MuseoSans500") format("svg");
-  font-weight: bold;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'MuseoSans';
-  src: url("../fonts/MuseoSans_500_Italic-webfont.eot");
-  src: url("../fonts/MuseoSans_500_Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/MuseoSans_500_Italic-webfont.woff") format("woff"), url("../fonts/MuseoSans_500_Italic-webfont.ttf") format("truetype"), url("../fonts/MuseoSans_500_Italic-webfont.svg#MuseoSans500Italic") format("svg");
-  font-weight: bold;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Museo300-display';
-  src: url("../fonts/Museo300-Regular-webfont.eot");
-  src: url("../fonts/Museo300-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Museo300-Regular-webfont.woff") format("woff"), url("../fonts/Museo300-Regular-webfont.ttf") format("truetype"), url("../fonts/Museo300-Regular-webfont.svg#Museo300") format("svg");
-  font-weight: normal;
-  font-style: normal;
-}
-
-/* Opera has a bug (from around 10.5 upwards to current 11.6) with showing the
- * table caption *at all* if the header is set to a font-face :( */
-noindex:-o-prefocus, #site-header {
-  font-family: sans-serif;
-}
-
 body {
-  font-family: 'MuseoSans', 'Helvetica', 'Arial', sans-serif;
+  font-family: MuseoSans, Helmet, Freesans, sans-serif;
   margin: 0;
   font-size: 1em;
   line-height: 1.5;
   color: #222;
+  background-color: #fff;
 }
 
 p {
@@ -529,18 +474,18 @@ p {
 }
 
 small, .small-print {
-  font-family: 'helvetica', 'arial',sans-serif;
+  font-family: Helmet, Freesans, sans-serif;
   font-style: italic;
   font-size: 0.8125em;
   line-height: 1.2307em;
 }
 
 h1 {
-  font-family: 'Museo300-display', 'Helvetica', 'Arial', sans-serif;
+  font-family: 'Museo300-display', MuseoSans, Helmet, Freesans, sans-serif;
   font-size: 2em;
   line-height: 1em;
   font-weight: normal;
-  margin-top: 0;
+  margin-top: 0.5em;
   margin-bottom: 0.5em;
 }
 
@@ -558,7 +503,7 @@ h1#reports_heading a {
 }
 
 h2 {
-  font-family: 'Museo300-display', 'Helvetica', 'Arial', sans-serif;
+  font-family: 'Museo300-display', MuseoSans, Helmet, Freesans, sans-serif;
   font-size: 1.5em;
   /*24px*/
   line-height: 1.3333em;
@@ -575,12 +520,12 @@ h3 {
   line-height: 1.20em;
   margin-top: 1.2em;
   margin-bottom: 0.8em;
-  font-weight: bold;
+  font-weight: normal;
 }
 
 h4 {
   font-size: 1em;
-  font-weight: bold;
+  font-weight: normal;
   margin-bottom: 1em;
 }
 
@@ -620,9 +565,9 @@ ol.big-numbers > li:before {
   position: absolute;
   left: 0;
   top: -0.2em;
-  color: #eeeeee;
+  color: #ccc;
   line-height: 1;
-  font-family: 'helvetica', 'arial', sans-serif;
+  font-family: Helmet, Freesans, sans-serif;
   font-weight: bold;
   font-size: 2.5em;
 }
@@ -662,6 +607,10 @@ select, input, textarea {
   max-width: 95%;
 }
 
+select {
+  width: 100%;
+}
+
 a,
 a:visited {
   text-decoration: none;
@@ -676,7 +625,7 @@ a:visited:active {
 
 .small-print {
   margin-bottom: 1.2307em;
-  color: #888888;
+  color: #666666;
 }
 
 .meta {
@@ -686,18 +635,18 @@ a:visited:active {
 }
 
 .meta-2 {
-  font-family: 'helvetica', 'arial',sans-serif;
-  color: #888888;
+  font-family: Helmet, Freesans, sans-serif;
+  color: #666666;
   font-style: italic;
   font-size: 0.75em;
 }
 
 h4.static, h4.static-with-rule {
-  font-family: 'helvetica', 'arial',sans-serif;
+  font-family: Helmet, Freesans, sans-serif;
   text-transform: uppercase;
   font-size: 0.875em;
   line-height: 1.71428em;
-  color: #888;
+  color: #666;
   margin-top: 2em;
 }
 
@@ -710,17 +659,25 @@ h4.static-with-rule {
 
 /* FORMS */
 ::-webkit-input-placeholder {
-  color: #888888;
+  color: #666666;
   font-style: italic;
   font-size: 0.9375em;
 }
 
 :-moz-placeholder {
+  color: #666666;
   font-style: italic;
   font-size: 0.9375em;
 }
 
 :-ms-placeholder {
+  color: #666666;
+  font-style: italic;
+  font-size: 0.9375em;
+}
+
+.placeholder {
+  color: #666666;
   font-style: italic;
   font-size: 0.9375em;
 }
@@ -750,7 +707,7 @@ textarea {
   display: block;
   font-size: 1em;
   line-height: 1.5em;
-  font-family: 'helvetica', 'arial', sans-serif;
+  font-family: Helmet, Freesans, sans-serif;
   min-height: 8em;
 }
 
@@ -816,9 +773,7 @@ label.inline {
 .form-txt-submit-box {
   min-height: 3em;
 }
-.form-txt-submit-box input[type=password],
-.form-txt-submit-box input[type=text],
-.form-txt-submit-box input[type=email] {
+.form-txt-submit-box input[type=password], .form-txt-submit-box input[type=text], .form-txt-submit-box input[type=email] {
   width: 65%;
   float: left;
 }
@@ -889,7 +844,7 @@ p.label-valid {
 
 /*** LAYOUT ***/
 .container {
-  padding: 0 1em;
+  padding: 0 1em 1em;
 }
 
 .full-width, .shadow-wrap, #footer-mobileapps, #map_box, .promo, .alert, #front-main #postcodeForm {
@@ -925,6 +880,10 @@ p.label-valid {
   background: url("../images/ie_logo.gif") 0 -5px no-repeat;
 }
 
+.ie7 #site-logo {
+  background: url("../images/sprite.png") -3px -3px no-repeat;
+}
+
 #nav-link {
   width: 50px;
   height: 48px;
@@ -958,11 +917,14 @@ p.label-valid {
   font-size: 1.25em;
   border-bottom: 0.25em solid #333;
 }
-#main-nav ul li a:hover {
+#main-nav ul li a:hover, #main-nav ul li span.hover {
   background: #333;
   color: #fff;
   text-decoration: none;
 }
+#main-nav ul li span {
+  background-color: #ccc;
+}
 #main-nav ul#mysoc-menu li a {
   background: #ffd000;
 }
@@ -977,6 +939,10 @@ p.label-valid {
   background: url("../images/ie_mysoc_logo.gif") center no-repeat;
 }
 
+.ie7 #main-nav ul#mysoc-menu li a#mysoc-logo {
+  background: url("../images/sprite.png") -240px -38px no-repeat;
+}
+
 .wrapper {
   width: 100%;
   display: table;
@@ -1043,9 +1009,9 @@ p.label-valid {
   padding: 4em 2em 1em 2em;
   text-transform: uppercase;
   font-size: 0.6875em;
-  font-family: 'helvetica', 'arial', sans-serif;
+  font-family: Helmet, Freesans, sans-serif;
 }
-.shadow-wrap ul#key-tools li a:hover, .shadow-wrap ul#key-tools li a.hover {
+.shadow-wrap ul#key-tools li a:hover, .shadow-wrap ul#key-tools li a.hover, .shadow-wrap ul#key-tools li a.active {
   text-decoration: none;
   background-color: #333;
   color: #fff;
@@ -1062,7 +1028,7 @@ p.label-valid {
   background-image: url("../images/sprite.png");
   background-position: center -2716px;
 }
-.shadow-wrap ul#key-tools li a.hover {
+.shadow-wrap ul#key-tools li a.hover, .shadow-wrap ul#key-tools li a.active {
   background-image: url("../images/sprite.png");
   background-position: center -2064px;
 }
@@ -1122,27 +1088,27 @@ p.label-valid {
   padding: 0.5em 0;
 }
 
-#footer-ads ul {
+#footer-help ul {
   list-style-type: none;
   padding: 0;
   margin: 0;
 }
-#footer-ads ul li {
+#footer-help ul li {
   list-style-type: none;
   padding: 0;
   margin: 0;
   border: 0;
 }
-#footer-ads ul li {
+#footer-help ul li {
   border-bottom: 1px solid #AFAFAF;
 }
-#footer-ads ul li:last-child {
+#footer-help ul li:last-child {
   border-bottom: none;
 }
-#footer-ads ul li h4 {
+#footer-help ul li h4 {
   margin: 0.75em 0 0.25em 0;
 }
-#footer-ads ul li p {
+#footer-help ul li p {
   font-size: 0.75em;
 }
 
@@ -1150,7 +1116,7 @@ p.label-valid {
 button, input[type=submit], .btn {
   cursor: pointer;
   font-size: 0.875em;
-  font-family: 'Helvetica', 'Arial', sans-serif;
+  font-family: Helmet, Freesans, sans-serif;
   font-weight: bold;
   text-transform: uppercase;
   line-height: 1.375em;
@@ -1164,19 +1130,18 @@ button, input[type=submit], .btn {
   -ms-border-radius: 4px;
   -khtml-border-radius: 4px;
   border-radius: 4px;
-  background: #eee;
+  background: #eeeeee;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
   background: -webkit-linear-gradient(#eeeeee, #cccccc);
   background: -moz-linear-gradient(#eeeeee, #cccccc);
   background: -o-linear-gradient(#eeeeee, #cccccc);
   background: -ms-linear-gradient(#eeeeee, #cccccc);
   background: linear-gradient(#eeeeee, #cccccc);
-  border: 1px solid #999;
-  color: #333;
+  border: 1px solid #999999;
+  color: #333333;
 }
 button:hover, input[type=submit]:hover, .btn:hover {
-  color: #fff;
-  background: #777;
+  background: #777777;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #999999), color-stop(100%, #777777));
   background: -webkit-linear-gradient(#999999, #777777);
   background: -moz-linear-gradient(#999999, #777777);
@@ -1184,7 +1149,8 @@ button:hover, input[type=submit]:hover, .btn:hover {
   background: -ms-linear-gradient(#999999, #777777);
   background: linear-gradient(#999999, #777777);
   text-decoration: none;
-  border: 1px solid #666;
+  border: 1px solid #666666;
+  color: white;
 }
 
 .green-btn,
@@ -1192,7 +1158,7 @@ button.green-btn,
 input.green-btn {
   cursor: pointer;
   font-size: 0.875em;
-  font-family: 'Helvetica', 'Arial', sans-serif;
+  font-family: Helmet, Freesans, sans-serif;
   font-weight: bold;
   text-transform: uppercase;
   line-height: 1.375em;
@@ -1206,49 +1172,29 @@ input.green-btn {
   -ms-border-radius: 4px;
   -khtml-border-radius: 4px;
   border-radius: 4px;
-  background: #eee;
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
-  background: -webkit-linear-gradient(#eeeeee, #cccccc);
-  background: -moz-linear-gradient(#eeeeee, #cccccc);
-  background: -o-linear-gradient(#eeeeee, #cccccc);
-  background: -ms-linear-gradient(#eeeeee, #cccccc);
-  background: linear-gradient(#eeeeee, #cccccc);
-  border: 1px solid #999;
-  color: #333;
-  background-color: #9FDE23;
+  background: #9fde23;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #9fde23), color-stop(100%, #7fb900));
   background: -webkit-linear-gradient(#9fde23, #7fb900);
   background: -moz-linear-gradient(#9fde23, #7fb900);
   background: -o-linear-gradient(#9fde23, #7fb900);
   background: -ms-linear-gradient(#9fde23, #7fb900);
   background: linear-gradient(#9fde23, #7fb900);
-  color: #fff;
-  border-color: #5B9700;
-}
-.green-btn:hover,
-button.green-btn:hover,
-input.green-btn:hover {
-  color: #fff;
-  background: #777;
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #999999), color-stop(100%, #777777));
-  background: -webkit-linear-gradient(#999999, #777777);
-  background: -moz-linear-gradient(#999999, #777777);
-  background: -o-linear-gradient(#999999, #777777);
-  background: -ms-linear-gradient(#999999, #777777);
-  background: linear-gradient(#999999, #777777);
-  text-decoration: none;
-  border: 1px solid #666;
+  border: 1px solid #5b9700;
+  color: white;
 }
 .green-btn:hover,
 button.green-btn:hover,
 input.green-btn:hover {
+  background: #9fde23;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7fb900), color-stop(100%, #9fde23));
   background: -webkit-linear-gradient(#7fb900, #9fde23);
   background: -moz-linear-gradient(#7fb900, #9fde23);
   background: -o-linear-gradient(#7fb900, #9fde23);
   background: -ms-linear-gradient(#7fb900, #9fde23);
   background: linear-gradient(#7fb900, #9fde23);
-  border-color: #5B9700;
+  text-decoration: none;
+  border: 1px solid #5b9700;
+  color: white;
 }
 
 .red-btn,
@@ -1256,7 +1202,7 @@ button.red-btn,
 input.red-btn {
   cursor: pointer;
   font-size: 0.875em;
-  font-family: 'Helvetica', 'Arial', sans-serif;
+  font-family: Helmet, Freesans, sans-serif;
   font-weight: bold;
   text-transform: uppercase;
   line-height: 1.375em;
@@ -1270,49 +1216,29 @@ input.red-btn {
   -ms-border-radius: 4px;
   -khtml-border-radius: 4px;
   border-radius: 4px;
-  background: #eee;
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
-  background: -webkit-linear-gradient(#eeeeee, #cccccc);
-  background: -moz-linear-gradient(#eeeeee, #cccccc);
-  background: -o-linear-gradient(#eeeeee, #cccccc);
-  background: -ms-linear-gradient(#eeeeee, #cccccc);
-  background: linear-gradient(#eeeeee, #cccccc);
-  border: 1px solid #999;
-  color: #333;
-  background-color: #FF0038;
+  background: #ff0038;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0038), color-stop(100%, #bf002a));
   background: -webkit-linear-gradient(#ff0038, #bf002a);
   background: -moz-linear-gradient(#ff0038, #bf002a);
   background: -o-linear-gradient(#ff0038, #bf002a);
   background: -ms-linear-gradient(#ff0038, #bf002a);
   background: linear-gradient(#ff0038, #bf002a);
-  color: #fff;
-  border-color: #80001C;
-}
-.red-btn:hover,
-button.red-btn:hover,
-input.red-btn:hover {
-  color: #fff;
-  background: #777;
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #999999), color-stop(100%, #777777));
-  background: -webkit-linear-gradient(#999999, #777777);
-  background: -moz-linear-gradient(#999999, #777777);
-  background: -o-linear-gradient(#999999, #777777);
-  background: -ms-linear-gradient(#999999, #777777);
-  background: linear-gradient(#999999, #777777);
-  text-decoration: none;
-  border: 1px solid #666;
+  border: 1px solid #80001c;
+  color: white;
 }
 .red-btn:hover,
 button.red-btn:hover,
 input.red-btn:hover {
+  background: #ff0038;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bf002a), color-stop(100%, #ff0038));
   background: -webkit-linear-gradient(#bf002a, #ff0038);
   background: -moz-linear-gradient(#bf002a, #ff0038);
   background: -o-linear-gradient(#bf002a, #ff0038);
   background: -ms-linear-gradient(#bf002a, #ff0038);
   background: linear-gradient(#bf002a, #ff0038);
-  border-color: #80001C;
+  text-decoration: none;
+  border: 1px solid #80001c;
+  color: white;
 }
 
 .final-submit,
@@ -1477,13 +1403,11 @@ a:hover.button-left {
   display: table;
   width: 100%;
 }
-.issue-list li .update-wrap .update-text,
-.issue-list li .update-wrap .update-img {
+.issue-list li .update-wrap .update-text, .issue-list li .update-wrap .update-img {
   display: table-cell;
   vertical-align: top;
 }
-.issue-list li .update-wrap .update-text p,
-.issue-list li .update-wrap .update-img p {
+.issue-list li .update-wrap .update-text p, .issue-list li .update-wrap .update-img p {
   margin-bottom: 0.5em;
 }
 .issue-list li .update-wrap .update-img {
@@ -1524,9 +1448,7 @@ a:hover.button-left {
   color: #222222;
   background: #e6e6e6;
 }
-.issue-list-a li a .text, .list-a li a .text,
-.issue-list-a li a .img,
-.list-a li a .img {
+.issue-list-a li a .text, .list-a li a .text, .issue-list-a li a .img, .list-a li a .img {
   display: table-cell;
   vertical-align: top;
 }
@@ -1543,7 +1465,7 @@ a:hover.button-left {
   margin: 0;
 }
 .issue-list-a li a .text small, .list-a li a .text small, .issue-list-a li a .text .small-print, .list-a li a .text .small-print {
-  color: #808080;
+  color: #666;
 }
 .issue-list-a li > p, .list-a li > p {
   margin: 0.25em 0 0 0;
@@ -1581,6 +1503,48 @@ a:hover.button-left {
   height: 60px;
 }
 
+.update-img a {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: middle;
+  *vertical-align: auto;
+  position: relative;
+}
+.update-img a {
+  *display: inline;
+}
+.update-img a span {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: block;
+  width: 20px;
+  height: 20px;
+  opacity: 0.5;
+  background: white url(images/sprite.png) -16px -1098px no-repeat;
+  font: 0/0 a;
+  color: transparent;
+}
+.update-img a:hover span {
+  opacity: 1;
+}
+
+.issue-list li .update-wrap .update-img a span {
+  right: -16px;
+  top: -8px;
+}
+
+.problem-header {
+  margin-bottom: 1em;
+}
+
+.problem-header .update-img {
+  float: right;
+  margin-left: 0.5em;
+  margin-bottom: 0.5em;
+}
+
 #map_box {
   background: #333;
   height: 29em;
@@ -1789,6 +1753,53 @@ a:hover.button-left {
   right: 0;
   font-size: 0.75em;
   background: rgba(0, 0, 0, 0.7);
+  padding: 0.75em 30px;
+}
+.mobile-map-banner a {
+  cursor: pointer;
+  font-size: 0.875em;
+  font-family: Helmet, Freesans, sans-serif;
+  font-weight: bold;
+  text-transform: uppercase;
+  line-height: 1.375em;
+  padding: 0.7em 0.5em 0.5em 0.5em;
+  margin: 0;
+  width: auto;
+  height: auto;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -o-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  border-radius: 4px;
+  background: #333333;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(100%, #1a1a1a));
+  background: -webkit-linear-gradient(#333333, #1a1a1a);
+  background: -moz-linear-gradient(#333333, #1a1a1a);
+  background: -o-linear-gradient(#333333, #1a1a1a);
+  background: -ms-linear-gradient(#333333, #1a1a1a);
+  background: linear-gradient(#333333, #1a1a1a);
+  border: 1px solid #1a1a1a;
+  color: white;
+  font-weight: normal;
+  font-size: 0.875em;
+  line-height: 1;
+  padding: 0.5em 0.75em;
+  position: absolute;
+  left: 0.3em;
+  top: 0.3em;
+}
+.mobile-map-banner a:hover {
+  background: #333333;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1a1a1a), color-stop(100%, #333333));
+  background: -webkit-linear-gradient(#1a1a1a, #333333);
+  background: -moz-linear-gradient(#1a1a1a, #333333);
+  background: -o-linear-gradient(#1a1a1a, #333333);
+  background: -ms-linear-gradient(#1a1a1a, #333333);
+  background: linear-gradient(#1a1a1a, #333333);
+  text-decoration: none;
+  border: 1px solid #1a1a1a;
+  color: white;
 }
 
 .olControlAttribution {
@@ -1903,16 +1914,16 @@ table.nicetable thead {
 table.nicetable thead th {
   font-size: 0.75em;
 }
-table.nicetable tr.gone {
-  color: #666666;
-  background-color: #cccccc;
-}
 table.nicetable tr.a {
   background: #f6f6f6;
 }
 table.nicetable tr:nth-child(even) {
   background: #f6f6f6;
 }
+table.nicetable tr.gone {
+  color: #666666;
+  background-color: #cccccc;
+}
 table.nicetable tr:hover {
   background: #FFF5CC;
   cursor: pointer;
@@ -1945,7 +1956,7 @@ table.nicetable .data {
   width: 16px;
   height: 16px;
   text-indent: -999999px;
-  background: url(../images/sprite.png) -341px -263px no-repeat;
+  background: url(images/sprite.png) -341px -263px no-repeat;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   -o-border-radius: 4px;
@@ -1954,7 +1965,7 @@ table.nicetable .data {
   border-radius: 4px;
 }
 .promo .close-promo:hover {
-  background: #222222 url(../images/sprite.png) -341px -223px no-repeat;
+  background: #222222 url(images/sprite.png) -341px -223px no-repeat;
 }
 
 .alert {
@@ -1967,36 +1978,38 @@ table.nicetable .data {
   color: #ffd000;
 }
 
-ul.breadcrumb {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  margin: -1em -1em 1em -1em;
-  overflow: hidden;
+.pagination {
+  text-align: center;
+  padding: 0.5em 1em;
+  background: #eee;
+  position: relative;
 }
-ul.breadcrumb li {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  float: left;
+.pagination .prev {
+  position: absolute;
+  left: 0.5em;
 }
-ul.breadcrumb li a {
-  float: left;
-  display: block;
+.pagination .next {
+  position: absolute;
+  right: 0.5em;
 }
-ul.breadcrumb li span {
-  display: block;
-  padding: 0.5em 1em 0.5em 0;
+.pagination a {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: middle;
+  *vertical-align: auto;
+  background: #ffd000;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  color: #1a1a1a;
 }
-ul.breadcrumb li a {
-  background: url("../images/sprite.png") right -3220px no-repeat;
-  padding: 0.5em 2.5em 0.5em 1em;
-  color: #333;
+.pagination a {
+  *display: inline;
 }
-ul.breadcrumb li a:hover {
-  color: #000;
+.pagination a:hover {
+  color: #1a1a1a;
   text-decoration: none;
+  background: #e7bd00;
 }
 
 .desk-only {
@@ -2019,14 +2032,15 @@ ul.breadcrumb li a:hover {
 }
 #front-main h2 {
   font-style: italic;
-  font-family: 'helvetica', 'arial', sans-serif;
+  font-family: Helmet, Freesans, sans-serif;
   font-size: 1.1875em;
   color: #4d4d4d;
 }
 #front-main #postcodeForm {
   padding: 1em;
+  color: #222222;
   background: #ffd000;
-  font-family: 'helvetica', 'arial', sans-serif;
+  font-family: Helmet, Freesans, sans-serif;
 }
 #front-main #postcodeForm label {
   margin: 0;
@@ -2035,7 +2049,7 @@ ul.breadcrumb li a:hover {
   display: table;
   width: 100%;
   background: #fff;
-  border: 1px solid #F3B11E;
+  border: 1px solid #f3b11e;
 }
 #front-main #postcodeForm div input#pc {
   display: table-cell;
@@ -2076,7 +2090,7 @@ ul.breadcrumb li a:hover {
   background: #1a1a1a;
   color: #C8C8C8;
   padding: 0.5em;
-  font-family: 'helvetica', 'arial', sans-serif;
+  font-family: Helmet, Freesans, sans-serif;
   font-size: 0.8125em;
   -moz-border-radius: 0 0 0.25em 0.25em;
   -webkit-border-radius: 0 0 0.25em 0.25em;
@@ -2096,8 +2110,9 @@ ul.breadcrumb li a:hover {
 #front-howto #front_stats {
   display: table;
   width: 100%;
+  color: #222222;
   background: #ffd000;
-  font-family: 'helvetica', 'arial', sans-serif;
+  font-family: Helmet, Freesans, sans-serif;
 }
 #front-howto #front_stats div {
   display: table-cell;
@@ -2128,3 +2143,6 @@ ul.breadcrumb li a:hover {
 #alerts .a {
   background: #f6f6f6;
 }
+#alerts img[width="16"] {
+  float: right;
+}
diff --git a/phonegap/www/js/fixmystreet.js b/phonegap/www/js/fixmystreet.js
index 30b35a5d6..ac9b6e495 100644
--- a/phonegap/www/js/fixmystreet.js
+++ b/phonegap/www/js/fixmystreet.js
@@ -82,51 +82,82 @@ $(function(){
 
     $html.removeClass('no-js').addClass('js');
 
+
     // Preload the new report pin
     document.createElement('img').src = '../i/pin-green.png';
 
-    //add mobile class if small screen
-    if (Modernizr.mq('only screen and (max-width:47.9375em)')) {
-        $html.addClass('mobile');
-        $('#map_box').css({ height: '10em' });
-        if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') {
-            // Immediately go full screen map if on around page
-            $('#site-header').hide();
+    var last_type;
+    $(window).resize(function(){
+        var type = $('#site-header').css('borderTopWidth');
+        if (type == '4px') { type = 'mobile'; }
+        else if (type == '0px') { type = 'desktop'; }
+        else { return; }
+        if (last_type == type) { return; }
+        if (type == 'mobile') {
+            $html.addClass('mobile');
+            $('#map_box').prependTo('.content').css({
+                zIndex: '', position: '',
+                top: '', left: '', right: '', bottom: '',
+                width: '', height: '10em',
+                margin: ''
+            });
+            if (typeof fixmystreet !== 'undefined') {
+                fixmystreet.state_map = ''; // XXX
+            }
+            if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') {
+                // Immediately go full screen map if on around page
+                $('#site-header').hide();
+                $('#map_box').prependTo('.wrapper').css({
+                    position: 'absolute',
+                    top: 0, left: 0, right: 0, bottom: 0,
+                    height: 'auto',
+                    margin: 0
+                });
+                $('#fms_pan_zoom').css({ top: '2.75em !important' });
+                $('.big-green-banner')
+                    .addClass('mobile-map-banner')
+                    .appendTo('#map_box')
+                    .text('Place pin on map')
+	            .prepend('<a href="index.html">home</a>');
+            }
+            $('span.report-a-problem-btn').on('click.reportBtn', function(){
+                $('html, body').animate({scrollTop:0}, 500);
+            }).css({ cursor:'pointer' }).on('hover.reportBtn', function(){
+                $(this).toggleClass('hover');
+            });
+        } 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();
+            }
             $('#map_box').prependTo('.wrapper').css({
-                position: 'absolute',
+                zIndex: 0, position: map_pos,
                 top: 0, left: 0, right: 0, bottom: 0,
-                height: 'auto',
+                width: '100%', height: map_height,
                 margin: 0
             });
-            // Bit yucky, but the ID doesn't exist yet.
-            $("<style>#fms_pan_zoom { top: 2.75em !important; }</style>").appendTo(document.documentElement);
-            $('.big-green-banner')
-                .addClass('mobile-map-banner')
-                .removeClass('.big-green-banner')
-                .appendTo('#map_box')
-                .text('Place pin on map');
-        }
-    } else {
-        // Make map full screen on non-mobile sizes.
-        var map_pos = 'fixed', map_height = '100%';
-        if ($html.hasClass('ie6')) {
-            map_pos = 'absolute';
-            map_height = $(window).height();
+            if (typeof fixmystreet !== 'undefined') {
+                fixmystreet.state_map = 'full';
+            }
+            if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') {
+                // Remove full-screen-ness
+                $('#site-header').show();
+                $('#fms_pan_zoom').css({ top: '4.75em !important' });
+                $('.big-green-banner')
+                    .removeClass('mobile-map-banner')
+                    .prependTo('#side')
+                    .text('Click map to report a problem');
+            }
+            $('span.report-a-problem-btn').css({ cursor:'' }).off('.reportBtn');
         }
-        $('#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
-        }).data('size', 'full');
-    }
+        last_type = type;
+    });
 
-    //heightfix the desktop .content div
-    if(Modernizr.mq('only screen and (min-width:48em)')) {
-        if (!($('body').hasClass('frontpage'))){
-            heightFix(window, '.content', -176);
-        }
-    }
+    //add mobile class if small screen
+    $(window).resize();
 
     $('#pc').focus();
 
@@ -186,6 +217,8 @@ $(function(){
             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 ) {
@@ -195,12 +228,7 @@ $(function(){
             this.defaultShowErrors();
             submitted = false;
         },
-        invalidHandler: function(form, validator) { 
-            form.stopImmediatePropagation();
-            form.stopPropagation();
-            form.preventDefault();
-            submitted = true;
-        }
+        invalidHandler: function(form, validator) { submitted = true; }
     });
 
     $('input[type=submit]').click( function(e) { form_submitted = 1; } );
@@ -271,7 +299,7 @@ $(function(){
 
     //move 'skip this step' link on mobile
     $('.mobile #skip-this-step').hide();
-    $('.mobile #skip-this-step a').appendTo('#key-tools').addClass('chevron').wrap('<li>');
+    $('.mobile #skip-this-step a').addClass('chevron').wrap('<li>').appendTo('#key-tools');
 
     /*
      * Tabs
@@ -331,7 +359,7 @@ $(function(){
      */
     $('.mobile .nicetable th.title').remove();
     $('.mobile .nicetable td.title').each(function(i){
-        $(this).insertBefore($(this).parent('tr')).wrap('<tr class="heading" />');
+        $(this).attr('colspan', 5).insertBefore($(this).parent('tr')).wrap('<tr class="heading" />');
     });
     // $('.mobile .nicetable tr.heading > td.title').css({'min-width':'300px'});
     // $('.mobile .nicetable tr > td.data').css({'max-width':'12%'});
@@ -344,62 +372,111 @@ $(function(){
         $('<p id="sub_map_links" />').insertAfter($('#map'));
     }
 
-// A sliding drawer from the bottom of the page
-$.fn.drawer = function(id, ajax) {
+// A sliding drawer from the bottom of the page, small version
+// that doesn't change the main content at all.
+$.fn.small_drawer = function(id) {
     this.toggle(function(){
-        var $this = $(this), d = $('#' + id), $sw = $('.shadow-wrap');
+        var $this = $(this), d = $('#' + id);
         if (!$this.addClass('hover').data('setup')) {
-            // move .shadow-wrap to end of .content first
-            if(!$('.shadow-wrap.moved').length){
-                $sw.appendTo('.content').addClass('moved');
-            }
+            d.hide().removeClass('hidden-js').css({
+                padding: '1em',
+                background: '#fff'
+            });
+            $this.data('setup', true);
+        }
+        d.slideDown();
+    }, function(e){
+        var $this = $(this), d = $('#' + id);
+        $this.removeClass('hover');
+        d.slideUp();
+    });
+};
 
+// A sliding drawer from the bottom of the page, large version
+$.fn.drawer = function(id, ajax) {
+    // IE7 positions the fixed tool bar 1em to the left unless it comes after
+    // the full-width section, ho-hum. Move it to where it would be after an
+    // open/close anyway
+    if ($('html.ie7').length) {
+        var $sw = $('.shadow-wrap'), $content = $('.content[role="main"]');
+        $sw.appendTo($content);
+    }
+    this.toggle(function(){
+        var $this = $(this), d = $('#' + id), $content = $('.content[role="main"]');
+        if (!$this.addClass('hover').data('setup')) {
+            // make a drawer div with an innerDiv
             if (!d.length) {
                 d = $('<div id="' + id + '">');
             }
-            // Put the padding on an inner div to prevent the jarring jump at end of hide/show animation
             var innerDiv = $('<div>');
             d.wrapInner(innerDiv);
-            d.removeClass('hidden-js');
+
+            // if ajax, load it with a spinner
             if (ajax) {
                 var href = $this.attr('href') + ';ajax=1';
-                $this.prepend(' <img src="/cobrands/fixmystreet/images/spinner-black-333.gif" style="margin-right:2em;">');
+                $this.prepend(' <img class="spinner" src="/cobrands/fixmystreet/images/spinner-black-333.gif" style="margin-right:2em;">');
                 innerDiv.load(href, function(){
-                    $('img', $this).remove();
+                    $('.spinner').remove();
                 });
             }
-            d.find('h2').css({ marginTop: 0 });
-            $('.content').append(d);
-            d_offset = d.offset().top;
-            d.hide();
+            
+            // Tall drawer - put after .content for scrolling to work okay.
+            // position over the top of the main .content in precisely the right location
+            d.insertAfter($content).addClass('content').css({
+                position: 'absolute',
+                zIndex: '1100',
+                marginTop: $('html.ie6, html.ie7').length ? '-3em' : 0, // IE6/7 otherwise include the 3em padding and stay too low
+                left: 0,
+                top: $(window).height() - $content.offset().top
+            }).removeClass('hidden-js').find('h2').css({ marginTop: 0 });
             $this.data('setup', true);
         }
-        $sw.addClass('active');
-        d.animate({height:'show'}, 300);
-        $('html, body').animate({scrollTop:d_offset-60}, 1000);
+
+        //do the animation
+        $('.shadow-wrap').prependTo(d).addClass('static');
+        d.show().animate({top:'3em'}, 1000, function(){
+            $content.fadeOut(function() {
+                d.css({ position: 'relative' });
+            });
+        });
     }, function(e){
-        var $this = $(this), d = $('#' + id), $sw = $('.shadow-wrap');
+        var $this = $(this), d = $('#' + id), $sw = $('.shadow-wrap'),
+            $content = $('.content[role="main"]'),
+            tot_height = $(window).height() - d.offset().top;
         $this.removeClass('hover');
-        d.animate({height: 'hide'}, 600, function(){
-            $sw.removeClass('active');
+        d.css({ position: 'absolute' }).animate({ top: tot_height }, 1000, function(){
+            d.hide();
+            $sw.appendTo($content).removeClass('static');
         });
+        $content.show();
     });
 };
 
-    $('#key-tool-wards').drawer('council_wards', false);
-    $('#key-tool-around-updates').drawer('updates_ajax', true);
-    $('#key-tool-report-updates').drawer('report-updates-data', false);
+    if ($('html.mobile').length) {
+        $('#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');
+            });
+        });
+    } else {
+        $('#key-tool-wards').drawer('council_wards', false);
+        $('#key-tool-around-updates').drawer('updates_ajax', true);
+    }
+    $('#key-tool-report-updates').small_drawer('report-updates-data');
 
     // Go directly to RSS feed if RSS button clicked on alert page
     // (due to not wanting around form to submit, though good thing anyway)
-    $('.shadow-wrap').on('click', '#alert_rss_button', function(e){
+    $('.container').on('click', '#alert_rss_button', function(e){
         e.preventDefault();
         var feed = $('input[name=feed][type=radio]:checked').nextAll('a').attr('href');
         window.location.href = feed;
     });
-    $('.shadow-wrap').on('click', '#alert_email_button', function(e){
+    $('.container').on('click', '#alert_email_button', function(e){
         e.preventDefault();
         var form = $('<form/>').attr({ method:'post', action:"/alert/subscribe" });
+        form.append($('<input name="alert" value="Subscribe me to an email alert" type="hidden" />'));
         $('#alerts input[type=text], #alerts input[type=hidden], #alerts input[type=radio]:checked').each(function() {
             var $v = $(this);
             $('<input/>').attr({ name:$v.attr('name'), value:$v.val(), type:'hidden' }).appendTo(form);
@@ -412,6 +489,8 @@ $.fn.drawer = function(id, ajax) {
     if($('.mobile').length){
         $('#map_permalink').hide();
         $('#key-tools a.feed').appendTo('#sub_map_links');
+        $('#key-tools li:empty').remove();
+        $('#report-updates-data').insertAfter($('#map_box'));
     }
     //add open/close toggle button on desk
     $('#sub_map_links').prepend('<span id="map_links_toggle">&nbsp;</span>');
@@ -449,6 +528,30 @@ $.fn.drawer = function(id, ajax) {
             queue:false
         }).fadeOut(500);
     });
+
+
+
+    /*
+     * Fancybox fullscreen images
+     */
+    if (typeof $.fancybox == 'function') {
+        $('a[rel=fancy]').fancybox({
+            'overlayColor': '#000000'
+        });
+    }
+
+    /*
+     * heightfix the desktop .content div
+     *
+     * this must be kept near the end so that the
+     * rendered height is used after any page manipulation (such as tabs)
+     */
+    if (!$('html.mobile').length) {
+        if (!($('body').hasClass('frontpage'))){
+            heightFix(window, '.content', -176);
+        }
+    }
+
 });
 
 /*
diff --git a/phonegap/www/js/map-OpenLayers.js b/phonegap/www/js/map-OpenLayers.js
index 5b4450e23..6b31c5300 100644
--- a/phonegap/www/js/map-OpenLayers.js
+++ b/phonegap/www/js/map-OpenLayers.js
@@ -54,7 +54,10 @@ function fixmystreet_onload() {
         fixmystreet.map.addLayer(area);
         area.events.register('loadend', null, function(a,b,c) {
             var bounds = area.getDataExtent();
-            if (bounds) { fixmystreet.map.zoomToExtent( bounds ); }
+            if (bounds) {
+                var center = bounds.getCenterLonLat();
+                fixmystreet.map.setCenter(center, fixmystreet.map.getZoomForExtent(bounds), false, true);
+            }
         });
     }
 
@@ -102,7 +105,7 @@ function fixmystreet_onload() {
         fixmystreet.bbox_strategy = new OpenLayers.Strategy.BBOX({ ratio: 1 });
         pin_layer_options.strategies = [ fixmystreet.bbox_strategy ];
         pin_layer_options.protocol = new OpenLayers.Protocol.HTTP({
-            url: CONFIG.FMS_URL + 'ajax',
+            url: '/ajax',
             params: fixmystreet.all_pins ? { all_pins: 1 } : { },
             format: new OpenLayers.Format.FixMyStreet()
         });
@@ -115,10 +118,10 @@ function fixmystreet_onload() {
     var markers = fms_markers_list( fixmystreet.pins, true );
     fixmystreet.markers.addFeatures( markers );
     if (fixmystreet.page == 'around' || fixmystreet.page == 'reports' || fixmystreet.page == 'my') {
-        var select = new OpenLayers.Control.SelectFeature( fixmystreet.markers );
+        fixmystreet.select_feature = new OpenLayers.Control.SelectFeature( fixmystreet.markers );
         var selectedFeature;
         function onPopupClose(evt) {
-            select.unselect(selectedFeature);
+            fixmystreet.select_feature.unselect(selectedFeature);
             OpenLayers.Event.stop(evt);
         }
         fixmystreet.markers.events.register( 'featureunselected', fixmystreet.markers, function(evt) {
@@ -139,8 +142,8 @@ function fixmystreet_onload() {
             feature.popup = popup;
             fixmystreet.map.addPopup(popup);
         });
-        fixmystreet.map.addControl( select );
-        select.activate();
+        fixmystreet.map.addControl( fixmystreet.select_feature );
+        fixmystreet.select_feature.activate();
     } else if (fixmystreet.page == 'new') {
         fixmystreet_activate_drag();
     }
@@ -161,9 +164,11 @@ function fixmystreet_onload() {
         for (var i=0; i<showhide.length; i+=2) {
             if (this.innerHTML == showhide[i]) {
                 fixmystreet.markers.setVisibility(true);
+                fixmystreet.select_feature.activate();
                 this.innerHTML = showhide[i+1];
             } else if (this.innerHTML == showhide[i+1]) {
                 fixmystreet.markers.setVisibility(false);
+                fixmystreet.select_feature.deactivate();
                 this.innerHTML = showhide[i];
             }
         }
@@ -210,6 +215,10 @@ $(function(){
         displayProjection: new OpenLayers.Projection("EPSG:4326")
     });
 
+    if ($('html').hasClass('mobile') && fixmystreet.page == 'around') {
+        $('#fms_pan_zoom').css({ top: '2.75em !important' });
+    }
+
     fixmystreet.layer_options = OpenLayers.Util.extend({
         zoomOffset: fixmystreet.zoomOffset,
         transitionEffect: 'resize',
@@ -227,15 +236,19 @@ $(function(){
         fixmystreet.map.setCenter(centre, fixmystreet.zoom || 3);
     }
 
-    if ($('#map_box').data('size')=='full') {
+    if (fixmystreet.state_map && fixmystreet.state_map == 'full') {
         // TODO Work better with window resizing, this is pretty 'set up' only at present
-        var q = $(window).width() / 4;
+        var $content = $('.content'),
+            q = ( $content.offset().left + $content.width() ) / 2;
         // Need to try and fake the 'centre' being 75% from the left
         fixmystreet.map.pan(-q, -25, { animate: false });
         fixmystreet.map.events.register("movestart", null, function(e){
             fixmystreet.map.moveStart = { zoom: this.getZoom(), center: this.getCenter() };
         });
         fixmystreet.map.events.register("zoomend", null, function(e){
+            if ( fixmystreet.map.moveStart && !fixmystreet.map.moveStart.zoom && fixmystreet.map.moveStart.zoom !== 0 ) {
+                return true; // getZoom() on Firefox appears to return null at first?
+            }
             if ( !fixmystreet.map.moveStart || !this.getCenter().equals(fixmystreet.map.moveStart.center) ) {
                 // Centre has moved, e.g. by double-click. Same whether zoom in or out
                 fixmystreet.map.pan(-q, -25, { animate: false });
@@ -281,7 +294,8 @@ $(function(){
         $('#sub_map_links').show();
         //only on mobile
         $('#mob_sub_map_links').remove();
-        $('.mobile-map-banner').text('Place pin on map');
+        $('.mobile-map-banner').text('Place pin on map')
+        .prepend('<a href="index.html">home</a>');
         fixmystreet.page = 'around';
     });
 
@@ -416,23 +430,24 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
             fixmystreet.state_pins_were_hidden = true;
             $('#hide_pins_link').click();
         }
-        /*if (fixmystreet.page == 'new') {
+        if (fixmystreet.page == 'new') {
             return;
-        }*/
+        }
         $.getJSON( CONFIG.FMS_URL + 'report/new/ajax', {
                 latitude: $('#fixmystreet\\.latitude').val(),
                 longitude: $('#fixmystreet\\.longitude').val()
         }, function(data) {
+            if (data.error) {
+                // XXX If they then click back and click somewhere in the area, this error will still show.
+                $('#side-form').html('<h1>Reporting a problem</h1><p>' + data.error + '</p>');
+                return;
+            }
             $('#councils_text').html(data.councils_text);
             $('#form_category_row').html(data.category);
-            /* Need to reset this here as it gets removed when we replace
-               the HTML for the dropdown */
-            if ( data.has_open311 > 0 ) {
-                $('#form_category').change( form_category_onchange );
-            }
         });
 
         $('#side-form, #site-logo').show();
+        fixmystreet.map.updateSize(); // might have done, and otherwise Firefox gets confused.
         /* For some reason on IOS5 if you use the jQuery show method it
          * doesn't display the JS validation error messages unless you do this
          * or you cause a screen redraw by changing the phone orientation.
@@ -441,12 +456,19 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
             document.getElementById('side-form').style.display = 'block';
         }
         $('#side').hide();
-        heightFix('#report-a-problem-sidebar', '.content', 26);
+        if (typeof heightFix !== 'undefined') {
+            heightFix('#report-a-problem-sidebar', '.content', 26);
+        }
 
         // If we clicked the map somewhere inconvenient
         var sidebar = $('#report-a-problem-sidebar');
         if (sidebar.css('position') == 'absolute') {
-            var w = sidebar.width(), h = sidebar.height(), o = sidebar.offset();
+            var w = sidebar.width(), h = sidebar.height(),
+                o = sidebar.offset(),
+                $map_box = $('#map_box'), bo = $map_box.offset();
+            // 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;
             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
@@ -455,7 +477,7 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
                     fixmystreet.map.getProjectionObject()
                 );
                 var p = fixmystreet.map.getViewPortPxFromLonLat(lonlat);
-                p.x -= $(window).width() / 3;
+                p.x -= ( o.left + w ) / 2;
                 lonlat = fixmystreet.map.getLonLatFromViewPortPx(p);
                 fixmystreet.map.panTo(lonlat);
             }
@@ -474,7 +496,7 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
             ).css({ position: 'relative', width: width, height: height, marginBottom: '1em' });
             // Making it relative here makes it much easier to do the scrolling later
 
-            $('.mobile-map-banner').text('Right place?');
+            $('.mobile-map-banner').text('Right place?').prepend('<a href="index.html">home</a>');
 
             // mobile user clicks 'ok' on map
             $('#mob_ok').toggle(function(){