.magnifyarea { /* CSS to add shadow to magnified image. Optional */
    box-shadow: 5px 5px 7px #818181;
    -webkit-box-shadow: 5px 5px 7px #818181;
    -moz-box-shadow: 5px 5px 7px #818181;
    filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
    background: white;
}

.targetarea { /* CSS for container div(s) of the zoomable image */
    width: 100%; /* wide or wider than the widest zoomable image */
    height: auto; /* high or higher than the tallest zoomable image */
    /*float:right;*/
}

#two { /* Added CSS for second target div of zoomable images */
    height: 243px; /* high or higher than the tallest zoomable image */
}

.targetarea img { /* zoomable image */
    margin: auto; /* for horizontal centering */
    display: block; /* also for horizontal centering */
    position: relative !important; /* along with on the fly calculations in script, for vertical centering */
    border-width: 0;
    width: 100% !important;
    border: 1px solid #eee;
    height: auto !important;
    top: 0 !important;
}

.thumbs { /* divs holding the trigger links - styles optional, used here to center their links below their respective zoomable image */
    width: 100%;
}

    .thumbs a { /* trigger links on the thumbnail images */
        text-decoration: none; /* avoid underlines of images, text or spaces in these links */
    }

    .thumbs img { /* trigger images - the thumbnails used to load new zoomable images into the targetarea */
        border: 1px solid #eee; /* avoid default borders in some browsers */
        margin: 3px;
        height: 50px;
    }

#description, #description2 {
    position: absolute; /* required for description folows image bottom (descpos: true) */
    width: 280px; /* should be width of zoomable image container (.targetarea) */
    text-align: center;
    font: bold 95% sans-serif;
    margin-top: 3px; /* when following image bottom, this sets a fixed distance for that */
    color: #222;
    background-color: #fff;
}