small css adjustments

css/styles.css

@@ -22,6 +22,9 @@
   text-transform: none;
   line-height: 1;
 
+  /* Customized by Bibi */
+  font-size: 80%;
+
   /* Better Font Rendering =========== */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -186,21 +189,29 @@ a:hover {
   color: #37b;
 }
 button {
-  padding: 10px;
   border: none;
   border-radius: 3px;
   background: #fff;
   color: #555;
 }
+.input,
+.btn {
+  padding: 10px;
+}
+.input-sm,
+.btn-sm {
+  padding: 3px;
+  font-size: 90%;
+}
 button a {
   color: #fff;
 }
 button.active {
   background: #9ad;
 }
-button:hover {
+/*button:hover {
   opacity: 0.6;
-}
+}*/
 button.btn-lg {
   font-size: 120%;
 }
@@ -208,9 +219,16 @@ textarea,
 select,
 input {
   border: 1px solid #ddd;
-  padding: 8px;
   border-radius: 3px;
 }
+.light-gray {
+  background: #f4f4f4;
+  color: #555;
+}
+.light-gray:hover {
+  background: #ddd;
+  color: #222;
+}
 .blue {
   background: #24d;
   color: #fff;
@@ -371,6 +389,9 @@ input {
   margin: 2px;
   padding-left: 10px;
 }
-#details-repo {
+.details-div section {
   vertical-align: middle;
-}
+}
+.details-div button {
+  margin-top: 3px;
+}

html/index.mustache.html

@@ -19,7 +19,7 @@
     <div class="panel-left">
 
         <div id="navbar">
-            <button id="menu-btn" class="icon-menu"></button>
+            <button id="menu-btn" class="btn icon-menu"></button>
             <a id="nav-back-home" href="/">Web Sandbox</a>
         </div>
 
@@ -48,14 +48,14 @@
             <div class="alert-box error">{{errorMessage}}</div>
         {{/errorMessage}}
 
-            <div style="border: 2px solid red">
+            <div class="details-div">
               <section id="details-repo" class="inline-block" data-slug="{{path}}">
               {{#repo}}
                   <strong>{{_.collection}} </strong><span>{{title}}</span>
               {{/repo}}
               </section>
               <section id="add-repo" class="inline-block">
-                <button class="add-btn h-collapsed fast in"><span class="icon-plus rounded"></span> {{_.add}}</button>
+                <button class="light-gray add-btn inline-block h-collapsed fast in"><span class="icon-plus rounded"></span> {{_.add}}</button>
                 <form id="add-repo-form" class="inline-block h-collapsed">
                     <input type="text" name="title" class="input-sm" value="" placeholder="{{_.collectionName}}" required />
                     <button type="button" class="icon-cross rounded"></button><!--