$map_width: 500px;

// 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.dev-site-notice, 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;
        text-align: left;
    }

    div.label-valid {
        background-color: white;
    }

    div.label-valid-hidden {
        display: none;
        visibility: hidden;
        height: 0px;
        width: 0px;
        margin: 0px;
        padding: 0px;
    }

    div.form-field {
        clear: both;
    }

    // Site-wide layout

    #advert_thin {
        width: 50%;
        margin: 1em auto;
        text-align: center;
        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;
    }

    p#expl small {
        display: block;
    }

    #postcodeForm {
        display: table; /* Full width in IE6 and IE7 */
        text-align: center;
        font-size: 150%;
        margin: 1em auto;
        padding: 1em;
        -moz-border-radius: 1em;
        -webkit-border-radius: 1em;
        border-radius: 1em;
        -moz-box-shadow: 2px 2px 4px #999;
        -webkit-box-shadow: 2px 2px 4px #999;
        box-shadow: 2px 2px 4px #999;

        label {
            float: none;
            padding-right: 0;
            margin-top: 0;
        }

        #sub {
            font-size: 83%;
        }
    }

    #geolocate_link {
        display: block;
        border: none;
        font-size: 70%;
        margin: 2px 0 0 0;
        text-align: right;
    }

    #front_intro {
        float: left;
        width: 48%;

        p {
            clear: both;
            margin-top: 0;
        }
    }

    #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;
        display: table-cell;

        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;
    }

    #front_photos {
        text-align: center;
    }

    // Forms

    form {
        margin: 0;
    }

    label {
        float: left;
        text-align: right;
        padding-right: 0.5em;
        width: 6em;
    }

    fieldset, .fieldset {
        border: none;
        margin: 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;
    }

    /* Lots of defaults to override small screen CSS */
    #questionnaire label, #alerts label {
        float: none;
        margin-top: 0;
        display: inline;
    }

    .confirmed {
        background-color: #ccffcc;
        border: solid 2px #009900;
        padding: 5px;
        text-align: center;
    }

    #form_sign_in_yes {
        float: left;
        width: 47%;
        padding-right: 1%;
        border-right: solid 1px #999999;
        margin-bottom: 1em;
    }

    #form_sign_in_no, .fieldset #form_sign_in_no {
        float: right;
        width: 47%;
        padding-left: 1%;
        clear: none;
        margin-bottom: 1em;
    }

    #category_meta {
        margin-bottom: 30px;
    }

    #category_meta label {
        width: 10em;
    }

    // Map

    #map_box {
        float: right;
        width: $map_width + 2px;
        position: relative;
        padding-left: 20px;
        background-color: #ffffff;
    }

    p#copyright {
        float: right;
        text-align: right;
        margin: 0 0 1em 0;
        font-size: 78%;
    }

    #map {
        border: solid 1px #666666;
        width: $map_width; // Twice a tile width
        height: $map_width;
        overflow: hidden;
        position: relative;
        background-color: #f1f1f1;
    }

    /* Drag is only present in noscript form */
    #drag {
        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;
    }

    .banner {
        margin: 0 $map_width + 30px 1em 0;
        padding: 5px;
        text-align: center;
        position: relative;
    }

    #text_map {
        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;
    }
    #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;
    }

    #text_no_map {
        margin-top: 0;
        // background-color: #ffeecc;
        // padding: 4px;
    }

    #sub_map_links {
        float: right;
        clear: right;
        margin-top: 0;
    }

    // Problem pages

    #fixed {
        background-color: #ccffcc;
        border: solid 2px #009900;
    }

    #unknown {
        background-color: #ffcccc;
        border: solid 2px #990000;
    }

    #closed {
        background-color: #ccccff;
        border: solid 2px #000099;
    }

    #progress {
        background-color: #ffffcc;
        border: solid 2px #999900;
    }

    #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: 1em;
        margin-bottom: 0;
    }

    #nearby_lists li small {
        color: #666666;
    }

    #alert_links {
        float: right;
    }
    #alert_links_area {
        padding-left: 0.5em;
        margin: 0;
        color: #666;
        font-size: smaller;
    }
    #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;
    }

    .update-img {
        text-align: center;
    }
    .update-img span {
        display: none;
    }
    #updates .update-img {
        text-align: left;
    }

    // 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;
    // }

}

.olControlAttribution {
    bottom: 3px !important;
    left: 3px;
    color: #222222;
}
.olControlPermalink {
    bottom: 3px !important;
    right: 3px;
}

.ie6, .ie7 {
    #mysociety {
        #front_stats div {
            float: left;
            margin: 0 1em 1em;
        }
    }
}

// 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; }
    }
}

@media all and (max-width: 50em) {
    #mysociety {
        p#expl {
            font-size: 120%;
        }

        p#expl small {
            display: inline;
        }

        #postcodeForm {
            font-size: 100%;
            span {
                display: block;
                font-size: 150%;
            }
            #sub {
                font-size: 100%;
            }
        }

        #geolocate_link {
            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;
        }

        fieldset, .fieldset {
            margin: 1em;
        }

        label {
            margin-top: 1em;
            display: block;
            float: none;
            text-align: left;
            padding-right: 0;
            width: auto;
        }
        .fieldset div.checkbox, #problem_submit {
            padding-left: 0;
        }
        .fieldset div.checkbox label, label.n {
            display: inline;
        }

        #rss_list {
            float: none;
            width: auto;
        }
        #rss_buttons {
            float: none;
            width: auto;
            text-align: left;
        }
    }
}

@media all and (max-width: 750px) {
    $map_width: 365px;
    #mysociety {
        #map_box {
            padding-left: 10px;
            width: $map_width + 2px;
        }
        #map {
            width: $map_width;
            height: $map_width;
        }
        .banner {
            margin-right: $map_width + 20px;
        }
        #text_map_arrow {
            right: -18px;
            border-width: 16px 9px;
        }
    }
}

@media all and (max-width: 580px) {
    $map_width: 235px;
    #mysociety {
        #map_box {
            width: $map_width + 2px;
        }
        #map {
            width: $map_width;
            height: $map_width;
        }
        .banner {
            margin-right: $map_width + 20px;
        }
    }
}

@media all and (max-width: 320px) {
    #mysociety {
        #map_box {
            padding-left: 0;
            float: none;
            width: 100%;
        }
        #map {
            width: 99%;
        }

        .banner {
            margin-right: 0;
            clear: both;
            margin-top: 1em;
        }
        #text_map {
            padding: 0.25em 0.5em;
            font-size: 100%;
            -moz-border-radius-topleft: 0;
            -moz-border-radius-bottomleft: 1em;
            -moz-border-radius-bottomright: 1em;
            -webkit-border-top-left-radius: 0;
            -webkit-border-bottom-left-radius: 1em;
            -webkit-border-bottom-right-radius: 1em;
            border-top-left-radius: 0;
            border-bottom-left-radius: 1em;
            border-bottom-right-radius: 1em;
        }
        #text_map_arrow {
            display: none;
        }
    }
}