Removed top margins from headings in fieldsets, and added classes to …

…put heading top margins on fieldsets, to work around fieldsets preventing child margins from collapsing outside of the fieldset.

app/views/snippets/form_error_radio_h1_legend.html

@@ -17,7 +17,7 @@ <h2 class="heading-medium error-summary-heading" id="error-summary-heading">
 {% endif %}
 
 <div class="form-group {% if error %} form-group-error{% endif %}">
-  <fieldset>
+  <fieldset class="with-heading-large">
 
     <legend {% if error %} id="example-personal-details"{% endif %}>
       <h1 class="heading-large">

assets/sass/elements/_forms.scss

@@ -18,11 +18,51 @@
 fieldset {
   @extend %contain-floats;
   width: 100%;
+
+  &.with-heading-xlarge {
+    margin-top: em(15, 19);
+
+    @include media(tablet) {
+      margin-top: em(30, 19);
+    }
+  }
+
+  &.with-heading-large {
+    margin-top: em(25, 19);
+
+    @include media(tablet) {
+      margin-top: em(45, 19);
+    }
+  }
+
+  &.with-heading-medium {
+    margin-top: em(25, 20);
+
+    @include media(tablet) {
+      margin-top: em(45, 24);
+    }
+  }
+
+  &.with-heading-small {
+    margin-top: em(10, 16);
+
+    @include media(tablet) {
+      margin-top: em(20, 19);
+    }
+  }
 }
 
 // Hack to let legends or elements within legends have margins in webkit browsers
 legend {
   overflow: hidden;
+
+  // Remove top margins from headings in legends, because fieldsets block margin collapsing. Use the .with-heading-* classes for fieldsets defined above to replace these removed margins.
+  .heading-xlarge,
+  .heading-large,
+  .heading-medium,
+  .heading-small {
+    margin-top: 0;
+  }
 }
 
 // Fix left hand gap in IE7 and below