Building Responsive Layouts with Sass

_grid-system.scss

@import "compass/utilities/general/clearfix";
$gutter-width: 10px; // All grids systems have the same gutter width
$float-direction: left;
$left-gutter-width: ceil($gutter-width / 2) !default;
$right-gutter-width: $gutter-width - $left-gutter-width !default;

$base-line-height: 21px;
$show-grid-background: false;

@mixin centered {
  margin: 0 auto;
}

// Float an element and apply gutters.
@mixin floated($side : $float-direction, 
               $left-gutter : $left-gutter-width,
               $right-gutter : $right-gutter-width) {
  float: $side;
  @if $left-gutter > 0 {
    margin-left: $left-gutter;
  }
  @if $right-gutter > 0 {
    margin-right: $right-gutter;
  }
}

// *********** General layout utilities ***********
// The width of a column given the units and unit width of the grid.
@function column-width($n, $col-width, $gutter-width: $gutter-width) {
  @return $col-width * $n + $gutter-width * ($n - 1);
}

// A grid container. Unlike most grid containers,
// this one does not have a width. That is assigned
// on a per-media basis.
@mixin container {
  @include centered; // this is a simple mixin from compass-layouts that sets margin: 0 auto.
  @include pie-clearfix;
}

// The basic structure for a column aligned to a grid.
@mixin column-base {
  @include floated; // make this column floated to the left
  @include pie-clearfix;
}

// Generates the base classes needed for a grid system
@mixin grid-base(
  $base-class: grid-column,
  $first-column-class: g-all-f,
  $last-column-class: g-all-l
) {
  .#{$base-class}         { @include column-base;       }
  .#{$first-column-class} { margin-left: 0 !important;  clear: left; }
  .#{$last-column-class}  { margin-right: 0 !important; }
}

// add $n grid units worth of space to the left of a column
@mixin prepend($n, $col-width) {
  padding-left: column-width($n, $col-width) + $gutter-width;
}

// add $n grid units worth of space to the left of a column
@mixin append($n, $col-width) {
  padding-right: column-width($n, $col-width) + $gutter-width;
}

// The column mixin can be used in two different ways.
// Where base classes are provided they are extended to
// produce less css output. When not provided this
// mixin produces output generally equivalent to the
// blueprint column mixin.
@mixin column(
  $n, $max-unit, $col-width,
  $base-class: false,
  $first-column-class: false,
  $last-column-class: false
) {
  @if $base-class { @extend .#{$base-class}; }
  @else           { @include column-base;    }
  @if $n == $max-unit {
    @if $first-column-class { @extend .#{$first-column-class}; }
    @else                   { margin-left: 0;                  }
    @if $last-column-class  { @extend .#{$last-column-class};  }
    @else                   { margin-right: 0;                 }
    @extend .#{$last-column-class};
  }
  width: column-width($n, $col-width)
}

// Generate grid classes according to a common naming convention
//
// $media is the media prefix. E.g. d (deskotop), t (tablet), h (handheld), or hl (handheld landscape)
// $max-unit is how many columns are in this grid system.
// $col-width is the width of a column
// The column base class and gutter removal class names are derived
// from the prefix, but can be overridden.
@mixin grids($media, $units, $max-unit, $col-width,
             $pad-units: 0 1 2 3 4 5 6 7 8,
             $base-class: "g-#{$media}",
             $first-column-class: "g-#{$media}-f",
             $last-column-class: "g-#{$media}-l"
) {

  // establish the base classes
  @include grid-base($base-class, $first-column-class, $last-column-class);

  // generate padding classes
  @each $n in $pad-units {
    .g-#{$media}-p#{$n} { @include prepend($n, $col-width); }
    .g-#{$media}-a#{$n}  { @include append($n, $col-width);  }
  }

  // generate grid classes
  @each $n in $units {
    .g-#{$media}-#{$n} {
      @include column($n, $max-unit, $col-width,
                      $base-class, $first-column-class, $last-column-class);
    }
  }

}

_invariant-1of3.scss

.g-all-1of3 {
  .l-1c .c-1 & {
    @extend .g-d-8;
    @extend .g-h-4;
    @extend .g-hl-4;
  }

  .l-2c .c-1 & {
    @extend .g-d-6;
    @extend .g-h-4;
    @extend .g-hl-4;
  }
  .l-2c .c-2 & {
    @extend .g-d-3;
    @extend .g-h-4;
    @extend .g-hl-4;
  }

  // 1/3 doesn't really work, so the 0.333 grid is given to the 2/3 column.
  .l-3c .c-1 & {
    @extend .g-d-3;
    @extend .g-h-4;
    @extend .g-hl-4;
  }

  .l-3c .c-2 & {
    @extend .g-d-3;
    @extend .g-h-4;
    @extend .g-hl-4;
  }

  .l-3c .c-3 & {
    @extend .g-d-2;
    @extend .g-h-4;
    @extend .g-hl-4;
  }

}

_invariant-1of4.scss

.g-all-1of4 {
  .l-1c .c-1 & {
    @extend .g-d-6;
    @extend .g-h-3;
    @extend .g-hl-3;
  }

  .l-2c .c-1 & {
    @extend .g-d-4;
    @extend .g-h-3;
    @extend .g-hl-3;
  }
  .l-2c .c-2 & {
    @extend .g-d-2;
    @extend .g-h-3;
    @extend .g-hl-3;
  }

  // One Fourth doesn't really work in a 10 column section
  // You might need to use prepend and append like this:
  // &.g-all-f {
  //   @extend .g-d-p1;
  // }
  // &.g-all-l {
  //   @extend .g-d-a1;
  // }
  .l-3c .c-1 & {
    @extend .g-d-2;
    @extend .g-h-3;
    @extend .g-hl-3;
  }

  .l-3c .c-2 & {
    @extend .g-d-2;
    @extend .g-h-3;
    @extend .g-hl-3;
  }

  // This doesn't work at all.
  // Make it obvious
  .l-3c .c-3 & {
    color: red;
    background-color: red;
  }
}

_invariant-2of3.scss

.g-all-2of3 {
  .l-1c .c-1 & {
    @extend .g-d-16;
    @extend .g-h-8;
    @extend .g-hl-8;
  }

  .l-2c .c-1 & {
    @extend .g-d-10;
    @extend .g-h-8;
    @extend .g-hl-8;
  }
  .l-2c .c-2 & {
    @extend .g-d-5;
    @extend .g-h-8;
    @extend .g-hl-8;
  }

  .l-3c .c-1 & {
    @extend .g-d-7;
    @extend .g-h-8;
    @extend .g-hl-8;
  }

  .l-3c .c-2 & {
    @extend .g-d-5;
    @extend .g-h-8;
    @extend .g-hl-8;
  }

  .l-3c .c-3 & {
    @extend .g-d-4;
    @extend .g-h-8;
    @extend .g-hl-8;
  }

}

_invariant-full.scss

.g-all-full {
  .l-1c .c-1 & {
    @extend .g-d-24;
    @extend .g-h-12;
    @extend .g-hl-12;
  }

  .l-2c .c-1 & {
    @extend .g-d-16;
    @extend .g-d-f;
    @extend .g-d-l;
    @extend .g-h-12;
    @extend .g-hl-12;
  }

  .l-2c .c-2 & {
    @extend .g-d-8;
    @extend .g-d-f;
    @extend .g-d-l;
    @extend .g-h-12;
    @extend .g-hl-12;
  }

  .l-3c .c-1 & {
    @extend .g-d-10;
    @extend .g-d-f;
    @extend .g-d-l;
    @extend .g-h-12;
    @extend .g-hl-12;
  }

  .l-3c .c-2 & {
    @extend .g-d-8;
    @extend .g-d-f;
    @extend .g-d-l;
    @extend .g-h-12;
    @extend .g-hl-12;
  }

  .l-3c .c-3 & {
    @extend .g-d-6;
    @extend .g-d-f;
    @extend .g-d-l;
    @extend .g-h-12;
    @extend .g-hl-12;
  }

}

_invariant-half.scss

.g-all-half {
  .l-1c .c-1 & {
    @extend .g-d-12;
    @extend .g-h-6;
    @extend .g-hl-6;
  }

  .l-2c .c-1 & {
    @extend .g-d-8;
    @extend .g-h-6;
    @extend .g-hl-6;
  }
  .l-2c .c-2 & {
    @extend .g-d-4;
    @extend .g-h-6;
    @extend .g-hl-6;
  }

  .l-3c .c-1 & {
    @extend .g-d-5;
    @extend .g-h-6;
    @extend .g-hl-6;
  }

  .l-3c .c-2 & {
    @extend .g-d-4;
    @extend .g-h-6;
    @extend .g-hl-6;
  }

  .l-3c .c-3 & {
    @extend .g-d-3;
    @extend .g-h-6;
    @extend .g-hl-6;
  }
}

_invariant-half2full.scss

// Half in desktop and larger, full in smaller media.
.g-all-half2full {
  .l-1c .c-1 & {
    @extend .g-d-12;
    @extend .g-hl-12;
    @extend .g-h-12;
  }

  .l-2c .c-1 & {
    @extend .g-d-8;
    @extend .g-h-12;
    @extend .g-hl-12;
  }
  .l-2c .c-2 & {
    @extend .g-d-4;
    @extend .g-h-12;
    @extend .g-hl-12;
  }

  .l-3c .c-1 & {
    @extend .g-d-5;
    @extend .g-h-12;
    @extend .g-hl-12;
  }
  .l-3c .c-2 & {
    @extend .g-d-4;
    @extend .g-h-12;
    @extend .g-hl-12;
  }
  .l-3c .c-3 & {
    @extend .g-d-3;
    @extend .g-h-12;
    @extend .g-hl-12;
  }
}

_invariants.scss

@import "invariant-full";
@import "invariant-2of3";
@import "invariant-half";
@import "invariant-half2full";
@import "invariant-1of3";
@import "invariant-1of4";

_layout-full-width.scss

.l-1c {
  // main content
  .c-1 {
    @extend .g-all-full;
  }
}

_layout-three-col.scss

.l-3c {
  // Primary content
  .c-1 {
    @extend .g-d-10;
    @extend .g-h-12;
    @extend .g-hl-12;
  }
  // Secondary content (to the
  // right of the primary content)
  .c-2 {
    @extend .g-d-8;
    @extend .g-d-l;
    @extend .g-h-12;
    @extend .g-hl-12;
  }
  // Tertiary content (to the
  // left of the primary content)
  .c-3 {
    @extend .g-d-6;
    @extend .g-d-f;
    @extend .g-h-12;
    @extend .g-hl-12;
  }
}

_layout-two-col-right.scss

// The l-2cr class simply
// swaps the visual appearance of the main and secondary content
// So you should apply it in addition to the .l-2c class.
//
// The main content should come first in the document source order.
.l-2cr {
  .c-1 {
    margin-left: desktop-column-width(8) + $gutter-width !important;
  }
  .c-2 {
    margin-left: - desktop-column-width(24) - $gutter-width !important;
  }
  @media only screen and (max-width: 759px) {
    .c-1, .c-2 {
      margin-left: 0 !important;
    }
  }
}

_layout-two-col.scss

// Note: In the two col layouts, you cannot have three thirds
// because it doesn't divide evenly.
.l-2c {
  // Primary content
  .c-1 {
    @extend .g-d-16;
    @extend .g-d-f;
    @extend .g-h-12;
    @extend .g-hl-12;
  }
  // Secondary content
  .c-2 {
    @extend .g-d-8;
    @extend .g-d-l;
    @extend .g-h-12;
    @extend .g-hl-12;
  }
}

_layouts.scss

@import "layout-full-width";
@import "layout-two-col";
@import "layout-two-col-right";
@import "layout-three-col";

// Always have some minimal
// space at the edges of the screen
body {
  padding: 0 $gutter-width / 2;
}

// #page is a site-wide singleton ID
#page {
  @extend .grid-wrapper;
}

_media-all.scss

// ***** Standard Unit Divisions *****

.g-base-c {
  @include container;
}

.g-all-c {
  @extend .g-d-c;
  @extend .g-h-c;
  @extend .g-h-c;
}

.g-all-f {
  @extend .g-d-f;
  @extend .g-h-f;
  @extend .g-hl-f;
}

.g-all-l {
  @extend .g-d-l;
  @extend .g-h-l;
  @extend .g-hl-l;
}

.g-all-fl {
  @extend .g-all-f;
  @extend .g-all-l;
}

.g-all-p0 {
  @extend .g-d-p0;
  @extend .g-h-p0;
  @extend .g-hl-p0;
}

.g-all-a0 {
  @extend .g-d-a0;
  @extend .g-h-a0;
  @extend .g-hl-a0;
}

.g-all-p1 {
  @extend .g-d-p1;
  @extend .g-h-p1;
  @extend .g-hl-p1;
}

.g-all-a1 {
  @extend .g-d-a1;
  @extend .g-h-a1;
  @extend .g-hl-a1;
}

_media-desktop.scss

// *********** Desktop Details ***********
$desktop-columns: 24;
$page-wrapper-padding: 10px;
$desktop-width: 980px - $gutter-width - ($page-wrapper-padding * 2);
$desktop-wrapper-width: $desktop-width + 2 * $page-wrapper-padding;
$desktop-col-width: ($desktop-width - $gutter-width * ($desktop-columns - 1)) / $desktop-columns;

@function desktop-column-width($n) {
  @return column-width($n, $desktop-col-width);
}

@mixin desktop-column($n) {
  @include column($n, $desktop-columns, $desktop-col-width, g-d);
}

// The desktop grid is the default for any user-agent
// that does not understand media queries.

// The desktop container extends the
// base container and defines a width.
// It also established the grid-debugging styles.
.g-d-c {
  @extend .g-base-c;
  width: $desktop-width;
  @include optional-grid-background(
    $total: $desktop-columns,
    $column: $desktop-col-width,
    $gutter: $gutter-width,
    $baseline: $base-line-height
  );
}

.g-d-sunken { float: none !important; }

.grid-wrapper {
  @include centered;
  width: $desktop-wrapper-width;
}

@include grids(d,
               1 2 3 4 5 6 7 8 9
               10 11 12 13 14 15 16
               18 20 21 22 23 24,
               $desktop-columns,
               $desktop-col-width);

_media-handheld-landscape.scss

// *********** Handheld Landscape Details ***********
$handheld-landscape-columns: 12;
$handheld-landscape-width: 476px - $gutter-width - ($page-wrapper-padding * 2);
$handheld-landscape-wrapper-width: $handheld-landscape-width + 2 * $page-wrapper-padding;
$handheld-landscape-col-width: ($handheld-landscape-width - $gutter-width * ($handheld-landscape-columns - 1)) / $handheld-landscape-columns;

@function handheld-landscape-column-width($n) {
  @return column-width($n, $handheld-landscape-col-width);
}

@mixin handheld-landscape-column($n) {
  @include column($n, $handheld-landscape-columns,
                  $handheld-landscape-col-width,
                  g-hl);
}

// handhelds in landscape orientation
@media only screen and (min-width: 480px) and (max-width: 759px) {

  // Disables iphone font size increase when viewing in landscape mode.
  html { -webkit-text-size-adjust: none; }

  .g-h-c {
    @extend .g-base-c;
    width: $handheld-landscape-width;
    @include optional-grid-background(
      $total: $handheld-landscape-columns,
      $column: $handheld-landscape-col-width,
      $gutter: $gutter-width,
      $baseline: $base-line-height
    );
  }

  .g-hl-sunken { float: none !important; }

  .grid-wrapper {
    width: $handheld-landscape-wrapper-width;
  }

  @include grids(hl,
                 1 2 3 4 5 6 7 8 9 10 11 12,
                 $handheld-landscape-columns,
                 $handheld-landscape-col-width);
}

_media-handheld.scss

// *********** Handheld Portrait Details ***********
$handheld-columns: 12;
$handheld-width: 320px - $gutter-width - ($page-wrapper-padding * 2);
$handheld-wrapper-width: $handheld-width + 2 * $page-wrapper-padding;
$handheld-col-width: ($handheld-width - $gutter-width * ($handheld-columns - 1)) / $handheld-columns;

@function handheld-column-width($n) {
  @return column-width($n, $handheld-col-width);
}

@mixin handheld-column($n) {
  @include column($n, $handheld-columns,
                  $handheld-col-width,
                  g-h);
}

// Portrait orientation of handheld devices
@media only screen and (max-width: 479px) {

  .g-h-c {
    @extend .g-base-c;
    width: $handheld-width;
    @include optional-grid-background(
      $total: $handheld-columns,
      $column: $handheld-col-width,
      $gutter: $gutter-width,
      $baseline: $base-line-height
    );
  }

  .g-h-sunken { float: none !important; }

  .grid-wrapper {
    width: $handheld-wrapper-width;
  }

  @include grids(h,
                 1 2 3 4 5 6 7 8 9 10 11 12,
                 $handheld-columns,
                 $handheld-col-width);
}

_media-support.scss

$grid-background-column-color: rgba(100, 100, 225, 0.15); //purple
// $grid-background-column-color: rgba(#E5E57A, 0.2); //yellow

@mixin caring-grid-background($total, $column, $gutter, $baseline) {
  @if $show-grid-overlay-class {
    position: relative;
    .#{$show-grid-overlay-class} {
      position: absolute;
      top: 0; bottom: 0; left: 0; right: 0;
      @include grid-background($total, $column, $gutter, 0);
      background-position: left -5px;
      pointer-events: none;
    }
  }
  @else {
    @include grid-background($total, $column, $gutter, $baseline);
    background-position: left -5px;
  }
  
}
@mixin optional-grid-background($total, $column, $gutter, $baseline) {
  @if $show-grid-background {
    @if $show-grid-class {
      .#{$show-grid-class} & {
        @include caring-grid-background($total, $column, $gutter, $baseline);
      }
    }
    @else {
      @include caring-grid-background($total, $column, $gutter, $baseline);
    }
  }
}

_media-visibility.scss

// These classes make it possible to display elements in only certain medias.
.handheld-landscape-visible,
.handheld-visible {
  display: none;
}

@media only screen and (max-width: 759px) and (min-width: 480px) {
  .desktop-visible, .handheld-visible { display: none !important; }
  .handheld-landscape-visible { display: block !important; }
  #{elements-of-type(inline)} {
    &.handheld-landscape-visible {
      display: inline !important;
    }
  }
}

@media only screen and (max-width: 479px) and (min-width: 1px) {
  .desktop-visible, .handheld-landscape-visible { display: none !important; }
  .handheld-visible { display: block !important; }
  #{elements-of-type(inline)} {
    &.handheld-visible {
      display: inline !important;
    }
  }
}

_media.scss

@import "media-support";
@import "media-desktop";
@import "media-handheld";
@import "media-handheld-landscape";
@import "media-visibility";
@import "media-all";

_template-one.scss

.template-1 {
  #page    { @extend .l-2c; }
  header   { @extend .c-h;  }
  article  { @extend .c-1;  }
  #sidebar { @extend .c-2;  }
  footer   { @extend .c-f;  }
}

_templates.scss

@import "template-one";

config.rb

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "."
sass_dir = "."

output_style = :expanded
line_comments = false

output.css

.g-d-c, .g-all-c {
  width: 950px;
}

.g-d-sunken {
  float: none !important;
}

.grid-wrapper, #page {
  margin: 0 auto;
  width: 970px;
}

.g-d, .g-d-1, .g-d-2, .l-3c .c-3 .g-all-1of3, .l-2c .c-2 .g-all-1of4, .l-3c .c-1 .g-all-1of4, .l-3c .c-2 .g-all-1of4, .g-d-3, .l-3c .c-3 .g-all-half, .l-3c .c-3 .g-all-half2full, .l-2c .c-2 .g-all-1of3, .l-3c .c-1 .g-all-1of3, .l-3c .c-2 .g-all-1of3, .g-d-4, .l-3c .c-3 .g-all-2of3, .l-2c .c-2 .g-all-half, .l-3c .c-2 .g-all-half, .l-2c .c-2 .g-all-half2full, .l-3c .c-2 .g-all-half2full, .l-2c .c-1 .g-all-1of4, .g-d-5, .l-2c .c-2 .g-all-2of3, .l-3c .c-2 .g-all-2of3, .l-3c .c-1 .g-all-half, .l-3c .c-1 .g-all-half2full, .g-d-6, .l-3c .c-3, .l-3c .c-3 .g-all-full, .l-3c .c-3 .l-1c .c-1, .l-1c .l-3c .c-3 .c-1, .l-2c .c-1 .g-all-1of3, .l-1c .c-1 .g-all-1of4, .g-d-7, .l-3c .c-1 .g-all-2of3, .g-d-8, .l-2c .c-2, .l-3c .c-2, .l-2c .c-2 .g-all-full, .l-2c .c-2 .l-1c .c-1, .l-1c .l-2c .c-2 .c-1, .l-3c .c-2 .g-all-full, .l-3c .c-2 .l-1c .c-1, .l-1c .l-3c .c-2 .c-1, .l-2c .c-1 .g-all-half, .l-2c .c-1 .g-all-half2full, .l-1c .c-1 .g-all-1of3, .g-d-9, .g-d-10, .l-3c .c-1, .l-3c .c-1 .g-all-full, .l-3c .c-1 .l-1c .c-1, .l-1c .l-3c .c-1 .c-1, .l-2c .c-1 .g-all-2of3, .g-d-11, .g-d-12, .l-1c .c-1 .g-all-half, .l-1c .c-1 .g-all-half2full, .g-d-13, .g-d-14, .g-d-15, .g-d-16, .l-2c .c-1, .l-2c .c-1 .g-all-full, .l-2c .c-1 .l-1c .c-1, .l-1c .l-2c .c-1 .c-1, .l-1c .c-1 .g-all-2of3, .g-d-18, .g-d-20, .g-d-21, .g-d-22, .g-d-23, .g-d-24, .l-1c .c-1 .g-all-full, .l-1c .c-1 .c-1 {
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  *zoom: 1;
}
.g-d:after, .g-d-1:after, .g-d-2:after, .l-3c .c-3 .g-all-1of3:after, .l-2c .c-2 .g-all-1of4:after, .l-3c .c-1 .g-all-1of4:after, .l-3c .c-2 .g-all-1of4:after, .g-d-3:after, .l-3c .c-3 .g-all-half:after, .l-3c .c-3 .g-all-half2full:after, .l-2c .c-2 .g-all-1of3:after, .l-3c .c-1 .g-all-1of3:after, .l-3c .c-2 .g-all-1of3:after, .g-d-4:after, .l-3c .c-3 .g-all-2of3:after, .l-2c .c-2 .g-all-half:after, .l-3c .c-2 .g-all-half:after, .l-2c .c-2 .g-all-half2full:after, .l-3c .c-2 .g-all-half2full:after, .l-2c .c-1 .g-all-1of4:after, .g-d-5:after, .l-2c .c-2 .g-all-2of3:after, .l-3c .c-2 .g-all-2of3:after, .l-3c .c-1 .g-all-half:after, .l-3c .c-1 .g-all-half2full:after, .g-d-6:after, .l-3c .c-3:after, .l-3c .c-3 .g-all-full:after, .l-3c .c-3 .l-1c .c-1:after, .l-1c .l-3c .c-3 .c-1:after, .l-2c .c-1 .g-all-1of3:after, .l-1c .c-1 .g-all-1of4:after, .g-d-7:after, .l-3c .c-1 .g-all-2of3:after, .g-d-8:after, .l-2c .c-2:after, .l-3c .c-2:after, .l-2c .c-2 .g-all-full:after, .l-2c .c-2 .l-1c .c-1:after, .l-1c .l-2c .c-2 .c-1:after, .l-3c .c-2 .g-all-full:after, .l-3c .c-2 .l-1c .c-1:after, .l-1c .l-3c .c-2 .c-1:after, .l-2c .c-1 .g-all-half:after, .l-2c .c-1 .g-all-half2full:after, .l-1c .c-1 .g-all-1of3:after, .g-d-9:after, .g-d-10:after, .l-3c .c-1:after, .l-3c .c-1 .g-all-full:after, .l-3c .c-1 .l-1c .c-1:after, .l-1c .l-3c .c-1 .c-1:after, .l-2c .c-1 .g-all-2of3:after, .g-d-11:after, .g-d-12:after, .l-1c .c-1 .g-all-half:after, .l-1c .c-1 .g-all-half2full:after, .g-d-13:after, .g-d-14:after, .g-d-15:after, .g-d-16:after, .l-2c .c-1:after, .l-2c .c-1 .g-all-full:after, .l-2c .c-1 .l-1c .c-1:after, .l-1c .l-2c .c-1 .c-1:after, .l-1c .c-1 .g-all-2of3:after, .g-d-18:after, .g-d-20:after, .g-d-21:after, .g-d-22:after, .g-d-23:after, .g-d-24:after, .l-1c .c-1 .g-all-full:after, .l-1c .c-1 .c-1:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

.g-d-f, .g-d-24, .l-1c .c-1 .g-all-full, .l-1c .c-1 .c-1, .g-all-f, .g-all-fl, .l-2c .c-1, .l-3c .c-3, .l-2c .c-1 .g-all-full, .l-2c .c-1 .l-1c .c-1, .l-1c .l-2c .c-1 .c-1, .l-2c .c-2 .g-all-full, .l-2c .c-2 .l-1c .c-1, .l-1c .l-2c .c-2 .c-1, .l-3c .c-1 .g-all-full, .l-3c .c-1 .l-1c .c-1, .l-1c .l-3c .c-1 .c-1, .l-3c .c-2 .g-all-full, .l-3c .c-2 .l-1c .c-1, .l-1c .l-3c .c-2 .c-1, .l-3c .c-3 .g-all-full, .l-3c .c-3 .l-1c .c-1, .l-1c .l-3c .c-3 .c-1 {
  margin-left: 0 !important;
  clear: left;
}

.g-d-l, .g-d-24, .l-1c .c-1 .g-all-full, .l-1c .c-1 .c-1, .g-all-l, .g-all-fl, .l-2c .c-2, .l-3c .c-2, .l-2c .c-1 .g-all-full, .l-2c .c-1 .l-1c .c-1, .l-1c .l-2c .c-1 .c-1, .l-2c .c-2 .g-all-full, .l-2c .c-2 .l-1c .c-1, .l-1c .l-2c .c-2 .c-1, .l-3c .c-1 .g-all-full, .l-3c .c-1 .l-1c .c-1, .l-1c .l-3c .c-1 .c-1, .l-3c .c-2 .g-all-full, .l-3c .c-2 .l-1c .c-1, .l-1c .l-3c .c-2 .c-1, .l-3c .c-3 .g-all-full, .l-3c .c-3 .l-1c .c-1, .l-1c .l-3c .c-3 .c-1 {
  margin-right: 0 !important;
}

.g-d-p0, .g-all-p0 {
  padding-left: 0px;
}

.g-d-a0, .g-all-a0 {
  padding-right: 0px;
}

.g-d-p1, .g-all-p1 {
  padding-left: 40px;
}

.g-d-a1, .g-all-a1 {
  padding-right: 40px;
}

.g-d-p2 {
  padding-left: 80px;
}

.g-d-a2 {
  padding-right: 80px;
}

.g-d-p3 {
  padding-left: 120px;
}

.g-d-a3 {
  padding-right: 120px;
}

.g-d-p4 {
  padding-left: 160px;
}

.g-d-a4 {
  padding-right: 160px;
}

.g-d-p5 {
  padding-left: 200px;
}

.g-d-a5 {
  padding-right: 200px;
}

.g-d-p6 {
  padding-left: 240px;
}

.g-d-a6 {
  padding-right: 240px;
}

.g-d-p7 {
  padding-left: 280px;
}

.g-d-a7 {
  padding-right: 280px;
}

.g-d-p8 {
  padding-left: 320px;
}

.g-d-a8 {
  padding-right: 320px;
}

.g-d-1 {
  width: 30px;
}

.g-d-2, .l-3c .c-3 .g-all-1of3, .l-2c .c-2 .g-all-1of4, .l-3c .c-1 .g-all-1of4, .l-3c .c-2 .g-all-1of4 {
  width: 70px;
}

.g-d-3, .l-3c .c-3 .g-all-half, .l-3c .c-3 .g-all-half2full, .l-2c .c-2 .g-all-1of3, .l-3c .c-1 .g-all-1of3, .l-3c .c-2 .g-all-1of3 {
  width: 110px;
}

.g-d-4, .l-3c .c-3 .g-all-2of3, .l-2c .c-2 .g-all-half, .l-3c .c-2 .g-all-half, .l-2c .c-2 .g-all-half2full, .l-3c .c-2 .g-all-half2full, .l-2c .c-1 .g-all-1of4 {
  width: 150px;
}

.g-d-5, .l-2c .c-2 .g-all-2of3, .l-3c .c-2 .g-all-2of3, .l-3c .c-1 .g-all-half, .l-3c .c-1 .g-all-half2full {
  width: 190px;
}

.g-d-6, .l-3c .c-3, .l-3c .c-3 .g-all-full, .l-3c .c-3 .l-1c .c-1, .l-1c .l-3c .c-3 .c-1, .l-2c .c-1 .g-all-1of3, .l-1c .c-1 .g-all-1of4 {
  width: 230px;
}

.g-d-7, .l-3c .c-1 .g-all-2of3 {
  width: 270px;
}

.g-d-8, .l-2c .c-2, .l-3c .c-2, .l-2c .c-2 .g-all-full, .l-2c .c-2 .l-1c .c-1, .l-1c .l-2c .c-2 .c-1, .l-3c .c-2 .g-all-full, .l-3c .c-2 .l-1c .c-1, .l-1c .l-3c .c-2 .c-1, .l-2c .c-1 .g-all-half, .l-2c .c-1 .g-all-half2full, .l-1c .c-1 .g-all-1of3 {
  width: 310px;
}

.g-d-9 {
  width: 350px;
}

.g-d-10, .l-3c .c-1, .l-3c .c-1 .g-all-full, .l-3c .c-1 .l-1c .c-1, .l-1c .l-3c .c-1 .c-1, .l-2c .c-1 .g-all-2of3 {
  width: 390px;
}

.g-d-11 {
  width: 430px;
}

.g-d-12, .l-1c .c-1 .g-all-half, .l-1c .c-1 .g-all-half2full {
  width: 470px;
}

.g-d-13 {
  width: 510px;
}

.g-d-14 {
  width: 550px;
}

.g-d-15 {
  width: 590px;
}

.g-d-16, .l-2c .c-1, .l-2c .c-1 .g-all-full, .l-2c .c-1 .l-1c .c-1, .l-1c .l-2c .c-1 .c-1, .l-1c .c-1 .g-all-2of3 {
  width: 630px;
}

.g-d-18 {
  width: 710px;
}

.g-d-20 {
  width: 790px;
}

.g-d-21 {
  width: 830px;
}

.g-d-22 {
  width: 870px;
}

.g-d-23 {
  width: 910px;
}

.g-d-24, .l-1c .c-1 .g-all-full, .l-1c .c-1 .c-1 {
  width: 950px;
}

@media only screen and (max-width: 479px) {
  .g-h-c, .g-all-c {
    width: 290px;
  }

  .g-h-sunken {
    float: none !important;
  }

  .grid-wrapper, #page {
    width: 310px;
  }

  .g-h, .g-h-1, .g-h-2, .g-h-3, .l-1c .c-1 .g-all-1of4, .l-2c .c-1 .g-all-1of4, .l-2c .c-2 .g-all-1of4, .l-3c .c-1 .g-all-1of4, .l-3c .c-2 .g-all-1of4, .g-h-4, .l-1c .c-1 .g-all-1of3, .l-2c .c-1 .g-all-1of3, .l-2c .c-2 .g-all-1of3, .l-3c .c-1 .g-all-1of3, .l-3c .c-2 .g-all-1of3, .l-3c .c-3 .g-all-1of3, .g-h-5, .g-h-6, .l-1c .c-1 .g-all-half, .l-2c .c-1 .g-all-half, .l-2c .c-2 .g-all-half, .l-3c .c-1 .g-all-half, .l-3c .c-2 .g-all-half, .l-3c .c-3 .g-all-half, .g-h-7, .g-h-8, .l-1c .c-1 .g-all-2of3, .l-2c .c-1 .g-all-2of3, .l-2c .c-2 .g-all-2of3, .l-3c .c-1 .g-all-2of3, .l-3c .c-2 .g-all-2of3, .l-3c .c-3 .g-all-2of3, .g-h-9, .g-h-10, .g-h-11, .g-h-12, .l-2c .c-1, .l-2c .c-2, .l-3c .c-1, .l-3c .c-2, .l-3c .c-3, .l-1c .c-1 .g-all-full, .l-1c .c-1 .c-1, .l-2c .c-1 .g-all-full, .l-2c .c-1 .l-1c .c-1, .l-1c .l-2c .c-1 .c-1, .l-2c .c-2 .g-all-full, .l-2c .c-2 .l-1c .c-1, .l-1c .l-2c .c-2 .c-1, .l-3c .c-1 .g-all-full, .l-3c .c-1 .l-1c .c-1, .l-1c .l-3c .c-1 .c-1, .l-3c .c-2 .g-all-full, .l-3c .c-2 .l-1c .c-1, .l-1c .l-3c .c-2 .c-1, .l-3c .c-3 .g-all-full, .l-3c .c-3 .l-1c .c-1, .l-1c .l-3c .c-3 .c-1, .l-1c .c-1 .g-all-half2full, .l-2c .c-1 .g-all-half2full, .l-2c .c-2 .g-all-half2full, .l-3c .c-1 .g-all-half2full, .l-3c .c-2 .g-all-half2full, .l-3c .c-3 .g-all-half2full {
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    *zoom: 1;
  }
  .g-h:after, .g-h-1:after, .g-h-2:after, .g-h-3:after, .l-1c .c-1 .g-all-1of4:after, .l-2c .c-1 .g-all-1of4:after, .l-2c .c-2 .g-all-1of4:after, .l-3c .c-1 .g-all-1of4:after, .l-3c .c-2 .g-all-1of4:after, .g-h-4:after, .l-1c .c-1 .g-all-1of3:after, .l-2c .c-1 .g-all-1of3:after, .l-2c .c-2 .g-all-1of3:after, .l-3c .c-1 .g-all-1of3:after, .l-3c .c-2 .g-all-1of3:after, .l-3c .c-3 .g-all-1of3:after, .g-h-5:after, .g-h-6:after, .l-1c .c-1 .g-all-half:after, .l-2c .c-1 .g-all-half:after, .l-2c .c-2 .g-all-half:after, .l-3c .c-1 .g-all-half:after, .l-3c .c-2 .g-all-half:after, .l-3c .c-3 .g-all-half:after, .g-h-7:after, .g-h-8:after, .l-1c .c-1 .g-all-2of3:after, .l-2c .c-1 .g-all-2of3:after, .l-2c .c-2 .g-all-2of3:after, .l-3c .c-1 .g-all-2of3:after, .l-3c .c-2 .g-all-2of3:after, .l-3c .c-3 .g-all-2of3:after, .g-h-9:after, .g-h-10:after, .g-h-11:after, .g-h-12:after, .l-2c .c-1:after, .l-2c .c-2:after, .l-3c .c-1:after, .l-3c .c-2:after, .l-3c .c-3:after, .l-1c .c-1 .g-all-full:after, .l-1c .c-1 .c-1:after, .l-2c .c-1 .g-all-full:after, .l-2c .c-1 .l-1c .c-1:after, .l-1c .l-2c .c-1 .c-1:after, .l-2c .c-2 .g-all-full:after, .l-2c .c-2 .l-1c .c-1:after, .l-1c .l-2c .c-2 .c-1:after, .l-3c .c-1 .g-all-full:after, .l-3c .c-1 .l-1c .c-1:after, .l-1c .l-3c .c-1 .c-1:after, .l-3c .c-2 .g-all-full:after, .l-3c .c-2 .l-1c .c-1:after, .l-1c .l-3c .c-2 .c-1:after, .l-3c .c-3 .g-all-full:after, .l-3c .c-3 .l-1c .c-1:after, .l-1c .l-3c .c-3 .c-1:after, .l-1c .c-1 .g-all-half2full:after, .l-2c .c-1 .g-all-half2full:after, .l-2c .c-2 .g-all-half2full:after, .l-3c .c-1 .g-all-half2full:after, .l-3c .c-2 .g-all-half2full:after, .l-3c .c-3 .g-all-half2full:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
  }

  .g-h-f, .g-h-12, .l-2c .c-1, .l-2c .c-2, .l-3c .c-1, .l-3c .c-2, .l-3c .c-3, .l-1c .c-1 .g-all-full, .l-1c .c-1 .c-1, .l-2c .c-1 .g-all-full, .l-2c .c-1 .l-1c .c-1, .l-1c .l-2c .c-1 .c-1, .l-2c .c-2 .g-all-full, .l-2c .c-2 .l-1c .c-1, .l-1c .l-2c .c-2 .c-1, .l-3c .c-1 .g-all-full, .l-3c .c-1 .l-1c .c-1, .l-1c .l-3c .c-1 .c-1, .l-3c .c-2 .g-all-full, .l-3c .c-2 .l-1c .c-1, .l-1c .l-3c .c-2 .c-1, .l-3c .c-3 .g-all-full, .l-3c .c-3 .l-1c .c-1, .l-1c .l-3c .c-3 .c-1, .l-1c .c-1 .g-all-half2full, .l-2c .c-1 .g-all-half2full, .l-2c .c-2 .g-all-half2full, .l-3c .c-1 .g-all-half2full, .l-3c .c-2 .g-all-half2full, .l-3c .c-3 .g-all-half2full, .g-all-f, .g-all-fl {
    margin-left: 0 !important;
    clear: left;
  }

  .g-h-l, .g-h-12, .l-2c .c-1, .l-2c .c-2, .l-3c .c-1, .l-3c .c-2, .l-3c .c-3, .l-1c .c-1 .g-all-full, .l-1c .c-1 .c-1, .l-2c .c-1 .g-all-full, .l-2c .c-1 .l-1c .c-1, .l-1c .l-2c .c-1 .c-1, .l-2c .c-2 .g-all-full, .l-2c .c-2 .l-1c .c-1, .l-1c .l-2c .c-2 .c-1, .l-3c .c-1 .g-all-full, .l-3c .c-1 .l-1c .c-1, .l-1c .l-3c .c-1 .c-1, .l-3c .c-2 .g-all-full, .l-3c .c-2 .l-1c .c-1, .l-1c .l-3c .c-2 .c-1, .l-3c .c-3 .g-all-full, .l-3c .c-3 .l-1c .c-1, .l-1c .l-3c .c-3 .c-1, .l-1c .c-1 .g-all-half2full, .l-2c .c-1 .g-all-half2full, .l-2c .c-2 .g-all-half2full, .l-3c .c-1 .g-all-half2full, .l-3c .c-2 .g-all-half2full, .l-3c .c-3 .g-all-half2full, .g-all-l, .g-all-fl {
    margin-right: 0 !important;
  }

  .g-h-p0, .g-all-p0 {
    padding-left: 0px;
  }

  .g-h-a0, .g-all-a0 {
    padding-right: 0px;
  }

  .g-h-p1, .g-all-p1 {
    padding-left: 25px;
  }

  .g-h-a1, .g-all-a1 {
    padding-right: 25px;
  }

  .g-h-p2 {
    padding-left: 50px;
  }

  .g-h-a2 {
    padding-right: 50px;
  }

  .g-h-p3 {
    padding-left: 75px;
  }

  .g-h-a3 {
    padding-right: 75px;
  }

  .g-h-p4 {
    padding-left: 100px;
  }

  .g-h-a4 {
    padding-right: 100px;
  }

  .g-h-p5 {
    padding-left: 125px;
  }

  .g-h-a5 {
    padding-right: 125px;
  }

  .g-h-p6 {
    padding-left: 150px;
  }

  .g-h-a6 {
    padding-right: 150px;
  }

  .g-h-p7 {
    padding-left: 175px;
  }

  .g-h-a7 {
    padding-right: 175px;
  }

  .g-h-p8 {
    padding-left: 200px;
  }

  .g-h-a8 {
    padding-right: 200px;
  }

  .g-h-1 {
    width: 15px;
  }

  .g-h-2 {
    width: 40px;
  }

  .g-h-3, .l-1c .c-1 .g-all-1of4, .l-2c .c-1 .g-all-1of4, .l-2c .c-2 .g-all-1of4, .l-3c .c-1 .g-all-1of4, .l-3c .c-2 .g-all-1of4 {
    width: 65px;
  }

  .g-h-4, .l-1c .c-1 .g-all-1of3, .l-2c .c-1 .g-all-1of3, .l-2c .c-2 .g-all-1of3, .l-3c .c-1 .g-all-1of3, .l-3c .c-2 .g-all-1of3, .l-3c .c-3 .g-all-1of3 {
    width: 90px;
  }

  .g-h-5 {
    width: 115px;
  }

  .g-h-6, .l-1c .c-1 .g-all-half, .l-2c .c-1 .g-all-half, .l-2c .c-2 .g-all-half, .l-3c .c-1 .g-all-half, .l-3c .c-2 .g-all-half, .l-3c .c-3 .g-all-half {
    width: 140px;
  }

  .g-h-7 {
    width: 165px;
  }

  .g-h-8, .l-1c .c-1 .g-all-2of3, .l-2c .c-1 .g-all-2of3, .l-2c .c-2 .g-all-2of3, .l-3c .c-1 .g-all-2of3, .l-3c .c-2 .g-all-2of3, .l-3c .c-3 .g-all-2of3 {
    width: 190px;
  }

  .g-h-9 {
    width: 215px;
  }

  .g-h-10 {
    width: 240px;
  }

  .g-h-11 {
    width: 265px;
  }

  .g-h-12, .l-2c .c-1, .l-2c .c-2, .l-3c .c-1, .l-3c .c-2, .l-3c .c-3, .l-1c .c-1 .g-all-full, .l-1c .c-1 .c-1, .l-2c .c-1 .g-all-full, .l-2c .c-1 .l-1c .c-1, .l-1c .l-2c .c-1 .c-1, .l-2c .c-2 .g-all-full, .l-2c .c-2 .l-1c .c-1, .l-1c .l-2c .c-2 .c-1, .l-3c .c-1 .g-all-full, .l-3c .c-1 .l-1c .c-1, .l-1c .l-3c .c-1 .c-1, .l-3c .c-2 .g-all-full, .l-3c .c-2 .l-1c .c-1, .l-1c .l-3c .c-2 .c-1, .l-3c .c-3 .g-all-full, .l-3c .c-3 .l-1c .c-1, .l-1c .l-3c .c-3 .c-1, .l-1c .c-1 .g-all-half2full, .l-2c .c-1 .g-all-half2full, .l-2c .c-2 .g-all-half2full, .l-3c .c-1 .g-all-half2full, .l-3c .c-2 .g-all-half2full, .l-3c .c-3 .g-all-half2full {
    width: 290px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 759px) {
  html {
    -webkit-text-size-adjust: none;
  }

  .g-h-c, .g-all-c {
    width: 446px;
  }

  .g-hl-sunken {
    float: none !important;
  }

  .grid-wrapper, #page {
    width: 466px;
  }

  .g-hl, .g-hl-1, .g-hl-2, .g-hl-3, .l-1c .c-1 .g-all-1of4, .l-2c .c-1 .g-all-1of4, .l-2c .c-2 .g-all-1of4, .l-3c .c-1 .g-all-1of4, .l-3c .c-2 .g-all-1of4, .g-hl-4, .l-1c .c-1 .g-all-1of3, .l-2c .c-1 .g-all-1of3, .l-2c .c-2 .g-all-1of3, .l-3c .c-1 .g-all-1of3, .l-3c .c-2 .g-all-1of3, .l-3c .c-3 .g-all-1of3, .g-hl-5, .g-hl-6, .l-1c .c-1 .g-all-half, .l-2c .c-1 .g-all-half, .l-2c .c-2 .g-all-half, .l-3c .c-1 .g-all-half, .l-3c .c-2 .g-all-half, .l-3c .c-3 .g-all-half, .g-hl-7, .g-hl-8, .l-1c .c-1 .g-all-2of3, .l-2c .c-1 .g-all-2of3, .l-2c .c-2 .g-all-2of3, .l-3c .c-1 .g-all-2of3, .l-3c .c-2 .g-all-2of3, .l-3c .c-3 .g-all-2of3, .g-hl-9, .g-hl-10, .g-hl-11, .g-hl-12, .l-2c .c-1, .l-2c .c-2, .l-3c .c-1, .l-3c .c-2, .l-3c .c-3, .l-1c .c-1 .g-all-full, .l-1c .c-1 .c-1, .l-2c .c-1 .g-all-full, .l-2c .c-1 .l-1c .c-1, .l-1c .l-2c .c-1 .c-1, .l-2c .c-2 .g-all-full, .l-2c .c-2 .l-1c .c-1, .l-1c .l-2c .c-2 .c-1, .l-3c .c-1 .g-all-full, .l-3c .c-1 .l-1c .c-1, .l-1c .l-3c .c-1 .c-1, .l-3c .c-2 .g-all-full, .l-3c .c-2 .l-1c .c-1, .l-1c .l-3c .c-2 .c-1, .l-3c .c-3 .g-all-full, .l-3c .c-3 .l-1c .c-1, .l-1c .l-3c .c-3 .c-1, .l-1c .c-1 .g-all-half2full, .l-2c .c-1 .g-all-half2full, .l-2c .c-2 .g-all-half2full, .l-3c .c-1 .g-all-half2full, .l-3c .c-2 .g-all-half2full, .l-3c .c-3 .g-all-half2full {
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    *zoom: 1;
  }
  .g-hl:after, .g-hl-1:after, .g-hl-2:after, .g-hl-3:after, .l-1c .c-1 .g-all-1of4:after, .l-2c .c-1 .g-all-1of4:after, .l-2c .c-2 .g-all-1of4:after, .l-3c .c-1 .g-all-1of4:after, .l-3c .c-2 .g-all-1of4:after, .g-hl-4:after, .l-1c .c-1 .g-all-1of3:after, .l-2c .c-1 .g-all-1of3:after, .l-2c .c-2 .g-all-1of3:after, .l-3c .c-1 .g-all-1of3:after, .l-3c .c-2 .g-all-1of3:after, .l-3c .c-3 .g-all-1of3:after, .g-hl-5:after, .g-hl-6:after, .l-1c .c-1 .g-all-half:after, .l-2c .c-1 .g-all-half:after, .l-2c .c-2 .g-all-half:after, .l-3c .c-1 .g-all-half:after, .l-3c .c-2 .g-all-half:after, .l-3c .c-3 .g-all-half:after, .g-hl-7:after, .g-hl-8:after, .l-1c .c-1 .g-all-2of3:after, .l-2c .c-1 .g-all-2of3:after, .l-2c .c-2 .g-all-2of3:after, .l-3c .c-1 .g-all-2of3:after, .l-3c .c-2 .g-all-2of3:after, .l-3c .c-3 .g-all-2of3:after, .g-hl-9:after, .g-hl-10:after, .g-hl-11:after, .g-hl-12:after, .l-2c .c-1:after, .l-2c .c-2:after, .l-3c .c-1:after, .l-3c .c-2:after, .l-3c .c-3:after, .l-1c .c-1 .g-all-full:after, .l-1c .c-1 .c-1:after, .l-2c .c-1 .g-all-full:after, .l-2c .c-1 .l-1c .c-1:after, .l-1c .l-2c .c-1 .c-1:after, .l-2c .c-2 .g-all-full:after, .l-2c .c-2 .l-1c .c-1:after, .l-1c .l-2c .c-2 .c-1:after, .l-3c .c-1 .g-all-full:after, .l-3c .c-1 .l-1c .c-1:after, .l-1c .l-3c .c-1 .c-1:after, .l-3c .c-2 .g-all-full:after, .l-3c .c-2 .l-1c .c-1:after, .l-1c .l-3c .c-2 .c-1:after, .l-3c .c-3 .g-all-full:after, .l-3c .c-3 .l-1c .c-1:after, .l-1c .l-3c .c-3 .c-1:after, .l-1c .c-1 .g-all-half2full:after, .l-2c .c-1 .g-all-half2full:after, .l-2c .c-2 .g-all-half2full:after, .l-3c .c-1 .g-all-half2full:after, .l-3c .c-2 .g-all-half2full:after, .l-3c .c-3 .g-all-half2full:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
  }

  .g-hl-f, .g-hl-12, .l-2c .c-1, .l-2c .c-2, .l-3c .c-1, .l-3c .c-2, .l-3c .c-3, .l-1c .c-1 .g-all-full, .l-1c .c-1 .c-1, .l-2c .c-1 .g-all-full, .l-2c .c-1 .l-1c .c-1, .l-1c .l-2c .c-1 .c-1, .l-2c .c-2 .g-all-full, .l-2c .c-2 .l-1c .c-1, .l-1c .l-2c .c-2 .c-1, .l-3c .c-1 .g-all-full, .l-3c .c-1 .l-1c .c-1, .l-1c .l-3c .c-1 .c-1, .l-3c .c-2 .g-all-full, .l-3c .c-2 .l-1c .c-1, .l-1c .l-3c .c-2 .c-1, .l-3c .c-3 .g-all-full, .l-3c .c-3 .l-1c .c-1, .l-1c .l-3c .c-3 .c-1, .l-1c .c-1 .g-all-half2full, .l-2c .c-1 .g-all-half2full, .l-2c .c-2 .g-all-half2full, .l-3c .c-1 .g-all-half2full, .l-3c .c-2 .g-all-half2full, .l-3c .c-3 .g-all-half2full, .g-all-f, .g-all-fl {
    margin-left: 0 !important;
    clear: left;
  }

  .g-hl-l, .g-hl-12, .l-2c .c-1, .l-2c .c-2, .l-3c .c-1, .l-3c .c-2, .l-3c .c-3, .l-1c .c-1 .g-all-full, .l-1c .c-1 .c-1, .l-2c .c-1 .g-all-full, .l-2c .c-1 .l-1c .c-1, .l-1c .l-2c .c-1 .c-1, .l-2c .c-2 .g-all-full, .l-2c .c-2 .l-1c .c-1, .l-1c .l-2c .c-2 .c-1, .l-3c .c-1 .g-all-full, .l-3c .c-1 .l-1c .c-1, .l-1c .l-3c .c-1 .c-1, .l-3c .c-2 .g-all-full, .l-3c .c-2 .l-1c .c-1, .l-1c .l-3c .c-2 .c-1, .l-3c .c-3 .g-all-full, .l-3c .c-3 .l-1c .c-1, .l-1c .l-3c .c-3 .c-1, .l-1c .c-1 .g-all-half2full, .l-2c .c-1 .g-all-half2full, .l-2c .c-2 .g-all-half2full, .l-3c .c-1 .g-all-half2full, .l-3c .c-2 .g-all-half2full, .l-3c .c-3 .g-all-half2full, .g-all-l, .g-all-fl {
    margin-right: 0 !important;
  }

  .g-hl-p0, .g-all-p0 {
    padding-left: 0px;
  }

  .g-hl-a0, .g-all-a0 {
    padding-right: 0px;
  }

  .g-hl-p1, .g-all-p1 {
    padding-left: 38px;
  }

  .g-hl-a1, .g-all-a1 {
    padding-right: 38px;
  }

  .g-hl-p2 {
    padding-left: 76px;
  }

  .g-hl-a2 {
    padding-right: 76px;
  }

  .g-hl-p3 {
    padding-left: 114px;
  }

  .g-hl-a3 {
    padding-right: 114px;
  }

  .g-hl-p4 {
    padding-left: 152px;
  }

  .g-hl-a4 {
    padding-right: 152px;
  }

  .g-hl-p5 {
    padding-left: 190px;
  }

  .g-hl-a5 {
    padding-right: 190px;
  }

  .g-hl-p6 {
    padding-left: 228px;
  }

  .g-hl-a6 {
    padding-right: 228px;
  }

  .g-hl-p7 {
    padding-left: 266px;
  }

  .g-hl-a7 {
    padding-right: 266px;
  }

  .g-hl-p8 {
    padding-left: 304px;
  }

  .g-hl-a8 {
    padding-right: 304px;
  }

  .g-hl-1 {
    width: 28px;
  }

  .g-hl-2 {
    width: 66px;
  }

  .g-hl-3, .l-1c .c-1 .g-all-1of4, .l-2c .c-1 .g-all-1of4, .l-2c .c-2 .g-all-1of4, .l-3c .c-1 .g-all-1of4, .l-3c .c-2 .g-all-1of4 {
    width: 104px;
  }

  .g-hl-4, .l-1c .c-1 .g-all-1of3, .l-2c .c-1 .g-all-1of3, .l-2c .c-2 .g-all-1of3, .l-3c .c-1 .g-all-1of3, .l-3c .c-2 .g-all-1of3, .l-3c .c-3 .g-all-1of3 {
    width: 142px;
  }

  .g-hl-5 {
    width: 180px;
  }

  .g-hl-6, .l-1c .c-1 .g-all-half, .l-2c .c-1 .g-all-half, .l-2c .c-2 .g-all-half, .l-3c .c-1 .g-all-half, .l-3c .c-2 .g-all-half, .l-3c .c-3 .g-all-half {
    width: 218px;
  }

  .g-hl-7 {
    width: 256px;
  }

  .g-hl-8, .l-1c .c-1 .g-all-2of3, .l-2c .c-1 .g-all-2of3, .l-2c .c-2 .g-all-2of3, .l-3c .c-1 .g-all-2of3, .l-3c .c-2 .g-all-2of3, .l-3c .c-3 .g-all-2of3 {
    width: 294px;
  }

  .g-hl-9 {
    width: 332px;
  }

  .g-hl-10 {
    width: 370px;
  }

  .g-hl-11 {
    width: 408px;
  }

  .g-hl-12, .l-2c .c-1, .l-2c .c-2, .l-3c .c-1, .l-3c .c-2, .l-3c .c-3, .l-1c .c-1 .g-all-full, .l-1c .c-1 .c-1, .l-2c .c-1 .g-all-full, .l-2c .c-1 .l-1c .c-1, .l-1c .l-2c .c-1 .c-1, .l-2c .c-2 .g-all-full, .l-2c .c-2 .l-1c .c-1, .l-1c .l-2c .c-2 .c-1, .l-3c .c-1 .g-all-full, .l-3c .c-1 .l-1c .c-1, .l-1c .l-3c .c-1 .c-1, .l-3c .c-2 .g-all-full, .l-3c .c-2 .l-1c .c-1, .l-1c .l-3c .c-2 .c-1, .l-3c .c-3 .g-all-full, .l-3c .c-3 .l-1c .c-1, .l-1c .l-3c .c-3 .c-1, .l-1c .c-1 .g-all-half2full, .l-2c .c-1 .g-all-half2full, .l-2c .c-2 .g-all-half2full, .l-3c .c-1 .g-all-half2full, .l-3c .c-2 .g-all-half2full, .l-3c .c-3 .g-all-half2full {
    width: 446px;
  }
}
.handheld-landscape-visible,
.handheld-visible {
  display: none;
}

@media only screen and (max-width: 759px) and (min-width: 480px) {
  .desktop-visible, .handheld-visible {
    display: none !important;
  }

  .handheld-landscape-visible {
    display: block !important;
  }

  a.handheld-landscape-visible, abbr.handheld-landscape-visible, acronym.handheld-landscape-visible, b.handheld-landscape-visible, basefont.handheld-landscape-visible, bdo.handheld-landscape-visible, big.handheld-landscape-visible, br.handheld-landscape-visible, cite.handheld-landscape-visible, code.handheld-landscape-visible, dfn.handheld-landscape-visible, em.handheld-landscape-visible, font.handheld-landscape-visible, i.handheld-landscape-visible, img.handheld-landscape-visible, input.handheld-landscape-visible, kbd.handheld-landscape-visible, label.handheld-landscape-visible, q.handheld-landscape-visible, s.handheld-landscape-visible, samp.handheld-landscape-visible, select.handheld-landscape-visible, small.handheld-landscape-visible, span.handheld-landscape-visible, strike.handheld-landscape-visible, strong.handheld-landscape-visible, sub.handheld-landscape-visible, sup.handheld-landscape-visible, textarea.handheld-landscape-visible, tt.handheld-landscape-visible, u.handheld-landscape-visible, var.handheld-landscape-visible {
    display: inline !important;
  }
}
@media only screen and (max-width: 479px) and (min-width: 1px) {
  .desktop-visible, .handheld-landscape-visible {
    display: none !important;
  }

  .handheld-visible {
    display: block !important;
  }

  a.handheld-visible, abbr.handheld-visible, acronym.handheld-visible, b.handheld-visible, basefont.handheld-visible, bdo.handheld-visible, big.handheld-visible, br.handheld-visible, cite.handheld-visible, code.handheld-visible, dfn.handheld-visible, em.handheld-visible, font.handheld-visible, i.handheld-visible, img.handheld-visible, input.handheld-visible, kbd.handheld-visible, label.handheld-visible, q.handheld-visible, s.handheld-visible, samp.handheld-visible, select.handheld-visible, small.handheld-visible, span.handheld-visible, strike.handheld-visible, strong.handheld-visible, sub.handheld-visible, sup.handheld-visible, textarea.handheld-visible, tt.handheld-visible, u.handheld-visible, var.handheld-visible {
    display: inline !important;
  }
}
.g-base-c, .g-d-c, .g-all-c, .g-h-c {
  margin: 0 auto;
  *zoom: 1;
}
.g-base-c:after, .g-d-c:after, .g-all-c:after, .g-h-c:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

.l-2cr .c-1 {
  margin-left: 320px !important;
}
.l-2cr .c-2 {
  margin-left: -960px !important;
}
@media only screen and (max-width: 759px) {
  .l-2cr .c-1, .l-2cr .c-2 {
    margin-left: 0 !important;
  }
}

body {
  padding: 0 5px;
}

.l-3c .c-3 .g-all-1of4 {
  color: red;
  background-color: red;
}

output.scss

@import "grid-system";
@import "media";
@import "layouts";
@import "invariants";

// Uncomment this if you want crazy selector bloat.
// 8 additional lines of scss causes 24kb to become 124kb
// @import "templates";