Merge branch 'master' of c:/UniServer/www/dokuwiki/lib/tpl/dokuwiki-2011 into new_default

Conflicts: README css/_admin.css css/_diff.css css/_edit.css css/_footnotes.css css/_forms.css css/_imgdetail.css css/_links.css css/_modal.css css/_recent.css css/_search.css css/_toc.css css/basic.css css/content.css css/design.css css/includes.css css/print.css css/rtl.css css/structure.css detail.php images/bullet.png images/closed.png images/favicon.ico images/link_icon.gif images/mail_icon.gif images/open.png images/windows.gif main.php mediamanager.php style.ini tpl_functions.php
author: Anika Henke <anika@selfthinker.org> 2012-02-05 15:06:09 +0000
committer: Anika Henke <anika@selfthinker.org> 2012-02-05 15:06:09 +0000
commit: 753b6d5c72fb0639a1c94401f7089011e353d1e1 (patch)
tree: 698ca2101df2a8e862b3aa0e59ee31c3f1104132
parent: d07ea3739d8e6580641e84d4f3b14df6e0c9fd70 (diff)
parent: 79b3df949fb269d4c1e78a382efc163d514e2434 (diff)
download: rpg-753b6d5c72fb0639a1c94401f7089011e353d1e1.tar.gz
rpg-753b6d5c72fb0639a1c94401f7089011e353d1e1.tar.bz2
40 files changed, 2540 insertions, 781 deletions
diff --git a/css/_diff.css b/css/_diff.css
index f2be4ae54..62f831213 100644
--- a/css/_diff.css
+++ b/css/_diff.css
@@ -40,16 +40,16 @@
 
 /* table body */
 .dokuwiki table.diff td {
-    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Liberation Mono", Monaco, "Courier New", monospace;
+    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 td.diff-addedline {
+.dokuwiki table.diff .diff-addedline {
     background-color: #cfc;
     color: inherit;
 }
-.dokuwiki table.diff td.diff-deletedline {
+.dokuwiki table.diff .diff-deletedline {
     background-color: #fdd;
     color: inherit;
 }
diff --git a/css/_edit.css b/css/_edit.css
index 88ebcf15c..5a3952c90 100644
--- a/css/_edit.css
+++ b/css/_edit.css
@@ -10,6 +10,7 @@
 
 .dokuwiki div.toolbar {
     margin-bottom: .5em;
+    overflow: hidden;
 }
 .dokuwiki div.toolbar #draft__status {
     float: right;
@@ -17,6 +18,7 @@
     background-color: inherit;
 }
 .dokuwiki div.toolbar #tool__bar {
+    float: left;
 }
 
 /* buttons inside of toolbar */
@@ -33,8 +35,12 @@ div.picker {
 div.picker.pk_hl {
     width: auto;
 }
+
 /* buttons inside of picker */
-div.picker button.pickerbutton {
+div.picker button.pickerbutton,
+div.picker button.toolbutton {
+    padding: .1em .35em;
+    border-width: 0;
 }
 
 /*____________ edit textarea ____________*/
@@ -93,7 +99,7 @@ div.picker button.pickerbutton {
 ********************************************************************/
 
 .dokuwiki div.preview {
-    border: dashed __border__;
+    border: dotted __border__;
     border-width: .2em 0;
     padding: 1.4em 0;
     margin-bottom: 1.4em;
@@ -109,7 +115,14 @@ div.picker button.pickerbutton {
 .dokuwiki .secedit input.button {
     font-size: 75%;
 }
+
+/* generic style for section highlighting (including headings) */
 .dokuwiki .section_highlight {
-    background-color: __background_alt__ !important;
-    color: inherit;
+}
+/* style for section highlighting (only sections below headings) */
+.dokuwiki div.section_highlight {
+    margin: -3em -1em -.01em -1em; /* negative side margin = side padding + side border */
+    padding: 3em .5em .01em .5em;
+    border: solid __background_alt__;
+    border-width: 0 .5em;
 }
diff --git a/css/_fileuploader.css b/css/_fileuploader.css
new file mode 100644
index 000000000..42004de28
--- /dev/null
+++ b/css/_fileuploader.css
@@ -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: __background_neu__;
+    color: __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: __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: __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/_forms.css b/css/_forms.css
index c7dc02d62..804584725 100644
--- a/css/_forms.css
+++ b/css/_forms.css
@@ -13,32 +13,32 @@
 
 /* ---------------- forms ------------------------ */
 
-div.dokuwiki form {
+.dokuwiki form {
   border: none;
   display: inline;
 }
 
-div.dokuwiki label.block {
+.dokuwiki label.block {
   display: block;
   text-align: right;
   font-weight: bold;
 }
 
-div.dokuwiki label.simple {
+.dokuwiki label.simple {
   display: block;
   text-align: left;
   font-weight: normal;
 }
 
-div.dokuwiki label.block input.edit {
+.dokuwiki label.block input.edit {
   width: 50%;
 }
 
-div.dokuwiki label span {
+.dokuwiki label span {
     vertical-align: middle;
 }
 
-div.dokuwiki fieldset {
+.dokuwiki fieldset {
   width: 400px;
   text-align: center;
   border: 1px solid __border__;
@@ -47,11 +47,11 @@ div.dokuwiki fieldset {
 }
 
 
-div.dokuwiki input.edit,
-div.dokuwiki select.edit {
+.dokuwiki input.edit,
+.dokuwiki select.edit {
   vertical-align: middle;
 }
-div.dokuwiki select.edit {
+.dokuwiki select.edit {
   padding: 0.1em 0;
 }
 
diff --git a/css/_imgdetail.css b/css/_imgdetail.css
index d6cc4abaf..a3e0f55f5 100644
--- a/css/_imgdetail.css
+++ b/css/_imgdetail.css
@@ -8,14 +8,11 @@
 #dokuwiki__detail h1 {
 }
 
-#dokuwiki__detail div.content {
-}
-
-#dokuwiki__detail div.content img {
+#dokuwiki__detail img {
     float: left;
-    margin-right: 1.5em;
+    margin: 0 1.5em .5em 0;
 }
-#dokuwiki__detail div.content div.img_detail {
+#dokuwiki__detail div.img_detail {
     float: left;
 }
 
@@ -29,4 +26,5 @@
 }
 
 #dokuwiki__detail p.back {
+    clear: both;
 }
diff --git a/css/_links.css b/css/_links.css
index 7e7f18268..6b19c3a24 100644
--- a/css/_links.css
+++ b/css/_links.css
@@ -39,11 +39,12 @@
 .dokuwiki a.interwiki {
     background-repeat: no-repeat;
     background-position: 0 center;
-    padding: 0 0 0 17px;
+    padding: 0 0 0 20px;
 }
 /* external link */
 .dokuwiki a.urlextern {
     background-image: url(images/link_icon.gif);
+    padding: 0 0 0 17px;
 }
 /* windows share */
 .dokuwiki a.windows {
@@ -60,4 +61,5 @@
 }
 /* interwiki link */
 .dokuwiki a.interwiki {
+    padding: 0 0 0 17px;
 }
diff --git a/css/_media_fullscreen.css b/css/_media_fullscreen.css
new file mode 100644
index 000000000..3bf48e9ec
--- /dev/null
+++ b/css/_media_fullscreen.css
@@ -0,0 +1,457 @@
+/**
+ * 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: __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;
+}
+
+#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: __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 ____________*/
+
+#mediamanager__page .namespaces h2 {
+    font-size: 1em;
+    display: inline-block;
+    border-width: 0;
+    padding: .3em .8em;
+    margin: 0 .3em 0 0;
+    border-radius: .5em .5em 0 0;
+    font-weight: normal;
+    background-color: __background_alt__;
+    color: __text__;
+    line-height: 1.4em;
+}
+* html #mediamanager__page .namespaces h2,
+*+html #mediamanager__page .namespaces h2 {
+    display: inline;
+}
+
+#mediamanager__page .namespaces ul {
+    margin-left: .2em;
+    margin-bottom: 0;
+    padding: 0;
+    list-style: none;
+}
+#mediamanager__page .namespaces ul ul {
+    margin-left: 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: __text__;
+    float: left;
+    line-height: 1;
+    padding-left: 3px;
+}
+
+#mediamanager__page .panelHeader ul li.listType {
+    padding-left: 30px;
+    background: url('../../images/icon-list.png') 3px 1px no-repeat;
+}
+#mediamanager__page .panelHeader ul li.sortBy {
+    padding-left: 30px;
+    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;
+}
+
+#mediamanager__page .filelist .panelContent ul li:hover {
+    background-color: __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: __background_neu__;
+    color: __text__;
+    padding: 5px;
+    vertical-align: top;
+    text-align: center;
+    position: relative;
+    line-height: 1.2;
+}
+* 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: __background__;
+    color: __text__;
+    overflow: hidden;
+}
+
+#mediamanager__page .filelist .rows li:nth-child(2n+1) {
+    background-color: __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: __background_alt__;
+}
+#mediamanager__page .file dl dd {
+    display: block;
+    background-color: __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: __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: __background__;
+}
+
+#mediamanager__diff th {
+    font-weight: normal;
+    background-color: __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: __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 .image1,
+#mediamanager__diff .imageDiff .image2 {
+    width: 97%;
+}
+#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 img {
+    width: 100%;
+}
+
diff --git a/css/_media_popup.css b/css/_media_popup.css
new file mode 100644
index 000000000..0469c8e60
--- /dev/null
+++ b/css/_media_popup.css
@@ -0,0 +1,205 @@
+/**
+ * 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 __border__;
+}
+#mediamgr__aside .pad {
+    padding: .5em;
+}
+
+#mediamgr__content {
+    width: 69.7%;
+    height: 100%;
+    overflow: auto;
+    position: absolute;
+    right: 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 __border__;
+}
+
+/* left side
+********************************************************************/
+
+/*____________ options ____________*/
+
+#media__opts {
+    margin-bottom: .5em;
+}
+
+#media__opts input {
+    margin-right: .3em;
+}
+#media__opts label {
+}
+
+/*____________ tree ____________*/
+
+#media__tree ul {
+    padding-left: .2em;
+}
+#media__tree ul li {
+    clear: left;
+    list-style-type: none;
+    list-style-image: none;
+    margin-left: 0;
+}
+#media__tree ul li img {
+    float: left;
+    padding: .5em .3em 0 0;
+}
+#media__tree ul li div.li {
+    display: inline;
+}
+#media__tree ul li li {
+    margin-left: 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: __background_alt__;
+}
+#media__content .even {
+}
+/* highlight newly uploaded or edited file */
+#media__content #scroll__here {
+    border: 1px dashed __border__;
+}
+
+/* link which inserts media file */
+#media__content a.mediafile {
+    margin-right: 1.5em;
+    font-weight: bold;
+}
+#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: __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;
+}
+#media__content div.detail div.thumb a {
+    display: block;
+    cursor: pointer;
+}
+#media__content div.detail p {
+    margin-bottom: 0;
+}
+
+
+/*____________ media search ____________*/
+
+form#dw__mediasearch {
+}
+form#dw__mediasearch p {
+}
+form#dw__mediasearch label {
+}
+form#dw__mediasearch label span {
+}
+form#dw__mediasearch input.edit {
+}
+form#dw__mediasearch input.button {
+}
+
+
+/* meta edit form
+********************************************************************/
+
+#media__content form.meta {
+}
+
+#media__content form.meta div.metafield {
+    clear: left;
+    margin-bottom: .5em;
+    overflow: hidden;
+}
+
+#media__content form.meta label {
+    display: block;
+    width: 25%;
+    float: left;
+    font-weight: bold;
+    clear: left;
+}
+#media__content form.meta .edit {
+    float: left;
+    width: 70%;
+    margin: 0;
+}
+#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%;
+}
diff --git a/css/_modal.css b/css/_modal.css
index 89eb48dab..125f702a8 100644
--- a/css/_modal.css
+++ b/css/_modal.css
@@ -1,36 +1,16 @@
-
-/* TODO */
-
 /**
  * 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 {
-    position: absolute;
-    display: block;
-    z-index: 99;
-    width:   300px;
-    height:  250px;
-    padding: 0;
-    margin:  0;
-    overflow: hidden;
-    border: 1px solid __border__;
-    background-color: __background_neu__;
-    text-align: center;
-}
-
-#link__wiz_header {
-    background-color: __background_alt__;
-    height: 16px;
-    margin-bottom: 5px;
-}
-
-#link__wiz_close {
-    cursor: pointer;
-    margin: 0;
 }
 
 #link__wiz_result {
@@ -41,21 +21,28 @@
     border: 1px solid __border__;
     margin: 3px auto;
     text-align: left;
+    line-height: 1;
 }
 
-#link__wiz_result div.type_u {
-    padding: 3px 3px 3px 22px;
-    background: transparent url(../../images/up.png) 3px 3px no-repeat;
+#link__wiz_result div {
+    padding: 3px 3px 3px 0;
 }
 
-#link__wiz_result div.type_f {
-    padding: 3px 3px 3px 22px;
-    background: transparent url(../../images/page.png) 3px 3px no-repeat;
+#link__wiz_result div a {
+    display: block;
+    padding-left: 22px;
+    min-height: 16px;
+    background: transparent 3px center no-repeat;
 }
 
-#link__wiz_result div.type_d {
-    padding: 3px 3px 3px 22px;
-    background: transparent url(../../images/ns.png) 3px 3px no-repeat;
+#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 {
@@ -69,107 +56,28 @@
 #link__wiz_result span {
     display: block;
     color: __text_neu__;
-}
-
-/*FIXME maybe move to a more general style sheet*/
-.ondrag {
-    cursor: move;
-    opacity: 0.8;
+    margin-left: 22px;
 }
 
 
 /* media option wizard (opens when inserting media in the media popup)
 ********************************************************************/
 
-/* --- popup --- */
-
 #media__popup {
-    background-color:__background__;
-    display:none;
-    border: 1px solid __border__;
-    position: absolute;
-    width:270px;
-}
-
-#media__popup h1 {
-    text-align:center;
-    font-weight:normal;
-    background-color: __background_alt__;
-    height: 16px;
-    margin-bottom: 5px;
-    font-size:12px;
-    border-bottom: 0;
+    /* for backwards compatibility (not needed since Rincewind) */
+    display: none;
 }
 
-#media__popup p {
-    display:block;
-    line-height:14pt;
-    margin:0.5em;
+#media__popup_content p {
+    margin: 0 0 .5em;
 }
 
-#media_nolink {
-    padding:4px 0;
+#media__popup_content label {
+    margin-right: .5em;
+    cursor: default;
 }
 
-#media__popup label {
-    float:left;
-    width:9em;
-}
-
-#media__popup .button {
-    margin-left:auto;
-    margin-right:auto;
-}
-
-#media__popup .btnlbl {
-    text-align:center;
-}
-
-#media__popup .btnlbl input {
-    margin:0 1em;
-}
-
-#media__closeimg {
-    float:right;
-}
-
-/* --- display options --- */
-
-#media__linkopts label,
-#media__nolnk {
-    width: 80px;
-    float: left;
-    margin-left: 10px;
-}
-
-#media__linkopts label{
-    line-height: 20px;
-}
-
-#media__nolnk,
-#media__linkopts label.long{
-    margin-bottom: 8px;
-    line-height: 12px;
-}
-
-#media__linkopts label.long{
-    width: 150px;
-    float: none;
-}
-
-#media__linkopts br {
-    clear: both;
-}
-
-#media__linkopts select {
-    width: 60px;
-    margin-left: 10px;
-}
-
-#media__linkopts input.edit {
-    width:50px;
-    margin-left:10px;
-}
-#media__linkopts #media__title {
-    width:150px;
+#media__popup_content .button {
+    margin-right: 1px;
+    cursor: pointer;
 }
diff --git a/css/_recent.css b/css/_recent.css
index 98646e057..68f0e5826 100644
--- a/css/_recent.css
+++ b/css/_recent.css
@@ -5,6 +5,12 @@
 
 /*____________ list of revisions / recent changes ____________*/
 
+/* select type of revisions (media/pages), should have a class on it's own, but hasn't */
+.dokuwiki #dw__recent label {
+    margin-bottom: .5em;
+    display: block;
+}
+
 .dokuwiki #dw__recent ul li,
 .dokuwiki #page__revisions ul li {
     list-style: none;
@@ -22,8 +28,7 @@
 }
 .dokuwiki #dw__recent ul li.minor,
 .dokuwiki #page__revisions ul li.minor {
-    color: __text_alt__;
-    background-color: inherit;
+    opacity: .7;
 }
 
 .dokuwiki #dw__recent li span.date,
diff --git a/css/_tabs.css b/css/_tabs.css
new file mode 100644
index 000000000..de544fd2b
--- /dev/null
+++ b/css/_tabs.css
@@ -0,0 +1,40 @@
+/**
+ * This file provides the styles for general tabs.
+ */
+
+.dokuwiki ul.tabs {
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+}
+.dokuwiki ul.tabs li {
+    float: left;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+.dokuwiki ul.tabs li strong,
+.dokuwiki ul.tabs li a {
+    float: left;
+    padding: .3em .8em;
+    margin: 0 .3em 0 0;
+    background-color: __background_neu__;
+    color: __text__;
+    border-radius: .5em .5em 0 0;
+}
+.dokuwiki ul.tabs li strong {
+    font-weight: normal;
+}
+
+.dokuwiki ul.tabs li a:link,
+.dokuwiki ul.tabs li a:visited {
+}
+.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: __background_alt__;
+    color: __text__;
+    text-decoration: none;
+}
diff --git a/css/_toc.css b/css/_toc.css
index fcccf4fc1..b78817523 100644
--- a/css/_toc.css
+++ b/css/_toc.css
@@ -11,45 +11,27 @@
     float: right;
     margin: 0 0 1.4em 1.4em;
     width: 12em;
+    background-color: __background_alt__;
+    color: inherit;
 }
 
 /*____________ toc header ____________*/
 
 .dokuwiki div.tocheader {
     padding: .2em .5em;
-    margin-bottom: .2em;
     font-weight: bold;
-    background-color: __background_alt__;
-    color: __text__;
 }
 
-/* css arrow */
 .dokuwiki .toc span.toc_open,
 .dokuwiki .toc span.toc_close {
-    border: .4em solid __background_alt__;
     float: right;
-    display: block;
-    margin: 0 .2em 0 0;
-}
-.dokuwiki .toc span.toc_open span,
-.dokuwiki .toc span.toc_close span {
-    display: none;
-}
-.dokuwiki .toc span.toc_open {
-    margin-top: .4em;
-    border-top: .4em solid __text__;
-}
-.dokuwiki .toc span.toc_close {
-    margin-top: 0;
-    border-bottom: .4em solid __text__;
+    margin: 0 .2em;
 }
 
 /*____________ toc list ____________*/
 
 .dokuwiki #toc__inside {
     padding: .2em .5em;
-    background-color: __background_alt__;
-    color: __text__;
 }
 .dokuwiki #toc__inside ul {
     padding: 0;
@@ -59,6 +41,10 @@
     list-style: none;
     padding: 0;
     margin: 0;
+    line-height: 1.1;
+}
+.dokuwiki #toc__inside ul li div.li {
+    padding: .15em 0;
 }
 .dokuwiki #toc__inside ul ul {
     padding-left: 1em;
@@ -74,7 +60,7 @@
 }
 
 
-/* sitemap (and backlinkss)
+/* sitemap (and backlinks)
 ********************************************************************/
 
 .dokuwiki ul.idx {
diff --git a/css/basic.css b/css/basic.css
index ef209d54a..ae9be499e 100644
--- a/css/basic.css
+++ b/css/basic.css
@@ -12,43 +12,83 @@ html {
     overflow-x: auto;
     overflow-y: scroll;
 }
-html, body {
-    background-color: __background__;
+html,
+body {
     color: __text__;
+    background-color: __background_site__;
+    background-image: -moz-linear-gradient(   top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em);
+    background-image: -webkit-linear-gradient(top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em);
+    background-image: -o-linear-gradient(     top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em);
+    background-image: -ms-linear-gradient(    top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em);
+    background-image: linear-gradient(        top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em);
+    background-size: 1px 10em;
+    background-repeat: repeat-x;
     margin: 0;
     padding: 0;
 }
 body {
-    font: normal 100%/1.4 Frutiger, "Frutiger Linotype", Univers, Calibri, Myriad, "Liberation Sans", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    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 */
 }
 
 
 /*____________ headers ____________*/
 
-h1, h2, h3, h4, h5, h6,
-caption, legend {
-    font-family: Constantia, Utopia, Lucidabright, Lucida, Georgia, serif;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+caption,
+legend {
+    font-family: Arial, sans-serif;
     font-weight: bold;
-    color: __text_neu__;
     background-color: inherit;
     padding: 0;
+    line-height: 1.2;
     clear: left; /* ideally 'both', but problems with toc */
 }
 
-h1 { font-size: 2.25em;  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; }
+h1 {
+    font-size: 2em;
+    margin: -.222em 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, fieldset, address {
+p,
+ul,
+ol,
+dl,
+pre,
+table,
+hr,
+blockquote,
+fieldset,
+address {
     margin: 0 0 1.4em 0; /* bottom margin = line-height */
     padding: 0;
 }
@@ -58,16 +98,15 @@ div {
     padding: 0;
 }
 
-p, dt, dd, td, th, li {
-}
-
 
 /*____________ lists ____________*/
 
-ul, ol {
+ul,
+ol {
     padding: 0 0 0 1.5em;
 }
-li, dd {
+li,
+dd {
     padding: 0;
     margin: 0 0 0 1.5em;
 }
@@ -77,8 +116,12 @@ dt {
     padding: 0;
 }
 
-li ul, li ol, li dl,
-dl ul, dl ol, dl dl {
+li ul,
+li ol,
+li dl,
+dl ul,
+dl ol,
+dl dl {
     margin-bottom: 0;
     padding: 0;
 }
@@ -86,7 +129,7 @@ li li {
     font-size: 100%;
 }
 
-ul             { list-style: disc outside; }
+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; }
@@ -109,7 +152,8 @@ caption {
     margin: 0 0 .3em;
 }
 
-th, td {
+th,
+td {
     padding: .3em .5em;
     margin: 0;
     vertical-align: top;
@@ -125,22 +169,21 @@ th {
 /*____________ links ____________*/
 
 a {
+    outline: none;
 }
-a:link, a:visited {
+a:link,
+a:visited {
     text-decoration: none;
-    color: #00c; /* §colour */
-}
-a:link:hover, a:visited:hover,
-a:link:focus, a:visited:focus,
-a:link:active, a:visited:active {
+    color: __link__;
+}
+a:link:hover,
+a:visited:hover,
+a:link:focus,
+a:visited:focus,
+a:link:active,
+a:visited:active {
     text-decoration: underline;
 }
-a:link:focus, a:visited:focus {
-    outline: 1px dotted;
-}
-a:link:active, a:visited:active {
-    color: #c00; /* §colour */
-}
 
 
 /*____________ misc ____________*/
@@ -152,24 +195,33 @@ img {
     background-color: transparent;
     font-style: italic;
 }
+img,
+object {
+    max-width: 100%;
+}
 
 hr {
-    border-style: solid;
-    border-width: 1px 0 0;
-    text-align: center;
+    border-top: solid __border__;
+    border-bottom: solid __background__;
+    border-width: 1px 0;
     height: 0;
     width: 100%;
+    text-align: center;
     clear: both;
 }
 
-acronym, abbr {
+acronym,
+abbr {
     cursor: help;
     border-bottom: 1px dotted;
     font-style: normal;
 }
 
-pre, code, samp, kbd {
-    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Liberation Mono", Monaco, "Courier New", monospace;
+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;
@@ -177,18 +229,21 @@ pre, code, samp, kbd {
 }
 pre {
     overflow: auto;
+    word-wrap: normal;
 }
 
 blockquote {
-    padding: 0 1.25em;
+    padding: 0 .5em;
     border: solid __border__;
     border-width: 0 0 0 .25em;
 }
-q:before, q:after {
+q:before,
+q:after {
     content: '';
 }
 
-sub, sup {
+sub,
+sup {
     font-size: .8em;
     line-height: 1;
 }
@@ -201,6 +256,8 @@ sup {
 
 /*____________ forms ____________*/
 
+/* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */
+
 form {
     display: inline;
     margin: 0;
@@ -218,46 +275,107 @@ label {
     vertical-align: middle;
     cursor: pointer;
 }
-input, textarea, button,
-select, optgroup, option {
+
+input,
+textarea,
+button,
+select,
+optgroup,
+option {
     font: inherit;
-    color: inherit;
-    /* background-color destroys button look */
+    font-weight: normal;
+    color: #333;
+    background-color: #fff;
     line-height: 1;
     margin: 0;
     vertical-align: middle;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
 }
-input[type=text], input[type=password], textarea {
-    padding: .1em;
+
+optgroup {
+    font-style: italic;
+    font-weight: bold;
 }
-input[type=radio], input[type=checkbox], input.check {
+option {
+    font-style: normal;
+    font-weight: normal;
+}
+
+input,
+textarea,
+select {
+    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 {
+    border-color: #999;
+}
+input[type=radio],
+input[type=checkbox] {
     padding: 0;
-}
-input[type=submit], input.button, button {
+    border-width: 0;
+    box-shadow: none;
+}
+
+/* all types of buttons */
+input[type=submit],
+input.button,
+a.button,
+button,
+.qq-upload-button {
+    color: #333;
+    background-color: #eee;
+    background: -moz-linear-gradient(   top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
+    background: -webkit-linear-gradient(top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
+    background: -o-linear-gradient(     top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
+    background: -ms-linear-gradient(    top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
+    background: linear-gradient(        top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    padding: .1em .5em;
     cursor: pointer;
 }
-input[disabled], button[disabled],
-input[readonly], button[readonly] {
-    cursor: auto;
-}
-optgroup { font-style: italic; font-weight: bold; }
-option   { font-style: normal; font-weight: normal; }
-
 
-/*____________ general classes ____________*/
-
-div.clearer {
-    /* additional to what's already in lib/styles/style.css: */
-    font-size: 1px;
-    visibility: hidden;
+input[type=submit]:hover,
+input[type=submit]:active,
+input[type=submit]:focus,
+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: -moz-linear-gradient(   top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #cccccc 99%);
+    background: -webkit-linear-gradient(top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
+    background: -o-linear-gradient(     top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #cccccc 99%);
+    background: -ms-linear-gradient(    top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #cccccc 99%);
+    background: linear-gradient(        top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
+}
+
+input::-moz-focus-inner,
+button::-moz-focus-inner {
+    border: 0;
+    padding: 0;
 }
 
-.a11y {
-    position: absolute;
-    left: -9000px;
-    top: -4000px;
-    width: 0;
-    height: 0;
-    overflow: hidden;
-    display: inline;
+input[disabled],
+button[disabled],
+input[readonly],
+button[readonly] {
+    cursor: auto;
 }
+
diff --git a/css/content.css b/css/content.css
index 57c313d6c..4e9f8cbe1 100644
--- a/css/content.css
+++ b/css/content.css
@@ -3,6 +3,7 @@
  *
  * @author Anika Henke <anika@selfthinker.org>
  * @author Andreas Gohr <andi@splitbrain.org>
+ * @author Clarence Lee <clarencedglee@gmail.com>
  */
 
 
@@ -24,25 +25,58 @@
 
 /*____________ images ____________*/
 
-/* embedded images (styles are already partly set in lib/styles/style.css) */
-.dokuwiki img.media       { }
-.dokuwiki img.medialeft   { margin: .5em 1.5em .5em 0; }
-.dokuwiki img.mediaright  { margin: .5em 0 .5em 1.5em; }
-.dokuwiki img.mediacenter { margin: .5em auto; }
+/* embedded images (styles are already partly set in lib/styles/all.css) */
+.dokuwiki img.media {
+}
+.dokuwiki img.medialeft {
+    margin: .5em 1.5em .5em 0;
+}
+.dokuwiki img.mediaright {
+    margin: .5em 0 .5em 1.5em;
+}
+.dokuwiki img.mediacenter {
+    margin: .5em auto;
+}
+
+
+/*____________ lists ____________*/
+
+.dokuwiki #dokuwiki__content ul li,
+.dokuwiki #dokuwiki__aside ul li {
+    color: __text_alt__;
+}
+.dokuwiki #dokuwiki__content ol li,
+.dokuwiki #dokuwiki__aside ol li {
+    color: __text_neu__;
+}
+.dokuwiki #dokuwiki__content li .li,
+.dokuwiki #dokuwiki__aside li .li {
+    color: __text__;
+}
 
 
 /*____________ tables ____________*/
 
+.dokuwiki div.table {
+    width: 100%;
+    overflow-x: auto;
+    margin-bottom: 1.4em;
+}
+.dokuwiki div.table table {
+    margin-bottom: 0;
+}
+
 .dokuwiki table.inline {
     min-width: 50%;
+    border-width: 0;
 }
 .dokuwiki table.inline th,
 .dokuwiki table.inline td {
-    border: 1px solid __text_alt__;
+    border: 1px solid __border__;
 }
 .dokuwiki table.inline th {
     color: inherit;
-    background-color: __background_neu__;
+    background-color: __background_alt__;
 }
 .dokuwiki table.inline td {
 }
@@ -62,7 +96,7 @@
 .dokuwiki samp,
 .dokuwiki kbd {
     background-color: __background_alt__;
-    color: inherit;
+    color: __text__;
 }
 /* fix if background-color hides underlining */
 .dokuwiki em.u code {
@@ -70,7 +104,7 @@
 }
 .dokuwiki pre {
     border: 1px solid __border__;
-    padding: 0 .2em;
+    padding: .75em 1em;
 }
 /* for code in <file> */
 .dokuwiki pre.file {
@@ -84,19 +118,31 @@
 .dokuwiki dl.code dt,
 .dokuwiki dl.file dt {
     background-color: __background_alt__;
-    border: solid __border__;
-    border-width: 1px 1px 0;
+    background: -moz-linear-gradient(   top, __background__ 0%, __background_alt__ 100%);
+    background: -webkit-linear-gradient(top, __background__ 0%, __background_alt__ 100%);
+    background: -o-linear-gradient(     top, __background__ 0%, __background_alt__ 100%);
+    background: -ms-linear-gradient(    top, __background__ 0%, __background_alt__ 100%);
+    background: linear-gradient(        top, __background__ 0%, __background_alt__ 100%);
     color: inherit;
-    display: inline;
-    padding: 0 .5em;
-    margin-left: 1em;
+    border: 1px solid __border__;
+    border-bottom-color: __background_alt__;
+    border-top-left-radius: .3em;
+    border-top-right-radius: .3em;
+    padding: .3em .6em .1em;
+    margin-bottom: -1px;
+    float: left;
 }
 .dokuwiki dl.code dt a,
 .dokuwiki dl.file dt a {
+    background-color: transparent;
+    font-size: 0.875em;
+    font-weight: normal;
+    display: block;
+    min-height: 16px;
 }
-
 .dokuwiki dl.code dd,
 .dokuwiki dl.file dd {
     margin: 0;
+    clear: left;
 }
 
diff --git a/css/design.css b/css/design.css
index cfed4f078..39d793f99 100644
--- a/css/design.css
+++ b/css/design.css
@@ -4,87 +4,56 @@
  *
  * @author Anika Henke <anika@selfthinker.org>
  * @author Andreas Gohr <andi@splitbrain.org>
+ * @author Clarence Lee <clarencedglee@gmail.com>
  */
 
-
 /* header
 ********************************************************************/
 
 #dokuwiki__header {
-    margin: 1em 0 0;
-}
-#IE7 #dokuwiki__header {
-    margin-top: 2em;
+    padding: 2em 0 1.5em;
 }
 
-#dokuwiki__header .headings {
-    margin-bottom: 2.1em;
+#dokuwiki__header .headings,
+#dokuwiki__header .tools {
+    margin-bottom: 1.5em;
+    width: 49%;
+}
+#dokuwiki__header h1 img {
+    float: left;
+    margin-right: .5em;
+}
+#dokuwiki__header h1 span {
+    display: block;
+    padding-top: 10px;
 }
 #dokuwiki__header h1 {
-    margin-bottom: 0;
+    margin: 0;
     font-size: 1.5em;
+    font-weight: normal;
 }
 #dokuwiki__header h1 a {
     text-decoration: none;
-    color: #00c;
+    color: __text__;
     background-color: inherit;
 }
-#dokuwiki__header p.claim {
-    margin-bottom: 0;
+#dokuwiki__header h1 a:hover,
+#dokuwiki__header h1 a:active,
+#dokuwiki__header h1 a:focus {
 }
-#dokuwiki__header h2 {
+#dokuwiki__header p.claim {
     margin-bottom: 0;
-    font-size: 1.125em;
+    font-size: 0.875em;
 }
 
 #dokuwiki__header .tools {
-    margin-bottom: 2.1em;
-}
-#dokuwiki__header .tools ul {
-    margin-bottom: 0;
-}
-#dokuwiki__header .tools ul li {
-    display: inline;
-}
-
-#dokuwiki__header form.search {
-    margin: .5em 0 0;
-    display: block;
-}
-#dokuwiki__header form.search #qsearch__in {
-    width: 12em;
-    margin-right: .5em;
-}
-
-#dokuwiki__header div.breadcrumbs {
-    margin-bottom: .3em;
-}
-#dokuwiki__header div.breadcrumbs a {
-    color: __existing__;
-    background-color: inherit;
+    margin-top: .2em;
 }
 
 
 /* tools
 ********************************************************************/
 
-/* make wiki links look the same as tool links in tool bars */
-#dokuwiki__usertools a.wikilink1,
-#dokuwiki__pagetools a.wikilink1,
-#dokuwiki__usertools a.wikilink2,
-#dokuwiki__pagetools a.wikilink2 {
-    color: #00c;
-    border-bottom-width: 0;
-}
-#dokuwiki__usertools a.wikilink2:hover,
-#dokuwiki__pagetools a.wikilink2:hover,
-#dokuwiki__usertools a.wikilink2:active,
-#dokuwiki__pagetools a.wikilink2:active,
-#dokuwiki__usertools a.wikilink2:focus,
-#dokuwiki__pagetools a.wikilink2:focus {
-    text-decoration: underline;
-}
-
 /* highlight selected tool */
 .mode_admin a.action.admin,
 .mode_login a.action.login,
@@ -98,61 +67,112 @@
     font-weight: bold;
 }
 
+#dokuwiki__header .tools ul {
+    padding-left: 0;
+    margin-bottom: 0;
+}
+#dokuwiki__header .tools li {
+    font-size: 0.875em;
+    margin-left: 1em;
+    list-style: none;
+    display: inline;
+}
+#dokuwiki__header .tools form.search div.ajax_qsearch li {
+    font-size: 1em;
+    margin-left: 0;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#dokuwiki__header .mobileTools {
+    display: none; /* hide mobile tools dropdown to only show in mobile view */
+}
+
 /*____________ user tools ____________*/
 
 #dokuwiki__usertools {
     position: absolute;
-    top: 0;
-    right: 0;
-    border-bottom: 1px solid __border__;
-    background-color: __background_alt__;
+    top: .5em;
+    right: .5em;
+    text-align: right;
     width: 100%;
 }
-#dokuwiki__usertools ul,
-#dokuwiki__pagetools ul {
-    /* imitate #dokuwiki__site */
+#dokuwiki__usertools ul {
     margin: 0 auto;
-    max-width: 64em;
-    padding: 0 1em;
-}
-#IE6 #dokuwiki__usertools ul {
-    width: 100%;
+    padding: 0;
+    max-width: __site_width__;
 }
 #dokuwiki__usertools ul li.user {
-    float: left;
-    margin-left: 0;
 }
 
-/*____________ page tools ____________*/
 
-#dokuwiki__pagetools {
-    position: fixed;
-    bottom: 0;
-    left: 0;
+/*____________ site tools ____________*/
+
+#dokuwiki__sitetools {
+    text-align: right;
+}
+
+#dokuwiki__sitetools form.search {
+    display: block;
+    font-size: 0.875em;
+    position: relative;
+}
+#dokuwiki__sitetools form.search input.edit {
+    width: 18em;
+    padding: .35em 22px .35em .1em;
+}
+#dokuwiki__sitetools form.search input.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;
+}
+
+#dokuwiki__sitetools ul {
+    margin-top: 0.5em;
+}
+#dokuwiki__sitetools li {
+}
+
+/*____________ breadcrumbs ____________*/
+
+.dokuwiki div.breadcrumbs {
     border-top: 1px solid __border__;
-    background-color: __background_alt__;
-    width: 100%;
-    z-index: 10;
+    border-bottom: 1px solid __background__;
+    margin-bottom: .5em;
+    font-size: 0.875em;
+    clear: both;
 }
-#IE6 #dokuwiki__content {
-    margin-bottom: 1.4em;
+.dokuwiki div.breadcrumbs div {
+    padding: .1em .35em;
 }
-#dokuwiki__pagetools ul li {
-    display: inline;
-    margin: 0 1.5em 0 0;
+
+.dokuwiki div.breadcrumbs div:only-child {
+    border-top: 1px solid __background__;
+    border-bottom: 1px solid __border__;
 }
-#dokuwiki__pagetools ul li a.action.top {
-    float: right;
+.dokuwiki div.breadcrumbs div:first-child {
+    border-top: 1px solid __background__;
 }
-#IE6 #dokuwiki__pagetools ul,
-#IE7 #dokuwiki__pagetools ul {
-    position: relative;
+#IE7 .dokuwiki div.breadcrumbs div,
+#IE8 .dokuwiki div.breadcrumbs div {
+    border-bottom: 1px solid __border__;
 }
-#IE6 #dokuwiki__pagetools ul li a.action.top,
-#IE7 #dokuwiki__pagetools ul li a.action.top {
-    position: absolute;
-    top: 0;
-    right: 0;
+.dokuwiki div.breadcrumbs div:last-child {
+    border-bottom: 1px solid __border__;
+}
+
+.dokuwiki div.breadcrumbs a {
+    color: __link__;
+    background-color: inherit;
+}
+.dokuwiki div.breadcrumbs .bcsep {
+    font-size: 0.75em;
 }
 
 
@@ -160,58 +180,258 @@
 ********************************************************************/
 
 #dokuwiki__aside {
-    padding-top: .4em;
-    line-height: 1.2;
+}
+#dokuwiki__aside .pad {
+    font-size: 0.875em;
+    overflow: hidden;
+    word-wrap: break-word;
 }
 
 /* make sidebar more condensed */
 
-#dokuwiki__aside h1 { margin-bottom: .222em; }
-#dokuwiki__aside h2 { margin-bottom: .333em; }
-#dokuwiki__aside h3 { margin-bottom: .444em; }
-#dokuwiki__aside h4 { margin-bottom: .5em; }
-#dokuwiki__aside h5 { margin-bottom: .5714em; }
+#dokuwiki__aside h1 {
+    margin-bottom: .222em;
+}
+#dokuwiki__aside h2 {
+    margin-bottom: .333em;
+}
+#dokuwiki__aside h3 {
+    margin-bottom: .444em;
+}
+#dokuwiki__aside h4 {
+    margin-bottom: .5em;
+}
+#dokuwiki__aside h5 {
+    margin-bottom: .5714em;
+}
 
-#dokuwiki__aside p, #dokuwiki__aside ul, #dokuwiki__aside ol, #dokuwiki__aside dl,
-#dokuwiki__aside pre, #dokuwiki__aside table, #dokuwiki__aside fieldset,
-#dokuwiki__aside hr, #dokuwiki__aside blockquote, #dokuwiki__aside address {
+#dokuwiki__aside p,
+#dokuwiki__aside ul,
+#dokuwiki__aside ol,
+#dokuwiki__aside dl,
+#dokuwiki__aside pre,
+#dokuwiki__aside table,
+#dokuwiki__aside fieldset,
+#dokuwiki__aside hr,
+#dokuwiki__aside blockquote,
+#dokuwiki__aside address {
     margin-bottom: .7em;
 }
 
-#dokuwiki__aside ul, #dokuwiki__aside ol {
+#dokuwiki__aside ul,
+#dokuwiki__aside ol {
     padding-left: 0;
 }
-#dokuwiki__aside li ul, #dokuwiki__aside li ol {
+#dokuwiki__aside li ul,
+#dokuwiki__aside li ol {
     margin-bottom: 0;
 }
 
+#dokuwiki__aside a:link,
+#dokuwiki__aside a:visited {
+    color: __link__;
+    background-color: inherit;
+}
+
 
 /* content
 ********************************************************************/
 
-.dokuwiki .page {
+#dokuwiki__content {
+}
+
+.dokuwiki .pageId {
+    position: absolute;
+    top: -2.3em;
+    right: -1em;
+    overflow: hidden;
+    padding: 1em 1em 0;
+}
+.dokuwiki .pageId span {
+    font-size: 0.875em;
+    border: solid __background_alt__;
+    border-width: 1px 1px 0;
+    background-color: __background__;
+    color: __text_alt__;
+    padding: .1em .35em;
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+    box-shadow: 0 0 .5em #999;
+    display: block;
+}
+
+.dokuwiki div.page {
+    background: __background__;
+    color: inherit;
+    border: 1px solid #eee;
+    box-shadow: 0 0 .5em #999;
+    border-radius: 2px;
+    padding: 2em;
+    margin-bottom: .5em;
+    overflow: hidden;
+    word-wrap: break-word;
+}
+
+.dokuwiki .docInfo {
+    font-size: 0.875em;
+    text-align: right;
 }
 
 /*____________ misc ____________*/
 
-/* license note in footer and under edit window */
+/* license note under edit window */
 .dokuwiki div.license {
     font-size: 93.75%;
 }
+/* license note in footer */
+.dokuwiki #dokuwiki__footer div.license {
+    font-size: 100%;
+}
 
-#IE6 .dokuwiki input.button, #IE6 .dokuwiki button,
-#IE7 .dokuwiki input.button, #IE7 .dokuwiki button {
+#IE7 .dokuwiki input.button,
+#IE7 .dokuwiki button {
     line-height: 1.4;
 }
 
+#acl__tree li {
+    margin: 0;
+}
+
+.dokuwiki #dokuwiki__content span.curid a {
+    font-weight: normal;
+}
+.dokuwiki #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;
+}
+.dokuwiki div.toolbar button.toolbutton:first-child {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    border-left-width: 1px;
+}
+.dokuwiki div.toolbar button.toolbutton:last-child {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+.dokuwiki div.section_highlight {
+    margin: -3em -2em -.01em -2em;
+    padding: 3em 1em .01em 1em;
+    border-width: 0 1em;
+}
+
+.dokuwiki textarea.edit {
+    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Liberation Mono", Monaco, "Courier New", monospace;
+}
+
+.dokuwiki div.preview {
+    margin: 0 -2em;
+    padding: 2em;
+}
+
+
+/*____________ changes to _toc ____________*/
+
+.dokuwiki div.toc {
+    margin:  -2em -2em .5em 1.4em;
+    width: __sidebar_width__;
+    border-left: 1px solid __border__;
+    background: __background__;
+    color: inherit;
+}
+
+.dokuwiki div.tocheader {
+    padding: .5em 1em;
+    margin-bottom: 0;
+    font-size: .875em;
+    letter-spacing: .1em;
+}
+
+.dokuwiki .toc span.toc_open,
+.dokuwiki .toc span.toc_close {
+    background: transparent url(images/toc-arrows.png) 0 0;
+    width: 8px;
+    height: 5px;
+    margin: .4em 0 0;
+}
+.dokuwiki .toc span.toc_open {
+    background-position: 0 -5px;
+}
+
+.dokuwiki .toc span.toc_open span,
+.dokuwiki .toc span.toc_close span {
+    display: none;
+}
+
+
+.dokuwiki #toc__inside {
+    font-size: 0.875em;
+    padding: .5em 1em 1em;
+}
+.dokuwiki #toc__inside ul {
+    padding: 0 0 0 1.2em;
+}
+.dokuwiki #toc__inside ul li {
+    list-style-image: url(images/toc-bullet.png);
+}
+.dokuwiki #toc__inside ul li.clear {
+    list-style: none;
+}
+.dokuwiki #toc__inside ul li div.li {
+    padding: .2em 0;
+}
+
+
+/*____________ changes to _imgdetail ____________*/
+
+#dokuwiki__detail {
+    padding: 0;
+}
+#dokuwiki__detail img {
+    float: none;
+    margin-bottom: 1.4em;
+}
+#dokuwiki__detail div.img_detail {
+    float: none;
+}
+
+#dokuwiki__detail div.img_detail dl {
+    overflow: hidden;
+}
+#dokuwiki__detail div.img_detail dl dt {
+    float: left;
+    width: 9em;
+    text-align: right;
+    clear: left;
+}
+#dokuwiki__detail div.img_detail dl dd {
+    margin-left: 9.5em;
+}
+
+
 /*____________ JS popup ____________*/
 
 .JSpopup {
     background-color: __background__;
     color: __text__;
     border: 1px solid __border__;
-    line-height: 1.2;
-    padding: 0 .2em;
+    box-shadow: .1em .1em .1em __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,
@@ -224,27 +444,17 @@
 ********************************************************************/
 
 .dokuwiki .wrapper {
-    margin-bottom: 2.8em;
-}
-#IE6 .dokuwiki .wrapper {
     margin-bottom: 1.4em;
 }
 
 #dokuwiki__footer {
     margin-bottom: 1em;
 }
-#IE6 #dokuwiki__footer,
-#IE7 #dokuwiki__footer {
-    height: 1%;
+#dokuwiki__footer .pad {
+    font-size: 0.875em;
 }
-#dokuwiki__footer .doc {
-    float: left;
-}
-#dokuwiki__footer .top {
-    float: right;
-}
-#dokuwiki__footer .license {
-    clear: both;
+#dokuwiki__footer div.license {
+    text-align: center;
 }
 #dokuwiki__footer .license img {
     margin: 0 .5em 0 0;
diff --git a/css/mobile.css b/css/mobile.css
new file mode 100644
index 000000000..38242f5be
--- /dev/null
+++ b/css/mobile.css
@@ -0,0 +1,192 @@
+/**
+ * This file provides styles for mobile devices
+ * and smaller screens (up to 480px and 768px width).
+ *
+ * @author Anika Henke <anika@selfthinker.org>
+ */
+
+/* up to 768px screen widths
+********************************************************************/
+@media only screen and (max-width: 768px), only screen and (max-device-width: 960px) {
+
+/* structure */
+#dokuwiki__aside {
+    width: 100%;
+    float: none;
+}
+#dokuwiki__aside .pad {
+    margin: 0 0 .5em;
+}
+
+.hasSidebar #dokuwiki__content {
+    float: none;
+    margin-left: 0;
+    width: 100%;
+}
+.hasSidebar #dokuwiki__content .pad {
+    margin-left: 0;
+}
+
+/* toc */
+.dokuwiki div.toc {
+    float: none;
+    margin: 0 0 1em 0;
+    width: auto;
+    border-left-width: 0;
+    border-bottom: 1px solid __border__;
+}
+.dokuwiki div.tocheader {
+    padding: 0 0 .5em;
+}
+.dokuwiki #toc__inside {
+    padding: .2em 0 .5em;
+}
+
+/* page */
+.dokuwiki div.page {
+    padding: 1em;
+}
+.dokuwiki .pageId span {
+    border-width: 0;
+    background-color: __background_site__;
+    color: __text_alt__;
+    box-shadow: 0 0 0;
+}
+
+/* _edit */
+.dokuwiki div.section_highlight {
+    margin: -3em -1em -.01em -1em;
+    padding: 3em .5em .01em .5em;
+    border-width: 0 .5em;
+}
+.dokuwiki div.preview {
+    margin: 0 -1em;
+    padding: 1em;
+}
+
+
+} /* /@media */
+
+
+/* up to 480px screen widths
+********************************************************************/
+@media only screen and (max-width: 480px), only screen and (max-device-width: 960px) {
+
+/*____________ structure ____________*/
+
+#dokuwiki__site {
+    max-width: 100%;
+}
+#dokuwiki__site .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;
+}
+#dokuwiki__header ul.a11y.skip li {
+    margin-left: .35em;
+    display: inline;
+}
+
+#dokuwiki__header .headings,
+#dokuwiki__header .tools {
+    float: none;
+    text-align: left;
+    width: auto;
+    margin-bottom: .5em;
+}
+#dokuwiki__sitetools {
+    text-align: left;
+}
+#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%;
+}
+#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%;
+}
+#dokuwiki__header .mobileTools select {
+    padding: .3em .1em;
+    width: 100% !important;
+}
+
+
+/*____________ content ____________*/
+
+.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;
+}
+.dokuwiki label.block span {
+    display: block;
+}
+
+/* _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.css b/css/pagetools.css
new file mode 100644
index 000000000..a25032f0b
--- /dev/null
+++ b/css/pagetools.css
@@ -0,0 +1,208 @@
+/**
+ * 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 {
+    min-height: 190px; /* 30 (= height of icons) x 6 (= maximum number of possible tools) + 2x5 */
+}
+#dokuwiki__usertools {
+    /* move the tools just outside of the site */
+    right: 40px;
+}
+
+
+#dokuwiki__pagetools {
+    position: absolute;
+    right: -40px;
+    /* on same vertical level as first headline, because .page has 2em padding */
+    top: 2em;
+}
+
+#dokuwiki__pagetools div.tools {
+    position: fixed;
+}
+
+#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;
+}
+
+#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: 5px 40px 5px 5px;
+    background-image: url(images/pagetools-sprite.png);
+    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;
+}
+
+/* hide labels accessibly when neither on hover nor on focus */
+#dokuwiki__pagetools ul li a span {
+    position: absolute;
+    left: -99999px;
+}
+
+/* show all tools on hover and individual tools on focus */
+#dokuwiki__pagetools:hover ul,
+#dokuwiki__pagetools ul li a:focus {
+    background-color: __background__;
+    border-color: __border__;
+    border-radius: 2px;
+    box-shadow: 2px 2px 2px __text_alt__;
+}
+
+#dokuwiki__pagetools:hover ul li a span,
+#dokuwiki__pagetools ul li a:focus span {
+    display: inline;
+    position: static;
+}
+
+#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: __background_alt__;
+}
+
+/*____________ all available icons in sprite ____________*/
+
+#dokuwiki__pagetools ul li a.edit {
+    background-position: right 0;
+}
+#dokuwiki__pagetools ul li a.edit:hover,
+#dokuwiki__pagetools ul li a.edit:active,
+#dokuwiki__pagetools ul li a.edit:focus {
+    background-position: right -45px;
+}
+
+#dokuwiki__pagetools ul li a.create {
+    background-position: right -90px;
+}
+#dokuwiki__pagetools ul li a.create:hover,
+#dokuwiki__pagetools ul li a.create:active,
+#dokuwiki__pagetools ul li a.create:focus {
+    background-position: right -135px;
+}
+
+#dokuwiki__pagetools ul li a.show {
+    background-position: right -270px;
+}
+#dokuwiki__pagetools ul li a.show:hover,
+#dokuwiki__pagetools ul li a.show:active,
+#dokuwiki__pagetools ul li a.show:focus {
+    background-position: right -315px;
+}
+
+#dokuwiki__pagetools ul li a.source {
+    background-position: right -360px;
+}
+#dokuwiki__pagetools ul li a.source:hover,
+#dokuwiki__pagetools ul li a.source:active,
+#dokuwiki__pagetools ul li a.source:focus {
+    background-position: right -405px;
+}
+
+#dokuwiki__pagetools ul li a.draft {
+    background-position: right -180px;
+}
+#dokuwiki__pagetools ul li a.draft:hover,
+#dokuwiki__pagetools ul li a.draft:active,
+#dokuwiki__pagetools ul li a.draft:focus {
+    background-position: right -225px;
+}
+
+#dokuwiki__pagetools ul li a.revs {
+    background-position: right -540px;
+}
+#dokuwiki__pagetools ul li a.revs:hover,
+#dokuwiki__pagetools ul li a.revs:active,
+#dokuwiki__pagetools ul li a.revs:focus,
+.mode_revisions #dokuwiki__pagetools ul li a.revs {
+    background-position: right -585px;
+}
+
+#dokuwiki__pagetools ul li a.backlink {
+    background-position: right -630px;
+}
+#dokuwiki__pagetools ul li a.backlink:hover,
+#dokuwiki__pagetools ul li a.backlink:active,
+#dokuwiki__pagetools ul li a.backlink:focus,
+.mode_backlink #dokuwiki__pagetools ul li a.backlink {
+    background-position: right -675px;
+}
+
+#dokuwiki__pagetools ul li a.top {
+    background-position: right -810px;
+}
+#dokuwiki__pagetools ul li a.top:hover,
+#dokuwiki__pagetools ul li a.top:active,
+#dokuwiki__pagetools ul li a.top:focus {
+    background-position: right -855px;
+}
+
+#dokuwiki__pagetools ul li a.revert {
+    background-position: right -450px;
+}
+#dokuwiki__pagetools ul li a.revert:hover,
+#dokuwiki__pagetools ul li a.revert:active,
+#dokuwiki__pagetools ul li a.revert:focus,
+.mode_revert #dokuwiki__pagetools ul li a.revert {
+    background-position: right -495px;
+}
+
+#dokuwiki__pagetools ul li a.subscribe {
+    background-position: right -720px;
+}
+#dokuwiki__pagetools ul li a.subscribe:hover,
+#dokuwiki__pagetools ul li a.subscribe:active,
+#dokuwiki__pagetools ul li a.subscribe:focus,
+.mode_subscribe #dokuwiki__pagetools ul li a.subscribe {
+    background-position: right -765px;
+}
+
+#dokuwiki__pagetools ul li a.mediaManager {
+    background-position: right -900px;
+}
+#dokuwiki__pagetools ul li a.mediaManager:hover,
+#dokuwiki__pagetools ul li a.mediaManager:active,
+#dokuwiki__pagetools ul li a.mediaManager:focus {
+    background-position: right -945px;
+}
+
+#dokuwiki__pagetools ul li a.back {
+    background-position: right -990px;
+}
+#dokuwiki__pagetools ul li a.back:hover,
+#dokuwiki__pagetools ul li a.back:active,
+#dokuwiki__pagetools ul li a.back:focus {
+    background-position: right -1035px;
+}
diff --git a/css/print.css b/css/print.css
index 9171bc9ae..d20d0f464 100644
--- a/css/print.css
+++ b/css/print.css
@@ -116,6 +116,10 @@ div.clearer {
 #dokuwiki__header h1 a {
     text-decoration: none;
 }
+#dokuwiki__header h1 img {
+    float: left;
+    margin-right: .5em;
+}
 .dokuwiki div.footnotes {
     clear: both;
     border-top: 1pt solid #000;
diff --git a/css/rtl.css b/css/rtl.css
index 8b82a45e1..790545a1b 100644
--- a/css/rtl.css
+++ b/css/rtl.css
@@ -33,78 +33,6 @@ caption, legend {
     right: -9000px;
 }
 
-/*____________ structure ____________*/
-
-#dokuwiki__header .headings {
-    float: right;
-}
-#dokuwiki__header .tools {
-    float: left;
-    text-align: left;
-}
-
-.mode_show #dokuwiki__aside {
-    float: right;
-}
-#dokuwiki__aside .pad {
-    margin: 0 0 0 1.5em;
-}
-
-.mode_show #dokuwiki__content {
-    float: left;
-    margin-left: 0;
-    margin-right: -__sidebar_width__;
-}
-.mode_show #dokuwiki__content .pad {
-    margin-left: 0;
-    margin-right: __sidebar_width__;
-}
-
-/*____________ design ____________*/
-
-#dokuwiki__header form.search #qsearch__in {
-    margin-right: 0;
-    margin-left: .5em;
-}
-
-#dokuwiki__usertools ul li.user {
-    float: right;
-    margin-right: 0;
-}
-#dokuwiki__pagetools ul li a.action.top {
-    float: left;
-}
-
-#dokuwiki__aside ul, #dokuwiki__aside ol {
-    padding-right: 0;
-}
-
-/*____________ content ____________*/
-
-/* section indenting
-.dokuwiki .page h1 {margin-left: 0; margin-right: 0;}
-.dokuwiki .page h2 {margin-left: 0; margin-right: .666em;}
-.dokuwiki .page h3 {margin-left: 0; margin-right: 1.776em;}
-.dokuwiki .page h4 {margin-left: 0; margin-right: 3em;}
-.dokuwiki .page h5 {margin-left: 0; margin-right: 4.5712em;}
-.dokuwiki .page div.level1 {margin-left: 0; margin-right: 0;}
-.dokuwiki .page div.level2 {margin-left: 0; margin-right: 1em;}
-.dokuwiki .page div.level3 {margin-left: 0; margin-right: 2em;}
-.dokuwiki .page div.level4 {margin-left: 0; margin-right: 3em;}
-.dokuwiki .page div.level5 {margin-left: 0; margin-right: 4em;}
-*/
-
-.dokuwiki dl.code dt,
-.dokuwiki dl.file dt {
-    margin-left: 0;
-    margin-right: 1em;
-}
-
-.JSpopup ul,
-.JSpopup ol {
-    padding-right: 0;
-}
-
 
 /*____________ _imgdetail ____________*/
 
@@ -199,12 +127,12 @@ caption, legend {
 .dokuwiki .toc span.toc_open,
 .dokuwiki .toc span.toc_close {
     float: left;
-    margin: 0 0 0 .2em;
 }
 .dokuwiki #toc__inside ul ul {
     padding-left: 0;
     padding-right: 1em;
 }
+
 .dokuwiki ul.idx {
     padding-right: 0;
 }
@@ -307,3 +235,337 @@ form#subscribe__form fieldset {
 /*____________ includes ____________*/
 
 
+/*____________ structure ____________*/
+
+#dokuwiki__header .headings {
+    float: right;
+    text-align: right;
+}
+#dokuwiki__header .tools {
+    float: left;
+    text-align: left;
+}
+
+#dokuwiki__aside {
+    float: right;
+}
+#dokuwiki__aside .pad {
+    margin: 0 0 0 1.5em;
+}
+
+.hasSidebar #dokuwiki__content {
+    float: left;
+    margin-left: 0;
+    margin-right: -__sidebar_width__;
+}
+.hasSidebar #dokuwiki__content .pad {
+    margin-left: 0;
+    margin-right: __sidebar_width__;
+}
+
+/*____________ design ____________*/
+
+#dokuwiki__header h1 img {
+    float: right;
+    margin-left: .5em;
+    margin-right: 0;
+}
+
+#dokuwiki__sitetools form.search input.edit {
+    padding: .35em .1em .35em 22px;
+}
+#dokuwiki__sitetools form.search input.button {
+    background-position: 5px 0;
+    margin-left: 0;
+    margin-right: -20px;
+}
+
+#dokuwiki__usertools {
+    text-align: left;
+    left: 40px;
+    right: auto;
+}
+
+#dokuwiki__sitetools {
+    text-align: left;
+}
+
+#dokuwiki__aside ul, #dokuwiki__aside ol {
+    padding-right: 0;
+}
+
+.dokuwiki .pageId {
+    right: auto;
+    left: -1em;
+}
+
+.dokuwiki .docInfo {
+    text-align: left;
+}
+
+.dokuwiki div.toolbar 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.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;
+}
+
+.dokuwiki div.section_highlight {
+    margin-right: -2em;
+    border-right-width: 1em;
+}
+
+#dokuwiki__footer .license img {
+    margin: 0 0 0 .5em;
+}
+
+.dokuwiki div.toc {
+    margin: -2em 1.4em .5em -2em;
+    border-left-width: 0;
+    border-right: 1px solid __border__;
+}
+.dokuwiki #toc__inside ul {
+    padding: 0 1.5em 0 0;
+}
+
+#dokuwiki__detail div.img_detail dl dt {
+    float: right;
+    text-align: left;
+    clear: right;
+}
+#dokuwiki__detail div.img_detail dl dd {
+    margin-left: 0;
+    margin-right: 9.5em;
+}
+
+
+/*____________ pagetools ____________*/
+
+#dokuwiki__usertools {
+    right: auto;
+    left: 40px;
+}
+
+#dokuwiki__pagetools {
+    right: auto;
+    left: -40px;
+}
+
+#dokuwiki__pagetools ul {
+    right: auto;
+    left: 0;
+    text-align: left;
+}
+
+#dokuwiki__pagetools ul li a {
+    padding: 5px 5px 5px 40px;
+    background-position: left 0;
+}
+
+#dokuwiki__pagetools:hover ul,
+#dokuwiki__pagetools ul li a:focus {
+    box-shadow: -2px 2px 2px __text_alt__;
+}
+
+/* all available icons in sprite */
+#dokuwiki__pagetools ul li a.edit {
+    background-position: left 0;
+}
+#dokuwiki__pagetools ul li a.edit:hover,
+#dokuwiki__pagetools ul li a.edit:active,
+#dokuwiki__pagetools ul li a.edit:focus {
+    background-position: left -45px;
+}
+
+#dokuwiki__pagetools ul li a.create {
+    background-position: left -90px;
+}
+#dokuwiki__pagetools ul li a.create:hover,
+#dokuwiki__pagetools ul li a.create:active,
+#dokuwiki__pagetools ul li a.create:focus {
+    background-position: left -135px;
+}
+
+#dokuwiki__pagetools ul li a.show {
+    background-position: left -270px;
+}
+#dokuwiki__pagetools ul li a.show:hover,
+#dokuwiki__pagetools ul li a.show:active,
+#dokuwiki__pagetools ul li a.show:focus {
+    background-position: left -315px;
+}
+
+#dokuwiki__pagetools ul li a.source {
+    background-position: left -360px;
+}
+#dokuwiki__pagetools ul li a.source:hover,
+#dokuwiki__pagetools ul li a.source:active,
+#dokuwiki__pagetools ul li a.source:focus {
+    background-position: left -405px;
+}
+
+#dokuwiki__pagetools ul li a.draft {
+    background-position: left -180px;
+}
+#dokuwiki__pagetools ul li a.draft:hover,
+#dokuwiki__pagetools ul li a.draft:active,
+#dokuwiki__pagetools ul li a.draft:focus {
+    background-position: left -225px;
+}
+
+#dokuwiki__pagetools ul li a.revs {
+    background-position: left -540px;
+}
+#dokuwiki__pagetools ul li a.revs:hover,
+#dokuwiki__pagetools ul li a.revs:active,
+#dokuwiki__pagetools ul li a.revs:focus,
+.mode_revisions #dokuwiki__pagetools ul li a.revs {
+    background-position: left -585px;
+}
+
+#dokuwiki__pagetools ul li a.backlink {
+    background-position: left -630px;
+}
+#dokuwiki__pagetools ul li a.backlink:hover,
+#dokuwiki__pagetools ul li a.backlink:active,
+#dokuwiki__pagetools ul li a.backlink:focus,
+.mode_backlink #dokuwiki__pagetools ul li a.backlink {
+    background-position: left -675px;
+}
+
+#dokuwiki__pagetools ul li a.top {
+    background-position: left -810px;
+}
+#dokuwiki__pagetools ul li a.top:hover,
+#dokuwiki__pagetools ul li a.top:active,
+#dokuwiki__pagetools ul li a.top:focus {
+    background-position: left -855px;
+}
+
+#dokuwiki__pagetools ul li a.revert {
+    background-position: left -450px;
+}
+#dokuwiki__pagetools ul li a.revert:hover,
+#dokuwiki__pagetools ul li a.revert:active,
+#dokuwiki__pagetools ul li a.revert:focus,
+.mode_revert #dokuwiki__pagetools ul li a.revert {
+    background-position: left -495px;
+}
+
+#dokuwiki__pagetools ul li a.subscribe {
+    background-position: left -720px;
+}
+#dokuwiki__pagetools ul li a.subscribe:hover,
+#dokuwiki__pagetools ul li a.subscribe:active,
+#dokuwiki__pagetools ul li a.subscribe:focus,
+.mode_subscribe #dokuwiki__pagetools ul li a.subscribe {
+    background-position: left -765px;
+}
+
+#dokuwiki__pagetools ul li a.mediaManager {
+    background-position: left -900px;
+}
+#dokuwiki__pagetools ul li a.mediaManager:hover,
+#dokuwiki__pagetools ul li a.mediaManager:active,
+#dokuwiki__pagetools ul li a.mediaManager:focus {
+    background-position: left -945px;
+}
+
+#dokuwiki__pagetools ul li a.back {
+    background-position: left -990px;
+}
+#dokuwiki__pagetools ul li a.back:hover,
+#dokuwiki__pagetools ul li a.back:active,
+#dokuwiki__pagetools ul li a.back:focus {
+    background-position: left -1035px;
+}
+
+
+/*____________ content ____________*/
+
+/* section indenting
+.dokuwiki .page h1 {margin-left: 0; margin-right: 0;}
+.dokuwiki .page h2 {margin-left: 0; margin-right: .666em;}
+.dokuwiki .page h3 {margin-left: 0; margin-right: 1.776em;}
+.dokuwiki .page h4 {margin-left: 0; margin-right: 3em;}
+.dokuwiki .page h5 {margin-left: 0; margin-right: 4.5712em;}
+.dokuwiki .page div.level1 {margin-left: 0; margin-right: 0;}
+.dokuwiki .page div.level2 {margin-left: 0; margin-right: 1em;}
+.dokuwiki .page div.level3 {margin-left: 0; margin-right: 2em;}
+.dokuwiki .page div.level4 {margin-left: 0; margin-right: 3em;}
+.dokuwiki .page div.level5 {margin-left: 0; margin-right: 4em;}
+*/
+
+.dokuwiki dl.code dt,
+.dokuwiki dl.file dt {
+    margin-left: 0;
+    margin-right: 1em;
+}
+
+.JSpopup ul,
+.JSpopup ol {
+    padding-right: 0;
+}
+
+
+/*____________ mobile ____________*/
+
+@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
+
+
+.hasSidebar #dokuwiki__content,
+.hasSidebar #dokuwiki__content .pad {
+    margin-right: 0;
+}
+
+#dokuwiki__header ul.a11y.skip {
+    left: auto !important;
+    right: 0 !important;
+    float: left;
+    padding-right: 0;
+}
+#dokuwiki__header ul.a11y.skip li {
+    margin: 0 .35em 0 0;
+}
+
+#dokuwiki__header .headings,
+#dokuwiki__header .tools {
+    float: none;
+    text-align: right;
+    width: auto;
+}
+#dokuwiki__sitetools {
+    text-align: right;
+}
+
+#dokuwiki__sitetools form.search {
+    float: right;
+    margin: 0 0 .2em .2em;
+}
+
+#dokuwiki__header .mobileTools {
+    float: left;
+}
+
+.dokuwiki div.toc {
+    float: none;
+    margin: 0 0 1em 0;
+    border-right-width: 0;
+}
+
+.dokuwiki label.block {
+    text-align: right;
+}
+
+
+
+} /* /@media */
diff --git a/css/structure.css b/css/structure.css
index 14490a0b0..4e3a14be8 100644
--- a/css/structure.css
+++ b/css/structure.css
@@ -9,43 +9,30 @@ body {
 }
 #dokuwiki__site {
     margin: 0 auto;
-    max-width: 64em;
-    padding: 1.4em 1em;
+    max-width: __site_width__;
 }
 #dokuwiki__site .site {
+    padding: 0 .5em;
 }
 
 #dokuwiki__header {
+    width: 100%;
 }
 #dokuwiki__header .pad {
 }
     #dokuwiki__header .headings {
         float: left;
     }
-    #IE6 #dokuwiki__header .headings {
-        width: 50%;
-    }
     #dokuwiki__header .tools {
         float: right;
         text-align: right;
     }
-    #IE6 #dokuwiki__header .tools {
-        width: 50%;
-    }
 
 #dokuwiki__site .wrapper {
     position: relative;
 }
-#IE6 #dokuwiki__site .wrapper,
-#IE7 #dokuwiki__site .wrapper {
-    height: 1%;
-}
 
-    /* show sidebar only in show mode */
     #dokuwiki__aside {
-        display: none;
-    }
-    .mode_show #dokuwiki__aside {
         width: __sidebar_width__;
         float: left;
         position: relative;
@@ -55,13 +42,12 @@ body {
         margin: 0 1.5em 0 0;
     }
 
-    /* make content wider when there's no sidebar */
-    .mode_show #dokuwiki__content {
+    .hasSidebar #dokuwiki__content {
         float: right;
         margin-left: -__sidebar_width__;
         width: 100%;
     }
-    .mode_show #dokuwiki__content .pad {
+    .hasSidebar #dokuwiki__content .pad {
         margin-left: __sidebar_width__;
     }
 
diff --git a/detail.php b/detail.php
index 500890114..287827253 100644
--- a/detail.php
+++ b/detail.php
@@ -2,80 +2,143 @@
 /**
  * DokuWiki Image Detail Page
  *
- * @author Andreas Gohr <andi@splitbrain.org>
- * @author Anika Henke <anika@selfthinker.org>
+ * @author   Andreas Gohr <andi@splitbrain.org>
+ * @author   Anika Henke <anika@selfthinker.org>
+ * @license  GPL 2 (http://www.gnu.org/licenses/gpl.html)
  */
 
 // must be run from within DokuWiki
 if (!defined('DOKU_INC')) die();
+@require_once(dirname(__FILE__).'/tpl_functions.php'); /* include hook for template functions */
 
+$showSidebar = $conf['sidebar'] && page_exists($conf['sidebar']) && ($ACT=='show');
 ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $conf['lang']?>"
  lang="<?php echo $conf['lang']?>" dir="<?php echo $lang['direction'] ?>">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <title>
         <?php echo hsc(tpl_img_getTag('IPTC.Headline',$IMG))?>
         [<?php echo strip_tags($conf['title'])?>]
     </title>
     <?php tpl_metaheaders()?>
-    <link rel="shortcut icon" href="<?php echo ml('favicon.ico') ?>" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <?php echo tpl_favicon(array('favicon', 'mobile')) ?>
+    <?php _tpl_include('meta.html') ?>
 </head>
 
 <body>
-    <!--[if IE 6 ]><div id="IE6"><![endif]--><!--[if IE 7 ]><div id="IE7"><![endif]--><!--[if IE 8 ]><div id="IE8"><![endif]-->
-    <div id="dokuwiki__detail" class="dokuwiki">
-        <?php html_msgarea() ?>
-
-        <?php if($ERROR){ print $ERROR; }else{ ?>
-
-            <h1><?php echo hsc(tpl_img_getTag('IPTC.Headline',$IMG))?></h1>
-
-            <div class="content">
-                <?php tpl_img(900,700) ?>
-
-                <div class="img_detail">
-                    <h2><?php print nl2br(hsc(tpl_img_getTag('simple.title'))); ?></h2>
-
-                    <dl>
-                        <?php
-                            $t = tpl_img_getTag('Date.EarliestTime');
-                            if($t) print '<dt>'.$lang['img_date'].':</dt><dd>'.dformat($t).'</dd>';
-
-                            $t = tpl_img_getTag('File.Name');
-                            if($t) print '<dt>'.$lang['img_fname'].':</dt><dd>'.hsc($t).'</dd>';
-
-                            $t = tpl_img_getTag(array('Iptc.Byline','Exif.TIFFArtist','Exif.Artist','Iptc.Credit'));
-                            if($t) print '<dt>'.$lang['img_artist'].':</dt><dd>'.hsc($t).'</dd>';
-
-                            $t = tpl_img_getTag(array('Iptc.CopyrightNotice','Exif.TIFFCopyright','Exif.Copyright'));
-                            if($t) print '<dt>'.$lang['img_copyr'].':</dt><dd>'.hsc($t).'</dd>';
-
-                            $t = tpl_img_getTag('File.Format');
-                            if($t) print '<dt>'.$lang['img_format'].':</dt><dd>'.hsc($t).'</dd>';
-
-                            $t = tpl_img_getTag('File.NiceSize');
-                            if($t) print '<dt>'.$lang['img_fsize'].':</dt><dd>'.hsc($t).'</dd>';
-
-                            $t = tpl_img_getTag('Simple.Camera');
-                            if($t) print '<dt>'.$lang['img_camera'].':</dt><dd>'.hsc($t).'</dd>';
-
-                            $t = tpl_img_getTag(array('IPTC.Keywords','IPTC.Category','xmp.dc:subject'));
-                            if($t) print '<dt>'.$lang['img_keywords'].':</dt><dd>'.hsc($t).'</dd>';
-
-                        ?>
-                    </dl>
-                    <?php //Comment in for Debug// dbg(tpl_img_getTag('Simple.Raw'));?>
+    <?php /* with these Conditional Comments you can better address IE issues in CSS files,
+             precede CSS rules by #IE7 for IE7 and #IE8 for IE8 (div closes at the bottom) */ ?>
+    <!--[if lte IE 7 ]><div id="IE7"><![endif]--><!--[if IE 8 ]><div id="IE8"><![endif]-->
+
+    <?php /* the "dokuwiki__top" id is needed somewhere at the top, because that's where the "back to top" button/link links to */ ?>
+    <?php /* classes mode_<action> are added to make it possible to e.g. style a page differently if it's in edit mode,
+         see http://www.dokuwiki.org/devel:action_modes for a list of action modes */ ?>
+    <?php /* .dokuwiki should always be in one of the surrounding elements (e.g. plugins and templates depend on it) */ ?>
+    <div id="dokuwiki__site"><div id="dokuwiki__top"
+        class="dokuwiki site mode_<?php echo $ACT ?> <?php echo ($showSidebar) ? 'hasSidebar' : ''; ?>">
+
+        <?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() /* flush the output buffer */ ?>
+                    <?php _tpl_include('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_include('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 // 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));
+                                    echo '<li><a href="'.$mmURL.'" class="mediaManager"><span>'.$lang['img_manager'].'</span></a></li>';
+                                }
+                            ?>
+                            <?php // Back to [ID]; @todo: transfer logic to backend
+                                echo '<li><a href="'.wl($ID).'" class="back"><span>'.$lang['img_backto'].' '.$ID.'</span></a></li>';
+                            ?>
+                        </ul>
+                    </div>
                 </div>
-                <div class="clearer"></div>
-            </div><!-- /.content -->
+            <?php endif; ?>
+        </div><!-- /wrapper -->
 
-            <p class="back">&larr; <?php echo $lang['img_backto']?> <?php tpl_pagelink($ID)?></p>
+        <?php include('tpl_footer.php') ?>
+    </div></div><!-- /site -->
 
-        <?php } ?>
-    </div>
-    <!--[if ( IE 6 | IE 7 | IE 8 ) ]></div><![endif]-->
+    <!--[if ( lte IE 7 | IE 8 ) ]></div><![endif]-->
 </body>
 </html>
-
diff --git a/images/apple-touch-icon.png b/images/apple-touch-icon.png
new file mode 100644
index 000000000..45fa4e7b0
--- /dev/null
+++ b/images/apple-touch-icon.png
diff --git a/images/bullet.png b/images/bullet.png
index da87696c7..5da537443 100644
--- a/images/bullet.png
+++ b/images/bullet.png
diff --git a/images/logo.png b/images/logo.png
new file mode 100644
index 000000000..8b794dd64
--- /dev/null
+++ b/images/logo.png
diff --git a/images/open.png b/images/open.png
index eafb64ed3..40ff129be 100644
--- a/images/open.png
+++ b/images/open.png
diff --git a/images/pagetools-license.txt b/images/pagetools-license.txt
new file mode 100644
index 000000000..299624c62
--- /dev/null
+++ b/images/pagetools-license.txt
@@ -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/pagetools-sprite.png b/images/pagetools-sprite.png
new file mode 100644
index 000000000..a0f4036ff
--- /dev/null
+++ b/images/pagetools-sprite.png
diff --git a/images/pagetools-sprite.xcf b/images/pagetools-sprite.xcf
new file mode 100644
index 000000000..07c1d83fb
--- /dev/null
+++ b/images/pagetools-sprite.xcf
diff --git a/images/pagetools.xcf b/images/pagetools.xcf
new file mode 100644
index 000000000..034b39a42
--- /dev/null
+++ b/images/pagetools.xcf
diff --git a/images/resizecol.png b/images/resizecol.png
new file mode 100644
index 000000000..f0111507c
--- /dev/null
+++ b/images/resizecol.png
diff --git a/images/search.png b/images/search.png
new file mode 100644
index 000000000..2adfc7357
--- /dev/null
+++ b/images/search.png
diff --git a/images/toc-arrows.png b/images/toc-arrows.png
new file mode 100644
index 000000000..9f441eb26
--- /dev/null
+++ b/images/toc-arrows.png
diff --git a/images/toc-bullet.png b/images/toc-bullet.png
new file mode 100644
index 000000000..a6f0169c3
--- /dev/null
+++ b/images/toc-bullet.png
diff --git a/main.php b/main.php
index 004421c3e..84334a4db 100644
--- a/main.php
+++ b/main.php
@@ -1,164 +1,100 @@
 <?php
 /**
- * DokuWiki Starter Template
+ * DokuWiki Default Template 2012
  *
- * @link   http://dokuwiki.org/template:starter
- * @author Anika Henke <anika@selfthinker.org>
+ * @link     http://dokuwiki.org/template
+ * @author   Anika Henke <anika@selfthinker.org>
+ * @author   Clarence Lee <clarencedglee@gmail.com>
+ * @license  GPL 2 (http://www.gnu.org/licenses/gpl.html)
  */
 
 if (!defined('DOKU_INC')) die(); /* must be run from within DokuWiki */
 @require_once(dirname(__FILE__).'/tpl_functions.php'); /* include hook for template functions */
 
-$showTools = !tpl_getConf('hideTools') || ( tpl_getConf('hideTools') && $_SERVER['REMOTE_USER'] );
+$showSidebar = $conf['sidebar'] && page_exists($conf['sidebar']) && ($ACT=='show');
 ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $conf['lang'] ?>"
   lang="<?php echo $conf['lang'] ?>" dir="<?php echo $lang['direction'] ?>">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <title><?php tpl_pagetitle() ?> [<?php echo strip_tags($conf['title']) ?>]</title>
     <?php tpl_metaheaders() ?>
-    <link rel="shortcut icon" href="<?php echo _tpl_getFavicon() /* DW versions > 2010-11-12 can use the core function tpl_getFavicon() */ ?>" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <?php echo tpl_favicon(array('favicon', 'mobile')) ?>
     <?php _tpl_include('meta.html') ?>
 </head>
 
 <body>
     <?php /* with these Conditional Comments you can better address IE issues in CSS files,
-             precede CSS rules by #IE6 for IE6, #IE7 for IE7 and #IE8 for IE8 (div closes at the bottom) */ ?>
-    <!--[if IE 6 ]><div id="IE6"><![endif]--><!--[if IE 7 ]><div id="IE7"><![endif]--><!--[if IE 8 ]><div id="IE8"><![endif]-->
+             precede CSS rules by #IE7 for IE7 and #IE8 for IE8 (div closes at the bottom) */ ?>
+    <!--[if lte IE 7 ]><div id="IE7"><![endif]--><!--[if IE 8 ]><div id="IE8"><![endif]-->
 
+    <?php /* the "dokuwiki__top" id is needed somewhere at the top, because that's where the "back to top" button/link links to */ ?>
     <?php /* classes mode_<action> are added to make it possible to e.g. style a page differently if it's in edit mode,
          see http://www.dokuwiki.org/devel:action_modes for a list of action modes */ ?>
     <?php /* .dokuwiki should always be in one of the surrounding elements (e.g. plugins and templates depend on it) */ ?>
-    <div id="dokuwiki__site"><div class="dokuwiki site mode_<?php echo $ACT ?>">
-        <?php html_msgarea() /* occasional error and info messages on top of the page */ ?>
-        <?php _tpl_include('header.html') ?>
-
-        <!-- ********** HEADER ********** -->
-        <div id="dokuwiki__header"><div class="pad">
-
-            <div class="headings">
-                <h1><?php tpl_link(wl(),$conf['title'],'id="dokuwiki__top" accesskey="h" title="[H]"') ?></h1>
-                <?php /* how to insert logo instead (if no CSS image replacement technique is used):
-                        upload your logo into the data/media folder (root of the media manager) and replace 'logo.png' accordingly:
-                        tpl_link(wl(),'<img src="'.ml('logo.png').'" alt="'.$conf['title'].'" />','id="dokuwiki__top" accesskey="h" title="[H]"') */ ?>
-                <?php if (tpl_getConf('tagline')): ?>
-                    <p class="claim"><?php echo tpl_getConf('tagline') ?></p>
-                <?php endif ?>
-
-                <ul class="a11y">
-                    <li><a href="#dokuwiki__content"><?php echo tpl_getLang('skip_to_content') ?></a></li>
-                </ul>
-                <div class="clearer"></div>
-            </div>
-
-            <div class="tools">
-                <!-- USER TOOLS -->
-                <?php if ($conf['useacl'] && $showTools): ?>
-                    <div id="dokuwiki__usertools">
-                        <h3 class="a11y"><?php echo tpl_getLang('user_tools') ?></h3>
-                        <ul>
-                            <?php /* the optional second parameter of tpl_action() switches between a link and a button,
-                                     e.g. a button inside a <li> would be: tpl_action('edit',0,'li') */
-                                if ($_SERVER['REMOTE_USER']) {
-                                    echo '<li class="user">';
-                                    tpl_userinfo(); /* 'Logged in as ...' */
-                                    echo '</li>';
-                                }
-                                tpl_action('admin', 1, 'li');
-                                _tpl_action('userpage', 1, 'li');
-                                tpl_action('profile', 1, 'li');
-                                _tpl_action('register', 1, 'li'); /* DW versions > 2011-02-20 can use the core function tpl_action('register', 1, 'li') */
-                                tpl_action('login', 1, 'li');
-                            ?>
-                        </ul>
-                    </div>
-                <?php endif ?>
-
-                <!-- SITE TOOLS -->
-                <div id="dokuwiki__sitetools">
-                    <h3 class="a11y"><?php echo tpl_getLang('site_tools') ?></h3>
-                    <?php tpl_searchform() ?>
-                    <ul>
-                        <?php
-                            tpl_action('recent', 1, 'li');
-                            tpl_action('index', 1, 'li');
-                        ?>
-                    </ul>
-                </div>
-
-            </div>
-            <div class="clearer"></div>
+    <div id="dokuwiki__site"><div id="dokuwiki__top"
+        class="dokuwiki site mode_<?php echo $ACT ?> <?php echo ($showSidebar) ? 'hasSidebar' : ''; ?>">
 
-            <!-- BREADCRUMBS -->
-            <?php if($conf['breadcrumbs']){ ?>
-                <div class="breadcrumbs"><?php tpl_breadcrumbs() ?></div>
-            <?php } ?>
-            <?php if($conf['youarehere']){ ?>
-                <div class="breadcrumbs"><?php tpl_youarehere() ?></div>
-            <?php } ?>
+        <?php include('tpl_header.php') ?>
 
-            <div class="clearer"></div>
-            <hr class="a11y" />
-        </div></div><!-- /header -->
-
-
-        <div class="wrapper">
+        <div class="wrapper group">
 
-            <!-- ********** ASIDE ********** -->
-            <div id="dokuwiki__aside"><div class="pad include">
-                <?php tpl_include_page(tpl_getConf('sidebarID')) /* includes the given wiki page */ ?>
-                <div class="clearer"></div>
-            </div></div><!-- /aside -->
+            <?php if($showSidebar): ?>
+                <!-- ********** ASIDE ********** -->
+                <div id="dokuwiki__aside"><div class="pad include group">
+                    <?php tpl_flush() /* flush the output buffer */ ?>
+                    <?php _tpl_include('sidebarheader.html') ?>
+                    <?php tpl_include_page($conf['sidebar']) /* includes the given wiki page */ ?>
+                    <?php _tpl_include('sidebarfooter.html') ?>
+                </div></div><!-- /aside -->
+            <?php endif; ?>
 
             <!-- ********** CONTENT ********** -->
-            <div id="dokuwiki__content"><div class="pad">
-                <?php tpl_flush() /* flush the output buffer */ ?>
-                <?php _tpl_include('pageheader.html') ?>
+            <div id="dokuwiki__content"><div class="pad group">
+
+                <div class="pageId"><span><?php echo hsc($ID) ?></span></div>
 
-                <div class="page">
+                <div class="page group">
+                    <?php tpl_flush() ?>
+                    <?php _tpl_include('pageheader.html') ?>
                     <!-- wikipage start -->
                     <?php tpl_content() /* the main content */ ?>
                     <!-- wikipage stop -->
-                    <div class="clearer"></div>
+                    <?php _tpl_include('pagefooter.html') ?>
                 </div>
 
+                <div class="docInfo"><?php tpl_pageinfo() /* 'Last modified' etc */ ?></div>
+
                 <?php tpl_flush() ?>
-                <?php _tpl_include('pagefooter.html') ?>
             </div></div><!-- /content -->
 
-            <div class="clearer"></div>
             <hr class="a11y" />
 
             <!-- PAGE ACTIONS -->
-            <?php if ($showTools): ?>
-                <div id="dokuwiki__pagetools">
-                    <h3 class="a11y"><?php echo tpl_getLang('page_tools') ?></h3>
+            <div id="dokuwiki__pagetools">
+                <h3 class="a11y"><?php echo $lang['page_tools']; ?></h3>
+                <div class="tools">
                     <ul>
                         <?php
-                            tpl_action('edit', 1, 'li');
-                            _tpl_action('discussion', 1, 'li');
-                            tpl_action('history', 1, 'li');
-                            tpl_action('backlink', 1, 'li');
-                            tpl_action('subscribe', 1, 'li');
-                            tpl_action('revert', 1, 'li');
-                            tpl_action('top', 1, 'li');
+                            tpl_action('edit',      1, 'li', 0, '<span>', '</span>');
+                            tpl_action('revert',    1, 'li', 0, '<span>', '</span>');
+                            tpl_action('revisions', 1, 'li', 0, '<span>', '</span>');
+                            tpl_action('backlink',  1, 'li', 0, '<span>', '</span>');
+                            tpl_action('subscribe', 1, 'li', 0, '<span>', '</span>');
+                            tpl_action('top',       1, 'li', 0, '<span>', '</span>');
                         ?>
                     </ul>
                 </div>
-            <?php endif; ?>
+            </div>
         </div><!-- /wrapper -->
 
-        <!-- ********** FOOTER ********** -->
-        <div id="dokuwiki__footer"><div class="pad">
-            <div class="doc"><?php tpl_pageinfo() /* 'Last modified' etc */ ?></div>
-            <?php tpl_license('button') /* content license, parameters: img=*badge|button|0, imgonly=*0|1, return=*0|1 */ ?>
-        </div></div><!-- /footer -->
-
-        <?php _tpl_include('footer.html') ?>
+        <?php include('tpl_footer.php') ?>
     </div></div><!-- /site -->
 
     <div class="no"><?php tpl_indexerWebBug() /* provide DokuWiki housekeeping, required in all templates */ ?></div>
-    <!--[if ( IE 6 | IE 7 | IE 8 ) ]></div><![endif]-->
+    <!--[if ( lte IE 7 | IE 8 ) ]></div><![endif]-->
 </body>
 </html>
diff --git a/mediamanager.php b/mediamanager.php
index 0f4362577..d7d88f936 100644
--- a/mediamanager.php
+++ b/mediamanager.php
@@ -2,24 +2,32 @@
 /**
  * DokuWiki Media Manager Popup
  *
- * @author Andreas Gohr <andi@splitbrain.org>
+ * @author   Andreas Gohr <andi@splitbrain.org>
+ * @license  GPL 2 (http://www.gnu.org/licenses/gpl.html)
  */
+// must be run from within DokuWiki
+if (!defined('DOKU_INC')) die();
+@require_once(dirname(__FILE__).'/tpl_functions.php'); /* include hook for template functions */
+
 ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $conf['lang']?>"
   lang="<?php echo $conf['lang']?>" dir="<?php echo $lang['direction'] ?>" class="popup">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <title>
         <?php echo hsc($lang['mediaselect'])?>
         [<?php echo strip_tags($conf['title'])?>]
     </title>
     <?php tpl_metaheaders()?>
-    <link rel="shortcut icon" href="<?php echo ml('favicon.ico') ?>" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <?php echo tpl_favicon(array('favicon', 'mobile')) ?>
+    <?php _tpl_include('meta.html') ?>
 </head>
 
 <body>
-    <!--[if IE 6 ]><div id="IE6"><![endif]--><!--[if IE 7 ]><div id="IE7"><![endif]--><!--[if IE 8 ]><div id="IE8"><![endif]-->
+    <!--[if lte IE 7 ]><div id="IE7"><![endif]--><!--[if IE 8 ]><div id="IE8"><![endif]-->
     <div id="media__manager" class="dokuwiki">
         <?php html_msgarea() ?>
         <div id="mediamgr__aside"><div class="pad">
@@ -35,6 +43,6 @@
             <?php tpl_mediaContent() ?>
         </div></div>
     </div>
-    <!--[if ( IE 6 | IE 7 | IE 8 ) ]></div><![endif]-->
+    <!--[if ( lte IE 7 | IE 8 ) ]></div><![endif]-->
 </body>
 </html>
diff --git a/style.ini b/style.ini
index ef5e0201e..8ac4fbe31 100644
--- a/style.ini
+++ b/style.ini
@@ -8,23 +8,28 @@
 
 [stylesheets]
 
-css/basic.css         = screen
-css/structure.css     = screen
-css/design.css        = screen
-css/content.css       = screen
-css/_imgdetail.css    = screen
-css/_mediamanager.css = screen
-css/_links.css        = screen
-css/_toc.css          = screen
-css/_footnotes.css    = screen
-css/_search.css       = screen
-css/_recent.css       = screen
-css/_diff.css         = screen
-css/_edit.css         = screen
-css/_modal.css        = screen
-css/_forms.css        = screen
-css/_admin.css        = screen
-css/includes.css      = screen
+css/basic.css             = screen
+css/_imgdetail.css        = screen
+css/_media_popup.css      = screen
+css/_media_fullscreen.css = screen
+css/_fileuploader.css     = screen
+css/_tabs.css             = screen
+css/_links.css            = screen
+css/_toc.css              = screen
+css/_footnotes.css        = screen
+css/_search.css           = screen
+css/_recent.css           = screen
+css/_diff.css             = screen
+css/_edit.css             = screen
+css/_modal.css            = screen
+css/_forms.css            = screen
+css/_admin.css            = screen
+css/structure.css         = screen
+css/design.css            = screen
+css/pagetools.css         = screen
+css/content.css           = screen
+css/includes.css          = screen
+css/mobile.css            = screen
 
 css/rtl.css           = rtl
 css/print.css         = print
@@ -40,25 +45,29 @@ css/print.css         = print
 ;------ guaranteed dokuwiki color placeholders that every plugin can use
 
 ; main text and background colors
-__text__           = "#333"
-__background__     = "#fff"
+__text__            = "#333"
+__background__      = "#fff"
 ; alternative text and background colors
-__text_alt__       = "#999"
-__background_alt__ = "#eee"
+__text_alt__        = "#999"
+__background_alt__  = "#eee"
 ; neutral text and background colors
-__text_neu__       = "#666"
-__background_neu__ = "#ddd"
+__text_neu__        = "#666"
+__background_neu__  = "#ddd"
 ; border color
-__border__         = "#ccc"
+__border__          = "#ccc"
 
 ;--------------------------------------------------------------------------
 
+__background_site__ = "#fbfaf9"
+
 ; these are used for links
-__existing__       = "#090"
-__missing__        = "#f30"
+__link__            = "#2b73b7"
+__existing__        = "#080"
+__missing__         = "#d30"
 
 ; highlighting search snippets
-__highlight__      = "#ff9"
+__highlight__       = "#ff9"
 
 ; sidebar width
-__sidebar_width__       = "16em"
+__site_width__      = "75em"
+__sidebar_width__   = "16em"
diff --git a/template.info.txt b/template.info.txt
new file mode 100644
index 000000000..e049270ee
--- /dev/null
+++ b/template.info.txt
@@ -0,0 +1,7 @@
+base     dokuwiki
+author   Anika Henke, Andreas Gohr, Clarence Lee
+email    andi@splitbrain.org
+date     2012-01-30
+name     DokuWiki Template
+desc     DokuWiki's default template 2012
+url      http://www.dokuwiki.org/template
diff --git a/tpl_footer.php b/tpl_footer.php
new file mode 100644
index 000000000..fcc9d21c7
--- /dev/null
+++ b/tpl_footer.php
@@ -0,0 +1,6 @@
+<!-- ********** FOOTER ********** -->
+<div id="dokuwiki__footer"><div class="pad">
+    <?php tpl_license('button') /* content license, parameters: img=*badge|button|0, imgonly=*0|1, return=*0|1 */ ?>
+</div></div><!-- /footer -->
+
+<?php _tpl_include('footer.html') ?>
diff --git a/tpl_functions.php b/tpl_functions.php
index 54b143fc9..c024f33e7 100644
--- a/tpl_functions.php
+++ b/tpl_functions.php
@@ -11,116 +11,7 @@
 // must be run from within DokuWiki
 if (!defined('DOKU_INC')) die();
 
-/**
- * Create link/button to discussion page and back
- *
- * @author Anika Henke <anika@selfthinker.org>
- */
-function _tpl_discussion($discussionPage,$title,$backTitle,$link=0,$wrapper=0) {
-    global $ID;
-
-    $discussPage    = str_replace('@ID@',$ID,$discussionPage);
-    $discussPageRaw = str_replace('@ID@','',$discussionPage);
-    $isDiscussPage  = strpos($ID,$discussPageRaw)!==false;
-    $backID         = str_replace($discussPageRaw,'',$ID);
-
-    if ($wrapper) echo "<$wrapper>";
-
-    if ($isDiscussPage) {
-        if ($link)
-            tpl_pagelink($backID,$backTitle);
-        else
-            echo html_btn('back2article',$backID,'',array(),'get',0,$backTitle);
-    } else {
-        if ($link)
-            tpl_pagelink($discussPage,$title);
-        else
-            echo html_btn('discussion',$discussPage,'',array(),'get',0,$title);
-    }
-
-    if ($wrapper) echo "</$wrapper>";
-}
-
-/**
- * Create link/button to user page
- *
- * @author Anika Henke <anika@selfthinker.org>
- */
-function _tpl_userpage($userPage,$title,$link=0,$wrapper=0) {
-    if (!$_SERVER['REMOTE_USER']) return;
-
-    global $conf;
-    $userPage = str_replace('@USER@',$_SERVER['REMOTE_USER'],$userPage);
-
-    if ($wrapper) echo "<$wrapper>";
-
-    if ($link)
-        tpl_pagelink($userPage,$title);
-    else
-        echo html_btn('userpage',$userPage,'',array(),'get',0,$title);
-
-    if ($wrapper) echo "</$wrapper>";
-}
-
-/**
- * Create link/button to register page
- * DW versions > 2011-02-20 can use the core function tpl_action('register')
- *
- * @author Anika Henke <anika@selfthinker.org>
- */
-function _tpl_register($link=0,$wrapper=0) {
-    global $conf;
-    global $lang;
-    global $ID;
-    $lang_register = !empty($lang['btn_register']) ? $lang['btn_register'] : $lang['register'];
-
-    if ($_SERVER['REMOTE_USER'] || !$conf['useacl'] || !actionOK('register')) return;
-
-    if ($wrapper) echo "<$wrapper>";
-
-    if ($link)
-        tpl_link(wl($ID,'do=register'),$lang_register,'class="action register" rel="nofollow"');
-    else
-        echo html_btn('register',$ID,'',array('do'=>'register'),'get',0,$lang_register);
-
-    if ($wrapper) echo "</$wrapper>";
-}
-
-/**
- * Wrapper around custom template actions
- *
- * @author Anika Henke <anika@selfthinker.org>
- */
-function _tpl_action($type,$link=0,$wrapper=0) {
-    switch ($type) {
-        case 'discussion':
-            if (tpl_getConf('discussionPage')) {
-                _tpl_discussion(tpl_getConf('discussionPage'),tpl_getLang('discussion'),tpl_getLang('back_to_article'),$link,$wrapper);
-            }
-            break;
-        case 'userpage':
-            if (tpl_getConf('userPage')) {
-                _tpl_userpage(tpl_getConf('userPage'),tpl_getLang('userpage'),$link,$wrapper);
-            }
-            break;
-        case 'register':
-            _tpl_register($link,$wrapper);
-            break;
-    }
-}
-
-/**
- * Use favicon.ico from data/media root directory if it exists, otherwise use
- * the one in the template's image directory.
- * DW versions > 2010-11-12 can use the core function tpl_getFavicon()
- *
- * @author Anika Henke <anika@selfthinker.org>
- */
-function _tpl_getFavicon() {
-    if (file_exists(mediaFN('favicon.ico')))
-        return ml('favicon.ico');
-    return DOKU_TPL.'images/favicon.ico';
-}
+/* @todo: add this function to the core and delete this file */
 
 /**
  * Include additional html file from conf directory if it exists, otherwise use
diff --git a/tpl_header.php b/tpl_header.php
new file mode 100644
index 000000000..91d8876b9
--- /dev/null
+++ b/tpl_header.php
@@ -0,0 +1,83 @@
+<!-- ********** HEADER ********** -->
+<div id="dokuwiki__header"><div class="pad group">
+
+    <?php html_msgarea() /* occasional error and info messages on top of the page */ ?>
+    <?php _tpl_include('header.html') ?>
+
+    <div class="headings group">
+        <ul class="a11y skip">
+            <li><a href="#dokuwiki__content"><?php echo $lang['skip_to_content']; ?></a></li>
+        </ul>
+
+        <h1><?php
+            // get logo either out of the template images folder or data/media folder
+            $logoSize = array();
+            $logo = tpl_getMediaFile(array(':wiki:logo.png','images/logo.png'),false,$logoSize);
+
+            // display logo and wiki title in a link to the home page
+            tpl_link(
+                wl(),
+                '<img src="'.$logo.'" '.$logoSize[3].' alt="" /> <span>'.$conf['title'].'</span>',
+                'accesskey="h" title="[H]"'
+            );
+        ?></h1>
+        <?php if ($conf['tagline']): ?>
+            <p class="claim"><?php echo $conf['tagline']; ?></p>
+        <?php endif ?>
+    </div>
+
+    <div class="tools group">
+        <!-- USER TOOLS -->
+        <?php if ($conf['useacl']): ?>
+            <div id="dokuwiki__usertools">
+                <h3 class="a11y"><?php echo $lang['user_tools']; ?></h3>
+                <ul>
+                    <?php /* the optional second parameter of tpl_action() switches between a link and a button,
+                             e.g. a button inside a <li> would be: tpl_action('edit',0,'li') */
+                        if ($_SERVER['REMOTE_USER']) {
+                            echo '<li class="user">';
+                            tpl_userinfo(); /* 'Logged in as ...' */
+                            echo '</li>';
+                        }
+                        tpl_action('admin', 1, 'li');
+                        tpl_action('profile', 1, 'li');
+                        tpl_action('register', 1, 'li');
+                        tpl_action('login', 1, 'li');
+                    ?>
+                </ul>
+            </div>
+        <?php endif ?>
+
+        <!-- SITE TOOLS -->
+        <div id="dokuwiki__sitetools">
+            <h3 class="a11y"><?php echo $lang['site_tools']; ?></h3>
+            <?php tpl_searchform(); ?>
+            <?php /* all the tools in one dropdown (good for mobile view): */ ?>
+            <div class="mobileTools">
+                <?php tpl_actiondropdown($lang['tools']); ?>
+            </div>
+            <ul>
+                <?php
+                    tpl_action('recent', 1, 'li');
+                    tpl_action('media', 1, 'li');
+                    tpl_action('index', 1, 'li');
+                ?>
+            </ul>
+        </div>
+
+    </div>
+
+    <!-- BREADCRUMBS -->
+    <?php if($conf['breadcrumbs'] || $conf['youarehere']): ?>
+        <div class="breadcrumbs">
+            <?php if($conf['youarehere']): ?>
+                <div class="youarehere"><?php tpl_youarehere() ?></div>
+            <?php endif ?>
+            <?php if($conf['breadcrumbs']): ?>
+                <div class="trace"><?php tpl_breadcrumbs() ?></div>
+            <?php endif ?>
+        </div>
+    <?php endif ?>
+
+    <hr class="a11y" />
+</div></div><!-- /header -->
author	Anika Henke <anika@selfthinker.org>	2012-02-05 15:06:09 +0000
committer	Anika Henke <anika@selfthinker.org>	2012-02-05 15:06:09 +0000
commit	753b6d5c72fb0639a1c94401f7089011e353d1e1 (patch)
tree	698ca2101df2a8e862b3aa0e59ee31c3f1104132
parent	d07ea3739d8e6580641e84d4f3b14df6e0c9fd70 (diff)
parent	79b3df949fb269d4c1e78a382efc163d514e2434 (diff)
download	rpg-753b6d5c72fb0639a1c94401f7089011e353d1e1.tar.gz rpg-753b6d5c72fb0639a1c94401f7089011e353d1e1.tar.bz2