Help Resizing an Image Used in an Area Map with ANOTHER thickbox

Hello All,

The problem I am having is best seen visually.

If you go to this page I created you can see I made an image map over a picture. Each arrow changes on hover, and if you click an arrow, it opens up the relevant blog post in the same page.

I am very satisfied with this, and was honestly pleased I figured it out, as I am very inexperienced with html/css/etc

THE PROBLEM: I made the coordinates of the image map off of the full size image, which is ~1650 x 950. It looked too compressed when I resized the original image to fit the theme (about 500 x 335)

Clearly the image is too big, off center, and doesnt fit in most browsers.

Any ideas on how I can keep the image map, hover, and pop up, while centering and resizing the image?

Is it possible to put this area map, with the clickable popup/image map I already made inside ANOTHER thickbox, such that when you click a 500 x 335 image that fits, it pops up the 1650 x 950 area map, with the hover and links?

I was unable to figure out how to do this, if it is even possible.

Any other solutions or ideas would be greatly appreciated.

Here is my code

**note Ive tried things like changing the width in the div style but that distorts the image crazily

[Code moderated as per the Forum Rules. Please use the pastebin]