Hide theme selector popup on interaction outside of it

Also set cursor to pointer on theme selector items.

src/theme/book.css

@@ -273,6 +273,7 @@ table thead td {
   padding: 2px 10px;
   line-height: 25px;
   white-space: nowrap;
+  cursor: pointer;
 }
 .theme-popup .theme:hover:first-child,
 .theme-popup .theme:hover:last-child {

src/theme/book.js

@@ -101,11 +101,20 @@ $( document ).ready(function() {
 
             $('.theme').click(function(){
                 var theme = $(this).attr('id');
-
                 set_theme(theme);
             });
         }
+    });
 
+    // Hide theme selector popup when clicking outside of it
+    $(document).click(function(event){
+        var popup = $('.theme-popup');
+        if(popup.length) {
+            var target = $(event.target);
+            if(!target.closest('.theme').length && !target.closest('#theme-toggle').length) {
+                popup.remove();
+            }
+        }
     });
 
     function set_theme(theme) {

src/theme/stylus/theme-popup.styl

@@ -12,6 +12,7 @@
         padding: 2px 10px
         line-height: 25px
         white-space: nowrap
+        cursor: pointer
 
         &:hover:first-child,
         &:hover:last-child {