screen.sass

@import url(http://fonts.googleapis.com/css?family=Oxygen)
// This import applies a global reset to any page that imports this stylesheet.
@import blueprint/reset
// To configure blueprint, edit the partials/base.sass file.
@import partials/base
// Import all the default blueprint modules so that we can access their mixins.
@import blueprint
// Import the non-default scaffolding module.
@import blueprint/scaffolding

// utils
@import "compass/css3/border-radius"
@import "compass/css3/transition"

// To generate css equivalent to the blueprint css but with your
// configuration applied, uncomment:
// @include blueprint

// If you are doing a lot of stylesheet concatenation, it is suggested
// that you scope your blueprint styles, so that you can better control
// what pages use blueprint when stylesheets are concatenated together.
body.bp
  +blueprint-typography(true)
  +blueprint-utilities
  +blueprint-debug
  +blueprint-interaction
  // Remove the scaffolding when you're ready to start doing visual design.
  // Or leave it in if you're happy with how blueprint looks out-of-the-box

.container
  +container
  min-height: 500px
  padding-top: 100px
  //+showgrid

  .title
    color: #CCC
    font-size: 7em
    font-weight: bold
    line-height: 0.6em
    margin-bottom: 10px
    text-align: center
    text-transform: uppercase
    width: 100%

  .sub-title
    color: #CCC
    font-size: 4em
    margin-top: 0px
    text-align: center
    text-transform: uppercase
    width: 100%

.progress-bar
  +border-radius(5px)
  box-sizing: border-box
  border: 2px solid #CCC
  +column(10, true)
  height: 300px
  margin-bottom: 10px
  position: relative
  z-index: 0

  .controller-container
    position: absolute
    height: 25px
    margin: 10px
    z-index: 2
    .play-pause, .view-playlist
      height: 25px
      line-height: 25px
      margin-right: 10px
      float: left

  .progress-bar-inside
    +background(linear-gradient(left , #84A5C2, #37648C))
    +border-radius(5px)
    width: 100%
    height: 100%
    position: absolute
    top: 0
    left: 0
    z-index: 1
    //+single-transition('width', '1s')


  .content-inside
    width: 100%
    height: 100%
    color: #000
    position: relative
    z-index: 2
    text-align: center

    .init-app      
      width: 100%
      margin-top: 100px
      
      p
        font-size: 2em
        font-family: 'Oxygen', sans-serif
        margin-bottom: 0.5em

      .upload-song
        width: 95px

    .timer-seconds
      font-size: 10em
      margin-top: 0.5em

.club-number, .current-song
  color: #666
  font-size: 2em

.club-number
  float: left

.current-song
  float: right

#playlist-dialog
  display: none

  .playlist .current
    font-weight: bold

// elements which are hidden until app is started
.initially-hidden
  display: none!important