diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css
index 09645c8..99babb1 100644
--- a/core/themes/seven/style.css
+++ b/core/themes/seven/style.css
@@ -856,87 +856,173 @@ div.admin-options div.form-item {
   border: none;
 }
 
-/* Maintenance theming */
-body.in-maintenance #sidebar-first {
-  float: left; /* LTR */
-  max-width: 200px;
-  width: 25%;
-}
-[dir="rtl"] body.in-maintenance #sidebar-first {
-  float: right;
-}
-body.in-maintenance #content {
-  float: right; /* LTR */
-  clear: none;
-  width: 72%;
-}
-[dir="rtl"] body.in-maintenance #content {
-  float: left;
+/**
+ * Maintenance theming.
+ */
+.maintenance-background {
+  background-color: #e0e0d8;
 }
-body.in-maintenance #page {
-  max-width: 770px;
-  margin: 0 auto;
-  padding-top: 2em;
-  width: 90%;
+.in-maintenance {
+  background-color: transparent;
 }
-body.in-maintenance #branding h1 {
-  max-width: 770px;
-  margin: 0 auto;
-  float: none;
-  width: 90%;
+.in-maintenance .name-and-slogan h1 {
+  font-size: 2em;
+  line-height: 1.2em;
+  color: #0074bd;
 }
-body.in-maintenance .form-radios .form-type-radio {
-  padding: 2px 0;
+.in-maintenance .l-container {
+  background: #fff;
+  width: auto;
+  margin-left: 1.25em;
+  margin-right: 1.25em;
 }
-body.in-maintenance div.form-item:after {
+.in-maintenance .l-container:after { /* no reason for a clearfix in the markup */
   content: "";
-  display: none;
-  clear: none;
-}
-body.in-maintenance .form-submit {
-  display: block;
-}
-body.in-maintenance #logo {
-  margin-bottom: 1.5em;
-  max-width: 180px;
+  display: table;
+  clear: both;
 }
-@media all and (max-width: 768px) {
-  body.in-maintenance #sidebar-first,
-  body.in-maintenance #content {
-    float: none;
-    max-width: none;
-    width: auto;
+@media all and (max-width: 48em) { /* 768px */
+  .in-maintenance .l-container {
+    margin-top: 1.25em;
+    padding: 10px 20px 0;
+  }
+  .in-maintenance .page-title {
+    margin: 0 0 1.45em 0;
   }
 }
-.task-list {
-  margin-left: 0; /* LTR */
-  list-style-type: none;
-  list-style-image: none;
-}
-[dir="rtl"] .task-list {
-  margin-right: 0;
-}
-.task-list li {
-  padding: 0.5em 1em 0.5em 20px; /* LTR */
-  color: #adadad;
-}
-[dir="rtl"] .task-list li {
-  padding: 0.5em 20px 0.5em 1em;
-}
-.task-list li.active {
-  background: transparent url(images/task-item.png) no-repeat 3px 50%; /* LTR */
-  padding: 0.5em 1em 0.5em 20px; /* LTR */
-  color: #000;
+
+@media all and (min-width: 48em) { /* 768px */
+  html {
+    display: table;
+  }
+  .in-maintenance {
+    display: table-cell;
+    padding: 1em 0;
+    vertical-align: middle;
+  }
+  html, .in-maintenance {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .in-maintenance .l-container {
+    margin: 0 auto;
+    max-width: 770px;
+    width: 75%;
+    border-radius: 5px;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+    padding: 20px 0 40px 0;
+  }
+
+  /* Positioning sidebar & content */
+  .in-maintenance [role="main"] {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    clear: none;
+    float: left;
+    padding-left: 3.85em;
+    padding-right: 3.85em;
+    width: 65%;
+  }
+  [dir="rtl"] .in-maintenance [role="main"] {
+    float: right;
+  }
+  ul {
+    padding: 15px;
+    margin: 0.25em 0;
+  }
+  .in-maintenance .l-sidebar-first {
+    float: left;
+    width: 35%;
+  }
+  [dir="rtl"] .in-maintenance .l-sidebar-first {
+    float: right;
+  }
+
+  /* Margins for sitename */
+  .in-maintenance .name-and-slogan h1 {
+    margin: 0.75em 0 0.75em 1.9em; /* LTR */
+  }
+  [dir="rtl"] .in-maintenance .name-and-slogan h1 {
+    margin: 0.75em 1.9em 0.75em 0;
+  }
 }
-[dir="rtl"] .task-list li.active {
-  background: transparent url(images/task-item-rtl.png) no-repeat right 50%;
-  padding: 0.5em 20px 0.5em 1em;
+
+/* Task list & step indicator */
+@media all and (max-width: 48em) { /* 768px */
+  .in-maintenance header[role="banner"] {
+    position: relative;
+  }
+  .in-maintenance .step-indicator {
+    display: block;
+    font-size: 1.385em;
+    position: absolute;
+    top: 0.2em;
+    right: 0.5em;
+  }
+  [dir="rtl"] .in-maintenance .step-indicator {
+    left: 2em;
+    right: auto;
+  }
+  .in-maintenance .task-list {
+    display: none;
+  }
 }
-.task-list li.done {
-  background: transparent url(images/task-check.png) no-repeat 0 50%;
-  color: green;
+
+@media all and (min-width: 48em) { /* 768px */
+  .in-maintenance .step-indicator {
+    display: none;
+  }
+  .in-maintenance .task-list {
+    margin-left: 0; /* LTR */
+    list-style-type: none;
+    list-style-image: none;
+    padding-left: 0; /* LTR */
+    padding-bottom: 1em;
+  }
+  [dir="rtl"] .in-maintenance .task-list {
+    margin-right: 0;
+    padding-right: 0;
+  }
+  .in-maintenance .task-list li {
+    padding: 0.5em 1em 0.5em 3.85em; /* LTR */
+    color: #1a1a1a;
+  }
+  [dir="rtl"] .in-maintenance .task-list li {
+    padding: 0.5em 1em 0.5em 1em;
+  }
+  .in-maintenance .task-list .active {
+    background: #ebeae4;
+    position: relative;
+    font-weight: normal;
+  }
+  .in-maintenance .task-list .active:after {
+    left: 100%; /* LTR */
+    border: solid transparent;
+    border-color: rgba(235, 234, 228, 0);
+    border-left-color: #ebeae4; /* LTR */
+    border-width: 1.35em;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    top: 50%;
+    margin-top: -1.32em;
+  }
+  [dir="rtl"] .in-maintenance .task-list .active:after {
+    left: auto;
+    right: 100%;
+    border-left-color: transparent;
+    border-right-color: #ebeae4;
+  }
+  .in-maintenance .task-list .done {
+    color: #adadad;
+  }
 }
 
+
 /* Shortcut theming */
 .add-or-remove-shortcuts a:focus span.text,
 .add-or-remove-shortcuts a:hover span.text {
diff --git a/core/themes/seven/templates/maintenance-page.html.twig b/core/themes/seven/templates/maintenance-page.html.twig
index 9fb5522..5068476 100644
--- a/core/themes/seven/templates/maintenance-page.html.twig
+++ b/core/themes/seven/templates/maintenance-page.html.twig
@@ -12,7 +12,7 @@
  */
 #}
 <!DOCTYPE html>
-<html{{ html_attributes }}>
+<html{{ html_attributes }} class="maintenance-background">
   <head>
     <title>{{ head_title }}</title>
     {{ head }}
@@ -20,37 +20,51 @@
     {{ scripts }}
   </head>
   <body{{ attributes }}>
-
+  <div class="l-container">
   {{ page_top }}
 
-  <header id="branding">
-    {% if title %}<h1 class="page-title">{{ title }}</h1>{% endif %}
-  </header>
 
-  <div id="page">
-    <div id="sidebar-first" class="sidebar">
-      {% if logo %}
-        <img id="logo" src="{{ logo }}" alt="{{ site_name }}" />
+    <header role="banner">
+      {% if site_name or site_slogan %}
+        <div class="name-and-slogan">
+          {% if site_name %}
+            <h1>{{ site_name }}</h1>
+          {% endif %}
+          {% if site_slogan %}
+            <div class="site-slogan">{{ site_slogan }}</div>
+          {% endif %}
+        </div>{# /.name-and-slogan #}
       {% endif %}
-      {{ sidebar_first }}
-    </div>
+    </header>
+
+    {% if sidebar_first %}
+      <aside class="l-sidebar-first" role="complementary">
+        {{ sidebar_first }}
+      </aside>{# /.l-sidebar-first #}
+    {% endif %}
 
-    <main id="content" class="clearfix">
+    <main role="main">
       {% if messages %}
-        <div id="console">{{ messages }}</div>
+        <div id="console" class="console">{{ messages }}</div>
+      {% endif %}
+      {% if title %}
+        <h1>{{ title }}</h1>
       {% endif %}
       {% if help %}
-        <div id="help">
+        <div id="help" class="help">
           {{ help }}
         </div>
       {% endif %}
       {{ content }}
     </main>
-  </div>
 
-  <footer role="contentinfo">
-    {{ page_bottom }}
-  </footer>
+    {% if footer %}
+      <footer role="contentinfo">
+        {{ footer }}
+      </footer>
+    {% endif %}
+
+  </div>{# /.l-container #}
 
   </body>
 </html>
diff --git a/core/update.php b/core/update.php
index 527a703..fe293ef 100644
--- a/core/update.php
+++ b/core/update.php
@@ -209,7 +209,7 @@ function update_info_page() {
   $output .= "</ol>\n";
   $output .= "<p>When you have performed the steps above, you may proceed.</p>\n";
   $form_action = check_url(drupal_current_script_url(array('op' => 'selection', 'token' => $token)));
-  $output .= '<form method="post" action="' . $form_action . '"><p><input type="submit" value="Continue" class="form-submit button button-primary" /></p></form>';
+  $output .= '<form method="post" action="' . $form_action . '"><p><input type="submit" value="Continue" class="button button--primary form-submit" /></p></form>';
   $output .= "\n";
   return $output;
 }