switching to node couchapp structure, redoing headers mapreduce

2011-06-20 17:45:19 -07:00
parent 25db477531
commit ae9f0b17f2
23 changed files with 105 additions and 207 deletions
--- a/attachments/images/bg_gradient.gif
+++ b/attachments/images/bg_gradient.gif
--- a/attachments/images/css3buttons_backgrounds.png
+++ b/attachments/images/css3buttons_backgrounds.png
--- a/attachments/images/css3buttons_icons.png
+++ b/attachments/images/css3buttons_icons.png
--- a/attachments/images/loader-blue.gif
+++ b/attachments/images/loader-blue.gif
--- a/attachments/images/loader.gif
+++ b/attachments/images/loader.gif
--- a/attachments/pages/index.html
+++ b/attachments/pages/index.html
@@ -0,0 +1,157 @@
+<!doctype html> 
+<html lang="en"> 
+<head> 
+	<meta charset="utf-8"> 
+	<title>CouchDB Data Import/Export</title> 
+	<link rel="stylesheet" href="style/reset.css" media="screen">
+	<link rel="stylesheet" href="style/demo.css" media="screen">
+	<link rel="stylesheet" href="style/css3buttons.css" media="screen"> 
+	<script type="text/javascript" src="script/jquery-1.5.min.js"></script>
+	<script type="text/javascript" src="script/jquery.mustache.js"></script>
+  <script type="text/javascript">
+    $(function() {
+      
+      function inVhost() {
+        var vhost = false;
+        if ( document.location.pathname.indexOf( "_design" ) === -1 ) {
+          vhost = true;
+        }
+        return vhost;
+      }
+      
+      var config = {
+          db: "api" // relative vhost links defined in rewrites.json
+        , design: "ddoc"
+        , vhost: true
+        , baseURL: "/"
+        , host: window.location.href.split( "/" )[ 2 ]
+      }
+      
+      if ( !inVhost() ) {
+        config.vhost = false
+        config.db = document.location.href.split( '/' )[ 3 ];
+        config.design = unescape( document.location.href ).split( '/' )[ 5 ];
+        config.baseURL = "/" + config.db + "/_design/" + config.design + "/_rewrite/";
+      }
+
+      var csvUrl;
+      
+      /** uses $.mustache to render a template out to a target DOM
+       *  template == camelcase ID (minus the word Template) of the DOM object containg your mustache template
+       *  target == ID of the DOM node you wish to render the template into
+       *  data == data object to pass into the mustache template when rendering
+       */
+      function render( template, target, data ) {
+        if ( !data ) var data = {};
+        $( "#" + target ).html( $.mustache( $( "#" + template + "Template" ).text(), data ) );        
+      }
+      
+      function formatDiskSize(bytes) {
+        return (parseFloat(bytes)/1024/1024).toString().substr(0,4) + "MB"
+      }
+      
+      function gotDb( dbInfo ) {
+                        
+        $.extend(dbInfo, {
+          "host": window.location.host,
+          "disk_size": formatDiskSize(dbInfo.disk_size)
+        });
+                
+        if( config.vhost ) dbInfo.db_name = "api";
+        
+        render( 'db', 'stats', dbInfo );
+        render( 'bulk', 'bulk', dbInfo );
+        render( 'generating', 'download' );
+        
+        function gotHeaders( headers ) {        
+          csvUrl =  config.baseURL + 'csv?headers=' + headers;
+          render( 'actions', 'actions', $.extend(dbInfo, {url: csvUrl}) );          
+        }        
+
+        $.get( config.baseURL + 'headers', gotHeaders );
+        
+      }
+      
+      $.getJSON( config.baseURL + "api", gotDb );
+      
+      $( '.csv' ).live('click', ( function( e ) {      
+        window.location.href = csvUrl;
+        e.preventDefault();
+      }))
+      
+    })
+  </script>
+</head> 
+<body>
+	<div class="container">
+		<header>
+			<h1 id="title">CouchDB Data Import/Export</h1>
+		</header>
+		
+		<div id="main">
+			<section class="odd">
+        				
+				<p>
+        <div id="stats"></div>
+        </p>
+        
+				<h3>Downloading</h3>
+				<div id="actions"><p><div class="loading">Preprocessing CSV - Please wait...</div></p></div>
+				
+				<h3>Uploading</h3>
+        <p>You can bulk upload an array of JSON documents to a Couch via HTTP POST. Make sure that they are formatted one document per line:</p>
+        <p>
+        <pre><code>  {
+    "docs": [
+      {"name": "barry", "type": "human"},
+      {"name": "carl",  "type": "human"},
+      {"name": "ethel", "type": "robot"}
+    ]
+  }</code></pre>
+        </p>
+        <p>POST to this URL:</p>
+        <pre class="code" id="bulk"></pre>
+			</section>
+		</div>
+		
+		<footer>
+			<a href='https://github.com/maxogden/removalist'>Fork this project on Github</a>. The <a href="http://github.com/michenriksen/css3buttons">pretty CSS3 Buttons</a> were created by <a href="http://michaelhenriksen.dk" title="Website of Michael Henriksen">Michael Henriksen</a>
+		</footer>
+	</div>
+
+  <script type='text/mustache' id="dbTemplate">
+    <div id="database" class="single_database">
+      <div class="group" id="current-head-database">
+        <table width="100%" cellspacing="0" cellpadding="0">
+          <tbody>
+            <tr class="database_oneline action">
+              <td class="date">
+                <nobr>db</nobr>
+              </td>
+              <td class="message">
+                <code><a href="http://{{host}}/{{db_name}}">http://{{host}}/<strong>{{db_name}}</strong></a> </code>
+              </td>
+              <td class="database">
+                size&nbsp;{{disk_size}}
+              </td>
+              <td class="tree">
+                docs&nbsp;<a href="http://{{host}}/{{db_name}}/_all_docs?include_docs=true" hotkey="t">{{doc_count}}</a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </script>
+  
+  <script type='text/mustache' id="actionsTemplate">
+    <p><a href="javascript:void(false)" class="primary button csv"><span class="downarrow icon"></span>Download CSV</a></p>
+    <p>Or use this URL to get a CSV:</p>
+    <p><pre class="code" id="download">http://{{host}}{{url}}</pre></p>
+  </script>
+  
+  <script type='text/mustache' id="bulkTemplate">http://{{host}}/{{db_name}}/_bulk_docs</script>
+  <script type='text/mustache' id="generatingTemplate"><div class="loading">Precomputing CSV...</div></script>
+  
+</body>
+</html>
--- a/attachments/script/jquery-1.5.min.js
+++ b/attachments/script/jquery-1.5.min.js
--- a/attachments/script/jquery.mustache.js
+++ b/attachments/script/jquery.mustache.js
@@ -0,0 +1,346 @@
+/*
+Shameless port of a shameless port
+@defunkt => @janl => @aq
+ 
+See http://github.com/defunkt/mustache for more info.
+*/
+ 
+;(function($) {
+
+/*
+  mustache.js — Logic-less templates in JavaScript
+
+  See http://mustache.github.com/ for more info.
+*/
+
+var Mustache = function() {
+  var Renderer = function() {};
+
+  Renderer.prototype = {
+    otag: "{{",
+    ctag: "}}",
+    pragmas: {},
+    buffer: [],
+    pragmas_implemented: {
+      "IMPLICIT-ITERATOR": true
+    },
+    context: {},
+
+    render: function(template, context, partials, in_recursion) {
+      // reset buffer & set context
+      if(!in_recursion) {
+        this.context = context;
+        this.buffer = []; // TODO: make this non-lazy
+      }
+
+      // fail fast
+      if(!this.includes("", template)) {
+        if(in_recursion) {
+          return template;
+        } else {
+          this.send(template);
+          return;
+        }
+      }
+
+      template = this.render_pragmas(template);
+      var html = this.render_section(template, context, partials);
+      if(in_recursion) {
+        return this.render_tags(html, context, partials, in_recursion);
+      }
+
+      this.render_tags(html, context, partials, in_recursion);
+    },
+
+    /*
+      Sends parsed lines
+    */
+    send: function(line) {
+      if(line != "") {
+        this.buffer.push(line);
+      }
+    },
+
+    /*
+      Looks for %PRAGMAS
+    */
+    render_pragmas: function(template) {
+      // no pragmas
+      if(!this.includes("%", template)) {
+        return template;
+      }
+
+      var that = this;
+      var regex = new RegExp(this.otag + "%([\\w-]+) ?([\\w]+=[\\w]+)?" +
+            this.ctag);
+      return template.replace(regex, function(match, pragma, options) {
+        if(!that.pragmas_implemented[pragma]) {
+          throw({message: 
+            "This implementation of mustache doesn't understand the '" +
+            pragma + "' pragma"});
+        }
+        that.pragmas[pragma] = {};
+        if(options) {
+          var opts = options.split("=");
+          that.pragmas[pragma][opts[0]] = opts[1];
+        }
+        return "";
+        // ignore unknown pragmas silently
+      });
+    },
+
+    /*
+      Tries to find a partial in the curent scope and render it
+    */
+    render_partial: function(name, context, partials) {
+      name = this.trim(name);
+      if(!partials || partials[name] === undefined) {
+        throw({message: "unknown_partial '" + name + "'"});
+      }
+      if(typeof(context[name]) != "object") {
+        return this.render(partials[name], context, partials, true);
+      }
+      return this.render(partials[name], context[name], partials, true);
+    },
+
+    /*
+      Renders inverted (^) and normal (#) sections
+    */
+    render_section: function(template, context, partials) {
+      if(!this.includes("#", template) && !this.includes("^", template)) {
+        return template;
+      }
+
+      var that = this;
+      // CSW - Added "+?" so it finds the tighest bound, not the widest
+      var regex = new RegExp(this.otag + "(\\^|\\#)\\s*(.+)\\s*" + this.ctag +
+              "\n*([\\s\\S]+?)" + this.otag + "\\/\\s*\\2\\s*" + this.ctag +
+              "\\s*", "mg");
+
+      // for each {{#foo}}{{/foo}} section do...
+      return template.replace(regex, function(match, type, name, content) {
+        var value = that.find(name, context);
+        if(type == "^") { // inverted section
+          if(!value || that.is_array(value) && value.length === 0) {
+            // false or empty list, render it
+            return that.render(content, context, partials, true);
+          } else {
+            return "";
+          }
+        } else if(type == "#") { // normal section
+          if(that.is_array(value)) { // Enumerable, Let's loop!
+            return that.map(value, function(row) {
+              return that.render(content, that.create_context(row),
+                partials, true);
+            }).join("");
+          } else if(that.is_object(value)) { // Object, Use it as subcontext!
+            return that.render(content, that.create_context(value),
+              partials, true);
+          } else if(typeof value === "function") {
+            // higher order section
+            return value.call(context, content, function(text) {
+              return that.render(text, context, partials, true);
+            });
+          } else if(value) { // boolean section
+            return that.render(content, context, partials, true);
+          } else {
+            return "";
+          }
+        }
+      });
+    },
+
+    /*
+      Replace {{foo}} and friends with values from our view
+    */
+    render_tags: function(template, context, partials, in_recursion) {
+      // tit for tat
+      var that = this;
+
+      var new_regex = function() {
+        return new RegExp(that.otag + "(=|!|>|\\{|%)?([^\\/#\\^]+?)\\1?" +
+          that.ctag + "+", "g");
+      };
+
+      var regex = new_regex();
+      var tag_replace_callback = function(match, operator, name) {
+        switch(operator) {
+        case "!": // ignore comments
+          return "";
+        case "=": // set new delimiters, rebuild the replace regexp
+          that.set_delimiters(name);
+          regex = new_regex();
+          return "";
+        case ">": // render partial
+          return that.render_partial(name, context, partials);
+        case "{": // the triple mustache is unescaped
+          return that.find(name, context);
+        default: // escape the value
+          return that.escape(that.find(name, context));
+        }
+      };
+      var lines = template.split("\n");
+      for(var i = 0; i < lines.length; i++) {
+        lines[i] = lines[i].replace(regex, tag_replace_callback, this);
+        if(!in_recursion) {
+          this.send(lines[i]);
+        }
+      }
+
+      if(in_recursion) {
+        return lines.join("\n");
+      }
+    },
+
+    set_delimiters: function(delimiters) {
+      var dels = delimiters.split(" ");
+      this.otag = this.escape_regex(dels[0]);
+      this.ctag = this.escape_regex(dels[1]);
+    },
+
+    escape_regex: function(text) {
+      // thank you Simon Willison
+      if(!arguments.callee.sRE) {
+        var specials = [
+          '/', '.', '*', '+', '?', '|',
+          '(', ')', '[', ']', '{', '}', '\\'
+        ];
+        arguments.callee.sRE = new RegExp(
+          '(\\' + specials.join('|\\') + ')', 'g'
+        );
+      }
+      return text.replace(arguments.callee.sRE, '\\$1');
+    },
+
+    /*
+      find `name` in current `context`. That is find me a value
+      from the view object
+    */
+    find: function(name, context) {
+      name = this.trim(name);
+
+      // Checks whether a value is thruthy or false or 0
+      function is_kinda_truthy(bool) {
+        return bool === false || bool === 0 || bool;
+      }
+
+      var value;
+      if(is_kinda_truthy(context[name])) {
+        value = context[name];
+      } else if(is_kinda_truthy(this.context[name])) {
+        value = this.context[name];
+      }
+
+      if(typeof value === "function") {
+        return value.apply(context);
+      }
+      if(value !== undefined) {
+        return value;
+      }
+      // silently ignore unkown variables
+      return "";
+    },
+
+    // Utility methods
+
+    /* includes tag */
+    includes: function(needle, haystack) {
+      return haystack.indexOf(this.otag + needle) != -1;
+    },
+
+    /*
+      Does away with nasty characters
+    */
+    escape: function(s) {
+      s = String(s === null ? "" : s);
+      return s.replace(/&(?!\w+;)|["<>\\]/g, function(s) {
+        switch(s) {
+        case "&": return "&amp;";
+        case "\\": return "\\\\";
+        case '"': return '\"';
+        case "<": return "&lt;";
+        case ">": return "&gt;";
+        default: return s;
+        }
+      });
+    },
+
+    // by @langalex, support for arrays of strings
+    create_context: function(_context) {
+      if(this.is_object(_context)) {
+        return _context;
+      } else {
+        var iterator = ".";
+        if(this.pragmas["IMPLICIT-ITERATOR"]) {
+          iterator = this.pragmas["IMPLICIT-ITERATOR"].iterator;
+        }
+        var ctx = {};
+        ctx[iterator] = _context;
+        return ctx;
+      }
+    },
+
+    is_object: function(a) {
+      return a && typeof a == "object";
+    },
+
+    is_array: function(a) {
+      return Object.prototype.toString.call(a) === '[object Array]';
+    },
+
+    /*
+      Gets rid of leading and trailing whitespace
+    */
+    trim: function(s) {
+      return s.replace(/^\s*|\s*$/g, "");
+    },
+
+    /*
+      Why, why, why? Because IE. Cry, cry cry.
+    */
+    map: function(array, fn) {
+      if (typeof array.map == "function") {
+        return array.map(fn);
+      } else {
+        var r = [];
+        var l = array.length;
+        for(var i = 0; i < l; i++) {
+          r.push(fn(array[i]));
+        }
+        return r;
+      }
+    }
+  };
+
+  return({
+    name: "mustache.js",
+    version: "0.3.1-dev",
+
+    /*
+      Turns a template and view into HTML
+    */
+    to_html: function(template, view, partials, send_fun) {
+      var renderer = new Renderer();
+      if(send_fun) {
+        renderer.send = send_fun;
+      }
+      renderer.render(template, view, partials);
+      if(!send_fun) {
+        return renderer.buffer.join("\n");
+      }
+    },
+    escape : function(text) {
+      return new Renderer().escape(text);
+    }
+  });
+}();
+
+  $.mustache = function(template, view, partials) {
+    return Mustache.to_html(template, view, partials);
+  };
+
+  $.mustache.escape = function(text) {
+    return Mustache.escape(text);
+  };
+
+})(jQuery);
--- a/attachments/style/css3buttons.css
+++ b/attachments/style/css3buttons.css
@@ -0,0 +1,79 @@
+a.button { display: inline-block; padding: 3px 5px 3px 5px; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12px; color: #3C3C3D; text-shadow: 1px 1px 0 #FFFFFF; background: #ECECEC url('../images/css3buttons_backgrounds.png') 0 0 no-repeat; white-space: nowrap; overflow: visible; cursor: pointer; text-decoration: none; border: 1px solid #CACACA; -webkit-border-radius: 2px; -moz-border-radius: 2px; -webkit-background-clip: padding-box; border-radius: 2px; outline: none; position: relative; zoom: 1; *display: inline; }
+a.button.primary { font-weight: bold }
+a.button:hover { color: #FFFFFF; border-color: #388AD4; text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); background-position: 0 -40px; background-color: #2D7DC5; }
+a.button:active,
+a.button.active { background-position: 0 -81px; border-color: #347BBA; background-color: #0F5EA2; color: #FFFFFF; text-shadow: none; }
+a.button:active { top: 1px }
+a.button.negative:hover { color: #FFFFFF; background-position: 0 -121px; background-color: #D84743; border-color: #911D1B; }
+a.button.negative:active,
+a.button.negative.active { background-position: 0 -161px; background-color: #A5211E; border-color: #911D1B; }
+a.button.pill { -webkit-border-radius: 19px; -moz-border-radius: 19px; border-radius: 19px; padding: 2px 10px 2px 10px; }
+a.button.left { -webkit-border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topright: 0px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; margin-right: 0px; }
+a.button.middle { margin-right: 0px; margin-left: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border-right: none; border-left: none; }
+a.button.right { -webkit-border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; margin-left: 0px; }
+a.button.left:active,
+a.button.middle:active,
+a.button.right:active { top: 0px }
+a.button.big { font-size: 16px; padding-left: 17px; padding-right: 17px; }
+a.button span.icon { display: inline-block; width: 14px; height: 12px; margin: auto 7px auto auto; position: relative; top: 2px; background-image: url('../images/css3buttons_icons.png'); background-repeat: no-repeat; }
+a.big.button span.icon { top: 0px }
+a.button span.icon.book { background-position: 0 0 }
+a.button:hover span.icon.book { background-position: 0 -15px }
+a.button span.icon.calendar { background-position: 0 -30px }
+a.button:hover span.icon.calendar { background-position: 0 -45px }
+a.button span.icon.chat { background-position: 0 -60px }
+a.button:hover span.icon.chat { background-position: 0 -75px }
+a.button span.icon.check { background-position: 0 -90px }
+a.button:hover span.icon.check { background-position: 0 -103px }
+a.button span.icon.clock { background-position: 0 -116px }
+a.button:hover span.icon.clock { background-position: 0 -131px }
+a.button span.icon.cog { background-position: 0 -146px }
+a.button:hover span.icon.cog { background-position: 0 -161px }
+a.button span.icon.comment { background-position: 0 -176px }
+a.button:hover span.icon.comment { background-position: 0 -190px }
+a.button span.icon.cross { background-position: 0 -204px }
+a.button:hover span.icon.cross { background-position: 0 -219px }
+a.button span.icon.downarrow { background-position: 0 -234px }
+a.button:hover span.icon.downarrow { background-position: 0 -249px }
+a.button span.icon.fork { background-position: 0 -264px }
+a.button:hover span.icon.fork { background-position: 0 -279px }
+a.button span.icon.heart { background-position: 0 -294px }
+a.button:hover span.icon.heart { background-position: 0 -308px }
+a.button span.icon.home { background-position: 0 -322px }
+a.button:hover span.icon.home { background-position: 0 -337px }
+a.button span.icon.key { background-position: 0 -352px }
+a.button:hover span.icon.key { background-position: 0 -367px }
+a.button span.icon.leftarrow { background-position: 0 -382px }
+a.button:hover span.icon.leftarrow { background-position: 0 -397px }
+a.button span.icon.lock { background-position: 0 -412px }
+a.button:hover span.icon.lock { background-position: 0 -427px }
+a.button span.icon.loop { background-position: 0 -442px }
+a.button:hover span.icon.loop { background-position: 0 -457px }
+a.button span.icon.magnifier { background-position: 0 -472px }
+a.button:hover span.icon.magnifier { background-position: 0 -487px }
+a.button span.icon.mail { background-position: 0 -502px }
+a.button:hover span.icon.mail { background-position: 0 -514px }
+a.button span.icon.move { background-position: 0 -526px }
+a.button:hover span.icon.move { background-position: 0 -541px }
+a.button span.icon.pen { background-position: 0 -556px }
+a.button:hover span.icon.pen { background-position: 0 -571px }
+a.button span.icon.pin { background-position: 0 -586px }
+a.button:hover span.icon.pin { background-position: 0 -601px }
+a.button span.icon.plus { background-position: 0 -616px }
+a.button:hover span.icon.plus { background-position: 0 -631px }
+a.button span.icon.reload { background-position: 0 -646px }
+a.button:hover span.icon.reload { background-position: 0 -660px }
+a.button span.icon.rightarrow { background-position: 0 -674px }
+a.button:hover span.icon.rightarrow { background-position: 0 -689px }
+a.button span.icon.rss { background-position: 0 -704px }
+a.button:hover span.icon.rss { background-position: 0 -719px }
+a.button span.icon.tag { background-position: 0 -734px }
+a.button:hover span.icon.tag { background-position: 0 -749px }
+a.button span.icon.trash { background-position: 0 -764px }
+a.button:hover span.icon.trash { background-position: 0 -779px }
+a.button span.icon.unlock { background-position: 0 -794px }
+a.button:hover span.icon.unlock { background-position: 0 -809px }
+a.button span.icon.uparrow { background-position: 0 -824px }
+a.button:hover span.icon.uparrow { background-position: 0 -839px }
+a.button span.icon.user { background-position: 0 -854px }
+a.button:hover span.icon.user { background-position: 0 -869px }
--- a/attachments/style/demo.css
+++ b/attachments/style/demo.css
@@ -0,0 +1,53 @@
+/**
+ * This is styling for the demo page and is not necessary to include in your projects
+ */
+ body { font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #444; background-color: #D5E9F6; }
+ h1#title { font-size: 37px; margin-bottom: 50px; color: #666; }
+ h2 { font-size: 21px; margin-bottom: 20px; }
+ h3 { font-size: 16px }
+ p { margin-bottom: 20px }
+ section { margin-bottom: 20px; padding: 10px; }
+ section.even { background-color: #EEE; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
+ article.example { margin: 20px 0px 20px 0px; padding: 10px 0px 10px 0px; border-top: 1px dotted #CCCCCC; border-bottom: 1px dotted #CCCCCC; }
+ footer { font-size: 11px; color: #666; text-align: center; margin-top: 20px; }
+ footer a { color: #666 }
+ a { color: #980905 }
+ em { font-style: italic }
+ ul,
+ ol { margin: 20px auto 20px auto; padding-left: 30px; }
+ blockquote { margin: 20px 0px 20px 0px }
+ .container { margin: 50px auto 100px auto; width: 750px; }
+ #main { padding: 10px; background-color: #FFFFFF; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
+ code,
+ blockquote,
+ .code { font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif }
+ .code { color: #d1d1d1; background-color: #3F3F3F; margin: 0px 0px 20px 0px; padding: 5px; font-size: 13px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
+ .notice { background-color: #FFF9D8; margin-top: 20px; padding: 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
+ .ribbon { position: absolute; top: 0; right: 0; border: 0; }
+ #database{overflow:hidden;}
+ #database h2{margin:0;}
+ #database .group{border-top:1px solid #bedce7;}
+ #database .separator{padding-top:1em;}
+ #database .envelope{border-bottom:1px solid #bedce7;border-left:1px solid #bedce7;border-right:1px solid #bedce7;padding:0 .7em .7em .7em;background:#eaf2f5 url(../images/bg_gradient.gif) 0 100% repeat-x;overflow:hidden;}
+ #database .envelope.selected{background:#fffeeb!important;}
+ #database .envelope.selected .machine span{border-bottom:1px dotted #4183c4;}
+ #database.single_database .envelope .machine span{border-bottom:1px dotted #4183c4;}
+ #database .machine{float:right;width:18em;padding:.8em 0 .8em 1.2em;border-left:1px solid #bedce7;color:#808080;font-family:Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;font-size:.85em;line-height:1.5em;}
+ #database .dbInfo {background:#fff url(../images/bg_gradient.gif) 0 100% repeat-x;}
+ #database .action {background:#eaf2f5 url(../images/bg_gradient.gif) 0 100% repeat-x;}
+ #database .database_oneline td{border-bottom:1px solid #bedce7;}
+ #database .database_oneline .date{color:#888;width:1%;padding:0 1em 0 .5em;border-left:1px solid #bedce7;}
+ #database .database_oneline .author{width:15%;}
+ #database .database_oneline .gravatar{width:1%;}
+ #database .database_oneline .gravatar img{border:1px solid #d0d0d0;padding:1px;background-color:white;float:left;margin-right:.4em;}
+ #database .database_oneline .author a{font-weight:bold;color:black;}
+ #database .database_oneline .message a{color:black;}
+ #database .database_oneline .database,#database .database_oneline .tree{width:1%;font-family:Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;font-size:90%;color:#808080;border-left:1px solid #bedce7;padding:.6em .5em;}
+ #database .database_oneline .tree{border-right:1px solid #bedce7;}
+ a{color:#4183c4;}
+ a {text-decoration: none;}
+ a:hover{text-decoration:underline;}
+ .usingMouse a{outline:none;}
+ a.button span.icon.loading { background-image: url(../images/loader.gif); }
+ .loading { background-image: url(../images/loader.gif); background-repeat: no-repeat; padding-left: 15px; background-position: 0px 3px;}
+ a.button:hover span.icon.loading { background-image: url(../images/loader-blue.gif); }
--- a/attachments/style/reset.css
+++ b/attachments/style/reset.css
@@ -0,0 +1,67 @@
+/* --------------------------------------------------------------
+
+   reset.css
+   * Resets default browser CSS.
+
+-------------------------------------------------------------- */
+
+html { 
+	margin:0; 
+	padding:0; 
+	border:0; 
+}
+
+body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, code,
+del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, dialog, figure, footer, header,
+hgroup, nav, section {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-weight: inherit;
+  font-style: inherit;
+  font-size: 100%;
+  font-family: inherit;
+  vertical-align: baseline;
+}
+
+/* This helps to make newer HTML5 elements behave like DIVs in older browers */ 
+article, aside, dialog, figure, footer, header,
+hgroup, nav, section {
+    display:block;
+}
+
+/* Line-height should always be unitless! */
+body {
+  line-height: 1.5;
+  background: white; 
+}
+
+/* Tables still need 'cellspacing="0"' in the markup. */
+table { 
+	border-collapse: separate; 
+	border-spacing: 0; 
+}
+/* float:none prevents the span-x classes from breaking table-cell display */
+caption, th, td { 
+	text-align: left; 
+	font-weight: normal; 
+	float:none !important; 
+}
+table, th, td { 
+	vertical-align: middle; 
+}
+
+/* Remove possible quote marks (") from <q>, <blockquote>. */
+blockquote:before, blockquote:after, q:before, q:after { content: ''; }
+blockquote, q { quotes: "" ""; }
+
+/* Remove annoying border on linked images. */
+a img { border: none; }
+
+/* Remember to define your own focus styles! */
+:focus { outline: 0; }