﻿body {
  line-height: 18px;
}
body ul {
  line-height: 18px;
}
body ul li {
  line-height: 18px;
}
body h2 {
  line-height: 18px;
  color: maroon;
}
body h3 {
  color: #2AB22A;
}
/******************** Home ********************/
#content {
  overflow: auto;
  padding-bottom: 127px;
  /* must be same height as the footer */
  margin: 0px auto;
  width: 800px;
  padding-left: 10px;
  clear: both;
}
#content h2 {
  color: Maroon;
  font-size: 20px;
}
#content h3 {
  color: #070;
  font-size: 16px;
  font-weight: bold;
  line-height: 1em;
  margin: 4px 0px;
}
#content .container {
  width: 800px;
}
#content .column-one {
  float: left;
  width: 380px;
  padding: 20px 40px 0 0;
}
#content .column-two {
  float: left;
  width: 380px;
  padding: 20px 0 0 0;
}
.column-center {
  width: 380px;
  padding: 20px 0 0 0;
  margin: 0 auto;    
}
#content p,
#content span.action {
  padding-top: 10px;
  padding-bottom: 8px;
  font-size: 13px;
}
#content span.field-validation-error {
  padding: 2px 4px;
  color: red;
  font-style: italic;
  font-size: 12px;
}
#truck {
  width: 380px;
  margin-top: 20px;
  height: 144px;
  background: transparent url("/img/truck.jpg") no-repeat;
}
#bin,
#bag {
  width: 260px;
  height: 128px;
  padding-left: 120px;
  margin-bottom: 20px;
}
#bin h2,
#bag h2 {
  padding-top: 5px;
}
#bin p,
#bag p {
  font-size: 11px;
  line-height: 11px;
  width: 250px;
  padding-top: 4px;
  padding-bottom: 4px;
  margin: 0px;
}
#bin p.price,
#bag p.price {
  font-size: 11px;
  font-weight: bold;
  color: Red;
}
#bin div.more-info,
#bag div.more-info {
  float: right;
  margin-top: 2px;
  margin-right: 10px;
}
#bag {
  background: #8BC53E url("/img/bag.jpg") no-repeat;
}
#bin {
  background: #ABD26C url("/img/bin.jpg") no-repeat;
}
#other p {
  font-size: 11px;
  line-height: 13px;
}
/*************************** About ***********************/
#content div.profile {
  float: left;
  margin-left: 5px;
  color: Maroon;
  margin-top: 35px;
  width: 150px;
  padding-left: 10px;
}
#content div.profile p {
  padding-top: 0px;
}
#content div.profile div.name {
  padding-left: 10px;
}
/*************************** Prices **********************/
table.extraServicesTable {
  font-size: 12px;
  vertical-align: top;
  margin-top: 5px;
}
table td.label-cell {
  color: #2AB22A;
  font-weight: bold;
  width: 100px;
  float: left;
}
table td.label-cell.wide {
  width: 150px;
}
#content p.midget,
span.midget {
  font-size: 10px;
  line-height: 12px;
  color: #888;
  padding-top: 0px;
}
#bin.clear,
#bag.clear {
  background-color: transparent;
  font-size: 12px;
  margin-top: 25px;
}
#bin.clear h2,
#bag.clear h2 {
  padding-top: 0;
}
/****************************** Order ************************/
#details table,
#details {
  width: 100%;
}
#details td.label {
  padding-right: 15px;
  font-weight: bold;
  width: 150px;
}
#details a {
  margin-top: 5px;
}
/***************************** Login ***********************/
div.leftBox h2,
div.forgot h2 {
  color: Maroon;
}
div.login {
  font-size: 14px;
}
div.login a {
  margin-top: 3px;
}
div.login .control-group {
  margin-bottom: 4px;
}
div.login .control-group .control-label
{
    text-align: left;
}
div.forgot {
  margin-top: 40px;
}
div.forgot input[type="text"] {
  width: 310px;
  height: 19px;
}
div.forgot a {
  margin-top: 1px;
}
div.leftBox {
  margin-top: 20px;
}
ul.list {
  font-size: 12px;
  padding-left: 40px;
  margin-top: 5px;
}
/********************************* Customer home *******************/
#calendar table {
  margin-top: 20px;
  border: 1px solid #DDD;
  border-right: 2px solid #DDD;
  border-bottom: 3px solid #DDD;
}
#calendar td {
  width: 30px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #DDD;
  border-right: 1px solid #DDD;
}
#calendar thead {
  color: #2AB22A;
}
#calendar td.day-header {
  font-size: 9px;
  height: 11px;
}
#calendar td.faded {
  color: #CCC;
}
#calendar td.pickup {
  color: red;
  background: url('/img/pickup.png');
}
#calendar td.pickup.skipped {
  color: gray;
  background: url('/img/pickup-skipped.png');
}
/**************** Customer Account ******************/
table.details,
table.details input[type=text] {
  width: 100%;
}
table.details textarea {
  width: 100%;
}
table.details td.label-cell {
  width: 130px;
}
table.details td {
  padding-top: 4px;
}
table.details div.radioItems {
  padding: 5px 10px 5px 0px;
}
table.details div.radioItems input,
table.details input[type=checkbox] {
  margin-right: 4px;
  margin-left: 10px;
}
table.password td.label-cell {
  width: 180px;
}
table.details a,
table.password a,
div.alert-setting a {
  float: right;
  margin-top: 8px;
}
div.alert-setting {
  margin-left: 20px;
}
div.alert-setting label,
div.alert-setting {
  font-size: 12px;
  padding: 4px;
}
div.alert-setting.disabled,
label.disabled {
  color: Gray;
}
#content p.address {
  font-size: 16px;
  padding-left: 20px;
}
div.postalAddress {
  width: 100%;
}
.input-validation-error {
  border: 1px inset red;
  padding: 1px;
}
.validation-summary-errors {
  padding: 5px;
  border: 1px solid red;
  margin: 0;
  font-size: 12px;
}
.validation-summary-errors ul {
  padding-left: 20px;
  font-size: 10px;
}
/**************** Customer Transaction history ******************/
#transactions table th {
  color: #2AB22A;
  text-align: left;
  padding-left: 10px;
  padding-right: 80px;
  background: #f1f1f1;
}
#transactions table td {
  padding-right: 30px;
  padding-left: 10px;
  background: #f1f1f1;
}
#transactions table tr.skipped td {
  background: #EEE;
}
/************************Payment**************************/
table.payment-details {
  font-size: 12px;
}
table.payment-details td:first-child {
  font-weight: bold;
  width: 150px;
}
#content h2.credit {
  color: #2AB22A;
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
  color: #333;
}
/*Opera Fix*/
body:before {
  /* thanks to Maleika (Kohoutec)*/
  content: "";
  height: 100%;
  float: left;
  width: 0;
  margin-top: -32767px;
  /* thank you Erik J - negate effect of float*/
}
/******************* Wrapper for centering ***/
#wrapper {
  min-height: 100%;
  margin: 0 auto;
  width: 100%;
  background: #FFFFFF;
}
/********************  Header  **********/
#header-wrapper {
  margin: 0px;
  width: 100%;
  height: 185px;
  background: url("/img/header-bg-repeat.jpg") repeat-x;
}
#header {
  margin: 0px auto;
  width: 800px;
  height: 185px;
}
#header #title {
  float: left;
  width: 200px;
  background: url("/img/logo.png") no-repeat;
  height: 156px;
  padding-left: 68px;
  color: Maroon;
  margin-top: 29px;
  /*&.xmas
		{
			background: url("/img/xmaslogo.png") no-repeat;
            height: 173px;
            margin-top: 12px;
		}*/
}
#header #title h1,
#header #title span {
  display: none;
}
#header #slogan {
  float: left;
  color: #42A900;
  font-size: 17px;
  margin-left: 30px;
  margin-top: 55px;
}
#header #slogan span {
  padding-right: 80px;
}
#header #sign-in-container {
  float: right;
  margin: 55px 0px auto 5px;
  height: 50px;
  width: 80px;
}
#header #sign-out-container {
  float: right;
  text-align: right;
  margin: 55px 0px auto 5px;
  height: 50px;
  width: 180px;
  font-size: 12px;
}
#header #sign-out-container a {
  font-size: 9px;
}
/********************  Navbar  **********/
#navbar-wrapper {
  width: 100%;
  background: url("/img/navbar-bg.jpg") repeat-x;
}
#navbar {
  width: 800px;
  height: 35px;
  margin: 0px auto;
  z-index: 1;
}
#navbar ul {
  height: 100%;
  list-style-type: none;
  font-size: 12px;
  padding-left: 0px;
}
#navbar ul li {
  display: inline;
  text-decoration: none;
  color: White;
  padding: 8px 10px 8px 10px;
  border-left: 1px solid Maroon;
  position: relative;
  top: 8px;
}
#navbar ul li a,
#customer-navbar ul li a {
  text-decoration: none;
  color: White;
}
#navbar ul li.selected,
#navbar ul li:hover {
  background: url("/img/navbar-selected-bg.jpg") repeat-x;
}
#customer-navbar {
  width: 800px;
  height: 35px;
  margin: 0 auto;
  z-index: 2;
}
#customer-navbar ul li {
  display: inline;
  text-decoration: none;
  color: White;
  padding: 8px 10px 8px 10px;
  border-left: 1px solid #070;
  position: relative;
  top: 8px;
  height: 35px;
  z-index: 1;
}
#customer-navbar ul {
  height: 35px;
  list-style-type: none;
  font-size: 12px;
  padding-left: 0px;
  float: right;
  background: url("/img/customer-navbar-bg.jpg") repeat-x;
}
#customer-navbar ul li.selected,
#customer-navbar ul li:hover {
  background: url("/img/customer-navbar-selected-bg.jpg") repeat-x;
}
div.push {
  clear: both;
  width: 100%;
}
/********************  Footer  **********/
#footer-wrapper {
  position: relative;
  margin-top: -127px;
  /* negative value of footer height */
  clear: both;
  height: 127px;
  width: 100%;
  background: #EDEDED url("/img/footer-bg.jpg") repeat-x;
}
#footer {
  width: 800px;
  margin: 0px auto;
  height: 127px;
}
#footer a {
  text-decoration: none;
  color: inherit;
}
#footer div {
  float: left;
  margin-right: 18px;
  font-size: 11px;
}
#footer div h2 {
  margin: 0px;
  color: Maroon;
  font-weight: bold;
  font-size: inherit;
  padding: 5px 0;
  font-size: 12px;
  line-height: 18px;
}
#footer #splits {
  width: 720px;
}
#footer #splits .splitter {
  height: 55px;
  border-left: 1px solid #BBB;
}
#footer #recycle {
  text-align: center;
  width: 50px;
  margin-right: 10px;
  color: #070;
  font-size: 9px;
  line-height: 11px;
}
#footer #contact {
  width: 95px;
}
#footer #email {
  width: 162px;
}
#footer #address {
  width: 127px;
}
#footer #payment-details {
  width: 206px;
  margin-right: 0;
}
#footer #credits {
  margin: 0px auto;
  width: 800px;
  height: 40px;
  font-size: 8px;
  color: #818181;
  float: none;
  position: absolute;
  bottom: 0px;
}
#footer #credits #registration-details {
  padding-left: 60px;
  color: forestgreen;
  width: 800px;
}
#footer #credits ul {
  list-style-type: none;
  padding-left: 35px;
}
#footer #credits ul li {
  display: inline;
  padding-right: 2px;
}
#footer-ceiling {
  width: 800px;
  height: 20px;
  float: left;
}
/********************** Buttons ******************************/
a.more-button {
  background: url("/img/more-information-button-right.png") no-repeat top right;
  height: 20px;
  padding-right: 15px;
  display: block;
  float: left;
  color: White;
  text-decoration: none;
  font-size: 12px;
}
a.more-button span {
  background: url("/img/more-information-button-left.png") no-repeat;
  display: block;
  line-height: 20px;
  padding-left: 5px;
}
a.sign-in {
  background: url("/img/sign-in-button-right.png") no-repeat top right;
  height: 25px;
  padding-right: 5px;
  display: block;
  float: left;
  color: White;
  text-decoration: none;
  font-size: 16px;
}
a.sign-in span {
  background: url("/img/sign-in-button-left.png") no-repeat;
  display: block;
  line-height: 25px;
  padding: 0 5px 0 10px;
}
a.submit {
  background: url("/img/submit-button-right.png") no-repeat top right;
}
a.disabled-submit {
  background: url("/img/disabled-submit-button-right.png") no-repeat top right;
}
a.submit,
a.disabled-submit {
  height: 20px;
  padding-right: 4px;
  display: block;
  float: left;
  color: White;
  text-decoration: none;
  font-size: 14px;
}
a.submit span {
  background: url("/img/submit-button-left.png") no-repeat;
}
a.disabled-submit span {
  background: url("/img/disabled-submit-button-left.png") no-repeat;
}
a.disabled-submit span,
a.submit span {
  display: block;
  line-height: 20px;
  padding: 0 4px 0 8px;
}
.right-align {
  float: right!important;
}
textarea {
  resize: none;
}
#message {
  width: 758px;
  border-width: 1px;
  border-style: solid;
  padding: 20px;
  margin-top: 10px;
  font-size: 12px;
}
#message a.close {
  position: inherit;
}
#message.success {
  border-color: Green;
  color: Green;
}
.no-margin {
  margin: 0px;
}
.nav-list {
  margin-top: 4px;
}
.nav-list a {
  color: maroon;
}
.nav-list > li > a:hover {
  /*background-color: #CCA0A0;*/
  text-decoration: none;
  text-shadow: none;
  /*color: #FFF;*/
}
.nav-list > .active > a,
.nav-list > .active > a:hover {
  background-color: maroon;
}
.btn-success {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #5bb75b;
  *background-color: #128913;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2AB22A), to(#128913));
  background-image: -webkit-linear-gradient(top, #2AB22A, #128913);
  background-image: -o-linear-gradient(top, #2AB22A, #128913);
  background-image: linear-gradient(to bottom, #2AB22A, #128913);
  background-image: -moz-linear-gradient(top, #2AB22A, #128913);
  background-repeat: repeat-x;
  border-color: #128913 #128913 #387038;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
  color: #ffffff;
  background-color: #128913;
  *background-color: #499249;
}
.form-horizontal .control-group {
  margin-bottom: 4px;
}
.form-horizontal .control-label {
  width: 140px;
}
.form-horizontal .controls {
  margin-left: 160px;
}
.validation-summary-errors {
  margin-bottom: 10px;
}
.validation-summary-errors ul {
  font-size: 12px;
}
div.alert-setting select {
  margin-bottom: 0px;
  width: auto;
}
div.alert-setting label {
  padding-bottom: 7px;
  padding-right: 8px;
}
#contents-list {
  margin-top: 50px;
}
table.table tr.payment:hover {
  cursor: pointer;
}
table.table tr.payment:hover td {
  background-color: #FFEEDD;
}
table.table tr.payment.selected td {
  background-color: maroon;
  color: white;
}
div.assigned-customer h3 {
  margin: 0px;
}
div.assigned-customer h4.state {
  float: right;
}
div.assigned-customer div {
  padding-right: 14px;
}
div.customer-details {
  margin-bottom: 0px;
}
div.customer-details h4,
div.customer-details h5 {
  margin: 0px;
}
div.customer-details h4.state,
div.customer-details h5.state {
  float: right;
}
div.customer-details h4.danger,
div.customer-details h5.danger {
  color: #BE0C0C;
}
div.customer-details dl {
  margin-bottom: 0px;
}
div.customer-details.cancelled {
  background-color: #DDD;
}
ul.search-results {
  list-style: none;
}
ul.search-results div.customer-details {
  cursor: move;
  margin-bottom: 4px;
}
.drop-zone.ui-state-highlight {
  background-color: #EEE79D;
}
.ui-draggable-dragging {
  width: 400px;
}
td.debt {
  color: red;
}
section > img {
  margin-bottom: 5px;
}
.column-two.payments h3 {
  padding-top: 10px;
  padding-bottom: 0px;
  line-height: 20px;
  margin-bottom: 2px;
}
#report {
  margin-top: 40px;
}
#report.loading {
  background: url('/img/spinner.gif') center no-repeat;
  height: 36px;
}
#report div.loading-message {
  margin-left: auto;
  margin-right: auto;
  float: center;
  text-align: center;
  padding-top: 50px;
}
div.radioButtons label {
  width: 300px;
}
p.no-padding-top {
  padding-top: 0px!important;
}
p.subtlety {
  padding-top: 0px;
  float: right;
  font-size: 10px;
}
h4.expandable {
  padding: 10px 5px;
  background: url('/img/expandable.png') 100px no-repeat;
  cursor: pointer;
}
h4.expandable.expanded {
  background: none;
}
img.bank-logo {
  height: 32px;
}
.btn.monster {
  height: 100px;
  width: 100px;
  margin: 4px 0;
}
div.amount-owing {
  font-size: 18px;
  float: right;
  padding: 5px;
}
div.skip-pickup {
  font-size: 22px;
  text-align: center;
  padding: 10px;
}
div.pickup-actions {
  float: right;
}
div.alert.notes {
  width: 35%;
}
div.alert.notes span {
  font-size: 18px;
}
div.cost {
  float: left;
  margin: 8px 15px;
}
div.cost input.monster {
  width: 80px;
  font-size: 26px;
  line-height: 22px;
  height: 40px;
  text-align: center;
}
div.cost label {
  font-size: 19px;
  font-weight: bold;
}
.btn.wide {
  width: 245px;
  margin: 8px 15px;
}
label.cheque {
  font-size: 20px;
  padding-left: 60px;
}
label.cheque input[type="checkbox"] {
  margin: 0 0 3px 0;
}
label.cheque label {
  display: inline;
}
.regular-checkbox {
  -webkit-appearance: none;
  background-color: #fafafa;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 9px;
  border-radius: 3px;
  display: inline-block;
  position: relative;
}
.regular-checkbox:active,
.regular-checkbox:checked:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.regular-checkbox:checked {
  background-color: #fafafa;
  border: 1px solid #adb8c0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
  color: maroon;
}
.regular-checkbox:checked:after {
  content: '\2714';
  font-size: 14px;
  position: absolute;
  top: 0px;
  left: 3px;
  color: maroon;
}
.big-checkbox {
  padding: 18px;
}
.big-checkbox:checked:after {
  font-size: 28px;
  left: 6px;
}
tr.highlight {
  background: lightgreen;
}