Unwanted Area in a Modal Dialog

I’ve been building a modal dialog with CSS and JavaScript, and up to this point I’ve finished all of the JS. I’m now just finishing up the CSS, trying to look more like what I need. However, I’ve hit a small problem:

[url]http://www.lunar-arts.com/moonray/[/url]

If you take a look, you can see I went and moved the position of a close button image. The problem lies not with that, but the fact that the original area it was in cannot be resized and reshaped in any way. The black border is meant to signify the entire area of the dialog.

I need that grey area above to either be removed, or at least shrunk, before I can make use of it. Part of the reason why is because even though I have that button for closing, I’ve designed it to allow the user to close the dialog just by clicking anywhere else in the browser (Or more correctly, anywhere else on the page in the background). However, that grey area is not considered, so that entire grey area doesn’t close the browser like it should. While I know I could probably just add the functionality to it, I’d rather see if I can first remove it.

[url]http://www.lunar-arts.com/moonray/subModal.css[/url]
[url]http://www.lunar-arts.com/moonray/subModal.js[/url]

… are the CSS and JS files related.

Also in #CSS _↴