kiteditor 1.0.1

data/vendor/assets/javascripts/mercury_loader.js

@@ -0,0 +1,193 @@
+/*!
+ * Mercury Editor is a CoffeeScript and jQuery based WYSIWYG editor.  Documentation and other useful information can be
+ * found at https://github.com/jejacks0n/mercury
+ *
+ * Supported browsers:
+ *   - Firefox 4+
+ *   - Chrome 10+
+ *   - Safari 5+
+ *
+ * Copyright (c) 2011 Jeremy Jackson
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+ * persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+ * Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+ * WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+ * OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ */
+
+// ## Default Packages
+//
+// Some default packages are provided for you.  If you want to define your own, feel free to do so before including this
+// script.  These, or your own packages can be specified to the loader in query params (read below for details).
+if (!window.mercuryPackages) window.mercuryPackages = {
+  development: {javascripts: 'mercury.js', stylesheets: 'mercury.css'},
+  bundled: {javascripts: 'javascripts/mercury.min.js,javascripts/mercury_dialogs.js', stylesheets: 'stylesheets/mercury.bundle.css'}
+};
+
+
+// ## Mercury Loader
+(function() {
+  // Useragent detection, which we use to determine if the client is supported.  We do this method instead of checking
+  // features because many of the features are supported in IE, but aren't implemented to the W3C spec.
+  var browser = {
+    webkit: /(webkit)[ \/]([\w.]+)/,
+    opera: /(opera)(?:.*version)?[ \/]([\w.]+)/,
+    msie: /(msie) ([\w.]+)/,
+    mozilla: /(mozilla)(?:.*? rv:([\w.]+))?/
+  };
+
+  var ua = navigator.userAgent.toLowerCase();
+  var match = browser.webkit.exec(ua) || browser.opera.exec(ua) || browser.msie.exec(ua) || ua.indexOf("compatible") < 0 && browser.mozilla.exec(ua) || [];
+  browser = {version: match[2] || "0" };
+  browser[match[1] || ""] = true;
+
+  // If the browser isn't supported, we don't try to do anything more.  We do direct userAgent detection here because IE
+  // thinks it's supported but isn't -- in part because it has it's own implementation of the contentEditable spec.
+  if (document.getElementsByTagName && document.getElementById && document.designMode && !browser.konqueror && !browser.msie) {
+    // supported
+  } else {
+    return;
+  }
+
+  // Default options, which can be overridden by specifying them in query params to the loader script.
+  // You can provide any additional options to the loader, and they will be passed to the PageEditor instance when it's
+  // created, so for instance you could put `visible=false`, and the editor be hidden after it's created.
+  var options = {
+    // A path or url from which the javascripts and css should be loaded.
+    src: '/assets',
+    // A value defined in the packages above.  Development is used by default.  If you want to provide your own package
+    // you can just define one before including this script.
+    pack: 'development'
+  };
+
+  // Hide the document during loading so there isn't a flicker while mercury is being loaded.
+  var head = document.getElementsByTagName("head")[0];
+  if (window == top) {
+    var style = document.createElement('style');
+    var rules = document.createTextNode('body{visibility:hidden;display:none}');
+    style.type = 'text/css';
+    if (style.styleSheet) style.styleSheet.cssText = rules.nodeValue;
+    else style.appendChild(rules);
+    head.appendChild(style);
+  }
+
+  // Because Mercury loads the document it's going to edit into an iframe we do some tweaks to the current document to
+  // make that feel more seamless.
+  function loadMercury() {
+    if (document.mercuryLoaded) return;
+    if (timer) window.clearTimeout(timer);
+    document.mercuryLoaded = true;
+
+    // If the current window is the top window, it means that Mercury hasn't been loaded yet.  So we load it.
+    if (window == top) {
+      var i;
+
+      // Find the loader script and determine what options were provided so the defaults can be overridden.  To provide
+      // options just pass them in as query params (eg. `mercury_loader.js?src=/asset_path&pack=bundled`)
+      var scripts = document.getElementsByTagName('script');
+      for (i = 0; i <= scripts.length - 1; i += 1) {
+        var match = scripts[i].src.match(/mercury_loader\.js\??(.*)?$/);
+        if (!match || !match[1]) continue;
+
+        match[1].replace(/([^&=]*)=([^&=]*)/g, function (m, attr, value) {
+          if (['true', 'false'].indexOf(value) >= 0) value = JSON.parse(value);
+          options[attr] = value;
+        });
+      }
+
+      var pack = window.mercuryPackages[options.pack];
+      setTimeout(function() {
+        // Once we're ready to load Mercury we clear the document contents, and add in the css and javascript tags.
+        // Once the script has loaded we display the body again, and instantiate a new instance of Mercury.PageEditor.
+        document.body.innerHTML = '<div style="height:0;overflow:hidden;">Mercury</div>';
+        for (i = 0; i <= document.styleSheets.length - 1; i += 1) {
+          document.styleSheets[i].disabled = true;
+        }
+
+        // Load all the stylesheets.
+        var stylesheets = pack.stylesheets.split(',');
+        for (i = 0; i <= stylesheets.length - 1; i += 1) {
+          var link = document.createElement('link');
+          link.href = options.src + '/' + stylesheets[i];
+          link.media = 'screen';
+          link.rel = 'stylesheet';
+          link.type = 'text/css';
+          head.appendChild(link);
+        }
+
+        // Load all the javascripts.
+        var javascripts = pack.javascripts.split(',');
+        var loaded = 0;
+        function loadScript(src) {
+          var script = document.createElement('script');
+          script.src = options.src + '/' + src;
+          script.type = 'text/javascript';
+          script.charset = 'utf-8';
+          head.appendChild(script);
+          script.onload = function() {
+            loaded += 1;
+            if (loaded >= javascripts.length) {
+              document.body.style.visibility = 'visible';
+              document.body.style.display = 'block';
+              // Instantiate the PageEditor, passing in the options that were provided to the loader.
+              new Mercury.PageEditor(null, options);
+              // If there's a mercuryLoaded function available, call it.   You can provide one before the loading script
+              // and it will be called after everything is loaded, but before everything is initialized.  You can bind
+              // to the mercury:ready event or use Mercury.bind('ready', function() {}).
+              if (typeof(window.mercuryLoaded) == 'function') {
+                window.mercuryLoaded();
+              }
+            } else {
+              loadScript(javascripts[loaded]);
+            }
+          };
+        }
+        loadScript(javascripts[loaded]);
+      }, 1);
+    } else if (top.Mercury) {
+      // Since this file will be included in the iframe as well, we use it to tell Mercury that the document is ready to
+      // be worked on.  By firing this event we're able to build the regions and get everything ready without having to
+      // wait for assets and slow javascripts to load or complete.
+      window.Mercury = top.Mercury;
+      Mercury.trigger('initialize:frame');
+    }
+  }
+
+  // This is a common technique for determining if the document has loaded yet, and is based on the methods used in
+  // Prototype.js.  The following portions just call loadMercury once it's appropriate to do so.
+  //
+  // Support for the DOMContentLoaded event is based on work by Dan Webb, Matthias Miller, Dean Edwards, John Resig,
+  // and Diego Perini.
+  var timer;
+  function checkReadyState() {
+    if (document.readyState === 'complete') {
+      document.stopObserving('readystatechange', checkReadyState);
+      loadMercury();
+    }
+  }
+
+  function pollDoScroll() {
+    try { document.documentElement.doScroll('left'); }
+    catch(e) {
+      timer = pollDoScroll.defer();
+      return;
+    }
+    loadMercury();
+  }
+
+  if (document.addEventListener) {
+    document.addEventListener('DOMContentLoaded', loadMercury, false);
+  } else {
+    document.observe('readystatechange', checkReadyState);
+    if (window == top) { timer = pollDoScroll.defer(); }
+  }
+})();

data/vendor/assets/javascripts/mercury_overrides.js

@@ -0,0 +1,6 @@
+/*!
+ * Mercury Editor is a Coffeescript and jQuery based WYSIWYG editor.  Documentation and other useful information can be
+ * found at https://github.com/jejacks0n/mercury
+ *
+ * This file is intended to provide a standard way to override or add JS that comes default with Mercury Editor.
+ */

data/vendor/assets/javascripts/popup.js

@@ -0,0 +1,8 @@
+//= require jquery
+//= require jquery.purr
+//= require best_in_place
+
+$(document).ready(function() {
+  $('.best_in_place').best_in_place();
+});
+

data/vendor/assets/stylesheets/mercury/all_images.css.erb

@@ -0,0 +1,89 @@
+/*
+ * mercury.css
+ *----------------------------------------------------------------------------*/
+form fieldset.buttons .commit input {
+  background-image: url(<%= asset_path 'mercury/button.png' %>);
+}
+/*
+ * dialog.css
+ *----------------------------------------------------------------------------*/
+.mercury-dialog.loading,
+.mercury-select.loading,
+.mercury-palette.loading {
+  background-image: url(<%= asset_path 'mercury/loading-light.gif' %>);
+}
+.mercury-panel.loading {
+  background-image: url(<%= asset_path 'mercury/loading-dark.gif' %>);
+}
+.mercury-panel h1 a.mercury-panel-close {
+  background-image: url(<%= asset_path 'mercury/close.png' %>);
+}
+.mercury-snippet-panel input.filter {
+  background-image: url(<%= asset_path 'mercury/search-icon.png' %>);
+  background-position: 4px center;
+}
+/*
+ * lightview.css
+ *----------------------------------------------------------------------------*/
+.mercury-lightview.loading {
+  background-image: url(<%= asset_path 'mercury/loading-dark.gif' %>);
+}
+.mercury-lightview h1.mercury-lightview-title a.mercury-lightview-close {
+  background-image: url(<%= asset_path 'mercury/close.png' %>);
+}
+#mercury_about {
+  background-image: url(<%= asset_path 'mercury/temp-logo.png' %>);
+  background-position: 0 0;
+}
+/*
+ * modal.css
+ *----------------------------------------------------------------------------*/
+.mercury-modal.loading .mercury-modal-content-container {
+  background-image: url(<%= asset_path 'mercury/loading-light.gif' %>);
+}
+/*
+ * toolbar.css
+ *----------------------------------------------------------------------------*/
+.mercury-primary-toolbar .mercury-button.pressed {
+  background-image: url(<%= asset_path 'mercury/toolbar/primary/_pressed.png' %>);
+  background-position: top center;
+}
+.mercury-primary-toolbar .mercury-toolbar-expander {
+  background-image: url(<%= asset_path 'mercury/toolbar/primary/_expander.png' %>);
+  background-position: center 90%;
+}
+.mercury-primary-toolbar .mercury-save-button em,
+.mercury-expander-button[data-button=save] em             { background-image: url(<%= asset_path 'mercury/toolbar/primary/save.png' %>) }
+.mercury-primary-toolbar .mercury-preview-button em,
+.mercury-expander-button[data-button=preview] em          { background-image: url(<%= asset_path 'mercury/toolbar/primary/preview.png' %>) }
+.mercury-primary-toolbar .mercury-undo-button em,
+.mercury-expander-button[data-button=undo] em             { background-image: url(<%= asset_path 'mercury/toolbar/primary/undo.png' %>) }
+.mercury-primary-toolbar .mercury-redo-button em,
+.mercury-expander-button[data-button=redo] em             { background-image: url(<%= asset_path 'mercury/toolbar/primary/redo.png' %>) }
+.mercury-primary-toolbar .mercury-insertLink-button em,
+.mercury-expander-button[data-button=insertLink] em       { background-image: url(<%= asset_path 'mercury/toolbar/primary/insertlink.png' %>) }
+.mercury-primary-toolbar .mercury-insertMedia-button em,
+.mercury-expander-button[data-button=insertMedia] em      { background-image: url(<%= asset_path 'mercury/toolbar/primary/insertmedia.png' %>) }
+.mercury-primary-toolbar .mercury-insertTable-button em,
+.mercury-expander-button[data-button=insertTable] em      { background-image: url(<%= asset_path 'mercury/toolbar/primary/inserttable.png' %>) }
+.mercury-primary-toolbar .mercury-insertCharacter-button em,
+.mercury-expander-button[data-button=insertCharacter] em  { background-image: url(<%= asset_path 'mercury/toolbar/primary/insertcharacter.png' %>) }
+.mercury-primary-toolbar .mercury-snippetPanel-button em,
+.mercury-expander-button[data-button=snippetPanel] em     { background-image: url(<%= asset_path 'mercury/toolbar/primary/snippetpanel.png' %>) }
+.mercury-primary-toolbar .mercury-historyPanel-button em,
+.mercury-expander-button[data-button=historyPanel] em     { background-image: url(<%= asset_path 'mercury/toolbar/primary/historypanel.png' %>) }
+.mercury-primary-toolbar .mercury-notesPanel-button em,
+.mercury-expander-button[data-button=notesPanel] em       { background-image: url(<%= asset_path 'mercury/toolbar/primary/notespanel.png' %>) }
+.mercury-editable-toolbar .mercury-button {
+  background-image: url(<%= asset_path 'mercury/toolbar/editable/buttons.png' %>);
+}
+.mercury-editable-toolbar .mercury-button em {
+  background-image: url(<%= asset_path 'mercury/toolbar/editable/buttons.png' %>);
+}
+
+.mercury-snippet-toolbar .mercury-button {
+  background-image: url(<%= asset_path 'mercury/toolbar/snippetable/buttons.png' %>);
+}
+.mercury-snippet-toolbar .mercury-button em {
+  background-image: url(<%= asset_path 'mercury/toolbar/snippetable/buttons.png' %>);
+}

data/vendor/assets/stylesheets/mercury/dialog.css

@@ -0,0 +1,208 @@
+/*
+ * Dialogs
+ *----------------------------------------------------------------------------*/
+.mercury-dialog,
+.mercury-select,
+.mercury-palette {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  position: absolute;
+  z-index: 10012;
+  width: 30px;
+  height: 30px;
+  border: 1px solid #727272;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  margin-top: -1px;
+  background-color: #E2E1E2;
+	box-shadow: 1px 1px 4px rgba(0,0,0, .5);
+	-moz-box-shadow: 1px 1px 4px rgba(0,0,0, .5);
+  font-family: Helvetica, Tahoma, Arial, sans-serif;
+  font-size: 8.5pt;
+}
+.mercury-dialog.loading,
+.mercury-select.loading,
+.mercury-palette.loading {
+  background-repeat: no-repeat;
+  background-position: center;
+}
+/*
+ * Selects
+ *----------------------------------------------------------------------------*/
+.mercury-select {
+  border-radius: 4px;
+  -moz-border-radius: 4px;
+  overflow: auto;
+  background-color: #FFF;
+}
+/*
+ * Panels
+ *----------------------------------------------------------------------------*/
+.mercury-panel {
+  position: absolute;
+  z-index: 10011;
+  background-color: #111;
+  opacity: .9;
+  box-shadow: 1px 1px 4px rgba(0,0,0, .5);
+  -moz-box-shadow: 1px 1px 4px rgba(0,0,0, .5);
+  border-radius: 4px;
+  -moz-border-radius: 4px;
+  color: #FFF;
+  font-family: Helvetica, Tahoma, Arial, sans-serif;
+  font-size: 9.5pt;
+  max-width: 500px;
+}
+.mercury-panel.loading {
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.mercury-panel h1,
+.mercury-panel h3 {
+  font-size: 9pt;
+  padding: 10px 15px 8px;
+  margin: 0;
+  background: #333;
+  white-space: nowrap;
+}
+.mercury-panel h1 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  font-size: 10pt;
+  -moz-border-radius-topleft: 4px;
+  -moz-border-radius-topright: 4px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  height: 15px;
+  cursor: move;
+  text-shadow: 1px 1px 2px rgba(0,0,0, .9);
+}
+.mercury-panel h1 a.mercury-panel-close {
+  position: absolute;
+  right: -5px;
+  top: -4px;
+  width: 42px;
+  height: 42px;
+  cursor: default;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.mercury-panel h4,
+.mercury-panel h5,
+.mercury-panel h6 {
+  margin: 0;
+}
+.mercury-panel .mercury-panel-pane {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  padding: 15px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 100%;
+}
+.mercury-panel .mercury-panel-pane h3 {
+  margin: 10px -15px;
+  font-size: 9.5pt;
+  font-weight: normal;
+  padding: 8px 14px;
+}
+/*
+ * Specific Dialogs (eg. color palettes, selects)
+ *----------------------------------------------------------------------------*/
+.mercury-color-picker {
+  width: 170px;
+  height: auto;
+  padding: 1px;
+  cursor: default;
+}
+.mercury-color-picker .picker {
+  float: left;
+  width: 15px;
+  height: 15px;
+  margin: 1px;
+}
+.mercury-color-picker .picker:hover {
+  outline: 1px solid #333;
+}
+.mercury-color-picker .last-picked {
+  position: relative;
+  top: 1px;
+  width: 166px;
+  border: 1px solid #333;
+  border-radius: 2px;
+  margin: 1px 1px 2px 1px;
+  -moz-border-radius: 2px;
+  clear: left;
+  text-align: center;
+}
+.mercury-select-options {
+  margin: 10px 0;
+  white-space: nowrap;
+}
+.mercury-select-options * {
+  cursor: default;
+  padding: 0 10px;
+  margin: 0;
+  line-height: 1.6em;
+}
+.mercury-select-options div:hover,
+.mercury-select-options h1:hover,
+.mercury-select-options h2:hover,
+.mercury-select-options h3:hover,
+.mercury-select-options h4:hover,
+.mercury-select-options h5:hover,
+.mercury-select-options h6:hover,
+.mercury-select-options pre:hover {
+  background-color: #E2E1E2 !important;
+  color: #000 !important;
+}
+.mercury-select-options div[data-tag=pre] {
+  font-family: monospace;
+}
+/*
+ * Specific Panels (eg. snippets, notes, todos)
+ *----------------------------------------------------------------------------*/
+.mercury-snippet-panel {
+  width: 300px;
+}
+.mercury-snippet-panel input.filter {
+  outline: none;
+  font-size: 1em;
+  border-radius: 30px;
+  moz-border-radius: 30px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  width: 100%;
+  padding-left: 20px;
+  background-color: #FFF;
+  background-repeat: no-repeat;
+}
+.mercury-snippet-panel ul {
+  font-size: .9em;
+  padding: 10px 0 0 0;
+  margin: 0;
+  list-style-type: none;
+}
+.mercury-snippet-panel ul li {
+  clear: both;
+  padding-top: 20px;
+}
+.mercury-snippet-panel ul li img {
+  float: left;
+}
+.mercury-snippet-panel ul li h4,
+.mercury-snippet-panel ul li .description {
+  float: right;
+  width: 245px;
+}
+.mercury-snippet-panel ul li h4 {
+  margin-bottom: 5px;
+}
+/* history / notes */
+.mercury-history-panel,
+.mercury-notes-panel {
+  width: 250px;
+}

data/vendor/assets/stylesheets/mercury/lightview.css

@@ -0,0 +1,151 @@
+/*
+ * Lightview
+ *----------------------------------------------------------------------------*/
+.mercury-lightview-overlay {
+  position: fixed;
+  z-index: 10030;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  display: none;
+  background: rgba(0, 0, 0, .65);
+}
+.mercury-lightview {
+  position: fixed;
+  z-index: 10040;
+  top: 20px;
+  background: #000;
+  opacity: 0;
+  overflow: hidden;
+  display: none;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, .9);
+  box-shadow: 0 0 40px rgba(0, 0, 0, .9);
+  font: normal normal normal 12px/normal Helvetica, Tahoma, Arial, sans-serif;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #CCC;
+}
+.mercury-lightview.loading {
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.mercury-lightview .mercury-lightview-content {
+  padding: 10px 20px 20px;
+}
+.mercury-lightview h1.mercury-lightview-title {
+  margin: 0;
+  padding: 10px 20px 8px;
+  border-bottom: 1px solid #222;
+  color: #FFF;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  font-size: 10pt;
+  white-space: nowrap;
+  text-shadow: 1px 1px 2px rgba(100, 100, 100, .5);
+}
+.mercury-lightview h1.mercury-lightview-title a.mercury-lightview-close {
+  float: right;
+  width: 32px;
+  height: 42px;
+  margin: -14px -20px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.mercury-lightview .mercury-display-pane-container {
+  overflow: auto;
+  margin: -10px -20px 0;
+  padding: 20px 20px 10px;
+}
+.mercury-lightview .mercury-display-pane-container .mercury-display-pane {
+  float: left;
+}
+.mercury-lightview .mercury-display-controls {
+  padding: 15px 0 0;
+  border-top: 1px solid #333;
+  text-align: right;
+}
+/*
+ * Forms
+ *----------------------------------------------------------------------------*/
+.mercury-lightview form fieldset {
+  background: #111;
+  border: 1px solid #333;
+}
+.mercury-lightview form fieldset.buttons {
+  background: none;
+  border: none;
+}
+.mercury-lightview form select,
+.mercury-lightview form input[type="text"],
+.mercury-lightview form input[type="password"],
+.mercury-lightview form textarea,
+.mercury-lightview form input.text {
+  background: #444;
+  color: #FFF;
+  border: 2px solid #555;
+  -moz-box-shadow: inset 0 0 3px #000000;
+  -webkit-box-shadow: inset 0 0 3px #000000;
+  box-shadow: inset 0 0 3px #000000;
+}
+.mercury-lightview form input[type="button"] {
+  border: 2px solid #555;
+  border-radius: 4px;
+  background: #222;
+  color: #FFF;
+}
+.mercury-lightview hr {
+  border-color: #333;
+}
+/*
+ * Specific Lightviews
+ *----------------------------------------------------------------------------*/
+/* about mercury */
+#mercury_about {
+  width: 300px;
+  min-height: 100px;
+  font-size: 1.1em;
+  background-repeat: no-repeat;
+}
+#mercury_about ul {
+  float: left;
+  list-style: none;
+  padding: 0;
+  margin: 118px 0 0 0;
+  width: 120px;
+  text-align: center;
+}
+#mercury_about p {
+  margin: 0;
+  float: right;
+  width: 175px;
+}
+#mercury_about a {
+  color: #09F;
+}
+#mercury_about a:hover {
+  color: #FFF;
+}
+/* character */
+.mercury-lightview #mercury_character .character {
+  border: 1px solid #444;
+  background: #222;
+}
+.mercury-lightview #mercury_character .character:hover {
+  background: #555;
+  border: 1px solid #CCC;
+}
+/* table */
+.mercury-lightview #mercury_table #table_display {
+  background: #222;
+  border: 1px solid #444;
+  height: 301px;
+}
+.mercury-lightview #mercury_table #table_display td.selected {
+  background: #09F;
+}