Skip to content

Instantly share code, notes, and snippets.

@mirisuzanne

mirisuzanne/1_index.html

Created April 4, 2012 22:58
Show Gist options
  • Save mirisuzanne/2306353 to your computer and use it in GitHub Desktop.
Save mirisuzanne/2306353 to your computer and use it in GitHub Desktop.
Download ZIP
Suggested syntax for responsive Susy layouts
Raw
1_index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="stylesheets/screen.css">
</head>
<body>
<div class="container c1"></div>
<div class="container c2"></div>
<div class="container c3"></div>
<div class="container c4"></div>
</body>
</html>
Raw
2_screen.scss
// ---------------------------------------------------------------------------
// IMPORTS
@import "compass";
@import "compass/reset";
@import "susy";
@import "layout";
// ---------------------------------------------------------------------------
// TOOLS
//
// These styles aren't part of the demo, they just make it easier to see what is being done.
// +show-container is simply a wrapper for +container, +susy-grid-background, and some helpful text.
// give our containers some shape and visibility.
.container {
@include rhythm(1,2,2,1);
background: #ddf;
text-align: center;
}
// this is how we'll show what's going on at each step
@mixin show-container($text:false) {
@include container();
@include susy-grid-background();
@if $text { &::before { content: $text; display: block; } }
overflow: hidden;
}
// ---------------------------------------------------------------------------
// DEMO STARTS HERE
//
// In order to quickly demo all the available features,
// I haven't made much effort to demo a unified use-case over-all.
// Look at each change as it's own demonstration of a feature.
// There are three main features to note:
// +layout : Creates a new layout context ($total-cols).
// +at-breakpoint : Creates a new layout context at a given min-width breakpoint (with optional max-width and ie fallback).
// +container : now accepts arguments, as a shortcut for creating multiple layouts at different breakpoints.
// Let's start with a default layout of 4 columns (mobile-first style).
$total-cols: 4;
// CONTAINER #1
.c1 {
@include show-container('The default 4-column grid.');
@include at-breakpoint(30em 8) {
@include show-container('At 30em, we switch to an 8-column grid.');
}
@include at-breakpoint(60em ie) {
@include show-container('At 60em we switch to the nearest grid larger (12 columns == 61em) with ie fallback.');
}
}
// CONTAINER #2
.c2 {
@include layout(6) {
@include show-container('Override the default grid with 6 columns.');
}
@include at-breakpoint(10 ie) {
@include show-container('When we have room for 10 columns, we switch to that layout (with ie fallback).');
}
}
// CONTAINER #3
.c3 {
@include show-container('The default 4-column grid.');
@include at-breakpoint(30em 60em) {
@include show-container('Between 30em and 60em, we use the nearest grid larger than 30em.');
}
}
// CONTAINER #4
// There is a shortcut for quickly setting one container to mulitple breakpoints and layouts.
// but, for now at least, there is no way to show the grid...
.c4 {
// Apply it all at once!
@include container(4,40em ie,12);
// And the rest is just so you can see what's happening.
background: #ffb;
&::before {
content: 'shortcut for 4-col, 40em (8-col, ie fallback), and 12-col (61em).';
}
}
Raw
3_screen.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}
.container {
margin-top: 1.5em;
padding-top: 3em;
padding-bottom: 3em;
margin-bottom: 1.5em;
background: #ddf;
text-align: center;
}
.c1 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 21em;
max-width: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(4.762%, rgba(0, 0, 0, 0)), color-stop(4.762%, rgba(100, 100, 225, 0.25)), color-stop(23.81%, rgba(100, 100, 225, 0.25)), color-stop(23.81%, rgba(0, 0, 0, 0)), color-stop(28.571%, rgba(0, 0, 0, 0)), color-stop(28.571%, rgba(100, 100, 225, 0.25)), color-stop(47.619%, rgba(100, 100, 225, 0.25)), color-stop(47.619%, rgba(0, 0, 0, 0)), color-stop(52.381%, rgba(0, 0, 0, 0)), color-stop(52.381%, rgba(100, 100, 225, 0.25)), color-stop(71.429%, rgba(100, 100, 225, 0.25)), color-stop(71.429%, rgba(0, 0, 0, 0)), color-stop(76.19%, rgba(0, 0, 0, 0)), color-stop(76.19%, rgba(100, 100, 225, 0.25)), color-stop(95.238%, rgba(100, 100, 225, 0.25)), color-stop(95.238%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
overflow: hidden;
}
.c1:after {
content: "";
display: table;
clear: both;
}
.c1::before {
content: "The default 4-column grid.";
display: block;
}
@media (min-width: 30em) {
.c1 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 41em;
max-width: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(2.439%, rgba(0, 0, 0, 0)), color-stop(2.439%, rgba(100, 100, 225, 0.25)), color-stop(12.195%, rgba(100, 100, 225, 0.25)), color-stop(12.195%, rgba(0, 0, 0, 0)), color-stop(14.634%, rgba(0, 0, 0, 0)), color-stop(14.634%, rgba(100, 100, 225, 0.25)), color-stop(24.39%, rgba(100, 100, 225, 0.25)), color-stop(24.39%, rgba(0, 0, 0, 0)), color-stop(26.829%, rgba(0, 0, 0, 0)), color-stop(26.829%, rgba(100, 100, 225, 0.25)), color-stop(36.585%, rgba(100, 100, 225, 0.25)), color-stop(36.585%, rgba(0, 0, 0, 0)), color-stop(39.024%, rgba(0, 0, 0, 0)), color-stop(39.024%, rgba(100, 100, 225, 0.25)), color-stop(48.78%, rgba(100, 100, 225, 0.25)), color-stop(48.78%, rgba(0, 0, 0, 0)), color-stop(51.22%, rgba(0, 0, 0, 0)), color-stop(51.22%, rgba(100, 100, 225, 0.25)), color-stop(60.976%, rgba(100, 100, 225, 0.25)), color-stop(60.976%, rgba(0, 0, 0, 0)), color-stop(63.415%, rgba(0, 0, 0, 0)), color-stop(63.415%, rgba(100, 100, 225, 0.25)), color-stop(73.171%, rgba(100, 100, 225, 0.25)), color-stop(73.171%, rgba(0, 0, 0, 0)), color-stop(75.61%, rgba(0, 0, 0, 0)), color-stop(75.61%, rgba(100, 100, 225, 0.25)), color-stop(85.366%, rgba(100, 100, 225, 0.25)), color-stop(85.366%, rgba(0, 0, 0, 0)), color-stop(87.805%, rgba(0, 0, 0, 0)), color-stop(87.805%, rgba(100, 100, 225, 0.25)), color-stop(97.561%, rgba(100, 100, 225, 0.25)), color-stop(97.561%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 2.439%, rgba(100, 100, 225, 0.25) 2.439%, rgba(100, 100, 225, 0.25) 12.195%, rgba(0, 0, 0, 0) 12.195%, rgba(0, 0, 0, 0) 14.634%, rgba(100, 100, 225, 0.25) 14.634%, rgba(100, 100, 225, 0.25) 24.39%, rgba(0, 0, 0, 0) 24.39%, rgba(0, 0, 0, 0) 26.829%, rgba(100, 100, 225, 0.25) 26.829%, rgba(100, 100, 225, 0.25) 36.585%, rgba(0, 0, 0, 0) 36.585%, rgba(0, 0, 0, 0) 39.024%, rgba(100, 100, 225, 0.25) 39.024%, rgba(100, 100, 225, 0.25) 48.78%, rgba(0, 0, 0, 0) 48.78%, rgba(0, 0, 0, 0) 51.22%, rgba(100, 100, 225, 0.25) 51.22%, rgba(100, 100, 225, 0.25) 60.976%, rgba(0, 0, 0, 0) 60.976%, rgba(0, 0, 0, 0) 63.415%, rgba(100, 100, 225, 0.25) 63.415%, rgba(100, 100, 225, 0.25) 73.171%, rgba(0, 0, 0, 0) 73.171%, rgba(0, 0, 0, 0) 75.61%, rgba(100, 100, 225, 0.25) 75.61%, rgba(100, 100, 225, 0.25) 85.366%, rgba(0, 0, 0, 0) 85.366%, rgba(0, 0, 0, 0) 87.805%, rgba(100, 100, 225, 0.25) 87.805%, rgba(100, 100, 225, 0.25) 97.561%, rgba(0, 0, 0, 0) 97.561%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 2.439%, rgba(100, 100, 225, 0.25) 2.439%, rgba(100, 100, 225, 0.25) 12.195%, rgba(0, 0, 0, 0) 12.195%, rgba(0, 0, 0, 0) 14.634%, rgba(100, 100, 225, 0.25) 14.634%, rgba(100, 100, 225, 0.25) 24.39%, rgba(0, 0, 0, 0) 24.39%, rgba(0, 0, 0, 0) 26.829%, rgba(100, 100, 225, 0.25) 26.829%, rgba(100, 100, 225, 0.25) 36.585%, rgba(0, 0, 0, 0) 36.585%, rgba(0, 0, 0, 0) 39.024%, rgba(100, 100, 225, 0.25) 39.024%, rgba(100, 100, 225, 0.25) 48.78%, rgba(0, 0, 0, 0) 48.78%, rgba(0, 0, 0, 0) 51.22%, rgba(100, 100, 225, 0.25) 51.22%, rgba(100, 100, 225, 0.25) 60.976%, rgba(0, 0, 0, 0) 60.976%, rgba(0, 0, 0, 0) 63.415%, rgba(100, 100, 225, 0.25) 63.415%, rgba(100, 100, 225, 0.25) 73.171%, rgba(0, 0, 0, 0) 73.171%, rgba(0, 0, 0, 0) 75.61%, rgba(100, 100, 225, 0.25) 75.61%, rgba(100, 100, 225, 0.25) 85.366%, rgba(0, 0, 0, 0) 85.366%, rgba(0, 0, 0, 0) 87.805%, rgba(100, 100, 225, 0.25) 87.805%, rgba(100, 100, 225, 0.25) 97.561%, rgba(0, 0, 0, 0) 97.561%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 2.439%, rgba(100, 100, 225, 0.25) 2.439%, rgba(100, 100, 225, 0.25) 12.195%, rgba(0, 0, 0, 0) 12.195%, rgba(0, 0, 0, 0) 14.634%, rgba(100, 100, 225, 0.25) 14.634%, rgba(100, 100, 225, 0.25) 24.39%, rgba(0, 0, 0, 0) 24.39%, rgba(0, 0, 0, 0) 26.829%, rgba(100, 100, 225, 0.25) 26.829%, rgba(100, 100, 225, 0.25) 36.585%, rgba(0, 0, 0, 0) 36.585%, rgba(0, 0, 0, 0) 39.024%, rgba(100, 100, 225, 0.25) 39.024%, rgba(100, 100, 225, 0.25) 48.78%, rgba(0, 0, 0, 0) 48.78%, rgba(0, 0, 0, 0) 51.22%, rgba(100, 100, 225, 0.25) 51.22%, rgba(100, 100, 225, 0.25) 60.976%, rgba(0, 0, 0, 0) 60.976%, rgba(0, 0, 0, 0) 63.415%, rgba(100, 100, 225, 0.25) 63.415%, rgba(100, 100, 225, 0.25) 73.171%, rgba(0, 0, 0, 0) 73.171%, rgba(0, 0, 0, 0) 75.61%, rgba(100, 100, 225, 0.25) 75.61%, rgba(100, 100, 225, 0.25) 85.366%, rgba(0, 0, 0, 0) 85.366%, rgba(0, 0, 0, 0) 87.805%, rgba(100, 100, 225, 0.25) 87.805%, rgba(100, 100, 225, 0.25) 97.561%, rgba(0, 0, 0, 0) 97.561%, rgba(0, 0, 0, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 2.439%, rgba(100, 100, 225, 0.25) 2.439%, rgba(100, 100, 225, 0.25) 12.195%, rgba(0, 0, 0, 0) 12.195%, rgba(0, 0, 0, 0) 14.634%, rgba(100, 100, 225, 0.25) 14.634%, rgba(100, 100, 225, 0.25) 24.39%, rgba(0, 0, 0, 0) 24.39%, rgba(0, 0, 0, 0) 26.829%, rgba(100, 100, 225, 0.25) 26.829%, rgba(100, 100, 225, 0.25) 36.585%, rgba(0, 0, 0, 0) 36.585%, rgba(0, 0, 0, 0) 39.024%, rgba(100, 100, 225, 0.25) 39.024%, rgba(100, 100, 225, 0.25) 48.78%, rgba(0, 0, 0, 0) 48.78%, rgba(0, 0, 0, 0) 51.22%, rgba(100, 100, 225, 0.25) 51.22%, rgba(100, 100, 225, 0.25) 60.976%, rgba(0, 0, 0, 0) 60.976%, rgba(0, 0, 0, 0) 63.415%, rgba(100, 100, 225, 0.25) 63.415%, rgba(100, 100, 225, 0.25) 73.171%, rgba(0, 0, 0, 0) 73.171%, rgba(0, 0, 0, 0) 75.61%, rgba(100, 100, 225, 0.25) 75.61%, rgba(100, 100, 225, 0.25) 85.366%, rgba(0, 0, 0, 0) 85.366%, rgba(0, 0, 0, 0) 87.805%, rgba(100, 100, 225, 0.25) 87.805%, rgba(100, 100, 225, 0.25) 97.561%, rgba(0, 0, 0, 0) 97.561%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 2.439%, rgba(100, 100, 225, 0.25) 2.439%, rgba(100, 100, 225, 0.25) 12.195%, rgba(0, 0, 0, 0) 12.195%, rgba(0, 0, 0, 0) 14.634%, rgba(100, 100, 225, 0.25) 14.634%, rgba(100, 100, 225, 0.25) 24.39%, rgba(0, 0, 0, 0) 24.39%, rgba(0, 0, 0, 0) 26.829%, rgba(100, 100, 225, 0.25) 26.829%, rgba(100, 100, 225, 0.25) 36.585%, rgba(0, 0, 0, 0) 36.585%, rgba(0, 0, 0, 0) 39.024%, rgba(100, 100, 225, 0.25) 39.024%, rgba(100, 100, 225, 0.25) 48.78%, rgba(0, 0, 0, 0) 48.78%, rgba(0, 0, 0, 0) 51.22%, rgba(100, 100, 225, 0.25) 51.22%, rgba(100, 100, 225, 0.25) 60.976%, rgba(0, 0, 0, 0) 60.976%, rgba(0, 0, 0, 0) 63.415%, rgba(100, 100, 225, 0.25) 63.415%, rgba(100, 100, 225, 0.25) 73.171%, rgba(0, 0, 0, 0) 73.171%, rgba(0, 0, 0, 0) 75.61%, rgba(100, 100, 225, 0.25) 75.61%, rgba(100, 100, 225, 0.25) 85.366%, rgba(0, 0, 0, 0) 85.366%, rgba(0, 0, 0, 0) 87.805%, rgba(100, 100, 225, 0.25) 87.805%, rgba(100, 100, 225, 0.25) 97.561%, rgba(0, 0, 0, 0) 97.561%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
overflow: hidden;
}
.c1:after {
content: "";
display: table;
clear: both;
}
.c1::before {
content: "At 30em, we switch to an 8-column grid.";
display: block;
}
}
@media (min-width: 60em) {
.c1 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 61em;
max-width: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(1.639%, rgba(0, 0, 0, 0)), color-stop(1.639%, rgba(100, 100, 225, 0.25)), color-stop(8.197%, rgba(100, 100, 225, 0.25)), color-stop(8.197%, rgba(0, 0, 0, 0)), color-stop(9.836%, rgba(0, 0, 0, 0)), color-stop(9.836%, rgba(100, 100, 225, 0.25)), color-stop(16.393%, rgba(100, 100, 225, 0.25)), color-stop(16.393%, rgba(0, 0, 0, 0)), color-stop(18.033%, rgba(0, 0, 0, 0)), color-stop(18.033%, rgba(100, 100, 225, 0.25)), color-stop(24.59%, rgba(100, 100, 225, 0.25)), color-stop(24.59%, rgba(0, 0, 0, 0)), color-stop(26.23%, rgba(0, 0, 0, 0)), color-stop(26.23%, rgba(100, 100, 225, 0.25)), color-stop(32.787%, rgba(100, 100, 225, 0.25)), color-stop(32.787%, rgba(0, 0, 0, 0)), color-stop(34.426%, rgba(0, 0, 0, 0)), color-stop(34.426%, rgba(100, 100, 225, 0.25)), color-stop(40.984%, rgba(100, 100, 225, 0.25)), color-stop(40.984%, rgba(0, 0, 0, 0)), color-stop(42.623%, rgba(0, 0, 0, 0)), color-stop(42.623%, rgba(100, 100, 225, 0.25)), color-stop(49.18%, rgba(100, 100, 225, 0.25)), color-stop(49.18%, rgba(0, 0, 0, 0)), color-stop(50.82%, rgba(0, 0, 0, 0)), color-stop(50.82%, rgba(100, 100, 225, 0.25)), color-stop(57.377%, rgba(100, 100, 225, 0.25)), color-stop(57.377%, rgba(0, 0, 0, 0)), color-stop(59.016%, rgba(0, 0, 0, 0)), color-stop(59.016%, rgba(100, 100, 225, 0.25)), color-stop(65.574%, rgba(100, 100, 225, 0.25)), color-stop(65.574%, rgba(0, 0, 0, 0)), color-stop(67.213%, rgba(0, 0, 0, 0)), color-stop(67.213%, rgba(100, 100, 225, 0.25)), color-stop(73.77%, rgba(100, 100, 225, 0.25)), color-stop(73.77%, rgba(0, 0, 0, 0)), color-stop(75.41%, rgba(0, 0, 0, 0)), color-stop(75.41%, rgba(100, 100, 225, 0.25)), color-stop(81.967%, rgba(100, 100, 225, 0.25)), color-stop(81.967%, rgba(0, 0, 0, 0)), color-stop(83.607%, rgba(0, 0, 0, 0)), color-stop(83.607%, rgba(100, 100, 225, 0.25)), color-stop(90.164%, rgba(100, 100, 225, 0.25)), color-stop(90.164%, rgba(0, 0, 0, 0)), color-stop(91.803%, rgba(0, 0, 0, 0)), color-stop(91.803%, rgba(100, 100, 225, 0.25)), color-stop(98.361%, rgba(100, 100, 225, 0.25)), color-stop(98.361%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
overflow: hidden;
}
.c1:after {
content: "";
display: table;
clear: both;
}
.c1::before {
content: "At 60em we switch to the nearest grid larger (12 columns == 61em) with ie fallback.";
display: block;
}
}
.ie .c1 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 61em;
max-width: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(1.639%, rgba(0, 0, 0, 0)), color-stop(1.639%, rgba(100, 100, 225, 0.25)), color-stop(8.197%, rgba(100, 100, 225, 0.25)), color-stop(8.197%, rgba(0, 0, 0, 0)), color-stop(9.836%, rgba(0, 0, 0, 0)), color-stop(9.836%, rgba(100, 100, 225, 0.25)), color-stop(16.393%, rgba(100, 100, 225, 0.25)), color-stop(16.393%, rgba(0, 0, 0, 0)), color-stop(18.033%, rgba(0, 0, 0, 0)), color-stop(18.033%, rgba(100, 100, 225, 0.25)), color-stop(24.59%, rgba(100, 100, 225, 0.25)), color-stop(24.59%, rgba(0, 0, 0, 0)), color-stop(26.23%, rgba(0, 0, 0, 0)), color-stop(26.23%, rgba(100, 100, 225, 0.25)), color-stop(32.787%, rgba(100, 100, 225, 0.25)), color-stop(32.787%, rgba(0, 0, 0, 0)), color-stop(34.426%, rgba(0, 0, 0, 0)), color-stop(34.426%, rgba(100, 100, 225, 0.25)), color-stop(40.984%, rgba(100, 100, 225, 0.25)), color-stop(40.984%, rgba(0, 0, 0, 0)), color-stop(42.623%, rgba(0, 0, 0, 0)), color-stop(42.623%, rgba(100, 100, 225, 0.25)), color-stop(49.18%, rgba(100, 100, 225, 0.25)), color-stop(49.18%, rgba(0, 0, 0, 0)), color-stop(50.82%, rgba(0, 0, 0, 0)), color-stop(50.82%, rgba(100, 100, 225, 0.25)), color-stop(57.377%, rgba(100, 100, 225, 0.25)), color-stop(57.377%, rgba(0, 0, 0, 0)), color-stop(59.016%, rgba(0, 0, 0, 0)), color-stop(59.016%, rgba(100, 100, 225, 0.25)), color-stop(65.574%, rgba(100, 100, 225, 0.25)), color-stop(65.574%, rgba(0, 0, 0, 0)), color-stop(67.213%, rgba(0, 0, 0, 0)), color-stop(67.213%, rgba(100, 100, 225, 0.25)), color-stop(73.77%, rgba(100, 100, 225, 0.25)), color-stop(73.77%, rgba(0, 0, 0, 0)), color-stop(75.41%, rgba(0, 0, 0, 0)), color-stop(75.41%, rgba(100, 100, 225, 0.25)), color-stop(81.967%, rgba(100, 100, 225, 0.25)), color-stop(81.967%, rgba(0, 0, 0, 0)), color-stop(83.607%, rgba(0, 0, 0, 0)), color-stop(83.607%, rgba(100, 100, 225, 0.25)), color-stop(90.164%, rgba(100, 100, 225, 0.25)), color-stop(90.164%, rgba(0, 0, 0, 0)), color-stop(91.803%, rgba(0, 0, 0, 0)), color-stop(91.803%, rgba(100, 100, 225, 0.25)), color-stop(98.361%, rgba(100, 100, 225, 0.25)), color-stop(98.361%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
overflow: hidden;
}
.ie .c1:after {
content: "";
display: table;
clear: both;
}
.ie .c1::before {
content: "At 60em we switch to the nearest grid larger (12 columns == 61em) with ie fallback.";
display: block;
}
.c2 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 31em;
max-width: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(3.226%, rgba(0, 0, 0, 0)), color-stop(3.226%, rgba(100, 100, 225, 0.25)), color-stop(16.129%, rgba(100, 100, 225, 0.25)), color-stop(16.129%, rgba(0, 0, 0, 0)), color-stop(19.355%, rgba(0, 0, 0, 0)), color-stop(19.355%, rgba(100, 100, 225, 0.25)), color-stop(32.258%, rgba(100, 100, 225, 0.25)), color-stop(32.258%, rgba(0, 0, 0, 0)), color-stop(35.484%, rgba(0, 0, 0, 0)), color-stop(35.484%, rgba(100, 100, 225, 0.25)), color-stop(48.387%, rgba(100, 100, 225, 0.25)), color-stop(48.387%, rgba(0, 0, 0, 0)), color-stop(51.613%, rgba(0, 0, 0, 0)), color-stop(51.613%, rgba(100, 100, 225, 0.25)), color-stop(64.516%, rgba(100, 100, 225, 0.25)), color-stop(64.516%, rgba(0, 0, 0, 0)), color-stop(67.742%, rgba(0, 0, 0, 0)), color-stop(67.742%, rgba(100, 100, 225, 0.25)), color-stop(80.645%, rgba(100, 100, 225, 0.25)), color-stop(80.645%, rgba(0, 0, 0, 0)), color-stop(83.871%, rgba(0, 0, 0, 0)), color-stop(83.871%, rgba(100, 100, 225, 0.25)), color-stop(96.774%, rgba(100, 100, 225, 0.25)), color-stop(96.774%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
overflow: hidden;
}
.c2:after {
content: "";
display: table;
clear: both;
}
.c2::before {
content: "Override the default grid with 6 columns.";
display: block;
}
@media (min-width: 51em) {
.c2 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 51em;
max-width: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(1.961%, rgba(0, 0, 0, 0)), color-stop(1.961%, rgba(100, 100, 225, 0.25)), color-stop(9.804%, rgba(100, 100, 225, 0.25)), color-stop(9.804%, rgba(0, 0, 0, 0)), color-stop(11.765%, rgba(0, 0, 0, 0)), color-stop(11.765%, rgba(100, 100, 225, 0.25)), color-stop(19.608%, rgba(100, 100, 225, 0.25)), color-stop(19.608%, rgba(0, 0, 0, 0)), color-stop(21.569%, rgba(0, 0, 0, 0)), color-stop(21.569%, rgba(100, 100, 225, 0.25)), color-stop(29.412%, rgba(100, 100, 225, 0.25)), color-stop(29.412%, rgba(0, 0, 0, 0)), color-stop(31.373%, rgba(0, 0, 0, 0)), color-stop(31.373%, rgba(100, 100, 225, 0.25)), color-stop(39.216%, rgba(100, 100, 225, 0.25)), color-stop(39.216%, rgba(0, 0, 0, 0)), color-stop(41.176%, rgba(0, 0, 0, 0)), color-stop(41.176%, rgba(100, 100, 225, 0.25)), color-stop(49.02%, rgba(100, 100, 225, 0.25)), color-stop(49.02%, rgba(0, 0, 0, 0)), color-stop(50.98%, rgba(0, 0, 0, 0)), color-stop(50.98%, rgba(100, 100, 225, 0.25)), color-stop(58.824%, rgba(100, 100, 225, 0.25)), color-stop(58.824%, rgba(0, 0, 0, 0)), color-stop(60.784%, rgba(0, 0, 0, 0)), color-stop(60.784%, rgba(100, 100, 225, 0.25)), color-stop(68.627%, rgba(100, 100, 225, 0.25)), color-stop(68.627%, rgba(0, 0, 0, 0)), color-stop(70.588%, rgba(0, 0, 0, 0)), color-stop(70.588%, rgba(100, 100, 225, 0.25)), color-stop(78.431%, rgba(100, 100, 225, 0.25)), color-stop(78.431%, rgba(0, 0, 0, 0)), color-stop(80.392%, rgba(0, 0, 0, 0)), color-stop(80.392%, rgba(100, 100, 225, 0.25)), color-stop(88.235%, rgba(100, 100, 225, 0.25)), color-stop(88.235%, rgba(0, 0, 0, 0)), color-stop(90.196%, rgba(0, 0, 0, 0)), color-stop(90.196%, rgba(100, 100, 225, 0.25)), color-stop(98.039%, rgba(100, 100, 225, 0.25)), color-stop(98.039%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
overflow: hidden;
}
.c2:after {
content: "";
display: table;
clear: both;
}
.c2::before {
content: "When we have room for 10 columns, we switch to that layout (with ie fallback).";
display: block;
}
}
.ie .c2 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 51em;
max-width: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(1.961%, rgba(0, 0, 0, 0)), color-stop(1.961%, rgba(100, 100, 225, 0.25)), color-stop(9.804%, rgba(100, 100, 225, 0.25)), color-stop(9.804%, rgba(0, 0, 0, 0)), color-stop(11.765%, rgba(0, 0, 0, 0)), color-stop(11.765%, rgba(100, 100, 225, 0.25)), color-stop(19.608%, rgba(100, 100, 225, 0.25)), color-stop(19.608%, rgba(0, 0, 0, 0)), color-stop(21.569%, rgba(0, 0, 0, 0)), color-stop(21.569%, rgba(100, 100, 225, 0.25)), color-stop(29.412%, rgba(100, 100, 225, 0.25)), color-stop(29.412%, rgba(0, 0, 0, 0)), color-stop(31.373%, rgba(0, 0, 0, 0)), color-stop(31.373%, rgba(100, 100, 225, 0.25)), color-stop(39.216%, rgba(100, 100, 225, 0.25)), color-stop(39.216%, rgba(0, 0, 0, 0)), color-stop(41.176%, rgba(0, 0, 0, 0)), color-stop(41.176%, rgba(100, 100, 225, 0.25)), color-stop(49.02%, rgba(100, 100, 225, 0.25)), color-stop(49.02%, rgba(0, 0, 0, 0)), color-stop(50.98%, rgba(0, 0, 0, 0)), color-stop(50.98%, rgba(100, 100, 225, 0.25)), color-stop(58.824%, rgba(100, 100, 225, 0.25)), color-stop(58.824%, rgba(0, 0, 0, 0)), color-stop(60.784%, rgba(0, 0, 0, 0)), color-stop(60.784%, rgba(100, 100, 225, 0.25)), color-stop(68.627%, rgba(100, 100, 225, 0.25)), color-stop(68.627%, rgba(0, 0, 0, 0)), color-stop(70.588%, rgba(0, 0, 0, 0)), color-stop(70.588%, rgba(100, 100, 225, 0.25)), color-stop(78.431%, rgba(100, 100, 225, 0.25)), color-stop(78.431%, rgba(0, 0, 0, 0)), color-stop(80.392%, rgba(0, 0, 0, 0)), color-stop(80.392%, rgba(100, 100, 225, 0.25)), color-stop(88.235%, rgba(100, 100, 225, 0.25)), color-stop(88.235%, rgba(0, 0, 0, 0)), color-stop(90.196%, rgba(0, 0, 0, 0)), color-stop(90.196%, rgba(100, 100, 225, 0.25)), color-stop(98.039%, rgba(100, 100, 225, 0.25)), color-stop(98.039%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
overflow: hidden;
}
.ie .c2:after {
content: "";
display: table;
clear: both;
}
.ie .c2::before {
content: "When we have room for 10 columns, we switch to that layout (with ie fallback).";
display: block;
}
.c3 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 21em;
max-width: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(4.762%, rgba(0, 0, 0, 0)), color-stop(4.762%, rgba(100, 100, 225, 0.25)), color-stop(23.81%, rgba(100, 100, 225, 0.25)), color-stop(23.81%, rgba(0, 0, 0, 0)), color-stop(28.571%, rgba(0, 0, 0, 0)), color-stop(28.571%, rgba(100, 100, 225, 0.25)), color-stop(47.619%, rgba(100, 100, 225, 0.25)), color-stop(47.619%, rgba(0, 0, 0, 0)), color-stop(52.381%, rgba(0, 0, 0, 0)), color-stop(52.381%, rgba(100, 100, 225, 0.25)), color-stop(71.429%, rgba(100, 100, 225, 0.25)), color-stop(71.429%, rgba(0, 0, 0, 0)), color-stop(76.19%, rgba(0, 0, 0, 0)), color-stop(76.19%, rgba(100, 100, 225, 0.25)), color-stop(95.238%, rgba(100, 100, 225, 0.25)), color-stop(95.238%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
overflow: hidden;
}
.c3:after {
content: "";
display: table;
clear: both;
}
.c3::before {
content: "The default 4-column grid.";
display: block;
}
@media (min-width: 30em) and (max-width: 60em) {
.c3 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 31em;
max-width: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(3.226%, rgba(0, 0, 0, 0)), color-stop(3.226%, rgba(100, 100, 225, 0.25)), color-stop(16.129%, rgba(100, 100, 225, 0.25)), color-stop(16.129%, rgba(0, 0, 0, 0)), color-stop(19.355%, rgba(0, 0, 0, 0)), color-stop(19.355%, rgba(100, 100, 225, 0.25)), color-stop(32.258%, rgba(100, 100, 225, 0.25)), color-stop(32.258%, rgba(0, 0, 0, 0)), color-stop(35.484%, rgba(0, 0, 0, 0)), color-stop(35.484%, rgba(100, 100, 225, 0.25)), color-stop(48.387%, rgba(100, 100, 225, 0.25)), color-stop(48.387%, rgba(0, 0, 0, 0)), color-stop(51.613%, rgba(0, 0, 0, 0)), color-stop(51.613%, rgba(100, 100, 225, 0.25)), color-stop(64.516%, rgba(100, 100, 225, 0.25)), color-stop(64.516%, rgba(0, 0, 0, 0)), color-stop(67.742%, rgba(0, 0, 0, 0)), color-stop(67.742%, rgba(100, 100, 225, 0.25)), color-stop(80.645%, rgba(100, 100, 225, 0.25)), color-stop(80.645%, rgba(0, 0, 0, 0)), color-stop(83.871%, rgba(0, 0, 0, 0)), color-stop(83.871%, rgba(100, 100, 225, 0.25)), color-stop(96.774%, rgba(100, 100, 225, 0.25)), color-stop(96.774%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
overflow: hidden;
}
.c3:after {
content: "";
display: table;
clear: both;
}
.c3::before {
content: "Between 30em and 60em, we use the nearest grid larger than 30em.";
display: block;
}
}
.c4 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 21em;
max-width: 100%;
background: #ffb;
}
.c4:after {
content: "";
display: table;
clear: both;
}
@media (min-width: 40em) {
.c4 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 41em;
max-width: 100%;
}
.c4:after {
content: "";
display: table;
clear: both;
}
}
.ie .c4 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 41em;
max-width: 100%;
}
.ie .c4:after {
content: "";
display: table;
clear: both;
}
@media (min-width: 61em) {
.c4 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 61em;
max-width: 100%;
}
.c4:after {
content: "";
display: table;
clear: both;
}
}
.c4::before {
content: 'shortcut for 4-col, 40em (8-col, ie fallback), and 12-col (61em).';
}
@mirisuzanne
Copy link
Author

With the amount of rounding we would have to do, I don't really see that being easier to understand. I would rather push people to pay attention to their column count, and know what is actually happening with their layout.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment