reworked log in page to emphasize sign up

cms/static/sass/_login.scss

@@ -40,6 +40,7 @@
 
 	label {
 		display: block;
+		margin-bottom: 5px;
 		font-size: 13px;
 		font-weight: 700;
 	}
@@ -67,17 +68,45 @@
 	}
 
 	.form-actions {
-		margin-bottom: 0;
+		@include clearfix;
+		margin-top: 32px;
+		margin-bottom: 5px;
+		text-align: center;
 	}
 
-	input[type="submit"] {
+	.log-in-button {
 		@include blue-button;
-		margin-right: 10px;
-		padding: 8px 20px 10px;
+		padding: 8px 0 10px;
+		font-family: $sans-serif;
+	}
+
+	.sign-up-button {
+		@include white-button;
+		padding: 7px 0 9px;
+	}
+
+	.log-in-button,
+	.sign-up-button {
+		@include box-sizing(border-box);
+		float: left;
+		width: 45%;
+	}
+
+	.or {
+		float: left;
+		display: inline-block;
+		width: 10%;
+		font-size: 15px;
+		line-height: 36px;
+		color: $darkGrey;
+		text-align: center;
 	}
 
 	.forgot-button {
-		font-size: 13px;
+		float: right;
+		font-size: 11px;
+		font-weight: 400;
+		line-height: 21px;
 	}
 
 	.log-in-extra {

cms/templates/login.html

@@ -17,17 +17,15 @@
         <input name="email" type="email" class="email-field">
       </div>
       <div class="row">
-        <label>Password</label>
+        <label>Password <a href="#" class="forgot-button">Forgot password?</a></label>
         <input name="password" type="password" class="password-field">
       </div>
       <div class="row form-actions">
         <input name="submit" type="submit" value="Log In" class="log-in-button">
-        <a href="#" class="forgot-button">Forgot password?</a>
-      </div>      
+        <span class="or">or</span>
+        <a href="${reverse('signup')}" class="sign-up-button">Sign up</a>        
+      </div>
     </form>
-    <div class="log-in-extra">
-      <p>Not enrolled? <a href="${reverse('signup')}">Sign up.</a></p>
-    </div>
   </article>
 
 <script type="text/javascript">