Initial commit: working prototype from https://github.com/evnix/codowik/commit/9ca54b...
authorJonathan Schatz <jonathan.schatz@bc.libraries.coop>
Fri, 17 Aug 2018 05:40:51 +0000 (22:40 -0700)
committerJonathan Schatz <jonathan.schatz@bc.libraries.coop>
Fri, 17 Aug 2018 05:40:51 +0000 (22:40 -0700)
Signed-off-by: Jonathan Schatz <jonathan.schatz@bc.libraries.coop>
70 files changed:
README.md [new file with mode: 0755]
bootstrap.php [new file with mode: 0755]
css/_admin.css [new file with mode: 0755]
css/_diff.css [new file with mode: 0755]
css/_edit.css [new file with mode: 0755]
css/_fileuploader.css [new file with mode: 0755]
css/_footnotes.css [new file with mode: 0755]
css/_forms.css [new file with mode: 0755]
css/_imgdetail.css [new file with mode: 0755]
css/_links.css [new file with mode: 0755]
css/_media_fullscreen.css [new file with mode: 0755]
css/_media_popup.css [new file with mode: 0755]
css/_modal.css [new file with mode: 0755]
css/_recent.css [new file with mode: 0755]
css/_search.css [new file with mode: 0755]
css/_tabs.css [new file with mode: 0755]
css/_toc.css [new file with mode: 0755]
css/basic.less [new file with mode: 0755]
css/content.less [new file with mode: 0755]
css/design.less [new file with mode: 0755]
css/mixins.less [new file with mode: 0755]
css/mobile.less [new file with mode: 0755]
css/pagetools.less [new file with mode: 0755]
css/print.css [new file with mode: 0755]
css/structure.less [new file with mode: 0755]
css/ui.layout.css [new file with mode: 0755]
detail.php [new file with mode: 0755]
header.html [new file with mode: 0644]
images/apple-touch-icon.png [new file with mode: 0755]
images/button-css.png [new file with mode: 0755]
images/button-donate.gif [new file with mode: 0755]
images/button-dw.png [new file with mode: 0755]
images/button-html5.png [new file with mode: 0755]
images/button-php.gif [new file with mode: 0755]
images/button-rss.png [new file with mode: 0755]
images/codo_logo.png [new file with mode: 0755]
images/codo_logo_s.png [new file with mode: 0755]
images/favicon.ico [new file with mode: 0755]
images/license.txt [new file with mode: 0755]
images/logo.png [new file with mode: 0755]
images/page-background.svg [new file with mode: 0755]
images/page-gradient.png [new file with mode: 0755]
images/pagetools-build.php [new file with mode: 0755]
images/pagetools-sprite.png [new file with mode: 0755]
images/pagetools/00_default.png [new file with mode: 0755]
images/pagetools/01_edit.png [new file with mode: 0755]
images/pagetools/02_create.png [new file with mode: 0755]
images/pagetools/03_draft.png [new file with mode: 0755]
images/pagetools/04_show.png [new file with mode: 0755]
images/pagetools/05_source.png [new file with mode: 0755]
images/pagetools/06_revert.png [new file with mode: 0755]
images/pagetools/07_revisions.png [new file with mode: 0755]
images/pagetools/08_backlink.png [new file with mode: 0755]
images/pagetools/09_subscribe.png [new file with mode: 0755]
images/pagetools/10_top.png [new file with mode: 0755]
images/pagetools/11_mediamanager.png [new file with mode: 0755]
images/pagetools/12_back.png [new file with mode: 0755]
images/pagetools/license.txt [new file with mode: 0755]
images/search.png [new file with mode: 0755]
images/toc-arrows.png [new file with mode: 0755]
images/toc-bullet.png [new file with mode: 0755]
images/usertools.png [new file with mode: 0755]
js/layout.js [new file with mode: 0755]
main.php [new file with mode: 0755]
mediamanager.php [new file with mode: 0755]
script.js [new file with mode: 0755]
style.ini [new file with mode: 0755]
template.info.txt [new file with mode: 0755]
tpl_footer.php [new file with mode: 0755]
tpl_header.php [new file with mode: 0755]

diff --git a/README.md b/README.md
new file mode 100755 (executable)
index 0000000..537ee4c
--- /dev/null
+++ b/README.md
@@ -0,0 +1,4 @@
+codowik
+=======
+
+now convert dokuwiki engine into a professional wiki with codowik template
diff --git a/bootstrap.php b/bootstrap.php
new file mode 100755 (executable)
index 0000000..7a9ed71
--- /dev/null
@@ -0,0 +1,12 @@
+<?php
+
+/**
+ * Returns HTML string with script tag
+ * @param  string $filename
+ * @return string
+ */
+function tpl_js($filename)
+{
+       $filepath = DOKU_TPL . 'js' . DIRECTORY_SEPARATOR . $filename;
+       return "<script type=\"application/javascript\" src=\"{$filepath}\"></script>";
+}
\ No newline at end of file
diff --git a/css/_admin.css b/css/_admin.css
new file mode 100755 (executable)
index 0000000..a9518d0
--- /dev/null
@@ -0,0 +1,59 @@
+/**
+ * This file provides styles for the Administration overview
+ * (?do=admin).
+ */
+
+.dokuwiki ul.admin_tasks {
+    float: left;
+    width: 40%;
+    list-style-type: none;
+    font-size: 1.125em;
+}
+[dir=rtl] .dokuwiki ul.admin_tasks {
+    float: right;
+}
+
+.dokuwiki ul.admin_tasks li {
+    padding-left: 35px;
+    margin: 0 0 1em 0;
+    font-weight: bold;
+    list-style-type: none;
+    background: transparent none no-repeat scroll 0 0;
+    color: inherit;
+}
+[dir=rtl] .dokuwiki ul.admin_tasks li {
+    padding-left: 0;
+    padding-right: 35px;
+    background-position: right 0;
+}
+
+.dokuwiki ul.admin_tasks li.admin_acl {
+    background-image: url(../../images/admin/acl.png);
+}
+.dokuwiki ul.admin_tasks li.admin_usermanager {
+    background-image: url(../../images/admin/usermanager.png);
+}
+.dokuwiki ul.admin_tasks li.admin_plugin {
+    background-image: url(../../images/admin/plugin.png);
+}
+.dokuwiki ul.admin_tasks li.admin_config {
+    background-image: url(../../images/admin/config.png);
+}
+.dokuwiki ul.admin_tasks li.admin_revert {
+    background-image: url(../../images/admin/revert.png);
+}
+.dokuwiki ul.admin_tasks li.admin_popularity {
+    background-image: url(../../images/admin/popularity.png);
+}
+
+/* DokuWiki version below */
+.dokuwiki #admin__version {
+    clear: left;
+    float: right;
+    color: @ini_text_neu;
+    background-color: inherit;
+}
+[dir=rtl] .dokuwiki #admin__version {
+    clear: right;
+    float: left;
+}
diff --git a/css/_diff.css b/css/_diff.css
new file mode 100755 (executable)
index 0000000..b7c82d8
--- /dev/null
@@ -0,0 +1,75 @@
+/**
+ * This file provides styles for the diff view, which shows you
+ * differences between two versions of a page (?do=diff).
+ */
+
+.dokuwiki table.diff {
+    width: 100%;
+    border-width: 0;
+}
+.dokuwiki table.diff th,
+.dokuwiki table.diff td {
+    vertical-align: top;
+    padding: 0;
+    border-width: 0;
+    /* no style.ini colours because deleted and added lines have a fixed background colour */
+    background-color: #fff;
+    color: #333;
+}
+
+/* table header */
+.dokuwiki table.diff th {
+    border-bottom: 1px solid @ini_border;
+    font-size: 110%;
+    font-weight: normal;
+}
+.dokuwiki table.diff th a {
+    font-weight: bold;
+}
+.dokuwiki table.diff th span.user {
+    font-size: .9em;
+}
+.dokuwiki table.diff th span.sum {
+    font-size: .9em;
+    font-weight: bold;
+}
+.dokuwiki table.diff th.minor {
+    color: #999;
+}
+.dokuwiki table.diff_sidebyside th {
+    width: 50%;
+}
+
+/* table body */
+.dokuwiki table.diff .diff-lineheader {
+    width: .7em;
+    text-align: right;
+}
+[dir=rtl] .dokuwiki table.diff .diff-lineheader {
+    text-align: left;
+}
+.dokuwiki table.diff .diff-lineheader,
+.dokuwiki table.diff td {
+    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
+}
+.dokuwiki table.diff td.diff-blockheader {
+    font-weight: bold;
+}
+.dokuwiki table.diff .diff-addedline {
+    background-color: #cfc;
+    color: inherit;
+}
+.dokuwiki table.diff .diff-deletedline {
+    background-color: #fdd;
+    color: inherit;
+}
+.dokuwiki table.diff td.diff-context {
+    background-color: #eee;
+    color: inherit;
+}
+.dokuwiki table.diff td.diff-addedline strong,
+.dokuwiki table.diff td.diff-deletedline strong {
+    color: #f00;
+    background-color: inherit;
+    font-weight: bold;
+}
diff --git a/css/_edit.css b/css/_edit.css
new file mode 100755 (executable)
index 0000000..f40aaa8
--- /dev/null
@@ -0,0 +1,143 @@
+/**
+ * This file provides styles for the edit view (?do=edit), preview
+ * and section edit buttons.
+ */
+
+/* edit view
+********************************************************************/
+
+.dokuwiki div.editBox {
+}
+
+/*____________ toolbar ____________*/
+
+.dokuwiki div.toolbar {
+    margin-bottom: .5em;
+}
+#draft__status {
+    float: right;
+    color: @ini_text_alt;
+    background-color: inherit;
+}
+[dir=rtl] #draft__status {
+    float: left;
+}
+#tool__bar {
+    float: left;
+}
+[dir=rtl] #tool__bar {
+    float: right;
+}
+
+/* buttons inside of toolbar */
+.dokuwiki div.toolbar button.toolbutton {
+}
+/* picker popups (outside of .dokuwiki) */
+div.picker {
+    width: 300px;
+    border: 1px solid @ini_border;
+    background-color: @ini_background_alt;
+    color: inherit;
+}
+/* picker for headlines */
+div.picker.pk_hl {
+    width: auto;
+}
+
+/* buttons inside of picker */
+div.picker button.pickerbutton,
+div.picker button.toolbutton {
+    padding: .1em .35em;
+    border-width: 0;
+}
+
+/*____________ edit textarea ____________*/
+
+.dokuwiki textarea.edit {
+    /* should just be "width: 100%", but IE8 doesn't like it, see FS#1910 + FS#1667 */
+    width: 700px;
+    min-width: 100%;
+    max-width: 100%;
+    margin-bottom: .5em;
+}
+
+/*____________ below the textarea ____________*/
+
+.dokuwiki div.editBar {
+    overflow: hidden;
+    margin-bottom: .5em;
+}
+
+/* size and wrap controls */
+#size__ctl {
+    float: right;
+}
+[dir=rtl] #size__ctl {
+    float: left;
+}
+#size__ctl img {
+    cursor: pointer;
+}
+
+/* edit buttons */
+.dokuwiki .editBar .editButtons {
+    display: inline;
+    margin-right: 1em;
+}
+[dir=rtl] .dokuwiki .editBar .editButtons {
+    margin-right: 0;
+    margin-left: 1em;
+}
+.dokuwiki .editBar .editButtons input {
+}
+
+/* summary input and minor changes checkbox */
+.dokuwiki .editBar .summary {
+    display: inline;
+}
+.dokuwiki .editBar .summary label {
+    vertical-align: middle;
+    white-space: nowrap;
+}
+.dokuwiki .editBar .summary label span {
+    vertical-align: middle;
+}
+.dokuwiki .editBar .summary input {
+}
+/* change background colour if summary is missing */
+.dokuwiki .editBar .summary input.missing {
+    color: @ini_text;
+    background-color: #ffcccc;
+}
+
+/* preview
+********************************************************************/
+
+.dokuwiki div.preview {
+    border: dotted @ini_border;
+    border-width: .2em 0;
+    padding: 1.4em 0;
+    margin-bottom: 1.4em;
+}
+
+/* section edit buttons
+********************************************************************/
+
+.dokuwiki .secedit {
+    float: right;
+    margin-top: -1.4em;
+}
+[dir=rtl] .dokuwiki .secedit {
+    float: left;
+}
+.dokuwiki .secedit input.button {
+    font-size: 75%;
+}
+
+/* style for section highlighting */
+.dokuwiki div.section_highlight {
+    margin: 0 -1em; /* negative side margin = side padding + side border */
+    padding: 0 .5em;
+    border: solid @ini_background_alt;
+    border-width: 0 .5em;
+}
diff --git a/css/_fileuploader.css b/css/_fileuploader.css
new file mode 100755 (executable)
index 0000000..3c2cd46
--- /dev/null
@@ -0,0 +1,112 @@
+/**
+ * This file provides the styles for the file uploader
+ * used in the media manager (both fullscreen and popup).
+ */
+
+.qq-uploader {
+    position: relative;
+    width: 100%;
+}
+
+.qq-uploader .error {
+    color: #f00;
+    background-color: #fff;
+}
+
+/* select file button */
+
+.qq-upload-button {
+    display: inline-block;
+    text-decoration: none;
+    font-size: 100%;
+    cursor: pointer;
+    margin: 1px 1px 5px;
+}
+
+* html .qq-upload-button,
+*+html .qq-upload-button {
+    display: inline;
+}
+
+.qq-upload-button-focus {
+    outline: 1px dotted;
+}
+
+/* drop area */
+
+.qq-upload-drop-area {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    min-height: 70px;
+    z-index: 2;
+    background: @ini_background_neu;
+    color: @ini_text;
+    text-align: center;
+}
+
+.qq-upload-drop-area span {
+    display: block;
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    margin-top: -8px;
+    font-size: 120%;
+}
+
+.qq-upload-drop-area-active {
+    background: @ini_background_alt;
+}
+
+/* list of files to upload */
+
+div.qq-uploader ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.qq-uploader li {
+    margin: 0 0 5px;
+    color: @ini_text;
+}
+
+.qq-uploader li span,
+.qq-uploader li input,
+.qq-uploader li a {
+    margin-right: 5px;
+}
+
+.qq-upload-file {
+    display: block;
+    font-weight: bold;
+}
+
+.qq-upload-spinner {
+    display: inline-block;
+    background: url("../../images/throbber.gif");
+    width: 15px;
+    height: 15px;
+    vertical-align: text-bottom;
+}
+
+.qq-upload-size,
+.qq-upload-cancel {
+    font-size: 85%;
+}
+
+.qq-upload-failed-text {
+    display: none;
+}
+.qq-upload-fail .qq-upload-failed-text {
+    display: inline;
+}
+
+.qq-action-container * {
+    vertical-align: middle;
+}
+.qq-overwrite-check input {
+    margin-left: 10px;
+}
diff --git a/css/_footnotes.css b/css/_footnotes.css
new file mode 100755 (executable)
index 0000000..5d5f7ca
--- /dev/null
@@ -0,0 +1,28 @@
+/**
+ * This file provides styles for footnotes.
+ */
+
+/*____________ footnotes inside the text ____________*/
+
+/* link to footnote inside the text */
+.dokuwiki sup a.fn_top {
+}
+/* JSpopup */
+div.insitu-footnote {
+    max-width: 40%;
+    min-width: 5em;
+}
+
+/*____________ footnotes at the bottom of the page ____________*/
+
+.dokuwiki div.footnotes {
+    border-top: 1px solid @ini_border;
+    padding: .5em 0 0 0;
+    margin: 1em 0 0 0;
+    clear: both;
+}
+.dokuwiki div.footnotes div.fn {
+}
+.dokuwiki div.footnotes div.fn sup a.fn_bot {
+    font-weight: bold;
+}
diff --git a/css/_forms.css b/css/_forms.css
new file mode 100755 (executable)
index 0000000..522f9ed
--- /dev/null
@@ -0,0 +1,107 @@
+/* TODO: this file is not up to the best standards and will be fixed after an overhaul of the form code */
+
+/**
+ * This file provides styles for forms in general and specifically
+ * for ?do=
+ *   - login
+ *   - resendpwd
+ *   - register
+ *   - profile
+ *   - subscribe
+ */
+
+/* ---------------- forms ------------------------ */
+
+.dokuwiki form {
+  border: none;
+  display: inline;
+}
+
+.dokuwiki label.block {
+  display: block;
+  text-align: right;
+  font-weight: bold;
+}
+[dir=rtl] .dokuwiki label.block {
+    text-align: left;
+}
+
+.dokuwiki label.simple {
+  display: block;
+  text-align: left;
+  font-weight: normal;
+}
+[dir=rtl] .dokuwiki label.simple {
+    text-align: right;
+}
+
+.dokuwiki label.block select,
+.dokuwiki label.block input.edit {
+  width: 50%;
+}
+
+.dokuwiki label span {
+    vertical-align: middle;
+}
+
+.dokuwiki fieldset {
+  width: 400px;
+  text-align: center;
+  border: 1px solid @ini_border;
+  padding: 0.5em;
+  margin: auto;
+}
+
+
+.dokuwiki input.edit,
+.dokuwiki select.edit {
+  vertical-align: middle;
+}
+.dokuwiki select.edit {
+  padding: 0.1em 0;
+}
+
+
+.dokuwiki input.button,
+.dokuwiki button.button {
+    vertical-align: middle;
+}
+/**
+ * Styles for auth forms
+ */
+#dw__login label[for="remember__me"] {
+    margin-left: 50%;
+    margin-bottom: 1.4em;
+}
+#dw__login fieldset,
+#dw__resendpwd fieldset,
+#dw__register fieldset {
+    padding-bottom: 0.7em;
+}
+#dw__profiledelete {
+    display: block;
+    margin-top: 2.8em;
+}
+
+/**
+ * Styles for the subscription page
+ */
+
+#subscribe__form {
+    display: block;
+    width: 400px;
+    text-align: center;
+}
+
+#subscribe__form fieldset {
+    text-align: left;
+    margin: 0.5em 0;
+}
+[dir=rtl] #subscribe__form fieldset {
+    text-align: right;
+}
+
+#subscribe__form label {
+    display: block;
+    margin: 0 0.5em 0.5em;
+}
diff --git a/css/_imgdetail.css b/css/_imgdetail.css
new file mode 100755 (executable)
index 0000000..a074000
--- /dev/null
@@ -0,0 +1,38 @@
+/**
+ * This file provides styles for the image detail page (detail.php).
+ */
+
+#dokuwiki__detail {
+    padding: 1em;
+}
+#dokuwiki__detail h1 {
+}
+
+#dokuwiki__detail img {
+    float: left;
+    margin: 0 1.5em .5em 0;
+}
+[dir=rtl] #dokuwiki__detail div.content img {
+    float: right;
+    margin-right: 0;
+    margin-left: 1.5em;
+}
+#dokuwiki__detail div.img_detail {
+    float: left;
+}
+[dir=rtl] #dokuwiki__detail div.content div.img_detail {
+    float: right
+}
+
+#dokuwiki__detail div.img_detail h2 {
+}
+#dokuwiki__detail div.img_detail dl {
+}
+#dokuwiki__detail div.img_detail dl dt {
+}
+#dokuwiki__detail div.img_detail dl dd {
+}
+
+#dokuwiki__detail p.back {
+    clear: both;
+}
diff --git a/css/_links.css b/css/_links.css
new file mode 100755 (executable)
index 0000000..7e5fb02
--- /dev/null
@@ -0,0 +1,70 @@
+/**
+ * This file provides styles for all types of links.
+ */
+
+/*____________ links to wiki pages ____________*/
+
+/* existing wikipage */
+.dokuwiki a.wikilink1 {
+}
+/* not existing wikipage */
+.dokuwiki a.wikilink2 {
+    text-decoration: none;
+}
+.dokuwiki a.wikilink2:link,
+.dokuwiki a.wikilink2:visited {
+    border-bottom: 1px dashed;
+}
+.dokuwiki a.wikilink2:hover,
+.dokuwiki a.wikilink2:active,
+.dokuwiki a.wikilink2:focus {
+    border-bottom-width: 0;
+}
+
+/* any link to current page */
+.dokuwiki span.curid a {
+    font-weight: bold;
+}
+
+/*____________ other link types ____________*/
+
+.dokuwiki a.urlextern,
+.dokuwiki a.windows,
+.dokuwiki a.mail,
+.dokuwiki a.mediafile,
+.dokuwiki a.interwiki {
+    background-repeat: no-repeat;
+    background-position: 0 center;
+    padding: 0 0 0 18px;
+}
+/* external link */
+.dokuwiki a.urlextern {
+    background-image: url(../../images/external-link.png);
+}
+/* windows share */
+.dokuwiki a.windows {
+    background-image: url(../../images/unc.png);
+}
+/* email link */
+.dokuwiki a.mail {
+    background-image: url(../../images/email.png);
+}
+
+/* icons of the following are set by dokuwiki in lib/exe/css.php */
+/* link to some embedded media */
+.dokuwiki a.mediafile {
+}
+/* interwiki link */
+.dokuwiki a.interwiki {
+}
+
+/* RTL corrections; if link icons don't work as expected, remove the following lines */
+[dir=rtl] .dokuwiki a.urlextern,
+[dir=rtl] .dokuwiki a.windows,
+[dir=rtl] .dokuwiki a.mail,
+[dir=rtl] .dokuwiki a.interwiki,
+[dir=rtl] .dokuwiki a.mediafile {
+    background-position: right center;
+    padding: 0 18px 0 0;
+    display: inline-block; /* needed for IE7 */
+}
diff --git a/css/_media_fullscreen.css b/css/_media_fullscreen.css
new file mode 100755 (executable)
index 0000000..31b7189
--- /dev/null
@@ -0,0 +1,503 @@
+/**
+ * This file provides the styles for the fullscreen media manager
+ * (?do=media).
+ *
+ * What most templates would probably need to change (depending on
+ * their site width) are the 4 min-width's (search for @change).
+ */
+
+
+/*____________ structure ____________*/
+
+#mediamanager__page h1 {
+    margin-bottom: .5em;
+}
+
+#mediamanager__page {
+    /* min-width must be summary of all 3 panels' min-widths */
+    min-width: 50em; /* @change */
+    width: 100%;
+    text-align: left;
+}
+
+#mediamanager__page .panel {
+    float: left;
+}
+
+#mediamanager__page .namespaces {
+    width: 20%;
+    min-width: 10em; /* @change */
+}
+#mediamanager__page .filelist {
+    width: 50%;
+    min-width: 25em; /* @change */
+}
+#mediamanager__page .file {
+    width: 30%;
+    min-width: 15em; /* @change */
+}
+
+#mediamanager__page .panelHeader {
+    background-color: @ini_background_alt;
+    margin: 0 10px 10px 0;
+    padding: 10px 10px 8px;
+    text-align: left;
+    min-height: 20px;
+    overflow: hidden;
+}
+
+#mediamanager__page .panelContent {
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0;
+    margin: 0 10px 10px 0;
+    position: relative;
+}
+[dir=rtl] #mediamanager__page .panelContent {
+    text-align: right;
+}
+
+#mediamanager__page .file .panelHeader,
+#mediamanager__page .file .panelContent {
+    margin-right: 0;
+}
+
+#mediamanager__page .ui-resizable-e {
+    width: 6px;
+    right: 2px;
+    background: transparent url(../../images/resizecol.png) center center no-repeat;
+}
+#mediamanager__page .ui-resizable-e:hover {
+    background-color: @ini_background_alt;
+}
+
+
+#mediamanager__page dd {
+    margin: 0;
+}
+
+#mediamanager__page .panelHeader h3 {
+    float: left;
+    font-weight: normal;
+    font-size: 1em;
+    padding: 0;
+    margin: 0 0 3px;
+}
+
+
+/*____________ namespaces panel ____________*/
+
+[dir=rtl] #mediamanager__page .namespaces {
+    text-align: right;
+}
+
+/* make it look like a tab (as in _tabs.css) */
+#mediamanager__page .namespaces h2 {
+    font-size: 1em;
+    display: inline-block;
+    padding: .3em .8em;
+    margin: 0 0 0 .3em;
+    border-radius: .5em .5em 0 0;
+    font-weight: normal;
+    background-color: @ini_background_alt;
+    color: @ini_text;
+    border: 1px solid @ini_border;
+    border-bottom-color: @ini_background_alt;
+    line-height: 1.4em;
+    position: relative;
+    bottom: -1px;
+    z-index: 2;
+}
+* html #mediamanager__page .namespaces h2,
+*+html #mediamanager__page .namespaces h2 {
+    display: inline;
+}
+[dir=rtl] #mediamanager__page .namespaces h2 {
+    margin: 0 .3em 0 0;
+    position: relative;
+    right: 10px;
+}
+#mediamanager__page .namespaces .panelHeader {
+    border-top: 1px solid @ini_border;
+    z-index: 1;
+}
+
+#mediamanager__page .namespaces ul {
+    margin-left: .2em;
+    margin-bottom: 0;
+    padding: 0;
+    list-style: none;
+}
+[dir=rtl] #mediamanager__page .namespaces ul {
+    margin-left: 0;
+    margin-right: .2em;
+}
+#mediamanager__page .namespaces ul ul {
+    margin-left: 1em;
+}
+[dir=rtl] #mediamanager__page .namespaces ul ul {
+    margin-left: 0;
+    margin-right: 1em;
+}
+#mediamanager__page .namespaces ul ul li {
+    margin: 0;
+}
+
+#mediamanager__page .namespaces ul .selected {
+    background-color: __highlight__;
+    font-weight: bold;
+}
+
+
+/*____________ file list panel ____________*/
+
+/* file list header */
+
+#mediamanager__page .panelHeader form.options {
+    float: right;
+    margin-top: -3px;
+}
+
+#mediamanager__page .panelHeader ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+#mediamanager__page .panelHeader ul li {
+    color: @ini_text;
+    float: left;
+    line-height: 1;
+    padding-left: 3px;
+}
+[dir=rtl] #mediamanager__page .panelHeader ul li {
+    margin-right: 0;
+    margin-left: .5em;
+}
+
+#mediamanager__page .panelHeader ul li.listType {
+    padding-left: 30px;
+    margin: 0 0 0 5px;
+    background: url('../../images/icon-list.png') 3px 1px no-repeat;
+}
+#mediamanager__page .panelHeader ul li.sortBy {
+    padding-left: 30px;
+    margin: 0 0 0 5px;
+    background: url('../../images/icon-sort.png') 3px 1px no-repeat;
+}
+
+#mediamanager__page .panelHeader form.options .ui-buttonset label{
+    font-size: 90%;
+    margin-right: -0.4em;
+}
+#mediamanager__page .panelHeader form.options .ui-buttonset .ui-button-text {
+    padding: .3em .5em;
+    line-height: 1;
+}
+
+/* file list content */
+
+#mediamanager__page .filelist ul {
+    padding: 0;
+    margin: 0 10px 0 0;
+}
+[dir=rtl] #mediamanager__page .filelist ul {
+    margin: 0 10px 0 0;
+}
+
+#mediamanager__page .filelist .panelContent ul li:hover {
+    background-color: @ini_background_alt;
+}
+
+#mediamanager__page .filelist li dt a {
+    vertical-align: middle;
+    display: table-cell;
+    overflow: hidden;
+}
+* html #mediamanager__page .filelist .thumbs li dt a,
+*+html #mediamanager__page .filelist .thumbs li dt a {
+    display: block;
+}
+* html #mediamanager__page .filelist .rows li dt a,
+*+html #mediamanager__page .filelist .rows li dt a {
+    display: inline;
+}
+
+/* file list as thumbs */
+
+#mediamanager__page .filelist .thumbs li {
+    width: 100px;
+    min-height: 130px;
+    display: inline-block;
+    display: -moz-inline-stack;
+    /* the right margin should visually be 10px, but because of its inline-block nature the whitespace inbetween is about 4px more */
+    margin: 0 6px 10px 0;
+    background-color: @ini_background_neu;
+    color: @ini_text;
+    padding: 5px;
+    vertical-align: top;
+    text-align: center;
+    position: relative;
+    line-height: 1.2;
+}
+[dir=rtl] #mediamanager__page .filelist .thumbs li {
+    margin-right: 0;
+    margin-left: 6px;
+}
+* html #mediamanager__page .filelist .thumbs li,
+*+html #mediamanager__page .filelist .thumbs li {
+    display: inline;
+    zoom: 1;
+}
+
+#mediamanager__page .filelist .thumbs li dt a {
+    width: 100px;
+    height: 90px;
+}
+
+#mediamanager__page .filelist .thumbs li dt a img {
+    max-width: 90px;
+    max-height: 90px;
+}
+
+#mediamanager__page .filelist .thumbs li .name,
+#mediamanager__page .filelist .thumbs li .size,
+#mediamanager__page .filelist .thumbs li .filesize,
+#mediamanager__page .filelist .thumbs li .date {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 90px;
+    white-space: nowrap;
+}
+#mediamanager__page .filelist .thumbs li .name {
+    padding: 5px 0;
+    font-weight: bold;
+}
+#mediamanager__page .filelist .thumbs li .date {
+    font-style: italic;
+    white-space: normal;
+}
+
+/* file list as rows */
+
+#mediamanager__page .filelist .rows li {
+    list-style: none;
+    display: block;
+    position: relative;
+    max-height: 50px;
+    margin: 0;
+    margin-bottom: 3px;
+    background-color: @ini_background;
+    color: @ini_text;
+    overflow: hidden;
+}
+
+#mediamanager__page .filelist .rows li:nth-child(2n+1) {
+    background-color: @ini_background_neu;
+}
+
+#mediamanager__page .filelist .rows li dt {
+    float: left;
+    width: 10%;
+    height: 40px;
+    text-align: center;
+}
+
+#mediamanager__page .filelist .rows li dt a {
+    width: 100px;
+    height: 40px;
+}
+
+#mediamanager__page .filelist .rows li dt a img {
+    max-width: 40px;
+    max-height: 40px;
+}
+
+#mediamanager__page .filelist .rows li .name,
+#mediamanager__page .filelist .rows li .size,
+#mediamanager__page .filelist .rows li .filesize,
+#mediamanager__page .filelist .rows li .date {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    float: left;
+    margin-left: 1%;
+    white-space: nowrap;
+}
+
+#mediamanager__page .filelist .rows li .name {
+    width: 30%;
+    font-weight: bold;
+}
+#mediamanager__page .filelist .rows li .size,
+#mediamanager__page .filelist .rows li .filesize {
+    width: 15%;
+}
+#mediamanager__page .filelist .rows li .date {
+    width: 20%;
+    font-style: italic;
+    white-space: normal;
+}
+
+/* upload form */
+
+#mediamanager__page div.upload {
+    padding-bottom: 0.5em;
+}
+
+/*____________ file panel ____________*/
+
+#mediamanager__page .file ul.actions {
+    text-align: center;
+    margin: 0 0 5px;
+    padding: 0;
+    list-style: none;
+}
+#mediamanager__page .file ul.actions li {
+    display: inline;
+    margin: 0;
+}
+
+#mediamanager__page .file div.image {
+    margin-bottom: 5px;
+    text-align: center;
+}
+
+#mediamanager__page .file div.image img {
+    width: 100%;
+}
+
+#mediamanager__page .file dl {
+    margin-bottom: 0;
+}
+#mediamanager__page .file dl dt {
+    font-weight: bold;
+    display: block;
+    background-color: @ini_background_alt;
+}
+#mediamanager__page .file dl dd {
+    display: block;
+    background-color: @ini_background_neu;
+}
+
+
+/* file meta data edit form */
+
+#mediamanager__page form.meta div.row {
+    margin-bottom: 5px;
+}
+
+#mediamanager__page form.meta label span {
+    display: block;
+}
+
+#mediamanager__page form.meta input {
+    width: 50%;
+}
+
+#mediamanager__page form.meta input.button {
+    width: auto;
+}
+
+#mediamanager__page form.meta textarea.edit {
+    height: 6em;
+    width: 95%;
+    min-width: 95%;
+    max-width: 95%;
+}
+
+/* file revisions form */
+
+#mediamanager__page #page__revisions ul {
+    margin-left: 10px;
+    padding: 0;
+    list-style-type: none;
+}
+
+#mediamanager__page #page__revisions ul li div.li div {
+    font-size: 90%;
+    color: @ini_text_neu;
+    padding-left: 18px;
+}
+
+#mediamanager__page #page__revisions ul li div.li input {
+    position: relative;
+    top: 1px;
+}
+
+/* file diff view */
+
+#mediamanager__diff table {
+    table-layout: fixed;
+    border-width: 0;
+}
+
+#mediamanager__diff td,
+#mediamanager__diff th {
+    width: 48%;
+    margin: 0 5px 10px 0;
+    padding: 0;
+    vertical-align: top;
+    text-align: left;
+    border-color: @ini_background;
+}
+[dir=rtl] #mediamanager__diff td,
+[dir=rtl] #mediamanager__diff th {
+    text-align: right;
+}
+
+#mediamanager__diff th {
+    font-weight: normal;
+    background-color: @ini_background;
+    line-height: 1.2;
+}
+#mediamanager__diff th a {
+    font-weight: bold;
+}
+#mediamanager__diff th span {
+    font-size: 90%;
+}
+
+#mediamanager__diff dl dd strong{
+    background-color: __highlight__;
+    color: @ini_text;
+    font-weight: normal;
+}
+
+/* image diff views */
+
+#mediamanager__page .file form.diffView {
+    margin-bottom: 10px;
+    display: block;
+}
+
+#mediamanager__diff div.slider {
+    margin: 10px;
+    width: 95%;
+}
+
+#mediamanager__diff .imageDiff {
+    position: relative;
+}
+#mediamanager__diff .imageDiff .image2 {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+#mediamanager__diff .imageDiff.opacity .image2 {
+    opacity: 0.5;
+}
+
+#mediamanager__diff .imageDiff.portions .image2 {
+    border-right: 1px solid red;
+    overflow: hidden;
+}
+
+#mediamanager__diff .imageDiff.portions img {
+    float: left;
+}
+
+#mediamanager__diff .imageDiff img {
+    width: 100%;
+    max-width: none;
+}
diff --git a/css/_media_popup.css b/css/_media_popup.css
new file mode 100755 (executable)
index 0000000..20d669c
--- /dev/null
@@ -0,0 +1,258 @@
+/**
+ * This file provides styles for the media manager popup
+ * (mediamanager.php).
+ */
+
+/*____________ structure ____________*/
+
+html.popup {
+    overflow: auto;
+}
+
+#media__manager {
+    height: 100%;
+    overflow: hidden;
+}
+
+#mediamgr__aside {
+    width: 30%;
+    height: 100%;
+    overflow: auto;
+    position: absolute;
+    left: 0;
+    border-right: 1px solid @ini_border;
+}
+[dir=rtl] #mediamgr__aside {
+    left: auto;
+    right: 0;
+    border-right-width: 0;
+    border-left: 1px solid @ini_border;
+}
+#mediamgr__aside .pad {
+    padding: .5em;
+}
+
+#mediamgr__content {
+    width: 69.7%;
+    height: 100%;
+    overflow: auto;
+    position: absolute;
+    right: 0;
+}
+[dir=rtl] #mediamgr__content {
+    right: auto;
+    left: 0;
+}
+#mediamgr__content .pad {
+    padding: .5em;
+}
+
+#media__manager h1,
+#media__manager h2 {
+    font-size: 1.5em;
+    margin-bottom: .5em;
+    padding-bottom: .2em;
+    border-bottom: 1px solid @ini_border;
+}
+
+/* left side
+********************************************************************/
+
+/*____________ options ____________*/
+
+#media__opts {
+    margin-bottom: .5em;
+}
+
+#media__opts input {
+    margin-right: .3em;
+}
+[dir=rtl] #media__opts input {
+    margin-right: 0;
+    margin-left: .3em;
+}
+#media__opts label {
+}
+
+/*____________ tree ____________*/
+
+#media__tree ul {
+    padding-left: .2em;
+}
+[dir=rtl] #media__tree ul {
+    padding-left: 0;
+    padding-right: .2em;
+}
+#media__tree ul li {
+    clear: left;
+    list-style-type: none;
+    list-style-image: none;
+    margin-left: 0;
+}
+[dir=rtl] #media__tree ul li {
+    clear: right;
+    margin-right: 0;
+}
+#media__tree ul li img {
+    float: left;
+    padding: .5em .3em 0 0;
+}
+[dir=rtl] #media__tree ul li img {
+    float: right;
+    padding: .5em 0 0 .3em;
+}
+#media__tree ul li div.li {
+    display: inline;
+}
+#media__tree ul li li {
+    margin-left: 1.5em;
+}
+[dir=rtl] #media__tree ul li li {
+    margin-left: 0;
+    margin-right: 1.5em;
+}
+
+/* right side
+********************************************************************/
+
+/*____________ upload form ____________*/
+
+/* upload info */
+#media__content div.upload {
+    font-size: .9em;
+    margin-bottom: .5em;
+}
+
+#mediamanager__uploader {
+    margin-bottom: 1em;
+}
+#mediamanager__uploader p {
+    margin-bottom: .5em;
+}
+
+/*____________ file list ____________*/
+
+#media__content img.load {
+    margin: 1em auto;
+}
+
+#media__content .odd,
+#media__content .even {
+    padding: .5em;
+}
+#media__content .odd {
+    background-color: @ini_background_alt;
+}
+#media__content .even {
+}
+/* highlight newly uploaded or edited file */
+#media__content #scroll__here {
+    border: 1px dashed @ini_border;
+}
+
+/* link which inserts media file */
+#media__content a.mediafile {
+    margin-right: 1.5em;
+    font-weight: bold;
+    cursor: pointer;
+}
+[dir=rtl] #media__content a.mediafile {
+    margin-right: 0;
+    margin-left: 1.5em;
+}
+#media__content span.info {
+}
+#media__content img.btn {
+    vertical-align: text-bottom;
+}
+
+/* info how to insert media, if JS disabled */
+#media__content div.example {
+    color: @ini_text_neu;
+    margin-left: 1em;
+}
+
+#media__content div.detail {
+    padding: .2em 0;
+}
+#media__content div.detail div.thumb {
+    float: left;
+    margin: 0 .5em 0 18px;
+}
+[dir=rtl] #media__content div.detail div.thumb {
+    float: right;
+    margin: 0 18px 0 .5em;
+}
+#media__content div.detail div.thumb a {
+    display: block;
+    cursor: pointer;
+}
+#media__content div.detail p {
+    margin-bottom: 0;
+}
+
+
+/*____________ media search ____________*/
+
+#dw__mediasearch {
+}
+#dw__mediasearch p {
+}
+#dw__mediasearch label {
+}
+#dw__mediasearch label span {
+}
+#dw__mediasearch input.edit {
+}
+#dw__mediasearch input.button {
+}
+
+
+/* meta edit form
+********************************************************************/
+
+#media__content form.meta {
+}
+
+#media__content form.meta div.metafield {
+    clear: left;
+    margin-bottom: .5em;
+    overflow: hidden;
+}
+[dir=rtl] #media__content form.meta div.metafield {
+    clear: right;
+}
+
+#media__content form.meta label {
+    display: block;
+    width: 25%;
+    float: left;
+    font-weight: bold;
+    clear: left;
+}
+[dir=rtl] #media__content form.meta label {
+    float: right;
+    clear: right;
+}
+#media__content form.meta .edit {
+    float: left;
+    width: 70%;
+    margin: 0;
+}
+[dir=rtl] #media__content form.meta .edit {
+    float: right;
+}
+#media__content form.meta textarea.edit {
+    /* needed because of IE8 hack in _edit.css for textarea.edit: */
+    max-width: 70%;
+    min-width: 70%;
+}
+
+#media__content form.meta div.buttons {
+    clear: left;
+    margin: .2em 0 0 25%;
+}
+[dir=rtl] #media__content form.meta div.buttons {
+    clear: right;
+    margin: .2em 25% 0 0;
+}
diff --git a/css/_modal.css b/css/_modal.css
new file mode 100755 (executable)
index 0000000..a46dff3
--- /dev/null
@@ -0,0 +1,94 @@
+/**
+ * This file provides styles for modal dialogues.
+ */
+
+.dokuwiki .ui-widget {
+    font-size: 100%;
+}
+
+
+/* link wizard (opens from the link button in the edit toolbar)
+********************************************************************/
+
+#link__wiz {
+}
+
+[dir=rtl] #link__wiz_close {
+    float: left;
+}
+
+#link__wiz_result {
+    background-color: @ini_background;
+    width:  293px;
+    height: 193px;
+    overflow: auto;
+    border: 1px solid @ini_border;
+    margin: 3px auto;
+    text-align: left;
+    line-height: 1;
+}
+[dir=rtl] #link__wiz_result {
+    text-align: right;
+}
+
+#link__wiz_result div {
+    padding: 3px 3px 3px 0;
+}
+
+#link__wiz_result div a {
+    display: block;
+    padding-left: 22px;
+    min-height: 16px;
+    background: transparent 3px center no-repeat;
+}
+[dir=rtl] #link__wiz_result div a {
+    padding: 3px 22px 3px 3px;
+    background-position: 257px 3px;
+}
+
+#link__wiz_result div.type_u a {
+    background-image: url(../../images/up.png);
+}
+#link__wiz_result div.type_f a {
+    background-image: url(../../images/page.png);
+}
+#link__wiz_result div.type_d a {
+    background-image: url(../../images/ns.png);
+}
+
+#link__wiz_result div.even {
+    background-color: @ini_background_neu;
+}
+
+#link__wiz_result div.selected {
+    background-color: @ini_background_alt;
+}
+
+#link__wiz_result span {
+    display: block;
+    color: @ini_text_neu;
+    margin-left: 22px;
+}
+
+
+/* media option wizard (opens when inserting media in the media popup)
+********************************************************************/
+
+#media__popup {
+    /* for backwards compatibility (not needed since Rincewind) */
+    display: none;
+}
+
+#media__popup_content p {
+    margin: 0 0 .5em;
+}
+
+#media__popup_content label {
+    margin-right: .5em;
+    cursor: default;
+}
+
+#media__popup_content .button {
+    margin-right: 1px;
+    cursor: pointer;
+}
diff --git a/css/_recent.css b/css/_recent.css
new file mode 100755 (executable)
index 0000000..d73bb94
--- /dev/null
@@ -0,0 +1,59 @@
+/**
+ * This file provides styles for the recent changes (?do=recent) and
+ * old revisions (?do=revisions).
+ */
+
+/*____________ list of revisions / recent changes ____________*/
+
+/* select type of revisions (media/pages) */
+.dokuwiki .changeType {
+    margin-bottom: .5em;
+}
+
+.dokuwiki form.changes ul li {
+    list-style: none;
+    margin-left: 0;
+}
+[dir=rtl] .dokuwiki form.changes ul li {
+    margin-right: 0;
+}
+.dokuwiki form.changes ul li span,
+.dokuwiki form.changes ul li a {
+    vertical-align: middle;
+}
+.dokuwiki form.changes ul li span.user a {
+    vertical-align: bottom;
+}
+.dokuwiki form.changes ul li.minor {
+    opacity: .7;
+}
+
+.dokuwiki form.changes li span.date {
+}
+.dokuwiki form.changes li a.diff_link {
+    vertical-align: baseline;
+}
+.dokuwiki form.changes li a.revisions_link {
+    vertical-align: baseline;
+}
+.dokuwiki form.changes li a.wikilink1,
+.dokuwiki form.changes li a.wikilink2 {
+}
+.dokuwiki form.changes li span.sum {
+    font-weight: bold;
+}
+.dokuwiki form.changes li span.user {
+}
+
+
+/*____________ page navigator ____________*/
+
+.dokuwiki div.pagenav {
+    text-align: center;
+    margin: 1.4em 0;
+}
+.dokuwiki div.pagenav-prev,
+.dokuwiki div.pagenav-next {
+    display: inline;
+    margin: 0 .5em;
+}
diff --git a/css/_search.css b/css/_search.css
new file mode 100755 (executable)
index 0000000..a8972ae
--- /dev/null
@@ -0,0 +1,109 @@
+/**
+ * This file provides styles for the search results page (?do=search)
+ * and the AJAX search popup.
+ */
+
+/* search results page
+********************************************************************/
+
+/* loading gif */
+#dw__loading {
+    text-align: center;
+    margin-bottom: 1.4em;
+}
+
+/*____________ matching pagenames ____________*/
+
+.dokuwiki div.search_quickresult {
+    margin-bottom: 1.4em;
+}
+.dokuwiki div.search_quickresult h3 {
+}
+.dokuwiki div.search_quickresult ul {
+    padding: 0;
+}
+.dokuwiki div.search_quickresult ul li {
+    float: left;
+    width: 12em;
+    margin: 0 1.5em;
+}
+[dir=rtl] .dokuwiki div.search_quickresult ul li {
+    float: right;
+}
+
+/*____________ search results ____________*/
+
+.dokuwiki dl.search_results {
+    margin-bottom: 1.2em;
+}
+
+/* search heading */
+.dokuwiki dl.search_results dt {
+    font-weight: normal;
+    margin-bottom: .2em;
+}
+/* search snippet */
+.dokuwiki dl.search_results dd {
+    color: @ini_text_alt;
+    background-color: inherit;
+    margin: 0 0 1.2em 0;
+}
+
+/* search hit in normal text */
+.dokuwiki .search_hit {
+    color: @ini_text;
+    background-color: __highlight__;
+}
+/* search hit in search results */
+.dokuwiki .search_results strong.search_hit {
+    font-weight: normal;
+}
+/* ellipsis separating snippets */
+.dokuwiki .search_results .search_sep {
+    color: @ini_text;
+    background-color: inherit;
+}
+
+/* "nothing found" at search + media */
+.dokuwiki div.nothing {
+    margin-bottom: 1.4em;
+}
+
+
+/* AJAX quicksearch popup
+********************************************************************/
+
+.dokuwiki form.search div.no {
+    position: relative;
+}
+
+/* .JSpopup */
+.dokuwiki form.search div.ajax_qsearch {
+    position: absolute;
+    top: 0;
+    left: -13.5em; /* -( width of #qsearch__in + padding of .ajax_qsearch + a bit more ) */
+    width: 12em;
+    padding: 0.5em;
+    font-size: .9em;
+    z-index: 20;
+    text-align: left;
+    display: none;
+}
+[dir=rtl] .dokuwiki form.search div.ajax_qsearch {
+    left: auto;
+    right: -13.5em;
+    text-align: right;
+}
+.dokuwiki form.search div.ajax_qsearch strong {
+    display: block;
+    margin-bottom: .3em;
+}
+.dokuwiki form.search div.ajax_qsearch ul {
+    margin: 0 !important;
+    padding: 0 !important;
+}
+.dokuwiki form.search div.ajax_qsearch ul li {
+    margin: 0;
+    padding: 0;
+    display: block !important;
+}
diff --git a/css/_tabs.css b/css/_tabs.css
new file mode 100755 (executable)
index 0000000..860545a
--- /dev/null
@@ -0,0 +1,82 @@
+/**
+ * This file provides the styles for general tabs.
+ */
+
+.dokuwiki .tabs > ul,
+.dokuwiki ul.tabs {
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    position: relative;
+}
+/* border underneath */
+.dokuwiki .tabs > ul:after,
+.dokuwiki ul.tabs:after {
+    position: absolute;
+    content: "";
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    border-bottom: 1px solid @ini_border;
+    z-index: 1;
+}
+
+.dokuwiki .tabs > ul li,
+.dokuwiki ul.tabs li {
+    float: left;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+[dir=rtl] .dokuwiki .tabs > ul li,
+[dir=rtl] .dokuwiki ul.tabs li {
+    float: right;
+}
+
+.dokuwiki .tabs > ul li a,
+.dokuwiki ul.tabs li strong,
+.dokuwiki ul.tabs li a {
+    display: inline-block;
+    padding: .3em .8em;
+    margin: 0 0 0 .3em;
+    background-color: @ini_background_neu;
+    color: @ini_text;
+    border: 1px solid @ini_border;
+    border-radius: .5em .5em 0 0;
+    position: relative;
+    z-index: 0;
+}
+[dir=rtl] .dokuwiki .tabs > ul li a,
+[dir=rtl] .dokuwiki ul.tabs li strong,
+[dir=rtl] .dokuwiki ul.tabs li a {
+    margin: 0 .3em 0 0;
+}
+
+.dokuwiki ul.tabs li strong {
+    font-weight: normal;
+}
+
+.dokuwiki ul.tabs li a:link,
+.dokuwiki ul.tabs li a:visited {
+}
+.dokuwiki .tabs > ul li a:hover,
+.dokuwiki .tabs > ul li a:active,
+.dokuwiki .tabs > ul li a:focus,
+.dokuwiki .tabs > ul li .curid a,
+.dokuwiki .tabs > ul .active a,
+.dokuwiki ul.tabs li a:hover,
+.dokuwiki ul.tabs li a:active,
+.dokuwiki ul.tabs li a:focus,
+.dokuwiki ul.tabs li strong {
+    background-color: @ini_background_alt;
+    color: @ini_text;
+    text-decoration: none;
+    font-weight: normal;
+}
+
+.dokuwiki .tabs > ul li .curid a,
+.dokuwiki .tabs > ul li .active a,
+.dokuwiki ul.tabs li strong {
+    z-index: 2;
+    border-bottom-color: @ini_background_alt;
+}
diff --git a/css/_toc.css b/css/_toc.css
new file mode 100755 (executable)
index 0000000..469e927
--- /dev/null
@@ -0,0 +1,93 @@
+/**
+ * This file provides styles for the TOC (table of contents), the
+ * sitemap (?do=index) and backlinks (?do=backlink).
+ */
+
+/* toc
+********************************************************************/
+
+/* toc container */
+#dw__toc {
+    float: right;
+    margin: 0 0 1.4em 1.4em;
+    width: 12em;
+    background-color: @ini_background_alt;
+    color: inherit;
+}
+[dir=rtl] #dw__toc {
+    float: left;
+    margin: 0 1.4em 1.4em 0;
+}
+
+/*____________ toc header ____________*/
+
+.dokuwiki h3.toggle {
+    padding: .2em .5em;
+    font-weight: bold;
+}
+
+.dokuwiki .toggle strong {
+    float: right;
+    margin: 0 .2em;
+}
+[dir=rtl] .dokuwiki .toggle strong {
+    float: left;
+}
+
+/*____________ toc list ____________*/
+
+#dw__toc > div {
+    padding: .2em .5em;
+}
+#dw__toc ul {
+    padding: 0;
+    margin: 0;
+}
+#dw__toc ul li {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    line-height: 1.1;
+}
+#dw__toc ul li div.li {
+    padding: .15em 0;
+}
+#dw__toc ul ul {
+    padding-left: 1em;
+}
+[dir=rtl] #dw__toc ul ul {
+    padding-left: 0;
+    padding-right: 1em;
+}
+#dw__toc ul ul li {
+}
+#dw__toc ul li a {
+}
+
+/* in case of toc list jumping one level
+  (e.g. if heading level 3 follows directly after heading level 1) */
+#dw__toc ul li.clear {
+}
+
+
+/* sitemap (and backlinks)
+********************************************************************/
+
+.dokuwiki ul.idx {
+    padding-left: 0;
+}
+[dir=rtl] .dokuwiki ul.idx {
+    padding-right: 0;
+}
+.dokuwiki ul.idx li {
+    list-style-image: url(../../images/bullet.png);
+}
+.dokuwiki ul.idx li.open {
+    list-style-image: url(../../images/open.png);
+}
+.dokuwiki ul.idx li.closed {
+    list-style-image: url(../../images/closed.png);
+}
+[dir=rtl] .dokuwiki ul.idx li.closed {
+    list-style-image: url(../../images/closed-rtl.png);
+}
diff --git a/css/basic.less b/css/basic.less
new file mode 100755 (executable)
index 0000000..9460930
--- /dev/null
@@ -0,0 +1,472 @@
+/**
+ * This file provides the most basic styles.
+ *
+ * If you integrate DokuWiki into another project, you might either
+ * want to integrate this file into the other project as well, or use
+ * the other project's basic CSS for DokuWiki instead of this one.
+ *
+ * codologic Template
+ *
+ * @link     http://codologic.com
+ * 
+ * Author: Avinash D'Silva <avinash.roshan.dsilva@gmail.com|codologic.com>
+ * 
+ * Previous Authors:
+ * @author   Anika Henke <anika@selfthinker.org>
+ * @author   Clarence Lee <clarencedglee@gmail.com>
+ * @license  GPL 2 (http://www.gnu.org/licenses/gpl.html)
+ */
+
+html {
+    overflow-x: auto;
+    overflow-y: scroll;
+}
+html,
+body {
+    color: @ini_text;
+    background: @ini_background_site url(images/page-gradient.png) top left repeat-x;
+    margin: 0;
+    padding: 0;
+}
+body {
+    font: normal 87.5%/1.4 Arial, sans-serif;
+    /* default font size: 100% => 16px; 93.75% => 15px; 87.5% => 14px; 81.25% => 13px; 75% => 12px */
+    -webkit-text-size-adjust: 100%;
+}
+
+
+/*____________ headers ____________*/
+
+caption,
+figcaption,
+summary,
+legend {
+    padding: 0;
+    margin: 0 0 .35em;
+    line-height: 1.2;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: bold;
+    padding: 0;
+    line-height: 1.2;
+    clear: left; /* ideally 'both', but problems with toc */
+}
+[dir=rtl] h1,
+[dir=rtl] h2,
+[dir=rtl] h3,
+[dir=rtl] h4,
+[dir=rtl] h5,
+[dir=rtl] h6 {
+    clear: right;
+}
+
+h1 {
+    font-size: 2em;
+    margin: 0 0 0.444em;
+}
+h2 {
+    font-size: 1.5em;
+    margin: 0 0 0.666em;
+}
+h3 {
+    font-size: 1.125em;
+    margin: 0 0 0.888em;
+}
+h4 {
+    font-size: 1em;
+    margin: 0 0 1.0em;
+}
+h5 {
+    font-size: .875em;
+    margin: 0 0 1.1428em;
+}
+h6 {
+    font-size: .75em;
+    margin: 0 0 1.333em;
+}
+/* bottom margin = 1 / font-size */
+
+
+/*____________ basic margins and paddings ____________*/
+
+p,
+ul,
+ol,
+dl,
+pre,
+table,
+hr,
+blockquote,
+figure,
+details,
+fieldset,
+address {
+    margin: 0 0 1.4em 0; /* bottom margin = line-height */
+    padding: 0;
+}
+
+div {
+    margin: 0;
+    padding: 0;
+}
+
+
+/*____________ lists ____________*/
+
+ul,
+ol {
+    padding: 0 0 0 1.5em;
+}
+[dir=rtl] ul,
+[dir=rtl] ol {
+    padding: 0 1.5em 0 0;
+}
+
+li,
+dd {
+    padding: 0;
+    margin: 0 0 0 1.5em;
+}
+[dir=rtl] li,
+[dir=rtl] dd {
+    margin: 0 1.5em 0 0;
+}
+dt {
+    font-weight: bold;
+    margin: 0;
+    padding: 0;
+}
+
+li ul,
+li ol,
+li dl,
+dl ul,
+dl ol,
+dl dl {
+    margin-bottom: 0;
+    padding: 0;
+}
+li li {
+    font-size: 100%;
+}
+
+ul             { list-style: square outside; }
+ol             { list-style: decimal outside; }
+ol ol          { list-style-type: lower-alpha; }
+ol ol ol       { list-style-type: upper-roman; }
+ol ol ol ol    { list-style-type: upper-alpha; }
+ol ol ol ol ol { list-style-type: lower-roman; }
+
+
+/*____________ tables ____________*/
+
+table {
+    border-collapse: collapse;
+    empty-cells: show;
+    border-spacing: 0;
+    border: 1px solid @ini_border;
+}
+
+caption {
+    caption-side: top;
+    text-align: left;
+}
+[dir=rtl] caption {
+    text-align: right;
+}
+
+th,
+td {
+    padding: .3em .5em;
+    margin: 0;
+    vertical-align: top;
+    border: 1px solid @ini_border;
+}
+th {
+    font-weight: bold;
+    background-color: @ini_background_alt;
+    text-align: left;
+}
+[dir=rtl] th {
+    text-align: right;
+}
+
+
+/*____________ links ____________*/
+
+a {
+    outline: none;
+}
+a:link,
+a:visited {
+    text-decoration: none;
+    color: @ini_link;
+}
+a:link:hover,
+a:visited:hover,
+a:link:focus,
+a:visited:focus,
+a:link:active,
+a:visited:active {
+    text-decoration: underline;
+}
+
+
+/*____________ misc ____________*/
+
+img {
+    border-width: 0;
+    vertical-align: middle;
+    color: #666;
+    background-color: transparent;
+    font-style: italic;
+    height: auto;
+}
+img,
+object,
+embed,
+iframe,
+video,
+audio {
+    max-width: 100%;
+}
+#IE7 img,
+#IE8 img,
+button img {
+    max-width: none;
+}
+
+hr {
+    border-top: solid @ini_border;
+    border-bottom: solid @ini_background;
+    border-width: 1px 0;
+    height: 0;
+    text-align: center;
+    clear: both;
+}
+
+acronym,
+abbr {
+    cursor: help;
+    border-bottom: 1px dotted;
+    font-style: normal;
+}
+em acronym,
+em abbr {
+    font-style: italic;
+}
+
+mark {
+    background-color: @ini_highlight;
+    color: inherit;
+}
+
+pre,
+code,
+samp,
+kbd {
+    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
+    /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */
+    font-size: 1em;
+    direction: ltr;
+    text-align: left;
+    background-color: @ini_background_site;
+    color: @ini_text;
+    box-shadow: inset 0 0 .3em @ini_border;
+    border-radius: 2px;
+}
+pre {
+    overflow: auto;
+    word-wrap: normal;
+    border: 1px solid @ini_border;
+    border-radius: 2px;
+    box-shadow: inset 0 0 .5em @ini_border;
+    padding: .7em 1em;
+}
+
+blockquote {
+    padding: 0 .5em;
+    border: solid @ini_border;
+    border-width: 0 0 0 .25em;
+}
+[dir=rtl] blockquote {
+    border-width: 0 .25em 0 0;
+}
+q:before,
+q:after {
+    content: '';
+}
+
+sub,
+sup {
+    font-size: .8em;
+    line-height: 1;
+}
+sub {
+    vertical-align: sub;
+}
+sup {
+    vertical-align: super;
+}
+
+small {
+    font-size: .8em;
+}
+
+/*____________ forms ____________*/
+
+/* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */
+
+form {
+    display: inline;
+    margin: 0;
+    padding: 0;
+}
+fieldset {
+    padding: .7em 1em 0;
+    padding: .7rem 1rem; /* for those browsers understanding :last-child */
+    border: 1px solid @ini_text_alt;
+}
+fieldset > :last-child {
+    margin-bottom: 0;
+}
+legend {
+    margin: 0;
+    padding: 0 .1em;
+}
+label {
+    vertical-align: middle;
+    cursor: pointer;
+}
+
+input,
+textarea,
+button,
+select,
+optgroup,
+option,
+keygen,
+output,
+meter,
+progress {
+    font: inherit;
+    font-weight: normal;
+    color: #333;
+    background-color: #fff;
+    line-height: normal;
+    margin: 0;
+    vertical-align: middle;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+select {
+    max-width: 100%;
+}
+optgroup {
+    font-style: italic;
+    font-weight: bold;
+}
+option {
+    font-style: normal;
+    font-weight: normal;
+}
+
+input,
+textarea,
+select,
+keygen {
+    border: 1px solid #ccc;
+    box-shadow: inset 0 0 1px #eee;
+    border-radius: 2px;
+}
+input:active,
+input:focus,
+textarea:active,
+textarea:focus,
+select:active,
+select:focus,
+keygen:active,
+keygen:focus {
+    border-color: #999;
+}
+input[type=radio],
+input[type=checkbox],
+input[type=image] {
+    padding: 0;
+    border-style: none;
+    box-shadow: none;
+}
+
+/* all types of buttons */
+input[type=submit],
+input[type=button],
+input[type=reset],
+input.button,
+a.button,
+button,
+.qq-upload-button {
+    color: #333;
+    background-color: #eee;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+);
+    .linear-gradient("top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%");
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    padding: .1em .5em;
+    cursor: pointer;
+}
+#IE7 input.button,
+#IE7 button {
+    line-height: 1.4;
+    overflow: visible;
+}
+
+input[type=submit]:hover,
+input[type=submit]:active,
+input[type=submit]:focus,
+input[type=button]:hover,
+input[type=button]:active,
+input[type=button]:hover,
+input[type=reset]:hover,
+input[type=reset]:active,
+input[type=reset]:hover,
+input.button:hover,
+input.button:active,
+input.button:focus,
+a.button:hover,
+a.button:active,
+a.button:focus,
+button:hover,
+button:active,
+button:focus,
+.qq-upload-button:hover {
+    border-color: #999;
+    background-color: #ddd;
+    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+);
+    .linear-gradient("top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%");
+}
+
+input::-moz-focus-inner,
+button::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+input[disabled],
+button[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+button[readonly],
+select[readonly],
+textarea[readonly] {
+    cursor: auto;
+    opacity: .5;
+    background-color: #eee;
+}
diff --git a/css/content.less b/css/content.less
new file mode 100755 (executable)
index 0000000..523fd32
--- /dev/null
@@ -0,0 +1,399 @@
+/**
+ * codologic css
+ *
+ * @link     http://codologic.com
+ * 
+ * Author: Avinash D'Silva <avinash.roshan.dsilva@gmail.com|codologic.com>
+ * 
+ * Previous Authors:
+ * @author   Anika Henke <anika@selfthinker.org>
+ * @author   Clarence Lee <clarencedglee@gmail.com>
+ * @license  GPL 2 (http://www.gnu.org/licenses/gpl.html)
+ */
+
+/*____________ section indenting ____________
+
+.dokuwiki .page  h1 {margin-left: 0;}
+.dokuwiki .page  h2 {margin-left: .666em;}
+.dokuwiki .page  h3 {margin-left: 1.776em;}
+.dokuwiki .page  h4 {margin-left: 3em;}
+.dokuwiki .page  h5 {margin-left: 4.5712em;}
+.dokuwiki .page  div.level1 {margin-left: 0;}
+.dokuwiki .page  div.level2 {margin-left: 1em;}
+.dokuwiki .page  div.level3 {margin-left: 2em;}
+.dokuwiki .page  div.level4 {margin-left: 3em;}
+.dokuwiki .page  div.level5 {margin-left: 4em;}
+
+[dir=rtl] .dokuwiki .page h1 {margin-left: 0; margin-right: 0;}
+[dir=rtl] .dokuwiki .page h2 {margin-left: 0; margin-right: .666em;}
+[dir=rtl] .dokuwiki .page h3 {margin-left: 0; margin-right: 1.776em;}
+[dir=rtl] .dokuwiki .page h4 {margin-left: 0; margin-right: 3em;}
+[dir=rtl] .dokuwiki .page h5 {margin-left: 0; margin-right: 4.5712em;}
+[dir=rtl] .dokuwiki .page div.level1 {margin-left: 0; margin-right: 0;}
+[dir=rtl] .dokuwiki .page div.level2 {margin-left: 0; margin-right: 1em;}
+[dir=rtl] .dokuwiki .page div.level3 {margin-left: 0; margin-right: 2em;}
+[dir=rtl] .dokuwiki .page div.level4 {margin-left: 0; margin-right: 3em;}
+[dir=rtl] .dokuwiki .page div.level5 {margin-left: 0; margin-right: 4em;}
+*/
+/* hx margin-left = (1 / font-size) * .levelx-margin */
+
+/*____________ links to wiki pages (addition to _links) ____________*/
+
+/* existing wikipage */
+.dokuwiki a.wikilink1 {
+    color: #2b73b7;
+    background-color: inherit;
+}
+
+/* not existing wikipage */
+.dokuwiki a.wikilink2 {
+    color: @ini_missing;
+    background-color: inherit;
+}
+
+/*____________ images ____________*/
+
+/* embedded images (styles are already partly set in lib/styles/all.css) */
+.dokuwiki img.media {
+    margin: .2em 0;
+}
+
+.dokuwiki img.medialeft {
+    margin: .2em 1em .2em 0;
+}
+
+.dokuwiki img.mediaright {
+    margin: .2em 0 .2em 1em;
+}
+
+.dokuwiki img.mediacenter {
+    margin: .2em auto;
+}
+
+/*____________ lists ____________*/
+
+#dokuwiki__content ul li,
+#dokuwiki__aside ul li {
+    color: @ini_text_alt;
+}
+
+#dokuwiki__content ol li,
+#dokuwiki__aside ol li {
+    color: @ini_text_neu;
+}
+
+#dokuwiki__content li .li,
+#dokuwiki__aside li .li {
+    color: @ini_text;
+}
+
+/*____________ tables ____________*/
+
+/* div around each table */
+.dokuwiki div.table {
+    overflow-x: auto;
+    margin-bottom: 1.4em;
+}
+
+.dokuwiki div.table table {
+    margin-bottom: 0;
+}
+
+.dokuwiki table.inline {
+    min-width: 50%;
+}
+
+.dokuwiki table.inline tr:hover td {
+    background-color: @ini_background_alt;
+}
+
+.dokuwiki table.inline tr:hover th {
+    background-color: @ini_border;
+}
+
+/*____________ code ____________*/
+
+/* fix if background-color hides underlining */
+.dokuwiki em.u code {
+    text-decoration: underline;
+}
+
+/* filenames for downloadable file and code blocks */
+.dokuwiki dl.code,
+.dokuwiki dl.file {
+    dt {
+        background-color: @ini_background_site;
+        .linear-gradient(~"top, @{ini_background_alt} 0%, @{ini_background_site} 100%");
+        color: inherit;
+        border: 1px solid @ini_border;
+        border-bottom-color: @ini_background_site;
+        border-top-left-radius: .3em;
+        border-top-right-radius: .3em;
+        padding: .3em .6em .1em;
+        margin-bottom: -1px;
+        float: left;
+
+        a {
+            background-color: transparent;
+            font-size: 0.875em;
+            font-weight: normal;
+            display: block;
+            min-height: 16px;
+        }
+    }
+
+    dd {
+        margin: 0;
+        clear: left;
+        min-height: 1px; /* for IE7 */
+    }
+
+    pre {
+        box-shadow: inset -4px -4px .5em -.3em @ini_border;
+    }
+}
+
+[dir=rtl] .dokuwiki dl.code,
+[dir=rtl] .dokuwiki dl.file {
+    dt {
+        float: right;
+    }
+
+    dd {
+        clear: right;
+    }
+}
+
+/* for code in <file> */
+.dokuwiki dl.file {
+    pre,
+    dt {
+        border-style: dashed;
+    }
+    dt {
+        border-bottom-style: solid;
+    }
+}
+
+/*____________ JS popup ____________*/
+
+.JSpopup {
+    background-color: @ini_background;
+    color: @ini_text;
+    border: 1px solid @ini_border;
+    box-shadow: .1em .1em .1em @ini_border;
+    border-radius: 2px;
+    padding: .3em .5em;
+    font-size: .9em;
+}
+
+.dokuwiki form.search div.ajax_qsearch {
+    top: -.35em;
+    font-size: 1em;
+    text-overflow: ellipsis;
+}
+
+.JSpopup ul,
+.JSpopup ol {
+    padding-left: 0;
+}
+
+[dir=rtl] .JSpopup ul,
+[dir=rtl] .JSpopup ol {
+    padding-right: 0;
+}
+
+/* changes to underscored CSS files
+********************************************************************/
+
+#acl__tree li {
+    margin: 0;
+}
+
+#dokuwiki__content span.curid a {
+    font-weight: normal;
+}
+
+#dokuwiki__content strong span.curid a {
+    font-weight: bold;
+}
+
+/*____________ changes to _edit ____________*/
+
+.dokuwiki div.toolbar {
+    button.toolbutton {
+        border-radius: 0;
+        border-left-width: 0;
+        padding: .1em .35em;
+    }
+
+    button.toolbutton:first-child {
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+        border-left-width: 1px;
+    }
+
+    button.toolbutton:last-child {
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+    }
+}
+
+[dir=rtl] .dokuwiki div.toolbar {
+    button.toolbutton:last-child {
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-left-width: 1px;
+    }
+
+    button.toolbutton:first-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+        border-left-width: 0;
+        border-right-width: 1px;
+    }
+}
+
+.dokuwiki div.section_highlight {
+    margin: 0 -2em;
+    padding: 0 1em;
+    border-width: 0 1em;
+}
+
+.dokuwiki textarea.edit {
+    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
+}
+
+.dokuwiki div.preview {
+    margin: 0 -2em;
+    padding: 0 2em;
+}
+
+.dokuwiki.hasSidebar div.preview {
+    border-right: @ini_sidebar_width solid @ini_background_alt;
+}
+
+[dir=rtl] .dokuwiki.hasSidebar div.preview {
+    border-right-width: 0;
+    border-left: @ini_sidebar_width solid @ini_background_alt;
+}
+
+.dokuwiki div.preview div.pad {
+    padding: 1.556em 0 2em;
+}
+
+/*____________ changes to _toc ____________*/
+
+#dw__toc {
+    margin: -1.556em -2em .5em 1.4em;
+    width: @ini_sidebar_width;
+    border-left: 1px solid @ini_border;
+    background: @ini_background;
+    color: inherit;
+}
+
+[dir=rtl] #dw__toc {
+    margin: -1.556em 1.4em .5em -2em;
+    border-left-width: 0;
+    border-right: 1px solid @ini_border;
+}
+
+.dokuwiki h3.toggle {
+    padding: .5em 1em;
+    margin-bottom: 0;
+    font-size: .875em;
+    letter-spacing: .1em;
+}
+
+#dokuwiki__aside h3.toggle {
+    display: none;
+}
+
+.dokuwiki .toggle strong {
+    background: transparent url(images/toc-arrows.png) 0 0;
+    width: 8px;
+    height: 5px;
+    margin: .4em 0 0;
+}
+
+.dokuwiki .toggle.closed strong {
+    background-position: 0 -5px;
+}
+
+.dokuwiki .toggle strong span {
+    display: none;
+}
+
+#dw__toc {
+    > div {
+        font-size: 0.875em;
+        padding: .5em 1em 1em;
+    }
+
+    ul {
+        padding: 0 0 0 1.2em;
+
+        li {
+            list-style-image: url(images/toc-bullet.png);
+        }
+    }
+
+    ul li.clear {
+        list-style: none;
+    }
+
+    ul li div.li {
+        padding: .2em 0;
+    }
+}
+
+[dir=rtl] #dw__toc ul {
+    padding: 0 1.5em 0 0;
+}
+
+/*____________ changes to _imgdetail ____________*/
+
+#dokuwiki__detail {
+    padding: 0;
+
+    img {
+        float: none;
+        margin-bottom: 1.4em;
+    }
+
+    div.img_detail {
+        float: none;
+    }
+
+    div.img_detail dl {
+        overflow: hidden;
+    }
+
+    div.img_detail dl dt {
+        float: left;
+        width: 9em;
+        text-align: right;
+        clear: left;
+    }
+
+    div.img_detail dl dd {
+        margin-left: 9.5em;
+    }
+}
+
+[dir=rtl] #dokuwiki__detail div.img_detail {
+    dl dt {
+        float: right;
+        text-align: left;
+        clear: right;
+    }
+
+    dl dd {
+        margin-left: 0;
+        margin-right: 9.5em;
+    }
+}
diff --git a/css/design.less b/css/design.less
new file mode 100755 (executable)
index 0000000..7429a9e
--- /dev/null
@@ -0,0 +1,565 @@
+/**
+ * codologic CSS
+ *
+ * @link     http://codologic.com
+ * 
+ * Author: Avinash D'Silva <avinash.roshan.dsilva@gmail.com|codologic.com>
+ * 
+ * Previous Authors:
+ * @author   Anika Henke <anika@selfthinker.org>
+ * @author   Clarence Lee <clarencedglee@gmail.com>
+ * @license  GPL 2 (http://www.gnu.org/licenses/gpl.html)
+ */
+
+
+#dokuwiki__header {
+    padding: 2em 0 1.5em;
+
+    .headings,
+    .tools {
+        margin-bottom: 1.5em;
+        width: 49%;
+    }
+    .tools {
+        margin-top: .2em;
+    }
+
+    h1 {
+        margin: 0;
+        font-size: 1.5em;
+        font-weight: normal;
+
+        img {
+            float: left;
+            margin-right: .5em;
+        }
+
+        span {
+            display: block;
+            padding-top: 10px;
+        }
+
+        a {
+            text-decoration: none;
+            color: @ini_text;
+            background-color: inherit;
+        }
+    }
+
+    p.claim {
+        margin-bottom: 0;
+        font-size: 0.875em;
+    }
+}
+
+[dir=rtl] #dokuwiki__header h1 img {
+    float: right;
+    margin-left: .5em;
+    margin-right: 0;
+}
+
+/* tools
+********************************************************************/
+
+/* highlight selected tool */
+.mode_admin a.action.admin,
+.mode_login a.action.login,
+.mode_register a.action.register,
+.mode_profile a.action.profile,
+.mode_recent a.action.recent,
+.mode_index a.action.index,
+.mode_media a.action.media,
+.mode_revisions a.action.revs,
+.mode_backlink a.action.backlink,
+.mode_subscribe a.action.subscribe {
+    font-weight: bold;
+}
+
+#dokuwiki__header .tools {
+    ul {
+        padding-left: 0;
+        margin-bottom: 0;
+    }
+
+    li {
+        font-size: 0.875em;
+        margin-left: 1em;
+        list-style: none;
+        display: inline;
+    }
+
+    form.search div.ajax_qsearch li {
+        font-size: 1em;
+        margin-left: 0;
+        display: block;
+        overflow: hidden;
+       
+        text-overflow: ellipsis;
+    }
+}
+
+[dir=rtl] #dokuwiki__header .tools li {
+    margin-right: 1em;
+    margin-left: 0;
+}
+
+#dokuwiki__usertools a.action {
+    padding-left: 20px;
+    background: transparent url(images/usertools.png) no-repeat 0 0;
+}
+
+[dir=rtl] #dokuwiki__usertools a.action {
+    padding-left: 0;
+    padding-right: 20px;
+}
+
+[dir=rtl] #IE7 #dokuwiki__usertools a.action {
+    display: inline-block;
+}
+
+#dokuwiki__header .mobileTools {
+    display: none; /* hide mobile tools dropdown to only show in mobile view */
+}
+
+/*____________ user tools ____________*/
+
+#dokuwiki__usertools {
+    position: absolute;
+    top: .5em;
+    right: .5em;
+    text-align: right;
+    width: 100%;
+
+    ul {
+        margin: 0 auto;
+        padding: 0;
+        max-width: @ini_site_width;
+    }
+
+    a.action.admin {
+        background-position: left 0;
+    }
+
+    a.action.profile {
+        background-position: left -32px;
+    }
+
+    a.action.register {
+        background-position: left -64px;
+    }
+
+    a.action.login {
+        background-position: left -96px;
+    }
+
+    a.action.logout {
+        background-position: left -128px;
+    }
+}
+
+[dir=rtl] #dokuwiki__usertools {
+    text-align: left;
+    left: 40px;
+    right: auto;
+
+    a.action.admin {
+        background-position: right 0;
+    }
+
+    a.action.profile {
+        background-position: right -32px;
+    }
+
+    a.action.register {
+        background-position: right -64px;
+    }
+
+    a.action.login {
+        background-position: right -96px;
+    }
+
+    a.action.logout {
+        background-position: right -128px;
+    }
+}
+
+/*____________ site tools ____________*/
+
+#dokuwiki__sitetools {
+    text-align: center;
+
+    form.search {
+        display: block;
+        font-size: 0.875em;
+        position: relative;
+
+        input.edit {
+            width: 19em;
+            border-radius:12px;
+            outline:none;
+            
+            padding: .35em 22px .35em .1em;
+            padding-left:5px;
+        }
+        
+          .ajax_qsearch{
+        display:none;
+        position:static;
+        margin-top:12px;
+        background: #FFFFFF;
+            ul{
+            text-align:right;
+            
+                a{color:#2b73b7;}
+            }
+        }
+
+        input.button, button {
+            background: transparent url(images/search.png) no-repeat 0 0;
+            border-width: 0;
+            width: 19px;
+            height: 14px;
+            text-indent: -99999px;
+            margin-left: -20px;
+            box-shadow: none;
+            padding: 0;
+        }
+    }
+
+    ul {
+       margin-top: 0.5em;
+    }
+     
+}
+
+[dir=rtl] #dokuwiki__sitetools {
+    text-align: left;
+
+    form.search {
+        input.edit {
+            padding: .35em .1em .35em 22px;
+        }
+        
+      
+
+        input.button {
+            background-position: 5px 0;
+            margin-left: 0;
+            margin-right: -20px;
+            position: relative;
+        }
+    }
+}
+
+#IE7 #dokuwiki__sitetools form.search {
+    min-height: 1px;
+    z-index: 21;
+}
+
+/*____________codo wiki ______________*/
+
+@pad_side:4px;
+
+.codowiki_west{
+
+background:#2980B9 !important;
+
+}
+
+.codo_active{
+
+
+        background:#FFF;
+        color:black !important;
+        font-weight:bold;
+          
+
+}
+
+.codo_side_content{
+    ul{
+    padding:0px;
+    }
+    li{
+
+    
+
+        a{
+        display:block;
+        color:#b3b3b3;
+        }
+
+        a:hover{
+        text-decoration:none;
+        background:#4e4a4a;
+        }
+
+
+            margin:0;
+    }
+
+}
+
+
+.codowiki_west_header{
+
+background-color: #2980B9;
+text-align: center;
+color: #FCFCFC;
+
+a{
+
+color:#FCFCFC;
+text-decoration:none !important;
+
+}
+
+
+
+h1{
+font-size:12pt;
+
+margin: 20px 0px 20px 0px;
+
+    span{
+        position: relative;
+        top: 1px;
+    }
+
+}
+
+}
+
+#codowiki_search_ul{
+
+    text-align:center;
+    padding: 0 0 0 0;
+       padding-bottom:5px;
+   
+    ul {
+       margin-top: 0;
+    
+    }
+    
+    li{
+    font-size:10px;
+    display:inline;
+    list-style:none;
+    margin:0 0 0 0;
+    margin-right:6px;
+    }
+
+}
+
+/*remove the padding from the plugin
+refer:http://stackoverflow.com/questions/3293771/how-to-get-rid-of-margins-in-jquery-layout
+*/
+.ui-layout-pane {
+  padding: 0px !important;
+}
+
+
+/*____________ breadcrumbs ____________*/
+
+.dokuwiki div.breadcrumbs {
+    border-top: 1px solid @ini_border;
+    border-bottom: 1px solid @ini_background;
+    margin-bottom: .5em;
+    font-size: 0.875em;
+    clear: both;
+
+    div {
+        padding: .1em .35em;
+    }
+
+    div:only-child {
+        border-top: 1px solid @ini_background;
+        border-bottom: 1px solid @ini_border;
+    }
+
+    div:first-child {
+        border-top: 1px solid @ini_background;
+    }
+
+    div:last-child {
+        border-bottom: 1px solid @ini_border;
+    }
+
+    a {
+        color: @ini_link;
+        background-color: inherit;
+    }
+
+    .bcsep {
+        font-size: 0.75em;
+    }
+}
+
+#IE7 .dokuwiki div.breadcrumbs div,
+#IE8 .dokuwiki div.breadcrumbs div {
+    border-bottom: 1px solid @ini_border;
+}
+
+/* sidebar
+********************************************************************/
+
+#dokuwiki__aside {
+
+    > .pad {
+        font-size: 0.875em;
+        overflow: hidden;
+        word-wrap: break-word;
+    }
+
+    /* make sidebar more condensed */
+
+    h1 {
+        font-size: 1.714em;
+        margin-bottom: .292em;
+    }
+
+    h2 {
+        margin-bottom: .333em;
+    }
+
+    h3 {
+        margin-bottom: .444em;
+    }
+
+    h4 {
+        margin-bottom: .5em;
+    }
+
+    h5 {
+        margin-bottom: .5714em;
+    }
+
+    p,
+    ul,
+    ol,
+    dl,
+    pre,
+    table,
+    fieldset,
+    hr,
+    blockquote,
+    address {
+        margin-bottom: .7em;
+    }
+
+    ul,
+    ol {
+        padding-left: .5em;
+    }
+
+    li ul,
+    li ol {
+        margin-bottom: 0;
+        padding: 0;
+    }
+
+    a:link,
+    a:visited {
+        color: @ini_link;
+        background-color: inherit;
+    }
+}
+
+[dir=rtl] #dokuwiki__aside ul,
+[dir=rtl] #dokuwiki__aside ol {
+    padding-right: .5em;
+}
+
+/* content
+********************************************************************/
+
+.dokuwiki .pageId {
+    position: absolute;
+    top: -2.3em;
+    right: -1em;
+    overflow: hidden;
+    padding: 1em 1em 0;
+
+    span {
+        font-size: 0.875em;
+        border: solid @ini_background_alt;
+        border-width: 1px 1px 0;
+        background-color: @ini_background;
+        color: @ini_text_alt;
+        padding: .1em .35em;
+        border-top-left-radius: 2px;
+        border-top-right-radius: 2px;
+        box-shadow: 0 0 .5em @ini_text_alt;
+        display: block;
+    }
+}
+
+.dokuwiki div.page {
+    background: @ini_background;
+    color: inherit;
+    /*border: 1px solid @ini_background_alt;
+    box-shadow: 0 0 .5em @ini_text_alt;
+    border-radius: 2px;*/
+    padding: 1.556em 2em 2em;
+    margin-bottom: .5em;
+    overflow: hidden;
+    word-wrap: break-word;
+}
+
+.dokuwiki .docInfo {
+    font-size: 0.875em;
+    text-align: right;
+}
+
+/* license note under edit window */
+.dokuwiki div.license {
+    font-size: 93.75%;
+}
+
+[dir=rtl] .dokuwiki .docInfo {
+    text-align: left;
+}
+
+[dir=rtl] .dokuwiki .pageId {
+    right: auto;
+    left: -1em;
+}
+
+/* footer
+********************************************************************/
+
+.dokuwiki .wrapper {
+    margin-bottom: 1.4em;
+}
+
+#dokuwiki__footer {
+   /* margin-bottom: 1em;*/
+    text-align: center;
+
+    > .pad {
+        font-size: 0.875em;
+        padding-top:4px;
+    }
+
+    div.license {
+        margin-bottom: 0.5em;
+        font-size: 100%;
+    }
+
+    div.buttons a {
+        img {
+            opacity: 0.5;
+        }
+
+        &:hover img,
+        &:active img,
+        &:focus img {
+            opacity: 1;
+        }
+    }
+
+}
+
+[dir=rtl] #dokuwiki__footer .license img {
+    margin: 0 0 0 .5em;
+}
diff --git a/css/mixins.less b/css/mixins.less
new file mode 100755 (executable)
index 0000000..a88767e
--- /dev/null
@@ -0,0 +1,10 @@
+/**
+ * linear gradient x-browser support
+ */
+.linear-gradient(@declaration: 0) {
+    background: -moz-linear-gradient(   @declaration);
+    background: -webkit-linear-gradient(@declaration);
+    background: -o-linear-gradient(     @declaration);
+    background: -ms-linear-gradient(    @declaration);
+    background: linear-gradient(        @declaration);
+}
\ No newline at end of file
diff --git a/css/mobile.less b/css/mobile.less
new file mode 100755 (executable)
index 0000000..289f5af
--- /dev/null
@@ -0,0 +1,294 @@
+/**
+ * This file provides styles for mobile devices
+ * and smaller screens (up to 480px and 768px width).
+ *
+ * @author Anika Henke <anika@selfthinker.org>
+ */
+
+/* for detecting media queries in JavaScript (see script.js): */
+#screen__mode {
+    position: relative;
+    z-index: 0;
+}
+
+/* for screen widths in the tablet range
+********************************************************************/
+@media only screen and (max-width: @ini_tablet_width) {
+
+#screen__mode {
+    z-index: 1; /* for detecting media queries in JavaScript (see script.js) */
+}
+
+/* structure */
+#dokuwiki__aside {
+    width: 100%;
+    float: none;
+}
+
+#dokuwiki__aside > .pad,
+[dir=rtl] #dokuwiki__aside > .pad {
+    margin: 0 0 .5em;
+    /* style like .page */
+    background: @ini_background;
+    color: inherit;
+    border: 1px solid #eee;
+    box-shadow: 0 0 .5em @ini_text_alt;
+    border-radius: 2px;
+    padding: 1em;
+    margin-bottom: .5em;
+}
+
+#dokuwiki__aside h3.toggle {
+    font-size: 1em;
+
+    &.closed {
+        margin-bottom: 0;
+        padding-bottom: 0;
+    }
+    &.open {
+        border-bottom: 1px solid @ini_border;
+    }
+}
+
+.showSidebar #dokuwiki__content {
+    float: none;
+    margin-left: 0;
+    width: 100%;
+
+    > .pad {
+        margin-left: 0;
+    }
+}
+
+[dir=rtl] .showSidebar #dokuwiki__content,
+[dir=rtl] .showSidebar #dokuwiki__content > .pad {
+    margin-right: 0;
+}
+
+/* toc */
+#dw__toc {
+    float: none;
+    margin: 0 0 1em 0;
+    width: auto;
+    border-left-width: 0;
+    border-bottom: 1px solid @ini_border;
+}
+[dir=rtl] #dw__toc {
+    float: none;
+    margin: 0 0 1em 0;
+    border-right-width: 0;
+}
+
+.dokuwiki h3.toggle {
+    padding: 0 .5em .5em 0;
+}
+#dw__toc > div,
+#dokuwiki__aside div.content {
+    padding: .2em 0 .5em;
+}
+
+/* page */
+.dokuwiki div.page {
+    padding: 1em;
+}
+/* enable horizontal scrolling in media manager */
+.mode_media div.page {
+    overflow: auto;
+}
+
+/* _edit */
+.dokuwiki div.section_highlight {
+    margin: 0 -1em;
+    padding: 0 .5em;
+    border-width: 0 .5em;
+}
+.dokuwiki div.preview {
+    margin: 0 -1em;
+    padding: 1em;
+}
+
+/* _recent */
+.dokuwiki form.changes ul {
+    padding-left: 0;
+}
+[dir=rtl] .dokuwiki form.changes ul {
+    padding-right: 0;
+}
+
+
+} /* /@media */
+
+
+/* for screen widths in the smartphone range
+********************************************************************/
+@media only screen and (max-width: @ini_phone_width) {
+
+#screen__mode {
+    z-index: 2; /* for detecting media queries in JavaScript (see script.js) */
+}
+
+body {
+    font-size: 100%;
+}
+
+/*____________ structure ____________*/
+
+#dokuwiki__site {
+    max-width: 100%;
+
+    > .site {
+        padding: 0 .5em;
+    }
+}
+#dokuwiki__header {
+    padding: .5em 0;
+}
+
+
+/*____________ header ____________*/
+
+#dokuwiki__header ul.a11y.skip {
+    position: static !important;
+    left: 0 !important;
+    width: auto !important;
+    height: auto !important;
+    float: right;
+    font-size: 0.875em;
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+
+    li {
+        margin-left: .35em;
+        display: inline;
+    }
+}
+[dir=rtl] #dokuwiki__header ul.a11y.skip {
+    left: auto !important;
+    right: 0 !important;
+    float: left;
+    padding-right: 0;
+
+    li {
+        margin: 0 .35em 0 0;
+    }
+}
+
+#dokuwiki__header .headings,
+#dokuwiki__header .tools {
+    float: none;
+    text-align: left;
+    width: auto;
+    margin-bottom: .5em;
+}
+[dir=rtl] #dokuwiki__header .headings,
+[dir=rtl] #dokuwiki__header .tools {
+    float: none;
+    text-align: right;
+    width: auto;
+}
+#dokuwiki__sitetools {
+    text-align: left;
+}
+[dir=rtl] #dokuwiki__sitetools {
+    text-align: right;
+}
+#dokuwiki__usertools,
+#dokuwiki__sitetools ul,
+#dokuwiki__sitetools h3,
+#dokuwiki__pagetools,
+.dokuwiki div.breadcrumbs, /* @todo: maybe move breadcrumbs to the bottom? */
+.dokuwiki .pageId {
+    display: none;
+}
+
+/* search form */
+#dokuwiki__sitetools form.search {
+    float: left;
+    margin: 0 .2em .2em 0;
+    width: 49%;
+}
+[dir=rtl] #dokuwiki__sitetools form.search {
+    float: right;
+    margin: 0 0 .2em .2em;
+}
+
+#dokuwiki__sitetools form.search input.edit {
+    width: 100% !important;
+}
+.dokuwiki form.search div.ajax_qsearch {
+    display: none !important;
+}
+
+/* action dropdown is alternative for all hidden tools */
+#dokuwiki__header .mobileTools {
+    display: block;
+    font-size: 0.875em;
+    margin: 0 0 .2em 0;
+    float: right;
+    width: 49%;
+}
+[dir=rtl] #dokuwiki__header .mobileTools {
+    float: left;
+}
+#dokuwiki__header .mobileTools select {
+    padding: .3em .1em;
+    width: 100% !important;
+}
+
+/* force same height on search input and tools select */
+#dokuwiki__sitetools form.search input.edit,
+#dokuwiki__header .mobileTools select {
+    height: 2.1em;
+    line-height: 2.1em;
+    overflow: visible;
+}
+
+
+/*____________ content ____________*/
+
+#dokuwiki__aside > .pad,
+.dokuwiki div.page {
+    padding: .5em;
+}
+
+/* form elements */
+#config__manager fieldset td.value,
+#config__manager td .input,
+.dokuwiki fieldset,
+.dokuwiki input.edit,
+.dokuwiki textarea,
+.dokuwiki select {
+    width: auto !important;
+    max-width: 100% !important;
+}
+#config__manager fieldset {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.dokuwiki label.block {
+    text-align: left;
+
+    span {
+        display: block;
+    }
+}
+[dir=rtl] .dokuwiki label.block {
+    text-align: right;
+}
+
+/* _edit */
+.dokuwiki div.section_highlight {
+    margin: 0;
+    padding: 0;
+    border-width: 0;
+}
+.dokuwiki div.preview {
+    margin: 0 -.5em;
+    padding: .5em;
+}
+
+
+
+} /* /@media */
diff --git a/css/pagetools.less b/css/pagetools.less
new file mode 100755 (executable)
index 0000000..ecb3038
--- /dev/null
@@ -0,0 +1,233 @@
+/**
+ * This file provides the styles for the page tools
+ * (fly out navigation beside the page to edit, etc).
+ *
+ * @author Anika Henke <anika@selfthinker.org>
+ * @author Andreas Gohr <andi@splitbrain.org>
+ */
+
+#dokuwiki__site > .site {
+    /* give space to the right so the tools won't disappear on smaller screens */
+    /* it's 40px because the 30px wide icons will have 5px more spacing to the left and right */
+    padding-right: 40px;
+    /* give the same space to the left to balance it out */
+    padding-left: 40px;
+}
+.dokuwiki div.page {
+    height: 190px;
+    min-height: 190px; /* 30 (= height of icons) x 6 (= maximum number of possible tools) + 2x5 */
+    height: auto;
+}
+#dokuwiki__usertools {
+    /* move the tools just outside of the site */
+    right: 40px;
+}
+[dir=rtl] #dokuwiki__usertools {
+    right: auto;
+    left: 40px;
+}
+
+
+#dokuwiki__pagetools {
+    position: absolute;
+    right: -40px;
+    /* on same vertical level as first headline, because .page has 2em padding */
+    top: 2em;
+    width: 40px;
+}
+[dir=rtl] #dokuwiki__pagetools {
+    right: auto;
+    left: -40px;
+}
+
+#dokuwiki__pagetools div.tools {
+    position: fixed;
+    width: 40px;
+}
+
+#dokuwiki__pagetools ul {
+    position: absolute;
+    right: 0;
+    text-align: right;
+    margin: 0;
+    padding: 0;
+    /* add transparent border to prevent jumping when proper border is added on hover */
+    border: 1px solid transparent;
+    z-index: 10;
+}
+[dir=rtl] #dokuwiki__pagetools ul {
+    right: auto;
+    left: 0;
+    text-align: left;
+}
+
+#dokuwiki__pagetools ul li {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    font-size: 0.875em;
+}
+
+#dokuwiki__pagetools ul li a {
+    display: block;
+    min-height: 20px; /* 30 - 2x5 */
+    line-height: 20px;
+    padding: 0;
+    background-position: right 0;
+    background-repeat: no-repeat;
+    /* add transparent border to prevent jumping when proper border is added on focus */
+    border: 1px solid transparent;
+    white-space: nowrap;
+    width: 30px;
+    height: 30px;
+    overflow: hidden;
+    margin-left: auto; /* align right if the ul is larger because one item is focused */
+}
+
+#dokuwiki__pagetools ul li a:before {
+    content: url(images/pagetools-sprite.png?v=2);
+    display: inline-block;
+    font-size: 0;
+    line-height: 0;
+}
+
+[dir=rtl] #dokuwiki__pagetools ul li a {
+    background-position: left 0;
+    margin-right: auto;
+    margin-left: 0;
+}
+
+/* show all tools on hover and individual tools on focus */
+#dokuwiki__pagetools:hover ul,
+#dokuwiki__pagetools ul li a:focus,
+#dokuwiki__pagetools ul li a:active {
+    background-color: @ini_background;
+    border-color: @ini_border;
+    border-radius: 2px;
+    box-shadow: 2px 2px 2px @ini_text_alt;
+}
+
+#dokuwiki__pagetools:hover ul li a,
+#dokuwiki__pagetools ul li a:focus,
+#dokuwiki__pagetools ul li a:active {
+    width: auto;
+    height: auto;
+    overflow: visible;
+    padding: 5px 40px 5px 5px;
+    background-image: url(images/pagetools-sprite.png?v=2);
+}
+
+#dokuwiki__pagetools:hover ul li a:before,
+#dokuwiki__pagetools ul li a:focus:before {
+    content: none;
+}
+
+[dir=rtl] #dokuwiki__pagetools:hover ul,
+[dir=rtl] #dokuwiki__pagetools ul li a:focus {
+    box-shadow: -2px 2px 2px @ini_text_alt;
+}
+
+[dir=rtl] #dokuwiki__pagetools:hover li a,
+[dir=rtl] #dokuwiki__pagetools ul li a:focus,
+[dir=rtl] #dokuwiki__pagetools ul li a:active {
+    padding: 5px 5px 5px 40px;
+}
+
+/* IE7 fixes, doesn't work without images */
+
+#IE7 #dokuwiki__pagetools ul li a {
+    background-image: url(images/pagetools-sprite.png?v=2);
+}
+
+#IE7 #dokuwiki__pagetools:hover ul li a span,
+#IE7 #dokuwiki__pagetools ul li a:focus span,
+#IE7 #dokuwiki__pagetools ul li a:active span {
+    clip: auto;
+    display: inline;
+    position: static;
+}
+
+#IE7 #dokuwiki__pagetools ul li a span {
+    clip: rect(0 0 0 0);
+    position: absolute;
+}
+
+#dokuwiki__pagetools ul li a:hover,
+#dokuwiki__pagetools ul li a:active,
+#dokuwiki__pagetools ul li a:focus {
+    text-decoration: none;
+}
+#dokuwiki__pagetools ul li a:hover {
+    background-color: @ini_background_alt;
+}
+
+/*____________ all available icons in sprite ____________*/
+
+@pagetools_icon_space: -90px;
+
+/**
+ * page tools without highlighting
+ *
+ * @param string @action The action class
+ * @param int @position Position in the page tools sprite
+ */
+.pagetools-item(@action, @position) {
+    @position-active: (@position+0.5);
+
+    #dokuwiki__pagetools ul li a.@{action} {
+        background-position: right @pagetools_icon_space * @position;
+
+        &:before {
+            margin-top: @pagetools_icon_space * @position;
+        }
+        &:hover,
+        &:active,
+        &:focus {
+            background-position: right @pagetools_icon_space * @position-active;
+        }
+    }
+    [dir=rtl] #dokuwiki__pagetools ul li a.@{action} {
+        background-position: left @pagetools_icon_space * @position;
+
+        &:hover,
+        &:active,
+        &:focus {
+            background-position: left @pagetools_icon_space * @position-active;
+        }
+    }
+}
+
+/**
+ * page tools with highlighting
+ *
+ * @param string @action The action class
+ * @param int @position Position in the page tools sprite
+ * @param string @mode The mode in which this tool should be highlighted
+ */
+.pagetools-item(@action, @position, @mode) {
+  .pagetools-item(@action, @position);
+  @position-active: (@position+0.5);
+
+  .mode_@{mode} #dokuwiki__pagetools ul li a.@{action} {
+    background-position: right @pagetools_icon_space * @position-active;
+    &:before {
+      margin-top: @pagetools_icon_space * @position-active;
+    }
+  }
+  [dir=rtl] .mode_@{mode} #dokuwiki__pagetools ul li a.@{action} {
+    background-position: left @pagetools_icon_space * @position-active;
+  }
+}
+
+.pagetools-item(edit, 1);
+.pagetools-item(create, 2);
+.pagetools-item(show, 4);
+.pagetools-item(source, 5);
+.pagetools-item(draft, 3);
+.pagetools-item(revs, 7, revisions);
+.pagetools-item(backlink, 8, backlink);
+.pagetools-item(top, 10);
+.pagetools-item(revert, 6, revert);
+.pagetools-item(subscribe, 9, subscribe);
+.pagetools-item(mediaManager, 11);
+.pagetools-item(back, 12);
diff --git a/css/print.css b/css/print.css
new file mode 100755 (executable)
index 0000000..86e686b
--- /dev/null
@@ -0,0 +1,174 @@
+/**
+ * This file provides the styles for printing.
+ *
+ * @todo: improve and finish
+ */
+
+body {
+    font: normal 87.5%/1.3 Garamond, Baskerville, "Hoefler Text", "Nimbus Roman No9 L", serif;
+    background-color: #fff;
+    color: #000;
+}
+
+/* hide certain sections */
+.a11y,
+audio,
+video,
+#dokuwiki__header .tools,
+#dokuwiki__aside,
+.dokuwiki .breadcrumbs,
+.dokuwiki .pageId,
+#dw__toc,
+h3.toggle,
+#dokuwiki__pagetools,
+#dokuwiki__footer {
+    display: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+caption,
+legend {
+    clear: both;
+}
+ul {
+    list-style: disc outside;
+}
+ol {
+    list-style: decimal outside;
+}
+ol ol {
+    list-style-type: lower-alpha;
+}
+ol ol ol {
+    list-style-type: upper-roman;
+}
+ol ol ol ol {
+    list-style-type: upper-alpha;
+}
+ol ol ol ol ol {
+    list-style-type: lower-roman;
+}
+
+a:link,
+a:visited {
+    text-decoration: none;
+    border-bottom: 1pt dotted;
+    color: #333;
+    background-color: inherit;
+}
+
+/* display href after link */
+a.urlextern:after,
+a.interwiki:after,
+a.mail:after {
+   content: " [" attr(href) "]";
+   font-size: 90%;
+}
+
+/* code blocks */
+pre {
+    font-family: monospace;
+}
+dl.code dt,
+dl.file dt {
+    font-weight: bold;
+}
+
+mark {
+    font-weight: bold;
+}
+
+/* images */
+img {
+    border-width: 0;
+    vertical-align: middle;
+}
+img.media {
+    margin: .2em 0;
+}
+img.medialeft {
+    margin: .2em 1em .2em 0;
+}
+img.mediaright {
+    margin: .2em 0 .2em 1em;
+}
+img.mediacenter {
+    margin: .2em auto;
+}
+
+blockquote {
+    padding: 0 10pt;
+    margin: 0;
+    border: solid #ccc;
+    border-width: 0 0 0 2pt;
+}
+[dir=rtl] blockquote {
+    border-width: 0 2pt 0 0;
+}
+
+/* tables */
+table {
+    border-collapse: collapse;
+    empty-cells: show;
+    border-spacing: 0;
+    border: 1pt solid #ccc;
+}
+th,
+td {
+    padding: 3pt 5pt;
+    margin: 0;
+    vertical-align: top;
+    border: 1pt solid #666;
+}
+th {
+    font-weight: bold;
+    text-align: left;
+}
+[dir=rtl] th {
+    text-align: right;
+}
+
+
+/*____________ a bit of layout ____________*/
+
+#dokuwiki__header {
+    border-bottom: 2pt solid #ccc;
+}
+#dokuwiki__header h1 {
+    font-size: 1.5em;
+}
+#dokuwiki__header h1 a {
+    text-decoration: none;
+    border-width: 0;
+}
+#dokuwiki__header h1 img {
+    float: left;
+    margin-right: .5em;
+}
+[dir=rtl] #dokuwiki__header h1 img {
+    float: right;
+    margin-right: 0;
+    margin-left: .5em;
+}
+
+.dokuwiki div.footnotes {
+    clear: both;
+    border-top: 1pt dotted #999;
+    margin-top: 10pt;
+}
+
+.dokuwiki div.docInfo {
+    font-size: 90%;
+    text-align: right;
+    clear: both;
+    padding-top: 2pt;
+    border-top: 1pt solid #999;
+    margin-top: 10pt;
+}
+[dir=rtl] .dokuwiki div.docInfo {
+    text-align: left;
+}
diff --git a/css/structure.less b/css/structure.less
new file mode 100755 (executable)
index 0000000..3ea2f83
--- /dev/null
@@ -0,0 +1,89 @@
+/**
+ * This file provides styles for the general layout structure.
+ *
+ * @author Anika Henke <anika@selfthinker.org>
+ */
+body {
+    margin: 0 auto;
+}
+
+#dokuwiki__site {
+    margin: 0 auto;
+    max-width: @ini_site_width;
+}
+
+#dokuwiki__site > .site {
+    padding: 0 .5em;
+}
+
+#dokuwiki__header {
+    width: 100%;
+
+    .headings {
+        float: left;
+    }
+
+    .tools {
+        float: right;
+        text-align: right;
+    }
+}
+
+[dir=rtl] #dokuwiki__header {
+    .headings {
+        float: right;
+        text-align: right;
+    }
+
+    .tools {
+        float: left;
+        text-align: left;
+    }
+}
+
+#dokuwiki__site .wrapper {
+    position: relative;
+}
+
+#dokuwiki__aside {
+    width: @ini_sidebar_width;
+    float: left;
+    position: relative;
+    display: block;
+
+    > .pad {
+        margin: 0 1.5em 0 0;
+    }
+}
+
+[dir=rtl] #dokuwiki__aside {
+    float: right;
+    > .pad {
+        margin: 0 0 0 1.5em;
+    }
+}
+
+.showSidebar #dokuwiki__content {
+    float: right;
+    margin-left: (-1 * @ini_sidebar_width);
+    width: 100%;
+
+    > .pad {
+        margin-left: @ini_sidebar_width;
+    }
+}
+
+[dir=rtl] .showSidebar #dokuwiki__content {
+    float: left;
+    margin-left: 0;
+    margin-right: (-1 * @ini_sidebar_width);
+
+    > .pad {
+        margin-left: 0;
+        margin-right: @ini_sidebar_width;
+    }
+}
+
+#dokuwiki__footer {
+    clear: both;
+}
diff --git a/css/ui.layout.css b/css/ui.layout.css
new file mode 100755 (executable)
index 0000000..c1cb1b3
--- /dev/null
@@ -0,0 +1,225 @@
+/*
+ * Default Layout Theme
+ *
+ * Created for jquery.layout 
+ *
+ * Copyright (c) 2010 
+ *   Fabrizio Balliano (http://www.fabrizioballiano.net)
+ *   Kevin Dalman (http://allpro.net)
+ *
+ * Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)
+ * and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.
+ *
+ * Last Updated: 2010-02-10
+ * NOTE: For best code readability, view this with a fixed-space font and tabs equal to 4-chars
+ */
+
+/*
+ *     DEFAULT FONT
+ *     Just to make demo-pages look better - not actually relevant to Layout!
+ */
+body {
+       font-family: Geneva, Arial, Helvetica, sans-serif;
+       font-size:   100%;
+       *font-size:  80%;
+}
+
+/*
+ *     PANES & CONTENT-DIVs
+ */
+.ui-layout-pane { /* all 'panes' */
+       background:     #FFF; 
+       border:         1px solid #BBB;
+       padding:        10px; 
+       overflow:       auto;
+       /* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
+          otherwise you may get double-scrollbars - on the pane AND on the content-div
+          - use ui-layout-wrapper class if pane has a content-div
+          - use ui-layout-container if pane has an inner-layout
+       */
+       }
+       /* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
+       .ui-layout-content {
+               padding:        10px;
+               position:       relative; /* contain floated or positioned elements */
+               overflow:       auto; /* add scrolling to content-div */
+       }
+
+/*
+ *     UTILITY CLASSES
+ *     Must come AFTER pane-class above so will override
+ *     These classes are NOT auto-generated and are NOT used by Layout
+ */
+.layout-child-container,
+.layout-content-container {
+       padding:        0;
+       overflow:       hidden;
+}
+.layout-child-container {
+       border:         0; /* remove border because inner-layout-panes probably have borders */
+}
+.layout-scroll {
+       overflow:       auto;
+}
+.layout-hide {
+       display:        none;
+}
+
+/*
+ *     RESIZER-BARS
+ */
+.ui-layout-resizer     { /* all 'resizer-bars' */
+       background:             #DDD;
+       border:                 1px solid #BBB;
+       border-width:   0;
+       }
+       .ui-layout-resizer-drag {               /* REAL resizer while resize in progress */
+       }
+       .ui-layout-resizer-hover        {       /* affects both open and closed states */
+       }
+       /* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
+               otherwise color shifts while dragging when bar can't keep up with mouse */
+       .ui-layout-resizer-open-hover , /* hover-color to 'resize' */
+       .ui-layout-resizer-dragging {   /* resizer beging 'dragging' */
+               background: #C4E1A4;
+       }
+       .ui-layout-resizer-dragging {   /* CLONED resizer being dragged */
+               border:          1px solid #BBB;
+       }
+       .ui-layout-resizer-north-dragging,
+       .ui-layout-resizer-south-dragging {
+               border-width:   1px 0;
+       }
+       .ui-layout-resizer-west-dragging,
+       .ui-layout-resizer-east-dragging {
+               border-width:   0 1px;
+       }
+       /* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
+       .ui-layout-resizer-dragging-limit {     /* CLONED resizer at min or max size-limit */
+               background: #E1A4A4; /* red */
+       }
+
+       .ui-layout-resizer-closed-hover { /* hover-color to 'slide open' */
+               background: #EBD5AA;
+       }
+       .ui-layout-resizer-sliding {    /* resizer when pane is 'slid open' */
+               opacity: .10; /* show only a slight shadow */
+               filter:  alpha(opacity=10);
+               }
+               .ui-layout-resizer-sliding-hover {      /* sliding resizer - hover */
+                       opacity: 1.00; /* on-hover, show the resizer-bar normally */
+                       filter:  alpha(opacity=100);
+               }
+               /* sliding resizer - add 'outside-border' to resizer on-hover 
+                * this sample illustrates how to target specific panes and states */
+               .ui-layout-resizer-north-sliding-hover  { border-bottom-width:  1px; }
+               .ui-layout-resizer-south-sliding-hover  { border-top-width:             1px; }
+               .ui-layout-resizer-west-sliding-hover   { border-right-width:   1px; }
+               .ui-layout-resizer-east-sliding-hover   { border-left-width:    1px; }
+
+/*
+ *     TOGGLER-BUTTONS
+ */
+.ui-layout-toggler {
+       border: 1px solid #BBB; /* match pane-border */
+       background-color: #BBB;
+       }
+       .ui-layout-resizer-hover .ui-layout-toggler {
+               opacity: .60;
+               filter:  alpha(opacity=60);
+       }
+       .ui-layout-toggler-hover , /* need when NOT resizable */
+       .ui-layout-resizer-hover .ui-layout-toggler-hover { /* need specificity when IS resizable */
+               background-color: #FC6;
+               opacity: 1.00;
+               filter:  alpha(opacity=100);
+       }
+       .ui-layout-toggler-north ,
+       .ui-layout-toggler-south {
+               border-width: 0 1px; /* left/right borders */
+       }
+       .ui-layout-toggler-west ,
+       .ui-layout-toggler-east {
+               border-width: 1px 0; /* top/bottom borders */
+       }
+       /* hide the toggler-button when the pane is 'slid open' */
+       .ui-layout-resizer-sliding  .ui-layout-toggler {
+               display: none;
+       }
+       /*
+        *      style the text we put INSIDE the togglers
+        */
+       .ui-layout-toggler .content {
+               color:                  #666;
+               font-size:              12px;
+               font-weight:    bold;
+               width:                  100%;
+               padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
+       }
+
+/*
+ *     PANE-MASKS
+ *     these styles are hard-coded on mask elems, but are also 
+ *     included here as !important to ensure will overrides any generic styles
+ */
+.ui-layout-mask {
+       border:         none !important;
+       padding:        0 !important;
+       margin:         0 !important;
+       overflow:       hidden !important;
+       position:       absolute !important;
+       opacity:        0 !important;
+       filter:         Alpha(Opacity="0") !important;
+}
+.ui-layout-mask-inside-pane { /* masks always inside pane EXCEPT when pane is an iframe */
+       top:            0 !important;
+       left:           0 !important;
+       width:          100% !important;
+       height:         100% !important;
+}
+div.ui-layout-mask {}          /* standard mask for iframes */
+iframe.ui-layout-mask {}       /* extra mask for objects/applets */
+
+/*
+ *     Default printing styles
+ */
+@media print {
+       /*
+        *      Unless you want to print the layout as it appears onscreen,
+        *      these html/body styles are needed to allow the content to 'flow'
+        */
+       html {
+               height:         auto !important;
+               overflow:       visible !important;
+       }
+       body.ui-layout-container {
+               
+               position:       static !important;
+               top:            auto !important;
+               bottom:         auto !important;
+               left:           auto !important;
+               right:          auto !important;
+               /* only IE6 has container width & height set by Layout */
+               _width:         auto !important;
+               _height:        auto !important;
+       }
+       .ui-layout-resizer, .ui-layout-toggler {
+               display:        none !important;
+       }
+       /*
+        *      Default pane print styles disables positioning, borders and backgrounds.
+        *      You can modify these styles however it suit your needs.
+        */
+       .ui-layout-pane {
+               border:         none !important;
+               background:      transparent !important;
+               position:       relative !important;
+               top:            auto !important;
+               bottom:         auto !important;
+               left:           auto !important;
+               right:          auto !important;
+               width:          auto !important;
+               height:         auto !important;
+               overflow:       visible !important;
+       }
+}
\ No newline at end of file
diff --git a/detail.php b/detail.php
new file mode 100755 (executable)
index 0000000..d4c6cd2
--- /dev/null
@@ -0,0 +1,154 @@
+<?php
+/**
+ * codologic Image Detail Template
+ *
+ * @link     http://dokuwiki.org/template
+ * 
+ * Author: Avinash D'Silva <avinash.roshan.dsilva@gmail.com|codologic.com>
+ * 
+ * Previous Authors:
+ * @author   Anika Henke <anika@selfthinker.org>
+ * @author   Clarence Lee <clarencedglee@gmail.com>
+ * @license  GPL 2 (http://www.gnu.org/licenses/gpl.html)
+ */
+
+// require functions
+require_once(dirname(__FILE__) . DIRECTORY_SEPARATOR .'bootstrap.php');
+
+// must be run from within DokuWiki
+if (!defined('DOKU_INC')) die();
+header('X-UA-Compatible: IE=edge,chrome=1');
+
+?><!DOCTYPE html>
+<html lang="<?php echo $conf['lang']?>" dir="<?php echo $lang['direction'] ?>" class="no-js">
+<head>
+    <meta charset="utf-8" />
+    <title>
+        <?php echo hsc(tpl_img_getTag('IPTC.Headline',$IMG))?>
+        [<?php echo strip_tags($conf['title'])?>]
+    </title>
+    <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
+    <?php tpl_metaheaders()?>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <?php echo tpl_favicon(array('favicon', 'mobile')) ?>
+    <?php tpl_includeFile('meta.html') ?>
+</head>
+
+<body>
+    <!--[if lte IE 7 ]><div id="IE7"><![endif]--><!--[if IE 8 ]><div id="IE8"><![endif]-->
+    <div id="dokuwiki__site"><div id="dokuwiki__top" class="site <?php echo tpl_classes(); ?>">
+
+        <?php include('tpl_header.php') ?>
+
+        <div class="wrapper group" id="dokuwiki__detail">
+
+            <!-- ********** CONTENT ********** -->
+            <div id="dokuwiki__content"><div class="pad group">
+
+                <?php if(!$ERROR): ?>
+                    <div class="pageId"><span><?php echo hsc(tpl_img_getTag('IPTC.Headline',$IMG)); ?></span></div>
+                <?php endif; ?>
+
+                <div class="page group">
+                    <?php tpl_flush() ?>
+                    <?php tpl_includeFile('pageheader.html') ?>
+                    <!-- detail start -->
+                    <?php
+                    if($ERROR):
+                        echo '<h1>'.$ERROR.'</h1>';
+                    else: ?>
+
+                        <h1><?php echo nl2br(hsc(tpl_img_getTag('simple.title'))); ?></h1>
+
+                        <?php tpl_img(900,700); /* parameters: maximum width, maximum height (and more) */ ?>
+
+                        <div class="img_detail">
+                            <dl>
+                                <?php
+                                    // @todo: logic should be transferred to backend
+                                    $config_files = getConfigFiles('mediameta');
+                                    foreach ($config_files as $config_file) {
+                                        if(@file_exists($config_file)) {
+                                            include($config_file);
+                                        }
+                                    }
+
+                                    foreach($fields as $key => $tag){
+                                        $t = array();
+                                        if (!empty($tag[0])) {
+                                            $t = array($tag[0]);
+                                        }
+                                        if(is_array($tag[3])) {
+                                            $t = array_merge($t,$tag[3]);
+                                        }
+                                        $value = tpl_img_getTag($t);
+                                        if ($value) {
+                                            echo '<dt>'.$lang[$tag[1]].':</dt><dd>';
+                                            if ($tag[2] == 'date') {
+                                                echo dformat($value);
+                                            } else {
+                                                echo hsc($value);
+                                            }
+                                            echo '</dd>';
+                                        }
+                                    }
+                                ?>
+                            </dl>
+                        </div>
+                        <?php //Comment in for Debug// dbg(tpl_img_getTag('Simple.Raw'));?>
+                    <?php endif; ?>
+                </div>
+                <!-- detail stop -->
+                <?php tpl_includeFile('pagefooter.html') ?>
+                <?php tpl_flush() ?>
+
+                <?php /* doesn't make sense like this; @todo: maybe add tpl_imginfo()?
+                <div class="docInfo"><?php tpl_pageinfo(); ?></div>
+                */ ?>
+
+            </div></div><!-- /content -->
+
+            <hr class="a11y" />
+
+            <!-- PAGE ACTIONS -->
+            <?php if (!$ERROR): ?>
+                <div id="dokuwiki__pagetools">
+                    <h3 class="a11y"><?php echo $lang['page_tools']; ?></h3>
+                    <div class="tools">
+                        <ul>
+                            <?php
+                                $data = array();
+                                $data['view'] = 'detail';
+
+                                // View in media manager; @todo: transfer logic to backend
+                                $imgNS = getNS($IMG);
+                                $authNS = auth_quickaclcheck("$imgNS:*");
+                                if (($authNS >= AUTH_UPLOAD) && function_exists('media_managerURL')) {
+                                    $mmURL = media_managerURL(array('ns' => $imgNS, 'image' => $IMG));
+                                    $data['items']['mediaManager'] = '<li><a href="'.$mmURL.'" class="mediaManager"><span>'.$lang['img_manager'].'</span></a></li>';
+                                }
+
+                                // Back to [ID]; @todo: transfer logic to backend
+                                $data['items']['img_backto'] = '<li><a href="'.wl($ID).'" class="back"><span>'.$lang['img_backto'].' '.$ID.'</span></a></li>';
+
+                                // the page tools can be amended through a custom plugin hook
+                                $evt = new Doku_Event('TEMPLATE_PAGETOOLS_DISPLAY', $data);
+                                if($evt->advise_before()){
+                                    foreach($evt->data['items'] as $k => $html) echo $html;
+                                }
+                                $evt->advise_after();
+                                unset($data);
+                                unset($evt);
+                            ?>
+                        </ul>
+                    </div>
+                </div>
+            <?php endif; ?>
+        </div><!-- /wrapper -->
+
+        <?php include('tpl_footer.php') ?>
+    </div></div><!-- /site -->
+
+    <!--[if ( lte IE 7 | IE 8 ) ]></div><![endif]-->
+</body>
+</html>
diff --git a/header.html b/header.html
new file mode 100644 (file)
index 0000000..4cfcc6d
--- /dev/null
@@ -0,0 +1,73 @@
+<style>
+.indexmenu_nojs ul.idx {
+       font-family: Arial, Verdana;   
+       font-size: 14px;   
+       margin: 0;   
+       padding: 0;   
+       list-style: none; 
+       z-index: +1;
+       text-transform: capitalize;
+}
+
+.indexmenu_nojs ul.idx li {
+       display: block;   
+       position: relative;   
+       float: left; 
+       margin: 0px;
+}
+
+.indexmenu_nojs li ul { 
+       display: none; 
+}
+
+.indexmenu_nojs ul.idx li a {
+       display: block;   
+       text-decoration: none;
+       color: #ffffff;   
+       border-top: 1px solid #ffffff;   
+       padding: 5px 15px 5px 15px;   
+       background: #2980B9;   
+       margin-left: 1px;   
+       white-space: nowrap; 
+}
+
+.indexmenu_nojs ul.idx li a:hover { 
+       background: #617F8A; 
+}
+
+.indexmenu_nojs li:hover > ul {   
+       display: block;
+       position: absolute; 
+}
+
+.indexmenu_nojs li:hover li {
+       float: none;
+       font-size: 11px; 
+       width: 135px;
+       left: 10px;
+}
+
+.indexmenu_nojs li:hover a {
+       background: #2980B9; 
+} 
+
+li:hover li a:hover {
+       background: #95A9B1; 
+}
+
+.indexmenu_nojs ul ul ul {
+        top: 0;
+        left:125px;
+        display:none;
+}
+
+.dTreeNode a:link, .dTreeNode a:visited {
+       color:#FFFFFF;
+}
+
+
+
+</style>
+<div class="topbar">
+    <?php tpl_include_page('cooperative:topbar') /* includes the wiki page "cooperative:topbar" */ ?>
+</div>
diff --git a/images/apple-touch-icon.png b/images/apple-touch-icon.png
new file mode 100755 (executable)
index 0000000..fb5f108
Binary files /dev/null and b/images/apple-touch-icon.png differ
diff --git a/images/button-css.png b/images/button-css.png
new file mode 100755 (executable)
index 0000000..706325e
Binary files /dev/null and b/images/button-css.png differ
diff --git a/images/button-donate.gif b/images/button-donate.gif
new file mode 100755 (executable)
index 0000000..bba284e
Binary files /dev/null and b/images/button-donate.gif differ
diff --git a/images/button-dw.png b/images/button-dw.png
new file mode 100755 (executable)
index 0000000..8d6aea8
Binary files /dev/null and b/images/button-dw.png differ
diff --git a/images/button-html5.png b/images/button-html5.png
new file mode 100755 (executable)
index 0000000..5885a33
Binary files /dev/null and b/images/button-html5.png differ
diff --git a/images/button-php.gif b/images/button-php.gif
new file mode 100755 (executable)
index 0000000..19aefb0
Binary files /dev/null and b/images/button-php.gif differ
diff --git a/images/button-rss.png b/images/button-rss.png
new file mode 100755 (executable)
index 0000000..b7cddad
Binary files /dev/null and b/images/button-rss.png differ
diff --git a/images/codo_logo.png b/images/codo_logo.png
new file mode 100755 (executable)
index 0000000..d8dcf3b
Binary files /dev/null and b/images/codo_logo.png differ
diff --git a/images/codo_logo_s.png b/images/codo_logo_s.png
new file mode 100755 (executable)
index 0000000..94a2af4
Binary files /dev/null and b/images/codo_logo_s.png differ
diff --git a/images/favicon.ico b/images/favicon.ico
new file mode 100755 (executable)
index 0000000..8b9616a
Binary files /dev/null and b/images/favicon.ico differ
diff --git a/images/license.txt b/images/license.txt
new file mode 100755 (executable)
index 0000000..7d12604
--- /dev/null
@@ -0,0 +1,5 @@
+Icons for:  sitetools.png
+Icon set:   Dusseldorf
+Designer:   pc.de
+License:    Creative Commons Attribution License [http://creativecommons.org/licenses/by/3.0/]
+URL:        http://pc.de/icons/#Dusseldorf
diff --git a/images/logo.png b/images/logo.png
new file mode 100755 (executable)
index 0000000..3564027
Binary files /dev/null and b/images/logo.png differ
diff --git a/images/page-background.svg b/images/page-background.svg
new file mode 100755 (executable)
index 0000000..086341d
--- /dev/null
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+    <linearGradient id="g" x1="0%" y1="0%" x2="0%" y2="100%">
+        <stop offset="0" stop-color="#dddddd" />
+        <stop offset="0.1" stop-color="#eeeeee" />
+        <stop offset="0.4" stop-color="#fbfaf9" />
+    </linearGradient>
+    <rect x="0" y="0" width="100%" height="100%" fill="url(#g)" />
+</svg>
\ No newline at end of file
diff --git a/images/page-gradient.png b/images/page-gradient.png
new file mode 100755 (executable)
index 0000000..8e16a28
Binary files /dev/null and b/images/page-gradient.png differ
diff --git a/images/pagetools-build.php b/images/pagetools-build.php
new file mode 100755 (executable)
index 0000000..1b7262a
--- /dev/null
@@ -0,0 +1,121 @@
+<?php
+/**
+ * This script generates a sprite from the unprocessed pagetool icons by combining them
+ * and overlaying a color layer for the active state.
+ *
+ * This script requires a current libGD to be available.
+ *
+ * The color for the active state is read from the style.ini's __link__ replacement
+ *
+ * The final sprite is optimized with optipng if available.
+ *
+ * @author Andreas Gohr <andi@splitbrain.org>
+ * @todo   Maybe add some more error checking
+ */
+$GAMMA = 0.8;
+$OPTIPNG = '/usr/bin/optipng';
+
+// load input images
+$input = glob('pagetools/*.png');
+sort($input);
+$cnt   = count($input);
+if(!$cnt){
+    die("No input images found. This script needs to be called from within the image directory!\n");
+}
+
+// create destination image
+$DST = imagecreatetruecolor(30,$cnt*45*2);
+imagesavealpha($DST, true);
+$C_trans = imagecolorallocatealpha($DST, 0, 0, 0, 127);
+imagefill($DST, 0, 0, $C_trans);
+
+// load highlight color from style.ini
+$ini = parse_ini_file('../style.ini',true);
+$COLOR = hex2rgb($ini['replacements']['__link__']);
+$C_active = imagecolorallocate($DST, $COLOR['r'],$COLOR['g'],$COLOR['b']);
+
+// add all the icons to the sprite image
+for($i=0; $i<$cnt; $i++){
+    $base = $i*90;
+
+    $IN = imagecreatefrompng($input[$i]);
+    imagesavealpha($IN, true);
+    imagecolorscale($IN,$GAMMA);
+    imagecopy($DST,$IN, 0,$base, 0,0, 30,30);
+    imagedestroy($IN);
+
+    $IN = imagecreatefrompng($input[$i]);
+    imagesavealpha($IN, true);
+    imagecolorscale($IN,$GAMMA);
+    imagecopy($DST,$IN, 0,$base+45, 0,0, 30,30);
+    imagedestroy($IN);
+
+    imagelayereffect($DST, IMG_EFFECT_OVERLAY);
+    imagefilledrectangle($DST, 0,$base+45, 30,$base+45+30, $C_active);
+    imagelayereffect($DST, IMG_EFFECT_NORMAL);
+}
+
+// output sprite
+imagepng($DST,'pagetools-sprite.png');
+imagedestroy($DST);
+
+// optimize if possible
+if(is_executable($OPTIPNG)){
+    system("$OPTIPNG -o5 'pagetools-sprite.png'");
+}
+
+/**
+ * Convert a hex color code to an rgb array
+ */
+function hex2rgb($hex) {
+    // strip hash
+    $hex = str_replace('#', '', $hex);
+
+    // normalize short codes
+    if(strlen($hex) == 3){
+        $hex = substr($hex,0,1).
+               substr($hex,0,1).
+               substr($hex,1,1).
+               substr($hex,1,1).
+               substr($hex,2,1).
+               substr($hex,2,1);
+    }
+
+    // calc rgb
+    return array(
+       'r' => hexdec(substr($hex, 0, 2)),
+       'g' => hexdec(substr($hex, 2, 2)),
+       'b' => hexdec(substr($hex, 4, 2))
+    );
+}
+
+/**
+ * Scale (darken/lighten) a given image
+ *
+ * @param ressource $img    The truetype GD image to work on
+ * @param float     $scale  Scale the colors by this value ( <1 darkens, >1 lightens)
+ */
+function imagecolorscale(&$img, $scale){
+    $w = imagesx($img);
+    $h = imagesy($img);
+
+    imagealphablending($img, false);
+    for($x = 0; $x < $w; $x++){
+        for($y = 0; $y < $h; $y++){
+            $rgba   = imagecolorat($img, $x, $y);
+            $a = ($rgba >> 24) & 0xFF;
+            $r = ($rgba >> 16) & 0xFF;
+            $g = ($rgba >> 8) & 0xFF;
+            $b = $rgba & 0xFF;
+
+            $r = max(min(round($r*$scale),255),0);
+            $g = max(min(round($g*$scale),255),0);
+            $b = max(min(round($b*$scale),255),0);
+
+            $color = imagecolorallocatealpha($img, $r, $g, $b, $a);
+            imagesetpixel($img, $x, $y, $color);
+        }
+    }
+    imagealphablending($img, true);
+}
+
diff --git a/images/pagetools-sprite.png b/images/pagetools-sprite.png
new file mode 100755 (executable)
index 0000000..b6e8087
Binary files /dev/null and b/images/pagetools-sprite.png differ
diff --git a/images/pagetools/00_default.png b/images/pagetools/00_default.png
new file mode 100755 (executable)
index 0000000..95d122e
Binary files /dev/null and b/images/pagetools/00_default.png differ
diff --git a/images/pagetools/01_edit.png b/images/pagetools/01_edit.png
new file mode 100755 (executable)
index 0000000..ad4a737
Binary files /dev/null and b/images/pagetools/01_edit.png differ
diff --git a/images/pagetools/02_create.png b/images/pagetools/02_create.png
new file mode 100755 (executable)
index 0000000..e4fc5d3
Binary files /dev/null and b/images/pagetools/02_create.png differ
diff --git a/images/pagetools/03_draft.png b/images/pagetools/03_draft.png
new file mode 100755 (executable)
index 0000000..a13d8c3
Binary files /dev/null and b/images/pagetools/03_draft.png differ
diff --git a/images/pagetools/04_show.png b/images/pagetools/04_show.png
new file mode 100755 (executable)
index 0000000..6f64b1b
Binary files /dev/null and b/images/pagetools/04_show.png differ
diff --git a/images/pagetools/05_source.png b/images/pagetools/05_source.png
new file mode 100755 (executable)
index 0000000..bcc4fa2
Binary files /dev/null and b/images/pagetools/05_source.png differ
diff --git a/images/pagetools/06_revert.png b/images/pagetools/06_revert.png
new file mode 100755 (executable)
index 0000000..7b8457e
Binary files /dev/null and b/images/pagetools/06_revert.png differ
diff --git a/images/pagetools/07_revisions.png b/images/pagetools/07_revisions.png
new file mode 100755 (executable)
index 0000000..d918bce
Binary files /dev/null and b/images/pagetools/07_revisions.png differ
diff --git a/images/pagetools/08_backlink.png b/images/pagetools/08_backlink.png
new file mode 100755 (executable)
index 0000000..2c0823a
Binary files /dev/null and b/images/pagetools/08_backlink.png differ
diff --git a/images/pagetools/09_subscribe.png b/images/pagetools/09_subscribe.png
new file mode 100755 (executable)
index 0000000..30e039d
Binary files /dev/null and b/images/pagetools/09_subscribe.png differ
diff --git a/images/pagetools/10_top.png b/images/pagetools/10_top.png
new file mode 100755 (executable)
index 0000000..e4bf1d4
Binary files /dev/null and b/images/pagetools/10_top.png differ
diff --git a/images/pagetools/11_mediamanager.png b/images/pagetools/11_mediamanager.png
new file mode 100755 (executable)
index 0000000..3611680
Binary files /dev/null and b/images/pagetools/11_mediamanager.png differ
diff --git a/images/pagetools/12_back.png b/images/pagetools/12_back.png
new file mode 100755 (executable)
index 0000000..d154651
Binary files /dev/null and b/images/pagetools/12_back.png differ
diff --git a/images/pagetools/license.txt b/images/pagetools/license.txt
new file mode 100755 (executable)
index 0000000..299624c
--- /dev/null
@@ -0,0 +1,4 @@
+Icon set:   iPhone toolbar icons
+Designer:   TheWorkingGroup.ca
+License:    Creative Commons Attribution-Share Alike License [http://creativecommons.org/licenses/by-sa/3.0/]
+URL:        http://blog.twg.ca/2009/09/free-iphone-toolbar-icons/
diff --git a/images/search.png b/images/search.png
new file mode 100755 (executable)
index 0000000..1ab7866
Binary files /dev/null and b/images/search.png differ
diff --git a/images/toc-arrows.png b/images/toc-arrows.png
new file mode 100755 (executable)
index 0000000..4a353e4
Binary files /dev/null and b/images/toc-arrows.png differ
diff --git a/images/toc-bullet.png b/images/toc-bullet.png
new file mode 100755 (executable)
index 0000000..fc771b9
Binary files /dev/null and b/images/toc-bullet.png differ
diff --git a/images/usertools.png b/images/usertools.png
new file mode 100755 (executable)
index 0000000..e99b659
Binary files /dev/null and b/images/usertools.png differ
diff --git a/js/layout.js b/js/layout.js
new file mode 100755 (executable)
index 0000000..ae7f3c7
--- /dev/null
@@ -0,0 +1,6083 @@
+/**
+ * @preserve
+ * jquery.layout 1.4.3
+ * $Date: 2014-08-30 08:00:00 (Sat, 30 Aug 2014) $
+ * $Rev: 1.0403 $
+ *
+ * Copyright (c) 2014 Kevin Dalman (http://jquery-dev.com)
+ * Based on work by Fabrizio Balliano (http://www.fabrizioballiano.net)
+ *
+ * Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)
+ * and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.
+ *
+ * SEE: http://layout.jquery-dev.com/LICENSE.txt
+ *
+ * Changelog: http://layout.jquery-dev.com/changelog.cfm
+ *
+ * Docs: http://layout.jquery-dev.com/documentation.html
+ * Tips: http://layout.jquery-dev.com/tips.html
+ * Help: http://groups.google.com/group/jquery-ui-layout
+ */
+
+/* JavaDoc Info: http://code.google.com/closure/compiler/docs/js-for-compiler.html
+ * {!Object}   non-nullable type (never NULL)
+ * {?string}   nullable type (sometimes NULL) - default for {Object}
+ * {number=}   optional parameter
+ * {*}                 ALL types
+ */
+/*     TODO for jQ 2.0 
+ *     change .andSelf() to .addBack()
+ *     check $.fn.disableSelection - this is in jQuery UI 1.9.x
+ */
+
+// NOTE: For best readability, view with a fixed-width font and tabs equal to 4-chars
+
+;(function ($) {
+
+// alias Math methods - used a lot!
+var    min             = Math.min
+,      max             = Math.max
+,      round   = Math.floor
+
+,      isStr   =  function (v) { return $.type(v) === "string"; }
+
+       /**
+        * @param {!Object}                     Instance
+        * @param {Array.<string>}      a_fn
+        */
+,      runPluginCallbacks = function (Instance, a_fn) {
+               if ($.isArray(a_fn))
+                       for (var i=0, c=a_fn.length; i<c; i++) {
+                               var fn = a_fn[i];
+                               try {
+                                       if (isStr(fn)) // 'name' of a function
+                                               fn = eval(fn);
+                                       if ($.isFunction(fn))
+                                               g(fn)( Instance );
+                               } catch (ex) {}
+                       }
+               function g (f) { return f; }; // compiler hack
+       }
+;
+
+/*
+ *     GENERIC $.layout METHODS - used by all layouts
+ */
+$.layout = {
+
+       version:        "1.4.3"
+,      revision:       1.0403 // eg: 1.4.1 final = 1.0401 - major(n+).minor(nn)+patch(nn+)
+
+       // $.layout.browser REPLACES $.browser
+,      browser:        {} // set below
+
+       // *PREDEFINED* EFFECTS & DEFAULTS 
+       // MUST list effect here - OR MUST set an fxSettings option (can be an empty hash: {})
+,      effects: {
+
+       //      Pane Open/Close Animations
+               slide: {
+                       all:    { duration:  "fast"     } // eg: duration: 1000, easing: "easeOutBounce"
+               ,       north:  { direction: "up"       }
+               ,       south:  { direction: "down"     }
+               ,       east:   { direction: "right"}
+               ,       west:   { direction: "left"     }
+               }
+       ,       drop: {
+                       all:    { duration:  "slow"     }
+               ,       north:  { direction: "up"       }
+               ,       south:  { direction: "down"     }
+               ,       east:   { direction: "right"}
+               ,       west:   { direction: "left"     }
+               }
+       ,       scale: {
+                       all:    { duration:     "fast"  }
+               }
+       //      these are not recommended, but can be used
+       ,       blind:          {}
+       ,       clip:           {}
+       ,       explode:        {}
+       ,       fade:           {}
+       ,       fold:           {}
+       ,       puff:           {}
+
+       //      Pane Resize Animations
+       ,       size: {
+                       all:    { easing:       "swing" }
+               }
+       }
+
+       // INTERNAL CONFIG DATA - DO NOT CHANGE THIS!
+,      config: {
+               optionRootKeys: "effects,panes,north,south,west,east,center".split(",")
+       ,       allPanes:               "north,south,west,east,center".split(",")
+       ,       borderPanes:    "north,south,west,east".split(",")
+       ,       oppositeEdge: {
+                       north:  "south"
+               ,       south:  "north"
+               ,       east:   "west"
+               ,       west:   "east"
+               }
+       //      offscreen data
+       ,       offscreenCSS:   { left: "-99999px", right: "auto" } // used by hide/close if useOffscreenClose=true
+       ,       offscreenReset: "offscreenReset" // key used for data
+       //      CSS used in multiple places
+       ,       hidden:         { visibility: "hidden" }
+       ,       visible:        { visibility: "visible" }
+       //      layout element settings
+       ,       resizers: {
+                       cssReq: {
+                               position:       "absolute"
+                       ,       padding:        0
+                       ,       margin:         0
+                       ,       fontSize:       "1px"
+                       ,       textAlign:      "left"  // to counter-act "center" alignment!
+                       ,       overflow:       "hidden" // prevent toggler-button from overflowing
+                       //      SEE $.layout.defaults.zIndexes.resizer_normal
+                       }
+               ,       cssDemo: { // DEMO CSS - applied if: options.PANE.applyDemoStyles=true
+                               background: "#DDD"
+                       ,       border:         "none"
+                       }
+               }
+       ,       togglers: {
+                       cssReq: {
+                               position:       "absolute"
+                       ,       display:        "block"
+                       ,       padding:        0
+                       ,       margin:         0
+                       ,       overflow:       "hidden"
+                       ,       textAlign:      "center"
+                       ,       fontSize:       "1px"
+                       ,       cursor:         "pointer"
+                       ,       zIndex:         1
+                       }
+               ,       cssDemo: { // DEMO CSS - applied if: options.PANE.applyDemoStyles=true
+                               background: "#AAA"
+                       }
+               }
+       ,       content: {
+                       cssReq: {
+                               position:       "relative" /* contain floated or positioned elements */
+                       }
+               ,       cssDemo: { // DEMO CSS - applied if: options.PANE.applyDemoStyles=true
+                               overflow:       "auto"
+                       ,       padding:        "10px"
+                       }
+               ,       cssDemoPane: { // DEMO CSS - REMOVE scrolling from 'pane' when it has a content-div
+                               overflow:       "hidden"
+                       ,       padding:        0
+                       }
+               }
+       ,       panes: { // defaults for ALL panes - overridden by 'per-pane settings' below
+                       cssReq: {
+                               position:       "absolute"
+                       ,       margin:         0
+                       //      $.layout.defaults.zIndexes.pane_normal
+                       }
+               ,       cssDemo: { // DEMO CSS - applied if: options.PANE.applyDemoStyles=true
+                               padding:        "10px"
+                       ,       background:     "#FFF"
+                       ,       border:         "1px solid #BBB"
+                       ,       overflow:       "auto"
+                       }
+               }
+       ,       north: {
+                       side:                   "top"
+               ,       sizeType:               "Height"
+               ,       dir:                    "horz"
+               ,       cssReq: {
+                               top:            0
+                       ,       bottom:         "auto"
+                       ,       left:           0
+                       ,       right:          0
+                       ,       width:          "auto"
+                       //      height:         DYNAMIC
+                       }
+               }
+       ,       south: {
+                       side:                   "bottom"
+               ,       sizeType:               "Height"
+               ,       dir:                    "horz"
+               ,       cssReq: {
+                               top:            "auto"
+                       ,       bottom:         0
+                       ,       left:           0
+                       ,       right:          0
+                       ,       width:          "auto"
+                       //      height:         DYNAMIC
+                       }
+               }
+       ,       east: {
+                       side:                   "right"
+               ,       sizeType:               "Width"
+               ,       dir:                    "vert"
+               ,       cssReq: {
+                               left:           "auto"
+                       ,       right:          0
+                       ,       top:            "auto" // DYNAMIC
+                       ,       bottom:         "auto" // DYNAMIC
+                       ,       height:         "auto"
+                       //      width:          DYNAMIC
+                       }
+               }
+       ,       west: {
+                       side:                   "left"
+               ,       sizeType:               "Width"
+               ,       dir:                    "vert"
+               ,       cssReq: {
+                               left:           0
+                       ,       right:          "auto"
+                       ,       top:            "auto" // DYNAMIC
+                       ,       bottom:         "auto" // DYNAMIC
+                       ,       height:         "auto"
+                       //      width:          DYNAMIC
+                       }
+               }
+       ,       center: {
+                       dir:                    "center"
+               ,       cssReq: {
+                               left:           "auto" // DYNAMIC
+                       ,       right:          "auto" // DYNAMIC
+                       ,       top:            "auto" // DYNAMIC
+                       ,       bottom:         "auto" // DYNAMIC
+                       ,       height:         "auto"
+                       ,       width:          "auto"
+                       }
+               }
+       }
+
+       // CALLBACK FUNCTION NAMESPACE - used to store reusable callback functions
+,      callbacks: {}
+
+,      getParentPaneElem: function (el) {
+               // must pass either a container or pane element
+               var $el = $(el)
+               ,       layout = $el.data("layout") || $el.data("parentLayout");
+               if (layout) {
+                       var $cont = layout.container;
+                       // see if this container is directly-nested inside an outer-pane
+                       if ($cont.data("layoutPane")) return $cont;
+                       var $pane = $cont.closest("."+ $.layout.defaults.panes.paneClass);
+                       // if a pane was found, return it
+                       if ($pane.data("layoutPane")) return $pane;
+               }
+               return null;
+       }
+
+,      getParentPaneInstance: function (el) {
+               // must pass either a container or pane element
+               var $pane = $.layout.getParentPaneElem(el);
+               return $pane ? $pane.data("layoutPane") : null;
+       }
+
+,      getParentLayoutInstance: function (el) {
+               // must pass either a container or pane element
+               var $pane = $.layout.getParentPaneElem(el);
+               return $pane ? $pane.data("parentLayout") : null;
+       }
+
+,      getEventObject: function (evt) {
+               return typeof evt === "object" && evt.stopPropagation ? evt : null;
+       }
+,      parsePaneName: function (evt_or_pane) {
+               var evt = $.layout.getEventObject( evt_or_pane )
+               ,       pane = evt_or_pane;
+               if (evt) {
+                       // ALWAYS stop propagation of events triggered in Layout!
+                       evt.stopPropagation();
+                       pane = $(this).data("layoutEdge");
+               }
+               if (pane && !/^(west|east|north|south|center)$/.test(pane)) {
+                       $.layout.msg('LAYOUT ERROR - Invalid pane-name: "'+ pane +'"');
+                       pane = "error";
+               }
+               return pane;
+       }
+
+
+       // LAYOUT-PLUGIN REGISTRATION
+       // more plugins can added beyond this default list
+,      plugins: {
+               draggable:              !!$.fn.draggable // resizing
+       ,       effects: {
+                       core:           !!$.effects             // animimations (specific effects tested by initOptions)
+               ,       slide:          $.effects && ($.effects.slide || ($.effects.effect && $.effects.effect.slide)) // default effect
+               }
+       }
+
+//     arrays of plugin or other methods to be triggered for events in *each layout* - will be passed 'Instance'
+,      onCreate:       []      // runs when layout is just starting to be created - right after options are set
+,      onLoad:         []      // runs after layout container and global events init, but before initPanes is called
+,      onReady:        []      // runs after initialization *completes* - ie, after initPanes completes successfully
+,      onDestroy:      []      // runs after layout is destroyed
+,      onUnload:       []      // runs after layout is destroyed OR when page unloads
+,      afterOpen:      []      // runs after setAsOpen() completes
+,      afterClose:     []      // runs after setAsClosed() completes
+
+       /*
+        *      GENERIC UTILITY METHODS
+        */
+
+       // calculate and return the scrollbar width, as an integer
+,      scrollbarWidth:         function () { return window.scrollbarWidth  || $.layout.getScrollbarSize('width'); }
+,      scrollbarHeight:        function () { return window.scrollbarHeight || $.layout.getScrollbarSize('height'); }
+,      getScrollbarSize:       function (dim) {
+               var $c  = $('<div style="position: absolute; top: -10000px; left: -10000px; width: 100px; height: 100px; border: 0; overflow: scroll;"></div>').appendTo("body")
+               ,       d       = { width: $c.outerWidth - $c[0].clientWidth, height: 100 - $c[0].clientHeight };
+               $c.remove();
+               window.scrollbarWidth   = d.width;
+               window.scrollbarHeight  = d.height;
+               return dim.match(/^(width|height)$/) ? d[dim] : d;
+       }
+
+
+,      disableTextSelection: function () {
+               var $d  = $(document)
+               ,       s       = 'textSelectionDisabled'
+               ,       x       = 'textSelectionInitialized'
+               ;
+               if ($.fn.disableSelection) {
+                       if (!$d.data(x)) // document hasn't been initialized yet
+                               $d.on('mouseup', $.layout.enableTextSelection ).data(x, true);
+                       if (!$d.data(s))
+                               $d.disableSelection().data(s, true);
+               }
+       }
+,      enableTextSelection: function () {
+               var $d  = $(document)
+               ,       s       = 'textSelectionDisabled';
+               if ($.fn.enableSelection && $d.data(s))
+                       $d.enableSelection().data(s, false);
+       }
+
+
+       /**
+        * Returns hash container 'display' and 'visibility'
+        *
+        * @see $.swap() - swaps CSS, runs callback, resets CSS
+        * @param  {!Object}            $E                              jQuery element
+        * @param  {boolean=}   [force=false]   Run even if display != none
+        * @return {!Object}                                            Returns current style props, if applicable
+        */
+,      showInvisibly: function ($E, force) {
+               if ($E && $E.length && (force || $E.css("display") === "none")) { // only if not *already hidden*
+                       var s = $E[0].style
+                               // save ONLY the 'style' props because that is what we must restore
+                       ,       CSS = { display: s.display || '', visibility: s.visibility || '' };
+                       // show element 'invisibly' so can be measured
+                       $E.css({ display: "block", visibility: "hidden" });
+                       return CSS;
+               }
+               return {};
+       }
+
+       /**
+        * Returns data for setting size of an element (container or a pane).
+        *
+        * @see  _create(), onWindowResize() for container, plus others for pane
+        * @return JSON  Returns a hash of all dimensions: top, bottom, left, right, outerWidth, innerHeight, etc
+        */
+,      getElementDimensions: function ($E, inset) {
+               var
+               //      dimensions hash - start with current data IF passed
+                       d       = { css: {}, inset: {} }
+               ,       x       = d.css                 // CSS hash
+               ,       i       = { bottom: 0 } // TEMP insets (bottom = complier hack)
+               ,       N       = $.layout.cssNum
+               ,       R       = Math.round
+               ,       off = $E.offset()
+               ,       b, p, ei                        // TEMP border, padding
+               ;
+               d.offsetLeft = off.left;
+               d.offsetTop  = off.top;
+
+               if (!inset) inset = {}; // simplify logic below
+
+               $.each("Left,Right,Top,Bottom".split(","), function (idx, e) { // e = edge
+                       b = x["border" + e] = $.layout.borderWidth($E, e);
+                       p = x["padding"+ e] = $.layout.cssNum($E, "padding"+e);
+                       ei = e.toLowerCase();
+                       d.inset[ei] = inset[ei] >= 0 ? inset[ei] : p; // any missing insetX value = paddingX
+                       i[ei] = d.inset[ei] + b; // total offset of content from outer side
+               });
+
+               x.width         = R($E.width());
+               x.height        = R($E.height());
+               x.top           = N($E,"top",true);
+               x.bottom        = N($E,"bottom",true);
+               x.left          = N($E,"left",true);
+               x.right         = N($E,"right",true);
+
+               d.outerWidth    = R($E.outerWidth());
+               d.outerHeight   = R($E.outerHeight());
+               // calc the TRUE inner-dimensions, even in quirks-mode!
+               d.innerWidth    = max(0, d.outerWidth  - i.left - i.right);
+               d.innerHeight   = max(0, d.outerHeight - i.top  - i.bottom);
+               // layoutWidth/Height is used in calcs for manual resizing
+               // layoutW/H only differs from innerW/H when in quirks-mode - then is like outerW/H
+               d.layoutWidth   = R($E.innerWidth());
+               d.layoutHeight  = R($E.innerHeight());
+
+               //if ($E.prop('tagName') === 'BODY') { debugData( d, $E.prop('tagName') ); } // DEBUG
+
+               //d.visible     = $E.is(":visible");// && x.width > 0 && x.height > 0;
+
+               return d;
+       }
+
+,      getElementStyles: function ($E, list) {
+               var
+                       CSS     = {}
+               ,       style   = $E[0].style
+               ,       props   = list.split(",")
+               ,       sides   = "Top,Bottom,Left,Right".split(",")
+               ,       attrs   = "Color,Style,Width".split(",")
+               ,       p, s, a, i, j, k
+               ;
+               for (i=0; i < props.length; i++) {
+                       p = props[i];
+                       if (p.match(/(border|padding|margin)$/))
+                               for (j=0; j < 4; j++) {
+                                       s = sides[j];
+                                       if (p === "border")
+                                               for (k=0; k < 3; k++) {
+                                                       a = attrs[k];
+                                                       CSS[p+s+a] = style[p+s+a];
+                                               }
+                                       else
+                                               CSS[p+s] = style[p+s];
+                               }
+                       else
+                               CSS[p] = style[p];
+               };
+               return CSS
+       }
+
+       /**
+        * Return the innerWidth for the current browser/doctype
+        *
+        * @see  initPanes(), sizeMidPanes(), initHandles(), sizeHandles()
+        * @param  {Array.<Object>}     $E  Must pass a jQuery object - first element is processed
+        * @param  {number=}                    outerWidth (optional) Can pass a width, allowing calculations BEFORE element is resized
+        * @return {number}                     Returns the innerWidth of the elem by subtracting padding and borders
+        */
+,      cssWidth: function ($E, outerWidth) {
+               // a 'calculated' outerHeight can be passed so borders and/or padding are removed if needed
+               if (outerWidth <= 0) return 0;
+
+               var lb  = $.layout.browser
+               ,       bs      = !lb.boxModel ? "border-box" : lb.boxSizing ? $E.css("boxSizing") : "content-box"
+               ,       b       = $.layout.borderWidth
+               ,       n       = $.layout.cssNum
+               ,       W       = outerWidth
+               ;
+               // strip border and/or padding from outerWidth to get CSS Width
+               if (bs !== "border-box")
+                       W -= (b($E, "Left") + b($E, "Right"));
+               if (bs === "content-box")
+                       W -= (n($E, "paddingLeft") + n($E, "paddingRight"));
+               return max(0,W);
+       }
+
+       /**
+        * Return the innerHeight for the current browser/doctype
+        *
+        * @see  initPanes(), sizeMidPanes(), initHandles(), sizeHandles()
+        * @param  {Array.<Object>}     $E  Must pass a jQuery object - first element is processed
+        * @param  {number=}                    outerHeight  (optional) Can pass a width, allowing calculations BEFORE element is resized
+        * @return {number}                     Returns the innerHeight of the elem by subtracting padding and borders
+        */
+,      cssHeight: function ($E, outerHeight) {
+               // a 'calculated' outerHeight can be passed so borders and/or padding are removed if needed
+               if (outerHeight <= 0) return 0;
+
+               var lb  = $.layout.browser
+               ,       bs      = !lb.boxModel ? "border-box" : lb.boxSizing ? $E.css("boxSizing") : "content-box"
+               ,       b       = $.layout.borderWidth
+               ,       n       = $.layout.cssNum
+               ,       H       = outerHeight
+               ;
+               // strip border and/or padding from outerHeight to get CSS Height
+               if (bs !== "border-box")
+                       H -= (b($E, "Top") + b($E, "Bottom"));
+               if (bs === "content-box")
+                       H -= (n($E, "paddingTop") + n($E, "paddingBottom"));
+               return max(0,H);
+       }
+
+       /**
+        * Returns the 'current CSS numeric value' for a CSS property - 0 if property does not exist
+        *
+        * @see  Called by many methods
+        * @param {Array.<Object>}      $E                                      Must pass a jQuery object - first element is processed
+        * @param {string}                      prop                            The name of the CSS property, eg: top, width, etc.
+        * @param {boolean=}                    [allowAuto=false]       true = return 'auto' if that is value; false = return 0
+        * @return {(string|number)}                                            Usually used to get an integer value for position (top, left) or size (height, width)
+        */
+,      cssNum: function ($E, prop, allowAuto) {
+               if (!$E.jquery) $E = $($E);
+               var CSS = $.layout.showInvisibly($E)
+               ,       p       = $.css($E[0], prop, true)
+               ,       v       = allowAuto && p=="auto" ? p : Math.round(parseFloat(p) || 0);
+               $E.css( CSS ); // RESET
+               return v;
+       }
+
+,      borderWidth: function (el, side) {
+               if (el.jquery) el = el[0];
+               var b = "border"+ side.substr(0,1).toUpperCase() + side.substr(1); // left => Left
+               return $.css(el, b+"Style", true) === "none" ? 0 : Math.round(parseFloat($.css(el, b+"Width", true)) || 0);
+       }
+
+       /**
+        * Mouse-tracking utility - FUTURE REFERENCE
+        *
+        * init: if (!window.mouse) {
+        *                      window.mouse = { x: 0, y: 0 };
+        *                      $(document).mousemove( $.layout.trackMouse );
+        *              }
+        *
+        * @param {Object}              evt
+        *
+,      trackMouse: function (evt) {
+               window.mouse = { x: evt.clientX, y: evt.clientY };
+       }
+       */
+
+       /**
+        * SUBROUTINE for preventPrematureSlideClose option
+        *
+        * @param {Object}              evt
+        * @param {Object=}             el
+        */
+,      isMouseOverElem: function (evt, el) {
+               var
+                       $E      = $(el || this)
+               ,       d       = $E.offset()
+               ,       T       = d.top
+               ,       L       = d.left
+               ,       R       = L + $E.outerWidth()
+               ,       B       = T + $E.outerHeight()
+               ,       x       = evt.pageX     // evt.clientX ?
+               ,       y       = evt.pageY     // evt.clientY ?
+               ;
+               // if X & Y are < 0, probably means is over an open SELECT
+               return ($.layout.browser.msie && x < 0 && y < 0) || ((x >= L && x <= R) && (y >= T && y <= B));
+       }
+
+       /**
+        * Message/Logging Utility
+        *
+        * @example $.layout.msg("My message");                         // log text
+        * @example $.layout.msg("My message", true);           // alert text
+        * @example $.layout.msg({ foo: "bar" }, "Title");      // log hash-data, with custom title
+        * @example $.layout.msg({ foo: "bar" }, true, "Title", { sort: false }); -OR-
+        * @example $.layout.msg({ foo: "bar" }, "Title", { sort: false, display: true }); // alert hash-data
+        *
+        * @param {(Object|string)}                     info                    String message OR Hash/Array
+        * @param {(Boolean|string|Object)=}    [popup=false]   True means alert-box - can be skipped
+        * @param {(Object|string)=}                    [debugTitle=""] Title for Hash data - can be skipped
+        * @param {Object=}                                     [debugOpts]             Extra options for debug output
+        */
+,      msg: function (info, popup, debugTitle, debugOpts) {
+               if ($.isPlainObject(info) && window.debugData) {
+                       if (typeof popup === "string") {
+                               debugOpts       = debugTitle;
+                               debugTitle      = popup;
+                       }
+                       else if (typeof debugTitle === "object") {
+                               debugOpts       = debugTitle;
+                               debugTitle      = null;
+                       }
+                       var t = debugTitle || "log( <object> )"
+                       ,       o = $.extend({ sort: false, returnHTML: false, display: false }, debugOpts);
+                       if (popup === true || o.display)
+                               debugData( info, t, o );
+                       else if (window.console)
+                               console.log(debugData( info, t, o ));
+               }
+               else if (popup)
+                       alert(info);
+               else if (window.console)
+                       console.log(info);
+               else {
+                       var id  = "#layoutLogger"
+                       ,       $l = $(id);
+                       if (!$l.length)
+                               $l = createLog();
+                       $l.children("ul").append('<li style="padding: 4px 10px; margin: 0; border-top: 1px solid #CCC;">'+ info.replace(/\</g,"&lt;").replace(/\>/g,"&gt;") +'</li>');
+               }
+
+               function createLog () {
+                       var pos = $.support.fixedPosition ? 'fixed' : 'absolute'
+                       ,       $e = $('<div id="layoutLogger" style="position: '+ pos +'; top: 5px; z-index: 999999; max-width: 25%; overflow: hidden; border: 1px solid #000; border-radius: 5px; background: #FBFBFB; box-shadow: 0 2px 10px rgba(0,0,0,0.3);">'
+                               +       '<div style="font-size: 13px; font-weight: bold; padding: 5px 10px; background: #F6F6F6; border-radius: 5px 5px 0 0; cursor: move;">'
+                               +       '<span style="float: right; padding-left: 7px; cursor: pointer;" title="Remove Console" onclick="$(this).closest(\'#layoutLogger\').remove()">X</span>Layout console.log</div>'
+                               +       '<ul style="font-size: 13px; font-weight: none; list-style: none; margin: 0; padding: 0 0 2px;"></ul>'
+                               + '</div>'
+                               ).appendTo("body");
+                       $e.css('left', $(window).width() - $e.outerWidth() - 5)
+                       if ($.ui.draggable) $e.draggable({ handle: ':first-child' });
+                       return $e;
+               };
+       }
+
+};
+
+
+/*
+ *     $.layout.browser REPLACES removed $.browser, with extra data
+ *     Parsing code here adapted from jQuery 1.8 $.browse
+ */
+(function(){
+       var u = navigator.userAgent.toLowerCase()
+       ,       m = /(chrome)[ \/]([\w.]+)/.exec( u )
+               ||      /(webkit)[ \/]([\w.]+)/.exec( u )
+               ||      /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( u )
+               ||      /(msie) ([\w.]+)/.exec( u )
+               ||      u.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( u )
+               ||      []
+       ,       b = m[1] || ""
+       ,       v = m[2] || 0
+       ,       ie = b === "msie"
+       ,       cm = document.compatMode
+       ,       $s = $.support
+       ,       bs = $s.boxSizing !== undefined ? $s.boxSizing : $s.boxSizingReliable
+       ,       bm = !ie || !cm || cm === "CSS1Compat" || $s.boxModel || false
+       ,       lb = $.layout.browser = {
+                       version:        v
+               ,       safari:         b === "webkit"  // webkit (NOT chrome) = safari
+               ,       webkit:         b === "chrome"  // chrome = webkit
+               ,       msie:           ie
+               ,       isIE6:          ie && v == 6
+                       // ONLY IE reverts to old box-model - Note that compatMode was deprecated as of IE8
+               ,       boxModel:       bm
+               ,       boxSizing:      !!(typeof bs === "function" ? bs() : bs)
+               };
+       ;
+       if (b) lb[b] = true; // set CURRENT browser
+       /*      OLD versions of jQuery only set $.support.boxModel after page is loaded
+        *      so if this is IE, use support.boxModel to test for quirks-mode (ONLY IE changes boxModel) */
+       if (!bm && !cm) $(function(){ lb.boxModel = $s.boxModel; });
+})();
+
+
+// DEFAULT OPTIONS
+$.layout.defaults = {
+/*
+ *     LAYOUT & LAYOUT-CONTAINER OPTIONS
+ *     - none of these options are applicable to individual panes
+ */
+       name:                                           ""                      // Not required, but useful for buttons and used for the state-cookie
+,      containerClass:                         "ui-layout-container" // layout-container element
+,      inset:                                          null            // custom container-inset values (override padding)
+,      scrollToBookmarkOnLoad:         true            // after creating a layout, scroll to bookmark in URL (.../page.htm#myBookmark)
+,      resizeWithWindow:                       true            // bind thisLayout.resizeAll() to the window.resize event
+,      resizeWithWindowDelay:          200                     // delay calling resizeAll because makes window resizing very jerky
+,      resizeWithWindowMaxDelay:       0                       // 0 = none - force resize every XX ms while window is being resized
+,      maskPanesEarly:                         false           // true = create pane-masks on resizer.mouseDown instead of waiting for resizer.dragstart
+,      onresizeall_start:                      null            // CALLBACK when resizeAll() STARTS     - NOT pane-specific
+,      onresizeall_end:                        null            // CALLBACK when resizeAll() ENDS       - NOT pane-specific
+,      onload_start:                           null            // CALLBACK when Layout inits - after options initialized, but before elements
+,      onload_end:                                     null            // CALLBACK when Layout inits - after EVERYTHING has been initialized
+,      onunload_start:                         null            // CALLBACK when Layout is destroyed OR onWindowUnload
+,      onunload_end:                           null            // CALLBACK when Layout is destroyed OR onWindowUnload
+,      initPanes:                                      true            // false = DO NOT initialize the panes onLoad - will init later
+,      showErrorMessages:                      true            // enables fatal error messages to warn developers of common errors
+,      showDebugMessages:                      false           // display console-and-alert debug msgs - IF this Layout version _has_ debugging code!
+//     Changing this zIndex value will cause other zIndex values to automatically change
+,      zIndex:                                         null            // the PANE zIndex - resizers and masks will be +1
+//     DO NOT CHANGE the zIndex values below unless you clearly understand their relationships
+,      zIndexes: {                                                             // set _default_ z-index values here...
+               pane_normal:                    0                       // normal z-index for panes
+       ,       content_mask:                   1                       // applied to overlays used to mask content INSIDE panes during resizing
+       ,       resizer_normal:                 2                       // normal z-index for resizer-bars
+       ,       pane_sliding:                   100                     // applied to *BOTH* the pane and its resizer when a pane is 'slid open'
+       ,       pane_animate:                   1000            // applied to the pane when being animated - not applied to the resizer
+       ,       resizer_drag:                   10000           // applied to the CLONED resizer-bar when being 'dragged'
+       }
+,      errors: {
+               pane:                                   "pane"          // description of "layout pane element" - used only in error messages
+       ,       selector:                               "selector"      // description of "jQuery-selector" - used only in error messages
+       ,       addButtonError:                 "Error Adding Button\nInvalid "
+       ,       containerMissing:               "UI Layout Initialization Error\nThe specified layout-container does not exist."
+       ,       centerPaneMissing:              "UI Layout Initialization Error\nThe center-pane element does not exist.\nThe center-pane is a required element."
+       ,       noContainerHeight:              "UI Layout Initialization Warning\nThe layout-container \"CONTAINER\" has no height.\nTherefore the layout is 0-height and hence 'invisible'!"
+       ,       callbackError:                  "UI Layout Callback Error\nThe EVENT callback is not a valid function."
+       }
+/*
+ *     PANE DEFAULT SETTINGS
+ *     - settings under the 'panes' key become the default settings for *all panes*
+ *     - ALL pane-options can also be set specifically for each panes, which will override these 'default values'
+ */
+,      panes: { // default options for 'all panes' - will be overridden by 'per-pane settings'
+               applyDemoStyles:                false           // NOTE: renamed from applyDefaultStyles for clarity
+       ,       closable:                               true            // pane can open & close
+       ,       resizable:                              true            // when open, pane can be resized 
+       ,       slidable:                               true            // when closed, pane can 'slide open' over other panes - closes on mouse-out
+       ,       initClosed:                             false           // true = init pane as 'closed'
+       ,       initHidden:                     false           // true = init pane as 'hidden' - no resizer-bar/spacing
+       //      SELECTORS
+       //,     paneSelector:                   ""                      // MUST be pane-specific - jQuery selector for pane
+       ,       contentSelector:                ".ui-layout-content" // INNER div/element to auto-size so only it scrolls, not the entire pane!
+       ,       contentIgnoreSelector:  ".ui-layout-ignore"     // element(s) to 'ignore' when measuring 'content'
+       ,       findNestedContent:              false           // true = $P.find(contentSelector), false = $P.children(contentSelector)
+       //      GENERIC ROOT-CLASSES - for auto-generated classNames
+       ,       paneClass:                              "ui-layout-pane"        // Layout Pane
+       ,       resizerClass:                   "ui-layout-resizer"     // Resizer Bar
+       ,       togglerClass:                   "ui-layout-toggler"     // Toggler Button
+       ,       buttonClass:                    "ui-layout-button"      // CUSTOM Buttons       - eg: '[ui-layout-button]-toggle/-open/-close/-pin'
+       //      ELEMENT SIZE & SPACING
+       //,     size:                                   100                     // MUST be pane-specific -initial size of pane
+       ,       minSize:                                0                       // when manually resizing a pane
+       ,       maxSize:                                0                       // ditto, 0 = no limit
+       ,       spacing_open:                   6                       // space between pane and adjacent panes - when pane is 'open'
+       ,       spacing_closed:                 6                       // ditto - when pane is 'closed'
+       ,       togglerLength_open:             50                      // Length = WIDTH of toggler button on north/south sides - HEIGHT on east/west sides
+       ,       togglerLength_closed:   50                      // 100% OR -1 means 'full height/width of resizer bar' - 0 means 'hidden'
+       ,       togglerAlign_open:              "center"        // top/left, bottom/right, center, OR...
+       ,       togglerAlign_closed:    "center"        // 1 => nn = offset from top/left, -1 => -nn == offset from bottom/right
+       ,       togglerContent_open:    ""                      // text or HTML to put INSIDE the toggler
+       ,       togglerContent_closed:  ""                      // ditto
+       //      RESIZING OPTIONS
+       ,       resizerDblClickToggle:  true            // 
+       ,       autoResize:                             true            // IF size is 'auto' or a percentage, then recalc 'pixel size' whenever the layout resizes
+       ,       autoReopen:                             true            // IF a pane was auto-closed due to noRoom, reopen it when there is room? False = leave it closed
+       ,       resizerDragOpacity:             1                       // option for ui.draggable
+       //,     resizerCursor:                  ""                      // MUST be pane-specific - cursor when over resizer-bar
+       ,       maskContents:                   false           // true = add DIV-mask over-or-inside this pane so can 'drag' over IFRAMES
+       ,       maskObjects:                    false           // true = add IFRAME-mask over-or-inside this pane to cover objects/applets - content-mask will overlay this mask
+       ,       maskZindex:                             null            // will override zIndexes.content_mask if specified - not applicable to iframe-panes
+       ,       resizingGrid:                   false           // grid size that the resizers will snap-to during resizing, eg: [20,20]
+       ,       livePaneResizing:               false           // true = LIVE Resizing as resizer is dragged
+       ,       liveContentResizing:    false           // true = re-measure header/footer heights as resizer is dragged
+       ,       liveResizingTolerance:  1                       // how many px change before pane resizes, to control performance
+       //      SLIDING OPTIONS
+       ,       sliderCursor:                   "pointer"       // cursor when resizer-bar will trigger 'sliding'
+       ,       slideTrigger_open:              "click"         // click, dblclick, mouseenter
+       ,       slideTrigger_close:             "mouseleave"// click, mouseleave
+       ,       slideDelay_open:                300                     // applies only for mouseenter event - 0 = instant open
+       ,       slideDelay_close:               300                     // applies only for mouseleave event (300ms is the minimum!)
+       ,       hideTogglerOnSlide:             false           // when pane is slid-open, should the toggler show?
+       ,       preventQuickSlideClose: $.layout.browser.webkit // Chrome triggers slideClosed as it is opening
+       ,       preventPrematureSlideClose: false       // handle incorrect mouseleave trigger, like when over a SELECT-list in IE
+       //      PANE-SPECIFIC TIPS & MESSAGES
+       ,       tips: {
+                       Open:                           "Open"          // eg: "Open Pane"
+               ,       Close:                          "Close"
+               ,       Resize:                         "Resize"
+               ,       Slide:                          "Slide Open"
+               ,       Pin:                            "Pin"
+               ,       Unpin:                          "Un-Pin"
+               ,       noRoomToOpen:           "Not enough room to show this panel."   // alert if user tries to open a pane that cannot
+               ,       minSizeWarning:         "Panel has reached its minimum size"    // displays in browser statusbar
+               ,       maxSizeWarning:         "Panel has reached its maximum size"    // ditto
+               }
+       //      HOT-KEYS & MISC
+       ,       showOverflowOnHover:    false           // will bind allowOverflow() utility to pane.onMouseOver
+       ,       enableCursorHotkey:             true            // enabled 'cursor' hotkeys
+       //,     customHotkey:                   ""                      // MUST be pane-specific - EITHER a charCode OR a character
+       ,       customHotkeyModifier:   "SHIFT"         // either 'SHIFT', 'CTRL' or 'CTRL+SHIFT' - NOT 'ALT'
+       //      PANE ANIMATION
+       //      NOTE: fxSss_open, fxSss_close & fxSss_size options (eg: fxName_open) are auto-generated if not passed
+       ,       fxName:                                 "slide"         // ('none' or blank), slide, drop, scale -- only relevant to 'open' & 'close', NOT 'size'
+       ,       fxSpeed:                                null            // slow, normal, fast, 200, nnn - if passed, will OVERRIDE fxSettings.duration
+       ,       fxSettings:                             {}                      // can be passed, eg: { easing: "easeOutBounce", duration: 1500 }
+       ,       fxOpacityFix:                   true            // tries to fix opacity in IE to restore anti-aliasing after animation
+       ,       animatePaneSizing:              false           // true = animate resizing after dragging resizer-bar OR sizePane() is called
+       /*  NOTE: Action-specific FX options are auto-generated from the options above if not specifically set:
+               fxName_open:                    "slide"         // 'Open' pane animation
+               fnName_close:                   "slide"         // 'Close' pane animation
+               fxName_size:                    "slide"         // 'Size' pane animation - when animatePaneSizing = true
+               fxSpeed_open:                   null
+               fxSpeed_close:                  null
+               fxSpeed_size:                   null
+               fxSettings_open:                {}
+               fxSettings_close:               {}
+               fxSettings_size:                {}
+       */
+       //      CHILD/NESTED LAYOUTS
+       ,       children:                               null            // Layout-options for nested/child layout - even {} is valid as options
+       ,       containerSelector:              ''                      // if child is NOT 'directly nested', a selector to find it/them (can have more than one child layout!)
+       ,       initChildren:                   true            // true = child layout will be created as soon as _this_ layout completes initialization
+       ,       destroyChildren:                true            // true = destroy child-layout if this pane is destroyed
+       ,       resizeChildren:                 true            // true = trigger child-layout.resizeAll() when this pane is resized
+       //      EVENT TRIGGERING
+       ,       triggerEventsOnLoad:    false           // true = trigger onopen OR onclose callbacks when layout initializes
+       ,       triggerEventsDuringLiveResize: true     // true = trigger onresize callback REPEATEDLY if livePaneResizing==true
+       //      PANE CALLBACKS
+       ,       onshow_start:                   null            // CALLBACK when pane STARTS to Show    - BEFORE onopen/onhide_start
+       ,       onshow_end:                             null            // CALLBACK when pane ENDS being Shown  - AFTER  onopen/onhide_end
+       ,       onhide_start:                   null            // CALLBACK when pane STARTS to Close   - BEFORE onclose_start
+       ,       onhide_end:                             null            // CALLBACK when pane ENDS being Closed - AFTER  onclose_end
+       ,       onopen_start:                   null            // CALLBACK when pane STARTS to Open
+       ,       onopen_end:                             null            // CALLBACK when pane ENDS being Opened
+       ,       onclose_start:                  null            // CALLBACK when pane STARTS to Close
+       ,       onclose_end:                    null            // CALLBACK when pane ENDS being Closed
+       ,       onresize_start:                 null            // CALLBACK when pane STARTS being Resized ***FOR ANY REASON***
+       ,       onresize_end:                   null            // CALLBACK when pane ENDS being Resized ***FOR ANY REASON***
+       ,       onsizecontent_start:    null            // CALLBACK when sizing of content-element STARTS
+       ,       onsizecontent_end:              null            // CALLBACK when sizing of content-element ENDS
+       ,       onswap_start:                   null            // CALLBACK when pane STARTS to Swap
+       ,       onswap_end:                             null            // CALLBACK when pane ENDS being Swapped
+       ,       ondrag_start:                   null            // CALLBACK when pane STARTS being ***MANUALLY*** Resized
+       ,       ondrag_end:                             null            // CALLBACK when pane ENDS being ***MANUALLY*** Resized
+       }
+/*
+ *     PANE-SPECIFIC SETTINGS
+ *     - options listed below MUST be specified per-pane - they CANNOT be set under 'panes'
+ *     - all options under the 'panes' key can also be set specifically for any pane
+ *     - most options under the 'panes' key apply only to 'border-panes' - NOT the the center-pane
+ */
+,      north: {
+               paneSelector:                   ".ui-layout-north"
+       ,       size:                                   "auto"          // eg: "auto", "30%", .30, 200
+       ,       resizerCursor:                  "n-resize"      // custom = url(myCursor.cur)
+       ,       customHotkey:                   ""                      // EITHER a charCode (43) OR a character ("o")
+       }
+,      south: {
+               paneSelector:                   ".ui-layout-south"
+       ,       size:                                   "auto"
+       ,       resizerCursor:                  "s-resize"
+       ,       customHotkey:                   ""
+       }
+,      east: {
+               paneSelector:                   ".ui-layout-east"
+       ,       size:                                   200
+       ,       resizerCursor:                  "e-resize"
+       ,       customHotkey:                   ""
+       }
+,      west: {
+               paneSelector:                   ".ui-layout-west"
+       ,       size:                                   200
+       ,       resizerCursor:                  "w-resize"
+       ,       customHotkey:                   ""
+       }
+,      center: {
+               paneSelector:                   ".ui-layout-center"
+       ,       minWidth:                               0
+       ,       minHeight:                              0
+       }
+};
+
+$.layout.optionsMap = {
+       // layout/global options - NOT pane-options
+       layout: ("name,instanceKey,stateManagement,effects,inset,zIndexes,errors,"
+       +       "zIndex,scrollToBookmarkOnLoad,showErrorMessages,maskPanesEarly,"
+       +       "outset,resizeWithWindow,resizeWithWindowDelay,resizeWithWindowMaxDelay,"
+       +       "onresizeall,onresizeall_start,onresizeall_end,onload,onload_start,onload_end,onunload,onunload_start,onunload_end").split(",")
+//     borderPanes: [ ALL options that are NOT specified as 'layout' ]
+       // default.panes options that apply to the center-pane (most options apply _only_ to border-panes)
+,      center: ("paneClass,contentSelector,contentIgnoreSelector,findNestedContent,applyDemoStyles,triggerEventsOnLoad,"
+       +       "showOverflowOnHover,maskContents,maskObjects,liveContentResizing,"
+       +       "containerSelector,children,initChildren,resizeChildren,destroyChildren,"
+       +       "onresize,onresize_start,onresize_end,onsizecontent,onsizecontent_start,onsizecontent_end").split(",")
+       // options that MUST be specifically set 'per-pane' - CANNOT set in the panes (defaults) key
+,      noDefault: ("paneSelector,resizerCursor,customHotkey").split(",")
+};
+
+/**
+ * Processes options passed in converts flat-format data into subkey (JSON) format
+ * In flat-format, subkeys are _currently_ separated with 2 underscores, like north__optName
+ * Plugins may also call this method so they can transform their own data
+ *
+ * @param  {!Object}   hash                    Data/options passed by user - may be a single level or nested levels
+ * @param  {boolean=}  [addKeys=false] Should the primary layout.options keys be added if they do not exist?
+ * @return {Object}                                            Returns hash of minWidth & minHeight
+ */
+$.layout.transformData = function (hash, addKeys) {
+       var     json = addKeys ? { panes: {}, center: {} } : {} // init return object
+       ,       branch, optKey, keys, key, val, i, c;
+
+       if (typeof hash !== "object") return json; // no options passed
+
+       // convert all 'flat-keys' to 'sub-key' format
+       for (optKey in hash) {
+               branch  = json;
+               val             = hash[ optKey ];
+               keys    = optKey.split("__"); // eg: west__size or north__fxSettings__duration
+               c               = keys.length - 1;
+               // convert underscore-delimited to subkeys
+               for (i=0; i <= c; i++) {
+                       key = keys[i];
+                       if (i === c) {  // last key = value
+                               if ($.isPlainObject( val ))
+                                       branch[key] = $.layout.transformData( val ); // RECURSE
+                               else
+                                       branch[key] = val;
+                       }
+                       else {
+                               if (!branch[key])
+                                       branch[key] = {}; // create the subkey
+                               // recurse to sub-key for next loop - if not done
+                               branch = branch[key];
+                       }
+               }
+       }
+       return json;
+};
+
+// INTERNAL CONFIG DATA - DO NOT CHANGE THIS!
+$.layout.backwardCompatibility = {
+       // data used by renameOldOptions()
+       map: {
+       //      OLD Option Name:                        NEW Option Name
+               applyDefaultStyles:                     "applyDemoStyles"
+       //      CHILD/NESTED LAYOUTS
+       ,       childOptions:                           "children"
+       ,       initChildLayout:                        "initChildren"
+       ,       destroyChildLayout:                     "destroyChildren"
+       ,       resizeChildLayout:                      "resizeChildren"
+       ,       resizeNestedLayout:                     "resizeChildren"
+       //      MISC Options
+       ,       resizeWhileDragging:            "livePaneResizing"
+       ,       resizeContentWhileDragging:     "liveContentResizing"
+       ,       triggerEventsWhileDragging:     "triggerEventsDuringLiveResize"
+       ,       maskIframesOnResize:            "maskContents"
+       //      STATE MANAGEMENT
+       ,       useStateCookie:                         "stateManagement.enabled"
+       ,       "cookie.autoLoad":                      "stateManagement.autoLoad"
+       ,       "cookie.autoSave":                      "stateManagement.autoSave"
+       ,       "cookie.keys":                          "stateManagement.stateKeys"
+       ,       "cookie.name":                          "stateManagement.cookie.name"
+       ,       "cookie.domain":                        "stateManagement.cookie.domain"
+       ,       "cookie.path":                          "stateManagement.cookie.path"
+       ,       "cookie.expires":                       "stateManagement.cookie.expires"
+       ,       "cookie.secure":                        "stateManagement.cookie.secure"
+       //      OLD Language options
+       ,       noRoomToOpenTip:                        "tips.noRoomToOpen"
+       ,       togglerTip_open:                        "tips.Close"    // open   = Close
+       ,       togglerTip_closed:                      "tips.Open"             // closed = Open
+       ,       resizerTip:                                     "tips.Resize"
+       ,       sliderTip:                                      "tips.Slide"
+       }
+
+/**
+* @param {Object}      opts
+*/
+,      renameOptions: function (opts) {
+               var map = $.layout.backwardCompatibility.map
+               ,       oldData, newData, value
+               ;
+               for (var itemPath in map) {
+                       oldData = getBranch( itemPath );
+                       value   = oldData.branch[ oldData.key ];
+                       if (value !== undefined) {
+                               newData = getBranch( map[itemPath], true );
+                               newData.branch[ newData.key ] = value;
+                               delete oldData.branch[ oldData.key ];
+                       }
+               }
+
+               /**
+                * @param {string}      path
+                * @param {boolean=}    [create=false]  Create path if does not exist
+                */
+               function getBranch (path, create) {
+                       var a = path.split(".") // split keys into array
+                       ,       c = a.length - 1
+                       ,       D = { branch: opts, key: a[c] } // init branch at top & set key (last item)
+                       ,       i = 0, k, undef;
+                       for (; i<c; i++) { // skip the last key (data)
+                               k = a[i];
+                               if (D.branch[ k ] == undefined) { // child-key does not exist
+                                       if (create) {
+                                               D.branch = D.branch[ k ] = {}; // create child-branch
+                                       }
+                                       else // can't go any farther
+                                               D.branch = {}; // branch is undefined
+                               }
+                               else
+                                       D.branch = D.branch[ k ]; // get child-branch
+                       }
+                       return D;
+               };
+       }
+
+/**
+* @param {Object}      opts
+*/
+,      renameAllOptions: function (opts) {
+               var ren = $.layout.backwardCompatibility.renameOptions;
+               // rename root (layout) options
+               ren( opts );
+               // rename 'defaults' to 'panes'
+               if (opts.defaults) {
+                       if (typeof opts.panes !== "object")
+                               opts.panes = {};
+                       $.extend(true, opts.panes, opts.defaults);
+                       delete opts.defaults;
+               }
+               // rename options in the the options.panes key
+               if (opts.panes) ren( opts.panes );
+               // rename options inside *each pane key*, eg: options.west
+               $.each($.layout.config.allPanes, function (i, pane) {
+                       if (opts[pane]) ren( opts[pane] );
+               });     
+               return opts;
+       }
+};
+
+
+
+
+/*     ============================================================
+ *     BEGIN WIDGET: $( selector ).layout( {options} );
+ *     ============================================================
+ */
+$.fn.layout = function (opts) {
+       var
+
+       // local aliases to global data
+       browser = $.layout.browser
+,      _c              = $.layout.config
+
+       // local aliases to utlity methods
+,      cssW    = $.layout.cssWidth
+,      cssH    = $.layout.cssHeight
+,      elDims  = $.layout.getElementDimensions
+,      styles  = $.layout.getElementStyles
+,      evtObj  = $.layout.getEventObject
+,      evtPane = $.layout.parsePaneName
+
+/**
+ * options - populated by initOptions()
+ */
+,      options = $.extend(true, {}, $.layout.defaults)
+,      effects = options.effects = $.extend(true, {}, $.layout.effects)
+
+/**
+ * layout-state object
+ */
+,      state = {
+               // generate unique ID to use for event.namespace so can unbind only events added by 'this layout'
+               id:                             "layout"+ $.now()       // code uses alias: sID
+       ,       initialized:    false
+       ,       paneResizing:   false
+       ,       panesSliding:   {}
+       ,       container:      {       // list all keys referenced in code to avoid compiler error msgs
+                       innerWidth:             0
+               ,       innerHeight:    0
+               ,       outerWidth:             0
+               ,       outerHeight:    0
+               ,       layoutWidth:    0
+               ,       layoutHeight:   0
+               }
+       ,       north:          { childIdx: 0 }
+       ,       south:          { childIdx: 0 }
+       ,       east:           { childIdx: 0 }
+       ,       west:           { childIdx: 0 }
+       ,       center:         { childIdx: 0 }
+       }
+
+/**
+ * parent/child-layout pointers
+ */
+//,    hasParentLayout = false - exists ONLY inside Instance so can be set externally
+,      children = {
+               north:          null
+       ,       south:          null
+       ,       east:           null
+       ,       west:           null
+       ,       center:         null
+       }
+
+/*
+ * ###########################
+ *  INTERNAL HELPER FUNCTIONS
+ * ###########################
+ */
+
+       /**
+        * Manages all internal timers
+        */
+,      timer = {
+               data:   {}
+       ,       set:    function (s, fn, ms) { timer.clear(s); timer.data[s] = setTimeout(fn, ms); }
+       ,       clear:  function (s) { var t=timer.data; if (t[s]) {clearTimeout(t[s]); delete t[s];} }
+       }
+
+       /**
+        * Alert or console.log a message - IF option is enabled.
+        *
+        * @param {(string|!Object)}    msg                             Message (or debug-data) to display
+        * @param {boolean=}                    [popup=false]   True by default, means 'alert', false means use console.log
+        * @param {boolean=}                    [debug=false]   True means is a widget debugging message
+        */
+,      _log = function (msg, popup, debug) {
+               var o = options;
+               if ((o.showErrorMessages && !debug) || (debug && o.showDebugMessages))
+                       $.layout.msg( o.name +' / '+ msg, (popup !== false) );
+               return false;
+       }
+
+       /**
+        * Executes a Callback function after a trigger event, like resize, open or close
+        *
+        * @param {string}                              evtName                                 Name of the layout callback, eg "onresize_start"
+        * @param {(string|boolean)=}   [pane=""]                               This is passed only so we can pass the 'pane object' to the callback
+        * @param {(string|boolean)=}   [skipBoundEvents=false] True = do not run events bound to the elements - only the callbacks set in options
+        */
+,      _runCallbacks = function (evtName, pane, skipBoundEvents) {
+               var     hasPane = pane && isStr(pane)
+               ,       s               = hasPane ? state[pane] : state
+               ,       o               = hasPane ? options[pane] : options
+               ,       lName   = options.name
+                       // names like onopen and onopen_end separate are interchangeable in options...
+               ,       lng             = evtName + (evtName.match(/_/) ? "" : "_end")
+               ,       shrt    = lng.match(/_end$/) ? lng.substr(0, lng.length - 4) : ""
+               ,       fn              = o[lng] || o[shrt]
+               ,       retVal  = "NC" // NC = No Callback
+               ,       args    = []
+               ,       $P              = hasPane ? $Ps[pane] : 0
+               ;
+               if (hasPane && !$P) // a pane is specified, but does not exist!
+                       return retVal;
+               if ( !hasPane && $.type(pane) === "boolean" ) {
+                       skipBoundEvents = pane; // allow pane param to be skipped for Layout callback
+                       pane = "";
+               }
+
+               // first trigger the callback set in the options
+               if (fn) {
+                       try {
+                               // convert function name (string) to function object
+                               if (isStr( fn )) {
+                                       if (fn.match(/,/)) {
+                                               // function name cannot contain a comma, 
+                                               // so must be a function name AND a parameter to pass
+                                               args = fn.split(",")
+                                               ,       fn = eval(args[0]);
+                                       }
+                                       else // just the name of an external function?
+                                               fn = eval(fn);
+                               }
+                               // execute the callback, if exists
+                               if ($.isFunction( fn )) {
+                                       if (args.length)
+                                               retVal = g(fn)(args[1]); // pass the argument parsed from 'list'
+                                       else if ( hasPane )
+                                               // pass data: pane-name, pane-element, pane-state, pane-options, and layout-name
+                                               retVal = g(fn)( pane, $Ps[pane], s, o, lName );
+                                       else // must be a layout/container callback - pass suitable info
+                                               retVal = g(fn)( Instance, s, o, lName );
+                               }
+                       }
+                       catch (ex) {
+                               _log( options.errors.callbackError.replace(/EVENT/, $.trim((pane || "") +" "+ lng)), false );
+                               if ($.type(ex) === "string" && string.length)
+                                       _log("Exception:  "+ ex, false );
+                       }
+               }
+
+               // trigger additional events bound directly to the pane
+               if (!skipBoundEvents && retVal !== false) {
+                       if ( hasPane ) { // PANE events can be bound to each pane-elements
+                               o       = options[pane];
+                               s       = state[pane];
+                               $P.triggerHandler("layoutpane"+ lng, [ pane, $P, s, o, lName ]);
+                               if (shrt)
+                                       $P.triggerHandler("layoutpane"+ shrt, [ pane, $P, s, o, lName ]);
+                       }
+                       else { // LAYOUT events can be bound to the container-element
+                               $N.triggerHandler("layout"+ lng, [ Instance, s, o, lName ]);
+                               if (shrt)
+                                       $N.triggerHandler("layout"+ shrt, [ Instance, s, o, lName ]);
+                       }
+               }
+
+               // ALWAYS resizeChildren after an onresize_end event - even during initialization
+               // IGNORE onsizecontent_end event because causes child-layouts to resize TWICE
+               if (hasPane && evtName === "onresize_end") // BAD: || evtName === "onsizecontent_end"
+                       resizeChildren(pane+"", true); // compiler hack -force string
+
+               return retVal;
+
+               function g (f) { return f; }; // compiler hack
+       }
+
+
+       /**
+        * cure iframe display issues in IE & other browsers
+        */
+,      _fixIframe = function (pane) {
+               if (browser.mozilla) return; // skip FireFox - it auto-refreshes iframes onShow
+               var $P = $Ps[pane];
+               // if the 'pane' is an iframe, do it
+               if (state[pane].tagName === "IFRAME")
+                       $P.css(_c.hidden).css(_c.visible); 
+               else // ditto for any iframes INSIDE the pane
+                       $P.find('IFRAME').css(_c.hidden).css(_c.visible);
+       }
+
+       /**
+        * @param  {string}             pane            Can accept ONLY a 'pane' (east, west, etc)
+        * @param  {number=}            outerSize       (optional) Can pass a width, allowing calculations BEFORE element is resized
+        * @return {number}             Returns the innerHeight/Width of el by subtracting padding and borders
+        */
+,      cssSize = function (pane, outerSize) {
+               var fn = _c[pane].dir=="horz" ? cssH : cssW;
+               return fn($Ps[pane], outerSize);
+       }
+
+       /**
+        * @param  {string}             pane            Can accept ONLY a 'pane' (east, west, etc)
+        * @return {Object}             Returns hash of minWidth & minHeight
+        */
+,      cssMinDims = function (pane) {
+               // minWidth/Height means CSS width/height = 1px
+               var     $P      = $Ps[pane]
+               ,       dir     = _c[pane].dir
+               ,       d       = {
+                               minWidth:       1001 - cssW($P, 1000)
+                       ,       minHeight:      1001 - cssH($P, 1000)
+                       }
+               ;
+               if (dir === "horz") d.minSize = d.minHeight;
+               if (dir === "vert") d.minSize = d.minWidth;
+               return d;
+       }
+
+       // TODO: see if these methods can be made more useful...
+       // TODO: *maybe* return cssW/H from these so caller can use this info
+
+       /**
+        * @param {(string|!Object)}            el
+        * @param {number=}                             outerWidth
+        * @param {boolean=}                            [autoHide=false]
+        */
+,      setOuterWidth = function (el, outerWidth, autoHide) {
+               var $E = el, w;
+               if (isStr(el)) $E = $Ps[el]; // west
+               else if (!el.jquery) $E = $(el);
+               w = cssW($E, outerWidth);
+               $E.css({ width: w });
+               if (w > 0) {
+                       if (autoHide && $E.data('autoHidden') && $E.innerHeight() > 0) {
+                               $E.show().data('autoHidden', false);
+                               if (!browser.mozilla) // FireFox refreshes iframes - IE does not
+                                       // make hidden, then visible to 'refresh' display after animation
+                                       $E.css(_c.hidden).css(_c.visible);
+                       }
+               }
+               else if (autoHide && !$E.data('autoHidden'))
+                       $E.hide().data('autoHidden', true);
+       }
+
+       /**
+        * @param {(string|!Object)}            el
+        * @param {number=}                             outerHeight
+        * @param {boolean=}                            [autoHide=false]
+        */
+,      setOuterHeight = function (el, outerHeight, autoHide) {
+               var $E = el, h;
+               if (isStr(el)) $E = $Ps[el]; // west
+               else if (!el.jquery) $E = $(el);
+               h = cssH($E, outerHeight);
+               $E.css({ height: h, visibility: "visible" }); // may have been 'hidden' by sizeContent
+               if (h > 0 && $E.innerWidth() > 0) {
+                       if (autoHide && $E.data('autoHidden')) {
+                               $E.show().data('autoHidden', false);
+                               if (!browser.mozilla) // FireFox refreshes iframes - IE does not
+                                       $E.css(_c.hidden).css(_c.visible);
+                       }
+               }
+               else if (autoHide && !$E.data('autoHidden'))
+                       $E.hide().data('autoHidden', true);
+       }
+
+
+       /**
+        * Converts any 'size' params to a pixel/integer size, if not already
+        * If 'auto' or a decimal/percentage is passed as 'size', a pixel-size is calculated
+        *
+       /**
+        * @param  {string}                             pane
+        * @param  {(string|number)=}   size
+        * @param  {string=}                            [dir]
+        * @return {number}
+        */
+,      _parseSize = function (pane, size, dir) {
+               if (!dir) dir = _c[pane].dir;
+
+               if (isStr(size) && size.match(/%/))
+                       size = (size === '100%') ? -1 : parseInt(size, 10) / 100; // convert % to decimal
+
+               if (size === 0)
+                       return 0;
+               else if (size >= 1)
+                       return parseInt(size, 10);
+
+               var o = options, avail = 0;
+               if (dir=="horz") // north or south or center.minHeight
+                       avail = sC.innerHeight - ($Ps.north ? o.north.spacing_open : 0) - ($Ps.south ? o.south.spacing_open : 0);
+               else if (dir=="vert") // east or west or center.minWidth
+                       avail = sC.innerWidth - ($Ps.west ? o.west.spacing_open : 0) - ($Ps.east ? o.east.spacing_open : 0);
+
+               if (size === -1) // -1 == 100%
+                       return avail;
+               else if (size > 0) // percentage, eg: .25
+                       return round(avail * size);
+               else if (pane=="center")
+                       return 0;
+               else { // size < 0 || size=='auto' || size==Missing || size==Invalid
+                       // auto-size the pane
+                       var     dim     = (dir === "horz" ? "height" : "width")
+                       ,       $P      = $Ps[pane]
+                       ,       $C      = dim === 'height' ? $Cs[pane] : false
+                       ,       vis     = $.layout.showInvisibly($P) // show pane invisibly if hidden
+                       ,       szP     = $P.css(dim) // SAVE current pane size
+                       ,       szC     = $C ? $C.css(dim) : 0 // SAVE current content size
+                       ;
+                       $P.css(dim, "auto");
+                       if ($C) $C.css(dim, "auto");
+                       size = (dim === "height") ? $P.outerHeight() : $P.outerWidth(); // MEASURE
+                       $P.css(dim, szP).css(vis); // RESET size & visibility
+                       if ($C) $C.css(dim, szC);
+                       return size;
+               }
+       }
+
+       /**
+        * Calculates current 'size' (outer-width or outer-height) of a border-pane - optionally with 'pane-spacing' added
+        *
+        * @param  {(string|!Object)}   pane
+        * @param  {boolean=}                   [inclSpace=false]
+        * @return {number}                             Returns EITHER Width for east/west panes OR Height for north/south panes
+        */
+,      getPaneSize = function (pane, inclSpace) {
+               var 
+                       $P      = $Ps[pane]
+               ,       o       = options[pane]
+               ,       s       = state[pane]
+               ,       oSp     = (inclSpace ? o.spacing_open : 0)
+               ,       cSp     = (inclSpace ? o.spacing_closed : 0)
+               ;
+               if (!$P || s.isHidden)
+                       return 0;
+               else if (s.isClosed || (s.isSliding && inclSpace))
+                       return cSp;
+               else if (_c[pane].dir === "horz")
+                       return $P.outerHeight() + oSp;
+               else // dir === "vert"
+                       return $P.outerWidth() + oSp;
+       }
+
+       /**
+        * Calculate min/max pane dimensions and limits for resizing
+        *
+        * @param  {string}             pane
+        * @param  {boolean=}   [slide=false]
+        */
+,      setSizeLimits = function (pane, slide) {
+               if (!isInitialized()) return;
+               var 
+                       o                               = options[pane]
+               ,       s                               = state[pane]
+               ,       c                               = _c[pane]
+               ,       dir                             = c.dir
+               ,       type                    = c.sizeType.toLowerCase()
+               ,       isSliding               = (slide != undefined ? slide : s.isSliding) // only open() passes 'slide' param
+               ,       $P                              = $Ps[pane]
+               ,       paneSpacing             = o.spacing_open
+               //      measure the pane on the *opposite side* from this pane
+               ,       altPane                 = _c.oppositeEdge[pane]
+               ,       altS                    = state[altPane]
+               ,       $altP                   = $Ps[altPane]
+               ,       altPaneSize             = (!$altP || altS.isVisible===false || altS.isSliding ? 0 : (dir=="horz" ? $altP.outerHeight() : $altP.outerWidth()))
+               ,       altPaneSpacing  = ((!$altP || altS.isHidden ? 0 : options[altPane][ altS.isClosed !== false ? "spacing_closed" : "spacing_open" ]) || 0)
+               //      limitSize prevents this pane from 'overlapping' opposite pane
+               ,       containerSize   = (dir=="horz" ? sC.innerHeight : sC.innerWidth)
+               ,       minCenterDims   = cssMinDims("center")
+               ,       minCenterSize   = dir=="horz" ? max(options.center.minHeight, minCenterDims.minHeight) : max(options.center.minWidth, minCenterDims.minWidth)
+               //      if pane is 'sliding', then ignore center and alt-pane sizes - because 'overlays' them
+               ,       limitSize               = (containerSize - paneSpacing - (isSliding ? 0 : (_parseSize("center", minCenterSize, dir) + altPaneSize + altPaneSpacing)))
+               ,       minSize                 = s.minSize = max( _parseSize(pane, o.minSize), cssMinDims(pane).minSize )
+               ,       maxSize                 = s.maxSize = min( (o.maxSize ? _parseSize(pane, o.maxSize) : 100000), limitSize )
+               ,       r                               = s.resizerPosition = {} // used to set resizing limits
+               ,       top                             = sC.inset.top
+               ,       left                    = sC.inset.left
+               ,       W                               = sC.innerWidth
+               ,       H                               = sC.innerHeight
+               ,       rW                              = o.spacing_open // subtract resizer-width to get top/left position for south/east
+               ;
+               switch (pane) {
+                       case "north":   r.min = top + minSize;
+                                                       r.max = top + maxSize;
+                                                       break;
+                       case "west":    r.min = left + minSize;
+                                                       r.max = left + maxSize;
+                                                       break;
+                       case "south":   r.min = top + H - maxSize - rW;
+                                                       r.max = top + H - minSize - rW;
+                                                       break;
+                       case "east":    r.min = left + W - maxSize - rW;
+                                                       r.max = left + W - minSize - rW;
+                                                       break;
+               };
+       }
+
+       /**
+        * Returns data for setting the size/position of center pane. Also used to set Height for east/west panes
+        *
+        * @return JSON  Returns a hash of all dimensions: top, bottom, left, right, (outer) width and (outer) height
+        */
+,      calcNewCenterPaneDims = function () {
+               var d = {
+                       top:    getPaneSize("north", true) // true = include 'spacing' value for pane
+               ,       bottom: getPaneSize("south", true)
+               ,       left:   getPaneSize("west", true)
+               ,       right:  getPaneSize("east", true)
+               ,       width:  0
+               ,       height: 0
+               };
+
+               // NOTE: sC = state.container
+               // calc center-pane outer dimensions
+               d.width         = sC.innerWidth - d.left - d.right;  // outerWidth
+               d.height        = sC.innerHeight - d.bottom - d.top; // outerHeight
+               // add the 'container border/padding' to get final positions relative to the container
+               d.top           += sC.inset.top;
+               d.bottom        += sC.inset.bottom;
+               d.left          += sC.inset.left;
+               d.right         += sC.inset.right;
+
+               return d;
+       }
+
+
+       /**
+        * @param {!Object}             el
+        * @param {boolean=}            [allStates=false]
+        */
+,      getHoverClasses = function (el, allStates) {
+               var
+                       $El             = $(el)
+               ,       type    = $El.data("layoutRole")
+               ,       pane    = $El.data("layoutEdge")
+               ,       o               = options[pane]
+               ,       root    = o[type +"Class"]
+               ,       _pane   = "-"+ pane // eg: "-west"
+               ,       _open   = "-open"
+               ,       _closed = "-closed"
+               ,       _slide  = "-sliding"
+               ,       _hover  = "-hover " // NOTE the trailing space
+               ,       _state  = $El.hasClass(root+_closed) ? _closed : _open
+               ,       _alt    = _state === _closed ? _open : _closed
+               ,       classes = (root+_hover) + (root+_pane+_hover) + (root+_state+_hover) + (root+_pane+_state+_hover)
+               ;
+               if (allStates) // when 'removing' classes, also remove alternate-state classes
+                       classes += (root+_alt+_hover) + (root+_pane+_alt+_hover);
+
+               if (type=="resizer" && $El.hasClass(root+_slide))
+                       classes += (root+_slide+_hover) + (root+_pane+_slide+_hover);
+
+               return $.trim(classes);
+       }
+,      addHover        = function (evt, el) {
+               var $E = $(el || this);
+               if (evt && $E.data("layoutRole") === "toggler")
+                       evt.stopPropagation(); // prevent triggering 'slide' on Resizer-bar
+               $E.addClass( getHoverClasses($E) );
+       }
+,      removeHover     = function (evt, el) {
+               var $E = $(el || this);
+               $E.removeClass( getHoverClasses($E, true) );
+       }
+
+,      onResizerEnter  = function (evt) { // ALSO called by toggler.mouseenter
+               var pane        = $(this).data("layoutEdge")
+               ,       s               = state[pane]
+               ,       $d              = $(document)
+               ;
+               // ignore closed-panes and mouse moving back & forth over resizer!
+               // also ignore if ANY pane is currently resizing
+               if ( s.isResizing || state.paneResizing ) return;
+
+               if (options.maskPanesEarly)
+                       showMasks( pane, { resizing: true });
+       }
+,      onResizerLeave  = function (evt, el) {
+               var     e               = el || this // el is only passed when called by the timer
+               ,       pane    = $(e).data("layoutEdge")
+               ,       name    = pane +"ResizerLeave"
+               ,       $d              = $(document)
+               ;
+               timer.clear(pane+"_openSlider"); // cancel slideOpen timer, if set
+               timer.clear(name); // cancel enableSelection timer - may re/set below
+               // this method calls itself on a timer because it needs to allow
+               // enough time for dragging to kick-in and set the isResizing flag
+               // dragging has a 100ms delay set, so this delay must be >100
+               if (!el) // 1st call - mouseleave event
+                       timer.set(name, function(){ onResizerLeave(evt, e); }, 200);
+               // if user is resizing, dragStop will reset everything, so skip it here
+               else if (options.maskPanesEarly && !state.paneResizing) // 2nd call - by timer
+                       hideMasks();
+       }
+
+/*
+ * ###########################
+ *   INITIALIZATION METHODS
+ * ###########################
+ */
+
+       /**
+        * Initialize the layout - called automatically whenever an instance of layout is created
+        *
+        * @see  none - triggered onInit
+        * @return  mixed       true = fully initialized | false = panes not initialized (yet) | 'cancel' = abort
+        */
+,      _create = function () {
+               // initialize config/options
+               initOptions();
+               var o = options
+               ,       s = state;
+
+               // TEMP state so isInitialized returns true during init process
+               s.creatingLayout = true;
+
+               // init plugins for this layout, if there are any (eg: stateManagement)
+               runPluginCallbacks( Instance, $.layout.onCreate );
+
+               // options & state have been initialized, so now run beforeLoad callback
+               // onload will CANCEL layout creation if it returns false
+               if (false === _runCallbacks("onload_start"))
+                       return 'cancel';
+
+               // initialize the container element
+               _initContainer();
+
+               // bind hotkey function - keyDown - if required
+               initHotkeys();
+
+               // bind window.onunload
+               $(window).bind("unload."+ sID, unload);
+
+               // init plugins for this layout, if there are any (eg: customButtons)
+               runPluginCallbacks( Instance, $.layout.onLoad );
+
+               // if layout elements are hidden, then layout WILL NOT complete initialization!
+               // initLayoutElements will set initialized=true and run the onload callback IF successful
+               if (o.initPanes) _initLayoutElements();
+
+               delete s.creatingLayout;
+
+               return state.initialized;
+       }
+
+       /**
+        * Initialize the layout IF not already
+        *
+        * @see  All methods in Instance run this test
+        * @return  boolean     true = layoutElements have been initialized | false = panes are not initialized (yet)
+        */
+,      isInitialized = function () {
+               if (state.initialized || state.creatingLayout) return true;     // already initialized
+               else return _initLayoutElements();      // try to init panes NOW
+       }
+
+       /**
+        * Initialize the layout - called automatically whenever an instance of layout is created
+        *
+        * @see  _create() & isInitialized
+        * @param {boolean=}            [retry=false]   // indicates this is a 2nd try
+        * @return  An object pointer to the instance created
+        */
+,      _initLayoutElements = function (retry) {
+               // initialize config/options
+               var o = options;
+               // CANNOT init panes inside a hidden container!
+               if (!$N.is(":visible")) {
+                       // handle Chrome bug where popup window 'has no height'
+                       // if layout is BODY element, try again in 50ms
+                       // SEE: http://layout.jquery-dev.com/samples/test_popup_window.html
+                       if ( !retry && browser.webkit && $N[0].tagName === "BODY" )
+                               setTimeout(function(){ _initLayoutElements(true); }, 50);
+                       return false;
+               }
+
+               // a center pane is required, so make sure it exists
+               if (!getPane("center").length) {
+                       return _log( o.errors.centerPaneMissing );
+               }
+
+               // TEMP state so isInitialized returns true during init process
+               state.creatingLayout = true;
+
+               // update Container dims
+               $.extend(sC, elDims( $N, o.inset )); // passing inset means DO NOT include insetX values
+
+               // initialize all layout elements
+               initPanes();    // size & position panes - calls initHandles() - which calls initResizable()
+
+               if (o.scrollToBookmarkOnLoad) {
+                       var l = self.location;
+                       if (l.hash) l.replace( l.hash ); // scrollTo Bookmark
+               }
+
+               // check to see if this layout 'nested' inside a pane
+               if (Instance.hasParentLayout)
+                       o.resizeWithWindow = false;
+               // bind resizeAll() for 'this layout instance' to window.resize event
+               else if (o.resizeWithWindow)
+                       $(window).bind("resize."+ sID, windowResize);
+
+               delete state.creatingLayout;
+               state.initialized = true;
+
+               // init plugins for this layout, if there are any
+               runPluginCallbacks( Instance, $.layout.onReady );
+
+               // now run the onload callback, if exists
+               _runCallbacks("onload_end");
+
+               return true; // elements initialized successfully
+       }
+
+       /**
+        * Initialize nested layouts for a specific pane - can optionally pass layout-options
+        *
+        * @param {(string|Object)}     evt_or_pane     The pane being opened, ie: north, south, east, or west
+        * @param {Object=}                     [opts]          Layout-options - if passed, will OVERRRIDE options[pane].children
+        * @return  An object pointer to the layout instance created - or null
+        */
+,      createChildren = function (evt_or_pane, opts) {
+               var     pane = evtPane.call(this, evt_or_pane)
+               ,       $P      = $Ps[pane]
+               ;
+               if (!$P) return;
+               var     $C      = $Cs[pane]
+               ,       s       = state[pane]
+               ,       o       = options[pane]
+               ,       sm      = options.stateManagement || {}
+               ,       cos = opts ? (o.children = opts) : o.children
+               ;
+               if ( $.isPlainObject( cos ) )
+                       cos = [ cos ]; // convert a hash to a 1-elem array
+               else if (!cos || !$.isArray( cos ))
+                       return;
+
+               $.each( cos, function (idx, co) {
+                       if ( !$.isPlainObject( co ) ) return;
+
+                       // determine which element is supposed to be the 'child container'
+                       // if pane has a 'containerSelector' OR a 'content-div', use those instead of the pane
+                       var $containers = co.containerSelector ? $P.find( co.containerSelector ) : ($C || $P);
+
+                       $containers.each(function(){
+                               var $cont       = $(this)
+                               ,       child   = $cont.data("layout") //       see if a child-layout ALREADY exists on this element
+                               ;
+                               // if no layout exists, but children are set, try to create the layout now
+                               if (!child) {
+                                       // TODO: see about moving this to the stateManagement plugin, as a method
+                                       // set a unique child-instance key for this layout, if not already set
+                                       setInstanceKey({ container: $cont, options: co }, s );
+                                       // If THIS layout has a hash in stateManagement.autoLoad,
+                                       // then see if it also contains state-data for this child-layout
+                                       // If so, copy the stateData to child.options.stateManagement.autoLoad
+                                       if ( sm.includeChildren && state.stateData[pane] ) {
+                                               //      THIS layout's state was cached when its state was loaded
+                                               var     paneChildren = state.stateData[pane].children || {}
+                                               ,       childState      = paneChildren[ co.instanceKey ]
+                                               ,       co_sm           = co.stateManagement || (co.stateManagement = { autoLoad: true })
+                                               ;
+                                               // COPY the stateData into the autoLoad key
+                                               if ( co_sm.autoLoad === true && childState ) {
+                                                       co_sm.autoSave                  = false; // disable autoSave because saving handled by parent-layout
+                                                       co_sm.includeChildren   = true;  // cascade option - FOR NOW
+                                                       co_sm.autoLoad = $.extend(true, {}, childState); // COPY the state-hash
+                                               }
+                                       }
+
+                                       // create the layout
+                                       child = $cont.layout( co );
+
+                                       // if successful, update data
+                                       if (child) {
+                                               // add the child and update all layout-pointers
+                                               // MAY have already been done by child-layout calling parent.refreshChildren()
+                                               refreshChildren( pane, child );
+                                       }
+                               }
+                       });
+               });
+       }
+
+,      setInstanceKey = function (child, parentPaneState) {
+               // create a named key for use in state and instance branches
+               var     $c      = child.container
+               ,       o       = child.options
+               ,       sm      = o.stateManagement
+               ,       key     = o.instanceKey || $c.data("layoutInstanceKey")
+               ;
+               if (!key) key = (sm && sm.cookie ? sm.cookie.name : '') || o.name; // look for a name/key
+               if (!key) key = "layout"+ (++parentPaneState.childIdx); // if no name/key found, generate one
+               else key = key.replace(/[^\w-]/gi, '_').replace(/_{2,}/g, '_');  // ensure is valid as a hash key
+               o.instanceKey = key;
+               $c.data("layoutInstanceKey", key); // useful if layout is destroyed and then recreated
+               return key;
+       }
+
+       /**
+        * @param {string}              pane            The pane being opened, ie: north, south, east, or west
+        * @param {Object=}             newChild        New child-layout Instance to add to this pane
+        */
+,      refreshChildren = function (pane, newChild) {
+               var     $P      = $Ps[pane]
+               ,       pC      = children[pane]
+               ,       s       = state[pane]
+               ,       o
+               ;
+               // check for destroy()ed layouts and update the child pointers & arrays
+               if ($.isPlainObject( pC )) {
+                       $.each( pC, function (key, child) {
+                               if (child.destroyed) delete pC[key]
+                       });
+                       // if no more children, remove the children hash
+                       if ($.isEmptyObject( pC ))
+                               pC = children[pane] = null; // clear children hash
+               }
+
+               // see if there is a directly-nested layout inside this pane
+               // if there is, then there can be only ONE child-layout, so check that...
+               if (!newChild && !pC) {
+                       newChild = $P.data("layout");
+               }
+
+               // if a newChild instance was passed, add it to children[pane]
+               if (newChild) {
+                       // update child.state
+                       newChild.hasParentLayout = true; // set parent-flag in child
+                       // instanceKey is a key-name used in both state and children
+                       o = newChild.options;
+                       // set a unique child-instance key for this layout, if not already set
+                       setInstanceKey( newChild, s );
+                       // add pointer to pane.children hash
+                       if (!pC) pC = children[pane] = {}; // create an empty children hash
+                       pC[ o.instanceKey ] = newChild.container.data("layout"); // add childLayout instance
+               }
+
+               // ALWAYS refresh the pane.children alias, even if null
+               Instance[pane].children = children[pane];
+
+               // if newChild was NOT passed - see if there is a child layout NOW
+               if (!newChild) {
+                       createChildren(pane); // MAY create a child and re-call this method
+               }
+       }
+
+,      windowResize = function () {
+               var     o = options
+               ,       delay = Number(o.resizeWithWindowDelay);
+               if (delay < 10) delay = 100; // MUST have a delay!
+               // resizing uses a delay-loop because the resize event fires repeatly - except in FF, but delay anyway
+               timer.clear("winResize"); // if already running
+               timer.set("winResize", function(){
+                       timer.clear("winResize");
+                       timer.clear("winResizeRepeater");
+                       var dims = elDims( $N, o.inset );
+                       // only trigger resizeAll() if container has changed size
+                       if (dims.innerWidth !== sC.innerWidth || dims.innerHeight !== sC.innerHeight)
+                               resizeAll();
+               }, delay);
+               // ALSO set fixed-delay timer, if not already running
+               if (!timer.data["winResizeRepeater"]) setWindowResizeRepeater();
+       }
+
+,      setWindowResizeRepeater = function () {
+               var delay = Number(options.resizeWithWindowMaxDelay);
+               if (delay > 0)
+                       timer.set("winResizeRepeater", function(){ setWindowResizeRepeater(); resizeAll(); }, delay);
+       }
+
+,      unload = function () {
+               var o = options;
+
+               _runCallbacks("onunload_start");
+
+               // trigger plugin callabacks for this layout (eg: stateManagement)
+               runPluginCallbacks( Instance, $.layout.onUnload );
+
+               _runCallbacks("onunload_end");
+       }
+
+       /**
+        * Validate and initialize container CSS and events
+        *
+        * @see  _create()
+        */
+,      _initContainer = function () {
+               var
+                       N               = $N[0] 
+               ,       $H              = $("html")
+               ,       tag             = sC.tagName = N.tagName
+               ,       id              = sC.id = N.id
+               ,       cls             = sC.className = N.className
+               ,       o               = options
+               ,       name    = o.name
+               ,       props   = "position,margin,padding,border"
+               ,       css             = "layoutCSS"
+               ,       CSS             = {}
+               ,       hid             = "hidden" // used A LOT!
+               //      see if this container is a 'pane' inside an outer-layout
+               ,       parent  = $N.data("parentLayout")       // parent-layout Instance
+               ,       pane    = $N.data("layoutEdge")         // pane-name in parent-layout
+               ,       isChild = parent && pane
+               ,       num             = $.layout.cssNum
+               ,       $parent, n
+               ;
+               // sC = state.container
+       //      sC.selector = $N.selector.split(".slice")[0];
+               sC.ref          = (o.name ? o.name +' layout / ' : '') + tag + (id ? "#"+id : cls ? '.['+cls+']' : ''); // used in messages
+               sC.isBody       = (tag === "BODY");
+
+               // try to find a parent-layout
+               if (!isChild && !sC.isBody) {
+                       $parent = $N.closest("."+ $.layout.defaults.panes.paneClass);
+                       parent  = $parent.data("parentLayout");
+                       pane    = $parent.data("layoutEdge");
+                       isChild = parent && pane;
+               }
+
+               $N      .data({
+                               layout: Instance
+                       ,       layoutContainer: sID // FLAG to indicate this is a layout-container - contains unique internal ID
+                       })
+                       .addClass(o.containerClass)
+               ;
+               var layoutMethods = {
+                       destroy:        ''
+               ,       initPanes:      ''
+               ,       resizeAll:      'resizeAll'
+               ,       resize:         'resizeAll'
+               };
+               // loop hash and bind all methods - include layoutID namespacing
+               for (name in layoutMethods) {
+                       $N.bind("layout"+ name.toLowerCase() +"."+ sID, Instance[ layoutMethods[name] || name ]);
+               }
+
+               // if this container is another layout's 'pane', then set child/parent pointers
+               if (isChild) {
+                       // update parent flag
+                       Instance.hasParentLayout = true;
+                       // set pointers to THIS child-layout (Instance) in parent-layout
+                       parent.refreshChildren( pane, Instance );
+               }
+
+               // SAVE original container CSS for use in destroy()
+               if (!$N.data(css)) {
+                       // handle props like overflow different for BODY & HTML - has 'system default' values
+                       if (sC.isBody) {
+                               // SAVE <BODY> CSS
+                               $N.data(css, $.extend( styles($N, props), {
+                                       height:         $N.css("height")
+                               ,       overflow:       $N.css("overflow")
+                               ,       overflowX:      $N.css("overflowX")
+                               ,       overflowY:      $N.css("overflowY")
+                               }));
+                               // ALSO SAVE <HTML> CSS
+                               $H.data(css, $.extend( styles($H, 'padding'), {
+                                       height:         "auto" // FF would return a fixed px-size!
+                               ,       overflow:       $H.css("overflow")
+                               ,       overflowX:      $H.css("overflowX")
+                               ,       overflowY:      $H.css("overflowY")
+                               }));
+                       }
+                       else // handle props normally for non-body elements
+                               $N.data(css, styles($N, props+",top,bottom,left,right,width,height,overflow,overflowX,overflowY") );
+               }
+
+               try {
+                       // common container CSS
+                       CSS = {
+                               overflow:       hid
+                       ,       overflowX:      hid
+                       ,       overflowY:      hid
+                       };
+                       $N.css( CSS );
+
+                       if (o.inset && !$.isPlainObject(o.inset)) {
+                               // can specify a single number for equal outset all-around
+                               n = parseInt(o.inset, 10) || 0
+                               o.inset = {
+                                       top:    n
+                               ,       bottom: n
+                               ,       left:   n
+                               ,       right:  n
+                               };
+                       }
+
+                       // format html & body if this is a full page layout
+                       if (sC.isBody) {
+                               // if HTML has padding, use this as an outer-spacing around BODY
+                               if (!o.outset) {
+                                       // use padding from parent-elem (HTML) as outset
+                                       o.outset = {
+                                               top:    num($H, "paddingTop")
+                                       ,       bottom: num($H, "paddingBottom")
+                                       ,       left:   num($H, "paddingLeft")
+                                       ,       right:  num($H, "paddingRight")
+                                       };
+                               }
+                               else if (!$.isPlainObject(o.outset)) {
+                                       // can specify a single number for equal outset all-around
+                                       n = parseInt(o.outset, 10) || 0
+                                       o.outset = {
+                                               top:    n
+                                       ,       bottom: n
+                                       ,       left:   n
+                                       ,       right:  n
+                                       };
+                               }
+                               // HTML
+                               $H.css( CSS ).css({
+                                       height:         "100%"
+                               ,       border:         "none"  // no border or padding allowed when using height = 100%
+                               ,       padding:        0               // ditto
+                               ,       margin:         0
+                               });
+                               // BODY
+                               if (browser.isIE6) {
+                                       // IE6 CANNOT use the trick of setting absolute positioning on all 4 sides - must have 'height'
+                                       $N.css({
+                                               width:          "100%"
+                                       ,       height:         "100%"
+                                       ,       border:         "none"  // no border or padding allowed when using height = 100%
+                                       ,       padding:        0               // ditto
+                                       ,       margin:         0
+                                       ,       position:       "relative"
+                                       });
+                                       // convert body padding to an inset option - the border cannot be measured in IE6!
+                                       if (!o.inset) o.inset = elDims( $N ).inset;
+                               }
+                               else { // use absolute positioning for BODY to allow borders & padding without overflow
+                                       $N.css({
+                                               width:          "auto"
+                                       ,       height:         "auto"
+                                       ,       margin:         0
+                                       ,       position:       "absolute"      // allows for border and padding on BODY
+                                       });
+                                       // apply edge-positioning created above
+                                       $N.css( o.outset );
+                               }
+                               // set current layout-container dimensions
+                               $.extend(sC, elDims( $N, o.inset )); // passing inset means DO NOT include insetX values
+                       }
+                       else {
+                               // container MUST have 'position'
+                               var     p = $N.css("position");
+                               if (!p || !p.match(/(fixed|absolute|relative)/))
+                                       $N.css("position","relative");
+
+                               // set current layout-container dimensions
+                               if ( $N.is(":visible") ) {
+                                       $.extend(sC, elDims( $N, o.inset )); // passing inset means DO NOT change insetX (padding) values
+                                       if (sC.innerHeight < 1) // container has no 'height' - warn developer
+                                               _log( o.errors.noContainerHeight.replace(/CONTAINER/, sC.ref) );
+                               }
+                       }
+
+                       // if container has min-width/height, then enable scrollbar(s)
+                       if ( num($N, "minWidth")  ) $N.parent().css("overflowX","auto");
+                       if ( num($N, "minHeight") ) $N.parent().css("overflowY","auto");
+
+               } catch (ex) {}
+       }
+
+       /**
+        * Bind layout hotkeys - if options enabled
+        *
+        * @see  _create() and addPane()
+        * @param {string=}     [panes=""]      The edge(s) to process
+        */
+,      initHotkeys = function (panes) {
+               panes = panes ? panes.split(",") : _c.borderPanes;
+               // bind keyDown to capture hotkeys, if option enabled for ANY pane
+               $.each(panes, function (i, pane) {
+                       var o = options[pane];
+                       if (o.enableCursorHotkey || o.customHotkey) {
+                               $(document).bind("keydown."+ sID, keyDown); // only need to bind this ONCE
+                               return false; // BREAK - binding was done
+                       }
+               });
+       }
+
+       /**
+        * Build final OPTIONS data
+        *
+        * @see  _create()
+        */
+,      initOptions = function () {
+               var data, d, pane, key, val, i, c, o;
+
+               // reprocess user's layout-options to have correct options sub-key structure
+               opts = $.layout.transformData( opts, true ); // panes = default subkey
+
+               // auto-rename old options for backward compatibility
+               opts = $.layout.backwardCompatibility.renameAllOptions( opts );
+
+               // if user-options has 'panes' key (pane-defaults), clean it...
+               if (!$.isEmptyObject(opts.panes)) {
+                       // REMOVE any pane-defaults that MUST be set per-pane
+                       data = $.layout.optionsMap.noDefault;
+                       for (i=0, c=data.length; i<c; i++) {
+                               key = data[i];
+                               delete opts.panes[key]; // OK if does not exist
+                       }
+                       // REMOVE any layout-options specified under opts.panes
+                       data = $.layout.optionsMap.layout;
+                       for (i=0, c=data.length; i<c; i++) {
+                               key = data[i];
+                               delete opts.panes[key]; // OK if does not exist
+                       }
+               }
+
+               // MOVE any NON-layout-options from opts-root to opts.panes
+               data = $.layout.optionsMap.layout;
+               var rootKeys = $.layout.config.optionRootKeys;
+               for (key in opts) {
+                       val = opts[key];
+                       if ($.inArray(key, rootKeys) < 0 && $.inArray(key, data) < 0) {
+                               if (!opts.panes[key])
+                                       opts.panes[key] = $.isPlainObject(val) ? $.extend(true, {}, val) : val;
+                               delete opts[key]
+                       }
+               }
+
+               // START by updating ALL options from opts
+               $.extend(true, options, opts);
+
+               // CREATE final options (and config) for EACH pane
+               $.each(_c.allPanes, function (i, pane) {
+
+                       // apply 'pane-defaults' to CONFIG.[PANE]
+                       _c[pane] = $.extend(true, {}, _c.panes, _c[pane]);
+
+                       d = options.panes;
+                       o = options[pane];
+
+                       // center-pane uses SOME keys in defaults.panes branch
+                       if (pane === 'center') {
+                               // ONLY copy keys from opts.panes listed in: $.layout.optionsMap.center
+                               data = $.layout.optionsMap.center;              // list of 'center-pane keys'
+                               for (i=0, c=data.length; i<c; i++) {    // loop the list...
+                                       key = data[i];
+                                       // only need to use pane-default if pane-specific value not set
+                                       if (!opts.center[key] && (opts.panes[key] || !o[key]))
+                                               o[key] = d[key]; // pane-default
+                               }
+                       }
+                       else {
+                               // border-panes use ALL keys in defaults.panes branch
+                               o = options[pane] = $.extend(true, {}, d, o); // re-apply pane-specific opts AFTER pane-defaults
+                               createFxOptions( pane );
+                               // ensure all border-pane-specific base-classes exist
+                               if (!o.resizerClass)    o.resizerClass  = "ui-layout-resizer";
+                               if (!o.togglerClass)    o.togglerClass  = "ui-layout-toggler";
+                       }
+                       // ensure we have base pane-class (ALL panes)
+                       if (!o.paneClass) o.paneClass = "ui-layout-pane";
+               });
+
+               // update options.zIndexes if a zIndex-option specified
+               var zo  = opts.zIndex
+               ,       z       = options.zIndexes;
+               if (zo > 0) {
+                       z.pane_normal           = zo;
+                       z.content_mask          = max(zo+1, z.content_mask);    // MIN = +1
+                       z.resizer_normal        = max(zo+2, z.resizer_normal);  // MIN = +2
+               }
+
+               // DELETE 'panes' key now that we are done - values were copied to EACH pane
+               delete options.panes;
+
+
+               function createFxOptions ( pane ) {
+                       var     o = options[pane]
+                       ,       d = options.panes;
+                       // ensure fxSettings key to avoid errors
+                       if (!o.fxSettings) o.fxSettings = {};
+                       if (!d.fxSettings) d.fxSettings = {};
+
+                       $.each(["_open","_close","_size"], function (i,n) { 
+                               var
+                                       sName           = "fxName"+ n
+                               ,       sSpeed          = "fxSpeed"+ n
+                               ,       sSettings       = "fxSettings"+ n
+                                       // recalculate fxName according to specificity rules
+                               ,       fxName = o[sName] =
+                                               o[sName]        // options.west.fxName_open
+                                       ||      d[sName]        // options.panes.fxName_open
+                                       ||      o.fxName        // options.west.fxName
+                                       ||      d.fxName        // options.panes.fxName
+                                       ||      "none"          // MEANS $.layout.defaults.panes.fxName == "" || false || null || 0
+                               ,       fxExists        = $.effects && ($.effects[fxName] || ($.effects.effect && $.effects.effect[fxName]))
+                               ;
+                               // validate fxName to ensure is valid effect - MUST have effect-config data in options.effects
+                               if (fxName === "none" || !options.effects[fxName] || !fxExists)
+                                       fxName = o[sName] = "none"; // effect not loaded OR unrecognized fxName
+
+                               // set vars for effects subkeys to simplify logic
+                               var     fx              = options.effects[fxName] || {} // effects.slide
+                               ,       fx_all  = fx.all        || null                         // effects.slide.all
+                               ,       fx_pane = fx[pane]      || null                         // effects.slide.west
+                               ;
+                               // create fxSpeed[_open|_close|_size]
+                               o[sSpeed] =
+                                       o[sSpeed]                               // options.west.fxSpeed_open
+                               ||      d[sSpeed]                               // options.west.fxSpeed_open
+                               ||      o.fxSpeed                               // options.west.fxSpeed
+                               ||      d.fxSpeed                               // options.panes.fxSpeed
+                               ||      null                                    // DEFAULT - let fxSetting.duration control speed
+                               ;
+                               // create fxSettings[_open|_close|_size]
+                               o[sSettings] = $.extend(
+                                       true
+                               ,       {}
+                               ,       fx_all                                  // effects.slide.all
+                               ,       fx_pane                                 // effects.slide.west
+                               ,       d.fxSettings                    // options.panes.fxSettings
+                               ,       o.fxSettings                    // options.west.fxSettings
+                               ,       d[sSettings]                    // options.panes.fxSettings_open
+                               ,       o[sSettings]                    // options.west.fxSettings_open
+                               );
+                       });
+
+                       // DONE creating action-specific-settings for this pane,
+                       // so DELETE generic options - are no longer meaningful
+                       delete o.fxName;
+                       delete o.fxSpeed;
+                       delete o.fxSettings;
+               }
+       }
+
+       /**
+        * Initialize module objects, styling, size and position for all panes
+        *
+        * @see  _initElements()
+        * @param {string}      pane            The pane to process
+        */
+,      getPane = function (pane) {
+               var sel = options[pane].paneSelector
+               if (sel.substr(0,1)==="#") // ID selector
+                       // NOTE: elements selected 'by ID' DO NOT have to be 'children'
+                       return $N.find(sel).eq(0);
+               else { // class or other selector
+                       var $P = $N.children(sel).eq(0);
+                       // look for the pane nested inside a 'form' element
+                       return $P.length ? $P : $N.children("form:first").children(sel).eq(0);
+               }
+       }
+
+       /**
+        * @param {Object=}             evt
+        */
+,      initPanes = function (evt) {
+               // stopPropagation if called by trigger("layoutinitpanes") - use evtPane utility 
+               evtPane(evt);
+
+               // NOTE: do north & south FIRST so we can measure their height - do center LAST
+               $.each(_c.allPanes, function (idx, pane) {
+                       addPane( pane, true );
+               });
+
+               // init the pane-handles NOW in case we have to hide or close the pane below
+               initHandles();
+
+               // now that all panes have been initialized and initially-sized,
+               // make sure there is really enough space available for each pane
+               $.each(_c.borderPanes, function (i, pane) {
+                       if ($Ps[pane] && state[pane].isVisible) { // pane is OPEN
+                               setSizeLimits(pane);
+                               makePaneFit(pane); // pane may be Closed, Hidden or Resized by makePaneFit()
+                       }
+               });
+               // size center-pane AGAIN in case we 'closed' a border-pane in loop above
+               sizeMidPanes("center");
+
+               //      Chrome/Webkit sometimes fires callbacks BEFORE it completes resizing!
+               //      Before RC30.3, there was a 10ms delay here, but that caused layout 
+               //      to load asynchrously, which is BAD, so try skipping delay for now
+
+               // process pane contents and callbacks, and init/resize child-layout if exists
+               $.each(_c.allPanes, function (idx, pane) {
+                       afterInitPane(pane);
+               });
+       }
+
+       /**
+        * Add a pane to the layout - subroutine of initPanes()
+        *
+        * @see  initPanes()
+        * @param {string}      pane                    The pane to process
+        * @param {boolean=}    [force=false]   Size content after init
+        */
+,      addPane = function (pane, force) {
+               if ( !force && !isInitialized() ) return;
+               var
+                       o               = options[pane]
+               ,       s               = state[pane]
+               ,       c               = _c[pane]
+               ,       dir             = c.dir
+               ,       fx              = s.fx
+               ,       spacing = o.spacing_open || 0
+               ,       isCenter = (pane === "center")
+               ,       CSS             = {}
+               ,       $P              = $Ps[pane]
+               ,       size, minSize, maxSize, child
+               ;
+               // if pane-pointer already exists, remove the old one first
+               if ($P)
+                       removePane( pane, false, true, false );
+               else
+                       $Cs[pane] = false; // init
+
+               $P = $Ps[pane] = getPane(pane);
+               if (!$P.length) {
+                       $Ps[pane] = false; // logic
+                       return;
+               }
+
+               // SAVE original Pane CSS
+               if (!$P.data("layoutCSS")) {
+                       var props = "position,top,left,bottom,right,width,height,overflow,zIndex,display,backgroundColor,padding,margin,border";
+                       $P.data("layoutCSS", styles($P, props));
+               }
+
+               // create alias for pane data in Instance - initHandles will add more
+               Instance[pane] = {
+                       name:           pane
+               ,       pane:           $Ps[pane]
+               ,       content:        $Cs[pane]
+               ,       options:        options[pane]
+               ,       state:          state[pane]
+               ,       children:       children[pane]
+               };
+
+               // add classes, attributes & events
+               $P      .data({
+                               parentLayout:   Instance                // pointer to Layout Instance
+                       ,       layoutPane:             Instance[pane]  // NEW pointer to pane-alias-object
+                       ,       layoutEdge:             pane
+                       ,       layoutRole:             "pane"
+                       })
+                       .css(c.cssReq).css("zIndex", options.zIndexes.pane_normal)
+                       .css(o.applyDemoStyles ? c.cssDemo : {}) // demo styles
+                       .addClass( o.paneClass +" "+ o.paneClass+"-"+pane ) // default = "ui-layout-pane ui-layout-pane-west" - may be a dupe of 'paneSelector'
+                       .bind("mouseenter."+ sID, addHover )
+                       .bind("mouseleave."+ sID, removeHover )
+                       ;
+               var paneMethods = {
+                               hide:                           ''
+                       ,       show:                           ''
+                       ,       toggle:                         ''
+                       ,       close:                          ''
+                       ,       open:                           ''
+                       ,       slideOpen:                      ''
+                       ,       slideClose:                     ''
+                       ,       slideToggle:            ''
+                       ,       size:                           'sizePane'
+                       ,       sizePane:                       'sizePane'
+                       ,       sizeContent:            ''
+                       ,       sizeHandles:            ''
+                       ,       enableClosable:         ''
+                       ,       disableClosable:        ''
+                       ,       enableSlideable:        ''
+                       ,       disableSlideable:       ''
+                       ,       enableResizable:        ''
+                       ,       disableResizable:       ''
+                       ,       swapPanes:                      'swapPanes'
+                       ,       swap:                           'swapPanes'
+                       ,       move:                           'swapPanes'
+                       ,       removePane:                     'removePane'
+                       ,       remove:                         'removePane'
+                       ,       createChildren:         ''
+                       ,       resizeChildren:         ''
+                       ,       resizeAll:                      'resizeAll'
+                       ,       resizeLayout:           'resizeAll'
+                       }
+               ,       name;
+               // loop hash and bind all methods - include layoutID namespacing
+               for (name in paneMethods) {
+                       $P.bind("layoutpane"+ name.toLowerCase() +"."+ sID, Instance[ paneMethods[name] || name ]);
+               }
+
+               // see if this pane has a 'scrolling-content element'
+               initContent(pane, false); // false = do NOT sizeContent() - called later
+
+               if (!isCenter) {
+                       // call _parseSize AFTER applying pane classes & styles - but before making visible (if hidden)
+                       // if o.size is auto or not valid, then MEASURE the pane and use that as its 'size'
+                       size    = s.size = _parseSize(pane, o.size);
+                       minSize = _parseSize(pane,o.minSize) || 1;
+                       maxSize = _parseSize(pane,o.maxSize) || 100000;
+                       if (size > 0) size = max(min(size, maxSize), minSize);
+                       s.autoResize = o.autoResize; // used with percentage sizes
+
+                       // state for border-panes
+                       s.isClosed  = false; // true = pane is closed
+                       s.isSliding = false; // true = pane is currently open by 'sliding' over adjacent panes
+                       s.isResizing= false; // true = pane is in process of being resized
+                       s.isHidden      = false; // true = pane is hidden - no spacing, resizer or toggler is visible!
+
+                       // array for 'pin buttons' whose classNames are auto-updated on pane-open/-close
+                       if (!s.pins) s.pins = [];
+               }
+               //      states common to ALL panes
+               s.tagName       = $P[0].tagName;
+               s.edge          = pane;         // useful if pane is (or about to be) 'swapped' - easy find out where it is (or is going)
+               s.noRoom        = false;        // true = pane 'automatically' hidden due to insufficient room - will unhide automatically
+               s.isVisible     = true;         // false = pane is invisible - closed OR hidden - simplify logic
+
+               // init pane positioning
+               setPanePosition( pane );
+
+               // if pane is not visible, 
+               if (dir === "horz") // north or south pane
+                       CSS.height = cssH($P, size);
+               else if (dir === "vert") // east or west pane
+                       CSS.width = cssW($P, size);
+               //else if (isCenter) {}
+
+               $P.css(CSS); // apply size -- top, bottom & height will be set by sizeMidPanes
+               if (dir != "horz") sizeMidPanes(pane, true); // true = skipCallback
+
+               // if manually adding a pane AFTER layout initialization, then...
+               if (state.initialized) {
+                       initHandles( pane );
+                       initHotkeys( pane );
+               }
+
+               // close or hide the pane if specified in settings
+               if (o.initClosed && o.closable && !o.initHidden)
+                       close(pane, true, true); // true, true = force, noAnimation
+               else if (o.initHidden || o.initClosed)
+                       hide(pane); // will be completely invisible - no resizer or spacing
+               else if (!s.noRoom)
+                       // make the pane visible - in case was initially hidden
+                       $P.css("display","block");
+               // ELSE setAsOpen() - called later by initHandles()
+
+               // RESET visibility now - pane will appear IF display:block
+               $P.css("visibility","visible");
+
+               // check option for auto-handling of pop-ups & drop-downs
+               if (o.showOverflowOnHover)
+                       $P.hover( allowOverflow, resetOverflow );
+
+               // if manually adding a pane AFTER layout initialization, then...
+               if (state.initialized) {
+                       afterInitPane( pane );
+               }
+       }
+
+,      afterInitPane = function (pane) {
+               var     $P      = $Ps[pane]
+               ,       s       = state[pane]
+               ,       o       = options[pane]
+               ;
+               if (!$P) return;
+
+               // see if there is a directly-nested layout inside this pane
+               if ($P.data("layout"))
+                       refreshChildren( pane, $P.data("layout") );
+
+               // process pane contents and callbacks, and init/resize child-layout if exists
+               if (s.isVisible) { // pane is OPEN
+                       if (state.initialized) // this pane was added AFTER layout was created
+                               resizeAll(); // will also sizeContent
+                       else
+                               sizeContent(pane);
+
+                       if (o.triggerEventsOnLoad)
+                               _runCallbacks("onresize_end", pane);
+                       else // automatic if onresize called, otherwise call it specifically
+                               // resize child - IF inner-layout already exists (created before this layout)
+                               resizeChildren(pane, true); // a previously existing childLayout
+               }
+
+               // init childLayouts - even if pane is not visible
+               if (o.initChildren && o.children)
+                       createChildren(pane);
+       }
+
+       /**
+        * @param {string=}     panes           The pane(s) to process
+        */
+,      setPanePosition = function (panes) {
+               panes = panes ? panes.split(",") : _c.borderPanes;
+
+               // create toggler DIVs for each pane, and set object pointers for them, eg: $R.north = north toggler DIV
+               $.each(panes, function (i, pane) {
+                       var $P  = $Ps[pane]
+                       ,       $R      = $Rs[pane]
+                       ,       o       = options[pane]
+                       ,       s       = state[pane]
+                       ,       side =  _c[pane].side
+                       ,       CSS     = {}
+                       ;
+                       if (!$P) return; // pane does not exist - skip
+
+                       // set css-position to account for container borders & padding
+                       switch (pane) {
+                               case "north":   CSS.top         = sC.inset.top;
+                                                               CSS.left        = sC.inset.left;
+                                                               CSS.right       = sC.inset.right;
+                                                               break;
+                               case "south":   CSS.bottom      = sC.inset.bottom;
+                                                               CSS.left        = sC.inset.left;
+                                                               CSS.right       = sC.inset.right;
+                                                               break;
+                               case "west":    CSS.left        = sC.inset.left; // top, bottom & height set by sizeMidPanes()
+                                                               break;
+                               case "east":    CSS.right       = sC.inset.right; // ditto
+                                                               break;
+                               case "center":  // top, left, width & height set by sizeMidPanes()
+                       }
+                       // apply position
+                       $P.css(CSS); 
+
+                       // update resizer position
+                       if ($R && s.isClosed)
+                               $R.css(side, sC.inset[side]);
+                       else if ($R && !s.isHidden)
+                               $R.css(side, sC.inset[side] + getPaneSize(pane));
+               });
+       }
+
+       /**
+        * Initialize module objects, styling, size and position for all resize bars and toggler buttons
+        *
+        * @see  _create()
+        * @param {string=}     [panes=""]      The edge(s) to process
+        */
+,      initHandles = function (panes) {
+               panes = panes ? panes.split(",") : _c.borderPanes;
+
+               // create toggler DIVs for each pane, and set object pointers for them, eg: $R.north = north toggler DIV
+               $.each(panes, function (i, pane) {
+                       var $P          = $Ps[pane];
+                       $Rs[pane]       = false; // INIT
+                       $Ts[pane]       = false;
+                       if (!$P) return; // pane does not exist - skip
+
+                       var     o               = options[pane]
+                       ,       s               = state[pane]
+                       ,       c               = _c[pane]
+                       ,       paneId  = o.paneSelector.substr(0,1) === "#" ? o.paneSelector.substr(1) : ""
+                       ,       rClass  = o.resizerClass
+                       ,       tClass  = o.togglerClass
+                       ,       spacing = (s.isVisible ? o.spacing_open : o.spacing_closed)
+                       ,       _pane   = "-"+ pane // used for classNames
+                       ,       _state  = (s.isVisible ? "-open" : "-closed") // used for classNames
+                       ,       I               = Instance[pane]
+                               // INIT RESIZER BAR
+                       ,       $R              = I.resizer = $Rs[pane] = $("<div></div>")
+                               // INIT TOGGLER BUTTON
+                       ,       $T              = I.toggler = (o.closable ? $Ts[pane] = $("<div></div>") : false)
+                       ;
+
+                       //if (s.isVisible && o.resizable) ... handled by initResizable
+                       if (!s.isVisible && o.slidable)
+                               $R.attr("title", o.tips.Slide).css("cursor", o.sliderCursor);
+
+                       $R      // if paneSelector is an ID, then create a matching ID for the resizer, eg: "#paneLeft" => "paneLeft-resizer"
+                               .attr("id", paneId ? paneId +"-resizer" : "" )
+                               .data({
+                                       parentLayout:   Instance
+                               ,       layoutPane:             Instance[pane]  // NEW pointer to pane-alias-object
+                               ,       layoutEdge:             pane
+                               ,       layoutRole:             "resizer"
+                               })
+                               .css(_c.resizers.cssReq).css("zIndex", options.zIndexes.resizer_normal)
+                               .css(o.applyDemoStyles ? _c.resizers.cssDemo : {}) // add demo styles
+                               .addClass(rClass +" "+ rClass+_pane)
+                               .hover(addHover, removeHover) // ALWAYS add hover-classes, even if resizing is not enabled - handle with CSS instead
+                               .hover(onResizerEnter, onResizerLeave) // ALWAYS NEED resizer.mouseleave to balance toggler.mouseenter
+                               .mousedown($.layout.disableTextSelection)       // prevent text-selection OUTSIDE resizer
+                               .mouseup($.layout.enableTextSelection)          // not really necessary, but just in case
+                               .appendTo($N) // append DIV to container
+                       ;
+                       if ($.fn.disableSelection)
+                               $R.disableSelection(); // prevent text-selection INSIDE resizer
+                       if (o.resizerDblClickToggle)
+                               $R.bind("dblclick."+ sID, toggle );
+
+                       if ($T) {
+                               $T      // if paneSelector is an ID, then create a matching ID for the resizer, eg: "#paneLeft" => "#paneLeft-toggler"
+                                       .attr("id", paneId ? paneId +"-toggler" : "" )
+                                       .data({
+                                               parentLayout:   Instance
+                                       ,       layoutPane:             Instance[pane]  // NEW pointer to pane-alias-object
+                                       ,       layoutEdge:             pane
+                                       ,       layoutRole:             "toggler"
+                                       })
+                                       .css(_c.togglers.cssReq) // add base/required styles
+                                       .css(o.applyDemoStyles ? _c.togglers.cssDemo : {}) // add demo styles
+                                       .addClass(tClass +" "+ tClass+_pane)
+                                       .hover(addHover, removeHover) // ALWAYS add hover-classes, even if toggling is not enabled - handle with CSS instead
+                                       .bind("mouseenter", onResizerEnter) // NEED toggler.mouseenter because mouseenter MAY NOT fire on resizer
+                                       .appendTo($R) // append SPAN to resizer DIV
+                               ;
+                               // ADD INNER-SPANS TO TOGGLER
+                               if (o.togglerContent_open) // ui-layout-open
+                                       $("<span>"+ o.togglerContent_open +"</span>")
+                                               .data({
+                                                       layoutEdge:             pane
+                                               ,       layoutRole:             "togglerContent"
+                                               })
+                                               .data("layoutRole", "togglerContent")
+                                               .data("layoutEdge", pane)
+                                               .addClass("content content-open")
+                                               .css("display","none")
+                                               .appendTo( $T )
+                                               //.hover( addHover, removeHover ) // use ui-layout-toggler-west-hover .content-open instead!
+                                       ;
+                               if (o.togglerContent_closed) // ui-layout-closed
+                                       $("<span>"+ o.togglerContent_closed +"</span>")
+                                               .data({
+                                                       layoutEdge:             pane
+                                               ,       layoutRole:             "togglerContent"
+                                               })
+                                               .addClass("content content-closed")
+                                               .css("display","none")
+                                               .appendTo( $T )
+                                               //.hover( addHover, removeHover ) // use ui-layout-toggler-west-hover .content-closed instead!
+                                       ;
+                               // ADD TOGGLER.click/.hover
+                               enableClosable(pane);
+                       }
+
+                       // add Draggable events
+                       initResizable(pane);
+
+                       // ADD CLASSNAMES & SLIDE-BINDINGS - eg: class="resizer resizer-west resizer-open"
+                       if (s.isVisible)
+                               setAsOpen(pane);        // onOpen will be called, but NOT onResize
+                       else {
+                               setAsClosed(pane);      // onClose will be called
+                               bindStartSlidingEvents(pane, true); // will enable events IF option is set
+                       }
+
+               });
+
+               // SET ALL HANDLE DIMENSIONS
+               sizeHandles();
+       }
+
+
+       /**
+        * Initialize scrolling ui-layout-content div - if exists
+        *
+        * @see  initPane() - or externally after an Ajax injection
+        * @param {string}      pane                    The pane to process
+        * @param {boolean=}    [resize=true]   Size content after init
+        */
+,      initContent = function (pane, resize) {
+               if (!isInitialized()) return;
+               var 
+                       o       = options[pane]
+               ,       sel     = o.contentSelector
+               ,       I       = Instance[pane]
+               ,       $P      = $Ps[pane]
+               ,       $C
+               ;
+               if (sel) $C = I.content = $Cs[pane] = (o.findNestedContent)
+                       ? $P.find(sel).eq(0) // match 1-element only
+                       : $P.children(sel).eq(0)
+               ;
+               if ($C && $C.length) {
+                       $C.data("layoutRole", "content");
+                       // SAVE original Content CSS
+                       if (!$C.data("layoutCSS"))
+                               $C.data("layoutCSS", styles($C, "height"));
+                       $C.css( _c.content.cssReq );
+                       if (o.applyDemoStyles) {
+                               $C.css( _c.content.cssDemo ); // add padding & overflow: auto to content-div
+                               $P.css( _c.content.cssDemoPane ); // REMOVE padding/scrolling from pane
+                       }
+                       // ensure no vertical scrollbar on pane - will mess up measurements
+                       if ($P.css("overflowX").match(/(scroll|auto)/)) {
+                               $P.css("overflow", "hidden");
+                       }
+                       state[pane].content = {}; // init content state
+                       if (resize !== false) sizeContent(pane);
+                       // sizeContent() is called AFTER init of all elements
+               }
+               else
+                       I.content = $Cs[pane] = false;
+       }
+
+
+       /**
+        * Add resize-bars to all panes that specify it in options
+        * -dependancy: $.fn.resizable - will skip if not found
+        *
+        * @see  _create()
+        * @param {string=}     [panes=""]      The edge(s) to process
+        */
+,      initResizable = function (panes) {
+               var     draggingAvailable = $.layout.plugins.draggable
+               ,       side // set in start()
+               ;
+               panes = panes ? panes.split(",") : _c.borderPanes;
+
+               $.each(panes, function (idx, pane) {
+                       var o = options[pane];
+                       if (!draggingAvailable || !$Ps[pane] || !o.resizable) {
+                               o.resizable = false;
+                               return true; // skip to next
+                       }
+
+                       var s           = state[pane]
+                       ,       z               = options.zIndexes
+                       ,       c               = _c[pane]
+                       ,       side    = c.dir=="horz" ? "top" : "left"
+                       ,       $P              = $Ps[pane]
+                       ,       $R              = $Rs[pane]
+                       ,       base    = o.resizerClass
+                       ,       lastPos = 0 // used when live-resizing
+                       ,       r, live // set in start because may change
+                       //      'drag' classes are applied to the ORIGINAL resizer-bar while dragging is in process
+                       ,       resizerClass            = base+"-drag"                          // resizer-drag
+                       ,       resizerPaneClass        = base+"-"+pane+"-drag"         // resizer-north-drag
+                       //      'helper' class is applied to the CLONED resizer-bar while it is being dragged
+                       ,       helperClass                     = base+"-dragging"                      // resizer-dragging
+                       ,       helperPaneClass         = base+"-"+pane+"-dragging" // resizer-north-dragging
+                       ,       helperLimitClass        = base+"-dragging-limit"        // resizer-drag
+                       ,       helperPaneLimitClass = base+"-"+pane+"-dragging-limit"  // resizer-north-drag
+                       ,       helperClassesSet        = false                                         // logic var
+                       ;
+
+                       if (!s.isClosed)
+                               $R.attr("title", o.tips.Resize)
+                                 .css("cursor", o.resizerCursor); // n-resize, s-resize, etc
+
+                       $R.draggable({
+                               containment:    $N[0] // limit resizing to layout container
+                       ,       axis:                   (c.dir=="horz" ? "y" : "x") // limit resizing to horz or vert axis
+                       ,       delay:                  0
+                       ,       distance:               1
+                       ,       grid:                   o.resizingGrid
+                       //      basic format for helper - style it using class: .ui-draggable-dragging
+                       ,       helper:                 "clone"
+                       ,       opacity:                o.resizerDragOpacity
+                       ,       addClasses:             false // avoid ui-state-disabled class when disabled
+                       //,     iframeFix:              o.draggableIframeFix // TODO: consider using when bug is fixed
+                       ,       zIndex:                 z.resizer_drag
+
+                       ,       start: function (e, ui) {
+                                       // REFRESH options & state pointers in case we used swapPanes
+                                       o = options[pane];
+                                       s = state[pane];
+                                       // re-read options
+                                       live = o.livePaneResizing;
+
+                                       // ondrag_start callback - will CANCEL hide if returns false
+                                       // TODO: dragging CANNOT be cancelled like this, so see if there is a way?
+                                       if (false === _runCallbacks("ondrag_start", pane)) return false;
+
+                                       s.isResizing            = true; // prevent pane from closing while resizing
+                                       state.paneResizing      = pane; // easy to see if ANY pane is resizing
+                                       timer.clear(pane+"_closeSlider"); // just in case already triggered
+
+                                       // SET RESIZER LIMITS - used in drag()
+                                       setSizeLimits(pane); // update pane/resizer state
+                                       r = s.resizerPosition;
+                                       lastPos = ui.position[ side ]
+
+                                       $R.addClass( resizerClass +" "+ resizerPaneClass ); // add drag classes
+                                       helperClassesSet = false; // reset logic var - see drag()
+
+                                       // MASK PANES CONTAINING IFRAMES, APPLETS OR OTHER TROUBLESOME ELEMENTS
+                                       showMasks( pane, { resizing: true });
+                               }
+
+                       ,       drag: function (e, ui) {
+                                       if (!helperClassesSet) { // can only add classes after clone has been added to the DOM
+                                               //$(".ui-draggable-dragging")
+                                               ui.helper
+                                                       .addClass( helperClass +" "+ helperPaneClass ) // add helper classes
+                                                       .css({ right: "auto", bottom: "auto" }) // fix dir="rtl" issue
+                                                       .children().css("visibility","hidden")  // hide toggler inside dragged resizer-bar
+                                               ;
+                                               helperClassesSet = true;
+                                               // draggable bug!? RE-SET zIndex to prevent E/W resize-bar showing through N/S pane!
+                                               if (s.isSliding) $Ps[pane].css("zIndex", z.pane_sliding);
+                                       }
+                                       // CONTAIN RESIZER-BAR TO RESIZING LIMITS
+                                       var limit = 0;
+                                       if (ui.position[side] < r.min) {
+                                               ui.position[side] = r.min;
+                                               limit = -1;
+                                       }
+                                       else if (ui.position[side] > r.max) {
+                                               ui.position[side] = r.max;
+                                               limit = 1;
+                                       }
+                                       // ADD/REMOVE dragging-limit CLASS
+                                       if (limit) {
+                                               ui.helper.addClass( helperLimitClass +" "+ helperPaneLimitClass ); // at dragging-limit
+                                               window.defaultStatus = (limit>0 && pane.match(/(north|we