Use SCSS to generate CSS - no change to actual CSS at this point.

11 files changed, 1172 insertions, 434 deletions

diff --git a/.gitignore b/.gitignore
index 075ec4000..cce185f08 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 /cities_bin
 /private_locale
 ._*
+.sass-cache
 
diff --git a/bin/make_css b/bin/make_css
new file mode 100755
index 000000000..7e01da267
--- /dev/null
+++ b/bin/make_css
@@ -0,0 +1,18 @@
+#!/bin/bash
+#
+# make_css:
+# Generate CSS files from SCSS files.
+# Curerntly the CSS files are also in version control, though I guess
+# in future they don't need to be, and compressed style could then be used.
+#
+# Copyright (c) 2011 UK Citizens Online Democracy. All rights reserved.
+# Email: matthew@mysociety.org. WWW: http://www.mysociety.org
+#
+# $Id: send-reports,v 1.79 2010-01-06 16:50:26 louise Exp $
+
+DIRECTORY=$(cd `dirname $0` && pwd)
+
+for file in `find $DIRECTORY/../ -name "*.scss" ! -name "_*"`; do
+    sass --style expanded $file ${file/scss/css}
+done
+
diff --git a/conf/packages b/conf/packages
index a37518611..b8324300d 100644
--- a/conf/packages
+++ b/conf/packages
@@ -28,3 +28,4 @@ libmath-bigint-gmp-perl
 libtext-template-perl
 gettext
 libtest-exception-perl
+libhaml-ruby
diff --git a/templates/website/cobrands/fiksgatami/header b/templates/website/cobrands/fiksgatami/header
index 255636918..41ccabff9 100644
--- a/templates/website/cobrands/fiksgatami/header
+++ b/templates/website/cobrands/fiksgatami/header
@@ -10,7 +10,6 @@
         <title>{{ $title }}{{ $site_title }}</title>
         <style type="text/css">
             @import url("/css/core.css");
-            @import url("/css/main.css");
             @import url("/cobrands/fiksgatami/css.css");
         </style>
         {{ $rss }}
diff --git a/web/cobrands/fiksgatami/css.css b/web/cobrands/fiksgatami/css.css
index 64c369836..f9fd0caae 100644
--- a/web/cobrands/fiksgatami/css.css
+++ b/web/cobrands/fiksgatami/css.css
@@ -1,72 +1,154 @@
 #front_stats div {
-    width: 6.5em;
+  width: 6.5em;
 }
 
 label {
-    width: 6em;
+  width: 6em;
 }
 
 #fieldset div.checkbox, #problem_submit {
-    padding-left: 6.5em;
+  padding-left: 6.5em;
 }
 
 body {
-    font-family: Helmet, Freesans, "Helvetica Neue", Arial, sans-serif;
+  font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0;
 }
 
-a:link {
-    color: #215d93;
+h1 {
+  margin: 0;
+  font-size: 175%;
 }
-a:visited {
-    color: #518dc3;
+
+h2 {
+  font-size: 140%;
 }
-a:hover, a:active {
-    color: #cc0000;
+
+select, input, textarea {
+  font-size: 99%;
+}
+
+a.unsuitable-report {
+  font-size: small;
 }
 
 blockquote {
-    border-left: solid 4px #1a4f7f;
+  border-left: solid 4px #1a4f7f;
 }
 
 .a {
-    color: #000000;
-    background-color: #a9cff1;
+  color: #000000;
+  background-color: #a9cff1;
+}
+
+#postcodeForm {
+  background-color: #99bfe1;
+}
+
+#front_stats div {
+  background-color: #99bfe1;
 }
 
 #header {
-    padding: 0.1em 0.5em 0.15em;
-    border-bottom: solid 2px #1a4f7f;
-    background-color: #99bfe1;
-    color: #1a4f7f;
+  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;
+  color: #0a3f6f;
+  background-color: #99bfe1;
 }
 
-#header a:link, #header a:visited {
-    color: #1a4f7f;
-    background-color: #99bfe1;
+#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;
+}
+
+#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;
+  color: #1a4f7f;
 }
 #navigation a:hover, #navigation a:active {
-    background-color: #1a4f7f;
-    color: #99bfe1;
+  background-color: #1a4f7f;
+  color: #99bfe1;
+}
+
+#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 {
-    border-top: solid 1px #1a4f7f;
+  clear: both;
+  text-align: right;
+  font-size: 83%;
+  border-top: solid 1px #1a4f7f;
+  display: table;
+  margin: 2em 0 1em auto;
+  padding: 2px 4px;
 }
 
-#postcodeForm {
-    background-color: #99bfe1;
+body {
+  font-family: Helmet, Freesans, "Helvetica Neue", Arial, sans-serif;
 }
 
-#front_stats div {
-    background-color: #99bfe1;
+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/fiksgatami/css.scss b/web/cobrands/fiksgatami/css.scss
new file mode 100644
index 000000000..58c45206f
--- /dev/null
+++ b/web/cobrands/fiksgatami/css.scss
@@ -0,0 +1,41 @@
+$header_back: #99bfe1;
+$header_back_lighter: #a9cff1;
+$header_colour: #1a4f7f;
+$header_darker: #0a3f6f;
+
+// Overrides of core.css
+
+// #mysociety {
+
+    #front_stats div {
+        width: 6.5em;
+    }
+
+    label {
+        width: 6em;
+    }
+
+    #fieldset div.checkbox, #problem_submit {
+        padding-left: 6.5em;
+    }
+
+// }
+
+@import "../../css/_main";
+
+// Overrides of main.css
+
+body {
+    font-family: Helmet, Freesans, "Helvetica Neue", Arial, sans-serif;
+}
+
+a {
+    &:link { color: #215d93; }
+    &:visited { color: #518dc3; }
+    &:hover, &:active { color: #cc0000; }
+}
+
+#header {
+    padding: 0.1em 0.5em 0.15em;
+}
+
diff --git a/web/css/_main.scss b/web/css/_main.scss
new file mode 100644
index 000000000..b2f78baaf
--- /dev/null
+++ b/web/css/_main.scss
@@ -0,0 +1,135 @@
+// 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;
+}
+
+#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/core.css b/web/css/core.css
index 97a3fb786..4d33ecb00 100644
--- a/web/css/core.css
+++ b/web/css/core.css
@@ -1,492 +1,444 @@
-/* Generics */
-
 blockquote {
-    border-left: solid 4px #666666;
-    padding-left: 0.5em;
+  border-left: solid 4px #666666;
+  padding-left: 0.5em;
 }
 blockquote h2, blockquote p {
-    margin: 0;
-}
-
-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;
+  margin: 0;
 }
 
 dt {
-    font-weight: bold;
-    margin-top: 0.5em;
+  font-weight: bold;
+  margin-top: 0.5em;
 }
 
-.v { display: none; }
+.v {
+  display: none;
+}
 
 .gone {
-    color: #666666;
-    background-color: #cccccc;
+  color: #666666;
+  background-color: #cccccc;
 }
 
 p.error {
-    text-align: center;
-    color: #cc0000;
-    font-size: larger;
+  text-align: center;
+  color: #cc0000;
+  font-size: larger;
 }
 
 ul {
-    padding: 0 0 0 1.5em;
-    margin: 0;
+  padding: 0 0 0 1.5em;
+  margin: 0;
 }
 
 ul.error {
-    color: #cc0000;
-    background-color: #ffeeee;
-    padding-right: 4px;
-    text-align: left;
-    font-size: larger;
+  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;
+  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;
+  clear: both;
 }
 
-/* Site-wide layout */
-
 #advert_thin {
-    width: 50%;
-    margin: 1em auto;
-    border-top: dotted 1px #999999;
+  width: 50%;
+  margin: 1em auto;
+  border-top: dotted 1px #999999;
 }
+
 #advert_hfymp {
-    border-top: dotted 1px #999999;
-    text-align: center;
+  border-top: dotted 1px #999999;
+  text-align: center;
 }
 
-/* Front page */
-
 p#expl {
-    text-align: center;
-    font-size: 150%;
-    margin: 0 2em;
+  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;
+  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;
+  float: none;
+  padding-right: 0;
 }
-
 #postcodeForm #submit {
-    font-size: 83%;
+  font-size: 83%;
 }
 
 #front_intro {
-    float: left;
-    width: 48%;
+  float: left;
+  width: 48%;
 }
-
 #front_intro p {
-    clear: both;
-    margin-top: 0;
+  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;
+  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;
+  font-size: 150%;
+  display: block;
 }
 
 #front_recent {
-    float: right;
-    width: 48%;
-    margin-bottom: 1em;
+  float: right;
+  width: 48%;
+  margin-bottom: 1em;
 }
+
 #front_recent img, #alert_recent img {
-    margin-right: 0.25em;
-    margin-bottom: 0.25em;
+  margin-right: 0.25em;
+  margin-bottom: 0.25em;
 }
+
 #front_recent > h2:first-child, #front_intro > h2:first-child {
-    margin-top: 0;
+  margin-top: 0;
+}
+
+form {
+  margin: 0;
 }
 
-/* Forms */
+label {
+  float: left;
+  text-align: right;
+  padding-right: 0.5em;
+  width: 5em;
+}
 
+fieldset, #fieldset {
+  border: none;
+  padding: 0.5em;
+}
 fieldset div, #fieldset div {
-    margin-top: 2px;
-    clear: left;
+  margin-top: 2px;
+  clear: left;
 }
+
+legend {
+  display: none;
+}
+
 #fieldset div.checkbox, #problem_submit {
-    padding-left: 5.5em;
+  padding-left: 5.5em;
 }
+
 #fieldset div.checkbox label, label.n {
-    float: none;
-    text-align: left;
-    padding-right: 0;
-    width: auto;
-    cursor: pointer;
-    cursor: hand;
+  float: none;
+  text-align: left;
+  padding-right: 0;
+  width: auto;
+  cursor: pointer;
+  cursor: hand;
 }
 
 #questionnaire label, #alerts label {
-    float: none;
+  float: none;
 }
 
 .confirmed {
-    background-color: #ccffcc;
-    border: solid 2px #009900;
-    padding: 5px;
-    text-align: center;
+  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;
+  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;
+  float: right;
+  width: 502px;
+  position: relative;
+  padding-left: 20px;
+  background-color: #ffffff;
 }
 
 p#copyright {
-    float: right;
-    margin: 0 0 1em 0;
-    font-size: 78%;
+  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;
+  border: solid 1px #000000;
+  width: 500px;
+  height: 500px;
+  overflow: hidden;
+  position: relative;
+  background-color: #f1f1f1;
 }
 
 #drag {
-    position: absolute;
-    width: 500px;
-    height: 500px;
-    right: 0;
-    top: 0;
-}
-
-form#mapForm #map {
-    cursor: pointer;
+  position: absolute;
+  width: 500px;
+  height: 500px;
+  right: 0;
+  top: 0;
 }
-
-form#mapForm .olTileImage {
-    cursor: crosshair;
+#drag input, #drag img {
+  position: absolute;
+  border: none;
 }
-
 #drag input {
-    cursor: crosshair;
-    background-color: #cccccc;
+  cursor: crosshair;
+  background-color: #cccccc;
 }
 #drag img {
-    cursor: move;
-}
-#drag input, #drag img {
-    position: absolute;
-    border: none;
+  cursor: move;
 }
 #drag img.pin {
-    z-index: 100;
-    background-color: inherit;
+  z-index: 100;
+  background-color: inherit;
 }
 #drag a img.pin {
-    cursor: pointer;
-    cursor: hand;
+  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;
+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;
+}
 #compass img {
-    border: 0;
+  border: 0;
 }
 
 #text_map {
-    margin-top: 0.5em;
-    margin-bottom: 1em;
-    font-size: 110%;
+  margin-top: 0.5em;
+  margin-bottom: 1em;
+  font-size: 110%;
 }
+
 #text_no_map {
-    margin-top: 0;
-    /* background-color: #ffeecc;
-    padding: 4px; */
+  margin-top: 0;
 }
 
 #sub_map_links {
-    float: right;
-    clear: right;
-    margin-top: 0;
+  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;
+  margin: 0 530px 1em 0;
+  padding: 5px;
+  text-align: center;
+  position: relative;
+  background-color: #ccffcc;
+  border: solid 2px #009900;
 }
+
 #unknown {
-    background-color: #ffcccc;
-    border: solid 2px #990000;
+  margin: 0 530px 1em 0;
+  padding: 5px;
+  text-align: center;
+  position: relative;
+  background-color: #ffcccc;
+  border: solid 2px #990000;
 }
 
 #updates div {
-    padding: 0 0 0.5em;
-    margin: 0 0 0.25em;
-    border-bottom: dotted 1px #5e552b;
+  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 div .problem-update, #updates div .update-text {
+  padding: 0;
+  margin: 0;
+  border-bottom: 0;
 }
 #updates p {
-    margin: 0;
+  margin: 0;
 }
 
 #nearby_lists h2 {
-    margin-top: 0.5em;
-    margin-bottom: 0;
+  margin-top: 0.5em;
+  margin-bottom: 0;
 }
+
 #alert_links {
-    float: right;
+  float: right;
 }
+
 #alert_links_area {
-    background-color: #ffeecc;
-    border: solid 1px #ff9900;
-    border-width: 1px 0;
-    padding: 3px 10px;
-    /* padding: 0 3px; */
-    margin: 0;
+  background-color: #ffeecc;
+  border: solid 1px #ff9900;
+  border-width: 1px 0;
+  padding: 3px 10px;
+  margin: 0;
 }
+
 #rss_alert {
-    text-decoration: none;
+  text-decoration: none;
 }
 #rss_alert span {
-    text-decoration: underline;
-}
-#email_alert {
+  text-decoration: underline;
 }
+
 #email_alert_box {
-    display:none;
-    position: absolute;
-    padding: 3px;
-    font-size:83%;
-    border:solid 1px #7399C3;
-    background-color: #eeeeff;
-    color: #000000;
+  display: none;
+  position: absolute;
+  padding: 3px;
+  font-size: 83%;
+  border: solid 1px #7399C3;
+  background-color: #eeeeff;
+  color: #000000;
 }
+
 #email_alert_box p {
-    margin: 0;
+  margin: 0;
 }
 
 .council_sent_info {
-   font-size: smaller;
+  font-size: smaller;
 }
 
-/* RSS feed XSL */
-
 #rss_items {
-    width:62%;
-    float:left;
+  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;
+  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;
+  padding: 10px;
+  border: 1px solid #999999;
 }
 
-/* Alerts */
 #rss_feed {
-    list-style-type: none;
-    margin-bottom: 2em;
+  list-style-type: none;
+  margin-bottom: 2em;
 }
+
 #rss_feed li {
-    margin-bottom: 1em;
+  margin-bottom: 1em;
 }
+
 #alert_or {
-    font-style: italic;
-    font-size: 125%;
-    margin: 0;
+  font-style: italic;
+  font-size: 125%;
+  margin: 0;
 }
+
 #rss_list {
-    float: left;
-    width: 47%;
+  float: left;
+  width: 47%;
 }
+
 #rss_list ul {
-    list-style-type: none;
+  list-style-type: none;
 }
+
 #rss_buttons {
-    float: right;
-    width: 35%;
-    text-align: center;
-    margin-bottom: 2em;
+  float: right;
+  width: 35%;
+  text-align: center;
+  margin-bottom: 2em;
 }
+
 #rss_local {
-    margin-left: 1.5em;
-    margin-bottom: 0;
+  margin-left: 1.5em;
+  margin-bottom: 0;
 }
+
 #rss_local_alt {
-    margin: 0 0 2em 4em;
+  margin: 0 0 2em 4em;
 }
 
 #alert_photos {
-    text-align: center;
-    float: right;
-    width: 150px;
-    margin-left: 0.5em;
+  text-align: center;
+  float: right;
+  width: 150px;
+  margin-left: 0.5em;
 }
+
 #alert_photos h2 {
-    font-size: 100%;
+  font-size: 100%;
 }
+
 #alert_photos img {
-    margin-bottom: 0.25em;
+  margin-bottom: 0.25em;
 }
 
-/* Report page */
-
 #col_problems, #col_fixed {
-    float: left;
-    width: 48%;
-    margin-right: 1em;
+  float: left;
+  width: 48%;
+  margin-right: 1em;
 }
 
-/* Contact page */
 .contact-details {
-    font-size: 80%;
-    margin-top: 2em;
+  font-size: 80%;
+  margin-top: 2em;
 }
 
-/* Printing */
 @media print {
-    #map_box { float: none; margin: 0 auto; }
-    #mysociety { 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;
-}
+  #map_box {
+    float: none;
+    margin: 0 auto;
+  }
 
+  #mysociety {
+    max-width: none;
+  }
 
+  #side {
+    margin-right: 0;
+  }
+}
diff --git a/web/css/core.scss b/web/css/core.scss
new file mode 100644
index 000000000..b92882aba
--- /dev/null
+++ b/web/css/core.scss
@@ -0,0 +1,507 @@
+$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;
+    }
+
+    .v {
+        display: none;
+    }
+
+    .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/main.css b/web/css/main.css
index 048b55e97..d135ecb9a 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%;
-}
-
-a:link {
-    color: #0000ff;
-}
-a:visited {
-    color: #000099;
-}
-a:hover, a:active {
-    color: #ff0000;
+  font-size: 99%;
 }
 
 a.unsuitable-report {
-    font-size: small;
+  font-size: small;
 }
 
 blockquote {
-    border-left: solid 4px #5e552b;
+  border-left: solid 4px #5e552b;
 }
 
 .a {
-    color: #000000;
-    background-color: #f3e5a5;
+  color: #000000;
+  background-color: #f3e5a5;
 }
 
-/* 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;
+#postcodeForm {
+  background-color: #e3d595;
 }
 
-#my {
-    color: #4e451b;
-    background-color: #e3d595;
-}
-#beta {
-    color: #6e653b;
-    background-color: #e3d595;
-    font-size: 50%;
-    font-style: italic;
+#front_stats div {
+  background-color: #e3d595;
 }
 
+#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;
+  color: #5e552b;
+  background-color: #e3d595;
+  text-decoration: none;
 }
 #header a:active, #header a:hover {
-    text-decoration: underline;
+  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;
+  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;
+  margin: 2em;
 }
 
 #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";