Tweek the column header row style

How can I tweek the header row style? For example, I want the cell to be underlined with a yellow line (just like in Windows Explorer) when the mouse mouves over it.

Also, how do I specify that I want one of the columns to expand to the maximum available space? I currently have:
.active-column-0 {width: 100px}
.active-column-1
.active-column-2 {width: 150px}

What I want is for column number 1 to take the entire available width minus 250px.

To tweek the header style you need to modify CSS for those classes:

/* header - inner DIV */
.active-box-item {border: none; background: #9cf}

/* header - outer DIV */
.active-box-normal {border-color: #9cf #00f #00f #9cf;}

To add mouseover effects:

var header = new Active.Templates.Header;
header.setEvent("onmouseover", "mouseover(this, 'active-header-highlight')");
header.setEvent("onmouseout", "mouseout(this, 'active-header-highlight')");
obj.setTemplate("top/item", header);

with CSS:
.active-header-highlight {border-bottom: 1px solid red}

If you want to achieve exactly XP look - you may need to use background image instead of single-line border.

Alex, your suggestion works great! I created the following style in the CSS and it works like a charm:
.active-header-highlight {border-bottom: 2px solid gold}

However, I'm also trying to implement your second suggestion and I can't get it to work:
.active-header-highlight{background:url(MyImage.gif)}

That's probably because the background of the inner DIV takes the priority. Try instead:

.active-header-highlight .active-box-item {background:url(MyImage.gif)}

Once again: you are correct! Works great now.

Thanks for the help