CheckBox < UICheckBox
  size: 16 16
  text-align: left
  text: aa
  text-offset: 16 0
  color: #aaaaaa
  image-color: #ffffffff
  image-rect: 0 0 12 12
  image-offset: 0 2
  image-source: /images/ui/checkbox

  $hover !disabled:
    color: #cccccc

  $!checked:
    image-clip: 0 0 12 12

  $hover !checked:
    image-clip: 0 12 12 12

  $checked:
    image-clip: 0 24 12 12

  $hover checked:
    image-clip: 0 36 12 12

  $disabled:
    image-color: #ffffff88
    color: #aaaaaa88

ColorBox < UICheckBox
  size: 16 16
  image-color: #ffffffff
  image-source: /images/ui/colorbox

  $checked:
    image-clip: 16 0 16 16

  $!checked:
    image-clip: 0 0 16 16

ButtonBox < UICheckBox
  font: verdana-11px-antialised
  color: #ffffffff
  size: 106 22
  text-offset: 0 0
  text-align: center
  image-source: /images/ui/tabbutton_rounded
  image-color: white
  image-clip: 0 0 20 20
  image-border: 3

  $hover !disabled:
    image-clip: 0 20 20 20

  $checked:
    image-clip: 0 40 20 20
    color: #80c7f8

  $disabled:
    color: #666666ff
    image-color: #ffffff88

ButtonBoxRounded < ButtonBox
  image-source: /images/ui/tabbutton_rounded
  image-border: 2