﻿/* Multi Attribute Products */
/**
  Product Attributes
*/
.mp-search-attrform {
  font-size: 12px;
  color: #6B6B6B;
  margin-bottom: 5px;
}
.mp-search-attrform .attrcolorname {
  float: left;
  color: #333;
  margin: 9px 5px 0 0;
}
.mp-search-attrform .attrname {
  float: left;
  color: #333;
  margin: 7px 5px 8px 0;
  margin-right: 5px;
  line-height: 25px;
}
.mp-search-attrform .color-attr {
  display: block;
  float: left;
  margin: 10px 5px 5px 5px;
  padding: 0 !important;
  border: 1px solid #c8c8c8;
  cursor: pointer;
}
.mp-search-attrform .color-attr.selected {
  border: 3px solid #c8c8c8 !important;
  margin: 8px 5px 2px 5px;
  cursor: default;
}
.mp-search-attrform .color-attr.outofstock,
.mp-search-attrform .color-attr.na {
  border: 1px solid #c8c8c8;
  position: relative;
}
.mp-search-attrform .color-attr > span {
  display: block;
  width: 14px;
  height: 14px;
  padding: 0 !important;
}
.mp-search-attrform .color-attr.yellow > span {
  background: #FFC700 !important;
}
.mp-search-attrform .color-attr.blue > span {
  background: #1367CA !important;
}
.mp-search-attrform .color-attr.green > span {
  background: #036C5D !important;
}
.mp-search-attrform .color-attr.orange > span {
  background: #FE7E1B !important;
}
.mp-search-attrform .color-attr.purple > span {
  background: #565493 !important;
}
.mp-search-attrform .color-attr.red > span {
  background: #D00217 !important;
}
.mp-search-attrform .color-attr.multi-color > span {
  border: 1px solid #C8C8C8;
  background-image: -moz-linear-gradient( left top, right bottom, from(red), color-stop(40%, yellow), color-stop(60%, blue), to(violet));
  background-image: -webkit-gradient(linear,  left top,  left bottom, color-stop(0.00, red), color-stop(40%, yellow), color-stop(60%, blue), color-stop(1.00, violet));
  background: linear-gradient(to bottom, red 0%, yellow 40%, blue 60%, violet 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='red', endColorstr='blue',GradientType=0 );
}
.mp-search-attrform .color-attr.brown > span,
.mp-search-attrform .color-attr.wood > span {
  background: #bb7e2b !important;
}
.mp-search-attrform .color-attr.blonde > span,
.mp-search-attrform .color-attr.natural > span {
  background: #f7db91 !important;
}
.mp-search-attrform .color-attr.goldtop > span {
  background: #C29337 !important;
}
.mp-search-attrform .color-attr.chrome > span {
  background: silver !important;
}
.mp-search-attrform .color-attr.smoke > span,
.mp-search-attrform .color-attr.carbonfiber > span {
  background: #454548 !important;
}
.mp-search-attrform .color-attr.sunburst > span {
  border: 1px solid #C8C8C8;
  background-image: -moz-linear-gradient( left top, right bottom, from(#252527), color-stop(50%, #86461B), to(#CD8500));
  background-image: -webkit-gradient(linear,  left top,  left bottom, color-stop(0.00, #252527), color-stop(50%, #86461B), color-stop(1.00, #CD8500));
  background: linear-gradient(to bottom, #252527 0%, #86461B 50%, #CD8500 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#252527', endColorstr='#CD8500',GradientType=0 );
}
.mp-search-attrform .color-attr.cherrymarble > span,
.mp-search-attrform .color-attr.cherryredburst > span {
  border: 1px solid #C8C8C8;
  background-image: -moz-linear-gradient( left top, right bottom, from(#252527), color-stop(50%, #703236), to(#A33537));
  background-image: -webkit-gradient(linear,  left top,  left bottom, color-stop(0.00, #252527), color-stop(50%, #703236), color-stop(1.00, #A33537));
  background: linear-gradient(to bottom, #252527 0%, #703236 50%, #A33537 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#252527', endColorstr='#A33537',GradientType=0 );
}
.mp-search-attrform .color-attr.photocolor > span {
  border: 1px solid #C8C8C8;
  background-image: -moz-linear-gradient( left top, right bottom, from(#000), color-stop(50%, pink), to(cyan));
  background-image: -webkit-gradient(linear,  left top,  left bottom, color-stop(0.00, #000), color-stop(50%, pink), color-stop(1.00, cyan));
  background: linear-gradient(to bottom, #000 0%, pink 50%, cyan 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='pink', endColorstr='cyan',GradientType=0 );
}
.mp-search-attrform .color-attr.glossoptimizer > span {
  border: 1px solid #C8C8C8;
  background-image: -moz-linear-gradient( left top, right bottom, from(#fff), color-stop(50%, #C5E5D4), to(#25A561));
  background-image: -webkit-gradient(linear,  left top,  left bottom, color-stop(0.00, #fff), color-stop(50%, #C5E5D4), color-stop(1.00, #25A561));
  background: linear-gradient(to bottom, #fff 0%, #C5E5D4 50%, #25A561 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#25A561',GradientType=0 );
}
.mp-search-attrform .color-attr.clear > span {
  background: #e8e8e8 !important;
}
.mp-search-attrform .color-attr.outofstock .slash,
.mp-search-attrform .color-attr.na .slash {
  display: block;
  width: 20.5px;
  height: 1.2px;
  border: none;
  background-color: #c8c8c8 !important;
  -webkit-transform: translateY(21px) translateX(21px) rotate(-45deg);
  transform: translateY(21px) translateX(21px) rotate(-45deg);
  position: absolute;
  top: -15px;
  left: -24.0px;
}
.mp-search-attrform .size-attr {
  display: block;
  font-size: 12px;
  text-align: center;
  float: left;
  margin: 7px 5px;
  padding: 0 7px;
  height: 25px;
  line-height: 25px;
  color: #686868;
  border: 1px solid #C8C8C8;
  cursor: pointer;
  line-height: 25px !important
}
.mp-search-attrform .size-attr.outofstock,
.mp-search-attrform .size-attr.na {
  border: none;
  background: #f2f2f2;
  color: #989898;
}
.mp-search-attrform .size-attr.selected {
  border: 3px solid #C8C8C8;
  height: 29px;
  margin: 5px;
  cursor: default;
}
.mp-search-attrform .color-attr + .tooltip,
.mp-search-attrform .size-attr + .tooltip {
  padding-bottom: 5px !important;
}
.mp-search-attrform .color-attr + .tooltip > .tooltip-inner,
.mp-search-attrform .size-attr + .tooltip > .tooltip-inner {
  background-color: #FFF; 
  color: #BB1A00; 
  border: 1px solid #C8C8C8;
  border-radius: 0;
  padding: 0.5em !important;
  font-size: 12px;
}
.mp-search-attrform .color-attr + .tooltip.top > .tooltip-arrow,
.mp-search-attrform .size-attr + .tooltip.top > .tooltip-arrow {
  border-top: 5px solid #C8C8C8;
  padding: 0 !important;
}
.mp-spinner {
  background-color: #888;
  opacity: 1;
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  z-index: 10000
}
.mp-spinner-overlay {
  background-color: #888;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: .5;
  -moz-opacity: .5;
  z-index: 9999
}
.mp-spinner .fa-spin {
  font-size: 4em;
  color: #FFF;
  padding: 5px;
  -webkit-transform-origin: 50% calc(50% - .5px);
  transform-origin: 50% calc(50% - .5px);
}
.b2b-product {
  margin-top: 15px;
}
/* End of Multi Attribute Products */