@import compass
@import mixins

// Contents:
//   =General
//   =Breadcrumbs
//   =Headings
//   =Navigation
//   =Forms
//   =Tables
//   =Pagination
//   =Misc

$color: #c6c6c6
$bg: #2f2f2f
$link: #0088cc

$warning: #faa732
$success: #5bb75b
$error: #fc5b5e

// ds original: #FB292D
$info: #3a87ad

$input-bg: #666666

// ds default: #444
$input-border: #111111

// default: white
$input-placeholder: #666666
$input-color: white

//=General ========================================
// Everything with the inset panel just extends .well
.well
  +inset-panel-dark

body
  background: $bg
  color: $color

//=Breadcrumbs =======================================
.breadcrumb
  @extend .well
  border: 0
  //over bs
  li
    text-shadow: 0 1px 0 #000
    //over bs

//=Headings ======================================
.page-header
  +horizontal-rule-dark

h1,h2,h3,h4,h5,h6
  color: white

h6
  color: #999

//=Navigation
.nav .dropdown-menu

.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > .open.active > a:hover
  background-color: darken($bg, 5%)
  border-color: $bg $bg transparent $bg

.nav > .dropdown.active >  a:hover
  color: #fff

.nav-tabs .active .dropdown-toggle .caret,
.nav-pills .active .dropdown-toggle .caret
  border-top-color: #fff

.nav-tabs
  border-bottom: 1px solid #666
  & > .active > a,
  & > .active > a:hover
    background-color: $bg
    color: #fff
    border-color: #666 #666 transparent #666
  & > li > a:hover
    border-color: $bg $bg #666666 $bg
    background-color: darken($bg, 5%)
    color: lighten($link, 10%)
  &.nav-stacked
    & > li > a, 
    & > li > a:hover
      border-color: #666

.nav-pills
  & > li > a:hover
    background-color: darken($bg, 5%)
    color: lighten($link, 10%)

.nav-list > li > a,
.nav-list .nav-header
  text-shadow: 0 1px 0 #000

.nav-list > li > a:hover
  background-color: darken($bg, 10%)
  color: lighten($link, 10%)

.nav-list .active
  & > a:hover
    background-color: #0088cc
    color: white

.tabs-below .nav-tabs
  border-top: 1px solid #666

.tabs-left .nav-tabs
  border-right: 1px solid #666

.tabs-right .nav-tabs
  border-left: 1px solid #666

.tabs-below .nav-tabs > li > a:hover
  border-top: 1px solid #666

.tabs-left .nav-tabs > li > a:hover
  border-color: transparent #666 transparent transparent

.tabs-right .nav-tabs > li > a:hover
  border-color: transparent transparent transparent #666

.tabs-below .nav-tabs .active > a,
.tabs-below .nav-tabs .active > a:hover
  border-color: transparent #666 #666 #666

.tabs-left .nav-tabs .active > a,
.tabs-left .nav-tabs .active > a:hover
  border-color: #666 transparent #666 #666

.tabs-right .nav-tabs .active > a,
.tabs-right .nav-tabs .active > a:hover
  border-color: #666 #666 #666 transparent

//=Forms ========================================
+placeholder($input-placeholder)

.input-prepend .add-on,
.input-append .add-on
  background: #444
  color: $color
  border-color: #111
  text-shadow: 0 1px 0  black

label
  color: $color

input,
input[type="file"],
select,
textarea
  color: $input-color
  //background-color: $input-bg;
  border-color: $input-border
  @extend .well

.search-query
  -webkit-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, rgba(0, 0, 0, 0) 0 1px 7px 0px inset

legend
  color: white
  +horizontal-rule-dark

.form-actions
  border-top-color: #222
  background-color: #444

.help-inline
  color: #999

.control-group
  &.warning
    +controls($warning)
  &.success
    +controls($success)
  &.error
    +controls($error)

//=Tables ========================================
.table
  thead
    color: white
  td
    border-top-color: #666

.table-striped
  tbody tr:nth-child(2n+1)
    td, th
      background-color: #444

.table-bordered
  border: 1px solid #666
  th + th,
  td + td,
  th + td,
  td + th
    border-left: 1px solid #666

//=Pagination
.pagination a:hover
  color: lighten($link, 10%)
  background-color: darken($bg, 5%)

.pagination .active a
  color: #fff
  background-color: darken($bg, 5%)

.pagination a
  border-color: #666

//=Pager
.pager a
  background-color: $bg
  border-color: #666
  &:hover
    background-color: darken($bg, 5%)
    color: lighten($link, 10%)

//=Alerts
=alert($color)
  color: #fff
  background-color: $color
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25)
  border-color: darken($color, 25%)
  h4
    color: darken($color, 20%)

.alert
  +alert($warning)

.alert-success
  +alert($success)

.alert-error
  +alert($error)

.alert-info
  +alert($info)

//=Modals

.modal
  background-color: #444

.modal-header
  border-bottom: 1px solid #222

.modal-body p
  color: $color

.modal-footer
  background-color: darken(#444444, 5%)
  border-top: 1px solid #222
  +box-shadow(0 1px 0 #333333 inset)

//=Progress bars
.progress
  @extend .well

//=Misc ========================================
blockquote
  border-left-color: #111
  &.pull-right
    border-right-color: #111

hr
  +horizontal-rule-dark
  border-top: none

code
  @extend .well
  border: none
  //over bs

pre
  @extend .well
  border: none
  //over bs
  color: $color