12 files changed, 277 insertions, 791 deletions

diff --git a/web/cobrands/emptyhomes/css.css b/web/cobrands/emptyhomes/css.css
index 168eae2de..e59497880 100644
--- a/web/cobrands/emptyhomes/css.css
+++ b/web/cobrands/emptyhomes/css.css
@@ -174,10 +174,16 @@ a:hover, a:active {
     padding: 20px;
     overflow: auto;
 }
+
+.ie6 #emptyhomes-footer {
+    zoom: 1;
+}
+
 #emptyhomes-footer div {
     float: left;
     margin-right: 2em;
 }
+
 #emptyhomes-footer a {
     color: #FFFFFF;
 }
diff --git a/web/cobrands/fiksgatami/css.css b/web/cobrands/fiksgatami/css.css
deleted file mode 100644
index 6c2a4e16b..000000000
--- a/web/cobrands/fiksgatami/css.css
+++ /dev/null
@@ -1,193 +0,0 @@
-#mysociety #front_stats div {
-  width: 6.5em;
-}
-#mysociety label {
-  width: 6em;
-}
-#mysociety #fieldset div.checkbox, #mysociety #problem_submit {
-  padding-left: 6.5em;
-}
-
-body {
-  font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif;
-  margin: 0;
-  padding: 0;
-}
-
-h1 {
-  margin: 0;
-  font-size: 175%;
-}
-
-h2 {
-  font-size: 140%;
-}
-
-select, input, textarea {
-  font-size: 99%;
-}
-
-#mysociety a.unsuitable-report {
-  font-size: small;
-}
-#mysociety blockquote {
-  border-left: solid 4px #1a4f7f;
-}
-#mysociety .a {
-  color: #000000;
-  background-color: #a9cff1;
-}
-#mysociety #postcodeForm {
-  background-color: #99bfe1;
-}
-#mysociety #front_stats div {
-  background-color: #99bfe1;
-}
-#mysociety p.promo {
-  border-top: 1px solid #bbb;
-  border-bottom: 1px solid #bbb;
-  background-color: #eee;
-  text-align: center;
-  padding: 0 0.5em;
-}
-
-#header {
-  font-size: 200%;
-  font-weight: bold;
-  border-bottom: solid 2px #1a4f7f;
-  margin: 0;
-  padding: 0.15em 0.5em;
-  background-color: #99bfe1;
-  color: #1a4f7f;
-}
-#header a:link, #header a:visited {
-  color: #1a4f7f;
-  background-color: #99bfe1;
-  text-decoration: none;
-}
-#header a:active, #header a:hover {
-  text-decoration: underline;
-}
-
-#my {
-  color: #0a3f6f;
-  background-color: #99bfe1;
-}
-
-#mysociety {
-  width: 100%;
-  /* Must specify a width or IE goes crazy wrong! */
-  position: relative;
-  margin: 0 auto;
-  max-width: 60em;
-  overflow: auto;
-}
-
-/* Can't put the margin in #mysociety because of above IE craziness */
-#wrapper {
-  margin: 1em 2em;
-}
-
-#meta {
-  list-style-type: none;
-  margin: 0.25em 0 0 1em;
-  padding: 0;
-  font-size: 0.875em;
-}
-#meta li {
-  display: inline;
-  margin: 0;
-  padding: 0 0 0 0.25em;
-  border-left: solid 1px #1a4f7f;
-}
-#meta li:first-child {
-  border-left: none;
-}
-
-.v {
-  display: none;
-}
-
-#navigation {
-  position: absolute;
-  top: 1em;
-  right: 1em;
-  padding: 0;
-  margin: 0;
-  list-style-type: none;
-}
-#navigation li {
-  display: inline;
-  padding: 0;
-  margin: 0;
-}
-#navigation a {
-  display: -moz-inline-box;
-  display: inline-block;
-  padding: 0.4em 1em;
-}
-#navigation a:link, #navigation a:visited {
-  color: #1a4f7f;
-}
-#navigation a:hover, #navigation a:active {
-  background-color: #1a4f7f;
-  color: #99bfe1;
-  -moz-border-radius-topleft: 0.5em;
-  -webkit-border-top-left-radius: 0.5em;
-  border-radius-top-left: 0.5em;
-  -moz-border-radius-topright: 0.5em;
-  -webkit-border-top-right-radius: 0.5em;
-  border-radius-top-right: 0.5em;
-}
-
-#nav_new a {
-  background-image: url("/i/new.png");
-  background-repeat: no-repeat;
-  background-position: 100% 0;
-}
-
-#logo {
-  border: none;
-  position: absolute;
-  top: 3.3em;
-  right: 10px;
-}
-
-#footer {
-  clear: both;
-  text-align: center;
-  border-top: solid 2px #ccc;
-  width: 50%;
-  margin: 1em auto 0;
-  padding: 0;
-  color: #333333;
-}
-#footer .l, #footer .r {
-  margin-top: 0;
-  text-align: left;
-  width: 45%;
-}
-#footer .l {
-  float: left;
-}
-#footer .r {
-  float: right;
-}
-
-body {
-  font-family: Helmet, Freesans, "Helvetica Neue", Arial, sans-serif;
-}
-
-a:link {
-  color: #215d93;
-}
-a:visited {
-  color: #518dc3;
-}
-a:hover, a:active {
-  color: #cc0000;
-}
-
-#header {
-  padding: 0.1em 0.5em 0.15em;
-}
diff --git a/web/cobrands/southampton/css.css b/web/cobrands/southampton/css.css
deleted file mode 100644
index fa0e07548..000000000
--- a/web/cobrands/southampton/css.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#mysociety #map_box {
-  width: 422px;
-}
-#mysociety #map, #mysociety #drag {
-  width: 420px;
-  height: 420px;
-}
-#mysociety p#fixed, #mysociety p#unknown {
-  margin-right: 442px;
-  width: auto;
-}
-#mysociety #problem_form {
-  clear: both;
-}
-#mysociety h1 {
-  margin: 0;
-  font-size: 175%;
-}
-#mysociety h2 {
-  font-size: 140%;
-}
-#mysociety select, #mysociety input, #mysociety textarea {
-  font-size: 99%;
-}
-#mysociety a.unsuitable-report {
-  font-size: small;
-}
-#mysociety blockquote {
-  border-left: solid 4px #768eb5;
-}
-#mysociety .a {
-  color: #000000;
-  background-color: #e9eef7;
-}
-#mysociety #postcodeForm {
-  background-color: #e9eef7;
-}
-#mysociety #front_stats div {
-  background-color: #e9eef7;
-  width: 6em;
-  padding: 0.5em;
-}
diff --git a/web/css/_main.scss b/web/css/_main.scss
index b4e4a13f0..d74d70ceb 100644
--- a/web/css/_main.scss
+++ b/web/css/_main.scss
@@ -1,5 +1,17 @@
 // Generics
 
+/* Thanks to normalize.css
+ * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
+ *    http://clagnut.com/blog/348/#c790
+ * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom
+ *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
+ */
+html {
+    font-size: 100%; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 3 */
+    -ms-text-size-adjust: 100%; /* 3 */
+}
+
 body {
     font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif;
     margin: 0;
@@ -17,6 +29,7 @@ h2 {
 
 select, input, textarea {
     font-size: 99%;
+    max-width: 99%;
 }
 
 #mysociety {
@@ -158,6 +171,20 @@ select, input, textarea {
     right: 10px;
 }
 
+.ie6 #logo {
+    display: none;
+}
+
+.ie6 #logoie {
+    width: 133px;
+    height: 26px;
+    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/i/mysociety-dark.png',sizingMethod='scale');
+    position: absolute;
+    top: 4em;
+    right: 10px;
+    cursor: pointer;
+}
+
 #footer {
     clear: both;
     text-align: center;
@@ -180,3 +207,38 @@ select, input, textarea {
     }
 }
 
+@media all and (max-width: 50em) {
+    #logo {
+        display: none;
+    }
+    #header {
+        font-size: 150%;
+    }
+    #navigation {
+        position: static;
+        border-top: solid 2px $header_colour;
+        border-bottom: solid 2px $header_colour;
+        margin: 1em 0;
+        padding: 0.15em 0.5em;
+        text-align: center;
+        background-color: $header_back;
+        color: $header_colour;
+
+        a:hover, a:active {
+            background-color: $header_colour;
+            color: $header_back;
+            -moz-border-radius: 0.5em;
+            -webkit-border-radius: 0.5em;
+            border-radius: 0.5em;
+        }
+    }
+    #footer {
+        width: auto;
+        padding: 0 1em;
+        border-top: none;
+    }
+    #wrapper {
+        margin: 0em 1em;
+    }
+}
+
diff --git a/web/css/core.css b/web/css/core.css
deleted file mode 100644
index 88181e3e8..000000000
--- a/web/css/core.css
+++ /dev/null
@@ -1,353 +0,0 @@
-#mysociety blockquote {
-  border-left: solid 4px #666666;
-  padding-left: 0.5em; }
-  #mysociety blockquote h2, #mysociety blockquote p {
-    margin: 0; }
-#mysociety dt {
-  font-weight: bold;
-  margin-top: 0.5em; }
-#mysociety .gone {
-  color: #666666;
-  background-color: #cccccc; }
-#mysociety p.dev-site-notice, #mysociety p.error {
-  text-align: center;
-  color: #cc0000;
-  font-size: larger; }
-#mysociety ul {
-  padding: 0 0 0 1.5em;
-  margin: 0; }
-#mysociety ul.error {
-  color: #cc0000;
-  background-color: #ffeeee;
-  padding-right: 4px;
-  text-align: left;
-  font-size: larger; }
-#mysociety div.form-error {
-  color: #cc0000;
-  margin: 5px 1em 5px 1em;
-  padding: 2px 5px 2px 5px;
-  float: left;
-  background-color: #ffeeee;
-  text-align: left; }
-#mysociety div.form-field {
-  clear: both; }
-#mysociety #advert_thin {
-  width: 50%;
-  margin: 1em auto;
-  text-align: center;
-  border-top: dotted 1px #999999; }
-#mysociety #advert_hfymp {
-  border-top: dotted 1px #999999;
-  text-align: center; }
-#mysociety p#expl {
-  text-align: center;
-  font-size: 150%;
-  margin: 0 2em; }
-#mysociety #postcodeForm {
-  display: table;
-  _width: 33em;
-  text-align: center;
-  font-size: 150%;
-  margin: 1em auto;
-  padding: 1em;
-  -moz-border-radius: 1em;
-  -webkit-border-radius: 1em;
-  border-radius: 1em; }
-  #mysociety #postcodeForm label {
-    float: none;
-    padding-right: 0; }
-  #mysociety #postcodeForm #submit {
-    font-size: 83%; }
-#mysociety #front_intro {
-  float: left;
-  width: 48%; }
-  #mysociety #front_intro p {
-    clear: both;
-    margin-top: 0; }
-#mysociety #front_stats div {
-  text-align: center;
-  width: 5.5em;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
-  border-radius: 0.5em;
-  float: left;
-  margin: 0 1em 1em; }
-  #mysociety #front_stats div big {
-    font-size: 150%;
-    display: block; }
-#mysociety #front_recent {
-  float: right;
-  width: 48%;
-  margin-bottom: 1em; }
-#mysociety #front_recent img, #mysociety #alert_recent img {
-  margin-right: 0.25em;
-  margin-bottom: 0.25em; }
-#mysociety #front_recent > h2:first-child, #mysociety #front_intro > h2:first-child {
-  margin-top: 0; }
-#mysociety form {
-  margin: 0; }
-#mysociety label {
-  float: left;
-  text-align: right;
-  padding-right: 0.5em;
-  width: 5em; }
-#mysociety fieldset, #mysociety #fieldset {
-  border: none;
-  padding: 0.5em; }
-  #mysociety fieldset div, #mysociety #fieldset div {
-    margin-top: 2px;
-    clear: left; }
-#mysociety legend {
-  display: none; }
-#mysociety #fieldset div.checkbox, #mysociety #problem_submit {
-  padding-left: 5.5em; }
-#mysociety #fieldset div.checkbox label, #mysociety label.n {
-  float: none;
-  text-align: left;
-  padding-right: 0;
-  width: auto;
-  cursor: pointer;
-  cursor: hand; }
-#mysociety #questionnaire label, #mysociety #alerts label {
-  float: none; }
-#mysociety .confirmed {
-  background-color: #ccffcc;
-  border: solid 2px #009900;
-  padding: 5px;
-  text-align: center; }
-#mysociety #form_sign_in_yes {
-  float: left;
-  width: 47%;
-  padding-right: 1%;
-  border-right: solid 1px #999999;
-  margin-bottom: 1em; }
-#mysociety #form_sign_in_no, #mysociety #fieldset #form_sign_in_no {
-  float: right;
-  width: 47%;
-  padding-left: 1%;
-  clear: none;
-  margin-bottom: 1em; }
-#mysociety #category_meta {
-  margin-bottom: 30px; }
-#mysociety #category_meta label {
-  width: 10em; }
-#mysociety #map_box {
-  float: right;
-  width: 502px;
-  position: relative;
-  padding-left: 20px;
-  background-color: #ffffff; }
-#mysociety p#copyright {
-  float: right;
-  text-align: right;
-  margin: 0 0 1em 0;
-  font-size: 78%; }
-#mysociety #map {
-  border: solid 1px #000000;
-  width: 500px;
-  height: 500px;
-  overflow: hidden;
-  position: relative;
-  background-color: #f1f1f1; }
-#mysociety #drag {
-  position: absolute;
-  width: 500px;
-  height: 500px;
-  right: 0;
-  top: 0; }
-  #mysociety #drag input, #mysociety #drag img {
-    position: absolute;
-    border: none; }
-  #mysociety #drag input {
-    cursor: crosshair;
-    background-color: #cccccc; }
-  #mysociety #drag img {
-    cursor: move; }
-  #mysociety #drag img.pin {
-    z-index: 100;
-    background-color: inherit; }
-  #mysociety #drag a img.pin {
-    cursor: pointer;
-    cursor: hand; }
-#mysociety form#mapForm #map {
-  cursor: pointer; }
-#mysociety form#mapForm .olTileImage {
-  cursor: crosshair;
-}
-#mysociety #text_map {
-  margin: 0 530px 1em 0;
-  padding: 5px;
-  text-align: center;
-  position: relative;
-  padding-left: 0.5em;
-  text-align: left;
-  margin-top: 0;
-  font-size: 110%;
-  background-color: #eeeeee;
-  -moz-border-radius-topleft: 1em;
-  -moz-border-radius-bottomleft: 1em;
-  -webkit-border-top-left-radius: 1em;
-  -webkit-border-bottom-left-radius: 1em;
-  border-top-left-radius: 1em;
-  border-bottom-left-radius: 1em;
-}
-#mysociety #text_map_arrow {
-  display: block;
-  position: absolute;
-  top: 0;
-  right: -28px;
-  width: 0;
-  height: 0;
-  line-height: 0;
-  font-size: 0;
-  border-style: solid;
-  border-width: 26px 14px 26px 14px;
-  border-color: #fff #fff #fff #eee;
-}
-#mysociety #text_no_map {
-  margin-top: 0; }
-#mysociety #sub_map_links {
-  float: right;
-  clear: right;
-  margin-top: 0; }
-#mysociety #fixed {
-  margin: 0 530px 1em 0;
-  padding: 5px;
-  text-align: center;
-  position: relative;
-  background-color: #ccffcc;
-  border: solid 2px #009900; }
-#mysociety #unknown {
-  margin: 0 530px 1em 0;
-  padding: 5px;
-  text-align: center;
-  position: relative;
-  background-color: #ffcccc;
-  border: solid 2px #990000;
-}
-#mysociety #closed {
-  margin: 0 530px 1em 0;
-  padding: 5px;
-  text-align: center;
-  position: relative;
-  background-color: #ccccff;
-  border: solid 2px #000099;
-}
-#mysociety #progress {
-  margin: 0 530px 1em 0;
-  padding: 5px;
-  text-align: center;
-  position: relative;
-  background-color: #ffffcc;
-  border: solid 2px #999900;
-}
-#mysociety #updates div {
-  padding: 0 0 0.5em;
-  margin: 0 0 0.25em;
-  border-bottom: dotted 1px #5e552b; }
-  #mysociety #updates div .problem-update, #mysociety #updates div .update-text {
-    padding: 0;
-    margin: 0;
-    border-bottom: 0; }
-#mysociety #updates p {
-  margin: 0; }
-#mysociety #nearby_lists h2 {
-  margin-top: 1em;
-  margin-bottom: 0;
-}
-#mysociety #nearby_lists li small {
-  color: #666666; }
-#mysociety #alert_links {
-  float: right; }
-#mysociety #alert_links_area {
-  padding-left: 0.5em;
-  margin: 0;
-  color: #666;
-  font-size: smaller;
-}
-#mysociety #rss_alert {
-  text-decoration: none; }
-  #mysociety #rss_alert span {
-    text-decoration: underline; }
-#mysociety #email_alert_box {
-  display: none;
-  position: absolute;
-  padding: 3px;
-  font-size: 83%;
-  border: solid 1px #7399C3;
-  background-color: #eeeeff;
-  color: #000000; }
-#mysociety #email_alert_box p {
-  margin: 0; }
-#mysociety .council_sent_info {
-  font-size: smaller; }
-#mysociety #rss_items {
-  width: 62%;
-  float: left; }
-#mysociety #rss_rhs {
-  border-left: 1px dashed #999;
-  width: 36%;
-  float: right;
-  padding: 0 0 0 0.5em;
-  margin: 0 0 1em 0.5em; }
-#mysociety #rss_box {
-  padding: 10px;
-  border: 1px solid #999999; }
-#mysociety #rss_feed {
-  list-style-type: none;
-  margin-bottom: 2em; }
-#mysociety #rss_feed li {
-  margin-bottom: 1em; }
-#mysociety #alert_or {
-  font-style: italic;
-  font-size: 125%;
-  margin: 0; }
-#mysociety #rss_list {
-  float: left;
-  width: 47%; }
-#mysociety #rss_list ul {
-  list-style-type: none; }
-#mysociety #rss_buttons {
-  float: right;
-  width: 35%;
-  text-align: center;
-  margin-bottom: 2em; }
-#mysociety #rss_local {
-  margin-left: 1.5em;
-  margin-bottom: 0; }
-#mysociety #rss_local_alt {
-  margin: 0 0 2em 4em; }
-#mysociety #alert_photos {
-  text-align: center;
-  float: right;
-  width: 150px;
-  margin-left: 0.5em; }
-#mysociety #alert_photos h2 {
-  font-size: 100%; }
-#mysociety #alert_photos img {
-  margin-bottom: 0.25em; }
-#mysociety #col_problems, #mysociety #col_fixed {
-  float: left;
-  width: 48%;
-  margin-right: 1em; }
-#mysociety .contact-details {
-  font-size: 80%;
-  margin-top: 2em; }
-
-.olControlAttribution {
-  bottom: 3px !important;
-  left: 3px; }
-
-.olControlPermalink {
-  bottom: 3px !important;
-  right: 3px;
-}
-
-@media print {
-  #mysociety #map_box {
-    float: none;
-    margin: 0 auto; }
-  #mysociety #mysociety {
-    max-width: none; }
-  #mysociety #side {
-    margin-right: 0; } }
diff --git a/web/css/core.scss b/web/css/core.scss
index b962b38ae..f8a00a1f4 100644
--- a/web/css/core.scss
+++ b/web/css/core.scss
@@ -79,12 +79,11 @@ $map_width: 500px;
     p#expl {
         text-align: center;
         font-size: 150%;
-        margin: 0 2em;
+        margin: 0;
     }
 
     #postcodeForm {
-        display: table;
-        _width: 33em;
+        display: table; /* IE6 has fixed width set below */
         text-align: center;
         font-size: 150%;
         margin: 1em auto;
@@ -103,6 +102,12 @@ $map_width: 500px;
         }
     }
 
+    #geolocate_para {
+        font-size: 70%;
+        margin: 2px 0 0 0;
+        text-align: right;
+    }
+
     #front_intro {
         float: left;
         width: 48%;
@@ -113,14 +118,19 @@ $map_width: 500px;
         }
     }
 
+    #front_stats {
+        margin: 0 auto;
+        display: table; /* IE6 is set to floats below */
+        border-spacing: 2em 1em;
+    }
+
     #front_stats div {
         text-align: center;
         width: 5.5em;
         -moz-border-radius: 0.5em;
         -webkit-border-radius: 0.5em;
         border-radius: 0.5em;
-        float: left;
-        margin: 0 1em 1em;
+        display: table-cell;
 
         big {
             font-size: 150%;
@@ -141,6 +151,10 @@ $map_width: 500px;
         margin-top: 0;
     }
 
+    #front_photos {
+        text-align: center;
+    }
+
     // Forms
 
     form {
@@ -232,7 +246,7 @@ $map_width: 500px;
     }
 
     #map {
-        border: solid 1px #000000;
+        border: solid 1px #666666;
         width: $map_width; // Twice a tile width
         height: $map_width;
         overflow: hidden;
@@ -240,6 +254,7 @@ $map_width: 500px;
         background-color: #f1f1f1;
     }
 
+    /* Drag is only present in noscript form */
     #drag {
         position: absolute;
         width: $map_width;
@@ -542,6 +557,18 @@ $map_width: 500px;
     right: 3px;
 }
 
+.ie6 {
+    #mysociety {
+        #front_stats div {
+            float: left;
+            margin: 0 1em 1em;
+        }
+        #postcodeForm {
+            width: 33em;
+        }
+    }
+}
+
 // Printing, SCSS doesn't handle @media nesting
 
 @media print {
@@ -552,3 +579,61 @@ $map_width: 500px;
     }
 }
 
+@media all and (max-width: 50em) {
+    #mysociety {
+        p#expl {
+            font-size: 110%;
+        }
+
+        #postcodeForm {
+            font-size: 100%;
+            span {
+                display: block;
+                font-size: 150%;
+            }
+            #submit {
+                font-size: 100%;
+            }
+        }
+
+        #geolocate_para {
+            font-size: 100%;
+        }
+
+        #front_intro {
+            float: none;
+            width: auto;
+        }
+        #front_recent {
+            margin-top: 1em;
+            float: none;
+            width: auto;
+            clear: both;
+        }
+        #front_photos {
+            white-space: nowrap;
+            overflow: hidden;
+        }
+        #front_stats {
+            border-spacing: 0.5em 1em;
+        }
+
+        #form_sign_in_yes {
+            float: none;
+            width: auto;
+            padding-right: 0;
+            border-right: none;
+            margin-bottom: 1em;
+        }
+
+        #form_sign_in_no, #fieldset #form_sign_in_no {
+            float: none;
+            width: auto;
+            padding-left: 0;
+            clear: none;
+            margin-bottom: 1em;
+        }
+
+    }
+}
+
diff --git a/web/css/ie6.css b/web/css/ie6.css
deleted file mode 100644
index fd3e26047..000000000
--- a/web/css/ie6.css
+++ /dev/null
@@ -1,17 +0,0 @@
-#logo {
-    display: none;
-}
-
-#logoie {
-    width: 133px;
-    height: 26px;
-    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/i/mysociety-dark.png',sizingMethod='scale');
-    position: absolute;
-    top: 4em;
-    right: 10px;
-    cursor: pointer;
-}
-
-#emptyhomes-footer {
-    zoom: 1;
-}
diff --git a/web/css/main.css b/web/css/main.css
deleted file mode 100644
index a3fe3b400..000000000
--- a/web/css/main.css
+++ /dev/null
@@ -1,175 +0,0 @@
-a:link {
-  color: #0000ff;
-}
-a:visited {
-  color: #000099;
-}
-a:hover, a:active {
-  color: #ff0000;
-}
-
-body {
-  font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif;
-  margin: 0;
-  padding: 0;
-}
-
-h1 {
-  margin: 0;
-  font-size: 175%;
-}
-
-h2 {
-  font-size: 140%;
-}
-
-select, input, textarea {
-  font-size: 99%;
-}
-
-#mysociety a.unsuitable-report {
-  font-size: small;
-}
-#mysociety blockquote {
-  border-left: solid 4px #5e552b;
-}
-#mysociety .a {
-  color: #000000;
-  background-color: #f3e5a5;
-}
-#mysociety #postcodeForm {
-  background-color: #e3d595;
-}
-#mysociety #front_stats div {
-  background-color: #e3d595;
-}
-#mysociety p.promo {
-  border-top: 1px solid #bbb;
-  border-bottom: 1px solid #bbb;
-  background-color: #eee;
-  text-align: center;
-  padding: 0 0.5em;
-}
-
-#header {
-  font-size: 200%;
-  font-weight: bold;
-  border-bottom: solid 2px #5e552b;
-  margin: 0;
-  padding: 0.15em 0.5em;
-  background-color: #e3d595;
-  color: #5e552b;
-}
-#header a:link, #header a:visited {
-  color: #5e552b;
-  background-color: #e3d595;
-  text-decoration: none;
-}
-#header a:active, #header a:hover {
-  text-decoration: underline;
-}
-
-#my {
-  color: #4e451b;
-  background-color: #e3d595;
-}
-
-#mysociety {
-  width: 100%;
-  /* Must specify a width or IE goes crazy wrong! */
-  position: relative;
-  margin: 0 auto;
-  max-width: 60em;
-  overflow: auto;
-}
-
-/* Can't put the margin in #mysociety because of above IE craziness */
-#wrapper {
-  margin: 1em 2em;
-}
-
-#meta {
-  list-style-type: none;
-  margin: 0.25em 0 0 1em;
-  padding: 0;
-  font-size: 0.875em;
-}
-#meta li {
-  display: inline;
-  margin: 0;
-  padding: 0 0 0 0.25em;
-  border-left: solid 1px #5e552b;
-}
-#meta li:first-child {
-  border-left: none;
-}
-
-.v {
-  display: none;
-}
-
-#navigation {
-  position: absolute;
-  top: 1em;
-  right: 1em;
-  padding: 0;
-  margin: 0;
-  list-style-type: none;
-}
-#navigation li {
-  display: inline;
-  padding: 0;
-  margin: 0;
-}
-#navigation a {
-  display: -moz-inline-box;
-  display: inline-block;
-  padding: 0.4em 1em;
-}
-#navigation a:link, #navigation a:visited {
-  color: #5e552b;
-}
-#navigation a:hover, #navigation a:active {
-  background-color: #5e552b;
-  color: #e3d595;
-  -moz-border-radius-topleft: 0.5em;
-  -webkit-border-top-left-radius: 0.5em;
-  border-radius-top-left: 0.5em;
-  -moz-border-radius-topright: 0.5em;
-  -webkit-border-top-right-radius: 0.5em;
-  border-radius-top-right: 0.5em;
-}
-
-#nav_new a {
-  background-image: url("/i/new.png");
-  background-repeat: no-repeat;
-  background-position: 100% 0;
-}
-
-#logo {
-  border: none;
-  position: absolute;
-  top: 3.3em;
-  right: 10px;
-}
-
-#footer {
-  clear: both;
-  text-align: center;
-  border-top: solid 2px #ccc;
-  width: 50%;
-  margin: 1em auto 0;
-  padding: 0;
-  color: #333333;
-}
-#footer .l, #footer .r {
-  margin-top: 0;
-  text-align: left;
-  width: 45%;
-}
-#footer .l {
-  float: left;
-}
-#footer .r {
-  float: right;
-}
diff --git a/web/down.default.html b/web/down.default.html
index 10502d89b..c109ece36 100644
--- a/web/down.default.html
+++ b/web/down.default.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-<html lang="en-gb">
+<!doctype html>
+<!--[if lt IE 7]><html class="ie6 oldie" lang="en-gb"><![endif]-->
+<!--[if IE 7]>   <html class="ie7 oldie" lang="en-gb"><![endif]-->
+<!--[if IE 8]>   <html class="ie8 oldie" lang="en-gb"><![endif]-->
+<!--[if gt IE 8]><!--><html lang="en-gb"><!--<![endif]-->
     <head>
         <title>FixMyStreet</title>
     <link rel="stylesheet" type="text/css" href="/css/core.css">
     <link rel="stylesheet" type="text/css" href="/css/main.css">
-<!--[if LT IE 7]>
-    <link rel="stylesheet" type="text/css" href="/css/ie6.css">
-<![endif]-->
 
     </head>
     <body>
diff --git a/web/i/flower.gif b/web/i/flower.gif
new file mode 100644
index 000000000..7e8f22a77
--- /dev/null
+++ b/web/i/flower.gif
diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js
index 9fa0f948b..48d66360b 100644
--- a/web/js/fixmystreet.js
+++ b/web/js/fixmystreet.js
@@ -83,4 +83,32 @@ $(function(){
         }
     });
 
+    // Geolocation
+    if (geo_position_js.init()) {
+        $('#postcodeForm').append('<p id="geolocate_para">Or <a href="#" id="geolocate_link">locate me automatically</a>').css({ "padding-bottom": "0.5em" });
+        $('#geolocate_link').click(function(e) {
+            e.preventDefault();
+            // Spinny thing!
+            $('#geolocate_para').append(' <img src="/i/flower.gif" alt="" align="bottom">');
+            geo_position_js.getCurrentPosition(function(pos) {
+                $('#geolocate_para img').remove();
+                var latitude = pos.coords.latitude;
+                var longitude = pos.coords.longitude;
+                location.href = '/around?latitude=' + latitude + ';longitude=' + longitude;
+            }, function(err) {
+                $('#geolocate_para img').remove();
+                if (err.code == 1) { // User said no
+                } else if (err.code == 2) { // No position
+                    $('#geolocate_para').html("Could not look up location");
+                } else if (err.code == 3) { // Too long
+                    $('#geolocate_para').html("No result returned");
+                } else { // Unknown
+                    $('#geolocate_para').html("Unknown error");
+                }
+            }, {
+                timeout: 10000
+            });
+        });
+    }
+
 });
diff --git a/web/js/geo.min.js b/web/js/geo.min.js
new file mode 100644
index 000000000..4f44b30ca
--- /dev/null
+++ b/web/js/geo.min.js
@@ -0,0 +1,85 @@
+// geo-location-javascript v0.4.8 http://code.google.com/p/geo-location-javascript/ Copyright (c) 2009 Stan Wiechers. Licensed under the MIT licenses.
+
+var bb_success;var bb_error;var bb_blackberryTimeout_id=-1;function handleBlackBerryLocationTimeout()
+{if(bb_blackberryTimeout_id!=-1)
+{bb_error({message:"Timeout error",code:3});}}
+function handleBlackBerryLocation()
+{clearTimeout(bb_blackberryTimeout_id);bb_blackberryTimeout_id=-1;if(bb_success&&bb_error)
+{if(blackberry.location.latitude==0&&blackberry.location.longitude==0)
+{bb_error({message:"Position unavailable",code:2});}
+else
+{var timestamp=null;if(blackberry.location.timestamp)
+{timestamp=new Date(blackberry.location.timestamp);}
+bb_success({timestamp:timestamp,coords:{latitude:blackberry.location.latitude,longitude:blackberry.location.longitude}});}
+bb_success=null;bb_error=null;}}
+var geo_position_js=function(){var pub={};var provider=null;var u="undefined";pub.showMap=function(latitude,longitude)
+{if(typeof(blackberry)!=u)
+{blackberry.launch.newMap({"latitude":latitude*100000,"longitude":-longitude*100000});}
+else
+{window.location="http://maps.google.com/maps?q=loc:"+latitude+","+longitude;}}
+pub.getCurrentPosition=function(success,error,opts)
+{provider.getCurrentPosition(success,error,opts);}
+pub.init=function()
+{try
+{if(typeof(geo_position_js_simulator)!=u)
+{provider=geo_position_js_simulator;}
+else if(typeof(bondi)!=u&&typeof(bondi.geolocation)!=u)
+{provider=bondi.geolocation;}
+else if(typeof(navigator.geolocation)!=u)
+{provider=navigator.geolocation;pub.getCurrentPosition=function(success,error,opts)
+{function _success(p)
+{if(typeof(p.latitude)!=u)
+{success({timestamp:p.timestamp,coords:{latitude:p.latitude,longitude:p.longitude}});}
+else
+{success(p);}}
+provider.getCurrentPosition(_success,error,opts);}}
+else if(typeof(window.blackberry)!=u&&blackberry.location.GPSSupported)
+{if(typeof(blackberry.location.setAidMode)==u)
+{return false;}
+blackberry.location.setAidMode(2);pub.getCurrentPosition=function(success,error,opts)
+{bb_success=success;bb_error=error;if(opts['timeout'])
+{bb_blackberryTimeout_id=setTimeout("handleBlackBerryLocationTimeout()",opts['timeout']);}
+else
+{bb_blackberryTimeout_id=setTimeout("handleBlackBerryLocationTimeout()",60000);}
+blackberry.location.onLocationUpdate("handleBlackBerryLocation()");blackberry.location.refreshLocation();}
+provider=blackberry.location;}
+else if(typeof(window.google)!="undefined"&&typeof(google.gears)!="undefined")
+{provider=google.gears.factory.create('beta.geolocation');pub.getCurrentPosition=function(successCallback,errorCallback,options)
+{function _successCallback(p)
+{if(typeof(p.latitude)!="undefined")
+{successCallback({timestamp:p.timestamp,coords:{latitude:p.latitude,longitude:p.longitude}});}
+else
+{successCallback(p);}}
+provider.getCurrentPosition(_successCallback,errorCallback,options);}}
+else if(typeof(Mojo)!=u&&typeof(Mojo.Service.Request)!="Mojo.Service.Request")
+{provider=true;pub.getCurrentPosition=function(success,error,opts)
+{parameters={};if(opts)
+{if(opts.enableHighAccuracy&&opts.enableHighAccuracy==true)
+{parameters.accuracy=1;}
+if(opts.maximumAge)
+{parameters.maximumAge=opts.maximumAge;}
+if(opts.responseTime)
+{if(opts.responseTime<5)
+{parameters.responseTime=1;}
+else if(opts.responseTime<20)
+{parameters.responseTime=2;}
+else
+{parameters.timeout=3;}}}
+r=new Mojo.Service.Request('palm://com.palm.location',{method:"getCurrentPosition",parameters:parameters,onSuccess:function(p){success({timestamp:p.timestamp,coords:{latitude:p.latitude,longitude:p.longitude,heading:p.heading}});},onFailure:function(e){if(e.errorCode==1)
+{error({code:3,message:"Timeout"});}
+else if(e.errorCode==2)
+{error({code:2,message:"Position unavailable"});}
+else
+{error({code:0,message:"Unknown Error: webOS-code"+errorCode});}}});}}
+else if(typeof(device)!=u&&typeof(device.getServiceObject)!=u)
+{provider=device.getServiceObject("Service.Location","ILocation");pub.getCurrentPosition=function(success,error,opts)
+{function callback(transId,eventCode,result){if(eventCode==4)
+{error({message:"Position unavailable",code:2});}
+else
+{success({timestamp:null,coords:{latitude:result.ReturnValue.Latitude,longitude:result.ReturnValue.Longitude,altitude:result.ReturnValue.Altitude,heading:result.ReturnValue.Heading}});}}
+var criteria=new Object();criteria.LocationInformationClass="BasicLocationInformation";provider.ILocation.GetLocation(criteria,callback);}}}
+catch(e){if(typeof(console)!=u)
+{console.log(e);}
+return false;}
+return provider!=null;}
+return pub;}();
\ No newline at end of file