2 files changed, 113 insertions, 8 deletions

diff --git a/web/css/_main.scss b/web/css/_main.scss
index d74d70ceb..383e099a1 100644
--- a/web/css/_main.scss
+++ b/web/css/_main.scss
@@ -29,7 +29,7 @@ h2 {
 
 select, input, textarea {
     font-size: 99%;
-    max-width: 99%;
+    max-width: 95%;
 }
 
 #mysociety {
@@ -214,6 +214,12 @@ select, input, textarea {
     #header {
         font-size: 150%;
     }
+    h1 {
+        font-size: 140%;
+    }
+    h2 {
+        font-size: 130%;
+    }
     #navigation {
         position: static;
         border-top: solid 2px $header_colour;
diff --git a/web/css/core.scss b/web/css/core.scss
index 6186f8965..895a8826b 100644
--- a/web/css/core.scss
+++ b/web/css/core.scss
@@ -88,6 +88,7 @@ $map_width: 500px;
         label {
             float: none;
             padding-right: 0;
+            margin-top: 0;
         }
 
         #submit {
@@ -163,7 +164,7 @@ $map_width: 500px;
 
     fieldset, .fieldset {
         border: none;
-        padding: 0.5em;
+        margin: 0.5em;
         div {
             margin-top: 2px;
             clear: left;
@@ -186,8 +187,11 @@ $map_width: 500px;
         cursor: hand;
     }
 
+    /* Lots of defaults to override small screen CSS */
     #questionnaire label, #alerts label {
         float: none;
+        margin-top: 0;
+        display: inline;
     }
 
     .confirmed {
@@ -241,12 +245,6 @@ $map_width: 500px;
 
     /* Drag is only present in noscript form */
     #drag {
-        position: absolute;
-        width: $map_width;
-        height: $map_width;
-        right: 0;
-        top: 0;
-
         input, img {
             position: absolute;
             border: none;
@@ -538,6 +536,7 @@ $map_width: 500px;
 .olControlAttribution {
     bottom: 3px !important;
     left: 3px;
+    color: #222222;
 }
 .olControlPermalink {
     bottom: 3px !important;
@@ -621,6 +620,106 @@ $map_width: 500px;
             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;
+        }
     }
 }