Different CSS on posts and archive page

Hi, I am making a theme for a client on my test domain at
http://test4.e9designs.com
It is a custom child theme based on the Genesis theme.

The client wants TWO headers on each page. The top header has the blog’s title, but the background images rotate depending on the category the visitor is viewing. With the use of the “Unique Headers” plugin, I’ve got that working.

The second header is visible on all pages except index. It will have the category title, and again, the background images should rotate depending on which category it is.

I have NOT been able to figure this out, so I cheated and just uploaded a background image into the code, like this:

/* Category Headers
------------------------------------------------------------ */

body.single-business div.post {
	background: url('http://test4.e9designs.com/wp-content/uploads/2013/02/business-large.png') no-repeat center top;
	padding: 0px 0px 164px 0px;
}

body.single-wisdom div.post {
    background: url('http://test4.e9designs.com/wp-content/uploads/2013/02/wisdom-large.png') no-repeat center top;
	padding: 0px 0px 164px 0px;
}

body.single-nature div.post {
    background: url('http://test4.e9designs.com/wp-content/uploads/2013/02/nature-large.png') no-repeat center top;
	padding: 0px 0px 164px 0px;
}

On the posts, I used the “Ambrosite Body Class Enhanced” plugin to help me define classes for each category in the CSS. Maybe I didn’t need it, but I’m still learning, and this seemed to work.

On the category archives pages, I went into the Category section of the dashboard and just added an image to the Archive Intro Text of the Category Archive Settings.

The problem, which you can see an example of at
http://test4.e9designs.com/category/business/
is that there is a huge white space under the 2nd header, before the post content begins.

It looks just fine on the post pages, as you can see at
http://test4.e9designs.com/sample-post-with-headlines/

Here is the offending code:

#content .post {
    border-bottom: 1px solid #DFDFDF;
    margin: 0;
    overflow: hidden;
    padding: 174px 20px 15px;
}

I am *sure* there is a better way to do this, but I just can’t figure it out.

Even worse, I don’t like that all these images are coded into the CSS style sheet, because my client was really hoping to be able to make these changes himself, through the media library. However, I think it’s getting beyond my skills, unless I could find a plugin to solve the problem.

Can anyone advise? Thank you *so* much!
~Anne