added static data for rapidsms

best/static/javascripts/collapse.js

@@ -0,0 +1,12 @@
+/* vim:set et ts=4 sw=4 */
+
+jQuery(function() {
+
+    /* allow module h2s with the 'collapsed' or 'expanded' classes to
+     * collapse or expand the module. (see modules.css for more.) */
+    jQuery("div.module.collapsed h2, div.module.expanded h2").each(function() {
+        jQuery('<span class="toggler"></span>').click(function() {
+            jQuery(this).parents("div.module").toggleClass("collapsed").toggleClass("expanded");
+        }).appendTo(this);
+    });
+});

best/static/javascripts/global/rs-module-help.js

@@ -0,0 +1,29 @@
+// vim: noet
+
+jQuery(function() {
+
+	/* hide the help text for each module that contains
+	 * it, and add a "show help" button to the toolbar */
+	jQuery(".module div.help").each(function() {
+		var help_box = jQuery(this);
+		help_box.hide();
+
+		var module = help_box.parent(".module");
+		var toolbar = jQuery("div.toolbar", module);
+
+		/* create a toolbar, if this module
+		 * does not already have one */
+		if(!toolbar.length) {
+			toolbar = jQuery('<div class="toolbar"></div>')
+			module.append(toolbar);
+		}
+
+		/* add a tool button to show
+		 * the div that we just hid */
+		toolbar.append(
+			jQuery('<span class="help">Show Help</span>').click(function(ev) {
+				help_box.slideToggle();
+			})
+		);
+	})
+});

best/static/javascripts/global/rs-pagination.js

@@ -0,0 +1,63 @@
+// vim: noet
+
+jQuery(function() {
+	jQuery(document.body).click(function(e) {
+		
+		/* ignore this click if it wasn't a link */
+		var link = $(e.target);
+		if(link.get(0).tagName.toLowerCase() != "a")
+			return true;
+
+		/* find the paginator that this link lives within. if there
+		 * is none (ie, a link that isn't within a paginator was clicked),
+		 * we're not interested in this event */
+		var paginator = link.parents("div.paginator");
+		if(!paginator.length)
+			return true;
+
+		/* as above, for the table that we will reload with the new
+		 * page of data. a paginator shouldn't exist outside of a
+		 * table, but let's not blow up if it does */
+		var table = paginator.parents("table");
+		if(!table.length)
+			return true;
+
+
+		/* this click was within a paginator link.
+		 * we'll take it from here, so kill the event */
+		e.preventDefault();
+
+		/* wat */
+		jQuery.ajax({
+			dataType: "html",
+			url: link.attr("href"),
+			complete: function(res, status) {
+
+				/* if the request was successful... */
+				if(status == "success" || status == "notmodified") {
+
+					/* create a dummy div, and inject the results into it. since the
+					 * page we just requested is the SAME PAGE that we're currently
+					 * viewing, only with a different page of objects, we can find
+					 * the new table the old paginator's DOM id.
+					 * --
+					 * NOTE: this is mostly ripped off from the jQuery.load
+					 *       function, which removes SCRIPT tags to avoid a
+					 *       permission error in internet exploder */
+					var new_table =
+						jQuery("<div />")
+							.append(res.responseText.replace(
+								/<script(.|\s)*?\/script>/g, ""))
+							.find("#" + paginator.attr("id")) // <-- new paginator
+							.closest("table");
+
+					/* replace the current table with the replacement
+					 * from the new page. this will destroy any events
+					 * currently attached, but will leave the rest of
+					 * the page alone */
+					table.replaceWith(new_table);
+				}
+			}
+		});
+	});
+});

best/static/stylesheets/forms.css

@@ -0,0 +1,146 @@
+/* vim:set et ts=4 sw=4 */
+
+form {
+    border: 1px solid #ddd;
+    padding: 0 1em;
+}
+
+    /* recursive models can be displayed as a tree within a <select>, by
+     * ordering them cleverly and adding their "depth" to the class, to
+     * bump them to the right, indicating their ancestry */
+    form option.depth-1 { padding-left: 1em; }
+    form option.depth-2 { padding-left: 2em; }
+    form option.depth-3 { padding-left: 3em; }
+    form option.depth-4 { padding-left: 4em; }
+    form option.depth-5 { padding-left: 5em; }
+    form option.depth-6 { padding-left: 6em; }
+    form option.depth-7 { padding-left: 7em; }
+    form option.depth-8 { padding-left: 8em; }
+
+    /* some options are less interesting than others; like None, or
+     * Disabled, or Default; so mark them dull */
+    form option.na {
+        font-style: italic;
+        color: #aaa;
+    }
+
+    /* TODO: wtf is this? */
+    form .no-data {
+        display: inline-block;
+        background: #f8f8ff;
+        text-align: center;
+        padding: 2em;
+        color: #aaa;
+    }
+
+        form .no-data a.add {
+            display: block;
+            padding-top: 0.625em;
+            font-size: 80%;
+        }
+
+
+    /* each field is wrapped in a div.field, which bundles together
+     * everything related to it. in order:
+     *
+     *   1. text label
+     *   2. list of errors
+     *   3. the field itself
+     *   4. help text
+     */
+    form div.field {
+        margin-top: 1em; }
+
+        form div.field label {
+            margin-bottom: 0.5em;
+            display: block;
+            color: #000;
+        }
+
+        /* for fields that need a longer description, help text can be
+         * added below. similar to django's models.Model.help_text */
+        form div.field p.help {
+            max-width: 30em;
+            font-size: 80%;
+            color: #aaa;
+
+            margin-top: 0;
+            padding-top: 2px;
+            margin-left: 0.625em;
+            padding-left: 0.3125em;
+            border-left: 0.625em solid #f8f8f8;
+        }
+
+            /* highlight examples (usually examples of text that should
+             * be sent over SMS, but could be anything) in help text */
+            form div.field p.help span.example {
+                font-family: monospace;
+                background: #f8f8f8;
+                color: #888;
+            }
+
+    form div.field.error { }
+
+        form div.field.error label {
+            font-weight: bold;
+            color: #f00;
+        }
+
+        form div.field.error ul.errors {
+            margin: 0 0 0.5em 0;
+            padding: 0;
+        }
+
+        form div.field.error ul.errors li {
+            background: #fff8f8 url("../icons/silk/exclamation.png") no-repeat 5px 50%;
+            padding: 0.25em 5px 0.25em 25px;
+            border: 1px solid #fdd;
+            margin-top: 0.25em;
+            min-height: 16px;
+            line-height: 1.4;
+            display: block;
+            color: #f44;
+        }
+
+    /* wrap submission and/or action buttons separately */
+    form div.submit {
+        background: #f8f8f8 url("../images/table-footer-bg.png") repeat-x 0 0;
+        border-top: 1px solid #eee;
+        margin: 1em -1em 0 -1em;
+        padding: 1em;
+    }
+
+/* if the browser supports after (+) and :first-child...
+ *
+ * 1. do a bit of extra work to replace the usual `1em margin-top` of
+ *    the first div.field with padding-top on the form itself, to remove
+ *    the 1px border between the module h2 and the form
+ *
+ * 2. add some fancy rounded corners to the bottom of the form, and do
+ *    some margin jiggery-pokery to ensure that the div.submit doesn't
+ *    overlap and cause jagged edges. */
+body:last-child h2 + form {
+    border-top: 0;
+    padding: 0;
+
+    background-color: #f8f8f8;
+    -webkit-border-bottom-right-radius: 5px;
+    -webkit-border-bottom-left-radius: 5px;
+    -moz-border-radius-bottomright: 5px;
+    -moz-border-radius-bottomleft: 5px;
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+}
+
+    h2 + form div.field:first-child {
+        margin-top: 0; }
+
+    body:last-child form > div:first-child {
+        background-color: #fff;
+        padding: 1em;
+    }
+
+    body:last-child form div.submit {
+        background-color: transparent;
+        margin: 0;
+    }

best/static/stylesheets/icons.css

@@ -0,0 +1,25 @@
+/* vim:set et ts=4 sw=4 */
+
+/* make the generated buttons look like tiny little icons. they're
+ * seldom used, so should stay well out of the way */
+input.js-button {
+    cursor: pointer;
+    border: 0;
+    padding: 0;
+    width: 16px;
+    height: 16px;
+    overflow: hidden;
+    text-indent: -9999px;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+}
+
+/* from http://www.famfamfam.com/lab/icons/silk/
+ * (licensed under Creative Commons Attribution) */
+input.js-button.add      { background-image: url("../icons/silk/add.png");          }
+input.js-button.del      { background-image: url("../icons/silk/delete.png");       }
+input.js-button.accept   { background-image: url("../icons/silk/accept.png");       }
+input.js-button.unaccept { background-image: url("../icons/silk/accept--dull.png"); }
+input.js-button.clear    { background-image: url("../icons/silk/decline.png");      }
+input.js-button.reload   { background-image: url("../icons/silk/reload.png");       }

best/static/stylesheets/layout.css

@@ -0,0 +1,293 @@
+/* vim:set et ts=4 sw=4 */
+
+body {
+    background: #eee url("../images/body-bg.png");
+    font: 9pt "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
+    line-height: 1;
+    color: #333;
+    padding: 0;
+    margin: 0;
+}
+
+a {
+    text-decoration: none;
+    color: #33a7d2;
+}
+
+    a:hover {
+        text-decoration: underline; }
+
+abbr {
+    cursor: help; }
+
+p {
+    line-height: 1.4; }
+
+/* this is not okay. but it is, unfortunately, the least error-prone way
+ * (that i know) of fixing broken floaty layouts in IE6 */
+div.clear-hack {
+    overflow: hidden;
+    clear: both;
+    height: 0;
+}
+
+
+
+
+#wrapper {
+    width: 80em;
+    background: #fff;
+    margin: 0.5em auto 0 auto;
+
+    /* a little pretty for the 10/dec demo */
+    -moz-box-shadow: 4px 4px 8px #aaa;
+    box-shadow: 4px 4px 8px #aaa;
+    -moz-border-radius-bottomright: 1em;
+    -moz-border-radius-bottomleft: 1em;
+}
+
+    /* no scaling for ie6 */
+    * html #wrapper {
+        width: 960px; }
+
+
+
+
+/* the header is based roughly upon unicef.org, with rapidsms colors */
+#header {
+    background: url("../images/header-bg.png") repeat-x;
+    padding-top: 23px;
+    padding-bottom: 33px;
+    position: relative;
+    color: #ccf;
+}
+
+    /* hide the log in/out links in the top right. this doesn't need to
+     * be especially discoverable; when the user tries to do something
+     * requiring a login, they should be redirected automatically */
+    #header #auth {
+        font-size: 80%;
+        position: absolute;
+        line-height: 22px;
+        margin: 0 10px;
+        right: 0;
+        top: 0;
+    }
+
+        #header #auth a {
+            color: #fff; }
+
+
+    #branding {
+        padding: 0 10px;
+    }
+
+    /* align in the middle of the unicef blue stripe of header bg, and
+     * display logo on the right. TODO: extract the unicef branding */
+    #branding h1 {
+        background: url("../images/unicef-logo.png") no-repeat 100% 50%;
+        height: 65px;
+        color: #fff;
+        margin: 0;
+    }
+
+        * html #branding h1 {
+            width: 940px; }
+
+        #branding h1 a {
+            height: 65px;
+            width: 245px;
+            display: block;
+            background: url("../images/rapidsms-logo.png") no-repeat 0 50%;
+
+            /* float the RapidSMS logo, in case any app would like to
+             * append anything to the light blue (empty) stripe */
+            float: left;
+        }
+
+            #branding h1 a span {
+                position: absolute;
+                left: -9999px;
+            }
+
+    #tabs,
+    #page-tabs {
+        position: absolute;
+        height: 28px;
+        bottom: 0;
+        padding: 0;
+        margin: 0;
+    }
+
+    /* global tabs sit on the right, page-specific tabs sit on the left.
+     * to draw more attention. TODO: maybe re-think this */
+    #tabs { right: 0; }
+    #page-tabs { left: 0;  }
+
+        #tabs li,
+        #page-tabs li {
+            display: block;
+            float: left;
+            line-height: 28px;
+        }
+
+        /* 5px spacing between each tab, to match the top gap, since
+         * we're using pixel-positioned backgrounds there */
+        #tabs li { margin-right: 5px; }
+        #page-tabs li { margin-left: 5px; }
+
+            #tabs li a,
+            #page-tabs li a {
+                color: #fff;
+                display: block;
+                padding: 0 1em;
+                background: #2fa5d1 url("../images/tab-bg.png") repeat-x;
+                border-right: 1px solid #11bad0;
+                border-left: 1px solid #11bad0;
+
+                /* disable the focus outline on tabs, to avoid a rather
+                 * ugly dotted box around tabs while they have focus (we
+                 * remain accessible by providing an :focus, later) */
+                outline: none;
+            }
+
+            /* there are unread messages in this tab! TODO: is this just
+             * for the training app? if so, move it there! */
+            #tabs li.unread a span {
+                display: block;
+                padding-right: 21px;
+                background: url("../icons/silk/email_open.png") no-repeat 100% 50%;
+            }
+
+            /* always highlight the active (in the navigation sense, not
+             * the css :active sense) tab, even when it's being hovered
+             * or focused, since clicking it again is mostly useless */
+            #tabs li.active a,       #page-tabs li.active a,
+            #tabs li.active a:hover, #page-tabs li.active a:hover,
+            #tabs li.active a:focus, #page-tabs li.active a:focus {
+
+                background: #fff url("../images/tab-bg-active.png") repeat-x;
+                text-decoration: none;
+                text-shadow: none;
+                color: #000;
+
+                /* the same color as the strip in header-bg.png */
+                border: 1px solid #cef1f5;
+                border-bottom: 0;
+
+                /* nudge the active tab north by one pixel, to line it
+                 * up with the tops of the other tabs */
+                margin-top: -1px;
+            }
+
+            /* brighten up inactive tabs when hovering or tab-focusing
+             * with the keyboard (we removed the outline, above) */
+            #tabs li a:hover, #page-tabs li a:hover,
+            #tabs li a:focus, #page-tabs li a:focus {
+                background-image: url("../images/tab-bg-hover.png");
+                text-shadow: #cef1f5 0 0 2px;
+                text-decoration: none;
+            }
+
+
+
+
+#breadcrumbs {
+    color: #ccc;
+    font-size: 2em;
+    line-height: 1;
+    padding: 0.5em;
+    text-shadow: #eee 2px 2px 2px;
+    border-bottom: 1px dotted #eee;
+}
+
+    #breadcrumbs a {
+        color: #000;
+    }
+
+
+
+
+#inner {
+    padding: 1em;
+    position: relative;
+}
+
+        /* some parts of the page title are dynamic (or otherwise really
+         * important), like search terms. highlight them! */
+        #inner h1 span.highlight {
+            background: #ffa;
+            -moz-border-radius: 5px;
+            border: 2px solid #ff0;
+            padding: 0 4px;
+            margin-left: -4px;
+        }
+
+    /* when an app has something really important to say, it can use the
+     * apps/webui/templates/message.html template to display a huge blob
+     * of text. this should probably be replaced with flash messages */
+    #inner div.message {
+        text-align: center;
+        padding: 4em 25%;
+    }
+
+        #inner div.message p {
+            margin: 0 0 0.5em 0;
+            font-size: 2em;
+        }
+
+
+
+
+/* some apps (erm, just the querylog, actually) add big triggers to the
+ * bottom of the page to show or perform some action. */
+div.trigger {
+    font-size: 80%;
+    text-align: center;
+    padding: 0.625em;
+    background: #f8f8f8;
+    cursor: pointer;
+    color: #aaa;
+}
+
+    div.trigger.warn {
+        background: #fdd;
+        color: #f00;
+    }
+
+
+
+
+#footer {
+    border-top: 1px dotted #eee;
+    padding: 0.5em;
+    clear: both;
+    color: #ccc;
+
+    /* reserve space for at two lines of links @ LH=1.4 (for the
+     * copyright and licensing/download info) */
+    min-height: 2.8em;
+}
+
+    /* bump the footer links down a line, to align them with the second
+     * line of legal junk on the right. reduce the opacity until hover,
+     * to keep them out of view until they're needed. */
+    #footer .footer-region {
+        margin-top: 1.4em;
+        line-height: 1.4;
+        opacity: 0.25;
+        float: left;
+    }
+
+        #footer .footer-region:hover {
+            opacity: 1; }
+
+        #footer .footer-region a            { margin-right: 0.5em; }
+        #footer .footer-region a:last-child { margin-right: 0; }
+
+
+    #footer p.rights {
+        text-align: right;
+        float: right;
+        margin: 0;
+    }

best/static/stylesheets/modules.css

@@ -0,0 +1,132 @@
+/* vim:set et ts=4 sw=4 */
+
+div.module {
+    margin-top: 2em;
+    position: relative;
+}
+
+    div.module div.module {
+        border: 1px solid #8fbcc9; }
+
+div.module:first-child {
+    margin-top: 0; }
+
+
+
+
+div.module.collapsed {
+    overflow-y: hidden;
+    height: 2.6em;
+}
+
+    div.module.collapsed h2 {
+        background-image: url("../images/h2-bg-collapsed.png"); }
+
+    div.module.collapsed + div.module {
+        margin-top: 1px; }
+
+    div.module.collapsed h2 span.toggler,
+    div.module.expanded h2 span.toggler {
+        background: no-repeat 50% 50%;
+        text-indent: -9999px;
+        cursor: pointer;
+        width: 16px;
+        height: 2.6em;
+        overflow: hidden;
+        position: absolute;
+        padding: 0 0.5em;
+        right: 0;
+        top: 0;
+    }
+
+        div.module.collapsed h2 span.toggler { background-image: url("../icons/silk/section_collapsed--bright.png"); }
+        div.module.expanded  h2 span.toggler { background-image: url("../icons/silk/section_expanded--bright.png"); }
+
+
+
+
+/* module headers are mostly ripped off from  django admin, although
+ * here, we never use <caption>, to keep things simple. (they have
+ * surprisingly confusing layout rules.) */
+div.module h2,
+div.module h3 {
+    margin: 0;
+    background-repeat: repeat-x;
+    background-position: 0 100%;
+    white-space: nowrap;
+    font-weight: normal;
+    line-height: 1;
+    color: #fff;
+}
+
+    div.module h2 {
+        background-color: #000;
+        background-image: url("../images/h2-bg.png");
+        text-shadow: #000 2px 2px 1px;
+        padding: 0.3125em;
+        font-size: 160%;
+    }
+
+        /* less important info can  be wrapped in a span to dull it */
+        div.module h2 span {
+            text-shadow: none;
+            font-size: 62.5%;
+            opacity: 0.8;
+        }
+
+    /* subheaders are almost the same. to dull things, i just made the
+     * h2-bg image 80% opaque and re-saved it. STILL TODO: ask meghana
+     * to make this pretty */
+    div.module h3 {
+        background-image: url("../images/h3-bg.png");
+        background-color: #333;
+        padding: 0.5em;
+        font-size: 100%;
+    }
+
+
+
+
+/* modules can (optionally) include help text, to explain how they can
+ * be used. this is hidden by module-help.js, if it's available, but
+ * shouldn't be too verbose, in case it isn't */
+div.module div.help,
+div.module form.search {
+    border-right: 0.5em solid #ffb;
+    border-left: 0.5em solid #ffb;
+    background: #ffc;
+    padding: 1em;
+}
+
+    div.module div.help p {
+        margin: 0; }
+
+
+/* modules can optionally contain a small "toolbar", which hangs in the
+ * top right, overlapping the <h2>, if there is one */
+div.module div.toolbar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    line-height: 2.6em;
+}
+
+    div.module div.toolbar a,
+    div.module div.toolbar span {
+        display: block;
+        float: right;
+        color: #eee;
+        margin-right: 0.625em;
+        padding-left: 21px;
+        background-repeat: no-repeat;
+        background-position: 0 50%;
+        font-size: 80%;
+        cursor: pointer;
+    }
+
+        /* various common toolbar icons. should be from the famfamfam
+         * silk set, to fit in with the rest of RapidSMS. this will
+         * probably grow (and be abstracted) as apps do more things */
+        div.module div.toolbar .add    { background-image: url("../icons/silk/add.png");       }
+        div.module div.toolbar .help   { background-image: url("../icons/silk/help.png");      }
+        div.module div.toolbar .search { background-image: url("../icons/silk/magnifier.png"); }

best/static/stylesheets/splits.css

@@ -0,0 +1,48 @@
+/* vim:set et ts=4 sw=4 */
+
+
+.col-1, .col-2, .col-3, .col-4, .col-5, .col-6 {
+    margin-left: 1em;
+    min-height: 1px;
+    float: left;
+}
+
+
+.two-columns        { padding-left: 1em; }
+.two-columns .col-1 { margin-left: -1em; }
+
+    .two-columns .col-1,
+    .two-columns .col-2 {
+        width: 50%; }
+
+
+.three-columns        { padding-left: 2em; }
+.three-columns .col-1 { margin-left: -2em; }
+
+    .three-columns .col-2 {
+        width: 34%; }
+
+    .three-columns .col-1,
+    .three-columns .col-3 {
+        width: 33%; }
+
+
+.four-columns        { padding-left: 3em; }
+.four-columns .col-1 { margin-left: -3em; }
+
+    .four-columns .col-1,
+    .four-columns .col-2,
+    .four-columns .col-3,
+    .four-columns .col-4 {
+        width: 25%; }
+
+
+.five-columns        { padding-left: 4em; }
+.five-columns .col-1 { margin-left: -4em; }
+
+    .five-columns .col-1,
+    .five-columns .col-2,
+    .five-columns .col-3,
+    .five-columns .col-4,
+    .five-columns .col-5 {
+        width: 20%; }

best/static/stylesheets/tables.css

@@ -0,0 +1,236 @@
+/* vim:set et ts=4 sw=4 */
+
+table {
+    border-collapse: collapse; }
+
+    col { }
+
+        /* highlight sorted columns just a little tiny bit. some people
+         * won't be able to see it, but the header should contain some
+         * kind of indication, too. darker colors interfere with the
+         * grid lines, which are also very light. */
+        col.sorted {
+            background: #fcfcff; }
+
+    tr { }
+
+            td, th {
+                padding: 0.5em;
+                border: 1px solid #ddd;
+
+                /* reset the "look" of headers to match regular cells,
+                 * since they can appear anywhere (col or row scope) */
+                font-weight: normal;
+                text-align: left;
+            }
+
+            /* if this table is directly following a header, we don't
+             * need a border top. it'd probably get lost, anyway */
+            h2 + table thead th {
+                border-top: none; }
+
+                thead th {
+                    background: #e1e1e1 url(../images/table-header-bg.png) repeat-x 100% 0;
+                    color: #888;
+                }
+
+                    thead th a,
+                    thead th span.unsortable {
+                        color: #888;
+                        outline: 0;
+                        border-left: 1px solid #f8f8f8;
+
+                        /* the padding/margin magic overlaps the padding
+                         * of the th, to make it all clickable */
+                        padding: 0.5em;
+                        margin: -0.5em;
+
+                        /* if a sort marker is within this link, it'll
+                         * need to position absolutely within */
+                        position: relative;
+                        display: block;
+                    }
+
+                        /* highlight it when the th is hovered, a bit
+                         * like (most) native controls. this is crappy,
+                         * since the background image is sitting on top
+                         * of the th bg, not replacing it */
+                        thead th a:hover {
+                            background-image: url(../images/table-header-bg-highlight.png);
+                            color: #000;
+                        }
+
+                    thead th.sorted a {
+                        padding-right: 26px;
+                        color: #000;
+                     }
+
+                        /* unfortunately, an extra element (a span) is
+                         * needed to display the sort marker. all of the
+                         * other backgrounds are already busy. snap it
+                         * to the right/middle of the th */
+                        thead th.sorted a span {
+                            display: block;
+                            position: absolute;
+                            right: 5px;
+                            top: 50%;
+                            width: 16px;
+                            height: 16px;
+                            margin-top: -8px;
+                            overflow: hidden;
+                            text-indent: -9999px;
+                        }
+
+                        thead th.asc  a span { background-image: url("../icons/silk/sort_ascending.png"); }
+                        thead th.desc a span { background-image: url("../icons/silk/sort_descending.png"); }
+
+                /* make the grid lighter within the tbody, since it's
+                 * only a visual hint to distinguish the rows + cols */
+                tbody th, tbody td {
+                    border-color: #f8f8f8; }
+
+                /* stripe the rows
+                tbody tr:nth-child(odd) {
+                    background: #f8f8f8; }*/
+
+                /* restore the dark outer borders of the tbody */
+                tbody tr:first-child th, tbody tr:first-child td { border-top-color:    #ddd; }
+                tbody th:last-child,     tbody td:last-child     { border-right-color:  #ddd; }
+                tbody tr:last-child th,  tbody tr:last-child td  { border-bottom-color: #ddd; }
+                tbody th:first-child,    tbody td:first-child    { border-left-color:   #ddd; }
+
+            /* some cells have nothing important to say, (like "none" or
+             * "never"), but are required none the less. make them dull,
+             * to highlight the rows which contain real data */
+            td.na, th.na, td span.na, th span.na {
+                font-style: italic;
+                color: #aaa;
+            }
+
+    /* when a row is "active" (eg. it is being viewed, edited, etc), it
+     * is dimly highlighted. the bgcolor is 10% of #33a7d2 (links)
+     * applied to the cells (not the row), to mask the stripes */
+    tr.active td, tr.active th {
+        background: #ebf6fa url(../images/table-row-bg-active.png) repeat-x 100% 0; }
+
+    tr.no-data { }
+
+            tr.no-data td {
+                text-align: center;
+                background: #f8f8ff no-repeat 50% 50%;
+                padding: 2em;
+                color: #aaa;
+            }
+
+            /* since no-data rows usually only have a single <td>, the
+             * last-child rule above breaks their huge padding. this is
+             * a hack to restore it. */
+            body:last-child tr.no-data td:last-child {
+                padding-right: 2em; }
+
+            tr.no-data td a.add {
+                display: block;
+                padding-top: 0.625em;
+                font-size: 80%;
+            }
+
+            /* since there is no data, it might be useful to point the
+             * user in the right direction. these arrows are very light,
+             * and displayed behind the "You haven't..." text. */
+            tr.no-data.look-up    td { background-image: url("../images/big-arrows/up.png");    }
+            tr.no-data.look-right td { background-image: url("../images/big-arrows/right.png"); }
+            tr.no-data.look-down  td { background-image: url("../images/big-arrows/down.png");  }
+            tr.no-data.look-left  td { background-image: url("../images/big-arrows/left.png");  }
+
+            /* if there is no data because an error occurred, make the
+             * table obviously busted by highlighting it in red. */
+            tr.no-data.error td {
+                color: #f66;
+                background-color: #fff8f8;
+                background-image: url("../images/big-arrows/error.png");
+            }
+
+    tr.depth-1 td.indent { padding-left: 2em;  }
+    tr.depth-2 td.indent { padding-left: 4em;  }
+    tr.depth-3 td.indent { padding-left: 6em;  }
+    tr.depth-4 td.indent { padding-left: 8em;  }
+    tr.depth-5 td.indent { padding-left: 10em; }
+    tr.depth-6 td.indent { padding-left: 12em; }
+    tr.depth-7 td.indent { padding-left: 14em; }
+    tr.depth-8 td.indent { padding-left: 16em; }
+
+    tfoot {
+        background: #f8f8f8 url("../images/table-footer-bg.png") repeat-x 0 0;
+        font-size: 80%;
+    }
+
+        /* no padding in the footer cell; the links will float and pad
+         * themselves, so the clickable blocks are easier to hit */
+        tfoot td {
+            padding: 0; }
+
+            /* footer links are dull, because they're less important
+             * than the data. TODO: is this totally stupid? (i don't
+             * really care, it's pretty) */
+            tfoot a,
+            tfoot span {
+                display: block;
+                float: right;
+                padding: 0.625em;
+                color: #aaa;
+            }
+
+                /* footer links can be broken up with spans, which look
+                 * the same, except super dull (for things like disabled
+                 * pagination links */
+                tfoot span {
+                    color: #ddd; }
+
+                /* highlight hover links brighter than usual, since
+                 * they're harder to spot */
+                tfoot a:hover {
+                    background: #fff; }
+
+            /* move all paginator links to the left, to separate from
+             * additional views and export, which lives on the right */
+            tfoot .paginator,
+            tfoot .paginator a,
+            tfoot .paginator span {
+                float: left; }
+
+                tfoot .paginator a.active {
+                    background: #ddd;
+                    color: #fff;
+                }
+
+                tfoot .paginator .first,
+                tfoot .paginator .prev,
+                tfoot .paginator .next,
+                tfoot .paginator .last {
+                    background-repeat: no-repeat;
+                    background-position: 0 50%;
+                    text-indent: -9999px;
+                    overflow: hidden;
+                    padding-right: 0;
+                    padding-left: 0;
+                    width: 16px;
+                }
+
+                /* links look something like:
+                 *  <<  <  1 2 3 4  >  >> */
+                tfoot .paginator .first { background-image: url("../icons/silk/resultset_first.png");    }
+                tfoot .paginator .prev  { background-image: url("../icons/silk/resultset_previous.png"); }
+                tfoot .paginator .next  { background-image: url("../icons/silk/resultset_next.png");     }
+                tfoot .paginator .last  { background-image: url("../icons/silk/resultset_last.png");     }
+
+                /* when a link is disabled, move the background image
+                 * over to reveal the transparent sprite to the left */
+                tfoot .paginator span.na {
+                    background-position: -16px 50%; }
+
+                /* the ... to indicate that page links have been hidden
+                 * (because there were too many) should be quite dull */
+                tfoot .paginator span.elipsis {
+                    letter-spacing: 1px;
+                    color: #888;
+                 }