@import "compass/layout/grid-background"

=demo-style
  $grid-background-column-color: rgba(red,.05)
  $grid-background-gutter-color: rgba(red,0)
  $grid-background-total-columns: 12
  $grid-background-column-width: 60px
  $grid-background-gutter-width: 20px
  $grid-background-offset: 10px
  #grid
    +column-grid-background()
    display: none
    position: fixed
    top: 0
    left: 50%
    height: 100%
    margin: 0 auto
    margin-left: -480px
    width: 960px

  .toggle-grid
    +transition-property(color)
    +transition-duration(.5s)
    position: fixed
    top: 10px
    right: 10px
    color: #fff
    cursor: pointer
    display: block
    background: image-url("toggle-grid.png") no-repeat right 50%
    font-size: 12px
    line-height: 16px
    padding-right: 22px
    text-decoration: none
    &:hover
      color: #999
    .hide
      display: none

  body
    @extend .font-helvetica
    background: #fff
  
  .grid-test
    .grid-container
      margin-bottom: 20px
      &:first-of-type
        margin-top: 20px
      & > div
        +transition-property(background)
        +transition-duration(.75s)
        background: #e7e7e7
        color: #999
        font-size: 13px
        line-height: 50px
        text-align: center
        &:hover
          background: #ddd