Css – ASP.NET GridView CSS issue when sorting turned on

I created a GridView in an ASP.NET application and used the Auto Format tool to apply an attractive style. Now I'm moving the style markup to the CSS sheet and I'm having a weird problem where the text in the header row isn't the correct color (it should be white but it shows up a bright blue). This problem only shows up when I turn sorting on.

Everything else works fine. For example, I can change the header background to red and it turns red and the rest of the grid styles are applied appropriately.

Anybody have any clues about what the deal is? I've included code snippets below. I'm also fairly new to CSS. If anyone has any tips to make my CSS markup better in some way, let me know.

Thanks!

Here is the ASP.NET code. I can add ForeColor="White" to the HeaderStyle and everything works normally.

<asp:GridView ID="GridView1" runat="server" CssClass="grid"
AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="SqlDataSource1" 
EmptyDataText="There are no data records to display." AllowSorting="True" 
CellPadding="4" GridLines="Both">
<FooterStyle CssClass="grid-footer" />
<RowStyle CssClass="grid-row" />
    <Columns>
        <asp:BoundField DataField="Kingdom" HeaderText="Kingdom" 
            SortExpression="Kingdom" />
        <asp:BoundField DataField="Phylum" HeaderText="Phylum" 
            SortExpression="Phylum" />
        <asp:BoundField DataField="GenusSpeciesStrain" HeaderText="Genus species (strain)" 
            SortExpression="GenusSpeciesStrain" />
        <asp:BoundField DataField="Family" HeaderText="Family" 
            SortExpression="Family" />
        <asp:BoundField DataField="Subfamily" HeaderText="Subfamily" 
            SortExpression="Subfamily" />
        <asp:BoundField DataField="ElectronInput" HeaderText="Electron Input" 
            SortExpression="ElectronInput" />
        <asp:BoundField DataField="OperonLayout" HeaderText="Operon Layout" 
            SortExpression="OperonLayout" />
    </Columns>
    <PagerStyle CssClass="grid-pager" />
    <SelectedRowStyle CssClass="grid-selected-row" />
    <HeaderStyle CssClass="grid-header" />
    <EditRowStyle CssClass="grid-row-edit" />
    <AlternatingRowStyle CssClass="grid-row-alternating" />

And this is the content from style sheet I'm using:

body {
}

.grid
{
    color: #333333;
}

.grid-row
{
    background-color: #EFF3FB;
}

.grid-row-alternating
{
    background-color: White;
}

.grid-selected-row
{
    color: #333333;
    background-color: #D1DDF1;
    font-weight: bold;
}

.grid-header, .grid-footer
{
    color: White;
    background-color: #507CD1;
    font-weight: bold;
}

.grid-pager
{
    color: White;
    background-color: #2461BF;
    text-align: center;
}

.grid-row-edit
{
    background-color: #2461BF;
}