Merge branch 'master' into reportemptyhomes

Conflicts:
	web/css/cobrands/emptyhomes/emptyhomes.css

1 files changed, 507 insertions, 0 deletions

diff --git a/web/css/core.scss b/web/css/core.scss
new file mode 100644
index 000000000..ed8667983
--- /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; }
+    }
+}
+