/* Responsive Grid */

table
  &.body
    height: 100%
    width: 100%
  &.container
    width: 580px
    margin: 0 auto
    text-align: inherit
  &.row
    padding: 0px
    width: 100%
    position: relative
  &.container table.row
    display: block

td.wrapper
  padding: 10px 20px 0px 0px
  position: relative

table
  &.columns, &.column
    margin: 0 auto
  &.columns td, &.column td
    padding: 0px 0px 10px
  &.columns td.sub-columns, &.column td.sub-columns, &.columns td.sub-column, &.column td.sub-column
    padding-right: 10px

td
  &.sub-column, &.sub-columns
    min-width: 0px

table
  &.row td.last, &.container td.last
    padding-right: 0px
  &.one
    width: 30px
  &.two
    width: 80px
  &.three
    width: 130px
  &.four
    width: 180px
  &.five
    width: 230px
  &.six
    width: 280px
  &.seven
    width: 330px
  &.eight
    width: 380px
  &.nine
    width: 430px
  &.ten
    width: 480px
  &.eleven
    width: 530px
  &.twelve
    width: 580px
  &.one center
    min-width: 30px
  &.two center
    min-width: 80px
  &.three center
    min-width: 130px
  &.four center
    min-width: 180px
  &.five center
    min-width: 230px
  &.six center
    min-width: 280px
  &.seven center
    min-width: 330px
  &.eight center
    min-width: 380px
  &.nine center
    min-width: 430px
  &.ten center
    min-width: 480px
  &.eleven center
    min-width: 530px
  &.twelve center
    min-width: 580px
  &.one .panel center
    min-width: 10px
  &.two .panel center
    min-width: 60px
  &.three .panel center
    min-width: 110px
  &.four .panel center
    min-width: 160px
  &.five .panel center
    min-width: 210px
  &.six .panel center
    min-width: 260px
  &.seven .panel center
    min-width: 310px
  &.eight .panel center
    min-width: 360px
  &.nine .panel center
    min-width: 410px
  &.ten .panel center
    min-width: 460px
  &.eleven .panel center
    min-width: 510px
  &.twelve .panel center
    min-width: 560px

.body
  .columns td.one, .column td.one
    width: 8.333333%
  .columns td.two, .column td.two
    width: 16.666666%
  .columns td.three, .column td.three
    width: 25%
  .columns td.four, .column td.four
    width: 33.333333%
  .columns td.five, .column td.five
    width: 41.666666%
  .columns td.six, .column td.six
    width: 50%
  .columns td.seven, .column td.seven
    width: 58.333333%
  .columns td.eight, .column td.eight
    width: 66.666666%
  .columns td.nine, .column td.nine
    width: 75%
  .columns td.ten, .column td.ten
    width: 83.333333%
  .columns td.eleven, .column td.eleven
    width: 91.666666%
  .columns td.twelve, .column td.twelve
    width: 100%

td
  &.offset-by-one
    padding-left: 50px
  &.offset-by-two
    padding-left: 100px
  &.offset-by-three
    padding-left: 150px
  &.offset-by-four
    padding-left: 200px
  &.offset-by-five
    padding-left: 250px
  &.offset-by-six
    padding-left: 300px
  &.offset-by-seven
    padding-left: 350px
  &.offset-by-eight
    padding-left: 400px
  &.offset-by-nine
    padding-left: 450px
  &.offset-by-ten
    padding-left: 500px
  &.offset-by-eleven
    padding-left: 550px
  &.expander
    visibility: hidden
    width: 0px
    padding: 0 !important

table
  &.columns .text-pad, &.column .text-pad
    padding-left: 10px
    padding-right: 10px
  &.columns
    .left-text-pad, .text-pad-left
      padding-left: 10px
  &.column
    .left-text-pad, .text-pad-left
      padding-left: 10px
  &.columns
    .right-text-pad, .text-pad-right
      padding-right: 10px
  &.column
    .right-text-pad, .text-pad-right
      padding-right: 10px

/* Block Grid */

.block-grid
  width: 100%
  max-width: 580px
  td
    display: inline-block
    padding: 10px

.two-up td
  width: 270px

.three-up td
  width: 173px

.four-up td
  width: 125px

.five-up td
  width: 96px

.six-up td
  width: 76px

.seven-up td
  width: 62px

.eight-up td
  width: 52px