From 1dd5c0d386b2cc69feb2cc256bbebf352a535a43 Mon Sep 17 00:00:00 2001 From: Max Ogden Date: Mon, 20 Jun 2011 21:03:38 -0700 Subject: [PATCH] switch UI to use google refine style data table --- app.js | 9 +- attachments/pages/index.html | 166 ++++-- attachments/style/data-table.css | 910 +++++++++++++++++++++++++++++++ attachments/style/demo.css | 15 +- 4 files changed, 1042 insertions(+), 58 deletions(-) create mode 100644 attachments/style/data-table.css diff --git a/app.js b/app.js index 4b955af5..13ec61bd 100644 --- a/app.js +++ b/app.js @@ -7,7 +7,8 @@ ddoc = , rewrites : [ {from:"/", to:'pages/index.html'} , {from:"/api/csv", to:'_list/csv/all'} - , {from:"/api/headers", to:'_list/urlencode/headers', query: {group: true}} + , {from:"/api/headers", to:'_list/array/headers', query: {group: true}} + , {from:"/api/rows", to:'_view/all'} , {from:"/api", to:'../../'} , {from:"/api/*", to:'../../*'} , {from:"/*", to:'*'} @@ -74,11 +75,11 @@ ddoc.lists = { } }, /** - * Returns the urlencoded version of the view's keys + * Returns an array of the view keys * * @author Max Ogden */ - urlencode: function(head, req) { + array: function(head, req) { start({"headers":{"Content-Type" : "application/json"}}); if ('callback' in req.query) send(req.query['callback'] + "("); @@ -86,7 +87,7 @@ ddoc.lists = { while (row = getRow()) { headers.push(row.key); } - send(escape(JSON.stringify(headers))); + send(JSON.stringify(headers)); if ('callback' in req.query) send(")"); } diff --git a/attachments/pages/index.html b/attachments/pages/index.html index d28c787e..b5b7cd2c 100644 --- a/attachments/pages/index.html +++ b/attachments/pages/index.html @@ -2,14 +2,16 @@ - CouchDB Data Import/Export + CouchDB Data Explorer - + + + + + + \ No newline at end of file diff --git a/attachments/style/data-table.css b/attachments/style/data-table.css new file mode 100644 index 00000000..a9b5787a --- /dev/null +++ b/attachments/style/data-table.css @@ -0,0 +1,910 @@ +/* + +Copyright 2010, Google Inc. +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are +met: + + * Redistributions of source code must retain the above copyright +notice, this list of conditions and the following disclaimer. + * Redistributions in binary form must reproduce the above +copyright notice, this list of conditions and the following disclaimer +in the documentation and/or other materials provided with the +distribution. + * Neither the name of Google Inc. nor the names of its +contributors may be used to endorse or promote products derived from +this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + +*/ + +html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} + +article, aside, figure, footer, header, hgroup, nav, section { + display: block; +} + +ul { + list-style-position: inside; +} + +a { + margin: 0; + padding: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +input, select { + vertical-align: middle; +} + +body { + font-size: 62.5%; + font-family: Arial, sans-serif; + background: #fff; +} + +h1 { + font-size: 1.8em; +} + +h2 { + font-size: 1.3em; + font-weight: bold; +} + +input[type=text] { + padding: 3px; + font-size: 1em; + font-family: inherit; + border: #ccc 1px solid; + border-top: #888 1px solid; + vertical-align: baseline; +} + +a { + color: #11c; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +a.secondary { + color: #4272db; +} + +a.action, a.selected, a.inaction { + margin: 0 3px; +} + +a.selected { + color: #000; + font-weight: bold; + cursor: default; +} + +a.inaction { + color: #999; +} + +a.selected:hover, a.inaction:hover { + cursor: default; + text-decoration: none; +} + +a img { + border: 0; +} + +.form-table th, .form-table td { + vertical-align: top; + font-size: 1.3em; + padding: 2px; +} + +.form-table th { + text-align: left; + padding-top: 8px; + font-weight: bold; +} + +.list-table { + width: 100%; +} + +.list-table th, .list-table td { + padding-top: 5px; + text-align: left; + vertical-align: baseline; + padding: 3px 5px; + font-size: 1.1em; + color: #777; + border-bottom: dotted 1px #ddd; +} + +.list-table th { + font-weight: bold; + color: #444; + background: #f2f2f2; +} + +.list-table-itemname { + font-size: 1.2em; +} + +#loading-message { + text-align: center; + font-size: 300%; + color: #999; + padding: 3em .5em; +} + +#loading-message img { + position: relative; + top: -4px; +} + +#notification-container { + position: fixed; + top: 0; + width: 100%; + z-index: 100; + text-align: center; +} + +#notification { + display: inline-block; + margin: 0 auto; + padding: 5px 8px 4px; + font-size: 1.3em; + text-align: left; + font-weight: bold; + background: #fe8; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; +} + +.notification-action { + padding-left: 10px; +} + +.notification-loader { + padding: 0 3px 0 0; + opacity: 0.3; +} + +#header { + max-height: 40px; + padding: 6px; + position: relative; + overflow: hidden; +} + +#app-home-button { + position: absolute; + top: 0; + left: 0; +} + +#body-info { + margin: 0 40px; +} + +#body-info p { + font-size: 1.3em; + margin: 1.3em; + width: 50em; + line-height: 1.3; +} + +#body-info h1 { + font-size: 3.0em; + font-weight: normal; + color: #777; +} + +#body-info h2 { + margin: 1.6em 0 .5em 0; +} + +#body-info .license, #body-info .errorstack { + font-family: monospace; + font-size: 1.3em; + white-space: pre; + border: 1px solid #ddd; + background: #eee; + padding: 15px; + width: 60em; + overflow: auto; +} + +#body-info ul { + font-size: 1.3em; + margin: .5em 0 2em; +} + +#body-info li { + margin: 0.4em; +} + +input[type="checkbox"], input[type="radio"], select { + vertical-align: baseline; +} + +input.inline { + vertical-align: middle; +} + +div.grid-layout > table { + border-collapse: separate; +} + +div.grid-layout.layout-full > table { + width: 100%; + max-width: 100% !important; +} + +div.grid-layout > table > tbody > tr > th, div.grid-layout > table > tbody > tr > td { + padding: 0px; + text-align: left; + vertical-align: baseline; +} + +div.grid-layout.grid-layout-for-text > table > tbody > tr > th, div.grid-layout.grid-layout-for-text > table > tbody > tr > td { + vertical-align: middle; +} + +div.grid-layout.grid-layout-for-ui > table > tbody > tr > th, div.grid-layout.grid-layout-for-ui > table > tbody > tr > td { + vertical-align: top; +} + +div.grid-layout.layout-normal { + margin: -10px; +} + +div.grid-layout.layout-normal > table { + border-spacing: 10px; +} + +div.grid-layout.layout-tight { + margin: -7px; +} + +div.grid-layout.layout-tight > table { + border-spacing: 7px; +} + +div.grid-layout.layout-tighter { + margin: -5px; +} + +div.grid-layout.layout-tighter > table { + border-spacing: 5px; +} + +div.grid-layout.layout-tightest { + margin: -3px; +} + +div.grid-layout.layout-tightest > table { + border-spacing: 3px; +} + +div.grid-layout.layout-loose { + margin: -15px; +} + +div.grid-layout.layout-loose > table { + border-spacing: 15px; +} + +div.grid-layout.layout-looser { + margin: -20px; +} + +div.grid-layout.layout-looser > table { + border-spacing: 20px; +} + +div.input-container { + padding: 3px; +} + +div.input-container > input, div.input-container > textarea { + display: block; + width: 100%; + padding: 2px; + border: 1px inset; + margin-left: -3px; + margin-top: -3px; + vertical-align: top; +} + +input.code, textarea.code { + font-family: monospace; +} + +img { + vertical-align: middle; +} + +.hidden { + display: none; +} + +.fbs-pane, .fbs-flyout-pane { + z-index: 2000; +} + +.ui-widget { + font-family: inherit; + font-size: inherit; +} + +.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { + font-family: inherit; + font-size: inherit; +} + +p.body-text { + margin-bottom: 1em; +} + +/* + +Copyright 2010, Google Inc. +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are +met: + + * Redistributions of source code must retain the above copyright +notice, this list of conditions and the following disclaimer. + * Redistributions in binary form must reproduce the above +copyright notice, this list of conditions and the following disclaimer +in the documentation and/or other materials provided with the +distribution. + * Neither the name of Google Inc. nor the names of its +contributors may be used to endorse or promote products derived from +this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + +*/ + +#body { + display: none; +} + +#project-title { + float: left; + padding: 2px 0 0 0; + font-size: 1.6em; +} + +#project-controls { + margin-top: 1px; + display: block; + float: right; + font-size: 1.3em; +} + +#project-name-button { + padding: 3px; + border: 1px solid transparent; +} + +#project-name-button:hover { + background: #ffffd6; + border: 1px solid #ccc; + border-top: 1px solid #aaa; +} + +#project-permalink-button { + padding: 0 4px; + font-size: 0.7em; +} + +#left-panel { + position: fixed; + overflow: hidden; + padding: 0px; + padding-top: 5px; + font-size: 1.3em; + background: #e3e9ff; +} + +#left-panel .ui-tabs .ui-tabs-panel { + border-left: none; + border-right: none; + border-bottom: none; + padding: 0; +} + +#right-panel { + position: fixed; + overflow: hidden; + padding: 0px; + padding-left: 5px; + background: #bcf; +} + +#tool-panel { + position: relative; + height: 32px; +} + +#summary-bar { + position: absolute; + top: 7px; + left: 7px; + font-size: 1.8em; + font-weight: bold; +} + +#summary-total { + font-size: 0.8em; + font-weight: normal; +} + +#extension-bar { + position: absolute; + top: 0px; + right: 10px; + white-space: nowrap; + font-size: 1.3em; + padding: 5px 0; +} + +#extension-bar .secondary { + font-size: 0.85em; +} + +#view-panel { + background: white; + overflow: hidden; +} + +#facet-panel, #history-panel { + overflow: auto; +} + +/* + +Copyright 2010, Google Inc. +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are +met: + + * Redistributions of source code must retain the above copyright +notice, this list of conditions and the following disclaimer. + * Redistributions in binary form must reproduce the above +copyright notice, this list of conditions and the following disclaimer +in the documentation and/or other materials provided with the +distribution. + * Neither the name of Google Inc. nor the names of its +contributors may be used to endorse or promote products derived from +this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + +*/ + + +#left-panel .ui-tabs .ui-tabs-panel { + border-left: none; + border-right: none; + border-bottom: none; + padding: 0; +} + +#right-panel { + width: 100%; + overflow: hidden; + padding: 0px; + padding-left: 5px; + background: #bcf; +} + +#tool-panel { + position: relative; + height: 32px; +} + +#summary-bar { + position: absolute; + top: 4px; + left: 7px; + font-size: 1.8em; + font-weight: bold; +} + +#summary-total { + font-size: 0.8em; + font-weight: normal; +} + +#extension-bar { + position: absolute; + top: 0px; + right: 10px; + white-space: nowrap; + font-size: 1.3em; + padding: 5px 0; +} + +#extension-bar .secondary { + font-size: 0.85em; +} + +#view-panel { + background: white; + overflow: hidden; +} + +#facet-panel, #history-panel { + overflow: auto; +} + + +/* + +Copyright 2010, Google Inc. +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are +met: + + * Redistributions of source code must retain the above copyright +notice, this list of conditions and the following disclaimer. + * Redistributions in binary form must reproduce the above +copyright notice, this list of conditions and the following disclaimer +in the documentation and/or other materials provided with the +distribution. + * Neither the name of Google Inc. nor the names of its +contributors may be used to endorse or promote products derived from +this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + +*/ + +.viewpanel-header { + position: relative; + background: #e3e9ff; + font-size: 1.3em; + padding: 7px; + overflow: hidden; + text-align: right; +} + +.viewpanel-rowrecord, .viewpanel-pagesize, .viewpanel-sorting { + position: absolute; + top: 7px; + background: #e3e9ff; + padding: 0 10px 0 0; +} + +.viewpanel-pagingcount { + font-weight: bold + +} + +.data-table-container { + border-top: 1px solid #bcf; + overflow: auto; +} + +.data-table { + margin: 0; + padding: 0; + font-size: 1.1em; + border-collapse: collapse; +} + +.data-table td { + padding: 2px 5px; + border-bottom: 1px dotted #ddd; + border-right: 1px solid #ddd; +} + +table.data-table > tbody > tr.even > td { + background: #f2f2f2; +} + +table.data-table > tbody > tr.contextual > td > div { + opacity: 0.3; +} + +table.data-table td.column-header { + vertical-align: top; + white-space: nowrap; + background: #f2f2f2; + cursor: pointer; + padding: 4px 6px 4px 4px; + border-right: 1px solid #ddd; + font-weight: bold; +} + +.column-header-name { + margin: 0 0 0 21px; + padding: 4px 0 0 0; + display: block; +} + +a.column-header-menu { + float: left; + display: block; + margin: 0 4px 0 0; + width: 17px; + height: 19px; + background-image: url(../../images/menu-dropdown.png); + background-repeat: no-repeat; +} + +a.column-header-menu:hover { + background-position: -17px 0px; + text-decoration: none; +} + +.column-header-recon-stats-bar { + margin-top: 10px; + height: 4px; + background: #ddd; + border: 1px solid #ccc; + position: relative; + width: 100%; +} + +.column-header-recon-stats-matched { + position: absolute; + height: 100%; + background: #282; +} + +.column-header-recon-stats-blanks { + position: absolute; + height: 100%; + background: #3d3; +} + +div.data-table-cell-content { + line-height: 1.2; + color: #222; + position: relative; +} + +div.data-table-cell-content-numeric { + text-align: right; +} + +a.data-table-cell-edit { + position: absolute; + top: 0; + right: 0; + display: block; + width: 25px; + height: 16px; + text-decoration: none; + background-image: url(../../images/edit-map.png); + background-repeat: no-repeat; + visibility: hidden; +} + +a.data-table-cell-edit:hover { + background-position: -25px 0px; +} + +div.data-table-cell-content-numeric > a.data-table-cell-edit { + left: 0px; + right: auto; +} + +.data-table-value-nonstring { + color: #282; +} + +.data-table-error { + color: red; +} + +div.data-table-recon-candidates { + padding: 1px 0; + min-width: 15em; + color: #777; +} + +div.data-table-recon-candidate { + padding: 1px 35px 1px; + position: relative; +} + +a.data-table-recon-topic { + color: #4272db; +} + +.data-table-recon-score, .data-table-recon-new { + color: #aaa; + margin: 0 0.5em; +} + +a.data-table-recon-action, .data-table-recon-extra > a { + text-decoration: none; + color: #4272db; +} + +a.data-table-recon-action, .data-table-recon-extra { + font-size: 0.8em; + display: block; + margin: 3px 0 0; +} + +a.data-table-recon-match, a.data-table-recon-match-similar { + position: absolute; + top: 0; + left: 0; + display: block; + width: 16px; + height: 16px; + background-image: url(../../images/checks-map.png); + background-repeat: no-repeat; + background-position: -16px 0; + text-decoration: none; +} + +a.data-table-recon-match:hover { + background-position: 0 0; +} + +a.data-table-recon-match-similar { + background-position: -16px -16px; + left: 16px; +} + +a.data-table-recon-match-similar:hover { + background-position: 0 -16px; +} + +a.data-table-star-on, a.data-table-star-off, a.data-table-flag-on, a.data-table-flag-off { + display: block; + width: 16px; + height: 16px; + background-image: url(../../images/star-flag-map.png); + background-repeat: no-repeat; + text-decoration: none; +} + +a.data-table-star-on { + background-position: 0 0; +} + +a.data-table-star-off { + background-position: -17px 0; +} + +a.data-table-flag-on { + background-position: 0 -17px; +} + +a.data-table-flag-off { + background-position: -17px -17px; +} + +.data-table-cell-editor, .data-table-topic-popup { + border: 1px solid #bcf; + background: #e3e9ff; + padding: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; +} + +.data-table-topic-popup-header { + padding: 0 0 5px; +} + +.data-table-cell-editor-editor { + display: block; + width: 98%; + height: 3em; + font-family: monospace; + margin: 3px 0; +} + +.data-table-cell-editor-action { + float: left; + vertical-align: bottom; + text-align: center; +} + +.data-table-cell-editor-key { + font-size: 0.8em; + color: #999; +} + +ul.sorting-dialog-blank-error-positions { + margin: 0; + padding: 5px; + height: 10em; + border: 1px solid #ccc; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; +} + +ul.sorting-dialog-blank-error-positions > li { + display: block; + border: 1px solid #ccc; + background: #eee; + padding: 5px; + margin: 2px; + cursor: move; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; +} \ No newline at end of file diff --git a/attachments/style/demo.css b/attachments/style/demo.css index 367153da..92a4d279 100644 --- a/attachments/style/demo.css +++ b/attachments/style/demo.css @@ -1,29 +1,20 @@ /** * 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; } + .container { margin: 0px auto; } + #main { 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; } + #download {float: right; position: relative; top: 3px; right: 5px;} #database{overflow:hidden;} #database h2{margin:0;} #database .group{border-top:1px solid #bedce7;}