/* Common content styles. */

body {
  background-color: #582421;
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
}

.page {
  width: 800px;
  margin: 0 auto;
  padding: 0 15px;
  background: url("images/background") top center repeat-y;
}

.page-bottom {
  width: 800px;
  margin: 0 auto;
  padding-bottom: 20px;
  background: url("images/page-bottom") top center no-repeat;
}

.page-top {
  width: 800px;
  margin: 0 auto;
  padding-top: 10px;
  background: url("images/page-top") bottom center no-repeat;
}

.body {
  width: 770px;
  margin: 0 auto;
}

  /* Simple hack to force a block to enclose its floats.
     See: http://www.positioniseverything.net/easyclearing.html */

.body:after {
  content: " ";
  clear: both;
  display: block;
  visibility: hidden;
}

.content {
  float: right;
  width: 577px;
  padding: 26px;
}

blockquote {
  margin: 8px;
}

h1, h2, h3, h4, h5 {
  margin-top: 0;
}

h2 {
  font-size: 160%;
}

h3 {
  font-size: 145%;
}

h4 {
  font-size: 104%;
  margin-bottom: 0.2em;
}

h2 a, h3 a, h4 a, h5 a {
  text-decoration: none;
}

a {
  color: black;
}

a img {
  border: 0;
}

p {
  margin-top: 0;
  margin-bottom: 0.5em;
}

/* Alerts and notices. */

.notice, .alert {
  padding: 10px 10px 10px 40px;
  margin-bottom: 30px;
}

.notice {
  background: url('images/notice') 10px 50% #CDBA85 no-repeat;
}

.notice.warning, .notice.alert {
  background: url('images/notice-alert') 10px 50% red no-repeat;
  color: white;
}

/* Common parts: sidebar, header and footer. */

.sidebar {
  width: 141px;
  float: left;
  font-size: 89%;
}

.sidebar .items {
  padding: 0;
  margin: 0;
}

.sidebar .items {
  list-style-type: none;
  background-color: #4b5500;
  padding: 12px 0;
}

.sidebar .items li {
  text-align: center;
  padding: 7px;
  color: #c3b060;
}

.sidebar .items li.highlight-1 {
  background-color: #954721;
}

.sidebar .items li.highlight-2 {
  background-color: #396e7f;
}

.sidebar .items li.highlight-3 {
  background-color: #7a221c;
}

.sidebar .items li a {
  text-decoration: none;
  color: #c3b060;
}

.sidebar .items li a:hover {
  color: white;
}

.sidebar .categories {
  list-style-type: none;
  margin: 4px 0;
  padding: 0;
}

.sidebar .categories li {
  background: #637000;
}

.sidebar .categories li a {
  color: #e0d089;
}

.sidebar .cart {
  text-align: center;
  background: url('images/sidebar-light') #bfa639 bottom left repeat-x;
  padding: 10px;
}

.sidebar .cart p, .sidebar .cart a {
  padding: 0;
  margin: 0;
  color: black;
}

.header {
  margin: 0 auto;
  height: 160px;
  width: 770px;
  background: url('images/header') top center no-repeat;
}

.header h1 {
  display: none;
}

.disclaimer {
  clear: both;
  padding: 9px;
  text-align: right;
  font-size: 80%;
}

/* Main page. */

.introduction .column.odd img {
  float: left;
  margin-right: 20px;
}

.introduction .column.left {
  float: left;
}

.introduction .column.right {
  float: right;
}

.introduction .column {
  margin-bottom: 15px;
}

  /* One-off styles. */

  .introduction .column .saddle {
    text-align: center;
    width: 95%;
  }

  .introduction .column .saddle.gloss {
    color: #a69e1d;
    font-family: "Times New Roman", "Georgia", sans-serif;
  }

/* Trade information pages. */

.trade .section {
  text-align: center;
  margin-bottom: 20px;
}

.trade .section .download {
  color: red;
  font-weight: bold;
  padding: 0;
  margin: 0;
}

.trade .contact {
  border: 1px black solid;
  margin: 10px auto;
  width: 60%;
  padding: 10px;
}

/* About page. */

.contact dt {
  font-weight: bold;
}

.contact dd {
  clear: none;
  margin-bottom: 1em;
}

.about img {
  margin: 20px 10px 50px 10px;
}

/* Pack listing. */

.pack .details a, .pack a {
  color: inherit;
}

.pack .details {
  margin-bottom: 35px;
}

.pack .details img {
  float: right;
  margin-left: 15px;
}

.pack .members {
  list-style-type: none;
  margin: 15px;
  padding: 0;
}

.pack .members .member {
  padding: 30px 0;
  border-bottom: 1px solid #cdb577;
}

.pack .members .member img {
  float: right;
  margin-left: 20px;
}

.pack .divider {
  clear: both;
  background-color: #a91b30;
  color: #c3b060;
  padding: 7px;
}

.pack .details .description .exclamation {
  color: red;
}

.pack .members .member .description {
  margin-top: 20px;
}

.pack .followup {
  font-size: 95%;
  margin-top: 5px;
  margin-bottom: 5px;
}

  /* Simple hack to force a block to enclose its floats.
     See: http://www.positioniseverything.net/easyclearing.html */

.pack .details:after, .pack .members .member:after {
  content: " ";
  clear: both;
  display: block;
  visibility: hidden;
}

.pack h4 {
  margin: 0;
}

/* Product page. */

.product .details img {
  float: right;
  margin-left: 15px;
}

.product .details .description dt {
  font-weight: bold;
}

.product .details .description dd, .product .details .description li {
  margin: 7px;
}

.product .details .description dl,
.product .details .description ul, .production .details .description ol {
  margin-left: 15px;
}

.product .details .description .exclamation {
  color: red;
}

.product .purchase {
  display: block;
}

.product .footnote {
  margin-top: 30px;
  text-align: center;
}

.product .purchase {
  clear: both;
  text-align: center;
  padding-top: 20px;
}

.product .purchase .field {
  margin-bottom: 20px;
}

.product .purchase .explanation {
  font-size: 90%;
  margin: 9px; 
}

.product .purchase .tabs {
  margin: 20px 0;
  background: url('images/product-tabs') 0 50% repeat-x;
}

.product .purchase .tabs .tab {
  padding: 0 3px;
  margin: 0 4px;
  background: #f0eacf;
  font-weight: bold;
}

.product .purchase .tabs .tab a {
  font-weight: normal;
  color: #857854;
}

.product .purchase .alert {
  background: #CDBA85;
  padding: 10px;
  color: black;
  margin-top: 20px;
}


/* Shopping cart. */

.payment label {
  margin-left: 10px;
  float: left;
  width: 170px;
  cursor: pointer;
  padding-top: 4px;
}

.payment div {
  margin: 0 0 5px 10px;
}

.payment .caption {
  margin: 5px 0 0 180px;
  font-style: italic;
}

.payment .controls {
  text-align: center;
  padding: 20px;
}

.payment .controls .caption {
  margin: 5px 40px;
  font-style: italic;
}

.payment .mistake {
  color: red;
}

.order h3, .payment h3 {
  background: #cdba85;
  margin-top: 15px;
  padding: 8px;
  font-size: 14px;
}

.payment h4 {
  margin-top: 1em;
}

.order .section {
  width: 550px;
  margin: 0 auto;
}

.order .section .quantity, .order .summary .quantity {
  width: 70px;
}

.order .section .description {
  width: 300px;
}

.order .summary .description {
  width: 363px;
}

.order .summary .grandtotal {
  font-weight: bold;
}

.order .section .item .thumbnail {
  width: 60px;
}

.order .section .amount, .order .summary .amount {
  width: 60px;
  text-align: right;
}

.order .section .adjustment {
  font-size: 12px;
}

.order .section .adjustment .description {
  text-indent: 15px;
}

.order .section .total .amount, .order .summary .grandtotal .amount {
  border-top: 1px solid #cdba85;
  padding-top: 7px;
}

.order .section .item .action {
  text-align: right;
}

.order .section .item a {
  text-decoration: none;
}

.order .explanation {
  margin-left: 70px;
}

.order .summary {
  margin: 30px auto;
  width: 550px;
}

.order .summary .amount {
  text-align: right;
  width: 70px;
}

.payment .field {
  padding: 3px 33px;
}

.payment .field input, .payment .field textarea {
  width: 260px;
}