/* The Grid ---------------------- */

  .row { width: $rowWidth; max-width: 100%; min-width: $screenSmall; margin: 0 auto;
    .row { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2)); }

    &.collapse {
      .column, .columns { padding: 0; }
    }
    .row { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2));
      &.collapse { margin: 0; }
    }
  }

  .column, .columns { float: $defaultFloat; min-height: 1px; padding: 0 ($columnGutter/2); position: relative;
    &.centered { float: none; margin: 0 auto; }
  }

  [class*="column"] + [class*="column"]:last-child { float: $defaultOpposite; }
  [class*="column"] + [class*="column"].end { float: $defaultFloat; }

  // Creating column classes
  @for $i from 1 through $totalColumns {
    .#{convert-number-to-word($i)} { width: gridCalc($i, $totalColumns); }
  }

  // Creating .row-# classes
  @for $i from 1 through $totalColumns {
    .row {
      .#{convert-number-to-word($i)} { @extend .#{convert-number-to-word($i)}; }
    }
  }

  // Creating .row .offset-by-# classes
  @for $i from 1 through $totalColumns - 2 {
    .row {
      .offset-by-#{convert-number-to-word($i)} { margin-#{$defaultFloat}: gridCalc($i, $totalColumns); }
    }
  }

  // Creating .row .push-# classes
  @for $i from 2 through $totalColumns - 2 {
    .push-#{convert-number-to-word($i)} { #{$defaultFloat}: gridCalc($i, $totalColumns); }
    .pull-#{convert-number-to-word($i)} { #{$defaultOpposite}: gridCalc($i, $totalColumns); }
  }

  img, object, embed { max-width: 100%; height: auto; }
  object, embed { height: 100%; }
  img { -ms-interpolation-mode: bicubic; }
  #map_canvas img, .map_canvas img {max-width: none!important;}

  /* Nicolas Gallagher's micro clearfix */
  .row { @include clearfix(); }

/* Block Grids ---------------------- */

/* These are 2-up, 3-up, 4-up and 5-up ULs, suited
for repeating blocks of content. Add 'mobile' to
them to switch them just like the layout grid
(one item per line) on phones

For IE7/8 compatibility block-grid items need to be
the same height. You can optionally uncomment the
lines below to support arbitrary height, but know
that IE7/8 do not support :nth-child.
-------------------------------------------------- */

  .block-grid { display: block; overflow: hidden; padding: 0;

    &>li { display: block; height: auto; float: $defaultFloat; }

    @for $i from 1 through $blockGridElements {
      &.#{convert-number-to-word($i)}-up {
        @if $i == 1 { margin: 0; }
        @if $i == 2 { margin: 0 -15px; }
        @if $i == 3 { margin: 0 -12px; }
        @if $i == 4 { margin: 0 -10px; }
        @else { margin: 0 -8px; }
        &>li {
          width: 100%/$i;
          @if $i == 1 { padding: 0 0 15px; }
          @if $i == 2 { padding: 0 15px 15px; }
          @if $i == 3 { padding: 0 12px 12px; }
          @if $i == 4 { padding: 0 10px 10px; }
          @else { padding: 0 8px 8px; }
          @if $i > 1 { &:nth-child(#{$i}n+1) { clear: both; } }
        }
      }
    }
  }