Cat image goes to the thead part
 

It's hard to explain with words, so here is an image.
The yellow you see on the first part is thead.gif and the blue is cat.gif. I don't want the blue to be the background of the section that says Thread tools etc. Where do I change it so that it looks like it does on the bottom part? So that the thead continues and cat doesn't get involved with that part

In the advanced CSS for a style.
Goto .vbmenu_control attribute.

You just need to change there..
If the template is modified you need to check in showthread template what are classes.

Where can I find that advanced CSS

Select a Style > style options > advanced css

There is no such thing :/

Styles and template > style manager > select a style > on the drop down to right you will find Main CSS

Should I change something in this, if so what?

/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 12pt; }

/* ***** small padding on 'thead' elements ***** */
td.thead, th.thead, div.thead { padding: 4px; }

/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }

/* ***** de-emphasized text */
.shade, a.shade:link, a.shade:visited { color: #777777; text-decoration: none; }
a.shade:active, a.shade:hover { color: #FF4400; text-decoration: underline; }
.tcat .shade, .thead .shade, .tfoot .shade { color: #DDDDDD; }

/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }

Find the .vbmenu_control option its above the advanced css part u jus copy paste..
just do a browser find and put .vbmenu_control.. ull see it and edit that