compass-grid-plugin 0.0.1

data/.gitignore

@@ -0,0 +1,8 @@
+
+/project.sublime-project
+/project.sublime-workspace
+/test/.sass-cache
+/test/css/test.css
+/test/css/example.css
+/compass-grid-0.0.1.gem
+/compass-grid-plugin-0.0.1.gem

data/README.md

@@ -0,0 +1,88 @@
+- [Blog post](http://heygrady.com/blog/2011/02/17/using-sass-with-the-1kb-grid-system/)
+- [Gist](https://gist.github.com/702760)
+- [The 1KB CSS Grid](http://1kbgrid.com/)
+
+## About
+Simple grid system inspired by the [the 1KB CSS Grid](http://1kbgrid.com/) designed to utilize [Sass](http://sass-lang.com/) to remove unnecessary classes from the HTML markup and make customization easier. The best part is that it's not exactly 1KB now! Even better than the best part is that it's been extended to support fluid grids as well.
+
+The next better best thing would be fully responsive media query support, but there's [some limitations in Sass as a language](https://github.com/nex3/sass/issues/116#issuecomment-5166163) that make that difficult to do in a Compass plugin.
+
+## Installation
+###Install the Ruby Gem.
+```
+gem install compass-grid-plugin
+```
+
+### Existing Compass Projects
+You can include it in any existing Compass project by including the grid in your config.rb file.
+
+```ruby
+# Require any additional compass plugins here.
+require 'compass-grid'
+```
+
+### New Compass Projects
+You can install the grid plugin as part of a new Compass project.
+
+```
+compass create my_project -r compass-grid -u compass-grid
+```
+
+## Fixed Grid Usage
+The primary grid is a fixed, pixel grid. This grid is ideal for designs that do not require responsive design.
+
+```scss
+@import "grid";
+```
+
+### Variables 
+- **$grid-column-width**: *60px* - The width of 1 column
+- **$grid-gutter-width**: *20px* - The space between 2 columns
+- **$grid-columns**: *12* - The total number of columns
+- **$grid-clearfix-class**: *true* - Create a `.clearfix` class to extend
+- **$grid-support-for-ie6**: *false* - Apply fixes for IE6
+
+### Functions
+- **grid-column-width( $i, [$plus: 0] )** - Function for calculating column widths. Useful for integrating standard grid measurements into other elements, besides columns. Particularly useful for using columns widths as margin or padding.
+
+### Mixins
+- **grid( $i, [$plus: 0] )** - Mixin for applying widths to a column. The *$plus* argument can be used to alter the width to account for borders or padding.
+- **grid-page( [$i: $grid-columns], [$plus: 0] )** - Mixin for declaring a page element. *$i* is *$grid-columns* by default but can be altered. The *$plus* argument can be used to alter the width to account for borders or padding.
+- **grid-row( [$page: false] )** - Mixing for declaring a column container. The *$page* argument is removing the negative margins when directly inside a page element.
+- **grid-column( [$i: false], [$plus: 0] )** - Mixin for declaring a column. Specifying *$i* will call the *grid* mixin. The *$plus* argument is passed to the *grid* mixin if *i* is also specified.
+- **grid-offset( [$i: 1], [$plus: 0], [$side] )** - Mixin for altering the left or right margin on a column. Useful for adding empty columns before or after a column. The *$i* argument specifies the width of the offset in columns. The *$plus* argument can be used to alter the width. *$side* can be right, left, top or bottom (although right and left are the most useful).
+- **grid-offset-left( [$i: 1], [$plus: 0] )** - Convenience mixin for setting the left margin on a column. The *$i* argument specifies the width of the offset in columns. The *$plus* argument can be used to alter the width.
+- **grid-offset-right( [$i: 1], [$plus: 0] )** - Convenience mixin for setting the right margin on a column. The *$i* argument specifies the width of the offset in columns. The *$plus* argument can be used to alter the width.
+- **grid-css( )** - outputs the default grid CSS in case those classes are required in the markup.
+
+## Fluid Grid Usage
+This is a fluid version of the grid that uses percentages for widths. This grid is ideal for responsive designs that need to scale depending on the device. The fluid grid is more complex because percentage widths depend on their context for meaning. Every function and mixin is similar to the fixed grid but there are two additional variables to provide context.
+
+```scss
+@import "grid/fluid";
+```
+
+### Variables
+The fluid grid uses the variable from the fixed grid module
+
+### Functions
+- **fluid-column-width( $i, [$plus: 0], [$parent: $grid-columns], [$parent-plus: 0] )** - Function for calculating column widths. Useful for integrating standard grid measurements into other elements, besides columns. Particularly useful for using columns widths as margin or padding.
+- **fluid-width( $i, [$plus: 0], [$parent: $grid-columns], [$parent-plus: 0] )** - Function for calculating arbitrary widths.
+
+### Mixins
+- **fluid( $i, [$plus: 0], [$parent: $grid-columns], [$parent-plus: 0] )** - Mixin for applying widths to a column. The *$plus* argument can be used to alter the width to account for borders or padding.
+- **fluid-page( [$i: $grid-columns], [$plus: 0], [$use-max-width: true] )** - Mixin for declaring a page element. *$i* is *$grid-columns* by default but can be altered. The *$plus* argument can be used to alter the width to account for borders or padding.
+- **fluid-row( [$page: false], [$parent: $grid-columns], [$parent-plus: 0] )** - Mixing for declaring a column container. The *$page* argument is removing the negative margins when directly inside a page element.
+- **fluid-column( [$i: false], [$plus: 0], [$parent: $grid-columns], [$parent-plus: 0] )** - Mixin for declaring a column. Specifying *$i* will call the *grid* mixin. The *$plus* argument is passed to the *grid* mixin if *i* is also specified.
+- **fluid-offset( [$i: 1], [$plus: 0], [$side], [$parent: $grid-columns], [$parent-plus: 0] )** - Mixin for altering the left or right margin on a column. Useful for adding empty columns before or after a column. The *$i* argument specifies the width of the offset in columns. The *$plus* argument can be used to alter the width. *$side* can be right, left, top or bottom (although right and left are the most useful).
+- **fluid-offset-left( [$i: 1], [$plus: 0], [$parent: $grid-columns], [$parent-plus: 0] )** - Convenience mixin for setting the left margin on a column. The *$i* argument specifies the width of the offset in columns. The *$plus* argument can be used to alter the width.
+- **fluid-offset-right( [$i: 1], [$plus: 0], [$parent: $grid-columns], [$parent-plus: 0] )** - Convenience mixin for setting the right margin on a column. The *$i* argument specifies the width of the offset in columns. The *$plus* argument can be used to alter the width.
+- **fluid-css( )** - outputs the default fluid grid CSS in case those classes are required in the markup.
+
+## Notes
+- You must define a `.clearfix` class for the grid to work properly. The grid attempts to extend an existing `.clearfix` class. By default a clearfix class is output automatically. If you want to use your own, you can set `$grid-clearfix-class: false;`.
+- The only thing requiring an IE6 fix is the floats on columns.
+- In order to support accurate fluid grid percentages, the number precision in Sass is set to 8.
+- The fluid grid is not designed to work in older versions of IE, below version 8. The fluid grid is intended to be used on modern devices that support media queries.
+- The only thing in the fluid grid not supported in IE7 is the use of `box-sizing`. This will only matter if borders or padding are added to a column.
+- The CSS generated by `@include fluid-css` for the fluid grid will not work in IE6 because of the use of the direct child selector.

data/compass-grid-plugin.gemspec

@@ -0,0 +1,21 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "compass/grid/version"
+
+Gem::Specification.new do |s|
+  s.name        = 'compass-grid-plugin'
+  s.version     = Compass::Grid::VERSION
+  s.platform    = Gem::Platform::RUBY
+  s.summary     = "Compass extension based on the 1KB CSS Grid"
+  s.description = "Compass extension based on the 1KB CSS Grid designed to utilize Sass and Compass to remove unnecessary classes from the HTML markup and make customization easier."
+  s.homepage    = 'https://github.com/heygrady/1KB-SCSS-Grid'
+  s.authors     = ["Grady Kuhnline"]
+  s.email       = ["github@heygrady.net"]
+
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+
+  s.add_dependency("compass")
+end

data/example/config.rb

@@ -0,0 +1,27 @@
+# Require any additional compass plugins here.
+require 'compass-h5bp'
+require 'compass-grid'
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "scss"
+images_dir = "i"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+output_style = :compact
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

data/example/css/example.css

@@ -0,0 +1,97 @@
+.clearfix, .page, .row, .page > .row, #container, [role="main"], #main-column > section { *zoom: 1; }
+.clearfix:after, .page:after, .row:after, .page > .row:after, #container:after, [role="main"]:after, #main-column > section:after { content: ""; display: table; clear: both; }
+
+.page { width: 960px; margin: 0 auto; }
+
+.row { width: auto; margin: 0 -10px; }
+
+.page > .row { width: auto; margin: 0 0; }
+
+.column { margin: 0 10px; float: left; }
+
+.grid-1 { width: 60px; }
+
+.before-1 { margin-left: 90px; }
+
+.after-1 { margin-right: 90px; }
+
+.grid-2 { width: 140px; }
+
+.before-2 { margin-left: 170px; }
+
+.after-2 { margin-right: 170px; }
+
+.grid-3 { width: 220px; }
+
+.before-3 { margin-left: 250px; }
+
+.after-3 { margin-right: 250px; }
+
+.grid-4 { width: 300px; }
+
+.before-4 { margin-left: 330px; }
+
+.after-4 { margin-right: 330px; }
+
+.grid-5 { width: 380px; }
+
+.before-5 { margin-left: 410px; }
+
+.after-5 { margin-right: 410px; }
+
+.grid-6 { width: 460px; }
+
+.before-6 { margin-left: 490px; }
+
+.after-6 { margin-right: 490px; }
+
+.grid-7 { width: 540px; }
+
+.before-7 { margin-left: 570px; }
+
+.after-7 { margin-right: 570px; }
+
+.grid-8 { width: 620px; }
+
+.before-8 { margin-left: 650px; }
+
+.after-8 { margin-right: 650px; }
+
+.grid-9 { width: 700px; }
+
+.before-9 { margin-left: 730px; }
+
+.after-9 { margin-right: 730px; }
+
+.grid-10 { width: 780px; }
+
+.before-10 { margin-left: 810px; }
+
+.after-10 { margin-right: 810px; }
+
+.grid-11 { width: 860px; }
+
+.before-11 { margin-left: 890px; }
+
+.after-11 { margin-right: 890px; }
+
+.grid-12 { width: 940px; }
+
+.box { margin-bottom: 20px; }
+
+#container { width: 960px; margin: 0 auto; }
+
+[role="main"] { width: auto; margin: 0 0; }
+
+#container > header, #container > footer { margin: 0 10px; border: 1px solid black; margin-bottom: 20px; }
+
+#left-column, #right-column { margin: 0 10px; float: left; width: 218px; border: 1px solid red; }
+
+#main-column { margin: 0 10px; float: left; width: 700px; }
+#main-column > section { width: auto; margin: 0 -10px; margin-bottom: 20px; }
+#main-column > section.hero { border: 1px solid black; margin-left: 0; margin-right: 0; }
+
+#content { margin: 0 10px; float: left; width: 458px; border: 1px solid blue; }
+
+.clearfix, .page, .row, .page > .row, #container, [role="main"], #main-column > section { *zoom: 1; }
+.clearfix:after, .page:after, .row:after, .page > .row:after, #container:after, [role="main"]:after, #main-column > section:after { content: ""; display: table; clear: both; }

data/example/css/media.css

@@ -0,0 +1,618 @@
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
+
+audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
+
+audio:not([controls]) { display: none; }
+
+[hidden] { display: none; }
+
+html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+
+html, button, input, select, textarea { font-family: sans-serif; color: #222222; }
+
+body { margin: 0; font-size: 1em; line-height: 1.4; }
+
+a { color: #0000ee; }
+
+a:visited { color: #551a8b; }
+
+a:hover { color: #0066ee; }
+
+a:focus { outline: thin dotted; }
+
+a:hover, a:active { outline: 0; }
+
+abbr[title] { border-bottom: 1px dotted; }
+
+b, strong { font-weight: bold; }
+
+blockquote { margin: 1em 40px; }
+
+dfn { font-style: italic; }
+
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+
+ins { background: #ff9; color: #000; text-decoration: none; }
+
+mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+
+pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
+
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+
+q { quotes: none; }
+
+q:before, q:after { content: ""; content: none; }
+
+small { font-size: 85%; }
+
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+
+sup { top: -0.5em; }
+
+sub { bottom: -0.25em; }
+
+ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
+
+dd { margin: 0 0 0 40px; }
+
+nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
+
+img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+
+svg:not(:root) { overflow: hidden; }
+
+figure { margin: 0; }
+
+form { margin: 0; }
+
+fieldset { border: 0; margin: 0; padding: 0; }
+
+label { cursor: pointer; }
+
+legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
+
+button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
+
+button, input { line-height: normal; }
+
+button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
+
+button[disabled], input[disabled] { cursor: default; }
+
+input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
+
+input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
+
+input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
+
+button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
+
+textarea { overflow: auto; vertical-align: top; resize: vertical; }
+
+input:invalid, textarea:invalid { background-color: #f0dddd; }
+
+table { border-collapse: collapse; border-spacing: 0; }
+
+td { vertical-align: top; }
+
+.clearfix, .page, .row, .page > .row, .fluid-page, .fluid-row, .fluid-page > .fluid-row, header, #main, footer, .main-column section { *zoom: 1; }
+.clearfix:after, .page:after, .row:after, .page > .row:after, .fluid-page:after, .fluid-row:after, .fluid-page > .fluid-row:after, header:after, #main:after, footer:after, .main-column section:after { content: ""; display: table; clear: both; }
+
+.clearfix, .page, .row, .page > .row, .fluid-page, .fluid-row, .fluid-page > .fluid-row, header, #main, footer, .main-column section { *zoom: 1; }
+.clearfix:after, .page:after, .row:after, .page > .row:after, .fluid-page:after, .fluid-row:after, .fluid-page > .fluid-row:after, header:after, #main:after, footer:after, .main-column section:after { content: ""; display: table; clear: both; }
+
+.page { width: 960px; margin: 0 auto; }
+
+.row { width: auto; margin: 0 -10px; }
+
+.page > .row { width: auto; margin: 0 0; }
+
+.column { margin: 0 10px; float: left; }
+
+.grid-1 { width: 60px; }
+
+.before-1 { margin-left: 90px; }
+
+.after-1 { margin-right: 90px; }
+
+.grid-2 { width: 140px; }
+
+.before-2 { margin-left: 170px; }
+
+.after-2 { margin-right: 170px; }
+
+.grid-3 { width: 220px; }
+
+.before-3 { margin-left: 250px; }
+
+.after-3 { margin-right: 250px; }
+
+.grid-4 { width: 300px; }
+
+.before-4 { margin-left: 330px; }
+
+.after-4 { margin-right: 330px; }
+
+.grid-5 { width: 380px; }
+
+.before-5 { margin-left: 410px; }
+
+.after-5 { margin-right: 410px; }
+
+.grid-6 { width: 460px; }
+
+.before-6 { margin-left: 490px; }
+
+.after-6 { margin-right: 490px; }
+
+.grid-7 { width: 540px; }
+
+.before-7 { margin-left: 570px; }
+
+.after-7 { margin-right: 570px; }
+
+.grid-8 { width: 620px; }
+
+.before-8 { margin-left: 650px; }
+
+.after-8 { margin-right: 650px; }
+
+.grid-9 { width: 700px; }
+
+.before-9 { margin-left: 730px; }
+
+.after-9 { margin-right: 730px; }
+
+.grid-10 { width: 780px; }
+
+.before-10 { margin-left: 810px; }
+
+.after-10 { margin-right: 810px; }
+
+.grid-11 { width: 860px; }
+
+.before-11 { margin-left: 890px; }
+
+.after-11 { margin-right: 890px; }
+
+.grid-12 { width: 940px; }
+
+.box { margin-bottom: 20px; }
+
+.fluid-page { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 960px; width: 100%; margin: 0 auto; }
+
+.fluid-row { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: auto; margin: 0 -1.06382979%; }
+
+.fluid-page > .fluid-row { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: auto; margin: 0 0; }
+
+.fluid-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 1.04166667%; float: left; }
+
+.fluid-1 { width: 6.25%; }
+.fluid-1 > .fluid-row { margin: 0 -16.66666667%; }
+.fluid-1 > .fluid-row > .fluid-column { margin: 0 12.5%; }
+.fluid-1 > .fluid-row > .fluid-1 { width: 75%; }
+
+.fluid-before-1 { margin-left: 9.375%; }
+
+.fluid-after-1 { margin-right: 9.375%; }
+
+.fluid-2 { width: 14.58333333%; }
+.fluid-2 > .fluid-row { margin: 0 -7.14285714%; }
+.fluid-2 > .fluid-row > .fluid-column { margin: 0 6.25%; }
+.fluid-2 > .fluid-row > .fluid-1 { width: 37.5%; }
+.fluid-2 > .fluid-row > .fluid-before-1 { margin-left: 14.58333333%; }
+.fluid-2 > .fluid-row > .fluid-after-1 { margin-right: 14.58333333%; }
+.fluid-2 > .fluid-row > .fluid-2 { width: 87.5%; }
+
+.fluid-before-2 { margin-left: 17.70833333%; }
+
+.fluid-after-2 { margin-right: 17.70833333%; }
+
+.fluid-3 { width: 22.91666667%; }
+.fluid-3 > .fluid-row { margin: 0 -4.54545455%; }
+.fluid-3 > .fluid-row > .fluid-column { margin: 0 4.16666667%; }
+.fluid-3 > .fluid-row > .fluid-1 { width: 25%; }
+.fluid-3 > .fluid-row > .fluid-before-1 { margin-left: 12.5%; }
+.fluid-3 > .fluid-row > .fluid-after-1 { margin-right: 12.5%; }
+.fluid-3 > .fluid-row > .fluid-2 { width: 58.33333333%; }
+.fluid-3 > .fluid-row > .fluid-before-2 { margin-left: 20.83333333%; }
+.fluid-3 > .fluid-row > .fluid-after-2 { margin-right: 20.83333333%; }
+.fluid-3 > .fluid-row > .fluid-3 { width: 91.66666667%; }
+
+.fluid-before-3 { margin-left: 26.04166667%; }
+
+.fluid-after-3 { margin-right: 26.04166667%; }
+
+.fluid-4 { width: 31.25%; }
+.fluid-4 > .fluid-row { margin: 0 -3.33333333%; }
+.fluid-4 > .fluid-row > .fluid-column { margin: 0 3.125%; }
+.fluid-4 > .fluid-row > .fluid-1 { width: 18.75%; }
+.fluid-4 > .fluid-row > .fluid-before-1 { margin-left: 11.45833333%; }
+.fluid-4 > .fluid-row > .fluid-after-1 { margin-right: 11.45833333%; }
+.fluid-4 > .fluid-row > .fluid-2 { width: 43.75%; }
+.fluid-4 > .fluid-row > .fluid-before-2 { margin-left: 19.79166667%; }
+.fluid-4 > .fluid-row > .fluid-after-2 { margin-right: 19.79166667%; }
+.fluid-4 > .fluid-row > .fluid-3 { width: 68.75%; }
+.fluid-4 > .fluid-row > .fluid-before-3 { margin-left: 28.125%; }
+.fluid-4 > .fluid-row > .fluid-after-3 { margin-right: 28.125%; }
+.fluid-4 > .fluid-row > .fluid-4 { width: 93.75%; }
+
+.fluid-before-4 { margin-left: 34.375%; }
+
+.fluid-after-4 { margin-right: 34.375%; }
+
+.fluid-5 { width: 39.58333333%; }
+.fluid-5 > .fluid-row { margin: 0 -2.63157895%; }
+.fluid-5 > .fluid-row > .fluid-column { margin: 0 2.5%; }
+.fluid-5 > .fluid-row > .fluid-1 { width: 15%; }
+.fluid-5 > .fluid-row > .fluid-before-1 { margin-left: 10.83333333%; }
+.fluid-5 > .fluid-row > .fluid-after-1 { margin-right: 10.83333333%; }
+.fluid-5 > .fluid-row > .fluid-2 { width: 35%; }
+.fluid-5 > .fluid-row > .fluid-before-2 { margin-left: 19.16666667%; }
+.fluid-5 > .fluid-row > .fluid-after-2 { margin-right: 19.16666667%; }
+.fluid-5 > .fluid-row > .fluid-3 { width: 55.0%; }
+.fluid-5 > .fluid-row > .fluid-before-3 { margin-left: 27.5%; }
+.fluid-5 > .fluid-row > .fluid-after-3 { margin-right: 27.5%; }
+.fluid-5 > .fluid-row > .fluid-4 { width: 75%; }
+.fluid-5 > .fluid-row > .fluid-before-4 { margin-left: 35.83333333%; }
+.fluid-5 > .fluid-row > .fluid-after-4 { margin-right: 35.83333333%; }
+.fluid-5 > .fluid-row > .fluid-5 { width: 95%; }
+
+.fluid-before-5 { margin-left: 42.70833333%; }
+
+.fluid-after-5 { margin-right: 42.70833333%; }
+
+.fluid-6 { width: 47.91666667%; }
+.fluid-6 > .fluid-row { margin: 0 -2.17391304%; }
+.fluid-6 > .fluid-row > .fluid-column { margin: 0 2.08333333%; }
+.fluid-6 > .fluid-row > .fluid-1 { width: 12.5%; }
+.fluid-6 > .fluid-row > .fluid-before-1 { margin-left: 10.41666667%; }
+.fluid-6 > .fluid-row > .fluid-after-1 { margin-right: 10.41666667%; }
+.fluid-6 > .fluid-row > .fluid-2 { width: 29.16666667%; }
+.fluid-6 > .fluid-row > .fluid-before-2 { margin-left: 18.75%; }
+.fluid-6 > .fluid-row > .fluid-after-2 { margin-right: 18.75%; }
+.fluid-6 > .fluid-row > .fluid-3 { width: 45.83333333%; }
+.fluid-6 > .fluid-row > .fluid-before-3 { margin-left: 27.08333333%; }
+.fluid-6 > .fluid-row > .fluid-after-3 { margin-right: 27.08333333%; }
+.fluid-6 > .fluid-row > .fluid-4 { width: 62.5%; }
+.fluid-6 > .fluid-row > .fluid-before-4 { margin-left: 35.41666667%; }
+.fluid-6 > .fluid-row > .fluid-after-4 { margin-right: 35.41666667%; }
+.fluid-6 > .fluid-row > .fluid-5 { width: 79.16666667%; }
+.fluid-6 > .fluid-row > .fluid-before-5 { margin-left: 43.75%; }
+.fluid-6 > .fluid-row > .fluid-after-5 { margin-right: 43.75%; }
+.fluid-6 > .fluid-row > .fluid-6 { width: 95.83333333%; }
+
+.fluid-before-6 { margin-left: 51.04166667%; }
+
+.fluid-after-6 { margin-right: 51.04166667%; }
+
+.fluid-7 { width: 56.25%; }
+.fluid-7 > .fluid-row { margin: 0 -1.85185185%; }
+.fluid-7 > .fluid-row > .fluid-column { margin: 0 1.78571429%; }
+.fluid-7 > .fluid-row > .fluid-1 { width: 10.71428571%; }
+.fluid-7 > .fluid-row > .fluid-before-1 { margin-left: 10.11904762%; }
+.fluid-7 > .fluid-row > .fluid-after-1 { margin-right: 10.11904762%; }
+.fluid-7 > .fluid-row > .fluid-2 { width: 25%; }
+.fluid-7 > .fluid-row > .fluid-before-2 { margin-left: 18.45238095%; }
+.fluid-7 > .fluid-row > .fluid-after-2 { margin-right: 18.45238095%; }
+.fluid-7 > .fluid-row > .fluid-3 { width: 39.28571429%; }
+.fluid-7 > .fluid-row > .fluid-before-3 { margin-left: 26.78571429%; }
+.fluid-7 > .fluid-row > .fluid-after-3 { margin-right: 26.78571429%; }
+.fluid-7 > .fluid-row > .fluid-4 { width: 53.57142857%; }
+.fluid-7 > .fluid-row > .fluid-before-4 { margin-left: 35.11904762%; }
+.fluid-7 > .fluid-row > .fluid-after-4 { margin-right: 35.11904762%; }
+.fluid-7 > .fluid-row > .fluid-5 { width: 67.85714286%; }
+.fluid-7 > .fluid-row > .fluid-before-5 { margin-left: 43.45238095%; }
+.fluid-7 > .fluid-row > .fluid-after-5 { margin-right: 43.45238095%; }
+.fluid-7 > .fluid-row > .fluid-6 { width: 82.14285714%; }
+.fluid-7 > .fluid-row > .fluid-before-6 { margin-left: 51.78571429%; }
+.fluid-7 > .fluid-row > .fluid-after-6 { margin-right: 51.78571429%; }
+.fluid-7 > .fluid-row > .fluid-7 { width: 96.42857143%; }
+
+.fluid-before-7 { margin-left: 59.375%; }
+
+.fluid-after-7 { margin-right: 59.375%; }
+
+.fluid-8 { width: 64.58333333%; }
+.fluid-8 > .fluid-row { margin: 0 -1.61290323%; }
+.fluid-8 > .fluid-row > .fluid-column { margin: 0 1.5625%; }
+.fluid-8 > .fluid-row > .fluid-1 { width: 9.375%; }
+.fluid-8 > .fluid-row > .fluid-before-1 { margin-left: 9.89583333%; }
+.fluid-8 > .fluid-row > .fluid-after-1 { margin-right: 9.89583333%; }
+.fluid-8 > .fluid-row > .fluid-2 { width: 21.875%; }
+.fluid-8 > .fluid-row > .fluid-before-2 { margin-left: 18.22916667%; }
+.fluid-8 > .fluid-row > .fluid-after-2 { margin-right: 18.22916667%; }
+.fluid-8 > .fluid-row > .fluid-3 { width: 34.375%; }
+.fluid-8 > .fluid-row > .fluid-before-3 { margin-left: 26.5625%; }
+.fluid-8 > .fluid-row > .fluid-after-3 { margin-right: 26.5625%; }
+.fluid-8 > .fluid-row > .fluid-4 { width: 46.875%; }
+.fluid-8 > .fluid-row > .fluid-before-4 { margin-left: 34.89583333%; }
+.fluid-8 > .fluid-row > .fluid-after-4 { margin-right: 34.89583333%; }
+.fluid-8 > .fluid-row > .fluid-5 { width: 59.375%; }
+.fluid-8 > .fluid-row > .fluid-before-5 { margin-left: 43.22916667%; }
+.fluid-8 > .fluid-row > .fluid-after-5 { margin-right: 43.22916667%; }
+.fluid-8 > .fluid-row > .fluid-6 { width: 71.875%; }
+.fluid-8 > .fluid-row > .fluid-before-6 { margin-left: 51.5625%; }
+.fluid-8 > .fluid-row > .fluid-after-6 { margin-right: 51.5625%; }
+.fluid-8 > .fluid-row > .fluid-7 { width: 84.375%; }
+.fluid-8 > .fluid-row > .fluid-before-7 { margin-left: 59.89583333%; }
+.fluid-8 > .fluid-row > .fluid-after-7 { margin-right: 59.89583333%; }
+.fluid-8 > .fluid-row > .fluid-8 { width: 96.875%; }
+
+.fluid-before-8 { margin-left: 67.70833333%; }
+
+.fluid-after-8 { margin-right: 67.70833333%; }
+
+.fluid-9 { width: 72.91666667%; }
+.fluid-9 > .fluid-row { margin: 0 -1.42857143%; }
+.fluid-9 > .fluid-row > .fluid-column { margin: 0 1.38888889%; }
+.fluid-9 > .fluid-row > .fluid-1 { width: 8.33333333%; }
+.fluid-9 > .fluid-row > .fluid-before-1 { margin-left: 9.72222222%; }
+.fluid-9 > .fluid-row > .fluid-after-1 { margin-right: 9.72222222%; }
+.fluid-9 > .fluid-row > .fluid-2 { width: 19.44444444%; }
+.fluid-9 > .fluid-row > .fluid-before-2 { margin-left: 18.05555556%; }
+.fluid-9 > .fluid-row > .fluid-after-2 { margin-right: 18.05555556%; }
+.fluid-9 > .fluid-row > .fluid-3 { width: 30.55555556%; }
+.fluid-9 > .fluid-row > .fluid-before-3 { margin-left: 26.38888889%; }
+.fluid-9 > .fluid-row > .fluid-after-3 { margin-right: 26.38888889%; }
+.fluid-9 > .fluid-row > .fluid-4 { width: 41.66666667%; }
+.fluid-9 > .fluid-row > .fluid-before-4 { margin-left: 34.72222222%; }
+.fluid-9 > .fluid-row > .fluid-after-4 { margin-right: 34.72222222%; }
+.fluid-9 > .fluid-row > .fluid-5 { width: 52.77777778%; }
+.fluid-9 > .fluid-row > .fluid-before-5 { margin-left: 43.05555556%; }
+.fluid-9 > .fluid-row > .fluid-after-5 { margin-right: 43.05555556%; }
+.fluid-9 > .fluid-row > .fluid-6 { width: 63.88888889%; }
+.fluid-9 > .fluid-row > .fluid-before-6 { margin-left: 51.38888889%; }
+.fluid-9 > .fluid-row > .fluid-after-6 { margin-right: 51.38888889%; }
+.fluid-9 > .fluid-row > .fluid-7 { width: 75%; }
+.fluid-9 > .fluid-row > .fluid-before-7 { margin-left: 59.72222222%; }
+.fluid-9 > .fluid-row > .fluid-after-7 { margin-right: 59.72222222%; }
+.fluid-9 > .fluid-row > .fluid-8 { width: 86.11111111%; }
+.fluid-9 > .fluid-row > .fluid-before-8 { margin-left: 68.05555556%; }
+.fluid-9 > .fluid-row > .fluid-after-8 { margin-right: 68.05555556%; }
+.fluid-9 > .fluid-row > .fluid-9 { width: 97.22222222%; }
+
+.fluid-before-9 { margin-left: 76.04166667%; }
+
+.fluid-after-9 { margin-right: 76.04166667%; }
+
+.fluid-10 { width: 81.25%; }
+.fluid-10 > .fluid-row { margin: 0 -1.28205128%; }
+.fluid-10 > .fluid-row > .fluid-column { margin: 0 1.25%; }
+.fluid-10 > .fluid-row > .fluid-1 { width: 7.5%; }
+.fluid-10 > .fluid-row > .fluid-before-1 { margin-left: 9.58333333%; }
+.fluid-10 > .fluid-row > .fluid-after-1 { margin-right: 9.58333333%; }
+.fluid-10 > .fluid-row > .fluid-2 { width: 17.5%; }
+.fluid-10 > .fluid-row > .fluid-before-2 { margin-left: 17.91666667%; }
+.fluid-10 > .fluid-row > .fluid-after-2 { margin-right: 17.91666667%; }
+.fluid-10 > .fluid-row > .fluid-3 { width: 27.5%; }
+.fluid-10 > .fluid-row > .fluid-before-3 { margin-left: 26.25%; }
+.fluid-10 > .fluid-row > .fluid-after-3 { margin-right: 26.25%; }
+.fluid-10 > .fluid-row > .fluid-4 { width: 37.5%; }
+.fluid-10 > .fluid-row > .fluid-before-4 { margin-left: 34.58333333%; }
+.fluid-10 > .fluid-row > .fluid-after-4 { margin-right: 34.58333333%; }
+.fluid-10 > .fluid-row > .fluid-5 { width: 47.5%; }
+.fluid-10 > .fluid-row > .fluid-before-5 { margin-left: 42.91666667%; }
+.fluid-10 > .fluid-row > .fluid-after-5 { margin-right: 42.91666667%; }
+.fluid-10 > .fluid-row > .fluid-6 { width: 57.5%; }
+.fluid-10 > .fluid-row > .fluid-before-6 { margin-left: 51.25%; }
+.fluid-10 > .fluid-row > .fluid-after-6 { margin-right: 51.25%; }
+.fluid-10 > .fluid-row > .fluid-7 { width: 67.5%; }
+.fluid-10 > .fluid-row > .fluid-before-7 { margin-left: 59.58333333%; }
+.fluid-10 > .fluid-row > .fluid-after-7 { margin-right: 59.58333333%; }
+.fluid-10 > .fluid-row > .fluid-8 { width: 77.5%; }
+.fluid-10 > .fluid-row > .fluid-before-8 { margin-left: 67.91666667%; }
+.fluid-10 > .fluid-row > .fluid-after-8 { margin-right: 67.91666667%; }
+.fluid-10 > .fluid-row > .fluid-9 { width: 87.5%; }
+.fluid-10 > .fluid-row > .fluid-before-9 { margin-left: 76.25%; }
+.fluid-10 > .fluid-row > .fluid-after-9 { margin-right: 76.25%; }
+.fluid-10 > .fluid-row > .fluid-10 { width: 97.5%; }
+
+.fluid-before-10 { margin-left: 84.375%; }
+
+.fluid-after-10 { margin-right: 84.375%; }
+
+.fluid-11 { width: 89.58333333%; }
+.fluid-11 > .fluid-row { margin: 0 -1.1627907%; }
+.fluid-11 > .fluid-row > .fluid-column { margin: 0 1.13636364%; }
+.fluid-11 > .fluid-row > .fluid-1 { width: 6.81818182%; }
+.fluid-11 > .fluid-row > .fluid-before-1 { margin-left: 9.46969697%; }
+.fluid-11 > .fluid-row > .fluid-after-1 { margin-right: 9.46969697%; }
+.fluid-11 > .fluid-row > .fluid-2 { width: 15.90909091%; }
+.fluid-11 > .fluid-row > .fluid-before-2 { margin-left: 17.8030303%; }
+.fluid-11 > .fluid-row > .fluid-after-2 { margin-right: 17.8030303%; }
+.fluid-11 > .fluid-row > .fluid-3 { width: 25%; }
+.fluid-11 > .fluid-row > .fluid-before-3 { margin-left: 26.13636364%; }
+.fluid-11 > .fluid-row > .fluid-after-3 { margin-right: 26.13636364%; }
+.fluid-11 > .fluid-row > .fluid-4 { width: 34.09090909%; }
+.fluid-11 > .fluid-row > .fluid-before-4 { margin-left: 34.46969697%; }
+.fluid-11 > .fluid-row > .fluid-after-4 { margin-right: 34.46969697%; }
+.fluid-11 > .fluid-row > .fluid-5 { width: 43.18181818%; }
+.fluid-11 > .fluid-row > .fluid-before-5 { margin-left: 42.8030303%; }
+.fluid-11 > .fluid-row > .fluid-after-5 { margin-right: 42.8030303%; }
+.fluid-11 > .fluid-row > .fluid-6 { width: 52.27272727%; }
+.fluid-11 > .fluid-row > .fluid-before-6 { margin-left: 51.13636364%; }
+.fluid-11 > .fluid-row > .fluid-after-6 { margin-right: 51.13636364%; }
+.fluid-11 > .fluid-row > .fluid-7 { width: 61.36363636%; }
+.fluid-11 > .fluid-row > .fluid-before-7 { margin-left: 59.46969697%; }
+.fluid-11 > .fluid-row > .fluid-after-7 { margin-right: 59.46969697%; }
+.fluid-11 > .fluid-row > .fluid-8 { width: 70.45454545%; }
+.fluid-11 > .fluid-row > .fluid-before-8 { margin-left: 67.8030303%; }
+.fluid-11 > .fluid-row > .fluid-after-8 { margin-right: 67.8030303%; }
+.fluid-11 > .fluid-row > .fluid-9 { width: 79.54545455%; }
+.fluid-11 > .fluid-row > .fluid-before-9 { margin-left: 76.13636364%; }
+.fluid-11 > .fluid-row > .fluid-after-9 { margin-right: 76.13636364%; }
+.fluid-11 > .fluid-row > .fluid-10 { width: 88.63636364%; }
+.fluid-11 > .fluid-row > .fluid-before-10 { margin-left: 84.46969697%; }
+.fluid-11 > .fluid-row > .fluid-after-10 { margin-right: 84.46969697%; }
+.fluid-11 > .fluid-row > .fluid-11 { width: 97.72727273%; }
+
+.fluid-before-11 { margin-left: 92.70833333%; }
+
+.fluid-after-11 { margin-right: 92.70833333%; }
+
+.fluid-12 { width: 97.91666667%; }
+.fluid-12 > .fluid-row { margin: 0 -1.06382979%; }
+.fluid-12 > .fluid-row > .fluid-column { margin: 0 1.04166667%; }
+.fluid-12 > .fluid-row > .fluid-1 { width: 6.25%; }
+.fluid-12 > .fluid-row > .fluid-before-1 { margin-left: 9.375%; }
+.fluid-12 > .fluid-row > .fluid-after-1 { margin-right: 9.375%; }
+.fluid-12 > .fluid-row > .fluid-2 { width: 14.58333333%; }
+.fluid-12 > .fluid-row > .fluid-before-2 { margin-left: 17.70833333%; }
+.fluid-12 > .fluid-row > .fluid-after-2 { margin-right: 17.70833333%; }
+.fluid-12 > .fluid-row > .fluid-3 { width: 22.91666667%; }
+.fluid-12 > .fluid-row > .fluid-before-3 { margin-left: 26.04166667%; }
+.fluid-12 > .fluid-row > .fluid-after-3 { margin-right: 26.04166667%; }
+.fluid-12 > .fluid-row > .fluid-4 { width: 31.25%; }
+.fluid-12 > .fluid-row > .fluid-before-4 { margin-left: 34.375%; }
+.fluid-12 > .fluid-row > .fluid-after-4 { margin-right: 34.375%; }
+.fluid-12 > .fluid-row > .fluid-5 { width: 39.58333333%; }
+.fluid-12 > .fluid-row > .fluid-before-5 { margin-left: 42.70833333%; }
+.fluid-12 > .fluid-row > .fluid-after-5 { margin-right: 42.70833333%; }
+.fluid-12 > .fluid-row > .fluid-6 { width: 47.91666667%; }
+.fluid-12 > .fluid-row > .fluid-before-6 { margin-left: 51.04166667%; }
+.fluid-12 > .fluid-row > .fluid-after-6 { margin-right: 51.04166667%; }
+.fluid-12 > .fluid-row > .fluid-7 { width: 56.25%; }
+.fluid-12 > .fluid-row > .fluid-before-7 { margin-left: 59.375%; }
+.fluid-12 > .fluid-row > .fluid-after-7 { margin-right: 59.375%; }
+.fluid-12 > .fluid-row > .fluid-8 { width: 64.58333333%; }
+.fluid-12 > .fluid-row > .fluid-before-8 { margin-left: 67.70833333%; }
+.fluid-12 > .fluid-row > .fluid-after-8 { margin-right: 67.70833333%; }
+.fluid-12 > .fluid-row > .fluid-9 { width: 72.91666667%; }
+.fluid-12 > .fluid-row > .fluid-before-9 { margin-left: 76.04166667%; }
+.fluid-12 > .fluid-row > .fluid-after-9 { margin-right: 76.04166667%; }
+.fluid-12 > .fluid-row > .fluid-10 { width: 81.25%; }
+.fluid-12 > .fluid-row > .fluid-before-10 { margin-left: 84.375%; }
+.fluid-12 > .fluid-row > .fluid-after-10 { margin-right: 84.375%; }
+.fluid-12 > .fluid-row > .fluid-11 { width: 89.58333333%; }
+.fluid-12 > .fluid-row > .fluid-before-11 { margin-left: 92.70833333%; }
+.fluid-12 > .fluid-row > .fluid-after-11 { margin-right: 92.70833333%; }
+
+.fluid-box { margin-bottom: 20px; }
+
+.float-left, .float-right { margin-bottom: 10px; }
+
+.float-left { float: left; margin-right: 10px; }
+
+.float-right { float: right; margin-left: 10px; }
+
+header, #main, footer { width: 960px; margin: 0 auto; }
+
+header, footer { width: 940px; }
+
+header { background-color: blue; height: 100px; }
+
+footer { background-color: #ccc; }
+
+.left-column { margin: 0 10px; float: left; width: 220px; }
+
+.main-column { margin: 0 10px; float: left; width: 700px; }
+.main-column section { width: auto; margin: 0 -10px; }
+.main-column section.intro { margin: 0; }
+.main-column article { margin: 0 10px; float: left; width: 460px; }
+.main-column aside { margin: 0 10px; float: left; width: 220px; }
+.main-column aside .box img { width: 220px; }
+
+@media only screen and (min-width: 0px) { .measure { background-color: red; }
+  header, #main, footer { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 960px; width: 100%; margin: 0 auto; }
+  header, footer { max-width: none; width: auto; margin: 0 3.125%; }
+  .left-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 3.125%; float: left; width: 93.75%; }
+  .main-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 3.125%; float: left; width: 93.75%; }
+  .main-column section { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: auto; margin: 0 -1.06382979%; }
+  .main-column section.intro { margin: 0; }
+  .main-column article { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 3.125%; float: left; width: 93.75%; }
+  .main-column article .float-left, .main-column article .float-right { margin-bottom: 3.33333333%; }
+  .main-column article .float-left { float: none; margin-right: 0; }
+  .main-column article .float-right { float: none; margin-left: 0; }
+  .main-column article img.grid-3 { width: 100%; }
+  .main-column aside { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 3.125%; float: left; width: 93.75%; }
+  .main-column aside .box img { width: 100%; } }
+@media only screen and (min-width: 320px) { .measure { background-color: orange; } }
+@media only screen and (min-width: 480px) { .measure { background-color: yellow; }
+  header, #main, footer { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 960px; width: 100%; margin: 0 auto; }
+  header, footer { max-width: none; width: auto; margin: 0 2.08333333%; }
+  .left-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 2.08333333%; float: left; width: 95.83333333%; }
+  .main-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 2.08333333%; float: left; width: 95.83333333%; }
+  .main-column section { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: auto; margin: 0 -1.06382979%; }
+  .main-column section.intro { margin: 0; }
+  .main-column article { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 2.08333333%; float: left; width: 95.83333333%; }
+  .main-column article .float-left, .main-column article .float-right { margin-bottom: 2.17391304%; }
+  .main-column article .float-left { float: left; margin-right: 2.17391304%; }
+  .main-column article .float-right { float: right; margin-left: 2.17391304%; }
+  .main-column article img.grid-3 { width: 47.82608696%; }
+  .main-column aside { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 2.08333333%; float: left; width: 95.83333333%; }
+  .main-column aside .box img { width: 100%; } }
+@media only screen and (min-width: 540px) { .measure { background-color: green; } }
+@media only screen and (min-width: 600px) { .measure { background-color: blue; color: white; }
+  header, #main, footer { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 960px; width: 100%; margin: 0 auto; }
+  header, footer { max-width: none; width: auto; margin: 0 1.5625%; }
+  .left-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 1.5625%; float: left; width: 34.375%; }
+  .main-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 1.5625%; float: left; width: 59.375%; }
+  .main-column section { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: auto; margin: 0 -1.06382979%; }
+  .main-column section.intro { margin: 0; }
+  .main-column article { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 2.5%; float: left; width: 95%; }
+  .main-column article .float-left, .main-column article .float-right { margin-bottom: 2.63157895%; }
+  .main-column article .float-left { float: left; margin-right: 2.63157895%; }
+  .main-column article .float-right { float: right; margin-left: 2.63157895%; }
+  .main-column article img.grid-3 { width: 57.89473684%; }
+  .main-column aside { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 2.5%; float: left; width: 95%; }
+  .main-column aside .box img { width: 100%; } }
+@media only screen and (min-width: 768px) { .measure { background-color: purple; color: white; }
+  header, #main, footer { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 960px; width: 100%; margin: 0 auto; }
+  header, footer { max-width: none; width: auto; margin: 0 1.38888889%; }
+  .left-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 1.38888889%; float: left; width: 30.55555556%; }
+  .main-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 1.38888889%; float: left; width: 63.88888889%; }
+  .main-column section { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: auto; margin: 0 -1.06382979%; }
+  .main-column section.intro { margin: 0; }
+  .main-column article { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 2.08333333%; float: left; width: 95.83333333%; }
+  .main-column article .float-left, .main-column article .float-right { margin-bottom: 2.17391304%; }
+  .main-column article .float-left { float: left; margin-right: 2.17391304%; }
+  .main-column article .float-right { float: right; margin-left: 2.17391304%; }
+  .main-column article img.grid-3 { width: 47.82608696%; }
+  .main-column aside { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 2.08333333%; float: left; width: 95.83333333%; }
+  .main-column aside .box img { width: 100%; } }
+@media only screen and (min-width: 800px) { .measure { background-color: blue; color: white; }
+  header, #main, footer { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 960px; width: 100%; margin: 0 auto; }
+  header, footer { max-width: none; width: auto; margin: 0 1.13636364%; }
+  .left-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 1.13636364%; float: left; width: 25%; }
+  .main-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 1.13636364%; float: left; width: 70.45454545%; }
+  .main-column section { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: auto; margin: 0 -1.06382979%; }
+  .main-column section.intro { margin: 0; }
+  .main-column article { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 1.5625%; float: left; width: 59.375%; }
+  .main-column article .float-left, .main-column article .float-right { margin-bottom: 2.63157895%; }
+  .main-column article .float-left { float: left; margin-right: 2.63157895%; }
+  .main-column article .float-right { float: right; margin-left: 2.63157895%; }
+  .main-column article img.grid-3 { width: 57.89473684%; }
+  .main-column aside { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 1.5625%; float: left; width: 34.375%; }
+  .main-column aside .box img { width: 100%; } }
+@media only screen and (min-width: 960px) { .measure { background-color: green; }
+  header, #main, footer { width: 960px; margin: 0 auto; }
+  header, footer { width: 940px; }
+  .left-column { margin: 0 10px; float: left; width: 220px; }
+  .main-column { margin: 0 10px; float: left; width: 700px; }
+  .main-column section { width: auto; margin: 0 -10px; }
+  .main-column section.intro { margin: 0; }
+  .main-column article { margin: 0 10px; float: left; width: 460px; }
+  .main-column article .float-left, .main-column article .float-right { margin-bottom: 10px; }
+  .main-column article .float-left { float: left; margin-right: 10px; }
+  .main-column article .float-right { float: right; margin-left: 10px; }
+  .main-column article img.grid-3 { width: 220px; }
+  .main-column aside { margin: 0 10px; float: left; width: 220px; }
+  .main-column aside .box img { width: 220px; } }
+@media only screen and (min-width: 992px) { .measure { background-color: yellow; } }
+@media only screen and (min-width: 1024px) { .measure { background-color: orange; } }
+@media only screen and (min-width: 1280px) { .measure { background-color: red; } }
+.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
+.ir br { display: none; }
+
+.hidden { display: none !important; visibility: hidden; }
+
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+
+.invisible { visibility: hidden; }
+
+.clearfix:before, .page:before, .row:before, .page > .row:before, .fluid-page:before, .fluid-row:before, .fluid-page > .fluid-row:before, header:before, #main:before, footer:before, .main-column section:before, .clearfix:after, .page:after, .row:after, .page > .row:after, .fluid-page:after, .fluid-row:after, .fluid-page > .fluid-row:after, header:after, #main:after, footer:after, .main-column section:after { content: ""; display: table; }
+.clearfix:after, .page:after, .row:after, .page > .row:after, .fluid-page:after, .fluid-row:after, .fluid-page > .fluid-row:after, header:after, #main:after, footer:after, .main-column section:after { clear: both; }
+.clearfix, .page, .row, .page > .row, .fluid-page, .fluid-row, .fluid-page > .fluid-row, header, #main, footer, .main-column section { *zoom: 1; }