$max-width: 1200px !default;
 
 // Padding used for layout margins
 $pad-min: 18px !default;
 $pad-narrow: 25px !default;
 $pad-medium: 35px !default;
 $pad-wide: 55px !default;
 
 // Sidebar widths used in media queries
 $sidebar-width-medium: 240px !default;
 $sidebar-pad-medium: 15px !default;
 $sidebar-pad-wide: 20px !default;
 $sidebar-width-wide: 300px !default;
 
 .group { @include pie-clearfix; }
 
 body {
   -webkit-text-size-adjust: none;
   max-width: $max-width;
   position: relative;
   margin: 0 auto;

   > header, > nav, > footer, #content > article, #content > div > article, #content > div > section, nav[role=pagination] {

     @extend .group;
     padding-left: $pad-min;
     padding-right: $pad-min;
     @media only screen and (min-width: 480px) {
       padding-left: $pad-narrow;
       padding-right: $pad-narrow;
     }
     @media only screen and (min-width: 768px) {
       padding-left: $pad-medium;
       padding-right: $pad-medium;
     }
     @media only screen and (min-width: 992px) {
       padding-left: $pad-wide;
       padding-right: $pad-wide;
     }
   }
   > header {
     font-size: 1em;
     padding-top: 1.5em;
     padding-bottom: 1.5em;
   }
 }
 

 #content {
   > div, > article { width: 100%; }
   > aside {

     float: none;
     padding: 0 $pad-min 1px;

     background-color: lighten($sidebar-bg, 2);

     border-top: 1px solid $sidebar-border;
   }
 }
 

 .toggle-sidebar { display: none; }
 

 @media only screen and (min-width: 550px) {
   body > header { font-size: 1em; }

   #content aside {
     @extend .group;
   }

 }
 @media only screen and (min-width: 768px) {
   body { -webkit-text-size-adjust: auto; }
   body > header { font-size: 1.2em; }

   #main {
     @extend .group;
     padding: 0;
     margin: 0 auto;

   }

   #content {
     @extend .group;
     margin-right: $sidebar-width-medium;
     position: relative;
     > div, > article {
       padding-top: $pad-medium/2;
       padding-bottom: $pad-medium/2;
       float: left;
     }
     > aside {

       width: $sidebar-width-medium - $sidebar-pad-medium*2;
       padding: 0 $sidebar-pad-medium $sidebar-pad-medium;
       background: none;
       float: left;
       margin: 0 -100% 0 0;

       section {
         width: auto; margin-left: 0;
         &.odd, &.even { float: none; width: auto; margin-left: 0; }
       }

     }

     .collapse-sidebar & {

       margin-right: 20px;

       > aside {
         float: none;
         clear: left;
         width: auto;
         margin: 0;
         padding: 0 $pad-medium 1px;
         background-color: lighten($sidebar-bg, 2);
         border-top: 1px solid lighten($sidebar-border, 4);
         section {
           &.odd, &.even { float: left; width: 48%; }
           &.odd { margin-left: 0; }
           &.even { margin-left: 4%; }
         }
       }
       > aside.thirds section {
         width: 30%;
         margin-left: 5%;
         &.first { margin-left: 0; }
       }

     }
   }
   .toggle-sidebar {
     outline: none;

     position: absolute; right: -10px; top: 0; bottom: 0;

     display: inline-block;

     text-decoration: none;
     color: mix($text-color-light, $sidebar-bg);
     width: 9px;
     cursor: pointer;
     &:hover {
       background: mix($sidebar-border, $sidebar-bg);
       @include background(linear-gradient(left, rgba($sidebar-border, .5), rgba($sidebar-border, 0)));
     }
     &:after {
       position: absolute; right: -11px; top: 0;
       width: 20px;
       font-size: 1.2em;
       line-height: 1.1em;
       padding-bottom: .15em;
       @include border-bottom-right-radius(.3em);
       text-align: center;
       background: $main-bg $noise-bg;
       border-bottom: 1px solid $sidebar-border;
       border-right: 1px solid $sidebar-border;
       content: "\00BB";
       text-indent: -1px;
     }

     .collapse-sidebar & {
       text-indent: 0px;

       right: -20px;
       width: 19px;

       &:hover {

         background: mix($sidebar-border, $sidebar-bg);
       }
       &:after {
         border-left: 1px solid $sidebar-border;
         text-shadow: #fff 0 1px;
         content: "\00AB";
         left: 0px; right: 0;
         text-align: center;
         text-indent: 0;
         border: 0;
         border-right-width: 0;
         background: none;

       }
     }

   }
 }
 
 @media only screen and (min-width: 992px) {
   body > header { font-size: 1.3em; }

   #content { margin-right: $sidebar-width-wide; }
   #content {
     > div, > article {
       padding-top: $pad-wide/2;
       padding-bottom: $pad-wide/2;
     }
     > aside {

       width: $sidebar-width-wide - $sidebar-pad-wide*2;
       padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide;
     }

     .collapse-sidebar & aside {
       padding: { left: $pad-wide; right: $pad-wide; }
       @extend .group;
     }

   }
 }