﻿.products-wrapper {
    width: 920px;
    float: left;
}

.products-wrapper h1 {
    margin: 0;
    padding: 10px 0 10px 20px;
    width: 880px;
}

#products {
    width: 900px;
    padding-left: 20px;
}

#products ul  {    
    padding: 0;   
}

#products ul li {          
    display: inline-block;    
}

.product-list ul li {
    width: 900px;
    height: 260px;
    text-align: left;
}

.product-gallery ul li {
    width: 300px;
    height: 400px;
    text-align: center;
}

.product {    
    background: white;
    position: absolute;
    border-bottom: solid 1px lightgray;
    color: #4d4d4d;    
}

.product-list .product {
    width: 900px;
    height: 260px;
}

.product-gallery .product {
    width: 300px;
    height: 400px;
}

.product-img {
    width: 220px;
    height: 220px;
    padding-top: 20px; 
}

.product-list .product-img {
    float: left;
    padding-left: 20px;
}

.product p {
    margin: 0;    
}

.product-name {
    font-weight: bold; 
    height: 40px;
    line-height: 20px;
    padding: 0 20px;
    overflow: hidden;
}

.product-list .product-name {
    top: 20px;    
    position: absolute;
    display: inline-block;
}

.product-description {
    text-align: left;    
    padding: 0 20px;
    overflow: hidden;
    line-height: 1.25em;
}

.product-gallery .product-description {
    height: 3.75em;
}

.product-list .product-description {
    display: block;
    height: 140px; 
    margin-top: 60px;       
}

.product-price {
    font-size: 14pt;
    color: #f60;
    font-weight: bold;
    padding: 20px;    
    text-align: right;
}

.product-list .product-price {
    float: right;
}

.product:hover {            
    height: auto;
    background: white;
    z-index: 100;
    box-shadow: 0 0 5px gray;
}

.product-gallery .product:hover {                
    min-height: 400px;   
}

.product-list .product:hover {        
    min-height: 260px;   
}

.product:hover .product-name {    
    color: #FF6600;
    text-decoration: none;
    height: auto; 
}

.product-buy-button {
    width: 120px;
    float: left;
    margin: 10px 0px 0 20px;
    padding: 5px 10px;
    border-radius: 3px;
    background-image: linear-gradient(to bottom, #f78510, #fc7520);
    border: 1px solid #f0751c;
    color: #fff;
    font-weight: bold;
    font-size: 22px;
    text-align: center;
    display: none;
}

.product-buy-button:hover {
    background-image: linear-gradient(to bottom, #fba419, #fd9729);
    border: 1px solid #f29720;
}

.product-buy-button img {    
    float: left;
}

.product:hover .product-buy-button {
    display: block;
}

.product-gallery .product:hover .product-description {
    height: auto;
    min-height: 60px;
    max-height: 12.5em;
}

.product-list .product:hover .product-description {        
    height: auto; 
    min-height: 140px;   
}

/* product-filter */

.product-filter-wrapper {
    float: left;  
    width: 280px;  
}

.title-group {
    padding: 5px 0 0 15px;
    font-weight: bold;
}

.product-filter a {
    display: block;
    padding: 10px;
    border: solid lightgray;
    border-width: 0px 1px 1px 1px;
    line-height: 20px;
    text-decoration: none;
    color: #4d4d4d;
    box-sizing: border-box;
}

.product-filter a.selected {    
    color: white;
    font-weight: bold;
}

.product-filter a:not(.selected):hover {
    background: #f5f5f5;
}

.product-filter ul {
    margin: 0;    
    padding: 0;
}

.product-filter li {
    list-style-type: none;
    list-style-position: outside;
}

.product-filter ul li:first-child a {
    border-top: solid lightgray 1px;
}

.product-filter .selected {
    background: #e62e04;
    border: solid #e62e04 1px;
    color: white;
}

.product-filter .selected-subcategory {
    padding-left: 40px;
    font-weight: bold;
}

.product-filter ul li ul {
    padding: 0;
}

.product-filter ul li ul li:first-child a
{
    border-top: 0px;
}

.product-filter ul li ul li a {
    padding-left: 30px;
}

.show-more {
    color: #e62e04 !important;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    cursor: pointer;
}

/* brand-filter */

.brand-filter {
    width: 890px; 
    margin: 0 10px;
    padding: 10px;
    border: solid lightgray 1px;
}

.brand-filter-header {
    display: inline-block;
    padding: 10px 5px;
    font-weight: bold;
}

.brand-list a {
    display: inline-block;
    margin: 3px;
    padding: 8px;
    color: #4d4d4d;
    border: 1px solid lightgray;
    border-radius: 2px;
    text-decoration: none;
}

.brand-list a:hover {
    cursor: pointer;
    border-color: #f60;
}

.subcategory-list a:hover {
    background: #fff4e5;
}

.brand-list a.selected {
    border-color: #f60;
}

.subcategory-list a.selected {
    background: #fff4e5;
}

.brand-list img {
    width: 50px;
    height: 25px;
}

.clear-fiter {
    color: #576e75;
    font-size: 15px;
}

/* product-controlpanel */
.product-controlpanel {
    width: 880px;
    height: 20px;
    margin: 0 10px;
    padding: 15px;
    display: inline-block;
    background: #f5f5f5;
}

.product-controlpanel .pager {
    width: 500px;
    display: inline-block;
}

.product-controlpanel .products-display-settings {
    top: 0;
    padding: 0;
    float: right;
    position: relative;
    display: inline-block;
}

.products-display-settings a {
    text-decoration: none;    
    color: #4d4d4d;    
    margin: 0 3px 0 0;
    padding: 4px 6px;
}

.products-display-settings a:hover {    
    cursor: pointer;
}

.products-display-settings a:hover:not(.active) {
    color: #F90;
}

.products-display-settings img {
    top: -2px;
    position: absolute; 
}

.products-display-settings img:not(.active) {
    cursor: pointer;  
}

.sort img {
    top: 7px;    
}

.sort .active {
    color: #FF6600;
}

.display-type {
    margin-left: 15px; 
}

.display-type span {   
    width: 25px;
    display: inline-block;
}

.noresult-message {
    padding-left: 10px;
    line-height: 30px;
    font-weight: bold;
}

.noresult-message a {
    color: #FF6600;
    text-decoration: none; 
}

.noresult-message a:hover {
    text-decoration: underline; 
}

.recently-viewed-products-wrapper {
    margin-top: 20px;
    padding: 20px 0 10px;
    border: 1px solid lightgray;
    box-sizing: border-box;
    text-align: center;
}

.recently-viewed-products {
    padding: 20px 10px 0;
}

.recently-viewed-products a {
    text-decoration: none;
}

.recently-viewed-products img {
    width: 100px;
    height: 100px;
    margin: 5px;
    border: solid 1px lightgray;   
}

.category-text {
    width: 900px;
    padding: 0 20px;
}

.category-text a {
    color: #4d4d4d;
    font-weight: bold;
    text-decoration: none;
}

.category-text a:hover {
    color: #e62e04;
    text-decoration: underline;
}

.category-text-img {
    float: right;
}