ui.sass

.button, .button_set
  :font
    :family "Lucida Grande", sans-serif
    :style normal

  :display inline

  :padding 4px

  :font-size 12px
  :line-height 100%

  :text-shadow 0 1px 0 #fff

  :min-height 10px

  :background -webkit-gradient(linear, 0% 29%, 0% 85%, from(#FCFCFC), to(#F6F6F6))
  :background -moz-linear-gradient(top, #FCFCFC, #F6F6F6)

  :border 1px solid #EEE
    :bottom 1px solid #999
    :left 1px solid #ccc
    :right 1px solid #ccc

  :border-radius 3px
  :-moz-border-radius 3px
  :-webkit-border-radius 3px

  :cursor pointer

  :box-shadow 0 1px 1px #eee
  :-webkit-box-shadow 0 1px 1px #eee
  :-moz-box-shadow 0 1px 1px #eee

  :font-weight normal

  :color #666

  &:hover
    :color #666
    :background -webkit-gradient(linear, 0% 29%, 0% 85%, from(#FAFAFA), to(#F0F0F0))
    :background -moz-linear-gradient(top, #FAFAFA, #F0F0F0)

  &:active
    :color #666
    :background -webkit-gradient(linear, 0% 29%, 0% 85%, from(#F0F0F0), to(#FAFAFA))
    :background -moz-linear-gradient(top, #F0F0F0, #FAFAFA)
    :border
      :top 1px solid #ccc


ul.button_set

  :padding
    :left 0
    :right 0

  > li
    :padding 5px
    :display inline
    :height 100%
    :border
      :left 1px solid #ccc
      :right 1px solid #fff

    :margin
      :left -3px
      :right -3px

    &:first-child
      :margin
        :left 0
      :border
        :left none

    &:last-child
      :margin
        :right 0
      :border
        :right none

.button .selected, .button_set .selected
  :background -webkit-gradient(linear, 0% 29%, 0% 85%, from(#F0F0F0), to(#FAFAFA))
  :background -moz-linear-gradient(top, #F0F0F0, #fafafa)

  :border
    :top 1px solid #aaa

.right
  :position absolute
  :right 0

.contextual_pane
  :z-index 20

  :position absolute

  :display none

  :background
    :color #fff

  :border 4px solid #000

  :border-radius 3px
  :-moz-border-radius 3px
  :-webkit-border-radius 3px

  :box-shadow 0 0 5px #000
  :-webkit-box-shadow 0 0 10px #000

  :padding 2em