[webui] Restructure file tree + convert tabs to 2 whitespaces + remove setup.html

88 files changed, 2653 insertions, 0 deletions

diff --git a/module/webui/themes/dark/css/MooDialog.css b/module/webui/themes/dark/css/MooDialog.css
new file mode 100644
index 000000000..7e08b1c80
--- /dev/null
+++ b/module/webui/themes/dark/css/MooDialog.css
@@ -0,0 +1,95 @@
+/* Created by Arian Stolwijk <http://www.aryweb.nl> */
+
+.MooDialog {
+/*  position: fixed;*/
+    margin: 0 auto 0 -350px;
+    width:600px;
+    padding:14px;
+    left:50%;
+    top: 100px;
+    color:white;
+
+  position: absolute;
+  left: 50%;
+  z-index: 50000;
+
+  background: url(../img/dark-bg.jpg);
+  color: black;
+  border-radius: 7px;
+  -moz-border-radius: 7px;
+  -webkit-border-radius: 7px;
+  border-radius: 7px;
+  -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
+  -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
+  box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
+}
+
+.MooDialogTitle {
+  padding-top: 30px;
+}
+
+.MooDialog .title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 3px 20px;
+  background: #b7c4dc;
+  border-bottom: 1px solid #a1aec5;
+  font-weight: bold;
+  text-shadow: 1px 1px 0 #fff;
+  color: black;
+  border-radius: 7px;
+  -moz-border-radius: 7px;
+  -webkit-border-radius: 7px;
+}
+
+.MooDialog .close {
+  background: url(../img/dialog-close.png) no-repeat;
+  width: 16px;
+  height: 16px;
+  display: block;
+  cursor: pointer;
+  top: -5px;
+  left: -5px;
+  position: absolute;
+}
+
+.MooDialog .buttons {
+  text-align: right;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+}
+
+.MooDialog .iframe {
+  width: 100%;
+  height: 100%;
+}
+
+.MooDialog .textInput {
+  width: 200px;
+  float: left;
+        color:white;
+}
+
+.MooDialog .MooDialogAlert,
+.MooDialog .MooDialogConfirm,
+.MooDialog .MooDialogPrompt,
+.MooDialog .MooDialogError {
+  background: url(../img/dialog-warning.png) no-repeat;
+  padding-left: 40px;
+  min-height: 40px;
+        color:white;
+}
+
+.MooDialog .MooDialogConfirm,
+.MooDialog .MooDialogPromt {
+  background: url(../img/dialog-question.png) no-repeat;
+}
+
+.MooDialog .MooDialogError {
+  background: url(../img/dialog-error.png) no-repeat;
+}
+
diff --git a/module/webui/themes/dark/css/default.css b/module/webui/themes/dark/css/default.css
new file mode 100644
index 000000000..af7146312
--- /dev/null
+++ b/module/webui/themes/dark/css/default.css
@@ -0,0 +1,968 @@
+.hidden {
+  display:none;
+}
+.leftalign {
+  text-align:left;
+}
+.centeralign {
+  text-align:center;
+}
+.rightalign {
+  text-align:right;
+}
+
+
+.dokuwiki div.plugin_translation ul li a.wikilink1:link, .dokuwiki div.plugin_translation ul li a.wikilink1:hover, .dokuwiki div.plugin_translation ul li a.wikilink1:active, .dokuwiki div.plugin_translation ul li a.wikilink1:visited {
+  background-color:#000080;
+  color:#fff !important;
+  text-decoration:none;
+  padding:0 0.2em;
+  margin:0.1em 0.2em;
+  border:none !important;
+}
+.dokuwiki div.plugin_translation ul li a.wikilink2:link, .dokuwiki div.plugin_translation ul li a.wikilink2:hover, .dokuwiki div.plugin_translation ul li a.wikilink2:active, .dokuwiki div.plugin_translation ul li a.wikilink2:visited {
+  background-color:#808080;
+  color:#fff !important;
+  text-decoration:none;
+  padding:0 0.2em;
+  margin:0.1em 0.2em;
+  border:none !important;
+}
+
+.dokuwiki div.plugin_translation ul li a:hover img {
+  opacity:1.0;
+  height:15px;
+}
+
+body {
+  margin:0;
+  padding:0;
+  background-image: url(../img/dark-bg.jpg);
+  color:white;
+  font-size:12px;
+  font-family:Verdana, Helvetica, "Lucida Grande", Lucida, Arial, sans-serif;
+  font-family:sans-serif;
+  font-size:99, 96%;
+  font-size-adjust:none;
+  font-style:normal;
+  font-variant:normal;
+  font-weight:normal;
+  line-height:normal;
+}
+hr {
+  border-width:0;
+  border-bottom:1px #aaa dotted;
+}
+img {
+  border:none;
+}
+form {
+  margin:0px;
+  padding:0px;
+  border:none;
+  display:inline;
+  background:transparent;
+}
+ul li {
+  margin:5px;
+}
+textarea {
+  font-family:monospace;
+}
+table {
+  margin:0.5em 0;
+  border-collapse:collapse;
+}
+td {
+  padding:0.25em;
+  border:1pt solid #ADB9CC;
+}
+a {
+  color:#3465a4;
+  text-decoration:none;
+}
+a:hover {
+  text-decoration:underline;
+}
+
+option {
+  border:0 none #fff;
+}
+strong.highlight {
+  background-color:#fc9;
+  padding:1pt;
+}
+#pagebottom {
+  clear:both;
+}
+hr {
+  height:1px;
+  color:#c0c0c0;
+  background-color:#c0c0c0;
+  border:none;
+  margin:.2em 0 .2em 0;
+}
+
+.invisible {
+  margin:0px;
+  border:0px;
+  padding:0px;
+  height:0px;
+  visibility:hidden;
+}
+.left {
+  float:left !important;
+}
+.right {
+  float:right !important;
+}
+.center {
+  text-align:center;
+}
+div#body-wrapper {
+  padding:40px 40px 10px 40px;
+  font-size:127%;
+}
+div#content {
+  margin-top:-20px;
+  padding:0;
+  font-size:14px;
+  color:white;
+  line-height:1.5em;
+}
+h1, h2, h3, h4, h5, h6 {
+  background:transparent none repeat scroll 0 0;
+  border-bottom:1px solid #aaa;
+  color:white;
+  font-weight:normal;
+  margin:0;
+  padding:0;
+  padding-bottom:0.17em;
+  padding-top:0.5em;
+}
+h1 {
+  font-size:188%;
+  line-height:1.2em;
+  margin-bottom:0.1em;
+  padding-bottom:0;
+}
+h2 {
+  font-size:150%;
+}
+h3, h4, h5, h6 {
+  border-bottom:none;
+  font-weight:bold;
+}
+h3 {
+  font-size:132%;
+}
+h4 {
+  font-size:116%;
+}
+h5 {
+  font-size:100%;
+}
+h6 {
+  font-size:80%;
+}
+ul#page-actions, ul#page-actions-more {
+  float:right;
+  margin:10px 10px 0 10px;
+  padding:6px;
+  color:white;
+  background-color:#202020;
+  list-style-type:none;
+  white-space: nowrap;
+  border-radius:5px;
+  -moz-border-radius:5px;
+  border:1px solid grey;
+}
+ul#user-actions {
+  padding:5px;
+  margin:0;
+  display:inline;
+  color:white;
+  background-color:#202020;
+  list-style-type:none;
+  -moz-border-radius:3px;
+  border-radius:3px;
+}
+ul#page-actions li, ul#user-actions li, ul#page-actions-more li {
+  display:inline;
+}
+ul#page-actions a, ul#user-actions a, ul#page-actions-more a {
+  text-decoration:none;
+  color:white;
+  display:inline;
+  margin:0 3px;
+  padding:2px 0px 2px 18px;
+}
+ul#page-actions a:hover, ul#page-actions a:focus, ul#user-actions a:hover, ul#user-actions a:focus {
+  /*text-decoration:underline;*/
+}
+/***************************/
+ul#page-actions2 {
+  float:left;
+  margin:10px 10px 0 10px;
+  padding:6px;
+  color:white;
+  background-color:#202020;
+  list-style-type:none;
+  border-radius:5px;
+  -moz-border-radius:5px;
+  border:1px solid grey;
+}
+ul#user-actions2 {
+  padding:5px;
+  margin:0;
+  display:inline;
+  color:white;
+  background-color:#202020;
+  list-style-type:none;
+  border-radius:3px;
+  -moz-border-radius:3px;
+}
+ul#page-actions2 li, ul#user-actions2 li {
+  display:inline;
+}
+ul#page-actions2 a, ul#user-actions2 a {
+  text-decoration:none;
+  color:white;
+  display:inline;
+  margin:0 3px;
+  padding:2px 0px 2px 18px;
+}
+ul#page-actions2 a:hover, ul#page-actions2 a:focus, ul#user-actions2 a:hover, ul#user-actions2 a:focus,
+ul#page-actions-more a:hover, ul#page-actions-more a:focus{
+  color: #4e7bb4;
+}
+/****************************/
+.hidden {
+  display:none;
+}
+
+a.action.index {
+  background:transparent url(../img/wiki-tools-index.png) 0px 1px no-repeat;
+}
+a.action.recent {
+  background:transparent url(../img/wiki-tools-recent.png) 0px 1px no-repeat;
+}
+a.logout {
+  background:transparent url(../img/user-actions-logout.png) 0px 1px no-repeat;
+}
+
+a.info {
+    background:transparent url(../img/user-info.png) 0px 1px no-repeat;
+}
+
+a.admin {
+  background:transparent url(../img/user-actions-admin.png) 0px 1px no-repeat;
+}
+a.profile {
+  background:transparent url(../img/user-actions-profile.png) 0px 1px no-repeat;
+}
+a.create, a.edit {
+  background:transparent url(../img/page-tools-edit.png) 0px 1px no-repeat;
+}
+a.source, a.show {
+  background:transparent url(../img/page-tools-source.png) 0px 1px no-repeat;
+}
+a.revisions {
+  background:transparent url(../img/page-tools-revisions.png) 0px 1px no-repeat;
+}
+a.subscribe, a.unsubscribe {
+  background:transparent url(../img/page-tools-subscribe.png) 0px 1px no-repeat;
+}
+a.backlink {
+  background:transparent url(../img/page-tools-backlinks.png) 0px 1px no-repeat;
+}
+a.play {
+  background:transparent url(../img/control_play.png) 0px 1px no-repeat;
+}
+.time {
+  background:transparent url(../img/status_None.png) 0px 1px no-repeat;
+        padding: 2px 0px 2px 18px;
+        margin: 0px 3px;
+}
+.reconnect {
+  background:transparent url(../img/reconnect.png) 0px 1px no-repeat;
+        padding: 2px 0px 2px 18px;
+        margin: 0px 3px;
+}
+a.play:hover {
+  background:transparent url(../img/control_play_blue.png) 0px 1px no-repeat;
+}
+a.cancel {
+  background:transparent url(../img/control_cancel.png) 0px 1px no-repeat;
+}
+a.cancel:hover {
+  background:transparent url(../img/control_cancel_blue.png) 0px 1px no-repeat;
+}
+a.pause {
+  background:transparent url(../img/control_pause.png) 0px 1px no-repeat;
+}
+a.pause:hover {
+  background:transparent url(../img/control_pause_blue.png) 0px 1px no-repeat;
+  font-weight: bold;
+}
+a.stop {
+  background:transparent url(../img/control_stop.png) 0px 1px no-repeat;
+}
+a.stop:hover {
+  background:transparent url(../img/control_stop_blue.png) 0px 1px no-repeat;
+}
+a.add {
+  background:transparent url(../img/control_add.png) 0px 1px no-repeat;
+}
+a.add:hover {
+  background:transparent url(../img/control_add_blue.png) 0px 1px no-repeat;
+}
+a.cog {
+  background:transparent url(../img/cog.png) 0px 1px no-repeat;
+}
+#head-panel {
+  background:#525252 url(../img/head_bg1.png) bottom left repeat-x;
+}
+#head-panel h1 {
+  display:none;
+  margin:0;
+  text-decoration:none;
+  padding-top:0.8em;
+  padding-left:3.3em;
+  font-size:2.6em;
+  color:#eeeeec;
+}
+#head-panel #head-logo {
+  float:left;
+  margin:5px 0 -15px 5px;
+  padding:0;
+  overflow:visible;
+}
+#head-menu {
+  background:transparent url(../img/tabs-border-bottom.png) 0 100% repeat-x;
+  width:100%;
+  float:left;
+  margin:0;
+  padding:0;
+  padding-top:0.8em;
+}
+#head-menu ul {
+  list-style:none;
+  margin:0 1em 0 2em;
+}
+#head-menu ul li {
+  float:left;
+  margin:0;
+  margin-left:0.3em;
+  font-size:14px;
+  margin-bottom:4px;
+}
+#head-menu ul li.selected, #head-menu ul li:hover {
+  margin-bottom:0px;
+}
+#head-menu ul li a img {
+  height:22px;
+  width:22px;
+  vertical-align:middle;
+}
+#head-menu ul li a, #head-menu ul li a:link {
+  float:left;
+  text-decoration:none;
+  color:white;
+  background: url(../img/dark-bg.jpg) 0 100% repeat-x;
+  padding:3px 7px 3px 7px;
+  border:2px solid #ccc;
+  border-bottom:0px solid transparent;
+  padding-bottom:3px;
+  -moz-border-radius:5px;
+  border-radius:5px;
+}
+#head-menu ul li a:hover, #head-menu ul li a:focus {
+  color:#3465a4;
+  background-image: url(../img/dark-bg.jpg);
+  padding-bottom:7px;
+  border-bottom:0px none transparent;
+  outline:none;
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
+  -moz-border-radius-bottomright:0px;
+  -moz-border-radius-bottomleft:0px;
+}
+#head-menu ul li a:focus {
+  margin-bottom:-4px;
+}
+#head-menu ul li.selected a {
+  color:white;
+  background-image: url(../img/dark-bg.jpg);
+  padding-bottom:7px;
+  border-bottom:0px none transparent;
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
+  -moz-border-radius-bottomright:0px;
+  -moz-border-radius-bottomleft:0px;
+}
+#head-menu ul li.selected a:hover, #head-menu ul li.selected a:focus {
+  color:#3465a4;
+}
+div#head-search-and-login {
+  float:right;
+  margin:0 1em 0 0;
+  background-color:#222;
+  padding:7px 7px 5px 5px;
+  color:white;
+  white-space: nowrap;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  -moz-border-radius-bottomright:6px;
+  -moz-border-radius-bottomleft:6px;
+  border-right:1px solid grey;
+  border-left:1px solid grey;
+  border-bottom:1px solid grey;
+}
+div#head-search-and-login form {
+  display:inline;
+  padding:0 3px;
+}
+div#head-search-and-login form input {
+  border:2px solid #888;
+  background:#eee;
+  font-size:14px;
+  padding:2px;
+  border-radius:3px;
+  -moz-border-radius:3px;
+}
+div#head-search-and-login form input:focus {
+  background:#fff;
+}
+#head-search {
+  font-size:14px;
+}
+#head-username, #head-password {
+  width:80px;
+  font-size:14px;
+}
+#pageinfo {
+  clear:both;
+  color:#888;
+  padding:0.6em 0;
+  margin:0;
+}
+#foot {
+  font-style:normal;
+  color:#888;
+  text-align:center;
+}
+#foot a {
+  color:#aaf;
+}
+#foot img {
+  vertical-align:middle;
+}
+div.toc {
+  border:1px dotted #888;
+  background:#f0f0f0;
+  margin:1em 0 1em 1em;
+  float:right;
+  font-size:95%;
+}
+div.toc .tocheader {
+  font-weight:bold;
+  margin:0.5em 1em;
+}
+div.toc ol {
+  margin:1em 0.5em 1em 1em;
+  padding:0;
+}
+div.toc ol li {
+  margin:0;
+  padding:0;
+  margin-left:1em;
+}
+div.toc ol ol {
+  margin:0.5em 0.5em 0.5em 1em;
+  padding:0;
+}
+div.recentchanges table {
+  clear:both;
+}
+div#editor-help {
+  font-size:90%;
+  border:1px dotted #888;
+  padding:0ex 1ex 1ex 1ex;
+  background:#f7f6f2;
+}
+div#preview {
+  margin-top:1em;
+}
+label.block {
+  display:block;
+  text-align:right;
+  font-weight:bold;
+}
+label.simple {
+  display:block;
+  text-align:left;
+  font-weight:normal;
+}
+label.block input.edit {
+  width:50%;
+}
+/*fieldset {
+  width:300px;
+  text-align:center;
+  padding:0.5em;
+  margin:auto;
+}
+*/
+div.editor {
+  margin:0 0 0 0;
+}
+table {
+  margin:0.5em 0;
+  border-collapse:collapse;
+}
+td {
+  padding:0.25em;
+  border:1pt solid #ADB9CC;
+}
+td p {
+  margin:0;
+  padding:0;
+}
+.u {
+  text-decoration:underline;
+}
+.footnotes ul {
+  padding:0 2em;
+  margin:0 0 1em;
+}
+.footnotes li {
+  list-style:none;
+}
+.userpref table, .userpref td {
+  border:none;
+}
+#message {
+  clear:both;
+  padding:5px 10px;
+  background-color:#eee;
+  border-bottom:2px solid #ccc;
+}
+#message p {
+  margin:5px 0;
+  padding:0;
+  font-weight:bold;
+}
+#message div.buttons {
+  font-weight:normal;
+}
+.diff {
+  width:99%;
+}
+.diff-title {
+  background-color:#C0C0C0;
+}
+.searchresult dd span {
+  font-weight:bold;
+}
+.boxtext {
+  font-family:tahoma, arial, sans-serif;
+  font-size:11px;
+  color:#000;
+  float:none;
+  padding:3px 0 0 10px;
+}
+.statusbutton {
+  width:32px;
+  height:32px;
+  float:left;
+  margin-left:-32px;
+  margin-right:5px;
+  opacity:0;
+  cursor:pointer
+}
+.dlsize {
+  float:left;
+  padding-right: 8px;
+}
+.dlspeed {
+  float:left;
+  padding-right: 8px;
+}
+.package {
+  margin-bottom: 10px;
+}
+.packagename {
+  font-weight: bold;
+}
+
+.child {
+  margin-left: 20px;
+}
+.child_status {
+  margin-right: 10px;
+}
+.child_secrow {
+  font-size: 10px;
+}
+
+.header, .header th {
+  text-align: left;
+  font-weight: normal;
+  background-color:#202020;
+  border-top:1px solid grey;
+  border-bottom:1px solid grey;
+  -moz-border-radius:5px;
+  border-radius:5px;
+}
+.progress_bar {
+  background: #0C0;
+  height: 5px;
+  
+}
+
+.queue {
+  border: none
+}
+
+.queue tr td {
+  border: none
+}
+
+.header, .header th{
+  text-align: left;
+  font-weight: normal;
+}
+
+
+.clearer
+{
+  clear: both;
+  height: 1px;
+}
+
+.left
+{
+  float: left;
+}
+
+.right
+{
+  float: right;
+}
+
+
+.setfield
+{
+    display: table-cell;
+}
+
+ul.tabs li a
+{
+   padding: 5px 16px 4px 15px;
+   border: none;
+   font-weight: bold;
+
+    border-radius: 5px 5px 0 0;
+    -moz-border-radius: 5px 5px 0 0;
+
+}
+
+
+#tabs span
+{
+    display: none;
+}
+
+#tabs span.selected
+{
+    display: inline;
+}
+
+#tabsback
+{
+    background-color: #525252;
+    margin: 2px 0 0;
+    padding: 6px 4px 1px 4px;
+
+    border-top-right-radius: 30px;
+    border-top-left-radius: 3px;
+    -moz-border-radius-topright: 30px;
+    -moz-border-radius-topleft: 3px;
+}
+ul.tabs
+{
+    list-style-type: none;
+    margin:0;
+    padding: 0 40px 0 0;
+}
+
+ul.tabs li
+{
+    display: inline;
+    margin-left: 8px;
+}
+
+ul.tabs li a
+{
+    color: white;
+    background-color: #202020;
+    border: 1px solid grey;
+    border-bottom:none;
+    margin: 0;
+    text-decoration: none;
+
+    outline: 0;
+
+    padding: 5px 16px 4px 15px;
+    font-weight: bold;
+
+     border-radius: 5px 5px 0 0;
+     -moz-border-radius: 5px 5px 0 0;
+
+}
+
+ul.tabs li a.selected, ul.tabs li a:hover
+{
+    color: #3465a4;
+    background-color: white;
+
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    -moz-border-radius-bottomright: 0;
+    -moz-border-radius-bottomleft: 0;
+}
+
+ul.tabs li a:hover
+{
+    background-color: #202020;
+}
+
+ul.tabs li a.selected
+{
+    font-weight: bold;
+    background-color: #525252;
+    padding-bottom: 5px;
+    color: white;
+}
+
+
+#tabs-body {
+    position: relative;
+    overflow: hidden;
+}
+
+
+span.tabContent
+{
+    border: 2px solid #525252;
+    margin: 0;
+    padding: 0;
+    padding-bottom: 10px;
+}
+
+#tabs-body > span {
+    display: none;
+}
+
+#tabs-body > span.active {
+    display: block;
+}
+
+.hide
+{
+    display: none;
+}
+
+.settable
+{
+    color:white;
+    margin: 20px;
+    border: none;
+}
+.settable td
+{
+    border: none;
+    margin: 0;
+    padding: 5px;
+}
+
+.settable th{
+    padding-bottom: 8px;
+}
+
+.settable.wide td , .settable.wide th {
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+.settable input {
+background-color:#202020;
+color:white;
+}
+.settable select {
+background-color:#202020;
+color:white;
+}
+
+ul.nav {
+    margin: -30px 0 0;
+    padding: 0;
+  list-style: none;
+    position: absolute;
+}
+
+
+ul.nav li {
+  position: relative;
+  float: left;
+  padding: 5px;
+}
+
+ul.nav > li a {
+    background: #202020;
+    -moz-border-radius: 4px 4px 4px 4px;
+    border: 1px solid grey;
+    border-bottom: medium none;
+    color: white;
+}
+
+ul.nav ul {
+  position: absolute;
+  top: 26px;
+  left: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: 1px solid #AAA;
+  background: #202020;
+  -webkit-box-shadow: 1px 1px 5px #AAA;
+  -moz-box-shadow: 1px 1px 5px #AAA;
+  box-shadow: 1px 1px 5px #AAA;
+    cursor: pointer;
+}
+
+ul.nav .open {
+  display: block;
+}
+
+ul.nav .close {
+  display: none;
+}
+
+ul.nav ul li {
+  float: none;
+  padding: 0;
+}
+
+ul.nav ul li a {
+  width: 130px;
+  background: #f1f1f1;
+  padding: 3px;
+  display: block;
+  font-weight: normal;
+}
+
+ul.nav ul li a:hover {
+  background: #CDCDCD;
+}
+
+ul.nav ul ul {
+  left: 137px;
+  top: 0;
+}
+
+.purr-wrapper{
+  margin:10px;
+}
+
+/*Purr alert styles*/
+
+.purr-alert{
+  margin-bottom:10px;
+  padding:10px;
+  background:#000;
+  font-size:13px;
+  font-weight:bold;
+  color:#FFF;
+  -moz-border-radius:5px;
+  -webkit-border-radius:5px;
+  /*-moz-box-shadow: 0 0 10px rgba(255,255,0,.25);*/
+  width:300px;
+}
+.purr-alert.error{
+  color:#F55;
+  padding-left:30px;
+  background:url(../img/error.png) no-repeat #000 7px 10px;
+  width:280px;
+}
+.purr-alert.success{
+  color:#5F5;
+  padding-left:30px;
+  background:url(../img/success.png) no-repeat #000 7px 10px;
+  width:280px;
+}
+.purr-alert.notice{
+  color:#99F;
+  padding-left:30px;
+  background:url(../img/notice.png) no-repeat #000 7px 10px;
+  width:280px;
+}
+
+table.system {
+    border: none;
+    margin-left: 10px;
+}
+
+table.system td {
+    border: none
+}
+
+table.system tr > td:first-child {
+    font-weight: bold;
+    padding-right: 10px;
+}
+
+#foot {
+color:white;
+}
+
+#login_table {
+margin-left:auto;
+margin-right:auto;
+}
+
+#login_table td {
+padding:5px;
+border:1px solid grey;
+}
+
+#login_table input[type=text], #login_table input[type=password] {
+width:120px;
+background-color:transparent;
+-moz-opacity: 0.10;
+color:white;
+border: 1px solid grey;
+-moz-border-radius: 2px;
+-webkit-border-radius: 2px;
+border-radius: 18px;
+padding-left:5px;
+padding-right:5px;
+}
+
+#login_table input[type=text]:focus, #login_table input[type=password]:focus {
+border:1px solid #3465a4;
+}
+
+#login_table input[type=submit] {
+background-color:transparent;
+color:white;
+border: 1px solid grey;
+-moz-border-radius: 2px;
+-webkit-border-radius: 2px;
+border-radius: 18px;
+}
+
+#login_table input[type=submit]:hover {
+border:1px solid #3465a4;
+}
\ No newline at end of file
diff --git a/module/webui/themes/dark/css/log.css b/module/webui/themes/dark/css/log.css
new file mode 100644
index 000000000..99cfe267b
--- /dev/null
+++ b/module/webui/themes/dark/css/log.css
@@ -0,0 +1,75 @@
+
+html, body, #content
+{
+    height: 100%;
+}
+#body-wrapper
+{
+    height: 70%;
+}
+.logdiv
+{
+    height: 90%;
+    width: 100%;
+    overflow: auto;
+    border: 2px solid #CCC;
+    outline: 1px solid #666;
+    background-color: #FFE;
+    margin-right: auto;
+    margin-left: auto;
+  background-color:#202020;
+  color:white;
+}
+.logform
+{
+    display: table;
+    margin: 0 auto 0 auto;
+    padding-top: 5px;
+  color: white;
+}
+.logtable
+{
+    
+    margin: 0px;
+}
+.logtable td
+{
+    border: none;
+    white-space: nowrap;
+
+    
+    font-family: monospace;
+    font-size: 16px;
+    margin: 0px;
+    padding: 0px 10px 0px 10px;
+    line-height: 110%;
+}
+td.logline
+{
+    background-color: #202020;
+    text-align:right;
+    padding: 0px 5px 0px 5px;
+}
+td.loglevel
+{
+    text-align:right;
+}
+.logperpage
+{
+    float: right;
+    padding-bottom: 8px;
+}
+.logpaginator
+{
+    float: left;
+    padding-top: 5px;
+}
+.logpaginator a
+{
+    padding: 0px 8px 0px 8px;
+}
+.logwarn
+{
+    text-align: center;
+    color: red;
+}
\ No newline at end of file
diff --git a/module/webui/themes/dark/css/pathchooser.css b/module/webui/themes/dark/css/pathchooser.css
new file mode 100644
index 000000000..894cc335e
--- /dev/null
+++ b/module/webui/themes/dark/css/pathchooser.css
@@ -0,0 +1,68 @@
+table {
+    width: 90%;
+    border: 1px dotted #888888;
+    font-family: sans-serif;
+    font-size: 10pt;
+}
+
+th {
+    background-color: #525252;
+    color: #E0E0E0;
+}
+
+table, tr, td {
+    background-color: #F0F0F0;
+}
+
+a, a:visited {
+    text-decoration: none;
+    font-weight: bold;
+}
+
+#paths {
+    width: 90%;
+    text-align: left;
+}
+
+.file_directory {
+    color: #c0c0c0;
+}
+.path_directory {
+    color: #3c3c3c;
+}
+.file_file {
+    color: #3c3c3c;
+}
+.path_file {
+    color: #c0c0c0;
+}
+
+.parentdir {
+    color: #000000;
+    font-size: 10pt;
+}
+.name {
+    text-align: left;
+}
+.size {
+    text-align: right;
+}
+.type {
+    text-align: left;
+}
+.mtime {
+    text-align: center;
+}
+
+.path_abs_rel {
+    color: #3c3c3c;
+    text-decoration: none;
+    font-weight: bold;
+    font-family: sans-serif;
+    font-size: 10pt;
+}
+
+.path_abs_rel a {
+    color: #3c3c3c;
+    font-style: italic;
+}
diff --git a/module/webui/themes/dark/css/window.css b/module/webui/themes/dark/css/window.css
new file mode 100644
index 000000000..11ba84b39
--- /dev/null
+++ b/module/webui/themes/dark/css/window.css
@@ -0,0 +1,92 @@
+/* ----------- stylized ----------- */
+.window_table td {
+border:none;
+text-align:left;
+}
+#add_box {
+background-image: url(../img/dark-bg.jpg);
+color:white;
+}
+#pack_box {
+background-image: url(../img/dark-bg.jpg);
+color:white;
+}
+.window_box h1{
+    font-size:14px;
+    font-weight:bold;
+    margin-bottom:8px;
+}
+.window_box p{
+    font-size:11px;
+    color:white;
+    margin-bottom:20px;
+    border-bottom:solid 1px #b7ddf2;
+    padding-bottom:10px;
+}
+.window_box label{ /*Linke Seite*/
+    display:block;
+    font-weight:bold;
+    text-align:right;
+    width:240px;
+    float:left;
+    color:white;
+}
+.window_box .small{
+    color:grey;
+    display:block;
+    font-size:11px;
+    font-weight:normal;
+    text-align:right;
+    width:240px;
+}
+.window_box select, .window_box input{
+    float:left;
+    font-size:12px;
+    padding:4px 2px;
+    border:solid 1px #aacfe4;
+    width:300px;
+    margin:2px 0 20px 10px;
+    background-color:#202020;
+    color:white;
+}
+.window_box .cont{
+    float:left;
+    font-size:12px;
+    padding: 0px 10px 15px 0px;
+    width:300px;
+    margin:0px 0px 0px 10px;
+    color:white;
+}
+.window_box .cont input{
+    float: none;
+    margin: 0px 15px 0px 1px;
+    color:white;
+}
+.window_box textarea{
+    float:left;
+    font-size:12px;
+    padding:4px 2px;
+    border:solid 1px #aacfe4;
+    width:300px;
+    margin:2px 0 20px 10px;
+    background-color:#202020;
+    color:white;
+}
+.window_box button, .styled_button{
+    clear:both;
+    margin-left:150px;
+    width:125px;
+    height:31px;
+    background:#666666 url(../img/button.png) no-repeat;
+    text-align:center;
+    line-height:31px;
+    color:#FFFFFF;
+    font-size:11px;
+    font-weight:bold;
+    border: 0px;
+}
+
+.styled_button {
+    margin-left: 15px;
+    cursor: pointer;
+}
diff --git a/module/webui/themes/dark/img/add_folder.png b/module/webui/themes/dark/img/add_folder.png
new file mode 100644
index 000000000..8acbc411b
--- /dev/null
+++ b/module/webui/themes/dark/img/add_folder.png
diff --git a/module/webui/themes/dark/img/ajax-loader.gif b/module/webui/themes/dark/img/ajax-loader.gif
new file mode 100644
index 000000000..2fd8e0737
--- /dev/null
+++ b/module/webui/themes/dark/img/ajax-loader.gif
diff --git a/module/webui/themes/dark/img/arrow_refresh.png b/module/webui/themes/dark/img/arrow_refresh.png
new file mode 100644
index 000000000..0de26566d
--- /dev/null
+++ b/module/webui/themes/dark/img/arrow_refresh.png
diff --git a/module/webui/themes/dark/img/arrow_right.png b/module/webui/themes/dark/img/arrow_right.png
new file mode 100644
index 000000000..b1a181923
--- /dev/null
+++ b/module/webui/themes/dark/img/arrow_right.png
diff --git a/module/webui/themes/dark/img/big_button.gif b/module/webui/themes/dark/img/big_button.gif
new file mode 100644
index 000000000..7680490ea
--- /dev/null
+++ b/module/webui/themes/dark/img/big_button.gif
diff --git a/module/webui/themes/dark/img/big_button_over.gif b/module/webui/themes/dark/img/big_button_over.gif
new file mode 100644
index 000000000..2e3ee10d2
--- /dev/null
+++ b/module/webui/themes/dark/img/big_button_over.gif
diff --git a/module/webui/themes/dark/img/body.png b/module/webui/themes/dark/img/body.png
new file mode 100644
index 000000000..7ff1043e0
--- /dev/null
+++ b/module/webui/themes/dark/img/body.png
diff --git a/module/webui/themes/dark/img/button.png b/module/webui/themes/dark/img/button.png
new file mode 100644
index 000000000..bb408a7d6
--- /dev/null
+++ b/module/webui/themes/dark/img/button.png
diff --git a/module/webui/themes/dark/img/closebtn.gif b/module/webui/themes/dark/img/closebtn.gif
new file mode 100644
index 000000000..3e27e6030
--- /dev/null
+++ b/module/webui/themes/dark/img/closebtn.gif
diff --git a/module/webui/themes/dark/img/cog.png b/module/webui/themes/dark/img/cog.png
new file mode 100644
index 000000000..67de2c6cc
--- /dev/null
+++ b/module/webui/themes/dark/img/cog.png
diff --git a/module/webui/themes/dark/img/control_add.png b/module/webui/themes/dark/img/control_add.png
new file mode 100644
index 000000000..d39886893
--- /dev/null
+++ b/module/webui/themes/dark/img/control_add.png
diff --git a/module/webui/themes/dark/img/control_add_blue.png b/module/webui/themes/dark/img/control_add_blue.png
new file mode 100644
index 000000000..d11b7f41d
--- /dev/null
+++ b/module/webui/themes/dark/img/control_add_blue.png
diff --git a/module/webui/themes/dark/img/control_cancel.png b/module/webui/themes/dark/img/control_cancel.png
new file mode 100644
index 000000000..7b9bc3fba
--- /dev/null
+++ b/module/webui/themes/dark/img/control_cancel.png
diff --git a/module/webui/themes/dark/img/control_cancel_blue.png b/module/webui/themes/dark/img/control_cancel_blue.png
new file mode 100644
index 000000000..0c5c96ce3
--- /dev/null
+++ b/module/webui/themes/dark/img/control_cancel_blue.png
diff --git a/module/webui/themes/dark/img/control_pause.png b/module/webui/themes/dark/img/control_pause.png
new file mode 100644
index 000000000..2d9ce9c4e
--- /dev/null
+++ b/module/webui/themes/dark/img/control_pause.png
diff --git a/module/webui/themes/dark/img/control_pause_blue.png b/module/webui/themes/dark/img/control_pause_blue.png
new file mode 100644
index 000000000..ec61099b0
--- /dev/null
+++ b/module/webui/themes/dark/img/control_pause_blue.png
diff --git a/module/webui/themes/dark/img/control_play.png b/module/webui/themes/dark/img/control_play.png
new file mode 100644
index 000000000..0846555d0
--- /dev/null
+++ b/module/webui/themes/dark/img/control_play.png
diff --git a/module/webui/themes/dark/img/control_play_blue.png b/module/webui/themes/dark/img/control_play_blue.png
new file mode 100644
index 000000000..f8c8ec683
--- /dev/null
+++ b/module/webui/themes/dark/img/control_play_blue.png
diff --git a/module/webui/themes/dark/img/control_stop.png b/module/webui/themes/dark/img/control_stop.png
new file mode 100644
index 000000000..893bb60e5
--- /dev/null
+++ b/module/webui/themes/dark/img/control_stop.png
diff --git a/module/webui/themes/dark/img/control_stop_blue.png b/module/webui/themes/dark/img/control_stop_blue.png
new file mode 100644
index 000000000..e6f75d232
--- /dev/null
+++ b/module/webui/themes/dark/img/control_stop_blue.png
diff --git a/module/webui/themes/dark/img/dark-bg.jpg b/module/webui/themes/dark/img/dark-bg.jpg
new file mode 100644
index 000000000..637fa6b93
--- /dev/null
+++ b/module/webui/themes/dark/img/dark-bg.jpg
diff --git a/module/webui/themes/dark/img/delete.png b/module/webui/themes/dark/img/delete.png
new file mode 100644
index 000000000..08f249365
--- /dev/null
+++ b/module/webui/themes/dark/img/delete.png
diff --git a/module/webui/themes/dark/img/dialog-close.png b/module/webui/themes/dark/img/dialog-close.png
new file mode 100644
index 000000000..81ebb88b2
--- /dev/null
+++ b/module/webui/themes/dark/img/dialog-close.png
diff --git a/module/webui/themes/dark/img/dialog-error.png b/module/webui/themes/dark/img/dialog-error.png
new file mode 100644
index 000000000..d70328403
--- /dev/null
+++ b/module/webui/themes/dark/img/dialog-error.png
diff --git a/module/webui/themes/dark/img/dialog-question.png b/module/webui/themes/dark/img/dialog-question.png
new file mode 100644
index 000000000..b0af3db5b
--- /dev/null
+++ b/module/webui/themes/dark/img/dialog-question.png
diff --git a/module/webui/themes/dark/img/dialog-warning.png b/module/webui/themes/dark/img/dialog-warning.png
new file mode 100644
index 000000000..aad64d4be
--- /dev/null
+++ b/module/webui/themes/dark/img/dialog-warning.png
diff --git a/module/webui/themes/dark/img/drag_corner.gif b/module/webui/themes/dark/img/drag_corner.gif
new file mode 100644
index 000000000..befb1adf1
--- /dev/null
+++ b/module/webui/themes/dark/img/drag_corner.gif
diff --git a/module/webui/themes/dark/img/error.png b/module/webui/themes/dark/img/error.png
new file mode 100644
index 000000000..c37bd062e
--- /dev/null
+++ b/module/webui/themes/dark/img/error.png
diff --git a/module/webui/themes/dark/img/folder.png b/module/webui/themes/dark/img/folder.png
new file mode 100644
index 000000000..784e8fa48
--- /dev/null
+++ b/module/webui/themes/dark/img/folder.png
diff --git a/module/webui/themes/dark/img/full.png b/module/webui/themes/dark/img/full.png
new file mode 100644
index 000000000..fea52af76
--- /dev/null
+++ b/module/webui/themes/dark/img/full.png
diff --git a/module/webui/themes/dark/img/head-login.png b/module/webui/themes/dark/img/head-login.png
new file mode 100644
index 000000000..b59b7cbbf
--- /dev/null
+++ b/module/webui/themes/dark/img/head-login.png
diff --git a/module/webui/themes/dark/img/head-menu-collector.png b/module/webui/themes/dark/img/head-menu-collector.png
new file mode 100644
index 000000000..861be40bc
--- /dev/null
+++ b/module/webui/themes/dark/img/head-menu-collector.png
diff --git a/module/webui/themes/dark/img/head-menu-config.png b/module/webui/themes/dark/img/head-menu-config.png
new file mode 100644
index 000000000..bbf43d4f3
--- /dev/null
+++ b/module/webui/themes/dark/img/head-menu-config.png
diff --git a/module/webui/themes/dark/img/head-menu-development.png b/module/webui/themes/dark/img/head-menu-development.png
new file mode 100644
index 000000000..fad150fe1
--- /dev/null
+++ b/module/webui/themes/dark/img/head-menu-development.png
diff --git a/module/webui/themes/dark/img/head-menu-download.png b/module/webui/themes/dark/img/head-menu-download.png
new file mode 100644
index 000000000..98c5da9db
--- /dev/null
+++ b/module/webui/themes/dark/img/head-menu-download.png
diff --git a/module/webui/themes/dark/img/head-menu-home.png b/module/webui/themes/dark/img/head-menu-home.png
new file mode 100644
index 000000000..9d62109aa
--- /dev/null
+++ b/module/webui/themes/dark/img/head-menu-home.png
diff --git a/module/webui/themes/dark/img/head-menu-index.png b/module/webui/themes/dark/img/head-menu-index.png
new file mode 100644
index 000000000..44d631064
--- /dev/null
+++ b/module/webui/themes/dark/img/head-menu-index.png
diff --git a/module/webui/themes/dark/img/head-menu-news.png b/module/webui/themes/dark/img/head-menu-news.png
new file mode 100644
index 000000000..43950ebc9
--- /dev/null
+++ b/module/webui/themes/dark/img/head-menu-news.png
diff --git a/module/webui/themes/dark/img/head-menu-queue.png b/module/webui/themes/dark/img/head-menu-queue.png
new file mode 100644
index 000000000..be98793ce
--- /dev/null
+++ b/module/webui/themes/dark/img/head-menu-queue.png
diff --git a/module/webui/themes/dark/img/head-menu-recent.png b/module/webui/themes/dark/img/head-menu-recent.png
new file mode 100644
index 000000000..fc9b0497f
--- /dev/null
+++ b/module/webui/themes/dark/img/head-menu-recent.png
diff --git a/module/webui/themes/dark/img/head-menu-wiki.png b/module/webui/themes/dark/img/head-menu-wiki.png
new file mode 100644
index 000000000..07cf0102d
--- /dev/null
+++ b/module/webui/themes/dark/img/head-menu-wiki.png
diff --git a/module/webui/themes/dark/img/head-search-noshadow.png b/module/webui/themes/dark/img/head-search-noshadow.png
new file mode 100644
index 000000000..aafdae015
--- /dev/null
+++ b/module/webui/themes/dark/img/head-search-noshadow.png
diff --git a/module/webui/themes/dark/img/head_bg1.png b/module/webui/themes/dark/img/head_bg1.png
new file mode 100644
index 000000000..f2848c3cc
--- /dev/null
+++ b/module/webui/themes/dark/img/head_bg1.png
diff --git a/module/webui/themes/dark/img/images.png b/module/webui/themes/dark/img/images.png
new file mode 100644
index 000000000..184860d1e
--- /dev/null
+++ b/module/webui/themes/dark/img/images.png
diff --git a/module/webui/themes/dark/img/notice.png b/module/webui/themes/dark/img/notice.png
new file mode 100644
index 000000000..12cd1aef9
--- /dev/null
+++ b/module/webui/themes/dark/img/notice.png
diff --git a/module/webui/themes/dark/img/package_go.png b/module/webui/themes/dark/img/package_go.png
new file mode 100644
index 000000000..aace63ad6
--- /dev/null
+++ b/module/webui/themes/dark/img/package_go.png
diff --git a/module/webui/themes/dark/img/page-tools-backlinks.png b/module/webui/themes/dark/img/page-tools-backlinks.png
new file mode 100644
index 000000000..3eb6a9ce3
--- /dev/null
+++ b/module/webui/themes/dark/img/page-tools-backlinks.png
diff --git a/module/webui/themes/dark/img/page-tools-edit.png b/module/webui/themes/dark/img/page-tools-edit.png
new file mode 100644
index 000000000..188e1c12b
--- /dev/null
+++ b/module/webui/themes/dark/img/page-tools-edit.png
diff --git a/module/webui/themes/dark/img/page-tools-revisions.png b/module/webui/themes/dark/img/page-tools-revisions.png
new file mode 100644
index 000000000..5c3b8587f
--- /dev/null
+++ b/module/webui/themes/dark/img/page-tools-revisions.png
diff --git a/module/webui/themes/dark/img/parseUri.png b/module/webui/themes/dark/img/parseUri.png
new file mode 100644
index 000000000..937bded9d
--- /dev/null
+++ b/module/webui/themes/dark/img/parseUri.png
diff --git a/module/webui/themes/dark/img/pencil.png b/module/webui/themes/dark/img/pencil.png
new file mode 100644
index 000000000..0bfecd50e
--- /dev/null
+++ b/module/webui/themes/dark/img/pencil.png
diff --git a/module/webui/themes/dark/img/pyload-logo-edited3.5-new-font-small.png b/module/webui/themes/dark/img/pyload-logo-edited3.5-new-font-small.png
new file mode 100644
index 000000000..e878afee5
--- /dev/null
+++ b/module/webui/themes/dark/img/pyload-logo-edited3.5-new-font-small.png
diff --git a/module/webui/themes/dark/img/reconnect.png b/module/webui/themes/dark/img/reconnect.png
new file mode 100644
index 000000000..49b269145
--- /dev/null
+++ b/module/webui/themes/dark/img/reconnect.png
diff --git a/module/webui/themes/dark/img/status_None.png b/module/webui/themes/dark/img/status_None.png
new file mode 100644
index 000000000..e2672c206
--- /dev/null
+++ b/module/webui/themes/dark/img/status_None.png
diff --git a/module/webui/themes/dark/img/status_downloading.png b/module/webui/themes/dark/img/status_downloading.png
new file mode 100644
index 000000000..fb4ebc850
--- /dev/null
+++ b/module/webui/themes/dark/img/status_downloading.png
diff --git a/module/webui/themes/dark/img/status_failed.png b/module/webui/themes/dark/img/status_failed.png
new file mode 100644
index 000000000..c37bd062e
--- /dev/null
+++ b/module/webui/themes/dark/img/status_failed.png
diff --git a/module/webui/themes/dark/img/status_finished.png b/module/webui/themes/dark/img/status_finished.png
new file mode 100644
index 000000000..89c8129a4
--- /dev/null
+++ b/module/webui/themes/dark/img/status_finished.png
diff --git a/module/webui/themes/dark/img/status_offline.png b/module/webui/themes/dark/img/status_offline.png
new file mode 100644
index 000000000..0cfd58596
--- /dev/null
+++ b/module/webui/themes/dark/img/status_offline.png
diff --git a/module/webui/themes/dark/img/status_proc.png b/module/webui/themes/dark/img/status_proc.png
new file mode 100644
index 000000000..67de2c6cc
--- /dev/null
+++ b/module/webui/themes/dark/img/status_proc.png
diff --git a/module/webui/themes/dark/img/status_queue.png b/module/webui/themes/dark/img/status_queue.png
new file mode 100644
index 000000000..e2672c206
--- /dev/null
+++ b/module/webui/themes/dark/img/status_queue.png
diff --git a/module/webui/themes/dark/img/status_waiting.png b/module/webui/themes/dark/img/status_waiting.png
new file mode 100644
index 000000000..2842cc338
--- /dev/null
+++ b/module/webui/themes/dark/img/status_waiting.png
diff --git a/module/webui/themes/dark/img/success.png b/module/webui/themes/dark/img/success.png
new file mode 100644
index 000000000..89c8129a4
--- /dev/null
+++ b/module/webui/themes/dark/img/success.png
diff --git a/module/webui/themes/dark/img/tab-background.png b/module/webui/themes/dark/img/tab-background.png
new file mode 100644
index 000000000..ee96b8407
--- /dev/null
+++ b/module/webui/themes/dark/img/tab-background.png
diff --git a/module/webui/themes/dark/img/tabs-border-bottom.png b/module/webui/themes/dark/img/tabs-border-bottom.png
new file mode 100644
index 000000000..02440f428
--- /dev/null
+++ b/module/webui/themes/dark/img/tabs-border-bottom.png
diff --git a/module/webui/themes/dark/img/user-actions-logout.png b/module/webui/themes/dark/img/user-actions-logout.png
new file mode 100644
index 000000000..0010931e2
--- /dev/null
+++ b/module/webui/themes/dark/img/user-actions-logout.png
diff --git a/module/webui/themes/dark/img/user-actions-profile.png b/module/webui/themes/dark/img/user-actions-profile.png
new file mode 100644
index 000000000..46573fff6
--- /dev/null
+++ b/module/webui/themes/dark/img/user-actions-profile.png
diff --git a/module/webui/themes/dark/img/user-info.png b/module/webui/themes/dark/img/user-info.png
new file mode 100644
index 000000000..6e643100f
--- /dev/null
+++ b/module/webui/themes/dark/img/user-info.png
diff --git a/module/webui/themes/dark/tml/admin.html b/module/webui/themes/dark/tml/admin.html
new file mode 100644
index 000000000..b9d3a8d1e
--- /dev/null
+++ b/module/webui/themes/dark/tml/admin.html
@@ -0,0 +1,98 @@
+{% extends '/dark/tml/base.html' %}
+
+{% block head %}
+    <script type="text/javascript" src="/default/js/admin.min.js"></script>
+{% endblock %}
+
+
+{% block title %}{{ _("Administrate") }} - {{ super() }} {% endblock %}
+{% block subtitle %}{{ _("Administrate") }}{% endblock %}
+
+{% block content %}
+    
+    <a href="#" id="quit-pyload" style="font-size: large; font-weight: bold;">{{_("Quit pyLoad")}}</a> |
+    <a href="#" id="restart-pyload" style="font-size: large; font-weight: bold;">{{_("Restart pyLoad")}}</a>
+    <br>
+    <br>
+
+    {{ _("To add user or change passwords use:") }} <b>python pyLoadCore.py -u</b><br>
+    {{ _("Important: Admin user have always all permissions!") }}
+
+    <form action="" method="POST">
+        <table class="settable wide">
+            <thead style="font-size: 11px">
+            <th>
+                {{ _("Name") }}
+            </th>
+            <th>
+                {{ _("Change Password") }}
+            </th>
+            <th>
+                {{ _("Admin") }}
+            </th>
+            <th>
+                {{ _("Permissions") }}
+            </th>
+            </thead>
+
+            {% for name, data in users.iteritems() %}
+                <tr>
+                    <td>{{ name }}</td>
+                    <td><a class="change_password" href="#" id="change_pw|{{name}}">{{ _("change") }}</a></td>
+                    <td><input name="{{ name }}|admin" type="checkbox" {% if data.perms.admin %}
+                               checked="True" {% endif %}"></td>
+                    <td>
+                        <select multiple="multiple" size="{{ permlist|length }}" name="{{ name }}|perms">
+                            {% for perm in permlist %}
+                            {% if data.perms|getitem(perm) %}
+                                <option selected="selected">{{ perm }}</option>
+                            {% else %}
+                                <option>{{ perm }}</option>
+                            {% endif %}
+                            {% endfor %}
+                        </select>
+                    </td>
+                </tr>
+            {% endfor %}
+
+
+        </table>
+
+        <button class="styled_button" type="submit">{{ _("Submit") }}</button>
+    </form>
+{% endblock %}
+{% block hidden %}
+    <div id="password_box" class="window_box" style="z-index: 2">
+        <form id="password_form" action="/json/change_password" method="POST" enctype="multipart/form-data">
+            <h1>{{ _("Change Password") }}</h1>
+
+            <p>{{ _("Enter your current and desired Password.") }}</p>
+            <label for="user_login">{{ _("User") }}
+                <span class="small">{{ _("Your username.") }}</span>
+            </label>
+            <input id="user_login" name="user_login" type="text" size="20"/>
+
+            <label for="login_current_password">{{ _("Current password") }}
+                <span class="small">{{ _("The password for this account.") }}</span>
+            </label>
+            <input id="login_current_password" name="login_current_password" type="password" size="20"/>
+
+            <label for="login_new_password">{{ _("New password") }}
+                <span class="small">{{ _("The new password.") }}</span>
+            </label>
+            <input id="login_new_password" name="login_new_password" type="password" size="20"/>
+
+            <label for="login_new_password2">{{ _("New password (repeat)") }}
+                <span class="small">{{ _("Please repeat the new password.") }}</span>
+            </label>
+            <input id="login_new_password2" name="login_new_password2" type="password" size="20"/>
+
+
+            <button id="login_password_button" type="submit">{{ _("Submit") }}</button>
+            <button id="login_password_reset" style="margin-left: 0" type="reset">{{ _("Reset") }}</button>
+            <div class="spacer"></div>
+
+        </form>
+
+    </div>
+{% endblock %}
diff --git a/module/webui/themes/dark/tml/base.html b/module/webui/themes/dark/tml/base.html
new file mode 100644
index 000000000..ebfb1ba3e
--- /dev/null
+++ b/module/webui/themes/dark/tml/base.html
@@ -0,0 +1,180 @@
+<?xml version="1.0" ?>
+<!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">
+<head>
+
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+<link rel="stylesheet" type="text/css" href="/dark/css/default.css"/>
+<link rel="stylesheet" type="text/css" href="/dark/css/window.css"/>
+<link rel="stylesheet" type="text/css" href="/dark/css/MooDialog.css"/>
+
+<script type="text/javascript" src="/default/js/mootools-core.min.js"></script>
+<script type="text/javascript" src="/default/js/mootools-more.min.js"></script>
+<script type="text/javascript" src="/default/js/MooDialog.min.static.js"></script>
+<script type="text/javascript" src="/default/js/purr.min.static.js"></script>
+
+
+<script type="text/javascript" src="/default/js/base.min.js"></script>
+
+<title>{% block title %}pyLoad {{_("Webinterface")}}{% endblock %}</title>
+
+{% block head %}
+{% endblock %}
+</head>
+<body>
+<a class="anchor" name="top" id="top"></a>
+
+<div id="head-panel">
+
+
+    <div id="head-search-and-login">
+    {% block headpanel %}
+
+        {% if user.is_authenticated %}
+
+
+{% if update %}
+<span>
+<span style="font-weight: bold; margin: 0 2px 0 2px;">{{_("pyLoad Update available!")}}</span>
+</span>
+{% endif %}
+
+
+{% if plugins %}
+<span>
+<span style="font-weight: bold; margin: 0 2px 0 2px;">{{_("Plugins updated, please restart!")}}</span>
+</span>
+{% endif %}
+
+<span id="cap_info" style="display: {% if captcha %}inline{%else%}none{% endif %}">
+<img src="/dark/img/images.png" alt="Captcha:" style="vertical-align:middle; margin:2px" />
+<span style="font-weight: bold; cursor: pointer; margin-right: 2px;">{{_("Captcha waiting")}}</span>
+</span>
+
+    <img src="/dark/img/head-login.png" alt="User:" style="vertical-align:middle; margin:2px" /><span style="padding-right: 2px;">{{user.name}}</span>
+  <ul id="user-actions">
+    <li><a href="/logout"  class="action logout" rel="nofollow">{{_("Logout")}}</a></li>
+    {% if user.is_admin %}
+    <li><a href="/admin" class="action profile" rel="nofollow">{{_("Administrate")}}</a></li>
+    {% endif %}
+        <li><a href="/info"  class="action info" rel="nofollow">{{_("Info")}}</a></li>
+
+  </ul>
+{% else %}
+    <span style="padding-right: 2px;">{{_("Please Login!")}}</span>
+{% endif %}
+
+    {% endblock %}
+  </div>
+
+  <a href="/"><img id="head-logo" src="/dark/img/pyload-logo-edited3.5-new-font-small.png" alt="pyLoad" /></a>
+{% if user.is_authenticated %}
+  <div id="head-menu">
+    <ul>
+
+        {% macro selected(name, right=False) -%}
+            {% if name in url -%}class="{% if right -%}right {% endif %}selected"{%- endif %}
+            {% if not name in url and right -%}class="right"{%- endif %}
+        {%- endmacro %}
+
+
+    {% block menu %}
+    <li>
+        <a href="/" title=""><img src="/dark/img/head-menu-home.png" alt="" /> {{_("Home")}}</a>
+    </li>
+    <li {{ selected('queue') }}>
+        <a href="/queue/" title=""><img src="/dark/img/head-menu-queue.png" alt="" /> {{_("Queue")}}</a>
+    </li>
+    <li {{ selected('collector') }}>
+        <a href="/collector/" title=""><img src="/dark/img/head-menu-collector.png" alt="" /> {{_("Collector")}}</a>
+    </li>
+    <li {{ selected('downloads') }}>
+        <a href="/downloads/" title=""><img src="/dark/img/head-menu-development.png" alt="" /> {{_("Downloads")}}</a>
+    </li>
+{#    <li {{ selected('filemanager') }}>#}
+{#        <a href="/filemanager/" title=""><img src="/dark/img/head-menu-download.png" alt="" /> {{_("FileManager")}}</a>#}
+{#    </li>#}
+    <li {{ selected('logs', True) }}>
+        <a href="/logs/"  class="action index" accesskey="x" rel="nofollow"><img src="/dark/img/head-menu-index.png" alt="" />{{_("Logs")}}</a>
+    </li>
+    <li {{ selected('settings', True) }}>
+        <a href="/settings/"  class="action index" accesskey="x" rel="nofollow"><img src="/dark/img/head-menu-config.png" alt="" />{{_("Config")}}</a>
+    </li>
+    {% endblock %}
+    
+    </ul>
+  </div>{% endif %}
+
+  <div style="clear:both;"></div>
+</div>
+
+{% if perms.STATUS %}
+<ul id="page-actions2">
+  <li id="action_play"><a href="#"  class="action play" accesskey="o" rel="nofollow">{{_("Start")}}</a></li>
+    <li id="action_stop"><a href="#"  class="action stop" accesskey="o" rel="nofollow">{{_("Stop")}}</a></li>
+    <li id="action_cancel"><a href="#"  class="action cancel" accesskey="o" rel="nofollow">{{_("Cancel")}}</a></li>
+    <li id="action_add"><a href="#"  class="action add" accesskey="o" rel="nofollow" >{{_("Add")}}</a></li>
+</ul>
+{% endif %}
+
+{% if perms.LIST %}
+<ul id="page-actions">
+    <li><span class="time">{{_("Download:")}}</span><a id="time" style=" background-color: {% if status.download %}#8ffc25{% else %} #fc6e26{% endif %}; padding-left: 0cm; padding-right: 0.1cm;color:black; "> {% if status.download %}{{_("on")}}{% else %}{{_("off")}}{% endif %}</a></li>
+    <li><span class="reconnect">{{_("Reconnect:")}}</span><a id="reconnect" style=" background-color: {% if status.reconnect %}#8ffc25{% else %} #fc6e26{% endif %}; padding-left: 0cm; padding-right: 0.1cm;color:black; "> {% if status.reconnect %}{{_("on")}}{% else %}{{_("off")}}{% endif %}</a></li>
+    <li><a class="action backlink">{{_("Speed:")}} <b id="speed">{{ status.speed }}</b></a></li>
+    <li><a class="action cog">{{_("Active:")}} <b id="aktiv" title="{{_("Active")}}">{{ status.active }}</b> / <b id="aktiv_from" title="{{_("Queued")}}">{{ status.queue }}</b> / <b id="aktiv_total" title="{{_("Total")}}">{{ status.total }}</b></a></li>
+    <li><a href=""  class="action revisions" accesskey="o" rel="nofollow">{{_("Reload page")}}</a></li>
+</ul>
+{% endif %}
+
+{% block pageactions %}
+{% endblock %}
+<br/>
+
+<div id="body-wrapper" class="dokuwiki">
+
+<div id="content" lang="en" dir="ltr">
+
+<h1>{% block subtitle %}pyLoad - {{_("Webinterface")}}{% endblock %}</h1>
+
+{% block statusbar %}
+{% endblock %}
+
+
+<br/>
+
+<div class="level1" style="clear:both">
+</div>
+<noscript><h1>Enable JavaScript to use the webinterface.</h1></noscript>
+
+{% for message in messages %}
+  <b><p>{{message}}</p></b>
+{% endfor %}
+
+<div id="load-indicator" style="opacity: 0; float: right; margin-top: -10px;">
+    <img src="/dark/img/ajax-loader.gif" alt="" style="padding-right: 5px"/>
+    {{_("loading")}}
+</div>
+
+{% block content %}
+{% endblock content %}
+
+  <hr style="clear: both;" />
+
+<div id="foot">&copy; 2008-2011 pyLoad Team
+<a href="#top" class="action top" accesskey="x"><span>{{_("Back to top")}}</span></a><br />
+<!--<div class="breadcrumbs"></div>-->
+
+</div>
+</div>
+</div>
+
+<div id="window_popup" style="display: none;">
+    {% include '/dark/tml/window.html' %}
+    {% include '/dark/tml/captcha.html' %}
+    {% block hidden %}
+    {% endblock %}
+</div>
+</body>
+</html>
diff --git a/module/webui/themes/dark/tml/captcha.html b/module/webui/themes/dark/tml/captcha.html
new file mode 100644
index 000000000..ae1afe444
--- /dev/null
+++ b/module/webui/themes/dark/tml/captcha.html
@@ -0,0 +1,42 @@
+<!-- Captcha box -->
+<div id="cap_box" class="window_box">
+
+  <form id="cap_form" action="/json/set_captcha" method="POST" enctype="multipart/form-data" onsubmit="return false;">
+  
+    <h1>{{_("Captcha reading")}}</h1>
+    <p id="cap_title">{{_("Please read the text on the captcha.")}}</p>
+    
+    <div id="cap_textual">
+    
+      <input id="cap_id" name="cap_id" type="hidden" value="" />
+    
+      <label>{{_("Captcha")}}
+      <span class="small">{{_("The captcha.")}}</span>
+      </label>
+      <span class="cont">
+          <img id="cap_textual_img" src="">
+      </span>
+      
+      <label>{{_("Text")}}
+      <span class="small">{{_("Input the text on the captcha.")}}</span>
+      </label>
+      <input id="cap_result" name="cap_result" type="text" size="20" />
+          
+    </div>
+    
+    <div id="cap_positional" style="text-align: center">
+        <img id="cap_positional_img" src="" style="margin: 10px; cursor:pointer">
+    </div>
+
+    <div id="button_bar" style="text-align: center">
+      <span>
+        <button id="cap_submit" type="submit" style="margin-left: 0">{{_("Submit")}}</button>
+        <button id="cap_reset" type="reset" style="margin-left: 0">{{_("Close")}}</button>
+      </span>
+    </div>
+    
+    <div class="spacer"></div>
+  
+  </form>
+
+</div>
\ No newline at end of file
diff --git a/module/webui/themes/dark/tml/downloads.html b/module/webui/themes/dark/tml/downloads.html
new file mode 100644
index 000000000..8a68d3f99
--- /dev/null
+++ b/module/webui/themes/dark/tml/downloads.html
@@ -0,0 +1,29 @@
+{% extends '/dark/tml/base.html' %}
+
+{% block title %}Downloads - {{super()}} {% endblock %}
+
+{% block subtitle %}
+{{_("Downloads")}}
+{% endblock %}
+
+{% block content %}
+
+<ul>
+    {% for folder in files.folder %}
+    <li>
+        {{ folder.name }}
+        <ul>
+        {% for file in folder.files %}
+        <li><a href='get/{{ folder.path|escape }}/{{ file|escape }}'>{{file}}</a></li>
+        {% endfor %}
+        </ul>
+    </li>
+    {% endfor %}
+    
+    {% for file in files.files %}
+    <li> <a href='get/{{ file|escape }}'>{{ file }}</a></li>
+    {% endfor %}
+
+</ul>
+
+{% endblock %}
\ No newline at end of file
diff --git a/module/webui/themes/dark/tml/filemanager.html b/module/webui/themes/dark/tml/filemanager.html
new file mode 100644
index 000000000..fc3a1fcd3
--- /dev/null
+++ b/module/webui/themes/dark/tml/filemanager.html
@@ -0,0 +1,78 @@
+{% extends '/dark/tml/base.html' %}
+
+{% block head %}
+
+<script type="text/javascript" src="/default/js/filemanager.min.js"></script>
+
+<script type="text/javascript">
+
+document.addEvent("domready", function(){
+    var fmUI = new FilemanagerUI("url",1);
+});
+</script>
+{% endblock %}
+
+{% block title %}Downloads - {{super()}} {% endblock %}
+
+
+{% block subtitle %}
+{{_("FileManager")}}
+{% endblock %}
+
+{% macro display_file(file) %}
+  <li class="file">
+    <input type="hidden" name="path" class="path" value="{{ file.path }}" />
+    <input type="hidden" name="name" class="name" value="{{ file.name }}" />
+    <span>
+      <b>{{ file.name }}</b>
+      <span class="buttons" style="opacity:0">
+      <img title="{{_("Rename Directory")}}" class="rename" style="cursor: pointer" height="12px" src="/dark/img/pencil.png" />
+      &nbsp;&nbsp;
+      <img title="{{_("Delete Directory")}}" class="delete" style="margin-left: -10px; cursor: pointer" width="12px" height="12px" src="/dark/img/delete.png" />
+      </span>
+    </span>
+  </li>
+{%- endmacro %}
+
+{% macro display_folder(fld, open = false) -%}
+    <li class="folder">
+      <input type="hidden" name="path" class="path" value="{{ fld.path }}" />
+      <input type="hidden" name="name" class="name" value="{{ fld.name }}" />
+      <span>
+  <b>{{ fld.name }}</b>
+  <span class="buttons" style="opacity:0">
+        <img title="{{_("Rename Directory")}}" class="rename" style="cursor: pointer" height="12px" src="/dark/img/pencil.png" />
+        &nbsp;&nbsp;
+        <img title="{{_("Delete Directory")}}" class="delete" style="margin-left: -10px; cursor: pointer" width="12px" height="12px" src="/dark/img/delete.png" />
+        &nbsp;&nbsp;
+        <img title="{{_("Add subdirectory")}}" class="mkdir" style="margin-left: -10px; cursor: pointer" width="12px" height="12px" src="/dark/img/add_folder.png" />
+  </span>
+      </span>
+      {% if (fld.folders|length + fld.files|length) > 0 %}
+  {% if open %}
+    <ul>
+  {% else %}
+    <ul style="display:none">
+  {% endif %}
+    {% for child in fld.folders %}
+        {{ display_folder(child) }}
+    {% endfor %}
+    {% for child in fld.files %}
+        {{ display_file(child) }}
+    {% endfor %}
+  </ul>
+      {% else %}
+  <div style="display:none">{{ _("Folder is empty") }}</div>
+      {% endif %}
+    </li>
+{%- endmacro %}
+
+{% block content %}
+
+<div style="clear:both"><!-- --></div>
+
+<ul id="directories-list">
+{{ display_folder(root, true) }}
+</ul>
+
+{% endblock %}
diff --git a/module/webui/themes/dark/tml/folder.html b/module/webui/themes/dark/tml/folder.html
new file mode 100644
index 000000000..81758b544
--- /dev/null
+++ b/module/webui/themes/dark/tml/folder.html
@@ -0,0 +1,15 @@
+<li class="folder">
+  <input type="hidden" name="path" class="path" value="{{ path }}" />
+  <input type="hidden" name="name" class="name" value="{{ name }}" />
+  <span>
+    <b>{{ name }}</b>
+    <span class="buttons" style="opacity:0">
+    <img title="{{_("Rename Directory")}}" class="rename" style="cursor: pointer" height="12px" src="/dark/img/pencil.png" />
+    &nbsp;&nbsp;
+    <img title="{{_("Delete Directory")}}" class="delete" style="margin-left: -10px; cursor: pointer" width="12px" height="12px" src="/dark/img/delete.png" />
+    &nbsp;&nbsp;
+    <img title="{{_("Add subdirectory")}}" class="mkdir" style="margin-left: -10px; cursor: pointer" width="12px" height="12px" src="/dark/img/add_folder.png" />
+    </span>
+  </span>
+  <div style="display:none">{{ _("Folder is empty") }}</div>
+</li>
\ No newline at end of file
diff --git a/module/webui/themes/dark/tml/home.html b/module/webui/themes/dark/tml/home.html
new file mode 100644
index 000000000..68bf387af
--- /dev/null
+++ b/module/webui/themes/dark/tml/home.html
@@ -0,0 +1,266 @@
+{% extends '/dark/tml/base.html' %}
+{% block head %}
+
+<script type="text/javascript">
+
+var em;
+var operafix = (navigator.userAgent.toLowerCase().search("opera") >= 0);
+
+document.addEvent("domready", function(){
+  em = new EntryManager();
+});
+
+var EntryManager = new Class({
+    initialize: function(){
+        this.json = new Request.JSON({
+    url: "json/links",
+                secure: false,
+                async: true,
+    onSuccess: this.update.bind(this),
+    initialDelay: 0,
+    delay: 2500,
+    limit: 30000
+  });
+  
+        this.ids = [{% for link in content %}
+        {% if forloop.last %}
+            {{ link.id }}
+        {% else %}
+         {{ link.id }},
+        {% endif %}
+        {% endfor %}];
+        
+        this.entries = [];
+        this.container = $('LinksAktiv');
+        
+        this.parseFromContent();
+            
+        this.json.startTimer();
+    },
+    parseFromContent: function(){
+        this.ids.each(function(id,index){
+            var entry = new LinkEntry(id);
+            entry.parse();
+            this.entries.push(entry)
+            }, this);
+    },
+    update: function(data){
+        
+        try{
+        this.ids = this.entries.map(function(item){
+            return item.fid
+            });
+        
+        this.ids.filter(function(id){
+            return !this.ids.contains(id)
+        },data).each(function(id){
+            var index = this.ids.indexOf(id);
+            this.entries[index].remove();
+            this.entries = this.entries.filter(function(item){return item.fid != this},id);
+            this.ids = this.ids.erase(id)
+            }, this);
+        
+        data.links.each(function(link, i){
+            if (this.ids.contains(link.fid)){
+                
+                var index = this.ids.indexOf(link.fid);
+                this.entries[index].update(link)
+            
+            }else{
+                var entry = new LinkEntry(link.fid);
+                entry.insert(link);
+                this.entries.push(entry);
+                this.ids.push(link.fid);
+                this.container.adopt(entry.elements.tr,entry.elements.pgbTr);
+                entry.fade.start('opacity', 1);
+                entry.fadeBar.start('opacity', 1);
+                
+            }
+            }, this)
+        }catch(e){
+            //alert(e)
+        }
+    }
+});
+
+
+var LinkEntry = new Class({
+        initialize: function(id){
+            this.fid = id;
+            this.id = id;
+        },
+        parse: function(){
+            this.elements = {
+                tr: $("link_{id}".substitute({id: this.id})),
+                name: $("link_{id}_name".substitute({id: this.id})),
+                status: $("link_{id}_status".substitute({id: this.id})),
+                info: $("link_{id}_info".substitute({id: this.id})),
+                bleft: $("link_{id}_bleft".substitute({id: this.id})),
+                percent: $("link_{id}_percent".substitute({id: this.id})),
+                remove: $("link_{id}_remove".substitute({id: this.id})),
+                pgbTr: $("link_{id}_pgb_tr".substitute({id: this.id})),
+                pgb: $("link_{id}_pgb".substitute({id: this.id}))
+            };
+            this.initEffects();
+        },
+        insert: function(item){
+            try{
+
+            this.elements = {
+                tr: new Element('tr', {
+                'html': '',
+                'styles':{
+                    'opacity': 0
+                }
+                }),
+                name: new Element('td', {
+                'html': item.name
+                }),
+                status: new Element('td', {
+                'html': item.statusmsg
+                }),
+                info: new Element('td', {
+                'html': item.info
+                }),
+                bleft: new Element('td', {
+                'html': humanFileSize(item.size)
+                }),
+                percent: new Element('span', {
+                'html': item.percent+ '% / '+ humanFileSize(item.size-item.bleft)
+                }),
+                remove: new Element('img',{
+                'src': '/dark/img/control_cancel.png',
+                'styles':{
+                    'vertical-align': 'middle',
+                    'margin-right': '-20px',
+                    'margin-left': '5px',
+                    'margin-top': '-2px',
+                    'cursor': 'pointer'
+                }
+                }),
+                pgbTr: new Element('tr', {
+                'html':''
+                }),
+                pgb: new Element('div', {
+                'html': '&nbsp;',
+                'styles':{
+                    'height': '4px',
+                    'width': item.percent+'%',
+                    'background-color': '#ddd'
+                }
+                })
+            };
+            
+            this.elements.tr.adopt(this.elements.name,this.elements.status,this.elements.info,this.elements.bleft,new Element('td').adopt(this.elements.percent,this.elements.remove));
+            this.elements.pgbTr.adopt(new Element('td',{'colspan':5}).adopt(this.elements.pgb));
+            this.initEffects();
+            }catch(e){
+                alert(e)
+            }
+        },
+        initEffects: function(){
+            if(!operafix)
+                this.bar = new Fx.Morph(this.elements.pgb, {unit: '%', duration: 5000, link: 'link', fps:30});
+            this.fade = new Fx.Tween(this.elements.tr);
+            this.fadeBar = new Fx.Tween(this.elements.pgbTr);
+            
+            this.elements.remove.addEvent('click', function(){
+                new Request({method: 'get', url: '/json/abort_link/'+this.id}).send();
+            }.bind(this));
+            
+        },
+        update: function(item){
+                this.elements.name.set('text', item.name);
+                this.elements.status.set('text', item.statusmsg);
+                this.elements.info.set('text', item.info);
+                this.elements.bleft.set('text', item.format_size);
+                this.elements.percent.set('text', item.percent+ '% / '+ humanFileSize(item.size-item.bleft));
+                if(!operafix)
+                {
+                    this.bar.start({
+                        'width': item.percent,
+                        'background-color': [Math.round(120/100*item.percent),100,100].hsbToRgb().rgbToHex()
+                    });
+                }
+                else
+                {
+                    this.elements.pgb.set(
+                        'styles', {
+                            'height': '4px',
+                            'width': item.percent+'%',
+                            'background-color': [Math.round(120/100*item.percent),100,100].hsbToRgb().rgbToHex(),
+                         });
+                }
+        },
+        remove: function(){
+                this.fade.start('opacity',0).chain(function(){this.elements.tr.dispose();}.bind(this));
+                this.fadeBar.start('opacity',0).chain(function(){this.elements.pgbTr.dispose();}.bind(this));
+
+        }
+    });
+</script>
+
+{% endblock %}
+
+{% block subtitle %}
+{{_("Active Downloads")}}
+{% endblock %}
+
+{% block menu %}
+<li class="selected">
+    <a href="/" title=""><img src="/dark/img/head-menu-home.png" alt="" /> {{_("Home")}}</a>
+</li>
+<li>
+    <a href="/queue/" title=""><img src="/dark/img/head-menu-queue.png" alt="" /> {{_("Queue")}}</a>
+</li>
+<li>
+    <a href="/collector/" title=""><img src="/dark/img/head-menu-collector.png" alt="" /> {{_("Collector")}}</a>
+</li>
+<li>
+    <a href="/downloads/" title=""><img src="/dark/img/head-menu-development.png" alt="" /> {{_("Downloads")}}</a>
+</li>
+{#<li>#}
+{#    <a href="/filemanager/" title=""><img src="/dark/img/head-menu-download.png" alt="" /> {{_("FileManager")}}</a>#}
+{#</li>#}
+<li class="right">
+    <a href="/logs/"  class="action index" accesskey="x" rel="nofollow"><img src="/dark/img/head-menu-index.png" alt="" />{{_("Logs")}}</a>
+</li>
+<li class="right">
+    <a href="/settings/"  class="action index" accesskey="x" rel="nofollow"><img src="/dark/img/head-menu-config.png" alt="" />{{_("Config")}}</a>
+</li>
+{% endblock %}
+
+{% block content %}
+<table width="100%" class="queue">
+    <thead>
+  <tr class="header">
+    <th>{{_("Name")}}</th>
+    <th>{{_("Status")}}</th>
+    <th>{{_("Information")}}</th>
+    <th>{{_("Size")}}</th>
+    <th>{{_("Progress")}}</th>
+  </tr>
+    </thead>
+  <tbody id="LinksAktiv">
+  
+  {% for link in content %}
+  <tr id="link_{{ link.id }}">
+    <td id="link_{{ link.id }}_name">{{ link.name }}</td>
+    <td id="link_{{ link.id }}_status">{{ link.status }}</td>
+    <td id="link_{{ link.id }}_info">{{ link.info }}</td>
+    <td id="link_{{ link.id }}_bleft">{{ link.format_size }}</td>
+    <td>
+        <span id="link_{{ link.id }}_percent">{{ link.percent }}% /{{ link.bleft }}</span>
+        <img id="link_{{ link.id }}_remove" style="vertical-align: middle; margin-right: -20px; margin-left: 5px; margin-top: -2px; cursor:pointer;" src="/dark/img/control_cancel.png"/>
+    </td>
+  </tr>
+  <tr id="link_{{ link.id }}_pgb_tr">
+    <td colspan="5">
+        <div id="link_{{ link.id }}_pgb" class="progressBar" style="background-color: green; height:4px; width: {{ link.percent }}%;">&nbsp;</div>
+    </td>
+  </tr>
+  {% endfor %}
+  
+  </tbody>
+</table>
+{% endblock %}
\ No newline at end of file
diff --git a/module/webui/themes/dark/tml/info.html b/module/webui/themes/dark/tml/info.html
new file mode 100644
index 000000000..7ff2b639b
--- /dev/null
+++ b/module/webui/themes/dark/tml/info.html
@@ -0,0 +1,76 @@
+{% extends '/dark/tml/base.html' %}
+
+{% block head %}
+{% endblock %}
+
+{% block title %}{{ _("Information") }} - {{ super() }} {% endblock %}
+{% block subtitle %}{{ _("Information") }}{% endblock %}
+
+{% block content %}
+    <h3>{{ _("News") }}</h3>
+
+    <ul id="twitter_update_list"></ul>
+    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.min.js"></script>
+    <script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=pyLoad&include_rts=true&count=5&callback=twitterCallback2"></script>
+
+    <h3>{{ _("Support") }}</h3>
+
+    <ul>
+        <li style="font-weight:bold;">
+            <a href="http://pyload.org/wiki" target="_blank">Wiki</a>
+            &nbsp;&nbsp;|&nbsp;&nbsp;
+            <a href="http://forum.pyload.org/" target="_blank">Forum</a>
+            &nbsp;&nbsp;|&nbsp;&nbsp;
+            <a href="http://pyload.org/irc/" target="_blank">Chat</a>
+        </li>
+        <li style="font-weight:bold;"><a href="http://docs.pyload.org" target="_blank">Documentation</a></li>
+        <li style="font-weight:bold;"><a href="https://bitbucket.org/spoob/pyload/overview" target="_blank">Development</a></li>
+        <li style="font-weight:bold;"><a href="https://bitbucket.org/spoob/pyload/issues?status=new&status=open" target="_blank">Issue Tracker</a></li>
+
+    </ul>
+
+    <h3>{{ _("System") }}</h3>
+    <table class="system">
+         <tr>
+            <td>{{ _("Python:") }}</td>
+            <td>{{ python }}</td>
+        </tr>
+        <tr>
+            <td>{{ _("OS:") }}</td>
+            <td>{{ os }}</td>
+        </tr>
+        <tr>
+            <td>{{ _("pyLoad version:") }}</td>
+            <td>{{ version }}</td>
+        </tr>
+        <tr>
+            <td>{{ _("Installation Folder:") }}</td>
+            <td>{{ folder }}</td>
+        </tr>
+        <tr>
+            <td>{{ _("Config Folder:") }}</td>
+            <td>{{ config }}</td>
+        </tr>
+        <tr>
+            <td>{{ _("Download Folder:") }}</td>
+            <td>{{ download }}</td>
+        </tr>
+        <tr>
+            <td>{{ _("Free Space:") }}</td>
+            <td>{{ freespace }}</td>
+        </tr>
+        <tr>
+            <td>{{ _("Language:") }}</td>
+            <td>{{ language }}</td>
+        </tr>
+        <tr>
+            <td>{{ _("Webinterface Port:") }}</td>
+            <td>{{ webif }}</td>
+        </tr>
+        <tr>
+            <td>{{ _("Remote Interface Port:") }}</td>
+            <td>{{ remote }}</td>
+        </tr>
+    </table>
+
+{% endblock %}
\ No newline at end of file
diff --git a/module/webui/themes/dark/tml/login.html b/module/webui/themes/dark/tml/login.html
new file mode 100644
index 000000000..9ddb308df
--- /dev/null
+++ b/module/webui/themes/dark/tml/login.html
@@ -0,0 +1,37 @@
+{% extends '/dark/tml/base.html' %}
+
+{% block title %}{{_("Login")}} - {{super()}} {% endblock %}
+
+{% block content %}
+
+<div class="centeralign">
+<form action="" method="post" accept-charset="utf-8" id="login">
+    <div class="no">
+        <input type="hidden" name="do" value="login" />
+        <fieldset>
+        <legend>Login</legend>
+{% if errors %}
+<p style="color:red;">{{_("Your username and password didn't match. Please try again.")}}</p>
+{% endif %}
+    <table id="login_table">
+        <tr>
+            <td>{{_("Username")}}</td>
+            <td><input type="text" size="20" name="username" /></td>
+        </tr>
+        <tr>
+            <td>{{_("Password")}}</td>
+            <td><input type="password" size="20" name="password" /></td>
+        </tr>
+<tr>
+<td>&nbsp;</td>
+        <td><input type="submit" value="Login" class="button" /></td>
+</tr>
+</table>
+        </fieldset>
+    </div>
+</form>
+
+</div>
+<br>
+    
+{% endblock %}
diff --git a/module/webui/themes/dark/tml/logout.html b/module/webui/themes/dark/tml/logout.html
new file mode 100644
index 000000000..5320e07f5
--- /dev/null
+++ b/module/webui/themes/dark/tml/logout.html
@@ -0,0 +1,9 @@
+{% extends '/dark/tml/base.html' %}
+
+{% block head %}
+<meta http-equiv="refresh" content="3; url=/">
+{% endblock %}
+
+{% block content %}
+<p><b>{{_("You were successfully logged out.")}}</b></p>
+{% endblock %}
\ No newline at end of file
diff --git a/module/webui/themes/dark/tml/logs.html b/module/webui/themes/dark/tml/logs.html
new file mode 100644
index 000000000..86983f2af
--- /dev/null
+++ b/module/webui/themes/dark/tml/logs.html
@@ -0,0 +1,41 @@
+{% extends '/dark/tml/base.html' %}
+
+{% block title %}{{_("Logs")}} - {{super()}} {% endblock %}
+{% block subtitle %}{{_("Logs")}}{% endblock %}
+{% block head %}
+<link rel="stylesheet" type="text/css" href="/dark/css/log.css"/>
+{% endblock %}
+
+{% block content %}
+<div style="clear: both;"></div>
+
+<div class="logpaginator"><a href="{{ "/logs/1" }}">&lt;&lt; {{_("Start")}}</a>  <a href="{{ "/logs/" + iprev|string }}">&lt; {{_("prev")}}</a>  <a href="{{ "/logs/" + inext|string }}">{{_("next")}} &gt;</a> <a href="/logs/">{{_("End")}} &gt;&gt;</a></div>
+<div class="logperpage">
+    <form id="logform1" action="" method="POST">
+        <label for="reversed">Reversed:</label>
+        <input type="checkbox" name="reversed" onchange="this.form.submit();" {% if reversed %} checked="checked" {% endif %} />&nbsp;
+        <label for="perpage">Lines per page:</label>
+        <select name="perpage" onchange="this.form.submit();">
+            {% for value in  perpage_p %}
+                <option value="{{value.0}}"{% if value.0 == perpage %} selected="selected" {% endif %}>{{value.1}}</option>
+            {% endfor %}
+        </select>
+    </form>
+</div>
+<div class="logwarn">{{warning}}</div>
+<div style="clear: both;"></div>
+<div class="logdiv">
+    <table class="logtable" cellpadding="0" cellspacing="0">
+    {% for line in log %}
+        <tr><td class="logline">{{line.line}}</td><td>{{line.date}}</td><td class="loglevel">{{line.level}}</td><td>{{line.message}}</td></tr>
+    {% endfor %}
+    </table>
+</div>
+<div class="logform">
+<form id="logform2" action="" method="POST">
+    <label for="from">Jump to time:</label><input type="text" name="from" size="15" value="{{from}}"/>
+    <input type="submit" value="ok" />
+</form>
+</div>
+<div style="clear: both; height: 10px;">&nbsp; </div>
+{% endblock %}
\ No newline at end of file
diff --git a/module/webui/themes/dark/tml/pathchooser.html b/module/webui/themes/dark/tml/pathchooser.html
new file mode 100644
index 000000000..a38c0614b
--- /dev/null
+++ b/module/webui/themes/dark/tml/pathchooser.html
@@ -0,0 +1,76 @@
+<html>
+<head>
+  <script class="javascript">
+        function chosen()
+        {
+            opener.ifield.value = document.forms[0].p.value;
+            close();
+        }
+        function exit()
+        {
+            close();
+        }
+        function setInvalid() {
+            document.forms[0].send.disabled = 'disabled';
+            document.forms[0].p.style.color = '#FF0000';
+        }
+        function setValid() {
+            document.forms[0].send.disabled = '';
+            document.forms[0].p.style.color = '#000000';
+        }
+        function setFile(file)
+        {
+            document.forms[0].p.value = file;
+            setValid();
+            
+        }
+  </script>
+  <link rel="stylesheet" type="text/css" href="/dark/css/pathchooser.css"/>
+</head>
+<body{% if type == 'file' %}{% if not oldfile %} onload="setInvalid();"{% endif %}{% endif %}>
+<center>
+    <div id="paths">
+  <form method="get" action="?" onSubmit="chosen();" onReset="exit();">
+      <input type="text" name="p" value="{{ oldfile|default(cwd) }}" size="60" onfocus="setValid();">
+      <input type="submit" value="Ok" name="send">
+  </form>
+    
+    {% if type == 'folder' %}
+  <span class="path_abs_rel">{{_("Path")}}: <a href="{{ "/pathchooser" + cwd|path_make_absolute|quotepath }}"{% if absolute %} style="text-decoration: underline;"{% endif %}>{{_("absolute")}}</a> | <a href="{{ "/pathchooser/" + cwd|path_make_relative|quotepath }}"{% if not absolute %} style="text-decoration: underline;"{% endif %}>{{_("relative")}}</a></span>
+    {% else %}
+  <span class="path_abs_rel">{{_("Path")}}: <a href="{{ "/filechooser/" + cwd|path_make_absolute|quotepath }}"{% if absolute %} style="text-decoration: underline;"{% endif %}>{{_("absolute")}}</a> | <a href="{{ "/filechooser/" + cwd|path_make_relative|quotepath }}"{% if not absolute %} style="text-decoration: underline;"{% endif %}>{{_("relative")}}</a></span>
+    {% endif %}
+    </div>
+    <table border="0" cellspacing="0" cellpadding="3">
+        <tr>
+            <th>{{_("name")}}</th>
+            <th>{{_("size")}}</th>
+            <th>{{_("type")}}</th>
+            <th>{{_("last modified")}}</th>
+        </tr>
+  {% if parentdir %}
+        <tr>
+            <td colspan="4">
+                <a href="{% if type == 'folder' %}{{ "/pathchooser/" + parentdir|quotepath }}{% else %}{{ "/filechooser/" + parentdir|quotepath }}{% endif %}"><span class="parentdir">{{_("parent directory")}}</span></a>
+            </td>
+        </tr>
+  {% endif %}
+{% for file in files %}
+        <tr>
+            {% if type == 'folder' %}
+                <td class="name">{% if file.type == 'dir' %}<a href="{{ "/pathchooser/" + file.fullpath|quotepath }}" title="{{ file.fullpath }}"><span class="path_directory">{{ file.name|truncate(25) }}</span></a>{% else %}<span class="path_file" title="{{ file.fullpath }}">{{ file.name|truncate(25) }}{% endif %}</span></td>
+            {% else %}
+                <td class="name">{% if file.type == 'dir' %}<a href="{{ "/filechooser/" + file.fullpath|quotepath }}" title="{{ file.fullpath }}"><span class="file_directory">{{ file.name|truncate(25) }}</span></a>{% else %}<a href="#" onclick="setFile('{{ file.fullpath }}');" title="{{ file.fullpath }}"><span class="file_file">{{ file.name|truncate(25) }}{% endif %}</span></a></td>
+            {% endif %}
+            <td class="size">{{ file.size|float|filesizeformat }}</td>
+            <td class="type">{% if file.type == 'dir' %}directory{% else %}{{ file.ext|default("file") }}{% endif %}</td>
+            <td class="mtime">{{ file.modified|date("d.m.Y - H:i:s") }}</td>
+        <tr>
+<!--        <tr>
+            <td colspan="4">{{_("no content")}}</td>
+        </tr> -->
+{% endfor %}
+    </table>
+    </center>
+</body>
+</html>
\ No newline at end of file
diff --git a/module/webui/themes/dark/tml/queue.html b/module/webui/themes/dark/tml/queue.html
new file mode 100644
index 000000000..30c621466
--- /dev/null
+++ b/module/webui/themes/dark/tml/queue.html
@@ -0,0 +1,104 @@
+{% extends '/dark/tml/base.html' %}
+{% block head %}
+
+<script type="text/javascript" src="/default/js/package.min.js"></script>
+
+<script type="text/javascript">
+
+document.addEvent("domready", function(){
+    var pUI = new PackageUI("url", {{ target }});
+});
+</script>
+{% endblock %}
+
+{% if target %}
+    {% set name = _("Queue") %}
+{% else %}
+    {% set name = _("Collector") %}
+{% endif %}
+
+{% block title %}{{name}} - {{super()}} {% endblock %}
+{% block subtitle %}{{name}}{% endblock %}
+
+{% block pageactions %}
+<ul id="page-actions-more">
+    <li id="del_finished"><a style="padding: 0; font-weight: bold;" href="#">{{_("Delete Finished")}}</a></li>
+    <li id="restart_failed"><a style="padding: 0; font-weight: bold;" href="#">{{_("Restart Failed")}}</a></li>
+</ul>
+{% endblock %}
+
+{% block content %}
+{% autoescape true %}
+
+<ul id="package-list" style="list-style: none; padding-left: 0; margin-top: -10px;">
+{% for package in content %}
+    <li>
+<div id="package_{{package.pid}}" class="package">
+    <div class="order" style="display: none;">{{ package.order }}</div>
+    
+    <div class="packagename" style="cursor: pointer">
+        <img class="package_drag" src="/dark/img/folder.png" style="cursor: move; margin-bottom: -2px">
+        <span class="name">{{package.name}}</span>
+        &nbsp;&nbsp;
+        <span class="buttons" style="opacity:0">
+        <img title="{{_("Delete Package")}}" style="cursor: pointer" width="12px" height="12px" src="/dark/img/delete.png" />
+        &nbsp;&nbsp;
+        <img title="{{_("Restart Package")}}" style="margin-left: -10px; cursor: pointer" height="12px" src="/dark/img/arrow_refresh.png" />
+        &nbsp;&nbsp;
+        <img title="{{_("Edit Package")}}" style="margin-left: -10px; cursor: pointer" height="12px" src="/dark/img/pencil.png" />
+        &nbsp;&nbsp;
+        <img title="{{_("Move Package")}}" style="margin-left: -10px; cursor: pointer" height="12px" src="/dark/img/package_go.png" />
+        </span>
+    </div>
+    {% set progress = (package.linksdone * 100) / package.linkstotal %}
+
+    <div id="progress" style="border-radius: 4px; border: 1px solid grey; width: 50%; height: 1em">
+        <div style="width: {{ progress }}%; height: 100%; background-color: #525252;"></div>
+        <label style="font-size: 0.8em; font-weight: bold; padding-left: 5px; position: relative; top: -17px">
+        {{ package.sizedone|formatsize }} / {{ package.sizetotal|formatsize }}</label>
+        <label style="font-size: 0.8em; font-weight: bold; padding-right: 5px ;float: right; position: relative; top: -17px">
+        {{ package.linksdone }} / {{ package.linkstotal }}</label>
+        </div>
+    <div style="clear: both; margin-bottom: -10px"></div>
+
+    <div id="children_{{package.pid}}" style="display: none;" class="children">
+    <span class="child_secrow">{{_("Folder:")}} <span class="folder">{{package.folder}}</span> | {{_("Password:")}} <span class="password">{{package.password}}</span></span>
+    <ul id="sort_children_{{package.pid}}" style="list-style: none; padding-left: 0">
+    </ul>
+    </div>
+</div>
+    </li>
+{% endfor %}
+</ul>
+{% endautoescape %}
+{% endblock %}
+
+{% block hidden %}
+<div id="pack_box" class="window_box" style="z-index: 2">
+    <form id="pack_form" action="/json/edit_package" method="POST" enctype="multipart/form-data">
+    <h1>{{_("Edit Package")}}</h1>
+    <p>{{_("Edit the package detais below.")}}</p>
+    <input name="pack_id" id="pack_id" type="hidden" value=""/>
+    <label for="pack_name">{{_("Name")}}
+    <span class="small">{{_("The name of the package.")}}</span>
+    </label>
+    <input id="pack_name" name="pack_name" type="text" size="20" />
+
+    <label for="pack_folder">{{_("Folder")}}
+    <span class="small">{{_("Name of subfolder for these downloads.")}}</span>
+    </label>
+    <input id="pack_folder" name="pack_folder" type="text" size="20" />
+
+    <label for="pack_pws">{{_("Password")}}
+    <span class="small">{{_("List of passwords used for unrar.")}}</span>
+    </label>
+    <textarea rows="3" name="pack_pws" id="pack_pws"></textarea>
+
+    <button type="submit">{{_("Submit")}}</button>
+    <button id="pack_reset" style="margin-left: 0" type="reset" >{{_("Reset")}}</button>
+    <div class="spacer"></div>
+
+    </form>
+
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/module/webui/themes/dark/tml/settings.html b/module/webui/themes/dark/tml/settings.html
new file mode 100644
index 000000000..502eb8130
--- /dev/null
+++ b/module/webui/themes/dark/tml/settings.html
@@ -0,0 +1,204 @@
+{% extends '/dark/tml/base.html' %}
+
+{% block title %}{{ _("Config") }} - {{ super() }} {% endblock %}
+{% block subtitle %}{{ _("Config") }}{% endblock %}
+
+{% block head %}
+    <script type="text/javascript" src="/default/js/tinytab.min.static.js"></script>
+    <script type="text/javascript" src="/default/js/MooDropMenu.min.static.js"></script>
+    <script type="text/javascript" src="/default/js/settings.min.js"></script>
+
+{% endblock %}
+
+{% block content %}
+
+    <ul id="toptabs" class="tabs">
+            <li><a class="selected" href="#">{{ _("General") }}</a></li>
+            <li><a href="#">{{ _("Plugins") }}</a></li>
+            <li><a href="#">{{ _("Accounts") }}</a></li>
+    </ul>
+
+    <div id="tabsback" style="height: 20px; padding-left: 150px; color: white; font-weight: bold;">
+
+    </div>
+
+        <span id="tabs-body">
+            <!-- General -->
+            <span id="general" class="active tabContent">
+                <ul class="nav tabs">
+                    <li class>
+                        <a>Menu</a>
+                        <ul id="general-menu">
+                            {% for entry,name in conf.general %}
+                                <nobr>
+                                    <li style="color:white;" id="general|{{ entry }}">{{ name }}</li>
+                                </nobr>
+                                <br>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                </ul>
+
+                <form id="general_form" action="" method="POST" autocomplete="off">
+                    <span id="general_form_content">
+                    <br>
+                    <h3>&nbsp;&nbsp; {{ _("Choose a section from the menu") }}</h3>
+                    <br>
+                    </span>
+
+                  <input id="general|submit" class="styled_button" type="submit" value="{{_("Submit")}}"/>
+                </form>
+            </span>
+
+            <!-- Plugins -->
+            <span id="plugins" class="tabContent">
+                <ul class="nav tabs">
+                    <li class>
+                        <a>Menu</a>
+                        <ul id="plugin-menu">
+                            {% for entry,name in conf.plugin %}
+                                <nobr>
+                                    <li id="plugin|{{ entry }}">{{ name }}</li>
+                                </nobr>
+                                <br>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                </ul>
+
+
+                 <form id="plugin_form" action="" method="POST" autocomplete="off">
+
+                     <span id="plugin_form_content">
+                    <br>
+                    <h3>&nbsp;&nbsp; {{ _("Choose a section from the menu") }}</h3>
+                    <br>
+                         </span>
+                     <input id="plugin|submit" class="styled_button" type="submit" value="{{_("Submit")}}"/>
+                </form>
+
+            </span>
+
+            <!-- Accounts -->
+            <span id="accounts" class="tabContent">
+            <form id="account_form" action="/json/update_accounts" method="POST">
+
+                        <table class="settable wide">
+
+                        <thead>
+                        <tr>
+                            <th>{{ _("Plugin") }}</th>
+                            <th>{{ _("Name") }}</th>
+                            <th>{{ _("Password") }}</th>
+                            <th>{{ _("Status") }}</th>
+                            <th>{{ _("Premium") }}</th>
+                            <th>{{ _("Valid until") }}</th>
+                            <th>{{ _("Traffic left") }}</th>
+                            <th>{{ _("Time") }}</th>
+                            <th>{{ _("Max Parallel") }}</th>
+                            <th>{{ _("Delete?") }}</th>
+                        </tr>
+                        </thead>
+
+
+                            {% for account in conf.accs %}
+                                {% set plugin = account.type %}
+                                       <tr>
+                                            <td>
+                                                <span style="padding:5px">{{ plugin }}</span>
+                                            </td>
+                                       
+                                           <td><label for="{{plugin}}|password;{{account.login}}"
+                                                      style="color:grey;">{{ account.login }}</label></td>
+                                           <td>
+                                               <input id="{{plugin}}|password;{{account.login}}"
+                                                      name="{{plugin}}|password;{{account.login}}"
+                                                      type="password" value="{{account.password}}" size="12"/>
+                                           </td>
+                                           <td>
+                                               {% if account.valid %}
+                                                   <span style="font-weight: bold; color: #006400;">
+                                                   {{ _("valid") }}
+                                               {% else %}
+                                                   <span style="font-weight: bold; color: #8b0000;">
+                                                   {{ _("not valid") }}
+                                               {% endif %}
+                                               </span>
+                                           </td>
+                                          <td>
+                                               {% if account.premium %}
+                                                   <span style="font-weight: bold; color: #006400;">
+                                                   {{ _("yes") }}
+                                               {% else %}
+                                                   <span style="font-weight: bold; color: #8b0000;">
+                                                   {{ _("no") }}
+                                               {% endif %}
+                                               </span>
+                                           </td>
+                                           <td>
+                                   <span style="font-weight: bold;">
+                                   {{ account.validuntil }}
+                                   </span>
+                                           </td>
+                                           <td>
+                                   <span style="font-weight: bold;">
+                                   {{ account.trafficleft }}
+                                   </span>
+                                           </td>
+                                           <td>
+                                               <input id="{{plugin}}|time;{{account.login}}"
+                                                      name="{{plugin}}|time;{{account.login}}" type="text"
+                                                      size="7" value="{{account.time}}"/>
+                                           </td>
+                                           <td>
+                                               <input id="{{plugin}}|limitdl;{{account.login}}"
+                                                      name="{{plugin}}|limitdl;{{account.login}}" type="text"
+                                                      size="2" value="{{account.limitdl}}"/>
+                                           </td>
+                                           <td>
+                                               <input id="{{plugin}}|delete;{{account.login}}"
+                                                      name="{{plugin}}|delete;{{account.login}}" type="checkbox"
+                                                      value="True"/>
+                                           </td>
+                                       </tr>
+                                {% endfor %}
+                            </table>
+
+            <button id="account_submit" type="submit" class="styled_button">{{_("Submit")}}</button>
+            <button id="account_add" style="margin-left: 0" type="submit" class="styled_button">{{_("Add")}}</button>
+            </form>
+            </span>
+        </span>
+{% endblock %}
+{% block hidden %}
+<div id="account_box" class="window_box" style="z-index: 2">
+<form id="add_account_form" action="/json/add_account" method="POST" enctype="multipart/form-data">
+<h1>{{_("Add Account")}}</h1>
+<p>{{_("Enter your account data to use premium features.")}}</p>
+<label for="account_login">{{_("Login")}}
+<span class="small">{{_("Your username.")}}</span>
+</label>
+<input id="account_login" name="account_login" type="text" size="20" />
+
+<label for="account_password">{{_("Password")}}
+<span class="small">{{_("The password for this account.")}}</span>
+</label>
+<input id="account_password" name="account_password" type="password" size="20" />
+
+<label for="account_type">{{_("Type")}}
+<span class="small">{{_("Choose the hoster for your account.")}}</span>
+</label>
+    <select name=account_type id="account_type">
+        {% for type in types|sort %}
+            <option value="{{ type }}">{{ type }}</option>
+        {% endfor %}
+    </select>
+
+<button id="account_add_button" type="submit">{{_("Add")}}</button>
+<button id="account_reset" style="margin-left: 0" type="reset">{{_("Reset")}}</button>
+<div class="spacer"></div>
+
+</form>
+
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/module/webui/themes/dark/tml/settings_item.html b/module/webui/themes/dark/tml/settings_item.html
new file mode 100644
index 000000000..e417e564c
--- /dev/null
+++ b/module/webui/themes/dark/tml/settings_item.html
@@ -0,0 +1,48 @@
+<table class="settable">
+    {% if section.outline %}
+    <tr><th colspan="2">{{ section.outline }}</th></tr>
+    {% endif %}
+    {% for okey, option in section.iteritems() %}
+        {% if okey not in ("desc","outline") %}
+            <tr>
+                <td><label for="{{skey}}|{{okey}}"
+                           style="color:white;">{{ option.desc }}:</label></td>
+                <td>
+                    {% if option.type == "bool" %}
+                        <select id="{{skey}}|{{okey}}" name="{{skey}}|{{okey}}">
+                            <option {% if option.value %} selected="selected"
+                                                          {% endif %}value="True">{{ _("on") }}</option>
+                            <option {% if not option.value %} selected="selected"
+                                                              {% endif %}value="False">{{ _("off") }}</option>
+                        </select>
+                        {% elif ";" in option.type %}
+                        <select id="{{skey}}|{{okey}}" name="{{skey}}|{{okey}}">
+                            {% for entry in option.list %}
+                                <option {% if option.value == entry %}
+                                        selected="selected" {% endif %}>{{ entry }}</option>
+                            {% endfor %}
+                        </select>
+                        {% elif option.type == "folder" %}
+                        <input name="{{skey}}|{{okey}}" type="text"
+                               id="{{skey}}|{{okey}}" value="{{option.value}}"/>
+                        <input name="browsebutton" type="button"
+                               onclick="ifield = document.getElementById('{{skey}}|{{okey}}'); pathchooser = window.open('{% if option.value %}{{ "/pathchooser/" + option.value|quotepath }}{% else %}{{ pathroot }}{% endif %}', 'pathchooser', 'scrollbars=yes,toolbar=no,menubar=no,statusbar=no,width=650,height=300'); pathchooser.ifield = ifield; window.ifield = ifield;"
+                               value="{{_("Browse")}}"/>
+                        {% elif option.type == "file" %}
+                        <input name="{{skey}}|{{okey}}" type="text"
+                               id="{{skey}}|{{okey}}" value="{{option.value}}"/>
+                        <input name="browsebutton" type="button"
+                               onclick="ifield = document.getElementById('{{skey}}|{{okey}}'); filechooser = window.open('{% if option.value %}{{ "/filechooser/" + option.value|quotepath }}{% else %}{{ fileroot }}{% endif %}', 'filechooser', 'scrollbars=yes,toolbar=no,menubar=no,statusbar=no,width=650,height=300'); filechooser.ifield = ifield; window.ifield = ifield;"
+                               value="{{_("Browse")}}"/>
+                        {% elif option.type == "password" %}
+                        <input id="{{skey}}|{{okey}}" name="{{skey}}|{{okey}}"
+                               type="password" value="{{option.value}}"/>
+                    {% else %}
+                        <input id="{{skey}}|{{okey}}" name="{{skey}}|{{okey}}"
+                               type="text" value="{{option.value}}"/>
+                    {% endif %}
+                </td>
+            </tr>
+        {% endif %}
+    {% endfor %}
+</table>
\ No newline at end of file
diff --git a/module/webui/themes/dark/tml/window.html b/module/webui/themes/dark/tml/window.html
new file mode 100644
index 000000000..82481fb27
--- /dev/null
+++ b/module/webui/themes/dark/tml/window.html
@@ -0,0 +1,52 @@
+<iframe id="upload_target" name="upload_target" src="" style="display: none; width:0;height:0"></iframe>
+
+<div id="add_box" class="window_box">
+<form id="add_form" action="/json/add_package" method="POST" enctype="multipart/form-data">
+<h1>{{_("Add Package")}}</h1>
+<p>{{_("Paste your links or upload a container.")}}</p>
+<label for="add_name">{{_("Name")}}
+<span class="small">{{_("The name of the new package.")}}</span>
+</label>
+<input id="add_name" name="add_name" type="text" size="20" />
+
+<label for="add_links">{{_("Links")}}
+<span class="small">{{_("Paste your links here or any text and press the filter button.")}}</span>
+<span class="small"> {{ _("Filter urls") }}
+<img alt="URIParsing" Title="Parse Uri" src="/dark/img/parseUri.png" style="cursor:pointer; vertical-align: text-bottom;" onclick="parseUri()"/>
+</span>
+
+</label>
+<textarea rows="5" name="add_links" id="add_links"></textarea>
+
+<label for="add_password">{{_("Password")}}
+    <span class="small">{{_("Password for RAR-Archive")}}</span>
+</label>
+<input id="add_password" name="add_password" type="text" size="20">
+
+<label>{{_("File")}}
+<span class="small">{{_("Upload a container.")}}</span>
+</label>
+<input type="file" name="add_file" id="add_file"/>
+
+<label for="add_dest">{{_("Destination")}}
+</label>
+<span class="cont">
+<table class="window_table">
+<tr>
+    <td>{{_("Queue")}}</td>
+    <td><input type="radio" name="add_dest" id="add_dest" value="1" checked="checked" /></td>
+</tr>
+<tr>
+    <td>{{_("Collector")}}</td>
+    <td><input type="radio" name="add_dest" id="add_dest2" value="0" /></td>
+</tr>
+</table>
+</span>
+
+<button type="submit">{{_("Add Package")}}</button>
+<button id="add_reset" style="margin-left:0;" type="reset">{{_("Reset")}}</button>
+<div class="spacer"></div>
+
+</form>
+
+</div>
\ No newline at end of file