Skip to content

Instantly share code, notes, and snippets.

@chriseppstein
Created August 22, 2011 17:43
Show Gist options
  • Save chriseppstein/1163006 to your computer and use it in GitHub Desktop.
Save chriseppstein/1163006 to your computer and use it in GitHub Desktop.
Building Responsive Layouts with Sass
@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);
}
}
}
.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;
}
}
.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;
}
}
.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;
}
}
.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;
}
}
.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;
}
}
// 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;
}
}
@import "invariant-full";
@import "invariant-2of3";
@import "invariant-half";
@import "invariant-half2full";
@import "invariant-1of3";
@import "invariant-1of4";
.l-1c {
// main content
.c-1 {
@extend .g-all-full;
}
}
.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;
}
}
// 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;
}
}
}
// 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;
}
}
@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;
}
// ***** 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;
}
// *********** 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);
// *********** 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);
}
// *********** 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);
}
$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);
}
}
}
// 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;
}
}
}
@import "media-support";
@import "media-desktop";
@import "media-handheld";
@import "media-handheld-landscape";
@import "media-visibility";
@import "media-all";
.template-1 {
#page { @extend .l-2c; }
header { @extend .c-h; }
article { @extend .c-1; }
#sidebar { @extend .c-2; }
footer { @extend .c-f; }
}
@import "template-one";
# 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
.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;
}
@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";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment