// IMPORT FILES, VARIABLES & @FONT-FACE

@import "compass"


$color1: #d13d2e
$color2: #97968c
$color3: #ffffff
$color5: #7e1313
$color6: #22783b
$color7: #5eba67

@font-face
  font-family: 'BebasNeue'
  src: asset-url('BebasNeue-webfont.eot','fonts')
  src: asset-url('BebasNeue-webfont.eot?#iefix','fonts') format('embedded-opentype')
  src: asset-url('BebasNeue-webfont.woff','fonts') format('woff')
  src: asset-url('BebasNeue-webfont.svg#BebasNeue','fonts') format('svg')
  src: asset-url('BebasNeue-webfont.ttf','fonts') format('truetype')
  font-weight: normal
  font-style: normal

// DEFAULT STYLES

html
  height: 100%
  padding: 0
  margin: 0
  background: image-url("html-bg.png") repeat 0 0

  @media screen and (max-width: 600px)
    body
      background: image-url("body-bg.png") repeat-x 0 -40px
      padding: 0 10px

body.connection-mode
  background: image-url("body-bg.png") repeat-x 0 -120px
  .container
    header
      height: 80px
      background: image-url("header-dashboard-glow-bg.png") no-repeat 180px 16px
      margin: 10px 0 20px 0
      h1.small-logo
        width: 181px
        height: 68px
        margin: 0 20px 0 0
        font-family: "BebasRegular", Helvetica, Arial, sans-serif
        font-weight: normal
        letter-spacing: 1px
        float: left
        a, a:hover
          background: image-url("small-logo.png") no-repeat 0 0
          width: 181px
          height: 68px
          display: block
          @include transition(none)

@media screen and (max-width: 600px)
  body.connection-mode .container header h1.small-logo
    margin: 0 auto 20px auto
    float: none
  .content
    float: left
    width: 100%
  body.connection-mode .container header
    height: 70px
    background: none
    ul.nav
      position: absolute
      top: 10px
      right: 10px

body .container .content #main-content input#user_remember_me
  width: auto
  height: auto
  display: block
  padding: 0
  background: none

body
  height: 100%
  padding: 0 40px
  margin: 0
  font: 62.5% Helvetica, Arial, sans-serif
  background: image-url("body-bg.png") repeat-x 0 0
  .alert .close
    position: relative
    top: 5px
    right: 20px
    font-size: 4em
    color: $color3
    opacity: 1
    filter: alpha(opacity=100)
    display: block
    padding: 0px 1px 9px 0px
    width: 40px
    height: 40px
    @include border-radius (20px 20px 20px 20px)

  .alert
    padding: 40px 0px 40px 0px
    @include text-shadow(none)
    @include border-radius (0px 0px 0px 0px)
    border: none
    color: $color3
    text-align: center
    z-index: 100
    width: 100%
    position: absolute
    bottom: 0
    left: 0px
    margin: 0
    p
      padding: 0
      margin: 0
      text-align: center
      font-size: 4.0em
      font-weight: bold
      text-transform: uppercase
      color: $color3
      line-height: inherit

  .alert.alert-danger, .alert.alert-error
    background-color: $color1
    .close
      background: $color5
  .alert.alert-success, .alert.alert-info
    background-color: $color7
    .close
      background: $color6
  @media screen and (max-width: 600px)
    .alert
      padding: 20px 0px 20px 0px
      bottom: inherit
      top: 0
      p
        font-size: 1.6em
      .close
        display: none

  table select, table input
    margin: 2px 0 0 0
  select
    max-width: 210px
    min-width: 100px
  p, label, .help-block
    color: $color2
  .tab-content-inner
    margin: 0 0 20px 0

  .hide
    position: absolute
    left: -15000px

  .clear
    clear: both

  form .clearfix
    margin: 0 0 20px 0
  form .checkbox-inner
    padding: 0 0 0 95px
  .col-box
    width: 48%
    float: left
    margin: 0 4% 0 0
    select
      width: 110px
  .col-box2
    width: 48%
    float: left
    select
      width: 110px
  .help-inline
    font-size: 13px
    color: $color1
    width: 100%
    text-align: center
  &.connection-mode .help-inline
    width: auto
    text-align: left
    padding-bottom: 8px
  @media screen and (max-width: 1040px)
    .col-box
      width: 100%
      float: none
      margin: 0
    .col-box2
      width: 100%
      float: none
  .container
    min-height: 100%
    width: 100%
    margin: 0 auto
    .input.checkbox-btn
      float: left
    label.checkbox-style1
      padding: 0 0 0 10px
      font-size: 1.3em
      line-height: 140%
      float: left
      width: inherit
      text-align: right
      color: $color2
    input.btn
      height: 30px
    .alert-success
      background-color: #DFF0D8
      border-color: $color6
      p
        color: $color6
        margin: 0
    .alert-error
      background-color: #eee
      border-color: $color1
      p
        color: $color1
        margin: 0
    .alert-info
      background-color: #b1d3ed
      border-color: #2986ce
      p
        color: #2986ce
        margin: 0
    .btn.btn-success
      color: $color6
      //border: 1px solid $color6
    .btn.btn-danger
      color: $color1
      //border: 1px solid $color1
    .btn, #autoreload-status
      height: 10px
      padding: 8px 10px 10px 10px
      margin: 0
      font-family: "BebasNeue", Helvetica, Arial, sans-serif
      font-weight: normal
      letter-spacing: 1px
      text-transform: uppercase
      color: $color2
      line-height: 14px
      @include text-shadow (rgba($color3, 1) 0px 1px 1px)
      @include border-radius (5px 5px 5px 5px)
      @include background-image(linear-gradient(top, #f5f4f0, #d1cfc1))
      border: 1px solid $color2
      &:hover
        @include background-image(linear-gradient(bottom, #f5f4f0, #d1cfc1))
        background-position: 0 0
    #autoreload-status
      @include background-image(linear-gradient(bottom, #f5f4f0, #d1cfc1))
      float: right
      text-align: center
      font-size: 1.3em
      span
        color: $color1
    .btn-box
      position: relative
      z-index: 2
      float: right
      font-size: inherit
      font-family: inherit
      margin-top: 1px
      background: image-url("mask-title-bg.png") repeat-x 0 5px
      padding: 0 0 0 9px
      .btn.pull-right
        height: 10px
        padding: 8px 10px 10px 10px
        margin: 0
        font-family: "BebasNeue", Helvetica, Arial, sans-serif
        font-weight: normal
        letter-spacing: 1px
        text-transform: uppercase
        font-size: 0.6em
        color: $color3
        line-height: 14px
        @include background-image(linear-gradient(top, #e85b45, #d23e2f))
        background-color: #d23e2f
        @include text-shadow (rgba($color5, 1) 0px 1px 1px)
        @include border-radius (5px 5px 5px 5px)
        border: 1px solid #c42f17
        &:hover
          @include background-image(linear-gradient(bottom, #e85b45, #d23e2f))
          background-position: 0 0
    .btn-group
      position: relative
      z-index: 2
      float: right
      font-size: inherit
      font-family: inherit
      margin-top: 1px
      background: image-url("mask-title-bg.png") repeat-x 0 5px
      padding: 0 0 0 9px
      .btn.dropdown-toggle
        height: 10px
        padding: 8px 10px 10px 10px
        margin: 0
        font-family: "BebasNeue", Helvetica, Arial, sans-serif
        font-weight: normal
        letter-spacing: 1px
        text-transform: uppercase
        font-size: 0.6em
        color: $color3
        line-height: 14px
        @include background-image(linear-gradient(top, #e85b45, #d23e2f))
        background-color: #d23e2f
        @include text-shadow (rgba($color5, 1) 0px 1px 1px)
        @include border-radius (5px 5px 5px 5px)
        border: 1px solid #c42f17
        &:hover
          @include background-image(linear-gradient(bottom, #e85b45, #d23e2f))
          background-position: 0 0
        span.caret
          width: inherit
          float: none
          padding: 0
          border-top: 4px solid $color3
          opacity: 1
          filter: alpha(opacity=100)
          margin-top: 5px
      .dropdown-menu
        left: inherit
        right: 0
        background-color: $color3 !important
        li
          a
            font-family: Helvetica, Arial, sans-serif
            font-size: 0.5em
            text-transform: none
            text-align: right
            color: $color2
            &:hover
              background-color: $color1
              color: $color3
    .pagination
      margin: 0 0 20px 0
      height: inherit
      float: left
      ul
        @include border-radius (0 0 0 0)
        @include box-shadow (none)
        border: none
        li
          a
            cursor: pointer
            height: 10px
            padding: 8px 10px 10px 10px
            margin: 0 10px 0 0
            font-family: "BebasNeue", Helvetica, Arial, sans-serif
            font-weight: normal
            letter-spacing: 1px
            text-transform: uppercase
            color: $color2
            line-height: 14px
            font-size: 1.3em
            @include text-shadow (rgba($color3, 1) 0px 1px 1px)
            @include border-radius (5px 5px 5px 5px)
            @include background-image(linear-gradient(top, #f5f4f0, #d1cfc1))
            border: 1px solid $color2
            &:hover, &.active
              @include background-image(linear-gradient(bottom, #f5f4f0, #d1cfc1))
              background-position: 0 0
            &.active
              color: $color1
    .nav-tabs
      border-bottom: 1px solid #FFFDF0
      background-color: none
      li.active a,  li.active a:hover
        color: $color1
        background-color: #FFFDF0
        border: 1px solid #FFFDF0
        border-bottom-color: transparent
    .nav-pills
      float: right
      margin: 0
      @media screen and (max-width: 600px)
        li.logout a
          padding: 8px 5px 10px 5px
      li
        margin: 0 0 0 10px
        a
          height: 10px
          padding: 8px 10px 10px 10px
          margin: 0
          font-family: "BebasNeue", Helvetica, Arial, sans-serif
          font-weight: normal
          letter-spacing: 1px
          text-transform: uppercase
          font-size: 1.6em
          color: $color3
          @include background-image(linear-gradient(top, #e85b45, #d23e2f))
          background-color: #d23e2f
          @include text-shadow (rgba($color5, 1) 0px 1px 1px)
          @include border-radius (5px 5px 5px 5px)
          border: 1px solid #c42f17
          &:hover
            @include background-image(linear-gradient(bottom, #e85b45, #d23e2f))

    #main-content
      width: 300px
      margin: 0 auto
      p
        color: $color2
        text-align: center
        margin: 0 0 15px 0
        &.small
          font-size: 1.1em
      a
        color: $color2
        text-decoration: none
        border-bottom: 1px solid $color2
        &:hover
          border: none

      form .input
        margin-left: 0
        width: 100%
      input, textarea
        @include transition(none)
        @include box-shadow(none)
      input
        display: block
        width: 280px
        height: 16px
        padding: 19px 10px 15px
        font-size: 1.4em
        line-height: 140%
        color: $color2
        text-align: center
        border: none
        @include border-radius(none)
        background: transparent image-url("input-txt-bg.png") no-repeat 0 0
        &:focus
          background: transparent image-url("input-txt-bg.png") no-repeat 0 -50px
      input.btn
        height: 50px
        padding: 5px 10px 0px 10px
        margin: 0 10px 0 10px
        font-family: "BebasNeue", Helvetica, Arial, sans-serif
        font-weight: normal
        text-transform: uppercase
        font-size: 2em
        color: $color3
        @include text-shadow (rgba($color5, 1) 0px 1px 1px)
        background: image-url("input-btn-bg.png") no-repeat 0 0
        &:hover
          background: image-url("input-btn-bg.png") no-repeat 0 -50px
      label
        padding: 0 0 0 20px
        font-size: 1.3em
        line-height: 140%
        float: left
        width: inherit
        text-align: right
        color: $color2


    h2
      font-family: "BebasNeue", Helvetica, Arial, sans-serif
      font-weight: normal
      color: $color1
      font-size: 2.6em
      text-transform: uppercase
      margin: 0 0 15px 0
      position: relative
      span.first, span.last
        display: block
        background: image-url("main-title-bg.png") repeat-x 0 5px
        height: 20px
        width: 100px
        display: block
        margin: 0
        padding: 0
      span.line
        display: block
        background: image-url("main-title-bg.png") repeat-x 0 5px
        height: 20px
        width: 100%
        display: block
        margin: 0
        padding: 0
        position: absolute
        z-index: 1
        top: 1px
        right: 0
      &.welcome
        width: 300px
        margin: 0 0 5px 0
      &.forgot
        width: 300px
        margin: 0 0 5px 0
        span
          width: 225px
        span.first, span.last
          width: 28px
      span
        float: left
        width: 82px
        text-align: center
        padding: 0 9px 0 9px
      span.title
        float: left
        width: inherit
        text-align: center
        background: image-url("mask-title-bg.png") repeat-x 0 6px
        z-index: 2
        position: relative
        padding: 0 9px 0 0
      span.last
        float: right
      span
        padding: 0 9px 0 9px

    header
      height: 345px
      background: image-url("header-glow-bg.png") no-repeat 50% 40px
      margin: 0 0 10px 0
      h1.logo
        width: 381px
        height: 322px
        margin: 25px auto 0 auto
        font-family: "BebasRegular", Helvetica, Arial, sans-serif
        font-weight: normal
        a
          background: image-url("large-logo.png") no-repeat 0 10px
          width: 381px
          height: 322px
          display: block
          @include transition(0.3s)
          &:hover
            background: image-url("large-logo.png") no-repeat 0 0
    @media screen and (max-width: 600px)
      header
        height: 200px
        background: image-url("header-glow-smartphone-bg.png") no-repeat 50% 0
        h1.logo
          width: 229px
          height: 187px
          a, a:hover
            background: image-url("large-logo-smartphone.png") no-repeat 0 0
            width: 229px
            height: 187px

  .topbar a.brand
    padding: 4px 20px

  .container-fluid > .content
    margin-left: 0

  a.back
    background: image-url("buttons/back.png") no-repeat center left
    +link-colors(#000000)
    +hover-link
    padding-left: 20px
    line-height: 16px
    height: 16px
    display: block
    margin: 25px 0
  th.final-result, td.final-result
    border-left: 2px solid #D1CFC1 !important
    border-right: 1px solid #D1CFC1 !important
  td.final-result
    background: #fffffa
  tr:nth-child(odd) td.final-result
    background: #ffffee !important
  .table-bordered
    border: none

  .table-bordered.table-striped
    border-collapse: separate
    *border-collapse: collapsed
    @include border-radius (5px 5px 5px 5px)
    th, td
      border-left: 1px solid #D1CFC1

  .table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th
    background-color: #f8f8f3
  .table-striped tbody tr td:nth-child(1),
  .table-striped thead tr th:nth-child(1),
  .table-striped tfoot tr td:nth-child(1)
    border-left: none
  table tr
    background: none
    .center-col
      text-align: center
    td
      vertical-align: middle
      form
        margin-bottom: 0
    td.small-col, th.small-col
      width: 1px
      white-space: nowrap
    td.result-col, th.result-col, td.result-cell
      white-space: nowrap
      text-align: center

  table.small-table
    width: 1px

  .actions
    height: 28px
    .main-action
      float: left
    .other-actions
      float: left
      margin-left: 100px

  .or
    font-style: italic
    text-align: center

  .login-logo
    float: left
  .login-content
    float: left
    margin-left: 30px
    height: 312px
    h2
      margin-top: 20px
      margin-bottom: 40px
    .actions
      position: absolute
      bottom: 0
      background: none
  .spacer-footer
    clear: both
    height: 80px

.ms-container .ms-selectable, .ms-container .ms-selection
  width: 45%
  border: none
.ms-container h3
  margin: 0
  padding: 15px 10px
  @include background-image(linear-gradient(top, #f5f4f0, #d1cfc1))
  color: $color2
  font-size: 1.3em
  text-align: center
  //border: 1px solid $color2
  @include border-radius (5px 5px 0px 0px)
  @include text-shadow (rgba($color3, 1) 0px 1px 1px)

.ms-container .ms-selectable
  margin-right: 10%

#musical.modal
  padding: 20px
  background: black
  overflow: hidden
  iframe
    overflow: hidden

.ms-container .ms-selectable li.ms-elem-selectable, .ms-container .ms-selection li.ms-elem-selected
  padding: 10px 0
  color: $color5
  text-align: center
  font-size: 1.2em
.ms-container li.ms-elem-selectable:not(.disabled):hover, .ms-container .ms-selection li:not(.disabled):hover
  color: $color1
.ms-container ul.ms-list
  width: 100%
  height: inherit
  padding: 0
.ms-container
  background-position: 50% 15px
.ms-container .ms-selection li:not(.disabled):hover
  background-color: #EEE
  background-image: none
body .container h2 span.hide-responsive
  float: none
  width: inherit
  text-align: inherit
  padding: 0
.show-responsive
  display: none
@media screen and (max-width: 600px)
  .hide-responsive
    display: none
  .show-responsive
    display: block

table input.span1
  text-align: center

@media screen and (max-width: 600px)
  body div#commands-list-tab.tab-content-inner
    display: none
  body div#users-list-tab.tab-content-inner
    display: none
  body div#builds-list-tab.tab-content-inner
    table tbody td.result-cell, table thead th.non-responsive
      display: none
  th.result-col
    @include border-radius(0 4px 0 0)
  .table-bordered tbody:last-child tr:last-child td.result-col
    @include border-radius(0 0 4px 0)
  body .container table tbody tr td a.btn
    margin: 3px 0 0 0
  body .pagination ul li a
    display: none
  body .pagination ul li a.active, body .pagination ul li.prev a,  body .pagination ul li.next a
    display: block

table td span.status a
  text-decoration: none
  border-bottom: none

.tab-content
  overflow: inherit

.commit-hash
  font-weight: bold

table
  @include box-shadow (0 15px 10px -10px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 30px rgba(0, 0, 0, 0) inset)
  width: 100%
  background-color: $color3
  //border: 1px solid $color2
  margin: 0 0 20px 0
  img
    width: 32px
    height: 32px
  .project-status
    text-align: center
  thead
    @include background-image(linear-gradient(top, #f5f4f0, #d1cfc1))
    border-bottom: 1px solid $color2
    tr
      @include background-image(linear-gradient(top, #f5f4f0, #d1cfc1))
    th
      padding: 15px 10px
      color: $color2
      @include text-shadow (rgba($color3, 1) 0px 1px 1px)
      font-size: 1.3em
    th.status, th.result-col
      width: 10%
      text-align: center
  tr
    background-color: $color3
  td, th
    //border-right: 1px solid $color2
    text-align: left
    padding: 7px 10px 7px 10px
    font-size: 1.2em
    color: $color2
    a
      color: $color5
      &:hover
        color: $color1
        text-decoration: none
        border-bottom: 1px solid $color1

pre
  background: #333
  color: whiteSmoke
  .red
    color: #f43
  .green
    color: #0a0
  .blue
    color: blue
  .yellow
    color: yellow
  .magenta
    color: magenta
  .cyan
    color: cyan

// FOOTER

footer
  height: 4px
  margin: -41px 0 0 0
  border: none
  padding: 0

  #footer-inner
    height: 40px
    position: relative
    width: 100%
    margin: 0 auto
    border-top: 1px solid #fffdf0

    .copyright
      padding: 14px 0 0 0
      font-size: 1.1em
      color: $color2
      span.copy
        font-weight: bold
      a
        color: $color2

    a.belighted
      width: 92px
      height: 24px
      display: block
      background: url('logo-belighted.png') no-repeat 0 0
      position: absolute
      top: 11px
      right: 0
      &:hover
        background-position: 0 -24px
@media screen and (max-width: 600px)
  body footer
    height: 95px
    #footer-inner
      height: 95px
      .copyright
        padding: 14px 0 0 0
        font-size: 1.1em
        color: $color2
        text-align: center
        span.copy
          font-weight: bold
          display: block
        span.sep
          display: none
        a
          color: $color2

      a.belighted
        width: 92px
        height: 24px
        display: block
        background: url('logo-belighted.png') no-repeat 0 0
        position: relative
        top: inherit
        right: inherit
        margin: 0 auto
        &:hover
          background-position: 0 -24px


















