/* The outer container with a relative position */
#gallery {
    width:600px;
    height:auto;
    position:relative;
}

/* Float the ul to the right with a width to give 1 thumbnail images per row */
#gallery ul {
    list-style:none;
    padding:0;
    margin:8px 0 0 0;
    width:65px;
    float:right;
}
/* Place the list items inline using display:inline for IE and float:left */
#gallery ul li {
    display:inline;
    width:63px;
    height:88px;
    float:left;
    margin:0 0 5px 5px;
    border:1px solid #fff;
    cursor:pointer;
}
/* Set up the thumbnail images as the background images */
#gallery ul li.tb1 {
    background:url(../_img/carta1_p.png) 0px 0px;
}
#gallery ul li.tb2 {
    background:url(../_img/carta2_p.png) 0px 0px;
}
#gallery ul li.tb3 {
    background:url(../_img/carta3_p.png) 0px 0px;
}
#gallery ul li.tb4 {
    background:url(../_img/carta4_p.png) 0px 0px;
}
#gallery ul li.tb5 {
    background:url(../_img/carta5_p.png) 0px 0px;
}
#gallery ul li.tb6 {
    background:url(../_img/carta6_p.png) 0px 0px;
}
#gallery ul li.tb7 {
    background:url(../_img/carta7_p.png) 0px 0px;
}
/* Hide the full size images */
#gallery ul li span i img {
    display:none;
}
/* set up the .click style which will be added using javascript */
/* Change the li border to white */
#gallery ul li.click {
    border-color:#000;
    cursor:default;
}
/* Position the span using an absolute position and specify the width and height */
#gallery ul li.click span {
    position:absolute;
    left:0;
    top:0;
    width:500px;
    height:auto;
}
/* Set up the i so that it is the same size as the span BUT this has a static position so that the image can be both vertically and horizontally centered in all browsers except IE using display:table-cell */
#gallery ul li.click span i {
    width:500px;
    height:auto;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
} 
/* Make the image actual size using auto width and height */
#gallery ul li.click span i img {
    display:block;
    width:auto;
    height:auto;
    border:1px solid #fff;
    margin:0 auto;
}
/* set up the default image */
#gallery ul li.default {
    width:0;
    height:0;
    border:0;
}
#gallery ul li.default span {
    position:absolute;
    left:0;
    top:0;
    width:500px;
    height:auto;
}
#gallery ul li.default span i {
    width:500px;
    height:auto;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
} 
/* specify the image width and height for IE6 */
#gallery ul li.default span i img {
    display:block;
    width:195px;
    height:111px;
    border:1px solid #fff;
    margin:0 auto;
}
#gallery ul li.off {
    display:none;
}