@import "compass"
@import "compass/reset"

html, body
  width: 100%
  height: 100%

body
  +establish-baseline(12px)
  +display-box
  +box-orient(vertical)
  background: #eee
  color: #000
  font-size: 12px
  font-family: Helvetica, sans-serif

  &.iframe
    background: #fff

    h1
      font-size: 1.3em
      margin: 12px
    p, form
      margin: 0 12px 12px 12px
      line-height: 1.25
    .loading
      color: #666
      margin-left: 0.5em

.button
  padding: .5em 1em
  border: 1px solid #ccc
  +border-radius(2px)
  +background(linear-gradient(color-stops(#f4f4f4, #ececec)), #ececec)
  color: #666
  +text-shadow(1px 1px 0 #fff)
  text-decoration: none
  &:hover, &:focus
    border-color: #999
    border-bottom-color: #666
    +background(linear-gradient(color-stops(#eee, #ddd)), #ddd)
    color: #333
    text-decoration: none
  &:active, &.active
    border-color: #666
    border-bottom-color: #999
    +background(linear-gradient(color-stops(#ddd, #eee)), #eee)
    color: #333
    text-decoration: none
    +text-shadow(-1px -1px 0 #eee)

body > header
  +clearfix
  border-bottom: 1px solid #ccc
  h1
    float: left
    margin-left: 6px
    padding: 6px
    padding-left: 30px
    background: url(/assets/logo.png) left no-repeat
    font-size: 18px
    font-weight: bold
    a
      color: black
      text-decoration: none
      +text-shadow(0 1px 0 white)
      +transition(0.1s ease)
      &:hover
        color: #4183C4
  nav
    &.project
      float: left
    &.app
      float: right
    border-left: 1px solid #ccc
    li
      display: block
      float: left
      border-left: 1px solid #fff
      border-right: 1px solid #ccc
      input
        margin: 6px
      a
        display: block
        padding: 10px
        text-decoration: none
        +text-shadow(0 1px 0 white)
        +background(linear-gradient(color-stops(#f4f4f4, #ececec)), #ececec)
        color: #666
        +text-shadow(1px 1px 0 #fff)
        text-decoration: none
        &:hover, &:focus
          +background(linear-gradient(color-stops(#eee, #ddd)), #ddd)
          color: #333
          text-decoration: none
        &:active, &.active
          +background(linear-gradient(color-stops(#ddd, #eee)), #eee)
          color: #333
          text-decoration: none
          +text-shadow(-1px -1px 0 #eee)

#messages
  width: 100%
  height: 10em
  // Two rows with padding:
  min-height: (2 * (1em + .5em))
  overflow: auto
  background: #fff
  border-top: 1px solid #fff
  table
    +clearfix
    width: 100%
    thead tr
      background: #eee
      color: #333
      th
        padding: .25em
        font-weight: bold
        color: #666
        +text-shadow(0 1px 0 white)
    tbody tr
      cursor: pointer
      +transition(0.1s ease)
      color: #333
      &:hover
        color: #000
      &:nth-child(even)
        background: #f0f0f0
      &.selected
        background: Highlight
        color: HighlightText
      td
        padding: .25em
        &.blank
          color: #666
          font-style: italic
#resizer
  padding-bottom: 5px
  cursor: ns-resize
  .ruler
    border-top: 1px solid #ccc
    border-bottom: 1px solid #fff

#message
  +display-box
  +box-orient(vertical)
  +box-flex(1)
  > header
    +clearfix
    .metadata
      +clearfix
      padding: .5em
      // This is already padded by resizer
      padding-top: 0
      dt, dd
        padding: .25em
      dt
        float: left
        clear: left
        width: 8em
        margin-right: .5em
        text-align: right
        font-weight: bold
        color: #666
        +text-shadow(0 1px 0 white)
      dd.subject
        font-weight: bold
      .attachments
        display: none
        ul
          display: inline
          li
            +inline-block
            margin-right: .5em
    .views
      ul
        padding: 0 .5em
        border-bottom: 1px solid #ccc
      .tab
        +inline-block
        a
          +inline-block
          padding: .5em
          border: 1px solid #ccc
          background: #ddd
          color: #333
          border-width: 1px 1px 0 1px
          cursor: pointer
          +text-shadow(0 1px 0 #eeeeee)
          text-decoration: none
        &:not(.selected):hover a
          background-color: #eee
        &.selected a
          background: #fff
          color: #000
          height: 13px
          +box-shadow(1px 1px 0 #ccc)
          margin-bottom: -2px
          cursor: default
      .action
        +inline-block
        float: right
        margin: 0 .25em

.fractal-analysis
  margin: 12px 0
  .report-intro
    font-weight: bold
    &.valid
      color: #090
    &.invalid
      color: #c33
  code
    font-family: Monaco, "Courier New", Courier, monospace
    background-color: #f8f8ff
    color: #444
    padding: 0 .2em
    border: 1px solid #dedede
  ul
    margin: 1em 0 1em 1em
    list-style-type: square
  ol
    margin: 1em 0 1em 2em
    list-style-type: decimal
  ul li, ol li
    display: list-item
    margin: .5em 0 .5em 1em
  .error-intro
    strong
      font-weight: bold
  .unsupported-clients
    dt
      padding-left: 1em
    dd
      padding-left: 2em
      ul
        li
          display: list-item

iframe
  +display-box
  +box-flex(1)
  background: #fff