$medium_gray: #cccccc
$light_gray: #eeeeee
$border_color: $medium_gray

$content_background_color: $light_gray  
$header_color: #0d4c4c
$navigation_color: #3e707f
$standout_color: #429693
$text_color: #1b1d1e
$highlight_color: #fbffa4
$warning_background_color: red
$warning_color: white
$active_tab_color: $content_background_color
$link_color: #424e4f
$link_hover_color: $text_color

@import "mixins"

body
  font-family: Verdana, Arial, Helvetica, sans-serif 
  font-size: 13px  
  color: $text_color
  background-color: $content_background_color
  min-width: 100px
  
#header
  background-color: $header_color
  padding-top: 15px  
  h1
    margin-left: 30px  
    font-size: 1.2em
    color: white
    
#navigation
  @include clearfix
  margin-top: 15px
  padding-left: 10px
  background-color: $navigation_color  
  a
    display: block
    float: left
    padding: 5px 10px
    color: $text_color
    text-decoration: none    
    &:hover
      @include highlighted-tab

#content-wrapper
  padding: 0.5em
  #content
    @include rounded-corners
    padding: 0.5em
    background-color: white    
    border: 1px solid $border_color    
    min-height: 600px
    a
      color: $link_color
      padding: 2px      
      &:hover
        @include rounded-corners(3px)
        text-decoration: none
        background-color: $highlight_color

  #flash
    @include rounded-corners
    border: 1px solid $border_color    
    padding: 0.5em
    margin-bottom: 0.5em
    color: black
    background-color: $highlight_color
    font-weight: bold
    
#footer
  margin: 30px 0
  text-align: center
  
.data-table
  .data-row
    td.label, td.value
      border: 1px solid $border_color
    .label
      background-color: $light_gray

h1, h2
  margin-bottom: 15px
h2
  @include rounded-corners(3px)
  background-color: $standout_color
  line-height: 1.2em
  padding: 2px 5px

td, th
  padding: 3px
  margin: 1px  
  form
    display: inline
th
  border-bottom: 1px solid $text_color
  text-align: left

.actions,
.controls
  font-size: 0.9em
  form
    display: inline

.actions
  text-align: right
  margin-bottom: 15px

.controls
  margin-top: 15px

.status.paused,
.status.stopped
  background-color: $warning_background_color
  color: $warning_color

#evaluate
  margin-top: 10px
  #results
    .result
      background-color: $light_gray
      border: 1px solid $medium_gray
      margin: 3px
      padding: 3px      
      &.exception
        background-color: $warning_background_color
  #script_form
    background-color: $light_gray
    border: 1px solid $medium_gray
    margin: 3px
    padding: 3px      
    textarea 
      width: 500px
      height: 200px

#log-show
  #log
    padding: 3px
    border: 1px solid $medium_gray
    overflow: auto
    min-height: 600px
    position: relative    
    #ajax-spinner
      position: absolute
      z-index: 10      
    #log_output
      position: absolute
      top: 1px

#dashboard
  @include clearfix
  #left_column, #right_column
    width: 50%
    float: left
    .list
      @include rounded-corners
      position: relative
      margin: 5px      
      padding: 5px    
      background-color: $light_gray     
      .actions
        position: absolute
        top: 3px
        right: 3px        
      .element
        padding: 3px 0
        ul
          li
            margin-left: 15px
        
  h3
    border-bottom: 1px solid $text_color
    
@include selected-tab('root', 'dashboard')
@include selected-tab('apps')
@include selected-tab('queues')
@include selected-tab('queue', 'queues')
@include selected-tab('topics')
@include selected-tab('topic', 'topics')
@include selected-tab('message_processors')
@include selected-tab('message_processor', 'message_processors')
@include selected-tab('jobs')
@include selected-tab('job', 'jobs')
@include selected-tab('services')
@include selected-tab('service', 'services')
@include selected-tab('pools')
@include selected-tab('pool', 'pools')