@import compass/css3

$dark: #4d4e53
$mid: #8c8d8e
$pale: #afafaf
$paler: #bdbdbd
$verypale: #d6d6d4
$accent: #d1005d
$warning: red

=functional
  font-family: helvetica, arial, sans-serif
  font-weight: normal
=strong
  +functional
  font-weight: bold
=small
  +functional
  font-size: 80%

div.header
  margin: 2em 0 1em 0
  h1.title
    font-size: 275%
    line-height: 1
    margin: 0
    span.breadhead
      display: block
      font-size: 40%
      line-height: 0.6
  p.context
    margin: 0

div.forum
  clear: left
  h2
    line-height: 1
    margin: 0
    font-size: 200%
  div.forum
    div.forum_wrapper
      margin: 2em 0
      div.forum_description
        p
          margin: 0
  div.post
    clear: left
    margin: 1em 0 2em 0
    &.waiting
      color: $mid
    &.deleted
      text-decoration: line-through
      color: $mid
    div.post_header
      h2.reply
        a
          color: $mid
          &:hover
            color: $accent
      a
        &:hover
          color: $accent
    div.post_body
      position: relative
      p
        margin-top: .25em        
      blockquote
        color: $mid
        border-left-width: 5px
        border-left-style: solid
        border-left-color: #cacac8
        margin: 0
        padding-left: 20px
    div.post_attachments
      +small
    p.voices
      margin: 0
    p.replies
      clear: left
      +small
      margin-top: 0
      color: $paler
      a
        color: $pale

    div.remote_form
      margin: 0
    div.post_removal
      p
        margin: 0
      p.warning
        +strong
        color: red
        font-size: 1.4
      p.confirmation
        +strong
        color: green
        font-size: 1.4

  p.context
    +small
    line-height: 1.2
    margin: 5px 0 10px 0

  div#search
    overflow: hidden
    margin: 0 0 2em 0
    p
      width: 24%
      margin-right: 1%
      float: left
      &.buttons
        padding-top: 1.5em

a.edit_post, a.delete_post
  color: white
  padding: 1px 3px
  +border-radius(3px)
  font-size: 75%
  opacity: 0.2
  &:hover
    opacity: 1
    color: white !important
    +box-shadow
a.edit_post
  background-color: green
a.delete_post
  background-color: red

div.upload_stack, div.post_attachments
  margin: 0 0 30px 0
  h4
    +strong
    margin: 0
    color: $mid
  ul
    margin: 0
    list-style: none
    padding: 0
  li
    clear: none
    margin: 0
  a.attachment
    background: url(/images/furniture/attachment_link.png) no-repeat 0 2px
    padding-left: 18px
  a.attachment:hover
    background-image: url(/images/furniture/attachment_over.png)
  a.remove
    font-family: helvetica,arial,sans-serif
    font-size: 60%
    color: $accent
    padding: 3px
    &:hover
      color: white
      background-color: $accent
  a.thumbnail
    margin: 8px 8px 4px 0
    img
      border: 4px solid white
      +box-shadow

div.upload_stack
  ul.attachments input, ul.uploads input
    display: none
  ul li a
    color: $dark
  div.selector
    position: relative
    input.filefield
      position: relative
      z-index: 100
      opacity: 0
      cursor: pointer
    div.addfile
      position: absolute
      z-index: 99
      top: 0
      a
        background: url(/images/furniture/attachment_link.png) no-repeat 0 2px
        padding-left: 18px

div#forum_search
  margin: 40px 0 0 0
  h2, p
    margin: 0
  input
    &.standard
      width: 80%
    &.button
      font-size: 1.2em
      line-height: 1
      color: $dark
      padding: 5px
      margin: 0 0 0 6px

a.post
  font-size: 140%
  padding-left: 20px
  background: url(/images/furniture/post.png) no-repeat scroll 0 0
  &:hover
    color: $accent
    background-position: 0 -28px

img.feedicon
  margin: 8px 0

a.rssfeed
  display: inline
  margin: 0
  padding: 0
  width: 14px

.context, .updatenote
  +small
  line-height: 1.2
  color: $pale

p.waiting, span.waiting, a.waiting
  color: $mid
  padding-left: 18px
  background: transparent url(/images/furniture/wait_16_grey.gif) no-repeat left top

img.smiley
  margin: 3px 3px 0 3px

div.speaker
  position: relative
  clear: left
  float: left
  width: 50px
  height: 50px
  margin-right: 8px
  margin-top: 5px
  
p.add_comment, p.add_reply
  font-size: 200%

span.formnote
  +small

// dashboard module



// emoticons in message display are interpolated by our redcloth extension as <img class="emoticon something" />

img.emoticon
  overflow: hidden
  width: 16px
  height: 16px
  margin: 0
  padding: 0
  border: 0
  background: transparent url('/images/furniture/emoticons.png') no-repeat 0 0
  &.happy
    background-position: 0 0
  &.neutral
    background-position: -16px 0
  &.sad
    background-position: -32px 0
  &.grin
    background-position: -48px 0
  &.surprised
    background-position: -64px 0
  &.wink
    background-position: -80px 0
  &.devil
    background-position: -96px 0
  &.tongue
    background-position: -112px 0
  &.lol
    background-position: -128px 0
  &.mad
    background-position: -144px 0
  &.shocked
    background-position: -160px 0
  &.cool
    background-position: -176px 0