@import compass

#content
  table
    &#groups
      td.name
        width: 35%
        span.notes
          font-size: 80%
          color: #929488
          font-weight: lighter
          line-height: 1.2
          margin-top: 0.25em
      tr.level_0
        td.name
          a
            font-size: 120%
      tr.level_1
        td.name
          a
            font-size: 100%
      tr.level_2
        td.name
          a
            font-size: 85%
        
    &#import
      th
        text-align: left
      td
        padding: 2px
  form#confirmation_form
    table
      width: 90%
    input
      &.preview
        border: 1px solid #929488
        font-family: 'Lucida Grande'
        font-size: 16px
        padding: 3px
        width: 95%
      &.with_error
        border: 1px solid #c00
        color: #c00
    tr.invite td input
      background-color: #e2e1dc
    p.buttons
      margin-top: 10px
  .form-area
    label.disabled
      color: #929488
    span.formnote
      font-size: 80%
      color: #929488
  #group_pages
    clear: left
    width: 58%
    float: left
  #group_people
    width: 35%
    float: right
  #group_messages
    float: left
    width: 98%
    ul
      list-style: square
      font-size: 85%
      padding-left: 14px
  div.stretcher
    clear: left
  table#group_pages td.page a
    color: black
    text-decoration: none
    &:hover
      color: blue
      text-decoration: underline
  blockquote.messagepreview
    border: 3px solid #999
    background-color: #eee
    margin: 0
    padding: 20px
    font-family: courier, monospace
    font-size: 13px
    line-height: 16px
  .form-area p
    &.description, &.invitation
      margin-top: 10px
  #footnotes
    clear: both
    margin-top: 50px

#group_pages ul
  padding-left: 20px
  li
    clear: left

#group_people ul
  padding-left: 0
  li
    clear: left
    font-size: 16px
    line-height: 1.6
    list-style: none
    margin-top: 2px
    font-family: 'Lucida Grande'
    .role
      display: block
      float: left
      font-weight: normal
      margin-left: 0.5em
      a
        color: #999
        text-decoration: none
        background-repeat: no-repeat
        background-position: 0 3px
        font-size: 60%
        vertical-align: text-bottom
        &.waiting
          color: #8c8d8e
          padding-left: 20px
          background-image: url(/images/admin/spinner.gif)
      form
        font-size: 60%
        input.minibox
          width: 60px
          color: #666
        input, label
          float: left      
          vertical-align: text-bottom

#group_pages ul li
  font-size: 16px
  list-style: none
  line-height: 24px
  margin-top: 2px
  font-family: 'Lucida Grande'

/*#group_people ul li a, #group_pages ul li a {
 *  text-decoration: none;
 *  font-weight: normal;
 *}
/*
 *#group_pages ul li.inherited a {
 *  color: #ccc;
 *  font-weight: normal;
 *}
 *
 *#group_people ul li.attached a, #group_pages ul li.attached a {
 *  color: #060;
 *  font-weight: bold;
 *}

.fake_checkbox
  display: block
  float: left
  padding-left: 20px
  cursor: pointer
  background-repeat: no-repeat
  background-position: 0 3px
  text-decoration: none
  color: #ccc
  font-weight: normal
  background-image: url(/images/admin/chk_off.png)
  input
    position: absolute
    left: -9999px
  &.checked
    color: #5da454
    background-image: url(/images/admin/chk_on.png)
  &.inherited
    color: #bfe4b9
    background-image: url(/images/admin/chk_auto.png)
  &.waiting
    color: #8c8d8e
    background-image: url(/images/admin/spinner.gif)
  &.failed
    color: #c00

span.group_actions
  img
    opacity: 0.5
  a img
    opacity: 1

.box
  h3
    float: left
    border: 0
  p, ul
    clear: both
  .actions
    float: right
    margin-top: 10px
  a.action, span.action.disabled
    padding: 3px 4px
    margin: 0 25px 0 1px
    img
      vertical-align: auto
  a.action
    color: black
    text-decoration: none
    &:hover
      background: #eee image_url('admin/buttons_background.png') repeat-x
      border: 1px solid #a5c9df
      margin: 0 24px 0 0
      +border-radius
    &.selected
      background: #c5e0f5
      +linear-gradient(color_stops(#e5f5ff, #c5e0ff))
      border: 1px solid #a5c9df
      margin: 0 24px 0 0
      +border-top-radius
      +border-bottom-radius(0)
  span.action.disabled
    color: #ccc
  span.sent
    color: #ccc

/* show and send page

div#preview
  float: left
  width: 65%
  +box-shadow
  background-color: white
  .message_header
    padding: 10px
    overflow: hidden
    background-color: #eee
    color: #333
    font-size: 80%
    line-height: 1.5
    ul
      margin: 0
      padding: 6px 14px
      list-style-type: none
      li.subject
        font-size: 1.6em
        margin-top: 6px
      li.mime-version, li.content-type
        display: none
  .message_body
    iframe.message_body
      width: 99%
      height: 520px
      margin: 0
      border: 0
      overflow: auto

  div.preview_controls
    height: 24px
    p
      margin: 2px 14px
      text-align: right
    a
      text-decoration: none
      color: #c00

div#deliver
  position: relative
  float: left
  width: 27%
  margin-left: 2%

/* edit pages

ul.help
  list-style: square
  color: #666
  font-size: 85%
  code
    color: #c00
    font-size: 115%


#content
  form
    p
      textarea
        width: 100%
        height: 8em