codecombat/app/styles/base.sass

@import "bootstrap/variables"
@import "bootstrap/mixins"
@import "bootstrap/variables"

html
  background-color: #2f261d

body
  position: absolute !important

// https://github.com/twbs/bootstrap/issues/9237 -- need a version that's not !important
.secret
  display: none

h1 h2 h3 h4
  letter-spacing: 2px

.main-content-area
  box-shadow: 0px 0px 10px
  position: relative
  width: 1024px
  margin: 56px auto 0
  min-height: 600px
  padding: 14px 12px 5px 12px
  @include box-sizing(border-box)

#outer-content-wrapper
  background: #8cc63f url(/images/pages/base/repeat-tile.png) top center

#intermediate-content-wrapper
  background: url(/images/pages/base/sky_repeater.png) repeat-x

#inner-content-wrapper
  background: url(/images/pages/base/background_texture.png) top center no-repeat

#front-summary-points-left
  width: 250px
  margin: 0px 20px 10px 15px

#front-summary-points-left p.lead
  margin-bottom: 5px

#front-screenshot
  width: 710px

.content
  width: 1024px
  margin: 0 auto

.footer
  border-top: 1px solid black
  background-color: #2f261d
  p
    margin: 0
    padding-top: 10px
    padding-bottom: 10px
    text-align: center

  .mixpanel-badge, .firebase-badge
    width: 100px
    margin: 10px 10px 0px

.footer-link-text a
  font-family: 'Bangers', cursive
  font-weight: normal
  font-size: 25px
  letter-spacing: 1px
  color: #ffffff
  cursor: pointer
  margin: 0px 10px
  &:hover
    color: $white

a[data-toggle="modal"]
  cursor: pointer

.share-buttons, .partner-badges
  padding-bottom: 10px
  text-align: center
  @include opacity(0.75)

  &.fade-in
    @include opacity(0)

  &:hover, &:active
    @include opacity(1)
    @include transition(opacity .10s linear)

  .github-star-button
    margin-left: 20px

  &>div
    display: inline-block
    vertical-align: top

.error
  left: 8px

.selectable
  cursor: pointer

.modal-dialog
  padding: 5px
  margin-top: 0px !important
  margin-bottom: 0px !important
  padding-top: 30px
  .background-wrapper
    background: url("/images/pages/base/modal_background.png")
    background-size: 100% 100%
    border: 0
    @include box-shadow(0 0 0 #000)
    //position: absolute
    width: 99%
    
  .background-wrapper.plain
    background: white

  .modal-content
    @include box-shadow(none)
  
  .modal-header
    margin: 0 14px
    padding: 8px 0
    border-bottom-color: #ccc

    .close
      font-size: 28px
      @include opacity(0.60)
      &:hover
        @include opacity(1)

  .modal-footer
    background-color: transparent
    margin: 0 14px
    border-bottom-color: #ccc

// Bigger versions of some Bootstrap icons
// TODO: make the non-white versions of these if we ever need them
.icon.big
  background-image: url(/images/pages/base/glyphicons-simplified.png)

.icon-white.big
  background-image: url(/images/pages/base/glyphicons-simplified.png)

.icon.big, .icon-white.big
  width: 19px
  height: 19px
  line-height: 19px

.icon-pause.big
  background-position: -114px 0px

.icon-play.big
  background-position: -95px 0px

.icon-repeat.big
  background-position: -76px 0px

.icon-volume-off.big
  background-position: -57px 0px

.icon-volume-down.big
  background-position: -38px 0px

.icon-volume-up.big
  background-position: -19px 0px

.icon-cog.big
  background-position: 0px 0px

.loading-screen
  text-align: center
  .progress
    width: 50%
    margin: 0 25%
  .progress-bar
    width: 0%
    transition: width 0.1s ease
    
  .errors .alert
    padding: 5px
    display: block
    margin: 10px auto
    .btn
      margin-left: 10px
  
.modal
  overflow-y: auto !important
  .wait
    h3 
      text-align: center
    .progress
      width: 50%
      margin: 10px auto
    .progress-bar
      width: 100%

table.table
  background-color: white

//.ui-autocomplete
//  z-index: $zindexAutocomplete
  
.ui-slider
  border: 1px solid black
.ui-slider-handle
  border: 1px solid black !important

.flag-cursor
  cursor: crosshair


// Fonts

.header-font
  font-family: $headings-font-family

body[lang='ru'], body[lang|='zh'], body[lang='ja'], body[lang='pl'], body[lang='tr'], body[lang='cs'], body[lang='el'], body[lang='ro'], body[lang='vi'], body[lang='th'], body[lang='ko'], body[lang='sk'], body[lang='sl'], body[lang='bg'], body[lang='he'], body[lang='lt'], body[lang='sr'], body[lang='uk'], body[lang='hi'], body[lang='ur'], 
  h1, h2, h3, h4, h5, h6
    font-family: 'Open Sans Condensed', Impact, "Arial Narrow", "Arial", sans-serif
    text-transform: uppercase
    letter-spacing: -1px !important
    
  .header-font
    font-family: 'Open Sans Condensed', Impact, "Arial Narrow", "Arial", sans-serif !important
    text-transform: uppercase
    letter-spacing: -1px !important
   
@media only screen and (max-width: 800px)
  .main-content-area
    width: 100%
  .content
    width: 100%
    
  .footer-link-text a
    font-size: 17px
    margin-left: 3px
    margin-right: 3px
    
  .share-buttons
    margin-bottom: 20px
  .partner-badges
    display: none

// point the new glyphicons to the fonts in public
  
@font-face
  font-family: 'Glyphicons Halflings'
  src: url("/fonts/glyphicons-halflings-regular.eot")
  src: url("/fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/glyphicons-halflings-regular.woff") format("woff"), url("/fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular") format("svg")