From: Marcel Werk <burntime@woltlab.com>
Date: Sat, 29 Sep 2012 18:14:31 +0000 (+0200)
Subject: Added basic style; CSS/LESS overhaul
X-Git-Tag: 2.0.0_Beta_1~895^2~5
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=ecbd8a0b8723c719c60a049bc88ff171816e181f;p=GitHub%2FWoltLab%2FWCF.git

Added basic style; CSS/LESS overhaul
---

diff --git a/com.woltlab.wcf/template/footer.tpl b/com.woltlab.wcf/template/footer.tpl
index 3a5811b066..f08940a680 100644
--- a/com.woltlab.wcf/template/footer.tpl
+++ b/com.woltlab.wcf/template/footer.tpl
@@ -1,14 +1,10 @@
 			{if $skipBreadcrumbs|empty}{include file='breadcrumbs' __microdata=false}{/if}
 			
 		</section>
-		<!-- /CONTENT -->
 	</div>
 </div>
-<!-- /MAIN -->
 
-<!-- FOOTER -->
 <footer id="pageFooter" class="layoutFluid footer">
-	<!-- footer navigation -->
 	<nav id="footerNavigation" class="navigation navigationFooter clearfix">
 		{include file='footerMenu'}
 		
@@ -19,7 +15,6 @@
 			{/if}
 		</ul>
 	</nav>
-	<!-- /footer navigation -->
 	
 	<div class="footerContent">
 		{if ENABLE_BENCHMARK}{include file='benchmark'}{/if}
@@ -27,5 +22,5 @@
 		{event name='copyright'}
 	</div>
 </footer>
-<!-- /FOOTER -->
+
 <a id="bottom"></a>
diff --git a/com.woltlab.wcf/template/header.tpl b/com.woltlab.wcf/template/header.tpl
index 5bec63f84a..2bf8862ba3 100644
--- a/com.woltlab.wcf/template/header.tpl
+++ b/com.woltlab.wcf/template/header.tpl
@@ -1,8 +1,7 @@
 <a id="top"></a>
-<!-- HEADER -->
+
 <header id="pageHeader" class="layoutFluid">
 	<div>
-		<!-- top menu -->
 		<nav id="topMenu" class="userPanel">
 			<div class="layoutFluid clearfix">
 				{hascontent}
@@ -11,31 +10,20 @@
 					</ul>
 				{/hascontent}
 				
-				<!-- search area -->
 				{event name='searchArea'}
-				<!-- /search area -->
 			</div>
 		</nav>
-		<!-- /top menu -->
 		
-		<!-- logo -->
 		<div id="logo" class="logo">
-			<!-- clickable area -->
 			<a href="{link controller='Index'}{/link}">
-				<img src="{@$__wcf->getPath('wbb')}images/wbbLogo2.svg" alt="" style="height: 80px; width: 300px;" />
+				<img src="{@$__wcf->getPath('wbb')}images/wbbLogo2.svg" alt="" style="height: 90px; width: 246px;" />
 				{*event name='headerLogo'*}
 			</a>
-			<!-- /clickable area -->
 		</div>
-		<!-- /logo -->
 		
-		<!-- main menu -->
 		{include file='mainMenu'}
-		<!-- /main menu -->
 		
-		<!-- header navigation -->
 		<nav class="navigation navigationHeader clearfix">
-			<!-- sub menu -->
 			{include file='mainMenuSubMenu'}
 			
 			<ul class="navigationIcons">
@@ -45,12 +33,9 @@
 				{event name='headerNavigation'}
 			</ul>
 		</nav>
-		<!-- /header navigation -->
 	</div>
 </header>
-<!-- /HEADER -->
 
-<!-- MAIN -->
 <div id="main" class="layoutFluid{if $sidebarOrientation|isset && $sidebar|isset} sidebarOrientation{@$sidebarOrientation|ucfirst} clearfix{/if}">
 	<div>
 		{if $sidebar|isset}
@@ -59,7 +44,6 @@
 			</aside>
 		{/if}
 				
-		<!-- CONTENT -->
 		<section id="content" class="content clearfix">
 			
 			{if $skipBreadcrumbs|empty}{include file='breadcrumbs'}{/if}
diff --git a/wcfsetup/install/files/acp/js/WCF.ACP.js b/wcfsetup/install/files/acp/js/WCF.ACP.js
index be267ab325..64c877c4e8 100644
--- a/wcfsetup/install/files/acp/js/WCF.ACP.js
+++ b/wcfsetup/install/files/acp/js/WCF.ACP.js
@@ -25,7 +25,7 @@ WCF.ACP.Menu.prototype = {
 	 */
 	init: function(activeMenuItems) {
 		this._headerNavigation = $('nav#mainMenu');
-		this._sidebarNavigation = $('nav#sidebarContent');
+		this._sidebarNavigation = $('aside.collapsibleMenu');
 		
 		this._prepareElements(activeMenuItems);
 	},
@@ -36,12 +36,12 @@ WCF.ACP.Menu.prototype = {
 	_prepareElements: function(activeMenuItems) {
 		this._headerNavigation.find('li').removeClass('active');
 		
-		this._sidebarNavigation.find('div h1').each($.proxy(function(index, menuHeader) {
+		this._sidebarNavigation.find('legend').each($.proxy(function(index, menuHeader) {
 			$(menuHeader).click($.proxy(this._toggleItem, this));
 		}, this));
 		
 		// close all navigation groups
-		this._sidebarNavigation.find('div div').each(function() {
+		this._sidebarNavigation.find('nav ul').each(function() {
 			$(this).hide();
 		});
 		
@@ -61,7 +61,8 @@ WCF.ACP.Menu.prototype = {
 	_toggleItem: function(event) {
 		var $menuItem = $(event.target);
 		
-		$menuItem.next().stop(true, true).toggle('blind', { }, 200).end().toggleClass('active');
+		$menuItem.parent().find('nav ul').stop(true, true).toggle('blind', { }, 200).end();
+		$menuItem.toggleClass('active');
 	},
 	
 	/**
@@ -91,7 +92,7 @@ WCF.ACP.Menu.prototype = {
 	_renderSidebar: function(menuItem, activeMenuItems) {
 		// reset visible and active items
 		this._headerNavigation.find('li').removeClass('active');
-		this._sidebarNavigation.find('div.menuGroup').hide();
+		this._sidebarNavigation.find('> div').hide();
 		
 		if (activeMenuItems.length === 0) {
 			// show active menu
@@ -112,7 +113,7 @@ WCF.ACP.Menu.prototype = {
 					var $menuItem = $('#' + $.wcfEscapeID($item));
 					
 					if ($menuItem.getTagName() === 'ul') {
-						$menuItem.parent('div').show().prev().addClass('active');
+						$menuItem.show().parents('fieldset').children('legend').addClass('active');
 					}
 					else {
 						$menuItem.addClass('active');
diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 9fe7b8e231..2e4d27a757 100644
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -19,7 +19,7 @@
 	<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()}js/WCF.js"></script>
-	<script type="text/javascript" src="{@$__wcf->getPath()}acp/js/WCF.ACP.js"></script>
+	<script type="text/javascript" src="{@$__wcf->getPath()}acp/js/WCF.ACP.js?t={@TIME_NOW}"></script>
 	<script type="text/javascript">
 		//<![CDATA[
 		WCF.User.init({$__wcf->user->userID}, '{@$__wcf->user->username|encodeJS}');
@@ -110,7 +110,7 @@
 					<div class="layoutFluid clearfix">
 						<ul class="userPanelItems">
 							<li id="userMenu" class="dropdown">
-								<a class="dropdownToggle" data-toggle="userMenu">{event name='userAvatar'} {lang}wcf.user.userNote{/lang}</a>
+								<a class="dropdownToggle framed" data-toggle="userMenu">{event name='userAvatar'} {lang}wcf.user.userNote{/lang}</a>
 								<ul class="dropdownMenu">
 									<li><a href="../">FRONTEND</a></li>
 									<li class="dropdownDivider"></li>
@@ -175,43 +175,36 @@
 	<div id="main" class="layoutFluid{if PACKAGE_ID && $__wcf->getACPMenu()->getMenuItems('')|count} sidebarOrientationLeft{/if}">
 		<div>
 			{hascontent}
-				<!-- SIDEBAR -->
-				<aside class="sidebar">
-					<!-- sidebar menu -->
-					<nav id="sidebarContent" class="sidebarContent">
-						<ul>
-							<li>
-							{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="menuGroup collapsibleMenus" data-parent-menu-item="{$parentMenuItem->menuItem}">
-											{foreach from=$__wcf->getACPMenu()->getMenuItems($parentMenuItem->menuItem) item=menuItem}
-												<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}
-																{foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}
-																	<li id="{$subMenuItem->menuItem}" data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getLink()}">{lang}{$subMenuItem->menuItem}{/lang}</a></li>
-																{/foreach}
-															{else}
-																<li id="{$menuItemCategory->menuItem}" data-menu-item="{$menuItemCategory->menuItem}"><a href="{$menuItemCategory->getLink()}">{lang}{$menuItemCategory->menuItem}{/lang}</a></li>
-															{/if}
-														{/foreach}
-													</ul>
-												</div>
-											{/foreach}
-										</div>
+				<aside class="sidebar collapsibleMenu">
+					{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="menuGroup collapsibleMenus" data-parent-menu-item="{$parentMenuItem->menuItem}">
+									{foreach from=$__wcf->getACPMenu()->getMenuItems($parentMenuItem->menuItem) item=menuItem}
+										<fieldset>
+											<legend class="menuHeader" data-menu-item="{$menuItem->menuItem}">{lang}{@$menuItem->menuItem}{/lang}</legend>
+											
+											<nav class="menuGroupItems">
+												<ul id="{$menuItem->menuItem}">
+													{foreach from=$__wcf->getACPMenu()->getMenuItems($menuItem->menuItem) item=menuItemCategory}
+														{if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
+															{foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}
+																<li id="{$subMenuItem->menuItem}" data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getLink()}">{lang}{$subMenuItem->menuItem}{/lang}</a></li>
+															{/foreach}
+														{else}
+															<li id="{$menuItemCategory->menuItem}" data-menu-item="{$menuItemCategory->menuItem}"><a href="{$menuItemCategory->getLink()}">{lang}{$menuItemCategory->menuItem}{/lang}</a></li>
+														{/if}
+													{/foreach}
+												</ul>
+											</nav>
+										</fieldset>
 									{/foreach}
-								{/if}
-							{/content}
-							</li>
-						</ul>
-					</nav>
-					<!-- /sidebar menu -->
+								</div>
+							{/foreach}
+						{/if}
+					{/content}
 				</aside>
-				<!-- /SIDEBAR -->
 			{/hascontent}
 			
 			<!-- CONTENT -->
diff --git a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
index 04f2ee3d3e..81b1132f74 100644
--- a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
+++ b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
@@ -127,7 +127,7 @@ class StyleCompiler extends SingletonFactory {
 		$this->compiler->setVariables($variables);
 		
 		// add mixins
-		$content .= $this->prepareFile(WCF_DIR.'style/bootstrap/mixins.less');
+		$content .= $this->prepareFile(WCF_DIR.'style/bootstrap/mixin.less');
 		
 		return $content;
 	}
diff --git a/wcfsetup/install/files/style/acl.less b/wcfsetup/install/files/style/acl.less
deleted file mode 100644
index c66862811f..0000000000
--- a/wcfsetup/install/files/style/acl.less
+++ /dev/null
@@ -1,79 +0,0 @@
-.aclContainer > dd > span {
-	position: relative;
-}
-
-.aclList,
-.aclPermissionList {
-	margin-top: 0;
-	min-height: 100px;
-
-	> li {
-		display: block;
-		padding: @wcfGapTiny;
-
-		&:first-child {
-			border-top-left-radius: @wcfContainerBorderRadius;
-			border-top-right-radius: @wcfContainerBorderRadius;
-		}
-		
-		&:last-child:not(:first-child) {
-			border-bottom-left-radius: @wcfContainerBorderRadius;
-			border-bottom-right-radius: @wcfContainerBorderRadius;
-		}
-	}
-}
-
-.aclList {
-	margin-bottom: @wcfGapSmall;
-	
-	> li {
-		cursor: pointer;
-
-		&:hover,
-		&.active:hover {
-			background-color: @wcfButtonHoverBackgroundColor;
-		}
-		
-		&.active {
-			background-color: @wcfContainerAccentBackgroundColor;
-		}
-		
-		> img:last-child {
-			float: right;
-			margin-right: @wcfGapSmall;
-		}
-	}
-}
-
-.aclPermissionList {
-	margin-top: @wcfGapSmall;
-	min-height: 200px;
-	text-align: right;
-
-	> li {
-		&:hover {
-			background-color: @wcfButtonHoverBackgroundColor;
-		}
-		
-		&.aclCategory {
-			background-color: @wcfContainerHoverBackgroundColor;
-			padding: @wcfGapSmall;
-			text-align: left;
-		}
-		
-		&.aclFullAccess {
-			background-color: @wcfContainerAccentBackgroundColor;
-		}
-		
-		> span {
-			float: left;
-			padding-left: @wcfGapSmall;
-		}
-		
-		> label {
-			cursor: pointer;
-			margin: 0 @wcfGapSmall;
-			padding: 0 @wcfGapLarge;
-		}
-	}
-}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/alert.less b/wcfsetup/install/files/style/alert.less
new file mode 100644
index 0000000000..bc3feea39a
--- /dev/null
+++ b/wcfsetup/install/files/style/alert.less
@@ -0,0 +1,134 @@
+/* todo: ############## System Notifications (Inline) ############## */
+
+/* default values */
+.info,
+.error,
+.success,
+.warning {
+	font-weight: bold;
+	line-height: 1.5;
+	margin-top: @wcfGapMedium;
+	padding: @wcfGapSmall @wcfGapMedium @wcfGapSmall 50px;
+	position: relative;
+	
+	.borderRadius();
+	.boxShadowNative(~"0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2)");
+	
+	&:after {
+		background-repeat: no-repeat, repeat;
+		background-size: 24px, auto;
+		content: "";
+		display: block;
+		height: 24px;
+		left: 13px;
+		position: absolute;
+		top: 5px;
+		width: 24px;
+	}
+	
+	> a {
+		text-decoration: underline;
+	}
+}
+
+/* types */
+.info {
+	color: @wcfInfoColor;
+	
+	.linearGradient(@wcfInfoBackgroundColor2, @wcfInfoBackgroundColor, @wcfInfoBackgroundColor2);
+	.textShadow(@wcfInfoBackgroundColor2);
+	
+	&:after {
+		background-image: url('../icon/infoInverse.svg');
+	}
+	
+	> a {
+		color: @wcfInfoColor;
+	}
+}
+
+.success {
+	color: @wcfSuccessColor;
+	
+	.linearGradient(@wcfSuccessBackgroundColor2, @wcfSuccessBackgroundColor, @wcfSuccessBackgroundColor2);
+	.textShadow(@wcfSuccessBackgroundColor2);
+	
+	&:after {
+		background-image: url('../icon/successInverse.svg');
+	}
+	
+	> a {
+		color: @wcfInfoColor;
+	}
+}
+
+.warning {
+	color: @wcfWarningColor;
+	
+	.linearGradient(@wcfWarningBackgroundColor2, @wcfWarningBackgroundColor, @wcfWarningBackgroundColor2);
+	.textShadow(@wcfWarningBackgroundColor2);
+	
+	&:after {
+		background-image: url('../icon/warningInverse.svg');
+	}
+	
+	> a {
+		color: @wcfInfoColor;
+	}
+}
+
+.error {
+	color: @wcfErrorColor;
+	
+	.linearGradient(@wcfErrorBackgroundColor2, @wcfErrorBackgroundColor, @wcfErrorBackgroundColor2);
+	.textShadow(@wcfErrorBackgroundColor2);
+	
+	&:after {
+		background-image: url('../icon/errorInverse.svg');
+	}
+	
+	> a {
+		color: @wcfInfoColor;
+	}
+}
+
+/* inline errors */
+.innerError {
+	//clear: both;
+	color: @wcfErrorColor;
+	display: table !important;
+	line-height: 1.5;
+	margin-top: 7px;
+	padding: 2px 10px;
+	position: relative; /* Firefox support (from version 10 on) is buggy */
+	
+	.borderRadius();
+	.boxShadowNative(~"0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2)");
+	.linearGradient(@wcfErrorBackgroundColor2, @wcfErrorBackgroundColor, @wcfErrorBackgroundColor2);
+	.textShadow(@wcfErrorBackgroundColor2);
+	
+	/* pointer */
+	&:after {
+		border: 7px solid transparent;
+		border-bottom-color: @wcfErrorBackgroundColor;
+		border-top-width: 0;
+		content: "";
+		display: inline-block;
+		left: 9px;
+		position: absolute;
+		top: -6px;
+		z-index: 100;
+	}
+	
+	&:before {
+		border: 6px solid transparent;
+		border-bottom-color: @wcfErrorBackgroundColor;
+		border-top-width: 0;
+		content: "";
+		display: inline-block;
+		left: 10px;
+		position: absolute;
+		top: -6px;
+		z-index: 101;
+	}
+}
diff --git a/wcfsetup/install/files/style/alerts.less b/wcfsetup/install/files/style/alerts.less
deleted file mode 100644
index 009a0ee39a..0000000000
--- a/wcfsetup/install/files/style/alerts.less
+++ /dev/null
@@ -1,134 +0,0 @@
-/* ############## System Notifications (Inline) ############## */
-
-/* default values */
-.info,
-.error,
-.success,
-.warning {
-	font-weight: bold;
-	line-height: 1.5;
-	margin-top: @wcfGapMedium;
-	padding: @wcfGapSmall @wcfGapMedium @wcfGapSmall 50px;
-	position: relative;
-	
-	.borderRadius();
-	.boxShadowNative(~"0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2)");
-	
-	&:after {
-		background-repeat: no-repeat, repeat;
-		background-size: 24px, auto;
-		content: "";
-		display: block;
-		height: 24px;
-		left: 13px;
-		position: absolute;
-		top: 5px;
-		width: 24px;
-	}
-	
-	> a {
-		text-decoration: underline;
-	}
-}
-
-/* types */
-.info {
-	color: @wcfInfoColor;
-	
-	.linearGradient(@wcfInfoBackgroundColor2, @wcfInfoBackgroundColor, @wcfInfoBackgroundColor2);
-	.textShadow(@wcfInfoBackgroundColor2);
-	
-	&:after {
-		background-image: url('../icon/infoInverse.svg');
-	}
-	
-	> a {
-		color: @wcfInfoColor;
-	}
-}
-
-.success {
-	color: @wcfSuccessColor;
-	
-	.linearGradient(@wcfSuccessBackgroundColor2, @wcfSuccessBackgroundColor, @wcfSuccessBackgroundColor2);
-	.textShadow(@wcfSuccessBackgroundColor2);
-	
-	&:after {
-		background-image: url('../icon/successInverse.svg');
-	}
-	
-	> a {
-		color: @wcfInfoColor;
-	}
-}
-
-.warning {
-	color: @wcfWarningColor;
-	
-	.linearGradient(@wcfWarningBackgroundColor2, @wcfWarningBackgroundColor, @wcfWarningBackgroundColor2);
-	.textShadow(@wcfWarningBackgroundColor2);
-	
-	&:after {
-		background-image: url('../icon/warningInverse.svg');
-	}
-	
-	> a {
-		color: @wcfInfoColor;
-	}
-}
-
-.error {
-	color: @wcfErrorColor;
-	
-	.linearGradient(@wcfErrorBackgroundColor2, @wcfErrorBackgroundColor, @wcfErrorBackgroundColor2);
-	.textShadow(@wcfErrorBackgroundColor2);
-	
-	&:after {
-		background-image: url('../icon/errorInverse.svg');
-	}
-	
-	> a {
-		color: @wcfInfoColor;
-	}
-}
-
-/* inline errors */
-.innerError {
-	//clear: both;
-	color: @wcfErrorColor;
-	display: table !important;
-	line-height: 1.5;
-	margin-top: 7px;
-	padding: 2px 10px;
-	position: relative; /* Firefox support (from version 10 on) is buggy */
-	
-	.borderRadius();
-	.boxShadowNative(~"0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2)");
-	.linearGradient(@wcfErrorBackgroundColor2, @wcfErrorBackgroundColor, @wcfErrorBackgroundColor2);
-	.textShadow(@wcfErrorBackgroundColor2);
-	
-	/* pointer */
-	&:after {
-		border: 7px solid transparent;
-		border-bottom-color: @wcfErrorBackgroundColor;
-		border-top-width: 0;
-		content: "";
-		display: inline-block;
-		left: 9px;
-		position: absolute;
-		top: -6px;
-		z-index: 100;
-	}
-	
-	&:before {
-		border: 6px solid transparent;
-		border-bottom-color: @wcfErrorBackgroundColor;
-		border-top-width: 0;
-		content: "";
-		display: inline-block;
-		left: 10px;
-		position: absolute;
-		top: -6px;
-		z-index: 101;
-	}
-}
diff --git a/wcfsetup/install/files/style/attachment.less b/wcfsetup/install/files/style/attachment.less
deleted file mode 100644
index 0eabdcb632..0000000000
--- a/wcfsetup/install/files/style/attachment.less
+++ /dev/null
@@ -1,110 +0,0 @@
-/* #### Attachments #### */
-
-/* attachment thumbnail list */
-.attachmentThumbnailList, .attachmentFileList {
-	margin-top: @wcfGapMedium;
-	padding-top: @wcfGapSmall;
-	
-	> legend {
-		border-bottom: 0;
-		border-top: 1px dotted @wcfContainerBorderColor;
-		color: @wcfColor;
-		font-size: @wcfTitleFontSize;
-		padding: @wcfGapTiny 0 0;
-	}
-}
-
-.attachmentThumbnailList {
-	> ul > li {
-		margin: 0 0 @wcfGapMedium @wcfGapSmall;
-	}
-}
-
-.attachmentFileList {
-	> ul > li {
-		&:not(:first-child) {
-			margin-top: @wcfGapTiny;
-		}
-	
-		> hgroup h2 {
-			font-size: @wcfSmallFontSize;
-		}
-	}
-}
-
-.attachmentThumbnail {
-	display: inline-block;
-	position: relative;
-	
-	.borderRadius();
-	.boxShadow(0, 1px, rgba(0, 0, 0, 0.2), 1px);
-	.transition(box-shadow, .1s);
-		
-	> img,
-	> a > img {
-		.borderRadius();
-	}
-	
-	> hgroup {
-		background-color: rgba(0, 0, 0, 0.6);
-		bottom: 0;
-		color: #fff;
-		position: absolute;
-		width: 100%;
-		padding: @wcfGapSmall 0;
-		
-		.borderRadius(0, 0, @wcfContainerBorderRadius - 2, @wcfContainerBorderRadius - 2);
-		
-		> h1,
-		> h2 {
-			margin: 0 @wcfGapSmall;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
-		
-		> h2 {
-			font-size: @wcfSmallFontSize;
-			height: 0;
-			
-			.transition(height, .25s, ease-out);
-		}
-	}
-	
-	&:hover {
-		.boxShadow(0, 0, @wcfButtonHoverBorderColor, 20px);
-		
-		> hgroup > h2 {
-			height: 1.27em;
-		}
-	}
-}
-
-
-/* attachment form */
-.formAttachmentList {
-	border-bottom: 1px solid @wcfContainerBorderColor;
-	margin-bottom: @wcfGapSmall;
-	padding-bottom: @wcfGapSmall;
-		
-	> li {
-		width: 33%;
-		float: left;
-		
-		> .thumbnail {
-			width: 48px;
-			height: 48px;
-			
-			.borderRadius();
-		}
-		
-		> div {
-			padding-top: @wcfGapSmall;
-			
-			> hgroup {
-				float: left;
-				margin-right: @wcfGapSmall;
-			}
-		}
-	}
-}
diff --git a/wcfsetup/install/files/style/badge.less b/wcfsetup/install/files/style/badge.less
deleted file mode 100644
index 167df0f80f..0000000000
--- a/wcfsetup/install/files/style/badge.less
+++ /dev/null
@@ -1,84 +0,0 @@
-/* ############## Badges ############## */
-
-// sets default badge shadows depending on background color
-.badgeShadow(@backgroundColor) when (lightness(@backgroundColor) >= 50%) {
-	box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, .8);
-}
-.badgeShadow(@backgroundColor) when (lightness(@backgroundColor) < 50%) {
-	box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, .8);
-}
-
-/* default values */
-.badge {
-	background-color: @wcfColor;
-	border-radius: 13px;
-	color: @wcfContentBackgroundColor;
-	display: inline-block;
-	font-size: @wcfSmallFontSize;
-	font-weight: normal !important;
-	padding: 1px 8px 2px;
-	position: relative;
-	text-shadow: none !important;
-	white-space: nowrap;
-	
-	.badgeShadow(@wcfContentBackgroundColor);
-	
-	/* colors */
-	&.badgeUpdate {
-		background-color: @wcfTabularBoxBackgroundColor;
-		color: @wcfTabularBoxColor;
-	}
-	
-	&.badgeGreen {
-		background-color: @wcfSuccessBackgroundColor;
-		color: @wcfSuccessColor;
-	}
-	
-	&.badgeRed {
-		background-color: @wcfErrorBackgroundColor;
-		color: @wcfErrorColor;
-	}
-	
-	&.badgeInverse {
-		background-color: @wcfTabularBoxColor;
-		color: @wcfTabularBoxBackgroundColor;
-		
-		.badgeShadow(@wcfTabularBoxBackgroundColor);
-	}
-}
-
-a.badge:hover {
-	color: @wcfContentBackgroundColor;
-	text-decoration: none;
-}
-
-/* special */
-.containerHeadline > h1 > .badge {
-	font-size: 70%;
-	top: -1px;
-}
-
-.boxHeadline > hgroup > h1 .badge {
-	font-size: 50%;
-	top: -3px;
-}
-
-.mainMenu > ul > li > a > .badge {
-	font-size: 70%;
-	top: -1px;
-}
-
-.mainMenu > ul > li.active > a > .badge {
-	font-size: 65%;
-	top: -2px;
-}
-
-.tabularBoxTitle > hgroup > h1 > .badge {
-	font-size: 70%;
-	top: -1px;
-}
-
-fieldset > legend > .badge {
-	font-size: 50%;
-	top: -3px;
-}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/bootstrap/mixin.less b/wcfsetup/install/files/style/bootstrap/mixin.less
new file mode 100644
index 0000000000..bd79c77dd4
--- /dev/null
+++ b/wcfsetup/install/files/style/bootstrap/mixin.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) >= 40%) {
+	text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+}
+.textShadow(@backgroundColor) when (lightness(@backgroundColor) < 60%) {
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
+}
+
+/* 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/bootstrap/mixins.less b/wcfsetup/install/files/style/bootstrap/mixins.less
deleted file mode 100644
index bd79c77dd4..0000000000
--- a/wcfsetup/install/files/style/bootstrap/mixins.less
+++ /dev/null
@@ -1,101 +0,0 @@
-/* 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) >= 40%) {
-	text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
-}
-.textShadow(@backgroundColor) when (lightness(@backgroundColor) < 60%) {
-	text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
-}
-
-/* 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/bootstrap/variables.less b/wcfsetup/install/files/style/bootstrap/variables.less
deleted file mode 100644
index 3053f7607a..0000000000
--- a/wcfsetup/install/files/style/bootstrap/variables.less
+++ /dev/null
@@ -1,145 +0,0 @@
-/*
-	***
-	*** W A R N I N G
-	***
-	*** This file is no longer in use and was replaced by wcf1_style_variable.
-	*** It will be removed in the near feature.
-	***
-*/
-
-/* ###### sxf values ###### */
-/* these values will be defined by the style editor (don't it touch here) */
-
-/* ### general (content) ### */
-@wcfContentBackgroundColor: #fff; // bg color for main content area
-@wcfColor: #666; // default text color
-@wcfLinkColor: #369; // default link color
-@wcfLinkHoverColor: #036; // link hover color
-
-/* ### containers ### */
-/* containers use the default text / link color, so the container bg color should be similar to the content bg color */
-@wcfContainerBackgroundColor: rgba(252, 253, 254, 1); // bg color for containers
-@wcfContainerAccentBackgroundColor: rgba(241, 245, 250, 1); // light variantion of the container bg color
-@wcfContainerHoverBackgroundColor: rgba(216, 231, 245, 1); // bg color for hover effects
-@wcfContainerBorderColor: #ccc; //#bcd; // border color for containers
-@wcfContainerBorderRadius: 6px; // border radius
-
-/* ### box header (table header) ### */
-@wcfTabularBoxBackgroundColor: #369; // bg color
-@wcfTabularBoxColor: #fff; // text / link color
-@wcfTabularBoxHoverColor: #fff; // link hover color
-
-/* ### user panel ### */
-@wcfUserPanelBackgroundColor: rgba(0, 0, 0, .5); // bg color
-@wcfUserPanelColor: #fff; // text / link color
-@wcfUserPanelHoverColor: #fff; // link hover color
-
-/* ### buttons ### */
-/* default */
-@wcfButtonBackgroundColor: #e3e3e3;
-@wcfButtonBorderColor: #bbb;
-@wcfButtonColor: #999;
-
-/* primary */
-@wcfButtonPrimaryBackgroundColor: rgba(216, 231, 245, 1);
-@wcfButtonPrimaryBorderColor: #69C;
-@wcfButtonPrimaryColor: #69C;
-
-/* hover */
-@wcfButtonHoverBackgroundColor: rgba(255, 229, 200, 1);
-@wcfButtonHoverBorderColor: #fa2;
-@wcfButtonHoverColor: #666;
-
-/* ### form elements ### */
-@wcfInputBackgroundColor: #fff;
-@wcfInputColor: #666;
-@wcfInputBorderColor: #ccc;
-@wcfInputHoverBackgroundColor: rgba(255, 249, 244, 1);
-@wcfInputHoverBorderColor: #fa2;
-
-/* ### fonts ### */
-@wcfBaseFontSize: 13px;
-@wcfBaseFontFamily: "Trebuchet MS", Arial, sans-serif;
-
-/* ### layouts ### */
-@wcfLayoutFluidGap: 21px;
-@wcfLayoutFixedWidth: 1200px;
-
-
-/* ###### additional variables ###### */
-/* values are taken from sxf variables; but you can overwrite them by individual less */
-
-/* ### outer page bg ### */
-@wcfPageBackgroundColor: @wcfContentBackgroundColor;
-@wcfPageColor: @wcfColor;
-@wcfPageLinkColor: @wcfLinkColor;
-@wcfPageLinkHoverColor: @wcfLinkHoverColor;
-
-/* ### sidebar ### */
-@wcfSidebarBackgroundColor: @wcfContentBackgroundColor;
-
-/* ### additional text variables ### */
-@wcfDimmedColor: lighten(@wcfColor, 10%);
-@wcfLabelColor: @wcfColor;
-@wcfHeadlineColor: @wcfColor;
-@wcfHeadlineFontFamily: @wcfBaseFontFamily;
-
-/* ### dropdown ### */
-@wcfDropdownBackgroundColor: @wcfContentBackgroundColor;
-@wcfDropdownColor: @wcfColor;
-@wcfDropdownBorderColor: @wcfContainerBorderColor;
-@wcfDropdownHoverBackgroundColor: @wcfContainerHoverBackgroundColor;
-
-
-/* ###### hardcoded values ###### */
-/* values are hardcoded; you can overwrite them by individual less */
-
-/* ### font size ### */
-@wcfBaseLineHeight: 1.27;
-@wcfHeadlineFontSize: 170%;
-@wcfSubHeadlineFontSize: 140%;
-@wcfTitleFontSize: 120%;
-@wcfSmallFontSize: 85%;
-
-/* ### form states and alerts ### */
-/* warning (orange) */
-@wcfWarningColor: #fff;
-@wcfWarningBackgroundColor: #ffb800;
-@wcfWarningBackgroundColor2: #a67800;
-
-/* error (red) */
-@wcfErrorColor: #fff;
-@wcfErrorBackgroundColor: #c95145;
-@wcfErrorBackgroundColor2: #913d37;
-
-/* success (green) */
-@wcfSuccessColor: #fff;
-@wcfSuccessBackgroundColor: #74a446;
-@wcfSuccessBackgroundColor2: #4d7730;
-
-/* info (blue) */
-@wcfInfoColor: #fff;
-@wcfInfoBackgroundColor: #4674a4;
-@wcfInfoBackgroundColor2: #304d77;
-
-/* ### tooltip ### */
-@wcfTooltipBackgroundColor: rgba(0, 0, 0, .8);
-@wcfTooltipColor: white;
-
-/* ### gap ### */
-@wcfGapTiny: 4px;
-@wcfGapSmall: 7px;
-@wcfGapMedium: 14px;
-@wcfGapLarge: 21px;
-
-
-/* ###### individual less values ###### */
-/* overwrite additional variables for blue sunrise */
-@wcfPageBackgroundColor: @wcfTabularBoxBackgroundColor;
-@wcfSidebarBackgroundColor: @wcfContainerHoverBackgroundColor;
-@wcfPageLinkColor: lighten(@wcfLinkColor, 10%);
-@wcfPageLinkHoverColor: @wcfUserPanelHoverColor;
-@wcfLabelColor: @wcfLinkColor;
-
-/* additional variables for blue sunrise */
-@wcfNavigationBackgroundColor: lighten(@wcfSidebarBackgroundColor, 3%);
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/breadcrumbs.less b/wcfsetup/install/files/style/breadcrumbs.less
deleted file mode 100644
index 4db0980d32..0000000000
--- a/wcfsetup/install/files/style/breadcrumbs.less
+++ /dev/null
@@ -1,90 +0,0 @@
-/* ############## Bread Crumbs ############## */
-
-/* Globals */
-
-.breadcrumbs {
-	background-color: @wcfContentBackgroundColor;
-	border: 1px solid @wcfContainerBorderColor;
-	box-sizing: border-box;
-	display: block;
-	overflow: hidden;
-	position: relative;
-	text-align: left;
-	
-	.borderRadius();
-	
-	> ul {
-		> li {
-			float: left;
-			font-size: @wcfSmallFontSize;
-			list-style: none;
-			max-width: 30%;
-			position: relative;
-			
-			.transition(max-width, .2s);
-			
-			&:hover {
-				max-width: 100%;
-				
-				a {
-					background-color: @wcfContainerAccentBackgroundColor;
-					position: relative;
-					z-index: 10;
-				}
-				
-				> .pointer > span {
-					border-color: transparent transparent transparent @wcfContainerAccentBackgroundColor;
-				}
-			}
-			
-			> .pointer {
-				border-color: transparent transparent transparent @wcfContainerBorderColor;
-				border-style: solid none solid solid;
-				border-width: 15px;
-				display: block !important;
-				height: 0;
-				position: absolute;
-				right: -15px;
-				top: -4px;
-				width: 0;
-				z-index: 20;
-				
-				> span {
-					border-color: transparent transparent transparent @wcfContentBackgroundColor;
-					border-style: solid none solid solid;
-					border-width: 15px;
-					display: block;
-					height: 0;
-					left: -16px;
-					overflow: hidden;
-					position: absolute;
-					text-indent: -9000px;
-					top: -15px;
-					width: 0;
-				}
-			}
-			
-			> a {
-				color: @wcfColor;
-				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/home.svg');
-				background-position: 7px center;
-				background-repeat: no-repeat;
-				background-size: 16px;
-				padding-left: 30px;
-				
-				.borderRadius(@wcfContainerBorderRadius - 2, 0, 0, @wcfContainerBorderRadius - 2);
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/button.less b/wcfsetup/install/files/style/button.less
index 35c397ff02..9f9360b8d0 100644
--- a/wcfsetup/install/files/style/button.less
+++ b/wcfsetup/install/files/style/button.less
@@ -4,13 +4,10 @@ input[type='reset'],
 input[type='submit'],
 input[type='button'],
 .button {
-	border-radius: 30px;
 	border-style: solid;
 	border-width: 1px;
 	cursor: pointer;
 	display: inline-block;
-	font-size: 100%;
-	font-weight: bold;
 	margin: 0 2px;
 	padding: 5px 13px;
 }
@@ -21,26 +18,24 @@ input[type='reset']:not([disabled]),
 input[type='submit']:not([disabled]),
 input[type='button']:not([disabled]),
 button:not([disabled]) {
-	border-color: lighten(@wcfButtonBorderColor, 7%) @wcfButtonBorderColor darken(@wcfButtonBorderColor, 7%);
+	background-color: @wcfButtonBackgroundColor;
+	border-color: @wcfButtonBorderColor;
 	color: @wcfButtonColor;
 	text-decoration: none;
 	
-	.boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);
-	.linearGradient(lighten(@wcfButtonBackgroundColor, 5%), lighten(@wcfButtonBackgroundColor, 10%), lighten(@wcfButtonBackgroundColor, 5%) 2px, @wcfButtonBackgroundColor);
 	.textShadow(@wcfButtonBackgroundColor);
-	.transition(~"background-color, background-image, border, box-shadow, color", .1s);
 }
 
 /* primary */
+/* todo */
 .button.buttonPrimary,
 input[type='submit']:not([disabled]),
 input[type='button']:not([disabled]).buttonPrimary,
 button:not([disabled]).buttonPrimary {
-	border-color: lighten(@wcfButtonPrimaryBorderColor, 7%) @wcfButtonPrimaryBorderColor darken(@wcfButtonPrimaryBorderColor, 7%);
+	background-color: @wcfButtonPrimaryBackgroundColor;
+	border-color: @wcfButtonPrimaryBorderColor;
 	color: @wcfButtonPrimaryColor;
 	
-	.boxShadowNative(~"0 1px 3px rgba(0, 0, 0, .1), 0 0 10px" @wcfButtonPrimaryBorderColor);
-	.linearGradient(lighten(@wcfButtonPrimaryBackgroundColor, 5%), lighten(@wcfButtonPrimaryBackgroundColor, 10%), lighten(@wcfButtonPrimaryBackgroundColor, 5%) 2px, @wcfButtonPrimaryBackgroundColor);
 	.textShadow(@wcfButtonPrimaryBackgroundColor);
 }
 
@@ -50,16 +45,16 @@ input[type='reset']:not([disabled]):hover,
 input[type='submit']:not([disabled]):hover,
 input[type='button']:not([disabled]):hover,
 button:not([disabled]):hover {
-	border-color: lighten(@wcfButtonHoverBorderColor, 7%) @wcfButtonHoverBorderColor darken(@wcfButtonHoverBorderColor, 7%);
+	background-color: @wcfButtonHoverBackgroundColor;
+	border-color: @wcfButtonHoverBorderColor;
 	color: @wcfButtonHoverColor;
 	text-decoration: none;
 	
-	.boxShadowNative(~"0 1px 3px rgba(0, 0, 0, .1), 0 0 10px" @wcfButtonHoverBorderColor);
-	.linearGradient(lighten(@wcfButtonHoverBackgroundColor, 5%), lighten(@wcfButtonHoverBackgroundColor, 10%), lighten(@wcfButtonHoverBackgroundColor, 5%) 2px, @wcfButtonHoverBackgroundColor);
 	.textShadow(@wcfButtonHoverBackgroundColor);
 }
 
 /* active (pressed) */
+/* todo */
 .button:active,
 input[type='reset']:not([disabled]):active,
 input[type='submit']:not([disabled]):active,
@@ -75,6 +70,7 @@ button:not([disabled]):active,
 }
 
 /* disabled state */
+/* todo */
 input[type='reset']:disabled,
 input[type='submit']:disabled,
 input[type='button']:disabled,
@@ -89,6 +85,7 @@ button:disabled {
 }
 
 /* active (permanently) */
+/* todo */
 .button.active,
 input[type='button'].active,
 button.active,
diff --git a/wcfsetup/install/files/style/codebox.less b/wcfsetup/install/files/style/codebox.less
deleted file mode 100644
index 574745cf71..0000000000
--- a/wcfsetup/install/files/style/codebox.less
+++ /dev/null
@@ -1,203 +0,0 @@
-/* Code Box */
-.codeBox {
-	background-color: @wcfContentBackgroundColor;
-	
-	> div {
-		overflow: hidden;
-		
-		> dl {
-			display: table;
-			margin-top: 7px;
-			width: 100%;
-			
-			> dt {
-				text-align: right;
-				display: table-cell;
-				width: 1%;
-				
-				> pre {
-					padding: 4px 7px;
-					
-					> a {
-						display: block;
-						margin: 0 -7px;
-						padding: 0 7px;
-						text-decoration: none;
-						
-						&:target {
-							color: #000;
-							background-color: #ff3; 
-						}
-					}
-				}
-			}
-			
-			> dd {
-				display: table-cell;
-				width: 100%;
-				
-				> pre {
-					padding: 4px 7px;
-				}
-			}
-		}
-	}
-	
-	&:hover {
-		> div {
-			overflow: auto;
-		}
-	}
-	
-	> hgroup {
-		border-bottom: 1px dotted @wcfContainerBorderColor;
-		
-		> h1 {
-			padding-bottom: 4px;
-			font-weight: bold;
-		}
-	}
-}
-
-/* ############## 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-color: @wcfContentBackgroundColor;
-	background-image: url('../images/quote.png');
-	background-position: 12px 12px;
-	background-repeat: no-repeat;
-	padding-left: 58px;
-	min-height: 28px;
-	margin-bottom: @wcfGapTiny;
-	
-	> header {
-		padding-bottom: @wcfGapTiny;
-		border-bottom: 1px dotted @wcfContainerBorderColor;
-		margin-bottom: @wcfGapSmall;
-		
-		> h1 {
-			font-weight: bold;
-		}
-	}
-	
-	/* nested quotes */
-	.quoteBox {
-		background-image: none;
-		padding-left: @wcfGapLarge;
-		min-height: 0;
-	}
-}
-
-/* spoiler box */
-.spoilerBox {
-	background-color: @wcfContentBackgroundColor;
-	padding-bottom: @wcfGapSmall;
-	
-	> header {
-		margin-bottom: @wcfGapSmall;
-	}
-	
-	> div {
-		padding-bottom: @wcfGapSmall;
-	}
-}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/comments.less b/wcfsetup/install/files/style/comments.less
deleted file mode 100644
index 9f1bdbf4b8..0000000000
--- a/wcfsetup/install/files/style/comments.less
+++ /dev/null
@@ -1,111 +0,0 @@
-/* ############## Profile Comments ############## */
-.comment,
-.commentResponse {
-	position: relative;
-}
-
-.commentOptions {
-	display: block;
-	position: absolute;
-	top: @wcfGapMedium;
-	right: @wcfGapMedium;
-	
-	> li {
-		float: left;
-		opacity: 0;
-		
-		.transition(opacity, .1s);
-		
-		> a {
-			padding: @wcfGapTiny;
-		}
-	}
-}
-
-.commentResponseList .commentOptions {
-	top: @wcfGapSmall;
-	right: @wcfGapSmall;
-}
-
-.commentContent:hover > .commentOptions > li {
-	opacity: 1;
-}
-
-.commentAdd > div > small,
-.commentResponseAdd > div > small {
-	color: @wcfDimmedColor;
-	display: block;
-	opacity: 0;
-	
-	.transition(opacity, .1s); 
-}
-
-.commentAdd > div > input:focus + small,
-.commentResponseAdd > div > input:focus + small {
-	opacity: 1;
-}
-
-.commentContent:not(.commentResponseContent) {
-	margin-bottom: @wcfGapMedium;
-}
-
-.commentResponse {
-	border-top: 1px solid @wcfContainerBorderColor;
-	padding: @wcfGapSmall;
-}
-
-.commentResponseAdd {
-	border-top: 1px solid @wcfContainerBorderColor;
-	padding: 7px 7px 0;
-}
-
-.commentResponseAdd + .commentResponseList > .commentResponse:first-child {
-	margin-top: 7px;
-}
-
-.commentList > li:nth-child(2n) .commentResponseList > li:nth-child(2n+1) {
-	background-color: @wcfContainerBackgroundColor;
-	
-	.transition(background-color, .1s);
-}
-
-.commentList > li:nth-child(2n+1) .commentResponseList > li:nth-child(2n+1) {
-	background-color: @wcfContainerAccentBackgroundColor;
-	
-	.transition(background-color, .1s);
-}
-
-.commentResponseList > li:hover {
-	background-color: @wcfContainerHoverBackgroundColor !important;
-}
-
-.commentList > li:not(.commentAdd):hover {
-	background-color: @wcfContainerBackgroundColor;
-	
-	&:nth-child(2n) {
-		background-color: @wcfContainerAccentBackgroundColor;
-	}
-}
-
-/* like display */
-.commentList .likesBadge {
-	display: inline-block;
-	margin: -2px 0 -2px @wcfGapTiny;
-}
-
-/* Toggle Comments Links */
-.commentResponsePrevious,
-.commentResponseRecent {
-	width: 100%;
-	text-align: center;
-	margin-left: auto;
-	margin-right: auto;
-	margin-top: 7px;
-	
-	a {
-		border-radius: 3px;
-		display: inline-block;
-		padding: 3px 13px;
-		white-space: nowrap;
-	}
-}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/content.less b/wcfsetup/install/files/style/content.less
deleted file mode 100644
index 4fa1c6e43e..0000000000
--- a/wcfsetup/install/files/style/content.less
+++ /dev/null
@@ -1,50 +0,0 @@
-#main {
-	z-index: 110;
-	
-	> div {
-		background-color: @wcfSidebarBackgroundColor;
-		.boxShadowInset(0, 0, rgba(0, 0, 0, .1));
-	}
-	
-	&.not(.sidebarOrientationLeft):not(.sidebarOrientationRight) {
-		.sidebar {
-			display: none;
-		}
-	}
-	
-	&.sidebarOrientationLeft {
-		.content {
-			border-left: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
-			margin-left: 299px;
-		}
-		
-		.sidebar {
-			float: left;
-		}
-	}
-	
-	&.sidebarOrientationRight {
-		.content {
-			border-right: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
-			margin-right: 299px;
-		}
-		
-		.sidebar {
-			float: right;
-		}
-	}
-}
-
-.sidebar {
-	width: 300px;
-	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/conversation.less b/wcfsetup/install/files/style/conversation.less
deleted file mode 100644
index 6379ceb781..0000000000
--- a/wcfsetup/install/files/style/conversation.less
+++ /dev/null
@@ -1,41 +0,0 @@
-#conversationLabelFilter {
-	margin-bottom: @wcfGapMedium;
-}
-
-.conversationLabelList {
-	margin-bottom: @wcfGapMedium;
-	
-	li:not(:last-child) {
-		margin-bottom: @wcfGapTiny;
-	}
-	
-	&~small {
-		display: block;
-	}
-}
-
-#unreadConversations .dropdownMenu > li {
-	h1 {
-		max-width: 250px;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-}
-
-.conversationParticipantList {
-	> li {
-		float: left;
-		width: 30%;
-		overflow: hidden;
-		
-		> hgroup {
-			> h2 {
-				font-size: @wcfSmallFontSize;
-			}
-		}
-	}
-}
-
-.conversationLeft {
-	text-decoration: line-through;
-}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/dialog.less b/wcfsetup/install/files/style/dialog.less
index bb807c9bbd..4a68a16765 100644
--- a/wcfsetup/install/files/style/dialog.less
+++ b/wcfsetup/install/files/style/dialog.less
@@ -9,22 +9,10 @@
 	
 	.borderRadius(15px);
 	.boxShadow(0, 1px, rgba(0, 0, 0, .3), 23px);
-	
-	.boxHeadline hgroup {
-		h1,
-		h1 a {
-			//color: @wcfDimmedColor;
-			
-			//.textShadow(@wcfPageBackgroundColor);
-		}
-	}
 }
 
 .dialogTitlebar {
 	background-color: @wcfTabularBoxBackgroundColor;
-	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;
diff --git a/wcfsetup/install/files/style/footer.less b/wcfsetup/install/files/style/footer.less
deleted file mode 100644
index ae4c96ed40..0000000000
--- a/wcfsetup/install/files/style/footer.less
+++ /dev/null
@@ -1,20 +0,0 @@
-.footer {
-	padding-bottom: @wcfGapMedium;
-	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/form.less b/wcfsetup/install/files/style/form.less
new file mode 100644
index 0000000000..95f882ad05
--- /dev/null
+++ b/wcfsetup/install/files/style/form.less
@@ -0,0 +1,404 @@
+/* ### fieldsets ### */
+fieldset {
+	padding-top: @wcfGapMedium;
+	
+	> legend {
+		border-bottom: 1px solid @wcfContainerBorderColor;
+		color: @wcfDimmedColor;
+		font-family: @wcfHeadlineFontFamily;
+		font-size: @wcfSubHeadlineFontSize;
+		font-weight: bold;
+		width: 100%;
+		padding-bottom: @wcfGapTiny;
+		
+		.textShadow(@wcfContainerBackgroundColor);
+		
+		+ small {
+			top: -7px;
+			position: relative;
+		}
+	}
+	
+	> dl:not(:first-of-type) {
+		margin-top: @wcfGapSmall;
+	}
+	
+	&:not(:first-of-type) {
+		margin-top: @wcfGapMedium;
+	}
+	
+	/* definition list */
+	dl {
+		position: relative;
+		
+		.clearfix();
+		
+		> dd:not(:first-of-type), > dt:not(:first-of-type) {
+			margin-top: @wcfGapSmall;
+		}
+		
+		> dt {
+			color: @wcfLabelColor;
+			float: left;
+			text-align: right;
+			width: 230px;
+			
+			> label {
+				display: block;
+			}
+			
+			/* Reversed (flips the label aside the checkbox or radio button) - 
+				use only when automatically generating checkboxes or radio-buttons! */
+			&.reversed {
+				left: 270px;
+				margin-top: 2px;
+				position: absolute;
+				text-align: left;
+				width: auto;
+				
+				~ dd > input[type='checkbox'], ~ dd > input[type='radio'] {
+					margin-left: 0;
+				}
+			}
+		}
+		
+		> dd {
+			margin-left: 250px;
+			
+			> small {
+				color: @wcfDimmedColor;
+				display: block;
+				margin-top: 2px;
+			}
+			
+			> label {
+				color: @wcfLabelColor;
+				display: block;
+				
+				> input[type='checkbox'], > input[type='radio'] {
+					margin: 2px 2px 2px 0;
+				}
+			}
+			
+			> input[type='checkbox'], > input[type='radio'] {
+				~ small {
+					margin-left: 21px;
+				}
+			}
+			
+			&:not(.floated) {
+				> label ~ small {
+					margin-left: 21px;
+				}
+			}
+			
+			&.floated {
+				> label {
+					display: inline-block;
+					margin-right: @wcfGapSmall;
+				}
+			}
+			
+			> input, textarea, select {
+				+ label {
+					margin-top: 2px;
+				}
+			}
+		}
+		
+		/* wide */
+		&.wide {
+			> dt {
+				display: none;
+			}
+			
+			> dd {
+				margin-left: 0;
+			}
+		}
+		
+		/* disabled state */
+		&.disabled {
+			> dt, > dd > label {
+				color: @wcfDimmedColor;
+			}
+		}
+	}
+}
+
+/* sidebar */
+.sidebar {
+	fieldset {
+		> dl {
+			> dt {
+				text-align: left;
+				float: none;
+				width: auto;
+			}
+			
+			> dd {
+				margin-top: 2px;
+				margin-left: 0;
+				margin-bottom: @wcfGapMedium;
+			}
+		}
+	}
+}
+
+/* submit buttons */
+.formSubmit {
+	margin-top: @wcfGapMedium;
+	text-align: center;
+}
+
+
+/* ### inputs ### */
+/* 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;
+	margin: 0;
+}
+
+select {
+	padding: 1px 1px 1px 3px;
+	margin: 0;
+}
+
+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: @wcfInputBorderColor;
+	border-style: solid;
+	border-width: 1px;
+	color: @wcfInputColor;
+}
+
+/* hover */
+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;
+}
+
+/* active / focus */
+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: 0;
+	
+	.boxShadowNative(~"0 0 5px" fade(@wcfInputHoverBorderColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
+}
+
+/* read only state */
+/* todo */
+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;
+	border-color: @wcfInputBorderColor;
+}
+
+/* disabled state */
+/* todo */
+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: transparent;
+	border-color: @wcfInputBorderColor;
+	color: @wcfDimmedColor;
+}
+
+/* error state */
+/* todo */
+.formError input[type='text'],
+.formError input[type='search'],
+.formError input[type='email'],
+.formError input[type='url'],
+.formError input[type='password'],
+.formError textarea {
+	border-color: @wcfErrorBackgroundColor;
+}
+
+/* success state */
+/* todo */
+.formSuccess input[type='text'],
+.formSuccess input[type='search'],
+.formSuccess input[type='email'],
+.formSuccess input[type='url'],
+.formSuccess input[type='password'],
+.formSuccess textarea {
+	border-color: @wcfSuccessBackgroundColor;
+}
+
+/* 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%;
+}
+
+/* upload button */
+.uploadButton {
+	overflow: hidden;
+	position: relative;
+	
+	input {
+		left: 0;
+		opacity: 0;
+		position: absolute;
+		top: 0;
+	}
+}
+
+
+
+
+
+
+
+
+
+/* todo: ckeditor fixes */
+.cke_skin_kama {
+	border-width: 0 !important;
+	padding: 0 !important;
+}
+
+/* todo: smiley list */
+#smilies > ul > li {
+	display: inline;
+}
+
+/* todo: element list with checkboxes */
+.structuredList {
+	background-color: @wcfContainerBackgroundColor;
+	
+	li {
+		padding: @wcfGapTiny @wcfGapSmall;
+		text-align: right;
+
+		&:hover {
+			background-color: @wcfButtonHoverBackgroundColor;
+		}
+		
+		&:first-child {
+			border-radius: @wcfContainerBorderRadius @wcfContainerBorderRadius 0 0;
+		}
+		
+		&:last-child {
+			border-radius: 0 0 @wcfContainerBorderRadius @wcfContainerBorderRadius;
+		}
+		
+		&.category {
+			background-color: @wcfNavigationBackgroundColor;
+			
+			&:hover {
+				background-color: @wcfButtonHoverBackgroundColor;
+			}
+		}
+		
+		span {
+			float: left;
+		}
+		
+		label {
+			cursor: pointer;
+			margin: 0 @wcfGapSmall;
+			padding: 0 @wcfGapLarge;
+		}
+	}
+}
+
+/* todo: missing doc */
+.editableItemList ul li {
+	cursor: pointer;
+	margin-left: @wcfGapTiny;
+	
+	&:first-child {
+		margin-left: 0;
+	}
+}
+
+/* todo */
+select > option {
+	/* Fixes weird firefox bug */
+	display: block !important;
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/forms.less b/wcfsetup/install/files/style/forms.less
deleted file mode 100644
index 7ffb944fce..0000000000
--- a/wcfsetup/install/files/style/forms.less
+++ /dev/null
@@ -1,224 +0,0 @@
-/* ############## Fieldsets ############## */
-fieldset {
-	padding-top: @wcfGapMedium;
-	
-	legend {
-		border-bottom: 1px solid @wcfContainerBorderColor;
-		color: @wcfDimmedColor;
-		font-family: @wcfHeadlineFontFamily;
-		font-size: @wcfSubHeadlineFontSize;
-		font-weight: bold;
-		width: 100%;
-		padding-bottom: @wcfGapTiny;
-		
-		.textShadow(@wcfContainerBackgroundColor);
-		
-		+ small {
-			top: -7px;
-			position: relative;
-		}
-	}
-	
-	> dl:not(:first-of-type) {
-		margin-top: @wcfGapSmall;
-	}
-	
-	&:not(:first-of-type) {
-		margin-top: @wcfGapMedium;
-	}
-	
-	/* definition list */
-	dl {
-		position: relative;
-		
-		.clearfix();
-		
-		> dd:not(:first-of-type), > dt:not(:first-of-type) {
-			margin-top: @wcfGapSmall;
-		}
-		
-		> dt {
-			color: @wcfLabelColor;
-			float: left;
-			text-align: right;
-			width: 230px;
-			
-			> label {
-				display: block;
-			}
-			
-			/* Reversed (flips the label aside the checkbox or radio button) - 
-				use only when automatically generating checkboxes or radio-buttons! */
-			&.reversed {
-				left: 270px;
-				margin-top: 2px;
-				position: absolute;
-				text-align: left;
-				width: auto;
-				
-				~ dd > input[type='checkbox'], ~ dd > input[type='radio'] {
-					margin-left: 0;
-				}
-			}
-		}
-		
-		> dd {
-			margin-left: 250px;
-			
-			> small {
-				color: @wcfDimmedColor;
-				display: block;
-				margin-top: 2px;
-			}
-			
-			> label {
-				color: @wcfLabelColor;
-				display: block;
-				
-				> input[type='checkbox'], > input[type='radio'] {
-					margin: 2px 2px 2px 0;
-				}
-			}
-			
-			> input[type='checkbox'], > input[type='radio'] {
-				~ small {
-					margin-left: 21px;
-				}
-			}
-			
-			&:not(.floated) {
-				> label ~ small {
-					margin-left: 21px;
-				}
-			}
-			
-			&.floated {
-				> label {
-					display: inline-block;
-					margin-right: @wcfGapSmall;
-				}
-			}
-			
-			> input, textarea, select {
-				+ label {
-					margin-top: 2px;
-				}
-			}
-		}
-		
-		/* wide */
-		&.wide {
-			> dt {
-				display: none;
-			}
-			
-			> dd {
-				margin-left: 0;
-			}
-		}
-		
-		/* disabled state */
-		&.disabled {
-			> dt, > dd > label {
-				color: @wcfDimmedColor;
-			}
-		}
-	}
-}
-
-/* Special -> Sidebar */
-.sidebar {
-	fieldset {
-		> dl {
-			> dt {
-				text-align: left;
-				float: none;
-				width: auto;
-			}
-			
-			> dd {
-				margin-top: 2px;
-				margin-left: 0;
-				margin-bottom: @wcfGapMedium;
-			}
-		}
-	}
-}
-
-/* Structure */
-.formSubmit {
-	margin-top: @wcfGapMedium;
-	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;
-}
-
-/* todo: smiley list */
-#smilies > ul > li {
-	display: inline;
-}
-
-/* element list with checkboxes */
-.structuredList {
-	background-color: @wcfContainerBackgroundColor;
-	
-	li {
-		padding: @wcfGapTiny @wcfGapSmall;
-		text-align: right;
-
-		&:hover {
-			background-color: @wcfButtonHoverBackgroundColor;
-		}
-		
-		&:first-child {
-			border-radius: @wcfContainerBorderRadius @wcfContainerBorderRadius 0 0;
-		}
-		
-		&:last-child {
-			border-radius: 0 0 @wcfContainerBorderRadius @wcfContainerBorderRadius;
-		}
-		
-		&.category {
-			background-color: @wcfNavigationBackgroundColor;
-			
-			&:hover {
-				background-color: @wcfButtonHoverBackgroundColor;
-			}
-		}
-		
-		span {
-			float: left;
-		}
-		
-		label {
-			cursor: pointer;
-			margin: 0 @wcfGapSmall;
-			padding: 0 @wcfGapLarge;
-		}
-	}
-}
-
-.editableItemList ul li {
-	cursor: pointer;
-	margin-left: @wcfGapTiny;
-	
-	&:first-child {
-		margin-left: 0;
-	}
-}
-
-/* todo */
-select > option {
-	/* Fixes weird firefox bug */
-	display: block !important;
-}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/global.less b/wcfsetup/install/files/style/global.less
new file mode 100644
index 0000000000..73660bfdba
--- /dev/null
+++ b/wcfsetup/install/files/style/global.less
@@ -0,0 +1,235 @@
+/* ### globals ### */
+body {
+	background-color: @wcfPageBackgroundColor;
+	color: @wcfPageColor;
+	font-family: @wcfBaseFontFamily;
+	font-size: @wcfBaseFontSize;
+	line-height: @wcfBaseLineHeight;
+}
+
+small {
+	font-size: @wcfSmallFontSize;
+}
+
+img {
+	vertical-align: middle;
+	
+	&.disabled {
+		opacity: .3;
+	}
+}
+
+a {
+	color: @wcfLinkColor;
+	cursor: pointer;
+	text-decoration: none;
+		
+	&:hover {
+		color: @wcfLinkHoverColor;
+		text-decoration: underline;
+	}
+}
+
+.invisible {
+	display: none;
+}
+
+.marginTop {
+	margin-top: @wcfGapMedium;
+}
+
+/* icons */
+.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); }
+
+.iconFlag {
+	height: 15px;
+	width: 24px;
+}
+
+.framed {
+	> img  {
+		background-color: @wcfContentBackgroundColor;
+		border: 1px solid @wcfContainerBorderColor;
+		padding: 1px;
+	}
+}
+
+/* balloon tooltips */
+.balloonTooltip {
+	background-color: @wcfTooltipBackgroundColor;
+	color: @wcfTooltipColor;
+	font-size: .85em;
+	max-width: 300px;
+	padding: 5px 10px 7px;
+	position: absolute;
+	z-index: 800;
+	
+	.borderRadius(6px);
+	.boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px); 
+	
+	.pointer {
+		border-color: @wcfTooltipBackgroundColor transparent;
+		border-style: solid;
+		border-width: 0 5px 5px;
+		left: 50%;
+		position: absolute;
+		top: -5px;
+	}
+}
+
+/* popover */
+.popover {
+	background-color: rgba(0, 0, 0, .4);
+	background-image: url(../icon/spinner.svg);
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: 32px;
+	max-width: 450px;
+	min-height: 32px;
+	min-width: 150px;
+	padding: @wcfGapSmall;
+	position: absolute;
+	vertical-align: middle;
+	z-index: 320;
+	
+	.borderRadius(6px);
+	.boxShadow(0, 1px, rgba(0, 0, 0, .3), 7px);
+	
+	&:after {
+		border: 10px solid transparent;
+		content: "";
+		display: inline-block;
+		position: absolute;
+		z-index: 100;
+	}
+	
+	&.top:after {
+		border-bottom-width: 0;
+		border-top-color: rgba(0, 0, 0, .4);
+		bottom: -10px;
+	}
+	
+	&.bottom:after {
+		border-bottom-color: rgba(0, 0, 0, .4);
+		border-top-width: 0;
+		top: -10px;
+	}
+	
+	&.right:after {
+		left: 10px;
+	}
+	
+	&.left:after {
+		right: 10px;
+	}
+}
+
+.popoverContent {
+	background-color: @wcfContainerBackgroundColor;
+	color: @wcfColor;
+	opacity: 0;
+	padding: @wcfGapSmall @wcfGapMedium;
+	
+	.borderRadius(6px);
+}
+
+/* ### badges ### */
+// sets default badge shadows depending on background color
+.badgeShadow(@backgroundColor) when (lightness(@backgroundColor) >= 50%) {
+	box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, .8);
+}
+.badgeShadow(@backgroundColor) when (lightness(@backgroundColor) < 50%) {
+	box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, .8);
+}
+
+/* default values */
+.badge {
+	background-color: @wcfColor;
+	border-radius: 13px;
+	color: @wcfContentBackgroundColor;
+	display: inline-block;
+	font-size: @wcfSmallFontSize;
+	font-weight: normal !important;
+	padding: 1px 8px 2px;
+	position: relative;
+	text-shadow: none !important;
+	white-space: nowrap;
+	
+	.badgeShadow(@wcfContentBackgroundColor);
+	
+	/* colors */
+	&.badgeUpdate {
+		background-color: @wcfTabularBoxBackgroundColor;
+		color: @wcfTabularBoxColor;
+	}
+	
+	&.badgeGreen {
+		background-color: @wcfSuccessBackgroundColor;
+		color: @wcfSuccessColor;
+	}
+	
+	&.badgeRed {
+		background-color: @wcfErrorBackgroundColor;
+		color: @wcfErrorColor;
+	}
+	
+	&.badgeInverse {
+		background-color: @wcfTabularBoxColor;
+		color: @wcfTabularBoxBackgroundColor;
+		
+		.badgeShadow(@wcfTabularBoxBackgroundColor);
+	}
+}
+
+a.badge:hover {
+	color: @wcfContentBackgroundColor;
+	text-decoration: none;
+}
+
+/* special */
+.containerHeadline > h1 > .badge {
+	font-size: 70%;
+	top: -1px;
+}
+
+.boxHeadline > hgroup > h1 .badge {
+	font-size: 50%;
+	top: -3px;
+}
+
+.mainMenu > ul > li > a > .badge {
+	font-size: 70%;
+	top: -1px;
+}
+
+.mainMenu > ul > li.active > a > .badge {
+	font-size: 65%;
+	top: -2px;
+}
+
+.tabularBoxTitle > hgroup > h1 > .badge {
+	font-size: 70%;
+	top: -1px;
+}
+
+fieldset > legend > .badge {
+	font-size: 50%;
+	top: -3px;
+}
+
+
+/* todo */
+.dropdownMenu {
+display: none;
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/imageViewer.less b/wcfsetup/install/files/style/imageViewer.less
index be6d2e9262..d9fce3a17b 100644
--- a/wcfsetup/install/files/style/imageViewer.less
+++ b/wcfsetup/install/files/style/imageViewer.less
@@ -30,7 +30,7 @@
 	}
 	
 	&:hover > span {
-		.boxShadow(0, 0, @wcfButtonHoverBorderColor, 20px);
+		.boxShadow(0, 0, @wcfButtonHoverBorderColor, 20px); /* todo */
 	}
 }
 
diff --git a/wcfsetup/install/files/style/inputs.less b/wcfsetup/install/files/style/inputs.less
deleted file mode 100644
index 4f7276c6a6..0000000000
--- a/wcfsetup/install/files/style/inputs.less
+++ /dev/null
@@ -1,184 +0,0 @@
-/* -- -- -- 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;
-	margin: 0;
-}
-
-select {
-	padding: 1px 1px 1px 3px;
-	margin: 0;
-}
-
-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, 10%);
-	border-radius: 3px;
-	border-style: solid;
-	border-width: 1px;
-	color: @wcfInputColor;
-	
-	.boxShadowInset(0, 1px, rgba(0, 0, 0, .1));
-	.transition(~"background-color, border, box-shadow", .2s);
-}
-
-/* hover */
-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;
-}
-
-/* active / focus */
-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: 0;
-	
-	.boxShadowNative(~"0 0 5px" fade(@wcfInputHoverBorderColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
-}
-
-/* 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;
-	border-color: @wcfInputBorderColor;
-	
-	.boxShadowInset(0, 1px, rgba(0, 0, 0, .1));
-}
-
-/* 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: transparent;
-	border-color: @wcfInputBorderColor;
-	color: @wcfDimmedColor;
-	
-	.boxShadowInset(0, 1px, rgba(0, 0, 0, .1));
-}
-
-/* error state */
-.formError input[type='text'],
-.formError input[type='search'],
-.formError input[type='email'],
-.formError input[type='url'],
-.formError input[type='password'],
-.formError textarea {
-	border-color: @wcfErrorBackgroundColor;
-	
-	.boxShadowNative(~"0 0 5px" fade(@wcfErrorBackgroundColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
-}
-
-/* success state */
-.formSuccess input[type='text'],
-.formSuccess input[type='search'],
-.formSuccess input[type='email'],
-.formSuccess input[type='url'],
-.formSuccess input[type='password'],
-.formSuccess textarea {
-	border-color: @wcfSuccessBackgroundColor;
-	
-	.boxShadowNative(~"0 0 5px" fade(@wcfSuccessBackgroundColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
-}
-
-/* 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%;
-}
-
-/* upload button */
-.uploadButton {
-	overflow: hidden;
-	position: relative;
-	
-	input {
-		left: 0;
-		opacity: 0;
-		position: absolute;
-		top: 0;
-	}
-}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/label.less b/wcfsetup/install/files/style/label.less
deleted file mode 100644
index 5dbcfdc837..0000000000
--- a/wcfsetup/install/files/style/label.less
+++ /dev/null
@@ -1,117 +0,0 @@
-/* #### Labels #### */
-.badge.label {
-	font-size: 90%;
-	color: #fff;
-	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-	
-	/* default label colors */
-	&.black {
-		background-color: #333;
-	}
-	
-	&.brown {
-		background-color: #c63;
-	}
-	
-	&.red {
-		background-color: #c00;
-	}
-	
-	&.orange {
-		background-color: #f90;
-	}
-	
-	&.yellow {
-		background-color: #ff0;
-		color: #333;
-		text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
-	}
-	
-	&.green {
-		background-color: #0c0;
-	}
-	
-	&.blue {
-		background-color: #09f;
-	}
-	
-	&.purple {
-		background-color: #c0f;
-	}
-	
-	&.pink {
-		background-color: #f0c;
-	}
-}
-
-/* hover */
-a.badge.label:hover {
-	text-decoration: none;
-	
-	&.black {
-		background-color: #000;
-	}
-	
-	&.brown {
-		background-color: #930;
-	}
-	
-	&.red {
-		background-color: #900;
-	}
-	
-	&.orange {
-		background-color: #f60;
-	}
-	
-	&.yellow {
-		background-color: #cc0;
-	}
-	
-	&.green {
-		background-color: #090;
-	}
-	
-	&.blue {
-		background-color: #06c;
-	}
-	
-	&.purple {
-		background-color: #90c;
-	}
-	
-	&.pink {
-		background-color: #c09;
-	}
-}
-
-/* label list */
-.labelList, .labelList > li {
-	display: inline-block; 
-}
-
-/* ACP label list */
-#labelList li {
-	float: left;
-	margin-right: 1%;
-	width: 30%;
-	
-	&.labelCustomClass {
-		position: relative;
-		
-		input[type='radio'] {
-			left: 0;
-			position: absolute;
-			top: 0;
-		}
-		
-		span {
-			display: block;
-			margin-left: 24px;
-		}
-	}
-}
-
-.labelChooser > .dropdownToggle > span {
-	cursor: pointer;
-}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index 2478b94a9e..fd51997e71 100644
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -1,34 +1,14 @@
-/* general definitions */
-body {
-	background-color: darken(@wcfPageBackgroundColor, 20%);
-	background-repeat: repeat-x;
-	color: @wcfPageColor;
-	font-family: @wcfBaseFontFamily;
-	font-size: @wcfBaseFontSize;
-	line-height: @wcfBaseLineHeight;
-	
-	background-image: url(../../images/header.png), -webkit-linear-gradient(@wcfPageBackgroundColor, darken(@wcfPageBackgroundColor, 20%) 200px);
-	background-image: url(../../images/header.png), -moz-linear-gradient(@wcfPageBackgroundColor, darken(@wcfPageBackgroundColor, 20%) 200px);
-	background-image: url(../../images/header.png), -o-linear-gradient(@wcfPageBackgroundColor, darken(@wcfPageBackgroundColor, 20%) 200px);
-	background-image: url(../../images/header.png), -ms-linear-gradient(@wcfPageBackgroundColor, darken(@wcfPageBackgroundColor, 20%) 200px);
-	background-image: url(../../images/header.png), linear-gradient(@wcfPageBackgroundColor, darken(@wcfPageBackgroundColor, 20%) 200px); 
-}
-
-a {
-	color: @wcfLinkColor;
-	cursor: pointer;
-	text-decoration: none;
-		
-	&:hover {
-		color: @wcfLinkHoverColor;
-		text-decoration: underline;
-	}
+/* ### layout globals ### */
+.layoutFluid {
+	padding: 0 @wcfLayoutFluidGap;
 }
 
-:focus {
-	/*outline: 0;*/
+.layoutFixed {
+	margin: 0 auto;
+	width: @wcfLayoutFixedWidth;
 }
 
+/* ### header ### */
 #pageHeader {
 	margin-top: 57px;
 	z-index: 100;
@@ -40,36 +20,323 @@ a {
 	visibility: hidden;
 }
 
-small {
-	font-size: @wcfSmallFontSize;
+/* user panel */
+.userPanel {
+	background-color: @wcfUserPanelBackgroundColor;
+	border-bottom: 1px solid rgba(0, 0, 0, .1);
+	height: 40px;
+	left: 0;
+	position: fixed;
+	top: 0;
+	right: 0;
+	z-index: 200;
+
+	> div {
+		/* todo */
+		> ul.userPanelItems {
+			float: left;
+			
+			.clearfix();
+			
+			> li {
+				float: left;
+				
+				> a,
+				> div:not(.dropdownMenu) {
+					color: @wcfUserPanelColor;
+					display: block;
+					height: 20px;
+					padding: 10px 8px;
+					position: relative;
+					
+					.textShadow(@wcfUserPanelBackgroundColor);
+					.transition(background-color, .2s);
+					
+					&:hover {
+						background-color: rgba(0, 0, 0, .4);
+						color: @wcfUserPanelHoverColor;
+						text-decoration: none;
+					}
+					
+					> .badge.badgeInverse {
+						background-color: rgb(204, 0, 0);
+						color: white;
+						padding: 0 6px 1px;
+						position: absolute;
+						bottom: 4px;
+						left: 24px;
+						z-index: 300;
+					}
+				}
+				
+				> .framed > img {
+					padding: 0px;
+					margin-top: -2px;
+					margin-bottom: -2px;
+				}
+			}
+		}
+	
+		> .searchBar {
+			float: right;
+			padding: 6px 0;
+			
+			> form input[type="search"] {
+				background-color: rgba(0, 0, 0, .5);
+				background-image: url("../icon/searchInverse.svg");
+				background-repeat: no-repeat;
+				background-position: 7px 5px;
+				border: 1px solid rgba(0, 0, 0, .9);
+				border-radius: 30px;
+				color: @wcfUserPanelColor;
+				padding: 6px 12px 5px 26px;
+				width: 180px;
+				-webkit-appearance: textfield;
+				
+				.boxShadowNative(~"inset 0px 1px 3px rgba(0, 0, 0, .9), 0px 1px 0px rgba(255, 255, 255, .1)");
+				.textShadow(@wcfUserPanelBackgroundColor);
+			}
+		}
+	}
 }
 
-.invisible {
-	display: none;
+/* header logo */
+.logo {
+	a {
+		display: block;
+		min-height: 100px;
+		
+		&:hover {
+			text-decoration: none;
+		}
+		
+		h1 {
+			color: @wcfPageLinkHoverColor;
+			float: right;
+			font-size: 160%;
+			padding-top: @wcfGapLarge;
+			
+			.textShadow(@wcfPageBackgroundColor);
+		}
+	}
 }
 
-.marginTop {
-	margin-top: @wcfGapMedium;
+/* main menu */
+/* todo */
+.mainMenu {
+	> ul {
+		background-color: @wcfMainMenuBackgroundColor;
+		border-bottom: 1px solid @wcfContainerBorderColor;
+		
+		&:after {
+			clear: both;
+			content: '';
+			display: block;
+		}
+		
+		> li {
+			float: left;
+			font-size: @wcfSubHeadlineFontSize;
+			
+			margin-bottom: -1px;
+			border-right: 1px solid @wcfContainerBorderColor;
+			
+			> a {
+				color: @wcfPageColor;
+				display: inline-block;
+				padding: 11px 35px;
+				font-weight: bold;
+				
+				&:hover {
+					border-bottom: 1px solid @wcfContainerBorderColor;
+					background-color: #f4f4f4;
+					text-decoration: none;
+				}
+			}
+			
+			&.active {
+				> a {
+					border-bottom: 1px solid #fff;
+					background-color: #fff;
+					color: #000;
+				}
+			}
+		}
+	}
+}
+
+/* navigation */
+.navigation {
+	padding: 0 7px;
+	
+	> ul {
+		display: inline-block;
+		
+		&.navigationIcons {
+			float: right;
+			
+			> li {
+				float: right;
+				padding: 0 3px;
+				
+				&.separator {
+					border-right: 1px dotted @wcfContainerBorderColor;
+				}
+				
+				> *:not(script) {
+					padding: 3px;
+					display: inline-block;
+				}
+			}
+		}
+		
+		&:not(.navigationIcons) {
+			> li {
+				display: inline-block;
+				margin-top: 5px;
+				
+				> a {
+					padding: 2px 4px;
+					
+					&:hover {
+						text-decoration: none;
+					}
+				}
+			}
+		}
+	}
 }
 
-img {
-	vertical-align: middle !important;
+.navigationHeader {
+	background-color: @wcfNavigationHeaderBackgroundColor;
+	border-bottom: 1px solid @wcfContainerBorderColor;
+}
+	
+.navigationFooter {
+	background-color: @wcfNavigationFooterBackgroundColor;
+	border-top: 1px solid @wcfContainerBorderColor;
+	border-radius: 0 0 @wcfContainerBorderRadius @wcfContainerBorderRadius; 
 }
 
-::selection {
-	text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
-	color: #300;
-	background-color: rgba(255, 170, 34, .7);
+/* ### footer ### */
+.footer {
+	padding-bottom: @wcfGapMedium;
+	z-index: 100;
+	
+	.footerContent {
+		text-align: center;
+		
+		a {
+			color: @wcfPageLinkColor;
+			
+			.textShadow(@wcfPageBackgroundColor);
+			.transition(color, .1s);
+			
+			&:hover {
+				color: @wcfPageLinkHoverColor;
+				text-decoration: none;
+			}
+		}
+	}
+}
+
+/* ### content ### */
+#main {
+	z-index: 110;
+	
+	> div {
+		background-color: @wcfSidebarBackgroundColor;
+		
+		> .sidebar {
+			width: 300px;
+			z-index: 120;
+		}
+		
+		> .content {
+			background-color: @wcfContentBackgroundColor;
+			min-height: 100px;
+			padding: @wcfGapSmall @wcfGapLarge * 2 - @wcfGapTiny @wcfGapLarge;
+			z-index: 130;
+		}
+	}
+	
+	&.not(.sidebarOrientationLeft):not(.sidebarOrientationRight) {
+		.sidebar {
+			display: none;
+		}
+	}
+	
+	&.sidebarOrientationLeft {
+		.content {
+			margin-left: 300px;
+		}
+		
+		.sidebar {
+			float: left;
+		}
+	}
+	
+	&.sidebarOrientationRight {
+		.content {
+			margin-right: 300px;
+		}
+		
+		.sidebar {
+			float: right;
+		}
+	}
 }
 
 /* basic layout elements */
-.layoutFluid {
-	padding: 0 @wcfLayoutFluidGap;
+.boxHeadline {
+	margin-top: @wcfGapMedium;
+	
+	hgroup {
+		> h1 {
+			color: @wcfHeadlineColor;
+			font-family: @wcfHeadlineFontFamily;
+			font-size: @wcfHeadlineFontSize;
+			font-weight: bold;
+			
+			.textShadow(@wcfContentBackgroundColor);
+			
+			a {
+				color: @wcfHeadlineColor;
+				text-decoration: none;
+			}
+		}
+		
+		> h2, h3 {
+			color: @wcfDimmedColor;
+			font-size: @wcfSmallFontSize;
+		}
+	}
 }
 
-.layoutFixed {
-	margin: 0 auto;
-	width: @wcfLayoutFixedWidth;
+.contentNavigation {
+	display: table;
+	width: 100%;
+	
+	> * {
+		margin-top: @wcfGapMedium;
+	}
+	
+	nav ul {
+		text-align: left;
+	}
+	
+	nav > ul {
+		float: left;
+		
+		&:not(.pageNavigation) {
+			float: right;
+			text-align: right;
+		}
+		
+		li {
+			display: inline;
+		}
+	}
 }
 
 .container {
@@ -83,6 +350,26 @@ img {
 	padding: @wcfGapMedium @wcfGapLarge @wcfGapMedium;
 }
 
+.containerHeadline {
+	margin-bottom: @wcfGapSmall;
+	
+	> h1 {
+		font-size: @wcfTitleFontSize;
+		font-weight: bold;
+		
+		> small {
+			color: @wcfDimmedColor;
+			font-weight: normal;
+			text-shadow: none;
+			font-size: 70%;
+		}
+	}
+	
+	> h1, > h1 > a {
+		.textShadow(@wcfContainerBackgroundColor);
+	}
+}
+
 .containerList {
 	> li {
 		padding: @wcfGapMedium @wcfGapLarge;
@@ -113,26 +400,6 @@ img {
 	}
 }
 
-.containerHeadline {
-	margin-bottom: @wcfGapSmall;
-	
-	> h1 {
-		font-size: @wcfTitleFontSize;
-		font-weight: bold;
-		
-		> 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) */
@@ -160,90 +427,415 @@ img {
 .box128 { .box(128px, 14px); }
 .box256 { .box(256px, 21px); }
 
-/*
-	language selection
-*/
-.boxFlag {
-	cursor: pointer;
-	min-height: 23px;
-	padding: 0 @wcfGapTiny;
-	vertical-align: middle;
+/* bread crumbs */
+.breadcrumbs {
+	box-sizing: border-box;
+	display: block;
+	overflow: hidden;
+	position: relative;
+	text-align: left;
 	
-	> div {
-		float: left;
+	> ul {
+		> li {
+			float: left;
+			font-size: @wcfSmallFontSize;
+			list-style: none;
+			max-width: 30%;
+			position: relative;
+			
+			.transition(max-width, .2s);
+			
+			&:hover {
+				max-width: 100%;
+			}
+			
+			> a {
+				color: @wcfColor;
+				display: inline-block;
+				overflow: hidden;
+				padding: 5px 1px 5px 5px;
+				text-decoration: none;
+				white-space: nowrap;
+				
+				.textShadow(@wcfContentBackgroundColor);
+			}
+			
+			&:first-child > a {
+				background-image: url('../icon/home.svg');
+				background-position: 1px center;
+				background-repeat: no-repeat;
+				background-size: 16px;
+				padding-left: 21px;
+			}
+		}
 	}
+}
+
+
+/* tab menus */
+.tabMenu {
+	display: block;
+	margin-top: @wcfGapLarge;
+	position: relative;
+	text-align: left;
 	
-	> hgroup {
-		margin-left: 34px;
-		min-height: 23px;
+	> ul {
+		background-color: @wcfContainerAccentBackgroundColor;
+		border-color: @wcfContainerBorderColor;
+		border-style: solid;
+		border-width: 1px 1px 0 1px;
+		display: inline-block;
+		padding: 0 5px 3px 5px;
+		position: relative;
+		white-space: nowrap;
 		
-		h1 {
-			padding-top: 2px;
+		.textShadow(@wcfContainerBackgroundColor);
+		
+		> li {
+			display: inline-block;
+			white-space: nowrap;
+			
+			&.ui-state-active {
+				margin-right: -7px;
+				margin-left: -6px;
+				
+				> a {
+					background-color: @wcfContainerBackgroundColor;
+					border-color: @wcfContainerBorderColor @wcfContainerBorderColor @wcfContainerBackgroundColor;
+					border-style: solid;
+					border-width: 1px;
+					color: @wcfLinkColor;
+					font-weight: bold;
+					font-size: 130%;
+					margin-top: -10px;
+					padding: 10px 15px 5px;
+					z-index: 30;
+				}
+			}
+			
+			> 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;
+				}
+			}
 		}
 	}
 }
 
-.boxHeadline {
-	margin-top: @wcfGapMedium;
+.tabMenu > ul > li.ui-state-active > a,
+.tabMenu > ul > li.ui-state-disabled > a,
+.tabMenu > ul > li.ui-state-processing > a {
+	cursor: default;
+}
+
+.tabMenuContent {
+	border-top-left-radius: 0;
+	display: block;
+	margin-top: -1px;
+	min-height: @wcfGapLarge;
+	position: relative;
+	z-index: 20; /* Prevents border overlay during transition */
+}
+
+/* todo */
+.tabMenuContainer > .menu {
+	border-bottom: 1px solid @wcfContainerBorderColor;
+	margin: -@wcfGapMedium -@wcfGapLarge @wcfGapSmall -@wcfGapLarge; /* reverse paddings from .containerPadding */
+	padding: @wcfGapSmall 0;
+	text-align: center;
 	
-	hgroup {
-		> h1 {
-			color: @wcfHeadlineColor;
-			font-family: @wcfHeadlineFontFamily;
-			font-size: @wcfHeadlineFontSize;
-			font-weight: bold;
+	.borderRadius(@wcfContainerBorderRadius, 0);
+	.linearGradient(rgba(0, 0, 0, 0), @wcfContainerBackgroundColor, @wcfContainerAccentBackgroundColor);
+	
+	ul{
+		display: inline-block;
+		
+		li {
+			display: inline-block;
 			
-			.textShadow(@wcfContentBackgroundColor);
+			&.ui-state-active a,
+			&.ui-state-active a:hover {
+				background-color: @wcfButtonPrimaryBackgroundColor;
+				border-color: @wcfButtonPrimaryBorderColor;
+				color: @wcfButtonPrimaryColor;
+				cursor: default;
+			}
 			
 			a {
-				color: @wcfHeadlineColor;
-				text-decoration: none;
+				background-color: @wcfContainerBackgroundColor;
+				border: 1px solid @wcfContainerBorderColor;
+				color: @wcfButtonColor;
+				display: block;
+				font-size: 85%;
+				
+				padding: @wcfGapTiny @wcfGapSmall;
+				
+				.borderRadius(30px);
+				
+				&:hover {
+					background-color: @wcfButtonHoverBackgroundColor;
+					border-color: @wcfButtonHoverBorderColor;
+					color: @wcfButtonHoverColor;
+					text-decoration: none;
+				}
 			}
 		}
-		
-		> h2, h3 {
-			color: @wcfDimmedColor;
-			font-size: @wcfSmallFontSize;
-		}
 	}
 }
 
-.icon(@imageSize) {
-	.square(@imageSize);
+.containerPadding > .tabMenuContainer:last-child {
+	margin-bottom: @wcfGapSmall;
 }
 
-.icon16 { .icon(16px); }
-.icon24 { .icon(24px); }
-.icon32 { .icon(32px); }
-.icon48 { .icon(48px); }
-.icon64 { .icon(64px); }
-.icon96 { .icon(96px); }
-.icon128 { .icon(128px); }
-.icon256 { .icon(256px); }
+/* ToDo: 2x hidden? */
+.ui-tabs .ui-tabs-hide {
+	display: none !important;
+}
 
-.iconFlag {
-	height: 15px;
-	width: 24px;
+.ui-helper-hidden {
+	display: none;
 }
 
-dl.dataList {
-	dt {
-		float: left;
-		overflow: hidden;
-		text-align: right;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		width: 35%;
+.ui-helper-hidden-accessible {
+	position: absolute !important;
+	clip: rect(1px 1px 1px 1px);
+	clip: rect(1px,1px,1px,1px);
+}
+
+/* ### tabular boxes ### */
+.tabularBox {
+	background-color: @wcfTabularBoxBackgroundColor;
+	border: 1px solid @wcfContainerBorderColor;
+	
+	.borderRadius();
+}
+
+.tabularBoxTitle > hgroup {
+	color: @wcfTabularBoxColor;
+	padding: 5px 7px;
+
+	> h1 {
+		font-size: @wcfTitleFontSize;
+		font-weight: bold;
+		
+		.textShadow(@wcfTabularBoxBackgroundColor);
+
+		> a {
+			color: @wcfTabularBoxColor;
+			
+			&:hover {
+				color: @wcfTabularBoxHoverColor;
+				text-decoration: none;
+			}
+		}
 	}
+}
+
+.tabularBox:not(.tabularBoxTitle) > .table {
+	 > thead > tr:first-child > th {
+		&:first-child {
+			.borderRadius(@wcfContainerBorderRadius - 2, 0, 0, 0);
+		}
+		
+		&:last-child {
+			.borderRadius(0, @wcfContainerBorderRadius - 2, 0, 0);
+		}
+	}
+}
+
+.table {
+	border-spacing: 0;
+	width: 100%;
 	
-	dd {
+	/* cells */
+	th,
+	td {
+		padding: @wcfGapSmall;
 		text-align: left;
-		margin-left: 38%;
+		vertical-align: middle;
+		
+		> label {
+			cursor: pointer;
+			display: block;
+			margin: -@wcfGapSmall;
+			padding: @wcfGapSmall;
+			
+			> input[type="checkbox"] {
+				margin: 0 3px;
+			}
+		}
+	}
+	
+	/* headline */
+	th {
+		background-color: rgba(0, 0, 0, .4);
+		border-right: 1px solid rgba(0, 0, 0, .2);
+		color: @wcfTabularBoxColor;
+		font-size: @wcfSmallFontSize;
+		font-weight: bold;
+		white-space: nowrap;
+		
+		.textShadow(@wcfTabularBoxBackgroundColor);
+		
+		> a {
+			color: @wcfTabularBoxColor;
+			display: block;
+			margin: -@wcfGapSmall;
+			
+			&:hover {
+				text-decoration: none;
+			}
+			
+			> img {
+				margin: -5px 0;
+			}
+		}
+		
+		&:hover > a,
+		&.active > a {
+			background-color: rgba(0, 0, 0, .1);
+			color: @wcfTabularBoxHoverColor;
+			
+			.boxShadowInset(0, 10px, rgba(0, 0, 0, .1), 10px, -10px);
+		}
+		
+		> * {
+			padding: @wcfGapSmall;
+		}
+	}
+	
+	/* content */
+	td {
+		background-color: @wcfContainerBackgroundColor;
+		
+		.transition(background, .1s);
+		
+		&.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: @wcfSmallFontSize;
+			text-align: right;
+			width: 1% !important;
+			white-space: nowrap;
+		}
+		
+		&.columnURL, &.columnSmallText {
+			font-size: @wcfSmallFontSize;
+			text-align: left;
+		}
+	}
+	
+	/* striped */
+	> tbody {
+		> tr:nth-child(even) > td {
+			background-color: @wcfContainerAccentBackgroundColor;
+		}
+	}
+	
+	/* hover */
+	> tbody {
+		> tr {
+			&:not(:last-child) {
+				> td {
+					border-bottom: 1px solid rgba(255, 255, 255, .3);
+				}
+			}
+			
+			&:hover {
+				> td {
+					background-color: @wcfContainerHoverBackgroundColor;
+				}
+			}
+			
+			> td:not(:last-child) {
+				border-right: 1px solid rgba(255, 255, 255, .3);
+			}
+			
+			> td.focus {
+				background-color: @wcfContainerHoverBackgroundColor;
+			}
+			
+			> td.left {
+				text-align: left;
+			}
+			
+			> td.right {
+				text-align: right;
+			}
+		}
+	}
+	
+	.statusDisplay {
+		padding: 1px 0;
+		float: right;
+		
+		.statusIcons {
+			float: right;
+			margin-left: @wcfGapSmall;
+			
+			li {
+				display: inline-block;
+			}
+		}
 	}
 }
 
+.tabularBox .table {
+	tbody tr:last-child td {
+		&:first-child {
+			.borderRadius(0, 0, 0, @wcfContainerBorderRadius - 2);
+		}
+		
+		&:last-child {
+			.borderRadius(0, 0, @wcfContainerBorderRadius - 2, 0);
+		}
+	}
+}
+
+/* ### definition lists ### */
 dl.statsDataList {
-	dt {
+	> dt {
 		color: @wcfDimmedColor;
 		display: block;
 		float: right;
@@ -254,13 +846,13 @@ dl.statsDataList {
 		white-space: nowrap;
 		width: 62%;
 		
-		a {
+		> a {
 			color: @wcfDimmedColor;
 			text-decoration: none;
 		}
 	}
 	
-	dd {
+	> dd {
 		color: @wcfColor;
 		float: left;
 		font-weight: bold;
@@ -271,7 +863,7 @@ dl.statsDataList {
 		white-space: nowrap;
 		width: 35%;
 		
-		a {
+		> a {
 			color: @wcfColor;
 			text-decoration: none;
 		}
@@ -288,13 +880,13 @@ dl.inlineDataList {
 	overflow: hidden;
 	white-space: nowrap;
 	
-	dd {
+	> dd {
 		display: inline-block;
 		margin: 0 4px 0 0;
 		padding: 0;
 	}
 	
-	dt {
+	> dt {
 		color: @wcfDimmedColor;
 		display: inline-block;
 		margin: 0;
@@ -307,6 +899,22 @@ dl.inlineDataList {
 	}
 }
 
+dl.dataList {
+	dt {
+		float: left;
+		overflow: hidden;
+		text-align: right;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		width: 35%;
+	}
+	
+	dd {
+		text-align: left;
+		margin-left: 38%;
+	}
+}
+
 ul.dataList {
 	li {
 		display: inline-block;
@@ -317,62 +925,228 @@ ul.dataList {
 	}
 }
 
-.framed {
-	img  {
-		background-color: @wcfContentBackgroundColor;
-		border: 1px solid @wcfContainerBorderColor;
-		padding: 1px;
+/* ### page navigation ### */
+.contentNavigation .pageNavigation {
+	float: left;
+	margin: @wcfGapMedium + 5 0 3px;
+
+	ul li {
+		margin: 0 2px;
 	}
 }
 
-.contentOptions {
-	font-size: @wcfSmallFontSize;
-	position: relative;
-	
-	nav {
-		bottom: -2px;
-		opacity: 0;
-		position: absolute;
-		right: -22px;
-		text-align: right;
-		
-		.transition(opacity, .1s);
-
-		ul.smallButtons > li {
-			display: inline-block;
-			margin-left: -5px;
+.pageNavigation {
+	ul {
+		li {
+			float: left;
+			font-weight: bold;
+			margin: 0 1px;
+			min-width: 19px;
+			padding: 0;
+			text-align: center;
+			
+			&:not(.active):not(.disabled) {
+				cursor: pointer;
+			}
 			
-			&:first-child a.button {
-				border-top-left-radius: 14px;
+			&.disabled {
+				background-image: none !important;
+				border: 1px solid rgba(0, 0, 0, .1) !important;
+				cursor: not-allowed;
 			}
 			
-			&:last-child a.button {
-				border-bottom-right-radius: @wcfContainerBorderRadius;
+			&.skip {	
+				padding: 1px 0 1px;
+			}
+			
+			&:not(.disabled):hover a {
+				color: @wcfButtonHoverColor;
+			}
+			
+			&:not(.skip) a {
+				padding: 2px 1px;
+			}
+			
+			&.active, &.active:hover {
+				border: 1px solid darken(@wcfButtonColor, 5%);
+				color: lighten(@wcfButtonBackgroundColor, 5%);
+				padding: 2px 0;
+				
+				/* todo */
+				.linearGradient(@wcfButtonColor, darken(@wcfButtonColor, 10%), @wcfButtonColor 3px);
+				.textShadow(#000);
 			}
 			
-			a.button {
+			img {
+				height: 16px;
 				margin: 0;
-				padding-right: @wcfGapSmall;
+				width: 16px;
+			}
+			
+			a {
+				color: @wcfButtonColor;
+				display: block;
+				text-decoration: none;
 				
-				.borderRadius(0);
+				.textShadow(@wcfButtonBackgroundColor);
 			}
 		}
 	}
 }
 
-.applicationList:hover .contentOptions nav {
-	opacity: 1;
+.statusDisplay .pageNavigation {
+	font-size: @wcfSmallFontSize;
+	float: left;
+	margin-top: 2px;
+	
+	ul {
+		li {
+			min-width: 13px;
+			
+			&:not(.skip) a {
+				padding: 1px;
+			}
+		}
+	}
 }
 
-img.disabled {
-	opacity: .3;
+/* ### sidebar ### */
+.sidebar > fieldset:not(:last-child), .sidebar > div:not(:last-child) {
+	border-bottom: 1px solid @wcfContainerBorderColor;
+	margin-bottom: @wcfGapMedium;
 }
 
-/* -- -- -- Shadows -- -- --  */
-
-/* Shadows for boxes - do not use on small boxes! */
+.sidebar.collapsibleMenu > fieldset, .sidebar.collapsibleMenu > div {
+	border-bottom-width: 0;
+}
 
-.shadow {
-	//.boxShadow(0, 10px, rgba(0, 0, 0, .1), 10px, -10px);
-	//.boxShadow(0, 1px, rgba(0, 0, 0, .5), 5px, 0); // 
+.sidebar {
+	padding-top: @wcfGapLarge;
+	
+	fieldset {
+		padding: @wcfGapSmall @wcfGapMedium @wcfGapMedium;
+		margin-top: 0;
+		width: 300px - @wcfGapMedium * 2;
+		
+		> legend {
+			border-width: 0;
+			color: @wcfColor;
+			font-family: @wcfBaseFontFamily;
+			font-weight: normal;
+			font-size: 100%;
+			padding: 0;
+			text-transform: uppercase;
+				
+			.textShadow(@wcfSidebarBackgroundColor);
+			
+			> .badge {
+				float: right;
+			}
+			
+			> a {
+				color: @wcfColor;
+				text-decoration: none;
+			}
+		}
+		
+		&:after {
+			content: "";
+			height: 0;
+			display: block;
+			clear: both;
+		}
+		
+		.button.more {
+			margin: 5px 0 0;
+			float: right;
+		}
+		
+		nav {
+			margin: 0 -@wcfGapMedium 0;
+			
+			ul {
+				> li {
+					&.active {
+						background-color: @wcfContentBackgroundColor;
+						
+						> a {
+							font-weight: bold;
+						}
+					}
+					
+					&:hover:not(.active) {
+						background-color: @wcfContainerHoverBackgroundColor;
+					}
+					
+					> a {
+						color: @wcfLinkColor;
+						display: block;
+						padding: @wcfGapTiny @wcfGapMedium @wcfGapSmall @wcfGapLarge;
+						
+						&:hover {
+							text-decoration: none;
+						}
+					}
+				}
+			}
+		}
+		
+	}
+	
+	.sidebarBoxList > li:not(:last-child) {
+		margin-bottom: 7px;
+	}
+	
+	.sidebarBoxHeadline {
+		> h1 {
+			margin-bottom: 1px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			
+			.textShadow(@wcfSidebarBackgroundColor);
+			
+			a {
+				.textShadow(@wcfSidebarBackgroundColor);
+			}
+			
+			small {
+				text-shadow: none;
+			}
+		}
+	}
+	
+	.formSubmit {
+		margin-top: 0;
+	}
+	
+	&.collapsibleMenu {
+		legend {
+			background-image: url(../icon/arrowRightColored.svg);
+			background-position: 15px center;
+			background-repeat: no-repeat;
+			background-size: 16px;
+			color: @wcfLinkColor;
+			cursor: pointer;
+			font-weight: bold;
+			font-size: 130%;
+			padding-left: (@wcfGapLarge + 16px + @wcfGapTiny);
+			margin-left: -@wcfGapMedium;
+			text-transform: none;
+			
+			&.active {
+				background-image: url(../icon/arrowDownColored.svg);
+			}
+		}
+		
+		nav {
+			ul {
+				> li {
+					> a {
+						padding-left: (@wcfGapLarge + 16px + @wcfGapTiny);
+					}
+				}
+			}
+		}
+	}
 }
diff --git a/wcfsetup/install/files/style/like.less b/wcfsetup/install/files/style/like.less
deleted file mode 100644
index 06fafc0d29..0000000000
--- a/wcfsetup/install/files/style/like.less
+++ /dev/null
@@ -1,33 +0,0 @@
-/* ############## 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 */
-
-.likesWidget {
-	margin: 0 0 0 15px;
-}
-
-.likesWidget > ul {
-	float: right;
-	margin-right: 7px;
-	margin-left: 10px;
-}
-
-.likesWidget > ul > li {
-	text-align: right;
-	display: inline-block;
-}
-
-.likesWidget > ul > li:first-child {
-	margin-right: 2px;
-}
- 
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/logo.less b/wcfsetup/install/files/style/logo.less
deleted file mode 100644
index f113be0539..0000000000
--- a/wcfsetup/install/files/style/logo.less
+++ /dev/null
@@ -1,19 +0,0 @@
-.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
deleted file mode 100644
index 07b191c3f8..0000000000
--- a/wcfsetup/install/files/style/message.less
+++ /dev/null
@@ -1,453 +0,0 @@
-.message {
-	background-color: @wcfContainerHoverBackgroundColor;
-	border: 1px solid @wcfContainerBorderColor;
-	position: relative;
-	
-	.borderRadius();
-	
-	&:after {
-		clear: both;
-		content: '';
-		display: block;
-	}
-	
-	&:hover .contentOptions nav {
-			opacity: 1;
-	}
-	
-	&.messageDeleted {
-		background-color: @wcfErrorBackgroundColor;
-		
-		.messageSidebar {
-			color: @wcfErrorColor !important;
-			
-			a {
-				color: @wcfErrorColor !important;
-			}
-		}
-	}
-	
-	&.messageDisabled:not(.messageDeleted) {
-		background-color: @wcfSuccessBackgroundColor;
-		
-		.messageSidebar {
-			color: @wcfSuccessColor !important;
-			
-			a {
-				color: @wcfSuccessColor !important;
-			}
-		}
-	}
-}
-	
-.message.messageSidebarOrientationLeft {
-	.messageContent {
-		border-left: 1px solid @wcfContainerBorderColor;
-		margin: 0 0 0 211px;
-	}
-	
-	.messageSidebar {
-		float: left;
-	}
-	
-	.messageHeader > .pointer {
-		border-color: transparent @wcfContainerBorderColor transparent transparent;
-		border-style: solid solid solid none;
-		left: -20px;
-		
-		> span {
-			border-color: transparent @wcfContainerBackgroundColor transparent transparent;
-			border-style: solid solid solid none;
-			left: 1px;
-		}
-	}
-}
-
-.message.messageSidebarOrientationRight {
-	.messageContent {
-		border-right: 1px solid @wcfContainerBorderColor;
-		margin: 0 211px 0 0;
-	}
-	
-	.messageSidebar {
-		float: right;
-	}
-	
-	.messageHeader > .pointer {
-		border-color: transparent transparent transparent @wcfContainerBorderColor;
-		border-style: solid none solid solid;
-		right: -20px;
-		
-		> span {
-			border-color: transparent transparent transparent @wcfContainerBorderColor;
-			border-style: solid none solid solid;
-			right: 1px;
-		}			
-	}
-}
-
-.message.dividers {
-	.userCredits {
-		border-top: 1px solid darken(@wcfSidebarBackgroundColor, 8%); //darken(@wcfContainerBorderColor, 10%);
-		
-		.boxShadowInset(0, 1px, #fff, 0);
-	}
-}
-
-.message .messageHeader {
-	> .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;
-		}
-	}
-	
-	.messageCounter {
-		float: right;
-		font-size: @wcfSmallFontSize;
-		font-weight: bold;
-		margin-left: @wcfGapSmall;
-		
-		a {
-			padding: 1px 5px;
-			vertical-align: middle;
-		}
-		
-		input[type=checkbox] {
-			vertical-align: middle;
-		}
-	}
-}
-
-.message .messageBody {
-	color: @wcfColor;
-	display: block;
-	line-height: 1.5;
-	padding: @wcfGapMedium @wcfGapLarge 1px;
-	position: relative;
-	
-	&:after {
-		clear: both;
-		content: '';
-		display: block;
-	}
-	
-	> div:not(.messageFooter) {
-		border-top: 1px dotted @wcfContainerBorderColor;
-		overflow: hidden;
-		padding: @wcfGapMedium 0;
-	}
-	
-	> *:last-child {
-		//padding-bottom: @wcfGapMedium;
-	}
-	
-	> footer {
-		padding-bottom: @wcfGapMedium;
-	}
-	
-	> .messageSignature {
-		color: @wcfDimmedColor;
-	}
-	
-	.messageFooter {
-		> *:not(:first-child) {
-			margin-top: @wcfGapSmall;
-		}
-		
-		> .messageFooterNote {
-			border-left: 2px solid @wcfContainerBorderColor;
-			color: @wcfDimmedColor;
-			font-size: @wcfSmallFontSize;
-			padding: @wcfGapTiny @wcfGapSmall;
-				
-			@messageFooterNoteGradientColor: fade(@wcfContainerBorderColor, 20%);
-			.linearGradientNative(~"left top, @{messageFooterNoteGradientColor} 0%, transparent 40%");
-		}
-	}
-}
-
-.message .messageContent {
-	background-color: @wcfContainerBackgroundColor;
-	
-	.borderRadius(5px, 4px, 4px, 5px);
-	
-	.messageHeader {
-		padding: @wcfGapMedium @wcfGapLarge 0;
-		position: relative;
-		
-		> time {
-			color: @wcfDimmedColor;
-			font-size: @wcfSmallFontSize;
-		}
-		
-		> .likesBadge {
-			display: inline-block;
-			margin: -2px 0 -2px 4px;
-		}
-		
-		> .messageTitle {
-			color: @wcfColor;
-			font-size: @wcfSubHeadlineFontSize;
-			font-weight: bold;
-			padding: @wcfGapSmall 0 0;
-			
-			.textShadow(@wcfContainerBackgroundColor);
-		}
-	}
-}
-
-.message .messageSidebar {
-	//font-size: 90%;
-	line-height: 1.3;
-	margin-bottom: -1px;
-	padding: @wcfGapMedium @wcfGapLarge @wcfGapLarge;
-	position: relative;
-	text-align: center;
-	width: 170px; /* Width toggle */
-	
-	&:after {
-		clear: both;
-		content: '';
-		display: block;
-	}
-	
-	header .username {
-		color: @wcfLinkColor;
-		font-size: @wcfTitleFontSize;
-		font-weight: bold;
-		padding: 0 3px 1px;
-		
-		.textShadow(@wcfContainerHoverBackgroundColor);
-		
-		a {
-			text-decoration: none;
-		}
-	}
-	
-	.userTitle {
-		/* todo */
-		margin: 7px 0 0;
-	}
-	
-	.userRank {
-		/* todo */
-		margin: 2px 0 0;
-	}
-	
-	.userAvatar {
-		display: inline-block;
-		margin: @wcfGapSmall 0 0;
-		position: relative;
-		text-align: left;
-		
-		> a > img {
-			/* todo */
-			-webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.6, transparent), to(rgba(0, 0, 0, .3)));
-		}
-		
-		> .badgeOnline {
-			background-color: fade(@wcfSuccessBackgroundColor, 70%);
-			border-bottom: 1px solid rgba(255, 255, 255, .7); /*todo*/
-			bottom: 7px;
-			position: absolute;
-			right: -5px;
-			text-transform: uppercase;
-			
-			
-			.borderRadius(2px);
-			.boxShadow(0, 1px, rgba(0, 0, 0, .3), 7px);
-		}
-	}
-	
-	.userCredits {
-		font-size: @wcfSmallFontSize;
-		margin: @wcfGapSmall 0 0;
-		padding: @wcfGapSmall 0 0;
-		
-		.dataList {
-			dt {
-				width: 47%;
-			}
-			
-			dd {
-				margin-left: 50%;
-			}
-		}
-	}
-	
-	/*&.online {
-		.userAvatar {
-			.boxShadow(0, 0, @wcfSuccessBackgroundColor, 10px);
-			
-			// todo
-			-webkit-animation-name: onlineStatus;
-			-webkit-animation-duration: 2s;
-			-webkit-animation-iteration-count: infinite;
-			-webkit-animation-direction: alternate;
-			-webkit-animation-timing-function: ease-in-out;
-		}
-	}*/
-}
-
-li:nth-child(2n+1) .message {
-	&.messageSidebarOrientationLeft .messageHeader > .pointer > span {
-		border-right-color: @wcfContainerAccentBackgroundColor;
-	}
-	
-	&.messageSidebarOrientationRight .messageHeader > .pointer > span {
-		border-left-color: @wcfContainerAccentBackgroundColor;
-	}
-	
-	.messageContent {
-		background-color: @wcfContainerAccentBackgroundColor;
-	}
-}
-
-.messageReduced {
-	.contentOptions > .breadcrumbs {
-		bottom: 10px;
-		left: 0;
-		opacity: 1;
-		position: relative;
-	}
-}
-
-.messageCollapsed {
-	background-color: lighten(@wcfContainerBorderColor, 16%);
-	border-color: lighten(@wcfContainerBorderColor, 8%);
-	color: @wcfDimmedColor;
-	opacity: .7;
-	padding: @wcfGapMedium @wcfGapLarge;
-
-	.boxShadow(0, 0, @wcfContainerBorderColor, 10px);
-	.transition(opacity, .1s);
-	
-	&:hover {
-		opacity: 1;
-	}
-	
-	&.messageCollapsedExpandable {
-		cursor: pointer;
-	}
-	
-	p {
-		display: inline-block;
-		vertical-align: middle;
-		
-		span {
-			display: block;
-			font-size: @wcfSmallFontSize;
-			margin-left: @wcfGapSmall;
-		}
-	}
-	
-	.messageCounter {
-		padding-top: 3px;
-	}
-}
-
-/*todo: move*/
-.highlight {
-	background-color: rgba(255, 200, 0, 1);
-}
-
-/* todo */
-/*@-webkit-keyframes onlineStatus {
-	0% {
-		-webkit-box-shadow: 0 0 10px @wcfSuccessBackgroundColor;
-	}
-	100% {
-		-webkit-box-shadow: 0 0 20px @wcfSuccessBackgroundColor;
-	}
-}*/
-
-/* quick reply and inline editor */
-.jsMessageLoading {
-	background-image: url(../icon/spinner.svg);
-	background-position: center center;
-	background-repeat: no-repeat;
-	background-size: 64px;
-}
-
-#messageQuickReply {
-	.messageQuickReplyLoading {
-		background-image: url(../icon/spinner.svg);
-		background-position: center center;
-		background-repeat: no-repeat;
-		background-size: 64px;
-	}
-	
-	.formSubmit {
-		padding-bottom: @wcfGapMedium;
-	}
-}
-
-/* message quotes */
-#showQuotes {
-	bottom: @wcfGapLarge + @wcfGapTiny;
-	cursor: pointer;
-	opacity: .7;
-	position: fixed;
-	right: @wcfGapLarge + @wcfGapTiny;
-	
-	.transition(opacity, .2s);
-	
-	&:hover {
-		opacity: 1;
-	}
-}
-
-#messageQuoteList {
-	max-width: 800px !important;
-
-	li {
-		&:not(:first-child) {
-			margin-top: @wcfGapSmall;
-		}
-		
-		span {
-			float: left;
-			width: 40px;
-			
-			> input {
-				vertical-align: bottom;
-			}
-			
-			> img {
-				cursor: pointer;
-				vertical-align: middle;
-			}
-		}
-		
-		div.jsQuote {
-			margin-left: 60px;
-		}
-		
-		div.jsFullQuote {
-			display: none;
-		}
-	}
-}
-
-#quoteManagerCopy {
-	cursor: pointer;
-	
-	.pointer {
-		border-width: 5px 5px 0;
-		bottom: -5px;
-		top: auto;
-	}
-}
diff --git a/wcfsetup/install/files/style/navigation.less b/wcfsetup/install/files/style/navigation.less
deleted file mode 100644
index bd318ec2fb..0000000000
--- a/wcfsetup/install/files/style/navigation.less
+++ /dev/null
@@ -1,204 +0,0 @@
-.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%);
-				}
-				
-				> *:not(script) {
-					padding: 3px;
-					display: inline-block;
-					color: @wcfLinkColor;
-				}
-				
-				a:hover {
-					background-color: @wcfSidebarBackgroundColor;
-				}
-			}
-		}
-		
-		&:not(.navigationIcons) {
-			
-			li {
-				display: inline-block;
-				margin-top: 5px;
-				
-				a {
-					padding: 2px 4px;
-					
-					.textShadow(@wcfNavigationBackgroundColor);
-					
-					&:hover {
-						text-decoration: none;
-					}
-				}
-			}
-		}
-	}
-}
-
-.navigationHeader {
-	border-bottom: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
-	border-radius: @wcfContainerBorderRadius @wcfContainerBorderRadius 0 0;
-}
-	
-.navigationFooter {
-	border-top: 1px solid darken(@wcfSidebarBackgroundColor, 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: -4px 0 0;
-				
-				&:first-child {
-					margin-right: -5px;
-				}
-				
-				&:last-child {
-					margin-left: -5px;
-				}
-				
-				&:only-child {
-					margin: -4px 0 0;
-				}
-				
-				a {
-					border-top-left-radius: 5px;
-					border-top-right-radius: 5px;
-					color: @wcfPageLinkColor;
-					font-size: 110%;
-					font-weight: bold;
-					z-index: 10;
-					
-					.linearGradient(@wcfNavigationBackgroundColor, lighten(@wcfNavigationBackgroundColor, 20%), @wcfNavigationBackgroundColor);
-					.textShadow(@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, @wcfNavigationBackgroundColor, 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, @wcfNavigationBackgroundColor, 0);
-					}
-				}
-			}
-			
-			&:not(.active) {
-				margin-top: -3px;
-				
-				&:hover {
-					> a {
-						color: @wcfPageLinkHoverColor;
-					}
-				}
-			}
-			
-			> a {
-				color: @wcfPageLinkColor;
-				cursor: pointer;
-				display: inline-block;
-				font-weight: normal;
-				padding: 8px 20px;
-				position: relative;
-				text-decoration: none;
-				white-space: nowrap;
-				
-				.transition(~"border, background-color, background-image, color", .3s, ease);
-				.textShadow(@wcfPageBackgroundColor);
-			}
-		}
-	}
-	
-	.badge {
-		margin: -5px 0;
-	}
-}
-
-.contentNavigation {
-	display: table;
-	width: 100%;
-	
-	> * {
-		margin-top: @wcfGapMedium;
-	}
-	
-	nav ul {
-		text-align: left;
-	}
-	
-	nav > ul {
-		float: left;
-		
-		&:not(.pageNavigation) {
-			float: right;
-			text-align: right;
-		}
-		
-		li {
-			display: inline;
-		}
-	}
-}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/notification.less b/wcfsetup/install/files/style/notification.less
deleted file mode 100644
index 7414ae1242..0000000000
--- a/wcfsetup/install/files/style/notification.less
+++ /dev/null
@@ -1,102 +0,0 @@
-/*  
-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
-*/
-
-.userNotificationContainer {
-	width: 250px;
-}
-
-.userNotificationDetails {
-	padding: @wcfGapMedium;
-	width: 250px - 2 * @wcfGapMedium;
-
-	> header {
-		margin-top: 0;
-		
-		hgroup {
-			h1 {
-				border-bottom: 1px solid @wcfContainerBorderColor;
-				font-size: 150%;
-				margin-bottom: @wcfGapTiny;
-				padding-bottom: @wcfGapTiny;
-			}
-			
-			h2 {
-				color: @wcfDimmedColor;
-				font-size: 90%;
-			}
-		}
-	}
-	
-	section {
-		border-top: 1px dotted @wcfContainerBorderColor;
-		margin-top: @wcfGapTiny;
-		padding-top: @wcfGapMedium;
-	}
-	
-	nav {
-		border-top: 1px dotted @wcfContainerBorderColor;
-		margin-bottom: -@wcfGapSmall;
-		margin-top: @wcfGapMedium;
-		padding-top: @wcfGapSmall;
-		text-align: center;
-		
-		ul {
-			display: inline-block;
-			float: none;
-		}
-	}
-}
-
-.userNotificationItem hgroup {
-	h2 {
-		color: @wcfDimmedColor;
-		font-size: 85%;
-	}
-}
-
-.scrollableContainer {
-	overflow: hidden;
-	position: relative;
-	width: 250px;
-	
-	.scrollableItems {
-		position: relative;
-		width: 20000em;
-
-		> div {
-			float: left;
-			width: 250px;
-			
-			&:first-child {
-				border-right: 1px solid @wcfContainerBorderColor;
-				
-				ul li {
-					cursor: pointer;
-					display: inline-block;
-					overflow: hidden;
-					padding: @wcfGapSmall @wcfGapMedium;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-					width: 250px - 2 * @wcfGapMedium;
-					
-					&:first-child {
-						margin-top: @wcfGapSmall;
-					}
-					
-					&.dropdownDivider {
-						padding-left: 0;
-					}
-				}
-				
-				p {
-					padding: @wcfGapSmall;
-				}
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/pagination.less b/wcfsetup/install/files/style/pagination.less
deleted file mode 100644
index bc818d8772..0000000000
--- a/wcfsetup/install/files/style/pagination.less
+++ /dev/null
@@ -1,98 +0,0 @@
-/* ############## 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 */
-
-.contentNavigation .pageNavigation {
-	float: left;
-	margin: @wcfGapMedium + 5 0 3px;
-
-	ul li {
-		margin: 0 2px;
-	}
-}
-
-/* -- -- -- Buttons (Level 1 & 2) -- -- -- */
-
-.pageNavigation {
-	ul {
-		li {
-			border-radius: 3px;
-			float: left;
-			font-weight: bold;
-			margin: 0 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: 1px 0 1px;
-			}
-			
-			&:not(.disabled):hover a {
-				color: @wcfButtonHoverColor;
-			}
-			
-			&:not(.skip) a {
-				padding: 2px 1px;
-			}
-			
-			&.active, &.active:hover {
-				border: 1px solid darken(@wcfButtonColor, 5%);
-				color: lighten(@wcfButtonBackgroundColor, 5%);
-				padding: 2px 0;
-				
-				.linearGradient(@wcfButtonColor, darken(@wcfButtonColor, 10%), @wcfButtonColor 3px);
-				.textShadow(#000);
-			}
-			
-			img {
-				height: 16px;
-				margin: 0;
-				width: 16px;
-			}
-			
-			a {
-				color: @wcfButtonColor;
-				display: block;
-				text-decoration: none;
-				
-				.textShadow(@wcfButtonBackgroundColor);
-			}
-		}
-	}
-}
-
-
-/* Special -> Status Display */
-
-.statusDisplay .pageNavigation {
-	font-size: @wcfSmallFontSize;
-	float: left;
-	margin-top: 2px;
-	
-	ul {
-		li {
-			min-width: 13px;
-			
-			&:not(.skip) a {
-				padding: 1px;
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/poll.less b/wcfsetup/install/files/style/poll.less
deleted file mode 100644
index f3d6c98086..0000000000
--- a/wcfsetup/install/files/style/poll.less
+++ /dev/null
@@ -1,63 +0,0 @@
-#pollOptionContainer .sortableList {
-	padding: @wcfGapSmall 0;
-	
-	.sortableNode {
-		margin-top: @wcfGapSmall;
-		
-		.sortableButtonContainer > img {
-			cursor: pointer;
-			margin-right: @wcfGapMedium;
-		}
-	}
-}
-
-.pollContainer {
-	float: left;
-	margin: 0 @wcfGapMedium @wcfGapSmall 0;
-	max-width: 50%;
-	min-width: 300px;
-}
-
-.pollResultList {
-	li {
-		margin-bottom: 8px;
-		padding: 1px 0;
-		position: relative;
-		z-index: 0;
-		
-		.transition(background-color, .1s);
-		
-		&:last-child {
-			margin-bottom: 0px;
-		}
-		
-		&:hover {
-			background-color: @wcfContainerAccentBackgroundColor;
-		}
-		
-		.pollMeter {
-			background-color: @wcfContainerHoverBackgroundColor;
-			height: 1.5em;
-			left: 0;
-			position: absolute;
-			top: 1px;
-			z-index: -1;
-			
-			.borderRadius(0, 5px, 5px, 0);
-		}
-		
-		.caption {
-			color: @wcfLinkColor;
-			
-			.optionName {
-				padding: 0 2.5em 0 @wcfGapTiny;
-			}
-			
-			.relativeVotes {
-				position: absolute;
-				right: 0;
-				top: 3px;
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/popover.less b/wcfsetup/install/files/style/popover.less
deleted file mode 100644
index 38c704e688..0000000000
--- a/wcfsetup/install/files/style/popover.less
+++ /dev/null
@@ -1,54 +0,0 @@
-.popover {
-	background-color: rgba(0, 0, 0, .4);
-	background-image: url(../icon/spinner.svg);
-	background-position: center center;
-	background-repeat: no-repeat;
-	background-size: 32px;
-	max-width: 450px;
-	min-height: 32px;
-	min-width: 150px;
-	padding: @wcfGapSmall;
-	position: absolute;
-	vertical-align: middle;
-	z-index: 320;
-	
-	.borderRadius();
-	.boxShadow(0, 1px, rgba(0, 0, 0, .3), 7px);
-	
-	&:after {
-		border: 10px solid transparent;
-		content: "";
-		display: inline-block;
-		position: absolute;
-		z-index: 100;
-	}
-	
-	&.top:after {
-		border-bottom-width: 0;
-		border-top-color: rgba(0, 0, 0, .4);
-		bottom: -10px;
-	}
-	
-	&.bottom:after {
-		border-bottom-color: rgba(0, 0, 0, .4);
-		border-top-width: 0;
-		top: -10px;
-	}
-	
-	&.right:after {
-		left: 10px;
-	}
-	
-	&.left:after {
-		right: 10px;
-	}
-}
-
-.popoverContent {
-	background-color: @wcfContainerBackgroundColor;
-	color: @wcfColor;
-	opacity: 0;
-	padding: @wcfGapSmall @wcfGapMedium;
-	
-	.borderRadius();
-}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/sidebar.less b/wcfsetup/install/files/style/sidebar.less
deleted file mode 100644
index edfdfddb88..0000000000
--- a/wcfsetup/install/files/style/sidebar.less
+++ /dev/null
@@ -1,165 +0,0 @@
-.sidebarContent {
-	padding-top: @wcfGapLarge;
-	
-	> ul {
-		> li {
-			margin-bottom: @wcfGapMedium;
-			
-			&:not(:last-child) {
-				border-bottom: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
-			}
-			
-			&.sidebarContainer {
-				padding: 0 @wcfGapMedium @wcfGapMedium;
-				
-				.button.more {
-					margin: 5px 0 0;
-					float: right;
-				}
-				
-				&:after {
-					content: "";
-					height: 0;
-					display: block;
-					clear: both;
-				}
-			}
-			
-			.sidebarContainerHeadline {
-				margin-bottom: @wcfGapSmall;
-				
-				> h1 {
-					text-transform: uppercase;
-					
-					.textShadow(@wcfSidebarBackgroundColor);
-					
-					.badge {
-						float: right;
-					}
-					
-					a {
-						color: @wcfColor;
-						text-decoration: none;
-					}
-				}
-			}
-			
-			.sidebarBox:not(:last-child) {
-				margin-bottom: 7px;
-			}
-			
-			.sidebarBoxHeadline {
-				> h1 {
-					margin-bottom: 1px;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-					
-					.textShadow(@wcfSidebarBackgroundColor);
-					
-					a {
-						.textShadow(@wcfSidebarBackgroundColor);
-					}
-					
-					small {
-						text-shadow: none;
-					}
-				}
-			}
-			
-			/* forms */
-			fieldset {
-				padding: @wcfGapSmall 0 0;
-				
-				legend {
-					border-width: 0;
-					color: @wcfColor;
-					font-family: @wcfBaseFontFamily;
-					font-weight: normal;
-					font-size: 100%;
-					padding: 0;
-					text-transform: uppercase;
-						
-					.textShadow(@wcfSidebarBackgroundColor);
-				}
-			}
-		}
-	}
-	
-	/* menu groups */
-	.menuGroup {
-		overflow: hidden;
-		position: relative;
-		
-		> h1 {
-			margin-bottom: @wcfGapMedium;
-			padding: 0 @wcfGapMedium;
-			
-			.textShadow(@wcfSidebarBackgroundColor);
-		}
-		
-		.menuGroupItems {
-			margin-bottom: @wcfGapSmall;
-			margin-top: -@wcfGapSmall;
-		}
-		
-		a:hover {
-			text-decoration: none;
-		}
-		
-		ul > li {
-			&.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;
-			}
-		}
-		
-		&.collapsibleMenus {
-			> h1 {
-				background-image: url(../icon/arrowRightColored.svg);
-				background-position: 15px center;
-				background-repeat: no-repeat;
-				background-size: 16px;
-				color: @wcfLinkColor;
-				cursor: pointer;
-				font-weight: bold;
-				font-size: 130%;
-				padding-left: (@wcfGapLarge + 16px + @wcfGapTiny);
-				
-				&.active {
-					background-image: url(../icon/arrowDownColored.svg);
-				}
-			}
-			
-			ul > li {
-				font-size: 110%;
-				
-				> a,
-				> div {
-					padding-left: (@wcfGapLarge + 16px + @wcfGapTiny);
-					.textShadow(@wcfSidebarBackgroundColor);
-				}
-			}
-		}
-		
-		&:not(.collapsibleMenus) {
-			> h1 {
-				text-transform: uppercase;
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/sitemap.less b/wcfsetup/install/files/style/sitemap.less
deleted file mode 100644
index 17daa5a137..0000000000
--- a/wcfsetup/install/files/style/sitemap.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.sitemapList li {
-	padding-left: @wcfGapLarge;
-	
-	&.sitemapCategory {
-		margin-top: @wcfGapMedium;
-	}
-}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/tabs.less b/wcfsetup/install/files/style/tabs.less
deleted file mode 100644
index bebe92ef4d..0000000000
--- a/wcfsetup/install/files/style/tabs.less
+++ /dev/null
@@ -1,172 +0,0 @@
-/* ############## Tab Menu ############## */
-
-/* Globals */
-
-.tabMenu {
-	display: block;
-	margin-top: @wcfGapLarge;
-	padding: 0 10px;
-	position: relative;
-	text-align: left;
-	
-	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;
-	min-height: @wcfGapLarge;
-	position: relative;
-	z-index: 20; /* Prevents border overlay during transition */
-}
-
-.tabMenuContainer > .menu {
-	border-bottom: 1px solid @wcfContainerBorderColor;
-	margin: -@wcfGapMedium -@wcfGapLarge @wcfGapSmall -@wcfGapLarge; /* reverse paddings from .containerPadding */
-	padding: @wcfGapSmall 0;
-	text-align: center;
-	
-	.borderRadius(@wcfContainerBorderRadius, 0);
-	.linearGradient(rgba(0, 0, 0, 0), @wcfContainerBackgroundColor, @wcfContainerAccentBackgroundColor);
-	
-	ul{
-		display: inline-block;
-		
-		li {
-			display: inline-block;
-			
-			&.ui-state-active a,
-			&.ui-state-active a:hover {
-				background-color: @wcfButtonPrimaryBackgroundColor;
-				border-color: @wcfButtonPrimaryBorderColor;
-				color: @wcfButtonPrimaryColor;
-				cursor: default;
-			}
-			
-			a {
-				background-color: @wcfContainerBackgroundColor;
-				border: 1px solid @wcfContainerBorderColor;
-				color: @wcfButtonColor;
-				display: block;
-				font-size: 85%;
-				
-				padding: @wcfGapTiny @wcfGapSmall;
-				
-				.borderRadius(30px);
-				
-				&:hover {
-					background-color: @wcfButtonHoverBackgroundColor;
-					border-color: @wcfButtonHoverBorderColor;
-					color: @wcfButtonHoverColor;
-					text-decoration: none;
-				}
-			}
-		}
-	}
-}
-
-.containerPadding > .tabMenuContainer:last-child {
-	margin-bottom: @wcfGapSmall;
-}
-
-/* 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
deleted file mode 100644
index ff09c76972..0000000000
--- a/wcfsetup/install/files/style/tabular.less
+++ /dev/null
@@ -1,219 +0,0 @@
-.tabularBox {
-	background-color: @wcfTabularBoxBackgroundColor;
-	background-image: url(../../images/header.png);
-	border: 1px solid @wcfContainerBorderColor;
-	
-	.borderRadius();
-}
-
-.tabularBoxTitle > hgroup {
-	color: @wcfTabularBoxColor;
-	padding: 5px 7px;
-
-	h1 {
-		font-size: @wcfTitleFontSize;
-		font-weight: bold;
-		
-		.textShadow(@wcfTabularBoxBackgroundColor);
-
-		a {
-			color: @wcfTabularBoxColor;
-			
-			&:hover {
-				color: @wcfTabularBoxHoverColor;
-				text-decoration: none;
-			}
-		}
-	}
-}
-
-.tabularBox:not(.tabularBoxTitle) .table {
-	thead tr:first-child th {
-		&:first-child {
-			.borderRadius(@wcfContainerBorderRadius - 2, 0, 0, 0);
-		}
-		
-		&:last-child {
-			.borderRadius(0, @wcfContainerBorderRadius - 2, 0, 0);
-		}
-	}
-}
-
-.table {
-	border-spacing: 0;
-	width: 100%;
-	
-	/* cells */
-	th,
-	td {
-		padding: @wcfGapSmall;
-		text-align: left;
-		vertical-align: middle;
-		
-		> label {
-			cursor: pointer;
-			display: block;
-			margin: -@wcfGapSmall;
-			padding: @wcfGapSmall;
-			
-			> input[type="checkbox"] {
-				margin: 0 3px;
-			}
-		}
-	}
-	
-	/* headline */
-	th {
-		background-color: rgba(0, 0, 0, .4);
-		border-right: 1px solid rgba(0, 0, 0, .2);
-		color: @wcfTabularBoxColor;
-		font-size: @wcfSmallFontSize;
-		font-weight: bold;
-		white-space: nowrap;
-		
-		.textShadow(@wcfTabularBoxBackgroundColor);
-		
-		> a {
-			color: @wcfTabularBoxColor;
-			display: block;
-			margin: -@wcfGapSmall;
-			
-			&:hover {
-				text-decoration: none;
-			}
-			
-			> img {
-				margin: -5px 0;
-			}
-		}
-		
-		&:hover > a,
-		&.active > a {
-			background-color: rgba(0, 0, 0, .1);
-			color: @wcfTabularBoxHoverColor;
-			
-			.boxShadowInset(0, 10px, rgba(0, 0, 0, .1), 10px, -10px);
-		}
-		
-		> * {
-			padding: @wcfGapSmall;
-		}
-	}
-	
-	/* content */
-	td {
-		background-color: @wcfContainerBackgroundColor;
-		
-		.transition(background, .1s);
-		
-		&.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: @wcfSmallFontSize;
-			text-align: right;
-			width: 1% !important;
-			white-space: nowrap;
-		}
-		
-		&.columnURL, &.columnSmallText {
-			font-size: @wcfSmallFontSize;
-			text-align: left;
-		}
-	}
-	
-	/* striped */
-	tbody {
-		tr:nth-child(even) td {
-			background-color: @wcfContainerAccentBackgroundColor;
-		}
-	}
-	
-	/* hover */
-	tbody {
-		tr {
-			&:not(:last-child) {
-				td {
-					border-bottom: 1px solid rgba(255, 255, 255, .3);
-				}
-			}
-			
-			&:hover {
-				td {
-					background-color: @wcfContainerHoverBackgroundColor;
-				}
-			}
-			
-			td:not(:last-child) {
-				border-right: 1px solid rgba(255, 255, 255, .3);
-			}
-			
-			td.focus {
-				background-color: @wcfContainerHoverBackgroundColor;
-			}
-
-			td.left {
-				text-align: left;
-			}
-
-			td.right {
-				text-align: right;
-			}
-		}
-	}
-}
-
-.tabularBox .table {
-	tbody tr:last-child td {
-		&:first-child {
-			.borderRadius(0, 0, 0, @wcfContainerBorderRadius - 2);
-		}
-		
-		&:last-child {
-			.borderRadius(0, 0, @wcfContainerBorderRadius - 2, 0);
-		}
-	}
-}
-
-.statusDisplay {
-	padding: 1px 0;
-	float: right;
-	
-	.statusIcons {
-		float: right;
-		margin-left: @wcfGapSmall;
-		
-		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
deleted file mode 100644
index 47ad60af31..0000000000
--- a/wcfsetup/install/files/style/tooltip.less
+++ /dev/null
@@ -1,24 +0,0 @@
-/* ############## Balloon Tooltips ############## */
-
-/* Globals */
-.balloonTooltip {
-	background-color: @wcfTooltipBackgroundColor;
-	color: @wcfTooltipColor;
-	font-size: .85em;
-	max-width: 300px;
-	padding: 5px 10px 7px;
-	position: absolute;
-	z-index: 800;
-	
-	.borderRadius();
-	.boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px); 
-	
-	.pointer {
-		border-color: @wcfTooltipBackgroundColor transparent;
-		border-style: solid;
-		border-width: 0 5px 5px;
-		left: 50%;
-		position: absolute;
-		top: -5px;
-	}
-}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/user.less b/wcfsetup/install/files/style/user.less
deleted file mode 100644
index 6868dc49c8..0000000000
--- a/wcfsetup/install/files/style/user.less
+++ /dev/null
@@ -1,168 +0,0 @@
-/* ##### User Sidebar #### */
-.sidebarContent {
-	.userAvatar {
-		text-align: center;
-		overflow: hidden;
-	}
-}
-
-/* todo: framed icon list */
-.framedIconList {
-	li {
-		float: left;
-		margin: 0 2px 4px 0;
-		
-		.framed {
-			display: inline-block;
-		}
-	}
-	
-	&:after {
-		content: "";
-		height: 0;
-		display: block;
-		clear: both;
-	}
-}
-
-/* user information */
-.userInformation {
-	> hgroup > h2,
-	> .inlineDataList,
-	> .dataList {
-		font-size: @wcfSmallFontSize;
-	}
-}
-
-.userProfilePreview {
-	position: relative;
-
-	> .userInformation {
-		padding-bottom: 16px;// + @wcfGapTiny;
-		
-		> .inlineDataList,
-		> .dataList {
-			margin-bottom: @wcfGapTiny;
-			padding-top: @wcfGapTiny;
-			border-top: 1px dotted @wcfContainerBorderColor;
-		}
-		
-		> .dataList {
-			padding-bottom: @wcfGapTiny;
-			border-bottom: 1px dotted @wcfContainerBorderColor;
-		}
-		
-		> .buttonList {
-			position: absolute;
-			bottom: 0;
-			right: 0;
-		}
-	}
-}
-
-/* ##### User List #### */
-.simpleUserList {
-	> li > div > .userInformation {
-		position: relative;
-		
-		> .buttonList {
-			opacity: 0;
-			position: absolute;
-			right: 0;
-			top: 0;
-			
-			.transition(opacity, .1s);
-		}
-	}
-	
-	> li:hover > div > .userInformation > .buttonList {
-		opacity: 1;
-	}
-}
-
-.userList {
-	> li {
-		padding: 0;
-		float: left;
-		width: 50%;
-		height: 90px;
-		overflow: hidden;
-		
-		&:last-child {
-			border-radius: 0;
-		}
-		
-		&:first-child {
-			border-radius: @wcfContainerBorderRadius - 1 0 0 0;
-		}
-		
-		&:nth-child(2) {
-			border-top-right-radius: @wcfContainerBorderRadius - 1;
-		}
-		
-		&:nth-child(even) {
-			float: right;
-			
-			&:last-child {
-				border-bottom-right-radius: @wcfContainerBorderRadius - 1;
-			}
-		}
-		
-		&:nth-child(odd) {
-			&:last-child, &:nth-last-child(2) {
-				border-bottom-left-radius: @wcfContainerBorderRadius - 1;
-			}
-		}
-
-		&:nth-child(4n), &:nth-child(4n+1) {
-			background-color: @wcfContainerBackgroundColor;
-		}
-		
-		&:nth-child(4n+2), &:nth-child(4n+3) {
-			background-color: @wcfContainerAccentBackgroundColor;
-		}
-		
-		&:hover {
-			background-color: @wcfContainerHoverBackgroundColor;
-		}
-		
-		> div {
-			padding: 14px 21px;
-		}
-	}
-	
-	&:after {
-		content: "";
-		display: table;
-		clear: left;
-	}
-}
-
-.userHeadline {
-	position: relative;
-	
-	> .buttonList {
-		position: absolute;
-		right: @wcfGapTiny;
-		top: @wcfGapTiny;
-	}
-}
-
-.letters {
-	> li {
-		margin-bottom: @wcfGapTiny;
-		
-		> .button {
-			min-width: 1.2em;
-			text-align: center;
-		}
-	}
-}
-
-/* user title badges */
-.badge.userTitleBadge {
-	&.blue {
-		color: #fff;
-		background-color: #369;
-	}
-}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/userPanel.less b/wcfsetup/install/files/style/userPanel.less
deleted file mode 100644
index fd0fa4420f..0000000000
--- a/wcfsetup/install/files/style/userPanel.less
+++ /dev/null
@@ -1,79 +0,0 @@
-.userPanel {
-	background-color: @wcfUserPanelBackgroundColor;
-	border-bottom: 1px solid rgba(0, 0, 0, .1);
-	height: 40px;
-	left: 0;
-	position: fixed;
-	top: 0;
-	right: 0;
-	z-index: 200;
-	
-	.boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
-	
-	> div {
-		> ul.userPanelItems {
-			float: left;
-			
-			.clearfix();
-			
-			> li {
-				float: left;
-				
-				> a,
-				> div:not(.dropdownMenu) {
-					color: @wcfUserPanelColor;
-					display: block;
-					height: 20px;
-					padding: 10px 8px;
-					position: relative;
-					
-					.textShadow(@wcfUserPanelBackgroundColor);
-					.transition(background-color, .2s);
-					
-					&:hover {
-						background-color: rgba(0, 0, 0, .4);
-						color: @wcfUserPanelHoverColor;
-						text-decoration: none;
-					}
-					
-					> .badge.badgeInverse {
-						background-color: rgb(204, 0, 0);
-						color: white;
-						padding: 0 6px 1px;
-						position: absolute;
-						bottom: 4px;
-						left: 24px;
-						z-index: 300;
-					}
-				}
-				
-				> .framed > img {
-					padding: 0px;
-					margin-top: -2px;
-					margin-bottom: -2px;
-				}
-			}
-		}
-	
-		> .searchBar {
-			float: right;
-			padding: 6px 0;
-			
-			> form > input[type="search"] {
-				background-color: rgba(0, 0, 0, .5);
-				background-image: url("../icon/searchInverse.svg");
-				background-repeat: no-repeat;
-				background-position: 7px 5px;
-				border: 1px solid rgba(0, 0, 0, .9);
-				border-radius: 30px;
-				color: @wcfUserPanelColor;
-				padding: 6px 12px 5px 26px;
-				width: 180px;
-				-webkit-appearance: textfield;
-				
-				.boxShadowNative(~"inset 0px 1px 3px rgba(0, 0, 0, .9), 0px 1px 0px rgba(255, 255, 255, .1)");
-				.textShadow(@wcfUserPanelBackgroundColor);
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/wbb.less b/wcfsetup/install/files/style/wbb.less
deleted file mode 100644
index f3342be500..0000000000
--- a/wcfsetup/install/files/style/wbb.less
+++ /dev/null
@@ -1,337 +0,0 @@
-/* ############## Board List ############## */
-.wbbBoardList {
-	> li.wbbBoardNodeTop:not(.wbbBoardNodeTopEmpty) > div {
-		.borderRadius(@wcfContainerBorderRadius - 2, 0);
-	}
-	
-	> li > ul > li:last-child div.wbbBoard:last-child {
-		.borderRadius(0, @wcfContainerBorderRadius - 2);
-	}
-	
-	> li > ul > .wbbCategory > hgroup {
-		padding-left: 43px;
-	}
-	
-	> li > ul > li > ul > .wbbCategory > hgroup {
-		padding-left: 79px;
-	}
-	
-	.tabularBox:not(.wbbBoardNodeTop) {
-		border-radius: 0;
-		border-width: 1px 0 0;
-	}
-	
-	.wbbStats {
-		left: 50%;
-		margin-top: @wcfGapSmall;
-		position: absolute;
-		top: @wcfGapSmall;
-		width: 15%;
-		
-		> dl {
-			> dt {
-				line-height: @wcfBaseLineHeight;
-				width: 40%;
-			}
-			
-			> dd {
-				font-weight: normal;
-				font-size: @wcfSmallFontSize;
-				width: 58%;
-			}
-		}
-	}
-	
-	.wbbLastPost {
-		left: 65%;
-		position: absolute;
-		top: @wcfGapSmall;
-		width: 35%; /* = 100% - left */
-		
-		> div {
-			background-color: @wcfContentBackgroundColor;
-			padding: @wcfGapSmall;
-			margin-right: @wcfGapSmall;
-			
-			.borderRadius();
-			.boxShadowNative(~"inset 0 1px 1px rgba(0, 0, 0, .1)");
-		}
-		
-		hgroup {
-			> h1 {
-				display: inline-block;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				width: 98%;
-				white-space: nowrap;
-				
-				> .badge {
-					font-size: @wcfSmallFontSize;
-				}
-			}
-			
-			> h2 {
-				font-size: @wcfSmallFontSize;
-				
-				time {
-					color: @wcfDimmedColor;
-				}
-			}
-		}
-	}
-	
-	.wbbSubBoards {
-		li {
-			display: inline-block;
-		}
-	}
-
-	.wbbBoardDescription {
-		font-size: 90%;
-	}
-
-	.wbbBoardContainer {
-		position: relative;
-	}
-
-	.wbbBoardNodeTop {
-		margin-top: @wcfGapMedium;
-	}
-
-	.wbbBoard {
-		min-height: 44px;
-		padding: @wcfGapSmall;
-		padding-right: 51%;
-		
-		.transition(background, .1s);
-		
-		&~ ul > .wbbBoardContainer > .wbbBoard {
-			padding-left: 43px;
-
-			&~ ul > .wbbBoardContainer > .wbbBoard {
-				padding-left: 79px;
-			}
-		}
-		
-		&:hover {
-			background-color: @wcfContainerHoverBackgroundColor;
-		}
-	}
-
-	.wbbBoardNode1 {
-		background-color: @wcfContainerBackgroundColor;
-	}
-
-	.wbbBoardNode2 {
-		background-color: @wcfContainerAccentBackgroundColor;
-	}
-	
-	.wbbBoardNodeTopEmpty div.wbbBoard {
-		.borderRadius(@wcfContainerBorderRadius - 2);
-	}
-	
-	.wbbBoard > div > hgroup > h1 {
-		font-weight: normal;
-	}
-	
-	.new > div > hgroup > h1, .wbbSubBoards li.new a {
-		font-weight: bold;
-	}
-	
-	.wbbCollapsibleCategory .collapsibleButton {
-		display: inline-block;
-		margin-right: 7px;
-	}
-}
-
-/* ignored boards */
-.wbbBoardListReduced {
-	.wbbCategory > hgroup label {
-		color: @wcfPageLinkHoverColor;
-	}
-	
-	.wbbBoardContainer {
-		> div {
-			padding: 7px;
-		}
-		
-		> ul > .wbbBoardContainer {
-			> div {
-				padding-left: 28px;
-			}
-			
-			> ul > .wbbBoardContainer > div {
-				padding-left: 56px;
-			}
-		}
-	}
-}
-
-/* ############## Thread List ############## */
-.wbbThreadList {
-	/* TODO: keep these colors? */
-	.wbbThreadDeleted:not(:hover) {
-		td {
-			background-color: @wcfErrorBackgroundColor;
-			color: @wcfErrorColor;
-			
-			a {
-				color: @wcfErrorColor;
-			}
-		}
-	}
-	
-	/* TODO: keep these colors? */
-	.wbbThreadDisabled:not(.wbbThreadDeleted):not(:hover) {
-		td {
-			background-color: @wcfSuccessBackgroundColor;
-			color: @wcfSuccessColor;
-			
-			a {
-				color: @wcfSuccessColor;
-			}
-		}
-	}
-	
-	.wbbLastPost h2 {
-		color: @wcfDimmedColor;
-		font-size: @wcfSmallFontSize;
-	}
-	
-	.columnLastPost {
-		white-space: nowrap;
-	}
-	
-	.columnAvatar {
-		div {
-			position: relative;
-			width: 40px;
-			height: 38px;
-			
-			> p > img {
-				opacity: .6;
-				
-				.transition(opacity, .2s);
-			}
-		}
-		
-		.myAvatar {
-			position: absolute;
-			width: 16px;
-			height: 16px;
-			bottom: -2px;
-			left: 24px;
-			opacity: 1;
-			
-			.boxShadow(0, 0, rgba(0, 0, 0, .3), 3px);
-		}
-	}
-	
-	.columnTopic {
-		> h1 > .labelList {
-			float: right;
-			padding-left: 7px;
-			
-			> li > .badge {
-				font-size: @wcfSmallFontSize;
-			}
-		}
-		
-		> small {
-			display: block;
-		}
-		
-		> nav {
-			font-size: @wcfSmallFontSize;
-			
-			> ul > li {
-				float: left;
-				margin-right: @wcfGapSmall;
-			}
-		}
-	}
-	
-	.columnTopic .wbbTopicLink {
-		font-size: @wcfTitleFontSize;
-	}
-	
-	tr.new .columnTopic > h1 {
-		font-weight: bold;
-	}
-	
-	tr.new .columnAvatar div > p > img, tr:hover .columnAvatar div > p > img {
-		opacity: 1;
-	}
-}
-
-
-/* ############## Post List ############## */
-.wbbThreadPostList {
-	.wbbThreadStarter {
-		position: relative;
-		
-		> .message {
-			&:after,
-			&:before {
-				content: "";
-				display: block;
-				height: 128px;
-				left: 0;
-				position: absolute;
-				top: 0;
-				width: 128px;
-			}
-			
-			&:after {
-				background-image: url(../icon/circleStar.svg);
-				background-position: 4px 4px;
-				background-repeat: no-repeat;
-				background-size: 16px;
-				height: 20px;
-				width: 20px;
-			}
-			
-			&:before {
-				.borderRadius(@wcfContainerBorderRadius, 0, 0, 0);
-				.linearGradientNative(~"left top, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 40%");
-			}
-		}
-	}
-	
-	.newMessageBadge {
-		border: 1px solid @wcfLinkColor;
-		border-radius: 2px;
-		color: @wcfLinkColor;
-		display: inline-block;
-		font-weight: bold;
-		font-size: @wcfSmallFontSize;
-		left: -220px;
-		top: 30px;
-		padding: 6px 10px;
-		position: absolute;
-		text-transform: uppercase;
-		
-		.linearGradient(darken(@wcfContainerHoverBackgroundColor, 10%), @wcfContainerHoverBackgroundColor, darken(@wcfContainerHoverBackgroundColor, 10%));
-		.textShadow(darken(@wcfContainerHoverBackgroundColor, 10%));
-		.boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px);
-		
-		&:before {
-			border-color: transparent @wcfLinkColor transparent transparent;
-			border-width: 0px 7px 7px;
-			border-style: solid;
-			bottom: -7px;
-			content: "";
-			display: block;
-			height: 0px;
-			left: -8px;
-			position: absolute;
-			width: 0px;
-		}
-	}
-	
-	.messageCollapsed {
-		&.wbbPostDeleted {
-			.boxShadow(0, 0, @wcfErrorBackgroundColor, 10px);
-		}
-	}
-}
\ No newline at end of file