Issue #1661814 follow-up by mcjim: Fixed Regression: Seven's responsive...

Issue #1661814 follow-up by mcjim: Fixed Regression: Seven's responsive maintenance mode template makes installer look crappy, lost step display.

core/themes/seven/maintenance-page.tpl.php

@@ -32,9 +32,14 @@
 
   <div id="page">
 
-    <?php if ($logo): ?>
-      <img id="logo" src="<?php print $logo ?>" alt="<?php print $site_name ?>" />
-    <?php endif; ?>
+    <div id="sidebar-first" class="sidebar">
+      <?php if ($logo): ?>
+        <img id="logo" src="<?php print $logo ?>" alt="<?php print $site_name ?>" />
+      <?php endif; ?>
+      <?php if ($sidebar_first): ?>
+        <?php print $sidebar_first ?>
+      <?php endif; ?>
+    </div>
 
     <div id="content" class="clearfix">
       <?php if ($messages): ?>

core/themes/seven/style-rtl.css

@@ -169,11 +169,11 @@ div.admin-options div.form-item {
 }
 
 /* Maintenance theming */
-body.in-maintenance #logo {
+body.in-maintenance #sidebar-first {
   float: right;
-  padding: 0 0 0 20px;
 }
 body.in-maintenance #content {
+  float: left;
   padding-left: 20px;
   padding-right: 0;
 }

core/themes/seven/style.css

@@ -786,24 +786,29 @@ div.admin-options div.form-item {
 }
 
 /* Maintenance theming */
-body.in-maintenance #logo {
-  float: left;
-  padding: 0 20px 0 0;
+body.in-maintenance #sidebar-first {
+  float: left; /* LTR */
+  max-width: 200px;
+  width: 25%;
 }
 body.in-maintenance #content {
-  padding-right: 20px; /* LTR */
+  float: right; /* LTR */
+  max-width: 550px;
   clear: none;
+  width: 72%;
 }
 body.in-maintenance #page {
   overflow: auto;
-  max-width: 730px;
+  max-width: 770px;
   margin: 0 auto;
-  padding: 2em 20px 40px;
+  padding-top: 2em;
+  width: 90%;
 }
 body.in-maintenance #branding h1 {
-  max-width: 730px;
+  max-width: 770px;
   margin: 0 auto;
   float: none;
+  width: 90%;
 }
 body.in-maintenance .form-radios .form-type-radio {
   padding: 2px 0;
@@ -820,6 +825,14 @@ body.in-maintenance #logo {
   margin-bottom: 1.5em;
   max-width: 180px;
 }
+@media all and (max-width: 768px) {
+  body.in-maintenance #sidebar-first,
+  body.in-maintenance #content {
+    float: left;
+    max-width: none;
+    width: auto;
+  }
+}
 ol.task-list {
   margin-left: 0; /* LTR */
   list-style-type: none;
@@ -838,6 +851,11 @@ ol.task-list li.done {
   background: transparent url(images/task-check.png) no-repeat 0 50%;
   color: green;
 }
+@media all and (max-width: 768px) {
+  ol.task-list li {
+    float: left;
+  }
+}
 
 /* Overlay theming */
 .overlay #branding {