diff --git a/index.html b/index.html
index 926a832..d852251 100755
--- a/index.html
+++ b/index.html
@@ -65,13 +65,46 @@
 	position: absolute;
 	box-sizing:border-box;
 	opacity: 0.8;
+
+
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	-o-transition: all 0.3s ease;
+	-ms-transition: all 0.3s ease;
+	transition: all 0.3s ease;
+
 }
 .editor .current-page-indicator {
 	display: block;
+}
 
-	/*
-	border: solid blue 10px;
-	*/
+.editor .right-button,
+.editor .left-button {
+	display: block;
+	position: relative;
+	width: 100px;
+	height: 100px;
+}
+.editor.page-fit-to-viewer .right-button,
+.editor.page-fit-to-viewer .left-button {
+	width: 50px;
+	height: 50px;
+}
+
+.editor .left-button {
+	float: left;
+	left: -50px;
+}
+.editor.page-fit-to-viewer .left-button {
+	left: 0px;
+}
+
+.editor .right-button {
+	float: right;
+	right: -50px;
+}
+.editor.page-fit-to-viewer .right-button {
+	right: 0px;
 }
 
 </style>
@@ -98,23 +131,23 @@
 function setupEditor(){
 	var indicator = $('.current-page-indicator')
 	// remove
-	$('<button>Remove</button>')
-		.appendTo(indicator)
-		.click(function(){
-			removePage()
-		})
-
-	$('<button>Shift Left</button>')
+	$('<button class="left-button">Shift Left</button>')
 		.appendTo(indicator)
 		.click(function(){
 			shiftPageLeft()
 		})
-	$('<button>Shift Right</button>')
+	$('<button class="right-button">Shift Right</button>')
 		.appendTo(indicator)
 		.click(function(){
 			shiftPageRight()
 		})
 
+	$('<button class="right-button">Remove</button>')
+		.appendTo(indicator)
+		.click(function(){
+			removePage()
+		})
+
 }
 function clearEditor(){
 	$('.current-page-indicator').children().remove()
@@ -151,15 +184,17 @@ $(document).ready(function(){
 					shift: prevPage	
 				},
 				// combined navigation with actions..
-				Up: function(){togglePageView()},
-				Down: function(){togglePageView()},
+				Up: function(){ togglePageView() },
+				Down: function(){ togglePageView() },
 
 				F: function(){ togglePageFitMode() },
-				E: function(){ toggleEditor() },
 				B: {
 					default: toggleBookmark,
 					ctrl: function(){ toggleThemes() },
 				},
+
+				// XXX this should not be in the production viewer...
+				E: function(){ toggleEditor() },
 			}
 		}, 
 		function(k){console.log(k)}))
diff --git a/lib/keyboard.js b/lib/keyboard.js
index 14c3408..6ffe756 100755
--- a/lib/keyboard.js
+++ b/lib/keyboard.js
@@ -56,9 +56,9 @@ var KEYBOARD_HANDLER_PROPAGATE = true
 
 /* Basic key format:
  *
- * 		<key-code> : <callback>,
+ * 		<key-def> : <callback>,
  *
- * 		<key-code> : {
+ * 		<key-def> : {
  * 			'default': <callback>,
  *			// a modifier can be any single modifier, like shift or a 
  *			// combination of modifers like 'ctrl+shift', given in order 
@@ -70,14 +70,20 @@ var KEYBOARD_HANDLER_PROPAGATE = true
  * 			<modifer>: [...]
  * 		},
  *
- * 		<key-code> : [
+ * 		<key-def> : [
  *			// this can be any type of handler except for an alias...
  * 			<handler>, 
  * 			<doc>
  * 		],
  *
  *		// alias...
- * 		<key-code-a> : <key-code-b>,
+ * 		<key-def-a> : <key-def-b>,
+ *
+ * <key-def> can be:
+ * 	- explicit key code
+ * 	- key name, if present in SPECIAL_KEYS)
+ * 	- key char (uppercase), as is returned by String.fromCharCode(...) 
+ *
  *
  * XXX might need to add meta information to generate sensible help...
  */