/* defaults */
.swatches {/* margin-top: 10px;*/ color: white; width:320px; float:left;  }
.swatches h2 {font-size: 14px; margin: 0px 0px 5px 0; color:#816099; text-transform:uppercase;  border-bottom:1px dotted #F49AA4; width:315px;  background:url(../images/productcolorguide.png) no-repeat;  font-weight:normal; background-position:bottom left; height:20px;}
.swatch { /* width: 28px; height: 28px; padding: 2px; margin-right: 5px;*/  width: 30px; height: 18px; margin: 0 3px 3px 0;}
.swatch img { width: 18px; height: 18px; padding: 2px; margin-right: 3px; }
.swatch.outofstock img {/* width: 26px; height: 26px; */border: 1px dotted grey;  width: 30px; height: 18px; margin: 0 3px 3px 0; }



/* CSS for category page (grid view) */
.colorListingHolder .swatches {/* margin-top: 10px;*/ color: white; width:135px; display:inline;  float:left; height:27px; overflow:hidden; float:left;}
.colorListingHolder .swatches h2 { font-size: 11px; }
.colorListingHolder .swatch { /* width: 28px; height: 28px; padding: 2px; margin-right: 5px;*/  width: 12px; height: 10px; margin: 0 3px 3px 0; float:left;}
.colorListingHolder .swatch img { width: 12px; height: 10px; padding: 0px;  }
.colorListingHolder .swatch.outofstock img { width: 12px; height: 10px; border: 1px dotted grey; }



/* CSS for category page (grid view) OLD VERSION 
.item .swatches {/* margin-top: 10px; color: white; width:130px; display:inline-block; height:10px;  }
.item .swatches h2 { font-size: 11px; }
.item .swatch img { width: 12px; height: 10px; padding: 0px; margin-right: 3px; }
.item .swatch.outofstock img { width: 12px; height: 10px; border: 1px dotted grey; }*/

/* CSS for category page (list view) */
.listing-item .swatches h2 { font-size: 11px; }
.listing-item .swatch img { width: 18px; height: 18px; padding: 2px; margin-right: 3px; }
.listing-item .swatch.outofstock img { width: 16px; height: 16px; border: 1px dotted grey; }

/* CSS for a product page */
.product-shop .swatches {/* margin-top: 10px;*/ color: white; width:320px;  float:left;  }
.product-shop .swatches h2 {font-size: 14px; margin: -5px 0px 5px 0; color:#816099; text-transform:uppercase;  border-bottom:1px dotted #F49AA4; width:315px;  background:url(../images/productcolorguide.png) no-repeat;  font-weight:normal; background-position:bottom left; height:20px;}

.product-shop .swatch { width: 30px; height: 18px; margin: 0 3px 3px 0; float:left;}
.product-shop .swatch img {/* width: 28px; height: 28px; padding: 2px; margin-right: 5px;*/  width: 30px; height: 18px; margin: 0 3px 3px 0;}
.product-shop .swatch.outofstock img {/* width: 26px; height: 26px; */border: 1px dotted grey;  width: 30px; height: 18px; margin: 0 3px 3px 0;}


/***********************/
/*       SWATCHES      */
/**********************
.swatches { color: white; width:330px;  }
.swatches h2 { font-size: 14px; margin: 60px 0px 5px 0; color:#816099; text-transform:uppercase;  border-bottom:1px dotted #F49AA4; width:315px;  background:url(../images/productcolorguide.png) no-repeat;  font-weight:normal; background-position:bottom left; }
.swatches h3 { font-size: 11px;  margin: 5px 0px 5px 0;  color:#fff; font-weight:normal; letter-spacing:0.5px; }
.swatches img { width: 30px; height: 18px; margin: 0 3px 3px 0; }*/  /* Aspect ratio is 80:48. */