zen-grids 2.0.0.beta.1 → 2.0.0.beta.2

data/tests/tests/zen-grid-background.scss

@@ -0,0 +1,85 @@
+/**
+ * @file
+ * Test zen-grid-background()
+ */
+
+@import "zen-grids/background";
+
+#test-zen-grid-background {
+  /* Test zen-grid-background() with 1 column grid and 20px gutter */
+  $zen-grid-numbers: top !global;
+  @include zen-grid-background();
+  $zen-grid-numbers: both !global;
+
+  /* Test zen-grid-background() with margin gutter method, 5 column grid and 5% gutter */
+  $zen-columns: 5 !global;
+  $zen-gutters: 5% !global;
+  $zen-gutter-method: margin !global;
+  $zen-grid-numbers: top !global;
+  @include zen-grid-background();
+  $zen-columns: 1 !global;
+  $zen-gutters: 20px !global;
+  $zen-gutter-method: padding !global;
+  $zen-grid-numbers: both !global;
+
+  // Turn off numbers for all other tests.
+  $zen-grid-numbers: none !global;
+
+  /* Test zen-grid-background() with 12 column grid and 20px gutter */
+  $zen-columns: 12 !global;
+  @include zen-grid-background();
+  $zen-columns: 1 !global;
+
+  /* Test zen-grid-background(), 5 column grid, 10% gutter and black grid color */
+  $zen-columns: 5 !global;
+  $zen-gutters: 10% !global;
+  $zen-grid-color: #000 !global;
+  @include zen-grid-background();
+  $zen-columns: 1 !global;
+  $zen-gutters: 20px !global;
+  $zen-grid-color: rgba(#ffdede, 0.8) !global;
+
+  /* Test zen-grid-background() with 5 column grid and 40px gutter */
+  $zen-columns: 5 !global;
+  $zen-gutters: 40px !global;
+  @include zen-grid-background();
+  $zen-columns: 1 !global;
+  $zen-gutters: 20px !global;
+
+  /* Test zen-grid-background(), 5 column grid and 10% gutter and $zen-switch-direction */
+  $zen-columns: 5 !global;
+  $zen-gutters: 10% !global;
+  $zen-switch-direction: true !global;
+  @include zen-grid-background();
+  $zen-columns: 1 !global;
+  $zen-gutters: 20px !global;
+  $zen-switch-direction: false !global;
+
+  /* Test zen-grid-background() with 5 column grid and 40px gutter and $zen-switch-direction */
+  $zen-columns: 5 !global;
+  $zen-gutters: 40px !global;
+  $zen-switch-direction: true !global;
+  @include zen-grid-background();
+  $zen-columns: 1 !global;
+  $zen-gutters: 20px !global;
+  $zen-switch-direction: false !global;
+
+  /* Test zen-grid-background() with $zen-grid-width: 1000px, 5 column grid and 40px gutter */
+  $zen-grid-width: 1000px !global;
+  $zen-columns: 5 !global;
+  $zen-gutters: 40px !global;
+  @include zen-grid-background();
+  $zen-grid-width: 100% !global;
+  $zen-columns: 1 !global;
+  $zen-gutters: 20px !global;
+
+  /* Test zen-grid-background() with all 24 grid numbers */
+  $zen-columns: 24 !global;
+  @include zen-grid-background();
+  $zen-columns: 1 !global;
+
+  /* Test zen-grid-background() with $display-zen-grid-background: false */
+  $display-zen-grid-background: false !global;
+  @include zen-grid-background();
+  $display-zen-grid-background: true !global;
+}

data/tests/tests/zen-grid-container.scss

@@ -0,0 +1,49 @@
+/**
+ * @file
+ * Test zen-grid-container()
+ */
+
+@import "zen-grids";
+
+#test-zen-grid-container {
+  /* Test zen-grid-container() */
+  @include zen-grid-container();
+}
+
+#test-zen-grid-container-2 {
+  /* Test zen-grid-container() with IE 7 support */
+  $browser-minimum-versions: (ie: "7") !global;
+  @include zen-grid-container();
+  $browser-minimum-versions: (ie: null) !global;
+}
+
+#test-zen-grid-container-3 {
+  /* Test zen-grid-container() with IE 6 support */
+  $browser-minimum-versions: (ie: "6") !global;
+  @include zen-grid-container();
+  $browser-minimum-versions: (ie: null) !global;
+}
+
+#test-zen-grid-container-4 {
+  /* Test zen-grid-container() with $context: grid-item */
+  @include zen-grid-container(grid-item);
+}
+
+#test-zen-grid-container-5 {
+  /* Test zen-grid-container() with $context: flow and $gutters: 21px */
+  @include zen-grid-container(flow, $gutters: 21px);
+}
+
+#test-zen-grid-container-6 {
+  /* Test zen-grid-container() with $context: flow and $gutters: 21px and $zen-switch-direction: true */
+  $zen-switch-direction: true !global;
+  @include zen-grid-container(flow, $gutters: 21px);
+  $zen-switch-direction: false !global;
+}
+
+#test-zen-grid-container-7 {
+  /* Test zen-grid-container() with $zen-gutter-method: margin */
+  $zen-gutter-method: margin !global;
+  @include zen-grid-container();
+  $zen-gutter-method: padding !global;
+}

data/tests/tests/zen-grid-item-base.scss

@@ -0,0 +1,65 @@
+/**
+ * @file
+ * Test zen-grid-item-base()
+ */
+
+@import "zen-grids";
+
+#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 !global;
+  @include zen-grid-item-base();
+  $zen-box-sizing: border-box !global;
+
+  /* Test zen-grid-item-base() with $zen-box-sizing: universal-border-box */
+  $zen-box-sizing: universal-border-box !global;
+  @include zen-grid-item-base();
+  $zen-box-sizing: border-box !global;
+
+  /* Test zen-grid-item-base() with IE 7 support */
+  $browser-minimum-versions: (ie: "7") !global;
+  @warn "The following test will generate a warning.";
+  @include zen-grid-item-base();
+  $browser-minimum-versions: (ie: null) !global;
+
+  /* Test zen-grid-item-base() with $box-sizing-polyfill-path: "/boxsizing.htc" and IE 7 support */
+  $box-sizing-polyfill-path: "/boxsizing.htc" !global;
+  $browser-minimum-versions: (ie: "7") !global;
+  @include zen-grid-item-base();
+  $box-sizing-polyfill-path: "" !global;
+  $browser-minimum-versions: (ie: null) !global;
+
+  /* Test zen-grid-item-base() with $box-sizing-polyfill-path: "/boxsizing.htc" and IE 6 support */
+  $box-sizing-polyfill-path: "/boxsizing.htc" !global;
+  $browser-minimum-versions: (ie: "6") !global;
+  @include zen-grid-item-base();
+  $box-sizing-polyfill-path: "" !global;
+  $browser-minimum-versions: (ie: null) !global;
+
+  /* Test zen-grid-item-base() with $zen-gutters: 15px */
+  $zen-gutters: 15px !global;
+  @include zen-grid-item-base();
+  $zen-gutters: 20px !global;
+
+  /* Test zen-grid-item-base() with $zen-gutters: 15px and $zen-direction: right */
+  $zen-gutters: 15px !global;
+  $zen-direction: right !global;
+  @include zen-grid-item-base();
+  $zen-gutters: 20px !global;
+  $zen-direction: left !global;
+
+  /* Test zen-grid-item-base() with $zen-gutters: 15px and $zen-switch-direction: true */
+  $zen-gutters: 15px !global;
+  $zen-switch-direction: true !global;
+  @include zen-grid-item-base();
+  $zen-gutters: 20px !global;
+  $zen-switch-direction: false !global;
+
+  /* Test zen-grid-item-base() with $zen-gutter-method: margin */
+  $zen-gutter-method: margin !global;
+  @include zen-grid-item-base();
+  $zen-gutter-method: padding !global;
+}

data/tests/tests/zen-grid-item.scss

@@ -0,0 +1,101 @@
+/**
+ * @file
+ * Test zen-grid-item()
+ */
+
+@import "zen-grids";
+
+#test-zen-grid-item {
+  /* Test zen-grid-item(6, 4) with 12 column grid and 20px gutter */
+  $zen-columns: 12 !global;
+  @include zen-grid-item(6, 4);
+  $zen-columns: 1 !global;
+
+  /* Test zen-grid-item(6, 4) with 12 column grid and 20px gutter and $zen-box-sizing: universal-border-box */
+  $zen-columns: 12 !global;
+  $zen-box-sizing: universal-border-box !global;
+  @include zen-grid-item(6, 4);
+  $zen-columns: 1 !global;
+  $zen-box-sizing: border-box !global;
+
+  /* Test zen-grid-item(3, 3) with box-sizing: content-box, 5 column grid and 10% gutter */
+  $zen-columns: 5 !global;
+  $zen-gutters: 10% !global;
+  $zen-box-sizing: content-box !global;
+  @include zen-grid-item(3, 3);
+  $zen-columns: 1 !global;
+  $zen-gutters: 20px !global;
+  $zen-box-sizing: border-box !global;
+
+  /* Turn off $zen-auto-include-grid-item-base */
+  $zen-auto-include-grid-item-base: false !global;
+
+  /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter */
+  $zen-columns: 5 !global;
+  $zen-gutters: 40px !global;
+  @include zen-grid-item(3, 3);
+  $zen-columns: 1 !global;
+  $zen-gutters: 20px !global;
+
+  /* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter */
+  $zen-columns: 5 !global;
+  $zen-gutters: 40px !global;
+  @include zen-grid-item(3, 3, right);
+  $zen-columns: 1 !global;
+  $zen-gutters: 20px !global;
+
+  /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter and $zen-switch-direction */
+  $zen-columns: 5 !global;
+  $zen-gutters: 40px !global;
+  $zen-switch-direction: true !global;
+  @include zen-grid-item(3, 3);
+  $zen-columns: 1 !global;
+  $zen-gutters: 20px !global;
+  $zen-switch-direction: false !global;
+
+  /* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter and $zen-switch-direction */
+  $zen-columns: 5 !global;
+  $zen-gutters: 40px !global;
+  $zen-switch-direction: true !global;
+  @include zen-grid-item(3, 3, right);
+  $zen-columns: 1 !global;
+  $zen-gutters: 20px !global;
+  $zen-switch-direction: false !global;
+
+  /* Test zen-grid-item(3, 2.5) with 5 column grid and 40px gutter */
+  $zen-columns: 5 !global;
+  $zen-gutters: 40px !global;
+  @include zen-grid-item(3, 2.5);
+  $zen-columns: 1 !global;
+  $zen-gutters: 20px !global;
+
+  /* Test zen-grid-item(3, 3) with $zen-grid-width: 1000px, 5 column grid and 40px gutter */
+  $zen-grid-width: 1000px !global;
+  $zen-columns: 5 !global;
+  $zen-gutters: 40px !global;
+  @include zen-grid-item(3, 3);
+  $zen-grid-width: 100% !global;
+  $zen-columns: 1 !global;
+  $zen-gutters: 20px !global;
+
+  /* Test zen-grid-item(3, 3) with $zen-gutter-method: margin, 5 column grid and 5% gutter */
+  $zen-gutter-method: margin !global;
+  $zen-columns: 5 !global;
+  $zen-gutters: 5% !global;
+  @include zen-grid-item(3, 3);
+  $zen-gutter-method: padding !global;
+  $zen-columns: 1 !global;
+  $zen-gutters: 20px !global;
+
+  /* Test zen-grid-item(3, 2.5) with $zen-gutter-method: margin, 5 column grid and 5% gutter */
+  $zen-gutter-method: margin !global;
+  $zen-columns: 5 !global;
+  $zen-gutters: 5% !global;
+  @include zen-grid-item(3, 2.5);
+  $zen-gutter-method: padding !global;
+  $zen-columns: 1 !global;
+  $zen-gutters: 20px !global;
+
+  /* Test zen-grid-item(1, 1) with $gutters: 10px and $zen-auto-include-grid-item-base: false */
+  @include zen-grid-item(1, 1, $gutters: 10px);
+}

data/{templates/unit-tests/sass → tests/tests}/zen-new-row.scss

@@ -10,9 +10,9 @@
   @include zen-new-row();
 
   /* Test zen-new-row() with $zen-direction: right */
-  $zen-direction: right;
+  $zen-direction: right !global;
   @include zen-new-row();
-  $zen-direction: left;
+  $zen-direction: left !global;
 
   /* Test zen-new-row(left) */
   @include zen-new-row(left);
@@ -21,6 +21,6 @@
   @include zen-new-row(left, $switch-direction: TRUE);
 
   /* Test zen-new-row(left) with: $zen-switch-direction: TRUE; */
-  $zen-switch-direction: TRUE;
+  $zen-switch-direction: TRUE !global;
   @include zen-new-row(left);
 }

data/tests/unit_tests.rb

@@ -0,0 +1,57 @@
+# Navigator | Copyright 2013 Team Sass | MIT License | https://github.com/Team-Sass/navigator
+
+require 'compass'
+require 'compass/exec'
+require 'test/unit'
+require 'diffy'
+require 'colorize'
+require 'pathname'
+
+class TestCompassOutput < Test::Unit::TestCase
+
+  Compass.add_configuration 'config.rb'
+  Compass.configuration.project_path = Dir.pwd
+
+  # Remove all current Diff files
+  Dir.glob("#{Dir.pwd}/output/**/*.css.diff").each { |f| File.delete(f) }
+
+  Compass.compiler.sass_files.each do |sass_file|
+    test_name = File.basename(sass_file, '.*')
+
+    define_method "test_#{test_name}_compile " do
+      # Compiled CSS file path
+      test_file_pwd = Compass.compiler.corresponding_css_file(sass_file)
+
+      # Relative path of compiled CSS file from Tests directory
+      relative_pwd = Pathname.new(test_file_pwd).relative_path_from(Pathname.new("#{Dir.pwd}/output")).to_s
+
+      # Control files path
+      control_file_pwd = "#{Dir.pwd}/controls/" + relative_pwd
+
+      # The base path of the sub folders, making the folders if needed
+      base_pwd = relative_pwd.sub(File.basename(relative_pwd), '')
+      FileUtils.mkdir_p "#{Dir.pwd}/output/#{base_pwd}"
+
+      # Compiles Sass file
+      Compass.compiler.compile sass_file, test_file_pwd  # Raises exception upon error
+
+      begin
+        # Assert that our test output matches our control output
+        passed = assert FileUtils.compare_file(test_file_pwd, control_file_pwd), "Compiled output for #{File.basename(sass_file)} does not match control output!".red
+      ensure
+        # If there is a failure, generate a diff of the files and put it with the compiled file
+        if !passed
+          test_file = File.open(test_file_pwd).read;
+          control_file = File.open(control_file_pwd).read;
+          diff_pwd = "#{Dir.pwd}/output/#{relative_pwd}.diff"
+          diff_content = Diffy::Diff.new(control_file, test_file, :include_diff_info => true)
+
+          File.open(diff_pwd, 'w') { |f| f.write(diff_content.to_s(:text)) }
+
+      	  puts "Control->Compiled diff output to ".yellow + " tests/output/#{relative_pwd}.diff ".colorize( :color => :blue, :background => :black)
+        end
+      end
+    end
+  end
+end
+

data/zen-grids.gemspec

@@ -9,55 +9,14 @@ Gem::Specification.new do |s|
   s.homepage    = 'http://zengrids.com'
   s.rubyforge_project =
 
-  s.version     = '2.0.0.beta.1'
-  s.date        = '2013-07-22'
+  s.version     = '2.0.0.beta.2'
+  s.date        = '2014-03-11'
   s.licenses    = ['GPL-2']
 
   s.authors     = ['John Albin Wilkins']
   s.email       = 'virtually.johnalbin@gmail.com'
 
-  s.add_runtime_dependency('sass', ">= 3.2")
+  s.add_runtime_dependency('sass', ">= 3.3")
 
-  s.files       = %w[
-    bower.json
-    LICENSE.txt
-    README.txt
-    lib/zen-grids.rb
-    _zen-grids.scss
-    zen-grids/_background.scss
-    zen-grids/_flow.scss
-    zen-grids/_grids.scss
-    templates/project/_init.scss
-    templates/project/_layout.scss
-    templates/project/_modules.scss
-    templates/project/_visually-hidden.scss
-    templates/project/example.html
-    templates/project/manifest.rb
-    templates/project/styles.scss
-    templates/unit-tests/manifest.rb
-    templates/unit-tests/README.txt
-    templates/unit-tests/sass/function-zen-direction-switch.scss
-    templates/unit-tests/sass/function-zen-grid-item-width.scss
-    templates/unit-tests/sass/function-zen-half-gutter.scss
-    templates/unit-tests/sass/function-zen-unit-width.scss
-    templates/unit-tests/sass/zen-new-row.scss
-    templates/unit-tests/sass/zen-float.scss
-    templates/unit-tests/sass/zen-grid-background.scss
-    templates/unit-tests/sass/zen-grid-container.scss
-    templates/unit-tests/sass/zen-grid-flow-item.scss
-    templates/unit-tests/sass/zen-grid-item-base.scss
-    templates/unit-tests/sass/zen-grid-item.scss
-    templates/unit-tests/test-results/function-zen-direction-switch.css
-    templates/unit-tests/test-results/function-zen-grid-item-width.css
-    templates/unit-tests/test-results/function-zen-half-gutter.css
-    templates/unit-tests/test-results/function-zen-unit-width.css
-    templates/unit-tests/test-results/zen-new-row.css
-    templates/unit-tests/test-results/zen-float.css
-    templates/unit-tests/test-results/zen-grid-background.css
-    templates/unit-tests/test-results/zen-grid-container.css
-    templates/unit-tests/test-results/zen-grid-flow-item.css
-    templates/unit-tests/test-results/zen-grid-item-base.css
-    templates/unit-tests/test-results/zen-grid-item.css
-    zen-grids.gemspec
-  ]
+  s.files       = `git ls-files -z`.split "\0"
 end

data/zen-grids/_background.scss

@@ -3,78 +3,14 @@
 //
 
 
-@import "grids";
-@import "compass/css3/images";
-
-// Specify the color of the background grid.
-$zen-grid-color           : #ffdede             !default;
-
-// Specify which set of numbers to display with the background grid. Can be set
-// to: both, top, or none.
-$zen-grid-numbers         : both                !default;
-
-// Create an image set of 25 numbers for the grid using data URIs. Users who are
-// crazy enough to use a 26-column grid or larger are free to extend this set.
-$zen-grid-number-images   : ()                  !default;
-
-// If the set is empty, add our default set of 25.
-@if length($zen-grid-number-images) == 0 {
-  // The number 1.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARVJREFUeNpi/P//PwMMMDIyMpALYOawEKEWpIYPiAWg7M9A/B6If4LMwaaYkGHiQKwFxJpAzA3E94H4LBA/BOJfWJ0Kw0iAFYhFgFgHiIOBuPHGjRtvf//+/X/WrFmHgHxPqIsxzGHC4TJ+IDYCYu+EhIQ4oGG5ysrKQiCJX79+cQApXqilDMR6mROI5Z8+fVotJibGS0rk4HLhd1AYSUtLd8rLyy/78uXLb0oN/AjE54D44LNnz27euXPnHaUGglz0BoifAvEHaniZbDBq4BA0EJR8vjAxMf2FCbCxsf2AljhYEzsjgfIQlKe1gVgPiCWAGGTwbWylDcwcQgayQIssASj9D5qLMMpDYg0kucSmeqQABBgAsyJrV7MArsMAAAAASUVORK5CYII='));
-  // The number 2.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAdBJREFUeNqslL9LQlEUx3367AdamdCQaVjQ0uAQBS+hxbVBhEcESoOG/0SDS9HakDYGEU0huLa1GW4tGtkkURBlQRn4LPseOBdej0u+ygsffByvH98995zj6Ha7DqIfizyKkCmKYv1eBaPAB4ZpP3gDz/zZ+Y1wAEyBeTAH/OATPIBrUAP3oG0VOiRHVli2nslkTmu12pNhGF2iUqncxePxI3yngwDv7SkcAstYeSEy02w229FodB97NN77TeiU5NYDJlOp1KII5HK5y2QyWaZnr9frxvMSv6HH+mOZkPI3EgwGfSJQr9db5g2hUGiMZW47wg/QUlXVMAd1XQ+I50aj8cI3bUhrx5JD+ucI2ADb4DASiZyZ80j5pTzLcigTOlkaBqtgp1gs3ghZqVS6QmyTTm73lkXpTIBEOp0umm9Y07QDxFdkF/KTcBAsgC3k61UI8/n8BWJJrlOnXaEo7BQJhKxarTYR2+OiDnM1OOwWtkbFS0cUwlgsdo74MdgFa2AauOwIqW8ThUKhLOsUIpvNnmBPlIdGz06h1fH7/a6/jDDZtKEjz/ClzFrfAuudpw1d0C03wo/jS2HpOM9Da3tRd1CnPNodX/+a2H0XfgkwAIVYVeQ1/9a6AAAAAElFTkSuQmCC'));
-  // The number 3.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAe5JREFUeNqslM1LAkEYxnX7lL62CAmTwENkhyKwDkZg185dgvDQwS7RUQkvkRfzKNQfIF5CukjRJelk4EWwDmVUEJinaNlSMLPWnhdmYFvWGqiFH44z8z7zzjPvjKXZbFqI//hIx8rFrFarfkwCNiCDPtABNFADKngFH6KC1BgEE2ASOEE3E1DALbgCZfBuFLSYbJmC51wu1046nb5pNBpNTrFYVEKh0DHGV8AoW/xXQTsFJJPJC72YHq/Xu485Xrb4N0HJxFvybsjtdtt5Rzwev04kEvf8v9/v97CFbcbgdhPBT/AmSZLGOxRFaRgyoa22scP7VbACih6PZ5cdzAjoSqVS03xCoVB4wM8zLWxaOwYPaZEBMAXWI5HIud6/TCZTQv82mBX18MfP5/M5Y7HYAprDlLlIhpTdPNgEe+AQHOVyuSeeJZUT+taAQyRDuhnufD6/heANsBwOh8ey2ewTn+BwOPrZCXcYg80EycMeTdNa2lGpVN5ZNWgiglQitWq1Wtd3yrLcydvlclll1VAX8ZAehCUYf9rqpgQCgQPMWQS9IlePtuyiCxGNRs9UVa1zoVKpVA0GgycYWwVjrLiFnq9OFjADxlkm5NcLuAOX4NHstWklyEVlBvfvjb2HL8xri8iW//Ri/7vglwADAMZnRpCsTg8QAAAAAElFTkSuQmCC'));
-  // The number 4.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAW5JREFUeNqslDFLw0AYhpOaSFuiDjqViiUKVhACDpJCQycX/TVChCz+Evf8ALtlCGZyCW6uOiR4QusgSgtmiO/BBZJ4l1qSg4dwd19e7vvuvU9K01SiNDGojpyJybLMi9kEu2AHqGwtAZ/gA/ysI6iAPjgHx6DD1pfgGTwCUhaUKlLeBheO49wnSZLmwfotGPJSblWUZAscmKY55Ox1ciUoDJGgwmrXm0wmg3UuRiTYpWK2bY80TVN93yd1BWm6/fF4fEgnQRDM6ggW0iWELKbT6byOYCFdz/OIwJ9d3sW0BOn2LMvS6cR13TeBpfaZ4f96p+TDI3ATRdF32X8ZcRx/IeYa6P/x4YbIY7kfZZEXeYL0rS7wFIUdg+0tWWxxj/OW98AZOM0ag2EYgzAMr7IAVVXv8PHAA5jnU1Y4B6Cd5Am8sJvU2+32ZSnmHbyy2JUnLOzTGwcjcMLqVtltVgnyemJlP5Sa7tiNC/4KMAAbxb+98QKR2gAAAABJRU5ErkJggg=='));
-  // The number 5.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAc5JREFUeNqslM9KAlEUxp0xzSTNDHMoCiIKKRChXbgIAldKEK5y4Up9A5dufAMRRB8gwnW7lkV/EBcR0WzaBMEQFRNFlkNO34E7MU23msyBHzNz58x373fOPdeh67qDGMRFOkOccQEMg3EwBlyW7xp4AHega/2ZJ0gCM2AFLIARy/cOkMEJuAZvX5ZpsRwEyUajsa9pms4jn89vI2bVOhnpiJwVkt2JcDg82U8eeZZpEqd5IJPJHDebzVtmj3J3BBReDsU/LoAEn1keSazXl2AikQghd0mw2Wq10vF4nAo2DTx9CWaz2XnjORaLSYVCYR2Pc8BnR5BsdURR/NgO1Wr1rFKpnBvvkUiEChYCXjtFobx0U6nUHu4XxgSlUmnZCJAkycfEXHYE3dQh7XY7HY1Gp2igXC63e72e1Y2T55BnmQI9ZgG/3+/Fu5OTGltVfqFelWX5xhgIBAJuc4CiKI+4PbG+dvzWeqNgLZfL7XzXevV6/QAxG9RRVi2eIFmbBVvFYnEXK703hFRVfa3Vaoe0k8Aiy/cnQcEQEwTBWhjauEvsxAmyicjmJTgFVyw9uh1BYwf4KYXsVBFYu6nsPOyaxX6y/K8TW3QM+HoXYACXiuXQRCn2XAAAAABJRU5ErkJggg=='));
-  // The number 6.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcZJREFUeNqslLFLw0AUxpPWKNZag6igqYKgCA61dhScHbV0URwcCo7+DV1K5y6FTlIcdQl0dhKkdBAHsaJ1MBQdJEZNKmnQ+B3cQZte2wx98OPIu5ePe+/dO8F1XYEwDCM6I332yd4EkOkaBA74BB/AJhq8n3g2ChbAGlgBs9T3A57BDXgBTfDXdUxPygGwCPbT6fR5tVp9dRzHZRQKhWvsHYMNevIOLZ4gCdpOJpOn7ULtlMvlO8QcgnmvYICTbogEplKpTeYolUpPmUzmln3H4/ElLFO0DII3PV79IuFwOMQchmG0stlsXZIklRCNRs/gfqc1HSgogTFFUSaZIxaLyZqm7SDd3UqlsgVB0kwLtLh3x1PDZXCCZrz1qqGqqg+IOfJbwy5DDev5fP6efScSCQXLnLfLvVLuMlJDXdcdTmmCfgRJ/r+8KfBjPEFyErvRaHwPGl2/o0c692WaZpM5ZFnuuG+WZdm0y46fLg+clGKxeIWYPTDjZ/TYLB9gli9qtZrOhNAcO5fLXdIrs+qdFKIjMjFRFL3TQq7GOv1xmnbUBI+AjKHmfcL6CbL6Ruh7OE5CaH0NSotXPmHYL3ZAGLL9CzAANR4i5o9tHM8AAAAASUVORK5CYII='));
-  // The number 7.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAbBJREFUeNqslL1Kw1AUx5O2ih8BsWoRAw6SgAHJKvQFunWqQ18gs5Oj4DP4DuLomqWTjhVEKYVapDRBrdXUqtU2avyfelNCbGwTvfDj9N5L/j1f9/CO43C0eJ7n/rIGOgGCk2ABzIEJ73fgDbTAI7DHEYwDEWyCdTDtEfwAFrgAp6DpF+z/GGy+FwmkNU07sG3b8WMYxhPut8GaP2QiFiFXFMqMLxU/lT2LQl4FW2AX7IPDUqnUIg/r9foz9jtAHtdDytMNOAZH4EQUxY4sy1QgrlKp3MNQ2N1hDiYCIuuBa/BCBcrn8yvuBTy9hSHR12Efjsoh5WpRVdWBYLFYNFmlIwlSxecVRUm5B4VC4QrmgfVjKEG6E0BSkqQkHVSrVatWq1Eq2izXoQSnSCybzcqCIPRbpFwuN1m4HfZqQglS/lKZTEZyD0zTtNiz6/4WVtCaBUvI37J7oOv6Jcwd85Abt7HdP9qgxrYsq0cNTRb7PaAOc2TU06PzRC6XE938NRqNNvOOmvozyMGg8RXzTByFvVsqyDk4Y20Tah76Z2KcNXKLtcx7FMF/ndiRBb8EGABjzN026ymFhAAAAABJRU5ErkJggg=='));
-  // The number 8.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAahJREFUeNqslLFOwlAUhi0IGpGUoEMTjYnGmLgYEhhN4+qkzpo48Qg8gimMTMDI5hO4GJ3UgUkXOhgGJCYYI5bYRKBD/Y85JeXmokW8ycdtzz39ezn/7VFc152hoSjKzLSDtJQfBCNABQkwz7EBsJjBJIJRsAp2wCYLh4ANHsE9eBJFv7XoxxPlEQZr4DiXy120Wi3bcRyXsCyrbxjGNa1xTjiIYAzo2Wz23BMSoTXk7IFFUTAkqS3VazmVSq17gWq12igWi6Z3r+v6NiYNLIgPywQVMY6/OlIrVVXn2LRQEME+6DabzVcvkEgkov6Eer3+jOkN9KRnR1LDXWCYpvku1q9Wq71g7YxzYkFMWQJHpVLpbpwp5XL5FjmHnPurKfRWLZPJDE0hQ/ympNPpDUwrIC4+PCsRDHPBhye90+k4/gRN0+J8ZCJBTHF9TDxkO6TdfNq23fcCyWRyZCftdvuDP0MniMvUDPYLhcLlOFMqlcoNcg5kpsgEaddkyEk+n78Sv2VyH2unYIubyNTdpgEeuNv0/LWeph92+dqdpMH+e8f+k+CXAAMABxE8L2GVSOsAAAAASUVORK5CYII='));
-  // The number 9.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAaVJREFUeNqslEFLAkEUx910N8tclk5FEEQUGB3qC0gXbx70WBie9CP4FfTq3Q/QTYPFU/UFOiQh5EEI1iAsWLZ0Q1tq+7+YCVtG19KBH8O+2f0xs/PeC7iuGyDmMcgTmrBOayrQwBKQwABY4AU44z4SDQVsgD2wA1aZkERtcAsewLtwm54jB8EmOCkUCnqr1TIdx3GJTqfTL5VKl1jLgC3vhr49AuEKOMrlcmdc5AXSC7yTZDv/JVwQHHcZrMXj8RgPVKtVo1wu3/HnVCp1yHaoej8WCWWSqqoa5gHDMGzTNH8uIRKJLLKTKNMIKSZHo9GwT5ZIDF/hTEOUNh+UDr1eb8ADmqYpswhJ9Nztdp8w71Igm81uTysUHfmNkjafz5/rut4even/Cimx6RaD6XT6WpZlnWg0Gpa3Jhi+Qqrb9Xq9nkESH4NkpVKJjb5g2/YQU19UeqJ/SPk2aDabj4lEYl/0D2u12g2me/A6TS2HWBWcFovFK8uyhn+pZYnLJEnydhtqEAes21BVfPp1m0lCLtUYykhKje2H47rNTB177qX3JcAAagDd/y1YjuwAAAAASUVORK5CYII='));
-  // The number 10.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAdZJREFUeNrclD9IAlEcxzW7tLiyrCXrgoiGaInIIQKhwc0xkCYDcXYVDRqaGp2dXASpKYgGlxBbcmvJqCPKSCE4PbMyr7q+D35P5Lj+EC714MO73+/33vfen9/7WSxdblYTXx8YJli8TtjJ1w908Ahq1L9+JsjEJsEimAU2IINrMEI+F3gH9+ASnIM70DIKjYMlsOHxeFK1Wu1F0zQ9GAzuw7cVCoX2isWiwnyMQqFQhm8XsXUwRT9vr3ICrIFttHy1Wm3xiYFAIO/z+bLcNhIOhzOYtwoGmVgPMeT1ej0YsBmNRldEURT433Rdt0F0mtupVEpOJBJn3Pb7/QvoJCByQXYe9VwuVxAEYQdbPDLekiRJA/wbR9FSFEXjttvtHqLV2bmgTgd8DHLpdPrUKOh0OoVvMsXGL7iXnOyGymCM0uDXrafbif1PBFVV1b4I6x38TLBUKj112i6Xq33rjUajyTr+9Hq/rR5W61smk7lCfs4wOxKJzHXGkWYn6G7Ag9kK2daeOx0Oh0PJZrP5eDx+IMtylfsrlcpjLBY7TCaT7K1fgCezasMKxDKYpzL1TBXFWG3YPJVi7CHc8i2bla9R9jiAQCtWTeohm9ekeqjSuD/SPgQYANoDxDJkiCZZAAAAAElFTkSuQmCC'));
-  // The number 11.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWxJREFUeNrslE1LhEAYx9eXlcK2jQgTRDwYRC90iL5EdOwQdBBP3foEnTr2DcQP0KE+RUHHgm5GRoTpqfcVLMXd/hNjjKJshz3soQd+jPMf53FmfObfao04uAZdBNNghj73wCvIQadG/wKDpoTkxXmwDJaADO7BNfgECxX9EjyAtJqoDebAKtgGh57nPWdZNnAc5wL9PWCxuuu65+hv0hX/BM8k7IJ1sGXbtoVJ+6ZpzpKBJEnINjcsy9ph9TRNJ+gRtNntFTEJjDAMDxRF6bBLz/NcCIJgV1VVedhPYVeYkLPQNO3IMIzjOI6zYkAQhFzX9RPop6w+LOE7uAJnURTd+L7/8rsNUSQHHkJ/ZPWm8iiCfPmJTARvpdriuD6a+C91yI+6sP8TjmFCsUYj5RPzPJ8XgiRJxBRI/WU1eo/OabQvcqdXwBpQqWXdgjswBRYresltmuxLpg5C2j69RR/UBLoVveSH4x/fAgwA+s1/zoQYuDcAAAAASUVORK5CYII='));
-  // The number 12.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmJJREFUeNrMlM+LUlEUx5/Oe9KkjVOUyZhKM22mQhdRDC5atJidmOZOBXHhxj+goIW6khauDP+AUHctWiS4CYJQw2hoaOGURGU6QY3OkGXjr9f30rnOwxxGokUXPtx7z333vHvu+d4jCP+4qabYRLAAFmn8jdCQbR7I4DvYpX5wmEPm4Cy4CFaBFnwAH8FJsAJOgRH4At6CKvgMekpHEjgNLoNbIF6tVnf6/b6cTqdLmMdCodBD2FrMxqhUKtsul+sB1rxgafJwzNk6uB0MBh8pNyaTydd2u/0xnytpt9s9h8NxH/vWwDEeokD3Ym00GncNBsMJ5Z9kWVYHAoHzfB6NRjdrtdqPbDa7ptPpJJ/Pd7VYLD6h8H+q6bsuuyuTyXTParXmOp1OX+nUYrFo+Zg5U66ZzWY93TW7NoE73AMvwdNms7mFTa1x1lSqkSiKA6UTr9e7xMf1en2PMt1XhswmX0GDpHCQdlHseTyePE3P2Gw2k9vttvD1TCbzAt02OR2f8NCmVquH6N6DV6AZi8VW+Fo+n39TKpU2MPwE9mdyiJBlksRxSGfV6XQuMzu750QiwZKxBVok9nHIRzUm6oV4PL7ODblcbqNcLj/D8B0lVZjphKPRaI7pNJVK3TAajVrK9G4kEilRmJLyYEc6HAwGGgj7gt/vt3EbnG3SY7gCrgEjmJv5hBD2MhMxtxUKhet4KT5wJxwO34TpHBWPP+6QyadDmf39yCVpX6/Xa/62fDHVXwI2CmNIGRSoysxPfN+lavOcNDycVr60VPe0VKa6ivcuTYmIvZSdyfL1/7ZfAgwAPr/v4RS2v5YAAAAASUVORK5CYII='));
-  // The number 13.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAl9JREFUeNrUlM+LUlEUx98z3zRTNiMVkTq4C4xkFpWCFBqu20ghRYrt+gsUkZK0hbh00WqEcGPgzhhatIgUJTAEaTEaTRA4ziym/DGazficZ98b58arnJBo04UP991z7j0ev/fcIwj/eIhTbHNATzD/AHwFC+AEkIBCti7YBePDArJgy+AiOAeOgC3QBifJN08BmO09WActMPo1kAFcBndtNlum2+3uy7I88fl8L0wm05N8Pv+OrTmNRqMdCoXWsP8WMKmTE8lwEzzCKHU6nRE/6PV6X6fT6Q11MDUOh+Mxzjkoc0FDLDqdThs23A+Hw1d0Op2kTt9qtS7x71QqVc9kMh/42u/3X8J0hjT+HowJvFssFt9IkpQMBAKvfro1UVQ0Go3C1+12W4YcP/SaTCYiac1iCVpmAzugDIbZbHYBGVzjB7Ra7Z7dbn9Kf+k0OJrL5Va4v1arfcT0GezxDAW6oW3QBF/UGSLgEFMD1OPxuAGyXPd4PGbmKxQKm6urq+t05kAd8K+Gy+VaTiaTV3nmMwUcj8fHMFnA+Wg0ug2d16rV6ifut1gsZiq547MGnK9UKrfxV++BG5FIxFwqlXa432g0LtINSzMFxC1qFEU5dF+/3x+RfsrMGvZ6PVm91uv1c/y71Wqx99wH+7xs/tw9RPGgXC5vud1uppMQi8VW1H7Ub53e+3DaeSb+A/XTQqE/g+1hIpF4yd83o9lsDoLB4HP47gAzFfdv3cZA7/ICCc1a1AbV51nqQDrSq0e+t2CTd5tp7esUWKJbk+nggH5AT3sEehld8svCfzO+CTAAQZUW1CtBkesAAAAASUVORK5CYII='));
-  // The number 14.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAgdJREFUeNrMlLtPIlEUxmFYdxlh1zeaABkT3Oj6IrFiC4FQammMsTGUNBZ0JBsLS/8FSgvspYKCBBsbNLEwYsSYjcBsIj7QiUZGmP2OuWMmehWMW+xNfrkz95755p7HPSbTPx5mzton8A10sucbcAk00A06QBuzVUEVnIMaT5AE+sEo+AFs4ATsgQbwgmEgMvs7sA+2gWwUoj/2gnEwB1bz+fy5qqpaPB7fwvsCmI/FYpu0ZgTrK2BEFxLYTG5MgdlwOLwEsWWPx0PumWq1mhWTEwz5fL4RTohEQwgeXdQXpVKp9MvhcHzlfGQHXYFAYLBZUgRDLH47nc41SZISiqKouoGmaRTnL9FodMJut7dlMhm5FUHK1C7Ilsvlw0KhcKEbNBoNC2Xd7/dL9J7NZs9aEaQTVUAJXBkN6vX6Y8KCwaAky/JtMpmstCL46qATRiKR7+RuOp3mufsZtOuJEVqp/lAo1EdzIpEoc7bpErhZpTxl+c2BcqEaNaVSqenne8VicdHlch0w4Yrw0bvLqkB8l8tms1lrsnfHEtvcZYvF8uB2u9fxqFDwvV7vYC6Xm9X34e4GplNwzROkvyiCINSf7pUo3rDLfwwcVqt15tk3f1gDqfK6DWVqDEyCASpDcAR22Cl6wE/WiURet+G1LxvrhTbWsqqsH96zwPcYeuKLfvj/j78CDACe8KXB21214gAAAABJRU5ErkJggg=='));
-  // The number 15.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAi5JREFUeNqslE1rGlEUhp2ZjDFKrLGkKK2LIgUhG03iIqm4aMFVoVC7KS4sUhT/QJduXHWpuOvKjYI/QRCCEJIqGtpa2kWyaNNQoV8m1qZ1yEzfG84Ng5mkE/DAw9yPmXfOOffcI1qmbDMGa1bgIgTwh9bngDzxrgIOwXcwNhJkYrfAMrgDJPCT9twkqrdj8AG8AgfgRC/kBavgaTgcLg8Gg7+KomiJRKJRKBR22NiIdDpdwTfr/GcihbUI7oKH+Xz+Wb1ef+JwOKynMSmK3ev1uq+SQybqjEaj4Uaj8fx/H8Dj7Vqt9o3CY7nbAn2eQyamgqNms9mWZflFMpncMOkME/xNeRyTzqmgBr6CTdCsVCpvLlOJxWKLSMMD8Kjdbj+ORCIrWL4JbFzQQn/4AvbB6DJBRODn42Aw6MlkMvcxvA3m9YIXmiAIqiRJZ+VQKpXeFovFd3weCARu0KHaLyrsc4LxeJzV2Q7l7TiXyy3xfY/HM09isilBTdPEVqt1LxQKMU8sKKuOqqqTkUk8WtGMoF7A6XTaMZcMTlw1Jcis1+sd8rHL5bLq9/r9/hCPX3SvTeXwBAV/wE9Xf8rMut3uHh6fwdBIUKFCPTObzfajXC53fD7fMJVKrfv9/gW2PhqNxtVqtZPNZl9i+p4LChOCrEGsgSW67Ex8F3wEC9SB3HQILEzm3WvwidqcJhi0r+vgGpUB73dHYJZ65Bw5wi7DgPbHdOOmb+K0Bf8JMABAPsyYlTRVAQAAAABJRU5ErkJggg=='));
-  // The number 16.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiZJREFUeNrUlE9IG0EUxmPXtdpC3P5RUhtSpBU8RQiUQj2UHILHXgs95BAwwUsOOQa8padACSS5mEvwFKQFaS4lhxIQJAQaRcSDbsVspC0tMUZjcLdt+r3wRraLaIReHPix896++Wbmzcyz2f5z6zvHNwDugWG2D0ET9AMF3AYSMPjfATgFHasg9QeBC3jAE/bvgF2egHwjPGkbfAEVUAUn4I95VQ/BNJiNRCIfDcPoELDTYD4QCCyVy+Wvwk+k0+lVigdTvPJuo62Mg1fgTTab3TAPgu+9z+crmH1m8vn8JmJegwdCcAg8TSQSy+cNwL8PmUxmR9job0ej0TVh12q1I8TMgUckdoOT+zMcDudkWX6bTCY3rKdkt9tl0W80GnosFlMRu0w4nc5FGs857Qr+AvuA8vG5UqloVkGXy3VL9N1ut6Jp2gxW97JUKj2HIKWsBXQhaGPjB/guSZJ+0T3zer1jDoejewAej2cklUq9QPc+p+5MsOeGQ1OR7y1hQ5Rux6g45SsLUg7r9bphcct82a8ueFnrSbBarZ5cEtIRT6+/F8Fms3m2RUVRBsz/Wq3WKZ+y0augkcvldv1+/2MyxFe0YrG4xW/5yLrl3zQTLmvbIvitUCishEKhd6qqHphWpsfj8U/BYHAB5iZXpH+qjcQF4hmY5HvV5mqzB+6ACXCXY4/BNlgHmihhfRfUQtlU82j2m1wPh3gh9AAajG67Nu2vAAMABvAJLzvmvhMAAAAASUVORK5CYII='));
-  // The number 17.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAglJREFUeNrUlE1LQkEUhm/qtQ/tu6ggxMIgbKUkkYJrF0I7wZUt+g39AVetWwVu2rjwF4gglBAhLQQXSghhEmX0gYVlddPbe+LcmG6JGW0aeJg75555Z+acmSNJf9x62tjNYIQhnyYwAVnnp4A7cANe2gmS2CxwgwVgBE+gnxFbAxTBITgHql5oBiyDdY/Hs1ur1Z4VRVHD4fA+9d/h9Xq34e/iE0gG4eiTwAfWotHoRiqVClssFlpEajab5nYxw78+dH2alontNBjy+/2edDq9qZ9kNBpfZFne4TiNxWKxlUgk4uDfdMxX0BJ3SIP7TCZzhIlbcN4TBWGro8uCDMXK5/NNkL1eryvZbPYMn4+cuA9BWuUKHNCkeDye1+8Q3SVl02azyQ6Hg7Iv5XK5C3TXpK0lxCTMo0nkQKs/fBMuitNAKBRa1AyFQoEWueVsS3rBTu392tjt9nHNUC6X6f7VREFDF4K0wzGn0zmlGRKJxDHv8Ok3grTDUZfLRXdVqlarD5VK5ZJfymtXgqqqkl9/MBict1qt78+vVCqJx1W7Emy1WiQyFAgE5jRbsViscoYfRd8fCeI19FL2xfglk8kTLgqNToLKFyeDgWLU43a7pzVbPp8/5YQ8dypfFPRVsMSJaPDRFL6jg5zVAleZCzGG7coX3bVhrn8Kx0nlBcyc1U918P+0NwEGAAJMv5rEne+7AAAAAElFTkSuQmCC'));
-  // The number 18.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAihJREFUeNrUlDGPElEQx5c791yRkw16itFYGCxOY4FIjMEQw2cwIYQCGwoqKhIKC4PxiAUFHYkVDRhLC0uj5GgwErVgC91G1GCMwHoQdTe6/ucy77K34sElNr7kx2Nm9s2bNzPvSdI/Hp4ZuhWgMmT/CraAwjqFvzPBmDH/5pCcnQaXwDmwDHTwDqyBEPCDJTABb8BLtptuRyfBZXAzGo3Wx+PxD8uy7Ewm8wi624VC4XG/35+QjiB7uVx+AlsanOHNd6I8BW6AOxibo9HIFAuTyeRmKpV6JmQ32Wz2AdZdBz6JQyeOxOPxKD64VSwWYz6fTxa72ba9HIlE1oRcr9f1arWqCRnr1jEFgVc4/EWJb7Vaz2VZvocjPt2rijjqrlz5/f6DmGT2tf1jg8+gDVqNRuP1rjbweGxd1ydCVlV1xWnv9XofMH0B32cFcBFsOHNEOYTuoaZpI3f+Op3OJ9jugmvgsIhw3liqVCrnQ6GQ6jaEw+HjtVqNCnJM9OdchyiKJxaLnRAyFcRZFBTsLHfJKskH9nu1hsOh5ZSDweAqt4y86JH3NRaK0DCMnagCgYDstA0Ggy2+htZCDtE2P9vt9sdEIkFXU8rn8+tOe7fbpbv+nh+QPxzSLt+cCkVRhqVSqev1eo10On0FOdtuj+l0ajabzRe5XO4+RE04dL82FMVVcAEcYudv93htKLpXbKfGtmc9X0d5kcwRG3PeQ4P/29J/MX4LMABVRPc2xeNx/wAAAABJRU5ErkJggg=='));
-  // The number 19.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAgVJREFUeNrMlDFoGlEYxzV6SQ6DmnQpFEJCEkjWQsmQOZsObhUKbgWHICKIW8AhOAhFkE4OcXCIg1pySyAZsqSUQBQlwUEIagRLU+uJh4mmsf8n3wv2uIYDM/TBj7vv+97737vvfe8zGF54GDV80+AVsJEtgw6YAXYg0ro70Kb4QEuQvc+CRfAWrJK/AqpgHqyBBZorU6wIbkBfvas3YAt8DAQCR4PBYMiA/RnsBoNBqVwut7i/Xq93I5HICWIfwDIwczEzOd6DvWQyWeKLSDDjdrtPx33jQPQYcxy089FgOXkXi8W+aC1A7DCRSFS4nU6nq9Fo9Irb2PVPzNkBS0xsihJ66/P5DgRB+BSPx0vqU7JarQJ/r9VqSqvVejoEi8XCDmuO0jYSfAAN8BVc5PP5ulrQZrMJOqrFyAUNdEI/wHeTydSfpA7NeibJsvz0i3a7fXpSwYdGoyFzw+PxrDw3eUqHYM/v959JklThjmw2W5tEcDRcLtc5qkBiFAqFtio8JHQJiplMZhs15wYO1OTGeFBRlHs8uvzq6cnhEDv65XQ6NXOYy+XyeFxTA/lL8Df7IH6ppxJshsPhoiiKHa/Xu4VCHp1ys9lUUqnUt1AotA/zkguOdxsTNYhNsE5XskcdhRX7a+o27FY8/qvbGJ/phQJdS5lyJFI/5HWo2Q////FHgAEA1kIAAe0AP5kAAAAASUVORK5CYII='));
-  // The number 20.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAnJJREFUeNrUlM+LUlEUx31m2S/DkRZqmpUVDU0UEhgDLjIwi1mKEhEtzNA/QBducicuRYg2LkRaRG2UaBbhuBahRUZpZJRGCoU6qfNDK/ue4dx4DOW4aNOFD+8+v+d9vffcc65C8Y+HJJvvAVqG5t9BH/TAOlCCQ6zvAxMwZH3I8b8NyeAouABOgYNgE3wCb0GTY06zrgM/wRfwDtTAZzAiMxU4Dm7F4/GVXq+3OR6PJ0Qul6tZLJYEtNsg5Pf7n1Sr1Y7Qy+VyC789hnaDF7SLDOfA9UQi8VwEyiED6A/cbnf+TzoRCAQeIeYy0Ii8HHM6nQsimTabbSWZTL6hudVqnfP5fAsej2de6JlMpi50GktLS5QqM6VKybnR6PV6jQioVCpr8pODqcZsNh8Q70jLqNPpjMW70WikRdH3ajL8QQcgSdJEbuL1ei1iXiqVulqtVrVDtVD+JAr6Bl6bTKYYnkeAPhqNnjUYDPspst1uDwuFQgt/OD9LHZLhKnjBx34OLIZCIasISKfTr6jOtu9gmiHlogsoR+pUKnUJ+dzKV71e78ZisRIX8UxDyU/a3km73b4YDAYvCjESiSxzYXdmNVXyKvXgDAr7qhCy2Ww1n8+/57Ya9fv90RSfiUDFWz2B1VxzOBxU7YpWq7WGg6GWMoG9dIKNRmMgd9DpdLvFfDAYbNBDtB6d7J1isfjhb50A/aHL5VreoVOucC1uVfjdWq32dYrhfXAPu3gq7+VmszkIh8PPoN0UvSzxzXGeS+Yw51Q+1vlG+ch9L24biUuOtJd8M40kNpDfc8pthmP+kBpALYujbzf4PlzluP9g/BJgABvhUfuxyjKwAAAAAElFTkSuQmCC'));
-  // The number 21.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAk1JREFUeNrMlM+LUlEUx53X0yztl1RYo0lCAzOBULaYXLgMQswkiTQDUXDjP9BOXQmz1o3LQINqYRvBTYsIlCQGZmWN/YIwImacKXNq3vzoe+BcuSPlm0WLDnx49917+N5z7j33GAz/2KbG/lVwFBwHh8Au+AHW+Ls15kPj76APfpG/LGgC02AOXAA2sAO+gmXQASssRD6zwALeg1fgI9iUIyWxO6lU6kmn01nVNG2XaLfbn0Oh0AOs3QN+cAvk4bNC6+Vy+Tn+r/NGIzODq7CSEJLp9/ubXq/3IXwWEonEU3nDYrH4EvO3wSlxZgYO/Uw8Hr8idshms0vdbndYqVTmrVarMRqNemq1WtBut1smXYoind8Rh8MxCpvEZEe32212Op2PXC7X48FgoOkJboOhqqp7HCORyFkx7vV6dCHv8P2AzVb/JihSppJ4HQgEFvCdoQvyeDzT4XD4nHBE6m0SBM5JKQvBDfAWfOPS8OVyOb9wqtfrb5rN5iKGn8Dp/QhSvQ05UlMymZwNBoNuWqDzKhQKzygDLuCd/QiKi6F05vL5/DUxWa1WF1ut1gtO16z39BSpsE+SWKlUuiFKA4e/lslkmvysjGMBTIzwIEXn8/nmY7HYJbEIsSXeyMubf9ETFREeFoVNRSwWG42GH6/hLrifTqdvYsrBkeoKkm3ZbLYDOhlRnQ4URdkeHbzJ9JM7jia3Lzrs8+AyPQpuXbJtcLehmz4GLgI7P4hludtMSZdCoie41xn/ENk616nKncXCJbQu90PDf2+/BRgAl2Xhjy3s2ZYAAAAASUVORK5CYII='));
-  // The number 22.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAh1JREFUeNrMlL9LW1EUx1+SF3+QtOoLHdQkaFsdHEIoL/gM6JDVIQhBGhIKJiUghf4BdciiOAUcmnQsiHQqwazdskWyiZCURjqE0oLUtLS14Etrv6ecWy7ifXbo0AsfcnO/9553z497NO0fD5c018FNMAqGwQX4Bj7xr3aN3pcNDoBJMAdmgAF+ghPwBrwFbnBXobfBB3AujJKx+/l8/mW73T61bfuCaDab75PJ5C60R+Cxg54CE+KCQ2ABoyw2yvR6vfNoNLpPqPR4PP4UNiyyRW74wHg2mzVFMIvF4mEmk2nQ3O/3e6HNEiod8xjf0Kdz/G4Eg8FRcaDT6ZzJmQuHwz75/2U9FAqN8MW8dMMf4EzXdVvelEqlJsS82+1+gd530D9zpn/bIMsR8ABsgueRSOSVHCfTNPewvqHSKf6UB86HJuI4BZbBVrVaPRaba7Xaa6ytc9BV+kPyXK5rmtwCK7lcripn0LKsZ1hf4g+q9EW+1J8xCO6RW4jHV3GgXC4fYC0D7gDTQZ9kTzW5sLO0QWxutVo9rO1w0c6DNQd9iqtFE4VtUXGSC+JAIpGoY52SsQ2exGKxXQd9laoLeDR+lyuVSqVx1Usg0ul0vVQqHan0QqHwAjbi1DSE333DMDyqluR2u/uBQMD1t+2LXJ7mpNzm1iSP7+CU54ZCp25DCXrnkoyOcb/zXjpg8yGNjV2l00v5KNrX/z1+CTAAejWU4TBFD08AAAAASUVORK5CYII='));
-  // The number 23.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAArdJREFUeNrUlF1oklEYx9W5r9rERYXYmpX2gfTFGojRMLwoCroKZhBCQYayu4ZejMCQhngTiNVdiAwqpBtX9EEybwxGw1gNlvbFyGwXlpjKalra/4nnxJvMrrrphd/7nnP+5zzvOc/Hkcn+8SOXtDuAmqH2d1AGRbACOlnrBe2gDr6yXuL5vw2SgQGwH2wHPWzkA3gF8mAD2AH6QRcbKIDXYAHkQJWMKcFWYPf7/dPFYnGlVqs1iFgsltHpdAFoo/SlvtCIdDpd8Hg896CfApvEBvvA8UAg8Fg6WboI+o1wOLywmk6YzeZrmGOmnSvwUoEtVqt1t3Dm4ODgdDAYfEltvV7fZ7PZdhqNxvVCJy0SibwVfbvdfgCfjaBbyf7r1Wg0vWLC/Pz8sjRyBoOhRy6XN0S/UCjUpHqj0aCjtgEFGfxBAZAuoGdkZEQn2qlU6v3ExMRDDpaGIh6NRvcKfW5ubhGfz+Ab9ekoR8AYuAJujo+PPxf+yWazFYxdBCfAeZ/P90Tqv3g8nsW4FwwJH34Bz8AjMEt/crlcevF3+Iq0j6CyWiJbLJZ+BPQQb6xTjNP56YhnQqHQbFOEL9POwAVwFdwBd2dmZvLS9MLYWaBVsME15HuTyXTQ6XQOib8gxx5wcqvgxzEsHgUn4ZKBZDKZF/O0Wi1lSjdVkIITmxy9C4l9VEyanJxMT01NvUOTItpVr9cVreq3XC5XObh1MrYWbMNujg0PD1P5yZaWlpaxizdcZqS3l0qlP1JFrVZ3iHYulyty3VO5/iqZc4lEYrFVJUC/5fV6n7bSHQ7Hbcw5zGkl20xOz2Qyn/5i8Dq41FzrlFJut/s+tNN8ubRRhq8D+8AeDr2yyUV0RdHxs+xrcRvVOeVIe8HBq8rZgIrvOopUs/NrvLDCurgvZVwZRdZrsv/i+SnAALSEnerTo5c3AAAAAElFTkSuQmCC'));
-  // The number 24.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAApBJREFUeNqslE9oknEYx/X1D6Vmf122TSFXxryUwQrr0GFsktQQBgl2S+gUIYg0BPFiFw8SHUKiBV12CzEk6CINOiUviyQwNoKUShjZFkrLd86+jzy/YTI97Qcf3vf3e573eZ+/P0m1z0vb864BBnAEmHi/BTbAJtgGB8BRYAY60AZN1qHntjBIwhHgBGfBKf4ZGVoDH8FPMAouAgc4CFqgxvJPrN9dJ8BNj8fzpFAofFUUpUNUq9VGNBp9DdltcBkEl5aWZCEnZFn+hvM7YLw31EnwgAz0KgsWFhZeQX4PPOzXKRaL5OF9cJqMSZyXk6FQaMpqtRrpMJvNVmw225tGo6HQfn5+fgqPc16v97zQGbQkzp/Z4XBYxGGlUmnWajXFZDKRTAUjh6gYgUDgDO2Rlh/DDHYrpdfrt3rOO7FYzC425XKZqqifmZkZJ69LpdLGsLb5A74g+c/BewqfPEaubgil5eXl9enpaQuFS+mo1+vKMA+pv6hS78BbUE0kEg6RK4TeTCaTq8FgcIzDXR9gh5yTJD5ocXO27Hb7sXA4fEFoplKpD/TT2dnZUQo3k8nslb/DwMK9uRv6BLiby+U+i5agnsTZY7fb/XKvdhLk83lq6ls0HMJDGqXJubm5az6fj6ZFRd5EIpEij19nWKu0220tj6tO4vhpUpwI77pQWlxcXFtZWSFD1p2dHcMwgxqNhurQAN1iUWNf9fv9LwaFlE6nS9B5Bh6Bp/F4XO6blAS4Aoxa9lDtcrnMgzwwGAy/uQsop2NGo3Fit7yS1OYu+U4tqOaC0GBfovHqrRQv6tNVIPNHI6zr5Hvgv9tGzR/pwXEuv67PoMLX0i/wl+VCV+q/D/f7wlZJ+23wnwADAHUlUxtyWY3RAAAAAElFTkSuQmCC'));
-  // The number 25.
-  $zen-grid-number-images       : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAsVJREFUeNrMlF9IU3EUx3fvbrNcW8ucjP6NXMlKZkGBIfOhF6MRBiFbMCoIGdqDL409CK4HH8Zg9KIkPgSC5YsgzYIwMCGkGLJIJrJBE8tqPlRbJZpbbX2PnB9choseeujC597f75xzz+/3O+f8jkbzjx9JNdYBE0Pjn+A7yIES2MPsKPNRAF/BZ5CXVM4Og1PgGNgNNsF78AZsABvrdpU5JF0SxMAHEijgCLgaCoWe5XK5zUKhUCKi0WjKarVGoPMPDw/PCnk5Pp9vDDYttJiMlwEcD4fD1/x+/zm9Xq8TS7tcroapqakbGJ4wm82Wv42jFdycm5vLiBUdDsd0JBJZFHOPxzM7Pj6+LOZut/sl/nkEHoJ7oBPUA63M8TNYLBaDWCGRSKyrV7TZbIZSqSRts5lfYJ3jmAdFmYWbkiSV1JbYhVWMY7FYVq1va2szY6cXwWWcrMPpdJ6G+ADYSfpasgG3wB0w1tvbOy+Ot7KysgbZ/YmJiXSlpIyOjs7D5gqoU7iGXoGPwEHZ6u7utondjIyMvCadoih5IRscHEwUi0W5p6enkeZ2u70OHzOoVrgws0APqgYGBs4injTWpNPpbF9f33PSt7e3P8V3kUO0EQwGG8UCHP9qKnqFZTQ52tzc3NLV1XVGGAYCgSf4vKNCj8fjHU1NTftJ3t/fH6cdliVIC2SZC5tqzI7CPi+0iEtycnJyibNXpXZgNBqrMdduk/EtIzpePXZzobW1la6fJpPJrCMxdOUOUlFT4hYWFrLiT5PJpFN7Wl1dpTu/xuHbSnfnzMzMcqUsQv/A6/VOV9LTtYTNJbCPHB4CvlQq9ekPDu+C2zjF42Qy+UXI6d4PDQ29gO46aKBLQtVfA05yydRyTMu7CR3/LdjLHaeGk0DHTIN5Tt4PiR0YuQ9Sa5Ir9LtvlByVncQJy7E+z33zP39+CzAA8EmJ9NTdgeQAAAAASUVORK5CYII='));
-}
+@import "zen-grids/functions";
+@import "zen-grids/internal/variables-background"; // Add the default set of background images.
+@import "compass/css3/images"; // Unlike the rest of Zen Grids, this module requires Compass.
 
 
 //
 // Add a background grid image to an element's background.
-// @see http://zengrids.com/help/#zen-grid-background
+// @see http://next.zengrids.com/reference/background/#zen-grid-background
 //
 @mixin zen-grid-background(
   $columns              : $zen-columns,
@@ -87,113 +23,117 @@ $zen-grid-number-images   : ()                  !default;
   $switch-direction     : $zen-switch-direction
 ) {
 
-  $bg-images            : ();
-  $gradient             : ();
-  $left-half-gradient   : ();
-  $right-half-gradient  : ();
+  // Check if the global variable is turning off background images.
+  @if $display-zen-grid-background {
 
-  // Calculate half of the unit width.
-  $unit-width           : zen-unit-width($columns, $gutters, $gutter-method, $grid-width);
-  $half-unit-width      : $unit-width / 2;
+    $bg-images            : ();
+    $gradient             : ();
+    $left-half-gradient   : ();
+    $right-half-gradient  : ();
 
-  // Determine the float direction.
-  $dir                  : $direction;
-  @if $switch-direction {
-    $dir                : zen-direction-switch($dir);
-  }
+    // Calculate half of the unit width.
+    $unit-width           : zen-unit-width($columns, $gutters, $gutter-method, $grid-width);
+    $half-unit-width      : $unit-width / 2;
 
-  @for $count from 1 through $columns {
-    // First add the grid numbers to the background images list.
-    $position: (2 * $count - 1) * $half-unit-width;
-    @if $gutter-method == margin {
-      $position: $position + ($count - 1) * $gutters;
+    // Determine the float direction.
+    $dir                  : $direction;
+    @if $switch-direction {
+      $dir                : zen-direction-switch($dir);
     }
-    $reverse-count: $columns + 1 - $count;
 
-    @if $dir == left {
-      @if $grid-numbers == both or $grid-numbers == top {
-        $bg-images  : append($bg-images, nth($zen-grid-number-images, $count) $position top no-repeat, comma);
+    @for $count from 1 through $columns {
+      // First add the grid numbers to the background images list.
+      $position: (2 * $count - 1) * $half-unit-width;
+      @if $gutter-method == margin {
+        $position: $position + ($count - 1) * $gutters;
       }
-      @if $grid-numbers == both or $grid-numbers == bottom {
-        $bg-images  : append($bg-images, nth($zen-grid-number-images, $reverse-count) $position bottom no-repeat, comma);
-      }
-    }
-    @else {
-      @if $grid-numbers == both or $grid-numbers == bottom {
-        $bg-images  : append($bg-images, nth($zen-grid-number-images, $count) $position bottom no-repeat, comma);
+      $reverse-count: $columns + 1 - $count;
+
+      @if $dir == left {
+        @if $grid-numbers == both or $grid-numbers == top {
+          $bg-images  : append($bg-images, nth($zen-grid-number-images, $count) $position top no-repeat, comma);
+        }
+        @if $grid-numbers == both or $grid-numbers == bottom {
+          $bg-images  : append($bg-images, nth($zen-grid-number-images, $reverse-count) $position bottom no-repeat, comma);
+        }
       }
-      @if $grid-numbers == both or $grid-numbers == top {
-        $bg-images  : append($bg-images, nth($zen-grid-number-images, $reverse-count) $position top no-repeat, comma);
+      @else {
+        @if $grid-numbers == both or $grid-numbers == bottom {
+          $bg-images  : append($bg-images, nth($zen-grid-number-images, $count) $position bottom no-repeat, comma);
+        }
+        @if $grid-numbers == both or $grid-numbers == top {
+          $bg-images  : append($bg-images, nth($zen-grid-number-images, $reverse-count) $position top no-repeat, comma);
+        }
       }
-    }
 
-    // Next, build the color stops for the column gradients.
-    @if $gutter-method == margin {
-      // If the gutter method is "margin", calculating the color stops is easy.
-      @if $count < $columns {
-        $stop: $count * $unit-width + ($count - 1) * $gutters;
-        $gradient: append($gradient, $grid-color $stop, comma);
+      // Next, build the color stops for the column gradients.
+      @if $gutter-method == margin {
+        // If the gutter method is "margin", calculating the color stops is easy.
+        @if $count < $columns {
+          $stop: $count * $unit-width + ($count - 1) * $gutters;
+          $gradient: append($gradient, $grid-color $stop, comma);
+          $gradient: append($gradient, transparent $stop, comma);
+
+          $stop: $stop + $gutters;
+          $gradient: append($gradient, transparent $stop, comma);
+          $gradient: append($gradient, $grid-color $stop, comma);
+        }
+      }
+      @else if comparable($gutters, $grid-width) {
+        // If the gutter and grid width have the same units, calculating the color
+        // stops is easy.
+        $stop: ($count - 1) * $unit-width + zen-half-gutter($gutters);
         $gradient: append($gradient, transparent $stop, comma);
+        $gradient: append($gradient, $grid-color $stop, comma);
 
-        $stop: $stop + $gutters;
-        $gradient: append($gradient, transparent $stop, comma);
+        $stop: $count * $unit-width - zen-half-gutter($gutters);
         $gradient: append($gradient, $grid-color $stop, comma);
+        $gradient: append($gradient, transparent $stop, comma);
       }
-    }
-    @else if comparable($gutters, $grid-width) {
-      // If the gutter and grid width have the same units, calculating the color
-      // stops is easy.
-      $stop: ($count - 1) * $unit-width + zen-half-gutter($gutters);
-      $gradient: append($gradient, transparent $stop, comma);
-      $gradient: append($gradient, $grid-color $stop, comma);
-
-      $stop: $count * $unit-width - zen-half-gutter($gutters);
-      $gradient: append($gradient, $grid-color $stop, comma);
-      $gradient: append($gradient, transparent $stop, comma);
-    }
-    @else {
-      // If the gutter and grid width have different units, things are tricky.
-      // The CSS3 Gradient syntax doesn't allow for calc() to be used in color
-      // stops, so we can't express the columns as 20% + 10px. Instead we are
-      // going to divide all our columns in half and into 2 groups: one group
-      // for the left halves of the columns and one group for the right halves.
-      // Then we'll use background position to shift the left halves over to the
-      // right by a half gutter width and shift the right halves over to the
-      // left by a half gutter width and just let the two sets of gradients
-      // overlap in the middle. Easy.
-
-      // Build the color stops for the left halves of the column gradients.
-      @if $count > 1 {
-        $stop: (2 * $count - 2) * $half-unit-width;
-        $left-half-gradient: append($left-half-gradient, transparent $stop, comma);
+      @else {
+        // If the gutter and grid width have different units, things are tricky.
+        // The CSS3 Gradient syntax doesn't allow for calc() to be used in color
+        // stops, so we can't express the columns as 20% + 10px. Instead we are
+        // going to divide all our columns in half and into 2 groups: one group
+        // for the left halves of the columns and one group for the right halves.
+        // Then we'll use background position to shift the left halves over to the
+        // right by a half gutter width and shift the right halves over to the
+        // left by a half gutter width and just let the two sets of gradients
+        // overlap in the middle. Easy.
+
+        // Build the color stops for the left halves of the column gradients.
+        @if $count > 1 {
+          $stop: (2 * $count - 2) * $half-unit-width;
+          $left-half-gradient: append($left-half-gradient, transparent $stop, comma);
+          $left-half-gradient: append($left-half-gradient, $grid-color $stop, comma);
+        }
+
+        $stop: (2 * $count - 1) * $half-unit-width;
         $left-half-gradient: append($left-half-gradient, $grid-color $stop, comma);
-      }
-
-      $stop: (2 * $count - 1) * $half-unit-width;
-      $left-half-gradient: append($left-half-gradient, $grid-color $stop, comma);
-      $left-half-gradient: append($left-half-gradient, transparent $stop, comma);
-
-      // Build the color stops for the right halves of the column gradients.
-      $right-half-gradient: append($right-half-gradient, transparent $stop, comma);
-      $right-half-gradient: append($right-half-gradient, $grid-color $stop, comma);
+        $left-half-gradient: append($left-half-gradient, transparent $stop, comma);
 
-      @if $count < $columns {
-        $stop: (2 * $count) * $half-unit-width;
-        $right-half-gradient: append($right-half-gradient, $grid-color $stop, comma);
+        // Build the color stops for the right halves of the column gradients.
         $right-half-gradient: append($right-half-gradient, transparent $stop, comma);
+        $right-half-gradient: append($right-half-gradient, $grid-color $stop, comma);
+
+        @if $count < $columns {
+          $stop: (2 * $count) * $half-unit-width;
+          $right-half-gradient: append($right-half-gradient, $grid-color $stop, comma);
+          $right-half-gradient: append($right-half-gradient, transparent $stop, comma);
+        }
       }
     }
-  }
 
-  // Last, add the gradient (or gradient halves) to the background images list.
-  @if $gutter-method == margin or comparable($gutters, $grid-width) {
-    $bg-images  : append($bg-images, linear-gradient(left, $gradient) left top no-repeat, comma);
-  }
-  @else {
-    $bg-images  : append($bg-images, linear-gradient(left, $left-half-gradient) zen-half-gutter($gutters) top no-repeat, comma);
-    $bg-images  : append($bg-images, linear-gradient(left, $right-half-gradient) (-(zen-half-gutter($gutters))) top no-repeat, comma);
-  }
+    // Last, add the gradient (or gradient halves) to the background images list.
+    @if $gutter-method == margin or comparable($gutters, $grid-width) {
+      $bg-images  : append($bg-images, linear-gradient(left, $gradient) left top no-repeat, comma);
+    }
+    @else {
+      $bg-images  : append($bg-images, linear-gradient(left, $left-half-gradient) zen-half-gutter($gutters) top no-repeat, comma);
+      $bg-images  : append($bg-images, linear-gradient(left, $right-half-gradient) (-(zen-half-gutter($gutters))) top no-repeat, comma);
+    }
 
-  // Apply the full list of background images.
-  @include background($bg-images);
+    // Apply the full list of background images.
+    @include background($bg-images);
+  }
 }