diff --git a/ui/css/editor.css b/ui/css/editor.css
index a565eb90..c87542cc 100755
--- a/ui/css/editor.css
+++ b/ui/css/editor.css
@@ -77,6 +77,7 @@
 	min-width: 10px;
 
 	background: white;
+	opacity: 0.95;
 
 	box-shadow: 5px 5px 30px -5px rgba(0, 0, 0, 0.3);
 }
@@ -89,6 +90,15 @@
 	border-left: solid 1px silver;
 }
 
+.side-panel.auto-hide {
+	width: 10px;
+	overflow: hidden;
+}
+.side-panel.auto-hide:hover {
+	width: auto;
+	overflow: visible;
+}
+
 
 /* main controls */
 .sub-panel .control {
diff --git a/ui/editor.js b/ui/editor.js
index 7028721a..9162998f 100755
--- a/ui/editor.js
+++ b/ui/editor.js
@@ -16,7 +16,7 @@
 function _setupPanel(panel){
 	return panel
 		.on('panelClosing', function(){
-			if($('.panel').length <= 1){
+			if($('.sub-panel').length <= 1){
 				// XXX when not only the editor is using the panels, this
 				// 		is not the correct way to go...
 				toggleEditor('off')
@@ -40,12 +40,14 @@ var toggleEditor = createCSSClassToggler(
 		function(action){
 			// XXX when not only the editor is using the panels, this
 			// 		is not the correct way to go...
-			var ed = $('.panel')
+			var ed = $('.panel, .side-panel')
 
 			if(action == 'on'){
 				// create the editor if this is first init...
 				if(ed.length == 0){
 					$('.viewer')
+						.append(makeSidePanel('left'))
+						.append(makeSidePanel('right'))
 						.append(_setupPanel(makeEditorControls('.current.image'))
 							//.draggable('option', 'snap', '.viewer')
 							.css({