/*

  NEW Basket CSS. Gotta make sure all our shop sites are compatible with this 
  before it goes live.
  
  Because we never use underscores in class or id names at Inventive Labs 
  (preferring Javascript-influenced camelCase), we can use the underscore
  character to denote namespaces.

  For this Shopping Basket module, all id and class names will be prefixed
  with 'basket_', to prevent clashes with any other elements on the page.
*/

#basket_ a, 
#basket_ a:hover {
  position:relative;
}

#basket_ a:focus, 
#basket_ a:active {
  outline: none !important;
}


/* the top-of-screen tab */
a.basket_summary {
  background: #bbb;
  text-align: right;
  padding: 0.1em 0.5em;
  display: block;
  cursor: pointer;
}
a.basket_summary:hover {

}
 
/* The drop-down basket */
#basket_ {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.95em;
  background: #eee;
  border: 1px solid #ddd; 
  border-top: 0px; 
  width: 100%;
  z-index: 1000;
}



/* The open basket */

.basket_details, 
.basket_notice {
  overflow: hidden;
  width: 100%;
}

.basket_details table {
  border-collapse: collapse;
}

.basket_details td {
  vertical-align: top;
  line-height: 1.2em;
  border: 0px;
  padding: 6px 2px 3px 0;
}

.basket_details td.basket_itemControls {
  width: 38px;
}

.basket_details .basket_alt {

}

td.basket_itemDetails a {
  position: relative;  
}

.basket_details td.basket_itemImage img {
  height: 32px;
  margin-left: 4px;
  border: 1px solid #ccc;
  margin-bottom: 6px;
}

.basket_details td.basket_itemDetails strong {
  display: block;
  white-space: nowrap;
}

.basket_details a.basket_itemRemoveLink {
  font-size: 10px;
  color: red;
  font-family: "Arial Narrow", sans-serif;
  text-transform: uppercase;
  position: relative;  
}
tr.basket_total {
/*  text-align:right;*/
  font-size: 1.2em;
}
.basket_checkoutLink {
  text-align: right;
  font-weight:bold;
  display:block;
  font-size: 1.5em;
  padding-right:4px;
}


/* Quantity widget */

.basket_quantifier {
  width: 32px;
  height: 16px;
  background: #E9E9E9;
  border: 1px solid #999;
}
.basket_quantifier .basket_quantity {
  text-align: right;
  padding-top: 2px;
  color: #777;
  cursor: default;
}
.basket_quantifier .basket_quantityControls {
  width: 12px;
  float: right;
  margin-left: 3px;
}
.basket_quantifier .basket_quantityUp {
  background: url("http://kallirolfecontemporaryart.com/images/shp/quantity_up.gif") #CCC no-repeat;
  width: 12px;
  height: 8px;
  float: left;
  position: relative;  
}
.basket_quantifier .basket_quantityDown {
  background: url("http://kallirolfecontemporaryart.com/images/shp/quantity_down.gif") #BBB no-repeat;
  width: 12px;
  height: 8px;
  float: left;
  position: relative;  
}

/* Notification in basket dropdown */
.basket_notice div {
  position: relative;
  padding: 10px 5px;
  margin-right: 32px;
}
.basket_notice img { /* This is the spinner */
  float: left;
  position: relative;
  margin-top: -5px;
  height: 32px;
  margin-right: 7px;
}
.basket_notice strong {
  display: block;
  white-space: nowrap;
}
.basket_empty {
  text-align:center;
  padding-top:2px;
  font-size:11px;
  margin-bottom:3px;
}
.basket_notice span.basket_addMessage {
  text-transform: uppercase;
  font-weight: bold;
  display: block;
  font-size: 11px;
  margin-bottom: 4px;
  color: #F3110B;
  height: 20px;
}

.basket_notice span.basket_errorMessage {
  text-transform: uppercase;
  color: red;
  font-size: 10px;
  font-family: "Arial Narrow", sans-serif;
  display: block;
  height: 22px;
}

.basket_notice div img {
  width:16px;
  height:16px;
  margin:0 10px 0 4px;
}

.notForSale { 
/* this needs to be name-spaced to fall in line with 
the rest - maybe basket_fillerNotForSale ? */  
}