Spead up animation and added diferent wording

static/css/application.css

@@ -810,7 +810,8 @@ li.calc-main div#calculator_wrapper form div.input-wrapper div.help-wrapper dl {
   -o-transition-delay: 0;
   transition-delay: 0; }
 li.calc-main div#calculator_wrapper form div.input-wrapper div.help-wrapper dl.shown {
-  opacity: 1; }
+  opacity: 1;
+  top: -115px; }
 li.calc-main div#calculator_wrapper form div.input-wrapper div.help-wrapper dl dt {
   clear: both;
   float: left;

templates/main.html

@@ -61,7 +61,7 @@
               <input type="text" id="calculator_input" />
 
               <div class="help-wrapper">
-                <a href="#">Help</a>
+                <a href="#">Hints</a>
                 <dl class="help">
                   <dt>Suffixes:</dt>
                   <dd> %kMGTcmunp</dd>
@@ -134,7 +134,7 @@ $(function() {
     $("#calculator_wrapper").hide();
 
     $(".calc").click(function(){
-      $("#calculator_wrapper").slideToggle();
+      $("#calculator_wrapper").slideToggle("fast");
       $("#calculator_wrapper #calculator_input").focus();
       $(this).toggleClass("closed");
       });

templates/sass/layout/_calculator.scss

@@ -117,6 +117,7 @@ li.calc-main {
 
             &.shown {
               opacity: 1;
+              top: -115px;
             }
 
             dt {