From b8eab696d9e1ed0070a121450dbf6fcd1ca9e657 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 29 Jul 2015 13:01:39 +0200
Subject: [PATCH] Major style/template overhaul

---
 .../templates/__messageFormSmilies.tpl        |    2 +-
 com.woltlab.wcf/templates/breadcrumbs.tpl     |    4 +-
 com.woltlab.wcf/templates/codeBBCodeTag.tpl   |   28 +-
 .../templates/dashboardBoxSidebar.tpl         |    6 +-
 .../templates/dashboardBoxSignedInAs.tpl      |    6 +-
 com.woltlab.wcf/templates/footer.tpl          |   76 +-
 com.woltlab.wcf/templates/headInclude.tpl     |    1 +
 com.woltlab.wcf/templates/header.tpl          |   90 +-
 com.woltlab.wcf/templates/mainMenu.tpl        |   11 +-
 com.woltlab.wcf/templates/mainMenuSubMenu.tpl |   15 +-
 com.woltlab.wcf/templates/messageSidebar.tpl  |  109 +-
 com.woltlab.wcf/templates/pageHeader.tpl      |   38 +
 com.woltlab.wcf/templates/pageLogo.tpl        |   13 +
 .../templates/pageNavbarBottom.tpl            |   10 +
 com.woltlab.wcf/templates/pageNavbarTop.tpl   |   12 +
 com.woltlab.wcf/templates/poll.tpl            |    6 +-
 com.woltlab.wcf/templates/quoteBBCodeTag.tpl  |   50 +-
 com.woltlab.wcf/templates/searchArea.tpl      |    4 +-
 com.woltlab.wcf/templates/shareButtons.tpl    |    2 +-
 com.woltlab.wcf/templates/team.tpl            |   12 +-
 com.woltlab.wcf/templates/user.tpl            |   79 +-
 com.woltlab.wcf/templates/userInformation.tpl |    2 +-
 .../templates/userInformationHeadline.tpl     |   21 +-
 com.woltlab.wcf/templates/userMenuSidebar.tpl |    8 +-
 com.woltlab.wcf/templates/userPanel.tpl       |  510 ++---
 .../templates/userProfileLikes.tpl            |    2 +-
 com.woltlab.wcf/templates/userSidebar.tpl     |  112 +-
 .../templates/usersOnlineInfoBox.tpl          |    2 +-
 com.woltlab.wcf/templates/usersOnlineList.tpl |   23 +-
 wcfsetup/install/files/js/WCF.js              |    2 +-
 .../js/WoltLab/WCF/Bbcode/Collapsible.js      |   56 +
 .../files/js/WoltLab/WCF/Bbcode/ToHtml.js     |    2 +-
 .../install/files/js/WoltLab/WCF/Bootstrap.js |    2 +-
 .../files/js/WoltLab/WCF/BootstrapFrontend.js |    4 +-
 wcfsetup/install/files/js/WoltLab/WCF/List.js |    2 +-
 .../files/js/WoltLab/WCF/Ui/Like/Handler.js   |  287 +++
 .../files/js/WoltLab/WCF/Ui/TabMenu/Simple.js |   15 +
 wcfsetup/install/files/js/wcf.globalHelper.js |   18 +
 .../lib/acp/form/StyleEditForm.class.php      |    4 +-
 .../install/files/lib/page/UserPage.class.php |    6 +-
 .../lib/system/style/StyleCompiler.class.php  |   34 +-
 .../PagesFunctionTemplatePlugin.class.php     |   24 +-
 ...SmallpagesFunctionTemplatePlugin.class.php |    5 +
 .../files/style/bbcode/bbcodeCollapsible.less |   26 +
 wcfsetup/install/files/style/bbcode/code.less |  103 +
 .../files/style/bbcode/codeInline.less        |    5 +
 .../install/files/style/bbcode/quote.less     |   45 +
 .../install/files/style/bootstrap/reset.less  |   27 +-
 wcfsetup/install/files/style/element/dl.less  |  130 ++
 .../files/style/element/inputText.less        |   41 +
 .../install/files/style/element/list.less     |   69 +
 .../install/files/style/element/select.less   |   14 +
 .../install/files/style/element/textarea.less |   16 +
 wcfsetup/install/files/style/icon/icon.less   | 1690 +++++++++++++++++
 .../files/style/layout/containerList.less     |   69 +
 .../install/files/style/layout/content.less   |   50 +
 wcfsetup/install/files/style/layout/form.less |   11 +
 .../install/files/style/layout/global.less    |  113 ++
 .../install/files/style/layout/layout.less    |  131 ++
 .../files/style/layout/navigation.less        |  142 ++
 .../files/style/layout/pageFooter.less        |   46 +
 .../files/style/layout/pageHeader.less        |  188 ++
 .../files/style/layout/pageHeaderSticky.less  |   46 +
 .../install/files/style/layout/sidebar.less   |   88 +
 wcfsetup/install/files/style/ui/alert.less    |   15 +
 wcfsetup/install/files/style/ui/badge.less    |  112 ++
 .../install/files/style/ui/breadcrumb.less    |   35 +
 wcfsetup/install/files/style/ui/button.less   |  114 ++
 wcfsetup/install/files/style/ui/comment.less  |   37 +
 wcfsetup/install/files/style/ui/dialog.less   |  247 +++
 wcfsetup/install/files/style/ui/dropdown.less |  301 +++
 .../files/style/ui/dropdownInteractive.less   |  293 +++
 wcfsetup/install/files/style/ui/message.less  |  303 +++
 wcfsetup/install/files/style/ui/poll.less     |   88 +
 wcfsetup/install/files/style/ui/popover.less  |  110 ++
 wcfsetup/install/files/style/ui/redactor.less |  424 +++++
 wcfsetup/install/files/style/ui/spinner.less  |   37 +
 wcfsetup/install/files/style/ui/tabMenu.less  |   46 +
 .../files/style/ui/tabMenuMessage.less        |  169 ++
 wcfsetup/install/files/style/ui/table.less    |  216 +++
 .../install/files/style/ui/tabularBox.less    |  103 +
 .../files/style/ui/tooltipBalloon.less        |   35 +
 .../install/files/style/ui/userProfile.less   |  114 ++
 83 files changed, 6902 insertions(+), 662 deletions(-)
 create mode 100644 com.woltlab.wcf/templates/pageHeader.tpl
 create mode 100644 com.woltlab.wcf/templates/pageLogo.tpl
 create mode 100644 com.woltlab.wcf/templates/pageNavbarBottom.tpl
 create mode 100644 com.woltlab.wcf/templates/pageNavbarTop.tpl
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/Bbcode/Collapsible.js
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/Ui/Like/Handler.js
 create mode 100644 wcfsetup/install/files/style/bbcode/bbcodeCollapsible.less
 create mode 100644 wcfsetup/install/files/style/bbcode/code.less
 create mode 100644 wcfsetup/install/files/style/bbcode/codeInline.less
 create mode 100644 wcfsetup/install/files/style/bbcode/quote.less
 create mode 100644 wcfsetup/install/files/style/element/dl.less
 create mode 100644 wcfsetup/install/files/style/element/inputText.less
 create mode 100644 wcfsetup/install/files/style/element/list.less
 create mode 100644 wcfsetup/install/files/style/element/select.less
 create mode 100644 wcfsetup/install/files/style/element/textarea.less
 create mode 100644 wcfsetup/install/files/style/icon/icon.less
 create mode 100644 wcfsetup/install/files/style/layout/containerList.less
 create mode 100644 wcfsetup/install/files/style/layout/content.less
 create mode 100644 wcfsetup/install/files/style/layout/form.less
 create mode 100644 wcfsetup/install/files/style/layout/global.less
 create mode 100644 wcfsetup/install/files/style/layout/layout.less
 create mode 100644 wcfsetup/install/files/style/layout/navigation.less
 create mode 100644 wcfsetup/install/files/style/layout/pageFooter.less
 create mode 100644 wcfsetup/install/files/style/layout/pageHeader.less
 create mode 100644 wcfsetup/install/files/style/layout/pageHeaderSticky.less
 create mode 100644 wcfsetup/install/files/style/layout/sidebar.less
 create mode 100644 wcfsetup/install/files/style/ui/alert.less
 create mode 100644 wcfsetup/install/files/style/ui/badge.less
 create mode 100644 wcfsetup/install/files/style/ui/breadcrumb.less
 create mode 100644 wcfsetup/install/files/style/ui/button.less
 create mode 100644 wcfsetup/install/files/style/ui/comment.less
 create mode 100644 wcfsetup/install/files/style/ui/dialog.less
 create mode 100644 wcfsetup/install/files/style/ui/dropdown.less
 create mode 100644 wcfsetup/install/files/style/ui/dropdownInteractive.less
 create mode 100644 wcfsetup/install/files/style/ui/message.less
 create mode 100644 wcfsetup/install/files/style/ui/poll.less
 create mode 100644 wcfsetup/install/files/style/ui/popover.less
 create mode 100644 wcfsetup/install/files/style/ui/redactor.less
 create mode 100644 wcfsetup/install/files/style/ui/spinner.less
 create mode 100644 wcfsetup/install/files/style/ui/tabMenu.less
 create mode 100644 wcfsetup/install/files/style/ui/tabMenuMessage.less
 create mode 100644 wcfsetup/install/files/style/ui/table.less
 create mode 100644 wcfsetup/install/files/style/ui/tabularBox.less
 create mode 100644 wcfsetup/install/files/style/ui/tooltipBalloon.less
 create mode 100644 wcfsetup/install/files/style/ui/userProfile.less

diff --git a/com.woltlab.wcf/templates/__messageFormSmilies.tpl b/com.woltlab.wcf/templates/__messageFormSmilies.tpl
index 4a9ac6af4b..ef558d47a2 100644
--- a/com.woltlab.wcf/templates/__messageFormSmilies.tpl
+++ b/com.woltlab.wcf/templates/__messageFormSmilies.tpl
@@ -1,4 +1,4 @@
-<ul class="smileyList">
+<ul class="inlineList smileyList">
 	{foreach from=$smilies item=smiley}
 		<li><a title="{lang}{$smiley->smileyTitle}{/lang}" class="jsTooltip jsSmiley" data-smiley-code="{$smiley->smileyCode}" data-smiley-path="{$smiley->getURL()}"><img src="{$smiley->getURL()}" alt="{$smiley->smileyCode}" /></a></li>
 	{/foreach}
diff --git a/com.woltlab.wcf/templates/breadcrumbs.tpl b/com.woltlab.wcf/templates/breadcrumbs.tpl
index 7dedaf8beb..519840fc6a 100644
--- a/com.woltlab.wcf/templates/breadcrumbs.tpl
+++ b/com.woltlab.wcf/templates/breadcrumbs.tpl
@@ -1,11 +1,11 @@
 {if !$__microdata|isset}{assign var=__microdata value=true}{/if}
 {hascontent}
-	<nav class="breadcrumbs marginTop">
+	<nav class="breadcrumbs">
 		<ul>
 			{content}
 				{foreach from=$__wcf->getBreadcrumbs() item=$breadcrumb}
 					<li title="{$breadcrumb->getLabel()}"{if $__microdata} itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"{/if}>
-						<a href="{$breadcrumb->getURL()}"{if $__microdata} itemprop="url"{/if}><span{if $__microdata} itemprop="title"{/if}>{$breadcrumb->getLabel()}</span></a> <span class="pointer"><span>&raquo;</span></span>
+						<a href="{$breadcrumb->getURL()}"{if $__microdata} itemprop="url"{/if}><span{if $__microdata} itemprop="title"{/if}>{$breadcrumb->getLabel()}</span></a>
 					</li>
 				{/foreach}
 				
diff --git a/com.woltlab.wcf/templates/codeBBCodeTag.tpl b/com.woltlab.wcf/templates/codeBBCodeTag.tpl
index 18a61df81d..849d808994 100644
--- a/com.woltlab.wcf/templates/codeBBCodeTag.tpl
+++ b/com.woltlab.wcf/templates/codeBBCodeTag.tpl
@@ -1,4 +1,4 @@
-<div class="container codeBox {$highlighter|get_class|substr:30|lcfirst}{if $lines > 10} minimized{/if}">
+<div class="codeBox collapsibleBbcode jsCollapsibleBbcode {$highlighter|get_class|substr:30|lcfirst}{if $lines > 10} collapsed{/if}">
 	<div>
 		<div>
 			<h3>{@$highlighter->getTitle()}{if $filename}: {$filename}{/if}</h3>
@@ -19,33 +19,13 @@
 	</div>
 	
 	{if $lines > 10}
-		<span class="codeBoxExpand jsButtonCodeBoxExpand">{lang}wcf.bbcode.button.showAll{/lang}</span>
+		<span class="toggleButton" data-title-collapse="{lang}wcf.bbcode.button.collapse{/lang}" data-title-expand="{lang}wcf.bbcode.button.showAll{/lang}">{lang}wcf.bbcode.button.showAll{/lang}</span>
 		
 		{if !$__overlongCodeBoxSeen|isset}
 			{assign var='__overlongCodeBoxSeen' value=true}
 			<script data-relocate="true">
-				$(function() {
-					$('.jsButtonCodeBoxExpand').removeClass('jsButtonCodeBoxExpand').click(function() {
-						$(this).parent().removeClass('minimized').end().remove();
-					});
-					
-					// searching in a page causes Google Chrome to scroll
-					// the code box if something inside it matches
-					// 
-					// expand the box in this case, to:
-					// a) Improve UX
-					// b) Hide an ugly misplaced "show all" button
-					$('.codeBox').on('scroll', function() {
-						$(this).find('.codeBoxExpand').click();
-					});
-					
-					// expand code boxes that are initially scrolled
-					// this may happen due to someone linking to a specific line
-					$('.codeBox').each(function() {
-						if ($(this).scrollTop() != 0) {
-							$(this).find('.codeBoxExpand').click();
-						}
-					});
+				require(['WoltLab/WCF/Bbcode/Collapsible'], function(BbcodeCollapsible) {
+					BbcodeCollapsible.observe();
 				});
 			</script>
 		{/if}
diff --git a/com.woltlab.wcf/templates/dashboardBoxSidebar.tpl b/com.woltlab.wcf/templates/dashboardBoxSidebar.tpl
index 000f83c544..bfe9e0c0c6 100644
--- a/com.woltlab.wcf/templates/dashboardBoxSidebar.tpl
+++ b/com.woltlab.wcf/templates/dashboardBoxSidebar.tpl
@@ -1,7 +1,7 @@
-<fieldset class="dashboardBox" data-box-name="{$box->boxName}">
-	<legend>{if $titleLink}<a href="{$titleLink}">{lang}wcf.dashboard.box.{$box->boxName}{/lang}</a>{else}{lang}wcf.dashboard.box.{$box->boxName}{/lang}{/if}</legend>
+<section class="dashboardBox" data-box-name="{$box->boxName}">
+	<h1>{if $titleLink}<a href="{$titleLink}">{lang}wcf.dashboard.box.{$box->boxName}{/lang}</a>{else}{lang}wcf.dashboard.box.{$box->boxName}{/lang}{/if}</h1>
 	
 	<div>
 		{@$template}
 	</div>
-</fieldset>
\ No newline at end of file
+</section>
\ No newline at end of file
diff --git a/com.woltlab.wcf/templates/dashboardBoxSignedInAs.tpl b/com.woltlab.wcf/templates/dashboardBoxSignedInAs.tpl
index 3d31dc19ec..8d5d3e5e76 100644
--- a/com.woltlab.wcf/templates/dashboardBoxSignedInAs.tpl
+++ b/com.woltlab.wcf/templates/dashboardBoxSignedInAs.tpl
@@ -1,5 +1,5 @@
-<fieldset class="dashboardBox dashboardBoxSignedInAs">
-	<legend class="invisible">{lang}wcf.dashboard.box.{$box->boxName}{/lang}</legend>
+<section class="dashboardBox dashboardBoxSignedInAs">
+	<h1 class="invisible">{lang}wcf.dashboard.box.{$box->boxName}{/lang}</h1>
 	
 	<div class="box96 framed">
 		{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(96)}
@@ -20,4 +20,4 @@
 			{include file='userInformationStatistics' user=$__wcf->user}
 		</div>
 	</div>
-</fieldset>
\ No newline at end of file
+</section>
\ No newline at end of file
diff --git a/com.woltlab.wcf/templates/footer.tpl b/com.woltlab.wcf/templates/footer.tpl
index 41a5e762f7..9b25060029 100644
--- a/com.woltlab.wcf/templates/footer.tpl
+++ b/com.woltlab.wcf/templates/footer.tpl
@@ -1,50 +1,60 @@
 				{event name='contents'}
 				
-				{if $skipBreadcrumbs|empty}{include file='breadcrumbs' __microdata=false}{/if}
-				
 				{if MODULE_WCF_AD && $__disableAds|empty}
 					{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.footer.content')}
 				{/if}
-			</section>
+			</div>
 			
 			{if $sidebarOrientation|isset && $sidebarOrientation == 'right'}
 				{@$__sidebar}
 			{/if}
 		</div>
+	</section>
+	
+	<div id="pageFooterBoxes">
+		<div class="layoutFluid">
+			{hascontent}
+				<ul>
+					{content}{if !$footerBoxes|empty}{@$footerBoxes}{/if}{/content}
+				</ul>
+			{/hascontent}
+		</div>
 	</div>
-</div>
-
-<footer id="pageFooter" class="{if $__wcf->getStyleHandler()->getStyle()->getVariable('useFluidLayout')}layoutFluid{else}layoutFixed{/if} footer{if $sidebarOrientation|isset && $sidebar|isset} sidebarOrientation{@$sidebarOrientation|ucfirst}{if $sidebarOrientation == 'right' && $sidebarCollapsed} sidebarCollapsed{/if}{/if}">
-	<div>
-		<nav id="footerNavigation" class="navigation navigationFooter">
-			{include file='footerMenu'}
-			
-			<ul class="navigationIcons">
-				<li id="toTopLink" class="toTopLink"><a href="{$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><span class="icon icon16 icon-arrow-up"></span> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
-				{event name='navigationIcons'}
-			</ul>
-			
-			<ul class="navigationItems">
-				{if SHOW_CLOCK}
-					<li title="{lang}wcf.date.timezone.{@'/'|str_replace:'.':$__wcf->getUser()->getTimeZone()->getName()|strtolower}{/lang}"><p><span class="icon icon16 icon-time"></span> <span>{@TIME_NOW|plainTime}</span></p></li>
-				{/if}
-				{event name='navigationItems'}
-			</ul>
-		</nav>
+	
+	{*include file='pageNavbarBottom'*}
+	
+	{*<nav id="footerNavigation" class="navigation navigationFooter">
+		{include file='footerMenu'}
 		
-		<div class="footerContent">
-			{event name='footerContents'}
-			
-			{if ENABLE_BENCHMARK}{include file='benchmark'}{/if}
+		<ul class="navigationIcons">
+			<li id="toTopLink" class="toTopLink"><a href="{$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><span class="icon icon16 icon-arrow-up"></span> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
+			{event name='navigationIcons'}
+		</ul>
+		
+		<ul class="navigationItems">
+			{if SHOW_CLOCK}
+				<li title="{lang}wcf.date.timezone.{@'/'|str_replace:'.':$__wcf->getUser()->getTimeZone()->getName()|strtolower}{/lang}"><p><span class="icon icon16 icon-time"></span> <span>{@TIME_NOW|plainTime}</span></p></li>
+			{/if}
+			{event name='navigationItems'}
+		</ul>
+	</nav>*}
+	
+	<footer id="pageFooter" class="footer{if $sidebarOrientation|isset && $sidebar|isset} sidebarOrientation{@$sidebarOrientation|ucfirst}{if $sidebarOrientation == 'right' && $sidebarCollapsed} sidebarCollapsed{/if}{/if}">
+		<div class="layoutFluid">
+			<div class="footerContent">
+				{event name='footerContents'}
+				
+				{if ENABLE_BENCHMARK}{include file='benchmark'}{/if}
+				
+				{event name='copyright'}
+			</div>
 			
-			{event name='copyright'}
+			{if MODULE_WCF_AD && $__disableAds|empty}
+				{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.footer.bottom')}
+			{/if}
 		</div>
-		
-		{if MODULE_WCF_AD && $__disableAds|empty}
-			{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.footer.bottom')}
-		{/if}
-	</div>
-</footer>
+	</footer>
+</div>
 
 {event name='footer'}
 
diff --git a/com.woltlab.wcf/templates/headInclude.tpl b/com.woltlab.wcf/templates/headInclude.tpl
index b8a792f3b9..9ab7955a6f 100644
--- a/com.woltlab.wcf/templates/headInclude.tpl
+++ b/com.woltlab.wcf/templates/headInclude.tpl
@@ -7,6 +7,7 @@
 {event name='metaTags'}
 
 <!-- Stylesheets -->
+<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
 {@$__wcf->getStyleHandler()->getStylesheet()}
 {event name='stylesheets'}
 
diff --git a/com.woltlab.wcf/templates/header.tpl b/com.woltlab.wcf/templates/header.tpl
index c7d07ed72e..8a43dfb1bd 100644
--- a/com.woltlab.wcf/templates/header.tpl
+++ b/com.woltlab.wcf/templates/header.tpl
@@ -1,73 +1,28 @@
 <a id="top"></a>
 
-{event name='beforePageHeader'}
-
-<header id="pageHeader" class="{if $__wcf->getStyleHandler()->getStyle()->getVariable('useFluidLayout')}layoutFluid{else}layoutFixed{/if}{if $sidebarOrientation|isset && $sidebar|isset} sidebarOrientation{@$sidebarOrientation|ucfirst}{if $sidebarOrientation == 'right' && $sidebarCollapsed} sidebarCollapsed{/if}{/if}">
-	<div>
-		<nav id="topMenu" class="userPanel">
-			<div class="{if $__wcf->getStyleHandler()->getStyle()->getVariable('useFluidLayout')}layoutFluid{else}layoutFixed{/if}">
-				{hascontent}
-					<ul class="userPanelItems">
-						{content}
-							{include file='userPanel'}
-							{event name='topMenu'}
-						{/content}
-					</ul>
-				{/hascontent}
-				
-				{include file='searchArea'}
-			</div>
-		</nav>
-		
-		<div id="logo" class="logo">
-			{if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.logo')}{/if}
-			
-			<a href="{link}{/link}">
-				{if $__wcf->getStyleHandler()->getStyle()->getPageLogo()}
-					<img src="{$__wcf->getStyleHandler()->getStyle()->getPageLogo()}" alt="" />
-				{/if}
-				{event name='headerLogo'}
-			</a>
-		</div>
-		
-		{event name='headerContents'}
-		
-		{include file='mainMenu'}
-		
-		{event name='afterMainMenu'}
-		
-		<nav class="navigation navigationHeader">
-			{include file='mainMenuSubMenu'}
-			
-			<ul class="navigationIcons">
-				<li id="toBottomLink"><a href="{$__wcf->getAnchor('bottom')}" title="{lang}wcf.global.scrollDown{/lang}" class="jsTooltip"><span class="icon icon16 icon-arrow-down"></span> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
-				<li id="sitemap" class="jsOnly"><a href="#" title="{lang}wcf.page.sitemap{/lang}" class="jsTooltip"><span class="icon icon16 icon-sitemap"></span> <span class="invisible">{lang}wcf.page.sitemap{/lang}</span></a></li>
-				{if $headerNavigation|isset}{@$headerNavigation}{/if}
-				{event name='navigationIcons'}
-			</ul>
-		</nav>
-	</div>
-</header>
-
-{event name='afterPageHeader'}
-
-<div id="main" class="{if $__wcf->getStyleHandler()->getStyle()->getVariable('useFluidLayout')}layoutFluid{else}layoutFixed{/if}{if $sidebarOrientation|isset && $sidebar|isset} sidebarOrientation{@$sidebarOrientation|ucfirst}{if $sidebarOrientation == 'right' && $sidebarCollapsed} sidebarCollapsed{/if}{/if}">
-	<div>
-		<div>
+<div id="pageContainer" class="pageContainer">
+	{event name='beforePageHeader'}
+	
+	{include file='pageHeader'}
+	
+	{event name='afterPageHeader'}
+	
+	{include file='pageNavbarTop'}
+	
+	<section id="main" class="main" role="main">
+		<div class="{if $__wcf->getStyleHandler()->getStyle()->getVariable('useFluidLayout')}layoutFluid{else}layoutFixed{/if}">
 			{capture assign='__sidebar'}
 				{if $sidebar|isset}
 					<aside class="sidebar"{if $sidebarOrientation|isset && $sidebarOrientation == 'right'} data-is-open="{if $sidebarCollapsed}false{else}true{/if}" data-sidebar-name="{$sidebarName}"{/if}>
-						<div>
-							{if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.top')}{/if}
-							
-							{event name='sidebarBoxesTop'}
-							
-							{@$sidebar}
-							
-							{event name='sidebarBoxesBottom'}
-							
-							{if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.bottom')}{/if}
-						</div>
+						{if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.top')}{/if}
+						
+						{event name='sidebarBoxesTop'}
+						
+						{@$sidebar}
+						
+						{event name='sidebarBoxesBottom'}
+						
+						{if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.bottom')}{/if}
 					</aside>
 					
 					{if $sidebarOrientation|isset && $sidebarOrientation == 'right'}
@@ -84,10 +39,7 @@
 				{@$__sidebar}
 			{/if}
 			
-			<section id="content" class="content">
+			<div id="content" class="content">
 				{if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.header.content')}{/if}
 				
 				{event name='contents'}
-				
-				{if $skipBreadcrumbs|empty}{include file='breadcrumbs'}{/if}
-			
diff --git a/com.woltlab.wcf/templates/mainMenu.tpl b/com.woltlab.wcf/templates/mainMenu.tpl
index 9b709fb79d..15b97c03c9 100644
--- a/com.woltlab.wcf/templates/mainMenu.tpl
+++ b/com.woltlab.wcf/templates/mainMenu.tpl
@@ -2,14 +2,11 @@
 	<nav id="mainMenu" class="mainMenu jsMobileNavigation" data-button-label="{lang}wcf.page.mainMenu{/lang}">
 		<ul>
 			{foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=menuItem}
-				<li{if $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem} class="active"{/if} data-menu-item="{$menuItem->menuItem}">
+				<li class="{if $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem}active {/if}{if $__wcf->getPageMenu()->getMenuItems($menuItem->menuItem)|count > 0}subMenuItems{/if}" data-menu-item="{$menuItem->menuItem}">
 					<a href="{$menuItem->getProcessor()->getLink()}">{lang}{$menuItem->menuItem}{/lang}{if $menuItem->getProcessor()->getNotifications()} <span class="badge badgeUpdate">{#$menuItem->getProcessor()->getNotifications()}</span>{/if}</a>
-					{if $__wcf->getPageMenu()->getMenuItems($menuItem->menuItem)|count > 0 && $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem}
-						<ul class="invisible">
-							{foreach from=$__wcf->getPageMenu()->getMenuItems($menuItem->menuItem) item=subMenuItem}
-								<li{if $__wcf->getPageMenu()->getActiveMenuItem(1) == $subMenuItem->menuItem} class="active"{/if}><a href="{$subMenuItem->getProcessor()->getLink()}"><span>{lang}{$subMenuItem->menuItem}{/lang}</span></a>{if $subMenuItem->getProcessor()->getNotifications()} <span class="badge badgeUpdate">{#$subMenuItem->getProcessor()->getNotifications()}</span>{/if}</li>
-							{/foreach}
-							{event name='items'}
+					{if $__wcf->getPageMenu()->getMenuItems($menuItem->menuItem)|count > 0}
+						<ul class="subMenu">
+							{include file='mainMenuSubMenu'}
 						</ul>
 					{/if}
 				</li>
diff --git a/com.woltlab.wcf/templates/mainMenuSubMenu.tpl b/com.woltlab.wcf/templates/mainMenuSubMenu.tpl
index 740684eab4..e286578487 100644
--- a/com.woltlab.wcf/templates/mainMenuSubMenu.tpl
+++ b/com.woltlab.wcf/templates/mainMenuSubMenu.tpl
@@ -1,10 +1,5 @@
-{foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=menuItem}
-	{if $__wcf->getPageMenu()->getMenuItems($menuItem->menuItem)|count > 0 && $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem}
-		<ul class="navigationMenuItems">
-			{foreach from=$__wcf->getPageMenu()->getMenuItems($menuItem->menuItem) item=subMenuItem}
-				<li{if $__wcf->getPageMenu()->getActiveMenuItem(1) == $subMenuItem->menuItem} class="active"{/if} data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getProcessor()->getLink()}"><span>{lang}{$subMenuItem->menuItem}{/lang}</span></a>{if $subMenuItem->getProcessor()->getNotifications()} <span class="badge badgeUpdate">{#$subMenuItem->getProcessor()->getNotifications()}</span>{/if}</li>
-			{/foreach}
-			{event name='items'}
-		</ul>
-	{/if}
-{/foreach}
\ No newline at end of file
+{foreach from=$__wcf->getPageMenu()->getMenuItems($menuItem->menuItem) item=subMenuItem}
+	<li{if $__wcf->getPageMenu()->getActiveMenuItem(1) == $subMenuItem->menuItem} class="active"{/if} data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getProcessor()->getLink()}"><span>{lang}{$subMenuItem->menuItem}{/lang}</span></a>{if $subMenuItem->getProcessor()->getNotifications()} <span class="badge badgeUpdate">{#$subMenuItem->getProcessor()->getNotifications()}</span>{/if}</li>
+{/foreach}
+
+{event name='items'}
diff --git a/com.woltlab.wcf/templates/messageSidebar.tpl b/com.woltlab.wcf/templates/messageSidebar.tpl
index ecbdf1666a..f459fedb17 100644
--- a/com.woltlab.wcf/templates/messageSidebar.tpl
+++ b/com.woltlab.wcf/templates/messageSidebar.tpl
@@ -2,33 +2,32 @@
 	{assign var=__messageSidebarJavascript value=true}
 {/if}
 
-<aside class="messageSidebar{if MESSAGE_SIDEBAR_ENABLE_ONLINE_STATUS && $userProfile->isOnline()} userOnline{/if} {if $userProfile->userID}member{else}guest{/if}"{if $userProfile->userID} itemscope="itemscope" itemtype="http://data-vocabulary.org/Person"{/if}>
-	<div>
+<aside class="messageSidebar{if MESSAGE_SIDEBAR_ENABLE_ONLINE_STATUS && $userProfile->isOnline()} userOnline{/if} {if $userProfile->userID}member{else}guest{/if}"{if $userProfile->userID} itemscope itemtype="http://data-vocabulary.org/Person"{/if}>
+	<div class="messageAuthor">
 		{if $userProfile->userID}
 			{assign var='username' value=$userProfile->username}
 			
-			<header>
-				<h2 class="username">
-					<a href="{link controller='User' object=$userProfile->getDecoratedObject()}{/link}" class="userLink" data-user-id="{@$userProfile->userID}" rel="author">
-						<span itemprop="name">{if MESSAGE_SIDEBAR_ENABLE_USER_ONLINE_MARKING}{@$userProfile->getFormattedUsername()}{else}{$username}{/if}</span>
-					</a>
-					{if $userProfile->banned}<span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang user=$userProfile}wcf.user.banned{/lang}"></span>{/if}
-				</h2>
-				
-				{event name='header'}
-			</header>
-			
 			{if MESSAGE_SIDEBAR_ENABLE_AVATAR}
 				{if $userProfile->getAvatar()}
 					<div class="userAvatar">
 						{capture assign='__userAvatar'}{@$userProfile->getAvatar()->getImageTag(128)}{/capture}
 						<a href="{link controller='User' object=$userProfile->getDecoratedObject()}{/link}" class="framed">{@'<img'|str_replace:'<img itemprop="photo"':$__userAvatar}</a>
 						
-						{if MESSAGE_SIDEBAR_ENABLE_ONLINE_STATUS && $userProfile->isOnline()}<span class="badge green badgeOnline" title="{lang}wcf.user.online.title{/lang}">{lang}wcf.user.online{/lang}</span>{/if}
+						{* @TODO *}
+						{*if MESSAGE_SIDEBAR_ENABLE_ONLINE_STATUS && $userProfile->isOnline()}<span class="badge green badgeOnline" title="{lang}wcf.user.online.title{/lang}">{lang}wcf.user.online{/lang}</span>{/if*}
 					</div>
 				{/if}
 			{/if}
 			
+			<p class="messageAuthorContainer">
+				<a href="{link controller='User' object=$userProfile->getDecoratedObject()}{/link}" class="username userLink" data-user-id="{@$userProfile->userID}" rel="author">
+					<span itemprop="name">{if MESSAGE_SIDEBAR_ENABLE_USER_ONLINE_MARKING}{@$userProfile->getFormattedUsername()}{else}{$username}{/if}</span>
+				</a>
+				{if $userProfile->banned}<span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang user=$userProfile}wcf.user.banned{/lang}"></span>{/if}
+				
+				{event name='header'}
+			</p>
+			
 			{if MODULE_USER_RANK && MESSAGE_SIDEBAR_ENABLE_RANK}
 				{if $userProfile->getUserTitle()}
 					<div class="userTitle">
@@ -40,54 +39,52 @@
 				{/if}
 			{/if}
 		{else}
-			<header>
-				<h2 class="username">
-					<span>{@$userProfile->username}</span>
-				</h2>
+			<p class="messageAuthor">
+				<span class="username">{$userProfile->username}</span>
 				
 				<div class="userTitle">
 					<p class="badge">{lang}wcf.user.guest{/lang}</p>
 				</div>
 				
 				{event name='header'}
-			</header>
+			</p>
 		{/if}
-		
-		{event name='beforeCredits'}
-		
-		{if $userProfile->userID}
-			{hascontent}
-				<div class="userCredits">
-					<dl class="plain dataList">
-						{content}
-							{if MODULE_LIKE && MESSAGE_SIDEBAR_ENABLE_LIKES_RECEIVED && $userProfile->likesReceived}
-								<dt><a href="{link controller='User' object=$userProfile}{/link}#likes" class="jsTooltip" title="{lang user=$userProfile}wcf.like.showLikesReceived{/lang}">{lang}wcf.like.likesReceived{/lang}</a></dt>
-								<dd>{#$userProfile->likesReceived}</dd>
-							{/if}
-							
-							{if MESSAGE_SIDEBAR_ENABLE_ACTIVITY_POINTS && $userProfile->activityPoints}
-								<dt><a href="#" class="activityPointsDisplay jsTooltip" title="{lang user=$userProfile}wcf.user.activityPoint.showActivityPoints{/lang}" data-user-id="{@$userProfile->userID}">{lang}wcf.user.activityPoint{/lang}</a></dt>
-								<dd>{#$userProfile->activityPoints}</dd>
-							{/if}
-							{event name='userCredits'}
-							{if MESSAGE_SIDEBAR_USER_OPTIONS && $userProfile->isAccessible('canViewProfile')}
-								{assign var='__sidebarUserOptions' value=','|explode:MESSAGE_SIDEBAR_USER_OPTIONS}
-								{foreach from=$__sidebarUserOptions item='__sidebarUserOption'}
-									{if $userProfile->getUserOption($__sidebarUserOption)}
-										{assign var='__formattedUserOption' value=$userProfile->getFormattedUserOption($__sidebarUserOption)}
-										{if $__formattedUserOption}
-											<dt>{lang}wcf.user.option.{$__sidebarUserOption}{/lang}</dt>
-											<dd{if $__sidebarUserOption == 'location'} itemprop="locality"{/if}>{@$__formattedUserOption}</dd>
-										{/if}
-									{/if}
-								{/foreach}
-							{/if}
-						{/content}
-					</dl>
-				</div>
-			{/hascontent}
-		{/if}
-		
-		{event name='afterCredits'}
 	</div>
+	
+	{event name='beforeCredits'}
+	
+	{if $userProfile->userID}
+		{hascontent}
+			<div class="userCredits">
+				<dl class="plain dataList">
+					{content}
+						{if MODULE_LIKE && MESSAGE_SIDEBAR_ENABLE_LIKES_RECEIVED && $userProfile->likesReceived}
+							<dt><a href="{link controller='User' object=$userProfile}{/link}#likes" class="jsTooltip" title="{lang user=$userProfile}wcf.like.showLikesReceived{/lang}">{lang}wcf.like.likesReceived{/lang}</a></dt>
+							<dd>{#$userProfile->likesReceived}</dd>
+						{/if}
+						
+						{if MESSAGE_SIDEBAR_ENABLE_ACTIVITY_POINTS && $userProfile->activityPoints}
+							<dt><a href="#" class="activityPointsDisplay jsTooltip" title="{lang user=$userProfile}wcf.user.activityPoint.showActivityPoints{/lang}" data-user-id="{@$userProfile->userID}">{lang}wcf.user.activityPoint{/lang}</a></dt>
+							<dd>{#$userProfile->activityPoints}</dd>
+						{/if}
+						{event name='userCredits'}
+						{if MESSAGE_SIDEBAR_USER_OPTIONS && $userProfile->isAccessible('canViewProfile')}
+							{assign var='__sidebarUserOptions' value=','|explode:MESSAGE_SIDEBAR_USER_OPTIONS}
+							{foreach from=$__sidebarUserOptions item='__sidebarUserOption'}
+								{if $userProfile->getUserOption($__sidebarUserOption)}
+									{assign var='__formattedUserOption' value=$userProfile->getFormattedUserOption($__sidebarUserOption)}
+									{if $__formattedUserOption}
+										<dt>{lang}wcf.user.option.{$__sidebarUserOption}{/lang}</dt>
+										<dd{if $__sidebarUserOption == 'location'} itemprop="locality"{/if}>{@$__formattedUserOption}</dd>
+									{/if}
+								{/if}
+							{/foreach}
+						{/if}
+					{/content}
+				</dl>
+			</div>
+		{/hascontent}
+	{/if}
+	
+	{event name='afterCredits'}
 </aside>
diff --git a/com.woltlab.wcf/templates/pageHeader.tpl b/com.woltlab.wcf/templates/pageHeader.tpl
new file mode 100644
index 0000000000..c9a466141f
--- /dev/null
+++ b/com.woltlab.wcf/templates/pageHeader.tpl
@@ -0,0 +1,38 @@
+<header id="pageHeader" class="header">
+	<div>
+		<div class="{if $__wcf->getStyleHandler()->getStyle()->getVariable('useFluidLayout')}layoutFluid{else}layoutFixed{/if}">
+			{include file='pageLogo'}
+			
+			{include file='searchArea'}
+			
+			{include file='mainMenu'}
+			
+			{include file='userPanel'}
+		</div>
+	</div>
+	{*
+	<div>
+		<nav class="navigation navigationHeader">
+			{include file='mainMenuSubMenu'}
+			
+			<ul class="navigationIcons">
+				<li id="toBottomLink"><a href="{$__wcf->getAnchor('bottom')}" title="{lang}wcf.global.scrollDown{/lang}" class="jsTooltip"><span class="icon icon16 icon-arrow-down"></span> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
+				<li id="sitemap" class="jsOnly"><a href="#" title="{lang}wcf.page.sitemap{/lang}" class="jsTooltip"><span class="icon icon16 icon-sitemap"></span> <span class="invisible">{lang}wcf.page.sitemap{/lang}</span></a></li>
+				{if $headerNavigation|isset}{@$headerNavigation}{/if}
+				{event name='navigationIcons'}
+			</ul>
+		</nav>
+	</div>
+	*}
+	<script data-relocate="true">
+		var header = elById('pageHeader');
+		header.style.setProperty('min-height', header.clientHeight + 'px');
+		
+		function stickyHeader() {
+			header.classList[(document.body.scrollTop > 50) ? 'add' : 'remove']('sticky');
+		}
+		
+		stickyHeader();
+		window.addEventListener('scroll', stickyHeader);
+	</script>
+</header>
\ No newline at end of file
diff --git a/com.woltlab.wcf/templates/pageLogo.tpl b/com.woltlab.wcf/templates/pageLogo.tpl
new file mode 100644
index 0000000000..da06290ab1
--- /dev/null
+++ b/com.woltlab.wcf/templates/pageLogo.tpl
@@ -0,0 +1,13 @@
+<div id="logo" class="logo">
+	{if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.logo')}{/if}
+	
+	<a href="{link}{/link}">
+		{* @TODO *}
+		<img src="http://192.168.0.102/w/275/wcf/images/wbb.png" alt="" class="large">
+		<img src="http://192.168.0.102/w/275/wcf/images/wbb-small.png" alt="" class="small">
+		{if $__wcf->getStyleHandler()->getStyle()->getPageLogo()}
+			<img src="{$__wcf->getStyleHandler()->getStyle()->getPageLogo()}" alt="">
+		{/if}
+		{event name='headerLogo'}
+	</a>
+</div>
\ No newline at end of file
diff --git a/com.woltlab.wcf/templates/pageNavbarBottom.tpl b/com.woltlab.wcf/templates/pageNavbarBottom.tpl
new file mode 100644
index 0000000000..50acf914f7
--- /dev/null
+++ b/com.woltlab.wcf/templates/pageNavbarBottom.tpl
@@ -0,0 +1,10 @@
+<div class="navigation navigationBottom">
+	<div class="layoutFluid">
+		{if $skipBreadcrumbs|empty}{include file='breadcrumbs'}{/if}
+		
+		<ul class="navigationIcons">
+			<li id="toTopLink" class="toTopLink"><a href="{$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><span class="icon icon16 icon-arrow-up"></span> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
+			{event name='navigationIcons'}
+		</ul>
+	</div>
+</div>
diff --git a/com.woltlab.wcf/templates/pageNavbarTop.tpl b/com.woltlab.wcf/templates/pageNavbarTop.tpl
new file mode 100644
index 0000000000..6fbbcda55d
--- /dev/null
+++ b/com.woltlab.wcf/templates/pageNavbarTop.tpl
@@ -0,0 +1,12 @@
+<div class="navigation navigationTop">
+	<div class="layoutFluid">
+		{if $skipBreadcrumbs|empty}{include file='breadcrumbs'}{/if}
+		
+		<ul class="navigationIcons">
+			<li id="toBottomLink"><a href="{$__wcf->getAnchor('bottom')}" title="{lang}wcf.global.scrollDown{/lang}" class="jsTooltip"><span class="icon icon16 icon-arrow-down"></span> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
+			<li id="sitemap" class="jsOnly"><a href="#" title="{lang}wcf.page.sitemap{/lang}" class="jsTooltip"><span class="icon icon16 icon-sitemap"></span> <span class="invisible">{lang}wcf.page.sitemap{/lang}</span></a></li>
+			{if $headerNavigation|isset}{@$headerNavigation}{/if}
+			{event name='navigationIcons'}
+		</ul>
+	</div>
+</div>
diff --git a/com.woltlab.wcf/templates/poll.tpl b/com.woltlab.wcf/templates/poll.tpl
index 2bb2301247..db6f20b88d 100644
--- a/com.woltlab.wcf/templates/poll.tpl
+++ b/com.woltlab.wcf/templates/poll.tpl
@@ -10,8 +10,8 @@
 {/if}
 
 <div class="container containerPadding pollContainer" data-poll-id="{@$poll->pollID}" data-can-vote="{if $poll->canVote()}1{else}0{/if}" data-can-view-result="{if $poll->canSeeResult()}1{else}0{/if}" data-can-view-participants="{if $poll->canViewParticipants()}true{else}false{/if}" data-in-vote="{if $poll->canVote() && !$poll->isParticipant()}1{else}0{/if}" data-question="{$poll->question}" data-max-votes="{@$poll->maxVotes}">
-	<fieldset>
-		<legend>{$poll->question} <span class="badge jsTooltip" title="{lang}wcf.poll.totalVotes{/lang}">{#$poll->votes}</span></legend>
+	<section>
+		<h1>{$poll->question} <span class="badge jsTooltip" title="{lang}wcf.poll.totalVotes{/lang}">{#$poll->votes}</span></h1>
 		
 		<div class="pollInnerContainer">
 			{if !$__wcf->getUser()->userID}
@@ -30,7 +30,7 @@
 			
 			{event name='pollData'}
 		</div>
-	</fieldset>
+	</section>
 	
 	{hascontent}
 		<div class="formSubmit jsOnly">
diff --git a/com.woltlab.wcf/templates/quoteBBCodeTag.tpl b/com.woltlab.wcf/templates/quoteBBCodeTag.tpl
index acefb454e4..0924375572 100644
--- a/com.woltlab.wcf/templates/quoteBBCodeTag.tpl
+++ b/com.woltlab.wcf/templates/quoteBBCodeTag.tpl
@@ -1,24 +1,26 @@
-{if $quoteAuthorObject}
-<div class="quoteBoxAuthor">
-	<div class="quoteAuthorAvatar"><a href="{link controller='User' object=$quoteAuthorObject}{/link}" class="userLink framed" data-user-id="{@$quoteAuthorObject->userID}">{@$quoteAuthorObject->getAvatar()->getImageTag(64)}</a></div>
-{/if}
-	<blockquote class="quoteBox container containerPadding{if !$quoteAuthorObject} quoteBoxSimple{/if}"{if $quoteLink} cite="{$quoteLink}"{/if}>
-		{if $quoteAuthor}
-			<header>
-				<h3>
-					{if $quoteLink}
-						<a href="{@$quoteLink}"{if $isExternalQuoteLink} class="externalURL"{if EXTERNAL_LINK_REL_NOFOLLOW} rel="nofollow"{/if}{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}{/if}>{lang}wcf.bbcode.quote.title{/lang}</a>
-					{else}
-						{lang}wcf.bbcode.quote.title{/lang}
-					{/if}
-				</h3>
-			</header>
-		{/if}
-		
-		<div>
-			{@$content}
-		</div>
-	</blockquote>
-{if $quoteAuthorObject}
-</div>
-{/if}
+<blockquote class="quoteBox container containerPadding{if !$quoteAuthorObject} quoteBoxSimple{/if}"{if $quoteLink} cite="{$quoteLink}"{/if}>
+	<header class="quoteBoxHeader">
+		<span class="quoteBoxIcon">
+			{if $quoteAuthorObject}
+				<a href="{link controller='User' object=$quoteAuthorObject}{/link}" class="userLink framed" data-user-id="{@$quoteAuthorObject->userID}">{@$quoteAuthorObject->getAvatar()->getImageTag(32)}</a>
+			{else}
+				<span class="icon icon24 fa-quote-left"></span>
+			{/if}
+		</span>
+		<span class="quoteBoxTitle">
+			{if $quoteAuthor}
+				{if $quoteLink}
+					<a href="{@$quoteLink}"{if $isExternalQuoteLink} class="externalURL"{if EXTERNAL_LINK_REL_NOFOLLOW} rel="nofollow"{/if}{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}{/if}>{lang}wcf.bbcode.quote.title{/lang}</a>
+				{else}
+					{lang}wcf.bbcode.quote.title{/lang}
+				{/if}
+			{else}
+				{lang}wcf.bbcode.quote{/lang}
+			{/if}
+		</span>
+	</header>
+	
+	<div>
+		{@$content}
+	</div>
+</blockquote>
diff --git a/com.woltlab.wcf/templates/searchArea.tpl b/com.woltlab.wcf/templates/searchArea.tpl
index bc32f94da2..eea92a1fe9 100644
--- a/com.woltlab.wcf/templates/searchArea.tpl
+++ b/com.woltlab.wcf/templates/searchArea.tpl
@@ -5,7 +5,7 @@
 
 {event name='settings'}
 
-<aside id="search" class="searchBar dropdown" data-disable-auto-focus="true">
+<div id="search" class="searchBar dropdown" data-disable-auto-focus="true">
 	<form method="post" action="{@$__searchFormLink}">
 		<input type="search" name="q" placeholder="{@$__searchInputPlaceholder}" autocomplete="off" required="required" value="{if $query|isset}{$query}{/if}" class="dropdownToggle" data-toggle="search" />
 		
@@ -24,7 +24,7 @@
 		{@$__searchHiddenInputFields}
 		{@SECURITY_TOKEN_INPUT_TAG}
 	</form>
-</aside>
+</div>
 
 {if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
 	<script data-relocate="true">
diff --git a/com.woltlab.wcf/templates/shareButtons.tpl b/com.woltlab.wcf/templates/shareButtons.tpl
index 218de94477..80a230432b 100644
--- a/com.woltlab.wcf/templates/shareButtons.tpl
+++ b/com.woltlab.wcf/templates/shareButtons.tpl
@@ -1,5 +1,5 @@
 <div class="messageShareButtons jsOnly">
-	<ul>
+	<ul class="inlineList">
 		<li class="jsShareFacebook">
 			<a>
 				<span class="icon icon32 icon-facebook-sign jsTooltip" title="{lang}wcf.message.share.facebook{/lang}"></span>
diff --git a/com.woltlab.wcf/templates/team.tpl b/com.woltlab.wcf/templates/team.tpl
index 7c33e88f5d..45e8bbcdf1 100644
--- a/com.woltlab.wcf/templates/team.tpl
+++ b/com.woltlab.wcf/templates/team.tpl
@@ -51,18 +51,18 @@
 </div>
 
 {foreach from=$objects->getTeams() item=team}
-	<header class="boxHeadline boxSubHeadline">
-		<h2 id="group{@$team->groupID}">{$team->groupName|language} <span class="badge">{#$team->getMembers()|count}</span></h2>
-		<p>{$team->groupDescription|language}</p>
-	</header>
+	<section>
+		<div class="containerHeadline">
+			<h3 id="group{@$team->groupID}">{$team->groupName|language} <span class="badge">{#$team->getMembers()|count}</span></h3>
+			<p>{$team->groupDescription|language}</p>
+		</div>
 		
-	<div class="container marginTop">
 		<ol class="containerList userList">
 			{foreach from=$team->getMembers() item=user}
 				{include file='userListItem'}
 			{/foreach}
 		</ol>
-	</div>
+	</section>
 {/foreach}
 
 <div class="contentNavigation">
diff --git a/com.woltlab.wcf/templates/user.tpl b/com.woltlab.wcf/templates/user.tpl
index 5ae5ab0787..6e39a70b69 100644
--- a/com.woltlab.wcf/templates/user.tpl
+++ b/com.woltlab.wcf/templates/user.tpl
@@ -132,89 +132,12 @@
 	</noscript>
 </head>
 
-<body id="tpl{$templateName|ucfirst}" data-template="{$templateName}" data-application="{$templateNameApplication}">
+<body id="tpl{$templateName|ucfirst}" data-template="{$templateName}" data-application="{$templateNameApplication}" class="userProfile">
 
 {include file='userSidebar' assign='sidebar'}
 
 {include file='header' sidebarOrientation='left'}
 
-<header class="boxHeadline userHeadline"
-	{if $isAccessible}
-		data-object-id="{@$user->userID}"
-		{if $__wcf->session->getPermission('admin.user.canBanUser')}
-			data-banned="{@$user->banned}"
-		{/if}
-		{if $__wcf->session->getPermission('admin.user.canDisableAvatar')}
-			data-disable-avatar="{@$user->disableAvatar}"
-		{/if}
-		{if $__wcf->session->getPermission('admin.user.canDisableSignature')}
-			data-disable-signature="{@$user->disableSignature}"
-		{/if}
-	{/if}
->
-	<span class="framed invisible">{@$user->getAvatar()->getImageTag(48)}</span>
-	
-	<h1>{$user->username}{if $user->banned} <span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang}wcf.user.banned{/lang}"></span>{/if}{if MODULE_USER_RANK}
-		{if $user->getUserTitle()}
-			<span class="badge userTitleBadge{if $user->getRank() && $user->getRank()->cssClassName} {@$user->getRank()->cssClassName}{/if}">{$user->getUserTitle()}</span>
-		{/if}
-		{if $user->getRank() && $user->getRank()->rankImage}
-			<span class="userRankImage">{@$user->getRank()->getImage()}</span>
-		{/if}
-	{/if}</h1>
-	
-	<ul class="dataList">
-		{if $user->isVisibleOption('gender') && $user->gender}<li>{lang}wcf.user.gender.{if $user->gender == 1}male{else}female{/if}{/lang}</li>{/if}
-		{if $user->isVisibleOption('birthday') && $user->getAge()}<li>{@$user->getAge()}</li>{/if}
-		{if $user->isVisibleOption('location') && $user->location}<li>{lang}wcf.user.membersList.location{/lang}</li>{/if}
-		{if $user->getOldUsername()}<li>{lang}wcf.user.profile.oldUsername{/lang}</li>{/if}
-		<li>{lang}wcf.user.membersList.registrationDate{/lang}</li>
-		{event name='userDataRow1'}
-	</ul>
-	{if $user->canViewOnlineStatus() && $user->getLastActivityTime()}
-		<dl class="plain inlineDataList">
-			<dt>{lang}wcf.user.usersOnline.lastActivity{/lang}</dt>
-			<dd>{@$user->getLastActivityTime()|time}{if $user->getCurrentLocation()}, {@$user->getCurrentLocation()}{/if}</dd>
-			{event name='userDataRow2'}
-		</dl>
-	{/if}
-	<nav class="jsMobileNavigation buttonGroupNavigation">
-		<ul id="profileButtonContainer" class="buttonGroup">
-			{hascontent}
-				<li class="dropdown">
-					<a href="#" class="button dropdownToggle jsTooltip" title="{lang}wcf.user.searchUserContent{/lang}"><span class="icon icon16 icon-search"></span> <span class="invisible">{lang}wcf.user.searchUserContent{/lang}</span></a>
-					<ul class="dropdownMenu">
-						{content}
-							{event name='quickSearchItems'}
-						{/content}
-					</ul>
-				</li>
-			{/hascontent}
-			
-			{if $__wcf->session->getPermission('user.profile.canReportContent')}
-				<li class="jsReportUser jsOnly" data-object-id="{@$user->userID}"><a href="#" title="{lang}wcf.user.profile.report{/lang}" class="button jsTooltip"><span class="icon icon16 icon-warning-sign"></span> <span class="invisible">{lang}wcf.user.profile.report{/lang}</span></a></li>
-			{/if}
-			
-			{if $user->userID != $__wcf->user->userID}
-				{if $user->isAccessible('canViewEmailAddress') || $__wcf->session->getPermission('admin.user.canEditMailAddress')}
-					<li><a class="button jsTooltip" href="mailto:{@$user->getEncodedEmail()}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 icon-envelope-alt"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
-				{elseif $user->isAccessible('canMail') && $__wcf->session->getPermission('user.profile.canMail')}
-					<li><a class="button jsTooltip" href="{link controller='Mail' object=$user}{/link}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 icon-envelope-alt"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
-				{/if}
-			{/if}
-			
-			{event name='buttons'}
-			
-			{if $isAccessible && $__wcf->user->userID != $user->userID && ($__wcf->session->getPermission('admin.user.canBanUser') || $__wcf->session->getPermission('admin.user.canDisableAvatar') || $__wcf->session->getPermission('admin.user.canDisableSignature') || ($__wcf->session->getPermission('admin.general.canUseAcp') && $__wcf->session->getPermission('admin.user.canEditUser')){event name='moderationDropdownPermissions'})}
-				<li class="dropdown">
-					<a href="{link controller='UserEdit' object=$user isACP=true}{/link}" class="button jsTooltip jsUserInlineEditor" title="{lang}wcf.user.moderate{/lang}"><span class="icon icon16 fa-wrench"></span> <span class="invisible">{lang}wcf.user.moderate{/lang}</span></a>
-					<ul class="dropdownMenu"></ul>
-				</li>
-			{/if}
-		</ul>
-	</nav>
-</header>
-
 {include file='userNotice'}
 
 {if !$user->isProtected()}
diff --git a/com.woltlab.wcf/templates/userInformation.tpl b/com.woltlab.wcf/templates/userInformation.tpl
index a1180f58af..62f416322a 100644
--- a/com.woltlab.wcf/templates/userInformation.tpl
+++ b/com.woltlab.wcf/templates/userInformation.tpl
@@ -2,4 +2,4 @@
 
 {include file='userInformationButtons'}
 
-{include file='userInformationStatistics'}
\ No newline at end of file
+{include file='userInformationStatistics'}
diff --git a/com.woltlab.wcf/templates/userInformationHeadline.tpl b/com.woltlab.wcf/templates/userInformationHeadline.tpl
index e7368102e3..d11fb4e34a 100644
--- a/com.woltlab.wcf/templates/userInformationHeadline.tpl
+++ b/com.woltlab.wcf/templates/userInformationHeadline.tpl
@@ -1,13 +1,12 @@
-<div class="containerHeadline">
-	<h3><a href="{link controller='User' object=$user}{/link}">{$user->username}</a>{if $user->banned} <span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang}wcf.user.banned{/lang}"></span>{/if}{if MODULE_USER_RANK}
-		{if $user->getUserTitle()}
-			<span class="badge userTitleBadge{if $user->getRank() && $user->getRank()->cssClassName} {@$user->getRank()->cssClassName}{/if}">{$user->getUserTitle()}</span>
-		{/if}
-		{if $user->getRank() && $user->getRank()->rankImage}
-			<span class="userRankImage">{@$user->getRank()->getImage()}</span>
-		{/if}
-	{/if}</h3>
-</div>
+<a href="{link controller='User' object=$user}{/link}" class="username">{$user->username}</a>{if $user->banned} <span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang}wcf.user.banned{/lang}"></span>{/if}
+{if MODULE_USER_RANK}
+	{if $user->getUserTitle()}
+		<span class="badge userTitleBadge{if $user->getRank() && $user->getRank()->cssClassName} {@$user->getRank()->cssClassName}{/if}">{$user->getUserTitle()}</span>
+	{/if}
+	{if $user->getRank() && $user->getRank()->rankImage}
+		<span class="userRankImage">{@$user->getRank()->getImage()}</span>
+	{/if}
+{/if}
 <ul class="dataList userFacts">
 	{if $user->isAccessible('canViewProfile')}
 		{if $user->isVisibleOption('gender') && $user->gender}<li>{lang}wcf.user.gender.{if $user->gender == 1}male{else}female{/if}{/lang}</li>{/if}
@@ -17,4 +16,4 @@
 	<li>{lang}wcf.user.membersList.registrationDate{/lang}</li>
 	
 	{event name='userData'}
-</ul>
\ No newline at end of file
+</ul>
diff --git a/com.woltlab.wcf/templates/userMenuSidebar.tpl b/com.woltlab.wcf/templates/userMenuSidebar.tpl
index 9010295905..f944a6688a 100644
--- a/com.woltlab.wcf/templates/userMenuSidebar.tpl
+++ b/com.woltlab.wcf/templates/userMenuSidebar.tpl
@@ -13,16 +13,16 @@
 	</script> 
 	
 	{foreach from=$__wcf->getUserMenu()->getMenuItems('') item=menuCategory}
-		<fieldset>
-			<legend>{lang}{$menuCategory->menuItem}{/lang}</legend>
+		<section>
+			<h1>{lang}{$menuCategory->menuItem}{/lang}</h1>
 			
 			<nav>
-				<ul>
+				<ul class="sidebarNavigation">
 					{foreach from=$__wcf->getUserMenu()->getMenuItems($menuCategory->menuItem) item=menuItem}
 						<li{if $menuItem->menuItem|in_array:$__userMenuActiveItems} class="active"{/if}><a href="{$menuItem->getProcessor()->getLink()}">{@$menuItem}</a></li>
 					{/foreach}
 				</ul>
 			</nav>
-		</fieldset>
+		</section>
 	{/foreach}
 {/capture}
diff --git a/com.woltlab.wcf/templates/userPanel.tpl b/com.woltlab.wcf/templates/userPanel.tpl
index 08cf1497b2..9e36b4cf24 100644
--- a/com.woltlab.wcf/templates/userPanel.tpl
+++ b/com.woltlab.wcf/templates/userPanel.tpl
@@ -1,264 +1,268 @@
-{if $__wcf->user->userID}
-	<!-- user menu -->
-	<li id="userMenu">
-		<a class="framed" href="{link controller='User' object=$__wcf->user}{/link}">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(24)} <span>{lang}wcf.user.userNote{/lang}</span></a>
-		<div class="interactiveDropdown interactiveDropdownStatic interactiveDropdownUserMenu">
-			<div class="interactiveDropdownHeader">
-				<span class="interactiveDropdownTitle">{lang}wcf.user.controlPanel{/lang}</span>
-				
-				{hascontent}
-					<ul class="interactiveDropdownLinks">
-						{content}
-							{event name='userMenuLinks'}
-						{/content}
-					</ul>
-				{/hascontent}
-			</div>
-			<div class="interactiveDropdownItemsContainer">
-				<ul class="interactiveDropdownItems interactiveDropdownItemsUserMenu">
-					<li>
-						<div class="box64">
-							<a href="{link controller='User' object=$__wcf->user}{/link}" class="framed">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(64)}</a>
-							
-							<div class="containerHeadline">
-								<h3><a href="{link controller='User' object=$__wcf->user}{/link}">{$__wcf->user->username}</a></h3>
-								{if MODULE_USER_RANK}
-									<p>
-										{if $__wcf->getUserProfileHandler()->getUserTitle()}
-											<span class="badge userTitleBadge{if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->cssClassName} {@$__wcf->getUserProfileHandler()->getRank()->cssClassName}{/if}">{$__wcf->getUserProfileHandler()->getUserTitle()}</span>
-										{/if}
-										{if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->rankImage}
-											<span class="userRankImage">{@$__wcf->getUserProfileHandler()->getRank()->getImage()}</span>
-										{/if}
-									</p>
-								{/if}
-								
-								<ul class="interactiveDropdownUserMenuLinkList">
-									<li><a href="{link controller='User' object=$__wcf->user}{/link}">{lang}wcf.user.myProfile{/lang}</a></li>
-									{if $__wcf->getUserProfileHandler()->canEditOwnProfile()}<li><a href="{link controller='User' object=$__wcf->user}editOnInit=true#about{/link}">{lang}wcf.user.editProfile{/lang}</a></li>{/if}
-									{if $__wcf->session->getPermission('admin.general.canUseAcp')}<li><a href="{link isACP=true}{/link}">{lang}wcf.global.acp.short{/lang}</a></li>{/if}
-								</ul>
-							</div>
-						</div>
-					</li>
-					
-					{event name='userMenuItemsBefore'}
-					
-					{foreach from=$__wcf->getUserMenu()->getMenuItems('') item=menuCategory}
-						<li class="dropdownDivider"></li>
-						<li class="interactiveDropdownUserMenuItem">
-							<div class="box32">
-								<div><span class="icon icon32 {@$menuCategory->getIconClassName()}"></span></div>
-								
-								<div class="containerHeadline">
-									<h3>{lang}{$menuCategory->menuItem}{/lang}</h3>
+<nav id="topMenu" class="userPanel">
+	<ul class="userPanelItems">
+		{if $__wcf->user->userID}
+			<!-- user menu -->
+			<li id="userMenu">
+				<a class="framed" href="{link controller='User' object=$__wcf->user}{/link}">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)} <span>{lang}wcf.user.userNote{/lang}</span></a>
+				<div class="interactiveDropdown interactiveDropdownStatic interactiveDropdownUserMenu">
+					<div class="interactiveDropdownHeader">
+						<span class="interactiveDropdownTitle">{lang}wcf.user.controlPanel{/lang}</span>
+						
+						{hascontent}
+							<ul class="interactiveDropdownLinks">
+								{content}
+									{event name='userMenuLinks'}
+								{/content}
+							</ul>
+						{/hascontent}
+					</div>
+					<div class="interactiveDropdownItemsContainer">
+						<ul class="interactiveDropdownItems interactiveDropdownItemsUserMenu">
+							<li>
+								<div class="box64">
+									<a href="{link controller='User' object=$__wcf->user}{/link}" class="framed">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(64)}</a>
 									
-									<ul class="interactiveDropdownUserMenuLinkList">
-										{foreach from=$__wcf->getUserMenu()->getMenuItems($menuCategory->menuItem) item=menuItem}
-											<li><a href="{$menuItem->getProcessor()->getLink()}">{@$menuItem}</a></li>
-										{/foreach}
-									</ul>
+									<div class="containerHeadline">
+										<h3><a href="{link controller='User' object=$__wcf->user}{/link}">{$__wcf->user->username}</a></h3>
+										{if MODULE_USER_RANK}
+											<p>
+												{if $__wcf->getUserProfileHandler()->getUserTitle()}
+													<span class="badge userTitleBadge{if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->cssClassName} {@$__wcf->getUserProfileHandler()->getRank()->cssClassName}{/if}">{$__wcf->getUserProfileHandler()->getUserTitle()}</span>
+												{/if}
+												{if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->rankImage}
+													<span class="userRankImage">{@$__wcf->getUserProfileHandler()->getRank()->getImage()}</span>
+												{/if}
+											</p>
+										{/if}
+										
+										<ul class="interactiveDropdownUserMenuLinkList">
+											<li><a href="{link controller='User' object=$__wcf->user}{/link}">{lang}wcf.user.myProfile{/lang}</a></li>
+											{if $__wcf->getUserProfileHandler()->canEditOwnProfile()}<li><a href="{link controller='User' object=$__wcf->user}editOnInit=true#about{/link}">{lang}wcf.user.editProfile{/lang}</a></li>{/if}
+											{if $__wcf->session->getPermission('admin.general.canUseAcp')}<li><a href="{link isACP=true}{/link}">{lang}wcf.global.acp.short{/lang}</a></li>{/if}
+										</ul>
+									</div>
 								</div>
-							</div>
-						</li>
-					{/foreach}
-					
-					{event name='userMenuItemsAfter'}
-				</ul>
-			</div>
-			<a class="interactiveDropdownShowAll" href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" onclick="WCF.Dropdown.Interactive.Handler.close('userMenu'); WCF.System.Confirmation.show('{lang}wcf.user.logout.sure{/lang}', $.proxy(function (action) { if (action == 'confirm') window.location.href = $(this).attr('href'); }, this)); return false;">{lang}wcf.user.logout{/lang}</a>
-		</div>
-		<script data-relocate="true">
-			$(function() {
-				new WCF.User.Panel.UserMenu();
-			});
-		</script>
-	</li>
-	
-	<li><a href="{link controller='Settings'}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 icon-cogs"></span> <span>{lang}wcf.user.menu.settings{/lang}</span></a></li>
-	
-	<!-- user notifications -->
-	{if !$__hideUserMenu|isset}
-		<li id="userNotifications" data-count="{#$__wcf->getUserNotificationHandler()->getNotificationCount()}">
-			<a href="{link controller='NotificationList'}{/link}"><span class="icon icon16 icon-bell-alt"></span> <span>{lang}wcf.user.notification.notifications{/lang}</span>{if $__wcf->getUserNotificationHandler()->getNotificationCount()} <span class="badge badgeInverse">{#$__wcf->getUserNotificationHandler()->getNotificationCount()}</span>{/if}</a>
-			{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
+							</li>
+							
+							{event name='userMenuItemsBefore'}
+							
+							{foreach from=$__wcf->getUserMenu()->getMenuItems('') item=menuCategory}
+								<li class="dropdownDivider"></li>
+								<li class="interactiveDropdownUserMenuItem">
+									<div class="box32">
+										<div><span class="icon icon32 {@$menuCategory->getIconClassName()}"></span></div>
+										
+										<div class="containerHeadline">
+											<h3>{lang}{$menuCategory->menuItem}{/lang}</h3>
+											
+											<ul class="interactiveDropdownUserMenuLinkList">
+												{foreach from=$__wcf->getUserMenu()->getMenuItems($menuCategory->menuItem) item=menuItem}
+													<li><a href="{$menuItem->getProcessor()->getLink()}">{@$menuItem}</a></li>
+												{/foreach}
+											</ul>
+										</div>
+									</div>
+								</li>
+							{/foreach}
+							
+							{event name='userMenuItemsAfter'}
+						</ul>
+					</div>
+					<a class="interactiveDropdownShowAll" href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" onclick="WCF.Dropdown.Interactive.Handler.close('userMenu'); WCF.System.Confirmation.show('{lang}wcf.user.logout.sure{/lang}', $.proxy(function (action) { if (action == 'confirm') window.location.href = $(this).attr('href'); }, this)); return false;">{lang}wcf.user.logout{/lang}</a>
+				</div>
 				<script data-relocate="true">
-					//<![CDATA[
 					$(function() {
-						new WCF.User.Panel.Notification({
-							markAllAsReadConfirmMessage: '{lang}wcf.user.notification.markAllAsConfirmed.confirmMessage{/lang}',
-							noItems: '{lang}wcf.user.notification.noMoreNotifications{/lang}',
-							settingsLink: '{link controller='NotificationSettings' encode=false}{/link}',
-							showAllLink: '{link controller='NotificationList' encode=false}{/link}',
-							title: '{lang}wcf.user.notification.notifications{/lang}'
-						});
+						new WCF.User.Panel.UserMenu();
 					});
-					//]]>
 				</script>
-			{/if}
-		</li>
-	{/if}
-{else}
-	{if !$__disableLoginLink|isset}
-		<!-- login box -->
-		<li id="userLogin">
-			<a class="loginLink" href="{link controller='Login'}{/link}">{lang}wcf.user.loginOrRegister{/lang}</a>
-			<div id="loginForm" style="display: none;">
-				{capture assign='__3rdPartyButtons'}
-					{if GITHUB_PUBLIC_KEY !== '' && GITHUB_PRIVATE_KEY !== ''}
-						<li id="githubAuth" class="3rdPartyAuth">
-							<a href="{link controller='GithubAuth'}{/link}" class="thirdPartyLoginButton githubLoginButton"><span class="icon icon16 icon-github"></span> <span>{lang}wcf.user.3rdparty.github.login{/lang}</span></a>
-						</li>
-					{/if}
-					
-					{if TWITTER_PUBLIC_KEY !== '' && TWITTER_PRIVATE_KEY !== ''}
-						<li id="twitterAuth" class="3rdPartyAuth">
-							<a href="{link controller='TwitterAuth'}{/link}" class="thirdPartyLoginButton twitterLoginButton"><span class="icon icon16 icon-twitter"></span> <span>{lang}wcf.user.3rdparty.twitter.login{/lang}</span></a>
-						</li>
-					{/if}
-					
-					{if FACEBOOK_PUBLIC_KEY !== '' && FACEBOOK_PRIVATE_KEY !== ''}
-						<li id="facebookAuth" class="3rdPartyAuth">
-							<a href="{link controller='FacebookAuth'}{/link}" class="thirdPartyLoginButton facebookLoginButton"><span class="icon icon16 icon-facebook"></span> <span>{lang}wcf.user.3rdparty.facebook.login{/lang}</span></a>
-						</li>
-					{/if}
-					
-					{if GOOGLE_PUBLIC_KEY !== '' && GOOGLE_PRIVATE_KEY !== ''}
-						<li id="googleAuth" class="3rdPartyAuth">
-							<a href="{link controller='GoogleAuth'}{/link}" class="thirdPartyLoginButton googleLoginButton"><span class="icon icon16 icon-google-plus"></span> <span>{lang}wcf.user.3rdparty.google.login{/lang}</span></a>
-						</li>
+			</li>
+			
+			<li><a href="{link controller='Settings'}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 icon-cogs"></span> <span>{lang}wcf.user.menu.settings{/lang}</span></a></li>
+			
+			<!-- user notifications -->
+			{if !$__hideUserMenu|isset}
+				<li id="userNotifications" data-count="{#$__wcf->getUserNotificationHandler()->getNotificationCount()}">
+					<a href="{link controller='NotificationList'}{/link}"><span class="icon icon16 icon-bell-alt"></span> <span>{lang}wcf.user.notification.notifications{/lang}</span>{if $__wcf->getUserNotificationHandler()->getNotificationCount()} <span class="badge badgeInverse">{#$__wcf->getUserNotificationHandler()->getNotificationCount()}</span>{/if}</a>
+					{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
+						<script data-relocate="true">
+							//<![CDATA[
+							$(function() {
+								new WCF.User.Panel.Notification({
+									markAllAsReadConfirmMessage: '{lang}wcf.user.notification.markAllAsConfirmed.confirmMessage{/lang}',
+									noItems: '{lang}wcf.user.notification.noMoreNotifications{/lang}',
+									settingsLink: '{link controller='NotificationSettings' encode=false}{/link}',
+									showAllLink: '{link controller='NotificationList' encode=false}{/link}',
+									title: '{lang}wcf.user.notification.notifications{/lang}'
+								});
+							});
+							//]]>
+						</script>
 					{/if}
-					
-					{event name='3rdpartyButtons'}
-				{/capture}
-				
-				<form method="post" action="{link controller='Login'}{/link}">
-					<fieldset>
-						{if $__3rdPartyButtons|trim}<legend>{lang}wcf.user.login{/lang}</legend>{/if}
-						
-						<dl>
-							<dt><label for="username">{lang}wcf.user.usernameOrEmail{/lang}</label></dt>
-							<dd>
-								<input type="text" id="username" name="username" value="" required="required" class="long" />
-							</dd>
-						</dl>
-						
-						{if !REGISTER_DISABLED}
-							<dl>
-								<dt>{lang}wcf.user.login.action{/lang}</dt>
-								<dd>
-									<label><input type="radio" name="action" value="register" /> {lang}wcf.user.login.action.register{/lang}</label>
-									<label><input type="radio" name="action" value="login" checked="checked" /> {lang}wcf.user.login.action.login{/lang}</label>
-								</dd>
-							</dl>
-						{/if}
-						
-						<dl>
-							<dt><label for="password">{lang}wcf.user.password{/lang}</label></dt>
-							<dd>
-								<input type="password" id="password" name="password" value="" class="long" />
-							</dd>
-						</dl>
-						
-						{if $__wcf->getUserAuthenticationFactory()->getUserAuthentication()->supportsPersistentLogins()}
-							<dl>
-								<dt></dt>
-								<dd><label><input type="checkbox" id="useCookies" name="useCookies" value="1" checked="checked" /> {lang}wcf.user.useCookies{/lang}</label></dd>
-							</dl>
-						{/if}
-						
-						{event name='loginFields'}
+				</li>
+			{/if}
+		{else}
+			{if !$__disableLoginLink|isset}
+				<!-- login box -->
+				<li id="userLogin">
+					<a class="loginLink" href="{link controller='Login'}{/link}">{lang}wcf.user.loginOrRegister{/lang}</a>
+					<div id="loginForm" style="display: none;">
+						{capture assign='__3rdPartyButtons'}
+							{if GITHUB_PUBLIC_KEY !== '' && GITHUB_PRIVATE_KEY !== ''}
+								<li id="githubAuth" class="3rdPartyAuth">
+									<a href="{link controller='GithubAuth'}{/link}" class="thirdPartyLoginButton githubLoginButton"><span class="icon icon16 icon-github"></span> <span>{lang}wcf.user.3rdparty.github.login{/lang}</span></a>
+								</li>
+							{/if}
+							
+							{if TWITTER_PUBLIC_KEY !== '' && TWITTER_PRIVATE_KEY !== ''}
+								<li id="twitterAuth" class="3rdPartyAuth">
+									<a href="{link controller='TwitterAuth'}{/link}" class="thirdPartyLoginButton twitterLoginButton"><span class="icon icon16 icon-twitter"></span> <span>{lang}wcf.user.3rdparty.twitter.login{/lang}</span></a>
+								</li>
+							{/if}
+							
+							{if FACEBOOK_PUBLIC_KEY !== '' && FACEBOOK_PRIVATE_KEY !== ''}
+								<li id="facebookAuth" class="3rdPartyAuth">
+									<a href="{link controller='FacebookAuth'}{/link}" class="thirdPartyLoginButton facebookLoginButton"><span class="icon icon16 icon-facebook"></span> <span>{lang}wcf.user.3rdparty.facebook.login{/lang}</span></a>
+								</li>
+							{/if}
+							
+							{if GOOGLE_PUBLIC_KEY !== '' && GOOGLE_PRIVATE_KEY !== ''}
+								<li id="googleAuth" class="3rdPartyAuth">
+									<a href="{link controller='GoogleAuth'}{/link}" class="thirdPartyLoginButton googleLoginButton"><span class="icon icon16 icon-google-plus"></span> <span>{lang}wcf.user.3rdparty.google.login{/lang}</span></a>
+								</li>
+							{/if}
+							
+							{event name='3rdpartyButtons'}
+						{/capture}
 						
-						<div class="formSubmit">
-							<input type="submit" id="loginSubmitButton" name="submitButton" value="{lang}wcf.user.button.login{/lang}" accesskey="s" />
-							<a class="button" href="{link controller='LostPassword'}{/link}"><span>{lang}wcf.user.lostPassword{/lang}</span></a>
-							<input type="hidden" name="url" value="{$__wcf->session->requestURI}" />
-							{@SECURITY_TOKEN_INPUT_TAG}
-						</div>
-					</fieldset>
-					
-					{if $__3rdPartyButtons|trim}
-						<fieldset>
-							<legend>{lang}wcf.user.login.3rdParty{/lang}</legend>
-							<ul class="buttonList smallButtons thirdPartyLogin">
-								{@$__3rdPartyButtons}	
-							</ul>
-						</fieldset>
-					{/if}
-				</form>
-			</div>
-			
-			<script data-relocate="true">
-				//<![CDATA[
-				$(function() {
-					WCF.Language.addObject({
-						'wcf.user.button.login': '{lang}wcf.user.button.login{/lang}',
-						'wcf.user.button.register': '{lang}wcf.user.button.register{/lang}',
-						'wcf.user.login': '{lang}wcf.user.login{/lang}'
-					});
-					new WCF.User.Login(true);
-				});
-				//]]>
-			</script>
-		</li>
-	{/if}
-	{if $__wcf->getLanguage()->getLanguages()|count > 1}
-		<li id="pageLanguageContainer">
-			<script data-relocate="true">
-				//<![CDATA[
-				$(function() {
-					var $languages = {
-						{implode from=$__wcf->getLanguage()->getLanguages() item=language}
-							'{@$language->languageID}': {
-								iconPath: '{@$language->getIconPath()}',
-								languageName: '{$language}'
-							}
-						{/implode}
-					};
+						<form method="post" action="{link controller='Login'}{/link}">
+							<fieldset>
+								{if $__3rdPartyButtons|trim}<legend>{lang}wcf.user.login{/lang}</legend>{/if}
+								
+								<dl>
+									<dt><label for="username">{lang}wcf.user.usernameOrEmail{/lang}</label></dt>
+									<dd>
+										<input type="text" id="username" name="username" value="" required="required" class="long" />
+									</dd>
+								</dl>
+								
+								{if !REGISTER_DISABLED}
+									<dl>
+										<dt>{lang}wcf.user.login.action{/lang}</dt>
+										<dd>
+											<label><input type="radio" name="action" value="register" /> {lang}wcf.user.login.action.register{/lang}</label>
+											<label><input type="radio" name="action" value="login" checked="checked" /> {lang}wcf.user.login.action.login{/lang}</label>
+										</dd>
+									</dl>
+								{/if}
+								
+								<dl>
+									<dt><label for="password">{lang}wcf.user.password{/lang}</label></dt>
+									<dd>
+										<input type="password" id="password" name="password" value="" class="long" />
+									</dd>
+								</dl>
+								
+								{if $__wcf->getUserAuthenticationFactory()->getUserAuthentication()->supportsPersistentLogins()}
+									<dl>
+										<dt></dt>
+										<dd><label><input type="checkbox" id="useCookies" name="useCookies" value="1" checked="checked" /> {lang}wcf.user.useCookies{/lang}</label></dd>
+									</dl>
+								{/if}
+								
+								{event name='loginFields'}
+								
+								<div class="formSubmit">
+									<input type="submit" id="loginSubmitButton" name="submitButton" value="{lang}wcf.user.button.login{/lang}" accesskey="s" />
+									<a class="button" href="{link controller='LostPassword'}{/link}"><span>{lang}wcf.user.lostPassword{/lang}</span></a>
+									<input type="hidden" name="url" value="{$__wcf->session->requestURI}" />
+									{@SECURITY_TOKEN_INPUT_TAG}
+								</div>
+							</fieldset>
+							
+							{if $__3rdPartyButtons|trim}
+								<fieldset>
+									<legend>{lang}wcf.user.login.3rdParty{/lang}</legend>
+									<ul class="buttonList smallButtons thirdPartyLogin">
+										{@$__3rdPartyButtons}	
+									</ul>
+								</fieldset>
+							{/if}
+						</form>
+					</div>
 					
-					new WCF.Language.Chooser('pageLanguageContainer', 'languageID', {@$__wcf->getLanguage()->languageID}, $languages, function(item) {
-						var $location = window.location.toString().replace(/#.*/, '').replace(/(\?|&)l=[0-9]+/g, '');
-						var $delimiter = ($location.indexOf('?') == -1) ? '?' : '&';
-						
-						window.location = $location + $delimiter + 'l=' + item.data('languageID') + window.location.hash;
-					});
-				});
-				//]]>
-			</script>
-		</li>
-	{/if}
-{/if}
-
-{if !$__hideUserMenu|isset}
-	{if $__wcf->user->userID && $__wcf->session->getPermission('mod.general.canUseModeration')}
-		<li id="outstandingModeration" data-count="{#$__wcf->getModerationQueueManager()->getOutstandingModerationCount()}">
-			<a href="{link controller='ModerationList'}{/link}">
-				<span class="icon icon16 icon-warning-sign"></span>
-				<span>{lang}wcf.moderation.moderation{/lang}</span>
-				{if $__wcf->getModerationQueueManager()->getUnreadModerationCount()}<span class="badge badgeInverse">{#$__wcf->getModerationQueueManager()->getUnreadModerationCount()}</span>{/if}
-			</a>
-			{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
-				<script data-relocate="true">
-					//<![CDATA[
-					$(function() {
-						new WCF.User.Panel.Moderation({
-							deletedContent: '{lang}wcf.moderation.showDeletedContent{/lang}',
-							deletedContentLink: '{link controller='DeletedContentList' encode=false}{/link}',
-							markAllAsReadConfirmMessage: '{lang}wcf.moderation.markAllAsRead.confirmMessage{/lang}',
-							noItems: '{lang}wcf.moderation.noMoreItems{/lang}',
-							showAllLink: '{link controller='ModerationList' encode=false}{/link}',
-							title: '{lang}wcf.moderation.moderation{/lang}'
+					<script data-relocate="true">
+						//<![CDATA[
+						$(function() {
+							WCF.Language.addObject({
+								'wcf.user.button.login': '{lang}wcf.user.button.login{/lang}',
+								'wcf.user.button.register': '{lang}wcf.user.button.register{/lang}',
+								'wcf.user.login': '{lang}wcf.user.login{/lang}'
+							});
+							new WCF.User.Login(true);
 						});
-					});
-					//]]>
-				</script>
+						//]]>
+					</script>
+				</li>
+			{/if}
+			{if $__wcf->getLanguage()->getLanguages()|count > 1}
+				<li id="pageLanguageContainer">
+					<script data-relocate="true">
+						//<![CDATA[
+						$(function() {
+							var $languages = {
+								{implode from=$__wcf->getLanguage()->getLanguages() item=language}
+									'{@$language->languageID}': {
+										iconPath: '{@$language->getIconPath()}',
+										languageName: '{$language}'
+									}
+								{/implode}
+							};
+							
+							new WCF.Language.Chooser('pageLanguageContainer', 'languageID', {@$__wcf->getLanguage()->languageID}, $languages, function(item) {
+								var $location = window.location.toString().replace(/#.*/, '').replace(/(\?|&)l=[0-9]+/g, '');
+								var $delimiter = ($location.indexOf('?') == -1) ? '?' : '&';
+								
+								window.location = $location + $delimiter + 'l=' + item.data('languageID') + window.location.hash;
+							});
+						});
+						//]]>
+					</script>
+				</li>
+			{/if}
+		{/if}
+		
+		{if !$__hideUserMenu|isset}
+			{if $__wcf->user->userID && $__wcf->session->getPermission('mod.general.canUseModeration')}
+				<li id="outstandingModeration" data-count="{#$__wcf->getModerationQueueManager()->getOutstandingModerationCount()}">
+					<a href="{link controller='ModerationList'}{/link}">
+						<span class="icon icon16 icon-warning-sign"></span>
+						<span>{lang}wcf.moderation.moderation{/lang}</span>
+						{if $__wcf->getModerationQueueManager()->getUnreadModerationCount()}<span class="badge badgeInverse">{#$__wcf->getModerationQueueManager()->getUnreadModerationCount()}</span>{/if}
+					</a>
+					{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
+						<script data-relocate="true">
+							//<![CDATA[
+							$(function() {
+								new WCF.User.Panel.Moderation({
+									deletedContent: '{lang}wcf.moderation.showDeletedContent{/lang}',
+									deletedContentLink: '{link controller='DeletedContentList' encode=false}{/link}',
+									markAllAsReadConfirmMessage: '{lang}wcf.moderation.markAllAsRead.confirmMessage{/lang}',
+									noItems: '{lang}wcf.moderation.noMoreItems{/lang}',
+									showAllLink: '{link controller='ModerationList' encode=false}{/link}',
+									title: '{lang}wcf.moderation.moderation{/lang}'
+								});
+							});
+							//]]>
+						</script>
+					{/if}
+				</li>
 			{/if}
-		</li>
-	{/if}
-	
-	{event name='menuItems'}
-{/if}
-
-{if $__wcf->user->userID}
-	<li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 icon-signout"></span> <span>{lang}wcf.user.logout{/lang}</span></a></li>
-{/if}
+			
+			{event name='menuItems'}
+		{/if}
+		
+		{if $__wcf->user->userID}
+			<li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 icon-signout"></span> <span>{lang}wcf.user.logout{/lang}</span></a></li>
+		{/if}
+	</ul>
+</nav>
\ No newline at end of file
diff --git a/com.woltlab.wcf/templates/userProfileLikes.tpl b/com.woltlab.wcf/templates/userProfileLikes.tpl
index 789760933e..2611a738b4 100644
--- a/com.woltlab.wcf/templates/userProfileLikes.tpl
+++ b/com.woltlab.wcf/templates/userProfileLikes.tpl
@@ -16,7 +16,7 @@
 </script>
 
 <ul id="likeList" class="containerList recentActivityList likeList" data-last-like-time="{@$lastLikeTime}">
-	<li>
+	<li class="likeTypeSelection">
 		<ul class="buttonGroup" id="likeType">
 			<li><a class="button small active" data-like-type="received">{lang}wcf.like.likesReceived{/lang}</a></li>
 			<li><a class="button small" data-like-type="given">{lang}wcf.like.likesGiven{/lang}</a></li>
diff --git a/com.woltlab.wcf/templates/userSidebar.tpl b/com.woltlab.wcf/templates/userSidebar.tpl
index 8f0876ef77..56a2943d6f 100644
--- a/com.woltlab.wcf/templates/userSidebar.tpl
+++ b/com.woltlab.wcf/templates/userSidebar.tpl
@@ -1,6 +1,17 @@
-<fieldset>
-	<legend class="invisible">{lang}wcf.user.avatar{/lang}</legend>
-	
+<section class="userDetails"
+	{if $isAccessible}
+		data-object-id="{@$user->userID}"
+		{if $__wcf->session->getPermission('admin.user.canBanUser')}
+			data-banned="{@$user->banned}"
+		{/if}
+		{if $__wcf->session->getPermission('admin.user.canDisableAvatar')}
+			data-disable-avatar="{@$user->disableAvatar}"
+		{/if}
+		{if $__wcf->session->getPermission('admin.user.canDisableSignature')}
+			data-disable-signature="{@$user->disableSignature}"
+		{/if}
+	{/if}
+>
 	<div class="userAvatar">
 		{if $user->userID == $__wcf->user->userID}
 			<a href="{link controller='AvatarEdit'}{/link}" class="framed jsTooltip" title="{lang}wcf.user.avatar.edit{/lang}">{@$user->getAvatar()->getImageTag()}</a>
@@ -8,11 +19,74 @@
 			<span class="framed">{@$user->getAvatar()->getImageTag()}</span>
 		{/if}
 	</div>
-</fieldset>
+	
+	<h1>{$user->username}{if $user->banned} <span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang}wcf.user.banned{/lang}"></span>{/if}</h1>
+	
+	{if MODULE_USER_RANK}
+		<div class="userRank">
+			{if $user->getUserTitle()}
+				<span class="badge userTitleBadge{if $user->getRank() && $user->getRank()->cssClassName} {@$user->getRank()->cssClassName}{/if}">{$user->getUserTitle()}</span>
+			{/if}
+			{if $user->getRank() && $user->getRank()->rankImage}
+				<span class="userRankImage">{@$user->getRank()->getImage()}</span>
+			{/if}
+		</div>
+	{/if}
+	
+	<ul class="dataList">
+		{if $user->isVisibleOption('gender') && $user->gender}<li>{lang}wcf.user.gender.{if $user->gender == 1}male{else}female{/if}{/lang}</li>{/if}
+		{if $user->isVisibleOption('birthday') && $user->getAge()}<li>{@$user->getAge()}</li>{/if}
+		{if $user->isVisibleOption('location') && $user->location}<li>{lang}wcf.user.membersList.location{/lang}</li>{/if}
+		{if $user->getOldUsername()}<li>{lang}wcf.user.profile.oldUsername{/lang}</li>{/if}
+		<li>{lang}wcf.user.membersList.registrationDate{/lang}</li>
+		{event name='userDataRow1'}
+	</ul>
+	{if $user->canViewOnlineStatus() && $user->getLastActivityTime()}
+		<p class="userActivity">
+			<span>{lang}wcf.user.usersOnline.lastActivity{/lang}: {@$user->getLastActivityTime()|time}</span>
+			{if $user->getCurrentLocation()}<span>{@$user->getCurrentLocation()}</span>{/if}
+		</p>
+	{/if}
+	<nav class="jsMobileNavigation buttonGroupNavigation">
+		<ul id="profileButtonContainer" class="buttonGroup">
+			{hascontent}
+				<li class="dropdown">
+					<a href="#" class="button dropdownToggle jsTooltip" title="{lang}wcf.user.searchUserContent{/lang}"><span class="icon icon16 icon-search"></span> <span class="invisible">{lang}wcf.user.searchUserContent{/lang}</span></a>
+					<ul class="dropdownMenu">
+						{content}
+							{event name='quickSearchItems'}
+						{/content}
+					</ul>
+				</li>
+			{/hascontent}
+			
+			{if $__wcf->session->getPermission('user.profile.canReportContent')}
+				<li class="jsReportUser jsOnly" data-object-id="{@$user->userID}"><a href="#" title="{lang}wcf.user.profile.report{/lang}" class="button jsTooltip"><span class="icon icon16 icon-warning-sign"></span> <span class="invisible">{lang}wcf.user.profile.report{/lang}</span></a></li>
+			{/if}
+			
+			{if $user->userID != $__wcf->user->userID}
+				{if $user->isAccessible('canViewEmailAddress') || $__wcf->session->getPermission('admin.user.canEditMailAddress')}
+					<li><a class="button jsTooltip" href="mailto:{@$user->getEncodedEmail()}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 icon-envelope-alt"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
+				{elseif $user->isAccessible('canMail') && $__wcf->session->getPermission('user.profile.canMail')}
+					<li><a class="button jsTooltip" href="{link controller='Mail' object=$user}{/link}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 icon-envelope-alt"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
+				{/if}
+			{/if}
+			
+			{event name='buttons'}
+			
+			{if $isAccessible && $__wcf->user->userID != $user->userID && ($__wcf->session->getPermission('admin.user.canBanUser') || $__wcf->session->getPermission('admin.user.canDisableAvatar') || $__wcf->session->getPermission('admin.user.canDisableSignature') || ($__wcf->session->getPermission('admin.general.canUseAcp') && $__wcf->session->getPermission('admin.user.canEditUser')){event name='moderationDropdownPermissions'})}
+				<li class="dropdown">
+					<a href="{link controller='UserEdit' object=$user isACP=true}{/link}" class="button jsTooltip jsUserInlineEditor" title="{lang}wcf.user.moderate{/lang}"><span class="icon icon16 fa-wrench"></span> <span class="invisible">{lang}wcf.user.moderate{/lang}</span></a>
+					<ul class="dropdownMenu"></ul>
+				</li>
+			{/if}
+		</ul>
+	</nav>
+</section>
 
 {hascontent}
-	<fieldset>
-		<legend class="invisible">{lang}wcf.user.stats{/lang}</legend>
+	<section>
+		<h1 class="invisible">{lang}wcf.user.stats{/lang}</h1>
 		
 		<dl class="plain statsDataList">
 			{content}
@@ -34,15 +108,15 @@
 				{/if}
 			{/content}
 		</dl>
-	</fieldset>
+	</section>
 {/hascontent}
 
 {event name='afterStatistics'}
 
 {if !$user->isProtected()}
 	{if $followingCount}
-		<fieldset>
-			<legend>{lang}wcf.user.profile.following{/lang} <span class="badge">{#$followingCount}</span></legend>
+		<section>
+			<h1>{lang}wcf.user.profile.following{/lang} <span class="badge">{#$followingCount}</span></h1>
 			
 			<div>
 				<ul class="framedIconList">
@@ -51,16 +125,16 @@
 					{/foreach}
 				</ul>
 				
-				{if $followingCount > 10}
+				{if $followingCount > 8}
 					<a id="followingAll" class="button small more jsOnly">{lang}wcf.global.button.showAll{/lang}</a>
 				{/if}
 			</div>
-		</fieldset>
+		</section>
 	{/if}
 	
 	{if $followerCount}
-		<fieldset>
-			<legend>{lang}wcf.user.profile.followers{/lang} <span class="badge">{#$followerCount}</span></legend>
+		<section>
+			<h1>{lang}wcf.user.profile.followers{/lang} <span class="badge">{#$followerCount}</span></h1>
 			
 			<div>
 				<ul class="framedIconList">
@@ -69,16 +143,16 @@
 					{/foreach}
 				</ul>
 					
-				{if $followerCount > 10}
+				{if $followerCount > 8}
 					<a id="followerAll" class="button small more jsOnly">{lang}wcf.global.button.showAll{/lang}</a>
 				{/if}
 			</div>
-		</fieldset>
+		</section>
 	{/if}
 	
 	{if $visitorCount}
-		<fieldset>
-			<legend>{lang}wcf.user.profile.visitors{/lang} <span class="badge">{#$visitorCount}</span></legend>
+		<section>
+			<h1>{lang}wcf.user.profile.visitors{/lang} <span class="badge">{#$visitorCount}</span></h1>
 			
 			<div>
 				<ul class="framedIconList">
@@ -87,11 +161,11 @@
 					{/foreach}
 				</ul>
 					
-				{if $visitorCount > 10}
+				{if $visitorCount > 8}
 					<a id="visitorAll" class="button small more jsOnly">{lang}wcf.global.button.showAll{/lang}</a>
 				{/if}
 			</div>
-		</fieldset>
+		</section>
 	{/if}
 	
 	{event name='boxes'}
diff --git a/com.woltlab.wcf/templates/usersOnlineInfoBox.tpl b/com.woltlab.wcf/templates/usersOnlineInfoBox.tpl
index f4176913be..f90cf84927 100644
--- a/com.woltlab.wcf/templates/usersOnlineInfoBox.tpl
+++ b/com.woltlab.wcf/templates/usersOnlineInfoBox.tpl
@@ -1,7 +1,7 @@
 {if !$usersOnlineShowRecord|isset}{assign var='usersOnlineShowRecord' value=true}{/if}
 {if MODULE_USERS_ONLINE && $__wcf->session->getPermission('user.profile.canViewUsersOnlineList') && $usersOnlineList->stats[total]}
 	<li class="box32 usersOnlineInfoBox">
-		<span class="icon icon32 icon-user"></span>
+		<span class="icon icon32 fa-user"></span>
 		
 		<div>
 			<div class="containerHeadline">
diff --git a/com.woltlab.wcf/templates/usersOnlineList.tpl b/com.woltlab.wcf/templates/usersOnlineList.tpl
index 0e36d16183..0eb0fade18 100644
--- a/com.woltlab.wcf/templates/usersOnlineList.tpl
+++ b/com.woltlab.wcf/templates/usersOnlineList.tpl
@@ -124,18 +124,17 @@
 					<a href="{link controller='User' object=$user}{/link}" title="{$user->username}" class="framed">{@$user->getAvatar()->getImageTag(48)}</a>
 					
 					<div class="details userInformation">
-						<div class="containerHeadline">
-							<h3><a href="{link controller='User' object=$user}{/link}">{@$user->getFormattedUsername()}</a>{if MODULE_USER_RANK}
-								{if $user->getUserTitle()}
-									<span class="badge userTitleBadge{if $user->getRank() && $user->getRank()->cssClassName} {@$user->getRank()->cssClassName}{/if}">{$user->getUserTitle()}</span>
-								{/if}
-								{if $user->getRank() && $user->getRank()->rankImage}
-									<span class="userRankImage">{@$user->getRank()->getImage()}</span>
-								{/if}
-							{/if}</h3>
-							
-							{@$locationData}
-						</div>
+						<a href="{link controller='User' object=$user}{/link}" class="username">{@$user->getFormattedUsername()}</a>
+						{if MODULE_USER_RANK}
+							{if $user->getUserTitle()}
+								<span class="badge userTitleBadge{if $user->getRank() && $user->getRank()->cssClassName} {@$user->getRank()->cssClassName}{/if}">{$user->getUserTitle()}</span>
+							{/if}
+							{if $user->getRank() && $user->getRank()->rankImage}
+								<span class="userRankImage">{@$user->getRank()->getImage()}</span>
+							{/if}
+						{/if}
+						
+						{@$locationData}
 						
 						{@$sessionData}
 						
diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 7ccd64fc3c..9faba717a3 100755
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -3647,7 +3647,7 @@ WCF.Collapsible.Remote = Class.extend({
 	 */
 	_createButton: function(containerID, buttonContainer) {
 		var $isOpen = this._containers[containerID].data('isOpen');
-		var $button = $('<span class="collapsibleButton jsTooltip pointer icon icon16 icon-' + ($isOpen ? 'chevron-down' : 'chevron-right') + '" title="'+WCF.Language.get('wcf.global.button.collapsible')+'">').prependTo(buttonContainer);
+		var $button = $('<span class="collapsibleButton jsTooltip pointer icon icon16 fa-chevron-down" title="'+WCF.Language.get('wcf.global.button.collapsible')+'">').prependTo(buttonContainer);
 		$button.data('containerID', containerID).click($.proxy(this._toggleContainer, this));
 		
 		return $button;
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Bbcode/Collapsible.js b/wcfsetup/install/files/js/WoltLab/WCF/Bbcode/Collapsible.js
new file mode 100644
index 0000000000..bb44fb95ba
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Bbcode/Collapsible.js
@@ -0,0 +1,56 @@
+/**
+ * Generic handler for collapsible bbcode boxes.
+ * 
+ * @author	Alexander Ebert
+ * @copyright	2001-2015 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module	WoltLab/WCF/Bbcode/Collapsible
+ */
+define([], function() {
+	"use strict";
+	
+	var _containers = elByClass('jsCollapsibleBbcode');
+	
+	/**
+	 * @exports	WoltLab/WCF/Bbcode/Collapsible
+	 */
+	var BbcodeCollapsible = {
+		observe: function() {
+			var container, toggleButton;
+			while (_containers.length) {
+				container = _containers[0];
+				container.classList.remove('jsCollapsibleBbcode');
+				
+				toggleButton = elBySel('.toggleButton');
+				if (toggleButton === null) {
+					continue;
+				}
+				
+				(function(container, toggleButton) {
+					var toggle = function() {
+						var expand = container.classList.contains('collapsed');
+						container.classList[expand ? 'remove' : 'add']('collapsed');
+						toggleButton.textContent = elAttr(toggleButton, 'data-title-' + (expand ? 'collapse' : 'expand'));
+					};
+					
+					toggleButton.addEventListener('click', toggle);
+					
+					// searching in a page causes Google Chrome to scroll
+					// the box if something inside it matches
+					// 
+					// expand the box in this case, to:
+					// a) Improve UX
+					// b) Hide an ugly misplaced "show all" button
+					container.addEventListener('scroll', toggle);
+					
+					// expand boxes that are initially scrolled
+					if (container.scrollTop !== 0) {
+						toggle();
+					}
+				})(container, toggleButton);
+			}
+		}
+	};
+	
+	return BbcodeCollapsible;
+});
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Bbcode/ToHtml.js b/wcfsetup/install/files/js/WoltLab/WCF/Bbcode/ToHtml.js
index 22a642cb89..caafe12256 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Bbcode/ToHtml.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Bbcode/ToHtml.js
@@ -488,7 +488,7 @@ define(['Core', 'EventHandler', 'Language', 'StringUtil', 'WoltLab/WCF/Bbcode/Pa
 		 * @returns	{array}		first item represents the opening tag, the second the closing one
 		 */
 		_convertList: function(stack, item, index) {
-			var type = (items.attributes.length) ? item.attributes[0] : '';
+			var type = (item.attributes.length) ? item.attributes[0] : '';
 			
 			// replace list items
 			for (var i = index + 1; i < item.pair; i++) {
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Bootstrap.js b/wcfsetup/install/files/js/WoltLab/WCF/Bootstrap.js
index 32234df72e..f85a8c6781 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Bootstrap.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Bootstrap.js
@@ -50,7 +50,7 @@ define(
 			UiSimpleDropdown.setup();
 			UiMobile.setup();
 			UiTabMenu.setup();
-			UiFlexibleMenu.setup();
+			//UiFlexibleMenu.setup();
 			UiDialog.setup();
 			UiTooltip.setup();
 			
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/BootstrapFrontend.js b/wcfsetup/install/files/js/WoltLab/WCF/BootstrapFrontend.js
index dbf0800397..237669d72e 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/BootstrapFrontend.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/BootstrapFrontend.js
@@ -30,10 +30,10 @@ define(
 		setup: function(options) {
 			Bootstrap.setup();
 			
-			ControllerSitemap.setup();
+			//ControllerSitemap.setup();
 			
 			if (options.styleChanger) {
-				ControllerStyleChanger.setup();
+				//ControllerStyleChanger.setup();
 			}
 			
 			this._initUserPopover();
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/List.js b/wcfsetup/install/files/js/WoltLab/WCF/List.js
index f461382cbe..040f64978f 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/List.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/List.js
@@ -55,7 +55,7 @@ define([], function() {
 				return this._set['delete'](value);
 			}
 			else {
-				var index = this._set.indexOf(index);
+				var index = this._set.indexOf(value);
 				if (index === -1) {
 					return false;
 				}
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Like/Handler.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Like/Handler.js
new file mode 100644
index 0000000000..1aa90ae320
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Like/Handler.js
@@ -0,0 +1,287 @@
+define(['Ajax', 'Core', 'Dictionary', 'Language', 'ObjectMap', 'StringUtil', 'Dom/ChangeListener', 'Dom/Util', 'Ui/Dialog'], function(Ajax, Core, Dictionary, Language, ObjectMap, StringUtil, DomChangeListener, DomUtil, UiDialog) {
+	"use strict";
+	
+	var _isBusy = false;
+	
+	function UiLikeHandler(objectType, options) { this.init(objectType, options); };
+	UiLikeHandler.prototype = {
+		init: function(objectType, options) {
+			if (options.containerSelector === '') {
+				throw new Error("[WoltLab/WCF/Ui/Like/Handler] Expected a non-emtpy string for option 'containerSelector'.");
+			}
+			
+			this._containers = new ObjectMap();
+			this._details = new ObjectMap();
+			this._objectType = objectType;
+			this._options = Core.extend({
+				isSingleItem: false,
+				
+				// permissions
+				canDislike: false,
+				canLike: false,
+				canLikeOwnContent: false,
+				canViewSummary: false,
+				
+				// selectors
+				badgeContainerSelector: '.messageHeader .messageHeadline > p',
+				buttonBeforeSelector: '.messageFooterButtons > .toTopLink',
+				containerSelector: '',
+				summarySelector: '.messageFooterNotes'
+			}, options);
+			
+			this.initContainers(options, objectType);
+		},
+		
+		initContainers: function() {
+			var element, elements = elBySelAll(this._options.containerSelector), elementData, triggerChange = false;
+			for (var i = 0, length = elements.length; i < length; i++) {
+				element = elements[i];
+				if (this._containers.has(element)) {
+					continue;
+				}
+				
+				elementData = {
+					badge: null,
+					dislikeButton: null,
+					likeButton: null,
+					summary: null,
+					
+					dislikes: ~~elAttr(element, 'data-like-dislikes'),
+					liked: ~~elAttr(element, 'data-like-liked'),
+					likes: ~~elAttr(element, 'data-like-likes'),
+					objectId: ~~elAttr(element, 'data-object-id'),
+					users: JSON.parse(elAttr(element, 'data-like-users'))
+				};
+				
+				this._containers.set(element, elementData);
+				this._buildWidget(element, elementData);
+				
+				triggerChange = true;
+			}
+			
+			if (triggerChange) {
+				DomChangeListener.trigger();
+			}
+		},
+		
+		_buildWidget: function(element, elementData) {
+			// build summary
+			if (this._options.canViewSummary) {
+				var summary, summaryContainer = elBySel(this._options.summarySelector, element), summaryContent;
+				if (summaryContainer !== null) {
+					summary = elCreate('p');
+					summary.className = 'likesSummary';
+					
+					summaryContent = elCreate('span');
+					summaryContent.addEventListener('click', this._showSummary.bind(this, element));
+					summary.appendChild(summaryContent);
+					
+					summaryContainer.appendChild(summary);
+					elementData.summary = summaryContent;
+					
+					this._updateSummary(element);
+				}
+			}
+			
+			// cumulative likes
+			var badge, badgeContainer = elBySel(this._options.badgeContainerSelector, element);
+			if (badgeContainer !== null) {
+				badge = elCreate('a');
+				badge.href = '#';
+				badge.className = 'wcfLikeCounter jsTooltip';
+				badge.addEventListener('click', this._showSummary.bind(this, element));
+				
+				badgeContainer.appendChild(badge);
+				elementData.badge = badge;
+				
+				this._updateBadge(element);
+			}
+			
+			var insertPosition, userId = elAttr(element, 'data-user-id');
+			if (this._options.canLikeOwnContent || WCF.User.userID === userId) {
+				insertPosition = elBySel(this._options.buttonBeforeSelector, element);
+				if (insertPosition !== null) {
+					// like button
+					elementData.likeButton = this._createButton(element, insertPosition, true);
+					
+					// dislike button
+					if (this._options.canDislike) {
+						elementData.dislikeButton = this._createButton(element, insertPosition, false);
+					}
+					
+					this._updateActiveState(element);
+				}
+			}
+		},
+		
+		_createButton: function(element, insertBefore, isLike) {
+			var title = Language.get('wcf.like.button.' + (isLike ? 'like' : 'dislike'));
+			
+			var listItem = elCreate('li');
+			listItem.className = 'wcf' + (isLike ? 'Like' : 'Dislike') + 'Button';
+			
+			var button = elCreate('a');
+			button.className = 'button jsTooltip';
+			button.href = '#';
+			button.title = title;
+			button.innerHTML = '<span class="icon icon16 fa-thumbs-o-' + (isLike ? 'up' : 'down') + '" /> <span class="invisible">' + title + '</span>';
+			button.addEventListener('click', this._like.bind(this, element));
+			button.setAttribute('data-type', (isLike ? 'like' : 'dislike'));
+			
+			listItem.appendChild(button);
+			insertBefore.parentNode.insertBefore(listItem, insertBefore);
+			
+			return button;
+		},
+		
+		_showSummary: function(element, event) {
+			event.preventDefault();
+			
+			if (!this._details.has(element)) {
+				// @TODO
+				this._details.set(element, new WCF.User.List('wcf\\data\\like\\LikeAction', Language.get('wcf.like.details'), {
+					data: {
+						containerID: DomUtil.identify(element),
+						objectID: this._containers.get(element).objectId,
+						objectType: this._objectType
+					}
+				}));
+			}
+			
+			this._details.get(element).open();
+		},
+		
+		_updateBadge: function(element) {
+			var data = this._containers.get(element);
+			
+			if (data.likes === 0 && data.dislikes === 0) {
+				elHide(data.badge);
+			}
+			else {
+				elShow(data.badge);
+				
+				// update like counter
+				var cumulativeLikes = data.likes - data.dislikes;
+				var content = '<span class="icon icon16 fa-thumbs-o-' + (cumulativeLikes < 0 ? 'down' : 'up' ) + '"></span><span class="wcfLikeValue">';
+				if (cumulativeLikes > 0) {
+					content += '+' + StringUtil.addThousandsSeparator(cumulativeLikes);
+				}
+				else if (cumulativeLikes < 0) {
+					// U+2212 = minus sign
+					content += '\u2212' + StringUtil.addThousandsSeparator(Math.abs(cumulativeLikes));
+				}
+				else {
+					// U+00B1 = plus-minus sign
+					content += '\u00B1' + '0';
+				}
+				
+				data.badge.innerHTML = content + '</span>';
+				data.badge.setAttribute('data-tooltip', Language.get('wcf.like.tooltip', {
+					dislikes: data.dislikes,
+					likes: data.likes
+				}));
+			}
+		},
+		
+		_updateSummary: function(element) {
+			var data = this._containers.get(element);
+			
+			if (data.likes) {
+				elShow(data.summary.parentNode);
+				
+				var usernames = [];
+				var keys = Object.keys(data.users);
+				for (var i = 0, length = keys.length; i < length; i++) {
+					usernames.push(data.users[keys[i]]);
+				}
+				
+				var others = data.likes - usernames.length;
+				data.summary.innerHTML = Language.get('wcf.like.summary', { users: usernames, others: others });
+			}
+			else {
+				elHide(data.summary.parentNode);
+			}
+		},
+		
+		_updateActiveState: function(element) {
+			var data = this._containers.get(element);
+			
+			if (data.dislikeButton !== null) data.dislikeButton.classList.remove('active');
+			data.likeButton.classList.remove('active');
+			
+			if (data.liked === 1) {
+				data.likeButton.classList.add('active');
+			}
+			else if (data.liked === -1 && data.dislikeButton !== null) {
+				data.dislikeButton.classList.add('active');
+			}
+		},
+		
+		_like: function(element, event) {
+			event.preventDefault();
+			
+			if (_isBusy) {
+				return;
+			}
+			
+			_isBusy = true;
+			
+			Ajax.api(this, {
+				actionName: elAttr(event.currentTarget, 'data-type'),
+				parameters: {
+					data: {
+						containerID: DomUtil.identify(element),
+						objectID: this._containers.get(element).objectId,
+						objectType: this._objectType
+					}
+				}
+			});
+		},
+		
+		_ajaxSuccess: function(data) {
+			var element = elById(data.returnValues.containerID);
+			var elementData = this._containers.get(element);
+			if (elementData === undefined) {
+				return;
+			}
+			
+			elementData.dislikes = ~~data.returnValues.dislikes;
+			elementData.likes = ~~data.returnValues.likes;
+			
+			var users = data.returnValues.users;
+			elementData.users = [];
+			var keys = Object.keys(users);
+			for (var i = 0, length = keys.length; i < length; i++) {
+				elementData.users.push(StringUtil.escapeHTML(users[keys[i]].username));
+			}
+			
+			if (data.isLiked == 1) elementData.liked = 1;
+			else if (data.isDisliked) elementData.liked = -1;
+			else elementData.liked = 0;
+			
+			// update label
+			this._updateBadge(element);
+			
+			// update summary
+			if (this._options.canViewSummary) this._updateSummary(element);
+			
+			// mark button as active
+			this._updateActiveState(element);
+			
+			// invalidate cache for like details
+			this._details['delete'](element);
+			
+			_isBusy = false;
+		},
+		
+		_ajaxSetup: function() {
+			return {
+				data: {
+					className: 'wcf\\data\\like\\LikeAction'
+				}
+			};
+		}
+	};
+	
+	return UiLikeHandler;
+});
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu/Simple.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu/Simple.js
index 50d3952686..ecadeca680 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu/Simple.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu/Simple.js
@@ -107,6 +107,9 @@ define(['Dictionary', 'Dom/Traverse', 'Dom/Util', 'EventHandler'], function(Dict
 				});
 			}
 			
+			// create pointer element
+			nav.appendChild(elCreate('span'));
+			
 			return true;
 		},
 		
@@ -202,6 +205,11 @@ define(['Dictionary', 'Dom/Traverse', 'Dom/Util', 'EventHandler'], function(Dict
 			var oldTab = elBySel('#' + this._container.id + ' > nav > ul > li.active');
 			var oldContent = null;
 			if (oldTab) {
+				if (elAttr(oldTab, 'data-name') === name) {
+					// same tab
+					return;
+				}
+				
 				oldTab.classList.remove('active');
 				oldContent = this._containers.get(elAttr(oldTab, 'data-name'));
 				oldContent.classList.remove('active');
@@ -223,6 +231,13 @@ define(['Dictionary', 'Dom/Traverse', 'Dom/Util', 'EventHandler'], function(Dict
 				newContent.classList.remove('hidden');
 			}
 			
+			// set pointer position
+			var span = DomTraverse.childByTag(tab.parentNode.parentNode, 'SPAN');
+			if (span !== null) {
+				span.style.setProperty('transform', 'translateX(' + tab.offsetLeft + 'px)');
+				span.style.setProperty('width', tab.clientWidth + 'px');
+			}
+			
 			if (!disableEvent) {
 				EventHandler.fire('com.woltlab.wcf.simpleTabMenu_' + this._container.id, 'select', {
 					active: tab,
diff --git a/wcfsetup/install/files/js/wcf.globalHelper.js b/wcfsetup/install/files/js/wcf.globalHelper.js
index 9198429788..2574ca3b47 100644
--- a/wcfsetup/install/files/js/wcf.globalHelper.js
+++ b/wcfsetup/install/files/js/wcf.globalHelper.js
@@ -96,4 +96,22 @@
 	window.objOwns = function(obj, property) {
 		return obj.hasOwnProperty(property);
 	};
+	
+	/**
+	 * Shorthand function to hide an element by setting its 'display' value to 'none'.
+	 * 
+	 * @param	{Element}	element		DOM element
+	 */
+	window.elHide = function(element) {
+		element.style.setProperty('display', 'none');
+	};
+	
+	/**
+	 * Shorthand function to show an element previously hidden by using `elHide()`.
+	 * 
+	 * @param	{Element}	element		DOM element
+	 */
+	window.elShow = function(element) {
+		element.style.removeProperty('display');
+	};
 })(window, document);
diff --git a/wcfsetup/install/files/lib/acp/form/StyleEditForm.class.php b/wcfsetup/install/files/lib/acp/form/StyleEditForm.class.php
index 8b49c403fe..eb80dd2588 100644
--- a/wcfsetup/install/files/lib/acp/form/StyleEditForm.class.php
+++ b/wcfsetup/install/files/lib/acp/form/StyleEditForm.class.php
@@ -64,11 +64,11 @@ class StyleEditForm extends StyleAddForm {
 		
 		if (!$this->style->isTainted) {
 			$tmp = Style::splitLessVariables($this->variables['individualLess']);
-			$this->variables['individualLess'] = $tmp['original'];
+			$this->variables['individualLess'] = $tmp['preset'];
 			$this->variables['individualLessCustom'] = $tmp['custom'];
 			
 			$tmp = Style::splitLessVariables($this->variables['overrideLess']);
-			$this->variables['overrideLess'] = $tmp['original'];
+			$this->variables['overrideLess'] = $tmp['preset'];
 			$this->variables['overrideLessCustom'] = $tmp['custom'];
 		}
 	}
diff --git a/wcfsetup/install/files/lib/page/UserPage.class.php b/wcfsetup/install/files/lib/page/UserPage.class.php
index 42e8cc5e8a..0915ea20de 100644
--- a/wcfsetup/install/files/lib/page/UserPage.class.php
+++ b/wcfsetup/install/files/lib/page/UserPage.class.php
@@ -130,20 +130,20 @@ class UserPage extends AbstractPage {
 		// get followers
 		$this->followerList = new UserFollowerList();
 		$this->followerList->getConditionBuilder()->add('user_follow.followUserID = ?', array($this->userID));
-		$this->followerList->sqlLimit = 10;
+		$this->followerList->sqlLimit = 8;
 		$this->followerList->readObjects();
 		
 		// get following
 		$this->followingList = new UserFollowingList();
 		$this->followingList->getConditionBuilder()->add('user_follow.userID = ?', array($this->userID));
-		$this->followingList->sqlLimit = 10;
+		$this->followingList->sqlLimit = 8;
 		$this->followingList->readObjects();
 		
 		// get visitors
 		if (PROFILE_ENABLE_VISITORS) {
 			$this->visitorList = new UserProfileVisitorList();
 			$this->visitorList->getConditionBuilder()->add('user_profile_visitor.ownerID = ?', array($this->userID));
-			$this->visitorList->sqlLimit = 10;
+			$this->visitorList->sqlLimit = 8;
 			$this->visitorList->readObjects();
 		}
 		
diff --git a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
index 2088b99330..1861769da1 100644
--- a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
+++ b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
@@ -52,7 +52,11 @@ class StyleCompiler extends SingletonFactory {
 	public function compile(Style $style) {
 		// read stylesheets by dependency order
 		$conditions = new PreparedStatementConditionBuilder();
-		$conditions->add("filename REGEXP ?", array('style/([a-zA-Z0-9\_\-\.]+)\.less'));
+		$conditions->add("filename REGEXP ?", ['style/([a-zA-Z0-9\_\-\.]+)\.less']);
+		
+		// TESTING ONLY
+		$conditions->add("packageID <> ?", [1]);
+		// TESTING ONLY
 		
 		$sql = "SELECT		filename, application
 			FROM		wcf".WCF_N."_package_installation_file_log
@@ -60,7 +64,33 @@ class StyleCompiler extends SingletonFactory {
 			ORDER BY	packageID";
 		$statement = WCF::getDB()->prepareStatement($sql);
 		$statement->execute($conditions->getParameters());
-		$files = array();
+		
+		$files = [];
+		
+		// TESTING ONLY
+		if ($handle = opendir(WCF_DIR.'style/')) {
+			while (($file = readdir($handle)) !== false) {
+				if ($file === '.' || $file === '..' || $file === 'bootstrap' || is_file(WCF_DIR.'style/'.$file)) {
+					continue;
+				}
+				
+				$file = WCF_DIR."style/{$file}/";
+				if ($innerHandle = opendir($file)) {
+					while (($innerFile = readdir($innerHandle)) !== false) {
+						if ($innerFile === '.' || $innerFile === '..' || !is_file($file.$innerFile)) {
+							continue;
+						}
+						
+						$files[] = $file.$innerFile;
+					}
+					closedir($innerHandle);
+				}
+			}
+			
+			closedir($handle);
+		}
+		// TESTING ONLY
+		
 		while ($row = $statement->fetchArray()) {
 			$files[] = Application::getDirectory($row['application']).$row['filename'];
 		}
diff --git a/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php b/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
index b03e98c12b..e725d63c65 100644
--- a/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
+++ b/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
@@ -29,6 +29,12 @@ use wcf\util\StringUtil;
 class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin {
 	const SHOW_LINKS = 11;
 	
+	/**
+	 * CSS class name for <nav> element
+	 * @var	string
+	 */
+	protected $cssClassName = 'pageNavigation';
+	
 	/**
 	 * Inserts the page number into the link.
 	 * 
@@ -54,10 +60,10 @@ class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin {
 	protected function makeLink($link, $pageNo, $activePage, $pages) {
 		// first page
 		if ($activePage != $pageNo) {
-			return '<li class="button"><a href="'.$this->insertPageNumber($link, $pageNo).'" title="'.WCF::getLanguage()->getDynamicVariable('wcf.page.pageNo', array('pageNo' => $pageNo)).'">'.StringUtil::formatInteger($pageNo).'</a></li>'."\n";
+			return '<li><a href="'.$this->insertPageNumber($link, $pageNo).'" title="'.WCF::getLanguage()->getDynamicVariable('wcf.page.pageNo', array('pageNo' => $pageNo)).'">'.StringUtil::formatInteger($pageNo).'</a></li>'."\n";
 		}
 		else {
-			return '<li class="button active"><span>'.StringUtil::formatInteger($pageNo).'</span><span class="invisible">'.WCF::getLanguage()->getDynamicVariable('wcf.page.pagePosition', array('pageNo' => $pageNo, 'pages' => $pages)).'</span></li>'."\n";
+			return '<li class="active"><span>'.StringUtil::formatInteger($pageNo).'</span><span class="invisible">'.WCF::getLanguage()->getDynamicVariable('wcf.page.pagePosition', array('pageNo' => $pageNo, 'pages' => $pages)).'</span></li>'."\n";
 		}
 	}
 	
@@ -70,10 +76,10 @@ class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin {
 	 */
 	protected function makePreviousLink($link, $pageNo) {
 		if ($pageNo > 1) {
-			return '<li class="button skip"><a href="'.$this->insertPageNumber($link, $pageNo - 1).'" title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.previous').'" class="jsTooltip"><span class="icon icon16 icon-double-angle-left"></span></a></li>'."\n";
+			return '<li class="skip"><a href="'.$this->insertPageNumber($link, $pageNo - 1).'" title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.previous').'" class="icon icon16 fa-angle-double-left jsTooltip"></a></li>'."\n";
 		}
 		else {
-			return '<li class="skip disabled"><span class="icon icon16 icon-double-angle-left disabled"></span></li>'."\n";
+			return '<li class="skip disabled"><span class="icon icon16 fa-angle-double-left"></span></li>'."\n";
 		}
 	}
 	
@@ -86,10 +92,10 @@ class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin {
 	 */
 	protected function makeNextLink($link, $pageNo, $pages) {
 		if ($pageNo && $pageNo < $pages) {
-			return '<li class="button skip"><a href="'.$this->insertPageNumber($link, $pageNo + 1).'" title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.next').'" class="jsTooltip"><span class="icon icon16 icon-double-angle-right"></span></a></li>'."\n";
+			return '<li class="skip"><a href="'.$this->insertPageNumber($link, $pageNo + 1).'" title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.next').'" class="icon icon16 fa-angle-double-right jsTooltip"></a></li>'."\n";
 		}
 		else {
-			return '<li class="skip disabled"><span class="icon icon16 icon-double-angle-right disabled"></span></li>'."\n";
+			return '<li class="skip disabled"><span class="icon icon16 fa-angle-double-right"></span></li>'."\n";
 		}
 	}
 	
@@ -125,7 +131,7 @@ class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin {
 			}
 			
 			// open div and ul
-			$html .= "<nav class=\"pageNavigation\" data-link=\"".$link."\" data-pages=\"".$tagArgs['pages']."\">\n<ul>\n";
+			$html .= "<nav class=\"".$this->cssClassName."\" data-link=\"".$link."\" data-pages=\"".$tagArgs['pages']."\">\n<ul>\n";
 			
 			// previous page
 			$html .= $this->makePreviousLink($link, $tagArgs['page']);
@@ -176,7 +182,7 @@ class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin {
 					$html .= $this->makeLink($link, 2, $tagArgs['page'], $tagArgs['pages']);
 				}
 				else {
-					$html .= '<li class="button jumpTo"><a title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.jumpTo').'" class="jsTooltip">'.StringUtil::HELLIP.'</a></li>'."\n";
+					$html .= '<li class="jumpTo"><a title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.jumpTo').'" class="jsTooltip">'.StringUtil::HELLIP.'</a></li>'."\n";
 				}
 			}
 			
@@ -191,7 +197,7 @@ class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin {
 					$html .= $this->makeLink($link, $tagArgs['pages'] - 1, $tagArgs['page'], $tagArgs['pages']);
 				}
 				else {
-					$html .= '<li class="button jumpTo"><a title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.jumpTo').'" class="jsTooltip">'.StringUtil::HELLIP.'</a></li>'."\n";
+					$html .= '<li class="jumpTo"><a title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.jumpTo').'" class="jsTooltip">'.StringUtil::HELLIP.'</a></li>'."\n";
 				}
 			}
 			
diff --git a/wcfsetup/install/files/lib/system/template/plugin/SmallpagesFunctionTemplatePlugin.class.php b/wcfsetup/install/files/lib/system/template/plugin/SmallpagesFunctionTemplatePlugin.class.php
index 987222c330..3605c45a96 100644
--- a/wcfsetup/install/files/lib/system/template/plugin/SmallpagesFunctionTemplatePlugin.class.php
+++ b/wcfsetup/install/files/lib/system/template/plugin/SmallpagesFunctionTemplatePlugin.class.php
@@ -27,6 +27,11 @@ class SmallpagesFunctionTemplatePlugin extends PagesFunctionTemplatePlugin {
 	 */
 	const SHOW_LINKS = 7;
 	
+	/**
+	 * @see	\wcf\system\template\plugin\PagesFunctionTemplatePlugin::$cssClassName
+	 */
+	protected $cssClassName = 'pageNavigation small';
+	
 	/**
 	 * @see	\wcf\system\template\plugin\PagesFunctionTemplatePlugin::makePreviousLink()
 	 */
diff --git a/wcfsetup/install/files/style/bbcode/bbcodeCollapsible.less b/wcfsetup/install/files/style/bbcode/bbcodeCollapsible.less
new file mode 100644
index 0000000000..38b9aa4f09
--- /dev/null
+++ b/wcfsetup/install/files/style/bbcode/bbcodeCollapsible.less
@@ -0,0 +1,26 @@
+.collapsibleBbcode {
+	> .toggleButton {
+		background-color: @wcfContainerBackgroundColor;
+		border-top: 1px solid @wcfContainerBorderColor;
+		cursor: pointer;
+		display: block;
+		height: 20px;
+		padding: 4px;
+		text-align: center;
+	}
+	
+	&.collapsed {
+		max-height: 200px;
+		overflow: hidden;
+		position: relative;
+		
+		> .toggleButton {
+			bottom: 0;
+			left: 0;
+			position: absolute;
+			right: 0;
+			
+			.boxShadow(0, -10px, @wcfContainerBackgroundColor, 25px, 5px);
+		}
+	}
+}
diff --git a/wcfsetup/install/files/style/bbcode/code.less b/wcfsetup/install/files/style/bbcode/code.less
new file mode 100644
index 0000000000..7119590857
--- /dev/null
+++ b/wcfsetup/install/files/style/bbcode/code.less
@@ -0,0 +1,103 @@
+.codeBox {
+	background-color: @wcfContentBackgroundColor;
+	border: 1px solid rgb(79, 129, 189);
+	border-width: 1px 0;
+	clear: both;
+	margin: 20px 0;
+	
+	&:first-child {
+		margin-top: 0;
+	}
+	
+	> div {
+		padding: 10px;
+		
+		.boxShadowNative(~"inset 4em 0 0 " @wcfContainerBackgroundColor ~", inset 4.1em 0 0" lighten(@wcfContainerBorderColor, 10%));
+		
+		> div {
+			margin: 0 0 10px 3.4em;
+			
+			> h3 {
+				.wcfFontLarge;
+				
+				/*font-size: @wcfTitleFontSize;
+				font-weight: bold;*/
+				padding-left: @wcfGapSmall;
+				position: relative;
+				
+				> .icon {
+					position: absolute;
+					right: 0;
+					top: 3px;
+				}
+			}
+		}
+		
+		> ol {
+			list-style-type: decimal;
+			margin-left: 3.4em;
+			
+			> li {
+				font-family: Consolas, 'Courier New', monospace;
+				margin: 0;
+				padding-left: @wcfGapSmall;
+				position: relative;
+				white-space: pre-wrap;
+				word-break: break-all;
+				word-wrap: break-word;
+				
+				> .lineAnchor {
+					display: block;
+					height: 1.4em;
+					left: -3.6em;
+					position: absolute;
+					top: 0;
+					width: 3.0em;
+				}
+				
+				&:target {
+					background-color: @wcfHighlightBackgroundColor;
+				}
+			}
+		}
+	}
+}
+
+// rtl fix
+html[dir='rtl'] {
+	.codeBox {
+		> div {
+			.boxShadowNative(~"inset -4em 0 0 " @wcfContainerBackgroundColor ~", inset -4.1em 0 0" lighten(@wcfContainerBorderColor, 10%));
+		}
+	}
+}
+
+@media only screen and (max-width: 800px) {
+	.codeBox {
+		> div {
+			padding: @wcfGapSmall;
+			
+			.boxShadow(0, 0, transparent);
+			
+			> div {
+				margin-left: 0;
+				
+				> h3 {
+					padding-left: 0;
+				}
+			}
+			
+			> ol {
+				list-style-type: none;
+				margin-left: 0;
+				overflow: auto;
+				
+				> li {
+					padding-left: 0;
+					white-space: pre;
+					word-wrap: normal;
+				}
+			}
+		}
+	}
+}
diff --git a/wcfsetup/install/files/style/bbcode/codeInline.less b/wcfsetup/install/files/style/bbcode/codeInline.less
new file mode 100644
index 0000000000..b733d156f1
--- /dev/null
+++ b/wcfsetup/install/files/style/bbcode/codeInline.less
@@ -0,0 +1,5 @@
+kbd {
+	border: 1px solid rgb(238, 238, 238);
+	border-radius: 3px;
+	padding: 3px 5px;
+}
diff --git a/wcfsetup/install/files/style/bbcode/quote.less b/wcfsetup/install/files/style/bbcode/quote.less
new file mode 100644
index 0000000000..3f17b705a2
--- /dev/null
+++ b/wcfsetup/install/files/style/bbcode/quote.less
@@ -0,0 +1,45 @@
+.quoteBox {
+	border-left: 2px solid rgb(79, 129, 189);
+	padding: 10px;
+	margin: 10px 0;
+	
+	&:first-child {
+		margin-top: 0;
+	}
+	
+	.quoteBox {
+		margin-left: 10px;
+		
+		> .quoteBoxHeader > .quoteBoxIcon {
+			display: none;
+		}
+	}
+}
+
+.quoteBoxHeader {
+	align-items: center;
+	display: flex;
+	margin-bottom: 10px;
+}
+
+.quoteBoxIcon {
+	flex: 0 0 auto;
+	min-height: 36px;
+	
+	> a {
+		display: block;
+		font-size: 0;
+		margin-right: 5px;
+	}
+	
+	> .icon {
+		margin-right: 7px;
+		position: relative;
+		top: 10px;
+	}
+}
+
+.quoteBoxTitle {
+	flex: 1 auto;
+	font-size: 1.2rem;
+}
diff --git a/wcfsetup/install/files/style/bootstrap/reset.less b/wcfsetup/install/files/style/bootstrap/reset.less
index 40c071cae4..0602c8903f 100644
--- a/wcfsetup/install/files/style/bootstrap/reset.less
+++ b/wcfsetup/install/files/style/bootstrap/reset.less
@@ -6,33 +6,28 @@
  * modifyed to meet the needs of WoltLab
  */
 
-html, body, div, span, applet, object, iframe,
+html, body, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
+address, big, cite, code, q,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header,  
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
+canvas, embed, 
+figure, figcaption,
+audio, video {
 	margin: 0;
 	padding: 0;
 	border: 0;
-	font-size: 100%;
+	
 }
 
-h1, h2, h3, h4, h5, h6 {
-	font-weight: normal;
+img {
+	border: 0;
 }
 
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, menu, nav, section {
-	display: block;
+h1, h2, h3, h4, h5, h6 {
+	font-weight: normal;
+	font-size: 100%;
 }
 
 ol, ul {
diff --git a/wcfsetup/install/files/style/element/dl.less b/wcfsetup/install/files/style/element/dl.less
new file mode 100644
index 0000000000..1c1d983e18
--- /dev/null
+++ b/wcfsetup/install/files/style/element/dl.less
@@ -0,0 +1,130 @@
+dl {
+	&:not(.plain) {
+		display: flex;
+		justify-content: space-between;
+		
+		&:not(:last-child) {
+			margin-bottom: 10px;
+		}
+		
+		> dt {
+			flex: 0 0 230px;
+			text-align: right;
+		}
+		
+		> dd {
+			flex: 0 0 auto;
+			/* work-around for IE10 which does not support calc() for flex-basis */
+			width: calc(~"100% - 250px");
+		}
+		
+		&.wide {
+			> dt {
+				display: none;
+			}
+			
+			> dd {
+				flex: 0 0 100%;
+			}
+		}
+		
+		& + dl:not(.plain) {
+			padding-top: 10px;
+		}
+	}
+	
+	&.dataList {
+		.clearfix;
+		
+		> dt {
+			clear: right;
+			color: rgba(128, 128, 128, 1);
+			float: left;
+			margin-right: 4px;
+			text-align: left;
+			
+			&:after {
+				content: ":";
+			}
+		}
+		
+		> dd {
+			float: right;
+			text-align: right;
+			
+			&:not(:last-child) {
+				margin-bottom: 3px;
+			}
+		}
+	}
+	
+	&.inlineDataList {
+		font-size: .85rem;
+		
+		> dt {
+			display: inline-block;
+			
+			&:after {
+				content: ":";
+				padding-left: 1px;
+			}
+		}
+		
+		> dd {
+			display: inline-block;
+			
+			&:not(:last-of-type):after {
+				content: ",";
+				padding-left: 1px;
+			}
+		}
+	}
+	
+	&.statsDataList {
+		align-items: center;
+		display: flex;
+		flex-direction: row-reverse;
+		flex-wrap: wrap;
+		
+		> dt {
+			color: @wcfDimmedColor;
+			flex: 0 0 60%;
+			font-size: .85rem;
+			margin-left: 5px;
+			overflow: hidden;
+			text-align: left;
+			white-space: nowrap;
+		}
+		
+		> dd {
+			flex: 0 0 35%;
+			overflow: hidden;
+			text-align: right;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+	
+	&:not(.plain) > dd {
+		&:not(.floated) > label ~ small {
+			margin-left: 20px;
+		}
+		
+		> small:not(.innerError) {
+			color: rgb(128, 128, 128);
+			display: block;
+			margin-top: 5px;
+		}
+	}
+	
+	&.condensed {
+		display: block;
+		
+		> dt,
+		> dd {
+			display: block;
+			margin: 0;
+			width: 100%;
+		}
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/element/inputText.less b/wcfsetup/install/files/style/element/inputText.less
new file mode 100644
index 0000000000..797f4f2cdb
--- /dev/null
+++ b/wcfsetup/install/files/style/element/inputText.less
@@ -0,0 +1,41 @@
+input[type="date"],
+input[type="datetime"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="text"] {
+	background-color: @wcfInputBackgroundColor;
+	border: 1px solid @wcfInputBorderColor;
+	border-radius: 3px;
+	color: @wcfInputColor;
+	padding: 4px;
+	transition: background-color .2s linear, border-color .2s linear;
+	
+	&:hover {
+		background-color: @wcfInputHoverBackgroundColor;
+		border-color: @wcfInputHoverBorderColor;
+	}
+}
+
+input {
+	box-sizing: border-box;
+	
+	&.tiny {
+		width: 80px;
+	}
+	
+	&.short {
+		min-width: 80px;
+		width: 10%;
+	}
+
+	&.medium {
+		min-width: 150px;
+		width: 30%;
+	}
+
+	&.long {
+		min-width: 150px;
+		width: 100%;
+	}
+}
diff --git a/wcfsetup/install/files/style/element/list.less b/wcfsetup/install/files/style/element/list.less
new file mode 100644
index 0000000000..ab23c7c33e
--- /dev/null
+++ b/wcfsetup/install/files/style/element/list.less
@@ -0,0 +1,69 @@
+.inlineList {
+	display: flex;
+	flex-wrap: wrap;
+	
+	> li {
+		flex: 0 auto;
+		
+		&:not(:last-child) {
+			margin-right: 5px;
+		}
+		
+		> a {
+			cursor: pointer;
+			display: flex;
+		}
+	}
+}
+
+.nativeList {
+	margin: 1em 0 1em 40px;
+	
+	li {
+		margin: 7px 0;
+	}
+}
+
+ol.dataList,
+ul.dataList {
+	.inlineList;
+	
+	font-size: .85rem;
+	
+	> li {
+		&:not(:last-child):after {
+			content: ",";
+			padding-left: 1px;
+		}
+	}
+}
+
+.framedIconList {
+	display: flex;
+	flex-wrap: wrap;
+	padding-top: 10px;
+	
+	> li {
+		flex: 0 0 25%;
+		text-align: center;
+		
+		> a {
+			display: block;
+		}
+	}
+	
+	& + .more {
+		float: right;
+		margin-top: 10px;
+	}
+}
+
+.tagList {
+	.inlineList;
+	
+	align-items: baseline;
+}
+
+.smileyList {
+	align-items: center;
+}
diff --git a/wcfsetup/install/files/style/element/select.less b/wcfsetup/install/files/style/element/select.less
new file mode 100644
index 0000000000..a7b1c8e5d0
--- /dev/null
+++ b/wcfsetup/install/files/style/element/select.less
@@ -0,0 +1,14 @@
+select {
+	background-color: @wcfInputBackgroundColor;
+	border: 1px solid @wcfInputBorderColor;
+	border-radius: 3px;
+	color: @wcfInputColor;
+	padding: 2px 5px;
+	position: relative;
+	transition: background-color .2s linear, border-color .2s linear;
+	
+	&:hover {
+		background-color: @wcfInputHoverBackgroundColor;
+		border-color: @wcfInputHoverBorderColor;
+	}
+}
diff --git a/wcfsetup/install/files/style/element/textarea.less b/wcfsetup/install/files/style/element/textarea.less
new file mode 100644
index 0000000000..134228b09e
--- /dev/null
+++ b/wcfsetup/install/files/style/element/textarea.less
@@ -0,0 +1,16 @@
+textarea {
+	background-color: @wcfInputBackgroundColor;
+	border: 1px solid @wcfInputBorderColor;
+	border-radius: 3px;
+	box-sizing: border-box;
+	color: @wcfInputColor;
+	font-family: "Segoe UI";
+	padding: 5px;
+	transition: background-color .2s linear, border-color .2s linear;
+	width: 100%;
+	
+	&:hover {
+		background-color: @wcfInputHoverBackgroundColor;
+		border-color: @wcfInputHoverBorderColor;
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/icon/icon.less b/wcfsetup/install/files/style/icon/icon.less
new file mode 100644
index 0000000000..ba2f2d1982
--- /dev/null
+++ b/wcfsetup/install/files/style/icon/icon.less
@@ -0,0 +1,1690 @@
+/* do NOT reference fonts directly, always make use of 'getFont.php' */
+@font-face {
+	font-family: 'FontAwesome';
+	src: url('../font/getFont.php?type=eot&v=4.3.0');
+	src: url('../font/getFont.php?type=eot&v=4.3.0#iefix') format('embedded-opentype'),
+		url('../font/getFont.php?type=woff&v=4.3.0') format('woff'),
+		url('../font/getFont.php?type=ttf&v=4.3.0') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+}
+
+.icon, .fa {
+	color: @wcfColor;
+	display: inline-block;
+	font-family: FontAwesome;
+	font-weight: normal !important;
+	font-style: normal !important;
+	line-height: 1em;
+	text-align: center;
+	
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+	
+	//.textShadow(@wcfContentBackgroundColor);
+	
+	&.disabled {
+		opacity: .3;
+	}
+	&:hover {
+		text-decoration: none;
+	}
+	
+	/* default icon colors */
+	&.green {
+		color: rgba(0, 153, 0, 1);
+	}
+	
+	&.red {
+		color: rgba(204, 0, 0, 1);
+	}
+	
+	&.black {
+		color: #333;
+	}
+	
+	&.brown {
+		color: #c63;
+	}
+	
+	&.orange {
+		color: #f90;
+	}
+	
+	&.yellow {
+		color: #ff0;
+	}
+	
+	&.blue {
+		color: #369;
+	}
+	
+	&.purple {
+		color: #c0f;
+	}
+	
+	&.pink {
+		color: #f0c;
+	}
+}
+
+// firefox cursor issue
+span.icon:not(.pointer):not(.disabled),
+span.fa:not(.pointer):not(.disabled) {
+	cursor: default;
+}
+
+a > span.icon:not(.pointer),
+a > span.fa:not(.pointer) {
+	cursor: pointer !important;
+}
+
+// icon sizes
+.icon16 {
+	font-size: 14px;
+	height: 16px;
+	width: 16px;
+}
+
+.icon24 {
+	font-size: 18px;
+	height: 24px;
+	width: 24px;
+}
+
+.icon32 {
+	font-size: 28px;
+	height: 32px;
+	width: 32px;
+	vertical-align: -5px;
+}
+
+.icon48 {
+	font-size: 42px;
+	height: 48px;
+	width: 48px;
+}
+
+.icon96 {
+	font-size: 84px;
+	height: 96px;
+	width: 96px;
+}
+
+// spinner animation
+.icon-spinner,
+.fa-spinner {
+	height: auto;
+	
+	-moz-animation: spin 1s infinite steps(8);
+	-o-animation: spin 1s infinite steps(8);
+	-webkit-animation: spin 1s infinite steps(8);
+	animation: spin 1s infinite steps(8);
+}
+@-moz-keyframes spin {
+	0% { -moz-transform: rotate(0deg); }
+	100% { -moz-transform: rotate(359deg); }
+}
+@-webkit-keyframes spin {
+	0% { -webkit-transform: rotate(0deg); }
+	100% { -webkit-transform: rotate(359deg); }
+}
+@-o-keyframes spin {
+	0% { -o-transform: rotate(0deg); }
+	100% { -o-transform: rotate(359deg); }
+}
+@-ms-keyframes spin {
+	0% { -ms-transform: rotate(0deg); }
+	100% { -ms-transform: rotate(359deg); }
+}
+@keyframes spin {
+	0% { transform: rotate(0deg); }
+	100% { transform: rotate(359deg); }
+}
+
+.icon-rotate-90:before, .fa-rotate-90:before {
+	-webkit-transform: rotate(90deg);
+	-moz-transform: rotate(90deg);
+	-ms-transform: rotate(90deg);
+	-o-transform: rotate(90deg);
+	transform: rotate(90deg);
+	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+}
+
+.icon-rotate-180:before, .fa-rotate-180:before {
+	-webkit-transform: rotate(180deg);
+	-moz-transform: rotate(180deg);
+	-ms-transform: rotate(180deg);
+	-o-transform: rotate(180deg);
+	transform: rotate(180deg);
+	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+}
+
+.icon-rotate-270:before, .fa-rotate-270:before {
+	-webkit-transform: rotate(270deg);
+	-moz-transform: rotate(270deg);
+	-ms-transform: rotate(270deg);
+	-o-transform: rotate(270deg);
+	transform: rotate(270deg);
+	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+
+.icon-flip-horizontal:before, .fa-flip-horizontal:before {
+	-webkit-transform: scale(-1, 1);
+	-moz-transform: scale(-1, 1);
+	-ms-transform: scale(-1, 1);
+	-o-transform: scale(-1, 1);
+	transform: scale(-1, 1);
+}
+
+.icon-flip-vertical:before, .fa-flip-vertical:before {
+	-webkit-transform: scale(1, -1);
+	-moz-transform: scale(1, -1);
+	-ms-transform: scale(1, -1);
+	-o-transform: scale(1, -1);
+	transform: scale(1, -1);
+}
+
+// icon variables
+@fa-var-adjust: "\f042";
+@fa-var-adn: "\f170";
+@fa-var-align-center: "\f037";
+@fa-var-align-justify: "\f039";
+@fa-var-align-left: "\f036";
+@fa-var-align-right: "\f038";
+@fa-var-ambulance: "\f0f9";
+@fa-var-anchor: "\f13d";
+@fa-var-android: "\f17b";
+@fa-var-angellist: "\f209";
+@fa-var-angle-double-down: "\f103";
+@fa-var-angle-double-left: "\f100";
+@fa-var-angle-double-right: "\f101";
+@fa-var-angle-double-up: "\f102";
+@fa-var-angle-down: "\f107";
+@fa-var-angle-left: "\f104";
+@fa-var-angle-right: "\f105";
+@fa-var-angle-up: "\f106";
+@fa-var-apple: "\f179";
+@fa-var-archive: "\f187";
+@fa-var-area-chart: "\f1fe";
+@fa-var-arrow-circle-down: "\f0ab";
+@fa-var-arrow-circle-left: "\f0a8";
+@fa-var-arrow-circle-o-down: "\f01a";
+@fa-var-arrow-circle-o-left: "\f190";
+@fa-var-arrow-circle-o-right: "\f18e";
+@fa-var-arrow-circle-o-up: "\f01b";
+@fa-var-arrow-circle-right: "\f0a9";
+@fa-var-arrow-circle-up: "\f0aa";
+@fa-var-arrow-down: "\f063";
+@fa-var-arrow-left: "\f060";
+@fa-var-arrow-right: "\f061";
+@fa-var-arrow-up: "\f062";
+@fa-var-arrows: "\f047";
+@fa-var-arrows-alt: "\f0b2";
+@fa-var-arrows-h: "\f07e";
+@fa-var-arrows-v: "\f07d";
+@fa-var-asterisk: "\f069";
+@fa-var-at: "\f1fa";
+@fa-var-automobile: "\f1b9";
+@fa-var-backward: "\f04a";
+@fa-var-ban: "\f05e";
+@fa-var-bank: "\f19c";
+@fa-var-bar-chart: "\f080";
+@fa-var-bar-chart-o: "\f080";
+@fa-var-barcode: "\f02a";
+@fa-var-bars: "\f0c9";
+@fa-var-bed: "\f236";
+@fa-var-beer: "\f0fc";
+@fa-var-behance: "\f1b4";
+@fa-var-behance-square: "\f1b5";
+@fa-var-bell: "\f0f3";
+@fa-var-bell-o: "\f0a2";
+@fa-var-bell-slash: "\f1f6";
+@fa-var-bell-slash-o: "\f1f7";
+@fa-var-bicycle: "\f206";
+@fa-var-binoculars: "\f1e5";
+@fa-var-birthday-cake: "\f1fd";
+@fa-var-bitbucket: "\f171";
+@fa-var-bitbucket-square: "\f172";
+@fa-var-bitcoin: "\f15a";
+@fa-var-bold: "\f032";
+@fa-var-bolt: "\f0e7";
+@fa-var-bomb: "\f1e2";
+@fa-var-book: "\f02d";
+@fa-var-bookmark: "\f02e";
+@fa-var-bookmark-o: "\f097";
+@fa-var-briefcase: "\f0b1";
+@fa-var-btc: "\f15a";
+@fa-var-bug: "\f188";
+@fa-var-building: "\f1ad";
+@fa-var-building-o: "\f0f7";
+@fa-var-bullhorn: "\f0a1";
+@fa-var-bullseye: "\f140";
+@fa-var-bus: "\f207";
+@fa-var-buysellads: "\f20d";
+@fa-var-cab: "\f1ba";
+@fa-var-calculator: "\f1ec";
+@fa-var-calendar: "\f073";
+@fa-var-calendar-o: "\f133";
+@fa-var-camera: "\f030";
+@fa-var-camera-retro: "\f083";
+@fa-var-car: "\f1b9";
+@fa-var-caret-down: "\f0d7";
+@fa-var-caret-left: "\f0d9";
+@fa-var-caret-right: "\f0da";
+@fa-var-caret-square-o-down: "\f150";
+@fa-var-caret-square-o-left: "\f191";
+@fa-var-caret-square-o-right: "\f152";
+@fa-var-caret-square-o-up: "\f151";
+@fa-var-caret-up: "\f0d8";
+@fa-var-cart-arrow-down: "\f218";
+@fa-var-cart-plus: "\f217";
+@fa-var-cc: "\f20a";
+@fa-var-cc-amex: "\f1f3";
+@fa-var-cc-discover: "\f1f2";
+@fa-var-cc-mastercard: "\f1f1";
+@fa-var-cc-paypal: "\f1f4";
+@fa-var-cc-stripe: "\f1f5";
+@fa-var-cc-visa: "\f1f0";
+@fa-var-certificate: "\f0a3";
+@fa-var-chain: "\f0c1";
+@fa-var-chain-broken: "\f127";
+@fa-var-check: "\f00c";
+@fa-var-check-circle: "\f058";
+@fa-var-check-circle-o: "\f05d";
+@fa-var-check-square: "\f14a";
+@fa-var-check-square-o: "\f046";
+@fa-var-chevron-circle-down: "\f13a";
+@fa-var-chevron-circle-left: "\f137";
+@fa-var-chevron-circle-right: "\f138";
+@fa-var-chevron-circle-up: "\f139";
+@fa-var-chevron-down: "\f078";
+@fa-var-chevron-left: "\f053";
+@fa-var-chevron-right: "\f054";
+@fa-var-chevron-up: "\f077";
+@fa-var-child: "\f1ae";
+@fa-var-circle: "\f111";
+@fa-var-circle-o: "\f10c";
+@fa-var-circle-o-notch: "\f1ce";
+@fa-var-circle-thin: "\f1db";
+@fa-var-clipboard: "\f0ea";
+@fa-var-clock-o: "\f017";
+@fa-var-close: "\f00d";
+@fa-var-cloud: "\f0c2";
+@fa-var-cloud-download: "\f0ed";
+@fa-var-cloud-upload: "\f0ee";
+@fa-var-cny: "\f157";
+@fa-var-code: "\f121";
+@fa-var-code-fork: "\f126";
+@fa-var-codepen: "\f1cb";
+@fa-var-coffee: "\f0f4";
+@fa-var-cog: "\f013";
+@fa-var-cogs: "\f085";
+@fa-var-columns: "\f0db";
+@fa-var-comment: "\f075";
+@fa-var-comment-o: "\f0e5";
+@fa-var-comments: "\f086";
+@fa-var-comments-o: "\f0e6";
+@fa-var-compass: "\f14e";
+@fa-var-compress: "\f066";
+@fa-var-connectdevelop: "\f20e";
+@fa-var-copy: "\f0c5";
+@fa-var-copyright: "\f1f9";
+@fa-var-credit-card: "\f09d";
+@fa-var-crop: "\f125";
+@fa-var-crosshairs: "\f05b";
+@fa-var-css3: "\f13c";
+@fa-var-cube: "\f1b2";
+@fa-var-cubes: "\f1b3";
+@fa-var-cut: "\f0c4";
+@fa-var-cutlery: "\f0f5";
+@fa-var-dashboard: "\f0e4";
+@fa-var-dashcube: "\f210";
+@fa-var-database: "\f1c0";
+@fa-var-dedent: "\f03b";
+@fa-var-delicious: "\f1a5";
+@fa-var-desktop: "\f108";
+@fa-var-deviantart: "\f1bd";
+@fa-var-diamond: "\f219";
+@fa-var-digg: "\f1a6";
+@fa-var-dollar: "\f155";
+@fa-var-dot-circle-o: "\f192";
+@fa-var-download: "\f019";
+@fa-var-dribbble: "\f17d";
+@fa-var-dropbox: "\f16b";
+@fa-var-drupal: "\f1a9";
+@fa-var-edit: "\f044";
+@fa-var-eject: "\f052";
+@fa-var-ellipsis-h: "\f141";
+@fa-var-ellipsis-v: "\f142";
+@fa-var-empire: "\f1d1";
+@fa-var-envelope: "\f0e0";
+@fa-var-envelope-o: "\f003";
+@fa-var-envelope-square: "\f199";
+@fa-var-eraser: "\f12d";
+@fa-var-eur: "\f153";
+@fa-var-euro: "\f153";
+@fa-var-exchange: "\f0ec";
+@fa-var-exclamation: "\f12a";
+@fa-var-exclamation-circle: "\f06a";
+@fa-var-exclamation-triangle: "\f071";
+@fa-var-expand: "\f065";
+@fa-var-external-link: "\f08e";
+@fa-var-external-link-square: "\f14c";
+@fa-var-eye: "\f06e";
+@fa-var-eye-slash: "\f070";
+@fa-var-eyedropper: "\f1fb";
+@fa-var-facebook: "\f09a";
+@fa-var-facebook-f: "\f09a";
+@fa-var-facebook-official: "\f230";
+@fa-var-facebook-square: "\f082";
+@fa-var-fast-backward: "\f049";
+@fa-var-fast-forward: "\f050";
+@fa-var-fax: "\f1ac";
+@fa-var-female: "\f182";
+@fa-var-fighter-jet: "\f0fb";
+@fa-var-file: "\f15b";
+@fa-var-file-archive-o: "\f1c6";
+@fa-var-file-audio-o: "\f1c7";
+@fa-var-file-code-o: "\f1c9";
+@fa-var-file-excel-o: "\f1c3";
+@fa-var-file-image-o: "\f1c5";
+@fa-var-file-movie-o: "\f1c8";
+@fa-var-file-o: "\f016";
+@fa-var-file-pdf-o: "\f1c1";
+@fa-var-file-photo-o: "\f1c5";
+@fa-var-file-picture-o: "\f1c5";
+@fa-var-file-powerpoint-o: "\f1c4";
+@fa-var-file-sound-o: "\f1c7";
+@fa-var-file-text: "\f15c";
+@fa-var-file-text-o: "\f0f6";
+@fa-var-file-video-o: "\f1c8";
+@fa-var-file-word-o: "\f1c2";
+@fa-var-file-zip-o: "\f1c6";
+@fa-var-files-o: "\f0c5";
+@fa-var-film: "\f008";
+@fa-var-filter: "\f0b0";
+@fa-var-fire: "\f06d";
+@fa-var-fire-extinguisher: "\f134";
+@fa-var-flag: "\f024";
+@fa-var-flag-checkered: "\f11e";
+@fa-var-flag-o: "\f11d";
+@fa-var-flash: "\f0e7";
+@fa-var-flask: "\f0c3";
+@fa-var-flickr: "\f16e";
+@fa-var-floppy-o: "\f0c7";
+@fa-var-folder: "\f07b";
+@fa-var-folder-o: "\f114";
+@fa-var-folder-open: "\f07c";
+@fa-var-folder-open-o: "\f115";
+@fa-var-font: "\f031";
+@fa-var-forumbee: "\f211";
+@fa-var-forward: "\f04e";
+@fa-var-foursquare: "\f180";
+@fa-var-frown-o: "\f119";
+@fa-var-futbol-o: "\f1e3";
+@fa-var-gamepad: "\f11b";
+@fa-var-gavel: "\f0e3";
+@fa-var-gbp: "\f154";
+@fa-var-ge: "\f1d1";
+@fa-var-gear: "\f013";
+@fa-var-gears: "\f085";
+@fa-var-genderless: "\f1db";
+@fa-var-gift: "\f06b";
+@fa-var-git: "\f1d3";
+@fa-var-git-square: "\f1d2";
+@fa-var-github: "\f09b";
+@fa-var-github-alt: "\f113";
+@fa-var-github-square: "\f092";
+@fa-var-gittip: "\f184";
+@fa-var-glass: "\f000";
+@fa-var-globe: "\f0ac";
+@fa-var-google: "\f1a0";
+@fa-var-google-plus: "\f0d5";
+@fa-var-google-plus-square: "\f0d4";
+@fa-var-google-wallet: "\f1ee";
+@fa-var-graduation-cap: "\f19d";
+@fa-var-gratipay: "\f184";
+@fa-var-group: "\f0c0";
+@fa-var-h-square: "\f0fd";
+@fa-var-hacker-news: "\f1d4";
+@fa-var-hand-o-down: "\f0a7";
+@fa-var-hand-o-left: "\f0a5";
+@fa-var-hand-o-right: "\f0a4";
+@fa-var-hand-o-up: "\f0a6";
+@fa-var-hdd-o: "\f0a0";
+@fa-var-header: "\f1dc";
+@fa-var-headphones: "\f025";
+@fa-var-heart: "\f004";
+@fa-var-heart-o: "\f08a";
+@fa-var-heartbeat: "\f21e";
+@fa-var-history: "\f1da";
+@fa-var-home: "\f015";
+@fa-var-hospital-o: "\f0f8";
+@fa-var-hotel: "\f236";
+@fa-var-html5: "\f13b";
+@fa-var-ils: "\f20b";
+@fa-var-image: "\f03e";
+@fa-var-inbox: "\f01c";
+@fa-var-indent: "\f03c";
+@fa-var-info: "\f129";
+@fa-var-info-circle: "\f05a";
+@fa-var-inr: "\f156";
+@fa-var-instagram: "\f16d";
+@fa-var-institution: "\f19c";
+@fa-var-ioxhost: "\f208";
+@fa-var-italic: "\f033";
+@fa-var-joomla: "\f1aa";
+@fa-var-jpy: "\f157";
+@fa-var-jsfiddle: "\f1cc";
+@fa-var-key: "\f084";
+@fa-var-keyboard-o: "\f11c";
+@fa-var-krw: "\f159";
+@fa-var-language: "\f1ab";
+@fa-var-laptop: "\f109";
+@fa-var-lastfm: "\f202";
+@fa-var-lastfm-square: "\f203";
+@fa-var-leaf: "\f06c";
+@fa-var-leanpub: "\f212";
+@fa-var-legal: "\f0e3";
+@fa-var-lemon-o: "\f094";
+@fa-var-level-down: "\f149";
+@fa-var-level-up: "\f148";
+@fa-var-life-bouy: "\f1cd";
+@fa-var-life-buoy: "\f1cd";
+@fa-var-life-ring: "\f1cd";
+@fa-var-life-saver: "\f1cd";
+@fa-var-lightbulb-o: "\f0eb";
+@fa-var-line-chart: "\f201";
+@fa-var-link: "\f0c1";
+@fa-var-linkedin: "\f0e1";
+@fa-var-linkedin-square: "\f08c";
+@fa-var-linux: "\f17c";
+@fa-var-list: "\f03a";
+@fa-var-list-alt: "\f022";
+@fa-var-list-ol: "\f0cb";
+@fa-var-list-ul: "\f0ca";
+@fa-var-location-arrow: "\f124";
+@fa-var-lock: "\f023";
+@fa-var-long-arrow-down: "\f175";
+@fa-var-long-arrow-left: "\f177";
+@fa-var-long-arrow-right: "\f178";
+@fa-var-long-arrow-up: "\f176";
+@fa-var-magic: "\f0d0";
+@fa-var-magnet: "\f076";
+@fa-var-mail-forward: "\f064";
+@fa-var-mail-reply: "\f112";
+@fa-var-mail-reply-all: "\f122";
+@fa-var-male: "\f183";
+@fa-var-map-marker: "\f041";
+@fa-var-mars: "\f222";
+@fa-var-mars-double: "\f227";
+@fa-var-mars-stroke: "\f229";
+@fa-var-mars-stroke-h: "\f22b";
+@fa-var-mars-stroke-v: "\f22a";
+@fa-var-maxcdn: "\f136";
+@fa-var-meanpath: "\f20c";
+@fa-var-medium: "\f23a";
+@fa-var-medkit: "\f0fa";
+@fa-var-meh-o: "\f11a";
+@fa-var-mercury: "\f223";
+@fa-var-microphone: "\f130";
+@fa-var-microphone-slash: "\f131";
+@fa-var-minus: "\f068";
+@fa-var-minus-circle: "\f056";
+@fa-var-minus-square: "\f146";
+@fa-var-minus-square-o: "\f147";
+@fa-var-mobile: "\f10b";
+@fa-var-mobile-phone: "\f10b";
+@fa-var-money: "\f0d6";
+@fa-var-moon-o: "\f186";
+@fa-var-mortar-board: "\f19d";
+@fa-var-motorcycle: "\f21c";
+@fa-var-music: "\f001";
+@fa-var-navicon: "\f0c9";
+@fa-var-neuter: "\f22c";
+@fa-var-newspaper-o: "\f1ea";
+@fa-var-openid: "\f19b";
+@fa-var-outdent: "\f03b";
+@fa-var-pagelines: "\f18c";
+@fa-var-paint-brush: "\f1fc";
+@fa-var-paper-plane: "\f1d8";
+@fa-var-paper-plane-o: "\f1d9";
+@fa-var-paperclip: "\f0c6";
+@fa-var-paragraph: "\f1dd";
+@fa-var-paste: "\f0ea";
+@fa-var-pause: "\f04c";
+@fa-var-paw: "\f1b0";
+@fa-var-paypal: "\f1ed";
+@fa-var-pencil: "\f040";
+@fa-var-pencil-square: "\f14b";
+@fa-var-pencil-square-o: "\f044";
+@fa-var-phone: "\f095";
+@fa-var-phone-square: "\f098";
+@fa-var-photo: "\f03e";
+@fa-var-picture-o: "\f03e";
+@fa-var-pie-chart: "\f200";
+@fa-var-pied-piper: "\f1a7";
+@fa-var-pied-piper-alt: "\f1a8";
+@fa-var-pinterest: "\f0d2";
+@fa-var-pinterest-p: "\f231";
+@fa-var-pinterest-square: "\f0d3";
+@fa-var-plane: "\f072";
+@fa-var-play: "\f04b";
+@fa-var-play-circle: "\f144";
+@fa-var-play-circle-o: "\f01d";
+@fa-var-plug: "\f1e6";
+@fa-var-plus: "\f067";
+@fa-var-plus-circle: "\f055";
+@fa-var-plus-square: "\f0fe";
+@fa-var-plus-square-o: "\f196";
+@fa-var-power-off: "\f011";
+@fa-var-print: "\f02f";
+@fa-var-puzzle-piece: "\f12e";
+@fa-var-qq: "\f1d6";
+@fa-var-qrcode: "\f029";
+@fa-var-question: "\f128";
+@fa-var-question-circle: "\f059";
+@fa-var-quote-left: "\f10d";
+@fa-var-quote-right: "\f10e";
+@fa-var-ra: "\f1d0";
+@fa-var-random: "\f074";
+@fa-var-rebel: "\f1d0";
+@fa-var-recycle: "\f1b8";
+@fa-var-reddit: "\f1a1";
+@fa-var-reddit-square: "\f1a2";
+@fa-var-refresh: "\f021";
+@fa-var-remove: "\f00d";
+@fa-var-renren: "\f18b";
+@fa-var-reorder: "\f0c9";
+@fa-var-repeat: "\f01e";
+@fa-var-reply: "\f112";
+@fa-var-reply-all: "\f122";
+@fa-var-retweet: "\f079";
+@fa-var-rmb: "\f157";
+@fa-var-road: "\f018";
+@fa-var-rocket: "\f135";
+@fa-var-rotate-left: "\f0e2";
+@fa-var-rotate-right: "\f01e";
+@fa-var-rouble: "\f158";
+@fa-var-rss: "\f09e";
+@fa-var-rss-square: "\f143";
+@fa-var-rub: "\f158";
+@fa-var-ruble: "\f158";
+@fa-var-rupee: "\f156";
+@fa-var-save: "\f0c7";
+@fa-var-scissors: "\f0c4";
+@fa-var-search: "\f002";
+@fa-var-search-minus: "\f010";
+@fa-var-search-plus: "\f00e";
+@fa-var-sellsy: "\f213";
+@fa-var-send: "\f1d8";
+@fa-var-send-o: "\f1d9";
+@fa-var-server: "\f233";
+@fa-var-share: "\f064";
+@fa-var-share-alt: "\f1e0";
+@fa-var-share-alt-square: "\f1e1";
+@fa-var-share-square: "\f14d";
+@fa-var-share-square-o: "\f045";
+@fa-var-shekel: "\f20b";
+@fa-var-sheqel: "\f20b";
+@fa-var-shield: "\f132";
+@fa-var-ship: "\f21a";
+@fa-var-shirtsinbulk: "\f214";
+@fa-var-shopping-cart: "\f07a";
+@fa-var-sign-in: "\f090";
+@fa-var-sign-out: "\f08b";
+@fa-var-signal: "\f012";
+@fa-var-simplybuilt: "\f215";
+@fa-var-sitemap: "\f0e8";
+@fa-var-skyatlas: "\f216";
+@fa-var-skype: "\f17e";
+@fa-var-slack: "\f198";
+@fa-var-sliders: "\f1de";
+@fa-var-slideshare: "\f1e7";
+@fa-var-smile-o: "\f118";
+@fa-var-soccer-ball-o: "\f1e3";
+@fa-var-sort: "\f0dc";
+@fa-var-sort-alpha-asc: "\f15d";
+@fa-var-sort-alpha-desc: "\f15e";
+@fa-var-sort-amount-asc: "\f160";
+@fa-var-sort-amount-desc: "\f161";
+@fa-var-sort-asc: "\f0de";
+@fa-var-sort-desc: "\f0dd";
+@fa-var-sort-down: "\f0dd";
+@fa-var-sort-numeric-asc: "\f162";
+@fa-var-sort-numeric-desc: "\f163";
+@fa-var-sort-up: "\f0de";
+@fa-var-soundcloud: "\f1be";
+@fa-var-space-shuttle: "\f197";
+@fa-var-spinner: "\f110";
+@fa-var-spoon: "\f1b1";
+@fa-var-spotify: "\f1bc";
+@fa-var-square: "\f0c8";
+@fa-var-square-o: "\f096";
+@fa-var-stack-exchange: "\f18d";
+@fa-var-stack-overflow: "\f16c";
+@fa-var-star: "\f005";
+@fa-var-star-half: "\f089";
+@fa-var-star-half-empty: "\f123";
+@fa-var-star-half-full: "\f123";
+@fa-var-star-half-o: "\f123";
+@fa-var-star-o: "\f006";
+@fa-var-steam: "\f1b6";
+@fa-var-steam-square: "\f1b7";
+@fa-var-step-backward: "\f048";
+@fa-var-step-forward: "\f051";
+@fa-var-stethoscope: "\f0f1";
+@fa-var-stop: "\f04d";
+@fa-var-street-view: "\f21d";
+@fa-var-strikethrough: "\f0cc";
+@fa-var-stumbleupon: "\f1a4";
+@fa-var-stumbleupon-circle: "\f1a3";
+@fa-var-subscript: "\f12c";
+@fa-var-subway: "\f239";
+@fa-var-suitcase: "\f0f2";
+@fa-var-sun-o: "\f185";
+@fa-var-superscript: "\f12b";
+@fa-var-support: "\f1cd";
+@fa-var-table: "\f0ce";
+@fa-var-tablet: "\f10a";
+@fa-var-tachometer: "\f0e4";
+@fa-var-tag: "\f02b";
+@fa-var-tags: "\f02c";
+@fa-var-tasks: "\f0ae";
+@fa-var-taxi: "\f1ba";
+@fa-var-tencent-weibo: "\f1d5";
+@fa-var-terminal: "\f120";
+@fa-var-text-height: "\f034";
+@fa-var-text-width: "\f035";
+@fa-var-th: "\f00a";
+@fa-var-th-large: "\f009";
+@fa-var-th-list: "\f00b";
+@fa-var-thumb-tack: "\f08d";
+@fa-var-thumbs-down: "\f165";
+@fa-var-thumbs-o-down: "\f088";
+@fa-var-thumbs-o-up: "\f087";
+@fa-var-thumbs-up: "\f164";
+@fa-var-ticket: "\f145";
+@fa-var-times: "\f00d";
+@fa-var-times-circle: "\f057";
+@fa-var-times-circle-o: "\f05c";
+@fa-var-tint: "\f043";
+@fa-var-toggle-down: "\f150";
+@fa-var-toggle-left: "\f191";
+@fa-var-toggle-off: "\f204";
+@fa-var-toggle-on: "\f205";
+@fa-var-toggle-right: "\f152";
+@fa-var-toggle-up: "\f151";
+@fa-var-train: "\f238";
+@fa-var-transgender: "\f224";
+@fa-var-transgender-alt: "\f225";
+@fa-var-trash: "\f1f8";
+@fa-var-trash-o: "\f014";
+@fa-var-tree: "\f1bb";
+@fa-var-trello: "\f181";
+@fa-var-trophy: "\f091";
+@fa-var-truck: "\f0d1";
+@fa-var-try: "\f195";
+@fa-var-tty: "\f1e4";
+@fa-var-tumblr: "\f173";
+@fa-var-tumblr-square: "\f174";
+@fa-var-turkish-lira: "\f195";
+@fa-var-twitch: "\f1e8";
+@fa-var-twitter: "\f099";
+@fa-var-twitter-square: "\f081";
+@fa-var-umbrella: "\f0e9";
+@fa-var-underline: "\f0cd";
+@fa-var-undo: "\f0e2";
+@fa-var-university: "\f19c";
+@fa-var-unlink: "\f127";
+@fa-var-unlock: "\f09c";
+@fa-var-unlock-alt: "\f13e";
+@fa-var-unsorted: "\f0dc";
+@fa-var-upload: "\f093";
+@fa-var-usd: "\f155";
+@fa-var-user: "\f007";
+@fa-var-user-md: "\f0f0";
+@fa-var-user-plus: "\f234";
+@fa-var-user-secret: "\f21b";
+@fa-var-user-times: "\f235";
+@fa-var-users: "\f0c0";
+@fa-var-venus: "\f221";
+@fa-var-venus-double: "\f226";
+@fa-var-venus-mars: "\f228";
+@fa-var-viacoin: "\f237";
+@fa-var-video-camera: "\f03d";
+@fa-var-vimeo-square: "\f194";
+@fa-var-vine: "\f1ca";
+@fa-var-vk: "\f189";
+@fa-var-volume-down: "\f027";
+@fa-var-volume-off: "\f026";
+@fa-var-volume-up: "\f028";
+@fa-var-warning: "\f071";
+@fa-var-wechat: "\f1d7";
+@fa-var-weibo: "\f18a";
+@fa-var-weixin: "\f1d7";
+@fa-var-whatsapp: "\f232";
+@fa-var-wheelchair: "\f193";
+@fa-var-wifi: "\f1eb";
+@fa-var-windows: "\f17a";
+@fa-var-won: "\f159";
+@fa-var-wordpress: "\f19a";
+@fa-var-wrench: "\f0ad";
+@fa-var-xing: "\f168";
+@fa-var-xing-square: "\f169";
+@fa-var-yahoo: "\f19e";
+@fa-var-yelp: "\f1e9";
+@fa-var-yen: "\f157";
+@fa-var-youtube: "\f167";
+@fa-var-youtube-play: "\f16a";
+@fa-var-youtube-square: "\f166";
+
+// old aliases
+@glass: @fa-var-glass;
+@music: @fa-var-music;
+@search: @fa-var-search;
+@envelope-alt: @fa-var-envelope-o;
+@heart: @fa-var-heart;
+@star: @fa-var-star;
+@star-empty: @fa-var-star-o;
+@user: @fa-var-user;
+@film: @fa-var-film;
+@th-large: @fa-var-th-large;
+@th: @fa-var-th;
+@th-list: @fa-var-th-list;
+@ok: @fa-var-check;
+@remove: @fa-var-times;
+@zoom-in: @fa-var-search-plus;
+@zoom-out: @fa-var-search-minus;
+@off: @fa-var-power-off;
+@signal: @fa-var-signal;
+@cog: @fa-var-cog;
+@trash: @fa-var-trash-o;
+@home: @fa-var-home;
+@file-alt: @fa-var-file-o;
+@time: @fa-var-clock-o;
+@road: @fa-var-road;
+@download-alt: @fa-var-download;
+@download: @fa-var-arrow-circle-o-down;
+@upload: @fa-var-arrow-circle-o-up;
+@inbox: @fa-var-inbox;
+@play-circle: @fa-var-play-circle-o;
+@repeat: @fa-var-repeat;
+@refresh: @fa-var-refresh;
+@list-alt: @fa-var-list-alt;
+@lock: @fa-var-lock;
+@flag: @fa-var-flag;
+@headphones: @fa-var-headphones;
+@volume-off: @fa-var-volume-off;
+@volume-down: @fa-var-volume-down;
+@volume-up: @fa-var-volume-up;
+@qrcode: @fa-var-qrcode;
+@barcode: @fa-var-barcode;
+@tag: @fa-var-tag;
+@tags: @fa-var-tags;
+@book: @fa-var-book;
+@bookmark: @fa-var-bookmark;
+@print: @fa-var-print;
+@camera: @fa-var-camera;
+@font: @fa-var-font;
+@bold: @fa-var-bold;
+@italic: @fa-var-italic;
+@text-height: @fa-var-text-height;
+@text-width: @fa-var-text-width;
+@align-left: @fa-var-align-left;
+@align-center: @fa-var-align-center;
+@align-right: @fa-var-align-right;
+@align-justify: @fa-var-align-justify;
+@list: @fa-var-list;
+@indent-left: @fa-var-outdent;
+@indent-right: @fa-var-indent;
+@facetime-video: @fa-var-video-camera;
+@picture: @fa-var-picture-o;
+@pencil: @fa-var-pencil;
+@map-marker: @fa-var-map-marker;
+@adjust: @fa-var-adjust;
+@tint: @fa-var-tint;
+@edit: @fa-var-pencil-square-o;
+@share: @fa-var-share-square-o;
+@check: @fa-var-check-square-o;
+@move: @fa-var-arrows;
+@step-backward: @fa-var-step-backward;
+@fast-backward: @fa-var-fast-backward;
+@backward: @fa-var-backward;
+@play: @fa-var-play;
+@pause: @fa-var-pause;
+@stop: @fa-var-stop;
+@forward: @fa-var-forward;
+@fast-forward: @fa-var-fast-forward;
+@step-forward: @fa-var-step-forward;
+@eject: @fa-var-eject;
+@chevron-left: @fa-var-chevron-left;
+@chevron-right: @fa-var-chevron-right;
+@plus-sign: @fa-var-plus-circle;
+@minus-sign: @fa-var-minus-circle;
+@remove-sign: @fa-var-times-circle;
+@ok-sign: @fa-var-check-circle;
+@question-sign: @fa-var-question-circle;
+@info-sign: @fa-var-info-circle;
+@screenshot: @fa-var-crosshairs;
+@remove-circle: @fa-var-times-circle-o;
+@ok-circle: @fa-var-check-circle-o;
+@ban-circle: @fa-var-ban;
+@arrow-left: @fa-var-arrow-left;
+@arrow-right: @fa-var-arrow-right;
+@arrow-up: @fa-var-arrow-up;
+@arrow-down: @fa-var-arrow-down;
+@share-alt: @fa-var-share-alt;
+@resize-full: @fa-var-expand;
+@resize-small: @fa-var-compress;
+@plus: @fa-var-plus;
+@minus: @fa-var-minus;
+@asterisk: @fa-var-asterisk;
+@exclamation-sign: @fa-var-exclamation-circle;
+@gift: @fa-var-gift;
+@leaf: @fa-var-leaf;
+@fire: @fa-var-fire;
+@eye-open: @fa-var-eye;
+@eye-close: @fa-var-eye-slash;
+@warning-sign: @fa-var-exclamation-triangle;
+@plane: @fa-var-plane;
+@calendar: @fa-var-calendar;
+@random: @fa-var-random;
+@comment: @fa-var-comment;
+@magnet: @fa-var-magnet;
+@chevron-up: @fa-var-chevron-up;
+@chevron-down: @fa-var-chevron-down;
+@retweet: @fa-var-retweet;
+@shopping-cart: @fa-var-shopping-cart;
+@folder-close: @fa-var-folder;
+@folder-open: @fa-var-folder-open;
+@resize-vertical: @fa-var-arrows-v;
+@resize-horizontal: @fa-var-arrows-h;
+@bar-chart: @fa-var-bar-chart-o;
+@twitter-sign: @fa-var-twitter-square;
+@facebook-sign: @fa-var-facebook-square;
+@camera-retro: @fa-var-camera-retro;
+@key: @fa-var-key;
+@cogs: @fa-var-cogs;
+@comments: @fa-var-comments;
+@thumbs-up-alt: @fa-var-thumbs-o-up;
+@thumbs-down-alt: @fa-var-thumbs-o-down;
+@star-half: @fa-var-star-half;
+@heart-empty: @fa-var-heart-o;
+@signout: @fa-var-sign-out;
+@linkedin-sign: @fa-var-linkedin-square;
+@pushpin: @fa-var-thumb-tack;
+@external-link: @fa-var-external-link;
+@signin: @fa-var-sign-in;
+@trophy: @fa-var-trophy;
+@github-sign: @fa-var-github-square;
+@upload-alt: @fa-var-upload;
+@lemon: @fa-var-lemon-o;
+@phone: @fa-var-phone;
+@check-empty: @fa-var-square-o;
+@bookmark-empty: @fa-var-bookmark-o;
+@phone-sign: @fa-var-phone-square;
+@twitter: @fa-var-twitter;
+@facebook: @fa-var-facebook;
+@github: @fa-var-github;
+@unlock: @fa-var-unlock;
+@credit-card: @fa-var-credit-card;
+@rss: @fa-var-rss;
+@hdd: @fa-var-hdd-o;
+@bullhorn: @fa-var-bullhorn;
+@bell: @fa-var-bell-o;
+@certificate: @fa-var-certificate;
+@hand-right: @fa-var-hand-o-right;
+@hand-left: @fa-var-hand-o-left;
+@hand-up: @fa-var-hand-o-up;
+@hand-down: @fa-var-hand-o-down;
+@circle-arrow-left: @fa-var-arrow-circle-left;
+@circle-arrow-right: @fa-var-arrow-circle-right;
+@circle-arrow-up: @fa-var-arrow-circle-up;
+@circle-arrow-down: @fa-var-arrow-circle-down;
+@globe: @fa-var-globe;
+@wrench: @fa-var-wrench;
+@tasks: @fa-var-tasks;
+@filter: @fa-var-filter;
+@briefcase: @fa-var-briefcase;
+@fullscreen: @fa-var-arrows-alt;
+@group: @fa-var-users;
+@link: @fa-var-link;
+@cloud: @fa-var-cloud;
+@beaker: @fa-var-flask;
+@cut: @fa-var-scissors;
+@copy: @fa-var-files-o;
+@paper-clip: @fa-var-paperclip;
+@save: @fa-var-floppy-o;
+@sign-blank: @fa-var-square;
+@reorder: @fa-var-bars;
+@list-ul: @fa-var-list-ul;
+@list-ol: @fa-var-list-ol;
+@strikethrough: @fa-var-strikethrough;
+@underline: @fa-var-underline;
+@table: @fa-var-table;
+@magic: @fa-var-magic;
+@truck: @fa-var-truck;
+@pinterest: @fa-var-pinterest;
+@pinterest-sign: @fa-var-pinterest-square;
+@google-plus-sign: @fa-var-google-plus-square;
+@google-plus: @fa-var-google-plus;
+@money: @fa-var-money;
+@caret-down: @fa-var-caret-down;
+@caret-up: @fa-var-caret-up;
+@caret-left: @fa-var-caret-left;
+@caret-right: @fa-var-caret-right;
+@columns: @fa-var-columns;
+@sort: @fa-var-sort;
+@sort-down: @fa-var-sort-desc;
+@sort-up: @fa-var-sort-asc;
+@envelope: @fa-var-envelope;
+@linkedin: @fa-var-linkedin;
+@undo: @fa-var-undo;
+@legal: @fa-var-gavel;
+@dashboard: @fa-var-tachometer;
+@comment-alt: @fa-var-comment-o;
+@comments-alt: @fa-var-comments-o;
+@bolt: @fa-var-bolt;
+@sitemap: @fa-var-sitemap;
+@umbrella: @fa-var-umbrella;
+@paste: @fa-var-clipboard;
+@lightbulb: @fa-var-lightbulb-o;
+@exchange: @fa-var-exchange;
+@cloud-download: @fa-var-cloud-download;
+@cloud-upload: @fa-var-cloud-upload;
+@user-md: @fa-var-user-md;
+@stethoscope: @fa-var-stethoscope;
+@suitcase: @fa-var-suitcase;
+@bell-alt: @fa-var-bell;
+@coffee: @fa-var-coffee;
+@food: @fa-var-cutlery;
+@file-text-alt: @fa-var-file-text-o;
+@building: @fa-var-building-o;
+@hospital: @fa-var-hospital-o;
+@ambulance: @fa-var-ambulance;
+@medkit: @fa-var-medkit;
+@fighter-jet: @fa-var-fighter-jet;
+@beer: @fa-var-beer;
+@h-sign: @fa-var-h-square;
+@plus-sign-alt: @fa-var-plus-square;
+@double-angle-left: @fa-var-angle-double-left;
+@double-angle-right: @fa-var-angle-double-right;
+@double-angle-up: @fa-var-angle-double-up;
+@double-angle-down: @fa-var-angle-double-down;
+@angle-left: @fa-var-angle-left;
+@angle-right: @fa-var-angle-right;
+@angle-up: @fa-var-angle-up;
+@angle-down: @fa-var-angle-down;
+@desktop: @fa-var-desktop;
+@laptop: @fa-var-laptop;
+@tablet: @fa-var-tablet;
+@mobile-phone: @fa-var-mobile;
+@circle-blank: @fa-var-circle-o;
+@quote-left: @fa-var-quote-left;
+@quote-right: @fa-var-quote-right;
+@spinner: @fa-var-spinner;
+@circle: @fa-var-circle;
+@reply: @fa-var-reply;
+@github-alt: @fa-var-github-alt;
+@folder-close-alt: @fa-var-folder-o;
+@folder-open-alt: @fa-var-folder-open-o;
+@expand-alt: @fa-var-plus-square-o;
+@collapse-alt: @fa-var-minus-square-o;
+@smile: @fa-var-smile-o;
+@frown: @fa-var-frown-o;
+@meh: @fa-var-meh-o;
+@gamepad: @fa-var-gamepad;
+@keyboard: @fa-var-keyboard-o;
+@flag-alt: @fa-var-flag-o;
+@flag-checkered: @fa-var-flag-checkered;
+@terminal: @fa-var-terminal;
+@code: @fa-var-code;
+@reply-all: @fa-var-reply-all;
+@mail-reply-all: @fa-var-reply-all;
+@star-half-empty: @fa-var-star-half-o;
+@location-arrow: @fa-var-location-arrow;
+@crop: @fa-var-crop;
+@code-fork: @fa-var-code-fork;
+@unlink: @fa-var-chain-broken;
+@question: @fa-var-question;
+@info: @fa-var-info;
+@exclamation: @fa-var-exclamation;
+@superscript: @fa-var-superscript;
+@subscript: @fa-var-subscript;
+@eraser: @fa-var-eraser;
+@puzzle-piece: @fa-var-puzzle-piece;
+@microphone: @fa-var-microphone;
+@microphone-off: @fa-var-microphone-slash;
+@shield: @fa-var-shield;
+@calendar-empty: @fa-var-calendar-o;
+@fire-extinguisher: @fa-var-fire-extinguisher;
+@rocket: @fa-var-rocket;
+@maxcdn: @fa-var-maxcdn;
+@chevron-sign-left: @fa-var-chevron-left;
+@chevron-sign-right: @fa-var-chevron-right;
+@chevron-sign-up: @fa-var-chevron-up;
+@chevron-sign-down: @fa-var-chevron-down;
+@html5: @fa-var-html5;
+@css3: @fa-var-css3;
+@anchor: @fa-var-anchor;
+@unlock-alt: @fa-var-unlock-alt;
+@bullseye: @fa-var-bullseye;
+@ellipsis-horizontal: @fa-var-ellipsis-h;
+@ellipsis-vertical: @fa-var-ellipsis-v;
+@rss-sign: @fa-var-rss-square;
+@play-sign: @fa-var-play-circle;
+@ticket: @fa-var-ticket;
+@minus-sign-alt: @fa-var-minus-square;
+@check-minus: @fa-var-minus-square-o;
+@level-up: @fa-var-level-up;
+@level-down: @fa-var-level-down;
+@check-sign: @fa-var-check-square;
+@edit-sign: @fa-var-pencil-square;
+@external-link-sign: @fa-var-external-link-square;
+@share-sign: @fa-var-share-square;
+@compass: @fa-var-compass;
+@collapse: @fa-var-caret-square-o-down;
+@collapse-top: @fa-var-caret-square-o-up;
+@expand: @fa-var-caret-square-o-right;
+@eur: @fa-var-eur;
+@gbp: @fa-var-gbp;
+@usd: @fa-var-usd;
+@inr: @fa-var-inr;
+@jpy: @fa-var-jpy;
+@cny: @fa-var-rub;
+@krw: @fa-var-krw;
+@btc: @fa-var-btc;
+@file: @fa-var-file;
+@file-text: @fa-var-file-text;
+@sort-by-alphabet: @fa-var-sort-alpha-asc;
+@sort-by-alphabet-alt: @fa-var-sort-alpha-desc;
+@sort-by-attributes: @fa-var-sort-amount-asc;
+@sort-by-attributes-alt: @fa-var-sort-amount-desc;
+@sort-by-order: @fa-var-sort-numeric-asc;
+@sort-by-order-alt: @fa-var-sort-numeric-desc;
+@thumbs-up: @fa-var-thumbs-up;
+@thumbs-down: @fa-var-thumbs-down;
+@youtube-sign: @fa-var-youtube-square;
+@youtube: @fa-var-youtube;
+@xing: @fa-var-xing;
+@xing-sign: @fa-var-xing-square;
+@youtube-play: @fa-var-youtube-play;
+@dropbox: @fa-var-dropbox;
+@stackexchange: @fa-var-stack-overflow;
+@instagram: @fa-var-instagram;
+@flickr: @fa-var-flickr;
+@adn: @fa-var-adn;
+@bitbucket: @fa-var-bitbucket;
+@bitbucket-sign: @fa-var-bitbucket-square;
+@tumblr: @fa-var-tumblr;
+@tumblr-sign: @fa-var-tumblr-square;
+@long-arrow-down: @fa-var-long-arrow-down;
+@long-arrow-up: @fa-var-long-arrow-up;
+@long-arrow-left: @fa-var-long-arrow-left;
+@long-arrow-right: @fa-var-long-arrow-right;
+@apple: @fa-var-apple;
+@windows: @fa-var-windows;
+@android: @fa-var-android;
+@linux: @fa-var-linux;
+@dribbble: @fa-var-dribbble;
+@skype: @fa-var-skype;
+@foursquare: @fa-var-foursquare;
+@trello: @fa-var-trello;
+@female: @fa-var-female;
+@male: @fa-var-male;
+@gittip: @fa-var-gittip;
+@sun: @fa-var-sun-o;
+@moon: @fa-var-moon-o;
+@archive: @fa-var-archive;
+@bug: @fa-var-bug;
+@vk: @fa-var-vk;
+@weibo: @fa-var-weibo;
+@renren: @fa-var-renren;
+// /old aliases
+
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+   readers do not read off random characters that represent icons */
+.icon-glass:before, .fa-glass:before { content: @glass; }
+.icon-music:before, .fa-music:before { content: @music; }
+.icon-search:before, .fa-search:before { content: @search; }
+.icon-envelope-alt:before, .fa-envelope-o:before { content: @envelope-alt; }
+.icon-heart:before, .fa-heart:before { content: @heart; }
+.icon-star:before, .fa-star:before { content: @star; }
+.icon-star-empty:before, .fa-star-o:before { content: @star-empty; }
+.icon-user:before, .fa-user:before { content: @user; }
+.icon-film:before, .fa-film:before { content: @film; }
+.icon-th-large:before, .fa-th-large:before { content: @th-large; }
+.icon-th:before, .fa-th:before { content: @th; }
+.icon-th-list:before, .fa-th-list:before { content: @th-list; }
+.icon-ok:before, .fa-check:before { content: @ok; }
+.icon-remove:before, .fa-times:before { content: @remove; }
+.icon-zoom-in:before, .fa-search-plus:before { content: @zoom-in; }
+.icon-zoom-out:before, .fa-search-minus:before { content: @zoom-out; }
+.icon-power-off:before, .fa-power-off:before,
+.icon-off:before, .fa-power-off:before { content: @off; }
+.icon-signal:before, .fa-signal:before { content: @signal; }
+.icon-gear:before, .fa-gear:before,
+.icon-cog:before, .fa-cog:before { content: @cog; }
+.icon-trash:before, .fa-trash-o:before { content: @trash; }
+.icon-home:before, .fa-home:before { content: @home; }
+.icon-file-alt:before, .fa-file-o:before { content: @file-alt; }
+.icon-time:before, .fa-clock-o:before { content: @time; }
+.icon-road:before, .fa-road:before { content: @road; }
+.icon-download-alt:before, .fa-download:before { content: @download-alt; }
+.icon-download:before, .fa-arrow-circle-o-down:before { content: @download; }
+.icon-upload:before, .fa-arrow-circle-o-up:before { content: @upload; }
+.icon-inbox:before, .fa-inbox:before { content: @inbox; }
+.icon-play-circle:before, .fa-play-circle-o:before { content: @play-circle; }
+.icon-rotate-right:before, .fa-rotate-right:before,
+.icon-repeat:before, .fa-repeat:before { content: @repeat; }
+.icon-refresh:before, .fa-refresh:before { content: @refresh; }
+.icon-list-alt:before, .fa-list-alt:before { content: @list-alt; }
+.icon-lock:before, .fa-lock:before { content: @lock; }
+.icon-flag:before, .fa-flag:before { content: @flag; }
+.icon-headphones:before, .fa-headphones:before { content: @headphones; }
+.icon-volume-off:before, .fa-volume-off:before { content: @volume-off; }
+.icon-volume-down:before, .fa-volume-down:before { content: @volume-down; }
+.icon-volume-up:before, .fa-volume-up:before { content: @volume-up; }
+.icon-qrcode:before, .fa-qrcode:before { content: @qrcode; }
+.icon-barcode:before, .fa-barcode:before { content: @barcode; }
+.icon-tag:before, .fa-tag:before { content: @tag; }
+.icon-tags:before, .fa-tags:before { content: @tags; }
+.icon-book:before, .fa-book:before { content: @book; }
+.icon-bookmark:before, .fa-bookmark:before { content: @bookmark; }
+.icon-print:before, .fa-print:before { content: @print; }
+.icon-camera:before, .fa-camera:before { content: @camera; }
+.icon-font:before, .fa-font:before { content: @font; }
+.icon-bold:before, .fa-bold:before { content: @bold; }
+.icon-italic:before, .fa-italic:before { content: @italic; }
+.icon-text-height:before, .fa-text-height:before { content: @text-height; }
+.icon-text-width:before, .fa-text-width:before { content: @text-width; }
+.icon-align-left:before, .fa-align-left:before { content: @align-left; }
+.icon-align-center:before, .fa-align-center:before { content: @align-center; }
+.icon-align-right:before, .fa-align-right:before { content: @align-right; }
+.icon-align-justify:before, .fa-align-justify:before { content: @align-justify; }
+.icon-list:before, .fa-list:before { content: @list; }
+.icon-indent-left:before, .fa-outdent:before { content: @indent-left; }
+.icon-indent-right:before, .fa-indent:before { content: @indent-right; }
+.icon-facetime-video:before, .fa-video-camera:before { content: @facetime-video; }
+.icon-picture:before, .fa-picture-o:before { content: @picture; }
+.icon-pencil:before, .fa-pencil:before { content: @pencil; }
+.icon-map-marker:before, .fa-map-marker:before { content: @map-marker; }
+.icon-adjust:before, .fa-adjust:before { content: @adjust; }
+.icon-tint:before, .fa-tint:before { content: @tint; }
+.icon-edit:before, .fa-pencil-square-o:before { content: @edit; }
+.icon-share:before, .fa-share-square-o:before { content: @share; }
+.icon-check:before, .fa-check-square-o:before { content: @check; }
+.icon-move:before, .fa-arrows:before { content: @move; }
+.icon-step-backward:before, .fa-step-backward:before { content: @step-backward; }
+.icon-fast-backward:before, .fa-fast-backward:before { content: @fast-backward; }
+.icon-backward:before, .fa-backward:before { content: @backward; }
+.icon-play:before, .fa-play:before { content: @play; }
+.icon-pause:before, .fa-pause:before { content: @pause; }
+.icon-stop:before, .fa-stop:before { content: @stop; }
+.icon-forward:before, .fa-forward:before { content: @forward; }
+.icon-fast-forward:before, .fa-fast-forward:before { content: @fast-forward; }
+.icon-step-forward:before, .fa-step-forward:before { content: @step-forward; }
+.icon-eject:before, .fa-eject:before { content: @eject; }
+.icon-chevron-left:before, .fa-chevron-left:before { content: @chevron-left; }
+.icon-chevron-right:before, .fa-chevron-right:before { content: @chevron-right; }
+.icon-plus-sign:before, .fa-plus-circle:before { content: @plus-sign; }
+.icon-minus-sign:before, .fa-minus-circle:before { content: @minus-sign; }
+.icon-remove-sign:before, .fa-times-circle:before { content: @remove-sign; }
+.icon-ok-sign:before, .fa-check-circle:before { content: @ok-sign; }
+.icon-question-sign:before, .fa-question-circle:before { content: @question-sign; }
+.icon-info-sign:before, .fa-info-circle:before { content: @info-sign; }
+.icon-screenshot:before, .fa-crosshairs:before { content: @screenshot; }
+.icon-remove-circle:before, .fa-times-circle-o:before { content: @remove-circle; }
+.icon-ok-circle:before, .fa-check-circle-o:before { content: @ok-circle; }
+.icon-ban-circle:before, .fa-ban:before { content: @ban-circle; }
+.icon-arrow-left:before, .fa-arrow-left:before { content: @arrow-left; }
+.icon-arrow-right:before, .fa-arrow-right:before { content: @arrow-right; }
+.icon-arrow-up:before, .fa-arrow-up:before { content: @arrow-up; }
+.icon-arrow-down:before, .fa-arrow-down:before { content: @arrow-down; }
+.icon-mail-forward:before, .fa-mail-forward:before,
+.icon-share-alt:before, .fa-share:before { content: @share-alt; }
+.icon-resize-full:before, .fa-expand:before { content: @resize-full; }
+.icon-resize-small:before, .fa-compress:before { content: @resize-small; }
+.icon-plus:before, .fa-plus:before { content: @plus; }
+.icon-minus:before, .fa-minus:before { content: @minus; }
+.icon-asterisk:before, .fa-asterisk:before { content: @asterisk; }
+.icon-exclamation-sign:before, .fa-exclamation-circle:before { content: @exclamation-sign; }
+.icon-gift:before, .fa-gift:before { content: @gift; }
+.icon-leaf:before, .fa-leaf:before { content: @leaf; }
+.icon-fire:before, .fa-fire:before { content: @fire; }
+.icon-eye-open:before, .fa-eye:before { content: @eye-open; }
+.icon-eye-close:before, .fa-eye-slash:before { content: @eye-close; }
+.icon-warning-sign:before, .fa-exclamation-triangle:before { content: @warning-sign; }
+.icon-plane:before, .fa-plane:before { content: @plane; }
+.icon-calendar:before, .fa-calendar:before { content: @calendar; }
+.icon-random:before, .fa-random:before { content: @random; }
+.icon-comment:before, .fa-comment:before { content: @comment; }
+.icon-magnet:before, .fa-magnet:before { content: @magnet; }
+.icon-chevron-up:before, .fa-chevron-up:before { content: @chevron-up; }
+.icon-chevron-down:before, .fa-chevron-down:before { content: @chevron-down; }
+.icon-retweet:before, .fa-retweet:before { content: @retweet; }
+.icon-shopping-cart:before, .fa-shopping-cart:before { content: @shopping-cart; }
+.icon-folder-close:before, .fa-folder:before { content: @folder-close; }
+.icon-folder-open:before, .fa-folder-open:before { content: @folder-open; }
+.icon-resize-vertical:before, .fa-arrows-v:before { content: @resize-vertical; }
+.icon-resize-horizontal:before, .fa-arrows-h:before { content: @resize-horizontal; }
+.icon-bar-chart:before, .fa-bar-chart:before, .fa-bar-chart-o:before { content: @bar-chart; }
+.icon-twitter-sign:before, .fa-twitter-square:before { content: @twitter-sign; }
+.icon-facebook-sign:before, .fa-facebook-square:before { content: @facebook-sign; }
+.icon-camera-retro:before, .fa-camera-retro:before { content: @camera-retro; }
+.icon-key:before, .fa-key:before { content: @key; }
+.icon-gears:before, .fa-gears:before,
+.icon-cogs:before, .fa-cogs:before { content: @cogs; }
+.icon-comments:before, .fa-comments:before { content: @comments; }
+.icon-thumbs-up-alt:before, .fa-thumbs-o-up:before { content: @thumbs-up-alt; }
+.icon-thumbs-down-alt:before, .fa-thumbs-o-down:before { content: @thumbs-down-alt; }
+.icon-star-half:before, .fa-star-half:before { content: @star-half; }
+.icon-heart-empty:before, .fa-heart-o:before { content: @heart-empty; }
+.icon-signout:before, .fa-sign-out:before { content: @signout; }
+.icon-linkedin-sign:before, .fa-linkedin-square:before { content: @linkedin-sign; }
+.icon-pushpin:before, .fa-thumb-tack:before { content: @pushpin; }
+.icon-external-link:before, .fa-external-link:before { content: @external-link; }
+.icon-signin:before, .fa-sign-in:before { content: @signin; }
+.icon-trophy:before, .fa-trophy:before { content: @trophy; }
+.icon-github-sign:before, .fa-github-square:before { content: @github-sign; }
+.icon-upload-alt:before, .fa-upload:before { content: @upload-alt; }
+.icon-lemon:before, .fa-lemon-o:before { content: @lemon; }
+.icon-phone:before, .fa-phone:before { content: @phone; }
+.icon-unchecked:before, .fa-unchecked:before, .icon-check-empty:before { content: @check-empty; }
+.icon-bookmark-empty:before, .fa-bookmark-o:before { content: @bookmark-empty; }
+.icon-phone-sign:before, .fa-phone-square:before { content: @phone-sign; }
+.icon-twitter:before, .fa-twitter:before { content: @twitter; }
+.icon-facebook:before, .fa-facebook-f:before, .fa-facebook:before { content: @facebook; }
+.icon-github:before, .fa-github:before { content: @github; }
+.icon-unlock:before, .fa-unlock:before { content: @unlock; }
+.icon-credit-card:before, .fa-credit-card:before { content: @credit-card; }
+.icon-rss:before, .fa-rss:before { content: @rss; }
+.icon-hdd:before, .fa-hdd-o:before { content: @hdd; }
+.icon-bullhorn:before, .fa-bullhorn:before { content: @bullhorn; }
+.icon-bell:before, .fa-bell-o:before { content: @bell; }
+.icon-certificate:before, .fa-certificate:before { content: @certificate; }
+.icon-hand-right:before, .fa-hand-o-right:before { content: @hand-right; }
+.icon-hand-left:before, .fa-hand-o-left:before { content: @hand-left; }
+.icon-hand-up:before, .fa-hand-o-up:before { content: @hand-up; }
+.icon-hand-down:before, .fa-hand-o-down:before { content: @hand-down; }
+.icon-circle-arrow-left:before, .fa-arrow-circle-left:before { content: @circle-arrow-left; }
+.icon-circle-arrow-right:before, .fa-arrow-circle-right:before { content: @circle-arrow-right; }
+.icon-circle-arrow-up:before, .fa-arrow-circle-up:before { content: @circle-arrow-up; }
+.icon-circle-arrow-down:before, .fa-arrow-circle-down:before { content: @circle-arrow-down; }
+.icon-globe:before, .fa-globe:before { content: @globe; }
+.icon-wrench:before, .fa-wrench:before { content: @wrench; }
+.icon-tasks:before, .fa-tasks:before { content: @tasks; }
+.icon-filter:before, .fa-filter:before { content: @filter; }
+.icon-briefcase:before, .fa-briefcase:before { content: @briefcase; }
+.icon-fullscreen:before, .fa-arrows-alt:before { content: @fullscreen; }
+.icon-group:before, .fa-users:before { content: @group; }
+.icon-link:before, .fa-link:before { content: @link; }
+.icon-cloud:before, .fa-cloud:before { content: @cloud; }
+.icon-beaker:before, .fa-flask:before { content: @beaker; }
+.icon-cut:before, .fa-scissors:before { content: @cut; }
+.icon-copy:before, .fa-files-o:before { content: @copy; }
+.icon-paperclip:before, .fa-paperclip:before,
+.icon-paper-clip:before, .fa-paperclip:before { content: @paper-clip; }
+.icon-save:before, .fa-floppy-o:before { content: @save; }
+.icon-sign-blank:before, .fa-square:before { content: @sign-blank; }
+.icon-reorder:before, .fa-bars:before { content: @reorder; }
+.icon-list-ul:before, .fa-list-ul:before { content: @list-ul; }
+.icon-list-ol:before, .fa-list-ol:before { content: @list-ol; }
+.icon-strikethrough:before, .fa-strikethrough:before { content: @strikethrough; }
+.icon-underline:before, .fa-underline:before { content: @underline; }
+.icon-table:before, .fa-table:before { content: @table; }
+.icon-magic:before, .fa-magic:before { content: @magic; }
+.icon-truck:before, .fa-truck:before { content: @truck; }
+.icon-pinterest:before, .fa-pinterest:before { content: @pinterest; }
+.icon-pinterest-sign:before, .fa-pinterest-square:before { content: @pinterest-sign; }
+.icon-google-plus-sign:before, .fa-google-plus-square:before { content: @google-plus-sign; }
+.icon-google-plus:before, .fa-google-plus:before { content: @google-plus; }
+.icon-money:before, .fa-money:before { content: @money; }
+.icon-caret-down:before, .fa-caret-down:before { content: @caret-down; }
+.icon-caret-up:before, .fa-caret-up:before { content: @caret-up; }
+.icon-caret-left:before, .fa-caret-left:before { content: @caret-left; }
+.icon-caret-right:before, .fa-caret-right:before { content: @caret-right; }
+.icon-columns:before, .fa-columns:before { content: @columns; }
+.icon-sort:before, .fa-sort:before { content: @sort; }
+.icon-sort-down:before, .fa-sort-asc:before { content: @sort-down; }
+.icon-sort-up:before, .fa-sort-desc:before { content: @sort-up; }
+.icon-envelope:before, .fa-envelope:before { content: @envelope; }
+.icon-linkedin:before, .fa-linkedin:before { content: @linkedin; }
+.icon-rotate-left:before, .fa-rotate-left:before,
+.icon-undo:before, .fa-undo:before { content: @undo; }
+.icon-legal:before, .fa-gavel:before { content: @legal; }
+.icon-dashboard:before, .fa-tachometer:before { content: @dashboard; }
+.icon-comment-alt:before, .fa-comment-o:before { content: @comment-alt; }
+.icon-comments-alt:before, .fa-comments-o:before { content: @comments-alt; }
+.icon-bolt:before, .fa-bolt:before { content: @bolt; }
+.icon-sitemap:before, .fa-sitemap:before { content: @sitemap; }
+.icon-umbrella:before, .fa-umbrella:before { content: @umbrella; }
+.icon-paste:before, .fa-clipboard:before { content: @paste; }
+.icon-lightbulb:before, .fa-lightbulb-o:before { content: @lightbulb; }
+.icon-exchange:before, .fa-exchange:before { content: @exchange; }
+.icon-cloud-download:before, .fa-cloud-download:before { content: @cloud-download; }
+.icon-cloud-upload:before, .fa-cloud-upload:before { content: @cloud-upload; }
+.icon-user-md:before, .fa-user-md:before { content: @user-md; }
+.icon-stethoscope:before, .fa-stethoscope:before { content: @stethoscope; }
+.icon-suitcase:before, .fa-suitcase:before { content: @suitcase; }
+.icon-bell-alt:before, .fa-bell:before { content: @bell-alt; }
+.icon-coffee:before, .fa-coffee:before { content: @coffee; }
+.icon-food:before, .fa-cutlery:before { content: @food; }
+.icon-file-text-alt:before, .fa-file-text-o:before { content: @file-text-alt; }
+.icon-building:before, .fa-building-o:before { content: @building; }
+.icon-hospital:before, .fa-hospital-o:before { content: @hospital; }
+.icon-ambulance:before, .fa-ambulance:before { content: @ambulance; }
+.icon-medkit:before, .fa-medkit:before { content: @medkit; }
+.icon-fighter-jet:before, .fa-fighter-jet:before { content: @fighter-jet; }
+.icon-beer:before, .fa-beer:before { content: @beer; }
+.icon-h-sign:before, .fa-h-square:before { content: @h-sign; }
+.icon-plus-sign-alt:before, .fa-plus-square:before { content: @plus-sign-alt; }
+.icon-double-angle-left:before, .fa-angle-double-left:before { content: @double-angle-left; }
+.icon-double-angle-right:before, .fa-angle-double-right:before { content: @double-angle-right; }
+.icon-double-angle-up:before, .fa-angle-double-up:before { content: @double-angle-up; }
+.icon-double-angle-down:before, .fa-angle-double-down:before { content: @double-angle-down; }
+.icon-angle-left:before, .fa-angle-left:before { content: @angle-left; }
+.icon-angle-right:before, .fa-angle-right:before { content: @angle-right; }
+.icon-angle-up:before, .fa-angle-up:before { content: @angle-up; }
+.icon-angle-down:before, .fa-angle-down:before { content: @angle-down; }
+.icon-desktop:before, .fa-desktop:before { content: @desktop; }
+.icon-laptop:before, .fa-laptop:before { content: @laptop; }
+.icon-tablet:before, .fa-tablet:before { content: @tablet; }
+.icon-mobile-phone:before, .fa-mobile:before { content: @mobile-phone; }
+.icon-circle-blank:before, .fa-circle-o:before { content: @circle-blank; }
+.icon-quote-left:before, .fa-quote-left:before { content: @quote-left; }
+.icon-quote-right:before, .fa-quote-right:before { content: @quote-right; }
+.icon-spinner:before, .fa-spinner:before { content: @spinner !important; }
+.icon-circle:before, .fa-circle:before { content: @circle; }
+.icon-mail-reply:before, .fa-mail-reply:before,
+.icon-reply:before, .fa-reply:before { content: @reply; }
+.icon-github-alt:before, .fa-github-alt:before { content: @github-alt; }
+.icon-folder-close-alt:before, .fa-folder-o:before { content: @folder-close-alt; }
+.icon-folder-open-alt:before, .fa-folder-open-o:before { content: @folder-open-alt; }
+.icon-expand-alt:before, .fa-expand-o:before { content: @expand-alt; }
+.icon-collapse-alt:before, .fa-square-o:before { content: @check-empty; }
+.icon-smile:before, .fa-smile-o:before { content: @smile; }
+.icon-frown:before, .fa-frown-o:before { content: @frown; }
+.icon-meh:before, .fa-meh-o:before { content: @meh; }
+.icon-gamepad:before, .fa-gamepad:before { content: @gamepad; }
+.icon-keyboard:before, .fa-keyboard-o:before { content: @keyboard; }
+.icon-flag-alt:before, .fa-flag-o:before { content: @flag-alt; }
+.icon-flag-checkered:before, .fa-flag-checkered:before { content: @flag-checkered; }
+.icon-terminal:before, .fa-terminal:before { content: @terminal; }
+.icon-code:before, .fa-code:before { content: @code; }
+.icon-reply-all:before, .fa-reply-all:before, .icon-mail-reply-all:before, .fa-mail-reply-all:before { content: @reply-all; }
+.icon-star-half-full:before, .fa-star-half-full:before,
+.icon-star-half-empty:before, .fa-star-half-o:before { content: @star-half-empty; }
+.icon-location-arrow:before, .fa-location-arrow:before { content: @location-arrow; }
+.icon-crop:before, .fa-crop:before { content: @crop; }
+.icon-code-fork:before, .fa-code-fork:before { content: @code-fork; }
+.icon-unlink:before, .fa-chain-broken:before { content: @unlink; }
+.icon-question:before, .fa-question:before { content: @question; }
+.icon-info:before, .fa-info:before { content: @info; }
+.icon-exclamation:before, .fa-exclamation:before { content: @exclamation; }
+.icon-superscript:before, .fa-superscript:before { content: @superscript; }
+.icon-subscript:before, .fa-subscript:before { content: @subscript; }
+.icon-eraser:before, .fa-eraser:before { content: @eraser; }
+.icon-puzzle-piece:before, .fa-puzzle-piece:before { content: @puzzle-piece; }
+.icon-microphone:before, .fa-microphone:before { content: @microphone; }
+.icon-microphone-off:before, .fa-microphone-slash:before { content: @microphone-off; }
+.icon-shield:before, .fa-shield:before { content: @shield; }
+.icon-calendar-empty:before, .fa-calendar-o:before { content: @calendar-empty; }
+.icon-fire-extinguisher:before, .fa-fire-extinguisher:before { content: @fire-extinguisher; }
+.icon-rocket:before, .fa-rocket:before { content: @rocket; }
+.icon-maxcdn:before, .fa-maxcdn:before { content: @maxcdn; }
+.icon-chevron-sign-left:before, .fa-chevron-circle-left:before { content: @fa-var-chevron-circle-left; }
+.icon-chevron-sign-right:before, .fa-chevron-circle-right:before { content: @fa-var-chevron-circle-right; }
+.icon-chevron-sign-up:before, .fa-chevron-circle-up:before { content: @fa-var-chevron-circle-up; }
+.icon-chevron-sign-down:before, .fa-chevron-circle-down:before { content: @fa-var-chevron-circle-down; }
+.icon-html5:before, .fa-html5:before { content: @html5; }
+.icon-css3:before, .fa-css3:before { content: @css3; }
+.icon-anchor:before, .fa-anchor:before { content: @anchor; }
+.icon-unlock-alt:before, .fa-unlock-alt:before { content: @unlock-alt; }
+.icon-bullseye:before, .fa-bullseye:before { content: @bullseye; }
+.icon-ellipsis-horizontal:before, .fa-ellipsis-h:before { content: @ellipsis-horizontal; }
+.icon-ellipsis-vertical:before, .fa-ellipsis-v:before { content: @ellipsis-vertical; }
+.icon-rss-sign:before, .fa-rss-square:before { content: @rss-sign; }
+.icon-play-sign:before, .fa-play-circle:before { content: @play-sign; }
+.icon-ticket:before, .fa-ticket:before { content: @ticket; }
+.icon-minus-sign-alt:before, .fa-minus-square:before { content: @minus-sign-alt; }
+.icon-check-minus:before, .fa-minus-square-o:before { content: @check-minus; }
+.icon-level-up:before, .fa-level-up:before { content: @level-up; }
+.icon-level-down:before, .fa-level-down:before { content: @level-down; }
+.icon-check-sign:before, .fa-check-square:before { content: @check-sign; }
+.icon-edit-sign:before, .fa-pencil-square:before { content: @edit-sign; }
+.icon-external-link-sign:before, .fa-external-link-square:before { content: @external-link-sign; }
+.icon-share-sign:before, .fa-share-square:before { content: @share-sign; }
+.icon-compass:before, .fa-compass:before { content: @compass; }
+.icon-collapse:before, .fa-caret-square-o-down:before { content: @collapse; }
+.icon-collapse-top:before, .fa-caret-square-o-up:before { content: @collapse-top; }
+.icon-expand:before, .fa-caret-square-o-right:before { content: @expand; }
+.icon-euro:before, .fa-euro:before,
+.icon-eur:before, .fa-eur:before { content: @eur; }
+.icon-gbp:before, .fa-gbp:before { content: @gbp; }
+.icon-dollar:before, .fa-dollar:before,
+.icon-usd:before, .fa-usd:before { content: @usd; }
+.icon-rupee:before, .fa-rupee:before,
+.icon-inr:before, .fa-inr:before { content: @inr; }
+.icon-yen:before, .fa-yen:before,
+.icon-jpy:before, .fa-jpy:before { content: @jpy; }
+.icon-renminbi:before, .fa-renminbi:before,
+.icon-cny:before, .fa-rub:before { content: @cny; }
+.icon-won:before, .fa-won:before,
+.icon-krw:before, .fa-krw:before { content: @krw; }
+.icon-bitcoin:before, .fa-bitcoin:before,
+.icon-btc:before, .fa-btc:before { content: @btc; }
+.icon-file:before, .fa-file:before { content: @file; }
+.icon-file-text:before, .fa-file-text:before { content: @file-text; }
+.icon-sort-by-alphabet:before, .fa-sort-alpha-asc:before { content: @sort-by-alphabet; }
+.icon-sort-by-alphabet-alt:before, .fa-sort-alpha-desc:before { content: @sort-by-alphabet-alt; }
+.icon-sort-by-attributes:before, .fa-sort-amount-asc:before { content: @sort-by-attributes; }
+.icon-sort-by-attributes-alt:before, .fa-sort-amount-desc:before { content: @sort-by-attributes-alt; }
+.icon-sort-by-order:before, .fa-sort-numeric-asc:before { content: @sort-by-order; }
+.icon-sort-by-order-alt:before, .fa-sort-numeric-desc:before { content: @sort-by-order-alt; }
+.icon-thumbs-up:before, .fa-thumbs-up:before { content: @thumbs-up; }
+.icon-thumbs-down:before, .fa-thumbs-down:before { content: @thumbs-down; }
+.icon-youtube-sign:before, .fa-youtube-square:before { content: @youtube-sign; }
+.icon-youtube:before, .fa-youtube:before { content: @youtube; }
+.icon-xing:before, .fa-xing:before { content: @xing; }
+.icon-xing-sign:before, .fa-xing-square:before { content: @xing-sign; }
+.icon-youtube-play:before, .fa-youtube-play:before { content: @youtube-play; }
+.icon-dropbox:before, .fa-dropbox:before { content: @dropbox; }
+.icon-stackexchange:before, .fa-stack-overflow:before { content: @stackexchange; }
+.icon-instagram:before, .fa-instagram:before { content: @instagram; }
+.icon-flickr:before, .fa-flickr:before { content: @flickr; }
+.icon-adn:before, .fa-adn:before { content: @adn; }
+.icon-bitbucket:before, .fa-bitbucket:before { content: @bitbucket; }
+.icon-bitbucket-sign:before, .fa-bitbucket-square:before { content: @bitbucket-sign; }
+.icon-tumblr:before, .fa-tumblr:before { content: @tumblr; }
+.icon-tumblr-sign:before, .fa-tumblr-square:before { content: @tumblr-sign; }
+.icon-long-arrow-down:before, .fa-long-arrow-down:before { content: @long-arrow-down; }
+.icon-long-arrow-up:before, .fa-long-arrow-up:before { content: @long-arrow-up; }
+.icon-long-arrow-left:before, .fa-long-arrow-left:before { content: @long-arrow-left; }
+.icon-long-arrow-right:before, .fa-long-arrow-right:before { content: @long-arrow-right; }
+.icon-apple:before, .fa-apple:before { content: @apple; }
+.icon-windows:before, .fa-windows:before { content: @windows; }
+.icon-android:before, .fa-android:before { content: @android; }
+.icon-linux:before, .fa-linux:before { content: @linux; }
+.icon-dribbble:before, .fa-dribbble:before { content: @dribbble; }
+.icon-skype:before, .fa-skype:before { content: @skype; }
+.icon-foursquare:before, .fa-foursquare:before { content: @foursquare; }
+.icon-trello:before, .fa-trello:before { content: @trello; }
+.icon-female:before, .fa-female:before { content: @female; }
+.icon-male:before, .fa-male:before { content: @male; }
+.icon-gittip:before, .fa-gittip:before, .fa-gratipay:before { content: @gittip; }
+.icon-sun:before, .fa-sun-o:before { content: @sun; }
+.icon-moon:before, .fa-moon-o:before { content: @moon; }
+.icon-archive:before, .fa-archive:before { content: @archive; }
+.icon-bug:before, .fa-bug:before { content: @bug; }
+.icon-vk:before, .fa-vk:before { content: @vk; }
+.icon-weibo:before, .fa-weibo:before { content: @weibo; }
+.icon-renren:before, .fa-renren:before { content: @renren; }
+.fa-pagelines:before { content: @fa-var-pagelines; }
+.fa-stack-exchange:before { content: @fa-var-stack-exchange; }
+.fa-arrow-circle-o-right:before { content: @fa-var-arrow-circle-o-right; }
+.fa-arrow-circle-o-left:before { content: @fa-var-arrow-circle-o-left; }
+.fa-toggle-left:before, .fa-caret-square-o-left:before { content: @fa-var-caret-square-o-left; }
+.fa-dot-circle-o:before { content: @fa-var-dot-circle-o; }
+.fa-wheelchair:before { content: @fa-var-wheelchair; }
+.fa-vimeo-square:before { content: @fa-var-vimeo-square; }
+.fa-turkish-lira:before, .fa-try:before { content: @fa-var-try; }
+.fa-plus-square-o:before { content: @fa-var-plus-square-o; }
+.fa-empire:before, .fa-ge:before { content: @fa-var-empire; }
+.fa-space-shuttle:before { content: @fa-var-space-shuttle; }
+.fa-slack:before { content: @fa-var-slack; }
+.fa-envelope-square:before { content: @fa-var-envelope-square; }
+.fa-wordpress:before { content: @fa-var-wordpress; }
+.fa-openid:before { content: @fa-var-openid; }
+.fa-institution:before, .fa-bank:before, .fa-university:before { content: @fa-var-university; }
+.fa-mortar-board:before, .fa-graduation-cap:before { content: @fa-var-graduation-cap; }
+.fa-yahoo:before { content: @fa-var-yahoo; }
+.fa-google:before { content: @fa-var-google; }
+.fa-reddit:before { content: @fa-var-reddit; }
+.fa-reddit-square:before { content: @fa-var-reddit-square; }
+.fa-stumbleupon-circle:before { content: @fa-var-stumbleupon-circle; }
+.fa-stumbleupon:before { content: @fa-var-stumbleupon; }
+.fa-delicious:before { content: @fa-var-delicious; }
+.fa-digg:before { content: @fa-var-digg; }
+.fa-pied-piper-square:before, .fa-pied-piper:before { content: @fa-var-pied-piper; }
+.fa-pied-piper-alt:before { content: @fa-var-pied-piper-alt; }
+.fa-drupal:before { content: @fa-var-drupal; }
+.fa-joomla:before { content: @fa-var-joomla; }
+.fa-language:before { content: @fa-var-language; }
+.fa-fax:before { content: @fa-var-fax; }
+.fa-building:before { content: @fa-var-building; }
+.fa-child:before { content: @fa-var-child; }
+.fa-paw:before { content: @fa-var-paw; }
+.fa-spoon:before { content: @fa-var-spoon; }
+.fa-cube:before { content: @fa-var-cube; }
+.fa-cubes:before { content: @fa-var-cubes; }
+.fa-behance:before { content: @fa-var-behance; }
+.fa-behance-square:before { content: @fa-var-behance-square; }
+.fa-steam:before { content: @fa-var-steam; }
+.fa-steam-square:before { content: @fa-var-steam-square; }
+.fa-recycle:before { content: @fa-var-recycle; }
+.fa-automobile:before, .fa-car:before { content: @fa-var-car; }
+.fa-cab:before, .fa-taxi:before { content: @fa-var-taxi; }
+.fa-tree:before { content: @fa-var-tree; }
+.fa-spotify:before { content: @fa-var-spotify; }
+.fa-deviantart:before { content: @fa-var-deviantart; }
+.fa-soundcloud:before { content: @fa-var-soundcloud; }
+.fa-database:before { content: @fa-var-database; }
+.fa-file-pdf-o:before { content: @fa-var-file-pdf-o; }
+.fa-file-word-o:before { content: @fa-var-file-word-o; }
+.fa-file-excel-o:before { content: @fa-var-file-excel-o; }
+.fa-file-powerpoint-o:before { content: @fa-var-file-powerpoint-o; }
+.fa-file-photo-o:before, .fa-file-picture-o:before, .fa-file-image-o:before { content: @fa-var-file-image-o; }
+.fa-file-zip-o:before, .fa-file-archive-o:before { content: @fa-var-file-archive-o; }
+.fa-file-sound-o:before, .fa-file-audio-o:before { content: @fa-var-file-audio-o; }
+.fa-file-movie-o:before, .fa-file-video-o:before { content: @fa-var-file-video-o; }
+.fa-file-code-o:before { content: @fa-var-file-code-o; }
+.fa-vine:before { content: @fa-var-vine; }
+.fa-codepen:before { content: @fa-var-codepen; }
+.fa-jsfiddle:before { content: @fa-var-jsfiddle; }
+.fa-life-bouy:before, .fa-life-saver:before, .fa-support:before, .fa-life-ring:before { content: @fa-var-life-ring; }
+.fa-circle-o-notch:before { content: @fa-var-circle-o-notch; }
+.fa-ra:before, .fa-rebel:before { content: @fa-var-rebel; }
+.fa-git-square:before { content: @fa-var-git-square; }
+.fa-git:before { content: @fa-var-git; }
+.fa-hacker-news:before { content: @fa-var-hacker-news; }
+.fa-tencent-weibo:before { content: @fa-var-tencent-weibo; }
+.fa-qq:before { content: @fa-var-qq; }
+.fa-wechat:before, .fa-weixin:before { content: @fa-var-weixin; }
+.fa-send:before, .fa-paper-plane:before { content: @fa-var-paper-plane; }
+.fa-send-o:before, .fa-paper-plane-o:before { content: @fa-var-paper-plane-o; }
+.fa-history:before { content: @fa-var-history; }
+.fa-genderless:before, .fa-circle-thin:before { content: @fa-var-circle-thin; }
+.fa-header:before { content: @fa-var-header; }
+.fa-paragraph:before { content: @fa-var-paragraph; }
+.fa-sliders:before { content: @fa-var-sliders; }
+.fa-share-alt:before { content: @fa-var-share-alt; }
+.fa-share-alt-square:before { content: @fa-var-share-alt-square; }
+.fa-bomb:before { content: @fa-var-bomb; }
+.fa-soccer-ball-o:before, .fa-futbol-o:before { content: @fa-var-futbol-o; }
+.fa-tty:before { content: @fa-var-tty; }
+.fa-binoculars:before { content: @fa-var-binoculars; }
+.fa-plug:before { content: @fa-var-plug; }
+.fa-slideshare:before { content: @fa-var-slideshare; }
+.fa-twitch:before { content: @fa-var-twitch; }
+.fa-yelp:before { content: @fa-var-yelp; }
+.fa-newspaper-o:before { content: @fa-var-newspaper-o; }
+.fa-wifi:before { content: @fa-var-wifi; }
+.fa-calculator:before { content: @fa-var-calculator; }
+.fa-paypal:before { content: @fa-var-paypal; }
+.fa-google-wallet:before { content: @fa-var-google-wallet; }
+.fa-cc-visa:before { content: @fa-var-cc-visa; }
+.fa-cc-mastercard:before { content: @fa-var-cc-mastercard; }
+.fa-cc-discover:before { content: @fa-var-cc-discover; }
+.fa-cc-amex:before { content: @fa-var-cc-amex; }
+.fa-cc-paypal:before { content: @fa-var-cc-paypal; }
+.fa-cc-stripe:before { content: @fa-var-cc-stripe; }
+.fa-bell-slash:before { content: @fa-var-bell-slash; }
+.fa-bell-slash-o:before { content: @fa-var-bell-slash-o; }
+.fa-trash:before { content: @fa-var-trash; }
+.fa-copyright:before { content: @fa-var-copyright; }
+.fa-at:before { content: @fa-var-at; }
+.fa-eyedropper:before { content: @fa-var-eyedropper; }
+.fa-paint-brush:before { content: @fa-var-paint-brush; }
+.fa-birthday-cake:before { content: @fa-var-birthday-cake; }
+.fa-area-chart:before { content: @fa-var-area-chart; }
+.fa-pie-chart:before { content: @fa-var-pie-chart; }
+.fa-line-chart:before { content: @fa-var-line-chart; }
+.fa-lastfm:before { content: @fa-var-lastfm; }
+.fa-lastfm-square:before { content: @fa-var-lastfm-square; }
+.fa-toggle-off:before { content: @fa-var-toggle-off; }
+.fa-toggle-on:before { content: @fa-var-toggle-on; }
+.fa-bicycle:before { content: @fa-var-bicycle; }
+.fa-bus:before { content: @fa-var-bus; }
+.fa-ioxhost:before { content: @fa-var-ioxhost; }
+.fa-angellist:before { content: @fa-var-angellist; }
+.fa-cc:before { content: @fa-var-cc; }
+.fa-shekel:before, .fa-sheqel:before, .fa-ils:before { content: @fa-var-ils; }
+.fa-meanpath:before { content: @fa-var-meanpath; }
+.fa-buysellads:before { content: @fa-var-buysellads; }
+.fa-connectdevelop:before { content: @fa-var-connectdevelop; }
+.fa-dashcube:before { content: @fa-var-dashcube; }
+.fa-forumbee:before { content: @fa-var-forumbee; }
+.fa-leanpub:before { content: @fa-var-leanpub; }
+.fa-sellsy:before { content: @fa-var-sellsy; }
+.fa-shirtsinbulk:before { content: @fa-var-shirtsinbulk; }
+.fa-simplybuilt:before { content: @fa-var-simplybuilt; }
+.fa-skyatlas:before { content: @fa-var-skyatlas; }
+.fa-cart-plus:before { content: @fa-var-cart-plus; }
+.fa-cart-arrow-down:before { content: @fa-var-cart-arrow-down; }
+.fa-diamond:before { content: @fa-var-diamond; }
+.fa-ship:before { content: @fa-var-ship; }
+.fa-user-secret:before { content: @fa-var-user-secret; }
+.fa-motorcycle:before { content: @fa-var-motorcycle; }
+.fa-street-view:before { content: @fa-var-street-view; }
+.fa-heartbeat:before { content: @fa-var-heartbeat; }
+.fa-venus:before { content: @fa-var-venus; }
+.fa-mars:before { content: @fa-var-mars; }
+.fa-mercury:before { content: @fa-var-mercury; }
+.fa-transgender:before { content: @fa-var-transgender; }
+.fa-transgender-alt:before { content: @fa-var-transgender-alt; }
+.fa-venus-double:before { content: @fa-var-venus-double; }
+.fa-mars-double:before { content: @fa-var-mars-double; }
+.fa-venus-mars:before { content: @fa-var-venus-mars; }
+.fa-mars-stroke:before { content: @fa-var-mars-stroke; }
+.fa-mars-stroke-v:before { content: @fa-var-mars-stroke-v; }
+.fa-mars-stroke-h:before { content: @fa-var-mars-stroke-h; }
+.fa-neuter:before { content: @fa-var-neuter; }
+.fa-facebook-official:before { content: @fa-var-facebook-official; }
+.fa-pinterest-p:before { content: @fa-var-pinterest-p; }
+.fa-whatsapp:before { content: @fa-var-whatsapp; }
+.fa-server:before { content: @fa-var-server; }
+.fa-user-plus:before { content: @fa-var-user-plus; }
+.fa-user-times:before { content: @fa-var-user-times; }
+.fa-hotel:before,
+.fa-bed:before { content: @fa-var-bed; }
+.fa-viacoin:before { content: @fa-var-viacoin; }
+.fa-train:before { content: @fa-var-train; }
+.fa-subway:before { content: @fa-var-subway; }
+.fa-medium:before { content: @fa-var-medium; }
diff --git a/wcfsetup/install/files/style/layout/containerList.less b/wcfsetup/install/files/style/layout/containerList.less
new file mode 100644
index 0000000000..63fb4ca7f3
--- /dev/null
+++ b/wcfsetup/install/files/style/layout/containerList.less
@@ -0,0 +1,69 @@
+.containerList > li {
+	padding: 20px 0;
+	
+	&:not(:last-child) {
+		border-bottom: 1px solid rgb(238, 238, 238);
+	}
+	
+	&.showMore {
+		text-align: center;
+	}
+	
+	.containerHeadline {
+		position: relative;
+		
+		> .containerContentType {
+			opacity: .6;
+			position: absolute;
+			top: 0;
+			right: 0;
+		}
+	}
+}
+
+.containerBoxList {
+	&.doubleColumned,
+	&.tripleColumned {
+		display: flex;
+		flex-wrap: wrap;
+		margin-bottom: -10px;
+		
+		> li {
+			margin-bottom: 10px;
+		}
+	}
+	
+	&.doubleColumned > li {
+		flex: 0 0 50%;
+	}
+	
+	&.tripleColumned > li {
+		flex: 0 0 auto;
+		/* work-around for IE10 */
+		width: calc(~"100% / 3");
+	}
+}
+
+.likeList > .likeTypeSelection {
+	text-align: right;
+	
+	> .buttonGroup {
+		display: inline-flex;
+	}
+}
+
+.userList .userInformation {
+	position: relative;
+	
+	&:hover > .buttonGroupNavigation {
+		opacity: 1;
+	}
+	
+	> .buttonGroupNavigation {
+		opacity: 0;
+		position: absolute;
+		right: 0;
+		top: 0;
+		transition: opacity .2s linear;
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/layout/content.less b/wcfsetup/install/files/style/layout/content.less
new file mode 100644
index 0000000000..9609764b00
--- /dev/null
+++ b/wcfsetup/install/files/style/layout/content.less
@@ -0,0 +1,50 @@
+.content {
+	fieldset > legend {
+		float: left;
+		width: 100%;
+		
+		&+ * {
+			clear: left;
+		}
+	}
+	
+	fieldset > legend,
+	section > h1 {
+		.wcfFontLarge;
+		
+		color: rgb(67, 67, 67);
+		margin-bottom: 20px;
+	}
+	
+	.container {
+		fieldset {
+			&:not(:first-child) {
+				margin-top: 20px;
+			}
+			
+			> legend {
+				border-bottom: 1px solid rgb(238, 238, 238);
+				padding-bottom: 5px;
+			}
+		}
+		
+		section {
+			&:not(:first-child) {
+				margin-top: 20px;
+			}
+			
+			> h1 {
+				border-bottom: 1px solid rgb(238, 238, 238);
+				padding-bottom: 5px;
+			}
+		}
+	}
+	
+	label {
+		display: block;
+		
+		&:not(:first-child) {
+			margin-top: 5px;
+		}
+	}
+}
diff --git a/wcfsetup/install/files/style/layout/form.less b/wcfsetup/install/files/style/layout/form.less
new file mode 100644
index 0000000000..ee22272037
--- /dev/null
+++ b/wcfsetup/install/files/style/layout/form.less
@@ -0,0 +1,11 @@
+.formSubmit {
+	text-align: center;
+	
+	&:not(:first-child) {
+		margin-top: 20px;
+	}
+	
+	> :not(:first-child) {
+		margin-left: 10px;
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/layout/global.less b/wcfsetup/install/files/style/layout/global.less
new file mode 100644
index 0000000000..48b1e91cfd
--- /dev/null
+++ b/wcfsetup/install/files/style/layout/global.less
@@ -0,0 +1,113 @@
+.layoutFluid {
+	margin-left: auto;
+	margin-right: auto;
+	min-width: @wcfLayoutMinWidth;
+	max-width: @wcfLayoutMaxWidth;
+}
+
+.marginTop {
+	margin-top: 20px;
+}
+
+.framed {
+	> canvas,
+	> img,
+	> .icon {
+		background-color: @wcfContentBackgroundColor;
+		border: 1px solid @wcfContainerBorderColor;
+		padding: 1px;
+	}
+}
+
+.invisible {
+	display: none;
+}
+
+/* boxes with an image */
+.box(@imageSize, @margin: 0) {
+	display: flex;
+	
+	&:not(:last-child) {
+		margin-bottom: (@margin + 3px);
+	}
+	
+	> :first-child:not(:last-child) {
+		flex: 0 auto;
+		margin-right: @margin;
+	}
+	
+	> :last-child {
+		flex: 1;
+	}
+}
+
+.box16 { .box(16px, 4px); }
+.box24 { .box(24px, 4px); }
+.box32 { .box(32px, 7px); }
+.box48 { .box(48px, 7px); }
+.box64 { .box(64px, 7px); }
+.box96 { .box(96px, 11px); }
+.box128 { .box(128px, 11px); }
+.box256 { .box(256px, 21px); }
+
+small {
+	font-size: .85rem;
+}
+
+.wcfFontDefault {
+	font-family: "Open Sans";
+	font-weight: 400;
+}
+
+.wcfFontSmall {
+	font-family: "Open Sans";
+	font-size: .85rem;
+	font-weight: 400;
+}
+
+.wcfFontBold {
+	font-family: "Open Sans";
+	font-weight: 600;
+}
+
+.wcfFontLarger {
+	font-family: "Open Sans";
+	font-size: 1.2rem;
+	font-weight: 300;
+}
+
+.wcfFontLarge {
+	font-family: "Open Sans";
+	font-size: 1.4rem;
+	font-weight: 300;
+}
+
+.elementPointer {
+	pointer-events: none;
+	position: absolute;
+	top: 0;
+	transform: translateY(-100%);
+	
+	&.center {
+		left: 50%;
+		transform: translateX(-50%) translateY(-100%);
+	}
+	
+	&.left {
+		left: 4px;
+	}
+	
+	&.right {
+		right: 4px;
+	}
+	
+	&.flipVertical {
+		bottom: 0;
+		top: auto;
+		transform: translateY(100%);
+		
+		&.center {
+			transform: translateX(-50%) translateY(100%);
+		}
+	}
+}
diff --git a/wcfsetup/install/files/style/layout/layout.less b/wcfsetup/install/files/style/layout/layout.less
new file mode 100644
index 0000000000..24d7e65820
--- /dev/null
+++ b/wcfsetup/install/files/style/layout/layout.less
@@ -0,0 +1,131 @@
+/* @TODO */
+.userAvatarImage { border-radius: 50%; }
+/* @TODO END */
+
+html, body {
+	font-size: @wcfBaseFontSize;
+	height: 100%;
+}
+
+body {
+	background-color: @wcfPageBackgroundColor;
+	color: @wcfPageColor;
+	line-height: 1.428571429;
+	position: relative;
+	word-wrap: break-word;
+	
+	.wcfFontDefault;
+}
+
+a {
+	color: @wcfPageLinkColor;
+	cursor: pointer;
+	
+	&:hover {
+		color: @wcfPageLinkHoverColor;
+	}
+	
+	&:not(:hover) {
+		text-decoration: none;
+	}
+}
+
+strong {
+	.wcfFontBold;
+}
+
+#pageContainer {
+	display: flex;
+	height: 100%;
+	flex-direction: column;
+}
+
+/* COLUMN LAYOUT */
+#pageHeader {
+	flex: 0 auto;
+	z-index: 100;
+}
+
+.main {
+	background-color: @wcfContentBackgroundColor;
+	color: @wcfColor;
+	flex: 1 auto;
+	padding: 40px 0;
+	z-index: 50;
+	
+	> div {
+		display: flex;
+	}
+	
+	a {
+		color: @wcfLinkColor;
+		text-decoration: none;
+		
+		&:hover {
+			color: @wcfLinkHoverColor;
+		}
+	}
+}
+
+#content {
+	flex: 1 auto;
+}
+
+.sidebar {
+	flex: 0 0 310px;
+	
+	&:first-child {
+		margin-right: 30px;
+	}
+}
+
+#content + .sidebar {
+	margin-left: 30px;
+}
+
+#pageFooter {
+	flex: 0 auto;
+}
+
+/* CONTENT AREA */
+.boxHeadline {
+	border-bottom: 1px solid rgba(238, 238, 238, 1);
+	margin-bottom: 30px;
+	padding-bottom: 10px;
+	
+	> h1 {
+		.wcfFontLarge;
+		
+		color: rgba(67, 67, 67, 1);
+		font-size: 2rem;
+	}
+	
+	&.labeledHeadline {
+		font-size: 0;
+		
+		> h1,
+		> h2 {
+			display: inline-block;
+			margin-right: 10px;
+		}
+		
+		> ul {
+			display: inline-block;
+			font-size: 1rem;
+			
+			&:not(:empty) {
+				margin-right: 10px;
+			}
+		}
+	}
+}
+
+.containerHeadline {
+	> h3 {
+		.wcfFontLarger;
+		
+		> .badge {
+			margin-left: 5px;
+		}
+	}
+}
diff --git a/wcfsetup/install/files/style/layout/navigation.less b/wcfsetup/install/files/style/layout/navigation.less
new file mode 100644
index 0000000000..b25780b104
--- /dev/null
+++ b/wcfsetup/install/files/style/layout/navigation.less
@@ -0,0 +1,142 @@
+.navigation {
+	background-color: rgba(44, 62, 80, 1);
+	flex: 0 auto;
+	padding: 5px 0;
+	z-index: 25;
+	
+	> div {
+		align-items: center;
+		display: flex;
+		justify-content: flex-end;
+		height: 30px;
+	}
+}
+
+.navigationIcons {
+	display: flex;
+	flex: 0 auto;
+	flex-direction: row-reverse;
+	
+	> li {
+		flex: 0 auto;
+		
+		&:not(:last-child) {
+			margin-left: 10px;
+		}
+		
+		> a {
+			opacity: .8;
+			transition: opacity .2s linear;
+			
+			&:hover {
+				opacity: 1;
+			}
+			
+			> .icon {
+				color: rgba(255, 255, 255, 1);
+			}
+		}
+	}
+}
+
+.contentNavigation {
+	align-items: center;
+	display: flex;
+	
+	&:not(:first-child) {
+		margin-top: 20px;
+	}
+	
+	&:not(:last-child) {
+		margin-bottom: 20px;
+	}
+	
+	> nav {
+		flex: 1 auto;
+		
+		& + nav {
+			flex: 0 0 auto;
+		}
+		
+		&:not(.pageNavigation) {
+			text-align: right;
+		}
+	}
+	
+	ul {
+		display: inline-flex;
+		
+		> li {
+			flex: 0 0 auto;
+			
+			&:not(:last-child) {
+				margin-right: 5px;
+			}
+		}
+	}
+}
+
+.pageNavigation > ul {
+	background-color: rgb(79, 129, 189);
+	border-radius: 3px;
+	display: inline-flex;
+	overflow: hidden;
+	
+	> li {
+		background-color: transparent;
+		border-radius: 0;
+		border-width: 0;
+		flex: 0 0 auto;
+		padding: 0;
+		transition: background-color .2s linear;
+		
+		&:not(.active):not(.disabled):hover {
+			background-color: #3498db;
+		}
+		
+		&:not(:last-child) {
+			border-right: 1px solid rgb(112, 152, 200);
+			margin-right: 0;
+		}
+		
+		&.active {
+			background-color: rgb(255, 255, 255);
+			
+			> span:not(.invisible) {
+				color: rgb(79, 129, 189);
+				cursor: default;
+				
+				&:hover {
+					color: rgb(79, 129, 189);
+				}
+			}
+		}
+		
+		&.jumpTo {
+			cursor: pointer;
+		}
+		
+		&.skip {
+			align-items: center;
+			display: flex;
+		}
+		
+		> a,
+		> span:not(.invisible) {
+			color: rgb(255, 255, 255);
+			display: block;
+			padding: 3px 7px;
+			
+			&:hover {
+				color: rgb(255, 255, 255);
+			}
+		}
+	}
+}
+
+.pageNavigation.small > ul > li {
+	> a,
+	> span:not(.invisible) {
+		padding: 1px 5px;
+	}
+}
diff --git a/wcfsetup/install/files/style/layout/pageFooter.less b/wcfsetup/install/files/style/layout/pageFooter.less
new file mode 100644
index 0000000000..da64f9efdb
--- /dev/null
+++ b/wcfsetup/install/files/style/layout/pageFooter.less
@@ -0,0 +1,46 @@
+#pageFooter {
+	background-color: rgba(52, 73, 94, 1);
+	padding: 20px 0;
+	z-index: 20;
+	
+	address {
+		color: rgba(255, 255, 255, 1);
+		font-style: normal;
+		opacity: .8;
+		text-align: center;
+		transition: opacity .2s linear;
+		
+		&:hover {
+			opacity: 1;
+		}
+		
+		a {
+			color: rgba(255, 255, 255, 1);
+		}
+	}
+}
+
+#pageFooterBoxes {
+	background-color: rgba(44, 62, 80, 1);
+	padding: 30px;
+	z-index: 40;
+	
+	> div > ul {
+		display: flex;
+		flex-wrap: wrap;
+		
+		> li {
+			flex: 0 0 50%;
+			
+			> .icon:first-child {
+				display: none;
+			}
+			
+			> div > .containerHeadline > h3 {
+				font-family: "Segoe UI Light";
+				font-size: 1.4rem;
+				margin-bottom: 10px;
+			}
+		}
+	}
+}
diff --git a/wcfsetup/install/files/style/layout/pageHeader.less b/wcfsetup/install/files/style/layout/pageHeader.less
new file mode 100644
index 0000000000..a7d64a9ad4
--- /dev/null
+++ b/wcfsetup/install/files/style/layout/pageHeader.less
@@ -0,0 +1,188 @@
+/* @TODO */
+#logo {
+	//width: 75px;
+	overflow: hidden;
+	> a > img {
+		//height: 60px;
+	}
+}
+.interactiveDropdown { display: none; }
+/* @TODO END */
+
+#pageHeader {
+	background-color: rgba(52, 73, 94, 1); /* @TODO */
+}
+
+#pageHeader > div > div {
+	align-items: center;
+	display: flex;
+	flex-wrap: wrap;
+	padding: 20px 0;
+}
+
+/* LOGO */
+#logo {
+	flex: 0 0 50%;
+	//margin-right: @wcfGapMedium;
+	
+	> a > img.small {
+		display: none;
+	}
+}
+
+/* MAIN MENU */
+#mainMenu {
+	flex: 0 50%;
+	
+	> ul {
+		display: flex;
+		
+		> li {
+			.wcfFontLarger;
+			
+			flex: 0 auto;
+			
+			&:not(:last-child) {
+				margin-right: @wcfGapMedium;
+			}
+			
+			&.active > a {
+				.wcfFontBold;
+				
+				color: rgba(255, 255, 255, 1);
+			}
+			
+			> a {
+				color: rgba(255, 255, 255, .8);
+				transition: color .2s linear;
+				text-decoration: none;
+				text-transform: uppercase;
+				
+				&:hover {
+					color: rgba(255, 255, 255, 1);
+				}
+			}
+		}
+	}
+}
+
+.subMenuItems {
+	position: relative;
+	
+	&:hover > .subMenu {
+		opacity: 1;
+		transition-delay: 0s;
+		visibility: visible;
+	}
+	
+	> a {
+		padding-right: 15px;
+		
+		&:after {
+			content: @fa-var-caret-down;
+			display: block;
+			font-family: FontAwesome;
+			position: absolute;
+			right: 0;
+			top: 0;
+		}
+	}
+}
+
+.subMenu {
+	background-color: rgba(52, 73, 94, 1);
+	border-radius: 3px;
+	opacity: 0;
+	padding: 5px 0;
+	position: absolute;
+	transition: visibility .2s linear .2s, opacity .2s linear;
+	visibility: hidden;
+	
+	> li {
+		&:not(:first-child) {
+			margin-top: 5px;
+		}
+		
+		&.active > a {
+			background-color: rgb(79, 129, 189);
+			cursor: default;
+		}
+		
+		> a {
+			.wcfFontDefault;
+			
+			color: rgb(255, 255, 255);
+			display: block;
+			font-size: 1rem;
+			padding: 5px 10px;
+			transition: background-color .2s linear;
+			white-space: nowrap;
+			
+			&:hover {
+				background-color: rgb(79, 129, 189);
+			}
+		}
+	}
+}
+
+
+
+/* USER PANEL */
+#topMenu {
+	flex: 0 50%;
+	
+	> ul {
+		display: flex;
+		justify-content: flex-end;
+		
+		> li {
+			align-items: center;
+			display: flex;
+			flex: 0 auto;
+			
+			&:not(:last-child) > a {
+				margin: 0 5px;
+			}
+			
+			&.active > a {
+				color: rgba(255, 255, 255, 1);
+				font-family: "Segoe UI Semibold";
+				font-weight: bold;
+			}
+			
+			> a {
+				color: rgba(255, 255, 255, .8);
+				flex: 0 auto;
+				transition: color .2s linear;
+				text-decoration: none;
+				text-transform: uppercase;
+				
+				&:hover {
+					color: rgba(255, 255, 255, 1);
+					
+					> .icon {
+						color: rgba(255, 255, 255, 1);
+					}
+				}
+				
+				> .icon {
+					color: rgba(255, 255, 255, .8);
+					transition: color .2s linear;
+					
+					.icon24;
+				}
+				
+				> span:not(.icon) {
+					display: none;
+				}
+			}
+		}
+	}
+}
+
+/* SEARCH AREA */
+#search {
+	flex: 0 50%;
+	text-align: right;
+}
+
diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.less b/wcfsetup/install/files/style/layout/pageHeaderSticky.less
new file mode 100644
index 0000000000..d29a2d1f5a
--- /dev/null
+++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.less
@@ -0,0 +1,46 @@
+#pageHeader.sticky {
+	flex-wrap: nowrap;
+	z-index: 300;
+	
+	> div {
+		background-color: rgba(52, 73, 94, 1); /* @TODO */
+		left: 0;
+		position: fixed;
+		top: 0;
+		right: 0;
+		
+		> div {
+			padding: 10px 0;
+		}
+	}
+	
+	#logo {
+		flex: 0 auto;
+		order: 1;
+		
+		> a > .large {
+			display: none;
+		}
+		
+		> a > .small {
+			display: block;
+		}
+	}
+	
+	#mainMenu {
+		flex: 1 auto;
+		order: 2;
+		margin: 0 20px;
+	}
+	
+	#topMenu {
+		flex: 0 auto;
+		order: 3;
+		margin-right: 10px;
+	}
+	
+	#search {
+		flex: 0 auto;
+		order: 4;
+	}
+}
diff --git a/wcfsetup/install/files/style/layout/sidebar.less b/wcfsetup/install/files/style/layout/sidebar.less
new file mode 100644
index 0000000000..eaa6d44b41
--- /dev/null
+++ b/wcfsetup/install/files/style/layout/sidebar.less
@@ -0,0 +1,88 @@
+.sidebar {
+	> div,
+	> fieldset,
+	> section {
+		background-color: rgb(240, 240, 240);
+		border-radius: 3px;
+		padding: 20px;
+		
+		&:after {
+			clear: both;
+			content: "";
+			display: block;
+			height: 0;
+		}
+	}
+	
+	> div + *,
+	> fieldset + *,
+	> section + * {
+		margin-top: 30px;
+	}
+	
+	> div {
+		fieldset + fieldset,
+		section + section {
+			margin-top: 20px;
+		}
+	}
+	
+	fieldset > legend {
+		float: left;
+		width: 100%;
+		
+		& + * {
+			clear: left;
+		}
+	}
+	
+	section > h1,
+	fieldset > legend {
+		.wcfFontLarge;
+		
+		color: rgba(67, 67, 67, 1);
+		margin-bottom: 10px;
+	}
+	
+	dl.dataList {
+		font-size: .85rem;
+		overflow: hidden;
+	}
+	
+	dl:not(.dataList) {
+		&:not(:first-child) {
+			margin-top: 10px;
+		}
+	}
+	
+	dl:not(.plain) {
+		display: block;
+		
+		> dt,
+		> dd {
+			display: block;
+			margin: 0;
+			text-align: left;
+			width: 100%;
+		}
+	}
+}
+
+.sidebarNavigation > li {
+	&.active {
+		background-color: rgb(255, 255, 255);
+		margin: 0 -20px;
+		padding: 0 20px;
+	}
+	
+	> a {
+		display: block;
+		padding: 5px 0;
+	}
+}
+
+.sidebarBoxHeadline > h3 {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
diff --git a/wcfsetup/install/files/style/ui/alert.less b/wcfsetup/install/files/style/ui/alert.less
new file mode 100644
index 0000000000..a5334e0ffb
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/alert.less
@@ -0,0 +1,15 @@
+.error,
+.info {
+	border-radius: 3px;
+	padding: 10px 20px;
+}
+
+.error {
+	background-color: rgb(242, 222, 222);
+	color: rgb(169, 68, 66);
+}
+
+.info {
+	background-color: rgb(217, 237, 247);
+	color: rgb(49, 112, 143);
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/ui/badge.less b/wcfsetup/install/files/style/ui/badge.less
new file mode 100644
index 0000000000..be43c17212
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/badge.less
@@ -0,0 +1,112 @@
+.badge {
+	background-color: @wcfColor;
+	border: 1px solid rgb(255, 255, 255);
+	border-radius: 3px;
+	color: @wcfContentBackgroundColor;
+	display: inline-block;
+	font-size: .85rem;
+	padding: 2px 5px;
+	position: relative;
+	text-shadow: none !important; /* necessary to avoid ugly text shadows in comment lists; @todo: better solution without "!important" */
+	vertical-align: middle;
+	white-space: nowrap;
+	word-wrap: normal;
+	
+	/* colors */
+	&.badgeUpdate {
+		background-color: @wcfTabularBoxBackgroundColor;
+		color: @wcfTabularBoxColor;
+	}
+	
+	&.badgeInverse {
+		background-color: @wcfTabularBoxColor;
+		color: @wcfTabularBoxBackgroundColor;
+	}
+	
+	/* default label colors */
+	&.green {
+		background-color: rgba(0, 153, 0, 1);
+		color: rgba(238, 255, 238, 1);
+	}
+	
+	&.red {
+		background-color: rgba(204, 0, 0, 1);
+		color: rgba(255, 238, 238, 1);
+	}
+	
+	&.black {
+		background-color: #333;
+		color: #fff;
+	}
+	
+	&.brown {
+		background-color: #c63;
+		color: #fff;
+	}
+	
+	&.orange {
+		background-color: #f90;
+		color: #fff;
+	}
+	
+	&.yellow {
+		background-color: #ff0;
+		color: #333;
+	}
+	
+	&.blue {
+		background-color: #369;
+		color: #fff;
+	}
+	
+	&.purple {
+		background-color: #c0f;
+		color: #fff;
+	}
+	
+	&.pink {
+		background-color: #f0c;
+		color: #fff;
+	}
+}
+
+a.badge:hover {
+	color: @wcfContentBackgroundColor;
+	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: #060;
+	}
+	
+	&.blue {
+		background-color: #036;
+	}
+	
+	&.purple {
+		background-color: #90c;
+	}
+	
+	&.pink {
+		background-color: #c09;
+	}
+}
diff --git a/wcfsetup/install/files/style/ui/breadcrumb.less b/wcfsetup/install/files/style/ui/breadcrumb.less
new file mode 100644
index 0000000000..63652df5e2
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/breadcrumb.less
@@ -0,0 +1,35 @@
+.breadcrumbs {
+	flex: 1;
+	
+	> ul {
+		display: flex;
+		
+		> li {
+			flex: 0 auto;
+			font-size: .85rem;
+			
+			&:not(:last-child) {
+				margin-right: 10px;
+				
+				&:after {
+					content: "/";
+				}
+				
+				> a {
+					margin-right: 10px;
+				}
+			}
+			
+			> a {
+				color: rgba(255, 255, 255, 1);
+				opacity: .8;
+				text-decoration: none;
+				transition: opacity .2s linear;
+				
+				&:hover {
+					opacity: 1;
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/ui/button.less b/wcfsetup/install/files/style/ui/button.less
new file mode 100644
index 0000000000..4c35ee956d
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/button.less
@@ -0,0 +1,114 @@
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+.button {
+	background-color: @wcfButtonBackgroundColor;
+	border: 1px solid @wcfButtonBorderColor;
+	border-radius: 3px;
+	color: @wcfButtonColor !important;
+	cursor: pointer;
+	display: inline-block;
+	padding: 5px 10px;
+	transition-duration: .2s;
+	transition-property: background-color, border-color, color;
+	transition-timing-function: linear;
+	
+	.icon {
+		color: @wcfButtonColor;
+		transition: color .2s linear;
+	}
+	
+	&:hover {
+		background-color: @wcfButtonHoverBackgroundColor;
+		border-color: @wcfButtonHoverBorderColor;
+		color: @wcfButtonHoverColor !important;
+		
+		.icon {
+			color: @wcfButtonHoverColor;
+		}
+	}
+	
+	&.small {
+		font-size: .85rem;
+		padding: 4px 7px;
+	}
+}
+
+button.buttonPrimary,
+input[type="button"].buttonPrimary,
+input[type="submit"],
+.button.buttonPrimary {
+	background-color: @wcfButtonPrimaryBackgroundColor;
+	border-color: @wcfButtonPrimaryBorderColor;
+	color: @wcfButtonPrimaryColor !important;
+	
+	.icon {
+		color: @wcfButtonPrimaryColor;
+	}
+	
+	/* @TODO */
+	&:hover {
+		background-color: @wcfButtonPrimaryBackgroundColor;
+		border-color: @wcfButtonHoverBorderColor;
+		color: @wcfButtonHoverColor;
+		
+		.icon {
+			color: @wcfButtonHoverColor;
+		}
+	}
+	/* @TODO END */
+}
+
+.buttonList {
+	.inlineList;
+	
+	&.smallButtons .button {
+		font-size: .85rem;
+		padding: 4px 7px;
+	}
+	
+	/* members list */
+	&.letters {
+		margin-bottom: -10px;
+		
+		> li {
+			flex: 0 0 10%;
+			margin-bottom: 10px;
+			
+			> a {
+				display: block;
+				text-align: center;
+			}
+		}
+	}
+}
+
+.buttonGroupNavigation > ul {
+	.inlineList;
+}
+
+.buttonGroup {
+	.inlineList;
+	
+	> li {
+		&:not(:last-child) {
+			border-right: 1px solid @wcfButtonHoverBackgroundColor;
+			margin-right: 0;
+		}
+		
+		&:first-child .button {
+			border-bottom-left-radius: 3px;
+			border-top-left-radius: 3px;
+		}
+		
+		&:last-child .button {
+			border-bottom-right-radius: 3px;
+			border-top-right-radius: 3px;
+		}
+		
+		.button {
+			border-radius: 0;
+		}
+	}
+}
diff --git a/wcfsetup/install/files/style/ui/comment.less b/wcfsetup/install/files/style/ui/comment.less
new file mode 100644
index 0000000000..28d9494b12
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/comment.less
@@ -0,0 +1,37 @@
+.commentContent {
+	position: relative;
+	
+	&:hover > .buttonGroupNavigation {
+		opacity: 1;
+	}
+	
+	> .buttonGroupNavigation {
+		opacity: 0;
+		position: absolute;
+		top: 5px;
+		transition: opacity .2s linear;
+		right: 10px;
+	}
+	
+	> .containerHeadline {
+		margin-bottom: 5px;
+	}
+	
+	& + .commentOptionContainer {
+		margin-top: 10px;
+	}
+}
+
+.commentResponseList {
+	margin-top: 10px;
+}
+
+.commentResponse {
+	border-top: 1px solid rgb(238, 238, 238);
+	padding: 10px 0;
+}
+
+.commentOptionContainer {
+	border-top: 1px solid rgb(238, 238, 238);
+	padding-top: 10px;
+}
diff --git a/wcfsetup/install/files/style/ui/dialog.less b/wcfsetup/install/files/style/ui/dialog.less
new file mode 100644
index 0000000000..8ebbd0827a
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/dialog.less
@@ -0,0 +1,247 @@
+.dialogOverlay {
+	background-color: transparent;
+	bottom: 0;
+	left: 0;
+	position: fixed;
+	right: 0;
+	top: 0;
+	visibility: hidden;
+	z-index: 399;
+	
+	transition: visibility 0s linear .3s;
+	
+	&[aria-hidden=false] {
+		/* do not animate opacity or background-color, the transition is anything but smooth due to the large area covered */
+		background-color: rgba(255, 255, 255, .4);
+		visibility: visible;
+		
+		transition-delay: 0s;
+	}
+}
+
+@-webkit-keyframes wcfDialog {
+	0%   { visibility: visible; opacity: 0; top: 8%; }
+	100% { visibility: visible; opacity: 1; top: 10%; }
+}
+
+@-webkit-keyframes wcfDialogOut {
+	0% { visibility: visible; opacity: 1; top: 10%; }
+	100% { visibility: hidden; opacity: 0; top: 12%; }
+}
+
+.dialogContainer {
+	background-color: rgba(0, 0, 0, .4);
+	border: 3px solid transparent;
+	border-radius: 3px;
+	box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .3);
+	box-sizing: border-box;
+	left: 50%;
+	max-height: 80%;
+	max-width: 80%;
+	min-width: 400px;
+	position: absolute;
+	top: 10%;
+	transform: translateX(-50%);
+	
+	-webkit-animation: wcfDialogOut .3s;
+	-webkit-animation-fill-mode: forwards;
+	
+	&[aria-hidden=false] {
+		-webkit-animation: wcfDialog .3s;
+		-webkit-animation-fill-mode: forwards;
+	}
+	
+	> header {
+		background: linear-gradient(to right, @wcfTabularBoxBackgroundColor, lighten(@wcfTabularBoxBackgroundColor, 10%));
+		border-top-left-radius: 3px;
+		border-top-right-radius: 3px;
+		color: @wcfTabularBoxColor;
+		display: flex;
+		padding: 7px 10px;
+		
+		.textShadow(@wcfTabularBoxBackgroundColor);
+		
+		> span {
+			flex: 1 auto;
+			font-family: "Segoe UI Light";
+			font-size: 1.4rem;
+		}
+		
+		> a {
+			color: @wcfTabularBoxColor;
+			flex: 0 0 20px;
+			font-family: FontAwesome;
+			font-size: 18px;
+			text-align: right;
+			text-decoration: none;
+			
+			&:before {
+				content: @fa-var-times-circle;
+			}
+			
+			> span {
+				display: none;
+			}
+		}
+	}
+	
+	> .dialogContent {
+		background-color: @wcfContainerBackgroundColor;
+		box-sizing: border-box;
+		color: @wcfColor;
+		overflow: auto;
+		
+		&:not(.dialogContentNoPadding) {
+			padding: 10px;
+			padding-bottom: 0;
+			
+			&:after {
+				content: "";
+				display: block;
+				height: 10px;
+			}
+			
+			&.dialogForm:after {
+				height: 17px;
+			}
+		}
+		
+		&:not(.dialogForm) {
+			border-bottom-left-radius: 3px;
+			border-bottom-right-radius: 3px;
+		}
+		
+		dl:not(.plain) {
+			> dt {
+				float: none;
+				margin-bottom: @wcfGapTiny;
+				text-align: left;
+				width: auto !important;
+				
+				&:empty {
+					margin-bottom: 0;
+				}
+			}
+			
+			> dd {
+				margin-left: 0 !important;
+			}
+		}
+		
+		.dialogFormSubmit {
+			background-color: @wcfContainerBackgroundColor;
+			border-top: 1px solid #3F7FBF;
+			border-bottom-left-radius: 3px;
+			border-bottom-right-radius: 3px;
+			bottom: 0;
+			left: 0;
+			padding: 10px;
+			position: absolute;
+			right: 0;
+		}
+	}
+}
+
+@media only screen and (max-width: 800px) {
+}
+
+/* static dialogs */
+.jsStaticDialogContent {
+	display: none;
+}
+
+.dialogContentX {
+	
+	> .icon-spinner {
+		left: 50%;
+		margin: -21px -21px 0 0;
+		padding: 0 21px 0 21px;
+		position: absolute;
+		top: 50%;
+	}
+	
+	.formSubmit {
+		background-color: @wcfContainerAccentBackgroundColor;
+		border-bottom-left-radius: 7px;
+		border-bottom-right-radius: 7px;
+		border-top: 1px solid @wcfContainerBorderColor;
+		bottom: 0;
+		left: 0;
+		padding: 10px 0;
+		position: absolute;
+		width: 100%;
+	}
+}
+
+/* package (un-)installation */
+#packageInstallationDialogContainer > .boxHeadline {
+	margin-top: 0;
+}
+
+.spinner {
+	border: 1px solid rgba(0, 0, 0, .3);
+	border-radius: 6px;
+	box-sizing: border-box;
+	color: #fff;
+	left: 50%;
+	opacity: 0;
+	padding: 7px;
+	position: fixed;
+	text-align: center;
+	top: 200px;
+	visibility: hidden;
+	z-index: 401;
+	
+	transform: translateX(-50%);
+	
+	.boxShadow(0, 1px, rgba(0, 0, 0, .5), 7px);
+	.linearGradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
+	
+	transition: visibility 0s linear .1s, opacity .1s linear;
+	
+	&.active {
+		opacity: 1;
+		visibility: visible;
+		
+		transition-delay: 0s;
+	}
+	
+	> .icon {
+		color: #fff;
+	}
+	
+	> span:not(.icon) {
+		display: block;
+		margin-top: @wcfGapSmall;
+	}
+}
+
+.systemConfirmation p {
+	padding-top: @wcfGapSmall;
+}
+
+/* notification overlay */
+#systemNotification {
+	left: 0;
+	pointer-events: none;
+	position: fixed;
+	top: 0;
+	width: 100%;
+	z-index: 460;
+	
+	> p {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+		border-top-width: 0;
+		cursor: pointer;
+		display: table;
+		margin: 0 auto;
+		max-width: 80%;
+		pointer-events: auto;
+		
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/ui/dropdown.less b/wcfsetup/install/files/style/ui/dropdown.less
new file mode 100644
index 0000000000..b44fe9107b
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/dropdown.less
@@ -0,0 +1,301 @@
+.dropdown {
+	.dropdownToggle:active,
+	&.dropdownOpen .dropdownToggle {
+		outline: 0;
+	}
+	
+	&.inputAddon {
+		> .dropdownToggle {
+			padding: @wcfGapTiny;
+			
+			> span.active:after {
+				content: "\f0d7";
+				font-family: FontAwesome;
+				font-size: 14px;
+				margin-left: 7px;
+			}
+		}
+	}
+	
+	&.preInput {
+		display: table;
+		width: 100%;
+		
+		input {
+			border-radius: 0 @wcfInputBorderRadius @wcfInputBorderRadius 0;
+			display: table-cell;
+			margin: 0;
+			width: 99%;
+		}
+		
+		textarea {
+			border-radius: 0 @wcfInputBorderRadius @wcfInputBorderRadius;
+			display: block;
+			margin-top: 0;
+		}
+		
+		.dropdownCaption {
+			cursor: pointer;
+			display: table-cell;
+			letter-spacing: -1px;
+			padding: 0 @wcfGapSmall 0 @wcfGapTiny;
+			vertical-align: middle;
+			width: 1%;
+			
+			&.button {
+				border-right-width: 0;
+				border-radius: @wcfInputBorderRadius 0 0 @wcfInputBorderRadius;
+			}
+			
+			span {
+				margin-right: -1px;
+				padding-left: @wcfGapTiny;
+				white-space: nowrap;
+				word-wrap: normal;
+				
+				&.active::after {
+					content: "\f0d7";
+					font-family: FontAwesome;
+					font-size: 14px;
+					margin-left: 7px;
+				}
+			}
+		}
+		
+		.dropdownCaptionTextarea {
+			cursor: pointer;
+			margin: 0 0 -1px 0;
+			padding-left: @wcfGapSmall;
+			padding-right: @wcfGapSmall;
+			
+			&.button {
+				border-radius: @wcfInputBorderRadius @wcfInputBorderRadius 0 0;
+			}
+			
+			&~ .dropdownMenu {
+				top: 10%;
+			}
+			
+			span {
+				white-space: nowrap;
+				word-wrap: normal;
+				
+				&.active::after {
+					content: "\f0d7";
+					font-family: FontAwesome;
+					font-size: 14px;
+					margin-left: 7px;
+				}
+			}
+		}
+	}
+	
+	&.dropdownOpen {
+		.dropdownToggle {
+			//color: @wcfPageLinkHoverColor;
+		}
+		
+		.dropdownMenu {
+			display: block;
+		}
+	}
+	
+	.dropdownToggle {
+		cursor: pointer;
+	}
+}
+
+.dropdownMenu {
+	background-color: @wcfDropdownBackgroundColor;
+	border: 1px solid @wcfDropdownBorderColor;
+	color: @wcfDropdownColor;
+	display: none;
+	float: left;
+	min-width: 160px;
+	padding: 4px 0;
+	position: absolute;
+	text-align: left;
+	z-index: 450;
+	
+	.boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
+	
+	&::after {
+		border: 7px solid transparent;
+		border-bottom-color: @wcfDropdownBorderColor;
+		border-top-width: 0;
+		content: "";
+		display: inline-block;
+		left: 9px;
+		position: absolute;
+		top: -7px;
+		z-index: 100;
+	}
+	
+	&::before {
+		border: 6px solid transparent;
+		border-bottom-color: @wcfDropdownBackgroundColor;
+		border-top-width: 0;
+		content: "";
+		display: inline-block;
+		left: 10px;
+		position: absolute;
+		top: -6px;
+		z-index: 101;
+	}
+	
+	&.dropdownArrowRight {
+		&::after {
+			left: auto;
+			right: 9px;
+		}
+		
+		&::before {
+			left: auto;
+			right: 10px;
+		}
+	}
+	
+	&.dropdownArrowBottom {
+		&::after {
+			border: 7px transparent solid;
+			border-top-color: @wcfDropdownBorderColor;
+			border-bottom-width: 0;
+			bottom: -7px;
+			top: auto;
+		}
+		
+		&::before {
+			border: 6px transparent solid;
+			border-top-color: @wcfDropdownBackgroundColor;
+			border-bottom-width: 0;
+			bottom: -6px;
+			top: auto;
+		}
+	}
+	
+	&.dropdownOpen {
+		display: block;
+	}
+	
+	li {
+		display: block;
+		
+		&:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText),
+		&.dropdownList > li:hover:not(.dropdownDivider),
+		&.dropdownNavigationItem,
+		&.active {
+			background-color: @wcfDropdownHoverBackgroundColor;
+		}
+		
+		&.dropdownDivider {
+			border-top: 1px dotted @wcfDropdownBorderColor;
+			margin: @wcfGapTiny;
+		}
+		
+		&.dropdownText {
+			font-size: @wcfSmallFontSize;
+			padding: @wcfGapTiny @wcfGapMedium;
+		}
+		
+		&.boxFlag {
+			padding-top: 2px;
+		}
+		
+		&.missingValue > span {
+			position: relative;
+			
+			&:after {
+				color: @wcfWarningBackgroundColor;
+				content: @fa-var-exclamation-triangle;
+				font-family: FontAwesome;
+				position: absolute;
+				right: @wcfGapMedium;
+				top: @wcfGapTiny;
+			}
+		}
+		
+		> a,
+		> span {
+			clear: both;
+			color: @wcfDropdownColor;
+			cursor: pointer;
+			display: block;
+			max-width: 350px;
+			overflow: hidden;
+			padding: @wcfGapTiny @wcfGapMedium;
+			text-decoration: none;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			word-wrap: normal;
+			
+			.textShadow(@wcfDropdownBackgroundColor);
+			
+			&:hover {
+				color: @wcfDropdownColor;
+				
+				.textShadow(@wcfDropdownHoverBackgroundColor);
+			}
+			
+			> div > h3 {
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+		
+		> a > small {
+			display: block;
+		}
+		
+		> a + span.badge {
+			display: none;
+		}
+		
+		> .box16 {
+			cursor: pointer;
+			min-height: 0;
+			padding: @wcfGapTiny @wcfGapTiny @wcfGapTiny @wcfGapSmall;
+			
+			> div {
+				margin-left: 21px;
+			}
+		}
+		
+		> label {
+			display: block;
+		}
+		
+		.containerHeadline {
+			margin-bottom: 0;
+			
+			> p {
+				font-size: @wcfSmallFontSize;
+			}
+		}
+	}
+	
+	.scrollableDropdownMenu {
+		max-height: 300px;
+		overflow: auto;
+	}
+}
+
+.boxFlag > .box24, .boxFlag.box24 {
+	min-height: 20px;
+}
+
+@media only screen and (max-width: 800px) {
+	.dropdownMenu {
+		left: 0 !important;
+		right: 0 !important;
+		
+		li {
+			overflow: hidden;
+			
+			> a,
+			> span {
+				max-width: none;
+				white-space: normal;
+			}
+		}
+	}
+}
diff --git a/wcfsetup/install/files/style/ui/dropdownInteractive.less b/wcfsetup/install/files/style/ui/dropdownInteractive.less
new file mode 100644
index 0000000000..70d99921b6
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/dropdownInteractive.less
@@ -0,0 +1,293 @@
+.interactiveDropdown {
+	background-color: @wcfContainerAccentBackgroundColor;
+	border: 1px solid @wcfDropdownBorderColor;
+	color: @wcfDropdownColor;
+	display: block;
+	position: absolute;
+	z-index: 450;
+	
+	.boxShadow(0, 3px, rgba(0, 0, 0, .25), 8px);
+	
+	&:not(.open) {
+		display: none !important;
+	}
+	
+	> .pointer {
+		border: 10px solid transparent;
+		border-bottom-color: @wcfDropdownBorderColor;
+		border-top-width: 0;
+		content: "";
+		display: inline-block;
+		position: absolute;
+		top: -10px;
+		z-index: 100;
+		
+		> span {
+			border: 8px solid transparent;
+			border-bottom-color: @wcfContainerAccentBackgroundColor;
+			border-top-width: 0;
+			content: "";
+			display: inline-block;
+			left: -8px;
+			position: absolute;
+			top: 2px;
+			z-index: 101;
+		}
+	}
+	
+	&.interactiveDropdownUserMenu {
+		> .interactiveDropdownItemsContainer {
+			overflow: visible;
+			max-height: none;
+		}
+		
+		> .pointer {
+			border-width: 0 7px 7px 7px;
+			top: -7px;
+			
+			> span {
+				border-width: 0 5px 5px 5px;
+				left: -5px;
+			}
+		}
+	}
+}
+
+.interactiveDropdownHeader {
+	padding: @wcfGapSmall (@wcfGapSmall + @wcfGapTiny);
+	
+	> .interactiveDropdownTitle {
+		font-family: "Segoe UI Semibold";
+		font-weight: bold;
+	}
+	
+	> .interactiveDropdownLinks {
+		float: right;
+		
+		> li {
+			display: inline-block;
+			margin-left: (@wcfGapSmall + @wcfGapTiny);
+		}
+	}
+	
+	&:after {
+		clear: both;
+	}
+}
+
+.interactiveDropdownItemsContainer {
+	border: 1px solid @wcfDropdownBorderColor;
+	border-width: 1px 0;
+	max-height: 300px;
+	
+	&.ps-container {
+		> .interactiveDropdownItems {
+			position: relative;
+			z-index: 100;
+		}
+		
+		> .ps-scrollbar-y-rail {
+			z-index: 200;
+		}
+	}
+}
+
+.interactiveDropdownItems > li {
+	background-color: @wcfDropdownBackgroundColor;
+	
+	.transition(~"background-color, background-position", .3s, linear);
+	
+	&.loading,
+	&.noItems {
+		font-family: "Segoe UI Light";
+		font-size: 1.2rem;
+		padding: @wcfGapLarge @wcfGapMedium;
+		text-align: center;
+	}
+	
+	&:not(.loading):not(.noItems) {
+		overflow: hidden;
+		padding: @wcfGapSmall (@wcfGapSmall + @wcfGapTiny);
+		position: relative;
+		
+		.textShadow(@wcfContainerAccentBackgroundColor);
+		
+		&:not(:last-child) {
+			border-bottom: 1px solid @wcfDropdownBorderColor;
+		}
+		
+		&:hover {
+			background-color: @wcfDropdownHoverBackgroundColor;
+		}
+		
+		&.interactiveDropdownItemOutstanding {
+			background-color: @wcfDropdownHoverBackgroundColor;
+			background-repeat: no-repeat;
+			background-size: 200%;
+			
+			.linearGradientNative(~"to left, @{wcfDropdownHoverBackgroundColor} 50%, @{wcfDropdownBackgroundColor} 100%");
+			
+			&:hover {
+				background-position: 100%;
+			}
+		}
+		
+		&.interactiveDropdownItemOutstandingIcon > div.box32 {
+			padding-right: 16px + (@wcfGapSmall + @wcfGapTiny);
+		}
+		
+		&.notificationItem {
+			.userLink {
+				font-weight: bold;
+			}
+		}
+		
+		&.interactiveDropdownItemShadow {
+			> .box32 {
+				position: relative;
+			}
+			
+			> .box32,
+			> .interactiveDropdownItemMarkAsRead {
+				pointer-events: none;
+				z-index: 20;
+				
+				a {
+					pointer-events: all;
+				}
+			}
+			
+			> .interactiveDropdownItemShadowLink {
+				bottom: 0;
+				left: 0;
+				position: absolute;
+				right: 0;
+				top: 0;
+				z-index: 10;
+			}
+		}
+		
+		&.groupedNotificationItem > .box32 > .framed > span.fa-users:before {
+			position: relative;
+			top: 3px;
+		}
+	}
+}
+	
+.interactiveDropdownItems.interactiveDropdownItemsUserMenu > li {
+	&.dropdownDivider {
+		padding: 0 !important;
+	}
+	
+	&:not(.dropdownDivider) {
+		border-bottom-width: 0 !important;
+		padding: (@wcfGapSmall + @wcfGapTiny);
+	}
+	
+	> .box32 > .containerHeadline {
+		> h3 {
+			font-family: "Segoe UI Light";
+			font-size: 1.2rem;
+		}
+	}
+	
+	> .box64 {
+		position: relative;
+		
+		> .containerHeadline > .interactiveDropdownUserMenuLinkList {
+			bottom: 0;
+			position: absolute;
+		}
+	}
+	
+	.interactiveDropdownUserMenuLinkList > li {
+		display: inline-block;
+		font-size: .85rem;
+		
+		&:after {
+			content: " \2013 ";
+		}
+		
+		&:last-child:after {
+			content: "";
+		}
+	}
+}
+
+.interactiveDropdownShowAll {
+	display: block;
+	padding: @wcfGapSmall (@wcfGapSmall + @wcfGapTiny);
+	text-align: center;
+}
+
+@media only screen and (min-width: 801px) {
+	.interactiveDropdown {
+		min-width: 350px;
+		
+		> .interactiveDropdownItemsContainer {
+			overflow: hidden;
+			position: relative;
+			
+			> .interactiveDropdownItems > li:not(.loading) {
+				max-width: 400px;
+				box-sizing: border-box;
+				
+				&.interactiveDropdownItemOutstandingIcon {
+					> div.interactiveDropdownItemMarkAsRead {
+						opacity: .6;
+						position: absolute;
+						right: (@wcfGapSmall + @wcfGapTiny);
+						top: 50%;
+						
+						transform: translateY(-50%);
+						-ms-transform: translateY(-50%);
+						-webkit-transform: translateY(-50%);
+						
+						.transition(opacity, .3s, linear);
+					}
+					
+					&:hover > div.interactiveDropdownItemMarkAsRead {
+						opacity: 1;
+					}
+				}
+			}
+		}
+	}
+}
+
+@media only screen and (max-width: 800px) {
+	.interactiveDropdown {
+		border-width: 1px 0;
+		box-sizing: border-box;
+		left: 0 !important;
+		right: 0 !important;
+		width: 100%;
+		
+		> .interactiveDropdownItemsContainer {
+			overflow-x: auto;
+			
+			> .interactiveDropdownItems > li.interactiveDropdownItemOutstandingIcon > div.interactiveDropdownItemMarkAsRead {
+				bottom: 0;
+				position: absolute;
+				right: 0;
+				top: 0;
+				width: (@wcfGapSmall + @wcfGapTiny) + 16px + (@wcfGapSmall + @wcfGapTiny);
+				
+				> a {
+					display: block;
+					height: 100%;
+					text-align: center;
+					
+					> .icon {
+						position: relative;
+						top: 50%;
+						
+						transform: translateY(-50%);
+						-ms-transform: translateY(-50%);
+						-webkit-transform: translateY(-50%);
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/wcfsetup/install/files/style/ui/message.less b/wcfsetup/install/files/style/ui/message.less
new file mode 100644
index 0000000000..45c9b41bd7
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/message.less
@@ -0,0 +1,303 @@
+.messageList {
+	border: 1px solid rgb(79, 129, 189);
+	border-width: 1px 0;
+	margin: 30px 0;
+	
+	> li {
+		margin-top: 0;
+		padding: 40px 0;
+		
+		&:not(:first-child) {
+			border-top: 1px solid rgb(79, 129, 189);
+		}
+	}
+}
+
+.message {
+	display: flex;
+}
+
+/* sidebar */
+.messageSidebar {
+	align-self: flex-start;
+	background-color: rgb(79, 129, 189);
+	border-radius: 3px;
+	color: rgb(255, 255, 255);
+	flex: 0 0 170px;
+	padding: 20px;
+	position: relative;
+	text-align: center;
+	
+	a {
+		color: rgb(255, 255, 255);
+	}
+	
+	.dataList {
+		font-size: .85rem;
+	}
+}
+
+.messageAuthor + * {
+	margin-top: 25px;
+	
+	&:before {
+		border-top: 2px solid rgb(112, 152, 200);
+		content: "";
+		left: 0;
+		margin-top: -10px;
+		position: absolute;
+		right: 0;
+	}
+}
+
+.messageAuthorContainer:not(:last-child) {
+	margin-bottom: 5px;
+}
+
+/* content */
+.messageContent {
+	display: flex;
+	flex: 1 auto;
+	flex-direction: column;
+	margin-left: 30px;
+}
+
+/* content - header */
+.messageHeader {
+	display: flex;
+	flex: 0 0 auto;
+	margin-bottom: 20px;
+}
+
+.messageQuickOptions {
+	.inlineList;
+	
+	flex: 0 0 auto;
+	opacity: .3;
+	order: 2;
+	transition: opacity .2s linear;
+	
+	.badge {
+		color: rgb(255, 255, 255);
+		font-size: .85rem;
+	}
+}
+
+.message:hover .messageQuickOptions {
+	opacity: .6;
+}
+
+.message .messageHeader .messageQuickOptions:hover {
+	opacity: 1;
+}
+
+.messageHeadline {
+	flex: 1 auto;
+	order: 1;
+	
+	> h1 {
+		font-family: "Segoe UI Light";
+		font-size: 1.4rem;
+		margin-bottom: 5px;
+	}
+	
+	> p {
+		font-size: .85rem;
+	}
+}
+
+/* content - body */
+.messageBody {
+	flex: 1 auto;
+}
+
+/* content - footer */
+.messageFooter {
+	flex: 0 0 auto;
+	margin-top: 20px;
+}
+
+.messageFooterNote {
+	border-left: 2px solid rgb(238, 238, 238);
+	padding-left: 5px;
+	
+	&:not(:first-child) {
+		margin-top: 5px;
+	}
+}
+
+.messageSignature {
+	border-top: 1px solid rgb(238, 238, 238);
+	opacity: .6;
+	padding-top: 10px;
+	transition: opacity .2s linear;
+}
+
+.message:hover .messageSignature {
+	opacity: 1;
+}
+
+.message .messageFooter .messageFooterButtons {
+	.inlineList;
+	
+	justify-content: flex-end;
+	margin-top: 10px;
+	opacity: .3;
+	transition: opacity .2s linear;
+	
+	> li:not(:last-child) {
+		margin-right: 5px;
+	}
+}
+
+.message:hover .messageFooterButtons {
+	opacity: .6;
+}
+
+.message .messageFooter .messageFooterButtons:hover {
+	opacity: 1;
+}
+
+/* ### message groups ### */
+.messageGroupList {
+	.columnSubject {
+		> .labelList {
+			float: right;
+			padding-left: 7px;
+		}
+		
+		> h3 {
+			> .messageGroupLink {
+				font-size: @wcfTitleFontSize;
+			}
+			
+			> .badge.label {
+				top: -2px;
+			}
+		}
+		
+		> small {
+			display: block;
+		}
+		
+		> nav {
+			font-size: @wcfSmallFontSize;
+			
+			> ul > li {
+				display: inline;
+			}
+		}
+	}
+	
+	tr {
+		&.new .columnSubject > h3 > .messageGroupLink {
+			font-weight: bold;
+		}
+		
+		&.new .columnAvatar div > p > img,
+		&:hover .columnAvatar div > p > img {
+			opacity: 1;
+		}
+		
+		&.messageDisabled {
+			color: @wcfDisabledColor;
+			
+			> td {
+				background-color: @wcfDisabledBackgroundColor !important;
+			}
+			
+			a:not(.badge) {
+				color: @wcfDisabledColor;
+			}
+		}
+		
+		&.messageDeleted {
+			color: @wcfDeletedColor;
+			
+			> td {
+				background-color: @wcfDeletedBackgroundColor !important;
+			}
+			
+			a:not(.badge) {
+				color: @wcfDeletedColor;
+			}
+		}
+		
+		.columnSubject .statusDisplay .pageNavigation {
+			opacity: 0;
+			
+			.transition(opacity, .2s);
+		}
+		
+		&:hover .columnSubject .statusDisplay .pageNavigation {
+			opacity: 1;
+		}
+		
+		&.new .columnAvatar > div {
+			&::after {
+				color: @wcfLinkColor;
+				content: "\f069";
+				font-family: FontAwesome;
+				font-weight: normal !important;
+				font-style: normal !important;
+				font-size: 14px;
+				position: absolute;
+				text-decoration: none !important;
+				top: -4px;
+				right: -2px;
+				
+				.textShadow(@wcfContainerBackgroundColor);
+			}
+		}
+	}
+	
+	.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;
+			
+			> img {
+				.boxShadow(0, 0, rgba(0, 0, 0, .3), 3px);
+			}
+		}
+	}
+	
+	.columnLastPost {
+		white-space: nowrap;
+		word-wrap: normal;
+		
+		> div > div > small {
+			color: @wcfDimmedColor;
+		}
+	}
+	
+	.messageGroupInfo {
+		.inlineList;
+		
+		font-size: @wcfSmallFontSize;
+		
+		> li:not(:last-child) {
+			margin-right: 5px;
+			
+			&:after {
+				content: " - ";
+			}
+		}
+	}
+}
diff --git a/wcfsetup/install/files/style/ui/poll.less b/wcfsetup/install/files/style/ui/poll.less
new file mode 100644
index 0000000000..423600a0d7
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/poll.less
@@ -0,0 +1,88 @@
+#pollOptionContainer .sortableList {
+	padding: @wcfGapSmall 0;
+	
+	.sortableNode {
+		margin-top: @wcfGapSmall;
+		
+		.sortableButtonContainer > img {
+			cursor: pointer;
+			margin-right: @wcfGapMedium;
+		}
+	}
+}
+
+.pollContainer {
+	float: left;
+	margin: 0 15px 10px 0;
+	max-width: 50%;
+	min-width: 300px;
+	
+	> .formSubmit {
+		background-color: @wcfContainerAccentBackgroundColor;
+		border-top: 1px solid @wcfContainerBorderColor;
+		margin-top: 20px;
+		padding: 10px 0;
+	}
+}
+
+.pollInnerContainer {
+	> dl {
+		flex-wrap: wrap;
+	}
+	
+	> p:first-of-type {
+		margin-top: @wcfGapSmall;
+	}
+}
+
+.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;
+			border-radius: 0 5px 5px 0;
+		}
+		
+		.pollMeter {
+			background-color: @wcfContainerHoverBackgroundColor;
+			border-radius: 0 5px 5px 0;
+			height: 100%;
+			left: 0;
+			position: absolute;
+			top: 0;
+			z-index: -1;
+		}
+		
+		.caption {
+			color: @wcfLinkColor;
+			padding: 2px 0;
+			
+			.optionName {
+				display: block;
+				padding: 0 3.5em 0 @wcfGapSmall;
+			}
+			
+			.relativeVotes {
+				position: absolute;
+				right: 7px;
+				top: 3px;
+			}
+		}
+	}
+}
+
+@media only screen and (max-width: 800px) {
+	.pollContainer > .formSubmit {
+		margin: @wcfGapMedium -@wcfGapMedium -@wcfGapSmall -@wcfGapMedium;
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/ui/popover.less b/wcfsetup/install/files/style/ui/popover.less
new file mode 100644
index 0000000000..839cbf4c94
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/popover.less
@@ -0,0 +1,110 @@
+.popover {
+	background-color: rgba(0, 0, 0, .4);
+	border: 3px solid transparent;
+	border-radius: 3px;
+	opacity: 0;
+	position: absolute;
+	top: 0;
+	vertical-align: middle;
+	visibility: hidden;
+	width: 400px !important;
+	z-index: 500;
+	
+	.boxShadow(0, 1px, rgba(0, 0, 0, .3), 7px);
+	
+	transition: visibility 0s linear .3s, opacity .3s linear;
+	
+	&.active {
+		opacity: 1;
+		visibility: visible;
+		
+		transition-delay: 0s;
+	}
+	
+	&.disableAnimation {
+		transition: none !important;
+		
+		> .popoverContent {
+			transition: none !important;
+		}
+		
+		> .elementPointer > span {
+			transition: none !important;
+		}
+	}
+	
+	> .popoverContent {
+		background-color: @wcfContainerBackgroundColor;
+		border-radius: 3px;
+		box-sizing: border-box;
+		color: @wcfColor;
+		max-height: 300px + (@wcfGapSmall + @wcfGapSmall);
+		min-height: 16px + (@wcfGapSmall + @wcfGapSmall);
+		opacity: 1;
+		overflow: hidden;
+		padding: @wcfGapSmall @wcfGapMedium;
+		
+		transition: opacity .3s linear;
+		
+		&:not(.loading) {
+			~ .fa-spinner {
+				display: none;
+			}
+			
+			~ .elementPointer {
+				> span {
+					border-color: @wcfContainerBackgroundColor transparent;
+					border-style: solid;
+					border-width: 0 5px 5px;
+					left: -5px;
+					opacity: 1;
+					position: absolute;
+					top: 3px;
+					
+					transition: opacity .3s linear;
+				}
+				
+				&.flipVertical > span {
+					border-width: 5px 5px 0;
+					bottom: 3px;
+					top: auto;
+				}
+			}
+		}
+		
+		&.loading {
+			opacity: 0;
+			transition: height .3s linear, opacity 0s;
+			
+			~ .elementPointer > span {
+				opacity: 0;
+				
+				transition: opacity 0s;
+			}
+		}
+	}
+	
+	> .elementPointer {
+		border-color: rgba(0, 0, 0, .4) transparent;
+		border-style: solid;
+		border-width: 0 6px 6px;
+		top: -2px;
+		
+		&.flipVertical {
+			border-width: 6px 6px 0;
+			bottom: -2px;
+			top: auto;
+		}
+	}
+	
+	> .fa-spinner {
+		color: rgba(255, 255, 255, 1);
+		left: 50%;
+		margin-left: -14px;
+		margin-top: -14px;
+		position: absolute;
+		top: 50%;
+		
+		.textShadow(black);
+	}
+}
diff --git a/wcfsetup/install/files/style/ui/redactor.less b/wcfsetup/install/files/style/ui/redactor.less
new file mode 100644
index 0000000000..1d992f7b08
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/redactor.less
@@ -0,0 +1,424 @@
+@font-face {
+	font-family: 'RedactorFont';
+	src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AABIoAAoAAAAAEeAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAADgEAAA4Bg0Rie09TLzIAAA74AAAAYAAAAGAIIvzVY21hcAAAD1gAAABMAAAATBpVzHZnYXNwAAAPpAAAAAgAAAAIAAAAEGhlYWQAAA+sAAAANgAAADYACVb9aGhlYQAAD+QAAAAkAAAAJAPhAgVobXR4AAAQCAAAAJAAAACQQQED3m1heHAAABCYAAAABgAAAAYAJFAAbmFtZQAAEKAAAAFmAAABZhHEcG1wb3N0AAASCAAAACAAAAAgAAMAAAEABAQAAQEBDVJlZGFjdG9yRm9udAABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeKZviU+HQFHQAAAT8PHQAAAUQRHQAAAAkdAAAN+BIAJQEBDRkbHSAlKi80OT5DSE1SV1xhZmtwdXp/hImOk5idoqessba7wFJlZGFjdG9yRm9udFJlZGFjdG9yRm9udHUwdTF1MjB1RTYwMHVFNjAxdUU2MDJ1RTYwM3VFNjA0dUU2MDV1RTYwNnVFNjA3dUU2MDh1RTYwOXVFNjBBdUU2MEJ1RTYwQ3VFNjBEdUU2MEV1RTYwRnVFNjEwdUU2MTF1RTYxMnVFNjEzdUU2MTR1RTYxNXVFNjE2dUU2MTd1RTYxOHVFNjE5dUU2MUF1RTYxQnVFNjFDdUU2MUR1RTYxRXVFNjFGAAACAYkAIgAkAgABAAQABwAKAA0AQQCYAPEBSQH6Ai8CxwMhA98EGwTXBYEFkQW0BfEGLwagBxEHOgf0CLUJaQmsCfwKhAq5C0QLdAuiC9AMAQxo/JQO/JQO/JQO+5QOi7AVi/gB+JSLi/wB/JSLBfhv990V/EqLi/u5+EqLi/e5Bfu4+5QVi/dv9yb7Avsm+wEFDvcm+AIV+AKLi0L8AouL1AWL+wIV+AKLi0L8AouL1AWL+wIV+AKLi0L8AouL1AX7JvdwFdSLi0JCi4vUBYv7AhXUi4tCQouL1AWL+wIV1IuLQkKLi9QFDviLsBVky0yq+0KWCIshBYuLQMb7LPcT9z33GsW4i4sIiyEF92Wr9wT7QV77Cgj7yfdpFYvIBYuLb3ImSOFBtnqLiwiLfIvXBe6F9yJ7nGSl0PsO6Ps2YwgO9wLUFfe4i4tn+7iLi68FysoVnHmngrGLsounlJydnJ2Up4uyCIv3SUyLi/tXBYt8hoCDg4ODgId8i32Lf4+Dk4OTh5aLmgiL91dLi4v7SQWLZJRvnXkIDvfd+EoVrouL+yrWi4tr+wKLi/dKBbH7kxX3JS/7JS+L1fsDi4uw9wOLi9QF+3LTFfsl5/cl54tC9wOLi2b7A4uLQQWXNhWTg499i3iLf4mBhoSGg4SHgYmOio6KjYiNiI6GjoQIpklri3i5BYuMio2KjYaZhZKEiwiBi4tDbouL90q1iwWfi5mHk4MIVEcVmYsFk4uRjY+Pjo+NkYuUi5SJkoiOh4+FjYOLCH2Li1kFDve393oVRYuu9wyu+wwF+0r7DRXVi6LU7ouiQtWLJve6MIsm+7oFjGcV97iLi0L7uIuL1AUOi7AVi/gB+JSLi/wB/JSLBfdLrxX3JouL1Psmi4tCBYv3AhX3JouL1Psmi4tCBWb3SxX7AYuLQvcBi4vUBYv7AhX7AYuLQvcBi4vUBYv7AhX7AYuLQvcBi4vUBbD3cBWLQvcmi4vU+yaLBfe4ixX7AYuLQvcBi4vUBYv7AhX7AYuLQvcBi4vUBYv7AhX7AYuLQvcBi4vUBQ74lPdzFfss+xNAUIuLCIv1BftCgExsZEte9wr3BPdB92VrCIv1BYuLxV73PfsaCPxYLBWcsvcim+6RCIs/i5oFi4u2nOHVJs5vpIuLCItOBfs2s/sOLqVGCA73zfe2FXNsgGiLY4tpk3Ccd513n4Gji6CLnJKZmpqakpyLn4uehZt+mH+ZfJJ7i32LgIeChQiIiYmKiYuKi4mMioyKjoqPi5GLpJOknKOco6KcqJYIi6EFWXhlcnRrCPthixV0bH9oi2OLaZNwnXecd6CBoougi5ySmpqZmpKci5+LnoWbfph/mX2Seot+i3+IgoQIiImJioqLiYuKjIqMiY6Kj4uRi6SUpJujnKOinKmWCIuhBVh4ZnJzawgOi/gCFfiUi4tC/JSLi9QF90v7AhX33YuLQvvdi4vUBYv7AhX33YuLQvvdi4vUBWZCFYv3S/snL/cnMAUO9yb4AhX4AouLQvwCi4vUBYv7AhX4AouLQvwCi4vUBYv7AhX4AouLQvwCi4vUBfsh9hXPi4ufc4uL6HeLdYWLd6GRi0Jzi4t3Bav7JRWXl5KTjY6PkI2PjY+Mj4yPi5CLlIiThJCFkYKOf4uHi4aKhoqGioaKhokIi3YFkI6QjZCNkIyPjI+LkIuPio6IjoiMh4uGi4iLiImIiYeJh4eHiIiDgX18CIB+i3jPi4ufXosFjo+QkJGRCIuLBQ74AtQVcItyk3aYCIu/qYsFmIWZh5uLvYu0sIu5i7pisFmLe4t9h36FCG2Li78FoJikk6aL3IvMSYs6iztKSTqLCPtL90sV9yaLi0L7JouL1AVmuhV8i3yHfoUIbYuLcwWAfYR6i3iLeZJ5ln0Ii3SpiwWYhZqHmoubi5mPmJEIqYuLVwV2fnKDcIs6i0rNi9uL3MzN3Iumi6SDoH4Ii1dtiwV+kX2Pe4sIDov3lBX4lIuLQvyUi4vUBQ73m/ftFWL7a0qLgFL3VYuWxEuLtPdry4uWxPtVi4BSzIsFDov4AhX4lIuLQvyUi4vUBfdL+wIV992Li0L73YuL1AWL+wIV992Li0L73YuL1AX7S0IVi/dL9ycv+ycwBQ6LsBWL+AH4lIuL/AH8lIsF+G/33RX8SouL+7n4SouL97kF+0r7SxWvi7vqySyLQvwCi4vU9wL3JvcC+yYFDvhv+EsVi/tw+2/3cPdviwVhYBWShIyChoUI+wf7BwWFhoKMhJKEkoqUkJEI9wj3BwWQkJWKkYQI/CD8HxX3b4r7b/dvi/tuBbW1FZKElYqQkAj3B/cHBZCQipWEkoSRgo2FhQj7BvsHBYWGjYGRhQgO97n3kxWL93D3b/tv+2+KBbW3FYSSipSQkQj3B/cGBZGRlIqShJKEjIGGhgj7CPsHBYaGgYyFkgj7CPsJFftvjPdv+3CL928FYWEVhJKBjIaGCPsH+wcFhoaMgZKEkoSUipGRCPcG9wYFkZGJlIWSCA733bAVi/fdZ4uL+91Bi4v3JgVPi1q8i8iLx7y8x4sI9yeLi/wBZosFDvgm9yYV1Ysv+yUv9yXVi4v3J0GL5/cl5/slQYuL+ycF+3+EFYWCgoSBhoGGgIh/i3WLeZF+mH6XhZ2Looujkp2blpqXopGriwiwi4uUBYuUiJKFj4SQgo1/i3+Lf4l/iH+If4V+hAiLugWWkJeOl46XjZiMmIusi6KEmH6ZfZFyi2gIi/sMV4uLowWL1hV2iwV3i32IhIaDhoeCi36LgY6EkIWQhpOIlIuZi5aQkpaTlo+ai58Ii48FDvdC91kVVoum9wml+wkF+x37ChXDi5zS1oudRMOLPvezR4s++7MF+BPwFYuHBYt3h3uDgIOAf4V9i4GLg46GkYWRiJOLlIuYj5WTkJSQmY6giwihiwWt7RV9mXOSaYt8i36Kfol/iH6Hf4YIi1sFmJOYkJiPl46YjZmLl4uViJGHkoaOhIuCCIuCZYsFaYtyhXt/e3+DeItyi3SReZl+mH6ehaOLmIuXjZWQlpCTk5KUCItzwouL9w8Fi6+EpX2ZCA7U95QV+AKLi2b8AouLsAX3U1oVloeUhZGEkYSOgouCi36GgYKEgoR/iHuLe4t6jnuRepB6lHqXCItKBZqEm4Wch5yIm4mci7OLqZOfm5+alKOLq4ujhZ9/mn6bd5dwlAhvlgV3kX6ShZGFkIiTi5OLl4+UlJGTkZeOm4uai5mImoaZhpqEmYIIi8gFfJF8kHuPfI58jXuLaYtxg3h6d3uCdItui3WQeZd+l32hf61+CKuABQ6L928Vr6n3S/snZ277S/cmBYuLFfdL9yevbvtL+ydnqAX4lIsVZ6n7S/snr273S/cmBYuLFftL9ydnbvdL+yevqAUOi2YVi/iU+JSLi/yU/JSLBfhv+HAV/EqLi/xL+EqLi/hLBUL7JhX7uIuL1Pe4i4tCBYv7AhX7uIuL1Pe4i4tCBYv7AhX7uIuL1Pe4i4tCBQ73jPdyFZ6LmYiUg5ODj36LeYt6h3+DhIOEfYd3iwhii4vstIsFi/cVFZuLloiShJKFjoKLfYt+iIGEhYSFgIh7iwhii4vYtIsFJvuqFfCLBbWLqJKemp2ZlKKLqoulhZ9/mn+ZeZRzjZ+NmpKVl5aXkJuLoIungqB5mHqZcJJoiwgmi4v73QUOsIsVi/hL+EqLi/xL/EqLBfeR+AIVR4s/+7nDi5vT1oucQ8KLQPe5BWlWFaX7DFeLpfcMBQ74UPeKFfso+yiHjwV9h3uNfJMIamupbXx8BWJiSYtitAh8mgVitIvNtLQI92v3awW0tM2LtGIImnwFtGKLSWJiCGb3EhVuqFyKbm4I+1n7WgVtbotcp26ob7qLqKkIsrEFg4+EkIWScKaGsJ+gCN3dBZuapIyifwj7EvsRsWb3GvcaBaiojLpuqAgOi/gCFfiUi4tC/JSLi9QF9yb7AhX4AouLQvwCi4vUBfcn+wIV92+Li0L7b4uL1AUOi/gCFfiUi4tC/JSLi9QFi/sCFfgBi4tC/AGLi9QFi/sCFfdwi4tC+3CLi9QFDov4AhX4k4uLQvyTi4vUBYv7AhX4k4uLQvyTi4vUBYv7AhX4lIuLQvyUi4vUBQ73AvgCFfe4i4tC+7iLi9QF+wL7AhX4lIuLQvyUi4vUBfcC+wIV97iLi0L7uIuL1AUO1LIVi9RCi4v3ufhLi4tB1IuL+7j8S4sF99333RX8AYuL+3D4AYuL93AF1UIVZouL+0v73YuLZvgCi4v3cAX7b0IV+0yL5/cB5/sBBfcBZhX7uYuLsPe5i4tmBWL3AhW0QkKLq9QFDviUFPiUFYsMCgAAAAADAgABkAAFAAABTAFmAAAARwFMAWYAAAD1ABkAhAAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOYfAeD/4P/gAeAAIAAAAAEAAAAAAAAAAAAAACAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAOAAAAAoACAACAAIAAQAg5h///f//AAAAAAAg5gD//f//AAH/4xoEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAQAAhlBJsl8PPPUACwIAAAAAAM91iyUAAAAAz3WLJf///9sCAAHbAAAACAACAAAAAAAAAAEAAAHg/+AAAAIA//8AAAIAAAEAAAAAAAAAAAAAAAAAAAAkAAAAAAAAAAAAAAAAAQAAAAIAAAACAAAAAgAAAAIAAG4CAAAAAgAAbQIAAAACAAAJAgAASQIA//8CAAAAAgAAAAIAAAACAACSAgAAAAIAAAACAAAlAgAAAAIAAG4CAAAlAgAAJQIAAEkCAAAAAgAAAAIAAJMCAAAlAgAAQgIAAAACAAAAAgAAAAIAAAACAAAAAABQAAAkAAAAAAAOAK4AAQAAAAAAAQAYAAAAAQAAAAAAAgAOAGoAAQAAAAAAAwAYAC4AAQAAAAAABAAYAHgAAQAAAAAABQAWABgAAQAAAAAABgAMAEYAAQAAAAAACgAoAJAAAwABBAkAAQAYAAAAAwABBAkAAgAOAGoAAwABBAkAAwAYAC4AAwABBAkABAAYAHgAAwABBAkABQAWABgAAwABBAkABgAYAFIAAwABBAkACgAoAJAAUgBlAGQAYQBjAHQAbwByAEYAbwBuAHQAVgBlAHIAcwBpAG8AbgAgADEALgAwAFIAZQBkAGEAYwB0AG8AcgBGAG8AbgB0UmVkYWN0b3JGb250AFIAZQBkAGEAYwB0AG8AcgBGAG8AbgB0AFIAZQBnAHUAbABhAHIAUgBlAGQAYQBjAHQAbwByAEYAbwBuAHQARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');
+	font-weight: normal;
+	font-style: normal;
+}
+.re-icon {
+	font-family: 'RedactorFont';
+	
+	> i:before {
+		position: relative;
+		font-size: 14px;
+	}
+}
+
+.re-video:before { content: "\e600"; }
+.re-unorderedlist:before { content: "\e601"; }
+.re-undo:before { content: "\e602"; }
+.re-underline:before { content: "\e603"; }
+.re-textdirection:before { content: "\e604"; }
+.re-fontcolor:before { content: "\e605"; }
+.re-table:before { content: "\e606"; }
+.re-redo:before { content: "\e607"; }
+.re-quote:before { content: "\e608"; }
+.re-outdent:before { content: "\e609"; }
+.re-orderedlist:before { content: "\e60a"; }
+.re-link:before { content: "\e60b"; }
+.re-horizontalrule:before { content: "\e60c"; }
+.re-italic:before { content: "\e60d"; }
+.re-indent:before { content: "\e60e"; }
+.re-image:before { content: "\e60f"; }
+.re-fullscreen:before { content: "\e610"; }
+.re-normalscreen:before { content: "\e611"; }
+.re-formatting:before { content: "\e612"; }
+.re-fontsize:before { content: "\e613"; }
+.re-fontfamily:before { content: "\e614"; }
+.re-deleted:before { content: "\e615"; }
+.re-html:before { content: "\e616"; }
+.re-clips:before { content: "\e617"; }
+.re-bold:before { content: "\e618"; }
+.re-backcolor:before { content: "\e619"; }
+.re-file:before { content: "\e61a"; }
+.re-alignright:before { content: "\e61b"; }
+.re-alignment:before, .re-alignleft:before { content: "\e61c"; }
+.re-alignjustify:before { content: "\e61d"; }
+.re-aligncenter:before { content: "\e61e"; }
+.re-gallery:before { content: "\e61f"; }
+
+.redactor-box {
+	border: 1px solid @wcfContainerBorderColor;
+	border-radius: 3px 3px 0 0;
+	font-size: 0;
+	line-height: @wcfBaseLineHeight;
+	position: relative;
+	
+	& + .messageTabMenu {
+		padding: 0;
+	}
+	
+	& + .innerError,
+	> .innerError {
+		border-radius: 0;
+		box-shadow: none;
+		display: block;
+		margin-top: -1px;
+	}
+	
+	> .innerError {
+		margin: -1px;
+	}
+	
+	> .redactorAutosaveNotice {
+		background-color: @wcfContainerBackgroundColor;
+		border: 1px solid @wcfContainerBorderColor;
+		border-width: 1px 0 0 1px;
+		bottom: 0;
+		font-size: 1rem;
+		opacity: 0;
+		padding: @wcfGapSmall;
+		position: absolute;
+		right: 0;
+		transition: visibility 0s linear .3s, opacity .3s linear;
+		visibility: hidden;
+		
+		&.open {
+			opacity: 1;
+			visibility: visible;
+			transition-delay: 0s;
+		}
+		
+		&.redactorAutosaveNoticeIcons > span.fa-check {
+			margin-right: @wcfGapSmall;
+		}
+		
+		> span.redactorAutosaveMessage {
+			padding: 0 @wcfGapSmall;
+		}
+	}
+}
+
+.redactor-editor {
+	max-height: 500px;
+	padding: 10px;
+	position: relative;
+	outline: none;
+	overflow: auto;
+	
+	& + textarea {
+		border-width: 0;
+		box-shadow: none;
+		font-size: 1rem;
+		line-height: @wcfBaseLineHeight;
+		outline: none;
+		padding: 10px;
+		resize: vertical;
+		
+		&:focus {
+			box-shadow: none;
+		}
+	}
+	
+	ul,
+	ol {
+		.nativeList;
+	}
+	
+	ul {
+		list-style-type: disc;
+	}
+	
+	ol {
+		list-style-type: decimal;
+	}
+	
+	img {
+		border: 1px solid transparent;
+		max-width: 100%;
+	}
+	
+	table {
+		border-collapse: collapse;
+		font-size: 14px;
+		line-height: 1.6em;
+		
+		td {
+			border: 1px solid #ddd;
+			padding: 5px;
+			vertical-align: top;
+		}
+	}
+	
+	.quoteBox {
+		clear: none;
+		
+		> header {
+			position: relative;
+			
+			> .redactorQuoteEdit {
+				bottom: -@wcfGapSmall;
+				left: -@wcfGapMedium;
+				right: -@wcfGapMedium;
+				top: -@wcfGapMedium;
+				padding-top: @wcfGapMedium;
+				padding-left: @wcfGapMedium;
+				position: absolute;
+			}
+		}
+	}
+	
+	.codeBox {
+		overflow: hidden;
+		position: relative;
+		
+		.redactorEditCodeBox {
+			background-color: rgba(255, 255, 255, .8);
+			bottom: 0;
+			left: 0;
+			opacity: 0;
+			position: absolute;
+			right: 0;
+			text-align: center;
+			top: 0;
+			z-index: 200;
+			
+			.transition(opacity, .3s, linear);
+			
+			> div {
+				cursor: pointer;
+				font-size: 1.4rem;
+				left: 50%;
+				padding: 1em 3em;
+				position: absolute;
+				top: 50%;
+				
+				transform: translate(-50%, -50%);
+				-ms-transform: translate(-50%, -50%);
+			}
+		}
+		
+		&:hover .redactorEditCodeBox {
+			opacity: 1;
+		}
+		
+		ol {
+			margin-bottom: 0;
+			margin-top: 0;
+		}
+	}
+	
+	&.msie .quoteBox {
+		/* resets 'hasLayout' causing IE to display resize handle and wonky editing behavior */
+		min-height: auto;
+	}
+}
+
+@media all and (min-width: 801px) {
+	.redactor-editor {
+		font-size: 1rem;
+	}
+}
+
+/* disable auto zoom in mobile safari */
+@media only screen and (max-width: 800px) {
+	.redactor-editor + textarea {
+		font-size: 16px;
+		max-height: 500px;
+	}
+}
+
+.redactor-toolbar {
+	background: repeating-linear-gradient(0deg, @wcfContainerBorderColor 0px, @wcfContainerBorderColor 3%, @wcfContainerBackgroundColor 3%, @wcfContainerAccentBackgroundColor 100%);
+	background-size: 100% 31px;
+	
+	> li {
+		display: inline-block;
+		margin-bottom: 1px;
+		vertical-align: middle;
+		
+		&:last-of-type,
+		&.separator {
+			border-right: 1px solid @wcfContainerBorderColor;
+		}
+		
+		> a {
+			box-sizing: border-box;
+			color: @wcfButtonColor;
+			display: block;
+			font-size: 14px;
+			height: 30px;
+			outline: none;
+			padding: 6px 0;
+			text-align: center;
+			text-decoration: none;
+			width: 30px;
+			
+			.textShadow(@wcfButtonBackgroundColor);
+			
+			&.redactor-button-disabled,
+			&.redactor-button-disabled:before,
+			&.redactor-button-disabled > i:before {
+				color: fade(@wcfColor, 40%);
+				cursor: default;
+			}
+			
+			&:before {
+				color: @wcfColor;
+			}
+			
+			> i {
+				height: 14px;
+				width: 12px;
+				
+				&:before {
+					color: @wcfColor;
+				}
+			}
+			
+			&:not(.redactor-button-disabled):hover,
+			&.redactor-act,
+			&.dropact {
+				background-color: @wcfContainerHoverBackgroundColor;
+				
+				.textShadow(@wcfButtonHoverBackgroundColor);
+				
+				> i {
+					text-shadow: none;
+				}
+			}
+			
+			&.fa-redactor-btn:before {
+				content: "";
+			}
+			
+			&.redactor-btn-image {
+				background-position: center;
+				background-repeat: no-repeat;
+				
+				&.redactor-button-disabled {
+					opacity: .5;
+				}
+			}
+		}
+	}
+}
+
+.redactor-toolbar-tooltip {
+	.balloonTooltip;
+	
+	opacity: 1;
+	visibility: visible;
+	
+	&:before {
+		border-color: @wcfTooltipBackgroundColor transparent;
+		border-style: solid;
+		border-width: 0 5px 5px;
+		content: "";
+		display: block;
+		left: 50%;
+		position: absolute;
+		top: -5px;
+		transform: translateX(-50%);
+	}
+}
+
+#redactor-image-box {
+	border: 1px dashed rgba(0, 0, 0, .5);
+	display: inline-block;
+	line-height: 0;
+	max-width: 100%;
+	position: relative;
+	
+	> img {
+		border-width: 0;
+		opacity: .5;
+	}
+}
+
+#redactor-image-editter {
+	.balloonTooltip;
+	
+	cursor: pointer;
+	left: 50%;
+	line-height: @wcfSmallFontSize;
+	margin-top: -13px;
+	opacity: 1;
+	top: 50%;
+	visibility: visible;
+	z-index: 5;
+}
+
+#redactor-image-resizer {
+	background-color: rgba(0, 0, 0, 1);
+	border: 1px solid rgba(255, 255, 255, 1);
+	bottom: -4px;
+	cursor: nw-resize;
+	height: 8px;
+	line-height: 1;
+	position: absolute;
+	right: -5px;
+	width: 8px;
+	z-index: 10;
+}
+
+.redactorAttachmentContainer {
+	background-color: rgba(255, 255, 255, 1);
+	border: 1px solid rgba(238, 238, 238, 1);
+	border-top-width: 0;
+	padding: 7px 14px 7px;
+}
+
+.redactor-dropdown-box-fontcolor {
+	width: 200px;
+	
+	> li.redactorColorPallet {
+		padding: 0 4px;
+		
+		&:hover {
+			background-color: @wcfDropdownBackgroundColor !important;
+		}
+		
+		> a {
+			border: 2px solid rgba(255, 255, 255, 1);
+			border-bottom-width: 0;
+			display: inline-block;
+			font-size: 0;
+			height: 20px;
+			padding: 0;
+			margin: 0;
+			width: 20px;
+		}
+	}
+}
+
+.redactorDropArea {
+	background-color: rgba(255, 255, 204, 1);
+	border: 5px dashed rgba(255, 204, 0);
+	box-sizing: border-box;
+	font-size: 1.4rem;
+	position: absolute;
+	text-align: center;
+	vertical-align: middle;
+	z-index: 360;
+	
+	&.active {
+		background-color: #CEF6CE;
+		border-color: #04B404;
+	}
+}
+
+.redactor-link-tooltip {
+	background-color: @wcfTooltipBackgroundColor;
+	border-radius: 6px;
+	color: @wcfTooltipColor;
+	font-size: @wcfSmallFontSize;
+	padding: 5px 10px 7px;
+	position: absolute;
+	z-index: 800;
+	
+	.boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
+	
+	> a {
+		color: @wcfTooltipColor;
+	}
+}
diff --git a/wcfsetup/install/files/style/ui/spinner.less b/wcfsetup/install/files/style/ui/spinner.less
new file mode 100644
index 0000000000..b9579631ab
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/spinner.less
@@ -0,0 +1,37 @@
+.spinner {
+	border: 1px solid rgba(0, 0, 0, .3);
+	border-radius: 6px;
+	box-sizing: border-box;
+	color: #fff;
+	left: 50%;
+	opacity: 0;
+	padding: 7px;
+	position: fixed;
+	text-align: center;
+	top: 200px;
+	visibility: hidden;
+	z-index: 401;
+	
+	transform: translateX(-50%);
+	
+	.boxShadow(0, 1px, rgba(0, 0, 0, .5), 7px);
+	.linearGradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
+	
+	transition: visibility 0s linear .1s, opacity .1s linear;
+	
+	&.active {
+		opacity: 1;
+		visibility: visible;
+		
+		transition-delay: 0s;
+	}
+	
+	> .icon {
+		color: #fff;
+	}
+	
+	> span:not(.icon) {
+		display: block;
+		margin-top: @wcfGapSmall;
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/ui/tabMenu.less b/wcfsetup/install/files/style/ui/tabMenu.less
new file mode 100644
index 0000000000..cc00ad469c
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/tabMenu.less
@@ -0,0 +1,46 @@
+.tabMenuContainer {
+	> .tabMenu {
+		margin-bottom: 20px;
+		position: relative;
+		
+		> ul {
+			.inlineList;
+			
+			> li {
+				&:not(:last-child) {
+					margin-right: 20px;
+				}
+				
+				&.active > a {
+					cursor: default;
+				}
+				
+				> a {
+					display: block;
+					padding: 5px 0;
+				}
+			}
+		}
+		
+		> span {
+			border-top: 1px solid rgb(231, 76, 60);
+			bottom: 0;
+			position: absolute;
+			transition: transform .2s linear, width .2s linear;
+		}
+	}
+	
+	> .tabMenuContent {
+		border: 1px solid rgb(79, 129, 189);
+		border-radius: 3px;
+		padding: 10px;
+		
+		border-width: 0;
+		border-radius: 0;
+		padding: 0;
+		
+		&.hidden {
+			display: none;
+		}
+	}
+}
diff --git a/wcfsetup/install/files/style/ui/tabMenuMessage.less b/wcfsetup/install/files/style/ui/tabMenuMessage.less
new file mode 100644
index 0000000000..1bed1d7468
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/tabMenuMessage.less
@@ -0,0 +1,169 @@
+.messageTabMenu {
+	border: 1px solid @wcfContainerBorderColor;
+	border-top-width: 0;
+	border-radius: 0 0 3px 3px;
+	line-height: @wcfBaseLineHeight;
+	
+	> div,
+	> fieldset{
+		background-color: @wcfContainerBackgroundColor;
+		border-width: 0;
+		border-radius: 0;
+		border-top: 1px solid @wcfContainerBorderColor;
+		display: none;
+		padding: 15px 10px;
+		position: static;
+		
+		&.active {
+			display: block;
+		}
+	}
+	
+	> div {
+		> nav {
+			background-color: @wcfContainerBackgroundColor;
+			border-bottom: 1px solid @wcfContainerBorderColor;
+			margin: -14px -21px 14px -21px;
+			padding: @wcfGapTiny @wcfGapSmall;
+			
+			ul {
+				display: inline-block;
+				font-size: 0;
+				white-space: nowrap;
+				
+				li {
+					display: inline-block;
+					outline: 0;
+					vertical-align: baseline;
+					
+					&.active a,
+					&.active a:hover {
+						color: @wcfButtonPrimaryColor;
+						cursor: default;
+					}
+					
+					a {
+						color: @wcfButtonColor;
+						display: block;
+						font-size: @wcfSmallFontSize;
+						outline: 0;
+						padding: 0 @wcfGapSmall;
+						
+						-webkit-touch-callout: none;
+						-webkit-user-select: none;
+						-khtml-user-select: none;
+						-moz-user-select: none;
+						-ms-user-select: none;
+						user-select: none;
+						
+						&:hover {
+							color: @wcfButtonHoverColor;
+							text-decoration: none;
+						}
+					}
+					
+					&:not(:last-child) {
+						padding-right: @wcfGapTiny;
+					}
+					
+					&.dropdown > a {
+						font-size: 1.0rem;
+						padding: 4px 7px 2px;
+					}
+				}
+			}
+		}
+		
+		> div,
+		> fieldset {
+			border-top-width: 0;
+		}
+	}
+}
+
+.messageTabMenuNavigation > ul {
+	background-color: @wcfContainerBackgroundColor;
+	font-size: 0;
+	white-space: nowrap;
+	
+	> li {
+		display: inline-block;
+		
+		> a {
+			border-right: 1px solid @wcfContainerBorderColor;
+			border-bottom: 1px solid transparent;
+			color: @wcfButtonColor;
+			display: block;
+			font-size: 1rem;
+			line-height: @wcfBaseLineHeight;
+			margin-bottom: -1px;
+			padding: 7px 14px 8px 14px;
+			text-decoration: none;
+			
+			-webkit-touch-callout: none;
+			-webkit-user-select: none;
+			-khtml-user-select: none;
+			-moz-user-select: none;
+			-ms-user-select: none;
+			user-select: none;
+			
+			&:hover {
+				color: @wcfLinkColor;
+			}
+			
+			> span.icon {
+				display: none;
+			}
+		}
+		
+		&.active {
+			> a {
+				background-color: @wcfContainerBackgroundColor;
+				color: @wcfLinkColor;
+			}
+		}
+	}
+}
+
+@media only screen and (max-width: 800px) {
+	.redactor-toolbar > li > a:hover {
+		background-color: transparent !important;
+	}
+	
+	.messageTabMenu {
+		> nav > ul > li:not(.active) > a {
+			> span.icon {
+				display: block;
+			}
+			
+			> span:not(.icon) {
+				display: none;
+			}
+		}
+		
+		> div > nav {
+			margin: (@wcfGapTiny - @wcfGapSmall) -@wcfGapSmall @wcfGapSmall -@wcfGapSmall;
+		}
+	}
+}
+
+/* fix for Firefox - fieldsets are set to display: table-column which cause an odd gap between the fieldset
+   and the next element, similar to gaps with display: inline-block and font-size > 0 */
+@-moz-document url-prefix() {
+	fieldset + .messageTabMenu {
+		margin-top: -3px;
+	}
+}
+
+.uploadButton {
+	overflow: hidden;
+	position: relative;
+	
+	> input {
+		left: -4px;
+		opacity: 0;
+		padding: 4px;
+		position: absolute;
+		top: -2px;
+	}
+}
diff --git a/wcfsetup/install/files/style/ui/table.less b/wcfsetup/install/files/style/ui/table.less
new file mode 100644
index 0000000000..bbc5111265
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/table.less
@@ -0,0 +1,216 @@
+.table {
+	border-spacing: 0;
+	width: 100%;
+	
+	/* cells */
+	th,
+	td {
+		padding: @wcfGapSmall;
+		text-align: left;
+		vertical-align: middle;
+		// non standard only webkit
+		word-break: break-word;
+		
+		> label {
+			cursor: pointer;
+			display: block;
+			margin: -@wcfGapSmall;
+			padding: @wcfGapSmall;
+			
+			> input[type="checkbox"] {
+				margin: -1px 3px 0;
+			}
+		}
+	}
+	
+	/* headline */
+	th {
+		border-right: 1px solid rgba(0, 0, 0, .2);
+		color: @wcfTabularBoxColor;
+		font-size: @wcfSmallFontSize;
+		font-weight: bold;
+		white-space: nowrap;
+		word-wrap: normal;
+		
+		.textShadow(@wcfTabularBoxBackgroundColor);
+		.linearGradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
+		
+		> a {
+			color: @wcfTabularBoxColor;
+			display: block;
+			margin: -@wcfGapSmall;
+			position: relative;
+			
+			&:hover {
+				text-decoration: none;
+			}
+			
+			> img {
+				margin: -5px 0;
+			}
+		}
+		
+		&.active > a {
+			background-color: rgba(0, 0, 0, .1);
+			color: @wcfTabularBoxHoverColor;
+			
+			.boxShadowInset(0, 10px, rgba(0, 0, 0, .1), 10px, -10px);
+		}
+		
+		&.ASC > a,
+		&.DESC > a {
+			padding-right: 20px;
+		}
+		
+		&.ASC > a::after,
+		&.DESC > a::after {
+			display: inline-block;
+			font-family: FontAwesome;
+			font-size: 14px;
+			position: absolute;
+			margin-left: @wcfGapTiny;
+			
+			.textShadow(@wcfTabularBoxBackgroundColor);
+		}
+		
+		&.ASC > a::after {
+			content: "\f0de";
+			top: 8px;
+		}
+		
+		&.DESC > a::after {
+			content: "\f0dd";
+			top: 3px;
+		}
+		
+		&:hover > a {
+			background-color: rgba(0, 0, 0, .2);
+			color: @wcfTabularBoxHoverColor;
+		}
+		
+		> * {
+			padding: @wcfGapSmall;
+		}
+	}
+	
+	/* content */
+	td {
+		background-color: @wcfContainerBackgroundColor;
+		
+		.transition(background, .1s);
+		
+		&.columnMark,
+		&.columnStatus {
+			text-align: center;
+			width: 1px;
+			white-space: nowrap;
+			word-wrap: normal;
+		}
+		
+		&.columnDigits,
+		&.columnID {
+			text-align: right;
+			width: 1px;
+			white-space: nowrap;
+			word-wrap: normal;
+		}
+		
+		&.columnIcon {
+			text-align: left;
+			width: 1px;
+			white-space: nowrap;
+			word-wrap: normal;
+		}
+		
+		&.columnTitle {
+			font-weight: bold;
+			text-align: left;
+		}
+		
+		&.columnText {
+			font-weight: normal;
+			text-align: left;
+			max-width: 20%;
+		}
+		
+		&.columnDate {
+			font-size: @wcfSmallFontSize;
+			text-align: right;
+			width: 1px;
+			white-space: nowrap;
+			word-wrap: normal;
+		}
+		
+		&.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 {
+		float: right;
+		
+		.statusIcons {
+			float: right;
+			margin-left: @wcfGapSmall;
+			
+			li {
+				display: inline-block;
+			}
+		}
+	}
+	
+	tr {
+		&.jsMarked {
+			color: @wcfSelectedColor;
+			
+			> td {
+				background-color: @wcfSelectedBackgroundColor !important;
+			}
+			
+			a:not(.badge) {
+				color: @wcfSelectedColor;
+			}
+		}
+	}
+}
diff --git a/wcfsetup/install/files/style/ui/tabularBox.less b/wcfsetup/install/files/style/ui/tabularBox.less
new file mode 100644
index 0000000000..4f6b52b17e
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/tabularBox.less
@@ -0,0 +1,103 @@
+.tabularBox {
+	> .content {
+		border-width: 0;
+	}
+	
+	.tabularList {
+		background-color: rgba(255, 255, 255);
+		display: flex;
+		flex-direction: column;
+		
+		> li {
+			flex: 0 0 auto;
+			padding: 5px 0;
+			
+			&.head {
+				border-bottom: 2px solid rgb(79, 129, 189);
+				
+				> ol > li {
+					color: rgb(79, 129, 189);
+					
+					> a {
+						color: rgb(79, 129, 189);
+						font-family: "Segoe UI Light";
+						font-size: 1.4rem;
+					}
+					
+					&.ASC > a,
+					&.DESC > a {
+						padding-right: 14px;
+						position: relative;
+						
+						&:after {
+							display: inline-block;
+							font-family: FontAwesome;
+							margin-left: 7px;
+							position: absolute;
+						}
+					}
+					
+					&.ASC > a:after {
+						content: "\f0d8";
+						top: 1px;
+					}
+					
+					&.DESC > a:after {
+						content: "\f0d7";
+						top: 2px;
+					}
+				}
+				
+				& + li {
+					border-top-width: 0;
+				}
+			}
+			
+			&:not(.head) {
+				border-top: 1px solid rgb(238, 238, 238);
+			}
+			
+			&.divider + li:not(.divider) {
+				border-top-color: rgb(79, 129, 189);
+			}
+			
+			> ol {
+				align-items: center;
+				display: flex;
+				
+				> li {
+					flex: 0 0 auto;
+					padding: 5px 10px;
+				}
+			}
+		}
+	}
+}
+
+.tabularBoxTitle {
+	> header {
+		border-bottom: 1px solid rgb(79, 129, 189);
+		color: rgb(79, 129, 189);
+		padding: 10px 0;
+		
+		> h1,
+		> h2,
+		> h3 {
+			.wcfFontLarge;
+		}
+		
+		a,
+		.icon {
+			color: rgb(79, 129, 189)
+		}
+		
+		.collapsibleButton {
+			cursor: pointer;
+			transition: transform .2s linear;
+		}
+	}
+}
+
+div.tabularBoxTitle > header {
+	display: none;
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/ui/tooltipBalloon.less b/wcfsetup/install/files/style/ui/tooltipBalloon.less
new file mode 100644
index 0000000000..63b9abf32e
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/tooltipBalloon.less
@@ -0,0 +1,35 @@
+.balloonTooltip {
+	background-color: @wcfTooltipBackgroundColor;
+	border-radius: 6px;
+	color: @wcfTooltipColor;
+	font-size: @wcfSmallFontSize;
+	max-width: 300px;
+	opacity: 0;
+	padding: 5px 10px 7px;
+	pointer-events: none;
+	position: absolute;
+	top: 0;
+	visibility: hidden;
+	z-index: 800;
+	
+	transition: visibility 0s linear .2s, opacity .2s linear .2s;
+	
+	> .elementPointer {
+		border-color: @wcfTooltipBackgroundColor transparent;
+		border-style: solid;
+		border-width: 0 5px 5px;
+		
+		&.flipVertical {
+			border-width: 5px 5px 0;
+		}
+	}
+	
+	.boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
+	
+	&.active {
+		opacity: 1;
+		visibility: visible;
+		
+		transition-delay: 0s;
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/ui/userProfile.less b/wcfsetup/install/files/style/ui/userProfile.less
new file mode 100644
index 0000000000..a2596471ea
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/userProfile.less
@@ -0,0 +1,114 @@
+.userProfile .sidebar {
+	position: relative;
+	
+	> section {
+		background-color: rgb(79, 129, 189);
+		border-radius: 0;
+		color: rgb(255, 255, 255);
+		
+		a,
+		dd,
+		h1 {
+			color: rgb(255, 255, 255);
+		}
+		
+		&:first-child {
+			border-top-left-radius: 3px;
+			border-top-right-radius: 3px;
+		}
+		
+		&:last-child {
+			border-bottom-left-radius: 3px;
+			border-bottom-right-radius: 3px;
+		}
+		
+		&:not(:first-child) {
+			margin-top: 0;
+			
+			&:before {
+				border-top: 2px solid rgb(112, 152, 200);
+				content: "";
+				left: 0;
+				margin-top: -15px;
+				position: absolute;
+				right: 0;
+			}
+		}
+	}
+	
+	> .userDetails {
+		position: relative;
+		text-align: center;
+		
+		> .buttonGroupNavigation > .buttonGroup,
+		> .dataList {
+			justify-content: center;
+		}
+		
+		> .buttonGroupNavigation,
+		> .dataList,
+		> .userActivity {
+			margin-top: 10px;
+		}
+		
+		> .dataList {
+			margin-top: 25px;
+			
+			&:before {
+				border-top: 2px solid rgb(112, 152, 200);
+				content: "";
+				left: 0;
+				margin-top: -10px;
+				position: absolute;
+				right: 0;
+			}
+		}
+		
+		> .userActivity > span {
+			display: block;
+			font-size: .85rem;
+		}
+	}
+}
+
+.userProfile #profileContent {
+	> .tabMenu {
+		margin-bottom: 30px;
+		
+		> ul > li {
+			&:not(:last-child) {
+				margin-right: 30px;
+			}
+			
+			> a {
+				font-size: 1.4rem;
+				padding: 0;
+				text-transform: uppercase;
+			}
+		}
+		
+		> span {
+			border-width: 2px;
+			bottom: -5px;
+		}
+	}
+}
+
+#profileButtonContainer > li {
+	border-width: 0;
+	
+	> a {
+		background-color: transparent;
+		border-width: 0;
+		color: rgb(255, 255, 255) !important;
+		padding: 5px;
+		
+		> .icon {
+			color: rgb(255, 255, 255);
+		}
+	}
+}
+
+.username {
+	font-size: 1.2rem;
+}
-- 
2.20.1