/* ------------  Browse/grid view section ------------ */

/* ----- Breadcrumbs ---- */
.breadcrumbs a {
   transition: color .3s;
}
.breadcrumbs a:hover {
   text-decoration: underline;
   color: #555;
}
.breadcrumbs li {
   margin-right: auto;
   padding: 1px 10px;
   text-transform: capitalize;
   border-right: #8a8a8a solid 1px;
}
.breadcrumbs li:first-of-type {
   padding-left: 0;
}
.breadcrumbs li:last-of-type {
   border-right: none;
}

/* ------ Navigation Sidebar, checkbox filters ------ */
.filters-nav {
   width: 190px;
   padding-right: 10px;
}
.filter-type {
   margin-top: 38px;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
}
.filter-type h3 {
   margin-bottom: 5px;
   margin-left: 10px;
}
.filter-type h3 a {
   font-size: 14px;
   position: relative;
   color: #004ebc;
}
.filter-type h3 span { /* span is the indicator image */
   position: relative;
   display: inline-block;
   width: 16px;
   height: 10px;
   margin-left: 5px;
   -webkit-transition: .3s;
      -moz-transition: .3s;
       -ms-transition: .3s;
           transition: .3s;
   background: url(/ux/themes/tru/common/img/arrow_blue_small.png);
}
.filter-type.closed h3 span {
   /* optional, configuration rotate indicator */
   -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
       -ms-transform: rotate(180deg);
           transform: rotate(180deg);
}
/* this is label for checkbox */
.filter-type label {
   font-size: 11px;
   font-weight: normal;
   position: relative;
   top: -2px;
   cursor: pointer;
}
.filter-type label:active {
   top: -1px;
}
/* more... link, open hidden checks */
.filter-more a {
   font-size: 11px;
   font-weight: bold;
   position: relative;
   margin-left: 20px;
   color: #004ebc;;
}
.filter-more a:active {
   top: 1px;
}

/* ------ Promo banner ------ */
.promo-grid-wrapper {
   width: 805px;
}
.promo-banner {
   min-height: 180px;
   padding: 10px 5px;
   cursor: pointer;
}
.promo-banner h3 {
   font-size: 20px;
   color: #f00;
}
.promo-banner .table {
   width: 100%;
   margin-top: 10px;
}
.promo-banner .tablecell {
   height: 150px;
   margin: 0 auto;
   vertical-align: middle;
}
.promo-banner .photo {
   min-width: 200px;
   padding-right: 20px;
   text-align: right;
}
.promo-banner .photo img {
   width: auto;
   max-width: 300px;
   height: auto;
   max-height: 160px;
}
.promo-banner .description {
   font-size: 11px;
   font-weight: bold;
   line-height: 16px;
   padding-left: 20px;
   text-align: center;
   color: #004896;
}

/* ------ Gridview controls (pagination) ------ */
.grid-controls {
   font-size: 14px;
   width: 755px;
   margin: 5px 10px;
}
.grid-controls * {
   font-size: 14px;
}
.grid-controls select {
   font-size: 12px;
}
.grid-controls .table {
   width: 100%;
}
.grid-controls .table.head {
   border-bottom: #d3d3d3 solid 1px;
}
.grid-controls .tablecell {
   vertical-align: middle;
}
.grid-controls .head .tablecell {
   width: 50%;
   height: 20px;
   padding: 10px;
   vertical-align: middle;
}
.grid-controls .showing {
   font-size: 11px;
   text-align: right;
}
.grid-controls .controls .lbl-sort {
   width: 105px;
   height: 80px;
}
.grid-controls .controls .filter-sort {
   width: 240px;
}
.grid-controls .controls .lbl-perpage {
   width: 130px;
}
.grid-controls .controls .filter-perpage {
   width: 75px;
}
.grid-controls .controls .paginator {
   text-align: right;
}
.grid-controls .controls .paginator ul {
   display: inline-block;
}
.grid-controls .controls .paginator li {
   float: left;
}
.grid-controls .controls .paginator .lbl-paginator {
   margin-right: 10px;
}
.grid-controls .controls .paginator a {
   margin: auto 3px;
   color: #004ebc;
}
.grid-controls .controls .paginator a:hover {
   text-decoration: underline;
}
.grid-controls .controls .paginator a img {
   position: relative;
   top: 1px;
   left: -2px;
}
.grid-controls .controls .paginator .current a {
   color: #000;
}


/* ------------ GRID VIEW RESULTs ---------------- */
.result-list {
   margin: 0 auto;
}
.result-list li.tablecell {
   padding: 10px 0;
   border-bottom: #ddd solid 1px;
}
.result-list .cell-wrap {
   width: 145px;
   padding: 0 20px;
   border-left: #ddd solid 1px;
}
.result-list li.tablecell:first-of-type .cell-wrap { /* remove border from first cell */
   border-left: none;
}
.result-list li.tablerow + .tablecell .cell-wrap { /* remove border from the next cells, after row jump */
   border-left: none;
}
.result-list .photo {
   width: 100%;
   height: 165px;
   text-align: center;
}
.result-list .photo .tablecell {
   vertical-align: middle;
}
.result-list .photo img {
   width: auto;
   max-width: 150px;
   height: auto;
   max-height: 150px;
}
.result-list .rank li {
   display: inline-block;
   width: 20px;
   height: 19px;
   background: url('/ux/themes/common/img/star_grey_big.png');
}
.result-list .rank li.on {
   background: url('/ux/themes/common/img/star_orange_big.png');
}
.result-list .label {
   margin: 15px 0;
}
.result-list .label a {
   color: #000;
}
.result-list .label a:hover {
   text-decoration: underline;
}
.result-list .price span {
   font-size: 19px;
   margin-right: 5px;
}
.result-list .price span:before {
   content: '$';
}
.result-list .price.sale span {
   font-size: 16px;
   text-decoration: line-through;
   color: #888;
}
.result-list .price.sale span:last-of-type {
   font-size: 19px;
   text-decoration: none;
   color: #db0049;
}
.result-list .availability {
   margin: 25px 0 15px 0;
}
.result-list .availability li {
   font-size: 11px;
   margin: 2px 0;
   padding: 2px 2px 3px 18px;
   background: url('/ux/themes/common/img/unavail_avail.gif') no-repeat 0 2px;
}
.result-list .availability li.on {
   background: url('/ux/themes/common/img/unavail_avail.gif') no-repeat 0 -149px;
}
.result-list .note {
   margin-top: 20px;
   color: #d10c2c;
}
.result-list .note span {
   font-size: 11px;
}
.border-bottom-hidder {
   position: relative;
   top: -2px;
   height: 5px;
   background: #fff;
}


/* Recommended for you */
.recomm-slider {
   width: 960px;
   min-height: 360px;
}
.recomm-slider h3 {
   margin: 15px 0;
}
.recomm-slider .slider-wrap {
   overflow: hidden;
   width: 960px;
   border: #000 none 1px;
}
.recomm-slider .controls {
   position: absolute;
   z-index: 10;
   display: none;
   width: 960px;
   border: #f00 none 1px;
}
.recomm-slider .controls a {
   position: relative;
   top: 150px;
   display: inline-block;
   width: 50px;
   height: 50px;
   -webkit-transition: width .2s, top .5s;
      -moz-transition: width .2s, top .5s;
       -ms-transition: width .2s, top .5s;
           transition: width .2s, top .5s;
}
.recomm-slider .controls a.prev {
   left: -35px;
   float: left;
   background: url('/ux/themes/common/img/family-sprite.png') no-repeat -50px 0;
}
.recomm-slider .controls a.prev:active {
   left: -36px;
}
.recomm-slider .controls a.next {
   left: 35px;
   float: right;
   background: url('/ux/themes/common/img/family-sprite.png') no-repeat 0 0;
}
.recomm-slider .controls a.next:active {
   left: 36px;
}
.recomm-slider .controls a.disabled {
   top: 130px;
   width: 0;
}
.recomm-slider .slider-wrap .list > li {
   float: left;
   width: 200px;
   padding: 20px;
   border-right: #ddd solid 1px;
}
.recomm-slider .photo {
   width: 100%;
   height: 220px;
   text-align: center;
}
.recomm-slider .photo .tablecell {
   vertical-align: middle;
}
.recomm-slider .photo img {
   width: auto;
   max-width: 200px;
   height: auto;
   max-height: 220px;
}
.recomm-slider .rank li {
   display: inline-block;
   width: 20px;
   height: 19px;
   margin-top: 10px;
   background: url('/ux/themes/common/img/star_grey_big.png');
}
.recomm-slider .rank li.on {
   background: url('/ux/themes/common/img/star_orange_big.png');
}
.recomm-slider .label {
   margin: 15px 0;
}
.recomm-slider .label a {
   color: #000;
}
.recomm-slider .label a:hover {
   text-decoration: underline;
}
.recomm-slider .price span {
   font-size: 22px;
   margin-right: 5px;
}
.recomm-slider .price span:before {
   content: '$';
}
.recomm-slider .price.sale span {
   font-size: 18px;
   text-decoration: line-through;
   color: #888;
}
.recomm-slider .price.sale span:last-of-type {
   font-size: 22px;
   text-decoration: none;
   color: #db0049;
}

/* ------ Carousel ------ */

.related-product {
    min-height: 360px;
    width: 741px;
    width: 965px;
}

.related-product .slider-controls {
    border: 1px none #f00;
    display: none;
    position: absolute;
    width: 741px;
    width: 965px;
    z-index: 10;
}

.related-product .slider-controls a {
    display: inline-block;
    height: 50px;
    position: relative;
    top: 150px;
    transition: width 0.2s ease 0s, top 0.2s ease 0s;
    -webkit-transition: width .2s, top .5s;
    -moz-transition: width .2s, top .5s;
    -ms-transition: width .2s, top .5s;
       transition: width .2s, top .5s;
    width: 50px;
}

.related-product .slider-controls a.prev {
    background: url("/ux/themes/common/img/family-sprite.png") no-repeat scroll -50px 0 rgba(0, 0, 0, 0);
    float: left;
    left: -35px;
}

.related-product .slider-controls a.next {
    background: url("/ux/themes/common/img/family-sprite.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    float: right;
    left: 35px;
}

.related-product .slider-controls a.disabled {
    top: 130px;
    width: 0;
}

.related-product  .swiper-container {
    border: 1px none #000;
    overflow: hidden;
    width: 741px;
    width: 930px;
}

.related-product  .swiper-container .list-item {
    margin-right: 0;
    /*padding: 0 9px 0 9px; TRU-15089*/
    padding: 0 5px;
}

.related-product .quick-shop {
   font-size: 14px;
   font-weight: bold;
   position: absolute;
   z-index: 20;
   /*display: inline-block; Jira issue http://slsfcjira01.speedfc.com:8080/browse/TRU-2083 */
   display: table;
   width: 150px;
   padding: 0;
   color: #fff;
   background: rgba(0, 78, 188, .8);
   transition:margin-top .2s;
   text-align: center;
   height: 34px;
   line-height: 34px;
}

.related-product .quick-shop span {
   display: table-cell;
   vertical-align: middle !important;
}

.related-product .item-img:hover .quick-shop {
   margin-top: -34px;
}

.list-container .list-wrapper .list-item .item-info {
    background-color: #fff;
    padding-top: 1px;
    position: relative;
    z-index: 24;
}

.list-container .list-wrapper .list-item .item-img {
    position: relative;
}

.center {
  text-align: center !important;
}