From 83c8fb84228ed78c73061b9c39415e93fef78f91 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Thu, 12 Jan 2012 17:18:58 -0500
Subject: [PATCH] Styled log in popover

---
 login.html          | 24 ++++++++++++++++++------
 sass/_fancybox.scss | 27 ++++++++++++++++++++++++++-
 2 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/login.html b/login.html
index 50cbd6ad1f..8d06c9006a 100644
--- a/login.html
+++ b/login.html
@@ -2,17 +2,29 @@
 ${ error }
 
 <div id="login_div">
+  <h1>Log in to MITx</h1>
   <form name="login" action="/login" method="get">
     <div id="login_error"></div>
-    E-mail
-    <input name="email" id="li_email" type="email" required>
-    Password
-    <input name="password" id="li_password" type="password" required>  </td></tr>
-    <input name="remember" id="remember"  type="checkbox">Remember me
+    <ol>
+      <li>
+        <label>E-mail*</label>
+        <input name="email" id="li_email" type="email" required>
+      </li>
+
+      <li>
+        <label>Password*</label>
+        <input name="password" id="li_password" type="password" required>
+      </li>
+
+      <li class="remember">
+        <label><input name="remember" id="remember"  type="checkbox">Remember me</label>
+      </li>
+
+    </ol>
     <input name="submit" id="login_button" type="button" value="Log in">
   </form>
 
-  <div>
+  <div class="lost-password">
     <div id="lost_password"><a class="modal" href="#pwd_reset">Lost password?</a></div>
   </div>
 </div>
diff --git a/sass/_fancybox.scss b/sass/_fancybox.scss
index 9747d1e880..4ea9b3aba9 100644
--- a/sass/_fancybox.scss
+++ b/sass/_fancybox.scss
@@ -3,6 +3,7 @@ div#fancybox-overlay {
 }
 
 div#fancybox-wrap {
+  width: auto  !important;
   div#fancybox-outer {
     background: none;
     max-width: 600px;
@@ -20,6 +21,7 @@ div#fancybox-wrap {
       border: none;
       padding: lh(2);
       max-width: 600px;
+      width: auto !important;
 
       h1 {
         font-size: 24px;
@@ -51,7 +53,7 @@ div#fancybox-wrap {
               margin-right: $gw-gutter;
             }
 
-            &.terms {
+            &.terms, &.remember {
               float: none;
               width: auto;
               clear: both;
@@ -86,6 +88,29 @@ div#fancybox-wrap {
           padding: lh(.5);
         }
       }
+
+      div#login {
+        min-width: 300px;
+
+        ol {
+          li {
+            width: auto;
+            float: none;
+          }
+        }
+      }
+
+      div.lost-password {
+        text-align: left;
+        margin-top: lh();
+
+        a {
+          color: #999;
+          &:hover {
+            color: #444;
+          }
+        }
+      }
     }
   }
 }