Adjust styles for panels

This makes the assumption that panels are often stacked, rather than
inline.

A panel which appears between a set of radio buttons must have a margin
on the bottom of it, this is 15px (set for all panels).

Add a top margin, so that there is a gap between a form control and the
panel (but so that the two appear associated).

Add extra spacing above a panel if it is the first panel in a group,
the last panel in a group or if it is inline.

Remove any bottom margin or padding, as any content inside the panel
should sit flush with the bottom of the panel.

public/sass/elements/_panels.scss

@@ -2,6 +2,7 @@
 // ==========================================================================
 
 .panel {
+  @include box-sizing(border-box);
   @extend %contain-floats;
   clear: both;
   border-left-style: solid;
@@ -30,7 +31,31 @@
 }
 
 // Panels within form groups
-// Remove the bottom padding as .form-group sets a bottom margin
+// By default, panels have 15px bottom margin
 .form-group .panel-border-narrow {
+  float: left;
+  width: 100%;
+  // Remove the bottom padding as .form-group sets a bottom margin
   padding-bottom: 0;
+  // Don't remove the bottom margin for all panels, assume they are often within stacked groups
 }
+
+// Note: This is incredibly fragile, and needs rebuilding.
+
+// The first panel in a group
+.form-group .panel-border-narrow:first-child {
+  margin-top: 10px;
+}
+
+// The last panel in a group
+.form-group .panel-border-narrow:last-child {
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+
+// For inline panels
+.inline .form-group .panel-border-narrow {
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+