diff --git a/TODO.md b/TODO.md
index 01549fa..e2cc220 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,7 +1,6 @@
 # TODO for OSS
 * tests
 * Add file extensions ourselves to push state
-* Collapse CSS rules to get rid of the #key .box1 nonsense
 * add feedback for errors to UI - esp. too long
 * make sure file store still functions appropriately
 
diff --git a/static/application.css b/static/application.css
index 2316a59..2c73788 100644
--- a/static/application.css
+++ b/static/application.css
@@ -4,6 +4,8 @@ body {
 	margin: 0px;
 }
 
+/* textarea */
+
 textarea {
 	background: transparent;
 	border: 0px;
@@ -17,6 +19,8 @@ textarea {
 	font-size: 13px;
 }
 
+/* code box when locked */
+
 #box {
 	padding: 0px;
 	margin: 0px;
@@ -31,6 +35,8 @@ textarea {
 	background: transparent !important; /* don't hide hastebox */
 }
 
+/* key */
+
 #key {
 	position: fixed;
 	top: 0px;
@@ -38,30 +44,30 @@ textarea {
 	z-index: +1000; /* watch out */
 }
 
-#key .box1 {
+#box1 {
 	padding: 5px;
 	text-align: center;
 	background: #00222b;
 }
 
-#key .box2 {
+#box2 {
 	background: #08323c;
 	font-size: 0px;
 	padding: 0px 5px;
 }
 
-#key .box1 a.logo, #key .box1 a.logo:visited {
+#box1 a.logo, #box1 a.logo:visited {
 	display: inline-block;
 	background: url(logo.png);
 	width: 126px;
 	height: 42px;
 }
 
-#key .box1 a.logo:hover {
+#box1 a.logo:hover {
 	background-position: 0 bottom;
 }
 
-#key .box2 .function {
+#box2 .function {
 	background: url(function-icons.png);
 	width: 32px;
 	height: 37px;
@@ -69,11 +75,11 @@ textarea {
 	position: relative;
 }
 
-#key .box2 .link embed {
+#box2 .link embed {
 	vertical-align: bottom; /* fix for zeroClipboard style */
 }
 
-#key .box2 .function.enabled:hover {
+#box2 .function.enabled:hover {
 	cursor: hand;
 	cursor: pointer;
 }
@@ -90,7 +96,7 @@ textarea {
 	right: 0px;
 }
 
-#key .box3 {
+#box3 {
 	background: #173e48;
 	font-family: Helvetica, sans-serif;
 	font-size: 12px;
@@ -98,32 +104,32 @@ textarea {
 	padding: 10px 15px;
 }
 
-#key .box3 .label {
+#box3 .label {
 	color: #fff;
 	font-weight: bold;
 }
 
-#key .box3 .shortcut {
+#box3 .shortcut {
 	color: #c4dce3;
 	font-weight: normal;
 }
 
-#key .box2 .function.save { background-position: 0px top; }
-#key .box2 .function.enabled.save { background-position: 0px center; }
-#key .box2 .function.enabled.save:hover { background-position: 0px bottom; }
+#box2 .function.save { background-position: 0px top; }
+#box2 .function.enabled.save { background-position: 0px center; }
+#box2 .function.enabled.save:hover { background-position: 0px bottom; }
 
-#key .box2 .function.new { background-position: -32px top; }
-#key .box2 .function.enabled.new { background-position: -32px center; }
-#key .box2 .function.enabled.new:hover { background-position: -32px bottom; }
+#box2 .function.new { background-position: -32px top; }
+#box2 .function.enabled.new { background-position: -32px center; }
+#box2 .function.enabled.new:hover { background-position: -32px bottom; }
 
-#key .box2 .function.duplicate { background-position: -64px top; }
-#key .box2 .function.enabled.duplicate { background-position: -64px center; }
-#key .box2 .function.enabled.duplicate:hover { background-position: -64px bottom; }
+#box2 .function.duplicate { background-position: -64px top; }
+#box2 .function.enabled.duplicate { background-position: -64px center; }
+#box2 .function.enabled.duplicate:hover { background-position: -64px bottom; }
 
-#key .box2 .function.link { background-position: -96px top; }
-#key .box2 .function.enabled.link { background-position: -96px center; }
-#key .box2 .function.enabled.link:hover { background-position: -96px bottom; }
+#box2 .function.link { background-position: -96px top; }
+#box2 .function.enabled.link { background-position: -96px center; }
+#box2 .function.enabled.link:hover { background-position: -96px bottom; }
 
-#key .box2 .function.twitter { background-position: -128px top; }
-#key .box2 .function.enabled.twitter { background-position: -128px center; }
-#key .box2 .function.enabled.twitter:hover { background-position: -128px bottom; }
+#box2 .function.twitter { background-position: -128px top; }
+#box2 .function.enabled.twitter { background-position: -128px center; }
+#box2 .function.enabled.twitter:hover { background-position: -128px bottom; }
diff --git a/static/application.js b/static/application.js
index 7702031..13fa8b7 100644
--- a/static/application.js
+++ b/static/application.js
@@ -69,7 +69,7 @@ var haste = function(appName, options) {
   this.configureButtons();
   // If twitter is disabled, hide the button
   if (!options.twitter) {
-    $('#key .box2 .twitter').hide();
+    $('#box2 .twitter').hide();
   }
 };
 
@@ -94,7 +94,7 @@ haste.prototype.fullKey = function() {
 // Set the key up for certain things to be enabled
 haste.prototype.configureKey = function(enable) {
   var $this, i = 0;
-  $('#key .box2 .function').each(function() {
+  $('#box2 .function').each(function() {
     $this = $(this);
     for (i = 0; i < enable.length; i++) {
       if ($this.hasClass(enable[i])) {
@@ -197,7 +197,7 @@ haste.prototype.configureClip = function() {
   this.clipper.setCSSEffects(false);
   // and then set and show
   this.clipper.setText(window.location.href);
-  $('#key .box2 .link').html(this.clipper.getHTML(32, 37));
+  $('#box2 .link').html(this.clipper.getHTML(32, 37));
 };
 
 // hide the current clip, if it exists
@@ -205,14 +205,14 @@ haste.prototype.removeClip = function() {
   if (this.clipper) {
     this.clipper.destroy();
   }
-  $('#key .box2 .link').html('');
+  $('#box2 .link').html('');
 };
 
 haste.prototype.configureButtons = function() {
   var _this = this;
   this.buttons = [
     {
-      $where: $('#key .box2 .save'),
+      $where: $('#box2 .save'),
       label: 'Save',
       shortcutDescription: 'control + s',
       shortcut: function(evt) {
@@ -225,7 +225,7 @@ haste.prototype.configureButtons = function() {
       }
     },
     {
-      $where: $('#key .box2 .new'),
+      $where: $('#box2 .new'),
       label: 'New',
       shortcut: function(evt) {
         return evt.ctrlKey && evt.keyCode === 78  
@@ -236,7 +236,7 @@ haste.prototype.configureButtons = function() {
       }
     },
     {
-      $where: $('#key .box2 .duplicate'),
+      $where: $('#box2 .duplicate'),
       label: 'Duplicate & Edit',
       shortcut: function(evt) {
         return _this.doc.locked && evt.ctrlKey && evt.keyCode === 68;
@@ -247,7 +247,7 @@ haste.prototype.configureButtons = function() {
       }
     },
     {
-      $where: $('#key .box2 .twitter'),
+      $where: $('#box2 .twitter'),
       label: 'Twitter',
       shortcut: function(evt) {
         return _this.options.twitter && _this.doc.locked && evt.ctrlKey && evt.keyCode == 84;
@@ -258,7 +258,7 @@ haste.prototype.configureButtons = function() {
       }
     },
     {
-      $where: $('#key .box2 .link'),
+      $where: $('#box2 .link'),
       label: 'Copy URL',
       letBubble: true,
       action: function() { }
@@ -279,14 +279,14 @@ haste.prototype.configureButton = function(options) {
   });
   // Show the label
   options.$where.mouseenter(function(evt) {
-    $('#key .box3 .label').text(options.label);
-    $('#key .box3 .shortcut').text(options.shortcutDescription || '');
-    $('#key .box3').show();
+    $('#box3 .label').text(options.label);
+    $('#box3 .shortcut').text(options.shortcutDescription || '');
+    $('#box3').show();
     $(this).append($('#pointer').remove().show());
   });
   // Hide the label
   options.$where.mouseleave(function(evt) {
-    $('#key .box3').hide();
+    $('#box3').hide();
     $('#pointer').hide();
   });
 };
diff --git a/static/index.html b/static/index.html
index 8ab50e1..74cbf6b 100644
--- a/static/index.html
+++ b/static/index.html
@@ -43,17 +43,17 @@
 
 		<div id="key">
 		  <div id="pointer" style="display:none;"></div>
-			<div class="box1">
+			<div id="box1">
 				<a href="/about.md" class="logo"></a>
 			</div>
-			<div class="box2">
+			<div id="box2">
 				<div class="save function"></div>
 				<div class="new function"></div>
 				<div class="duplicate function"></div>
 				<div class="link function"></div>
 				<div class="twitter function"></div>
 			</div>
-			<div class="box3" style="display:none;">
+			<div id="box3" style="display:none;">
 				<div class="label"></div>
 				<div class="shortcut"></div>
 			</div>