application.sass

@font-face
  :font-family 'BrandonGrotesqueLightRegular'
  :src url('brandongrotesque_light/Brandon_light-webfont.eot')
  :src local('☺'), url('brandongrotesque_light/Brandon_light-webfont.woff') format('woff'), url('brandongrotesque_light/Brandon_light-webfont.ttf') format('truetype'), url('brandongrotesque_light/Brandon_light-webfont.svg#webfont') format('svg')
  font
    :weight normal
    :style normal

body
  :padding 2em
  :margin 0
a
  :color #018790
  :text
    :decoration none
  :font-weight bold
  &:hover
    :color #018790


#flash_notice,
#flash_error,
#flash_alert
  :z-index 60
  :position absolute
  :padding 5px 8px
  :margin 0
  :width 400px
  :top 0px
  :margin
    :left 230px
  :color #666

#flash_notice
  :background-color #CFC
  :border solid 1px #6C6

#flash_error,
#flash_alert
  :background-color #FCC
  :border solid 1px #C66

.fieldWithErrors
  :display inline

.error_messages
  :width 400px
  :border 2px solid #CF0000
  :padding 0
  :padding-bottom 12px
  :margin-bottom 20px
  :background-color #f0f0f0
  :font
    :size 12px
  h2
    :text-align left
    :padding 5px 5px 5px 15px
    :margin 0
    :font
      :weight bold
      :size 12px
    :background-color #c00
  p
    :margin 8px 10px
  ul
    :margin 0

header
  :position relative
  :margin -2em
    :bottom 2em
  :color #555
  :background
    :color #2B2726
  :border
    :bottom 1px solid #444
  :padding 8px 0
  :box-shadow 0 2px 2px #000
  :-webkit-box-shadow 0 2px 2px #000
  :-moz-box-shadow 0 2px 2px #000

  #diaspora_text
    :font
      :family 'BrandonGrotesqueLightRegular'
      :size 24px
    :position absolute
    :border none
    :color #fff
    :text
      :shadow 0 2px 0 #000
    a
      :color #fff

    span.sub_text
      :color #000
      :text
        :shadow none
      
  #session_action
    :float right
    :margin
      :top 9px
    :text-shadow 0 1px 0 #000
    a
      :color #777
      :border none
      &.new_requests
        :color #DF0101
    :padding-right 10px

#show_filters
  :z-index 100
  :position absolute
  :right 0
  :text-align right

#show_filters > a
  :border 1px solid #666
  :padding 5px
#main
  :width 100%

ul#stream, ul#friend_stream
  :margin 0
  :padding 0
  :color #666
  > li
    :list-style none
    :padding 15px 0
    :border
      :bottom 1px solid #f1f1f1
    :margin-bottom 5px

ul#friend_stream
  > li
    :padding 0.2em 0

li.message
  :position relative
  :line-height 140%
  :font
    :family 'Lucida Grande', sans-serif
  :color #999

  span.from
    :color #000
    :font
      :weight normal
    :margin
      :right 0.2em
    :font
      :size 110%

  div.time
    :color #bababa
    :font-size 70%

h1
  :position relative
  :font
    :size 21px
    :weight bold
  :line-height 36px

  p.description, span.description
    :font
      :weight 200
    :color #999
    :padding 0.1em

h3
  :position relative
  :font
    :size 18px 
    :weight bold

form
  :font
    :size 120%
  :margin 1em
  :margin-left 0em

  
#user_name
  :margin
    :bottom 1em
  a
    :color #000

#stream div.comments
  :display none

#stream ul.comment_set
  :padding 0
    :left 1em

ul.comment_set
  :margin 0
    :top 1em
  :padding 0
  :list-style none
  :width 90%

  li.comment
    :margin
      :bottom 0.5em
    :background-color #F2F8FC
    :background
      :color rgba(10,81,109,0.1)
    :padding 0.6em
    :border
      :bottom 1px solid #ccc

    .from
      :color #666
      :font
        :weight normal
      a
        :color #333
        :font
          :weight bold

    form
      :margin
        :top -5px
      :padding
        :bottom 8px

img.person_picture
  :max-width 100%
  :border-radius 3px
  :-webkit-border-radius 3px
  :-moz-border-radius 3px
  :display inline block

li.message > img.person_picture,
li.comment > img.person_picture
  :height 30px
  :display absolute
  :float left
  :margin
    :right 10px
  
.pagination
  a
    :padding 3px
  
.destroy_link, .request_button
  :position absolute
  :right 0
  :bottom 15px
  a
    :color #999
    :font
      :weight normal

.destroy_link
  :display none

.request_buttons
  :position absolute
  :right 0
  :display inline
  :list-style none
  :margin 0
  :padding 0

  > li
    :display inline
    &:first-child
      :margin-right 1em

#show_photo
  img
    :max-width 100%



#debug_info
  :margin-top 20px


input[type='text'], textarea
  :font
    :family 'lucida grande', 'sans-serif'
    :size 14px
  :padding 0.3em
  :display block
  :width 100%
  :box-shadow 0 2px 0px #fff
  :-webkit-box-shadow 0 2px 0px #fff
  :-moz-box-shadow 0 2px 0px #fff
  :border-top 1px solid #999
  :height auto
  :border-radius 3px
  :-moz-border-radius 3px


input[type='submit']
  :display block
  :float right

form p
  :position relative
  :padding 0
  :margin 0

label
  :color #999
  :position absolute
  :top 3px
  :left 0.48em

#publisher
  :background
    :color rgba(10,81,109,0.05)
  :border
    :bottom 2px #999 solid
  :color #999
  :padding 20px 1em
    :top 10px

#new_blog, 
#new_bookmark
  :display none

ul#publisher_content_pickers
  :display inline
  :margin 0 -10px
  :padding 0
  :margin
    :left 10px

ul#publisher_content_pickers li
  :display inline
  :padding 5px 10px
  :margin
    :right 5px

#publisher .selected
  :border
    :bottom 3px solid #999
  :background
    :color rgba(10,81,109,0.1)

#image_picker
  .small_photo
    :height 100px
    :position relative
    :display inline-block
    :margin
      :right 1em
      :bottom 1em

    img
      :border-radius 3px

    input[type='checkbox']
      :position absolute

  .selected
    :-webkit-box-shadow 0 3px 6px #000
    :-moz-box-shadow 0 3px 6px #000
    :border 1px solid #fff



/* cycle it! */

.album
  :position relative
  :height 200px
  :width 300px
  :display inline-block
  :margin
    :right 2em
    :bottom 2em

  .name
    :position absolute
    :z-index 600
    :padding 1em
    :background rgba(0,0,0,0.8)
    :bottom 20px
    :font
      :size 18px

    .time
      :font
        :size 12px
      a
        :font
          :weight normal

  div.image_cycle
    img
      :border-radius 3px
      :-webkit-border-radius 3px
      :-moz-border-radius 3px

.field_with_submit
  input[type='text']
    :width 85%
    :display inline