Flash overlapping an html div

Hi,

I have a weather widget that is flash and expandable (Forecast). one of the issues i had is when I expand the widget, it wouldn’t expand passed the flash container size, so most of the content is cut up. I increased the size of the flash container and that worked. The problem is that the I have another facebook widget that is below the weather widget and that got pushed down a lot. I moved the facebook widget up with a negative margin and now they are aligned fine. BUT i can’t interact with the top part of the facebook widget. and I think the reason is that it is actually behind the flash container. it works fine on IE but i am trying to get it to work on chrome. I have changed the z-index to make the facebook widget on top of the flash, but the flash started to appear behind the facebook now. you can see it live on

TENNIS LOUNGE | MEET.PLAY.LEARN

Any help on how to resolve this issue would be greatly appreciated. I need to make this format work as i do not have much options.

Thanks!