diff --git a/src/c3nav/editor/static/editor/css/editor.css b/src/c3nav/editor/static/editor/css/editor.css
index 821e4da3..b9016909 100644
--- a/src/c3nav/editor/static/editor/css/editor.css
+++ b/src/c3nav/editor/static/editor/css/editor.css
@@ -34,62 +34,6 @@ nav.navbar {
     margin:0;
 }
 
-form button.invisiblesubmit {
-    overflow: visible;
-    height: 0;
-    width: 0;
-    margin: 0;
-    border: 0;
-    padding: 0;
-    display: block;
-}
-
-.leaflet-container .leaflet-control-layers-expanded {
-    min-width:75px;
-}
-.leaflet-levels {
-    font-size:14px;
-    line-height:18px;
-}
-
-.leaflet-control-sections a, .leaflet-control-sections a:hover {
-    width: auto;
-    font-size: 14px;
-    padding: 0 7px;
-}
-.leaflet-touch .leaflet-control-sections a, .leaflet-touch .leaflet-control-sections a:hover {
-    width: auto;
-    height:36px;
-    line-height:37px;
-    font-size: 14px;
-    padding: 0 12px;
-}
-.leaflet-control-sections a, .leaflet-control-sections a:hover {
-    opacity:0;
-    margin-top:-26px;
-}
-.leaflet-touch .leaflet-control-sections a, .leaflet-touch .leaflet-control-sections a:hover {
-    margin-top:-36px;
-}
-.leaflet-control-sections a.current, .leaflet-control-sections-expanded a, .leaflet-control-sections-expanded a:hover,
-.leaflet-touch .leaflet-control-sections a.current, .leaflet-touch .leaflet-control-sections-expanded a,
-.leaflet-touch .leaflet-control-sections-expanded a:hover {
-    opacity:1;
-    margin-top:0;
-}
-.leaflet-control-sections:not(.leaflet-control-sections-expanded) a.current {
-    border-radius:4px;
-    border-width:0;
-}
-.leaflet-control-sections a.current {
-    font-weight:bold;
-}
-
-[data-sections] {
-    display:none;
-}
-
-
 #sidebar {
     position: absolute;
     top:0;
@@ -99,16 +43,19 @@ form button.invisiblesubmit {
     overflow: auto;
     background-color:#ffffff;
     z-index:2;
-}
-#sidebarcontent {
-    width:350px;
-    padding:10px 15px;
-    margin:auto;
-}
-#sidebarcontent.loading {
     background-image:url('/static/img/loader.gif');
     background-repeat:no-repeat;
     background-position:center;
+    transition: width 300ms;
+    -webkit-transition: width 300ms;
+}
+body:not(.map-enabled) #sidebar {
+    width:100%;
+}
+#sidebar .content {
+    width:350px;
+    padding:10px 15px;
+    margin:auto;
 }
 #sidebar form.creation-lock .btn.btn-primary {
     display:none;
@@ -166,11 +113,11 @@ legend {
         -webkit-transition: right 300ms;
         width:100vw;
     }
-    #sidebarcontent {
+    #sidebar .content {
         width:100%;
         max-width:500px;
     }
-    body:not(.controls) #sidebar {
+    body.show-map #sidebar {
         pointer-events: none;
         right:-100vw;
     }
@@ -179,7 +126,7 @@ legend {
         -webkit-transition: left 300ms;
         width:100vw;
     }
-    body.controls #map {
+    body:not(.show-map) #map {
         left:-100vw;
     }
 
@@ -196,13 +143,13 @@ legend {
       float: right;
     }
 
-    #show_map {
+    #show_details {
         display:none;
     }
-    body.controls #show_map {
+    body.show-map #show_details {
         display:block;
     }
-    body.controls #show_details {
+    body.show-map #show_map {
         display:none;
     }
     .navbar-nav {
@@ -216,3 +163,60 @@ legend {
         display:block !important;
     }
 }
+
+
+
+form button.invisiblesubmit {
+    overflow: visible;
+    height: 0;
+    width: 0;
+    margin: 0;
+    border: 0;
+    padding: 0;
+    display: block;
+}
+
+.leaflet-container .leaflet-control-layers-expanded {
+    min-width:75px;
+}
+.leaflet-levels {
+    font-size:14px;
+    line-height:18px;
+}
+
+.leaflet-control-sections a, .leaflet-control-sections a:hover {
+    width: auto;
+    font-size: 14px;
+    padding: 0 7px;
+}
+.leaflet-touch .leaflet-control-sections a, .leaflet-touch .leaflet-control-sections a:hover {
+    width: auto;
+    height:36px;
+    line-height:37px;
+    font-size: 14px;
+    padding: 0 12px;
+}
+.leaflet-control-sections a, .leaflet-control-sections a:hover {
+    opacity:0;
+    margin-top:-26px;
+}
+.leaflet-touch .leaflet-control-sections a, .leaflet-touch .leaflet-control-sections a:hover {
+    margin-top:-36px;
+}
+.leaflet-control-sections a.current, .leaflet-control-sections-expanded a, .leaflet-control-sections-expanded a:hover,
+.leaflet-touch .leaflet-control-sections a.current, .leaflet-touch .leaflet-control-sections-expanded a,
+.leaflet-touch .leaflet-control-sections-expanded a:hover {
+    opacity:1;
+    margin-top:0;
+}
+.leaflet-control-sections:not(.leaflet-control-sections-expanded) a.current {
+    border-radius:4px;
+    border-width:0;
+}
+.leaflet-control-sections a.current {
+    font-weight:bold;
+}
+
+[data-sections] {
+    display:none;
+}
diff --git a/src/c3nav/editor/static/editor/js/editor.js b/src/c3nav/editor/static/editor/js/editor.js
index e9eb2d6b..dbdcddba 100644
--- a/src/c3nav/editor/static/editor/js/editor.js
+++ b/src/c3nav/editor/static/editor/js/editor.js
@@ -28,10 +28,10 @@ editor = {
         L.control.scale({imperial: false}).addTo(editor.map);
 
         $('#show_map').click(function() {
-            $('body').removeClass('controls');
+            $('body').addClass('show-map');
         });
         $('#show_details').click(function() {
-            $('body').addClass('controls');
+            $('body').removeClass('show-map');
         });
 
         editor._section_control = new SectionControl().addTo(editor.map);
@@ -90,15 +90,14 @@ editor = {
     _sidebar_unload: function() {
         // unload the sidebar. called on sidebar_get and form submit.
         editor._section_control.disable();
-        $('#sidebarcontent').html('').addClass('loading');
+        $('#sidebar').addClass('loading').find('.content').html();
         editor._unhighlight_geometry();
         editor._cancel_editing();
     },
     _sidebar_loaded: function(data) {
         // sidebar was loaded. load the content. check if there are any redirects. call _check_start_editing.
         var content = $(data);
-        var sidebarcontent = $('#sidebarcontent');
-        sidebarcontent.html(content).removeClass('loading');
+        $('#sidebar').removeClass('loading').find('.content').html(content);
 
         redirect = $('span[data-redirect]');
         if (redirect.length) {
@@ -107,6 +106,7 @@ editor = {
         }
 
         sections = $('[data-sections]');
+        $('body').toggleClass('map-enabled', sections.length);
         if (sections.length) {
             var sections = sections.find('a');
             editor._section_control.clearSections();
@@ -121,13 +121,14 @@ editor = {
             }
             editor._section_control.show()
         } else {
+            $('body'y).removeClass('.show-map');
             editor._section_control.hide();
         }
 
         editor._check_start_editing();
     },
     _sidebar_error: function(data) {
-        $('#sidebarcontent').html('<h3>Error '+data.status+'</h3>'+data.statusText).removeClass('loading');
+        $('#sidebar').removeClass('loading').find('.content').html('<h3>Error '+data.status+'</h3>'+data.statusText);
         editor._section_control.hide();
     },
     _sidebar_link_click: function(e) {
@@ -173,8 +174,8 @@ editor = {
         editor._highlight_layer = L.layerGroup().addTo(editor.map);
         editor._editing_layer = L.layerGroup().addTo(editor.map);
 
-        $('#sidebarcontent').on('mouseenter', '.itemtable tr[data-name]', editor._hover_mapitem_row)
-                             .on('mouseleave', '.itemtable tr[data-name]', editor._unhighlight_geometry);
+        $('#sidebar .content').on('mouseenter', '.itemtable tr[data-name]', editor._hover_mapitem_row)
+                              .on('mouseleave', '.itemtable tr[data-name]', editor._unhighlight_geometry);
 
         editor.map.on('editable:drawing:commit', editor._done_creating);
         editor.map.on('editable:editing', editor._update_editing);
@@ -318,7 +319,7 @@ editor = {
     // edit and create geometries
     _check_start_editing: function() {
         // called on sidebar load. start editing or creating depending on how the sidebar may require it
-        var sidebarcontent = $('#sidebarcontent');
+        var sidebarcontent = $('#sidebar .content');
 
         var id_name = $('#id_name');
         id_name.focus();
@@ -410,7 +411,7 @@ editor = {
             editor._editing.addTo(editor._editing_layer);
             editor._editing.on('click', editor._click_editing_layer);
             editor._update_editing();
-            $('#sidebarcontent').find('form.creation-lock').removeClass('creation-lock');
+            $('#sidebar .content').find('form.creation-lock').removeClass('creation-lock');
             $('#id_name').focus();
         }
     },
@@ -521,6 +522,6 @@ SectionControl = L.Control.extend({
 });
 
 
-if ($('#sidebarcontent').length) {
+if ($('#sidebar').length) {
     editor.init();
 }
diff --git a/src/c3nav/editor/templates/editor/map.html b/src/c3nav/editor/templates/editor/map.html
index 4ac3ff76..9b55f097 100644
--- a/src/c3nav/editor/templates/editor/map.html
+++ b/src/c3nav/editor/templates/editor/map.html
@@ -12,8 +12,8 @@
 {% endblock %}
 {% block content %}
 <div id="map"></div>
-<div id="sidebar">
-    <div id="sidebarcontent" class="loading">
+<div id="sidebar" class="loading">
+    <div class="content">
         <span data-level-switch="{% url 'editor.mapitemtypes' level='LEVEL' %}"></span>
     </div>
 </div>