That is basically just increasing the margin and negative margin on main and header wrappers.
You have rules that affect these all over the place, which makes it much harder to control. Move the #mainWrapper and #headerWrapper rules from the bottom of the stylesheet, and modify rules near the top like this:
(old)
Code:
/*bof wrappers - page or section containers*/
#mainWrapper {background:transparent;text-align: left;width: 860px;vertical-align: top;border: 1px solid #000000;margin-bottom: 50px;}
#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {margin: 0em;padding: 0em;}
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {margin: auto;}
(new)
Code:
/*bof wrappers - page or section containers*/
#mainWrapper {background:transparent;text-align: left;width: 860px;vertical-align: top;border: 1px solid #000000; margin: 134px auto 50px;}
#headerWrapper{margin-top: -134px !important;}
#contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #popupAdditionalImage, #popupImage {margin: 0em;padding: 0em;}
#navColumnOneWrapper, #navColumnTwoWrapper {margin: auto;}
#headerWrapper{margin-top: -134px !important;} needs the !important because there is still some rule with #headerWrapper in it that sets the margin. I'm not going to take more time to try to find it, but you might want to so you can simplify the rule without the !important.
Bookmarks