adds styles to new inputs on signup form

lms/static/sass/shared/_forms.scss

@@ -9,6 +9,7 @@ form {
     -webkit-font-smoothing: antialiased;
   }
 
+  textarea,
   input[type="text"],
   input[type="email"],
   input[type="password"] {
@@ -34,6 +35,10 @@ form {
     }
   }
 
+  textarea {
+    height: 60px;
+  }
+
   input[type="submit"] {
     @include button(shiny, $blue);
     @include border-radius(3px);

lms/static/sass/shared/_modal.scss

@@ -138,6 +138,14 @@
       position: relative;
       z-index: 2;
 
+      .input-group {
+        @include clearfix;
+        border-bottom: 1px solid rgb(210,210,210);
+        @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
+        margin-bottom: 30px;
+        padding-bottom: 10px;
+      }
+
       label {
         display: none;
       }
@@ -146,6 +154,14 @@
         margin-right: 5px;
       }
 
+      textarea {
+        background: rgb(255,255,255);
+        display: block;
+        height: 45px;
+        margin-bottom: 20px;
+        width: 100%;
+      }
+
       input[type="email"],
       input[type="text"],
       input[type="password"] {
@@ -177,6 +193,48 @@
         }
       }
 
+      .citizenship, .gender, .date-of-birth {
+        margin-bottom: 20px;
+
+        .input-wrapper {
+        }
+
+        label {
+          display: block;
+        }
+
+        select {
+          width: 100%;
+        }
+      }
+
+      .citizenship, .gender {
+        float: left;
+        width: flex-grid(6);
+      }
+
+      .citizenship {
+        margin-right: flex-gutter();
+      }
+
+      .date-of-birth {
+        float: left;
+        width: flex-grid(12);
+
+        select {
+          @include box-sizing(border-box);
+          display: block;
+          float: left;
+          margin-right: flex-gutter();
+          max-width: flex-grid(4);
+          width: flex-grid(4);
+
+          &:last-child {
+            margin: 0px;
+          }
+        }
+      }
+
       .submit {
         padding-top: 10px;
 

lms/templates/signup_modal.html

@@ -16,6 +16,8 @@
         <div class="notice"></div>
         <div id="enroll_error" class="modal-form-error" name="enroll_error"></div>
         <div id="enroll_error" name="enroll_error"></div>
+
+        <div class="input-group">
           <label>E-mail</label>
           <input name="email" type="email" placeholder="E-mail">
           <label>Password</label>
@@ -24,50 +26,74 @@
           <input name="username" type="text" placeholder="Public Username">
           <label>Full Name</label>
           <input name="name" type="text" placeholder="Full Name">
-        <p>
           <label>Mailing address</label>
           <textarea name="mailing_address" placeholder="Mailing address"></textarea>
-        </p>
-        <label>Country of citizenship</label>
+        </div>
+
+        <div class="input-group">
+          <section class="citizenship">
+            <label>Citizenship</label>
+            <div class="input-wrapper">
               <select name="country">
                   %for country_code, country_name in COUNTRIES:
                       <option value="${country_code}">${country_name}</option>
                   %endfor
               </select>
-        <label>Preferred Language</label>
-        <input name="language" type="text" placeholder="Preferred Language">
+            </div>
+          </section>
+
+          <section class="gender">
             <label>Gender</label>
+            <div class="input-wrapper">
               <select name="gender">
                   %for code, gender in UserProfile.GENDER_CHOICES:
                       <option value="${code}">${gender}</option>
                   %endfor
               </select>
+            </div>
+          </section>
+
+          <section class="date-of-birth">
             <label>Date of birth</label>
+            <div class="input-wrapper">
               <select name='date_of_birth__month'>
+                  <option value="">month</option>
                   %for month in range(1,13):
                       <option value="${month}">${month}</option>
                   %endfor
               </select>
+
               <select name='date_of_birth__day'>
+                  <option value="">day</option>
                   %for day in range(1,32):
                       <option value="${day}">${day}</option>
                   %endfor
               </select>
+
               <select name='date_of_birth__year'>
+                  <option value="">year</option>
                   %for year in range(date.today().year,1899,-1):
                       <option value="${year}">${year}</option>
                   %endfor
               </select>
+            </div>
+          </section>
+        </div>
+
+        <div class="input-group">
           <label class="terms-of-service">
             <input name="terms_of_service" type="checkbox" value="true">
             I agree to the
-          <a href="${reverse('tos')}">Terms of Service</a>
+            <a href="#">Terms of Service</a>
           </label>
+
           <label class="honor-code">
             <input name="honor_code" type="checkbox" value="true">
             I agree to the
-          <a href="${reverse('honor')}" target="blank">Honor Code</a>
+            <a href="#">Honor Code</a>
+            , sumarized below as:
           </label>
+        </div>
 
         <div class="submit">
           <input name="submit" type="submit" value="Create My Account">