supporter: New form styling.

This makes better use of bigger screens, and degrades better to smaller
ones.

www/conservancy/static/css/conservancy-bigscreen.css

@@ -92,3 +92,18 @@ img.blog-right {
     /* Don't let the first blog headline clear below #contractpatch-follow. */
     clear: right;
 }
+
+.supporter-form-input {
+    margin-bottom: .5em;
+}
+
+.supporter-form-input label,
+.supporter-form-input .input-group {
+    display: inline-block;
+    width: 49%;
+}
+
+.supporter-form-input label {
+    text-align: right;
+    padding-right: .3em;
+}

www/conservancy/static/css/forms.css

@@ -2,42 +2,40 @@
     font-weight: bold;
 }
 
-.supporter-form label {
-    display: inline-block;
-    width: 200px;
-    text-align: right;
-    font-weight: bold;
-}
-.dinner-form label {
-    display: inline-block;
-    width: 200px;
-    text-align: right;
-}
-.supporter-form-inputs {
-    float: left;
-}
-.dinner-form-inputs {
-    float: left;
-}
-.supporter-form-submit {
-    padding-left: 20em;
-    padding-top: 40px;
-    font-size: small;
-}
-.dinner-form-submit {
-    padding-left: 20em;
-    padding-top: 40px;
-    float: center;
+.supporter-form-input {
+    margin-bottom: .5em;
+    white-space: nowrap;
 }
 
-.dinner-form div {
-    margin-top: 1em;
+.supporter-form-input label {
+    display: inline-block;
+    font-weight: bold;
+    white-space: normal;
+}
+
+.supporter-form-input input[name=amount],
+.supporter-form-input input[name=a3] {
+    width: 5em;
+}
+
+.supporter-form-input input[type=radio] {
+    margin-left: 1em;
+    margin-right: .2em;
+}
+
+.supporter-form-input input[type=radio]:first-of-type {
+    margin-left: 0;
+}
+
+.supporter-form-submit {
+    text-align: center;
 }
 
 .form-error {
     color: red;
     margin-left: 10px;
     font-size: 75%;
+    white-space: normal;
 }
 
 input.invalid, textarea.invalid {
@@ -49,22 +47,15 @@ input.valid, textarea.valid {
 }
 
 .supporter-type-selector {
+    clear: both;
     font-size: 125%;
     text-align: center;
-    width: 80%;
-    align: left;
-}
-
-.supporter-type-selection {
-    clear: both;
-    padding-bottom: 60px;
-    width: 80%;
-    align: left;
 }
 
 h1.appeal {
     margin-top: -.75em;
 }
+
 img.appeal-left {
     float: left;
     padding-right: 1em;

www/conservancy/templates/supporter/form_partial.html

@@ -72,18 +72,21 @@ This partial accepts these optional parameters:
         <input type="hidden" name="p3" value="1">
         <input type="hidden" name="src" value="1">
         <input type="hidden" name="srt" value="0">
-        <label for="a3">Monthly Amount: $</label>
-        <input type="number" name="a3" size="5"
+        <label for="a3">Monthly Amount: </label>
+        <div class="input-group">
+        $ <input type="number" name="a3" size="5"
                min="{{ min_amt }}" value="{{ default_amt }}">
         {% else %}
         <input type="hidden" name="cmd" value="_xclick">
-        <label for="amount">Amount: $</label>
-        <input type="number" name="amount" size="5"
+        <label for="amount">Amount: </label>
+        <div class="input-group">
+        $ <input type="number" name="amount" size="5"
                min="{{ min_amt }}" value="{{ default_amt }}">
         {% endif %}
-        <span class="form-error">${{ min_amt|add:partial_amt }} is a minimum for
+        <p class="form-error">${{ min_amt|add:partial_amt }} is a minimum for
           Conservancy Supporters.
-          <a href="/donate">Donate smaller amounts here</a>.</span>
+          <a href="/donate">Donate smaller amounts here</a>.</p>
+        </div>
       </div>
 
       <div class="supporter-form-input">
@@ -94,12 +97,15 @@ This partial accepts these optional parameters:
           a
           {% endif %}
           t-shirt? </label>
+        <div class="input-group">
           <input type="radio" name="on0" value="wantGiftYes">Yes
           <input type="radio" checked="checked" name="on0" value="wantGiftNo">No
         </div>
+      </div>
 
       <div class="supporter-form-input t-shirt-size-selector">
         <label for="tShirtSize">T-shirt size: </label>
+        <div class="input-group">
           <select name="os0">
             <option value="MenS">Men's S</option>
             <option value="MenM">Men's M</option>
@@ -116,21 +122,26 @@ This partial accepts these optional parameters:
             <option value="FittedLadiesXL">Fitted Ladies' XL</option>
           </select>
         </div>
+      </div>
 
       <div class="supporter-form-input">
         <label for="publicAck">
           Should we <a href="/sponsors#supporters">list you publicly</a> as a Conservancy Supporter? </label>
+        <div class="input-group">
           <input type="radio" checked="checked" name="on1" value="publicAckYes">Yes
           <input type="radio" name="on1" value="publicAckNo">No
         </div>
+      </div>
 
       <div class="supporter-form-input">
         <label for="joinList">Join Conservancy's
           Low-Traffic Announcement Email List? </label>
+        <div class="input-group">
           <input type="radio" checked="checked" name="os1" value="joinListYes">Yes
           <input type="radio" name="os1" value="joinListNo">No
         </div>
       </div>
+    </div>
 
     <div class="supporter-form-submit">
       <input type="image" name="submit"