From e7b063d6e6005cbdb6b4f2be583ddd9b1a22be43 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 3 Apr 2016 17:20:24 +0200
Subject: [PATCH] Overhauled templates

Frontend only, ACP still outdated
---
 .../templates/accountManagement.tpl           | 24 +++--
 com.woltlab.wcf/templates/avatarEdit.tpl      | 24 +++--
 com.woltlab.wcf/templates/cms.tpl             | 58 ++++++------
 com.woltlab.wcf/templates/dashboard.tpl       | 48 +++++-----
 .../templates/deletedContentList.tpl          | 44 ++++-----
 com.woltlab.wcf/templates/disclaimer.tpl      | 24 +++--
 com.woltlab.wcf/templates/emailActivation.tpl | 24 +++--
 .../templates/emailNewActivationCode.tpl      | 24 +++--
 com.woltlab.wcf/templates/following.tpl       | 42 +++++----
 com.woltlab.wcf/templates/groupedUserList.tpl |  2 +-
 com.woltlab.wcf/templates/ignoredUsers.tpl    | 42 +++++----
 com.woltlab.wcf/templates/login.tpl           | 22 ++---
 com.woltlab.wcf/templates/lostPassword.tpl    | 24 +++--
 com.woltlab.wcf/templates/mail.tpl            | 24 +++--
 com.woltlab.wcf/templates/mediaManager.tpl    |  8 +-
 com.woltlab.wcf/templates/membersList.tpl     | 52 ++++++-----
 .../templates/moderationActivation.tpl        | 80 +++++++++--------
 com.woltlab.wcf/templates/moderationList.tpl  | 42 +++++----
 .../templates/moderationReport.tpl            | 79 ++++++++--------
 com.woltlab.wcf/templates/newPassword.tpl     | 24 +++--
 .../templates/notificationList.tpl            | 41 +++++----
 .../templates/notificationSettings.tpl        | 26 +++---
 .../templates/paidSubscriptionList.tpl        | 30 +++----
 .../templates/recentActivityList.tpl          | 30 +++----
 com.woltlab.wcf/templates/register.tpl        | 24 +++--
 .../templates/registerActivation.tpl          | 24 +++--
 .../templates/registerNewActivationCode.tpl   | 24 +++--
 com.woltlab.wcf/templates/searchResult.tpl    | 44 +++++----
 com.woltlab.wcf/templates/settings.tpl        | 24 +++--
 com.woltlab.wcf/templates/signatureEdit.tpl   | 24 +++--
 com.woltlab.wcf/templates/tagged.tpl          | 42 +++++----
 com.woltlab.wcf/templates/team.tpl            | 30 +++----
 com.woltlab.wcf/templates/userSearch.tpl      | 24 +++--
 com.woltlab.wcf/templates/usersOnlineList.tpl | 34 ++++---
 .../install/files/style/layout/content.scss   | 90 ++++++++++++++++++-
 wcfsetup/install/files/style/ui/message.scss  |  1 -
 36 files changed, 654 insertions(+), 569 deletions(-)

diff --git a/com.woltlab.wcf/templates/accountManagement.tpl b/com.woltlab.wcf/templates/accountManagement.tpl
index aa32c75768..fe438e86cc 100644
--- a/com.woltlab.wcf/templates/accountManagement.tpl
+++ b/com.woltlab.wcf/templates/accountManagement.tpl
@@ -13,7 +13,17 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.accountManagement{/lang}</h1>
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.accountManagement{/lang}</h1>
+	</div>
+	
+	{hascontent}
+		<nav class="contentHeaderNavigation">
+			<ul>
+				{content}{event name='contentHeaderNavigation'}{/content}
+			</ul>
+		</nav>
+	{/hascontent}
 </header>
 
 {include file='userNotice'}
@@ -32,18 +42,6 @@
 
 {assign var=__authProvider value=$__wcf->getUserProfileHandler()->getAuthProvider()}
 
-<div class="contentNavigation">
-	{hascontent}
-		<nav>
-			<ul>
-				{content}
-					{event name='contentNavigationButtons'}
-				{/content}
-			</ul>
-		</nav>
-	{/hascontent}
-</div>
-
 <form method="post" action="{link controller='AccountManagement'}{/link}">
 	{if !$__authProvider}
 		<section class="section">
diff --git a/com.woltlab.wcf/templates/avatarEdit.tpl b/com.woltlab.wcf/templates/avatarEdit.tpl
index 8d83c650a0..62c21721b6 100644
--- a/com.woltlab.wcf/templates/avatarEdit.tpl
+++ b/com.woltlab.wcf/templates/avatarEdit.tpl
@@ -13,7 +13,17 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.avatar.edit{/lang}</h1>
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.avatar.edit{/lang}</h1>
+	</div>
+	
+	{hascontent}
+		<nav class="contentHeaderNavigation">
+			<ul>
+				{content}{event name='contentHeaderNavigation'}{/content}
+			</ul>
+		</nav>
+	{/hascontent}
 </header>
 
 {include file='userNotice'}
@@ -28,18 +38,6 @@
 	<p class="success">{lang}wcf.global.success.edit{/lang}</p>
 {/if}
 
-<div class="contentNavigation">
-	{hascontent}
-		<nav>
-			<ul>
-				{content}
-					{event name='contentNavigationButtons'}
-				{/content}
-			</ul>
-		</nav>
-	{/hascontent}
-</div>
-
 <form method="post" action="{link controller='AvatarEdit'}{/link}" id="avatarForm">
 	<div class="section avatarEdit">
 		<dl class="avatarType">
diff --git a/com.woltlab.wcf/templates/cms.tpl b/com.woltlab.wcf/templates/cms.tpl
index 1cee085e71..9361492c88 100644
--- a/com.woltlab.wcf/templates/cms.tpl
+++ b/com.woltlab.wcf/templates/cms.tpl
@@ -14,31 +14,37 @@
 
 {if $page->isLandingPage}
 	<header class="contentHeader">
-		<h1 class="contentTitle">{PAGE_TITLE|language}</h1>
-		{hascontent}<p>{content}{PAGE_DESCRIPTION|language}{/content}</p>{/hascontent}
+		<div class="contentHeaderTitle">
+			<h1 class="contentTitle">{PAGE_TITLE|language}</h1>
+			{hascontent}<p>{content}{PAGE_DESCRIPTION|language}{/content}</p>{/hascontent}
+		</div>
+		
+		{hascontent}
+			<nav class="contentHeaderNavigation">
+				<ul>
+					{content}{event name='contentHeaderNavigation'}{/content}
+				</ul>
+			</nav>
+		{/hascontent}
 	</header>
-{else}
-	{if $content[title]}
-		<header class="contentHeader">
+{elseif $content[title]}
+	<header class="contentHeader">
+		<div class="contentHeaderTitle">
 			<h1 class="contentTitle">{$content[title]}</h1>
-		</header>
-	{/if}	
+		</div>
+		
+		{hascontent}
+			<nav class="contentHeaderNavigation">
+				<ul>
+					{content}{event name='contentHeaderNavigation'}{/content}
+				</ul>
+			</nav>
+		{/hascontent}
+	</header>
 {/if}
 
 {include file='userNotice'}
 
-{hascontent}
-	<div class="contentNavigation">
-		<nav>
-			<ul>
-				{content}
-					{event name='contentNavigationButtonsTop'}
-				{/content}
-			</ul>
-		</nav>
-	</div>
-{/hascontent}
-
 {if $content[content]}
 	{if $page->pageType == 'text'}
 		<section class="section cmsContent htmlContent">
@@ -51,17 +57,15 @@
 	{/if}
 {/if}
 
-{hascontent}
-	<div class="contentNavigation">
-		<nav>
+<footer class="contentFooter">
+	{hascontent}
+		<nav class="contentFooterNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtonsBottom'}
-				{/content}
+				{content}{event name='contentFooterNavigation'}{/content}
 			</ul>
 		</nav>
-	</div>
-{/hascontent}
+	{/hascontent}
+</footer>
 
 {include file='footer'}
 
diff --git a/com.woltlab.wcf/templates/dashboard.tpl b/com.woltlab.wcf/templates/dashboard.tpl
index fbcd452f5f..e40e9b3c64 100644
--- a/com.woltlab.wcf/templates/dashboard.tpl
+++ b/com.woltlab.wcf/templates/dashboard.tpl
@@ -20,44 +20,50 @@
 
 {if $__wcf->getPageMenu()->getLandingPage()->menuItem == 'wcf.user.dashboard'}
 	<header class="contentHeader">
-		<h1 class="contentTitle">{PAGE_TITLE|language}</h1>
-		{hascontent}<p class="contentHeaderDescription">{content}{PAGE_DESCRIPTION|language}{/content}</p>{/hascontent}
+		<div class="contentHeaderTitle">
+			<h1 class="contentTitle">{PAGE_TITLE|language}</h1>
+			{hascontent}<p class="contentHeaderDescription">{content}{PAGE_DESCRIPTION|language}{/content}</p>{/hascontent}
+		</div>
+		
+		{hascontent}
+			<nav class="contentHeaderNavigation">
+				<ul>
+					{content}{event name='contentHeaderNavigation'}{/content}
+				</ul>
+			</nav>
+		{/hascontent}
 	</header>
 {else}
 	<header class="contentHeader">
-		<h1 class="contentTitle">{lang}wcf.user.dashboard{/lang}</h1>
+		<div class="contentHeaderTitle">
+			<h1 class="contentTitle">{lang}wcf.user.dashboard{/lang}</h1>
+		</div>
+		
+		{hascontent}
+			<nav class="contentHeaderNavigation">
+				<ul>
+					{content}{event name='contentHeaderNavigation'}{/content}
+				</ul>
+			</nav>
+		{/hascontent}
 	</header>
 {/if}
 
 {include file='userNotice'}
 
-<div class="contentNavigation">
-	{hascontent}
-		<nav>
-			<ul>
-				{content}
-					{event name='contentNavigationButtonsTop'}
-				{/content}
-			</ul>
-		</nav>
-	{/hascontent}
-</div>
-
 <section id="dashboard">
 	{if $__boxContent|isset}{@$__boxContent}{/if}
 </section>
 
-<div class="contentNavigation">
+<footer class="contentFooter">
 	{hascontent}
-		<nav>
+		<nav class="contentFooterNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtonsBottom'}
-				{/content}
+				{content}{event name='contentFooterNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</footer>
 
 {include file='footer'}
 
diff --git a/com.woltlab.wcf/templates/deletedContentList.tpl b/com.woltlab.wcf/templates/deletedContentList.tpl
index 7fb978837c..8b1734f1e6 100644
--- a/com.woltlab.wcf/templates/deletedContentList.tpl
+++ b/com.woltlab.wcf/templates/deletedContentList.tpl
@@ -27,24 +27,26 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.moderation.deletedContent.{@$objectType}{/lang}</h1>
-</header>
-
-{include file='userNotice'}
-
-<div class="contentNavigation">
-	{pages print=true assign=pagesLinks controller='DeletedContentList' link="objectType=$objectType&pageNo=%d"}
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.moderation.deletedContent.{@$objectType}{/lang}</h1>
+	</div>
 	
 	{hascontent}
-		<nav>
+		<nav class="contentHeaderNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtonsTop'}
-				{/content}
+				{content}{event name='contentHeaderNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</header>
+
+{include file='userNotice'}
+
+{hascontent}
+	<div class="paginationTop">
+		{content}{pages print=true assign=pagesLinks controller='DeletedContentList' link="objectType=$objectType&pageNo=%d"}{/content}
+	</div>
+{/hascontent}
 
 {if $items}
 	{include file=$resultListTemplateName application=$resultListApplication}
@@ -52,21 +54,21 @@
 	<p class="info">{lang}wcf.global.noItems{/lang}</p>
 {/if}
 
-<div class="contentNavigation">
-	{@$pagesLinks}
+<footer class="contentFooter">
+	{hascontent}
+		<div class="paginationBottom">
+			{content}{@$pagesLinks}{/content}
+		</div>
+	{/hascontent}
 	
 	{hascontent}
-		<nav>
+		<nav class="contentFooterNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtonsBottom'}
-				{/content}
+				{content}{event name='contentFooterNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-	
-	<nav class="jsClipboardEditor" data-types="[ '{@$objectType}' ]"></nav>
-</div>
+</footer>
 
 {include file='footer'}
 
diff --git a/com.woltlab.wcf/templates/disclaimer.tpl b/com.woltlab.wcf/templates/disclaimer.tpl
index f511a1a6da..d3be1292d9 100644
--- a/com.woltlab.wcf/templates/disclaimer.tpl
+++ b/com.woltlab.wcf/templates/disclaimer.tpl
@@ -11,24 +11,22 @@
 {include file='header' __disableAds=true}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.register.disclaimer{/lang}</h1>
-</header>
-
-{include file='userNotice'}
-
-{include file='formError'}
-
-<div class="contentNavigation">
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.register.disclaimer{/lang}</h1>
+	</div>
+	
 	{hascontent}
-		<nav>
+		<nav class="contentHeaderNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtons'}
-				{/content}
+				{content}{event name='contentHeaderNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</header>
+
+{include file='userNotice'}
+
+{include file='formError'}
 
 <form method="post" action="{link controller='Disclaimer'}{/link}">
 	<div class="section htmlContent">
diff --git a/com.woltlab.wcf/templates/emailActivation.tpl b/com.woltlab.wcf/templates/emailActivation.tpl
index 5e58bad51c..e100ad43fd 100644
--- a/com.woltlab.wcf/templates/emailActivation.tpl
+++ b/com.woltlab.wcf/templates/emailActivation.tpl
@@ -11,24 +11,22 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.emailActivation{/lang}</h1>
-</header>
-
-{include file='userNotice'}
-
-{include file='formError'}
-
-<div class="contentNavigation">
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.emailActivation{/lang}</h1>
+	</div>
+	
 	{hascontent}
-		<nav>
+		<nav class="contentHeaderNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtons'}
-				{/content}
+				{content}{event name='contentHeaderNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</header>
+
+{include file='userNotice'}
+
+{include file='formError'}
 
 <form method="post" action="{link controller='EmailActivation'}{/link}">
 	<div class="section">
diff --git a/com.woltlab.wcf/templates/emailNewActivationCode.tpl b/com.woltlab.wcf/templates/emailNewActivationCode.tpl
index 71d1905508..d89a784732 100644
--- a/com.woltlab.wcf/templates/emailNewActivationCode.tpl
+++ b/com.woltlab.wcf/templates/emailNewActivationCode.tpl
@@ -10,24 +10,22 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.newActivationCode{/lang}</h1>
-</header>
-
-{include file='userNotice'}
-
-{include file='formError'}
-
-<div class="contentNavigation">
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.newActivationCode{/lang}</h1>
+	</div>
+	
 	{hascontent}
-		<nav>
+		<nav class="contentHeaderNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtons'}
-				{/content}
+				{content}{event name='contentHeaderNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</header>
+
+{include file='userNotice'}
+
+{include file='formError'}
 
 <form method="post" action="{link controller='EmailNewActivationCode'}{/link}">
 	<div class="section">
diff --git a/com.woltlab.wcf/templates/following.tpl b/com.woltlab.wcf/templates/following.tpl
index ca88fed791..07f01f0aaf 100644
--- a/com.woltlab.wcf/templates/following.tpl
+++ b/com.woltlab.wcf/templates/following.tpl
@@ -20,24 +20,26 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.following{/lang} <span class="badge">{#$items}</span></h1>
-</header>
-
-{include file='userNotice'}
-
-<div class="contentNavigation">
-	{pages print=true assign=pagesLinks controller='Following' link="pageNo=%d"}
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.following{/lang} <span class="badge">{#$items}</span></h1>
+	</div>
 	
 	{hascontent}
-		<nav>
+		<nav class="contentHeaderNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtonsTop'}
-				{/content}
+				{content}{event name='contentHeaderNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</header>
+
+{include file='userNotice'}
+
+{hascontent}
+	<div class="paginationTop">
+		{content}{pages print=true assign=pagesLinks controller='Following' link="pageNo=%d"}{/content}
+	</div>
+{/hascontent}
 
 {if $objects|count}
 	<div class="section sectionContainerList">
@@ -65,19 +67,21 @@
 		</ol>
 	</div>
 	
-	<div class="contentNavigation">
-		{@$pagesLinks}
+	<footer class="contentFooter">
+		{hascontent}
+			<div class="paginationBottom">
+				{content}{@$pagesLinks}{/content}
+			</div>
+		{/hascontent}
 		
 		{hascontent}
-			<nav>
+			<nav class="contentFooterNavigation">
 				<ul>
-					{content}
-						{event name='contentNavigationButtonsBottom'}
-					{/content}
+					{content}{event name='contentFooterNavigation'}{/content}
 				</ul>
 			</nav>
 		{/hascontent}
-	</div>
+	</footer>
 {else}
 	<p class="info">{lang}wcf.user.following.noUsers{/lang}</p>
 {/if}
diff --git a/com.woltlab.wcf/templates/groupedUserList.tpl b/com.woltlab.wcf/templates/groupedUserList.tpl
index 5832289603..03b3323358 100644
--- a/com.woltlab.wcf/templates/groupedUserList.tpl
+++ b/com.woltlab.wcf/templates/groupedUserList.tpl
@@ -19,7 +19,7 @@
 	{/if}
 {/foreach}
 
-<div class="contentNavigation"><div class="jsPagination"></div></div>
+<div class="paginationTop jsPagination"></div>
 
 <script data-relocate="true">
 	//<![CDATA[
diff --git a/com.woltlab.wcf/templates/ignoredUsers.tpl b/com.woltlab.wcf/templates/ignoredUsers.tpl
index 272e914ee6..bd9225ef25 100644
--- a/com.woltlab.wcf/templates/ignoredUsers.tpl
+++ b/com.woltlab.wcf/templates/ignoredUsers.tpl
@@ -20,24 +20,26 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.ignoredUsers{/lang} <span class="badge">{#$items}</span></h1>
-</header>
-
-{include file='userNotice'}
-
-<div class="contentNavigation">
-	{pages print=true assign=pagesLinks controller='IgnoredUsers' link="pageNo=%d"}
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.ignoredUsers{/lang} <span class="badge">{#$items}</span></h1>
+	</div>
 	
 	{hascontent}
-		<nav>
+		<nav class="contentHeaderNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtonsTop'}
-				{/content}
+				{content}{event name='contentHeaderNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</header>
+
+{include file='userNotice'}
+
+{hascontent}
+	<div class="paginationTop">
+		{content}{pages print=true assign=pagesLinks controller='IgnoredUsers' link="pageNo=%d"}{/content}
+	</div>
+{/hascontent}
 
 {if $objects|count}
 	<div class="section sectionContainerList">
@@ -65,19 +67,21 @@
 		</ol>
 	</div>
 	
-	<div class="contentNavigation">
-		{@$pagesLinks}
+	<footer class="contentFooter">
+		{hascontent}
+			<div class="paginationBottom">
+				{content}{@$pagesLinks}{/content}
+			</div>
+		{/hascontent}
 		
 		{hascontent}
-			<nav>
+			<nav class="contentFooterNavigation">
 				<ul>
-					{content}
-						{event name='contentNavigationButtonsBottom'}
-					{/content}
+					{content}{event name='contentFooterNavigation'}{/content}
 				</ul>
 			</nav>
 		{/hascontent}
-	</div>
+	</footer>
 {else}
 	<p class="info">{lang}wcf.user.ignoredUsers.noUsers{/lang}</p>
 {/if}
diff --git a/com.woltlab.wcf/templates/login.tpl b/com.woltlab.wcf/templates/login.tpl
index 1be04f5c7f..eab1fd5a9e 100644
--- a/com.woltlab.wcf/templates/login.tpl
+++ b/com.woltlab.wcf/templates/login.tpl
@@ -18,7 +18,15 @@
 {include file='header' __disableLoginLink=true __disableAds=true}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.login{/lang}</h1>
+	<div class="contentHeaderTitle"><h1 class="contentTitle">{lang}wcf.user.login{/lang}</h1></div>
+	
+	{hascontent}
+		<nav class="contentHeaderNavigation">
+			<ul>
+				{content}{event name='contentHeaderNavigation'}{/content}
+			</ul>
+		</nav>
+	{/hascontent}
 </header>
 
 {include file='userNotice'}
@@ -29,18 +37,6 @@
 	{include file='formError'}
 {/if}
 
-<div class="contentNavigation">
-	{hascontent}
-		<nav>
-			<ul>
-				{content}
-					{event name='contentNavigationButtons'}
-				{/content}
-			</ul>
-		</nav>
-	{/hascontent}
-</div>
-
 <form method="post" action="{@$loginController}" id="loginForm">
 	<div class="section">
 		<dl{if $errorField == 'username'} class="formError"{/if}>
diff --git a/com.woltlab.wcf/templates/lostPassword.tpl b/com.woltlab.wcf/templates/lostPassword.tpl
index 401549d0f3..ac7bbf4bbe 100644
--- a/com.woltlab.wcf/templates/lostPassword.tpl
+++ b/com.woltlab.wcf/templates/lostPassword.tpl
@@ -18,7 +18,17 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.lostPassword{/lang}</h1>
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.lostPassword{/lang}</h1>
+	</div>
+	
+	{hascontent}
+		<nav class="contentHeaderNavigation">
+			<ul>
+				{content}{event name='contentHeaderNavigation'}{/content}
+			</ul>
+		</nav>
+	{/hascontent}
 </header>
 
 {include file='userNotice'}
@@ -27,18 +37,6 @@
 
 {include file='formError'}
 
-<div class="contentNavigation">
-	{hascontent}
-		<nav>
-			<ul>
-				{content}
-					{event name='contentNavigationButtons'}
-				{/content}
-			</ul>
-		</nav>
-	{/hascontent}
-</div>
-
 <form method="post" action="{link controller='LostPassword'}{/link}">
 	<div class="section">
 		<dl id="usernameDiv"{if $errorField == 'username'} class="formError"{/if}>
diff --git a/com.woltlab.wcf/templates/mail.tpl b/com.woltlab.wcf/templates/mail.tpl
index 9806ced792..5dd62060b0 100644
--- a/com.woltlab.wcf/templates/mail.tpl
+++ b/com.woltlab.wcf/templates/mail.tpl
@@ -10,24 +10,22 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.mail.title{/lang}</h1>
-</header>
-
-{include file='userNotice'}
-
-{include file='formError'}
-
-<div class="contentNavigation">
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.mail.title{/lang}</h1>
+	</div>
+	
 	{hascontent}
-		<nav>
+		<nav class="contentHeaderNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtons'}
-				{/content}
+				{content}{event name='contentHeaderNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</header>
+
+{include file='userNotice'}
+
+{include file='formError'}
 
 <form method="post" action="{link controller='Mail' object=$user}{/link}">
 	<section class="section">
diff --git a/com.woltlab.wcf/templates/mediaManager.tpl b/com.woltlab.wcf/templates/mediaManager.tpl
index 381a49f65e..b63d80bbe9 100644
--- a/com.woltlab.wcf/templates/mediaManager.tpl
+++ b/com.woltlab.wcf/templates/mediaManager.tpl
@@ -14,7 +14,7 @@
 			<li data-file-type="all"><span>{lang}wcf.media.search.filetype.all{/lang}</span></li>
 		</ul>
 	{/if}
-	<input type="text" id="mediaManagerSearchField" placeholder="{lang}wcf.media.search.placeholder{/lang}" />
+	<input type="text" id="mediaManagerSearchField" placeholder="{lang}wcf.media.search.placeholder{/lang}">
 	<span class="inputSuffix">
 		<span id="mediaManagerSearchCancelButton" class="icon icon16 fa-times pointer jsTooltip" title="{lang}wcf.media.search.cancel{/lang}"></span>
 	</span>
@@ -25,12 +25,8 @@
 {/if}
 
 <div class="jsClipboardContainer" data-type="com.woltlab.wcf.media">
-	<input type="checkbox" class="jsClipboardMarkAll" style="display: none;" />
+	<input type="checkbox" class="jsClipboardMarkAll" style="display: none;">
 	<ul id="mediaManagerMediaList">
 		{include file='mediaListItems'}
 	</ul>
-	
-	<div class="contentNavigation">
-		<nav class="jsClipboardEditor" data-types="[ 'com.woltlab.wcf.media' ]"></nav>
-	</div>
 </div>
diff --git a/com.woltlab.wcf/templates/membersList.tpl b/com.woltlab.wcf/templates/membersList.tpl
index 235026bd09..f31796edbf 100644
--- a/com.woltlab.wcf/templates/membersList.tpl
+++ b/com.woltlab.wcf/templates/membersList.tpl
@@ -107,28 +107,32 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{if $searchID}{lang}wcf.user.search.results{/lang}{else}{lang}wcf.user.members{/lang}{/if} <span class="badge">{#$items}</span></h1>
-</header>
-
-{include file='userNotice'}
-
-<div class="contentNavigation">
-	{if $searchID}
-		{pages print=true assign=pagesLinks controller='MembersList' id=$searchID link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder&letter=$encodedLetter"}
-	{else}
-		{pages print=true assign=pagesLinks controller='MembersList' link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder&letter=$encodedLetter"}
-	{/if}
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{if $searchID}{lang}wcf.user.search.results{/lang}{else}{lang}wcf.user.members{/lang}{/if} <span class="badge">{#$items}</span></h1>
+	</div>
 	
 	{hascontent}
-		<nav>
+		<nav class="contentHeaderNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtonsTop'}
-				{/content}
+				{content}{event name='contentHeaderNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</header>
+
+{include file='userNotice'}
+
+{hascontent}
+	<div class="paginationTop">
+		{content}
+			{if $searchID}
+				{pages print=true assign=pagesLinks controller='MembersList' id=$searchID link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder&letter=$encodedLetter"}
+			{else}
+				{pages print=true assign=pagesLinks controller='MembersList' link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder&letter=$encodedLetter"}
+			{/if}
+		{/content}
+	</div>
+{/hascontent}
 
 {if $items}
 	<div class="section sectionContainerList">
@@ -142,19 +146,21 @@
 	<p class="info">{lang}wcf.user.members.noMembers{/lang}</p>
 {/if}
 
-<div class="contentNavigation">
-	{@$pagesLinks}
+<footer class="contentFooter">
+	{hascontent}
+		<div class="paginationBottom">
+			{content}{@$pagesLinks}{/content}
+		</div>
+	{/hascontent}
 	
 	{hascontent}
-		<nav>
+		<nav class="contentFooterNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtonsBottom'}
-				{/content}
+				{content}{event name='contentFooterNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</footer>
 
 {include file='footer'}
 
diff --git a/com.woltlab.wcf/templates/moderationActivation.tpl b/com.woltlab.wcf/templates/moderationActivation.tpl
index 73014b29f1..650c73519c 100644
--- a/com.woltlab.wcf/templates/moderationActivation.tpl
+++ b/com.woltlab.wcf/templates/moderationActivation.tpl
@@ -30,32 +30,50 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.moderation.activation{/lang}: {$queue->getTitle()}</h1>
-	
-	{if $queue->lastChangeTime}
-		<dl class="plain inlineDataList">
-			<dt>{lang}wcf.moderation.lastChangeTime{/lang}</dt>
-			<dd>{@$queue->lastChangeTime|time}</dd>
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.moderation.activation{/lang}: {$queue->getTitle()}</h1>
+		
+		{if $queue->lastChangeTime}
+			<dl class="plain inlineDataList">
+				<dt>{lang}wcf.moderation.lastChangeTime{/lang}</dt>
+				<dd>{@$queue->lastChangeTime|time}</dd>
+			</dl>
+		{/if}
+		
+		<dl class="plain inlineDataList" id="moderationAssignedUserContainer">
+			<dt>{lang}wcf.moderation.assignedUser{/lang}</dt>
+			<dd>
+				<span>
+					{if $queue->assignedUserID}
+						<a href="{link controller='User' id=$assignedUserID}{/link}" class="userLink" data-user-id="{@$assignedUserID}">{$queue->assignedUsername}</a>
+					{else}
+						{lang}wcf.moderation.assignedUser.nobody{/lang}
+					{/if}
+				</span>
+			</dd>
 		</dl>
-	{/if}
-	
-	<dl class="plain inlineDataList" id="moderationAssignedUserContainer">
-		<dt>{lang}wcf.moderation.assignedUser{/lang}</dt>
-		<dd>
-			<span>
-				{if $queue->assignedUserID}
-					<a href="{link controller='User' id=$assignedUserID}{/link}" class="userLink" data-user-id="{@$assignedUserID}">{$queue->assignedUsername}</a>
-				{else}
-					{lang}wcf.moderation.assignedUser.nobody{/lang}
-				{/if}
-			</span>
-		</dd>
-	</dl>
+		
+		<dl class="plain inlineDataList" id="moderationStatusContainer">
+			<dt>{lang}wcf.moderation.status{/lang}</dt>
+			<dd>{$queue->getStatus()}</dd>
+		</dl>
+	</div>
 	
-	<dl class="plain inlineDataList" id="moderationStatusContainer">
-		<dt>{lang}wcf.moderation.status{/lang}</dt>
-		<dd>{$queue->getStatus()}</dd>
-	</dl>
+	{hascontent}
+		<nav class="contentHeaderNavigation">
+			<ul>
+				{content}
+					{if !$queue->isDone()}
+						{if $queueManager->canRemoveContent($queue->getDecoratedObject())}<li class="jsOnly"><a id="enableContent" class="button"><span class="icon icon16 fa-check"></span> <span>{lang}wcf.moderation.activation.enableContent{/lang}</span></a></li>{/if}
+						<li class="jsOnly"><a id="removeContent" class="button"><span class="icon icon16 fa-times"></span> <span>{lang}wcf.moderation.activation.removeContent{/lang}</span></a></li>
+					{/if}
+					{if $queue->getAffectedObject()}<li><a href="{$queue->getAffectedObject()->getLink()}" class="button"><span class="icon icon16 fa-arrow-right"></span> <span>{lang}wcf.moderation.jumpToContent{/lang}</span></a></li>{/if}
+					
+					{event name='contentHeaderNavigation'}
+				{/content}
+			</ul>
+		</nav>
+	{/hascontent}
 </header>
 
 {include file='userNotice'}
@@ -70,20 +88,6 @@
 
 	{@$disabledContent}
 </section>
-	
-<div class="contentNavigation">
-	<nav>
-		<ul>
-			{if !$queue->isDone()}
-				{if $queueManager->canRemoveContent($queue->getDecoratedObject())}<li class="jsOnly"><a id="enableContent" class="button"><span class="icon icon16 fa-check"></span> <span>{lang}wcf.moderation.activation.enableContent{/lang}</span></a></li>{/if}
-				<li class="jsOnly"><a id="removeContent" class="button"><span class="icon icon16 fa-times"></span> <span>{lang}wcf.moderation.activation.removeContent{/lang}</span></a></li>
-			{/if}
-			{if $queue->getAffectedObject()}<li><a href="{$queue->getAffectedObject()->getLink()}" class="button"><span class="icon icon16 fa-arrow-right"></span> <span>{lang}wcf.moderation.jumpToContent{/lang}</span></a></li>{/if}
-			
-			{event name='contentNavigationButtons'}
-		</ul>
-	</nav>
-</div>
 
 {include file='__commentJavaScript' commentContainerID='moderationQueueCommentList'}
 
diff --git a/com.woltlab.wcf/templates/moderationList.tpl b/com.woltlab.wcf/templates/moderationList.tpl
index 7ba66929d7..9c782c795d 100644
--- a/com.woltlab.wcf/templates/moderationList.tpl
+++ b/com.woltlab.wcf/templates/moderationList.tpl
@@ -69,24 +69,26 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{if $status == 2}{lang}wcf.moderation.doneItems{/lang}{else}{lang}wcf.moderation.outstandingItems{/lang}{/if} <span class="badge">{#$items}</span></h1>
-</header>
-
-{include file='userNotice'}
-
-<div class="contentNavigation">
-	{pages print=true assign=pagesLinks controller='ModerationList' link="definitionID=$definitionID&assignedUserID=$assignedUserID&status=$status&pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{if $status == 2}{lang}wcf.moderation.doneItems{/lang}{else}{lang}wcf.moderation.outstandingItems{/lang}{/if} <span class="badge">{#$items}</span></h1>
+	</div>
 	
 	{hascontent}
-		<nav>
+		<nav class="contentHeaderNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtonsTop'}
-				{/content}
+				{content}{event name='contentHeaderNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</header>
+
+{include file='userNotice'}
+
+{hascontent}
+	<div class="paginationTop">
+		{content}{pages print=true assign=pagesLinks controller='ModerationList' link="definitionID=$definitionID&assignedUserID=$assignedUserID&status=$status&pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}{/content}
+	</div>
+{/hascontent}
 
 {if $objects|count}
 	<div class="section tabularBox messageGroupList moderationList">
@@ -135,19 +137,21 @@
 		</table>
 	</div>
 	
-	<div class="contentNavigation">
-		{@$pagesLinks}
+	<footer class="contentFooter">
+		{hascontent}
+			<div class="paginationBottom">
+				{content}{@$pagesLinks}{/content}
+			</div>
+		{/hascontent}
 		
 		{hascontent}
-			<nav>
+			<nav class="contentFooterNavigation">
 				<ul>
-					{content}
-						{event name='contentNavigationButtonsBottom'}
-					{/content}
+					{content}{event name='contentFooterNavigation'}{/content}
 				</ul>
 			</nav>
 		{/hascontent}
-	</div>
+	</footer>
 {else}
 	<p class="info">{lang}wcf.global.noItems{/lang}</p>
 {/if}
diff --git a/com.woltlab.wcf/templates/moderationReport.tpl b/com.woltlab.wcf/templates/moderationReport.tpl
index 75e6958759..2c213ce7bb 100644
--- a/com.woltlab.wcf/templates/moderationReport.tpl
+++ b/com.woltlab.wcf/templates/moderationReport.tpl
@@ -31,32 +31,49 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.moderation.report{/lang}: {$queue->getTitle()}</h1>
-	
-	{if $queue->lastChangeTime}
-		<dl class="plain inlineDataList">
-			<dt>{lang}wcf.moderation.lastChangeTime{/lang}</dt>
-			<dd>{@$queue->lastChangeTime|time}</dd>
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.moderation.report{/lang}: {$queue->getTitle()}</h1>
+		
+		{if $queue->lastChangeTime}
+			<dl class="plain inlineDataList">
+				<dt>{lang}wcf.moderation.lastChangeTime{/lang}</dt>
+				<dd>{@$queue->lastChangeTime|time}</dd>
+			</dl>
+		{/if}
+		
+		<dl class="plain inlineDataList" id="moderationAssignedUserContainer">
+			<dt>{lang}wcf.moderation.assignedUser{/lang}</dt>
+			<dd>
+				<span>
+					{if $queue->assignedUserID}
+						<a href="{link controller='User' id=$assignedUserID}{/link}" class="userLink" data-user-id="{@$assignedUserID}">{$queue->assignedUsername}</a>
+					{else}
+						{lang}wcf.moderation.assignedUser.nobody{/lang}
+					{/if}
+				</span>
+			</dd>
 		</dl>
-	{/if}
-	
-	<dl class="plain inlineDataList" id="moderationAssignedUserContainer">
-		<dt>{lang}wcf.moderation.assignedUser{/lang}</dt>
-		<dd>
-			<span>
-				{if $queue->assignedUserID}
-					<a href="{link controller='User' id=$assignedUserID}{/link}" class="userLink" data-user-id="{@$assignedUserID}">{$queue->assignedUsername}</a>
-				{else}
-					{lang}wcf.moderation.assignedUser.nobody{/lang}
-				{/if}
-			</span>
-		</dd>
-	</dl>
+		
+		<dl class="plain inlineDataList" id="moderationStatusContainer">
+			<dt>{lang}wcf.moderation.status{/lang}</dt>
+			<dd>{$queue->getStatus()}</dd>
+		</dl>
+	</div>
 	
-	<dl class="plain inlineDataList" id="moderationStatusContainer">
-		<dt>{lang}wcf.moderation.status{/lang}</dt>
-		<dd>{$queue->getStatus()}</dd>
-	</dl>
+	{hascontent}
+		<nav class="contentHeaderNavigation">
+			<ul>
+				{content}
+					{if !$queue->isDone()}
+						{if $queueManager->canRemoveContent($queue->getDecoratedObject())}<li class="jsOnly"><a id="removeContent" class="button"><span class="icon icon16 fa-times"></span> <span>{lang}wcf.moderation.report.removeContent{/lang}</span></a></li>{/if}
+						<li class="jsOnly"><a id="removeReport" class="button"><span class="icon icon16 fa-times"></span> <span>{lang}wcf.moderation.report.removeReport{/lang}</span></a></li>
+					{/if}
+					{if $queue->getAffectedObject()}<li><a href="{$queue->getAffectedObject()->getLink()}" class="button"><span class="icon icon16 fa-arrow-right"></span> <span>{lang}wcf.moderation.jumpToContent{/lang}</span></a></li>{/if}
+					{event name='contentHeaderNavigation'}
+				{/content}
+			</ul>
+		</nav>
+	{/hascontent}
 </header>
 
 {include file='userNotice'}
@@ -72,20 +89,6 @@
 	{@$reportedContent}
 </section>
 
-<div class="contentNavigation">
-	<nav>
-		<ul>
-			{if !$queue->isDone()}
-				{if $queueManager->canRemoveContent($queue->getDecoratedObject())}<li class="jsOnly"><a id="removeContent" class="button"><span class="icon icon16 fa-times"></span> <span>{lang}wcf.moderation.report.removeContent{/lang}</span></a></li>{/if}
-				<li class="jsOnly"><a id="removeReport" class="button"><span class="icon icon16 fa-times"></span> <span>{lang}wcf.moderation.report.removeReport{/lang}</span></a></li>
-			{/if}
-			{if $queue->getAffectedObject()}<li><a href="{$queue->getAffectedObject()->getLink()}" class="button"><span class="icon icon16 fa-arrow-right"></span> <span>{lang}wcf.moderation.jumpToContent{/lang}</span></a></li>{/if}
-			
-			{event name='contentNavigationButtons'}
-		</ul>
-	</nav>
-</div>
-
 <section class="section">
 	<h2 class="sectionTitle">{lang}wcf.moderation.report.reportedBy{/lang}</h2>
 	
diff --git a/com.woltlab.wcf/templates/newPassword.tpl b/com.woltlab.wcf/templates/newPassword.tpl
index a3211785a4..fbad48f339 100644
--- a/com.woltlab.wcf/templates/newPassword.tpl
+++ b/com.woltlab.wcf/templates/newPassword.tpl
@@ -10,24 +10,22 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.newPassword{/lang}</h1>
-</header>
-
-{include file='userNotice'}
-
-{include file='formError'}
-
-<div class="contentNavigation">
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.newPassword{/lang}</h1>
+	</div>
+	
 	{hascontent}
-		<nav>
+		<nav class="contentHeaderNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtons'}
-				{/content}
+				{content}{event name='contentHeaderNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</header>
+
+{include file='userNotice'}
+
+{include file='formError'}
 
 <form method="post" action="{link controller='NewPassword'}{/link}">
 	<div class="section">
diff --git a/com.woltlab.wcf/templates/notificationList.tpl b/com.woltlab.wcf/templates/notificationList.tpl
index fa819515d6..4526e0bf53 100644
--- a/com.woltlab.wcf/templates/notificationList.tpl
+++ b/com.woltlab.wcf/templates/notificationList.tpl
@@ -25,26 +25,29 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.notification.notifications{/lang} <span class="badge jsNotificationsBadge">{#$__wcf->getUserNotificationHandler()->countAllNotifications()}</span></h1>
-</header>
-
-{include file='userNotice'}
-
-<div class="contentNavigation">
-	{pages print=true assign=pagesLinks controller='NotificationList' link="pageNo=%d"}
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.notification.notifications{/lang} <span class="badge jsNotificationsBadge">{#$__wcf->getUserNotificationHandler()->countAllNotifications()}</span></h1>
+	</div>
 	
 	{hascontent}
-		<nav>
+		<nav class="contentHeaderNavigation">
 			<ul>
 				{content}
 					{if $__wcf->getUserNotificationHandler()->getNotificationCount()}<li class="jsOnly"><a class="button jsMarkAllAsConfirmed"><span class="icon icon16 fa-check"></span> <span>{lang}wcf.user.notification.markAllAsConfirmed{/lang}</span></a></li>{/if}
-					
-					{event name='contentNavigationButtonsTop'}
+					{event name='contentHeaderNavigation'}
 				{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</header>
+
+{include file='userNotice'}
+
+{hascontent}
+	<div class="paginationTop">
+		{content}{pages print=true assign=pagesLinks controller='NotificationList' link="pageNo=%d"}{/content}
+	</div>
+{/hascontent}
 
 {if $notifications[notifications]}
 	{assign var=lastPeriod value=''}
@@ -103,19 +106,21 @@
 		</ul>
 	</section>
 	
-	<div class="contentNavigation">
-		{@$pagesLinks}
+	<footer class="contentFooter">
+		{hascontent}
+			<div class="paginationBottom">
+				{content}{@$pagesLinks}{/content}
+			</div>
+		{/hascontent}
 		
 		{hascontent}
-			<nav>
+			<nav class="contentFooterNavigation">
 				<ul>
-					{content}
-						{event name='contentNavigationButtonsBottom'}
-					{/content}
+					{content}{event name='contentFooterNavigation'}{/content}
 				</ul>
 			</nav>
 		{/hascontent}
-	</div>
+	</footer>
 {else}
 	<p class="info">{lang}wcf.user.notification.noNotifications{/lang}</p>
 {/if}
diff --git a/com.woltlab.wcf/templates/notificationSettings.tpl b/com.woltlab.wcf/templates/notificationSettings.tpl
index 93957db4d0..818b33dd48 100644
--- a/com.woltlab.wcf/templates/notificationSettings.tpl
+++ b/com.woltlab.wcf/templates/notificationSettings.tpl
@@ -25,8 +25,18 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.menu.settings{/lang}: {lang}wcf.user.notification.notifications{/lang}</h1>
-	<p class="contentHeaderDescription">{lang}wcf.user.notification.notifications.description{/lang}</p>
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.menu.settings{/lang}: {lang}wcf.user.notification.notifications{/lang}</h1>
+		<p class="contentHeaderDescription">{lang}wcf.user.notification.notifications.description{/lang}</p>
+	</div>
+	
+	{hascontent}
+		<nav class="contentHeaderNavigation">
+			<ul>
+				{content}{event name='contentHeaderNavigation'}{/content}
+			</ul>
+		</nav>
+	{/hascontent}
 </header>
 
 {include file='userNotice'}
@@ -37,18 +47,6 @@
 	<p class="success">{lang}wcf.global.success.edit{/lang}</p>
 {/if}
 
-<div class="contentNavigation">
-	{hascontent}
-		<nav>
-			<ul>
-				{content}
-					{event name='contentNavigationButtons'}
-				{/content}
-			</ul>
-		</nav>
-	{/hascontent}
-</div>
-
 <form method="post" action="{link controller='NotificationSettings'}{/link}">
 	<div id="notificationSettings">
 		{foreach from=$events key='eventCategory' item='eventList'}
diff --git a/com.woltlab.wcf/templates/paidSubscriptionList.tpl b/com.woltlab.wcf/templates/paidSubscriptionList.tpl
index 9d56304f6e..ea282297b7 100644
--- a/com.woltlab.wcf/templates/paidSubscriptionList.tpl
+++ b/com.woltlab.wcf/templates/paidSubscriptionList.tpl
@@ -37,22 +37,20 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.menu.settings.paidSubscription{/lang}</h1>
-</header>
-
-{include file='userNotice'}
-
-<div class="contentNavigation">
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.menu.settings.paidSubscription{/lang}</h1>
+	</div>
+	
 	{hascontent}
-		<nav>
+		<nav class="contentHeaderNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtonsTop'}
-				{/content}
+				{content}{event name='contentHeaderNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</header>
+
+{include file='userNotice'}
 
 {if $subscriptions|count}
 	<section class="section sectionContainerList paidSubscriptionList">
@@ -114,17 +112,15 @@
 	<p class="info">{lang}wcf.global.noItems{/lang}</p>
 {/if}
 
-<div class="contentNavigation">
+<footer class="contentFooter">
 	{hascontent}
-		<nav>
+		<nav class="contentFooterNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtonsBottom'}
-				{/content}
+				{content}{event name='contentFooterNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</footer>
 
 {include file='footer'}
 
diff --git a/com.woltlab.wcf/templates/recentActivityList.tpl b/com.woltlab.wcf/templates/recentActivityList.tpl
index 799ccd2a2d..18fe5fbca6 100644
--- a/com.woltlab.wcf/templates/recentActivityList.tpl
+++ b/com.woltlab.wcf/templates/recentActivityList.tpl
@@ -30,22 +30,20 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.recentActivity{/lang}</h1>
-</header>
-
-{include file='userNotice'}
-
-<div class="contentNavigation">
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.recentActivity{/lang}</h1>
+	</div>
+	
 	{hascontent}
-		<nav>
+		<nav class="contentHeaderNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtonsTop'}
-				{/content}
+				{content}{event name='contentHeaderNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</header>
+
+{include file='userNotice'}
 
 {if $eventList|count}
 	<div class="section sectionContainerList">
@@ -54,17 +52,15 @@
 		</ul>
 	</div>
 	
-	<div class="contentNavigation">
+	<footer class="contentFooter">
 		{hascontent}
-			<nav>
+			<nav class="contentFooterNavigation">
 				<ul>
-					{content}
-						{event name='contentNavigationButtonsBottom'}
-					{/content}
+					{content}{event name='contentFooterNavigation'}{/content}
 				</ul>
 			</nav>
 		{/hascontent}
-	</div>
+	</footer>
 {else}
 	<p class="info">{lang}wcf.user.recentActivity.noEntries{/lang}</p>
 {/if}
diff --git a/com.woltlab.wcf/templates/register.tpl b/com.woltlab.wcf/templates/register.tpl
index 99fc246fff..e16a101c75 100644
--- a/com.woltlab.wcf/templates/register.tpl
+++ b/com.woltlab.wcf/templates/register.tpl
@@ -39,7 +39,17 @@
 {include file='header' __disableLoginLink=true __disableAds=true}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.register{/lang}</h1>
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.register{/lang}</h1>
+	</div>
+	
+	{hascontent}
+		<nav class="contentHeaderNavigation">
+			<ul>
+				{content}{event name='contentHeaderNavigation'}{/content}
+			</ul>
+		</nav>
+	{/hascontent}
 </header>
 
 {include file='userNotice'}
@@ -50,18 +60,6 @@
 
 {include file='formError'}
 
-<div class="contentNavigation">
-	{hascontent}
-		<nav>
-			<ul>
-				{content}
-					{event name='contentNavigationButtons'}
-				{/content}
-			</ul>
-		</nav>
-	{/hascontent}
-</div>
-
 <form method="post" action="{link controller='Register'}{/link}">
 	<section class="section">
 		<h2 class="sectionTitle">{lang}wcf.user.username{/lang}</h2>
diff --git a/com.woltlab.wcf/templates/registerActivation.tpl b/com.woltlab.wcf/templates/registerActivation.tpl
index 4ab00ecb49..7c33ae05f5 100644
--- a/com.woltlab.wcf/templates/registerActivation.tpl
+++ b/com.woltlab.wcf/templates/registerActivation.tpl
@@ -10,7 +10,17 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.registerActivation{/lang}</h1>
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.registerActivation{/lang}</h1>
+	</div>
+	
+	{hascontent}
+		<nav class="contentHeaderNavigation">
+			<ul>
+				{content}{event name='contentHeaderNavigation'}{/content}
+			</ul>
+		</nav>
+	{/hascontent}
 </header>
 
 {include file='userNotice'}
@@ -19,18 +29,6 @@
 
 {include file='formError'}
 
-<div class="contentNavigation">
-	{hascontent}
-		<nav>
-			<ul>
-				{content}
-					{event name='contentNavigationButtons'}
-				{/content}
-			</ul>
-		</nav>
-	{/hascontent}
-</div>
-
 <form method="post" action="{link controller='RegisterActivation'}{/link}">
 	<div class="section">
 		<dl{if $errorField == 'username'} class="formError"{/if}>
diff --git a/com.woltlab.wcf/templates/registerNewActivationCode.tpl b/com.woltlab.wcf/templates/registerNewActivationCode.tpl
index ecac56103e..38a307bf9a 100644
--- a/com.woltlab.wcf/templates/registerNewActivationCode.tpl
+++ b/com.woltlab.wcf/templates/registerNewActivationCode.tpl
@@ -10,25 +10,23 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.newActivationCode{/lang}</h1>
-</header>
-
-{include file='userNotice'}
-
-{include file='formError'}
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.newActivationCode{/lang}</h1>
+	</div>
 	
-<div class="contentNavigation">
 	{hascontent}
-		<nav>
+		<nav class="contentHeaderNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtons'}
-				{/content}
+				{content}{event name='contentHeaderNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
-	
+</header>
+
+{include file='userNotice'}
+
+{include file='formError'}
+
 <form method="post" action="{link controller='RegisterNewActivationCode'}{/link}">
 	<div class="section">
 		<dl{if $errorField == 'username'} class="formError"{/if}>
diff --git a/com.woltlab.wcf/templates/searchResult.tpl b/com.woltlab.wcf/templates/searchResult.tpl
index e749092b88..f603ee48db 100644
--- a/com.woltlab.wcf/templates/searchResult.tpl
+++ b/com.woltlab.wcf/templates/searchResult.tpl
@@ -11,48 +11,58 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{if $query}<a href="{link controller='Search'}q={$query|urlencode}{/link}">{lang}wcf.search.results{/lang}</a>{else}{lang}wcf.search.results{/lang}{/if}</h1>
-	<p class="contentHeaderDescription">{lang}wcf.search.results.description{/lang}</p>
-</header>
-
-{include file='userNotice'}
-
-<div class="contentNavigation">
-	{assign var=encodedHighlight value=$highlight|urlencode}
-	{pages print=true application=$application assign=pagesLinks controller='SearchResult' id=$searchID link="pageNo=%d&highlight=$encodedHighlight"}
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{if $query}<a href="{link controller='Search'}q={$query|urlencode}{/link}">{lang}wcf.search.results{/lang}</a>{else}{lang}wcf.search.results{/lang}{/if}</h1>
+		<p class="contentHeaderDescription">{lang}wcf.search.results.description{/lang}</p>
+	</div>
 	
 	{hascontent}
-		<nav>
+		<nav class="contentHeaderNavigation">
 			<ul>
 				{content}
 					{if $alterable}
 						<li><a href="{link controller='Search'}modify={@$searchID}{/link}" class="button"><span class="icon icon16 fa-search"></span> <span>{lang}wcf.search.results.change{/lang}</span></a></li>
 					{/if}
-					{event name='contentNavigationButtonsTop'}
+					{event name='contentHeaderNavigation'}
 				{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</header>
+
+{include file='userNotice'}
+
+{hascontent}
+	<div class="paginationTop">
+		{content}
+			{assign var=encodedHighlight value=$highlight|urlencode}
+			{pages print=true application=$application assign=pagesLinks controller='SearchResult' id=$searchID link="pageNo=%d&highlight=$encodedHighlight"}
+		{/content}
+	</div>
+{/hascontent}
 
 {include file=$resultListTemplateName application=$resultListApplication}
 
-<div class="contentNavigation">
-	{@$pagesLinks}
+<footer class="contentFooter">
+	{hascontent}
+		<div class="paginationBottom">
+			{content}{@$pagesLinks}{/content}
+		</div>
+	{/hascontent}
 	
 	{hascontent}
-		<nav>
+		<nav class="contentFooterNavigation">
 			<ul>
 				{content}
 					{if $alterable}
 						<li><a href="{link controller='Search'}modify={@$searchID}{/link}" class="button"><span class="icon icon16 fa-search"></span> <span>{lang}wcf.search.results.change{/lang}</span></a></li>
 					{/if}
-					{event name='contentNavigationButtonsBottom'}
+					{event name='contentFooterNavigation'}
 				{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</footer>
 
 {include file='footer'}
 
diff --git a/com.woltlab.wcf/templates/settings.tpl b/com.woltlab.wcf/templates/settings.tpl
index 2dd56dac3d..f10c3760d4 100644
--- a/com.woltlab.wcf/templates/settings.tpl
+++ b/com.woltlab.wcf/templates/settings.tpl
@@ -20,7 +20,17 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.menu.settings{/lang}: {lang}wcf.user.option.category.settings.{$category}{/lang}</h1>
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.menu.settings{/lang}: {lang}wcf.user.option.category.settings.{$category}{/lang}</h1>
+	</div>
+	
+	{hascontent}
+		<nav class="contentHeaderNavigation">
+			<ul>
+				{content}{event name='contentHeaderNavigation'}{/content}
+			</ul>
+		</nav>
+	{/hascontent}
 </header>
 
 {include file='userNotice'}
@@ -31,18 +41,6 @@
 	<p class="success">{lang}wcf.global.success.edit{/lang}</p>
 {/if}
 
-<div class="contentNavigation">
-	{hascontent}
-		<nav>
-			<ul>
-				{content}
-					{event name='contentNavigationButtons'}
-				{/content}
-			</ul>
-		</nav>
-	{/hascontent}
-</div>
-
 <form method="post" action="{link controller='Settings'}{/link}">
 	{if $category == 'general'}
 		{if $availableLanguages|count > 1}
diff --git a/com.woltlab.wcf/templates/signatureEdit.tpl b/com.woltlab.wcf/templates/signatureEdit.tpl
index 36099cca3a..8b8d4877f9 100644
--- a/com.woltlab.wcf/templates/signatureEdit.tpl
+++ b/com.woltlab.wcf/templates/signatureEdit.tpl
@@ -25,7 +25,17 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.signature.edit{/lang}</h1>
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.signature.edit{/lang}</h1>
+	</div>
+	
+	{hascontent}
+		<nav class="contentHeaderNavigation">
+			<ul>
+				{content}{event name='contentHeaderNavigation'}{/content}
+			</ul>
+		</nav>
+	{/hascontent}
 </header>
 
 {include file='userNotice'}
@@ -40,18 +50,6 @@
 	<p class="error">{lang}wcf.user.signature.error.disabled{/lang}</p>
 {/if}
 
-<div class="contentNavigation">
-	{hascontent}
-		<nav>
-			<ul>
-				{content}
-					{event name='contentNavigationButtons'}
-				{/content}
-			</ul>
-		</nav>
-	{/hascontent}
-</div>
-
 <form method="post" action="{link controller='SignatureEdit'}{/link}">
 	{if $signatureCache}
 		<section class="section">
diff --git a/com.woltlab.wcf/templates/tagged.tpl b/com.woltlab.wcf/templates/tagged.tpl
index 3599932b31..657fdad9f3 100644
--- a/com.woltlab.wcf/templates/tagged.tpl
+++ b/com.woltlab.wcf/templates/tagged.tpl
@@ -41,24 +41,26 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.tagging.taggedObjects.{@$objectType}{/lang}</h1>
-</header>
-
-{include file='userNotice'}
-
-<div class="contentNavigation">
-	{pages print=true assign=pagesLinks controller='Tagged' object=$tag link="objectType=$objectType&pageNo=%d"}
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.tagging.taggedObjects.{@$objectType}{/lang}</h1>
+	</div>
 	
 	{hascontent}
-		<nav>
+		<nav class="contentHeaderNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtonsTop'}
-				{/content}
+				{content}{event name='contentHeaderNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</header>
+
+{include file='userNotice'}
+
+{hascontent}
+	<div class="paginationTop">
+		{content}{pages print=true assign=pagesLinks controller='Tagged' object=$tag link="objectType=$objectType&pageNo=%d"}{/content}
+	</div>
+{/hascontent}
 
 {if $items}
 	{include file=$resultListTemplateName application=$resultListApplication}
@@ -66,19 +68,21 @@
 	<p class="info">{lang}wcf.tagging.taggedObjects.noResults{/lang}</p>
 {/if}
 
-<div class="contentNavigation">
-	{@$pagesLinks}
+<footer class="contentFooter">
+	{hascontent}
+		<div class="paginationBottom">
+			{content}{@$pagesLinks}{/content}
+		</div>
+	{/hascontent}
 	
 	{hascontent}
-		<nav>
+		<nav class="contentFooterNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtonsBottom'}
-				{/content}
+				{content}{event name='contentFooterNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</footer>
 
 {include file='footer'}
 
diff --git a/com.woltlab.wcf/templates/team.tpl b/com.woltlab.wcf/templates/team.tpl
index b523aa45cc..14d44ea3ee 100644
--- a/com.woltlab.wcf/templates/team.tpl
+++ b/com.woltlab.wcf/templates/team.tpl
@@ -33,22 +33,20 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.team{/lang}</h1>
-</header>
-
-{include file='userNotice'}
-
-<div class="contentNavigation">
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.team{/lang}</h1>
+	</div>
+	
 	{hascontent}
-		<nav>
+		<nav class="contentHeaderNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtonsTop'}
-				{/content}
+				{content}{event name='contentHeaderNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</header>
+
+{include file='userNotice'}
 
 {foreach from=$objects->getTeams() item=team}
 	<section class="section sectionContainerList">
@@ -65,17 +63,15 @@
 	</section>
 {/foreach}
 
-<div class="contentNavigation">
+<footer class="contentFooter">
 	{hascontent}
-		<nav>
+		<nav class="contentFooterNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtonsBottom'}
-				{/content}
+				{content}{event name='contentFooterNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</footer>
 
 {include file='footer'}
 
diff --git a/com.woltlab.wcf/templates/userSearch.tpl b/com.woltlab.wcf/templates/userSearch.tpl
index a47d8aed6f..b468c244b8 100644
--- a/com.woltlab.wcf/templates/userSearch.tpl
+++ b/com.woltlab.wcf/templates/userSearch.tpl
@@ -23,7 +23,17 @@
 {include file='header'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.search{/lang}</h1>
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.search{/lang}</h1>
+	</div>
+	
+	{hascontent}
+		<nav class="contentHeaderNavigation">
+			<ul>
+				{content}{event name='contentHeaderNavigation'}{/content}
+			</ul>
+		</nav>
+	{/hascontent}
 </header>
 
 {include file='userNotice'}
@@ -34,18 +44,6 @@
 	{include file='formError'}
 {/if}
 
-<div class="contentNavigation">
-	{hascontent}
-		<nav>
-			<ul>
-				{content}
-					{event name='contentNavigationButtons'}
-				{/content}
-			</ul>
-		</nav>
-	{/hascontent}
-</div>
-
 <form method="post" action="{link controller='UserSearch'}{/link}">
 	<div class="section">
 		<dl>
diff --git a/com.woltlab.wcf/templates/usersOnlineList.tpl b/com.woltlab.wcf/templates/usersOnlineList.tpl
index c1c30aca65..68861265df 100644
--- a/com.woltlab.wcf/templates/usersOnlineList.tpl
+++ b/com.woltlab.wcf/templates/usersOnlineList.tpl
@@ -97,7 +97,17 @@
 {include file='userNotice'}
 
 <header class="contentHeader">
-	<h1 class="contentTitle">{lang}wcf.user.usersOnline{/lang}</h1>
+	<div class="contentHeaderTitle">
+		<h1 class="contentTitle">{lang}wcf.user.usersOnline{/lang}</h1>
+	</div>
+	
+	{hascontent}
+		<nav class="contentHeaderNavigation">
+			<ul>
+				{content}{event name='contentHeaderNavigation'}{/content}
+			</ul>
+		</nav>
+	{/hascontent}
 </header>
 
 {assign var=usersOnlineList value=''}
@@ -201,18 +211,6 @@
 	{/if}
 {/foreach}
 
-<div class="contentNavigation">
-	{hascontent}
-		<nav>
-			<ul>
-				{content}
-					{event name='contentNavigationButtonsTop'}
-				{/content}
-			</ul>
-		</nav>
-	{/hascontent}
-</div>
-
 {if $usersOnline}
 	<section class="section sectionContainerList">
 		<h2 class="sectionTitle">{lang}wcf.user.usersOnline.users{/lang} <span class="badge">{#$usersOnline}</span></h2>
@@ -243,17 +241,15 @@
 	</section>
 {/if}
 
-<div class="contentNavigation">
+<footer class="contentFooter">
 	{hascontent}
-		<nav>
+		<nav class="contentFooterNavigation">
 			<ul>
-				{content}
-					{event name='contentNavigationButtonsBottom'}
-				{/content}
+				{content}{event name='contentFooterNavigation'}{/content}
 			</ul>
 		</nav>
 	{/hascontent}
-</div>
+</footer>
 
 {include file='footer'}
 
diff --git a/wcfsetup/install/files/style/layout/content.scss b/wcfsetup/install/files/style/layout/content.scss
index 82cfbd044c..a68a285d88 100644
--- a/wcfsetup/install/files/style/layout/content.scss
+++ b/wcfsetup/install/files/style/layout/content.scss
@@ -20,7 +20,9 @@
 			color: $wcfContentHeadlineLinkActive; // todo: rename variable
 		}
 	}
-	
+}
+
+.contentHeader {
 	.contentHeaderDescription {
 		color: $wcfContentDimmedText;
 		margin-top: 5px;
@@ -45,10 +47,36 @@
 		}
 	}
 	
+	@include large-screen-only {
+		display: flex;
+		
+		.contentHeaderIcon {
+			flex: 0 0 64px;
+			margin-right: 15px
+		}
+		
+		.contentHeaderTitle {
+			flex: 1 1 auto;
+		}
+		
+		.contentHeaderNavigation {
+			flex: 0 0 auto;
+			margin-left: 15px;
+			
+			> ul {
+				@include inlineList;
+				
+				flex-wrap: nowrap;
+			}
+		}
+	}
+	
 	@include small-screen-only {
 		.contentHeaderIcon {
 			display: none;
 		}
+		
+		// TODO: mobile optimization for `.contentHeaderNavigation`
 	}
 }
 
@@ -78,7 +106,11 @@
 
 /* content sections */
 .section {
-	margin-top: 40px;	
+	margin-top: 40px;
+	
+	> :first-child {
+		margin-top: 0;
+	}
 	
 	.sectionHeader {
 		position: relative;
@@ -219,7 +251,7 @@ fieldset {
 	}
 }
 
-/* styling for content navigation area (containing pagination / page buttons) */
+/* DEPRECATED: styling for content navigation area (containing pagination / page buttons) */
 .contentNavigation {
 	& + .section {
 		margin-top: 30px;
@@ -291,11 +323,63 @@ fieldset {
 	}
 }
 
+.paginationTop {
+	margin-top: 40px;
+	
+	& + .section {
+		margin-top: 20px;
+	}
+}
+
+.contentFooter {
+	display: flex;
+	
+	> .paginationBottom {
+		flex: 0 0 auto;
+		margin-top: 20px;
+	}
+	
+	> .contentFooterNavigation {
+		flex: 1 1 auto;
+		margin: 20px 0 0 20px;
+		text-align: right;
+	}
+}
+
+/* content navigation buttons */
+@include small-screen-only {
+	.contentHeader > .contentHeaderNavigation > ul {
+		margin-top: 30px;
+		
+		> li {
+			&:not(:first-child) {
+				margin-top: 10px;
+			}
+			
+			> .button {
+				display: block;
+				padding: 7px 10px;
+				text-align: center;
+			}
+		}
+	}
+}
+
 @include small-screen-only {
+	.paginationTop {
+		display: none;
+		
+		& + .section {
+			margin-top: 30px;
+		}
+	}
+	
+	/* DEPRECATED */
 	.contentNavigation > .pagination {
 		display: none;
 	}
 	
+	/* DEPRECATED */
 	.section ~ .contentNavigation > .pagination {
 		display: block;
 		
diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index bde79c44f6..db38711c65 100644
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -1,7 +1,6 @@
 .messageList {
 	border: 1px solid $wcfContentBorder;
 	border-width: 1px 0;
-	margin: 30px 0;
 	
 	> li {
 		@include large-screen-only {
-- 
2.20.1