CSS using :not selector and borders
===

I have some CSS like so:

    table.varTabs th
    {
	border-collapse: collapse;
	border-bottom: #637356 2px solid;	
    }

    table.varTabs th.active
    {
	border-collapse: collapse;
	border-bottom: #637356 0px solid;
    }

This is used in my table to show and hide borders under my th (which are tabs at the top of the table).  So in Firefox, it works correctly that when active is in the class, the bottom border that it gets from the base css, gets removed. But my Chrome version isn't happening that way.

How do I use CSS to select the table.varTabs th that don't have active in the class? (I want a CSS approach and not JQuery or adding a unactive class in the HTML).