From 184a8d6d0388491a5b12f1172a0192953b37a071 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 27 Mar 2012 15:51:13 +0200
Subject: [PATCH] Reworked templates, added LESS-based stylesheets

---
 com.woltlab.wcf/template/benchmark.tpl        |    2 +-
 com.woltlab.wcf/template/breadcrumbs.tpl      |    2 +-
 com.woltlab.wcf/template/footer.tpl           |   57 +-
 com.woltlab.wcf/template/headInclude.tpl      |   42 +-
 com.woltlab.wcf/template/header.tpl           |   33 +-
 com.woltlab.wcf/template/mainMenu.tpl         |    4 +-
 com.woltlab.wcf/template/mainMenuSubMenu.tpl  |   12 +-
 wcfsetup/install/files/acp/js/WCF.ACP.js      |   18 +-
 wcfsetup/install/files/acp/style/wcf.css      | 4657 ---------------
 .../files/acp/templates/acpSessionLog.tpl     |   16 +-
 .../files/acp/templates/acpSessionLogList.tpl |   20 +-
 .../install/files/acp/templates/benchmark.tpl |    2 +-
 .../install/files/acp/templates/cacheList.tpl |   27 +-
 .../files/acp/templates/cronjobAdd.tpl        |   51 +-
 .../files/acp/templates/cronjobList.tpl       |   42 +-
 .../files/acp/templates/cronjobLogList.tpl    |   21 +-
 .../install/files/acp/templates/footer.tpl    |   28 +-
 .../install/files/acp/templates/header.tpl    |   62 +-
 .../install/files/acp/templates/login.tpl     |   17 +-
 .../install/files/acp/templates/option.tpl    |   23 +-
 .../files/acp/templates/optionFieldList.tpl   |    2 +-
 .../files/acp/templates/optionImport.tpl      |   31 +-
 .../acp/templates/packageAutoUpdateList.tpl   |   11 +-
 .../files/acp/templates/packageList.tpl       |   24 +-
 .../acp/templates/packageListDetailed.tpl     |   38 +-
 .../acp/templates/packageStartInstall.tpl     |   32 +-
 .../acp/templates/packageUpdateSearch.tpl     |   17 +-
 .../files/acp/templates/updateServerAdd.tpl   |   29 +-
 .../files/acp/templates/updateServerList.tpl  |   32 +-
 .../install/files/acp/templates/userAdd.tpl   |   56 +-
 .../files/acp/templates/userGroupAdd.tpl      |   39 +-
 .../files/acp/templates/userGroupList.tpl     |   32 +-
 .../install/files/acp/templates/userList.tpl  |   35 +-
 .../install/files/acp/templates/userMail.tpl  |   39 +-
 .../files/acp/templates/userSearch.tpl        |   39 +-
 .../acp/templates/usersMassProcessing.tpl     |   53 +-
 .../install/files/js/3rdParty/less.min.js     |    6 +-
 wcfsetup/install/files/js/WCF.js              |  258 +-
 wcfsetup/install/files/style/alerts.less      |   96 +
 wcfsetup/install/files/style/badge.less       |   24 +
 wcfsetup/install/files/style/bbcode.less      |  179 -
 wcfsetup/install/files/style/bootstrap.less   |   34 +
 wcfsetup/install/files/style/breadcrumbs.less |   89 +
 wcfsetup/install/files/style/button.less      |   90 +
 wcfsetup/install/files/style/codebox.less     |  182 +
 wcfsetup/install/files/style/comments.less    |  152 +
 wcfsetup/install/files/style/content.less     |   50 +
 wcfsetup/install/files/style/dialog.less      |   97 +
 wcfsetup/install/files/style/dropdown.less    |  165 +
 wcfsetup/install/files/style/extra/print.css  |  269 -
 wcfsetup/install/files/style/footer.less      |   20 +
 wcfsetup/install/files/style/forms.less       |  192 +
 wcfsetup/install/files/style/import.less      |    5 -
 wcfsetup/install/files/style/inputs.less      |  164 +
 wcfsetup/install/files/style/layout.less      |  233 +
 wcfsetup/install/files/style/logo.less        |   19 +
 wcfsetup/install/files/style/message.less     | 1146 ++--
 wcfsetup/install/files/style/mixins.less      |  101 +
 wcfsetup/install/files/style/navigation.less  |  256 +
 wcfsetup/install/files/style/pagination.less  |   96 +
 wcfsetup/install/files/style/reset.less       |   52 +
 wcfsetup/install/files/style/tabs.less        |  127 +
 wcfsetup/install/files/style/tabular.less     |  186 +
 wcfsetup/install/files/style/tooltip.less     |   43 +
 wcfsetup/install/files/style/user.less        |  399 --
 wcfsetup/install/files/style/userPanel.less   |   65 +
 wcfsetup/install/files/style/variables.less   |   89 +
 wcfsetup/install/files/style/wbb.less         |  270 +
 wcfsetup/install/files/style/wcf.less         | 5051 -----------------
 69 files changed, 3895 insertions(+), 11955 deletions(-)
 delete mode 100644 wcfsetup/install/files/acp/style/wcf.css
 create mode 100644 wcfsetup/install/files/style/alerts.less
 create mode 100644 wcfsetup/install/files/style/badge.less
 delete mode 100755 wcfsetup/install/files/style/bbcode.less
 create mode 100644 wcfsetup/install/files/style/bootstrap.less
 create mode 100644 wcfsetup/install/files/style/breadcrumbs.less
 create mode 100644 wcfsetup/install/files/style/button.less
 create mode 100644 wcfsetup/install/files/style/codebox.less
 create mode 100644 wcfsetup/install/files/style/comments.less
 create mode 100644 wcfsetup/install/files/style/content.less
 create mode 100644 wcfsetup/install/files/style/dialog.less
 create mode 100644 wcfsetup/install/files/style/dropdown.less
 delete mode 100644 wcfsetup/install/files/style/extra/print.css
 create mode 100644 wcfsetup/install/files/style/footer.less
 create mode 100644 wcfsetup/install/files/style/forms.less
 delete mode 100644 wcfsetup/install/files/style/import.less
 create mode 100644 wcfsetup/install/files/style/inputs.less
 create mode 100644 wcfsetup/install/files/style/layout.less
 create mode 100644 wcfsetup/install/files/style/logo.less
 mode change 100755 => 100644 wcfsetup/install/files/style/message.less
 create mode 100644 wcfsetup/install/files/style/mixins.less
 create mode 100644 wcfsetup/install/files/style/navigation.less
 create mode 100644 wcfsetup/install/files/style/pagination.less
 create mode 100644 wcfsetup/install/files/style/reset.less
 create mode 100644 wcfsetup/install/files/style/tabs.less
 create mode 100644 wcfsetup/install/files/style/tabular.less
 create mode 100644 wcfsetup/install/files/style/tooltip.less
 mode change 100755 => 100644 wcfsetup/install/files/style/user.less
 create mode 100644 wcfsetup/install/files/style/userPanel.less
 create mode 100644 wcfsetup/install/files/style/variables.less
 create mode 100644 wcfsetup/install/files/style/wbb.less
 delete mode 100644 wcfsetup/install/files/style/wcf.less

diff --git a/com.woltlab.wcf/template/benchmark.tpl b/com.woltlab.wcf/template/benchmark.tpl
index 046494099d..ce53d47ebf 100644
--- a/com.woltlab.wcf/template/benchmark.tpl
+++ b/com.woltlab.wcf/template/benchmark.tpl
@@ -1,4 +1,4 @@
-<p style="margin-top: 10px; font-size: .85em" id="benchmark">Execution time: {@$__wcf->getBenchmark()->getExecutionTime()}s ({#($__wcf->getBenchmark()->getExecutionTime()-$__wcf->getBenchmark()->getQueryExecutionTime())/$__wcf->getBenchmark()->getExecutionTime()*100}% PHP, {#$__wcf->getBenchmark()->getQueryExecutionTime()/$__wcf->getBenchmark()->getExecutionTime()*100}% SQL) | SQL queries: {#$__wcf->getBenchmark()->getQueryCount()} | Memory-Usage: {$__wcf->getBenchmark()->getMemoryUsage()}</p>
+<p class="marginTop" id="benchmark"><small>Execution time: {@$__wcf->getBenchmark()->getExecutionTime()}s ({#($__wcf->getBenchmark()->getExecutionTime()-$__wcf->getBenchmark()->getQueryExecutionTime())/$__wcf->getBenchmark()->getExecutionTime()*100}% PHP, {#$__wcf->getBenchmark()->getQueryExecutionTime()/$__wcf->getBenchmark()->getExecutionTime()*100}% SQL) | SQL queries: {#$__wcf->getBenchmark()->getQueryCount()} | Memory-Usage: {$__wcf->getBenchmark()->getMemoryUsage()}</small></p>
 
 {if ENABLE_DEBUG_MODE}	
 	<ul id="benchmarkDetails" style="display: none;">
diff --git a/com.woltlab.wcf/template/breadcrumbs.tpl b/com.woltlab.wcf/template/breadcrumbs.tpl
index 8d24b34ac8..d1d7d352bb 100644
--- a/com.woltlab.wcf/template/breadcrumbs.tpl
+++ b/com.woltlab.wcf/template/breadcrumbs.tpl
@@ -1,6 +1,6 @@
 {if !$__microdata|isset}{assign var=__microdata value=true}{/if}
 {if $__wcf->getBreadcrumbs()|count}
-<nav class="wcf-breadcrumbs wcf-marginTop">
+<nav class="breadcrumbs marginTop">
 	<ul>
 		{foreach from=$__wcf->getBreadcrumbs() item=$breadcrumb}
 			<li title="{$breadcrumb->getLabel()}"{if $__microdata} itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"{/if}>
diff --git a/com.woltlab.wcf/template/footer.tpl b/com.woltlab.wcf/template/footer.tpl
index d4a99fd00f..86fd382215 100644
--- a/com.woltlab.wcf/template/footer.tpl
+++ b/com.woltlab.wcf/template/footer.tpl
@@ -1,34 +1,31 @@
-				{if $skipBreadcrumbs|empty}{include file='breadcrumbs' sandbox=false __microdata=false}{/if}
-				
-			</section>
-			<!-- /CONTENT -->
-		</div>
-	</div>
-	<!-- /MAIN -->
-	
-	<!-- FOOTER -->
-	<footer id="pageFooter" class="wcf-pageFooter">
-		<div>
-			<!-- footer navigation -->
-			<nav id="footerNavigation" class="wcf-footerNavigation">
-				{include file='footerMenu'}
-				
-				<ul>
-					<li id="toTopLink" class="toTopLink"><a href="{$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><img src="{icon size='S'}toTop{/icon}" alt="" /> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
-					{if SHOW_CLOCK}
-						<li class="separator"><p><img src="{icon size='S'}time{/icon}" alt="" /> <span>{@TIME_NOW|plainTime}</span></p></li>
-					{/if}
-				</ul>
-			</nav>
-			<!-- /footer navigation -->
+			{if $skipBreadcrumbs|empty}{include file='breadcrumbs' sandbox=false __microdata=false}{/if}
 			
-			{include file='footerMenu'}
-		</div>
+		</section>
+		<!-- /CONTENT -->
+	</div>
+</div>
+<!-- /MAIN -->
+
+<!-- FOOTER -->
+<footer id="pageFooter" class="layoutFluid footer">
+	<!-- footer navigation -->
+	<nav id="footerNavigation" class="navigation navigationFooter clearfix">
+		{include file='footerMenu'}
 		
+		<ul class="navigationIcons">
+			<li id="toTopLink" class="toTopLink"><a href="{$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><img src="{icon size='S'}toTop{/icon}" alt="" class="icon16" /> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
+			{if SHOW_CLOCK}
+				<li class="separator"><p><img src="{icon size='S'}time{/icon}" alt="" class="icon16" /> <span>{@TIME_NOW|plainTime}</span></p></li>
+			{/if}
+		</ul>
+	</nav>
+	<!-- /footer navigation -->
+	
+	<div class="footerContent">
 		{if ENABLE_BENCHMARK}{include file='benchmark'}{/if}
-		
+	
 		{event name='copyright'}
-	</footer>
-	<!-- /FOOTER -->
-	<a id="bottom"></a>
-	
\ No newline at end of file
+	</div>
+</footer>
+<!-- /FOOTER -->
+<a id="bottom"></a>
diff --git a/com.woltlab.wcf/template/headInclude.tpl b/com.woltlab.wcf/template/headInclude.tpl
index be9230c3b9..2b48da69d8 100644
--- a/com.woltlab.wcf/template/headInclude.tpl
+++ b/com.woltlab.wcf/template/headInclude.tpl
@@ -2,20 +2,19 @@
 <meta charset="utf-8" />
 <meta name="description" content="{META_DESCRIPTION}" />
 <meta name="keywords" content="{META_KEYWORDS}" />
-<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
 <script type="text/javascript">
 	//<![CDATA[
 	var SID_ARG_2ND	= '{@SID_ARG_2ND_NOT_ENCODED}';
-	var RELATIVE_WCF_DIR = '{@$__wcf->getPath('wcf')}';
+	var RELATIVE_WCF_DIR = '{@$__wcf->getPath()}';
 	var SECURITY_TOKEN = '{@SECURITY_TOKEN}';
 	//]]>
 </script>
-<script type="text/javascript" src="{@$__wcf->getPath('wcf')}js/3rdParty/jquery.min.js"></script>
-<script type="text/javascript" src="{@$__wcf->getPath('wcf')}js/3rdParty/jquery-ui.min.js"></script>
-<script type="text/javascript" src="{@$__wcf->getPath('wcf')}js/3rdParty/jquery.tools.min.js"></script>
+<script type="text/javascript" src="{@$__wcf->getPath()}js/3rdParty/jquery.min.js"></script>
+<script type="text/javascript" src="{@$__wcf->getPath()}js/3rdParty/jquery-ui.min.js"></script>
+<script type="text/javascript" src="{@$__wcf->getPath()}js/3rdParty/jquery.tools.min.js"></script>
 <script type="text/javascript" src="{@$__wcf->getPath()}js/3rdParty/jquery-ui.nestedSortable.js"></script>
-<script type="text/javascript" src="{@$__wcf->getPath('wcf')}js/WCF.js"></script>
+<script type="text/javascript" src="{@$__wcf->getPath()}js/WCF.js"></script>
 <script type="text/javascript">
 	//<![CDATA[
 	WCF.User.init({@$__wcf->user->userID}, '{@$__wcf->user->username|encodeJS}');
@@ -24,21 +23,18 @@
 {event name='javascriptInclude'}
 
 <!-- Stylesheets -->
-<!-- LESS_FILES
-<link rel="stylesheet/less" type="text/css" media="screen" href="{link controller='LessStylesheets'}{/link}" />
-LESS_FILES -->
+<link rel="stylesheet/less" type="text/css" href="{@$__wcf->getPath()}style/bootstrap.less" />
+<script type="text/javascript">
+	//<![CDATA[
+	var less = { env: 'development' };
+	//]]>
+</script>
 <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;
-	*}
-	
-	{event name='stylesheetImport'}
-</style>
+<script type="text/javascript">
+	//<![CDATA[
+	less.watch();
+	//]]>
+</script>
 
 <noscript>
 	<style type="text/css">
@@ -88,12 +84,14 @@ LESS_FILES -->
 		});
 		
 		new WCF.Date.Time();
-		new WCF.Effect.SmoothScroll();
+		//new WCF.Effect.SmoothScroll();
 		new WCF.Effect.BalloonTooltip();
-		$('<span class="pointer"><span></span></span>').appendTo('.wcf-innerError');
+		$('<span class="pointer"><span></span></span>').appendTo('.innerError');
 		
 		$('#sidebarContent').wcfSidebar();
 		
+		WCF.Dropdown.init();
+		
 		{event name='javascriptInit'}
 	});
 	//]]>
diff --git a/com.woltlab.wcf/template/header.tpl b/com.woltlab.wcf/template/header.tpl
index ebdf6bda96..5fc0e6f2a0 100644
--- a/com.woltlab.wcf/template/header.tpl
+++ b/com.woltlab.wcf/template/header.tpl
@@ -1,30 +1,31 @@
 <a id="top"></a>
 <!-- HEADER -->
-<header id="pageHeader" class="wcf-pageHeader">
+<header id="pageHeader" class="layoutFluid">
 	<div>
 		{hascontent}
 			<!-- top menu -->
-			<nav id="topMenu" class="wcf-topMenu">
-				<div>
-					<ul>
+			<nav id="topMenu" class="userPanel">
+				<div class="layoutFluid clearfix">
+					<ul class="userPanelItems">
 						{content}{event name='topMenu'}{/content}
 					</ul>
+					
+					<!-- search area -->
+					{event name='searchArea'}
+					<!-- /search area -->
 				</div>
 			</nav>
 			<!-- /top menu -->
 		{/hascontent}
 		
 		<!-- logo -->
-		<div id="logo" class="wcf-logo">
+		<div id="logo" class="logo">
 			<!-- clickable area -->
 			<a href="{link controller='Index'}{/link}">
-				{event name='headerLogo'}
+				<img src="{@$__wcf->getPath('wbb')}images/wbbLogo2.svg" alt="" style="height: 80px; width: 300px;" />
+				{*event name='headerLogo'*}
 			</a>
 			<!-- /clickable area -->
-			
-			<!-- search area -->
-			{event name='searchArea'}
-			<!-- /search area -->
 		</div>
 		<!-- /logo -->
 		
@@ -33,12 +34,12 @@
 		<!-- /main menu -->
 		
 		<!-- header navigation -->
-		<nav class="wcf-headerNavigation">
+		<nav class="navigation navigationHeader clearfix">
 			<!-- sub menu -->
 			{include file='mainMenuSubMenu'}
 			
-			<ul>
-				<li id="toBottomLink" class="wcf-toBottomLink"><a href="{$__wcf->getAnchor('bottom')}" title="{lang}wcf.global.scrollDown{/lang}" class="jsTooltip"><img src="{icon size='S'}toBottom{/icon}" alt="" /> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
+			<ul class="navigationIcons">
+				<li id="toBottomLink"><a href="{$__wcf->getAnchor('bottom')}" title="{lang}wcf.global.scrollDown{/lang}" class="jsTooltip"><img src="{icon size='S'}toBottom{/icon}" alt="" class="icon16" /> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
 				{if $headerNavigation|isset}{@$headerNavigation}{/if}
 				{event name='headerNavigation'}
 			</ul>
@@ -49,16 +50,16 @@
 <!-- /HEADER -->
 
 <!-- MAIN -->
-<div id="main" class="wcf-main{if $sidebarOrientation|isset} {@$sidebarOrientation}{/if}">
+<div id="main" class="layoutFluid{if $sidebarOrientation|isset} sidebarOrientation{@$sidebarOrientation|ucfirst} clearfix{/if}">
 	<div>
 		{if $sidebar|isset}
-			<aside class="wcf-sidebar">
+			<aside class="sidebar">
 				{@$sidebar}
 			</aside>
 		{/if}
 				
 		<!-- CONTENT -->
-		<section id="content" class="wcf-content wcf-contentDecor">
+		<section id="content" class="content">
 			
 			{if $skipBreadcrumbs|empty}{include file='breadcrumbs' sandbox=false}{/if}
 			
\ No newline at end of file
diff --git a/com.woltlab.wcf/template/mainMenu.tpl b/com.woltlab.wcf/template/mainMenu.tpl
index db48b45c88..a268c8724a 100644
--- a/com.woltlab.wcf/template/mainMenu.tpl
+++ b/com.woltlab.wcf/template/mainMenu.tpl
@@ -1,8 +1,8 @@
 {if $__wcf->getPageMenu()->getMenuItems('header')|count > 0}
-	<nav id="mainMenu" class="wcf-mainMenu">
+	<nav id="mainMenu" class="mainMenu">
 		<ul>
 			{foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=menuItem}
-				<li{if $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem} class="activeMenuItem"{/if}><a href="{$menuItem->getProcessor()->getLink()}">{lang}{$menuItem->menuItem}{/lang}{if $menuItem->getProcessor()->getNotifications()} <span class="wcf-badge">{#$menuItem->getProcessor()->getNotifications()}</span>{/if}</a></li>
+				<li{if $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem} class="active"{/if}><a href="{$menuItem->getProcessor()->getLink()}">{lang}{$menuItem->menuItem}{/lang}{if $menuItem->getProcessor()->getNotifications()} <span class="badge">{#$menuItem->getProcessor()->getNotifications()}</span>{/if}</a></li>
 			{/foreach}
 		</ul>
 	</nav>
diff --git a/com.woltlab.wcf/template/mainMenuSubMenu.tpl b/com.woltlab.wcf/template/mainMenuSubMenu.tpl
index cbe4a4234a..2f0c05ee21 100644
--- a/com.woltlab.wcf/template/mainMenuSubMenu.tpl
+++ b/com.woltlab.wcf/template/mainMenuSubMenu.tpl
@@ -1,11 +1,9 @@
 {foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=menuItem}
 	{if $__wcf->getPageMenu()->getMenuItems($menuItem->menuItem)|count > 0 && $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem}
-		<div class="wcf-menu">
-			<ul>
-				{foreach from=$__wcf->getPageMenu()->getMenuItems($menuItem->menuItem) item=subMenuItem}
-					<li><a href="{$subMenuItem->getProcessor()->getLink()}" title="{lang}{$subMenuItem->menuItem}{/lang}"><span>{lang}{$subMenuItem->menuItem}{/lang}</span></a>{if $subMenuItem->getProcessor()->getNotifications()} <span class="wcf-badge">{#$subMenuItem->getProcessor()->getNotifications()}</span>{/if}</li>
-				{/foreach}
-			</ul>
-		</div>
+		<ul>
+			{foreach from=$__wcf->getPageMenu()->getMenuItems($menuItem->menuItem) item=subMenuItem}
+				<li><a href="{$subMenuItem->getProcessor()->getLink()}"><span>{lang}{$subMenuItem->menuItem}{/lang}</span></a>{if $subMenuItem->getProcessor()->getNotifications()} <span class="wcf-badge">{#$subMenuItem->getProcessor()->getNotifications()}</span>{/if}</li>
+			{/foreach}
+		</ul>
 	{/if}
 {/foreach}
\ No newline at end of file
diff --git a/wcfsetup/install/files/acp/js/WCF.ACP.js b/wcfsetup/install/files/acp/js/WCF.ACP.js
index 7daa572a40..64d52f00a2 100644
--- a/wcfsetup/install/files/acp/js/WCF.ACP.js
+++ b/wcfsetup/install/files/acp/js/WCF.ACP.js
@@ -34,7 +34,7 @@ WCF.ACP.Menu.prototype = {
 	 * Resets all elements and binds event listeners.
 	 */
 	_prepareElements: function(activeMenuItems) {
-		this._headerNavigation.find('li').removeClass('activeMenuItem');
+		this._headerNavigation.find('li').removeClass('active');
 		
 		this._sidebarNavigation.find('div h1').each($.proxy(function(index, menuHeader) {
 			$(menuHeader).click($.proxy(this._toggleItem, this));
@@ -61,7 +61,7 @@ WCF.ACP.Menu.prototype = {
 	_toggleItem: function(event) {
 		var $menuItem = $(event.target);
 		
-		$menuItem.next().stop(true, true).toggle('blind', { }, 200).end().toggleClass('activeMenuItem');
+		$menuItem.next().stop(true, true).toggle('blind', { }, 200).end().toggleClass('active');
 	},
 	
 	/**
@@ -72,7 +72,7 @@ WCF.ACP.Menu.prototype = {
 	_toggleSidebar: function(event) {
 		var $target = $(event.target).parent();
 		
-		if ($target.hasClass('activeMenuItem')) {
+		if ($target.hasClass('active')) {
 			return;
 		}
 		
@@ -90,19 +90,19 @@ WCF.ACP.Menu.prototype = {
 	 */
 	_renderSidebar: function(menuItem, activeMenuItems) {
 		// reset visible and active items
-		this._headerNavigation.find('li').removeClass('activeMenuItem');
-		this._sidebarNavigation.find('div.wcf-menuContainer').hide();
+		this._headerNavigation.find('li').removeClass('active');
+		this._sidebarNavigation.find('div.menuGroup').hide();
 		
 		if (activeMenuItems.length === 0) {
 			// show active menu
-			this._headerNavigation.find('li[data-menu-item="' + menuItem + '"]').addClass('activeMenuItem');
+			this._headerNavigation.find('li[data-menu-item="' + menuItem + '"]').addClass('active');
 			this._sidebarNavigation.find('div[data-parent-menu-item="' + menuItem + '"]').show();
 		}
 		else {
 			// open menu by active menu items, first element is always a head navigation item
 			menuItem = activeMenuItems.shift();
 			
-			this._headerNavigation.find('li[data-menu-item="' + menuItem + '"]').addClass('activeMenuItem');
+			this._headerNavigation.find('li[data-menu-item="' + menuItem + '"]').addClass('active');
 			this._sidebarNavigation.find('div[data-parent-menu-item="' + menuItem + '"]').show();
 			
 			for (var $i = 0, $size = activeMenuItems.length; $i < $size; $i++) {
@@ -112,10 +112,10 @@ WCF.ACP.Menu.prototype = {
 					var $menuItem = $('#' + $.wcfEscapeID($item));
 					
 					if ($menuItem.getTagName() === 'ul') {
-						$menuItem.parent('div').show().prev().addClass('activeMenuItem');
+						$menuItem.parent('div').show().prev().addClass('active');
 					}
 					else {
-						$menuItem.addClass('activeMenuItem');
+						$menuItem.addClass('active');
 					}
 				}
 			}
diff --git a/wcfsetup/install/files/acp/style/wcf.css b/wcfsetup/install/files/acp/style/wcf.css
deleted file mode 100644
index e55ebd979b..0000000000
--- a/wcfsetup/install/files/acp/style/wcf.css
+++ /dev/null
@@ -1,4657 +0,0 @@
-/**
- * #################################################################
- * ### CAUTION: This stylesheet applies to WCFSetup only, please ###
- * ###		see wcf.less for the general stylesheet!	         ###
- * #################################################################
- */
-
-/**
- * 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;
-}
-
-fieldset ~ .wcf-tabMenuContainer .wcf-tabMenu {
-	margin-top: 30px;
-}
-
-/* -- -- -- 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);
-	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-dialogContent a {
-	color: #69c;
-}
-
-.wcf-dialogContent a:hover {
-	color: #fff;
-}
-
-.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) ############## */
-
-
-
-
-/* ############## 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/acpSessionLog.tpl b/wcfsetup/install/files/acp/templates/acpSessionLog.tpl
index 666d355f24..89e7bc2252 100644
--- a/wcfsetup/install/files/acp/templates/acpSessionLog.tpl
+++ b/wcfsetup/install/files/acp/templates/acpSessionLog.tpl
@@ -1,23 +1,23 @@
 {include file='header'}
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/session1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/session1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.sessionLog.access.list{/lang}</h1>
 	</hgroup>
 </header>
 
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
 	{pages print=true assign=pagesLinks controller='ACPSessionLog' id=$sessionLogID link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}
 </div>
 
 {hascontent}
-	<div class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
+	<div class="tabularBox tabularBoxTitle marginTop shadow">
 		<hgroup>
-			<h1>{lang}wcf.acp.sessionLog.access.list{/lang} <span class="wcf-badge" title="{lang}wcf.acp.sessionLog.access.list.count{/lang}">{#$items}</span></h1>
+			<h1>{lang}wcf.acp.sessionLog.access.list{/lang} <span class="badge" title="{lang}wcf.acp.sessionLog.access.list.count{/lang}">{#$items}</span></h1>
 		</hgroup>
 		
-		<table class="wcf-table">
+		<table class="table">
 			<thead>
 				<tr>
 					<th class="columnID columnSessionAccessLogID{if $sortField == 'sessionAccessLogID'} active{/if}"><a href="{link controller='ACPSessionLog' id=$sessionLogID}pageNo={@$pageNo}&sortField=sessionAccessLogID&sortOrder={if $sortField == 'sessionAccessLogID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'sessionAccessLogID'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
@@ -53,7 +53,7 @@
 		
 	</div>
 
-	<div class="wcf-contentFooter">
+	<div class="contentNavigation">
 		{@$pagesLinks}
 	</div>
 {/hascontent}
diff --git a/wcfsetup/install/files/acp/templates/acpSessionLogList.tpl b/wcfsetup/install/files/acp/templates/acpSessionLogList.tpl
index 278a5e2de4..f7069949f7 100644
--- a/wcfsetup/install/files/acp/templates/acpSessionLogList.tpl
+++ b/wcfsetup/install/files/acp/templates/acpSessionLogList.tpl
@@ -1,23 +1,23 @@
 {include file='header'}
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/session1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/session1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.sessionLog.list{/lang}</h1>
 	</hgroup>
 </header>
 
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
 	{pages print=true assign=pagesLinks controller="ACPSessionLogList" link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}
 </div>
 
 {hascontent}
-	<div class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
+	<div class="tabularBox tabularBoxTitle marginTop shadow">
 		<hgroup>
-			<h1>{lang}wcf.acp.sessionLog.list{/lang} <span class="wcf-badge" title="{lang}wcf.acp.sessionLog.list.count{/lang}">{#$items}</span></h1>
+			<h1>{lang}wcf.acp.sessionLog.list{/lang} <span class="badge" title="{lang}wcf.acp.sessionLog.list.count{/lang}">{#$items}</span></h1>
 		</hgroup>
 		
-		<table class="wcf-table">
+		<table class="table">
 			<thead>
 				<tr>
 					<th class="columnSessionLogID{if $sortField == 'sessionLogID'} active{/if}"><a href="{link controller='ACPSessionLogList'}pageNo={@$pageNo}&sortField=sessionLogID&sortOrder={if $sortField == 'sessionLogID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'sessionLogID'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
@@ -37,7 +37,7 @@
 					{foreach from=$objects item=sessionLog}
 						<tr class="{if $sessionLog->active} activeContainer{/if}">
 							<td class="columnID columnSessionLogID"><p>{@$sessionLog->sessionLogID}</p></td>
-							<td class="columnTitle columnUsername"><p>{if $__wcf->user->userID == $sessionLog->userID}<img src="{@$__wcf->getPath()}icon/user1.svg" alt="" />{/if} <a href="{link controller='ACPSessionLog' id=$sessionLog->sessionLogID}{/link}">{$sessionLog->username}</a></p></td>
+							<td class="columnTitle columnUsername"><p>{if $__wcf->user->userID == $sessionLog->userID}<img src="{@$__wcf->getPath()}icon/user1.svg" alt="" class="icon16" />{/if} <a href="{link controller='ACPSessionLog' id=$sessionLog->sessionLogID}{/link}">{$sessionLog->username}</a></p></td>
 							<td class="columnURL columnIpAddress"><p><a href="{link controller='ACPSessionLog' id=$sessionLog->sessionLogID}{/link}">{$sessionLog->ipAddress}</a>{if $sessionLog->hostname != $sessionLog->ipAddress}<br /><a href="{link controller='ACPSessionLog' id=$sessionLog->sessionLogID}{/link}">{$sessionLog->hostname}</a>{/if}</p></td>
 							<td class="columnText columnUserAgent"><p><a href="{link controller='ACPSessionLog' id=$sessionLog->sessionLogID}{/link}">{$sessionLog->userAgent}</a></p></td>
 							<td class="columnDate columnTime"><p>{@$sessionLog->time|time}</p></td>
@@ -52,8 +52,8 @@
 		</table>
 		
 	</div>
-
-	<div class="wcf-contentFooter">
+	
+	<div class="contentNavigation">
 		{@$pagesLinks}
 	</div>
 {/hascontent}
diff --git a/wcfsetup/install/files/acp/templates/benchmark.tpl b/wcfsetup/install/files/acp/templates/benchmark.tpl
index e7ee9fc38a..ce53d47ebf 100644
--- a/wcfsetup/install/files/acp/templates/benchmark.tpl
+++ b/wcfsetup/install/files/acp/templates/benchmark.tpl
@@ -1,4 +1,4 @@
-<p id="benchmark" class="wcf-marginTop" style="font-size: .85em">Execution time: {@$__wcf->getBenchmark()->getExecutionTime()}s ({#($__wcf->getBenchmark()->getExecutionTime()-$__wcf->getBenchmark()->getQueryExecutionTime())/$__wcf->getBenchmark()->getExecutionTime()*100}% PHP, {#$__wcf->getBenchmark()->getQueryExecutionTime()/$__wcf->getBenchmark()->getExecutionTime()*100}% SQL) | SQL queries: {#$__wcf->getBenchmark()->getQueryCount()} | Memory-Usage: {$__wcf->getBenchmark()->getMemoryUsage()}</p>
+<p class="marginTop" id="benchmark"><small>Execution time: {@$__wcf->getBenchmark()->getExecutionTime()}s ({#($__wcf->getBenchmark()->getExecutionTime()-$__wcf->getBenchmark()->getQueryExecutionTime())/$__wcf->getBenchmark()->getExecutionTime()*100}% PHP, {#$__wcf->getBenchmark()->getQueryExecutionTime()/$__wcf->getBenchmark()->getExecutionTime()*100}% SQL) | SQL queries: {#$__wcf->getBenchmark()->getQueryCount()} | Memory-Usage: {$__wcf->getBenchmark()->getMemoryUsage()}</small></p>
 
 {if ENABLE_DEBUG_MODE}	
 	<ul id="benchmarkDetails" style="display: none;">
diff --git a/wcfsetup/install/files/acp/templates/cacheList.tpl b/wcfsetup/install/files/acp/templates/cacheList.tpl
index de4596d635..25b0b9bfba 100644
--- a/wcfsetup/install/files/acp/templates/cacheList.tpl
+++ b/wcfsetup/install/files/acp/templates/cacheList.tpl
@@ -12,15 +12,15 @@
 	//]]>
 </script>
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/cache1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/cache1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.cache.list{/lang}</h1>
 	</hgroup>
 </header>
 
 {if $cleared}
-	<p class="wcf-success">{lang}wcf.acp.cache.clear.success{/lang}</p>	
+	<p class="success">{lang}wcf.acp.cache.clear.success{/lang}</p>	
 {/if}
 
 <fieldset>
@@ -48,10 +48,10 @@
 	{event name='dataFields'}
 </fieldset>
 
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
 	<nav>
-		<ul class="wcf-largeButtons">
-			{if $cacheData.files}<li><a onclick="return confirm('{lang}wcf.acp.cache.clear.sure{/lang}')" href="{link controller='CacheClear'}{/link}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" /> <span>{lang}wcf.acp.cache.button.clear{/lang}</span></a></li>{/if}
+		<ul>
+			{if $cacheData.files}<li><a onclick="return confirm('{lang}wcf.acp.cache.clear.sure{/lang}')" href="{link controller='CacheClear'}{/link}" class="button"><img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.cache.button.clear{/lang}</span></a></li>{/if}
 			
 			{event name='largeButtons'}
 		</ul>
@@ -61,13 +61,12 @@
 {foreach from=$caches key=cache item=files}
 	{counter name=cacheIndex assign=cacheIndex print=false start=0}
 	{if $files|count}
-		<div class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
-			<a class="jsCollapsible" data-is-open="0" data-collapsible-container="cache{@$cacheIndex}"><img src="{@$__wcf->getPath()}icon/closed2.svg" alt="" title="{lang}wcf.global.button.collapsible{/lang}" class="jsTooltip" /></a>
+		<div class="tabularBox tabularBoxTitle marginTop shadow">
 			<hgroup>
-				<h1>{$cache} <span class="wcf-badge" title="{lang}wcf.acp.cache.data.files.count{/lang}">{#$files|count}</span></h1>
+				<h1><a class="jsCollapsible" data-is-open="0" data-collapsible-container="cache{@$cacheIndex}"><img src="{@$__wcf->getPath()}icon/closed2.svg" alt="" title="{lang}wcf.global.button.collapsible{/lang}" class="icon16 jsTooltip" /></a> {$cache} <span class="wcf-badge" title="{lang}wcf.acp.cache.data.files.count{/lang}">{#$files|count}</span></h1>
 			</hgroup>
 			
-			<table id="cache{@$cacheIndex}" style="display: none;" class="wcf-table">
+			<table id="cache{@$cacheIndex}" style="display: none;" class="table">
 				<thead>
 					<tr>
 						<th class="columnTitle">{lang}wcf.acp.cache.list.name{/lang}</th>
@@ -97,10 +96,10 @@
 	{/if}
 {/foreach}
 
-<div class="wcf-contentFooter">
+<div class="contentNavigation">
 	<nav>
-		<ul class="wcf-largeButtons">
-			{if $cacheData.files}<li><a onclick="return confirm('{lang}wcf.acp.cache.clear.sure{/lang}')" href="{link controller='CacheClear'}{/link}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" /> <span>{lang}wcf.acp.cache.button.clear{/lang}</span></a></li>{/if}
+		<ul>
+			{if $cacheData.files}<li><a onclick="return confirm('{lang}wcf.acp.cache.clear.sure{/lang}')" href="{link controller='CacheClear'}{/link}" class="button"><img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.cache.button.clear{/lang}</span></a></li>{/if}
 			
 			{event name='largeButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/cronjobAdd.tpl b/wcfsetup/install/files/acp/templates/cronjobAdd.tpl
index 7b4a6f3a65..f32ceb0ade 100644
--- a/wcfsetup/install/files/acp/templates/cronjobAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/cronjobAdd.tpl
@@ -1,29 +1,29 @@
 {include file='header'}
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/{$action}1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/{$action}1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.cronjob.{$action}{/lang}</h1>
 		<h2>{lang}wcf.acp.cronjob.subtitle{/lang}</h2>
 	</hgroup>
 </header>
 
 {if $errorField}
-	<p class="wcf-error">{lang}wcf.global.form.error{/lang}</p>
+	<p class="error">{lang}wcf.global.form.error{/lang}</p>
 {/if}
 
-<p class="wcf-info">{lang}wcf.acp.cronjob.intro{/lang}</p>
+<p class="info">{lang}wcf.acp.cronjob.intro{/lang}</p>
 
 {if $success|isset}
-	<p class="wcf-success">{lang}wcf.global.form.{$action}.success{/lang}</p>	
+	<p class="success">{lang}wcf.global.form.{$action}.success{/lang}</p>	
 {/if}
 
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
 	<nav>
-		<ul class="wcf-largeButtons">
-			<li><a href="{link controller='CronjobList'}{/link}" title="{lang}wcf.acp.menu.link.cronjob.list{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/time1.svg" alt="" /> <span>{lang}wcf.acp.menu.link.cronjob.list{/lang}</span></a></li>
+		<ul>
+			<li><a href="{link controller='CronjobList'}{/link}" title="{lang}wcf.acp.menu.link.cronjob.list{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/time1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.menu.link.cronjob.list{/lang}</span></a></li>
 			{if $action == 'edit'}
-				<li><a href="{link controller='CronjobExecute' id=$cronjobID}{/link}" title="{lang}wcf.acp.cronjob.execute{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/run1.svg" alt="" /> <span>{lang}wcf.acp.cronjob.execute{/lang}</span></a></li>
+				<li><a href="{link controller='CronjobExecute' id=$cronjobID}{/link}" title="{lang}wcf.acp.cronjob.execute{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/run1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.cronjob.execute{/lang}</span></a></li>
 			{/if}
 			
 			{event name='largeButtons'}
@@ -32,17 +32,16 @@
 </div>
 
 <form method="post" action="{if $action == 'add'}{link controller='CronjobAdd'}{/link}{else}{link controller='CronjobEdit'}{/link}{/if}">
-	<div class="wcf-box wcf-marginTop wcf-boxPadding wcf-boxDecor wcf-shadow1">
-		
+	<div class="container containerPadding marginTop shadow">
 		<fieldset>
 			<legend>{lang}wcf.acp.cronjob.data{/lang}</legend>
 			
-			<dl{if $errorField == 'className'} class="wcf-formError"{/if}>
+			<dl{if $errorField == 'className'} class="formError"{/if}>
 				<dt><label for="className">{lang}wcf.acp.cronjob.className{/lang}</label></dt>
 				<dd>
 					<input type="text" id="className" name="className" value="{$className}" required="required" autofocus="autofocus" pattern="^\\?([a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*\\)*[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*$" class="long" />
 					{if $errorField == 'className'}
-						<small class="wcf-innerError">
+						<small class="innerError">
 							{if $errorType == 'empty'}
 								{lang}wcf.global.form.error.empty{/lang}
 							{else}
@@ -66,12 +65,12 @@
 		<fieldset>
 			<legend>{lang}wcf.acp.cronjob.timing{/lang}</legend>
 			
-			<dl{if $errorField == 'startMinute'} class="wcf-formError"{/if}>
+			<dl{if $errorField == 'startMinute'} class="formError"{/if}>
 				<dt><label for="startMinute">{lang}wcf.acp.cronjob.startMinute{/lang}</label></dt>
 				<dd>
 					<input type="text" id="startMinute" name="startMinute" value="{$startMinute}" class="short" />
 					{if $errorField == 'startMinute'}
-						<small class="wcf-innerError">
+						<small class="innerError">
 							{lang}wcf.acp.cronjob.timing.error.{@$errorType}{/lang}
 						</small>
 					{/if}
@@ -79,12 +78,12 @@
 				</dd>
 			</dl>
 			
-			<dl{if $errorField == 'startHour'} class="wcf-formError"{/if}>
+			<dl{if $errorField == 'startHour'} class="formError"{/if}>
 				<dt><label for="startHour">{lang}wcf.acp.cronjob.startHour{/lang}</label></dt>
 				<dd>
 					<input type="text" id="startHour" name="startHour" value="{$startHour}" class="short" />
 					{if $errorField == 'startHour'}
-						<small class="wcf-innerError">
+						<small class="innerError">
 							{lang}wcf.acp.cronjob.timing.error.{@$errorType}{/lang}
 						</small>
 					{/if}
@@ -92,12 +91,12 @@
 				</dd>
 			</dl>
 			
-			<dl{if $errorField == 'startDom'} class="wcf-formError"{/if}>
+			<dl{if $errorField == 'startDom'} class="formError"{/if}>
 				<dt><label for="startDom">{lang}wcf.acp.cronjob.startDom{/lang}</label></dt>
 				<dd>
 					<input type="text" id="startDom" name="startDom" value="{$startDom}" class="short" />
 					{if $errorField == 'startDom'}
-						<small class="wcf-innerError">
+						<small class="innerError">
 							{lang}wcf.acp.cronjob.timing.error.{@$errorType}{/lang}
 						</small>
 					{/if}
@@ -105,12 +104,12 @@
 				</dd>
 			</dl>
 			
-			<dl{if $errorField == 'startMonth'} class="wcf-formError"{/if}>
+			<dl{if $errorField == 'startMonth'} class="formError"{/if}>
 				<dt><label for="startMonth">{lang}wcf.acp.cronjob.startMonth{/lang}</label></dt>
 				<dd>
 					<input type="text" id="startMonth" name="startMonth" value="{$startMonth}" class="short" />
 					{if $errorField == 'startMonth'}
-						<small class="wcf-innerError">
+						<small class="innerError">
 							{lang}wcf.acp.cronjob.timing.error.{@$errorType}{/lang}
 						</small>
 					{/if}
@@ -118,12 +117,12 @@
 				</dd>
 			</dl>
 			
-			<dl{if $errorField == 'startDow'} class="wcf-formError"{/if}>
+			<dl{if $errorField == 'startDow'} class="formError"{/if}>
 				<dt><label for="startDow">{lang}wcf.acp.cronjob.startDow{/lang}</label></dt>
 				<dd>
 					<input type="text" id="startDow" name="startDow" value="{$startDow}" class="short" />
 					{if $errorField == 'startDow'}
-						<small class="wcf-innerError">
+						<small class="innerError">
 							{lang}wcf.acp.cronjob.timing.error.{@$errorType}{/lang}
 						</small>
 					{/if}
@@ -137,10 +136,8 @@
 		{event name='fieldsets'}
 	</div>
 	
-	<div class="wcf-formSubmit">
-		<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
+	<div class="formSubmit">
 		<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
-		{@SID_INPUT_TAG}
  		{if $cronjobID|isset}<input type="hidden" name="id" value="{@$cronjobID}" />{/if}
 	</div>
 </form>
diff --git a/wcfsetup/install/files/acp/templates/cronjobList.tpl b/wcfsetup/install/files/acp/templates/cronjobList.tpl
index 340df573aa..b3a6d33d34 100644
--- a/wcfsetup/install/files/acp/templates/cronjobList.tpl
+++ b/wcfsetup/install/files/acp/templates/cronjobList.tpl
@@ -1,8 +1,8 @@
 {include file='header'}
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/time1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/time1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.cronjob.list{/lang}</h1>
 		<h2>{lang}wcf.acp.cronjob.subtitle{/lang}</h2>
 	</hgroup>
@@ -34,15 +34,15 @@
 	</script>
 </header>
 
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
 	{pages print=true assign=pagesLinks controller="CronjobList" link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}
 	
 	{hascontent}
 		<nav>
-			<ul class="wcf-largeButtons">
+			<ul>
 				{content}
 					{if $__wcf->session->getPermission('admin.system.cronjob.canAddCronjob')}
-						<li><a href="{link controller='CronjobAdd'}{/link}" title="{lang}wcf.acp.cronjob.add{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.cronjob.add{/lang}</span></a></li>
+						<li><a href="{link controller='CronjobAdd'}{/link}" title="{lang}wcf.acp.cronjob.add{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.cronjob.add{/lang}</span></a></li>
 					{/if}
 
 					{event name='largeButtons'}
@@ -53,12 +53,12 @@
 </div>
 
 {hascontent}
-	<div class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
+	<div class="tabularBox tabularBoxTitle marginTop shadow">
 		<hgroup>
-			<h1>{lang}wcf.acp.cronjob.list{/lang} <span class="wcf-badge" title="{lang}wcf.acp.cronjob.list.count{/lang}">{#$items}</span></h1>
+			<h1>{lang}wcf.acp.cronjob.list{/lang} <span class="badge" title="{lang}wcf.acp.cronjob.list.count{/lang}">{#$items}</span></h1>
 		</hgroup>
 		
-		<table class="wcf-table">
+		<table class="table">
 			<thead>
 				<tr>
 					<th class="columnID columnCronjobID{if $sortField == 'cronjobID'} active{/if}" colspan="2"><a href="{link controller='CronjobList'}pageNo={@$pageNo}&sortField=cronjobID&sortOrder={if $sortField == 'cronjobID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'cronjobID'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
@@ -80,30 +80,30 @@
 						<tr class="jsCronjobRow">
 							<td class="columnIcon">
 								{if $__wcf->session->getPermission('admin.system.cronjob.canEditCronjob')}
-									<img src="{@$__wcf->getPath()}icon/run1.svg" alt="" title="{lang}wcf.acp.cronjob.execute{/lang}" class="jsExecuteButton jsTooltip" data-object-id="{@$cronjob->cronjobID}" />
+									<img src="{@$__wcf->getPath()}icon/run1.svg" alt="" title="{lang}wcf.acp.cronjob.execute{/lang}" class="icon16 jsExecuteButton jsTooltip" data-object-id="{@$cronjob->cronjobID}" />
 								{else}
-									<img src="{@$__wcf->getPath()}icon/run1D.svg" alt="" title="{lang}wcf.acp.cronjob.execute{/lang}" />
+									<img src="{@$__wcf->getPath()}icon/run1D.svg" alt="" title="{lang}wcf.acp.cronjob.execute{/lang}" class="icon16" />
 								{/if}
 						
 								{if $cronjob->canBeDisabled()}
-									<img src="{@$__wcf->getPath()}icon/{if $cronjob->active}enabled{else}disabled{/if}1.svg" alt="" title="{lang}wcf.global.button.{if $cronjob->active}disable{else}enable{/if}{/lang}" class="jsToggleButton jsTooltip" data-object-id="{@$cronjob->cronjobID}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" />
+									<img src="{@$__wcf->getPath()}icon/{if $cronjob->active}enabled{else}disabled{/if}1.svg" alt="" title="{lang}wcf.global.button.{if $cronjob->active}disable{else}enable{/if}{/lang}" class="icon16 jsToggleButton jsTooltip" data-object-id="{@$cronjob->cronjobID}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" />
 								{else}
 									{if $cronjob->active}
-										<img src="{@$__wcf->getPath()}icon/enabled1D.svg" alt="" title="{lang}wcf.global.button.disable{/lang}" />
+										<img src="{@$__wcf->getPath()}icon/enabled1D.svg" alt="" title="{lang}wcf.global.button.disable{/lang}" class="icon16" />
 									{else}
-										<img src="{@$__wcf->getPath()}icon/disabled1D.svg" alt="" title="{lang}wcf.global.button.enable{/lang}" />
+										<img src="{@$__wcf->getPath()}icon/disabled1D.svg" alt="" title="{lang}wcf.global.button.enable{/lang}" class="icon16" />
 									{/if}
 								{/if}
 						
 								{if $cronjob->isEditable()}
-									<a href="{link controller='CronjobEdit' id=$cronjob->cronjobID}{/link}"><img src="{@$__wcf->getPath()}icon/edit1.svg" alt="" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip" /></a>
+									<a href="{link controller='CronjobEdit' id=$cronjob->cronjobID}{/link}"><img src="{@$__wcf->getPath()}icon/edit1.svg" alt="" title="{lang}wcf.global.button.edit{/lang}" class="icon16 jsTooltip" /></a>
 								{else}
-									<img src="{@$__wcf->getPath()}icon/edit1D.svg" alt="" title="{lang}wcf.global.button.edit{/lang}" />
+									<img src="{@$__wcf->getPath()}icon/edit1D.svg" alt="" title="{lang}wcf.global.button.edit{/lang}" class="icon16" />
 								{/if}
 								{if $cronjob->isDeletable()}
-									<img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" class="jsDeleteButton jsTooltip" data-object-id="{@$cronjob->cronjobID}" data-confirm-message="{lang}wcf.acp.cronjob.delete.sure{/lang}" />
+									<img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" class="icon16 jsDeleteButton jsTooltip" data-object-id="{@$cronjob->cronjobID}" data-confirm-message="{lang}wcf.acp.cronjob.delete.sure{/lang}" />
 								{else}
-									<img src="{@$__wcf->getPath()}icon/delete1D.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" />
+									<img src="{@$__wcf->getPath()}icon/delete1D.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" class="icon16" />
 								{/if}
 								
 								{event name='buttons'}
@@ -136,20 +136,20 @@
 		
 	</div>
 	
-	<div class="wcf-contentFooter">
+	<div class="contentNavigation">
 		{@$pagesLinks}
 		
 		{* todo: add large button event *}
 		{if $__wcf->session->getPermission('admin.system.cronjob.canAddCronjob')}
 			<nav>
 				<ul class="wcf-largeButtons">
-					<li><a href="{link controller='CronjobAdd'}{/link}" title="{lang}wcf.acp.cronjob.add{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.cronjob.add{/lang}</span></a></li>
+					<li><a href="{link controller='CronjobAdd'}{/link}" title="{lang}wcf.acp.cronjob.add{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.cronjob.add{/lang}</span></a></li>
 				</ul>
 			</nav>
 		{/if}
 	</div>
 {hascontentelse}
-	<p class="wcf-warning">{lang}wcf.acp.cronjob.noneAvailable{/lang}</p>
+	<p class="warning">{lang}wcf.acp.cronjob.noneAvailable{/lang}</p>
 {/hascontent}
 
 {include file='footer'}
diff --git a/wcfsetup/install/files/acp/templates/cronjobLogList.tpl b/wcfsetup/install/files/acp/templates/cronjobLogList.tpl
index d9dc1ef67b..31e6c2525b 100644
--- a/wcfsetup/install/files/acp/templates/cronjobLogList.tpl
+++ b/wcfsetup/install/files/acp/templates/cronjobLogList.tpl
@@ -1,25 +1,25 @@
 {include file='header'}
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/time1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/time1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.cronjob.log{/lang}</h1>
 		<h2>{lang}wcf.acp.cronjob.subtitle{/lang}</h2>
 	</hgroup>
 </header>
 
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
 	{pages print=true assign=pagesLinks controller="CronjobLogList" link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}
 </div>
 
 {hascontent}
 	<form method="post" action="{link controller='CronjobLogDelete'}{/link}">
-		<div class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
+		<div class="tabularBox tabularBoxTitle marginTop shadow">
 			<hgroup>
-				<h1>{lang}wcf.acp.cronjob.log{/lang} <span class="wcf-badge" title="{lang}wcf.acp.cronjob.log.count{/lang}">{#$items}</span></h1>
+				<h1>{lang}wcf.acp.cronjob.log{/lang} <span class="badge" title="{lang}wcf.acp.cronjob.log.count{/lang}">{#$items}</span></h1>
 			</hgroup>
 			
-			<table class="wcf-table">
+			<table class="table">
 				<thead>
 					<tr>
 						<th class="columnID columnCronjobID{if $sortField == 'cronjobID'} active{/if}"><a href="{link controller='CronjobLogList'}pageNo={@$pageNo}&sortField=cronjobID&sortOrder={if $sortField == 'cronjobID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'cronjobID'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
@@ -58,17 +58,16 @@
 			
 		</div>
 		
-		<div class="wcf-formSubmit">
-			{@SID_INPUT_TAG}
+		<div class="formSubmit">
 			<input type="submit" onclick="return confirm('{lang}wcf.acp.cronjob.log.clear.confirm{/lang}')" value="{lang}wcf.acp.cronjob.log.clear{/lang}" accesskey="c" />
 		</div>
 	</form>
 	
-	<div class="wcf-contentFooter">
+	<div class="contentNavigation">
 		{@$pagesLinks}
 	</div>
 {hascontentelse}
-	<p class="wcf-info">{lang}wcf.acp.cronjob.log.noEntries{/lang}</p>
+	<p class="info">{lang}wcf.acp.cronjob.log.noEntries{/lang}</p>
 {/hascontent}
 
 {include file='footer'}
diff --git a/wcfsetup/install/files/acp/templates/footer.tpl b/wcfsetup/install/files/acp/templates/footer.tpl
index fd57e301f5..051650bd3a 100644
--- a/wcfsetup/install/files/acp/templates/footer.tpl
+++ b/wcfsetup/install/files/acp/templates/footer.tpl
@@ -5,21 +5,21 @@
 	<!-- /MAIN -->
 	
 	<!-- FOOTER -->
-	<footer id="pageFooter" class="wcf-pageFooter">
-		<div>
-			<nav id="footerNavigation" class="wcf-footerNavigation">
-				<ul>
-					<li id="toTopLink" class="toTopLink"><a href="{$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><img src="{@$__wcf->getPath()}icon/toTop.svg" alt="" /> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
-					{if PACKAGE_ID && SHOW_CLOCK}
-						<li class="separator"><p><img src="{@$__wcf->getPath()}icon/time.svg" alt="" /> <span>{@TIME_NOW|plainTime}</span></p></li>
-					{/if}
-				</ul>
-			</nav>
-		</div>
-		
-		{if PACKAGE_ID && ENABLE_BENCHMARK}{include file='benchmark' sandbox=false}{/if}
+	<footer id="pageFooter" class="layoutFluid footer">
+		<nav id="footerNavigation" class="navigation navigationFooter clearfix">
+			<ul class="navigationIcons">
+				<li id="toTopLink" class="toTopLink"><a href="{$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><img src="{@$__wcf->getPath()}icon/toTop.svg" alt="" class="icon16" /> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
+				{if PACKAGE_ID && SHOW_CLOCK}
+					<li class="separator"><p><img src="{@$__wcf->getPath()}icon/time.svg" alt="" class="icon16" /> <span>{@TIME_NOW|plainTime}</span></p></li>
+				{/if}
+			</ul>
+		</nav>
 		
-		<address class="wcf-copyright"><a href="http://www.woltlab.com" title="Go to the WoltLab website">Copyright &copy; 2001-2012 WoltLab&reg; GmbH</a></address>
+		<div class="footerContent">
+			{if PACKAGE_ID && ENABLE_BENCHMARK}{include file='benchmark' sandbox=false}{/if}
+			
+			<address class="copyright marginTop"><a href="http://www.woltlab.com" title="Go to the WoltLab website">Copyright &copy; 2001-2012 WoltLab&reg; GmbH</a></address>
+		</div>
 	</footer>
 	<!-- /FOOTER -->
 	<a id="bottom"></a>
diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 420e573eb8..416a366554 100644
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -28,20 +28,18 @@
 	{event name='javascriptInclude'}
 	
 	<!-- Stylesheets -->
-	
-	<!-- LESS_FILES
-	<link rel="stylesheet/less" type="text/css" media="screen" href="{link controller='LessStylesheets'}{/link}" />
-	LESS_FILES -->
+	<link rel="stylesheet/less" type="text/css" href="{@$__wcf->getPath()}style/bootstrap.less" />
+	<script type="text/javascript">
+		//<![CDATA[
+		var less = { env: 'development' };
+		//]]>
+	</script>
 	<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/style-{@$__wcf->getLanguage()->getPageDirection()}.css") screen;
-	
-		@import url("{@$__wcf->getPath()}acp/style/print.css") print;
-		*}
-	</style>
+	<script type="text/javascript">
+		//<![CDATA[
+		less.watch();
+		//]]>
+	</script>
 	
 	{*
 	{if $specialStyles|isset}
@@ -93,6 +91,8 @@
 			
 			$('#sidebarContent').wcfSidebar();
 			
+			WCF.Dropdown.init();
+			
 			{event name='javascriptInit'}
 		});
 		//]]>
@@ -102,16 +102,16 @@
 <body id="tpl{$templateName|ucfirst}">
 	<a id="top"></a>
 	<!-- HEADER -->
-	<header id="pageHeader" class="wcf-pageHeader">
+	<header id="pageHeader" class="layoutFluid">
 		<div>
 			{if $__wcf->user->userID}
 				<!-- top menu -->
-				<nav id="topMenu" class="wcf-topMenu">
-					<div>
+				<nav id="topMenu" class="userPanel">
+					<div class="layoutFluid clearfix">
 						<ul>
-							<li id="userMenu" class="wcf-userMenu"><!-- ToDo: We need an ID and/or class for each list here, this ID may also change! -->
-								<span class="wcf-dropdownCaption wcf-userAvatarFramed">{lang}wcf.user.userNote{/lang}</span>
-								<ul class="wcf-dropdown">
+							<li id="userMenu" class="dropdown">
+								<span class="dropdownToggle" data-toggle="userMenu">{lang}wcf.user.userNote{/lang}</span>
+								<ul class="dropdownMenu">
 									<li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" onclick="return confirm('{lang}wcf.user.logout.sure{/lang}')">{lang}wcf.user.logout{/lang}</a></li>
 								</ul>
 							</li>
@@ -122,7 +122,7 @@
 			{/if}
 			
 			<!-- logo -->
-			<div id="logo" class="wcf-logo">
+			<div id="logo" class="logo">
 				<!-- clickable area -->
 				<a href="{link controller='Index'}{/link}">
 					<h1>WoltLab Community Framework 2.0 Alpha 1</h1>
@@ -137,7 +137,7 @@
 			<!-- /logo -->
 			
 			<!-- main menu -->
-			<nav id="mainMenu" class="wcf-mainMenu">
+			<nav id="mainMenu" class="mainMenu">
 				{* work-around for unknown core-object during WCFSetup *}
 				{if PACKAGE_ID}
 					<ul>
@@ -150,9 +150,9 @@
 			<!-- /main menu -->
 			
 			<!-- header navigation -->
-			<nav class="wcf-headerNavigation">
-				<ul>
-					<li id="toBottomLink" class="toBottomLink"><a href="{@$__wcf->getAnchor('bottom')}" title="{lang}wcf.global.scrollDown{/lang}" class="jsTooltip"><img src="{@$__wcf->getPath()}icon/toBottom.svg" alt="" /> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
+			<nav class="navigation navigationHeader clearfix">
+				<ul class="navigationIcons">
+					<li id="toBottomLink" class="toBottomLink"><a href="{@$__wcf->getAnchor('bottom')}" title="{lang}wcf.global.scrollDown{/lang}" class="jsTooltip"><img src="{@$__wcf->getPath()}icon/toBottom.svg" alt="" class="icon16" /> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
 				</ul>
 			</nav>
 			<!-- /header navigation -->
@@ -161,21 +161,21 @@
 	<!-- /HEADER -->
 	
 	<!-- MAIN -->
-	<div id="main" class="wcf-main left">
+	<div id="main" class="layoutFluid sidebarOrientationLeft">
 		<div>
 			{hascontent}
 				<!-- SIDEBAR -->
-				<aside class="wcf-sidebar">
+				<aside class="sidebar">
 					<!-- sidebar menu -->
-					<nav id="sidebarContent" class="wcf-sidebarContent">
+					<nav id="sidebarContent" class="sidebarContent">
 						{content}
 							{* work-around for unknown core-object during WCFSetup *}
 							{if PACKAGE_ID}
 								{foreach from=$__wcf->getACPMenu()->getMenuItems('') item=parentMenuItem}
-									<div id="{$parentMenuItem->menuItem}-container" style="display: none;" class="wcf-menuContainer collapsibleMenus" data-parent-menu-item="{$parentMenuItem->menuItem}">
+									<div id="{$parentMenuItem->menuItem}-container" style="display: none;" class="menuGroup collapsibleMenus" data-parent-menu-item="{$parentMenuItem->menuItem}">
 										{foreach from=$__wcf->getACPMenu()->getMenuItems($parentMenuItem->menuItem) item=menuItem}
-											<h1 class="wcf-menuHeader" data-menu-item="{$menuItem->menuItem}">{lang}{@$menuItem->menuItem}{/lang}</h1>
-											<div class="wcf-sidebarContentGroup">
+											<h1 class="menuHeader" data-menu-item="{$menuItem->menuItem}">{lang}{@$menuItem->menuItem}{/lang}</h1>
+											<div class="menuGroupItems">
 												<ul id="{$menuItem->menuItem}">
 													{foreach from=$__wcf->getACPMenu()->getMenuItems($menuItem->menuItem) item=menuItemCategory}
 														{if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
@@ -200,5 +200,5 @@
 			{/hascontent}
 			
 			<!-- CONTENT -->
-			<section id="content" class="wcf-content wcf-contentDecor">
+			<section id="content" class="content clearfix">
 				
\ No newline at end of file
diff --git a/wcfsetup/install/files/acp/templates/login.tpl b/wcfsetup/install/files/acp/templates/login.tpl
index 66fe8b8603..fa2e06e7f8 100644
--- a/wcfsetup/install/files/acp/templates/login.tpl
+++ b/wcfsetup/install/files/acp/templates/login.tpl
@@ -14,9 +14,9 @@
 	//]]>
 </script>
 
-<header class="wcf-container wcf-mainHeading setup">
-	<img src="{@$__wcf->getPath()}icon/logIn1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/logIn1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{@$pageTitle}</h1>
 	</hgroup>
 </header>
@@ -29,11 +29,11 @@
 	<fieldset>
 		<legend>{lang}wcf.user.login.data{/lang}</legend>
 		
-		<dl{if $errorField == 'username'} class="wcf-formError"{/if}>
+		<dl{if $errorField == 'username'} class="formError"{/if}>
 			<dt><label for="username">{lang}wcf.user.username{/lang}</label></dt>
 			<dd><input type="text" id="username" name="username" value="{$username}" class="medium" />
 				{if $errorField == 'username'}
-					<small class="wcf-innerError">
+					<small class="innerError">
 						{if $errorType == 'empty'}
 							{lang}wcf.global.form.error.empty{/lang}
 						{else}
@@ -44,11 +44,11 @@
 			</dd>
 		</dl>
 		
-		<dl{if $errorField == 'password'} class="wcf-formError"{/if}>
+		<dl{if $errorField == 'password'} class="formError"{/if}>
 			<dt><label for="password">{lang}wcf.user.password{/lang}</label></dt>
 			<dd><input type="password" id="password" name="password" value="" class="medium" />
 				{if $errorField == 'password'}
-					<small class="wcf-innerError">
+					<small class="innerError">
 						{if $errorType == 'empty'}
 							{lang}wcf.global.form.error.empty{/lang}
 						{else}
@@ -64,11 +64,10 @@
 	
 	{event name='fieldsets'}
 	
-	<div class="wcf-formSubmit">
+	<div class="formSubmit">
 		<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
 		<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
 		<input type="hidden" name="url" value="{$url}" />
- 		{@SID_INPUT_TAG}
 	</div>
 </form>
 
diff --git a/wcfsetup/install/files/acp/templates/option.tpl b/wcfsetup/install/files/acp/templates/option.tpl
index d957ee166f..1d091fb8bd 100644
--- a/wcfsetup/install/files/acp/templates/option.tpl
+++ b/wcfsetup/install/files/acp/templates/option.tpl
@@ -9,35 +9,35 @@
 	//]]>
 </script>
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/options1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/options1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.option.category.{$category->categoryName}{/lang}</h1>
 		{hascontent}<h2>{content}{lang __optional=true}wcf.acp.option.category.{$category->categoryName}.description{/lang}{/content}</h2>{/hascontent}
 	</hgroup>
 </header>
 
 {if $success|isset}
-	<p class="wcf-success">{lang}wcf.global.form.edit.success{/lang}</p>
+	<p class="success">{lang}wcf.global.form.edit.success{/lang}</p>
 {/if}
 
 {if $errorField}
-	<p class="wcf-error">{lang}wcf.global.form.error{/lang}</p>
+	<p class="error">{lang}wcf.global.form.error{/lang}</p>
 {/if}
 
 <form method="post" action="{link controller='Option' id=$category->categoryID}{/link}">
-	<div class="wcf-tabMenuContainer" data-active="{$activeTabMenuItem}" data-store="activeTabMenuItem">
-		<nav class="wcf-tabMenu">
+	<div class="tabMenuContainer" data-active="{$activeTabMenuItem}" data-store="activeTabMenuItem">
+		<nav class="tabMenu">
 			<ul>
 				{foreach from=$optionTree item=categoryLevel1}
-					<li><a href="#{@$categoryLevel1[object]->categoryName}" title="{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}">{*<span>*}{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}{*</span>*}</a></li>
+					<li><a href="#{@$categoryLevel1[object]->categoryName}" title="{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}">{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}</a></li>
 				{/foreach}
 			</ul>
 		</nav>
 		
 		{foreach from=$optionTree item=categoryLevel1}
-			<div id="{@$categoryLevel1[object]->categoryName}" class="wcf-box wcf-boxPadding wcf-shadow2 wcf-tabMenuContent hidden">
-				<hgroup class="wcf-subHeading">
+			<div id="{@$categoryLevel1[object]->categoryName}" class="container containerPadding shadow hidden tabMenuContent">
+				<hgroup class="boxSubHeadline">
 					<h1>{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}</h1>
 					<h2>{lang __optional=true}wcf.acp.option.category.{$categoryLevel1[object]->categoryName}.description{/lang}</h2>
 				</hgroup>
@@ -63,10 +63,9 @@
 		{/foreach}
 	</div>
 	
-	<div class="wcf-formSubmit">
+	<div class="formSubmit">
 		<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
 		<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
-		{@SID_INPUT_TAG}
  	</div>
 </form>
 
diff --git a/wcfsetup/install/files/acp/templates/optionFieldList.tpl b/wcfsetup/install/files/acp/templates/optionFieldList.tpl
index e1f0d50833..d16ee009e6 100644
--- a/wcfsetup/install/files/acp/templates/optionFieldList.tpl
+++ b/wcfsetup/install/files/acp/templates/optionFieldList.tpl
@@ -9,7 +9,7 @@
 		<dt{if $optionData[cssClassName]} class="{$optionData[cssClassName]}"{/if}><label for="{$option->optionName}">{lang}{@$langPrefix}{$option->optionName}{/lang}</label></dt>
 		<dd>{@$optionData[html]}
 			{if $error}
-				<small class="wcf-innerError">
+				<small class="innerError">
 					{if $error == 'empty'}
 						{lang}wcf.global.form.error.empty{/lang}
 					{else}	
diff --git a/wcfsetup/install/files/acp/templates/optionImport.tpl b/wcfsetup/install/files/acp/templates/optionImport.tpl
index 2ac4998fba..a0838a4089 100644
--- a/wcfsetup/install/files/acp/templates/optionImport.tpl
+++ b/wcfsetup/install/files/acp/templates/optionImport.tpl
@@ -1,32 +1,31 @@
 {include file='header'}
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/upload1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/upload1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.option.import{/lang}</h1>
 	</hgroup>
 </header>
 
 {if $errorField != ''}
-	<p class="wcf-error">{lang}wcf.global.form.error{/lang}</p>
+	<p class="error">{lang}wcf.global.form.error{/lang}</p>
 {/if}
 
 {if $success|isset}
-	<p class="wcf-success">{lang}wcf.acp.option.import.success{/lang}</p>	
+	<p class="success">{lang}wcf.acp.option.import.success{/lang}</p>	
 {/if}
 
 <form method="post" action="{link controller='OptionImport'}{/link}" enctype="multipart/form-data">
 	<div>
-		
 		<fieldset>
 			<legend>{lang}wcf.acp.option.import{/lang}</legend>
 		
-			<dl{if $errorField == 'optionImport'} class="wcf-formError"{/if}>
+			<dl{if $errorField == 'optionImport'} class="formError"{/if}>
 				<dt><label for="optionImport">{lang}wcf.acp.option.import.upload{/lang}</label></dt>
 				<dd>
 					<input type="file" id="optionImport" name="optionImport" value="" />
 					{if $errorField == 'optionImport'}
-						<small class="wcf-innerError">
+						<small class="innerError">
 							{if $errorType == 'empty'}
 								{lang}wcf.global.form.error.empty{/lang}
 							{else}
@@ -43,30 +42,28 @@
 		
 		{event name='importFieldsets'}
 	</div>
-
-	<div class="wcf-formSubmit">
+	
+	<div class="formSubmit">
 		<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
 		<input type="submit" name="submitButton" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
-		{@SID_INPUT_TAG}
 	</div>
 </form>
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/download1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/download1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.option.export{/lang}</h1>
 	</hgroup>
 </header>
 
 <div>
-	
 	<fieldset>
 		<legend>{lang}wcf.acp.option.export{/lang}</legend>
-	
+		
 		<dl id="optionExportDiv">
 			<dt><label>{lang}wcf.acp.option.export.download{/lang}</label></dt>
 			<dd>
-				<p><a href="{link controller='OptionExport'}{/link}" id="optionExport" class="wcf-badge wcf-badgeButton wcf-button">{lang}wcf.acp.option.export{/lang}</a></p>
+				<p><a href="{link controller='OptionExport'}{/link}" id="optionExport" class="badge badgeButton button">{lang}wcf.acp.option.export{/lang}</a></p>
 				<small>{lang}wcf.acp.option.export.download.description{/lang}</small>
 			</dd>
 		</dl>
diff --git a/wcfsetup/install/files/acp/templates/packageAutoUpdateList.tpl b/wcfsetup/install/files/acp/templates/packageAutoUpdateList.tpl
index 0bdea732ad..dd81555a2d 100644
--- a/wcfsetup/install/files/acp/templates/packageAutoUpdateList.tpl
+++ b/wcfsetup/install/files/acp/templates/packageAutoUpdateList.tpl
@@ -22,9 +22,9 @@
 </script>
 
 <form method="post" action="{link controller='PackageUpdate'}{/link}" id="updateForm">
-	<header class="wcf-container wcf-mainHeading">
-		<img src="{@$__wcf->getPath()}icon/update1.svg" alt="" class="wcf-containerIcon" />
-		<hgroup class="wcf-containerContent">
+	<header class="box48 boxHeadline">
+		<img src="{@$__wcf->getPath()}icon/update1.svg" alt="" class="icon48" />
+		<hgroup>
 			<h1>{lang}wcf.acp.packageUpdate{/lang}</h1>
 			{if $availableUpdates|count}
 				<h2><label><input type="checkbox" onclick="checkUncheckAllPackages(document.getElementById('updateForm'))" /> {lang}wcf.acp.packageUpdate.selectAll{/lang}</label></h2>
@@ -33,7 +33,7 @@
 	</header>
 	
 	{if !$availableUpdates|count}
-		<p class="wcf-info">{lang}wcf.acp.packageUpdate.noneAvailable{/lang}</p>
+		<p class="info">{lang}wcf.acp.packageUpdate.noneAvailable{/lang}</p>
 	{else}
 		{foreach from=$availableUpdates item=availableUpdate}
 			<article class="wcf-message wcf-messageDecor{if $availableUpdate.version.updateType == 'security'} wcf-messageRed{/if}"><!-- ToDo: Style! -->
@@ -83,10 +83,9 @@
 			</article>			
 		{/foreach}
 		
-		<div class="wcf-formSubmit">
+		<div class="formSubmit">
 			<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
 			<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
-			{@SID_INPUT_TAG}
 	 	</div>
 	{/if}
 </form>
diff --git a/wcfsetup/install/files/acp/templates/packageList.tpl b/wcfsetup/install/files/acp/templates/packageList.tpl
index 6719eebf30..12f50b2ca6 100644
--- a/wcfsetup/install/files/acp/templates/packageList.tpl
+++ b/wcfsetup/install/files/acp/templates/packageList.tpl
@@ -22,23 +22,23 @@
 	//]]>
 </script>
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.package.list{/lang}</h1>
 	</hgroup>
 </header>
 
-<div class="wcf-tabMenuContainer">
-	<nav class="wcf-tabMenu">
+<div class="tabMenuContainer">
+	<nav class="tabMenu">
 		<ul>
 			<li><a href="#applications" title="applications">{lang}wcf.acp.package.application.title{/lang}</a></li>
 			{if $plugins|count}<li><a href="#plugins" title="plugins">{lang}wcf.acp.package.plugin.title{/lang}</a></li>{/if}
 		</ul>
 	</nav>
 	
-	<div id="applications" class="wcf-box wcf-tabMenuContent wcf-boxPadding wcf-shadow1 hidden">
-		<hgroup class="wcf-subHeading">
+	<div id="applications" class="container containerPadding tabMenuContent hidden">
+		<hgroup class="boxSubHeadline">
 			<h1>{lang}wcf.acp.package.application.installed{/lang}</h1>
 		</hgroup>
 		
@@ -92,8 +92,8 @@
 	</div>
 	
 	{hascontent}
-		<div id="plugins" class="wcf-box wcf-boxPadding wcf-tabMenuContent wcf-shadow1 hidden">
-			<hgroup class="wcf-subHeading">
+		<div id="plugins" class="container containerPadding tabMenuContent hidden">
+			<hgroup class="boxSubHeadline">
 				<h1>{lang}wcf.acp.package.plugin.installed{/lang}</h1>
 			</hgroup>
 			
@@ -116,10 +116,10 @@
 	{/hascontent}
 </div>
 
-<div class="wcf-contentFooter">
+<div class="contentNavigation">
 	<nav>
-		<ul class="wcf-largeButtons">
-			<li><a href="{link controller='PackageListDetailed'}{/link}" title="{lang}wcf.acp.menu.link.package.list{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" /> <span>{lang}wcf.acp.package.list.detailed{/lang}</span></a></li>
+		<ul>
+			<li><a href="{link controller='PackageListDetailed'}{/link}" title="{lang}wcf.acp.menu.link.package.list{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.package.list.detailed{/lang}</span></a></li>
 		</ul>
 	</nav>
 </div>
diff --git a/wcfsetup/install/files/acp/templates/packageListDetailed.tpl b/wcfsetup/install/files/acp/templates/packageListDetailed.tpl
index 2eb5ff29b3..4a3eab7b80 100644
--- a/wcfsetup/install/files/acp/templates/packageListDetailed.tpl
+++ b/wcfsetup/install/files/acp/templates/packageListDetailed.tpl
@@ -10,22 +10,22 @@
 	//]]>
 </script>
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.package.list{/lang}</h1>
 	</hgroup>
 </header>
 
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
 	{pages print=true assign=pagesLinks controller='PackageListDetailed' link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}
 
 	{hascontent}
 		<nav>
-			<ul class="wcf-largeButtons">
+			<ul>
 				{content}
 					{if $__wcf->session->getPermission('admin.system.package.canInstallPackage')}
-						<li><a href="{link controller='PackageStartInstall'}action=install{/link}" title="{lang}wcf.acp.package.startInstall{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.package.startInstall{/lang}</span></a></li>
+						<li><a href="{link controller='PackageStartInstall'}action=install{/link}" title="{lang}wcf.acp.package.startInstall{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.package.startInstall{/lang}</span></a></li>
 					{/if}
 				
 					{event name='largeButtons'}
@@ -36,12 +36,12 @@
 </div>
 
 {if $objects|count > 0}
-	<div class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
+	<div class="tabularBox tabularBoxTitle marginTop shadow">
 		<hgroup>
-			<h1><a href="{link controller='PackageList'}{/link}">{lang}wcf.acp.package.list{/lang} <span class="wcf-badge" title="{lang}wcf.acp.package.list.count{/lang}">{#$items}</span></a></h1>
+			<h1><a href="{link controller='PackageList'}{/link}">{lang}wcf.acp.package.list{/lang} <span class="badge" title="{lang}wcf.acp.package.list.count{/lang}">{#$items}</span></a></h1>
 		</hgroup>
 		
-		<table class="wcf-table">
+		<table class="table">
 			<thead>
 				<tr>
 					<th colspan="2" class="columnID{if $sortField == 'packageID'} active{/if}"><a href="{link controller='PackageListDetailed'}pageNo={@$pageNo}&sortField=packageID&sortOrder={if $sortField == 'packageID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'packageID'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
@@ -59,14 +59,14 @@
 					<tr class="jsPackageRow">
 						<td class="columnIcon">
 							{if $__wcf->session->getPermission('admin.system.package.canUpdatePackage')}
-								<a href="{link controller='PackageStartInstall' id=$package->packageID}action=update{/link}"><img src="{@RELATIVE_WCF_DIR}icon/update1.svg" alt="" title="{lang}wcf.acp.package.button.update{/lang}" class="jsTooltip" /></a>
+								<a href="{link controller='PackageStartInstall' id=$package->packageID}action=update{/link}"><img src="{@RELATIVE_WCF_DIR}icon/update1.svg" alt="" title="{lang}wcf.acp.package.button.update{/lang}" class="icon16 jsTooltip" /></a>
 							{else}
-								<img src="{@$__wcf->getPath()}icon/update1D.svg" alt="" title="{lang}wcf.acp.package.button.update{/lang}" />
+								<img src="{@$__wcf->getPath()}icon/update1D.svg" alt="" title="{lang}wcf.acp.package.button.update{/lang}" class="icon16" />
 							{/if}
 							{if $__wcf->session->getPermission('admin.system.package.canUninstallPackage') && $package->package != 'com.woltlab.wcf' && $package->packageID != PACKAGE_ID}
-								<img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.acp.package.button.uninstall{/lang}" class="jsUninstallButton jsTooltip" data-object-id="{@$package->packageID}" data-confirm-message="{lang}wcf.acp.package.uninstallation.confirm{/lang}" />
+								<img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.acp.package.button.uninstall{/lang}" class="icon16 jsUninstallButton jsTooltip" data-object-id="{@$package->packageID}" data-confirm-message="{lang}wcf.acp.package.uninstallation.confirm{/lang}" />
 							{else}
-								<img src="{@$__wcf->getPath()}icon/delete1D.svg" alt="" title="{lang}wcf.acp.package.button.uninstall{/lang}" />
+								<img src="{@$__wcf->getPath()}icon/delete1D.svg" alt="" title="{lang}wcf.acp.package.button.uninstall{/lang}" class="icon16" />
 							{/if}
 							
 							{event name='buttons'}
@@ -74,11 +74,11 @@
 						<td class="columnID"><p>{@$package->packageID}</p></td>
 						<td class="columnIcon">
 							{if $package->isApplication}
-								<img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" title="{lang}wcf.acp.package.type.application{/lang}" class="jsTooltip" />
+								<img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" title="{lang}wcf.acp.package.type.application{/lang}" class="icon16 jsTooltip" />
 							{elseif $package->isPlugin()}
-								<img src="{@$__wcf->getPath()}icon/packagePlugin1.svg" alt="" title="{lang}wcf.acp.package.type.plugin{/lang}" class="jsTooltip" />
+								<img src="{@$__wcf->getPath()}icon/packagePlugin1.svg" alt="" title="{lang}wcf.acp.package.type.plugin{/lang}" class="icon16 jsTooltip" />
 							{else}
-								<img src="{@$__wcf->getPath()}icon/package1.svg" alt="" title="{lang}wcf.acp.package.type.other{/lang}" class="jsTooltip" />
+								<img src="{@$__wcf->getPath()}icon/package1.svg" alt="" title="{lang}wcf.acp.package.type.other{/lang}" class="icon16 jsTooltip" />
 							{/if}
 						</td>
 						<td id="packageName{@$package->packageID}" class="columnTitle" title="{$package->packageDescription|language}">
@@ -97,7 +97,7 @@
 	</div>
 {/if}
 
-<div class="wcf-contentFooter">
+<div class="contentNavigation">
 	{@$pagesLinks}
 	
 	{hascontent}
@@ -109,10 +109,10 @@
 			//]]>
 		</script>
 		<nav>
-			<ul class="wcf-largeButtons">
+			<ul>
 				{content}
 					{if $__wcf->session->getPermission('admin.system.package.canInstallPackage')}
-						<li><a href="{link controller='PackageStartInstall'}action=install{/link}" title="{lang}wcf.acp.package.startInstall{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.package.startInstall{/lang}</span></a></li>
+						<li><a href="{link controller='PackageStartInstall'}action=install{/link}" title="{lang}wcf.acp.package.startInstall{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.package.startInstall{/lang}</span></a></li>
 					{/if}
 				
 					{event name='largeButtons'}
diff --git a/wcfsetup/install/files/acp/templates/packageStartInstall.tpl b/wcfsetup/install/files/acp/templates/packageStartInstall.tpl
index 3600825379..f52835a64d 100644
--- a/wcfsetup/install/files/acp/templates/packageStartInstall.tpl
+++ b/wcfsetup/install/files/acp/templates/packageStartInstall.tpl
@@ -1,27 +1,27 @@
 {include file='header'}
 
-<header class="wcf-container wcf-mainHeading">
+<header class="box48 boxHeadline">
 	{if $packageID == 0}
-		<img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="wcf-containerIcon" />
-		<hgroup class="wcf-containerContent">
+		<img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon48" />
+		<hgroup>
 			<h1>{lang}wcf.acp.package.startInstall{/lang}</h1>
 		</hgroup>
 	{else}
-		<img src="{@$__wcf->getPath()}icon/update1.svg" alt="" class="wcf-containerIcon" />
-		<hgroup class="wcf-containerContent">
+		<img src="{@$__wcf->getPath()}icon/update1.svg" alt="" class="icon48" />
+		<hgroup>
 			<h1>{lang}wcf.acp.package.startUpdate{/lang}</h1>
 		</hgroup>
 	{/if}
 </header>
 
 {if $errorField != ''}
-	<p class="wcf-error">{lang}wcf.global.form.error{/lang}</p>
+	<p class="error">{lang}wcf.global.form.error{/lang}</p>
 {/if}
 
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
 	<nav>
-		<ul class="wcf-largeButtons">
-			<li><a href="{link controller='PackageList'}{/link}" title="{lang}wcf.acp.menu.link.package.list{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" /> <span>{lang}wcf.acp.menu.link.package.list{/lang}</span></a></li>
+		<ul>
+			<li><a href="{link controller='PackageList'}{/link}" title="{lang}wcf.acp.menu.link.package.list{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.menu.link.package.list{/lang}</span></a></li>
 			
 			{event name='largeButtons'}
 		</ul>
@@ -29,17 +29,16 @@
 </div>
 
 <form method="post" action="{link controller='PackageStartInstall'}{/link}" enctype="multipart/form-data">
-	<div class="wcf-box wcf-marginTop wcf-boxPadding wcf-boxDecor wcf-shadow1">
-		
+	<div class="container containerPadding marginTop shadow">
 		<fieldset>
 			<legend>{lang}wcf.acp.package.source{/lang}</legend>
 		
-			<dl{if $errorField == 'uploadPackage'} class="wcf-formError"{/if}>
+			<dl{if $errorField == 'uploadPackage'} class="formError"{/if}>
 				<dt><label for="uploadPackage">{lang}wcf.acp.package.source.upload{/lang}</label></dt>
 				<dd>
 					<input type="file" id="uploadPackage" name="uploadPackage" value="" />
 					{if $errorField == 'uploadPackage'}
-						<small class="wcf-innerError">
+						<small class="innerError">
 							{if $errorType == 'empty'}
 								{lang}wcf.global.form.error.empty{/lang}
 							{elseif $errorType == 'phpRequirements'}
@@ -54,12 +53,12 @@
 				</dd>
 			</dl>
 			
-			<dl{if $errorField == 'downloadPackage'} class="wcf-formError"{/if}>
+			<dl{if $errorField == 'downloadPackage'} class="formError"{/if}>
 				<dt><label for="downloadPackage">{lang}wcf.acp.package.source.download{/lang}</label></dt>
 				<dd>
 					<input type="text" id="downloadPackage" name="downloadPackage" value="" class="long" />
 					{if $errorField == 'downloadPackage'}
-						<small class="wcf-innerError">
+						<small class="innerError">
 							{lang}wcf.acp.package.error.{@$errorType}{/lang}
 						</small>
 					{/if}
@@ -73,10 +72,9 @@
 		{event name='fieldsets'}
 	</div>
 
-	<div class="wcf-formSubmit">
+	<div class="formSubmit">
 		<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
 		<input type="submit" name="submitButton" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
-		{@SID_INPUT_TAG}
  		<input type="hidden" name="action" value="{$action}" />
  		{if $packageID != 0}<input type="hidden" name="id" value="{@$packageID}" />{/if}
 	</div>
diff --git a/wcfsetup/install/files/acp/templates/packageUpdateSearch.tpl b/wcfsetup/install/files/acp/templates/packageUpdateSearch.tpl
index 1f5e862ade..64db44cd0d 100644
--- a/wcfsetup/install/files/acp/templates/packageUpdateSearch.tpl
+++ b/wcfsetup/install/files/acp/templates/packageUpdateSearch.tpl
@@ -37,23 +37,22 @@
 	//]]>
 </script>
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/search1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/search1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.packageUpdate.search{/lang}</h1>
 	</hgroup>
 </header>
 
 {if $errorField != ''}
-	<p class="wcf-error">{lang}wcf.acp.packageUpdate.noneAvailable{/lang}</p>
+	<p class="error">{lang}wcf.acp.packageUpdate.noneAvailable{/lang}</p>
 {/if}
 
 {if !$updateServers|count}
-	<p class="wcf-warning">{lang}wcf.acp.updateServer.view.noneAvailable{/lang}</p>
+	<p class="warning">{lang}wcf.acp.updateServer.view.noneAvailable{/lang}</p>
 {else}
 	<form method="post" action="{link controller='PackageUpdateSearch'}{/link}">
-		<div class="wcf-box wcf-marginTop wcf-boxPadding wcf-boxDecor">
-			
+		<div class="container containerPadding marginTop shadow">
 			<fieldset>
 				<legend>{lang}wcf.acp.packageUpdate.search.server{/lang}</legend>
 				
@@ -114,13 +113,11 @@
 					</dd>
 				</dl>
 			</fieldset>
-			
 		</div>
 		
-		<div class="wcf-formSubmit">
+		<div class="formSubmit">
 			<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
 			<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
-			{@SID_INPUT_TAG}
 	 	</div>
 	</form>
 {/if}
diff --git a/wcfsetup/install/files/acp/templates/updateServerAdd.tpl b/wcfsetup/install/files/acp/templates/updateServerAdd.tpl
index a2ffa46b91..de6db7a3de 100644
--- a/wcfsetup/install/files/acp/templates/updateServerAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/updateServerAdd.tpl
@@ -1,28 +1,28 @@
 {include file='header'}
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/{@$action}1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/{@$action}1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.updateServer.{$action}{/lang}</h1>
 	</hgroup>
 </header>
 
 {if $errorField}
-	<p class="wcf-error">{lang}wcf.global.form.error{/lang}</p>
+	<p class="error">{lang}wcf.global.form.error{/lang}</p>
 {/if}
 
 {if $packageUpdateServer|isset && $packageUpdateServer->errorMessage}
-	<p class="wcf-warning">{lang}wcf.acp.updateServer.lastErrorMessage{/lang}<br />{$packageUpdateServer->errorMessage}</p>	
+	<p class="warning">{lang}wcf.acp.updateServer.lastErrorMessage{/lang}<br />{$packageUpdateServer->errorMessage}</p>	
 {/if}
 
 {if $success|isset}
-	<p class="wcf-success">{lang}wcf.global.form.{$action}.success{/lang}</p>	
+	<p class="success">{lang}wcf.global.form.{$action}.success{/lang}</p>	
 {/if}
 
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
 	<nav>
-		<ul class="wcf-largeButtons">
-			<li><a href="{link controller='UpdateServerList'}{/link}" title="{lang}wcf.acp.menu.link.package.server.list{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/server1.svg" alt="" /> <span>{lang}wcf.acp.menu.link.package.server.list{/lang}</span></a></li>
+		<ul>
+			<li><a href="{link controller='UpdateServerList'}{/link}" title="{lang}wcf.acp.menu.link.package.server.list{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/server1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.menu.link.package.server.list{/lang}</span></a></li>
 			
 			{event name='largeButtons'}
 		</ul>
@@ -30,17 +30,16 @@
 </div>
 
 <form method="post" action="{if $action == 'add'}{link controller='UpdateServerAdd'}{/link}{else}{link controller='UpdateServerEdit'}{/link}{/if}">
-	<div class="wcf-box wcf-marginTop wcf-boxPadding wcf-boxDecor">
-		
+	<div class="container containerPadding marginTop shadow">
 		<fieldset>
 			<legend>{lang}wcf.acp.updateServer.data{/lang}</legend>
 			
-			<dl{if $errorField == 'serverURL'} class="wcf-formError"{/if}>
+			<dl{if $errorField == 'serverURL'} class="formError"{/if}>
 				<dt><label for="serverURL">{lang}wcf.acp.updateServer.serverURL{/lang}</label></dt>
 				<dd>
 					<input type="url" id="serverURL" name="serverURL" value="{$serverURL}" required="required" autofocus="autofocus" class="long" />
 					{if $errorField == 'serverURL'}
-						<small class="wcf-innerError">
+						<small class="innerError">
 							{if $errorType == 'empty'}
 								{lang}wcf.global.form.error.empty{/lang}
 							{else}
@@ -73,11 +72,9 @@
 		{event name='fieldsets'}
 	</div>
 	
-	<div class="wcf-formSubmit">
-		<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
+	<div class="formSubmit">
 		<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
 		{if $packageUpdateServerID|isset}<input type="hidden" name="id" value="{@$packageUpdateServerID}" />{/if}
-		{@SID_INPUT_TAG}
 	</div>
 </form>
 
diff --git a/wcfsetup/install/files/acp/templates/updateServerList.tpl b/wcfsetup/install/files/acp/templates/updateServerList.tpl
index c4011bf25b..f151bf34ad 100644
--- a/wcfsetup/install/files/acp/templates/updateServerList.tpl
+++ b/wcfsetup/install/files/acp/templates/updateServerList.tpl
@@ -9,23 +9,23 @@
 	//]]>
 </script>
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/server1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/server1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.updateServer.list{/lang}</h1>
 	</hgroup>
 </header>
 
 {if $deletedPackageUpdateServerID}
-	<p class="wcf-success">{lang}wcf.acp.updateServer.delete.success{/lang}</p>
+	<p class="success">{lang}wcf.acp.updateServer.delete.success{/lang}</p>
 {/if}
 
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
 	{pages print=true assign=pagesLinks controller="UpdateServerList" link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}
 	
 	<nav>
-		<ul class="wcf-largeButtons">
-			<li><a href="{link controller='UpdateServerAdd'}{/link}" title="{lang}wcf.acp.updateServer.add{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.updateServer.add{/lang}</span></a></li>
+		<ul>
+			<li><a href="{link controller='UpdateServerAdd'}{/link}" title="{lang}wcf.acp.updateServer.add{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.updateServer.add{/lang}</span></a></li>
 			
 			{event name='largeButtons'}
 		</ul>
@@ -33,12 +33,12 @@
 </div>
 
 {hascontent}
-	<div class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
+	<div class="tabularBox tabularBoxTitle marginTop shadow">
 		<hgroup>
-			<h1>{lang}wcf.acp.updateServer.list{/lang} <span class="wcf-badge" title="{lang}wcf.acp.updateServer.list.count{/lang}">{#$items}</span></h1>
+			<h1>{lang}wcf.acp.updateServer.list{/lang} <span class="badge" title="{lang}wcf.acp.updateServer.list.count{/lang}">{#$items}</span></h1>
 		</hgroup>
 		
-		<table class="wcf-table big">
+		<table class="table">
 			<thead>
 				<tr>
 					<th class="columnID columnPackageUpdateServerID{if $sortField == 'packageUpdateServerID'} active{/if}" colspan="2"><a href="{link controller='UpdateServerList'}pageNo={@$pageNo}&sortField=packageUpdateServerID&sortOrder={if $sortField == 'packageUpdateServerID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'packageUpdateServerID'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
@@ -57,9 +57,9 @@
 					{foreach from=$objects item=updateServer}
 						<tr class="jsUpdateServerRow">
 							<td class="columnIcon">
-								<img src="{@$__wcf->getPath()}icon/{if !$updateServer->disabled}enabled{else}disabled{/if}1.svg" alt="" title="{lang}wcf.global.button.{if !$updateServer->disabled}disable{else}enable{/if}{/lang}" class="jsToggleButton jsTooltip" data-object-id="{@$updateServer->packageUpdateServerID}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" />
-								<a href="{link controller='UpdateServerEdit' id=$updateServer->packageUpdateServerID}{/link}"><img src="{@$__wcf->getPath()}icon/edit1.svg" alt="" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip" /></a>
-								<img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" class="jsDeleteButton jsTooltip" data-object-id="{@$updateServer->packageUpdateServerID}" data-confirm-message="{lang}wcf.acp.updateServer.delete.sure{/lang}" />
+								<img src="{@$__wcf->getPath()}icon/{if !$updateServer->disabled}enabled{else}disabled{/if}1.svg" alt="" title="{lang}wcf.global.button.{if !$updateServer->disabled}disable{else}enable{/if}{/lang}" class="icon16 jsToggleButton jsTooltip" data-object-id="{@$updateServer->packageUpdateServerID}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" />
+								<a href="{link controller='UpdateServerEdit' id=$updateServer->packageUpdateServerID}{/link}"><img src="{@$__wcf->getPath()}icon/edit1.svg" alt="" title="{lang}wcf.global.button.edit{/lang}" class="icon16 jsTooltip" /></a>
+								<img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" class="icon16 jsDeleteButton jsTooltip" data-object-id="{@$updateServer->packageUpdateServerID}" data-confirm-message="{lang}wcf.acp.updateServer.delete.sure{/lang}" />
 							
 								{event name='buttons'}
 							</td>
@@ -79,12 +79,12 @@
 		
 	</div>
 	
-	<div class="wcf-contentFooter">
+	<div class="contentNavigation">
 		{@$pagesLinks}
 		
 		<nav>
-			<ul class="wcf-largeButtons">
-				<li><a href="{link controller='UpdateServerAdd'}{/link}" title="{lang}wcf.acp.updateServer.add{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.updateServer.add{/lang}</span></a></li>
+			<ul>
+				<li><a href="{link controller='UpdateServerAdd'}{/link}" title="{lang}wcf.acp.updateServer.add{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.updateServer.add{/lang}</span></a></li>
 				
 				{event name='largeButtons'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/userAdd.tpl b/wcfsetup/install/files/acp/templates/userAdd.tpl
index 44905cddbd..acaf72e95c 100644
--- a/wcfsetup/install/files/acp/templates/userAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/userAdd.tpl
@@ -8,30 +8,30 @@
 	//]]>
 </script>
 
-<header class="wcf-container wcf-mainHeading">
-	<img {if $userID|isset}id="userEdit{@$userID}" {/if}src="{@$__wcf->getPath()}icon/{@$action}1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img {if $userID|isset}id="userEdit{@$userID}" {/if}src="{@$__wcf->getPath()}icon/{@$action}1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.user.{@$action}{/lang}</h1>
 	</hgroup>
 </header>
 
 {if $errorField}
-	<p class="wcf-error">{lang}wcf.global.form.error{/lang}</p>
+	<p class="error">{lang}wcf.global.form.error{/lang}</p>
 {/if}
 
 {if $userID|isset && $__wcf->user->userID == $userID}
-	<p class="wcf-warning">{lang}wcf.acp.user.edit.warning.selfEdit{/lang}</p>	
+	<p class="warning">{lang}wcf.acp.user.edit.warning.selfEdit{/lang}</p>	
 {/if}
 
 {if $success|isset}
-	<p class="wcf-success">{lang}wcf.global.form.{@$action}.success{/lang}</p>	
+	<p class="success">{lang}wcf.global.form.{@$action}.success{/lang}</p>	
 {/if}
 
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
 	<nav>
-		<ul class="wcf-largeButtons">
-			<li><a href="{link controller='UserList'}{/link}" title="{lang}wcf.acp.menu.link.user.list{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/users1.svg" alt="" /> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
-			<li><a href="{link controller='UserSearch'}{/link}" title="{lang}wcf.acp.user.search{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/search1.svg" alt="" /> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
+		<ul>
+			<li><a href="{link controller='UserList'}{/link}" title="{lang}wcf.acp.menu.link.user.list{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/users1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
+			<li><a href="{link controller='UserSearch'}{/link}" title="{lang}wcf.acp.user.search{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/search1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
 			
 			{event name='largeButtons'}
 		</ul>
@@ -39,13 +39,13 @@
 </div>
 
 <form method="post" action="{if $action == 'add'}{link controller='UserAdd'}{/link}{else}{link controller='UserEdit'}{/link}{/if}">
-	<div class="wcf-box wcf-marginTop wcf-boxPadding wcf-boxDecor wcf-shadow1">
-		<dl{if $errorType.username|isset} class="wcf-formError"{/if}>
+	<div class="container containerPadding marginTop shadow">
+		<dl{if $errorType.username|isset} class="formError"{/if}>
 			<dt><label for="username">{lang}wcf.user.username{/lang}</label></dt>
 			<dd>
 				<input type="text" id="username" name="username" value="{$username}" pattern="^[^,\n]+$" autofocus="autofocus" class="medium" />
 				{if $errorType.username|isset}
-					<small class="wcf-innerError">
+					<small class="innerError">
 						{if $errorType.username == 'empty'}
 							{lang}wcf.global.form.error.empty{/lang}
 						{else}
@@ -79,12 +79,12 @@
 			<fieldset>
 				<legend>{lang}wcf.user.email{/lang}</legend>
 				
-				<dl{if $errorType.email|isset} class="wcf-formError"{/if}>
+				<dl{if $errorType.email|isset} class="formError"{/if}>
 					<dt><label for="email">{lang}wcf.user.email{/lang}</label></dt>
 					<dd>	
 						<input type="email" id="email" name="email" value="{$email}" required="required" class="medium" />
 						{if $errorType.email|isset}
-							<small class="wcf-innerError">
+							<small class="innerError">
 								{if $errorType.email == 'empty'}
 									{lang}wcf.global.form.error.empty{/lang}
 								{else}
@@ -95,12 +95,12 @@
 					</dd>
 				</dl>
 				
-				<dl{if $errorType.confirmEmail|isset} class="wcf-formError"{/if}>
+				<dl{if $errorType.confirmEmail|isset} class="formError"{/if}>
 					<dt><label for="confirmEmail">{lang}wcf.user.confirmEmail{/lang}</label></dt>
 					<dd>
 						<input type="email" id="confirmEmail" name="confirmEmail" value="{$confirmEmail}" required="required" class="medium" />
 						{if $errorType.confirmEmail|isset}
-							<small class="wcf-innerError">
+							<small class="innerError">
 								{lang}wcf.user.confirmEmail.error.{@$errorType.confirmEmail}{/lang}
 							</small>
 						{/if}
@@ -113,12 +113,12 @@
 			<fieldset>
 				<legend>{lang}wcf.user.password{/lang}</legend>
 				
-				<dl{if $errorType.password|isset} class="wcf-formError"{/if}>
+				<dl{if $errorType.password|isset} class="formError"{/if}>
 					<dt><label for="password">{lang}wcf.user.password{/lang}</label></dt>
 					<dd>
 						<input type="password" id="password" name="password" value="{$password}"{if $action == 'add'} required="required"{/if} class="medium" />
 						{if $errorType.password|isset}
-							<small class="wcf-innerError">
+							<small class="innerError">
 								{if $errorType.password == 'empty'}
 									{lang}wcf.global.form.error.empty{/lang}
 								{else}
@@ -129,12 +129,12 @@
 					</dd>
 				</dl>
 				
-				<dl{if $errorType.confirmPassword|isset} class="wcf-formError"{/if}>
+				<dl{if $errorType.confirmPassword|isset} class="formError"{/if}>
 					<dt><label for="confirmPassword">{lang}wcf.user.confirmPassword{/lang}</label></dt>
 					<dd>
 						<input type="password" id="confirmPassword" name="confirmPassword" value="{$confirmPassword}"{if $action == 'add'} required="required"{/if} class="medium" />
 						{if $errorType.confirmPassword|isset}
-							<small class="wcf-innerError">
+							<small class="innerError">
 								{lang}wcf.user.confirmPassword.error.{@$errorType.confirmPassword}{/lang}
 							</small>
 						{/if}
@@ -146,8 +146,8 @@
 		{event name='fieldsets'}
 		
 		{if $optionTree|count || $additionalTabs|isset}
-			<div class="wcf-tabMenuContainer">
-				<nav class="wcf-tabMenu">
+			<div class="tabMenuContainer">
+				<nav class="tabMenu">
 					<ul>
 						{foreach from=$optionTree item=categoryLevel1}
 							<li><a href="#{@$categoryLevel1[object]->categoryName}">{lang}wcf.user.option.category.{@$categoryLevel1[object]->categoryName}{/lang}</a></li>
@@ -158,8 +158,8 @@
 				</nav>
 			
 				{foreach from=$optionTree item=categoryLevel1}
-					<div id="{@$categoryLevel1[object]->categoryName}" class="wcf-box wcf-boxPadding wcf-tabMenuContent">
-						<hgroup class="wcf-subHeading">
+					<div id="{@$categoryLevel1[object]->categoryName}" class="container containerPadding tabMenuContent hidden">
+						<hgroup class="boxSubHeadline">
 							<h1>{lang}wcf.user.option.category.{@$categoryLevel1[object]->categoryName}{/lang}</h1>
 						</hgroup>
 					
@@ -207,11 +207,9 @@
 		{/if}
 	</div>
 	
-	<div class="wcf-formSubmit">
-		<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
+	<div class="formSubmit">
 		<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
-		{@SID_INPUT_TAG}
- 		<input type="hidden" name="action" value="{@$action}" />
+		<input type="hidden" name="action" value="{@$action}" />
  		{if $userID|isset}<input type="hidden" name="id" value="{@$userID}" />{/if}
  	</div>
 </form>
diff --git a/wcfsetup/install/files/acp/templates/userGroupAdd.tpl b/wcfsetup/install/files/acp/templates/userGroupAdd.tpl
index a3feb3745a..a7b520b025 100644
--- a/wcfsetup/install/files/acp/templates/userGroupAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/userGroupAdd.tpl
@@ -12,29 +12,29 @@
 	//]]>
 </script>
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/{@$action}1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/{@$action}1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.group.{@$action}{/lang}</h1>
 	</hgroup>
 </header>
 
 {if $errorField}
-	<p class="wcf-error">{lang}wcf.global.form.error{/lang}</p>
+	<p class="error">{lang}wcf.global.form.error{/lang}</p>
 {/if}
 
 {if $warningSelfEdit|isset}
-	<p class="wcf-warning">{lang}wcf.acp.group.edit.warning.selfIsMember{/lang}</p>	
+	<p class="warning">{lang}wcf.acp.group.edit.warning.selfIsMember{/lang}</p>	
 {/if}
 
 {if $success|isset}
-	<p class="wcf-success">{lang}wcf.global.form.{@$action}.success{/lang}</p>	
+	<p class="success">{lang}wcf.global.form.{@$action}.success{/lang}</p>	
 {/if}
 
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
 	<nav>
-		<ul class="wcf-largeButtons">
-			<li><a href="{link controller='UserGroupList'}{/link}" title="{lang}wcf.acp.menu.link.group.list{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/users1.svg" alt="" /> <span>{lang}wcf.acp.menu.link.group.list{/lang}</span></a></li>
+		<ul>
+			<li><a href="{link controller='UserGroupList'}{/link}" title="{lang}wcf.acp.menu.link.group.list{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/users1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.menu.link.group.list{/lang}</span></a></li>
 			
 			{event name='largeButtons'}
 		</ul>
@@ -42,8 +42,7 @@
 </div>
 
 <form method="post" action="{if $action == 'add'}{link controller='UserGroupAdd'}{/link}{else}{link controller='UserGroupEdit'}{/link}{/if}">
-	<div class="wcf-box wcf-marginTop wcf-boxPadding wcf-boxDecor">
-		
+	<div class="container containerPadding marginTop shadow">
 		<fieldset>
 			<legend>{lang}wcf.acp.group.data{/lang}</legend>
 			
@@ -52,7 +51,7 @@
 				<dd>
 					<input type="text" id="groupName" name="groupName" value="{$i18nPlainValues['groupName']}" autofocus="autofocus" class="medium" />
 					{if $errorType.groupName|isset}
-						<small class="wcf-innerError">
+						<small class="innerError">
 							{if $errorType.groupName == 'empty'}
 								{lang}wcf.global.form.error.empty{/lang}
 							{else}
@@ -69,8 +68,8 @@
 		
 		{event name='fieldsets'}
 		
-		<div class="wcf-tabMenuContainer" data-active="{$activeMenuItem}" data-store="activeTabMenuItem">
-			<nav class="wcf-tabMenu">
+		<div class="tabMenuContainer" data-active="{$activeMenuItem}" data-store="activeTabMenuItem">
+			<nav class="tabMenu">
 				<ul>
 					{foreach from=$optionTree item=categoryLevel1}
 						<li><a href="#{@$categoryLevel1[object]->categoryName}">{lang}wcf.acp.group.option.category.{@$categoryLevel1[object]->categoryName}{/lang}</a></li>
@@ -79,8 +78,8 @@
 			</nav>
 			
 			{foreach from=$optionTree item=categoryLevel1}
-				<div id="{@$categoryLevel1[object]->categoryName}" class="wcf-box wcf-boxPadding wcf-tabMenuContainer wcf-tabMenuContent" data-active="{$activeTabMenuItem}" data-store="activeMenuItem">
-					<nav class="wcf-menu">
+				<div id="{@$categoryLevel1[object]->categoryName}" class="container containerPadding tabMenuContainer tabMenuContent" data-active="{$activeTabMenuItem}" data-store="activeMenuItem">
+					<nav class="menu">
 						<ul>
 							{foreach from=$categoryLevel1[categories] item=$categoryLevel2}
 								<li><a href="#{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}">{lang}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}{/lang}</a></li>
@@ -90,7 +89,7 @@
 					
 					{foreach from=$categoryLevel1[categories] item=categoryLevel2}
 						<div id="{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}" class="hidden">
-							<hgroup class="wcf-subHeading">
+							<hgroup class="boxSubHeadline">
 								<h1>{lang}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}{/lang}</h1>
 								{hascontent}<h2>{content}{lang __optional=true}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}.description{/lang}{/content}</h2>{/hascontent}
 							</hgroup>
@@ -118,11 +117,9 @@
 		</div>
 	</div>
 	
-	<div class="wcf-formSubmit">
-		<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
+	<div class="formSubmit">
 		<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
-		{@SID_INPUT_TAG}
- 		<input type="hidden" name="action" value="{@$action}" />
+		<input type="hidden" name="action" value="{@$action}" />
  		{if $groupID|isset}<input type="hidden" name="id" value="{@$groupID}" />{/if}
  		<input type="hidden" id="activeTabMenuItem" name="activeTabMenuItem" value="{$activeTabMenuItem}" />
  		<input type="hidden" id="activeMenuItem" name="activeMenuItem" value="{$activeMenuItem}" />
diff --git a/wcfsetup/install/files/acp/templates/userGroupList.tpl b/wcfsetup/install/files/acp/templates/userGroupList.tpl
index e290e52185..9c32d86362 100644
--- a/wcfsetup/install/files/acp/templates/userGroupList.tpl
+++ b/wcfsetup/install/files/acp/templates/userGroupList.tpl
@@ -8,18 +8,18 @@
 	//]]>
 </script>
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/users1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/users1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.group.list{/lang}</h1>
 	</hgroup>
 </header>
 
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
 	{pages print=true assign=pagesLinks controller="UserGroupList" link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}
 	<nav>
-		<ul class="wcf-largeButtons">
-			<li><a href="{link controller='UserGroupAdd'}{/link}" title="{lang}wcf.acp.group.add{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.group.add{/lang}</span></a></li>
+		<ul>
+			<li><a href="{link controller='UserGroupAdd'}{/link}" title="{lang}wcf.acp.group.add{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.group.add{/lang}</span></a></li>
 			
 			{event name='largeButtons'}
 		</ul>
@@ -27,12 +27,12 @@
 </div>
 
 {hascontent}
-	<div class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
+	<div class="tabularBox tabularBoxTitle marginTop shadow">
 		<hgroup>
-			<h1>{lang}wcf.acp.group.list{/lang} <span class="wcf-badge" title="{lang}wcf.acp.group.list.count{/lang}">{#$items}</span></h1>
+			<h1>{lang}wcf.acp.group.list{/lang} <span class="badge" title="{lang}wcf.acp.group.list.count{/lang}">{#$items}</span></h1>
 		</hgroup>
 		
-		<table class="wcf-table big">
+		<table class="table">
 			<thead>
 				<tr>
 					<th class="columnID columnGroupID{if $sortField == 'groupID'} active{/if}" colspan="2"><a href="{link controller='UserGroupList'}pageNo={@$pageNo}&sortField=groupID&sortOrder={if $sortField == 'groupID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'groupID'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
@@ -49,14 +49,14 @@
 						<tr id="groupContainer{@$group->groupID}" class="jsUserGroupRow">
 							<td class="columnIcon">
 								{if $group->isEditable()}
-									<a href="{link controller='UserGroupEdit' id=$group->groupID}{/link}"><img src="{@$__wcf->getPath()}icon/edit1.svg" alt="" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip" /></a>
+									<a href="{link controller='UserGroupEdit' id=$group->groupID}{/link}"><img src="{@$__wcf->getPath()}icon/edit1.svg" alt="" title="{lang}wcf.global.button.edit{/lang}" class="icon16 jsTooltip" /></a>
 								{else}
-									<img src="{@$__wcf->getPath()}icon/edit1D.svg" alt="" title="{lang}wcf.acp.group.edit{/lang}" />
+									<img src="{@$__wcf->getPath()}icon/edit1D.svg" alt="" title="{lang}wcf.acp.group.edit{/lang}" class="icon16" />
 								{/if}
 								{if $group->isDeletable()}
-									<img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" class="jsDeleteButton jsTooltip" data-object-id="{@$group->groupID}" data-confirm-message="{lang}wcf.acp.group.delete.sure{/lang}" />
+									<img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" class="icon16 jsDeleteButton jsTooltip" data-object-id="{@$group->groupID}" data-confirm-message="{lang}wcf.acp.group.delete.sure{/lang}" />
 								{else}
-									<img src="{@$__wcf->getPath()}icon/delete1D.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" />
+									<img src="{@$__wcf->getPath()}icon/delete1D.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" class="icon16" />
 								{/if}
 								
 								{event name='buttons'}
@@ -74,11 +74,11 @@
 		
 	</div>
 	
-	<div class="wcf-contentFooter">
+	<div class="contentNavigation">
 		{@$pagesLinks}
 		<nav>
-			<ul class="wcf-largeButtons">
-				<li><a href="{link controller='UserGroupAdd'}{/link}" title="{lang}wcf.acp.group.add{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.group.add{/lang}</span></a></li>
+			<ul>
+				<li><a href="{link controller='UserGroupAdd'}{/link}" title="{lang}wcf.acp.group.add{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.group.add{/lang}</span></a></li>
 				
 				{event name='largeButtons'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/userList.tpl b/wcfsetup/install/files/acp/templates/userList.tpl
index 55f00e66c3..248379fb9c 100644
--- a/wcfsetup/install/files/acp/templates/userList.tpl
+++ b/wcfsetup/install/files/acp/templates/userList.tpl
@@ -19,32 +19,31 @@
 	//]]>
 </script>
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/{if $searchID}search{else}user{/if}1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/{if $searchID}search{else}user{/if}1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.user.{if $searchID}search{else}list{/if}{/lang}</h1>
-		<h2>{if $searchID}{lang}wcf.acp.user.search.matches{/lang}{/if}</h2><!-- ToDo: deprecated display -->
 	</hgroup>
 </header>
 
 {assign var=encodedURL value=$url|rawurlencode}
 {assign var=encodedAction value=$action|rawurlencode}
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
 	{pages print=true assign=pagesLinks controller="UserList" link="pageNo=%d&searchID=$searchID&action=$encodedAction&sortField=$sortField&sortOrder=$sortOrder"}
 	
 	<nav>
-		<ul class="wcf-largeButtons">
+		<ul>
 			{if $__wcf->session->getPermission('admin.user.canAddUser')}
-				<li><a href="{link controller='UserAdd'}{/link}" title="{lang}wcf.acp.user.add{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
+				<li><a href="{link controller='UserAdd'}{/link}" title="{lang}wcf.acp.user.add{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
 			{/if}
-			<li><a href="{link controller='UserSearch'}{/link}" title="{lang}wcf.acp.user.search{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/search1.svg" alt="" /> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
+			<li><a href="{link controller='UserSearch'}{/link}" title="{lang}wcf.acp.user.search{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/search1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
 			
 			{event name='largeButtons'}
 		</ul>
 	</nav>
 </div>
 
-<div id="userTableContainer" class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
+<div id="userTableContainer" class="tabularBox marginTop shadow">
 	<nav class="wcf-menu">
 		<ul>
 			<li{if $action == ''} class="active"{/if}><a href="{link controller='UserList'}{/link}"><span>{lang}wcf.acp.user.list.all{/lang}</span> <span class="wcf-badge" title="{lang}wcf.acp.user.list.count{/lang}">{#$items}</span></a></li>
@@ -54,7 +53,7 @@
 	</nav>
 	
 	{hascontent}
-		<table data-type="com.woltlab.wcf.user" class="wcf-table jsClipboardContainer">
+		<table data-type="com.woltlab.wcf.user" class="table jsClipboardContainer">
 			<thead>
 				<tr>
 					<th class="columnMark"><label><input type="checkbox" class="jsClipboardMarkAll" /></label></th>
@@ -76,14 +75,14 @@
 							<td class="columnMark"><input type="checkbox" class="jsClipboardItem" data-object-id="{@$user->userID}" /></td>
 							<td class="columnIcon">
 								{if $user->editable}
-									<a href="{link controller='UserEdit' id=$user->userID}{/link}"><img src="{@$__wcf->getPath()}icon/edit1.svg" alt="" title="{lang}wcf.acp.user.edit{/lang}" class="jsTooltip" /></a>
+									<a href="{link controller='UserEdit' id=$user->userID}{/link}"><img src="{@$__wcf->getPath()}icon/edit1.svg" alt="" title="{lang}wcf.acp.user.edit{/lang}" class="icon16 jsTooltip" /></a>
 								{else}
-									<img src="{@$__wcf->getPath()}icon/edit1D.svg" alt="" title="{lang}wcf.acp.user.edit{/lang}" />
+									<img src="{@$__wcf->getPath()}icon/edit1D.svg" alt="" title="{lang}wcf.acp.user.edit{/lang}" class="icon16" />
 								{/if}
 								{if $user->deletable}
-									<img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.acp.user.delete{/lang}" class="jsTooltip jsDeleteButton" data-object-id="{@$user->userID}" data-confirm-message="{lang}wcf.acp.user.delete.sure{/lang}" />
+									<img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.acp.user.delete{/lang}" class="icon16 jsTooltip jsDeleteButton" data-object-id="{@$user->userID}" data-confirm-message="{lang}wcf.acp.user.delete.sure{/lang}" />
 								{else}
-									<img src="{@$__wcf->getPath()}icon/delete1D.svg" alt="" title="{lang}wcf.acp.user.delete{/lang}" />
+									<img src="{@$__wcf->getPath()}icon/delete1D.svg" alt="" title="{lang}wcf.acp.user.delete{/lang}" class="icon16" />
 								{/if}
 						
 								{event name='buttons'}
@@ -104,17 +103,17 @@
 		
 	</div>
 	
-	<div class="wcf-contentFooter">
+	<div class="contentNavigation">
 		{@$pagesLinks}
 		
 		<div class="wcf-clipboardEditor jsClipboardEditor" data-types="[ 'com.woltlab.wcf.user' ]"></div>
 		
 		<nav>
-			<ul class="wcf-largeButtons">
+			<ul>
 				{if $__wcf->session->getPermission('admin.user.canAddUser')}
-					<li><a href="{link controller='UserAdd'}{/link}" title="{lang}wcf.acp.user.add{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
+					<li><a href="{link controller='UserAdd'}{/link}" title="{lang}wcf.acp.user.add{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
 				{/if}
-				<li><a href="{link controller='UserSearch'}{/link}" title="{lang}wcf.acp.user.search{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/search1.svg" alt="" /> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
+				<li><a href="{link controller='UserSearch'}{/link}" title="{lang}wcf.acp.user.search{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/search1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
 				
 				{event name='largeButtons'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/userMail.tpl b/wcfsetup/install/files/acp/templates/userMail.tpl
index ac189bff96..32af24703c 100644
--- a/wcfsetup/install/files/acp/templates/userMail.tpl
+++ b/wcfsetup/install/files/acp/templates/userMail.tpl
@@ -12,9 +12,9 @@
 	</script>
 {/if}
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/email1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/email1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>
 			{if $action == 'all'}
 				{lang}wcf.acp.user.sendMail.all{/lang}
@@ -28,14 +28,14 @@
 </header>
 
 {if $errorField}
-	<p class="wcf-error">{lang}wcf.global.form.error{/lang}</p>
+	<p class="error">{lang}wcf.global.form.error{/lang}</p>
 {/if}
 
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
 	<nav>
-		<ul class="wcf-largeButtons">
-			<li><a href="{link controller='UserList'}{/link}" title="{lang}wcf.acp.menu.link.user.list{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/users1.svg" alt="" /> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
-			<li><a href="{link controller='UserSearch'}{/link}" title="{lang}wcf.acp.user.search{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/search1.svg" alt="" /> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
+		<ul>
+			<li><a href="{link controller='UserList'}{/link}" title="{lang}wcf.acp.menu.link.user.list{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/users1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
+			<li><a href="{link controller='UserSearch'}{/link}" title="{lang}wcf.acp.user.search{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/search1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
 			
 			{event name='largeButtons'}
 		</ul>
@@ -43,8 +43,7 @@
 </div>
 
 <form method="post" action="{link controller='UserMail'}{/link}">
-	<div class="wcf-box wcf-marginTop wcf-boxPadding wcf-boxDecor">
-		
+	<div class="container containerPadding marginTop shadow">
 		{if $action == ''}
 			<fieldset>
 				<legend>{lang}wcf.acp.user.sendMail.markedUsers{/lang}</legend>
@@ -59,7 +58,7 @@
 			<fieldset>
 				<legend>{lang}wcf.acp.user.sendMail.groups{/lang}</legend>
 				
-				<dl{if $errorField == 'groupIDs'} class="wcf-formError"{/if}>
+				<dl{if $errorField == 'groupIDs'} class="formError"{/if}>
 					<dt>
 						<label>{lang}wcf.acp.user.groups{/lang}</label>
 					</dt>
@@ -74,7 +73,7 @@
 							</dl>
 						</fieldset>
 						{if $errorField == 'groupIDs'}
-							<small class="wcf-innerError">
+							<small class="innerError">
 								{if $errorType == 'empty'}
 									{lang}wcf.global.form.error.empty{/lang}
 								{else}
@@ -90,12 +89,12 @@
 		<fieldset>
 			<legend>{lang}wcf.acp.user.sendMail.mail{/lang}</legend>
 			
-			<dl{if $errorField == 'subject'} class="wcf-formError"{/if}>
+			<dl{if $errorField == 'subject'} class="formError"{/if}>
 				<dt><label for="subject">{lang}wcf.acp.user.sendMail.subject{/lang}</label></dt>
 				<dd>
 					<input type="text" id="subject" name="subject" value="{$subject}" autofocus="autofocus" placeholder="enter subject" class="long" />
 					{if $errorField == 'subject'}
-						<small class="wcf-innerError">
+						<small class="innerError">
 							{if $errorType == 'empty'}
 								{lang}wcf.global.form.error.empty{/lang}
 							{else}
@@ -106,12 +105,12 @@
 				</dd>
 			</dl>
 			
-			<dl{if $errorField == 'from'} class="wcf-formError"{/if}>
+			<dl{if $errorField == 'from'} class="formError"{/if}>
 				<dt><label for="from">{lang}wcf.acp.user.sendMail.from{/lang}</label></dt>
 				<dd>
 					<input type="text" id="from" name="from" value="{$from}" class="medium" />
 					{if $errorField == 'from'}
-						<small class="wcf-innerError">
+						<small class="innerError">
 							{if $errorType == 'empty'}
 								{lang}wcf.global.form.error.empty{/lang}
 							{else}
@@ -123,12 +122,12 @@
 				</dd>
 			</dl>
 			
-			<dl{if $errorField == 'text'} class="wcf-formError"{/if}>
+			<dl{if $errorField == 'text'} class="formError"{/if}>
 				<dt><label for="text">{lang}wcf.acp.user.sendMail.text{/lang}</label></dt>
 				<dd>
 					<textarea id="text" name="text" rows="15" cols="40" class="long">{$text}</textarea>
 					{if $errorField == 'text'}
-						<small class="wcf-innerError">
+						<small class="innerError">
 							{if $errorType == 'empty'}
 								{lang}wcf.global.form.error.empty{/lang}
 							{else}
@@ -152,11 +151,9 @@
 		{event name='fieldsets'}
 	</div>
 	
-	<div class="wcf-formSubmit">
-		<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
+	<div class="formSubmit">
 		<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
 		<input type="hidden" name="action" value="{@$action}" />
- 		{@SID_INPUT_TAG}
  		<input type="hidden" name="userIDs" value="{@$userIDs}" />
  	</div>
 </form>
diff --git a/wcfsetup/install/files/acp/templates/userSearch.tpl b/wcfsetup/install/files/acp/templates/userSearch.tpl
index 58ec577b89..caee11afe1 100644
--- a/wcfsetup/install/files/acp/templates/userSearch.tpl
+++ b/wcfsetup/install/files/acp/templates/userSearch.tpl
@@ -8,30 +8,30 @@
 	//]]>
 </script>
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/search1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/search1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.user.search{/lang}</h1>
 	</hgroup>
 </header>
 
 {if $errorField == 'search'}
-	<p class="wcf-error">{lang}wcf.acp.user.search.error.noMatches{/lang}</p>
+	<p class="error">{lang}wcf.acp.user.search.error.noMatches{/lang}</p>
 {/if}
 
 {*if $deletedUsers}
-	<p class="wcf-success">{lang}wcf.acp.user.delete.success{/lang}</p>	
+	<p class="success">{lang}wcf.acp.user.delete.success{/lang}</p>	
 {elseif $deletedUsers === 0}
-	<p class="wcf-error">{lang}wcf.acp.user.delete.error{/lang}</p>	
+	<p class="error">{lang}wcf.acp.user.delete.error{/lang}</p>	
 {/if*}
 
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
 	<nav>
-		<ul class="wcf-largeButtons">
+		<ul>
 			{if $__wcf->session->getPermission('admin.user.canAddUser')}
-				<li><a href="{link controller='UserAdd'}{/link}" title="{lang}wcf.acp.user.add{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
+				<li><a href="{link controller='UserAdd'}{/link}" title="{lang}wcf.acp.user.add{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
 			{/if}
-			<li><a href="{link controller='UserList'}{/link}" title="{lang}wcf.acp.menu.link.user.list{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/users1.svg" alt="" /> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
+			<li><a href="{link controller='UserList'}{/link}" title="{lang}wcf.acp.menu.link.user.list{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/users1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
 			
 			{event name='largeButtons'}
 		</ul>
@@ -39,8 +39,7 @@
 </div>
 
 <form method="post" action="{link controller='UserSearch'}{/link}">
-	<div class="wcf-box wcf-marginTop wcf-boxPadding wcf-boxDecor">
-		
+	<div class="container containerPadding marginTop shadow">
 		<fieldset>
 			<legend>{lang}wcf.acp.user.search.conditions.general{/lang}</legend>
 			
@@ -112,8 +111,8 @@
 		
 		{event name='fieldsets'}
 		
-		<div class="wcf-tabMenuContainer">
-			<nav class="wcf-tabMenu">
+		<div class="tabMenuContainer">
+			<nav class="tabMenu">
 				<ul>
 					{if $optionTree|count}
 						<li><a href="#profile">{lang}wcf.acp.user.search.conditions.profile{/lang}</a></li>
@@ -126,8 +125,8 @@
 			</nav>
 			
 			{if $optionTree|count}
-				<div id="profile" class="wcf-box wcf-boxPadding wcf-tabMenuContent hidden">
-					<hgroup class="wcf-subHeading">
+				<div id="profile" class="container containerPadding tabMenuContent hidden">
+					<hgroup class="boxSubHeadline">
 						<h1>{lang}wcf.acp.user.search.conditions.profile{/lang}</h1>
 					</hgroup>
 					
@@ -146,8 +145,8 @@
 		
 			{event name='tabMenuContent'}
 		
-			<div id="resultOptions" class="wcf-box wcf-boxPadding wcf-tabMenuContent hidden">
-				<hgroup class="wcf-subHeading">
+			<div id="resultOptions" class="container containerPadding tabMenuContent hidden">
+				<hgroup class="boxSubHeadline">
 					<h1>{lang}wcf.acp.user.search.display{/lang}</h1>
 				</hgroup>
 				
@@ -231,10 +230,8 @@
 		</div>
 	</div>
 	
-	<div class="wcf-formSubmit">
-		<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
+	<div class="formSubmit">
 		<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
-		{@SID_INPUT_TAG}
  	</div>
 </form>
 
diff --git a/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl b/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl
index 67ad39ed87..79fe939c4e 100644
--- a/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl
+++ b/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl
@@ -60,27 +60,26 @@
 	//]]>
 </script>
 
-<header class="wcf-container wcf-mainHeading">
-	<img src="{@$__wcf->getPath()}icon/user1.svg" alt="" class="wcf-containerIcon" />
-	<hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+	<img src="{@$__wcf->getPath()}icon/user1.svg" alt="" class="icon48" />
+	<hgroup>
 		<h1>{lang}wcf.acp.user.massProcessing{/lang}</h1>
 	</hgroup>
 </header>
 
 {if $errorField}
-	<p class="wcf-error">{lang}wcf.global.form.error{/lang}</p>
+	<p class="error">{lang}wcf.global.form.error{/lang}</p>
 {/if}
 
-<p class="wcf-warning">{lang}wcf.acp.user.massProcessing.warning{/lang}</p>
+<p class="warning">{lang}wcf.acp.user.massProcessing.warning{/lang}</p>
 
 {if $affectedUsers|isset}
-	<p class="wcf-success">{lang}wcf.acp.user.massProcessing.success{/lang}</p>	
+	<p class="success">{lang}wcf.acp.user.massProcessing.success{/lang}</p>	
 {/if}
 
 <form method="post" action="{link controller='UsersMassProcessing'}{/link}">
-	<div class="wcf-box wcf-marginTop wcf-boxPadding wcf-shadow1">
-		
-		<hgroup class="wcf-subHeading">
+	<div class="container containerPadding marginTop shadow">
+		<hgroup class="boxSubHeadline">
 			<h1>{lang}wcf.acp.user.massProcessing.conditions{/lang}</h1>
 		</hgroup>
 		
@@ -140,8 +139,8 @@
 		{event name='fieldsets'}
 		
 		{hascontent}
-			<div class="wcf-tabMenuContainer">
-				<nav class="wcf-tabMenu">
+			<div class="tabMenuContainer">
+				<nav class="tabMenu">
 					<ul>
 						{content}
 							{if $options|count}
@@ -154,8 +153,8 @@
 				</nav>
 				
 				{if $options|count}
-					<div id="profile" class="wcf-box wcf-boxPadding wcf-tabMenuContent hidden">
-						<hgroup class="wcf-subHeading">
+					<div id="profile" class="container containerPadding tabMenuContent hidden">
+						<hgroup class="boxSubHeadline">
 							<h1>{lang}wcf.acp.user.search.conditions.profile{/lang}</h1>
 						</hgroup>
 						
@@ -168,12 +167,12 @@
 		{/hascontent}
 	</div>
 	
-	<div class="wcf-box wcf-marginTop wcf-boxPadding wcf-boxDecor">
-		<hgroup class="wcf-subHeading">
+	<div class="container containerPadding marginTop shadow">
+		<hgroup class="boxSubHeadline">
 			<h1>{lang}wcf.acp.user.massProcessing.action{/lang}</h1>
 		</hgroup>
 			
-		<dl{if $errorField == 'action'} class="wcf-formError"{/if}>
+		<dl{if $errorField == 'action'} class="formError"{/if}>
 			<dt><label>{lang}wcf.acp.user.massProcessing.action{/lang}</label></dt>
 			<dd>
 				<fieldset>
@@ -195,7 +194,7 @@
 							{event name='additionalActions'}
 							
 							{if $errorField == 'action'}
-								<small class="wcf-innerError">
+								<small class="innerError">
 									{if $errorType == 'empty'}{lang}wcf.global.form.error.empty{/lang}{/if}
 								</small>
 							{/if}
@@ -209,12 +208,12 @@
 			<fieldset>
 				<legend>{lang}wcf.acp.user.sendMail.mail{/lang}</legend>
 				
-				<dl{if $errorField == 'from'} class="wcf-formError"{/if}>
+				<dl{if $errorField == 'from'} class="formError"{/if}>
 					<dt><label for="from">{lang}wcf.acp.user.sendMail.from{/lang}</label></dt>
 					<dd>
 						<input type="email" id="from" name="from" value="{$from}" class="medium" />
 						{if $errorField == 'from'}
-							<small class="wcf-innerError">
+							<small class="innerError">
 								{if $errorType == 'empty'}{lang}wcf.global.form.error.empty{/lang}{/if}
 							</small>
 						{/if}
@@ -222,12 +221,12 @@
 					</dd>
 				</dl>
 				
-				<dl{if $errorField == 'subject'} class="wcf-formError"{/if}>
+				<dl{if $errorField == 'subject'} class="formError"{/if}>
 					<dt><label for="subject">{lang}wcf.acp.user.sendMail.subject{/lang}</label></dt>
 					<dd>
 						<input type="text" id="subject" name="subject" value="{$subject}" class="long" />
 						{if $errorField == 'subject'}
-							<small class="wcf-innerError">
+							<small class="innerError">
 								{if $errorType == 'empty'}{lang}wcf.global.form.error.empty{/lang}{/if}
 							</small>
 						{/if}
@@ -235,12 +234,12 @@
 					</dd>
 				</dl>
 				
-				<dl{if $errorField == 'text'} class="wcf-formError"{/if}>
+				<dl{if $errorField == 'text'} class="formError"{/if}>
 					<dt><label for="text">{lang}wcf.acp.user.sendMail.text{/lang}</label></dt>
 					<dd>
 						<textarea id="text" name="text" rows="15" cols="40">{$text}</textarea>
 						{if $errorField == 'text'}
-							<small class="wcf-innerError" class="long">
+							<small class="innerError" class="long">
 								{if $errorType == 'empty'}{lang}wcf.global.form.error.empty{/lang}{/if}
 							</small>
 						{/if}
@@ -295,10 +294,10 @@
 				<legend>{lang}wcf.acp.user.groups{/lang}</legend>
 				
 				<dl>
-					<dd{if $errorField == 'assignToGroupIDArray'} class="wcf-formError"{/if}>
+					<dd{if $errorField == 'assignToGroupIDArray'} class="formError"{/if}>
 						{htmlCheckboxes options=$availableGroups name=assignToGroupIDArray selected=$assignToGroupIDArray}
 						{if $errorField == 'assignToGroupIDArray'}
-							<small class="wcf-innerError">
+							<small class="innerError">
 								{if $errorType == 'empty'}{lang}wcf.global.form.error.empty{/lang}{/if}
 							</small>
 						{/if}
@@ -310,10 +309,8 @@
 		{if $additionalActionSettings|isset}{@$additionalActionSettings}{/if}
 	</div>
 	
-	<div class="wcf-formSubmit">
-		<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
+	<div class="formSubmit">
 		<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
-		{@SID_INPUT_TAG}
  	</div>
 </form>
 
diff --git a/wcfsetup/install/files/js/3rdParty/less.min.js b/wcfsetup/install/files/js/3rdParty/less.min.js
index 2becc15c4a..309bf550db 100644
--- a/wcfsetup/install/files/js/3rdParty/less.min.js
+++ b/wcfsetup/install/files/js/3rdParty/less.min.js
@@ -1,9 +1,9 @@
 //
-// LESS - Leaner CSS v1.2.2
+// LESS - Leaner CSS v1.3.0
 // 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='lessStylesheet';/*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
+(function(a,b){function c(b){return a.less[b.split("/")[1]]}function l(){var a=document.getElementsByTagName("style");for(var b=0;b<a.length;b++)a[b].type.match(j)&&(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 m(a,b){for(var c=0;c<d.sheets.length;c++)n(d.sheets[c],a,b,d.sheets.length-(c+1))}function n(b,c,e,f){var h=a.location.href.replace(/[#?].*$/,""),i=b.href.replace(/\?.*$/,""),j=g&&g.getItem(i),k=g&&g.getItem(i+":timestamp"),l={css:j,timestamp:k};/^(https?|file):/.test(i)||(i.charAt(0)=="/"?i=a.location.protocol+"//"+a.location.host+i:i=h.slice(0,h.lastIndexOf("/")+1)+i);var m=i.match(/([^\/]+)$/)[1];q(b.href,b.type,function(a,g){if(!e&&l&&g&&(new Date(g)).valueOf()===(new Date(l.timestamp)).valueOf())p(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 u(d,i);try{c(d,e,a,b,{local:!1,lastModified:g,remaining:f}),s(document.getElementById("less-error-message:"+o(i)))}catch(d){u(d,i)}})}catch(h){u(h,i)}},function(a,b){throw new Error("Couldn't load "+b+" ("+a+")")})}function o(a){return a.replace(/^[a-z]+:\/\/?[^\/]+/,"").replace(/^\//,"").replace(/\?.*$/,"").replace(/\.[^\.\/]+$/,"").replace(/[^\.\w-]+/g,"-").replace(/\./g,":")}function p(a,b,c){var d,e=b.href?b.href.replace(/\?.*$/,""):"",f="less:"+(b.title||o(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(h){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&&g&&(t("saving "+e+" to cache."),g.setItem(e,a),g.setItem(e+":timestamp",c))}function q(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 g=r(),h=f?!1:d.async;typeof g.overrideMimeType=="function"&&g.overrideMimeType("text/css"),g.open("GET",a,h),g.setRequestHeader("Accept",b||"text/x-less, text/css; q=0.9, */*; q=0.5"),g.send(null),f?g.status===0||g.status>=200&&g.status<300?c(g.responseText):e(g.status,a):h?g.onreadystatechange=function(){g.readyState==4&&i(g,c,e)}:i(g,c,e)}function r(){if(a.XMLHttpRequest)return new XMLHttpRequest;try{return new ActiveXObject("MSXML2.XMLHTTP.3.0")}catch(b){return t("browser doesn't support AJAX."),null}}function s(a){return a&&a.parentNode.removeChild(a)}function t(a){d.env=="development"&&typeof console!="undefined"&&console.log("less: "+a)}function u(a,b){var c="less-error-message:"+o(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,p([".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,e;typeof environment=="object"&&{}.toString.call(environment)==="[object Environment]"?(typeof a=="undefined"?d={}:d=a.less={},e=d.tree={},d.mode="rhino"):typeof a=="undefined"?(d=exports,e=c("./tree"),d.mode="node"):(typeof a.less=="undefined"&&(a.less={}),d=a.less,e=a.less.tree={},d.mode="browser"),d.Parser=function v(a){function q(){h=k[g],i=f,l=f}function r(){k[g]=h,f=i,l=f}function s(){f>l&&(k[g]=k[g].slice(f-l),l=f)}function t(a){var c,d,e,h,i,j,n,o;if(a instanceof Function)return a.call(m.parsers);if(typeof a=="string")c=b.charAt(f)===a?a:null,e=1,s();else{s();if(c=a.exec(k[g]))e=c[0].length;else return null}if(c){o=f+=e,j=f+k[g].length-e;while(f<j){h=b.charCodeAt(f);if(h!==32&&h!==10&&h!==9)break;f++}return k[g]=k[g].slice(e+(f-o)),l=f,k[g].length===0&&g<k.length-1&&g++,typeof c=="string"?c:c.length===1?c[0]:c}}function u(a,c){var d=t(a);if(!d)v(c||(typeof a=="string"?"expected '"+a+"' got '"+b.charAt(f)+"'":"unexpected token"));else return d}function v(a,b){throw{index:f,type:b||"Syntax",message:a}}function w(a){return typeof a=="string"?b.charAt(f)===a:a.test(k[g])?!0:!1}function x(a){return d.mode==="node"?c("path").basename(a):a.match(/[^\/]+$/)[0]}function y(a,c){return a.filename&&c.filename&&a.filename!==c.filename?m.imports.contents[x(a.filename)]:b}function z(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 A(a,b){var c=y(a,b),d=z(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&&z(a.call,c).line+1,this.callExtract=g[z(a.call,c).line],this.stack=a.stack,this.column=f,this.extract=[g[e-1],g[e],g[e+1]]}var b,f,g,h,i,j,k,l,m,n=this,o=function(){},p=this.imports={paths:a&&a.paths||[],queue:[],files:{},contents:{},mime:a&&a.mime,error:null,push:function(b,c){var e=this;this.queue.push(b),d.Parser.importer(b,this.paths,function(a,d,f){e.queue.splice(e.queue.indexOf(b),1),e.files[b]=d,e.contents[b]=f,a&&!e.error&&(e.error=a),c(a,d),e.queue.length===0&&o()},a)}};return this.env=a=a||{},this.optimization="optimization"in this.env?this.env.optimization:1,this.env.filename=this.env.filename||null,m={imports:p,parse:function(h,i){var n,p,q,r,s,u,v=[],w,x=null;f=g=l=j=0,b=h.replace(/\r\n/g,"\n"),k=function(c){var d=0,e=/[^"'`\{\}\/\(\)\\]+/g,f=/\/\*(?:[^*]|\*+[^\/*])*\*+\/|\/\/.*/g,g=/"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'|`((?:[^`\\\r\n]|\\.)*)`/g,h=0,i,j=c[0],k;for(var l=0,m,n;l<b.length;l++){e.lastIndex=l,(i=e.exec(b))&&i.index===l&&(l+=i[0].length,j.push(i[0])),m=b.charAt(l),f.lastIndex=g.lastIndex=l,(i=g.exec(b))&&i.index===l&&(l+=i[0].length,j.push(i[0]),m=b.charAt(l)),!k&&m==="/"&&(n=b.charAt(l+1),(n==="/"||n==="*")&&(i=f.exec(b))&&i.index===l&&(l+=i[0].length,j.push(i[0]),m=b.charAt(l)));switch(m){case"{":if(!k){h++,j.push(m);break};case"}":if(!k){h--,j.push(m),c[++d]=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 A({index:l,type:"Parse",message:"missing closing `}`",filename:a.filename},a)),c.map(function(a){return a.join("")})}([[]]);if(x)return i(x);try{n=new e.Ruleset([],t(this.parsers.primary)),n.root=!0}catch(y){return i(new A(y,a))}n.toCSS=function(b){var f,g,h;return function(f,g){var h=[],i;f=f||{},typeof g=="object"&&!Array.isArray(g)&&(g=Object.keys(g).map(function(a){var b=g[a];return b instanceof e.Value||(b instanceof e.Expression||(b=new e.Expression([b])),b=new e.Value([b])),new e.Rule("@"+a,b,!1,0)}),h=[new e.Ruleset(null,g)]);try{var j=b.call(this,{frames:h}).toCSS([],{compress:f.compress||!1})}catch(k){throw new A(k,a)}if(i=m.imports.error)throw i instanceof A?i:new A(i,a);return f.yuicompress&&d.mode==="node"?c("./cssmin").compressor.cssmin(j):f.compress?j.replace(/(\s)+/g,"$1"):j}}(n.eval);if(f<b.length-1){f=j,u=b.split("\n"),s=(b.slice(0,f).match(/\n/g)||"").length+1;for(var z=f,B=-1;z>=0&&b.charAt(z)!=="\n";z--)B++;x={type:"Parse",message:"Syntax Error on line "+s,index:f,filename:a.filename,line:s,column:B,extract:[u[s-2],u[s-1],u[s]]}}this.imports.queue.length>0?o=function(){i(x,n)}:i(x,n)},parsers:{primary:function(){var a,b=[];while((a=t(this.mixin.definition)||t(this.rule)||t(this.ruleset)||t(this.mixin.call)||t(this.comment)||t(this.directive))||t(/^[\s\n]+/))a&&b.push(a);return b},comment:function(){var a;if(b.charAt(f)!=="/")return;if(b.charAt(f+1)==="/")return new e.Comment(t(/^\/\/.*/),!0);if(a=t(/^\/\*(?:[^*]|\*+[^\/*])*\*+\/\n?/))return new e.Comment(a)},entities:{quoted:function(){var a,c=f,d;b.charAt(c)==="~"&&(c++,d=!0);if(b.charAt(c)!=='"'&&b.charAt(c)!=="'")return;d&&t("~");if(a=t(/^"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'/))return new e.Quoted(a[0],a[1]||a[2],d)},keyword:function(){var a;if(a=t(/^[_A-Za-z-][_A-Za-z0-9-]*/))return e.colors.hasOwnProperty(a)?new e.Color(e.colors[a].slice(1)):new e.Keyword(a)},call:function(){var b,c,d=f;if(!(b=/^([\w-]+|%|progid:[\w\.]+)\(/.exec(k[g])))return;b=b[1].toLowerCase();if(b==="url")return null;f+=b.length;if(b==="alpha")return t(this.alpha);t("("),c=t(this.entities.arguments);if(!t(")"))return;if(b)return new e.Call(b,c,d,a.filename)},arguments:function(){var a=[],b;while(b=t(this.entities.assignment)||t(this.expression)){a.push(b);if(!t(","))break}return a},literal:function(){return t(this.entities.dimension)||t(this.entities.color)||t(this.entities.quoted)},assignment:function(){var a,b;if((a=t(/^\w+(?=\s?=)/i))&&t("=")&&(b=t(this.entity)))return new e.Assignment(a,b)},url:function(){var a;if(b.charAt(f)!=="u"||!t(/^url\(/))return;return a=t(this.entities.quoted)||t(this.entities.variable)||t(this.entities.dataURI)||t(/^[-\w%@$\/.&=:;#+?~]+/)||"",u(")"),new e.URL(a.value||a.data||a instanceof e.Variable?a:new e.Anonymous(a),p.paths)},dataURI:function(){var a;if(t(/^data:/)){a={},a.mime=t(/^[^\/]+\/[^,;)]+/)||"",a.charset=t(/^;\s*charset=[^,;)]+/)||"",a.base64=t(/^;\s*base64/)||"",a.data=t(/^,\s*[^)]+/);if(a.data)return a}},variable:function(){var c,d=f;if(b.charAt(f)==="@"&&(c=t(/^@@?[\w-]+/)))return new e.Variable(c,d,a.filename)},color:function(){var a;if(b.charAt(f)==="#"&&(a=t(/^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})/)))return new e.Color(a[1])},dimension:function(){var a,c=b.charCodeAt(f);if(c>57||c<45||c===47)return;if(a=t(/^(-?\d*\.?\d+)(px|%|em|rem|pc|ex|in|deg|s|ms|pt|cm|mm|rad|grad|turn)?/))return new e.Dimension(a[1],a[2])},javascript:function(){var a,c=f,d;b.charAt(c)==="~"&&(c++,d=!0);if(b.charAt(c)!=="`")return;d&&t("~");if(a=t(/^`([^`]*)`/))return new e.JavaScript(a[1],f,d)}},variable:function(){var a;if(b.charAt(f)==="@"&&(a=t(/^(@[\w-]+)\s*:/)))return a[1]},shorthand:function(){var a,b;if(!w(/^[@\w.%-]+\/[@\w.-]+/))return;if((a=t(this.entity))&&t("/")&&(b=t(this.entity)))return new e.Shorthand(a,b)},mixin:{call:function(){var c=[],d,g,h,i=f,j=b.charAt(f),k=!1;if(j!=="."&&j!=="#")return;while(d=t(/^[#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/))c.push(new e.Element(g,d,f)),g=t(">");t("(")&&(h=t(this.entities.arguments))&&t(")"),t(this.important)&&(k=!0);if(c.length>0&&(t(";")||w("}")))return new e.mixin.Call(c,h||[],i,a.filename,k)},definition:function(){var a,c=[],d,g,h,i,j,k=!1;if(b.charAt(f)!=="."&&b.charAt(f)!=="#"||w(/^[^{]*(;|})/))return;q();if(d=t(/^([#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+)\s*\(/)){a=d[1];do{if(b.charAt(f)==="."&&t(/^\.{3}/)){k=!0;break}if(!(h=t(this.entities.variable)||t(this.entities.literal)||t(this.entities.keyword)))break;if(h instanceof e.Variable)if(t(":"))i=u(this.expression,"expected expression"),c.push({name:h.name,value:i});else{if(t(/^\.{3}/)){c.push({name:h.name,variadic:!0}),k=!0;break}c.push({name:h.name})}else c.push({value:h})}while(t(","));u(")"),t(/^when/)&&(j=u(this.conditions,"expected condition")),g=t(this.block);if(g)return new e.mixin.Definition(a,c,g,j,k);r()}}},entity:function(){return t(this.entities.literal)||t(this.entities.variable)||t(this.entities.url)||t(this.entities.call)||t(this.entities.keyword)||t(this.entities.javascript)||t(this.comment)},end:function(){return t(";")||w("}")},alpha:function(){var a;if(!t(/^\(opacity=/i))return;if(a=t(/^\d+/)||t(this.entities.variable))return u(")"),new e.Alpha(a)},element:function(){var a,b,c,d;c=t(this.combinator),a=t(/^(?:\d+\.\d+|\d+)%/)||t(/^(?:[.#]?|:*)(?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/)||t("*")||t(this.attribute)||t(/^\([^)@]+\)/),a||t("(")&&(d=t(this.entities.variable))&&t(")")&&(a=new e.Paren(d));if(a)return new e.Element(c,a,f);if(c.value&&c.value.charAt(0)==="&")return new e.Element(c,null,f)},combinator:function(){var a,c=b.charAt(f);if(c===">"||c==="+"||c==="~"){f++;while(b.charAt(f)===" ")f++;return new e.Combinator(c)}if(c==="&"){a="&",f++,b.charAt(f)===" "&&(a="& ");while(b.charAt(f)===" ")f++;return new e.Combinator(a)}return b.charAt(f-1)===" "?new e.Combinator(" "):new e.Combinator(null)},selector:function(){var a,c,d=[],g,h;if(t("("))return a=t(this.entity),u(")"),new e.Selector([new e.Element("",a,f)]);while(c=t(this.element)){g=b.charAt(f),d.push(c);if(g==="{"||g==="}"||g===";"||g===",")break}if(d.length>0)return new e.Selector(d)},tag:function(){return t(/^[a-zA-Z][a-zA-Z-]*[0-9]?/)||t("*")},attribute:function(){var a="",b,c,d;if(!t("["))return;if(b=t(/^[a-zA-Z-]+/)||t(this.entities.quoted))(d=t(/^[|~*$^]?=/))&&(c=t(this.entities.quoted)||t(/^[\w-]+/))?a=[b,d,c.toCSS?c.toCSS():c].join(""):a=b;if(!t("]"))return;if(a)return"["+a+"]"},block:function(){var a;if(t("{")&&(a=t(this.primary))&&t("}"))return a},ruleset:function(){var b=[],c,d,g;q();while(c=t(this.selector)){b.push(c),t(this.comment);if(!t(","))break;t(this.comment)}if(b.length>0&&(d=t(this.block)))return new e.Ruleset(b,d,a.strictImports);j=f,r()},rule:function(){var a,c,d=b.charAt(f),h,l;q();if(d==="."||d==="#"||d==="&")return;if(a=t(this.variable)||t(this.property)){a.charAt(0)!="@"&&(l=/^([^@+\/'"*`(;{}-]*);/.exec(k[g]))?(f+=l[0].length-1,c=new e.Anonymous(l[1])):a==="font"?c=t(this.font):c=t(this.value),h=t(this.important);if(c&&t(this.end))return new e.Rule(a,c,h,i);j=f,r()}},"import":function(){var a,b,c=f;if(t(/^@import\s+/)&&(a=t(this.entities.quoted)||t(this.entities.url))){b=t(this.mediaFeatures);if(t(";"))return new e.Import(a,p,b,c)}},mediaFeature:function(){var a,b,c=[];do if(a=t(this.entities.keyword))c.push(a);else if(t("(")){b=t(this.property),a=t(this.entity);if(!t(")"))return null;if(b&&a)c.push(new e.Paren(new e.Rule(b,a,null,f,!0)));else if(a)c.push(new e.Paren(a));else return null}while(a);if(c.length>0)return new e.Expression(c)},mediaFeatures:function(){var a,b=[];do if(a=t(this.mediaFeature)){b.push(a);if(!t(","))break}else if(a=t(this.entities.variable)){b.push(a);if(!t(","))break}while(a);return b.length>0?b:null},media:function(){var a,b;if(t(/^@media/)){a=t(this.mediaFeatures);if(b=t(this.block))return new e.Media(b,a)}},directive:function(){var a,c,d,g,h,i;if(b.charAt(f)!=="@")return;if(c=t(this["import"])||t(this.media))return c;if(a=t(/^@page|@keyframes/)||t(/^@(?:-webkit-|-moz-|-o-|-ms-)[a-z0-9-]+/)){g=(t(/^[^{]+/)||"").trim();if(d=t(this.block))return new e.Directive(a+" "+g,d)}else if(a=t(/^@[-a-z]+/))if(a==="@font-face"){if(d=t(this.block))return new e.Directive(a,d)}else if((c=t(this.entity))&&t(";"))return new e.Directive(a,c)},font:function(){var a=[],b=[],c,d,f,g;while(g=t(this.shorthand)||t(this.entity))b.push(g);a.push(new e.Expression(b));if(t(","))while(g=t(this.expression)){a.push(g);if(!t(","))break}return new e.Value(a)},value:function(){var a,b=[],c;while(a=t(this.expression)){b.push(a);if(!t(","))break}if(b.length>0)return new e.Value(b)},important:function(){if(b.charAt(f)==="!")return t(/^! *important/)},sub:function(){var a;if(t("(")&&(a=t(this.expression))&&t(")"))return a},multiplication:function(){var a,b,c,d;if(a=t(this.operand)){while(!w(/^\/\*/)&&(c=t("/")||t("*"))&&(b=t(this.operand)))d=new e.Operation(c,[d||a,b]);return d||a}},addition:function(){var a,c,d,g;if(a=t(this.multiplication)){while((d=t(/^[-+]\s+/)||b.charAt(f-1)!=" "&&(t("+")||t("-")))&&(c=t(this.multiplication)))g=new e.Operation(d,[g||a,c]);return g||a}},conditions:function(){var a,b,c=f,d;if(a=t(this.condition)){while(t(",")&&(b=t(this.condition)))d=new e.Condition("or",d||a,b,c);return d||a}},condition:function(){var a,b,c,d,g=f,h=!1;t(/^not/)&&(h=!0),u("(");if(a=t(this.addition)||t(this.entities.keyword)||t(this.entities.quoted))return(d=t(/^(?:>=|=<|[<=>])/))?(b=t(this.addition)||t(this.entities.keyword)||t(this.entities.quoted))?c=new e.Condition(d,a,b,g,h):v("expected expression"):c=new e.Condition("=",a,new e.Keyword("true"),g,h),u(")"),t(/^and/)?new e.Condition("and",c,t(this.condition)):c},operand:function(){var a,c=b.charAt(f+1);b.charAt(f)==="-"&&(c==="@"||c==="(")&&(a=t("-"));var d=t(this.sub)||t(this.entities.dimension)||t(this.entities.color)||t(this.entities.variable)||t(this.entities.call);return a?new e.Operation("*",[new e.Dimension(-1),d]):d},expression:function(){var a,b,c=[],d;while(a=t(this.addition)||t(this.entity))c.push(a);if(c.length>0)return new e.Expression(c)},property:function(){var a;if(a=t(/^(\*?-?[-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),n({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)e=c.compare(b);else throw{type:"Type",message:"Unable to perform comparison",index:d};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,Array.isArray(c)?(this.ruleset=new a.Ruleset([],c),this.ruleset.allowImports=!0):this.value=c},a.Directive.prototype={toCSS:function(a,b){return this.ruleset?(this.ruleset.root=!0,this.name+(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 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.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.Media=function(b,c){var d=new a.Element("&",null,0),e=[new a.Selector([d])];this.features=new a.Value(c),this.ruleset=new a.Ruleset(e,b),this.ruleset.allowImports=!0},a.Media.prototype={toCSS:function(a,b){var c=this.features.toCSS(b);return this.ruleset.root=a.length===0||a[0].multiMedia,"@media "+c+(b.compress?"{":" {\n  ")+this.ruleset.toCSS(a,b).trim().replace(/\n/g,"\n  ")+(b.compress?"}":"\n}\n")},eval:function(b){b.mediaBlocks||(b.mediaBlocks=[],b.mediaPath=[]);var c=b.mediaBlocks.length;b.mediaPath.push(this),b.mediaBlocks.push(this);var d=new a.Media([],[]);return d.features=this.features.eval(b),b.frames.unshift(this.ruleset),d.ruleset=this.ruleset.eval(b),b.frames.shift(),b.mediaBlocks[c]=d,b.mediaPath.pop(),b.mediaPath.length===0?d.evalTop(b):d.evalNested(b)},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)},evalTop:function(b){var c=this;if(b.mediaBlocks.length>1){var d=new a.Element("&",null,0),e=[new a.Selector([d])];c=new a.Ruleset(e,b.mediaBlocks),c.multiMedia=!0}return delete b.mediaBlocks,delete b.mediaPath,c},evalNested:function(b){var c,d,e=b.mediaPath.concat([this]);for(c=0;c<e.length;c++)d=e[c].features instanceof a.Value?e[c].features.value:e[c].features,e[c]=Array.isArray(d)?d:[d];return this.features=new a.Value(this.permute(e).map(function(b){b=b.map(function(b){return b.toCSS?b:new a.Anonymous(b)});for(c=b.length-1;c>0;c--)b.splice(c,0,new a.Anonymous("and"));return new a.Expression(b)})),new a.Ruleset([],[])},permute:function(a){if(a.length===0)return[];if(a.length===1)return a[0];var b=[],c=this.permute(a.slice(1));for(var d=0;d<c.length;d++)for(var e=0;e<a[0].length;e++)b.push([a[0][e]].concat(c[d]));return b}}}(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:this.index,filename:this.filename,stack:h.stack}}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,f){this.name=b,this.selectors=[new a.Selector([new a.Element(null,b)])],this.params=c,this.condition=e,this.variadic=f,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,[]),e;for(var f=0,g,h;f<this.params.length;f++)if(h=this.params[f].name)if(this.params[f].variadic&&c){e=[];for(var i=f;i<c.length;i++)e.push(c[i].eval(b));d.rules.unshift(new a.Rule(h,(new a.Expression(e)).eval(b)))}else if(g=c&&c[f]||this.params[f].value)d.rules.unshift(new a.Rule(h,g.eval(b)));else throw{type:"Runtime",message:"wrong number of arguments for "+this.name+" ("+c.length+" for "+this.arity+")"};return d},eval:function(b,c,d){var e=this.evalParams(b,c),f,g=[],h,i;for(var j=0;j<Math.max(this.params.length,c&&c.length);j++)g.push(c[j]||this.params[j].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(!this.variadic){if(c<this.required)return!1;if(c>this.params.length)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==="+")e=d,d=c,c=e;else throw{name:"OperationError",message:"Can't substract or divide a color from a number"};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,c){this.selectors=a,this.rules=b,this._lookups={},this.strictImports=c},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),this.strictImports);d.root=this.root,d.allowImports=this.allowImports,b.frames.unshift(d);if(d.root||d.allowImports||!d.strictImports)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||i instanceof a.Media?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 f=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||f?"development":"production"),d.async=!1,d.poll=d.poll||(f?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&&m(function(a,b,c,d,e){b&&p(b.toCSS(),d,e.lastModified)})},d.poll)):d.optimization=3;var g;try{g=typeof a.localStorage=="undefined"?null:a.localStorage}catch(h){g=null}var i=document.getElementsByTagName("link"),j=/^text\/(x-)?less$/;d.sheets=[];for(var k=0;k<i.length;k++)(i[k].rel==="stylesheet/less"||i[k].rel.match(/stylesheet/)&&i[k].type.match(j))&&d.sheets.push(i[k]);d.refresh=function(a){var b,c;b=c=new Date,m(function(a,d,e,f,g){g.local?t("loading "+f.href+" from cache."):(t("parsed "+f.href+" successfully."),p(d.toCSS(),f,g.lastModified)),t("css for "+f.href+" generated in "+(new Date-c)+"ms"),g.remaining===0&&t("css generated in "+(new Date-b)+"ms"),c=new Date},a),l()},d.refreshStyles=l,d.refresh(d.env==="development")})(window);
\ No newline at end of file
diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index bc15ba6973..d284058435 100644
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -485,7 +485,148 @@ $.extend(WCF, {
 });
 
 /**
+ * Dropdown API
+ */
+WCF.Dropdown = {
+	/**
+	 * list of callbacks
+	 * @var	object
+	 */
+	_callbacks: { },
+	
+	/**
+	 * initialization state
+	 * @var	boolean
+	 */
+	_didInit: false,
+	
+	/**
+	 * list of registered dropdowns
+	 * @var	object
+	 */
+	_dropdowns: { },
+	
+	/**
+	 * Initializes dropdowns.
+	 */
+	init: function() {
+		var self = this;
+		$('.dropdownToggle').each(function(index, dropdown) {
+			var $dropdown = $(dropdown);
+			var $toggle = $dropdown.data('toggle');
+			
+			// ignore dropdowns with a missing or invalid target
+			if (!$toggle || !$('#' + $toggle).length) {
+				return true;
+			}
+			
+			var $toggle = $('#' + $toggle);
+			var $containerID = $toggle.wcfIdentify();
+			if (!self._dropdowns[$containerID]) {
+				$dropdown.click($.proxy(self._toggle, self));
+				self._dropdowns[$containerID] = $toggle;
+				
+				// calculate top offset for menu
+				$dropdown.next('.dropdownMenu').css({
+					top: $dropdown.outerHeight() + 10
+				});
+			}
+		});
+		
+		if (!this._didInit) {
+			this._didInit = true;
+			
+			WCF.CloseOverlayHandler.addCallback('WCF.Dropdown', $.proxy(this._closeAll, this));
+			WCF.DOMNodeInsertedHandler.addCallback('WCF.Dropdown', $.proxy(this.init, this));
+		}
+	},
+	
+	/**
+	 * Registers a callback notified upon dropdown state change.
+	 * 
+	 * @param	string		identifier
+	 * @var		object		callback
+	 */
+	registerCallback: function(identifier, callback) {
+		if (!$.isFunction(callback)) {
+			console.debug("[WCF.Dropdown] Callback for '" + identifier + "' is invalid");
+			return false;
+		}
+		
+		if (!this._callbacks[identifier]) {
+			this._callbacks[identifier] = [ ];
+		}
+		
+		this._callbacks[identifier].push(callback);
+	},
+	
+	/**
+	 * Toggles a dropdown.
+	 * 
+	 * @param	object		event
+	 */
+	_toggle: function(event) {
+		console.debug($(event.currentTarget));
+		console.debug($(event.currentTarget).data());
+		var $dropdown = $('#' + $(event.currentTarget).data('toggle')).toggleClass('dropdownOpen');
+		console.debug('Trying to toggle ' + $(event.currentTarget).data('toggle'));
+		if (!$dropdown.hasClass('dropdownOpen')) {
+			this._notifyCallbacks($dropdown, 'close');
+		}
+		else {
+			this._notifyCallbacks($dropdown, 'open');
+		}
+		
+		event.stopPropagation();
+		return false;
+	},
+	
+	/**
+	 * Closes all dropdowns.
+	 */
+	_closeAll: function() {
+		for (var $containerID in this._dropdowns) {
+			var $dropdown = this._dropdowns[$containerID];
+			if ($dropdown.hasClass('dropdownOpen')) {
+				$dropdown.removeClass('dropdownOpen');
+				
+				this._notifyCallbacks($dropdown, 'close');
+			}
+		}
+	},
+	
+	/**
+	 * Closes a dropdown without notifying callbacks.
+	 * 
+	 * @param	string		containerID
+	 */
+	close: function(containerID) {
+		if (!this._dropdowns[containerID]) {
+			return;
+		}
+		
+		this._dropdowns[containerID].removeClass('open');
+	},
+	
+	/**
+	 * Notifies callbacks.
+	 * 
+	 * @param	jQuery		dropdown
+	 * @param	string		action
+	 */
+	_notifyCallbacks: function(dropdown, action) {
+		var $containerID = dropdown.wcfIdentify();
+		if (!this._callbacks[$containerID]) {
+			return;
+		}
+		
+		for (var $i = 0, $length = this._callbacks[$containerID].length; $i < $length; $i++) {
+			this._callbacks[$containerID][$i](dropdown, action);
+		}
+	}
+};
 
+/**
  * Clipboard API
  */
 WCF.Clipboard = {
@@ -1911,12 +2052,37 @@ WCF.MultipleLanguageInput.prototype = {
 	 * @param	boolean		enableOnInit
 	 */
 	_prepareElement: function(enableOnInit) {
-		this._element.wrap('<div class="wcf-preInput" />');
+		this._element.wrap('<div class="dropdown preInput" />');
 		var $wrapper = this._element.parent();
-		var $button = $('<p class="wcf-button wcf-dropdownCaption"><span>' + WCF.Language.get('wcf.global.button.disabledI18n') + '</span></p>').prependTo($wrapper);
+		var $button = $('<p class="button dropdownToggle"><span>' + WCF.Language.get('wcf.global.button.disabledI18n') + '</span></p>').prependTo($wrapper);
+		$button.data('toggle', $wrapper.wcfIdentify()).click($.proxy(this._enable, this));
+		
+		// add a special class if next item is a textarea
+		if ($button.next().getTagName() === 'textarea') {
+			$button.addClass('dropdownCaptionTextarea');
+		}
+		else {
+			$button.addClass('dropdownCaption');
+		}
+		
+		// insert list
+		this._list = $('<ul class="dropdownMenu"></ul>').insertAfter($button);
+		
+		// calculate top offset for menu
+		this._list.css({
+			top: $button.parent().outerHeight() + 10
+		});
+		
+		// insert available languages
+		for (var $languageID in this._availableLanguages) {
+			$('<li><span>' + this._availableLanguages[$languageID] + '</span></li>').data('languageID', $languageID).click($.proxy(this._changeLanguage, this)).appendTo(this._list);
+		}
 
-		$button.click($.proxy(this._enable, this));
-		WCF.CloseOverlayHandler.addCallback(this._element.wcfIdentify(), $.proxy(this._closeSelection, this));
+		// disable language input
+		if (!this._forceSelection) {
+			$('<li class="dropdownDivider" />').appendTo(this._list);
+			$('<li><span>' + WCF.Language.get('wcf.global.button.disabledI18n') + '</span></li>').click($.proxy(this._disable, this)).appendTo(this._list);
+		}
 		
 		if (enableOnInit || this._forceSelection) {
 			$button.trigger('click');
@@ -1929,6 +2095,20 @@ WCF.MultipleLanguageInput.prototype = {
 				}
 			}, this));
 		}
+		
+		WCF.Dropdown.registerCallback($wrapper.wcfIdentify(), $.proxy(this._handleAction, this));
+	},
+	
+	/**
+	 * Handles dropdown actions.
+	 * 
+	 * @param	jQuery		dropdown
+	 * @param	string		action
+	 */
+	_handleAction: function(dropdown, action) {
+		if (action === 'close') {
+			this._closeSelection();
+		}
 	},
 
 	/**
@@ -1938,36 +2118,17 @@ WCF.MultipleLanguageInput.prototype = {
 	 */
 	_enable: function(event) {
 		if (!this._isEnabled) {
-			var $button = $(event.target);
-			if ($button.getTagName() == 'p') {
-				$button = $button.children('span');
+			var $button = $(event.currentTarget);
+			if ($button.getTagName() === 'p') {
+				$button = $button.children('span:eq(0)');
 			}
-
+			
 			$button.addClass('active');
-
-			// insert list
-			if (this._list === null) {
-				this._list = $('<ul class="wcf-dropdown"></ul>').insertAfter($button.parent());
-				this._list.click(function(event) {
-					// discard click event
-					event.stopPropagation();
-				});
-				
-				// insert available languages
-				for (var $languageID in this._availableLanguages) {
-					$('<li>' + this._availableLanguages[$languageID] + '</li>').data('languageID', $languageID).click($.proxy(this._changeLanguage, this)).appendTo(this._list);
-				}
-
-				// disable language input
-				if (!this._forceSelection) {
-					$('<li class="divider">' + WCF.Language.get('wcf.global.button.disabledI18n') + '</li>').click($.proxy(this._disable, this)).appendTo(this._list);
-				}
-			}
-
+			
 			this._isEnabled = true;
 			this._insertedDataAfterInit = false;
 		}
-
+		
 		// toggle list
 		if (this._list.is(':visible')) {
 			this._closeSelection();
@@ -1999,9 +2160,6 @@ WCF.MultipleLanguageInput.prototype = {
 					}
 				}
 			}, this));
-
-			// show list
-			this._list.addClass('open');
 		}
 	},
 
@@ -2015,10 +2173,6 @@ WCF.MultipleLanguageInput.prototype = {
 			
 			this._disable();
 		}
-		
-		if (this._list !== null) {
-			this._list.removeClass('open');
-		}
 	},
 
 	/**
@@ -2027,7 +2181,7 @@ WCF.MultipleLanguageInput.prototype = {
 	 * @param	object		event
 	 */
 	_changeLanguage: function(event) {
-		var $button = $(event.target);
+		var $button = $(event.currentTarget);
 		this._insertedDataAfterInit = true;
 		
 		// save current value
@@ -2049,7 +2203,7 @@ WCF.MultipleLanguageInput.prototype = {
 		$button.addClass('active');
 		
 		// update label
-		this._list.prev('.wcf-dropdownCaption').children('span').text(this._availableLanguages[this._languageID]);
+		this._list.prev('.dropdownCaption').children('span').text(this._availableLanguages[this._languageID]);
 		
 		// close selection and set focus on input element
 		this._closeSelection();
@@ -2060,12 +2214,12 @@ WCF.MultipleLanguageInput.prototype = {
 	 * Disables language selection for current element.
 	 */
 	_disable: function() {
-		if (this._forceSelection) {
+		if (this._forceSelection || !this._list) {
 			return;
 		}
 		
 		// remove active marking
-		this._list.prev('.wcf-dropdownCaption').children('span').removeClass('active').text(WCF.Language.get('wcf.global.button.disabledI18n'));
+		this._list.prev('.dropdownCaption').children('span').removeClass('active').text(WCF.Language.get('wcf.global.button.disabledI18n'));
 		this._closeSelection();
 
 		// update element value
@@ -2273,7 +2427,7 @@ WCF.TabMenu = {
 	 * Initializes all TabMenus
 	 */
 	init: function() {
-		var $containers = $('.wcf-tabMenuContainer');
+		var $containers = $('.tabMenuContainer');
 		var self = this;
 		$containers.each(function(index, tabMenu) {
 			var $tabMenu = $(tabMenu);
@@ -2288,7 +2442,7 @@ WCF.TabMenu = {
 			$tabMenu.wcfTabs({
 				select: function(event, ui) {
 					var $panel = $(ui.panel);
-					var $container = $panel.closest('.wcf-tabMenuContainer');
+					var $container = $panel.closest('.tabMenuContainer');
 					
 					// store currently selected item
 					if ($container.data('store')) {
@@ -2306,7 +2460,7 @@ WCF.TabMenu = {
 			
 			// display active item on init
 			if ($tabMenu.data('active')) {
-				$tabMenu.find('.wcf-tabMenuContent').each(function(innerIndex, tabMenuItem) {
+				$tabMenu.find('.tabMenuContent').each(function(innerIndex, tabMenuItem) {
 					var $tabMenuItem = $(tabMenuItem);
 					if ($tabMenuItem.attr('id') == $tabMenu.data('active')) {
 						$tabMenu.wcfTabs('select', innerIndex);
@@ -2343,7 +2497,7 @@ WCF.TabMenu = {
 				if ($tabMenu.wcfTabs('hasAnchor', $hash, false)) {
 					if ($subIndex !== null) {
 						// try to find child tabMenu
-						var $childTabMenu = $tabMenu.find('#' + $.wcfEscapeID($hash) + '.wcf-tabMenuContainer');
+						var $childTabMenu = $tabMenu.find('#' + $.wcfEscapeID($hash) + '.tabMenuContainer');
 						if ($childTabMenu.length !== 1) {
 							return;
 						}
@@ -3062,7 +3216,7 @@ WCF.Effect.BalloonTooltip.prototype = {
 	init: function() {
 		if (!this._didInit) {
 			// create empty div
-			this._tooltip = $('<div id="balloonTooltip" class="wcf-balloonTooltip"><span id="balloonTooltipText"></span><span class="pointer"><span></span></span></div>').appendTo($('body')).hide();
+			this._tooltip = $('<div id="balloonTooltip" class="balloonTooltip"><span id="balloonTooltipText"></span><span class="pointer"><span></span></span></div>').appendTo($('body')).hide();
 
 			// get viewport dimensions
 			this._updateViewportDimensions();
@@ -4875,7 +5029,7 @@ $.widget('ui.wcfDialog', {
 		hideTitle: false,
 		modal: true,
 		title: '',
-		zIndex: 1000,
+		zIndex: 400,
 
 		// AJAX support
 		ajax: false,
@@ -4928,17 +5082,17 @@ $.widget('ui.wcfDialog', {
 	 */
 	_create: function() {
 		// create dialog container
-		this._container = $('<div class="wcf-dialogContainer"></div>').hide().css({ zIndex: this.options.zIndex }).appendTo(document.body);
+		this._container = $('<div class="dialogContainer"></div>').hide().css({ zIndex: this.options.zIndex }).appendTo(document.body);
 		
 		// create title
 		if (!this.options.hideTitle && this.options.title != '') {
-			this._titlebar = $('<header class="wcf-dialogTitlebar"></header>').appendTo(this._container);
-			this._title = $('<span class="wcf-dialogTitle"></div>').html(this.options.title).appendTo(this._titlebar);
+			this._titlebar = $('<header class="dialogTitlebar"></header>').appendTo(this._container);
+			this._title = $('<span class="dialogTitle"></div>').html(this.options.title).appendTo(this._titlebar);
 		}
 
 		// create close button
 		if (this.options.closable) {
-			this._closeButton = $('<a class="wcf-dialogCloseButton" title="' + this.options.closeButtonLabel + '"><span>' + this.options.closeButtonLabel + '</span></a>').click($.proxy(this.close, this));
+			this._closeButton = $('<a class="dialogCloseButton" title="' + this.options.closeButtonLabel + '"><span>' + this.options.closeButtonLabel + '</span></a>').click($.proxy(this.close, this));
 
 			if (!this.options.hideTitle && this.options.title != '') {
 				this._closeButton.appendTo(this._titlebar);
@@ -4949,7 +5103,7 @@ $.widget('ui.wcfDialog', {
 		}
 		
 		// create content container
-		this._content = $('<div class="wcf-dialogContent"></div>').appendTo(this._container);
+		this._content = $('<div class="dialogContent"></div>').appendTo(this._container);
 
 		// move target element into content
 		var $content = this.element.detach();
@@ -4959,7 +5113,7 @@ $.widget('ui.wcfDialog', {
 		if (this.options.modal) {
 			this._overlay = $('#jsWcfDialogOverlay');
 			if (!this._overlay.length) {
-				this._overlay = $('<div id="jsWcfDialogOverlay" class="wcf-dialogOverlay"></div>').css({ height: '100%', zIndex: 900 }).appendTo(document.body);
+				this._overlay = $('<div id="jsWcfDialogOverlay" class="dialogOverlay"></div>').css({ height: '100%', zIndex: 399 }).appendTo(document.body);
 			}
 			
 			if (this.options.closable) {
diff --git a/wcfsetup/install/files/style/alerts.less b/wcfsetup/install/files/style/alerts.less
new file mode 100644
index 0000000000..8fbc837a5a
--- /dev/null
+++ b/wcfsetup/install/files/style/alerts.less
@@ -0,0 +1,96 @@
+/* ############## System Notifications (Inline) ############## */
+
+/* Globals */
+
+.info,
+.error,
+.success,
+.warning {
+	background-position: 13px center, left top;
+	background-repeat: no-repeat, repeat;
+	background-size: 24px, auto;
+	border-radius: @wcfContainerBorderRadius;
+	border-width: @wcfContainerBorderWidth;
+	border-style: @wcfContainerBorderStyle;
+	box-sizing: border-box;
+	line-height: 1.5;
+	margin-top: @wcfGapMedium;
+	padding: @wcfGapSmall @wcfGapMedium @wcfGapSmall 50px;
+	
+	.textShadow(@errorBackgroundColor);
+}
+
+/* Types */
+
+.info {
+	background-color: @infoBackgroundColor;
+	background-image: url('../../icon/systemInfo.svg');
+	border-color: @infoBorderColor;
+	color: @infoColor;
+}
+
+.success {
+	background-color: @successBackgroundColor;
+	background-image: url('../../icon/systemSuccess.svg');
+	border-color: @successBorderColor;
+	color: @successColor;
+}
+
+.warning {
+	background-color: @warningBackgroundColor;
+	background-image: url('../../icon/systemWarning.svg');
+	border-color: @warningBorderColor;
+	color: @warningColor;
+}
+
+.error {
+	background-color: @errorBackgroundColor;
+	background-image: url('../../icon/systemError.svg');
+	border-color: @errorBorderColor;
+	color: @errorColor;
+}
+
+/* Inline Errors */
+
+.innerError {
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+	line-height: 1.5;
+	color: @errorColor;
+	border: @wcfContainerBorderWidth @wcfContainerBorderStyle @errorBorderColor;
+	border-radius: @wcfContainerBorderRadius;
+	background-color: @errorBackgroundColor;
+	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;
+	
+	.boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);
+	.textShadow(@errorBackgroundColor);
+	
+	.pointer {	
+		border-width: 0 7px 7px;
+		border-style: solid;
+		border-color: @errorBackgroundColor transparent;
+		display: inline-block !important;
+		width: 0;
+		position: absolute;
+		top: -7px !important;
+		left: 10%;
+			
+			span {	
+				border-width: 0 5px 5px;
+				border-style: solid;
+				border-color: @errorBackgroundColor transparent;
+				display: inline-block;
+				width: 0;
+				position: absolute;
+				top: 2px;
+				left: -5px;
+			}
+	}
+}
diff --git a/wcfsetup/install/files/style/badge.less b/wcfsetup/install/files/style/badge.less
new file mode 100644
index 0000000000..3bd745392a
--- /dev/null
+++ b/wcfsetup/install/files/style/badge.less
@@ -0,0 +1,24 @@
+/* ############## Badges ############## */
+
+/* Globals */
+
+.badge {
+	border-radius: 9px;
+	color: @wcfPageLinkHoverColor;
+	display: inline-block;
+	font-size: 11px;
+	font-weight: bold;
+	padding: 2px 6px 2px;
+	position: relative;
+	text-shadow: none;
+	top: -1px;
+	white-space: nowrap;
+	
+	.linearGradient(lighten(@wcfPageBackgroundColor, 10%), lighten(@wcfPageBackgroundColor, 20%), lighten(@wcfPageBackgroundColor, 5%));
+	
+	&.badgeInverse {
+		background-color: @wcfPageLinkHoverColor;
+		background-image: none;
+		color: lighten(@wcfPageBackgroundColor, 10%);
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/bbcode.less b/wcfsetup/install/files/style/bbcode.less
deleted file mode 100755
index 1fbc6a91cc..0000000000
--- a/wcfsetup/install/files/style/bbcode.less
+++ /dev/null
@@ -1,179 +0,0 @@
-/**
- * BBCode Styles  
- *
- * @author		Harald Szekely 
- * @copyright	2011 WoltLab GmbH 
- */
-
-/* ############## Code Box ############## */
-
-.wcf-codeBox {
-	display: block;
-}
-
-.wcf-codeBox hgroup {
-	padding: 0 7px;
-}
-
-.wcf-codeBox > div {
-	font-size: 140%;
-	line-height: 1.3;
-	display: block;
-	overflow-x: auto;
-}
-
-.wcf-codeBox .wcf-codeLineNumbers {
-	text-align: right;
-	background-color: @backColor21;
-	padding: 0 4px;
-	width: 0%;
-}
-
-.wcf-codeBox .wcf-codeLineNumbers pre {
-	white-space: normal;
-}
-
-.wcf-codeBox .wcf-codeLineNumbers a {
-	text-decoration: none;
-	margin: 0 -5px;
-	padding: 0 5px;
-	display: block;
-}
-
-.wcf-codeBox .wcf-codeLineNumbers a:hover {
-	color: @fontColor51;
-	background-color: darken(@backColor21, 10%);
-}
-
-.wcf-codeBox .wcf-codeLineNumbers a:target {
-	color: @fontColor5;
-	background-color: #ff3;
-}
-
-.wcf-codeBox .wcf-codeLines {
-	background-color: @backColor1;
-	width: 100%;
-}
-
-.wcf-codeBox .wcf-codeLines pre {
-	padding: 0 5px;
-}
-
-
-
-/* ############## Code Styles ############## */
-
-/* -- -- -- Code Box -- -- -- */
-
-.wcf-codeBox .hlQuotes {
-	color: red;
-}
-
-.wcf-codeBox .hlComments,
-.wcf-codeBox .hlOperators {
-	color: green;
-}
-
-.wcf-codeBox .hlKeywords1 {
-	color: blue;
-}
-
-.wcf-codeBox .hlKeywords2 {
-	color: darkred;
-}
-
-.wcf-codeBox .hlKeywords3 {
-	color: darkviolet;
-}
-
-.wcf-codeBox .hlKeywords4 {
-	color: darkgoldenrod;
-}
-
-.wcf-codeBox .hlKeywords5 {
-	color: crimson;
-}
-
-.wcf-codeBox .hlNumbers {
-	color: darkorange;
-}
-
-/* -- -- -- Code Highlighters -- -- -- */
-
-/* DIFF */
-
-.wcf-diffHighlighter .hlComments {
-	color: darkviolet;
-}
-
-.wcf-diffHighlighter .hlRemoved {
-	color: red;
-}
-
-.wcf-diffHighlighter .hlAdded {
-	color: green;
-}
-
-/* PHP */
-
-.wcf-phpHighlighter .hlKeywords2 {
-	color: green;
-}
-
-.wcf-phpHighlighter .hlComments {
-	color: darkgoldenrod;
-}
-
-/* CSS */
-
-.wcf-cssHighlighter .hlComments {
-	color: #236e26;
-}
-
-.wcf-cssHighlighter .hlColors {
-	color: #751116;
-}
-
-.wcf-cssHighlighter .hlNumbers,
-.wcf-sqlHighlighter .hlNumbers {
-	color: #1906fd;
-}
-
-.wcf-cssHighlighter .hlKeywords1 {
-	color: #87154f;
-}
-
-.wcf-cssHighlighter .hlKeywords2 {
-	color: #994509;
-}
-
-.wcf-cssHighlighter .hlKeywords3,
-.wcf-cssHighlighter .hlKeywords4 {
-	color: inherit;
-}
-
-/* SQL */
-
-.wcf-sqlHighlighter .hlKeywords1 {
-	color: #663821;
-}
-
-.wcf-sqlHighlighter .hlKeywords2 {
-	color: #871550;
-}
-
-/* -- -- -- Quote Box -- -- -- */
-
-.wcf-quoteBox {
-	/*background: url("...quote.svg") 12px 12px no-repeat @backColor1;*/
-	background-color: @backColor1;
-	padding: 10px 20px 10px 58px;
-}
-
-.wcf-quoteBox header {
-	padding: 0 0 4px 0 !important;
-	border-bottom: @borderWidthSeparator @borderStyleSeparator @borderColor12;
-	margin-bottom: 8px;
-}
-
-/* -- -- -- -- -- EOF -- -- -- -- -- */
diff --git a/wcfsetup/install/files/style/bootstrap.less b/wcfsetup/install/files/style/bootstrap.less
new file mode 100644
index 0000000000..1f31b5de05
--- /dev/null
+++ b/wcfsetup/install/files/style/bootstrap.less
@@ -0,0 +1,34 @@
+@import "reset.less";
+
+/* core */
+@import	"variables.less";
+@import "mixins.less";
+
+/* layout */
+@import "layout.less";
+@import "userPanel.less";
+@import "logo.less";
+@import "navigation.less";
+@import "content.less";
+@import "footer.less";
+@import "dropdown.less";
+@import "badge.less";
+
+@import "tabular.less";
+@import "inputs.less";
+@import "button.less";
+@import "breadcrumbs.less";
+@import "forms.less";
+@import "alerts.less";
+@import "tabs.less";
+@import "codebox.less";
+@import "pagination.less";
+@import "comments.less";
+
+@import "message.less";
+@import "dialog.less";
+@import "tooltip.less";
+@import "user.less";
+
+/* application */
+@import "wbb.less";
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/breadcrumbs.less b/wcfsetup/install/files/style/breadcrumbs.less
new file mode 100644
index 0000000000..f50f8d898b
--- /dev/null
+++ b/wcfsetup/install/files/style/breadcrumbs.less
@@ -0,0 +1,89 @@
+/* ############## Bread Crumbs ############## */
+
+/* Globals */
+
+.breadcrumbs {
+	background-color: @wcfContentBackgroundColor;
+	border: 1px solid @wcfContainerBorderColor;
+	border-radius: @wcfContainerBorderRadius;
+	box-sizing: border-box;
+	display: block;
+	overflow: hidden;
+	position: relative;
+	text-align: left;
+	
+	> ul {
+		> li {
+			float: left;
+			font-size: 85%;
+			list-style: none;
+			max-width: 30%;
+			position: relative;
+			
+			.transition(max-width, .2s);
+			
+			&:hover {
+				max-width: 100%;
+				
+				a {
+					background-color: @wcfContainerAccentBackgroundColor;
+					color: @wcfLinkHoverColor;
+					position: relative;
+					z-index: 10;
+				}
+				
+				> .pointer > span {
+					border-color: transparent transparent transparent @wcfContainerAccentBackgroundColor;
+				}
+			}
+			
+			> span {
+				border-width: 15px;
+				border-style: solid none solid solid;
+				border-color: transparent transparent transparent @wcfContainerBorderColor;
+				display: block !important;
+				position: absolute;
+				width: 0;
+				height: 0;
+				top: -4px;
+				right: -15px;
+				z-index: 20;
+			}
+			
+			> .pointer > span {
+				text-indent: -9000px;
+				border-width: 15px;
+				border-style: solid none solid solid;
+				border-color: transparent transparent transparent @wcfContentBackgroundColor;
+				display: block;
+				position: absolute;
+				width: 0;
+				height: 0;
+				top: -15px;
+				left: -16px;
+				overflow: hidden;
+			}
+			
+			a {
+				color: @wcfLinkColor;
+				display: block;
+				margin: 0;
+				overflow: hidden;
+				padding: 5px 1px 5px 20px;
+				text-decoration: none;
+				white-space: nowrap;
+				
+				.textShadow(@wcfContentBackgroundColor);
+			}
+			
+			&:first-child a {
+				background-image: url('../../icon/home1.svg');
+				background-position: 7px center;
+				background-repeat: no-repeat;
+				background-size: 16px;
+				border-radius: 5px 0 0 5px;
+				padding-left: 30px;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/button.less b/wcfsetup/install/files/style/button.less
new file mode 100644
index 0000000000..43e7a64086
--- /dev/null
+++ b/wcfsetup/install/files/style/button.less
@@ -0,0 +1,90 @@
+/* Normal State */
+
+button,
+input[type='reset'],
+input[type='submit'],
+input[type='button'],
+.button {
+	border-radius: 30px;
+	border-style: solid;
+	border-width: 1px;
+	display: inline-block;
+	font-size: 100%;
+	font-weight: bold;
+	margin: 3px 2px;
+	padding: 5px 13px;
+}
+
+/* ToDo: Special */
+
+.sidebar {
+	button,
+	input[type='reset'],
+	input[type='submit'],
+	input[type='button'],
+	.button {
+		font-size: 75% !important;
+		padding: 3px 7px;
+	}
+}
+
+.button img {
+	margin: -5px 1px -5px -5px;
+	vertical-align: middle;
+}
+
+/* Normal State */
+
+.button,
+input[type='reset']:not([disabled]),
+input[type='submit']:not([disabled]),
+input[type='button']:not([disabled]),
+button:not([disabled]) {
+	color: @wcfButtonColor;
+	border-color: @wcfButtonBorderColor darken(@wcfButtonBorderColor, 7%) darken(@wcfButtonBorderColor, 14%);
+	text-decoration: none;
+	
+	.boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);
+	.linearGradient(@wcfButtonBackgroundColor, lighten(@wcfButtonBackgroundColor, 5%), @wcfButtonBackgroundColor 2px, darken(@wcfButtonBackgroundColor, 5%));
+	.textShadow(@wcfButtonBackgroundColor);
+	.transition(~"background-color, background-image, border, box-shadow, color", .1s);
+}
+
+/* primary */
+.button.buttonPrimary,
+input[type='submit']:not([disabled]),
+input[type='button']:not([disabled]).buttonPrimary,
+button:not([disabled]).buttonPrimary {
+	color: @wcfButtonPrimaryColor;
+	border-color: @wcfButtonPrimaryBorderColor darken(@wcfButtonPrimaryBorderColor, 7%) darken(@wcfButtonPrimaryBorderColor, 14%);
+	
+	.boxShadowNative(~"0 1px 3px rgba(0, 0, 0, .1), 0 0 10px" darken(@wcfButtonPrimaryBackgroundColor, 20%));
+	.linearGradient(@wcfButtonPrimaryBackgroundColor, lighten(@wcfButtonPrimaryBackgroundColor, 5%), @wcfButtonPrimaryBackgroundColor 2px, darken(@wcfButtonPrimaryBackgroundColor, 5%));
+}
+
+/* hover */
+.button:hover,
+input[type='reset']:not([disabled]):hover,
+input[type='submit']:not([disabled]):hover,
+input[type='button']:not([disabled]):hover,
+button:not([disabled]):hover {
+	border-color: @wcfButtonHoverBorderColor darken(@wcfButtonHoverBorderColor, 7%) darken(@wcfButtonHoverBorderColor, 14%);
+	color: @wcfButtonHoverColor;
+	text-decoration: none;
+	
+	.boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);	
+	.linearGradient(@wcfButtonHoverBackgroundColor, lighten(@wcfButtonHoverBackgroundColor, 5%), @wcfButtonHoverBackgroundColor 2px, darken(@wcfButtonHoverBackgroundColor, 5%));
+}
+
+/* active */
+.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: darken(@wcfButtonHoverColor, 10%);
+	border-color: darken(@wcfButtonHoverBorderColor, 14%) darken(@wcfButtonHoverBorderColor, 7%) @wcfButtonHoverBorderColor;
+		
+	.boxShadowInset(0, 1px, rgba(0, 0, 0, .1), 3px);
+	.linearGradient(@wcfButtonHoverBackgroundColor, lighten(@wcfButtonHoverBackgroundColor, 5%), @wcfButtonHoverBackgroundColor 2px, darken(@wcfButtonHoverBackgroundColor, 5%), bottom);
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/codebox.less b/wcfsetup/install/files/style/codebox.less
new file mode 100644
index 0000000000..8d9412eb3d
--- /dev/null
+++ b/wcfsetup/install/files/style/codebox.less
@@ -0,0 +1,182 @@
+/* Code Box */
+.codeBox {
+	padding: 0;
+	
+	hgroup {
+		background-color: @wcfHighlightBackgroundColor;
+		border-top-left-radius: @wcfContainerBorderRadius;
+		border-top-right-radius: @wcfContainerBorderRadius;
+		
+		h1 {
+			padding: 4px 7px;
+			font-weight: bold;
+		}
+	}
+	
+	dl {
+		display: table;
+		width: 100%;
+		padding: 0;
+		margin: 0;
+		overflow-x: auto;
+		
+		dt {
+			text-align: right;
+			background-color: @wcfContainerAccentBackgroundColor;
+			border-bottom-left-radius: @wcfContainerBorderRadius;
+			padding: 0;
+			margin: 0;
+			display: table-cell;
+			width: 1%;
+			float: none;
+			
+			pre {
+				padding: 4px;
+				
+				a {
+					display: block;
+					margin: 0 -4px;
+					padding: 0 5px;
+					text-decoration: none;
+					
+					&:target {
+						color: rgba(0, 0, 0, 1);
+						background-color: #ff3; 
+					}
+				}
+			}
+		}
+		
+		dd {
+			background-color: @wcfContentBackgroundColor;
+			display: table-cell;
+			width: 100%;
+			padding: 0;
+			margin: 0;
+			border-bottom-right-radius: @wcfContainerBorderRadius;
+			
+			pre {
+				padding: 4px;
+			}
+		}
+	
+	}
+}
+
+/* ############## Code Styles ############## */
+
+/* -- -- -- Code Box -- -- -- */
+
+.codeBox .hlQuotes {
+	color: red;
+}
+
+.codeBox .hlComments,
+.codeBox .hlOperators {
+	color: green;
+}
+
+.codeBox .hlKeywords1 {
+	color: blue;
+}
+
+.codeBox .hlKeywords2 {
+	color: darkred;
+}
+
+.codeBox .hlKeywords3 {
+	color: darkviolet;
+}
+
+.codeBox .hlKeywords4 {
+	color: darkgoldenrod;
+}
+
+.codeBox .hlKeywords5 {
+	color: crimson;
+}
+
+.codeBox .hlNumbers {
+	color: darkorange;
+}
+
+/* -- -- -- Code Highlighters -- -- -- */
+
+/* DIFF */
+
+.diffHighlighter .hlComments {
+	color: darkviolet;
+}
+
+.diffHighlighter .hlRemoved {
+	color: red;
+}
+
+.diffHighlighter .hlAdded {
+	color: green;
+}
+
+/* PHP */
+
+.phpHighlighter .hlKeywords2 {
+	color: green;
+}
+
+.phpHighlighter .hlComments {
+	color: darkgoldenrod;
+}
+
+/* CSS */
+
+.cssHighlighter .hlComments {
+	color: #236e26;
+}
+
+.cssHighlighter .hlColors {
+	color: #751116;
+}
+
+.cssHighlighter .hlNumbers,
+.sqlHighlighter .hlNumbers {
+	color: #1906fd;
+}
+
+.cssHighlighter .hlKeywords1 {
+	color: #87154f;
+}
+
+.cssHighlighter .hlKeywords2 {
+	color: #994509;
+}
+
+.cssHighlighter .hlKeywords3,
+.cssHighlighter .hlKeywords4 {
+	color: inherit;
+}
+
+/* SQL */
+
+.sqlHighlighter .hlKeywords1 {
+	color: #663821;
+}
+
+.sqlHighlighter .hlKeywords2 {
+	color: #871550;
+}
+
+/* Quote Box */
+.quoteBox {
+	/*background: url("...quote.svg") 12px 12px no-repeat #fff;*/
+	background-color: @wcfContentBackgroundColor;
+	padding: 10px 20px 10px 58px;
+	
+	header {
+		padding: 0 0 4px 0 !important;
+		border-bottom: 1px dotted @wcfContainerBorderColor;
+		margin-bottom: 8px;
+		
+		h1 {
+			font-weight: bold;
+		}
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/comments.less b/wcfsetup/install/files/style/comments.less
new file mode 100644
index 0000000000..708fdd25a1
--- /dev/null
+++ b/wcfsetup/install/files/style/comments.less
@@ -0,0 +1,152 @@
+/* ############## Profile Comments ############## */
+
+.commentList > li, .commentResponseList > li {
+	position: relative;
+}
+
+.commentOptions {
+	display: block;
+	position: absolute;
+	top: @wcfGapMedium;
+	right: @wcfGapMedium;
+	
+	li {
+		float: left;
+		opacity: 0;
+		
+		.transition(opacity, .1s);
+	}
+}
+
+.commentContent:hover .commentOptions li {
+	opacity: 1;
+}
+
+.commentAdd small, .commentResponseAdd small {
+	color: @wcfDimmedColor;
+	margin-top: 3px;
+}
+
+.commentContent {
+	//margin-bottom: 7px;
+}
+
+.commentResponseList > li {
+	border-top: 1px solid @wcfContainerBorderColor;
+	padding: 7px;
+	
+	&:last-child {
+		margin-bottom: -7px;
+	}
+	
+	&:nth-child(2n) {
+		//background-color: @wcfContainerAccentBackgroundColor;
+	}
+}
+
+.commentResponseAdd {
+	border-top: 1px solid @wcfContainerBorderColor;
+	margin-top: 14px;
+	padding: 7px;
+}
+
+.commentList > li&:nth-child(2n) .commentResponseList > li&:nth-child(2n+1) {
+	background-color: @wcfContainerBackgroundColor;
+}
+
+.commentList > li&:nth-child(2n+1) .commentResponseList > li&:nth-child(2n+1) {
+	background-color: @wcfContainerAccentBackgroundColor;
+}
+
+
+
+
+/* Comment List */
+
+.wcf-commentList > .wcf-container {
+	border-top: 1px solid rgba(204, 204, 204, 1);
+	padding: 7px;
+}
+
+.wcf-commentList > .wcf-container:first-child {
+	border-top-width: 0;
+}
+
+/* Comment Add */
+
+.wcf-commentAdd .wcf-containerIcon {
+	margin-left: 2em;
+}
+
+.wcf-commentResponseAdd {
+	border-top: 1px solid rgba(204, 204, 204, 1);
+	background-color: rgba(0, 0, 0, .015);
+	margin-top: 7px;
+	padding: 7px;
+}
+
+.wcf-commentResponseAdd .wcf-containerIcon {
+	margin-left: 10px;
+}
+
+
+
+/* Comment Response List */
+
+.wcf-commentResponseList {
+	margin-top: 7px;
+}
+
+.wcf-commentResponseAdd ~ .wcf-commentResponseList {
+	margin-top: 0;
+}
+
+.wcf-commentResponseList > .wcf-container,
+.wcf-commentResponseList > div > .wcf-container {
+	border-top: 1px solid rgba(204, 204, 204, 1);
+	background-color: rgba(0, 0, 0, .015);
+	padding: 7px;
+}
+
+.wcf-commentResponseList > .wcf-container:nth-child(2n+1) {
+	/* Auto-colorer for every 2nd row */
+	background-color: rgba(0, 0, 0, .0);
+}
+
+
+
+/* Comment Options */
+
+.wcf-commentContent > div > .wcf-commentOptions,
+.wcf-commentResponseList > li .wcf-commentOptions {
+	font-size: 85%;
+	display: block;
+	position: absolute;
+	top: 2px;
+	right: 2px;
+}
+
+.wcf-commentContent > div > .wcf-commentOptions > li,
+.wcf-commentResponseList > li .wcf-commentOptions > li {
+	float: left;
+	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-commentContent > div:hover > .wcf-commentOptions > li,
+.wcf-commentResponseList > li:hover .wcf-commentOptions > li {
+	opacity: 1;
+}
+
+.wcf-commentContent > div > .wcf-commentOptions > li a,
+.wcf-commentResponseList > li .wcf-commentOptions li a {
+	color: rgba(153, 153, 153, 1);
+	cursor: pointer;
+	display: inline-block;
+	padding: 5px 10px;
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/content.less b/wcfsetup/install/files/style/content.less
new file mode 100644
index 0000000000..02310e05fc
--- /dev/null
+++ b/wcfsetup/install/files/style/content.less
@@ -0,0 +1,50 @@
+#main {
+	z-index: 110;
+	
+	> div {
+		background-color: @wcfHighlightBackgroundColor;
+		.boxShadowInset(0, 0, rgba(0, 0, 0, .1));
+	}
+	
+	&.not(.sidebarOrientationLeft):not(.sidebarOrientationRight) {
+		.sidebar {
+			display: none;
+		}
+	}
+	
+	&.sidebarOrientationLeft {
+		.content {
+			border-left: @wcfContainerBorderWidth @wcfContainerBorderStyle darken(@wcfHighlightBackgroundColor, 8%);
+			margin-left: 249px;
+		}
+		
+		.sidebar {
+			float: left;
+		}
+	}
+	
+	&.sidebarOrientationRight {
+		.content {
+			border-right: @wcfContainerBorderWidth @wcfContainerBorderStyle darken(@wcfHighlightBackgroundColor, 8%);
+			margin-right: 249px;
+		}
+		
+		.sidebar {
+			float: right;
+		}
+	}
+}
+
+.sidebar {
+	width: 250px;
+	z-index: 120;
+}
+
+.content {
+	background-color: @wcfContentBackgroundColor;
+	min-height: 100px;
+	padding: @wcfGapSmall @wcfGapLarge * 2 - @wcfGapTiny @wcfGapLarge;
+	z-index: 130;
+	
+	.boxShadow(0, 0, rgba(0, 0, 0, .1));
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/dialog.less b/wcfsetup/install/files/style/dialog.less
new file mode 100644
index 0000000000..9f611456dc
--- /dev/null
+++ b/wcfsetup/install/files/style/dialog.less
@@ -0,0 +1,97 @@
+.dialogContainer {
+	background-color: rgba(0, 0, 0, .4);
+	border: 23px solid transparent;
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 90%;
+	min-width: 500px;
+	position: fixed;
+	
+	.borderRadius(15px);
+	.boxShadow(0, 1px, rgba(0, 0, 0, .3), 23px);
+	
+	.boxHeadline hgroup {
+		h1,
+		h1 a {
+			color: @wcfDimmedColor;
+			
+			.textShadow(@wcfPageBackgroundColor);
+		}
+	}
+	
+	/*dl {
+		> .reversed {
+			left: 170px;
+			width: auto;
+		}
+		
+		> dd {
+			margin-left: 150px;
+		}
+		
+		> dt {
+			width: 130px;
+		}
+	}*/
+}
+
+.dialogTitlebar {
+	background-color: saturate(lighten(@wcfPageBackgroundColor, 20%), 20%);
+	background-image: url(../../images/header.png);
+	background-position: top left;
+	background-repeat: repeat-x;
+	border-bottom: 1px solid rgba(0, 0, 0, .1);
+	display: block;
+	padding: 10px 20px;
+	position: relative;
+	
+	.borderRadius(7px, 0);
+
+	.dialogTitle {
+		color: @wcfPageLinkHoverColor;
+		display: block;
+		font-size: 170%;
+		font-weight: bold;
+		
+		.textShadow(saturate(lighten(@wcfPageBackgroundColor, 20%), 20%));
+	}
+	
+	.dialogCloseButton {
+		background-image: url(../icon/delete2.svg);
+		background-position: top left;
+		background-repeat: no-repeat;
+		background-size: 32px;
+		cursor: pointer;
+		height: 32px;
+		position: absolute;
+		right: 10px;
+		top: 5px;
+		width: 32px;
+		
+		span {
+			/* remove caption - it's over 9000! */
+			left: -9001px;
+			position: absolute;
+			top: -9001px;
+			width: 0;
+		}
+	}
+}
+
+.dialogContent {
+	background-color: rgba(51, 51, 51, .9);
+	color: lighten(@wcfLabelColor, 10%);
+	overflow: auto;
+	padding: 10px 20px 20px;
+
+	.borderRadius(0, 7px);
+}
+
+.dialogOverlay {
+	background-color: rgba(0, 0, 0, .5);
+	bottom: 0;
+	left: 0;
+	position: fixed;
+	right: 0;
+	top: 0;
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/dropdown.less b/wcfsetup/install/files/style/dropdown.less
new file mode 100644
index 0000000000..5012d35077
--- /dev/null
+++ b/wcfsetup/install/files/style/dropdown.less
@@ -0,0 +1,165 @@
+.dropdown {
+	position: relative;
+	
+	.dropdownToggle:active,
+	&.dropdownOpen .dropdownToggle {
+		outline: 0;
+	}
+	
+	&.preInput {
+		display: table;
+		width: 100%;
+		
+		input,
+		textarea {
+			min-width: 300px;
+		}
+		
+		input {
+			display: table-cell;
+			margin: 0;
+			width: 99%;
+			
+			.borderRadius(0, @wcfContainerBorderRadius, @wcfContainerBorderRadius, 0);
+		}
+		
+		textarea {
+			display: block;
+			margin-top: 0;
+			
+			.borderRadius(0, @wcfContainerBorderRadius, @wcfContainerBorderRadius, @wcfContainerBorderRadius);
+		}
+		
+		.dropdownCaption {
+			cursor: pointer;
+			display: table-cell;
+			letter-spacing: -1px;
+			padding-left: @wcfGapTiny;
+			padding-right: @wcfGapSmall;
+			vertical-align: middle;
+			width: 1%;
+			
+			.borderRadius(@wcfContainerBorderRadius, 0, 0, @wcfContainerBorderRadius);
+			
+			span {
+				margin-right: -1px;
+				padding-left: @wcfGapTiny;
+				white-space: nowrap;
+				
+				&.active {
+					background-image: url(../icon/dropdown1.svg);
+					background-position: right center;
+					background-repeat: no-repeat;
+					color: @wcfColor;
+					padding-right: @wcfGapMedium;
+				}
+			}
+		}
+		
+		.dropdownCaptionTextarea {
+			cursor: pointer;
+			margin: 0 0 -1px 0;
+			padding-left: @wcfGapSmall;
+			padding-right: @wcfGapSmall;
+			
+			.borderRadius(@wcfContainerBorderRadius, 0);
+			
+			&~ .dropdownMenu {
+				top: 10%;
+			}
+			
+			span {
+				white-space: nowrap;
+				
+				&.active {
+					background-image: url(../icon/dropdown1.svg);
+					background-position: right center;
+					background-repeat: no-repeat;
+					color: @wcfColor;
+					padding-right: @wcfGapMedium;
+				}
+			}
+		}
+	}
+
+	.dropdownMenu {
+		background-color: @wcfDropdownBackgroundColor;
+		border: 1px solid @wcfContainerBorderColor;
+		color: @wcfDropdownColor;
+		display: none;
+		float: left;
+		left: 0;
+		min-width: 160px;
+		padding: 4px 0;
+		position: absolute;
+		z-index: 350;
+		
+		.borderRadius();
+		.boxShadow(0, 5px, rgba(0, 0, 0, .2), 10px);
+		
+		&:after {
+			border: 7px solid transparent;
+			border-bottom-color: @wcfContainerBorderColor;
+			border-top-width: 0;
+			content: "";
+			display: inline-block;
+			left: 9px;
+			position: absolute;
+			top: -7px;
+			z-index: 100;
+		}
+		
+		&:before {
+			border: 6px solid transparent;
+			border-bottom-color: @wcfDropdownBackgroundColor;
+			border-top-width: 0;
+			content: "";
+			display: inline-block;
+			left: 10px;
+			position: absolute;
+			top: -6px;
+			z-index: 101;
+		}
+		
+		li {
+			display: block;
+			
+			&:hover:not(.dropdownDivider) {
+				background-color: @wcfDropdownHoverBackgroundColor;
+			}
+			
+			&.dropdownDivider {
+				border-top: 1px dotted rgba(0, 0, 0, .2);
+				margin: @wcfGapTiny;
+			}
+			
+			> a,
+			> span {
+				clear: both;
+				color: @wcfDropdownColor;
+				cursor: pointer;
+				display: block;
+				padding: @wcfGapTiny @wcfGapMedium;
+				white-space: nowrap;
+				
+				.textShadow(@wcfDropdownBackgroundColor);
+				
+				&:hover {
+					color: @wcfDropdownColor;
+					
+					.textShadow(@wcfDropdownHoverBackgroundColor);
+				}
+			}
+		}
+	}
+	
+	&.dropdownOpen {
+		.dropdownToggle {
+			color: @wcfPageLinkHoverColor;
+		}
+		
+		.dropdownMenu {
+			display: block;
+		}
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/extra/print.css b/wcfsetup/install/files/style/extra/print.css
deleted file mode 100644
index 41cbcaa93c..0000000000
--- a/wcfsetup/install/files/style/extra/print.css
+++ /dev/null
@@ -1,269 +0,0 @@
-/**
- * Print Styles (LTR)
- *
- * @author		Arian Glander, Harald Szekely
- * @copyright	2006-2011 WoltLab GmbH
- */
-
-/* -- -- -- -- -- General -- -- -- -- -- */
-
-a {
-	color: black;
-}
-
-.copyright {
-	font-size: .7em;
-	text-align: center;
-	padding-top: 20px;
-	clear: both;
-	display: block;
-}
-
-#page {
-	width: auto !important;
-}
-
-/* -- -- -- -- -- Hidden Elements -- -- -- -- -- */
-
-.hidden, #header, #userPanel, .tabMenu, .subTabMenu, .signature, .pmView, th img, .messageNumber, .editNote, .pmFolders, .infoBox, .largeButtons, .smallButtons, .optionButtons, .pageNavigation, .pageOptions, .quickJump,  .userExtras, .scrollUp, .userMessenger, .mainHeadline img, .userAvatar, .userAvatarFramed, .columnUsername img, .userProfileBox, .containerIcon, .userPosts, .userName img, .boardlistLastPost, .boardlistCounter,.boardlistStats, .boardlistUsersOnline, .moderators, .smallPages, .columnIcon img, .columnMarkTopics, .columnMark, .columnReplies, .columnAvatar, .columnViews, .columnLastPost, .breadCrumbs img, legend img, .columnHomepage a img, .columnEmail a img, .columnPosts, .columnRegistrationDate, .userRank, .userTitle, .messageCount, .footerMenu, .footerOptions, .mainMenu, .quickReply, .userSymbols, .userCredits, .statusDisplay, .info, #userCard, #tplUserGalleryPhoto form, .thumbnailButtons, .quoteHeader img, #tplCalendarEvent form, #tplCalendarEvent #participation img, .monthJump {
-	display: none;
-}
-
-/* -- -- -- -- -- Tables -- -- -- -- -- */
-
-table {
-	border-collapse: collapse;
-	width: 100%;
-}
-
-td, th {
-	border: 1px solid black;
-}
-
-th, th a {
-	color: #fff;
-	text-align: left;
-	white-space: nowrap;
-	background-color: #000;
-}
-
-td {
-	vertical-align: top;	
-}
-
-.mainHeadline .headlineContainer h1 {
-	font-size: 1.5em;
-}
-
-.columnIcon {
-	width: 0;
-}
-
-td p, th p {
-	margin: 0;
-	padding: 0;
-}
-
-.columnRating {
-	text-align: center;
-	width: 0;
-}
-
-.columnTopic {
-	width: 80%;
-}
-
-.columnTitle p {
-	overflow: hidden;
-}
-
-.columnDate {
-	white-space: nowrap;
-}
-
-td.columnHomepage a:after {
-	content: ""attr(href)"";
-}
-
-td.columnEmail a[href^="mailto:"]:after {
-	content: ""attr(href)"";
-}
-
-/* -- -- -- -- -- Breadcrumb Style Navigation -- -- -- -- -- */
-
-.breadCrumbs {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-}
-
-.breadCrumbs li {
-	font-style: italic;
-	margin-right: 5px;
-	display: inline;
-}
-
-/* -- -- -- -- -- Message Layout -- -- -- -- -- */
-
-.message {
-	border: 1px solid black;
-	margin: 7px 3px;
-	padding: 13px;
-}
-
-.message hr {
-	display: none;
-}
-
-.messageHeader {
-	font-style: italic;
-	margin: -1em 0 0 0;
-	padding: 0;
-	text-align: right;
-}
-
-.messageHeader p {
-	margin: 0;
-}
-
-.messageContent h3 {
-	font-size: 1em;
-	margin: 0;
-	padding: 7px;
-	clear: both;
-}
-
-.messageBody {
-	border-top: 1px solid black;
-	padding-top: 7px;
-	clear: both;
-}
-
-.messageInner {
-	margin: -10px 0;
-	padding: 0;
-}
-
-.messageText {
-	margin: 7px 0;
-}
-
-.messageAuthor, .messageAuthor .userName {
-	margin: 0;
-	padding: 0;
-}
-
-.messageAuthor .userName {
-	font-style: italic;
-	font-weight: bold;
-	display: inline;
-}
-
-.messageAuthor .userCredits .userTitle {
-	font-size: .8em;
-	margin: 0 0 -10px 0;
-	padding: 0;
-}
-
-blockquote {
-	margin: 5px;
-}
-
-.quoteBox {
-	border: 1px solid black;
-	margin-bottom: 5px;
-	padding: 10px;
-}
-
-.quoteBox h3 {
-	font-style: italic;
-	margin: 0;
-	padding: 0;
-}
-
-.codeBox h3 {
-	font-style: italic;
-	margin: 0;
-	padding: 0;
-}
-
-.poll .containerContent h3 {
-	font-style: italic;
-	margin: 0;
-	padding: 0;
-}
-
-.attachmentPreview fieldset {
-	margin-top: 13px;
-}
-
-.attachmentPreview ul {
-	margin: 0;
-	list-style: none;
-	padding: 0;
-}
-
-.attachmentPreview li {
-	margin-right: 10px;
-	float: left;
-}
-
-.attachmentPreview li img {
-	margin: 0 !important;
-}
-
-.attachmentFile img {
-	display: none;
-}
-
-
-/* -- -- -- -- -- calendar.css -- -- -- -- -- */
-
-#tplCalendarEvent #participation .messageHeader {
-	text-align: left;
-}
-
-/* -- -- -- -- -- Form Element -- -- -- -- -- */
-
-.formElement {
-	margin: 5px 0 3px 0;
-	min-height: 0;
-}
-
-.formElement:after {
-	content: "";
-	height: 0;
-	display: block;
-	clear: both;
-}
-
-/* -- -- -- -- -- Form Field -- -- -- -- -- */
-
-.formField {
-	padding: 0;
-	min-height: 1em;
-	border-bottom: 1px solid black;
-}
-
-.formElement .formField {
-	margin-left: 216px;
-}
-
-/* -- -- -- -- -- Form Field Label -- -- -- -- -- */
-
-.formFieldLabel {
-	text-align: right;
-	float: left;
-	width: 200px;
-	margin: 0;
-}
-
-fieldset {
-	margin: 20px 1px 0 1px !important;
-}
-
-.formSubmit {
-	display: none;
-}
-
-/* -- -- -- -- -- EOF -- -- -- -- -- */
diff --git a/wcfsetup/install/files/style/footer.less b/wcfsetup/install/files/style/footer.less
new file mode 100644
index 0000000000..4bd6655ed7
--- /dev/null
+++ b/wcfsetup/install/files/style/footer.less
@@ -0,0 +1,20 @@
+.footer {
+	padding-bottom: @wcfGapSmall;
+	z-index: 100;
+	
+	.footerContent {
+		text-align: center;
+		
+		a {
+			color: @wcfPageLinkColor;
+			
+			.textShadow(@wcfPageBackgroundColor);
+			.transition(color, .1s);
+			
+			&:hover {
+				color: @wcfPageLinkHoverColor;
+				text-decoration: none;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/forms.less b/wcfsetup/install/files/style/forms.less
new file mode 100644
index 0000000000..cadc19643a
--- /dev/null
+++ b/wcfsetup/install/files/style/forms.less
@@ -0,0 +1,192 @@
+/* ############## Fieldsets ############## */
+fieldset {
+	background-color: @wcfContainerBackgroundColor;
+	border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
+	border-radius: @wcfContainerBorderRadius;
+	box-sizing: border-box;
+	margin: @wcfGapMedium 0 0;
+	padding: @wcfGapTiny @wcfGapMedium @wcfGapMedium;
+}
+
+.container fieldset {
+	background-color: @wcfContainerAccentBackgroundColor;
+}
+
+fieldset:last-child,
+fieldset:only-child {
+	margin-bottom: @wcfGapSmall !important;
+}
+
+fieldset legend {
+	color: @wcfLinkColor;
+	margin: auto -@wcfGapSmall;
+	padding: 0 @wcfGapSmall 0;
+	
+	.textShadow(@wcfContainerAccentBackgroundColor);
+}
+
+fieldset legend ~ p {
+	margin-bottom: @wcfGapMedium;
+}
+
+/* Special Sidebar */
+
+.sidebar fieldset {
+	background-color: transparent;
+	border-width: 0;
+}
+
+.sidebar fieldset legend {
+	color: @wcfColor;
+	padding: 0;
+	text-transform: uppercase;
+		
+	.textShadow(@wcfHighlightBackgroundColor);
+}
+
+/* ############## Labeled Content ############## */
+
+/* Simple */
+
+dl {
+	margin-top: @wcfGapSmall;
+	position: relative;
+}
+
+fieldset dl:first-of-type {
+	margin-top: 0;
+}
+
+dl > dt {
+	color: @wcfLabelColor; //rgba(102, 153, 204, 1);
+	float: left;
+	margin-top: 5px;
+	text-align: right;
+}
+
+dl > dt {
+	width: 230px;
+}
+
+dl.wide > dt {
+	display: none;
+}
+
+dl > dt > label {
+	display: block;
+	margin-top: 5px;
+}
+
+dl.disabled > dt {
+	color: @wcfDimmedColor;
+}
+
+dl > dd {
+	padding-top: 5px;
+}
+
+dl > dd {
+	margin-left: 250px;
+}
+
+dl.wide > dd {
+	margin-left: 0;
+}
+
+dl > dd > small {
+	color: @wcfDimmedColor;
+	display: block;
+	font-size: 85%;
+	margin: 3px 0 7px;
+}
+
+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 {
+	margin-top: 2px;
+	position: absolute;
+	text-align: left;
+	width: auto;
+}
+
+.reversed {
+	left: 270px;
+}
+
+.reversed ~ dd > input[type='checkbox'] {
+	margin-left: 0;
+}
+
+/* Special -> Sidebar */
+
+.sidebar dl > dt {
+	text-align: left;
+	float: none;
+	width: auto;
+}
+
+.sidebar dl > dd {
+	display: block;
+	margin-left: 0;
+	margin-bottom: 13px;
+}	
+
+.sidebar dl > dd * {
+	display: block;
+}
+
+/* Globals */
+
+label {
+	color: @wcfLabelColor;
+}
+
+/* Structure */
+
+.formSubmit {
+	margin-top: 15px;
+	text-align: center;
+}
+
+input[type='checkbox'] ~ small,
+input[type='radio'] ~ small {
+	margin-top: 0;
+	margin-left: 21px;
+}
+
+/* todo ckeditor fixes */
+.cke_skin_kama {
+	border-width: 0 !important;
+	padding: 0 !important;
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/import.less b/wcfsetup/install/files/style/import.less
deleted file mode 100644
index 06421e3383..0000000000
--- a/wcfsetup/install/files/style/import.less
+++ /dev/null
@@ -1,5 +0,0 @@
-@import "wcf.less";
-@import "user.less";
-@import "message.less";
-@import "label.less";
-@import "bbcode.less";
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/inputs.less b/wcfsetup/install/files/style/inputs.less
new file mode 100644
index 0000000000..06cceb61e0
--- /dev/null
+++ b/wcfsetup/install/files/style/inputs.less
@@ -0,0 +1,164 @@
+/* -- -- -- 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] {
+	box-sizing: border-box;
+	padding: 5px 3px;
+}
+
+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] {
+	background-color: @wcfInputBackgroundColor;
+	border-color: darken(@wcfInputBorderColor, 20%) @wcfInputBorderColor lighten(@wcfInputBorderColor, 13%);
+	border-radius: 3px;
+	border-style: solid;
+	border-width: 1px;
+	color: @wcfInputColor;
+	
+	.boxShadowInset(0, 1px, rgba(0, 0, 0, .1));
+	.transition(~"background-color, border", .2s);
+}
+
+/* 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 {
+	background-color: @wcfInputHoverBackgroundColor;
+	border-color: @wcfInputHoverBorderColor;
+	//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 {
+	background-color: @wcfInputHoverBackgroundColor;
+	border-color: @wcfInputHoverBorderColor;
+	outline: none;
+	
+	// TODO: use mixin 
+	box-shadow: 0 0 5px fade(@wcfInputHoverBorderColor, 50%), inset 0 1px 5px rgba(0, 0, 0, .2);
+		-webkit-box-shadow: 0 0 5px fade(@wcfInputHoverBorderColor, 50%), inset 0 1px 5px rgba(0, 0, 0, .2);
+		-moz-box-shadow: 0 0 5px fade(@wcfInputHoverBorderColor, 50%), inset 0 1px 5px rgba(0, 0, 0, .2);
+		-ms-box-shadow: 0 0 5px fade(@wcfInputHoverBorderColor, 50%), inset 0 1px 5px rgba(0, 0, 0, .2);
+		-o-box-shadow: 0 0 5px fade(@wcfInputHoverBorderColor, 50%), 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] {
+	background-color: transparent;
+	// TODO:
+	border-color: rgba(204, 204, 204, 1) rgba(221, 221, 221, 1) rgba(238, 238, 238, 1);
+	
+	.boxShadowInset(0, 1px, rgba(0, 0, 0, .01));
+}
+
+/* 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] {
+	background-color: rgba(255, 255, 255, .5);
+	border-color: rgba(255, 255, 255, .5);
+}
+
+/* Width */
+textarea {
+	width: 99%;
+}
+	
+.tiny {
+	width: 50px;
+}
+	
+.short {
+	min-width: 50px;
+	width: 10%;
+}
+	
+.medium {
+	min-width: 100px;
+	width: 30%;
+}
+	
+.long {
+	min-width: 150px;
+	width: 100%;
+}
+
+/* Form Errors */
+
+.formError input[type='text'],
+.formError input[type='search'],
+.formError input[type='email'],
+.formError input[type='url'],
+.formError input[type='password'],
+.formError textarea {
+	border-color: @errorBorderColor;
+	background-color: @errorBackgroundColor;
+	color: @errorColor;
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
new file mode 100644
index 0000000000..a887cf5912
--- /dev/null
+++ b/wcfsetup/install/files/style/layout.less
@@ -0,0 +1,233 @@
+/* general definitions */
+body {
+	background-color: @wcfPageBackgroundColor;
+	background-image: url(../../images/header.png);
+	background-repeat: repeat-x;
+	color: @wcfPageColor;
+	font-family: @wcfBaseFontFamily;
+	font-size: @wcfBaseFontSize;
+	line-height: 1;
+}
+
+a {
+	color: @wcfLinkColor;
+	cursor: pointer;
+	text-decoration: none;
+		
+	&:hover {
+		color: @wcfLinkHoverColor;
+		text-decoration: underline;
+	}
+}
+
+#pageHeader {
+	margin-top: 57px;
+	z-index: 100;
+}
+
+#top {
+	display: block;
+	height: 1px;
+	visibility: hidden;
+}
+
+small {
+	font-size: 85%;
+	margin-top: 2px;
+}
+
+.invisible {
+	display: none;
+}
+
+.marginTop {
+	margin-top: @wcfGapMedium;
+}
+
+img {
+	vertical-align: middle !important;
+}
+
+/* basic layout elements */
+.layoutFluid {
+	padding: 0 @wcfLayoutFluidGap;
+}
+
+.layoutFixed {
+	margin: 0 auto;
+	width: @wcfLayoutFixedWidth;
+}
+
+.container {
+	background-color: @wcfContainerBackgroundColor;
+	border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
+	border-radius: @wcfContainerBorderRadius;
+}
+
+.containerPadding {
+	padding: @wcfGapMedium @wcfGapLarge @wcfGapMedium;
+}
+
+.containerList {
+	> li {
+		padding: @wcfGapMedium @wcfGapLarge;
+	
+		.transition(background-color, .1s);
+	
+		&:nth-child(2n) {
+			background-color: @wcfContainerAccentBackgroundColor;
+		}
+		
+		&:first-child {
+			.borderRadius(@wcfContainerBorderRadius, 0);
+		}
+		
+		&:last-child {
+			.borderRadius(0, @wcfContainerBorderRadius);
+		}
+		
+		&:hover {
+			background-color: @wcfHighlightBackgroundColor;
+		}
+	}
+}
+
+.containerHeadline {
+	margin-bottom: @wcfGapSmall;
+	
+	> h1 {
+		font-size: 120%;
+		font-weight: bold;
+		margin-bottom: 2px;
+		
+		> small {
+			color: @wcfDimmedColor;
+			font-weight: normal;
+			text-shadow: none;
+			font-size: 70%;
+		}
+	}
+	
+	> h1, > h1 > a {
+		.textShadow(@wcfContainerBackgroundColor);
+	}
+}
+
+/* boxes with an image */
+.box(@imageSize, @gapOffset: 0) {
+	/* using a min-height prevents us from clearing (which causes a lot of issues) */
+	min-height: @imageSize + 4px;
+	
+	> :first-child {
+		float: left;
+	}
+	
+	> *:not(:first-child) {
+		margin-left: (@imageSize + @gapOffset);
+	}
+	
+	> .framed ~ * {
+		margin-left: (@imageSize + @gapOffset) + 4px;
+	}
+}
+
+.box16 { .box(16px, 3px); }
+.box24 { .box(24px, 5px); }
+.box32 { .box(32px, 4px); }
+.box48 { .box(48px, 8px); }
+.box64 { .box(64px, 10px); }
+.box96 { .box(96px, 12px); }
+.box128 { .box(128px, 16px); }
+.box256 { .box(256px, 32px); }
+
+.boxHeadline {
+	margin-top: @wcfGapLarge;
+	
+	hgroup {
+		> h1 {
+			font-size: 170%;
+			font-weight: bold;
+			border-bottom: 1px solid @wcfColor;
+			padding: 1px 0 10px;
+			
+			.textShadow(@wcfContentBackgroundColor);
+			
+			a {
+				color: @wcfColor;
+				text-decoration: none;
+			}
+		}
+		
+		> h2 {
+			color: @wcfDimmedColor;
+			padding-top: 5px;
+		}
+	}
+}
+
+.boxSubHeadline {
+	> h1 {
+		border-bottom: 1px solid @wcfDimmedColor;
+		color: @wcfDimmedColor;
+		font-size: 150%;
+		font-weight: bold;
+		padding: 1px 0 10px;
+
+		.textShadow(@wcfContainerBackgroundColor);
+	}
+}
+
+.icon(@imageSize) {
+	.square(@imageSize);
+}
+
+.icon16 { .icon(16px); }
+.icon24 { .icon(24px); }
+.icon32 { .icon(32px); }
+.icon48 { .icon(48px); }
+.icon64 { .icon(64px); }
+.icon96 { .icon(96px); }
+.icon128 { .icon(128px); }
+.icon256 { .icon(256px); }
+
+dl.dataList {
+	display: inline-block;
+	font-size: 90%;
+	margin: 0;
+	position: static;
+	
+	dd {
+		display: inline-block;
+		margin: 0;
+		padding: 0;
+	}
+	
+	dt {
+		color: @wcfDimmedColor;
+		display: inline-block;
+		float: none;
+		margin: 0;
+		text-align: left;
+		width: auto;
+		
+		&:after {
+			content: ":";
+		}
+	}
+}
+
+.framed {
+	img  {
+		background-color: @wcfContentBackgroundColor;
+		border: 1px solid @wcfContainerBorderColor;
+		padding: 1px;
+	}
+}
+
+/* -- -- -- Shadows -- -- --  */
+
+/* Shadows for boxes - do not use on small boxes! */
+
+.shadow {
+	.boxShadow(0, 10px, rgba(0, 0, 0, .1), 10px, -10px);
+}
diff --git a/wcfsetup/install/files/style/logo.less b/wcfsetup/install/files/style/logo.less
new file mode 100644
index 0000000000..f113be0539
--- /dev/null
+++ b/wcfsetup/install/files/style/logo.less
@@ -0,0 +1,19 @@
+.logo {
+	a {
+		display: block;
+		min-height: 100px;
+		
+		&:hover {
+			text-decoration: none;
+		}
+		
+		h1 {
+			color: @wcfPageLinkHoverColor;
+			float: right;
+			font-size: 160%;
+			padding-top: @wcfGapLarge;
+			
+			.textShadow(@wcfPageBackgroundColor);
+		}
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/message.less b/wcfsetup/install/files/style/message.less
old mode 100755
new mode 100644
index 2e7cbf6087..b8ebe752f0
--- a/wcfsetup/install/files/style/message.less
+++ b/wcfsetup/install/files/style/message.less
@@ -1,905 +1,399 @@
-/**
- * Message Styles  
- *
- * @author		Harald Szekely 
- * @copyright	2011 WoltLab GmbH 
- */
-
-
-
-/* ############## LESS Definitions ############## */
-
-/* -- -- -- LESS: Posts -- -- -- */
-
-/* Back Image */
-
-/* Back Image (header.png) */
-@backImagePost: url('../images/header.png');
-
-/* Orientations */
-
-/* Post Orientation (left|top|right|bottom) */
-@postOrientation: left;
-
-/* Post Sidebar Orientation (left|center|right) */
-@postSidebarOrientation: center;
-
-
-
-/* ############## Article ############## */
-
-/* Globals */
-
-.wcf-message {
-	border-color: @borderColor22;
-	background-color: #d8e7f5;
+.message {
+	background-color: @wcfHighlightBackgroundColor;
+	border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
 	position: relative;
-}
-
-.wbb-threadStarter .wcf-message {
-	.mxStripes1;
 	
-	background-position: @postOrientation top, @postOrientation top;
-	background-repeat: repeat, repeat;
-}
-
-.wcf-message:after {
-	content: '';
-	display: block;
-	clear: both;
-}
-
-/* Message Deleted */
-
-.wcf-message.deleted {
-	opacity: .5;
-}
-
-/* Special */
-
-.wcf-messageRed {
-	border-color: #c00;
-	background-color: #fee;
-}
-
-
-
-/* -- -- -- -- Message Content -- -- -- -- -- */
-
-/* Globals */
-
-.wcf-message .wcf-messageContent {
-	.mxBorderRadius;
-	
-	background-color: #fcfdfe;
-}
-
-li:nth-child(2n+1) .wcf-message .wcf-messageContent {
-	/* Auto-colorer for every 2nd message */
-	background-color: #f3f7fb;
-}
-
-/* Orientation */
-
-@media screen and (min-width: 480px) {
+	.boxShadow(0, 0, #eee, 7px);
+	.borderRadius();
 	
-	.wcf-message.left .wcf-messageContent {
-		border-left: 1px solid @borderColor22;
-		margin: 0 0 0 211px;
-	}
-
-	.wcf-message.right .wcf-messageContent {
-		border-right: 1px solid @borderColor22;
-		margin: 0 211px 0 0;
+	&:after {
+		clear: both;
+		content: '';
+		display: block;
 	}
 	
-}
-
-@media screen and (max-width: 480px) {
-	
-	.wcf-message .wcf-messageContent {
-		border-top: 1px solid @borderColor22;
-		margin: 0;
+	&:hover .messageFooter nav {
+			opacity: 1;
 	}
-
-}
-
-
-
-/* Message Header */
-
-.wcf-message .wcf-messageContent header {
-	position: relative;
-}
-
-@media screen and (min-width: 480px) {
 	
-	.wcf-message .wcf-messageContent header {
-		padding: 20px 20px 5px;
+	&.deleted {
+		opacity: .5;
 	}
-	
 }
-
-@media screen and (max-width: 480px) {
 	
-	.wcf-message .wcf-messageContent header {
-		padding: 10px 20px 0;
+.message.messageSidebarOrientationLeft {
+	.messageContent {
+		border-left: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
+		margin: 0 0 0 211px;
 	}
-
-}
-
-
-
-/* Message Header Contents */
-
-.wcf-message .wcf-messageContent header time {
-	font-size: 85%;
-	color: @fontColor53;
-	margin-top: 7px;
-}
-
-.wcf-message .wcf-messageContent header .wcf-likesDisplay {
-	margin-top: 1px;
-	margin-left: 5px;
-	display: inline-block;
-}
-
-.wcf-message .wcf-messageContent header .wcf-likesDisplay .wcf-badge {
-	font-size: 75%;
-	margin-left: 0;
-	top: 0;
-}
-
-.wcf-message .wcf-messageContent header .wcf-messageTitle {
-	font-weight: bold;
-	color: @fontColor53;
-	text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
-}
-
-@media screen and (min-width: 480px) {
 	
-	.wcf-message .wcf-messageContent header .wcf-messageTitle {
-		font-size: 130%;
-		padding: 13px 0 0;
+	.messageSidebar {
+		float: left;
 	}
-
-}
-
-@media screen and (max-width: 480px) {
 	
-	.wcf-message .wcf-messageContent header .wcf-messageTitle {
-		font-size: 170%;
-		padding: 7px 0 0;
+	header > .pointer {
+		border-color: transparent @wcfContainerBorderColor transparent transparent;
+		border-style: @wcfContainerBorderStyle @wcfContainerBorderStyle @wcfContainerBorderStyle none;
+		left: -20px;
+		
+		> span {
+			border-color: transparent @wcfContainerBackgroundColor transparent transparent;
+			border-style: @wcfContainerBorderStyle @wcfContainerBorderStyle @wcfContainerBorderStyle none;
+			left: 1px;
+		}
 	}
-
-}
-
-.wcf-message header .wcf-messageCounter {
-	font-size: 90%;
-	font-weight: bold;
-	float: right;
-	margin-left: 7px;
-}
-
-.wcf-message header .wcf-messageCounter a {
-	padding: 2px 5px;
-}
-
-
-
-/* -- -- -- -- Message Pointer -- -- -- -- -- */
-
-/* Level 1 - Globals */
-
-.wcf-message header > .pointer {
-	display: block !important;
-	position: absolute;
-	width: 0;
-	height: 0;
-	z-index: 100;
-}
-
-/* Level 2 - Globals */
-
-.wcf-message header > .pointer > span {
-	display: block;
-	position: absolute;
-	width: 0;
-	height: 0;
 }
 
-@media screen and (min-width: 480px) {
-	
-	/* Level 1 - Globals */
-	
-	.wcf-message header > .pointer {
-		border-width: 20px;
-		top: 35px;
+.message.messageSidebarOrientationRight {
+	.messageContent {
+		border-right: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
+		margin: 0 211px 0 0;
 	}
 	
-	/* Level 1 - Left-Right */
-	
-	.wcf-message.left header > .pointer {
-		border-style: solid solid solid none;
-		border-color: transparent @borderColor22 transparent transparent;
-		left: -20px;
+	.messageSidebar {
+		float: right;
 	}
 	
-	.wcf-message.right header > .pointer {
-		border-style: solid none solid solid;
-		border-color: transparent transparent transparent @borderColor22;
+	header > .pointer {
+		border-color: transparent transparent transparent @wcfContainerBorderColor;
+		border-style: @wcfContainerBorderStyle none @wcfContainerBorderStyle @wcfContainerBorderStyle;
 		right: -20px;
+		
+		> span {
+			border-color: transparent transparent transparent @wcfContainerBorderColor;
+			border-style: @wcfContainerBorderStyle none @wcfContainerBorderStyle @wcfContainerBorderStyle;
+			right: 1px;
+		}			
 	}
-	
-	/* Level 2 - Globals */
-	
-	.wcf-message header > .pointer > span {
-		border-width: 20px;
-		top: -20px;
-	}
-	
-	/* Level 2 - Left-Right */
-	
-	.wcf-message.left header > .pointer > span {
-		border-style: solid solid solid none;
-		border-color: transparent #fcfdfe transparent transparent;
-		left: 1px;
-	}
-	
-	.wcf-message.right header > .pointer > span {
-		border-style: solid none solid solid;
-		border-color: transparent transparent transparent #fcfdfe;
-		right: 1px;
-	}
-	
-	li:nth-child(2n+1) .wcf-message.left header > .pointer > span {
-		/* Auto-colorer for every 2nd message-left */
-		border-right-color: #f3f7fb;
-	}
-	
-	li:nth-child(2n+1) .wcf-message.right header > .pointer > span {
-		/* Auto-colorer for every 2nd message-right arrow */
-		border-left-color: #f3f7fb;
-	}
-	
 }
 
-@media screen and (max-width: 480px) {
-	
-	/* Level 1 - Globals */
-	
-	.wcf-message header > .pointer {
-		border-width: 10px;
-		top: -10px;
-	}
-	
-	/* Level 1 - Left-Right */
-	
-	.wcf-message header > .pointer {
-		border-style: none solid solid solid;
-		border-color: transparent transparent @borderColor22 transparent;
-		left: 47%;
+.message.dividers {
+	.userAvatar,
+	.userRank,
+	.userCredits,
+	.userStatus {
+		border-bottom: @wcfContainerBorderWidth dotted darken(@wcfContainerBorderColor, 10%);
 	}
 	
-	/* Level 2 - Globals */
-	
-	.wcf-message header > .pointer > span {
-		border-width: 10px;
-		top: 1px;
-	}
-	
-	/* Level 2 - Left-Right */
-	
-	.wcf-message header > .pointer > span {
-		border-style: none solid solid solid;
-		border-color: transparent transparent #fcfdfe transparent;
-		left: -10px;		
+	.messageSidebar div:last-child {
+		border: 0;
 	}
 	
-	li:nth-child(2n+1) .wcf-message header > .pointer > span {
-		/* Auto-colorer for every 2nd message arrow */
-		border-bottom-color: #f3f7fb;
+	.messageSidebar > div {
+		> div,
+		> header {
+			vertical-align: top;
+		}
 	}
-	
-}
-
-
-
-/* -- -- -- -- Message Content -- -- -- -- -- */
-
-/* Message Body */
-
-.wcf-message .wcf-messageBody {
-	color: @fontColor52;
-	display: block;
-	position: relative;
 }
 
-@media screen and (min-width: 480px) {
-	
-	.wcf-message .wcf-messageBody {
-		font-size: 90%;
-		line-height: 1.75;
-		padding: 10px 20px 1px;
+.message header {
+	> .pointer {
+		border-width: 20px;
+		display: block !important;
+		height: 0;
+		position: absolute;
+		top: 35px;
+		width: 0;
+		z-index: 100;
+		
+		> span {
+			border-width: 20px;
+			display: block;
+			height: 0;
+			position: absolute;
+			top: -20px;
+			width: 0;
+		}
 	}
 	
-}
-
-@media screen and (max-width: 480px) {
-	
-	.wcf-message .wcf-messageBody {
-		font-size: 120%;
-		line-height: 1.9;
-		padding: 5px 20px 1px;
+	.messageCounter {
+		float: right;
+		font-size: 90%;
+		font-weight: bold;
+		margin-left: @wcfGapSmall;
+		
+		a {
+			padding: 2px 5px;
+		}
 	}
-	
-}
-
-.wcf-message .wcf-messageBody:after {
-	content: '';
-	display: block;
-	clear: both;
 }
 
-.wcf-message .wcf-messageBody > div,
-.wcf-message .wcf-messageBody > wcf-signature {
-	border-top: @borderWidthSeparator @borderStyleSeparator @borderColor11;
-	padding: 10px 0;
+.message .messageBody {
+	color: @wcfColor;
 	display: block;
-	overflow: hidden;
-}
-
-.wcf-message .wcf-messageBody .wcf-signature {
-	color: @fontColor53;
-	overflow: hidden;
-}
-
-@media screen and (min-width: 480px) {
-	
-	.wcf-message .wcf-messageBody .wcf-signature {
-		padding: 10px 0 20px;
-	}
-	
-}
-
-@media screen and (max-width: 480px) {
-	
-	.wcf-message .wcf-messageBody .wcf-signature {
-		padding: 5px 0;
-	}
-	
-}
-
-
-
-/* -- -- -- -- Message Sidebar -- -- -- -- -- */
-
-/* Globals */
-
-.wcf-message .wcf-messageSidebar {
 	font-size: 90%;
-	line-height: 1.3;
+	line-height: 1.75;
+	padding: 10px 20px 1px;
 	position: relative;
-	box-sizing: border-box;
-}
-	
-@media screen and (min-width: 480px) {
-	
-	.wcf-message .wcf-messageSidebar {
-		text-align: center;
-		margin-bottom: -1px;
-		padding: 10px 20px 20px;
-		/* Width toggle */
-		width: 210px;
-	}
-}
-
-@media screen and (max-width: 480px) {
-	
-	.wcf-message .wcf-messageSidebar {
-		text-align: left;
-		padding: 5px 0 10px;
-		width: 100%;
-	}
-	
-}
-
-.wcf-message .wcf-messageSidebar:after {
-	content: '';
-	display: block;
-	clear: both;
-}
-
-/* Orientation */
-
-@media screen and (min-width: 480px) {
-	
-	.wcf-message.left .wcf-messageSidebar {
-		float: left;
-	}
 	
-	.wcf-message.right .wcf-messageSidebar {
-		float: right;
+	&:after {
+		clear: both;
+		content: '';
+		display: block;
 	}
 	
-}
-
-@media screen and (max-width: 480px) {
-	
-	.wcf-message .wcf-messageSidebar {
-		float: none;
-	}
-	
-}
-
-
-
-/* Message Sidebar Header */
-
-.wcf-message .wcf-messageSidebar header .wcf-username,
-.wcf-message .wcf-messageSidebar header .wcf-username a {
-	font-size: 110%;
-	font-weight: bold;
-	text-decoration: none;
-	text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
-	color: @fontColor3;
-	padding: 1px 3px;
-}
-
-/* Message Sidebar Contents */
-
-.wcf-message .wcf-messageSidebar a {
-	color: @fontColor3;
-}
-
-.wcf-message .wcf-messageSidebar a:hover {
-	color: @fontColor3;
-}
-
-.wcf-message .wcf-messageSidebar .userTitle .wcf-badge {
-	font-size: 95%;
-	color: @fontColor1;
-	/* border-radius: 13px; obsolete? */
-	background-color: @backColor3;
-	margin-top: 3px;
-	padding: 0 10px;
-	display: inline-block;
-	
-	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-	-ms-box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-	-o-box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-	box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-}
-
-.wcf-message .wcf-messageSidebar .userRank {
-	font-size: 95%;
-	color: @fontColor1;
-	margin: 3px 0 0;
-	padding: 0 0 7px;
-	display: block;
-}
-
-.wcf-message .wcf-messageSidebar .wcf-userAvatar {
-	margin: 7px 0 0;
-	padding: 0 0 7px;
-	display: block;
-}
-
-.wcf-message .wcf-messageSidebar .wcf-userAvatar img {
-	border: none;
-	padding: 0;
-}
-
-.wcf-message .wcf-messageSidebar .userCredits {
-	font-size: 95%;
-	color: @fontColor3;
-	margin: 7px 0 0;
-	padding: 0 0 7px;
-	display: block;
-}
-
-.wcf-message .wcf-messageSidebar .userCredits p,
-.wcf-message .wcf-messageSidebar .userCredits a {
-	color: @fontColor3;
-}
-
-.wcf-message .wcf-messageSidebar .userStatus,
-.wcf-message .wcf-messageSidebar .userContacts {
-	color: @fontColor3;
-	margin: 7px 0 0;
-	display: block;
-}
-
-.wcf-message .wcf-messageSidebar .userStatus ul,
-.wcf-message .wcf-messageSidebar .userContact ul {
-	list-style-type: none;
-}
-
-.wcf-message .wcf-messageSidebar .userStatus ul li,
-.wcf-message .wcf-messageSidebar .userContact ul li {
-	display: inline;
-}
-
-.wcf-message .wcf-messageSidebar .userStatus ul li a,
-.wcf-message .wcf-messageSidebar .userContact ul li a {
-	text-align: left;
-	text-decoration: none;
-	margin: 0 -3px;
-	padding: 1px 3px 0;
-	display: inline-block;
-	
-	.mxTransition1 (background-color, .2s);
-}
-
-.wcf-message .wcf-messageSidebar .userStatus ul li a:hover,
-.wcf-message .wcf-messageSidebar .userContacts ul li a:hover {
-	.mxBorderRadius (7px);
-	
-	background-color: #bcd;
-	
-	-webkit-box-shadow: 0 1px 7px #eee;
-	-moz-box-shadow: 0 1px 7px #eee;
-	-ms-box-shadow: 0 1px 7px #eee;
-	-o-box-shadow: 0 1px 7px #eee;
-	box-shadow: 0 1px 7px #eee;
-}
-
-.wcf-message .wcf-messageSidebar .userStatus ul li a span,
-.wcf-message .wcf-messageSidebar .userContact ul li a span {
-	display: block;
-	position: absolute;
-	left: -9000px;
-	top: -9000px;
-}
-@media screen and (min-width: 480px) {
-	
-	/* Message Sidebar Dividers only when sidebar not on top */
-	.wcf-message.dividers .wcf-userAvatar,
-	.wcf-message.dividers .userRank,
-	.wcf-message.dividers .userCredits,
-	.wcf-message.dividers .userStatus  {
-		border-bottom: @borderWidthSeparator @borderStyleSeparator @borderColor22;
-	}
-	
-	.wcf-message.dividers .wcf-messageSidebar div:last-child {
-		border: 0;
-	}
-	
-	.wcf-message .wcf-messageSidebar > div > header,
-	.wcf-message .wcf-messageSidebar > div > div {
-		vertical-align: top;
-	}
-	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	.wcf-message .wcf-messageSidebar {
-		display: table !important;
-		border-collapse: separate;
-		width: 100%;
-	}
-	
-	.wcf-message .wcf-messageSidebar > div {
-		display: table-row !important;
-	}
-	
-	.wcf-message .wcf-messageSidebar > div > header,
-	.wcf-message .wcf-messageSidebar > div > div {
-		padding: 10px !important;
-		display: table-cell !important;
-		vertical-align: top;
-		width: 25%;
-	}
-	
-	.wcf-message .wcf-messageSidebar header {
-		min-width: 25%;
-	}
-	
-	.wcf-message .wcf-messageSidebar header .wcf-username,
-	.wcf-message .wcf-messageSidebar header .wcf-username a {
-		font-size: 130%;
-		padding: 3px;
-	}
-	
-	.wcf-message .wcf-messageSidebar .wcf-userAvatar img {
-		height: auto;
-		width: 50%;
-		min-width: 50px;
+	 > div {
+		border-top: @wcfContainerBorderWidth dotted @wcfContainerBorderColor;
+		display: block;
+		overflow: hidden;
+		padding: 10px 0;
 	}
 	
-	.wcf-message .wcf-messageSidebar .userCredits {
-		font-size: 75%;
+	.signature {
+		overflow: hidden;
+		padding: 10px 0 20px;
 	}
-	
-}
-
-
-
-/* -- -- -- -- Thread Starter Badge -- -- -- -- -- */
-
-/* Globals */
-
-.wcf-message .wcf-messageSidebar .userStatus .wbb-threadStarter {
-	border: 1px solid #ccc;
-	background-color: @backColor1;
-	display: block !important;
-	position: absolute;
 }
 
-@media screen and (min-width: 480px) {
-	
-	.wcf-message.left .wcf-messageSidebar .userStatus .wbb-threadStarter {
-		top: -3px;
-		left: 15px;
-		width: 16px;
-		height: 15px;
-	}
-	
-	.wcf-message.right .wcf-messageSidebar .userStatus .wbb-threadStarter {
-		top: -3px;
-		right: 15px;
-		width: 16px;
-		height: 15px;
-	}
+.message .messageContent {
+	background-color: @wcfContainerBackgroundColor;
 	
-}
-
-@media screen and (max-width: 480px) {
+	.borderRadius();
 	
-	.wcf-message .wcf-messageSidebar .userStatus .wbb-threadStarter {
-		top: -3px;
-		left: 47%;
-		width: 16px;
-		height: 15px;
+	header {
+		padding: 20px 20px 5px;
+		position: relative;
+		
+		time {
+			color: @wcfDimmedColor;
+			font-size: 85%;
+			margin-top: @wcfGapSmall;
+		}
+		
+		.likesDisplay {
+			display: inline-block;
+			margin-left: @wcfGapMedium;
+			margin-top: 1px;
+			
+			.badge {
+				font-size: 76%;
+				margin-left: 0;
+				top: 0;
+			}
+		}
+		
+		.messageTitle {
+			color: @wcfColor;
+			font-size: 130%;
+			font-weight: bold;
+			padding: 13px 0 0;
+			
+			.textShadow(@wcfContainerBackgroundColor);
+		}
 	}
-	
-}
-
-/* Level 1 - Globals */
-
-.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer {
-	display: block !important;
-	position: absolute;
-	width: 0;
-	height: 0;
-	z-index: 100;
-}
-
-/* Level 2 - Globals */
-
-.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span {
-	display: block;
-	position: absolute;
-	width: 0;
-	height: 0;
-}
-
-.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span img {
-	position: absolute;
 }
 
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-	
-	/* Level 1 - Globals */
-	
-	.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer {
-		border-width: 9px;
-		top: 15px;
-	}
-	
-	/* Level 1 - Left-Right */
-	
-	.wcf-message.left .wcf-messageSidebar .wbb-threadStarter > .pointer {
-		border-style: none solid solid solid;
-		border-color: #ccc #ccc transparent #ccc;
-		left: -1px;
-	}
-	
-	.wcf-message.right .wcf-messageSidebar .wbb-threadStarter > .pointer {
-		border-style: none solid solid solid;
-		border-color: #ccc #ccc transparent #ccc;
-		left: -1px;
-	}
-	
-	/* Level 2 - Globals */
-	
-	.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span {
-		border-width: 8px;
-		top: -1px;
-	}
-	
-	/* Level 2 - Left-Right */
-	
-	.wcf-message.left .wcf-messageSidebar .wbb-threadStarter > .pointer > span {
-		border-style: none solid solid solid;
-		border-color: #fff #fff transparent #fff;
-		left: -8px;
-	}
+.message .messageSidebar {
+	font-size: 90%;
+	line-height: 1.3;
+	margin-bottom: -1px;
+	padding: 10px 20px 20px;
+	position: relative;
+	text-align: center;
+	width: 170px; /* Width toggle */
 	
-	.wcf-message.right .wcf-messageSidebar .wbb-threadStarter > .pointer > span {
-		border-style: none solid solid solid;
-		border-color: #fff #fff transparent #fff;
-		right: -8px;
+	&:after {
+		clear: both;
+		content: '';
+		display: block;
 	}
 	
-	.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span img {
-		top: -13px;
-		left: -8px;
+	header .username,
+	header .username a {
+		color: @wcfLinkColor;
+		font-size: 110%;
+		font-weight: bold;
+		padding: 1px 3px;
+		text-decoration: none;
+		
+		.textShadow(@wcfHighlightBackgroundColor);
 	}
 	
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-	
-	/* Level 1 - Globals */
-	
-	.wcf-message .wcf-messageSidebar .wbb-threadStarter  > .pointer {
-		border-width: 9px;
-		top: 15px;
+	header .username a img {
+		vertical-align: middle;
 	}
 	
-	/* Level 1 - Left-Right */
-	
-	.wcf-message .wcf-messageSidebar .wbb-threadStarter  > .pointer {
-		border-style: none solid solid solid;
-		border-color: #ccc #ccc transparent #ccc;
-		left: -1px;
+	a {
+		color: @wcfLinkColor;
+		
+		&:hover {
+			color: @wcfLinkHoverColor;
+		}
+	}
+	
+	.userTitle .badge {
+		background-color: @wcfLinkColor;
+		color: rgba(255, 255, 255, 1);
+		display: inline-block;
+		font-size: 95%;
+		margin-top: 3px;
+		padding: 0 10px;
+		
+		.borderRadius(13px);
+		.boxShadow(0, 1px, rgba(255, 255, 255, 1), 0);
 	}
 	
-	/* Level 2 - Globals */
-	
-	.wcf-message .wcf-messageSidebar .wbb-threadStarter  > .pointer > span {
-		border-width: 8px;
-		top: -1px;
+	.userRank {
+		color: rgba(255, 255, 255, 1);
+		display: block;
+		font-size: 95%;
+		margin: 3px 0 0;
+		padding: 0 0 7px;
 	}
 	
-	/* Level 2 - Left-Right */
-	
-	.wcf-message .wcf-messageSidebar .wbb-threadStarter  > .pointer > span {
-		border-style: none solid solid solid;
-		border-color: #fff #fff transparent #fff;
-		left: -8px;		
+	.userAvatar {
+		display: block;
+		margin: 7px 0 0;
+		padding: 0 0 7px;
+		
+		img {
+			border: 0;
+			padding: 0;
+		}
+	}
+	
+	.userCredits {
+		color: @wcfLinkColor;
+		display: block;
+		font-size: 95%;
+		margin: 7px 0 0;
+		padding: 0 0 7px;
+		
+		a,
+		p {
+			color: @wcfLinkColor;
+		}
 	}
 	
-	.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span img {
-		top: -15px;
-		left: -8px;
+	.userStatus,
+	.userContacts {
+		color: @wcfLinkColor;
+		display: block;
+		margin: @wcfGapSmall 0 0;
 	}
 	
-}
-
-
-
-/* -- -- -- -- Message Footer -- -- -- -- -- */
-
-/* Footer */
-
-.wcf-message .wcf-messageFooter {
-	font-size: 100%;
-	line-height: 1;
-	position: relative;
-}
-
-.wcf-message .wcf-messageFooter:after {
-	content: '';
-	display: block;
-	clear: both;
-}
-
-/* Message Footer Navi */
-
-.wcf-message .wcf-messageFooter nav {
-	/* General toggle switch for nav-bar orientation (options: left|center|right) */
-	text-align: right;
-	position: absolute;
-}
-
-@media screen and (min-width: 480px) {
+	.userStatus ul,
+	.userContact ul {
+		list-style-type: none;
 		
-	.wcf-message .wcf-messageSignature {
+		li {
+			display: inline;
+			
+			a {
+				display: inline-block;
+				margin: 0 -3px;
+				padding: 1px 3px 0;
+				text-align: left;
+				text-decoration: none;
+				
+				.transition(background-color, .2s);
+				
+				&:hover {
+					background-color: @wcfContainerBorderColor;
+					
+					.borderRadius(7px);
+					.boxShadow(0, 1px, #eee, 7px);
+				}
+				
+				span {
+					display: block;
+					left: -9000px;
+					position: absolute;
+					top: -9000px;
+				}
+			}
+		}
+	}
+}
+
+.message {
+	.messageSignature {
+		border-top: @wcfContainerBorderWidth dotted @wcfContainerBorderColor;
+		color: lighten(@wcfColor, 10%);
+		display: block;
 		margin: 10px 0 0;
 		padding: 10px 0;
 	}
-		
-	.wcf-message .wcf-messageFooter nav {
-		right: -20px;
-		bottom: -1px;
-		opacity: 0;
-		
-		.mxTransition1 (opacity, .2s);
-	}
 	
-	.wcf-message:hover .wcf-messageFooter nav {
-		opacity: 1;
-	}
-
-}
-
-@media screen and (max-width: 480px) {
-		
-	.wcf-message .wcf-messageSignature {
-		margin: 5px 0 0;
-		padding: 0;
-	}
-		
-	.wcf-message .wcf-messageFooter nav {
-		font-size: 125%;
-		right: -20px;
-		bottom: -1px;
-		opacity: 1;
-	}
+	.messageFooter {
+		font-size: 100%;
+		line-height: 1;
+		position: relative;
 		
-	.wcf-message .wcf-messageFooter nav .wcf-smallButtons > li {
-		margin-left: -7px;
-	}
+		/*
+		&:after {
+			clear: both;
+			content: "";
+			position: relative;
+		}
+		*/
 		
-	.wcf-message .wcf-messageFooter nav .wcf-smallButtons > li > a {
-		padding: 5px 8px;
-	}
+		nav {
+			bottom: -2px;
+			opacity: 0;
+			position: absolute;
+			right: -21px;
+			text-align: right;
+			
+			.transition(opacity, .1s);
+			
+			li {
+				display: inline-block;
+				margin-left: -5px;
+				
+				&:first-child a.button {
+					border-top-left-radius: 14px;
+				}
+				
+				&:last-child a.button {
+					border-bottom-right-radius: @wcfContainerBorderRadius;
+				}
+				
+				a.button {
+					margin: 0;
+					padding-right: @wcfGapSmall;
+					
+					.borderRadius(0);
+				}
+			}
+		}
+	}
+}
+
+li:nth-child(2n+1) .message {
+	&.messageSidebarOrientationLeft header > .pointer > span {
+		border-right-color: @wcfContainerAccentBackgroundColor;
+	}
+	
+	&.messageSidebarOrientationRight header > .pointer > span {
+		border-left-color: @wcfContainerAccentBackgroundColor;
+	}
+	
+	.messageContent {
+		background-color: @wcfContainerAccentBackgroundColor;
+	}
+}
+
+.messageReduced {
+	.messageCredits {
+		display: table-cell;
+		width: 25%;
 		
-	.wcf-message .wcf-messageFooter nav .wcf-smallButtons > li > a > img {
-		width: 24px;
-		height: 24px;
-	}
+		> .userAvatar {
+			float: left;
+		}
 		
-	.wcf-message .wcf-messageFooter nav .wcf-smallButtons > li > a > span {
-		position: absolute;
-		left: -9000px;
-		top: -9000px;
+		> div {
+			padding-left: 50px;
+			position: relative;
+		}
 	}
 	
-}
-
-/* ToDo: Reduced Messages */
-
-.wcf-messageReduced .messageCredits {
-	display: table-cell;
-	width: 25%;
-}
-
-.wcf-messageReduced .wcf-messageCredits > .wcf-userAvatar {
-	float: left;
-}
-
-.wcf-messageReduced .wcf-messageCredits > div {
-	padding-left: 50px;
-	position: relative;
-}
-
-.wcf-messageReduced .wcf-messageFooter > .wcf-breadcrumbs {
-	position: relative;
-	bottom: 10px;
-	left: 0;
-	opacity: 1;
-}
-
-
-
-/* ToDo: CK-Editor */
-
-.cke_skin_kama {
-	/* Removes the fat border around the editor, should better be moved into the wcf-stylesheet */
-	padding: 0 !important;
-}
-
-/* ToDo: Message Tabs */
-
-/* Smilies */
-
-.wcf-smiliesContent {
-	/* none */
-	text-align: center;
-}
-
-.wcf-smiliesContent li {
-	display: inline-block;
-	margin: 2px;
-	cursor: pointer;
-}
-
-
-
-
-/* -- -- -- -- -- EOF -- -- -- -- -- */
+	.messageFooter > .breadcrumbs {
+		bottom: 10px;
+		left: 0;
+		opacity: 1;
+		position: relative;
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/mixins.less b/wcfsetup/install/files/style/mixins.less
new file mode 100644
index 0000000000..a98c4abe40
--- /dev/null
+++ b/wcfsetup/install/files/style/mixins.less
@@ -0,0 +1,101 @@
+/* shortcuts */
+// clearing floats like a boss h5bp.com/q
+.clearfix {
+	// trigger 'hasLayout'
+	*zoom: 1;
+	
+	&:before,
+	&:after {
+		display: table;
+		content: "";
+	}
+	
+	&:after {
+		clear: both;
+	}
+}
+
+.square(@size) {
+	height: @size;
+	width: @size;
+}
+
+
+// sets default text shadows depending on background color
+.textShadow(@backgroundColor) when (lightness(@backgroundColor) >= 50%) {
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+}
+.textShadow(@backgroundColor) when (lightness(@backgroundColor) < 50%) {
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
+}
+
+/* CSS 3 */
+.linearGradient(@backgroundColor, @gradientColor1, @gradientColor2) {
+	background-color: @backgroundColor;
+	background-image: -webkit-linear-gradient(@gradientColor1, @gradientColor2);
+	background-image: -moz-linear-gradient(@gradientColor1, @gradientColor2);
+	background-image: -o-linear-gradient(@gradientColor1, @gradientColor2);
+	background-image: -ms-linear-gradient(@gradientColor1, @gradientColor2);
+	background-image: linear-gradient(@gradientColor1, @gradientColor2);
+}
+
+.linearGradient(@backgroundColor, @gradientColor1, @gradientColor2, @gradientColor3, @direction: top) {
+	background-color: @backgroundColor;
+	background-image: -webkit-linear-gradient(@direction, @gradientColor1, @gradientColor2, @gradientColor3);
+	background-image: -moz-linear-gradient(@direction, @gradientColor1, @gradientColor2, @gradientColor3);
+	background-image: -o-linear-gradient(@direction, @gradientColor1, @gradientColor2, @gradientColor3);
+	background-image: -ms-linear-gradient(@direction, @gradientColor1, @gradientColor2, @gradientColor3);
+	background-image: linear-gradient(@direction, @gradientColor1, @gradientColor2, @gradientColor3);
+}
+
+.linearGradientNative(@parameters) {
+	background-image: -webkit-linear-gradient(@parameters);
+	background-image: -moz-linear-gradient(@parameters);
+	background-image: -o-linear-gradient(@parameters);
+	background-image: -ms-linear-gradient(@parameters);
+	background-image: linear-gradient(@parameters);
+}
+
+.transition(@property, @duration, @type: linear) {
+	-webkit-transition: @arguments;
+	-moz-transition: @arguments;
+	-ms-transition: @arguments;
+	-o-transition: @arguments;
+	transition: @arguments;
+}
+
+.boxShadow(@topOffset, @leftOffset, @color, @blurriness: 5px, @shadowHeight: 0) {
+	-webkit-box-shadow: @topOffset @leftOffset @blurriness @shadowHeight @color;
+	-moz-box-shadow: @topOffset @leftOffset @blurriness @shadowHeight @color;
+	-ms-box-shadow: @topOffset @leftOffset @blurriness @shadowHeight @color;
+	-o-box-shadow: @topOffset @leftOffset @blurriness @shadowHeight @color;
+	box-shadow: @topOffset @leftOffset @blurriness @shadowHeight @color;
+}
+
+.boxShadowInset(@topOffset, @leftOffset, @color, @blurriness: 5px, @shadowHeight: 0) {
+	-webkit-box-shadow: inset @topOffset @leftOffset @blurriness @shadowHeight @color;
+	-moz-box-shadow: inset @topOffset @leftOffset @blurriness @shadowHeight @color;
+	-ms-box-shadow: inset @topOffset @leftOffset @blurriness @shadowHeight @color;
+	-o-box-shadow: inset @topOffset @leftOffset @blurriness @shadowHeight @color;
+	box-shadow: inset @topOffset @leftOffset @blurriness @shadowHeight @color;
+}
+
+.boxShadowNative(@parameters) {
+	-webkit-box-shadow: @parameters;
+	-moz-box-shadow: @parameters;
+	-ms-box-shadow: @parameters;
+	-o-box-shadow: @parameters;
+	box-shadow: @parameters;
+}
+
+.borderRadius(@borderRadius: @wcfContainerBorderRadius) {
+	.borderRadius(@borderRadius, @borderRadius, @borderRadius, @borderRadius);
+}
+
+.borderRadius(@borderTopRadius, @borderBottomRadius) {
+	.borderRadius(@borderTopRadius, @borderTopRadius, @borderBottomRadius, @borderBottomRadius);
+}
+
+.borderRadius(@borderTopLeftRadius, @borderTopRightRadius, @borderBottomRightRadius, @borderBottomLeftRadius) {
+	border-radius: @arguments;
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/navigation.less b/wcfsetup/install/files/style/navigation.less
new file mode 100644
index 0000000000..9755b41a0e
--- /dev/null
+++ b/wcfsetup/install/files/style/navigation.less
@@ -0,0 +1,256 @@
+.navigation {
+	background-color: @wcfNavigationBackgroundColor;
+	padding: 0 7px;
+	
+	a {
+		color: @wcfLinkColor;
+		
+		&:hover {
+			color: @wcfLinkHoverColor;
+		}
+	}
+	
+	ul {
+		display: inline-block;
+		
+		
+		&.navigationIcons {
+			float: right;
+			
+			li {
+				float: right;
+				padding: 0 3px;
+				
+				&.separator {
+					border-right: 1px dotted darken(@wcfNavigationBackgroundColor, 20%);
+				}
+				
+				> * {
+					padding: 3px;
+					display: inline-block;
+					color: @wcfLinkColor;
+				}
+				
+				a:hover {
+					background-color: @wcfHighlightBackgroundColor;
+				}
+			}
+		}
+		
+		&:not(.navigationIcons) {
+			
+			li {
+				display: inline-block;
+				margin-top: 5px;
+				
+				a {
+					padding: 2px 4px;
+					
+					.textShadow(@wcfNavigationBackgroundColor);
+					
+					&:hover {
+						text-decoration: none;
+					}
+				}
+			}
+		}
+	}
+}
+
+.navigationHeader {
+	border-bottom: @wcfContainerBorderWidth @wcfContainerBorderStyle darken(@wcfHighlightBackgroundColor, 8%);
+	border-radius: @wcfContainerBorderRadius @wcfContainerBorderRadius 0 0;
+}
+	
+.navigationFooter {
+	border-top: @wcfContainerBorderWidth @wcfContainerBorderStyle darken(@wcfHighlightBackgroundColor, 8%);
+	border-radius: 0 0 @wcfContainerBorderRadius @wcfContainerBorderRadius;
+}
+
+
+.mainMenu {
+	box-sizing: border-box;
+	display: block;
+	margin: 0 9px;
+	position: relative;
+	text-align: left;
+
+	&:after {
+		clear: both;
+		content: '';
+		display: block;
+	}
+	
+	> ul {
+		border-top-left-radius: 5px;
+		border-top-right-radius: 5px;
+		background-color: rgba(0, 0, 0, .4);
+		display: inline-block;
+		position: relative;
+		
+		> li {
+			display: inline-block;
+			font-size: 120%;
+			
+			&.active {
+				margin: -5px 0 0;
+				
+				&:first-child {
+					margin-right: -5px;
+				}
+				
+				&:last-child {
+					margin-left: -5px;
+				}
+				
+				&:only-child {
+					margin: -5px 0 0;
+				}
+				
+				a {
+					border-top-left-radius: 5px;
+					border-top-right-radius: 5px;
+					color: #369;
+					font-size: 110%;
+					font-weight: bold;
+					text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+					z-index: 10;
+					
+					.linearGradient(@wcfNavigationBackgroundColor, rgba(255, 255, 255, 1), @wcfNavigationBackgroundColor);
+					
+					&:after {
+						border-bottom-left-radius: 6px;
+						border-width: 0 0 1px 1px;
+						bottom: 0;
+						content: "";
+						height: 7px;
+						position: absolute;
+						right: -7px;
+						width: 7px;
+						
+						.boxShadow(-2px, 2px, lighten(@wcfHighlightBackgroundColor, 3%), 0);
+					}
+					
+					&:before {
+						border-bottom-right-radius: 6px;
+						border-width: 0 1px 1px 0;
+						bottom: 0;
+						content: "";
+						height: 7px;
+						left: -7px;
+						position: absolute;
+						width: 7px;
+						
+						.boxShadow(2px, 2px, lighten(@wcfHighlightBackgroundColor, 3%), 0);
+					}
+				}
+			}
+			
+			&:not(.active) {
+				margin-top: -3px;
+				
+				&:hover {
+					> a {
+						color: rgba(255, 255, 255, 1);
+					}
+				}
+			}
+			
+			> a {
+				color: #69c;
+				cursor: pointer;
+				display: inline-block;
+				font-weight: normal;
+				padding: 8px 20px;
+				position: relative;
+				text-decoration: none;
+				text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
+				white-space: nowrap;
+				
+				.transition(border, .3s, ease);
+				.transition(background-color, .3s, ease);
+				.transition(background-image, .3s, ease);
+				.transition(color, .3s, ease);
+			}
+		}
+	}
+}
+
+.contentNavigation {
+	display: table;
+	margin-top: @wcfGapMedium;
+	width: 100%;
+	nav ul {
+		float: left;
+		
+		&:not(.pageNavigation) {
+			float: right;
+			text-align: right;
+		}
+		
+		li {
+			display: inline;
+		}
+	}
+}
+
+.sidebarContent {
+	a:hover {
+		text-decoration: none;
+	}
+	
+	> div {
+		overflow: hidden;
+		position: relative;
+		
+		&.collapsibleMenus > h1 {
+			background-image: url(../icon/arrowRight.svg);
+			background-position: 15px center;
+			background-repeat: no-repeat;
+			background-size: 16px;
+			
+			&.active {
+				background-image: url(../icon/arrowDown.svg);
+			}
+		}
+		
+		&:not(.collapsibleMenus) > h1 {
+			padding-right: @wcfGapLarge;
+		}
+		
+		> h1 {
+			color: @wcfLinkColor;
+			cursor: pointer;
+			font-size: 130%;
+			font-weight: bold;
+			padding: @wcfGapSmall @wcfGapMedium @wcfGapSmall (@wcfGapLarge + 16px + @wcfGapTiny);	// icon size + gap
+			
+			.textShadow(@wcfHighlightBackgroundColor);
+		}
+		
+		ul > li {
+			font-size: 110%;
+			
+			&.active {
+				background-color: @wcfContentBackgroundColor;
+				margin-right: -1px;
+				overflow: hidden;
+				
+				.boxShadow(0, 0, rgba(0, 0, 0, .1));
+				
+				a {
+					font-weight: bold;
+				}
+			}
+			
+			> a,
+			> div {
+				color: @wcfLinkColor;
+				display: block;
+				padding: @wcfGapTiny @wcfGapMedium @wcfGapSmall (@wcfGapLarge + 16px + @wcfGapTiny);
+				
+				.textShadow(@wcfHighlightBackgroundColor);
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/pagination.less b/wcfsetup/install/files/style/pagination.less
new file mode 100644
index 0000000000..2c8b9bcc45
--- /dev/null
+++ b/wcfsetup/install/files/style/pagination.less
@@ -0,0 +1,96 @@
+/* ############## 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(.statusDisplay) > .pageNavigation {
+	float: left;
+	margin: 5px 0 3px;
+}
+
+.contentNavigation .pageNavigation ul li {
+	margin: 2px;
+}
+
+/* -- -- -- Buttons (Level 1 & 2) -- -- -- */
+
+.pageNavigation {
+	ul {
+		li {
+			border-radius: 3px;
+			float: left;
+			font-weight: bold;
+			margin: 1px;
+			min-width: 19px;
+			padding: 0;
+			text-align: center;
+			
+			&:not(.active):not(.disabled) {
+				cursor: pointer;
+			}
+			
+			&.disabled {
+				background-image: none !important;
+				border: 1px solid rgba(0, 0, 0, .1) !important;
+				cursor: not-allowed;
+			}
+			
+			&.skip {	
+				padding: 2px 0 1px;
+			}
+			
+			&:not(.disabled):hover a {
+				color: @wcfButtonHoverColor;
+			}
+			
+			&:not(.skip) a {
+				padding: 3px 1px;
+			}
+			
+			&.active, &.active:hover {
+				border: 1px solid darken(@wcfButtonColor, 5%);
+				color: lighten(@wcfButtonBackgroundColor, 5%);
+				padding: 3px 0;
+				
+				.linearGradient(@wcfButtonColor, darken(@wcfButtonColor, 10%), @wcfButtonColor 3px);
+				.textShadow(#000);
+			}
+			
+			img {
+				height: 16px;
+				margin: 0;
+				width: 16px;
+			}
+			
+			a {
+				color: @wcfButtonColor;
+				display: inline-block;
+				text-decoration: none;
+				
+				.textShadow(@wcfButtonBackgroundColor);
+			}
+		}
+	}
+}
+
+
+/* Special -> Status Display */
+
+.statusDisplay .pageNavigation {
+	font-size: 80%;
+	
+	ul {
+		li {
+			min-width: 13px;
+			
+			&:not(.skip) a {
+				padding: 1px;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/reset.less b/wcfsetup/install/files/style/reset.less
new file mode 100644
index 0000000000..2088a0094e
--- /dev/null
+++ b/wcfsetup/install/files/style/reset.less
@@ -0,0 +1,52 @@
+/**
+ * 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%;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	font-weight: normal;
+}
+
+/* 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;
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/tabs.less b/wcfsetup/install/files/style/tabs.less
new file mode 100644
index 0000000000..f6e29d37b1
--- /dev/null
+++ b/wcfsetup/install/files/style/tabs.less
@@ -0,0 +1,127 @@
+/* ############## Tab Menu ############## */
+
+/* Globals */
+
+.tabMenu {
+	display: block;
+	margin-top: @wcfGapMedium;
+	padding: 0 10px;
+	position: relative;
+	text-align: center;
+	
+	ul {
+		background-color: @wcfContainerAccentBackgroundColor;
+		border-color: @wcfContainerBorderColor;
+		border-style: solid;
+		border-width: 1px 1px 0 1px;
+		border-top-left-radius: @wcfContainerBorderRadius;
+		border-top-right-radius: @wcfContainerBorderRadius;
+		display: inline-block;
+		padding: 0 5px 3px 5px;
+		position: relative;
+		white-space: nowrap;
+		
+		.textShadow(@wcfContainerBackgroundColor);
+		
+		li {
+			display: inline-block;
+			white-space: nowrap;
+			
+			&.ui-state-active {
+				margin-right: -7px;
+				margin-left: -7px;
+				
+				a {
+					background-color: @wcfContainerBackgroundColor;
+					border-color: @wcfContainerBorderColor @wcfContainerBorderColor @wcfContainerBackgroundColor; //#ccc #ccc #fff;
+					border-style: solid;
+					border-top-right-radius: 6px;
+					border-top-left-radius: 6px;
+					border-width: 1px;
+					color: @wcfLinkColor;
+					font-weight: bold;
+					font-size: 130%;
+					margin-top: -10px;
+					padding: 10px 15px 5px;
+					z-index: 30;
+					
+					&:before {
+						border: 1px solid @wcfContainerBorderColor;
+						border-bottom-right-radius: 6px;
+						border-width: 0 1px 1px 0;
+						bottom: -1px;
+						content: " ";
+						height: 5px;
+						left: -6px;
+						position: absolute;
+						width: 5px;
+						
+						.boxShadow(2px, 1px, @wcfContainerBackgroundColor, 0);
+					}
+					
+					&:after {
+						border: 1px solid @wcfContainerBorderColor;
+						border-bottom-left-radius: 6px;
+						border-width: 0 0 1px 1px;
+						bottom: -1px;
+						content: " ";
+						height: 5px;
+						position: absolute;
+						right: -6px;
+						width: 5px;
+						
+						.boxShadow(-2px, 1px, @wcfContainerBackgroundColor, 0);
+					}
+				}
+			}
+			
+			a {
+				bottom: -3px;
+				color: @wcfDimmedColor;
+				display: inline-block;
+				font-size: 110%;
+				padding: 1px 10px 3px;
+				position: relative;
+				text-decoration: none;
+				z-index: 10;
+			}
+			
+			&:not(.ui-state-active) a:hover {
+				color: @wcfLinkColor;
+			}
+		}
+	}
+}
+
+.tabMenu li.ui-state-active a,
+.tabMenu li.ui-state-disabled a,
+.tabMenu li.ui-state-processing a {
+	cursor: default;
+}
+
+.tabMenuContent {
+	display: block;
+	margin-top: -1px;
+	position: relative;
+	z-index: 20; /* Prevents border overlay during transition */
+}
+
+/* randum stuff  */
+fieldset ~ .tabMenuContainer .tabMenu {
+	margin-top: 30px;
+}
+
+/* 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);
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/tabular.less b/wcfsetup/install/files/style/tabular.less
new file mode 100644
index 0000000000..6b2d403646
--- /dev/null
+++ b/wcfsetup/install/files/style/tabular.less
@@ -0,0 +1,186 @@
+.tabularBox {
+	background-image: url(../../images/header.png);
+	
+	background-color: saturate(lighten(@wcfPageBackgroundColor, 20%), 20%);
+	border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
+	
+	.borderRadius();
+}
+
+.tabularBoxTitle > hgroup {
+	color: @wcfPageLinkHoverColor;
+	padding: @wcfGapSmall;
+
+	h1 {
+		font-size: 120%;
+		font-weight: bold;
+		
+		.textShadow(saturate(lighten(@wcfPageBackgroundColor, 20%), 20%));
+
+		a {
+			color: @wcfPageLinkHoverColor;
+			
+			&:hover {
+				color: @wcfPageLinkHoverColor;
+				text-decoration: none;
+			}
+		}
+	}
+}
+
+.table {
+	border-spacing: 0;
+	width: 100% !important;
+	
+	/* cells */
+	th,
+	td {
+		padding: @wcfGapSmall;
+		text-align: left;
+		vertical-align: middle;
+	}
+	
+	/* headline */
+	th {
+		border-right: @wcfContainerBorderWidth @wcfContainerBorderStyle rgba(0, 0, 0, .2);
+		font-size: 85%;
+		font-weight: bold;
+		white-space: nowrap;
+		
+		.linearGradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
+		
+		a {
+			color: @wcfPageLinkColor;
+			display: block;
+			margin: -@wcfGapSmall;
+			
+			.textShadow(saturate(lighten(@wcfPageBackgroundColor, 20%), 20%));
+			
+			&:hover {
+				text-decoration: none;
+			}
+			
+			img {
+				margin: -5px 0;
+			}
+		}
+		
+		&:hover a,
+		&.active a {
+			background-color: rgba(0, 0, 0, .1);
+			color: @wcfPageLinkHoverColor;
+		}
+		
+		&.active a {
+			.boxShadowInset(0, 10px, rgba(0, 0, 0, .1), 10px, -10px);
+		}
+		
+		> * {
+			padding: 7px;
+		}
+	}
+	
+	/* content */
+	td {
+		background-color: @wcfContainerBackgroundColor;
+		
+		.transition(background, .1s);
+		
+		h1 {
+			font-size: 100%;
+		}
+		
+		&.columnMark,
+		&.columnStatus {
+			text-align: center;
+			width: 1% !important;
+			white-space: nowrap;
+		}
+		
+		&.columnDigits,
+		&.columnID {
+			text-align: right;
+			width: 1% !important;
+			white-space: nowrap;
+		}
+		
+		&.columnIcon {
+			text-align: left;
+			width: 1% !important;
+			white-space: nowrap;
+		}
+		
+		&.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;
+		}
+	}
+	
+	/* striped */
+	tbody {
+		background-color: @wcfContainerBackgroundColor;
+		
+		tr:nth-child(odd) td {
+			background-color: @wcfContainerAccentBackgroundColor;
+		}
+	}
+	
+	/* hover */
+	tbody {
+		tr {
+			&:not(:last-child) {
+				border-bottom: @wcfContainerBorderWidth @wcfContainerBorderStyle rgba(255, 255, 255, .3);
+			}
+			
+			&:hover {
+				td {
+					background-color: @wcfHighlightBackgroundColor;
+				}
+			}
+			
+			td:not(:last-child) {
+				border-right: @wcfContainerBorderWidth @wcfContainerBorderStyle rgba(255, 255, 255, .3);
+			}
+		}
+	}
+}
+
+.tabularBox .table {
+	tbody tr:last-child td {
+		&:first-child {
+			.borderRadius(0, 0, 0, 4px);
+		}
+		
+		&:last-child {
+			.borderRadius(0, 0, 4px, 0);
+		}
+	}
+}
+
+.statusDisplay {
+	padding: 1px 0;
+	float: right;
+	
+	.statusIcons li {
+		display: inline-block;
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/tooltip.less b/wcfsetup/install/files/style/tooltip.less
new file mode 100644
index 0000000000..a1812f8ea7
--- /dev/null
+++ b/wcfsetup/install/files/style/tooltip.less
@@ -0,0 +1,43 @@
+/* ############## Balloon Tooltips ############## */
+
+/* Globals */
+
+.jsTooltip { /* Do not change this style */
+	cursor: pointer;
+}
+
+.balloonTooltip {
+	font-size: .85em;
+	color: @wcfTooltipColor;
+	border: 1px solid @wcfTooltipBorderColor;
+	border-radius: @wcfContainerBorderRadius;
+	background-color: @wcfTooltipBackgroundColor;
+	padding: 5px 10px 7px;
+	position: absolute;
+	max-width: 300px;
+	z-index: 800;
+	
+	.boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
+	
+	.pointer {	
+		border-width: 0 7px 7px;
+		border-style: solid;
+		border-color: @wcfTooltipBorderColor transparent;
+		display: inline-block !important;
+		width: 0;
+		position: absolute;
+		top: -8px !important;
+		left: 50%;
+		
+		span {	
+			border-width: 0 5px 5px;
+			border-style: solid;
+			border-color: @wcfTooltipBackgroundColor transparent;
+			display: inline-block;
+			width: 0;
+			position: absolute;
+			top: 2px;
+			left: -5px;
+		}
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/user.less b/wcfsetup/install/files/style/user.less
old mode 100755
new mode 100644
index b8560e4449..e69de29bb2
--- a/wcfsetup/install/files/style/user.less
+++ b/wcfsetup/install/files/style/user.less
@@ -1,399 +0,0 @@
-/**
- * User Styles  
- *
- * @author		Harald Szekely 
- * @copyright	2011-2012 WoltLab GmbH 
- */
-
-/* ############## User ############## */
-
-/* User Avatar */
-
-.wcf-userAvatar  {
-	/* none */
-}
-
-/* User Avatar Boxed */
-
-.wcf-userAvatarFramed  {
-	/* none */
-}
-
-.wcf-userAvatarFramed img  {
-	border: 1px @borderStyle @borderColor11;
-	background-color: @backColor1;
-	padding: 1px;
-}
-
-/* User Name */
-
-.wcf-username  {
-	/* none */
-}
-
-
-
-/* ############## ToDo: Sidebar ############## */
-
-/* I've changed the layout, so the classes may not match any more! */
-
-.wcf-sidebar .wcf-userAvatar {
-	text-align: center;
-	padding: 5px 25px;
-}
-
-.wcf-sidebar .userFollowing ul,
-.wcf-sidebar .userFollowers ul {
-	margin: 0 25px;
-	white-space: normal;
-}
-
-.wcf-sidebar .userFollowing ul:after,
-.wcf-sidebar .userFollowers ul:after {
-	content: "";
-	height: 0;
-	display: block;
-	clear: both;
-}
-
-.wcf-sidebar .userFollowing li,
-.wcf-sidebar .userFollowers li {
-	float: left;
-	margin-right: 3px;
-}
-
-.wcf-sidebar .userFollowing .wcf-userAvatarFramed,
-.wcf-sidebar .userFollowers .wcf-userAvatarFramed {
-	display: inline-block;
-	padding: 3px 0 0;
-}
-
-.wcf-sidebar .userFollowing .wcf-badgeButton,
-.wcf-sidebar .userFollowers .wcf-badgeButton {
-	margin: 15px 15px 0;
-	float: right;
-}
-
-
-
-/* ############## User Notifications ############## */
-
-/* ToDo: 
-
-Be careful with the following classes! 
- - [.scrollableContainer] Don't touch!
- - [.scrollableItems] Keep the inflated width, you may lower its number but it must be incredible bloated
- - [.scrollableItems > div] Must be a fixed-width float, otherwise it would break the "scrollable"-class from jQueryTools. 
- 	Do NOT use css-tables or [display: inline-block] as it won't work with the whole magic
-
-*/
-
-/* ToDo: User Notification Container */
-
-.userNotificationContainer {
-	width: 240px;
-	z-index: 500; /* adjust to any value you like, it *MUST* be higher than 'header.pageHeader nav.topMenu' */
-	overflow: hidden;
-}
-
-/* ToDo: Scrollable Container (jQueryTools - do not modify the class-name!) */
-
-.scrollableContainer {
-	position: relative;
-	width: 250px;
-	overflow: hidden;
-}
-
-.scrollableContainer .scrollableItems {
-	position: relative;
-	width: 20000em;
-}
-
-.scrollableContainer .scrollableItems > div {
-	border-right: 1px solid rgba(192, 192, 192, 1);
-	float: left;
-	width: 250px;
-}
-
-.scrollableContainer {
-	font-size: 90%;
-}
-
-.scrollableContainer > div:first-child ul {
-	margin: 0;
-	padding: 0;
-}
-
-.scrollableContainer > div:first-child li {
-	border-top: 1px solid rgba(192, 192, 192, 1);
-	cursor: pointer;
-	padding: 7px;
-}
-
-.scrollableContainer > div:first-child li:first-child {
-	border-top-width: 0;
-}
-
-.scrollableContainer > div:first-child p {
-	padding: 0 1px;
-}
-
-/* ToDo: User Notification Details */
-
-.userNotificationDetails {
-	padding: 7px;
-	width: 236px;
-}
-
-.userNotificationDetails header {
-	margin-bottom: 7px;
-	display: table;
-	width: 100%;
-}
-
-.userNotificationDetails .row {
-	display: table-row;
-}
-
-.userNotificationDetails .row div {
-	text-align: center;
-	display: table-cell;
-	vertical-align: middle;
-}
-
-.userNotificationDetails .row div:first-child {
-	width: 64px;
-}
-
-.userNotificationDetails .row div:last-child {
-	padding-left: 7px;
-}
-
-.userNotificationDetails .avatar img {
-	height: 64px;
-	width: 64px;
-}
-
-.userNotificationDetails h1 {
-	font-size: 110%;
-}
-
-.userNotificationDetails section {
-	border-top: 1px solid rgba(192, 192, 192, 1);
-	padding-top: 7px;
-}
-
-.userNotificationDetails nav {
-	text-align: center;
-	border-top: 1px solid rgba(192, 192, 192, 1);
-	margin-top: 7px;
-	padding-top: 7px;
-}
-
-.userNotificationDetails ul {
-	list-style-type: none;
-	display: inline-block;
-}
-
-.userNotificationDetails li {
-	cursor: pointer;
-	border: 1px solid rgba(192, 192, 192, 1) !important;
-	padding: 3px;
-	display: inline-block;
-}
-
-/* User Notification Details Loading */
-
-#userNotificationDetailsLoading {
-	background-color: rgba(255, 255, 255, .5);
-	background-image: url('{../../icon/spinner1.svg');
-	background-position: center center;
-	background-size: 24px;
-	background-repeat: no-repeat;
-	position: absolute;
-}
-
-
-
-/* ############## Profile Comments ############## */
-
-/* Globals */
-
-.wcf-commentList .wcf-containerContent {
-	position: relative;
-}
-
-.wcf-commentList .wcf-containerContent small {
-	font-size: 85%;
-	color: @fontColor11;
-	margin-top: 3px;
-}
-
-/* Comment List */
-
-.wcf-commentList > .wcf-container {
-	padding: 7px;
-}
-
-/* Comment Add */
-
-.wcf-commentAdd .wcf-containerIcon {
-	margin-left: 2em;
-}
-
-.wcf-commentResponseAdd {
-	border-top: @borderWidthSeparator @borderStyleSeparator @borderColor12;
-	margin-top: 7px;
-	padding: 7px;
-}
-
-.wcf-commentResponseAdd .wcf-containerIcon {
-	margin-left: 10px;
-}
-
-/* Comment Response List */
-
-.wcf-commentResponseList {
-	margin-top: 7px;
-}
-
-.wcf-commentResponseAdd ~ .wcf-commentResponseList {
-	margin-top: 0;
-}
-
-/* Comment Options */
-
-.wcf-commentContent > div > .wcf-commentOptions,
-.wcf-commentResponseList > li .wcf-commentOptions {
-	display: block;
-	position: absolute;
-	top: 2px;
-	right: 2px;
-}
-
-.wcf-commentContent > div > .wcf-commentOptions > li,
-.wcf-commentResponseList > li .wcf-commentOptions > li {
-	float: left;
-	opacity: 0;
-	
-	.mxTransition1(opacity);
-}
-
-.wcf-commentContent > div:hover > .wcf-commentOptions > li,
-.wcf-commentResponseList > li:hover .wcf-commentOptions > li {
-	opacity: 1;
-}
-
-.wcf-commentContent > div > .wcf-commentOptions > li a,
-.wcf-commentResponseList > li .wcf-commentOptions li a {
-	cursor: pointer;
-	padding: 3px;
-	display: inline-block;
-}
-
-/* Toggle Comments Links */
-
-.wcf-commentResponsePrevious,
-.wcf-commentResponseRecent {
-	text-align: center;
-	border-top: @borderWidthSeparator @borderStyleSeparator @borderColor12;
-	margin-left: auto;
-	margin-right: auto;
-	padding-top: 7px;
-	width: 100%;
-}
-
-.wcf-commentResponsePrevious a,
-.wcf-commentResponseRecent a {
-	white-space: nowrap;
-	cursor: pointer;
-	border-radius: 3px;
-	padding: 0 13px;
-	display: inline-block;
-}
-
-
-
-/* ############## Members List ############## */
-
-/* Globals */
-
-.wcf-userList {
-	/* none */
-}
-
-.wcf-userList > li {
-	
-}
-
-.wcf-userList > li:not(:only-child) {
-	margin-left: -1px !important;
-}
-
-/* Long/Short */
-
-@media screen and (max-width: 1023px) {
-	
-	.wcf-userList > li {
-		padding: 0 !important;
-		width: 100%;
-	}
-	
-	.wcf-userList > li > div {
-		border-width: 0 !important;
-		height: auto !important;
-		box-shadow: none;
-	}
-	
-}
-
-@media screen and (min-width: 1024px) {
-	
-	.wcf-userList > li {
-		border-width: 0;
-		background-color: transparent;
-		float: left;
-		width: 50%;
-		min-width: 300px;
-	}
-	
-}
-
-@media screen and (min-width: 1600px) {
-	
-	.wcf-userList > li {
-		border-width: 0;
-		background-color: transparent;
-		float: left;
-		width: 33.3%;
-	}
-	
-}
-
-@media screen and (min-width: 2000px) {
-	
-	.wcf-userList > li {
-		border-width: 0;
-		background-color: transparent;
-		float: left;
-		width: 20%;
-	}
-	
-}
-
-.wcf-userList > li > .wcf-container {
-	border-width: @borderWidthSeparator;
-	border-style: @borderStyleSeparator;
-	border-color: @borderColor12;
-	height: 80px;
-	padding: 7px;
-}
-
-/* ToDo */
-.wcf-userList > li > .wcf-container .wcf-userJoinDate {
-	font-size: 85%;
-	color: @fontColor11;
-	display: block;
-}
-
-/* -- -- -- -- -- EOF -- -- -- -- -- */
diff --git a/wcfsetup/install/files/style/userPanel.less b/wcfsetup/install/files/style/userPanel.less
new file mode 100644
index 0000000000..2306e4e8d5
--- /dev/null
+++ b/wcfsetup/install/files/style/userPanel.less
@@ -0,0 +1,65 @@
+.userPanel {
+	background-color: rgba(0, 0, 0, .5);
+	border-bottom: 1px solid rgba(0, 0, 0, .1);
+	height: 30px;
+	left: 0;
+	padding: @wcfGapSmall 0;
+	position: fixed;
+	top: 0;
+	right: 0;
+	z-index: 200;
+	
+	.boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
+	.transition(background-color, .3s);
+	
+	&:hover {
+		background-color: rgba(0, 0, 0, .9);
+	}
+	
+	ul {
+		display: block;
+		float: left;
+		margin-top: -3px;
+		
+		&.userPanelItems > li:not(:first-child) {
+			margin-left: @wcfGapSmall;
+		}
+		
+		> li {
+			display: inline-block;
+			
+			> a,
+			> span,
+			> span > a {
+				color: lighten(@wcfPageLinkColor, 10%);
+				cursor: pointer;
+				display: block;
+				padding: 10px 0;
+				
+				.transition(color, .1s);
+				.textShadow(@wcfPageBackgroundColor);
+				
+				&:hover {
+					color: @wcfPageLinkHoverColor;
+					text-decoration: none;
+				}
+			}
+		}
+	}
+	
+	.searchBar {
+		float: right;
+		
+		input[type="search"] {
+			border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
+			border-radius: 30px;
+			padding: @wcfGapTiny @wcfGapSmall;
+		}
+	}
+	
+	.framed img {
+		padding: 0px;
+		margin-top: -3px;
+		margin-bottom: -3px;
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/variables.less b/wcfsetup/install/files/style/variables.less
new file mode 100644
index 0000000000..7a86ef5dba
--- /dev/null
+++ b/wcfsetup/install/files/style/variables.less
@@ -0,0 +1,89 @@
+/* backgrounds */
+@wcfPageBackgroundColor: rgba(41, 55, 74, 1);
+@wcfHighlightBackgroundColor: rgba(216, 231, 245, 1);
+@wcfHoverBackgroundColor: rgba(255, 229, 200, 1);
+@wcfContentBackgroundColor: rgba(255, 255, 255, 1);
+@wcfContainerBackgroundColor: rgba(252, 253, 254, 1);
+@wcfNavigationBackgroundColor: lighten(@wcfHighlightBackgroundColor, 3%);
+
+/* text colors */
+@wcfColor: rgba(102, 102, 102, 1);
+@wcfLinkColor: rgba(51, 102, 153, 1);
+@wcfLinkHoverColor: darken(@wcfLinkColor, 10%);
+@wcfPageColor: @wcfColor;
+@wcfPageLinkColor: lighten(@wcfLinkColor, 10%);
+@wcfPageLinkHoverColor: #fff;
+@wcfDimmedColor: lighten(@wcfColor, 15%);
+@wcfLabelColor: @wcfLinkColor;
+
+/* font */
+@wcfBaseFontSize: 13px;
+@wcfBaseFontFamily: "Trebuchet MS", Arial, sans-serif;
+@wcfBaseLineHeight: 15px;
+
+/* container */
+@wcfContainerAccentBackgroundColor: darken(@wcfContainerBackgroundColor, 3%);
+@wcfContainerBorderColor: rgba(187, 204, 221, 1); //#CCC;
+@wcfContainerBorderRadius: 5px;
+@wcfContainerBorderWidth: 1px;
+@wcfContainerBorderStyle: solid;
+
+/* dropdown */
+@wcfDropdownBackgroundColor: @wcfContentBackgroundColor;
+@wcfDropdownColor: @wcfColor;
+@wcfDropdownHoverBackgroundColor: @wcfHighlightBackgroundColor;
+
+/* gap */
+@wcfGapTiny: 4px;
+@wcfGapSmall: 7px;
+@wcfGapMedium: 14px;
+@wcfGapLarge: 21px;
+
+/* buttons */
+// default
+@wcfButtonBackgroundColor: lighten(#CCC, 15%);
+@wcfButtonBorderColor: #CCC;
+@wcfButtonColor: darken(#CCC, 20%);
+
+// hover
+@wcfButtonHoverBackgroundColor: lighten(@wcfHoverBackgroundColor, 5%);
+@wcfButtonHoverBorderColor: darken(@wcfHoverBackgroundColor, 10%);
+@wcfButtonHoverColor: darken(@wcfButtonColor, 10%);
+
+// primary
+@wcfButtonPrimaryBackgroundColor: lighten(@wcfHighlightBackgroundColor, 5%);
+@wcfButtonPrimaryBorderColor: darken(@wcfHighlightBackgroundColor, 10%);
+@wcfButtonPrimaryColor: darken(@wcfHighlightBackgroundColor, 30%);
+
+/* form elements */
+@wcfInputBackgroundColor: @wcfContentBackgroundColor;
+@wcfInputColor: @wcfColor;
+@wcfInputBorderColor: @wcfContainerBorderColor;
+@wcfInputHoverBackgroundColor: lighten(@wcfHoverBackgroundColor, 8%);
+@wcfInputHoverBorderColor: darken(@wcfHoverBackgroundColor, 25%);
+
+/* form states and alerts */
+@warningColor: #c09853;
+@warningBackgroundColor: #fcf8e3;
+@warningBorderColor: darken(spin(@warningBackgroundColor, -10), 3%);
+
+@errorColor: #b94a48;
+@errorBackgroundColor: #f2dede;
+@errorBorderColor: darken(spin(@errorBackgroundColor, -10), 3%);
+
+@successColor: #468847;
+@successBackgroundColor: #dff0d8;
+@successBorderColor: darken(spin(@successBackgroundColor, -10), 5%);
+
+@infoColor: #3a87ad;
+@infoBackgroundColor: #d9edf7;
+@infoBorderColor: darken(spin(@infoBackgroundColor, -10), 7%);
+
+/* layouts */
+@wcfLayoutFluidGap: 21px;
+@wcfLayoutFixedWidth: 1000px;
+
+/* tooltip */
+@wcfTooltipBackgroundColor: rgba(0, 0, 0, .8);
+@wcfTooltipBorderColor: transparent;
+@wcfTooltipColor: white;
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/wbb.less b/wcfsetup/install/files/style/wbb.less
new file mode 100644
index 0000000000..09930d2518
--- /dev/null
+++ b/wcfsetup/install/files/style/wbb.less
@@ -0,0 +1,270 @@
+.wbbStats {
+	margin-top: 2px;
+	
+	/* TODO: This should be mentioned in the documentation but not included in stylesheets */
+	//&.wbbStatsAside {
+		left: 50%;
+		position: absolute;
+		top: @wcfGapSmall;
+		width: 15%;
+		
+		dl {
+			display: block;
+			
+			dt {
+				float: right;
+				width: 40%;
+				padding-bottom: 4px;
+				
+				&:after {
+					content: "";
+				}
+			}
+			
+			dd {
+				float: left;
+				text-align: right;
+				width: 58%;
+				padding-bottom: 4px;
+			}
+		}
+	//}
+}
+
+.wbbLastPost {
+	left: 65%;
+	position: absolute;
+	top: @wcfGapSmall;
+	width: 35%; /* = 100% - left */
+	
+	> div {
+		background-color: @wcfContentBackgroundColor;
+		padding: 7px;
+		border: 1px solid @wcfContainerBorderColor;
+		border-radius: @wcfContainerBorderRadius;
+		margin-right: 7px;
+	}
+	
+	hgroup {
+		h1 a {
+			display: inline-block;
+			overflow: hidden;
+			padding-bottom: 2px; /* prevents letters from being cut */
+			text-overflow: ellipsis;
+			width: 98%;
+			white-space: nowrap;
+		}
+		
+		h2 {
+			font-size: 85%;
+			
+			time {
+				color: @wcfDimmedColor;
+			}
+		}
+	}
+}
+
+.wbbSubBoards {
+	margin-top: @wcfGapSmall;
+	
+	li {
+		display: inline-block;
+	}
+}
+
+.wbbBoardDescription {
+	font-size: 90%;
+	padding-top: @wcfGapTiny;
+}
+
+.wbbBoardContainer {
+	position: relative;
+}
+
+.wbbBoardNodeTop {
+	margin-top: @wcfGapMedium;
+}
+
+.wbbBoard {
+	min-height: 42px;
+	padding: @wcfGapSmall;
+	padding-right: 51%;
+	
+	.transition(background, .1s);
+	
+	&~ ul > .wbbBoardContainer > .wbbBoard {
+		padding-left: 43px;
+
+		&~ ul > .wbbBoardContainer > .wbbBoard {
+			padding-left: 79px;
+		}
+	}
+	
+	&:hover {
+		background-color: @wcfHighlightBackgroundColor;
+	}
+}
+
+.wbbBoardNode1 {
+	background-color: @wcfContainerAccentBackgroundColor;
+}
+
+.wbbBoardNode2 {
+	background-color: @wcfContentBackgroundColor;
+}
+
+.wbbBoardList > li.wbbBoardNodeTop:not(.wbbBoardNodeTopEmpty) > div {
+	.borderRadius(@wcfContainerBorderRadius, 0);
+}
+
+.wbbBoardList > li > ul > li:last-child div.wbbBoard:last-child {
+	.borderRadius(0, @wcfContainerBorderRadius);
+}
+
+.wbbBoardNodeTopEmpty div.wbbBoard {
+	.borderRadius(@wcfContainerBorderRadius);
+}
+
+.wbbThreadListLastPost h2 {
+	color: @wcfDimmedColor;
+	font-size: 85%;
+	margin-top: 2px;
+}
+
+.wbbBoardList .new > div > hgroup > h1 {
+	font-weight: bold;
+}
+
+.wbbBoard > div > hgroup > h1 {
+	font-size: 120%;
+}
+
+/* ############## Thread List ############## */
+
+/* Column Avatar */
+.wbbThreadList .columnAvatar div {
+	position: relative;
+	width: 40px;
+	height: 38px;
+}
+
+.wbbThreadList .columnAvatar div > p > img {
+	opacity: .5;
+	
+	.transition(opacity, .2s);
+}
+
+.wbbThreadList tr.new .columnAvatar div > p > img,
+.wbbThreadList tr:hover .columnAvatar div > p > img {
+	opacity: 1;
+} 
+
+.wbbThreadList .columnAvatar .myAvatar {
+	position: absolute;
+	width: 16px;
+	height: 16px;
+	bottom: -2px;
+	left: 24px;
+	opacity: 1;
+	
+	.boxShadow(0, 0, rgba(0, 0, 0, .3), 3px);
+} 
+
+
+.wbbThreadStarter {
+	position: relative;
+	
+	
+	> .message {
+		&:after,
+		&:before {
+			content: "";
+			display: block;
+			height: 128px;
+			left: 0;
+			position: absolute;
+			top: 0;
+			width: 128px;
+		}
+		
+		&:after {
+			background-image: url(../../icon/threadStarter1.svg);
+			background-position: 4px 4px;
+			background-repeat: no-repeat;
+			background-size: 16px;
+			height: 20px;
+			width: 20px;
+		}
+		
+		&:before {
+			background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, .85)), color-stop(.4, rgba(255, 255, 255, 0)));
+			
+			.borderRadius(@wcfContainerBorderRadius, 0, 0, 0);
+		}
+	}
+}
+
+.newMessageBadge {
+	
+	display: inline-block;
+	border: 1px solid @wcfLinkColor; //@wcfContainerBorderColor;
+	border-radius: 2px;
+	//border-bottom-left-radius: 0px;
+	padding: 6px 10px;
+	position: absolute;
+	left: -220px;
+	top: 30px;
+	font-weight: bold;
+	color: @wcfLinkColor;
+	text-transform: uppercase;
+	font-size: 85%;
+	//
+	.linearGradient(darken(@wcfHighlightBackgroundColor, 10%), @wcfHighlightBackgroundColor, darken(@wcfHighlightBackgroundColor, 10%));
+	.textShadow(darken(@wcfHighlightBackgroundColor, 10%));
+	.boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px);
+}
+
+.newMessageBadge:before {
+	content: "";
+	display: block;
+	
+	width: 0px;
+	height: 0px;
+	position: absolute;
+	bottom: -7px;
+	left: -8px;
+	
+	
+	border-width: 0px 7px 7px;
+	border-style: solid;
+	border-color: transparent @wcfLinkColor transparent transparent;
+	/*
+	border: 5px solid red;
+	border-width: 5px 0 0 5px;*/
+}
+
+
+/* rotated badge
+.newMessageBadge {
+	background-color: @wcfHoverBackgroundColor;
+	color: @wcfColor;
+	display: block;
+	font-size: 15px;
+	left: -260px;
+	padding: 6px 4px;
+	position: absolute;
+	text-align: center;
+	text-transform: uppercase;
+	top: 20px;
+	width: 150px;
+	
+	-webkit-backface-visibility: hidden;
+	-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
+	-webkit-transform: rotate(-45deg);
+	-o-transform: rotate(-45deg);
+}
+
+.wbbThreadPostList > li {
+	overflow: hidden;
+}*/
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/wcf.less b/wcfsetup/install/files/style/wcf.less
deleted file mode 100644
index 6746435f10..0000000000
--- a/wcfsetup/install/files/style/wcf.less
+++ /dev/null
@@ -1,5051 +0,0 @@
-/**
- * WCF Styles  
- *
- * @author		Harald Szekely 
- * @copyright	2011-2012 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;
-}
-
-
-
-/* ############## LESS Definitions ############## */
-
-/* -- -- -- LESS: Borders -- -- -- */
-
-/* Appearance */
-
-/* Border Widths (1px) */
-@borderWidth: 1px;
-@borderWidthSeparator: 1px;
-@borderWidthBadge: 1px;
-
-/* Border Styles (solid) */
-@borderStyle: solid;
-@borderStyleSeparator: dotted;
-@borderStyleBadge: solid;
-
-/* Border Colors */
-
-/* Border Color (Middle Grey) */
-@borderColor1: rgba(153, 153, 153, 1);
-@borderColor11: lighten(@borderColor1, 20%);
-@borderColor12: lighten(@borderColor11, 10%);
-
-/* Border Color (Middle Blue) */
-@borderColor2: rgba(51, 102, 153, 1);
-@borderColor21: lighten(@borderColor2, 20%);
-@borderColor22: lighten(@borderColor21, 20%);
-
-/* Rounded Corners */
-
-.mxBorderRadius (@radius: 5px) {
-	-webkit-border-radius: @radius;
-	-khtml-border-radius: @radius;
-	-moz-border-radius: @radius;
-	-ms-border-radius: @radius;
-	-o-border-radius: @radius;
-	border-radius: @radius;
-}
-
-.mxBorderRadiusTL (@radius: 5px) {
-	-webkit-border-top-left-radius: @radius;
-	-khtml-border-top-left-radius: @radius;
-	-moz-border-radius-topleft: @radius;
-	-ms-border-top-left-radius: @radius;
-	-o-border-top-left-radius: @radius;
-	border-top-left-radius: @radius;
-}
-
-.mxBorderRadiusTR (@radius: 5px) {
-	-webkit-border-top-right-radius: @radius;
-	-khtml-border-top-right-radius: @radius;
-	-moz-border-radius-topright: @radius;
-	-ms-border-top-right-radius: @radius;
-	-o-border-top-right-radius: @radius;
-	border-top-right-radius: @radius;
-}
-
-.mxBorderRadiusBR (@radius: 5px) {
-	-webkit-border-bottom-right-radius: @radius;
-	-khtml-border-bottom-right-radius: @radius;
-	-moz-border-radius-bottomright: @radius;
-	-ms-border-bottom-right-radius: @radius;
-	-o-border-bottom-right-radius: @radius;
-	border-bottom-right-radius: @radius;
-}
-
-.mxBorderRadiusBL (@radius: 5px) {
-	-webkit-border-bottom-left-radius: @radius;
-	-khtml-border-bottom-left-radius: @radius;
-	-moz-border-radius-bottomleft: @radius;
-	-ms-border-bottom-left-radius: @radius;
-	-o-border-bottom-left-radius: @radius;
-	border-bottom-left-radius: @radius;
-}
-
-
-
-/* -- -- -- LESS: Backgrounds -- -- -- */
-
-/* Back Images */
-
-/* Back Image (header.png) */
-@backImage: url('../images/header.png');
-
-/* Back Colors */
-
-/* Back Color 1 (White) */
-@backColor1: rgba(255, 255, 255, 1);
-@backColor10: darken(@backColor1, 1%);
-@backColor11: darken(@backColor1, 20%);
-
-/* Back Color 2 (Lite Blue) */
-@backColor2: rgba(214, 232, 246, 1);
-@backColor21: saturate(lighten(@backColor2, 3%), 10%);
-@backColor22: desaturate(darken(@backColor2, 15%), 20%);
-
-/* Back Color 3 (Middle Blue) */
-@backColor3: rgba(51, 102, 153, 1);
-
-/* Back Color 4 (Dark Blue) */
-@backColor4: rgba(41, 55, 74, 1);
-
-/* Back Color 5 (Black) */
-@backColor5: rgba(0, 0, 0, 1);
-@backColor51: lighten(@backColor5, 20%);
-@backColor52: lighten(@backColor51, 20%);
-
-
-
-/* Just a future experiment! Has no function yet.
-
-.mxBackColorSwitch (@xxx) when (lightness(@backColor1) >= 50%) {
-  color: black;
-}
-
-.mxBackColorSwitch (@xxx) when (lightness(@backColor1) < 50%) {
-  color: white;
-}
-
-*/
-
-
-
-/* -- -- -- LESS: Fonts -- -- -- */
-
-/* Font Colors */
-
-/* Font Color 1 (White) */
-@fontColor1: rgba(255, 255, 255, 1);
-@fontColor11: darken(@fontColor1, 20%);
-
-/* Font Color 2 (Lite Blue) */
-@fontColor2: rgba(214, 232, 246, 1);
-
-/* Font Color 3 (Middle Blue) */
-@fontColor3: rgba(51, 102, 153, 1);
-@fontColor31: lighten(@fontColor3, 20%);
-
-/* Font Color 4 (Dark Blue) */
-@fontColor4: rgba(41, 55, 74, 1);
-
-/* Font Color 5 (Black) */
-@fontColor5: rgba(0, 0, 0, 1);
-@fontColor51: lighten(@fontColor5, 20%);
-@fontColor52: lighten(@fontColor51, 20%);
-@fontColor53: lighten(@fontColor52, 20%);
-
-/* Text Shadows */
-@textShadowColor1: rgba(0, 0, 0, 1);
-@textShadowColor2: rgba(255, 255, 255, 1);
-
-
-
-/* -- -- -- LESS: Inputs -- -- -- */
-
-/* Colors */
-
-@backColorInput1: rgba(255, 255, 255, 1);
-@backColorInput2: rgba(255, 170, 34, 1);
-@backColorInput21: lighten(@backColorInput2, 40%);
-
-/* Borders */
-
-@borderWidthInput: 1px;
-@borderStyleInput: solid;
-
-/* Border Colors */
-
-/* Normal (Grey) */
-@borderColorInputTop1: darken(@backColorInput1, 40%);
-@borderColorInputSide1: lighten(@borderColorInputTop1, 15%);
-@borderColorInputBottom1: lighten(@borderColorInputSide1, 15%);
-
-/* Hover & Active (Orange) */
-@borderColorInputTop2: @backColorInput2; /* ToDo */
-@borderColorInputSide2: lighten(@borderColorInputTop2, 5%);
-@borderColorInputBottom2: lighten(@borderColorInputSide2, 5%);
-
-
-
-/* -- -- -- LESS: Buttons -- -- -- */
-
-/* Main Colors */
-
-/* Button Color 1 Normal (Grey) */
-@backColorButton1: rgba(245, 245, 245, 1);
-@backColorButton11: lighten(@backColorButton1, 20%);
-@backColorButton12: darken(@backColorButton1, 3%);
-
-/* Button Color 2 Hover (Orange) */
-@backColorButton2: rgba(255, 228, 198, 1);
-@backColorButton21: lighten(@backColorButton2, 20%);
-@backColorButton22: darken(@backColorButton2, 3%);
-
-/* Button Color3 Default (Blue) */
-@backColorButton3: rgba(231, 242, 253, 1);
-@backColorButton31: lighten(@backColorButton3, 20%);
-@backColorButton32: darken(@backColorButton3, 3%);
-
-
-/* Borders */
-
-@borderWidthButton: 1px;
-@borderStyleButton: solid;
-@borderStyleButton2: dotted;
-
-/* Border Colors */
-
-/* Button Color 1 Normal (Grey) */
-@borderColorButtonTop1: darken(@backColorButton1, 15);
-@borderColorButtonSide1: darken(@borderColorButtonTop1, 5%);
-@borderColorButtonBottom1: darken(@borderColorButtonSide1, 5%);
-
-/* Button Color 2 Hover (Orange) */
-@borderColorButtonTop2: darken(@backColorButton2, 15); /* ToDo */
-@borderColorButtonSide2: darken(@borderColorButtonTop2, 5%);
-@borderColorButtonBottom2: darken(@borderColorButtonSide2, 5%);
-
-/* Button Color 3 Default (Blue) */
-@borderColorButtonTop3: darken(@backColorButton3, 15);
-@borderColorButtonSide3: darken(@borderColorButtonTop3, 5%);
-@borderColorButtonBottom3: darken(@borderColorButtonSide3, 5%);
-
-/* Font Colors */
-
-/* Button Font Color 1 (Grey) */
-@fontColorButton1: desaturate(darken(@borderColorButtonBottom1, 10%), 30%);
-
-/* Button Font Color 2 (Orange = Hover) */
-@fontColorButton2: desaturate(darken(@borderColorButtonBottom2, 30%), 70%);
-
-/* Button Font Color 3 (Blue) */
-@fontColorButton3: desaturate(darken(@borderColorButtonBottom3, 10%), 30%);
-
-
-
-/* Transitions 1 */
-
-.mxTransition1 (@object: color, @time: 1ms, @type: linear) {
-	-webkit-transition: @arguments;
-	-khtml-transition: @arguments;
-	-moz-transition: @arguments;
-	-ms-transition: @arguments;
-	-o-transition: @arguments;
-	transition: @arguments;
-}
-
-/* Stripes 1 */
-
-.mxStripes1 {
-	background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px), @backImagePost;
-	background-image: -khtml-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px), @backImagePost;
-	background-image: -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px), @backImagePost;
-	background-image: -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px), @backImagePost;
-	background-image: -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px), @backImagePost;
-	background-image: repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px), @backImagePost;
-}
-
-
-
-
-
-
-
-/* ############## Globals ############## */
-
-* {
-	text-overflow: ellipsis;
-}
-
-img {
-	vertical-align: middle !important;
-}
-
-a {
-	color: @fontColor3;
-	text-decoration: none;
-	
-	.mxTransition1;
-}
-
-a:hover {
-	text-decoration: underline;
-	color: #036;
-}
-
-hr {
-	display: none;
-}
-
-::selection {
-	text-shadow: 0 1px 0 fade(@fontColor1, 50%) !important;
-	color: @fontColor51;
-	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;
-}
-
-
-
-/* -- -- -- 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);
-	-khtml-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);
-	-khtml-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);*/
-}
-
-/* Simple shadow for small boxes */
-.wcf-shadow3 {
-	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
-	-khtml-box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
-	-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
-	-ms-box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
-	-o-box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
-	box-shadow: 0 1px 5px 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;
-	.mxBorderRadius (30px);
-	background-color: @backColor1;
-	margin-right: -3px;
-	margin-left: 3px;
-	padding: 2px 5px;
-	display: inline-block;
-	position: relative;
-	top: -1px;
-}
-
-/* Badge Types */
-
-.wcf-badgeBorder { /* ToDo: Obsolete? */
-	border: @borderWidthBadge @borderStyleBadge #ccc;
-}
-
-.wcf-badgeBlue {
-	color: #68b;
-	border: @borderWidthBadge @borderStyleBadge #9be;
-	background-color: #def;
-}
-
-.wcf-badgeGreen {
-	color: #090;
-	border: @borderWidthBadge @borderStyleBadge #0c0;
-	background-color: #efe;
-}
-
-.wcf-badgeYellow {
-	color: #990;
-	border: @borderWidthBadge @borderStyleBadge #cc0;
-	background-color: #ffd;
-}
-
-.wcf-badgeRed {
-	color: #c00;
-	border: @borderWidthBadge @borderStyleBadge #f99;
-	background-color: #fee;
-}
-
-/* Buttons */
-
-.wcf-badgeButton {
-	cursor: pointer;
-	.mxBorderRadius (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;
-	.mxBorderRadius (30px);
-	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: @fontColor1;
-	background-color: rgba(51, 51, 51, 1);
-}
-
-.wcf-label a {
-	color: #eee;
-	text-decoration: none;
-}
-
-.wcf-label a:hover {
-	color: @fontColor1;
-}
-
-/* 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: @fontColor1;
-	border-width: @borderWidth;
-	border-style: @borderStyle;
-	border-color: rgba(255, 255, 255, .7);
-	.mxBorderRadius;
-	background-color: fade(@backColor5, 50%);
-	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);
-	-khtml-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);
-	
-	.mxTransition1 (color background, .1s, ease); /* This multiple shorthand format seems to be deprecated! */
-}
-
-.wcf-dropdown.open {
-	display: block;
-}
-
-/* Dropdown Items */
-
-.wcf-dropdown > li,
-.wcf-dropdown > div {
-	text-shadow: none;
-	color: #ccc;
-	cursor: pointer; 
-	
-	.mxTransition1 (color background, .2s); /* This multiple shorthand format seems to be deprecated! */
-}
-
-.wcf-dropdown > div {
-	padding: 5px 7px;
-}
-
-.wcf-dropdown > :first-child {
-	.mxBorderRadiusTL;
-	.mxBorderRadiusTR;
-}
-
-.wcf-dropdown > :last-child {
-	.mxBorderRadiusBR;
-	.mxBorderRadiusBL;
-}
-
-.wcf-dropdown > :hover:not(ul):not(.pointer),
-.wcf-dropdown > .active {
-	color: @fontColor1;
-	cursor: pointer;
-	background-color: fade(@backColor5, 50%);
-}
-
-.wcf-dropdown > li.divider:not(:first-child) {
-	border-top: @borderWidth @borderStyle 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: @fontColor1;
-	background-color: fade(@backColor5, 50%);
-}
-
-
-
-/* ############## Body ############## */
-
-/* Globals */
-
-body {
-	font-family: 'Trebuchet MS', Arial, sans-serif;
-	font-size: 80%;
-	color: @fontColor52;
-	line-height: 1;
-	background-color: @backColor4;
-}
-
-
-
-/* ############## Page Header & Page Footer ############## */
-
-/* Globals */
-
-header.wcf-pageHeader {
-	background-image: @backImage;
-	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 @textShadowColor1;
-}
-
-.wcf-pageFooter .wcf-copyright a:hover {
-	text-decoration: none;
-	color: @fontColor31;
-}
-
-
-
-/* -- -- -- Top Menu -- -- -- */
-
-/* Globals */
-
-nav.wcf-topMenu {
-	border-bottom: @borderWidth @borderStyle rgba(0, 0, 0, .1);
-	background-color: fade(@backColor5, 40%);
-	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);
-	-khtml-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);
-	
-	.mxTransition1 (background, .2s);
-	
-	-webkit-animation-name: showTopMenu;
-	-webkit-animation-duration: .3s;
-	-webkit-animation-timing-function: linear; 
-	
-	-khtml-animation-name: showTopMenu;
-	-khtml-animation-duration: .3s;
-	-khtml-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;
-	}
-}
-/* LESS doesn't like that! Wtf? 
-@-khtml-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: fade(@backColor5, 50%);
-}
-
-.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: @borderStyle;
-	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: @fontColor31;
-}
-
-.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: @fontColor1;
-	background-color: fade(@backColor5, 70%);
-}
-
-/* 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: @fontColor3 !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: fade(@backColor5, 70%);
-	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: @borderWidthInput @borderStyleInput rgba(0, 0, 0, .1);
-	.mxBorderRadius;
-	background-color: fade(@backColor5, 20%);
-	padding: 5px;
-	position: absolute;
-	top: 50px;
-	right: 0;
-	min-width: 240px;
-	
-	-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-	-khtml-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);
-	
-	.mxTransition1(background, .2s);
-}
-
-.wcf-search:hover {
-	background-color: fade(@backColor5, 50%);
-}
-
-.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 {
-	.mxBorderRadiusTL;
-	.mxBorderRadiusTR;
-	background-color: fade(@backColor5, 20%);
-	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 @textShadowColor1;
-	color: @fontColor31;
-	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;
-	
-	-khtml-transition-property: border, background-color, background-image, color;
-	-khtml-transition-duration: .3s;
-	-khtml-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: @fontColor1;
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem > a {
-	font-size: 110%;
-	font-weight: bold;
-	text-shadow: 0 1px 0 @textShadowColor2;
-	color: @fontColor3;
-	.mxBorderRadiusTL;
-	.mxBorderRadiusTR;
-	
-	background-color: @backColor21;
-	background-image: -webkit-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%);
-	background-image: -khtml-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%);
-	background-image: -moz-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%);
-	background-image: -ms-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%);
-	background-image: -o-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%);
-	background-image: linear-gradient(lighten(@backColor21, 20%), @backColor21 50%);
-	
-	z-index: 10;
-}
-
-/* Rounded Bottom Corners: Active Tab */
-
-.wcf-mainMenu > ul > li.activeMenuItem > a:before {
-	.mxBorderRadiusBR(6px);
-	border-width: 0 1px 1px 0;
-	position: absolute;
-	bottom: 0;
-	left: -7px;
-	width: 7px;
-	height: 7px;
-	content: "";
-	
-	-webkit-box-shadow: 2px 2px 0 @backColor21;
-	-khtml-box-shadow: 2px 2px 0 @backColor21;
-	-moz-box-shadow: 2px 2px 0 @backColor21;
-	-ms-box-shadow: 2px 2px 0 @backColor21;
-	-o-box-shadow: 2px 2px 0 @backColor21;
-	box-shadow: 2px 2px 0 @backColor21;
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem > a:after {
-	.mxBorderRadiusBL (6px);
-	border-width: 0 0 1px 1px;
-	position: absolute;
-	right: -7px;
-	bottom: 0;
-	width: 7px;
-	height: 7px;
-	content: "";
-	
-	-webkit-box-shadow: -2px 2px 0 @backColor21;
-	-khtml-box-shadow: -2px 2px 0 @backColor21;
-	-moz-box-shadow: -2px 2px 0 @backColor21;
-	-ms-box-shadow: -2px 2px 0 @backColor21;
-	-o-box-shadow: -2px 2px 0 @backColor21;
-	box-shadow: -2px 2px 0 @backColor21;
-}
-
-/* ToDo: Special */
-
-.wcf-mainMenu > ul > li .wcf-badge {
-	font-size: 60% !important;
-	color: @fontColor5;
-	background-color: @fontColor3; /* This shows the badge in the font-color */
-	margin: -10px 0;
-	
-	-webkit-box-shadow: 0 0 1px @backColor1;
-	-khtml-box-shadow: 0 0 1px @backColor1;
-	-moz-box-shadow: 0 0 1px @backColor1;
-	-ms-box-shadow: 0 0 1px @backColor1;
-	-o-box-shadow: 0 0 1px @backColor1;
-	box-shadow: 0 0 1px @backColor1;
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem .wcf-badge {
-	color: @fontColor1;
-	background-color: @fontColor3; /* This shows the badge in the font-color */
-	margin: -10px 0;
-	
-	-webkit-box-shadow: 0 0 1px @backColor1;
-	-khtml-box-shadow: 0 0 1px @backColor1;
-	-moz-box-shadow: 0 0 1px @backColor1;
-	-ms-box-shadow: 0 0 1px @backColor1;
-	-o-box-shadow: 0 0 1px @backColor1;
-	box-shadow: 0 0 1px @backColor1;
-}
-
-
-
-/* -- -- -- Header/Footer Navigation -- -- -- */
-
-/* Menu Bars */
-
-.wcf-headerNavigation,
-.wcf-footerNavigation {
-	background-color: @backColor21;
-	border-style: @borderStyle;
-	border-color: @borderColor22;
-	margin: 0 23px;
-	padding: 2px 0;
-	display: block;
-	min-height: 7px;
-	position: relative;
-	box-sizing: border-box;
-}
-
-.wcf-headerNavigation {
-	border-width: 0 0 @borderWidth 0;
-	.mxBorderRadiusTL (3px);
-	.mxBorderRadiusTR (3px);
-}
-
-.wcf-footerNavigation {
-	border-width: @borderWidth 0 0 0;
-	.mxBorderRadiusBR (3px);
-	.mxBorderRadiusBL (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: @borderWidthSeparator @borderStyleSeparator @borderColor22;
-}
-
-.wcf-headerNavigation > ul > li a,
-.wcf-headerNavigation > ul > li p,
-.wcf-footerNavigation > ul > li a,
-.wcf-footerNavigation > ul > li p {
-	text-decoration: none;
-	color: @fontColor3;
-	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;
-}
-
-.wcf-headerNavigation .wcf-menu > ul > li > a {
-	color: @fontColor31;
-	border-color: @backColor2;
-	background-color: @backColor21;
-}
-
-
-
-/* ############## Main ############## */
-
-.wcf-main {
-	background-color: @backColor2;
-	margin: 0 23px;
-	position: relative;
-	z-index: 90;
-	
-	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-	-khtml-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: @backColor1;
-	position: relative;
-	min-height: 100px;
-	z-index: 20;
-	box-sizing: border-box;
-	
-	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
-	-khtml-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);*/
-	
-	.mxTransition1 (margin, .1s, ease);
-}
-
-section.wcf-content:after {
-	content: '';
-	display: block;
-	clear: both;
-}
-
-.left section.wcf-content {
-	border-left: 1px @borderStyle rgba(187, 204, 221, 1);
-	margin-left: 249px;
-}
-
-.right section.wcf-content {
-	border-right: 1px @borderStyle 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;
-	}
-	
-}
-
-/* ToDo */
-.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;
-	
-	.mxTransition1 (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-color: @backColor1;
-	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 span {
-	background-color: @backColor1;
-	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:hover,
-.wcf-collapsibleSidebarButton:hover span {
-	background-color: @backColor10;
-	opacity: 1;
-}
-
-.wcf-collapsibleSidebarButton span:focus,
-.wcf-collapsibleSidebarButton span:active {
-	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-khtml-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 @borderStyleButton darken(@backColor1, 10%);
-	background-image: url('../icon/arrowLeft1.svg'), url('../icon/arrowLeft1.svg');
-	left: 250px;
-	
-	.mxTransition1 (left, .1s, ease)
-}
-
-.left .wcf-collapsibleSidebarButton span {
-	background-image: url('../icon/arrowLeft1.svg');
-}
-
-.right .wcf-collapsibleSidebarButton {
-	border-left: 1px @borderStyleButton darken(@backColor1, 10%);
-	background-image: url('../icon/arrowRight1.svg'), url('../icon/arrowRight1.svg');
-	right: 250px;
-	
-	.mxTransition1 (wight, .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 @textShadowColor2;
-	position: relative;
-	overflow: hidden;
-	z-index: 40;
-}
-
-.collapsed .wcf-sidebarContent > div {
-	width: 0;
-}
-
-.wcf-sidebarContent a:hover {
-	text-decoration: none !important;
-	color: @fontColor3;
-}
-
-.wcf-sidebarContent > div > h1 {
-	cursor: pointer;
-	font-weight: bold;
-	color: @fontColor3;
-	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 @textShadowColor2;
-	color: @fontColor31;
-	padding: 5px 15px 7px 35px;
-	display: block;
-}
-
-.wcf-sidebarContent > div ul > li.activeMenuItem {
-	background-color: @backColor1; /* ToDo */
-	margin-right: -1px;
-	overflow: hidden;
-	
-	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
-	-khtml-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: @fontColor3;
-}
-
-
-
-/* ############## 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 h1 {
-	font-weight: bold;
-	border-bottom: @borderWidth @borderStyle @borderColor1;
-	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 @textShadowColor2;
-	color: @fontColor52;
-}
-
-.wcf-mainHeading > hgroup h2 {
-	font-size: 100%;
-	font-weight: normal;
-	color: @fontColor53;
-	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: @fontColor52; /* This shows the badge in the font-color */
-	color: @fontColor1;
-}
-
-/* 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 @textShadowColor1;
-	color: @fontColor1;
-}
-
-
-
-/* -- -- -- Sub Heading -- -- -- */
-
-.wcf-subHeading h1 {
-	font-size: 150%;
-	font-weight: bold;
-	text-shadow: 0 1px 0 @textShadowColor2;
-	color: @fontColor53;
-	border-bottom: @borderWidthSeparator @borderStyleSeparator @borderColor11;
-	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: lighten(@fontColor53, 5%);
-}
-
-
-
-/* ############## Fieldsets ############## */
-
-fieldset {
-	border: @borderWidth @borderStyle @borderColor11;
-	.mxBorderRadius (7px);
-	background-color: @backColor10; /* we should remove that asap! */
-	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: @borderColor1;
-	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 probably problematic */
-	padding: 0;
-}
-
-
-
-/* ############## 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: @fontColor53;
-	margin: 3px 0 7px;
-	display: block;
-}
-
-input[type='checkbox'] ~ small,
-input[type='radio'] ~ small {
-	margin-top: 0;
-	margin-left: 21px;
-}
-
-dl > :not(dt) > label ~ small {
-	margin-left: 21px;
-}
-
-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;
-}
-
-
-
-/* -- -- -- 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: @borderWidthInput;
-	border-style: @borderStyleInput;
-	border-color: @borderColorInputTop1 @borderColorInputSide1 @borderColorInputBottom1;
-	.mxBorderRadius (3px);
-	background-color: @backColorInput1;
-	
-	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
-	-khtml-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);
-	
-	.mxTransition1 (background-color border, 2s); /* This multiple shorthand format seems to be deprecated! */
-}
-
-/* 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-style: @borderStyleInput;
-	border-color: @borderColorInputTop2 @borderColorInputSide2 @borderColorInputBottom2;
-	background-color: @backColorInput21;
-}
-
-/* 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-style: @borderStyleInput;
-	border-color: @borderColorInputTop2 @borderColorInputSide2 @borderColorInputBottom2;
-	background-color: @backColorInput21;
-	outline: none;
-	
-	-webkit-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
-	-khtml-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: @borderStyleInput;
-	border-color: fade(@borderColor1, 50%);
-	background-color: transparent;
-	
-	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
-	-khtml-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: @borderStyleInput;
-	border-color: fade(@backColorInput1, 50%);
-	background-color: fade(@backColor1, 50%);
-}
-
-
-
-/* -- -- -- 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] {
-	.mxBorderRadius (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: 100%;
-}
-
-@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: @borderWidthSeparator @borderStyleSeparator @borderColorButtonTop3; /* ToDo */
-}
-
-.wcf-smallButtons > li:first-child > a {
-	.mxBorderRadiusTL (13px);
-}
-
-.wcf-smallButtons > li:last-child > a {
-	.mxBorderRadiusBR (7px);
-}
-
-
-
-/* -- -- -- Small Button Bar -- -- -- */
-
-.wcf-smallButtonBar {
-	text-align: center !important;
-	border-top: @borderWidthButton @borderStyleButton @borderColorButtonTop1;
-	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: -khtml-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;
-}
-
-/* ToDo: Separators */
-.wcf-smallButtonBar li.separator > a {
-	border-right: @borderWidthSeparator @borderStyleSeparator @borderColorButtonTop3;
-}
-
-
-
-/* ############## 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;
-	.mxBorderRadius (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: @borderWidth @borderStyle @borderColor11;
-	.mxBorderRadius;
-	box-sizing: border-box;
-}
-
-.wcf-boxTitle {
-	.mxBorderRadius (7px);
-	background-color: @backColor3;
-	background-image: @backImage;
-	background-position: left top;
-	background-repeat: repeat-x;
-	display: table;
-	width: 100%;
-	box-sizing: border-box;
-}
-
-.wcf-boxPadding {
-	padding: 13px 23px 23px;
-}
-
-.wcf-boxDecor {
-	background-color: @backColor10;
-}
-
-/* Headings */
-
-.wcf-boxTitle > hgroup {
-	text-shadow: 0 -1px 0 @textShadowColor1;
-	color: @fontColor1;
-	padding: 7px;
-	display: inline-block;
-}
-
-.wcf-boxTitle > a,
-.wcf-boxTitle > hgroup a {
-	text-decoration: none;
-	color: @fontColor1;
-}
-
-.wcf-boxTitle > hgroup h1 {
-	font-size: 120%;
-	display: inline-block;
-}
-
-.wcf-boxTitle > hgroup h2 {
-	font-size: 85%;
-	color: @fontColor11;
-	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;
-}
-
-
-
-/* ############## List Box ############## */
-
-/* Globals */
-
-.wcf-listBox {
-	line-height: 1.5;
-	border-width: 1px 0;
-	border-style: @borderStyle;
-	border-color: @borderColor11;
-	background-color: @backColor10;
-	margin-top: -1px !important;
-	box-sizing: border-box;
-}
-
-.wcf-listBox .wcf-listBox {
-	border-style: @borderStyleSeparator;
-	border-color: @borderColor12;
-	background-color: transparent;
-}
-
-.wcf-listBox:first-child {
-	border-top-width: 0;
-}
-
-.wcf-listBox:last-child {
-	border-bottom-width: 0;
-}
-
-.wcf-listBox:nth-child(2n+1) {
-	/* auto-colorer for every 2nd row */
-	background-color: transparent;
-}
-
-.wcf-listBox:hover,
-.wcf-listBox .wcf-listBox:hover {
-	background-color: darken(@backColor10, 2%);
-}
-
-.wcf-listBox .wcf-listBox:first-child {
-	border-top-width: 1px;
-}
-
-/* List Box Contents */
-
-.wcf-listBox > .wcf-container {
-	margin-top: 0;
-	padding: 7px;
-}
-
-.wcf-listBox .wcf-username {
-	font-size: 120%;
-	display: inline;
-}
-
-.wcf-listBox time {
-	font-size: 85%;
-	color: rgba(153, 153, 153, 1);
-	display: inline;
-}
-
-.wcf-listBox .wcf-badge {
-	font-size: 85%;
-	margin-left: 0;
-	padding: 0 5px;
-	display: inline-block;
-}
-
-.wcf-listBox .wcf-likesDisplay {
-	display: inline;
-}
-
-
-
-/* ############## 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;
-}
-
-fieldset ~ .wcf-tabMenuContainer .wcf-tabMenu {
-	margin-top: 30px;
-}
-
-/* -- -- -- Tabs -- -- --  */
-
-/* Globals */
-
-.wcf-tabMenu ul {
-	text-shadow: 0 1px 0 @textShadowColor2;
-	white-space: nowrap;
-	border-width: 1px 1px 0 1px;
-	border-style: @borderStyle;
-	border-color: fade(@borderColor11, 50%);
-	.mxBorderRadiusTL (3px);
-	.mxBorderRadiusTR (3px);
-	background-color: fade(@backColor5, 5%);
-	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;
-	margin-top: -@borderWidth;
-}
-
-.wcf-tabMenu li a {
-	text-decoration: none;
-	color: @fontColor53;
-	cursor: pointer;
-	display: inline-block;
-	position: relative;
-	bottom: -(2px + @borderWidth);
-	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: @fontColor52;
-}
-
-.wcf-tabMenu li.ui-state-active a {
-	font-weight: bold;
-	color: @fontColor52 !important;
-	border-width: @borderWidth;
-	border-style: @borderStyle;
-	.mxBorderRadiusTL (6px);
-	.mxBorderRadiusTR (6px);
-	border-color: @borderColor11 @borderColor11 @backColor1;
-	background-color: @backColor1; /* ToDo: Less: make grey! */
-	padding: 10px 15px 5px;
-	margin-top: -10px;
-	z-index: 30;
-}
-
-/* Rounded Bottom Corners */
-
-.wcf-tabMenu li.ui-state-active a:before {
-	position: absolute;
-	bottom: -@borderWidth;
-	width: 5px;
-	height: 5px;
-	content: "";
-	border: @borderWidth @borderStyle @borderColor11;
-	left: -(5px + @borderWidth);
-	.mxBorderRadiusBR (6px);
-	border-width: 0 @borderWidth @borderWidth 0;
-	
-	-webkit-box-shadow: 2px 2px 0 @backColor1;
-	-khtml-box-shadow: 2px 2px 0 @backColor1;
-	-moz-box-shadow: 2px 2px 0 @backColor1;
-	-ms-box-shadow: 2px 2px 0 @backColor1;
-	-o-box-shadow: 2px 2px 0 @backColor1;
-	box-shadow: 2px 2px 0 @backColor1;
-}
-
-.wcf-tabMenu li.ui-state-active a:after {
-	position: absolute;
-	bottom: -@borderWidth;
-	width: 5px;
-	height: 5px;
-	content: "";
-	border: @borderWidth @borderStyle @borderColor11;
-	right: -(5px + @borderWidth);
-	.mxBorderRadiusBL (6px);
-	border-width: 0 0 @borderWidth @borderWidth;
-	
-	-webkit-box-shadow: -2px 2px 0 @backColor1;
-	-khtml-box-shadow: -2px 2px 0 @backColor1;
-	-moz-box-shadow: -2px 2px 0 @backColor1;
-	-ms-box-shadow: -2px 2px 0 @backColor1;
-	-o-box-shadow: -2px 2px 0 @backColor1;
-    box-shadow: -2px 2px 0 @backColor1;
-}
-
-@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: @backColor1; /* ToDo: Less: Grey! */
-	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: @fontColor53;
-}
-
-.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 @textShadowColor2;
-	text-decoration: none;
-	color: @fontColor53;
-	border: @borderWidthButton @borderStyle fade(@backColor5, 20%);
-	
-	.mxBorderRadius (13px);
-	
-	background-color: @backColor1;
-	padding: 2px 10px;
-	
-	.mxTransition1;
-}
-
-.wcf-menu ul li:not(.ui-state-active) a:hover {
-	color: @fontColor52;
-	border-width: @borderWidthButton;
-	border-style: @borderStyleButton;
-	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);
-	-khtml-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 @textShadowColor1;
-	color: @fontColor1;
-	cursor: default;
-	border: @borderWidthButton @borderStyleButton fade(@backColor5, 20%);
-	background-color: fade(@backColor5, 50%);
-}
-
-/* Special -> Menu within box-title  */
-
-.wcf-boxTitle > .wcf-menu {
-	color: @fontColor1;
-	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 @textShadowColor1;
-	color: #eee !important;
-	background-color: fade(@backColor5, 10%);
-}
-
-.wcf-boxTitle > .wcf-menu ul li a:hover {
-	color: @fontColor1 !important;
-	border: @borderWidthButton @borderStyleButton fade(@backColor5, 30%);
-	background-color: fade(@backColor5, 20%);
-}
-
-.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: @borderWidthButton @borderStyleButton fade(@backColor5, 50%);
-	
-	-webkit-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
-	-khtml-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: @backColor3 !important;
-}
-
-/* Special: Menu below tab-menu */
-
-.wcf-tabMenuContainer > .wcf-menu {
-	border-bottom: @borderWidthSeparator @borderStyle @borderColor11;
-	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: -khtml-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 @borderStyle rgba(204, 204, 204, 1);
-	.mxBorderRadius;
-	background-color: @backColor1;
-	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%;
-	
-	.mxTransition1 (max-width, .2s);
-}
-
-.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 @backColor1;
-	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 @textShadowColor2;
-	color: @fontColor53;
-	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: @fontColor52;
-	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") */
-	.mxBorderRadiusTL;
-}
-
-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") */
-	.mxBorderRadiusTR;
-}
-
-thead th {
-	text-shadow: 0 -1px 0 @textShadowColor1;
-	color: @fontColor31;
-	border-right: 1px @borderStyle rgba(0, 0, 0, .2);
-	
-	background-color: fade(@backColor5, 30%);
-	background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
-	background-image: -khtml-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;
-	
-	.mxTransition1 (background, .2s);
-}
-
-thead th a {
-	text-shadow: 0 -1px 0 @textShadowColor1;
-	text-decoration: none !important;
-	color: @fontColor31;
-	margin: -7px;
-	padding: 7px;
-	display: block;
-}
-
-thead th:last-child a {
-	border-right-width: 0;
-}
-
-thead th:hover a {
-	color: @fontColor1;
-	background-color: fade(@backColor5, 20%);
-}
-
-thead th a:active,
-thead th a:focus,
-thead th.active a {
-	color: @fontColor1;
-	background-color: fade(@backColor5, 10%);
-	
-	-webkit-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
-	-khtml-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: fade(@backColor5, 30%);
-}
-
-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 */
-	.mxBorderRadiusBL;
-}
-
-tbody tr:last-child td:last-child {
-	/* Rounded corners for the last table cell in the last row */
-	.mxBorderRadiusBR;
-}
-
-tbody td {
-	background-color: #fcfdfe;
-	border-right: 1px @borderStyle rgba(255, 255, 255, .3);
-	padding: 5px;
-	
-	.mxTransition1 (background);
-}
-
-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? */
-	.mxBorderRadiusTL (0) !important;
-}
-
-.wcf-menu ~ .wcf-box thead th:last-child { /* ToDo: Does this case really exist any more? */
-	.mxBorderRadiusTR (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 */
-	.mxBorderRadiusTL (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 */
-	.mxBorderRadiusTR (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;
-	.mxBorderRadius (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 @borderStyleButton 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 @textShadowColor2;
-	text-decoration: none;
-	color: @fontColor53;
-	display: inline-block;
-}
-
-.wcf-pageNavigation ul li:not(.disabled):hover a {
-	color: @fontColor52;
-}
-
-.wcf-pageNavigation ul li:not(.skip) a {
-	padding: 3px 1px;
-}
-
-.wcf-pageNavigation ul li:active a,
-.wcf-pageNavigation ul li:focus a {
-	color: @fontColor52;
-}
-
-.wcf-pageNavigation ul li.active,
-.wcf-pageNavigation ul li.active:hover {
-	text-shadow: 0 1px 0 @textShadowColor1 !important;
-	color: @fontColor1 !important;
-	border: 1px @borderStyleButton 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: -khtml-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;
-	.mxBorderRadius (3px);
-	background-color: fade(@backColor5, 70%);
-	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;
-	
-	.mxTransition1 (opacity, .2s);
-}
-
-.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 @textShadowColor2;
-	line-height: 1.5;
-	.mxBorderRadius (7px);
-	margin-top: 15px;
-	padding: 7px 15px 7px 50px;
-	box-sizing: border-box;
-}
-
-/* Types */
-
-.wcf-info {
-	color: #68b;
-	border: 1px @borderStyle #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'), -khtml-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 @borderStyle #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'), -khtml-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 @borderStyle #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'), -khtml-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 @borderStyle #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'), -khtml-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 @textShadowColor2;
-	line-height: 1.5;
-	color: #c00;
-	border: 1px @borderStyle #f99;
-	.mxBorderRadius (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);
-	-khtml-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: @borderWidth @borderStyle 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;
-	
-	.mxTransition1 (top, .5s);
-}
-
-.wcf-systemNotification.open {
-	top: 0;
-}
-
-
-
-/* ############## ToDo: WCF Dialog ############## */
-
-/* Globals */
-
-.wcf-dialogContainer {
-	border: 23px @borderStyle transparent;
-	.mxBorderRadius (15px);
-	background-color: fade(@backColor5, 40%);
-	margin-right: auto !important;
-	margin-left: auto !important;
-	position: fixed !important;
-	
-	-webkit-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
-	-khtml-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: @borderWidth @borderStyle #036;
-	.mxBorderRadiusTL (7px);
-	.mxBorderRadiusTR (7px);
-	background-color: @backColor3;
-	background-image: @backImage;
-	background-position: left top;
-	background-repeat: repeat-x;
-	padding: 10px 20px;
-	position: relative;
-	display: block;
-}
-
-.wcf-dialogTitle {
-	font-size: 170%;
-	font-weight: bold;
-	text-shadow: 0 -1px 0 @textShadowColor1;
-	color: @fontColor1;
-	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: @fontColor11;
-	background-color: @backColor51;
-	overflow: auto;
-}
-
-.wcf-dialogContent a {
-	color: @fontColor2;
-}
-
-.wcf-dialogContent a:hover {
-	color: @fontColor1;
-}
-
-.wcf-dialogContainer > .wcf-dialogContent {
-	.mxBorderRadius (7px);
-	padding: 0;
-	/*width: auto !important;*/
-}
-
-.wcf-dialogTitlebar ~ .wcf-dialogContent {
-	.mxBorderRadiusTL (0);
-	.mxBorderRadiusTR (0);
-	.mxBorderRadiusBL (7px);
-	.mxBorderRadiusBR (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 @borderStyle #ccc;
-	padding: 3px;
-}
-
-
-
-/* ############## ToDo: Overlay Spinner ############## */
-
-.wcf-dialogOverlay {
-	background-color: fade(@backColor5, 50%);
-	position: fixed;
-	width: 100% !important;
-	top: 0;
-	left: 0;
-}
-
-
-/* ToDo: What is that and change that class-name! */
-
-.wcf-overlayLoading {
-	background-color: @backColor1;
-	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: @fontColor1;
-	border: 1px @borderStyle rgba(255, 255, 255, .7);
-	.mxBorderRadius;
-	background-color: fade(@backColor5, 70%);
-	padding: 5px 10px 7px;
-	position: absolute;
-	max-width: 300px;
-	z-index: 800;
-	
-	-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-	-khtml-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;
-	.mxBorderRadius (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 @textShadowColor2;
-	color: @fontColorButton1;
-	border-width: @borderWidthButton;
-	border-style: @borderStyleButton;
-	border-color: @borderColorButtonTop1 @borderColorButtonSide1 @borderColorButtonBottom1;
-	
-	background-color: @backColorButton1;
-	background-image: -webkit-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12);
-	background-image: -khtml-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12);
-	background-image: -moz-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12);
-	background-image: -ms-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12);
-	background-image: -o-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12);
-	background-image: linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12);
-	
-	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
-	-khtml-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;
-	
-	-khtml-transition-property: border, box-shadow, background-color, background-image, color;
-	-khtml-transition-duration: .1s;
-	-khtml-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: @fontColorButton2;
-	border-style: @borderStyleButton;
-	border-color: @borderColorButtonTop2 @borderColorButtonSide2 @borderColorButtonBottom2;
-	
-	background-color: @backColorButton2;
-	background-image: -webkit-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
-	background-image: -khtml-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
-	background-image: -moz-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
-	background-image: -ms-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
-	background-image: -o-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
-	background-image: linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
-}
-
-/* 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: @fontColorButton2;
-	border-style: @borderStyleButton;
-	border-color: @borderColorButtonTop2 @borderColorButtonSide2 @borderColorButtonBottom2;
-	
-	background-color: @backColorButton2;
-	background-image: -webkit-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
-	background-image: -khtml-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
-	background-image: -moz-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
-	background-image: -ms-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
-	background-image: -o-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
-	background-image: linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
-	
-	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-khtml-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);
-	}
-}
-/* LESS doesn't like that! Wtf? 
-@-khtml-keyframes glowButtons {
-	0% {
-		-khtml-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
-	}
-	100% {
-		-khtml-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: @fontColorButton3;
-	border-width: @borderWidthButton;
-	border-style: @borderStyleButton;
-	border-color: @borderColorButtonTop3 @borderColorButtonSide3 @borderColorButtonBottom3;
-	
-	background-color: @backColorButton3;
-	background-image: -webkit-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32);
-	background-image: -khtml-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32);
-	background-image: -moz-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32);
-	background-image: -ms-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32);
-	background-image: -o-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32);
-	background-image: linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32);
-	
-	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
-	-khtml-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; 
-	
-	-khtml-animation-name: glowButtons;
-	-khtml-animation-duration: 1s;
-	-khtml-animation-iteration-count: infinite;
-	-khtml-animation-direction: alternate;
-	-khtml-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);
-	}
-}
-/* LESS doesn't like that! Wtf? 
-@-khtml-keyframes glowButtonsHover {
-	0% {
-		-khtml-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
-	}
-	100% {
-		-khtml-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;
-	-khtml-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; 
-	
-	-khtml-animation-name: glowButtonsHover;
-	-khtml-animation-duration: 1s;
-	-khtml-animation-iteration-count: infinite;
-	-khtml-animation-direction: alternate;
-	-khtml-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);
-	}
-}
-/* LESS doesn't like that! Wtf? 
-@-khtml-keyframes glowDefaultButtonsActive {
-	0% {
-		-khtml-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
-	}
-	100% {
-		-khtml-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; 
-	
-	-khtml-animation-name: glowDefaultButtonsActive;
-	-khtml-animation-duration: 1s;
-	-khtml-animation-iteration-count: infinite;
-	-khtml-animation-direction: alternate;
-	-khtml-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: lighten(@fontColorButton1, 20%);
-	cursor: default;
-	border-style: @borderStyleButton;
-	border-color: lighten(@borderColorButtonTop1, 10%) lighten(@borderColorButtonSide1, 10%) lighten(@borderColorButtonBottom1, 10%);
-	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;
-	
-	.mxTransition1 (background border color); /* This multiple shorthand format seems to be deprecated! */
-}
-
-.wcf-infoPackagePlugin a {
-	text-decoration: none;
-}
-
-.wcf-infoPackagePlugin > div > a {
-	color: @fontColor53;
-	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: @fontColor52;
-}
-
-.wcf-infoPackagePlugin > div > a > h1 { /* ToDo: h1 inside a ??? */
-	font-size: 100%;
-	font-weight: bold;
-	text-shadow: 0 1px 0 @textShadowColor2;
-	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 @borderStyle 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: -khtml-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;
-	.mxBorderRadius (7px);
-	padding: 40px 5px;
-	display: block;
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	width: 139px;
-	opacity: 0;
-	
-	.mxTransition1 (opacity);
-}
-
-.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;
-		
-		.mxTransition1 (opacity);
-	}
-	
-	.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 {
-	.mxBorderRadius;
-	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: @borderWidth @borderStyle #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 @borderStyle 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) ############## */
-
-
-
-
-/* ############## ToDo: Action Proxy Loading ############## */
-
-/* Spinner */
-
-.wcf-spinner {
-	text-align: center;
-	text-shadow: 0 -1px 0 @textShadowColor1;
-	color: @fontColor1;
-	border-width: @borderWidth;
-	border-style: @borderStyle;
-	border-color: rgba(0, 0, 0, .3);
-	.mxBorderRadius;
-	
-	background-color: fade(@backColor5, 50%) !important;
-	background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
-	background-image: -khtml-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);
-	-khtml-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 -- -- -- -- -- */
-- 
2.20.1