refining buttons.

css/app.css

@@ -78,51 +78,61 @@ button {
     border:0;
     line-height:20px;
     cursor:pointer;
-    border-radius:4px;
-    border:1px solid #b0b0b0;
+    border:1px solid #aaa;
+    box-shadow: inset 0 0 0 1px #fff;
     color:#222;
     background: white;
     font-weight:bold;
     white-space:nowrap;
     font-size:14px;
+    display: inline-block;
+    height:40px;
+    margin:10px;
 }
 
 button:hover {
     background-color: #ececec;
 }
 
-button.big {
-    margin:10px;
-    height:40px;
+button.active:not([disabled]) {
+    background:#7392ff;
+    color:#fff;
 }
 
-button.mini {
-    width:auto;
+button.wide,
+button.narrow {
+    border-radius:4px;
+}
+
+button.wide,
+button.add-button {
+    width: 80px;
+}
+
+
+button.narrow,
+button.add-button:first-child {
+    width:40px;
 }
 
 .buttons-joined {
+    display: inline-block;
     margin:10px;
-    padding:1px;
-    border-radius: 4px;
-    background:#fff;
-    display:inline-block;
-    border:1px solid #b0b0b0;
 }
 
 .buttons-joined button {
-    height:36px;
-    border:0;
-    border-right:1px solid #ccc;
+    border-right-width: 0;
     border-radius:0;
+    margin: 0;
 }
 
 .buttons-joined button:first-child {
-    border-radius:3px 0 0 3px;
+    border-radius:4px 0 0 4px;
 }
 
 .buttons-joined button:last-child {
-    border-right:0;
-    border-radius:0 3px 3px 0;
+    border-right-width: 1px;
+    border-radius:0 4px 4px 0;
 }
 
 button[disabled] {
@@ -130,11 +140,6 @@ button[disabled] {
     cursor:auto;
 }
 
-button.active:not([disabled]) {
-    background:#7392ff;
-    color:#fff;
-}
-
 button.save {
     display:inline-block;
     color:#6dc643;
@@ -207,7 +212,7 @@ img.tile {
 ------------------------------------------------------- */
 
 #bar {
-    border-bottom:1px solid #aaa;
+    border-bottom:1px solid #ccc;
     position:absolute;
     left:0px;
     top:0px;
@@ -221,6 +226,60 @@ img.tile {
     display:none;
 }
 
+/* Inspector */
+
+.inspector-wrap {
+    border:1px solid #ccc;
+    position:absolute;
+    right: 0;
+    left: 510px;
+    padding:10px;
+    height: 60px;
+    opacity:0;
+    display:none;
+}
+
+.inspector-wrap a.permalink {
+    text-decoration:none;
+    margin-right:1em;
+}
+
+.inspector tbody td {
+    border: 1px solid #ccc;
+    width:150px;
+}
+
+.inspector input {
+    margin:0;
+    padding:4px;
+    border:0;
+    background:#fff;
+    width:150px;
+}
+
+.inspector-wrap table {
+    border-collapse: collapse;
+    width:347px;
+    border-spacing:0;
+}
+
+.inspector-wrap .tag-table-wrap {
+    max-height:350px;
+    overflow:auto;
+}
+
+.inspector-wrap table td {
+    padding:0;
+    border-spacing:0;
+}
+
+.inspector-wrap .close {
+    border: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer;
+}
 
 /* Map Controls */
 
@@ -316,66 +375,6 @@ div.geocode-control input {
     margin-left:10px;
 }
 
-.inspector-wrap {
-    border-radius:3px;
-    border:1px solid #ccc;
-    position:absolute;
-    top:50px;
-    left:50%;
-    margin-left:-175px;
-    overflow:auto;
-    padding:10px;
-    background:#fff;
-    width:350px;
-    opacity:0;
-    display:none;
-}
-
-/* Inspector
-------------------------------------------------------- */
-
-.inspector-wrap a.permalink {
-    text-decoration:none;
-    margin-right:1em;
-}
-
-.inspector tbody td {
-    border: 1px solid #ccc;
-    width:150px;
-}
-
-.inspector input {
-    margin:0;
-    padding:4px;
-    border:0;
-    background:#fff;
-    width:150px;
-}
-
-.inspector-wrap table {
-    border-collapse: collapse;
-    width:347px;
-    border-spacing:0;
-}
-
-.inspector-wrap .tag-table-wrap {
-    max-height:350px;
-    overflow:auto;
-}
-
-.inspector-wrap table td {
-    padding:0;
-    border-spacing:0;
-}
-
-.inspector-wrap .close {
-    border: 0;
-    position: absolute;
-    top: 0;
-    right: 0;
-    cursor: pointer;
-}
-
 div.typeahead {
     background:#fff;
     width:148px;