Overlay off-centre

Hi there,

I am trying to resolve an issue on the following web page:

If you click on the large image of the pen at the top, you’ll see the overlay works perfectly and is seamless when navigating through the slideshow.

However, if you scroll down the page to the gallery of images at the bottom and click on one of them, the overlay appears in the bottom right of the screen. The CSS
for that particular overlay is:

#TB_overlay {
    position: fixed;
    z-index: 10100;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}

And for the window inside the overlay:

#TB_window {
    position: fixed;
    z-index: 10102 !important;
    color: rgb(0, 0, 0);
    text-align: left;
    border: 1px solid rgb(85, 85, 85);
    box-shadow: 0px 4px 30px rgb(0, 0, 0);
    display: none;
    background: none repeat scroll 0% 0% rgb(255, 255, 255);
    top: 50%;
    left: 50%;
}

I need to get this fixed ASAP so if anyone can point me in the right direction, I’d be very grateful.

The images in the lower lightbox effect are being absolutely positioned.

top:50% and left:50% puts the top left corner of the image box in the center of the viewport.

To center these bottom images on the screen, each must have negative margins applied as follows,

margin-top:-nnnpx; /* nnnpx = 1/2 the height of the image /
margin-left:-nnnpx; /
nnnpx = 1/2 the width of the image */