@import compass/css3

$red: #b20315
$darkred: #a80016
$palered: #db4d5c
$yellow: #e09a0c
$darkyellow: #bc7815
$blue: #004250

$coolgrey0: #f1f0ee
$coolgrey1: #e2e1dd
$coolgrey2: #d6d6d4
$coolgrey3: #cacac8
$coolgrey4: #bdbdbd
$coolgrey5: #b3b3b3
$coolgrey6: #afafaf
$coolgrey7: #9a9b9d
$coolgrey8: #8c8d8e
$coolgrey9: #747679
$coolgrey10: #616265
$coolgrey11: #4d4e53

$dark: $coolgrey11
$mid: $coolgrey8
$pale: $coolgrey6
$paler: $coolgrey4
$verypale: $coolgrey2

$page: white
$text: $coolgrey11
$hover: $red
$tag: $coolgrey8
$input: $coolgrey11
$link: $red

=inputfonts
  font-family: Georgia, serif
  font-size: 1.2em
  line-height: 1.4

=functionalfonts
  font-family: helvetica, arial, sans-serif

=blurred($color: $paler)
  text-shadow: $color 0 0 2px

/** calendars and maps *******

#events
  .event
    position: relative
    margin-bottom: 20px
    .dateholder
      position: absolute
      left: 15px
      top: 2px
      padding: 5px 5px 0 5px
      border: 0
      +functionalfonts
      text-align: center
      line-height: 1.05
      background-color: $page
      border:
        style: solid
        width: 1px
        color: $verypale
      span.month, span.dow
        display: block
        font-weight: lighter
        font-size: 80%
        text-transform: uppercase
      span.day, span.dom
        display: block
        font-weight: bold
        font-size: 160%
    .detail
      h3
        margin: 0
        font-size: 180%
      p
        margin-top: 0
        font-size: 90%
        line-height: 1.4
      a.facebook, a.twitter, a.ical
        display: inline-block
        width: 11px
        height: 12px
        margin: 6px 0
        overflow: hidden
        text-indent: -500px
      a.ical
        background: transparent url(/images/event_calendar/ical_small.png) no-repeat top left
      a.facebook
        background: transparent url(/images/event_calendar/facebook_small.png) no-repeat top left
      a.twitter
        background: transparent url(/images/event_calendar/twitter_small.png) no-repeat top left
      p.venue
        font-style: italic
        margin-bottom: 6px
      p.description
        margin-bottom: 16px

#continuing
  h3
    +functionalfonts
    font-weight: bold
    font-size: 1.2em
    margin-bottom: 0
  ul
    +functionalfonts
    font-size: 90%
    line-height: 1.2
    padding-left: 0
    li
      margin-top: 10px
      font-style: normal
      a.title
        font-weight: bold
      span.detail
        font-size: 80%

#faceting
  a.defilter
    padding-left: 14px
    background: transparent url(/images/furniture/detag.png) no-repeat top left
    color: #cc0000

table.minimonth
  font-style: normal
  border-collapse: collapse
  border:
    style: solid
    width: 1px
    color: $verypale
  color: $text
  margin: 5px 0
  h3
    font-size: 300%
    margin: 10px 5px 5px 5px
  a
    display: block
    color: $link
    font-weight: lighter
    text-decoration: none
  a:hover
    color: $hover
  th, td
    font-weight: normal
    border:
      style: solid
      width: 1px
      color: $verypale
    vertical-align: top
    text-align: center
    height: 32px
    width: 36px
    line-height: 32px
    padding: 0
    overflow: hidden
  td.m
    font-size: 140%
  td.day_name
    color: $verypale
  td.o
    color: $pale
    a
      color: $pale
    a:hover
      color: $page
  td.t
    background-color: $page
  td.w
  td.e
  td.u
    +blurred
    color: $verypale
  td.t
    font-weight: bold
  td.p