// Colours $white: white; $light-white: white; $red: a13f3e; $light-red: ffefef; $yellow: e9d543; $light-yellow: ffffd7; $green: #3f9d5a; $light-green: e9fce7; $blue: #48609d; $light-blue: ebeffd; $cyan: #99d7ff; $light-cyan: e1f7f7; $magenta: af6bd7; $light-magenta: fbefff;

.container-fluid {

padding-top: 15px;

}

colour {

a {
  &:before {
    content: "";
    border: 1px solid transparent;
    padding:6px;
    display: block;
    border-radius: 15px;
  }
  &.colour-white:before { background: $white; }
  &.colour-red:before { background: $red; }
  &.colour-yellow:before { background: $yellow; }
  &.colour-green:before { background: $green; }
  &.colour-cyan:before { background: $cyan; }
  &.colour-blue:before { background: $blue; }
  &.colour-magenta:before { background: $magenta; }
}

}

content {

thead th {
  padding-top: 0;
}

td p {
  margin: 0;

  &.small {
    color: #666;
  }
}

.amount,
tfoot tr > * {
  text-align: right;
}

.credit .amount {
  &:before { content: "($"; }
  &:after { content: ")"; }
}

.debit .amount,
tfoot td {
  &:before { content: "$"; }
}

tr {
  &.colour-white {
    background: $light-white;
  }
  &.colour-red {
    background: $light-red;
  }
  &.colour-yellow {
    background: $light-yellow;
  }
  &.colour-green {
    background: $light-green;
  }
  &.colour-blue {
    background: $light-blue;
  }
  &.colour-cyan {
    background: $light-cyan;
  }
  &.colour-magenta {
    background: $light-magenta;
  }
  > td,
  > th {
    background: inherit;
  }
}

tr.colour-white a.picker,
li.colour-white a {
  background: $white;
}

tr.colour-red a.picker,
li.colour-red a {
  background: $red;
}

tr.colour-green a.picker,
li.colour-green a {
  background: $green;
}

tr.colour-blue a.picker,
li.colour-blue a {
  background: $blue;
}

tr.colour-cyan a.picker,
li.colour-cyan a {
  background: $cyan;
}

tr.colour-magenta a.picker,
li.colour-magenta a {
  background: $magenta;
}

tr.colour-yellow a.picker,
li.colour-yellow a {
  background: $yellow;
}

td.colour {
  width: 20px;
  position: relative;

  a {
    display: block;
    border: 1px solid #eee;
    border-radius: 10px;
    width: 20px;
    height: 20px;

    &:hover {
      border-color: #ddd;
    }
  }

  ul {
    list-style: none;
    position: absolute;
    display: block;
    right: 100%;
    top: 1px;
    margin-bottom: 0;
    width: 167px;
    text-align: right;
    background: white;
    border: 1px solid #eee;
    border-radius: 50px;
    padding: 3px;
    height: 28px;

    li {
      display: inline-block;
      margin-right: 3px;

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

}

footer {

font-size: .8em;
text-align: center;
padding: 20px 0;

}