admin.sass

=sans-serif-font
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif

=serif-font
  font-family: Georgia, "Times New Roman", Times, serif

$text_color: #44484d
$nav_bar_color: #464646
$bg_color: #ebebeb
$link_color: #30a4b1
$hover_color: #f7941d
$border_color: #b9b9b9
$content_bg_color: white

body
  +sans-serif-font
  font-size: 12px
  background-color: $bg_color
  color: $text_color

p
  margin: 10px 0

a
  color: inherit
  text-decoration: inherit
  cursor: inherit
  color: $link_color
  &:hover
    color: $link_color - 50

a.button, button, input[type=submit]
  color: $link_color
  background-color: $border_color + 60
  display: inline-block
  font-weight: bold
  font-size: 12px
  line-height: 15px
  text-decoration: none
  background-repeat: no-repeat
  background-position: 8px center
  padding: 6px 10px
  border: 1px solid $border_color
  -moz-border-radius: 4px
  -webkit-border-radius: 4px
  border-radius: 4px
  &.add
    padding-left: 30px !important
    background-image: url(/images/buttons/add.gif)
  &.delete
    padding-left: 30px !important
    background-image: url(/images/buttons/delete.gif)
  &.alert
    padding-left: 30px !important
    background-image: url(/images/buttons/alert.gif)
  &.info
    padding-left: 30px !important
    background-image: url(/images/buttons/info.gif)
  &:hover
    color: $link_color - 50
    background-color: $border_color + 45

button
  width: auto
  overflow: visible
  padding: 5px 10px 4px 7px
  &[type]
    padding: 5px 10px 5px 7px
    line-height: 17px

*:first-child+html button[type]
  padding: 5px 10px 4px 7px

.flash
  border: 1px solid
  margin: 10px 0px
  padding: 10px 10px 10px 36px
  background-repeat: no-repeat
  background-position: 10px center
  -moz-border-radius: 4px
  -webkit-border-radius: 4px
  border-radius: 4px

.notice
  color: #00529b
  background-color: #bde5f8
  background-image: url("/images/statuses/notice.png")

.success
  color: #4f8a10
  background-color: #dff2bf
  background-image: url("/images/statuses/success.png")

.warning
  color: #9f6000
  background-color: #feefb3
  background-image: url("/images/statuses/warning.png")

.failure
  color: #aa000c
  background-color: #ffbaba
  background-image: url("/images/statuses/failure.png")

table
  width: 100%
  border-collapse: collapse
  border: 1px solid $border_color
  margin: 15px 0
  th, td
    padding: 10px
    border-bottom: 1px solid $border_color
  th
    background-color: $border_color + 30
    font-weight: bold
    text-transform: uppercase
    text-align: left
  td.warn, td.new
    color: #9f6000
    background-color: #feefb3
    background-image: url("/images/statuses/warning.png")
    padding-left: 36px
    background-repeat: no-repeat
    background-position: 10px center
  tr
    &.even
      background-color: $border_color + 60
    &.ui-sortable-placeholder
      display: block
      height: 35px
  th.sortable
    &.current
      background-color: #c5c5c5
    a
      padding-right: 16px
      background-repeat: no-repeat
      background-position: right center
    &.asc a
      background-image: url("/images/arrow-up.gif")
    &.desc a
      background-image: url("/images/arrow-down.gif")
    a
      display: block

// jQuery UI adjustments

.ui-sortable
  tr
    cursor: row-resize
    a
      cursor: pointer

// Timepicker plugin
#ui-timepicker-div
  dl
    text-align: left
    dt
      height: 25px
    dd
      margin: -25px 0 10px 65px

#document
  width: 960px
  position: relative
  left: 50%
  margin-left: -480px

#header
  h1
    color: $text_color
    font-weight: bold
    font-size: 20px
    line-height: 20px
    text-transform: uppercase
    margin: 10px 0

#navigation
  margin-bottom: 15px
  background-color: $nav_bar_color
  ul
    margin: 0
    padding: 0
    border: 0
    overflow: hidden
    display: block
    font-size: 15px
    line-height: 15px
    li
      list-style-type: none
      margin-left: 0px
      white-space: nowrap
      display: inline
      float: left
      margin: 0
      padding: 0
      a
        color: $bg_color
        display: block
        padding: 10px
        text-transform: uppercase
        text-decoration: none
        &:focus, &:hover
          background-color: $hover_color
        &:active
          background-color: $hover_color - 50
      &.current
        background-color: $link_color

#subheader
  background-color: $content_bg_color
  border-bottom: 1px solid $border_color
  padding: 15px
  margin: -15px -15px 15px -15px
  position: relative
  color: #555555
  h2
    +serif-font
    font-size: 18px
    font-weight: bold
    font-style: italic
    margin: 0
  div.search
    position: absolute
    right: 12px
    top: 9px
    input
      background-color: #fcfcfc
      font-size: 15px
      border: 1px solid $border_color
      padding: 4px

#content
  background-color: $content_bg_color
  border: 1px solid $border_color
  padding: 15px
  .mod
    text-align: right
    form
      display: inline

form
  p
    margin: 20px 0
    display: relative
  fieldset
    margin: 0 0 10px 0
    padding: 10px
    border: 1px solid $border_color
  label
    font-weight: bold
    text-transform: uppercase
    font-size: 13px
    &.error
      display: block
      width: 200px
      text-transform: none
      font-size: 10px
      border: 1px solid #9f6000
      color: #9f6000
      background: #feefb3 url("/images/statuses/warning.png") no-repeat 5px center
      padding: 5px 5px 5px 25px
  input.text, textarea, input[type=text], input[type=password]
    margin-top: 2px
    border: 1px solid $border_color
    padding: 5px
    +serif-font
    font-size: 15px
    width: 500px
    &.error
      border: 1px solid #9f6000
      background-color: #feefb3 + 50
  input.short
    width: 100px
  textarea
    height: 200px
  textarea.short
    height: 50px
  input.datetime
    width: 180px
    background:
      image: url(/images/calendar.png)
      repeat: no-repeat
      position: 168px center
  input.date
    width: 100px
    background:
      image: url(/images/calendar.png)
      repeat: no-repeat
      position: 88px center
  em
    font-style: italic
  li
    list-style: none
    margin: 5px 0
    label
      +serif-font
      font-weight: normal
      font-size: 15px
      text-transform: none
  .text_field, .password_field
    margin: 10px 0
    label
      display: block