It depends what you want the final effect to be (of course!). The template css sets the outerWrapper to have a minimum height of 100% - this is to force the footer div (which is outside of the outerwrapper) to the bottom of the screen - whatever resolution monitor is used to view it. It also has the unfortunate effect of forcing a vertical scroll bar - regardless of window size.This means that on a high-resolution screen that there is likely to be white space between the bottom of the content and the top of the footer (depending on how much content there is), and on a smaller resolution screen or on a non-maximised window there will be little or no white space.
Having a minus 30px top margin on the footer div does mean that there will be some text covered up when viewing the page on a small res screen or on a small window in IE, and because of the min-height property mentioned above, will go no real way to reducing the white space. My opinion is that that is not such a good idea. I would give the footer a top margin of 0px as it will make no great difference to the white space issue, but will be aesthetically slightly better (only my opinion) in that it will stop the footer running over the text. I would also reduce the min-height of the outerWrapper div to around 92% to allow for content + footer without forcing a vertical scrollbar even on a maximised window. That would be my recommendation, for what it's worth.
The white space issue could be solved by puting the footer div inside the outerWrapper div, but then it would not be full width of the screen and would look a bit odd in the context of the overall design. There are also modifications that could be made to the background image to create a pseudo footer - but only if the page content was not going to change.
Anyway, practically any design requirement can be realised with css, so if there's anything I or the people can help with, then post back here.