diff --git a/static/css/application.css b/static/css/application.css
index 978483be7a..cd3d240f5c 100644
--- a/static/css/application.css
+++ b/static/css/application.css
@@ -664,7 +664,7 @@ footer nav ul.social li.linkedin a {
   background: url("/static/images/linkedin.png") 0 0 no-repeat; }
 
 li.calc-main {
-  bottom: 0;
+  bottom: -36px;
   left: 0;
   position: fixed;
   width: 100%; }
@@ -691,13 +691,17 @@ li.calc-main a.calc {
   *vertical-align: auto;
   padding: 8px 12px;
   width: 16px;
-  height: 20px; }
+  height: 20px;
+  position: relative;
+  top: -36px; }
 li.calc-main a.calc:hover {
   opacity: .8; }
 li.calc-main a.calc.closed {
   background-image: url("/static/images/close-calc-icon.png"); }
 li.calc-main div#calculator_wrapper {
   background: rgba(17, 17, 17, 0.9);
+  position: relative;
+  top: -36px;
   clear: both; }
 li.calc-main div#calculator_wrapper form {
   padding: 22.652px; }
diff --git a/templates/sass/layout/_calculator.scss b/templates/sass/layout/_calculator.scss
index 8b5d60143a..1a81ee8c94 100644
--- a/templates/sass/layout/_calculator.scss
+++ b/templates/sass/layout/_calculator.scss
@@ -1,5 +1,5 @@
 li.calc-main {
-  bottom: 0;
+  bottom: -36px;
   left: 0;
   position: fixed;
   width: 100%;
@@ -16,6 +16,8 @@ li.calc-main {
     padding: 8px 12px;
     width: 16px;
     height: 20px;
+    position: relative;
+    top: -36px;
 
     &:hover {
       opacity: .8;
@@ -28,6 +30,8 @@ li.calc-main {
 
   div#calculator_wrapper {
     background: rgba(#111, .9);
+    position: relative;
+    top: -36px;
     clear: both;
 
     form {