gistfile1.txt

##96-well plate
%table#ninetysixwell.plate
  %tr
    %th
    - (1..12).each do |num|
      %th= num

  - ('A'..'H').each do |letter|
    %tr
      %th
        = letter
      - (1..12).each do |num|
        %td
          %a.tapToModal(href="#")
            = letter
            = num

##24-well plate
%table#twentyfourwell.plate
  %tr
    %th
    - (1..6).each do |num|
      %th= num

  - ('A'..'D').each do |letter|
    %tr
      %th
        = letter
      - (1..6).each do |num|
        %td
          %a.tapToModal(href="#")
            = letter
            = num

## SASS/Compass
@import "compass/css3/border-radius"
@import "compass/css3/box-shadow"

.plate
  color: #999
  text-align: center
  margin: 2% auto
  td
    padding: 4px 6px
  th
    font-weight: normal
  a
    text-decoration: none
    color: #333
    display: block
    width: 64px
    height: 44px
    padding-top: 20px
    font-size: 1.2em
    font-weight: bold
    background-color: #eee
    @include border-radius(32px)
    @include box-shadow(#ddd 0 0 48px inset)
    &.altstate-blue
      background-color: #acf
      @include box-shadow(darken(#acf,20%) 0 0 48px inset)
    &.altstate-red
      background-color: #f99
      @include box-shadow(darken(#f99,15%) 0 0 48px inset)
    &:active
      background-color: #222
      color: #fff
      @include box-shadow(#000 0 0 48px inset)
    @media all and (-webkit-min-device-pixel-ratio: 2)
      width: 140px
      height: 90px
      padding-top: 50px
      font-size: 2em
      @include border-radius(70px)


#twentyfourwell
  a
    width: 140px
    height: 88px
    padding-top: 52px
    font-size: 2em
    @include border-radius(70px)
    @media all and (-webkit-min-device-pixel-ratio: 2)
      width: 280px
      height: 180px
      padding-top: 100px
      font-size: 2em
      @include border-radius(140px)