@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.error, div.notice
  position: absolute
  width: 300px
  top: 50px
  right: 50px
  +border-radius
  +box-shadow($dark 2px 2px 4px)
  color: white
  padding: 1px 1em
  a.closer
    display: block
    position: absolute
    top: 5px
    right: 5px
    color: white
    font-weight: bold
div.notice
  background-color: #b2e5b2
  color: #060
div.error
  background-color: #f3c2c2
  color: #770000

div#readers
  .reader
    margin-bottom: 1em
  h2
    line-height: 1
    margin: 0
  
div.activation_required
  color: $accent

p.administrative
  font-family: helvetica,arial,sans-serif
  color: $pale

img.gravatar
  +box-shadow($dark 2px 2px 4px)
  border: 3px solid white
  &.thumbnail
    margin: 2px 10px 10px 0
  &.big
    margin: 8px 10px 4px 0
  &.tiny
    margin: 3px 6px 4px 0
    border: 1px solid white
  &.left
    float: left
  &.right
    float: right
    margin: 8px 0 4px 10px

form.friendly
  margin: 0 0 2em 0
  p
    margin: 1em 0 0 0
    overflow: hidden
    span.semi
      display: block
      float: left
      width: 48%
      margin-right: 1%
    &.clear
      clear: both
  input.login
    width: 95%
    font-size: 140%
  input.titular
    width: 95%
    font-size: 200%
  textarea, select
    width: 95%
  textarea
    height: 400px
  input.standard
    width: 95%
  span.formnote
    clear: left
    +small
    color: $mid
  label
    &.required
      font-weight: bold
  div.hidden, div.innocuous
    display: none
  span.password
    display: block
    width: 95%
    padding: 5px 
    font-size: 1.2
    line-height: 1.2
    color: $pale
    border: 1px solid $pale
  span.error-with-field
    input, select
      border: 1px solid red
      color: $warning
    span.error
      +small
      line-height: 1.4
      background-color: $warning
      color: white
      padding: 3px 6px
      margin: -5px 0 0 6px
      cursor: pointer
      +border-radius
      +box-shadow($dark 2px 2px 4px)
      a.closer
        margin-left: 10px
        color: white
        text-decoration: none

div.indented
  margin-left: 40px

.dashboard_module
  margin-top: 2em
  &:first-child
    margin-top: 0
  ul
    margin: 1em 0
    padding-left: 16px
  h3:first-child
    margin-top: 0

#marginalia
  div.contact
    border: 1px solid $paler
    +box-shadow(1px 2px 3px)
    padding: 1em
    margin: 1em -1em
    h3
      margin-bottom: 1em
      margin-left: -4px
    ul
      margin-bottom: 0
      li
        margin-bottom: 0
        span.indent
          float: left
          margin-right: 0.5em
        address
          overflow: hidden
      li.edit
        text-align: right

a.vcard
  padding-left: 30px
  background: transparent url(/images/furniture/vcard.png) no-repeat 0 0

h2
  span.headernote
    font-size: 70%
  a.vcard, a.csv
    display: inline-block
    height: 14px
    width: 20px
    text-indent: -100px
    padding-left: 0
    margin-right: 4px
  
a.mailto
  color: $mid
  
.reader
  margin-bottom: 1em
  h2
    margin-bottom: 0
  .context
    margin-top: 0
  
.column
  float: left
  width: 30%
  margin-right: 2%
  .reader
    margin-bottom: 1em
    overflow: hidden
  .speaker
    margin-left: 0
  h2
    font-size: 125%
    a.title
      padding-top: 0.5em
      
ul.groups
  padding: 0
  margin: 0 0 1em 0
  li
    margin-right: 1em
    display: inline

.cleared
  clear: left
  
.message_head
  
div#preview
  float: left
  width: 80%
  +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
      width: 99%
      height: 520px
      margin: 0
      border: 0
      overflow: auto

table.readers
  td
    vertical-align: top
    padding-right: 1em
    padding: 0.25em 1em 0.25em 0
    border-bottom: 1px dotted $pale
    h4
      white-space: nowrap
    h3, p
      margin: 0
      line-height: 25px
  td.phone, td.mobile
    white-space: nowrap
  td.missing
    color: $pale
    font-size: 80%
  tr:last-child
    td
      border-bottom: none
    
p.exception
  color: #c00
  font-size: 150%
  text-align: center