move those divs out of the paragraphs!

added bottom margin to info boxes to fix layout on body form (hint div floating beneath it)

2 files changed, 103 insertions, 102 deletions

diff --git a/templates/web/default/admin/body-form.html b/templates/web/default/admin/body-form.html
index 6a3018a84..df0c952df 100644
--- a/templates/web/default/admin/body-form.html
+++ b/templates/web/default/admin/body-form.html
@@ -6,28 +6,28 @@
           categories of problem) to each body."
         ) %]
     </div>
+    <div class="admin-hint">
+      <p>
+        [% loc(
+          "The body's <strong>name</strong> identifies the body (for example, <em>Borsetshire District Council</em>)
+          and may be displayed publically."
+        ) %]
+      </p>
+    </div>
     <p>
-        <div class="admin-hint">
-          <p>
-            [% loc(
-              "The body's <strong>name</strong> identifies the body (for example, <em>Borsetshire District Council</em>)
-              and may be displayed publically."
-            ) %]
-          </p>
-        </div>
         <label for="name">[% loc('Name') %]</label>
         <input type="text" name="name" id="name" value="[% body.name %]" size="50">
     </p>
 
+    <div class="admin-hint">
+      <p>
+        [% loc(
+          "Identify a <strong>parent</strong> if this body is itself part of another body.
+          For basic installations, you don't need to join bodies in this way."
+        ) %]
+      </p>
+    </div>
     <p>
-        <div class="admin-hint">
-          <p>
-            [% loc(
-              "Identify a <strong>parent</strong> if this body is itself part of another body.
-              For basic installations, you don't need to join bodies in this way."
-            ) %]
-          </p>
-        </div>
         <label for="parent">[% loc('Parent') %]</label>
         <select name="parent" id="parent">
             <option value=""> -- [% loc('Select a body') %] -- </option>
@@ -49,15 +49,15 @@
       [% END %]
     [% END %]
 
+    <div class="admin-hint">
+      <p>
+        [% loc(
+          "This body will only be sent reports for problems that are located in the <strong>area covered</strong>.
+          A body will not receive any reports unless it covers at least one area."
+        ) %]
+      </p>
+    </div>
     <p>
-        <div class="admin-hint">
-          <p>
-            [% loc(
-              "This body will only be sent reports for problems that are located in the <strong>area covered</strong>.
-              A body will not receive any reports unless it covers at least one area."
-            ) %]
-          </p>
-        </div>
         <label for="area_ids">[% loc('Area covered') %]</label>
         <select name="area_ids" id="area_ids" multiple>
             <option value=""> -- [% loc('Select an area') %] -- </option>
@@ -68,15 +68,15 @@
         </select>
     </p>
 
+    <div class="admin-hint">
+      <p>
+        [% loc(
+          "The <strong>send method</strong> determines how problem reports will be sent to the body.
+           If you leave this blank, <strong>send method defaults to email</strong>."
+        ) %]
+      </p>
+    </div>
     <p>
-        <div class="admin-hint">
-          <p>
-            [% loc(
-              "The <strong>send method</strong> determines how problem reports will be sent to the body.
-               If you leave this blank, <strong>send method defaults to email</strong>."
-            ) %]
-          </p>
-        </div>
         <label for="send_method">Send Method</label>
         <select name="send_method" id="send_method">
             <option value=""> -- Select a method -- </option>
@@ -99,111 +99,111 @@
         </p>
       [% END %]
 
+      <div class="admin-hint">
+        <p>
+          [% loc(
+            "The <strong>endpoint</strong> is the URL of the service that FixMyStreet will connect to 
+            when sending reports to this body."
+          ) %]
+        </p>
+      </div>
     <p>
-        <div class="admin-hint">
-          <p>
-            [% loc(
-              "The <strong>endpoint</strong> is the URL of the service that FixMyStreet will connect to 
-              when sending reports to this body."
-            ) %]
-          </p>
-        </div>
         <label for="endpoint">[% loc('Endpoint') %]</label>
         <input type="text" name="endpoint" id="endpoint" value="[% body.endpoint %]" size="50">
     </p>
 
+    <div class="admin-hint">
+      <p>
+        [% loc(
+          "The <strong>jurisdiction</strong> is only needed if the endpoint is serving more
+          than one. If the body is running its own endpoint, you can usually leave this blank."
+        ) %]
+      </p>
+    </div>
     <p>
-        <div class="admin-hint">
-          <p>
-            [% loc(
-              "The <strong>jurisdiction</strong> is only needed if the endpoint is serving more
-              than one. If the body is running its own endpoint, you can usually leave this blank."
-            ) %]
-          </p>
-        </div>
         <label for="jurisdiction">Open311 Jurisdiction</label>
         <input type="text" name="jurisdiction" id="jurisdiction" value="[% body.jurisdiction %]" size="50">
     </p>
 
+    <div class="admin-hint">
+      <p>
+        [% loc(
+          "Some endpoints require an <strong>API key</strong> to indicate that the reports are being
+          sent from your FixMyStreet installation."
+        ) %]
+      </p>
+    </div>
     <p>
-        <div class="admin-hint">
-          <p>
-            [% loc(
-              "Some endpoints require an <strong>API key</strong> to indicate that the reports are being
-              sent from your FixMyStreet installation."
-            ) %]
-          </p>
-        </div>
         <label for="api_key">Open311 API Key</label>
         <input type="text" name="api_key" id="api_key" value="[% body.api_key %]" size="25">
     </p>
 
+    <div class="admin-hint">
+      <p>
+        [% loc(
+          "Enable <strong>Open311 update-sending</strong> if the endpoint will send and receive
+          updates to existing reports. If you're not sure, it probably does not, so leave this unchecked.
+          For more information, see 
+          <a href='http://www.mysociety.org/2013/02/20/open311-extended/'>this article</a>."
+        ) %]
+      </p>
+    </div>
     <p>
-        <div class="admin-hint">
-          <p>
-            [% loc(
-              "Enable <strong>Open311 update-sending</strong> if the endpoint will send and receive
-              updates to existing reports. If you're not sure, it probably does not, so leave this unchecked.
-              For more information, see 
-              <a href='http://www.mysociety.org/2013/02/20/open311-extended/'>this article</a>."
-            ) %]
-          </p>
-        </div>
         <input type="checkbox" id="send_comments" name="send_comments"[% ' checked' IF body.send_comments %]>
         <label for="send_comments" class="inline">Use Open311 update-sending extension</label>
     </p>
 
+    <div class="admin-hint">
+      <p>
+        [% loc(
+          "If you've enabled Open311 update-sending above, you must identify which 
+          FixMyStreet <strong>user</strong> will be attributed as the creator of those updates
+          when they are shown on the site. Enter the ID (number) of that user."
+        ) %]
+      </p>
+    </div>
     <p>
-        <div class="admin-hint">
-          <p>
-            [% loc(
-              "If you've enabled Open311 update-sending above, you must identify which 
-              FixMyStreet <strong>user</strong> will be attributed as the creator of those updates
-              when they are shown on the site. Enter the ID (number) of that user."
-            ) %]
-          </p>
-        </div>
         <label for"comment_user_id">User ID to attribute fetched comments to</label>
         <input type="text" name="comment_user_id" value="[% body.comment_user_id %]">
     </p>
 
+    <div class="admin-hint">
+      <p>
+        [% loc(
+          "If you've enabled Open311 update-sending above, enable <strong>suppression of alerts</strong> 
+          if you do <strong>not</strong> want that user to be notified whenever these updates are created."
+        ) %]
+      </p>
+    </div>
     <p>
-        <div class="admin-hint">
-          <p>
-            [% loc(
-              "If you've enabled Open311 update-sending above, enable <strong>suppression of alerts</strong> 
-              if you do <strong>not</strong> want that user to be notified whenever these updates are created."
-            ) %]
-          </p>
-        </div>
         <input type="checkbox" id="suppress_alerts" name="suppress_alerts"[% ' checked' IF body.suppress_alerts %]>
         <label for="suppress_alerts" class="inline">Do not send email alerts on fetched comments to problem creator</label>
     </p>
 
+    <div class="admin-hint">
+      <p>
+        [% loc(
+          "Enable this <strong>contact can override</strong> setting if one or more contacts have a 
+          different endpoint (and send method) from the body's. For example, if reports for some categories of
+          problem must be emailed, while others can be sent over Open311."
+        ) %]
+      </p>
+    </div>
     <p>
-        <div class="admin-hint">
-          <p>
-            [% loc(
-              "Enable this <strong>contact can override</strong> setting if one or more contacts have a 
-              different endpoint (and send method) from the body's. For example, if reports for some categories of
-              problem must be emailed, while others can be sent over Open311."
-            ) %]
-          </p>
-        </div>
         <input type="checkbox" id="can_be_devolved" name="can_be_devolved"[% ' checked' IF body.can_be_devolved %]>
         <label for="can_be_devolved" class="inline">Contacts' own endpoint can override the body's endpoint</label>
     </p>
 
+    <div class="admin-hint">
+      <p>
+        [% loc(
+          "If you've enabled Open311 update-sending above, Open311 usually only accepts OPEN or CLOSED status in 
+          its updates. Enable <strong>extended Open311 stauses</strong> if you want to allow extra states to be passed.
+          Check that your cobrand supports this feature before switching it on."
+        ) %]
+      </p>
+    </div>
     <p>
-        <div class="admin-hint">
-          <p>
-            [% loc(
-              "If you've enabled Open311 update-sending above, Open311 usually only accepts OPEN or CLOSED status in 
-              its updates. Enable <strong>extended Open311 stauses</strong> if you want to allow extra states to be passed.
-              Check that your cobrand supports this feature before switching it on."
-            ) %]
-          </p>
-        </div>
         <input type="checkbox" id="send_extended_statuses" name="send_extended_statuses"[% ' checked' IF conf.send_extended_statuses %]>
         <label for="send_extended_statuses" class="inline">Send extended Open311 statuses with service request updates</label>
     </p>
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 658fa095b..f865d5bbe 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -1039,6 +1039,7 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
       border-style: solid;
       border-width: 1px;
       border-left-width: 1em;
+      margin-bottom: 1em;
     }
     .fms-admin-warning {
         border-color: #f99;
@@ -1056,7 +1057,7 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
     .admin-hint {
       font-size: 80%; // little question marks are small
       cursor: pointer;
-      display: inline-block;
+      display: block;
       float:left;
       overflow: hidden;
       padding: 0.2em;