Merge branch 'master' into migrate_to_catalyst

Conflicts:
	.gitignore
	commonlib
	conf/packages
	perllib/FixMyStreet/Map.pm
	templates/website/cobrands/barnet/footer
	web/confirm.cgi
	web/css/core.css
	web/import.cgi
	web/index.cgi

8 files changed, 1131 insertions, 584 deletions

diff --git a/web/css/_main.scss b/web/css/_main.scss
new file mode 100644
index 000000000..44fd82b3b
--- /dev/null
+++ b/web/css/_main.scss
@@ -0,0 +1,139 @@
+// Generics
+
+body {
+    font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    // color: #a9aeb0;
+}
+
+h1 {
+    margin: 0;
+    font-size: 175%;
+}
+h2 {
+    font-size: 140%;
+}
+
+select, input, textarea {
+    font-size: 99%;
+}
+
+#mysociety {
+
+    a.unsuitable-report {
+        font-size: small;
+    }
+
+    blockquote {
+        border-left: solid 4px $header_colour;
+    }
+
+    .a {
+        color: #000000;
+        background-color: $header_back_lighter;
+    }
+
+    #postcodeForm {
+        background-color: $header_back;
+    }
+
+    #front_stats div {
+        background-color: $header_back;
+    }
+
+}
+
+// Site layout
+
+#header {
+    font-size: 200%;
+    font-weight: bold;
+    border-bottom: solid 2px $header_colour;
+    margin: 0;
+    padding: 0.15em 0.5em;
+    background-color: $header_back;
+    color: $header_colour;
+
+    a:link, a:visited {
+        color: $header_colour;
+        background-color: $header_back;
+        text-decoration: none;
+    }
+    a:active, a:hover {
+        text-decoration: underline;
+    }
+}
+
+#my {
+    color: $header_darker;
+    background-color: $header_back;
+}
+
+#mysociety {
+    width: 100%; /* Must specify a width or IE goes crazy wrong! */
+    position: relative;
+    margin: 0 auto;
+    max-width: 60em;
+}
+
+/* Can't put the margin in #mysociety because of above IE craziness */
+#wrapper {
+    margin: 2em;
+}
+
+.v {
+    display: none;
+}
+
+#navigation {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+
+    li {
+        display: inline;
+        padding: 0;
+        margin: 0;
+    }
+
+    a {
+        display: -moz-inline-box;
+        display: inline-block;
+        padding: 0.4em 1em;
+    }
+    a:link, a:visited {
+        color: $header_colour;
+    }
+    a:hover, a:active {
+        background-color: $header_colour;
+        color: $header_back;
+    }
+}
+
+#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: right;
+    font-size: 83%;
+    border-top: solid 1px $header_colour;
+    display: table;
+    margin: 2em 0 1em auto;
+    padding: 2px 4px;
+}
+
diff --git a/web/css/cobrands/emptyhomes/emptyhomes.css b/web/css/cobrands/emptyhomes/emptyhomes.css
index c3d514807..15afee568 100644
--- a/web/css/cobrands/emptyhomes/emptyhomes.css
+++ b/web/css/cobrands/emptyhomes/emptyhomes.css
@@ -74,8 +74,6 @@ blockquote {
 /* Site layout */
 
 #header {
-    font-size: 200%;
-    font-weight: bold;
     margin: 0;
     padding: 5px 0;
     float: left;
@@ -85,14 +83,24 @@ blockquote {
     margin-left: 0.5em;
 }
 
-#content {
+#header #eha-logo {
+    float: left;
+    margin-right: 1em;
+}
+
+#header div {
+    float: left;
+    margin-top: 0.5em;
+}
+
+#mysociety {
     width: 100%; /* Must specify a width or IE goes crazy wrong! */
     position: relative;
     margin: 0 auto;
     max-width: 60em;
 }
 
-/* Can't put the margin in #content because of above IE craziness */
+/* Can't put the margin in #mysociety because of above IE craziness */
 #wrapper {
     clear: both;
     margin: 0 2em 2em;
@@ -146,7 +154,7 @@ blockquote {
     right: 10px;
 }
 
-#footer {
+#emptyhomes-footer {
     clear: both;
     font-size: 83%;
     border-top: solid 2em #ffffff;
@@ -156,11 +164,11 @@ blockquote {
     padding: 20px;
     overflow: auto;
 }
-#footer div {
+#emptyhomes-footer div {
     float: left;
-    margin-right: 1em;
+    margin-right: 2em;
 }
-#footer a {
+#emptyhomes-footer a {
     color: #FFFFFF;
 }
 
diff --git a/web/css/core.css b/web/css/core.css
index 0ff8fb1a2..5b64d67b9 100644
--- a/web/css/core.css
+++ b/web/css/core.css
@@ -1,488 +1,379 @@
-/* Generics */
 
-blockquote {
-    border-left: solid 4px #666666;
-    padding-left: 0.5em;
+#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.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;
+  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 #watermark {
+  background: url("/i/mojwatermark6.png");
+  height: 113px;
+  width: 231px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+#mysociety #map_box {
+  float: right;
+  width: 502px;
+  position: relative;
+  padding-left: 20px;
+  background-color: #ffffff;
+}
+#mysociety p#copyright {
+  float: 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 #compass {
+  background-color: #ffffff;
+  border: solid 1px #000000;
+  border-width: 0 1px 1px 0;
+  color: #000000;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+#mysociety #compass img {
+  border: 0;
+}
+#mysociety #text_map {
+  margin-top: 0.5em;
+  margin-bottom: 1em;
+  font-size: 110%;
+}
+#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 #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: 0.5em;
+  margin-bottom: 0;
+}
+#mysociety #alert_links {
+  float: right;
+}
+#mysociety #alert_links_area {
+  background-color: #ffeecc;
+  border: solid 1px #ff9900;
+  border-width: 1px 0;
+  padding: 3px 10px;
+  margin: 0;
+}
+#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;
 }
-blockquote h2, blockquote p {
-    margin: 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%;
 
-form {
-    margin: 0;
 }
-
-label {
-    float: left;
-    text-align: right;
-    padding-right: 0.5em;
-    width: 5em;
-}
-
-fieldset, #fieldset {
-    border: none;
-    padding: 0.5em;
-}
-
-legend {
-    display: none;
-}
-
-dt {
-    font-weight: bold;
-    margin-top: 0.5em;
-}
-
-.v { display: none; }
-
-.gone {
-    color: #666666;
-    background-color: #cccccc;
-}
-
-p.error {
-    text-align: center;
-    color: #cc0000;
-    font-size: larger;
-}
-
-span.error {
-    color: #cc0000;
-}
-
-ul {
-    padding: 0 0 0 1.5em;
-    margin: 0;
-}
-
-ul.error {
-    color: #cc0000;
-    background-color: #ffeeee;
-    padding-right: 4px;
-    text-align: left;
-    font-size: larger;
+#mysociety #alert_photos img {
+  margin-bottom: 0.25em;
 }
-
-div.form-error {
-    color: #cc0000;
-    margin: 5px 1em 5px 1em;
-    padding: 2px 5px 2px 5px;
-    float: left;
-    background-color: #ffeeee;
-    text-align: left;
+#mysociety #col_problems, #mysociety #col_fixed {
+  float: left;
+  width: 48%;
+  margin-right: 1em;
 }
-
-div.form-field {
-    clear: both;
-}
-
-/* Site-wide layout */
-
-#advert_thin {
-    width: 50%;
-    margin: 1em auto;
-    border-top: dotted 1px #999999;
-}
-#advert_hfymp {
-    border-top: dotted 1px #999999;
-    text-align: center;
-}
-
-/* Front page */
-
-p#expl {
-    text-align: center;
-    font-size: 150%;
-    margin: 0 2em;
-}
-
-#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;
-}
-
-#postcodeForm label {
-    float: none;
-    padding-right: 0;
-}
-
-#postcodeForm #submit {
-    font-size: 83%;
+#mysociety .contact-details {
+  font-size: 80%;
+  margin-top: 2em;
 }
 
-#front_intro {
-    float: left;
-    width: 48%;
-}
-
-#front_intro p {
-    clear: both;
-    margin-top: 0;
-}
-
-#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;
-}
-
-#front_stats div big {
-    font-size: 150%;
-    display: block;
-}
-
-#front_recent {
-    float: right;
-    width: 48%;
-    margin-bottom: 1em;
-}
-#front_recent img, #alert_recent img {
-    margin-right: 0.25em;
-    margin-bottom: 0.25em;
-}
-#front_recent > h2:first-child, #front_intro > h2:first-child {
-    margin-top: 0;
-}
-
-/* Forms */
-
-fieldset div, #fieldset div {
-    margin-top: 2px;
-    clear: left;
-}
-#fieldset div.checkbox, #problem_submit {
-    padding-left: 5.5em;
-}
-#fieldset div.checkbox label, label.n {
-    float: none;
-    text-align: left;
-    padding-right: 0;
-    width: auto;
-    cursor: pointer;
-    cursor: hand;
-}
-
-#questionnaire label, #alerts label {
-    float: none;
-}
-
-.confirmed {
-    background-color: #ccffcc;
-    border: solid 2px #009900;
-    padding: 5px;
-    text-align: center;
-}
-
-/* Map */
-
-#watermark {
-    background: url("/i/mojwatermark6.png");
-    height: 113px;
-    width: 231px;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-}
-
-#map_box {
-    float: right;
-    width: 502px; /* Two pixels more than width of #map */
-    position: relative;
-    padding-left: 20px;
-    background-color: #ffffff;
-}
-
-p#copyright {
-    float: right;
-    margin: 0 0 1em 0;
-    font-size: 78%;
-}
-
-#map {
-    border: solid 1px #000000;
-    width: 500px; /* Twice a tile width */
-    height: 500px;
-    overflow: hidden;
-    position: relative;
-    background-color: #f1f1f1;
-}
-
-#drag {
-    position: absolute;
-    width: 500px;
-    height: 500px;
-    right: 0;
-    top: 0;
-}
-
-#drag input {
-    cursor: crosshair;
-    background-color: #cccccc;
-}
-#drag img {
-    cursor: move;
-}
-#drag input, #drag img {
-    position: absolute;
-    border: none;
-}
-#drag img.pin {
-    z-index: 100;
-    background-color: inherit;
-}
-#drag a img.pin {
-    cursor: pointer;
-    cursor: hand;
-}
-
-#compass {
-    background-color: #ffffff;
-    border: solid 1px #000000;
-    border-width: 0 1px 1px 0;
-    color: #000000;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-}
-
-#compass img {
-    border: 0;
-}
-
-#text_map {
-    margin-top: 0.5em;
-    margin-bottom: 1em;
-    font-size: 110%;
-}
-#text_no_map {
-    margin-top: 0;
-    /* background-color: #ffeecc;
-    padding: 4px; */
-}
-
-#sub_map_links {
-    float: right;
-    clear: right;
-    margin-top: 0;
-}
-
-/* Problem pages */
-
-#fixed, #unknown {
-    margin: 0 530px 1em 0;
-    padding: 5px;
-    text-align: center;
-    position: relative;
-}
-#fixed {
-    background-color: #ccffcc;
-    border: solid 2px #009900;
-}
-#unknown {
-    background-color: #ffcccc;
-    border: solid 2px #990000;
-}
-
-#updates div {
-    padding: 0 0 0.5em;
-    margin: 0 0 0.25em;
-    border-bottom: dotted 1px #5e552b;
-}
-
-#updates div .problem-update,
-#updates div .update-text {
-   padding: 0;
-   margin: 0;
-   border-bottom: 0;
-}
-#updates p {
-    margin: 0;
-}
-
-#nearby_lists h2 {
-    margin-top: 0.5em;
-    margin-bottom: 0;
-}
-#alert_links {
-    float: right;
-}
-#alert_links_area {
-    background-color: #ffeecc;
-    border: solid 1px #ff9900;
-    border-width: 1px 0;
-    padding: 3px 10px;
-    /* padding: 0 3px; */
-    margin: 0;
-}
-#rss_alert {
-    text-decoration: none;
-}
-#rss_alert span {
-    text-decoration: underline;
-}
-#email_alert {
-}
-#email_alert_box {
-    display:none;
-    position: absolute;
-    padding: 3px;
-    font-size:83%;
-    border:solid 1px #7399C3;
-    background-color: #eeeeff;
-    color: #000000;
-}
-#email_alert_box p {
-    margin: 0;
-}
-
-.council_sent_info {
-   font-size: smaller;
-}
-
-/* RSS feed XSL */
-
-#rss_items {
-    width:62%;
-    float:left;
-}
-#rss_rhs {
-    border-left:1px dashed #999;
-    width:36%;
-    float:right;
-    padding: 0 0 0 0.5em;
-    margin: 0 0 1em 0.5em;
-}
-#rss_box {
-    padding:10px;
-    border:1px solid #999999;
-}
-
-/* Alerts */
-#rss_feed {
-    list-style-type: none;
-    margin-bottom: 2em;
-}
-#rss_feed li {
-    margin-bottom: 1em;
-}
-#alert_or {
-    font-style: italic;
-    font-size: 125%;
-    margin: 0;
-}
-#rss_list {
-    float: left;
-    width: 47%;
-}
-#rss_list ul {
-    list-style-type: none;
-}
-#rss_buttons {
-    float: right;
-    width: 35%;
-    text-align: center;
-    margin-bottom: 2em;
-}
-#rss_local {
-    margin-left: 1.5em;
-    margin-bottom: 0;
-}
-#rss_local_alt {
-    margin: 0 0 2em 4em;
-}
-
-#alert_photos {
-    text-align: center;
-    float: right;
-    width: 150px;
-    margin-left: 0.5em;
-}
-#alert_photos h2 {
-    font-size: 100%;
-}
-#alert_photos img {
-    margin-bottom: 0.25em;
-}
-
-/* Report page */
-
-#col_problems, #col_fixed {
-    float: left;
-    width: 48%;
-    margin-right: 1em;
-}
-
-/* Contact page */
-.contact-details {
-    font-size: 80%;
-    margin-top: 2em;
-}
-
-/* Printing */
 @media print {
-    #map_box { float: none; margin: 0 auto; }
-    #content { max-width: none; }
-    #side { margin-right: 0; }
-}
-
-/* File upload */
-.progressContainer {
-    margin: 5px;
-    padding: 4px;
-    width: 357px;
-    border: solid 1px #E8E8E8;
-    background-color: #F7F7F7;
-    overflow: hidden;
-}
-.red {   border: solid 1px #B50000; background-color: #FFEBEB; }
-.green { border: solid 1px #DDF0DD; background-color: #EBFFEB; }
-.blue {  border: solid 1px #CEE2F2; background-color: #F0F5FF; }
-
-.progressName {
-    font-size: 8pt;
-    font-weight: bold;
-    color: #555555;
-    width: 323px;
-    height: 14px;
-    text-align: left;
-    white-space: nowrap;
-    overflow: hidden;
-}
-.progressBarInProgress, .progressBarComplete, .progressBarError {
-    font-size: 0px;
-    width: 0%;
-    height: 2px;
-    background-color: blue;
-    margin-top: 2px;
-}
-.progressBarComplete {
-    width: 100%;
-    background-color: green;
-    visibility: hidden;
-}
-.progressBarError {
-    width: 100%;
-    background-color: red;
-    visibility: hidden;
-}
-.progressBarStatus {
-    margin-top: 2px;
-    width: 337px;
-    font-size: 7pt;
-    font-family: Verdana;
-    text-align: left;
-    white-space: nowrap;
+  #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
new file mode 100644
index 000000000..8bbebfce1
--- /dev/null
+++ b/web/css/core.scss
@@ -0,0 +1,503 @@
+$map_width: 500px;
+
+@mixin problem-banner {
+    margin: 0 $map_width + 30px 1em 0;
+    padding: 5px;
+    text-align: center;
+    position: relative;
+}
+
+// Generics
+
+#mysociety {
+
+    blockquote {
+        border-left: solid 4px #666666;
+        padding-left: 0.5em;
+        h2, p {
+            margin: 0;
+        }
+    }
+
+    dt {
+        font-weight: bold;
+        margin-top: 0.5em;
+    }
+
+    .gone {
+        color: #666666;
+        background-color: #cccccc;
+    }
+
+    p.error {
+        text-align: center;
+        color: #cc0000;
+        font-size: larger;
+    }
+
+    ul {
+        padding: 0 0 0 1.5em;
+        margin: 0;
+    }
+
+    ul.error {
+        color: #cc0000;
+        background-color: #ffeeee;
+        padding-right: 4px;
+        text-align: left;
+        font-size: larger;
+    }
+
+    div.form-error {
+        color: #cc0000;
+        margin: 5px 1em 5px 1em;
+        padding: 2px 5px 2px 5px;
+        float: left;
+        background-color: #ffeeee;
+        text-align: left;
+    }
+
+    div.form-field {
+        clear: both;
+    }
+
+    // Site-wide layout
+
+    #advert_thin {
+        width: 50%;
+        margin: 1em auto;
+        border-top: dotted 1px #999999;
+    }
+    #advert_hfymp {
+        border-top: dotted 1px #999999;
+        text-align: center;
+    }
+
+    // Front page
+
+    p#expl {
+        text-align: center;
+        font-size: 150%;
+        margin: 0 2em;
+    }
+
+    #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;
+
+        label {
+            float: none;
+            padding-right: 0;
+        }
+
+        #submit {
+            font-size: 83%;
+        }
+    }
+
+    #front_intro {
+        float: left;
+        width: 48%;
+
+        p {
+            clear: both;
+            margin-top: 0;
+        }
+    }
+
+    #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;
+
+        big {
+            font-size: 150%;
+            display: block;
+        }
+    }
+
+    #front_recent {
+        float: right;
+        width: 48%;
+        margin-bottom: 1em;
+    }
+    #front_recent img, #alert_recent img {
+        margin-right: 0.25em;
+        margin-bottom: 0.25em;
+    }
+    #front_recent > h2:first-child, #front_intro > h2:first-child {
+        margin-top: 0;
+    }
+
+    // Forms
+
+    form {
+        margin: 0;
+    }
+
+    label {
+        float: left;
+        text-align: right;
+        padding-right: 0.5em;
+        width: 5em;
+    }
+
+    fieldset, #fieldset {
+        border: none;
+        padding: 0.5em;
+        div {
+            margin-top: 2px;
+            clear: left;
+        }
+    }
+
+    legend {
+        display: none;
+    }
+
+    #fieldset div.checkbox, #problem_submit {
+        padding-left: 5.5em;
+    }
+    #fieldset div.checkbox label, label.n {
+        float: none;
+        text-align: left;
+        padding-right: 0;
+        width: auto;
+        cursor: pointer;
+        cursor: hand;
+    }
+
+    #questionnaire label, #alerts label {
+        float: none;
+    }
+
+    .confirmed {
+        background-color: #ccffcc;
+        border: solid 2px #009900;
+        padding: 5px;
+        text-align: center;
+    }
+
+    // Map
+
+    #watermark {
+        background: url("/i/mojwatermark6.png");
+        height: 113px;
+        width: 231px;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+    }
+
+    #map_box {
+        float: right;
+        width: $map_width + 2px;
+        position: relative;
+        padding-left: 20px;
+        background-color: #ffffff;
+    }
+
+    p#copyright {
+        float: right;
+        margin: 0 0 1em 0;
+        font-size: 78%;
+    }
+
+    #map {
+        border: solid 1px #000000;
+        width: $map_width; // Twice a tile width
+        height: $map_width;
+        overflow: hidden;
+        position: relative;
+        background-color: #f1f1f1;
+    }
+
+    #drag {
+        position: absolute;
+        width: $map_width;
+        height: $map_width;
+        right: 0;
+        top: 0;
+
+        input, img {
+            position: absolute;
+            border: none;
+        }
+        input {
+            cursor: crosshair;
+            background-color: #cccccc;
+        }
+        img {
+            cursor: move;
+        }
+        img.pin {
+            z-index: 100;
+            background-color: inherit;
+        }
+        a img.pin {
+            cursor: pointer;
+            cursor: hand;
+        }
+    }
+
+    form#mapForm #map {
+        cursor: pointer;
+    }
+
+    form#mapForm .olTileImage {
+        cursor: crosshair;
+    }
+
+    #compass {
+        background-color: #ffffff;
+        border: solid 1px #000000;
+        border-width: 0 1px 1px 0;
+        color: #000000;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        img {
+            border: 0;
+        }
+    }
+
+    #text_map {
+        margin-top: 0.5em;
+        margin-bottom: 1em;
+        font-size: 110%;
+    }
+    #text_no_map {
+        margin-top: 0;
+        // background-color: #ffeecc;
+        // padding: 4px;
+    }
+
+    #sub_map_links {
+        float: right;
+        clear: right;
+        margin-top: 0;
+    }
+
+    // Problem pages
+
+    #fixed {
+        @include problem-banner;
+        background-color: #ccffcc;
+        border: solid 2px #009900;
+    }
+
+    #unknown {
+        @include problem-banner;
+        background-color: #ffcccc;
+        border: solid 2px #990000;
+    }
+
+    #updates {
+        div {
+            padding: 0 0 0.5em;
+            margin: 0 0 0.25em;
+            border-bottom: dotted 1px #5e552b;
+
+            .problem-update, .update-text {
+                padding: 0;
+                margin: 0;
+                border-bottom: 0;
+            }
+        }
+
+        p {
+            margin: 0;
+        }
+    }
+
+    #nearby_lists h2 {
+        margin-top: 0.5em;
+        margin-bottom: 0;
+    }
+    #alert_links {
+        float: right;
+    }
+    #alert_links_area {
+        background-color: #ffeecc;
+        border: solid 1px #ff9900;
+        border-width: 1px 0;
+        padding: 3px 10px;
+        // padding: 0 3px;
+        margin: 0;
+    }
+    #rss_alert {
+        text-decoration: none;
+        span {
+            text-decoration: underline;
+        }
+    }
+    #email_alert {
+    }
+    #email_alert_box {
+        display:none;
+        position: absolute;
+        padding: 3px;
+        font-size:83%;
+        border:solid 1px #7399C3;
+        background-color: #eeeeff;
+        color: #000000;
+    }
+    #email_alert_box p {
+        margin: 0;
+    }
+
+    .council_sent_info {
+       font-size: smaller;
+    }
+
+    // RSS feed XSL
+
+    #rss_items {
+        width:62%;
+        float:left;
+    }
+    #rss_rhs {
+        border-left:1px dashed #999;
+        width:36%;
+        float:right;
+        padding: 0 0 0 0.5em;
+        margin: 0 0 1em 0.5em;
+    }
+    #rss_box {
+        padding:10px;
+        border:1px solid #999999;
+    }
+
+    // Alerts
+    #rss_feed {
+        list-style-type: none;
+        margin-bottom: 2em;
+    }
+    #rss_feed li {
+        margin-bottom: 1em;
+    }
+    #alert_or {
+        font-style: italic;
+        font-size: 125%;
+        margin: 0;
+    }
+    #rss_list {
+        float: left;
+        width: 47%;
+    }
+    #rss_list ul {
+        list-style-type: none;
+    }
+    #rss_buttons {
+        float: right;
+        width: 35%;
+        text-align: center;
+        margin-bottom: 2em;
+    }
+    #rss_local {
+        margin-left: 1.5em;
+        margin-bottom: 0;
+    }
+    #rss_local_alt {
+        margin: 0 0 2em 4em;
+    }
+
+    #alert_photos {
+        text-align: center;
+        float: right;
+        width: 150px;
+        margin-left: 0.5em;
+    }
+    #alert_photos h2 {
+        font-size: 100%;
+    }
+    #alert_photos img {
+        margin-bottom: 0.25em;
+    }
+
+    // Report page
+
+    #col_problems, #col_fixed {
+        float: left;
+        width: 48%;
+        margin-right: 1em;
+    }
+
+    // Contact page
+    .contact-details {
+        font-size: 80%;
+        margin-top: 2em;
+    }
+
+    // File upload
+    // .progressContainer {
+    //     margin: 5px;
+    //     padding: 4px;
+    //     width: 357px;
+    //     border: solid 1px #E8E8E8;
+    //     background-color: #F7F7F7;
+    //     overflow: hidden;
+    // }
+    // .red {   border: solid 1px #B50000; background-color: #FFEBEB; }
+    // .green { border: solid 1px #DDF0DD; background-color: #EBFFEB; }
+    // .blue {  border: solid 1px #CEE2F2; background-color: #F0F5FF; }
+
+    // .progressName {
+    //     font-size: 8pt;
+    //     font-weight: bold;
+    //     color: #555555;
+    //     width: 323px;
+    //     height: 14px;
+    //     text-align: left;
+    //     white-space: nowrap;
+    //     overflow: hidden;
+    // }
+    // .progressBarInProgress, .progressBarComplete, .progressBarError {
+    //     font-size: 0px;
+    //     width: 0%;
+    //     height: 2px;
+    //     background-color: blue;
+    //     margin-top: 2px;
+    // }
+    // .progressBarComplete {
+    //     width: 100%;
+    //     background-color: green;
+    //     visibility: hidden;
+    // }
+    // .progressBarError {
+    //     width: 100%;
+    //     background-color: red;
+    //     visibility: hidden;
+    // }
+    // .progressBarStatus {
+    //     margin-top: 2px;
+    //     width: 337px;
+    //     font-size: 7pt;
+    //     font-family: Verdana;
+    //     text-align: left;
+    //     white-space: nowrap;
+    // }
+
+}
+
+// Printing, SCSS doesn't handle @media nesting
+
+@media print {
+    #mysociety {
+        #map_box { float: none; margin: 0 auto; }
+        #mysociety { max-width: none; }
+        #side { margin-right: 0; }
+    }
+}
+
diff --git a/web/css/ie6-378.css b/web/css/ie6-378.css
index e22f519ff..83efdb634 100644
--- a/web/css/ie6-378.css
+++ b/web/css/ie6-378.css
@@ -1,4 +1,4 @@
-#watermark {
+#mysociety #watermark {
     background: none;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/i/mojwatermark-378.png',sizingMethod='scale');
 }
diff --git a/web/css/ie6.css b/web/css/ie6.css
index 051a117db..3bb91aa31 100644
--- a/web/css/ie6.css
+++ b/web/css/ie6.css
@@ -1,4 +1,4 @@
-#watermark {
+#mysociety #watermark {
     background: none;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/i/mojwatermark6.png',sizingMethod='scale');
 }
@@ -16,3 +16,7 @@
     right: 10px;
     cursor: pointer;
 }
+
+#emptyhomes-footer {
+    zoom: 1;
+}
diff --git a/web/css/main.css b/web/css/main.css
index f1d416773..ddea37970 100644
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -1,146 +1,134 @@
-/* Generics */
+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;
-    /* color: #a9aeb0; */
+  font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0;
 }
 
 h1 {
-    margin: 0;
-    font-size: 175%;
+  margin: 0;
+  font-size: 175%;
 }
+
 h2 {
-    font-size: 140%;
+  font-size: 140%;
 }
 
 select, input, textarea {
-    font-size: 99%;
+  font-size: 99%;
 }
 
-a:link {
-    color: #0000ff;
+#mysociety a.unsuitable-report {
+  font-size: small;
 }
-a:visited {
-    color: #000099;
-}
-a:hover, a:active {
-    color: #ff0000;
+#mysociety blockquote {
+  border-left: solid 4px #5e552b;
 }
-
-a.unsuitable-report {
-    font-size: small;
+#mysociety .a {
+  color: #000000;
+  background-color: #f3e5a5;
 }
-
-blockquote {
-    border-left: solid 4px #5e552b;
+#mysociety #postcodeForm {
+  background-color: #e3d595;
 }
-
-.a {
-    color: #000000;
-    background-color: #f3e5a5;
+#mysociety #front_stats div {
+  background-color: #e3d595;
 }
 
-/* Site layout */
-
 #header {
-    font-size: 200%;
-    font-weight: bold;
-    border-bottom: solid 2px #5e552b;
-    margin: 0;
-    padding: 0.15em 0.5em;
-    background-color: #e3d595;
-    color: #5e552b;
+  font-size: 200%;
+  font-weight: bold;
+  border-bottom: solid 2px #5e552b;
+  margin: 0;
+  padding: 0.15em 0.5em;
+  background-color: #e3d595;
+  color: #5e552b;
 }
-
-#my {
-    color: #4e451b;
-    background-color: #e3d595;
-}
-#beta {
-    color: #6e653b;
-    background-color: #e3d595;
-    font-size: 50%;
-    font-style: italic;
-}
-
 #header a:link, #header a:visited {
-    color: #5e552b;
-    background-color: #e3d595;
-    text-decoration: none;
+  color: #5e552b;
+  background-color: #e3d595;
+  text-decoration: none;
 }
 #header a:active, #header a:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
-#content {
-    width: 100%; /* Must specify a width or IE goes crazy wrong! */
-    position: relative;
-    margin: 0 auto;
-    max-width: 60em;
+#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;
 }
 
-/* Can't put the margin in #content because of above IE craziness */
+/* Can't put the margin in #mysociety because of above IE craziness */
 #wrapper {
-    margin: 2em;
+  margin: 2em;
+}
+
+.v {
+  display: none;
 }
 
 #navigation {
-    position: absolute;
-    top: 1em;
-    right: 1em;
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
+  position: absolute;
+  top: 1em;
+  right: 1em;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
 }
 #navigation li {
-    display: inline;
-    padding: 0;
-    margin: 0;
+  display: inline;
+  padding: 0;
+  margin: 0;
 }
-
 #navigation a {
-    display: -moz-inline-box;
-    display: inline-block;
-    padding: 0.4em 1em;
+  display: -moz-inline-box;
+  display: inline-block;
+  padding: 0.4em 1em;
 }
 #navigation a:link, #navigation a:visited {
-    color: #5e552b;
+  color: #5e552b;
 }
 #navigation a:hover, #navigation a:active {
-    background-color: #5e552b;
-    color: #e3d595;
+  background-color: #5e552b;
+  color: #e3d595;
 }
 
 #nav_new a {
-    background-image: url("/i/new.png");
-    background-repeat: no-repeat;
-    background-position: 100% 0;
+  background-image: url("/i/new.png");
+  background-repeat: no-repeat;
+  background-position: 100% 0;
 }
 
 #logo {
-    border: none;
-    position: absolute;
-    top: 3.3em;
-    right: 10px;
+  border: none;
+  position: absolute;
+  top: 3.3em;
+  right: 10px;
 }
 
 #footer {
-    clear: both;
-    text-align: right;
-    font-size: 83%;
-    border-top: solid 1px #5e552b;
-    display: table;
-    margin: 2em 0 1em auto;
-    padding: 2px 4px;
-}
-
-#postcodeForm {
-    background-color: #e3d595;
+  clear: both;
+  text-align: right;
+  font-size: 83%;
+  border-top: solid 1px #5e552b;
+  display: table;
+  margin: 2em 0 1em auto;
+  padding: 2px 4px;
 }
-
-#front_stats div {
-    background-color: #e3d595;
-}
-
diff --git a/web/css/main.scss b/web/css/main.scss
new file mode 100644
index 000000000..bcebc2bd0
--- /dev/null
+++ b/web/css/main.scss
@@ -0,0 +1,14 @@
+// Generics
+
+$header_back: #e3d595;
+$header_back_lighter: #f3e5a5;
+$header_colour: #5e552b;
+$header_darker: #4e451b;
+
+a {
+    &:link { color: #0000ff; }
+    &:visited { color: #000099; }
+    &:hover, &:active { color: #ff0000; }
+}
+
+@import "_main";