/* CSS file for Stop… Camping Time! */

// Colours
$light-grey: #efefef
$medium-grey: #cfcfcf
$dark-grey: #9f9f9f
$light-red: #cb0000
$dark-red: #990000
$white: #ffffff

/* General classes */
.right
  text-align: right

.float_left
  float: left
  margin-right: 50px

.clear
  clear: both
  padding-top: 10px

.billed
  text-decoration: line-through

.light
  color: $medium-grey

.indent
  padding-left: 20px

.warn
  font-weight: bold
  color: $light-red

/* Basic elements */
a
  text-decoration: none
  color: $dark-red

  &:hover
    text-decoration: underline

body
  font-family: sans-serif
  font-size: 13px
  margin: 0px

h3
  margin: 10px 0px

/* Main layout */
#wrapper
  width: auto
  height: auto
  margin: 10px 10px

#content
  padding: 10px
  border: 1px solid
  background: $light-grey

ol#menu
  list-style: none
  padding: 0px
  margin: 5px

  li
    display: inline
    border: solid black
    border-width: 1px 1px 0 1px
    padding: 5px 10px
    margin: 0px 0.5em 0px 0px

    &.selected
      padding-bottom: 6px
      background: $light-grey

/* Table layout */
table
  table-layout: fixed
  padding: 3px 0px
  border-spacing: 0px 4px

  col.amount, col.hours, col.hourly_rate
    width: 100px
  col.reg_hours
    width: 130px
  col.flag
    width: 30px
  col.date
    width: 95px
  col.start_time, col.end_time
    width: 55px
  col.customer, col.name
    width: 150px
  col.task, col.comment
    width: 200px
  col.short_name, col.phone
    width: 120px
  col.address, col.period
    width: 250px
  col.email, col.number
    width: 170px

  th
    padding: 0px 5px
    text-align: left
    background: $dark-grey

  tr
    &:hover
      background-color: $medium-grey

      .light
        color: white

    &.total
      border-top: thin solid black

  td
    padding: 0px 5px
    vertical-align: top
    border: inherit

    &.key
      font-weight: bold
      width: 80px

  input
    width: 90%

  input[type="submit"], input[type="reset"], input[type="checkbox"]
    width: auto

/* Form layout */
form
  ol
    list-style: none
    padding: 1px 10px
    margin: 2px

    label
      width: 180px
      margin: 4px 10px 4px 0px
      float: left

    a, span
      margin: 4px 0px
      display: inline-block

  ol.radio
    margin-left: 195px
    padding: 0px

    label
      float: none

    input
      width: auto

  li
    padding-bottom: 5px
    vertical-align: top

  input[type="text"], select
    width: 250px