Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

mueller alpha

  • Loading branch information...
commit 76bfd0fe961a9f49218f8379d9cd2f1b14cb96fc 1 parent 2c6f122
@sehmaschine authored
Showing with 3,006 additions and 0 deletions.
  1. +3 −0  .gitignore
  2. +24 −0 LICENSE
  3. +6 −0 README
  4. +178 −0 index.html
  5. +156 −0 sass/grid/_grid-system.scss
  6. +13 −0 sass/grid/_invariants.scss
  7. +15 −0 sass/grid/_layouts.scss
  8. +17 −0 sass/grid/_media.scss
  9. +12 −0 sass/grid/_templates.scss
  10. +11 −0 sass/grid/config.rb
  11. +21 −0 sass/grid/invariants/_invariant-half.scss
  12. +22 −0 sass/grid/invariants/_invariant-thirds.scss
  13. +55 −0 sass/grid/layouts/_layout-four-col.scss
  14. +24 −0 sass/grid/layouts/_layout-one-col.scss
  15. +46 −0 sass/grid/layouts/_layout-three-col.scss
  16. +77 −0 sass/grid/layouts/_layout-two-col.scss
  17. +41 −0 sass/grid/media/_media-all.scss
  18. +53 −0 sass/grid/media/_media-desktop.scss
  19. +57 −0 sass/grid/media/_media-handheld-landscape.scss
  20. +61 −0 sass/grid/media/_media-handheld.scss
  21. +10 −0 sass/grid/media/_media-hi-res.scss
  22. +58 −0 sass/grid/media/_media-large.scss
  23. +46 −0 sass/grid/media/_media-tablet-portrait.scss
  24. +22 −0 sass/grid/output.scss
  25. +23 −0 sass/grid/templates/_template-one.scss
  26. +20 −0 sass/partials/_base.scss
  27. +12 −0 sass/partials/_default.scss
  28. +16 −0 sass/partials/_handheld-landscape.scss
  29. +16 −0 sass/partials/_handheld.scss
  30. +19 −0 sass/partials/_ie.scss
  31. +16 −0 sass/partials/_large.scss
  32. +16 −0 sass/partials/_tablet-portrait.scss
  33. +64 −0 sass/screen.scss
  34. +1,661 −0 stylesheets/grid/output.css
  35. +115 −0 stylesheets/screen.css
View
3  .gitignore
@@ -0,0 +1,3 @@
+*.pyc
+.DS_Store
+.sass-cache/*
View
24 LICENSE
@@ -0,0 +1,24 @@
+Copyright (c) 2012 Patrick Kranzlmueller, Axel Swoboda,
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice,
+this list of conditions and the following disclaimer.
+2. Redistributions in binary form must reproduce the above copyright notice,
+this list of conditions and the following disclaimer in the documentation and/or
+other materials provided with the distribution.
+3. Neither the name of MUELLER nor the names of its contributors may be used
+to endorse or promote products derived from this software without specific prior
+written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE REGENTS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS
+OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL
+THE REGENTS OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
+HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
View
6 README
@@ -0,0 +1,6 @@
+MUELLER
+=======
+
+**Modular Grid System**.
+
+Examples & Documentation coming soon
View
178 index.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
+<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
+<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
+<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
+<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
+<head>
+ <title>MUELLER GRID SYSTEM</title>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
+ <meta name="description" content="">
+ <meta name="author" content="">
+ <!-- <link rel="shortcut icon" href="images/favicon.png" type="image/png" /> -->
+ <link href="stylesheets/grid/output.css" rel="stylesheet" type="text/css" />
+ <link href="stylesheets/screen.css" rel="stylesheet" type="text/css" />
+</head>
+<body class="">
+ <div id="wrapper">
+ <div class="g-all-c">
+ <p>Some examples of what you can do with MUELLER.<br />
+ Please note that you need to write your own layouts and fractional grid classes.</p>
+ <section id="examples" class="g-all-full">
+ <h1>Media</h1>
+ <article id="example_media" class="g-d-24 g-tp-12 g-hl-6 g-h-6">
+ <p>
+ Defining Columns with basic media-classes<br />
+ The class&ndash;names are changed with visibility&ndash;selectors.
+ </p>
+ <div class="g-d-6 g-tp-3 g-hl-2 g-h-2">
+ <div class="box">
+ <p class="d-show l-show">g-d-6</p>
+ <p class="tp-show">g-tp-3</p>
+ <p class="hl-show">g-hl-2</p>
+ <p class="h-show">g-h-2</p>
+ </div>
+ </div>
+ <div class="g-d-6 g-tp-3 g-hl-2 g-h-2">
+ <div class="box">
+ <p class="d-show l-show">g-d-6</p>
+ <p class="tp-show">g-tp-3</p>
+ <p class="hl-show">g-hl-2</p>
+ <p class="h-show">g-h-2</p>
+ </div>
+ </div>
+ <div class="g-d-12 g-d-l g-tp-6 g-tp-l g-hl-2 g-hl-l g-h-2 g-h-l">
+ <div class="box">
+ <p class="d-show l-show">g-d-12</p>
+ <p class="tp-show">g-tp-6</p>
+ <p class="hl-show">g-hl-2</p>
+ <p class="h-show">g-h-2</p>
+ </div>
+ </div>
+ </article>
+ </section>
+ <section>
+ <h1>Layouts</h1>
+ <article id="example_layout_1" class="l-1c">
+ <p>1-column layout</p>
+ <div class="c-1">
+ <div class="box">
+ <p>c1</p>
+ </div>
+ </div>
+ </article>
+ <article id="example_layout_2" class="l-2c">
+ <p>2-column layout</p>
+ <div class="c-1">
+ <div class="box">
+ <p>c1</p>
+ </div>
+ </div>
+ <div class="c-2">
+ <div class="box">
+ <p>c2</p>
+ </div>
+ </div>
+ </article>
+ <article id="example_layout_3" class="l-2cr">
+ <p>2-column layout, switched columns</p>
+ <div class="c-1">
+ <div class="box">
+ <p>c1</p>
+ </div>
+ </div>
+ <div class="c-2">
+ <div class="box">
+ <p>c2</p>
+ </div>
+ </div>
+ </article>
+ <article id="example_layout_4" class="l-3c">
+ <p>3-column layout</p>
+ <div class="c-1">
+ <div class="box">
+ <p>c1</p>
+ </div>
+ </div>
+ <div class="c-2">
+ <div class="box">
+ <p>c2</p>
+ </div>
+ </div>
+ <div class="c-3">
+ <div class="box">
+ <p>c3</p>
+ </div>
+ </div>
+ </article>
+ <article id="example_layout_5" class="l-4c">
+ <p>
+ 4-column layout<br />
+ Note the shift with desktop, portrait & handheld.
+ </p>
+ <div class="c-1">
+ <div class="box">
+ <p>c1</p>
+ </div>
+ </div>
+ <div class="c-2">
+ <div class="box">
+ <p>c2</p>
+ </div>
+ </div>
+ <div class="c-3">
+ <div class="box">
+ <p>c3</p>
+ </div>
+ </div>
+ <div class="c-4">
+ <div class="box">
+ <p>c4</p>
+ </div>
+ </div>
+ </article>
+ </section>
+ <section>
+ <h1>Fractional Grid Classes</h1>
+ <article id="example_invariant_1" class="l-1c">
+ <p>1-column layout with half-invariants</p>
+ <div class="c-1">
+ <div class="g-all-half g-all-f">
+ <div class="box">
+ <p>g-all-half</p>
+ </div>
+ </div>
+ <div class="g-all-half g-all-l">
+ <div class="box">
+ <p>g-all-half</p>
+ </div>
+ </div>
+ </div>
+ </article>
+ <article id="example_invariant_2" class="l-1c">
+ <p>1-column layout with thirds-invariants</p>
+ <div class="c-1">
+ <div class="g-all-thirds g-all-f">
+ <div class="box">
+ <p>g-all-thirds</p>
+ </div>
+ </div>
+ <div class="g-all-thirds">
+ <div class="box">
+ <p>g-all-thirds</p>
+ </div>
+ </div>
+ <div class="g-all-thirds g-all-l">
+ <div class="box">
+ <p>g-all-thirds</p>
+ </div>
+ </div>
+ </div>
+ </article>
+ </section>
+ </div>
+ </div>
+</body>
+</html>
View
156 sass/grid/_grid-system.scss
@@ -0,0 +1,156 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _grid_system.scss
+//
+// the basic grid implementation
+//
+// **************************************************
+
+// **************************************************
+// IMPORTS & VARIABLES
+
+@import "compass/utilities/general/clearfix";
+
+$float-direction: left;
+$show-grid-background: false;
+
+// **************************************************
+// GENERAL MIXINS
+
+@mixin centered {
+ margin: 0 auto;
+}
+
+@mixin floated($side: $float-direction) {
+ float: $side;
+}
+
+// **************************************************
+// THE GRID SYSTEM
+
+// 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;
+ @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($gutter-width, $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;
+ margin-right: $gutter-width !important; // needed to overwrite last with first
+ 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, $gutter-width) {
+ padding-left: column-width($n, $col-width, $gutter-width) + $gutter-width !important;
+}
+
+// add $n grid units worth of space to the left of a column
+@mixin append($n, $col-width, $gutter-width) {
+ padding-right: column-width($n, $col-width, $gutter-width) + $gutter-width !important;
+}
+
+@mixin push($n, $col-width, $gutter-width) {
+ position: relative;
+ margin-left: $n*($col-width+$gutter-width) !important;
+ margin-right: -$n*($col-width+$gutter-width) !important;
+ margin-top: 0; margin-bottom: 0;
+}
+
+// add $n grid units worth of space to the left of a column
+@mixin pull($n, $col-width, $gutter-width) {
+ position: relative;
+ margin-left: -$n*($col-width+$gutter-width) + $gutter-width !important;
+}
+
+
+// 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, $gutter-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};
+ } @else {
+ margin-right: $gutter-width;
+ }
+ width: column-width($n, $col-width, $gutter-width);
+}
+
+// Generate grid classes according to a common naming convention
+// $media is the media prefix. E.g. d (deskotop), t (tablet), tp (tablet portrait), 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.
+// $gutter-width is the width of a gutter (margin-right).
+// 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, $gutter-width,
+ $pad-units: 0 1 2 3 4 5 6 7 8 0 10 11 12,
+ $base-class: "g-#{$media}",
+ $first-column-class: "g-#{$media}-f",
+ $last-column-class: "g-#{$media}-l") {
+ // establish the base classes
+ @include grid-base($gutter-width, $base-class, $first-column-class, $last-column-class);
+ // generate padding classes
+ @each $n in $pad-units {
+ .g-#{$media}-prepend#{$n} {
+ @include prepend($n, $col-width, $gutter-width);
+ }
+ .g-#{$media}-append#{$n} {
+ @include append($n, $col-width, $gutter-width);
+ }
+ .g-#{$media}-push#{$n} {
+ @include push($n, $col-width, $gutter-width);
+ }
+ .g-#{$media}-pull#{$n} {
+ @include pull($n, $col-width, $gutter-width);
+ }
+ }
+ // generate grid classes
+ @each $n in $units {
+ .g-#{$media}-#{$n} {
+ @include column($n, $max-unit, $col-width, $gutter-width, $base-class, $first-column-class, $last-column-class);
+ }
+ }
+}
View
13 sass/grid/_invariants.scss
@@ -0,0 +1,13 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _invariants.scss
+//
+// imports all necessary invariant partials
+//
+// **************************************************
+
+@import "invariants/invariant-half";
+@import "invariants/invariant-thirds";
View
15 sass/grid/_layouts.scss
@@ -0,0 +1,15 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _layouts.scss
+//
+// imports all necessary layout partials
+//
+// **************************************************
+
+@import "layouts/layout-one-col";
+@import "layouts/layout-two-col";
+@import "layouts/layout-three-col";
+@import "layouts/layout-four-col";
View
17 sass/grid/_media.scss
@@ -0,0 +1,17 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _media.scss
+//
+// imports all necessary media partials
+//
+// **************************************************
+
+@import "media/media-desktop";
+@import "media/media-large";
+@import "media/media-tablet-portrait";
+@import "media/media-handheld-landscape";
+@import "media/media-handheld";
+@import "media/media-all";
View
12 sass/grid/_templates.scss
@@ -0,0 +1,12 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _templates.scss
+//
+// imports all necessary template partials
+//
+// **************************************************
+
+// @import "template-one";
View
11 sass/grid/config.rb
@@ -0,0 +1,11 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+
+output_style = :compressed
+line_comments = false
View
21 sass/grid/invariants/_invariant-half.scss
@@ -0,0 +1,21 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _invariant-half.scss
+//
+// Split a column into 2 cols
+//
+// **************************************************
+
+.g-all-half {
+
+ .l-1c .c-1 & {
+ @extend .g-d-12;
+ @extend .g-tp-6;
+ @extend .g-hl-3;
+ @extend .g-h-3;
+ }
+
+}
View
22 sass/grid/invariants/_invariant-thirds.scss
@@ -0,0 +1,22 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _invariant-half.scss
+//
+// Split a column into 3 cols
+// only used with 2cols and headline right
+//
+// **************************************************
+
+.g-all-thirds {
+
+ .l-1c .c-1 & {
+ @extend .g-d-8;
+ @extend .g-tp-4;
+ @extend .g-hl-2;
+ @extend .g-h-2;
+ }
+
+}
View
55 sass/grid/layouts/_layout-four-col.scss
@@ -0,0 +1,55 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _layout-four-col.scss
+//
+// Example of a 4 column layout
+//
+// **************************************************
+
+.l-4c {
+ @extend .g-d-24;
+ @extend .g-tp-12;
+ @extend .g-hl-6;
+ @extend .g-h-6;
+ // Column 1
+ .c-1 {
+ @extend .g-d-6;
+ @extend .g-d-f;
+ @extend .g-tp-6;
+ @extend .g-tp-f;
+ @extend .g-hl-3;
+ @extend .g-hl-f;
+ @extend .g-h-6;
+ }
+ // Column 2
+ .c-2 {
+ @extend .g-d-6;
+ @extend .g-tp-6;
+ @extend .g-tp-l;
+ @extend .g-hl-3;
+ @extend .g-hl-l;
+ @extend .g-h-6;
+ }
+ // Column 3
+ .c-3 {
+ @extend .g-d-6;
+ @extend .g-tp-6;
+ @extend .g-tp-f;
+ @extend .g-hl-3;
+ @extend .g-hl-f;
+ @extend .g-h-6;
+ }
+ // Column 4
+ .c-4 {
+ @extend .g-d-6;
+ @extend .g-d-l;
+ @extend .g-tp-6;
+ @extend .g-tp-l;
+ @extend .g-hl-3;
+ @extend .g-hl-l;
+ @extend .g-h-6;
+ }
+}
View
24 sass/grid/layouts/_layout-one-col.scss
@@ -0,0 +1,24 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _layout-one-col.scss
+//
+// Example of a 1 column layout
+//
+// **************************************************
+
+.l-1c {
+ @extend .g-d-24;
+ @extend .g-tp-12;
+ @extend .g-hl-6;
+ @extend .g-h-6;
+ // Primary content
+ .c-1 {
+ @extend .g-d-24;
+ @extend .g-tp-12;
+ @extend .g-hl-6;
+ @extend .g-h-6;
+ }
+}
View
46 sass/grid/layouts/_layout-three-col.scss
@@ -0,0 +1,46 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _layout-three-col.scss
+//
+// Example of a 3 column layout
+//
+// **************************************************
+
+.l-3c {
+ @extend .g-d-24;
+ @extend .g-tp-12;
+ @extend .g-hl-6;
+ @extend .g-h-6;
+ // Column 1
+ .c-1 {
+ @extend .g-d-8;
+ @extend .g-d-f;
+ @extend .g-tp-4;
+ @extend .g-tp-f;
+ @extend .g-hl-2;
+ @extend .g-hl-f;
+ @extend .g-h-2;
+ @extend .g-h-f;
+ }
+ // Column 2
+ .c-2 {
+ @extend .g-d-8;
+ @extend .g-tp-4;
+ @extend .g-hl-2;
+ @extend .g-h-2;
+ }
+ // Column 3
+ .c-3 {
+ @extend .g-d-8;
+ @extend .g-d-l;
+ @extend .g-tp-4;
+ @extend .g-tp-l;
+ @extend .g-hl-2;
+ @extend .g-hl-l;
+ @extend .g-h-2;
+ @extend .g-h-l;
+ }
+}
View
77 sass/grid/layouts/_layout-two-col.scss
@@ -0,0 +1,77 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _layout-two-col.scss
+//
+// Example of a 2 column layout
+//
+// **************************************************
+
+.l-2c {
+ @extend .g-d-24;
+ @extend .g-tp-12;
+ @extend .g-hl-6;
+ @extend .g-h-6;
+ // Column 1
+ .c-1 {
+ @extend .g-d-16;
+ @extend .g-d-f;
+ @extend .g-tp-8;
+ @extend .g-tp-f;
+ @extend .g-hl-4;
+ @extend .g-hl-f;
+ @extend .g-h-4;
+ @extend .g-h-f;
+ }
+ // Column 2
+ .c-2 {
+ @extend .g-d-8;
+ @extend .g-d-l;
+ @extend .g-tp-4;
+ @extend .g-tp-l;
+ @extend .g-hl-2;
+ @extend .g-hl-l;
+ @extend .g-h-2;
+ @extend .g-h-l;
+ }
+}
+
+// switched columns
+.l-2cr {
+ @extend .g-d-24;
+ @extend .g-tp-12;
+ @extend .g-hl-6;
+ @extend .g-h-6;
+ // Column 1
+ .c-1 {
+ @extend .g-d-16;
+ @extend .g-d-f;
+ @extend .g-d-push8;
+ @extend .g-tp-8;
+ @extend .g-tp-f;
+ @extend .g-tp-push4;
+ @extend .g-hl-4;
+ @extend .g-hl-f;
+ @extend .g-hl-push2;
+ @extend .g-h-4;
+ @extend .g-h-f;
+ @extend .g-h-push2;
+ }
+ // Column 1
+ .c-2 {
+ @extend .g-d-8;
+ @extend .g-d-l;
+ @extend .g-d-pull16;
+ @extend .g-tp-4;
+ @extend .g-tp-l;
+ @extend .g-tp-pull8;
+ @extend .g-hl-2;
+ @extend .g-hl-l;
+ @extend .g-hl-pull4;
+ @extend .g-h-2;
+ @extend .g-h-l;
+ @extend .g-h-pull4;
+ }
+}
View
41 sass/grid/media/_media-all.scss
@@ -0,0 +1,41 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _media-all.scss
+//
+// helper classes
+//
+// **************************************************
+
+.g-base-c {
+ @include container;
+}
+
+.g-all-c {
+ @extend .g-d-c;
+ @extend .g-l-c;
+ @extend .g-tp-c;
+ @extend .g-hl-c;
+ @extend .g-h-c;
+}
+
+.g-all-f {
+ @extend .g-d-f;
+ @extend .g-tp-f;
+ @extend .g-hl-f;
+ @extend .g-h-f;
+}
+
+.g-all-l {
+ @extend .g-d-l;
+ @extend .g-tp-l;
+ @extend .g-hl-l;
+ @extend .g-h-l;
+}
+
+.g-all-fl {
+ @extend .g-all-f;
+ @extend .g-all-l;
+}
View
53 sass/grid/media/_media-desktop.scss
@@ -0,0 +1,53 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _media_desktop.scss
+//
+// 1024px
+//
+// **************************************************
+
+@import "compass/layout/grid-background";
+@import "compass/typography/vertical_rhythm";
+
+// baseline
+$relative-font-sizing: false;
+$base-font-size: 16px;
+$base-line-height: 24px;
+@include establish-baseline(14px);
+
+$gc: 24; // grid columns
+$gw: 20px; // grid width
+$gm: 20px; // grid margin
+
+.g-d-c {
+ @extend .g-base-c;
+ width: $gw*$gc+$gm*($gc - 1);
+ // uncomment for a background-grid
+ // @include grid-background($gc, $gw, $gm, 21px, 0, #ccc, #ddd, #999, false);
+}
+
+@include grids(d,
+ 0 2 3 4 6 8 9 12 16 18 24, // only add the columns you really need
+ $gc,
+ $gw,
+ $gm,
+ 0 2 3 4 6 8 9 12 16 18 24); // only add the pad-units you really need to push/pull/append/prepend
+
+// visibility
+.l-show, .h-show, .hp-show, .hl-show, .t-show, .tp-show, .tl-show {
+ display: none !important;
+}
+.d-hide {
+ display: none !important;
+}
+.d-show {
+ display: block !important;
+}
+#{elements-of-type(inline)} {
+ &.d-show {
+ display: inline !important;
+ }
+}
View
57 sass/grid/media/_media-handheld-landscape.scss
@@ -0,0 +1,57 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _media-handheld-landscape.scss
+//
+// <767px
+//
+// **************************************************
+
+@import "compass/layout/grid-background";
+@import "compass/typography/vertical_rhythm";
+
+@media screen and (min-width: 480px) and (max-width: 767px) {
+
+ // baseline
+ $relative-font-sizing: false;
+ $base-font-size: 16px;
+ $base-line-height: 24px;
+ @include establish-baseline(12px);
+
+ $gc: 6; // grid columns
+ $gw: 55px; // grid width
+ $gm: 20px; // grid margin
+
+ .g-hl-c {
+ @extend .g-base-c;
+ width: $gw*$gc+$gm*($gc - 1); // 460px
+ // uncomment for a background-grid
+ // @include grid-background($gc, $gw, $gm, 18px, 0, #ccc, #ddd, #999, false);
+ }
+
+ @include grids(hl,
+ 0 1 2 3 4 6, // only add the columns you really need
+ $gc,
+ $gw,
+ $gm,
+ 0 1 2 4); // only add the pad-units you really need to push/pull/append/prepend
+
+ // visibility
+ .l-show, .d-show, .h-show, .hp-show, .t-show, .tp-show, .tl-show {
+ display: none !important;
+ }
+ .hl-hide {
+ display: none !important;
+ }
+ .hl-show {
+ display: block !important;
+ }
+ #{elements-of-type(inline)} {
+ &.h-show {
+ display: inline !important;
+ }
+ }
+
+}
View
61 sass/grid/media/_media-handheld.scss
@@ -0,0 +1,61 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _media-handheld.scss
+//
+// <479px: fluid grid
+//
+// **************************************************
+
+@import "compass/layout/grid-background";
+@import "compass/typography/vertical_rhythm";
+
+@media screen and (max-width: 479px) {
+
+ // baseline
+ $relative-font-sizing: false;
+ $base-font-size: 16px;
+ $base-line-height: 24px;
+ @include establish-baseline(12px);
+
+ $gc: 6; // grid columns
+ $gw: 12.5%; // grid width
+ $gm: 5%; // grid margin
+
+ .g-h-c {
+ @extend .g-base-c;
+ width: $gw*$gc+$gm*($gc - 1); // 300px
+ // uncomment for a background-grid
+ // @include grid-background($gc, $gw, $gm, 18px, 0, #ccc, #ddd, #999, false);
+ }
+
+ @include grids(h,
+ 0 1 2 3 4 6, // only add the columns you really need
+ $gc,
+ $gw,
+ $gm,
+ 0 1 2 4); // only add the pad-units you really need to push/pull/append/prepend
+
+ // visibility
+ .l-show, .d-show, .h-show, .hp-show, .hl-show, .t-show, .tp-show, .tl-show {
+ display: none !important;
+ }
+ .h-hide {
+ display: none !important;
+ }
+ .h-show {
+ display: block !important;
+ }
+ #{elements-of-type(inline)} {
+ &.h-show {
+ display: inline !important;
+ }
+ }
+
+ body {
+ padding: 3em 20px !important;
+ }
+
+}
View
10 sass/grid/media/_media-hi-res.scss
@@ -0,0 +1,10 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _media-hi-res.scss
+//
+// currently not used
+//
+// **************************************************
View
58 sass/grid/media/_media-large.scss
@@ -0,0 +1,58 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _media-large.scss
+//
+// >1250px
+//
+// **************************************************
+
+@import "compass/layout/grid-background";
+@import "compass/typography/vertical_rhythm";
+
+
+@media screen and (min-width: 1250px) {
+
+ // baseline
+ $relative-font-sizing: false;
+ $base-font-size: 16px;
+ $base-line-height: 24px;
+ @include establish-baseline(16px);
+
+ $gc: 24; // grid columns
+ $gw: 25px; // grid width
+ $gm: 25px; // grid margin
+
+ .g-l-c {
+ @extend .g-base-c;
+ width: $gw*$gc+$gm*($gc - 1); // 1175px
+ // uncomment for a background-grid
+ // @include grid-background($gc, $gw, $gm, 24px, 0, #ccc, #ddd, #999, false);
+ }
+
+ @include grids(d,
+ 0 2 3 4 6 8 9 12 16 18 24, // only add the columns you really need
+ $gc,
+ $gw,
+ $gm,
+ 0 2 3 4 6 8 9 12 16 18 24); // only add the pad-units you really need to push/pull/append/prepend
+
+ // visibility (l,d,t/tp/tl,h/hp/hl)
+ .d-show, .h-show, .hp-show, .hl-show, .t-show, .tp-show, .tl-show {
+ display: none !important;
+ }
+ .l-hide {
+ display: none !important;
+ }
+ .l-show {
+ display: block !important;
+ }
+ #{elements-of-type(inline)} {
+ &.l-show {
+ display: inline !important;
+ }
+ }
+
+}
View
46 sass/grid/media/_media-tablet-portrait.scss
@@ -0,0 +1,46 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _media-tablet-portrait.scss
+//
+// >768px, <980px
+//
+// **************************************************
+
+@media screen and (min-width: 768px) and (max-width: 980px) {
+
+ $gc: 12; // grid columns
+ $gw: 40px; // grid width
+ $gm: 20px; // grid margin
+
+ .g-tp-c {
+ @extend .g-base-c;
+ width: $gw*$gc+$gm*($gc - 1); // 700px
+ }
+
+ @include grids(tp,
+ 0 1 2 3 4 5 6 7 8 9 10 11 12, // only add the columns you really need
+ $gc,
+ $gw,
+ $gm,
+ 0 1 2 3 4 5 6 7 8 9 10 11 12); // only add the pad-units you really need to push/pull/append/prepend
+
+ // visibility
+ .d-show, .dl-show, .h-show, .hp-show, .hl-show, .tl-show {
+ display: none !important;
+ }
+ .tp-hide {
+ display: none !important;
+ }
+ .tp-show {
+ display: block !important;
+ }
+ #{elements-of-type(inline)} {
+ &.tp-show {
+ display: inline !important;
+ }
+ }
+
+}
View
22 sass/grid/output.scss
@@ -0,0 +1,22 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _output.scss
+//
+// imports all necessary partials
+// remove partials which are not needed
+// remove sub-partials in _media, _layouts,
+// _invariants & _templates
+//
+// **************************************************
+
+@import "grid-system";
+@import "media";
+@import "layouts";
+@import "invariants";
+
+// Uncomment this if you want crazy selector bloat.
+// see http://chriseppstein.github.com/blog/2011/08/21/responsive-layouts-with-sass/
+// @import "templates";
View
23 sass/grid/templates/_template-one.scss
@@ -0,0 +1,23 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _template_one.scss
+//
+// define templates based on layouts/grids
+// note that this will bloat your resulting CSS
+//
+// **************************************************
+
+.template-1 {
+ #page {
+ @extend .l-2c;
+ }
+ #content {
+ @extend .c-1;
+ }
+ #sidebar {
+ @extend .c-2;
+ }
+}
View
20 sass/partials/_base.scss
@@ -0,0 +1,20 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _base.scss
+//
+// global variables and mixins
+//
+// **************************************************
+
+// font-families
+$font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+// colors
+$background-color: #ddd;
+$text-color: #666;
+$text-color-dark: #333;
+$text-color-light: #999;
+$box-color: #FF5247;
View
12 sass/partials/_default.scss
@@ -0,0 +1,12 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _default.scss
+//
+// default styles for all media
+//
+// **************************************************
+
+@import "partials/base";
View
16 sass/partials/_handheld-landscape.scss
@@ -0,0 +1,16 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _handheld-landscape.scss
+//
+// <767px
+// overwrite styles from _default.scss
+//
+// **************************************************
+
+@import "partials/base";
+
+@media screen and (min-width: 480px) and (max-width: 767px) {
+}
View
16 sass/partials/_handheld.scss
@@ -0,0 +1,16 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _handheld.scss
+//
+// <479px: fluid grid
+// overwrite styles from _default.scss
+//
+// **************************************************
+
+@import "partials/base";
+
+@media screen and (max-width: 479px) {
+}
View
19 sass/partials/_ie.scss
@@ -0,0 +1,19 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _ie.scss
+//
+// IE-specific styles
+//
+// **************************************************
+
+@import "partials/base";
+
+html.ie7 {
+}
+html.ie8 {
+}
+html.ie9 {
+}
View
16 sass/partials/_large.scss
@@ -0,0 +1,16 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _large.scss
+//
+// >1250px
+// overwrite styles from _default.scss
+//
+// **************************************************
+
+@import "partials/base";
+
+@media screen and (min-width: 1250px) {
+}
View
16 sass/partials/_tablet-portrait.scss
@@ -0,0 +1,16 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _tablet-portrait.scss
+//
+// >768px, <980px
+// overwrite styles from _default.scss
+//
+// **************************************************
+
+@import "partials/base";
+
+@media screen and (min-width: 768px) and (max-width: 980px) {
+}
View
64 sass/screen.scss
@@ -0,0 +1,64 @@
+// **************************************************
+//
+// MUELLER
+// modular grid system
+//
+// _screen.scss
+//
+// **************************************************
+
+@import "blueprint/reset";
+@import "partials/base";
+@import "partials/default";
+@import "partials/large";
+@import "partials/tablet-portrait";
+@import "partials/handheld";
+@import "partials/handheld-landscape";
+
+@import "compass/typography/vertical_rhythm";
+@import "compass/css3/border-radius";
+@import "compass/utilities/general/clearfix";
+
+
+body {
+ font-family: $font-family;
+ font-weight: normal;
+ color: $text-color;
+ background: $background-color;
+ margin: 0; padding: 3em 0;
+ div#wrapper {
+ width: 100%;
+ }
+}
+
+section {
+ padding-top: 3em;
+ @include clearfix;
+}
+
+p {
+ @include adjust-font-size-to(16px, 1);
+ padding: 0;
+ margin: 1.5em 0;
+}
+
+h1 {
+ display: block;
+ @include adjust-font-size-to(32px, 1);
+ font-family: $font-family;
+ font-weight: 200;
+ color: #333;
+ text-transform: uppercase;
+ padding: 0;
+}
+
+.box {
+ display: block;
+ background: $box-color;
+ color: $background-color;
+ padding: 0em 1.5em;
+ margin-bottom: 1.5em;
+ @include border-radius(4px);
+ @include clearfix;
+}
+
View
1,661 stylesheets/grid/output.css
@@ -0,0 +1,1661 @@
+/* line 58, ../../../../srv/vonautomatisch/gems/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss */
+body {
+ font-size: 87.5%;
+ line-height: 1.5em;
+}
+
+/* line 62, ../../../../srv/vonautomatisch/gems/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss */
+html > body {
+ font-size: 14px;
+}
+
+/* line 25, ../../sass/grid/media/_media-desktop.scss */
+.g-d-c, .g-all-c {
+ width: 940px;
+}
+
+/* line 55, ../../sass/grid/_grid-system.scss */
+.g-d, .g-d-0, .g-d-2, .g-d-3, .g-d-4, .g-d-6, .l-4c .c-1, .l-4c .c-2, .l-4c .c-3, .l-4c .c-4, .g-d-8, .l-2c .c-2, .l-2cr .c-2, .l-3c .c-1, .l-3c .c-2, .l-3c .c-3, .l-1c .c-1 .g-all-thirds, .g-d-9, .g-d-12, .l-1c .c-1 .g-all-half, .g-d-16, .l-2c .c-1, .l-2cr .c-1, .g-d-18, .g-d-24, .l-1c, .l-1c .c-1, .l-2c, .l-2cr, .l-3c, .l-4c {
+ float: left;
+ *zoom: 1;
+}
+/* line 38, ../../../../srv/vonautomatisch/gems/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
+.g-d:after, .g-d-0:after, .g-d-2:after, .g-d-3:after, .g-d-4:after, .g-d-6:after, .l-4c .c-1:after, .l-4c .c-2:after, .l-4c .c-3:after, .l-4c .c-4:after, .g-d-8:after, .l-2c .c-2:after, .l-2cr .c-2:after, .l-3c .c-1:after, .l-3c .c-2:after, .l-3c .c-3:after, .l-1c .c-1 .g-all-thirds:after, .g-d-9:after, .g-d-12:after, .l-1c .c-1 .g-all-half:after, .g-d-16:after, .l-2c .c-1:after, .l-2cr .c-1:after, .g-d-18:after, .g-d-24:after, .l-1c:after, .l-1c .c-1:after, .l-2c:after, .l-2cr:after, .l-3c:after, .l-4c:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+
+/* line 58, ../../sass/grid/_grid-system.scss */
+.g-d-f, .g-d-24, .l-1c, .l-1c .c-1, .l-2c, .l-2cr, .l-3c, .l-4c, .g-all-f, .g-all-fl, .l-2c .c-1, .l-2cr .c-1, .l-3c .c-1, .l-4c .c-1 {
+ margin-left: 0 !important;
+ margin-right: 20px !important;
+ clear: left;
+}
+
+/* line 63, ../../sass/grid/_grid-system.scss */
+.g-d-l, .g-d-24, .l-1c, .l-1c .c-1, .l-2c, .l-2cr, .l-3c, .l-4c, .g-all-l, .g-all-fl, .l-2c .c-2, .l-2cr .c-2, .l-3c .c-3, .l-4c .c-4 {
+ margin-right: 0 !important;
+}
+
+/* line 137, ../../sass/grid/_grid-system.scss */
+.g-d-prepend0 {
+ padding-left: 0px !important;
+}
+
+/* line 140, ../../sass/grid/_grid-system.scss */
+.g-d-append0 {
+ padding-right: 0px !important;
+}
+
+/* line 143, ../../sass/grid/_grid-system.scss */
+.g-d-push0 {
+ position: relative;
+ margin-left: 0px !important;
+ margin-right: 0px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+/* line 146, ../../sass/grid/_grid-system.scss */
+.g-d-pull0 {
+ position: relative;
+ margin-left: 20px !important;
+}
+
+/* line 137, ../../sass/grid/_grid-system.scss */
+.g-d-prepend2 {
+ padding-left: 80px !important;
+}
+
+/* line 140, ../../sass/grid/_grid-system.scss */
+.g-d-append2 {
+ padding-right: 80px !important;
+}
+
+/* line 143, ../../sass/grid/_grid-system.scss */
+.g-d-push2 {
+ position: relative;
+ margin-left: 80px !important;
+ margin-right: -80px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+/* line 146, ../../sass/grid/_grid-system.scss */
+.g-d-pull2 {
+ position: relative;
+ margin-left: -60px !important;
+}
+
+/* line 137, ../../sass/grid/_grid-system.scss */
+.g-d-prepend3 {
+ padding-left: 120px !important;
+}
+
+/* line 140, ../../sass/grid/_grid-system.scss */
+.g-d-append3 {
+ padding-right: 120px !important;
+}
+
+/* line 143, ../../sass/grid/_grid-system.scss */
+.g-d-push3 {
+ position: relative;
+ margin-left: 120px !important;
+ margin-right: -120px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+/* line 146, ../../sass/grid/_grid-system.scss */
+.g-d-pull3 {
+ position: relative;
+ margin-left: -100px !important;
+}
+
+/* line 137, ../../sass/grid/_grid-system.scss */
+.g-d-prepend4 {
+ padding-left: 160px !important;
+}
+
+/* line 140, ../../sass/grid/_grid-system.scss */
+.g-d-append4 {
+ padding-right: 160px !important;
+}
+
+/* line 143, ../../sass/grid/_grid-system.scss */
+.g-d-push4 {
+ position: relative;
+ margin-left: 160px !important;
+ margin-right: -160px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+/* line 146, ../../sass/grid/_grid-system.scss */
+.g-d-pull4 {
+ position: relative;
+ margin-left: -140px !important;
+}
+
+/* line 137, ../../sass/grid/_grid-system.scss */
+.g-d-prepend6 {
+ padding-left: 240px !important;
+}
+
+/* line 140, ../../sass/grid/_grid-system.scss */
+.g-d-append6 {
+ padding-right: 240px !important;
+}
+
+/* line 143, ../../sass/grid/_grid-system.scss */
+.g-d-push6 {
+ position: relative;
+ margin-left: 240px !important;
+ margin-right: -240px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+/* line 146, ../../sass/grid/_grid-system.scss */
+.g-d-pull6 {
+ position: relative;
+ margin-left: -220px !important;
+}
+
+/* line 137, ../../sass/grid/_grid-system.scss */
+.g-d-prepend8 {
+ padding-left: 320px !important;
+}
+
+/* line 140, ../../sass/grid/_grid-system.scss */
+.g-d-append8 {
+ padding-right: 320px !important;
+}
+
+/* line 143, ../../sass/grid/_grid-system.scss */
+.g-d-push8, .l-2cr .c-1 {
+ position: relative;
+ margin-left: 320px !important;
+ margin-right: -320px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+/* line 146, ../../sass/grid/_grid-system.scss */
+.g-d-pull8 {
+ position: relative;
+ margin-left: -300px !important;
+}
+
+/* line 137, ../../sass/grid/_grid-system.scss */
+.g-d-prepend9 {
+ padding-left: 360px !important;
+}
+
+/* line 140, ../../sass/grid/_grid-system.scss */
+.g-d-append9 {
+ padding-right: 360px !important;
+}
+
+/* line 143, ../../sass/grid/_grid-system.scss */
+.g-d-push9 {
+ position: relative;
+ margin-left: 360px !important;
+ margin-right: -360px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+/* line 146, ../../sass/grid/_grid-system.scss */
+.g-d-pull9 {
+ position: relative;
+ margin-left: -340px !important;
+}
+
+/* line 137, ../../sass/grid/_grid-system.scss */
+.g-d-prepend12 {
+ padding-left: 480px !important;
+}
+
+/* line 140, ../../sass/grid/_grid-system.scss */
+.g-d-append12 {
+ padding-right: 480px !important;
+}
+
+/* line 143, ../../sass/grid/_grid-system.scss */
+.g-d-push12 {
+ position: relative;
+ margin-left: 480px !important;
+ margin-right: -480px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+/* line 146, ../../sass/grid/_grid-system.scss */
+.g-d-pull12 {
+ position: relative;
+ margin-left: -460px !important;
+}
+
+/* line 137, ../../sass/grid/_grid-system.scss */
+.g-d-prepend16 {
+ padding-left: 640px !important;
+}
+
+/* line 140, ../../sass/grid/_grid-system.scss */
+.g-d-append16 {
+ padding-right: 640px !important;
+}
+
+/* line 143, ../../sass/grid/_grid-system.scss */
+.g-d-push16 {
+ position: relative;
+ margin-left: 640px !important;
+ margin-right: -640px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+/* line 146, ../../sass/grid/_grid-system.scss */
+.g-d-pull16, .l-2cr .c-2 {
+ position: relative;
+ margin-left: -620px !important;
+}
+
+/* line 137, ../../sass/grid/_grid-system.scss */
+.g-d-prepend18 {
+ padding-left: 720px !important;
+}
+
+/* line 140, ../../sass/grid/_grid-system.scss */
+.g-d-append18 {
+ padding-right: 720px !important;
+}
+
+/* line 143, ../../sass/grid/_grid-system.scss */
+.g-d-push18 {
+ position: relative;
+ margin-left: 720px !important;
+ margin-right: -720px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+/* line 146, ../../sass/grid/_grid-system.scss */
+.g-d-pull18 {
+ position: relative;
+ margin-left: -700px !important;
+}
+
+/* line 137, ../../sass/grid/_grid-system.scss */
+.g-d-prepend24 {
+ padding-left: 960px !important;
+}
+
+/* line 140, ../../sass/grid/_grid-system.scss */
+.g-d-append24 {
+ padding-right: 960px !important;
+}
+
+/* line 143, ../../sass/grid/_grid-system.scss */
+.g-d-push24 {
+ position: relative;
+ margin-left: 960px !important;
+ margin-right: -960px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+/* line 146, ../../sass/grid/_grid-system.scss */
+.g-d-pull24 {
+ position: relative;
+ margin-left: -940px !important;
+}
+
+/* line 152, ../../sass/grid/_grid-system.scss */
+.g-d-0 {
+ margin-right: 20px;
+ width: -20px;
+}
+
+/* line 152, ../../sass/grid/_grid-system.scss */
+.g-d-2 {
+ margin-right: 20px;
+ width: 60px;
+}
+
+/* line 152, ../../sass/grid/_grid-system.scss */
+.g-d-3 {
+ margin-right: 20px;
+ width: 100px;
+}
+
+/* line 152, ../../sass/grid/_grid-system.scss */
+.g-d-4 {
+ margin-right: 20px;
+ width: 140px;
+}
+
+/* line 152, ../../sass/grid/_grid-system.scss */
+.g-d-6, .l-4c .c-1, .l-4c .c-2, .l-4c .c-3, .l-4c .c-4 {
+ margin-right: 20px;
+ width: 220px;
+}
+
+/* line 152, ../../sass/grid/_grid-system.scss */
+.g-d-8, .l-2c .c-2, .l-2cr .c-2, .l-3c .c-1, .l-3c .c-2, .l-3c .c-3, .l-1c .c-1 .g-all-thirds {
+ margin-right: 20px;
+ width: 300px;
+}
+
+/* line 152, ../../sass/grid/_grid-system.scss */
+.g-d-9 {
+ margin-right: 20px;
+ width: 340px;
+}
+
+/* line 152, ../../sass/grid/_grid-system.scss */
+.g-d-12, .l-1c .c-1 .g-all-half {
+ margin-right: 20px;
+ width: 460px;
+}
+
+/* line 152, ../../sass/grid/_grid-system.scss */
+.g-d-16, .l-2c .c-1, .l-2cr .c-1 {
+ margin-right: 20px;
+ width: 620px;
+}
+
+/* line 152, ../../sass/grid/_grid-system.scss */
+.g-d-18 {
+ margin-right: 20px;
+ width: 700px;
+}
+
+/* line 152, ../../sass/grid/_grid-system.scss */
+.g-d-24, .l-1c, .l-1c .c-1, .l-2c, .l-2cr, .l-3c, .l-4c {
+ width: 940px;
+}
+
+/* line 40, ../../sass/grid/media/_media-desktop.scss */
+.l-show, .h-show, .hp-show, .hl-show, .t-show, .tp-show, .tl-show {
+ display: none !important;
+}
+
+/* line 43, ../../sass/grid/media/_media-desktop.scss */
+.d-hide {
+ display: none !important;
+}
+
+/* line 46, ../../sass/grid/media/_media-desktop.scss */
+.d-show {
+ display: block !important;
+}
+
+/* line 50, ../../sass/grid/media/_media-desktop.scss */
+a.d-show, abbr.d-show, acronym.d-show, audio.d-show, b.d-show, basefont.d-show, bdo.d-show, big.d-show, br.d-show, canvas.d-show, cite.d-show, code.d-show, command.d-show, datalist.d-show, dfn.d-show, em.d-show, embed.d-show, font.d-show, i.d-show, img.d-show, input.d-show, keygen.d-show, kbd.d-show, label.d-show, mark.d-show, meter.d-show, output.d-show, progress.d-show, q.d-show, rp.d-show, rt.d-show, ruby.d-show, s.d-show, samp.d-show, select.d-show, small.d-show, span.d-show, strike.d-show, strong.d-show, sub.d-show, sup.d-show, textarea.d-show, time.d-show, tt.d-show, u.d-show, var.d-show, video.d-show, wbr.d-show {
+ display: inline !important;
+}
+
+@media screen and (min-width: 1250px) {
+ /* line 58, ../../../../srv/vonautomatisch/gems/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss */
+ body {
+ font-size: 100%;
+ line-height: 1.5em;
+ }
+
+ /* line 62, ../../../../srv/vonautomatisch/gems/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss */
+ html > body {
+ font-size: 16px;
+ }
+
+ /* line 28, ../../sass/grid/media/_media-large.scss */
+ .g-l-c, .g-all-c {
+ width: 1175px;
+ }
+
+ /* line 55, ../../sass/grid/_grid-system.scss */
+ .g-d, .g-d-0, .g-d-2, .g-d-3, .g-d-4, .g-d-6, .l-4c .c-1, .l-4c .c-2, .l-4c .c-3, .l-4c .c-4, .g-d-8, .l-2c .c-2, .l-2cr .c-2, .l-3c .c-1, .l-3c .c-2, .l-3c .c-3, .l-1c .c-1 .g-all-thirds, .g-d-9, .g-d-12, .l-1c .c-1 .g-all-half, .g-d-16, .l-2c .c-1, .l-2cr .c-1, .g-d-18, .g-d-24, .l-1c, .l-1c .c-1, .l-2c, .l-2cr, .l-3c, .l-4c {
+ float: left;
+ *zoom: 1;
+ }
+ /* line 38, ../../../../srv/vonautomatisch/gems/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
+ .g-d:after, .g-d-0:after, .g-d-2:after, .g-d-3:after, .g-d-4:after, .g-d-6:after, .l-4c .c-1:after, .l-4c .c-2:after, .l-4c .c-3:after, .l-4c .c-4:after, .g-d-8:after, .l-2c .c-2:after, .l-2cr .c-2:after, .l-3c .c-1:after, .l-3c .c-2:after, .l-3c .c-3:after, .l-1c .c-1 .g-all-thirds:after, .g-d-9:after, .g-d-12:after, .l-1c .c-1 .g-all-half:after, .g-d-16:after, .l-2c .c-1:after, .l-2cr .c-1:after, .g-d-18:after, .g-d-24:after, .l-1c:after, .l-1c .c-1:after, .l-2c:after, .l-2cr:after, .l-3c:after, .l-4c:after {
+ content: "";
+ display: table;
+ clear: both;
+ }
+
+ /* line 58, ../../sass/grid/_grid-system.scss */
+ .g-d-f, .g-d-24, .l-1c, .l-1c .c-1, .l-2c, .l-2cr, .l-3c, .l-4c, .g-all-f, .g-all-fl, .l-2c .c-1, .l-2cr .c-1, .l-3c .c-1, .l-4c .c-1 {
+ margin-left: 0 !important;
+ margin-right: 25px !important;
+ clear: left;
+ }
+
+ /* line 63, ../../sass/grid/_grid-system.scss */
+ .g-d-l, .g-d-24, .l-1c, .l-1c .c-1, .l-2c, .l-2cr, .l-3c, .l-4c, .g-all-l, .g-all-fl, .l-2c .c-2, .l-2cr .c-2, .l-3c .c-3, .l-4c .c-4 {
+ margin-right: 0 !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-d-prepend0 {
+ padding-left: 0px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-d-append0 {
+ padding-right: 0px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */
+ .g-d-push0 {
+ position: relative;
+ margin-left: 0px !important;
+ margin-right: 0px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ /* line 146, ../../sass/grid/_grid-system.scss */
+ .g-d-pull0 {
+ position: relative;
+ margin-left: 25px !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-d-prepend2 {
+ padding-left: 100px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-d-append2 {
+ padding-right: 100px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */
+ .g-d-push2 {
+ position: relative;
+ margin-left: 100px !important;
+ margin-right: -100px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ /* line 146, ../../sass/grid/_grid-system.scss */
+ .g-d-pull2 {
+ position: relative;
+ margin-left: -75px !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-d-prepend3 {
+ padding-left: 150px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-d-append3 {
+ padding-right: 150px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */
+ .g-d-push3 {
+ position: relative;
+ margin-left: 150px !important;
+ margin-right: -150px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ /* line 146, ../../sass/grid/_grid-system.scss */
+ .g-d-pull3 {
+ position: relative;
+ margin-left: -125px !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-d-prepend4 {
+ padding-left: 200px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-d-append4 {
+ padding-right: 200px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */
+ .g-d-push4 {
+ position: relative;
+ margin-left: 200px !important;
+ margin-right: -200px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ /* line 146, ../../sass/grid/_grid-system.scss */
+ .g-d-pull4 {
+ position: relative;
+ margin-left: -175px !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-d-prepend6 {
+ padding-left: 300px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-d-append6 {
+ padding-right: 300px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */
+ .g-d-push6 {
+ position: relative;
+ margin-left: 300px !important;
+ margin-right: -300px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ /* line 146, ../../sass/grid/_grid-system.scss */
+ .g-d-pull6 {
+ position: relative;
+ margin-left: -275px !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-d-prepend8 {
+ padding-left: 400px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-d-append8 {
+ padding-right: 400px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */
+ .g-d-push8, .l-2cr .c-1 {
+ position: relative;
+ margin-left: 400px !important;
+ margin-right: -400px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ /* line 146, ../../sass/grid/_grid-system.scss */
+ .g-d-pull8 {
+ position: relative;
+ margin-left: -375px !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-d-prepend9 {
+ padding-left: 450px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-d-append9 {
+ padding-right: 450px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */
+ .g-d-push9 {
+ position: relative;
+ margin-left: 450px !important;
+ margin-right: -450px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ /* line 146, ../../sass/grid/_grid-system.scss */
+ .g-d-pull9 {
+ position: relative;
+ margin-left: -425px !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-d-prepend12 {
+ padding-left: 600px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-d-append12 {
+ padding-right: 600px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */
+ .g-d-push12 {
+ position: relative;
+ margin-left: 600px !important;
+ margin-right: -600px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ /* line 146, ../../sass/grid/_grid-system.scss */
+ .g-d-pull12 {
+ position: relative;
+ margin-left: -575px !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-d-prepend16 {
+ padding-left: 800px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-d-append16 {
+ padding-right: 800px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */
+ .g-d-push16 {
+ position: relative;
+ margin-left: 800px !important;
+ margin-right: -800px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ /* line 146, ../../sass/grid/_grid-system.scss */
+ .g-d-pull16, .l-2cr .c-2 {
+ position: relative;
+ margin-left: -775px !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-d-prepend18 {
+ padding-left: 900px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-d-append18 {
+ padding-right: 900px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */
+ .g-d-push18 {
+ position: relative;
+ margin-left: 900px !important;
+ margin-right: -900px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ /* line 146, ../../sass/grid/_grid-system.scss */
+ .g-d-pull18 {
+ position: relative;
+ margin-left: -875px !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-d-prepend24 {
+ padding-left: 1200px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-d-append24 {
+ padding-right: 1200px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */
+ .g-d-push24 {
+ position: relative;
+ margin-left: 1200px !important;
+ margin-right: -1200px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ /* line 146, ../../sass/grid/_grid-system.scss */
+ .g-d-pull24 {
+ position: relative;
+ margin-left: -1175px !important;
+ }
+
+ /* line 152, ../../sass/grid/_grid-system.scss */
+ .g-d-0 {
+ margin-right: 25px;
+ width: -25px;
+ }
+
+ /* line 152, ../../sass/grid/_grid-system.scss */
+ .g-d-2 {
+ margin-right: 25px;
+ width: 75px;
+ }
+
+ /* line 152, ../../sass/grid/_grid-system.scss */
+ .g-d-3 {
+ margin-right: 25px;
+ width: 125px;
+ }
+
+ /* line 152, ../../sass/grid/_grid-system.scss */
+ .g-d-4 {
+ margin-right: 25px;
+ width: 175px;
+ }
+
+ /* line 152, ../../sass/grid/_grid-system.scss */
+ .g-d-6, .l-4c .c-1, .l-4c .c-2, .l-4c .c-3, .l-4c .c-4 {
+ margin-right: 25px;
+ width: 275px;
+ }
+
+ /* line 152, ../../sass/grid/_grid-system.scss */
+ .g-d-8, .l-2c .c-2, .l-2cr .c-2, .l-3c .c-1, .l-3c .c-2, .l-3c .c-3, .l-1c .c-1 .g-all-thirds {
+ margin-right: 25px;
+ width: 375px;
+ }
+
+ /* line 152, ../../sass/grid/_grid-system.scss */
+ .g-d-9 {
+ margin-right: 25px;
+ width: 425px;
+ }
+
+ /* line 152, ../../sass/grid/_grid-system.scss */
+ .g-d-12, .l-1c .c-1 .g-all-half {
+ margin-right: 25px;
+ width: 575px;
+ }
+
+ /* line 152, ../../sass/grid/_grid-system.scss */
+ .g-d-16, .l-2c .c-1, .l-2cr .c-1 {
+ margin-right: 25px;
+ width: 775px;
+ }
+
+ /* line 152, ../../sass/grid/_grid-system.scss */
+ .g-d-18 {
+ margin-right: 25px;
+ width: 875px;
+ }
+
+ /* line 152, ../../sass/grid/_grid-system.scss */
+ .g-d-24, .l-1c, .l-1c .c-1, .l-2c, .l-2cr, .l-3c, .l-4c {
+ width: 1175px;
+ }
+
+ /* line 43, ../../sass/grid/media/_media-large.scss */
+ .d-show, .h-show, .hp-show, .hl-show, .t-show, .tp-show, .tl-show {
+ display: none !important;
+ }
+
+ /* line 46, ../../sass/grid/media/_media-large.scss */
+ .l-hide {
+ display: none !important;
+ }
+
+ /* line 49, ../../sass/grid/media/_media-large.scss */
+ .l-show {
+ display: block !important;
+ }
+
+ /* line 53, ../../sass/grid/media/_media-large.scss */
+ a.l-show, abbr.l-show, acronym.l-show, audio.l-show, b.l-show, basefont.l-show, bdo.l-show, big.l-show, br.l-show, canvas.l-show, cite.l-show, code.l-show, command.l-show, datalist.l-show, dfn.l-show, em.l-show, embed.l-show, font.l-show, i.l-show, img.l-show, input.l-show, keygen.l-show, kbd.l-show, label.l-show, mark.l-show, meter.l-show, output.l-show, progress.l-show, q.l-show, rp.l-show, rt.l-show, ruby.l-show, s.l-show, samp.l-show, select.l-show, small.l-show, span.l-show, strike.l-show, strong.l-show, sub.l-show, sup.l-show, textarea.l-show, time.l-show, tt.l-show, u.l-show, var.l-show, video.l-show, wbr.l-show {
+ display: inline !important;
+ }
+}
+@media screen and (min-width: 768px) and (max-width: 980px) {
+ /* line 18, ../../sass/grid/media/_media-tablet-portrait.scss */
+ .g-tp-c, .g-all-c {
+ width: 700px;
+ }
+
+ /* line 55, ../../sass/grid/_grid-system.scss */
+ .g-tp, .g-tp-0, .g-tp-1, .g-tp-2, .g-tp-3, .g-tp-4, .l-2c .c-2, .l-2cr .c-2, .l-3c .c-1, .l-3c .c-2, .l-3c .c-3, .l-1c .c-1 .g-all-thirds, .g-tp-5, .g-tp-6, .l-4c .c-1, .l-4c .c-2, .l-4c .c-3, .l-4c .c-4, .l-1c .c-1 .g-all-half, .g-tp-7, .g-tp-8, .l-2c .c-1, .l-2cr .c-1, .g-tp-9, .g-tp-10, .g-tp-11, .g-tp-12, .l-1c, .l-1c .c-1, .l-2c, .l-2cr, .l-3c, .l-4c {
+ float: left;
+ *zoom: 1;
+ }
+ /* line 38, ../../../../srv/vonautomatisch/gems/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
+ .g-tp:after, .g-tp-0:after, .g-tp-1:after, .g-tp-2:after, .g-tp-3:after, .g-tp-4:after, .l-2c .c-2:after, .l-2cr .c-2:after, .l-3c .c-1:after, .l-3c .c-2:after, .l-3c .c-3:after, .l-1c .c-1 .g-all-thirds:after, .g-tp-5:after, .g-tp-6:after, .l-4c .c-1:after, .l-4c .c-2:after, .l-4c .c-3:after, .l-4c .c-4:after, .l-1c .c-1 .g-all-half:after, .g-tp-7:after, .g-tp-8:after, .l-2c .c-1:after, .l-2cr .c-1:after, .g-tp-9:after, .g-tp-10:after, .g-tp-11:after, .g-tp-12:after, .l-1c:after, .l-1c .c-1:after, .l-2c:after, .l-2cr:after, .l-3c:after, .l-4c:after {
+ content: "";
+ display: table;
+ clear: both;
+ }
+
+ /* line 58, ../../sass/grid/_grid-system.scss */
+ .g-tp-f, .g-tp-12, .l-1c, .l-1c .c-1, .l-2c, .l-2cr, .l-3c, .l-4c, .g-all-f, .g-all-fl, .l-2c .c-1, .l-2cr .c-1, .l-3c .c-1, .l-4c .c-1, .l-4c .c-3 {
+ margin-left: 0 !important;
+ margin-right: 20px !important;
+ clear: left;
+ }
+
+ /* line 63, ../../sass/grid/_grid-system.scss */
+ .g-tp-l, .g-tp-12, .l-1c, .l-1c .c-1, .l-2c, .l-2cr, .l-3c, .l-4c, .g-all-l, .g-all-fl, .l-2c .c-2, .l-2cr .c-2, .l-3c .c-3, .l-4c .c-2, .l-4c .c-4 {
+ margin-right: 0 !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-tp-prepend0 {
+ padding-left: 0px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-tp-append0 {
+ padding-right: 0px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */
+ .g-tp-push0 {
+ position: relative;
+ margin-left: 0px !important;
+ margin-right: 0px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ /* line 146, ../../sass/grid/_grid-system.scss */
+ .g-tp-pull0 {
+ position: relative;
+ margin-left: 20px !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-tp-prepend1 {
+ padding-left: 60px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-tp-append1 {
+ padding-right: 60px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */
+ .g-tp-push1 {
+ position: relative;
+ margin-left: 60px !important;
+ margin-right: -60px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ /* line 146, ../../sass/grid/_grid-system.scss */
+ .g-tp-pull1 {
+ position: relative;
+ margin-left: -40px !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-tp-prepend2 {
+ padding-left: 120px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-tp-append2 {
+ padding-right: 120px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */
+ .g-tp-push2 {
+ position: relative;
+ margin-left: 120px !important;
+ margin-right: -120px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ /* line 146, ../../sass/grid/_grid-system.scss */
+ .g-tp-pull2 {
+ position: relative;
+ margin-left: -100px !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-tp-prepend3 {
+ padding-left: 180px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-tp-append3 {
+ padding-right: 180px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */
+ .g-tp-push3 {
+ position: relative;
+ margin-left: 180px !important;
+ margin-right: -180px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ /* line 146, ../../sass/grid/_grid-system.scss */
+ .g-tp-pull3 {
+ position: relative;
+ margin-left: -160px !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-tp-prepend4 {
+ padding-left: 240px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-tp-append4 {
+ padding-right: 240px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */
+ .g-tp-push4, .l-2cr .c-1 {
+ position: relative;
+ margin-left: 240px !important;
+ margin-right: -240px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ /* line 146, ../../sass/grid/_grid-system.scss */
+ .g-tp-pull4 {
+ position: relative;
+ margin-left: -220px !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-tp-prepend5 {
+ padding-left: 300px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-tp-append5 {
+ padding-right: 300px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */
+ .g-tp-push5 {
+ position: relative;
+ margin-left: 300px !important;
+ margin-right: -300px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ /* line 146, ../../sass/grid/_grid-system.scss */
+ .g-tp-pull5 {
+ position: relative;
+ margin-left: -280px !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-tp-prepend6 {
+ padding-left: 360px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-tp-append6 {
+ padding-right: 360px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */
+ .g-tp-push6 {
+ position: relative;
+ margin-left: 360px !important;
+ margin-right: -360px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ /* line 146, ../../sass/grid/_grid-system.scss */
+ .g-tp-pull6 {
+ position: relative;
+ margin-left: -340px !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-tp-prepend7 {
+ padding-left: 420px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-tp-append7 {
+ padding-right: 420px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */
+ .g-tp-push7 {
+ position: relative;
+ margin-left: 420px !important;
+ margin-right: -420px !important;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ /* line 146, ../../sass/grid/_grid-system.scss */
+ .g-tp-pull7 {
+ position: relative;
+ margin-left: -400px !important;
+ }
+
+ /* line 137, ../../sass/grid/_grid-system.scss */
+ .g-tp-prepend8 {
+ padding-left: 480px !important;
+ }
+
+ /* line 140, ../../sass/grid/_grid-system.scss */
+ .g-tp-append8 {
+ padding-right: 480px !important;
+ }
+
+ /* line 143, ../../sass/grid/_grid-system.scss */