From daa737bfc6537302acc74363e4149e7ca7dade76 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Mon, 16 Apr 2012 18:40:54 +0200
Subject: [PATCH] Redesigned forms (fieldsets), attachments, headlines, code
 box

Fixed some minor style issues
---
 .../files/acp/templates/acpSessionLog.tpl     |   7 +-
 .../files/acp/templates/acpSessionLogList.tpl |   5 +-
 .../install/files/acp/templates/cacheList.tpl |  49 +--
 .../files/acp/templates/cronjobAdd.tpl        |   3 +-
 .../files/acp/templates/cronjobList.tpl       |   5 +-
 .../files/acp/templates/cronjobLogList.tpl    |   3 +-
 .../install/files/acp/templates/header.tpl    |  13 +-
 .../install/files/acp/templates/login.tpl     |  80 ++---
 .../install/files/acp/templates/option.tpl    |   9 +-
 .../files/acp/templates/optionImport.tpl      |  13 +-
 .../acp/templates/packageAutoUpdateList.tpl   |   3 +-
 .../files/acp/templates/packageList.tpl       |  11 +-
 .../acp/templates/packageListDetailed.tpl     |   3 +-
 .../acp/templates/packageStartInstall.tpl     |   4 +-
 .../acp/templates/packageUpdateSearch.tpl     |   3 +-
 .../files/acp/templates/updateServerAdd.tpl   |   3 +-
 .../files/acp/templates/updateServerList.tpl  |   3 +-
 .../install/files/acp/templates/userAdd.tpl   |   7 +-
 .../files/acp/templates/userGroupAdd.tpl      |   8 +-
 .../files/acp/templates/userGroupList.tpl     |   3 +-
 .../install/files/acp/templates/userList.tpl  |   3 +-
 .../install/files/acp/templates/userMail.tpl  |   3 +-
 .../files/acp/templates/userSearch.tpl        |  11 +-
 .../acp/templates/usersMassProcessing.tpl     |  15 +-
 wcfsetup/install/files/style/alerts.less      |  20 ++
 wcfsetup/install/files/style/attachment.less  |  77 +++++
 wcfsetup/install/files/style/badge.less       |   5 +
 wcfsetup/install/files/style/codebox.less     |  54 +--
 wcfsetup/install/files/style/forms.less       | 308 +++++++++---------
 wcfsetup/install/files/style/inputs.less      |   6 +
 wcfsetup/install/files/style/layout.less      |  39 +--
 wcfsetup/install/files/style/message.less     |  14 +-
 wcfsetup/install/files/style/sidebar.less     |   9 +-
 wcfsetup/install/files/style/tabs.less        |   6 +-
 wcfsetup/install/files/style/tabular.less     |  35 +-
 wcfsetup/install/files/style/userPanel.less   |   2 +-
 wcfsetup/install/files/style/wbb.less         |   9 +-
 37 files changed, 438 insertions(+), 413 deletions(-)

diff --git a/wcfsetup/install/files/acp/templates/acpSessionLog.tpl b/wcfsetup/install/files/acp/templates/acpSessionLog.tpl
index 89e7bc2252..f901a8d62f 100644
--- a/wcfsetup/install/files/acp/templates/acpSessionLog.tpl
+++ b/wcfsetup/install/files/acp/templates/acpSessionLog.tpl
@@ -1,7 +1,6 @@
 {include file='header'}
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/session1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.sessionLog.access.list{/lang}</h1>
 	</hgroup>
@@ -14,7 +13,7 @@
 {hascontent}
 	<div class="tabularBox tabularBoxTitle marginTop shadow">
 		<hgroup>
-			<h1>{lang}wcf.acp.sessionLog.access.list{/lang} <span class="badge" title="{lang}wcf.acp.sessionLog.access.list.count{/lang}">{#$items}</span></h1>
+			<h1>{lang}wcf.acp.sessionLog.access.list{/lang} <span class="badge badgeInverse" title="{lang}wcf.acp.sessionLog.access.list.count{/lang}">{#$items}</span></h1>
 		</hgroup>
 		
 		<table class="table">
@@ -24,7 +23,7 @@
 					<th class="columnURL columnIpAddress{if $sortField == 'ipAddress'} active{/if}"><a href="{link controller='ACPSessionLog' id=$sessionLogID}pageNo={@$pageNo}&sortField=ipAddress&sortOrder={if $sortField == 'ipAddress' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.user.ipAddress{/lang}{if $sortField == 'ipAddress'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
 					<th class="columnDate{if $sortField == 'time'} active{/if}"><a href="{link controller='ACPSessionLog' id=$sessionLogID}pageNo={@$pageNo}&sortField=time&sortOrder={if $sortField == 'time' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.acp.sessionLog.time{/lang}{if $sortField == 'time'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
 					<th class="columnTitle columnPackageName{if $sortField == 'packageName'} active{/if}"><a href="{link controller='ACPSessionLog' id=$sessionLogID}pageNo={@$pageNo}&sortField=packageName&sortOrder={if $sortField == 'packageName' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.acp.sessionLog.packageName{/lang}{if $sortField == 'packageName'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
-					<th class="columnText columnClassName{if $sortField == 'className'} active{/if}"><a href="{link controller='ACPSessionLog' id=$sessionLogID}pageNo={@$pageNo}&sortField=className&sortOrder={if $sortField == 'className' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.acp.sessionLog.className{/lang}{if $sortField == 'className'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></p></th>
+					<th class="columnText columnClassName{if $sortField == 'className'} active{/if}"><a href="{link controller='ACPSessionLog' id=$sessionLogID}pageNo={@$pageNo}&sortField=className&sortOrder={if $sortField == 'className' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.acp.sessionLog.className{/lang}{if $sortField == 'className'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
 					<th class="columnURL columnRequestURI{if $sortField == 'requestURI'} active{/if}"><a href="{link controller='ACPSessionLog' id=$sessionLogID}pageNo={@$pageNo}&sortField=requestURI&sortOrder={if $sortField == 'requestURI' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.acp.sessionLog.requestURI{/lang}{if $sortField == 'requestURI'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
 					<th class="columnText columnRequestMethod{if $sortField == 'requestMethod'} active{/if}"><a href="{link controller='ACPSessionLog' id=$sessionLogID}pageNo={@$pageNo}&sortField=requestMethod&sortOrder={if $sortField == 'requestMethod' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.acp.sessionLog.requestMethod{/lang}{if $sortField == 'requestMethod'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
 					
diff --git a/wcfsetup/install/files/acp/templates/acpSessionLogList.tpl b/wcfsetup/install/files/acp/templates/acpSessionLogList.tpl
index f7069949f7..82f6fa149f 100644
--- a/wcfsetup/install/files/acp/templates/acpSessionLogList.tpl
+++ b/wcfsetup/install/files/acp/templates/acpSessionLogList.tpl
@@ -1,7 +1,6 @@
 {include file='header'}
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/session1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.sessionLog.list{/lang}</h1>
 	</hgroup>
@@ -14,7 +13,7 @@
 {hascontent}
 	<div class="tabularBox tabularBoxTitle marginTop shadow">
 		<hgroup>
-			<h1>{lang}wcf.acp.sessionLog.list{/lang} <span class="badge" title="{lang}wcf.acp.sessionLog.list.count{/lang}">{#$items}</span></h1>
+			<h1>{lang}wcf.acp.sessionLog.list{/lang} <span class="badge badgeInverse" title="{lang}wcf.acp.sessionLog.list.count{/lang}">{#$items}</span></h1>
 		</hgroup>
 		
 		<table class="table">
diff --git a/wcfsetup/install/files/acp/templates/cacheList.tpl b/wcfsetup/install/files/acp/templates/cacheList.tpl
index 25b0b9bfba..7015f9cf6b 100644
--- a/wcfsetup/install/files/acp/templates/cacheList.tpl
+++ b/wcfsetup/install/files/acp/templates/cacheList.tpl
@@ -12,8 +12,7 @@
 	//]]>
 </script>
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/cache1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.cache.list{/lang}</h1>
 	</hgroup>
@@ -23,31 +22,33 @@
 	<p class="success">{lang}wcf.acp.cache.clear.success{/lang}</p>	
 {/if}
 
-<fieldset>
-	<legend>{lang}wcf.acp.cache.data{/lang}</legend>
-	
-	<dl>
-		<dt>{lang}wcf.acp.cache.data.source{/lang}</dt>
-		<dd>{$cacheData.source}</dd>
-	</dl>
-	{if $cacheData.version}
+<div class="container containerPadding marginTop shadow">
+	<fieldset>
+		<legend>{lang}wcf.acp.cache.data{/lang}</legend>
+		
 		<dl>
-			<dt>{lang}wcf.acp.cache.data.version{/lang}</dt>
-			<dd>{$cacheData.version}</dd>
+			<dt>{lang}wcf.acp.cache.data.source{/lang}</dt>
+			<dd>{$cacheData.source}</dd>
 		</dl>
-	{/if}
-	{if $cacheData.size}<dl>
-		<dt>{lang}wcf.acp.cache.data.size{/lang}</dt>
-		<dd>{@$cacheData.size|filesize}</dd>
-	</dl>{/if}
-	{if $cacheData.files}<dl>
-		<dt>{lang}wcf.acp.cache.data.files{/lang}</dt>
-		<dd>{#$cacheData.files}</dd>
-	</dl>{/if}
+		{if $cacheData.version}
+			<dl>
+				<dt>{lang}wcf.acp.cache.data.version{/lang}</dt>
+				<dd>{$cacheData.version}</dd>
+			</dl>
+		{/if}
+		{if $cacheData.size}<dl>
+			<dt>{lang}wcf.acp.cache.data.size{/lang}</dt>
+			<dd>{@$cacheData.size|filesize}</dd>
+		</dl>{/if}
+		{if $cacheData.files}<dl>
+			<dt>{lang}wcf.acp.cache.data.files{/lang}</dt>
+			<dd>{#$cacheData.files}</dd>
+		</dl>{/if}
+		
+		{event name='dataFields'}
+	</fieldset>
+</div>
 	
-	{event name='dataFields'}
-</fieldset>
-
 <div class="contentNavigation">
 	<nav>
 		<ul>
diff --git a/wcfsetup/install/files/acp/templates/cronjobAdd.tpl b/wcfsetup/install/files/acp/templates/cronjobAdd.tpl
index f32ceb0ade..17a8a98862 100644
--- a/wcfsetup/install/files/acp/templates/cronjobAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/cronjobAdd.tpl
@@ -1,7 +1,6 @@
 {include file='header'}
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/{$action}1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.cronjob.{$action}{/lang}</h1>
 		<h2>{lang}wcf.acp.cronjob.subtitle{/lang}</h2>
diff --git a/wcfsetup/install/files/acp/templates/cronjobList.tpl b/wcfsetup/install/files/acp/templates/cronjobList.tpl
index b3a6d33d34..3d25f2d559 100644
--- a/wcfsetup/install/files/acp/templates/cronjobList.tpl
+++ b/wcfsetup/install/files/acp/templates/cronjobList.tpl
@@ -1,7 +1,6 @@
 {include file='header'}
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/time1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.cronjob.list{/lang}</h1>
 		<h2>{lang}wcf.acp.cronjob.subtitle{/lang}</h2>
@@ -55,7 +54,7 @@
 {hascontent}
 	<div class="tabularBox tabularBoxTitle marginTop shadow">
 		<hgroup>
-			<h1>{lang}wcf.acp.cronjob.list{/lang} <span class="badge" title="{lang}wcf.acp.cronjob.list.count{/lang}">{#$items}</span></h1>
+			<h1>{lang}wcf.acp.cronjob.list{/lang} <span class="badge badgeInverse" title="{lang}wcf.acp.cronjob.list.count{/lang}">{#$items}</span></h1>
 		</hgroup>
 		
 		<table class="table">
diff --git a/wcfsetup/install/files/acp/templates/cronjobLogList.tpl b/wcfsetup/install/files/acp/templates/cronjobLogList.tpl
index 31e6c2525b..aeb8583adb 100644
--- a/wcfsetup/install/files/acp/templates/cronjobLogList.tpl
+++ b/wcfsetup/install/files/acp/templates/cronjobLogList.tpl
@@ -1,7 +1,6 @@
 {include file='header'}
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/time1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.cronjob.log{/lang}</h1>
 		<h2>{lang}wcf.acp.cronjob.subtitle{/lang}</h2>
diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 8a9641d892..7f83b9e95f 100644
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -82,7 +82,6 @@
 			new WCF.Date.Time();
 			new WCF.Effect.SmoothScroll();
 			new WCF.Effect.BalloonTooltip();
-			$('<span class="pointer"><span></span></span>').appendTo('.wcf-innerError');
 			
 			$('#sidebarContent').wcfSidebar();
 			
@@ -103,14 +102,20 @@
 				<!-- top menu -->
 				<nav id="topMenu" class="userPanel">
 					<div class="layoutFluid clearfix">
-						<ul>
+						<ul class="userPanelItems">
 							<li id="userMenu" class="dropdown">
-								<span class="dropdownToggle" data-toggle="userMenu">{event name='userAvatar'} {lang}wcf.user.userNote{/lang}</span>
+								<a class="dropdownToggle" data-toggle="userMenu">{event name='userAvatar'} {lang}wcf.user.userNote{/lang}</a>
 								<ul class="dropdownMenu">
 									<li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" onclick="return confirm('{lang}wcf.user.logout.sure{/lang}')">{lang}wcf.user.logout{/lang}</a></li>
 								</ul>
 							</li>
 						</ul>
+						
+						<aside id="search" class="searchBar">
+							<form method="post" action="{link controller='Search'}{/link}">
+								<input type="search" name="q" placeholder="{lang}wcf.global.search.enterSearchTerm{/lang}" value="" />
+							</form>
+						</aside>
 					</div>
 				</nav>
 				<!-- /top menu -->
@@ -156,7 +161,7 @@
 	<!-- /HEADER -->
 	
 	<!-- MAIN -->
-	<div id="main" class="layoutFluid sidebarOrientationLeft">
+	<div id="main" class="layoutFluid{if $__wcf->user->userID} sidebarOrientationLeft{/if}">
 		<div>
 			{hascontent}
 				<!-- SIDEBAR -->
diff --git a/wcfsetup/install/files/acp/templates/login.tpl b/wcfsetup/install/files/acp/templates/login.tpl
index fa2e06e7f8..ad684445ac 100644
--- a/wcfsetup/install/files/acp/templates/login.tpl
+++ b/wcfsetup/install/files/acp/templates/login.tpl
@@ -14,58 +14,58 @@
 	//]]>
 </script>
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/logIn1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{@$pageTitle}</h1>
 	</hgroup>
 </header>
 
 {if $errorField}
-	<p class="wcf-error">{lang}wcf.global.form.error{/lang}</p>
+	<p class="error">{lang}wcf.global.form.error{/lang}</p>
 {/if}
 
 <form method="post" action="{link controller='Login'}{/link}">
-	<fieldset>
-		<legend>{lang}wcf.user.login.data{/lang}</legend>
+	<div class="container containerPadding marginTop shadow">
+		<fieldset>
+			<legend>{lang}wcf.user.login.data{/lang}</legend>
+			
+			<dl{if $errorField == 'username'} class="formError"{/if}>
+				<dt><label for="username">{lang}wcf.user.username{/lang}</label></dt>
+				<dd><input type="text" id="username" name="username" value="{$username}" class="medium" />
+					{if $errorField == 'username'}
+						<small class="innerError">
+							{if $errorType == 'empty'}
+								{lang}wcf.global.form.error.empty{/lang}
+							{else}
+								{lang}wcf.user.username.error.{@$errorType}{/lang}
+							{/if}
+						</small>
+					{/if}
+				</dd>
+			</dl>
+			
+			<dl{if $errorField == 'password'} class="formError"{/if}>
+				<dt><label for="password">{lang}wcf.user.password{/lang}</label></dt>
+				<dd><input type="password" id="password" name="password" value="" class="medium" />
+					{if $errorField == 'password'}
+						<small class="innerError">
+							{if $errorType == 'empty'}
+								{lang}wcf.global.form.error.empty{/lang}
+							{else}
+								{lang}wcf.user.password.error.{@$errorType}{/lang}
+							{/if}
+						</small>
+					{/if}
+				</dd>
+			</dl>
+			
+			{event name='dataFields'}
+		</fieldset>
 		
-		<dl{if $errorField == 'username'} class="formError"{/if}>
-			<dt><label for="username">{lang}wcf.user.username{/lang}</label></dt>
-			<dd><input type="text" id="username" name="username" value="{$username}" class="medium" />
-				{if $errorField == 'username'}
-					<small class="innerError">
-						{if $errorType == 'empty'}
-							{lang}wcf.global.form.error.empty{/lang}
-						{else}
-							{lang}wcf.user.username.error.{@$errorType}{/lang}
-						{/if}
-					</small>
-				{/if}
-			</dd>
-		</dl>
-		
-		<dl{if $errorField == 'password'} class="formError"{/if}>
-			<dt><label for="password">{lang}wcf.user.password{/lang}</label></dt>
-			<dd><input type="password" id="password" name="password" value="" class="medium" />
-				{if $errorField == 'password'}
-					<small class="innerError">
-						{if $errorType == 'empty'}
-							{lang}wcf.global.form.error.empty{/lang}
-						{else}
-							{lang}wcf.user.password.error.{@$errorType}{/lang}
-						{/if}
-					</small>
-				{/if}
-			</dd>
-		</dl>
-		
-		{event name='dataFields'}
-	</fieldset>
-	
-	{event name='fieldsets'}
+		{event name='fieldsets'}
+	</div>
 	
 	<div class="formSubmit">
-		<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
 		<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
 		<input type="hidden" name="url" value="{$url}" />
 	</div>
diff --git a/wcfsetup/install/files/acp/templates/option.tpl b/wcfsetup/install/files/acp/templates/option.tpl
index 1d091fb8bd..c9e5b24f36 100644
--- a/wcfsetup/install/files/acp/templates/option.tpl
+++ b/wcfsetup/install/files/acp/templates/option.tpl
@@ -9,8 +9,7 @@
 	//]]>
 </script>
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/options1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.option.category.{$category->categoryName}{/lang}</h1>
 		{hascontent}<h2>{content}{lang __optional=true}wcf.acp.option.category.{$category->categoryName}.description{/lang}{/content}</h2>{/hascontent}
@@ -37,11 +36,6 @@
 		
 		{foreach from=$optionTree item=categoryLevel1}
 			<div id="{@$categoryLevel1[object]->categoryName}" class="container containerPadding shadow hidden tabMenuContent">
-				<hgroup class="boxSubHeadline">
-					<h1>{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}</h1>
-					<h2>{lang __optional=true}wcf.acp.option.category.{$categoryLevel1[object]->categoryName}.description{/lang}</h2>
-				</hgroup>
-				
 				{if $categoryLevel1[options]|count}
 					<fieldset>
 						<legend>{lang}wcf.acp.option.category.{$categoryLevel1[object]->categoryName}{/lang}</legend>
@@ -64,7 +58,6 @@
 	</div>
 	
 	<div class="formSubmit">
-		<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
 		<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
  	</div>
 </form>
diff --git a/wcfsetup/install/files/acp/templates/optionImport.tpl b/wcfsetup/install/files/acp/templates/optionImport.tpl
index a0838a4089..4b4f0308a0 100644
--- a/wcfsetup/install/files/acp/templates/optionImport.tpl
+++ b/wcfsetup/install/files/acp/templates/optionImport.tpl
@@ -1,13 +1,12 @@
 {include file='header'}
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/upload1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.option.import{/lang}</h1>
 	</hgroup>
 </header>
 
-{if $errorField != ''}
+{if $errorField}
 	<p class="error">{lang}wcf.global.form.error{/lang}</p>
 {/if}
 
@@ -16,7 +15,7 @@
 {/if}
 
 <form method="post" action="{link controller='OptionImport'}{/link}" enctype="multipart/form-data">
-	<div>
+	<div class="container containerPadding marginTop shadow">
 		<fieldset>
 			<legend>{lang}wcf.acp.option.import{/lang}</legend>
 		
@@ -44,19 +43,17 @@
 	</div>
 	
 	<div class="formSubmit">
-		<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
 		<input type="submit" name="submitButton" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
 	</div>
 </form>
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/download1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.option.export{/lang}</h1>
 	</hgroup>
 </header>
 
-<div>
+<div class="container containerPadding marginTop shadow">
 	<fieldset>
 		<legend>{lang}wcf.acp.option.export{/lang}</legend>
 		
diff --git a/wcfsetup/install/files/acp/templates/packageAutoUpdateList.tpl b/wcfsetup/install/files/acp/templates/packageAutoUpdateList.tpl
index dd81555a2d..ae508cafcc 100644
--- a/wcfsetup/install/files/acp/templates/packageAutoUpdateList.tpl
+++ b/wcfsetup/install/files/acp/templates/packageAutoUpdateList.tpl
@@ -22,8 +22,7 @@
 </script>
 
 <form method="post" action="{link controller='PackageUpdate'}{/link}" id="updateForm">
-	<header class="box48 boxHeadline">
-		<img src="{@$__wcf->getPath()}icon/update1.svg" alt="" class="icon48" />
+	<header class="boxHeadline">
 		<hgroup>
 			<h1>{lang}wcf.acp.packageUpdate{/lang}</h1>
 			{if $availableUpdates|count}
diff --git a/wcfsetup/install/files/acp/templates/packageList.tpl b/wcfsetup/install/files/acp/templates/packageList.tpl
index be78aa0aee..3fb05cbde4 100644
--- a/wcfsetup/install/files/acp/templates/packageList.tpl
+++ b/wcfsetup/install/files/acp/templates/packageList.tpl
@@ -22,8 +22,7 @@
 	//]]>
 </script>
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.package.list{/lang}</h1>
 	</hgroup>
@@ -38,10 +37,6 @@
 	</nav>
 	
 	<div id="applications" class="container containerPadding tabMenuContent hidden">
-		<hgroup class="boxSubHeadline">
-			<h1>{lang}wcf.acp.package.application.installed{/lang}</h1>
-		</hgroup>
-		
 		<ol class="applicationList">
 			{foreach from=$applications key=packageID item=package}
 				<li>
@@ -92,10 +87,6 @@
 	
 	{hascontent}
 		<div id="plugins" class="container containerPadding tabMenuContent hidden">
-			<hgroup class="boxSubHeadline">
-				<h1>{lang}wcf.acp.package.plugin.installed{/lang}</h1>
-			</hgroup>
-			
 			<div class="wcf-contentHeader jsPluginListPagination">
 				
 			</div>
diff --git a/wcfsetup/install/files/acp/templates/packageListDetailed.tpl b/wcfsetup/install/files/acp/templates/packageListDetailed.tpl
index 4a3eab7b80..eaf0e08d66 100644
--- a/wcfsetup/install/files/acp/templates/packageListDetailed.tpl
+++ b/wcfsetup/install/files/acp/templates/packageListDetailed.tpl
@@ -10,8 +10,7 @@
 	//]]>
 </script>
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.package.list{/lang}</h1>
 	</hgroup>
diff --git a/wcfsetup/install/files/acp/templates/packageStartInstall.tpl b/wcfsetup/install/files/acp/templates/packageStartInstall.tpl
index f52835a64d..86c4f01c00 100644
--- a/wcfsetup/install/files/acp/templates/packageStartInstall.tpl
+++ b/wcfsetup/install/files/acp/templates/packageStartInstall.tpl
@@ -1,13 +1,11 @@
 {include file='header'}
 
-<header class="box48 boxHeadline">
+<header class="boxHeadline">
 	{if $packageID == 0}
-		<img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon48" />
 		<hgroup>
 			<h1>{lang}wcf.acp.package.startInstall{/lang}</h1>
 		</hgroup>
 	{else}
-		<img src="{@$__wcf->getPath()}icon/update1.svg" alt="" class="icon48" />
 		<hgroup>
 			<h1>{lang}wcf.acp.package.startUpdate{/lang}</h1>
 		</hgroup>
diff --git a/wcfsetup/install/files/acp/templates/packageUpdateSearch.tpl b/wcfsetup/install/files/acp/templates/packageUpdateSearch.tpl
index 64db44cd0d..26cedff95c 100644
--- a/wcfsetup/install/files/acp/templates/packageUpdateSearch.tpl
+++ b/wcfsetup/install/files/acp/templates/packageUpdateSearch.tpl
@@ -37,8 +37,7 @@
 	//]]>
 </script>
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/search1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.packageUpdate.search{/lang}</h1>
 	</hgroup>
diff --git a/wcfsetup/install/files/acp/templates/updateServerAdd.tpl b/wcfsetup/install/files/acp/templates/updateServerAdd.tpl
index de6db7a3de..76761e3a78 100644
--- a/wcfsetup/install/files/acp/templates/updateServerAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/updateServerAdd.tpl
@@ -1,7 +1,6 @@
 {include file='header'}
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/{@$action}1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.updateServer.{$action}{/lang}</h1>
 	</hgroup>
diff --git a/wcfsetup/install/files/acp/templates/updateServerList.tpl b/wcfsetup/install/files/acp/templates/updateServerList.tpl
index f151bf34ad..f46c704480 100644
--- a/wcfsetup/install/files/acp/templates/updateServerList.tpl
+++ b/wcfsetup/install/files/acp/templates/updateServerList.tpl
@@ -9,8 +9,7 @@
 	//]]>
 </script>
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/server1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.updateServer.list{/lang}</h1>
 	</hgroup>
diff --git a/wcfsetup/install/files/acp/templates/userAdd.tpl b/wcfsetup/install/files/acp/templates/userAdd.tpl
index acaf72e95c..2f155a96e0 100644
--- a/wcfsetup/install/files/acp/templates/userAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/userAdd.tpl
@@ -8,8 +8,7 @@
 	//]]>
 </script>
 
-<header class="box48 boxHeadline">
-	<img {if $userID|isset}id="userEdit{@$userID}" {/if}src="{@$__wcf->getPath()}icon/{@$action}1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.user.{@$action}{/lang}</h1>
 	</hgroup>
@@ -159,10 +158,6 @@
 			
 				{foreach from=$optionTree item=categoryLevel1}
 					<div id="{@$categoryLevel1[object]->categoryName}" class="container containerPadding tabMenuContent hidden">
-						<hgroup class="boxSubHeadline">
-							<h1>{lang}wcf.user.option.category.{@$categoryLevel1[object]->categoryName}{/lang}</h1>
-						</hgroup>
-					
 						{foreach from=$categoryLevel1[categories] item=categoryLevel2}
 							<fieldset>
 								<legend>{lang}wcf.user.option.category.{@$categoryLevel2[object]->categoryName}{/lang}</legend>
diff --git a/wcfsetup/install/files/acp/templates/userGroupAdd.tpl b/wcfsetup/install/files/acp/templates/userGroupAdd.tpl
index a7b520b025..bfc3899ee7 100644
--- a/wcfsetup/install/files/acp/templates/userGroupAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/userGroupAdd.tpl
@@ -12,8 +12,7 @@
 	//]]>
 </script>
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/{@$action}1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.group.{@$action}{/lang}</h1>
 	</hgroup>
@@ -89,11 +88,6 @@
 					
 					{foreach from=$categoryLevel1[categories] item=categoryLevel2}
 						<div id="{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}" class="hidden">
-							<hgroup class="boxSubHeadline">
-								<h1>{lang}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}{/lang}</h1>
-								{hascontent}<h2>{content}{lang __optional=true}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}.description{/lang}{/content}</h2>{/hascontent}
-							</hgroup>
-							
 							{if $categoryLevel2[options]|count}
 								{include file='optionFieldList' options=$categoryLevel2[options] langPrefix='wcf.acp.group.option.'}
 							{/if}
diff --git a/wcfsetup/install/files/acp/templates/userGroupList.tpl b/wcfsetup/install/files/acp/templates/userGroupList.tpl
index 9c32d86362..bceb3d4905 100644
--- a/wcfsetup/install/files/acp/templates/userGroupList.tpl
+++ b/wcfsetup/install/files/acp/templates/userGroupList.tpl
@@ -8,8 +8,7 @@
 	//]]>
 </script>
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/users1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.group.list{/lang}</h1>
 	</hgroup>
diff --git a/wcfsetup/install/files/acp/templates/userList.tpl b/wcfsetup/install/files/acp/templates/userList.tpl
index 248379fb9c..467b3b505b 100644
--- a/wcfsetup/install/files/acp/templates/userList.tpl
+++ b/wcfsetup/install/files/acp/templates/userList.tpl
@@ -19,8 +19,7 @@
 	//]]>
 </script>
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/{if $searchID}search{else}user{/if}1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.user.{if $searchID}search{else}list{/if}{/lang}</h1>
 	</hgroup>
diff --git a/wcfsetup/install/files/acp/templates/userMail.tpl b/wcfsetup/install/files/acp/templates/userMail.tpl
index 32af24703c..6938a0efc8 100644
--- a/wcfsetup/install/files/acp/templates/userMail.tpl
+++ b/wcfsetup/install/files/acp/templates/userMail.tpl
@@ -12,8 +12,7 @@
 	</script>
 {/if}
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/email1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>
 			{if $action == 'all'}
diff --git a/wcfsetup/install/files/acp/templates/userSearch.tpl b/wcfsetup/install/files/acp/templates/userSearch.tpl
index caee11afe1..0e555d75ac 100644
--- a/wcfsetup/install/files/acp/templates/userSearch.tpl
+++ b/wcfsetup/install/files/acp/templates/userSearch.tpl
@@ -8,8 +8,7 @@
 	//]]>
 </script>
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/search1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.user.search{/lang}</h1>
 	</hgroup>
@@ -126,10 +125,6 @@
 			
 			{if $optionTree|count}
 				<div id="profile" class="container containerPadding tabMenuContent hidden">
-					<hgroup class="boxSubHeadline">
-						<h1>{lang}wcf.acp.user.search.conditions.profile{/lang}</h1>
-					</hgroup>
-					
 					{foreach from=$optionTree[0][categories] item=category}
 						<fieldset>
 							<legend>{lang}wcf.user.option.category.{@$category[object]->categoryName}{/lang}</legend>
@@ -146,10 +141,6 @@
 			{event name='tabMenuContent'}
 		
 			<div id="resultOptions" class="container containerPadding tabMenuContent hidden">
-				<hgroup class="boxSubHeadline">
-					<h1>{lang}wcf.acp.user.search.display{/lang}</h1>
-				</hgroup>
-				
 				<fieldset>
 					<legend>{lang}wcf.acp.user.search.display.general{/lang}</legend>
 				
diff --git a/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl b/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl
index 79fe939c4e..ae0a9916ad 100644
--- a/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl
+++ b/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl
@@ -60,8 +60,7 @@
 	//]]>
 </script>
 
-<header class="box48 boxHeadline">
-	<img src="{@$__wcf->getPath()}icon/user1.svg" alt="" class="icon48" />
+<header class="boxHeadline">
 	<hgroup>
 		<h1>{lang}wcf.acp.user.massProcessing{/lang}</h1>
 	</hgroup>
@@ -79,10 +78,6 @@
 
 <form method="post" action="{link controller='UsersMassProcessing'}{/link}">
 	<div class="container containerPadding marginTop shadow">
-		<hgroup class="boxSubHeadline">
-			<h1>{lang}wcf.acp.user.massProcessing.conditions{/lang}</h1>
-		</hgroup>
-		
 		<fieldset>
 			<legend>{lang}wcf.acp.user.search.conditions.general{/lang}</legend>
 			
@@ -154,10 +149,6 @@
 				
 				{if $options|count}
 					<div id="profile" class="container containerPadding tabMenuContent hidden">
-						<hgroup class="boxSubHeadline">
-							<h1>{lang}wcf.acp.user.search.conditions.profile{/lang}</h1>
-						</hgroup>
-						
 						{include file='optionFieldList' langPrefix='wcf.user.option.'}
 					</div>
 				{/if}
@@ -168,10 +159,6 @@
 	</div>
 	
 	<div class="container containerPadding marginTop shadow">
-		<hgroup class="boxSubHeadline">
-			<h1>{lang}wcf.acp.user.massProcessing.action{/lang}</h1>
-		</hgroup>
-			
 		<dl{if $errorField == 'action'} class="formError"{/if}>
 			<dt><label>{lang}wcf.acp.user.massProcessing.action{/lang}</label></dt>
 			<dd>
diff --git a/wcfsetup/install/files/style/alerts.less b/wcfsetup/install/files/style/alerts.less
index d475dbd205..371cadfdcf 100644
--- a/wcfsetup/install/files/style/alerts.less
+++ b/wcfsetup/install/files/style/alerts.less
@@ -25,6 +25,10 @@
 		top: 4px;
 		width: 24px;
 	}
+	
+	a {
+		text-decoration: underline;
+	}
 }
 
 /* types */
@@ -37,6 +41,10 @@
 	&:after {
 		background-image: url('../icon/systemInfo.svg');
 	}
+	
+	a {
+		color: @wcfInfoColor;
+	}
 }
 
 .success {
@@ -48,6 +56,10 @@
 	&:after {
 		background-image: url('../icon/systemSuccess.svg');
 	}
+	
+	a {
+		color: @wcfInfoColor;
+	}
 }
 
 .warning {
@@ -59,6 +71,10 @@
 	&:after {
 		background-image: url('../icon/systemWarning.svg');
 	}
+	
+	a {
+		color: @wcfInfoColor;
+	}
 }
 
 .error {
@@ -70,6 +86,10 @@
 	&:after {
 		background-image: url('../icon/systemError.svg');
 	}
+	
+	a {
+		color: @wcfInfoColor;
+	}
 }
 
 /* Inline Errors */
diff --git a/wcfsetup/install/files/style/attachment.less b/wcfsetup/install/files/style/attachment.less
index 4901365d72..de104e58a6 100644
--- a/wcfsetup/install/files/style/attachment.less
+++ b/wcfsetup/install/files/style/attachment.less
@@ -1,5 +1,82 @@
 /* #### 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: 4px 0 0;
+	}
+}
+
+.attachmentThumbnailList {
+	> ul > li {
+		margin: 0 0 14px 7px;
+	}
+}
+
+.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 {
+		.borderRadius();
+	}
+	
+	> hgroup {
+		background-color: rgba(0, 0, 0, 0.6);
+		bottom: 0;
+		color: #fff;
+		position: absolute;
+		width: 100%;
+		padding: 7px 0;
+		
+		.borderRadius(0, 0, 5px, 5px);
+		
+		> h1, h2 {
+			margin: 0 7px;
+			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;
diff --git a/wcfsetup/install/files/style/badge.less b/wcfsetup/install/files/style/badge.less
index 3a614c2e43..12aaa6d825 100644
--- a/wcfsetup/install/files/style/badge.less
+++ b/wcfsetup/install/files/style/badge.less
@@ -65,4 +65,9 @@
 .mainMenu .active .badge {
 	font-size: 65%;
 	top: -2px;
+}
+
+.tabularBoxTitle > hgroup > h1 .badge {
+	font-size: 70%;
+	top: -1px;
 }
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/codebox.less b/wcfsetup/install/files/style/codebox.less
index 97fd3366be..7b94469966 100644
--- a/wcfsetup/install/files/style/codebox.less
+++ b/wcfsetup/install/files/style/codebox.less
@@ -1,46 +1,47 @@
 /* Code Box */
 .codeBox {
-	padding: 0;
+	background-color: @wcfContentBackgroundColor;
+	
+	> div {
+		overflow: hidden;
+	}
+	
+	&:hover {
+		> div {
+			overflow: auto;
+		}
+	}
 	
 	hgroup {
-		background-color: @wcfContainerHoverBackgroundColor;
-		border-top-left-radius: @wcfContainerBorderRadius;
-		border-top-right-radius: @wcfContainerBorderRadius;
+		border-bottom: 1px dotted @wcfContainerBorderColor;
 		
 		h1 {
-			padding: 4px 7px;
+			padding-bottom: 4px;
 			font-weight: bold;
 		}
 	}
 	
 	dl {
 		display: table;
+		margin-top: 7px;
 		width: 100%;
-		padding: 0;
-		margin: 0;
-		overflow-x: auto;
 		
 		dt {
 			text-align: right;
-			background-color: @wcfContainerAccentBackgroundColor;
-			border-bottom-left-radius: @wcfContainerBorderRadius;
-			padding: 0;
-			margin: 0;
 			display: table-cell;
 			width: 1%;
-			float: none;
 			
 			pre {
-				padding: 4px;
+				padding: 4px 7px;
 				
 				a {
 					display: block;
-					margin: 0 -4px;
-					padding: 0 5px;
+					margin: 0 -7px;
+					padding: 0 7px;
 					text-decoration: none;
 					
 					&:target {
-						color: rgba(0, 0, 0, 1);
+						color: #000;
 						background-color: #ff3; 
 					}
 				}
@@ -48,15 +49,11 @@
 		}
 		
 		dd {
-			background-color: @wcfContentBackgroundColor;
 			display: table-cell;
 			width: 100%;
-			padding: 0;
-			margin: 0;
-			border-bottom-right-radius: @wcfContainerBorderRadius;
 			
 			pre {
-				padding: 4px;
+				padding: 4px 7px;
 			}
 		}
 	
@@ -170,16 +167,23 @@
 	background-image: url('../images/quote.png');
 	background-position: 12px 12px;
 	background-repeat: no-repeat;
-	padding: 10px 20px 10px 58px;
+	padding-left: 58px;
 	min-height: 28px;
+	margin-bottom: @wcfGapTiny;
 	
 	header {
-		padding: 0 0 4px 0 !important;
+		padding-bottom: 4px;
 		border-bottom: 1px dotted @wcfContainerBorderColor;
-		margin-bottom: 8px;
+		margin-bottom: 7px;
 		
 		h1 {
 			font-weight: bold;
 		}
 	}
+	
+	.quoteBox {
+		background-image: none;
+		padding-left: 21px;
+		min-height: 0;
+	}
 }
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/forms.less b/wcfsetup/install/files/style/forms.less
index 0670b3da1b..9fbcc2bf64 100644
--- a/wcfsetup/install/files/style/forms.less
+++ b/wcfsetup/install/files/style/forms.less
@@ -1,176 +1,159 @@
-select > option {
-	/* Fixes weird firefox bug */
-	display: block !important;
-}
-
 /* ############## Fieldsets ############## */
 fieldset {
-	background-color: @wcfContainerBackgroundColor;
-	border: 1px solid @wcfContainerBorderColor;
-	border-radius: @wcfContainerBorderRadius;
-	box-sizing: border-box;
-	margin: @wcfGapMedium 0 0;
-	padding: @wcfGapTiny @wcfGapMedium @wcfGapMedium;
-}
-
-.container fieldset {
-	background-color: @wcfContainerAccentBackgroundColor;
-}
-
-fieldset:last-child,
-fieldset:only-child {
-	margin-bottom: @wcfGapSmall !important;
-}
-
-fieldset legend {
-	margin: auto -@wcfGapSmall;
-	padding: 0 @wcfGapSmall 0;
+	padding-top: @wcfGapMedium;
 	
-	.textShadow(@wcfContainerAccentBackgroundColor);
-}
-
-fieldset legend label {
-	color: @wcfColor;
-}
-
-fieldset legend ~ p {
-	margin-bottom: @wcfGapMedium;
-}
-
-/* ############## Labeled Content ############## */
-
-/* Simple */
-
-dl {
-	margin-top: @wcfGapSmall;
-	position: relative;
-}
-
-fieldset dl:first-of-type {
-	margin-top: 0;
-}
-
-dl > dt {
-	color: @wcfLabelColor; //rgba(102, 153, 204, 1);
-	float: left;
-	margin-top: 5px;
-	text-align: right;
-}
-
-dl > dt {
-	width: 230px;
-}
-
-dl.wide > dt {
-	display: none;
-}
-
-dl > dt > label {
-	display: block;
-	margin-top: 5px;
-}
-
-dl.disabled > dt {
-	color: @wcfDimmedColor;
-}
-
-dl > dd {
-	padding-top: 5px;
-}
-
-dl > dd {
-	margin-left: 250px;
-}
-
-dl.wide > dd {
-	margin-left: 0;
-}
-
-dl > dd > small {
-	color: @wcfDimmedColor;
-	display: block;
-}
-
-/* Nested */
-
-dl > dd > fieldset {
-	margin-top: 0;
-	margin-bottom: 0;
-	padding-top: 5px;
-	padding-bottom: 5px;
-}
-
-dl > dd > fieldset > legend {
-	display: none;
-}
-
-dl > dd > fieldset > dl > dt {
-	margin-right: 20px;
-	width: 150px;
-}
-
-dl > dd > fieldset > dl > dd {
-	margin-left: 0;
-}
-
-dl > dd > fieldset > dl > dd > label {
-	display: block;
-}
-
-/* Reversed (flips the label aside the checkbox or radio button) - 
-	use only when automatically generating checkboxes or radio-buttons! */
-
-.reversed {
-	margin-top: 2px;
-	position: absolute;
-	text-align: left;
-	width: auto;
-}
-
-.reversed {
-	left: 270px;
-}
-
-.reversed ~ dd > input[type='checkbox'] {
-	margin-left: 0;
+	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;
+		
+		> 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;
+			}
+			
+			/* nested fieldsets */
+			> fieldset {
+				padding-top: 0;
+				
+				> legend {
+					display: none;
+				}
+				
+				> dl {
+					> dt {
+						margin-right: 20px;
+						width: 150px;
+					}
+					
+					> dd {
+						margin-left: 0;
+						
+						> label {
+							display: block;
+						}
+					}
+				}
+			}
+			
+			> label {
+				color: @wcfLabelColor;
+				
+				> input[type='checkbox'], > input[type='radio'] {
+					margin: 2px;
+				}
+				
+				~ small {
+					margin-left: 21px;
+				}
+			}
+		}
+		
+		/* wide */
+		&.wide {
+			> dt {
+				display: none;
+			}
+			
+			> dd {
+				margin-left: 0;
+			}
+		}
+		
+		/* disabled state */
+		&.disabled > dt {
+			color: @wcfDimmedColor;
+		}
+	}
 }
 
 /* Special -> Sidebar */
-
-.sidebar dl > dt {
-	text-align: left;
-	float: none;
-	width: auto;
-}
-
-.sidebar dl > dd {
-	display: block;
-	margin-left: 0;
-	margin-bottom: 13px;
-}	
-
-.sidebar dl > dd * {
-	display: inline-block;
-}
-
-/* Globals */
-
-label {
-	color: @wcfLabelColor;
+.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: 15px;
+	margin-top: @wcfGapMedium;
 	text-align: center;
 }
 
-input[type='checkbox'] ~ small,
+/*input[type='checkbox'] ~ small,
 input[type='radio'] ~ small {
 	margin-top: 0;
 	margin-left: 21px;
-}
+}*/
 
 /* todo ckeditor fixes */
 .cke_skin_kama {
@@ -178,6 +161,11 @@ input[type='radio'] ~ small {
 	padding: 0 !important;
 }
 
+/* todo: smiley list */
+#smilies > ul > li {
+	display: inline;
+}
+
 /* element list with checkboxes */
 .structuredList {
 	background-color: @wcfContainerBackgroundColor;
@@ -216,4 +204,10 @@ input[type='radio'] ~ small {
 			padding: 0 @wcfGapLarge;
 		}
 	}
+}
+
+/* todo */
+select > option {
+	/* Fixes weird firefox bug */
+	display: block !important;
 }
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/inputs.less b/wcfsetup/install/files/style/inputs.less
index 65601083eb..e0e4e155f1 100644
--- a/wcfsetup/install/files/style/inputs.less
+++ b/wcfsetup/install/files/style/inputs.less
@@ -21,6 +21,12 @@ textarea,
 select[multiple] {
 	box-sizing: border-box;
 	padding: 5px 3px;
+	margin: 0;
+}
+
+select {
+	padding: 1px 1px 1px 3px;
+	margin: 0;
 }
 
 select[multiple] {
diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index 0500fb5b0c..48b7507e9c 100644
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -56,6 +56,12 @@ img {
 	vertical-align: middle !important;
 }
 
+::selection {
+	text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
+	color: #300;
+	background-color: rgba(255, 170, 34, .7);
+}
+
 /* basic layout elements */
 .layoutFluid {
 	padding: 0 @wcfLayoutFluidGap;
@@ -87,13 +93,13 @@ img {
 		}
 		
 		&:first-child {
-			border-top-left-radius: @wcfContainerBorderRadius;
-			border-top-right-radius: @wcfContainerBorderRadius;
+			border-top-left-radius: @wcfContainerBorderRadius - 1;
+			border-top-right-radius: @wcfContainerBorderRadius - 1;
 		}
 		
 		&:last-child {
-			border-bottom-left-radius: @wcfContainerBorderRadius;
-			border-bottom-right-radius: @wcfContainerBorderRadius;
+			border-bottom-left-radius: @wcfContainerBorderRadius - 1;
+			border-bottom-right-radius: @wcfContainerBorderRadius - 1;
 		}
 		
 		&:hover {
@@ -154,7 +160,7 @@ img {
 .box256 { .box(256px, 32px); }
 
 .boxHeadline {
-	margin-top: @wcfGapLarge;
+	margin-top: @wcfGapMedium;
 	
 	hgroup {
 		> h1 {
@@ -162,8 +168,6 @@ img {
 			font-family: @wcfHeadlineFontFamily;
 			font-size: @wcfHeadlineFontSize;
 			font-weight: bold;
-			border-bottom: 1px solid @wcfHeadlineColor;
-			padding: 1px 0 5px;
 			
 			.textShadow(@wcfContentBackgroundColor);
 			
@@ -173,27 +177,10 @@ img {
 			}
 		}
 		
-		> h2 {
+		> h2, h3 {
 			color: @wcfDimmedColor;
-			padding-top: 5px;
+			font-size: @wcfSmallFontSize;
 		}
-		
-		> h3 {
-			color: @wcfDimmedColor;
-		}
-	}
-}
-
-.boxSubHeadline {
-	> h1 {
-		border-bottom: 1px solid @wcfDimmedColor;
-		color: @wcfDimmedColor;
-		font-family: @wcfHeadlineFontFamily;
-		font-size: @wcfSubHeadlineFontSize;
-		font-weight: bold;
-		padding: 1px 0 5px;
-
-		.textShadow(@wcfContainerBackgroundColor);
 	}
 }
 
diff --git a/wcfsetup/install/files/style/message.less b/wcfsetup/install/files/style/message.less
index 15ade9d173..6153dc107b 100644
--- a/wcfsetup/install/files/style/message.less
+++ b/wcfsetup/install/files/style/message.less
@@ -30,7 +30,7 @@
 		float: left;
 	}
 	
-	header > .pointer {
+	.messageHeader > .pointer {
 		border-color: transparent @wcfContainerBorderColor transparent transparent;
 		border-style: solid solid solid none;
 		left: -20px;
@@ -53,7 +53,7 @@
 		float: right;
 	}
 	
-	header > .pointer {
+	.messageHeader > .pointer {
 		border-color: transparent transparent transparent @wcfContainerBorderColor;
 		border-style: solid none solid solid;
 		right: -20px;
@@ -80,13 +80,13 @@
 	
 	.messageSidebar > div {
 		> div,
-		> header {
+		> .messageHeader {
 			vertical-align: top;
 		}
 	}
 }
 
-.message header {
+.message .messageHeader {
 	> .pointer {
 		border-width: 20px;
 		display: block !important;
@@ -148,7 +148,7 @@
 	
 	.borderRadius();
 	
-	header {
+	.messageHeader {
 		padding: 20px 20px 0;
 		position: relative;
 		
@@ -303,11 +303,11 @@
 }
 
 li:nth-child(2n+1) .message {
-	&.messageSidebarOrientationLeft header > .pointer > span {
+	&.messageSidebarOrientationLeft .messageHeader > .pointer > span {
 		border-right-color: @wcfContainerAccentBackgroundColor;
 	}
 	
-	&.messageSidebarOrientationRight header > .pointer > span {
+	&.messageSidebarOrientationRight .messageHeader > .pointer > span {
 		border-left-color: @wcfContainerAccentBackgroundColor;
 	}
 	
diff --git a/wcfsetup/install/files/style/sidebar.less b/wcfsetup/install/files/style/sidebar.less
index 5745a89668..cb02225aab 100644
--- a/wcfsetup/install/files/style/sidebar.less
+++ b/wcfsetup/install/files/style/sidebar.less
@@ -82,14 +82,15 @@
 			
 			/* forms */
 			fieldset {
-				background-color: transparent;
-				border-width: 0;
-				margin: 0;
 				padding: @wcfGapSmall 0 0;
 				
 				legend {
+					border-width: 0;
+					color: @wcfColor;
+					font-family: @wcfBaseFontFamily;
+					font-weight: normal;
+					font-size: 100%;
 					padding: 0;
-					margin: auto;
 					text-transform: uppercase;
 						
 					.textShadow(@wcfSidebarBackgroundColor);
diff --git a/wcfsetup/install/files/style/tabs.less b/wcfsetup/install/files/style/tabs.less
index da490cd275..3cdd6d3cb0 100644
--- a/wcfsetup/install/files/style/tabs.less
+++ b/wcfsetup/install/files/style/tabs.less
@@ -102,6 +102,7 @@
 .tabMenuContent {
 	display: block;
 	margin-top: -1px;
+	min-height: @wcfGapLarge;
 	position: relative;
 	z-index: 20; /* Prevents border overlay during transition */
 }
@@ -151,11 +152,6 @@
 	}
 }
 
-/* random stuff  */
-fieldset ~ .tabMenuContainer .tabMenu {
-	margin-top: 30px;
-}
-
 /* ToDo: 2x hidden? */
 .ui-tabs .ui-tabs-hide {
 	display: none !important;
diff --git a/wcfsetup/install/files/style/tabular.less b/wcfsetup/install/files/style/tabular.less
index 5083974e2b..3982123524 100644
--- a/wcfsetup/install/files/style/tabular.less
+++ b/wcfsetup/install/files/style/tabular.less
@@ -1,7 +1,6 @@
 .tabularBox {
-	background-image: url(../../images/header.png);
-	
 	background-color: @wcfTabularBoxBackgroundColor;
+	background-image: url(../../images/header.png);
 	border: 1px solid @wcfContainerBorderColor;
 	
 	.borderRadius();
@@ -9,7 +8,7 @@
 
 .tabularBoxTitle > hgroup {
 	color: @wcfTabularBoxColor;
-	padding: @wcfGapSmall;
+	padding: 5px 7px;
 
 	h1 {
 		font-size: 120%;
@@ -21,7 +20,7 @@
 			color: @wcfTabularBoxColor;
 			
 			&:hover {
-				color: @wcfTabularBoxColor;
+				color: @wcfTabularBoxHoverColor;
 				text-decoration: none;
 			}
 		}
@@ -42,7 +41,7 @@
 
 .table {
 	border-spacing: 0;
-	width: 100% !important;
+	width: 100%;
 	
 	/* cells */
 	th,
@@ -54,17 +53,17 @@
 	
 	/* headline */
 	th {
+		background-color: rgba(0, 0, 0, .4);
 		border-right: 1px solid rgba(0, 0, 0, .2);
-		color: @wcfPageLinkColor;
-		font-size: 85%;
+		color: @wcfTabularBoxColor;
+		font-size: @wcfSmallFontSize;
 		font-weight: bold;
 		white-space: nowrap;
 		
-		.linearGradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
 		.textShadow(@wcfTabularBoxBackgroundColor);
 		
 		a {
-			color: @wcfPageLinkColor;
+			color: @wcfTabularBoxColor;
 			display: block;
 			margin: -@wcfGapSmall;
 			
@@ -80,7 +79,7 @@
 		&:hover a,
 		&.active a {
 			background-color: rgba(0, 0, 0, .1);
-			color: @wcfPageLinkHoverColor;
+			color: @wcfTabularBoxHoverColor;
 		}
 		
 		&.active a {
@@ -88,7 +87,7 @@
 		}
 		
 		> * {
-			padding: 7px;
+			padding: @wcfGapSmall;
 		}
 	}
 	
@@ -98,10 +97,6 @@
 		
 		.transition(background, .1s);
 		
-		h1 {
-			font-size: 100%;
-		}
-		
 		&.columnMark,
 		&.columnStatus {
 			text-align: center;
@@ -135,14 +130,14 @@
 		
 		&.columnDate,
 		&.columnRegistrationDate {
-			font-size: 85%;
+			font-size: @wcfSmallFontSize;
 			text-align: right;
 			width: 1% !important;
 			white-space: nowrap;
 		}
 		
 		&.columnURL {
-			font-size: 85%;
+			font-size: @wcfSmallFontSize;
 			text-align: left;
 		}
 	}
@@ -158,7 +153,9 @@
 	tbody {
 		tr {
 			&:not(:last-child) {
-				border-bottom: 1px solid rgba(255, 255, 255, .3);
+				td {
+					border-bottom: 1px solid rgba(255, 255, 255, .3);
+				}
 			}
 			
 			&:hover {
@@ -192,7 +189,7 @@
 	
 	.statusIcons {
 		float: right;
-		margin-left: 7px;
+		margin-left: @wcfGapSmall;
 		
 		li {
 			display: inline-block;
diff --git a/wcfsetup/install/files/style/userPanel.less b/wcfsetup/install/files/style/userPanel.less
index 8bab00022e..e7d447c85e 100644
--- a/wcfsetup/install/files/style/userPanel.less
+++ b/wcfsetup/install/files/style/userPanel.less
@@ -67,7 +67,7 @@
 		}
 	}
 	
-	a.framed img {
+	.framed img {
 		padding: 0px;
 		margin-top: -3px;
 		margin-bottom: -3px;
diff --git a/wcfsetup/install/files/style/wbb.less b/wcfsetup/install/files/style/wbb.less
index dccdf545e0..2f7fc77e1a 100644
--- a/wcfsetup/install/files/style/wbb.less
+++ b/wcfsetup/install/files/style/wbb.less
@@ -1,11 +1,11 @@
 /* ############## Board List ############## */
 .wbbBoardList {
 	> li.wbbBoardNodeTop:not(.wbbBoardNodeTopEmpty) > div {
-		.borderRadius(@wcfContainerBorderRadius, 0);
+		.borderRadius(@wcfContainerBorderRadius - 1, 0);
 	}
 	
 	> li > ul > li:last-child div.wbbBoard:last-child {
-		.borderRadius(0, @wcfContainerBorderRadius);
+		.borderRadius(0, @wcfContainerBorderRadius - 1);
 	}
 	
 	> li > ul > .wbbCategory > hgroup {
@@ -59,11 +59,10 @@
 		> div {
 			background-color: @wcfContentBackgroundColor;
 			padding: @wcfGapSmall;
-			border: 1px solid @wcfContainerBorderColor;
 			border-radius: @wcfContainerBorderRadius;
 			margin-right: @wcfGapSmall;
 			
-			.boxShadowInset(0, 1px, rgba(0, 0, 0, .1), 3px); 
+			.boxShadowNative(~"inset 0 1px 1px rgba(0, 0, 0, .1)");
 		}
 		
 		hgroup {
@@ -132,7 +131,7 @@
 	}
 	
 	.wbbBoardNodeTopEmpty div.wbbBoard {
-		.borderRadius(@wcfContainerBorderRadius);
+		.borderRadius(@wcfContainerBorderRadius - 1);
 	}
 	
 	.wbbBoard > div > hgroup > h1 {
-- 
2.20.1