From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 7 Mar 2012 17:19:32 +0000 (+0100)
Subject: Added less 1.2.2
X-Git-Tag: 2.0.0_Beta_1~1245^2~9
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=0606fac336f80b739fb08a080292ec3f7e1ef599;p=GitHub%2FWoltLab%2FWCF.git

Added less 1.2.2
---

diff --git a/com.woltlab.wcf/template/headInclude.tpl b/com.woltlab.wcf/template/headInclude.tpl
index d450f70e01..ab09e83ec2 100644
--- a/com.woltlab.wcf/template/headInclude.tpl
+++ b/com.woltlab.wcf/template/headInclude.tpl
@@ -24,10 +24,12 @@
 {event name='javascriptInclude'}
 
 <!-- Stylesheets -->
-<style type="text/css">
-	@import url("{@$__wcf->getPath('wcf')}acp/style/wcf.css") screen;
+<link rel="stylesheet/less" type="text/css" href="{@$__wcf->getPath()}acp/style/wcf.less" />
+<script type="text/javascript" src="{@$__wcf->getPath()}js/3rdParty/less.min.js"></script>
 	
+<style type="text/css">
 	{*
+	@import url("{@$__wcf->getPath('wcf')}acp/style/wcf.css") screen;
 	@import url("{@$__wcf->getPath('wcf')}acp/style/style-{@$__wcf->getLanguage()->getPageDirection()}.css") screen;
 
 	@import url("{@$__wcf->getPath('wcf')}acp/style/print.css") print;
diff --git a/wcfsetup/install/files/acp/style/wcf.css b/wcfsetup/install/files/acp/style/wcf.css
deleted file mode 100644
index 965c1643ca..0000000000
--- a/wcfsetup/install/files/acp/style/wcf.css
+++ /dev/null
@@ -1,4648 +0,0 @@
-/**
- * WCF Testing Styles  
- *
- * @author		Harald Szekely 
- * @copyright	2011 WoltLab GmbH 
- */
-
-/* ############## Reset ############## */
-
-/**
- * Parts taken from
- * http://meyerweb.com/eric/tools/css/reset/ 
- * v2.0 | 20110126
- * License: none (public domain)
- * modifyed to meet the needs of WoltLab
- */
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-}
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-
-ol, ul {
-	list-style: none;
-}
-
-blockquote, q {
-	quotes: none;
-}
-
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-	content: '';
-	content: none;
-}
-
-
-
-/* ############## Globals ############## */
-
-* {
-	text-overflow: ellipsis;
-}
-
-img {
-	vertical-align: middle !important;
-}
-
-a {
-	color: #369;
-	text-decoration: none;
-	
-	-webkit-transition: color .1s linear;
-	-moz-transition: color .1s linear;
-	-ms-transition: color .1s linear;
-	-o-transition: color .1s linear;
-	transition: color .1s linear;
-}
-
-a:hover {
-	text-decoration: underline;
-	color: #036;
-}
-
-hr {
-	display: none;
-}
-
-::selection {
-	text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
-	color: #300;
-	background-color: rgba(255, 170, 34, .7);
-}
-
-a,
-img[src*='delete'],
-img[src*='uninstall'],
-img[src*='install'],
-img[src*='update'],
-img[src*='run'],
-img[src*='info'],
-img[src*='disable'],
-img[src*='enable'] {
-	cursor: pointer;
-}
-
-
-
-/* ############## ToDo: Global Structural Classes ############## */
-
-/* -- -- -- Misc -- -- --  */
-
-.hot {
-	color: #b00; 
-}
-
-.invisible {
-	position: absolute;
-	left: -9000px;
-	top: -9000px;
-}
-
-/* Uniform background image */
-
-.wcf-headerImage {
-	background-image: url('../../../images/header.png');
-}
-
-/* -- -- -- URLs -- -- --  */
-
-.wcf-externalURL {
-	background-image: url('../../icon/externalURL1.svg');
-	background-position: right center;
-	background-repeat: no-repeat;
-	padding-right: 17px;
-}
-
-.wcf-eMailLink,
-a[href^="mailto:"] {
-	background-image: url('../../icon/email1.svg');
-	background-position: left center;
-	background-repeat: no-repeat;
-	padding-left: 17px;
-}
-
-/* -- -- -- Margins -- -- --  */
-
-.wcf-marginTop {
-	margin-top: 15px;
-}
-
-.wcf-marginBottom {
-	margin-bottom: 15px;
-}
-
-/* -- -- -- Paddings -- -- --  */
-
-/* ToDo: Columns */
-
-.wcf-columns-2 {
-	width: 45%;
-}
-
-.wcf-columns-3 {
-	width: 30%;
-}
-
-
-/* -- -- -- ToDo: Floated Elements -- -- --  */
-
-/* possibly obsolete */
-
-.floatContainer:after {
-	content: "";
-	height: 0;
-	display: block;
-	clear: both;
-}
-
-.floated {
-	margin-right: 5px;
-	margin-left: 5px;
-	float: left;
-}
-
-
-
-/* -- -- -- Shadows -- -- --  */
-
-/* Shadows for boxes - do not use on small boxes! */
-
-.wcf-shadow1 {
-	-webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
-	-moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
-	-ms-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
-	/* ToDo: Opera doesn't like that so much! Bug-report sent to Opera 
-	-o-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
-	box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);*/
-}
-
-/* Use that shadow for tab menus - do not use on small boxes! */
-
-.wcf-shadow2 {
-	-webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);
-	-moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);
-	-ms-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);
-	/* ToDo: Opera doesn't like that so much! Bug-report sent to Opera 
-	-o-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);
-	box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);*/
-}
-
-
-
-/* ############## Containers ############## */
-
-/* -- -- -- Globals -- -- --  */
-
-/** 
- * This is a generic container for surrounding blocks of 
- * text with an optional leading icon. The icon-size is 
- * free. The icon-Container is optional. 
- * Note: 
- * This box does not support RTL in WebKit-browsers! 
- * Thus the box-style may change in the future. 
- */
-
-.wcf-container {
-	overflow: hidden;
-	box-sizing: border-box;
-}
-
-.wcf-containerIcon {
-	float: left;
-	margin-right: 5px;
-}
-
-.wcf-containerContent {
-	padding: 1px;
-	overflow: hidden;
-}
-
-
-
-/* ############## Badges ############## */
-
-/* Globals */
-
-.wcf-badge {
-	font-size: 85%;
-	font-weight: bold;
-	text-shadow: none;
-	text-decoration: none;
-	border-radius: 13px;
-	background-color: rgba(255, 255, 255, 1);
-	margin-right: -3px;
-	margin-left: 3px;
-	padding: 2px 5px;
-	display: inline-block;
-	position: relative;
-	top: -1px;
-}
-
-/* Badge Types */
-
-.wcf-badgeBorder {
-	border: 1px solid #ccc;
-}
-
-.wcf-badgeBlue {
-	color: #68b;
-	border: 1px solid #9be;
-	background-color: #def;
-}
-
-.wcf-badgeGreen {
-	color: #090;
-	border: 1px solid #0c0;
-	background-color: #efe;
-}
-
-.wcf-badgeYellow {
-	color: #990;
-	border: 1px solid #cc0;
-	background-color: #ffd;
-}
-
-.wcf-badgeRed {
-	color: #c00;
-	border: 1px solid #f99;
-	background-color: #fee;
-}
-
-/* Buttons */
-
-.wcf-badgeButton {
-	cursor: pointer;
-	border-radius: 30px;
-	margin-right: 0;
-	margin-left: 0;
-	padding: 3px 10px 5px;
-	display: inline-block;
-}
-
-li.wcf-badgeButton,
-li > .wcf-badgeButton {
-	margin-top: 7px;
-	margin-right: 3px;
-	margin-left: 3px;
-	float: left;
-}
-
-.wcf-badgeButton,
-.wcf-badgeButton a {
-	text-decoration: none !important;
-}
-
-
-
-/* ############## Labels ############## */
-
-/* -- -- -- Label List -- -- -- */
-
-.wcf-labelList {
-	margin: 0;
-	padding: 5px 0 0;
-	display: inline-block;
-}
-
-/* -- -- -- Label -- -- -- */
-
-/* Globals */
-
-.wcf-label {
-	font-size: 85%;
-	font-weight: bold;
-	color: #eee;
-	text-shadow: none;
-	text-decoration: none;
-	border-radius: 13px;
-	background-color: rgba(102, 102, 102, 1);
-	margin-right: 3px;
-	padding: 3px 8px 4px;
-	display: inline-block;
-	position: relative;
-	top: -1px;
-	cursor: pointer;
-}
-
-.wcf-label:hover {
-	color: rgba(255, 255, 255, 1);
-	background-color: rgba(51, 51, 51, 1);
-}
-
-.wcf-label a {
-	color: #eee;
-	text-decoration: none;
-}
-
-.wcf-label a:hover {
-	color: rgba(255, 255, 255, 1);
-}
-
-/* Default Colors */
-
-.wcf-label.black {
-	background-color: #333;
-}
-
-.wcf-label.black:hover {
-	background-color: #000;
-}
-
-.wcf-label.brown {
-	background-color: #c63;
-}
-
-.wcf-label.brown:hover {
-	background-color: #930;
-}
-
-.wcf-label.red {
-	background-color: #c00;
-}
-
-.wcf-label.red:hover {
-	background-color: #900;
-}
-
-.wcf-label.orange {
-	background-color: #f90;
-}
-
-.wcf-label.orange:hover {
-	background-color: #f60;
-}
-
-.wcf-label.yellow {
-	background-color: #ff0;
-}
-
-.wcf-label.yellow:hover {
-	background-color: #cc0;
-}
-
-.wcf-label.green {
-	background-color: #0c0;
-}
-
-.wcf-label.green:hover {
-	background-color: #090;
-}
-
-.wcf-label.blue {
-	background-color: #09f;
-}
-
-.wcf-label.blue:hover {
-	background-color: #06c;
-}
-
-.wcf-label.purple {
-	background-color: #c0f;
-}
-
-.wcf-label.purple:hover {
-	background-color: #90c;
-}
-
-.wcf-label.pink {
-	background-color: #f0c;
-}
-
-.wcf-label.pink:hover {
-	background-color: #c09;
-}
-
-/* Special */
-
-table .wcf-label {
-	padding: 1px 6px 2px;
-}
-
-
-
-/* ############## ToDo: Dropdown ############## */
-
-/* Dropdown Caption */
-
-.wcf-dropdownCaption,
-.wcf-dropdownCaption a {
-	text-decoration: none;
-	cursor: pointer;
-	display: inline-block;
-}
-
-.wcf-dropdownCaption:hover,
-.wcf-dropdownCaption a:hover {
-	text-decoration: none;
-}
-
-/* Dropdown */
-
-.wcf-dropdown {
-	color: rgba(255, 255, 255, 1);
-	border-width: 1px;
-	border-style: solid;
-	border-color: rgba(255, 255, 255, .7);
-	border-radius: 5px;
-	background-color: rgba(0, 0, 0, .7);
-	margin-top: 25px;
-	display: none;
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: 400;
-	overflow: hidden;
-	white-space: nowrap;
-	
-	-webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-	-moz-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-	-ms-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-	-o-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-	box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-	
-	-webkit-transition: color background .1s ease;
-	-moz-transition: color background .1s ease;
-	-ms-transition: color background .1s ease;
-	-o-transition: color background .1s ease;
-	transition: color background .1s ease;
-}
-
-.wcf-dropdown.open {
-	display: block;
-}
-
-/* Dropdown Items */
-
-.wcf-dropdown > li,
-.wcf-dropdown > div {
-	text-shadow: none;
-	color: #ccc;
-	cursor: pointer; 
-	
-	-webkit-transition: color background .2s linear;
-	-moz-transition: color background .2s linear;
-	-ms-transition: color background .2s linear;
-	-o-transition: color background .2s linear;
-	transition: color background .2s linear;
-}
-
-.wcf-dropdown > div {
-	padding: 5px 7px;
-}
-
-.wcf-dropdown > :first-child {
-	border-top-left-radius: 5px;
-	border-top-right-radius: 5px;
-}
-
-.wcf-dropdown > :last-child {
-	border-bottom-left-radius: 5px;
-	border-bottom-right-radius: 5px;
-}
-
-.wcf-dropdown > :hover:not(ul):not(.pointer),
-.wcf-dropdown > .active {
-	color: rgba(255, 255, 255, 1);
-	cursor: pointer;
-	background-color: rgba(0, 0, 0, .5);
-}
-
-.wcf-dropdown > li.divider:not(:first-child) {
-	border-top: 1px solid rgba(255, 255, 255, .7);
-}
-
-.wcf-dropdown > li {
-	text-decoration: none;
-	padding: 5px 7px;
-	display: block;
-}
-
-.wcf-dropdown > li a {
-	text-decoration: none;
-	color: #ccc;
-	padding: -5px -7px; /* ToDo: what's that? ;-) */
-	display: block;
-}
-
-.wcf-dropdown > li a:hover {
-	color: rgba(255, 255, 255, 1);
-	background-color: rgba(0, 0, 0, .5);
-}
-
-
-
-/* ############## Body ############## */
-
-/* Globals */
-
-body {
-	font-family: 'Trebuchet MS', Arial, sans-serif;
-	font-size: 80%;
-	color: rgba(102, 102, 102, 1);
-	line-height: 1;
-	background-color: rgba(41, 55, 74, 1);
-}
-
-
-
-/* ############## Page Header & Page Footer ############## */
-
-/* Globals */
-
-header.wcf-pageHeader {
-	/* Disabled, because the WoltLab header-image is not LGPL 
-	Activate it if you want to test your own header image */
-	/* background-image: url('../../../images/header.png'); */
-	background-position: center top;
-	background-repeat: repeat-x;
-	background-attachment: fixed;
-	width: 100%;
-	overflow: hidden;
-	position: relative;
-	z-index: 100;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	header.wcf-pageHeader,
-	header.wcf-pageFooter {
-		min-width: 800px;
-	}
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	header.wcf-pageHeader,
-	header.wcf-pageFooter {
-		/* none */
-	}
-}
-
-.wcf-pageHeader:after,
-.wcf-pageFooter:after {
-	content: '';
-	display: block;
-	clear: both;
-}
-
-.wcf-pageFooter {
-	text-align: center;
-	padding-bottom: 23px;
-	position: relative;
-	z-index: 80;
-}
-
-
-
-/* -- -- -- Copyright -- -- -- */
-
-.wcf-pageFooter .wcf-copyright {
-	padding-top: 20px;
-	display: inline-block;
-}
-
-.wcf-pageFooter .wcf-copyright a {
-	text-shadow: 0 -1px 0 #000;
-}
-
-.wcf-pageFooter .wcf-copyright a:hover {
-	text-decoration: none;
-	color: #69c;
-}
-
-
-
-/* -- -- -- Top Menu -- -- -- */
-
-/* Globals */
-
-nav.wcf-topMenu {
-	border-bottom: 1px solid rgba(0, 0, 0, .1);
-	background-color: rgba(0, 0, 0, .4);
-	position: fixed;
-	top: 0;
-	right: 0;
-	left: 0;	
-	z-index: 300;
-	box-sizing: border-box;
-	
-	-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-	-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-	-ms-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-	-o-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-	box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-	
-	-webkit-transition: background .2s linear;
-	-moz-transition: background .2s linear;
-	-ms-transition: background .2s linear;
-	-o-transition: background .2s linear;
-	transition: background .2s linear;
-	
-	-webkit-animation-name: showTopMenu;
-	-webkit-animation-duration: .3s;
-	-webkit-animation-timing-function: linear; 
-	
-	-moz-animation-name: showTopMenu;
-	-moz-animation-duration: .3s;
-	-moz-animation-timing-function: linear;
-	
-	-ms-animation-name: showTopMenu;
-	-ms-animation-duration: .3s;
-	-ms-animation-timing-function: linear; 
-	/* disabled to ease rendering work for Opera 
-	-o-animation-name: showTopMenu;
-	-o-animation-duration: .3s;
-	-o-animation-timing-function: linear;
-	*/
-	animation-name: showTopMenu;
-	animation-duration: .3s;
-	animation-timing-function: linear;
-}
-
-/* Show Top Menu */
-
-@-webkit-keyframes showTopMenu {
-	0% {
-		opacity: 0;
-		top: -50px;
-	}
-	60% {
-		top: 0;
-	}
-	80% {
-		top: -15px;
-	}
-	100% {
-		opacity: 1;
-		top: auto;
-	}
-}
-@-moz-keyframes showTopMenu {
-	0% {
-		opacity: 0;
-		top: -50px;
-	}
-	60% {
-		top: 0;
-	}
-	80% {
-		top: -15px;
-	}
-	100% {
-		opacity: 1;
-		top: auto;
-	}
-}
-@-ms-keyframes showTopMenu {
-	0% {
-		opacity: 0;
-		top: -50px;
-	}
-	60% {
-		top: 0;
-	}
-	80% {
-		top: -15px;
-	}
-	100% {
-		opacity: 1;
-		top: auto;
-	}
-}
-/* disabled to ease rendering work for Opera 
-@-o-keyframes showTopMenu {
-	0% {
-		opacity: 0;
-		top: -50px;
-	}
-	60% {
-		top: 0;
-	}
-	80% {
-		top: -15px;
-	}
-	100% {
-		opacity: 1;
-		top: auto;
-	}
-}
-*/
-@keyframes showTopMenu {
-	0% {
-		opacity: 0;
-		top: -50px;
-	}
-	60% {
-		top: 0;
-	}
-	80% {
-		top: -15px;
-	}
-	100% {
-		opacity: 1;
-		top: auto;
-	}
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	nav.wcf-topMenu {
-		min-width: 800px;
-	}
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	nav.wcf-topMenu {
-		/* none */
-	}
-}
-
-.wcf-topMenu:hover {
-	background-color: rgba(0, 0, 0, .7);
-}
-
-.wcf-topMenu > div {
-	padding: 0 23px 0;
-}
-
-.wcf-topMenu ul li {
-	white-space: nowrap;
-}
-
-/* Menu Items (1st level) */
-
-.wcf-topMenu > div > ul > li {
-	border-width: 0 1px;
-	border-style: solid;
-	border-color: transparent;
-	float: left;
-	position: relative;
-}
-
-.wcf-topMenu > div > ul > li,
-.wcf-topMenu > div > ul > li a {
-	text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
-	color: #69c;
-}
-
-.wcf-topMenu > div > ul > li:hover,
-.wcf-topMenu > div > ul > li:hover a {
-	border-color: rgba(255, 255, 255, .5);
-}
-
-/* Removes the doubled padding if there's a link in the top menu */
-.wcf-topMenu > div > ul > li > span > a {
-	margin: -6px 0 -6px -6px;
-}
-
-
-
-/* ToDo: Top-Menu Dropdown Caption */
-
-.wcf-topMenu > div > ul > li > .wcf-dropdownCaption {
-	background-image: url('../../icon/dropdown2.svg');
-	background-position: 97% center;
-	background-repeat: no-repeat;
-	padding-right: 15px !important;
-}
-
-.wcf-topMenu > div > ul > li > .wcf-dropdownCaption,
-.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > a {
-	padding: 6px;
-}
-
-.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption,
-.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption a {
-	text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
-	color: rgba(255, 255, 255, 1);
-	background-color: rgba(0, 0, 0, .7);
-}
-
-/* Badges */
-
-.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > .wcf-badge {
-	margin: -3px 3px;
-	padding: 1px 3px;
-}
-
-.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > .wcf-badge,
-.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption > .wcf-badge {
-	font-size: 75%;
-	color: #369 !important;
-}
-
-/* Images in front of the caption */
-
-.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > img {
-	margin: -7px 0 -5px 0;
-}
-
-
-
-/* ToDo: Top-Menu Dropdown Tweaks */
-
-/* Auto-Opening Dropdowns */
-.wcf-topMenu ul li .wcf-dropdownCaption ~ .wcf-dropdown {
-	border-color: rgba(255, 255, 255, .5);
-	background-color: rgba(0, 0, 0, .7);
-	left: -1px;
-	min-width: 100%;
-}
-
-.wcf-topMenu ul li:hover .wcf-dropdownCaption ~ .wcf-dropdown {
-	display: block;
-}
-
-.wcf-topMenu ul li .wcf-dropdown {
-	border-width: 0 1px 1px 1px !important;
-	border-radius: 0 0 5px 5px;
-}
-
-.wcf-topMenu ul li .wcf-dropdown > :first-child {
-	border-top-width: 0;
-}
-
-
-
-/* -- -- -- Logo -- -- -- */
-
-.wcf-logo {
-	margin: 0 23px 0;
-	position: relative;
-	box-sizing: border-box;
-}
-
-.wcf-logo > a,
-.wcf-logo > div {
-	text-align: right;
-	display: block;
-	height: 120px;
-}
-
-.wcf-logo > a:hover {
-	text-decoration: none !important;
-	color: #d8e7f5;
-}
-
-.wcf-logo h1 {
-	text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
-	color: #d8e7f5;
-	position: relative;
-	top: 70px;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	.logo h1,
-	.wcf-logo h1 {
-		font-size: 150%;
-	}
-	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	.wcf-logo h1 {
-		font-size: 175%;
-	}
-	
-}
-
-.wcf-logo > div > img,
-.wcf-logo > a > img {
-	position: absolute;
-	bottom: 20px;
-	left: 0;
-}
-
-
-
-/* -- -- -- Search -- -- -- */
-
-.wcf-search {
-	border: 1px solid rgba(0, 0, 0, .1);
-	border-radius: 5px;
-	background-color: rgba(0, 0, 0, .2);
-	padding: 5px;
-	position: absolute;
-	top: 50px;
-	right: 0;
-	min-width: 240px;
-	
-	-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-	-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-	-ms-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-	-o-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-	box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-	
-	-webkit-transition: background .2s linear;
-	-moz-transition: background .2s linear;
-	-ms-transition: background .2s linear;
-	-o-transition: background .2s linear;
-	transition: background .2s linear;
-	
-}
-
-.wcf-search:hover {
-	background-color: rgba(0, 0, 0, .5);
-}
-
-.wcf-search input[type='search'] {
-	width: 175px;
-	margin: 2px 4px;
-}
-
-.wcf-search > .wcf-searchButton {
-	width: 32px;
-	height: 32px;
-	margin-left: 5px;
-}
-
-
-
-/* -- -- -- Main Menu -- -- -- */
-
-.wcf-mainMenu {
-	/* General toggle switch for main menu orientation (options: left|center|right) */
-	text-align: left;
-	margin: 0 30px;
-	display: block;
-	position: relative;
-	box-sizing: border-box;
-}
-
-.wcf-mainMenu:after {
-	content: '';
-	display: block;
-	clear: both;
-}
-
-.wcf-mainMenu > ul {
-	border-top-left-radius: 5px;
-	border-top-right-radius: 5px;
-	background-color: rgba(0, 0, 0, .4);
-	display: inline-block;
-	position: relative;
-}
-
-.wcf-mainMenu > ul > li {
-	display: inline-block;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	.wcf-mainMenu > ul > li {
-		font-size: 120%;
-	}
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	.wcf-mainMenu > ul > li {
-		font-size: 150%;
-	}
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem {
-	margin: -5px 0 0;
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem:first-child {
-	margin-right: -5px;
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem:last-child {
-	margin-left: -5px;
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem:only-child {
-	margin: -5px 0 0;
-}
-
-.wcf-mainMenu > ul > li > a {
-	font-weight: normal;
-	text-decoration: none;
-	text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
-	color: #69c;
-	cursor: pointer;
-	white-space: nowrap;
-	display: inline-block;
-	position: relative;
-	
-	-webkit-transition-property: border, background-color, background-image, color;
-	-webkit-transition-duration: .3s;
-	-webkit-transition-timing-function: ease;
-	
-	-moz-transition-property: border, background-color, background-image, color;
-	-moz-transition-duration: .3s;
-	-moz-transition-timing-function: ease;
-	
-	-ms-transition-property: border, background-color, background-image, color;
-	-ms-transition-duration: .3s;
-	-ms-transition-timing-function: ease;
-	
-	-o-transition-property: border, background-color, background-image, color;
-	-o-transition-duration: .3s;
-	-o-transition-timing-function: ease;
-	
-	transition-property: border, background-color, background-image, color;
-	transition-duration: .3s;
-	transition-timing-function: ease;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	.wcf-mainMenu > ul > li > a {
-		padding: 10px 20px;
-	}
-	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	.wcf-mainMenu > ul > li > a {
-		padding: 10px 10px;
-	}
-	
-}
-
-.wcf-mainMenu > ul > li:not(.activeMenuItem) {
-	margin-top: -3px;
-}
-
-.wcf-mainMenu > ul > li:not(.activeMenuItem):hover > a {
-	color: rgba(255, 255, 255, 1);
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem > a {
-	font-size: 110%;
-	font-weight: bold;
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-	color: #369;
-	border-top-left-radius: 5px;
-	border-top-right-radius: 5px;
-	
-	background-color: #e7f2fd;
-	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
-	background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
-	background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
-	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
-	background-image: linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
-	
-	z-index: 10;
-}
-
-/* Rounded Bottom Corners: Active Tab */
-
-.wcf-mainMenu > ul > li.activeMenuItem > a:before {
-	border-bottom-right-radius: 6px;
-    border-width: 0 1px 1px 0;
-    position: absolute;
-    bottom: 0;
-    left: -7px;
-    width: 7px;
-    height: 7px;
-    content: "";
-    
-	-webkit-box-shadow: 2px 2px 0 #e7f2fd;
-	-moz-box-shadow: 2px 2px 0 #e7f2fd;
-	-ms-box-shadow: 2px 2px 0 #e7f2fd;
-	-o-box-shadow: 2px 2px 0 #e7f2fd;
-	box-shadow: 2px 2px 0 #e7f2fd;
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem > a:after {
-	border-bottom-left-radius: 6px;
-	border-width: 0 0 1px 1px;
-	position: absolute;
-	right: -7px;
-	bottom: 0;
-	width: 7px;
-	height: 7px;
-	content: "";
-	
-	-webkit-box-shadow: -2px 2px 0 #e7f2fd;
-	-moz-box-shadow: -2px 2px 0 #e7f2fd;
-	-ms-box-shadow: -2px 2px 0 #e7f2fd;
-	-o-box-shadow: -2px 2px 0 #e7f2fd;
-	box-shadow: -2px 2px 0 #e7f2fd;
-}
-
-/* ToDo: Special */
-
-.wcf-mainMenu > ul > li.activeMenuItem .wcf-badge {
-	font-size: 65% !important;
-	color: rgba(255, 255, 255, 1);
-	background-color: #369;
-	
-	-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
-	-moz-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
-	-ms-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
-	-o-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
-	box-shadow: 0 0 1px rgba(255, 255, 255, 1);
-}
-
-
-
-/* -- -- -- Header/Footer Navigation -- -- -- */
-
-/* Menu Bars */
-
-.wcf-headerNavigation,
-.wcf-footerNavigation {
-	background-color: #e7f2fd;
-	border-style: solid;
-	border-color: #bcd;
-	margin: 0 23px;
-	display: block;
-	min-height: 7px;
-	position: relative;
-	box-sizing: border-box;
-}
-
-.wcf-headerNavigation {
-	border-width: 0 0 1px 0;
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
-}
-
-.wcf-footerNavigation {
-	border-width: 1px 0 0 0;
-	border-bottom-left-radius: 3px;
-	border-bottom-right-radius: 3px;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	.wcf-headerNavigation,
-	.wcf-footerNavigation {
-		min-width: 800px;
-	}
-	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	.wcf-headerNavigation,
-	.wcf-footerNavigation {
-		/* none */
-	}
-	
-}
-
-.wcf-headerNavigation:after,
-.wcf-footerNavigation:after {
-	content: '';
-	display: block;
-	clear: both;
-}
-
-/* Icon Menus */
-
-.wcf-headerNavigation > ul,
-.wcf-footerNavigation > ul {
-	padding: 0 7px;
-	float: right;
-}
-
-.wcf-headerNavigation > ul > li,
-.wcf-footerNavigation > ul > li {
-	padding: 0 3px;
-	float: right;
-}
-
-.wcf-headerNavigation > ul > li.separator,
-.wcf-footerNavigation > ul > li.separator {
-	border-right: 1px dotted #bcd;
-}
-
-.wcf-headerNavigation > ul > li a,
-.wcf-headerNavigation > ul > li p,
-.wcf-footerNavigation > ul > li a,
-.wcf-footerNavigation > ul > li p {
-	text-decoration: none;
-	color: #369;
-	padding: 3px;
-	display: inline-block;
-}
-
-.wcf-headerNavigation > ul > li a:hover,
-.wcf-footerNavigation > ul > li a:hover {
-	text-decoration: none;
-	background-color: #d8e7f5;
-}
-
-.wcf-headerNavigation > ul > li a:active,
-.wcf-headerNavigation > ul > li a:focus,
-
-.wcf-footerNavigation > ul > li a:active,
-.wcf-footerNavigation > ul > li a:focus {
-	background-color: #fff9f4;
-}
-
-/* Special -> Page Scroll Links */
-
-#tplLogin .wcf-headerNavigation .toBottomLink,
-#tplLogin .wcf-footerNavigation .toTopLink {
-	/* Removes the jump-to-links on the log-in page */
-	position: absolute;
-	left: -9000px;
-	top: -9000px;
-	width: 0;
-}
-
-/* Special -> Sub Menu */
-
-.wcf-headerNavigation .wcf-menu {
-	padding: 0 7px;
-	display: inline;
-	max-width: 75%;
-}
-
-.wcf-headerNavigation .wcf-menu > ul {
-	text-align: left;
-	top: -3px;
-	display: inline;
-	position: relative;
-}
-
-.wcf-headerNavigation .wcf-menu > ul > li {
-	margin-top: 7px;
-}
-
-
-
-/* ############## Main ############## */
-
-.wcf-main {
-	background-color: rgba(216, 231, 245, 1);
-	margin: 0 23px;
-	position: relative;
-	z-index: 90;
-	
-	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-	-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-	-ms-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-	-o-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-	box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	.wcf-main {
-		min-width: 800px;
-	}
-	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	.wcf-main {
-		/* none */
-	}
-	
-}
-
-
-
-/* -- -- -- Content -- -- -- */
-
-/* ToDo: Change the class name, since now we have the class "content" 2 times! */
-
-section.wcf-content {
-	background-color: rgba(255, 255, 255, 1);
-	position: relative;
-	min-height: 100px;
-	z-index: 20;
-	box-sizing: border-box;
-	
-	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
-	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
-	-ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
-	/* ToDo: Opera doesn't like that so much! Bug-report sent to Opera 
-	-o-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
-	box-shadow: 0 0 5px rgba(0, 0, 0, .1);*/
-	
-	-webkit-transition: margin .1s ease;
-	-moz-transition: margin .1s ease;
-	-ms-transition: margin .1s ease;
-	-o-transition: margin .1s ease;
-	transition: margin .1s ease;
-}
-
-section.wcf-content:after {
-	content: '';
-	display: block;
-	clear: both;
-}
-
-.left section.wcf-content {
-	border-left: 1px solid rgba(187, 204, 221, 1);
-	margin-left: 249px;
-}
-
-.right section.wcf-content {
-	border-right: 1px solid rgba(187, 204, 221, 1);
-	margin-right: 249px;
-}
-
-/* ToDo: Does this still work? */
-.wcf-main > div section:only-child {
-	border-width: 0 !important;
-	margin: 0 !important;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	section.wcf-content {
-		padding: 5px 40px 20px;
-	}
-	
-}	
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	section.wcf-content {
-		padding: 5px 15px 20px;
-	}
-	
-}	
-
-.wcf-contentDecor {
-	background-color: rgba(253, 253, 253, 1);
-}
-
-
-
-/* -- -- -- Content Header & Footer -- -- -- */
-
-.wcf-contentHeader,
-.wcf-contentFooter {
-	margin-top: 15px;
-	display: table;
-	width: 100%;
-	box-sizing: border-box;
-}
-
-
-
-/* ############## Sidebar ############## */
-
-/* Globals */
-
-.wcf-sidebar {
-	margin-bottom: -10px;
-	display: block;
-	width: 250px;
-	overflow: hidden;
-	z-index: 10;
-	
-	-webkit-transition: width .1s ease;
-	-moz-transition: width .1s ease;
-	-ms-transition: width .1s ease;
-	-o-transition: width .1s ease;
-	transition: width .1s ease;
-}
-
-/* Toggle for sidebar orientation (options: left|right|top|bottom) */
-
-.left .wcf-sidebar {
-	float: left;
-}
-
-.right .wcf-sidebar {
-	float: right;
-}
-
-
-
-/* -- -- -- Collapsible Sidebar -- -- -- */
-
-/* Globals */
-
-.wcf-sidebar.collapsed {
-	width: 0;
-	height: 0;
-}
-
-.left .wcf-sidebar.collapsed + .wcf-content {
-	border: 0;
-	margin-left: 0;
-}
-
-.right .wcf-sidebar.collapsed + .wcf-content {
-	border: 0;
-	margin-right: 0;
-}
-
-
-
-/* -- -- -- Collapsible Sidebar Button -- -- -- */
-
-/* Globals */
-
-.wcf-collapsibleSidebarButton {
-	cursor: pointer;
-	background-position: center 1%, center 99%;
-	background-size: 10px 10px, 10px 10px;
-	background-repeat: no-repeat;
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	width: 20px;
-	height: 100%;
-	overflow: hidden;
-	z-index: 30;
-	opacity: .3;
-}
-
-.wcf-collapsibleSidebarButton:hover,
-.wcf-collapsibleSidebarButton:hover span {
-	background-color: rgba(252, 252, 252, 1);
-	opacity: 1;
-}
-
-.wcf-collapsibleSidebarButton span {
-	background-color: rgba(255, 255, 255, 1);
-    background-position: center center;
-	background-size: 10px 10px;
-	background-repeat: no-repeat;
-	margin-top: -300px;
-	display: block;
-	position: absolute;
-	top: 50%;
-	width: 20px;
-	height: 600px;
-}
-
-.wcf-collapsibleSidebarButton span:focus,
-.wcf-collapsibleSidebarButton span:active {
-	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-}
-
-/* Orientation */
-
-.left .wcf-collapsibleSidebarButton {
-	border-right: 1px solid rgba(187, 204, 221, .5);
-	background-image: url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg');
-	left: 250px;
-	
-	-webkit-transition: left .1s ease;
-	-moz-transition: left .1s ease;
-	-ms-transition: left .1s ease;
-	-o-transition: left .1s ease;
-	transition: left .1s ease;
-}
-
-.left .wcf-collapsibleSidebarButton span {
-	background-image: url('../../icon/arrowLeft1.svg');
-}
-
-.right .wcf-collapsibleSidebarButton {
-	border-left: 1px solid rgba(187, 204, 221, .5);
-	background-image: url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg');
-	right: 250px;
-	
-	-webkit-transition: right .1s ease;
-	-moz-transition: right .1s ease;
-	-ms-transition: right .1s ease;
-	-o-transition: right .1s ease;
-	transition: right .1s ease;
-}
-
-.right .wcf-collapsibleSidebarButton span {
-	background-image: url('../../icon/arrowRight1.svg');
-}
-
-/* Collapsed (Left) */
-
-.left .collapsed .wcf-collapsibleSidebarButton {
-	background-image: url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg');
-	left: 0;
-}
-
-.left .collapsed .wcf-collapsibleSidebarButton span {
-	background-image: url('../../icon/arrowRight1.svg');
-}
-
-/* Collapsed (Right) */
-
-.right .collapsed .wcf-collapsibleSidebarButton {
-	background-image: url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg');
-	right: 0;
-}
-
-.right .collapsed .wcf-collapsibleSidebarButton span {
-	background-image: url('../../icon/arrowLeft1.svg');
-}
-
-
-
-/* -- -- -- Sidebar Content -- -- -- */
-
-.wcf-sidebarContent > div {
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-	position: relative;
-	overflow: hidden;
-	z-index: 40;
-}
-
-.collapsed .wcf-sidebarContent > div {
-	width: 0;
-}
-
-.wcf-sidebarContent a:hover {
-	text-decoration: none !important;
-	color: #369;
-}
-
-.wcf-sidebarContent > div > h1 {
-	cursor: pointer;
-	font-weight: bold;
-	color: #369;
-	margin-top: 5px;
-}
-
-.wcf-sidebarContent > .collapsibleMenus > h1 {
-	background-image: url('../../icon/arrowRight.svg');
-	background-position: 15px center;
-	background-size: 16px;
-	background-repeat: no-repeat;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	.wcf-sidebarContent > div > h1 {
-		font-size: 130%;
-		padding: 7px 15px 7px 35px;
-	}
-	
-	.wcf-sidebarContent > div:not(.collapsibleMenus) > h1 {
-		padding: 7px 15px 7px 15px;
-	}
-	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	.wcf-sidebarContent > div > h1 {
-		font-size: 150%;
-		padding: 7px 15px 7px 35px;
-	}
-	
-	.wcf-sidebarContent > div:not(.collapsibleMenus) > h1 {
-		padding: 7px 15px 7px 15px;
-	}
-	
-}
-
-.wcf-sidebarContent > .collapsibleMenus h1.activeMenuItem {
-	background-image: url('../../icon/arrowDown.svg');
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	.wcf-sidebarContent > div ul > li {
-		font-size: 110%;
-	}
-	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	.wcf-sidebarContent > div ul > li {
-		font-size: 120%;
-	}
-	
-}
-
-.wcf-sidebarContent > div ul > li > a,
-.wcf-sidebarContent > div ul > li > div {
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-	color: #69c;
-	padding: 5px 15px 7px 35px;
-	display: block;
-}
-
-.wcf-sidebarContent > div ul > li.activeMenuItem {
-	background-color: rgba(255, 255, 255, 1);
-	margin-right: -1px;
-	overflow: hidden;
-	
-	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
-	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
-	-ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
-	-o-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
-	box-shadow: 0 0 5px rgba(0, 0, 0, .1);
-}
-
-.wcf-sidebarContent > div ul > li.activeMenuItem a {
-	font-weight: bold;
-	color: #369;
-}
-
-
-
-/* ############## Status Display ############## */
-
-.wcf-statusDisplay {
-	padding: 1px 0;
-	float: right;
-}
-
-.wcf-statusDisplay .wcf-statusIcons li {
-	display: inline-block;
-}
-
-
-
-/* ############## Headings ############## */
-
-/* -- -- -- Main Heading -- -- -- */
-
-.wcf-mainHeading {
-	margin-top: 25px;
-}
-
-.wcf-mainHeading:not(:first-of-type) {
-	margin-top: 30px;
-}
-
-.wcf-mainHeading > hgroup {
-	min-height: 48px;
-}
-
-.wcf-mainHeading > hgroup h1 {
-	font-weight: bold;
-	border-bottom: 1px solid rgba(153, 153, 153, 1);
-	padding: 1px 0 10px;	
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	.wcf-mainHeading .wcf-containerIcon {
-		width: 48px;
-		height: 48px;
-	}
-	
-	.wcf-mainHeading hgroup h1 {
-		font-size: 175%;
-	}
-	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	.wcf-mainHeading .wcf-containerIcon {
-		width: 64px;
-		height: 64px;
-	}
-	
-	.wcf-mainHeading hgroup h1 {
-		font-size: 200%;
-	}
-	
-}
-
-.wcf-mainHeading > hgroup h1,
-.wcf-mainHeading > hgroup h1 a {
-	text-decoration: none;
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-	color: rgba(102, 102, 102, 1);
-}
-
-.wcf-mainHeading > hgroup h2 {
-	font-size: 100%;
-	font-weight: normal;
-	color: rgba(153, 153, 153, 1);
-	padding-top: 5px;
-}
-
-.wcf-mainHeading > hgroup p {
-	padding-top: 3px;
-} 
-
-/* Special -> Badges */
-
-.wcf-mainHeading > hgroup h1 .wcf-badge,
-.wcf-mainHeading > hgroup h1 a .wcf-badge {
-	font-size: 75%;
-	text-decoration: none;
-	background-color: rgba(102, 102, 102, 1);
-	color: rgba(255, 255, 255, 1);
-}
-
-/* Special -> Dialog */
-
-.wcf-dialogContainer .wcf-mainHeading {
-	margin-top: 0;
-}
-
-.wcf-dialogContainer .wcf-mainHeading > hgroup h1,
-.wcf-dialogContainer .wcf-mainHeading > hgroup h1 a {
-	text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
-	color: rgba(255, 255, 255, 1);
-}
-
-
-
-/* -- -- -- Sub Heading -- -- -- */
-
-.wcf-subHeading h1 {
-	font-size: 150%;
-	font-weight: bold;
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-	color: rgba(153, 153, 153, 1);
-	border-bottom: 1px solid #ccc;
-	margin: 10px 0;
-	padding: 10px 0;
-	box-sizing: border-box;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	.wcf-subHeading h1 {
-		font-size: 150%;
-	}
-	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	.wcf-subHeading h1 {
-		font-size: 175%;
-	}
-	
-}
-
-.wcf-subHeading h2 {
-	font-weight: normal;
-	color: #aaa;
-}
-
-
-
-/* ############## Fieldsets ############## */
-
-fieldset {
-	border: 1px solid #ccc;
-	border-radius: 7px;
-	background-color: rgba(250, 250, 250, 1);
-	margin: 15px 0 0;
-	padding: 5px 15px 15px;
-	box-sizing: border-box;
-}
-
-fieldset:last-child,
-fieldset:only-child {
-	margin-bottom: 7px !important;
-}
-
-fieldset legend {
-	color: rgba(153, 153, 153, 1);
-	padding: 0 7px 0;
-	margin: auto -7px;
-}
-
-fieldset legend ~ p {
-	margin-bottom: 14px;
-}
-
-/* Special Sidebar */
-
-.wcf-sidebar fieldset {
-	border-width: 0;
-	background-color: transparent;
-}
-
-.wcf-sidebar fieldset legend {
-	text-transform: uppercase; /* That's possibly problematic */
-	padding: 0;
-}
-
-.fieldsetDecor {
-	border: 1px solid #ccc;
-	border-radius: 7px;
-	background-color: rgba(250, 250, 250, 1);
-}
-
-
-
-/* ############## Labeled Content ############## */
-
-/* Simple */
-
-dl {
-	margin-top: 7px;
-	position: relative;
-}
-
-fieldset dl:first-of-type {
-	margin-top: 0;
-}
-
-dl > dt {
-	text-align: right;
-	color: rgba(102, 153, 204, 1);
-	margin-top: 5px;
-	float: left;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	dl > dt {
-		width: 230px;
-	}
-	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	dl > dt {
-		width: 130px;
-	}
-	
-}
-
-dl.wide > dt {
-	width: auto; /* ToDo */
-}
-	
-dl > dt > label {
-	margin-top: 5px;
-	display: block;
-}
-
-dl.disabled > dt {
-	color: rgba(119, 119, 119, 1);
-}
-
-dl > dd {
-	padding-top: 5px;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	dl > dd {
-		margin-left: 250px;
-	}
-	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	dl > dd {
-		margin-left: 150px;
-	}
-	
-}
-
-dl.wide > dd {
-	margin-left: 0;
-}
-
-dl > dd > small {
-	font-size: 85%;
-	color: rgba(153, 153, 153, 1);
-	margin: 3px 0 7px;
-	display: block;
-}
-
-dl > dd > p {
-	margin-top: 5px;
-}
-
-/* Nested */
-
-dl > dd > fieldset {
-	margin-top: 0;
-	margin-bottom: 0;
-	padding-top: 5px;
-	padding-bottom: 5px;
-}
-
-dl > dd > fieldset > legend {
-	display: none;
-}
-
-dl > dd > fieldset > dl > dt {
-	margin-right: 20px;
-	width: 150px;
-}
-
-dl > dd > fieldset > dl > dd {
-	margin-left: 0;
-}
-
-dl > dd > fieldset > dl > dd > label {
-	display: block;
-}
-
-/* Reversed (flips the label aside the checkbox or radio button) - 
-	use only when automatically generating checkboxes or radio-buttons! */
-
-.reversed {
-	text-align: left;
-	margin-top: 2px;
-	position: absolute;
-	width: auto;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	.reversed {
-		left: 270px;
-	}
-	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	.reversed {
-		left: 170px;
-	}
-	
-}
-
-.reversed ~ dd > input[type='checkbox'] {
-	margin-left: 0;
-}
-
-/* Special -> Sidebar */
-
-.wcf-sidebar dl > dt {
-	text-align: left;
-	float: none;
-	width: auto;
-}
-
-.wcf-sidebar dl > dd {
-	margin-left: 0;
-	display: block;
-	margin-bottom: 13px;
-}	
-
-.wcf-sidebar dl > dd * {
-	display: block;
-}	
-
-/* Special -> Overlay */
-
-.wcf-dialogContainer dl > dt {
-	width: 130px;
-}
-
-.wcf-dialogContainer dl > dd {
-	margin-left: 150px;
-}
-
-.wcf-dialogContainer dl > .reversed {
-	left: 170px;
-	width: auto;
-}
-
-
-
-/* ############## Forms ############## */
-
-/* Globals */
-
-label {
-	color: rgba(102, 153, 204, 1);
-}
-
-/* Structure */
-
-.wcf-formSubmit {
-	text-align: center;
-	margin-top: 15px;
-}
-
-input[type='checkbox'] ~ small,
-input[type='radio'] ~ small {
-	margin-top: 0;
-	margin-left: 21px;
-}
-
-
-
-/* -- -- -- Form Elements -- -- -- */
-
-/* Globals */
-
-button,
-input[type='reset'],
-input[type='submit'],
-input[type='button'],
-input[type='checkbox'],
-input[type='radio'],
-select:not([multiple]) {
-	cursor: pointer;
-}
-
-input[type='text'],
-input[type='search'], /* Does not work in WebKit browsers */
-input[type='date'],
-input[type='email'],
-input[type='url'],
-input[type='password'],
-textarea,
-select[multiple] {
-	padding: 5px 3px;
-	box-sizing: border-box;
-}
-
-select[multiple] {
-	 font-family: 'Courier New', Courier, monospace;
-}
-
-/* Normal State */
-
-input[type='text'],
-input[type='search'],
-input[type='date'],
-input[type='email'],
-input[type='url'],
-input[type='password'],
-textarea,
-select[multiple] {
-	border-width: 1px;
-	border-style: solid;
-	border-color: rgba(153, 153, 153, 1) rgba(204, 204, 204, 1) rgba(238, 238, 238, 1);
-	border-radius: 3px;
-	background-color: rgba(255, 255, 255, 1);
-	
-	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
-	-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
-	-ms-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
-	-o-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
-	box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
-	
-	-webkit-transition: background-color, border .2s linear;
-	-moz-transition: background-color, border .2s linear;
-	-ms-transition: background-color, border .2s linear;
-	-o-transition: background-color, border .2s linear;
-	transition: background-color, border .2s linear;
-}
-
-/* Hover State */
-
-input[type='text']:hover,
-input[type='search']:hover,
-input[type='date']:hover,
-input[type='email']:hover,
-input[type='url']:hover,
-input[type='password']:hover,
-textarea:hover,
-select[multiple]:hover {
-	border: 1px solid rgba(255, 170, 34, 1);
-	background-color: rgba(255, 249, 244, 1);
-}
-
-/* Active & Focus State */
-
-input[type='text']:active,
-input[type='search']:active,
-input[type='date']:active,
-input[type='email']:active,
-input[type='url']:active,
-input[type='password']:active,
-textarea:active,
-select[multiple]:active,
-
-input[type='text']:focus,
-input[type='search']:focus,
-input[type='date']:focus,
-input[type='email']:focus,
-input[type='url']:focus,
-input[type='password']:focus,
-textarea:focus,
-select[multiple]:focus {
-	border: 1px solid rgba(255, 170, 34, 1);
-	background-color: rgba(255, 249, 244, 1);
-	outline: none;
-	
-	-webkit-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
-	-moz-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
-	-ms-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
-	-o-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
-	box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
-}
-
-/* Read Only State */
-
-input[type='text'][readonly],
-input[type='search'][readonly],
-input[type='email'][readonly],
-input[type='date'][readonly],
-input[type='url'][readonly],
-input[type='password'][readonly],
-textarea[readonly],
-select[multiple][readonly] {
-	border-style: solid;
-	border-color: rgba(204, 204, 204, 1) rgba(221, 221, 221, 1) rgba(238, 238, 238, 1);
-	background-color: transparent;
-	
-	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
-	-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
-	-ms-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
-	-o-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
-	box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
-}
-
-/* Disabled State */
-
-input[type='text'][disabled],
-input[type='search'][disabled],
-input[type='date'][disabled],
-input[type='email'][disabled],
-input[type='url'][disabled],
-input[type='password'][disabled],
-textarea[disabled],
-select[multiple][disabled] {
-	border-style: solid;
-	border-color: rgba(255, 255, 255, .5);
-	background-color: rgba(255, 255, 255, .5);
-}
-
-
-
-/* -- -- -- Input Widths -- -- -- */
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	textarea {
-		width: 100%;
-		min-width: 200px;
-	}
-	
-	.tiny {
-		width: 100px;
-	}
-	
-	.short {
-		width: 10%;
-		min-width: 75px;
-	}
-	
-	.medium {
-		width: 50%;
-		min-width: 150px;
-	}
-	
-	.long {
-		width: 100%;
-		min-width: 200px;
-	}
-	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	textarea {
-		width: 99%;
-		/* none */
-	}
-	
-	.tiny {
-		width: 50px;
-	}
-	
-	.short {
-		width: 10%;
-		min-width: 50px;
-	}
-	
-	.medium {
-		width: 30%;
-		min-width: 100px;
-	}
-	
-	.long {
-		width: 100%;
-		min-width: 150px;
-	}
-	
-}
-
-.auto {
-	width: auto;
-}
-
-/* Special -> Search Input WebKit */
-
-input[type=search] {
-	border-radius: 30px;
-	
-	-webkit-appearance: textfield;
-	-webkit-box-sizing: content-box;
-}
-
-::-webkit-search-decoration {
-	display: none;
-}
-
-
-
-/* -- -- -- Form Errors -- -- -- */
-
-.wcf-formError input[type='text'],
-.wcf-formError input[type='search'],
-.wcf-formError input[type='email'],
-.wcf-formError input[type='url'],
-.wcf-formError input[type='password'],
-.wcf-formError textarea {
-	border-color: rgba(255, 0, 0, 1);
-	background-color: rgba(255, 246, 246, 1);
-}
-
-
-
-/* ############## ToDo: Pre-Input Buttons & Dropdowns ############## */
-
-/* -- -- -- Bounding Box -- -- --  */
-
-/** 
- * This defines the shape of the Pre-Input Buttons 
- * Colors & effects are being defined by the 
- * "Global Button Color & Effect Library" 
- */
-
-.wcf-preInput {
-	display: table;
-	position: relative;
-	width: 100%;
-}
-
-.wcf-preInput > input,
-.wcf-preInput > textarea { /* ToDo: The textarea solution is not so nice */
-	border-radius: 0 3px 3px 0;
-	margin: 0 !important;
-	display: table-cell;
-	width: 99%;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	.wcf-preInput > input,
-	.wcf-preInput > textarea {
-		min-width: 300px;
-	}
-	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	.wcf-preInput > input,
-	.wcf-preInput > textarea {
-		min-width: 100px;
-	}
-	
-}
-
-
-
-/* -- -- -- Dropdowns -- -- --  */
-
-/* Dropdown Caption */
-
-.wcf-preInput .wcf-dropdownCaption {
-	letter-spacing: -1px;
-	cursor: pointer;
-	border-radius: 3px 0 0 3px;
-	padding-right: 5px;
-	display: table-cell;
-	width: 1%;
-	vertical-align: middle;
-}
-
-.wcf-preInput .wcf-dropdownCaption span {
-	margin-right: -1px;
-	padding-left: 5px;
-	white-space: nowrap;
-}
-
-.wcf-preInput .wcf-dropdownCaption span.active {
-	background-image: url('../../icon/dropdown1.svg');
-	background-position: right center;
-	background-repeat: no-repeat;
-	padding-right: 10px;
-}
-
-
-
-/* -- -- -- Special -> System Notification -- -- --  */
-
-.wcf-preInput .wcf-dropdown > li.missingValue { /* ToDo */
-	/* color: #990; */
-	background-image: url('../../icon/systemWarning.svg');
-	background-size: 16px;
-	background-position: 95% center;
-	background-repeat: no-repeat;
-	/* background-color: #ffd; */
-}
-
-
-
-/* ############## ToDo: Small Buttons ############## */
-
-/** 
- * This defines the shape of the Small Buttons 
- * Colors & effects are being defined by the 
- * "Global Button Color & Effect Library" 
- */
-
-/* -- -- -- Standard -- -- -- */
-
-/* Globals */
-
-.wcf-smallButtons {
-	list-style-type: none;
-	margin-right: -1px;
-	margin-bottom: -1px;
-}
-
-.wcf-smallButtons > li {
-	margin-left: -5px;
-	display: inline-block;
-}
-
-.wcf-smallButtons > li > a {
-	white-space: nowrap;
-	padding: 3px 7px;
-	display: block;
-	min-height: 16px;
-}
-
-.wcf-smallButtons > li.separator > a {
-	border-right: 1px dotted #bcd;
-}
-
-.wcf-smallButtons > li:first-child > a {
-	border-top-left-radius: 13px;
-}
-
-.wcf-smallButtons > li:last-child > a {
-	border-bottom-right-radius: 7px;
-}
-
-
-
-/* -- -- -- Small Button Bar -- -- -- */
-
-.wcf-smallButtonBar {
-	text-align: center !important;
-	border-top: 1px solid rgba(204, 204, 204, 1);
-	border-radius: 0 0 7px 7px;
-	
-	background-color: rgba(0, 0, 0, .015);
-	background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-	background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-	background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-	background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-	
-	padding: 3px;
-	position: relative;
-	z-index: 100;
-}
-
-.wcf-smallButtonBar li {
-	display: inline;
-	position: relative;
-}
-
-.wcf-smallButtonBar li span {
-	/* Removes the button-caption */
-	position: absolute;
-	left: -9000px;
-	top: -9000px;
-	width: 0;
-}
-
-
-
-/* ############## Large Buttons ############## */
-
-/** 
- * This defines the shape of the Large Buttons 
- * Colors & effects are being defined by the 
- * "Global Button Color & Effect Library"  
- */
-
-/* Globals */
-
-.wcf-largeButtons {
-	text-align: right;
-	float: right;
-}
-
-.wcf-largeButtons > li {
-	display: inline;
-}
-
-.wcf-largeButtons > li > a img {
-	margin: -5px 1px -5px -5px;
-	vertical-align: middle;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	.wcf-largeButtons > li > a img {
-		height: 24px;
-		width: 24px;
-	}
-	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	.wcf-largeButtons > li {
-		font-size: 125%;
-	}
-	
-	.wcf-largeButtons > li > a {
-		padding: 10px 15px !important;
-		white-space: nowrap;
-	}
-	
-	.wcf-largeButtons > li > a img {
-		height: 32px;
-		width: 32px;
-	}
-	
-}
-
-/* Normal State */
-
-button,
-input[type='reset'],
-input[type='submit'],
-input[type='button'],
-.wcf-largeButtons > li > a {
-	font-size: 100%;
-	font-weight: bold;
-	border-radius: 30px;
-	margin: 3px 2px;
-	padding: 5px 13px;
-	display: inline-block;
-}
-
-/* ToDo: Special */
-
-.wcf-sidebar .wcf-largeButtons *,
-.wcf-sidebar input {
-	font-size: 75% !important;
-	padding: 3px 7px;
-}
-
-.wcf-sidebar .wcf-largeButtons *,
-.wcf-sidebar input {
-	font-size: 75% !important;
-}
-
-
-
-/* ############## Boxes ############## */
-
-/** 
- * This defines a box with rounded borders 
- * Use the extra classes to further style boxes 
- */
-
-/* Globals */
-
-.wcf-box {
-	border: 1px solid rgba(204, 204, 204, 1);
-	border-radius: 5px;
-	box-sizing: border-box;
-}
-
-.wcf-boxTitle {
-	border-radius: 7px;
-	background-color: #369;
-	/* Disabled, because the WoltLab header-image is not LGPL 
-	Activate it if you want to test your own header image */
-	/* background-image: url('../../../images/header.png'); */
-	background-position: left top;
-	background-repeat: repeat-x;
-	display: table;
-	width: 100%;
-}
-
-.wcf-boxPadding {
-	padding: 13px 23px 23px;
-}
-
-.wcf-boxDecor {
-	background-color: rgba(253, 253, 253, 1);
-}
-
-/* Headings */
-
-.wcf-boxTitle > hgroup {
-	text-shadow: 0 -1px 0 #000;
-	color: rgba(255, 255, 255, 1);
-	padding: 7px;
-	display: inline-block;
-}
-
-.wcf-boxTitle > a,
-.wcf-boxTitle > hgroup a {
-	text-decoration: none;
-	color: rgba(255, 255, 255, 1);
-}
-
-.wcf-boxTitle > hgroup h1 {
-	font-size: 120%;
-	display: inline-block;
-}
-
-.wcf-boxTitle > hgroup h2 {
-	font-size: 85%;
-	color: rgba(255, 255, 255, .9);
-	margin-top: 5px;
-}
-
-.wcf-boxTitle > hgroup .wcf-badge {
-	font-size: 65%;
-	color: #036;
-}
-
-/* Leading icon */
-
-.wcf-boxTitle > a {
-	margin: 7px 0 0 10px;
-	float: left;
-}
-
-.wcf-boxTitle > a img {
-	height: 16px;
-	width: 16px;
-}
-
-
-
-/* ############## Tab Menu ############## */
-
-/* Globals */
-
-.wcf-tabMenu {
-	/* Toggle for tab menu orientation (options: left|center|right) */
-	text-align: center;
-	margin-top: 15px;
-	padding: 0 10px;
-	display: block;
-	position: relative;
-}
-
-/* -- -- -- Tabs -- -- --  */
-
-/* Globals */
-
-.wcf-tabMenu ul {
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-	white-space: nowrap;
-	border-width: 1px 1px 0 1px;
-	border-style: solid;
-	border-color: #ddd;
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
-	background-color: rgba(0, 0, 0, .05);
-	padding: 0 5px 3px 5px;
-	display: inline-block;
-	position: relative;
-}
-
-.wcf-tabMenu li {
-	white-space: nowrap;
-	list-style: none;
-	display: inline-block;
-}
-
-.wcf-tabMenu li.ui-state-active {
-	margin-right: -7px;
-	margin-left: -7px;
-}
-
-.wcf-tabMenu li a {
-	text-decoration: none;
-	color: rgba(153, 153, 153, 1);
-	cursor: pointer;
-	display: inline-block;
-	position: relative;
-	bottom: -3px;
-	z-index: 10;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	.wcf-tabMenu li a {
-		font-size: 110%;
-		padding: 1px 10px 3px;
-	}
-	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	.wcf-tabMenu li a {
-		font-size: 150%;
-		padding: 5px 10px;
-		max-width: 100px;
-	}
-	
-}
-
-.wcf-tabMenu li:not(.ui-state-active) a:hover {
-	color: rgba(102, 102, 102, 1);
-}
-
-.wcf-tabMenu li.ui-state-active a {
-	font-weight: bold;
-	color: #333 !important;
-	border-width: 1px;
-	border-style: solid;
-	border-top-right-radius: 6px;
-	border-top-left-radius: 6px;
-	border-color: #ccc #ccc #fff;
-	background-color: rgba(255, 255, 255, 1);
-	padding: 10px 15px 5px;
-	margin-top: -10px;
-	z-index: 30;
-}
-
-/* Rounded Bottom Corners */
-
-.wcf-tabMenu li.ui-state-active a:before {
-	position: absolute;
-    bottom: -1px;
-    width: 5px;
-    height: 5px;
-    content: " ";
-    border: 1px solid #ccc;
-    left: -6px;
-    border-bottom-right-radius: 6px;
-    border-width: 0 1px 1px 0;
-    
-    -webkit-box-shadow: 2px 2px 0 #fff;
-	-moz-box-shadow: 2px 2px 0 #fff;
-	-ms-box-shadow: 2px 2px 0 #fff;
-	-o-box-shadow: 2px 2px 0 #fff;
-    box-shadow: 2px 2px 0 #fff;
-}
-
-.wcf-tabMenu li.ui-state-active a:after {
-	position: absolute;
-    bottom: -1px;
-    width: 5px;
-    height: 5px;
-    content: " ";
-    border: 1px solid #ccc;
-    right: -6px;
-    border-bottom-left-radius: 6px;
-    border-width: 0 0 1px 1px;
-    
-    -webkit-box-shadow: -2px 2px 0 #fff;
-	-moz-box-shadow: -2px 2px 0 #fff;
-	-ms-box-shadow: -2px 2px 0 #fff;
-	-o-box-shadow: -2px 2px 0 #fff;
-    box-shadow: -2px 2px 0 #fff;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	.wcf-tabMenu li.ui-state-active a {
-		font-size: 130%;
-	}
-	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	.wcf-tabMenu li.ui-state-active a {
-		font-size: 150%;
-	}
-	
-}
-
-.wcf-tabMenu li.ui-state-active a,
-.wcf-tabMenu li.ui-state-disabled a,
-.wcf-tabMenu li.ui-state-processing a {
-	cursor: default;
-}
-
-
-
-/* -- -- -- Tab Menu Content -- -- --  */
-
-.wcf-tabMenuContent {
-	background-color: rgba(255, 255, 255, 1);
-	margin-top: -1px;
-	display: block;
-	position: relative;
-	z-index: 20; /* Prevents border overlay during transition */
-}
-
-/* ToDo: 2x hidden? */
-
-.ui-tabs .ui-tabs-hide {
-	display: none !important;
-}
-
-.ui-helper-hidden {
-	display: none;
-}
-
-.ui-helper-hidden-accessible {
-	position: absolute !important;
-	clip: rect(1px 1px 1px 1px);
-	clip: rect(1px,1px,1px,1px);
-}
-
-
-
-/* ############## Menu ############## */
-
-/* Standard */
-
-.wcf-menu {
-	color: rgba(102, 102, 102, 1);
-}
-
-.wcf-menu ul {
-	/* General toggle switch for menu orientation (options: left|center|right) */
-	text-align: center;
-}
-
-.wcf-menu ul li {
-	white-space: nowrap;
-	margin-top: 10px;
-	display: inline-block;
-}
-
-.wcf-menu ul li a {
-	font-size: 85%;
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-	text-decoration: none;
-	color: rgba(153, 153, 153, 1);
-	border: 1px solid rgba(0, 0, 0, .2);
-	border-radius: 13px;
-	background-color: rgba(255, 255, 255, .5);
-	padding: 2px 10px;
-	
-	-webkit-transition: color .1s linear;
-	-moz-transition: color .1s linear;
-	-ms-transition: color .1s linear;
-	-o-transition: color .1s linear;
-	transition: color .1s linear;
-}
-
-.wcf-menu ul li:not(.ui-state-active) a:hover {
-	color: #333;
-	border-width: 1px;
-	border-style: solid;
-	border-color: #fa2;
-	background-color: rgba(255, 249, 244, 1);
-}
-
-.wcf-menu ul li:not(.ui-state-active) a:active,
-.wcf-menu ul li:not(.ui-state-active) a:focus {
-	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-}
-
-.wcf-menu ul li.ui-state-active a {
-	font-weight: bold;
-	text-shadow: 0 1px 0 #000;
-	color: rgba(255, 255, 255, 1);
-	cursor: default;
-	border: 1px solid rgba(0, 0, 0, .2);
-	background-color: rgba(0, 0, 0, .5);
-}
-
-/* Special -> Menu within box-title  */
-
-.wcf-boxTitle > .wcf-menu {
-	color: rgba(255, 255, 255, 1);
-	border: none;
-	margin: 0 !important;
-	padding: 6px 7px !important;
-}
-
-.wcf-boxTitle > .wcf-menu ul li {
-	margin-top: 0;
-}
-
-.wcf-boxTitle > .wcf-menu ul li a {
-	text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
-	color: #eee !important;
-	background-color: rgba(0, 0, 0, .1);
-}
-
-.wcf-boxTitle > .wcf-menu ul li a:hover {
-	color: rgba(255, 255, 255, 1) !important;
-	border: 1px solid rgba(0, 0, 0, .3);
-	background-color: rgba(0, 0, 0, .2);
-}
-
-.wcf-boxTitle > .wcf-menu ul li a:active,
-.wcf-boxTitle > .wcf-menu ul li a:focus,
-.wcf-boxTitle > .wcf-menu ul li.ui-state-active a {
-	border: 1px solid rgba(0, 0, 0, .5);
-	
-	-webkit-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
-	-moz-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
-	-ms-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
-	-o-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
-	box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
-}
-
-.wcf-boxTitle > .wcf-menu ul li a .wcf-badge {
-	color: #369 !important;
-}
-
-/* Special: Menu below tab-menu */
-
-.wcf-tabMenuContainer > .wcf-menu {
-	border-bottom: 1px solid #ccc;
-	margin: -15px -23px 0;
-	padding: 0 7px 10px;
-}
-
-.wcf-tabMenuContainer > .wcf-menu {
-	background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-	background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-	background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-	background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-}
-
-
-
-/* ############## Bread Crumbs ############## */
-
-/* Globals */
-
-.wcf-breadcrumbs {
-	text-align: left;
-	border: 1px solid rgba(204, 204, 204, 1);
-	border-radius: 5px;
-	background-color: rgba(255, 255, 255, 1);
-	margin-top: 15px;
-	display: block;
-	position: relative;
-	overflow: hidden;
-	box-sizing: border-box;
-}
-
-.wcf-breadcrumbs > ul > li {
-	font-size: 85%;
-	list-style: none;
-	float: left;
-	position: relative;
-	max-width: 30%;
-	
-	-webkit-transition: max-width .2s linear;
-	-moz-transition: max-width .2s linear;
-	-ms-transition: max-width .2s linear;
-	-o-transition: max-width .2s linear;
-	transition: max-width .2s linear;
-}
-
-.wcf-breadcrumbs > ul > li:hover {
-	max-width: 100%;
-}
-
-/* Arrow */
-
-.wcf-breadcrumbs > ul > li > span {
-	border-width: 15px;
-	border-style: solid none solid solid;
-	border-color: transparent transparent transparent rgba(204, 204, 204, 1);
-	display: block !important;
-	position: absolute;
-	width: 0;
-	height: 0;
-	top: -4px;
-	right: -15px;
-	z-index: 20;
-}
-
-.wcf-breadcrumbs > ul > li > .pointer > span {
-	text-indent: -9000px;
-	border-width: 15px;
-	border-style: solid none solid solid;
-	border-color: transparent transparent transparent rgba(255, 255, 255, 1);
-	display: block;
-	position: absolute;
-	width: 0;
-	height: 0;
-	top: -15px;
-	left: -16px;
-	overflow: hidden;
-}
-
-/* Caption */
-
-.wcf-breadcrumbs > ul > li a {
-	text-decoration: none;
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-	color: rgba(153, 153, 153, 1);
-	margin: 0;
-	padding: 5px 1px 5px 20px;
-	display: block;
-	overflow: hidden;
-	white-space: nowrap;
-}
-
-.wcf-breadcrumbs > ul > li:first-child a {
-	border-radius: 5px 0 0 5px;
-	background-image: url('../../icon/home1.svg');
-	background-position: 7px center;
-	background-repeat: no-repeat;
-	background-size: 16px;
-	padding-left: 30px;
-}
-
-.wcf-breadcrumbs > ul > li:hover a {
-	color: rgba(102, 102, 102, 1);
-	background-color: rgba(249, 249, 249, 1);
-	position: relative;
-	z-index: 10;
-}
-
-.wcf-breadcrumbs > ul > li:hover > .pointer > span {
-	border-color: transparent transparent transparent rgba(249, 249, 249, 1);
-}
-
-
-
-/* ############## Tables ############## */
-
-/* Globals */
-
-table {
-	border-spacing: 0;
-	width: 100% !important;
-}
-
-
-
-/* -- -- -- Table Header -- -- -- */
-
-thead th {
-	font-size: 87%;
-	white-space: nowrap;
-}
-
-thead th:first-child {
-	/* Rounded corners for the first table header cell
-	(only in effect if the table is not inside a "div" with class ".boxTitle") */
-	border-top-left-radius: 5px;
-}
-
-thead th:last-child {
-	/* Rounded corners for the last table header cell
-	(only in effect if the table is not inside a "div" with class ".boxTitle") */
-	border-top-right-radius: 5px;
-}
-
-thead th {
-	text-shadow: 0 -1px 0 #000;
-	color: #69c;
-	border-right: 1px solid rgba(0, 0, 0, .2);
-	
-	background-color: rgba(0, 0, 0, .3);
-	background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
-	background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
-	background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
-	background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
-	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
-	
-	padding: 7px;
-	
-	-webkit-transition: background .2s linear;
-	-moz-transition: background .2s linear;
-	-ms-transition: background .2s linear;
-	-o-transition: background .2s linear;
-	transition: background .2s linear;
-}
-
-thead th a {
-	text-shadow: 0 -1px 0 #000;
-	text-decoration: none !important;
-	color: #69c;
-	margin: -7px;
-	padding: 7px;
-	display: block;
-}
-
-thead th:last-child a {
-	border-right-width: 0;
-}
-
-thead th:hover a {
-	color: rgba(255, 255, 255, 1);
-	background-color: rgba(0, 0, 0, .2);
-}
-
-thead th a:active,
-thead th a:focus,
-thead th.active a {
-	color: rgba(255, 255, 255, 1);
-	background-color: rgba(0, 0, 0, .1);
-	
-	-webkit-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
-	-moz-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
-	-ms-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
-	-o-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
-	box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
-}
-
-thead th.active a {
-	font-weight: bold;
-}
-
-thead th.active:hover a {
-	background-color: rgba(0, 0, 0, .3);
-}
-
-thead th a img {
-	/* ToDo: Sort-icon orientation does not work */
-	text-align: right;
-	/* Negative margins to prevent table-cells from expanding vertically when the sort-icon shows up */
-	margin-top: -5px !important;
-	margin-bottom: -5px !important;
-}
-
-
-
-/* -- -- -- Table Body -- -- -- */
-
-tbody tr {
-	border-bottom: 1px solid rgba(255, 255, 255, .3);
-}
-
-tbody tr:last-child {
-	/* No border for the last table row */
-	border-bottom-width: 0;
-}
-
-tbody tr:last-child td:first-child {
-	/* Rounded corners for the first table cell in the last row */
-	border-bottom-left-radius: 5px;
-}
-
-tbody tr:last-child td:last-child {
-	/* Rounded corners for the last table cell in the last row */
-	border-bottom-right-radius: 5px;
-}
-
-tbody td {
-	background-color: #fcfdfe;
-	border-right: 1px solid rgba(255, 255, 255, .3);
-	padding: 5px;
-	
-	-webkit-transition: background .1s linear;
-	-moz-transition: background .1s linear;
-	-ms-transition: background .1s linear;
-	-o-transition: background .1s linear;
-	transition: background .1s linear;
-}
-
-tbody td:last-child {
-	border-right-width: 0;
-}
-
-tbody tr:nth-child(2n+1) td {
-	/* Auto-colorer for every 2nd row */
-	background-color: #f2f6fa;
-}
-
-tbody tr:hover td {
-	background-color: #d8e7f5;
-}
-
-
-
-/* -- -- -- Special -> Table Header -- -- -- */
-
-.wcf-menu ~ .wcf-box thead th:first-child { /* ToDo: Does this case really exist any more? */
-	border-top-left-radius: 0 !important;
-}
-
-.wcf-menu ~ .wcf-box thead th:last-child { /* ToDo: Does this case really exist any more? */
-	border-top-right-radius: 0 !important;
-}
-
-.wcf-boxTitle > hgroup + table th:first-child, /* Boxes with a title bar */
-.wcf-boxTitle > nav + table th:first-child { /* Boxes with a menu in the title bar */
-	border-top-left-radius: 0 !important;
-}
-
-.wcf-boxTitle > hgroup + table th:last-child, /* Boxes with a title bar */
-.wcf-boxTitle > .wcf-menu + table th:last-child { /* Boxes with a menu in the title bar */
-	border-top-right-radius: 0 !important;
-}
-
-
-
-/* -- -- -- Special -> Checkboxes in Table Headers -- -- -- */
-
-thead input[type='checkbox'] {
-	margin-top: -5px !important;
-	margin-bottom: -5px !important;
-}
-
-
-
-/* -- -- -- ToDo: Table Column Formats -- -- -- */
-
-.columnMark,
-.columnStatus {
-	text-align: center;
-	width: 1% !important;
-	white-space: nowrap;
-}
-
-.columnStatus .wcf-badge {
-	margin-right: 1px !important;
-	margin-left: 1px !important;
-}
-
-.columnDigits,
-.columnID {
-	text-align: right;
-	width: 1% !important;
-	white-space: nowrap;
-}
-
-.columnIcon {
-	text-align: left;
-	width: 1% !important;
-	white-space: nowrap;
-}
-
-tr img[src$="D.svg"] {
-	cursor: not-allowed;
-}
-
-tr .columnIcon img {
-	height: 16px;
-	width: 16px;
-}
-
-.big .columnIcon img {
-	height: 24px;
-	width: 24px;
-}
-
-.columnTitle {
-	font-weight: bold;
-	text-align: left;
-}
-
-.columnText {
-	font-weight: normal;
-	text-align: left;
-	max-width: 20%;
-}
-
-.columnDate,
-.columnRegistrationDate {
-	font-size: 85%;
-	text-align: right;
-	width: 1% !important;
-	white-space: nowrap;
-}
-
-.columnURL {
-	font-size: 85%;
-	text-align: left;
-}
-
-
-
-/* ############## ToDo: Page Navigation ############## */
-
-/** 
- * This defines the shape of the Page-Navigation widget  
- * Colors & effects are being defined by the 
- * "Global Button Color & Effect Library" 
- */
-
-/* Globals */
-
-:not(.wcf-statusDisplay) > .wcf-pageNavigation {
-	margin: 5px 0 3px;
-	float: left;
-}
-
-/* -- -- -- Buttons (Level 1 & 2) -- -- -- */
-
-.wcf-pageNavigation ul li {
-	font-weight: bold;
-	text-align: center;
-	border-radius: 3px;
-	margin: 1px;
-	float: left;
-	min-width: 19px;
-}
-
-.wcf-contentHeader .wcf-pageNavigation ul li,
-.wcf-contentFooter .wcf-pageNavigation ul li {
-	margin: 2px;
-}
-
-.wcf-pageNavigation ul li:not(.active):not(.disabled) {
-	cursor: pointer;
-}
-
-.wcf-pageNavigation ul li.disabled {
-	cursor: not-allowed;
-	border: 1px solid rgba(0, 0, 0, .1) !important;
-	background-image: none !important;
-}
-
-.wcf-pageNavigation ul li img {
-	height: 16px;
-	width: 16px;
-}
-
-.wcf-pageNavigation ul li.skip {	
-	padding: 2px 0 1px;
-}
-
-.wcf-pageNavigation ul li a {
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-	text-decoration: none;
-	color: rgba(153, 153, 153, 1);
-	display: inline-block;
-}
-
-.wcf-pageNavigation ul li:not(.disabled):hover a {
-	color: rgba(102, 102, 102, 1);
-}
-
-.wcf-pageNavigation ul li:not(.skip) a {
-	padding: 3px 1px;
-}
-
-.wcf-pageNavigation ul li:active a,
-.wcf-pageNavigation ul li:focus a {
-	color: #333;
-}
-
-.wcf-pageNavigation ul li.active,
-.wcf-pageNavigation ul li.active:hover {
-	text-shadow: 0 1px 0 #000 !important;
-	color: rgba(255, 255, 255, 1) !important;
-	border: 1px solid rgba(0, 0, 0, .3) !important;
-	
-	background-color: rgba(0, 0, 0, .5) !important;
-	background-image: -webkit-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
-	background-image: -moz-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
-	background-image: -o-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
-	background-image: -ms-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
-	background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
-	
-	padding: 3px 0;
-}
-
-/* -- -- -- ToDo: Children (Level 2) -- -- -- */
-
-/* Buttons */
-
-.wcf-pageNavigation ul li.children {
-	position: relative;
-}
-
-.wcf-pageNavigation ul li.children > a {
-	margin-right: -10px;
-	position: relative;
-	z-index: 10;
-}
-
-.wcf-pageNavigation ul li.children input {
-	margin-left: 1px;
-	width: 30px;
-	height: 9px;
-}
-
-.wcf-pageNavigation ul li.children img {
-	position: relative;
-	width: 7px;
-	height: 9px;
-	bottom: 1px;
-	left: 25px;
-}
-
-/* Dropdown */
-
-.wcf-pageNavigation ul li.children .wcf-dropdown {
-	text-align: left;
-	border-color: transparent;
-	border-radius: 3px;
-	background-color: rgba(0, 0, 0, .7);
-	margin-top: 28px;
-	margin-left: -2px;
-	padding: 2px 1px;
-	display: inline-block;
-	position: absolute;
-	height: 0;
-	overflow: hidden;
-	min-width: 165px;
-	max-width: 250px;
-	opacity: 0;
-	
-	-webkit-transition: opacity .2s linear;
-	-moz-transition: opacity .2s linear;
-	-ms-transition: opacity .2s linear;
-	-o-transition: opacity .2s linear;
-	transition: opacity .2s linear;
-}
-
-.wcf-pageNavigation ul li.children:hover .wcf-dropdown {
-	border-color: rgba(255, 255, 255, .7);
-	height: auto;
-	overflow: visible;
-	opacity: 1;
-}
-
-.wcf-pageNavigation ul li.children .wcf-dropdown ul {
-	padding: 0 5px 5px 2px;
-	display: block;
-}
-
-.wcf-pageNavigation ul li.children .wcf-dropdown ul li {
-	margin: 2px 3px;
-}
-
-/* Pointer */
-
-.wcf-pageNavigation ul li.children .pointer {	
-	border-width: 0 7px 7px;
-	border-style: solid;
-	border-color: rgba(255, 255, 255, .7) transparent;
-	display: inline-block !important;
-	width: 0;
-	position: absolute;
-	top: -7px !important;
-	left: 11px;
-}
-
-.wcf-pageNavigation ul li.children .pointer span {	
-	border-width: 0 5px 5px;
-	border-style: solid;
-	border-color: rgba(0, 0, 0, .7) transparent;
-	display: inline-block;
-	width: 0;
-	position: absolute;
-	top: 2px;
-	left: -5px;
-}
-
-/* Special -> Status Display */
-
-.wcf-statusDisplay .wcf-pageNavigation {
-	font-size: 80%;
-}
-
-.wcf-statusDisplay .wcf-pageNavigation ul li {
-	min-width: 13px;
-}
-
-.wcf-statusDisplay .wcf-pageNavigation ul li:not(.skip) a {
-	padding: 1px;
-}
-
-
-
-/* ############## System Notifications (Inline) ############## */
-
-/* Globals */
-
-.wcf-info,
-.wcf-error,
-.wcf-success,
-.wcf-warning {
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-	line-height: 1.5;
-	border-radius: 7px;
-	margin-top: 15px;
-	padding: 7px 15px 7px 50px;
-	box-sizing: border-box;
-}
-
-/* Types */
-
-.wcf-info {
-	color: #68b;
-	border: 1px solid #9be;
-	background-color: #def;
-	
-    background-image: url('../../icon/systemInfo.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
-    background-image: url('../../icon/systemInfo.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
-    background-image: url('../../icon/systemInfo.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
-    background-image: url('../../icon/systemInfo.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
-    background-image: url('../../icon/systemInfo.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
-    
-	background-size: 24px, auto;
-	background-position: 13px center, left top;
-	background-repeat: no-repeat, repeat;
-}
-
-.wcf-success {
-	color: #090;
-	border: 1px solid #0c0;
-	background-color: #efe;
-	
-    background-image: url('../../icon/systemSuccess.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-    background-image: url('../../icon/systemSuccess.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-    background-image: url('../../icon/systemSuccess.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-    background-image: url('../../icon/systemSuccess.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-    background-image: url('../../icon/systemSuccess.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-    
-	background-size: 24px, auto;
-	background-position: 13px center, left top;
-	background-repeat: no-repeat, repeat;
-	
-}
-
-.wcf-warning {
-	color: #990;
-	border: 1px solid #cc0;
-	background-color: #ffd;
-	
-    background-image: url('../../icon/systemWarning.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-    background-image: url('../../icon/systemWarning.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-    background-image: url('../../icon/systemWarning.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-    background-image: url('../../icon/systemWarning.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-    background-image: url('../../icon/systemWarning.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-    
-	background-size: 24px, auto;
-	background-position: 13px center, left top;
-	background-repeat: no-repeat, repeat;
-}
-
-.wcf-error {
-	color: #c00;
-	border: 1px solid #f99;
-	background-color: #fee;
-	
-    background-image: url('../../icon/systemError.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-    background-image: url('../../icon/systemError.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-    background-image: url('../../icon/systemError.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-    background-image: url('../../icon/systemError.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-    background-image: url('../../icon/systemError.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-    
-	background-size: 24px, auto;
-	background-position: 13px center, left top;
-	background-repeat: no-repeat, repeat;
-}
-
-/* Inline Errors */
-
-.wcf-innerError {
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-	line-height: 1.5;
-	color: #c00;
-	border: 1px solid #f99;
-	border-radius: 7px;
-	background-color: rgba(255, 238, 238, 1);
-	background-image: url('../../icon/systemError.svg');
-	background-size: 16px;
-	background-position: 5px center;
-	background-repeat: no-repeat;
-	margin-top: 5px;
-	padding: 2px 10px 2px 25px;
-	display: table !important;
-	position: relative; /* Firefox support (from version 10 on) is buggy */
-	clear: both;
-	
-	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
-	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
-	-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
-	-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
-	box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
-}
-
-.wcf-innerError .pointer {	
-	border-width: 0 7px 7px;
-	border-style: solid;
-	border-color: #f99 transparent;
-	display: inline-block !important;
-	width: 0;
-	position: absolute;
-	top: -7px !important;
-	left: 10%;
-}
-
-.wcf-innerError .pointer span {	
-	border-width: 0 5px 5px;
-	border-style: solid;
-	border-color: rgba(255, 238, 238, 1) transparent;
-	display: inline-block;
-	width: 0;
-	position: absolute;
-	top: 2px;
-	left: -5px;
-}
-
-/* Special -> Pre Input */
-
-.wcf-preInput ~ .wcf-innerError .pointer {	
-	right: 10%;
-	left: auto;
-}
-
-
-
-/* ############## ToDo: System Notifications (Sheet) ############## */
-
-/* Globals */
-
-.wcf-systemNotification { /* declarations taken from .success */
-	background-color: rgba(238, 255, 238, 1);
-	border: 1px solid rgba(0, 204, 0, 1);
-	border-top-width: 0;
-	border-radius: 0 0 5px 5px;
-	color: rgba(0, 153, 0, 1);
-	left: 40%;
-	padding: 14px;
-	padding-top: 10px;
-	position: fixed;
-	text-align: center;
-	top: -38px;
-	width: auto;
-	z-index: 500;
-	
-	-webkit-transition: top .5s linear;
-	-moz-transition: top .5s linear;
-	-ms-transition: top .5s linear;
-	-o-transition: top .5s linear;
-	transition: top .5s linear;
-}
-
-.wcf-systemNotification.open {
-	top: 0;
-}
-
-
-
-/* ############## ToDo: WCF Dialog ############## */
-
-/* Globals */
-
-.wcf-dialogContainer {
-	border: 23px solid transparent;
-	border-radius: 15px;
-	background-color: rgba(0, 0, 0, .4);
-	margin-right: auto !important;
-	margin-left: auto !important;
-	position: fixed !important;
-	
-	-webkit-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
-	-moz-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
-	-ms-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
-	-o-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
-	box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	.wcf-dialogContainer {
-		min-width: 500px !important;
-		max-width: 780px !important;
-	}
-	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	.wcf-dialogContainer {
-		min-width: 200px !important;
-		max-width: 380px !important;
-	}
-	
-}
-
-/* Titlebar */
-
-.wcf-dialogTitlebar {
-	border-bottom: 1px solid #036;
-	border-top-left-radius: 7px;
-	border-top-right-radius: 7px;
-	background-color: #29374a;
-	/* Disabled, because the WoltLab header-image is not LGPL 
-	Activate it if you want to test your own header image */
-	/* background-image: url('../../../images/header.png'); */
-	background-position: left top;
-	background-repeat: repeat-x;
-	padding: 10px 20px;
-	position: relative;
-	display: block;
-	/*cursor: move;*/
-}
-
-.wcf-dialogTitle {
-	font-size: 170%;
-	font-weight: bold;
-	text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
-	color: rgba(255, 255, 255, 1);
-	display: block;
-}
-
-.wcf-dialogCloseButton {
-	background-image: url('../../icon/delete2.svg');
-	background-size: 32px;
-	background-position: top left;
-	background-repeat: no-repeat;
-	position: absolute !important;
-	width: 32px;
-	height: 32px;
-	top: 5px;
-	right: 10px;
-	cursor: pointer;
-}
-
-.wcf-dialogCloseButton span {
-	/* Removes the button-caption */
-	position: absolute;
-	left: -9000px;
-	top: -9000px;
-	width: 0;
-}
-
-/* Content */
-
-.wcf-dialogContent {
-	color: rgba(238, 238, 238, 1);
-	background-color: #333;
-	overflow: auto;
-}
-
-.wcf-dialogContainer > .wcf-dialogContent {
-	border-radius: 7px;
-	padding: 0;
-	/*width: auto !important;*/
-}
-
-.wcf-dialogTitlebar ~ .wcf-dialogContent {
-	border-top-left-radius: 0;
-	border-top-right-radius: 0;
-	border-bottom-left-radius: 7px;
-	border-bottom-right-radius: 7px;
-	padding: 10px 20px 20px;
-}
-
-/* Special */
-
-#ajaxExceptionStacktrace {
-	white-space: nowrap;
-	overflow: scroll;
-	overflow-y: hidden;
-}
-
-#ajaxExceptionStacktrace {
-	font-family: monospace;
-	font-size: 90%;
-	line-height: 1.2;
-	border: 1px solid #ccc;
-	padding: 3px;
-}
-
-
-
-/* ############## ToDo: Overlay Spinner ############## */
-
-.wcf-dialogOverlay {
-	background-color: rgba(0, 0, 0, 1);
-	opacity: .5;
-	position: fixed;
-	width: 100% !important;
-	top: 0;
-	left: 0;
-}
-
-
-/* ToDo: What is that and change that class-name! */
-
-.wcf-overlayLoading {
-	background-color: rgba(255, 255, 255, 1);
-	background-image: url('../../icon/spinner1.svg');
-	background-position: center center;
-	background-size: 32px;
-	background-repeat: no-repeat;
-}
-
-
-
-/* ############## Balloon Tooltips ############## */
-
-/* Globals */
-
-.jsTooltip { /* Do not change this style */
-	cursor: pointer;
-}
-
-.wcf-balloonTooltip {
-	font-size: .85em;
-	color: rgba(255, 255, 255, 1);
-	border: 1px solid rgba(255, 255, 255, .7);
-	border-radius: 5px;
-	background-color: rgba(0, 0, 0, .7);
-	padding: 5px 10px 7px;
-	position: absolute;
-	max-width: 300px;
-	z-index: 800;
-	
-	-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-	-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-	-ms-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-	-o-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-	box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-}
-
-/* Pointer */
-
-.wcf-balloonTooltip .pointer {	
-	border-width: 0 7px 7px;
-	border-style: solid;
-	border-color: rgba(255, 255, 255, .7) transparent;
-	display: inline-block !important;
-	width: 0;
-	position: absolute;
-	top: -7px !important;
-	left: 50%;
-}
-
-.wcf-balloonTooltip .pointer span {	
-	border-width: 0 5px 5px;
-	border-style: solid;
-	border-color: rgba(0, 0, 0, .7) transparent;
-	display: inline-block;
-	width: 0;
-	position: absolute;
-	top: 2px;
-	left: -5px;
-}
-
-
-
-/* ############## ToDo: Likes Widget ############## */
-
-/*  @see theadPostList.tpl */
-
-/** 
- * This defines the shape of the Likes widget  
- * Colors & effects are being defined by the 
- * "Global Button Color & Effect Library" 
- */
-
-/* -- -- -- -- Widget -- -- -- -- -- */
-
-/* Globals */
-
-.wcf-likesWidget {
-	margin: 0 0 0 15px;
-}
-
-/* Buttons */
-
-.wcf-likesWidget > ul {
-	float: right;
-	margin-right: 7px;
-	margin-left: 10px;
-}
-
-.wcf-likesWidget > ul > li {
-	text-align: right;
-	margin-top: 3px;
-	display: inline-block;
-}
-
-.wcf-likesWidget > ul > li > a {
-	padding: 2px 4px 3px;
-}
-
-.wcf-likesWidget > ul > li:first-child {
-	margin-right: -5px;
-}
-
-
-
-/* ############## ToDo: Clipboard Editor Buttons ############## */
-
-/* Globals */
-
-.wcf-clipboardEditor > ul > li {
-	font-size: .85em;
-	border-radius: 30px;
-	margin-top: 7px;
-	margin-right: 3px;
-	margin-left: 3px;
-	float: left;
-	position: relative;
-}
-
-.wcf-clipboardEditor > ul > li span {
-	text-decoration: none !important;
-	cursor: pointer;
-	background-image: url('../../icon/dropdown1.svg');
-	background-position: right center;
-	background-repeat: no-repeat;
-	margin-right: 5px;
-	padding: 3px 12px 5px 10px;
-	display: inline-block;
-}
-
-
-
-/* ############## ToDo: CK-Editor ############## */
-
-.wcf-wideEditor dt {
-	display: none;
-}
-
-.wcf-wideEditor dd {
-	margin-left: 0;
-}
-
-
-
-/* ############## Global Button Color & Effect Library ############## */
-
-/** 
- * This defines the colors & effects of Button elements 
- * Define the shape of the element in a separate class 
- */
-
-/* -- -- -- Normal Buttons -- -- -- */
-
-/* Normal State */
-
-.wcf-button,
-input[type='reset']:not([disabled]),
-input[type='submit']:not([disabled]),
-input[type='button']:not([disabled]),
-button:not([disabled]) {
-	text-decoration: none;
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-	color: rgba(153, 153, 153, 1);
-	border-width: 1px;
-	border-style: solid;
-	border-color: #ccc #bbb #aaa;
-	
-	background-color: #fefefe;
-	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	
-	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
-	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
-	-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
-	-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
-	box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
-	
-	-webkit-transition-property: border, box-shadow, background-color, background-image, color;
-	-webkit-transition-duration: .1s;
-	-webkit-transition-timing-function: linear;
-	
-	-moz-transition-property: border, box-shadow, background-color, background-image, color;
-	-moz-transition-duration: .1s;
-	-moz-transition-timing-function: linear;
-	
-	-ms-transition-property: border, box-shadow, background-color, background-image, color;
-	-ms-transition-duration: .1s;
-	-ms-transition-timing-function: linear;
-	
-	-o-transition-property: border, box-shadow, background-color, background-image, color;
-	-o-transition-duration: .1s;
-	-o-transition-timing-function: linear;
-	
-	transition-property: border, box-shadow, background-color, background-image, color;
-	transition-duration: .1s;
-	transition-timing-function: linear;
-}
-
-/* Hover State */
-
-.wcf-button:hover,
-.default .wcf-button:hover,
-input[type='reset']:not([disabled]):hover,
-input[type='submit']:not([disabled]):hover,
-input[type='button']:not([disabled]):hover,
-button:not([disabled]):hover {
-	text-decoration: none;
-	color: rgba(102, 102, 102, 1);
-	border-width: 1px;
-	border-style: solid;
-	border-color: #ffc053 #fa2 #fc9e07;
-	
-	background-color: #fff9f4;
-	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-}
-
-/* Active State */
-
-.wcf-button:focus,
-.default .wcf-button:focus,
-input[type='reset']:not([disabled]):focus,
-input[type='submit']:not([disabled]):focus,
-input[type='button']:not([disabled]):focus,
-button:not([disabled]):focus,
-
-.wcf-button:active,
-.active .wcf-button,
-.default .wcf-button:active,
-input[type='reset']:not([disabled]):active,
-input[type='submit']:not([disabled]):active,
-input[type='button']:not([disabled]):active,
-button:not([disabled]):active {
-	color: #333;
-	border-width: 1px;
-	border-style: solid;
-	border-color: #fc9e07 #fa2 #ffc053;
-	
-	background-color: #fff9f4;
-	background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	
-	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-}
-
-
-
-/* -- -- -- Default Buttons -- -- -- */
-
-/* Default State Glow */
-
-@-webkit-keyframes glowButtons {
-	0% {
-		-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
-	}
-	100% {
-		-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
-	}
-}
-@-moz-keyframes glowButtons {
-	0% {
-		-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
-	}
-	100% {
-		-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
-	}
-}
-@-ms-keyframes glowButtons {
-	0% {
-		-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
-	}
-	100% {
-		-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
-	}
-}
-/* disabled to ease rendering work for Opera 
-@-o-keyframes glowButtons {
-	0% {
-		-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
-	}
-	100% {
-		-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
-	}
-}
-*/
-@keyframes glowButtons {
-	0% {
-		box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
-	}
-	100% {
-		box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
-	}
-}
-
-/* Default Normal State */
-
-.default .wcf-button,
-input[type='submit']:not([disabled]),
-input[type='button']:not([disabled]).default,
-button:not([disabled]).default {
-	color: #69c;
-	border-width: 1px;
-	border-style: solid;
-	border-color: #7aade0 #69c #5285b8;
-	
-	background-color: #e7f2fd;
-	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
-	background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
-	background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
-	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
-	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
-	
-	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
-	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
-	-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
-	-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
-	
-	-webkit-animation-name: glowButtons;
-	-webkit-animation-duration: 1s;
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-direction: alternate;
-	-webkit-animation-timing-function: ease-in-out; 
-	
-	-moz-animation-name: glowButtons;
-	-moz-animation-duration: 1s;
-	-moz-animation-iteration-count: infinite;
-	-moz-animation-direction: alternate;
-	-moz-animation-timing-function: ease-in-out;
-	
-	-ms-animation-name: glowButtons;
-	-ms-animation-duration: 1s;
-	-ms-animation-iteration-count: infinite;
-	-ms-animation-direction: alternate;
-	-ms-animation-timing-function: ease-in-out; 
-	/* disabled to ease rendering work for Opera 
-	-o-animation-name: glowButtons;
-	-o-animation-duration: 1s;
-	-o-animation-iteration-count: infinite;
-	-o-animation-direction: alternate;
-	-o-animation-timing-function: ease-in-out;
-	*/
-	animation-name: glowButtons;
-	animation-duration: 1s;
-	animation-iteration-count: infinite;
-	animation-direction: alternate;
-	animation-timing-function: ease-in-out;
-}
-
-/* Default Hover State Glow */
-
-@-webkit-keyframes glowButtonsHover {
-    0% {
-        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
-    }
-    100% {
-        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
-    }
-}
-@-moz-keyframes glowButtonsHover {
-    0% {
-        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
-    }
-    100% {
-        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
-    }
-}
-@-ms-keyframes glowButtonsHover {
-    0% {
-        -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
-    }
-    100% {
-        -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
-    }
-}
-/* disabled to ease rendering work for Opera 
-@-o-keyframes glowButtonsHover {
-    0% {
-        -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
-    }
-    100% {
-        -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
-    }
-}
-*/
-@keyframes glowButtonsHover {
-    0% {
-        box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
-    }
-    100% {
-        box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
-    }
-}
-
-/* Default Hover State */
-
-.default .wcf-button:hover,
-input[type='submit']:not([disabled]):hover,
-input[type='button']:not([disabled]).default:hover,
-button:not([disabled]).default:hover {	
-	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
-	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
-	-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
-	-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
-	
-	-webkit-animation-name: glowButtonsHover;
-	-webkit-animation-duration: 1s;
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-direction: alternate;
-	-webkit-animation-timing-function: ease-in-out; 
-	
-	-moz-animation-name: glowButtonsHover;
-	-moz-animation-duration: 1s;
-	-moz-animation-iteration-count: infinite;
-	-moz-animation-direction: alternate;
-	-moz-animation-timing-function: ease-in-out;
-	
-	-ms-animation-name: glowButtonsHover;
-	-ms-animation-duration: 1s;
-	-ms-animation-iteration-count: infinite;
-	-ms-animation-direction: alternate;
-	-ms-animation-timing-function: ease-in-out; 
-	/* disabled to ease rendering work for Opera 
-	-o-animation-name: glowButtonsHover;
-	-o-animation-duration: 1s;
-	-o-animation-iteration-count: infinite;
-	-o-animation-direction: alternate;
-	-o-animation-timing-function: ease-in-out;
-	*/
-	animation-name: glowButtonsHover;
-	animation-duration: 1s;
-	animation-iteration-count: infinite;
-	animation-direction: alternate;
-	animation-timing-function: ease-in-out;
-}
-
-/* Default Active State Glow */
-
-@-webkit-keyframes glowDefaultButtonsActive {
-    0% {
-        -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-    100% {
-        -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-}
-@-moz-keyframes glowDefaultButtonsActive {
-    0% {
-        -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-    100% {
-        -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-}
-@-ms-keyframes glowDefaultButtonsActive {
-    0% {
-        -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-    100% {
-        -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-}
-/* disabled to ease rendering work for Opera 
-@-o-keyframes glowDefaultButtonsActive {
-    0% {
-        -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-    100% {
-        -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-}
-*/
-@keyframes glowDefaultButtonsActive {
-    0% {
-        box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-    100% {
-        box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-}
-
-/* Default Active State */
-
-.default .wcf-button:focus,
-input[type='submit']:not([disabled]):focus,
-input[type='button']:not([disabled]).default:focus,
-button:not([disabled]).default:focus,
-
-.default .wcf-button:active,
-input[type='submit']:not([disabled]):active,
-input[type='button']:not([disabled]).default:active,
-button:not([disabled]).default:active {
-	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	
-	-webkit-animation-name: glowDefaultButtonsActive;
-	-webkit-animation-duration: 1s;
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-direction: alternate;
-	-webkit-animation-timing-function: ease-in-out; 
-	
-	-moz-animation-name: glowDefaultButtonsActive;
-	-moz-animation-duration: 1s;
-	-moz-animation-iteration-count: infinite;
-	-moz-animation-direction: alternate;
-	-moz-animation-timing-function: ease-in-out;
-	
-	-ms-animation-name: glowDefaultButtonsActive;
-	-ms-animation-duration: 1s;
-	-ms-animation-iteration-count: infinite;
-	-ms-animation-direction: alternate;
-	-ms-animation-timing-function: ease-in-out; 
-	/* disabled to ease rendering work for Opera 
-	-o-animation-name: glowDefaultButtonsActive;
-	-o-animation-duration: 1s;
-	-o-animation-iteration-count: infinite;
-	-o-animation-direction: alternate;
-	-o-animation-timing-function: ease-in-out;
-	*/
-	animation-name: glowDefaultButtonsActive;
-	animation-duration: 1s;
-	animation-iteration-count: infinite;
-	animation-direction: alternate;
-	animation-timing-function: ease-in-out;
-}
-
-
-
-/* -- -- -- Special Buttons -- -- -- */
-
-/* Disabled State */
-
-.disabled .wcf-button,
-input[disabled],
-input[type='button'][disabled],
-button[disabled] {
-	color: rgba(153, 153, 153, 1);
-	cursor: default;
-	border-width: 1px;
-	border-style: solid;
-	border-color: #ccc #bbb #aaa;
-	background-color: transparent;
-}
-
-
-
-/* ############## ACP Package List ############## */
-
-/* -- -- -- Application Package -- -- -- */
-
-/* Globals */
-
-.wcf-infoPackageApplication {
-	position: relative;
-}
-
-.wcf-infoPackageApplication .wcf-packageApplicationIcon {
-	position: absolute;
-	top: 30px;
-	left: 25px;
-	width: 96px;
-	height: 96px;
-}
-
-.wcf-infoPackageApplication div {
-	margin-bottom: -15px;
-	margin-left: 30px;
-}
-
-.wcf-infoPackageApplication footer {
-	position: relative;
-	right: -15px;
-	bottom: -15px;
-}
-
-.wcf-infoPackageApplication footer nav {
-	/* General toggle switch for package nav-bar orientation (options: left|center|right) */
-	text-align: right;
-}
-
-
-
-/* -- -- -- Package Plugin -- -- -- */
-
-/* Globals */
-
-.wcf-infoPackagePlugin {
-	text-align: center;
-	margin: 15px 10px 0 0;
-	display: inline-block;
-	position: relative;
-	width: 150px;
-	height: 150px;
-	overflow: hidden;
-	
-	-webkit-transition: background, border, color .1s linear;
-	-moz-transition: background, border, color .1s linear;
-	-ms-transition: background, border, color .1s linear;
-	-o-transition: background, border, color .1s linear;
-	transition: background, border, color .1s linear;
-}
-
-.wcf-infoPackagePlugin a {
-	text-decoration: none;
-}
-
-.wcf-infoPackagePlugin > div > a {
-	color: rgba(153, 153, 153, 1);
-	background-size: 96px;
-	background-position: center 70%;
-	background-repeat: no-repeat;
-	margin: 1px;
-	display: block;
-	position: relative;
-	width: 148px;
-	height: 148px;
-}
-
-.wcf-infoPackagePlugin:hover > div > a {
-	color: rgba(102, 102, 102, 1);
-}
-
-.wcf-infoPackagePlugin > div > a > h1 { /* ToDo: h1 inside a ??? */
-	font-size: 100%;
-	font-weight: bold;
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-	word-wrap: break-word;
-	margin: 0 -1px;
-	padding: 3px 1px;
-	display: block;
-	position: relative;
-	z-index: 100;
-}
-
-.wcf-infoPackagePlugin:hover > div > a > h1 {
-	border-bottom: 1px solid rgba(204, 204, 204, 1);
-	
-	background-color: rgba(0, 0, 0, .015);
-	background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-	background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-	background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-	background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-}
-
-.wcf-infoPackagePlugin footer {
-	margin-top: -22px;
-	width: 100%;
-}
-
-.wcf-infoPackagePlugin > div > a > small {
-	font-size: 85%;
-	font-weight: normal;
-	text-shadow: none;
-	border-radius: 7px;
-	padding: 40px 5px;
-	display: block;
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	width: 139px;
-	opacity: 0;
-	
-	-webkit-transition: opacity .1s linear;
-	-moz-transition: opacity .1s linear;
-	-ms-transition: opacity .1s linear;
-	-o-transition: opacity .1s linear;
-	transition: opacity .1s linear;
-}
-
-.wcf-infoPackagePlugin:hover > div > a > small {
-	background-color: rgba(255, 255, 255, .9);
-	z-index: 10;
-	opacity: 1;
-}
-
-
-
-/* -- -- -- Package Footers -- -- -- */
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	.wcf-infoPackageApplication footer nav,
-	.wcf-infoPackagePlugin footer nav {
-		opacity: 0;
-		
-		-webkit-transition: opacity .1s linear;
-		-moz-transition: opacity .1s linear;
-		-ms-transition: opacity .1s linear;
-		-o-transition: opacity .1s linear;
-		transition: opacity .1s linear;
-	}
-	
-	.wcf-infoPackageApplication:hover footer nav,
-	.wcf-infoPackagePlugin:hover footer nav {
-		opacity: 1;
-	}
-	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	.wcf-infoPackageApplication footer nav,
-	.wcf-infoPackagePlugin footer nav {
-		opacity: 1;
-	}
-	
-}
-
-
-
-/* ############## TODO: Sortable lists ############## */
-
-/* TODO: Everything is working right now and looks pretty much like similar stuff. Adjust the colors, but take care
-	 when changing margins/paddings. Keep them relative to each other, otherwise you might encounter a strange
-	 behavior (in rare cases) which might lead to a situation where you will be unable to move an item properly. - Alex */
-
-/* This is the placeholder (or ghost) which will be inserted on runtime in order to show the possible insertation point - Alex */
-.wcf-sortableListContainer .wcf-badgeYellow {
-	border-radius: 5px;
-	margin: 3px 0;
-	padding: 4px;
-}
-
-/* TODO: This was taken from badgeRed and is used to indicate a list which is not a valid drop target */
-.wcf-badgeYellow.wcf-sortableInvalidTarget {
-	color: #c00;
-	border: 1px solid #f99;
-	background-color: #fee;
-}
-
-/* Notice: min-height was safely removed */
-.wcf-sortableList {
-	list-style-position: outside;
-	list-style-type: decimal;
-	margin-left: 21px;
-}
-
-.wcf-sortableNode {
-	cursor: move;
-}
-
-.wcf-sortableNodeLabel {
-	border-bottom: 1px solid rgba(216, 231, 245, 1);
-	padding: 7px 7px 11px 0;
-	display: block; /* Do not use anything other than block here, otherwise the sortables go crazy - Alex */
-}
-
-
-
-
-
-
-/* ############## CSS Experiments (active) ############## */
-
-/* what is that? */
-/* Once we're determing the dimensions of an element (by JS) we move it into body and wrap it with
-   a container with class 'wcfDimensions' in order to calculate the precise dimensions. We could also
-   embed it directly in JS (using style-attribute) but I thought it was better this way. - Alex */
-.wcfDimensions {
-	display: inline-block;
-}
-
-
-
-
-
-/* ############## ToDo: Action Proxy Loading ############## */
-
-/* Spinner */
-
-.wcf-spinner {
-	text-align: center;
-	text-shadow: 0 -1px 0 #000;
-	color: #fff;
-	border-width: 1px;
-	border-style: solid;
-	border-color: rgba(0, 0, 0, .3);
-	border-radius: 5px;
-	
-	background-color: rgba(0, 0, 0, .5) !important;
-	background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
-	background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
-	background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
-	background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
-	background-image: linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
-	
-	padding: 7px 0;
-	position: fixed;
-	top: 200px;
-	left: 46%;
-	right: 46%;
-	width: 70px;
-	z-index: 1000;
-	
-	-webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-	-moz-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-	-ms-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-	-o-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-	box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-}
-
-.wcf-spinner img {
-	margin-bottom: 10px;
-	height: 48px;
-	width: 48px;
-}
-
-
-
-
-
-
-
-
-
-
-
-/* DEBUG ONLY - DO NOT TOUCH! */
-
-.ajaxDebugMessage p {
-	border-bottom: 1px solid rgb(192, 192, 192);
-	margin: 0 3px;
-	padding: 7px 0 3px 0;
-}
-
-.ajaxDebugMessage p:first-child,
-.ajaxDebugMessage p:last-child {
-	border-bottom-width: 0;
-	margin: 0;
-	padding: 3px;
-}
-
-.ajaxDebugMessage p:last-child {
-	font-family: Monospace;
-	font-size: 110%;
-}
-
-
-
-
-
-/* Like colors */
-
-.wcf-liked {
-	color: #090;
-}
-
-.wcf-disliked {
-	color: #900;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/* -- -- -- -- -- EOF -- -- -- -- -- */
diff --git a/wcfsetup/install/files/acp/style/wcf.less b/wcfsetup/install/files/acp/style/wcf.less
new file mode 100644
index 0000000000..965c1643ca
--- /dev/null
+++ b/wcfsetup/install/files/acp/style/wcf.less
@@ -0,0 +1,4648 @@
+/**
+ * WCF Testing Styles  
+ *
+ * @author		Harald Szekely 
+ * @copyright	2011 WoltLab GmbH 
+ */
+
+/* ############## Reset ############## */
+
+/**
+ * Parts taken from
+ * http://meyerweb.com/eric/tools/css/reset/ 
+ * v2.0 | 20110126
+ * License: none (public domain)
+ * modifyed to meet the needs of WoltLab
+ */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+
+ol, ul {
+	list-style: none;
+}
+
+blockquote, q {
+	quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+	content: '';
+	content: none;
+}
+
+
+
+/* ############## Globals ############## */
+
+* {
+	text-overflow: ellipsis;
+}
+
+img {
+	vertical-align: middle !important;
+}
+
+a {
+	color: #369;
+	text-decoration: none;
+	
+	-webkit-transition: color .1s linear;
+	-moz-transition: color .1s linear;
+	-ms-transition: color .1s linear;
+	-o-transition: color .1s linear;
+	transition: color .1s linear;
+}
+
+a:hover {
+	text-decoration: underline;
+	color: #036;
+}
+
+hr {
+	display: none;
+}
+
+::selection {
+	text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
+	color: #300;
+	background-color: rgba(255, 170, 34, .7);
+}
+
+a,
+img[src*='delete'],
+img[src*='uninstall'],
+img[src*='install'],
+img[src*='update'],
+img[src*='run'],
+img[src*='info'],
+img[src*='disable'],
+img[src*='enable'] {
+	cursor: pointer;
+}
+
+
+
+/* ############## ToDo: Global Structural Classes ############## */
+
+/* -- -- -- Misc -- -- --  */
+
+.hot {
+	color: #b00; 
+}
+
+.invisible {
+	position: absolute;
+	left: -9000px;
+	top: -9000px;
+}
+
+/* Uniform background image */
+
+.wcf-headerImage {
+	background-image: url('../../../images/header.png');
+}
+
+/* -- -- -- URLs -- -- --  */
+
+.wcf-externalURL {
+	background-image: url('../../icon/externalURL1.svg');
+	background-position: right center;
+	background-repeat: no-repeat;
+	padding-right: 17px;
+}
+
+.wcf-eMailLink,
+a[href^="mailto:"] {
+	background-image: url('../../icon/email1.svg');
+	background-position: left center;
+	background-repeat: no-repeat;
+	padding-left: 17px;
+}
+
+/* -- -- -- Margins -- -- --  */
+
+.wcf-marginTop {
+	margin-top: 15px;
+}
+
+.wcf-marginBottom {
+	margin-bottom: 15px;
+}
+
+/* -- -- -- Paddings -- -- --  */
+
+/* ToDo: Columns */
+
+.wcf-columns-2 {
+	width: 45%;
+}
+
+.wcf-columns-3 {
+	width: 30%;
+}
+
+
+/* -- -- -- ToDo: Floated Elements -- -- --  */
+
+/* possibly obsolete */
+
+.floatContainer:after {
+	content: "";
+	height: 0;
+	display: block;
+	clear: both;
+}
+
+.floated {
+	margin-right: 5px;
+	margin-left: 5px;
+	float: left;
+}
+
+
+
+/* -- -- -- Shadows -- -- --  */
+
+/* Shadows for boxes - do not use on small boxes! */
+
+.wcf-shadow1 {
+	-webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
+	-moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
+	-ms-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
+	/* ToDo: Opera doesn't like that so much! Bug-report sent to Opera 
+	-o-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
+	box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);*/
+}
+
+/* Use that shadow for tab menus - do not use on small boxes! */
+
+.wcf-shadow2 {
+	-webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);
+	-moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);
+	-ms-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);
+	/* ToDo: Opera doesn't like that so much! Bug-report sent to Opera 
+	-o-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);
+	box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);*/
+}
+
+
+
+/* ############## Containers ############## */
+
+/* -- -- -- Globals -- -- --  */
+
+/** 
+ * This is a generic container for surrounding blocks of 
+ * text with an optional leading icon. The icon-size is 
+ * free. The icon-Container is optional. 
+ * Note: 
+ * This box does not support RTL in WebKit-browsers! 
+ * Thus the box-style may change in the future. 
+ */
+
+.wcf-container {
+	overflow: hidden;
+	box-sizing: border-box;
+}
+
+.wcf-containerIcon {
+	float: left;
+	margin-right: 5px;
+}
+
+.wcf-containerContent {
+	padding: 1px;
+	overflow: hidden;
+}
+
+
+
+/* ############## Badges ############## */
+
+/* Globals */
+
+.wcf-badge {
+	font-size: 85%;
+	font-weight: bold;
+	text-shadow: none;
+	text-decoration: none;
+	border-radius: 13px;
+	background-color: rgba(255, 255, 255, 1);
+	margin-right: -3px;
+	margin-left: 3px;
+	padding: 2px 5px;
+	display: inline-block;
+	position: relative;
+	top: -1px;
+}
+
+/* Badge Types */
+
+.wcf-badgeBorder {
+	border: 1px solid #ccc;
+}
+
+.wcf-badgeBlue {
+	color: #68b;
+	border: 1px solid #9be;
+	background-color: #def;
+}
+
+.wcf-badgeGreen {
+	color: #090;
+	border: 1px solid #0c0;
+	background-color: #efe;
+}
+
+.wcf-badgeYellow {
+	color: #990;
+	border: 1px solid #cc0;
+	background-color: #ffd;
+}
+
+.wcf-badgeRed {
+	color: #c00;
+	border: 1px solid #f99;
+	background-color: #fee;
+}
+
+/* Buttons */
+
+.wcf-badgeButton {
+	cursor: pointer;
+	border-radius: 30px;
+	margin-right: 0;
+	margin-left: 0;
+	padding: 3px 10px 5px;
+	display: inline-block;
+}
+
+li.wcf-badgeButton,
+li > .wcf-badgeButton {
+	margin-top: 7px;
+	margin-right: 3px;
+	margin-left: 3px;
+	float: left;
+}
+
+.wcf-badgeButton,
+.wcf-badgeButton a {
+	text-decoration: none !important;
+}
+
+
+
+/* ############## Labels ############## */
+
+/* -- -- -- Label List -- -- -- */
+
+.wcf-labelList {
+	margin: 0;
+	padding: 5px 0 0;
+	display: inline-block;
+}
+
+/* -- -- -- Label -- -- -- */
+
+/* Globals */
+
+.wcf-label {
+	font-size: 85%;
+	font-weight: bold;
+	color: #eee;
+	text-shadow: none;
+	text-decoration: none;
+	border-radius: 13px;
+	background-color: rgba(102, 102, 102, 1);
+	margin-right: 3px;
+	padding: 3px 8px 4px;
+	display: inline-block;
+	position: relative;
+	top: -1px;
+	cursor: pointer;
+}
+
+.wcf-label:hover {
+	color: rgba(255, 255, 255, 1);
+	background-color: rgba(51, 51, 51, 1);
+}
+
+.wcf-label a {
+	color: #eee;
+	text-decoration: none;
+}
+
+.wcf-label a:hover {
+	color: rgba(255, 255, 255, 1);
+}
+
+/* Default Colors */
+
+.wcf-label.black {
+	background-color: #333;
+}
+
+.wcf-label.black:hover {
+	background-color: #000;
+}
+
+.wcf-label.brown {
+	background-color: #c63;
+}
+
+.wcf-label.brown:hover {
+	background-color: #930;
+}
+
+.wcf-label.red {
+	background-color: #c00;
+}
+
+.wcf-label.red:hover {
+	background-color: #900;
+}
+
+.wcf-label.orange {
+	background-color: #f90;
+}
+
+.wcf-label.orange:hover {
+	background-color: #f60;
+}
+
+.wcf-label.yellow {
+	background-color: #ff0;
+}
+
+.wcf-label.yellow:hover {
+	background-color: #cc0;
+}
+
+.wcf-label.green {
+	background-color: #0c0;
+}
+
+.wcf-label.green:hover {
+	background-color: #090;
+}
+
+.wcf-label.blue {
+	background-color: #09f;
+}
+
+.wcf-label.blue:hover {
+	background-color: #06c;
+}
+
+.wcf-label.purple {
+	background-color: #c0f;
+}
+
+.wcf-label.purple:hover {
+	background-color: #90c;
+}
+
+.wcf-label.pink {
+	background-color: #f0c;
+}
+
+.wcf-label.pink:hover {
+	background-color: #c09;
+}
+
+/* Special */
+
+table .wcf-label {
+	padding: 1px 6px 2px;
+}
+
+
+
+/* ############## ToDo: Dropdown ############## */
+
+/* Dropdown Caption */
+
+.wcf-dropdownCaption,
+.wcf-dropdownCaption a {
+	text-decoration: none;
+	cursor: pointer;
+	display: inline-block;
+}
+
+.wcf-dropdownCaption:hover,
+.wcf-dropdownCaption a:hover {
+	text-decoration: none;
+}
+
+/* Dropdown */
+
+.wcf-dropdown {
+	color: rgba(255, 255, 255, 1);
+	border-width: 1px;
+	border-style: solid;
+	border-color: rgba(255, 255, 255, .7);
+	border-radius: 5px;
+	background-color: rgba(0, 0, 0, .7);
+	margin-top: 25px;
+	display: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 400;
+	overflow: hidden;
+	white-space: nowrap;
+	
+	-webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+	-moz-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+	-ms-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+	-o-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+	box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+	
+	-webkit-transition: color background .1s ease;
+	-moz-transition: color background .1s ease;
+	-ms-transition: color background .1s ease;
+	-o-transition: color background .1s ease;
+	transition: color background .1s ease;
+}
+
+.wcf-dropdown.open {
+	display: block;
+}
+
+/* Dropdown Items */
+
+.wcf-dropdown > li,
+.wcf-dropdown > div {
+	text-shadow: none;
+	color: #ccc;
+	cursor: pointer; 
+	
+	-webkit-transition: color background .2s linear;
+	-moz-transition: color background .2s linear;
+	-ms-transition: color background .2s linear;
+	-o-transition: color background .2s linear;
+	transition: color background .2s linear;
+}
+
+.wcf-dropdown > div {
+	padding: 5px 7px;
+}
+
+.wcf-dropdown > :first-child {
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+}
+
+.wcf-dropdown > :last-child {
+	border-bottom-left-radius: 5px;
+	border-bottom-right-radius: 5px;
+}
+
+.wcf-dropdown > :hover:not(ul):not(.pointer),
+.wcf-dropdown > .active {
+	color: rgba(255, 255, 255, 1);
+	cursor: pointer;
+	background-color: rgba(0, 0, 0, .5);
+}
+
+.wcf-dropdown > li.divider:not(:first-child) {
+	border-top: 1px solid rgba(255, 255, 255, .7);
+}
+
+.wcf-dropdown > li {
+	text-decoration: none;
+	padding: 5px 7px;
+	display: block;
+}
+
+.wcf-dropdown > li a {
+	text-decoration: none;
+	color: #ccc;
+	padding: -5px -7px; /* ToDo: what's that? ;-) */
+	display: block;
+}
+
+.wcf-dropdown > li a:hover {
+	color: rgba(255, 255, 255, 1);
+	background-color: rgba(0, 0, 0, .5);
+}
+
+
+
+/* ############## Body ############## */
+
+/* Globals */
+
+body {
+	font-family: 'Trebuchet MS', Arial, sans-serif;
+	font-size: 80%;
+	color: rgba(102, 102, 102, 1);
+	line-height: 1;
+	background-color: rgba(41, 55, 74, 1);
+}
+
+
+
+/* ############## Page Header & Page Footer ############## */
+
+/* Globals */
+
+header.wcf-pageHeader {
+	/* Disabled, because the WoltLab header-image is not LGPL 
+	Activate it if you want to test your own header image */
+	/* background-image: url('../../../images/header.png'); */
+	background-position: center top;
+	background-repeat: repeat-x;
+	background-attachment: fixed;
+	width: 100%;
+	overflow: hidden;
+	position: relative;
+	z-index: 100;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	header.wcf-pageHeader,
+	header.wcf-pageFooter {
+		min-width: 800px;
+	}
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	header.wcf-pageHeader,
+	header.wcf-pageFooter {
+		/* none */
+	}
+}
+
+.wcf-pageHeader:after,
+.wcf-pageFooter:after {
+	content: '';
+	display: block;
+	clear: both;
+}
+
+.wcf-pageFooter {
+	text-align: center;
+	padding-bottom: 23px;
+	position: relative;
+	z-index: 80;
+}
+
+
+
+/* -- -- -- Copyright -- -- -- */
+
+.wcf-pageFooter .wcf-copyright {
+	padding-top: 20px;
+	display: inline-block;
+}
+
+.wcf-pageFooter .wcf-copyright a {
+	text-shadow: 0 -1px 0 #000;
+}
+
+.wcf-pageFooter .wcf-copyright a:hover {
+	text-decoration: none;
+	color: #69c;
+}
+
+
+
+/* -- -- -- Top Menu -- -- -- */
+
+/* Globals */
+
+nav.wcf-topMenu {
+	border-bottom: 1px solid rgba(0, 0, 0, .1);
+	background-color: rgba(0, 0, 0, .4);
+	position: fixed;
+	top: 0;
+	right: 0;
+	left: 0;	
+	z-index: 300;
+	box-sizing: border-box;
+	
+	-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+	-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+	-ms-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+	-o-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+	box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+	
+	-webkit-transition: background .2s linear;
+	-moz-transition: background .2s linear;
+	-ms-transition: background .2s linear;
+	-o-transition: background .2s linear;
+	transition: background .2s linear;
+	
+	-webkit-animation-name: showTopMenu;
+	-webkit-animation-duration: .3s;
+	-webkit-animation-timing-function: linear; 
+	
+	-moz-animation-name: showTopMenu;
+	-moz-animation-duration: .3s;
+	-moz-animation-timing-function: linear;
+	
+	-ms-animation-name: showTopMenu;
+	-ms-animation-duration: .3s;
+	-ms-animation-timing-function: linear; 
+	/* disabled to ease rendering work for Opera 
+	-o-animation-name: showTopMenu;
+	-o-animation-duration: .3s;
+	-o-animation-timing-function: linear;
+	*/
+	animation-name: showTopMenu;
+	animation-duration: .3s;
+	animation-timing-function: linear;
+}
+
+/* Show Top Menu */
+
+@-webkit-keyframes showTopMenu {
+	0% {
+		opacity: 0;
+		top: -50px;
+	}
+	60% {
+		top: 0;
+	}
+	80% {
+		top: -15px;
+	}
+	100% {
+		opacity: 1;
+		top: auto;
+	}
+}
+@-moz-keyframes showTopMenu {
+	0% {
+		opacity: 0;
+		top: -50px;
+	}
+	60% {
+		top: 0;
+	}
+	80% {
+		top: -15px;
+	}
+	100% {
+		opacity: 1;
+		top: auto;
+	}
+}
+@-ms-keyframes showTopMenu {
+	0% {
+		opacity: 0;
+		top: -50px;
+	}
+	60% {
+		top: 0;
+	}
+	80% {
+		top: -15px;
+	}
+	100% {
+		opacity: 1;
+		top: auto;
+	}
+}
+/* disabled to ease rendering work for Opera 
+@-o-keyframes showTopMenu {
+	0% {
+		opacity: 0;
+		top: -50px;
+	}
+	60% {
+		top: 0;
+	}
+	80% {
+		top: -15px;
+	}
+	100% {
+		opacity: 1;
+		top: auto;
+	}
+}
+*/
+@keyframes showTopMenu {
+	0% {
+		opacity: 0;
+		top: -50px;
+	}
+	60% {
+		top: 0;
+	}
+	80% {
+		top: -15px;
+	}
+	100% {
+		opacity: 1;
+		top: auto;
+	}
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	nav.wcf-topMenu {
+		min-width: 800px;
+	}
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	nav.wcf-topMenu {
+		/* none */
+	}
+}
+
+.wcf-topMenu:hover {
+	background-color: rgba(0, 0, 0, .7);
+}
+
+.wcf-topMenu > div {
+	padding: 0 23px 0;
+}
+
+.wcf-topMenu ul li {
+	white-space: nowrap;
+}
+
+/* Menu Items (1st level) */
+
+.wcf-topMenu > div > ul > li {
+	border-width: 0 1px;
+	border-style: solid;
+	border-color: transparent;
+	float: left;
+	position: relative;
+}
+
+.wcf-topMenu > div > ul > li,
+.wcf-topMenu > div > ul > li a {
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
+	color: #69c;
+}
+
+.wcf-topMenu > div > ul > li:hover,
+.wcf-topMenu > div > ul > li:hover a {
+	border-color: rgba(255, 255, 255, .5);
+}
+
+/* Removes the doubled padding if there's a link in the top menu */
+.wcf-topMenu > div > ul > li > span > a {
+	margin: -6px 0 -6px -6px;
+}
+
+
+
+/* ToDo: Top-Menu Dropdown Caption */
+
+.wcf-topMenu > div > ul > li > .wcf-dropdownCaption {
+	background-image: url('../../icon/dropdown2.svg');
+	background-position: 97% center;
+	background-repeat: no-repeat;
+	padding-right: 15px !important;
+}
+
+.wcf-topMenu > div > ul > li > .wcf-dropdownCaption,
+.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > a {
+	padding: 6px;
+}
+
+.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption,
+.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption a {
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
+	color: rgba(255, 255, 255, 1);
+	background-color: rgba(0, 0, 0, .7);
+}
+
+/* Badges */
+
+.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > .wcf-badge {
+	margin: -3px 3px;
+	padding: 1px 3px;
+}
+
+.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > .wcf-badge,
+.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption > .wcf-badge {
+	font-size: 75%;
+	color: #369 !important;
+}
+
+/* Images in front of the caption */
+
+.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > img {
+	margin: -7px 0 -5px 0;
+}
+
+
+
+/* ToDo: Top-Menu Dropdown Tweaks */
+
+/* Auto-Opening Dropdowns */
+.wcf-topMenu ul li .wcf-dropdownCaption ~ .wcf-dropdown {
+	border-color: rgba(255, 255, 255, .5);
+	background-color: rgba(0, 0, 0, .7);
+	left: -1px;
+	min-width: 100%;
+}
+
+.wcf-topMenu ul li:hover .wcf-dropdownCaption ~ .wcf-dropdown {
+	display: block;
+}
+
+.wcf-topMenu ul li .wcf-dropdown {
+	border-width: 0 1px 1px 1px !important;
+	border-radius: 0 0 5px 5px;
+}
+
+.wcf-topMenu ul li .wcf-dropdown > :first-child {
+	border-top-width: 0;
+}
+
+
+
+/* -- -- -- Logo -- -- -- */
+
+.wcf-logo {
+	margin: 0 23px 0;
+	position: relative;
+	box-sizing: border-box;
+}
+
+.wcf-logo > a,
+.wcf-logo > div {
+	text-align: right;
+	display: block;
+	height: 120px;
+}
+
+.wcf-logo > a:hover {
+	text-decoration: none !important;
+	color: #d8e7f5;
+}
+
+.wcf-logo h1 {
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
+	color: #d8e7f5;
+	position: relative;
+	top: 70px;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	.logo h1,
+	.wcf-logo h1 {
+		font-size: 150%;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	.wcf-logo h1 {
+		font-size: 175%;
+	}
+	
+}
+
+.wcf-logo > div > img,
+.wcf-logo > a > img {
+	position: absolute;
+	bottom: 20px;
+	left: 0;
+}
+
+
+
+/* -- -- -- Search -- -- -- */
+
+.wcf-search {
+	border: 1px solid rgba(0, 0, 0, .1);
+	border-radius: 5px;
+	background-color: rgba(0, 0, 0, .2);
+	padding: 5px;
+	position: absolute;
+	top: 50px;
+	right: 0;
+	min-width: 240px;
+	
+	-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+	-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+	-ms-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+	-o-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+	box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+	
+	-webkit-transition: background .2s linear;
+	-moz-transition: background .2s linear;
+	-ms-transition: background .2s linear;
+	-o-transition: background .2s linear;
+	transition: background .2s linear;
+	
+}
+
+.wcf-search:hover {
+	background-color: rgba(0, 0, 0, .5);
+}
+
+.wcf-search input[type='search'] {
+	width: 175px;
+	margin: 2px 4px;
+}
+
+.wcf-search > .wcf-searchButton {
+	width: 32px;
+	height: 32px;
+	margin-left: 5px;
+}
+
+
+
+/* -- -- -- Main Menu -- -- -- */
+
+.wcf-mainMenu {
+	/* General toggle switch for main menu orientation (options: left|center|right) */
+	text-align: left;
+	margin: 0 30px;
+	display: block;
+	position: relative;
+	box-sizing: border-box;
+}
+
+.wcf-mainMenu:after {
+	content: '';
+	display: block;
+	clear: both;
+}
+
+.wcf-mainMenu > ul {
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+	background-color: rgba(0, 0, 0, .4);
+	display: inline-block;
+	position: relative;
+}
+
+.wcf-mainMenu > ul > li {
+	display: inline-block;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	.wcf-mainMenu > ul > li {
+		font-size: 120%;
+	}
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	.wcf-mainMenu > ul > li {
+		font-size: 150%;
+	}
+}
+
+.wcf-mainMenu > ul > li.activeMenuItem {
+	margin: -5px 0 0;
+}
+
+.wcf-mainMenu > ul > li.activeMenuItem:first-child {
+	margin-right: -5px;
+}
+
+.wcf-mainMenu > ul > li.activeMenuItem:last-child {
+	margin-left: -5px;
+}
+
+.wcf-mainMenu > ul > li.activeMenuItem:only-child {
+	margin: -5px 0 0;
+}
+
+.wcf-mainMenu > ul > li > a {
+	font-weight: normal;
+	text-decoration: none;
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
+	color: #69c;
+	cursor: pointer;
+	white-space: nowrap;
+	display: inline-block;
+	position: relative;
+	
+	-webkit-transition-property: border, background-color, background-image, color;
+	-webkit-transition-duration: .3s;
+	-webkit-transition-timing-function: ease;
+	
+	-moz-transition-property: border, background-color, background-image, color;
+	-moz-transition-duration: .3s;
+	-moz-transition-timing-function: ease;
+	
+	-ms-transition-property: border, background-color, background-image, color;
+	-ms-transition-duration: .3s;
+	-ms-transition-timing-function: ease;
+	
+	-o-transition-property: border, background-color, background-image, color;
+	-o-transition-duration: .3s;
+	-o-transition-timing-function: ease;
+	
+	transition-property: border, background-color, background-image, color;
+	transition-duration: .3s;
+	transition-timing-function: ease;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	.wcf-mainMenu > ul > li > a {
+		padding: 10px 20px;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	.wcf-mainMenu > ul > li > a {
+		padding: 10px 10px;
+	}
+	
+}
+
+.wcf-mainMenu > ul > li:not(.activeMenuItem) {
+	margin-top: -3px;
+}
+
+.wcf-mainMenu > ul > li:not(.activeMenuItem):hover > a {
+	color: rgba(255, 255, 255, 1);
+}
+
+.wcf-mainMenu > ul > li.activeMenuItem > a {
+	font-size: 110%;
+	font-weight: bold;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+	color: #369;
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+	
+	background-color: #e7f2fd;
+	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
+	background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
+	background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
+	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
+	background-image: linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
+	
+	z-index: 10;
+}
+
+/* Rounded Bottom Corners: Active Tab */
+
+.wcf-mainMenu > ul > li.activeMenuItem > a:before {
+	border-bottom-right-radius: 6px;
+    border-width: 0 1px 1px 0;
+    position: absolute;
+    bottom: 0;
+    left: -7px;
+    width: 7px;
+    height: 7px;
+    content: "";
+    
+	-webkit-box-shadow: 2px 2px 0 #e7f2fd;
+	-moz-box-shadow: 2px 2px 0 #e7f2fd;
+	-ms-box-shadow: 2px 2px 0 #e7f2fd;
+	-o-box-shadow: 2px 2px 0 #e7f2fd;
+	box-shadow: 2px 2px 0 #e7f2fd;
+}
+
+.wcf-mainMenu > ul > li.activeMenuItem > a:after {
+	border-bottom-left-radius: 6px;
+	border-width: 0 0 1px 1px;
+	position: absolute;
+	right: -7px;
+	bottom: 0;
+	width: 7px;
+	height: 7px;
+	content: "";
+	
+	-webkit-box-shadow: -2px 2px 0 #e7f2fd;
+	-moz-box-shadow: -2px 2px 0 #e7f2fd;
+	-ms-box-shadow: -2px 2px 0 #e7f2fd;
+	-o-box-shadow: -2px 2px 0 #e7f2fd;
+	box-shadow: -2px 2px 0 #e7f2fd;
+}
+
+/* ToDo: Special */
+
+.wcf-mainMenu > ul > li.activeMenuItem .wcf-badge {
+	font-size: 65% !important;
+	color: rgba(255, 255, 255, 1);
+	background-color: #369;
+	
+	-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
+	-moz-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
+	-ms-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
+	-o-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
+	box-shadow: 0 0 1px rgba(255, 255, 255, 1);
+}
+
+
+
+/* -- -- -- Header/Footer Navigation -- -- -- */
+
+/* Menu Bars */
+
+.wcf-headerNavigation,
+.wcf-footerNavigation {
+	background-color: #e7f2fd;
+	border-style: solid;
+	border-color: #bcd;
+	margin: 0 23px;
+	display: block;
+	min-height: 7px;
+	position: relative;
+	box-sizing: border-box;
+}
+
+.wcf-headerNavigation {
+	border-width: 0 0 1px 0;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+}
+
+.wcf-footerNavigation {
+	border-width: 1px 0 0 0;
+	border-bottom-left-radius: 3px;
+	border-bottom-right-radius: 3px;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	.wcf-headerNavigation,
+	.wcf-footerNavigation {
+		min-width: 800px;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	.wcf-headerNavigation,
+	.wcf-footerNavigation {
+		/* none */
+	}
+	
+}
+
+.wcf-headerNavigation:after,
+.wcf-footerNavigation:after {
+	content: '';
+	display: block;
+	clear: both;
+}
+
+/* Icon Menus */
+
+.wcf-headerNavigation > ul,
+.wcf-footerNavigation > ul {
+	padding: 0 7px;
+	float: right;
+}
+
+.wcf-headerNavigation > ul > li,
+.wcf-footerNavigation > ul > li {
+	padding: 0 3px;
+	float: right;
+}
+
+.wcf-headerNavigation > ul > li.separator,
+.wcf-footerNavigation > ul > li.separator {
+	border-right: 1px dotted #bcd;
+}
+
+.wcf-headerNavigation > ul > li a,
+.wcf-headerNavigation > ul > li p,
+.wcf-footerNavigation > ul > li a,
+.wcf-footerNavigation > ul > li p {
+	text-decoration: none;
+	color: #369;
+	padding: 3px;
+	display: inline-block;
+}
+
+.wcf-headerNavigation > ul > li a:hover,
+.wcf-footerNavigation > ul > li a:hover {
+	text-decoration: none;
+	background-color: #d8e7f5;
+}
+
+.wcf-headerNavigation > ul > li a:active,
+.wcf-headerNavigation > ul > li a:focus,
+
+.wcf-footerNavigation > ul > li a:active,
+.wcf-footerNavigation > ul > li a:focus {
+	background-color: #fff9f4;
+}
+
+/* Special -> Page Scroll Links */
+
+#tplLogin .wcf-headerNavigation .toBottomLink,
+#tplLogin .wcf-footerNavigation .toTopLink {
+	/* Removes the jump-to-links on the log-in page */
+	position: absolute;
+	left: -9000px;
+	top: -9000px;
+	width: 0;
+}
+
+/* Special -> Sub Menu */
+
+.wcf-headerNavigation .wcf-menu {
+	padding: 0 7px;
+	display: inline;
+	max-width: 75%;
+}
+
+.wcf-headerNavigation .wcf-menu > ul {
+	text-align: left;
+	top: -3px;
+	display: inline;
+	position: relative;
+}
+
+.wcf-headerNavigation .wcf-menu > ul > li {
+	margin-top: 7px;
+}
+
+
+
+/* ############## Main ############## */
+
+.wcf-main {
+	background-color: rgba(216, 231, 245, 1);
+	margin: 0 23px;
+	position: relative;
+	z-index: 90;
+	
+	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
+	-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
+	-ms-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
+	-o-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
+	box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	.wcf-main {
+		min-width: 800px;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	.wcf-main {
+		/* none */
+	}
+	
+}
+
+
+
+/* -- -- -- Content -- -- -- */
+
+/* ToDo: Change the class name, since now we have the class "content" 2 times! */
+
+section.wcf-content {
+	background-color: rgba(255, 255, 255, 1);
+	position: relative;
+	min-height: 100px;
+	z-index: 20;
+	box-sizing: border-box;
+	
+	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+	-ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+	/* ToDo: Opera doesn't like that so much! Bug-report sent to Opera 
+	-o-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+	box-shadow: 0 0 5px rgba(0, 0, 0, .1);*/
+	
+	-webkit-transition: margin .1s ease;
+	-moz-transition: margin .1s ease;
+	-ms-transition: margin .1s ease;
+	-o-transition: margin .1s ease;
+	transition: margin .1s ease;
+}
+
+section.wcf-content:after {
+	content: '';
+	display: block;
+	clear: both;
+}
+
+.left section.wcf-content {
+	border-left: 1px solid rgba(187, 204, 221, 1);
+	margin-left: 249px;
+}
+
+.right section.wcf-content {
+	border-right: 1px solid rgba(187, 204, 221, 1);
+	margin-right: 249px;
+}
+
+/* ToDo: Does this still work? */
+.wcf-main > div section:only-child {
+	border-width: 0 !important;
+	margin: 0 !important;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	section.wcf-content {
+		padding: 5px 40px 20px;
+	}
+	
+}	
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	section.wcf-content {
+		padding: 5px 15px 20px;
+	}
+	
+}	
+
+.wcf-contentDecor {
+	background-color: rgba(253, 253, 253, 1);
+}
+
+
+
+/* -- -- -- Content Header & Footer -- -- -- */
+
+.wcf-contentHeader,
+.wcf-contentFooter {
+	margin-top: 15px;
+	display: table;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+
+
+/* ############## Sidebar ############## */
+
+/* Globals */
+
+.wcf-sidebar {
+	margin-bottom: -10px;
+	display: block;
+	width: 250px;
+	overflow: hidden;
+	z-index: 10;
+	
+	-webkit-transition: width .1s ease;
+	-moz-transition: width .1s ease;
+	-ms-transition: width .1s ease;
+	-o-transition: width .1s ease;
+	transition: width .1s ease;
+}
+
+/* Toggle for sidebar orientation (options: left|right|top|bottom) */
+
+.left .wcf-sidebar {
+	float: left;
+}
+
+.right .wcf-sidebar {
+	float: right;
+}
+
+
+
+/* -- -- -- Collapsible Sidebar -- -- -- */
+
+/* Globals */
+
+.wcf-sidebar.collapsed {
+	width: 0;
+	height: 0;
+}
+
+.left .wcf-sidebar.collapsed + .wcf-content {
+	border: 0;
+	margin-left: 0;
+}
+
+.right .wcf-sidebar.collapsed + .wcf-content {
+	border: 0;
+	margin-right: 0;
+}
+
+
+
+/* -- -- -- Collapsible Sidebar Button -- -- -- */
+
+/* Globals */
+
+.wcf-collapsibleSidebarButton {
+	cursor: pointer;
+	background-position: center 1%, center 99%;
+	background-size: 10px 10px, 10px 10px;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 20px;
+	height: 100%;
+	overflow: hidden;
+	z-index: 30;
+	opacity: .3;
+}
+
+.wcf-collapsibleSidebarButton:hover,
+.wcf-collapsibleSidebarButton:hover span {
+	background-color: rgba(252, 252, 252, 1);
+	opacity: 1;
+}
+
+.wcf-collapsibleSidebarButton span {
+	background-color: rgba(255, 255, 255, 1);
+    background-position: center center;
+	background-size: 10px 10px;
+	background-repeat: no-repeat;
+	margin-top: -300px;
+	display: block;
+	position: absolute;
+	top: 50%;
+	width: 20px;
+	height: 600px;
+}
+
+.wcf-collapsibleSidebarButton span:focus,
+.wcf-collapsibleSidebarButton span:active {
+	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	-ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	-o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+}
+
+/* Orientation */
+
+.left .wcf-collapsibleSidebarButton {
+	border-right: 1px solid rgba(187, 204, 221, .5);
+	background-image: url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg');
+	left: 250px;
+	
+	-webkit-transition: left .1s ease;
+	-moz-transition: left .1s ease;
+	-ms-transition: left .1s ease;
+	-o-transition: left .1s ease;
+	transition: left .1s ease;
+}
+
+.left .wcf-collapsibleSidebarButton span {
+	background-image: url('../../icon/arrowLeft1.svg');
+}
+
+.right .wcf-collapsibleSidebarButton {
+	border-left: 1px solid rgba(187, 204, 221, .5);
+	background-image: url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg');
+	right: 250px;
+	
+	-webkit-transition: right .1s ease;
+	-moz-transition: right .1s ease;
+	-ms-transition: right .1s ease;
+	-o-transition: right .1s ease;
+	transition: right .1s ease;
+}
+
+.right .wcf-collapsibleSidebarButton span {
+	background-image: url('../../icon/arrowRight1.svg');
+}
+
+/* Collapsed (Left) */
+
+.left .collapsed .wcf-collapsibleSidebarButton {
+	background-image: url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg');
+	left: 0;
+}
+
+.left .collapsed .wcf-collapsibleSidebarButton span {
+	background-image: url('../../icon/arrowRight1.svg');
+}
+
+/* Collapsed (Right) */
+
+.right .collapsed .wcf-collapsibleSidebarButton {
+	background-image: url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg');
+	right: 0;
+}
+
+.right .collapsed .wcf-collapsibleSidebarButton span {
+	background-image: url('../../icon/arrowLeft1.svg');
+}
+
+
+
+/* -- -- -- Sidebar Content -- -- -- */
+
+.wcf-sidebarContent > div {
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+	position: relative;
+	overflow: hidden;
+	z-index: 40;
+}
+
+.collapsed .wcf-sidebarContent > div {
+	width: 0;
+}
+
+.wcf-sidebarContent a:hover {
+	text-decoration: none !important;
+	color: #369;
+}
+
+.wcf-sidebarContent > div > h1 {
+	cursor: pointer;
+	font-weight: bold;
+	color: #369;
+	margin-top: 5px;
+}
+
+.wcf-sidebarContent > .collapsibleMenus > h1 {
+	background-image: url('../../icon/arrowRight.svg');
+	background-position: 15px center;
+	background-size: 16px;
+	background-repeat: no-repeat;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	.wcf-sidebarContent > div > h1 {
+		font-size: 130%;
+		padding: 7px 15px 7px 35px;
+	}
+	
+	.wcf-sidebarContent > div:not(.collapsibleMenus) > h1 {
+		padding: 7px 15px 7px 15px;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	.wcf-sidebarContent > div > h1 {
+		font-size: 150%;
+		padding: 7px 15px 7px 35px;
+	}
+	
+	.wcf-sidebarContent > div:not(.collapsibleMenus) > h1 {
+		padding: 7px 15px 7px 15px;
+	}
+	
+}
+
+.wcf-sidebarContent > .collapsibleMenus h1.activeMenuItem {
+	background-image: url('../../icon/arrowDown.svg');
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	.wcf-sidebarContent > div ul > li {
+		font-size: 110%;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	.wcf-sidebarContent > div ul > li {
+		font-size: 120%;
+	}
+	
+}
+
+.wcf-sidebarContent > div ul > li > a,
+.wcf-sidebarContent > div ul > li > div {
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+	color: #69c;
+	padding: 5px 15px 7px 35px;
+	display: block;
+}
+
+.wcf-sidebarContent > div ul > li.activeMenuItem {
+	background-color: rgba(255, 255, 255, 1);
+	margin-right: -1px;
+	overflow: hidden;
+	
+	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+	-ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+	-o-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+	box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+}
+
+.wcf-sidebarContent > div ul > li.activeMenuItem a {
+	font-weight: bold;
+	color: #369;
+}
+
+
+
+/* ############## Status Display ############## */
+
+.wcf-statusDisplay {
+	padding: 1px 0;
+	float: right;
+}
+
+.wcf-statusDisplay .wcf-statusIcons li {
+	display: inline-block;
+}
+
+
+
+/* ############## Headings ############## */
+
+/* -- -- -- Main Heading -- -- -- */
+
+.wcf-mainHeading {
+	margin-top: 25px;
+}
+
+.wcf-mainHeading:not(:first-of-type) {
+	margin-top: 30px;
+}
+
+.wcf-mainHeading > hgroup {
+	min-height: 48px;
+}
+
+.wcf-mainHeading > hgroup h1 {
+	font-weight: bold;
+	border-bottom: 1px solid rgba(153, 153, 153, 1);
+	padding: 1px 0 10px;	
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	.wcf-mainHeading .wcf-containerIcon {
+		width: 48px;
+		height: 48px;
+	}
+	
+	.wcf-mainHeading hgroup h1 {
+		font-size: 175%;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	.wcf-mainHeading .wcf-containerIcon {
+		width: 64px;
+		height: 64px;
+	}
+	
+	.wcf-mainHeading hgroup h1 {
+		font-size: 200%;
+	}
+	
+}
+
+.wcf-mainHeading > hgroup h1,
+.wcf-mainHeading > hgroup h1 a {
+	text-decoration: none;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+	color: rgba(102, 102, 102, 1);
+}
+
+.wcf-mainHeading > hgroup h2 {
+	font-size: 100%;
+	font-weight: normal;
+	color: rgba(153, 153, 153, 1);
+	padding-top: 5px;
+}
+
+.wcf-mainHeading > hgroup p {
+	padding-top: 3px;
+} 
+
+/* Special -> Badges */
+
+.wcf-mainHeading > hgroup h1 .wcf-badge,
+.wcf-mainHeading > hgroup h1 a .wcf-badge {
+	font-size: 75%;
+	text-decoration: none;
+	background-color: rgba(102, 102, 102, 1);
+	color: rgba(255, 255, 255, 1);
+}
+
+/* Special -> Dialog */
+
+.wcf-dialogContainer .wcf-mainHeading {
+	margin-top: 0;
+}
+
+.wcf-dialogContainer .wcf-mainHeading > hgroup h1,
+.wcf-dialogContainer .wcf-mainHeading > hgroup h1 a {
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
+	color: rgba(255, 255, 255, 1);
+}
+
+
+
+/* -- -- -- Sub Heading -- -- -- */
+
+.wcf-subHeading h1 {
+	font-size: 150%;
+	font-weight: bold;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+	color: rgba(153, 153, 153, 1);
+	border-bottom: 1px solid #ccc;
+	margin: 10px 0;
+	padding: 10px 0;
+	box-sizing: border-box;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	.wcf-subHeading h1 {
+		font-size: 150%;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	.wcf-subHeading h1 {
+		font-size: 175%;
+	}
+	
+}
+
+.wcf-subHeading h2 {
+	font-weight: normal;
+	color: #aaa;
+}
+
+
+
+/* ############## Fieldsets ############## */
+
+fieldset {
+	border: 1px solid #ccc;
+	border-radius: 7px;
+	background-color: rgba(250, 250, 250, 1);
+	margin: 15px 0 0;
+	padding: 5px 15px 15px;
+	box-sizing: border-box;
+}
+
+fieldset:last-child,
+fieldset:only-child {
+	margin-bottom: 7px !important;
+}
+
+fieldset legend {
+	color: rgba(153, 153, 153, 1);
+	padding: 0 7px 0;
+	margin: auto -7px;
+}
+
+fieldset legend ~ p {
+	margin-bottom: 14px;
+}
+
+/* Special Sidebar */
+
+.wcf-sidebar fieldset {
+	border-width: 0;
+	background-color: transparent;
+}
+
+.wcf-sidebar fieldset legend {
+	text-transform: uppercase; /* That's possibly problematic */
+	padding: 0;
+}
+
+.fieldsetDecor {
+	border: 1px solid #ccc;
+	border-radius: 7px;
+	background-color: rgba(250, 250, 250, 1);
+}
+
+
+
+/* ############## Labeled Content ############## */
+
+/* Simple */
+
+dl {
+	margin-top: 7px;
+	position: relative;
+}
+
+fieldset dl:first-of-type {
+	margin-top: 0;
+}
+
+dl > dt {
+	text-align: right;
+	color: rgba(102, 153, 204, 1);
+	margin-top: 5px;
+	float: left;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	dl > dt {
+		width: 230px;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	dl > dt {
+		width: 130px;
+	}
+	
+}
+
+dl.wide > dt {
+	width: auto; /* ToDo */
+}
+	
+dl > dt > label {
+	margin-top: 5px;
+	display: block;
+}
+
+dl.disabled > dt {
+	color: rgba(119, 119, 119, 1);
+}
+
+dl > dd {
+	padding-top: 5px;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	dl > dd {
+		margin-left: 250px;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	dl > dd {
+		margin-left: 150px;
+	}
+	
+}
+
+dl.wide > dd {
+	margin-left: 0;
+}
+
+dl > dd > small {
+	font-size: 85%;
+	color: rgba(153, 153, 153, 1);
+	margin: 3px 0 7px;
+	display: block;
+}
+
+dl > dd > p {
+	margin-top: 5px;
+}
+
+/* Nested */
+
+dl > dd > fieldset {
+	margin-top: 0;
+	margin-bottom: 0;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+
+dl > dd > fieldset > legend {
+	display: none;
+}
+
+dl > dd > fieldset > dl > dt {
+	margin-right: 20px;
+	width: 150px;
+}
+
+dl > dd > fieldset > dl > dd {
+	margin-left: 0;
+}
+
+dl > dd > fieldset > dl > dd > label {
+	display: block;
+}
+
+/* Reversed (flips the label aside the checkbox or radio button) - 
+	use only when automatically generating checkboxes or radio-buttons! */
+
+.reversed {
+	text-align: left;
+	margin-top: 2px;
+	position: absolute;
+	width: auto;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	.reversed {
+		left: 270px;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	.reversed {
+		left: 170px;
+	}
+	
+}
+
+.reversed ~ dd > input[type='checkbox'] {
+	margin-left: 0;
+}
+
+/* Special -> Sidebar */
+
+.wcf-sidebar dl > dt {
+	text-align: left;
+	float: none;
+	width: auto;
+}
+
+.wcf-sidebar dl > dd {
+	margin-left: 0;
+	display: block;
+	margin-bottom: 13px;
+}	
+
+.wcf-sidebar dl > dd * {
+	display: block;
+}	
+
+/* Special -> Overlay */
+
+.wcf-dialogContainer dl > dt {
+	width: 130px;
+}
+
+.wcf-dialogContainer dl > dd {
+	margin-left: 150px;
+}
+
+.wcf-dialogContainer dl > .reversed {
+	left: 170px;
+	width: auto;
+}
+
+
+
+/* ############## Forms ############## */
+
+/* Globals */
+
+label {
+	color: rgba(102, 153, 204, 1);
+}
+
+/* Structure */
+
+.wcf-formSubmit {
+	text-align: center;
+	margin-top: 15px;
+}
+
+input[type='checkbox'] ~ small,
+input[type='radio'] ~ small {
+	margin-top: 0;
+	margin-left: 21px;
+}
+
+
+
+/* -- -- -- Form Elements -- -- -- */
+
+/* Globals */
+
+button,
+input[type='reset'],
+input[type='submit'],
+input[type='button'],
+input[type='checkbox'],
+input[type='radio'],
+select:not([multiple]) {
+	cursor: pointer;
+}
+
+input[type='text'],
+input[type='search'], /* Does not work in WebKit browsers */
+input[type='date'],
+input[type='email'],
+input[type='url'],
+input[type='password'],
+textarea,
+select[multiple] {
+	padding: 5px 3px;
+	box-sizing: border-box;
+}
+
+select[multiple] {
+	 font-family: 'Courier New', Courier, monospace;
+}
+
+/* Normal State */
+
+input[type='text'],
+input[type='search'],
+input[type='date'],
+input[type='email'],
+input[type='url'],
+input[type='password'],
+textarea,
+select[multiple] {
+	border-width: 1px;
+	border-style: solid;
+	border-color: rgba(153, 153, 153, 1) rgba(204, 204, 204, 1) rgba(238, 238, 238, 1);
+	border-radius: 3px;
+	background-color: rgba(255, 255, 255, 1);
+	
+	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
+	-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
+	-ms-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
+	-o-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
+	box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
+	
+	-webkit-transition: background-color, border .2s linear;
+	-moz-transition: background-color, border .2s linear;
+	-ms-transition: background-color, border .2s linear;
+	-o-transition: background-color, border .2s linear;
+	transition: background-color, border .2s linear;
+}
+
+/* Hover State */
+
+input[type='text']:hover,
+input[type='search']:hover,
+input[type='date']:hover,
+input[type='email']:hover,
+input[type='url']:hover,
+input[type='password']:hover,
+textarea:hover,
+select[multiple]:hover {
+	border: 1px solid rgba(255, 170, 34, 1);
+	background-color: rgba(255, 249, 244, 1);
+}
+
+/* Active & Focus State */
+
+input[type='text']:active,
+input[type='search']:active,
+input[type='date']:active,
+input[type='email']:active,
+input[type='url']:active,
+input[type='password']:active,
+textarea:active,
+select[multiple]:active,
+
+input[type='text']:focus,
+input[type='search']:focus,
+input[type='date']:focus,
+input[type='email']:focus,
+input[type='url']:focus,
+input[type='password']:focus,
+textarea:focus,
+select[multiple]:focus {
+	border: 1px solid rgba(255, 170, 34, 1);
+	background-color: rgba(255, 249, 244, 1);
+	outline: none;
+	
+	-webkit-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
+	-moz-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
+	-ms-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
+	-o-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
+	box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
+}
+
+/* Read Only State */
+
+input[type='text'][readonly],
+input[type='search'][readonly],
+input[type='email'][readonly],
+input[type='date'][readonly],
+input[type='url'][readonly],
+input[type='password'][readonly],
+textarea[readonly],
+select[multiple][readonly] {
+	border-style: solid;
+	border-color: rgba(204, 204, 204, 1) rgba(221, 221, 221, 1) rgba(238, 238, 238, 1);
+	background-color: transparent;
+	
+	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
+	-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
+	-ms-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
+	-o-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
+	box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
+}
+
+/* Disabled State */
+
+input[type='text'][disabled],
+input[type='search'][disabled],
+input[type='date'][disabled],
+input[type='email'][disabled],
+input[type='url'][disabled],
+input[type='password'][disabled],
+textarea[disabled],
+select[multiple][disabled] {
+	border-style: solid;
+	border-color: rgba(255, 255, 255, .5);
+	background-color: rgba(255, 255, 255, .5);
+}
+
+
+
+/* -- -- -- Input Widths -- -- -- */
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	textarea {
+		width: 100%;
+		min-width: 200px;
+	}
+	
+	.tiny {
+		width: 100px;
+	}
+	
+	.short {
+		width: 10%;
+		min-width: 75px;
+	}
+	
+	.medium {
+		width: 50%;
+		min-width: 150px;
+	}
+	
+	.long {
+		width: 100%;
+		min-width: 200px;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	textarea {
+		width: 99%;
+		/* none */
+	}
+	
+	.tiny {
+		width: 50px;
+	}
+	
+	.short {
+		width: 10%;
+		min-width: 50px;
+	}
+	
+	.medium {
+		width: 30%;
+		min-width: 100px;
+	}
+	
+	.long {
+		width: 100%;
+		min-width: 150px;
+	}
+	
+}
+
+.auto {
+	width: auto;
+}
+
+/* Special -> Search Input WebKit */
+
+input[type=search] {
+	border-radius: 30px;
+	
+	-webkit-appearance: textfield;
+	-webkit-box-sizing: content-box;
+}
+
+::-webkit-search-decoration {
+	display: none;
+}
+
+
+
+/* -- -- -- Form Errors -- -- -- */
+
+.wcf-formError input[type='text'],
+.wcf-formError input[type='search'],
+.wcf-formError input[type='email'],
+.wcf-formError input[type='url'],
+.wcf-formError input[type='password'],
+.wcf-formError textarea {
+	border-color: rgba(255, 0, 0, 1);
+	background-color: rgba(255, 246, 246, 1);
+}
+
+
+
+/* ############## ToDo: Pre-Input Buttons & Dropdowns ############## */
+
+/* -- -- -- Bounding Box -- -- --  */
+
+/** 
+ * This defines the shape of the Pre-Input Buttons 
+ * Colors & effects are being defined by the 
+ * "Global Button Color & Effect Library" 
+ */
+
+.wcf-preInput {
+	display: table;
+	position: relative;
+	width: 100%;
+}
+
+.wcf-preInput > input,
+.wcf-preInput > textarea { /* ToDo: The textarea solution is not so nice */
+	border-radius: 0 3px 3px 0;
+	margin: 0 !important;
+	display: table-cell;
+	width: 99%;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	.wcf-preInput > input,
+	.wcf-preInput > textarea {
+		min-width: 300px;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	.wcf-preInput > input,
+	.wcf-preInput > textarea {
+		min-width: 100px;
+	}
+	
+}
+
+
+
+/* -- -- -- Dropdowns -- -- --  */
+
+/* Dropdown Caption */
+
+.wcf-preInput .wcf-dropdownCaption {
+	letter-spacing: -1px;
+	cursor: pointer;
+	border-radius: 3px 0 0 3px;
+	padding-right: 5px;
+	display: table-cell;
+	width: 1%;
+	vertical-align: middle;
+}
+
+.wcf-preInput .wcf-dropdownCaption span {
+	margin-right: -1px;
+	padding-left: 5px;
+	white-space: nowrap;
+}
+
+.wcf-preInput .wcf-dropdownCaption span.active {
+	background-image: url('../../icon/dropdown1.svg');
+	background-position: right center;
+	background-repeat: no-repeat;
+	padding-right: 10px;
+}
+
+
+
+/* -- -- -- Special -> System Notification -- -- --  */
+
+.wcf-preInput .wcf-dropdown > li.missingValue { /* ToDo */
+	/* color: #990; */
+	background-image: url('../../icon/systemWarning.svg');
+	background-size: 16px;
+	background-position: 95% center;
+	background-repeat: no-repeat;
+	/* background-color: #ffd; */
+}
+
+
+
+/* ############## ToDo: Small Buttons ############## */
+
+/** 
+ * This defines the shape of the Small Buttons 
+ * Colors & effects are being defined by the 
+ * "Global Button Color & Effect Library" 
+ */
+
+/* -- -- -- Standard -- -- -- */
+
+/* Globals */
+
+.wcf-smallButtons {
+	list-style-type: none;
+	margin-right: -1px;
+	margin-bottom: -1px;
+}
+
+.wcf-smallButtons > li {
+	margin-left: -5px;
+	display: inline-block;
+}
+
+.wcf-smallButtons > li > a {
+	white-space: nowrap;
+	padding: 3px 7px;
+	display: block;
+	min-height: 16px;
+}
+
+.wcf-smallButtons > li.separator > a {
+	border-right: 1px dotted #bcd;
+}
+
+.wcf-smallButtons > li:first-child > a {
+	border-top-left-radius: 13px;
+}
+
+.wcf-smallButtons > li:last-child > a {
+	border-bottom-right-radius: 7px;
+}
+
+
+
+/* -- -- -- Small Button Bar -- -- -- */
+
+.wcf-smallButtonBar {
+	text-align: center !important;
+	border-top: 1px solid rgba(204, 204, 204, 1);
+	border-radius: 0 0 7px 7px;
+	
+	background-color: rgba(0, 0, 0, .015);
+	background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+	background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+	background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+	background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+	
+	padding: 3px;
+	position: relative;
+	z-index: 100;
+}
+
+.wcf-smallButtonBar li {
+	display: inline;
+	position: relative;
+}
+
+.wcf-smallButtonBar li span {
+	/* Removes the button-caption */
+	position: absolute;
+	left: -9000px;
+	top: -9000px;
+	width: 0;
+}
+
+
+
+/* ############## Large Buttons ############## */
+
+/** 
+ * This defines the shape of the Large Buttons 
+ * Colors & effects are being defined by the 
+ * "Global Button Color & Effect Library"  
+ */
+
+/* Globals */
+
+.wcf-largeButtons {
+	text-align: right;
+	float: right;
+}
+
+.wcf-largeButtons > li {
+	display: inline;
+}
+
+.wcf-largeButtons > li > a img {
+	margin: -5px 1px -5px -5px;
+	vertical-align: middle;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	.wcf-largeButtons > li > a img {
+		height: 24px;
+		width: 24px;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	.wcf-largeButtons > li {
+		font-size: 125%;
+	}
+	
+	.wcf-largeButtons > li > a {
+		padding: 10px 15px !important;
+		white-space: nowrap;
+	}
+	
+	.wcf-largeButtons > li > a img {
+		height: 32px;
+		width: 32px;
+	}
+	
+}
+
+/* Normal State */
+
+button,
+input[type='reset'],
+input[type='submit'],
+input[type='button'],
+.wcf-largeButtons > li > a {
+	font-size: 100%;
+	font-weight: bold;
+	border-radius: 30px;
+	margin: 3px 2px;
+	padding: 5px 13px;
+	display: inline-block;
+}
+
+/* ToDo: Special */
+
+.wcf-sidebar .wcf-largeButtons *,
+.wcf-sidebar input {
+	font-size: 75% !important;
+	padding: 3px 7px;
+}
+
+.wcf-sidebar .wcf-largeButtons *,
+.wcf-sidebar input {
+	font-size: 75% !important;
+}
+
+
+
+/* ############## Boxes ############## */
+
+/** 
+ * This defines a box with rounded borders 
+ * Use the extra classes to further style boxes 
+ */
+
+/* Globals */
+
+.wcf-box {
+	border: 1px solid rgba(204, 204, 204, 1);
+	border-radius: 5px;
+	box-sizing: border-box;
+}
+
+.wcf-boxTitle {
+	border-radius: 7px;
+	background-color: #369;
+	/* Disabled, because the WoltLab header-image is not LGPL 
+	Activate it if you want to test your own header image */
+	/* background-image: url('../../../images/header.png'); */
+	background-position: left top;
+	background-repeat: repeat-x;
+	display: table;
+	width: 100%;
+}
+
+.wcf-boxPadding {
+	padding: 13px 23px 23px;
+}
+
+.wcf-boxDecor {
+	background-color: rgba(253, 253, 253, 1);
+}
+
+/* Headings */
+
+.wcf-boxTitle > hgroup {
+	text-shadow: 0 -1px 0 #000;
+	color: rgba(255, 255, 255, 1);
+	padding: 7px;
+	display: inline-block;
+}
+
+.wcf-boxTitle > a,
+.wcf-boxTitle > hgroup a {
+	text-decoration: none;
+	color: rgba(255, 255, 255, 1);
+}
+
+.wcf-boxTitle > hgroup h1 {
+	font-size: 120%;
+	display: inline-block;
+}
+
+.wcf-boxTitle > hgroup h2 {
+	font-size: 85%;
+	color: rgba(255, 255, 255, .9);
+	margin-top: 5px;
+}
+
+.wcf-boxTitle > hgroup .wcf-badge {
+	font-size: 65%;
+	color: #036;
+}
+
+/* Leading icon */
+
+.wcf-boxTitle > a {
+	margin: 7px 0 0 10px;
+	float: left;
+}
+
+.wcf-boxTitle > a img {
+	height: 16px;
+	width: 16px;
+}
+
+
+
+/* ############## Tab Menu ############## */
+
+/* Globals */
+
+.wcf-tabMenu {
+	/* Toggle for tab menu orientation (options: left|center|right) */
+	text-align: center;
+	margin-top: 15px;
+	padding: 0 10px;
+	display: block;
+	position: relative;
+}
+
+/* -- -- -- Tabs -- -- --  */
+
+/* Globals */
+
+.wcf-tabMenu ul {
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+	white-space: nowrap;
+	border-width: 1px 1px 0 1px;
+	border-style: solid;
+	border-color: #ddd;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	background-color: rgba(0, 0, 0, .05);
+	padding: 0 5px 3px 5px;
+	display: inline-block;
+	position: relative;
+}
+
+.wcf-tabMenu li {
+	white-space: nowrap;
+	list-style: none;
+	display: inline-block;
+}
+
+.wcf-tabMenu li.ui-state-active {
+	margin-right: -7px;
+	margin-left: -7px;
+}
+
+.wcf-tabMenu li a {
+	text-decoration: none;
+	color: rgba(153, 153, 153, 1);
+	cursor: pointer;
+	display: inline-block;
+	position: relative;
+	bottom: -3px;
+	z-index: 10;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	.wcf-tabMenu li a {
+		font-size: 110%;
+		padding: 1px 10px 3px;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	.wcf-tabMenu li a {
+		font-size: 150%;
+		padding: 5px 10px;
+		max-width: 100px;
+	}
+	
+}
+
+.wcf-tabMenu li:not(.ui-state-active) a:hover {
+	color: rgba(102, 102, 102, 1);
+}
+
+.wcf-tabMenu li.ui-state-active a {
+	font-weight: bold;
+	color: #333 !important;
+	border-width: 1px;
+	border-style: solid;
+	border-top-right-radius: 6px;
+	border-top-left-radius: 6px;
+	border-color: #ccc #ccc #fff;
+	background-color: rgba(255, 255, 255, 1);
+	padding: 10px 15px 5px;
+	margin-top: -10px;
+	z-index: 30;
+}
+
+/* Rounded Bottom Corners */
+
+.wcf-tabMenu li.ui-state-active a:before {
+	position: absolute;
+    bottom: -1px;
+    width: 5px;
+    height: 5px;
+    content: " ";
+    border: 1px solid #ccc;
+    left: -6px;
+    border-bottom-right-radius: 6px;
+    border-width: 0 1px 1px 0;
+    
+    -webkit-box-shadow: 2px 2px 0 #fff;
+	-moz-box-shadow: 2px 2px 0 #fff;
+	-ms-box-shadow: 2px 2px 0 #fff;
+	-o-box-shadow: 2px 2px 0 #fff;
+    box-shadow: 2px 2px 0 #fff;
+}
+
+.wcf-tabMenu li.ui-state-active a:after {
+	position: absolute;
+    bottom: -1px;
+    width: 5px;
+    height: 5px;
+    content: " ";
+    border: 1px solid #ccc;
+    right: -6px;
+    border-bottom-left-radius: 6px;
+    border-width: 0 0 1px 1px;
+    
+    -webkit-box-shadow: -2px 2px 0 #fff;
+	-moz-box-shadow: -2px 2px 0 #fff;
+	-ms-box-shadow: -2px 2px 0 #fff;
+	-o-box-shadow: -2px 2px 0 #fff;
+    box-shadow: -2px 2px 0 #fff;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	.wcf-tabMenu li.ui-state-active a {
+		font-size: 130%;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	.wcf-tabMenu li.ui-state-active a {
+		font-size: 150%;
+	}
+	
+}
+
+.wcf-tabMenu li.ui-state-active a,
+.wcf-tabMenu li.ui-state-disabled a,
+.wcf-tabMenu li.ui-state-processing a {
+	cursor: default;
+}
+
+
+
+/* -- -- -- Tab Menu Content -- -- --  */
+
+.wcf-tabMenuContent {
+	background-color: rgba(255, 255, 255, 1);
+	margin-top: -1px;
+	display: block;
+	position: relative;
+	z-index: 20; /* Prevents border overlay during transition */
+}
+
+/* ToDo: 2x hidden? */
+
+.ui-tabs .ui-tabs-hide {
+	display: none !important;
+}
+
+.ui-helper-hidden {
+	display: none;
+}
+
+.ui-helper-hidden-accessible {
+	position: absolute !important;
+	clip: rect(1px 1px 1px 1px);
+	clip: rect(1px,1px,1px,1px);
+}
+
+
+
+/* ############## Menu ############## */
+
+/* Standard */
+
+.wcf-menu {
+	color: rgba(102, 102, 102, 1);
+}
+
+.wcf-menu ul {
+	/* General toggle switch for menu orientation (options: left|center|right) */
+	text-align: center;
+}
+
+.wcf-menu ul li {
+	white-space: nowrap;
+	margin-top: 10px;
+	display: inline-block;
+}
+
+.wcf-menu ul li a {
+	font-size: 85%;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+	text-decoration: none;
+	color: rgba(153, 153, 153, 1);
+	border: 1px solid rgba(0, 0, 0, .2);
+	border-radius: 13px;
+	background-color: rgba(255, 255, 255, .5);
+	padding: 2px 10px;
+	
+	-webkit-transition: color .1s linear;
+	-moz-transition: color .1s linear;
+	-ms-transition: color .1s linear;
+	-o-transition: color .1s linear;
+	transition: color .1s linear;
+}
+
+.wcf-menu ul li:not(.ui-state-active) a:hover {
+	color: #333;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #fa2;
+	background-color: rgba(255, 249, 244, 1);
+}
+
+.wcf-menu ul li:not(.ui-state-active) a:active,
+.wcf-menu ul li:not(.ui-state-active) a:focus {
+	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	-ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	-o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+}
+
+.wcf-menu ul li.ui-state-active a {
+	font-weight: bold;
+	text-shadow: 0 1px 0 #000;
+	color: rgba(255, 255, 255, 1);
+	cursor: default;
+	border: 1px solid rgba(0, 0, 0, .2);
+	background-color: rgba(0, 0, 0, .5);
+}
+
+/* Special -> Menu within box-title  */
+
+.wcf-boxTitle > .wcf-menu {
+	color: rgba(255, 255, 255, 1);
+	border: none;
+	margin: 0 !important;
+	padding: 6px 7px !important;
+}
+
+.wcf-boxTitle > .wcf-menu ul li {
+	margin-top: 0;
+}
+
+.wcf-boxTitle > .wcf-menu ul li a {
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
+	color: #eee !important;
+	background-color: rgba(0, 0, 0, .1);
+}
+
+.wcf-boxTitle > .wcf-menu ul li a:hover {
+	color: rgba(255, 255, 255, 1) !important;
+	border: 1px solid rgba(0, 0, 0, .3);
+	background-color: rgba(0, 0, 0, .2);
+}
+
+.wcf-boxTitle > .wcf-menu ul li a:active,
+.wcf-boxTitle > .wcf-menu ul li a:focus,
+.wcf-boxTitle > .wcf-menu ul li.ui-state-active a {
+	border: 1px solid rgba(0, 0, 0, .5);
+	
+	-webkit-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
+	-moz-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
+	-ms-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
+	-o-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
+	box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
+}
+
+.wcf-boxTitle > .wcf-menu ul li a .wcf-badge {
+	color: #369 !important;
+}
+
+/* Special: Menu below tab-menu */
+
+.wcf-tabMenuContainer > .wcf-menu {
+	border-bottom: 1px solid #ccc;
+	margin: -15px -23px 0;
+	padding: 0 7px 10px;
+}
+
+.wcf-tabMenuContainer > .wcf-menu {
+	background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+	background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+	background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+	background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+}
+
+
+
+/* ############## Bread Crumbs ############## */
+
+/* Globals */
+
+.wcf-breadcrumbs {
+	text-align: left;
+	border: 1px solid rgba(204, 204, 204, 1);
+	border-radius: 5px;
+	background-color: rgba(255, 255, 255, 1);
+	margin-top: 15px;
+	display: block;
+	position: relative;
+	overflow: hidden;
+	box-sizing: border-box;
+}
+
+.wcf-breadcrumbs > ul > li {
+	font-size: 85%;
+	list-style: none;
+	float: left;
+	position: relative;
+	max-width: 30%;
+	
+	-webkit-transition: max-width .2s linear;
+	-moz-transition: max-width .2s linear;
+	-ms-transition: max-width .2s linear;
+	-o-transition: max-width .2s linear;
+	transition: max-width .2s linear;
+}
+
+.wcf-breadcrumbs > ul > li:hover {
+	max-width: 100%;
+}
+
+/* Arrow */
+
+.wcf-breadcrumbs > ul > li > span {
+	border-width: 15px;
+	border-style: solid none solid solid;
+	border-color: transparent transparent transparent rgba(204, 204, 204, 1);
+	display: block !important;
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: -4px;
+	right: -15px;
+	z-index: 20;
+}
+
+.wcf-breadcrumbs > ul > li > .pointer > span {
+	text-indent: -9000px;
+	border-width: 15px;
+	border-style: solid none solid solid;
+	border-color: transparent transparent transparent rgba(255, 255, 255, 1);
+	display: block;
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: -15px;
+	left: -16px;
+	overflow: hidden;
+}
+
+/* Caption */
+
+.wcf-breadcrumbs > ul > li a {
+	text-decoration: none;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+	color: rgba(153, 153, 153, 1);
+	margin: 0;
+	padding: 5px 1px 5px 20px;
+	display: block;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.wcf-breadcrumbs > ul > li:first-child a {
+	border-radius: 5px 0 0 5px;
+	background-image: url('../../icon/home1.svg');
+	background-position: 7px center;
+	background-repeat: no-repeat;
+	background-size: 16px;
+	padding-left: 30px;
+}
+
+.wcf-breadcrumbs > ul > li:hover a {
+	color: rgba(102, 102, 102, 1);
+	background-color: rgba(249, 249, 249, 1);
+	position: relative;
+	z-index: 10;
+}
+
+.wcf-breadcrumbs > ul > li:hover > .pointer > span {
+	border-color: transparent transparent transparent rgba(249, 249, 249, 1);
+}
+
+
+
+/* ############## Tables ############## */
+
+/* Globals */
+
+table {
+	border-spacing: 0;
+	width: 100% !important;
+}
+
+
+
+/* -- -- -- Table Header -- -- -- */
+
+thead th {
+	font-size: 87%;
+	white-space: nowrap;
+}
+
+thead th:first-child {
+	/* Rounded corners for the first table header cell
+	(only in effect if the table is not inside a "div" with class ".boxTitle") */
+	border-top-left-radius: 5px;
+}
+
+thead th:last-child {
+	/* Rounded corners for the last table header cell
+	(only in effect if the table is not inside a "div" with class ".boxTitle") */
+	border-top-right-radius: 5px;
+}
+
+thead th {
+	text-shadow: 0 -1px 0 #000;
+	color: #69c;
+	border-right: 1px solid rgba(0, 0, 0, .2);
+	
+	background-color: rgba(0, 0, 0, .3);
+	background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
+	background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
+	background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
+	background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
+	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
+	
+	padding: 7px;
+	
+	-webkit-transition: background .2s linear;
+	-moz-transition: background .2s linear;
+	-ms-transition: background .2s linear;
+	-o-transition: background .2s linear;
+	transition: background .2s linear;
+}
+
+thead th a {
+	text-shadow: 0 -1px 0 #000;
+	text-decoration: none !important;
+	color: #69c;
+	margin: -7px;
+	padding: 7px;
+	display: block;
+}
+
+thead th:last-child a {
+	border-right-width: 0;
+}
+
+thead th:hover a {
+	color: rgba(255, 255, 255, 1);
+	background-color: rgba(0, 0, 0, .2);
+}
+
+thead th a:active,
+thead th a:focus,
+thead th.active a {
+	color: rgba(255, 255, 255, 1);
+	background-color: rgba(0, 0, 0, .1);
+	
+	-webkit-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
+	-moz-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
+	-ms-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
+	-o-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
+	box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
+}
+
+thead th.active a {
+	font-weight: bold;
+}
+
+thead th.active:hover a {
+	background-color: rgba(0, 0, 0, .3);
+}
+
+thead th a img {
+	/* ToDo: Sort-icon orientation does not work */
+	text-align: right;
+	/* Negative margins to prevent table-cells from expanding vertically when the sort-icon shows up */
+	margin-top: -5px !important;
+	margin-bottom: -5px !important;
+}
+
+
+
+/* -- -- -- Table Body -- -- -- */
+
+tbody tr {
+	border-bottom: 1px solid rgba(255, 255, 255, .3);
+}
+
+tbody tr:last-child {
+	/* No border for the last table row */
+	border-bottom-width: 0;
+}
+
+tbody tr:last-child td:first-child {
+	/* Rounded corners for the first table cell in the last row */
+	border-bottom-left-radius: 5px;
+}
+
+tbody tr:last-child td:last-child {
+	/* Rounded corners for the last table cell in the last row */
+	border-bottom-right-radius: 5px;
+}
+
+tbody td {
+	background-color: #fcfdfe;
+	border-right: 1px solid rgba(255, 255, 255, .3);
+	padding: 5px;
+	
+	-webkit-transition: background .1s linear;
+	-moz-transition: background .1s linear;
+	-ms-transition: background .1s linear;
+	-o-transition: background .1s linear;
+	transition: background .1s linear;
+}
+
+tbody td:last-child {
+	border-right-width: 0;
+}
+
+tbody tr:nth-child(2n+1) td {
+	/* Auto-colorer for every 2nd row */
+	background-color: #f2f6fa;
+}
+
+tbody tr:hover td {
+	background-color: #d8e7f5;
+}
+
+
+
+/* -- -- -- Special -> Table Header -- -- -- */
+
+.wcf-menu ~ .wcf-box thead th:first-child { /* ToDo: Does this case really exist any more? */
+	border-top-left-radius: 0 !important;
+}
+
+.wcf-menu ~ .wcf-box thead th:last-child { /* ToDo: Does this case really exist any more? */
+	border-top-right-radius: 0 !important;
+}
+
+.wcf-boxTitle > hgroup + table th:first-child, /* Boxes with a title bar */
+.wcf-boxTitle > nav + table th:first-child { /* Boxes with a menu in the title bar */
+	border-top-left-radius: 0 !important;
+}
+
+.wcf-boxTitle > hgroup + table th:last-child, /* Boxes with a title bar */
+.wcf-boxTitle > .wcf-menu + table th:last-child { /* Boxes with a menu in the title bar */
+	border-top-right-radius: 0 !important;
+}
+
+
+
+/* -- -- -- Special -> Checkboxes in Table Headers -- -- -- */
+
+thead input[type='checkbox'] {
+	margin-top: -5px !important;
+	margin-bottom: -5px !important;
+}
+
+
+
+/* -- -- -- ToDo: Table Column Formats -- -- -- */
+
+.columnMark,
+.columnStatus {
+	text-align: center;
+	width: 1% !important;
+	white-space: nowrap;
+}
+
+.columnStatus .wcf-badge {
+	margin-right: 1px !important;
+	margin-left: 1px !important;
+}
+
+.columnDigits,
+.columnID {
+	text-align: right;
+	width: 1% !important;
+	white-space: nowrap;
+}
+
+.columnIcon {
+	text-align: left;
+	width: 1% !important;
+	white-space: nowrap;
+}
+
+tr img[src$="D.svg"] {
+	cursor: not-allowed;
+}
+
+tr .columnIcon img {
+	height: 16px;
+	width: 16px;
+}
+
+.big .columnIcon img {
+	height: 24px;
+	width: 24px;
+}
+
+.columnTitle {
+	font-weight: bold;
+	text-align: left;
+}
+
+.columnText {
+	font-weight: normal;
+	text-align: left;
+	max-width: 20%;
+}
+
+.columnDate,
+.columnRegistrationDate {
+	font-size: 85%;
+	text-align: right;
+	width: 1% !important;
+	white-space: nowrap;
+}
+
+.columnURL {
+	font-size: 85%;
+	text-align: left;
+}
+
+
+
+/* ############## ToDo: Page Navigation ############## */
+
+/** 
+ * This defines the shape of the Page-Navigation widget  
+ * Colors & effects are being defined by the 
+ * "Global Button Color & Effect Library" 
+ */
+
+/* Globals */
+
+:not(.wcf-statusDisplay) > .wcf-pageNavigation {
+	margin: 5px 0 3px;
+	float: left;
+}
+
+/* -- -- -- Buttons (Level 1 & 2) -- -- -- */
+
+.wcf-pageNavigation ul li {
+	font-weight: bold;
+	text-align: center;
+	border-radius: 3px;
+	margin: 1px;
+	float: left;
+	min-width: 19px;
+}
+
+.wcf-contentHeader .wcf-pageNavigation ul li,
+.wcf-contentFooter .wcf-pageNavigation ul li {
+	margin: 2px;
+}
+
+.wcf-pageNavigation ul li:not(.active):not(.disabled) {
+	cursor: pointer;
+}
+
+.wcf-pageNavigation ul li.disabled {
+	cursor: not-allowed;
+	border: 1px solid rgba(0, 0, 0, .1) !important;
+	background-image: none !important;
+}
+
+.wcf-pageNavigation ul li img {
+	height: 16px;
+	width: 16px;
+}
+
+.wcf-pageNavigation ul li.skip {	
+	padding: 2px 0 1px;
+}
+
+.wcf-pageNavigation ul li a {
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+	text-decoration: none;
+	color: rgba(153, 153, 153, 1);
+	display: inline-block;
+}
+
+.wcf-pageNavigation ul li:not(.disabled):hover a {
+	color: rgba(102, 102, 102, 1);
+}
+
+.wcf-pageNavigation ul li:not(.skip) a {
+	padding: 3px 1px;
+}
+
+.wcf-pageNavigation ul li:active a,
+.wcf-pageNavigation ul li:focus a {
+	color: #333;
+}
+
+.wcf-pageNavigation ul li.active,
+.wcf-pageNavigation ul li.active:hover {
+	text-shadow: 0 1px 0 #000 !important;
+	color: rgba(255, 255, 255, 1) !important;
+	border: 1px solid rgba(0, 0, 0, .3) !important;
+	
+	background-color: rgba(0, 0, 0, .5) !important;
+	background-image: -webkit-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
+	background-image: -moz-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
+	background-image: -o-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
+	background-image: -ms-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
+	background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
+	
+	padding: 3px 0;
+}
+
+/* -- -- -- ToDo: Children (Level 2) -- -- -- */
+
+/* Buttons */
+
+.wcf-pageNavigation ul li.children {
+	position: relative;
+}
+
+.wcf-pageNavigation ul li.children > a {
+	margin-right: -10px;
+	position: relative;
+	z-index: 10;
+}
+
+.wcf-pageNavigation ul li.children input {
+	margin-left: 1px;
+	width: 30px;
+	height: 9px;
+}
+
+.wcf-pageNavigation ul li.children img {
+	position: relative;
+	width: 7px;
+	height: 9px;
+	bottom: 1px;
+	left: 25px;
+}
+
+/* Dropdown */
+
+.wcf-pageNavigation ul li.children .wcf-dropdown {
+	text-align: left;
+	border-color: transparent;
+	border-radius: 3px;
+	background-color: rgba(0, 0, 0, .7);
+	margin-top: 28px;
+	margin-left: -2px;
+	padding: 2px 1px;
+	display: inline-block;
+	position: absolute;
+	height: 0;
+	overflow: hidden;
+	min-width: 165px;
+	max-width: 250px;
+	opacity: 0;
+	
+	-webkit-transition: opacity .2s linear;
+	-moz-transition: opacity .2s linear;
+	-ms-transition: opacity .2s linear;
+	-o-transition: opacity .2s linear;
+	transition: opacity .2s linear;
+}
+
+.wcf-pageNavigation ul li.children:hover .wcf-dropdown {
+	border-color: rgba(255, 255, 255, .7);
+	height: auto;
+	overflow: visible;
+	opacity: 1;
+}
+
+.wcf-pageNavigation ul li.children .wcf-dropdown ul {
+	padding: 0 5px 5px 2px;
+	display: block;
+}
+
+.wcf-pageNavigation ul li.children .wcf-dropdown ul li {
+	margin: 2px 3px;
+}
+
+/* Pointer */
+
+.wcf-pageNavigation ul li.children .pointer {	
+	border-width: 0 7px 7px;
+	border-style: solid;
+	border-color: rgba(255, 255, 255, .7) transparent;
+	display: inline-block !important;
+	width: 0;
+	position: absolute;
+	top: -7px !important;
+	left: 11px;
+}
+
+.wcf-pageNavigation ul li.children .pointer span {	
+	border-width: 0 5px 5px;
+	border-style: solid;
+	border-color: rgba(0, 0, 0, .7) transparent;
+	display: inline-block;
+	width: 0;
+	position: absolute;
+	top: 2px;
+	left: -5px;
+}
+
+/* Special -> Status Display */
+
+.wcf-statusDisplay .wcf-pageNavigation {
+	font-size: 80%;
+}
+
+.wcf-statusDisplay .wcf-pageNavigation ul li {
+	min-width: 13px;
+}
+
+.wcf-statusDisplay .wcf-pageNavigation ul li:not(.skip) a {
+	padding: 1px;
+}
+
+
+
+/* ############## System Notifications (Inline) ############## */
+
+/* Globals */
+
+.wcf-info,
+.wcf-error,
+.wcf-success,
+.wcf-warning {
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+	line-height: 1.5;
+	border-radius: 7px;
+	margin-top: 15px;
+	padding: 7px 15px 7px 50px;
+	box-sizing: border-box;
+}
+
+/* Types */
+
+.wcf-info {
+	color: #68b;
+	border: 1px solid #9be;
+	background-color: #def;
+	
+    background-image: url('../../icon/systemInfo.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
+    background-image: url('../../icon/systemInfo.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
+    background-image: url('../../icon/systemInfo.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
+    background-image: url('../../icon/systemInfo.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
+    background-image: url('../../icon/systemInfo.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
+    
+	background-size: 24px, auto;
+	background-position: 13px center, left top;
+	background-repeat: no-repeat, repeat;
+}
+
+.wcf-success {
+	color: #090;
+	border: 1px solid #0c0;
+	background-color: #efe;
+	
+    background-image: url('../../icon/systemSuccess.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+    background-image: url('../../icon/systemSuccess.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+    background-image: url('../../icon/systemSuccess.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+    background-image: url('../../icon/systemSuccess.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+    background-image: url('../../icon/systemSuccess.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+    
+	background-size: 24px, auto;
+	background-position: 13px center, left top;
+	background-repeat: no-repeat, repeat;
+	
+}
+
+.wcf-warning {
+	color: #990;
+	border: 1px solid #cc0;
+	background-color: #ffd;
+	
+    background-image: url('../../icon/systemWarning.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+    background-image: url('../../icon/systemWarning.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+    background-image: url('../../icon/systemWarning.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+    background-image: url('../../icon/systemWarning.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+    background-image: url('../../icon/systemWarning.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+    
+	background-size: 24px, auto;
+	background-position: 13px center, left top;
+	background-repeat: no-repeat, repeat;
+}
+
+.wcf-error {
+	color: #c00;
+	border: 1px solid #f99;
+	background-color: #fee;
+	
+    background-image: url('../../icon/systemError.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+    background-image: url('../../icon/systemError.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+    background-image: url('../../icon/systemError.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+    background-image: url('../../icon/systemError.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+    background-image: url('../../icon/systemError.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+    
+	background-size: 24px, auto;
+	background-position: 13px center, left top;
+	background-repeat: no-repeat, repeat;
+}
+
+/* Inline Errors */
+
+.wcf-innerError {
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+	line-height: 1.5;
+	color: #c00;
+	border: 1px solid #f99;
+	border-radius: 7px;
+	background-color: rgba(255, 238, 238, 1);
+	background-image: url('../../icon/systemError.svg');
+	background-size: 16px;
+	background-position: 5px center;
+	background-repeat: no-repeat;
+	margin-top: 5px;
+	padding: 2px 10px 2px 25px;
+	display: table !important;
+	position: relative; /* Firefox support (from version 10 on) is buggy */
+	clear: both;
+	
+	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+	-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+	-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+	box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+}
+
+.wcf-innerError .pointer {	
+	border-width: 0 7px 7px;
+	border-style: solid;
+	border-color: #f99 transparent;
+	display: inline-block !important;
+	width: 0;
+	position: absolute;
+	top: -7px !important;
+	left: 10%;
+}
+
+.wcf-innerError .pointer span {	
+	border-width: 0 5px 5px;
+	border-style: solid;
+	border-color: rgba(255, 238, 238, 1) transparent;
+	display: inline-block;
+	width: 0;
+	position: absolute;
+	top: 2px;
+	left: -5px;
+}
+
+/* Special -> Pre Input */
+
+.wcf-preInput ~ .wcf-innerError .pointer {	
+	right: 10%;
+	left: auto;
+}
+
+
+
+/* ############## ToDo: System Notifications (Sheet) ############## */
+
+/* Globals */
+
+.wcf-systemNotification { /* declarations taken from .success */
+	background-color: rgba(238, 255, 238, 1);
+	border: 1px solid rgba(0, 204, 0, 1);
+	border-top-width: 0;
+	border-radius: 0 0 5px 5px;
+	color: rgba(0, 153, 0, 1);
+	left: 40%;
+	padding: 14px;
+	padding-top: 10px;
+	position: fixed;
+	text-align: center;
+	top: -38px;
+	width: auto;
+	z-index: 500;
+	
+	-webkit-transition: top .5s linear;
+	-moz-transition: top .5s linear;
+	-ms-transition: top .5s linear;
+	-o-transition: top .5s linear;
+	transition: top .5s linear;
+}
+
+.wcf-systemNotification.open {
+	top: 0;
+}
+
+
+
+/* ############## ToDo: WCF Dialog ############## */
+
+/* Globals */
+
+.wcf-dialogContainer {
+	border: 23px solid transparent;
+	border-radius: 15px;
+	background-color: rgba(0, 0, 0, .4);
+	margin-right: auto !important;
+	margin-left: auto !important;
+	position: fixed !important;
+	
+	-webkit-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
+	-moz-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
+	-ms-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
+	-o-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
+	box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	.wcf-dialogContainer {
+		min-width: 500px !important;
+		max-width: 780px !important;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	.wcf-dialogContainer {
+		min-width: 200px !important;
+		max-width: 380px !important;
+	}
+	
+}
+
+/* Titlebar */
+
+.wcf-dialogTitlebar {
+	border-bottom: 1px solid #036;
+	border-top-left-radius: 7px;
+	border-top-right-radius: 7px;
+	background-color: #29374a;
+	/* Disabled, because the WoltLab header-image is not LGPL 
+	Activate it if you want to test your own header image */
+	/* background-image: url('../../../images/header.png'); */
+	background-position: left top;
+	background-repeat: repeat-x;
+	padding: 10px 20px;
+	position: relative;
+	display: block;
+	/*cursor: move;*/
+}
+
+.wcf-dialogTitle {
+	font-size: 170%;
+	font-weight: bold;
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
+	color: rgba(255, 255, 255, 1);
+	display: block;
+}
+
+.wcf-dialogCloseButton {
+	background-image: url('../../icon/delete2.svg');
+	background-size: 32px;
+	background-position: top left;
+	background-repeat: no-repeat;
+	position: absolute !important;
+	width: 32px;
+	height: 32px;
+	top: 5px;
+	right: 10px;
+	cursor: pointer;
+}
+
+.wcf-dialogCloseButton span {
+	/* Removes the button-caption */
+	position: absolute;
+	left: -9000px;
+	top: -9000px;
+	width: 0;
+}
+
+/* Content */
+
+.wcf-dialogContent {
+	color: rgba(238, 238, 238, 1);
+	background-color: #333;
+	overflow: auto;
+}
+
+.wcf-dialogContainer > .wcf-dialogContent {
+	border-radius: 7px;
+	padding: 0;
+	/*width: auto !important;*/
+}
+
+.wcf-dialogTitlebar ~ .wcf-dialogContent {
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+	border-bottom-left-radius: 7px;
+	border-bottom-right-radius: 7px;
+	padding: 10px 20px 20px;
+}
+
+/* Special */
+
+#ajaxExceptionStacktrace {
+	white-space: nowrap;
+	overflow: scroll;
+	overflow-y: hidden;
+}
+
+#ajaxExceptionStacktrace {
+	font-family: monospace;
+	font-size: 90%;
+	line-height: 1.2;
+	border: 1px solid #ccc;
+	padding: 3px;
+}
+
+
+
+/* ############## ToDo: Overlay Spinner ############## */
+
+.wcf-dialogOverlay {
+	background-color: rgba(0, 0, 0, 1);
+	opacity: .5;
+	position: fixed;
+	width: 100% !important;
+	top: 0;
+	left: 0;
+}
+
+
+/* ToDo: What is that and change that class-name! */
+
+.wcf-overlayLoading {
+	background-color: rgba(255, 255, 255, 1);
+	background-image: url('../../icon/spinner1.svg');
+	background-position: center center;
+	background-size: 32px;
+	background-repeat: no-repeat;
+}
+
+
+
+/* ############## Balloon Tooltips ############## */
+
+/* Globals */
+
+.jsTooltip { /* Do not change this style */
+	cursor: pointer;
+}
+
+.wcf-balloonTooltip {
+	font-size: .85em;
+	color: rgba(255, 255, 255, 1);
+	border: 1px solid rgba(255, 255, 255, .7);
+	border-radius: 5px;
+	background-color: rgba(0, 0, 0, .7);
+	padding: 5px 10px 7px;
+	position: absolute;
+	max-width: 300px;
+	z-index: 800;
+	
+	-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+	-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+	-ms-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+	-o-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+	box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+}
+
+/* Pointer */
+
+.wcf-balloonTooltip .pointer {	
+	border-width: 0 7px 7px;
+	border-style: solid;
+	border-color: rgba(255, 255, 255, .7) transparent;
+	display: inline-block !important;
+	width: 0;
+	position: absolute;
+	top: -7px !important;
+	left: 50%;
+}
+
+.wcf-balloonTooltip .pointer span {	
+	border-width: 0 5px 5px;
+	border-style: solid;
+	border-color: rgba(0, 0, 0, .7) transparent;
+	display: inline-block;
+	width: 0;
+	position: absolute;
+	top: 2px;
+	left: -5px;
+}
+
+
+
+/* ############## ToDo: Likes Widget ############## */
+
+/*  @see theadPostList.tpl */
+
+/** 
+ * This defines the shape of the Likes widget  
+ * Colors & effects are being defined by the 
+ * "Global Button Color & Effect Library" 
+ */
+
+/* -- -- -- -- Widget -- -- -- -- -- */
+
+/* Globals */
+
+.wcf-likesWidget {
+	margin: 0 0 0 15px;
+}
+
+/* Buttons */
+
+.wcf-likesWidget > ul {
+	float: right;
+	margin-right: 7px;
+	margin-left: 10px;
+}
+
+.wcf-likesWidget > ul > li {
+	text-align: right;
+	margin-top: 3px;
+	display: inline-block;
+}
+
+.wcf-likesWidget > ul > li > a {
+	padding: 2px 4px 3px;
+}
+
+.wcf-likesWidget > ul > li:first-child {
+	margin-right: -5px;
+}
+
+
+
+/* ############## ToDo: Clipboard Editor Buttons ############## */
+
+/* Globals */
+
+.wcf-clipboardEditor > ul > li {
+	font-size: .85em;
+	border-radius: 30px;
+	margin-top: 7px;
+	margin-right: 3px;
+	margin-left: 3px;
+	float: left;
+	position: relative;
+}
+
+.wcf-clipboardEditor > ul > li span {
+	text-decoration: none !important;
+	cursor: pointer;
+	background-image: url('../../icon/dropdown1.svg');
+	background-position: right center;
+	background-repeat: no-repeat;
+	margin-right: 5px;
+	padding: 3px 12px 5px 10px;
+	display: inline-block;
+}
+
+
+
+/* ############## ToDo: CK-Editor ############## */
+
+.wcf-wideEditor dt {
+	display: none;
+}
+
+.wcf-wideEditor dd {
+	margin-left: 0;
+}
+
+
+
+/* ############## Global Button Color & Effect Library ############## */
+
+/** 
+ * This defines the colors & effects of Button elements 
+ * Define the shape of the element in a separate class 
+ */
+
+/* -- -- -- Normal Buttons -- -- -- */
+
+/* Normal State */
+
+.wcf-button,
+input[type='reset']:not([disabled]),
+input[type='submit']:not([disabled]),
+input[type='button']:not([disabled]),
+button:not([disabled]) {
+	text-decoration: none;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+	color: rgba(153, 153, 153, 1);
+	border-width: 1px;
+	border-style: solid;
+	border-color: #ccc #bbb #aaa;
+	
+	background-color: #fefefe;
+	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+	background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+	background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+	
+	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+	-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+	-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+	box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+	
+	-webkit-transition-property: border, box-shadow, background-color, background-image, color;
+	-webkit-transition-duration: .1s;
+	-webkit-transition-timing-function: linear;
+	
+	-moz-transition-property: border, box-shadow, background-color, background-image, color;
+	-moz-transition-duration: .1s;
+	-moz-transition-timing-function: linear;
+	
+	-ms-transition-property: border, box-shadow, background-color, background-image, color;
+	-ms-transition-duration: .1s;
+	-ms-transition-timing-function: linear;
+	
+	-o-transition-property: border, box-shadow, background-color, background-image, color;
+	-o-transition-duration: .1s;
+	-o-transition-timing-function: linear;
+	
+	transition-property: border, box-shadow, background-color, background-image, color;
+	transition-duration: .1s;
+	transition-timing-function: linear;
+}
+
+/* Hover State */
+
+.wcf-button:hover,
+.default .wcf-button:hover,
+input[type='reset']:not([disabled]):hover,
+input[type='submit']:not([disabled]):hover,
+input[type='button']:not([disabled]):hover,
+button:not([disabled]):hover {
+	text-decoration: none;
+	color: rgba(102, 102, 102, 1);
+	border-width: 1px;
+	border-style: solid;
+	border-color: #ffc053 #fa2 #fc9e07;
+	
+	background-color: #fff9f4;
+	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+	background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+	background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+}
+
+/* Active State */
+
+.wcf-button:focus,
+.default .wcf-button:focus,
+input[type='reset']:not([disabled]):focus,
+input[type='submit']:not([disabled]):focus,
+input[type='button']:not([disabled]):focus,
+button:not([disabled]):focus,
+
+.wcf-button:active,
+.active .wcf-button,
+.default .wcf-button:active,
+input[type='reset']:not([disabled]):active,
+input[type='submit']:not([disabled]):active,
+input[type='button']:not([disabled]):active,
+button:not([disabled]):active {
+	color: #333;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #fc9e07 #fa2 #ffc053;
+	
+	background-color: #fff9f4;
+	background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+	background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+	background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+	background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+	background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+	
+	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	-ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	-o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+}
+
+
+
+/* -- -- -- Default Buttons -- -- -- */
+
+/* Default State Glow */
+
+@-webkit-keyframes glowButtons {
+	0% {
+		-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
+	}
+	100% {
+		-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
+	}
+}
+@-moz-keyframes glowButtons {
+	0% {
+		-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
+	}
+	100% {
+		-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
+	}
+}
+@-ms-keyframes glowButtons {
+	0% {
+		-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
+	}
+	100% {
+		-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
+	}
+}
+/* disabled to ease rendering work for Opera 
+@-o-keyframes glowButtons {
+	0% {
+		-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
+	}
+	100% {
+		-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
+	}
+}
+*/
+@keyframes glowButtons {
+	0% {
+		box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
+	}
+	100% {
+		box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
+	}
+}
+
+/* Default Normal State */
+
+.default .wcf-button,
+input[type='submit']:not([disabled]),
+input[type='button']:not([disabled]).default,
+button:not([disabled]).default {
+	color: #69c;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #7aade0 #69c #5285b8;
+	
+	background-color: #e7f2fd;
+	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+	background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+	background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+	
+	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
+	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
+	-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
+	-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
+	
+	-webkit-animation-name: glowButtons;
+	-webkit-animation-duration: 1s;
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-direction: alternate;
+	-webkit-animation-timing-function: ease-in-out; 
+	
+	-moz-animation-name: glowButtons;
+	-moz-animation-duration: 1s;
+	-moz-animation-iteration-count: infinite;
+	-moz-animation-direction: alternate;
+	-moz-animation-timing-function: ease-in-out;
+	
+	-ms-animation-name: glowButtons;
+	-ms-animation-duration: 1s;
+	-ms-animation-iteration-count: infinite;
+	-ms-animation-direction: alternate;
+	-ms-animation-timing-function: ease-in-out; 
+	/* disabled to ease rendering work for Opera 
+	-o-animation-name: glowButtons;
+	-o-animation-duration: 1s;
+	-o-animation-iteration-count: infinite;
+	-o-animation-direction: alternate;
+	-o-animation-timing-function: ease-in-out;
+	*/
+	animation-name: glowButtons;
+	animation-duration: 1s;
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
+	animation-timing-function: ease-in-out;
+}
+
+/* Default Hover State Glow */
+
+@-webkit-keyframes glowButtonsHover {
+    0% {
+        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
+    }
+    100% {
+        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
+    }
+}
+@-moz-keyframes glowButtonsHover {
+    0% {
+        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
+    }
+    100% {
+        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
+    }
+}
+@-ms-keyframes glowButtonsHover {
+    0% {
+        -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
+    }
+    100% {
+        -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
+    }
+}
+/* disabled to ease rendering work for Opera 
+@-o-keyframes glowButtonsHover {
+    0% {
+        -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
+    }
+    100% {
+        -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
+    }
+}
+*/
+@keyframes glowButtonsHover {
+    0% {
+        box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
+    }
+    100% {
+        box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
+    }
+}
+
+/* Default Hover State */
+
+.default .wcf-button:hover,
+input[type='submit']:not([disabled]):hover,
+input[type='button']:not([disabled]).default:hover,
+button:not([disabled]).default:hover {	
+	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
+	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
+	-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
+	-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
+	
+	-webkit-animation-name: glowButtonsHover;
+	-webkit-animation-duration: 1s;
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-direction: alternate;
+	-webkit-animation-timing-function: ease-in-out; 
+	
+	-moz-animation-name: glowButtonsHover;
+	-moz-animation-duration: 1s;
+	-moz-animation-iteration-count: infinite;
+	-moz-animation-direction: alternate;
+	-moz-animation-timing-function: ease-in-out;
+	
+	-ms-animation-name: glowButtonsHover;
+	-ms-animation-duration: 1s;
+	-ms-animation-iteration-count: infinite;
+	-ms-animation-direction: alternate;
+	-ms-animation-timing-function: ease-in-out; 
+	/* disabled to ease rendering work for Opera 
+	-o-animation-name: glowButtonsHover;
+	-o-animation-duration: 1s;
+	-o-animation-iteration-count: infinite;
+	-o-animation-direction: alternate;
+	-o-animation-timing-function: ease-in-out;
+	*/
+	animation-name: glowButtonsHover;
+	animation-duration: 1s;
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
+	animation-timing-function: ease-in-out;
+}
+
+/* Default Active State Glow */
+
+@-webkit-keyframes glowDefaultButtonsActive {
+    0% {
+        -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
+    100% {
+        -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
+}
+@-moz-keyframes glowDefaultButtonsActive {
+    0% {
+        -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
+    100% {
+        -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
+}
+@-ms-keyframes glowDefaultButtonsActive {
+    0% {
+        -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
+    100% {
+        -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
+}
+/* disabled to ease rendering work for Opera 
+@-o-keyframes glowDefaultButtonsActive {
+    0% {
+        -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
+    100% {
+        -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
+}
+*/
+@keyframes glowDefaultButtonsActive {
+    0% {
+        box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
+    100% {
+        box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
+}
+
+/* Default Active State */
+
+.default .wcf-button:focus,
+input[type='submit']:not([disabled]):focus,
+input[type='button']:not([disabled]).default:focus,
+button:not([disabled]).default:focus,
+
+.default .wcf-button:active,
+input[type='submit']:not([disabled]):active,
+input[type='button']:not([disabled]).default:active,
+button:not([disabled]).default:active {
+	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	-ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	-o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	
+	-webkit-animation-name: glowDefaultButtonsActive;
+	-webkit-animation-duration: 1s;
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-direction: alternate;
+	-webkit-animation-timing-function: ease-in-out; 
+	
+	-moz-animation-name: glowDefaultButtonsActive;
+	-moz-animation-duration: 1s;
+	-moz-animation-iteration-count: infinite;
+	-moz-animation-direction: alternate;
+	-moz-animation-timing-function: ease-in-out;
+	
+	-ms-animation-name: glowDefaultButtonsActive;
+	-ms-animation-duration: 1s;
+	-ms-animation-iteration-count: infinite;
+	-ms-animation-direction: alternate;
+	-ms-animation-timing-function: ease-in-out; 
+	/* disabled to ease rendering work for Opera 
+	-o-animation-name: glowDefaultButtonsActive;
+	-o-animation-duration: 1s;
+	-o-animation-iteration-count: infinite;
+	-o-animation-direction: alternate;
+	-o-animation-timing-function: ease-in-out;
+	*/
+	animation-name: glowDefaultButtonsActive;
+	animation-duration: 1s;
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
+	animation-timing-function: ease-in-out;
+}
+
+
+
+/* -- -- -- Special Buttons -- -- -- */
+
+/* Disabled State */
+
+.disabled .wcf-button,
+input[disabled],
+input[type='button'][disabled],
+button[disabled] {
+	color: rgba(153, 153, 153, 1);
+	cursor: default;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #ccc #bbb #aaa;
+	background-color: transparent;
+}
+
+
+
+/* ############## ACP Package List ############## */
+
+/* -- -- -- Application Package -- -- -- */
+
+/* Globals */
+
+.wcf-infoPackageApplication {
+	position: relative;
+}
+
+.wcf-infoPackageApplication .wcf-packageApplicationIcon {
+	position: absolute;
+	top: 30px;
+	left: 25px;
+	width: 96px;
+	height: 96px;
+}
+
+.wcf-infoPackageApplication div {
+	margin-bottom: -15px;
+	margin-left: 30px;
+}
+
+.wcf-infoPackageApplication footer {
+	position: relative;
+	right: -15px;
+	bottom: -15px;
+}
+
+.wcf-infoPackageApplication footer nav {
+	/* General toggle switch for package nav-bar orientation (options: left|center|right) */
+	text-align: right;
+}
+
+
+
+/* -- -- -- Package Plugin -- -- -- */
+
+/* Globals */
+
+.wcf-infoPackagePlugin {
+	text-align: center;
+	margin: 15px 10px 0 0;
+	display: inline-block;
+	position: relative;
+	width: 150px;
+	height: 150px;
+	overflow: hidden;
+	
+	-webkit-transition: background, border, color .1s linear;
+	-moz-transition: background, border, color .1s linear;
+	-ms-transition: background, border, color .1s linear;
+	-o-transition: background, border, color .1s linear;
+	transition: background, border, color .1s linear;
+}
+
+.wcf-infoPackagePlugin a {
+	text-decoration: none;
+}
+
+.wcf-infoPackagePlugin > div > a {
+	color: rgba(153, 153, 153, 1);
+	background-size: 96px;
+	background-position: center 70%;
+	background-repeat: no-repeat;
+	margin: 1px;
+	display: block;
+	position: relative;
+	width: 148px;
+	height: 148px;
+}
+
+.wcf-infoPackagePlugin:hover > div > a {
+	color: rgba(102, 102, 102, 1);
+}
+
+.wcf-infoPackagePlugin > div > a > h1 { /* ToDo: h1 inside a ??? */
+	font-size: 100%;
+	font-weight: bold;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+	word-wrap: break-word;
+	margin: 0 -1px;
+	padding: 3px 1px;
+	display: block;
+	position: relative;
+	z-index: 100;
+}
+
+.wcf-infoPackagePlugin:hover > div > a > h1 {
+	border-bottom: 1px solid rgba(204, 204, 204, 1);
+	
+	background-color: rgba(0, 0, 0, .015);
+	background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+	background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+	background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+	background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+}
+
+.wcf-infoPackagePlugin footer {
+	margin-top: -22px;
+	width: 100%;
+}
+
+.wcf-infoPackagePlugin > div > a > small {
+	font-size: 85%;
+	font-weight: normal;
+	text-shadow: none;
+	border-radius: 7px;
+	padding: 40px 5px;
+	display: block;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 139px;
+	opacity: 0;
+	
+	-webkit-transition: opacity .1s linear;
+	-moz-transition: opacity .1s linear;
+	-ms-transition: opacity .1s linear;
+	-o-transition: opacity .1s linear;
+	transition: opacity .1s linear;
+}
+
+.wcf-infoPackagePlugin:hover > div > a > small {
+	background-color: rgba(255, 255, 255, .9);
+	z-index: 10;
+	opacity: 1;
+}
+
+
+
+/* -- -- -- Package Footers -- -- -- */
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+	
+	.wcf-infoPackageApplication footer nav,
+	.wcf-infoPackagePlugin footer nav {
+		opacity: 0;
+		
+		-webkit-transition: opacity .1s linear;
+		-moz-transition: opacity .1s linear;
+		-ms-transition: opacity .1s linear;
+		-o-transition: opacity .1s linear;
+		transition: opacity .1s linear;
+	}
+	
+	.wcf-infoPackageApplication:hover footer nav,
+	.wcf-infoPackagePlugin:hover footer nav {
+		opacity: 1;
+	}
+	
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+	
+	.wcf-infoPackageApplication footer nav,
+	.wcf-infoPackagePlugin footer nav {
+		opacity: 1;
+	}
+	
+}
+
+
+
+/* ############## TODO: Sortable lists ############## */
+
+/* TODO: Everything is working right now and looks pretty much like similar stuff. Adjust the colors, but take care
+	 when changing margins/paddings. Keep them relative to each other, otherwise you might encounter a strange
+	 behavior (in rare cases) which might lead to a situation where you will be unable to move an item properly. - Alex */
+
+/* This is the placeholder (or ghost) which will be inserted on runtime in order to show the possible insertation point - Alex */
+.wcf-sortableListContainer .wcf-badgeYellow {
+	border-radius: 5px;
+	margin: 3px 0;
+	padding: 4px;
+}
+
+/* TODO: This was taken from badgeRed and is used to indicate a list which is not a valid drop target */
+.wcf-badgeYellow.wcf-sortableInvalidTarget {
+	color: #c00;
+	border: 1px solid #f99;
+	background-color: #fee;
+}
+
+/* Notice: min-height was safely removed */
+.wcf-sortableList {
+	list-style-position: outside;
+	list-style-type: decimal;
+	margin-left: 21px;
+}
+
+.wcf-sortableNode {
+	cursor: move;
+}
+
+.wcf-sortableNodeLabel {
+	border-bottom: 1px solid rgba(216, 231, 245, 1);
+	padding: 7px 7px 11px 0;
+	display: block; /* Do not use anything other than block here, otherwise the sortables go crazy - Alex */
+}
+
+
+
+
+
+
+/* ############## CSS Experiments (active) ############## */
+
+/* what is that? */
+/* Once we're determing the dimensions of an element (by JS) we move it into body and wrap it with
+   a container with class 'wcfDimensions' in order to calculate the precise dimensions. We could also
+   embed it directly in JS (using style-attribute) but I thought it was better this way. - Alex */
+.wcfDimensions {
+	display: inline-block;
+}
+
+
+
+
+
+/* ############## ToDo: Action Proxy Loading ############## */
+
+/* Spinner */
+
+.wcf-spinner {
+	text-align: center;
+	text-shadow: 0 -1px 0 #000;
+	color: #fff;
+	border-width: 1px;
+	border-style: solid;
+	border-color: rgba(0, 0, 0, .3);
+	border-radius: 5px;
+	
+	background-color: rgba(0, 0, 0, .5) !important;
+	background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
+	background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
+	background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
+	background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
+	background-image: linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
+	
+	padding: 7px 0;
+	position: fixed;
+	top: 200px;
+	left: 46%;
+	right: 46%;
+	width: 70px;
+	z-index: 1000;
+	
+	-webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+	-moz-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+	-ms-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+	-o-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+	box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+}
+
+.wcf-spinner img {
+	margin-bottom: 10px;
+	height: 48px;
+	width: 48px;
+}
+
+
+
+
+
+
+
+
+
+
+
+/* DEBUG ONLY - DO NOT TOUCH! */
+
+.ajaxDebugMessage p {
+	border-bottom: 1px solid rgb(192, 192, 192);
+	margin: 0 3px;
+	padding: 7px 0 3px 0;
+}
+
+.ajaxDebugMessage p:first-child,
+.ajaxDebugMessage p:last-child {
+	border-bottom-width: 0;
+	margin: 0;
+	padding: 3px;
+}
+
+.ajaxDebugMessage p:last-child {
+	font-family: Monospace;
+	font-size: 110%;
+}
+
+
+
+
+
+/* Like colors */
+
+.wcf-liked {
+	color: #090;
+}
+
+.wcf-disliked {
+	color: #900;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* -- -- -- -- -- EOF -- -- -- -- -- */
diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 23fb316339..2431297975 100644
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -27,9 +27,12 @@
 	</script>
 	
 	<!-- Stylesheets -->
+	<link rel="stylesheet/less" type="text/css" href="{@$__wcf->getPath()}acp/style/wcf.less" />
+	<script type="text/javascript" src="{@$__wcf->getPath()}js/3rdParty/less.min.js"></script>
+	
 	<style type="text/css">
-		@import url("{@$__wcf->getPath()}acp/style/wcf.css") screen;
 		{*
+		@import url("{@$__wcf->getPath()}acp/style/wcf.css") screen;
 		@import url("{@$__wcf->getPath()}acp/style/style-{@$__wcf->getLanguage()->getPageDirection()}.css") screen;
 	
 		@import url("{@$__wcf->getPath()}acp/style/print.css") print;
diff --git a/wcfsetup/install/files/js/3rdParty/less.min.js b/wcfsetup/install/files/js/3rdParty/less.min.js
new file mode 100644
index 0000000000..55042ecb8f
--- /dev/null
+++ b/wcfsetup/install/files/js/3rdParty/less.min.js
@@ -0,0 +1,9 @@
+//
+// LESS - Leaner CSS v1.2.2
+// http://lesscss.org
+// 
+// Copyright (c) 2009-2011, Alexis Sellier
+// Licensed under the Apache 2.0 License.
+//
+(function(a,b){function c(b){return a.less[b.split("/")[1]]}function m(){var a=document.getElementsByTagName("style");for(var b=0;b<a.length;b++)a[b].type.match(k)&&(new d.Parser).parse(a[b].innerHTML||"",function(c,d){var e=d.toCSS(),f=a[b];f.type="text/css",f.styleSheet?f.styleSheet.cssText=e:f.innerHTML=e})}function n(a,b){for(var c=0;c<d.sheets.length;c++)o(d.sheets[c],a,b,d.sheets.length-(c+1))}function o(b,c,e,f){var g=a.location.href.replace(/[#?].*$/,""),i=b.href.replace(/\?.*$/,""),j=h&&h.getItem(i),k=h&&h.getItem(i+":timestamp"),l={css:j,timestamp:k};/^(https?|file):/.test(i)||(i.charAt(0)=="/"?i=a.location.protocol+"//"+a.location.host+i:i=g.slice(0,g.lastIndexOf("/")+1)+i);var m=i.match(/([^\/]+)$/)[1];s(b.href,b.type,function(a,g){if(!e&&l&&g&&(new Date(g)).valueOf()===(new Date(l.timestamp)).valueOf())r(l.css,b),c(null,null,a,b,{local:!0,remaining:f});else try{(new d.Parser({optimization:d.optimization,paths:[i.replace(/[\w\.-]+$/,"")],mime:b.type,filename:m})).parse(a,function(d,e){if(d)return w(d,i);try{c(d,e,a,b,{local:!1,lastModified:g,remaining:f}),u(document.getElementById("less-error-message:"+q(i)))}catch(d){w(d,i)}})}catch(h){w(h,i)}},function(a,b){throw new Error("Couldn't load "+b+" ("+a+")")})}function q(a){return a.replace(/^[a-z]+:\/\/?[^\/]+/,"").replace(/^\//,"").replace(/\?.*$/,"").replace(/\.[^\.\/]+$/,"").replace(/[^\.\w-]+/g,"-").replace(/\./g,":")}function r(a,b,c){var d,e=b.href?b.href.replace(/\?.*$/,""):"",f="less:"+(b.title||q(e));(d=document.getElementById(f))===null&&(d=document.createElement("style"),d.type="text/css",d.media=b.media||"screen",d.id=f,document.getElementsByTagName("head")[0].appendChild(d));if(d.styleSheet)try{d.styleSheet.cssText=a}catch(g){throw new Error("Couldn't reassign styleSheet.cssText.")}else(function(a){d.childNodes.length>0?d.firstChild.nodeValue!==a.nodeValue&&d.replaceChild(a,d.firstChild):d.appendChild(a)})(document.createTextNode(a));c&&h&&(v("saving "+e+" to cache."),h.setItem(e,a),h.setItem(e+":timestamp",c))}function s(a,b,c,e){function i(b,c,d){b.status>=200&&b.status<300?c(b.responseText,b.getResponseHeader("Last-Modified")):typeof d=="function"&&d(b.status,a)}var f=t(),h=g?!1:d.async;typeof f.overrideMimeType=="function"&&f.overrideMimeType("text/css"),f.open("GET",a,h),f.setRequestHeader("Accept",b||"text/x-less, text/css; q=0.9, */*; q=0.5"),f.send(null),g?f.status===0||f.status>=200&&f.status<300?c(f.responseText):e(f.status,a):h?f.onreadystatechange=function(){f.readyState==4&&i(f,c,e)}:i(f,c,e)}function t(){if(a.XMLHttpRequest)return new XMLHttpRequest;try{return new ActiveXObject("MSXML2.XMLHTTP.3.0")}catch(b){return v("browser doesn't support AJAX."),null}}function u(a){return a&&a.parentNode.removeChild(a)}function v(a){d.env=="development"&&typeof console!="undefined"&&console.log("less: "+a)}function w(a,b){var c="less-error-message:"+q(b),e='<li><label>{line}</label><pre class="{class}">{content}</pre></li>',f=document.createElement("div"),g,h,i=[],j=a.filename||b;f.id=c,f.className="less-error-message",h="<h3>"+(a.message||"There is an error in your .less file")+"</h3>"+'<p>in <a href="'+j+'">'+j+"</a> ";var k=function(a,b,c){a.extract[b]&&i.push(e.replace(/\{line\}/,parseInt(a.line)+(b-1)).replace(/\{class\}/,c).replace(/\{content\}/,a.extract[b]))};a.stack?h+="<br/>"+a.stack.split("\n").slice(1).join("<br/>"):a.extract&&(k(a,0,""),k(a,1,"line"),k(a,2,""),h+="on line "+a.line+", column "+(a.column+1)+":</p>"+"<ul>"+i.join("")+"</ul>"),f.innerHTML=h,r([".less-error-message ul, .less-error-message li {","list-style-type: none;","margin-right: 15px;","padding: 4px 0;","margin: 0;","}",".less-error-message label {","font-size: 12px;","margin-right: 15px;","padding: 4px 0;","color: #cc7777;","}",".less-error-message pre {","color: #dd6666;","padding: 4px 0;","margin: 0;","display: inline-block;","}",".less-error-message pre.line {","color: #ff0000;","}",".less-error-message h3 {","font-size: 20px;","font-weight: bold;","padding: 15px 0 5px 0;","margin: 0;","}",".less-error-message a {","color: #10a","}",".less-error-message .error {","color: red;","font-weight: bold;","padding-bottom: 2px;","border-bottom: 1px dashed red;","}"].join("\n"),{title:"error-message"}),f.style.cssText=["font-family: Arial, sans-serif","border: 1px solid #e00","background-color: #eee","border-radius: 5px","-webkit-border-radius: 5px","-moz-border-radius: 5px","color: #e00","padding: 15px","margin-bottom: 15px"].join(";"),d.env=="development"&&(g=setInterval(function(){document.body&&(document.getElementById(c)?document.body.replaceChild(f,document.getElementById(c)):document.body.insertBefore(f,document.body.firstChild),clearInterval(g))},10))}typeof define=="function"&&define.amd&&define("less",[],function(){return d}),Array.isArray||(Array.isArray=function(a){return Object.prototype.toString.call(a)==="[object Array]"||a instanceof Array}),Array.prototype.forEach||(Array.prototype.forEach=function(a,b){var c=this.length>>>0;for(var d=0;d<c;d++)d in this&&a.call(b,this[d],d,this)}),Array.prototype.map||(Array.prototype.map=function(a){var b=this.length>>>0,c=new Array(b),d=arguments[1];for(var e=0;e<b;e++)e in this&&(c[e]=a.call(d,this[e],e,this));return c}),Array.prototype.filter||(Array.prototype.filter=function(a){var b=[],c=arguments[1];for(var d=0;d<this.length;d++)a.call(c,this[d])&&b.push(this[d]);return b}),Array.prototype.reduce||(Array.prototype.reduce=function(a){var b=this.length>>>0,c=0;if(b===0&&arguments.length===1)throw new TypeError;if(arguments.length>=2)var d=arguments[1];else do{if(c in this){d=this[c++];break}if(++c>=b)throw new TypeError}while(!0);for(;c<b;c++)c in this&&(d=a.call(null,d,this[c],c,this));return d}),Array.prototype.indexOf||(Array.prototype.indexOf=function(a){var b=this.length,c=arguments[1]||0;if(!b)return-1;if(c>=b)return-1;c<0&&(c+=b);for(;c<b;c++){if(!Object.prototype.hasOwnProperty.call(this,c))continue;if(a===this[c])return c}return-1}),Object.keys||(Object.keys=function(a){var b=[];for(var c in a)Object.prototype.hasOwnProperty.call(a,c)&&b.push(c);return b}),String.prototype.trim||(String.prototype.trim=function(){return String(this).replace(/^\s\s*/,"").replace(/\s\s*$/,"")});var d,f;typeof environment=="object"&&{}.toString.call(environment)==="[object Environment]"?(typeof a=="undefined"?d={}:d=a.less={},f=d.tree={},d.mode="rhino"):typeof a=="undefined"?(d=exports,f=c("./tree"),d.mode="node"):(typeof a.less=="undefined"&&(a.less={}),d=a.less,f=a.less.tree={},d.mode="browser"),d.Parser=function(b){function t(){j=m[i],k=h,n=h}function u(){m[i]=j,h=k,n=h}function v(){h>n&&(m[i]=m[i].slice(h-n),n=h)}function w(a){var b,c,d,e,f,j,k,l;if(a instanceof Function)return a.call(o.parsers);if(typeof a=="string")b=g.charAt(h)===a?a:null,d=1,v();else{v();if(!(b=a.exec(m[i])))return null;d=b[0].length}if(b){l=h+=d,j=h+m[i].length-d;while(h<j){e=g.charCodeAt(h);if(e!==32&&e!==10&&e!==9)break;h++}return m[i]=m[i].slice(d+(h-l)),n=h,m[i].length===0&&i<m.length-1&&i++,typeof b=="string"?b:b.length===1?b[0]:b}}function x(a,b){var c=w(a);if(!!c)return c;y(b||(typeof a=="string"?"expected '"+a+"' got '"+g.charAt(h)+"'":"unexpected token"))}function y(a,b){throw{index:h,type:b||"Syntax",message:a}}function z(a){return typeof a=="string"?g.charAt(h)===a:a.test(m[i])?!0:!1}function A(a){return d.mode==="node"?c("path").basename(a):a.match(/[^\/]+$/)[0]}function B(a,b){return a.filename&&b.filename&&a.filename!==b.filename?o.imports.contents[A(a.filename)]:g}function C(a,b){for(var c=a,d=-1;c>=0&&b.charAt(c)!=="\n";c--)d++;return{line:typeof a=="number"?(b.slice(0,a).match(/\n/g)||"").length:null,column:d}}function D(a,b){var c=B(a,b),d=C(a.index,c),e=d.line,f=d.column,g=c.split("\n");this.type=a.type||"Syntax",this.message=a.message,this.filename=a.filename||b.filename,this.index=a.index,this.line=typeof e=="number"?e+1:null,this.callLine=a.call&&C(a.call,c)+1,this.callExtract=g[C(a.call,c)],this.stack=a.stack,this.column=f,this.extract=[g[e-1],g[e],g[e+1]]}var g,h,i,j,k,l,m,n,o,q=this,r=function(){},s=this.imports={paths:b&&b.paths||[],queue:[],files:{},contents:{},mime:b&&b.mime,error:null,push:function(a,c){var e=this;this.queue.push(a),d.Parser.importer(a,this.paths,function(b,d,f){e.queue.splice(e.queue.indexOf(a),1),e.files[a]=d,e.contents[a]=f,b&&!e.error&&(e.error=b),c(b,d),e.queue.length===0&&r()},b)}};return this.env=b=b||{},this.optimization="optimization"in this.env?this.env.optimization:1,this.env.filename=this.env.filename||null,o={imports:s,parse:function(a,e){var j,k,p,q,s,t,u=[],v,x=null;h=i=n=l=0,g=a.replace(/\r\n/g,"\n"),m=function(a){var c=0,d=/[^"'`\{\}\/\(\)\\]+/g,e=/\/\*(?:[^*]|\*+[^\/*])*\*+\/|\/\/.*/g,f=/"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'|`((?:[^`\\\r\n]|\\.)*)`/g,h=0,i,j=a[0],k;for(var l=0,m,n;l<g.length;l++){d.lastIndex=l,(i=d.exec(g))&&i.index===l&&(l+=i[0].length,j.push(i[0])),m=g.charAt(l),e.lastIndex=f.lastIndex=l,(i=f.exec(g))&&i.index===l&&(l+=i[0].length,j.push(i[0]),m=g.charAt(l)),!k&&m==="/"&&(n=g.charAt(l+1),(n==="/"||n==="*")&&(i=e.exec(g))&&i.index===l&&(l+=i[0].length,j.push(i[0]),m=g.charAt(l)));switch(m){case"{":if(!k){h++,j.push(m);break};case"}":if(!k){h--,j.push(m),a[++c]=j=[];break};case"(":if(!k){k=!0,j.push(m);break};case")":if(k){k=!1,j.push(m);break};default:j.push(m)}}return h>0&&(x=new D({index:l,type:"Parse",message:"missing closing `}`",filename:b.filename},b)),a.map(function(a){return a.join("")})}([[]]);if(x)return e(x);try{j=new f.Ruleset([],w(this.parsers.primary)),j.root=!0}catch(y){return e(new D(y,b))}j.toCSS=function(a){var e,g,h;return function(e,g){var h=[],i;e=e||{},typeof g=="object"&&!Array.isArray(g)&&(g=Object.keys(g).map(function(a){var b=g[a];return b instanceof f.Value||(b instanceof f.Expression||(b=new f.Expression([b])),b=new f.Value([b])),new f.Rule("@"+a,b,!1,0)}),h=[new f.Ruleset(null,g)]);try{var j=a.call(this,{frames:h}).toCSS([],{compress:e.compress||!1})}catch(k){throw new D(k,b)}if(i=o.imports.error)throw i instanceof D?i:new D(i,b);return e.yuicompress&&d.mode==="node"?c("./cssmin").compressor.cssmin(j):e.compress?j.replace(/(\s)+/g,"$1"):j}}(j.eval);if(h<g.length-1){h=l,t=g.split("\n"),s=(g.slice(0,h).match(/\n/g)||"").length+1;for(var z=h,A=-1;z>=0&&g.charAt(z)!=="\n";z--)A++;x={type:"Parse",message:"Syntax Error on line "+s,index:h,filename:b.filename,line:s,column:A,extract:[t[s-2],t[s-1],t[s]]}}this.imports.queue.length>0?r=function(){e(x,j)}:e(x,j)},parsers:{primary:function(){var a,b=[];while((a=w(this.mixin.definition)||w(this.rule)||w(this.ruleset)||w(this.mixin.call)||w(this.comment)||w(this.directive))||w(/^[\s\n]+/))a&&b.push(a);return b},comment:function(){var a;if(g.charAt(h)!=="/")return;if(g.charAt(h+1)==="/")return new f.Comment(w(/^\/\/.*/),!0);if(a=w(/^\/\*(?:[^*]|\*+[^\/*])*\*+\/\n?/))return new f.Comment(a)},entities:{quoted:function(){var a,b=h,c;g.charAt(b)==="~"&&(b++,c=!0);if(g.charAt(b)!=='"'&&g.charAt(b)!=="'")return;c&&w("~");if(a=w(/^"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'/))return new f.Quoted(a[0],a[1]||a[2],c)},keyword:function(){var a;if(a=w(/^[_A-Za-z-][_A-Za-z0-9-]*/))return f.colors.hasOwnProperty(a)?new f.Color(f.colors[a].slice(1)):new f.Keyword(a)},call:function(){var a,c,d=h;if(!(a=/^([\w-]+|%|progid:[\w\.]+)\(/.exec(m[i])))return;a=a[1].toLowerCase();if(a==="url")return null;h+=a.length;if(a==="alpha")return w(this.alpha);w("("),c=w(this.entities.arguments);if(!w(")"))return;if(a)return new f.Call(a,c,d,b.filename)},arguments:function(){var a=[],b;while(b=w(this.entities.assignment)||w(this.expression)){a.push(b);if(!w(","))break}return a},literal:function(){return w(this.entities.dimension)||w(this.entities.color)||w(this.entities.quoted)},assignment:function(){var a,b;if((a=w(/^\w+(?=\s?=)/i))&&w("=")&&(b=w(this.entity)))return new f.Assignment(a,b)},url:function(){var a;if(g.charAt(h)!=="u"||!w(/^url\(/))return;return a=w(this.entities.quoted)||w(this.entities.variable)||w(this.entities.dataURI)||w(/^[-\w%@$\/.&=:;#+?~]+/)||"",x(")"),new f.URL(a.value||a.data||a instanceof f.Variable?a:new f.Anonymous(a),s.paths)},dataURI:function(){var a;if(w(/^data:/)){a={},a.mime=w(/^[^\/]+\/[^,;)]+/)||"",a.charset=w(/^;\s*charset=[^,;)]+/)||"",a.base64=w(/^;\s*base64/)||"",a.data=w(/^,\s*[^)]+/);if(a.data)return a}},variable:function(){var a,c=h;if(g.charAt(h)==="@"&&(a=w(/^@@?[\w-]+/)))return new f.Variable(a,c,b.filename)},color:function(){var a;if(g.charAt(h)==="#"&&(a=w(/^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})/)))return new f.Color(a[1])},dimension:function(){var a,b=g.charCodeAt(h);if(b>57||b<45||b===47)return;if(a=w(/^(-?\d*\.?\d+)(px|%|em|rem|pc|ex|in|deg|s|ms|pt|cm|mm|rad|grad|turn)?/))return new f.Dimension(a[1],a[2])},javascript:function(){var a,b=h,c;g.charAt(b)==="~"&&(b++,c=!0);if(g.charAt(b)!=="`")return;c&&w("~");if(a=w(/^`([^`]*)`/))return new f.JavaScript(a[1],h,c)}},variable:function(){var a;if(g.charAt(h)==="@"&&(a=w(/^(@[\w-]+)\s*:/)))return a[1]},shorthand:function(){var a,b;if(!z(/^[@\w.%-]+\/[@\w.-]+/))return;if((a=w(this.entity))&&w("/")&&(b=w(this.entity)))return new f.Shorthand(a,b)},mixin:{call:function(){var a=[],c,d,e,i=h,j=g.charAt(h),k=!1;if(j!=="."&&j!=="#")return;while(c=w(/^[#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/))a.push(new f.Element(d,c,h)),d=w(">");w("(")&&(e=w(this.entities.arguments))&&w(")"),w(this.important)&&(k=!0);if(a.length>0&&(w(";")||z("}")))return new f.mixin.Call(a,e,i,b.filename,k)},definition:function(){var a,b=[],c,d,e,i,j;if(g.charAt(h)!=="."&&g.charAt(h)!=="#"||z(/^[^{]*(;|})/))return;t();if(c=w(/^([#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+)\s*\(/)){a=c[1];while(e=w(this.entities.variable)||w(this.entities.literal)||w(this.entities.keyword)){e instanceof f.Variable?w(":")?(i=x(this.expression,"expected expression"),b.push({name:e.name,value:i})):b.push({name:e.name}):b.push({value:e});if(!w(","))break}x(")"),w(/^when/)&&(j=x(this.conditions,"expected condition")),d=w(this.block);if(d)return new f.mixin.Definition(a,b,d,j);u()}}},entity:function(){return w(this.entities.literal)||w(this.entities.variable)||w(this.entities.url)||w(this.entities.call)||w(this.entities.keyword)||w(this.entities.javascript)||w(this.comment)},end:function(){return w(";")||z("}")},alpha:function(){var a;if(!w(/^\(opacity=/i))return;if(a=w(/^\d+/)||w(this.entities.variable))return x(")"),new f.Alpha(a)},element:function(){var a,b,c,d;c=w(this.combinator),a=w(/^(?:\d+\.\d+|\d+)%/)||w(/^(?:[.#]?|:*)(?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/)||w("*")||w(this.attribute)||w(/^\([^)@]+\)/),a||w("(")&&(d=w(this.entities.variable))&&w(")")&&(a=new f.Paren(d));if(a)return new f.Element(c,a,h);if(c.value&&c.value.charAt(0)==="&")return new f.Element(c,null,h)},combinator:function(){var a,b=g.charAt(h);if(b===">"||b==="+"||b==="~"){h++;while(g.charAt(h)===" ")h++;return new f.Combinator(b)}if(b==="&"){a="&",h++,g.charAt(h)===" "&&(a="& ");while(g.charAt(h)===" ")h++;return new f.Combinator(a)}if(b===":"&&g.charAt(h+1)===":"){h+=2;while(g.charAt(h)===" ")h++;return new f.Combinator("::")}return g.charAt(h-1)===" "?new f.Combinator(" "):new f.Combinator(null)},selector:function(){var a,b,c=[],d,e;while(b=w(this.element)){d=g.charAt(h),c.push(b);if(d==="{"||d==="}"||d===";"||d===",")break}if(c.length>0)return new f.Selector(c)},tag:function(){return w(/^[a-zA-Z][a-zA-Z-]*[0-9]?/)||w("*")},attribute:function(){var a="",b,c,d;if(!w("["))return;if(b=w(/^[a-zA-Z-]+/)||w(this.entities.quoted))(d=w(/^[|~*$^]?=/))&&(c=w(this.entities.quoted)||w(/^[\w-]+/))?a=[b,d,c.toCSS?c.toCSS():c].join(""):a=b;if(!w("]"))return;if(a)return"["+a+"]"},block:function(){var a;if(w("{")&&(a=w(this.primary))&&w("}"))return a},ruleset:function(){var a=[],b,c,d;t();while(b=w(this.selector)){a.push(b),w(this.comment);if(!w(","))break;w(this.comment)}if(a.length>0&&(c=w(this.block)))return new f.Ruleset(a,c);l=h,u()},rule:function(){var a,b,c=g.charAt(h),d,e;t();if(c==="."||c==="#"||c==="&")return;if(a=w(this.variable)||w(this.property)){a.charAt(0)!="@"&&(e=/^([^@+\/'"*`(;{}-]*);/.exec(m[i]))?(h+=e[0].length-1,b=new f.Anonymous(e[1])):a==="font"?b=w(this.font):b=w(this.value),d=w(this.important);if(b&&w(this.end))return new f.Rule(a,b,d,k);l=h,u()}},"import":function(){var a,b,c=h;if(w(/^@import\s+/)&&(a=w(this.entities.quoted)||w(this.entities.url))){b=w(this.mediaFeatures);if(w(";"))return new f.Import(a,s,b,c)}},mediaFeature:function(){var a=[];do if(e=w(this.entities.keyword))a.push(e);else if(w("(")){p=w(this.property),e=w(this.entity);if(!w(")"))return null;if(p&&e)a.push(new f.Paren(new f.Rule(p,e,null,h,!0)));else{if(!e)return null;a.push(new f.Paren(e))}}while(e);if(a.length>0)return new f.Expression(a)},mediaFeatures:function(){var a,b=[];while(a=w(this.mediaFeature)){b.push(a);if(!w(","))break}return b.length>0?b:null},media:function(){var a;if(w(/^@media/)){a=w(this.mediaFeatures);if(rules=w(this.block))return new f.Directive("@media",rules,a)}},directive:function(){var a,b,c,d,e,i;if(g.charAt(h)!=="@")return;if(b=w(this["import"])||w(this.media))return b;if(a=w(/^@page|@keyframes/)||w(/^@(?:-webkit-|-moz-|-o-|-ms-)[a-z0-9-]+/)){d=(w(/^[^{]+/)||"").trim();if(c=w(this.block))return new f.Directive(a+" "+d,c)}else if(a=w(/^@[-a-z]+/))if(a==="@font-face"){if(c=w(this.block))return new f.Directive(a,c)}else if((b=w(this.entity))&&w(";"))return new f.Directive(a,b)},font:function(){var a=[],b=[],c,d,e,g;while(g=w(this.shorthand)||w(this.entity))b.push(g);a.push(new f.Expression(b));if(w(","))while(g=w(this.expression)){a.push(g);if(!w(","))break}return new f.Value(a)},value:function(){var a,b=[],c;while(a=w(this.expression)){b.push(a);if(!w(","))break}if(b.length>0)return new f.Value(b)},important:function(){if(g.charAt(h)==="!")return w(/^! *important/)},sub:function(){var a;if(w("(")&&(a=w(this.expression))&&w(")"))return a},multiplication:function(){var a,b,c,d;if(a=w(this.operand)){while(!z(/^\/\*/)&&(c=w("/")||w("*"))&&(b=w(this.operand)))d=new f.Operation(c,[d||a,b]);return d||a}},addition:function(){var a,b,c,d;if(a=w(this.multiplication)){while((c=w(/^[-+]\s+/)||g.charAt(h-1)!=" "&&(w("+")||w("-")))&&(b=w(this.multiplication)))d=new f.Operation(c,[d||a,b]);return d||a}},conditions:function(){var a,b,c=h,d;if(a=w(this.condition)){while(w(",")&&(b=w(this.condition)))d=new f.Condition("or",d||a,b,c);return d||a}},condition:function(){var a,b,c,d,e=h,g=!1;w(/^not/)&&(g=!0),x("(");if(a=w(this.addition)||w(this.entities.keyword)||w(this.entities.quoted))return(d=w(/^(?:>=|=<|[<=>])/))?(b=w(this.addition)||w(this.entities.keyword)||w(this.entities.quoted))?c=new f.Condition(d,a,b,e,g):y("expected expression"):c=new f.Condition("=",a,new f.Keyword("true"),e,g),x(")"),w(/^and/)?new f.Condition("and",c,w(this.condition)):c},operand:function(){var a,b=g.charAt(h+1);g.charAt(h)==="-"&&(b==="@"||b==="(")&&(a=w("-"));var c=w(this.sub)||w(this.entities.dimension)||w(this.entities.color)||w(this.entities.variable)||w(this.entities.call);return a?new f.Operation("*",[new f.Dimension(-1),c]):c},expression:function(){var a,b,c=[],d;while(a=w(this.addition)||w(this.entity))c.push(a);if(c.length>0)return new f.Expression(c)},property:function(){var a;if(a=w(/^(\*?-?[-a-z_0-9]+)\s*:/))return a[1]}}}};if(d.mode==="browser"||d.mode==="rhino")d.Parser.importer=function(a,b,c,d){!/^([a-z]+:)?\//.test(a)&&b.length>0&&(a=b[0]+a),o({href:a,title:a,type:d.mime},function(e){e&&typeof d.errback=="function"?d.errback.call(null,a,b,c,d):c.apply(null,arguments)},!0)};(function(a){function b(b){return a.functions.hsla(b.h,b.s,b.l,b.a)}function c(b){if(b instanceof a.Dimension)return parseFloat(b.unit=="%"?b.value/100:b.value);if(typeof b=="number")return b;throw{error:"RuntimeError",message:"color functions take numbers as parameters"}}function d(a){return Math.min(1,Math.max(0,a))}a.functions={rgb:function(a,b,c){return this.rgba(a,b,c,1)},rgba:function(b,d,e,f){var g=[b,d,e].map(function(a){return c(a)}),f=c(f);return new a.Color(g,f)},hsl:function(a,b,c){return this.hsla(a,b,c,1)},hsla:function(a,b,d,e){function h(a){return a=a<0?a+1:a>1?a-1:a,a*6<1?g+(f-g)*a*6:a*2<1?f:a*3<2?g+(f-g)*(2/3-a)*6:g}a=c(a)%360/360,b=c(b),d=c(d),e=c(e);var f=d<=.5?d*(b+1):d+b-d*b,g=d*2-f;return this.rgba(h(a+1/3)*255,h(a)*255,h(a-1/3)*255,e)},hue:function(b){return new a.Dimension(Math.round(b.toHSL().h))},saturation:function(b){return new a.Dimension(Math.round(b.toHSL().s*100),"%")},lightness:function(b){return new a.Dimension(Math.round(b.toHSL().l*100),"%")},alpha:function(b){return new a.Dimension(b.toHSL().a)},saturate:function(a,c){var e=a.toHSL();return e.s+=c.value/100,e.s=d(e.s),b(e)},desaturate:function(a,c){var e=a.toHSL();return e.s-=c.value/100,e.s=d(e.s),b(e)},lighten:function(a,c){var e=a.toHSL();return e.l+=c.value/100,e.l=d(e.l),b(e)},darken:function(a,c){var e=a.toHSL();return e.l-=c.value/100,e.l=d(e.l),b(e)},fadein:function(a,c){var e=a.toHSL();return e.a+=c.value/100,e.a=d(e.a),b(e)},fadeout:function(a,c){var e=a.toHSL();return e.a-=c.value/100,e.a=d(e.a),b(e)},fade:function(a,c){var e=a.toHSL();return e.a=c.value/100,e.a=d(e.a),b(e)},spin:function(a,c){var d=a.toHSL(),e=(d.h+c.value)%360;return d.h=e<0?360+e:e,b(d)},mix:function(b,c,d){var e=d.value/100,f=e*2-1,g=b.toHSL().a-c.toHSL().a,h=((f*g==-1?f:(f+g)/(1+f*g))+1)/2,i=1-h,j=[b.rgb[0]*h+c.rgb[0]*i,b.rgb[1]*h+c.rgb[1]*i,b.rgb[2]*h+c.rgb[2]*i],k=b.alpha*e+c.alpha*(1-e);return new a.Color(j,k)},greyscale:function(b){return this.desaturate(b,new a.Dimension(100))},e:function(b){return new a.Anonymous(b instanceof a.JavaScript?b.evaluated:b)},escape:function(b){return new a.Anonymous(encodeURI(b.value).replace(/=/g,"%3D").replace(/:/g,"%3A").replace(/#/g,"%23").replace(/;/g,"%3B").replace(/\(/g,"%28").replace(/\)/g,"%29"))},"%":function(b){var c=Array.prototype.slice.call(arguments,1),d=b.value;for(var e=0;e<c.length;e++)d=d.replace(/%[sda]/i,function(a){var b=a.match(/s/i)?c[e].value:c[e].toCSS();return a.match(/[A-Z]$/)?encodeURIComponent(b):b});return d=d.replace(/%%/g,"%"),new a.Quoted('"'+d+'"',d)},round:function(a){return this._math("round",a)},ceil:function(a){return this._math("ceil",a)},floor:function(a){return this._math("floor",a)},_math:function(b,d){if(d instanceof a.Dimension)return new a.Dimension(Math[b](c(d)),d.unit);if(typeof d=="number")return Math[b](d);throw{type:"Argument",message:"argument must be a number"}},argb:function(b){return new a.Anonymous(b.toARGB())},percentage:function(b){return new a.Dimension(b.value*100,"%")},color:function(b){if(b instanceof a.Quoted)return new a.Color(b.value.slice(1));throw{type:"Argument",message:"argument must be a string"}},iscolor:function(b){return this._isa(b,a.Color)},isnumber:function(b){return this._isa(b,a.Dimension)},isstring:function(b){return this._isa(b,a.Quoted)},iskeyword:function(b){return this._isa(b,a.Keyword)},isurl:function(b){return this._isa(b,a.URL)},ispixel:function(b){return b instanceof a.Dimension&&b.unit==="px"?a.True:a.False},ispercentage:function(b){return b instanceof a.Dimension&&b.unit==="%"?a.True:a.False},isem:function(b){return b instanceof a.Dimension&&b.unit==="em"?a.True:a.False},_isa:function(b,c){return b instanceof c?a.True:a.False}}})(c("./tree")),function(a){a.colors={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgrey:"#a9a9a9",darkgreen:"#006400",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",grey:"#808080",green:"#008000",greenyellow:"#adff2f",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgrey:"#d3d3d3",lightgreen:"#90ee90",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370d8",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#d87093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"}}(c("./tree")),function(a){a.Alpha=function(a){this.value=a},a.Alpha.prototype={toCSS:function(){return"alpha(opacity="+(this.value.toCSS?this.value.toCSS():this.value)+")"},eval:function(a){return this.value.eval&&(this.value=this.value.eval(a)),this}}}(c("../tree")),function(a){a.Anonymous=function(a){this.value=a.value||a},a.Anonymous.prototype={toCSS:function(){return this.value},eval:function(){return this}}}(c("../tree")),function(a){a.Assignment=function(a,b){this.key=a,this.value=b},a.Assignment.prototype={toCSS:function(){return this.key+"="+(this.value.toCSS?this.value.toCSS():this.value)},eval:function(a){return this.value.eval&&(this.value=this.value.eval(a)),this}}}(c("../tree")),function(a){a.Call=function(a,b,c,d){this.name=a,this.args=b,this.index=c,this.filename=d},a.Call.prototype={eval:function(b){var c=this.args.map(function(a){return a.eval(b)});if(!(this.name in a.functions))return new a.Anonymous(this.name+"("+c.map(function(a){return a.toCSS()}).join(", ")+")");try{return a.functions[this.name].apply(a.functions,c)}catch(d){throw{type:d.type||"Runtime",message:"error evaluating function `"+this.name+"`"+(d.message?": "+d.message:""),index:this.index,filename:this.filename}}},toCSS:function(a){return this.eval(a).toCSS()}}}(c("../tree")),function(a){a.Color=function(a,b){Array.isArray(a)?this.rgb=a:a.length==6?this.rgb=a.match(/.{2}/g).map(function(a){return parseInt(a,16)}):this.rgb=a.split("").map(function(a){return parseInt(a+a,16)}),this.alpha=typeof b=="number"?b:1},a.Color.prototype={eval:function(){return this},toCSS:function(){return this.alpha<1?"rgba("+this.rgb.map(function(a){return Math.round(a)}).concat(this.alpha).join(", ")+")":"#"+this.rgb.map(function(a){return a=Math.round(a),a=(a>255?255:a<0?0:a).toString(16),a.length===1?"0"+a:a}).join("")},operate:function(b,c){var d=[];c instanceof a.Color||(c=c.toColor());for(var e=0;e<3;e++)d[e]=a.operate(b,this.rgb[e],c.rgb[e]);return new a.Color(d,this.alpha+c.alpha)},toHSL:function(){var a=this.rgb[0]/255,b=this.rgb[1]/255,c=this.rgb[2]/255,d=this.alpha,e=Math.max(a,b,c),f=Math.min(a,b,c),g,h,i=(e+f)/2,j=e-f;if(e===f)g=h=0;else{h=i>.5?j/(2-e-f):j/(e+f);switch(e){case a:g=(b-c)/j+(b<c?6:0);break;case b:g=(c-a)/j+2;break;case c:g=(a-b)/j+4}g/=6}return{h:g*360,s:h,l:i,a:d}},toARGB:function(){var a=[Math.round(this.alpha*255)].concat(this.rgb);return"#"+a.map(function(a){return a=Math.round(a),a=(a>255?255:a<0?0:a).toString(16),a.length===1?"0"+a:a}).join("")}}}(c("../tree")),function(a){a.Comment=function(a,b){this.value=a,this.silent=!!b},a.Comment.prototype={toCSS:function(a){return a.compress?"":this.value},eval:function(){return this}}}(c("../tree")),function(a){a.Condition=function(a,b,c,d,e){this.op=a.trim(),this.lvalue=b,this.rvalue=c,this.index=d,this.negate=e},a.Condition.prototype.eval=function(a){var b=this.lvalue.eval(a),c=this.rvalue.eval(a),d=this.index,e,e=function(a){switch(a){case"and":return b&&c;case"or":return b||c;default:if(b.compare)e=b.compare(c);else{if(!c.compare)throw{type:"Type",message:"Unable to perform comparison",index:d};e=c.compare(b)}switch(e){case-1:return a==="<"||a==="=<";case 0:return a==="="||a===">="||a==="=<";case 1:return a===">"||a===">="}}}(this.op);return this.negate?!e:e}}(c("../tree")),function(a){a.Dimension=function(a,b){this.value=parseFloat(a),this.unit=b||null},a.Dimension.prototype={eval:function(){return this},toColor:function(){return new a.Color([this.value,this.value,this.value])},toCSS:function(){var a=this.value+this.unit;return a},operate:function(b,c){return new a.Dimension(a.operate(b,this.value,c.value),this.unit||c.unit)},compare:function(b){return b instanceof a.Dimension?b.value>this.value?-1:b.value<this.value?1:0:-1}}}(c("../tree")),function(a){a.Directive=function(b,c,d){this.name=b,this.features=d&&new a.Value(d),Array.isArray(c)?(this.ruleset=new a.Ruleset([],c),this.ruleset.allowImports=!0):this.value=c},a.Directive.prototype={toCSS:function(a,b){var c=this.features?" "+this.features.toCSS(b):"";return this.ruleset?(this.ruleset.root=!0,this.name+c+(b.compress?"{":" {\n  ")+this.ruleset.toCSS(a,b).trim().replace(/\n/g,"\n  ")+(b.compress?"}":"\n}\n")):this.name+" "+this.value.toCSS()+";\n"},eval:function(a){return this.features=this.features&&this.features.eval(a),a.frames.unshift(this),this.ruleset=this.ruleset&&this.ruleset.eval(a),a.frames.shift(),this},variable:function(b){return a.Ruleset.prototype.variable.call(this.ruleset,b)},find:function(){return a.Ruleset.prototype.find.apply(this.ruleset,arguments)},rulesets:function(){return a.Ruleset.prototype.rulesets.apply(this.ruleset)}}}(c("../tree")),function(a){a.Element=function(b,c,d){this.combinator=b instanceof a.Combinator?b:new a.Combinator(b),typeof c=="string"?this.value=c.trim():c?this.value=c:this.value="",this.index=d},a.Element.prototype.eval=function(b){return new a.Element(this.combinator,this.value.eval?this.value.eval(b):this.value,this.index)},a.Element.prototype.toCSS=function(a){return this.combinator.toCSS(a||{})+(this.value.toCSS?this.value.toCSS(a):this.value)},a.Combinator=function(a){a===" "?this.value=" ":a==="& "?this.value="& ":this.value=a?a.trim():""},a.Combinator.prototype.toCSS=function(a){return{"":""," ":" ","&":"","& ":" ",":":" :","::":"::","+":a.compress?"+":" + ","~":a.compress?"~":" ~ ",">":a.compress?">":" > "}[this.value]}}(c("../tree")),function(a){a.Expression=function(a){this.value=a},a.Expression.prototype={eval:function(b){return this.value.length>1?new a.Expression(this.value.map(function(a){return a.eval(b)})):this.value.length===1?this.value[0].eval(b):this},toCSS:function(a){return this.value.map(function(b){return b.toCSS?b.toCSS(a):""}).join(" ")}}}(c("../tree")),function(a){a.Import=function(b,c,d,e){var f=this;this.index=e,this._path=b,this.features=d&&new a.Value(d),b instanceof a.Quoted?this.path=/\.(le?|c)ss(\?.*)?$/.test(b.value)?b.value:b.value+".less":this.path=b.value.value||b.value,this.css=/css(\?.*)?$/.test(this.path),this.css||c.push(this.path,function(b,c){b&&(b.index=e),f.root=c||new a.Ruleset([],[])})},a.Import.prototype={toCSS:function(a){var b=this.features?" "+this.features.toCSS(a):"";return this.css?"@import "+this._path.toCSS()+b+";\n":""},eval:function(b){var c,d=this.features&&this.features.eval(b);if(this.css)return this;c=new a.Ruleset([],this.root.rules.slice(0));for(var e=0;e<c.rules.length;e++)c.rules[e]instanceof a.Import&&Array.prototype.splice.apply(c.rules,[e,1].concat(c.rules[e].eval(b)));return this.features?new 
+a.Directive("@media",c.rules,this.features.value):c.rules}}}(c("../tree")),function(a){a.JavaScript=function(a,b,c){this.escaped=c,this.expression=a,this.index=b},a.JavaScript.prototype={eval:function(b){var c,d=this,e={},f=this.expression.replace(/@\{([\w-]+)\}/g,function(c,e){return a.jsify((new a.Variable("@"+e,d.index)).eval(b))});try{f=new Function("return ("+f+")")}catch(g){throw{message:"JavaScript evaluation error: `"+f+"`",index:this.index}}for(var h in b.frames[0].variables())e[h.slice(1)]={value:b.frames[0].variables()[h].value,toJS:function(){return this.value.eval(b).toCSS()}};try{c=f.call(e)}catch(g){throw{message:"JavaScript evaluation error: '"+g.name+": "+g.message+"'",index:this.index}}return typeof c=="string"?new a.Quoted('"'+c+'"',c,this.escaped,this.index):Array.isArray(c)?new a.Anonymous(c.join(", ")):new a.Anonymous(c)}}}(c("../tree")),function(a){a.Keyword=function(a){this.value=a},a.Keyword.prototype={eval:function(){return this},toCSS:function(){return this.value},compare:function(b){return b instanceof a.Keyword?b.value===this.value?0:1:-1}},a.True=new a.Keyword("true"),a.False=new a.Keyword("false")}(c("../tree")),function(a){a.mixin={},a.mixin.Call=function(b,c,d,e,f){this.selector=new a.Selector(b),this.arguments=c,this.index=d,this.filename=e,this.important=f},a.mixin.Call.prototype={eval:function(a){var b,c,d=[],e=!1;for(var f=0;f<a.frames.length;f++)if((b=a.frames[f].find(this.selector)).length>0){c=this.arguments&&this.arguments.map(function(b){return b.eval(a)});for(var g=0;g<b.length;g++)if(b[g].match(c,a))try{Array.prototype.push.apply(d,b[g].eval(a,this.arguments,this.important).rules),e=!0}catch(h){throw{message:h.message,index:h.index,filename:this.filename,stack:h.stack,call:this.index}}if(e)return d;throw{type:"Runtime",message:"No matching definition was found for `"+this.selector.toCSS().trim()+"("+this.arguments.map(function(a){return a.toCSS()}).join(", ")+")`",index:this.index,filename:this.filename}}throw{type:"Name",message:this.selector.toCSS().trim()+" is undefined",index:this.index,filename:this.filename}}},a.mixin.Definition=function(b,c,d,e){this.name=b,this.selectors=[new a.Selector([new a.Element(null,b)])],this.params=c,this.condition=e,this.arity=c.length,this.rules=d,this._lookups={},this.required=c.reduce(function(a,b){return!b.name||b.name&&!b.value?a+1:a},0),this.parent=a.Ruleset.prototype,this.frames=[]},a.mixin.Definition.prototype={toCSS:function(){return""},variable:function(a){return this.parent.variable.call(this,a)},variables:function(){return this.parent.variables.call(this)},find:function(){return this.parent.find.apply(this,arguments)},rulesets:function(){return this.parent.rulesets.apply(this)},evalParams:function(b,c){var d=new a.Ruleset(null,[]);for(var e=0,f;e<this.params.length;e++)if(this.params[e].name){if(!(f=c&&c[e]||this.params[e].value))throw{type:"Runtime",message:"wrong number of arguments for "+this.name+" ("+c.length+" for "+this.arity+")"};d.rules.unshift(new a.Rule(this.params[e].name,f.eval(b)))}return d},eval:function(b,c,d){var e=this.evalParams(b,c),f,g=[],h;for(var i=0;i<Math.max(this.params.length,c&&c.length);i++)g.push(c[i]||this.params[i].value);return e.rules.unshift(new a.Rule("@arguments",(new a.Expression(g)).eval(b))),h=d?this.rules.map(function(b){return new a.Rule(b.name,b.value,"!important",b.index)}):this.rules.slice(0),(new a.Ruleset(null,h)).eval({frames:[this,e].concat(this.frames,b.frames)})},match:function(a,b){var c=a&&a.length||0,d,e;if(c<this.required)return!1;if(this.required>0&&c>this.params.length)return!1;if(this.condition&&!this.condition.eval({frames:[this.evalParams(b,a)].concat(b.frames)}))return!1;d=Math.min(c,this.arity);for(var f=0;f<d;f++)if(!this.params[f].name&&a[f].eval(b).toCSS()!=this.params[f].value.eval(b).toCSS())return!1;return!0}}}(c("../tree")),function(a){a.Operation=function(a,b){this.op=a.trim(),this.operands=b},a.Operation.prototype.eval=function(b){var c=this.operands[0].eval(b),d=this.operands[1].eval(b),e;if(c instanceof a.Dimension&&d instanceof a.Color){if(this.op!=="*"&&this.op!=="+")throw{name:"OperationError",message:"Can't substract or divide a color from a number"};e=d,d=c,c=e}return c.operate(this.op,d)},a.operate=function(a,b,c){switch(a){case"+":return b+c;case"-":return b-c;case"*":return b*c;case"/":return b/c}}}(c("../tree")),function(a){a.Paren=function(a){this.value=a},a.Paren.prototype={toCSS:function(a){return"("+this.value.toCSS(a)+")"},eval:function(b){return new a.Paren(this.value.eval(b))}}}(c("../tree")),function(a){a.Quoted=function(a,b,c,d){this.escaped=c,this.value=b||"",this.quote=a.charAt(0),this.index=d},a.Quoted.prototype={toCSS:function(){return this.escaped?this.value:this.quote+this.value+this.quote},eval:function(b){var c=this,d=this.value.replace(/`([^`]+)`/g,function(d,e){return(new a.JavaScript(e,c.index,!0)).eval(b).value}).replace(/@\{([\w-]+)\}/g,function(d,e){var f=(new a.Variable("@"+e,c.index)).eval(b);return"value"in f?f.value:f.toCSS()});return new a.Quoted(this.quote+d+this.quote,d,this.escaped,this.index)}}}(c("../tree")),function(a){a.Rule=function(b,c,d,e,f){this.name=b,this.value=c instanceof a.Value?c:new a.Value([c]),this.important=d?" "+d.trim():"",this.index=e,this.inline=f||!1,b.charAt(0)==="@"?this.variable=!0:this.variable=!1},a.Rule.prototype.toCSS=function(a){return this.variable?"":this.name+(a.compress?":":": ")+this.value.toCSS(a)+this.important+(this.inline?"":";")},a.Rule.prototype.eval=function(b){return new a.Rule(this.name,this.value.eval(b),this.important,this.index,this.inline)},a.Shorthand=function(a,b){this.a=a,this.b=b},a.Shorthand.prototype={toCSS:function(a){return this.a.toCSS(a)+"/"+this.b.toCSS(a)},eval:function(){return this}}}(c("../tree")),function(a){a.Ruleset=function(a,b){this.selectors=a,this.rules=b,this._lookups={}},a.Ruleset.prototype={eval:function(b){var c=this.selectors&&this.selectors.map(function(a){return a.eval(b)}),d=new a.Ruleset(c,this.rules.slice(0));d.root=this.root,d.allowImports=this.allowImports,b.frames.unshift(d);if(d.root||d.allowImports)for(var e=0;e<d.rules.length;e++)d.rules[e]instanceof a.Import&&Array.prototype.splice.apply(d.rules,[e,1].concat(d.rules[e].eval(b)));for(var e=0;e<d.rules.length;e++)d.rules[e]instanceof a.mixin.Definition&&(d.rules[e].frames=b.frames.slice(0));for(var e=0;e<d.rules.length;e++)d.rules[e]instanceof a.mixin.Call&&Array.prototype.splice.apply(d.rules,[e,1].concat(d.rules[e].eval(b)));for(var e=0,f;e<d.rules.length;e++)f=d.rules[e],f instanceof a.mixin.Definition||(d.rules[e]=f.eval?f.eval(b):f);return b.frames.shift(),d},match:function(a){return!a||a.length===0},variables:function(){return this._variables?this._variables:this._variables=this.rules.reduce(function(b,c){return c instanceof a.Rule&&c.variable===!0&&(b[c.name]=c),b},{})},variable:function(a){return this.variables()[a]},rulesets:function(){return this._rulesets?this._rulesets:this._rulesets=this.rules.filter(function(b){return b instanceof a.Ruleset||b instanceof a.mixin.Definition})},find:function(b,c){c=c||this;var d=[],e,f,g=b.toCSS();return g in this._lookups?this._lookups[g]:(this.rulesets().forEach(function(e){if(e!==c)for(var g=0;g<e.selectors.length;g++)if(f=b.match(e.selectors[g])){b.elements.length>e.selectors[g].elements.length?Array.prototype.push.apply(d,e.find(new a.Selector(b.elements.slice(1)),c)):d.push(e);break}}),this._lookups[g]=d)},toCSS:function(b,c){var d=[],e=[],f=[],g=[],h,i;this.root||(b.length===0?g=this.selectors.map(function(a){return[a]}):this.joinSelectors(g,b,this.selectors));for(var j=0;j<this.rules.length;j++)i=this.rules[j],i.rules||i instanceof a.Directive?f.push(i.toCSS(g,c)):i instanceof a.Comment?i.silent||(this.root?f.push(i.toCSS(c)):e.push(i.toCSS(c))):i.toCSS&&!i.variable?e.push(i.toCSS(c)):i.value&&!i.variable&&e.push(i.value.toString());return f=f.join(""),this.root?d.push(e.join(c.compress?"":"\n")):e.length>0&&(h=g.map(function(a){return a.map(function(a){return a.toCSS(c)}).join("").trim()}).join(c.compress?",":",\n"),d.push(h,(c.compress?"{":" {\n  ")+e.join(c.compress?"":"\n  ")+(c.compress?"}":"\n}\n"))),d.push(f),d.join("")+(c.compress?"\n":"")},joinSelectors:function(a,b,c){for(var d=0;d<c.length;d++)this.joinSelector(a,b,c[d])},joinSelector:function(b,c,d){var e=[],f=[],g=[],h=[],i=!1,j;for(var k=0;k<d.elements.length;k++)j=d.elements[k],j.combinator.value.charAt(0)==="&"&&(i=!0),i?h.push(j):g.push(j);i||(h=g,g=[]),g.length>0&&e.push(new a.Selector(g)),h.length>0&&f.push(new a.Selector(h));for(var l=0;l<c.length;l++)b.push(e.concat(c[l]).concat(f))}}}(c("../tree")),function(a){a.Selector=function(a){this.elements=a,this.elements[0].combinator.value===""&&(this.elements[0].combinator.value=" ")},a.Selector.prototype.match=function(a){var b=this.elements.length,c=a.elements.length,d=Math.min(b,c);if(b<c)return!1;for(var e=0;e<d;e++)if(this.elements[e].value!==a.elements[e].value)return!1;return!0},a.Selector.prototype.eval=function(b){return new a.Selector(this.elements.map(function(a){return a.eval(b)}))},a.Selector.prototype.toCSS=function(a){return this._css?this._css:this._css=this.elements.map(function(b){return typeof b=="string"?" "+b.trim():b.toCSS(a)}).join("")}}(c("../tree")),function(b){b.URL=function(b,c){b.data?this.attrs=b:(typeof a!="undefined"&&!/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(b.value)&&c.length>0&&(b.value=c[0]+(b.value.charAt(0)==="/"?b.value.slice(1):b.value)),this.value=b,this.paths=c)},b.URL.prototype={toCSS:function(){return"url("+(this.attrs?"data:"+this.attrs.mime+this.attrs.charset+this.attrs.base64+this.attrs.data:this.value.toCSS())+")"},eval:function(a){return this.attrs?this:new b.URL(this.value.eval(a),this.paths)}}}(c("../tree")),function(a){a.Value=function(a){this.value=a,this.is="value"},a.Value.prototype={eval:function(b){return this.value.length===1?this.value[0].eval(b):new a.Value(this.value.map(function(a){return a.eval(b)}))},toCSS:function(a){return this.value.map(function(b){return b.toCSS(a)}).join(a.compress?",":", ")}}}(c("../tree")),function(a){a.Variable=function(a,b,c){this.name=a,this.index=b,this.file=c},a.Variable.prototype={eval:function(b){var c,d,e=this.name;e.indexOf("@@")==0&&(e="@"+(new a.Variable(e.slice(1))).eval(b).value);if(c=a.find(b.frames,function(a){if(d=a.variable(e))return d.value.eval(b)}))return c;throw{type:"Name",message:"variable "+e+" is undefined",filename:this.file,index:this.index}}}}(c("../tree")),function(a){a.find=function(a,b){for(var c=0,d;c<a.length;c++)if(d=b.call(a,a[c]))return d;return null},a.jsify=function(a){return Array.isArray(a.value)&&a.value.length>1?"["+a.value.map(function(a){return a.toCSS(!1)}).join(", ")+"]":a.toCSS(!1)}}(c("./tree"));var g=location.protocol==="file:"||location.protocol==="chrome:"||location.protocol==="chrome-extension:"||location.protocol==="resource:";d.env=d.env||(location.hostname=="127.0.0.1"||location.hostname=="0.0.0.0"||location.hostname=="localhost"||location.port.length>0||g?"development":"production"),d.async=!1,d.poll=d.poll||(g?1e3:1500),d.watch=function(){return this.watchMode=!0},d.unwatch=function(){return this.watchMode=!1},d.env==="development"?(d.optimization=0,/!watch/.test(location.hash)&&d.watch(),d.watchTimer=setInterval(function(){d.watchMode&&n(function(a,b,c,d,e){b&&r(b.toCSS(),d,e.lastModified)})},d.poll)):d.optimization=3;var h;try{h=typeof a.localStorage=="undefined"?null:a.localStorage}catch(i){h=null}var j=document.getElementsByTagName("link"),k=/^text\/(x-)?less$/;d.sheets=[];for(var l=0;l<j.length;l++)(j[l].rel==="stylesheet/less"||j[l].rel.match(/stylesheet/)&&j[l].type.match(k))&&d.sheets.push(j[l]);d.refresh=function(a){var b,c;b=c=new Date,n(function(a,d,e,f,g){g.local?v("loading "+f.href+" from cache."):(v("parsed "+f.href+" successfully."),r(d.toCSS(),f,g.lastModified)),v("css for "+f.href+" generated in "+(new Date-c)+"ms"),g.remaining===0&&v("css generated in "+(new Date-b)+"ms"),c=new Date},a),m()},d.refreshStyles=m,d.refresh(d.env==="development")})(window);
\ No newline at end of file
diff --git a/wcfsetup/setup/template/header.tpl b/wcfsetup/setup/template/header.tpl
index 93574b6b44..204669b628 100644
--- a/wcfsetup/setup/template/header.tpl
+++ b/wcfsetup/setup/template/header.tpl
@@ -5,7 +5,7 @@
 	<title>{lang}wcf.global.progressBar{/lang} - {lang}wcf.global.pageTitle{/lang}</title>
 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-	<link rel="stylesheet" type="text/css" href="{if $lastStep|isset}{@RELATIVE_WCF_DIR}acp/style/{else}install.php?tmpFilePrefix={@TMP_FILE_PREFIX}&amp;showCSS={/if}wcf.css" />
+	<link rel="stylesheet" type="text/css" href="{if $lastStep|isset}{@RELATIVE_WCF_DIR}acp/style/{else}install.php?tmpFilePrefix={@TMP_FILE_PREFIX}&amp;showCSS={/if}wcf.less" />
 	
 	{if !$lastStep|isset}
 		<style type="text/css">