From: Luzifr <szekely@woltlab.com>
Date: Mon, 1 Aug 2011 19:18:43 +0000 (+0200)
Subject: Further changes to tables and (simplified)
X-Git-Tag: 2.0.0_Beta_1~1918^2~5
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=77da1fd8d242b42cc00223639d0fc5a508d0f9c1;p=GitHub%2FWoltLab%2FWCF.git

Further changes to tables and (simplified)

"subTabMenu" = "menu", "titleBarPanel" = "boxTitle", code format, other
changes.
---

diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css
index c92c309d0c..b6a16f441c 100644
--- a/wcfsetup/install/files/acp/style/testing.css
+++ b/wcfsetup/install/files/acp/style/testing.css
@@ -24,6 +24,10 @@ img {
 	vertical-align: middle !important;
 }
 
+p {
+	color: #333;
+}
+
 a {
 	color: #369;
 	text-decoration: none;
@@ -40,14 +44,6 @@ a:hover {
 	text-decoration: underline;
 }
 
-#content a {
-	color: #999;
-}
-
-#content a:hover {
-	color: #333;
-}
-
 .invisible {
 	position: absolute;
 	left: -9000px;
@@ -58,16 +54,21 @@ hr {
 	display: none;
 }
 
+* {
+	text-overflow: ellipsis;
+}
+
 
 
 /* -- -- -- -- -- Header -- -- -- -- -- */
 
 header.pageHeader {
-	/*
-	background-image: url("../images/header.png");
+	/* Disabled, because the WoltLab header image is not LGPL 
+	Activate it if you want to test your header image */
+	/* background-image: url("../images/header.png"); */
 	background-position: left top;
 	background-repeat: repeat-x;
-	*/
+	
 	min-width: 800px;
 	width: 100%;
 }
@@ -529,15 +530,18 @@ input[type="search"],
 input[type="email"],
 input[type='password'],
 textarea {
-	border: 1px solid #ccc;
-	
+	border-width: 1px;
+	border-style: solid;
+	border-color: #999 #ccc #eee;
 	border-radius: 3px;
 	
-	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-	-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-	-ms-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-	-o-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-	box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
+	background-color: #fafafa;
+	
+	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
+	-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
+	-ms-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
+	-o-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
+	box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
 }
 
 input[type='text']:hover,
@@ -711,36 +715,55 @@ input[type='submit']:hover,
 
 
 
-/* ToDo */
+/* -- -- -- -- -- Border -- -- -- -- -- */
 
 .border {
 	border: 1px solid #ccc;
 	border-radius: 5px;
-	margin: 14px 0 14px;
+	margin: 15px 0 15px;
 }
 
-.borderMarginRemove {
-	margin-top: 0;
+/* -- -- -- -- -- Box Title -- -- -- -- -- */
+
+.boxTitle {
+	/* Disabled, because the WoltLab header image is not LGPL 
+	Activate it if you want to test your header image */
+	/* background-image: url("../images/header.png"); */
+	background-position: left top;
+	background-repeat: repeat-x;
+
+	background-size: auto 100px.
+	border-radius: 7px;
 }
 
-.titleBarPanel {
-	background-color: #369;
-	border-top-left-radius: 5px;
-	border-top-right-radius: 5px;
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
-	border-bottom-width: 0;
+.boxTitle > hgroup {
 	color: #fff;
-	/* margin-bottom: -10px; without "borderMarginRemove"! */
-	margin-bottom: 0;
 	padding: 7px;
 }
 
-.titleBarPanel a {
+.boxTitle > hgroup a, .boxTitle > a {
 	color: #fff;
 	text-decoration: none;
 }
 
+.boxTitle > hgroup h1 {
+	display: inline-block;
+}
+
+.boxTitle img.handle {
+	float: right !important;
+	height: 16px;
+	width: 16px;
+	cursor: pointer;
+	margin-top: -1px;
+}
+
+/* -- -- -- -- -- Tab Menu -- -- -- -- -- */
+
+.tabMenu {
+	margin: 0 3px -1px !important;
+}
+
 .tabMenu li a {
 	text-shadow: 0 1px 0 #fff;
 }
@@ -750,31 +773,48 @@ input[type='submit']:hover,
 	font-weight: bold;
 }
 
-.subTabMenu {
-	background-color: #369;
-	border-top-left-radius: 5px;
-	border-top-right-radius: 5px;
-	border-bottom-width: 0;
+
+
+/* -- -- -- -- -- Menu -- -- -- -- -- */
+
+.menu {
 	color: #fff;
-	margin-top: 15px !important;
-	margin-bottom: -14px !important;
-	padding: 7px;
+	padding: 6px 7px;
 }
 
-.subTabMenu a {
-	color: #fff !important;
+.menu a {
+	color: #eee !important;
+	font-size: 85%;
 	text-decoration: none;
+	text-shadow: 0 -1px 0 #000;
+	border: 1px solid transparent;
+	background-color: transparent;
+	padding: 2px 10px;
+	border-radius: 13px;
+}
+
+.menu a:hover {
+	color: #fff !important;
+	border: 1px solid rgba(0, 0, 0, .3);
+	background-color: rgba(0, 0, 0, .1);
 }
 
-.tabMenuContent,
-.content {
-	border-width: 0 !important;
+.menu a:active, .menu a:focus, .menu a.active {
+	border: 1px solid rgba(0, 0, 0, .5);
+	
+	-webkit-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
+	-moz-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
+	-ms-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
+	-o-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
+	box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
 }
 
 
 
 /* -- -- -- -- -- ToDo: Tables -- -- -- -- -- */
 
+/* Table */
+
 table {
 	width: 100% !important;
 }
@@ -789,38 +829,42 @@ thead th:last-child {
 	border-top-right-radius: 5px;	
 }
 
-th {
-	background-color: rgba(51, 51, 51, .7);
-	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#000));/* ToDo: Transparency missing */
-	background-image: -moz-linear-gradient(0% 0% 270deg, #333, #000);
-	background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#000));
-	background-image: -o-linear-gradient(#333, #000);
-	background-image: linear-gradient(#666, #000);
-	
-	border-top: 1px solid #000;
+thead th {
+	background-color: rgba(0, 0, 0, .4);
+	/*
+	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#000));/* ToDo: Transparency missing *//*
+	background-image: -moz-linear-gradient(0% 0% 270deg, #444, #000);
+	background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#000));
+	background-image: -o-linear-gradient(#444, #000);
+	background-image: linear-gradient(#444, #000);
+	*/
 	border-right: 1px solid #000;
-	border-bottom: 1px solid #000;
-	
 	font-size: 87%;
 }
 
-th:last-child {
+thead th:last-child {
 	border-right-width: 0;
 }
 
-th:hover {
-	background-color: rgba(51, 51, 51, 1);
+thead th:hover {
+	background-color: rgba(0, 0, 0, .5);
 }
 
-th.active {
-	background-color: rgba(51, 51, 51, 1);
+thead th.active {
+	background-color: rgba(0, 0, 0, .5);
+	
+	-webkit-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .5);
+	-moz-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .5);
+	-ms-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .5);
+	-o-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .5);
+	box-shadow: inset 0 5px 15px rgba(0, 0, 0, .5);
 }
 
-th.active:hover {
-	background-color: rgba(51, 51, 51, 1);
+thead th.active:hover {
+	background-color: rgba(0, 0, 0, .5);
 }
 
-th a, th .emptyHead {
+thead th a, thead th .emptyHead {
 	color: #69c !important;
 	text-shadow: 0 -1px 0 #000;
 	display: block;
@@ -828,11 +872,11 @@ th a, th .emptyHead {
 	padding: 5px 7px;
 }
 
-th a:hover {
+thead th a:hover {
 	color: #fff !important;
 }
 
-th.active a {
+thead th.active a {
 	font-weight: bold;
 	color: #fff !important;
 }
@@ -844,62 +888,68 @@ tbody tr {
 }
 
 tbody tr:last-child {
+	/* no border for the last tables row */
 	border-bottom-width: 0;
 }
 
 tbody tr:last-child td:first-child {
+	/* rounded corners for the last table cell to the left */
 	border-bottom-left-radius: 5px;	
 }
 
 tbody tr:last-child td:last-child {
+	/* rounded corners for the last table cell to the right */
 	border-bottom-right-radius: 5px;	
 }
 
-td {
+tbody td {
 	background-color: #fcfdfe;
-	border-right: 1px solid #fff;
+	border-right-width: 0;
 	padding: 5px;
 }
 
-td:last-child {
+tbody td:last-child {
 	border-right-width: 0;
 }
 
-tr:nth-child(2n+1) td {
+tbody tr:nth-child(2n+1) td {
+	/* auto-colorer for every 2nd row */
 	background-color: #f2f6fa;
 }
 
-tr:hover td {
+tbody tr:hover td {
 	background-color: #d8e7f5;
 }
 
-tr .columnIcon img {
+tbody tr .columnIcon img {
 	height: 16px;
 	width: 16px;
 }
 
 /* Table Specials */
 
-.subTabMenu ~ .border {
+/*
+.menu ~ .border {
 	border-top-left-radius: 0 !important;
 	border-top-right-radius: 0 !important;
 }
+*/
 
-.subTabMenu ~ .border thead th:first-child {
+.menu ~ .border thead th:first-child {
 	border-top-left-radius: 0 !important;
 }
 
-.subTabMenu ~ .border thead th:last-child {
+.menu ~ .border thead th:last-child {
 	border-top-right-radius: 0 !important;	
 }
 
-.subTabMenu ~ .border thead th:first-child,
-.titleBarPanel ~ .border thead th:first-child {
+.menu ~ .border thead th:first-child,
+.boxTitle > table thead th:first-child {
 	border-top-left-radius: 0 !important;
 }
 
-.subTabMenu ~ .border thead th:last-child,
-.titleBarPanel ~ .border thead th:last-child {
+.menu ~ .border thead th:last-child,
+.boxTitle > table thead th:last-child {
 	border-top-right-radius: 0 !important;	
 }
 
@@ -1145,7 +1195,6 @@ div.ui-widget-overlay {
 
 .ui-tabs .ui-tabs-nav {
 	height: 18px !important; /* Fixes a clearing problem */
-	margin: 0 3px;
 	background-color: none;
 	padding: 3px 3px 0;
 }
diff --git a/wcfsetup/install/files/acp/templates/acpSessionLog.tpl b/wcfsetup/install/files/acp/templates/acpSessionLog.tpl
index a4fc15e572..b18405f0da 100644
--- a/wcfsetup/install/files/acp/templates/acpSessionLog.tpl
+++ b/wcfsetup/install/files/acp/templates/acpSessionLog.tpl
@@ -15,10 +15,10 @@
 
 {if $sessionAccessLogs|count}
 	<div class="border titleBarPanel">
-		<div class="containerHead"><h3>{lang}wcf.acp.sessionLog.access.view.count{/lang}</h3></div>
-	</div>
-	<div class="border borderMarginRemove">
-		<table class="tableList">
+		<hgroup>
+			<h1>{lang}wcf.acp.sessionLog.access.view.count{/lang}</h1>
+		</hgroup>
+		<table>
 			<thead>
 				<tr class="tableHead">
 					<th class="columnSessionAccessLogID{if $sortField == 'sessionAccessLogID'} active{/if}"><p><a href="index.php?page=ACPSessionLog&amp;sessionLogID={@$sessionLogID}&amp;pageNo={@$pageNo}&amp;sortField=sessionAccessLogID&amp;sortOrder={if $sortField == 'sessionAccessLogID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{@SID_ARG_2ND}">{lang}wcf.acp.sessionLog.sessionAccessLogID{/lang}{if $sortField == 'sessionAccessLogID'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}S.png" alt="" />{/if}</a></p></th>
diff --git a/wcfsetup/install/files/acp/templates/acpSessionLogList.tpl b/wcfsetup/install/files/acp/templates/acpSessionLogList.tpl
index 4ecfad160f..bb91d402a9 100644
--- a/wcfsetup/install/files/acp/templates/acpSessionLogList.tpl
+++ b/wcfsetup/install/files/acp/templates/acpSessionLogList.tpl
@@ -14,11 +14,11 @@
 </div>
 
 {if $sessionLogs|count}
-	<div class="border titleBarPanel">
-		<div class="containerHead"><h3>{lang}wcf.acp.sessionLog.view.count{/lang}</h3></div>
-	</div>
-	<div class="border borderMarginRemove">
-		<table class="tableList">
+	<div class="border boxTitle">
+		<hgroup>
+			<h1>{lang}wcf.acp.sessionLog.view.count{/lang}</h1>
+		</hgroup>
+		<table>
 			<thead>
 				<tr class="tableHead">
 					<th class="columnSessionLogID{if $sortField == 'sessionLogID'} active{/if}"><p><a href="index.php?page=ACPSessionLogList&amp;pageNo={@$pageNo}&amp;sortField=sessionLogID&amp;sortOrder={if $sortField == 'sessionLogID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{@SID_ARG_2ND}">{lang}wcf.acp.sessionLog.sessionLogID{/lang}{if $sortField == 'sessionLogID'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}S.png" alt="" />{/if}</a></p></th>
diff --git a/wcfsetup/install/files/acp/templates/cacheList.tpl b/wcfsetup/install/files/acp/templates/cacheList.tpl
index e38d2ab1c9..328a22218e 100644
--- a/wcfsetup/install/files/acp/templates/cacheList.tpl
+++ b/wcfsetup/install/files/acp/templates/cacheList.tpl
@@ -47,18 +47,12 @@
 
 {foreach from=$caches key=cache item=files}
 	{if $files|count}
-		<div class="border titleBarPanel">
-			<div class="containerHead">
-				<div class="containerIcon">
-					<a onclick="openList('{$cache}')"><img src="{@RELATIVE_WCF_DIR}icon/minusS.png" id="{$cache}Image" alt="" /></a>
-				</div>
-				<div class="containerContent">
-					<h3>{$cache} ({#$files|count})</h3>
-				</div>
-			</div>
-		</div>
-		<div id="{$cache}" class="border borderMarginRemove">
-			<table class="tableList">
+		<div class="border boxTitle">
+			<a onclick="openList('{$cache}')"><img src="{@RELATIVE_WCF_DIR}icon/minusS.png" id="{$cache}Image" alt="" /></a>
+			<hgroup>
+				<h1>{$cache} ({#$files|count})</h1>
+			</hgroup>
+			<table id="{$cache}">
 				<thead>
 					<tr class="tableHead">
 						<th><p><span class="emptyHead">{lang}wcf.acp.cache.list.name{/lang}</span></p></th>
diff --git a/wcfsetup/install/files/acp/templates/cronjobList.tpl b/wcfsetup/install/files/acp/templates/cronjobList.tpl
index cbddec4be0..e21a86b930 100644
--- a/wcfsetup/install/files/acp/templates/cronjobList.tpl
+++ b/wcfsetup/install/files/acp/templates/cronjobList.tpl
@@ -53,11 +53,11 @@
 		</div>
 	</div>
 {else}
-	<div class="border titleBarPanel">
-		<div class="containerHead"><h3>{lang}wcf.acp.cronjob.list.count{/lang}</h3></div>
-	</div>
-	<div class="border borderMarginRemove">
-		<table class="tableList">
+	<div class="border boxTitle">
+		<hgroup>
+			<h1>{lang}wcf.acp.cronjob.list.count{/lang}</h1>
+		</hgroup>
+		<table>
 			<thead>
 				<tr class="tableHead">
 					<th class="columnCronjobID{if $sortField == 'cronjobID'} active{/if}" colspan="2"><p><a href="index.php?page=CronjobList&amp;pageNo={@$pageNo}&amp;sortField=cronjobID&amp;sortOrder={if $sortField == 'cronjobID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{@SID_ARG_2ND}">{lang}wcf.acp.cronjob.cronjobID{/lang}{if $sortField == 'cronjobID'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}S.png" alt="" />{/if}</a></p></th>
@@ -66,7 +66,7 @@
 					<th class="columnStartDom{if $sortField == 'startDom'} active{/if}" title="{lang}wcf.acp.cronjob.startDom{/lang}"><p><a href="index.php?page=CronjobList&amp;pageNo={@$pageNo}&amp;sortField=startDom&amp;sortOrder={if $sortField == 'startDom' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{@SID_ARG_2ND}">{lang}wcf.acp.cronjob.startDomShort{/lang}{if $sortField == 'startDom'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}S.png" alt="" />{/if}</a></p></th>
 					<th class="columnStartMonth{if $sortField == 'startMonth'} active{/if}" title="{lang}wcf.acp.cronjob.startMonth{/lang}"><p><a href="index.php?page=CronjobList&amp;pageNo={@$pageNo}&amp;sortField=startMonth&amp;sortOrder={if $sortField == 'startMonth' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{@SID_ARG_2ND}">{lang}wcf.acp.cronjob.startMonthShort{/lang}{if $sortField == 'startMonth'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}S.png" alt="" />{/if}</a></p></th>
 					<th class="columnStartDow{if $sortField == 'startDow'} active{/if}" title="{lang}wcf.acp.cronjob.startDow{/lang}"><p><a href="index.php?page=CronjobList&amp;pageNo={@$pageNo}&amp;sortField=startDow&amp;sortOrder={if $sortField == 'startDow' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{@SID_ARG_2ND}">{lang}wcf.acp.cronjob.startDowShort{/lang}{if $sortField == 'startDow'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}S.png" alt="" />{/if}</a></p></th>
-					<th class="columnDescription{if $sortField == 'description'} active{/if}"><div><a href="index.php?page=CronjobList&amp;pageNo={@$pageNo}&amp;sortField=description&amp;sortOrder={if $sortField == 'description' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{@SID_ARG_2ND}">{lang}wcf.acp.cronjob.description{/lang}{if $sortField == 'description'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}S.png" alt="" />{/if}</a></p></th>
+					<th class="columnDescription{if $sortField == 'description'} active{/if}"><p><a href="index.php?page=CronjobList&amp;pageNo={@$pageNo}&amp;sortField=description&amp;sortOrder={if $sortField == 'description' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{@SID_ARG_2ND}">{lang}wcf.acp.cronjob.description{/lang}{if $sortField == 'description'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}S.png" alt="" />{/if}</a></p></th>
 					<th class="columnNextExec{if $sortField == 'nextExec'} active{/if}"><p><a href="index.php?page=CronjobList&amp;pageNo={@$pageNo}&amp;sortField=nextExec&amp;sortOrder={if $sortField == 'nextExec' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{@SID_ARG_2ND}">{lang}wcf.acp.cronjob.nextExec{/lang}{if $sortField == 'nextExec'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}S.png" alt="" />{/if}</a></p></th>
 					
 					{if $additionalHeadColumns|isset}{@$additionalHeadColumns}{/if}
diff --git a/wcfsetup/install/files/acp/templates/cronjobLogList.tpl b/wcfsetup/install/files/acp/templates/cronjobLogList.tpl
index 9f225ee5ba..23a40f2b3c 100644
--- a/wcfsetup/install/files/acp/templates/cronjobLogList.tpl
+++ b/wcfsetup/install/files/acp/templates/cronjobLogList.tpl
@@ -16,11 +16,11 @@
 
 {hascontent}
 	<form method="post" action="index.php?action=CronjobsLogDelete">
-		<div class="border titleBarPanel">
-			<div class="containerHead"><h3>{lang}wcf.acp.cronjob.log.data{/lang}</h3></div>
-		</div>
-		<div class="border borderMarginRemove">
-			<table class="tableList">
+		<div class="border boxTitle">
+			<hgroup>
+				<h1>{lang}wcf.acp.cronjob.log.data{/lang}</h1>
+			</hgroup>
+			<table>
 				<thead>
 					<tr class="tableHead">
 						<th class="columnCronjobID{if $sortField == 'cronjobID'} active{/if}"><div><a href="index.php?page=CronjobLogList&amp;pageNo={@$pageNo}&amp;sortField=cronjobID&amp;sortOrder={if $sortField == 'cronjobID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{@SID_ARG_2ND}">{lang}wcf.acp.cronjob.cronjobID{/lang}{if $sortField == 'cronjobID'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}S.png" alt="" />{/if}</a></div></th>
@@ -42,7 +42,7 @@
 								<td class="columnExecTime columnDate"><p>{@$cronjobLog->execTime|time} {lang}wcf.acp.cronjob.log.success{/lang}</p></td>
 							{elseif $cronjobLog->error}
 								<td class="columnExecTime columnText">
-									/p>{@$cronjobLog->execTime|time} {lang}wcf.acp.cronjob.log.error{/lang}<br />
+									<p>{@$cronjobLog->execTime|time} {lang}wcf.acp.cronjob.log.error{/lang}<br />
 									{@$cronjobLog->error}</p>
 								</td>
 							{else}
diff --git a/wcfsetup/install/files/acp/templates/packageInstallationConfirm.tpl b/wcfsetup/install/files/acp/templates/packageInstallationConfirm.tpl
index dc2999c9f2..7279285676 100644
--- a/wcfsetup/install/files/acp/templates/packageInstallationConfirm.tpl
+++ b/wcfsetup/install/files/acp/templates/packageInstallationConfirm.tpl
@@ -76,14 +76,12 @@
 {if $updatableInstances|count > 0}
 	<p class="warning">{lang}wcf.acp.package.install.updatableInstances.warning{/lang}</p>
 	
-	<div class="border titleBarPanel">
-		<div class="containerHead">
-			<h3>{lang}wcf.acp.package.install.updatableInstances{/lang}</h3>
-			<p class="smallFont light">{lang}wcf.acp.package.install.updatableInstances.description{/lang}</p>
-		</div>
-	</div>
-	<div class="border borderMarginRemove">
-		<table class="tableList">
+	<div class="border boxTitle">
+		<hgroup>
+			<h1>{lang}wcf.acp.package.install.updatableInstances{/lang}</h1>
+			<h2>{lang}wcf.acp.package.install.updatableInstances.description{/lang}</h2>
+		</hgroup>
+		<table>
 			<thead>
 				<tr class="tableHead">
 					<th><p><span class="emptyHead">{lang}wcf.acp.package.list.name{/lang}</span></p></th>
@@ -130,9 +128,9 @@
 {/if}
 
 <div class="formSubmit">
-	<input type="button" accesskey="c" value="{lang}wcf.global.button.back{/lang}" onclick="document.location.href=fixURL('index.php?page=Package&amp;action={@$action}&amp;queueID={@$queueID}&amp;step=cancel{@SID_ARG_2ND}')" />
+	<input type="button" onclick="document.location.href=fixURL('index.php?page=Package&amp;action={@$action}&amp;queueID={@$queueID}&amp;step=cancel{@SID_ARG_2ND}')" accesskey="c" value="{lang}wcf.global.button.back{/lang}" />
 	{if $missingPackages == 0 && $excludingPackages|count == 0 && $excludedPackages|count == 0}
-		<input type="button" accesskey="s" id="submitButton" value="{lang}wcf.global.button.next{/lang}" />
+		<input type="button" id="submitButton" value="{lang}wcf.global.button.next{/lang}" accesskey="s" />
 	{/if}
 </div>
 
diff --git a/wcfsetup/install/files/acp/templates/packageList.tpl b/wcfsetup/install/files/acp/templates/packageList.tpl
index 1c95825d5f..4de1f543ba 100644
--- a/wcfsetup/install/files/acp/templates/packageList.tpl
+++ b/wcfsetup/install/files/acp/templates/packageList.tpl
@@ -15,6 +15,7 @@
 	<img src="{@RELATIVE_WCF_DIR}icon/packageL.png" alt="" />
 	<hgroup>
 		<h1>{lang}wcf.acp.package.list{/lang}</h1>
+		<h2>{lang}wcf.acp.package.list.count{/lang}</h2>
 	</hgroup>
 </header>
 
@@ -32,10 +33,11 @@
 </div>
 
 {if $packages|count > 0}
-	<div class="border"><!-- The following table construct is experimental! -->
-		<div class="boxTitle"><h1>{lang}wcf.acp.package.list.count{/lang}</h1></div>
-	
-		<table class="tableList">
+	<div class="border boxTitle">
+		<hgroup>
+			<h1><a href="#">{lang}wcf.acp.package.list{/lang}</a></h1>
+		</hgroup>
+		<table>
 			<thead>
 				<tr class="tableHead">
 					<th colspan="2"{if $sortField == 'packageID'} class="active"{/if}><p><a href="index.php?page=PackageList&amp;pageNo={@$pageNo}&amp;sortField=packageID&amp;sortOrder={if $sortField == 'packageID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{@SID_ARG_2ND}">{lang}wcf.acp.package.list.id{/lang}{if $sortField == 'packageID'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}S.png" alt="" />{/if}</a></p></th>
diff --git a/wcfsetup/install/files/acp/templates/packageUninstallationDependencies.tpl b/wcfsetup/install/files/acp/templates/packageUninstallationDependencies.tpl
index 52fd22c44c..c5e7cb8314 100644
--- a/wcfsetup/install/files/acp/templates/packageUninstallationDependencies.tpl
+++ b/wcfsetup/install/files/acp/templates/packageUninstallationDependencies.tpl
@@ -69,11 +69,11 @@
 		<p class="error">{lang}wcf.acp.package.uninstall.dependentPackages.error{/lang}</p>
 	{/if}
 
-	<div class="border titleBarPanel">
-		<div class="containerHead"><h3>{lang}wcf.acp.package.view.dependentPackages{/lang}</h3></div>
-	</div>
-	<div class="border borderMarginRemove">
-		<table class="tableList">
+	<div class="border boxTitle">
+		<hgroup>
+			<h1>{lang}wcf.acp.package.view.dependentPackages{/lang}</h1>
+		</hgroup>
+		<table>
 			<thead>
 				<tr class="tableHead">
 					<th colspan="2"><p><span class="emptyHead">{lang}wcf.acp.package.list.id{/lang}</span></p></th>
diff --git a/wcfsetup/install/files/acp/templates/packageUpdateSearch.tpl b/wcfsetup/install/files/acp/templates/packageUpdateSearch.tpl
index 843743a8f7..5a7b905461 100644
--- a/wcfsetup/install/files/acp/templates/packageUpdateSearch.tpl
+++ b/wcfsetup/install/files/acp/templates/packageUpdateSearch.tpl
@@ -126,8 +126,8 @@
 		</div>
 		
 		<div class="formSubmit">
-			<input type="reset" accesskey="r" value="{lang}wcf.global.button.reset{/lang}" />
-			<input type="submit" accesskey="s" value="{lang}wcf.global.button.submit{/lang}" />
+			<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
+			<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
 			{@SID_INPUT_TAG}
 	 	</div>
 	</form>
diff --git a/wcfsetup/install/files/acp/templates/packageUpdateSearchResult.tpl b/wcfsetup/install/files/acp/templates/packageUpdateSearchResult.tpl
index e6218bc769..e002c63fbe 100644
--- a/wcfsetup/install/files/acp/templates/packageUpdateSearchResult.tpl
+++ b/wcfsetup/install/files/acp/templates/packageUpdateSearchResult.tpl
@@ -15,7 +15,7 @@
 
 <form method="post" action="index.php?form=PackageUpdate">
 	{foreach from=$packages item=package}
-		<div class="message content">
+		<article class="message content">
 			<div class="messageInner container-{cycle name='styles' values='1,2'}">
 				<h3 class="subHeading">
 					{if $package.standalone == 1}
@@ -101,12 +101,12 @@
 
 				<hr />
 			</div>
-		</div>			
+		</article>			
 	{/foreach}
 	
 	<div class="formSubmit">
-		<input type="reset" accesskey="r" value="{lang}wcf.global.button.reset{/lang}" />
-		<input type="submit" accesskey="s" value="{lang}wcf.global.button.submit{/lang}" />
+		<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
+		<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
 		<input type="hidden" name="packageID" value="{@PACKAGE_ID}" />
 		{@SID_INPUT_TAG}
 		<input type="hidden" name="searchID" value="{@$searchID}" />
diff --git a/wcfsetup/install/files/acp/templates/packageView.tpl b/wcfsetup/install/files/acp/templates/packageView.tpl
index dff08dfe71..2a9dba5ef0 100644
--- a/wcfsetup/install/files/acp/templates/packageView.tpl
+++ b/wcfsetup/install/files/acp/templates/packageView.tpl
@@ -94,17 +94,13 @@
 </div>
 
 {if $requiredPackages|count > 0}
-	<div class="border titleBarPanel">
-		<div class="containerHead">
-			<div class="containerIcon"><a onclick="openList('requiredPackages')"><img id="requiredPackagesImage" src="{@RELATIVE_WCF_DIR}icon/minusS.png" alt="" /></a></div>
-			<div class="containerContent">
-				<h3><a onclick="openList('requiredPackages')">{lang}wcf.acp.package.view.requiredPackages{/lang}</a></h3>
-				<p class="smallFont light">{lang}wcf.acp.package.view.requiredPackages.description{/lang}</p>
-			</div>
-		</div>
-	</div>
-	<div id="requiredPackages" class="border borderMarginRemove">
-		<table class="tableList">
+	<div class="border boxTitle">
+		<a onclick="openList('requiredPackages')"><img id="requiredPackagesImage" src="{@RELATIVE_WCF_DIR}icon/minusS.png" alt="" /></a>
+		<hgroup>
+			<h1><a onclick="openList('requiredPackages')">{lang}wcf.acp.package.view.requiredPackages{/lang}</a></h1>
+			<h2>{lang}wcf.acp.package.view.requiredPackages.description{/lang}</h2>
+		</hgroup>
+		<table id="requiredPackages">
 			<thead>
 				<tr class="tableHead">
 					<th colspan="2"><p><span class="emptyHead">{lang}wcf.acp.package.list.id{/lang}</span></p></th>
@@ -163,17 +159,13 @@
 {/if}
 
 {if $dependentPackages|count > 0}
-	<div class="border titleBarPanel">
-		<div class="containerHead">
-			<div class="containerIcon"><a onclick="openList('dependentPackages')"><img id="dependentPackagesImage" src="{@RELATIVE_WCF_DIR}icon/minusS.png" alt="" /></a></div>
-			<div class="containerContent">
-				<h3><a onclick="openList('dependentPackages')">{lang}wcf.acp.package.view.dependentPackages{/lang}</a></h3>
-				<p class="smallFont light">{lang}wcf.acp.package.view.dependentPackages.description{/lang}</p>
-			</div>
-		</div>
-	</div>
-	<div class="border borderMarginRemove" id="dependentPackages">
-		<table class="tableList">
+	<div class="border boxTitle">
+		<a onclick="openList('dependentPackages')"><img id="dependentPackagesImage" src="{@RELATIVE_WCF_DIR}icon/minusS.png" alt="" /></a>
+		<hgroup>
+			<h1><a onclick="openList('dependentPackages')">{lang}wcf.acp.package.view.dependentPackages{/lang}</a></h1>
+			<h2>{lang}wcf.acp.package.view.dependentPackages.description{/lang}</h2>
+		</hgroup>
+		<table id="dependentPackages">
 			<thead>
 				<tr class="tableHead">
 					<th colspan="2"><p><span class="emptyHead">{lang}wcf.acp.package.list.id{/lang}</span></p></th>
diff --git a/wcfsetup/install/files/acp/templates/updateServerList.tpl b/wcfsetup/install/files/acp/templates/updateServerList.tpl
index 597169aba5..718673609c 100644
--- a/wcfsetup/install/files/acp/templates/updateServerList.tpl
+++ b/wcfsetup/install/files/acp/templates/updateServerList.tpl
@@ -33,13 +33,13 @@
 		</div>
 	</div>
 {else}
-	<div class="border titleBarPanel">
-		<div class="containerHead"><h3>{lang}wcf.acp.updateServer.list.available{/lang}</h3></div>
-	</div>
-	<div class="border borderMarginRemove">
-		<table class="tableList">
+	<div class="border boxTitle">
+		<hgroup>
+			<h1>{lang}wcf.acp.updateServer.list.available{/lang}</h1>
+		</hgroup>
+		<table>
 			<thead>
-				<tr class="tableHead">
+				<tr>
 					<th class="columnPackageUpdateServerID{if $sortField == 'packageUpdateServerID'} active{/if}" colspan="2"><p><a href="index.php?page=UpdateServerList&amp;pageNo={@$pageNo}&amp;sortField=packageUpdateServerID&amp;sortOrder={if $sortField == 'packageUpdateServerID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{@SID_ARG_2ND}">{lang}wcf.acp.updateServer.packageUpdateServerID{/lang}{if $sortField == 'packageUpdateServerID'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}S.png" alt="" />{/if}</a></p></th>
 					<th class="columnServer{if $sortField == 'serverURL'} active{/if}"><p><a href="index.php?page=UpdateServerList&amp;pageNo={@$pageNo}&amp;sortField=serverURL&amp;sortOrder={if $sortField == 'serverURL' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{@SID_ARG_2ND}">{lang}wcf.acp.updateServer.serverURL{/lang}{if $sortField == 'serverURL'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}S.png" alt="" />{/if}</a></p></th>
 					<th class="columnPackages{if $sortField == 'packages'} active{/if}"><p><a href="index.php?page=UpdateServerList&amp;pageNo={@$pageNo}&amp;sortField=packages&amp;sortOrder={if $sortField == 'packages' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{@SID_ARG_2ND}">{lang}wcf.acp.updateServer.packages{/lang}{if $sortField == 'packages'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}S.png" alt="" />{/if}</a></p></th>
diff --git a/wcfsetup/install/files/acp/templates/userEmailAddressExport.tpl b/wcfsetup/install/files/acp/templates/userEmailAddressExport.tpl
index 4b1fb88307..9fd3f98279 100644
--- a/wcfsetup/install/files/acp/templates/userEmailAddressExport.tpl
+++ b/wcfsetup/install/files/acp/templates/userEmailAddressExport.tpl
@@ -81,8 +81,8 @@
 	</div>
 	
 	<div class="formSubmit">
-		<input type="reset" accesskey="r" value="{lang}wcf.global.button.reset{/lang}" />
-		<input type="submit" accesskey="s" value="{lang}wcf.global.button.submit{/lang}" />
+		<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
+		<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
 		{@SID_INPUT_TAG}
  		<input type="hidden" name="userIDs" value="{@$userIDs}" />
  	</div>
diff --git a/wcfsetup/install/files/acp/templates/userGroupAdd.tpl b/wcfsetup/install/files/acp/templates/userGroupAdd.tpl
index e3497c7574..d8423d8338 100644
--- a/wcfsetup/install/files/acp/templates/userGroupAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/userGroupAdd.tpl
@@ -74,17 +74,15 @@
 					{/foreach}
 				</ul>
 			</div>
-			<div class="subTabMenu">
-				<div class="containerHead">
-					{foreach from=$optionTree item=categoryLevel1}
-						<ul id="{@$categoryLevel1[object]->categoryName}-categories" class="hidden">
-							{foreach from=$categoryLevel1[categories] item=categoryLevel2}
-								<li id="{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}"><a onclick="tabMenu.showTabMenuContent('{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}');"><span>{lang}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}{/lang}</span></a></li>
-							{/foreach}
-						</ul>
-					{/foreach}
-				</div>
-			</div>
+			<nav class="menu"><!-- ToDo: Border missing -->
+				{foreach from=$optionTree item=categoryLevel1}
+					<ul id="{@$categoryLevel1[object]->categoryName}-categories" class="hidden">
+						{foreach from=$categoryLevel1[categories] item=categoryLevel2}
+							<li id="{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}"><a onclick="tabMenu.showTabMenuContent('{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}');"><span>{lang}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}{/lang}</span></a></li>
+						{/foreach}
+					</ul>
+				{/foreach}
+			</nav>
 			
 			{foreach from=$optionTree item=categoryLevel1}
 				{foreach from=$categoryLevel1[categories] item=categoryLevel2}
@@ -117,8 +115,8 @@
 	</div>
 	
 	<div class="formSubmit">
-		<input type="reset" accesskey="r" value="{lang}wcf.global.button.reset{/lang}" />
-		<input type="submit" accesskey="s" value="{lang}wcf.global.button.submit{/lang}" />
+		<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
+		<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
 		{@SID_INPUT_TAG}
  		<input type="hidden" name="action" value="{@$action}" />
  		{if $groupID|isset}<input type="hidden" name="groupID" value="{@$groupID}" />{/if}
diff --git a/wcfsetup/install/files/acp/templates/userGroupList.tpl b/wcfsetup/install/files/acp/templates/userGroupList.tpl
index 52214b7940..bc58c61880 100644
--- a/wcfsetup/install/files/acp/templates/userGroupList.tpl
+++ b/wcfsetup/install/files/acp/templates/userGroupList.tpl
@@ -38,11 +38,11 @@
 </div>
 
 {if $groups|count}
-	<div class="border titleBarPanel">
-		<div class="containerHead"><h3>{lang}wcf.acp.group.list.data{/lang}</h3></div>
-	</div>
-	<div class="border borderMarginRemove">
-		<table class="tableList">
+	<div class="border boxTitle">
+		<hgroup>
+			<h1>{lang}wcf.acp.group.list.data{/lang}</h1>
+		</hgroup>
+		<table>
 			<thead>
 				<tr class="tableHead">
 					<th class="columnGroupID{if $sortField == 'groupID'} active{/if}" colspan="2"><p><a href="index.php?page=UserGroupList&amp;pageNo={@$pageNo}&amp;sortField=groupID&amp;sortOrder={if $sortField == 'groupID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{@SID_ARG_2ND}">{lang}wcf.acp.group.groupID{/lang}{if $sortField == 'groupID'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}S.png" alt="" />{/if}</a></p></th>
diff --git a/wcfsetup/install/files/acp/templates/userList.tpl b/wcfsetup/install/files/acp/templates/userList.tpl
index 80c2ca7ec9..a24f12d590 100644
--- a/wcfsetup/install/files/acp/templates/userList.tpl
+++ b/wcfsetup/install/files/acp/templates/userList.tpl
@@ -63,17 +63,15 @@
 	</nav>
 </div>
 
-<div class="subTabMenu">
-	<header class="containerHead">
+<div class="border boxTitle">
+	<nav class="menu">
 		<ul>
-			<li{if $action == ''} class="activeSubTabMenu"{/if}><a href="index.php?page=UserList{@SID_ARG_2ND}"><span>{lang}wcf.acp.user.list.all{/lang}</span></a></li>
+			<li{if $action == ''} class="active"{/if}><a href="index.php?page=UserList{@SID_ARG_2ND}"><span>{lang}wcf.acp.user.list.all{/lang}</span></a></li>
 			{if $additionalUserListOptions|isset}{@$additionalUserListOptions}{/if}
 		</ul>
-	</header>
-</div>
-{if $users|count}
-	<div class="border">
-		<table class="tableList">
+	</nav>
+	{if $users|count}
+		<table>
 			<thead>
 				<tr class="tableHead">
 					<th class="columnMark"><p><label class="emptyHead"><input type="checkbox" name="userMarkAll" /></label></p></th>
diff --git a/wcfsetup/install/files/acp/templates/userSearch.tpl b/wcfsetup/install/files/acp/templates/userSearch.tpl
index 8d2f1bdc8b..f5659d0c00 100644
--- a/wcfsetup/install/files/acp/templates/userSearch.tpl
+++ b/wcfsetup/install/files/acp/templates/userSearch.tpl
@@ -221,8 +221,8 @@
 	</div>
 	
 	<div class="formSubmit">
-		<input type="reset" accesskey="r" value="{lang}wcf.global.button.reset{/lang}" />
-		<input type="submit" accesskey="s" value="{lang}wcf.global.button.submit{/lang}" />
+		<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
+		<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
 		{@SID_INPUT_TAG}
  	</div>
 </form>
diff --git a/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl b/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl
index 67156a1a79..93e498367a 100644
--- a/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl
+++ b/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl
@@ -65,12 +65,12 @@
 	//]]>
 </script>
 
-<div class="mainHeadline">
+<header class="mainHeading">
 	<img src="{@RELATIVE_WCF_DIR}icon/usersMassProcessingL.png" alt="" />
-	<div class="headlineContainer">
-		<h2>{lang}wcf.acp.user.massProcessing{/lang}</h2>
-	</div>
-</div>
+	<hgroup>
+		<h1>{lang}wcf.acp.user.massProcessing{/lang}</h1>
+	</hgroup>
+</header>
 
 {if $errorField}
 	<p class="error">{lang}wcf.global.form.error{/lang}</p>