application.sass

//   Copyright (c) 2010, Diaspora Inc.  This file is
//   licensed under the Affero General Public License version 3.  See
//   the COPYRIGHT file.


@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 #556270
  :color #107FC9
  :color #019DBE
  :text
    :decoration none
  &:hover
    :color #fff
    :background
      :color #556270
      :color #019DBE

h1
  :font
    :size 21px
    :weight bold
  :line
    :height 36px

h3
  :font
    :size 18px
    :weight bold

.avatar
  :width 50px
  :height 50px

#flash_notice,
#flash_error,
#flash_alert
  :z-index 100
  :top 32px
  :position absolute
  :color #000
  :width 400px
  :margin 0 0 0 -200px
  :left 50%
  :text
    :align center
  :font
    :size 14px
  :padding 3px 0

#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
  :z-index 4
  :position relative
  :margin -2em
    :bottom 2em
  :color #000
  :background -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#222))
  :background -moz-linear-gradient(19% 75% 90deg, #222, #666)
  :background
    :color #666
  :padding 0
    :top 5px
  :border
    :bottom 1px solid #ccc

  a
    :color #999

    &:hover
      :background none
      :color #eee

  #diaspora_text
    :display inline
    :font
      :family 'BrandonGrotesqueLightRegular'
      :size 16px
    :border none
    :color #fff

  #session_action
    :position absolute
    :display inline

    :top 0
    :right 0

    ul
      :list
        :style none
      :padding 0
      :margin 0
      :display inline

      li
        :display inline
        :margin
          :right 1em

        &:last-child
          :margin
            :right 0

  #aspect_header
    :-webkit-box-shadow 0px -4px 6px -2px #777
    
    :background -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F7F7F7), to(#EEEEEE))
    :background -moz-linear-gradient(19% 75% 90deg, #eee, #f7f7f7)

    :background
      :color #eee
    :border
      :top 1px solid #fff
    :padding 20px 0

    h1
      :margin
        :bottom 0
      :text-shadow 0 2px 0 #fff

    a
      :color #111
      &:hover
        :background none
        :color #999

    .page_title
      :text
        :transform uppercase
        :shadow 0 2px 0 #fff
      :margin
        :top -5px


ul#stream
  :margin 0
  :padding 0
  > li
    :min-height 50px
    :list-style none
    :padding 12px 0
    :border
      :bottom 1px solid #eee

    &:hover
      :background -webkit-gradient(linear, 0% 0%, 0% 50%, from(#FAFAFA), to(#FCFCFC))

      :background
        :color #fafafa

      :border
        :bottom 1px solid #ddd

      .destroy_link
        :display inline

  .right
    :top 0

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

  .avatar
    :float left
    :margin
      :right 15px

  .delete:hover
    :background #eee

  .content
    :padding
      :left 65px
    :width 600px

    span.from
      :color #000
      :font
        :weight normal
      :font
        :size 110%

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

      .time
        a
          :color #666

.reshare_pane
  :margin
    :left 5px
    :right 5px
  :display inline
  :position relative

  ul.reshare_box
    :width 150px
    :display none
    :z-index 10
    :position absolute
    :margin
      :top 5px
    :padding 0

    :background
      :color #fafafa

    :list
      :style none

    :border 5px solid #666
    :-webkit-box-shadow 0 0 5px #666
    :-moz-box-shadow 0 0 5px #666

    :text-shadow 0 2px #fff
    :color #000

    > li
      :font
        :weight bold

      :padding 8px
        :right 15px
      :border
        :top 1px solid #fff
        :bottom 1px solid #ccc

      &:first-child
        :border
          :top none
      &:last-child
        :border
          :bottom none
      a
        :display block
        :height 100%

        &:hover
          :background
            :color #eee


form
  :position relative
  :font
    :size 120%
  :margin 1em
    :left 0em

#user_name
  :margin
    :bottom 20px

  img
    :margin
      :right 10px
    :display inline-block
    :float left
    :height 40px

  h1
    :margin
      :bottom 7px
    :line-height 18px
    a
      :color #000

  span
    :size small
    :font
      :weight normal
    :color #999
  #latest_message_time
    :font-style italic
  ul
    :display inline
    :margin 0
    :padding 0
    :list-style none

    > li
      :display inline
      :margin
        :right 1em


#stream div.comments
  :display none

  .avatar
    :width 30px
    :height 30px
    :margin
      :right 10px

input.comment_submit
  :display none
  :margin
    :right -10px


ul.comment_set
  :margin 0
    :top 1em
  :padding 0
  :list-style none
  :width 495px

  textarea
    :width 100%

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

    .from
      :font
        :size 1em

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

    form
      :margin
        :top -5px
        :bottom 0
      :font
        :size 1em
      textarea
        :font
          :size 1em

.profile_photo
  img
    :height 150px
    :width 150px

#profile
  ul
    :list-style-type none
    :margin 0
    :padding 0


#stream, #profile,
.comments
  img.person_picture
    :border-radius 3px
    :-webkit-border-radius 3px
    :-moz-border-radius 3px
    :display inline block
    :height 30px
    :display absolute
    :float left
    :margin
      :right 10px


.pagination
  a
    :padding 3px

.destroy_link, .request_button
  :position absolute
  :right 2em
  :bottom 15px
  a
    :color #999
    :font
      :weight normal
    &:hover
      :text
        :decoration underline
      :background none

.destroy_link
  :display none
  :font-size smaller

.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
  :text-align center
  :min-height 200px
  img
    :max-width 100%

  .caption
    :margin
      :top 10px
      :bottom 25px
    :font
      :size larger

#debug_info
  :margin-top 20px
  :color #ccc

  h5
    :color #ccc


input[type='text'], textarea
  :font
    :family 'lucida grande', 'lucida sans', 'sans-serif'
    :size 14px
  :padding 0.3em
  :display block
  :width 66%
  :border 1px solid #ccc
  :height auto

  :border-radius 5px
  :-webkit-border-radius 5px
  :-moz-border-radius 5px

  :box-shadow 0 1px 2px #fff
  :-moz-box-shadow 0 1px 2px #fff
  :-webkit-box-shadow 0 1px 2px #fff

#submit_block
  :text
    :align right
  :font
    :size 12px

form p
  :position relative
  :padding 0
  :margin 0

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

#publisher
  :color #999
  :position relative

  .avatar
    :float left
    :margin
      :right 15px

  p
    :position absolute
    :left 0
    :top 0

  form
    :display inline

    input[type='submit']
      :float right
      :margin
        :right 20px
        :top 26px

  textarea
    :width 600px
    :height 42px
    :margin
      :top 0
      :bottom 0

  .button
    :margin-left 100px

  img
    :box-shadow 0 1px 2px #fff
    :-moz-box-shadow 0 1px 2px #fff
    :-webkit-box-shadow 0 1px 2px #fff
    :border 1px solid #bbb
      :top 1px solid #666



#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 200px
  :display inline-block

  img
    :width 200px
    :height 200px

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

    :text-shadow 0 2px 0 #000

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

  div.image_cycle
    img
      :display none

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

h1.big_text
  :position relative
  :line-height auto
  :border
    :bottom 1px solid #666
  .right
    :top -6px

#content_bottom
  .right
    :top -5px

.right
  :display inline
  :float right

.back
  :font
    :size 12px
    :weight normal

#content_bottom
  :position relative
  :line-height 36px

  :margin 0
    :top 25px
    :bottom 25px

  :min-height 36px

  :border
    :top 1px solid #999
    :bottom 2px solid #eee

.show_post_comments ul.comment_set
  :width 100%

.sub_header
  :position relative
  :text
    :align center
  :font
    :style italic
  :margin
    :bottom 20px
  :color #999

.image_thumb
  :display inline-block
  :width 100px
  :min-width 100px
  :height 100px
  :min-height 100px

  img
    :display none


.image_cycle
  img
    :display none

#aspect_nav
  :color #000
  :margin
    :top 8px
    :bottom 1px


  #aspect_manage_button
    :display inline

    a
      :color #999

  ul
    :margin 0
    :padding 0
    :list
      :style none


    > li
      :padding 0
      :display inline
      :margin
        :right 2px

      a
        :text-shadow 0 2px 0 #444
        :-webkit-border-radius 3px 3px 0 0
        :-moz-border-radius 3px 3px 0 0
        :line
          :height 22px
        :background
          :color #444

        :border 1px solid #555

        :padding 3px 8px
          :bottom 3px
        :color #999

        &:hover
          :background
            :color #4e4e4e
          :color #ccc

      &.selected a
        :-webkit-box-shadow 0px -4px 6px -2px #777
        :-moz-box-shadow 0px -4px 6px -2px #777

        :text-shadow 0 2px 0 #fff
        :padding
          :top 4px
          :bottom 5px
        :line
          :height 18px
        :font
          :weight bold
        :background
          :color #eee

        :background -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#F7F7F7))
        :background -moz-linear-gradient(19% 75% 90deg, #f7f7f7, #fff)

        :border 1px solid #fff
          :bottom 1px solid #F7F7F7
        :color #000
        &:hover
          :background
            :color #efefef
        a
          :color #000
  .new_requests
    :color red

#global_search
  :display inline
  :position relative
  :opacity 0.5

  form
    :display inline

    input
      :display inline
      :font
        :size 12px
      :border none

    input[type='text']
      :width 200px
      :padding 2px

    label
      :font
        :size 12px
      :margin
        :top -3px


.aspect,
.requests,
.remove
  :list
    :style none

  h1
    :display inline-block

  .tip
    :display none
    :color #999
    :margin
      :left 0.5em

  .edit_name_field:hover
    .tip
      :display inline


  .aspect_name
    :position relative

    ul.tools
      :position absolute
      :top 10px
      :right 0
      :display inline
      :padding 0
      :margin 0
      :list
        :style none
      li
        :display inline
        :margin
          :right 1em

        &:last-child
          :margin
            :right 0

  .grey
    :color #999
    :cursor default
    :text-shadow 0 2px #fff

  ul.dropzone
    :min-height 20px
    :margin 0
      :bottom 25px
    :background
      :color #efefef
    :border 1px solid #ccc
    :list
      :style none
    :padding 15px

    &.active
      :background
        :color #fafafa

  .person,
  .requested_person
    :display inline-block
    :padding 5px
    :cursor move
    :margin 5px
    :z-index 10

    :text
      :align center

    :width 125px
    :height 120px

    img
      :height 100px
      :width 100px
      :display inline-block

    &:active
      :z-index 20
      :color #666
      img
        :-webkit-box-shadow 0 1px 3px #333
        :-moz-box-shadow 0 2px 4px #333
        :opacity 0.9

ul#settings_nav
  :list
    :style none
  :padding 0
  :marign 0

  :font
    :size larger

  > li

    a
      :display block
      :height 100%
      :border
        :bottom 1px solid #eee
      :padding 5px 0


.settings_pane
  :display none


#fancybox-close:hover
  :background
    :color transparent

.aspect_tag,
.public_aspect_tag
  :position absolute
  :top 15px
  :right 2em

  :border-radius 5px
  :-webkit-border-radius 5px
  :-moz-border-radius 5px

  :font
    :size smaller
  :padding 0 6px

  :color #999
  :text
    :shadow 0 1px #fff

  :border
    :bottom 1px solid #eee

  :cursor default

.public_aspect_tag
  :background -moz-linear-gradient(19% 75% 90deg,#FFFA75, #FFF8BA)
  :background -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF8BA), to(#FFFA75))
    :color #FFFC7F
  :border
    :top 1px solid #EBE66C

.aspect_tag
  :background -moz-linear-gradient(19% 75% 90deg,#E0E0E0, #F0F0F0)
  :background -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F0F0F0), to(#E0E0E0))
    :color #eee
  :color #999
  :text
    :shadow 0 1px #fff
  :border
    :top 1px solid #ddd

  ul
    :display inline
    :margin 0
    :padding 0
    :list
      :style none

    li
      :display inline-block
      :margin
        :right 2px
      :padding
        :right 4px
      :border
        :right 1px solid #ccc

      &:last-child
        :margin
          :right 0
        :padding
          :right 0
        :border
          :right none


#friend_pictures
  :line-height 1em
  img
    :margin-right -1px

#thumbnails
  :line-height 14px