active_skin.sass

@import url('//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&subset=latin,latin-ext')
$skinTextColor: #1e2a33 !default
$skinTextActiveColor: #fff !default
$skinTextTable: #7f8c8d !default
$skinActiveColor: #e73c3c !default
$skinHeaderBck: #1e2a33 !default
$skinHeaderTextColor: #FFFFFF !default
$skinFontFamily: 'Source Sans Pro', sans-serif !default
$panelHeaderBck: #2c3e50 !default
$panelHeaderTextColor: #FFFFFF !default
$skinLogo: #fff image-url("active_skin/default_logo.png") no-repeat 30px 0 !default

html
  background: #ecf0f1
  font-family: $skinFontFamily

body.active_admin
  background: #ecf0f1
  font-family: $skinFontFamily
  padding-bottom: 80px

#header
  background: #ecf0f1
  border: none
  text-shadow: none
  height: 40px
  padding: 0
  h1.site_title
    background-color: #fff
    background: $skinLogo
    padding-left: 130px
    color: $skinTextColor
    text-indent: -999999px
  a, a:link
    color: $skinTextColor
  ul.tabs
    padding: 0
    font-size: 0
  ul.tabs > li:hover > a, ul.tabs > li.current > a
    color: $skinTextActiveColor
    background: $skinActiveColor
    @include rounded(0)
    margin: -10px 0
  ul.tabs > li 
    font-size: 12px
    margin: 0
    a
      padding: 13px 20px
      margin: 0
  ul.tabs > li.has_nested a
    background-position: 93% 50%
  ul.tabs > li.has_nested:hover
    a
      @include rounded(0)
      background-color: $skinActiveColor
      border: none
      background-position: 93% 50%
    ul
      background: $skinActiveColor
      @include no-shadow()
      @include rounded(0)
      border: none
      li a
        color: #fff
        &:hover
          color: $skinTextColor
  ul.tabs > li.has_nested.current a
    background-color: $skinActiveColor
    background-position: 93% 50%
  #utility_nav
    background: #fff
    padding: 0
    li#logout a
      font-weight: bold
      text-decoration: underline
      &:hover
        text-decoration: none
    li a
      &:hover
        background: none
        color: $skinTextColor

#title_bar
  background: $skinHeaderBck
  text-shadow: none
  border: none
  padding: 15px 30px
  @include no-shadow()
  border-bottom: 4px solid $skinActiveColor
  margin: 0
  h2
    color: $skinHeaderTextColor
  .action_items a,
  .action_items span.action_item
    & > a, & > .dropdown_menu > a
      @include rounded(0)
      background: $skinActiveColor
      color: #fff
      @include no-shadow()
      text-shadow: none
      border: none
      padding: 17px
      font-size: 14px
      &:hover
        background: lighten( $skinActiveColor, 10% ) !important

#active_admin_content
  @include clearfix
  .table_tools
    height: 30px
  a.table_tools_button, .table_tools .dropdown_menu_button
    @include rounded(0)
    @include no-shadow()  
    color: $skinTextColor
    background: #fff
    padding: 7px 15px
    font-weight: normal
    text-shadow: none
  .table_tools_segmented_control li
    a
      @include rounded(0)
      @include no-shadow()  
      color: $skinTextColor
      background: #fff
      padding: 7px 15px
      font-weight: normal
      text-shadow: none
      border-color: #d3d8dc
      span.count
        color: $skinActiveColor
    &.selected
      a
        color: #fff
        background-color: $skinActiveColor
        span.count
          color: #fff

table.index_table 
  border: 1px solid #d3d8dc
  background: #fff
  th
    background: #f1f5f6
    border: 1px #d3d8dc
    border-style: none solid solid none
    padding: 7px 10px
    @include no-shadow()
    color: $skinTextColor
    a, a:link, a:visited
      color: $skinTextColor
    &:last-child
      border-right: none
  td
    color: $skinTextTable
    a, a:link, a:visited
      color: $skinTextTable
      display: inline-block
      padding: 2px 3px
      margin: -2px 0
      &:hover
        color: #fff
        background: $skinActiveColor
  tr.even td
    background: #ecf0f1

.download_links
  color: $skinTextTable
  font-size: 12px
  a
    color: $skinActiveColor
    font-weight: bold
.pagination_information
  font-size: 12px
  color: $skinTextTable
.pagination
  margin-top: -2px
  a, span.page.current
    font-family: $skinFontFamily
    border: 1px solid #d3d8dc
    background: #ecf0f1
    @include no-shadow()
    text-shadow: none
    font-size: 12px
    font-weight: normal
    padding: 4px 6px
    margin-right: 1px
  span.page.current,
  a:not(.disabled):hover
    background: $skinActiveColor
    color: #fff
  span.page.current
    font-weight: 600
  span.page.current:not(.disabled):hover
    background: $skinActiveColor
  .page.gap
    display: none

.sidebar_section.panel
  background: #fff
  border: 1px solid #d3d8dc
  @include no-shadow()
  @include rounded(0)
  form .buttons
    background: #f1f5f6
    margin: 25px -15px -15px
    padding: 10px 15px
  form fieldset
    margin-bottom: 0
  & > h3
    background: $panelHeaderBck
    color: $panelHeaderTextColor
    border: none
    margin: 0
    padding: 8px 15px
    @include no-shadow()
    @include rounded(0)
    text-shadow: none
    font-weight: bold
  .filter_form_field
    label 
      color: #95a5a6
      font-weight: normal
      font-size: 13px
      text-transform: uppercase
      font-family: $skinFontFamily
      padding: 7px 0

#footer
  position: fixed
  bottom: 0
  left: 0
  right: 0
  background: #fff
  padding: 15px 30px
  font-size: 13px
  color: $skinTextTable
  border-top: 1px solid #d3d8dc
  p
    margin: 0
    padding: 0


form input[type=submit],
a.button, 
a:link.button, 
a:visited.button
  @include no-shadow()
  @include rounded(0)
  background: $skinActiveColor
  color: #fff
  border: none
  text-shadow: none
  padding: 10px 20px
  &:hover
    background: lighten( $skinActiveColor, 10% ) !important
form fieldset.buttons li.cancel a, 
form fieldset.actions li.cancel a, 
form.filter_form a.clear_filters_btn
  background: #ecf0f1
  @include no-shadow()
  @include rounded(0)
  text-shadow: none
  padding: 10px 20px
  color: #95a5a6
  &:hover
    background: lighten( #ecf0f1, 5% ) !important

form fieldset.inputs
  background: #fff
  border: 1px solid #d3d8dc
  position: relative
  padding-top: 50px
  @include no-shadow()
  @include rounded(0)
  legend
    border-bottom: 1px solid #d3d8dc
    position: absolute
    top: 0
    span
      background: #f0f4f5
      color: #5E6469
      border: none
      margin: 0
      padding: 8px 15px
      @include no-shadow()
      @include rounded(0)
      text-shadow: none
      font-weight: bold
  ol > li
    label
      padding-top: 7px
      text-transform: uppercase
    &.boolean label
      padding-top: 0px
      margin-bottom: 15px

.panel
  background: #fff
  border: 1px solid #d3d8dc
  position: relative
  @include no-shadow()
  @include rounded(0)
  > h3
    background: #f0f4f5
    color: $panelHeaderBck
    padding: 8px 15px
    @include no-shadow()
    @include rounded(0)
    text-shadow: none
    font-weight: bold
    border-style: none none solid

.attributes_table table th, .attributes_table table td
  padding: 10px 0
  font-family: $skinFontFamily
  color: #95a5a6
.attributes_table table th
  font-weight: normal
  font-size: 13px
  text-transform: uppercase

.comments form.active_admin_comment fieldset.inputs
  border: none

html
  height: 100%
  min-height: 100%
body.logged_out
  height: 100%
  #footer
    display: none
  #content_wrapper 
    margin-top: 150px
    #active_admin_content
      padding-bottom: 0
  #login
    form fieldset
      border: none
    > h2
      background: $panelHeaderBck
      font-family: $skinFontFamily
      color: #fff
      @include no-shadow()
      @include rounded(0)
      padding: 8px 15px
    fieldset.actions
      background: #f1f5f6
      margin: 0 -30px -17px
      padding: 6px 30px
    a
      margin-top: -25px

  .flash
    background: #F2ECBF
    position: absolute
    top: 0
    left: 0
    right: 0
    padding: 15px 
    border-bottom: 1px solid #DEDE8B
    text-shadow: none


form input[type=text], 
form input[type=password], 
form input[type=email], 
form input[type=number], 
form input[type=url], 
form input[type=tel], 
form textarea
  @include rounded(0)
  font-family: $skinFontFamily
  padding: 5px 10px

form.filter_form .filter_form_field.filter_date_range input[type=text]
  background-position: 100% 4px


body.logged_in 
  .flashes 
    .flash
      position: inherit
      top: 0
      text-shadow: none

strong, b
  font-weight: 600

.blank_slate_container .blank_slate
  color: #7f8c8d

form fieldset > ol > li fieldset ol li
  clear: both
  select
    margin-top: 6px