diff options
Diffstat (limited to 'sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates')
33 files changed, 1460 insertions, 0 deletions
diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/_init.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/_init.scss new file mode 100644 index 000000000..66a071b4c --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/_init.scss @@ -0,0 +1,21 @@ +// +// @file +// This file sets up all our variables and load all the modules we need for all +// generated CSS in this project. To use it, simply: @import "init"; +// + +// Legacy browser variables for Compass. +$legacy-support-for-ie6 : false; +$legacy-support-for-ie7 : false; + +// Set up Zen Grids. +$zen-column-count : 1; +$zen-gutter-width : 20px; +$zen-auto-include-item-base : false; + +// +// Import our modules. +// +@import "zen"; +@import "zen/background"; +@import "visually-hidden"; diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/_layout.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/_layout.scss new file mode 100644 index 000000000..dfa7bf426 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/_layout.scss @@ -0,0 +1,117 @@ +/** + * @file + * Layout styles. + * + * We use example breakpoints of 444px, 666px, 777px, 999px and 1111px. The + * right breakpoints to use for your site depend on your content. + */ + +.centered { + @include zen-grid-background(); + padding: { + top: 1.5em; + bottom: 1.5em; + } + margin: { + left: auto; + right: auto; + } + max-width: 1111px; +} + +/* Set the shared properties for all grid items. */ +%grid-item, +.grid-item { + @include zen-grid-item-base(); +} + +/* Set the container for our grid items. */ +.main { + @include zen-grid-container(); +} + +/* Horizontal navigation bar */ +@media all and (min-width: 444px) { + $zen-column-count: 1; + $navbar-height: 5em; + + .main { + padding-top: $navbar-height; + } + .grid-item__menu { + @include zen-grid-item(1, 1); + margin-top: -$navbar-height; + height: $navbar-height; + } +} + +@media all and (min-width: 444px) and (max-width: 665px) { + $zen-column-count: 2; + + .centered { + @include zen-grid-background(); + } + .grid-item__content { + @include zen-grid-item(2, 1); + } + .grid-item__aside1 { + @include zen-clear(); // Clear left-floated elements (.grid-item__content) + @include zen-grid-item(1, 1); + } + .grid-item__aside2 { + @include zen-grid-item(1, 2); + } +} + +@media all and (min-width: 666px) and (max-width: 776px) { + $zen-column-count: 3; + + .centered { + @include zen-grid-background(); + } + .grid-item__content { + @include zen-grid-item(2, 1); + } + .grid-item__aside1 { + @include zen-grid-item(1, 1, right); // Position from the right + } + .grid-item__aside2 { + @include zen-clear(); // Clear left-floated elements (.grid-item__content) + @include zen-grid-item(2, 1); + } +} + +@media all and (min-width: 777px) and (max-width: 998px) { + $zen-column-count: 3; + + .centered { + @include zen-grid-background(); + } + .grid-item__content { + @include zen-grid-item(2, 1); + } + .grid-item__aside1 { + @include zen-grid-item(1, 1, right); // Position from the right + } + .grid-item__aside2 { + @include zen-clear(right); // Clear right-floated elements (.grid-item__aside1) + @include zen-grid-item(1, 1, right); + } +} + +@media all and (min-width: 999px) { + $zen-column-count: 5; + + .centered { + @include zen-grid-background(); + } + .grid-item__content { + @include zen-grid-item(3, 2); + } + .grid-item__aside1 { + @include zen-grid-item(1, 1); + } + .grid-item__aside2 { + @include zen-grid-item(1, 5); + } +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/_modules.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/_modules.scss new file mode 100644 index 000000000..19a5213dc --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/_modules.scss @@ -0,0 +1,78 @@ +/** + * @file + * Modular styles. + */ + + +html { + font-size: 16px; + line-height: 1.5em; +} + +p { + margin: { + top: 1.5em; + bottom: 1.5em; + } +} + +/* Skip link styling */ +.skip-link { + margin: 0; +} +.skip-link__link, +.skip-link__link:visited { + display: block; + width: 100%; + padding: 2px 0 3px 0; + text-align: center; + background-color: #666; + color: #fff; +} +/* The skip-link link will be completely hidden until a user tabs to the link. */ +@media all and (min-width: 444px) { + .skip-link__link { + @include visually-focusable(); + } +} + +/* Set a consistent padding around all containers */ +.header, +.footer { + @extend %grid-item; +} +.grid-item, +.footer { + padding-top: 1.5em; +} + +/* Source-order meta info */ +header { + h1, + h2 { + display: inline; + } + p { + display: inline; + text-transform: uppercase; + font-size: 0.8em; + color: #c00; + } +} + +.pull-quote { + $font-size: 1.2em; + + @include zen-float(); + @include zen-grid-flow-item(1, 2); + @media all and (min-width: 999px) { + @include zen-grid-flow-item(1, 3); + } + margin: { + top: 1em*(1.5em/$font-size); + } + font-size: $font-size; + line-height: 1em*(1.5em/$font-size); + font-weight: bold; + font-style: italic; +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/_visually-hidden.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/_visually-hidden.scss new file mode 100644 index 000000000..a03776778 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/_visually-hidden.scss @@ -0,0 +1,51 @@ +// +// @file +// Accessibility features. +// + +// As defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility +@mixin visually-hidden { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax. + } + clip: rect(1px, 1px, 1px, 1px); +} + +// Turns off the visually-hidden effect. +@mixin visually-hidden-off { + position: static !important; + clip: auto; + height: auto; + width: auto; + overflow: auto; +} + +// Makes an element visually hidden, except when it receives focus. +@mixin visually-focusable { + @include visually-hidden(); + + &:active, + &:focus { + @include visually-hidden-off(); + } +} + +// Placeholder styles for use with @extend. +%visually-hidden { + @include visually-hidden(); +} +%visually-hidden-off { + @include visually-hidden-off(); +} +%visually-focusable { + @extend %visually-hidden; + + &:active, + &:focus { + @extend %visually-hidden-off; + } +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/example.html b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/example.html new file mode 100644 index 000000000..0fd31baa0 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/example.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Zen Grids: sample usage</title> + <link rel="stylesheet" href="stylesheets/styles.css" media="all"> +</head> +<body> + +<p class="skip-link"> +<a href="#main-menu" class="skip-link__link">Jump to main menu</a> +</p> + +<div class="centered"> + + <header class="header"> + <h1 class="header__title">Zen Grids: sample usage</h1> + </header> + + <div class="main"> + + <article class="grid-item grid-item__content" role="main"> + <header> + <h1>Main content</h1> + <p>Source order: 1</p> + </header> + <aside class="pull-quote">‘There’s no such thing!’</aside> + <p>Alice did not quite know what to say to this: so she helped herself to some tea and bread-and-butter, and then turned to the Dormouse, and repeated her question. ‘Why did they live at the bottom of a well?’</p> + <p>The Dormouse again took a minute or two to think about it, and then said, ‘It was a treacle-well.’</p> + <p>‘There’s no such thing!’ Alice was beginning very angrily, but the Hatter and the March Hare went ‘Sh! sh!’ and the Dormouse sulkily remarked, ‘If you can’t be civil, you’d better finish the story for yourself.’</p> + <p>‘No, please go on!’ Alice said very humbly; ‘I won’t interrupt again. I dare say there may be ONE.’</p> + </article> + + <nav class="grid-item grid-item__menu" role="navigation" id="main-menu"> + <header> + <h2>Menu</h2> + <p>Source order: 2</p> + </header> + <a href="#">Alice</a> ★ + <a href="#">Mad Hatter</a> ★ + <a href="#">The Queen</a> ★ + <a href="#">Tom Petty</a> + </nav> + + <aside class="grid-item grid-item__aside1"> + <header> + <h2>Aside</h2> + <p>Source order: 3</p> + </header> + <p>‘Have some wine,’ the March Hare said in an encouraging tone.</p> + </aside> + + <aside class="grid-item grid-item__aside2"> + <header> + <h2>Aside</h2> + <p>Source order: 4</p> + </header> + <p>‘Please would you tell me,’ said Alice, a little timidly, for she was not quite sure whether it was good manners for her to speak first, ‘why your cat grins like that?’</p> + <p>‘It’s a Cheshire cat,’ said the Duchess, ‘and that’s why. Pig!’</p> + </aside> + + </div> + + <footer class="footer"> + <small>© 2013. The small print.</small> + </footer> + +</div> + +</body> +</html> diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/manifest.rb b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/manifest.rb new file mode 100644 index 000000000..928eb5f10 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/manifest.rb @@ -0,0 +1,24 @@ +description "The Zen Grids system." + +stylesheet '_init.scss', :media => 'all' +stylesheet '_layout.scss', :media => 'all' +stylesheet '_modules.scss', :media => 'all' +stylesheet '_visually-hidden.scss', :media => 'all' +stylesheet 'styles.scss', :media => 'all' + +html 'example.html' + +help %Q{ +Zen Grids is an intuitive, flexible grid system that leverages the natural source order of your content to make it easier to create fluid responsive designs. With an easy-to-use Sass mixin set, the Zen Grids system can be applied to an infinite number of layouts, including responsive, adaptive, fluid and fixed-width layouts. To learn more, visit: + + http://zengrids.com +} + +welcome_message %Q{ +You rock! The Zen Grids system is now installed on your computer. Go check out +how to use the system at: + + http://zengrids.com + +It's easy! +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/styles.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/styles.scss new file mode 100644 index 000000000..8e52c5268 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/styles.scss @@ -0,0 +1,6 @@ +// Import the initialization partial. +@import "init"; + +// Aggregate all the stylesheets into one file. +@import "layout"; +@import "modules"; diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/README.txt b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/README.txt new file mode 100644 index 000000000..2efa8cd19 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/README.txt @@ -0,0 +1,16 @@ +UNIT TESTS FOR ZEN GRIDS +------------------------ + +To run the unit tests for Zen Grids: + +1. Create a "tests" Compass project using the unit-tests pattern: + + compass create tests -r zen-grids --using=zen-grids/unit-tests + +2. From inside the "tests" project, compare the compiled stylesheets to the + previous unit test results in the test-results directory: + + diff -r test-results/ stylesheets/ + + If the unit tests were successful, the above command should report no + differences. diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/manifest.rb b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/manifest.rb new file mode 100644 index 000000000..3369eff2e --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/manifest.rb @@ -0,0 +1,39 @@ +description "Unit tests for the Zen Grids system." + +stylesheet 'sass/function-zen-direction-flip.scss', :media => 'all', :to => 'function-zen-direction-flip.scss' +stylesheet 'sass/function-zen-grid-item-width.scss', :media => 'all', :to => 'function-zen-grid-item-width.scss' +stylesheet 'sass/function-zen-half-gutter.scss', :media => 'all', :to => 'function-zen-half-gutter.scss' +stylesheet 'sass/function-zen-unit-width.scss', :media => 'all', :to => 'function-zen-unit-width.scss' +stylesheet 'sass/zen-clear.scss', :media => 'all', :to => 'zen-clear.scss' +stylesheet 'sass/zen-float.scss', :media => 'all', :to => 'zen-float.scss' +stylesheet 'sass/zen-grid-background.scss', :media => 'all', :to => 'zen-grid-background.scss' +stylesheet 'sass/zen-grid-container.scss', :media => 'all', :to => 'zen-grid-container.scss' +stylesheet 'sass/zen-grid-flow-item.scss', :media => 'all', :to => 'zen-grid-flow-item.scss' +stylesheet 'sass/zen-grid-item-base.scss', :media => 'all', :to => 'zen-grid-item-base.scss' +stylesheet 'sass/zen-grid-item.scss', :media => 'all', :to => 'zen-grid-item.scss' +stylesheet 'sass/zen-nested-container.scss', :media => 'all', :to => 'zen-nested-container.scss' + +file 'test-results/function-zen-direction-flip.css' +file 'test-results/function-zen-grid-item-width.css' +file 'test-results/function-zen-half-gutter.css' +file 'test-results/function-zen-unit-width.css' +file 'test-results/zen-clear.css' +file 'test-results/zen-float.css' +file 'test-results/zen-grid-background.css' +file 'test-results/zen-grid-container.css' +file 'test-results/zen-grid-flow-item.css' +file 'test-results/zen-grid-item-base.css' +file 'test-results/zen-grid-item.css' +file 'test-results/zen-nested-container.css' + +file 'README.txt' + +help %Q{ +To run the unit tests, simply run "compass compile" and compare the generated +CSS to those in the results directory. + diff -r results css +} + +welcome_message %Q{ +You rock! The unit tests for the Zen Grids system are now installed. +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/function-zen-direction-flip.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/function-zen-direction-flip.scss new file mode 100644 index 000000000..26d9cbb02 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/function-zen-direction-flip.scss @@ -0,0 +1,23 @@ +/** + * @file + * Test zen-direction-flip() + */ + +@import "zen"; + +#test-zen-direction-flip { + /* Test zen-direction-flip(left) */ + float: zen-direction-flip(left); + + /* Test zen-direction-flip(right) */ + float: zen-direction-flip(right); + + /* Test zen-direction-flip(both) */ + float: zen-direction-flip(both); + + /* Test zen-direction-flip(none) */ + float: zen-direction-flip(none); + + /* Test zen-direction-flip(invalid) */ + float: zen-direction-flip(invalid); +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/function-zen-grid-item-width.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/function-zen-grid-item-width.scss new file mode 100644 index 000000000..59a69d315 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/function-zen-grid-item-width.scss @@ -0,0 +1,38 @@ +/** + * @file + * Test zen-grid-item-width() + */ + +@import "zen"; + +#test-zen-grid-item-width { + /* Test zen-grid-item-width(1) with default $zen-column-count: 1 */ + width: zen-grid-item-width(1); + + /* Test zen-grid-item-width(2) with $zen-column-count: 5 */ + $zen-column-count: 5; + width: zen-grid-item-width(2); + $zen-column-count: 1; + + /* Test zen-grid-item-width(2, 5) */ + width: zen-grid-item-width(2, 5); + + /* Test zen-grid-item-width(1) with $zen-grid-width: 100px */ + $zen-grid-width: 100px; + width: zen-grid-item-width(1); + $zen-grid-width: 100%; + + /* Test zen-grid-item-width(2, 5) with $zen-grid-width: 100px */ + $zen-grid-width: 100px; + width: zen-grid-item-width(2, 5); + $zen-grid-width: 100%; + + /* Test zen-grid-item-width(2, 5, $grid-width: 1000px) */ + width: zen-grid-item-width(2, 5, $grid-width: 1000px); + + /* Test zen-grid-item-width(2, 5, $grid-width: 1000px, $box-sizing: content-box) */ + width: zen-grid-item-width(2, 5, $grid-width: 1000px, $box-sizing: content-box); + + /* Test zen-grid-item-width(2, 5, $gutter-width: 10px, $grid-width: 1000px, $box-sizing: content-box) */ + width: zen-grid-item-width(2, 5, $gutter-width: 10px, $grid-width: 1000px, $box-sizing: content-box); +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/function-zen-half-gutter.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/function-zen-half-gutter.scss new file mode 100644 index 000000000..e457884a3 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/function-zen-half-gutter.scss @@ -0,0 +1,37 @@ +/** + * @file + * Test zen-half-gutter() + */ + +@import "zen"; + +#test-zen-half-gutter { + /* Test zen-half-gutter() with default $zen-gutter-width: 20px */ + padding-left: zen-half-gutter(); + + /* Test zen-half-gutter() with $zen-gutter-width: 30px */ + $zen-gutter-width: 30px; + padding-left: zen-half-gutter(); + + /* Test zen-half-gutter(10em) */ + padding-left: zen-half-gutter(10em); + + /* Test zen-half-gutter(11em) */ + padding-left: zen-half-gutter(11em); + + /* Test zen-half-gutter(10px) */ + padding-left: zen-half-gutter(10px); + + /* Test zen-half-gutter(11px) */ + padding-left: zen-half-gutter(11px); + + /* Test zen-half-gutter(11px, right) */ + padding-left: zen-half-gutter(11px, right); + + /* Test zen-half-gutter(11px) with $zen-float-direction: right */ + $zen-float-direction: right; + padding-left: zen-half-gutter(11px); + + /* Test zen-half-gutter(11px, left) with $zen-float-direction: right */ + padding-left: zen-half-gutter(11px, left); +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/function-zen-unit-width.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/function-zen-unit-width.scss new file mode 100644 index 000000000..0a89a8f14 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/function-zen-unit-width.scss @@ -0,0 +1,32 @@ +/** + * @file + * Test zen-unit-width() + */ + +@import "zen"; + +#test-zen-unit-width { + /* Test zen-unit-width() with default $zen-column-count: 1 */ + width: zen-unit-width(); + + /* Test zen-unit-width() with $zen-column-count: 5 */ + $zen-column-count: 5; + width: zen-unit-width(); + $zen-column-count: 1; + + /* Test zen-unit-width(5) */ + width: zen-unit-width(5); + + /* Test zen-unit-width() with $zen-grid-width: 100px */ + $zen-grid-width: 100px; + width: zen-unit-width(); + $zen-grid-width: 100%; + + /* Test zen-unit-width(5) with $zen-grid-width: 100px */ + $zen-grid-width: 100px; + width: zen-unit-width(5); + $zen-grid-width: 100%; + + /* Test zen-unit-width(5, 100px) */ + width: zen-unit-width(5, 100px); +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-clear.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-clear.scss new file mode 100644 index 000000000..9a63d7f26 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-clear.scss @@ -0,0 +1,26 @@ +/** + * @file + * Test zen-clear() + */ + +@import "zen"; + +#test-zen-clear { + /* Test zen-clear() */ + @include zen-clear(); + + /* Test zen-clear() with $zen-float-direction: right */ + $zen-float-direction: right; + @include zen-clear(); + $zen-float-direction: left; + + /* Test zen-clear(left) */ + @include zen-clear(left); + + /* Test zen-clear(left, $reverse-all-floats: TRUE) */ + @include zen-clear(left, $reverse-all-floats: TRUE); + + /* Test zen-clear(left) with: $zen-reverse-all-floats: TRUE; */ + $zen-reverse-all-floats: TRUE; + @include zen-clear(left); +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-float.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-float.scss new file mode 100644 index 000000000..2af83b227 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-float.scss @@ -0,0 +1,26 @@ +/** + * @file + * Test zen-float() + */ + +@import "zen"; + +#test-zen-float { + /* Test zen-float() */ + @include zen-float(); + + /* Test zen-float() with $zen-float-direction: right */ + $zen-float-direction: right; + @include zen-float(); + $zen-float-direction: left; + + /* Test zen-float(left) */ + @include zen-float(left); + + /* Test zen-float(left, $reverse-all-floats: TRUE) */ + @include zen-float(left, $reverse-all-floats: TRUE); + + /* Test zen-float(left) with: $zen-reverse-all-floats: TRUE; */ + $zen-reverse-all-floats: TRUE; + @include zen-float(left); +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-grid-background.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-grid-background.scss new file mode 100644 index 000000000..ef37ad4f0 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-grid-background.scss @@ -0,0 +1,69 @@ +/** + * @file + * Test zen-grid-background() + */ + +@import "zen/background"; + +#test-zen-grid-background { + /* Test zen-grid-background() with 1 column grid and 20px gutter */ + $zen-grid-numbers: top; + @include zen-grid-background(); + $zen-grid-numbers: both; + + // Turn off numbers for all other tests. + $zen-grid-numbers: none; + + /* Test zen-grid-background() with 12 column grid and 20px gutter */ + $zen-column-count: 12; + @include zen-grid-background(); + $zen-column-count: 1; + + /* Test zen-grid-background(), 5 column grid, 10% gutter and black grid color */ + $zen-column-count: 5; + $zen-gutter-width: 10%; + $zen-grid-color: #000; + @include zen-grid-background(); + $zen-column-count: 1; + $zen-gutter-width: 20px; + $zen-grid-color: rgba(#ffdede, 0.8); + + /* Test zen-grid-background() with 5 column grid and 40px gutter */ + $zen-column-count: 5; + $zen-gutter-width: 40px; + @include zen-grid-background(); + $zen-column-count: 1; + $zen-gutter-width: 20px; + + /* Test zen-grid-background(), 5 column grid and 10% gutter and $zen-reverse-all-floats */ + $zen-column-count: 5; + $zen-gutter-width: 10%; + $zen-reverse-all-floats: true; + @include zen-grid-background(); + $zen-column-count: 1; + $zen-gutter-width: 20px; + $zen-reverse-all-floats: false; + + /* Test zen-grid-background() with 5 column grid and 40px gutter and $zen-reverse-all-floats */ + $zen-column-count: 5; + $zen-gutter-width: 40px; + $zen-reverse-all-floats: true; + @include zen-grid-background(); + $zen-column-count: 1; + $zen-gutter-width: 20px; + $zen-reverse-all-floats: false; + + /* Test zen-grid-background() with $zen-grid-width: 1000px, 5 column grid and 40px gutter */ + $zen-grid-width: 1000px; + $zen-column-count: 5; + $zen-gutter-width: 40px; + @include zen-grid-background(); + $zen-grid-width: 100%; + $zen-column-count: 1; + $zen-gutter-width: 20px; + + /* Test zen-grid-background() with all 24 grid numbers */ + $zen-column-count: 24; + @include zen-grid-background(); + $zen-column-count: 1; +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-grid-container.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-grid-container.scss new file mode 100644 index 000000000..a3c7fd9d3 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-grid-container.scss @@ -0,0 +1,27 @@ +/** + * @file + * Test zen-grid-container() + */ + +@import "zen"; + +#test-zen-grid-container { + /* Test zen-grid-container() */ + @include zen-grid-container(); +} + +#test-zen-grid-container-2 { + /* Test zen-grid-container() with $legacy-support-for-ie7: true */ + $legacy-support-for-ie7: true; + @include zen-grid-container(); + $legacy-support-for-ie7: false; +} + +#test-zen-grid-container-3 { + /* Test zen-grid-container() with $legacy-support-for-ie6: true */ + $legacy-support-for-ie6: true; + $legacy-support-for-ie7: true; + @include zen-grid-container(); + $legacy-support-for-ie6: false; + $legacy-support-for-ie7: false; +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-grid-flow-item.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-grid-flow-item.scss new file mode 100644 index 000000000..092fcb56a --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-grid-flow-item.scss @@ -0,0 +1,81 @@ +/** + * @file + * Test zen-grid-flow-item() + */ + +@import "zen"; + +#test-zen-grid-flow-item { + /* Test zen-grid-flow-item(1) without setting $column-count */ + @include zen-grid-flow-item(1); + + /* Test zen-grid-flow-item(1, 4) with 20px gutter */ + @include zen-grid-flow-item(1, 4); + + /* Test zen-grid-flow-item(1, 4) with 15px gutter */ + $zen-gutter-width: 15px; + @include zen-grid-flow-item(1, 4); + $zen-gutter-width: 20px; + + /* Test zen-grid-flow-item(1) with 5 columns, 20px gutter and $zen-grid-width: 1000px */ + $zen-column-count: 5; + $zen-grid-width: 1000px; + @include zen-grid-flow-item(1); + $zen-column-count: 1; + $zen-grid-width: 100%; + + /* Test zen-grid-flow-item(1) with 5 columns, 20px gutter, $zen-grid-width: 1000px, $alpha-gutter: true and $omega-gutter: false */ + $zen-column-count: 5; + $zen-grid-width: 1000px; + @include zen-grid-flow-item(1, $alpha-gutter: true, $omega-gutter: false); + $zen-column-count: 1; + $zen-grid-width: 100%; + + /* Test zen-grid-flow-item(1) with 5 columns, 20px gutter, $zen-grid-width: 1000px and $omega-gutter: false */ + $zen-column-count: 5; + $zen-grid-width: 1000px; + @include zen-grid-flow-item(1, $omega-gutter: false); + $zen-column-count: 1; + $zen-grid-width: 100%; + + /* Test zen-grid-flow-item(1, 4) with 15px gutter and $zen-float-direction: right */ + $zen-gutter-width: 15px; + $zen-float-direction: right; + @include zen-grid-flow-item(1, 4); + $zen-gutter-width: 20px; + $zen-float-direction: left; + + /* Test zen-grid-flow-item(1, 4) with 15px gutter and $alpha-gutter: true */ + $zen-gutter-width: 15px; + @include zen-grid-flow-item(1, 4, $alpha-gutter: true); + $zen-gutter-width: 20px; + + /* Test zen-grid-flow-item(1, 4) with 15px gutter and $omega-gutter: false */ + $zen-gutter-width: 15px; + @include zen-grid-flow-item(1, 4, $omega-gutter: false); + $zen-gutter-width: 20px; + + /* Test zen-grid-flow-item(3, 4) with 20px gutter and $alpha-gutter: true */ + @include zen-grid-flow-item(3, 4, $alpha-gutter: true); + + /* Test zen-grid-flow-item(3, 4) with 20px gutter and $omega-gutter: false */ + @include zen-grid-flow-item(3, 4, $omega-gutter: false); + + /* Test zen-grid-flow-item(1, 4) with 15px gutter, $zen-float-direction: right and $alpha-gutter: true */ + $zen-gutter-width: 15px; + $zen-float-direction: right; + @include zen-grid-flow-item(1, 4, $alpha-gutter: true); + $zen-gutter-width: 20px; + $zen-float-direction: left; + + /* Test zen-grid-flow-item(1, 4) with $zen-box-sizing: content-box and 10% gutter */ + $zen-gutter-width: 10%; + $zen-box-sizing: content-box; + @include zen-grid-flow-item(1, 4); + $zen-gutter-width: 20px; + $zen-box-sizing: border-box; + + /* Test zen-grid-flow-item(1, 4) with $zen-auto-include-flow-item-base: false */ + $zen-auto-include-flow-item-base: false; + @include zen-grid-flow-item(1, 4); +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-grid-item-base.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-grid-item-base.scss new file mode 100644 index 000000000..926ac42a1 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-grid-item-base.scss @@ -0,0 +1,54 @@ +/** + * @file + * Test zen-grid-item-base() + */ + +@import "zen"; + +#test-zen-grid-item-base { + /* Test zen-grid-item-base() */ + @include zen-grid-item-base(); + + /* Test zen-grid-item-base() with $zen-box-sizing: content-box */ + $zen-box-sizing: content-box; + @include zen-grid-item-base(); + $zen-box-sizing: border-box; + + /* Test zen-grid-item-base() with $legacy-support-for-ie7: true */ + $legacy-support-for-ie7: true; + @include zen-grid-item-base(); + $legacy-support-for-ie7: false; + + /* Test zen-grid-item-base() with $box-sizing-polyfill-path: "/boxsizing.htc" and $legacy-support-for-ie7: true */ + $box-sizing-polyfill-path: "/boxsizing.htc"; + $legacy-support-for-ie7: true; + @include zen-grid-item-base(); + $box-sizing-polyfill-path: ""; + $legacy-support-for-ie7: false; + + /* Test zen-grid-item-base() with $box-sizing-polyfill-path: "/boxsizing.htc" and $legacy-support-for-ie6: true */ + $box-sizing-polyfill-path: "/boxsizing.htc"; + $legacy-support-for-ie6: true; + @include zen-grid-item-base(); + $box-sizing-polyfill-path: ""; + $legacy-support-for-ie6: false; + + /* Test zen-grid-item-base() with $zen-gutter-width: 15px */ + $zen-gutter-width: 15px; + @include zen-grid-item-base(); + $zen-gutter-width: 20px; + + /* Test zen-grid-item-base() with $zen-gutter-width: 15px and $zen-float-direction: right */ + $zen-gutter-width: 15px; + $zen-float-direction: right; + @include zen-grid-item-base(); + $zen-gutter-width: 20px; + $zen-float-direction: left; + + /* Test zen-grid-item-base() with $zen-gutter-width: 15px and $zen-reverse-all-floats: true */ + $zen-gutter-width: 15px; + $zen-reverse-all-floats: true; + @include zen-grid-item-base(); + $zen-gutter-width: 20px; + $zen-reverse-all-floats: false; +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-grid-item.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-grid-item.scss new file mode 100644 index 000000000..235ec237a --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-grid-item.scss @@ -0,0 +1,73 @@ +/** + * @file + * Test zen-grid-item() + */ + +@import "zen"; + +#test-zen-grid-item { + /* Test zen-grid-item(6, 4) with 12 column grid and 20px gutter */ + $zen-column-count: 12; + @include zen-grid-item(6, 4); + $zen-column-count: 1; + + /* Test zen-grid-item(3, 3) with box-sizing: content-box, 5 column grid and 10% gutter */ + $zen-column-count: 5; + $zen-gutter-width: 10%; + $zen-box-sizing: content-box; + @include zen-grid-item(3, 3); + $zen-column-count: 1; + $zen-gutter-width: 20px; + $zen-box-sizing: border-box; + + /* Turn off $zen-auto-include-item-base */ + $zen-auto-include-item-base: false; + + /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter */ + $zen-column-count: 5; + $zen-gutter-width: 40px; + @include zen-grid-item(3, 3); + $zen-column-count: 1; + $zen-gutter-width: 20px; + + /* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter */ + $zen-column-count: 5; + $zen-gutter-width: 40px; + @include zen-grid-item(3, 3, right); + $zen-column-count: 1; + $zen-gutter-width: 20px; + + /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter and $zen-reverse-all-floats */ + $zen-column-count: 5; + $zen-gutter-width: 40px; + $zen-reverse-all-floats: true; + @include zen-grid-item(3, 3); + $zen-column-count: 1; + $zen-gutter-width: 20px; + $zen-reverse-all-floats: false; + + /* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter and $zen-reverse-all-floats */ + $zen-column-count: 5; + $zen-gutter-width: 40px; + $zen-reverse-all-floats: true; + @include zen-grid-item(3, 3, right); + $zen-column-count: 1; + $zen-gutter-width: 20px; + $zen-reverse-all-floats: false; + + /* Test zen-grid-item(3, 2.5) with 5 column grid and 40px gutter */ + $zen-column-count: 5; + $zen-gutter-width: 40px; + @include zen-grid-item(3, 2.5); + $zen-column-count: 1; + $zen-gutter-width: 20px; + + /* Test zen-grid-item(3, 3) with $zen-grid-width: 1000px, 5 column grid and 40px gutter */ + $zen-grid-width: 1000px; + $zen-column-count: 5; + $zen-gutter-width: 40px; + @include zen-grid-item(3, 3); + $zen-grid-width: 100%; + $zen-column-count: 1; + $zen-gutter-width: 20px; +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-nested-container.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-nested-container.scss new file mode 100644 index 000000000..ce4c8dd30 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/sass/zen-nested-container.scss @@ -0,0 +1,27 @@ +/** + * @file + * Test zen-nested-container() + */ + +@import "zen"; + +#test-zen-nested-container { + /* Test zen-nested-container() */ + @include zen-nested-container(); +} + +#test-zen-nested-container-2 { + /* Test zen-nested-container() with $legacy-support-for-ie7: true */ + $legacy-support-for-ie7: true; + @include zen-nested-container(); + $legacy-support-for-ie7: false; +} + +#test-zen-nested-container-3 { + /* Test zen-nested-container() with $legacy-support-for-ie6: true */ + $legacy-support-for-ie6: true; + $legacy-support-for-ie7: true; + @include zen-nested-container(); + $legacy-support-for-ie6: false; + $legacy-support-for-ie7: false; +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/function-zen-direction-flip.css b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/function-zen-direction-flip.css new file mode 100644 index 000000000..036b0c29c --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/function-zen-direction-flip.css @@ -0,0 +1,16 @@ +/** + * @file + * Test zen-direction-flip() + */ +#test-zen-direction-flip { + /* Test zen-direction-flip(left) */ + float: right; + /* Test zen-direction-flip(right) */ + float: left; + /* Test zen-direction-flip(both) */ + float: both; + /* Test zen-direction-flip(none) */ + float: none; + /* Test zen-direction-flip(invalid) */ + float: both; +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/function-zen-grid-item-width.css b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/function-zen-grid-item-width.css new file mode 100644 index 000000000..1a700c397 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/function-zen-grid-item-width.css @@ -0,0 +1,22 @@ +/** + * @file + * Test zen-grid-item-width() + */ +#test-zen-grid-item-width { + /* Test zen-grid-item-width(1) with default $zen-column-count: 1 */ + width: 100%; + /* Test zen-grid-item-width(2) with $zen-column-count: 5 */ + width: 40%; + /* Test zen-grid-item-width(2, 5) */ + width: 40%; + /* Test zen-grid-item-width(1) with $zen-grid-width: 100px */ + width: 100px; + /* Test zen-grid-item-width(2, 5) with $zen-grid-width: 100px */ + width: 40px; + /* Test zen-grid-item-width(2, 5, $grid-width: 1000px) */ + width: 400px; + /* Test zen-grid-item-width(2, 5, $grid-width: 1000px, $box-sizing: content-box) */ + width: 380px; + /* Test zen-grid-item-width(2, 5, $gutter-width: 10px, $grid-width: 1000px, $box-sizing: content-box) */ + width: 390px; +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/function-zen-half-gutter.css b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/function-zen-half-gutter.css new file mode 100644 index 000000000..bb9412a8f --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/function-zen-half-gutter.css @@ -0,0 +1,24 @@ +/** + * @file + * Test zen-half-gutter() + */ +#test-zen-half-gutter { + /* Test zen-half-gutter() with default $zen-gutter-width: 20px */ + padding-left: 10px; + /* Test zen-half-gutter() with $zen-gutter-width: 30px */ + padding-left: 15px; + /* Test zen-half-gutter(10em) */ + padding-left: 5em; + /* Test zen-half-gutter(11em) */ + padding-left: 5.5em; + /* Test zen-half-gutter(10px) */ + padding-left: 5px; + /* Test zen-half-gutter(11px) */ + padding-left: 5px; + /* Test zen-half-gutter(11px, right) */ + padding-left: 6px; + /* Test zen-half-gutter(11px) with $zen-float-direction: right */ + padding-left: 5px; + /* Test zen-half-gutter(11px, left) with $zen-float-direction: right */ + padding-left: 6px; +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/function-zen-unit-width.css b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/function-zen-unit-width.css new file mode 100644 index 000000000..4dcdf202a --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/function-zen-unit-width.css @@ -0,0 +1,18 @@ +/** + * @file + * Test zen-unit-width() + */ +#test-zen-unit-width { + /* Test zen-unit-width() with default $zen-column-count: 1 */ + width: 100%; + /* Test zen-unit-width() with $zen-column-count: 5 */ + width: 20%; + /* Test zen-unit-width(5) */ + width: 20%; + /* Test zen-unit-width() with $zen-grid-width: 100px */ + width: 100px; + /* Test zen-unit-width(5) with $zen-grid-width: 100px */ + width: 20px; + /* Test zen-unit-width(5, 100px) */ + width: 20px; +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-clear.css b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-clear.css new file mode 100644 index 000000000..0b4015567 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-clear.css @@ -0,0 +1,16 @@ +/** + * @file + * Test zen-clear() + */ +#test-zen-clear { + /* Test zen-clear() */ + clear: left; + /* Test zen-clear() with $zen-float-direction: right */ + clear: right; + /* Test zen-clear(left) */ + clear: left; + /* Test zen-clear(left, $reverse-all-floats: TRUE) */ + clear: right; + /* Test zen-clear(left) with: $zen-reverse-all-floats: TRUE; */ + clear: right; +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-float.css b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-float.css new file mode 100644 index 000000000..71cf83e35 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-float.css @@ -0,0 +1,16 @@ +/** + * @file + * Test zen-float() + */ +#test-zen-float { + /* Test zen-float() */ + float: left; + /* Test zen-float() with $zen-float-direction: right */ + float: right; + /* Test zen-float(left) */ + float: left; + /* Test zen-float(left, $reverse-all-floats: TRUE) */ + float: right; + /* Test zen-float(left) with: $zen-reverse-all-floats: TRUE; */ + float: right; +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-grid-background.css b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-grid-background.css new file mode 100644 index 000000000..ab792b640 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-grid-background.css @@ -0,0 +1,54 @@ +/** + * @file + * Test zen-grid-background() + */ +#test-zen-grid-background { + /* Test zen-grid-background() with 1 column grid and 20px gutter */ + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARVJREFUeNpi/P//PwMMMDIyMpALYOawEKEWpIYPiAWg7M9A/B6If4LMwaaYkGHiQKwFxJpAzA3E94H4LBA/BOJfWJ0Kw0iAFYhFgFgHiIOBuPHGjRtvf//+/X/WrFmHgHxPqIsxzGHC4TJ+IDYCYu+EhIQ4oGG5ysrKQiCJX79+cQApXqilDMR6mROI5Z8+fVotJibGS0rk4HLhd1AYSUtLd8rLyy/78uXLb0oN/AjE54D44LNnz27euXPnHaUGglz0BoifAvEHaniZbDBq4BA0EJR8vjAxMf2FCbCxsf2AljhYEzsjgfIQlKe1gVgPiCWAGGTwbWylDcwcQgayQIssASj9D5qLMMpDYg0kucSmeqQABBgAsyJrV7MArsMAAAAASUVORK5CYII=") 50% top no-repeat, -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(50%, #ffdede), color-stop(50%, transparent)) 10px top no-repeat, -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(50%, transparent), color-stop(50%, #ffdede)) -10px top no-repeat; + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARVJREFUeNpi/P//PwMMMDIyMpALYOawEKEWpIYPiAWg7M9A/B6If4LMwaaYkGHiQKwFxJpAzA3E94H4LBA/BOJfWJ0Kw0iAFYhFgFgHiIOBuPHGjRtvf//+/X/WrFmHgHxPqIsxzGHC4TJ+IDYCYu+EhIQ4oGG5ysrKQiCJX79+cQApXqilDMR6mROI5Z8+fVotJibGS0rk4HLhd1AYSUtLd8rLyy/78uXLb0oN/AjE54D44LNnz27euXPnHaUGglz0BoifAvEHaniZbDBq4BA0EJR8vjAxMf2FCbCxsf2AljhYEzsjgfIQlKe1gVgPiCWAGGTwbWylDcwcQgayQIssASj9D5qLMMpDYg0kucSmeqQABBgAsyJrV7MArsMAAAAASUVORK5CYII=") 50% top no-repeat, -webkit-linear-gradient(left, #ffdede 50%, transparent 50%) 10px top no-repeat, -webkit-linear-gradient(left, transparent 50%, #ffdede 50%) -10px top no-repeat; + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARVJREFUeNpi/P//PwMMMDIyMpALYOawEKEWpIYPiAWg7M9A/B6If4LMwaaYkGHiQKwFxJpAzA3E94H4LBA/BOJfWJ0Kw0iAFYhFgFgHiIOBuPHGjRtvf//+/X/WrFmHgHxPqIsxzGHC4TJ+IDYCYu+EhIQ4oGG5ysrKQiCJX79+cQApXqilDMR6mROI5Z8+fVotJibGS0rk4HLhd1AYSUtLd8rLyy/78uXLb0oN/AjE54D44LNnz27euXPnHaUGglz0BoifAvEHaniZbDBq4BA0EJR8vjAxMf2FCbCxsf2AljhYEzsjgfIQlKe1gVgPiCWAGGTwbWylDcwcQgayQIssASj9D5qLMMpDYg0kucSmeqQABBgAsyJrV7MArsMAAAAASUVORK5CYII=") 50% top no-repeat, -moz-linear-gradient(left, #ffdede 50%, transparent 50%) 10px top no-repeat, -moz-linear-gradient(left, transparent 50%, #ffdede 50%) -10px top no-repeat; + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARVJREFUeNpi/P//PwMMMDIyMpALYOawEKEWpIYPiAWg7M9A/B6If4LMwaaYkGHiQKwFxJpAzA3E94H4LBA/BOJfWJ0Kw0iAFYhFgFgHiIOBuPHGjRtvf//+/X/WrFmHgHxPqIsxzGHC4TJ+IDYCYu+EhIQ4oGG5ysrKQiCJX79+cQApXqilDMR6mROI5Z8+fVotJibGS0rk4HLhd1AYSUtLd8rLyy/78uXLb0oN/AjE54D44LNnz27euXPnHaUGglz0BoifAvEHaniZbDBq4BA0EJR8vjAxMf2FCbCxsf2AljhYEzsjgfIQlKe1gVgPiCWAGGTwbWylDcwcQgayQIssASj9D5qLMMpDYg0kucSmeqQABBgAsyJrV7MArsMAAAAASUVORK5CYII=") 50% top no-repeat, -o-linear-gradient(left, #ffdede 50%, transparent 50%) 10px top no-repeat, -o-linear-gradient(left, transparent 50%, #ffdede 50%) -10px top no-repeat; + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARVJREFUeNpi/P//PwMMMDIyMpALYOawEKEWpIYPiAWg7M9A/B6If4LMwaaYkGHiQKwFxJpAzA3E94H4LBA/BOJfWJ0Kw0iAFYhFgFgHiIOBuPHGjRtvf//+/X/WrFmHgHxPqIsxzGHC4TJ+IDYCYu+EhIQ4oGG5ysrKQiCJX79+cQApXqilDMR6mROI5Z8+fVotJibGS0rk4HLhd1AYSUtLd8rLyy/78uXLb0oN/AjE54D44LNnz27euXPnHaUGglz0BoifAvEHaniZbDBq4BA0EJR8vjAxMf2FCbCxsf2AljhYEzsjgfIQlKe1gVgPiCWAGGTwbWylDcwcQgayQIssASj9D5qLMMpDYg0kucSmeqQABBgAsyJrV7MArsMAAAAASUVORK5CYII=") 50% top no-repeat, linear-gradient(left, #ffdede 50%, transparent 50%) 10px top no-repeat, linear-gradient(left, transparent 50%, #ffdede 50%) -10px top no-repeat; + /* Test zen-grid-background() with 12 column grid and 20px gutter */ + background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(4.16667%, #ffdede), color-stop(4.16667%, transparent), color-stop(8.33333%, transparent), color-stop(8.33333%, #ffdede), color-stop(12.5%, #ffdede), color-stop(12.5%, transparent), color-stop(16.66667%, transparent), color-stop(16.66667%, #ffdede), color-stop(20.83333%, #ffdede), color-stop(20.83333%, transparent), color-stop(25%, transparent), color-stop(25%, #ffdede), color-stop(29.16667%, #ffdede), color-stop(29.16667%, transparent), color-stop(33.33333%, transparent), color-stop(33.33333%, #ffdede), color-stop(37.5%, #ffdede), color-stop(37.5%, transparent), color-stop(41.66667%, transparent), color-stop(41.66667%, #ffdede), color-stop(45.83333%, #ffdede), color-stop(45.83333%, transparent), color-stop(50%, transparent), color-stop(50%, #ffdede), color-stop(54.16667%, #ffdede), color-stop(54.16667%, transparent), color-stop(58.33333%, transparent), color-stop(58.33333%, #ffdede), color-stop(62.5%, #ffdede), color-stop(62.5%, transparent), color-stop(66.66667%, transparent), color-stop(66.66667%, #ffdede), color-stop(70.83333%, #ffdede), color-stop(70.83333%, transparent), color-stop(75%, transparent), color-stop(75%, #ffdede), color-stop(79.16667%, #ffdede), color-stop(79.16667%, transparent), color-stop(83.33333%, transparent), color-stop(83.33333%, #ffdede), color-stop(87.5%, #ffdede), color-stop(87.5%, transparent), color-stop(91.66667%, transparent), color-stop(91.66667%, #ffdede), color-stop(95.83333%, #ffdede), color-stop(95.83333%, transparent)) 10px top no-repeat, -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(4.16667%, transparent), color-stop(4.16667%, #ffdede), color-stop(8.33333%, #ffdede), color-stop(8.33333%, transparent), color-stop(12.5%, transparent), color-stop(12.5%, #ffdede), color-stop(16.66667%, #ffdede), color-stop(16.66667%, transparent), color-stop(20.83333%, transparent), color-stop(20.83333%, #ffdede), color-stop(25%, #ffdede), color-stop(25%, transparent), color-stop(29.16667%, transparent), color-stop(29.16667%, #ffdede), color-stop(33.33333%, #ffdede), color-stop(33.33333%, transparent), color-stop(37.5%, transparent), color-stop(37.5%, #ffdede), color-stop(41.66667%, #ffdede), color-stop(41.66667%, transparent), color-stop(45.83333%, transparent), color-stop(45.83333%, #ffdede), color-stop(50%, #ffdede), color-stop(50%, transparent), color-stop(54.16667%, transparent), color-stop(54.16667%, #ffdede), color-stop(58.33333%, #ffdede), color-stop(58.33333%, transparent), color-stop(62.5%, transparent), color-stop(62.5%, #ffdede), color-stop(66.66667%, #ffdede), color-stop(66.66667%, transparent), color-stop(70.83333%, transparent), color-stop(70.83333%, #ffdede), color-stop(75%, #ffdede), color-stop(75%, transparent), color-stop(79.16667%, transparent), color-stop(79.16667%, #ffdede), color-stop(83.33333%, #ffdede), color-stop(83.33333%, transparent), color-stop(87.5%, transparent), color-stop(87.5%, #ffdede), color-stop(91.66667%, #ffdede), color-stop(91.66667%, transparent), color-stop(95.83333%, transparent), color-stop(95.83333%, #ffdede)) -10px top no-repeat; + background: -webkit-linear-gradient(left, #ffdede 4.16667%, transparent 4.16667%, transparent 8.33333%, #ffdede 8.33333%, #ffdede 12.5%, transparent 12.5%, transparent 16.66667%, #ffdede 16.66667%, #ffdede 20.83333%, transparent 20.83333%, transparent 25%, #ffdede 25%, #ffdede 29.16667%, transparent 29.16667%, transparent 33.33333%, #ffdede 33.33333%, #ffdede 37.5%, transparent 37.5%, transparent 41.66667%, #ffdede 41.66667%, #ffdede 45.83333%, transparent 45.83333%, transparent 50%, #ffdede 50%, #ffdede 54.16667%, transparent 54.16667%, transparent 58.33333%, #ffdede 58.33333%, #ffdede 62.5%, transparent 62.5%, transparent 66.66667%, #ffdede 66.66667%, #ffdede 70.83333%, transparent 70.83333%, transparent 75%, #ffdede 75%, #ffdede 79.16667%, transparent 79.16667%, transparent 83.33333%, #ffdede 83.33333%, #ffdede 87.5%, transparent 87.5%, transparent 91.66667%, #ffdede 91.66667%, #ffdede 95.83333%, transparent 95.83333%) 10px top no-repeat, -webkit-linear-gradient(left, transparent 4.16667%, #ffdede 4.16667%, #ffdede 8.33333%, transparent 8.33333%, transparent 12.5%, #ffdede 12.5%, #ffdede 16.66667%, transparent 16.66667%, transparent 20.83333%, #ffdede 20.83333%, #ffdede 25%, transparent 25%, transparent 29.16667%, #ffdede 29.16667%, #ffdede 33.33333%, transparent 33.33333%, transparent 37.5%, #ffdede 37.5%, #ffdede 41.66667%, transparent 41.66667%, transparent 45.83333%, #ffdede 45.83333%, #ffdede 50%, transparent 50%, transparent 54.16667%, #ffdede 54.16667%, #ffdede 58.33333%, transparent 58.33333%, transparent 62.5%, #ffdede 62.5%, #ffdede 66.66667%, transparent 66.66667%, transparent 70.83333%, #ffdede 70.83333%, #ffdede 75%, transparent 75%, transparent 79.16667%, #ffdede 79.16667%, #ffdede 83.33333%, transparent 83.33333%, transparent 87.5%, #ffdede 87.5%, #ffdede 91.66667%, transparent 91.66667%, transparent 95.83333%, #ffdede 95.83333%) -10px top no-repeat; + background: -moz-linear-gradient(left, #ffdede 4.16667%, transparent 4.16667%, transparent 8.33333%, #ffdede 8.33333%, #ffdede 12.5%, transparent 12.5%, transparent 16.66667%, #ffdede 16.66667%, #ffdede 20.83333%, transparent 20.83333%, transparent 25%, #ffdede 25%, #ffdede 29.16667%, transparent 29.16667%, transparent 33.33333%, #ffdede 33.33333%, #ffdede 37.5%, transparent 37.5%, transparent 41.66667%, #ffdede 41.66667%, #ffdede 45.83333%, transparent 45.83333%, transparent 50%, #ffdede 50%, #ffdede 54.16667%, transparent 54.16667%, transparent 58.33333%, #ffdede 58.33333%, #ffdede 62.5%, transparent 62.5%, transparent 66.66667%, #ffdede 66.66667%, #ffdede 70.83333%, transparent 70.83333%, transparent 75%, #ffdede 75%, #ffdede 79.16667%, transparent 79.16667%, transparent 83.33333%, #ffdede 83.33333%, #ffdede 87.5%, transparent 87.5%, transparent 91.66667%, #ffdede 91.66667%, #ffdede 95.83333%, transparent 95.83333%) 10px top no-repeat, -moz-linear-gradient(left, transparent 4.16667%, #ffdede 4.16667%, #ffdede 8.33333%, transparent 8.33333%, transparent 12.5%, #ffdede 12.5%, #ffdede 16.66667%, transparent 16.66667%, transparent 20.83333%, #ffdede 20.83333%, #ffdede 25%, transparent 25%, transparent 29.16667%, #ffdede 29.16667%, #ffdede 33.33333%, transparent 33.33333%, transparent 37.5%, #ffdede 37.5%, #ffdede 41.66667%, transparent 41.66667%, transparent 45.83333%, #ffdede 45.83333%, #ffdede 50%, transparent 50%, transparent 54.16667%, #ffdede 54.16667%, #ffdede 58.33333%, transparent 58.33333%, transparent 62.5%, #ffdede 62.5%, #ffdede 66.66667%, transparent 66.66667%, transparent 70.83333%, #ffdede 70.83333%, #ffdede 75%, transparent 75%, transparent 79.16667%, #ffdede 79.16667%, #ffdede 83.33333%, transparent 83.33333%, transparent 87.5%, #ffdede 87.5%, #ffdede 91.66667%, transparent 91.66667%, transparent 95.83333%, #ffdede 95.83333%) -10px top no-repeat; + background: -o-linear-gradient(left, #ffdede 4.16667%, transparent 4.16667%, transparent 8.33333%, #ffdede 8.33333%, #ffdede 12.5%, transparent 12.5%, transparent 16.66667%, #ffdede 16.66667%, #ffdede 20.83333%, transparent 20.83333%, transparent 25%, #ffdede 25%, #ffdede 29.16667%, transparent 29.16667%, transparent 33.33333%, #ffdede 33.33333%, #ffdede 37.5%, transparent 37.5%, transparent 41.66667%, #ffdede 41.66667%, #ffdede 45.83333%, transparent 45.83333%, transparent 50%, #ffdede 50%, #ffdede 54.16667%, transparent 54.16667%, transparent 58.33333%, #ffdede 58.33333%, #ffdede 62.5%, transparent 62.5%, transparent 66.66667%, #ffdede 66.66667%, #ffdede 70.83333%, transparent 70.83333%, transparent 75%, #ffdede 75%, #ffdede 79.16667%, transparent 79.16667%, transparent 83.33333%, #ffdede 83.33333%, #ffdede 87.5%, transparent 87.5%, transparent 91.66667%, #ffdede 91.66667%, #ffdede 95.83333%, transparent 95.83333%) 10px top no-repeat, -o-linear-gradient(left, transparent 4.16667%, #ffdede 4.16667%, #ffdede 8.33333%, transparent 8.33333%, transparent 12.5%, #ffdede 12.5%, #ffdede 16.66667%, transparent 16.66667%, transparent 20.83333%, #ffdede 20.83333%, #ffdede 25%, transparent 25%, transparent 29.16667%, #ffdede 29.16667%, #ffdede 33.33333%, transparent 33.33333%, transparent 37.5%, #ffdede 37.5%, #ffdede 41.66667%, transparent 41.66667%, transparent 45.83333%, #ffdede 45.83333%, #ffdede 50%, transparent 50%, transparent 54.16667%, #ffdede 54.16667%, #ffdede 58.33333%, transparent 58.33333%, transparent 62.5%, #ffdede 62.5%, #ffdede 66.66667%, transparent 66.66667%, transparent 70.83333%, #ffdede 70.83333%, #ffdede 75%, transparent 75%, transparent 79.16667%, #ffdede 79.16667%, #ffdede 83.33333%, transparent 83.33333%, transparent 87.5%, #ffdede 87.5%, #ffdede 91.66667%, transparent 91.66667%, transparent 95.83333%, #ffdede 95.83333%) -10px top no-repeat; + background: linear-gradient(left, #ffdede 4.16667%, transparent 4.16667%, transparent 8.33333%, #ffdede 8.33333%, #ffdede 12.5%, transparent 12.5%, transparent 16.66667%, #ffdede 16.66667%, #ffdede 20.83333%, transparent 20.83333%, transparent 25%, #ffdede 25%, #ffdede 29.16667%, transparent 29.16667%, transparent 33.33333%, #ffdede 33.33333%, #ffdede 37.5%, transparent 37.5%, transparent 41.66667%, #ffdede 41.66667%, #ffdede 45.83333%, transparent 45.83333%, transparent 50%, #ffdede 50%, #ffdede 54.16667%, transparent 54.16667%, transparent 58.33333%, #ffdede 58.33333%, #ffdede 62.5%, transparent 62.5%, transparent 66.66667%, #ffdede 66.66667%, #ffdede 70.83333%, transparent 70.83333%, transparent 75%, #ffdede 75%, #ffdede 79.16667%, transparent 79.16667%, transparent 83.33333%, #ffdede 83.33333%, #ffdede 87.5%, transparent 87.5%, transparent 91.66667%, #ffdede 91.66667%, #ffdede 95.83333%, transparent 95.83333%) 10px top no-repeat, linear-gradient(left, transparent 4.16667%, #ffdede 4.16667%, #ffdede 8.33333%, transparent 8.33333%, transparent 12.5%, #ffdede 12.5%, #ffdede 16.66667%, transparent 16.66667%, transparent 20.83333%, #ffdede 20.83333%, #ffdede 25%, transparent 25%, transparent 29.16667%, #ffdede 29.16667%, #ffdede 33.33333%, transparent 33.33333%, transparent 37.5%, #ffdede 37.5%, #ffdede 41.66667%, transparent 41.66667%, transparent 45.83333%, #ffdede 45.83333%, #ffdede 50%, transparent 50%, transparent 54.16667%, #ffdede 54.16667%, #ffdede 58.33333%, transparent 58.33333%, transparent 62.5%, #ffdede 62.5%, #ffdede 66.66667%, transparent 66.66667%, transparent 70.83333%, #ffdede 70.83333%, #ffdede 75%, transparent 75%, transparent 79.16667%, #ffdede 79.16667%, #ffdede 83.33333%, transparent 83.33333%, transparent 87.5%, #ffdede 87.5%, #ffdede 91.66667%, transparent 91.66667%, transparent 95.83333%, #ffdede 95.83333%) -10px top no-repeat; + /* Test zen-grid-background(), 5 column grid, 10% gutter and black grid color */ + background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(10%, #000000), color-stop(10%, transparent), color-stop(20%, transparent), color-stop(20%, #000000), color-stop(30%, #000000), color-stop(30%, transparent), color-stop(40%, transparent), color-stop(40%, #000000), color-stop(50%, #000000), color-stop(50%, transparent), color-stop(60%, transparent), color-stop(60%, #000000), color-stop(70%, #000000), color-stop(70%, transparent), color-stop(80%, transparent), color-stop(80%, #000000), color-stop(90%, #000000), color-stop(90%, transparent)) 5% top no-repeat, -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(10%, transparent), color-stop(10%, #000000), color-stop(20%, #000000), color-stop(20%, transparent), color-stop(30%, transparent), color-stop(30%, #000000), color-stop(40%, #000000), color-stop(40%, transparent), color-stop(50%, transparent), color-stop(50%, #000000), color-stop(60%, #000000), color-stop(60%, transparent), color-stop(70%, transparent), color-stop(70%, #000000), color-stop(80%, #000000), color-stop(80%, transparent), color-stop(90%, transparent), color-stop(90%, #000000)) -5% top no-repeat; + background: -webkit-linear-gradient(left, #000000 10%, transparent 10%, transparent 20%, #000000 20%, #000000 30%, transparent 30%, transparent 40%, #000000 40%, #000000 50%, transparent 50%, transparent 60%, #000000 60%, #000000 70%, transparent 70%, transparent 80%, #000000 80%, #000000 90%, transparent 90%) 5% top no-repeat, -webkit-linear-gradient(left, transparent 10%, #000000 10%, #000000 20%, transparent 20%, transparent 30%, #000000 30%, #000000 40%, transparent 40%, transparent 50%, #000000 50%, #000000 60%, transparent 60%, transparent 70%, #000000 70%, #000000 80%, transparent 80%, transparent 90%, #000000 90%) -5% top no-repeat; + background: -moz-linear-gradient(left, #000000 10%, transparent 10%, transparent 20%, #000000 20%, #000000 30%, transparent 30%, transparent 40%, #000000 40%, #000000 50%, transparent 50%, transparent 60%, #000000 60%, #000000 70%, transparent 70%, transparent 80%, #000000 80%, #000000 90%, transparent 90%) 5% top no-repeat, -moz-linear-gradient(left, transparent 10%, #000000 10%, #000000 20%, transparent 20%, transparent 30%, #000000 30%, #000000 40%, transparent 40%, transparent 50%, #000000 50%, #000000 60%, transparent 60%, transparent 70%, #000000 70%, #000000 80%, transparent 80%, transparent 90%, #000000 90%) -5% top no-repeat; + background: -o-linear-gradient(left, #000000 10%, transparent 10%, transparent 20%, #000000 20%, #000000 30%, transparent 30%, transparent 40%, #000000 40%, #000000 50%, transparent 50%, transparent 60%, #000000 60%, #000000 70%, transparent 70%, transparent 80%, #000000 80%, #000000 90%, transparent 90%) 5% top no-repeat, -o-linear-gradient(left, transparent 10%, #000000 10%, #000000 20%, transparent 20%, transparent 30%, #000000 30%, #000000 40%, transparent 40%, transparent 50%, #000000 50%, #000000 60%, transparent 60%, transparent 70%, #000000 70%, #000000 80%, transparent 80%, transparent 90%, #000000 90%) -5% top no-repeat; + background: linear-gradient(left, #000000 10%, transparent 10%, transparent 20%, #000000 20%, #000000 30%, transparent 30%, transparent 40%, #000000 40%, #000000 50%, transparent 50%, transparent 60%, #000000 60%, #000000 70%, transparent 70%, transparent 80%, #000000 80%, #000000 90%, transparent 90%) 5% top no-repeat, linear-gradient(left, transparent 10%, #000000 10%, #000000 20%, transparent 20%, transparent 30%, #000000 30%, #000000 40%, transparent 40%, transparent 50%, #000000 50%, #000000 60%, transparent 60%, transparent 70%, #000000 70%, #000000 80%, transparent 80%, transparent 90%, #000000 90%) -5% top no-repeat; + /* Test zen-grid-background() with 5 column grid and 40px gutter */ + background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(10%, rgba(255, 222, 222, 0.8)), color-stop(10%, transparent), color-stop(20%, transparent), color-stop(20%, rgba(255, 222, 222, 0.8)), color-stop(30%, rgba(255, 222, 222, 0.8)), color-stop(30%, transparent), color-stop(40%, transparent), color-stop(40%, rgba(255, 222, 222, 0.8)), color-stop(50%, rgba(255, 222, 222, 0.8)), color-stop(50%, transparent), color-stop(60%, transparent), color-stop(60%, rgba(255, 222, 222, 0.8)), color-stop(70%, rgba(255, 222, 222, 0.8)), color-stop(70%, transparent), color-stop(80%, transparent), color-stop(80%, rgba(255, 222, 222, 0.8)), color-stop(90%, rgba(255, 222, 222, 0.8)), color-stop(90%, transparent)) 20px top no-repeat, -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(10%, transparent), color-stop(10%, rgba(255, 222, 222, 0.8)), color-stop(20%, rgba(255, 222, 222, 0.8)), color-stop(20%, transparent), color-stop(30%, transparent), color-stop(30%, rgba(255, 222, 222, 0.8)), color-stop(40%, rgba(255, 222, 222, 0.8)), color-stop(40%, transparent), color-stop(50%, transparent), color-stop(50%, rgba(255, 222, 222, 0.8)), color-stop(60%, rgba(255, 222, 222, 0.8)), color-stop(60%, transparent), color-stop(70%, transparent), color-stop(70%, rgba(255, 222, 222, 0.8)), color-stop(80%, rgba(255, 222, 222, 0.8)), color-stop(80%, transparent), color-stop(90%, transparent), color-stop(90%, rgba(255, 222, 222, 0.8))) -20px top no-repeat; + background: -webkit-linear-gradient(left, rgba(255, 222, 222, 0.8) 10%, transparent 10%, transparent 20%, rgba(255, 222, 222, 0.8) 20%, rgba(255, 222, 222, 0.8) 30%, transparent 30%, transparent 40%, rgba(255, 222, 222, 0.8) 40%, rgba(255, 222, 222, 0.8) 50%, transparent 50%, transparent 60%, rgba(255, 222, 222, 0.8) 60%, rgba(255, 222, 222, 0.8) 70%, transparent 70%, transparent 80%, rgba(255, 222, 222, 0.8) 80%, rgba(255, 222, 222, 0.8) 90%, transparent 90%) 20px top no-repeat, -webkit-linear-gradient(left, transparent 10%, rgba(255, 222, 222, 0.8) 10%, rgba(255, 222, 222, 0.8) 20%, transparent 20%, transparent 30%, rgba(255, 222, 222, 0.8) 30%, rgba(255, 222, 222, 0.8) 40%, transparent 40%, transparent 50%, rgba(255, 222, 222, 0.8) 50%, rgba(255, 222, 222, 0.8) 60%, transparent 60%, transparent 70%, rgba(255, 222, 222, 0.8) 70%, rgba(255, 222, 222, 0.8) 80%, transparent 80%, transparent 90%, rgba(255, 222, 222, 0.8) 90%) -20px top no-repeat; + background: -moz-linear-gradient(left, rgba(255, 222, 222, 0.8) 10%, transparent 10%, transparent 20%, rgba(255, 222, 222, 0.8) 20%, rgba(255, 222, 222, 0.8) 30%, transparent 30%, transparent 40%, rgba(255, 222, 222, 0.8) 40%, rgba(255, 222, 222, 0.8) 50%, transparent 50%, transparent 60%, rgba(255, 222, 222, 0.8) 60%, rgba(255, 222, 222, 0.8) 70%, transparent 70%, transparent 80%, rgba(255, 222, 222, 0.8) 80%, rgba(255, 222, 222, 0.8) 90%, transparent 90%) 20px top no-repeat, -moz-linear-gradient(left, transparent 10%, rgba(255, 222, 222, 0.8) 10%, rgba(255, 222, 222, 0.8) 20%, transparent 20%, transparent 30%, rgba(255, 222, 222, 0.8) 30%, rgba(255, 222, 222, 0.8) 40%, transparent 40%, transparent 50%, rgba(255, 222, 222, 0.8) 50%, rgba(255, 222, 222, 0.8) 60%, transparent 60%, transparent 70%, rgba(255, 222, 222, 0.8) 70%, rgba(255, 222, 222, 0.8) 80%, transparent 80%, transparent 90%, rgba(255, 222, 222, 0.8) 90%) -20px top no-repeat; + background: -o-linear-gradient(left, rgba(255, 222, 222, 0.8) 10%, transparent 10%, transparent 20%, rgba(255, 222, 222, 0.8) 20%, rgba(255, 222, 222, 0.8) 30%, transparent 30%, transparent 40%, rgba(255, 222, 222, 0.8) 40%, rgba(255, 222, 222, 0.8) 50%, transparent 50%, transparent 60%, rgba(255, 222, 222, 0.8) 60%, rgba(255, 222, 222, 0.8) 70%, transparent 70%, transparent 80%, rgba(255, 222, 222, 0.8) 80%, rgba(255, 222, 222, 0.8) 90%, transparent 90%) 20px top no-repeat, -o-linear-gradient(left, transparent 10%, rgba(255, 222, 222, 0.8) 10%, rgba(255, 222, 222, 0.8) 20%, transparent 20%, transparent 30%, rgba(255, 222, 222, 0.8) 30%, rgba(255, 222, 222, 0.8) 40%, transparent 40%, transparent 50%, rgba(255, 222, 222, 0.8) 50%, rgba(255, 222, 222, 0.8) 60%, transparent 60%, transparent 70%, rgba(255, 222, 222, 0.8) 70%, rgba(255, 222, 222, 0.8) 80%, transparent 80%, transparent 90%, rgba(255, 222, 222, 0.8) 90%) -20px top no-repeat; + background: linear-gradient(left, rgba(255, 222, 222, 0.8) 10%, transparent 10%, transparent 20%, rgba(255, 222, 222, 0.8) 20%, rgba(255, 222, 222, 0.8) 30%, transparent 30%, transparent 40%, rgba(255, 222, 222, 0.8) 40%, rgba(255, 222, 222, 0.8) 50%, transparent 50%, transparent 60%, rgba(255, 222, 222, 0.8) 60%, rgba(255, 222, 222, 0.8) 70%, transparent 70%, transparent 80%, rgba(255, 222, 222, 0.8) 80%, rgba(255, 222, 222, 0.8) 90%, transparent 90%) 20px top no-repeat, linear-gradient(left, transparent 10%, rgba(255, 222, 222, 0.8) 10%, rgba(255, 222, 222, 0.8) 20%, transparent 20%, transparent 30%, rgba(255, 222, 222, 0.8) 30%, rgba(255, 222, 222, 0.8) 40%, transparent 40%, transparent 50%, rgba(255, 222, 222, 0.8) 50%, rgba(255, 222, 222, 0.8) 60%, transparent 60%, transparent 70%, rgba(255, 222, 222, 0.8) 70%, rgba(255, 222, 222, 0.8) 80%, transparent 80%, transparent 90%, rgba(255, 222, 222, 0.8) 90%) -20px top no-repeat; + /* Test zen-grid-background(), 5 column grid and 10% gutter and $zen-reverse-all-floats */ + background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(10%, rgba(255, 222, 222, 0.8)), color-stop(10%, transparent), color-stop(20%, transparent), color-stop(20%, rgba(255, 222, 222, 0.8)), color-stop(30%, rgba(255, 222, 222, 0.8)), color-stop(30%, transparent), color-stop(40%, transparent), color-stop(40%, rgba(255, 222, 222, 0.8)), color-stop(50%, rgba(255, 222, 222, 0.8)), color-stop(50%, transparent), color-stop(60%, transparent), color-stop(60%, rgba(255, 222, 222, 0.8)), color-stop(70%, rgba(255, 222, 222, 0.8)), color-stop(70%, transparent), color-stop(80%, transparent), color-stop(80%, rgba(255, 222, 222, 0.8)), color-stop(90%, rgba(255, 222, 222, 0.8)), color-stop(90%, transparent)) 5% top no-repeat, -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(10%, transparent), color-stop(10%, rgba(255, 222, 222, 0.8)), color-stop(20%, rgba(255, 222, 222, 0.8)), color-stop(20%, transparent), color-stop(30%, transparent), color-stop(30%, rgba(255, 222, 222, 0.8)), color-stop(40%, rgba(255, 222, 222, 0.8)), color-stop(40%, transparent), color-stop(50%, transparent), color-stop(50%, rgba(255, 222, 222, 0.8)), color-stop(60%, rgba(255, 222, 222, 0.8)), color-stop(60%, transparent), color-stop(70%, transparent), color-stop(70%, rgba(255, 222, 222, 0.8)), color-stop(80%, rgba(255, 222, 222, 0.8)), color-stop(80%, transparent), color-stop(90%, transparent), color-stop(90%, rgba(255, 222, 222, 0.8))) -5% top no-repeat; + background: -webkit-linear-gradient(left, rgba(255, 222, 222, 0.8) 10%, transparent 10%, transparent 20%, rgba(255, 222, 222, 0.8) 20%, rgba(255, 222, 222, 0.8) 30%, transparent 30%, transparent 40%, rgba(255, 222, 222, 0.8) 40%, rgba(255, 222, 222, 0.8) 50%, transparent 50%, transparent 60%, rgba(255, 222, 222, 0.8) 60%, rgba(255, 222, 222, 0.8) 70%, transparent 70%, transparent 80%, rgba(255, 222, 222, 0.8) 80%, rgba(255, 222, 222, 0.8) 90%, transparent 90%) 5% top no-repeat, -webkit-linear-gradient(left, transparent 10%, rgba(255, 222, 222, 0.8) 10%, rgba(255, 222, 222, 0.8) 20%, transparent 20%, transparent 30%, rgba(255, 222, 222, 0.8) 30%, rgba(255, 222, 222, 0.8) 40%, transparent 40%, transparent 50%, rgba(255, 222, 222, 0.8) 50%, rgba(255, 222, 222, 0.8) 60%, transparent 60%, transparent 70%, rgba(255, 222, 222, 0.8) 70%, rgba(255, 222, 222, 0.8) 80%, transparent 80%, transparent 90%, rgba(255, 222, 222, 0.8) 90%) -5% top no-repeat; + background: -moz-linear-gradient(left, rgba(255, 222, 222, 0.8) 10%, transparent 10%, transparent 20%, rgba(255, 222, 222, 0.8) 20%, rgba(255, 222, 222, 0.8) 30%, transparent 30%, transparent 40%, rgba(255, 222, 222, 0.8) 40%, rgba(255, 222, 222, 0.8) 50%, transparent 50%, transparent 60%, rgba(255, 222, 222, 0.8) 60%, rgba(255, 222, 222, 0.8) 70%, transparent 70%, transparent 80%, rgba(255, 222, 222, 0.8) 80%, rgba(255, 222, 222, 0.8) 90%, transparent 90%) 5% top no-repeat, -moz-linear-gradient(left, transparent 10%, rgba(255, 222, 222, 0.8) 10%, rgba(255, 222, 222, 0.8) 20%, transparent 20%, transparent 30%, rgba(255, 222, 222, 0.8) 30%, rgba(255, 222, 222, 0.8) 40%, transparent 40%, transparent 50%, rgba(255, 222, 222, 0.8) 50%, rgba(255, 222, 222, 0.8) 60%, transparent 60%, transparent 70%, rgba(255, 222, 222, 0.8) 70%, rgba(255, 222, 222, 0.8) 80%, transparent 80%, transparent 90%, rgba(255, 222, 222, 0.8) 90%) -5% top no-repeat; + background: -o-linear-gradient(left, rgba(255, 222, 222, 0.8) 10%, transparent 10%, transparent 20%, rgba(255, 222, 222, 0.8) 20%, rgba(255, 222, 222, 0.8) 30%, transparent 30%, transparent 40%, rgba(255, 222, 222, 0.8) 40%, rgba(255, 222, 222, 0.8) 50%, transparent 50%, transparent 60%, rgba(255, 222, 222, 0.8) 60%, rgba(255, 222, 222, 0.8) 70%, transparent 70%, transparent 80%, rgba(255, 222, 222, 0.8) 80%, rgba(255, 222, 222, 0.8) 90%, transparent 90%) 5% top no-repeat, -o-linear-gradient(left, transparent 10%, rgba(255, 222, 222, 0.8) 10%, rgba(255, 222, 222, 0.8) 20%, transparent 20%, transparent 30%, rgba(255, 222, 222, 0.8) 30%, rgba(255, 222, 222, 0.8) 40%, transparent 40%, transparent 50%, rgba(255, 222, 222, 0.8) 50%, rgba(255, 222, 222, 0.8) 60%, transparent 60%, transparent 70%, rgba(255, 222, 222, 0.8) 70%, rgba(255, 222, 222, 0.8) 80%, transparent 80%, transparent 90%, rgba(255, 222, 222, 0.8) 90%) -5% top no-repeat; + background: linear-gradient(left, rgba(255, 222, 222, 0.8) 10%, transparent 10%, transparent 20%, rgba(255, 222, 222, 0.8) 20%, rgba(255, 222, 222, 0.8) 30%, transparent 30%, transparent 40%, rgba(255, 222, 222, 0.8) 40%, rgba(255, 222, 222, 0.8) 50%, transparent 50%, transparent 60%, rgba(255, 222, 222, 0.8) 60%, rgba(255, 222, 222, 0.8) 70%, transparent 70%, transparent 80%, rgba(255, 222, 222, 0.8) 80%, rgba(255, 222, 222, 0.8) 90%, transparent 90%) 5% top no-repeat, linear-gradient(left, transparent 10%, rgba(255, 222, 222, 0.8) 10%, rgba(255, 222, 222, 0.8) 20%, transparent 20%, transparent 30%, rgba(255, 222, 222, 0.8) 30%, rgba(255, 222, 222, 0.8) 40%, transparent 40%, transparent 50%, rgba(255, 222, 222, 0.8) 50%, rgba(255, 222, 222, 0.8) 60%, transparent 60%, transparent 70%, rgba(255, 222, 222, 0.8) 70%, rgba(255, 222, 222, 0.8) 80%, transparent 80%, transparent 90%, rgba(255, 222, 222, 0.8) 90%) -5% top no-repeat; + /* Test zen-grid-background() with 5 column grid and 40px gutter and $zen-reverse-all-floats */ + background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(10%, rgba(255, 222, 222, 0.8)), color-stop(10%, transparent), color-stop(20%, transparent), color-stop(20%, rgba(255, 222, 222, 0.8)), color-stop(30%, rgba(255, 222, 222, 0.8)), color-stop(30%, transparent), color-stop(40%, transparent), color-stop(40%, rgba(255, 222, 222, 0.8)), color-stop(50%, rgba(255, 222, 222, 0.8)), color-stop(50%, transparent), color-stop(60%, transparent), color-stop(60%, rgba(255, 222, 222, 0.8)), color-stop(70%, rgba(255, 222, 222, 0.8)), color-stop(70%, transparent), color-stop(80%, transparent), color-stop(80%, rgba(255, 222, 222, 0.8)), color-stop(90%, rgba(255, 222, 222, 0.8)), color-stop(90%, transparent)) 20px top no-repeat, -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(10%, transparent), color-stop(10%, rgba(255, 222, 222, 0.8)), color-stop(20%, rgba(255, 222, 222, 0.8)), color-stop(20%, transparent), color-stop(30%, transparent), color-stop(30%, rgba(255, 222, 222, 0.8)), color-stop(40%, rgba(255, 222, 222, 0.8)), color-stop(40%, transparent), color-stop(50%, transparent), color-stop(50%, rgba(255, 222, 222, 0.8)), color-stop(60%, rgba(255, 222, 222, 0.8)), color-stop(60%, transparent), color-stop(70%, transparent), color-stop(70%, rgba(255, 222, 222, 0.8)), color-stop(80%, rgba(255, 222, 222, 0.8)), color-stop(80%, transparent), color-stop(90%, transparent), color-stop(90%, rgba(255, 222, 222, 0.8))) -20px top no-repeat; + background: -webkit-linear-gradient(left, rgba(255, 222, 222, 0.8) 10%, transparent 10%, transparent 20%, rgba(255, 222, 222, 0.8) 20%, rgba(255, 222, 222, 0.8) 30%, transparent 30%, transparent 40%, rgba(255, 222, 222, 0.8) 40%, rgba(255, 222, 222, 0.8) 50%, transparent 50%, transparent 60%, rgba(255, 222, 222, 0.8) 60%, rgba(255, 222, 222, 0.8) 70%, transparent 70%, transparent 80%, rgba(255, 222, 222, 0.8) 80%, rgba(255, 222, 222, 0.8) 90%, transparent 90%) 20px top no-repeat, -webkit-linear-gradient(left, transparent 10%, rgba(255, 222, 222, 0.8) 10%, rgba(255, 222, 222, 0.8) 20%, transparent 20%, transparent 30%, rgba(255, 222, 222, 0.8) 30%, rgba(255, 222, 222, 0.8) 40%, transparent 40%, transparent 50%, rgba(255, 222, 222, 0.8) 50%, rgba(255, 222, 222, 0.8) 60%, transparent 60%, transparent 70%, rgba(255, 222, 222, 0.8) 70%, rgba(255, 222, 222, 0.8) 80%, transparent 80%, transparent 90%, rgba(255, 222, 222, 0.8) 90%) -20px top no-repeat; + background: -moz-linear-gradient(left, rgba(255, 222, 222, 0.8) 10%, transparent 10%, transparent 20%, rgba(255, 222, 222, 0.8) 20%, rgba(255, 222, 222, 0.8) 30%, transparent 30%, transparent 40%, rgba(255, 222, 222, 0.8) 40%, rgba(255, 222, 222, 0.8) 50%, transparent 50%, transparent 60%, rgba(255, 222, 222, 0.8) 60%, rgba(255, 222, 222, 0.8) 70%, transparent 70%, transparent 80%, rgba(255, 222, 222, 0.8) 80%, rgba(255, 222, 222, 0.8) 90%, transparent 90%) 20px top no-repeat, -moz-linear-gradient(left, transparent 10%, rgba(255, 222, 222, 0.8) 10%, rgba(255, 222, 222, 0.8) 20%, transparent 20%, transparent 30%, rgba(255, 222, 222, 0.8) 30%, rgba(255, 222, 222, 0.8) 40%, transparent 40%, transparent 50%, rgba(255, 222, 222, 0.8) 50%, rgba(255, 222, 222, 0.8) 60%, transparent 60%, transparent 70%, rgba(255, 222, 222, 0.8) 70%, rgba(255, 222, 222, 0.8) 80%, transparent 80%, transparent 90%, rgba(255, 222, 222, 0.8) 90%) -20px top no-repeat; + background: -o-linear-gradient(left, rgba(255, 222, 222, 0.8) 10%, transparent 10%, transparent 20%, rgba(255, 222, 222, 0.8) 20%, rgba(255, 222, 222, 0.8) 30%, transparent 30%, transparent 40%, rgba(255, 222, 222, 0.8) 40%, rgba(255, 222, 222, 0.8) 50%, transparent 50%, transparent 60%, rgba(255, 222, 222, 0.8) 60%, rgba(255, 222, 222, 0.8) 70%, transparent 70%, transparent 80%, rgba(255, 222, 222, 0.8) 80%, rgba(255, 222, 222, 0.8) 90%, transparent 90%) 20px top no-repeat, -o-linear-gradient(left, transparent 10%, rgba(255, 222, 222, 0.8) 10%, rgba(255, 222, 222, 0.8) 20%, transparent 20%, transparent 30%, rgba(255, 222, 222, 0.8) 30%, rgba(255, 222, 222, 0.8) 40%, transparent 40%, transparent 50%, rgba(255, 222, 222, 0.8) 50%, rgba(255, 222, 222, 0.8) 60%, transparent 60%, transparent 70%, rgba(255, 222, 222, 0.8) 70%, rgba(255, 222, 222, 0.8) 80%, transparent 80%, transparent 90%, rgba(255, 222, 222, 0.8) 90%) -20px top no-repeat; + background: linear-gradient(left, rgba(255, 222, 222, 0.8) 10%, transparent 10%, transparent 20%, rgba(255, 222, 222, 0.8) 20%, rgba(255, 222, 222, 0.8) 30%, transparent 30%, transparent 40%, rgba(255, 222, 222, 0.8) 40%, rgba(255, 222, 222, 0.8) 50%, transparent 50%, transparent 60%, rgba(255, 222, 222, 0.8) 60%, rgba(255, 222, 222, 0.8) 70%, transparent 70%, transparent 80%, rgba(255, 222, 222, 0.8) 80%, rgba(255, 222, 222, 0.8) 90%, transparent 90%) 20px top no-repeat, linear-gradient(left, transparent 10%, rgba(255, 222, 222, 0.8) 10%, rgba(255, 222, 222, 0.8) 20%, transparent 20%, transparent 30%, rgba(255, 222, 222, 0.8) 30%, rgba(255, 222, 222, 0.8) 40%, transparent 40%, transparent 50%, rgba(255, 222, 222, 0.8) 50%, rgba(255, 222, 222, 0.8) 60%, transparent 60%, transparent 70%, rgba(255, 222, 222, 0.8) 70%, rgba(255, 222, 222, 0.8) 80%, transparent 80%, transparent 90%, rgba(255, 222, 222, 0.8) 90%) -20px top no-repeat; + /* Test zen-grid-background() with $zen-grid-width: 1000px, 5 column grid and 40px gutter */ + background: -webkit-gradient(linear, 0% 50%, 900 50%, color-stop(11.11111%, rgba(255, 222, 222, 0.8)), color-stop(11.11111%, transparent), color-stop(22.22222%, transparent), color-stop(22.22222%, rgba(255, 222, 222, 0.8)), color-stop(33.33333%, rgba(255, 222, 222, 0.8)), color-stop(33.33333%, transparent), color-stop(44.44444%, transparent), color-stop(44.44444%, rgba(255, 222, 222, 0.8)), color-stop(55.55556%, rgba(255, 222, 222, 0.8)), color-stop(55.55556%, transparent), color-stop(66.66667%, transparent), color-stop(66.66667%, rgba(255, 222, 222, 0.8)), color-stop(77.77778%, rgba(255, 222, 222, 0.8)), color-stop(77.77778%, transparent), color-stop(88.88889%, transparent), color-stop(88.88889%, rgba(255, 222, 222, 0.8)), color-stop(100%, rgba(255, 222, 222, 0.8)), color-stop(100%, transparent)) 20px top no-repeat, -webkit-gradient(linear, 0% 50%, 900 50%, color-stop(11.11111%, transparent), color-stop(11.11111%, rgba(255, 222, 222, 0.8)), color-stop(22.22222%, rgba(255, 222, 222, 0.8)), color-stop(22.22222%, transparent), color-stop(33.33333%, transparent), color-stop(33.33333%, rgba(255, 222, 222, 0.8)), color-stop(44.44444%, rgba(255, 222, 222, 0.8)), color-stop(44.44444%, transparent), color-stop(55.55556%, transparent), color-stop(55.55556%, rgba(255, 222, 222, 0.8)), color-stop(66.66667%, rgba(255, 222, 222, 0.8)), color-stop(66.66667%, transparent), color-stop(77.77778%, transparent), color-stop(77.77778%, rgba(255, 222, 222, 0.8)), color-stop(88.88889%, rgba(255, 222, 222, 0.8)), color-stop(88.88889%, transparent), color-stop(100%, transparent), color-stop(100%, rgba(255, 222, 222, 0.8))) -20px top no-repeat; + background: -webkit-linear-gradient(left, rgba(255, 222, 222, 0.8) 100px, transparent 100px, transparent 200px, rgba(255, 222, 222, 0.8) 200px, rgba(255, 222, 222, 0.8) 300px, transparent 300px, transparent 400px, rgba(255, 222, 222, 0.8) 400px, rgba(255, 222, 222, 0.8) 500px, transparent 500px, transparent 600px, rgba(255, 222, 222, 0.8) 600px, rgba(255, 222, 222, 0.8) 700px, transparent 700px, transparent 800px, rgba(255, 222, 222, 0.8) 800px, rgba(255, 222, 222, 0.8) 900px, transparent 900px) 20px top no-repeat, -webkit-linear-gradient(left, transparent 100px, rgba(255, 222, 222, 0.8) 100px, rgba(255, 222, 222, 0.8) 200px, transparent 200px, transparent 300px, rgba(255, 222, 222, 0.8) 300px, rgba(255, 222, 222, 0.8) 400px, transparent 400px, transparent 500px, rgba(255, 222, 222, 0.8) 500px, rgba(255, 222, 222, 0.8) 600px, transparent 600px, transparent 700px, rgba(255, 222, 222, 0.8) 700px, rgba(255, 222, 222, 0.8) 800px, transparent 800px, transparent 900px, rgba(255, 222, 222, 0.8) 900px) -20px top no-repeat; + background: -moz-linear-gradient(left, rgba(255, 222, 222, 0.8) 100px, transparent 100px, transparent 200px, rgba(255, 222, 222, 0.8) 200px, rgba(255, 222, 222, 0.8) 300px, transparent 300px, transparent 400px, rgba(255, 222, 222, 0.8) 400px, rgba(255, 222, 222, 0.8) 500px, transparent 500px, transparent 600px, rgba(255, 222, 222, 0.8) 600px, rgba(255, 222, 222, 0.8) 700px, transparent 700px, transparent 800px, rgba(255, 222, 222, 0.8) 800px, rgba(255, 222, 222, 0.8) 900px, transparent 900px) 20px top no-repeat, -moz-linear-gradient(left, transparent 100px, rgba(255, 222, 222, 0.8) 100px, rgba(255, 222, 222, 0.8) 200px, transparent 200px, transparent 300px, rgba(255, 222, 222, 0.8) 300px, rgba(255, 222, 222, 0.8) 400px, transparent 400px, transparent 500px, rgba(255, 222, 222, 0.8) 500px, rgba(255, 222, 222, 0.8) 600px, transparent 600px, transparent 700px, rgba(255, 222, 222, 0.8) 700px, rgba(255, 222, 222, 0.8) 800px, transparent 800px, transparent 900px, rgba(255, 222, 222, 0.8) 900px) -20px top no-repeat; + background: -o-linear-gradient(left, rgba(255, 222, 222, 0.8) 100px, transparent 100px, transparent 200px, rgba(255, 222, 222, 0.8) 200px, rgba(255, 222, 222, 0.8) 300px, transparent 300px, transparent 400px, rgba(255, 222, 222, 0.8) 400px, rgba(255, 222, 222, 0.8) 500px, transparent 500px, transparent 600px, rgba(255, 222, 222, 0.8) 600px, rgba(255, 222, 222, 0.8) 700px, transparent 700px, transparent 800px, rgba(255, 222, 222, 0.8) 800px, rgba(255, 222, 222, 0.8) 900px, transparent 900px) 20px top no-repeat, -o-linear-gradient(left, transparent 100px, rgba(255, 222, 222, 0.8) 100px, rgba(255, 222, 222, 0.8) 200px, transparent 200px, transparent 300px, rgba(255, 222, 222, 0.8) 300px, rgba(255, 222, 222, 0.8) 400px, transparent 400px, transparent 500px, rgba(255, 222, 222, 0.8) 500px, rgba(255, 222, 222, 0.8) 600px, transparent 600px, transparent 700px, rgba(255, 222, 222, 0.8) 700px, rgba(255, 222, 222, 0.8) 800px, transparent 800px, transparent 900px, rgba(255, 222, 222, 0.8) 900px) -20px top no-repeat; + background: linear-gradient(left, rgba(255, 222, 222, 0.8) 100px, transparent 100px, transparent 200px, rgba(255, 222, 222, 0.8) 200px, rgba(255, 222, 222, 0.8) 300px, transparent 300px, transparent 400px, rgba(255, 222, 222, 0.8) 400px, rgba(255, 222, 222, 0.8) 500px, transparent 500px, transparent 600px, rgba(255, 222, 222, 0.8) 600px, rgba(255, 222, 222, 0.8) 700px, transparent 700px, transparent 800px, rgba(255, 222, 222, 0.8) 800px, rgba(255, 222, 222, 0.8) 900px, transparent 900px) 20px top no-repeat, linear-gradient(left, transparent 100px, rgba(255, 222, 222, 0.8) 100px, rgba(255, 222, 222, 0.8) 200px, transparent 200px, transparent 300px, rgba(255, 222, 222, 0.8) 300px, rgba(255, 222, 222, 0.8) 400px, transparent 400px, transparent 500px, rgba(255, 222, 222, 0.8) 500px, rgba(255, 222, 222, 0.8) 600px, transparent 600px, transparent 700px, rgba(255, 222, 222, 0.8) 700px, rgba(255, 222, 222, 0.8) 800px, transparent 800px, transparent 900px, rgba(255, 222, 222, 0.8) 900px) -20px top no-repeat; + /* Test zen-grid-background() with all 24 grid numbers */ + background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(2.08333%, rgba(255, 222, 222, 0.8)), color-stop(2.08333%, transparent), color-stop(4.16667%, transparent), color-stop(4.16667%, rgba(255, 222, 222, 0.8)), color-stop(6.25%, rgba(255, 222, 222, 0.8)), color-stop(6.25%, transparent), color-stop(8.33333%, transparent), color-stop(8.33333%, rgba(255, 222, 222, 0.8)), color-stop(10.41667%, rgba(255, 222, 222, 0.8)), color-stop(10.41667%, transparent), color-stop(12.5%, transparent), color-stop(12.5%, rgba(255, 222, 222, 0.8)), color-stop(14.58333%, rgba(255, 222, 222, 0.8)), color-stop(14.58333%, transparent), color-stop(16.66667%, transparent), color-stop(16.66667%, rgba(255, 222, 222, 0.8)), color-stop(18.75%, rgba(255, 222, 222, 0.8)), color-stop(18.75%, transparent), color-stop(20.83333%, transparent), color-stop(20.83333%, rgba(255, 222, 222, 0.8)), color-stop(22.91667%, rgba(255, 222, 222, 0.8)), color-stop(22.91667%, transparent), color-stop(25%, transparent), color-stop(25%, rgba(255, 222, 222, 0.8)), color-stop(27.08333%, rgba(255, 222, 222, 0.8)), color-stop(27.08333%, transparent), color-stop(29.16667%, transparent), color-stop(29.16667%, rgba(255, 222, 222, 0.8)), color-stop(31.25%, rgba(255, 222, 222, 0.8)), color-stop(31.25%, transparent), color-stop(33.33333%, transparent), color-stop(33.33333%, rgba(255, 222, 222, 0.8)), color-stop(35.41667%, rgba(255, 222, 222, 0.8)), color-stop(35.41667%, transparent), color-stop(37.5%, transparent), color-stop(37.5%, rgba(255, 222, 222, 0.8)), color-stop(39.58333%, rgba(255, 222, 222, 0.8)), color-stop(39.58333%, transparent), color-stop(41.66667%, transparent), color-stop(41.66667%, rgba(255, 222, 222, 0.8)), color-stop(43.75%, rgba(255, 222, 222, 0.8)), color-stop(43.75%, transparent), color-stop(45.83333%, transparent), color-stop(45.83333%, rgba(255, 222, 222, 0.8)), color-stop(47.91667%, rgba(255, 222, 222, 0.8)), color-stop(47.91667%, transparent), color-stop(50%, transparent), color-stop(50%, rgba(255, 222, 222, 0.8)), color-stop(52.08333%, rgba(255, 222, 222, 0.8)), color-stop(52.08333%, transparent), color-stop(54.16667%, transparent), color-stop(54.16667%, rgba(255, 222, 222, 0.8)), color-stop(56.25%, rgba(255, 222, 222, 0.8)), color-stop(56.25%, transparent), color-stop(58.33333%, transparent), color-stop(58.33333%, rgba(255, 222, 222, 0.8)), color-stop(60.41667%, rgba(255, 222, 222, 0.8)), color-stop(60.41667%, transparent), color-stop(62.5%, transparent), color-stop(62.5%, rgba(255, 222, 222, 0.8)), color-stop(64.58333%, rgba(255, 222, 222, 0.8)), color-stop(64.58333%, transparent), color-stop(66.66667%, transparent), color-stop(66.66667%, rgba(255, 222, 222, 0.8)), color-stop(68.75%, rgba(255, 222, 222, 0.8)), color-stop(68.75%, transparent), color-stop(70.83333%, transparent), color-stop(70.83333%, rgba(255, 222, 222, 0.8)), color-stop(72.91667%, rgba(255, 222, 222, 0.8)), color-stop(72.91667%, transparent), color-stop(75%, transparent), color-stop(75%, rgba(255, 222, 222, 0.8)), color-stop(77.08333%, rgba(255, 222, 222, 0.8)), color-stop(77.08333%, transparent), color-stop(79.16667%, transparent), color-stop(79.16667%, rgba(255, 222, 222, 0.8)), color-stop(81.25%, rgba(255, 222, 222, 0.8)), color-stop(81.25%, transparent), color-stop(83.33333%, transparent), color-stop(83.33333%, rgba(255, 222, 222, 0.8)), color-stop(85.41667%, rgba(255, 222, 222, 0.8)), color-stop(85.41667%, transparent), color-stop(87.5%, transparent), color-stop(87.5%, rgba(255, 222, 222, 0.8)), color-stop(89.58333%, rgba(255, 222, 222, 0.8)), color-stop(89.58333%, transparent), color-stop(91.66667%, transparent), color-stop(91.66667%, rgba(255, 222, 222, 0.8)), color-stop(93.75%, rgba(255, 222, 222, 0.8)), color-stop(93.75%, transparent), color-stop(95.83333%, transparent), color-stop(95.83333%, rgba(255, 222, 222, 0.8)), color-stop(97.91667%, rgba(255, 222, 222, 0.8)), color-stop(97.91667%, transparent)) 10px top no-repeat, -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(2.08333%, transparent), color-stop(2.08333%, rgba(255, 222, 222, 0.8)), color-stop(4.16667%, rgba(255, 222, 222, 0.8)), color-stop(4.16667%, transparent), color-stop(6.25%, transparent), color-stop(6.25%, rgba(255, 222, 222, 0.8)), color-stop(8.33333%, rgba(255, 222, 222, 0.8)), color-stop(8.33333%, transparent), color-stop(10.41667%, transparent), color-stop(10.41667%, rgba(255, 222, 222, 0.8)), color-stop(12.5%, rgba(255, 222, 222, 0.8)), color-stop(12.5%, transparent), color-stop(14.58333%, transparent), color-stop(14.58333%, rgba(255, 222, 222, 0.8)), color-stop(16.66667%, rgba(255, 222, 222, 0.8)), color-stop(16.66667%, transparent), color-stop(18.75%, transparent), color-stop(18.75%, rgba(255, 222, 222, 0.8)), color-stop(20.83333%, rgba(255, 222, 222, 0.8)), color-stop(20.83333%, transparent), color-stop(22.91667%, transparent), color-stop(22.91667%, rgba(255, 222, 222, 0.8)), color-stop(25%, rgba(255, 222, 222, 0.8)), color-stop(25%, transparent), color-stop(27.08333%, transparent), color-stop(27.08333%, rgba(255, 222, 222, 0.8)), color-stop(29.16667%, rgba(255, 222, 222, 0.8)), color-stop(29.16667%, transparent), color-stop(31.25%, transparent), color-stop(31.25%, rgba(255, 222, 222, 0.8)), color-stop(33.33333%, rgba(255, 222, 222, 0.8)), color-stop(33.33333%, transparent), color-stop(35.41667%, transparent), color-stop(35.41667%, rgba(255, 222, 222, 0.8)), color-stop(37.5%, rgba(255, 222, 222, 0.8)), color-stop(37.5%, transparent), color-stop(39.58333%, transparent), color-stop(39.58333%, rgba(255, 222, 222, 0.8)), color-stop(41.66667%, rgba(255, 222, 222, 0.8)), color-stop(41.66667%, transparent), color-stop(43.75%, transparent), color-stop(43.75%, rgba(255, 222, 222, 0.8)), color-stop(45.83333%, rgba(255, 222, 222, 0.8)), color-stop(45.83333%, transparent), color-stop(47.91667%, transparent), color-stop(47.91667%, rgba(255, 222, 222, 0.8)), color-stop(50%, rgba(255, 222, 222, 0.8)), color-stop(50%, transparent), color-stop(52.08333%, transparent), color-stop(52.08333%, rgba(255, 222, 222, 0.8)), color-stop(54.16667%, rgba(255, 222, 222, 0.8)), color-stop(54.16667%, transparent), color-stop(56.25%, transparent), color-stop(56.25%, rgba(255, 222, 222, 0.8)), color-stop(58.33333%, rgba(255, 222, 222, 0.8)), color-stop(58.33333%, transparent), color-stop(60.41667%, transparent), color-stop(60.41667%, rgba(255, 222, 222, 0.8)), color-stop(62.5%, rgba(255, 222, 222, 0.8)), color-stop(62.5%, transparent), color-stop(64.58333%, transparent), color-stop(64.58333%, rgba(255, 222, 222, 0.8)), color-stop(66.66667%, rgba(255, 222, 222, 0.8)), color-stop(66.66667%, transparent), color-stop(68.75%, transparent), color-stop(68.75%, rgba(255, 222, 222, 0.8)), color-stop(70.83333%, rgba(255, 222, 222, 0.8)), color-stop(70.83333%, transparent), color-stop(72.91667%, transparent), color-stop(72.91667%, rgba(255, 222, 222, 0.8)), color-stop(75%, rgba(255, 222, 222, 0.8)), color-stop(75%, transparent), color-stop(77.08333%, transparent), color-stop(77.08333%, rgba(255, 222, 222, 0.8)), color-stop(79.16667%, rgba(255, 222, 222, 0.8)), color-stop(79.16667%, transparent), color-stop(81.25%, transparent), color-stop(81.25%, rgba(255, 222, 222, 0.8)), color-stop(83.33333%, rgba(255, 222, 222, 0.8)), color-stop(83.33333%, transparent), color-stop(85.41667%, transparent), color-stop(85.41667%, rgba(255, 222, 222, 0.8)), color-stop(87.5%, rgba(255, 222, 222, 0.8)), color-stop(87.5%, transparent), color-stop(89.58333%, transparent), color-stop(89.58333%, rgba(255, 222, 222, 0.8)), color-stop(91.66667%, rgba(255, 222, 222, 0.8)), color-stop(91.66667%, transparent), color-stop(93.75%, transparent), color-stop(93.75%, rgba(255, 222, 222, 0.8)), color-stop(95.83333%, rgba(255, 222, 222, 0.8)), color-stop(95.83333%, transparent), color-stop(97.91667%, transparent), color-stop(97.91667%, rgba(255, 222, 222, 0.8))) -10px top no-repeat; + background: -webkit-linear-gradient(left, rgba(255, 222, 222, 0.8) 2.08333%, transparent 2.08333%, transparent 4.16667%, rgba(255, 222, 222, 0.8) 4.16667%, rgba(255, 222, 222, 0.8) 6.25%, transparent 6.25%, transparent 8.33333%, rgba(255, 222, 222, 0.8) 8.33333%, rgba(255, 222, 222, 0.8) 10.41667%, transparent 10.41667%, transparent 12.5%, rgba(255, 222, 222, 0.8) 12.5%, rgba(255, 222, 222, 0.8) 14.58333%, transparent 14.58333%, transparent 16.66667%, rgba(255, 222, 222, 0.8) 16.66667%, rgba(255, 222, 222, 0.8) 18.75%, transparent 18.75%, transparent 20.83333%, rgba(255, 222, 222, 0.8) 20.83333%, rgba(255, 222, 222, 0.8) 22.91667%, transparent 22.91667%, transparent 25%, rgba(255, 222, 222, 0.8) 25%, rgba(255, 222, 222, 0.8) 27.08333%, transparent 27.08333%, transparent 29.16667%, rgba(255, 222, 222, 0.8) 29.16667%, rgba(255, 222, 222, 0.8) 31.25%, transparent 31.25%, transparent 33.33333%, rgba(255, 222, 222, 0.8) 33.33333%, rgba(255, 222, 222, 0.8) 35.41667%, transparent 35.41667%, transparent 37.5%, rgba(255, 222, 222, 0.8) 37.5%, rgba(255, 222, 222, 0.8) 39.58333%, transparent 39.58333%, transparent 41.66667%, rgba(255, 222, 222, 0.8) 41.66667%, rgba(255, 222, 222, 0.8) 43.75%, transparent 43.75%, transparent 45.83333%, rgba(255, 222, 222, 0.8) 45.83333%, rgba(255, 222, 222, 0.8) 47.91667%, transparent 47.91667%, transparent 50%, rgba(255, 222, 222, 0.8) 50%, rgba(255, 222, 222, 0.8) 52.08333%, transparent 52.08333%, transparent 54.16667%, rgba(255, 222, 222, 0.8) 54.16667%, rgba(255, 222, 222, 0.8) 56.25%, transparent 56.25%, transparent 58.33333%, rgba(255, 222, 222, 0.8) 58.33333%, rgba(255, 222, 222, 0.8) 60.41667%, transparent 60.41667%, transparent 62.5%, rgba(255, 222, 222, 0.8) 62.5%, rgba(255, 222, 222, 0.8) 64.58333%, transparent 64.58333%, transparent 66.66667%, rgba(255, 222, 222, 0.8) 66.66667%, rgba(255, 222, 222, 0.8) 68.75%, transparent 68.75%, transparent 70.83333%, rgba(255, 222, 222, 0.8) 70.83333%, rgba(255, 222, 222, 0.8) 72.91667%, transparent 72.91667%, transparent 75%, rgba(255, 222, 222, 0.8) 75%, rgba(255, 222, 222, 0.8) 77.08333%, transparent 77.08333%, transparent 79.16667%, rgba(255, 222, 222, 0.8) 79.16667%, rgba(255, 222, 222, 0.8) 81.25%, transparent 81.25%, transparent 83.33333%, rgba(255, 222, 222, 0.8) 83.33333%, rgba(255, 222, 222, 0.8) 85.41667%, transparent 85.41667%, transparent 87.5%, rgba(255, 222, 222, 0.8) 87.5%, rgba(255, 222, 222, 0.8) 89.58333%, transparent 89.58333%, transparent 91.66667%, rgba(255, 222, 222, 0.8) 91.66667%, rgba(255, 222, 222, 0.8) 93.75%, transparent 93.75%, transparent 95.83333%, rgba(255, 222, 222, 0.8) 95.83333%, rgba(255, 222, 222, 0.8) 97.91667%, transparent 97.91667%) 10px top no-repeat, -webkit-linear-gradient(left, transparent 2.08333%, rgba(255, 222, 222, 0.8) 2.08333%, rgba(255, 222, 222, 0.8) 4.16667%, transparent 4.16667%, transparent 6.25%, rgba(255, 222, 222, 0.8) 6.25%, rgba(255, 222, 222, 0.8) 8.33333%, transparent 8.33333%, transparent 10.41667%, rgba(255, 222, 222, 0.8) 10.41667%, rgba(255, 222, 222, 0.8) 12.5%, transparent 12.5%, transparent 14.58333%, rgba(255, 222, 222, 0.8) 14.58333%, rgba(255, 222, 222, 0.8) 16.66667%, transparent 16.66667%, transparent 18.75%, rgba(255, 222, 222, 0.8) 18.75%, rgba(255, 222, 222, 0.8) 20.83333%, transparent 20.83333%, transparent 22.91667%, rgba(255, 222, 222, 0.8) 22.91667%, rgba(255, 222, 222, 0.8) 25%, transparent 25%, transparent 27.08333%, rgba(255, 222, 222, 0.8) 27.08333%, rgba(255, 222, 222, 0.8) 29.16667%, transparent 29.16667%, transparent 31.25%, rgba(255, 222, 222, 0.8) 31.25%, rgba(255, 222, 222, 0.8) 33.33333%, transparent 33.33333%, transparent 35.41667%, rgba(255, 222, 222, 0.8) 35.41667%, rgba(255, 222, 222, 0.8) 37.5%, transparent 37.5%, transparent 39.58333%, rgba(255, 222, 222, 0.8) 39.58333%, rgba(255, 222, 222, 0.8) 41.66667%, transparent 41.66667%, transparent 43.75%, rgba(255, 222, 222, 0.8) 43.75%, rgba(255, 222, 222, 0.8) 45.83333%, transparent 45.83333%, transparent 47.91667%, rgba(255, 222, 222, 0.8) 47.91667%, rgba(255, 222, 222, 0.8) 50%, transparent 50%, transparent 52.08333%, rgba(255, 222, 222, 0.8) 52.08333%, rgba(255, 222, 222, 0.8) 54.16667%, transparent 54.16667%, transparent 56.25%, rgba(255, 222, 222, 0.8) 56.25%, rgba(255, 222, 222, 0.8) 58.33333%, transparent 58.33333%, transparent 60.41667%, rgba(255, 222, 222, 0.8) 60.41667%, rgba(255, 222, 222, 0.8) 62.5%, transparent 62.5%, transparent 64.58333%, rgba(255, 222, 222, 0.8) 64.58333%, rgba(255, 222, 222, 0.8) 66.66667%, transparent 66.66667%, transparent 68.75%, rgba(255, 222, 222, 0.8) 68.75%, rgba(255, 222, 222, 0.8) 70.83333%, transparent 70.83333%, transparent 72.91667%, rgba(255, 222, 222, 0.8) 72.91667%, rgba(255, 222, 222, 0.8) 75%, transparent 75%, transparent 77.08333%, rgba(255, 222, 222, 0.8) 77.08333%, rgba(255, 222, 222, 0.8) 79.16667%, transparent 79.16667%, transparent 81.25%, rgba(255, 222, 222, 0.8) 81.25%, rgba(255, 222, 222, 0.8) 83.33333%, transparent 83.33333%, transparent 85.41667%, rgba(255, 222, 222, 0.8) 85.41667%, rgba(255, 222, 222, 0.8) 87.5%, transparent 87.5%, transparent 89.58333%, rgba(255, 222, 222, 0.8) 89.58333%, rgba(255, 222, 222, 0.8) 91.66667%, transparent 91.66667%, transparent 93.75%, rgba(255, 222, 222, 0.8) 93.75%, rgba(255, 222, 222, 0.8) 95.83333%, transparent 95.83333%, transparent 97.91667%, rgba(255, 222, 222, 0.8) 97.91667%) -10px top no-repeat; + background: -moz-linear-gradient(left, rgba(255, 222, 222, 0.8) 2.08333%, transparent 2.08333%, transparent 4.16667%, rgba(255, 222, 222, 0.8) 4.16667%, rgba(255, 222, 222, 0.8) 6.25%, transparent 6.25%, transparent 8.33333%, rgba(255, 222, 222, 0.8) 8.33333%, rgba(255, 222, 222, 0.8) 10.41667%, transparent 10.41667%, transparent 12.5%, rgba(255, 222, 222, 0.8) 12.5%, rgba(255, 222, 222, 0.8) 14.58333%, transparent 14.58333%, transparent 16.66667%, rgba(255, 222, 222, 0.8) 16.66667%, rgba(255, 222, 222, 0.8) 18.75%, transparent 18.75%, transparent 20.83333%, rgba(255, 222, 222, 0.8) 20.83333%, rgba(255, 222, 222, 0.8) 22.91667%, transparent 22.91667%, transparent 25%, rgba(255, 222, 222, 0.8) 25%, rgba(255, 222, 222, 0.8) 27.08333%, transparent 27.08333%, transparent 29.16667%, rgba(255, 222, 222, 0.8) 29.16667%, rgba(255, 222, 222, 0.8) 31.25%, transparent 31.25%, transparent 33.33333%, rgba(255, 222, 222, 0.8) 33.33333%, rgba(255, 222, 222, 0.8) 35.41667%, transparent 35.41667%, transparent 37.5%, rgba(255, 222, 222, 0.8) 37.5%, rgba(255, 222, 222, 0.8) 39.58333%, transparent 39.58333%, transparent 41.66667%, rgba(255, 222, 222, 0.8) 41.66667%, rgba(255, 222, 222, 0.8) 43.75%, transparent 43.75%, transparent 45.83333%, rgba(255, 222, 222, 0.8) 45.83333%, rgba(255, 222, 222, 0.8) 47.91667%, transparent 47.91667%, transparent 50%, rgba(255, 222, 222, 0.8) 50%, rgba(255, 222, 222, 0.8) 52.08333%, transparent 52.08333%, transparent 54.16667%, rgba(255, 222, 222, 0.8) 54.16667%, rgba(255, 222, 222, 0.8) 56.25%, transparent 56.25%, transparent 58.33333%, rgba(255, 222, 222, 0.8) 58.33333%, rgba(255, 222, 222, 0.8) 60.41667%, transparent 60.41667%, transparent 62.5%, rgba(255, 222, 222, 0.8) 62.5%, rgba(255, 222, 222, 0.8) 64.58333%, transparent 64.58333%, transparent 66.66667%, rgba(255, 222, 222, 0.8) 66.66667%, rgba(255, 222, 222, 0.8) 68.75%, transparent 68.75%, transparent 70.83333%, rgba(255, 222, 222, 0.8) 70.83333%, rgba(255, 222, 222, 0.8) 72.91667%, transparent 72.91667%, transparent 75%, rgba(255, 222, 222, 0.8) 75%, rgba(255, 222, 222, 0.8) 77.08333%, transparent 77.08333%, transparent 79.16667%, rgba(255, 222, 222, 0.8) 79.16667%, rgba(255, 222, 222, 0.8) 81.25%, transparent 81.25%, transparent 83.33333%, rgba(255, 222, 222, 0.8) 83.33333%, rgba(255, 222, 222, 0.8) 85.41667%, transparent 85.41667%, transparent 87.5%, rgba(255, 222, 222, 0.8) 87.5%, rgba(255, 222, 222, 0.8) 89.58333%, transparent 89.58333%, transparent 91.66667%, rgba(255, 222, 222, 0.8) 91.66667%, rgba(255, 222, 222, 0.8) 93.75%, transparent 93.75%, transparent 95.83333%, rgba(255, 222, 222, 0.8) 95.83333%, rgba(255, 222, 222, 0.8) 97.91667%, transparent 97.91667%) 10px top no-repeat, -moz-linear-gradient(left, transparent 2.08333%, rgba(255, 222, 222, 0.8) 2.08333%, rgba(255, 222, 222, 0.8) 4.16667%, transparent 4.16667%, transparent 6.25%, rgba(255, 222, 222, 0.8) 6.25%, rgba(255, 222, 222, 0.8) 8.33333%, transparent 8.33333%, transparent 10.41667%, rgba(255, 222, 222, 0.8) 10.41667%, rgba(255, 222, 222, 0.8) 12.5%, transparent 12.5%, transparent 14.58333%, rgba(255, 222, 222, 0.8) 14.58333%, rgba(255, 222, 222, 0.8) 16.66667%, transparent 16.66667%, transparent 18.75%, rgba(255, 222, 222, 0.8) 18.75%, rgba(255, 222, 222, 0.8) 20.83333%, transparent 20.83333%, transparent 22.91667%, rgba(255, 222, 222, 0.8) 22.91667%, rgba(255, 222, 222, 0.8) 25%, transparent 25%, transparent 27.08333%, rgba(255, 222, 222, 0.8) 27.08333%, rgba(255, 222, 222, 0.8) 29.16667%, transparent 29.16667%, transparent 31.25%, rgba(255, 222, 222, 0.8) 31.25%, rgba(255, 222, 222, 0.8) 33.33333%, transparent 33.33333%, transparent 35.41667%, rgba(255, 222, 222, 0.8) 35.41667%, rgba(255, 222, 222, 0.8) 37.5%, transparent 37.5%, transparent 39.58333%, rgba(255, 222, 222, 0.8) 39.58333%, rgba(255, 222, 222, 0.8) 41.66667%, transparent 41.66667%, transparent 43.75%, rgba(255, 222, 222, 0.8) 43.75%, rgba(255, 222, 222, 0.8) 45.83333%, transparent 45.83333%, transparent 47.91667%, rgba(255, 222, 222, 0.8) 47.91667%, rgba(255, 222, 222, 0.8) 50%, transparent 50%, transparent 52.08333%, rgba(255, 222, 222, 0.8) 52.08333%, rgba(255, 222, 222, 0.8) 54.16667%, transparent 54.16667%, transparent 56.25%, rgba(255, 222, 222, 0.8) 56.25%, rgba(255, 222, 222, 0.8) 58.33333%, transparent 58.33333%, transparent 60.41667%, rgba(255, 222, 222, 0.8) 60.41667%, rgba(255, 222, 222, 0.8) 62.5%, transparent 62.5%, transparent 64.58333%, rgba(255, 222, 222, 0.8) 64.58333%, rgba(255, 222, 222, 0.8) 66.66667%, transparent 66.66667%, transparent 68.75%, rgba(255, 222, 222, 0.8) 68.75%, rgba(255, 222, 222, 0.8) 70.83333%, transparent 70.83333%, transparent 72.91667%, rgba(255, 222, 222, 0.8) 72.91667%, rgba(255, 222, 222, 0.8) 75%, transparent 75%, transparent 77.08333%, rgba(255, 222, 222, 0.8) 77.08333%, rgba(255, 222, 222, 0.8) 79.16667%, transparent 79.16667%, transparent 81.25%, rgba(255, 222, 222, 0.8) 81.25%, rgba(255, 222, 222, 0.8) 83.33333%, transparent 83.33333%, transparent 85.41667%, rgba(255, 222, 222, 0.8) 85.41667%, rgba(255, 222, 222, 0.8) 87.5%, transparent 87.5%, transparent 89.58333%, rgba(255, 222, 222, 0.8) 89.58333%, rgba(255, 222, 222, 0.8) 91.66667%, transparent 91.66667%, transparent 93.75%, rgba(255, 222, 222, 0.8) 93.75%, rgba(255, 222, 222, 0.8) 95.83333%, transparent 95.83333%, transparent 97.91667%, rgba(255, 222, 222, 0.8) 97.91667%) -10px top no-repeat; + background: -o-linear-gradient(left, rgba(255, 222, 222, 0.8) 2.08333%, transparent 2.08333%, transparent 4.16667%, rgba(255, 222, 222, 0.8) 4.16667%, rgba(255, 222, 222, 0.8) 6.25%, transparent 6.25%, transparent 8.33333%, rgba(255, 222, 222, 0.8) 8.33333%, rgba(255, 222, 222, 0.8) 10.41667%, transparent 10.41667%, transparent 12.5%, rgba(255, 222, 222, 0.8) 12.5%, rgba(255, 222, 222, 0.8) 14.58333%, transparent 14.58333%, transparent 16.66667%, rgba(255, 222, 222, 0.8) 16.66667%, rgba(255, 222, 222, 0.8) 18.75%, transparent 18.75%, transparent 20.83333%, rgba(255, 222, 222, 0.8) 20.83333%, rgba(255, 222, 222, 0.8) 22.91667%, transparent 22.91667%, transparent 25%, rgba(255, 222, 222, 0.8) 25%, rgba(255, 222, 222, 0.8) 27.08333%, transparent 27.08333%, transparent 29.16667%, rgba(255, 222, 222, 0.8) 29.16667%, rgba(255, 222, 222, 0.8) 31.25%, transparent 31.25%, transparent 33.33333%, rgba(255, 222, 222, 0.8) 33.33333%, rgba(255, 222, 222, 0.8) 35.41667%, transparent 35.41667%, transparent 37.5%, rgba(255, 222, 222, 0.8) 37.5%, rgba(255, 222, 222, 0.8) 39.58333%, transparent 39.58333%, transparent 41.66667%, rgba(255, 222, 222, 0.8) 41.66667%, rgba(255, 222, 222, 0.8) 43.75%, transparent 43.75%, transparent 45.83333%, rgba(255, 222, 222, 0.8) 45.83333%, rgba(255, 222, 222, 0.8) 47.91667%, transparent 47.91667%, transparent 50%, rgba(255, 222, 222, 0.8) 50%, rgba(255, 222, 222, 0.8) 52.08333%, transparent 52.08333%, transparent 54.16667%, rgba(255, 222, 222, 0.8) 54.16667%, rgba(255, 222, 222, 0.8) 56.25%, transparent 56.25%, transparent 58.33333%, rgba(255, 222, 222, 0.8) 58.33333%, rgba(255, 222, 222, 0.8) 60.41667%, transparent 60.41667%, transparent 62.5%, rgba(255, 222, 222, 0.8) 62.5%, rgba(255, 222, 222, 0.8) 64.58333%, transparent 64.58333%, transparent 66.66667%, rgba(255, 222, 222, 0.8) 66.66667%, rgba(255, 222, 222, 0.8) 68.75%, transparent 68.75%, transparent 70.83333%, rgba(255, 222, 222, 0.8) 70.83333%, rgba(255, 222, 222, 0.8) 72.91667%, transparent 72.91667%, transparent 75%, rgba(255, 222, 222, 0.8) 75%, rgba(255, 222, 222, 0.8) 77.08333%, transparent 77.08333%, transparent 79.16667%, rgba(255, 222, 222, 0.8) 79.16667%, rgba(255, 222, 222, 0.8) 81.25%, transparent 81.25%, transparent 83.33333%, rgba(255, 222, 222, 0.8) 83.33333%, rgba(255, 222, 222, 0.8) 85.41667%, transparent 85.41667%, transparent 87.5%, rgba(255, 222, 222, 0.8) 87.5%, rgba(255, 222, 222, 0.8) 89.58333%, transparent 89.58333%, transparent 91.66667%, rgba(255, 222, 222, 0.8) 91.66667%, rgba(255, 222, 222, 0.8) 93.75%, transparent 93.75%, transparent 95.83333%, rgba(255, 222, 222, 0.8) 95.83333%, rgba(255, 222, 222, 0.8) 97.91667%, transparent 97.91667%) 10px top no-repeat, -o-linear-gradient(left, transparent 2.08333%, rgba(255, 222, 222, 0.8) 2.08333%, rgba(255, 222, 222, 0.8) 4.16667%, transparent 4.16667%, transparent 6.25%, rgba(255, 222, 222, 0.8) 6.25%, rgba(255, 222, 222, 0.8) 8.33333%, transparent 8.33333%, transparent 10.41667%, rgba(255, 222, 222, 0.8) 10.41667%, rgba(255, 222, 222, 0.8) 12.5%, transparent 12.5%, transparent 14.58333%, rgba(255, 222, 222, 0.8) 14.58333%, rgba(255, 222, 222, 0.8) 16.66667%, transparent 16.66667%, transparent 18.75%, rgba(255, 222, 222, 0.8) 18.75%, rgba(255, 222, 222, 0.8) 20.83333%, transparent 20.83333%, transparent 22.91667%, rgba(255, 222, 222, 0.8) 22.91667%, rgba(255, 222, 222, 0.8) 25%, transparent 25%, transparent 27.08333%, rgba(255, 222, 222, 0.8) 27.08333%, rgba(255, 222, 222, 0.8) 29.16667%, transparent 29.16667%, transparent 31.25%, rgba(255, 222, 222, 0.8) 31.25%, rgba(255, 222, 222, 0.8) 33.33333%, transparent 33.33333%, transparent 35.41667%, rgba(255, 222, 222, 0.8) 35.41667%, rgba(255, 222, 222, 0.8) 37.5%, transparent 37.5%, transparent 39.58333%, rgba(255, 222, 222, 0.8) 39.58333%, rgba(255, 222, 222, 0.8) 41.66667%, transparent 41.66667%, transparent 43.75%, rgba(255, 222, 222, 0.8) 43.75%, rgba(255, 222, 222, 0.8) 45.83333%, transparent 45.83333%, transparent 47.91667%, rgba(255, 222, 222, 0.8) 47.91667%, rgba(255, 222, 222, 0.8) 50%, transparent 50%, transparent 52.08333%, rgba(255, 222, 222, 0.8) 52.08333%, rgba(255, 222, 222, 0.8) 54.16667%, transparent 54.16667%, transparent 56.25%, rgba(255, 222, 222, 0.8) 56.25%, rgba(255, 222, 222, 0.8) 58.33333%, transparent 58.33333%, transparent 60.41667%, rgba(255, 222, 222, 0.8) 60.41667%, rgba(255, 222, 222, 0.8) 62.5%, transparent 62.5%, transparent 64.58333%, rgba(255, 222, 222, 0.8) 64.58333%, rgba(255, 222, 222, 0.8) 66.66667%, transparent 66.66667%, transparent 68.75%, rgba(255, 222, 222, 0.8) 68.75%, rgba(255, 222, 222, 0.8) 70.83333%, transparent 70.83333%, transparent 72.91667%, rgba(255, 222, 222, 0.8) 72.91667%, rgba(255, 222, 222, 0.8) 75%, transparent 75%, transparent 77.08333%, rgba(255, 222, 222, 0.8) 77.08333%, rgba(255, 222, 222, 0.8) 79.16667%, transparent 79.16667%, transparent 81.25%, rgba(255, 222, 222, 0.8) 81.25%, rgba(255, 222, 222, 0.8) 83.33333%, transparent 83.33333%, transparent 85.41667%, rgba(255, 222, 222, 0.8) 85.41667%, rgba(255, 222, 222, 0.8) 87.5%, transparent 87.5%, transparent 89.58333%, rgba(255, 222, 222, 0.8) 89.58333%, rgba(255, 222, 222, 0.8) 91.66667%, transparent 91.66667%, transparent 93.75%, rgba(255, 222, 222, 0.8) 93.75%, rgba(255, 222, 222, 0.8) 95.83333%, transparent 95.83333%, transparent 97.91667%, rgba(255, 222, 222, 0.8) 97.91667%) -10px top no-repeat; + background: linear-gradient(left, rgba(255, 222, 222, 0.8) 2.08333%, transparent 2.08333%, transparent 4.16667%, rgba(255, 222, 222, 0.8) 4.16667%, rgba(255, 222, 222, 0.8) 6.25%, transparent 6.25%, transparent 8.33333%, rgba(255, 222, 222, 0.8) 8.33333%, rgba(255, 222, 222, 0.8) 10.41667%, transparent 10.41667%, transparent 12.5%, rgba(255, 222, 222, 0.8) 12.5%, rgba(255, 222, 222, 0.8) 14.58333%, transparent 14.58333%, transparent 16.66667%, rgba(255, 222, 222, 0.8) 16.66667%, rgba(255, 222, 222, 0.8) 18.75%, transparent 18.75%, transparent 20.83333%, rgba(255, 222, 222, 0.8) 20.83333%, rgba(255, 222, 222, 0.8) 22.91667%, transparent 22.91667%, transparent 25%, rgba(255, 222, 222, 0.8) 25%, rgba(255, 222, 222, 0.8) 27.08333%, transparent 27.08333%, transparent 29.16667%, rgba(255, 222, 222, 0.8) 29.16667%, rgba(255, 222, 222, 0.8) 31.25%, transparent 31.25%, transparent 33.33333%, rgba(255, 222, 222, 0.8) 33.33333%, rgba(255, 222, 222, 0.8) 35.41667%, transparent 35.41667%, transparent 37.5%, rgba(255, 222, 222, 0.8) 37.5%, rgba(255, 222, 222, 0.8) 39.58333%, transparent 39.58333%, transparent 41.66667%, rgba(255, 222, 222, 0.8) 41.66667%, rgba(255, 222, 222, 0.8) 43.75%, transparent 43.75%, transparent 45.83333%, rgba(255, 222, 222, 0.8) 45.83333%, rgba(255, 222, 222, 0.8) 47.91667%, transparent 47.91667%, transparent 50%, rgba(255, 222, 222, 0.8) 50%, rgba(255, 222, 222, 0.8) 52.08333%, transparent 52.08333%, transparent 54.16667%, rgba(255, 222, 222, 0.8) 54.16667%, rgba(255, 222, 222, 0.8) 56.25%, transparent 56.25%, transparent 58.33333%, rgba(255, 222, 222, 0.8) 58.33333%, rgba(255, 222, 222, 0.8) 60.41667%, transparent 60.41667%, transparent 62.5%, rgba(255, 222, 222, 0.8) 62.5%, rgba(255, 222, 222, 0.8) 64.58333%, transparent 64.58333%, transparent 66.66667%, rgba(255, 222, 222, 0.8) 66.66667%, rgba(255, 222, 222, 0.8) 68.75%, transparent 68.75%, transparent 70.83333%, rgba(255, 222, 222, 0.8) 70.83333%, rgba(255, 222, 222, 0.8) 72.91667%, transparent 72.91667%, transparent 75%, rgba(255, 222, 222, 0.8) 75%, rgba(255, 222, 222, 0.8) 77.08333%, transparent 77.08333%, transparent 79.16667%, rgba(255, 222, 222, 0.8) 79.16667%, rgba(255, 222, 222, 0.8) 81.25%, transparent 81.25%, transparent 83.33333%, rgba(255, 222, 222, 0.8) 83.33333%, rgba(255, 222, 222, 0.8) 85.41667%, transparent 85.41667%, transparent 87.5%, rgba(255, 222, 222, 0.8) 87.5%, rgba(255, 222, 222, 0.8) 89.58333%, transparent 89.58333%, transparent 91.66667%, rgba(255, 222, 222, 0.8) 91.66667%, rgba(255, 222, 222, 0.8) 93.75%, transparent 93.75%, transparent 95.83333%, rgba(255, 222, 222, 0.8) 95.83333%, rgba(255, 222, 222, 0.8) 97.91667%, transparent 97.91667%) 10px top no-repeat, linear-gradient(left, transparent 2.08333%, rgba(255, 222, 222, 0.8) 2.08333%, rgba(255, 222, 222, 0.8) 4.16667%, transparent 4.16667%, transparent 6.25%, rgba(255, 222, 222, 0.8) 6.25%, rgba(255, 222, 222, 0.8) 8.33333%, transparent 8.33333%, transparent 10.41667%, rgba(255, 222, 222, 0.8) 10.41667%, rgba(255, 222, 222, 0.8) 12.5%, transparent 12.5%, transparent 14.58333%, rgba(255, 222, 222, 0.8) 14.58333%, rgba(255, 222, 222, 0.8) 16.66667%, transparent 16.66667%, transparent 18.75%, rgba(255, 222, 222, 0.8) 18.75%, rgba(255, 222, 222, 0.8) 20.83333%, transparent 20.83333%, transparent 22.91667%, rgba(255, 222, 222, 0.8) 22.91667%, rgba(255, 222, 222, 0.8) 25%, transparent 25%, transparent 27.08333%, rgba(255, 222, 222, 0.8) 27.08333%, rgba(255, 222, 222, 0.8) 29.16667%, transparent 29.16667%, transparent 31.25%, rgba(255, 222, 222, 0.8) 31.25%, rgba(255, 222, 222, 0.8) 33.33333%, transparent 33.33333%, transparent 35.41667%, rgba(255, 222, 222, 0.8) 35.41667%, rgba(255, 222, 222, 0.8) 37.5%, transparent 37.5%, transparent 39.58333%, rgba(255, 222, 222, 0.8) 39.58333%, rgba(255, 222, 222, 0.8) 41.66667%, transparent 41.66667%, transparent 43.75%, rgba(255, 222, 222, 0.8) 43.75%, rgba(255, 222, 222, 0.8) 45.83333%, transparent 45.83333%, transparent 47.91667%, rgba(255, 222, 222, 0.8) 47.91667%, rgba(255, 222, 222, 0.8) 50%, transparent 50%, transparent 52.08333%, rgba(255, 222, 222, 0.8) 52.08333%, rgba(255, 222, 222, 0.8) 54.16667%, transparent 54.16667%, transparent 56.25%, rgba(255, 222, 222, 0.8) 56.25%, rgba(255, 222, 222, 0.8) 58.33333%, transparent 58.33333%, transparent 60.41667%, rgba(255, 222, 222, 0.8) 60.41667%, rgba(255, 222, 222, 0.8) 62.5%, transparent 62.5%, transparent 64.58333%, rgba(255, 222, 222, 0.8) 64.58333%, rgba(255, 222, 222, 0.8) 66.66667%, transparent 66.66667%, transparent 68.75%, rgba(255, 222, 222, 0.8) 68.75%, rgba(255, 222, 222, 0.8) 70.83333%, transparent 70.83333%, transparent 72.91667%, rgba(255, 222, 222, 0.8) 72.91667%, rgba(255, 222, 222, 0.8) 75%, transparent 75%, transparent 77.08333%, rgba(255, 222, 222, 0.8) 77.08333%, rgba(255, 222, 222, 0.8) 79.16667%, transparent 79.16667%, transparent 81.25%, rgba(255, 222, 222, 0.8) 81.25%, rgba(255, 222, 222, 0.8) 83.33333%, transparent 83.33333%, transparent 85.41667%, rgba(255, 222, 222, 0.8) 85.41667%, rgba(255, 222, 222, 0.8) 87.5%, transparent 87.5%, transparent 89.58333%, rgba(255, 222, 222, 0.8) 89.58333%, rgba(255, 222, 222, 0.8) 91.66667%, transparent 91.66667%, transparent 93.75%, rgba(255, 222, 222, 0.8) 93.75%, rgba(255, 222, 222, 0.8) 95.83333%, transparent 95.83333%, transparent 97.91667%, rgba(255, 222, 222, 0.8) 97.91667%) -10px top no-repeat; +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-grid-container.css b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-grid-container.css new file mode 100644 index 000000000..17e63b360 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-grid-container.css @@ -0,0 +1,40 @@ +/** + * @file + * Test zen-grid-container() + */ +#test-zen-grid-container { + /* Test zen-grid-container() */ +} +#test-zen-grid-container:before, #test-zen-grid-container:after { + content: ""; + display: table; +} +#test-zen-grid-container:after { + clear: both; +} + +#test-zen-grid-container-2 { + /* Test zen-grid-container() with $legacy-support-for-ie7: true */ + *position: relative; + *zoom: 1; +} +#test-zen-grid-container-2:before, #test-zen-grid-container-2:after { + content: ""; + display: table; +} +#test-zen-grid-container-2:after { + clear: both; +} + +#test-zen-grid-container-3 { + /* Test zen-grid-container() with $legacy-support-for-ie6: true */ + *position: relative; + *zoom: 1; +} +#test-zen-grid-container-3:before, #test-zen-grid-container-3:after { + content: ""; + display: table; +} +#test-zen-grid-container-3:after { + clear: both; +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-grid-flow-item.css b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-grid-flow-item.css new file mode 100644 index 000000000..a9bfe330d --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-grid-flow-item.css @@ -0,0 +1,165 @@ +/** + * @file + * Test zen-grid-flow-item() + */ +#test-zen-grid-flow-item { + /* Test zen-grid-flow-item(1) without setting $column-count */ + padding-left: 10px; + padding-right: 10px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; + width: 100%; + padding-left: 0; + padding-right: 0px; + margin-right: 20px; + /* Test zen-grid-flow-item(1, 4) with 20px gutter */ + padding-left: 10px; + padding-right: 10px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; + width: 25%; + padding-left: 0; + padding-right: 15px; + margin-right: 5px; + /* Test zen-grid-flow-item(1, 4) with 15px gutter */ + padding-left: 7px; + padding-right: 8px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; + width: 25%; + padding-left: 0; + padding-right: 11.25px; + margin-right: 3.75px; + /* Test zen-grid-flow-item(1) with 5 columns, 20px gutter and $zen-grid-width: 1000px */ + padding-left: 10px; + padding-right: 10px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; + width: 200px; + padding-left: 0; + padding-right: 20px; + /* Test zen-grid-flow-item(1) with 5 columns, 20px gutter, $zen-grid-width: 1000px, $alpha-gutter: true and $omega-gutter: false */ + padding-left: 10px; + padding-right: 10px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; + width: 200px; + padding-left: 20px; + padding-right: 0; + /* Test zen-grid-flow-item(1) with 5 columns, 20px gutter, $zen-grid-width: 1000px and $omega-gutter: false */ + padding-left: 10px; + padding-right: 10px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; + width: 180px; + padding-left: 0; + padding-right: 0; + /* Test zen-grid-flow-item(1, 4) with 15px gutter and $zen-float-direction: right */ + padding-left: 8px; + padding-right: 7px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; + width: 25%; + padding-right: 0; + padding-left: 11.25px; + margin-left: 3.75px; + /* Test zen-grid-flow-item(1, 4) with 15px gutter and $alpha-gutter: true */ + padding-left: 7px; + padding-right: 8px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; + width: 25%; + padding-left: 0; + margin-left: 15px; + padding-right: 11.25px; + margin-right: 3.75px; + /* Test zen-grid-flow-item(1, 4) with 15px gutter and $omega-gutter: false */ + padding-left: 7px; + padding-right: 8px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; + width: 25%; + padding-left: 0; + padding-right: 11.25px; + margin-right: -11.25px; + /* Test zen-grid-flow-item(3, 4) with 20px gutter and $alpha-gutter: true */ + padding-left: 10px; + padding-right: 10px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; + width: 75%; + padding-left: 0; + margin-left: 20px; + padding-right: 5px; + margin-right: 15px; + /* Test zen-grid-flow-item(3, 4) with 20px gutter and $omega-gutter: false */ + padding-left: 10px; + padding-right: 10px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; + width: 75%; + padding-left: 0; + padding-right: 5px; + margin-right: -5px; + /* Test zen-grid-flow-item(1, 4) with 15px gutter, $zen-float-direction: right and $alpha-gutter: true */ + padding-left: 8px; + padding-right: 7px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; + width: 25%; + padding-right: 0; + margin-right: 15px; + padding-left: 11.25px; + margin-left: 3.75px; + /* Test zen-grid-flow-item(1, 4) with $zen-box-sizing: content-box and 10% gutter */ + padding-left: 5%; + padding-right: 5%; + border-left: 0 !important; + border-right: 0 !important; + word-wrap: break-word; + width: 15%; + padding-left: 0; + padding-right: 7.5%; + margin-right: 2.5%; + /* Test zen-grid-flow-item(1, 4) with $zen-auto-include-flow-item-base: false */ + width: 25%; + padding-left: 0; + padding-right: 15px; + margin-right: 5px; +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-grid-item-base.css b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-grid-item-base.css new file mode 100644 index 000000000..bfbd56e85 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-grid-item-base.css @@ -0,0 +1,73 @@ +/** + * @file + * Test zen-grid-item-base() + */ +#test-zen-grid-item-base { + /* Test zen-grid-item-base() */ + padding-left: 10px; + padding-right: 10px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; + /* Test zen-grid-item-base() with $zen-box-sizing: content-box */ + padding-left: 10px; + padding-right: 10px; + border-left: 0 !important; + border-right: 0 !important; + word-wrap: break-word; + /* Test zen-grid-item-base() with $legacy-support-for-ie7: true */ + padding-left: 10px; + padding-right: 10px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; + /* Test zen-grid-item-base() with $box-sizing-polyfill-path: "/boxsizing.htc" and $legacy-support-for-ie7: true */ + padding-left: 10px; + padding-right: 10px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; + *behavior: url("/boxsizing.htc"); + /* Test zen-grid-item-base() with $box-sizing-polyfill-path: "/boxsizing.htc" and $legacy-support-for-ie6: true */ + padding-left: 10px; + padding-right: 10px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; + *behavior: url("/boxsizing.htc"); + _display: inline; + _overflow: hidden; + _overflow-y: visible; + /* Test zen-grid-item-base() with $zen-gutter-width: 15px */ + padding-left: 7px; + padding-right: 8px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; + /* Test zen-grid-item-base() with $zen-gutter-width: 15px and $zen-float-direction: right */ + padding-left: 8px; + padding-right: 7px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; + /* Test zen-grid-item-base() with $zen-gutter-width: 15px and $zen-reverse-all-floats: true */ + padding-left: 8px; + padding-right: 7px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-grid-item.css b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-grid-item.css new file mode 100644 index 000000000..024822725 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-grid-item.css @@ -0,0 +1,59 @@ +/** + * @file + * Test zen-grid-item() + */ +#test-zen-grid-item { + /* Test zen-grid-item(6, 4) with 12 column grid and 20px gutter */ + float: left; + width: 50%; + margin-left: 25%; + margin-right: -75%; + padding-left: 10px; + padding-right: 10px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + word-wrap: break-word; + /* Test zen-grid-item(3, 3) with box-sizing: content-box, 5 column grid and 10% gutter */ + float: left; + width: 50%; + margin-left: 40%; + margin-right: -100%; + padding-left: 5%; + padding-right: 5%; + border-left: 0 !important; + border-right: 0 !important; + word-wrap: break-word; + /* Turn off $zen-auto-include-item-base */ + /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter */ + float: left; + width: 60%; + margin-left: 40%; + margin-right: -100%; + /* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter */ + float: right; + width: 60%; + margin-right: 40%; + margin-left: -100%; + /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter and $zen-reverse-all-floats */ + float: right; + width: 60%; + margin-right: 40%; + margin-left: -100%; + /* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter and $zen-reverse-all-floats */ + float: left; + width: 60%; + margin-left: 40%; + margin-right: -100%; + /* Test zen-grid-item(3, 2.5) with 5 column grid and 40px gutter */ + float: left; + width: 60%; + margin-left: 30%; + margin-right: -90%; + /* Test zen-grid-item(3, 3) with $zen-grid-width: 1000px, 5 column grid and 40px gutter */ + float: left; + width: 600px; + margin-left: 400px; + margin-right: -1000px; +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-nested-container.css b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-nested-container.css new file mode 100644 index 000000000..d646e68e2 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/unit-tests/test-results/zen-nested-container.css @@ -0,0 +1,21 @@ +/** + * @file + * Test zen-nested-container() + */ +#test-zen-nested-container { + /* Test zen-nested-container() */ + padding-left: 0; + padding-right: 0; +} + +#test-zen-nested-container-2 { + /* Test zen-nested-container() with $legacy-support-for-ie7: true */ + padding-left: 0; + padding-right: 0; +} + +#test-zen-nested-container-3 { + /* Test zen-nested-container() with $legacy-support-for-ie6: true */ + padding-left: 0; + padding-right: 0; +} |