Started on some responsive design

app/app.css

@@ -447,8 +447,6 @@ footer a:hover{
   border:none;
   padding:0!important;
   font: inherit;
-  /*border is optional*/
-  border-bottom:1px solid #444;
   cursor: pointer;
 }
 .footerButtons:hover {

app/app.js

@@ -144,13 +144,6 @@ if (Meteor.isClient) {
       }
     });
 
-    Template.footer.events({
-        "click #APIButton": function(){
-            $("#login-view").hide();
-            $("#register-view").show();
-        }
-    });
-
     Template.room.helpers({
         type: function() {
           var parts = location.href.split('/');

app/head.html

@@ -4,6 +4,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="description" content="Welcome to the next gen, collaborative, modern music app for the web!">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name=viewport content='width=700'>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
     <link href='http://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
     <script type="application/javascript">

app/templates/login.html

@@ -3,8 +3,8 @@
         <button class="button" id="register">Sign Up</button>
         <h1>Login</h1>
         <form class="form">
-            <input type="text" name="loginUsername" placeholder="Enter your username" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter your username'" required/>
-            <input type="password" name="loginPassword" placeholder="Enter your password" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter your password'" required/>
+            <input type="text" autocorrect="off" name="loginUsername" placeholder="Enter your username" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter your username'" required/>
+            <input type="password" autocorrect="off" name="loginPassword" placeholder="Enter your password" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter your password'" required/>
             <button type="submit">Login</button>
         </form>
         <button class="btn-social" id="facebook-login"><i class="fa fa-facebook pull-left"></i>Login with Facebook</button>

app/templates/register.html

@@ -3,7 +3,7 @@
         <button class="button" id="login">Login</button>
         <h1>Sign Up</h1>
         <form class="form">
-            <input type="text" name="registerUsername" placeholder="Enter a username" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter a username'" required/>
+            <input type="text" autocorrect="off" name="registerUsername" placeholder="Enter a username" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter a username'" required/>
             <input type="email" name="registerEmail" placeholder="Enter your email" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter your email'" required>
             <input type="password" name="registerPassword" placeholder="Enter a password" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter a password'" required/> {{> reCAPTCHA}}
             <p>By registering, you agree to the Terms and Conditions and Privacy Policy.</p>