diff --git a/core/themes/bartik/css/layout.css b/core/themes/bartik/css/layout.css
index 7dfddf7..82956e2 100644
--- a/core/themes/bartik/css/layout.css
+++ b/core/themes/bartik/css/layout.css
@@ -7,8 +7,7 @@ body,
   height: 100%;
 }
 #page-wrapper {
-  min-height: 100%;
-  min-width: 960px;
+  min-height: 100%;  
 }
 #header div.section,
 #featured div.section,
@@ -17,7 +16,8 @@ body,
 #triptych,
 #footer-columns,
 #footer {
-  width: 960px;
+  width: 100%;
+  max-width: 860px;
   margin-left: auto;
   margin-right: auto;
 }
@@ -26,7 +26,13 @@ body,
 }
 .region-header {
   float: right; /* LTR */
-  margin: 0 5px 10px;
+  margin: 1em 5px 1.5em;
+  border: 1px solid #ccc;
+}
+#secondary-menu {
+  width: 100%;
+  margin: auto;
+  padding-bottom: 10px;
 }
 .with-secondary-menu .region-header {
   margin-top: 3em;
@@ -34,67 +40,164 @@ body,
 .without-secondary-menu .region-header {
   margin-top: 15px;
 }
-#secondary-menu {
-  position: absolute;
-  right: 0; /* LTR */
-  top: 0;
-  width: 480px;
-}
-#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;
-}
-.one-sidebar #content {
-  width: 720px;
-}
-.two-sidebars #content {
-  width: 480px;
-}
-.no-sidebars #content {
-  width: 960px;
-  float: none;
-}
-#sidebar-first,
-#sidebar-second {
-  width: 240px;
-}
 #main-wrapper {
   min-height: 300px;
+  overflow: hidden;
 }
 #content .section,
 .sidebar .section {
   padding: 0 15px;
 }
-.breadcrumb {
+#breadcrumb {
   margin: 0 15px;
 }
+#footer-wrapper {
+  padding: 35px 0 30px;
+}
+#footer-wrapper .section {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 15px;
+}
 .region-triptych-first,
 .region-triptych-middle,
 .region-triptych-last {
-  margin: 20px 20px 30px;
-  width: 280px;
-}
-#footer-wrapper {
-  padding: 35px 5px 30px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 20px 0;
 }
 .region-footer-firstcolumn,
 .region-footer-secondcolumn,
 .region-footer-thirdcolumn,
 .region-footer-fourthcolumn {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
   padding: 0 10px;
-  width: 220px;
 }
-#footer {
-  width: 940px;
-  min-width: 920px;
+
+@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;
+  } 
+  .one-sidebar #sidebar {
+    width: 100%;
+  }
+  #sidebar-first,
+  #sidebar-second {
+    width: 50%;
+  } 
+  #sidebar-second {
+    margin-left: 50%;
+  }
+  .region-triptych-first,
+  .region-triptych-middle,
+  .region-triptych-last {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 20px 15px 30px;
+    width: 33%;
+  }
+  .region-triptych-middle {
+    padding: 20px 5px 30px;
+  }
+  .region-footer-firstcolumn,
+  .region-footer-secondcolumn {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0 10px;
+    width: 50%;
+  }
+  .region-footer-thirdcolumn,
+  .region-footer-fourthcolumn {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0 10px;
+    width: 50%;
+  }
+  .region-footer-thirdcolumn {
+    clear: both;
+  }
+}
+
+@media all and (min-width: 851px) {
+
+  #header div.section,
+  #featured div.section,
+  #messages div.section,
+  #main,
+  #triptych,
+  #footer-columns,
+  #footer {
+    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;
+  }
+  .two-sidebars #content {
+    margin-left: 25%;
+    margin-right: 25%;
+    width: 50%;
+  }
+  .one-sidebar #content {
+    width: 75%;
+  }
+  .sidebar-first #content {
+    margin-left: 25%;
+    margin-right: 0;
+  }
+  .sidebar-second #content {
+    margin-right: 25%;
+    margin-left: 0;
+  }
+  #sidebar-first {
+    width: 25%;
+    margin-left: -100%;
+  }
+  #sidebar-second {
+    width: 25%;
+    margin-left: -25%;
+    clear: none;
+  }
+  .region-triptych-first,
+  .region-triptych-middle,
+  .region-triptych-last { 
+    width: 33%;
+  }
+  .region-footer-firstcolumn,
+  .region-footer-secondcolumn,
+  .region-footer-thirdcolumn,
+  .region-footer-fourthcolumn {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0 10px;
+    width: 25%;
+  }
 }
diff --git a/core/themes/bartik/css/maintenance-page.css b/core/themes/bartik/css/maintenance-page.css
index c13c77b..e0c79c6 100644
--- a/core/themes/bartik/css/maintenance-page.css
+++ b/core/themes/bartik/css/maintenance-page.css
@@ -1,4 +1,3 @@
-
 body.maintenance-page {
   background-color: #fff;
   color: #000;
@@ -9,25 +8,19 @@ body.maintenance-page {
   margin-right: auto;
   min-width: 0;
   min-height: 0;
-  width: 800px;
   border: 1px solid #ddd;
   margin-top: 40px;
 }
 .maintenance-page #page {
-  margin: 20px 40px 40px;
+  margin: 10px;
 }
 .maintenance-page #main-wrapper {
   min-height: inherit;
 }
 .maintenance-page #header,
-.maintenance-page #messages,
-.maintenance-page #main {
+.maintenance-page #messages {
   width: auto;
 }
-.maintenance-page #header div.section,
-.maintenance-page #main {
-  width: 700px;
-}
 .maintenance-page #main {
   margin: 0;
 }
@@ -61,7 +54,21 @@ body.maintenance-page {
 .maintenance-page #messages div.messages {
   margin: 0;
 }
-.maintenance-page #messages div.section {
-  padding: 0;
-  width: auto;
+@media all and (min-width: 800px) {
+  .maintenance-page #page-wrapper {
+    width: 800px;
+  }
+  .maintenance-page #header div.section,
+  .maintenance-page #main {
+    width: 700px;
+  }
+  .maintenance-page #messages div.section {
+    padding: 0;
+    width: auto;
+  }
+}
+@media all and (min-width: 600px) { /* @TODO find the proper breakpoint */
+  .maintenance-page #page {
+    margin: 20px 40px 40px;
+  }
 }
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index 7773eda..56f2ea6 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -292,8 +292,7 @@ ul.tips {
 }
 #name-and-slogan {
   float: left; /* LTR */
-  padding-top: 34px;
-  margin: 0 0 30px 15px; /* LTR */
+  margin: 30px 0 30px 15px; /* LTR */
 }
 #site-name {
   font-size: 1.821em;
@@ -449,36 +448,39 @@ h1#site-name {
 }
 
 /* --------------- Main Menu ------------ */
-
 #main-menu {
   clear: both;
 }
 #main-menu-links {
   font-size: 0.929em;
-  margin: 0;
-  padding: 0 15px;
+  margin: 0 5px;
+  padding: 0;
+  text-align: left;
 }
 #main-menu-links li {
-  float: left; /* LTR */
+  float: none;
   list-style: none;
-  padding: 0 1px;
-  margin: 0 1px;
+  margin: 0;
+  padding: 0;
+  width: 99.9%;
 }
+  
 #main-menu-links a {
   color: #333;
   background: #ccc;
   background: rgba(255, 255, 255, 0.7);
-  float: left; /* LTR */
-  height: 2.4em;
-  line-height: 2.4em;
-  padding: 0 0.8em;
+  float: none; /* LTR */
+  display: block;
+  /*height: 2.4em;
+  line-height: 2.4em;*/
   text-decoration: none;
   text-shadow: 0 1px #eee;
-  -moz-border-radius-topleft: 8px;
-  -moz-border-radius-topright: 8px;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-}
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+  margin-bottom: 4px;
+  padding: 0.6em 0 0.6em 10px;
+}  
+
 #main-menu-links a:hover,
 #main-menu-links a:focus {
   background: #f6f6f2;
@@ -491,11 +493,6 @@ h1#site-name {
 #main-menu-links li a.active {
   border-bottom: none;
 }
-.featured #main-menu-links li a:active,
-.featured #main-menu-links li a.active {
-  background: #f0f0f0;
-  background: rgba(240, 240, 240, 1.0);
-}
 
 /* --------------- Secondary Menu ------------ */
 
@@ -504,6 +501,13 @@ h1#site-name {
   font-size: 0.929em;
   margin: 10px 10px 0;
 }
+
+#secondary-menu-links  li{
+  display: inline-block;
+  padding: 0 0.5em 0.8em;
+
+}
+
 #secondary-menu-links a:hover,
 #secondary-menu-links a:focus {
   text-decoration: underline;
@@ -520,10 +524,10 @@ h1#site-name {
 
 #featured {
   text-align: center;
-  font-size: 1.643em;
+  font-size: 1.2em;
   font-weight: normal;
   line-height: 1.4;
-  padding: 20px 0 45px;
+  padding: 20px 10px 45px;
   margin: 0;
   background: #f0f0f0;
   background: rgba(30, 50, 10, 0.08);
@@ -531,7 +535,7 @@ h1#site-name {
   text-shadow: 1px 1px #fff;
 }
 #featured h2 {
-  font-size: 1.174em;
+  font-size: 1.2em;
   line-height: 1;
 }
 #featured p {
@@ -539,6 +543,7 @@ h1#site-name {
   padding: 0;
 }
 
+
 /* --------------- Highlighted ---------------- */
 
 #highlighted {
@@ -770,15 +775,15 @@ ul.links {
 }
 #triptych h2 {
   color: #000;
-  font-size: 1.714em;
-  margin-bottom: 0.8em;
+  font-size: 1.25em;
+  margin-bottom: 0.6em;
   text-shadow: 0 1px 0 #fff;
   text-align: center;
   line-height: 1;
 }
 #triptych .block {
-  margin-bottom: 2em;
-  padding-bottom: 2em;
+  margin-bottom: 1em;
+  padding-bottom: 1em;
   border-bottom: 1px solid #dfdfdf;
   line-height: 1.3;
 }
@@ -1602,3 +1607,84 @@ div.admin-panel .description {
   border-top: 1px solid #d6d6d6;
   margin: 0;
 }
+
+/* ----------- media queries -------------------- */
+
+@media all and (min-width: 461px) and (max-width: 900px) { /* @TODO Find proper breakpoint */
+ /* ------------ Main menu ----------------- */
+  #main-menu-links {
+    margin: 0 5px;
+    padding: 0;
+    text-align: center;
+  }
+  #main-menu-links li {
+    float: left;
+    margin-right: 5px;
+    padding: 0;
+    display: inline-block;
+    width: 32.75%;
+  }
+  #main-menu-links li:nth-child(3n) {
+    margin-right: -5px;
+  }
+  #main-menu-links a {
+    float: none;
+    display: block;    
+    -moz-border-radius: 8px;
+    border-radius: 8px;
+    margin-bottom: 5px;
+    padding: 0.6em 5px;
+  }
+}
+
+@media all and (min-width: 901px) {
+  #main-menu-links {
+    font-size: 0.929em;
+    margin: 0;
+    padding: 0 15px;
+  }
+  #main-menu-links li {
+    float: left; /* LTR */
+    list-style: none;
+    padding: 0 1px;
+    margin: 0 1px;
+    width: auto;
+  }
+  #main-menu-links a {
+    float: left; /* LTR */
+    padding: 0.6em 0.8em;
+    margin-bottom: 0;
+    -moz-border-radius-bottomleft: 0;
+    -moz-border-radius-bottomright: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .featured #main-menu-links li a:active,
+  .featured #main-menu-links li a.active {
+  background: #f0f0f0;
+  background: rgba(240, 240, 240, 1.0);
+  }
+}
+
+@media all and (min-width: 520px) {
+  
+  /* ----------------- Featured ----------------- */
+  #featured {
+    font-size: 1.643em;
+  }
+  #featured h2 {
+    font-size: 1.174em;
+  }
+    
+  /* ------------------ Triptych ----------------- */
+  #triptych h2 {
+    font-size: 1.714em;
+    margin-bottom: 0.9em;
+  }
+  
+  #triptych .block {
+    margin-bottom: 2em;
+    padding-bottom: 2em;
+  }
+  
+}
diff --git a/core/themes/bartik/templates/page.tpl.php b/core/themes/bartik/templates/page.tpl.php
index f753093..3464731 100644
--- a/core/themes/bartik/templates/page.tpl.php
+++ b/core/themes/bartik/templates/page.tpl.php
@@ -90,7 +90,24 @@
 <div id="page-wrapper"><div id="page">
 
   <div id="header" class="<?php print $secondary_menu ? 'with-secondary-menu': 'without-secondary-menu'; ?>"><div class="section clearfix">
-
+    <?php if ($secondary_menu): ?>
+      <div id="secondary-menu" class="navigation">
+        <?php print theme('links__system_secondary_menu', array(
+          'links' => $secondary_menu,
+          'attributes' => array(
+            'id' => 'secondary-menu-links',
+            'class' => array('links', 'inline', 'clearfix'),
+          ),
+          'heading' => array(
+            'text' => t('Secondary menu'),
+            'level' => 'h2',
+            'class' => array('element-invisible'),
+          ),
+        )); ?>
+      </div> <!-- /#secondary-menu -->
+    <?php endif; ?>
+    
+    
     <?php if ($logo): ?>
       <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
         <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
@@ -142,22 +159,7 @@
       </div> <!-- /#main-menu -->
     <?php endif; ?>
 
-    <?php if ($secondary_menu): ?>
-      <div id="secondary-menu" class="navigation">
-        <?php print theme('links__system_secondary_menu', array(
-          'links' => $secondary_menu,
-          'attributes' => array(
-            'id' => 'secondary-menu-links',
-            'class' => array('links', 'inline', 'clearfix'),
-          ),
-          'heading' => array(
-            'text' => t('Secondary menu'),
-            'level' => 'h2',
-            'class' => array('element-invisible'),
-          ),
-        )); ?>
-      </div> <!-- /#secondary-menu -->
-    <?php endif; ?>
+    
 
   </div></div> <!-- /.section, /#header -->
 
@@ -177,12 +179,6 @@
 
     <?php print $breadcrumb; ?>
 
-    <?php if ($page['sidebar_first']): ?>
-      <div id="sidebar-first" class="column sidebar"><div class="section">
-        <?php print render($page['sidebar_first']); ?>
-      </div></div> <!-- /.section, /#sidebar-first -->
-    <?php endif; ?>
-
     <div id="content" class="column"><div class="section">
       <?php if ($page['highlighted']): ?><div id="highlighted"><?php print render($page['highlighted']); ?></div><?php endif; ?>
       <a id="main-content"></a>
@@ -209,6 +205,12 @@
 
     </div></div> <!-- /.section, /#content -->
 
+    <?php if ($page['sidebar_first']): ?>
+      <div id="sidebar-first" class="column sidebar"><div class="section">
+        <?php print render($page['sidebar_first']); ?>
+      </div></div> <!-- /.section, /#sidebar-first -->
+    <?php endif; ?>
+    
     <?php if ($page['sidebar_second']): ?>
       <div id="sidebar-second" class="column sidebar"><div class="section">
         <?php print render($page['sidebar_second']); ?>