﻿#content{
    width: 680px;
    padding-right: 25px;
}

.products h2 {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #d1d1d1;
    border-left: 1px solid #fff;
    border-right: 1px solid #d1d1d1;
    padding: 5px 10px;
    margin: 0;
    color: #143D8D;
    font-size: 1.2em;
    background: #eeeeee url(products_h3.gif) repeat-x 0 0;
}

.products ul {
    margin:1em -20px 3em 0;
    min-height:1px;
} * html .products ul {height: 1px;} .products ul:after {content: "."; height: 0; visibility: hidden; display: block; clear: both; }


.products ul li {
    list-style: none;
    padding: 5px;
    float: left;
    width: 115px;
    height:auto !important;
    height:165px;
    min-height: 165px;    
    background: #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: none;
    margin: 0 12px 10px 0;
    border-bottom: 1px solid #c5c5c5;
    position: relative;
    font-size: 12px;
    line-height: 1.3em;
    text-align: center;
}

.products ul li a.product_title {
    padding-top: 10px;
    display: block;
}

.products ul li img {
    padding: 0;
    margin: 0 auto;
    width: 80px;  
    display: block;
}

.new-product {
    position:absolute;
    top:0;
    left:0;
    width:40px;
    height:40px;
    background:url(new-product.png) no-repeat top right;
}
.featured-product-tile {
    margin-top: -40px;
    margin-bottom: 20px;
}
/* Because the White Sugar Cube product image looks all wrong. 
We should probably alter the layout of the product tiles to make sure 
the text is always in the correct position regardless of the size of 
the product image avoe it. */
img[src="/_uploads/products/14be2b17-8c7c-4414-b795-94bf4419d981.jpg"] {
    margin-top: 30px !important;
}

