made our request invite page look nice

app/assets/stylesheets/application.scss.erb

@@ -193,10 +193,6 @@ button.button.btn-no:hover {
     display: block;
     width: 830px;
 }
-.requestInvite {
-    display: block;
-    margin: -720px auto 0;
-}
 .new_session,
 .new_user,
 .edit_user,
@@ -3071,14 +3067,16 @@ and it won't be important on password protected instances */
 
 /* request */
 
-#wrapper .requestInvite {
+.requestInvite {
     width: 700px;
-    margin: 0 auto;
-    padding: 0 0 60px 0;
     background: #FFFFFF;
     color: white;
-    height: 100%;
-    overflow: hidden;
+    height: calc(100% - 52px);
+    z-index: 1;
+    position: relative;
+    left: 50%;
+    margin-left: -350px;
+    margin-top: 52px;
 }
 
 .home_bg {

app/assets/stylesheets/clean.css.erb

@@ -654,8 +654,13 @@
   display: block;
 }
 
-.appsPage #exploreMapsHeader {
-  display: block;
+.requestInviteHeader {
+  position: absolute;
+  width: 100%;
+  z-index:2;
+  background-color:#FAFAFA;
+  height: 52px;
+  box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
 }
 
 #exploreMapsHeader {

app/assets/stylesheets/mobile.scss.erb

@@ -100,9 +100,17 @@
     max-width: 360px;
   }
 
-  #wrapper .requestInvite {
+  .requestInviteHeader {
+    display: none;
+  }
+  .requestInvite {
     width: 100%;
-    padding: 0;
+    height: calc(100% - 50px);
+    z-index: 1;
+    position: relative;
+    left: 0;
+    margin-left: 0px;
+    margin-top: 50px;
   }
 
   #exploreMaps > div {

app/views/main/requestinvite.html.erb

@@ -6,7 +6,5 @@
 
 <% content_for :title, "Request Invite | Metamaps" %>
 <% content_for :mobile_title, "Request Invite" %>
-  
-<div id="yield">
+<div class="requestInviteHeader"></div>
 <iframe class="requestInvite" src="https://docs.google.com/forms/d/1lWoKPFHErsDfV5l7-SvcHxwX3vDi9nNNVW0rFMgJwgg/viewform?embedded=true" width="700" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
-</div>