From f2b50825843bc93d57c7595504f0fa3d6f02d41a Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 16 Oct 2015 10:55:31 +0200
Subject: [PATCH] Upgraded ACP

---
 com.woltlab.wcf/acpMenu.xml                   |   97 +-
 com.woltlab.wcf/package.xml                   |    6 +-
 .../templates/dashboardBoxContent.tpl         |    4 +-
 .../templates/dashboardBoxRecentActivity.tpl  |    4 +-
 com.woltlab.wcf/templates/header.tpl          |  317 +++-
 com.woltlab.wcf/templates/searchArea.tpl      |    4 +-
 com.woltlab.wcf/templates/shareButtons.tpl    |    6 +-
 com.woltlab.wcf/templates/userPanel.tpl       |   16 +-
 com.woltlab.wcf/templates/userSidebar.tpl     |    8 +-
 wcfsetup/install/files/acp/js/WCF.ACP.js      |    2 +-
 .../files/acp/templates/acpSessionLog.tpl     |    4 +-
 .../install/files/acp/templates/adAdd.tpl     |    2 +-
 .../install/files/acp/templates/adList.tpl    |    8 +-
 .../files/acp/templates/applicationEdit.tpl   |    4 +-
 .../acp/templates/applicationManagement.tpl   |    4 +-
 .../files/acp/templates/attachmentList.tpl    |    2 +-
 .../install/files/acp/templates/bbcodeAdd.tpl |    6 +-
 .../files/acp/templates/bbcodeList.tpl        |   10 +-
 .../acp/templates/bbcodeMediaProviderAdd.tpl  |    2 +-
 .../acp/templates/bbcodeMediaProviderList.tpl |    8 +-
 .../install/files/acp/templates/cacheList.tpl |   12 +-
 .../acp/templates/captchaQuestionAdd.tpl      |    2 +-
 .../acp/templates/captchaQuestionList.tpl     |   10 +-
 .../files/acp/templates/categoryAdd.tpl       |    2 +-
 .../files/acp/templates/categoryList.tpl      |    6 +-
 .../files/acp/templates/cronjobAdd.tpl        |    2 +-
 .../files/acp/templates/cronjobList.tpl       |   20 +-
 .../files/acp/templates/cronjobLogList.tpl    |    4 +-
 .../files/acp/templates/dashboardList.tpl     |    2 +-
 .../files/acp/templates/dashboardOption.tpl   |    2 +-
 .../install/files/acp/templates/header.tpl    |   16 +-
 .../install/files/acp/templates/labelAdd.tpl  |    2 +-
 .../files/acp/templates/labelGroupAdd.tpl     |    2 +-
 .../files/acp/templates/labelGroupList.tpl    |    8 +-
 .../install/files/acp/templates/labelList.tpl |    8 +-
 .../files/acp/templates/languageAdd.tpl       |    2 +-
 .../files/acp/templates/languageExport.tpl    |    2 +-
 .../files/acp/templates/languageImport.tpl    |    2 +-
 .../files/acp/templates/languageList.tpl      |   20 +-
 .../files/acp/templates/languageServerAdd.tpl |    2 +-
 .../acp/templates/languageServerList.tpl      |    8 +-
 .../install/files/acp/templates/mainMenu.tpl  |  232 +++
 .../files/acp/templates/mainMenuSubMenu.tpl   |    5 +
 .../install/files/acp/templates/noticeAdd.tpl |    2 +-
 .../files/acp/templates/noticeList.tpl        |   10 +-
 .../install/files/acp/templates/package.tpl   |   10 +-
 .../files/acp/templates/packageList.tpl       |    8 +-
 .../acp/templates/packageSearchResultList.tpl |    2 +-
 .../acp/templates/packageStartInstall.tpl     |    2 +-
 .../acp/templates/packageUpdateServerAdd.tpl  |    2 +-
 .../acp/templates/packageUpdateServerList.tpl |   10 +-
 .../files/acp/templates/pageHeader.tpl        |   25 +
 .../install/files/acp/templates/pageLogo.tpl  |   13 +
 .../files/acp/templates/pageMenuItemAdd.tpl   |    2 +-
 .../files/acp/templates/pageMenuItemList.tpl  |   22 +-
 .../acp/templates/paidSubscriptionAdd.tpl     |    2 +-
 .../acp/templates/paidSubscriptionList.tpl    |   10 +-
 .../paidSubscriptionTransactionLog.tpl        |    4 +-
 .../acp/templates/paidSubscriptionUserAdd.tpl |    2 +-
 .../templates/paidSubscriptionUserList.tpl    |    2 +-
 .../templates/pluginStorePurchasedItems.tpl   |    4 +-
 .../files/acp/templates/searchArea.tpl        |   37 +
 .../install/files/acp/templates/smileyAdd.tpl |    2 +-
 .../files/acp/templates/smileyList.tpl        |    6 +-
 .../install/files/acp/templates/styleAdd.tpl  |  156 +-
 .../files/acp/templates/styleExport.tpl       |    2 +-
 .../files/acp/templates/styleImport.tpl       |    2 +-
 .../install/files/acp/templates/styleList.tpl |   12 +-
 .../install/files/acp/templates/tagAdd.tpl    |    2 +-
 .../install/files/acp/templates/tagList.tpl   |    8 +-
 .../files/acp/templates/templateAdd.tpl       |    2 +-
 .../files/acp/templates/templateDiff.tpl      |    4 +-
 .../files/acp/templates/templateGroupAdd.tpl  |    2 +-
 .../files/acp/templates/templateGroupList.tpl |    8 +-
 .../files/acp/templates/templateList.tpl      |   12 +-
 .../acp/templates/userActivityPointOption.tpl |    2 +-
 .../install/files/acp/templates/userAdd.tpl   |    2 +-
 .../files/acp/templates/userGroupAdd.tpl      |    6 +-
 .../acp/templates/userGroupAssignmentAdd.tpl  |    2 +-
 .../acp/templates/userGroupAssignmentList.tpl |   10 +-
 .../files/acp/templates/userGroupList.tpl     |   12 +-
 .../install/files/acp/templates/userList.tpl  |   22 +-
 .../install/files/acp/templates/userMail.tpl  |    4 +-
 .../files/acp/templates/userOptionAdd.tpl     |    2 +-
 .../acp/templates/userOptionCategoryAdd.tpl   |    2 +-
 .../acp/templates/userOptionCategoryList.tpl  |    8 +-
 .../files/acp/templates/userOptionList.tpl    |   10 +-
 .../install/files/acp/templates/userPanel.tpl |   46 +
 .../files/acp/templates/userRankAdd.tpl       |    2 +-
 .../files/acp/templates/userRankList.tpl      |    8 +-
 wcfsetup/install/files/js/WCF.Message.js      |   22 +-
 .../js/WoltLab/WCF/Acp/Ui/Style/Editor.js     |  151 +-
 .../install/files/js/WoltLab/WCF/ColorUtil.js |   63 +
 .../files/js/WoltLab/WCF/Date/Picker.js       |    2 +-
 .../files/lib/acp/form/StyleAddForm.class.php |  175 +-
 ...ACPMenuPackageInstallationPlugin.class.php |   11 +
 .../lib/system/style/StyleCompiler.class.php  |   51 +-
 .../install/files/style/bootstrap/mixin.scss  |    4 +-
 .../install/files/style/bootstrap/reset.scss  |   17 +-
 .../install/files/style/element/list.scss     |    2 +-
 wcfsetup/install/files/style/icon/icon.less   | 1690 -----------------
 wcfsetup/install/files/style/icon/icon.scss   |  159 ++
 ...{containerList.less => containerList.scss} |    4 +-
 wcfsetup/install/files/style/layout/form.less |   11 -
 wcfsetup/install/files/style/layout/form.scss |  339 ++++
 .../install/files/style/layout/global.scss    |   16 +-
 .../install/files/style/layout/layout.scss    |    6 +-
 .../files/style/layout/navigation.scss        |   76 +-
 .../files/style/layout/pageFooter.scss        |   12 +
 .../files/style/layout/pageHeader.scss        |  125 +-
 ...eaderSticky.less => pageHeaderSticky.scss} |    7 +-
 .../install/files/style/layout/sidebar.scss   |   51 +-
 wcfsetup/install/files/style/ui/button.scss   |   61 +-
 .../{colorPicker.less => ui/colorPicker.scss} |    8 +-
 .../style/ui/{comment.less => comment.scss}   |    4 +-
 .../style/ui/{dialog.less => dialog.scss}     |  106 +-
 .../style/ui/{dropdown.less => dropdown.scss} |   85 +-
 wcfsetup/install/files/style/ui/message.scss  |    6 +-
 .../style/ui/{redactor.less => redactor.scss} |   81 +-
 wcfsetup/install/files/style/ui/tabMenu.less  |   46 -
 wcfsetup/install/files/style/ui/tabMenu.scss  |   62 +
 ...abMenuMessage.less => tabMenuMessage.scss} |   42 +-
 .../install/files/style/ui/tabularBox.less    |  103 -
 .../install/files/style/ui/tabularBox.scss    |  271 +++
 wcfsetup/install/files/style/ui/textarea.scss |   18 +
 .../ui/{tooltipBalloon.less => tooltip.scss}  |   10 +-
 .../ui/{userProfile.less => userProfile.scss} |   14 +-
 wcfsetup/setup/db/install.sql                 |    1 +
 128 files changed, 2566 insertions(+), 2756 deletions(-)
 create mode 100644 wcfsetup/install/files/acp/templates/mainMenu.tpl
 create mode 100644 wcfsetup/install/files/acp/templates/mainMenuSubMenu.tpl
 create mode 100644 wcfsetup/install/files/acp/templates/pageHeader.tpl
 create mode 100644 wcfsetup/install/files/acp/templates/pageLogo.tpl
 create mode 100644 wcfsetup/install/files/acp/templates/searchArea.tpl
 create mode 100644 wcfsetup/install/files/acp/templates/userPanel.tpl
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/ColorUtil.js
 delete mode 100644 wcfsetup/install/files/style/icon/icon.less
 create mode 100644 wcfsetup/install/files/style/icon/icon.scss
 rename wcfsetup/install/files/style/layout/{containerList.less => containerList.scss} (91%)
 delete mode 100644 wcfsetup/install/files/style/layout/form.less
 create mode 100644 wcfsetup/install/files/style/layout/form.scss
 rename wcfsetup/install/files/style/layout/{pageHeaderSticky.less => pageHeaderSticky.scss} (75%)
 rename wcfsetup/install/files/style/{colorPicker.less => ui/colorPicker.scss} (95%)
 rename wcfsetup/install/files/style/ui/{comment.less => comment.scss} (84%)
 rename wcfsetup/install/files/style/ui/{dialog.less => dialog.scss} (61%)
 rename wcfsetup/install/files/style/ui/{dropdown.less => dropdown.scss} (72%)
 rename wcfsetup/install/files/style/ui/{redactor.less => redactor.scss} (93%)
 delete mode 100644 wcfsetup/install/files/style/ui/tabMenu.less
 create mode 100644 wcfsetup/install/files/style/ui/tabMenu.scss
 rename wcfsetup/install/files/style/ui/{tabMenuMessage.less => tabMenuMessage.scss} (73%)
 delete mode 100644 wcfsetup/install/files/style/ui/tabularBox.less
 create mode 100644 wcfsetup/install/files/style/ui/tabularBox.scss
 create mode 100644 wcfsetup/install/files/style/ui/textarea.scss
 rename wcfsetup/install/files/style/ui/{tooltipBalloon.less => tooltip.scss} (68%)
 rename wcfsetup/install/files/style/ui/{userProfile.less => userProfile.scss} (82%)

diff --git a/com.woltlab.wcf/acpMenu.xml b/com.woltlab.wcf/acpMenu.xml
index 1da81475be..9ad6cf5105 100644
--- a/com.woltlab.wcf/acpMenu.xml
+++ b/com.woltlab.wcf/acpMenu.xml
@@ -75,9 +75,10 @@
 		
 		<acpmenuitem name="wcf.acp.menu.link.cronjob.add">
 			<controller><![CDATA[wcf\acp\form\CronjobAddForm]]></controller>
-			<parent>wcf.acp.menu.link.cronjob</parent>
+			<parent>wcf.acp.menu.link.cronjob.list</parent>
 			<permissions>admin.system.canManageCronjob</permissions>
 			<showorder>2</showorder>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
 		<!-- /cronjobs -->
 		
@@ -91,9 +92,10 @@
 			<permissions>admin.captcha.canManageCaptchaQuestion</permissions>
 		</acpmenuitem>
 		<acpmenuitem name="wcf.acp.menu.link.captcha.question.add">
-			<parent>wcf.acp.menu.link.captcha</parent>
+			<parent>wcf.acp.menu.link.captcha.question.list</parent>
 			<controller><![CDATA[wcf\acp\form\CaptchaQuestionAddForm]]></controller>
 			<permissions>admin.captcha.canManageCaptchaQuestion</permissions>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
 		
 		<!-- maintenance -->
@@ -169,22 +171,22 @@
 			<showorder>1</showorder>
 		</acpmenuitem>
 		
-		<acpmenuitem name="wcf.acp.menu.link.user.search">
-			<controller><![CDATA[wcf\acp\form\UserSearchForm]]></controller>
-			<parent>wcf.acp.menu.link.user.management</parent>
-			<permissions>admin.user.canSearchUser</permissions>
-		</acpmenuitem>
-		
 		<acpmenuitem name="wcf.acp.menu.link.user.list">
 			<controller><![CDATA[wcf\acp\page\UserListPage]]></controller>
 			<parent>wcf.acp.menu.link.user.management</parent>
 			<permissions>admin.user.canSearchUser</permissions>
 		</acpmenuitem>
-		
+		<acpmenuitem name="wcf.acp.menu.link.user.search">
+			<controller><![CDATA[wcf\acp\form\UserSearchForm]]></controller>
+			<parent>wcf.acp.menu.link.user.list</parent>
+			<permissions>admin.user.canSearchUser</permissions>
+			<icon>fa-search</icon>
+		</acpmenuitem>
 		<acpmenuitem name="wcf.acp.menu.link.user.add">
 			<controller><![CDATA[wcf\acp\form\UserAddForm]]></controller>
-			<parent>wcf.acp.menu.link.user.management</parent>
+			<parent>wcf.acp.menu.link.user.list</parent>
 			<permissions>admin.user.canAddUser</permissions>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
 		
 		<acpmenuitem name="wcf.acp.menu.link.user.bulkProcessing">
@@ -224,11 +226,11 @@
 			<parent>wcf.acp.menu.link.group</parent>
 			<permissions>admin.user.canEditGroup,admin.user.canDeleteGroup</permissions>
 		</acpmenuitem>
-		
 		<acpmenuitem name="wcf.acp.menu.link.group.add">
 			<controller><![CDATA[wcf\acp\form\UserGroupAddForm]]></controller>
-			<parent>wcf.acp.menu.link.group</parent>
+			<parent>wcf.acp.menu.link.group.list</parent>
 			<permissions>admin.user.canAddGroup</permissions>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
 		
 		<acpmenuitem name="wcf.acp.menu.link.group.mail">
@@ -256,11 +258,11 @@
 			<controller><![CDATA[wcf\acp\page\UserRankListPage]]></controller>
 			<permissions>admin.user.rank.canManageRank</permissions>
 		</acpmenuitem>
-		
 		<acpmenuitem name="wcf.acp.menu.link.user.rank.add">
-			<parent>wcf.acp.menu.link.user.rank</parent>
+			<parent>wcf.acp.menu.link.user.rank.list</parent>
 			<controller><![CDATA[wcf\acp\form\UserRankAddForm]]></controller>
 			<permissions>admin.user.rank.canManageRank</permissions>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
 		
 		<!-- user options -->
@@ -276,8 +278,9 @@
 		</acpmenuitem>
 		<acpmenuitem name="wcf.acp.menu.link.user.option.add">
 			<controller><![CDATA[wcf\acp\form\UserOptionAddForm]]></controller>
-			<parent>wcf.acp.menu.link.user.option</parent>
+			<parent>wcf.acp.menu.link.user.option.list</parent>
 			<permissions>admin.user.canManageUserOption</permissions>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
 		
 		<acpmenuitem name="wcf.acp.menu.link.user.option.category.list">
@@ -287,8 +290,9 @@
 		</acpmenuitem>
 		<acpmenuitem name="wcf.acp.menu.link.user.option.category.add">
 			<controller><![CDATA[wcf\acp\form\UserOptionCategoryAddForm]]></controller>
-			<parent>wcf.acp.menu.link.user.option</parent>
+			<parent>wcf.acp.menu.link.user.option.category.list</parent>
 			<permissions>admin.user.canManageUserOption</permissions>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
 		
 		<acpmenuitem name="wcf.acp.menu.link.user.option.setDefaults">
@@ -309,8 +313,9 @@
 		</acpmenuitem>
 		<acpmenuitem name="wcf.acp.menu.link.notice.add">
 			<controller><![CDATA[wcf\acp\form\NoticeAddForm]]></controller>
-			<parent>wcf.acp.menu.link.notice</parent>
+			<parent>wcf.acp.menu.link.notice.list</parent>
 			<permissions>admin.notice.canManageNotice</permissions>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
 		
 		<acpmenuitem name="wcf.acp.menu.link.paidSubscription">
@@ -362,17 +367,17 @@
 			<parent>wcf.acp.menu.link.style</parent>
 			<permissions>admin.style.canManageStyle</permissions>
 		</acpmenuitem>
-		
-		<acpmenuitem name="wcf.acp.menu.link.style.add">
-			<controller><![CDATA[wcf\acp\form\StyleAddForm]]></controller>
-			<parent>wcf.acp.menu.link.style</parent>
-			<permissions>admin.style.canManageStyle</permissions>
-		</acpmenuitem>
-		
 		<acpmenuitem name="wcf.acp.menu.link.style.import">
 			<controller><![CDATA[wcf\acp\form\StyleImportForm]]></controller>
-			<parent>wcf.acp.menu.link.style</parent>
+			<parent>wcf.acp.menu.link.style.list</parent>
+			<permissions>admin.style.canManageStyle</permissions>
+			<icon>fa-upload</icon>
+		</acpmenuitem>
+		<acpmenuitem name="wcf.acp.menu.link.style.add">
+			<controller><![CDATA[wcf\acp\form\StyleAddForm]]></controller>
+			<parent>wcf.acp.menu.link.style.list</parent>
 			<permissions>admin.style.canManageStyle</permissions>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
 		<!-- /style -->
 		
@@ -387,11 +392,11 @@
 			<parent>wcf.acp.menu.link.pageMenu</parent>
 			<permissions>admin.display.canManagePageMenu</permissions>
 		</acpmenuitem>
-		
 		<acpmenuitem name="wcf.acp.menu.link.pageMenu.add">
 			<controller><![CDATA[wcf\acp\form\PageMenuItemAddForm]]></controller>
-			<parent>wcf.acp.menu.link.pageMenu</parent>
+			<parent>wcf.acp.menu.link.pageMenu.list</parent>
 			<permissions>admin.display.canManagePageMenu</permissions>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
 		<!-- /page menu -->
 		
@@ -407,9 +412,11 @@
 		</acpmenuitem>
 		<acpmenuitem name="wcf.acp.menu.link.template.add">
 			<controller><![CDATA[wcf\acp\form\TemplateAddForm]]></controller>
-			<parent>wcf.acp.menu.link.template</parent>
+			<parent>wcf.acp.menu.link.template.list</parent>
 			<permissions>admin.template.canManageTemplate</permissions>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
+		
 		<acpmenuitem name="wcf.acp.menu.link.template.group.list">
 			<controller><![CDATA[wcf\acp\page\TemplateGroupListPage]]></controller>
 			<parent>wcf.acp.menu.link.template</parent>
@@ -417,8 +424,9 @@
 		</acpmenuitem>
 		<acpmenuitem name="wcf.acp.menu.link.template.group.add">
 			<controller><![CDATA[wcf\acp\form\TemplateGroupAddForm]]></controller>
-			<parent>wcf.acp.menu.link.template</parent>
+			<parent>wcf.acp.menu.link.template.group.list</parent>
 			<permissions>admin.template.canManageTemplate</permissions>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
 		<!-- /template -->
 		
@@ -433,11 +441,11 @@
 			<controller><![CDATA[wcf\acp\page\LanguageListPage]]></controller>
 			<permissions>admin.language.canManageLanguage</permissions>
 		</acpmenuitem>
-		
 		<acpmenuitem name="wcf.acp.menu.link.language.import">
-			<parent>wcf.acp.menu.link.language</parent>
+			<parent>wcf.acp.menu.link.language.list</parent>
 			<controller><![CDATA[wcf\acp\form\LanguageImportForm]]></controller>
 			<permissions>admin.language.canManageLanguage</permissions>
+			<icon>fa-upload</icon>
 		</acpmenuitem>
 		
 		<acpmenuitem name="wcf.acp.menu.link.language.item.list">
@@ -476,8 +484,9 @@
 		</acpmenuitem>
 		<acpmenuitem name="wcf.acp.menu.link.ad.add">
 			<controller><![CDATA[wcf\acp\form\AdAddForm]]></controller>
-			<parent>wcf.acp.menu.link.ad</parent>
+			<parent>wcf.acp.menu.link.ad.list</parent>
 			<permissions>admin.ad.canManageAd</permissions>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
 		
 		<acpmenuitem name="wcf.acp.menu.link.content">
@@ -496,9 +505,11 @@
 		</acpmenuitem>
 		<acpmenuitem name="wcf.acp.menu.link.smiley.add">
 			<controller><![CDATA[wcf\acp\form\SmileyAddForm]]></controller>
-			<parent>wcf.acp.menu.link.smiley</parent>
+			<parent>wcf.acp.menu.link.smiley.list</parent>
 			<permissions>admin.content.smiley.canManageSmiley</permissions>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
+		
 		<acpmenuitem name="wcf.acp.menu.link.smiley.category.list">
 			<controller><![CDATA[wcf\acp\page\SmileyCategoryListPage]]></controller>
 			<parent>wcf.acp.menu.link.smiley</parent>
@@ -506,8 +517,9 @@
 		</acpmenuitem>
 		<acpmenuitem name="wcf.acp.menu.link.smiley.category.add">
 			<controller><![CDATA[wcf\acp\form\SmileyCategoryAddForm]]></controller>
-			<parent>wcf.acp.menu.link.smiley</parent>
+			<parent>wcf.acp.menu.link.smiley.category.list</parent>
 			<permissions>admin.content.smiley.canManageSmiley</permissions>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
 		
 		<acpmenuitem name="wcf.acp.menu.link.label">
@@ -521,9 +533,11 @@
 		</acpmenuitem>
 		<acpmenuitem name="wcf.acp.menu.link.label.add">
 			<controller><![CDATA[wcf\acp\form\LabelAddForm]]></controller>
-			<parent>wcf.acp.menu.link.label</parent>
+			<parent>wcf.acp.menu.link.label.list</parent>
 			<permissions>admin.content.label.canManageLabel</permissions>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
+		
 		<acpmenuitem name="wcf.acp.menu.link.label.group.list">
 			<controller><![CDATA[wcf\acp\page\LabelGroupListPage]]></controller>
 			<parent>wcf.acp.menu.link.label</parent>
@@ -531,8 +545,9 @@
 		</acpmenuitem>
 		<acpmenuitem name="wcf.acp.menu.link.label.group.add">
 			<controller><![CDATA[wcf\acp\form\LabelGroupAddForm]]></controller>
-			<parent>wcf.acp.menu.link.label</parent>
+			<parent>wcf.acp.menu.link.label.group.list</parent>
 			<permissions>admin.content.label.canManageLabel</permissions>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
 		
 		<acpmenuitem name="wcf.acp.menu.link.bbcode">
@@ -546,8 +561,9 @@
 		</acpmenuitem>
 		<acpmenuitem name="wcf.acp.menu.link.bbcode.add">
 			<controller><![CDATA[wcf\acp\form\BBCodeAddForm]]></controller>
-			<parent>wcf.acp.menu.link.bbcode</parent>
+			<parent>wcf.acp.menu.link.bbcode.list</parent>
 			<permissions>admin.content.bbcode.canManageBBCode</permissions>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
 		<acpmenuitem name="wcf.acp.menu.link.bbcode.mediaProvider.list">
 			<controller><![CDATA[wcf\acp\page\BBCodeMediaProviderListPage]]></controller>
@@ -556,8 +572,9 @@
 		</acpmenuitem>
 		<acpmenuitem name="wcf.acp.menu.link.bbcode.mediaProvider.add">
 			<controller><![CDATA[wcf\acp\form\BBCodeMediaProviderAddForm]]></controller>
-			<parent>wcf.acp.menu.link.bbcode</parent>
+			<parent>wcf.acp.menu.link.bbcode.mediaProvider.list</parent>
 			<permissions>admin.content.bbcode.canManageBBCode</permissions>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
 		
 		<acpmenuitem name="wcf.acp.menu.link.tag">
@@ -571,11 +588,11 @@
 			<parent>wcf.acp.menu.link.tag</parent>
 			<permissions>admin.content.tag.canManageTag</permissions>
 		</acpmenuitem>
-		
 		<acpmenuitem name="wcf.acp.menu.link.tag.add">
 			<controller><![CDATA[wcf\acp\form\TagAddForm]]></controller>
-			<parent>wcf.acp.menu.link.tag</parent>
+			<parent>wcf.acp.menu.link.tag.list</parent>
 			<permissions>admin.content.tag.canManageTag</permissions>
+			<icon>fa-plus</icon>
 		</acpmenuitem>
 		
 		<acpmenuitem name="wcf.acp.menu.link.attachment">
diff --git a/com.woltlab.wcf/package.xml b/com.woltlab.wcf/package.xml
index 6474f08fc2..a50d2a6a92 100644
--- a/com.woltlab.wcf/package.xml
+++ b/com.woltlab.wcf/package.xml
@@ -5,7 +5,7 @@
 		<packagedescription><![CDATA[Free web-framework, designed and developed for complex community applications.]]></packagedescription>
 		<packagedescription language="de"><![CDATA[Freies Web-Framework, das für komplexe Community-Anwendungen entworfen und entwickelt wurde.]]></packagedescription>
 		<isapplication>1</isapplication>
-		<version>2.2.0 Alpha 1</version> <!-- codename: vortex -->
+		<version>2.2.0 Alpha 3</version> <!-- codename: vortex -->
 		<date>2015-05-03</date>
 	</packageinformation>
 	
@@ -42,4 +42,8 @@
 		<instruction type="aclOption" />
 		<instruction type="script">acp/post_install.php</instruction>
 	</instructions>
+	
+	<instructions type="update" fromversion="2.2.0 Alpha 2">
+		<instruction type="acpMenu" />
+	</instructions>
 </package>
diff --git a/com.woltlab.wcf/templates/dashboardBoxContent.tpl b/com.woltlab.wcf/templates/dashboardBoxContent.tpl
index 4439cf60a7..c8fbf55785 100644
--- a/com.woltlab.wcf/templates/dashboardBoxContent.tpl
+++ b/com.woltlab.wcf/templates/dashboardBoxContent.tpl
@@ -1,3 +1,3 @@
-<div class="dashboardBox" data-box-name="{$box->boxName}">
+<section class="dashboardBox" data-box-name="{$box->boxName}">
 	{@$template}
-</div>
\ No newline at end of file
+</section>
diff --git a/com.woltlab.wcf/templates/dashboardBoxRecentActivity.tpl b/com.woltlab.wcf/templates/dashboardBoxRecentActivity.tpl
index 5ff7ed6942..041cc2effc 100644
--- a/com.woltlab.wcf/templates/dashboardBoxRecentActivity.tpl
+++ b/com.woltlab.wcf/templates/dashboardBoxRecentActivity.tpl
@@ -1,8 +1,8 @@
 <header class="boxHeadline boxSubHeadline dashboardBoxRecentActivityHeadline" id="dashboardBoxRecentActivity">
-	<h2>{lang}wcf.user.recentActivity{/lang}</h2>
+	<h1>{lang}wcf.user.recentActivity{/lang}</h1>
 	
 	{if $canFilterByFollowedUsers}
-		<nav class="jsMobileNavigation buttonGroupNavigation jsOnly jsRecentActivitySwitchContext">
+		<nav class="marginTop jsMobileNavigation buttonGroupNavigation jsOnly jsRecentActivitySwitchContext">
 			<ul class="buttonGroup">
 				<li><a href="#" class="button small{if !$filteredByFollowedUsers} active{/if}">{lang}wcf.user.recentActivity.scope.all{/lang}</a></li>
 				<li><a href="#" class="button small{if $filteredByFollowedUsers} active{/if}">{lang}wcf.user.recentActivity.scope.followedUsers{/lang}</a></li>				
diff --git a/com.woltlab.wcf/templates/header.tpl b/com.woltlab.wcf/templates/header.tpl
index 8a43dfb1bd..93695134e2 100644
--- a/com.woltlab.wcf/templates/header.tpl
+++ b/com.woltlab.wcf/templates/header.tpl
@@ -1,45 +1,292 @@
-<a id="top"></a>
-
-<div id="pageContainer" class="pageContainer">
-	{event name='beforePageHeader'}
+<!DOCTYPE html>
+<html dir="{@$__wcf->getLanguage()->getPageDirection()}" lang="{@$__wcf->getLanguage()->getFixedLanguageCode()}">
+<head>
+	<base href="{$baseHref}" />
+	<meta charset="utf-8" />
+	<meta name="robots" content="noindex" />
+	<title>{if $pageTitle|isset}{@$pageTitle|language} - {/if}{lang}wcf.global.acp{/lang}{if PACKAGE_ID} - {PAGE_TITLE|language}{/if}</title>
 	
-	{include file='pageHeader'}
+	<!-- Stylesheets -->
+	{@$__wcf->getStyleHandler()->getStylesheet(true)}
+	{event name='stylesheets'}
 	
-	{event name='afterPageHeader'}
+	<!-- Icons -->
+	<link rel="shortcut icon" href="{@$__wcf->getPath()}images/favicon.ico" />
+	<link rel="apple-touch-icon" href="{@$__wcf->getPath()}images/apple-touch-icon.png" />
 	
-	{include file='pageNavbarTop'}
+	<script>
+		var SID_ARG_2ND = '{@SID_ARG_2ND_NOT_ENCODED}';
+		var WCF_PATH = '{@$__wcf->getPath()}';
+		var SECURITY_TOKEN = '{@SECURITY_TOKEN}';
+		var LANGUAGE_ID = {@$__wcf->getLanguage()->languageID};
+		var TIME_NOW = {@TIME_NOW};
+		var URL_LEGACY_MODE = {if URL_LEGACY_MODE}true{else}false{/if};
+	</script>
 	
-	<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}>
-						{if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.top')}{/if}
-						
-						{event name='sidebarBoxesTop'}
-						
-						{@$sidebar}
-						
-						{event name='sidebarBoxesBottom'}
+	{js application='wcf' file='require' bundle='WCF.Core' core='true'}
+	{js application='wcf' file='require.config' bundle='WCF.Core' core='true'}
+	{js application='wcf' file='require.linearExecution' bundle='WCF.Core' core='true'}
+	{js application='wcf' file='wcf.globalHelper' bundle='WCF.Core' core='true'}
+	<script>
+		requirejs.config({
+			baseUrl: '{@$__wcf->getPath()}js'
+		});
+	</script>
+	<script>
+		document.addEventListener('DOMContentLoaded', function() {
+		require(['Language', 'WoltLab/WCF/Acp/Bootstrap'], function(Language, AcpBootstrap) {
+			Language.addObject({
+				'__days': [ '{lang}wcf.date.day.sunday{/lang}', '{lang}wcf.date.day.monday{/lang}', '{lang}wcf.date.day.tuesday{/lang}', '{lang}wcf.date.day.wednesday{/lang}', '{lang}wcf.date.day.thursday{/lang}', '{lang}wcf.date.day.friday{/lang}', '{lang}wcf.date.day.saturday{/lang}' ],
+				'__daysShort': [ '{lang}wcf.date.day.sun{/lang}', '{lang}wcf.date.day.mon{/lang}', '{lang}wcf.date.day.tue{/lang}', '{lang}wcf.date.day.wed{/lang}', '{lang}wcf.date.day.thu{/lang}', '{lang}wcf.date.day.fri{/lang}', '{lang}wcf.date.day.sat{/lang}' ],
+				'__months': [ '{lang}wcf.date.month.january{/lang}', '{lang}wcf.date.month.february{/lang}', '{lang}wcf.date.month.march{/lang}', '{lang}wcf.date.month.april{/lang}', '{lang}wcf.date.month.may{/lang}', '{lang}wcf.date.month.june{/lang}', '{lang}wcf.date.month.july{/lang}', '{lang}wcf.date.month.august{/lang}', '{lang}wcf.date.month.september{/lang}', '{lang}wcf.date.month.october{/lang}', '{lang}wcf.date.month.november{/lang}', '{lang}wcf.date.month.december{/lang}' ], 
+				'__monthsShort': [ '{lang}wcf.date.month.short.jan{/lang}', '{lang}wcf.date.month.short.feb{/lang}', '{lang}wcf.date.month.short.mar{/lang}', '{lang}wcf.date.month.short.apr{/lang}', '{lang}wcf.date.month.short.may{/lang}', '{lang}wcf.date.month.short.jun{/lang}', '{lang}wcf.date.month.short.jul{/lang}', '{lang}wcf.date.month.short.aug{/lang}', '{lang}wcf.date.month.short.sep{/lang}', '{lang}wcf.date.month.short.oct{/lang}', '{lang}wcf.date.month.short.nov{/lang}', '{lang}wcf.date.month.short.dec{/lang}' ],
+				'wcf.acp.search.noResults': '{lang}wcf.acp.search.noResults{/lang}',
+				'wcf.clipboard.item.unmarkAll': '{lang}wcf.clipboard.item.unmarkAll{/lang}',
+				'wcf.date.relative.now': '{lang}wcf.date.relative.now{/lang}',
+				'wcf.date.relative.minutes': '{capture assign=relativeMinutes}{lang}wcf.date.relative.minutes{/lang}{/capture}{@$relativeMinutes|encodeJS}',
+				'wcf.date.relative.hours': '{capture assign=relativeHours}{lang}wcf.date.relative.hours{/lang}{/capture}{@$relativeHours|encodeJS}',
+				'wcf.date.relative.pastDays': '{capture assign=relativePastDays}{lang}wcf.date.relative.pastDays{/lang}{/capture}{@$relativePastDays|encodeJS}',
+				'wcf.date.dateFormat': '{lang}wcf.date.dateFormat{/lang}',
+				'wcf.date.dateTimeFormat': '{lang}wcf.date.dateTimeFormat{/lang}',
+				'wcf.date.shortDateTimeFormat': '{lang}wcf.date.shortDateTimeFormat{/lang}',
+				'wcf.date.hour': '{lang}wcf.date.hour{/lang}',
+				'wcf.date.minute': '{lang}wcf.date.minute{/lang}',
+				'wcf.date.timeFormat': '{lang}wcf.date.timeFormat{/lang}',
+				'wcf.date.firstDayOfTheWeek': '{lang}wcf.date.firstDayOfTheWeek{/lang}',
+				'wcf.global.button.add': '{lang}wcf.global.button.add{/lang}',
+				'wcf.global.button.cancel': '{lang}wcf.global.button.cancel{/lang}',
+				'wcf.global.button.close': '{lang}wcf.global.button.close{/lang}',
+				'wcf.global.button.collapsible': '{lang}wcf.global.button.collapsible{/lang}',
+				'wcf.global.button.delete': '{lang}wcf.global.button.delete{/lang}',
+				'wcf.global.button.disable': '{lang}wcf.global.button.disable{/lang}',
+				'wcf.global.button.disabledI18n': '{lang}wcf.global.button.disabledI18n{/lang}',
+				'wcf.global.button.edit': '{lang}wcf.global.button.edit{/lang}',
+				'wcf.global.button.enable': '{lang}wcf.global.button.enable{/lang}',
+				'wcf.global.button.hide': '{lang}wcf.global.button.hide{/lang}',
+				'wcf.global.button.next': '{lang}wcf.global.button.next{/lang}',
+				'wcf.global.button.preview': '{lang}wcf.global.button.preview{/lang}',
+				'wcf.global.button.reset': '{lang}wcf.global.button.reset{/lang}',
+				'wcf.global.button.save': '{lang}wcf.global.button.save{/lang}',
+				'wcf.global.button.search': '{lang}wcf.global.button.search{/lang}',
+				'wcf.global.button.submit': '{lang}wcf.global.button.submit{/lang}',
+				'wcf.global.button.upload': '{lang}wcf.global.button.upload{/lang}',
+				'wcf.global.confirmation.cancel': '{lang}wcf.global.confirmation.cancel{/lang}',
+				'wcf.global.confirmation.confirm': '{lang}wcf.global.confirmation.confirm{/lang}',
+				'wcf.global.confirmation.title': '{lang}wcf.global.confirmation.title{/lang}',
+				'wcf.global.decimalPoint': '{capture assign=decimalPoint}{lang}wcf.global.decimalPoint{/lang}{/capture}{$decimalPoint|encodeJS}',
+				'wcf.global.error.timeout': '{lang}wcf.global.error.timeout{/lang}',
+				'wcf.global.error.title': '{lang}wcf.global.error.title{/lang}',
+				'wcf.global.form.error.empty': '{lang}wcf.global.form.error.empty{/lang}',
+				'wcf.global.form.error.greaterThan': '{lang __literal=true}wcf.global.form.error.greaterThan{/lang}',
+				'wcf.global.form.error.lessThan': '{lang __literal=true}wcf.global.form.error.lessThan{/lang}',
+				'wcf.global.loading': '{lang}wcf.global.loading{/lang}',
+				'wcf.global.page.jumpTo': '{lang}wcf.global.page.jumpTo{/lang}',
+				'wcf.global.page.jumpTo.description': '{lang}wcf.global.page.jumpTo.description{/lang}',
+				'wcf.global.page.pageNavigation': '{lang}wcf.global.page.pageNavigation{/lang}',
+				'wcf.global.page.next': '{capture assign=pageNext}{lang}wcf.global.page.next{/lang}{/capture}{@$pageNext|encodeJS}',
+				'wcf.global.page.previous': '{capture assign=pagePrevious}{lang}wcf.global.page.previous{/lang}{/capture}{@$pagePrevious|encodeJS}',
+				'wcf.global.pageDirection': '{lang}wcf.global.pageDirection{/lang}',
+				'wcf.global.reason': '{lang}wcf.global.reason{/lang}',
+				'wcf.global.success': '{lang}wcf.global.success{/lang}',
+				'wcf.global.success.add': '{lang}wcf.global.success.add{/lang}',
+				'wcf.global.success.edit': '{lang}wcf.global.success.edit{/lang}',
+				'wcf.global.thousandsSeparator': '{capture assign=thousandsSeparator}{lang}wcf.global.thousandsSeparator{/lang}{/capture}{@$thousandsSeparator|encodeJS}',
+				'wcf.page.pagePosition': '{lang __literal=true}wcf.page.pagePosition{/lang}'
+				{event name='javascriptLanguageImport'}
+			});
+			
+			AcpBootstrap.setup();
+		});
+		});
+	</script>
+	{js application='wcf' lib='jquery'}
+	
+	<script>
+		// prevent jQuery and other libraries from utilizing define()
+		__require_define_amd = define.amd;
+		define.amd = undefined;
+	</script>
+	{js application='wcf' lib='jquery-ui'}
+	{js application='wcf' lib='jquery-ui' file='touchPunch' bundle='WCF.Combined'}
+	{js application='wcf' lib='jquery-ui' file='nestedSortable' bundle='WCF.Combined'}
+	{js application='wcf' file='WCF.Assets' bundle='WCF.Combined'}
+	{js application='wcf' file='WCF' bundle='WCF.Combined'}
+	{js application='wcf' acp='true' file='WCF.ACP'}
+	<script>
+		define.amd = __require_define_amd;
+		$.holdReady(true);
+		WCF.User.init({$__wcf->user->userID}, '{@$__wcf->user->username|encodeJS}');
+	</script>
+	<script>
+		$(function() {
+			{* work-around for unknown core-object during WCFSetup *}
+			{if PACKAGE_ID}
+				{assign var=activeMenuItems value=$__wcf->getACPMenu()->getActiveMenuItems()|array_reverse}
+				var $activeMenuItems = [{implode from=$activeMenuItems item=_menuItem}'{$_menuItem}'{/implode}];
+				new WCF.ACP.Menu($activeMenuItems);
+			{/if}
+			
+			if (jQuery.browser.touch) $('html').addClass('touch');
+			
+			new WCF.Effect.SmoothScroll();
+			WCF.System.PageNavigation.init('.pageNavigation');
+			
+			{if $__wcf->user->userID}
+				new WCF.ACP.Search();
+			{/if}
+			
+			{event name='javascriptInit'}
+			
+			$('form[method=get]').attr('method', 'post');
+		});
+	</script>
+	{event name='javascriptInclude'}
+</head>
+
+<body id="tpl{$templateName|ucfirst}" data-template="{$templateName}" data-application="{$templateNameApplication}" class="wcfAcp">
+	<a id="top"></a>
+	
+	{include file='pageHeader'}
+	
+	{*
+	<header id="pageHeader" class="layoutFluid">
+		<div>
+			{if $__wcf->user->userID}
+				<nav id="topMenu" class="userPanel">
+					<div class="layoutFluid">
+						<ul class="userPanelItems">
+							<li id="userMenu" class="dropdown">
+								<a class="dropdownToggle framed" data-toggle="userMenu">{if PACKAGE_ID}{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(24)} {/if}{lang}wcf.user.userNote{/lang}</a>
+								<ul class="dropdownMenu">
+									{if PACKAGE_ID > 1}
+										<li><a href="{link controller='User' object=$__wcf->user forceFrontend=true}{/link}" class="box32">
+											<div class="framed">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)}</div>
+											
+											<div class="containerHeadline">
+												<h3>{$__wcf->user->username}</h3>
+												<small>{lang}wcf.user.myProfile{/lang}</small>
+											</div>
+										</a></li>
+										{if $__wcf->getUserProfileHandler()->canEditOwnProfile()}<li><a href="{link controller='User' object=$__wcf->user forceFrontend=true}editOnInit=true#about{/link}">{lang}wcf.user.editProfile{/lang}</a></li>{/if}
+										<li><a href="{link controller='Settings' forceFrontend=true}{/link}">{lang}wcf.user.menu.settings{/lang}</a></li>
+										
+										{event name='userMenuItems'}
+										
+										<li class="dropdownDivider"></li>
+									{/if}
+									<li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" onclick="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></li>
+								</ul>
+							</li>
+							
+							{if PACKAGE_ID > 1}
+								<li id="jumpToPage" class="dropdown">
+									<a href="{link forceFrontend=true}{/link}" class="dropdownToggle" data-toggle="jumpToPage"><span class="icon icon16 icon-home"></span> <span>{lang}wcf.global.jumpToPage{/lang}</span></a>
+									<ul class="dropdownMenu">
+										{foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=_menuItem}
+											<li><a href="{$_menuItem->getProcessor()->getLink()}">{lang}{$_menuItem->menuItem}{/lang}</a></li>
+										{/foreach}
+									</ul>
+								</li>
+								
+								{if $__wcf->session->getPermission('admin.system.package.canUpdatePackage') && $__wcf->getAvailableUpdates()}
+									<li>
+										<a href="{link controller='PackageUpdate'}{/link}"><span class="icon icon16 icon-refresh"></span> <span>{lang}wcf.acp.package.updates{/lang}</span> <span class="badge badgeInverse">{#$__wcf->getAvailableUpdates()}</span></a>
+									</li>
+								{/if}
+							{/if}
+														
+							<li id="woltlab" class="dropdown">
+								<a class="dropdownToggle" data-toggle="woltlab"><span class="icon icon16 icon-info-sign"></span> <span>WoltLab&reg;</span></a>
+								
+								<ul class="dropdownMenu">
+									<li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://www.woltlab.com"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.website{/lang}</a></li>
+									<li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://community.woltlab.com"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.forums{/lang}</a></li>
+									<li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://www.woltlab.com/ticket-add/"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.tickets{/lang}</a></li>
+									<li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://pluginstore.woltlab.com"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.pluginStore{/lang}</a></li>
+								</ul>
+							</li>
+							
+							{event name='topMenu'}
+						</ul>
 						
-						{if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.bottom')}{/if}
-					</aside>
-					
-					{if $sidebarOrientation|isset && $sidebarOrientation == 'right'}
-						<script data-relocate="true">
-							require(['WoltLab/WCF/Ui/Collapsible/Sidebar'], function(UiCollapsibleSidebar) {
-								UiCollapsibleSidebar.setup();
-							});
-						</script>
+						{if $__wcf->getSession()->getPermission('admin.general.canUseAcp')}
+							<aside id="search" class="searchBar">
+								<form>
+									<input type="search" name="q" placeholder="{lang}wcf.global.search.enterSearchTerm{/lang}" value="" />
+								</form>
+							</aside>
+						{/if}
+					</div>
+				</nav>
+			{/if}
+			
+			<div id="logo" class="logo">
+				<a href="{link}{/link}">
+					<h1>{lang}wcf.global.acp{/lang}</h1>
+					{if PACKAGE_ID > 1}
+						{event name='headerLogo'}
+					{else}
+						<img src="{@$__wcf->getPath()}acp/images/wcfLogo.png" alt="" style="height: 80px; width: 502px;" />
 					{/if}
-				{/if}
-			{/capture}
+				</a>
+			</div>
 			
-			{if !$sidebarOrientation|isset || $sidebarOrientation == 'left'}
-				{@$__sidebar}
+			*}{* work-around for unknown core-object during WCFSetup *}{*
+			{if PACKAGE_ID && $__wcf->user->userID}
+				{hascontent}
+					<nav id="mainMenu" class="mainMenu">
+						<ul>{content}{foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_menuItem}<li data-menu-item="{$_menuItem->menuItem}"><a>{lang}{@$_menuItem->menuItem}{/lang}</a></li>{/foreach}{/content}</ul>
+					</nav>
+				{/hascontent}
 			{/if}
 			
-			<div id="content" class="content">
-				{if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.header.content')}{/if}
+			<nav class="navigation navigationHeader">
+				<ul class="navigationIcons">
+					<li id="toBottomLink" class="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>
+					{event name='navigationIcons'}
+				</ul>
+			</nav>
+		</div>
+	</header>
+	*}
+	
+	<div id="main" class="layoutFluid{if PACKAGE_ID && $__wcf->user->userID && $__wcf->getACPMenu()->getMenuItems('')|count} sidebarOrientationLeft{/if}">
+		<div>
+			<div>
+				{hascontent}
+					<aside class="sidebar collapsibleMenu">
+						<div>
+							{content}
+								{* work-around for unknown core-object during WCFSetup *}
+								{if PACKAGE_ID && $__wcf->user->userID}
+									{foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_parentMenuItem}
+										<div id="{$_parentMenuItem->menuItem}-container" style="display: none;" class="menuGroup collapsibleMenus" data-parent-menu-item="{$_parentMenuItem->menuItem}">
+											{foreach from=$__wcf->getACPMenu()->getMenuItems($_parentMenuItem->menuItem) item=_menuItem}
+												<fieldset>
+													<legend class="menuHeader" data-menu-item="{$_menuItem->menuItem}">{@$_menuItem}</legend>
+													
+													<nav class="menuGroupItems">
+														<ul id="{$_menuItem->menuItem}">
+															{foreach from=$__wcf->getACPMenu()->getMenuItems($_menuItem->menuItem) item=menuItemCategory}
+																{if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
+																	{foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}
+																		<li id="{$subMenuItem->menuItem}" data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getLink()}">{@$subMenuItem}</a></li>
+																	{/foreach}
+																{else}
+																	<li id="{$menuItemCategory->menuItem}" data-menu-item="{$menuItemCategory->menuItem}"><a href="{$menuItemCategory->getLink()}">{@$menuItemCategory}</a></li>
+																{/if}
+															{/foreach}
+														</ul>
+													</nav>
+												</fieldset>
+											{/foreach}
+										</div>
+									{/foreach}
+								{/if}
+							{/content}
+						</div>
+					</aside>
+				{/hascontent}
+				
+				<section id="content" class="content">
 				
-				{event name='contents'}
diff --git a/com.woltlab.wcf/templates/searchArea.tpl b/com.woltlab.wcf/templates/searchArea.tpl
index eea92a1fe9..7a9e740a21 100644
--- a/com.woltlab.wcf/templates/searchArea.tpl
+++ b/com.woltlab.wcf/templates/searchArea.tpl
@@ -5,8 +5,8 @@
 
 {event name='settings'}
 
-<div id="search" class="searchBar dropdown" data-disable-auto-focus="true">
-	<form method="post" action="{@$__searchFormLink}">
+<div id="search" class="searchBar" data-disable-auto-focus="true">
+	<form method="post" action="{@$__searchFormLink}" class="dropdown">
 		<input type="search" name="q" placeholder="{@$__searchInputPlaceholder}" autocomplete="off" required="required" value="{if $query|isset}{$query}{/if}" class="dropdownToggle" data-toggle="search" />
 		
 		<ul class="dropdownMenu">
diff --git a/com.woltlab.wcf/templates/shareButtons.tpl b/com.woltlab.wcf/templates/shareButtons.tpl
index 80a230432b..eee9c9e717 100644
--- a/com.woltlab.wcf/templates/shareButtons.tpl
+++ b/com.woltlab.wcf/templates/shareButtons.tpl
@@ -2,21 +2,21 @@
 	<ul class="inlineList">
 		<li class="jsShareFacebook">
 			<a>
-				<span class="icon icon32 icon-facebook-sign jsTooltip" title="{lang}wcf.message.share.facebook{/lang}"></span>
+				<span class="icon icon32 fa-facebook-square jsTooltip" title="{lang}wcf.message.share.facebook{/lang}"></span>
 				<span class="invisible">{lang}wcf.message.share.facebook{/lang}</span>
 			</a>
 			<span class="badge" style="display: none">0</span>
 		</li>
 		<li class="jsShareTwitter">
 			<a>
-				<span class="icon icon32 icon-twitter-sign jsTooltip" title="{lang}wcf.message.share.twitter{/lang}"></span>
+				<span class="icon icon32 fa-twitter-square jsTooltip" title="{lang}wcf.message.share.twitter{/lang}"></span>
 				<span class="invisible">{lang}wcf.message.share.twitter{/lang}</span>
 			</a>
 			<span class="badge" style="display: none">0</span>
 		</li>
 		<li class="jsShareGoogle">
 			<a>
-				<span class="icon icon32 icon-google-plus-sign jsTooltip" title="{lang}wcf.message.share.google{/lang}"></span>
+				<span class="icon icon32 fa-google-plus-square jsTooltip" title="{lang}wcf.message.share.google{/lang}"></span>
 				<span class="invisible">{lang}wcf.message.share.google{/lang}</span>
 			</a>
 			<span class="badge" style="display: none">0</span>
diff --git a/com.woltlab.wcf/templates/userPanel.tpl b/com.woltlab.wcf/templates/userPanel.tpl
index 9e36b4cf24..0c4a0f4393 100644
--- a/com.woltlab.wcf/templates/userPanel.tpl
+++ b/com.woltlab.wcf/templates/userPanel.tpl
@@ -77,12 +77,12 @@
 				</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>
+			<li><a href="{link controller='Settings'}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 fa-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>
+					<a href="{link controller='NotificationList'}{/link}"><span class="icon icon16 fa-bell-o"></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[
@@ -109,25 +109,25 @@
 						{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>
+									<a href="{link controller='GithubAuth'}{/link}" class="thirdPartyLoginButton githubLoginButton"><span class="icon icon16 fagithub"></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>
+									<a href="{link controller='TwitterAuth'}{/link}" class="thirdPartyLoginButton twitterLoginButton"><span class="icon icon16 fa-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>
+									<a href="{link controller='FacebookAuth'}{/link}" class="thirdPartyLoginButton facebookLoginButton"><span class="icon icon16 fa-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>
+									<a href="{link controller='GoogleAuth'}{/link}" class="thirdPartyLoginButton googleLoginButton"><span class="icon icon16 fa-google-plus"></span> <span>{lang}wcf.user.3rdparty.google.login{/lang}</span></a>
 								</li>
 							{/if}
 							
@@ -235,7 +235,7 @@
 			{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 class="icon icon16 fa-exclamation-triangle"></span>
 						<span>{lang}wcf.moderation.moderation{/lang}</span>
 						{if $__wcf->getModerationQueueManager()->getUnreadModerationCount()}<span class="badge badgeInverse">{#$__wcf->getModerationQueueManager()->getUnreadModerationCount()}</span>{/if}
 					</a>
@@ -262,7 +262,7 @@
 		{/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>
+			<li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 fa-sign-out"></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/userSidebar.tpl b/com.woltlab.wcf/templates/userSidebar.tpl
index 041f4ca0f4..e642c81b63 100644
--- a/com.woltlab.wcf/templates/userSidebar.tpl
+++ b/com.woltlab.wcf/templates/userSidebar.tpl
@@ -51,7 +51,7 @@
 		<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>
+					<a href="#" class="button dropdownToggle jsTooltip" title="{lang}wcf.user.searchUserContent{/lang}"><span class="icon icon16 fa-search"></span> <span class="invisible">{lang}wcf.user.searchUserContent{/lang}</span></a>
 					<ul class="dropdownMenu">
 						{content}
 							{event name='quickSearchItems'}
@@ -61,14 +61,14 @@
 			{/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>
+				<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 fa-exclamation-triangle"></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>
+					<li><a class="button jsTooltip" href="mailto:{@$user->getEncodedEmail()}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 fa-envelope-o"></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>
+					<li><a class="button jsTooltip" href="{link controller='Mail' object=$user}{/link}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 fa-envelope-o"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
 				{/if}
 			{/if}
 			
diff --git a/wcfsetup/install/files/acp/js/WCF.ACP.js b/wcfsetup/install/files/acp/js/WCF.ACP.js
index 6f70b2674e..353f8e8da7 100644
--- a/wcfsetup/install/files/acp/js/WCF.ACP.js
+++ b/wcfsetup/install/files/acp/js/WCF.ACP.js
@@ -1559,7 +1559,7 @@ WCF.ACP.Package.Update.Search = Class.extend({
 			$('.jsButtonPackageUpdate').click($.proxy(this._click, this));
 		}
 		else {
-			var $button = $('<li><a class="button"><span class="icon icon16 icon-refresh"></span> <span>' + WCF.Language.get('wcf.acp.package.searchForUpdates') + '</span></a></li>');
+			var $button = $('<li><a class="button"><span class="icon icon16 fa-refresh"></span> <span>' + WCF.Language.get('wcf.acp.package.searchForUpdates') + '</span></a></li>');
 			$button.click($.proxy(this._click, this)).prependTo($('.contentNavigation:eq(0) > nav:not(.pageNavigation) > ul'));
 		}
 	},
diff --git a/wcfsetup/install/files/acp/templates/acpSessionLog.tpl b/wcfsetup/install/files/acp/templates/acpSessionLog.tpl
index 7bcc6f3cea..15cd209dcc 100644
--- a/wcfsetup/install/files/acp/templates/acpSessionLog.tpl
+++ b/wcfsetup/install/files/acp/templates/acpSessionLog.tpl
@@ -9,7 +9,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='ACPSessionLogList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.sessionLog.list{/lang}</span></a></li>
+			<li><a href="{link controller='ACPSessionLogList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.sessionLog.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -60,7 +60,7 @@
 		
 		<nav>
 			<ul>
-				<li><a href="{link controller='ACPSessionLogList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.sessionLog.list{/lang}</span></a></li>
+				<li><a href="{link controller='ACPSessionLogList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.sessionLog.list{/lang}</span></a></li>
 				
 				{event name='contentNavigationButtonsBottom'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/adAdd.tpl b/wcfsetup/install/files/acp/templates/adAdd.tpl
index 6938aeee80..d5253ff874 100644
--- a/wcfsetup/install/files/acp/templates/adAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/adAdd.tpl
@@ -23,7 +23,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='AdList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.ad.list{/lang}</span></a></li>
+			<li><a href="{link controller='AdList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.ad.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/adList.tpl b/wcfsetup/install/files/acp/templates/adList.tpl
index 7dd12c989a..34b2f1c1fa 100644
--- a/wcfsetup/install/files/acp/templates/adList.tpl
+++ b/wcfsetup/install/files/acp/templates/adList.tpl
@@ -19,7 +19,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='AdAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.menu.link.ad.add{/lang}</span></a></li>
+			<li><a href="{link controller='AdAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.menu.link.ad.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -34,8 +34,8 @@
 					<span class="sortableNodeLabel">
 						<span class="statusDisplay sortableButtonContainer">
 							<span class="icon icon16 icon-check{if $ad->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $ad->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$ad->adID}"></span>
-							<a href="{link controller='AdEdit' object=$ad}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
-							<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$ad->adID}" data-confirm-message="{lang}wcf.acp.ad.delete.confirmMessage{/lang}"></span>
+							<a href="{link controller='AdEdit' object=$ad}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+							<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$ad->adID}" data-confirm-message="{lang}wcf.acp.ad.delete.confirmMessage{/lang}"></span>
 							
 							{event name='itemButtons'}
 						</span>
@@ -56,7 +56,7 @@
 		
 		<nav>
 			<ul>
-				<li><a href="{link controller='AdAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.menu.link.ad.add{/lang}</span></a></li>
+				<li><a href="{link controller='AdAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.menu.link.ad.add{/lang}</span></a></li>
 				
 				{event name='contentNavigationButtonsBottom'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/applicationEdit.tpl b/wcfsetup/install/files/acp/templates/applicationEdit.tpl
index 8ff1967802..d8b9baa203 100644
--- a/wcfsetup/install/files/acp/templates/applicationEdit.tpl
+++ b/wcfsetup/install/files/acp/templates/applicationEdit.tpl
@@ -29,9 +29,9 @@
 	<nav>
 		<ul>
 			{if $application->packageID != 1 && !$application->isPrimary}
-				<li><a id="setAsPrimary" class="button"><span class="icon icon16 icon-ok-sign"></span> <span>{lang}wcf.acp.application.setAsPrimary{/lang}</span></a></li>
+				<li><a id="setAsPrimary" class="button"><span class="icon icon16 fa-home"></span> <span>{lang}wcf.acp.application.setAsPrimary{/lang}</span></a></li>
 			{/if}
-			<li><a href="{link controller='ApplicationManagement'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.application.management{/lang}</span></a></li>
+			<li><a href="{link controller='ApplicationManagement'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.application.management{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/applicationManagement.tpl b/wcfsetup/install/files/acp/templates/applicationManagement.tpl
index 98c1d7f082..8d39dd832b 100644
--- a/wcfsetup/install/files/acp/templates/applicationManagement.tpl
+++ b/wcfsetup/install/files/acp/templates/applicationManagement.tpl
@@ -37,14 +37,14 @@
 		<tbody>
 			{foreach from=$applicationList item=application}
 				<tr>
-					<td class="columnIcon"><a href="{link controller='ApplicationEdit' id=$application->packageID}{/link}" class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}"><span class="icon icon16 icon-pencil"></span></a></td>
+					<td class="columnIcon"><a href="{link controller='ApplicationEdit' id=$application->packageID}{/link}" class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}"><span class="icon icon16 fa-pencil"></span></a></td>
 					<td class="columnID columnPackageID">{#$application->packageID}</td>
 					<td class="columnText columnPackageName">
 						<a href="{link controller='ApplicationEdit' id=$application->packageID}{/link}">{$application->getPackage()}</a>
 						{if $application->isPrimary}
 							<aside class="statusDisplay">
 								<ul class="statusIcons">
-									<li><span class="icon icon16 icon-ok-sign jsTooltip" title="{lang}wcf.acp.application.primaryApplication{/lang}"></span></li>
+									<li><span class="icon icon16 fa-home jsTooltip" title="{lang}wcf.acp.application.primaryApplication{/lang}"></span></li>
 								</ul>
 							</aside>
 						{/if}
diff --git a/wcfsetup/install/files/acp/templates/attachmentList.tpl b/wcfsetup/install/files/acp/templates/attachmentList.tpl
index 9aacb25e1e..a3d5a0cad4 100644
--- a/wcfsetup/install/files/acp/templates/attachmentList.tpl
+++ b/wcfsetup/install/files/acp/templates/attachmentList.tpl
@@ -98,7 +98,7 @@
 				{foreach from=$objects item=attachment}
 					<tr class="jsAttachmentRow">
 						<td class="columnIcon">
-							<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$attachment->attachmentID}" data-confirm-message="{lang}wcf.attachment.delete.sure{/lang}"></span>
+							<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$attachment->attachmentID}" data-confirm-message="{lang}wcf.attachment.delete.sure{/lang}"></span>
 							
 							{event name='rowButtons'}
 						</td>
diff --git a/wcfsetup/install/files/acp/templates/bbcodeAdd.tpl b/wcfsetup/install/files/acp/templates/bbcodeAdd.tpl
index c3cca1c1ff..724785edc4 100644
--- a/wcfsetup/install/files/acp/templates/bbcodeAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/bbcodeAdd.tpl
@@ -2,7 +2,7 @@
 
 {capture assign='attributeTemplate'}
 	<fieldset>
-		<legend><span class="icon icon16 icon-remove pointer jsDeleteButton jsTooltip" title="{lang}wcf.global.button.delete{/lang}"></span> <span>{lang}wcf.acp.bbcode.attribute{/lang} {ldelim}#$attributeNo}</span></legend>
+		<legend><span class="icon icon16 fa-times pointer jsDeleteButton jsTooltip" title="{lang}wcf.global.button.delete{/lang}"></span> <span>{lang}wcf.acp.bbcode.attribute{/lang} {ldelim}#$attributeNo}</span></legend>
 		<dl>
 			<dt><label for="attributes[{ldelim}@$attributeNo}][attributeHtml]">{lang}wcf.acp.bbcode.attribute.attributeHtml{/lang}</label></dt>
 			<dd>
@@ -88,7 +88,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='BBCodeList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.bbcode.list{/lang}</span></a></li>
+			<li><a href="{link controller='BBCodeList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.bbcode.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
@@ -224,7 +224,7 @@
 			
 			{foreach from=$attributes item='attribute'}
 				<fieldset>
-					<legend><span class="icon icon16 icon-remove pointer jsDeleteButton jsTooltip" title="{lang}wcf.global.button.delete{/lang}"></span> <span>{lang}wcf.acp.bbcode.attribute{/lang} {#$attribute->attributeNo}</span></legend>
+					<legend><span class="icon icon16 fa-times pointer jsDeleteButton jsTooltip" title="{lang}wcf.global.button.delete{/lang}"></span> <span>{lang}wcf.acp.bbcode.attribute{/lang} {#$attribute->attributeNo}</span></legend>
 					
 					<dl{if $errorField == 'attributeHtml'|concat:$attribute->attributeNo} class="formError"{/if}>
 						<dt><label for="attributes[{@$attribute->attributeNo}][attributeHtml]">{lang}wcf.acp.bbcode.attribute.attributeHtml{/lang}</label></dt>
diff --git a/wcfsetup/install/files/acp/templates/bbcodeList.tpl b/wcfsetup/install/files/acp/templates/bbcodeList.tpl
index bbfef911dd..469fbe7267 100644
--- a/wcfsetup/install/files/acp/templates/bbcodeList.tpl
+++ b/wcfsetup/install/files/acp/templates/bbcodeList.tpl
@@ -18,7 +18,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='BBCodeAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.bbcode.add{/lang}</span></a></li>
+			<li><a href="{link controller='BBCodeAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.bbcode.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -46,10 +46,10 @@
 				{foreach from=$objects item=bbcode}
 					<tr class="jsBBCodeRow">
 						<td class="columnIcon">
-							<span class="icon icon16 icon-check{if $bbcode->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $bbcode->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$bbcode->bbcodeID}"></span>
-							<a href="{link controller='BBCodeEdit' object=$bbcode}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
+							<span class="icon icon16 fa-{if !$bbcode->isDisabled}check-{/if}square-o jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $bbcode->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$bbcode->bbcodeID}"></span>
+							<a href="{link controller='BBCodeEdit' object=$bbcode}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
 							{if $bbcode->canDelete()}
-								<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$bbcode->bbcodeID}" data-confirm-message="{lang}wcf.acp.bbcode.delete.sure{/lang}"></span>
+								<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$bbcode->bbcodeID}" data-confirm-message="{lang}wcf.acp.bbcode.delete.sure{/lang}"></span>
 							{else}
 								<span class="icon icon16 fa-times disabled"></span>
 							{/if}
@@ -72,7 +72,7 @@
 		
 		<nav>
 			<ul>
-				<li><a href="{link controller='BBCodeAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.bbcode.add{/lang}</span></a></li>
+				<li><a href="{link controller='BBCodeAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.bbcode.add{/lang}</span></a></li>
 				
 				{event name='contentNavigationButtonsBottom'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/bbcodeMediaProviderAdd.tpl b/wcfsetup/install/files/acp/templates/bbcodeMediaProviderAdd.tpl
index c2febc3ae1..3836c3e416 100644
--- a/wcfsetup/install/files/acp/templates/bbcodeMediaProviderAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/bbcodeMediaProviderAdd.tpl
@@ -13,7 +13,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='BBCodeMediaProviderList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.bbcode.mediaProvider.list{/lang}</span></a></li>
+			<li><a href="{link controller='BBCodeMediaProviderList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.bbcode.mediaProvider.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/bbcodeMediaProviderList.tpl b/wcfsetup/install/files/acp/templates/bbcodeMediaProviderList.tpl
index 591816a1d8..ed9ec4d1c4 100644
--- a/wcfsetup/install/files/acp/templates/bbcodeMediaProviderList.tpl
+++ b/wcfsetup/install/files/acp/templates/bbcodeMediaProviderList.tpl
@@ -17,7 +17,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='BBCodeMediaProviderAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.bbcode.mediaProvider.add{/lang}</span></a></li>
+			<li><a href="{link controller='BBCodeMediaProviderAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.bbcode.mediaProvider.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -44,8 +44,8 @@
 				{foreach from=$objects item='mediaProvider'}
 					<tr class="jsMediaProviderRow">
 						<td class="columnIcon">
-							<a href="{link controller='BBCodeMediaProviderEdit' object=$mediaProvider}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
-							<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$mediaProvider->providerID}" data-confirm-message="{lang}wcf.acp.bbcode.mediaProvider.delete.sure{/lang}"></span>
+							<a href="{link controller='BBCodeMediaProviderEdit' object=$mediaProvider}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+							<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$mediaProvider->providerID}" data-confirm-message="{lang}wcf.acp.bbcode.mediaProvider.delete.sure{/lang}"></span>
 							
 							{event name='rowButtons'}
 						</td>
@@ -64,7 +64,7 @@
 		
 		<nav>
 			<ul>
-				<li><a href="{link controller='BBCodeMediaProviderAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.bbcode.mediaProvider.add{/lang}</span></a></li>
+				<li><a href="{link controller='BBCodeMediaProviderAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.bbcode.mediaProvider.add{/lang}</span></a></li>
 				
 				{event name='contentNavigationButtonsBottom'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/cacheList.tpl b/wcfsetup/install/files/acp/templates/cacheList.tpl
index 1cba0b08c5..fad0c3f11a 100644
--- a/wcfsetup/install/files/acp/templates/cacheList.tpl
+++ b/wcfsetup/install/files/acp/templates/cacheList.tpl
@@ -19,7 +19,7 @@
 		<dl>
 			<dt>{lang}wcf.acp.cache.data.source{/lang}</dt>
 			<dd>
-				{assign var='__source' value='\\'|explode:$cacheData.source}
+				{assign var='__source' value="\\"|explode:$cacheData.source}
 				{lang}wcf.acp.cache.source.type.{$__source|array_pop}{/lang}
 				<small>{$cacheData.source}</small>
 			</dd>
@@ -47,7 +47,7 @@
 	<nav>
 		<ul>
 			{if $cacheData.files}
-				<li><a onclick="WCF.System.Confirmation.show('{lang}wcf.acp.cache.clear.sure{/lang}', $.proxy(function (action) { if (action == 'confirm') window.location.href = $(this).attr('href'); }, this)); return false;" href="{link controller='CacheClear'}{/link}" class="button"><span class="icon icon16 icon-remove"></span> <span>{lang}wcf.acp.cache.button.clear{/lang}</span></a></li>
+				<li><a onclick="WCF.System.Confirmation.show('{lang}wcf.acp.cache.clear.sure{/lang}', $.proxy(function (action) { if (action == 'confirm') window.location.href = $(this).attr('href'); }, this)); return false;" href="{link controller='CacheClear'}{/link}" class="button"><span class="icon icon16 fa-times"></span> <span>{lang}wcf.acp.cache.button.clear{/lang}</span></a></li>
 			{/if}
 			
 			{event name='contentNavigationButtonsTop'}
@@ -60,8 +60,8 @@
 		{counter name=cacheIndex assign=cacheIndex print=false start=0}
 		
 		{if $files|count}
-			<div class="tabularBox tabularBoxTitle marginTop">
-				<header>
+			<section class="tabularBox tabularBoxTitle marginTop">
+				<header class="boxHeadline">
 					<h2><a class="jsCollapsible jsTooltip" data-is-open="0" data-collapsible-container="cache{@$cacheIndex}" title="{lang}wcf.global.button.collapsible{/lang}" class="jsTooltip"><span class="icon icon16 icon-chevron-right"></span></a> {lang}wcf.acp.cache.type.{$cacheType}{/lang} <span class="badge badgeInverse">{#$files|count}</span></h2>
 					<small>{$cache}</small>
 				</header>
@@ -91,7 +91,7 @@
 						{/foreach}
 					</tbody>
 				</table>
-			</div>
+			</section>
 		{/if}
 	{/foreach}
 {/foreach}
@@ -100,7 +100,7 @@
 	<nav>
 		<ul>
 			{if $cacheData.files}
-				<li><a onclick="WCF.System.Confirmation.show('{lang}wcf.acp.cache.clear.sure{/lang}', $.proxy(function (action) { if (action == 'confirm') window.location.href = $(this).attr('href'); }, this)); return false;" href="{link controller='CacheClear'}{/link}" class="button"><span class="icon icon16 icon-remove"></span> <span>{lang}wcf.acp.cache.button.clear{/lang}</span></a></li>
+				<li><a onclick="WCF.System.Confirmation.show('{lang}wcf.acp.cache.clear.sure{/lang}', $.proxy(function (action) { if (action == 'confirm') window.location.href = $(this).attr('href'); }, this)); return false;" href="{link controller='CacheClear'}{/link}" class="button"><span class="icon icon16 fa-times"></span> <span>{lang}wcf.acp.cache.button.clear{/lang}</span></a></li>
 			{/if}
 			
 			{event name='contentNavigationButtonsBottom'}
diff --git a/wcfsetup/install/files/acp/templates/captchaQuestionAdd.tpl b/wcfsetup/install/files/acp/templates/captchaQuestionAdd.tpl
index 28746c4e7a..ced8be9648 100644
--- a/wcfsetup/install/files/acp/templates/captchaQuestionAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/captchaQuestionAdd.tpl
@@ -13,7 +13,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='CaptchaQuestionList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.captcha.question.list{/lang}</span></a></li>
+			<li><a href="{link controller='CaptchaQuestionList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.captcha.question.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/captchaQuestionList.tpl b/wcfsetup/install/files/acp/templates/captchaQuestionList.tpl
index 805b9bf8dd..3322baa00c 100644
--- a/wcfsetup/install/files/acp/templates/captchaQuestionList.tpl
+++ b/wcfsetup/install/files/acp/templates/captchaQuestionList.tpl
@@ -30,7 +30,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='CaptchaQuestionAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.captcha.question.add{/lang}</span></a></li>
+			<li><a href="{link controller='CaptchaQuestionAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.captcha.question.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -58,9 +58,9 @@
 					{foreach from=$objects item='question'}
 						<tr class="jsQuestionRow">
 							<td class="columnIcon">
-								<span class="icon icon16 icon-check{if $question->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $question->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$question->questionID}"></span>
-								<a href="{link controller='CaptchaQuestionEdit' id=$question->questionID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
-								<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$question->questionID}" data-confirm-message="{lang}wcf.acp.captcha.question.delete.confirmMessage{/lang}"></span>
+								<span class="icon icon16 fa-{if !$question->isDisabled}-check{/if}-square-o jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $question->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$question->questionID}"></span>
+								<a href="{link controller='CaptchaQuestionEdit' id=$question->questionID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+								<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$question->questionID}" data-confirm-message="{lang}wcf.acp.captcha.question.delete.confirmMessage{/lang}"></span>
 								
 								{event name='rowButtons'}
 							</td>
@@ -83,7 +83,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='CaptchaQuestionAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.captcha.question.add{/lang}</span></a></li>
+			<li><a href="{link controller='CaptchaQuestionAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.captcha.question.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsBottom'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/categoryAdd.tpl b/wcfsetup/install/files/acp/templates/categoryAdd.tpl
index 8055345f52..1adc9fdf56 100644
--- a/wcfsetup/install/files/acp/templates/categoryAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/categoryAdd.tpl
@@ -44,7 +44,7 @@
 					{/if}
 					
 					{if $objectType->getProcessor()->canDeleteCategory() || $objectType->getProcessor()->canEditCategory()}
-						<li><a href="{link controller=$listController application=$objectType->getProcessor()->getApplication()}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{@$objectType->getProcessor()->getLanguageVariable('button.list')}</span></a></li>
+						<li><a href="{link controller=$listController application=$objectType->getProcessor()->getApplication()}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{@$objectType->getProcessor()->getLanguageVariable('button.list')}</span></a></li>
 					{/if}
 					
 					{event name='contentNavigationButtons'}
diff --git a/wcfsetup/install/files/acp/templates/categoryList.tpl b/wcfsetup/install/files/acp/templates/categoryList.tpl
index 9dedf6ae68..443693680b 100644
--- a/wcfsetup/install/files/acp/templates/categoryList.tpl
+++ b/wcfsetup/install/files/acp/templates/categoryList.tpl
@@ -76,7 +76,7 @@
 			<ul>
 				{content}
 					{if $objectType->getProcessor()->canAddCategory()}
-						<li><a href="{link controller=$addController application=$objectType->getProcessor()->getApplication()}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{@$objectType->getProcessor()->getLanguageVariable('add')}</span></a></li>
+						<li><a href="{link controller=$addController application=$objectType->getProcessor()->getApplication()}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{@$objectType->getProcessor()->getLanguageVariable('add')}</span></a></li>
 					{/if}
 					
 					{event name='contentNavigationButtons'}
@@ -106,11 +106,11 @@
 							
 							<span class="statusDisplay buttons">
 								{if $objectType->getProcessor()->canEditCategory()}
-									<a href="{link controller=$editController application=$objectType->getProcessor()->getApplication() id=$category->categoryID title=$category->getTitle()}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
+									<a href="{link controller=$editController application=$objectType->getProcessor()->getApplication() id=$category->categoryID title=$category->getTitle()}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
 								{/if}
 								
 								{if $objectType->getProcessor()->canDeleteCategory()}
-									<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$category->categoryID}" data-confirm-message="{@$objectType->getProcessor()->getLanguageVariable('delete.sure')}"></span>
+									<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$category->categoryID}" data-confirm-message="{@$objectType->getProcessor()->getLanguageVariable('delete.sure')}"></span>
 								{/if}
 								
 								{if $objectType->getProcessor()->canEditCategory()}
diff --git a/wcfsetup/install/files/acp/templates/cronjobAdd.tpl b/wcfsetup/install/files/acp/templates/cronjobAdd.tpl
index 545fc8bc42..bd81e4ca57 100644
--- a/wcfsetup/install/files/acp/templates/cronjobAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/cronjobAdd.tpl
@@ -15,7 +15,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='CronjobList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.cronjob.list{/lang}</span></a></li>
+			<li><a href="{link controller='CronjobList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.cronjob.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/cronjobList.tpl b/wcfsetup/install/files/acp/templates/cronjobList.tpl
index 960731ab2d..7455a6a55a 100644
--- a/wcfsetup/install/files/acp/templates/cronjobList.tpl
+++ b/wcfsetup/install/files/acp/templates/cronjobList.tpl
@@ -21,7 +21,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='CronjobAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.cronjob.add{/lang}</span></a></li>
+			<li><a href="{link controller='CronjobAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.cronjob.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -55,27 +55,27 @@
 					{foreach from=$objects item=cronjob}
 						<tr class="jsCronjobRow">
 							<td class="columnIcon">
-								<span class="icon icon16 icon-play jsExecuteButton jsTooltip pointer" title="{lang}wcf.acp.cronjob.execute{/lang}" data-object-id="{@$cronjob->cronjobID}"></span>
+								<span class="icon icon16 fa-play jsExecuteButton jsTooltip pointer" title="{lang}wcf.acp.cronjob.execute{/lang}" data-object-id="{@$cronjob->cronjobID}"></span>
 								
 								{if $cronjob->canBeDisabled()}
-									<span class="icon icon16 icon-check{if $cronjob->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if !$cronjob->isDisabled}disable{else}enable{/if}{/lang}" data-object-id="{@$cronjob->cronjobID}"></span>
+									<span class="icon icon16 fa-{if !$cronjob->isDisabled}check-{/if}square-o jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if !$cronjob->isDisabled}disable{else}enable{/if}{/lang}" data-object-id="{@$cronjob->cronjobID}"></span>
 								{else}
 									{if !$cronjob->isDisabled}
-										<span class="icon icon16 icon-check disabled" title="{lang}wcf.global.button.disable{/lang}"></span>
+										<span class="icon icon16 fa-check-square-o disabled" title="{lang}wcf.global.button.disable{/lang}"></span>
 									{else}
-										<span class="icon icon16 icon-check-empty disabled" title="{lang}wcf.global.button.enable{/lang}"></span>
+										<span class="icon icon16 fa-square-o disabled" title="{lang}wcf.global.button.enable{/lang}"></span>
 									{/if}
 								{/if}
 								
 								{if $cronjob->isEditable()}
-									<a href="{link controller='CronjobEdit' id=$cronjob->cronjobID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
+									<a href="{link controller='CronjobEdit' id=$cronjob->cronjobID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
 								{else}
-									<span class="icon icon16 icon-pencil disabled" title="{lang}wcf.global.button.edit{/lang}"></span>
+									<span class="icon icon16 fa-pencil disabled" title="{lang}wcf.global.button.edit{/lang}"></span>
 								{/if}
 								{if $cronjob->isDeletable()}
-									<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$cronjob->cronjobID}" data-confirm-message="{lang}wcf.acp.cronjob.delete.sure{/lang}"></span>
+									<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$cronjob->cronjobID}" data-confirm-message="{lang}wcf.acp.cronjob.delete.sure{/lang}"></span>
 								{else}
-									<span class="icon icon16 icon-remove disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
+									<span class="icon icon16 fa-times disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
 								{/if}
 								
 								{event name='rowButtons'}
@@ -115,7 +115,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='CronjobAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.cronjob.add{/lang}</span></a></li>
+			<li><a href="{link controller='CronjobAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.cronjob.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsBottom'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/cronjobLogList.tpl b/wcfsetup/install/files/acp/templates/cronjobLogList.tpl
index 76c385f252..3e2bc5b5bb 100644
--- a/wcfsetup/install/files/acp/templates/cronjobLogList.tpl
+++ b/wcfsetup/install/files/acp/templates/cronjobLogList.tpl
@@ -25,7 +25,7 @@
 			<ul>
 				{content}
 					{if $objects|count}
-						<li><a title="{lang}wcf.acp.cronjob.log.clear{/lang}" class="button jsCronjobLogDelete"><span class="icon icon16 icon-remove"></span> <span>{lang}wcf.acp.cronjob.log.clear{/lang}</span></a></li>
+						<li><a title="{lang}wcf.acp.cronjob.log.clear{/lang}" class="button jsCronjobLogDelete"><span class="icon icon16 fa-times"></span> <span>{lang}wcf.acp.cronjob.log.clear{/lang}</span></a></li>
 					{/if}
 					
 					{event name='contentNavigationButtonsTop'}
@@ -85,7 +85,7 @@
 		
 		<nav>
 			<ul>
-				<li><a title="{lang}wcf.acp.cronjob.log.clear{/lang}" class="button jsCronjobLogDelete"><span class="icon icon16 icon-remove"></span> <span>{lang}wcf.acp.cronjob.log.clear{/lang}</span></a></li>
+				<li><a title="{lang}wcf.acp.cronjob.log.clear{/lang}" class="button jsCronjobLogDelete"><span class="icon icon16 fa-times"></span> <span>{lang}wcf.acp.cronjob.log.clear{/lang}</span></a></li>
 				
 				{event name='contentNavigationButtonsBottom'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/dashboardList.tpl b/wcfsetup/install/files/acp/templates/dashboardList.tpl
index cab3e85478..8e328ffd23 100644
--- a/wcfsetup/install/files/acp/templates/dashboardList.tpl
+++ b/wcfsetup/install/files/acp/templates/dashboardList.tpl
@@ -35,7 +35,7 @@
 			{foreach from=$objectTypes item=$objectType}
 				<tr>
 					<td class="columnIcon">
-						<a href="{link controller='DashboardOption' id=$objectType->objectTypeID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
+						<a href="{link controller='DashboardOption' id=$objectType->objectTypeID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
 						
 						{event name='rowButtons'}
 					</td>
diff --git a/wcfsetup/install/files/acp/templates/dashboardOption.tpl b/wcfsetup/install/files/acp/templates/dashboardOption.tpl
index c024e05a8c..851775d915 100644
--- a/wcfsetup/install/files/acp/templates/dashboardOption.tpl
+++ b/wcfsetup/install/files/acp/templates/dashboardOption.tpl
@@ -18,7 +18,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='DashboardList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.dashboard.list{/lang}</span></a></li>
+			<li><a href="{link controller='DashboardList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.dashboard.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 6922732741..9545d28f47 100644
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -7,6 +7,7 @@
 	<title>{if $pageTitle|isset}{@$pageTitle|language} - {/if}{lang}wcf.global.acp{/lang}{if PACKAGE_ID} - {PAGE_TITLE|language}{/if}</title>
 	
 	<!-- Stylesheets -->
+	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
 	{@$__wcf->getStyleHandler()->getStylesheet(true)}
 	{event name='stylesheets'}
 	
@@ -146,6 +147,18 @@
 <body id="tpl{$templateName|ucfirst}" data-template="{$templateName}" data-application="{$templateNameApplication}" class="wcfAcp">
 	<a id="top"></a>
 	
+	<div id="pageContainer" class="pageContainer">
+		{event name='beforePageHeader'}
+		
+		{include file='pageHeader'}
+		
+		{event name='afterPageHeader'}
+		
+		{*include file='pageNavbarTop'*}
+		
+		<section id="main" class="main" role="main">
+	
+	{*
 	<header id="pageHeader" class="layoutFluid">
 		<div>
 			{if $__wcf->user->userID}
@@ -228,7 +241,7 @@
 				</a>
 			</div>
 			
-			{* work-around for unknown core-object during WCFSetup *}
+			*}{* work-around for unknown core-object during WCFSetup *}{*
 			{if PACKAGE_ID && $__wcf->user->userID}
 				{hascontent}
 					<nav id="mainMenu" class="mainMenu">
@@ -245,6 +258,7 @@
 			</nav>
 		</div>
 	</header>
+	*}
 	
 	<div id="main" class="layoutFluid{if PACKAGE_ID && $__wcf->user->userID && $__wcf->getACPMenu()->getMenuItems('')|count} sidebarOrientationLeft{/if}">
 		<div>
diff --git a/wcfsetup/install/files/acp/templates/labelAdd.tpl b/wcfsetup/install/files/acp/templates/labelAdd.tpl
index 9479cc8a12..9d01ce98d8 100644
--- a/wcfsetup/install/files/acp/templates/labelAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/labelAdd.tpl
@@ -30,7 +30,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='LabelList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.label.list{/lang}</span></a></li>
+			<li><a href="{link controller='LabelList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.label.list{/lang}</span></a></li>
 				
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/labelGroupAdd.tpl b/wcfsetup/install/files/acp/templates/labelGroupAdd.tpl
index 1b261b8d69..9ec3cf64ed 100644
--- a/wcfsetup/install/files/acp/templates/labelGroupAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/labelGroupAdd.tpl
@@ -33,7 +33,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='LabelGroupList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.label.group.list{/lang}</span></a></li>
+			<li><a href="{link controller='LabelGroupList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.label.group.list{/lang}</span></a></li>
 				
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/labelGroupList.tpl b/wcfsetup/install/files/acp/templates/labelGroupList.tpl
index de70a9bcfc..11e13adfe9 100644
--- a/wcfsetup/install/files/acp/templates/labelGroupList.tpl
+++ b/wcfsetup/install/files/acp/templates/labelGroupList.tpl
@@ -29,7 +29,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='LabelGroupAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.label.group.add{/lang}</span></a></li>
+			<li><a href="{link controller='LabelGroupAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.label.group.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -58,8 +58,8 @@
 				{foreach from=$objects item=group}
 					<tr class="jsLabelGroupRow">
 						<td class="columnIcon">
-							<a href="{link controller='LabelGroupEdit' object=$group}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
-							<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$group->groupID}" data-confirm-message="{lang}wcf.acp.label.group.delete.sure{/lang}"></span>
+							<a href="{link controller='LabelGroupEdit' object=$group}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+							<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$group->groupID}" data-confirm-message="{lang}wcf.acp.label.group.delete.sure{/lang}"></span>
 							
 							{event name='rowButtons'}
 						</td>
@@ -80,7 +80,7 @@
 		
 		<nav>
 			<ul>
-				<li><a href="{link controller='LabelGroupAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.label.group.add{/lang}</span></a></li>
+				<li><a href="{link controller='LabelGroupAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.label.group.add{/lang}</span></a></li>
 				
 				{event name='contentNavigationButtonsBottom'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/labelList.tpl b/wcfsetup/install/files/acp/templates/labelList.tpl
index 331fa2af1f..99ec476251 100644
--- a/wcfsetup/install/files/acp/templates/labelList.tpl
+++ b/wcfsetup/install/files/acp/templates/labelList.tpl
@@ -29,7 +29,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='LabelAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.label.add{/lang}</span></a></li>
+			<li><a href="{link controller='LabelAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.label.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -57,8 +57,8 @@
 				{foreach from=$objects item=label}
 					<tr class="jsLabelRow">
 						<td class="columnIcon">
-							<a href="{link controller='LabelEdit' object=$label}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
-							<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$label->labelID}" data-confirm-message="{lang}wcf.acp.label.delete.sure{/lang}"></span>
+							<a href="{link controller='LabelEdit' object=$label}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+							<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$label->labelID}" data-confirm-message="{lang}wcf.acp.label.delete.sure{/lang}"></span>
 							
 							{event name='rowButtons'}
 						</td>
@@ -78,7 +78,7 @@
 		
 		<nav>
 			<ul>
-				<li><a href="{link controller='LabelAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.label.add{/lang}</span></a></li>
+				<li><a href="{link controller='LabelAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.label.add{/lang}</span></a></li>
 				
 				{event name='contentNavigationButtonsBottom'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/languageAdd.tpl b/wcfsetup/install/files/acp/templates/languageAdd.tpl
index f41933ae73..a5a8015c4c 100644
--- a/wcfsetup/install/files/acp/templates/languageAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/languageAdd.tpl
@@ -13,7 +13,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='LanguageList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.language.list{/lang}</span></a></li>
+			<li><a href="{link controller='LanguageList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.language.list{/lang}</span></a></li>
 				
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/languageExport.tpl b/wcfsetup/install/files/acp/templates/languageExport.tpl
index b0f2b9757e..7a6955ea88 100644
--- a/wcfsetup/install/files/acp/templates/languageExport.tpl
+++ b/wcfsetup/install/files/acp/templates/languageExport.tpl
@@ -9,7 +9,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='LanguageList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.language.list{/lang}</span></a></li>
+			<li><a href="{link controller='LanguageList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.language.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/languageImport.tpl b/wcfsetup/install/files/acp/templates/languageImport.tpl
index 66221e9c54..ea91f2841b 100644
--- a/wcfsetup/install/files/acp/templates/languageImport.tpl
+++ b/wcfsetup/install/files/acp/templates/languageImport.tpl
@@ -13,7 +13,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='LanguageList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.language.list{/lang}</span></a></li>
+			<li><a href="{link controller='LanguageList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.language.list{/lang}</span></a></li>
 				
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/languageList.tpl b/wcfsetup/install/files/acp/templates/languageList.tpl
index ebd09b251d..01ba805e75 100644
--- a/wcfsetup/install/files/acp/templates/languageList.tpl
+++ b/wcfsetup/install/files/acp/templates/languageList.tpl
@@ -26,8 +26,8 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='LanguageAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.language.add{/lang}</span></a></li>
-			<li><a href="{link controller='LanguageImport'}{/link}" class="button"><span class="icon icon16 icon-upload-alt"></span> <span>{lang}wcf.acp.language.import{/lang}</span></a></li>
+			<li><a href="{link controller='LanguageAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.language.add{/lang}</span></a></li>
+			<li><a href="{link controller='LanguageImport'}{/link}" class="button"><span class="icon icon16 fa-upload"></span> <span>{lang}wcf.acp.language.import{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -57,19 +57,19 @@
 				{foreach from=$objects item=language}
 					<tr class="jsLanguageRow">
 						<td class="columnIcon">
-							<a href="{link controller='LanguageExport' id=$language->languageID}{/link}" title="{lang}wcf.acp.language.export{/lang}" class="jsTooltip"><span class="icon icon16 icon-download-alt"></span></a>
+							<a href="{link controller='LanguageExport' id=$language->languageID}{/link}" title="{lang}wcf.acp.language.export{/lang}" class="jsTooltip"><span class="icon icon16 fa-download"></span></a>
 							
 							{if !$language->isDefault}
-								<span class="icon icon16 icon-ok-sign jsSetAsDefaultButton jsTooltip pointer" title="{lang}wcf.acp.language.setAsDefault{/lang}" title="{lang}wcf.acp.language.setAsDefault{/lang}" data-object-id="{@$language->languageID}"></span>
+								<span class="icon icon16 fa-check-square-o jsSetAsDefaultButton jsTooltip pointer" title="{lang}wcf.acp.language.setAsDefault{/lang}" title="{lang}wcf.acp.language.setAsDefault{/lang}" data-object-id="{@$language->languageID}"></span>
 							{else}
-								<span class="icon icon16 icon-ok-sign disabled" title="{lang}wcf.acp.language.setAsDefault{/lang}"></span>
+								<span class="icon icon16 fa-check-square-o disabled" title="{lang}wcf.acp.language.setAsDefault{/lang}"></span>
 							{/if}
 							
-							<a href="{link controller='LanguageEdit' id=$language->languageID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
+							<a href="{link controller='LanguageEdit' id=$language->languageID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
 							{if !$language->isDefault}
-								<span class="icon icon16 icon-remove jsTooltip jsDeleteButton pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$language->languageID}" data-confirm-message="{lang}wcf.acp.language.delete.sure{/lang}"></span>
+								<span class="icon icon16 fa-times jsTooltip jsDeleteButton pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$language->languageID}" data-confirm-message="{lang}wcf.acp.language.delete.sure{/lang}"></span>
 							{else}
-								<span class="icon icon16 icon-remove disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
+								<span class="icon icon16 fa-times disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
 							{/if}
 							
 							{event name='rowButtons'}
@@ -92,8 +92,8 @@
 		
 		<nav>
 			<ul>
-				<li><a href="{link controller='LanguageAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.language.add{/lang}</span></a></li>
-				<li><a href="{link controller='LanguageImport'}{/link}" class="button"><span class="icon icon16 icon-upload-alt"></span> <span>{lang}wcf.acp.language.import{/lang}</span></a></li>
+				<li><a href="{link controller='LanguageAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.language.add{/lang}</span></a></li>
+				<li><a href="{link controller='LanguageImport'}{/link}" class="button"><span class="icon icon16 fa-upload"></span> <span>{lang}wcf.acp.language.import{/lang}</span></a></li>
 					
 				{event name='contentNavigationButtonsBottom'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/languageServerAdd.tpl b/wcfsetup/install/files/acp/templates/languageServerAdd.tpl
index 88cce63a40..f54e5651f5 100644
--- a/wcfsetup/install/files/acp/templates/languageServerAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/languageServerAdd.tpl
@@ -13,7 +13,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='LanguageServerList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.language.server.list{/lang}</span></a></li>
+			<li><a href="{link controller='LanguageServerList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.language.server.list{/lang}</span></a></li>
 				
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/languageServerList.tpl b/wcfsetup/install/files/acp/templates/languageServerList.tpl
index a0e56bf7b6..8341511699 100644
--- a/wcfsetup/install/files/acp/templates/languageServerList.tpl
+++ b/wcfsetup/install/files/acp/templates/languageServerList.tpl
@@ -18,7 +18,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='LanguageServerAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.languageServer.add{/lang}</span></a></li>
+			<li><a href="{link controller='LanguageServerAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.languageServer.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -47,9 +47,9 @@
 					<tr class="jsLanguageServerRow">
 						<td class="columnIcon">
 							<span class="icon icon16 icon-check{if $languageServer->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if !$languageServer->isDisabled}disable{else}enable{/if}{/lang}" data-object-id="{@$languageServer->languageServerID}"></span>
-							<a href="{link controller='LanguageServerEdit' id=$languageServer->languageServerID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
+							<a href="{link controller='LanguageServerEdit' id=$languageServer->languageServerID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
 							
-							<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$languageServer->languageServerID}" data-confirm-message="{lang}wcf.acp.languageServer.delete.sure{/lang}"></span>
+							<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$languageServer->languageServerID}" data-confirm-message="{lang}wcf.acp.languageServer.delete.sure{/lang}"></span>
 							
 							{event name='rowButtons'}
 						</td>
@@ -70,7 +70,7 @@
 		
 		<nav>
 			<ul>
-				<li><a href="{link controller='LanguageServerAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.languageServer.add{/lang}</span></a></li>
+				<li><a href="{link controller='LanguageServerAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.languageServer.add{/lang}</span></a></li>
 				
 				{event name='contentNavigationButtonsBottom'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/mainMenu.tpl b/wcfsetup/install/files/acp/templates/mainMenu.tpl
new file mode 100644
index 0000000000..e82a5db030
--- /dev/null
+++ b/wcfsetup/install/files/acp/templates/mainMenu.tpl
@@ -0,0 +1,232 @@
+<nav id="mainMenu" class="mainMenu jsMobileNavigation" data-button-label="{lang}wcf.page.mainMenu{/lang}">
+	<ul>
+		<li>
+			<a href="#" id="daytay"><span class="icon icon24 fa-bars"></span> Menu</a>
+			
+			<ol id="dtdesign">
+				<li id="leftColumnContainer">
+					<ol id="leftColumn" class="menuItemList"></ol>
+				</li>
+				<li id="centerColumnContainer"></li>
+				<li id="rightColumnContainer"></li>
+			</ol>
+		</li>
+	</ul>
+</nav>
+
+{* work-around for unknown core-object during WCFSetup *}
+{*{if PACKAGE_ID && $__wcf->user->userID}
+	<nav id="mainMenu" class="mainMenu jsMobileNavigation" data-button-label="{lang}wcf.page.mainMenu{/lang}">
+		<ul>
+			{foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_parentMenuItem}
+				<li class="subMenuItems">
+					<a href="#">{lang}{@$_parentMenuItem->menuItem}{/lang}</a>
+					
+					<ol class="subMenu">
+						{foreach from=$__wcf->getACPMenu()->getMenuItems($_parentMenuItem->menuItem) item=_menuItem}
+							<li>
+								<a href="#">{@$_menuItem}</a>
+								
+								<ol class="dtdesign">
+									{foreach from=$__wcf->getACPMenu()->getMenuItems($_menuItem->menuItem) item=menuItemCategory}
+										{if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
+											{foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}
+												<li id="{$subMenuItem->menuItem}" data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getLink()}">{@$subMenuItem}</a></li>
+											{/foreach}
+										{else}
+											<li id="{$menuItemCategory->menuItem}" data-menu-item="{$menuItemCategory->menuItem}"><a href="{$menuItemCategory->getLink()}">{@$menuItemCategory}</a></li>
+										{/if}
+									{/foreach}
+								</ol>
+							</li>
+						{/foreach}
+					</ol>
+				</li>
+			{/foreach}
+		</ul>
+	</nav>
+{/if}*}
+
+<script>
+var structure = [], menuCategory, category;
+
+{foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_parentMenuItem}
+	menuCategory = {
+		label: '{lang}{@$_parentMenuItem->menuItem}{/lang}',
+		items: []
+	};
+
+	{foreach from=$__wcf->getACPMenu()->getMenuItems($_parentMenuItem->menuItem) item=_menuItem}
+		category = {
+			label: '{@$_menuItem}',
+			items: []
+		};
+
+		{foreach from=$__wcf->getACPMenu()->getMenuItems($_menuItem->menuItem) item=menuItemCategory}
+			{if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
+				{foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}
+					category.items.push({
+						label: '{@$subMenuItem}',
+						link: '{$subMenuItem->getLink()}'
+					});
+				{/foreach}
+			{else}
+				category.items.push({
+					label: '{@$menuItemCategory}',
+					link: '{$menuItemCategory->getLink()}'
+				});
+			{/if}
+		{/foreach}
+
+		menuCategory.items.push(category);
+	{/foreach}
+	
+	structure.push(menuCategory);
+{/foreach}
+
+const LEFT = 1;
+const CENTER = 2;
+const RIGHT = 3;
+
+function getList(position, isContainer) {
+	var list;
+	if (position === LEFT) {
+		list = 'left';
+	}
+	else {
+		list = (position === CENTER) ? 'center' : 'right';
+	}
+	
+	return document.getElementById(list + 'Column' + (isContainer === true ? 'Container' : ''));
+}
+
+function createListItem(position, label, data, isSubCategory, link) {
+	var list = (typeof position === 'object') ? position : getList(position);
+	
+	var listItem = document.createElement('li');
+	var linkEl = document.createElement('a');
+	linkEl.textContent = label;
+	linkEl.href = (link ? link : '#');
+	
+	listItem.appendChild(linkEl);
+	list.appendChild(listItem);
+	
+	if (!link) {
+		linkEl.addEventListener('click', function(e) {
+			e.preventDefault();
+			
+			showCategories(data, isSubCategory);
+			
+			markAsActive(this);
+		})
+	}
+}
+
+function markAsActive(element) {
+	var list = element.parentNode.parentNode;
+	var item, items = list.querySelectorAll('LI');
+	for (var i = 0, length = items.length; i < length; i++) {
+		item = items[i];
+		console.debug(item);
+		item.classList[(item === element.parentNode ? 'add' : 'remove')]('active2');
+	}
+}
+
+var x;
+for (var i = 0, length = structure.length; i < length; i++) {
+	x = structure[i];
+	
+	createListItem(LEFT, x.label, x.items);
+}
+	
+function showCategories(items, isSubCategory) {
+	var right = getList(RIGHT, true);
+	right.innerHTML = '';
+	
+	var center = getList(CENTER, true);
+	if (isSubCategory !== true) center.innerHTML = '';
+	
+	list = document.createElement('ol');
+	list.className = 'menuItemList';
+	list.id = 'centerColumn';
+	
+	var item;
+	for (var i = 0, length = items.length; i < length; i++) {
+		item = items[i];
+		
+		createListItem(list, item.label, item.items, true, (typeof item.link === 'string') ? item.link : '');
+	}
+	
+	(isSubCategory === true ? right : center).appendChild(list);
+}
+</script>
+
+<style>
+	#mainMenu {
+		position: relative;
+	}
+	
+	#mainMenu .icon {
+		color: rgb(255, 255, 255);
+	}
+	
+	#dtdesign {
+		background-color: #fff;
+		border: 1px solid rgb(44, 62, 80);
+		box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2);
+		display: flex;
+		position: absolute;
+		top: 51px;
+	}
+	
+	#dtdesign > li {
+		flex: 0 auto;
+	}
+	
+	#dtdesign > li:not(:empty) {
+		border-left: 1px solid rgb(238, 238, 238);
+	}
+	
+	#dtdesign > li:first-child {
+		border-left-width: 0;
+	}
+	
+	.menuItemList {
+		min-width: 250px;
+	}
+	
+	.menuItemList > li > a {
+		color: rgb(54, 54, 54);
+		display: block;
+		font-size: 1rem;
+		padding: 10px 40px 10px 20px;
+		white-space: nowrap;
+	}
+	
+	.menuItemList > li.active2 > a {
+		background-color: rgb(189, 195, 199);
+	}
+	
+	.menuItemList > li > a:hover {
+		background-color: rgb(66, 129, 244);
+		color: #fff;
+		text-decoration: none;
+	}
+	
+	.menuItemList > li > a[href="#"] {
+		position: relative;
+	}
+	
+	.menuItemList > li > a[href="#"]::after {
+		content: "\f105";
+		font-family: FontAwesome;
+		position: absolute;
+		right: 20px;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+	
+	.menuItemList > li.active2 > a[href="#"]::after {
+		content: "\f104"
+	}
+</style>
diff --git a/wcfsetup/install/files/acp/templates/mainMenuSubMenu.tpl b/wcfsetup/install/files/acp/templates/mainMenuSubMenu.tpl
new file mode 100644
index 0000000000..e286578487
--- /dev/null
+++ b/wcfsetup/install/files/acp/templates/mainMenuSubMenu.tpl
@@ -0,0 +1,5 @@
+{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/wcfsetup/install/files/acp/templates/noticeAdd.tpl b/wcfsetup/install/files/acp/templates/noticeAdd.tpl
index 22be48ecd3..5cbfe15c94 100644
--- a/wcfsetup/install/files/acp/templates/noticeAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/noticeAdd.tpl
@@ -37,7 +37,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='NoticeList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.notice.list{/lang}</span></a></li>
+			<li><a href="{link controller='NoticeList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.notice.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/noticeList.tpl b/wcfsetup/install/files/acp/templates/noticeList.tpl
index ecb2088bc4..b45c22a91d 100644
--- a/wcfsetup/install/files/acp/templates/noticeList.tpl
+++ b/wcfsetup/install/files/acp/templates/noticeList.tpl
@@ -19,7 +19,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='NoticeAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.menu.link.notice.add{/lang}</span></a></li>
+			<li><a href="{link controller='NoticeAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.menu.link.notice.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -35,9 +35,9 @@
 						<a href="{link controller='NoticeEdit' object=$notice}{/link}">{$notice->noticeName}</a>
 						
 						<span class="statusDisplay sortableButtonContainer">
-							<span class="icon icon16 icon-check{if $notice->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $notice->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$notice->noticeID}"></span>
-							<a href="{link controller='NoticeEdit' object=$notice}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
-							<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$notice->noticeID}" data-confirm-message="{lang}wcf.acp.notice.delete.confirmMessage{/lang}"></span>
+							<span class="icon icon16 fa-{if $notice->isDisabled}check-{/if}square-o jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $notice->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$notice->noticeID}"></span>
+							<a href="{link controller='NoticeEdit' object=$notice}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+							<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$notice->noticeID}" data-confirm-message="{lang}wcf.acp.notice.delete.confirmMessage{/lang}"></span>
 							
 							{event name='itemButtons'}
 						</span>
@@ -56,7 +56,7 @@
 		
 		<nav>
 			<ul>
-				<li><a href="{link controller='NoticeAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.menu.link.notice.add{/lang}</span></a></li>
+				<li><a href="{link controller='NoticeAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.menu.link.notice.add{/lang}</span></a></li>
 				
 				{event name='contentNavigationButtonsBottom'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/package.tpl b/wcfsetup/install/files/acp/templates/package.tpl
index 43a729c5e5..8d625193b5 100644
--- a/wcfsetup/install/files/acp/templates/package.tpl
+++ b/wcfsetup/install/files/acp/templates/package.tpl
@@ -133,9 +133,9 @@
 									<tr class="jsPackageRow">
 										<td class="columnIcon">
 											{if $requiredPackage->canUninstall()}
-												<span class="icon icon16 icon-remove pointer jsTooltip jsUninstallButton" title="{lang}wcf.acp.package.button.uninstall{/lang}" data-object-id="{@$requiredPackage->packageID}" data-confirm-message="{lang package=$requiredPackage}wcf.acp.package.uninstallation.confirm{/lang}" data-is-required="{if $requiredPackage->isRequired()}true{else}false{/if}" data-is-application="{if $requiredPackage->isApplication}true{else}false{/if}"></span>
+												<span class="icon icon16 fa-times pointer jsTooltip jsUninstallButton" title="{lang}wcf.acp.package.button.uninstall{/lang}" data-object-id="{@$requiredPackage->packageID}" data-confirm-message="{lang package=$requiredPackage}wcf.acp.package.uninstallation.confirm{/lang}" data-is-required="{if $requiredPackage->isRequired()}true{else}false{/if}" data-is-application="{if $requiredPackage->isApplication}true{else}false{/if}"></span>
 											{else}
-												<span class="icon icon16 icon-remove disabled" title="{lang}wcf.acp.package.button.uninstall{/lang}"></span>
+												<span class="icon icon16 fa-times disabled" title="{lang}wcf.acp.package.button.uninstall{/lang}"></span>
 											{/if}
 										</td>
 										<td class="columnID">{@$requiredPackage->packageID}</td>
@@ -179,9 +179,9 @@
 									<tr class="jsPackageRow">
 										<td class="columnIcon">
 											{if $dependentPackage->canUninstall()}
-												<span class="icon icon16 icon-remove pointer jsTooltip jsUninstallButton" title="{lang}wcf.acp.package.button.uninstall{/lang}" data-object-id="{@$dependentPackage->packageID}" data-confirm-message="{lang package=$dependentPackage}wcf.acp.package.uninstallation.confirm{/lang}" data-is-required="{if $dependentPackage->isRequired()}true{else}false{/if}" data-is-application="{if $dependentPackage->isApplication}true{else}false{/if}"></span>
+												<span class="icon icon16 fa-times pointer jsTooltip jsUninstallButton" title="{lang}wcf.acp.package.button.uninstall{/lang}" data-object-id="{@$dependentPackage->packageID}" data-confirm-message="{lang package=$dependentPackage}wcf.acp.package.uninstallation.confirm{/lang}" data-is-required="{if $dependentPackage->isRequired()}true{else}false{/if}" data-is-application="{if $dependentPackage->isApplication}true{else}false{/if}"></span>
 											{else}
-												<span class="icon icon16 icon-remove disabled" title="{lang}wcf.acp.package.button.uninstall{/lang}"></span>
+												<span class="icon icon16 fa-times disabled" title="{lang}wcf.acp.package.button.uninstall{/lang}"></span>
 											{/if}
 										</td>
 										<td class="columnID">{@$dependentPackage->packageID}</td>
@@ -211,7 +211,7 @@
 		<ul>
 			{event name='contentNavigationButtonsBottom'}
 			
-			<li><a href="{link controller='PackageList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.package.list{/lang}</span></a></li>
+			<li><a href="{link controller='PackageList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.package.list{/lang}</span></a></li>
 		</ul>
 	</nav>
 </div>
diff --git a/wcfsetup/install/files/acp/templates/packageList.tpl b/wcfsetup/install/files/acp/templates/packageList.tpl
index 85647d59ed..a5552b2e81 100644
--- a/wcfsetup/install/files/acp/templates/packageList.tpl
+++ b/wcfsetup/install/files/acp/templates/packageList.tpl
@@ -46,7 +46,7 @@
 			<ul>
 				{content}
 					{if $__wcf->session->getPermission('admin.system.package.canInstallPackage')}
-						<li><a href="{link controller='PackageStartInstall'}action=install{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.package.startInstall{/lang}</span></a></li>
+						<li><a href="{link controller='PackageStartInstall'}action=install{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.package.startInstall{/lang}</span></a></li>
 					{/if}
 					
 					{event name='contentNavigationButtonsTop'}
@@ -80,9 +80,9 @@
 					<tr class="jsPackageRow">
 						<td class="columnIcon">
 							{if $package->canUninstall()}
-								<span class="icon icon16 icon-remove pointer jsUninstallButton jsTooltip" title="{lang}wcf.acp.package.button.uninstall{/lang}" data-object-id="{@$package->packageID}" data-confirm-message="{lang}wcf.acp.package.uninstallation.confirm{/lang}" data-is-required="{if $package->isRequired()}true{else}false{/if}" data-is-application="{if $package->isApplication}true{else}false{/if}"></span>
+								<span class="icon icon16 fa-times pointer jsUninstallButton jsTooltip" title="{lang}wcf.acp.package.button.uninstall{/lang}" data-object-id="{@$package->packageID}" data-confirm-message="{lang}wcf.acp.package.uninstallation.confirm{/lang}" data-is-required="{if $package->isRequired()}true{else}false{/if}" data-is-application="{if $package->isApplication}true{else}false{/if}"></span>
 							{else}
-								<span class="icon icon16 icon-remove disabled" title="{lang}wcf.acp.package.button.uninstall{/lang}"></span>
+								<span class="icon icon16 fa-times disabled" title="{lang}wcf.acp.package.button.uninstall{/lang}"></span>
 							{/if}
 							
 							{event name='rowButtons'}
@@ -119,7 +119,7 @@
 				<ul>
 					{content}
 						{if $__wcf->session->getPermission('admin.system.package.canInstallPackage')}
-							<li><a href="{link controller='PackageStartInstall'}action=install{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.package.startInstall{/lang}</span></a></li>
+							<li><a href="{link controller='PackageStartInstall'}action=install{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.package.startInstall{/lang}</span></a></li>
 						{/if}
 						
 						{event name='contentNavigationButtonsBottom'}
diff --git a/wcfsetup/install/files/acp/templates/packageSearchResultList.tpl b/wcfsetup/install/files/acp/templates/packageSearchResultList.tpl
index d0f3bb498b..58055794a1 100644
--- a/wcfsetup/install/files/acp/templates/packageSearchResultList.tpl
+++ b/wcfsetup/install/files/acp/templates/packageSearchResultList.tpl
@@ -18,7 +18,7 @@
 					{foreach from=$packageUpdates item=$package}
 						<tr class="jsPackageRow">
 							<td class="columnIcon">
-								<a class="jsInstallPackage" data-confirm-message="{lang}wcf.acp.package.install.confirmMessage{/lang}" data-package="{$package->package}" data-package-version="{$package->getAccessibleVersion()->packageVersion}"><span class="icon icon16 icon-plus jsTooltip" title="{lang}wcf.acp.package.button.installPackage{/lang}"></span></a>
+								<a class="jsInstallPackage" data-confirm-message="{lang}wcf.acp.package.install.confirmMessage{/lang}" data-package="{$package->package}" data-package-version="{$package->getAccessibleVersion()->packageVersion}"><span class="icon icon16 fa-plus jsTooltip" title="{lang}wcf.acp.package.button.installPackage{/lang}"></span></a>
 								
 								{event name='buttons'}
 							</td>
diff --git a/wcfsetup/install/files/acp/templates/packageStartInstall.tpl b/wcfsetup/install/files/acp/templates/packageStartInstall.tpl
index 3a17cd96bc..9581d909d3 100644
--- a/wcfsetup/install/files/acp/templates/packageStartInstall.tpl
+++ b/wcfsetup/install/files/acp/templates/packageStartInstall.tpl
@@ -33,7 +33,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='PackageList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.package.list{/lang}</span></a></li>
+			<li><a href="{link controller='PackageList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.package.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/packageUpdateServerAdd.tpl b/wcfsetup/install/files/acp/templates/packageUpdateServerAdd.tpl
index 41e68e3963..7ec44ee838 100644
--- a/wcfsetup/install/files/acp/templates/packageUpdateServerAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/packageUpdateServerAdd.tpl
@@ -17,7 +17,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='PackageUpdateServerList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.package.server.list{/lang}</span></a></li>
+			<li><a href="{link controller='PackageUpdateServerList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.package.server.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/packageUpdateServerList.tpl b/wcfsetup/install/files/acp/templates/packageUpdateServerList.tpl
index 04d815a09a..be59ff5ef7 100644
--- a/wcfsetup/install/files/acp/templates/packageUpdateServerList.tpl
+++ b/wcfsetup/install/files/acp/templates/packageUpdateServerList.tpl
@@ -18,7 +18,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='PackageUpdateServerAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.updateServer.add{/lang}</span></a></li>
+			<li><a href="{link controller='PackageUpdateServerAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.updateServer.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -50,9 +50,9 @@
 					{foreach from=$objects item=updateServer}
 						<tr class="jsUpdateServerRow">
 							<td class="columnIcon">
-								<span class="icon icon16 icon-check{if $updateServer->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if !$updateServer->isDisabled}disable{else}enable{/if}{/lang}" data-object-id="{@$updateServer->packageUpdateServerID}"></span>
-								<a href="{link controller='PackageUpdateServerEdit' id=$updateServer->packageUpdateServerID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
-								<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$updateServer->packageUpdateServerID}" data-confirm-message="{lang}wcf.acp.updateServer.delete.sure{/lang}"></span>
+								<span class="icon icon16 fa-{if !$updateServer->isDisabled}check-{/if}square-o jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if !$updateServer->isDisabled}disable{else}enable{/if}{/lang}" data-object-id="{@$updateServer->packageUpdateServerID}"></span>
+								<a href="{link controller='PackageUpdateServerEdit' id=$updateServer->packageUpdateServerID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+								<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$updateServer->packageUpdateServerID}" data-confirm-message="{lang}wcf.acp.updateServer.delete.sure{/lang}"></span>
 								
 								{event name='itemButtons'}
 							</td>
@@ -77,7 +77,7 @@
 		
 		<nav>
 			<ul>
-				<li><a href="{link controller='PackageUpdateServerAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.updateServer.add{/lang}</span></a></li>
+				<li><a href="{link controller='PackageUpdateServerAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.updateServer.add{/lang}</span></a></li>
 				
 				{event name='contentNavigationButtonsBottom'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/pageHeader.tpl b/wcfsetup/install/files/acp/templates/pageHeader.tpl
new file mode 100644
index 0000000000..b7711fe473
--- /dev/null
+++ b/wcfsetup/install/files/acp/templates/pageHeader.tpl
@@ -0,0 +1,25 @@
+<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>
+	
+	<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>
diff --git a/wcfsetup/install/files/acp/templates/pageLogo.tpl b/wcfsetup/install/files/acp/templates/pageLogo.tpl
new file mode 100644
index 0000000000..da06290ab1
--- /dev/null
+++ b/wcfsetup/install/files/acp/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/wcfsetup/install/files/acp/templates/pageMenuItemAdd.tpl b/wcfsetup/install/files/acp/templates/pageMenuItemAdd.tpl
index 943cdee726..3eaae7665e 100644
--- a/wcfsetup/install/files/acp/templates/pageMenuItemAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/pageMenuItemAdd.tpl
@@ -71,7 +71,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='PageMenuItemList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.pageMenu.list{/lang}</span></a></li>
+			<li><a href="{link controller='PageMenuItemList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.pageMenu.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/pageMenuItemList.tpl b/wcfsetup/install/files/acp/templates/pageMenuItemList.tpl
index 44adba915a..786578d42b 100644
--- a/wcfsetup/install/files/acp/templates/pageMenuItemList.tpl
+++ b/wcfsetup/install/files/acp/templates/pageMenuItemList.tpl
@@ -25,7 +25,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='PageMenuItemAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.pageMenu.add{/lang}</span></a></li>
+			<li><a href="{link controller='PageMenuItemAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.pageMenu.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -50,11 +50,11 @@
 										{else}
 											<span class="icon icon16 icon-check{if $menuItem->isDisabled}-empty{/if} disabled" title="{lang}wcf.global.button.{if $menuItem->isDisabled}enable{else}disable{/if}{/lang}"></span>
 										{/if}
-										<a href="{link controller='PageMenuItemEdit' id=$menuItem->menuItemID}{/link}" class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}"><span class="icon icon16 icon-pencil"></span></a>
+										<a href="{link controller='PageMenuItemEdit' id=$menuItem->menuItemID}{/link}" class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}"><span class="icon icon16 fa-pencil"></span></a>
 										{if $menuItem->canDelete()}
-											<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$menuItem->menuItemID}" data-confirm-message="{lang __menuItem=$menuItem}wcf.acp.pageMenu.delete.sure{/lang}"></span>
+											<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$menuItem->menuItemID}" data-confirm-message="{lang __menuItem=$menuItem}wcf.acp.pageMenu.delete.sure{/lang}"></span>
 										{else}
-											<span class="icon icon16 icon-remove disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
+											<span class="icon icon16 fa-times disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
 										{/if}
 										
 										{event name='headerItemButtons'}
@@ -68,11 +68,11 @@
 													<a href="{link controller='PageMenuItemEdit' id=$childMenuItem->menuItemID}{/link}">{lang}{$childMenuItem->menuItem}{/lang}</a>
 													<span class="statusDisplay sortableButtonContainer">
 														<span class="icon icon16 icon-check{if $childMenuItem->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $childMenuItem->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$childMenuItem->menuItemID}"></span>
-														<a href="{link controller='PageMenuItemEdit' id=$childMenuItem->menuItemID}{/link}" class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}"><span class="icon icon16 icon-pencil"></span></a>
+														<a href="{link controller='PageMenuItemEdit' id=$childMenuItem->menuItemID}{/link}" class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}"><span class="icon icon16 fa-pencil"></span></a>
 														{if $childMenuItem->canDelete()}
-															<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$childMenuItem->menuItemID}" data-confirm-message="{lang __menuItem=$childMenuItem}wcf.acp.pageMenu.delete.sure{/lang}"></span>
+															<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$childMenuItem->menuItemID}" data-confirm-message="{lang __menuItem=$childMenuItem}wcf.acp.pageMenu.delete.sure{/lang}"></span>
 														{else}
-															<span class="icon icon16 icon-remove disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
+															<span class="icon icon16 fa-times disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
 														{/if}
 														
 														{event name='subHeaderItemButtons'}
@@ -109,11 +109,11 @@
 									<a href="{link controller='PageMenuItemEdit' id=$menuItem->menuItemID}{/link}">{lang}{$menuItem->menuItem}{/lang}</a>
 									<span class="statusDisplay sortableButtonContainer">
 										<span class="icon icon16 icon-check{if $menuItem->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $menuItem->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$menuItem->menuItemID}"></span>
-										<a href="{link controller='PageMenuItemEdit' id=$menuItem->menuItemID}{/link}" class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}"><span class="icon icon16 icon-pencil"></span></a>
+										<a href="{link controller='PageMenuItemEdit' id=$menuItem->menuItemID}{/link}" class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}"><span class="icon icon16 fa-pencil"></span></a>
 										{if $menuItem->canDelete()}
-											<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$menuItem->menuItemID}" data-confirm-message="{lang __menuItem=$menuItem}wcf.acp.pageMenu.delete.sure{/lang}"></span>
+											<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$menuItem->menuItemID}" data-confirm-message="{lang __menuItem=$menuItem}wcf.acp.pageMenu.delete.sure{/lang}"></span>
 										{else}
-											<span class="icon icon16 icon-remove disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
+											<span class="icon icon16 fa-times disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
 										{/if}
 										
 										{event name='footerItemButtons'}
@@ -135,7 +135,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='PageMenuItemAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.pageMenu.add{/lang}</span></a></li>
+			<li><a href="{link controller='PageMenuItemAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.pageMenu.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsBottom'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/paidSubscriptionAdd.tpl b/wcfsetup/install/files/acp/templates/paidSubscriptionAdd.tpl
index babc66b703..a3f3dc6151 100644
--- a/wcfsetup/install/files/acp/templates/paidSubscriptionAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/paidSubscriptionAdd.tpl
@@ -32,7 +32,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='PaidSubscriptionList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.paidSubscription.list{/lang}</span></a></li>
+			<li><a href="{link controller='PaidSubscriptionList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.paidSubscription.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/paidSubscriptionList.tpl b/wcfsetup/install/files/acp/templates/paidSubscriptionList.tpl
index 943bcfebd2..e3d0a7e44e 100644
--- a/wcfsetup/install/files/acp/templates/paidSubscriptionList.tpl
+++ b/wcfsetup/install/files/acp/templates/paidSubscriptionList.tpl
@@ -18,7 +18,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='PaidSubscriptionAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.paidSubscription.add{/lang}</span></a></li>
+			<li><a href="{link controller='PaidSubscriptionAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.paidSubscription.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -49,9 +49,9 @@
 					<tr class="jsPaidSubscriptionRow">
 						<td class="columnIcon">
 							<span class="icon icon16 icon-check{if $subscription->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if !$subscription->isDisabled}disable{else}enable{/if}{/lang}" data-object-id="{@$subscription->subscriptionID}"></span>
-							<a href="{link controller='PaidSubscriptionEdit' id=$subscription->subscriptionID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
-							<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$subscription->subscriptionID}" data-confirm-message="{lang}wcf.acp.paidSubscription.delete.confirmMessage{/lang}"></span>
-							<a href="{link controller='PaidSubscriptionUserAdd' id=$subscription->subscriptionID}{/link}" title="{lang}wcf.acp.paidSubscription.user.add{/lang}" class="jsTooltip"><span class="icon icon16 icon-plus"></span></a>
+							<a href="{link controller='PaidSubscriptionEdit' id=$subscription->subscriptionID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+							<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$subscription->subscriptionID}" data-confirm-message="{lang}wcf.acp.paidSubscription.delete.confirmMessage{/lang}"></span>
+							<a href="{link controller='PaidSubscriptionUserAdd' id=$subscription->subscriptionID}{/link}" title="{lang}wcf.acp.paidSubscription.user.add{/lang}" class="jsTooltip"><span class="icon icon16 fa-plus"></span></a>
 							
 							{event name='itemButtons'}
 						</td>
@@ -73,7 +73,7 @@
 		
 		<nav>
 			<ul>
-				<li><a href="{link controller='PaidSubscriptionAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.paidSubscription.add{/lang}</span></a></li>
+				<li><a href="{link controller='PaidSubscriptionAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.paidSubscription.add{/lang}</span></a></li>
 			
 				{event name='contentNavigationButtonsBottom'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/paidSubscriptionTransactionLog.tpl b/wcfsetup/install/files/acp/templates/paidSubscriptionTransactionLog.tpl
index 9cc41422ac..0eb6d8c3b7 100644
--- a/wcfsetup/install/files/acp/templates/paidSubscriptionTransactionLog.tpl
+++ b/wcfsetup/install/files/acp/templates/paidSubscriptionTransactionLog.tpl
@@ -8,7 +8,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='PaidSubscriptionTransactionLogList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.paidSubscription.transactionLog.list{/lang}</span></a></li>
+			<li><a href="{link controller='PaidSubscriptionTransactionLogList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.paidSubscription.transactionLog.list{/lang}</span></a></li>
 		
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -59,7 +59,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='PaidSubscriptionTransactionLogList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.paidSubscription.transactionLog.list{/lang}</span></a></li>
+			<li><a href="{link controller='PaidSubscriptionTransactionLogList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.paidSubscription.transactionLog.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsBottom'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/paidSubscriptionUserAdd.tpl b/wcfsetup/install/files/acp/templates/paidSubscriptionUserAdd.tpl
index 1513b6b747..bb3ff93b22 100644
--- a/wcfsetup/install/files/acp/templates/paidSubscriptionUserAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/paidSubscriptionUserAdd.tpl
@@ -23,7 +23,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='PaidSubscriptionList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.paidSubscription.list{/lang}</span></a></li>
+			<li><a href="{link controller='PaidSubscriptionList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.paidSubscription.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/paidSubscriptionUserList.tpl b/wcfsetup/install/files/acp/templates/paidSubscriptionUserList.tpl
index 3e3c6f27f5..2e053b1629 100644
--- a/wcfsetup/install/files/acp/templates/paidSubscriptionUserList.tpl
+++ b/wcfsetup/install/files/acp/templates/paidSubscriptionUserList.tpl
@@ -48,7 +48,7 @@
 				{foreach from=$objects item=subscriptionUser}
 					<tr class="jsPaidSubscriptionUserRow">
 						<td class="columnIcon">
-							<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$subscriptionUser->subscriptionUserID}" data-confirm-message="{lang}wcf.acp.paidSubscription.user.delete.confirmMessage{/lang}"></span>
+							<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$subscriptionUser->subscriptionUserID}" data-confirm-message="{lang}wcf.acp.paidSubscription.user.delete.confirmMessage{/lang}"></span>
 							
 							{event name='itemButtons'}
 						</td>
diff --git a/wcfsetup/install/files/acp/templates/pluginStorePurchasedItems.tpl b/wcfsetup/install/files/acp/templates/pluginStorePurchasedItems.tpl
index f68cf7f709..c98a5b6b85 100644
--- a/wcfsetup/install/files/acp/templates/pluginStorePurchasedItems.tpl
+++ b/wcfsetup/install/files/acp/templates/pluginStorePurchasedItems.tpl
@@ -23,7 +23,7 @@
 {*<div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='PageMenuItemAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.pageMenu.add{/lang}</span></a></li>
+			<li><a href="{link controller='PageMenuItemAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.pageMenu.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -86,7 +86,7 @@
 {*<div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='PageMenuItemAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.pageMenu.add{/lang}</span></a></li>
+			<li><a href="{link controller='PageMenuItemAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.pageMenu.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsBottom'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/searchArea.tpl b/wcfsetup/install/files/acp/templates/searchArea.tpl
new file mode 100644
index 0000000000..7a9e740a21
--- /dev/null
+++ b/wcfsetup/install/files/acp/templates/searchArea.tpl
@@ -0,0 +1,37 @@
+{capture assign='__searchFormLink'}{link controller='Search'}{/link}{/capture}
+{capture assign='__searchInputPlaceholder'}{lang}wcf.global.search.enterSearchTerm{/lang}{/capture}
+{capture assign='__searchDropdownOptions'}<label><input type="checkbox" name="subjectOnly" value="1" /> {lang}wcf.search.subjectOnly{/lang}</label>{/capture}
+{assign var='__searchHiddenInputFields' value=''}
+
+{event name='settings'}
+
+<div id="search" class="searchBar" data-disable-auto-focus="true">
+	<form method="post" action="{@$__searchFormLink}" class="dropdown">
+		<input type="search" name="q" placeholder="{@$__searchInputPlaceholder}" autocomplete="off" required="required" value="{if $query|isset}{$query}{/if}" class="dropdownToggle" data-toggle="search" />
+		
+		<ul class="dropdownMenu">
+			{hascontent}
+				<li class="dropdownText">
+					{content}
+						{@$__searchDropdownOptions}
+					{/content}
+				</li>
+				<li class="dropdownDivider"></li>
+			{/hascontent}
+			<li><a href="{@$__searchFormLink}">{lang}wcf.search.extended{/lang}</a></li>
+		</ul>
+		
+		{@$__searchHiddenInputFields}
+		{@SECURITY_TOKEN_INPUT_TAG}
+	</form>
+</div>
+
+{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
+	<script data-relocate="true">
+		//<![CDATA[
+		$(function() {
+			new WCF.Search.Message.SearchArea($('#search'));
+		});
+		//]]>
+	</script>
+{/if}
\ No newline at end of file
diff --git a/wcfsetup/install/files/acp/templates/smileyAdd.tpl b/wcfsetup/install/files/acp/templates/smileyAdd.tpl
index dc8380011c..160631c9ec 100644
--- a/wcfsetup/install/files/acp/templates/smileyAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/smileyAdd.tpl
@@ -15,7 +15,7 @@
 		<nav>
 			<ul>
 				{content}
-					<li><a href="{link controller='SmileyList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.smiley.list{/lang}</span></a></li>
+					<li><a href="{link controller='SmileyList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.smiley.list{/lang}</span></a></li>
 					{event name='contentNavigationButtons'}
 				{/content}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/smileyList.tpl b/wcfsetup/install/files/acp/templates/smileyList.tpl
index 0b0fd40a0b..7c8dc9c5cc 100644
--- a/wcfsetup/install/files/acp/templates/smileyList.tpl
+++ b/wcfsetup/install/files/acp/templates/smileyList.tpl
@@ -20,7 +20,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='SmileyAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.smiley.add{/lang}</span></a></li>
+			<li><a href="{link controller='SmileyAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.smiley.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -44,8 +44,8 @@
 								<a href="{link controller='SmileyEdit' id=$smiley->smileyID}{/link}"><img src="{$smiley->getURL()}" alt=""/ > {lang}{$smiley->smileyTitle}{/lang}</a> <span class="badge">{$smiley->smileyCode}</span>{foreach from=$smiley->getAliases() item='alias'} <span class="badge">{$alias}</span>{/foreach}
 								
 								<span class="statusDisplay sortableButtonContainer">
-									<a href="{link controller='SmileyEdit' id=$smiley->smileyID}{/link}"><span title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip icon icon16 icon-pencil" /></a>
-									<span title="{lang}wcf.global.button.delete{/lang}" class="jsDeleteButton jsTooltip icon icon16 icon-remove" data-object-id="{@$smiley->smileyID}" data-confirm-message="{lang}wcf.acp.smiley.delete.sure{/lang}" />
+									<a href="{link controller='SmileyEdit' id=$smiley->smileyID}{/link}"><span title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip icon icon16 fa-pencil" /></a>
+									<span title="{lang}wcf.global.button.delete{/lang}" class="jsDeleteButton jsTooltip icon icon16 fa-times" data-object-id="{@$smiley->smileyID}" data-confirm-message="{lang}wcf.acp.smiley.delete.sure{/lang}" />
 									
 									{event name='itemButtons'}
 								</span>
diff --git a/wcfsetup/install/files/acp/templates/styleAdd.tpl b/wcfsetup/install/files/acp/templates/styleAdd.tpl
index c72af94f9a..a6697f86d6 100644
--- a/wcfsetup/install/files/acp/templates/styleAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/styleAdd.tpl
@@ -52,11 +52,11 @@
 	<nav>
 		<ul>
 			{if $action == 'edit'}
-				<li><a href="{link controller='StyleExport' id=$style->styleID}{/link}" class="button"><span class="icon icon16 icon-download-alt"></span> <span>{lang}wcf.acp.style.exportStyle{/lang}</span></a></li>
-				<li><a class="jsCopyStyle button"><span class="icon icon16 icon-copy"></span> <span>{lang}wcf.acp.style.copyStyle{/lang}</span></a></li>
+				<li><a href="{link controller='StyleExport' id=$style->styleID}{/link}" class="button"><span class="icon icon16 fa-download"></span> <span>{lang}wcf.acp.style.exportStyle{/lang}</span></a></li>
+				<li><a class="jsCopyStyle button"><span class="icon icon16 fa-copy"></span> <span>{lang}wcf.acp.style.copyStyle{/lang}</span></a></li>
 			{/if}
 			
-			<li><a href="{link controller='StyleList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.style.list{/lang}</span></a></li>
+			<li><a href="{link controller='StyleList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.style.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
@@ -396,9 +396,18 @@
 		</div>
 		
 		{* colors *}
-		<div id="colors" class="container containerPadding tabMenuContent">
+		<div id="colors" class="container containerPadding tabMenuContainer tabMenuContent">
+			<nav class="menu">
+				<ul>
+					{foreach from=$colors key=itemPrefix item=items}
+						{capture assign=_anchorName}colors-{$itemPrefix}{/capture}
+						<li data-name="colors-{$itemPrefix}"><a href="{@$__wcf->getAnchor($_anchorName)}">{$itemPrefix}</a> </li>
+					{/foreach}
+				</ul>
+			</nav>
+			
 			{foreach from=$colors key=itemPrefix item=items}
-				<section>
+				<div id="colors-{$itemPrefix}">
 					<h1>{$itemPrefix}</h1>
 					
 					{foreach from=$items item=colorItems}
@@ -410,141 +419,8 @@
 							{/foreach}
 						</ul>
 					{/foreach}
-				</section>
+				</div>
 			{/foreach}
-			{*
-			<fieldset>
-				<legend>{lang}wcf.acp.style.colors.page{/lang}</legend>
-				
-				{* page *}{*
-				<ul class="colorList">
-					<li>{include file='styleVariableColor' variableName='wcfPageBackgroundColor' languageVariable='backgroundColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfPageColor' languageVariable='color'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfPageLinkColor' languageVariable='linkColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfPageLinkHoverColor' languageVariable='linkHoverColor'}</li>
-					
-					{event name='pageColorListItems'}
-				</ul>
-				
-				{event name='pageColorLists'}
-			</fieldset>
-			
-			<fieldset>
-				<legend>{lang}wcf.acp.style.colors.content{/lang}</legend>
-				
-				{* content *}{*
-				<ul class="colorList">
-					<li>{include file='styleVariableColor' variableName='wcfContentBackgroundColor' languageVariable='backgroundColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfColor' languageVariable='color'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfDimmedColor' languageVariable='dimmedColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfLinkColor' languageVariable='linkColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfLinkHoverColor' languageVariable='linkHoverColor'}</li>
-					
-					{event name='contentColorListItems'}
-				</ul>
-				
-				{event name='contentColorLists'}
-			</fieldset>
-			
-			<fieldset>
-				<legend>{lang}wcf.acp.style.colors.container{/lang}</legend>
-				
-				{* general *}{*
-				<ul class="colorList">
-					<li>{include file='styleVariableColor' variableName='wcfContainerBackgroundColor' languageVariable='backgroundColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfContainerAccentBackgroundColor' languageVariable='accentBackgroundColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfContainerBorderColor' languageVariable='borderColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfContainerHoverBackgroundColor' languageVariable='hoverBackgroundColor'}</li>
-					
-					{event name='containerColorListItems'}
-				</ul>
-				
-				{event name='containerColorLists'}
-			</fieldset>
-			
-			<fieldset>
-				<legend>{lang}wcf.acp.style.colors.userPanel{/lang}</legend>
-				
-				{* user panel *}{*
-				<ul class="colorList">
-					<li>{include file='styleVariableColor' variableName='wcfUserPanelBackgroundColor' languageVariable='backgroundColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfUserPanelColor' languageVariable='color'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfUserPanelHoverBackgroundColor' languageVariable='hoverBackgroundColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfUserPanelHoverColor' languageVariable='hoverColor'}</li>
-					
-					{event name='userPanelColorListItems'}
-				</ul>
-				
-				{event name='userPanelColorLists'}
-			</fieldset>
-			
-			<fieldset>
-				<legend>{lang}wcf.acp.style.colors.tabular{/lang}</legend>
-				
-				{* general *}{*
-				<ul class="colorList">
-					<li>{include file='styleVariableColor' variableName='wcfTabularBoxBackgroundColor' languageVariable='backgroundColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfTabularBoxColor' languageVariable='color'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfTabularBoxHoverColor' languageVariable='hoverColor'}</li>
-					
-					{event name='tabularColorListItems'}
-				</ul>
-				
-				{event name='tabularColorLists'}
-			</fieldset>
-			
-			<fieldset>
-				<legend>{lang}wcf.acp.style.colors.buttons{/lang}</legend>
-				
-				{* default button *}{*
-				<ul class="colorList">
-					<li>{include file='styleVariableColor' variableName='wcfButtonBackgroundColor' languageVariable='backgroundColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfButtonBorderColor' languageVariable='borderColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfButtonColor' languageVariable='color'}</li>
-					
-					{event name='defaultButtonColorListItems'}
-				</ul>
-				
-				{* button:hover *}{*
-				<ul class="colorList">
-					<li>{include file='styleVariableColor' variableName='wcfButtonHoverBackgroundColor' languageVariable='hoverBackgroundColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfButtonHoverBorderColor' languageVariable='hoverBorderColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfButtonHoverColor' languageVariable='hoverColor'}</li>
-					
-					{event name='hoverButtonColorListItems'}
-				</ul>
-				
-				{* primary button *}{*
-				<ul class="colorList">
-					<li>{include file='styleVariableColor' variableName='wcfButtonPrimaryBackgroundColor' languageVariable='primaryBackgroundColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfButtonPrimaryBorderColor' languageVariable='primaryBorderColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfButtonPrimaryColor' languageVariable='primaryColor'}</li>
-					
-					{event name='primaryButtonColorListItems'}
-				</ul>
-				
-				{event name='buttonsColorLists'}
-			</fieldset>
-			
-			<fieldset>
-				<legend>{lang}wcf.acp.style.colors.formInput{/lang}</legend>
-				
-				{* form input *}{*
-				<ul class="colorList">
-					<li>{include file='styleVariableColor' variableName='wcfInputBackgroundColor' languageVariable='backgroundColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfInputBorderColor' languageVariable='borderColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfInputColor' languageVariable='color'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfInputHoverBackgroundColor' languageVariable='hoverBackgroundColor'}</li>
-					<li>{include file='styleVariableColor' variableName='wcfInputHoverBorderColor' languageVariable='hoverBorderColor'}</li>
-					
-					{event name='formInputColorListItems'}
-				</ul>
-				
-				{event name='formInputColorLists'}
-			</fieldset>
-			
-			{event name='colorFieldsets'}
-			*}
 		</div>
 		
 		{* advanced *}
@@ -560,7 +436,7 @@
 				<p class="info">{lang}wcf.acp.style.protected{/lang}</p>
 				
 				{* custom declarations *}
-				<div id="advanced-custom">
+				<div id="advanced-custom" class="tabMenuContent">
 					<fieldset class="marginTop">
 						<legend>{lang}wcf.acp.style.advanced.individualLess{/lang}</legend>
 						
diff --git a/wcfsetup/install/files/acp/templates/styleExport.tpl b/wcfsetup/install/files/acp/templates/styleExport.tpl
index b6b7fd4235..7018c31215 100644
--- a/wcfsetup/install/files/acp/templates/styleExport.tpl
+++ b/wcfsetup/install/files/acp/templates/styleExport.tpl
@@ -9,7 +9,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='StyleList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.style.list{/lang}</span></a></li>
+			<li><a href="{link controller='StyleList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.style.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/styleImport.tpl b/wcfsetup/install/files/acp/templates/styleImport.tpl
index 396e3dd31b..6cb9661e65 100644
--- a/wcfsetup/install/files/acp/templates/styleImport.tpl
+++ b/wcfsetup/install/files/acp/templates/styleImport.tpl
@@ -13,7 +13,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='StyleList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.style.list{/lang}</span></a></li>
+			<li><a href="{link controller='StyleList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.style.list{/lang}</span></a></li>
 				
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/styleList.tpl b/wcfsetup/install/files/acp/templates/styleList.tpl
index 65179ac61d..94036c3eff 100644
--- a/wcfsetup/install/files/acp/templates/styleList.tpl
+++ b/wcfsetup/install/files/acp/templates/styleList.tpl
@@ -19,8 +19,8 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='StyleAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.menu.link.style.add{/lang}</span></a></li>
-			<li><a href="{link controller='StyleImport'}{/link}" class="button"><span class="icon icon16 icon-upload-alt"></span> <span>{lang}wcf.acp.menu.link.style.import{/lang}</span></a></li>
+			<li><a href="{link controller='StyleAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.menu.link.style.add{/lang}</span></a></li>
+			<li><a href="{link controller='StyleImport'}{/link}" class="button"><span class="icon icon16 fa-upload"></span> <span>{lang}wcf.acp.menu.link.style.import{/lang}</span></a></li>
 				
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -52,13 +52,13 @@
 						</dl>
 						<nav class="jsMobileNavigation buttonGroupNavigation">
 							<ul class="buttonList iconList" data-style-id="{@$style->styleID}">
-								<li><a href="{link controller='StyleEdit' id=$style->styleID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a></li>
+								<li><a href="{link controller='StyleEdit' id=$style->styleID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a></li>
 								<li><a href="{link controller='StyleExport' id=$style->styleID}{/link}" title="{lang}wcf.acp.style.exportStyle{/lang}" class="jsTooltip"><span class="icon icon16 icon-download-alt"></span></a></li>
 								
 								{if !$style->isDefault}
 									<li><span class="icon icon16 icon-check{if $style->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $style->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$style->styleID}"></span></li>
 									<li><a title="{lang}wcf.acp.style.button.setAsDefault{/lang}" class="jsSetAsDefault jsTooltip"><span class="icon icon16 icon-ok-sign"></span></a></li>
-									<li><a title="{lang}wcf.global.button.delete{/lang}" class="jsDelete jsTooltip" data-confirm-message="{lang}wcf.acp.style.delete.confirmMessage{/lang}"><span class="icon icon16 icon-remove"></span></a></li>
+									<li><a title="{lang}wcf.global.button.delete{/lang}" class="jsDelete jsTooltip" data-confirm-message="{lang}wcf.acp.style.delete.confirmMessage{/lang}"><span class="icon icon16 fa-times"></span></a></li>
 								{/if}
 								
 								{event name='itemButtons'}
@@ -76,8 +76,8 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='StyleAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.menu.link.style.add{/lang}</span></a></li>
-			<li><a href="{link controller='StyleImport'}{/link}" class="button"><span class="icon icon16 icon-upload-alt"></span> <span>{lang}wcf.acp.menu.link.style.import{/lang}</span></a></li>
+			<li><a href="{link controller='StyleAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.menu.link.style.add{/lang}</span></a></li>
+			<li><a href="{link controller='StyleImport'}{/link}" class="button"><span class="icon icon16 fa-upload"></span> <span>{lang}wcf.acp.menu.link.style.import{/lang}</span></a></li>
 				
 			{event name='contentNavigationButtonsBottom'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/tagAdd.tpl b/wcfsetup/install/files/acp/templates/tagAdd.tpl
index 42a783ff4e..ef46460f3c 100644
--- a/wcfsetup/install/files/acp/templates/tagAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/tagAdd.tpl
@@ -13,7 +13,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='TagList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.tag.list{/lang}</span></a></li>
+			<li><a href="{link controller='TagList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.tag.list{/lang}</span></a></li>
 				
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/tagList.tpl b/wcfsetup/install/files/acp/templates/tagList.tpl
index f6620eb8d0..7e5e416e9d 100644
--- a/wcfsetup/install/files/acp/templates/tagList.tpl
+++ b/wcfsetup/install/files/acp/templates/tagList.tpl
@@ -50,7 +50,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='TagAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.tag.add{/lang}</span></a></li>
+			<li><a href="{link controller='TagAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.tag.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -82,8 +82,8 @@
 					<tr class="jsTagRow jsClipboardObject">
 						<td class="columnMark"><input type="checkbox" class="jsClipboardItem" data-object-id="{@$tag->tagID}" /></td>
 						<td class="columnIcon">
-							<a href="{link controller='TagEdit' object=$tag}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
-							<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$tag->tagID}" data-confirm-message="{lang}wcf.acp.tag.delete.sure{/lang}"></span>
+							<a href="{link controller='TagEdit' object=$tag}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+							<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$tag->tagID}" data-confirm-message="{lang}wcf.acp.tag.delete.sure{/lang}"></span>
 							
 							{event name='rowButtons'}
 						</td>
@@ -106,7 +106,7 @@
 		
 		<nav>
 			<ul>
-				<li><a href="{link controller='TagAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.tag.add{/lang}</span></a></li>
+				<li><a href="{link controller='TagAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.tag.add{/lang}</span></a></li>
 				
 				{event name='contentNavigationButtonsBottom'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/templateAdd.tpl b/wcfsetup/install/files/acp/templates/templateAdd.tpl
index e20ab6fdcf..0a3c901077 100644
--- a/wcfsetup/install/files/acp/templates/templateAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/templateAdd.tpl
@@ -15,7 +15,7 @@
 	<nav>
 		<ul>
 			{if $action == 'edit'}<li><a href="{link controller='TemplateDiff' id=$template->templateID}{/link}" class="button"><span class="icon icon16 icon-exchange"></span> <span>{lang}wcf.acp.template.diff{/lang}</span></a></li>{/if}
-			<li><a href="{link controller='TemplateList'}{if $action == 'edit'}templateGroupID={@$template->templateGroupID}{/if}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.template.list{/lang}</span></a></li>
+			<li><a href="{link controller='TemplateList'}{if $action == 'edit'}templateGroupID={@$template->templateGroupID}{/if}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.template.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/templateDiff.tpl b/wcfsetup/install/files/acp/templates/templateDiff.tpl
index 2b516ac5f1..6016f5e0d8 100644
--- a/wcfsetup/install/files/acp/templates/templateDiff.tpl
+++ b/wcfsetup/install/files/acp/templates/templateDiff.tpl
@@ -76,7 +76,7 @@
 					<div class="contentNavigation">
 						<nav>
 							<ul>
-								<li><a href="{link controller='TemplateEdit' id=$parent->templateID}{/link}" class="button"><span class="icon icon16 icon-pencil"></span> <span>{lang}wcf.global.button.edit{/lang}</span></a></li>
+								<li><a href="{link controller='TemplateEdit' id=$parent->templateID}{/link}" class="button"><span class="icon icon16 fa-pencil"></span> <span>{lang}wcf.global.button.edit{/lang}</span></a></li>
 							</ul>
 						</nav>
 					</div>
@@ -113,7 +113,7 @@
 				<div class="contentNavigation">
 					<nav>
 						<ul>
-							<li><a href="{link controller='TemplateEdit' id=$template->templateID}{/link}" class="button"><span class="icon icon16 icon-pencil"></span> <span>{lang}wcf.global.button.edit{/lang}</span></a></li>
+							<li><a href="{link controller='TemplateEdit' id=$template->templateID}{/link}" class="button"><span class="icon icon16 fa-pencil"></span> <span>{lang}wcf.global.button.edit{/lang}</span></a></li>
 						</ul>
 					</nav>
 				</div>
diff --git a/wcfsetup/install/files/acp/templates/templateGroupAdd.tpl b/wcfsetup/install/files/acp/templates/templateGroupAdd.tpl
index 5f35c16336..d01d22fe8e 100644
--- a/wcfsetup/install/files/acp/templates/templateGroupAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/templateGroupAdd.tpl
@@ -13,7 +13,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='TemplateGroupList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.template.group.list{/lang}</span></a></li>
+			<li><a href="{link controller='TemplateGroupList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.template.group.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/templateGroupList.tpl b/wcfsetup/install/files/acp/templates/templateGroupList.tpl
index 765f728156..6bfb66206e 100644
--- a/wcfsetup/install/files/acp/templates/templateGroupList.tpl
+++ b/wcfsetup/install/files/acp/templates/templateGroupList.tpl
@@ -29,7 +29,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='TemplateGroupAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.template.group.add{/lang}</span></a></li>
+			<li><a href="{link controller='TemplateGroupAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.template.group.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -58,8 +58,8 @@
 				{foreach from=$objects item=templateGroup}
 					<tr class="jsTemplateGroupRow">
 						<td class="columnIcon">
-							<a href="{link controller='TemplateGroupEdit' id=$templateGroup->templateGroupID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
-							<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$templateGroup->templateGroupID}" data-confirm-message="{lang}wcf.acp.template.group.delete.sure{/lang}"></span>
+							<a href="{link controller='TemplateGroupEdit' id=$templateGroup->templateGroupID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+							<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$templateGroup->templateGroupID}" data-confirm-message="{lang}wcf.acp.template.group.delete.sure{/lang}"></span>
 							
 							{event name='rowButtons'}
 						</td>
@@ -81,7 +81,7 @@
 		
 		<nav>
 			<ul>
-				<li><a href="{link controller='TemplateGroupAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.template.group.add{/lang}</span></a></li>
+				<li><a href="{link controller='TemplateGroupAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.template.group.add{/lang}</span></a></li>
 				
 				{event name='contentNavigationButtonsBottom'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/templateList.tpl b/wcfsetup/install/files/acp/templates/templateList.tpl
index f3006eca58..ad441520c0 100644
--- a/wcfsetup/install/files/acp/templates/templateList.tpl
+++ b/wcfsetup/install/files/acp/templates/templateList.tpl
@@ -78,7 +78,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='TemplateAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.template.add{/lang}</span></a></li>
+			<li><a href="{link controller='TemplateAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.template.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -110,12 +110,12 @@
 							
 							{if $template->templateGroupID}
 								<a href="{link controller='TemplateDiff' id=$template->templateID}{/link}" title="{lang}wcf.acp.template.diff{/lang}" class="jsTooltip"><span class="icon icon16 icon-exchange"></span></a>
-								<a href="{link controller='TemplateEdit' id=$template->templateID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
-								<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$template->templateID}" data-confirm-message="{lang}wcf.acp.template.delete.sure{/lang}"></span>
+								<a href="{link controller='TemplateEdit' id=$template->templateID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+								<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$template->templateID}" data-confirm-message="{lang}wcf.acp.template.delete.sure{/lang}"></span>
 							{else}
 								<span class="icon icon16 icon-exchange disabled" title="{lang}wcf.acp.template.diff{/lang}"></span>
-								<span class="icon icon16 icon-pencil disabled" title="{lang}wcf.global.button.edit{/lang}"></span>
-								<span class="icon icon16 icon-remove disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
+								<span class="icon icon16 fa-pencil disabled" title="{lang}wcf.global.button.edit{/lang}"></span>
+								<span class="icon icon16 fa-times disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
 							{/if}
 							
 							{event name='rowButtons'}
@@ -136,7 +136,7 @@
 		
 		<nav>
 			<ul>
-				<li><a href="{link controller='TemplateAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.template.add{/lang}</span></a></li>
+				<li><a href="{link controller='TemplateAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.template.add{/lang}</span></a></li>
 				
 				{event name='contentNavigationButtonsBottom'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/userActivityPointOption.tpl b/wcfsetup/install/files/acp/templates/userActivityPointOption.tpl
index 66ef52bd25..4986c1dfaf 100644
--- a/wcfsetup/install/files/acp/templates/userActivityPointOption.tpl
+++ b/wcfsetup/install/files/acp/templates/userActivityPointOption.tpl
@@ -25,7 +25,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a id="updateEvents" class="button"><span class="icon icon16 icon-repeat"></span> <span>{lang}wcf.acp.user.activityPoint.updateEvents{/lang}</span></a></li>
+			<li><a id="updateEvents" class="button"><span class="icon icon16 fa-repeat"></span> <span>{lang}wcf.acp.user.activityPoint.updateEvents{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/userAdd.tpl b/wcfsetup/install/files/acp/templates/userAdd.tpl
index 59225a6850..b74fa085a8 100644
--- a/wcfsetup/install/files/acp/templates/userAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/userAdd.tpl
@@ -26,7 +26,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='UserList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
+			<li><a href="{link controller='UserList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/userGroupAdd.tpl b/wcfsetup/install/files/acp/templates/userGroupAdd.tpl
index 293f02bf78..704c898593 100644
--- a/wcfsetup/install/files/acp/templates/userGroupAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/userGroupAdd.tpl
@@ -44,7 +44,7 @@
 			{if $action == 'edit'}
 				{if $availableUserGroups|count > 1}
 					<li class="dropdown">
-						<a class="button dropdownToggle"><span class="icon icon16 icon-sort"></span> <span>{lang}wcf.acp.group.button.choose{/lang}</span></a>
+						<a class="button dropdownToggle"><span class="icon icon16 fa-sort"></span> <span>{lang}wcf.acp.group.button.choose{/lang}</span></a>
 						<div class="dropdownMenu">
 							<ul class="scrollableDropdownMenu">
 								{foreach from=$availableUserGroups item='availableUserGroup'}
@@ -56,11 +56,11 @@
 				{/if}
 				
 				{if $__wcf->session->getPermission('admin.user.canAddGroup') && $group->groupType == 4}
-					<li><a class="jsButtonUserGroupCopy button"><span class="icon icon16 icon-copy"></span> <span>{lang}wcf.acp.group.button.copy{/lang}</span></a></li>
+					<li><a class="jsButtonUserGroupCopy button"><span class="icon icon16 fa-copy"></span> <span>{lang}wcf.acp.group.button.copy{/lang}</span></a></li>
 				{/if}
 			{/if}
 			
-			<li><a href="{link controller='UserGroupList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.group.list{/lang}</span></a></li>
+			<li><a href="{link controller='UserGroupList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.group.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/userGroupAssignmentAdd.tpl b/wcfsetup/install/files/acp/templates/userGroupAssignmentAdd.tpl
index 8f28e8da55..11f1a835a9 100644
--- a/wcfsetup/install/files/acp/templates/userGroupAssignmentAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/userGroupAssignmentAdd.tpl
@@ -21,7 +21,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='UserGroupAssignmentList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.group.assignment.button.list{/lang}</span></a></li>
+			<li><a href="{link controller='UserGroupAssignmentList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.group.assignment.button.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/userGroupAssignmentList.tpl b/wcfsetup/install/files/acp/templates/userGroupAssignmentList.tpl
index f19dc88c0a..fa9a9de987 100644
--- a/wcfsetup/install/files/acp/templates/userGroupAssignmentList.tpl
+++ b/wcfsetup/install/files/acp/templates/userGroupAssignmentList.tpl
@@ -30,7 +30,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='UserGroupAssignmentAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.group.assignment.button.add{/lang}</span></a></li>
+			<li><a href="{link controller='UserGroupAssignmentAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.group.assignment.button.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -58,9 +58,9 @@
 				{foreach from=$objects item='assignment'}
 					<tr class="jsUserGroupAssignmentRow">
 						<td class="columnIcon">
-							<span class="icon icon16 icon-check{if $assignment->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $assignment->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$assignment->assignmentID}"></span>
-							<a href="{link controller='UserGroupAssignmentEdit' object=$assignment}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
-							<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$assignment->assignmentID}" data-confirm-message="{lang}wcf.acp.group.assignment.delete.confirmMessage{/lang}"></span>
+							<span class="icon icon16 fa-{if !$assignment->isDisabled}check-{/if}square-o jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $assignment->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$assignment->assignmentID}"></span>
+							<a href="{link controller='UserGroupAssignmentEdit' object=$assignment}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+							<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$assignment->assignmentID}" data-confirm-message="{lang}wcf.acp.group.assignment.delete.confirmMessage{/lang}"></span>
 							
 							{event name='rowButtons'}
 						</td>
@@ -84,7 +84,7 @@
 		
 		<nav>
 			<ul>
-				<li><a href="{link controller='UserGroupAssignmentAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.group.assignment.button.add{/lang}</span></a></li>
+				<li><a href="{link controller='UserGroupAssignmentAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.group.assignment.button.add{/lang}</span></a></li>
 				
 				{event name='contentNavigationButtonsBottom'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/userGroupList.tpl b/wcfsetup/install/files/acp/templates/userGroupList.tpl
index d391c0bb20..1e72f9a6dc 100644
--- a/wcfsetup/install/files/acp/templates/userGroupList.tpl
+++ b/wcfsetup/install/files/acp/templates/userGroupList.tpl
@@ -20,7 +20,7 @@
 			<ul>
 				{content}
 					{if $__wcf->getSession()->getPermission('admin.user.canAddGroup')}
-						<li><a href="{link controller='UserGroupAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.group.add{/lang}</span></a></li>
+						<li><a href="{link controller='UserGroupAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.group.add{/lang}</span></a></li>
 					{/if}
 					
 					{event name='contentNavigationButtonsTop'}
@@ -52,14 +52,14 @@
 				<tr id="groupContainer{@$group->groupID}" class="jsUserGroupRow">
 					<td class="columnIcon">
 						{if $group->isEditable()}
-							<a href="{link controller='UserGroupEdit' id=$group->groupID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
+							<a href="{link controller='UserGroupEdit' id=$group->groupID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
 						{else}
-							<span class="icon icon16 icon-pencil disabled" title="{lang}wcf.global.button.edit{/lang}"></span>
+							<span class="icon icon16 fa-pencil disabled" title="{lang}wcf.global.button.edit{/lang}"></span>
 						{/if}
 						{if $group->isDeletable()}
-							<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$group->groupID}" data-confirm-message="{lang}wcf.acp.group.delete.sure{/lang}"></span>
+							<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$group->groupID}" data-confirm-message="{lang}wcf.acp.group.delete.sure{/lang}"></span>
 						{else}
-							<span class="icon icon16 icon-remove disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
+							<span class="icon icon16 fa-times disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
 						{/if}
 						
 						{event name='rowButtons'}
@@ -97,7 +97,7 @@
 			<ul>
 				{content}
 					{if $__wcf->getSession()->getPermission('admin.user.canAddGroup')}
-						<li><a href="{link controller='UserGroupAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.group.add{/lang}</span></a></li>
+						<li><a href="{link controller='UserGroupAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.group.add{/lang}</span></a></li>
 					{/if}
 					
 					{event name='contentNavigationButtonsBottom'}
diff --git a/wcfsetup/install/files/acp/templates/userList.tpl b/wcfsetup/install/files/acp/templates/userList.tpl
index 5c147ac9c0..c24767a459 100644
--- a/wcfsetup/install/files/acp/templates/userList.tpl
+++ b/wcfsetup/install/files/acp/templates/userList.tpl
@@ -60,7 +60,7 @@
 	<nav>
 		<ul>
 			{if $__wcf->session->getPermission('admin.user.canAddUser')}
-				<li><a href="{link controller='UserAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
+				<li><a href="{link controller='UserAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
 			{/if}
 			
 			{event name='contentNavigationButtonsTop'}
@@ -82,7 +82,7 @@
 					<th class="columnTitle columnUsername{if $sortField == 'username'} active {@$sortOrder}{/if}" colspan="2"><a href="{link controller='UserList' id=$searchID}action={@$encodedAction}&pageNo={@$pageNo}&sortField=username&sortOrder={if $sortField == 'username' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.user.username{/lang}</a></th>
 					
 					{foreach from=$columnHeads key=column item=columnLanguageVariable}
-						<th class="column{$column|ucfirst}{if $sortField == $column} active {@$sortOrder}{/if}"><a href="{link controller='UserList' id=$searchID}action={@$encodedAction}&pageNo={@$pageNo}&sortField={$column}&sortOrder={if $sortField == $column && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}{$columnLanguageVariable}{/lang}</a></th>
+						<th class="column{$column|ucfirst}{if $columnStyling[$column]|isset} {$columnStyling[$column]}{/if}{if $sortField == $column} active {@$sortOrder}{/if}"><a href="{link controller='UserList' id=$searchID}action={@$encodedAction}&pageNo={@$pageNo}&sortField={$column}&sortOrder={if $sortField == $column && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}{$columnLanguageVariable}{/lang}</a></th>
 					{/foreach}
 					
 					{event name='columnHeads'}
@@ -95,24 +95,24 @@
 						<td class="columnMark"><input type="checkbox" class="jsClipboardItem" data-object-id="{@$user->userID}" /></td>
 						<td class="columnIcon">
 							{if $user->editable}
-								<a href="{link controller='UserEdit' id=$user->userID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
+								<a href="{link controller='UserEdit' id=$user->userID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
 							{else}
-								<span class="icon icon16 icon-pencil disabled" title="{lang}wcf.global.button.edit{/lang}"></span>
+								<span class="icon icon16 fa-pencil disabled" title="{lang}wcf.global.button.edit{/lang}"></span>
 							{/if}
 							{if $user->deletable}
-								<span class="icon icon16 icon-remove jsTooltip jsDeleteButton pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$user->userID}" data-confirm-message="{lang}wcf.acp.user.delete.sure{/lang}"></span>
+								<span class="icon icon16 fa-times jsTooltip jsDeleteButton pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$user->userID}" data-confirm-message="{lang}wcf.acp.user.delete.sure{/lang}"></span>
 							{else}
-								<span class="icon icon16 icon-remove disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
+								<span class="icon icon16 fa-times disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
 							{/if}
 							{if $user->bannable}
-								<span class="icon icon16 icon-{if $user->banned}lock{else}unlock{/if} jsBanButton jsTooltip pointer" title="{lang}wcf.acp.user.{if $user->banned}unban{else}ban{/if}{/lang}" data-object-id="{@$user->userID}" data-ban-message="{lang}wcf.acp.user.ban{/lang}" data-unban-message="{lang}wcf.acp.user.unban{/lang}" data-banned="{if $user->banned}true{else}false{/if}"></span>
+								<span class="icon icon16 fa-{if $user->banned}lock{else}unlock{/if} jsBanButton jsTooltip pointer" title="{lang}wcf.acp.user.{if $user->banned}unban{else}ban{/if}{/lang}" data-object-id="{@$user->userID}" data-ban-message="{lang}wcf.acp.user.ban{/lang}" data-unban-message="{lang}wcf.acp.user.unban{/lang}" data-banned="{if $user->banned}true{else}false{/if}"></span>
 							{else}
-								<span class="icon icon16 icon-{if $user->banned}lock{else}unlock{/if} disabled" title="{lang}wcf.acp.user.{if $user->banned}unban{else}ban{/if}{/lang}"></span>
+								<span class="icon icon16 fa-{if $user->banned}lock{else}unlock{/if} disabled" title="{lang}wcf.acp.user.{if $user->banned}unban{else}ban{/if}{/lang}"></span>
 							{/if}
 							{if $user->canBeEnabled}
-								<span class="icon icon16 icon-{if !$user->activationCode}check{else}check-empty{/if} jsEnableButton jsTooltip pointer" title="{lang}wcf.acp.user.{if !$user->activationCode}disable{else}enable{/if}{/lang}" data-object-id="{@$user->userID}" data-enable-message="{lang}wcf.acp.user.enable{/lang}" data-disable-message="{lang}wcf.acp.user.disable{/lang}" data-enabled="{if !$user->activationCode}true{else}false{/if}"></span>
+								<span class="icon icon16 fa-{if !$user->activationCode}check-square-o{else}square-o{/if} jsEnableButton jsTooltip pointer" title="{lang}wcf.acp.user.{if !$user->activationCode}disable{else}enable{/if}{/lang}" data-object-id="{@$user->userID}" data-enable-message="{lang}wcf.acp.user.enable{/lang}" data-disable-message="{lang}wcf.acp.user.disable{/lang}" data-enabled="{if !$user->activationCode}true{else}false{/if}"></span>
 							{else}
-								<span class="icon icon16 icon-{if !$user->activationCode}check{else}check-empty{/if} disabled" title="{lang}wcf.acp.user.{if !$user->activationCode}disable{else}enable{/if}{/lang}"></span>
+								<span class="icon icon16 fa-{if !$user->activationCode}check-square-o{else}square-o{/if} disabled" title="{lang}wcf.acp.user.{if !$user->activationCode}disable{else}enable{/if}{/lang}"></span>
 							{/if}
 							
 							{event name='rowButtons'}
@@ -138,7 +138,7 @@
 		<nav>
 			<ul>
 				{if $__wcf->session->getPermission('admin.user.canAddUser')}
-					<li><a href="{link controller='UserAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
+					<li><a href="{link controller='UserAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
 				{/if}
 				
 				{event name='contentNavigationButtonsBottom'}
diff --git a/wcfsetup/install/files/acp/templates/userMail.tpl b/wcfsetup/install/files/acp/templates/userMail.tpl
index b570349333..6885f27814 100644
--- a/wcfsetup/install/files/acp/templates/userMail.tpl
+++ b/wcfsetup/install/files/acp/templates/userMail.tpl
@@ -31,8 +31,8 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='UserList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
-			<li><a href="{link controller='UserSearch'}{/link}" class="button"><span class="icon icon16 icon-search"></span> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
+			<li><a href="{link controller='UserList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
+			<li><a href="{link controller='UserSearch'}{/link}" class="button"><span class="icon icon16 fa-search"></span> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/userOptionAdd.tpl b/wcfsetup/install/files/acp/templates/userOptionAdd.tpl
index 1aaba8b616..63711a3a1d 100644
--- a/wcfsetup/install/files/acp/templates/userOptionAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/userOptionAdd.tpl
@@ -13,7 +13,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='UserOptionList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.user.option.list{/lang}</span></a></li>
+			<li><a href="{link controller='UserOptionList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.user.option.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/userOptionCategoryAdd.tpl b/wcfsetup/install/files/acp/templates/userOptionCategoryAdd.tpl
index 25d5ebb58f..e654cc0268 100644
--- a/wcfsetup/install/files/acp/templates/userOptionCategoryAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/userOptionCategoryAdd.tpl
@@ -13,7 +13,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='UserOptionCategoryList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.user.option.category.list{/lang}</span></a></li>
+			<li><a href="{link controller='UserOptionCategoryList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.user.option.category.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/userOptionCategoryList.tpl b/wcfsetup/install/files/acp/templates/userOptionCategoryList.tpl
index 9b29c8d001..a56565d38d 100644
--- a/wcfsetup/install/files/acp/templates/userOptionCategoryList.tpl
+++ b/wcfsetup/install/files/acp/templates/userOptionCategoryList.tpl
@@ -17,7 +17,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='UserOptionCategoryAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.user.option.category.add{/lang}</span></a></li>
+			<li><a href="{link controller='UserOptionCategoryAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.user.option.category.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -46,8 +46,8 @@
 				{foreach from=$objects item=category}
 					<tr class="jsCategoryRow">
 						<td class="columnIcon">
-							<a href="{link controller='UserOptionCategoryEdit' id=$category->categoryID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
-							<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$category->categoryID}" data-confirm-message="{lang}wcf.acp.user.option.category.delete.sure{/lang}"></span>
+							<a href="{link controller='UserOptionCategoryEdit' id=$category->categoryID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+							<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$category->categoryID}" data-confirm-message="{lang}wcf.acp.user.option.category.delete.sure{/lang}"></span>
 							
 							{event name='rowButtons'}
 						</td>
@@ -69,7 +69,7 @@
 		
 		<nav>
 			<ul>
-				<li><a href="{link controller='UserOptionCategoryAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.user.option.category.add{/lang}</span></a></li>
+				<li><a href="{link controller='UserOptionCategoryAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.user.option.category.add{/lang}</span></a></li>
 				
 				{event name='contentNavigationButtonsBottom'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/userOptionList.tpl b/wcfsetup/install/files/acp/templates/userOptionList.tpl
index 9c39b00b34..2bacd29d06 100644
--- a/wcfsetup/install/files/acp/templates/userOptionList.tpl
+++ b/wcfsetup/install/files/acp/templates/userOptionList.tpl
@@ -18,7 +18,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='UserOptionAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.user.option.add{/lang}</span></a></li>
+			<li><a href="{link controller='UserOptionAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.user.option.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -48,10 +48,10 @@
 				{foreach from=$objects item=option}
 					<tr class="jsOptionRow">
 						<td class="columnIcon">
-							<span class="icon icon16 icon-check{if $option->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $option->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$option->optionID}"></span>
-							<a href="{link controller='UserOptionEdit' id=$option->optionID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
+							<span class="icon icon16 fa-{if !$option->isDisabled}check-{/if}square-o jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $option->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$option->optionID}"></span>
+							<a href="{link controller='UserOptionEdit' id=$option->optionID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
 							{if $option->canDelete()}
-								<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$option->optionID}" data-confirm-message="{lang}wcf.acp.user.option.delete.sure{/lang}"></span>
+								<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$option->optionID}" data-confirm-message="{lang}wcf.acp.user.option.delete.sure{/lang}"></span>
 							{else}
 								<span class="icon icon16 fa-times disabled"></span>
 							{/if}
@@ -76,7 +76,7 @@
 		
 		<nav>
 			<ul>
-				<li><a href="{link controller='UserOptionAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.user.option.add{/lang}</span></a></li>
+				<li><a href="{link controller='UserOptionAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.user.option.add{/lang}</span></a></li>
 				
 				{event name='contentNavigationButtonsBottom'}
 			</ul>
diff --git a/wcfsetup/install/files/acp/templates/userPanel.tpl b/wcfsetup/install/files/acp/templates/userPanel.tpl
new file mode 100644
index 0000000000..b02829f773
--- /dev/null
+++ b/wcfsetup/install/files/acp/templates/userPanel.tpl
@@ -0,0 +1,46 @@
+<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>
+			</li>
+			
+			<li><a href="{link controller='Settings'}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 fa-cogs"></span> <span>{lang}wcf.user.menu.settings{/lang}</span></a></li>
+			
+			{if PACKAGE_ID > 1}
+				<li id="jumpToPage" class="dropdown">
+					<a href="{link forceFrontend=true}{/link}" class="dropdownToggle" data-toggle="jumpToPage"><span class="icon icon16 icon-home"></span> <span>{lang}wcf.global.jumpToPage{/lang}</span></a>
+					<ul class="dropdownMenu">
+						{foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=_menuItem}
+							<li><a href="{$_menuItem->getProcessor()->getLink()}">{lang}{$_menuItem->menuItem}{/lang}</a></li>
+						{/foreach}
+					</ul>
+				</li>
+				
+				{if $__wcf->session->getPermission('admin.system.package.canUpdatePackage') && $__wcf->getAvailableUpdates()}
+					<li>
+						<a href="{link controller='PackageUpdate'}{/link}"><span class="icon icon16 icon-refresh"></span> <span>{lang}wcf.acp.package.updates{/lang}</span> <span class="badge badgeInverse">{#$__wcf->getAvailableUpdates()}</span></a>
+					</li>
+				{/if}
+			{/if}
+			
+			<li id="woltlab" class="dropdown">
+				<a class="dropdownToggle" data-toggle="woltlab"><span class="icon icon16 icon-info-sign"></span> <span>WoltLab&reg;</span></a>
+				
+				<ul class="dropdownMenu">
+					<li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://www.woltlab.com"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.website{/lang}</a></li>
+					<li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://community.woltlab.com"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.forums{/lang}</a></li>
+					<li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://www.woltlab.com/ticket-add/"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.tickets{/lang}</a></li>
+					<li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://pluginstore.woltlab.com"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.pluginStore{/lang}</a></li>
+				</ul>
+			</li>
+		{/if}
+		
+		{event name='menuItems'}
+		
+		{if $__wcf->user->userID}
+			<li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 fa-sign-out"></span> <span>{lang}wcf.user.logout{/lang}</span></a></li>
+		{/if}
+	</ul>
+</nav>
\ No newline at end of file
diff --git a/wcfsetup/install/files/acp/templates/userRankAdd.tpl b/wcfsetup/install/files/acp/templates/userRankAdd.tpl
index ea5aee3c75..21df1c311a 100644
--- a/wcfsetup/install/files/acp/templates/userRankAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/userRankAdd.tpl
@@ -21,7 +21,7 @@
 <div class="contentNavigation">
 	<nav>
 		<ul>
-			<li><a href="{link controller='UserRankList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.user.rank.list{/lang}</span></a></li>
+			<li><a href="{link controller='UserRankList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.user.rank.list{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtons'}
 		</ul>
diff --git a/wcfsetup/install/files/acp/templates/userRankList.tpl b/wcfsetup/install/files/acp/templates/userRankList.tpl
index 60c751f939..fd330b8d6c 100644
--- a/wcfsetup/install/files/acp/templates/userRankList.tpl
+++ b/wcfsetup/install/files/acp/templates/userRankList.tpl
@@ -17,7 +17,7 @@
 	
 	<nav>
 		<ul>
-			<li><a href="{link controller='UserRankAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.user.rank.add{/lang}</span></a></li>
+			<li><a href="{link controller='UserRankAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.user.rank.add{/lang}</span></a></li>
 			
 			{event name='contentNavigationButtonsTop'}
 		</ul>
@@ -49,8 +49,8 @@
 					{foreach from=$objects item=userRank}
 						<tr class="jsUserRankRow">
 							<td class="columnIcon">
-								<a href="{link controller='UserRankEdit' id=$userRank->rankID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
-								<span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$userRank->rankID}" data-confirm-message="{lang}wcf.acp.user.rank.delete.sure{/lang}"></span>
+								<a href="{link controller='UserRankEdit' id=$userRank->rankID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+								<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$userRank->rankID}" data-confirm-message="{lang}wcf.acp.user.rank.delete.sure{/lang}"></span>
 								
 								{event name='rowButtons'}
 							</td>
@@ -75,7 +75,7 @@
 		
 		<nav>
 			<ul>
-				<li><a href="{link controller='UserRankAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.user.rank.add{/lang}</span></a></li>
+				<li><a href="{link controller='UserRankAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.user.rank.add{/lang}</span></a></li>
 				
 				{event name='contentNavigationButtonsBottom'}
 			</ul>
diff --git a/wcfsetup/install/files/js/WCF.Message.js b/wcfsetup/install/files/js/WCF.Message.js
index 59a79a0c14..3e581f5276 100644
--- a/wcfsetup/install/files/js/WCF.Message.js
+++ b/wcfsetup/install/files/js/WCF.Message.js
@@ -1255,16 +1255,18 @@ WCF.Message.InlineEditor = Class.extend({
 	 */
 	init: function(containerID, supportExtendedForm, quoteManager) {
 		require(['WoltLab/WCF/Ui/Message/InlineEditor'], (function(UiMessageInlineEditor) {
-			extendedForm: (supportExtendedForm === true),
-			
-			className: this._getClassName(),
-			containerId: containerID,
-			editorPrefix: this._messageEditorIDPrefix,
-			
-			messageSelector: this._messageContainerSelector,
-			
-			callbackDropdownInit: this._callbackDropdownInit.bind(this),
-			callbackLegacyInitElements: this._callbackInitElements.bind(this)
+			UiMessageInlineEditor.init({
+				extendedForm: (supportExtendedForm === true),
+				
+				className: this._getClassName(),
+				containerId: containerID,
+				editorPrefix: this._messageEditorIDPrefix,
+				
+				messageSelector: this._messageContainerSelector,
+				
+				callbackDropdownInit: this._callbackDropdownInit.bind(this),
+				callbackLegacyInitElements: this._callbackInitElements.bind(this)
+			});
 		}).bind(this));
 	},
 	
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/Style/Editor.js b/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/Style/Editor.js
index c979a76bcc..d65e8cdc9e 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/Style/Editor.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/Style/Editor.js
@@ -6,9 +6,12 @@
  * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module	WoltLab/WCF/Core
  */
-define(['Ajax', 'EventHandler'], function(Ajax, EventHandler) {
+define(['Ajax', 'Dictionary', 'Dom/Util', 'EventHandler'], function(Ajax, Dictionary, DomUtil, EventHandler) {
 	"use strict";
 	
+	var _stylePreviewRegions = new Dictionary();
+	var _stylePreviewRegionMarker = null;
+	
 	/**
 	 * @module	WoltLab/WCF/Acp/Ui/Style/Editor
 	 */
@@ -23,6 +26,8 @@ define(['Ajax', 'EventHandler'], function(Ajax, EventHandler) {
 			if (!options.isTainted) {
 				this._handleProtection(options.styleId);
 			}
+			
+			this._initVisualEditor(options.styleRuleMap);
 		},
 		
 		/**
@@ -96,6 +101,150 @@ define(['Ajax', 'EventHandler'], function(Ajax, EventHandler) {
 					}
 				});
 			});
+		},
+		
+		_initVisualEditor: function(styleRuleMap) {
+			var regions = elBySelAll('.stylePreview [data-region]');
+			for (var i = 0, length = regions.length; i < length; i++) {
+				_stylePreviewRegions.set(elData(regions[i], 'region'), regions[i]);
+			}
+			
+			_stylePreviewRegionMarker = elCreate('div');
+			_stylePreviewRegionMarker.id = 'stylePreviewRegionMarker';
+			_stylePreviewRegionMarker.innerHTML = '<div id="stylePreviewRegionMarkerBottom"></div>';
+			elHide(_stylePreviewRegionMarker);
+			elById('colors').appendChild(_stylePreviewRegionMarker);
+			
+			var container = elBySel('.stylePreviewVariables');
+			var select = elById('stylePreviewVariablesCategories');
+			var lastValue = select.value;
+			
+			function updateRegionMarker() {
+				if (lastValue === 'none') {
+					elHide(_stylePreviewRegionMarker);
+					updateWrapperPosition(null);
+					scrollToRegion(null);
+					return;
+				}
+				
+				var region = _stylePreviewRegions.get(lastValue);
+				var rect = region.getBoundingClientRect();
+				
+				var top = rect.top + document.body.scrollTop;
+				
+				DomUtil.setStyles(_stylePreviewRegionMarker, {
+					height: (region.clientHeight + 20) + 'px',
+					left: (rect.left + document.body.scrollLeft - 10) + 'px',
+					top: (top - 10) + 'px',
+					width: (region.clientWidth + 20) + 'px'
+				});
+				
+				elShow(_stylePreviewRegionMarker);
+				
+				updateWrapperPosition(region);
+				scrollToRegion(top);
+			}
+			
+			var variablesWrapper = elById('stylePreviewVariablesWrapper');
+			function updateWrapperPosition(region) {
+				var fromTop = 0;
+				if (region !== null) {
+					fromTop = (region.offsetTop - variablesWrapper.offsetTop) - 10;
+					
+					var styles = window.getComputedStyle(region);
+					if (styles.getPropertyValue('position') === 'absolute') {
+						fromTop += region.offsetParent.offsetTop;
+					}
+				}
+				
+				if (fromTop <= 0) {
+					variablesWrapper.style.removeProperty('transform');
+				}
+				else {
+					// ensure that the wrapper does not exceed the bottom boundary
+					var maxHeight = variablesWrapper.parentNode.clientHeight;
+					var wrapperHeight = variablesWrapper.clientHeight;
+					if (wrapperHeight + fromTop > maxHeight) {
+						fromTop = maxHeight - wrapperHeight;
+					}
+					
+					variablesWrapper.style.setProperty('transform', 'translateY(' + fromTop + 'px)');
+				}
+			}
+			
+			var pageHeader = elById('pageHeader');
+			function scrollToRegion(top) {
+				if (top === null) {
+					top = variablesWrapper.offsetTop - 60;
+				}
+				else {
+					// use the region marker as an offset
+					top -= 60;
+				}
+				
+				// account for sticky header
+				top -= 60;
+				
+				window.scrollTo(0, top);
+			}
+			
+			var selectContainer = elBySel('.stylePreviewVariablesContainer:first-child');
+			var element;
+			select.addEventListener('change', function() {
+				element = elBySel('.stylePreviewVariablesContainer[data-category="' + lastValue + '"]', container);
+				elHide(element);
+				
+				lastValue = select.value;
+				element = elBySel('.stylePreviewVariablesContainer[data-category="' + lastValue + '"]', container);
+				elShow(element);
+				
+				// set region marker
+				updateRegionMarker();
+				
+				selectContainer.classList[(lastValue === 'none' ? 'remove' : 'add')]('pointer');
+			});
+			
+			
+			// apply CSS rules
+			var style = document.createElement('style');
+			style.appendChild(document.createTextNode(''));
+			elData(style, 'created-by', 'WoltLab/Acp/Ui/Style/Editor');
+			document.head.appendChild(style);
+			
+			function updateCSSRule(identifier, value, isInit) {
+				if (styleRuleMap[identifier] === undefined) {
+					console.debug(identifier);
+					return;
+				}
+				
+				var rule = styleRuleMap[identifier].replace(/VALUE/, value + ' !important');
+				if (!rule) {
+					console.debug(identifier);
+					return;
+				}
+				
+				style.sheet.insertRule(rule, style.sheet.cssRules.length);
+			}
+			
+			var elements = elByClass('styleVariableColor', variablesWrapper);
+			[].forEach.call(elements, function(colorField) {
+				var variableName = elData(colorField, 'store').replace(/_value$/, '');
+				
+				var observer = new MutationObserver(function(mutations) {
+					mutations.forEach(function(mutation) {
+						if (mutation.attributeName === 'style') {
+							updateCSSRule(variableName, colorField.style.getPropertyValue('background-color'));
+							console.debug(mutation);
+						}
+					});
+				});
+				
+				observer.observe(colorField, {
+					attributes: true
+				});
+				
+				updateCSSRule(variableName, colorField.style.getPropertyValue('background-color'));
+			});
 		}
 	};
 	
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/ColorUtil.js b/wcfsetup/install/files/js/WoltLab/WCF/ColorUtil.js
new file mode 100644
index 0000000000..a6d5f8f196
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/ColorUtil.js
@@ -0,0 +1,63 @@
+define([], function() {
+	"use strict";
+	
+	var ColorUtil = {
+		/**
+		 * Converts HEX into RGB.
+		 *
+		 * @param	string		hex     hex value as #ccc or #abc123
+		 * @return	object          r-g-b values
+		 */
+		hexToRgb: function(hex) {
+			hex = hex.replace(/^#/, '');
+			if (/^([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(hex)) {
+				// only convert abc and abcdef
+				hex = hex.split('');
+				
+				// parse shorthand #xyz
+				if (hex.length === 3) {
+					return {
+						r: parseInt(hex[0] + '' + hex[0], 16),
+						g: parseInt(hex[1] + '' + hex[1], 16),
+						b: parseInt(hex[2] + '' + hex[2], 16)
+					};
+				}
+				else {
+					return {
+						r: parseInt(hex[0] + '' + hex[1], 16),
+						g: parseInt(hex[2] + '' + hex[3], 16),
+						b: parseInt(hex[4] + '' + hex[5], 16)
+					};
+				}
+			}
+			
+			return Number.NaN;
+		},
+		
+		/**
+		 * Converts RGB into HEX.
+		 *
+		 * @see	http://www.linuxtopia.org/online_books/javascript_guides/javascript_faq/rgbtohex.htm
+		 * 
+		 * @param	{(int|string)}	r       red or rgb(1, 2, 3) or rgba(1, 2, 3, .4)
+		 * @param	{int}		g       green
+		 * @param	{int}		b       blue
+		 * @return	{string}        hex value #abc123
+		 */
+		rgbToHex: function(r, g, b) {
+			var charList = "0123456789ABCDEF";
+			
+			if (g === undefined) {
+				if (r.match(/^rgba?\((\d+), ?(\d+), ?(d\+)(?:, ?[0-9.]+)?\)$/)) {
+					r = RegExp.$1;
+					g = RegExp.$2;
+					b = RegExp.$3;
+				}
+			}
+			
+			return (charList.charAt((r - r % 16) / 16) + '' + charList.charAt(r % 16)) + '' + (charList.charAt((g - g % 16) / 16) + '' + charList.charAt(g % 16)) + '' + (charList.charAt((b - b % 16) / 16) + '' + charList.charAt(b % 16));
+		}
+	};
+	
+	return ColorUtil;
+});
\ No newline at end of file
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js b/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
index 93d6b137c7..26edc93b06 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
@@ -103,7 +103,7 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
 				container.className = 'inputAddon';
 				
 				var button = elCreate('a');
-				button.className = 'inputSuffix';
+				button.className = 'inputSuffix button';
 				button.addEventListener('click', _callbackOpen);
 				container.appendChild(button);
 				
diff --git a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
index f88202b308..a8ede9f9fc 100644
--- a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
+++ b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
@@ -75,6 +75,8 @@ class StyleAddForm extends AbstractForm {
 	 */
 	public $availableUnits = ['px', 'em', '%', 'pt'];
 	
+	public $colorCategories = [];
+	
 	/**
 	 * list of color variables
 	 * @var	array<string>
@@ -206,12 +208,9 @@ class StyleAddForm extends AbstractForm {
 		
 		// @TODO
 		$colors = [];
-		foreach ($this->colors as $k => $v) {
-			foreach ($v as $vv) {
-				$prefix = (isset($vv['overridePrefix'])) ? $vv['overridePrefix'] : $k;
-				foreach ($vv['items'] as $vvv) {
-					$colors[] = $prefix . ucfirst($vvv);
-				}
+		foreach ($this->colors as $categoryName => $variables) {
+			foreach ($variables as $variable) {
+				$colors[] = $categoryName . ucfirst($variable);
 			}
 		}
 		
@@ -428,127 +427,54 @@ class StyleAddForm extends AbstractForm {
 	 * Sets available variables
 	 */
 	protected function setVariables() {
-		// set color variables
-		$this->colors = [
-			'wcfPage' => [
-				[
-					'overridePrefix' => 'wcfHeader',
-					'items' => ['background', 'text', 'link', 'linkActive']
-				],
-				[
-					'overridePrefix' => 'wcfMenu',
-					'items' => ['background', 'backgroundActive', 'border', 'text', 'textActive', 'link', 'linkActive']
-				],
-				[
-					'overridePrefix' => 'wcfMenuContent',
-					'items' => ['background', 'backgroundActive', 'border', 'text', 'textActive', 'link', 'linkActive']
-				],
-				[
-					'overridePrefix' => 'wcfSearchBox',
-					'items' => ['background', 'backgroundActive', 'border', 'borderActive', 'text', 'textActive', 'link', 'linkActive']
-				],
-				[
-					'overridePrefix' => 'wcfHeaderBox',
-					'items' => ['background', 'text', 'link', 'linkActive']
-				],
-				[
-					'overridePrefix' => 'wcfHeaderNavigation',
-					'items' => ['background', 'text', 'link', 'linkActive']
-				],
-				[
-					'overridePrefix' => 'wcfFooterBox',
-					'items' => ['background', 'text', 'link', 'linkActive']
-				],
-				[
-					'overridePrefix' => 'wcfFooter',
-					'items' => ['background', 'text', 'link', 'linkActive']
-				]
-			],
-			'wcfContent' => [
-				[
-					'items' => ['background', 'text', 'link', 'linkActive', 'border'],
-				],
-				[
-					'overridePrefix' => 'wcfContentHeadline',
-					'items' => ['text', 'link', 'linkActive']
-				],
-				[
-					'items' => ['textDimmed', 'linkDimmed', 'linkDimmedActive']
-				],
-				[
-					'items' => ['backgroundAccent', 'textAccent', 'linkAccent', 'linkAccentActive', 'borderAccent']
-				]
-			],
-			'wcfSidebar' => [
-				[
-					'items' => ['background', 'border']
-				],
-				[
-					'overridePrefix' => 'wcfSidebarBox',
-					'items' => ['background', 'text', 'link', 'linkActive', 'border', 'textDimmed', 'linkDimmed', 'linkDimmedActive']
-				],
-				[
-					'overridePrefix' => 'wcfSidebarBoxHeadline',
-					'items' => ['text', 'link', 'linkActive', 'border']
-				]
-			],
-			'wcfButton' => [
-				[
-					'items' => ['background', 'backgroundActive', 'text', 'textActive', 'border', 'borderActive']
-				],
-				[
-					'items' => ['backgroundAccent', 'backgroundAccentActive', 'textAccent', 'textAccentActive', 'borderAccent', 'borderAccentActive']
-				]
-			],
-			'wcfInput' => [
-				[
-					'items' => ['background', 'backgroundActive', 'border', 'borderActive', 'text', 'textActive']
-				]
-			],
-			'wcfDropdown' => [
-				[
-					'items' => ['background', 'backgroundActive', 'text', 'textActive', 'link', 'linkActive']
-				]
-			]
+		$this->colorCategories = [
+			'wcfHeader' => ['wcfHeader', 'wcfHeaderSearchBox', 'wcfHeaderMenu'],
+			'wcfNavigation' => 'wcfNavigation',
+			'wcfSidebar' => ['wcfSidebar', 'wcfSidebarHeadline'],
+			'wcfContent' => ['wcfContent', 'wcfContentHeadline'],
+			'wcfTabularBox' => 'wcfTabularBox',
+			'wcfInput' => ['wcfInput', 'wcfInputDisabled'],
+			'wcfButton' => ['wcfButton', 'wcfButtonPrimary', 'wcfButtonDisabled'],
+			'wcfDropdown' => 'wcfDropdown',
+			'wcfFooterBox' => ['wcfFooterBox', 'wcfFooterBoxHeadline'],
+			'wcfFooter' => 'wcfFooter'
 		];
-		/*
+		
 		$this->colors = [
-			'wcfButtonBackgroundColor',
-			'wcfButtonBorderColor',
-			'wcfButtonColor',
-			'wcfButtonHoverBackgroundColor',
-			'wcfButtonHoverBorderColor',
-			'wcfButtonHoverColor',
-			'wcfButtonPrimaryBackgroundColor',
-			'wcfButtonPrimaryBorderColor',
-			'wcfButtonPrimaryColor',
-			'wcfColor',
-			'wcfContainerAccentBackgroundColor',
-			'wcfContainerBackgroundColor',
-			'wcfContainerBorderColor',
-			'wcfContainerHoverBackgroundColor',
-			'wcfContentBackgroundColor',
-			'wcfDimmedColor',
-			'wcfInputBackgroundColor',
-			'wcfInputBorderColor',
-			'wcfInputColor',
-			'wcfInputHoverBackgroundColor',
-			'wcfInputHoverBorderColor',
-			'wcfLinkColor',
-			'wcfLinkHoverColor',
-			'wcfPageBackgroundColor',
-			'wcfPageColor',
-			'wcfPageLinkColor',
-			'wcfPageLinkHoverColor',
-			'wcfTabularBoxBackgroundColor',
-			'wcfTabularBoxColor',
-			'wcfTabularBoxHoverColor',
-			'wcfUserPanelBackgroundColor',
-			'wcfUserPanelColor',
-			'wcfUserPanelHoverBackgroundColor',
-			'wcfUserPanelHoverColor',
+			'wcfHeader' => ['background', 'link', 'linkActive'],
+			'wcfHeaderSearchBox' => ['background', 'border', 'text', 'backgroundAccent', 'borderActive', 'textActive'],
+			'wcfHeaderMenu' => ['background', 'border', 'link', 'backgroundActive', 'linkActive'],
+			'wcfNavigation' => ['background', 'text', 'link', 'linkActive'],
+			'wcfSidebar' => ['background', 'text', 'link', 'linkActive'],
+			'wcfSidebarHeadline' => ['text', 'link', 'linkActive'],
+			'wcfContent' => ['background', 'text', 'link', 'linkActive'],
+			'wcfContentHeadline' => ['border', 'text', 'link', 'linkActive'],
+			'wcfTabularBox' => ['border', 'headline', 'headlineActive'],
+			'wcfInput' => ['background', 'border', 'text', 'backgroundActive', 'borderActive', 'textActive'],
+			'wcfInputDisabled' => ['background', 'border', 'text'],
+			'wcfButton' => ['background', 'border', 'text', 'backgroundActive', 'borderActive', 'textActive'],
+			'wcfButtonPrimary' => ['background', 'border', 'text', 'backgroundActive', 'borderActive', 'textActive'],
+			'wcfButtonDisabled' => ['background', 'border', 'text'],
+			'wcfDropdown' => ['background', 'border', 'text', 'link', 'backgroundActive', 'linkActive'],
+			'wcfFooterBox' => ['background', 'text', 'link', 'linkActive'],
+			'wcfFooterBoxHeadline' => ['text', 'link', 'linkActive'],
+			'wcfFooter' => ['background', 'text', 'link', 'linkActive']
 		];
-		*/
+		
+		// DEBUG ONLY
+		if (false) {
+			echo "<pre>";
+			foreach ($this->colors as $key => $values) {
+				foreach ($values as $v) {
+					$variableName = $key . ucfirst($v);
+					
+					echo "INSERT IGNORE INTO wcf1_style_variable (variableName, defaultValue) VALUES ('{$variableName}', 'rgba(255, 255, 255, 1)');\n";
+				}
+			}
+			exit;
+		}
+		// DEBUG ONLY
+		
 		// set global variables
 		$this->globals = [
 			'wcfBaseFontSize',
@@ -652,6 +578,7 @@ class StyleAddForm extends AbstractForm {
 			'availableFontFamilies' => $this->availableFontFamilies,
 			'availableTemplateGroups' => $this->availableTemplateGroups,
 			'availableUnits' => $this->availableUnits,
+			'colorCategories' => $this->colorCategories,
 			'colors' => $this->colors,
 			'copyright' => $this->copyright,
 			'imagePath' => $this->imagePath,
diff --git a/wcfsetup/install/files/lib/system/package/plugin/ACPMenuPackageInstallationPlugin.class.php b/wcfsetup/install/files/lib/system/package/plugin/ACPMenuPackageInstallationPlugin.class.php
index 2188ba78b9..ad0fa94e87 100644
--- a/wcfsetup/install/files/lib/system/package/plugin/ACPMenuPackageInstallationPlugin.class.php
+++ b/wcfsetup/install/files/lib/system/package/plugin/ACPMenuPackageInstallationPlugin.class.php
@@ -17,6 +17,17 @@ class ACPMenuPackageInstallationPlugin extends AbstractMenuPackageInstallationPl
 	 */
 	public $className = 'wcf\data\acp\menu\item\ACPMenuItemEditor';
 	
+	/**
+	 * @see \wcf\system\package\plugin\AbstractMenuPackageInstallationPlugin::prepareImport()
+	 */
+	protected function prepareImport(array $data) {
+		$returnValue = parent::prepareImport($data);
+		
+		$returnValue['icon'] = (isset($data['elements']['icon'])) ? $data['elements']['icon'] : '';
+		
+		return $returnValue;
+	}
+	
 	/**
 	 * @see	\wcf\system\package\plugin\IPackageInstallationPlugin::getDefaultFilename()
 	 */
diff --git a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
index 8cd5cb4772..cc66ec1b9b 100644
--- a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
+++ b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
@@ -137,9 +137,51 @@ class StyleCompiler extends SingletonFactory {
 	 * Compiles SCSS stylesheets for ACP usage.
 	 */
 	public function compileACP() {
-		$files = glob(WCF_DIR.'style/*.less');
+		// read stylesheets by dependency order
+		$conditions = new PreparedStatementConditionBuilder();
+		$conditions->add("filename REGEXP ?", ['style/([a-zA-Z0-9\_\-\.]+)\.(less|scss)']);
+		
+		// TESTING ONLY
+		$conditions->add("packageID <> ?", [1]);
+		// TESTING ONLY
+		
+		$sql = "SELECT		filename, application
+			FROM		wcf".WCF_N."_package_installation_file_log
+			".$conditions."
+			ORDER BY	packageID";
+		$statement = WCF::getDB()->prepareStatement($sql);
+		$statement->execute($conditions->getParameters());
+		
+		$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
+		
+		//$files = glob(WCF_DIR.'style/*.less');
 		
 		// read default values
+		/*
 		$sql = "SELECT		variableName, defaultValue
 			FROM		wcf".WCF_N."_style_variable
 			ORDER BY	variableID ASC";
@@ -154,9 +196,12 @@ class StyleCompiler extends SingletonFactory {
 			
 			$variables[$row['variableName']] = $value;
 		}
+		*/
+		$style = new Style(1);
+		$variables = $style->getVariables();
 		
 		// insert blue temptation files
-		array_unshift($files, WCF_DIR.'acp/style/blueTemptation/variables.scss', WCF_DIR.'acp/style/blueTemptation/override.scss');
+		//array_unshift($files, WCF_DIR.'acp/style/blueTemptation/variables.scss', WCF_DIR.'acp/style/blueTemptation/override.scss');
 		
 		$variables['style_image_path'] = "'../images/blueTemptation/'";
 		
@@ -164,7 +209,7 @@ class StyleCompiler extends SingletonFactory {
 			WCF_DIR.'acp/style/style',
 			$files,
 			$variables,
-			file_get_contents(WCF_DIR.'acp/style/blueTemptation/individual.scss'),
+			'',//file_get_contents(WCF_DIR.'acp/style/blueTemptation/individual.scss'),
 			new Callback(function($content) {
 				// fix relative paths
 				$content = str_replace('../font/', '../../font/', $content);
diff --git a/wcfsetup/install/files/style/bootstrap/mixin.scss b/wcfsetup/install/files/style/bootstrap/mixin.scss
index 0456bdbaa5..d2c0b67f3d 100644
--- a/wcfsetup/install/files/style/bootstrap/mixin.scss
+++ b/wcfsetup/install/files/style/bootstrap/mixin.scss
@@ -29,10 +29,10 @@
 // sets default text shadows depending on background color
 @mixin textShadow($backgroundColor) {
 	@if (lightness($backgroundColor) >= 40) {
-		text-shadow: 0 1px 0 $wcfTextShadowLightColor;
+		text-shadow: 0 1px 0 $wcfTextShadowDarkColor;
 	}
 	@else {
-		text-shadow: 0 -1px 0 $wcfTextShadowDarkColor;
+		text-shadow: 0 -1px 0 $wcfTextShadowLightColor;
 	}
 }
 
diff --git a/wcfsetup/install/files/style/bootstrap/reset.scss b/wcfsetup/install/files/style/bootstrap/reset.scss
index 0602c8903f..d6f5c26655 100644
--- a/wcfsetup/install/files/style/bootstrap/reset.scss
+++ b/wcfsetup/install/files/style/bootstrap/reset.scss
@@ -44,4 +44,19 @@ q::before,
 q::after {
 	content: '';
 	content: none;
-}
\ No newline at end of file
+}
+
+/**
+ * sane box-sizing value for all elements
+ * 
+ * https://css-tricks.com/box-sizing/
+ */
+html {
+	box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: inherit;
+}
diff --git a/wcfsetup/install/files/style/element/list.scss b/wcfsetup/install/files/style/element/list.scss
index dc38a6b0a8..dde1dc7f7a 100644
--- a/wcfsetup/install/files/style/element/list.scss
+++ b/wcfsetup/install/files/style/element/list.scss
@@ -11,7 +11,7 @@
 		
 		> a {
 			cursor: pointer;
-			display: flex;
+			display: inline-flex;
 		}
 	}
 }
diff --git a/wcfsetup/install/files/style/icon/icon.less b/wcfsetup/install/files/style/icon/icon.less
deleted file mode 100644
index ba2f2d1982..0000000000
--- a/wcfsetup/install/files/style/icon/icon.less
+++ /dev/null
@@ -1,1690 +0,0 @@
-/* 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/icon/icon.scss b/wcfsetup/install/files/style/icon/icon.scss
new file mode 100644
index 0000000000..61b43a83c6
--- /dev/null
+++ b/wcfsetup/install/files/style/icon/icon.scss
@@ -0,0 +1,159 @@
+/* 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.4.0');
+	src: url('../font/getFont.php?type=eot&v=4.4.0#iefix') format('embedded-opentype'),
+	url('../font/getFont.php?type=woff2&v=4.4.0') format('woff2'),
+	url('../font/getFont.php?type=woff&v=4.4.0') format('woff'),
+	url('../font/getFont.php?type=ttf&v=4.4.0') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+}
+
+.icon, .fa {
+	color: $wcfContentText;
+	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;
+	
+	&.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
+.fa-spinner {
+	height: auto;
+	
+	-webkit-animation: spin 1s infinite steps(8);
+	animation: spin 1s infinite steps(8);
+}
+@-webkit-keyframes spin {
+	0% { -webkit-transform: rotate(0deg); }
+	100% { -webkit-transform: rotate(359deg); }
+}
+@keyframes spin {
+	0% { transform: rotate(0deg); }
+	100% { transform: rotate(359deg); }
+}
+
+.fa-rotate-90:before {
+	-webkit-transform: rotate(90deg);
+	transform: rotate(90deg);
+}
+
+.fa-rotate-180:before {
+	-webkit-transform: rotate(180deg);
+	transform: rotate(180deg);
+}
+
+.fa-rotate-270:before {
+	-webkit-transform: rotate(270deg);
+	transform: rotate(270deg);
+}
+
+.fa-flip-horizontal:before {
+	-webkit-transform: scale(-1, 1);
+	transform: scale(-1, 1);
+}
+
+.fa-flip-vertical:before {
+	-webkit-transform: scale(1, -1);
+	transform: scale(1, -1);
+}
+
+@import "variables";
+@import "icons";
diff --git a/wcfsetup/install/files/style/layout/containerList.less b/wcfsetup/install/files/style/layout/containerList.scss
similarity index 91%
rename from wcfsetup/install/files/style/layout/containerList.less
rename to wcfsetup/install/files/style/layout/containerList.scss
index 63fb4ca7f3..6e3482df9e 100644
--- a/wcfsetup/install/files/style/layout/containerList.less
+++ b/wcfsetup/install/files/style/layout/containerList.scss
@@ -2,7 +2,7 @@
 	padding: 20px 0;
 	
 	&:not(:last-child) {
-		border-bottom: 1px solid rgb(238, 238, 238);
+		border-bottom: 1px solid $wcfContentBorder;
 	}
 	
 	&.showMore {
@@ -40,7 +40,7 @@
 	&.tripleColumned > li {
 		flex: 0 0 auto;
 		/* work-around for IE10 */
-		width: calc(~"100% / 3");
+		width: calc(unquote("100% / 3"));
 	}
 }
 
diff --git a/wcfsetup/install/files/style/layout/form.less b/wcfsetup/install/files/style/layout/form.less
deleted file mode 100644
index ee22272037..0000000000
--- a/wcfsetup/install/files/style/layout/form.less
+++ /dev/null
@@ -1,11 +0,0 @@
-.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/form.scss b/wcfsetup/install/files/style/layout/form.scss
new file mode 100644
index 0000000000..620199d8b4
--- /dev/null
+++ b/wcfsetup/install/files/style/layout/form.scss
@@ -0,0 +1,339 @@
+input[type="date"],
+input[type="datetime"],
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="text"],
+input[type="url"],
+select,
+textarea {
+	background-color: $wcfInputBackground;
+	border: 1px solid $wcfInputBorder;
+	border-radius: 0;
+	border-width: 0 0 1px 0;
+	color: $wcfInputText;
+	outline: none;
+	padding: 4px;
+	
+	&:focus,
+	&:hover {
+		background-color: $wcfInputBackgroundActive;
+		border-color: $wcfInputBorderActive;
+		color: $wcfInputTextActive;
+	}
+	
+	&[disabled] {
+		background-color: $wcfInputBackgroundInactive !important;
+		border-color: $wcfInputBorderInactive !important;
+		color: $wcfInputTextInactive !important;
+	}
+}
+
+textarea {
+	border-width: 1px;
+	width: 100%;
+	
+	@extend .wcfFontDefault;
+}
+
+.selectDropdown {
+	position: relative;
+	
+	&::after {
+		content: $fa-var-caret-down;
+		display: block;
+		font-family: FontAwesome;
+		font-size: 14px;
+		pointer-events: none;
+		position: absolute;
+		right: 7px;
+		top: 0px;
+	}
+	
+	> select {
+		padding-right: 18px;
+		
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+	}
+}
+
+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%;
+	}
+}
+
+dl {
+	&:not(.plain) {
+		display: block;
+		
+		&:not(:first-child) {
+			margin-top: 10px;
+		}
+		
+		&:not(:last-child) {
+			margin-bottom: 10px;
+		}
+		
+		> dt {
+			display: block;
+			
+			&:not(:empty) {
+				margin-bottom: 5px;
+			}
+		}
+		
+		> dd {
+			display: block;
+		}
+		
+		&.wide > dt {
+			display: none;
+		}
+		
+		& + dl:not(.plain) {
+			padding-top: 10px;
+		}
+	}
+	
+	&.dataList {
+		@extend .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 {
+		> small:not(.innerError) {
+			color: $wcfDimmedColor;
+			display: block;
+			margin-top: 5px;
+		}
+	}
+	
+	&.condensed {
+		display: block;
+		
+		> dt,
+		> dd {
+			display: block;
+			margin: 0;
+			text-align: left;
+			width: 100%;
+		}
+		
+		> dd + dt {
+			margin-top: 15px;
+		}
+		
+		> dt:not(:empty) {
+			margin-bottom: 5px;
+		}
+	}
+}
+
+.formSubmit {
+	text-align: center;
+	
+	&:not(:first-child) {
+		margin-top: 20px;
+	}
+	
+	> :not(:first-child) {
+		margin-left: 10px;
+	}
+}
+
+.flexibleButtonGroup {
+	display: flex;
+	
+	> li {
+		flex: 0 0 auto;
+		
+		&:not(:last-child) {
+			margin-right: 5px;
+		}
+		
+		> input[type="radio"] {
+			display: none;
+			
+			&:checked + label {
+				cursor: default;
+				
+				> .icon {
+					cursor: default !important;
+				}
+			}
+			
+			&:checked + label,
+			& + label:hover {
+				color: #fff;
+				
+				&.green {
+					background-color: rgb(148, 170, 114);
+					//background-color: rgb(92, 184, 92);
+				}
+				
+				&.red {
+					background-color: rgb(232, 151, 149);
+					//background-color: rgb(217, 83, 79);
+				}
+				
+				&.yellow {
+					background-color: rgb(203, 172, 91);
+					//background-color: rgb(240, 173, 78);
+				}
+				
+				> .icon {
+					color: #fff;
+				}
+			}
+		}
+		
+		> label {
+			background-color: rgb(242, 242, 242);
+			cursor: pointer;
+			padding: 5px 10px;
+			
+			&.green,
+			&.green > .icon {
+				color: rgb(54, 125, 54);
+			}
+			
+			&.red,
+			&.red > .icon {
+				color: rgb(201, 48, 44);
+			}
+			
+			&.yellow,
+			&.yellow > .icon {
+				color: rgb(236, 151, 31);
+			}
+			
+			> .icon {
+				cursor: pointer !important;
+			}
+		}
+	}
+}
+
+.inputAddon:not(.inputAddonTextarea) {
+	display: flex;
+	
+	&:not(:last-child) {
+		margin-bottom: 5px;
+	}
+	
+	> .inputPrefix {
+		flex: 0 0 auto;
+		
+		&.button {
+			border-radius: 0;
+			margin-right: 5px;
+		}
+	}
+	
+	> .inputSuffix {
+		flex: 0 0 auto;
+		
+		&.button {
+			border-radius: 0;
+			margin-left: 5px;
+		}
+	}
+	
+	> input,
+	> textarea {
+		flex: 1 auto;
+	}
+}
+
+.inputAddonTextarea > .inputPrefix.button {
+	border-bottom-width: 0;
+	border-radius: 0;
+}
diff --git a/wcfsetup/install/files/style/layout/global.scss b/wcfsetup/install/files/style/layout/global.scss
index a4966fa05f..94bf2e6ecd 100644
--- a/wcfsetup/install/files/style/layout/global.scss
+++ b/wcfsetup/install/files/style/layout/global.scss
@@ -30,19 +30,19 @@
 
 /* boxes with an image */
 @mixin box($imageSize, $margin: 0) {
-	display: flex;
+	display: flex !important;
 	
 	&:not(:last-child) {
 		margin-bottom: ($margin + 3px);
 	}
 	
 	> :first-child:not(:last-child) {
-		flex: 0 auto;
+		flex: 0 auto !important;
 		margin-right: $margin;
 	}
 	
 	> :last-child {
-		flex: 1;
+		flex: 1 !important;
 	}
 }
 
@@ -60,29 +60,29 @@ small {
 }
 
 .wcfFontDefault {
-	font-family: "Open Sans";
+	font-family: "Open Sans", "Segoe UI";
 	font-weight: 400;
 }
 
 .wcfFontSmall {
-	font-family: "Open Sans";
+	font-family: "Open Sans", "Segoe UI";
 	font-size: .85rem;
 	font-weight: 400;
 }
 
 .wcfFontBold {
-	font-family: "Open Sans";
+	font-family: "Open Sans", "Segoe UI Semibold";
 	font-weight: 600;
 }
 
 .wcfFontLarger {
-	font-family: "Open Sans";
+	font-family: "Open Sans", "Segoe UI Light";
 	font-size: 1.2rem;
 	font-weight: 300;
 }
 
 .wcfFontLarge {
-	font-family: "Open Sans";
+	font-family: "Open Sans", "Segoe UI Light";
 	font-size: 1.4rem;
 	font-weight: 300;
 }
diff --git a/wcfsetup/install/files/style/layout/layout.scss b/wcfsetup/install/files/style/layout/layout.scss
index f43a3a4db1..a3613e1495 100644
--- a/wcfsetup/install/files/style/layout/layout.scss
+++ b/wcfsetup/install/files/style/layout/layout.scss
@@ -35,14 +35,14 @@ strong {
 
 /* COLUMN LAYOUT */
 #pageHeader {
-	flex: 0 auto;
+	flex: 0 0 auto;
 	z-index: 100;
 }
 
 .main {
 	background-color: $wcfContentBackground;
 	color: $wcfContentText;
-	flex: 1 auto;
+	flex: 1 0 auto;
 	padding: 40px 0;
 	z-index: 50;
 	
@@ -77,7 +77,7 @@ strong {
 }
 
 #pageFooter {
-	flex: 0 auto;
+	flex: 0 0 auto;
 }
 
 /* CONTENT AREA */
diff --git a/wcfsetup/install/files/style/layout/navigation.scss b/wcfsetup/install/files/style/layout/navigation.scss
index d722e8342b..2049373f46 100644
--- a/wcfsetup/install/files/style/layout/navigation.scss
+++ b/wcfsetup/install/files/style/layout/navigation.scss
@@ -1,5 +1,6 @@
 .navigation {
-	background-color: $wcfHeaderBackground;
+	background-color: $wcfHeaderNavigationBackground;
+	color: $wcfHeaderNavigationText;
 	flex: 0 auto;
 	padding: 5px 0;
 	z-index: 25;
@@ -10,6 +11,18 @@
 		justify-content: flex-end;
 		height: 30px;
 	}
+	
+	.icon {
+		color: $wcfHeaderNavigationText;
+	}
+	
+	a {
+		color: $wcfHeaderNavigationLink;
+		
+		&:hover {
+			color: $wcfHeaderNavigationLinkActive;
+		}
+	}
 }
 
 .navigationIcons {
@@ -77,59 +90,40 @@
 }
 
 .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;
+		display: flex;
 		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;
+		> .invisible {
+			display: none;
 		}
 		
-		&.active {
-			background-color: rgb(255, 255, 255);
-			
-			> span:not(.invisible) {
-				color: rgb(79, 129, 189);
-				cursor: default;
-				
-				&:hover {
-					color: rgb(79, 129, 189);
-				}
-			}
+		> a,
+		> span {
+			background-color: $wcfButtonBackground;
+			border: 1px solid $wcfButtonBorder;
+			color: $wcfButtonText;
+			padding: 3px 5px;
 		}
 		
-		&.jumpTo {
-			cursor: pointer;
+		&.active > a,
+		&.active > span,
+		> a:hover {
+			background-color: $wcfButtonBackgroundActive;
+			border-color: $wcfButtonBorderActive;
+			color: $wcfButtonTextActive;
 		}
 		
-		&.skip {
-			align-items: center;
-			display: flex;
+		&:not(:last-child) {
+			margin-right: -1px;
 		}
 		
-		> a,
-		> span:not(.invisible) {
-			color: rgb(255, 255, 255);
-			display: block;
-			padding: 3px 7px;
-			
-			&:hover {
-				color: rgb(255, 255, 255);
-			}
+		> .icon {
+			height: auto;
+			line-height: inherit;
+			width: auto;
 		}
 	}
 }
diff --git a/wcfsetup/install/files/style/layout/pageFooter.scss b/wcfsetup/install/files/style/layout/pageFooter.scss
index 51fe2b3f71..05e153a3db 100644
--- a/wcfsetup/install/files/style/layout/pageFooter.scss
+++ b/wcfsetup/install/files/style/layout/pageFooter.scss
@@ -7,11 +7,23 @@
 	a {
 		color: $wcfFooterBoxLink;
 		
+		.icon {
+			color: $wcfFooterBoxLink;
+		}
+		
 		&:hover {
 			color: $wcfFooterBoxLinkActive;
+			
+			.icon {
+				color: $wcfFooterBoxLinkActive;
+			}
 		}
 	}
 	
+	.icon {
+		color: $wcfFooterBoxText;
+	}
+	
 	> div > ul {
 		display: flex;
 		flex-wrap: wrap;
diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index eecb643be9..8c8e8ffa86 100644
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -9,21 +9,28 @@
 .interactiveDropdown { display: none; }
 /* @TODO END */
 
-#pageHeader {
-	background-color: $wcfUserPanelBackground;
-}
-
-#pageHeader > div > div {
-	align-items: center;
-	display: flex;
-	flex-wrap: wrap;
-	padding: 20px 0;
+.pageHeader {
+	background-color: $wcfHeaderBackground;
+	
+	a {
+		color: $wcfHeaderLink;
+		
+		&:hover {
+			color: $wcfHeaderLinkActive;
+		}
+	}
+	
+	> 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;
@@ -46,21 +53,28 @@
 				margin-right: $wcfGapMedium;
 			}
 			
-			&.active > a {
-				@extend .wcfFontBold;
-				
-				color: rgba(255, 255, 255, 1);
+			&::before {
+				border-top: 1px solid $wcfMenuBorder;
+				content: "";
+				display: block;
+				transition: width .12s ease-out;
+				width: 0;
+			}
+			
+			&:hover::before {
+				width: 100%;
 			}
 			
 			> a {
-				color: rgba(255, 255, 255, .8);
 				transition: color .2s linear;
 				text-decoration: none;
 				text-transform: uppercase;
+			}
+			
+			&.active > a {
+				@extend .wcfFontBold;
 				
-				&:hover {
-					color: rgba(255, 255, 255, 1);
-				}
+				color: $wcfHeaderLinkActive;
 			}
 		}
 	}
@@ -69,59 +83,64 @@
 .subMenuItems {
 	position: relative;
 	
-	&:hover > .subMenu {
-		opacity: 1;
-		transition-delay: 0s;
-		visibility: visible;
+	&:hover {
+		> a::after {
+			transform: rotateX(180deg);
+		}
+		
+		> .subMenu {
+			opacity: 1;
+			transition-delay: 0s;
+			visibility: visible;
+		}
 	}
 	
 	> a {
 		padding-right: 15px;
 		
-		&:after {
-			// @TODO
-			//content: @fa-var-caret-down;
+		&::after {
+			content: $fa-var-caret-down;
 			display: block;
 			font-family: FontAwesome;
 			position: absolute;
 			right: 0;
-			top: 0;
+			top: 1px;
+			transition: transform .12s ease-out;
 		}
 	}
 }
 
 .subMenu {
-	background-color: rgba(52, 73, 94, 1);
-	border-radius: 3px;
+	background-color: $wcfHeaderMenuBackground;
+	border: 1px solid $wcfHeaderMenuBorder;
 	opacity: 0;
-	padding: 5px 0;
+	padding: 3px 0;
 	position: absolute;
 	transition: visibility .2s linear .2s, opacity .2s linear;
 	visibility: hidden;
 	
+	@include boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
+	
 	> li {
-		&:not(:first-child) {
-			margin-top: 5px;
-		}
-		
-		&.active > a {
-			background-color: rgb(79, 129, 189);
-			cursor: default;
-		}
-		
 		> a {
 			@extend .wcfFontDefault;
 			
-			color: rgb(255, 255, 255);
+			color: $wcfHeaderMenuLink;
 			display: block;
 			font-size: 1rem;
-			padding: 5px 10px;
-			transition: background-color .2s linear;
+			padding: 5px 20px;
 			white-space: nowrap;
-			
-			&:hover {
-				background-color: rgb(79, 129, 189);
-			}
+		}
+		
+		&.active > a,
+		> a:hover {
+			background-color: $wcfMenuContentBackgroundActive;
+			color: $wcfMenuContentLinkActive;
+			text-decoration: none;
+		}
+		
+		&.active > a {
+			cursor: default;
 		}
 	}
 }
@@ -186,5 +205,21 @@
 #search {
 	flex: 0 50%;
 	text-align: right;
+	
+	> form {
+		display: inline-block;
+	}
 }
 
+#pageHeaderSearch {
+	background-color: $wcfHeaderSearchBoxBackground;
+	border-width: 0;
+	color: $wcfHeaderSearchBoxText;
+	padding: 5px 10px;
+	
+	&:focus,
+	&:hover {
+		background-color: $wcfHeaderSearchBoxBackgroundAccent;
+		color: $wcfHeaderSearchBoxTextActive;
+	}
+}
diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.less b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
similarity index 75%
rename from wcfsetup/install/files/style/layout/pageHeaderSticky.less
rename to wcfsetup/install/files/style/layout/pageHeaderSticky.scss
index d29a2d1f5a..fc8086c189 100644
--- a/wcfsetup/install/files/style/layout/pageHeaderSticky.less
+++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
@@ -1,9 +1,14 @@
+#pageHeader > div {
+	/* huge performance increase when scrolling */
+	will-change: transform;
+}
+
 #pageHeader.sticky {
 	flex-wrap: nowrap;
 	z-index: 300;
 	
 	> div {
-		background-color: rgba(52, 73, 94, 1); /* @TODO */
+		background-color: $wcfHeaderBackground; /* @TODO */
 		left: 0;
 		position: fixed;
 		top: 0;
diff --git a/wcfsetup/install/files/style/layout/sidebar.scss b/wcfsetup/install/files/style/layout/sidebar.scss
index 61269f7fac..dc207e158d 100644
--- a/wcfsetup/install/files/style/layout/sidebar.scss
+++ b/wcfsetup/install/files/style/layout/sidebar.scss
@@ -1,8 +1,11 @@
 .sidebar {
+	background-color: $wcfSidebarBackground;
+	color: $wcfSidebarBoxText;
+	
 	> div,
 	> fieldset,
 	> section {
-		background-color: $wcfContentBackgroundAlternate;
+		background-color: $wcfSidebarBoxBackground;
 		border-radius: 3px;
 		padding: 20px;
 		
@@ -12,12 +15,10 @@
 			display: block;
 			height: 0;
 		}
-	}
-	
-	> div + *,
-	> fieldset + *,
-	> section + * {
-		margin-top: 30px;
+		
+		& + * {
+			margin-top: 30px;
+		}
 	}
 	
 	> div {
@@ -38,10 +39,42 @@
 	
 	section > h1,
 	fieldset > legend {
-		.wcfFontLarge;
+		@extend .wcfFontLarge;
 		
-		color: rgba(67, 67, 67, 1);
+		color: $wcfSidebarBoxHeadlineText;
 		margin-bottom: 10px;
+		
+		> a {
+			color: $wcfSidebarBoxHeadlineLink;
+			
+			> .icon {
+				color: $wcfSidebarBoxHeadlineLink;
+			}
+			
+			&:hover {
+				color: $wcfSidebarBoxHeadlineLinkActive;
+				
+				> .icon {
+					color: $wcfSidebarBoxHeadlineLinkActive;
+				}
+			}
+		}
+	}
+	
+	a {
+		color: $wcfSidebarBoxLink;
+		
+		> .icon {
+			color: $wcfSidebarBoxLink;
+		}
+		
+		&:hover {
+			color: $wcfSidebarBoxLinkActive;
+			
+			> .icon {
+				color: $wcfSidebarBoxLinkActive;
+			}
+		}
 	}
 	
 	dl.dataList {
diff --git a/wcfsetup/install/files/style/ui/button.scss b/wcfsetup/install/files/style/ui/button.scss
index 2750273e97..a03c005dd2 100644
--- a/wcfsetup/install/files/style/ui/button.scss
+++ b/wcfsetup/install/files/style/ui/button.scss
@@ -10,15 +10,12 @@ input[type="submit"],
 	cursor: pointer;
 	display: inline-block;
 	padding: 5px 10px;
-	transition-duration: .2s;
-	transition-property: background-color, border-color, color;
-	transition-timing-function: linear;
 	
 	.icon {
 		color: $wcfButtonText;
-		transition: color .2s linear;
 	}
 	
+	&.active,
 	&:hover {
 		background-color: $wcfButtonBackgroundActive;
 		border-color: $wcfButtonBorderActive;
@@ -39,21 +36,52 @@ button.buttonPrimary,
 input[type="button"].buttonPrimary,
 input[type="submit"],
 .button.buttonPrimary {
-	background-color: $wcfButtonBackgroundAccent;
-	border-color: $wcfButtonBorderAccent;
-	color: $wcfButtonTextAccent !important;
+	background-color: $wcfButtonPrimaryBackground;
+	border-color: $wcfButtonPrimaryBorder;
+	color: $wcfButtonPrimaryText !important;
 	
 	.icon {
-		color: $wcfButtonTextAccent;
+		color: $wcfButtonPrimaryText;
 	}
 	
+	&.active,
 	&:hover {
-		background-color: $wcfButtonBackgroundAccentActive;
-		border-color: $wcfButtonBorderAccentActive;
-		color: $wcfButtonTextAccentActive;
+		background-color: $wcfButtonPrimaryBackgroundActive;
+		border-color: $wcfButtonPrimaryBorderActive;
+		color: $wcfButtonPrimaryTextActive !important;
 		
 		.icon {
-			color: $wcfButtonTextAccentActive;
+			color: $wcfButtonPrimaryTextActive;
+		}
+	}
+}
+
+/* force active state for buttons toggling a dropdown */
+.dropdownOpen {
+	> button,
+	> input[type="button"],
+	> input[type="reset"],
+	> input[type="submit"],
+	> .button {
+		background-color: $wcfButtonBackgroundActive;
+		border-color: $wcfButtonBorderActive;
+		color: $wcfButtonTextActive !important;
+		
+		.icon {
+			color: $wcfButtonTextActive;
+		}
+	}
+	
+	> button.buttonPrimary,
+	> input[type="button"].buttonPrimary,
+	> input[type="submit"],
+	> .button.buttonPrimary {
+		background-color: $wcfButtonPrimaryBackgroundActive;
+		border-color: $wcfButtonPrimaryBorderActive;
+		color: $wcfButtonPrimaryTextActive !important;
+		
+		.icon {
+			color: $wcfButtonPrimaryTextActive;
 		}
 	}
 }
@@ -91,22 +119,21 @@ input[type="submit"],
 	
 	> li {
 		&:not(:last-child) {
-			border-right: 1px solid $wcfButtonBackgroundAccentActive;
+			border-right: 1px solid $wcfContentBorder;
 			margin-right: 0;
 		}
 		
 		&:first-child .button {
-			border-bottom-left-radius: 3px;
-			border-top-left-radius: 3px;
+			border-radius: 3px 0 0 3px;
 		}
 		
 		&:last-child .button {
-			border-bottom-right-radius: 3px;
-			border-top-right-radius: 3px;
+			border-radius: 0 3px 3px 0;
 		}
 		
 		.button {
 			border-radius: 0;
+			border-width: 0;
 		}
 	}
 }
diff --git a/wcfsetup/install/files/style/colorPicker.less b/wcfsetup/install/files/style/ui/colorPicker.scss
similarity index 95%
rename from wcfsetup/install/files/style/colorPicker.less
rename to wcfsetup/install/files/style/ui/colorPicker.scss
index 957217da33..959da04640 100644
--- a/wcfsetup/install/files/style/colorPicker.less
+++ b/wcfsetup/install/files/style/ui/colorPicker.scss
@@ -107,14 +107,14 @@
 	}
 	
 	> .hex {
-		margin-top: @wcfGapLarge;
+		margin-top: $wcfGapLarge;
 	}
 	
 	> .rgba {
-		margin-top: @wcfGapLarge;
+		margin-top: $wcfGapLarge;
 		
 		> li.a {
-			margin-top: @wcfGapSmall;
+			margin-top: $wcfGapSmall;
 		}
 		
 		> li.g,
@@ -128,7 +128,7 @@
 		text-align: right;
 		
 		input {
-			margin-left: @wcfGapSmall;
+			margin-left: $wcfGapSmall;
 			width: 80px;
 		}
 	}
diff --git a/wcfsetup/install/files/style/ui/comment.less b/wcfsetup/install/files/style/ui/comment.scss
similarity index 84%
rename from wcfsetup/install/files/style/ui/comment.less
rename to wcfsetup/install/files/style/ui/comment.scss
index 28d9494b12..5b3c61031d 100644
--- a/wcfsetup/install/files/style/ui/comment.less
+++ b/wcfsetup/install/files/style/ui/comment.scss
@@ -27,11 +27,11 @@
 }
 
 .commentResponse {
-	border-top: 1px solid rgb(238, 238, 238);
+	border-top: 1px solid $wcfContentBorder;
 	padding: 10px 0;
 }
 
 .commentOptionContainer {
-	border-top: 1px solid rgb(238, 238, 238);
+	border-top: 1px solid $wcfContentBorder;
 	padding-top: 10px;
 }
diff --git a/wcfsetup/install/files/style/ui/dialog.less b/wcfsetup/install/files/style/ui/dialog.scss
similarity index 61%
rename from wcfsetup/install/files/style/ui/dialog.less
rename to wcfsetup/install/files/style/ui/dialog.scss
index a72f73a99f..42b4d6d7d4 100644
--- a/wcfsetup/install/files/style/ui/dialog.less
+++ b/wcfsetup/install/files/style/ui/dialog.scss
@@ -8,11 +8,10 @@
 	visibility: hidden;
 	z-index: 399;
 	
-	transition: visibility 0s linear .3s;
+	transition: visibility 0s linear .3s, background-color .12s linear;
 	
 	&[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);
+		background-color: rgba(0, 0, 0, .4);
 		visibility: visible;
 		
 		transition-delay: 0s;
@@ -30,11 +29,8 @@
 }
 
 .dialogContainer {
-	background-color: rgba(0, 0, 0, .4);
-	border: 3px solid transparent;
-	border-radius: 3px;
+	border: 1px solid rgb(52, 152, 219);
 	box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .3);
-	box-sizing: border-box;
 	left: 50%;
 	max-height: 80%;
 	max-width: 80%;
@@ -42,6 +38,7 @@
 	position: absolute;
 	top: 10%;
 	transform: translateX(-50%);
+	will-change: opacity, transform;
 	
 	-webkit-animation: wcfDialogOut .3s;
 	-webkit-animation-fill-mode: forwards;
@@ -52,31 +49,28 @@
 	}
 	
 	> header {
-		background: linear-gradient(to right, @wcfTabularBoxBackgroundColor, lighten(@wcfTabularBoxBackgroundColor, 10%));
-		border-top-left-radius: 3px;
-		border-top-right-radius: 3px;
-		color: @wcfTabularBoxColor;
+		background-color: $wcfContentBackground;
+		border-bottom: 1px solid $wcfContentBorder;
+		color: $wcfContentHeadlineText;
 		display: flex;
 		padding: 7px 10px;
 		
-		.textShadow(@wcfTabularBoxBackgroundColor);
-		
 		> span {
 			flex: 1 auto;
-			font-family: "Segoe UI Light";
-			font-size: 1.4rem;
+			
+			@extend .wcfFontLarge;
 		}
 		
 		> a {
-			color: @wcfTabularBoxColor;
+			color: $wcfContentHeadlineLink;
 			flex: 0 0 20px;
 			font-family: FontAwesome;
 			font-size: 18px;
 			text-align: right;
 			text-decoration: none;
 			
-			&:before {
-				content: @fa-var-times-circle;
+			&::before {
+				content: $fa-var-times;
 			}
 			
 			> span {
@@ -86,22 +80,20 @@
 	}
 	
 	> .dialogContent {
-		background-color: @wcfContainerBackgroundColor;
-		box-sizing: border-box;
-		color: @wcfColor;
+		background-color: $wcfContentBackground;
+		color: $wcfContentText;
 		overflow: auto;
 		
 		&:not(.dialogContentNoPadding) {
-			padding: 10px;
-			padding-bottom: 0;
+			padding: 30px 20px 0 20px;
 			
-			&:after {
+			&::after {
 				content: "";
 				display: block;
 				height: 10px;
 			}
 			
-			&.dialogForm:after {
+			&.dialogForm::after {
 				height: 17px;
 			}
 		}
@@ -114,7 +106,6 @@
 		dl:not(.plain) {
 			> dt {
 				float: none;
-				margin-bottom: @wcfGapTiny;
 				text-align: left;
 				width: auto !important;
 				
@@ -129,10 +120,8 @@
 		}
 		
 		.dialogFormSubmit {
-			background-color: @wcfContainerBackgroundColor;
-			border-top: 1px solid #3F7FBF;
-			border-bottom-left-radius: 3px;
-			border-bottom-right-radius: 3px;
+			background-color: $wcfContentBackground;
+			border-top: 1px solid $wcfContentBorder;
 			bottom: 0;
 			left: 0;
 			padding: 10px;
@@ -150,42 +139,23 @@
 	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;
 }
 
+@keyframes wcfSpinner {
+	to { transform: rotate(360deg); }
+}
+
 .spinner {
-	border: 1px solid rgba(0, 0, 0, .3);
-	border-radius: 6px;
-	box-sizing: border-box;
-	color: #fff;
+	background-color: rgb(255, 255, 255);
+	border: 1px solid rgb(204, 204, 204);
+	box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2);
+	color: rgb(44, 62, 80);
 	left: 50%;
 	opacity: 0;
-	padding: 7px;
+	padding: 10px;
 	position: fixed;
 	text-align: center;
 	top: 200px;
@@ -194,9 +164,6 @@
 	
 	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 {
@@ -207,17 +174,26 @@
 	}
 	
 	> .icon {
-		color: #fff;
+		border: 2px solid rgb(204, 204, 204);
+		border-top-color: rgb(79, 129, 189);
+		border-radius: 50%;
+		height: 48px;
+		animation: wcfSpinner .6s linear infinite;
+		width: 48px;
+		
+		&::before {
+			display: none;
+		}
 	}
 	
 	> span:not(.icon) {
 		display: block;
-		margin-top: @wcfGapSmall;
+		margin-top: 5px;
 	}
 }
 
 .systemConfirmation p {
-	padding-top: @wcfGapSmall;
+	//padding-top: @wcfGapSmall;
 }
 
 /* notification overlay */
@@ -250,6 +226,6 @@
 		max-width: 80%;
 		pointer-events: auto;
 		
-		.userSelectNone;
+		//.userSelectNone;
 	}
 }
diff --git a/wcfsetup/install/files/style/ui/dropdown.less b/wcfsetup/install/files/style/ui/dropdown.scss
similarity index 72%
rename from wcfsetup/install/files/style/ui/dropdown.less
rename to wcfsetup/install/files/style/ui/dropdown.scss
index b44fe9107b..1cb7964e90 100644
--- a/wcfsetup/install/files/style/ui/dropdown.less
+++ b/wcfsetup/install/files/style/ui/dropdown.scss
@@ -6,10 +6,10 @@
 	
 	&.inputAddon {
 		> .dropdownToggle {
-			padding: @wcfGapTiny;
+			padding: $wcfGapTiny;
 			
 			> span.active:after {
-				content: "\f0d7";
+				content: "\f0d7"; // @TODO: use a variable instead
 				font-family: FontAwesome;
 				font-size: 14px;
 				margin-left: 7px;
@@ -22,14 +22,14 @@
 		width: 100%;
 		
 		input {
-			border-radius: 0 @wcfInputBorderRadius @wcfInputBorderRadius 0;
+			border-radius: 0 3px 3px 0;
 			display: table-cell;
 			margin: 0;
 			width: 99%;
 		}
 		
 		textarea {
-			border-radius: 0 @wcfInputBorderRadius @wcfInputBorderRadius;
+			border-radius: 0 3px 3px;
 			display: block;
 			margin-top: 0;
 		}
@@ -38,23 +38,23 @@
 			cursor: pointer;
 			display: table-cell;
 			letter-spacing: -1px;
-			padding: 0 @wcfGapSmall 0 @wcfGapTiny;
+			padding: 0 $wcfGapSmall 0 $wcfGapTiny;
 			vertical-align: middle;
 			width: 1%;
 			
 			&.button {
 				border-right-width: 0;
-				border-radius: @wcfInputBorderRadius 0 0 @wcfInputBorderRadius;
+				border-radius: $wcfInputBorderRadius 0 0 $wcfInputBorderRadius;
 			}
 			
 			span {
 				margin-right: -1px;
-				padding-left: @wcfGapTiny;
+				padding-left: $wcfGapTiny;
 				white-space: nowrap;
 				word-wrap: normal;
 				
 				&.active::after {
-					content: "\f0d7";
+					content: "\f0d7"; // @TODO: use a variable instead
 					font-family: FontAwesome;
 					font-size: 14px;
 					margin-left: 7px;
@@ -65,11 +65,11 @@
 		.dropdownCaptionTextarea {
 			cursor: pointer;
 			margin: 0 0 -1px 0;
-			padding-left: @wcfGapSmall;
-			padding-right: @wcfGapSmall;
+			padding-left: $wcfGapSmall;
+			padding-right: $wcfGapSmall;
 			
 			&.button {
-				border-radius: @wcfInputBorderRadius @wcfInputBorderRadius 0 0;
+				border-radius: 3px 3px 0 0;
 			}
 			
 			&~ .dropdownMenu {
@@ -81,7 +81,7 @@
 				word-wrap: normal;
 				
 				&.active::after {
-					content: "\f0d7";
+					content: "\f0d7"; // @TODO: use a variable instead
 					font-family: FontAwesome;
 					font-size: 14px;
 					margin-left: 7px;
@@ -106,22 +106,22 @@
 }
 
 .dropdownMenu {
-	background-color: @wcfDropdownBackgroundColor;
-	border: 1px solid @wcfDropdownBorderColor;
-	color: @wcfDropdownColor;
+	background-color: $wcfDropdownBackground;
+	border: 1px solid $wcfDropdownBorder;
+	color: $wcfDropdownText;
 	display: none;
 	float: left;
 	min-width: 160px;
-	padding: 4px 0;
+	padding: 3px 0;
 	position: absolute;
 	text-align: left;
 	z-index: 450;
 	
-	.boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
+	@include boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
 	
 	&::after {
 		border: 7px solid transparent;
-		border-bottom-color: @wcfDropdownBorderColor;
+		border-bottom-color: $wcfDropdownBorder;
 		border-top-width: 0;
 		content: "";
 		display: inline-block;
@@ -133,7 +133,7 @@
 	
 	&::before {
 		border: 6px solid transparent;
-		border-bottom-color: @wcfDropdownBackgroundColor;
+		border-bottom-color: $wcfDropdownBackground;
 		border-top-width: 0;
 		content: "";
 		display: inline-block;
@@ -158,7 +158,7 @@
 	&.dropdownArrowBottom {
 		&::after {
 			border: 7px transparent solid;
-			border-top-color: @wcfDropdownBorderColor;
+			border-top-color: $wcfDropdownBorder;
 			border-bottom-width: 0;
 			bottom: -7px;
 			top: auto;
@@ -166,7 +166,7 @@
 		
 		&::before {
 			border: 6px transparent solid;
-			border-top-color: @wcfDropdownBackgroundColor;
+			border-top-color: $wcfDropdownBackground;
 			border-bottom-width: 0;
 			bottom: -6px;
 			top: auto;
@@ -180,27 +180,34 @@
 	li {
 		display: block;
 		
+		@include textShadow($wcfDropdownText);
+		
 		&:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText),
 		&.dropdownList > li:hover:not(.dropdownDivider),
 		&.dropdownNavigationItem,
 		&.active {
-			background-color: @wcfDropdownHoverBackgroundColor;
+			background-color: $wcfDropdownBackgroundActive;
+			color: $wcfDropdownTextActive;
+			
+			@include textShadow($wcfDropdownTextActive);
 		}
 		
 		&.dropdownDivider {
-			border-top: 1px dotted @wcfDropdownBorderColor;
-			margin: @wcfGapTiny;
+			border-top: 1px solid $wcfDropdownBorderAccent;
+			margin: 3px 0;
 		}
 		
 		&.dropdownText {
-			font-size: @wcfSmallFontSize;
-			padding: @wcfGapTiny @wcfGapMedium;
+			font-size: $wcfSmallFontSize;
+			padding: $wcfGapTiny $wcfGapMedium;
 		}
 		
 		&.boxFlag {
 			padding-top: 2px;
 		}
 		
+		/*
+		// @TODO
 		&.missingValue > span {
 			position: relative;
 			
@@ -213,35 +220,37 @@
 				top: @wcfGapTiny;
 			}
 		}
+		*/
 		
 		> a,
 		> span {
 			clear: both;
-			color: @wcfDropdownColor;
 			cursor: pointer;
 			display: block;
 			max-width: 350px;
 			overflow: hidden;
-			padding: @wcfGapTiny @wcfGapMedium;
+			padding: 5px 20px;
 			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 {
+			color: $wcfDropdownLink;
+			
+			&:hover {
+				color: $wcfDropdownLinkActive;
+				
+				@include textShadow($wcfDropdownLinkActive);
+			}
+		}
+		
 		> a > small {
 			display: block;
 		}
@@ -253,7 +262,7 @@
 		> .box16 {
 			cursor: pointer;
 			min-height: 0;
-			padding: @wcfGapTiny @wcfGapTiny @wcfGapTiny @wcfGapSmall;
+			padding: $wcfGapTiny $wcfGapTiny $wcfGapTiny $wcfGapSmall;
 			
 			> div {
 				margin-left: 21px;
@@ -268,7 +277,7 @@
 			margin-bottom: 0;
 			
 			> p {
-				font-size: @wcfSmallFontSize;
+				font-size: $wcfSmallFontSize;
 			}
 		}
 	}
diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index 08dd38160e..d0a1ae83f8 100644
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -156,7 +156,7 @@
 }
 
 .messageFooterButtons {
-	@extend .inlineList;
+	@extend .buttonGroup;
 	
 	justify-content: flex-end;
 	margin-top: 10px;
@@ -166,10 +166,6 @@
 	&.forceVisible {
 		opacity: 1 !important;
 	}
-	
-	> li:not(:last-child) {
-		margin-right: 5px;
-	}
 }
 
 .message:hover {
diff --git a/wcfsetup/install/files/style/ui/redactor.less b/wcfsetup/install/files/style/ui/redactor.scss
similarity index 93%
rename from wcfsetup/install/files/style/ui/redactor.less
rename to wcfsetup/install/files/style/ui/redactor.scss
index 1d992f7b08..34f0e9bbd4 100644
--- a/wcfsetup/install/files/style/ui/redactor.less
+++ b/wcfsetup/install/files/style/ui/redactor.scss
@@ -47,10 +47,10 @@
 .re-gallery:before { content: "\e61f"; }
 
 .redactor-box {
-	border: 1px solid @wcfContainerBorderColor;
+	border: 1px solid $wcfContentBorder;
 	border-radius: 3px 3px 0 0;
 	font-size: 0;
-	line-height: @wcfBaseLineHeight;
+	line-height: $wcfBaseLineHeight;
 	position: relative;
 	
 	& + .messageTabMenu {
@@ -70,13 +70,13 @@
 	}
 	
 	> .redactorAutosaveNotice {
-		background-color: @wcfContainerBackgroundColor;
-		border: 1px solid @wcfContainerBorderColor;
+		background-color: $wcfContentBackground;
+		border: 1px solid $wcfContentBorder;
 		border-width: 1px 0 0 1px;
 		bottom: 0;
 		font-size: 1rem;
 		opacity: 0;
-		padding: @wcfGapSmall;
+		padding: $wcfGapSmall;
 		position: absolute;
 		right: 0;
 		transition: visibility 0s linear .3s, opacity .3s linear;
@@ -89,11 +89,11 @@
 		}
 		
 		&.redactorAutosaveNoticeIcons > span.fa-check {
-			margin-right: @wcfGapSmall;
+			margin-right: $wcfGapSmall;
 		}
 		
 		> span.redactorAutosaveMessage {
-			padding: 0 @wcfGapSmall;
+			padding: 0 $wcfGapSmall;
 		}
 	}
 }
@@ -109,7 +109,7 @@
 		border-width: 0;
 		box-shadow: none;
 		font-size: 1rem;
-		line-height: @wcfBaseLineHeight;
+		line-height: $wcfBaseLineHeight;
 		outline: none;
 		padding: 10px;
 		resize: vertical;
@@ -121,7 +121,7 @@
 	
 	ul,
 	ol {
-		.nativeList;
+		@extend .nativeList;
 	}
 	
 	ul {
@@ -156,12 +156,12 @@
 			position: relative;
 			
 			> .redactorQuoteEdit {
-				bottom: -@wcfGapSmall;
-				left: -@wcfGapMedium;
-				right: -@wcfGapMedium;
-				top: -@wcfGapMedium;
-				padding-top: @wcfGapMedium;
-				padding-left: @wcfGapMedium;
+				bottom: -$wcfGapSmall;
+				left: -$wcfGapMedium;
+				right: -$wcfGapMedium;
+				top: -$wcfGapMedium;
+				padding-top: $wcfGapMedium;
+				padding-left: $wcfGapMedium;
 				position: absolute;
 			}
 		}
@@ -180,10 +180,9 @@
 			right: 0;
 			text-align: center;
 			top: 0;
+			transition: opacity .2s linear;
 			z-index: 200;
 			
-			.transition(opacity, .3s, linear);
-			
 			> div {
 				cursor: pointer;
 				font-size: 1.4rem;
@@ -191,9 +190,7 @@
 				padding: 1em 3em;
 				position: absolute;
 				top: 50%;
-				
 				transform: translate(-50%, -50%);
-				-ms-transform: translate(-50%, -50%);
 			}
 		}
 		
@@ -228,7 +225,7 @@
 }
 
 .redactor-toolbar {
-	background: repeating-linear-gradient(0deg, @wcfContainerBorderColor 0px, @wcfContainerBorderColor 3%, @wcfContainerBackgroundColor 3%, @wcfContainerAccentBackgroundColor 100%);
+	background: repeating-linear-gradient(0deg, $wcfContentBorder 0px, $wcfContentBorder 3%, $wcfContentBackground 3%, $wcfContentBackground 100%);
 	background-size: 100% 31px;
 	
 	> li {
@@ -238,12 +235,12 @@
 		
 		&:last-of-type,
 		&.separator {
-			border-right: 1px solid @wcfContainerBorderColor;
+			border-right: 1px solid $wcfContentBorder;
 		}
 		
 		> a {
 			box-sizing: border-box;
-			color: @wcfButtonColor;
+			color: $wcfButtonColor;
 			display: block;
 			font-size: 14px;
 			height: 30px;
@@ -253,17 +250,14 @@
 			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;
+				color: $wcfButtonTextInactive;
 			}
 			
 			&:before {
-				color: @wcfColor;
+				color: $wcfButtonText;
 			}
 			
 			> i {
@@ -271,18 +265,19 @@
 				width: 12px;
 				
 				&:before {
-					color: @wcfColor;
+					color: $wcfButtonText;
 				}
 			}
 			
-			&:not(.redactor-button-disabled):hover,
+			&:hover,
 			&.redactor-act,
 			&.dropact {
-				background-color: @wcfContainerHoverBackgroundColor;
-				
-				.textShadow(@wcfButtonHoverBackgroundColor);
+				background-color: $wcfButtonBackgroundActive;
+				color: $wcfButtonTextActive;
 				
-				> i {
+				&::before,
+				> i::before {
+					color: $wcfButtonTextActive;
 					text-shadow: none;
 				}
 			}
@@ -304,13 +299,13 @@
 }
 
 .redactor-toolbar-tooltip {
-	.balloonTooltip;
+	@extend .balloonTooltip;
 	
 	opacity: 1;
 	visibility: visible;
 	
 	&:before {
-		border-color: @wcfTooltipBackgroundColor transparent;
+		border-color: $wcfTooltipBackgroundColor transparent;
 		border-style: solid;
 		border-width: 0 5px 5px;
 		content: "";
@@ -336,11 +331,11 @@
 }
 
 #redactor-image-editter {
-	.balloonTooltip;
+	@extend .balloonTooltip;
 	
 	cursor: pointer;
 	left: 50%;
-	line-height: @wcfSmallFontSize;
+	line-height: $wcfSmallFontSize;
 	margin-top: -13px;
 	opacity: 1;
 	top: 50%;
@@ -375,7 +370,7 @@
 		padding: 0 4px;
 		
 		&:hover {
-			background-color: @wcfDropdownBackgroundColor !important;
+			background-color: $wcfDropdownBackground !important;
 		}
 		
 		> a {
@@ -408,17 +403,17 @@
 }
 
 .redactor-link-tooltip {
-	background-color: @wcfTooltipBackgroundColor;
+	background-color: $wcfTooltipBackgroundColor;
 	border-radius: 6px;
-	color: @wcfTooltipColor;
-	font-size: @wcfSmallFontSize;
+	color: $wcfTooltipColor;
+	font-size: $wcfSmallFontSize;
 	padding: 5px 10px 7px;
 	position: absolute;
 	z-index: 800;
 	
-	.boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
+	@include boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
 	
 	> a {
-		color: @wcfTooltipColor;
+		color: $wcfTooltipColor;
 	}
 }
diff --git a/wcfsetup/install/files/style/ui/tabMenu.less b/wcfsetup/install/files/style/ui/tabMenu.less
deleted file mode 100644
index cc00ad469c..0000000000
--- a/wcfsetup/install/files/style/ui/tabMenu.less
+++ /dev/null
@@ -1,46 +0,0 @@
-.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/tabMenu.scss b/wcfsetup/install/files/style/ui/tabMenu.scss
new file mode 100644
index 0000000000..887ec9edab
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/tabMenu.scss
@@ -0,0 +1,62 @@
+.tabMenuContainer:not(:first-child) {
+	margin-top: 30px;
+}
+
+/* main tabs */
+.tabMenu {
+	margin-bottom: 20px;
+	position: relative;
+	
+	> ul {
+		@extend .inlineList;
+		
+		> li {
+			&:not(:last-child) {
+				margin-right: 20px;
+			}
+			
+			&.active > a {
+				cursor: default;
+			}
+			
+			> a {
+				display: block;
+				padding: 5px 0;
+				
+				@extend .wcfFontLarge;
+			}
+		}
+	}
+	
+	> span {
+		border-top: 1px solid $wcfContentLink;
+		bottom: 0;
+		position: absolute;
+		transition: transform .2s linear, width .2s linear;
+	}
+}
+
+.tabMenuContent.hidden {
+	display: none;
+}
+
+/* sub tabs */
+.menu {
+	margin: -10px 0 40px 0;
+	position: relative;
+	
+	> ul {
+		@extend .inlineList;
+		
+		> li:not(:last-child) {
+			margin-right: 20px;
+		}
+	}
+	
+	> span {
+		border-top: 1px solid $wcfContentLink;
+		bottom: -5px;
+		position: absolute;
+		transition: transform .2s linear, width .2s linear;
+	}
+}
diff --git a/wcfsetup/install/files/style/ui/tabMenuMessage.less b/wcfsetup/install/files/style/ui/tabMenuMessage.scss
similarity index 73%
rename from wcfsetup/install/files/style/ui/tabMenuMessage.less
rename to wcfsetup/install/files/style/ui/tabMenuMessage.scss
index 145c86d1c9..e4ac6ce538 100644
--- a/wcfsetup/install/files/style/ui/tabMenuMessage.less
+++ b/wcfsetup/install/files/style/ui/tabMenuMessage.scss
@@ -1,15 +1,15 @@
 .messageTabMenu {
-	border: 1px solid @wcfContainerBorderColor;
+	border: 1px solid $wcfContentBorder;
 	border-top-width: 0;
 	border-radius: 0 0 3px 3px;
-	line-height: @wcfBaseLineHeight;
+	line-height: $wcfBaseLineHeight;
 	
 	> div,
 	> fieldset{
-		background-color: @wcfContainerBackgroundColor;
+		background-color: $wcfContentBackground;
 		border-width: 0;
 		border-radius: 0;
-		border-top: 1px solid @wcfContainerBorderColor;
+		border-top: 1px solid $wcfContentBorder;
 		display: none;
 		padding: 15px 10px;
 		position: static;
@@ -21,10 +21,10 @@
 	
 	> div {
 		> nav {
-			background-color: @wcfContainerBackgroundColor;
-			border-bottom: 1px solid @wcfContainerBorderColor;
+			background-color: $wcfContentBackground;
+			border-bottom: 1px solid $wcfContentBorder;
 			margin: -14px -21px 14px -21px;
-			padding: @wcfGapTiny @wcfGapSmall;
+			padding: $wcfGapTiny $wcfGapSmall;
 			
 			ul {
 				display: inline-block;
@@ -38,16 +38,16 @@
 					
 					&.active a,
 					&.active a:hover {
-						color: @wcfButtonPrimaryColor;
+						color: $wcfButtonTextAccent;
 						cursor: default;
 					}
 					
 					a {
-						color: @wcfButtonColor;
+						color: $wcfButtonText;
 						display: block;
-						font-size: @wcfSmallFontSize;
+						font-size: $wcfSmallFontSize;
 						outline: 0;
-						padding: 0 @wcfGapSmall;
+						padding: 0 $wcfGapSmall;
 						
 						-webkit-touch-callout: none;
 						-webkit-user-select: none;
@@ -57,13 +57,13 @@
 						user-select: none;
 						
 						&:hover {
-							color: @wcfButtonHoverColor;
+							color: $wcfButtonTextActive;
 							text-decoration: none;
 						}
 					}
 					
 					&:not(:last-child) {
-						padding-right: @wcfGapTiny;
+						padding-right: $wcfGapTiny;
 					}
 					
 					&.dropdown > a {
@@ -88,7 +88,7 @@
 }
 
 .messageTabMenuNavigation > ul {
-	background-color: @wcfContainerBackgroundColor;
+	background-color: $wcfContentBackground;
 	font-size: 0;
 	white-space: nowrap;
 	
@@ -96,12 +96,12 @@
 		display: inline-block;
 		
 		> a {
-			border-right: 1px solid @wcfContainerBorderColor;
+			border-right: 1px solid $wcfContentBorder;
 			border-bottom: 1px solid transparent;
-			color: @wcfButtonColor;
+			color: $wcfButtonText;
 			display: block;
 			font-size: 1rem;
-			line-height: @wcfBaseLineHeight;
+			line-height: $wcfBaseLineHeight;
 			margin-bottom: -1px;
 			padding: 7px 14px 8px 14px;
 			text-decoration: none;
@@ -114,7 +114,7 @@
 			user-select: none;
 			
 			&:hover {
-				color: @wcfLinkColor;
+				color: $wcfContentLink;
 			}
 			
 			> span.icon {
@@ -124,8 +124,8 @@
 		
 		&.active {
 			> a {
-				background-color: @wcfContainerBackgroundColor;
-				color: @wcfLinkColor;
+				background-color: $wcfContentBackground;
+				color: $wcfContentLink;
 			}
 		}
 	}
@@ -148,7 +148,7 @@
 		}
 		
 		> div > nav {
-			margin: (@wcfGapTiny - @wcfGapSmall) -@wcfGapSmall @wcfGapSmall -@wcfGapSmall;
+			margin: ($wcfGapTiny - $wcfGapSmall) -$wcfGapSmall $wcfGapSmall -$wcfGapSmall;
 		}
 	}
 }
diff --git a/wcfsetup/install/files/style/ui/tabularBox.less b/wcfsetup/install/files/style/ui/tabularBox.less
deleted file mode 100644
index 4f6b52b17e..0000000000
--- a/wcfsetup/install/files/style/ui/tabularBox.less
+++ /dev/null
@@ -1,103 +0,0 @@
-.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/tabularBox.scss b/wcfsetup/install/files/style/ui/tabularBox.scss
new file mode 100644
index 0000000000..175aa710fc
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/tabularBox.scss
@@ -0,0 +1,271 @@
+.tabularBox {
+	> .content {
+		border-width: 0;
+	}
+	
+	.tabularList {
+		background-color: $wcfContentTabularBackground;
+		display: flex;
+		flex-direction: column;
+		
+		> li {
+			flex: 0 0 auto;
+			padding: 5px 0;
+			
+			&.head {
+				border-bottom: 2px solid $wcfContentTabularBorder;
+				
+				> ol > li {
+					color: $wcfContentTabularLink;
+					
+					> a {
+						color: $wcfContentTabularLink;
+						display: block;
+						
+						@extend .wcfFontLarge;
+					}
+					
+					&.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: $fa-var-caret-up;
+						top: 1px;
+					}
+					
+					&.DESC > a:after {
+						content: $fa-var-caret-down;
+						top: 2px;
+					}
+					
+					&.active > a,
+					> a:hover {
+						color: $wcfContentTabularLinkActive;
+					}
+				}
+				
+				& + li {
+					border-top-width: 0;
+				}
+			}
+			
+			&:not(.head) {
+				border-top: 1px solid $wcfContentTabularBorderAccent;
+			}
+			
+			&.divider + li:not(.divider) {
+				border-top-color: $wcfContentTabularBorder;
+			}
+			
+			> ol {
+				align-items: center;
+				display: flex;
+				
+				> li {
+					flex: 0 0 auto;
+					padding: 5px 10px;
+				}
+			}
+		}
+	}
+}
+
+.tabularBoxTitle {
+	> header {
+		border-bottom: 1px solid currentColor;
+		color: $wcfTabularBoxHeadline;
+		padding: 10px 0;
+		
+		> h1,
+		> h2,
+		> h3 {
+			@extend .wcfFontLarge;
+		}
+		
+		a,
+		.icon {
+			color: $wcfTabularBoxHeadline;
+			
+			&:hover {
+				color: $wcfTabularBoxHeadlineActive;
+			}
+		}
+		
+		.collapsibleButton {
+			cursor: pointer;
+			transition: transform .2s linear;
+		}
+	}
+}
+
+div.tabularBoxTitle > header {
+	display: none;
+}
+
+/* table */
+.table {
+	border-bottom: 1px solid $wcfTabularBoxHeadline;
+	border-spacing: 0;
+	width: 100%;
+	
+	td,
+	th {
+		padding: 10px;
+		text-align: left;
+		vertical-align: middle;
+		// non-standard webkit value
+		word-break: break-word;
+		
+		> label {
+			cursor: pointer;
+			display: block;
+		}
+	}
+	
+	th {
+		border-bottom: 2px solid currentColor;
+		color: $wcfTabularBoxHeadline;
+		text-align: left;
+		white-space: nowrap;
+		
+		@extend .wcfFontLarge;
+		
+		> a {
+			color: $wcfTabularBoxHeadline;
+			display: block;
+		}
+		
+		&.active > a,
+		> a:hover {
+			color: $wcfTabularBoxHeadlineActive;
+		}
+		
+		&.ASC,
+		&.DESC {
+			> a::after {
+				display: inline-block;
+				font-family: FontAwesome;
+				margin-left: 5px;
+			}
+		}
+		
+		&.ASC > a::after {
+			content: $fa-var-caret-up;
+		}
+		
+		&.DESC > a::after {
+			content: $fa-var-caret-down;
+		}
+		
+		/* alignment only */
+		&.columnMark,
+		&.columnStatus {
+			text-align: center;
+		}
+		
+		&.columnDate,
+		&.columnDigits,
+		&.columnID {
+			text-align: right;
+		}
+	}
+	
+	td {
+		&.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: .85rem;
+			text-align: right;
+			width: 1px;
+			white-space: nowrap;
+			word-wrap: normal;
+		}
+		
+		&.columnURL, &.columnSmallText {
+			font-size: .85rem;
+			text-align: left;
+		}
+	}
+	
+	tr {
+		&:hover > td {
+			background-color: rgb(242, 242, 242);
+		}
+		
+		&:not(:last-child) > td {
+			border-bottom: 1px solid $wcfTabularBoxBorder;
+		}
+	}
+	
+	.statusDisplay {
+		float: right;
+		
+		.statusIcons {
+			float: right;
+			margin-left: 5px;
+			
+			li {
+				display: inline-block;
+			}
+		}
+	}
+}
+
+// TODO below
+/*.table {
+	tr {
+		&.jsMarked {
+			color: @wcfSelectedColor;
+			
+			> td {
+				background-color: @wcfSelectedBackgroundColor !important;
+			}
+			
+			a:not(.badge) {
+				color: @wcfSelectedColor;
+			}
+		}
+	}
+}*/
diff --git a/wcfsetup/install/files/style/ui/textarea.scss b/wcfsetup/install/files/style/ui/textarea.scss
new file mode 100644
index 0000000000..566e502ecc
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/textarea.scss
@@ -0,0 +1,18 @@
+textarea {
+	background-color: $wcfInputBackground;
+	border: 1px solid $wcfInputBorder;
+	border-radius: 3px;
+	box-sizing: border-box;
+	color: $wcfInputText;
+	padding: 5px;
+	transition: background-color .2s linear, border-color .2s linear;
+	width: 100%;
+	
+	@extend .wcfFontDefault;
+	
+	&:hover {
+		background-color: $wcfInputBackgroundActive;
+		border-color: $wcfInputBorderActive;
+		color: $wcfInputTextActive;
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/ui/tooltipBalloon.less b/wcfsetup/install/files/style/ui/tooltip.scss
similarity index 68%
rename from wcfsetup/install/files/style/ui/tooltipBalloon.less
rename to wcfsetup/install/files/style/ui/tooltip.scss
index 63b9abf32e..69b84fde1a 100644
--- a/wcfsetup/install/files/style/ui/tooltipBalloon.less
+++ b/wcfsetup/install/files/style/ui/tooltip.scss
@@ -1,8 +1,8 @@
 .balloonTooltip {
-	background-color: @wcfTooltipBackgroundColor;
+	background-color: $wcfTooltipBackgroundColor;
 	border-radius: 6px;
-	color: @wcfTooltipColor;
-	font-size: @wcfSmallFontSize;
+	color: $wcfTooltipColor;
+	font-size: $wcfSmallFontSize;
 	max-width: 300px;
 	opacity: 0;
 	padding: 5px 10px 7px;
@@ -15,7 +15,7 @@
 	transition: visibility 0s linear .2s, opacity .2s linear .2s;
 	
 	> .elementPointer {
-		border-color: @wcfTooltipBackgroundColor transparent;
+		border-color: $wcfTooltipBackgroundColor transparent;
 		border-style: solid;
 		border-width: 0 5px 5px;
 		
@@ -24,7 +24,7 @@
 		}
 	}
 	
-	.boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
+	@include boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
 	
 	&.active {
 		opacity: 1;
diff --git a/wcfsetup/install/files/style/ui/userProfile.less b/wcfsetup/install/files/style/ui/userProfile.scss
similarity index 82%
rename from wcfsetup/install/files/style/ui/userProfile.less
rename to wcfsetup/install/files/style/ui/userProfile.scss
index a2596471ea..d27c2d5248 100644
--- a/wcfsetup/install/files/style/ui/userProfile.less
+++ b/wcfsetup/install/files/style/ui/userProfile.scss
@@ -2,14 +2,14 @@
 	position: relative;
 	
 	> section {
-		background-color: rgb(79, 129, 189);
+		background-color: $wcfContentBackgroundAccent;
 		border-radius: 0;
-		color: rgb(255, 255, 255);
+		color: $wcfContentTextAccent;
 		
 		a,
 		dd,
 		h1 {
-			color: rgb(255, 255, 255);
+			color: $wcfContentTextAccent;
 		}
 		
 		&:first-child {
@@ -26,7 +26,7 @@
 			margin-top: 0;
 			
 			&:before {
-				border-top: 2px solid rgb(112, 152, 200);
+				border-top: 2px solid $wcfContentBorderAccent;
 				content: "";
 				left: 0;
 				margin-top: -15px;
@@ -55,7 +55,7 @@
 			margin-top: 25px;
 			
 			&:before {
-				border-top: 2px solid rgb(112, 152, 200);
+				border-top: 2px solid $wcfContentBorderAccent;
 				content: "";
 				left: 0;
 				margin-top: -10px;
@@ -100,11 +100,11 @@
 	> a {
 		background-color: transparent;
 		border-width: 0;
-		color: rgb(255, 255, 255) !important;
+		color: $wcfContentTextAccent !important;
 		padding: 5px;
 		
 		> .icon {
-			color: rgb(255, 255, 255);
+			color: $wcfContentTextAccent;
 		}
 	}
 }
diff --git a/wcfsetup/setup/db/install.sql b/wcfsetup/setup/db/install.sql
index b915fb4160..c07a28b962 100644
--- a/wcfsetup/setup/db/install.sql
+++ b/wcfsetup/setup/db/install.sql
@@ -47,6 +47,7 @@ CREATE TABLE wcf1_acp_menu_item (
 	showOrder INT(10) NOT NULL DEFAULT 0,
 	permissions TEXT,
 	options TEXT,
+  icon VARCHAR(255) NOT NULL DEFAULT '',
 	UNIQUE KEY menuItem (menuItem, packageID)
 );
 
-- 
2.20.1