diff --git a/core/themes/bartik/css/base/elements.css b/core/themes/bartik/css/base/elements.css
index ead25e9..c7132e8 100644
--- a/core/themes/bartik/css/base/elements.css
+++ b/core/themes/bartik/css/base/elements.css
@@ -1,6 +1,9 @@
 /* ---------- Overall Specifications ---------- */
-
+html {
+  height: 100%;
+}
 body {
+  min-height: 100%;
   line-height: 1.5;
   font-size: 87.5%;
   word-wrap: break-word;
diff --git a/core/themes/bartik/css/colors.css b/core/themes/bartik/css/colors.css
index 6ba3064..20cc66e 100644
--- a/core/themes/bartik/css/colors.css
+++ b/core/themes/bartik/css/colors.css
@@ -2,6 +2,7 @@

 body {
   color: #3b3b3b;
+  background: #292929;
 }
 .comment .comment-arrow {
   border-color: #ffffff;
@@ -42,7 +43,6 @@ a:active,
   background-color: #f6f6f2;
   border-color: #f9f9f9;
 }
-#page-wrapper,
 #footer-wrapper {
   background: #292929;
 }
diff --git a/core/themes/bartik/css/components/content.css b/core/themes/bartik/css/components/content.css
index e236da7..5d0159b 100644
--- a/core/themes/bartik/css/components/content.css
+++ b/core/themes/bartik/css/components/content.css
@@ -8,6 +8,46 @@ h1#page-title {
   font-size: 2em;
   line-height: 1;
 }
+.main-content .section {
+  padding: 0 15px;
+}
+@media all and (min-width: 851px) {
+  .main-content {
+    float: left; /* LTR */
+    position: relative;
+  }
+  [dir="rtl"] .main-content {
+    float: right;
+  }
+  .layout-two-sidebars .main-content {
+    margin-left: 25%;
+    margin-right: 25%;
+    width: 50%;
+  }
+  .layout-one-sidebar .main-content {
+    width: 75%;
+  }
+  .layout-no-sidebars .main-content {
+    width: 100%;
+  }
+  .layout-sidebar-first .main-content {
+    margin-left: 25%; /* LTR */
+    margin-right: 0; /* LTR */
+  }
+  [dir="rtl"] .layout-sidebar-first .main-content {
+    margin-left: 0;
+    margin-right: 25%;
+  }
+  .layout-sidebar-second .main-content {
+    margin-right: 25%; /* LTR */
+    margin-left: 0; /* LTR */
+  }
+  [dir="rtl"] .layout-sidebar-second .main-content {
+    margin-right: 0;
+    margin-left: 25%;
+  }
+}
+
 #content h2 {
   margin-bottom: 2px;
   font-size: 1.429em;
diff --git a/core/themes/bartik/css/components/footer.css b/core/themes/bartik/css/components/footer.css
index 094181a..bed3eea 100644
--- a/core/themes/bartik/css/components/footer.css
+++ b/core/themes/bartik/css/components/footer.css
@@ -1,5 +1,44 @@
 /* ------------------ Footer ------------------ */
-
+.footer-wrapper {
+  padding: 35px 15px 30px;
+}
+.region-footer-firstcolumn,
+.region-footer-secondcolumn,
+.region-footer-thirdcolumn,
+.region-footer-fourthcolumn {
+  box-sizing: border-box;
+  padding: 0 10px;
+}
+@media all and (min-width: 560px) {
+  .region-footer-firstcolumn,
+  .region-footer-secondcolumn,
+  .region-footer-thirdcolumn,
+  .region-footer-fourthcolumn {
+    float: left; /* LTR */
+    position: relative;
+    width: 50%;
+  }
+  [dir="rtl"] .region-footer-firstcolumn,
+  [dir="rtl"] .region-footer-secondcolumn,
+  [dir="rtl"] .region-footer-thirdcolumn,
+  [dir="rtl"] .region-footer-fourthcolumn {
+    float: right;
+  }
+  .region-footer-thirdcolumn {
+    clear: both;
+  }
+}
+@media all and (min-width: 851px) {
+  .region-footer-firstcolumn,
+  .region-footer-secondcolumn,
+  .region-footer-thirdcolumn,
+  .region-footer-fourthcolumn {
+    width: 25%;
+  }
+  .region-footer-thirdcolumn {
+    clear: none;
+  }
+}
 #footer-wrapper .block .content {
   color: #c0c0c0;
   color: rgba(255, 255, 255, 0.65);
diff --git a/core/themes/bartik/css/components/header.css b/core/themes/bartik/css/components/header.css
index 6bd700d..b1206b8 100644
--- a/core/themes/bartik/css/components/header.css
+++ b/core/themes/bartik/css/components/header.css
@@ -1,4 +1,14 @@
 /* ------------------ Header ------------------ */
+.header .section {
+  position: relative;
+}
+.region-header {
+  float: right; /* LTR */
+  margin: .5em 5px .75em;
+}
+[dir="rtl"] .region-header {
+  float: left;
+}
 #logo,
 .site-logo {
   float: left; /* LTR */
diff --git a/core/themes/bartik/css/components/sidebar.css b/core/themes/bartik/css/components/sidebar.css
index 7f1d5d8..f23ec5b 100644
--- a/core/themes/bartik/css/components/sidebar.css
+++ b/core/themes/bartik/css/components/sidebar.css
@@ -1,7 +1,43 @@
 /* ------------------ Sidebar ----------------- */

+@media all and (min-width: 560px) {
+  .sidebar {
+    float: left; /* LTR */
+    position: relative;
+    width: 50%;
+  }
+  [dir="rtl"] .sidebar {
+    float: right;
+  }
+  .layout-one-sidebar .sidebar {
+    width: 100%;
+  }
+}
+@media all and (min-width: 851px) {
+  .layout-one-sidebar .sidebar {
+    width: 25%;
+  }
+  .sidebar--first {
+    width: 25%;
+    margin-left: -100%; /* LTR */
+  }
+  [dir="rtl"] .sidebar--first {
+    margin-right: -100%;
+    margin-left: 0;
+  }
+  .sidebar--second {
+    width: 25%;
+    margin-left: -25%; /* LTR */
+    clear: none;
+  }
+  [dir="rtl"] .sidebar--second {
+    margin-right: -25%;
+    margin-left: 0;
+  }
+}
+
 .sidebar .section {
-  padding-top: 10px;
+  padding: 10px 15px 0;
 }
 .sidebar .block {
   border-style: solid;
diff --git a/core/themes/bartik/css/components/triptych.css b/core/themes/bartik/css/components/triptych.css
index 148f3b86..27aef5b 100644
--- a/core/themes/bartik/css/components/triptych.css
+++ b/core/themes/bartik/css/components/triptych.css
@@ -5,6 +5,38 @@
   background: rgba(30, 50, 10, 0.08);
   border-top: 1px solid #e7e7e7;
 }
+.region-triptych-first,
+.region-triptych-middle,
+.region-triptych-last {
+  box-sizing: border-box;
+  padding: 0 20px 0;
+}
+@media all and (min-width: 560px) {
+  .region-triptych-first,
+  .region-triptych-middle,
+  .region-triptych-last {
+    float: left; /* LTR */
+    position: relative;
+    box-sizing: border-box;
+    padding: 20px 15px 30px;
+    width: 33%;
+  }
+  [dir="rtl"] .region-triptych-first,
+  [dir="rtl"] .region-triptych-middle,
+  [dir="rtl"] .region-triptych-last {
+    float: right;
+  }
+  .region-triptych-middle {
+    padding: 20px 5px 30px;
+  }
+}
+@media all and (min-width: 851px) {
+  .region-triptych-first,
+  .region-triptych-middle,
+  .region-triptych-last {
+    padding: 0 20px;
+  }
+}
 #triptych h2 {
   color: #000;
   font-size: 1.4em;
diff --git a/core/themes/bartik/css/layout.css b/core/themes/bartik/css/layout.css
index 8a603b6..7c87b27 100644
--- a/core/themes/bartik/css/layout.css
+++ b/core/themes/bartik/css/layout.css
@@ -1,236 +1,27 @@
-
-/* ---------- Basic Layout Styles ----------- */
-
-html,
-body,
-#page  {
-  height: 100%;
-}
-#page-wrapper {
-  min-height: 100%;
-}
-#header div.section,
-#featured aside.section,
-#messages div.section,
-#main,
-#triptych,
-#footer-columns,
-#footer {
-  width: 100%;
+/**
+ * @file
+ * Bartik layout styling.
+ */
+
+/**
+ * Container
+ */
+.layout-container {
   max-width: 860px;
   margin-left: auto;
   margin-right: auto;
 }
-#header div.section {
-  position: relative;
-}
-.region-header {
-  float: right; /* LTR */
-  margin: .5em 5px .75em;
-}
-[dir="rtl"] .region-header {
-  float: left;
-}
-.region-secondary-menu .block-menu {
-  width: 100%;
-  margin: 0 auto;
-}
-#main-wrapper {
-  min-height: 300px;
-}
-#content .section,
-.sidebar .section {
-  padding: 0 15px;
-}
-#footer-wrapper {
-  padding: 35px 0 30px;
-}
-#footer-wrapper .section {
-  box-sizing: border-box;
-  padding: 0 15px;
-}
-.region-triptych-first,
-.region-triptych-middle,
-.region-triptych-last {
-  box-sizing: border-box;
-  padding: 0 20px 0;
-}
-.region-footer-firstcolumn,
-.region-footer-secondcolumn,
-.region-footer-thirdcolumn,
-.region-footer-fourthcolumn {
-  box-sizing: border-box;
-  padding: 0 10px;
-}
-
-@media all and (min-width: 560px) and (max-width: 850px) {
-
-  #sidebar-first,
-  .region-triptych-first,
-  .region-triptych-middle,
-  .region-triptych-last,
-  .region-footer-firstcolumn,
-  .region-footer-secondcolumn,
-  .region-footer-thirdcolumn,
-  .region-footer-fourthcolumn {
-    display: inline;
-    float: left; /* LTR */
-    position: relative;
-  }
-  [dir="rtl"] #sidebar-first,
-  [dir="rtl"] .region-triptych-first,
-  [dir="rtl"] .region-triptych-middle,
-  [dir="rtl"] .region-triptych-last,
-  [dir="rtl"] .region-footer-firstcolumn,
-  [dir="rtl"] .region-footer-secondcolumn,
-  [dir="rtl"] .region-footer-thirdcolumn,
-  [dir="rtl"] .region-footer-fourthcolumn {
-    float: right;
-  }
-  #sidebar-first,
-  #sidebar-second {
-    width: 50%;
-  }
-  #sidebar-second {
-    margin-left: 50%; /* LTR */
-  }
-  [dir="rtl"] #sidebar-second {
-    margin-right: 50%;
-  }
-  .layout-one-sidebar #sidebar-first,
-  .layout-one-sidebar #sidebar-second {
-    width: 100%;
-  }
-  .layout-one-sidebar #sidebar-second {
-    margin-left: 0; /* LTR */
-  }
-  [dir="rtl"] .layout-one-sidebar #sidebar-second {
-    margin-right: 0;
-  }
-  .region-triptych-first,
-  .region-triptych-middle,
-  .region-triptych-last {
-    box-sizing: border-box;
-    padding: 20px 15px 30px;
-    width: 33%;
-  }
-  .region-triptych-middle {
-    padding: 20px 5px 30px;
-  }
-  .region-footer-firstcolumn,
-  .region-footer-secondcolumn {
-    box-sizing: border-box;
-    padding: 0 10px;
-    width: 50%;
-  }
-  .region-footer-thirdcolumn,
-  .region-footer-fourthcolumn {
-    box-sizing: border-box;
-    padding: 0 10px;
-    width: 50%;
-  }
-  .region-footer-thirdcolumn {
-    clear: both;
-  }
-}
-
 @media all and (min-width: 851px) {
-
-  #header div.section,
-  #featured aside.section,
-  #messages div.section,
-  #main,
-  #triptych,
-  #footer-columns,
-  #footer {
+  .layout-container {
     max-width: 1290px;
   }
-  #content,
-  #sidebar-first,
-  #sidebar-second,
-  .region-triptych-first,
-  .region-triptych-middle,
-  .region-triptych-last,
-  .region-footer-firstcolumn,
-  .region-footer-secondcolumn,
-  .region-footer-thirdcolumn,
-  .region-footer-fourthcolumn {
-    display: inline;
-    float: left; /* LTR */
-    position: relative;
-  }
-  [dir="rtl"] #content,
-  [dir="rtl"] #sidebar-first,
-  [dir="rtl"] #sidebar-second,
-  [dir="rtl"] .region-triptych-first,
-  [dir="rtl"] .region-triptych-middle,
-  [dir="rtl"] .region-triptych-last,
-  [dir="rtl"] .region-footer-firstcolumn,
-  [dir="rtl"] .region-footer-secondcolumn,
-  [dir="rtl"] .region-footer-thirdcolumn,
-  [dir="rtl"] .region-footer-fourthcolumn {
-    float: right;
-  }
-  .layout-two-sidebars #content {
-    margin-left: 25%;
-    margin-right: 25%;
-    width: 50%;
-  }
-  .layout-one-sidebar #content {
-    width: 75%;
-  }
-  .layout-no-sidebars #content {
-    width: 100%;
-  }
-  .layout-sidebar-first #content {
-    margin-left: 25%; /* LTR */
-    margin-right: 0; /* LTR */
-  }
-  [dir="rtl"] .layout-sidebar-first #content {
-    margin-left: 0;
-    margin-right: 25%;
-  }
-  .layout-sidebar-second #content {
-    margin-right: 25%; /* LTR */
-    margin-left: 0; /* LTR */
-  }
-  [dir="rtl"] .layout-sidebar-second #content {
-    margin-right: 0;
-    margin-left: 25%;
-  }
-  #sidebar-first {
-    width: 25%;
-    margin-left: -100%; /* LTR */
-  }
-  [dir="rtl"] #sidebar-first {
-    margin-right: -100%;
-  }
-  #sidebar-second {
-    width: 25%;
-    margin-left: -25%; /* LTR */
-    clear: none;
-  }
-  [dir="rtl"] #sidebar-second {
-    margin-right: -25%;
-  }
-  .region-triptych-first,
-  .region-triptych-middle,
-  .region-triptych-last {
-    width: 33%;
-  }
-  .region-footer-firstcolumn,
-  .region-footer-secondcolumn,
-  .region-footer-thirdcolumn,
-  .region-footer-fourthcolumn {
-    box-sizing: border-box;
-    padding: 0 10px;
-    width: 25%;
-  }
 }
-/* ------------------- Main ------------------- */

-#main {
+/**
+ * Main
+ */
+.layout-main-wrapper {
+  min-height: 300px;
   margin-top: 20px;
   margin-bottom: 40px;
 }
-
diff --git a/core/themes/bartik/templates/page.html.twig b/core/themes/bartik/templates/page.html.twig
index 518969a..7341990 100644
--- a/core/themes/bartik/templates/page.html.twig
+++ b/core/themes/bartik/templates/page.html.twig
@@ -74,8 +74,8 @@
 #}
 <div id="page-wrapper">
   <div id="page">
-    <header id="header" role="banner" aria-label="{{ 'Site header'|t}}">
-      <div class="section clearfix">
+    <header id="header" class="header" role="banner" aria-label="{{ 'Site header'|t}}">
+      <div class="section layout-container clearfix">
         {{ page.secondary_menu }}
         {% if logo %}
           <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home" id="logo">
@@ -111,68 +111,66 @@
     </header>
     {% if messages %}
       <div id="messages">
-        <div class="section clearfix">{{ messages }}</div>
+        <div class="section layout-container clearfix">{{ messages }}</div>
       </div>
     {% endif %}
     {% if page.featured %}
       <div id="featured">
-        <aside class="section clearfix" role="complementary">
+        <aside class="section layout-container clearfix" role="complementary">
           {{ page.featured }}
         </aside>
       </div>
     {% endif %}
-    <div id="main-wrapper" class="clearfix">
-      <div id="main" class="clearfix">
-        {{ page.breadcrumb }}
-        <main id="content" class="column" role="main">
-          <section class="section">
-            <a id="main-content" tabindex="-1"></a>
-            {{ title_prefix }}
-            {% if title %}
-              <h1 class="title" id="page-title">
-                {{ title }}
-              </h1>
-            {% endif %}
-            {{ title_suffix }}
-            {% if tabs %}
-              <nav class="tabs" role="navigation" aria-label="{{ 'Tabs'|t }}">
-                {{ tabs }}
-              </nav>
-            {% endif %}
-            {{ page.help }}
-            {% if action_links %}
-              <ul class="action-links">{{ action_links }}</ul>
-            {% endif %}
-            {{ page.content }}
-          </section>
-        </main>
-        {% if page.sidebar_first %}
-          <div id="sidebar-first" class="column sidebar">
-            <aside class="section" role="complementary">
-              {{ page.sidebar_first }}
-            </aside>
-          </div>
-        {% endif %}
-        {% if page.sidebar_second %}
-          <div id="sidebar-second" class="column sidebar">
-            <aside class="section" role="complementary">
-              {{ page.sidebar_second }}
-            </aside>
-          </div>
-        {% endif %}
-      </div>
+    <div id="main-wrapper" class="layout-main-wrapper layout-container clearfix">
+      {{ page.breadcrumb }}
+      <main id="content" class="column main-content" role="main">
+        <section class="section">
+          <a id="main-content" tabindex="-1"></a>
+          {{ title_prefix }}
+          {% if title %}
+            <h1 class="title" id="page-title">
+              {{ title }}
+            </h1>
+          {% endif %}
+          {{ title_suffix }}
+          {% if tabs %}
+            <nav class="tabs" role="navigation" aria-label="{{ 'Tabs'|t }}">
+              {{ tabs }}
+            </nav>
+          {% endif %}
+          {{ page.help }}
+          {% if action_links %}
+            <ul class="action-links">{{ action_links }}</ul>
+          {% endif %}
+          {{ page.content }}
+        </section>
+      </main>
+      {% if page.sidebar_first %}
+        <div id="sidebar-first" class="column sidebar sidebar--first">
+          <aside class="section" role="complementary">
+            {{ page.sidebar_first }}
+          </aside>
+        </div>
+      {% endif %}
+      {% if page.sidebar_second %}
+        <div id="sidebar-second" class="column sidebar sidebar--second">
+          <aside class="section" role="complementary">
+            {{ page.sidebar_second }}
+          </aside>
+        </div>
+      {% endif %}
     </div>
     {% if page.triptych_first or page.triptych_middle or page.triptych_last %}
       <div id="triptych-wrapper">
-        <aside id="triptych" class="clearfix" role="complementary">
+        <aside id="triptych" class="section layout-container clearfix" role="complementary">
           {{ page.triptych_first }}
           {{ page.triptych_middle }}
           {{ page.triptych_last }}
         </aside>
       </div>
     {% endif %}
-    <div id="footer-wrapper">
-      <footer class="section">
+    <div id="footer-wrapper" class="footer-wrapper">
+      <footer class="section layout-container">
         {% if page.footer_firstcolumn or page.footer_secondcolumn or page.footer_thirdcolumn or page.footer_fourthcolumn %}
           <div id="footer-columns" class="clearfix">
             {{ page.footer_firstcolumn }}