From 87be89651705bc8bcd005d69642b9e0f3db25fb6 Mon Sep 17 00:00:00 2001
From: Saman Bemel-Benrud <samanpwbb@gmail.com>
Date: Thu, 6 Dec 2012 17:32:41 -0500
Subject: [PATCH] organized CSS.

---
 css/app.css | 243 ++++++++++++++++++++++++++++++----------------------
 1 file changed, 141 insertions(+), 102 deletions(-)

diff --git a/css/app.css b/css/app.css
index cceffbb90..172a90e9b 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1,7 +1,13 @@
+/* Basics
+------------------------------------------------------- */
+
 body {
     font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
     margin:0;
     padding:0;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
     color:#444;
 }
 
@@ -35,6 +41,10 @@ a:hover {
     color:#000;
 }
 
+table th {
+    text-align:left;
+}
+
 input[type=text] {
     font-size:12px;
     line-height:20px;
@@ -45,6 +55,19 @@ input[type=text]:focus {
     border-color:#222;
 }
 
+/* Utility Classes
+------------------------------------------------------- */
+
+div.hide {
+    display:none;
+}
+
+a.selected {
+    background:#DDE4FF;
+}
+
+/* Buttons */
+
 button {
     background:#7092ff;
     border:0;
@@ -59,6 +82,7 @@ button {
 button.cancel {
     background:#aaa;
 }
+
 button.delete {
     background:#DD5757;
 }
@@ -71,10 +95,18 @@ button small {
     vertical-align: top;
 }
 
-table th {
-    text-align:left;
+div.buttons-joined {
+    margin:5px;
+    padding:1px;
+    background:#fff;
+    display:inline-block;
+    border-radius:3px;
+    border:1px solid #ccc;
 }
 
+/* Map
+------------------------------------------------------- */
+
 #map {
     display:block;
     position:absolute;
@@ -86,6 +118,23 @@ table th {
     background:#fff;
 }
 
+img.tile {
+    position:absolute;
+    transform-origin:0 0;
+    -ms-transform-origin:0 0;
+    -webkit-transform-origin:0 0;
+    -moz-transform-origin:0 0;
+    -o-transform-origin:0 0;
+}
+
+#tile-g {
+    position:absolute;
+    top:0;
+}
+
+/* About Section
+------------------------------------------------------- */
+
 #about {
     position:absolute;
     bottom:5px;
@@ -94,6 +143,9 @@ table th {
     padding:2px 5px;
 }
 
+/* ToolBar / Persistent UI Elements
+------------------------------------------------------- */
+
 #bar {
     background:#e8e8e8;
     border-bottom:1px solid #aaa;
@@ -104,60 +156,6 @@ table th {
     right:0;
 }
 
-div.layerswitcher-control {
-    position:absolute;
-    top:170px;
-    left:10px;
-    color:#222;
-}
-
-div.hide {
-    display:none;
-}
-
-div.layerswitcher-control .content {
-    background:#fff;
-    padding:5px;
-    position:absolute;
-    left:40px;
-    width:100px;
-    top:0;
-}
-
-div.layerswitcher-control div.opacity-options {
-    border:1px solid #000;
-    height:15px;
-    width:45px;
-}
-
-div.layerswitcher-control a.layer {
-    display:block;
-}
-
-div.layerswitcher-control a.opacity {
-    background:#000;
-    display:inline-block;
-    width:15px;
-    height:15px;
-}
-
-
-div.geocode-control {
-    position:absolute;
-    top:130px;
-    left:10px;
-    color:#222;
-}
-
-#bar div.geocode-control button,
-div.layerswitcher-control button {
-    width:40px;
-}
-
-div.geocode-control input {
-    display:none;
-}
-
 #bar button,
 button.white {
     width:80px;
@@ -176,15 +174,6 @@ button.white {
     margin:0;
 }
 
-div.buttons-joined {
-    margin:5px;
-    padding:1px;
-    background:#fff;
-    display:inline-block;
-    border-radius:3px;
-    border:1px solid #ccc;
-}
-
 #bar div.buttons-joined button:first-child {
     border-radius:2px 0 0 2px;
 }
@@ -205,21 +194,6 @@ div.buttons-joined {
     display:none;
 }
 
-.user {
-    width:200px;
-    position:absolute;
-    bottom:10px;
-    left:10px;
-    background:#fff;
-    padding:2px 5px;
-    border-radius:3px;
-    border:1px solid #aaa;
-}
-
-.user .logout {
-    margin-left:10px;
-}
-
 #bar button[disabled] {
     color:#eee;
     cursor:auto;
@@ -248,7 +222,9 @@ div.buttons-joined {
     margin:0;
 }
 
-.zoombuttons {
+/* Map Controls */
+
+#bar .zoombuttons {
     position:absolute;
     left:10px;
     top:50px;
@@ -269,6 +245,77 @@ div.buttons-joined {
     border-radius:0 0 5px 5px;
 }
 
+/* Layer Switcher */
+
+div.layerswitcher-control {
+    position:absolute;
+    top:170px;
+    left:10px;
+    color:#222;
+}
+
+div.layerswitcher-control .content {
+    background:#fff;
+    padding:5px;
+    position:absolute;
+    left:40px;
+    width:100px;
+    top:0;
+}
+
+div.layerswitcher-control div.opacity-options {
+    border:1px solid #000;
+    height:15px;
+    width:45px;
+}
+
+div.layerswitcher-control a.layer {
+    display:block;
+}
+
+div.layerswitcher-control a.opacity {
+    background:#000;
+    display:inline-block;
+    width:15px;
+    height:15px;
+}
+
+/* Geocoder */
+
+div.geocode-control {
+    position:absolute;
+    top:130px;
+    left:10px;
+    color:#222;
+}
+
+#bar div.geocode-control button,
+div.layerswitcher-control button {
+    width:40px;
+}
+
+div.geocode-control input {
+    display:none;
+}
+
+/* Account Information
+------------------------------------------------------- */
+
+.user {
+    width:200px;
+    position:absolute;
+    bottom:10px;
+    left:10px;
+    background:#fff;
+    padding:2px 5px;
+    border-radius:3px;
+    border:1px solid #aaa;
+}
+
+.user .logout {
+    margin-left:10px;
+}
+
 .inspector-wrap {
     border-radius:3px;
     border:1px solid #ccc;
@@ -284,6 +331,9 @@ div.buttons-joined {
     display:none;
 }
 
+/* Inspector
+------------------------------------------------------- */
+
 .inspector-wrap a.permalink {
     text-decoration:none;
     margin-right:1em;
@@ -337,9 +387,8 @@ div.typeahead a {
     display:block;
 }
 
-a.selected {
-    background:#DDE4FF;
-}
+/* Modals
+------------------------------------------------------- */
 
 .modal {
     width:640px;
@@ -398,11 +447,8 @@ a.selected {
     overflow:auto;
 }
 
-/* mobile tweaks */
-* {
-    -webkit-tap-highlight-color:rgba(0,0,0,0);
-    -webkit-touch-callout:none;
-}
+/* Tooltips
+------------------------------------------------------- */
 
 #bar button .tooltip {
     white-space: normal;
@@ -452,16 +498,9 @@ a.selected {
     border-width: 0 5px 5px;
 }
 
-img.tile {
-    position:absolute;
-    transform-origin:0 0;
-    -ms-transform-origin:0 0;
-    -webkit-transform-origin:0 0;
-    -moz-transform-origin:0 0;
-    -o-transform-origin:0 0;
-}
-
-#tile-g {
-    position:absolute;
-    top:0;
-}
+/* Mobile Tweaks
+------------------------------------------------------- */
+* {
+    -webkit-tap-highlight-color:rgba(0,0,0,0);
+    -webkit-touch-callout:none;
+}
\ No newline at end of file