/*****************************
 * Top Level
 *****************************/

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  margin: 0;
  background-image: url(/images/bg-grad.gif);
  background-repeat: repeat-x;
  background-position: top;
}
h1 {
  font-size: 1.8em;
  margin-top: 0px;
}
#header, #footer, #middle {
  width: 780px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
table {
  border-collapse: collapse;
}

/**
 * table.layout
 * 
 * When components need to be placed in columns, put this class in
 * the <table> and <td> elements.
 */
table.layout {
	width: 100%;
	border-spacing: 0;
	border-width: 0;
	padding: 0;
	margin: 0;
	border-collapse: collapse;
}

td.layout {
	vertical-align: top;
	padding: 0;
	margin: 0;
}

table thead td {
	font-weight: bold;
}



div.hr {
  background-color: white;
  height: 1px;
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 0pt;
}

/******************************
 * Header Elements
 ******************************/
#header {
  background-image: url(/images/header-bg.gif);
  height: 72px;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
  #header #logo-image {
    position: absolute;
    top: 10px;
    left: 15px;
  }
    #header #logo-image img { width: 88px; height: 55px; }
  #header #logo-text {
    position: absolute;
    left: 115px;
    top: 10px;
  }
    #header #logo-text img { width: 217px; height: 23px; }
  #header #tabs {
    position: absolute;
    bottom: 0;
    left: 115px;
  }
    #header #tabs ul {
      margin: 0;
      padding: 0;
      list-style: none;
      /* height: 20px; */
    }
    #header #tabs ul li {
      float: left;
      background: url(/images/tab-grey-right.gif) no-repeat right top;
      margin: 0px;
      margin-right: 1px;
      padding: 0px;
      white-space: no-wrap;
    }
    /* IE Only */
    * html #header #tabs ul li {
        height: 6px;
    }
      #header #tabs ul li a {
        line-height: 9px;
        color: white;
        text-decoration: none;
        display: block;
        background: url(/images/tab-grey-left.gif) no-repeat left top;
        padding: 7px 12px;
        height: 20px;
        white-space: no-wrap;
      }
      * html #header #tabs ul li a {
	height: 0px;
	width: 30px;
      }
      #header #tabs ul li a:visited {
        color: white;
      }
    #header #tabs ul li.current {
      background-image: url(/images/tab-white-right.gif);
      color: black;
    }
      #header #tabs li.current a {
        background: url(/images/tab-white-left.gif) no-repeat left top;
        color: black;
      }
      #header #tabs li.current a:visited {
        color: black;
      }
      
/******************************
 * Messages
 ******************************/
.warning, .error {
  color: red;
}
.notice {
  color: blue;
}

/******************************
 * Middle Layout
 ******************************/

#middle {
  padding: 0;
  margin-top: 10px;
  margin-bottom: 10px;
  border-collapse: collapse;
}

#left-panel, #main { padding: 0px; }

/* Column Widths */
#left-panel { width: 210px; }
#left-panel .top, #left-panel .middle, #left-panel .bottom {
  width: 200px;
}
#main { width: 570px; }

/******************************
 * Left Panel
 ******************************/

#left-panel {
  vertical-align: top;
  padding: 0;
  text-align: left;
}
  #left-panel .top {
    background-image: url(/images/leftbar-top.gif);
  }
  #left-panel .top,
  #left-panel .bottom {
    height: 10px;
    font-size: 1pt;
  }

#left-panel .bottom {
  background-image: url(/images/leftbar-bottom.gif);
}

#left-panel .middle {
  padding: 0 5px 12px;
}
* html #left-panel .middle {
  width: 190px;
}
  #left-panel .middle h3 {
    margin: 0;
    margin-left: 5px;
    font-size: 1.2em;
  }
  #left-panel .middle a {
    color: #fff;
  }
  #left-panel .middle a:visited {
    color: #fff;
  }
  #left-panel .middle .login {
    margin-bottom: 10px;
  }

* html #categories {
  width: 160px;
}
#categories ul {
  list-style: none;
  margin-left: 0px;
  padding: 0 0 0 0;
}
#categories li {
  padding-bottom: 5px;
  margin-left: 0px;
  padding-left: 0px;
}
#categories .tier0 li {
  padding-left: 5px;
}
#categories .tier1 li, #categories .tier2 li, #categories .tier2 li, #categories .tier3 li, #categories .tier4 li {
  padding-left: 15px;
}

#smallcart {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
}
#smallcart .total {
  text-align: right;
}

/******************************
 * Main Elements
 ******************************/

#main {
  vertical-align: top;
}
  #main h2 {
    font-size: 1.3em;
    margin-top: 2px;
  }


/******************************
 * Product List
 ******************************/

/* Global */
table.products {
  width: 100%;
  border-collapse: collapse;
}
table.products h1 {
  display: inline;
}
table.products td {
  border: 0;
  vertical-align: top;
}
table.products td { padding: 0; }
tr.prod-row td.atc-col {
  padding: 0;
}
      
/* Column Widths */
tr.prod-row td.image { width: 11%; }
tr.prod-row td.desc { width: 64%; }
td.atc-col { width: 25%; }

/* Row Heights */
td.image { height: 59px; }

/* Left side */
table.products td.image, table.products td.desc {
  padding: 5px;
}
table.products tfoot td[colspan="2"] {
  vertical-align: middle;
}
tr.prod-row td.image img {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border: 2px solid black;
}
tr.prod-row .desc .title {
  font-weight: bold;
}

/* Add To Cart Column */
td.atc-col {
  text-align: center;
}
div.atc-col-div {
  margin-left: 10px;
	margin-right: 10px;
	text-align: center;
}
thead div.atc-col-div input[type="submit"],
tfoot div.atc-col-div input[type="submit"] {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Add to Cart Controls */
.price {
  font-size: 1.2em;
}
div.atc-controls {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 0px;
}
div.atc-controls input[type="text"] {
  width: 35px;
  height: 21px;
  margin-bottom: 5px;
  text-align: right;
}
div.atc-controls table {
  border-collapse: collapse;
  padding: 0px;
  border: 0;
  margin-left: auto;
  margin-right: auto
}
div.atc-controls table td {
  padding: 0px;
  border-collapse: collapse;
  border: 0;
}
div.atc-controls a {
  margin: 0px;
  padding: 0px;
}
div.atc-controls img {
  width: 9px;
  height: 9px;
  border: 0;
}
div.atc-controls input {
  margin-bottom: 3px;
}
.pagination a {
  margin-left: 20px;
}

/******************************
* Footer Elements
******************************/
#footer {
  /* background-image: url(/images/footer-bg.gif); */
  height: 70px;
  bottom: 0;
  font-size: 0.9em;
  text-align: center;
  padding-top: 10px;
}

/******************************
* Colors and Fonts
******************************/
body { background-color: #fff }
body {
  font-family: Helvetica, Arial, Sans-Serif;
  font-size: 12px;
}
#left-panel .middle {
  background-color: #b2b2b2;
  color: #fff;
}
#left-panel .top, #left-panel .bottom { background-color: #fff; }
thead .atc-col-div,
tfoot .atc-col-div,
tr.divider .atc-col-div {
background-color: #aaa;
}
.prod-row { background-color: #ddd; }

/***************************
* Product Detail page
***************************/

#product-detail {}
  #product-detail .images {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  #product-detail h2.title {
    font-size: 1.2em;
  }
  #product-detail .description {
    font-size: 1.2em;
  }
  #product-detail .price {
    font-size: 1.2em;
    font-weight: bold;
  }
  #product-detail form {
    margin-top: 15px;
  }

/****************************
* Cart And Checkout pages
*****************************/
.controller-cart label {
  width: 8em;
}
.controller-cart input.text {
  width: 10em;
}
.controller-cart form label.username,
.controller-cart form label.password {
  width: 7em;
}
.controller-cart form .payment-methods .payment-method fieldset label {
  width: 12em;
}

/*****************************
* Cart Page
*****************************/
table#cart {
  width: 100%;
}

#cart .cart-item .qty {
  width: 68px;
}

.a-cart-cart .shipping {
  margin-top: 2em;
}

.a-cart-cart td.shipping-methods {
  width: 28em;
}

.a-cart-cart .shipping-methods label {
  width: 23em;
}

.controller-cart form .shipping-method label {
  width: 23em;
}
