diff --git a/core/modules/system/templates/install-page.html.twig b/core/modules/system/templates/install-page.html.twig
index 55a6709..726f9e2 100644
--- a/core/modules/system/templates/install-page.html.twig
+++ b/core/modules/system/templates/install-page.html.twig
@@ -4,7 +4,8 @@
  * Default theme implementation to display a Drupal installation page.
  *
  * All the available variables are mirrored in html.html.twig and
- * page.html.twig. Some may be blank but they are provided for consistency.
+ * page.html.twig.
+ * Some may be blank but they are provided for consistency.
  *
  * @see template_preprocess_install_page()
  *
@@ -14,65 +15,71 @@
 <!DOCTYPE html>
 <html lang="{{ language.langcode }}" dir="{{ language.dir }}" class="install-background">
 <head>
-  <title>{{ head_title }}</title>
   {{ head }}
+  <title>{{ head_title }}</title>
   {{ styles }}
   {{ scripts }}
 </head>
+<!-- theme stark -->
 <body class="install-page">
-  <div class="vertically-centered">
-    <div class="vertically-centered__inner">
-      <div id="page">
-        <div id="header">
+<div class="vertically-centered"><div class="vertically-centered__inner">
+
+  <div class="l-container clearfix"> {# @todo:remove clearfix #}
+
+    <header role="banner">
+
+     {% if site_name or site_slogan %}
+        <div class="name-and-slogan">
           {% if site_name %}
-            <h1 id="site-name">
-              <span>{{ site_name }}</span>
-            </h1>
+              <h1>{{ site_name }}</h1>
           {% endif %}
 
           {% if site_slogan %}
-            <div id="site-slogan">{{ site_slogan }}</div>
+            <div class="site-slogan">{{ site_slogan }}</div>
           {% endif %}
+        </div>{# /.name-and-slogan #}
+      {% endif %}
+    </header>
 
-          {% if header %}
-            <div id="header-region">
-              {{ header }}
-            </div>
-          {% endif %}
-
-        </div> <!-- /header -->
+    <div role="main">
+      {% if title %}
+        <h1>{{ title }}</h1>
+      {% endif %}
 
-        <div id="container" class="clearfix">
+      {% if messages %}
+        <div class="l-messages">
+          {{ messages }}
+        </div>
+      {% endif %}
+      {{ content }}
 
-          {% if sidebar_first %}
-            <div id="sidebar-first" class="column sidebar">
-              {{ sidebar_first }}
-            </div> <!-- /sidebar-first -->
-          {% endif %}
+      {% if sidebar_second %}
+        <aside class="l-sidebar-second" role="complementary">
+          {{ sidebar_second }}
+        </aside>{# /.l-sidebar-second  #}
+      {% endif %}
+    </div> {# role=main #}
 
-          <div id="content" class="column">
-              {% if title %}<h1 class="title" id="page-title">{{ title }}</h1>{% endif %}
-              {% if messages %}{{ messages }}{% endif %}
-              <div id="content-content" class="clearfix">
-                {{ content }}
-          </div> <!-- /content -->
+    {% if sidebar_first %}
+      <aside class="l-sidebar-first" role="complementary">
+        {{ sidebar_first }}
+      </aside>{# /.l-sidebar-first #}
+    {% endif %}
 
-          {% if sidebar_second %}
-            <div id="sidebar-second" class="column sidebar">
-              {{ sidebar_second }}
-            </div> <!-- /sidebar-second -->
-          {% endif %}
+    {% if sidebar_second %}
+      <aside class="l-sidebar-second" role="complementary">
+        {{ sidebar_second }}
+      </aside>{# /.l-sidebar-second #}
+    {% endif %}
 
-        </div> <!-- /container -->
+    {% if footer %}
+      <footer role="contentinfo">
+        {{ footer }}
+      </footer>
+    {% endif %}
 
-        <div id="footer-wrapper">
-          <div id="footer">
-            {% if footer %}{{ footer }}{% endif %}
-          </div> <!-- /footer -->
-        </div> <!-- /footer-wrapper -->
+  </div>{# /.l-container #}
 
-      </div> <!-- /page -->
-    </div>
-  </div>
+</div></div> {# ./vertical-centered #}
 </body>
 </html>
diff --git a/core/modules/system/templates/maintenance-page.html.twig b/core/modules/system/templates/maintenance-page.html.twig
index 03255e9..71510a1 100644
--- a/core/modules/system/templates/maintenance-page.html.twig
+++ b/core/modules/system/templates/maintenance-page.html.twig
@@ -12,80 +12,78 @@
  * @ingroup themeable
  */
 #}
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{{ language.langcode }}" lang="{{ language.langcode }}" dir="{{ language.dir }}">
+<!DOCTYPE html>
+<html lang="{{ language.langcode }}" dir="{{ language.dir }}" class="install-background">
 <head>
+  {{ head}}
   <title>{{ head_title }}</title>
-  {{ head }}
   {{ styles }}
   {{ scripts }}
 </head>
-<body class="{{ attributes.class }}">
-  <div id="page">
-    <div id="header">
-      <div id="logo-title">
-        {% if logo %}
-          <a href="{{ base_path }}" title="{{ 'Home'|t }}" rel="home" id="logo">
-            <img src="{{ logo }}" alt="{{ 'Home'|t }}" />
-          </a>
-        {% endif %}
-
-        <div id="name-and-slogan">
-          {% if site_name %}
-            <h1 id="site-name">
-              <a href="{{ base_path }}" title="{{ 'Home'|t }}" rel="home"><span>{{ site_name }}</span></a>
-            </h1>
-          {% endif %}
-          {% if site_slogan %}
-            <div id="site-slogan">{{ site_slogan }}</div>
-          {% endif %}
-        </div> <!-- /name-and-slogan -->
-      </div> <!-- /logo-title -->
+<!-- theme stark -->
+<!-- <body class=""> -->
+<body class="install-page {{ attributes.class }}">
+<div class="vertically-centered"><div class="vertically-centered__inner">
 
-      {% if header %}
-        <div id="header-region">
-          {{ header }}
-        </div>
-      {% endif %}
+<div class="l-container clearfix"> {# @todo:remove clearfix #}
 
-    </div> <!-- /header -->
+  <header role="banner">
+{#
+    {% if logo %}
+      <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">
+        <img src="{{ logo }}" alt="{{ 'Home'|t }}"/>
+      </a>
+    {% endif %}
+#}
+    {% if site_name or site_slogan %}
+      <div class="name-and-slogan">
+        {% if site_name %}
+         <h1>
+           <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home" class="site-name">{{ site_name }}</a>
+         </h1>
+        {% endif %}
 
-    <div id="container" class="clearfix">
+        {% if site_slogan %}
+          <div class="site-slogan">{{ site_slogan }}</div>
+        {% endif %}
+      </div>{# /.name-and-slogan #}
+    {% endif %}
 
-      {% if sidebar_first %}
-        <div id="sidebar-first" class="column sidebar">
-          {{ sidebar_first }}
-        </div> <!-- /sidebar-first -->
-      {% endif %}
+  </header>
 
-      <div id="main" class="column"><div id="main-squeeze">
+  <div role="main">
+    {% if title %}
+      <h1>{{ title }}</h1>
+    {% endif %}
 
-        <div id="content">
-          {% if title %}<h1 class="title" id="page-title">{{ title }}</h1>{% endif %}
-          {% if messages %}{{ messages }}{% endif %}
-          <div id="content-content" class="clearfix">
-            {{ content }}
-          </div> <!-- /content-content -->
-        </div> <!-- /content -->
+    {% if messages %}
+      <div class="l-messages">
+        {{ messages }}
+      </div>
+    {% endif %}
 
-      </div></div> <!-- /main-squeeze /main -->
+    {{ content }}
+  </div>
 
-      {% if sidebar_second %}
-        <div id="sidebar-second" class="column sidebar">
-          {{ sidebar_second }}
-        </div> <!-- /sidebar-second -->
-      {% endif %}
+  {% if page.sidebar_first %}
+    <aside class="l-sidebar-first" role="complementary">
+      {{ page.sidebar_first }}
+    </aside>{# /.l-sidebar-first #}
+  {% endif %}
 
-    </div> <!-- /container -->
+  {% if page.sidebar_second %}
+    <aside class="l-sidebar-second" role="complementary">
+      {{ page.sidebar_second }}
+    </aside>{# /.l-sidebar-second  #}
+  {% endif %}
 
-    <div id="footer-wrapper">
-      <div id="footer">
-        {% if footer %}{{ footer }}{% endif %}
-      </div> <!-- /footer -->
-    </div> <!-- /footer-wrapper -->
+  {% if page.footer %}
+    <footer role="contentinfo">
+      {{ page.footer }}
+    </footer>
+  {% endif %}
 
-  </div> <!-- /page -->
+</div>{# /.l-container #}
 
 </body>
 </html>
diff --git a/core/themes/seven/install-page.css b/core/themes/seven/install-page.css
index a4761fb..d2349ec 100644
--- a/core/themes/seven/install-page.css
+++ b/core/themes/seven/install-page.css
@@ -2,9 +2,8 @@
  * @file
  * Installation styling.
  *
- * Unfortunately we have to make our styling quite strong, to override the
- * .in-maintenance styling.
  */
+
 .install-background {
   background-color: #1275b2;
   background-image:
@@ -23,11 +22,18 @@
   background-position: left top, 50% 50%;
   min-height: 100%;
 }
-body.install-page {
+.install-page {
   background: none;
 }
 @media all and (min-width: 48em) { /* 768px */
-  html, body {
+
+/**
+ * Layout
+ *
+ */
+
+/* Center the install page  */
+  html, .install-page {
     height: 100%;
     margin: 0;
   }
@@ -42,7 +48,8 @@ body.install-page {
     width: 100%;
     vertical-align: middle;
   }
-  body.install-page #page {
+  .install-page .l-container {
+    background: #fff;
     border-radius: 5px;
     width: 75%;
     margin: 0 auto;
@@ -50,60 +57,66 @@ body.install-page {
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
     padding: 1em 2em 1em 0; /* LTR */
   }
-  [dir="rtl"] body.install-page #page {
+  [dir="rtl"] .install-page .l-container {
     padding: 1em 0 1em 2em;
   }
-  body.install-page #content {
+/* Positioning  sidebar & content */
+  .install-page [role="main"] {
+    /* dont we have this on as a * selector */
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     clear: none;
-    float: left;
+    float: right;
     padding-left: 50px; /* LTR */
     width: 65%;
   }
-  [dir="rtl"] body.install-page #content {
-    float: right;
+  [dir="rtl"] .install-page [role="main"] {
+    float: left;
     padding-left: 0;
     padding-right: 50px;
   }
-  ul{
-    padding: 15px;
-    margin: 0.25em 0 0.25em 0;
-  }
-  body.install-page #sidebar-first {
+
+  .install-page .l-sidebar-first {
     float: left;
     width: 35%;
   }
-  [dir="rtl"] body.install-page #sidebar-first {
+  [dir="rtl"] .install-page .l-sidebar-first {
     float: right;
   }
 }
-body.install-page #site-name {
+/* */
+.install-page [role="banner"] h1 {
   font-size: 2em;
   line-height: 1.2em;
   color: #0074bd;
   margin: 0.75em 0 0.75em 50px; /* LTR */
 }
-[dir="rtl"] body.install-page #site-name {
+[dir="rtl"] .install-page [role="banner"] h1 {
   margin: 0.75em 50px 0.75em 0;
 }
-body.install-page #page-title {
+
+.install-page h1 {
   background: transparent;
   padding-top: 0;
 }
+
 @media all and  (max-width: 48em) { /* 768px */
-  body.install-page #site-name {
+  .install-page .name-and-slogan {
     margin-left: 0;
   }
-  body.install-page {
+  .install-page {
     padding: 0;
   }
-  body.install-page #page {
+  .install-page .l-container {
     width: auto;
     padding: 10px 20px 0;
   }
 }
+
+/**
+ * Task list
+ */
 .install-task-list {
   margin-left: 0; /* LTR */
   list-style-type: none;
@@ -122,12 +135,12 @@ body.install-page #page-title {
 [dir="rtl"] .install-task-list li {
   padding: 0.5em 20px 0.5em 1em;
 }
-.install-task-list li.active {
+.install-task-list .active {
   background: #ebeae4;
   position: relative;
   font-weight: normal;
 }
-.install-task-list li.active:after {
+.install-task-list .active:after {
   left: 100%; /* LTR */
   border: solid transparent;
   border-color: rgba(235, 234, 228, 0);
@@ -141,13 +154,13 @@ body.install-page #page-title {
   top: 50%;
   margin-top: -17px;
 }
-[dir="rtl"] .install-task-list li.active:after {
+[dir="rtl"] .install-task-list .active:after {
   left: auto;
   right: 100%;
   border-left-color: transparent;
   border-right-color: #ebeae4;
 }
-.install-task-list li.done {
+.install-task-list .done {
   color: #adadad;
 }
 .step-indicator {
@@ -157,10 +170,6 @@ body.install-page #page-title {
   .install-task-list {
     display: none;
   }
-  body.in-maintenance #branding h1 {
-    float: left; /* LTR */
-    width: auto;
-  }
   .step-indicator {
     display: block;
     font-size: 1.385em;
@@ -173,17 +182,21 @@ body.install-page #page-title {
   right: auto;
   }
 }
+
+/**
+ * Password widget
+ */
 .install-page .password-parent {
   width: auto;
 }
-.install-page div.form-item div.password-suggestions {
+.install-page .form-item .password-suggestions {
   float: none;
   width: auto;
 }
 @media all and (max-width: 975px) and (min-width: 48em) {
   .install-page .password-strength,
   .install-page .confirm-parent,
-  .install-page div.password-confirm {
+  .install-page .password-confirm {
     float: none;
     width: auto;
   }
diff --git a/core/modules/system/templates/install-page.html.twig b/core/modules/system/templates/install-page.html.twig
index 726f9e2..c2d312e 100644
--- a/core/modules/system/templates/install-page.html.twig
+++ b/core/modules/system/templates/install-page.html.twig
@@ -24,7 +24,7 @@
 <body class="install-page">
 <div class="vertically-centered"><div class="vertically-centered__inner">
 
-  <div class="l-container clearfix"> {# @todo:remove clearfix #}
+  <div class="l-container clearfix">
 
     <header role="banner">
 
diff --git a/core/modules/system/templates/maintenance-page.html.twig b/core/modules/system/templates/maintenance-page.html.twig
index 71510a1..ccbd35e 100644
--- a/core/modules/system/templates/maintenance-page.html.twig
+++ b/core/modules/system/templates/maintenance-page.html.twig
@@ -20,21 +20,17 @@
   {{ styles }}
   {{ scripts }}
 </head>
-<!-- theme stark -->
-<!-- <body class=""> -->
-<body class="install-page {{ attributes.class }}">
-<div class="vertically-centered"><div class="vertically-centered__inner">
+<body class="{{ attributes.class }}">
 
-<div class="l-container clearfix"> {# @todo:remove clearfix #}
+<div class="l-container">
 
   <header role="banner">
-{#
-    {% if logo %}
+      {% if logo %}
       <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">
         <img src="{{ logo }}" alt="{{ 'Home'|t }}"/>
       </a>
     {% endif %}
-#}
+
     {% if site_name or site_slogan %}
       <div class="name-and-slogan">
         {% if site_name %}
