Make term able to capture keys, fix prompt hiding

To capture keys 2 things have been done:

1. The terminal tag must be focusable. This way, we can capture keys
when a user clicks on the terminal, and stop when they focus on
something else. So far the most convenient way of doing this is with
`tabindex`, which also needs `outline: none` in some cases to remove
unsightly dotted outlines.
2. Each terminal should be individually identifiable, in order to attach
event handlers. A unique ID is now accessible to shells via `this.id`.

Also:

- Fix prompt hiding/showing not reflecting immediately sometimes.
- Change `background` to `background-color` to work with IE.

tags/terminal.tag

@@ -66,15 +66,24 @@
  *
  * The starting context name is `'default'`. Calling `'context_swap'` with:
  *
- * - a new name initialises a new, empty set.
- * - an existing name loads that set.
- * - no name returns to the `'default'` set.
+ * - a new name - initialises a new, empty set.
+ * - an existing name - loads that named set.
+ * - no name - returns to the `'default'` set.
+ *
+ * ### Terminal ID
+ *
+ * The observable also provides the id of the terminal tag via an `id` property.
+ * This can be used, for example, for attaching handlers:
+ *
+ *     document.getElementById(events.id).onkeypress = function() {}
+ *
  */
-<terminal>
+<terminal id={ id } tabindex='1'>
   <display welcome={ welcome } events={ this } />
   <commandline prompt={ prompt } events={ this } />
 
   <style>
+    terminal { outline: none; }
     terminal * { padding: 0; margin: 0; line-height: normal; font-size: 100%; }
   </style>
 
@@ -85,6 +94,7 @@
   var shell = window[opts.shell] ? new window[opts.shell](this) : {}
   this.welcome = shell.welcome || opts.welcome
   this.prompt = shell.prompt || opts.prompt
+  this.id = 'term-' + Math.floor(Math.random() * 10000)
 </terminal>
 
 <display>
@@ -150,8 +160,7 @@
     commandline input[name='command']:hover,
     commandline input[name='command']:focus {
       padding: 0; margin: 0; line-height: normal; font-size: 100%;
-      background: transparent;
-      border: none; outline: none;
+      background-color: transparent; border: none; outline: none;
       height: auto; width: 70%;
       display: inline;
     }
@@ -176,10 +185,12 @@
 
   ev.on('prompt_hide', function() {
     self.prompt.visible = false
+    self.update()
   })
 
   ev.on('prompt_show', function() {
     self.prompt.visible = true
+    self.update()
   })
 
   ev.on('context_swap', function(name) {