body {
    display: block;
}

#site {
    background: #F7F4ED none repeat scroll 0 0;
    /*margin: 1em 50px 2em 100px;*/

    /*the margin affect the gap between the elements*/
    margin: 0 0 2em 0;
    overflow: hidden;
    /*padding: 15px 0;*/
    padding: 12px 0 12px 33px;
    position: relative;
    width: auto;
}

#site .cnt {
    padding: 0 0 0 2em;
    position: relative;
}

#site h2 {
    margin-bottom: -0.5em;
    position: relative;
    z-index: 10;
    border: 0;
}

h2 {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    margin: 0.83em 0;

}

#site .product {
    float: left;
    margin-top: 0.5em;
    position: relative;
    width: 24%; /* the width of each product*/
}

#site .product a {
    display: block;
    margin-right: 15px;
}

#site .product img {
    display: block;
    left: 0;
    /* layout control: margin-top is distance the wave function moves the image.*/
    margin-top: 20px;
    position: absolute;
    top: 0;
}

#site .product .card_img {
    background: transparent url(../images/card_shadow_163_e.png) no-repeat scroll left bottom;
    display: block;
    /* layout control: the height determines the gap between the image and the (shadow and text) below it */
    height: 168px;
    position: relative;
}

img {
    border: none;
}