@import 'screen_sizes'

@import 'compass/css3/animation'
.preload * 
  +animation-duration(0s !important)
        
.clean_list
  list-style: none
  padding-left: 0

$subtle-font: rgba(0,0,0,0.30)

body
  background: none repeat scroll 0% 0% #F7F7F7

#content
  padding: 64px 16px 0 32px
  width: 100%
  margin-bottom: 2em

#top_menu
  z-index: 100

.pointer
  cursor: pointer

.title.header 
  & > .name
    font-size: 1.3em
  & > :not(.name)
    color: $subtle-font
    
.name 
  ~ .hash
    color: $subtle-font
    margin-left: 1em
  
.main.menu
  .finder
    padding: 4px
    padding-top: 8px

@media #{$only-large}
  #content
    padding: 64px 16px 0 32px


  .entity_card, .entity_list_card
    > .content
      > .info
        float: right
        width: 35%
        display: block
      > .description, > .actions, > .card_actions
        float: left
        width: calc(65% - 16px)
        display: block

  .action_parameters, .filter_controls
    .input.field
      width: calc(50% - 32px)
      float: left
      margin-right: 32px !important
      &:not(.submit)
        clear: none !important

  .responsive_column
    width: 40%
    margin-right: 10%
    float: left

=small_screen
  table:not(.collapsing)
    caption
      width: 100%

  form.workflow_task
    .input.field.submit
      input, select
        width: 100% !important
      select
        float: left
  span.file_or_text_area
    display: block
    clear: both
  #top_menu
    position: relative !important
    > .favourite
      display: block
      width: 100%
      clear: both
    > .item
      float: left

  .dropdown.item .dropdown.item > .menu
    max-height: 300px

  #content
    padding: 64px 8px

  .entity_card, .entity_list_card
    > .content
      > .info
        width: 100%
      > .description, > .actions, > .card_actions
        width: 100%

.main.menu
  .finder 
    padding: 4px
    padding-top: 8px
    form input
      width: 5em

.row
  clear: both

@media #{$not-large}
  +small_screen

.action_parameters, .filter_controls
  form
    &:after
      content: ''
      clear: both
      display: block

  .action_content
    clear: both
  
  
.entity_card, .entity_list_card, .action_card
  > .content > .ui.basic.segment, > .action_content > .ui.basic.segment
    padding: 0px

.fragment.loading
  &:after
    content: " loading page fragment... "
    display: inline-block
    margin: 0em 1em

table, table.responsive
  //tfoot
    display: none !important

.action_loader
  min-height: 48px
  border-top: none !important

.action_content
  > .action_card > .action_parameters, > .action_card > .title, > .action_card > .action_description
    display: none

body
  margin: 0 !important

.rbbt_reveal_content
  display: none

.button.wrap 
  padding: 0px !important
  > a
    display: inline-block
    padding: .5892825em 1.125em

#modal
  top: 5em
  left: 50%
  max-height: calc(100% - 10em)
  overflow: auto

.table_column_selector
  span.field
    font-size: 1.2em
    width: 10em
    display: inline-block

.figure.float
  float: left
  margin-right: 32px
  background: white
  border: 1px solid rgba(0,0,0,0.12)
  padding: 4px
  .title
    color: $subtle-font

.tool_menu
  margin-bottom: 0px
  > dd
    overflow: auto !important

.entity_list
  width: auto !important
  clear: both
  span.title
    border: none !important

table
  .caption, .title
    color: $subtle-font

.info > .meta dt
  font-weight: bold

dd > ul
  margin-top: 0px

.segment[class*='very basic']
  padding: 0px !important

.icon.star.favourite
  color: gold !important

.workflow_task
  .field.submit
    .jobname
      float: left
      width: 13em !important
    .format
      float: left
      width: 7em !important
form
  .field
    max-width: 500px

.job_control > ul
  @extend .clean_list
  > li
    display: inline-block

.selection.dropdown > .menu > .item:not([data-value])
  font-style: italic
  color: grey

option[disabled]
  opacity: 1 !important
  font-weight: bold
  &:before
    content: "\00A7  "
    display: inline

.finder
  padding: 0 !important
  input
    line-height: 1.32em
    font-size: 1.32em
    padding: 4px

.bulleted
  white-space: nowrap
  &:before
    content: "\2022"
    display: inline-block
    text-align: center

a.entity.highlight
  @extend .bulleted
  font-weight: bold

.figure
  margin-bottom: 1em
  margin-top: 1em


a.entity[data-aes-color]:not([data-aes-color=none])
  @extend .bulleted
  &[data-aes-color=gold]
    &:before
      color: gold
  &[data-aes-color=red]
    &:before
      color: red
  &[data-aes-color=yellow]
    &:before
      color: yellow
  &[data-aes-color=blue]
    &:before
      color: blue
  &[data-aes-color=green]
    &:before
      color: green

span.bullet
  @extend .bulleted
  @extend .pointer
  &:hover
    border: 1px solid rgba(0,0,0,0.12)
  width: 2em
  height: 2.5em
  line-height: 2.5em
  text-align: center
  position: absolute
  left: 0
  &.red
    color: red
  &.green
    color: green
  &+a
    color: red
    font-style:italic
    margin-left: 2em !important
    padding-left: 0em
    width: calc(100% - 2em) !important

.dropdown.item .dropdown.item > .menu
  overflow-y: auto
  max-height: 500px

label[title]
  cursor: help

.action_progress.ui.message
  margin-top: 8px
.action_progress.ui.message:empty
  display: none

.examples
  clear: both

#modal
  +small_screen
  .ui.icon.button.close
    float: right
  &.error
    .header
      color: red



#footer
  clear: both

  border: none !important
  padding: 0px !important
  margin: 0px !important
  .card
    width: 100%
    height: 100%
  .contact
    &:before
      content: "Contact: "
      font-weight: bold
    span.where:before
      content: " at "
  .image 
    font-size: 0px
    width: 241px 
  .content
    width: calc(100% - 241px -8px)
  .image, .content
    display: inline-block
    margin-left: 8px

  .ui.segment:after
    content: " "
    display:inline-block
    float:left
    clear:both

.action_menu.ui.buttons
  display: block

body
  overflow: auto

.preload
  #footer
    display: none