@import compass/css3
@import 960/grid

=standard_input
  width: 100%
  padding: 6px 0
  border: 1px solid #666666
  font-family: Monaco, "Courier New", Courier, monospace
  font-size: 95%

=quiet
  font-family: helvetica, arial, sans-serif
  font-weight: lighter
  font-size: 85%
  color: #cccccc
  line-height: 1.3
  text-shadow: none

=flatbottom
  margin-bottom: 0

.note
  +quiet

table.index
  td.subscription-title
    font-size: 115%
    font-weight: bold
  th
    a
      color: #ccc
      text-decoration: none
      &:hover
        color: white

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

//events index

table#events
  tr
    td.datemark
      width: 40px
      vertical-align: top
      text-align: center
      line-height: 1
      a
        text-decoration: none
      span.month
        display: block
        margin-top: 5px
        font-family: helvetica, arial, sans-serif
        font-weight: lighter
        font-size: 90%
        text-transform: uppercase
      span.day
        display: block
        font-family: helvetica, arial, sans-serif
        font-weight: bold
        font-size: 160%
    td.event
      width: 40%
      vertical-align: center
      h3
        margin: 2px 0 0
        line-height: 1
        a
          text-decoration: none
      p.description
        margin: 0
        font-size: 80%
        color: #999
      p.keywords
        margin: 4px 0
        font-size: 80%
    td.time, td.location, td.keywords, td.recurrence
      vertical-align: center
    td.remove
      vertical-align: center
      span.ineditable
        color: #666666
        font-size: 80%
        background: url(/images/admin/minus.png) no-repeat scroll 4px 0
        padding-left: 20px
        opacity: 0.3
  tr.continuing, tr.past
    td
      color: #b2aaa4
      a, span
        color: #b2aaa4
  tr.deleted
    td.datemark
      a, span
        color: #cccccc
    td.event
      h3
        a, span
          color: #cccccc
          text-decoration: line-through

// venues index

table#event_venues
  td.event_venue
    width: 40%
    vertical-align: center
    h3
      margin: 0
      line-height: 1.2
      a
        text-decoration: none
    p.description
      margin: 4px 0
      font-size: 80%
      color: #999999
  td.location, td.url
    font-size: 80%
    vertical-align: center
  td.actions
    white-space: nowrap

// event and calendar forms

#content
  .form-area
    input[disabled='disabled'], textarea[disabled='disabled']
      background-color: #dadada
      border-color: #e7e7e7
    
    .main
      position: relative
      width: 73%
      margin-right: 2%
      float: left
      overflow: hidden
      p:first-child
        margin-top: 0
      input.textbox, textarea, select
        width: 99%
        margin-top: 3px 
      p.title
        margin-top: 0
        margin-bottom: 1em
        input
          font-family: Georgia, Palatino, "Times New Roman", Times, serif
          font-size: 200%
          
    .metadata
      position: relative
      width: 25%
      float: left
      overflow: hidden
      p:first-child
        margin-top: 0
      p.keywords
        margin-bottom: 1em
        input
          margin-top: 4px
          font-family: Georgia, Palatino, "Times New Roman", Times, serif
          font-size: 200%
          color: #c00
          
    p.updated_line
      clear: left
    .buttons
      clear: both
    
  #calendar_form
    #subscription
      overflow: hidden
      margin-right: 2px
      div
        margin: 0.5em 2% 0 1%
        width: 47%
        float: left
        input.textbox
          +standard_input
    .drawer_handle
      clear: both
    .filing
      p
        margin-top: 0
      p.calendar_category
        width: 47%
        float: left
        margin-right: 4%
      p.calendar_slug
        width: 48%
        float: left
    .description

  #event_form, #venue_form
    p.start_date
      margin: 0
      width: 25%
      float: left
      margin-right: 4%
    p.end_date
      margin: 0
      width: 25%
      float: left
        
    div.recurrence
      clear: left
      p.recurrence
        margin: 0
      p#recurrence_detail
        overflow: hidden
        margin-top: 0
        span
          float: left
          margin-right: 1%
          width: 24%
          input, select
            width: 95%
    div#venue
      select
        +standard_input
      
    p.url
      clear: both
    p.description
      clear: both
    div.venue, div.newvenue
      overflow: auto
      clear: left
    textarea
      height: 5em
      
    label.minor
      +quiet
      display: inline
    label.inline
      display: inline
    .hidden
      display: none

a.toggleMCE
  display: block
  width: 24px
  height: 24px
  padding-left: 24px
  float: right

.calendar_popup
  div.clock_control
    position: relative
    display: block
    width: 300px
    height: 200px
    form
      text-align: center
      h4
        margin: 10px
        color: #999999
        font-weight: lighter
      input.hours, input.minutes
        width: 60px
        border: 1px solid #cccccc
        padding: 4px
        font-size: 40px
      span.colon
        padding: 4px
        font-size: 40px
        color: #333333
        width: 10px
      input.set_time
        font-size: 30px
        width: 114px
        margin: 20px 0
      a.cancel
        cursor: pointer