Change login page in order to repare its appearance and make it responsive

modoboa/static/css/login.css

@@ -1,19 +1,27 @@
+@media (max-width: 760px) {
+    form.login-form div.checkbox button.btn{
+        margin-top: 20px;
+        margin-bottom: 0;
+    }
+}
+
+@media (min-width: 760px) {
+    #logo {
+        margin-top: 60px;
+        text-align: center;
+        margin: 30px 46px 30px 0;
+        max-width: 380px;
+    }
+    #logo img {
+        height: 100px;
+    }
+}
+
 #box {
     margin: 0 auto;
     max-width: 350px;
 }
 
-#logo { 
-    margin-top: 60px;
-    text-align: center;
-    margin: 60px 0 30px;
-    max-width: 260px;
-}
-
-#logo img {
-    height: auto;
-}
-
 .form-actions { 
     background-color: transparent;
     padding-right: 0px;
@@ -30,4 +38,32 @@
 .login-error {
     margin: 20px auto;
     max-width: 300px;
+}
+
+html body div.container div#box div#logo.row ul.thumbnails li{
+    list-style-type: none;
+}
+
+.thumbnail{
+    border: none;
+}
+
+.thumbnails{
+    padding-left: 0;
+}
+
+.input-group {
+    border-collapse: separate;
+    display: table;
+    position: relative;
+}
+
+
+form.login-form div.checkbox button.btn{
+    margin-bottom:20px;
+}
+
+.divider{
+    height: 20px;
+    border-bottom: 1px solid #E8E8E8;
 }

modoboa/templates/registration/login.html

@@ -21,19 +21,29 @@
     <div class="container">
       <div id="box">
       <div id="logo" class="row">
-        <img src="{% get_modoboa_logo %}" />
+          <ul class="thumbnails">
+              <li>
+                  <a href="#" class="thumbnail">
+                      <img src="{% get_modoboa_logo %}" />
+                  </a>
+              </li>
+          </ul>
       </div>
-      <form method="post" action="{% url 'modoboa.core.views.auth.dologin' %}"
-            class="login-form well">
+      <form method="post" action="{% url 'modoboa.core.views.auth.dologin' %}" class="login-form well">
         {% csrf_token %}
         {% render_field form.username %}
         {% render_field form.password %}
         <input type="hidden" name="next" value="{{ next }}" />
-        <div class="form-actions">
-          <label class="pull-left checkbox" for="id_rememberme">
-            <input type="checkbox" id="id_rememberme" name="rememberme" />{% trans "Remember me" %}
-          </label>
-          <button class="btn btn-primary pull-right" type="submit">{% trans "Log in" %}</button>
+        <div class=" divider"></div>
+        <div class="input-group">
+            <div class="checkbox">
+              <label class="col-lg-9 col-md-9 col-sm-8 checkbox" for="id_rememberme">
+                  <input type="checkbox" id="id_rememberme" name="rememberme" />{% trans "Remember me" %}
+              </label>
+            <div class="col-lg-3 col-md-3 col-sm-4">
+                <button class="btn btn-primary type="submit">{% trans "Log in" %}</button>
+            </div>
+            </div>
         </div>
       </form>
       <div class="login-error">