mailcatcher/public/stylesheets/application.sass

@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

body > header
  +clearfix
  border-bottom: 1px solid #ccc
  h1
    float: left
    padding: 6px
    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
    border-right: 1px solid #fff
    li
      display: inline
      // @include inline-block;
      a
        display: inline-block
        float: left
        padding: 9px
        border-left: 1px solid #fff
        border-right: 1px solid #ccc
        background: #eee
        color: #666
        font-weight: bold
        text-decoration: none
        +text-shadow(0 1px 0 white)
        &:hover
          background: #fff
        &:active
          margin: 1px -1px -1px 1px
          +box-shadow(none)

#messages
  width: 100%
  height: 10em
  overflow: auto
  background: #fff
  border-top: 1px solid #fff
  border-bottom: 1px solid #ccc
  table
    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

#message
  +display-box
  +box-orient(vertical)
  +box-flex(1)
  border-top: 1px solid #fff
  > header
    +clearfix
    .metadata
      +clearfix
      padding: .5em
      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 #999
      .tab
        display: inline-block
        padding: .5em
        border: 1px solid #999
        background: #ddd
        color: #333
        border-width: 1px 1px 0 1px
        cursor: pointer
        +text-shadow(0 1px 0 #eeeeee)
      .tab:not(.selected):hover
        background-color: #ddd
      .tab.selected
        background: #fff
        color: #000
        height: 13px
        +box-shadow(1px 1px 0 #cccccc)
        margin-bottom: -2px
      .button
        display: inline-block
        float: right
        margin: 0 .25em
        a
          display: inline-block
          padding: .25em .5em
          border: 1px solid #999
          background: #ddd
          color: #333
          text-decoration: none
          +text-shadow(1px 1px 0 #eeeeee)
          +box-shadow(1px 1px 0 #cccccc)
          &:hover
            background: #fff
            +text-shadow(none)
          &:active
            margin: 1px -1px -1px 1px
            +box-shadow(none)
  .body
    +display-box
    +box-flex(1)
    width: 100%
    background: #fff