commit d7f58da27596d9dae5d44f75b57216a46080d2cd
Author: Florent Torregrosa <florent.torregrosa@centrale-marseille.fr>
Date:   Fri May 16 22:53:22 2014 +0200

    Switch MAYO on version 7.x-2.0 to be adaptative.

diff --git a/drupal7/sites/all/themes/mayo/LICENSE.txt b/drupal7/sites/all/themes/mayo/LICENSE.txt
old mode 100644
new mode 100755
diff --git a/drupal7/sites/all/themes/mayo/README.txt b/drupal7/sites/all/themes/mayo/README.txt
index a07e4736..7327e257 100644
--- a/drupal7/sites/all/themes/mayo/README.txt
+++ b/drupal7/sites/all/themes/mayo/README.txt
@@ -1,6 +1,11 @@
 
 MAYO - original theme for Drupal 7 from PIXTURE STUDIO
 
+MAYO 7.x-2.x is the original theme with responsive layout and other responsive features. Also the theme is
+ using SASS/Compass to compile CSS. You will still be able to create a normal sub-theme if you need to customize further without getting envolved with SASS. This version uses <!DOCTYPE html> which starts it down the HTML5 path. Very few of the newer HTML5 elements are used at this point.
+
+MAYO Responsive (7.x-2.x) borrows from Jeff Burnz and his great work on AdaptiveTheme https://drupal.org/project/adaptivethemeS
+
 The name "MAYO" is taken from a phrase "MAke Your Own" and "MAYOnnaise" which I love :-). As the name describes itself, MAYO is developed to be a theme that provides users easy ways to customize and create a theme they like.
 
 MAYO is developed based on the experience of developing PIXTURE theme. However, MAYO fully takes advantage of Drupal 7's color module and advaced theme settings.  MAYO is simple but flexible. You can customize the look of the MAYO easily from the theme setting page. It does not require you to have the knowledge of CSS, HTML and PHP.
@@ -15,7 +20,11 @@ MAYO's theme settings page provides many options you can select/customize.  Belo
 
 2. Base font and heading font type (either Serif or Sans-serif) and base font size.
 
-3. Page layout options such as width of the site (fixed width layout or liquid layout), margins, sidebar layout and width, etc.
+3. Page layout options such as margins, sidebar layout and width, etc. There are now settings for Big
+Screen Sidebar Layout, Tablet Sidebar Layout, and Smalltouch Sidebar Layout. Also you can adjust the Media
+query for each device type, but caution is advised in changing the defaults. Be careful using Pixle Units in
+the Sidebar Layout settings as it could have undesired behavior on some device sizes. % units seem to work
+best.
 
 4. Styles such as menubar styles and round corner for node/sidebar block.
 
@@ -90,12 +99,6 @@ Each block in the top and bottom columns regions has its own box style just like
 
 Menu and Submenu regions are for those who uses superfish, nice_menus and other drop down menus (see the next section for more details).  Position of the sidebar first and the second can be configured from the theme settings page.
 
-
-Mininum width
-==============
-Currently, the theme uses 700px as the minimum-width. If you want to change it, please manually edit the css/layout.css and change the min-width of the body.
-
-
 How to use superfish/nice_menus module?
 =======================================
 The primary menu and secondary menu does not support superfish and nice_menus. If you want to use one of them, you need to turn off the primary and secondary menu from the theme settings page first. Then, create and configure menu blocks and then assign them to either the 'menubar' or 'sub-menubar' region of the MAYO theme at admin/structure/block page.
@@ -115,17 +118,10 @@ If the header background image you choose is not wide enough, the image repeats,
 
 Round corners for sidebar block and node
 ========================================
-By using CSS3 and browser specific stylesheet properties, round corners for sidebar blocks and node are supported by major browsers such as Fireforx, Safari, Google Chrome and Opera except for IE. We have decided not to support round corners for IE with Javascript since may slows down the page display. So if you are IE users, please wait for the future version of IE that supports CSS3's border-radius property.
+By using CSS3 and browser specific stylesheet properties, round corners for sidebar blocks and node are supported by major browsers such as Fireforx, Safari, Google Chrome and Opera except for IE. We have decided not to support round corners for IE<9 with Javascript since may slows down the page display. So if you are IE users, please wait for the future version of IE that supports CSS3's border-radius property.
 
 
 Changing default color set
 ===========================
 Please do not change the default color set (MAYO) in the color/color.inc file.  You can change other entries but not the default one. Otherwise, it will mess up the entire color changing scheme.
 
-
-
-Author
-=======
-Hideki Ito
-PIXTURE STUDIO <http://www.pixture.com>
-
diff --git a/drupal7/sites/all/themes/mayo/color/color.inc b/drupal7/sites/all/themes/mayo/color/color.inc
index 8b0d6aa4..c6c061d3 100644
--- a/drupal7/sites/all/themes/mayo/color/color.inc
+++ b/drupal7/sites/all/themes/mayo/color/color.inc
@@ -1,4 +1,8 @@
 <?php
+/**
+ * @file
+ * Implements color module theme specific settings.
+ */
 
 // Pass some settings to JavaScript for the live preview.
 drupal_add_js(array('color' => array('logo' => theme_get_setting('logo', 'mayo'))), 'setting');
diff --git a/drupal7/sites/all/themes/mayo/color/preview.js b/drupal7/sites/all/themes/mayo/color/preview.js
index d0942a50..d74c8d7c 100644
--- a/drupal7/sites/all/themes/mayo/color/preview.js
+++ b/drupal7/sites/all/themes/mayo/color/preview.js
@@ -1,3 +1,7 @@
+/**
+ * @file
+ * Updates the live preview for MAYO theme settings.
+ */
 
 (function ($) {
   Drupal.color = {
diff --git a/drupal7/sites/all/themes/mayo/config.rb b/drupal7/sites/all/themes/mayo/config.rb
new file mode 100644
index 00000000..9a0240e9
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/config.rb
@@ -0,0 +1,29 @@
+# Require any additional compass plugins here.
+#require "susy"
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "js"
+#fonts_dir = "css/fonts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
+preferred_syntax = :scss
+
+
+line_comments = false # by Compass.app 
\ No newline at end of file
diff --git a/drupal7/sites/all/themes/mayo/css/black-menu.css b/drupal7/sites/all/themes/mayo/css/black-menu.css
index 3b79dc84..c39b1157 100644
--- a/drupal7/sites/all/themes/mayo/css/black-menu.css
+++ b/drupal7/sites/all/themes/mayo/css/black-menu.css
@@ -1,11 +1,11 @@
-
-#menubar, /* for nice_menus, superfish */
+#menubar,
 #navigation,
 #preview #preview-navigation {
-  background: url('../images/black-menu.png') repeat center left;
+  background: url("../images/black-menu.png") repeat center left;
   border-bottom-width: 0px;
   padding: 4px 4px 4px 8px;
 }
+
 #submenubar {
   padding: 2px 4px 2px 8px;
 }
@@ -14,18 +14,21 @@
 #preview #preview-navigation ul li {
   border-right-color: #333;
 }
+
 #navigation ul li a,
 #preview #preview-navigation ul li a {
   color: #ddd;
   font-weight: normal;
   font-size: small;
 }
+
 #navigation ul li a:hover,
 #preview #preview-#navigation ul li a:hover {
   color: #fff;
   background-color: #444;
   text-decoration: none;
 }
+
 #navigation ul.main-menu li:hover,
 #navigation ul.main-menu li a:hover {
   color: #fff;
@@ -33,7 +36,9 @@
   background: #444;
   text-decoration: none;
 }
-#navigation ul li a:hover { /* needed for IE */
+
+#navigation ul li a:hover {
+  /* needed for IE */
   color: #fff;
   background: #444;
   text-decoration: none;
@@ -41,48 +46,56 @@
 
 /*--------------- superfish ----------------*/
 #menubar .sf-menu li a {
-  background: #000 url('../images/black-menu.png') repeat center left;
+  background: black url("../images/black-menu.png") repeat center left;
   border-right-color: #333;
   color: #ddd;
   font-weight: normal;
 }
+
 #menubar .sf-menu li ul li a {
   background: #000;
 }
+
 #menubar .sf-menu li.last ul li a,
 #menubar .sf-menu li ul li a,
 #menubar .sf-menu li ul li.last a {
   border-color: #333;
   background-color: #000;
 }
+
 #menubar .sf-menu li a:hover,
 #menubar .sf-menu li.last a:hover {
   color: #fff;
   text-decoration: none;
   background: #444;
 }
+
 #menubar .sf-menu ul {
   border-color: #333;
 }
 
 /*-------------- nice_menus -----------------*/
 #menubar ul.nice-menu {
-  z-index: 99; /* makes drop down menu item for the menubar comes front of sub menubar */
-  background: url('../images/black-menu.png') repeat center left;
+  z-index: 99;
+  /* makes drop down menu item for the menubar comes front of sub menubar */
+  background: url("../images/black-menu.png") repeat center left;
 }
+
 #menubar .nice-menu a,
 #menubar .nice-menu a:active,
 #menubar .nice-menu a:visited,
 #menubar .nice-menu a:focus {
   color: #ddd;
 }
+
 #menubar .nice-menu a:hover {
   color: #fff;
   text-decoration: none;
 }
+
 #menubar ul.nice-menu li a {
   /* root menu items */
-  background: url('../images/black-menu.png') repeat center left;
+  background: url("../images/black-menu.png") repeat center left;
 }
 
 #menubar ul.nice-menu li ul li.menuparent a,
@@ -90,40 +103,51 @@
 #menubar ul.nice-menu li ul li.menuparent:hover,
 #menubar ul.nice-menu li ul li.menuparent {
   /* drop down menu item that has child menu */
-  background-image: url('../images/arrow-right-lite.png');
+  background-image: url("../images/arrow-right-lite.png");
   background-repeat: no-repeat;
   background-position: 95%;
 }
+
 #menubar ul.nice-menu li ul li.menuparent li a {
-  background-image: none; /* do not delete! */
+  background-image: none;
+  /* do not delete! */
 }
+
 #menubar ul.nice-menu li.menuparent li a {
-  background-image: none; /* do not delete! */
+  background-image: none;
+  /* do not delete! */
   background-color: #000;
 }
+
 #menubar ul.nice-menu li.menuparent li {
-  background-image: none; /* do not delete! */
+  background-image: none;
+  /* do not delete! */
   background-color: #000;
 }
+
 #menubar ul.nice-menu li ul li.menuparent li a:hover {
-  background-image: none; /* do not delete! */
+  background-image: none;
+  /* do not delete! */
   background: #444;
 }
 
 #menubar ul.nice-menu li.menuparent {
   /* root menu item that has drop down menu */
-  background: url('../images/black-menu.png') repeat center left;
+  background: url("../images/black-menu.png") repeat center left;
 }
+
 #menubar ul.nice-menu li.menuparent a {
   /* root menu item that has drop down menu */
-  background-image: url('../images/arrow-down-lite.png');
+  background-image: url("../images/arrow-down-lite.png");
   background-repeat: no-repeat;
   background-position: 90%;
 }
+
 #menubar ul.nice-menu li a {
   /* root menu item that has no drop down menu */
   border-right-color: #333;
 }
+
 #menubar ul.nice-menu li.last ul li a,
 #menubar ul.nice-menu li ul li a,
 #menubar ul.nice-menu li ul li.last a {
@@ -137,15 +161,18 @@
   /* root menu item hover color */
   background: #444;
 }
+
 #menubar ul.nice-menu li.menuparent a:hover {
   /* root menu item that has drop down menu */
-  background-image: url('../images/arrow-down-lite.png');
+  background-image: url("../images/arrow-down-lite.png");
   background-repeat: no-repeat;
   background-position: 90%;
 }
+
 #menubar ul.nice-menu li.menuparent li a:hover {
   background-image: none;
 }
+
 #menubar ul.nice-menu li ul {
   border: solid 1px #333;
 }
diff --git a/drupal7/sites/all/themes/mayo/css/colors.css b/drupal7/sites/all/themes/mayo/css/colors.css
index 072ee4e8..07be156f 100644
--- a/drupal7/sites/all/themes/mayo/css/colors.css
+++ b/drupal7/sites/all/themes/mayo/css/colors.css
@@ -1,23 +1,26 @@
-
 /* ---------- Color Module Styles ----------- */
-
 body,
 #page-wrapper {
   background-color: #9f8365;
   color: #3b3b3b;
 }
+
 #main,
 body.overlay {
   background-color: #fef8dd;
   color: #3b3b3b;
 }
-#page { /* bg */
+
+#page {
+  /* bg */
   background-color: #fef8dd;
 }
+
 #main-menu-links li a.active,
 #main-menu-links li.active-trail a {
   background-color: #fef8dd;
 }
+
 .tabs ul.secondary li a,
 .tabs ul.primary li a {
   border-color: #e3ddb0;
@@ -25,80 +28,91 @@ body.overlay {
   border-bottom-style: solid;
   background-color: #fef8dd;
 }
+
 .tabs ul.secondary li a.active:hover,
 .tabs ul.secondary li a:hover,
 .tabs ul.primary li a.active:hover,
 .tabs ul.primary li a:hover {
   background-color: #e7e3a6;
 }
-.tabs ul.secondary li a.active,
-.tabs ul.primary li a.active {
-}
+
 .tabs ul.secondary li.active a,
 .tabs ul.primary li.active a {
   background-color: #fef8dd;
   border-color: #e3ddb0;
 }
+
 .tabs ul.secondary li {
   border-color: #e3ddb0;
 }
+
 #header {
   background-color: #f99301;
-  background-image: -webkit-gradient(linear, left top, right top, from(#f99301), to(#ddff61));
-  background-image: -moz-linear-gradient(0deg, #f99301, #ddff61);
-  border-color: #fdf7dc;
-  /* for IE 5.5-7 */
-  filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#f99301, EndColorStr=#ddff61, GradientType=1);
-  /* for IE 8 */
-  -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f99301, endColorstr=#ddff61, GradientType=1)";
+  background-image: -webkit-gradient(linear, to right, to left, color-stop(0%, #f99301), color-stop(100%, #ddff61));
+  background-image: -webkit-linear-gradient(to right, #f99301, #ddff61);
+  background-image: -moz-linear-gradient(to right, #f99301, #ddff61);
+  background-image: -o-linear-gradient(to right, #f99301, #ddff61);
+  background-image: linear-gradient(to right, #f99301, #ddff61);
 }
+
 a.visited,
 a {
   color: #739400;
 }
+
 a:hover,
 a:focus {
   color: #638400;
 }
+
 a:active {
   color: #638400;
 }
+
 li a.active {
   /* important! */
   color: #3b3b3b;
 }
+
 .column-block,
 .sidebar .block {
   background-color: #fdefaa;
   border-color: #fceea9;
   color: #5a5a5a;
 }
+
 .column-block h2,
 .sidebar h2 {
   border-bottom-color: #dccf93;
   color: #5a5a5a;
 }
+
 .column-block a,
 .sidebar a {
   color: #cb6806;
 }
+
 .column-block table tr th,
 .sidebar .block table tr th {
   border-color: #dccf93;
   border-color: #fdefaa;
-  		border-color: #dccf93;
+  border-color: #dccf93;
 }
 
 .node {
   background-color: #fefefe;
   border-color: #ececec;
 }
-.node h2 { /* nodedividers */
+
+.node h2 {
+  /* nodedividers */
   border-color: #b8c195;
 }
+
 .node-sticky {
   background-color: #e6fba7;
 }
+
 .node .submitted {
   color: #777777;
 }
@@ -108,60 +122,79 @@ li a.active {
 #navigation {
   border-bottom-color: #e3ddb0;
 }
+
 #navigation ul li {
   border-right-color: #e3ddb0;
   color: #3b3b3b;
 }
+
 #navigation ul li.last {
   border-right: none;
 }
+
 .highlight {
   background-color: #e7e3a6;
 }
+
 div.item-list ul.pager li a:hover,
 #navigation ul li a:hover {
   background-color: #e7e3a6;
 }
+
 #page-title {
   background-color: #94974e;
   color: #f1f1f1;
 }
-#content .block h2 { /* main content: block title */
+
+#content .block h2 {
+  /* main content: block title */
   background-color: #94974e;
   color: #f1f1f1;
 }
-#content .node h2 { /* main content: block title */
+
+#content .node h2 {
+  /* main content: block title */
   background-color: transparent;
   color: #3b3b3b;
 }
-#content .node-sticky h2 { /* main content: block title */
+
+#content .node-sticky h2 {
+  /* main content: block title */
   background-color: transparent;
 }
+
 #footer-wrapper {
   background-color: #564939;
   color: #cccccc;
 }
+
 #footer-wrapper a {
   color: #f0cb00;
 }
+
 #footer-wrapper .column-block {
   background-color: #564939;
   color: #cccccc;
 }
+
 #footer-wrapper .column-block h2 {
   border: none;
   color: #cccccc;
 }
+
 #footer-wrapper .column-block a {
   color: #f0cb00;
 }
+
 #footer {
   background-color: #564939;
   color: #cccccc;
 }
+
 #footer a {
   color: #f0cb00;
 }
+
 .region-header,
 .region-header a,
 .region-header li a.active,
@@ -187,12 +220,15 @@ blockquote {
   background-color: #fefefe;
   border-color: #ececec;
 }
+
 .comment h3 {
   border-color: #b8c195;
 }
+
 .comment-unpublished {
   background-color: #fefefe;
 }
+
 .comment .submitted {
   color: #777777;
 }
@@ -209,28 +245,36 @@ table tr th {
   background-color: #dbdeab;
   border-right-color: #fef8dd;
 }
+
 fieldset {
-  border-color: #b8c195; /* nodedivider color */
+  border-color: #b8c195;
+  /* nodedivider color */
 }
+
 tr.even,
 tr.even td {
   background-color: #ebf0cc;
 }
+
 tr.odd,
 tr.odd td {
   background-color: #fefefe;
 }
+
 tr.even td.active,
 tr.odd td.active {
-  background-image: url('../images/dark.png');
+  background-image: url("../images/dark.png");
 }
+
 .profile .user-picture {
   background-color: #fef8dd;
 }
+
 .column-block table tr td,
 .sidebar .block table tr td {
   border-color: #dccf93;
 }
+
 .column-block table tr.even td,
 .column-block table tr.odd td,
 .sidebar .block table tr.even td,
@@ -239,66 +283,51 @@ tr.odd td.active {
   background-color: #fdefaa;
 }
 
-/*-------------- superfish color ---------------*/
-.sf-menu li a {
-  background-color: #fef8dd;
-  border-right-color: #e3ddb0;
-}
-.sf-menu li.last ul li a,
-.sf-menu li ul li a,
-.sf-menu li ul li.last a {
-  /* all other child menu items */
-  border-width: 0px;
-}
-.sf-menu li a.sfHover,
-.sf-menu li a:hover {
-  background-color: #e7e3a6;
-}
-.sf-menu a, .sf-menu a:active, .sf-menu a:visited, .sf-menu a:focus {
-  color: #739400;
-}
-.sf-menu ul {
-  /* add border around the child menu block */
-  border-color: #e3ddb0;
-}
-
 /*-------------- nice_menus color ---------------*/
 .nice-menu a, .nice-menu a:active, .nice-menu a:visited, .nice-menu a:focus {
   color: #739400;
 }
+
 ul.nice-menu li.menuparent a {
   /* root menu item that has drop down menu */
   background-color: #fef8dd;
 }
+
 ul.nice-menu li a {
   /* root menu item that has no drop down menu */
   background-color: #fef8dd;
   border-right-color: #e3ddb0;
 }
+
 ul.nice-menu li.menuparent a:hover,
 ul.nice-menu li a:hover {
   /* root menu item hover color */
   background-color: #e7e3a6;
 }
+
 ul.nice-menu li.last ul li a,
 ul.nice-menu li ul li a,
 ul.nice-menu li ul li.last a {
   /* drop down menu items */
   border-color: #e3ddb0;
 }
+
 ul.nice-menu li ul li.menuparent {
   /* drop down menu items that has child menu */
   background-color: #fef8dd;
 }
+
 ul.nice-menu li.menuparent li {
   /* drop down menu items that has no child menu */
   background: none;
   background-color: #fef8dd;
 }
+
 ul.nice-menu li.menuparent li:hover {
   background: none;
   background-color: #e7e3a6;
 }
+
 ul.nice-menu li ul {
   border: solid 1px #e3ddb0;
 }
diff --git a/drupal7/sites/all/themes/mayo/css/dark.css b/drupal7/sites/all/themes/mayo/css/dark.css
deleted file mode 100644
index 9db0467b..00000000
--- a/drupal7/sites/all/themes/mayo/css/dark.css
+++ /dev/null
@@ -1,19 +0,0 @@
-
-/*
- * CSS for dark color set
- */
-div.status {
-  background-color: #224422;
-  border: solid 1px #669966;
-  color: #aaccaa;
-}
-div.warning {
-  background-color: #666633;
-  border: solid 1px #aaaa44;
-  color: #ccccaa;
-}
-div.error {
-  background-color: #663333;
-  border: solid 1px #bb6666;
-  color: #ccaaaa;
-}
diff --git a/drupal7/sites/all/themes/mayo/css/mayo-superfish.css b/drupal7/sites/all/themes/mayo/css/mayo-superfish.css
new file mode 100644
index 00000000..3262a086
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/css/mayo-superfish.css
@@ -0,0 +1,69 @@
+/**
+ * Superfish menu
+ */
+.sf-menu li a {
+  /* root menu items */
+  font-size: 0.9em;
+  padding: 2px 8px;
+  border: none;
+  border-right-style: solid;
+  border-right-width: 1px;
+  background-color: #fef8dd;
+  border-right-color: #e3ddb0;
+  font-weight: normal;
+}
+
+.sf-menu a, .sf-menu a:active, .sf-menu a:visited, .sf-menu a:focus {
+  color: #739400;
+}
+
+.sf-menu li.last a {
+  /* last item of the root menu */
+  border-right: none;
+}
+
+.sf-menu li.last ul li a,
+.sf-menu li ul li a,
+.sf-menu li ul li.last a {
+  /* all other child menu items */
+  border-style: solid;
+  border-width: 1px;
+  /* border-color is set by colors.css */
+}
+
+.sf-menu li.menuparent a {
+  /* item with child menu - adding some spaces for arrows */
+  padding: 2px 19px 2px 8px;
+}
+
+.sf-menu li a.sfHover,
+.sf-menu li a:hover {
+  background-color: #e7e3a6;
+}
+
+.sf-menu li:hover ul,
+.sf-menu li.sfHover ul {
+  top: 1.8em;
+  border-top: none;
+}
+
+.sf-sub-indicator {
+  background: url("../images/sf-arrows.png") no-repeat -10px -110px;
+}
+
+a > .sf-sub-indicator {
+  top: 1em;
+  /* .2em drop in arrows */
+}
+
+.sf-menu ul {
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  -ms-border-radius: 0px;
+  -o-border-radius: 0px;
+  border-radius: 0px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #e3ddb0;
+  /* add border around the child menu block */
+}
diff --git a/drupal7/sites/all/themes/mayo/css/round-node.css b/drupal7/sites/all/themes/mayo/css/round-node.css
deleted file mode 100644
index 3655e96e..00000000
--- a/drupal7/sites/all/themes/mayo/css/round-node.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.comment,
-.node {
-  -khtml-border-radius: 8px;  /* for old Safari, KHTML */
-  -moz-border-radius: 8px;    /* for Firefox */
-  -webkit-border-radius: 8px; /* for old Safari, KHTML */
-  border-radius: 8px;         /* for CSS3 */
-}
diff --git a/drupal7/sites/all/themes/mayo/css/round-sidebar.css b/drupal7/sites/all/themes/mayo/css/round-sidebar.css
deleted file mode 100644
index c560f256..00000000
--- a/drupal7/sites/all/themes/mayo/css/round-sidebar.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.column-block,
-.sidebar .block {
-  -khtml-border-radius: 8px;  /* for old Safari, KHTML */
-  -moz-border-radius: 8px;    /* for Firefox */
-  -webkit-border-radius: 8px; /* for old Safari, KHTML */
-  border-radius: 8px;         /* for CSS3 */
-}
diff --git a/drupal7/sites/all/themes/mayo/css/style.css b/drupal7/sites/all/themes/mayo/css/style.css
index 5ae1fe58..ff27d3f2 100644
--- a/drupal7/sites/all/themes/mayo/css/style.css
+++ b/drupal7/sites/all/themes/mayo/css/style.css
@@ -1,69 +1,399 @@
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+  display: block;
+}
+
+audio,
+canvas,
+video {
+  display: inline-block;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+[hidden] {
+  display: none;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+html,
+button,
+input,
+select,
+textarea {
+  font-family: sans-serif;
+}
+
+body {
+  margin: 0;
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+#header h1 {
+  margin: 0 0;
+}
+
+h2 {
+  font-size: 1.5em;
+  margin: 0.83em 0;
+}
+
+h3 {
+  font-size: 1.17em;
+  margin: 1em 0;
+}
+
+h4 {
+  font-size: 1em;
+  margin: 1.33em 0;
+}
+
+h5 {
+  font-size: 0.83em;
+  margin: 1.67em 0;
+}
+
+h6 {
+  font-size: 0.75em;
+  margin: 2.33em 0;
+}
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+b,
+strong {
+  font-weight: bold;
+}
+
+dfn {
+  font-style: italic;
+}
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: monospace, serif;
+  font-size: 1em;
+}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+small {
+  font-size: 75%;
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+nav ul,
+nav ol {
+  list-style: none;
+  padding: 0;
+}
+
+img {
+  border: 0;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+figure {
+  margin: 0;
+}
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+legend {
+  border: 0;
+  padding: 0;
+  white-space: normal;
+}
+
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+  margin: 0;
+  vertical-align: baseline;
+}
+
+button,
+input {
+  line-height: normal;
+}
+
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  cursor: pointer;
+  -webkit-appearance: button;
+}
 
+button[disabled],
+input[disabled] {
+  cursor: default;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+
+button::-moz-focus-inner, input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+textarea {
+  overflow: auto;
+  vertical-align: top;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/*------- Begin default section --------*/
 * {
   margin: 0;
   padding: 0;
 }
+
 body {
   font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'URW Palladio L', Baskerville, serif;
   line-height: 1.5em;
-  font-size: 87.5%; /* = 14px assuming browser's regular font size is 16px */
+  font-size: 87.5%;
+  /* = 14px assuming browser's regular font size is 16px */
 }
+
 ul {
   margin: 0;
   padding: 0;
   list-style-type: disc;
   margin-left: 10px;
 }
+
 ol {
   margin: 0;
   padding: 0;
   margin-left: 10px;
 }
+
 a {
   text-decoration: none;
 }
+
 a:hover, a:active, a:focus {
   text-decoration: underline;
 }
+
 em {
   font-style: italic;
 }
+
 /* p,a,strong,em,li,dl,dt { */
-p,li,dl,dt {
+p, li, dl, dt {
   margin: 6px 0;
   line-height: 1.5em;
 }
+
 dd {
   margin-left: 2.5em;
 }
+
 table {
   width: 100%;
   margin: 4px 0px;
 }
+
 h1 {
   font-size: 1.4em;
 }
+
 h2 {
   font-size: 1.3em;
 }
+
 h3 {
   font-size: 1.2em;
 }
+
 h4 {
   font-size: 1.15em;
 }
+
 h5 {
   font-size: 1em;
 }
+
 fieldset {
   border-width: 1px;
   border-style: solid;
 }
+
 #site-name, #site-slogan {
   font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'URW Palladio L', Baskerville, serif;
 }
 
 /*------- end of default section --------*/
+#page-wrapper {
+  margin: 0px auto;
+  padding: 0px;
+  max-width: 100%;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+#page {
+  padding: 0px;
+}
+
+#main-wrapper {
+  width: 100%;
+  position: relative;
+}
+
+#content,
+#sidebar-first,
+#sidebar-second {
+  display: inline;
+  float: left;
+  position: relative;
+  /*overflow: hidden; Removed for Superfish */
+}
+
+#footer-columns {
+  width: 100%;
+}
+
+#footer-column-wrapper {
+  float: left;
+}
+
+#footer-column {
+  padding: 10px;
+  margin: 0px 5px 5px 5px;
+  text-align: left;
+}
+
+#top-columns,
+#bottom-columns {
+  width: 100%;
+  overflow: hidden;
+}
+
+.column-block-wrapper {
+  float: left;
+}
+
+.column-block {
+  padding: 10px;
+  margin: 0px 5px 5px 5px;
+  text-align: left;
+  margin: 0px;
+}
+
+.rc-1 .comment,
+.rc-1 .node,
+.rc-2 .column-block,
+.rc-2 .sidebar .block,
+.rc-3 .comment,
+.rc-3 .node,
+.rc-3 .column-block,
+.rc-3 .sidebar .block {
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  -ms-border-radius: 8px;
+  -o-border-radius: 8px;
+  border-radius: 8px;
+}
+
+.dark-messages div.status {
+  background-color: #224422;
+  border: solid 1px #669966;
+  color: #aaccaa;
+}
+.dark-messages div.warning {
+  background-color: #666633;
+  border: solid 1px #aaaa44;
+  color: #ccccaa;
+}
+.dark-messages div.error {
+  background-color: #663333;
+  border: solid 1px #bb6666;
+  color: #ccaaaa;
+}
 
 .spacer {
   display: block;
@@ -80,6 +410,7 @@ fieldset {
   border-width: 1px;
   overflow: hidden;
 }
+
 #header-watermark {
   margin: 0;
   padding: 0;
@@ -88,12 +419,15 @@ fieldset {
   background-repeat: no-repeat;
   background-position: top center;
 }
+
 div#logo {
   float: left;
 }
+
 #name-and-slogan {
   float: left;
 }
+
 #site-name a,
 #header h1 a,
 #header h1 a:link,
@@ -101,13 +435,16 @@ div#logo {
   font-weight: 800;
   text-decoration: none;
   line-height: 1em;
-  font-size: 34px; /* we do not want it changed by text scaling */
+  font-size: 34px;
+  /* we do not want it changed by text scaling */
 }
+
 #site-slogan {
   font-weight: normal;
   font-style: italic;
   margin-bottom: 5px;
-  font-size: 15px; /* we do not want it changed by text scaling */
+  font-size: 15px;
+  /* we do not want it changed by text scaling */
   line-height: 1em;
 }
 
@@ -123,13 +460,16 @@ div#logo {
   font-size: 0.9em;
   font-weight: normal;
 }
+
 #footer-wrapper .column-block {
   border-style: solid;
   border-width: 0px;
 }
+
 #footer-wrapper .column-block h2 {
   font-size: 1.5em;
 }
+
 #footer .block {
   margin: 5px 0px;
 }
@@ -145,6 +485,7 @@ div#logo {
   border-bottom-width: 1px;
   padding: 4px 0px;
 }
+
 #submenubar ul,
 #menubar ul {
   padding: 0px;
@@ -161,11 +502,13 @@ div#logo {
   border-bottom-width: 1px;
   overflow: hidden;
 }
+
 #navigation ul {
   margin: 0px;
   padding: 0px;
   list-style: none;
 }
+
 #navigation ul li {
   margin: 0px;
   padding: 0px;
@@ -174,20 +517,19 @@ div#logo {
   border-right-style: solid;
   border-right-width: 1px;
 }
-#navigation ul li.active {
-}
+
 #navigation ul li a {
   padding: 2px 4px;
   font-weight: normal;
   font-size: 0.9em;
 }
-#navigation ul li a:hover {
-}
+
 #navigation #main-menu {
   margin: 0;
   padding: 0px;
   float: left;
 }
+
 #navigation #secondary-menu {
   margin: 0;
   padding: 0px;
@@ -201,6 +543,7 @@ div#logo {
   padding: 0px;
   margin: 0px;
 }
+
 #banner-top,
 #banner-bottom {
   padding: 0px;
@@ -221,6 +564,7 @@ div#logo {
   border-style: solid;
   border-width: 1px;
 }
+
 .column-block h2 {
   font-size: 1.25em;
   line-height: 1em;
@@ -238,6 +582,7 @@ div#logo {
   margin: 0;
   line-height: 1.6em;
 }
+
 .sidebar .block {
   padding: 5px 10px;
   font-size: 0.9em;
@@ -245,6 +590,7 @@ div#logo {
   border-style: solid;
   border-width: 1px;
 }
+
 .column-block h2,
 .sidebar h2 {
   background: transparent;
@@ -255,6 +601,7 @@ div#logo {
   padding: 2px 0px;
   font-size: 1.25em;
 }
+
 .column-block .content,
 .sidebar .block .content {
   padding: 5px 2px;
@@ -269,6 +616,7 @@ div#logo {
   background: none;
   border-bottom-width: 3px;
 }
+
 .column-block table tr td,
 .sidebar .block table tr td {
   padding: 2px 4px;
@@ -282,14 +630,17 @@ div#logo {
   margin: 0px;
   padding: 0px;
 }
+
 .sidebar .block ul.links {
   margin-top: 10px;
   text-align: right;
 }
+
 .sidebar .block ul.links li {
   display: inline;
   margin-left: 15px;
 }
+
 .sidebar .block .menu {
   padding-left: 10px;
   padding-bottom: 5px;
@@ -314,10 +665,13 @@ div#logo {
   font-size: 1.3em;
   margin-bottom: 10px;
 }
-#content .block h2 { /* main content: block title */
+
+#content .block h2 {
+  /* main content: block title */
   padding: 4px 8px;
   font-size: 1.25em;
 }
+
 .action-links {
   padding-left: 10px;
 }
@@ -329,6 +683,7 @@ div.item-list .pager {
   border: none;
   padding: 0px;
 }
+
 div.item-list ul.pager {
   margin: 10px 0px;
   margin-top: 10px;
@@ -336,6 +691,7 @@ div.item-list ul.pager {
   overflow: hidden;
   list-style-type: none;
 }
+
 div.item-list ul.pager li {
   display: inline;
   margin: 0px;
@@ -343,6 +699,7 @@ div.item-list ul.pager li {
   line-height: 1em;
   padding: 2px 0px;
 }
+
 div.item-list ul.pager li.pager-current {
   padding: 2px 8px;
 }
@@ -363,12 +720,14 @@ div.tabs .primary {
   margin: 8px 0px 0px 0px;
   list-style-type: none;
 }
+
 ul.secondary li,
 ul.primary li {
   padding: 2px 0px;
   margin: 0px;
   line-height: 1em;
 }
+
 ul.secondary li a,
 ul.primary li a {
   margin: 0px;
@@ -388,13 +747,14 @@ div.tabs .primary li a {
 
 div.tabs .secondary li a.active,
 div.tabs .primary li a.active {
-  background: url('../images/dark.png') repeat top left;
+  background: url("../images/dark.png") repeat top left;
 }
 
 div.tabs ul.secondary li a {
   font-size: 0.85em;
   margin: 0px;
 }
+
 div.tabs ul.secondary li {
   border-style: solid;
   border-width: 1px;
@@ -409,15 +769,16 @@ div.tabs ul.secondary li {
   margin: 0;
   padding: 15px 12px 10px 14px;
   margin-bottom: 10px;
-
   border-style: solid;
   border-width: 1px;
 }
+
 .node-sticky {
   border-width: 0px;
 }
 
-#content .node h2 { /* main content: node title */
+#content .node h2 {
+  /* main content: node title */
   padding: 0px;
   background: transparent;
   border-bottom-style: solid;
@@ -433,12 +794,14 @@ div.tabs ul.secondary li {
 .node ol {
   padding-left: 15px;
 }
+
 .node ul.links {
   padding: 0px;
   font-size: 0.75em;
   float: right;
   clear: both;
 }
+
 .node .user-picture {
   float: right;
   padding: 0px 0px 10px 10px;
@@ -454,29 +817,36 @@ div.tabs ul.secondary li {
   border-style: solid;
   border-width: 1px;
 }
+
 .comment-unpublished {
   background: url(../images/unpublished.png) repeat top right;
 }
+
 .comment-spam {
   background: url(../images/spam.png) repeat top right;
 }
+
 .comment h3 {
   border-bottom-style: solid;
   border-bottom-width: 1px;
 }
+
 #comments h2.title {
   margin-bottom: 5px;
   font-size: 1.3em;
 }
+
 .comment .submitted {
   font-size: 0.75em;
 }
+
 .comment ul.links {
   padding: 0px;
   font-size: 0.75em;
   float: right;
   clear: both;
 }
+
 .comment .user-picture {
   float: right;
   padding: 4px 0px 10px 10px;
@@ -490,98 +860,45 @@ div.tabs ul.secondary li {
   margin: 0px;
   padding: 5px;
 }
+
 /* =============================================================================
    SEARCH
    ========================================================================== */
 /**
- * Header searchbox form
+ * Search block form
  * - no 'submit' button
  * - add search magnifier image
  * - use javascript to show prompt
  */
- #header-searchbox form div {
-   display: inline;
- }
- /* text field header search */
+.form-item-search-block-form .form-text:focus {
+  /*outline: none; */
+  /* remove blue outline for Safari */
+}
+
 .form-item-search-block-form .form-text {
-  border: 1px solid #ccc;
-  border-right: none;
-  float: left; /* LTR */
-  height: 14px;
-  padding: 6px;
-  color: #4e4e4e;
-  background-color: #FAFAFA;
-}
-/* submit button */
-#header-searchbox form input.form-submit {
-  border:none;
-  width:31px;
-  height:26px;
-  border: 1px solid #ccc;
-  border-left: 0;
-  text-indent:-9999px;
-  margin:0;
-  background: none;
-  padding: 0;
+  height: 24px;
+  color: #555555;
+  margin: 0px;
+  border: solid 1px #aaa;
+  border-bottom-color: #ddd;
+  border-right-color: #ddd;
+  margin-top: 1px;
+  background: white url(../images/search.png) no-repeat 2px center;
+  padding: 0px 4px 0px 4px;
+  padding-left: 24px;
+  /* space for magnifying glass */
 }
+
 #header .form-item-search-block-form {
   float: right;
   margin: 0px;
 }
+
 #header-searchbox {
   float: right;
   overflow: hidden;
 }
-/*#header-searchbox .form-submit:hover,
-#header-searchbox .form-submit:focus,
-#header-searchbox .form-submit:active {
-  cursor: pointer;
-}*/
-
-/*
- *  Search block form
- *  - submit replaced by magnify image.
- *  - says 'search this site'
- */
-
-#block-search-form .block .inner .content {
-  padding-top: 0;
-}
-
-/* text field search block */
-.block-search .form-item input.form-search,
-.white_bg .region-header .block-search .form-item input.form-search,
-.white_bg #navigation .block-search .form-item input.form-search {
-  border: 1px solid #ccc;
-  border-right: none;
-  float: left; /* LTR */
-  height: 14px;
-  padding: 6px;
-  color: #4e4e4e;
-  background-color: #FAFAFA;
-}
-/* submit button */
-.block-search form input.form-submit {
-  border:none;
-  width:31px;
-  height:26px;
-  border: 1px solid #ccc;
-  border-left: 0;
-  text-indent:-9999px;
-  margin:0;
-  background: none;
-  padding: 0;
-}
 
-/*.block-search .form-submit:hover,
-.block-search .form-submit:focus,
-.block-search .form-submit:active {
-  cursor: pointer;
-}*/
-
-/*#search-block-form input[type="submit"] {
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
-}*/
 /************************/
 /**
  * Form
@@ -593,12 +910,13 @@ div.tabs ul.secondary li {
   cursor: pointer;
   font-size: 0.9em;
   border: solid 1px #888888;
-  background: #fff url(../images/button.gif) repeat-x center;
+  background: white url(../images/button.gif) repeat-x center;
 }
+
 .pushbutton:hover, button:hover, .form-submit:hover {
   color: #111111;
   border: solid 1px #666666;
-  background: #fff url(../images/button-o.gif) repeat-x center;
+  background: white url(../images/button-o.gif) repeat-x center;
 }
 
 /**
@@ -611,41 +929,47 @@ div.tabs ul.secondary li {
   padding: 0px;
   border-width: 0px;
   line-height: 1.2em;
-
 }
+
 .decreaseFont {
   padding-right: 22px;
   padding-bottom: 25px;
-  background: url('../images/fontsizer-1.png') no-repeat top left;
+  background: url("../images/fontsizer-1.png") no-repeat top left;
   margin-right: 1px;
 }
+
 .resetFont {
   padding-right: 21px;
   padding-bottom: 25px;
-  background: url('../images/fontsizer-2.png') no-repeat top left;
+  background: url("../images/fontsizer-2.png") no-repeat top left;
 }
+
 .increaseFont {
   padding-right: 23px;
   padding-bottom: 25px;
-  background: url('../images/fontsizer-3.png') no-repeat top left;
+  background: url("../images/fontsizer-3.png") no-repeat top left;
   margin-left: 1px;
 }
+
 .decreaseFont:hover {
-  background: url('../images/fontsizer-1-o.png') no-repeat top left;
+  background: url("../images/fontsizer-1-o.png") no-repeat top left;
 }
+
 .resetFont:hover {
-  background: url('../images/fontsizer-2-o.png') no-repeat top left;
+  background: url("../images/fontsizer-2-o.png") no-repeat top left;
 }
+
 .increaseFont:hover {
-  background: url('../images/fontsizer-3-o.png') no-repeat top left;
+  background: url("../images/fontsizer-3-o.png") no-repeat top left;
 }
+
 #header-fontsizer a,
 #header-fontsizer a:visited,
 #header-fontsizer a:focus,
 #header-fontsizer a:active {
- /* suppress dotted frame around the links for IE */
- border: none;
- outline: none;
+  /* suppress dotted frame around the links for IE */
+  border: none;
+  outline: none;
 }
 
 /**
@@ -654,71 +978,87 @@ div.tabs ul.secondary li {
 table.views-view-grid tr td {
   padding: 15px;
 }
+
 .filter-wrapper {
   border: none;
   margin-top: 5px;
   padding: 5px;
   font-size: 0.9em;
 }
+
 .filter-wrapper ul li {
   margin-left: 10px;
 }
+
 .field-type-taxonomy-term-reference {
   overflow: hidden;
   margin-bottom: 0.5em;
 }
+
 .field-type-taxonomy-term-reference .field-label {
   float: left;
   overflow: hidden;
 }
+
 .field-type-taxonomy-term-reference .field-items {
   overflow: hidden;
 }
+
 .field-type-taxonomy-term-reference .field-items .field-item {
   float: left;
   margin: 0 0.6em;
   padding: 0px;
 }
+
 .field-type-text-with-summary {
-  /*clear: left;*/ /* do not use 'both' */
+  /*clear: left;*/
+  /* do not use 'both' */
 }
 
 table tr {
   border-style: solid;
   border-width: 0px;
 }
+
 table tr td {
   padding: 4px 6px;
   border-style: solid;
   border-width: 0px;
 }
+
 table tr th {
   border-style: solid;
   padding: 4px 6px;
   border-width: 0px;
   border-right-width: 1px;
 }
+
 table thead * {
   padding: 2px 3px;
   border-bottom: none;
   border-width: 0px;
 }
+
 table tbody {
   border-width: 0px;
 }
+
 table.sticky-enabled tr td {
   padding: 2px 3px;
   border-style: solid;
   border-width: 0px;
 }
+
 tr.even td.active,
 tr.odd td.active {
-  background-image: url('../images/dark.png');
+  background-image: url("../images/dark.png");
 }
+
 tr.even,
 tr.odd {
   border-width: 0px;
 }
+
 blockquote {
   padding: 0px 10px;
   border-left-style: solid;
@@ -726,59 +1066,6 @@ blockquote {
   font-style: italic;
 }
 
-/**
- * Superfish menu
- */
-.sf-menu li a {
-  /* root menu items */
-  font-size: 0.9em;
-  padding: 2px 8px;
-  border: none;
-  border-right-style: solid;
-  border-right-width: 1px;
-  /* background-color is set by colors.css */
-  /* border-right-color is set by colors.css */
-  font-weight: normal;
-}
-.sf-menu li.last a {
-  /* last item of the root menu */
-  border-right: none;
-}
-.sf-menu li.last ul li a,
-.sf-menu li ul li a,
-.sf-menu li ul li.last a {
-  /* all other child menu items */
-  border-style: solid;
-  border-width: 1px;
-  /* border-color is set by colors.css */
-}
-.sf-menu li.menuparent a {
-  /* item with child menu - adding some spaces for arrows */
-  padding: 8px 19px 2px 8px;  /* Added 6px at top for alignment*/
-}
-.sf-menu li a.sfHover,
-.sf-menu li a:hover {
-  /* background-color is set by colors.css */
-}
-.sf-menu li:hover ul,
-.sf-menu li.sfHover ul {
-  top: 2.8em;  /* Added 1.0em to bring down child items */
-}
-.sf-sub-indicator {
-  background: url('../images/sf-arrows.png') no-repeat -10px -110px;
-}
-a > .sf-sub-indicator {
-  top: 1em; /* .2em drop in arrows */
-}
-.sf-menu ul {
-  -khtml-border-radius: 0px;  /* for old Safari, KHTML */
-  -moz-border-radius: 0px;    /* for Firefox */
-  -webkit-border-radius: 0px; /* for old Safari, KHTML */
-  border-radius: 0px;         /* for CSS3 */
-  border-width: 1px;
-  border-style: solid;
-}
-
 /**
  * Nice menus
  */
@@ -787,16 +1074,19 @@ ul.nice-menu {
   margin: 0px;
   padding: 0px;
 }
+
 ul.nice-menu,
 ul.nice-menu ul,
 ul.nice-menu li {
   /* remove all borders */
   border: 0;
 }
+
 ul.nice-menu li {
   /* height of root menu items */
   line-height: 1.2em;
 }
+
 ul.nice-menu li a {
   /* root menu items */
   font-size: 0.9em;
@@ -807,6 +1097,7 @@ ul.nice-menu li a {
   /* background-color is set by colors.css */
   /* border-right-color is set by colors.css */
 }
+
 ul.nice-menu li.last a {
   /* last item of the root menu */
   border-right: none;
@@ -823,43 +1114,54 @@ ul.nice-menu li ul li.last a {
   /* all other chile menu items */
   border-style: solid;
   border-width: 1px;
-border-width: 0px;
+  border-width: 0px;
   /* border-color is set by colors.css */
 }
+
 ul.nice-menu li.menuparent a {
   /* root menu item that has drop down menu */
-  background-image: url('../images/arrow-down.png');
+  background-image: url("../images/arrow-down.png");
   background-repeat: no-repeat;
   background-position: 98%;
   /* background-color is set by colors.css */
 }
+
 ul.nice-menu li a {
   /* root menu item that has no drop down menu */
   /* background-color is set by colors.css */
 }
+
 ul.nice-menu li {
   padding: 0px;
 }
+
 ul.nice-menu li ul li.menuparent a:hover,
 ul.nice-menu li ul li.menuparent:hover,
 ul.nice-menu li ul li.menuparent {
   /* drop down menu item that has child menu */
-  background-image: url('../images/arrow-right.png');
+  background-image: url("../images/arrow-right.png");
   background-repeat: no-repeat;
   background-position: 95%;
   /* background-color is set by colors.css */
 }
+
 ul.nice-menu li.menuparent ul {
   padding-top: -5px;
 }
+
 ul.nice-menu li.menuparent li a {
-  background: none; /* do not delete! */
+  background: none;
+  /* do not delete! */
 }
+
 ul.nice-menu li.menuparent li {
-  background: none; /* do not delete! */
+  background: none;
+  /* do not delete! */
 }
+
 ul.nice-menu li ul li.menuparent li a:hover {
-  background: none; /* do not delete! */
+  background: none;
+  /* do not delete! */
 }
 
 /**
@@ -870,6 +1172,7 @@ ul.nice-menu li ul li.menuparent li a:hover {
   width: auto;
   float: none;
 }
+
 .overlay #skip-link,
 .overlay .region-page-top,
 .overlay #header,
@@ -884,18 +1187,243 @@ ul.nice-menu li ul li.menuparent li a:hover {
 .overlay #navigation {
   display: none;
 }
+
 .overlay #messages {
   width: auto;
 }
+
 .overlay #page-wrapper {
   width: 100%;
 }
+
 .overlay #page {
   margin: 0;
   padding: 0px;
 }
+
 #overlay-content {
   margin: 0;
   padding: 0px;
 }
 
+/**
+ * For the layout of the responsive sidebar settings.
+ */
+fieldset.mayo-layout-form div.form-type-radio label, div.smalltouch-portrait-layout {
+  background: url(../images/page-layouts-sprite.png);
+  height: 60px;
+  width: 60px;
+  display: block;
+  margin-top: 4px;
+  text-align: center;
+}
+
+fieldset.mayo-layout-form .form-type-radio label[for$=three-col-grail] {
+  background-position: 0 0;
+}
+
+fieldset.mayo-layout-form .form-type-radio label[for$=two-sidebars-right] {
+  background-position: -122px 0;
+}
+
+fieldset.mayo-layout-form .form-type-radio label[for$=two-sidebars-left] {
+  background-position: -61px 0;
+}
+
+fieldset.mayo-layout-form .form-type-radio label[for$=two-sidebars-left-stack] {
+  background-position: -183px 0;
+}
+
+fieldset.mayo-layout-form .form-type-radio label[for$=two-sidebars-right-stack] {
+  background-position: -244px 0;
+}
+
+fieldset.mayo-layout-form .form-type-radio label[for$=one-col-stack] {
+  background-position: -305px 0;
+}
+
+fieldset.mayo-layout-form .form-type-radio label[for$=one-col-vert] {
+  background-position: -366px 0;
+}
+
+div.smalltouch-portrait-layout {
+  background-position: -305px 0;
+}
+
+.mayo-layout-form div.form-item {
+  clear: none;
+  float: left;
+  margin-right: 25px;
+}
+
+fieldset.mayo-layout-form div.form-type-radio label, div.smalltouch-portrait-layout {
+  overflow: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+}
+
+fieldset.mayo-layout-form div.form-type-radio {
+  clear: none;
+  float: left;
+  margin: 0 30px 10px 0;
+  text-align: center;
+  width: 60px;
+}
+
+#main-wrapper {
+  width: 100%;
+  position: relative;
+}
+
+#main {
+  width: 100%;
+}
+
+@media only screen and (max-width: 320px) {
+  #top-columns .column-block-wrapper {
+    width: 100% !important;
+    margin-top: 1em;
+  }
+
+  #top-columns .column-block-wrapper .column-block {
+    height: auto !important;
+    margin: 0 !important;
+  }
+}
+#content,
+#sidebar-first,
+#sidebar-second {
+  margin: 0;
+  width: 100%;
+}
+#content img,
+#sidebar-first img,
+#sidebar-second img {
+  max-width: 100%;
+  height: auto;
+}
+
+@media only screen and (max-width: 320px) {
+  #content img,
+  #sidebar-first img,
+  #sidebar-second img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  #site-name a, #header h1 a, #header h1 a:link, #header h1 a:visited {
+    font-size: .75em;
+    font-weight: 800;
+    line-height: 1em;
+    text-decoration: none;
+  }
+
+  #site-slogan {
+    font-size: 12px;
+  }
+}
+@media only screen and (min-width: 321px) and (max-width: 480px) {
+  #content img,
+  #sidebar-first img,
+  #sidebar-second img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  input.form-text {
+    width: 95%;
+  }
+
+  #site-name a, #header h1 a, #header h1 a:link, #header h1 a:visited {
+    font-size: .9em;
+    font-weight: 800;
+    line-height: 1em;
+    text-decoration: none;
+  }
+
+  #site-slogan {
+    font-size: 12px;
+  }
+}
+@media only screen and (min-width: 481px) and (max-width: 768px) {
+  #content img,
+  #sidebar-first img,
+  #sidebar-second img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  input.form-text {
+    width: 75%;
+  }
+
+  #top-columns .column-block-wrapper {
+    width: 100% !important;
+    margin-top: 1em;
+  }
+
+  #top-columns .column-block-wrapper .column-block {
+    height: auto !important;
+    margin: 0 !important;
+  }
+
+  #sidebar-first.sb-one,
+  #sidebar-second.sb-one {
+    margin: 0;
+    width: 50% !important;
+  }
+  #sidebar-first.sb-one img,
+  #sidebar-second.sb-one img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  #site-name a, #header h1 a, #header h1 a:link, #header h1 a:visited {
+    font-size: 1.4em;
+    font-weight: 800;
+    line-height: 1em;
+    text-decoration: none;
+  }
+}
+@media only screen and (min-width: 769px) and (max-width: 1024px) {
+  #content img,
+  #sidebar-first img,
+  #sidebar-second img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  input.form-text {
+    width: 75%;
+  }
+
+  #top-columns .column-block-wrapper {
+    width: 100% !important;
+    margin-top: 1em;
+  }
+
+  #top-columns .column-block-wrapper .column-block {
+    height: auto !important;
+    margin: 0 !important;
+  }
+
+  #sidebar-first.sb-one,
+  #sidebar-second.sb-one {
+    margin: 0;
+    width: 50% !important;
+  }
+  #sidebar-first.sb-one img,
+  #sidebar-second.sb-one img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  #site-name a, #header h1 a, #header h1 a:link, #header h1 a:visited {
+    font-size: 1.7em;
+    font-weight: 800;
+    line-height: 1em;
+    text-decoration: none;
+  }
+}
+/*@include MQ(standard-pc) {
+}   */
diff --git a/drupal7/sites/all/themes/mayo/images/fontsizer-1-o.png b/drupal7/sites/all/themes/mayo/images/fontsizer-1-o.png
old mode 100644
new mode 100755
diff --git a/drupal7/sites/all/themes/mayo/images/fontsizer-1.png b/drupal7/sites/all/themes/mayo/images/fontsizer-1.png
old mode 100644
new mode 100755
diff --git a/drupal7/sites/all/themes/mayo/images/fontsizer-2-o.png b/drupal7/sites/all/themes/mayo/images/fontsizer-2-o.png
old mode 100644
new mode 100755
diff --git a/drupal7/sites/all/themes/mayo/images/fontsizer-2.png b/drupal7/sites/all/themes/mayo/images/fontsizer-2.png
old mode 100644
new mode 100755
diff --git a/drupal7/sites/all/themes/mayo/images/fontsizer-3-o.png b/drupal7/sites/all/themes/mayo/images/fontsizer-3-o.png
old mode 100644
new mode 100755
diff --git a/drupal7/sites/all/themes/mayo/images/fontsizer-3.png b/drupal7/sites/all/themes/mayo/images/fontsizer-3.png
old mode 100644
new mode 100755
diff --git a/drupal7/sites/all/themes/mayo/images/page-layouts-sprite.png b/drupal7/sites/all/themes/mayo/images/page-layouts-sprite.png
new file mode 100644
index 00000000..a36e7cf3
Binary files /dev/null and b/drupal7/sites/all/themes/mayo/images/page-layouts-sprite.png differ
diff --git a/drupal7/sites/all/themes/mayo/images/round-corners.png b/drupal7/sites/all/themes/mayo/images/round-corners.png
old mode 100644
new mode 100755
diff --git a/drupal7/sites/all/themes/mayo/images/sidebar-layout.png b/drupal7/sites/all/themes/mayo/images/sidebar-layout.png
deleted file mode 100644
index 584665f0..00000000
Binary files a/drupal7/sites/all/themes/mayo/images/sidebar-layout.png and /dev/null differ
diff --git a/drupal7/sites/all/themes/mayo/inc/README.txt b/drupal7/sites/all/themes/mayo/inc/README.txt
new file mode 100644
index 00000000..50e8a9b7
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/inc/README.txt
@@ -0,0 +1,2 @@
+The responsive layout structure is adapted from the AdaptiveTheme project by
+Jeff Burnz. https://drupal.org/project/adaptivetheme
diff --git a/drupal7/sites/all/themes/mayo/inc/forms/mayo.submit.builders.inc b/drupal7/sites/all/themes/mayo/inc/forms/mayo.submit.builders.inc
new file mode 100644
index 00000000..6d0d7db0
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/inc/forms/mayo.submit.builders.inc
@@ -0,0 +1,56 @@
+<?php
+
+/**
+ * @file
+ * Page Layout CSS Builder.
+ */
+
+global $theme_key, $theme_name;
+$theme_name = $theme_key;
+$_path_to_mayo = drupal_get_path('theme', 'mayo');
+require_once($_path_to_mayo . '/inc/plugins.inc');
+
+/**
+ * Build Page Layouts
+ *
+ * Unlike the Panels layouts which hold CSS in their data array the Page layout
+ * plugins each include a unique CSS builder function. This is required because
+ * page layouts are all bespoke and can accept arbitrary user input for the
+ * sidebar widths and must support three value units - pixles, em's and
+ * percentages.  In other words building a one-size-fits-all builder function
+ * would be overly complex and its far more flexible for themers to be able to
+ * define thier own.
+ *
+ * As values come in from the submit function they are dispatched to the right
+ * builder function.
+ *
+ * @param $method, tells the function which layout builder function to call.
+ * @param $sidebar_first, an arbitrary numeric value.
+ * @param $sidebar_second, an arbitrary numeric value.
+ * @param $sidebar_unit, one of px, em or %.
+ * @param $theme_name, the active theme.
+ *
+ * @see three_col_grail_layout() for an example of a builder function with docs.
+ */
+function mayo_build_page_layout($method, $sidebar_first, $sidebar_second, $sidebar_unit, $theme_name = NULL) {
+  // Use the passed in theme_name, else grab it from global $theme_key
+  if ($theme_name == NULL) {
+    global $theme_key;
+    $theme_name = $theme_key;
+  }
+
+  $output = '';
+
+  // We need to invoke mayo_load_plugins() to get the function names, this is
+  // rather expensive but we're in a submit function so IMO this is OK.
+  mayo_load_plugins($theme_name, $plugin_type = 'page_layout');
+
+  $builder_functions = page_layouts_data_structure($theme_name);
+  foreach ($builder_functions as $function_prefix => $redundant_values) {
+    if ($method === $function_prefix) {
+      $function = $function_prefix . '_layout';
+      $output = $function($sidebar_first, $sidebar_second, $sidebar_unit);
+    }
+  }
+  return $output;
+}
diff --git a/drupal7/sites/all/themes/mayo/inc/forms/mayo.submit.inc b/drupal7/sites/all/themes/mayo/inc/forms/mayo.submit.inc
new file mode 100644
index 00000000..03711312
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/inc/forms/mayo.submit.inc
@@ -0,0 +1,41 @@
+<?php
+
+/**
+ * @file
+ * Process all form values. Uses multiple other include files and helper
+ * functions to handle various operations.
+ */
+global $_path_to_mayo;
+$_path_to_mayo = drupal_get_path('theme', 'mayo');
+
+// Helper functions for processing the page layout.
+include($_path_to_mayo . '/inc/forms/mayo.submit.builders.inc');
+
+/**
+ * Custom submit function - this mostly builds and saves stylesheets for
+ * various features such as the responsive layout and font styles.
+ *
+ * @param $form
+ * @param $form_state
+ */
+function mayo_settings_submit($form, &$form_state) {
+  global $_path_to_mayo;
+
+  // Set form_state values into one variable
+  $values = $form_state['values'];
+
+  // Get the active theme name, $theme_key will return the admin theme
+  $theme_name = $form_state['build_info']['args'][0];
+
+  // Set the path variable to the right path
+  $path = 'public://mayo/' . $theme_name . '_files';
+  $values['path'] = $path;
+
+  // Set up the files directory for the generated files
+  file_prepare_directory($path, FILE_CREATE_DIRECTORY);
+  variable_set('theme_' . $theme_name . '_files_directory', $path);
+
+  // Include processing for page & panels layouts, and responsive styles
+  require_once($_path_to_mayo . '/inc/forms/mayo.submit.responsive.inc');
+  mayo_submit_reponsive($values, $theme_name, $path);
+}
diff --git a/drupal7/sites/all/themes/mayo/inc/forms/mayo.submit.responsive.inc b/drupal7/sites/all/themes/mayo/inc/forms/mayo.submit.responsive.inc
new file mode 100644
index 00000000..97516130
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/inc/forms/mayo.submit.responsive.inc
@@ -0,0 +1,178 @@
+<?php
+
+/**
+ * @file
+ * Build and save the responsive layout.
+ *
+ * This is the main submit handler for building the layout.
+ * The output is a stylesheet saved to public
+ * files - the main responsive layout.
+ */
+function mayo_submit_reponsive($values, $theme_name, $path) {
+  global $_path_to_mayo;
+  // Set up some paths we use to get and save files
+  $path_to_responsive_css = drupal_get_path('theme', $theme_name) . '/css/';
+  $path_to_panels_css = $_path_to_mayo . '/layouts/css/';
+
+  // Get the page layout config array
+  $layout_variables = assemble_page_layout();
+
+  // $layouts will hold all the page level layouts
+  $layouts = array();
+
+  // Initialize the $is_default_layout variable, we use this to test against
+  $is_default_layout = 'smalltouch-portrait';
+
+  // Holds all styles from the responsive stylesheets
+  $responsive_styles = array();
+
+  // Smalltouch Landscape
+  if ($values['smalltouch_landscape_layout']) {
+
+    $device = 'smalltouch_landscape';
+
+    // Build an array of page layout settings values
+    foreach ($layout_variables as $key => $value) {
+      if (isset($values["$device" . '_' . "$value"])) {
+        $smalltouch_landscape_layout_data[$value] = check_plain($values["$device" . '_' . "$value"]);
+      }
+    }
+    $layout = mayo_build_page_layout($smalltouch_landscape_layout_data['layout'], $smalltouch_landscape_layout_data['sidebar_first'], $smalltouch_landscape_layout_data['sidebar_second'], $smalltouch_landscape_layout_data['sidebar_unit'], $theme_name);
+
+    $method = $smalltouch_landscape_layout_data['layout'];
+    $comment = "/* $device $method */\n";
+    $width = "\n" . '#page-wrapper {width:' . $smalltouch_landscape_layout_data['page_width'] . $smalltouch_landscape_layout_data['page_unit'] . '}';
+    $media_query = $smalltouch_landscape_layout_data['media_query'];
+
+    // Build the styles string
+    $styles = $width . "\n" . $layout;
+
+    // CSS wrapped in the media query
+    $css = $comment . '@media ' . $media_query . ' {' . $styles . "\n" . '}';
+
+    // Get and wrap the responsive CSS styles in the relative media query
+    $responsive_smalltouch_landscape_css = '';
+    $layouts[] = $css;
+  }
+
+  // Tablet Portrait
+  if ($values['tablet_portrait_layout']) {
+
+    $device = 'tablet_portrait';
+
+    // Build an array of page layout settings values
+    foreach ($layout_variables as $key => $value) {
+      if (isset($values["$device" . '_' . "$value"])) {
+        $tablet_portrait_layout_data[$value] = check_plain($values["$device" . '_' . "$value"]);
+      }
+    }
+    // Workaround upgrade issues for some settings
+    if ($tablet_portrait_layout_data['layout'] == 'two_col_stack') {
+      $tablet_portrait_layout_data['layout'] = 'two_sidebars_right_stack';
+    }
+    $layout = mayo_build_page_layout($tablet_portrait_layout_data['layout'], $tablet_portrait_layout_data['sidebar_first'], $tablet_portrait_layout_data['sidebar_second'], $tablet_portrait_layout_data['sidebar_unit'], $theme_name);
+
+    $method = $tablet_portrait_layout_data['layout'];
+    $comment = "/* $device $method */\n";
+    $width = "\n" . '#page-wrapper {width:' . $tablet_portrait_layout_data['page_width'] . $tablet_portrait_layout_data['page_unit'] . '}';
+    $media_query = $tablet_portrait_layout_data['media_query'];
+
+    // Build the styles string
+    $styles = $width . "\n" . $layout;
+
+    // CSS wrapped in the media query
+    $css = $comment . '@media ' . $media_query . ' {' . $styles . "\n" . '}';
+    $layouts[] = $css;
+  }
+
+  // Tablet Landscape
+  if ($values['tablet_landscape_layout']) {
+
+    $device = 'tablet_landscape';
+
+    // Build an array of page layout settings values
+    foreach ($layout_variables as $key => $value) {
+      if (isset($values["$device" . '_' . "$value"])) {
+        $tablet_landscape_layout_data[$value] = check_plain($values["$device" . '_' . "$value"]);
+      }
+    }
+    // Workaround upgrade issues for some settings
+    if ($tablet_portrait_layout_data['layout'] == 'two_col_stack') {
+      $tablet_portrait_layout_data['layout'] = 'two_sidebars_right_stack';
+    }
+    $layout = mayo_build_page_layout($tablet_landscape_layout_data['layout'], $tablet_landscape_layout_data['sidebar_first'], $tablet_landscape_layout_data['sidebar_second'], $tablet_landscape_layout_data['sidebar_unit'], $theme_name);
+
+    $method = $tablet_landscape_layout_data['layout'];
+    $comment = "/* $device $method */\n";
+    $width = "\n" . '#page-wrapper {width:' . $tablet_landscape_layout_data['page_width'] . $tablet_landscape_layout_data['page_unit'] . '}';
+    $media_query = $tablet_landscape_layout_data['media_query'];
+
+    // Build the styles string
+    $styles = $width . "\n" . $layout;
+
+    // CSS wrapped in the media query
+    $css = $comment . '@media ' . $media_query . ' {' . $styles . "\n" . '}';
+    $layouts[] = $css;
+  }
+  // Standard Layout (bigscreen)
+  if ($values['bigscreen_layout']) {
+
+    $device = 'bigscreen';
+    // Build an array of page layout settings values
+    foreach ($layout_variables as $key => $value) {
+      if (isset($values["$device" . '_' . "$value"])) {
+        $bigscreen_layout_data[$value] = check_plain($values["$device" . '_' . "$value"]);
+      }
+    }
+    $layout = mayo_build_page_layout($bigscreen_layout_data['layout'], $bigscreen_layout_data['sidebar_first'], $bigscreen_layout_data['sidebar_second'], $bigscreen_layout_data['sidebar_unit'], $theme_name);
+
+    $method = $bigscreen_layout_data['layout'];
+    $comment = "/* $device $method */";
+    $width = "\n" . '#page-wrapper {width:' . $bigscreen_layout_data['page_width'] . $bigscreen_layout_data['page_unit'] . '}';
+    $media_query = $bigscreen_layout_data['media_query'];
+
+    // Standard layout can have a max-width
+    $values['bigscreen_set_max_width'] = 0;
+    if ($values['bigscreen_set_max_width'] === 1 && $bigscreen_layout_data['page_unit'] === '%') {
+      if (!empty($values['bigscreen_max_width'])) {
+        $width = "\n" . '#page-wrapper {width:' . $bigscreen_layout_data['page_width'] . $bigscreen_layout_data['page_unit'] . ';max-width:' . $values['bigscreen_max_width'] . $values['bigscreen_max_width_unit'] . '}';
+      }
+      else {
+        $width = "\n" . '#page-wrapper {width:' . $bigscreen_layout_data['page_width'] . $bigscreen_layout_data['page_unit'] . ';max-width:' . $values['bigscreen_max_width'] . $values['bigscreen_max_width_unit'] . '}';
+      }
+    }
+
+    // Build the styles string
+    $styles = $width . "\n" . $layout;
+    $css = $comment . "\n" . '@media ' . $media_query . ' {' . $styles . "\n" . '}';
+
+    // add $css to the layouts array
+    $layouts[] = $css;
+  }
+  //****** END bigscreen layout ******//
+
+  // Get and wrap the responsive CSS styles in the relative media query
+  // responsive layout
+  $responsive_layout_data = implode("\n", $layouts);
+  $responsive_layout = $responsive_layout_data;
+
+  // Aggregate the design stylesheets
+  $responsive_css = implode("\n", $responsive_styles);
+
+  // Regex relative paths. This mimics Drupal core drupal_build_css_cache(), but
+  // its not as powerful because assets must be relative to the theme root.
+  $_base = base_path() . $path_to_responsive_css;
+  _drupal_build_css_path(NULL, $_base);
+  $responsive_css = preg_replace_callback('/url\(\s*[\'"]?(?![a-z]+:|\/+)([^\'")]+)[\'"]?\s*\)/i', '_drupal_build_css_path', $responsive_css);
+
+  // Build a keyed array: file names as key, layout data as value
+  $files = array(
+    "$theme_name.responsive.layout" => $responsive_layout,
+  );
+
+  // Loop over the array and save each file, and we're done!
+  foreach ($files as $key => $value) {
+    $filepath = "$path/$key.css";
+    file_unmanaged_save_data($value, $filepath, FILE_EXISTS_REPLACE);
+  }
+}
diff --git a/drupal7/sites/all/themes/mayo/inc/forms/mayo.validate.inc b/drupal7/sites/all/themes/mayo/inc/forms/mayo.validate.inc
new file mode 100644
index 00000000..ae4a33d2
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/inc/forms/mayo.validate.inc
@@ -0,0 +1,42 @@
+<?php
+
+/**
+ * @file
+ * Validatation for some of the theme settings.
+ *
+ * @param $form
+ * @param $form_state
+ */
+function mayo_settings_validate($form, &$form_state) {
+  $values = $form_state['values'];
+  $theme_name = $form_state['build_info']['args'][0];
+
+  // Validate our form #state required fields, #states are UI only.
+  // Bigscreen
+  if (empty($values['bigscreen_sidebar_first'])) {
+    form_set_error('bigscreen_sidebar_first', t('Standard Layout <em>First sidebar</em> width is empty - you must enter a value.'));
+  }
+  if (empty($values['bigscreen_sidebar_second'])) {
+    form_set_error('bigscreen_sidebar_second', t('Standard Layout <em>Second sidebar</em> width is empty - you must enter a value.'));
+  }
+
+  // Tablet
+  if (empty($values['tablet_landscape_sidebar_first'])) {
+    form_set_error('tablet_landscape_sidebar_first', t('Tablet Landscape <em>First sidebar</em> width is empty - you must enter a value.'));
+  }
+  if ($values['tablet_landscape_layout'] === 'three_col_grail' || $values['tablet_landscape_layout'] === 'two_sidebars_left' || $values['tablet_landscape_layout'] === 'two_sidebars_right') {
+    if (empty($values['tablet_landscape_sidebar_second'])) {
+      form_set_error('tablet_landscape_sidebar_second', t('Tablet Landscape <em>First sidebar</em> width is empty - you must enter a value. The layout you selected requires values for both sidebars.'));
+    }
+  }
+
+  // Smalltouch
+  if ($values['smalltouch_landscape_layout'] === 'one_col_vert') {
+    if (empty($values['smalltouch_landscape_sidebar_first'])) {
+      form_set_error('smalltouch_landscape_sidebar_first', t('Smalltouch First Sidebar width is empty - enter a value or choose another layout.'));
+    }
+    if (empty($values['smalltouch_landscape_sidebar_second'])) {
+      form_set_error('smalltouch_landscape_sidebar_second', t('Smalltouch Second Sidebar width is empty - enter a value or choose another layout.'));
+    }
+  }
+}
diff --git a/drupal7/sites/all/themes/mayo/inc/get.inc b/drupal7/sites/all/themes/mayo/inc/get.inc
new file mode 100644
index 00000000..a787af24
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/inc/get.inc
@@ -0,0 +1,59 @@
+<?php
+
+/**
+ * @file
+ * Provides frequently used functions that get theme info, settings and
+ * other data.
+ */
+
+/**
+ * Return the info file array for a particular theme, usually the active theme.
+ * Simple wrapper function for list_themes().
+ *
+ * @param $theme_name
+ */
+function mayo_get_info($theme_name) {
+  $info = drupal_static(__FUNCTION__, array());
+  if (empty($info)) {
+    $lt = list_themes();
+    foreach ($lt as $key => $value) {
+      if ($theme_name == $key) {
+        $info = $lt[$theme_name]->info;
+      }
+    }
+  }
+
+  return $info;
+}
+
+/**
+ * Returns an array keyed by theme name.
+ *
+ * Return all the info file data for a particular theme including base
+ * themes. Parts of this function are shamelessly ripped from Drupal core's
+ * _drupal_theme_initialize().
+ *
+ * @param $theme_name, usually the active theme.
+ */
+function mayo_get_info_trail($theme_name) {
+  $info_trail = drupal_static(__FUNCTION__, array());
+  if (empty($info_trail)) {
+    $lt = list_themes();
+
+    // First check for base themes and get info
+    $base_theme = array();
+    $ancestor = $theme_name;
+    while ($ancestor && isset($lt[$ancestor]->base_theme)) {
+      $ancestor = $lt[$ancestor]->base_theme;
+      $base_theme[] = $lt[$ancestor];
+    }
+    foreach ($base_theme as $base) {
+      $info_trail[$base->name]['info'] = $base->info;
+    }
+
+    // Now the active theme
+    $info_trail[$theme_name]['info'] = $lt[$theme_name]->info;
+  }
+
+  return $info_trail;
+}
diff --git a/drupal7/sites/all/themes/mayo/inc/load.inc b/drupal7/sites/all/themes/mayo/inc/load.inc
new file mode 100644
index 00000000..6ce65f92
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/inc/load.inc
@@ -0,0 +1,57 @@
+<?php
+global $_theme_name;
+$_theme_name = $GLOBALS['theme_key'];
+
+/**
+ * @file
+ * Provides frequently used functions that load something, ususally CSS or JS
+ * files, or that provide assistance to those loaders.
+ */
+
+/**
+ * Load stylesheet to set the layout.
+ *
+ * Each time you save the theme settings MAYO builds a layout stylesheet:
+ * The file is named: themeName.responsive.layout.css
+ *
+ * @param $path
+ * @param $theme_name
+ */
+function mayo_load_layout_css($path, $theme_name) {
+  global $_theme_name;
+  // Get the info file data
+  $info = mayo_get_info($theme_name);
+
+  // Load the responsive layout
+  $filepath = $path . '/' . $theme_name . '.responsive.layout.css';
+  $media_query = 'only screen'; // keyword "only" hide this from unsupporting user agents
+  mayo_load_subtheme_responsive_styles($filepath, $media_query, $theme_name, $weight = 0);
+}
+
+/**
+ * Load Sub-theme Responsive Stylesheets.
+ * Wrapper function for drupal_add_css() that takes advantage of Drupals's
+ * CSS aggregation logic to trick Drupal into always loading responsive
+ * stylesheets in link elements.
+ *
+ * This is almost always called from mayo_preprocess_html(), only in
+ * a rare instance might this be called from a sub-theme (to load additional
+ * responsive stylesheets).
+ *
+ * @param $filepath, path to the CSS file.
+ * @param $media_query, the media query from theme settings.
+ * @param $theme_name, the active theme.
+ * @param $weight, optional.
+ */
+function mayo_load_subtheme_responsive_styles($filepath, $media_query, $theme_name, $weight = 0) {
+  if (file_exists($filepath)) {
+    drupal_add_css($filepath, array(
+      'preprocess' => variable_get('preprocess_css', '') == 1 ? TRUE : FALSE,
+      'group' => CSS_THEME,
+      'media' => $media_query,
+      'every_page' => TRUE,
+      'weight' => $weight,
+      )
+    );
+  }
+}
diff --git a/drupal7/sites/all/themes/mayo/inc/plugins.inc b/drupal7/sites/all/themes/mayo/inc/plugins.inc
new file mode 100644
index 00000000..5d99ffce
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/inc/plugins.inc
@@ -0,0 +1,225 @@
+<?php
+
+/**
+ * @file
+ * MAYO plugin sub-system.
+ */
+
+/**
+ * Find and return all plugins.
+ *
+ * This will search all base themes and the active theme for "plugins" in their
+ * info files, and return all plugins directories.
+ * MAYO page layouts uses:
+ * - "plugins[page_layout][layout] = layouts/core"
+ *
+ * @param $theme_name, usually the active theme.
+ */
+function mayo_get_plugins($theme_name) {
+  $plugins = drupal_static(__FUNCTION__, array());
+  if (empty($plugins)) {
+      $plugins_list = array();
+      $themes_info = mayo_get_info_trail($theme_name);
+      // Look for and get all the plugins
+      if (!empty($themes_info)) {
+        foreach ($themes_info as $this_theme => $theme_info) {
+          foreach ($theme_info as $info) {
+            if (array_key_exists('plugins', $info)) {
+              foreach ($info['plugins'] as $plugin_type => $types) {
+                $plugins_list[$this_theme][$plugin_type] = $types;
+              }
+            }
+          }
+        }
+        array_unique($plugins_list);
+        $plugins = $plugins_list;
+      }
+  }
+  return $plugins;
+}
+
+/**
+ * Return the paths to all plugin providers plugin directories, this usually
+ * means themes - both base themes and sub-themes that include plugin directory
+ * declarations in their info files.
+ *
+ * @param $theme_name, ususally the active theme.
+ */
+function mayo_get_plugins_paths($theme_name) {
+  $provider_paths = array();
+  $plugins_list = mayo_get_plugins($theme_name);
+
+  foreach ($plugins_list as $plugin_provider => $provider) {
+    foreach ($provider as $plugin_type => $types) {
+      foreach ($types as $type => $path) {
+        $provider_path = drupal_get_path('theme', $plugin_provider) . '/' . $path;
+        $provider_paths[$plugin_provider][$plugin_type][$type] = $provider_path;
+      }
+    }
+  }
+
+  return $provider_paths;
+}
+
+/**
+ * Returns all files for plugins of a particular type.
+ * This is called from mayo_load_plugins(), cannot be cached else it will return
+ * stale data at some point.
+ *
+ * @param $theme_name
+ */
+function mayo_get_plugins_files($theme_name) {
+  $plugins_files = array();
+  $plugins_list = mayo_get_plugins($theme_name);
+
+  $extension = 'inc';
+  foreach ($plugins_list as $plugin_provider => $provider) {
+    foreach ($provider as $plugin_type => $types) {
+      foreach ($types as $type => $path) {
+        $provider_path = drupal_get_path('theme', $plugin_provider) . '/' . $path;
+        $plugins_files[$plugin_provider][$plugin_type][$type] = file_scan_directory($provider_path, '/\.' . $extension . '$/', array('key' => 'name'));
+      }
+    }
+  }
+
+  return $plugins_files;
+}
+
+/**
+ * Extract plugin data structures.
+ *
+ * In essence what this does is return the data strutures (arrays) for all
+ * plugins of a particular type. MAYO only uses the "page_layout" type.
+ * This is hard to cache because it takes the
+ * $plugin_type parameter, so everything else that calls this is heavily cached
+ * instead. It does support an "everything else" plugin type, whatever that is.
+ *
+ * @param $theme_name, usually the active theme.
+ * @param $plugin_type, the plugin type you need to return, usually one of
+ * "panels" or "page_layout".
+ */
+function mayo_load_plugins($theme_name, $plugin_type) {
+  $plugin_data_structures = array();
+  $plugins_list = mayo_get_plugins_files($theme_name);
+  $plugins_array = array();
+  foreach ($plugins_list as $plugin_provider => $plugin_types) {
+    $plugin_providers[] = $plugin_provider;
+    foreach ($plugin_types as $type => $plugins) {
+      if ($type === $plugin_type) {
+        foreach ($plugins as $ptypes => $plugin) {
+          $plugins_array[$plugin_provider][$type] = $plugin;
+        }
+      }
+    }
+  }
+  $plugin_files = array();
+  foreach ($plugins_array as $provider => $types) {
+    foreach ($types as $key => $value) {
+      $plugin_files = array_merge_recursive($plugin_files, $value);
+    }
+  }
+
+  foreach ($plugin_files as $file_data) {
+
+    include_once(DRUPAL_ROOT . '/' . $file_data->uri);
+
+    // page_layout
+    if ($plugin_type === 'page_layout') {
+      $identifier = $file_data->name;
+      $page_layout_function = $identifier;
+      if (function_exists($page_layout_function)) {
+        $plugin_data_structures[] = $page_layout_function();
+      }
+    }
+
+    // everything else
+    elseif ($plugin_type !== 'panels' && $plugin_type !== 'page_layout') {
+      $identifier = $file_data->name;
+      $function = $identifier;
+      if (function_exists($function)) {
+        $plugin_data_structures[] = $function();
+      }
+      else {
+        drupal_set_message(t('You defined an existing plugin type but no functions exists that match. If you are using Panels then you must use the "function method" in your plugins.'), 'error');
+      }
+    }
+  }
+
+  if (empty($plugin_data_structures)) {
+    return;
+  }
+  return $plugin_data_structures;
+}
+
+/**
+ * Return Page layout data structures.
+ * This returns the full data structures for all page layout plugins. Because
+ * this can be a lot of data and appears to be computationally expensive to get
+ * it is cached in the cache table.
+ *
+ * @param $theme_name, the active theme.
+ */
+function page_layouts_data_structure($theme_name = NULL) {
+  // Use the passed in theme_name, else grab it from the global variable
+  if ($theme_name == NULL) {
+    global $theme_key;
+    $theme_name = $theme_key;
+  }
+
+  $page_data_structure = drupal_static(__FUNCTION__, array());
+  if (empty($page_data_structure)) {
+      $data_structure = mayo_load_plugins($theme_name, $plugin_type = 'page_layout');
+      foreach ($data_structure as $plugin => $datum) {
+        foreach ($datum as $method => $layout) {
+          $page_data_structure[$method] = $layout;
+        }
+      }
+  }
+  return $page_data_structure;
+}
+
+/**
+ * Return option arrays for forms.
+ * Returns the options for radio lists in the page layout settings in the
+ * appearance theme settings.
+ *
+ * @param $theme_name
+ */
+function page_layouts_device_group_options($theme_name) {
+  $device_group_options = drupal_static(__FUNCTION__, array());
+  if (empty($device_group_options)) {
+    $layout_methods = page_layouts_data_structure();
+    foreach ($layout_methods as $method => $values) {
+      foreach ($values as $key => $value) {
+        if ($key == 'device_groups') {
+          $method_values[$method] = $value;
+        }
+      }
+    }
+    foreach ($method_values as $this_method => $these_values) {
+      foreach ($these_values as $k => $dv) {
+        $device_group_options[$dv][] = $this_method;
+      }
+    }
+  }
+
+  return $device_group_options;
+}
+
+/**
+ * Base config for page layout builder.
+ * This is used in mayo_core.submit.responsive.inc to help retrieve the form
+ * values for each device groups layout.
+ */
+function assemble_page_layout() {
+  $variables_array = array(
+    'layout',
+    'media_query',
+    'page_width',
+    'page_unit',
+    'sidebar_first',
+    'sidebar_second',
+    'sidebar_unit',
+  );
+  return $variables_array;
+}
diff --git a/drupal7/sites/all/themes/mayo/js/mayo-columns.js b/drupal7/sites/all/themes/mayo/js/mayo-columns.js
index 704cad7c..ab54854d 100644
--- a/drupal7/sites/all/themes/mayo/js/mayo-columns.js
+++ b/drupal7/sites/all/themes/mayo/js/mayo-columns.js
@@ -1,6 +1,6 @@
 /**
  * @file
- * Equolize the column height in a specified group
+ * Equalize the column height in a specified group.
  */
 jQuery(document).ready(function() {
   mayoEqualHeight(jQuery("#top-columns .column-block"));
diff --git a/drupal7/sites/all/themes/mayo/js/mayo-fontsize.js b/drupal7/sites/all/themes/mayo/js/mayo-fontsize.js
index 38b8caac..935417e6 100644
--- a/drupal7/sites/all/themes/mayo/js/mayo-fontsize.js
+++ b/drupal7/sites/all/themes/mayo/js/mayo-fontsize.js
@@ -1,6 +1,6 @@
 /**
  * @file
- * Adds javascript functions for font resizing
+ * Adds javascript functions for font resizing.
  */
 jQuery(document).ready(function() {
   var originalFontSize = jQuery('body').css('font-size');
diff --git a/drupal7/sites/all/themes/mayo/js/mayo.js b/drupal7/sites/all/themes/mayo/js/mayo.js
index 0ca15066..8862bc00 100644
--- a/drupal7/sites/all/themes/mayo/js/mayo.js
+++ b/drupal7/sites/all/themes/mayo/js/mayo.js
@@ -1,6 +1,6 @@
 /**
  * @file
- * Provides the administration JavaScript for the Mayo theme settings page
+ * Provides the administration JavaScript for the Mayo theme settings page.
  */
 
 (function ($) {
diff --git a/drupal7/sites/all/themes/mayo/layouts/core/_README.txt b/drupal7/sites/all/themes/mayo/layouts/core/_README.txt
new file mode 100644
index 00000000..acdc0613
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/layouts/core/_README.txt
@@ -0,0 +1,14 @@
+The responsive layout structure is adapted from the AdaptiveTheme project by
+Jeff Burnz. https://drupal.org/project/adaptivetheme Many of the comments are left intact
+and that is where the "AT" comes from that is seen throughout.
+
+AT Page Layout Plugins
+----------------------
+
+These plugins provide the main page layout settings and CSS. Each plugin
+defines a layout "method" which is basically CSS that sets the position and
+bebaviour of the columns, i.e. the two sidebars and the main content column.
+
+For exstenive docs on the structure and syntax for a plugin see the
+"three_col_grail" page layout, after reading this you should be able to make
+your own layout plugin.
diff --git a/drupal7/sites/all/themes/mayo/layouts/core/one_col_stack/one_col_stack.inc b/drupal7/sites/all/themes/mayo/layouts/core/one_col_stack/one_col_stack.inc
new file mode 100644
index 00000000..1a8adbd5
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/layouts/core/one_col_stack/one_col_stack.inc
@@ -0,0 +1,40 @@
+<?php
+
+/**
+ * @file
+ * Implimentation of a Page Layout Plugin for MAYO.
+ *
+ * @see three_col_grail.inc for detailed documentation.
+ */
+function one_col_stack() {
+  $page_layout['one_col_stack'] = array(
+    'title'    => t('One Column Stacked'),
+    'method'   => 'one_col_stack',
+    'type'     => 'page_layout',
+    'device_groups' => array(
+      'tablet_portrait',
+      'smalltouch_landscape',
+     ),
+  );
+
+  return $page_layout;
+}
+
+/**
+ * CSS Builder for the one_col_stack layout.
+ * Note: this is the only layout for smalltouch portrait, and for mobile first.
+ * All columns and regions are 100% width, stacked.
+ *
+ * @param $sidebar_first, an arbitary numeric value.
+ * @param $sidebar_second, an arbitary numeric value.
+ * @param $sidebar_unit, a value unit, one of px, em or %.
+ */
+function one_col_stack_layout($sidebar_first, $sidebar_second, $sidebar_unit) {
+  $styles = <<<EOF
+#sidebar-first,#sidebar-second {float:none;clear:both;display:block;width:100%;margin-left:0;margin-right:0}
+#top-columns .column-block-wrapper {width: 100% !important; margin-top: 1em;}
+#top-columns .column-block-wrapper .column-block {height: auto ; margin: 0 !important;}
+EOF;
+
+  return $styles;
+}
diff --git a/drupal7/sites/all/themes/mayo/layouts/core/one_col_vert/one_col_vert.inc b/drupal7/sites/all/themes/mayo/layouts/core/one_col_vert/one_col_vert.inc
new file mode 100644
index 00000000..caca580b
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/layouts/core/one_col_vert/one_col_vert.inc
@@ -0,0 +1,51 @@
+<?php
+
+/**
+ * @file
+ * Implimentation of a Page Layout Plugin for MAYO.
+ *
+ * @see three_col_grail.inc for detailed documentation.
+ */
+function one_col_vert() {
+  $page_layout['one_col_vert'] = array(
+    'title'    => t('One Column Vertical Sidebars'),
+    'method'   => 'one_col_vert',
+    'type'     => 'page_layout',
+    'device_groups' => array(
+      'tablet_portrait',
+      'smalltouch_landscape',
+     ),
+  );
+
+  return $page_layout;
+}
+
+/**
+ * CSS Builder for the one_col_vert layout.
+ * Displays sidebars vertically side by side beneath the main content column.
+ *
+ * @param $sidebar_first, an arbitary numeric value.
+ * @param $sidebar_second, an arbitary numeric value.
+ * @param $sidebar_unit, a value unit, one of px, em or %.
+ */
+function one_col_vert_layout($sidebar_first, $sidebar_second, $sidebar_unit) {
+
+  $one_sidebar    = $sidebar_first + $sidebar_second . $sidebar_unit;
+  $sidebar_first  = $sidebar_first . $sidebar_unit;
+  $sidebar_second = $sidebar_second . $sidebar_unit;
+
+  $styles = <<<EOF
+.two-sidebars #content,.one-sidebar #content,#sidebar-first,#sidebar-second {margin-left: 0; margin-right: 0}
+#sidebar-first {width: $sidebar_first}
+.one-sidebar #sidebar-first {width: 100%;}
+#sidebar-second {width: $sidebar_second}
+#sidebar-first,#sidebar-second {overflow: hidden; margin-top: 20px; float: left; clear: none}
+#sidebar-first .section {margin-right: 5px; margin-left: 0;}
+.one-sidebar #sidebar-first .section {margin-right: 0; margin-left: 0;}
+#sidebar-second .section {margin-right: 0; margin-left: 5px;}
+#top-columns .column-block-wrapper {width: 100% !important; margin-top: 1em;}
+#top-columns .column-block-wrapper .column-block {height: auto ; margin: 0 !important;}
+EOF;
+
+  return $styles;
+}
diff --git a/drupal7/sites/all/themes/mayo/layouts/core/three_col_grail/three_col_grail.inc b/drupal7/sites/all/themes/mayo/layouts/core/three_col_grail/three_col_grail.inc
new file mode 100644
index 00000000..58fc28d6
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/layouts/core/three_col_grail/three_col_grail.inc
@@ -0,0 +1,74 @@
+<?php
+
+/**
+ * @file
+ * Implimentation of a Page Layout Plugin.
+ *
+ * Usage:
+ * The naming convetion here is very important, the function name must match the
+ * method name and the array key. Do not add anything else to it. In the layout
+ * function simply append "_layout", this gets called when the user submits the
+ * theme settings form.
+ *
+ */
+function three_col_grail() {                     // - function name must be identical to the method and the array key.
+  $page_layout['three_col_grail'] = array(       // - array key.
+    'title'     => t('Three Column Holy Grail'), // - title, needed for the UI.
+    'method'    => 'three_col_grail',            // - method, this must match the function name and the key, definitly not optional!
+    'type'      => 'page_layout',                // - type, tell the system this is a page_layout, not optional!
+    'admin css' => 'three_col_grail.admin.css',  // - admin css, optional.
+    'device_groups' => array(                    // - device_groups, define which device groups this layout can work with, can be one or more of:
+      'bigscreen',                               //   'bigscreen', 'tablet_landscape', 'tablet_portrait', 'smalltouch_landscape'
+      'tablet_landscape',                        //   What you enter here will dictate the device groups it shows for in theme settings.
+     ),
+  );
+
+  return $page_layout;
+}
+
+/**
+ * CSS Builder for the three_col_grail layout.
+ * This does not have to be anything like this, but it must return a string of
+ * CSS, thats about it, and only has 3 bits of data to work with that come
+ * from the theme settings (what the user entered in the UI), of course you can
+ * just make up your own data if that works for  your layout, see the
+ * one_col_stack for such an implimentation.
+ *
+ * Remember, if you are building a sub-theme you have full control over the
+ * theme settings form via your sub-themes hook_form_system_theme_settings_alter()
+ * in theme-settings.php
+ *
+ * @param $sidebar_first, an arbitary numeric value.
+ * @param $sidebar_second, an arbitary numeric value.
+ * @param $sidebar_unit, a value unit, one of px, em or %.
+
+ */
+function three_col_grail_layout($sidebar_first, $sidebar_second, $sidebar_unit) {
+
+  // Set variables for language direction. In thoery a layout plugin could
+  // be RTL compatible.
+  $left = 'left';
+  $right = 'right';
+
+  // Set vars for your sidebars, this can be very different, and entirely
+  // depends on your layout.
+  $sidebar_second = $sidebar_second . $sidebar_unit;
+  $sidebar_first  = $sidebar_first . $sidebar_unit;
+
+  // Define margins/negative margins if required, AT is a content source
+  // ordered layout and uses a negative margin layout system.
+  $push_right = $sidebar_second;
+  $push_left  = $sidebar_first;
+  $pull_right = $sidebar_second;
+
+  $styles = <<<EOF
+.two-sidebars #content .section {margin-$left: $push_left; margin-$right: $push_right}
+.one-sidebar #content .section {margin-$left: $push_left;}
+#sidebar-first .section {margin-left: 0; margin-right: 10px;}
+#sidebar-second .section {margin-right: 0; margin-left: 10px;}
+#sidebar-first {width: $sidebar_first; margin-$left: -100%}
+#sidebar-second {width: $sidebar_second; margin-$left: -$pull_right}
+EOF;
+
+  return $styles;
+}
diff --git a/drupal7/sites/all/themes/mayo/layouts/core/two_sidebars_left/two_sidebars_left.inc b/drupal7/sites/all/themes/mayo/layouts/core/two_sidebars_left/two_sidebars_left.inc
new file mode 100644
index 00000000..27a75aea
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/layouts/core/two_sidebars_left/two_sidebars_left.inc
@@ -0,0 +1,55 @@
+<?php
+
+/**
+ * @file
+ * Implimentation of a Page Layout Plugin for MAYO.
+ *
+ * @see three_col_grail.inc for detailed documentation.
+ */
+function two_sidebars_left() {
+  $page_layout['two_sidebars_left'] = array(
+    'title'    => t('Two Sidebars Left'),
+    'method'   => 'two_sidebars_left',
+    'type'     => 'page_layout',
+    'device_groups' => array(
+      'bigscreen',
+      'tablet_landscape',
+     ),
+  );
+
+  return $page_layout;
+}
+
+/**
+ * CSS Builder for the two_sidebars_left layout.
+ * Positions both sidebars to the left of the main content column.
+ *
+ * @param $sidebar_first, an arbitary numeric value.
+ * @param $sidebar_second, an arbitary numeric value.
+ * @param $sidebar_unit, a value unit, one of px, em or %.
+ */
+function two_sidebars_left_layout($sidebar_first, $sidebar_second, $sidebar_unit) {
+
+  $left = 'left';
+  $right = 'right';
+
+  $content_margin = $sidebar_second + $sidebar_first . $sidebar_unit;
+  $content_margin_one_sidebar = $sidebar_first . $sidebar_unit;
+  $sidebar_first  = $sidebar_first . $sidebar_unit;
+  $sidebar_second = $sidebar_second . $sidebar_unit;
+  $left_margin    = $sidebar_first;
+  $right_margin   = $sidebar_second;
+  $push_right     = $sidebar_first;
+
+  $styles = <<<EOF
+.two-sidebars #content .section {margin-$left: $content_margin; margin-$right: 0}
+.one-sidebar #content .section {margin-$left: $content_margin_one_sidebar; margin-$right: 0}
+#sidebar-first .section {margin-left: 0; margin-right: 10px;}
+#sidebar-second .section {margin-left: 0; margin-right: 10px;}
+#sidebar-first {width: $sidebar_first; margin-$left: -100%}
+#sidebar-second {width: $sidebar_second; margin-$left: -100%}
+.two-sidebars #sidebar-second {width: $sidebar_second; position: relative; $left: $push_right}
+EOF;
+
+  return $styles;
+}
diff --git a/drupal7/sites/all/themes/mayo/layouts/core/two_sidebars_left_stack/two_sidebars_left_stack.inc b/drupal7/sites/all/themes/mayo/layouts/core/two_sidebars_left_stack/two_sidebars_left_stack.inc
new file mode 100644
index 00000000..9e20e324
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/layouts/core/two_sidebars_left_stack/two_sidebars_left_stack.inc
@@ -0,0 +1,53 @@
+<?php
+
+/**
+ * @file
+ * Implimentation of a Page Layout Plugin for MAYO.
+ *
+ * @see three_col_grail.inc for detailed documentation.
+ */
+function two_sidebars_left_stack() {
+  $page_layout['two_sidebars_left_stack'] = array(
+    'title'    => t('Two Sidebars Left Stacked'),
+    'method'   => 'two_sidebars_left_stack',
+    'type'     => 'page_layout',
+    'device_groups' => array(
+      'tablet_landscape',
+      'tablet_portrait',
+     ),
+  );
+
+  return $page_layout;
+}
+
+/**
+ * CSS Builder for the two_sidebars_left_stack layout.
+ * Both sidebars are pushed to the left, however the second sidebar wraps below
+ * the main content column and is 100% width. Sometimes known as a "column drop"
+ * layout, and conceptually similar to the two_sidebars_right_stack.
+ *
+ * @param $sidebar_first, an arbitary numeric value.
+ * @param $sidebar_second, an arbitary numeric value.
+ * @param $sidebar_unit, a value unit, one of px, em or %.
+ */
+function two_sidebars_left_stack_layout($sidebar_first, $sidebar_second, $sidebar_unit) {
+
+  $left = 'left';
+  $right = 'right';
+
+  $sidebar_first = $sidebar_first . $sidebar_unit;
+  $push_left     = $sidebar_first;
+
+  $styles = <<<EOF
+.two-sidebars #content .section {margin-$left: $push_left; margin-$right: 0}
+.one-sidebar #content .section {margin-$left: $push_left; margin-$right: 0}
+#sidebar-first {width: $sidebar_first; margin-$left: -100%}
+#sidebar-first .section { margin-left: 0; margin-right: 10px;}
+#sidebar-second .region-sidebar-second { display: table; width: 100%;border-spacing: 10px;}
+#sidebar-second {width: 100%; margin-left: 0; margin-right: 0; margin-top: 20px; clear: both; overflow: hidden; display: table-row;}
+#sidebar-second .block {display: table-cell;}
+#sidebar-second .section { margin: 0 -10px; }
+EOF;
+
+  return $styles;
+}
diff --git a/drupal7/sites/all/themes/mayo/layouts/core/two_sidebars_right/two_sidebars_right.inc b/drupal7/sites/all/themes/mayo/layouts/core/two_sidebars_right/two_sidebars_right.inc
new file mode 100644
index 00000000..88e89a7e
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/layouts/core/two_sidebars_right/two_sidebars_right.inc
@@ -0,0 +1,57 @@
+<?php
+
+/**
+ * @file
+ * Implimentation of a Page Layout Plugin for MAYO.
+ *
+ * @see three_col_grail.inc for detailed documentation.
+ */
+function two_sidebars_right() {
+  $page_layout['two_sidebars_right'] = array(
+    'title'    => t('Two Sidebars Right'),
+    'method'   => 'two_sidebars_right',
+    'type'     => 'page_layout',
+    'device_groups' => array(
+      'bigscreen',
+      'tablet_landscape',
+     ),
+  );
+
+  return $page_layout;
+}
+
+/**
+ * CSS Builder for the two_sidebars_right layout.
+ * Positions both sidebars to the right of the main content column.
+ *
+ * @param $sidebar_first, an arbitary numeric value.
+ * @param $sidebar_second, an arbitary numeric value.
+ * @param $sidebar_unit, a value unit, one of px, em or %.
+ */
+function two_sidebars_right_layout($sidebar_first, $sidebar_second, $sidebar_unit) {
+
+  $left = 'left';
+  $right = 'right';
+
+  $content_margin = $sidebar_second + $sidebar_first . $sidebar_unit;
+  $content_margin_one_sidebar = $sidebar_first . $sidebar_unit;
+  $sidebar_first  = $sidebar_first . $sidebar_unit;
+  $sidebar_second = $sidebar_second . $sidebar_unit;
+  $push_left      = $sidebar_first;
+  $push_right     = $sidebar_second;
+  $left_margin    = $content_margin;
+  $right_margin   = $sidebar_second;
+
+  $styles = <<<EOF
+#double-right,#content-column,.content-column,div.sidebar {float: left; clear: none}
+.two-sidebars #content .section {margin-$right: $content_margin; margin-$left: 0}
+.one-sidebar #content .section {margin-$right: $content_margin_one_sidebar; margin-$left: 0}
+#sidebar-first .section {margin-right: 0; margin-left: 10px;}
+#sidebar-second .section {margin-right: 0; margin-left: 10px;}
+#sidebar-first {width: $sidebar_first; margin-$left: -$left_margin}
+.one-sidebar #sidebar-first {width: $sidebar_first; margin-$left: -$content_margin_one_sidebar}
+#sidebar-second {width: $sidebar_second; margin-$left: -$right_margin}
+EOF;
+
+  return $styles;
+}
diff --git a/drupal7/sites/all/themes/mayo/layouts/core/two_sidebars_right_stack/two_sidebars_right_stack.inc b/drupal7/sites/all/themes/mayo/layouts/core/two_sidebars_right_stack/two_sidebars_right_stack.inc
new file mode 100644
index 00000000..d6dc731a
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/layouts/core/two_sidebars_right_stack/two_sidebars_right_stack.inc
@@ -0,0 +1,53 @@
+<?php
+
+/**
+ * @file
+ * Implimentation of a Page Layout Plugin for MAYO.
+ *
+ * @see three_col_grail.inc for detailed documentation.
+ */
+function two_sidebars_right_stack() {
+  $page_layout['two_sidebars_right_stack'] = array(
+    'title'    => t('Two Sidebars Right'),
+    'method'   => 'two_sidebars_right_stack',
+    'type'     => 'page_layout',
+    'device_groups' => array(
+      'tablet_landscape',
+      'tablet_portrait',
+     ),
+  );
+
+  return $page_layout;
+}
+
+/**
+ * CSS Builder for the two_sidebars_right_stack layout.
+ * Both sidebars are pushed to the right, however the second sidebar wraps below
+ * the main content column and is 100% width. Sometimes known as a "column drop"
+ * layout, and conceptually similar to the two_sidebars_left_stack.
+ *
+ * @param $sidebar_first, an arbitary numeric value.
+ * @param $sidebar_second, an arbitary numeric value.
+ * @param $sidebar_unit, a value unit, one of px, em or %.
+ */
+function two_sidebars_right_stack_layout($sidebar_first, $sidebar_second, $sidebar_unit) {
+
+  $left = 'left';
+  $right = 'right';
+
+  $sidebar_first = $sidebar_first . $sidebar_unit;
+  $push_right    = $sidebar_first;
+
+  $styles = <<<EOF
+.two-sidebars #content .section {margin-$left: 0; margin-$right: $push_right}
+.one-sidebar #content .section {margin-$left: 0; margin-$right: $push_right}
+#sidebar-first {width: $sidebar_first; margin-$left: -$push_right; float: left; clear: none;}
+#sidebar-first .section { margin-left: 10px; margin-right: 0;}
+#sidebar-second .region-sidebar-second { display: table; width: 100%;border-spacing: 10px;}
+#sidebar-second {width: 100%; margin-left: 0; margin-right: 0; margin-top: 20px; clear: both; overflow: hidden; display: table-row;}
+#sidebar-second .block {display: table-cell;}
+#sidebar-second .section { margin: 0 -10px;}
+EOF;
+
+  return $styles;
+}
diff --git a/drupal7/sites/all/themes/mayo/mayo.info b/drupal7/sites/all/themes/mayo/mayo.info
index 0801ab83..c7f105f0 100644
--- a/drupal7/sites/all/themes/mayo/mayo.info
+++ b/drupal7/sites/all/themes/mayo/mayo.info
@@ -3,7 +3,6 @@ name = MAYO
 description = Simple but fully customizable and colorable fixed/liquid layout theme
 core = 7.x
 
-stylesheets[all][] = css/layout.css
 stylesheets[all][] = css/style.css
 stylesheets[all][] = css/colors.css
 
@@ -40,6 +39,8 @@ regions[footer_column_third] = Footer third column
 regions[footer_column_fourth] = Footer fourth column
 regions[footer] = Footer
 
+plugins[page_layout][layouts] = layouts/core
+
 settings[shortcut_module_link] = 0
 
 settings[base_font_size] = 87.5%
@@ -52,7 +53,8 @@ settings[base_vmargin] = 14px
 settings[page_width] = 90%
 settings[page_margin] = 10px
 settings[layout_style] = 1
-settings[round_corners] = 0
+settings[legacy_superfish_styles] = 0
+settings[round_corners] = 'rc-0'
 
 settings[header_searchbox] = 1
 settings[header_fontsizer] = 0
@@ -62,25 +64,91 @@ settings[logo_top_margin] = 15px
 settings[logo_left_margin] = 20px
 settings[sitename_top_margin] = 15px
 settings[sitename_left_margin] = 20px
-settings[searchbox_top_margin] = 20px
+settings[searchbox_top_margin] = 10px
 settings[searchbox_right_margin] = 15px
-settings[searchbox_size] = 24
+settings[searchbox_size] = 12
 settings[header_bg_file] = ''
 settings[header_bg_alignment] = 'top left'
 settings[header_watermark] = 0
 
 settings[menubar_style] = 1
+settings[menubar_background] = 0
+settings[menubar_bg_value] = '#ffffff'
 
-settings[sidebar_layout_style] = 1
-settings[sidebar_first_width] = 25%
-settings[sidebar_second_width] = 25%
+settings[bigscreen_sidebar_layout_style] = 1
+settings[bigscreen_sidebar_first_width] = 25%
+settings[bigscreen_sidebar_second_width] = 25%
 
 settings[display_breadcrumb] = 1
 settings[dark_messages] = 0
 
-; Information added by Drupal.org packaging script on 2014-02-11
-version = "7.x-1.3"
+settings[global_default_layout] = 'smalltouch-portrait'
+settings[iphone-land] = 0
+settings[iphone-port] = 0
+settings[ipad-port] = 0
+settings[ipad-landscape] = 0
+settings[standard-pc] = 1
+
+;----------// Layout Settings
+  ; Layout settings - Standard layout
+  settings[bigscreen_layout]         = 'three_col_grail'
+  settings[bigscreen_page_unit]      = '%'
+  settings[bigscreen_sidebar_unit]   = '%'
+  settings[bigscreen_max_width_unit] = 'px'
+  settings[bigscreen_page_width]     = 90
+  settings[bigscreen_sidebar_first]  = 25
+  settings[bigscreen_sidebar_second] = 25
+  settings[bigscreen_set_max_width]  = 1
+  settings[bigscreen_max_width]      = 1140
+  settings[bigscreen_media_query]    = 'only screen and (min-width:1025px)'
+
+
+  ; Layout settings - Tablet landscape
+  settings[tablet_landscape_layout]         = 'three_col_grail'
+  settings[tablet_landscape_page_unit]      = '%'
+  settings[tablet_landscape_sidebar_unit]   = '%'
+  settings[tablet_landscape_page_width]     = 90
+  settings[tablet_landscape_sidebar_first]  = 20
+  settings[tablet_landscape_sidebar_second] = 20
+  settings[tablet_landscape_media_query]    = 'only screen and (min-width:769px) and (max-width:1024px)'
+
+
+  ; Layout settings - Tablet portrait
+  settings[tablet_portrait_layout]         = 'one_col_vert'
+  settings[tablet_portrait_page_unit]      = '%'
+  settings[tablet_portrait_sidebar_unit]   = '%'
+  settings[tablet_portrait_page_width]     = 90
+  settings[tablet_portrait_sidebar_first]  = 50
+  settings[tablet_portrait_sidebar_second] = 50
+  settings[tablet_portrait_media_query]    = 'only screen and (min-width:481px) and (max-width:768px)'
+
+
+  ; Layout settings - Smalltouch landscape
+  settings[smalltouch_landscape_layout]         = 'one_col_vert'
+  settings[smalltouch_landscape_page_unit]      = '%'
+  settings[smalltouch_landscape_sidebar_unit]   = '%'
+  settings[smalltouch_landscape_page_width]     = 100
+  settings[smalltouch_landscape_sidebar_first]  = 50
+  settings[smalltouch_landscape_sidebar_second] = 50
+  settings[smalltouch_landscape_media_query]    = 'only screen and (min-width:321px) and (max-width:480px)'
+
+
+  ; Layout settings - Smalltouch portrait
+  settings[smalltouch_portrait_layout]         = 'one_col_stack'
+  settings[smalltouch_portrait_page_unit]      = '%'
+  settings[smalltouch_portrait_sidebar_unit]   = '%'
+  settings[smalltouch_portrait_page_width]     = 100
+  settings[smalltouch_portrait_sidebar_first]  = 100
+  settings[smalltouch_portrait_sidebar_second] = 100
+  settings[smalltouch_portrait_media_query]    = 'only screen and (max-width:320px)'
+
+  ; CSS
+  settings[global_default_layout]         = 'smalltouch-portrait'
+  settings[global_default_layout_toggle]  = 0
+  settings[global_files_path]             = 'public_files'
+; Information added by Drupal.org packaging script on 2014-05-07
+version = "7.x-2.0"
 core = "7.x"
 project = "mayo"
-datestamp = "1392154713"
+datestamp = "1399497228"
 
diff --git a/drupal7/sites/all/themes/mayo/sass/black-menu.scss b/drupal7/sites/all/themes/mayo/sass/black-menu.scss
new file mode 100644
index 00000000..3b79dc84
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/sass/black-menu.scss
@@ -0,0 +1,151 @@
+
+#menubar, /* for nice_menus, superfish */
+#navigation,
+#preview #preview-navigation {
+  background: url('../images/black-menu.png') repeat center left;
+  border-bottom-width: 0px;
+  padding: 4px 4px 4px 8px;
+}
+#submenubar {
+  padding: 2px 4px 2px 8px;
+}
+
+#navigation ul li,
+#preview #preview-navigation ul li {
+  border-right-color: #333;
+}
+#navigation ul li a,
+#preview #preview-navigation ul li a {
+  color: #ddd;
+  font-weight: normal;
+  font-size: small;
+}
+#navigation ul li a:hover,
+#preview #preview-#navigation ul li a:hover {
+  color: #fff;
+  background-color: #444;
+  text-decoration: none;
+}
+#navigation ul.main-menu li:hover,
+#navigation ul.main-menu li a:hover {
+  color: #fff;
+  background-color: #444;
+  background: #444;
+  text-decoration: none;
+}
+#navigation ul li a:hover { /* needed for IE */
+  color: #fff;
+  background: #444;
+  text-decoration: none;
+}
+
+/*--------------- superfish ----------------*/
+#menubar .sf-menu li a {
+  background: #000 url('../images/black-menu.png') repeat center left;
+  border-right-color: #333;
+  color: #ddd;
+  font-weight: normal;
+}
+#menubar .sf-menu li ul li a {
+  background: #000;
+}
+#menubar .sf-menu li.last ul li a,
+#menubar .sf-menu li ul li a,
+#menubar .sf-menu li ul li.last a {
+  border-color: #333;
+  background-color: #000;
+}
+#menubar .sf-menu li a:hover,
+#menubar .sf-menu li.last a:hover {
+  color: #fff;
+  text-decoration: none;
+  background: #444;
+}
+#menubar .sf-menu ul {
+  border-color: #333;
+}
+
+/*-------------- nice_menus -----------------*/
+#menubar ul.nice-menu {
+  z-index: 99; /* makes drop down menu item for the menubar comes front of sub menubar */
+  background: url('../images/black-menu.png') repeat center left;
+}
+#menubar .nice-menu a,
+#menubar .nice-menu a:active,
+#menubar .nice-menu a:visited,
+#menubar .nice-menu a:focus {
+  color: #ddd;
+}
+#menubar .nice-menu a:hover {
+  color: #fff;
+  text-decoration: none;
+}
+#menubar ul.nice-menu li a {
+  /* root menu items */
+  background: url('../images/black-menu.png') repeat center left;
+}
+
+#menubar ul.nice-menu li ul li.menuparent a,
+#menubar ul.nice-menu li ul li.menuparent a:hover,
+#menubar ul.nice-menu li ul li.menuparent:hover,
+#menubar ul.nice-menu li ul li.menuparent {
+  /* drop down menu item that has child menu */
+  background-image: url('../images/arrow-right-lite.png');
+  background-repeat: no-repeat;
+  background-position: 95%;
+}
+#menubar ul.nice-menu li ul li.menuparent li a {
+  background-image: none; /* do not delete! */
+}
+#menubar ul.nice-menu li.menuparent li a {
+  background-image: none; /* do not delete! */
+  background-color: #000;
+}
+#menubar ul.nice-menu li.menuparent li {
+  background-image: none; /* do not delete! */
+  background-color: #000;
+}
+#menubar ul.nice-menu li ul li.menuparent li a:hover {
+  background-image: none; /* do not delete! */
+  background: #444;
+}
+
+#menubar ul.nice-menu li.menuparent {
+  /* root menu item that has drop down menu */
+  background: url('../images/black-menu.png') repeat center left;
+}
+#menubar ul.nice-menu li.menuparent a {
+  /* root menu item that has drop down menu */
+  background-image: url('../images/arrow-down-lite.png');
+  background-repeat: no-repeat;
+  background-position: 90%;
+}
+#menubar ul.nice-menu li a {
+  /* root menu item that has no drop down menu */
+  border-right-color: #333;
+}
+#menubar ul.nice-menu li.last ul li a,
+#menubar ul.nice-menu li ul li a,
+#menubar ul.nice-menu li ul li.last a {
+  /* drop down menu items */
+  border-color: #333;
+  background: #000;
+}
+
+#menubar ul.nice-menu li a:hover,
+#menubar ul.nice-menu li.menuparent a:hover {
+  /* root menu item hover color */
+  background: #444;
+}
+#menubar ul.nice-menu li.menuparent a:hover {
+  /* root menu item that has drop down menu */
+  background-image: url('../images/arrow-down-lite.png');
+  background-repeat: no-repeat;
+  background-position: 90%;
+}
+#menubar ul.nice-menu li.menuparent li a:hover {
+  background-image: none;
+}
+#menubar ul.nice-menu li ul {
+  border: solid 1px #333;
+}
diff --git a/drupal7/sites/all/themes/mayo/sass/colors.scss b/drupal7/sites/all/themes/mayo/sass/colors.scss
new file mode 100644
index 00000000..9f88e14b
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/sass/colors.scss
@@ -0,0 +1,275 @@
+@import "compass";
+/* ---------- Color Module Styles ----------- */
+
+body,
+#page-wrapper {
+  background-color: #9f8365;
+  color: #3b3b3b;
+}
+#main,
+body.overlay {
+  background-color: #fef8dd;
+  color: #3b3b3b;
+}
+#page { /* bg */
+  background-color: #fef8dd;
+}
+#main-menu-links li a.active,
+#main-menu-links li.active-trail a {
+  background-color: #fef8dd;
+}
+.tabs ul.secondary li a,
+.tabs ul.primary li a {
+  border-color: #e3ddb0;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  background-color: #fef8dd;
+}
+.tabs ul.secondary li a.active:hover,
+.tabs ul.secondary li a:hover,
+.tabs ul.primary li a.active:hover,
+.tabs ul.primary li a:hover {
+  background-color: #e7e3a6;
+}
+.tabs ul.secondary li a.active,
+.tabs ul.primary li a.active {
+}
+.tabs ul.secondary li.active a,
+.tabs ul.primary li.active a {
+  background-color: #fef8dd;
+  border-color: #e3ddb0;
+}
+.tabs ul.secondary li {
+  border-color: #e3ddb0;
+}
+#header {
+  background-color: #f99301;
+  @include background-image(linear-gradient(to right, #f99301, #ddff61));
+}
+a.visited,
+a {
+  color: #739400;
+}
+a:hover,
+a:focus {
+  color: #638400;
+}
+a:active {
+  color: #638400;
+}
+li a.active {
+  /* important! */
+  color: #3b3b3b;
+}
+.column-block,
+.sidebar .block {
+  background-color: #fdefaa;
+  border-color: #fceea9;
+  color: #5a5a5a;
+}
+.column-block h2,
+.sidebar h2 {
+  border-bottom-color: #dccf93;
+  color: #5a5a5a;
+}
+.column-block a,
+.sidebar a {
+  color: #cb6806;
+}
+.column-block table tr th,
+.sidebar .block table tr th {
+  border-color: #dccf93;
+  border-color: #fdefaa;
+  		border-color: #dccf93;
+}
+
+.node {
+  background-color: #fefefe;
+  border-color: #ececec;
+}
+.node h2 { /* nodedividers */
+  border-color: #b8c195;
+}
+.node-sticky {
+  background-color: #e6fba7;
+}
+.node .submitted {
+  color: #777777;
+}
+
+#menubar,
+#submenubar,
+#navigation {
+  border-bottom-color: #e3ddb0;
+}
+#navigation ul li {
+  border-right-color: #e3ddb0;
+  color: #3b3b3b;
+}
+#navigation ul li.last {
+  border-right: none;
+}
+.highlight {
+  background-color: #e7e3a6;
+}
+div.item-list ul.pager li a:hover,
+#navigation ul li a:hover {
+  background-color: #e7e3a6;
+}
+#page-title {
+  background-color: #94974e;
+  color: #f1f1f1;
+}
+#content .block h2 { /* main content: block title */
+  background-color: #94974e;
+  color: #f1f1f1;
+}
+#content .node h2 { /* main content: block title */
+  background-color: transparent;
+  color: #3b3b3b;
+}
+#content .node-sticky h2 { /* main content: block title */
+  background-color: transparent;
+}
+#footer-wrapper {
+  background-color: #564939;
+  color: #cccccc;
+}
+#footer-wrapper a {
+  color: #f0cb00;
+}
+#footer-wrapper .column-block {
+  background-color: #564939;
+  color: #cccccc;
+}
+#footer-wrapper .column-block h2 {
+  border: none;
+  color: #cccccc;
+}
+#footer-wrapper .column-block a {
+  color: #f0cb00;
+}
+#footer {
+  background-color: #564939;
+  color: #cccccc;
+}
+#footer a {
+  color: #f0cb00;
+}
+.region-header,
+.region-header a,
+.region-header li a.active,
+#header #name-and-slogan,
+#header #name-and-slogan a {
+  color: #fcfcfc;
+}
+
+form fieldset {
+  border: solid 1px #e3ddb0;
+}
+
+blockquote {
+  border-color: #b8c195;
+}
+
+/*-------------- Additional for dark colors --------------*/
+.filter-wrapper {
+  background-color: #fef8dd;
+}
+
+.comment {
+  background-color: #fefefe;
+  border-color: #ececec;
+}
+.comment h3 {
+  border-color: #b8c195;
+}
+.comment-unpublished {
+  background-color: #fefefe;
+}
+.comment .submitted {
+  color: #777777;
+}
+
+table.views-view-grid tr {
+  background-color: #fef8dd;
+}
+
+td.views-field {
+  background-color: #fef8dd;
+}
+
+table tr th {
+  background-color: #dbdeab;
+  border-right-color: #fef8dd;
+}
+fieldset {
+  border-color: #b8c195; /* nodedivider color */
+}
+tr.even,
+tr.even td {
+  background-color: #ebf0cc;
+}
+tr.odd,
+tr.odd td {
+  background-color: #fefefe;
+}
+tr.even td.active,
+tr.odd td.active {
+  background-image: url('../images/dark.png');
+}
+.profile .user-picture {
+  background-color: #fef8dd;
+}
+.column-block table tr td,
+.sidebar .block table tr td {
+  border-color: #dccf93;
+}
+.column-block table tr.even td,
+.column-block table tr.odd td,
+.sidebar .block table tr.even td,
+.sidebar .block table tr.odd td {
+  /* sidebar table does not have regular table even/odd row background */
+  background-color: #fdefaa;
+}
+
+/*-------------- nice_menus color ---------------*/
+.nice-menu a, .nice-menu a:active, .nice-menu a:visited, .nice-menu a:focus {
+  color: #739400;
+}
+ul.nice-menu li.menuparent a {
+  /* root menu item that has drop down menu */
+  background-color: #fef8dd;
+}
+ul.nice-menu li a {
+  /* root menu item that has no drop down menu */
+  background-color: #fef8dd;
+  border-right-color: #e3ddb0;
+}
+ul.nice-menu li.menuparent a:hover,
+ul.nice-menu li a:hover {
+  /* root menu item hover color */
+  background-color: #e7e3a6;
+}
+ul.nice-menu li.last ul li a,
+ul.nice-menu li ul li a,
+ul.nice-menu li ul li.last a {
+  /* drop down menu items */
+  border-color: #e3ddb0;
+}
+ul.nice-menu li ul li.menuparent {
+  /* drop down menu items that has child menu */
+  background-color: #fef8dd;
+}
+ul.nice-menu li.menuparent li {
+  /* drop down menu items that has no child menu */
+  background: none;
+  background-color: #fef8dd;
+}
+ul.nice-menu li.menuparent li:hover {
+  background: none;
+  background-color: #e7e3a6;
+}
+ul.nice-menu li ul {
+  border: solid 1px #e3ddb0;
+}
diff --git a/drupal7/sites/all/themes/mayo/sass/mayo-superfish.scss b/drupal7/sites/all/themes/mayo/sass/mayo-superfish.scss
new file mode 100644
index 00000000..da1b1f0b
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/sass/mayo-superfish.scss
@@ -0,0 +1,57 @@
+@import "compass";
+@import "partials/variables";
+@import "partials/mixins";
+/**
+ * Superfish menu
+ */
+.sf-menu li a {
+  /* root menu items */
+  font-size: 0.9em;
+  padding: 2px 8px;
+  border: none;
+  border-right-style: solid;
+  border-right-width: 1px;
+  background-color: #fef8dd;
+  border-right-color: #e3ddb0;
+  font-weight: normal;
+}
+.sf-menu a, .sf-menu a:active, .sf-menu a:visited, .sf-menu a:focus {
+  color: #739400;
+}
+.sf-menu li.last a {
+  /* last item of the root menu */
+  border-right: none;
+}
+.sf-menu li.last ul li a,
+.sf-menu li ul li a,
+.sf-menu li ul li.last a {
+  /* all other child menu items */
+  border-style: solid;
+  border-width: 1px;
+  /* border-color is set by colors.css */
+}
+.sf-menu li.menuparent a {
+  /* item with child menu - adding some spaces for arrows */
+  padding: 2px 19px 2px 8px;
+}
+.sf-menu li a.sfHover,
+.sf-menu li a:hover {
+  background-color: #e7e3a6;
+}
+.sf-menu li:hover ul,
+.sf-menu li.sfHover ul {
+  top: 1.8em;
+  border-top: none;
+}
+.sf-sub-indicator {
+  background: url('../images/sf-arrows.png') no-repeat -10px -110px;
+}
+a > .sf-sub-indicator {
+  top: 1em; /* .2em drop in arrows */
+}
+.sf-menu ul {
+  @include border-radius (0px);
+  border-width: 1px;
+  border-style: solid;
+  border-color: #e3ddb0; /* add border around the child menu block */
+}
diff --git a/drupal7/sites/all/themes/mayo/sass/partials/_admin-layout-settings.scss b/drupal7/sites/all/themes/mayo/sass/partials/_admin-layout-settings.scss
new file mode 100644
index 00000000..d6b5b77c
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/sass/partials/_admin-layout-settings.scss
@@ -0,0 +1,39 @@
+/**
+ * For the layout of the responsive sidebar settings.
+ */
+fieldset.mayo-layout-form div.form-type-radio label,div.smalltouch-portrait-layout  {
+    background: url(../images/page-layouts-sprite.png);
+    height: 60px;
+    width: 60px;
+    display:block;
+    margin-top: 4px;
+    text-align: center;
+}
+fieldset.mayo-layout-form .form-type-radio label[for$=three-col-grail]  {background-position: 0 0;}
+fieldset.mayo-layout-form .form-type-radio label[for$=two-sidebars-right]  {background-position: -122px 0;}
+fieldset.mayo-layout-form .form-type-radio label[for$=two-sidebars-left]  {background-position: -61px 0;}
+fieldset.mayo-layout-form .form-type-radio label[for$=two-sidebars-left-stack]  {background-position: -183px 0;}
+fieldset.mayo-layout-form .form-type-radio label[for$=two-sidebars-right-stack]  {background-position: -244px 0;}
+fieldset.mayo-layout-form .form-type-radio label[for$=one-col-stack] {background-position: -305px 0;}
+fieldset.mayo-layout-form .form-type-radio label[for$=one-col-vert] {background-position: -366px 0;}
+div.smalltouch-portrait-layout  {background-position: -305px 0;}
+
+.mayo-layout-form div.form-item {
+    clear: none;
+    float: left;
+    margin-right: 25px;
+}
+
+fieldset.mayo-layout-form div.form-type-radio label, div.smalltouch-portrait-layout {
+    overflow: hidden;
+    text-indent: 100%;
+    white-space: nowrap;
+}
+
+fieldset.mayo-layout-form div.form-type-radio {
+    clear: none;
+    float: left;
+    margin: 0 30px 10px 0;
+    text-align: center;
+    width: 60px;
+}
\ No newline at end of file
diff --git a/drupal7/sites/all/themes/mayo/sass/partials/_base.scss b/drupal7/sites/all/themes/mayo/sass/partials/_base.scss
new file mode 100644
index 00000000..10dea2ed
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/sass/partials/_base.scss
@@ -0,0 +1,66 @@
+/*------- Begin default section --------*/
+* {
+  margin: 0;
+  padding: 0;
+}
+body {
+  font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'URW Palladio L', Baskerville, serif;
+  line-height: 1.5em;
+  font-size: 87.5%; /* = 14px assuming browser's regular font size is 16px */
+}
+ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: disc;
+  margin-left: 10px;
+}
+ol {
+  margin: 0;
+  padding: 0;
+  margin-left: 10px;
+}
+a {
+  text-decoration: none;
+}
+a:hover, a:active, a:focus {
+  text-decoration: underline;
+}
+em {
+  font-style: italic;
+}
+/* p,a,strong,em,li,dl,dt { */
+p,li,dl,dt {
+  margin: 6px 0;
+  line-height: 1.5em;
+}
+dd {
+  margin-left: 2.5em;
+}
+table {
+  width: 100%;
+  margin: 4px 0px;
+}
+h1 {
+  font-size: 1.4em;
+}
+h2 {
+  font-size: 1.3em;
+}
+h3 {
+  font-size: 1.2em;
+}
+h4 {
+  font-size: 1.15em;
+}
+h5 {
+  font-size: 1em;
+}
+fieldset {
+  border-width: 1px;
+  border-style: solid;
+}
+#site-name, #site-slogan {
+  font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'URW Palladio L', Baskerville, serif;
+}
+
+/*------- end of default section --------*/
\ No newline at end of file
diff --git a/drupal7/sites/all/themes/mayo/css/layout.css b/drupal7/sites/all/themes/mayo/sass/partials/_layout.scss
similarity index 77%
rename from drupal7/sites/all/themes/mayo/css/layout.css
rename to drupal7/sites/all/themes/mayo/sass/partials/_layout.scss
index 19eeb49f..62418ec1 100644
--- a/drupal7/sites/all/themes/mayo/css/layout.css
+++ b/drupal7/sites/all/themes/mayo/sass/partials/_layout.scss
@@ -1,11 +1,11 @@
+// ====================================================================
+// Basic Layout Styles
+// ====================================================================
 
-/**
- * Basic Layout Styles
- */
 #page-wrapper {
   margin: 0px auto;
   padding: 0px;
-  width: 100%;
+  max-width: 100%;
   margin-top: 15px;
   margin-bottom: 15px;
 }
@@ -19,14 +19,9 @@
 #main {
 }
 
-body {
-  min-width: 700px;
-}
 #content,
 #sidebar-first,
-#sidebar-second,
-#sidebar-first-r,
-#sidebar-second-r {
+#sidebar-second {
   display: inline;
   float: left;
   position: relative;
diff --git a/drupal7/sites/all/themes/mayo/sass/partials/_mixins.scss b/drupal7/sites/all/themes/mayo/sass/partials/_mixins.scss
new file mode 100644
index 00000000..a514a177
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/sass/partials/_mixins.scss
@@ -0,0 +1,35 @@
+// Mixin for box-sizing
+// ====================================================================
+
+@mixin bs($bs-type: $defined-bs-type) {
+	-webkit-box-sizing: $bs-type;
+	-moz-box-sizing: $bs-type;
+	box-sizing: $bs-type;
+}
+
+// Media Query mixin
+@mixin MQ($canvas) {
+	@if $canvas == iphone-land {
+		@media only screen and (min-width: $XS + 1) and (max-width: $S) { @content; }
+	}
+	@else if $canvas == ipad-port {
+		@media only screen and (min-width: $S + 1) and (max-width: $M) { @content; }
+	}
+	@else if $canvas == ipad-land {
+		@media only screen and (min-width: $M + 1) and (max-width: $L) { @content; }
+	}
+	@else if $canvas == standard-pc {
+		@media only screen and (min-width: $L + 1) { @content; }
+	}
+	@else if $canvas == iphone-port {
+		@media only screen and (max-width: $XS) { @content; }
+	}
+	@else if $canvas == iP4 {
+		@media
+        only screen and (-webkit-min-device-pixel-ratio : 1.5),
+        only screen and(min-device-pixel-ratio : 1.5) { @content; }
+	}
+    @else if $canvas == SBig {
+		@media only screen and (min-width: $BS) { @content; }
+	}
+}
\ No newline at end of file
diff --git a/drupal7/sites/all/themes/mayo/sass/partials/_mobile-first.scss b/drupal7/sites/all/themes/mayo/sass/partials/_mobile-first.scss
new file mode 100644
index 00000000..16816e74
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/sass/partials/_mobile-first.scss
@@ -0,0 +1,42 @@
+// ====================================================================
+// Mobile first layout.
+// This is the layout for smalltouch_portrait which stacks all the columns
+// at 100% width for each. Media queries cause this to be available to
+// only the layouts that have width less than 321px.
+// ====================================================================
+  #main-wrapper {
+  width: 100%;
+  position: relative;
+  }
+
+  #main {
+    width: 100%;
+  }
+  // Limits the stacking of top-column blocks to small screen touch.
+  @media only screen and (max-width:320px) {
+  #top-columns .column-block-wrapper {
+    width: 100% !important;
+    margin-top: 1em;
+  }
+
+  #top-columns .column-block-wrapper .column-block {
+    height: auto !important;
+    margin:0 !important;
+  }
+  }
+  #content,
+  #sidebar-first,
+  #sidebar-second, {
+    margin: 0;
+    width: 100%;
+    img {
+      max-width: 100%; // Make sure all images fit within viewport
+      height: auto; // Correct width from max-width rule above.
+    }
+  }
+
+  #sidebar-first .section,
+  #sidebar-second .section {
+  //  margin:0 !important;
+  }
+
diff --git a/drupal7/sites/all/themes/mayo/sass/partials/_normalize.scss b/drupal7/sites/all/themes/mayo/sass/partials/_normalize.scss
new file mode 100644
index 00000000..50de4224
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/sass/partials/_normalize.scss
@@ -0,0 +1,443 @@
+// =============================================================================
+// Normalize.scss settings
+// =============================================================================
+
+// Set to false if you want to drop support for IE6 and IE7
+// Notice: setting to false might render some elements
+// slightly differently than when set to true
+
+$support-for-ie6-and-ie7: false;
+
+// =============================================================================
+// HTML5 display definitions
+// =============================================================================
+
+// Corrects block display not defined in IE6/7/8/9 & FF3
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+    display: block;
+}
+
+// Corrects inline-block display not defined in IE6/7/8/9 & FF3
+
+audio,
+canvas,
+video {
+    display: inline-block;
+    @if $support-for-ie6-and-ie7 {
+        *display: inline;
+        *zoom: 1;
+    }
+}
+
+// 1. Prevents modern browsers from displaying 'audio' without controls
+// 2. Remove excess height in iOS5 devices
+
+audio:not([controls]) {
+    display: none; // 1
+    height: 0; // 2
+}
+
+// Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
+// Known issue: no IE6 support
+
+[hidden] {
+    display: none;
+}
+
+// =============================================================================
+// Base
+// =============================================================================
+
+// 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
+//    http://clagnut.com/blog/348/#c790
+// 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
+//    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
+
+html {
+    @if $support-for-ie6-and-ie7 {
+        font-size: 100%; // 1
+    }
+    -webkit-text-size-adjust: 100%; // 2
+    -ms-text-size-adjust: 100%; // 2
+}
+
+// Addresses font-family inconsistency between 'textarea' and other form elements.
+
+html,
+button,
+input,
+select,
+textarea {
+    font-family: sans-serif;
+}
+
+// Addresses margins handled incorrectly in IE6/7
+
+body {
+    margin: 0;
+}
+
+// =============================================================================
+// Typography
+// =============================================================================
+
+// Addresses font sizes and margins set differently in IE6/7
+// Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+#header h1 {
+   margin: 0 0;
+}
+
+h2 {
+    font-size: 1.5em;
+    margin: 0.83em 0;
+}
+
+h3 {
+    font-size: 1.17em;
+    margin: 1em 0;
+}
+
+h4 {
+    font-size: 1em;
+    margin: 1.33em 0;
+}
+
+h5 {
+    font-size: 0.83em;
+    margin: 1.67em 0;
+}
+
+h6 {
+    font-size: 0.75em;
+    margin: 2.33em 0;
+}
+
+// Addresses styling not present in IE7/8/9, S5, Chrome
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+// Addresses style set to 'bolder' in FF3+, S4/5, Chrome
+
+b,
+strong {
+    font-weight: bold;
+}
+
+@if $support-for-ie6-and-ie7 {
+    blockquote {
+        margin: 1em 40px;
+    }
+}
+
+// Addresses styling not present in S5, Chrome
+
+dfn {
+    font-style: italic;
+}
+
+// Addresses styling not present in IE6/7/8/9
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+// Addresses margins set differently in IE6/7
+@if $support-for-ie6-and-ie7 {
+    p,
+    pre {
+        margin: 1em 0;
+    }
+}
+
+// Corrects font family set oddly in IE6, S4/5, Chrome
+// en.wikipedia.org/wiki/User:Davidgothberg/Test59
+
+pre,
+code,
+kbd,
+samp {
+    font-family: monospace, serif;
+    @if $support-for-ie6-and-ie7 {
+        _font-family: 'courier new', monospace;
+    }
+    font-size: 1em;
+}
+
+// Improves readability of pre-formatted text in all browsers
+
+pre {
+    white-space: pre;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+// 1. Addresses CSS quotes not supported in IE6/7
+// 2. Addresses quote property not supported in S4
+
+// 1
+@if $support-for-ie6-and-ie7 {
+    q {
+        quotes: none;
+    }
+}
+
+// 2
+
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+small {
+    font-size: 75%;
+}
+
+// Prevents sub and sup affecting line-height in all browsers
+// gist.github.com/413930
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+// =============================================================================
+// Lists
+// =============================================================================
+
+// Addresses margins set differently in IE6/7
+@if $support-for-ie6-and-ie7 {
+    dl,
+    menu,
+    ol,
+    ul {
+        margin: 0;
+        padding: 0;
+    }
+}
+
+@if $support-for-ie6-and-ie7 {
+    dd {
+        margin: 0 0 0 40px;
+    }
+}
+
+// Addresses paddings set differently in IE6/7
+@if $support-for-ie6-and-ie7 {
+    menu,
+    ol,
+    ul {
+        padding: 0 0 0 40px;
+    }
+}
+
+// Corrects list images handled incorrectly in IE7
+
+nav {
+    ul,
+    ol {
+        list-style: none;
+        padding: 0;
+        @if $support-for-ie6-and-ie7 {
+            list-style-image: none;
+        }
+    }
+}
+
+// =============================================================================
+// Embedded content
+// =============================================================================
+
+// 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
+// 2. Improves image quality when scaled in IE7
+//    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+
+img {
+    border: 0; // 1
+    @if $support-for-ie6-and-ie7 {
+        -ms-interpolation-mode: bicubic; // 2
+    }
+}
+
+// Corrects overflow displayed oddly in IE9
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+// =============================================================================
+// Figures
+// =============================================================================
+
+// Addresses margin not present in IE6/7/8/9, S5, O11
+
+figure {
+    margin: 0;
+}
+
+// =============================================================================
+// Forms
+// =============================================================================
+
+// Corrects margin displayed oddly in IE6/7
+@if $support-for-ie6-and-ie7 {
+    form {
+        margin: 0;
+    }
+}
+
+// Define consistent border, margin, and padding
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+// 1. Corrects color not being inherited in IE6/7/8/9
+// 2. Corrects text not wrapping in FF3
+// 3. Corrects alignment displayed oddly in IE6/7
+
+legend {
+    border: 0; // 1
+    padding: 0;
+    white-space: normal; // 2
+    @if $support-for-ie6-and-ie7 {
+        *margin-left: -7px; // 3
+    }
+}
+
+// 1. Corrects font size not being inherited in all browsers
+// 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
+// 3. Improves appearance and consistency in all browsers
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%; // 1
+    margin: 0; // 2
+    vertical-align: baseline; // 3
+    @if $support-for-ie6-and-ie7 {
+        *vertical-align: middle; // 3
+    }
+}
+
+// Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
+
+button,
+input {
+    line-height: normal; // 1
+}
+
+// 1. Improves usability and consistency of cursor style between image-type 'input' and others
+// 2. Corrects inability to style clickable 'input' types in iOS
+// 3. Removes inner spacing in IE7 without affecting normal text inputs
+//    Known issue: inner spacing remains in IE6
+
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+    cursor: pointer; // 1
+    -webkit-appearance: button; // 2
+    @if $support-for-ie6-and-ie7 {
+        *overflow: visible;  // 3
+    }
+}
+
+// Re-set default cursor for disabled elements
+
+button[disabled],
+input[disabled] {
+    cursor: default;
+}
+
+// 1. Addresses box sizing set to content-box in IE8/9
+// 2. Removes excess padding in IE8/9
+// 3. Removes excess padding in IE7
+//    Known issue: excess padding remains in IE6
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; // 1
+    padding: 0; // 2
+    @if $support-for-ie6-and-ie7 {
+        *height: 13px; // 3
+        *width: 13px; // 3
+    }
+}
+
+// 1. Addresses appearance set to searchfield in S5, Chrome
+// 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
+// 3. Removes inner padding and search cancel button in S5, Chrome on OS X
+
+input[type="search"] {
+    -webkit-appearance: textfield; // 1
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; // 2
+    box-sizing: content-box;
+    &::-webkit-search-decoration, &::-webkit-search-cancel-button { // 3
+        -webkit-appearance: none;
+    }
+}
+
+// Removes inner padding and border in FF3+
+// www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
+
+button, input {
+    &::-moz-focus-inner {
+        border: 0;
+        padding: 0;
+    }
+}
+
+// 1. Removes default vertical scrollbar in IE6/7/8/9
+// 2. Improves readability and alignment in all browsers
+
+textarea {
+    overflow: auto; // 1
+    vertical-align: top; // 2
+}
+
+// =============================================================================
+// Tables
+// =============================================================================
+
+// Remove most spacing between table cells
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
\ No newline at end of file
diff --git a/drupal7/sites/all/themes/mayo/sass/partials/_responsive-media.scss b/drupal7/sites/all/themes/mayo/sass/partials/_responsive-media.scss
new file mode 100644
index 00000000..30dbb0f9
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/sass/partials/_responsive-media.scss
@@ -0,0 +1,145 @@
+// ====================================================================
+// Media queries
+// Responsive styles not for layout.
+// ====================================================================
+
+@include MQ(iphone-port) {    // Max   320px.
+
+  #content,
+  #sidebar-first,
+  #sidebar-second {
+    img {
+      max-width: 100%; // Make sure all images fit within viewport
+      height: auto; // Correct width from max-width rule above.
+    }
+  }
+
+  #site-name a, #header h1 a, #header h1 a:link, #header h1 a:visited {
+    font-size: .75em;
+    font-weight: 800;
+    line-height: 1em;
+    text-decoration: none;
+  }
+  #site-slogan {
+    font-size: 12px;
+  }
+}
+
+
+@include MQ(iphone-land) {     // 321px to 480px.
+
+  #content,
+  #sidebar-first,
+  #sidebar-second {
+    img {
+      max-width: 100%; // Make sure all images fit within viewport
+      height: auto; // Correct width from max-width rule above.
+    }
+  }
+
+  input.form-text {
+    width: 95%;
+  }
+
+  #site-name a, #header h1 a, #header h1 a:link, #header h1 a:visited {
+    font-size: .9em;
+    font-weight: 800;
+    line-height: 1em;
+    text-decoration: none;
+  }
+  #site-slogan {
+    font-size: 12px;
+  }
+}
+
+
+@include MQ(ipad-port) {    // 481px to 768px.
+
+  #content,
+  #sidebar-first,
+  #sidebar-second {
+    img {
+      max-width: 100%; // Make sure all images fit within viewport
+      height: auto; // Correct width from max-width rule above.
+    }
+  }
+
+  input.form-text {
+    width: 75%;
+  }
+
+  #top-columns .column-block-wrapper {
+    width: 100% !important;
+    margin-top: 1em;
+  }
+
+  #top-columns .column-block-wrapper .column-block {
+    height: auto !important;
+    margin:0 !important;
+  }
+
+  #sidebar-first.sb-one,
+  #sidebar-second.sb-one {
+    margin: 0;
+    width: 50% !important;
+    img {
+      max-width: 100%; // Make sure all images fit within viewport
+      height: auto; // Correct width from max-width rule above.
+    }
+  }
+
+
+  #site-name a, #header h1 a, #header h1 a:link, #header h1 a:visited {
+    font-size: 1.4em;
+    font-weight: 800;
+    line-height: 1em;
+    text-decoration: none;
+  }
+}
+
+
+@include MQ(ipad-land) {   // 769px to 1024px.
+  #content,
+  #sidebar-first,
+  #sidebar-second {
+    img {
+      max-width: 100%; // Make sure all images fit within viewport
+      height: auto; // Correct width from max-width rule above.
+    }
+  }
+
+  input.form-text {
+    width: 75%;
+  }
+
+  #top-columns .column-block-wrapper {
+    width: 100% !important;
+    margin-top: 1em;
+  }
+
+  #top-columns .column-block-wrapper .column-block {
+    height: auto !important;
+    margin:0 !important;
+  }
+
+  #sidebar-first.sb-one,
+  #sidebar-second.sb-one {
+    margin: 0;
+    width: 50% !important;
+    img {
+      max-width: 100%; // Make sure all images fit within viewport
+      height: auto; // Correct width from max-width rule above.
+    }
+  }
+
+
+  #site-name a, #header h1 a, #header h1 a:link, #header h1 a:visited {
+    font-size: 1.7em;
+    font-weight: 800;
+    line-height: 1em;
+    text-decoration: none;
+  }
+}
+
+/*@include MQ(standard-pc) {
+}   */
\ No newline at end of file
diff --git a/drupal7/sites/all/themes/mayo/sass/partials/_style-settings.scss b/drupal7/sites/all/themes/mayo/sass/partials/_style-settings.scss
new file mode 100644
index 00000000..a71470a3
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/sass/partials/_style-settings.scss
@@ -0,0 +1,38 @@
+// ====================================================================
+// Rounded nodes or sidebars
+// rc-x classes relate to admin setting for rounded corners.
+// .rc-1 Sidebar block only
+// .rc-2 Node only
+// .rc-3 Both sidebar block and node
+// ====================================================================
+.rc-1 .comment,
+.rc-1 .node,
+.rc-2 .column-block,
+.rc-2 .sidebar .block,
+.rc-3 .comment,
+.rc-3 .node,
+.rc-3 .column-block,
+.rc-3 .sidebar .block {
+  @include border-radius (8px);
+}
+
+// ====================================================================
+// Dark color set for message and errors.
+// ====================================================================
+.dark-messages {
+  div.status {
+    background-color: #224422;
+    border: solid 1px #669966;
+    color: #aaccaa;
+  }
+  div.warning {
+    background-color: #666633;
+    border: solid 1px #aaaa44;
+    color: #ccccaa;
+  }
+  div.error {
+    background-color: #663333;
+    border: solid 1px #bb6666;
+    color: #ccaaaa;
+  }
+}
\ No newline at end of file
diff --git a/drupal7/sites/all/themes/mayo/sass/partials/_variables.scss b/drupal7/sites/all/themes/mayo/sass/partials/_variables.scss
new file mode 100644
index 00000000..a86ba9a6
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/sass/partials/_variables.scss
@@ -0,0 +1,13 @@
+// Mixin variables
+// ====================================================================
+$defined-bs-type: border-box !default;
+
+
+// Breakpoint variables
+// ====================================================================
+$XS: 320px;  // Smartphone portrait
+$S: 480px;   // Smartphone landscape
+$M: 768px;   // iPad portrait
+$L: 1024px; // iPad landscape
+$XL: 1224px;  // Desktops and laptops
+$BS: 1824px; // Large screens
\ No newline at end of file
diff --git a/drupal7/sites/all/themes/mayo/sass/style.scss b/drupal7/sites/all/themes/mayo/sass/style.scss
new file mode 100644
index 00000000..bf74449e
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/sass/style.scss
@@ -0,0 +1,736 @@
+// ====================================================================
+// Imports
+// ====================================================================
+
+@import "compass";
+@import "partials/variables";
+@import "partials/mixins";
+@import "partials/normalize";
+@import "partials/base";
+@import "partials/layout";
+@import "partials/style-settings";
+
+.spacer {
+  display: block;
+  margin-top: 10px;
+}
+
+/**
+ * Header
+ */
+#header {
+  padding: 0px;
+  display: block;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+}
+#header-watermark {
+  margin: 0;
+  padding: 0;
+  height: 200px;
+  background-image: none;
+  background-repeat: no-repeat;
+  background-position: top center;
+}
+div#logo {
+  float: left;
+}
+#name-and-slogan {
+  float: left;
+}
+#site-name a,
+#header h1 a,
+#header h1 a:link,
+#header h1 a:visited {
+  font-weight: 800;
+  text-decoration: none;
+  line-height: 1em;
+  font-size: 34px; /* we do not want it changed by text scaling */
+}
+#site-slogan {
+  font-weight: normal;
+  font-style: italic;
+  margin-bottom: 5px;
+  font-size: 15px; /* we do not want it changed by text scaling */
+  line-height: 1em;
+}
+
+/**
+ * Footer
+ */
+#footer-wrapper {
+  text-align: center;
+  clear: both;
+  display: block;
+  margin: 0px;
+  padding: 10px;
+  font-size: 0.9em;
+  font-weight: normal;
+}
+#footer-wrapper .column-block {
+  border-style: solid;
+  border-width: 0px;
+}
+#footer-wrapper .column-block h2 {
+  font-size: 1.5em;
+}
+#footer .block {
+  margin: 5px 0px;
+}
+
+/**
+ * Menu bar (for sub menus)
+ */
+#submenubar,
+#menubar {
+  padding: 0px;
+  margin: 0px;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  padding: 4px 0px;
+}
+#submenubar ul,
+#menubar ul {
+  padding: 0px;
+  margin: 0px;
+}
+
+/**
+ * Top menus (#main-menu, #secondary-menu)
+ */
+#navigation {
+  margin: 0px;
+  padding: 4px 0px 4px 4px;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  overflow: hidden;
+}
+#navigation ul {
+  margin: 0px;
+  padding: 0px;
+  list-style: none;
+}
+#navigation ul li {
+  margin: 0px;
+  padding: 0px;
+  margin-right: 0px;
+  padding: 2px 4px 2px 0px;
+  border-right-style: solid;
+  border-right-width: 1px;
+}
+#navigation ul li.active {
+}
+#navigation ul li a {
+  padding: 2px 4px;
+  font-weight: normal;
+  font-size: 0.9em;
+}
+#navigation ul li a:hover {
+}
+#navigation #main-menu {
+  margin: 0;
+  padding: 0px;
+  float: left;
+}
+#navigation #secondary-menu {
+  margin: 0;
+  padding: 0px;
+  float: right;
+}
+
+/**
+ * Banner area (#banner-top, #banner-bottom)
+ */
+.banner p {
+  padding: 0px;
+  margin: 0px;
+}
+#banner-top,
+#banner-bottom {
+  padding: 0px;
+  border: none;
+  width: 100%;
+}
+
+/**
+ * Highlighted
+ */
+#highlighted .block {
+  margin-bottom: 10px;
+}
+
+.column-block {
+  font-size: 0.9em;
+  margin: 0px;
+  border-style: solid;
+  border-width: 1px;
+}
+.column-block h2 {
+  font-size: 1.25em;
+  line-height: 1em;
+  padding: 2px 0px;
+  margin: 0px 0px 3px 0px;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+}
+
+/**
+ * Sidebar
+ */
+.sidebar * {
+  padding: 0;
+  margin: 0;
+  line-height: 1.6em;
+}
+.sidebar .block {
+  padding: 5px 10px;
+  font-size: 0.9em;
+  margin-bottom: 10px;
+  border-style: solid;
+  border-width: 1px;
+}
+.column-block h2,
+.sidebar h2 {
+  background: transparent;
+  line-height: 1em;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  margin: 4px 0px 2px 0px;
+  padding: 2px 0px;
+  font-size: 1.25em;
+}
+.column-block .content,
+.sidebar .block .content {
+  padding: 5px 2px;
+  /*overflow: hidden; Removed for Superfish */
+}
+
+.column-block table tr th,
+.sidebar .block table tr th {
+  border-style: solid;
+  border-width: 0px;
+  padding: 0px 4px;
+  background: none;
+  border-bottom-width: 3px;
+}
+.column-block table tr td,
+.sidebar .block table tr td {
+  padding: 2px 4px;
+  border-style: solid;
+  border-width: 0px;
+  border-bottom-width: 1px;
+  background: none;
+}
+
+.sidebar .block ul {
+  margin: 0px;
+  padding: 0px;
+}
+.sidebar .block ul.links {
+  margin-top: 10px;
+  text-align: right;
+}
+.sidebar .block ul.links li {
+  display: inline;
+  margin-left: 15px;
+}
+.sidebar .block .menu {
+  padding-left: 10px;
+  padding-bottom: 5px;
+}
+
+/**
+ * Page
+ */
+#breadcrumb {
+  font-size: 1em;
+  font-style: italic;
+  padding-left: 5px;
+}
+
+#breadcrumb a {
+  font-size: 1em;
+  font-style: italic;
+}
+
+#page-title {
+  padding: 4px 8px;
+  font-size: 1.3em;
+  margin-bottom: 10px;
+}
+#content .block h2 { /* main content: block title */
+  padding: 4px 8px;
+  font-size: 1.25em;
+}
+.action-links {
+  padding-left: 10px;
+}
+
+/**
+ * Pager
+ */
+div.item-list .pager {
+  border: none;
+  padding: 0px;
+}
+div.item-list ul.pager {
+  margin: 10px 0px;
+  margin-top: 10px;
+  padding: 1px 0px;
+  overflow: hidden;
+  list-style-type: none;
+}
+div.item-list ul.pager li {
+  display: inline;
+  margin: 0px;
+  padding: 0px;
+  line-height: 1em;
+  padding: 2px 0px;
+}
+div.item-list ul.pager li.pager-current {
+  padding: 2px 8px;
+}
+
+div.item-list ul.pager li a {
+  margin: 0px;
+  padding: 2px 8px;
+}
+
+/**
+ * tabs
+ */
+div.tabs .secondary,
+div.tabs .primary {
+  border: none;
+  padding: 0px;
+  margin: 8px 0px;
+  margin: 8px 0px 0px 0px;
+  list-style-type: none;
+}
+ul.secondary li,
+ul.primary li {
+  padding: 2px 0px;
+  margin: 0px;
+  line-height: 1em;
+}
+ul.secondary li a,
+ul.primary li a {
+  margin: 0px;
+  padding: 2px 8px;
+  background: transparent;
+}
+
+div.tabs .secondary,
+div.tabs .primary {
+  margin-bottom: 10px;
+}
+
+div.tabs .secondary li a,
+div.tabs .primary li a {
+  border-width: 1px;
+}
+
+div.tabs .secondary li a.active,
+div.tabs .primary li a.active {
+  background: url('../images/dark.png') repeat top left;
+}
+
+div.tabs ul.secondary li a {
+  font-size: 0.85em;
+  margin: 0px;
+}
+div.tabs ul.secondary li {
+  border-style: solid;
+  border-width: 1px;
+  padding: 0px;
+  margin-bottom: 2px;
+}
+
+/**
+ * node
+ */
+.node {
+  margin: 0;
+  padding: 15px 12px 10px 14px;
+  margin-bottom: 10px;
+
+  border-style: solid;
+  border-width: 1px;
+}
+.node-sticky {
+  border-width: 0px;
+}
+
+#content .node h2 { /* main content: node title */
+  padding: 0px;
+  background: transparent;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  font-size: 1.45em;
+}
+
+.node .submitted {
+  font-size: 0.75em;
+}
+
+.node ul,
+.node ol {
+  padding-left: 15px;
+}
+.node ul.links {
+  padding: 0px;
+  font-size: 0.75em;
+  float: right;
+  clear: both;
+}
+.node .user-picture {
+  float: right;
+  padding: 0px 0px 10px 10px;
+  background-color: inherit;
+}
+
+/**
+ * Comment
+ */
+.comment {
+  padding: 8px 10px;
+  margin-bottom: 10px;
+  border-style: solid;
+  border-width: 1px;
+}
+.comment-unpublished {
+  background: url(../images/unpublished.png) repeat top right;
+}
+.comment-spam {
+  background: url(../images/spam.png) repeat top right;
+}
+.comment h3 {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+}
+#comments h2.title {
+  margin-bottom: 5px;
+  font-size: 1.3em;
+}
+.comment .submitted {
+  font-size: 0.75em;
+}
+.comment ul.links {
+  padding: 0px;
+  font-size: 0.75em;
+  float: right;
+  clear: both;
+}
+.comment .user-picture {
+  float: right;
+  padding: 4px 0px 10px 10px;
+  background-color: inherit;
+}
+
+/**
+ * User profile
+ */
+.profile .user-picture {
+  margin: 0px;
+  padding: 5px;
+}
+/* =============================================================================
+   SEARCH
+   ========================================================================== */
+/**
+ * Search block form
+ * - no 'submit' button
+ * - add search magnifier image
+ * - use javascript to show prompt
+ */
+.form-item-search-block-form .form-text:focus {
+  /*outline: none; */  /* remove blue outline for Safari */
+}
+.form-item-search-block-form .form-text {
+  height: 24px;
+  color: #555555;
+  margin: 0px;
+  border: solid 1px #aaa;
+  border-bottom-color: #ddd;
+  border-right-color: #ddd;
+  margin-top: 1px;
+  background: #fff url(../images/search.png) no-repeat 2px center;
+  padding: 0px 4px 0px 4px;
+  padding-left: 24px; /* space for magnifying glass */
+}
+#header .form-item-search-block-form {
+  float: right;
+  margin: 0px;
+}
+#header-searchbox {
+  float: right;
+  overflow: hidden;
+}
+
+/************************/
+/**
+ * Form
+ */
+.pushbutton, button, .form-submit {
+  margin: 2px;
+  padding: 2px 10px;
+  color: #555555;
+  cursor: pointer;
+  font-size: 0.9em;
+  border: solid 1px #888888;
+  background: #fff url(../images/button.gif) repeat-x center;
+}
+.pushbutton:hover, button:hover, .form-submit:hover {
+  color: #111111;
+  border: solid 1px #666666;
+  background: #fff url(../images/button-o.gif) repeat-x center;
+}
+
+/**
+ * Font resize controls
+ */
+#header-fontsizer {
+  float: right;
+  margin: 0;
+  margin-right: 20px;
+  padding: 0px;
+  border-width: 0px;
+  line-height: 1.2em;
+
+}
+.decreaseFont {
+  padding-right: 22px;
+  padding-bottom: 25px;
+  background: url('../images/fontsizer-1.png') no-repeat top left;
+  margin-right: 1px;
+}
+.resetFont {
+  padding-right: 21px;
+  padding-bottom: 25px;
+  background: url('../images/fontsizer-2.png') no-repeat top left;
+}
+.increaseFont {
+  padding-right: 23px;
+  padding-bottom: 25px;
+  background: url('../images/fontsizer-3.png') no-repeat top left;
+  margin-left: 1px;
+}
+.decreaseFont:hover {
+  background: url('../images/fontsizer-1-o.png') no-repeat top left;
+}
+.resetFont:hover {
+  background: url('../images/fontsizer-2-o.png') no-repeat top left;
+}
+.increaseFont:hover {
+  background: url('../images/fontsizer-3-o.png') no-repeat top left;
+}
+#header-fontsizer a,
+#header-fontsizer a:visited,
+#header-fontsizer a:focus,
+#header-fontsizer a:active {
+ /* suppress dotted frame around the links for IE */
+ border: none;
+ outline: none;
+}
+
+/**
+ * Other
+ */
+table.views-view-grid tr td {
+  padding: 15px;
+}
+.filter-wrapper {
+  border: none;
+  margin-top: 5px;
+  padding: 5px;
+  font-size: 0.9em;
+}
+.filter-wrapper ul li {
+  margin-left: 10px;
+}
+.field-type-taxonomy-term-reference {
+  overflow: hidden;
+  margin-bottom: 0.5em;
+}
+.field-type-taxonomy-term-reference .field-label {
+  float: left;
+  overflow: hidden;
+}
+.field-type-taxonomy-term-reference .field-items {
+  overflow: hidden;
+}
+.field-type-taxonomy-term-reference .field-items .field-item {
+  float: left;
+  margin: 0 0.6em;
+  padding: 0px;
+}
+.field-type-text-with-summary {
+  /*clear: left;*/ /* do not use 'both' */
+}
+
+table tr {
+  border-style: solid;
+  border-width: 0px;
+}
+table tr td {
+  padding: 4px 6px;
+  border-style: solid;
+  border-width: 0px;
+}
+table tr th {
+  border-style: solid;
+  padding: 4px 6px;
+  border-width: 0px;
+  border-right-width: 1px;
+}
+table thead * {
+  padding: 2px 3px;
+  border-bottom: none;
+  border-width: 0px;
+}
+table tbody {
+  border-width: 0px;
+}
+table.sticky-enabled tr td {
+  padding: 2px 3px;
+  border-style: solid;
+  border-width: 0px;
+}
+tr.even td.active,
+tr.odd td.active {
+  background-image: url('../images/dark.png');
+}
+tr.even,
+tr.odd {
+  border-width: 0px;
+}
+blockquote {
+  padding: 0px 10px;
+  border-left-style: solid;
+  border-left-width: 5px;
+  font-style: italic;
+}
+
+/**
+ * Nice menus
+ */
+ul.nice-menu {
+  line-height: 1em;
+  margin: 0px;
+  padding: 0px;
+}
+ul.nice-menu,
+ul.nice-menu ul,
+ul.nice-menu li {
+  /* remove all borders */
+  border: 0;
+}
+ul.nice-menu li {
+  /* height of root menu items */
+  line-height: 1.2em;
+}
+ul.nice-menu li a {
+  /* root menu items */
+  font-size: 0.9em;
+  padding: 4px 8px;
+  border: none;
+  border-right-style: solid;
+  border-right-width: 1px;
+  /* background-color is set by colors.css */
+  /* border-right-color is set by colors.css */
+}
+ul.nice-menu li.last a {
+  /* last item of the root menu */
+  border-right: none;
+}
+
+ul.nice-menu li ul {
+  margin: 0;
+  padding: 0px;
+}
+
+ul.nice-menu li.last ul li a,
+ul.nice-menu li ul li a,
+ul.nice-menu li ul li.last a {
+  /* all other chile menu items */
+  border-style: solid;
+  border-width: 1px;
+border-width: 0px;
+  /* border-color is set by colors.css */
+}
+ul.nice-menu li.menuparent a {
+  /* root menu item that has drop down menu */
+  background-image: url('../images/arrow-down.png');
+  background-repeat: no-repeat;
+  background-position: 98%;
+  /* background-color is set by colors.css */
+}
+ul.nice-menu li a {
+  /* root menu item that has no drop down menu */
+  /* background-color is set by colors.css */
+}
+ul.nice-menu li {
+  padding: 0px;
+}
+ul.nice-menu li ul li.menuparent a:hover,
+ul.nice-menu li ul li.menuparent:hover,
+ul.nice-menu li ul li.menuparent {
+  /* drop down menu item that has child menu */
+  background-image: url('../images/arrow-right.png');
+  background-repeat: no-repeat;
+  background-position: 95%;
+  /* background-color is set by colors.css */
+}
+ul.nice-menu li.menuparent ul {
+  padding-top: -5px;
+}
+ul.nice-menu li.menuparent li a {
+  background: none; /* do not delete! */
+}
+ul.nice-menu li.menuparent li {
+  background: none; /* do not delete! */
+}
+ul.nice-menu li ul li.menuparent li a:hover {
+  background: none; /* do not delete! */
+}
+
+/**
+ * Overlay layout for admin pages
+ */
+.overlay #main,
+.overlay #content {
+  width: auto;
+  float: none;
+}
+.overlay #skip-link,
+.overlay .region-page-top,
+.overlay #header,
+.overlay #page-title,
+.overlay #featured,
+.overlay #sidebar-first,
+.overlay #sidebar-second,
+.overlay #footer-wrapper,
+.overlay #banner-top,
+.overlay #banner-bottom,
+.overlay #highlighted,
+.overlay #navigation {
+  display: none;
+}
+.overlay #messages {
+  width: auto;
+}
+.overlay #page-wrapper {
+  width: 100%;
+}
+.overlay #page {
+  margin: 0;
+  padding: 0px;
+}
+#overlay-content {
+  margin: 0;
+  padding: 0px;
+}
+@import "partials/admin-layout-settings";
+@import "partials/mobile-first";
+@import "partials/responsive-media";
diff --git a/drupal7/sites/all/themes/mayo/template.php b/drupal7/sites/all/themes/mayo/template.php
old mode 100644
new mode 100755
index ad147811..3d4ae80f
--- a/drupal7/sites/all/themes/mayo/template.php
+++ b/drupal7/sites/all/themes/mayo/template.php
@@ -6,7 +6,16 @@
  */
 
 /**
- * Construst HTML code for the top/bottom block columns
+ * Includes for MAYO css creation form settings.
+ */
+global $theme_key, $path_to_mayo;
+$theme_key = $GLOBALS['theme_key'];
+$path_to_mayo = drupal_get_path('theme', 'mayo');
+include_once($path_to_mayo . '/inc/load.inc');       // drupal_add_css() wrappers
+include_once($path_to_mayo . '/inc/get.inc');        // get theme info, settings, css etc
+
+/**
+ * Construct HTML code for the top/bottom block columns
  */
 function mayo_build_columns($columns) {
   $styles = array();
@@ -54,66 +63,6 @@ function mayo_build_columns($columns) {
   return $out;
 }
 
-/**
- * Calculate margins of contents and sidebars based on the layout style
- */
-function mayo_get_margins($content, $sb_first, $sb_second) {
-  $sb_layout_style = theme_get_setting('sidebar_layout_style');
-
-  $c_margin_l =  $sf_margin_l =  $ss_margin_l = 5;
-  $c_margin_r =  $sf_margin_r =  $ss_margin_r = 5;
-
-  switch($sb_layout_style) {
-    case 1:
-      if ($sb_first) {
-        $sf_margin_l = 0;
-      }
-      else {
-        $c_margin_l = 0;
-      }
-      if ($sb_second) {
-        $ss_margin_r = 0;
-      }
-      else {
-        $c_margin_r = 0;
-      }
-      break;
-    case 2: // both sidebars come left
-      if ($sb_first) {
-        $sf_margin_l = 0;
-      }
-      else if ($sb_second) {
-        $ss_margin_l = 0;
-      }
-      else {
-        $c_margin_l = 0;
-      }
-      $c_margin_r = 0;
-      break;
-    case 3: // both sidebars come right
-      if ($sb_second) {
-        $ss_margin_r = 0;
-      }
-      else if ($sb_first) {
-        $sf_margin_r = 0;
-      }
-      else {
-        $c_margin_r = 0;
-      }
-      $c_margin_l = 0;
-      break;
-  }
-  $c_margin_style = 'margin-left: ' . $c_margin_l . 'px; margin-right: ' . $c_margin_r . 'px;';
-  $sf_margin_style = 'margin-left: ' . $sf_margin_l . 'px; margin-right: ' . $sf_margin_r . 'px;';
-  $ss_margin_style = 'margin-left: ' . $ss_margin_l . 'px; margin-right: ' . $ss_margin_r . 'px;';
-
-  return array(
-    'content' => $c_margin_style,
-    'sb_first' => $sf_margin_style,
-    'sb_second' => $ss_margin_style,
-  );
-}
-
 /**
  * Return a themed breadcrumb links
  *
@@ -141,7 +90,7 @@ function mayo_breadcrumb($variables) {
 
 /**
  * Custom search block form
- *  No 'submit button'
+ *  Magnifying glass icon used instead of 'submit button'.
  *  Use javascript to show/hide the 'search this site' prompt inside of the text field
  */
 function mayo_preprocess_search_block_form(&$variables) {
@@ -151,7 +100,7 @@ function mayo_preprocess_search_block_form(&$variables) {
 
   unset($variables['form']['actions']['submit']);
   unset($variables['form']['actions']['#children']);
-  $variables['form']['actions']['submit'] = array('#type' => 'image_button', '#src' => base_path() . path_to_theme() . '/images/search-submit.png');
+
   $variables['form']['search_block_form']['#value'] = $prompt;
   $variables['form']['search_block_form']['#size'] = theme_get_setting('searchbox_size');
   $variables['form']['search_block_form']['#attributes'] = array(
@@ -193,6 +142,17 @@ function mayo_preprocess_maintenance_page(&$variables) {
  * Implements hook_preprocess_html().
  */
 function mayo_preprocess_html(&$variables) {
+  global $theme_key;
+  // Adds classes to <body class="">
+  $settings_array = array(
+    'round_corners',
+    'dark_messages',
+  );
+  foreach ($settings_array as $setting) {
+    if (theme_get_setting($setting) !== 0) {
+      $variables['classes_array'][] = theme_get_setting($setting);
+    }
+  }
 
   // Add conditional stylesheet for IE
   drupal_add_css(path_to_theme() . '/css/ie8.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'IE 8', '!IE' => FALSE), 'preprocess' => FALSE));
@@ -205,37 +165,21 @@ function mayo_preprocess_html(&$variables) {
     'weight' => 10,
   );
 
-  // Add optional stylesheets
-
-  if (theme_get_setting('dark_messages')) {
-    // add dark.css if it's selected at the theme setting page.
-    drupal_add_css(drupal_get_path('theme', 'mayo') . '/css/dark.css', $options);
-  }
-
-  $round_corners = theme_get_setting('round_corners');
-  if ($round_corners == 1 || $round_corners == 3) {
-    drupal_add_css(drupal_get_path('theme', 'mayo') . '/css/round-sidebar.css', $options);
-  }
-  if ($round_corners == 2 || $round_corners == 3) {
-    drupal_add_css(drupal_get_path('theme', 'mayo') . '/css/round-node.css', $options);
-  }
-
   if (theme_get_setting('menubar_style') == 2) {
     drupal_add_css(drupal_get_path('theme', 'mayo') . '/css/black-menu.css', $options);
   }
 
+  // Add old legacy MAYO styles for Superfish.
+  if (theme_get_setting('legacy_superfish_styles') == 1) {
+    drupal_add_css(drupal_get_path('theme', 'mayo') . '/css/mayo-superfish.css', $options);
+  }
+
   $options = array(
     'type' => 'inline',
     'group' => CSS_THEME,
     'weight' => 10,
   );
 
-/*
-  $font_family = array(
-    0 => "font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'URW Palladio L', Baskerville, serif; ",
-    1 => "font-family: Verdana, Geneva, Arial, 'Bitstream Vera Sans', 'DejaVu Sans', sans-serif; ",
-  );
-*/
   $font_family = array(
     // Added Japanese font support
     0 => "font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'URW Palladio L', Baskerville, Meiryo, 'Hiragino Mincho Pro', 'MS PMincho', serif; ",
@@ -268,6 +212,11 @@ function mayo_preprocess_html(&$variables) {
     drupal_add_css(".sidebar h2 { font-size: 1.2em; }", $options);
     drupal_add_css("#content .node h2 { font-size: 1.4em; }", $options);
   }
+    // Get the path to the directory where our CSS files are saved
+  $theme_name = $theme_key;
+  $path = variable_get('theme_' . $theme_name . '_files_directory');
+    // Load Layout
+  mayo_load_layout_css($path, $theme_name);
 }
 
 /**
@@ -279,3 +228,19 @@ function mayo_process_html(&$variables) {
     _color_html_alter($variables);
   }
 }
+
+/**
+ * Implements hook_page_alter().
+ */
+function mayo_page_alter($page) {
+  // Add meta tag for viewport, for easier responsive theme design.
+  $viewport = array(
+    '#type' => 'html_tag',
+    '#tag' => 'meta',
+    '#attributes' => array(
+      'name' => 'viewport',
+      'content' => 'width=device-width, initial-scale=1',
+    ),
+  );
+  drupal_add_html_head($viewport, "viewport");
+}
\ No newline at end of file
diff --git a/drupal7/sites/all/themes/mayo/templates/html.tpl.php b/drupal7/sites/all/themes/mayo/templates/html.tpl.php
new file mode 100644
index 00000000..1ef1dbc1
--- /dev/null
+++ b/drupal7/sites/all/themes/mayo/templates/html.tpl.php
@@ -0,0 +1,61 @@
+<?php
+
+/**
+ * @file
+ * Mayo theme implementation to display the basic html structure of a single
+ * Drupal page.
+ *
+ * Variables:
+ * - $css: An array of CSS files for the current page.
+ * - $language: (object) The language the site is being displayed in.
+ *   $language->language contains its textual representation.
+ *   $language->dir contains the language direction. It will either be 'ltr' or 'rtl'.
+ * - $rdf_namespaces: All the RDF namespace prefixes used in the HTML document.
+ * - $grddl_profile: A GRDDL profile allowing agents to extract the RDF data.
+ * - $head_title: A modified version of the page title, for use in the TITLE
+ *   tag.
+ * - $head_title_array: (array) An associative array containing the string parts
+ *   that were used to generate the $head_title variable, already prepared to be
+ *   output as TITLE tag. The key/value pairs may contain one or more of the
+ *   following, depending on conditions:
+ *   - title: The title of the current page, if any.
+ *   - name: The name of the site.
+ *   - slogan: The slogan of the site, if any, and if there is no title.
+ * - $head: Markup for the HEAD section (including meta tags, keyword tags, and
+ *   so on).
+ * - $styles: Style tags necessary to import all CSS files for the page.
+ * - $scripts: Script tags necessary to load the JavaScript files and settings
+ *   for the page.
+ * - $page_top: Initial markup from any modules that have altered the
+ *   page. This variable should always be output first, before all other dynamic
+ *   content.
+ * - $page: The rendered page content.
+ * - $page_bottom: Final closing markup from any modules that have altered the
+ *   page. This variable should always be output last, after all other dynamic
+ *   content.
+ * - $classes String of classes that can be used to style contextually through
+ *   CSS.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_html()
+ * @see template_process()
+ *
+ * @ingroup themeable
+ */
+?>
+<!DOCTYPE html>
+<head>
+  <?php print $head; ?>
+  <title><?php print $head_title; ?></title>
+  <?php print $styles; ?>
+  <?php print $scripts; ?>
+</head>
+<body class="<?php print $classes; ?>" <?php print $attributes;?>>
+  <div id="skip-link">
+    <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
+  </div>
+  <?php print $page_top; ?>
+  <?php print $page; ?>
+  <?php print $page_bottom; ?>
+</body>
+</html>
diff --git a/drupal7/sites/all/themes/mayo/templates/maintenance-page.tpl.php b/drupal7/sites/all/themes/mayo/templates/maintenance-page.tpl.php
index 74510161..d09b2d2e 100644
--- a/drupal7/sites/all/themes/mayo/templates/maintenance-page.tpl.php
+++ b/drupal7/sites/all/themes/mayo/templates/maintenance-page.tpl.php
@@ -11,10 +11,7 @@
  * @see template_preprocess_maintenance_page()
  */
 ?>
-<!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="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
-
+<!DOCTYPE html>
 <head>
   <title><?php print $head_title; ?></title>
   <?php print $head; ?>
diff --git a/drupal7/sites/all/themes/mayo/templates/node.tpl.php b/drupal7/sites/all/themes/mayo/templates/node.tpl.php
index 470d9852..80455df0 100644
--- a/drupal7/sites/all/themes/mayo/templates/node.tpl.php
+++ b/drupal7/sites/all/themes/mayo/templates/node.tpl.php
@@ -105,8 +105,6 @@
 
   <?php print render($content['links']); ?>
 
-  <?php // print render($content['comments']); ?> <!-- moved to outside of the node div -->
-
 </div>
 
 <?php print render($content['comments']); ?> <!-- added -->
diff --git a/drupal7/sites/all/themes/mayo/templates/page.tpl.php b/drupal7/sites/all/themes/mayo/templates/page.tpl.php
index 9425fe76..73fd7d46 100644
--- a/drupal7/sites/all/themes/mayo/templates/page.tpl.php
+++ b/drupal7/sites/all/themes/mayo/templates/page.tpl.php
@@ -69,10 +69,6 @@
 
 <?php
   $page_wrapper_style = '';
-  $page_width = theme_get_setting('page_width');
-  if (empty($page_width)) $page_width = '90%';
-  if (arg(0) == "admin") $page_width = '100%'; // admin page
-  $page_wrapper_style = 'width: ' . $page_width . ';';
   $base_vmargin = theme_get_setting('base_vmargin');
   if (arg(0) == "admin") $base_vmargin = '0px'; // admin page
   if (empty($base_vmargin)) $base_vmargin = '0px';
@@ -135,31 +131,13 @@
   if (empty($searchbox_top_margin)) $searchbox_top_margin = '0px';
   $searchbox_style = 'padding-right: ' . $searchbox_right_margin . '; padding-top: ' . $searchbox_top_margin . ';';
 
+  $menubar_style = '';
+  $menubar_bg_value = theme_get_setting('menubar_bg_value');
+  if (theme_get_setting('menubar_background') == 1) $menubar_style = ' style=" background-color: ' . $menubar_bg_value . ';"';
+
   $fontsizer_top_margin = (intval($searchbox_top_margin) + 3) . 'px';
   $fontsizer_style = 'margin-top: ' . $fontsizer_top_margin . ';';
 
-  $sb_layout_style = theme_get_setting('sidebar_layout_style');
-  $sb_first_width = theme_get_setting('sidebar_first_width');
-  if (empty($sb_first_width)) $sb_first_width = '25%';
-  $sb_first_style = 'width: ' . $sb_first_width . ';';
-  $sb_second_width = theme_get_setting('sidebar_second_width');
-  if (empty($sb_second_width)) $sb_second_width = '25%';
-  $sb_second_style = 'width: ' . $sb_second_width . ';';
-
-  $content_width = 100;
-  if ($page['sidebar_first']) {
-    $content_width -= intval(preg_replace('/%/', '', $sb_first_width));
-  }
-  if ($page['sidebar_second']) {
-    $content_width -= intval(preg_replace('/%/', '', $sb_second_width));
-  }
-  $content_style = 'width: ' . $content_width . '%;';
-
-  $margins = mayo_get_margins($page['content'], $page['sidebar_first'], $page['sidebar_second']);
-  $content_section_style = $margins['content'];
-  $sb_first_section_style = $margins['sb_first'];
-  $sb_second_section_style = $margins['sb_second'];
-
   if (theme_get_setting('header_fontsizer')) {
     drupal_add_js(drupal_get_path('theme', 'mayo') . '/js/mayo-fontsize.js');
   }
@@ -243,7 +221,7 @@
 
     <!-- for nice_menus, superfish -->
     <?php if ($page['menubar']) { ?>
-    <div id="menubar" class="menubar clearfix">
+    <div id="menubar" class="menubar clearfix"<?php if(!empty($menubar_style)) echo $menubar_style; ?>>
       <?php print render($page['menubar']); ?>
     </div>
     <?php } ?>
@@ -285,21 +263,8 @@
       <div class="clearfix cfie"></div>
 
 
-      <!-- sidebars (left) -->
-      <?php if (($page['sidebar_first']) && ($sb_layout_style != 3)){ ?>
-        <div id="sidebar-first" class="column sidebar" style="<?php echo $sb_first_style; ?>"><div class="section" style="<?php echo $sb_first_section_style; ?>">
-          <?php print render($page['sidebar_first']); ?>
-        </div></div> <!-- /.section, /#sidebar-first -->
-      <?php } ?>
-      <?php if (($page['sidebar_second']) && ($sb_layout_style == 2)) { ?>
-        <div id="sidebar-second" class="column sidebar" style="<?php echo $sb_second_style; ?>"><div class="section" style="<?php echo $sb_second_section_style; ?>">
-          <?php print render($page['sidebar_second']); ?>
-        </div></div> <!-- /.section, /#sidebar-second -->
-      <?php } ?>
-
-
       <!-- main content -->
-      <div id="content" class="column" style="<?php echo $content_style; ?>"><div class="section" style="<?php echo $content_section_style; ?>">
+      <div id="content" class="column"><div class="section">
 
         <?php if ($page['highlighted']) { ?>
           <div id="highlighted"><?php print render($page['highlighted']); ?></div>
@@ -321,15 +286,16 @@
 
       </div></div> <!-- /.section, /#content -->
 
-
-      <!-- sidebars (right) -->
-      <?php if (($page['sidebar_first']) && ($sb_layout_style == 3)) { ?>
-        <div id="sidebar-first-r" class="column sidebar" style="<?php echo $sb_first_style; ?>"><div class="section" style="<?php echo $sb_first_section_style; ?>">
+      <!-- sidebar (first) -->
+      <?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 } ?>
-      <?php if (($page['sidebar_second']) && ($sb_layout_style != 2)) { ?>
-        <div id="sidebar-second-r" class="column sidebar" style="<?php echo $sb_second_style; ?>"><div class="section" style="<?php echo $sb_second_section_style; ?>">
+
+      <!-- sidebar (second) -->
+            <?php if ($page['sidebar_second']) { ?>
+        <div id="sidebar-second" class="column sidebar"><div class="section">
           <?php print render($page['sidebar_second']); ?>
         </div></div> <!-- /.section, /#sidebar-second -->
       <?php } ?>
@@ -387,7 +353,5 @@
       <?php } ?>
 
     </div> <!-- /#footer-wrapper -->
-
-
   </div> <!-- /#page -->
 </div> <!-- /#page-wrapper -->
diff --git a/drupal7/sites/all/themes/mayo/theme-settings.php b/drupal7/sites/all/themes/mayo/theme-settings.php
index b5532c83..f0e3f9b4 100644
--- a/drupal7/sites/all/themes/mayo/theme-settings.php
+++ b/drupal7/sites/all/themes/mayo/theme-settings.php
@@ -1,6 +1,6 @@
 <?php
-
 /**
+ * @file
  * Implements hook_form_system_theme_settings_alter().
  *
  * Custom theme settings
@@ -8,8 +8,50 @@
 function mayo_form_system_theme_settings_alter(&$form, &$form_state) {
 
   drupal_add_js(drupal_get_path('theme', 'mayo') . '/js/mayo.js');
+    // Get our plugin system functions.
+  require_once(drupal_get_path('theme', 'mayo') . '/inc/plugins.inc');
+
+  // We need some getters.
+  require_once(drupal_get_path('theme', 'mayo') . '/inc/get.inc');
+  $path_to_mayo = drupal_get_path('theme', 'mayo');
+
+  // General "alters" use a form id. Settings should not be set here. The only
+  // thing useful about this is if you need to alter the form for the running
+  // theme and *not* the theme setting.
+  // @see http://drupal.org/node/943212
+  if (isset($form_id)) {
+    return;
+  }
+
+  // Get an array of device groups with option values
+  $device_group_options = page_layouts_device_group_options('mayo');
+
+  // Unit options
+  $unit_options = array('%' => '%', 'px' => 'px', 'em' => 'em');
+
+  // Assign $options for each device group
+  foreach ($device_group_options as $device_group => $options) {
+
+    // About here we need to call a custom sort function, this is what we got for now
+    sort($options, SORT_STRING);
 
-  /*--------------- Font settings --------------*/
+    foreach ($options as $option) {
+      if ($device_group === 'bigscreen') {
+        $bigscreen_options[$option] = drupal_ucfirst(str_replace('_', ' ', $option)); // human readable option names for accessibility
+      }
+      if ($device_group === 'tablet_landscape') {
+        $tablet_landscape_options[$option] = drupal_ucfirst(str_replace('_', ' ', $option));
+      }
+      if ($device_group === 'tablet_portrait') {
+        $tablet_portrait_options[$option] = drupal_ucfirst(str_replace('_', ' ', $option));
+      }
+      if ($device_group === 'smalltouch_landscape') {
+        $smalltouch_landscape_options[$option] = drupal_ucfirst(str_replace('_', ' ', $option));
+      }
+    }
+  }
+
+  /* --------------- Font settings -------------- */
   $form['font'] = array(
     '#type' => 'fieldset',
     '#title' => t('Font settings'),
@@ -71,7 +113,7 @@ function mayo_form_system_theme_settings_alter(&$form, &$form_state) {
     '#suffix' => '</div>',
   );
 
-  /*--------------- Layout settings --------------*/
+  /* --------------- Layout settings -------------- */
   $form['layout'] = array(
     '#type' => 'fieldset',
     '#title' => t('Layout settings'),
@@ -87,15 +129,6 @@ function mayo_form_system_theme_settings_alter(&$form, &$form_state) {
     '#description' => t('Specify the base vertical (top/bottom) margin which is vertical spaces between page edge and browser screen in px.'),
     '#prefix' => '<img src="/' . drupal_get_path('theme', 'mayo') . '/images/base-layout.png" /><br />',
   );
-  $form['layout']['page_width'] = array(
-    '#type' => 'textfield',
-    '#title' => t('Page width'),
-    '#default_value' => theme_get_setting('page_width'),
-    '#size' => 12,
-    '#maxlength' => 8,
-    '#description' => t('Specify the page width including sidebars either in percent ratio (50-100%) for liquid layout, or in px (700-1600px) for fixed layout. If an invalid value is specified, the default value (90%) is used instead. You can leave this field blank to use the default value. Do not forget to add either % or px after the number.'),
-    '#element_validate' => array('mayo_page_width_validate'),
-  );
   $form['layout']['page_margin'] = array(
     '#type' => 'textfield',
     '#title' => t('Page margin'),
@@ -115,66 +148,621 @@ function mayo_form_system_theme_settings_alter(&$form, &$form_state) {
     '#description' => '<img src="/' . drupal_get_path('theme', 'mayo') . '/images/page-layout.png" /><br />' . t('When the layout 2 is selected, or header background image is selected, header borders are not drawn to make it looks better.'),
   );
 
-  /*--------------- Advanced sidebar settings --------------*/
-  $form['layout']['sidebar'] = array(
+  /* --------------- Responsive sidebar layout settings -------------- */
+  /* -----------Big screen as in desktop pc monitor------------- */
+  $form['layout']['bigscreen'] = array(
     '#type' => 'fieldset',
-    '#title' => t('Sidebar layout settings'),
+    '#title' => t('Big Screen Sidebar layout'),
     '#collapsible' => TRUE,
     '#collapsed' => TRUE,
+    '#attributes' => array(
+      'class' => array('mayo-layout-form'),
+    ),
+  );
+
+    // Big screen Layout
+  $form['layout']['bigscreen']['bigscreen-layout-wrapper'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Choose sidebar layout'),
   );
-  $form['layout']['sidebar']['sidebar_layout_style'] = array(
+    // Options
+
+  $form['layout']['bigscreen']['bigscreen-layout-wrapper']['bigscreen_layout'] = array(
+     '#type' => 'radios',
+     '#title' => t('<strong>Choose sidebar positions</strong>'),
+     '#default_value' => str_replace('-', '_', theme_get_setting('bigscreen_layout')),
+     '#options' => $bigscreen_options,
+  );
+
+  // Sidebars
+  $form['layout']['bigscreen']['bigscreen-sidebar-wrapper'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Set sidebar widths'),
+    '#description' => t('<strong>Set the width of each sidebar</strong>'),
+    '#collapsible' => FALSE,
+  );
+
+  // Units
+  $form['layout']['bigscreen']['bigscreen-sidebar-wrapper']['bigscreen_sidebar_unit'] = array(
+    '#type' => 'select',
+    '#title' => t('Unit'),
+    '#default_value' => theme_get_setting('bigscreen_sidebar_unit'),
+    '#options' => $unit_options,
+  );
+
+  // Sidebar first
+  $form['layout']['bigscreen']['bigscreen-sidebar-wrapper']['bigscreen_sidebar_first'] = array(
+    '#type' => 'textfield',
+    '#title' => t('First sidebar'),
+    '#default_value' => check_plain(theme_get_setting('bigscreen_sidebar_first')),
+    '#size' => 4,
+    '#maxlenght' => 4,
+    '#states' => array(
+      'required' => array(
+        array('input[name="bigscreen_layout"]' => array('value' => 'three_col_grail')),
+        array('input[name="bigscreen_layout"]' => array('value' => 'two_sidebars_left')),
+        array('input[name="bigscreen_layout"]' => array('value' => 'two_sidebars_right')),
+      ),
+    ),
+  );
+
+  // Sidebar second
+  $form['layout']['bigscreen']['bigscreen-sidebar-wrapper']['bigscreen_sidebar_second'] = array(
+    '#type' => 'textfield',
+    '#title' => t('Second sidebar'),
+    '#default_value' => check_plain(theme_get_setting('bigscreen_sidebar_second')),
+    '#size' => 4,
+    '#maxlenght' => 4,
+    '#states' => array(
+      'required' => array(
+        array('input[name="bigscreen_layout"]' => array('value' => 'three_col_grail')),
+        array('input[name="bigscreen_layout"]' => array('value' => 'two_sidebars_left')),
+        array('input[name="bigscreen_layout"]' => array('value' => 'two_sidebars_right')),
+      ),
+    ),
+  );
+
+  // Page width
+  $form['layout']['bigscreen']['bigscreen-width-wrapper'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Set the page width'),
+    '#description' => t('<strong>Set the page width</strong>'),
+  );
+
+  // Unit
+  $form['layout']['bigscreen']['bigscreen-width-wrapper']['bigscreen_page_unit'] = array(
+    '#type' => 'select',
+    '#title' => t('Unit'),
+    '#default_value' => theme_get_setting('bigscreen_page_unit'),
+    '#options' => $unit_options,
+  );
+
+  // Width
+  $form['layout']['bigscreen']['bigscreen-width-wrapper']['bigscreen_page_width'] = array(
+    '#type'  => 'textfield',
+    '#title' => t('Page width'),
+    '#default_value' => check_plain(theme_get_setting('bigscreen_page_width')),
+    '#size' => 4,
+    '#maxlenght' => 4,
+    '#required' => TRUE,
+  );
+
+  // Media queries
+  $form['layout']['bigscreen']['media-queries-wrapper'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Standard Screen Media Queries'),
+    '#weight' => 1,
+    '#attributes' => array(
+      'class' => array('at-media-queries'),
+    ),
+  );
+
+  // Media query
+  $form['layout']['bigscreen']['media-queries-wrapper']['bigscreen_media_query'] = array(
+    '#type' => 'textfield',
+    '#title' => t('Media query for this layout'),
+    '#default_value' => check_plain(theme_get_setting('bigscreen_media_query')),
+    '#description' => t('Do not include @media, it\'s included automatically.'),
+    '#size' => 100,
+    '#required' => TRUE,
+  );
+
+  /* ****************************************************************************
+   *
+   * Tablet
+   *
+   * ************************************************************************** */
+
+  $form['layout']['tablet'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Tablet Sidebar Layout'),
+    '#description' => t('<h3>Tablet Layout</h3><p>Tablet devices such as iPad, Android and Windows tablets have two orientations - landscape and portrait, which can also be thought of as wide and narrow tablets. You can configure a different layout for each orientation.</p>'),
+    '#attributes' => array(
+      'class' => array('mayo-layout-form'),
+    ),
+    '#collapsible' => TRUE,
+    '#collapsed' => TRUE,
+  );
+
+  /* ******************
+   * Tablet landscape
+   * **************** */
+
+  $form['layout']['tablet']['landscape'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Landscape'),
+    '#description' => t('<h4>Landscape tablet <span class="field-description-info">(wide)</span></h4>'),
+    '#collapsible' => TRUE,
+    '#collapsed' => TRUE,
+  );
+
+  // Tablet landscape Layout options
+  $form['layout']['tablet']['landscape']['tablet-landscape-layout-wrapper'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Choose sidebar layout'),
+  );
+
+  // Options
+  $form['layout']['tablet']['landscape']['tablet-landscape-layout-wrapper']['tablet_landscape_layout'] = array(
     '#type' => 'radios',
-    '#title' => t('Sidebar layout style'),
-    '#default_value' => theme_get_setting('sidebar_layout_style'),
-    '#options' => array(
-      1 => t('1. Sidebar first comes left, sidebar second comes right.'),
-      2 => t('2. Both sidebars come left.'),
-      3 => t('3. Both sidebars come right.'),
+    '#title' => t('<strong>Choose sidebar positions</strong>'),
+    '#default_value' => str_replace('-', '_', theme_get_setting('tablet_landscape_layout')),
+    '#options' => $tablet_landscape_options,
+  );
+
+  // Sidebars
+  $form['layout']['tablet']['landscape']['tablet-landscape-sidebar-width-wrapper'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Set sidebar widths'),
+    '#description' => t('<strong>Set the width of each sidebar</strong>'),
+  );
+
+  // Units
+  $form['layout']['tablet']['landscape']['tablet-landscape-sidebar-width-wrapper']['tablet_landscape_sidebar_unit'] = array(
+    '#type' => 'select',
+    '#title' => t('Unit'),
+    '#default_value' => theme_get_setting('tablet_landscape_sidebar_unit'),
+    '#options' => $unit_options,
+  );
+
+  // Sidebar first
+  $form['layout']['tablet']['landscape']['tablet-landscape-sidebar-width-wrapper']['tablet_landscape_sidebar_first'] = array(
+    '#type' => 'textfield',
+    '#title' => t('First sidebar'),
+    '#default_value' => check_plain(theme_get_setting('tablet_landscape_sidebar_first')),
+    '#size' => 4,
+    '#maxlenght' => 4,
+    '#states' => array(
+      'required' => array(
+        array('input[name="tablet_landscape_layout"]' => array('value' => 'three_col_grail')),
+        array('input[name="tablet_landscape_layout"]' => array('value' => 'two_sidebars_left')),
+        array('input[name="tablet_landscape_layout"]' => array('value' => 'two_sidebars_left_stack')),
+        array('input[name="tablet_landscape_layout"]' => array('value' => 'two_sidebars_right')),
+        array('input[name="tablet_landscape_layout"]' => array('value' => 'two_sidebars_right_stack')),
+      ),
     ),
-    '#prefix' => '<img src="/' . drupal_get_path('theme', 'mayo') . '/images/sidebar-layout.png" />',
   );
-  $form['layout']['sidebar']['sidebar_first_width'] = array(
+
+  // Sidebar second
+  $form['layout']['tablet']['landscape']['tablet-landscape-sidebar-width-wrapper']['tablet_landscape_sidebar_second'] = array(
     '#type' => 'textfield',
-    '#title' => t('Sidebar first width'),
-    '#default_value' => theme_get_setting('sidebar_first_width'),
-    '#size' => 12,
-    '#maxlength' => 8,
-    '#description' => t('Specify the width of the sidebar first in % (15-40%). px value can not be used.'),
-    '#element_validate' => array('mayo_sidebar_width_validate'),
+    '#title' => t('Second sidebar'),
+    '#default_value' => check_plain(theme_get_setting('tablet_landscape_sidebar_second')),
+    '#size' => 4,
+    '#maxlenght' => 4,
+    '#states' => array(
+      'invisible' => array(
+        array('input[name="tablet_landscape_layout"]' => array('value' => 'two_sidebars_left_stack')),
+        array('input[name="tablet_landscape_layout"]' => array('value' => 'two_sidebars_right_stack')),
+      ),
+      'required' => array(
+        array('input[name="tablet_landscape_layout"]' => array('value' => 'three_col_grail')),
+        array('input[name="tablet_landscape_layout"]' => array('value' => 'two_sidebars_left')),
+        array('input[name="tablet_landscape_layout"]' => array('value' => 'two_sidebars_right')),
+      ),
+    ),
+  );
+
+  // Conditional messages for sidebar layouts
+  $form['layout']['tablet']['landscape']['tablet-landscape-sidebar-width-wrapper']['tablet-landscape-sidebar-message-wrapper'] = array(
+    '#type' => 'fieldset',
+    '#states' => array(
+      'invisible' => array(
+        array('input[name="tablet_landscape_layout"]' => array('value' => 'three_col_grail')),
+        array('input[name="tablet_landscape_layout"]' => array('value' => 'two_sidebars_left')),
+        array('input[name="tablet_landscape_layout"]' => array('value' => 'two_sidebars_right')),
+      ),
+    ),
   );
-  $form['layout']['sidebar']['sidebar_second_width'] = array(
+  $form['layout']['tablet']['landscape']['tablet-landscape-sidebar-width-wrapper']['tablet-landscape-sidebar-message-wrapper']['message'] = array(
+    '#markup' => t('<div class="description">In this layout <em>Second sidebar</em> wraps below.</div>'),
+  );
+
+  // Page width
+  $form['layout']['tablet']['landscape']['tablet-landscape-page-width-wrapper'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Set the page width'),
+    '#description' => t('<strong>Set the page width</strong>'),
+  );
+
+  // Unit
+  $form['layout']['tablet']['landscape']['tablet-landscape-page-width-wrapper']['tablet_landscape_page_unit'] = array(
+    '#type' => 'select',
+    '#title' => t('Unit'),
+    '#default_value' => theme_get_setting('tablet_landscape_page_unit'),
+    '#options' => $unit_options,
+  );
+
+  // Width
+  $form['layout']['tablet']['landscape']['tablet-landscape-page-width-wrapper']['tablet_landscape_page_width'] = array(
+    '#type'  => 'textfield',
+    '#title' => t('Page width'),
+    '#default_value' => check_plain(theme_get_setting('tablet_landscape_page_width')),
+    '#size' => 4,
+    '#maxlenght' => 4,
+    '#required' => TRUE,
+  );
+
+  // Media Queries
+  $form['layout']['tablet']['landscape']['tablet-landscape-media-queries-wrapper'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Tablet Landscape Media Queries'),
+    '#weight' => 1,
+    '#attributes' => array(
+      'class' => array(
+        'at-media-queries',
+      ),
+    ),
+  );
+
+  // Media query
+  $form['layout']['tablet']['landscape']['tablet-landscape-media-queries-wrapper']['tablet_landscape_media_query'] = array(
     '#type' => 'textfield',
-    '#title' => t('Sidebar second width'),
-    '#default_value' => theme_get_setting('sidebar_second_width'),
-    '#size' => 12,
-    '#maxlength' => 8,
-    '#description' => t('Specify the width of the sidebar first in % (15-40%). px value can not be used.'),
-    '#element_validate' => array('mayo_sidebar_width_validate'),
+    '#title' => t('Media query for this layout'),
+    '#default_value' => check_plain(theme_get_setting('tablet_landscape_media_query')),
+    '#description' => t('Do not include @media, it\'s included automatically.'),
+    '#size' => 100,
+    '#required' => TRUE,
   );
-  $form['layout']['sidebar']['note'] = array(
-    '#type' => 'item',
-    '#title' => t('Note:'),
-    '#markup' => t('Main contents width is automatically determined based on the width of the sidebar and number of sidebar used.'),
+
+
+  /* *****************
+   * Tablet portrait
+   * *************** */
+
+  $form['layout']['tablet']['portrait'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Portrait'),
+    '#description' => t('<h4>Portrait tablet <span class="field-description-info">(narrow)</span></h4>'),
+    '#collapsible' => TRUE,
+    '#collapsed' => TRUE,
+  );
+
+  // Tablet portrait Layout options
+  $form['layout']['tablet']['portrait']['tablet-portrait-layout-wrapper'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Choose sidebar layout'),
+  );
+
+  // Options
+  $form['layout']['tablet']['portrait']['tablet-portrait-layout-wrapper']['tablet_portrait_layout'] = array(
+    '#type' => 'radios',
+    '#title' => t('<strong>Choose sidebar positions</strong>'),
+    '#default_value' => str_replace('-', '_', theme_get_setting('tablet_portrait_layout')),
+    '#options' => $tablet_portrait_options,
+  );
+
+  // Tablet portrait Sidebars
+  $form['layout']['tablet']['portrait']['tablet-portrait-sidebar-width-wrapper'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Set sidebar widths'),
+    '#description' => t('<strong>Set the width of each sidebar</strong>'),
+    '#states' => array(
+      'invisible' => array('input[name="tablet_portrait_layout"]' => array('value' => 'one_col_stack')),
+    ),
+  );
+
+  // Units
+  $form['layout']['tablet']['portrait']['tablet-portrait-sidebar-width-wrapper']['tablet_portrait_sidebar_unit'] = array(
+    '#type' => 'select',
+    '#title' => t('Unit'),
+    '#default_value' => theme_get_setting('tablet_portrait_sidebar_unit'),
+    '#options' => $unit_options,
+  );
+
+  // Sidebar first
+  $form['layout']['tablet']['portrait']['tablet-portrait-sidebar-width-wrapper']['tablet_portrait_sidebar_first'] = array(
+    '#type' => 'textfield',
+    '#title' => t('First sidebar'),
+    '#default_value' => check_plain(theme_get_setting('tablet_portrait_sidebar_first')),
+    '#size' => 4,
+    '#maxlenght' => 4,
+    '#states' => array(
+      'invisible' => array(
+        array('input[name="tablet_portrait_layout"]' => array('value' => 'one_col_stack')),
+      ),
+      'required' => array(
+        array('input[name="tablet_portrait_layout"]' => array('value' => 'one_col_vert')),
+        array('input[name="tablet_portrait_layout"]' => array('value' => 'two_sidebars_left_stack')),
+        array('input[name="tablet_portrait_layout"]' => array('value' => 'two_sidebars_right_stack')),
+      ),
+    ),
+  );
+
+  // Sidebar second
+  $form['layout']['tablet']['portrait']['tablet-portrait-sidebar-width-wrapper']['tablet_portrait_sidebar_second'] = array(
+    '#type' => 'textfield',
+    '#title' => t('Second sidebar'),
+    '#default_value' => check_plain(theme_get_setting('tablet_portrait_sidebar_second')),
+    '#size' => 4,
+    '#maxlenght' => 4,
+    '#states' => array(
+      'invisible' => array(
+        array('input[name="tablet_portrait_layout"]' => array('value' => 'one_col_stack')),
+        array('input[name="tablet_portrait_layout"]' => array('value' => 'two_sidebars_left_stack')),
+        array('input[name="tablet_portrait_layout"]' => array('value' => 'two_sidebars_right_stack')),
+      ),
+      'required' => array(
+        array('input[name="tablet_portrait_layout"]' => array('value' => 'one_col_vert')),
+      ),
+    ),
   );
 
+  // Conditional messages for sidebar layouts
+  $form['layout']['tablet']['portrait']['tablet-portrait-sidebar-width-wrapper']['tablet-portrait-sidebar-message-wrapper'] = array(
+    '#type' => 'fieldset',
+    '#states' => array(
+      'invisible' => array(
+        array('input[name="tablet_portrait_layout"]' => array('value' => 'one_col_vert')),
+        array('input[name="tablet_portrait_layout"]' => array('value' => 'one_col_stack')),
+      ),
+    ),
+  );
+  $form['layout']['tablet']['portrait']['tablet-portrait-sidebar-width-wrapper']['tablet-portrait-sidebar-message-wrapper']['message'] = array(
+    '#markup' => t('<div class="description">In this layout <em>Second sidebar</em> wraps below.</div>'),
+  );
+
+  // Tablet portrait Page width
+  $form['layout']['tablet']['portrait']['tablet-portrait-page-width-wrapper'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Set the page width'),
+    '#description' => t('<strong>Set the page width</strong>'),
+  );
+
+  // Unit
+  $form['layout']['tablet']['portrait']['tablet-portrait-page-width-wrapper']['tablet_portrait_page_unit'] = array(
+    '#type' => 'select',
+    '#title' => t('Unit'),
+    '#default_value' => theme_get_setting('tablet_portrait_page_unit'),
+    '#options' => $unit_options,
+  );
+
+  // Width
+  $form['layout']['tablet']['portrait']['tablet-portrait-page-width-wrapper']['tablet_portrait_page_width'] = array(
+    '#type'  => 'textfield',
+    '#title' => t('Page width'),
+    '#default_value' => check_plain(theme_get_setting('tablet_portrait_page_width')),
+    '#size' => 4,
+    '#maxlenght' => 4,
+    '#required' => TRUE,
+  );
+
+  // Tablet portrait Media queries
+  $form['layout']['tablet']['portrait']['tablet-portrait-media-queries-wrapper'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Tablet Portrait Media Queries'),
+    '#weight' => 1,
+    '#attributes' => array(
+      'class' => array('at-media-queries'),
+    ),
+  );
+
+  // Media query
+  $form['layout']['tablet']['portrait']['tablet-portrait-media-queries-wrapper']['tablet_portrait_media_query'] = array(
+    '#type' => 'textfield',
+    '#title' => t('Media query for this layout'),
+    '#default_value' => check_plain(theme_get_setting('tablet_portrait_media_query')),
+    '#description' => t('Do not include @media, it\'s included automatically.'),
+    '#size' => 100,
+    '#required' => TRUE,
+  );
+  /* ****************************************************************************
+   *
+   * Smalltouch
+   *
+   * ************************************************************************** */
+
+  $form['layout']['smalltouch'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Smalltouch Sidebar Layout'),
+    '#description' => t('<h3>Smalltouch Layout</h3><p>Smalltouch devices such as iPhone, Android and Windows phones have two orientations - landscape and portrait, which can also be thought of as wide and arrow smalltouch devices. You can configure a layout for landscape orientation only - portrait orientation (narrow) will always display in one column (all regions full width and stacked) with sidebars below the main content.</p>'),
+    '#attributes' => array(
+      'class' => array('mayo-layout-form'),
+    ),
+    '#collapsible' => TRUE,
+    '#collapsed' => TRUE,
+  );
+
+  /* **********************
+   * Smalltouch landscape
+   * ******************** */
+
+  $form['layout']['smalltouch']['landscape'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Landscape'),
+    '#description' => t('<h4>Landscape smalltouch <span class="field-description-info">(wide)</span></h4>'),
+    '#collapsible' => TRUE,
+    '#collapsed' => TRUE,
+  );
+
+  $form['layout']['smalltouch']['landscape']['smalltouch-landscape-layout-wrapper'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Choose sidebar layout'),
+  );
+
+  $form['layout']['smalltouch']['landscape']['smalltouch-landscape-layout-wrapper']['smalltouch_landscape_layout'] = array(
+    '#type' => 'radios',
+    '#title' => t('<strong>Choose sidebar positions</strong>'),
+    '#default_value' => theme_get_setting('smalltouch_landscape_layout') ? str_replace('-', '_', theme_get_setting('smalltouch_landscape_layout')) : str_replace('-', '_', theme_get_setting('smartphone_landscape_layout')),
+    '#options' => $smalltouch_landscape_options,
+  );
+
+  $form['layout']['smalltouch']['landscape']['smalltouch-landscape-sidebar-width-wrapper'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Set sidebar widths'),
+    '#description' => t('<strong>Set the width of each sidebar</strong>'),
+    '#states' => array(
+      '!visible' => array('input[name="smalltouch_landscape_layout"]' => array('value' => 'one_col_stack')),
+    ),
+  );
+
+  $form['layout']['smalltouch']['landscape']['smalltouch-landscape-sidebar-width-wrapper']['smalltouch_landscape_sidebar_unit'] = array(
+    '#type' => 'select',
+    '#title' => t('Unit'),
+    '#default_value' => theme_get_setting('smalltouch_landscape_sidebar_unit') ? theme_get_setting('smalltouch_landscape_sidebar_unit') : theme_get_setting('smartphone_landscape_sidebar_unit'),
+    '#options' => $unit_options,
+  );
 
-  /*--------------- Style settings --------------*/
+  $form['layout']['smalltouch']['landscape']['smalltouch-landscape-sidebar-width-wrapper']['smalltouch_landscape_sidebar_first'] = array(
+    '#type' => 'textfield',
+    '#title' => t('First sidebar'),
+    '#default_value' => theme_get_setting('smalltouch_landscape_sidebar_first') ? check_plain(theme_get_setting('smalltouch_landscape_sidebar_first')) : check_plain(theme_get_setting('smartphone_landscape_sidebar_first')),
+    '#size' => 4,
+    '#maxlenght' => 4,
+    '#states' => array(
+      'required' => array('input[name="smalltouch_landscape_layout"]' => array('value' => 'one_col_vert')),
+    ),
+  );
+
+  $form['layout']['smalltouch']['landscape']['smalltouch-landscape-sidebar-width-wrapper']['smalltouch_landscape_sidebar_second'] = array(
+    '#type' => 'textfield',
+    '#title' => t('Second sidebar'),
+    '#default_value' => theme_get_setting('smalltouch_landscape_sidebar_second') ? check_plain(theme_get_setting('smalltouch_landscape_sidebar_second')) : check_plain(theme_get_setting('smartphone_landscape_sidebar_second')),
+    '#size' => 4,
+    '#maxlenght' => 4,
+    '#states' => array(
+      'required' => array('input[name="smalltouch_landscape_layout"]' => array('value' => 'one_col_vert')),
+    ),
+  );
+
+  $form['layout']['smalltouch']['landscape']['smalltouch-landscape-media-queries-wrapper'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Smalltouch Landscape Media Queries'),
+    '#weight' => 1,
+    '#attributes' => array(
+      'class' => array('at-media-queries'),
+    ),
+  );
+
+  $form['layout']['smalltouch']['landscape']['smalltouch-landscape-media-queries-wrapper']['smalltouch_landscape_media_query'] = array(
+    '#type' => 'textfield',
+    '#title' => t('Media query for this layout'),
+    '#default_value' => theme_get_setting('smalltouch_landscape_media_query') ? check_plain(theme_get_setting('smalltouch_landscape_media_query')) : check_plain(theme_get_setting('smartphone_landscape_media_query')),
+    '#description' => t('Do not include @media, it\'s included automatically.'),
+    '#size' => 100,
+    //'#required' => TRUE,
+  );
+
+  // Pass hidden values to the sumbit function, these values are required but the user can't change them via the UI
+  $form['layout']['smalltouch']['landscape']['hidden']['smalltouch_landscape_page_width'] = array(
+    '#type' => 'hidden',
+    '#default_value' => theme_get_setting('smalltouch_landscape_page_width') ? check_plain(theme_get_setting('smalltouch_landscape_page_width')) : check_plain(theme_get_setting('smartphone_landscape_page_width')),
+  );
+  $form['layout']['smalltouch']['landscape']['hidden']['smalltouch_landscape_page_unit'] = array(
+    '#type' => 'hidden',
+    '#default_value' => theme_get_setting('smalltouch_landscape_page_unit') ? theme_get_setting('smalltouch_landscape_page_unit') : theme_get_setting('smartphone_landscape_page_unit'),
+  );
+
+  /* *********************
+   * Smalltouch portrait
+   * ******************* */
+
+  $form['layout']['smalltouch']['portrait'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Portrait'),
+    '#description' => t('<h4>Portrait smalltouch <span class="field-description-info">(narrow)</span></h4><div class="smalltouch-portrait-layout">One column</div><p>The smalltouch portrait layout always displays in one column with sidebars stacked horizontally below the main content. All widths are always 100%.</p>'),
+    '#collapsible' => TRUE,
+    '#collapsed' => TRUE,
+  );
+
+  $form['layout']['smalltouch']['portrait']['smalltouch-portrait-media-queries-wrapper'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Smalltouch Portrait Media Queries'),
+    '#weight' => 1,
+    '#attributes' => array(
+      'class' => array('at-media-queries'),
+    ),
+  );
+
+  $form['layout']['smalltouch']['portrait']['smalltouch-portrait-media-queries-wrapper']['smalltouch_portrait_media_query'] = array(
+    '#type' => 'textfield',
+    '#title' => t('Media query for this layout'),
+    '#default_value' => theme_get_setting('smalltouch_portrait_media_query') ? check_plain(theme_get_setting('smalltouch_portrait_media_query')) : check_plain(theme_get_setting('smartphone_portrait_media_query')),
+    '#description' => t('Do not include @media, it\'s included automatically.'),
+    '#size' => 100,
+  );
+
+  // Pass hidden values to the sumbit function, these values are required but the user can't change them via the UI
+  $form['layout']['smalltouch']['portrait']['hidden']['smalltouch_portrait_page_width'] = array(
+    '#type' => 'hidden',
+    '#default_value' => theme_get_setting('smalltouch_portrait_page_width') ? check_plain(theme_get_setting('smalltouch_portrait_page_width')) : check_plain(theme_get_setting('smartphone_portrait_page_width')),
+  );
+
+  $form['layout']['smalltouch']['portrait']['hidden']['smalltouch_portrait_page_unit'] = array(
+    '#type' => 'hidden',
+    '#default_value' => theme_get_setting('smalltouch_portrait_page_unit') ? theme_get_setting('smalltouch_portrait_page_unit') : theme_get_setting('smartphone_portrait_page_unit'),
+  );
+
+  $form['layout']['smalltouch']['portrait']['hidden']['smalltouch_portrait_sidebar_first'] = array(
+    '#type' => 'hidden',
+    '#default_value' => theme_get_setting('smalltouch_portrait_sidebar_first') ? check_plain(theme_get_setting('smalltouch_portrait_sidebar_first')) : check_plain(theme_get_setting('smartphone_portrait_sidebar_first')),
+  );
+
+  $form['layout']['smalltouch']['portrait']['hidden']['smalltouch_portrait_sidebar_second'] = array(
+    '#type' => 'hidden',
+    '#default_value' => theme_get_setting('smalltouch_portrait_sidebar_second') ? check_plain(theme_get_setting('smalltouch_portrait_sidebar_second')) : check_plain(theme_get_setting('smartphone_portrait_sidebar_second')),
+  );
+
+  $form['layout']['smalltouch']['portrait']['hidden']['smalltouch_portrait_sidebar_unit'] = array(
+    '#type' => 'hidden',
+    '#default_value' => theme_get_setting('smalltouch_portrait_sidebar_unit') ? check_plain(theme_get_setting('smalltouch_portrait_sidebar_unit')) : check_plain(theme_get_setting('smartphone_portrait_sidebar_unit')),
+  );
+
+  $form['layout']['smalltouch']['portrait']['hidden']['smalltouch_portrait_layout'] = array(
+    '#type' => 'hidden',
+    '#default_value' => theme_get_setting('smalltouch_portrait_layout') ? str_replace('-', '_', theme_get_setting('smalltouch_portrait_layout')) : str_replace('-', '_', theme_get_setting('smartphone_portrait_layout')),
+  );
+
+   /* --------------- Style settings -------------- */
   $form['style'] = array(
     '#type' => 'fieldset',
     '#title' => t('Style settings'),
     '#collapsible' => TRUE,
     '#collapsed' => TRUE,
   );
+  $form['style']['legacy_superfish_styles'] = array(
+    '#type' => 'checkbox',
+    '#title' => t('Use old legacy MAYO styles for Superfish.'),
+    '#default_value' => theme_get_setting('legacy_superfish_styles'),
+    '#description' => t('Check here if you want to add mayo-superfish.css.'),
+  );
+  $form['style']['superfish_note'] = array(
+    '#type' => 'item',
+    '#title' => t('Note:'),
+    '#markup' => t('Use this only when coming from the older non-responsive versions of MAYO
+     and your Superfish menu is broken without it. If you haven\'t been using Superfish or are
+     installing MAYO for the first time you shouldn\'t need it and can leave it unchecked.'),
+  );
   $form['style']['round_corners'] = array(
     '#type' => 'select',
     '#title' => t('Content box round corners'),
     '#default_value' => theme_get_setting('round_corners'),
-    '#description' => t('Make the corner of sidebar block and/or node rounded.<br/><b>Note:</b> This feature does not work with IE. Currently, it works with Safari, Firefox, Opera, Google Chrome.'),
+    '#description' => t('Make the corner of sidebar block and/or node rounded.'),
     '#options' => array(
-      0 => t('No round corners'),
-      1 => t('Sidebar block only'),
-      2 => t('Node only'),
-      3 => t('Both sidebar block and node'),
+      'rc-0' => t('No round corners'),
+      'rc-1' => t('Sidebar block only'),
+      'rc-2' => t('Node only'),
+      'rc-3' => t('Both sidebar block and node'),
     ),
     '#suffix' => '<img src="/' . drupal_get_path('theme', 'mayo') . '/images/round-corners.png" /><br />',
   );
@@ -195,7 +783,23 @@ function mayo_form_system_theme_settings_alter(&$form, &$form_state) {
     '#markup' => t('When the menubar type 2 is selected, the menu text color, menu highlight color, menu divier color from the color set are ignored and the fixed colors that match to the menubar are used instead.  Besides, highlight color and menu divider color from the color set are still used for other places such as tabs and sub-menubar for superfish and nice_menus menu.'),
   );
 
-  /*--------------- Advanced header settings --------------*/
+  $form['style']['menubar_background'] = array(
+    '#type' => 'checkbox',
+    '#title' => t('Allow Menubar background color.'),
+    '#default_value' => theme_get_setting('menubar_background'),
+    '#description' => t('Add your own hex background color below.'),
+  );
+
+  $form['style']['menubar_bg_value'] = array(
+    '#type' => 'textfield',
+    '#title' => t('Meubar background color'),
+    '#default_value' => theme_get_setting('menubar_bg_value'),
+    '#size' => 7,
+    '#maxlength' => 7,
+    '#description' => t('Specify the background color for the menubar. This setting is used only when the <em>Allow Meubar background</em> option is checked above.'),
+  );
+
+  /* --------------- Advanced header settings -------------- */
   $form['adv_header'] = array(
     '#type' => 'fieldset',
     '#title' => t('Advanced header settings'),
@@ -337,7 +941,7 @@ function mayo_form_system_theme_settings_alter(&$form, &$form_state) {
     '#suffix' => '<img src="/' . drupal_get_path('theme', 'mayo') . '/images/watermark-sample.png" /><br />',
   );
 
-  /*--------------- Misellanenous settings --------------*/
+  /* --------------- Misellanenous settings -------------- */
   $form['misc'] = array(
     '#type' => 'fieldset',
     '#title' => t('Miscellaneous settings'),
@@ -354,9 +958,53 @@ function mayo_form_system_theme_settings_alter(&$form, &$form_state) {
     '#type' => 'checkbox',
     '#title' => t('Use dark message colors'),
     '#default_value' => theme_get_setting('dark_messages'),
+    '#value' => 'dark-messages',
     '#description' => t('Check here if you use the dark color set. Colors for the status/warning/error messages are adjusted.'),
   );
 
+  /*
+   * Originally posted by dvessel (http://drupal.org/user/56782).
+   * The following will be processed even if the theme is inactive.
+   * If you are on a theme specific settings page but it is not an active
+   * theme (example.com/admin/apearance/settings/THEME_NAME), it will
+   * still be processed.
+   *
+   * Build a list of themes related to the theme specific form. If the form
+   * is specific to a sub-theme, all parent themes leading to it will have
+   * hook_form_theme_settings invoked. For example, if a theme named
+   * 'grandchild' has its settings form in focus, the following will be invoked.
+   * - parent_form_theme_settings()
+   * - child_form_theme_settings()
+   * - grandchild_form_theme_settings()
+   *
+   * If 'child' was in focus it will invoke:
+   * - parent_form_theme_settings()
+   * - child_form_theme_settings()
+   *
+   *  @see http://drupal.org/node/943212
+   */
+  $form_themes = array();
+  $themes = list_themes();
+  $_theme = $GLOBALS['theme_key'];
+  while (isset($_theme)) {
+    $form_themes[$_theme] = $_theme;
+    $_theme = isset($themes[$_theme]->base_theme) ? $themes[$_theme]->base_theme : NULL;
+  }
+  $form_themes = array_reverse($form_themes);
+
+  foreach ($form_themes as $theme_key) {
+    if (function_exists($form_settings = "{$theme_key}_form_theme_settings")) {
+      $form_settings($form, $form_state);
+    }
+  }
+
+  // Include custom form validation and submit functions
+  require_once(drupal_get_path('theme', 'mayo') . '/inc/forms/mayo.validate.inc');
+  require_once(drupal_get_path('theme', 'mayo') . '/inc/forms/mayo.submit.inc');
+
+  // Custom validate and submit functions
+  $form['#validate'][] = 'mayo_settings_validate';
+  $form['#submit'][] = 'mayo_settings_submit';
 }
 
 /**
@@ -389,18 +1037,18 @@ function mayo_page_width_validate($element, &$form_state) {
     $width = $element['#value'];
 
     // check if it is liquid (%) or fixed width (px)
-    if(preg_match("/(\d+)\s*%/", $width, $match)) {
+    if (preg_match("/(\d+)\s*%/", $width, $match)) {
       $num = intval($match[0]);
-      if(50 <= $num && $num <= 100) {
+      if (50 <= $num && $num <= 100) {
         return;
       }
       else {
         form_error($element, t('The width for the liquid layout must be a value between 50% and 100%.'));
       }
     }
-    else if(preg_match("/(\d+)\s*px/", $width, $match)) {
+    elseif (preg_match("/(\d+)\s*px/", $width, $match)) {
       $num = intval($match[0]);
-      if(700 <= $num && $num < 1600) {
+      if (700 <= $num && $num < 1600) {
         return;
       }
       else {
@@ -418,16 +1066,16 @@ function mayo_sidebar_width_validate($element, &$form_state) {
     $width = $element['#value'];
 
     // check if it is liquid (%) or fixed width (px)
-    if(preg_match("/(\d+)\s*%/", $width, $match)) {
+    if (preg_match("/(\d+)\s*%/", $width, $match)) {
       $num = intval($match[0]);
-      if(15 <= $num && $num <= 40) {
+      if (15 <= $num && $num <= 40) {
         return;
       }
       else {
         form_error($element, t('The width of the sidebar must be a value between 15% and 40%.'));
       }
     }
-    else if(preg_match("/(\d+)\s*px/", $width, $match)) {
+    elseif (preg_match("/(\d+)\s*px/", $width, $match)) {
       form_error($element, t('The width of the sidebar must be a value between 15% and 40%. Do not forget to add % character.'));
     }
   }
