From ac07aa5828e02333e6e363315f360de088e70c98 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Mon, 6 Feb 2012 16:51:14 -0500
Subject: [PATCH] Added hints on enroll form

---
 create_account.html  | 30 +++++++++++++-----------------
 sass/_leanmodal.scss | 40 +++++++++++++++++++++++++++++++++++++++-
 sass/_wiki.scss      |  6 +++++-
 3 files changed, 57 insertions(+), 19 deletions(-)

diff --git a/create_account.html b/create_account.html
index 58d13936a6..0b15a323e2 100644
--- a/create_account.html
+++ b/create_account.html
@@ -9,56 +9,52 @@
 
     <ol>
 
-      <li>
+      <li class="email">
         <label>E-mail*</label>
         <input name="email" id="ca_email" type="email" required />
       </li>
 
-      <li>
+      <li class="password">
         <label>Password*</label>
         <input name="password" id="ca_password" type="password" required />
       </li>
 
-      <li>
+      <li class="username">
         <label>Username (public)* <span class="ui-icon ui-icon-help" id="spinner_nick" style="display:inline-block;"></span></label>
         <input name="username" id="ca_username" type="text" required /> 
 
-        <div style="display:none" id="sregion_nick">Nickname you'd like to use on forums. We recommend some variant of your real name (e.g. first name, last initial), but we allow you to be fully anonymous as well. </div>
+        <div id="sregion_nick" class="tip">Nickname you'd like to use on forums.</div>
       </li>
 
-
-      <li>
-        <label>Full name* <span class="ui-icon ui-icon-help" id="spinner_name" style="display:inline-block;"></span></label>
+      <li class="full-name">
+        <label>Full name<span class="ui-icon ui-icon-help" id="spinner_name" style="display:inline-block;"></span></label>
         <input name="name" id="ca_name" type="text" />
 
-        <div style="display:none" id="sregion_name">If you would like us to give you a certificate of completion at the end, we need your full legal name, as you would like it to appear on the certificate (e.g. &quot;John Smith, Jr&quot;). Otherwise, feel free to leave it blank. </div>
+        <div class="tip" id="sregion_name">If you would like us to give you a certificate of completion at the end, we need your full legal name, as you would like it to appear on the certificate (e.g. &quot;John Smith, Jr&quot;).</div>
       </li>
 
-      <li>
+      <li class="location">
         <label>Location <span class="ui-icon ui-icon-help" id="spinner_location" style="display:inline-block;"></span></label>
         <input name="location" id="ca_location" type="text" />
 
-        <div style="display:none" id="sregion_location">Preferred format is city, state, country (so for us, &quot;Cambridge, Massachusetts, USA&quot;). We'd eventually like to group people into study groups. Studies show that geographic proximity helps. It'll also help us understand efforts needed for internationalization, low bandwidth, cultural issues, etc. We may also use statistics from this to help us raise money. </div>
-
+        <div id="sregion_location" class="tip">Preferred format is city, state, country (so for us, &quot;Cambridge, Massachusetts, USA&quot;).</div>
       </li>
 
-      <li>
+      <li class="language">
         <label>Preferred Language <span class="ui-icon ui-icon-help" id="spinner_language" style="display:inline-block;"></span></label>
 
         <input name="language" id="ca_language" type="text" />
 
-        <div style="display:none" id="sregion_language">Please let us know what language you'd most like to see the content in (even if not your native). We're working on translations and internationalization. This will help us know what languages and regions to focus on. </div>
+        <div id="sregion_language" class="tip">Please let us know what language you'd most like to see the content in (even if not your native). We're working on translations and internationalization.</div>
       </li>
 
       <li class="terms">
-        <label>
-          <input name="terms_of_service" id="cb_terms_of_service" type="checkbox" value="terms_of_service" required />I agree to the Terms of Service
-        </label>
+        <label> <input name="terms_of_service" id="cb_terms_of_service" type="checkbox" value="terms_of_service" required />I agree to the Terms of Service*</label>
       </li>
 
       <li class="honor-code">
         <label>
-          <input name="honor_code" id="cb_honor_code" type="checkbox" value="honor_code" required />I agree to the Honor code.         </label>
+          <input name="honor_code" id="cb_honor_code" type="checkbox" value="honor_code" required />I agree to the Honor code.*</label>
         <ul>
           <li>Not engage in any activities that would dishonestly improve my results, or improve or hurt those of others.</li>
           <li>Never post answers to problems.</li>
diff --git a/sass/_leanmodal.scss b/sass/_leanmodal.scss
index 8c14db22d4..5e26491b33 100644
--- a/sass/_leanmodal.scss
+++ b/sass/_leanmodal.scss
@@ -28,12 +28,49 @@ div.leanModal_box {
 
   &#enroll {
     max-width: 600px;
+
+    ol {
+      @extend .clearfix;
+
+      li {
+        width: 239px;
+        float: left;
+
+        &.email, &.username, &.location {
+          margin-right: 20px;
+        }
+
+        &.terms, &.honor-code {
+          width: auto;
+          float: none;
+        }
+
+        div.tip {
+          display: none;
+        }
+
+        &:hover {
+          div.tip {
+            display: block;
+            line-height: lh();
+            position: absolute;
+            background: #333;
+            color: #fff;
+            width: 239px;
+            margin: 0 0 0 -10px;
+            padding: 10px;
+            -webkit-font-smoothing: antialiased;
+            font-size: 16px;
+          }
+        }
+      }
+    }
   }
 
   form {
     text-align: left;
 
-    div#enroll_error, div#login_error {
+    div#enroll_error, div#login_error, div#pwd_error {
       -webkit-font-smoothing: antialiased;
       background-color: #F50200;
       color: #fff;
@@ -50,6 +87,7 @@ div.leanModal_box {
 
     ol {
       list-style: none;
+      margin-bottom: lh();
 
       li {
         margin-bottom: lh(.5);
diff --git a/sass/_wiki.scss b/sass/_wiki.scss
index a3c6c95e3c..86b90c43d6 100644
--- a/sass/_wiki.scss
+++ b/sass/_wiki.scss
@@ -78,6 +78,10 @@ div.wiki-wrapper {
     header {
       @extend .topbar;
 
+      &:empty {
+        display: none !important;
+      }
+
       a {
         @extend .block-link;
       }
@@ -110,7 +114,7 @@ div.wiki-wrapper {
             font-size: 12px;
             text-transform: uppercase;
             letter-spacing: 1px;
-            padding: lh(.75);
+            padding: 14px;
             margin: 0;
 
             &:hover {