From 1ca3b541e6636a43f8d239f8386b3b201b674200 Mon Sep 17 00:00:00 2001
From: Thomas Levine <occurrence@thomaslevine.com>
Date: Sun, 18 Aug 2013 14:24:11 -0700
Subject: [PATCH] axi

---
 client/css/styles.css                | 19 ++++++++++++++++++-
 client/templates/dashboard/page.html |  5 ++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/client/css/styles.css b/client/css/styles.css
index 0fd4509..5ff9fa7 100644
--- a/client/css/styles.css
+++ b/client/css/styles.css
@@ -16,9 +16,26 @@ a.download {
     margin-top: 20px;
 }
 
-a.bar {
+#barplot {
+  position: relative;
+}
+
+#barplot a.bar {
   display: inline-block;
   margin: 0px;
   padding: 0px;
   background-color: #F66;
 }
+
+#barplot .tick {
+  position: absolute;
+  left: 0;
+  font-size: 0.5em;
+}
+#barplot .tick .line {
+  height: 1px;
+  width: 80px;
+  margin-right: 1em;
+  display: inline-block;
+  background-color: rgba(0,0,0,0.3);
+}
diff --git a/client/templates/dashboard/page.html b/client/templates/dashboard/page.html
index 4549aef..21aa8d7 100644
--- a/client/templates/dashboard/page.html
+++ b/client/templates/dashboard/page.html
@@ -1,7 +1,10 @@
 <div class="span12">
     <h2>Acreages of permit applications</h2>
     <div id="map" style="height: 400px;"></div>
-    <div id="barplot" style="height: 250px;"></div>
+    <div id="barplot" style="height: 250px;">
+      <div class="a tick" style="bottom: 100px;"><div class="line"></div>1000 acres</div>
+      <div class="b tick" style="bottom: 200px;"><div class="line"></div>2000 acres</div>
+    </div>
     <p>Impacted acres by parish; grey means no impacted acres, and red means many impacted acres.</p>
 
     <h2>About the site</h2>