h1,h2,h3,h4,h5
  color: $h1_color
  padding-bottom: 5px
  margin-bottom: 5px
  margin-top: 7px
  span
    font-weight: normal

h3, label.h3
  font-family: $default_font
  font-size: 18px
  font-style: normal
  font-weight: bold
  text-transform: normal

h4
  font-size: 15px

a
  cursor: pointer
  &:link, &:visited
    color: $link_color
    text-decoration: none
  &:hover, &:active
    color: $link_color
    text-decoration: underline
  img
    border: none
  &.highlight
    background: desaturate($link_color - #444, 50%)

ul.plain
  +plain_list

dl
  margin-left: 0
  dt
    float: left
    clear: left
    width: 13%
    font-weight: bold
  dd
    margin-left: 16%

.column_50
  dl
    dt
      width: 30%
    dd
      margin-left: 33%

pre.code
  width: auto
  padding: 5px 10px
  overflow: scroll
  border: 1px solid $border_color

.clear
  clear: both

.box
  background: $content_bg
  +rounded_corners(10px,10px,10px,10px)
  padding: 5px 15px
  +shadow
  margin-bottom: 1em
  .columns
    // only works in a full-size box...
    +columns(930px)

.box70
  background: $content_bg
  +rounded_corners(10px,10px,10px,10px)
  padding: 5px 15px
  +shadow
  margin-bottom: 1em
  width: 80%

.translation_missing
  background: yellow
  color: black

// { ERROR => 'error', ACTIVE => 'active', TODO => 'todo', TRANSITION => 'transition', BLOCKED => 'blocked', PROPOSED => 'proposed'  }
.led
  display: block
  width: 16px
  height: 16px
  &.error
    background: image-url('icons/led/error.png')
  &.active
    background: image-url('icons/led/active.png')
  &.todo
    background: image-url('icons/led/todo.png')
  // blinking classes
  &.blink
    +opacity(0.5)
  &.transition
    background: image-url('icons/led/transition-spin.png')
  &.blocked
    background: image-url('icons/led/blocked.png')
  &.proposed
    background: image-url('icons/led/proposed.png')
  &.reserved
    background: image-url('icons/led/reserved.png')
  &.idle
    background: image-url('icons/led/idle.png')
  &.committed
    background: image-url('icons/led/transition.png')
  &.off
    background: image-url('icons/led/off.png')
  &.wait
    background: image-url('icons/led/wait.png')
    
h1,h2,h3
  &.led
    padding-left: 24px
    background-repeat: no-repeat !important
    background-position: left center !important
    display: inline

ul.buttons
  +plain_list
  +clearfix
  a.button
    float: right
    margin-right: 10px

// Drag and Drop Styles
li.allocated
  &:hover, &:active
    background: $button_bg
    color: $button_fg

a.draggable_a
  text-decoration: none
  color: $text_color
  &:hover, &:active
    background: $button_bg
    color: $button_fg


a.button
  +button

input.button
  +button
  height: 24px

// From the Haml scaffold CSS:
#notice
  color: green

.field_with_errors
  padding: 2px
  background-color: red

#error_explanation
  width: 450px
  border: 2px solid red
  padding: 7px
  padding-bottom: 0
  margin-bottom: 20px
  background-color: #f0f0f0
  h2
    text-align: left
    font-weight: bold
    padding: 5px 5px 5px 15px
    font-size: 12px
    margin: -7px
    margin-bottom: 0px
    background-color: #c00
    color: #fff
  ul li
    font-size: 12px
    list-style: square

form.box
  input:not(.button), textarea
    background: #666
    color: #fff
    border: 1px solid #888
    height: 16px
    &.default
      color: #ccc

.toggle
  background: image-url('icons/toggle-off.png') no-repeat
  display: block
  width: 16px
  height: 16px
  &.on
    background-image: image-url('icons/toggle-on.png')
  &.with_label
    width: auto
    padding-left: 20px

.nowrap
  white-space: nowrap
