RTL fix for leaflet controls, Ad concept

app/assets/javascripts/application.js

@@ -134,4 +134,6 @@ $(document).ready(function () {
   $("#menu-icon").on("click", function() {
     $("header").toggleClass("closed");
   });
+
+  $('#ad .close').on("click", function() { $('#ad').remove(); });
 });

app/assets/stylesheets/common.css.scss

@@ -115,6 +115,7 @@ body {
   margin: 0px;
   padding: 0px;
   text-align: left;
+  height: 100%;
 }
 
 body.slim {
@@ -145,6 +146,8 @@ small, aside {
   font-size: 12px;
 }
 
+#container { position: relative; }
+
 .column-1 {
   width: 50%;
   margin: 0 0 $lineheight/2 0;
@@ -240,7 +243,7 @@ table {
 #menu-icon { 
   display: none !important;
   float: right;
-  background: url("/assets/menu-icon.png") no-repeat;
+  background: image-url("menu-icon.png") no-repeat;
   background-size: 30px 30px;
   display: block;
   width: 30px;
@@ -447,6 +450,30 @@ nav.secondary {
   }
 }
 
+a#ad {
+  width: 100%;
+  display: block;
+  background: rgb(240,151,53);
+  z-index: 999;
+  padding: 1px $lineheight;
+  color: #fff;
+  font-size: 11px;
+  text-transform: uppercase;
+  span.close {
+    float: right;
+    color: #fff;
+    font-size: 10px;
+    line-height: 18px;
+    opacity: .5;
+    text-transform: none;
+    &:hover { opacity: .9; }
+  }
+  &:hover { 
+    background: rgb(220,151,53);
+    text-decoration: none; 
+  }
+}
+
 #compact-secondary-nav {
   display: none;
   ul li a {
@@ -690,6 +717,13 @@ nav.secondary {
       background: none;
       width: 78%;
     }
+
+    a#ad {
+      margin: 0 $lineheight;
+      width: 64%;
+      padding: 0 6px;
+      border-radius: 3px;
+    }
   }
 
   #map {
@@ -887,6 +921,10 @@ nav.secondary {
   }
 }
 
+#ad + #sidebar_content {
+  top: 70px;
+}
+
 #sidebar_content {
   position: absolute;
   top: 50px;

app/assets/stylesheets/leaflet-all.css.scss

@@ -25,3 +25,14 @@ div.leaflet-marker-icon.location-filter.move-marker {
 .site .leaflet-popup p {
   margin: 0 0 20px 0;
 }
+
+.leaflet-left .leaflet-control {
+	margin-left: 0;
+}
+
+.leaflet-top {
+	margin-top: 16px;
+	.leaflet-control {
+		margin-top: 0;
+	}
+}

app/views/layouts/map.html.erb

@@ -27,6 +27,11 @@
       </div>
     <% end %>
 
+    <a id="ad" href="#">
+      <span class="ad-content">State of the Map 2014</span>
+      <span class="close">dismiss</span>
+    </a>
+
     <div id="sidebar_content">
       <% if STATUS == :database_offline or STATUS == :api_offline %>
         <p class="error"><%= t 'layouts.osm_offline' %></p>