Refactored html for calc and restyled

main.html

@@ -71,21 +71,24 @@
     <div id="calculator_div" class="leanModal_box">
       <form id="calculator">
         <input type="text" id="calculator_input">
-        <input id="calculator_button" type="submit" value="=&gt;">
+        <input id="calculator_button" type="submit" value="=">
         <input type="text" id="calculator_output" readonly>
       </form>
 
-<table>      <tr><td align="right">Suffixes</td><td>&nbsp;:&nbsp;</td><td align="left"> %kMGTcmunp</td></tr>
-      <tr><td align="right">Operations</td><td>&nbsp;:&nbsp;</td><td align="left"> ^ * / + - ()</td></tr>
-      <tr><td align="right">Functions</td><td>&nbsp;:&nbsp;</td><td align="left"> sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs </td></tr>
-      <tr><td align="right">Constants</td><td>&nbsp;:&nbsp;</td><td align="left"> e</td></tr>
-      <!--p> Unsupported: ||, j </p
-Students won't know what parallel means at this time.
-Complex numbers aren't well tested in the courseware, so we would prefer to not expose them.
-If you read the comments in the source, feel free to use them. If you run into a bug, please
-let us know. But we can't officially support them right now.
--->
-</table>
+      <dl>
+        <dt>Suffixes:</dt>
+        <dd> %kMGTcmunp</dd>
+        <dt>Operations:</dt>
+        <dd>^ * / + - ()</dd>
+        <dt>Functions:</dt>
+        <dd>sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs </dd>
+        <dt>Constants</dt>
+        <dd>e</dd>
+
+       <!-- Students won't know what parallel means at this time.  Complex numbers aren't well tested in the courseware, so we would prefer to not expose them.  If you read the comments in the source, feel free to use them. If you run into a bug, please let us know. But we can't officially support them right now.
+
+       <dt>Unsupported:</dt> <dd>||, j </dd>  -->
+      </dl>
     </div>
 
 <script>

sass/_leanmodal.scss

@@ -202,3 +202,52 @@ div#feedback_div{
     }
   }
 }
+
+div#calculator_div {
+  max-width: 500px;
+
+  form {
+    padding-bottom: lh();
+    margin-bottom: lh();
+    border-bottom: 1px solid #ddd;
+
+    input#calculator_input {
+      width: 400px;
+    }
+
+    input#calculator_button {
+      background: 0;
+      color: $mit-red;
+      border: 0;
+      @include box-shadow(none);
+      padding: 0;
+      text-shadow: none;
+
+      &:hover {
+        color: #333;
+      }
+    }
+
+    input#calculator_output {
+      border: 0;
+      background: 0;
+      padding: lh(.35);
+      width: 60px;
+      font-size: 24px;
+      font-weight: bold;
+    }
+  }
+
+  dl {
+    dt {
+      float: left;
+      clear: both;
+      padding-right: lh(.5);
+      font-weight: bold;
+    }
+
+    dd {
+      float: left;
+    }
+  }
+}