/*

    <a class='thumbnail' href='#'>
        <span>
            <img src='image.jpg' />
        </span>
    </a>

*/

/* -- Normal ------------------------------------------------------ */
.thumbnail , .thumbnail span , .thumbnail img{
    width: 90px;   /* width - padding*2 , padding = 5 */
}

.thumbnail , .thumbnail span{
    height:      56px; /* width * .64 */
    line-height: 56px;
}

/* -- Tiny ------------------------------------------------------ */
.thumbnail-tiny , .thumbnail-tiny span , .thumbnail-tiny img{
    width: 55px;
}

.thumbnail-tiny , .thumbnail-tiny span{
    height:      38px;
    line-height: 38px;
}

/* -- Small ------------------------------------------------------ */
.thumbnail-small , .thumbnail-small span , .thumbnail-small img{
    width: 70px;
}

.thumbnail-small , .thumbnail-small span{
    height:      45px;
    line-height: 45px;
}


/* -- Medium ------------------------------------------------------ */
.thumbnail-med , .thumbnail-med span , .thumbnail-med img{
    width: 120px;
}

.thumbnail-med , .thumbnail-med span{
    height:      70px;
    line-height: 70px;
}

/* -- Big --------------------------------------------------------- */
.thumbnail-big , .thumbnail-big span , .thumbnail-big img{
    width: 170px;
}

.thumbnail-big , .thumbnail-big span{
    height:      125px;
    line-height: 125px;
}

/* -- Tall --------------------------------------------------------- */
.thumbnail-squared , .thumbnail-squared span , .thumbnail-squared img{
    width: 110px;
}

.thumbnail-squared , .thumbnail-squared span{
    height:      110px;
    line-height: 110px;
}

/* -- Dont Customize unless you know what you are doing ------------ */
.thumbnail ,
.thumbnail-tiny,
.thumbnail-small,
.thumbnail-med,
.thumbnail-big,
.thumbnail-squared
{
    display:               -moz-inline-block;
    display:               inline-block;
    background:            white;
    margin:                0px;
    padding:               5px;
    border:                1px solid #a0a0a0;
    border-radius:         2px;
    -moz-border-radius:    2px;
    -webkit-border-radius: 2px;
    vertical-align:        top;
    white-space:           nowrap;
}

.thumbnail:hover ,
.thumbnail-tiny:hover ,
.thumbnail-small:hover ,
.thumbnail-med:hover ,
.thumbnail-big:hover ,
.thumbnail-squared:hover{
    border:  1px solid #727272;
}

    .thumbnail         span ,
    .thumbnail-tiny    span ,
    .thumbnail-small   span ,
    .thumbnail-med     span ,
    .thumbnail-big     span ,
    .thumbnail-squared span{
        margin:                0px;
        padding:               0px;
        display:               -moz-inline-block;
        display:               inline-block;
        vertical-align:        top;
        overflow:              hidden;
        outline:               1px solid #a0a0a0;
        background:            white;         
    }

    .thumbnail          img ,
    .thumbnail-tiny     img ,
    .thumbnail-small    img ,
    .thumbnail-med      img ,
    .thumbnail-big      img ,
    .thumbnail-squared  img {
        border:         0;
        vertical-align: middle;
        cursor:         pointer;
    }