/* -------------------------------------

    Promotions for category pages,
    extruded from base.less. 

------------------------------------- */
/* -------------------------------------

    Helpers

------------------------------------- */
/* -------------------------------------

    Promotions
    
    extruded from base.less for 
    category pages.

------------------------------------- */
.promotion {
  margin-bottom: 20px;
  position: relative;
  clear: both;
  width: 100%;
  max-height: 252px;
  overflow: hidden;
}
.M .promotion {
  max-height: 233px;
}
.S .promotion {
  max-height: 207px;
}
.L .promotion {
  max-height: 242px;
}
.promotion a.offer-href {
  overflow: hidden;
  display: block;
  float: left;
  padding-right: 20px;
}
.M .promotion a.offer-href img {
  position: relative;
  top: -5px;
}
.L .promotion a.offer-href img {
  width: 261px;
}
.M .promotion a.offer-href img {
  width: 256px;
}
.S .promotion a.offer-href img {
  width: 219px;
}
.promotion .banner {
  float: right;
}
.L .promotion .banner {
  width: 857px;
}
.M .promotion .banner {
  width: 821px;
}
.S .promotion .banner {
  width: 719px;
}
.promotion .banner li a {
  position: relative;
}
.promotion .banner li a img {
  width: 100%;
}
.promotion ol {
  width: auto;
  position: absolute;
  right: 20px;
  bottom: 13px;
}
.promotion ol li {
  margin: 0;
}
.promotion ol li a {
  position: relative;
  background: url(../img/bg/top-nav.png) repeat-x;
  padding: 5px 9px 11px 9px;
  text-align: center;
  color: #fff;
  text-indent: 0;
  -moz-border-radius: 0px;
  border-radius: 0px;
}
.promotion ol li a:hover {
  background: url(../img/bg/top-nav.png) repeat-x;
}
.promotion ol li a.flex-active {
  background: url(../img/bg/top-nav-green.png) repeat-x !important;
}