w14g.css.sass

@import "compass"
@import "compass/reset"

/*
  Delete outline on webkit input elements :focus

input[type=text]:focus,
input[type=password]:focus
  :outline 0 none

html,body,#container,#main
  :height 100%
  :text-align center
  :font-family 'Helvetica Neue', Helvetica, Arial, sans-serif
  :color #fff
  :min-width 600px

  a
    :color #fff

#overground
  :width 100%
  :height 100%
  :background #d7edfe
  :background -moz-linear-gradient(top, #80c3f5, #d7edfe)
  :background -webkit-gradient(linear, 0 0, 0 100%, from(#80c3f5), to(#d7edfe))

#sky
  :position relative
  :height 62%
  :width 100%
  :overflow hidden

  #gloom
    :position absolute
    :bottom 0
    :left 50%
    :width 800px
    :margin-left -400px
    :height 100%

  #sky_country_trans
    :position absolute
    :bottom 0
    :width 100%
    :height 35px
    :background url('../images/sky_country_trans.png')
    :z-index 11

  #form
    +transition
    +transparent
    :position absolute
    :left 50%
    :bottom 140px
    :width 500px
    :margin 200px 0 0 -290px
    :z-index 999

    &.loaded
      +opaque

    &.inactive
      :left 20%
      :bottom 60px

      #w14g
        :top -60px
        :-moz-transform scale(0.8)
        :-webkit-transform scale(0.8)

      .screen_name_input
        :width 260px
        :padding 6px
        :font-size 22px
        :left 170px

      .screen_name_label
        :left 150px
        :font-size 22px

    @media screen
      @media (max-height: 500px)
        :bottom 50px

    #w14g
      :position absolute
      :top -70px
      :left 80px
      :width 485px
      :height 91px
      :background url('../images/w14g.png')

    .screen_name_label
      :position absolute
      :left 80px
      :top 10px
      :font-size 40px
      :color #fff
      :font-weight bold
      :text-shadow 3px 3px 5px #8fcaf7
      :filter dropshadow(color=#8fcaf7, offx=3, offy=3)

    .screen_name_input
      :position absolute
      :left 120px
      :font-size 30px
      :font-style italic
      :color #BBB
      :border 0
      :width 340px
      :padding 10px
      :border-radius 10px
      :box-shadow 3px 3px 5px #99c0e5
      :-moz-box-shadow 3px 3px 5px #99c0e5
      :-webkit-box-shadow 3px 3px 5px #99c0e5

.cloud
  :position absolute
  :top 10%
  :left -30%
  :width 300px
  :height 122px
  :background url('../images/cloud.png')

  :-webkit-animation-name cloud-fly
  :-webkit-animation-iteration-count 1
  :-webkit-animation-timing-function linear
  :-webkit-animation-duration 120s

  :-moz-animation-name cloud-fly
  :-moz-animation-iteration-count 1
  :-moz-animation-timing-function linear
  :-moz-animation-duration 120s

.cloud.two
  :background url('../images/cloud2.png')
  :width 250px
  :height 116px

.cloud.three
  :background url('../images/cloud3.png')
  :width 300
  :height 126px

#country
  :position relative
  :height 38%
  :background url('../images/gras.jpg') #619518

#spread
  :position absolute
  :top 100%
  :background url('../images/spread.png')
  :width 800px
  :height 800px
  :margin -400px auto 0 auto
  :z-index 10

  :-webkit-animation-name spin
  :-webkit-animation-iteration-count infinite
  :-webkit-animation-timing-function linear
  :-webkit-animation-duration 120s

  :-moz-animation-name spin
  :-moz-animation-iteration-count infinite
  :-moz-animation-timing-function linear
  :-moz-animation-duration 120s

#brain
  :position absolute
  :top 0
  :left 50%
  :background url('../images/brain.png') top left no-repeat
  :width 200px
  :height 179px
  :margin-left -100px
  :margin-top -80px
  :z-index 900

#html5
  :position absolute
  :bottom 30px
  :right 10px
  :z-index 800
  :background url('../images/html5.png')
  :width 100px
  :height 100px
  :z-index 900

.cow
  :position absolute
  :top 10%
  :left 25%
  :height 104px
  :width 145px
  :background url('../images/cow.png')
  :z-index 801

.cow.two
  :background url('../images/cow2.png')
  :top 25%
  :left 70%
  :height 97px
  :width 174px

#truck
  :position absolute
  :top -20%
  :left 5%
  :background url('../images/truck.png')
  :width 177px
  :height 120px
  :z-index 800

#country_underground_trans
  :background url('../images/country_underground_trans.jpg') #8f5628
  :height 86px

#underground
  :background url('../images/underground.jpg') #8f5628
  :color #fff
  :margin-top -1px
  :text-shadow #000 1px 1px 3px
  :padding-bottom 100px

  h1
    :color #262210
    :text-shadow #998940 -1px -1px 1px
    :font-size 36px
    :font-weight bold
    :margin-bottom 15px
    :text-align left

    a
      :display inline
      :font-size 14px
      :padding 0 0 0 10px
      :text-decoration none
      :cursor pointer

#profile
  +transparent
  +transition
  :font-size 80%
  :text-align left
  :padding 10px
  :width 400px
  :height 230px
  :border-radius 10px
  :-moz-border-radius 10px

  &.loaded
    +opaque

  img
    :border 5px solid #fff
    :border-bottom 15px solid #fff
    :float left
    :margin 0 30px 30px 20px
    :transform rotate(-5deg)
    :-webkit-transform rotate(-5deg)
    :-moz-transform rotate(-5deg)
    :-moz-box-shadow 4px 4px 4px #262210
    :-webkit-box-shadow 4px 4px 4px #262210
    :box-shadow 4px 4px 4px #262210

  p.description
    :font-style italic
    :margin 5px 0

  .profile-details
    :margin-left 110px

#report
  :width 80%
  :margin 0 auto

.tweet-graph
  :float right
  :margin-top 10px

.word-cloud
  :margin 30px auto
  :clear both
  :margin-top 30px

.tweets-collection
  :margin 20px auto

  .tweet
    :background-color #262210
    :padding 10px
    :margin-bottom 20px
    :border-radius 10px
    :-moz-border-radius 10px
    :text-align left