From 57cb1a5ad6f68e826c6402e4aae8585c5dd0f6d3 Mon Sep 17 00:00:00 2001
From: Luzifr <szekely@woltlab.com>
Date: Fri, 9 Sep 2011 21:37:59 +0200
Subject: [PATCH] Styling the installation (Part 2)

Warning: Crash for sure!  Just added the needed CSS declarations into
the setup header. There will be a different solution for that in the
future! Images will not load yet. Updated all installation templates to
meet the new design standards and HTML 5. We are still not ready here!
:-)
---
 wcfsetup/install/files/acp/style/testing.css  |   32 +-
 .../install/files/acp/templates/footer.tpl    |    2 +-
 .../files/acp/templates/setupFooter.tpl       |    2 +-
 .../acp/templates/usersMassProcessing.tpl     |    4 +-
 wcfsetup/setup/lang/setup_de-informal.xml     |    3 +-
 wcfsetup/setup/lang/setup_de.xml              |    3 +-
 wcfsetup/setup/lang/setup_en.xml              |    3 +-
 wcfsetup/setup/template/footer.tpl            |   18 +-
 wcfsetup/setup/template/header.tpl            | 1124 +++++++++++++++--
 wcfsetup/setup/template/stepConfigureDB.tpl   |   87 +-
 wcfsetup/setup/template/stepCreateUser.tpl    |   97 +-
 .../setup/template/stepInstallPackages.tpl    |   15 +-
 wcfsetup/setup/template/stepNext.tpl          |   15 +-
 wcfsetup/setup/template/stepSearchWcfDir.tpl  |   36 +-
 .../setup/template/stepSelectLanguages.tpl    |   26 +-
 .../template/stepSelectSetupLanguage.tpl      |   27 +-
 wcfsetup/setup/template/stepShowLicense.tpl   |   21 +-
 .../template/stepShowSystemRequirements.tpl   |  127 +-
 18 files changed, 1289 insertions(+), 353 deletions(-)

diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css
index 8b8e2821c5..c33caddce8 100644
--- a/wcfsetup/install/files/acp/style/testing.css
+++ b/wcfsetup/install/files/acp/style/testing.css
@@ -40,10 +40,6 @@ footer, header, hgroup, menu, nav, section {
 	display: block;
 }
 
-body {
-	line-height: 1;
-}
-
 ol, ul {
 	list-style: none;
 }
@@ -71,6 +67,7 @@ q:after {
 body {
 	font-family: 'Trebuchet MS', Arial, sans-serif;
 	font-size: 80%;
+	line-height: 1;
 	background-color: #29374a;
 }
 
@@ -346,6 +343,8 @@ div.main {
 	min-width: 800px;
 }
 
+
+
 /* -- -- -- -- -- Content -- -- -- -- -- */
 
 section.content {
@@ -369,6 +368,8 @@ div.main > div section:only-child {
 	width: auto;
 }
 
+
+
 /* -- -- -- -- -- Sidebar -- -- -- -- -- */
 
 aside.sidebar {
@@ -1103,42 +1104,42 @@ input[type='submit']:hover,
 /* default buttons active glow */
 @-webkit-keyframes glowDefaultLargeButtonsActive {
     0% {
-        -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3),  inset 0 1px 3px rgba(0, 0, 0, .1);
+        -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
     }
     100% {
-        -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1),  inset 0 1px 3px rgba(0, 0, 0, .1);
+        -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
     }
 }
 @-moz-keyframes glowDefaultLargeButtonsActive {
     0% {
-        -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3),  inset 0 1px 3px rgba(0, 0, 0, .1);
+        -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
     }
     100% {
-        -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1),  inset 0 1px 3px rgba(0, 0, 0, .1);
+        -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
     }
 }
 @-ms-keyframes glowDefaultLargeButtonsActive {
     0% {
-        -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3),  inset 0 1px 3px rgba(0, 0, 0, .1);
+        -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
     }
     100% {
-        -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1),  inset 0 1px 3px rgba(0, 0, 0, .1);
+        -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
     }
 }
 @-o-keyframes glowDefaultLargeButtonsActive {
     0% {
-        -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3),  inset 0 1px 3px rgba(0, 0, 0, .1);
+        -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
     }
     100% {
-        -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1),  inset 0 1px 3px rgba(0, 0, 0, .1);
+        -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
     }
 }
 @keyframes glowDefaultLargeButtonsActive {
     0% {
-        box-shadow: 0 0 13px rgba(255, 153, 51, .3),  inset 0 1px 3px rgba(0, 0, 0, .1);
+        box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
     }
     100% {
-        box-shadow: 0 0 13px rgba(255, 153, 51, .1),  inset 0 1px 3px rgba(0, 0, 0, .1);
+        box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
     }
 }
 
@@ -2014,7 +2015,8 @@ div.ui-widget-overlay {
 .badge {
 	font-size: 85%;
 	text-shadow: none;
-	color: #369;
+	color: #666;
+	border: 1px solid #ccc;
 	border-radius: 13px;
 	background-color: #fff;
 	margin-right: -3px;
diff --git a/wcfsetup/install/files/acp/templates/footer.tpl b/wcfsetup/install/files/acp/templates/footer.tpl
index 909304ea57..892a5acef2 100644
--- a/wcfsetup/install/files/acp/templates/footer.tpl
+++ b/wcfsetup/install/files/acp/templates/footer.tpl
@@ -5,7 +5,7 @@
 	<!-- /MAIN -->
 	
 	<!-- FOOTER -->
-	<footer id="footer" class="pageFooter">
+	<footer id="pageFooter" class="pageFooter">
 		<div>
 			<nav id="footerNavigation" class="footerNavigation">
 				<ul>
diff --git a/wcfsetup/install/files/acp/templates/setupFooter.tpl b/wcfsetup/install/files/acp/templates/setupFooter.tpl
index 909304ea57..892a5acef2 100644
--- a/wcfsetup/install/files/acp/templates/setupFooter.tpl
+++ b/wcfsetup/install/files/acp/templates/setupFooter.tpl
@@ -5,7 +5,7 @@
 	<!-- /MAIN -->
 	
 	<!-- FOOTER -->
-	<footer id="footer" class="pageFooter">
+	<footer id="pageFooter" class="pageFooter">
 		<div>
 			<nav id="footerNavigation" class="footerNavigation">
 				<ul>
diff --git a/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl b/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl
index 15d10eabf5..b6dea85fd7 100644
--- a/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl
+++ b/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl
@@ -229,9 +229,7 @@
 				</dl>
 				
 				<dl id="subjectDiv"{if $errorField == 'subject'} class="formError"{/if}>
-					<dt>
-						<label for="subject">{lang}wcf.acp.user.sendMail.subject{/lang}</label>
-					</dt>
+					<dt><label for="subject">{lang}wcf.acp.user.sendMail.subject{/lang}</label></dt>
 					<dd>
 						<input type="text" id="subject" name="subject" value="{$subject}" class="long" />
 						{if $errorField == 'subject'}
diff --git a/wcfsetup/setup/lang/setup_de-informal.xml b/wcfsetup/setup/lang/setup_de-informal.xml
index 24d26ea167..c44f3bbaba 100644
--- a/wcfsetup/setup/lang/setup_de-informal.xml
+++ b/wcfsetup/setup/lang/setup_de-informal.xml
@@ -2,7 +2,8 @@
 <language xmlns="http://www.woltlab.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.woltlab.com http://www.woltlab.com/XSD/maelstrom/language.xsd" languagecode="de-informal">
 	<category name="wcf.global">
 		<item name="wcf.global.pageTitle"><![CDATA[{$setupPackageName} Installation]]></item>
-		<item name="wcf.global.title"><![CDATA[<strong>{$setupPackageName}</strong><br />Installation]]></item>
+		<item name="wcf.global.title"><![CDATA[{$setupPackageName}]]></item>
+		<item name="wcf.global.title.subtitle"><![CDATA[Installation]]></item>
 		<item name="wcf.global.pageDirection"><![CDATA[ltr]]></item>
 		<item name="wcf.global.locale.unix"><![CDATA[de_DE]]></item>
 		<item name="wcf.global.locale.win"><![CDATA[deu_deu]]></item>
diff --git a/wcfsetup/setup/lang/setup_de.xml b/wcfsetup/setup/lang/setup_de.xml
index 0443d4c29f..1afda825bd 100644
--- a/wcfsetup/setup/lang/setup_de.xml
+++ b/wcfsetup/setup/lang/setup_de.xml
@@ -2,7 +2,8 @@
 <language xmlns="http://www.woltlab.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.woltlab.com http://www.woltlab.com/XSD/maelstrom/language.xsd" languagecode="de">
 	<category name="wcf.global">
 		<item name="wcf.global.pageTitle"><![CDATA[{$setupPackageName} Installation]]></item>
-		<item name="wcf.global.title"><![CDATA[<b>{$setupPackageName}</b><br />Installation]]></item>
+		<item name="wcf.global.title"><![CDATA[{$setupPackageName}]]></item>
+		<item name="wcf.global.title.subtitle"><![CDATA[Installation]]></item>
 		<item name="wcf.global.pageDirection"><![CDATA[ltr]]></item>
 		<item name="wcf.global.locale.unix"><![CDATA[de_DE]]></item>
 		<item name="wcf.global.locale.win"><![CDATA[deu_deu]]></item>
diff --git a/wcfsetup/setup/lang/setup_en.xml b/wcfsetup/setup/lang/setup_en.xml
index 01ad5ddcca..903e6ff12a 100644
--- a/wcfsetup/setup/lang/setup_en.xml
+++ b/wcfsetup/setup/lang/setup_en.xml
@@ -2,7 +2,8 @@
 <language xmlns="http://www.woltlab.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.woltlab.com http://www.woltlab.com/XSD/maelstrom/language.xsd" languagecode="en">
 	<category name="wcf.global">
 		<item name="wcf.global.pageTitle"><![CDATA[{$setupPackageName} Installation]]></item>
-		<item name="wcf.global.title"><![CDATA[<b>{$setupPackageName}</b><br />Installation]]></item>
+		<item name="wcf.global.title"><![CDATA[{$setupPackageName}]]></item>
+		<item name="wcf.global.title.subtitle"><![CDATA[Installation]]></item>
 		<item name="wcf.global.pageDirection"><![CDATA[ltr]]></item> <!-- system variable; do not translate -->
 		<item name="wcf.global.locale.unix"><![CDATA[en_US]]></item> <!-- system variable; do not translate -->
 		<item name="wcf.global.locale.win"><![CDATA[english]]></item> <!-- system variable; do not translate -->
diff --git a/wcfsetup/setup/template/footer.tpl b/wcfsetup/setup/template/footer.tpl
index 671bdf950e..892a5acef2 100644
--- a/wcfsetup/setup/template/footer.tpl
+++ b/wcfsetup/setup/template/footer.tpl
@@ -1,7 +1,21 @@
-		<div class="copyright">
-			<span>Copyright &copy; 2001-2011 WoltLab&reg; GmbH</span>
+			</section>
+			<!-- CONTENT -->
 		</div>
 	</div>
+	<!-- /MAIN -->
+	
+	<!-- FOOTER -->
+	<footer id="pageFooter" class="pageFooter">
+		<div>
+			<nav id="footerNavigation" class="footerNavigation">
+				<ul>
+					<li id="toTopLink" class="toTopLink"><a href="#top" title="{lang}wcf.global.scrollUp{/lang}" class="balloonTooltip"><img src="{@RELATIVE_WCF_DIR}icon/toTop.svg" alt="" /> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
+				</ul>
+			</nav>
+		</div>
+		<small class="copyright"><a href="http://www.woltlab.com" title="Go to the WoltLab website">Copyright &copy; 2001-2011 WoltLab&reg; GmbH</a></small>
+	</footer>
+	<!-- /FOOTER -->
 	<a id="bottom"></a>
 </body>
 </html>
diff --git a/wcfsetup/setup/template/header.tpl b/wcfsetup/setup/template/header.tpl
index 493ed5d3f3..5fa56f3302 100644
--- a/wcfsetup/setup/template/header.tpl
+++ b/wcfsetup/setup/template/header.tpl
@@ -4,185 +4,1087 @@
 	<meta charset="utf-8" />
 	<title>{lang}wcf.global.progressBar{/lang} - {lang}wcf.global.pageTitle{/lang}</title>
 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 	
-	<!-- Stylesheets -->
 	<style type="text/css">
 		/*<![CDATA[*/
-		body {
-			font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; 
-			color: #333;
-			font-size: .82em;
+		
+		/* ToDo: Reduce the necessary CSS declarations and find out if really all of that is deeded! This is not the final state! */
+		
+		/* -- -- -- -- -- Reset -- -- -- -- -- */
+		
+		/**
+		 * Parts taken from
+		 * http://meyerweb.com/eric/tools/css/reset/ 
+		 * v2.0 | 20110126
+		 * License: none (public domain)
+		 * modifyed to meet the needs of WoltLab
+		 * reduced for the installation file
+		 */
+		
+		html, body, div, span, iframe,
+		h1, h2, h3, h4, h5, h6, p, pre,
+		a, abbr, acronym, address, big, cite, code,
+		del, dfn, em, img, ins, kbd, q, s, samp,
+		small, strike, strong, sub, sup, tt, var,
+		b, u, i, center,
+		dl, dt, dd, ol, ul, li,
+		fieldset, form, label, legend,
+		article, aside, canvas, details, embed, 
+		figure, figcaption, footer, header, hgroup, 
+		menu, nav, output, ruby, section, summary,
+		time, mark, audio, video {
 			margin: 0;
 			padding: 0;
-			background-color: #eee;
-			background-image: url({if 'RELATIVE_WCF_DIR'|defined}{@' '|str_replace:'%20':RELATIVE_WCF_DIR}acp/images/setupBackground-{@$__wcf->getLanguage()->getPageDirection()}.png{else}install.php?showImage=setupBackground-{@$__wcf->getLanguage()->getPageDirection()}.png&tmpFilePrefix={@$tmpFilePrefix}{/if});
-			background-repeat: repeat-y;
-			background-position: {if $__wcf->getLanguage()->getPageDirection() == 'ltr'}left{else}right{/if};
+			border: 0;
+			font-size: 100%;
+		}
+		
+		/* HTML5 display-role reset for older browsers */
+		article, aside, details, figcaption, figure, 
+		footer, header, hgroup, menu, nav, section {
+			display: block;
+		}
+		
+		ol, ul {
+			list-style: none;
+		}
+		
+		
+		
+		/* -- -- -- -- -- Globals -- -- -- -- -- */
+		
+		* {
+			text-overflow: ellipsis;
+		}
+		
+		body {
+			font-family: 'Trebuchet MS', Arial, sans-serif;
+			font-size: 80%;
+			background-color: #29374a;
 		}
 		
-		.page {
-			background-image: url({if 'RELATIVE_WCF_DIR'|defined}{@' '|str_replace:'%20':RELATIVE_WCF_DIR}acp/images/setupHeader-{@$__wcf->getLanguage()->getPageDirection()}.jpg{else}install.php?showImage=setupHeader-{@$__wcf->getLanguage()->getPageDirection()}.jpg&tmpFilePrefix={@$tmpFilePrefix}{/if});
+		img {
+			vertical-align: middle !important;
+		}
+		
+		p {
+			color: #666;
+		}
+		
+		a {
+			color: #369;
+			text-decoration: none;
+			
+			-webkit-transition: color .1s linear;
+			-moz-transition: color .1s linear;
+			-ms-transition: color .1s linear;
+			-o-transition: color .1s linear;
+			transition: color .1s linear;
+		}
+		
+		a:hover {
+			text-decoration: underline;
+			color: #036;
+		}
+		
+		/* ToDo 
+		a.externalURL {
+			background-image: url("../../icon/externalURL.svg");
+			background-position: right center;
 			background-repeat: no-repeat;
+			padding-right: 17px;
+		}
+		*/
+		
+		
+		
+		/* -- -- -- -- -- Page Header -- -- -- -- -- */
+		
+		header.pageHeader {
+			background-image: url("../images/header.png");
+			background-position: left top;
+			background-repeat: repeat-x;
+			min-width: 800px;
+			width: 100%;
+		}
+		
+		/* Logo */
+		
+		header.pageHeader div#logo {
+			margin: 0 23px 0;
+			position: relative;
+			z-index: 1;
+		}
+		
+		header.pageHeader div#logo h1 {
+			font-size: 150%;
+			text-shadow: 0 -1px 0 #000;
+			color: #d8e7f5;
+			position: relative;
+			top: 70px;
+		}
+		
+		header.pageHeader div#logo a:hover {
+			text-decoration: none !important;
+			color: #d8e7f5;
+		}
+		
+		header.pageHeader div#logo img {
+			position: absolute;
+			bottom: 10px;
+			left: 0;
+		}
+		
+		header.pageHeader div#logo a {
+			text-align: right;
+			display: block;
+			height: 110px;
+		}
+		
+		/* Header Navigation  */
+		
+		nav.headerNavigation {
+			background-color: #e7f2fd;
+			border-bottom: 1px solid #bcd;
+			border-top-left-radius: 3px;
+			border-top-right-radius: 3px;
+			margin: 0 23px;
+			display: block;
+			position: relative;
+			min-width: 800px;
+		}
+		
+		nav.headerNavigation:after {
+			content: "";
+			display: block;
+			clear: both;
+		}
+		
+		nav.headerNavigation > div {
+			padding: 3px 7px;
+		}
+		
+		nav.headerNavigation > div:after {
+			content: "";
+			display: block;
+			clear: both;
+		}
+		
+		nav.headerNavigation ul {
+			display: block;
+		}
+		
+		nav.headerNavigation ul li {
+			float: right;
+		}
+		
+		
+		
+		/* -- -- -- -- -- Main -- -- -- -- -- */
+		
+		div.main {
+			margin: 0 23px;
+			min-width: 800px;
+		}
+		
+		
+		
+		/* -- -- -- -- -- Content -- -- -- -- -- */
+		
+		section.content {
 			background-color: #fff;
-			padding: 153px 40px 20px 40px;
-			width: 720px;
+			display: table-cell;
+			padding: 25px 40px;
+			position: relative;
+			width: 100%;
+			z-index: 100;
+			vertical-align: top;
 		}
 		
-		h1 {
-			color: #164369;
-			text-shadow: 0 2px 3px #bbb;
-			font-size: 1.9em;
-			font-weight: normal;
-			margin: 5px 0;
-			padding: 5px 0;
+		section.content .content {
+			border: 1px solid #ccc;
+			background-color: rgba(0, 0, 0, .01);
+			padding: 13px 23px;
 		}
 		
-		h2 {
-			color: #164369;
-			font-size: 1.4em;
+		div.main > div section:only-child {
+			display: block !important;
+			width: auto;
+		}
+		
+		
+		
+		/* -- -- -- -- -- Page Footer -- -- -- -- --  */
+		
+		footer.pageFooter {
+			text-align: center;
+			padding: 0 23px;
+			clear: both;
+			position: relative;
+			min-width: 800px;
+		}
+		
+		footer.pageFooter:after {
+			content: "";
+			display: block;
+			clear: both;
+		}
+		
+		footer.pageFooter > div {
+			border-top: 1px solid #bcd;
+			border-bottom-left-radius: 3px;
+			border-bottom-right-radius: 3px;
+			background-color: #e7f2fd;
+			padding: 3px 7px;
+			clear: both;
+		}
+		
+		footer.pageFooter > div:after {
+			content: "";
+			display: block;
+			clear: both;
+		}
+		
+		footer.pageFooter .copyright {
+			padding-top: 20px;
+			display: inline-block;
+			min-height: 40px;
+		}
+		
+		footer.pageFooter .copyright a {
+			text-shadow: 0 -1px 0 #000;
+		}
+		
+		footer.pageFooter .copyright a:hover {
+			text-decoration: none;
+			color: #69c;
+		}
+		
+		/* Footer Navigation */
+		
+		footer.pageFooter nav.footerNavigation ul li {
+			display: inline-block;
+			float: right;
+		}
+		
+		
+		
+		/* -- -- -- -- -- Headings -- -- -- -- -- */
+		
+		/* Main Heading */
+		
+		.mainHeading {
+			margin: 0 0 15px;
+			position: relative;
+		}
+		
+		.mainHeading img {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 48px;
+			height: 48px;
+		}
+		
+		.mainHeading > hgroup {
+			margin-bottom: 30px;
+			padding-left: 60px;
+			min-height: 48px;
+		}
+		
+		.mainHeading > hgroup h1 {
+			font-size: 175%;
 			font-weight: bold;
-			margin: 0;
+			text-shadow: 0 1px 0 #fff;
+			color: #666;
+			border-bottom: 1px solid #999;
+			padding-bottom: 10px;
+		}
+		
+		.mainHeading > hgroup h2 {
+			font-size: 100%;
+			font-weight: normal;
+			color: #999;
 			padding-top: 5px;
 		}
 		
-		.info, .success, .warning, .error, .help {
-			-webkit-border-radius: 5px;
-			-moz-border-radius: 5px;
+		.mainHeading > hgroup p {
+			padding-top: 3px;
+		} 
+		
+		/* Sub Heading */
+		
+		.subHeading h1 {
+			font-size: 150%;
+			text-shadow: 0 1px 0 #fff;
+			color: #999;
+			border-bottom: 1px solid #ccc;
+			margin: 10px 0;
+			padding: 10px 0;
 		}
 		
+		
+		
+		/* -- -- -- -- -- Fieldsets -- -- -- -- -- */
+		
 		fieldset {
-			font-size: .82em;
-			border: 1px solid #8da4b7;
-			margin-bottom: 10px;
-			padding: 0;
-			-webkit-border-radius: 5px;
-			-moz-border-radius: 5px;
+			border: 1px solid #ccc;
+			border-radius: 7px;
+			background-color: rgba(0, 0, 0, .015);
+			margin: 15px 0;
+			padding: 15px;
 		}
 		
-		legend {
-			color: #487397;
-			font-size: 1em;
-			margin: 0 10px;
-			padding: 0 4px;
+		fieldset legend {
+			color: #999;
+			padding: 0 7px 0;
 		}
 		
-		fieldset p, fieldset div {
-			margin: 0;
-			padding: 0 0 5px 0;
+		fieldset legend ~ p {
+			margin-bottom: 14px;
 		}
-					
-		fieldset ul {
-			list-style: none;
-			margin: 0;
-			padding: 0;
+		
+		fieldset p.description {
+			font-size: 90%;
+			color: #999;
 		}
-			
-		fieldset ul li {
-			padding-{if $__wcf->getLanguage()->getPageDirection() == 'ltr'}right{else}left{/if}: 3%;
-			float: {if $__wcf->getLanguage()->getPageDirection() == 'ltr'}left{else}right{/if};
-			width: 30%;
+		
+		fieldset > ul {
+			margin: 7px 0 21px 21px;
 		}
 		
-		form {
-			padding: 0;
-			margin: 0;
+		fieldset > ul li {
+			list-style-type: circle;
+		}
+		
+		
+		
+		/* -- -- -- -- -- Tabbed Content -- -- -- -- -- */
+		
+		/* Simple */
+		
+		dl {
+			margin-bottom: 7px;
+			clear: both;
+			position: relative;
+		}
+		
+		dl > dt {
+			text-align: right;
+			color: #69c;
+			margin-top: 5px; /* not so nice */
+			float: left;
+			width: 230px;
+		}
+		
+		dl > dt > label {
+			margin-top: 5px;
+			display: block;
+		}
+		
+		dl.disabled > dt {
+			color: #777;
+		}
+		
+		dl > dd {
+			margin-left: 250px;
+			padding-top: 5px;
+		}
+		
+		dl > dd > small {
+			font-size: 85%;
+			color: #999;
+			margin: 3px 0 7px;
+			display: block;
+		}
+		
+		/* Nested */
+		
+		dl > dd > fieldset {
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+		
+		dl > dd > fieldset > legend {
+			display: none;
+		}
+		
+		dl > dd > fieldset > dl > dt {
+			margin-right: 20px;
+			width: 150px;
 		}
 		
-		textarea, select, input[type="text"], input[type="password"] {
-			background-color: #fafafa;
+		dl > dd > fieldset > dl > dd {
+			margin-left: 0;
+		}
+		
+		dl > dd > fieldset > dl > dd > label {
+			display: block;
+		}
+		
+		
+		
+		/* -- -- -- -- -- Forms -- -- -- -- -- */
+		
+		/* Globals */
+		
+		label {
+			color: #69c;
+		}
+		
+		/* Structure */
+		
+		.formSubmit {
+			text-align: center;
+			margin-top: 15px;
+		}
+		
+		input[type='checkbox'] ~ small,
+		input[type='radio'] ~ small {
+			margin-top: 0;
+			margin-left: 21px;
+		}
+		
+		/* Form Elements */
+		
+		input[type='reset'],
+		input[type='submit'],
+		input[type='checkbox'],
+		input[type='radio'],
+		select {
+			cursor: pointer;
+		}
+		
+		input[type='text'],
+		input[type="search"],
+		input[type="email"],
+		input[type='password'] {
+			padding: 5px 3px;
+		}
+		
+		/* inputs normal */
+		input[type='text'],
+		input[type="search"],
+		input[type="email"],
+		input[type='password'],
+		textarea {
 			border-width: 1px;
 			border-style: solid;
-			border-color: #666 #999 #ccc #999;
-			background-image: url({if 'RELATIVE_WCF_DIR'|defined}{@' '|str_replace:'%20':RELATIVE_WCF_DIR}acp/images/setupInputBackground.png{else}install.php?showImage=setupInputBackground.png&tmpFilePrefix={@$tmpFilePrefix}{/if});
-			background-position: left top;
-			background-repeat: repeat-x;
-			min-height: 13px;
+			border-color: #999 #ccc #eee;
+			border-radius: 3px;
+			background-color: #fff;
+			
+			-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);
 		}
 		
-		textarea, input[type="text"], input[type="password"] {
-			width: 100%;
-		}
-	
-		textarea:focus, select:focus, input[type="text"]:focus, input[type="password"]:focus {
+		/* inputs hover */
+		input[type='text']:hover,
+		input[type="search"]:hover,
+		input[type="email"]:hover,
+		input[type='password']:hover,
+		textarea:hover {
+			border: 1px solid #fa2;
 			background-color: #fff9f4;
+			
+		}
+		
+		/* inputs active */
+		input[type='text']:active,
+		input[type="search"]:active,
+		input[type="email"]:active,
+		input[type='password']:active,
+		textarea:active,
+		input[type='text']:focus,
+		input[type="search"]:focus,
+		input[type="email"]:focus,
+		input[type='password']:focus,
+		textarea:focus {
 			border: 1px solid #fa2;
-			background-image: url({if 'RELATIVE_WCF_DIR'|defined}{@' '|str_replace:'%20':RELATIVE_WCF_DIR}acp/images/setupInputBackground.png{else}install.php?showImage=setupInputBackground.png&tmpFilePrefix={@$tmpFilePrefix}{/if});
-			background-repeat: repeat-x;
-			outline: 0;
+			background-color: #fff9f4;
+			outline: none;
+			
+			-webkit-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
+			-moz-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
+			-ms-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
+			-o-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
+			box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
+			
+			-webkit-transition: all .2s linear;
+			-moz-transition: all .2s linear;
+			-ms-transition: all .2s linear;
+			-o-transition: all .2s linear;
+			transition: all .2s linear;
 		}
 		
-		textarea, select, input[type="text"], input[type="password"] {
-			padding: 2px;
-			-webkit-border-radius: 3px;
-			-moz-border-radius: 3px;
+		/* Widths */
+		
+		textarea {
+			width: 95%;
 		}
-					
-		label {
-			padding-bottom: 2px;
-			display: block;
+		
+		.tiny {
+			width: 100px;
+		}
+		
+		.short {
+			width: 10%;
+		}
+		
+		.medium {
+			width: 50%;
 		}
 		
-		.setupIcon {
-			margin-{if $__wcf->getLanguage()->getPageDirection() == 'ltr'}right{else}left{/if}: 30px;
-			float: {if $__wcf->getLanguage()->getPageDirection() == 'ltr'}left{else}right{/if};
+		.long {
+			width: 95%;
 		}
 		
-		.nextButton {
-			float: {if $__wcf->getLanguage()->getPageDirection() == 'ltr'}right{else}left{/if};
+		.auto {
+			width: auto;
 		}
 		
-		.copyright {
-			font-size: .8em;
+		
+		/* -- -- -- -- -- Large Buttons -- -- -- -- -- */
+		
+		.largeButtons {
+			text-align: right;
 		}
 		
-		.left {
-			float: {if $__wcf->getLanguage()->getPageDirection() == 'ltr'}left{else}right{/if};
+		.largeButtons ul li {
+			display: inline;
 		}
 		
-		.left, .right {
+		.largeButtons ul li img {
+			/* Button Icons disabled for now, maybe we get rid oft them */
+			display: none;
+		}
+		
+		/* buttons normal */
+		input[type='reset'],
+		input[type='submit'],
+		.largeButtons ul li a {
+			font-size: 100%;
 			font-weight: bold;
-			display: block;
+			text-decoration: none;
+			text-shadow: 0 1px 0 #fff;
+			color: #999;
+			
+			border-width: 1px;
+			border-style: solid;
+			border-color: #ccc #bbb #aaa;
+			border-radius: 30px;
+			
+			background-color: #fefefe;
+			background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+			background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+			background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+			background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+			background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+			
+			margin: 0 3px;
+			padding: 5px 13px;
+			display: inline-block;
+			
+			-webkit-transition: all .1s linear;
+			-moz-transition: all .1s linear;
+			-ms-transition: all .1s linear;
+			-o-transition: all .1s linear;
+			transition: all .1s linear;
 		}
 		
-		.right {
-			margin-{if $__wcf->getLanguage()->getPageDirection() == 'ltr'}left{else}right{/if}: 48%;
-			width: 48%;
+		/* buttons hover */
+		input[type='reset']:hover,
+		input[type='submit']:hover,
+		.largeButtons ul li a:hover {
+			color: #666;
+			border-width: 1px;
+			border-style: solid;
+			border-color: #ffc053 #fa2 #fc9e07;
+			
+			background-color: #fff9f4;
+			background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+			background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+			background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+			background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+			background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
 		}
 		
-		.disabled {
-			color: #b2b2b2;
+		/* buttons active */
+		input[type='reset']:focus,
+		input[type='submit']:focus,
+		.largeButtons ul li a:focus,
+		input[type='reset']:active,
+		input[type='submit']:active,
+		.largeButtons ul li a:active{
+			color: #333;
+			border-width: 1px;
+			border-style: solid;
+			border-color: #fc9e07 #fa2 #ffc053;
+			
+			background-color: #fff9f4;
+			background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+			background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+			background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+			background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+			background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+			
+			-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+			-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+			-ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+			-o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+			box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
 		}
 		
-		.error {
+		/* default buttons glow */
+		@-webkit-keyframes glowLargeButtons {
+			0% {
+				-webkit-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
+			}
+			100% {
+				-webkit-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+			}
+		}
+		@-moz-keyframes glowLargeButtons {
+			0% {
+				-moz-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
+			}
+			100% {
+				-moz-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+			}
+		}
+		@-ms-keyframes glowLargeButtons {
+			0% {
+				-ms-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
+			}
+			100% {
+				-ms-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+			}
+		}
+		@-o-keyframes glowLargeButtons {
+			0% {
+				-o-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
+			}
+			100% {
+				-o-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+			}
+		}
+		@keyframes glowLargeButtons {
+			0% {
+				box-shadow: 0 0 13px rgba(102, 153, 204, .3);
+			}
+			100% {
+				box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+			}
+		}
+		
+		/* default buttons normal */
+		input[type='submit'],
+		.largeButtons ul li.default a {
+			color: #69c;
+			border-width: 1px;
+			border-style: solid;
+			border-color: #7aade0 #69c #5285b8;
+			
+			background-color: #e7f2fd;
+			background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+			background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+			background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+			background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+			background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+			
+			-webkit-box-shadow: 0 0 10px #369;
+			-moz-box-shadow: 0 0 10px #369;
+			-ms-box-shadow: 0 0 10px #369;
+			-o-box-shadow: 0 0 10px #369;
+			box-shadow: 0 0 10px #369;
+			
+			-webkit-animation-name: glowLargeButtons;
+			-webkit-animation-duration: 1s;
+			-webkit-animation-iteration-count: infinite;
+			-webkit-animation-direction: alternate;
+			-webkit-animation-timing-function: ease-in-out; 
+			
+			-moz-animation-name: glowLargeButtons;
+			-moz-animation-duration: 1s;
+			-moz-animation-iteration-count: infinite;
+			-moz-animation-direction: alternate;
+			-moz-animation-timing-function: ease-in-out;
+			
+			-ms-animation-name: glowLargeButtons;
+			-ms-animation-duration: 1s;
+			-ms-animation-iteration-count: infinite;
+			-ms-animation-direction: alternate;
+			-ms-animation-timing-function: ease-in-out; 
+			
+			-o-animation-name: glowLargeButtons;
+			-o-animation-duration: 1s;
+			-o-animation-iteration-count: infinite;
+			-o-animation-direction: alternate;
+			-o-animation-timing-function: ease-in-out;
+			
+			animation-name: glowLargeButtons;
+			animation-duration: 1s;
+			animation-iteration-count: infinite;
+			animation-direction: alternate;
+			animation-timing-function: ease-in-out;
+		}
+		
+		/* default buttons hover glow */
+		@-webkit-keyframes glowLargeButtonsHover {
+			0% {
+				-webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+			}
+			100% {
+				-webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+			}
+		}
+		@-moz-keyframes glowLargeButtonsHover {
+			0% {
+				-moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+			}
+			100% {
+				-moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+			}
+		}
+		@-ms-keyframes glowLargeButtonsHover {
+			0% {
+				-ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+			}
+			100% {
+				-ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+			}
+		}
+		@-o-keyframes glowLargeButtonsHover {
+			0% {
+				-o-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+			}
+			100% {
+				-o-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+			}
+		}
+		@keyframes glowLargeButtonsHover {
+			0% {
+				box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+			}
+			100% {
+				box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+			}
+		}
+		
+		/* default buttons hover */
+		input[type='submit']:hover,
+		.largeButtons ul li.default a:hover {
+			color: #666;
+			
+			-webkit-box-shadow: 0 0 10px #fa2;
+			-moz-box-shadow: 0 0 10px #fa2;
+			-ms-box-shadow: 0 0 10px #fa2;
+			-o-box-shadow: 0 0 10px #fa2;
+			box-shadow: 0 0 10px #fa2;
+			
+			-webkit-animation-name: glowLargeButtonsHover;
+			-webkit-animation-duration: 1s;
+			-webkit-animation-iteration-count: infinite;
+			-webkit-animation-direction: alternate;
+			-webkit-animation-timing-function: ease-in-out; 
+			
+			-moz-animation-name: glowLargeButtonsHover;
+			-moz-animation-duration: 1s;
+			-moz-animation-iteration-count: infinite;
+			-moz-animation-direction: alternate;
+			-moz-animation-timing-function: ease-in-out;
+			
+			-ms-animation-name: glowLargeButtonsHover;
+			-ms-animation-duration: 1s;
+			-ms-animation-iteration-count: infinite;
+			-ms-animation-direction: alternate;
+			-ms-animation-timing-function: ease-in-out; 
+			
+			-o-animation-name: glowLargeButtonsHover;
+			-o-animation-duration: 1s;
+			-o-animation-iteration-count: infinite;
+			-o-animation-direction: alternate;
+			-o-animation-timing-function: ease-in-out;
+			
+			animation-name: glowLargeButtonsHover;
+			animation-duration: 1s;
+			animation-iteration-count: infinite;
+			animation-direction: alternate;
+			animation-timing-function: ease-in-out;
+		}
+		
+		/* default buttons active glow */
+		@-webkit-keyframes glowDefaultLargeButtonsActive {
+			0% {
+				-webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+			}
+			100% {
+				-webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+			}
+		}
+		@-moz-keyframes glowDefaultLargeButtonsActive {
+			0% {
+				-moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+			}
+			100% {
+				-moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+			}
+		}
+		@-ms-keyframes glowDefaultLargeButtonsActive {
+			0% {
+				-ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+			}
+			100% {
+				-ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+			}
+		}
+		@-o-keyframes glowDefaultLargeButtonsActive {
+			0% {
+				-o-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+			}
+			100% {
+				-o-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+			}
+		}
+		@keyframes glowDefaultLargeButtonsActive {
+			0% {
+				box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+			}
+			100% {
+				box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+			}
+		}
+		
+		/* default buttons active */
+		input[type='submit']:focus,
+		.largeButtons ul li.default a:focus,
+		input[type='submit']:active,
+		.largeButtons ul li.default a:active {
+			color: #333;
+			
+			-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+			-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+			-ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+			-o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+			box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+			
+			-webkit-animation-name: glowDefaultLargeButtonsActive;
+			-webkit-animation-duration: 1s;
+			-webkit-animation-iteration-count: infinite;
+			-webkit-animation-direction: alternate;
+			-webkit-animation-timing-function: ease-in-out; 
+			
+			-moz-animation-name: glowDefaultLargeButtonsActive;
+			-moz-animation-duration: 1s;
+			-moz-animation-iteration-count: infinite;
+			-moz-animation-direction: alternate;
+			-moz-animation-timing-function: ease-in-out;
+			
+			-ms-animation-name: glowDefaultLargeButtonsActive;
+			-ms-animation-duration: 1s;
+			-ms-animation-iteration-count: infinite;
+			-ms-animation-direction: alternate;
+			-ms-animation-timing-function: ease-in-out; 
+			
+			-o-animation-name: glowDefaultLargeButtonsActive;
+			-o-animation-duration: 1s;
+			-o-animation-iteration-count: infinite;
+			-o-animation-direction: alternate;
+			-o-animation-timing-function: ease-in-out;
+			
+			animation-name: glowDefaultLargeButtonsActive;
+			animation-duration: 1s;
+			animation-iteration-count: infinite;
+			animation-direction: alternate;
+			animation-timing-function: ease-in-out;
+		}
+		
+		/* ToDo: Images deprecated? */
+		.largeButtons ul li a img {
+			margin: 0;
+			height: 24px;
+			width: 24px;
+			vertical-align: middle;
+		}
+		
+		
+		
+		/* -- -- -- -- -- Border -- -- -- -- -- */
+		
+		.border {
+			border: 1px solid #ccc;
+			border-radius: 5px;
+			margin: 15px 0 15px;
+		}
+		
+		
+		
+		/* -- -- -- -- -- System Notifications -- -- -- -- -- */
+		
+		p.info,
+		p.error,
+		p.success,
+		p.warning {
+			text-shadow: 0 1px 0 #fff;
+			line-height: 1.5;
+			border-radius: 7px;
+			margin-bottom: 14px;
+			padding: 7px 14px 7px 50px;
+			
+			-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .1);
+			-moz-box-shadow: 0 0 7px rgba(0, 0, 0, .1);
+			-ms-box-shadow: 0 0 7px rgba(0, 0, 0, .1);
+			-o-box-shadow: 0 0 7px rgba(0, 0, 0, .1);
+			box-shadow: 0 0 7px rgba(0, 0, 0, .1);
+			
+			-webkit-transition: all .1s linear;
+			-moz-transition: all .1s linear;
+			-ms-transition: all .1s linear;
+			-o-transition: all .1s linear;
+			transition: all .1s linear;
+		}
+		
+		p.info {
+			color: #68b;
+			border: 1px solid #9be;
+			background-color: #def;
+			background-image: url("../../icon/systemInfo.svg");
+			background-size: 24px;
+			background-position: 13px center;
+			background-repeat: no-repeat;
+		}
+		
+		p.success {
+			color: #090;
+			border: 1px solid #0c0;
+			background-color: #efe;
+			background-image: url("../../icon/systemSuccess.svg");
+			background-size: 24px;
+			background-position: 13px center;
+			background-repeat: no-repeat;
+		}
+		
+		p.warning {
+			color: #990;
+			border: 1px solid #cc0;
+			background-color: #ffd;
+			background-image: url("../../icon/systemWarning.svg");
+			background-size: 24px;
+			background-position: 13px center;
+			background-repeat: no-repeat;
+		}
+		
+		p.error {
 			color: #c00;
-			border: 1px solid #c00;
+			border: 1px solid #f99;
 			background-color: #fee;
-			padding: 4px 10px;
+			background-image: url("../../icon/systemError.svg");
+			background-size: 24px;
+			background-position: 13px center;
+			background-repeat: no-repeat;
 		}
 		
-		.errorField {
-			color: #c00;
+		
+		
+		/* -- -- -- -- -- Badges -- -- -- -- -- */
+		
+		/* Globals */
+		
+		.badge {
+			font-size: 85%;
+			text-shadow: none;
+			color: #666;
+			border: 1px solid #ccc;
+			border-radius: 13px;
+			background-color: #fff;
+			margin-right: -3px;
+			margin-left: 3px;
+			padding: 1px 5px 2px;
+			display: inline-block;
+			position: relative;
+			top: -1px;
+		}
+		
+		/* Types */
+		
+		.badgeInfo {
+			color: #68b;
+			border: 1px solid #9be;
+			background-color: #def;
+		}
+		
+		.badgeSuccess {
+			color: #090;
+			border: 1px solid #0c0;
+			background-color: #efe;
 		}
 		
-		.errorField .inputText, .errorField select, .errorField textarea {
-			border: 1px solid #c00;
+		.badgeWarning {
+			color: #990;
+			border: 1px solid #cc0;
+			background-color: #ffd;
+		}
+		
+		.badgeError {
+			color: #c00;
+			border: 1px solid #f99;
 			background-color: #fee;
 		}
-					
+		
 		/*]]>*/
 	</style>
-	<!-- /Stylesheets -->
 </head>
 
 <body>
 	<a id="top"></a>
-	<div class="page">
-		<!-- ToDo: new images & icons 
-		<img class="setupIcon" src="{if 'RELATIVE_WCF_DIR'|defined}{@RELATIVE_WCF_DIR}acp/images/setupIconXL.jpg{else}install.php?showImage=setupIconXL.jpg&amp;tmpFilePrefix={@$tmpFilePrefix}{/if}" alt="" />
-		-->
-		<h1>{lang}wcf.global.title{/lang}</h1>
-		<div class="progress">
-			<div class="progressBar" style="width: {@300*$progress/100|round:0}px"></div>
-			<div class="progressText">{lang}wcf.global.progressBar{/lang}</div>
+	<!-- HEADER -->
+	<header id="pageHeader" class="pageHeader">
+		<div>
+			<!-- no top menu -->
+			
+			<!-- logo -->
+			<div id="logo" class="logo">
+				<h1>Installation</h1>
+				<!-- ToDo: include the correct header image <img src="{@RELATIVE_WCF_DIR}acp/images/wcfLogoWhite.svg" width="300" height="58" alt="Product-logo" title="Installation" />-->
+				
+				<!-- no search area -->
+			</div>
+			<!-- /logo -->
+			
+			<!-- no main menu -->
+			
+			<!-- header navigation -->
+			<nav class="headerNavigation">
+				<div>
+					<ul>
+						<li id="toBottomLink" class="toBottomLink"><a href="#bottom" title="{lang}wcf.global.scrollDown{/lang}" class="balloonTooltip"><img src="{@RELATIVE_WCF_DIR}icon/toBottom.svg" alt="" /> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
+					</ul>
+				</div>
+			</nav>
+			<!-- /header navigation -->
 		</div>
-			
\ No newline at end of file
+	</header>
+	<!-- /HEADER -->
+	
+	<!-- MAIN -->
+	<div id="main" class="main">
+		<div>
+			
+			<!-- CONTENT -->
+			<section id="content" class="content">
+				
+				<header class="mainHeading setup">
+					{* ToDo: Installation Icon *}
+					<img src="{@RELATIVE_WCF_DIR}icon/cache1.svg" alt="" />
+					{* /Installation Icon *}
+					<hgroup>
+						<h1>{lang}wcf.global.title{/lang}</h1>
+						<h2>{lang}wcf.global.title.subtitle{/lang}</h2>
+						{* ToDo: Progress bar *}
+						<p><progress id="packageInstallationProgress" value="0" max="100" style="width: 300px;">0%</progress></p>
+					</hgroup>
+				</header>
diff --git a/wcfsetup/setup/template/stepConfigureDB.tpl b/wcfsetup/setup/template/stepConfigureDB.tpl
index ac3cc03d77..fd97abc9f4 100644
--- a/wcfsetup/setup/template/stepConfigureDB.tpl
+++ b/wcfsetup/setup/template/stepConfigureDB.tpl
@@ -1,67 +1,68 @@
 {include file='header'}
 
-<h2>{lang}wcf.global.configureDB{/lang}</h2>
-
-<p>{lang}wcf.global.configureDB.description{/lang}</p>
+<hgroup class="subHeading">
+	<h1>{lang}wcf.global.configureDB{/lang}</h1>
+	<h2>{lang}wcf.global.configureDB.description{/lang}</h2>
+</hgroup>
 
 {if $exception|isset}
 	<p class="error">{lang}wcf.global.configureDB.error{/lang}</p>
 {/if}
 
 {if $conflictedTables|isset}
-<p class="error">
-	{lang}wcf.global.configureDB.conflictedTables{/lang}
-</p>
+	<p class="error">{lang}wcf.global.configureDB.conflictedTables{/lang}</p>
 {/if}
 
 <form method="post" action="install.php">
 	<fieldset>
 		<legend>{lang}wcf.global.configureDB.accessData{/lang}</legend>
 		
-		<div>
-			<div>
-				<label for="dbClass">{lang}wcf.global.configureDB.class{/lang}</label>
+		<dl>
+			<dt><label for="dbClass">{lang}wcf.global.configureDB.class{/lang}</label></dt>
+			<dd>
 				<select id="dbClass" name="dbClass">
 					{foreach from=$availableDBClasses key=dbClassName item=availableDBClass}
 						<option value="{@$availableDBClass.class}"{if $availableDBClass.class == $dbClass} selected="selected"{/if}>{lang}wcf.global.configureDB.class.{@$dbClassName}{/lang}</option>
 					{/foreach}
 				</select>
-			</div>
-
-			<div>
-				<label for="dbHost">{lang}wcf.global.configureDB.host{/lang}</label>
-				<input type="text" id="dbHost" name="dbHost" value="{$dbHost}" class="long" />
-			</div>
-			
-			<div>
-				<label for="dbUser">{lang}wcf.global.configureDB.user{/lang}</label>
-				<input type="text" id="dbUser" name="dbUser" value="{$dbUser}" class="long" />
-			</div>
-			
-			<div>
-				<label for="dbPassword">{lang}wcf.global.configureDB.password{/lang}</label>
-				<input type="password" id="dbPassword" name="dbPassword" value="{$dbPassword}" class="long" />
-			</div>
-			
-			<div>
-				<label for="dbName">{lang}wcf.global.configureDB.database{/lang}</label>
-				<input type="text" id="dbName" name="dbName" value="{$dbName}" class="long"  />
-			</div>
-			
-			<div>
-				<label for="dbNumber">{lang}wcf.global.configureDB.number{/lang}</label>
-				<input type="text" id="dbNumber" name="dbNumber" value="{$dbNumber}" class="long" />
-			</div>
-			
-			{if $conflictedTables|isset}
-			<div>
-				<label><input type="checkbox" name="overwriteTables" value="1" /> {lang}wcf.global.configureDB.conflictedTables.overwrite{/lang}</label>
-			</div>
-			{/if}
-		</div>
+			</dd>
+		</dl>
+		
+		<dl>
+			<dt><label for="dbHost">{lang}wcf.global.configureDB.host{/lang}</label></dt>
+			<dd><input type="text" id="dbHost" name="dbHost" value="{$dbHost}" class="long" /></dd>
+		</dl>
+		
+		<dl>
+			<dt><label for="dbUser">{lang}wcf.global.configureDB.user{/lang}</label></dt>
+			<dd><input type="text" id="dbUser" name="dbUser" value="{$dbUser}" class="long" /></dd>
+		</dl>
+		
+		<dl>
+			<dt><label for="dbPassword">{lang}wcf.global.configureDB.password{/lang}</label></dt>
+			<dd><input type="password" id="dbPassword" name="dbPassword" value="{$dbPassword}" class="long" /></dd>
+		</dl>
+		
+		<dl>
+			<dt><label for="dbName">{lang}wcf.global.configureDB.database{/lang}</label></dt>
+			<dd><input type="text" id="dbName" name="dbName" value="{$dbName}" class="long"  /></dd>
+		</dl>
+		
+		<dl>
+			<dt><label for="dbNumber">{lang}wcf.global.configureDB.number{/lang}</label></dt>
+			<dd><input type="text" id="dbNumber" name="dbNumber" value="{$dbNumber}" class="long" /></dd>
+		</dl>
+		
+		{if $conflictedTables|isset}
+			<dl>
+				<dt></dt>
+				<dd><label><input type="checkbox" name="overwriteTables" value="1" /> {lang}wcf.global.configureDB.conflictedTables.overwrite{/lang}</label></dd>
+			</dl>
+		{/if}
+		
 	</fieldset>
 	
-	<div class="nextButton">
+	<div class="formSubmit">
 		<input type="submit" value="{lang}wcf.global.button.next{/lang}" accesskey="s" />
 		<input type="hidden" name="send" value="1" />
 		<input type="hidden" name="step" value="{@$nextStep}" />
diff --git a/wcfsetup/setup/template/stepCreateUser.tpl b/wcfsetup/setup/template/stepCreateUser.tpl
index e17fb263f3..ae1412e9ea 100644
--- a/wcfsetup/setup/template/stepCreateUser.tpl
+++ b/wcfsetup/setup/template/stepCreateUser.tpl
@@ -1,75 +1,84 @@
 {include file='header'}
 
-<h2>{lang}wcf.global.createUser{/lang}</h2>
-
-<p>{lang}wcf.global.createUser.description{/lang}</p>
+<hgroup class="subHeading">
+	<h1>{lang}wcf.global.createUser{/lang}</h1>
+	<h2>{lang}wcf.global.createUser.description{/lang}</h2>
+</hgroup>
 
 {if $errorField}
-<p class="error">{lang}wcf.global.createUser.error{/lang}</p>
+	<p class="error">{lang}wcf.global.createUser.error{/lang}</p>
 {/if}
 
 <form method="post" action="install.php">
 	<fieldset>
 		<legend>{lang}wcf.global.createUser.data{/lang}</legend>
 		
-		<div class="inner">
-			<div{if $errorField == 'username'} class="errorField"{/if}>
-				<label for="username">{lang}wcf.global.createUser.username{/lang}</label>
-				<input type="text" class="inputText" id="username" name="username" value="{$username}" style="width: 100%;" />
+		<dl{if $errorField == 'username'} class="errorField"{/if}>
+			<dt><label for="username">{lang}wcf.global.createUser.username{/lang}</label></dt>
+			<dd>
+				<input type="text" id="username" name="username" value="{$username}" class="long" />
 				{if $errorField == 'username'}
-					<p>
+					<small>
 						{if $errorType == 'empty'}{lang}wcf.global.createUser.error.empty{/lang}{/if}
 						{if $errorType == 'notValid'}{lang}wcf.global.createUser.error.username.notValid{/lang}{/if}
-					</p>
+					</small>
 				{/if}
-			</div>
-			
-			<div{if $errorField == 'email'} class="errorField"{/if}>
-				<label for="email">{lang}wcf.global.createUser.email{/lang}</label>
-				<input type="text" class="inputText" id="email" name="email" value="{$email}" style="width: 100%;" />
+			</dd>
+		</dl>
+		
+		<dl{if $errorField == 'email'} class="errorField"{/if}>
+			<dt><label for="email">{lang}wcf.global.createUser.email{/lang}</label></dt>
+			<dd>
+				<input type="text" id="email" name="email" value="{$email}" class="long" />
 				{if $errorField == 'email'}
-					<p>
+					<small>
 						{if $errorType == 'empty'}{lang}wcf.global.createUser.error.empty{/lang}{/if}
 						{if $errorType == 'notValid'}{lang}wcf.global.createUser.error.email.notValid{/lang}{/if}
-					</p>
+					</small>
 				{/if}
-			</div>
-			
-			<div{if $errorField == 'confirmEmail'} class="errorField"{/if}>
-				<label for="confirmEmail">{lang}wcf.global.createUser.confirmEmail{/lang}</label>
-				<input type="text" class="inputText" id="confirmEmail" name="confirmEmail" value="{$confirmEmail}" style="width: 100%;" />
+			</dd>
+		</dl>
+		
+		<dl{if $errorField == 'confirmEmail'} class="errorField"{/if}>
+			<dt><label for="confirmEmail">{lang}wcf.global.createUser.confirmEmail{/lang}</label></dt>
+			<dd>
+				<input type="text" id="confirmEmail" name="confirmEmail" value="{$confirmEmail}" class="long" />
 				{if $errorField == 'confirmEmail'}
-					<p>
+					<small>
 						{if $errorType == 'notEqual'}{lang}wcf.global.createUser.error.confirmEmail.notEqual{/lang}{/if}
-					</p>
+					</small>
 				{/if}
-			</div>
-			
-			<div{if $errorField == 'password'} class="errorField"{/if}>
-				<label for="password">{lang}wcf.global.createUser.password{/lang}</label>
-				<input type="password" class="inputText" id="password" name="password" value="{$password}" style="width: 100%;" />
+			</dd>
+		</dl>
+		
+		<dl{if $errorField == 'password'} class="errorField"{/if}>
+			<dt><label for="password">{lang}wcf.global.createUser.password{/lang}</label></dt>
+			<dd>
+				<input type="password" id="password" name="password" value="{$password}" class="long" />
 				{if $errorField == 'password'}
-					<p>
+					<small>
 						{if $errorType == 'empty'}{lang}wcf.global.createUser.error.empty{/lang}{/if}
-					</p>
+					</small>
 				{/if}
-			</div>
-			
-			<div{if $errorField == 'confirmPassword'} class="errorField"{/if}>
-				<label for="confirmPassword">{lang}wcf.global.createUser.confirmPassword{/lang}</label>
-				<input type="password" class="inputText" id="confirmPassword" name="confirmPassword" value="{$confirmPassword}" style="width: 100%;" />
+			</dd>
+		</dl>
+		
+		<dl{if $errorField == 'confirmPassword'} class="errorField"{/if}>
+			<dt><label for="confirmPassword">{lang}wcf.global.createUser.confirmPassword{/lang}</label></dt>
+			<dd>
+				<input type="password" id="confirmPassword" name="confirmPassword" value="{$confirmPassword}" class="long" />
 				{if $errorField == 'confirmPassword'}
-					<p>
+					<small>
 						{if $errorType == 'notEqual'}{lang}wcf.global.createUser.error.confirmPassword.notEqual{/lang}{/if}
-					</p>
+					</small>
 				{/if}
-			</div>
-			
-		</div>
+			</dd>
+		</dl>
+		
 	</fieldset>
 	
-	<div class="nextButton">
-		<input type="submit" accesskey="s" value="{lang}wcf.global.button.next{/lang}" />
+	<div class="formSubmit">
+		<input type="submit" value="{lang}wcf.global.button.next{/lang}" accesskey="s" />
 		<input type="hidden" name="send" value="1" />
 		<input type="hidden" name="step" value="{@$nextStep}" />
 		<input type="hidden" name="tmpFilePrefix" value="{@$tmpFilePrefix}" />
@@ -79,4 +88,4 @@
 	</div>
 </form>
 
-{include file='footer'}
\ No newline at end of file
+{include file='footer'}
diff --git a/wcfsetup/setup/template/stepInstallPackages.tpl b/wcfsetup/setup/template/stepInstallPackages.tpl
index d23279c0f0..872f1cd28b 100644
--- a/wcfsetup/setup/template/stepInstallPackages.tpl
+++ b/wcfsetup/setup/template/stepInstallPackages.tpl
@@ -1,14 +1,13 @@
 {include file='header'}
 
-<h2>{lang}wcf.global.next{/lang}</h2>
-
-<p>{lang}wcf.global.next.description{/lang}</p>
-
-<hr />
+<hgroup class="subHeading">
+	<h1>{lang}wcf.global.next{/lang}</h1>
+	<h2>{lang}wcf.global.next.description{/lang}</h2>
+</hgroup>
 
 <form method="get" action="{@RELATIVE_WCF_DIR}acp/index.php">
-	<div class="nextButton">
-		<input type="submit" name="nextButton" accesskey="s" value="{lang}wcf.global.button.next{/lang}" />
+	<div class="formSubmit">
+		<input type="submit" name="nextButton" value="{lang}wcf.global.button.next{/lang}" accesskey="s" />
 		{@SID_INPUT_TAG}
 	</div>
 </form>
@@ -22,4 +21,4 @@
 	//]]>
 </script>
 
-{include file='footer'}
\ No newline at end of file
+{include file='footer'}
diff --git a/wcfsetup/setup/template/stepNext.tpl b/wcfsetup/setup/template/stepNext.tpl
index e3c5372a63..a54c53ef22 100644
--- a/wcfsetup/setup/template/stepNext.tpl
+++ b/wcfsetup/setup/template/stepNext.tpl
@@ -1,14 +1,13 @@
 {include file='header'}
 
-<h2>{lang}wcf.global.next{/lang}</h2>
-
-<p>{lang}wcf.global.next.description{/lang}</p>
-
-<hr />
+<hgroup class="subHeading">
+	<h1>{lang}wcf.global.next{/lang}</h1>
+	<h2>{lang}wcf.global.next.description{/lang}</h2>
+</hgroup>
 
 <form method="post" action="install.php?step={@$nextStep}">
-	<div class="nextButton">
-		<input type="submit" name="nextButton" accesskey="s" value="{lang}wcf.global.button.next{/lang}" />
+	<div class="formSubmit">
+		<input type="submit" name="nextButton" value="{lang}wcf.global.button.next{/lang}" accesskey="s" />
 		<input type="hidden" name="tmpFilePrefix" value="{@$tmpFilePrefix}" />
 		<input type="hidden" name="languageCode" value="{@$languageCode}" />
 		<input type="hidden" name="wcfDir" value="{$wcfDir}" />
@@ -29,4 +28,4 @@
 	//]]>
 </script>
 
-{include file='footer'}
\ No newline at end of file
+{include file='footer'}
diff --git a/wcfsetup/setup/template/stepSearchWcfDir.tpl b/wcfsetup/setup/template/stepSearchWcfDir.tpl
index 099d905a98..690aa2f060 100644
--- a/wcfsetup/setup/template/stepSearchWcfDir.tpl
+++ b/wcfsetup/setup/template/stepSearchWcfDir.tpl
@@ -1,37 +1,35 @@
 {include file='header'}
 
-<h2>{lang}wcf.global.wcfDir{/lang}</h2>
-
-<p>{lang}wcf.global.wcfDir.description{/lang}</p>
+<hgroup class="subHeading">
+	<h1>{lang}wcf.global.wcfDir{/lang}</h1>
+	<h2>{lang}wcf.global.wcfDir.description{/lang}</h2>
+</hgroup>
 
 {if $foundDirectory}
 	<p>{lang}wcf.global.wcfDir.foundDirectory{/lang}</p>
 {/if}
 
 {if $exception|isset}
-	<p class="error">
-		{lang}wcf.global.wcfDir.error{/lang}
-	</p>
+	<p class="error">{lang}wcf.global.wcfDir.error{/lang}</p>
 {/if}
 
 <form method="post" action="install.php">
 	<fieldset>
 		<legend>{lang}wcf.global.wcfDir.dir{/lang}</legend>
 		
-		<div class="inner">
-			<div>
-				<label for="wcfDir">{lang}wcf.global.wcfDir.dir.description{/lang}</label>
-				<input type="text" class="inputText" id="wcfDir" name="wcfDir" value="{$wcfDir}" style="width: 100%;" />
-			</div>
-			<div>
-				<label for="wcfUrl">{lang}wcf.global.wcfDir.url.description{/lang}</label>
-				<input type="text" class="inputText" id="wcfUrl" name="wcfUrl" value="" style="width: 100%;" readonly="readonly" />
-			</div>
-		</div>
+		<dl>
+			<dt><label for="wcfDir">{lang}wcf.global.wcfDir.dir.description{/lang}</label></dt>
+			<dd><input type="text" id="wcfDir" name="wcfDir" value="{$wcfDir}" class="long" /></dd>
+		</dl>
+		<dl>
+			<dt><label for="wcfUrl">{lang}wcf.global.wcfDir.url.description{/lang}</label></dt>
+			<dd><input type="text" id="wcfUrl" name="wcfUrl" value="" readonly="readonly" class="long" /></dd>
+		</dl>
+		
 	</fieldset>
 	
-	<div class="nextButton">
-		<input type="submit" accesskey="s" value="{lang}wcf.global.button.next{/lang}" />
+	<div class="formSubmit">
+		<input type="submit" value="{lang}wcf.global.button.next{/lang}" accesskey="s" />
 		<input type="hidden" name="step" value="{@$nextStep}" />
 		<input type="hidden" name="tmpFilePrefix" value="{@$tmpFilePrefix}" />
 		<input type="hidden" name="languageCode" value="{@$languageCode}" />
@@ -114,4 +112,4 @@
 	//]]>
 </script>
 
-{include file='footer'}
\ No newline at end of file
+{include file='footer'}
diff --git a/wcfsetup/setup/template/stepSelectLanguages.tpl b/wcfsetup/setup/template/stepSelectLanguages.tpl
index c3cad3ad54..bec53763e1 100644
--- a/wcfsetup/setup/template/stepSelectLanguages.tpl
+++ b/wcfsetup/setup/template/stepSelectLanguages.tpl
@@ -1,8 +1,9 @@
 {include file='header'}
 
-<h2>{lang}wcf.global.languages{/lang}</h2>
-
-<p>{lang}wcf.global.languages.description{/lang}</p>
+<hgroup class="subHeading">
+	<h1>{lang}wcf.global.languages{/lang}</h1>
+	<h2>{lang}wcf.global.languages.description{/lang}</h2>
+</hgroup>
 
 {if $errorField}
 	<p class="error">{if $errorType == 'empty'}{lang}wcf.global.languages.error.empty{/lang}{/if}</p>
@@ -11,19 +12,18 @@
 <form method="post" action="install.php">
 	<fieldset>
 		<legend>{lang}wcf.global.languages.languages{/lang}</legend>
-		
-		<div class="inner">
-			<ul class="languages">
+			
+			<dl class="languages">
 				{foreach from=$languages key=language item=languageName}
-					<li><label><input type="checkbox" name="selectedLanguages[]" value="{@$language}" {if $language|in_array:$selectedLanguages}checked="checked" {/if}/> {@$languageName}</label></li>
+					<dt></dt>
+					<dd><label><input type="checkbox" name="selectedLanguages[]" value="{@$language}" {if $language|in_array:$selectedLanguages}checked="checked" {/if}/> {@$languageName}</label></dd>
 				{/foreach}
-			</ul>
-			<br style="clear: both" />
-		</div>
+			</dl>
+		
 	</fieldset>
 	
-	<div class="nextButton">
-		<input type="submit" accesskey="s" value="{lang}wcf.global.button.next{/lang}" />
+	<div class="formSumbit">
+		<input type="submit" value="{lang}wcf.global.button.next{/lang}" accesskey="s" />
 		<input type="hidden" name="send" value="1" />
 		<input type="hidden" name="step" value="{@$nextStep}" />
 		<input type="hidden" name="tmpFilePrefix" value="{@$tmpFilePrefix}" />
@@ -33,4 +33,4 @@
 	</div>
 </form>
 
-{include file='footer'}
\ No newline at end of file
+{include file='footer'}
diff --git a/wcfsetup/setup/template/stepSelectSetupLanguage.tpl b/wcfsetup/setup/template/stepSelectSetupLanguage.tpl
index 4e383fc35f..6d813fa240 100644
--- a/wcfsetup/setup/template/stepSelectSetupLanguage.tpl
+++ b/wcfsetup/setup/template/stepSelectSetupLanguage.tpl
@@ -1,30 +1,25 @@
 {include file='header'}
 
-<h2>{lang}wcf.global.welcome{/lang}</h2>
-
-<p>{lang}wcf.global.welcome.description{/lang}</p>
+<hgroup class="subHeading">
+	<h1>{lang}wcf.global.welcome{/lang}</h1>
+	<h2>{lang}wcf.global.welcome.description{/lang}</h2>
+</hgroup>
 
 <form method="post" action="install.php">
 	<fieldset>
 		<legend>{lang}wcf.global.welcome.language{/lang}</legend>
 		
-		<div class="inner">
-			<div>
-				<label for="languageCode">{lang}wcf.global.welcome.language.description{/lang}</label>
-				{htmlOptions name="languageCode" id="languageCode" options=$availableLanguages selected=$languageCode disableEncoding=true}
-				
-				<input type="submit" value="{lang}wcf.global.welcome.language.change{/lang}" />
-				<input type="hidden" name="step" value="selectSetupLanguage" />
-				<input type="hidden" name="tmpFilePrefix" value="{@$tmpFilePrefix}" />
-			</div>
-		
-		</div>
+		<label for="languageCode">{lang}wcf.global.welcome.language.description{/lang}</label>
+		{htmlOptions name="languageCode" id="languageCode" options=$availableLanguages selected=$languageCode disableEncoding=true}
+		<input type="submit" value="{lang}wcf.global.welcome.language.change{/lang}" />
+		<input type="hidden" name="step" value="selectSetupLanguage" />
+		<input type="hidden" name="tmpFilePrefix" value="{@$tmpFilePrefix}" />
 		
 	</fieldset>
 </form>
 
 <form method="post" action="install.php">
-	<div class="nextButton">
+	<div class="formSubmit">
 		<input type="submit" accesskey="s" value="{lang}wcf.global.button.next{/lang}" />
 		<input type="hidden" name="step" value="{@$nextStep}" />
 		<input type="hidden" name="tmpFilePrefix" value="{@$tmpFilePrefix}" />
@@ -33,4 +28,4 @@
 	</div>
 </form>
 
-{include file='footer'}
\ No newline at end of file
+{include file='footer'}
diff --git a/wcfsetup/setup/template/stepShowLicense.tpl b/wcfsetup/setup/template/stepShowLicense.tpl
index 6afce3c065..94bed6263b 100644
--- a/wcfsetup/setup/template/stepShowLicense.tpl
+++ b/wcfsetup/setup/template/stepShowLicense.tpl
@@ -1,23 +1,22 @@
 {include file='header'}
 
-<h2>{lang}wcf.global.license{/lang}</h2>
-
-<p>{lang}wcf.global.license.description{/lang}</p>
+<hgroup class="subHeading">
+	<h1>{lang}wcf.global.license{/lang}</h1>
+	<h2>{lang}wcf.global.license.description{/lang}</h2>
+</hgroup>
 
 {if $missingAcception|isset}
-<p class="error">
-	{lang}wcf.global.license.missingAcception{/lang}
-</p>
+	<p class="error">{lang}wcf.global.license.missingAcception{/lang}</p>
 {/if}
 
 <form method="post" action="install.php">
 	<div>
-		<textarea rows="20" cols="40" style="width: 100%" readonly="readonly">{$license}</textarea>
+		<textarea rows="20" cols="40" readonly="readonly">{$license}</textarea>
 		<p><label{if $missingAcception|isset} class="errorField"{/if}><input type="checkbox" name="accepted" value="1" /> {lang}wcf.global.license.accept.description{/lang}</label></p>
 	</div>
-	<hr />
-	<div class="nextButton">
-		<input type="submit" accesskey="s" value="{lang}wcf.global.button.next{/lang}" />
+	
+	<div class="formSubmit">
+		<input type="submit" value="{lang}wcf.global.button.next{/lang}" accesskey="s" />
 		<input type="hidden" name="send" value="1" />
 		<input type="hidden" name="step" value="{@$nextStep}" />
 		<input type="hidden" name="tmpFilePrefix" value="{@$tmpFilePrefix}" />
@@ -26,4 +25,4 @@
 	</div>
 </form>
 
-{include file='footer'}
\ No newline at end of file
+{include file='footer'}
diff --git a/wcfsetup/setup/template/stepShowSystemRequirements.tpl b/wcfsetup/setup/template/stepShowSystemRequirements.tpl
index 90a371ab16..8b5f3d9c46 100644
--- a/wcfsetup/setup/template/stepShowSystemRequirements.tpl
+++ b/wcfsetup/setup/template/stepShowSystemRequirements.tpl
@@ -1,75 +1,92 @@
 {include file='header'}
 
-<h2>{lang}wcf.global.systemRequirements{/lang}</h2>
-
-<p>{lang}wcf.global.systemRequirements.description{/lang}</p>
+<hgroup class="subHeading">
+	<h1>{lang}wcf.global.systemRequirements{/lang}</h1>
+	<h2>{lang}wcf.global.systemRequirements.description{/lang}</h2>
+</hgroup>
 
 <fieldset>
 	<legend>{lang}wcf.global.systemRequirements.required{/lang}</legend>
-	<div class="inner">
-	
-		<div>
-			<h3>{lang}wcf.global.systemRequirements.php{/lang}</h3>
-			<span class="left">{lang}wcf.global.systemRequirements.element.required{/lang} 5.3.0</span>
-			<span class="right" style="color: {if !$system.phpVersion.result}red{else}green{/if}">{lang}wcf.global.systemRequirements.element.yours{/lang} {$system.phpVersion.value}</span>
-			{if !$system.phpVersion.result}<div>{lang}wcf.global.systemRequirements.php.description{/lang}</div>{/if}
-		</div>
-		<hr />
 		
-		<div>
-			<h3>{lang}wcf.global.systemRequirements.sql{/lang}</h3>
-			<span class="left">{lang}wcf.global.systemRequirements.element.required{/lang} {lang}wcf.global.systemRequirements.active{/lang}</span>
-			<span class="right" style="color: {if !$system.sql.result}red{else}green{/if}">{lang}wcf.global.systemRequirements.element.yours{/lang} 
-			{if !$system.sql.result}{lang}wcf.global.systemRequirements.sql.notFound{/lang}{else}
-				{implode from=$system.sql.value item=$sqlType glue=', '}{lang}wcf.global.configureDB.class.{@$sqlType}{/lang}{/implode}
-			{/if}</span>
-			{if !$system.sql.result}<div>{lang}wcf.global.systemRequirements.sql.description{/lang}</div>{/if}
-		</div>
-		<hr />
+		<fieldset>
+			<legend>{lang}wcf.global.systemRequirements.php{/lang}</legend>
+			<dl>
+				<dt>{lang}wcf.global.systemRequirements.element.required{/lang} 5.3.0</dt>
+				<dd>
+					<span class="{if !$system.phpVersion.result}badgeWarning{else}badgeSuccess{/if}">{lang}wcf.global.systemRequirements.element.yours{/lang} {$system.phpVersion.value}</span>
+					{if !$system.phpVersion.result}<small>{lang}wcf.global.systemRequirements.php.description{/lang}</small>{/if}
+				</dd>
+			</dl>
+		</fieldset>
 		
-		<div>
-			<h3>{lang}wcf.global.systemRequirements.mbString{/lang}</h3>
-			<span class="left">{lang}wcf.global.systemRequirements.element.required{/lang} {lang}wcf.global.systemRequirements.active{/lang}</span>
-			<span class="right" style="color: {if !$system.mbString.result}red{else}green{/if}">{lang}wcf.global.systemRequirements.element.yours{/lang} {if !$system.mbString.result}{lang}wcf.global.systemRequirements.notActive{/lang}{else}{lang}wcf.global.systemRequirements.active{/lang}{/if}</span>
-			{if !$system.mbString.result}<div>{lang}wcf.global.systemRequirements.mbString.description{/lang}</div>{/if}
-		</div>
-		<hr />
+		<fieldset>
+			<legend>{lang}wcf.global.systemRequirements.sql{/lang}</legend>
+			<dl>
+				<dt>{lang}wcf.global.systemRequirements.element.required{/lang} {lang}wcf.global.systemRequirements.active{/lang}</dt>
+				<dd>
+					<span class="{if !$system.sql.result}badgeWarning{else}badgeSuccess{/if}">{lang}wcf.global.systemRequirements.element.yours{/lang} 
+					{if !$system.sql.result}{lang}wcf.global.systemRequirements.sql.notFound{/lang}{else}
+						{implode from=$system.sql.value item=$sqlType glue=', '}{lang}wcf.global.configureDB.class.{@$sqlType}{/lang}{/implode}
+					{/if}</span>
+					{if !$system.sql.result}<small>{lang}wcf.global.systemRequirements.sql.description{/lang}</small>{/if}
+				</dd>
+			</dl>
+		</fieldset>
 		
-		<div>
-			<h3>{lang}wcf.global.systemRequirements.safeMode{/lang}</h3>
-			<span class="left">{lang}wcf.global.systemRequirements.element.required{/lang} {lang}wcf.global.systemRequirements.notActive{/lang}</span>
-			<span class="right" style="color: {if !$system.safeMode.result}red{else}green{/if}">{lang}wcf.global.systemRequirements.element.yours{/lang} {if !$system.safeMode.result}{lang}wcf.global.systemRequirements.active{/lang}{else}{lang}wcf.global.systemRequirements.notActive{/lang}{/if}</span>
-			{if !$system.safeMode.result}<div>{lang}wcf.global.systemRequirements.safeMode.description{/lang}</div>{/if}
-		</div>
+		<fieldset>
+			<legend>{lang}wcf.global.systemRequirements.mbString{/lang}</legend>
+			<dl>
+				<dt>{lang}wcf.global.systemRequirements.element.required{/lang} {lang}wcf.global.systemRequirements.active{/lang}</dt>
+				<dd>
+					<span class="badge {if !$system.mbString.result}badgeWarning{else}badgeSuccess{/if}">{lang}wcf.global.systemRequirements.element.yours{/lang} {if !$system.mbString.result}{lang}wcf.global.systemRequirements.notActive{/lang}{else}{lang}wcf.global.systemRequirements.active{/lang}{/if}</span>{if !$system.mbString.result}<small>{lang}wcf.global.systemRequirements.mbString.description{/lang}</small>{/if}
+				</dd>
+			</dl>
+			
+		</fieldset>
+		
+		<fieldset>
+			<legend>{lang}wcf.global.systemRequirements.safeMode{/lang}</legend>
+			<dl>
+				<dt>{lang}wcf.global.systemRequirements.element.required{/lang} {lang}wcf.global.systemRequirements.notActive{/lang}</dt>
+				<dd>
+					<span class="badge {if !$system.safeMode.result}badgeWarning{else}badgeSuccess{/if}">{lang}wcf.global.systemRequirements.element.yours{/lang} {if !$system.safeMode.result}{lang}wcf.global.systemRequirements.active{/lang}{else}{lang}wcf.global.systemRequirements.notActive{/lang}{/if}</span>
+					{if !$system.safeMode.result}<small>{lang}wcf.global.systemRequirements.safeMode.description{/lang}</small>{/if}
+				</dd>
+			</dl>
+		</fieldset>
 		
-	</div>
 </fieldset>
 
 <fieldset>
 	<legend>{lang}wcf.global.systemRequirements.recommended{/lang}</legend>
-	<div class="inner">
-	
-		<div>
-			<h3>{lang}wcf.global.systemRequirements.uploadMaxFilesize{/lang}</h3>
-			<span class="left">{lang}wcf.global.systemRequirements.element.recommended{/lang} > 0</span>
-			<span class="right" style="color: {if !$system.uploadMaxFilesize.result}orange{else}green{/if}">{lang}wcf.global.systemRequirements.element.yours{/lang} {$system.uploadMaxFilesize.value}</span>
-			{if !$system.uploadMaxFilesize.result}<div>{lang}wcf.global.systemRequirements.uploadMaxFilesize.description{/lang}</div>{/if}
-		</div>
-		<hr />
 		
-		<div>
-			<h3>{lang}wcf.global.systemRequirements.gdLib{/lang}</h3>
-			<span class="left">{lang}wcf.global.systemRequirements.element.recommended{/lang} 2.0.0</span>
-			<span class="right" style="color: {if !$system.gdLib.result}orange{else}green{/if}">{lang}wcf.global.systemRequirements.element.yours{/lang} {$system.gdLib.value}</span>
-			{if !$system.gdLib.result}<div>{lang}wcf.global.systemRequirements.gdLib.description{/lang}</div>{/if}
-		</div>
+		<fieldset>
+			<legend>{lang}wcf.global.systemRequirements.uploadMaxFilesize{/lang}</legend>
+			<dl>
+				<dt>{lang}wcf.global.systemRequirements.element.recommended{/lang} > 0</dt>
+				<dd>
+					<span class="badge {if !$system.uploadMaxFilesize.result}badgeWarning{else}badgeSuccess{/if}">{lang}wcf.global.systemRequirements.element.yours{/lang} {$system.uploadMaxFilesize.value}</span>
+					{if !$system.uploadMaxFilesize.result}<small>{lang}wcf.global.systemRequirements.uploadMaxFilesize.description{/lang}</small>{/if}
+				</dd>
+			</dl>
+		</fieldset>
+		
+		<fieldset>
+			<legend>{lang}wcf.global.systemRequirements.gdLib{/lang}</legend>
+			<dl>
+				<dt>{lang}wcf.global.systemRequirements.element.recommended{/lang} 2.0.0</dt>
+				<dd>
+					<span class="badge {if !$system.gdLib.result}badgeWarning{else}badgeSuccess{/if}">{lang}wcf.global.systemRequirements.element.yours{/lang} {$system.gdLib.value}</span>
+					{if !$system.gdLib.result}<small>{lang}wcf.global.systemRequirements.gdLib.description{/lang}</small>{/if}
+				</dd>
+			</dl>
+		</fieldset>
 		
-	</div>
 </fieldset>
 
 <form method="post" action="install.php">	
-	<div class="nextButton">
-		<input type="submit" accesskey="s" value="{lang}wcf.global.button.next{/lang}" {if !$system.phpVersion.result || !$system.sql.result || !$system.mbString.result || !$system.safeMode.result} disabled="disabled"{/if}/>
+	<div class="formSubmit">
+		<input type="submit" value="{lang}wcf.global.button.next{/lang}"{if !$system.phpVersion.result || !$system.sql.result || !$system.mbString.result || !$system.safeMode.result} disabled="disabled"{/if} accesskey="s"/>
 		<input type="hidden" name="step" value="{@$nextStep}" />
 		<input type="hidden" name="tmpFilePrefix" value="{@$tmpFilePrefix}" />
 		<input type="hidden" name="languageCode" value="{@$languageCode}" />
@@ -77,4 +94,4 @@
 	</div>
 </form>
 
-{include file='footer'}
\ No newline at end of file
+{include file='footer'}
-- 
2.20.1