The solution is pretty straight forward.
Apply the repeatong horizontal shadow to the first element and the overlay to the second element.
e.g move the innerwrapper to be the first element on the page.
Then change the css:
[B] background-repeat: repeat-y;
background-position: 0 0;
You will need to remove the bottom line from the shadow-bg-main.jpg img of course.
When the image stops at the bottom the repeating background from behind takes over.
Looks like your right column is 1px to far over to the right as the background causes a jog. It doesn't need a background colour anyway