Проблема с CSS в ASP.NET GridView при включенной сортировке

Я создал GridView в приложении ASP.NET и использовал инструмент «Автоформат», чтобы применить привлекательный стиль. Теперь я перемещаю разметку стиля на лист CSS, и у меня возникает странная проблема, когда текст в строке заголовка имеет неправильный цвет (он должен быть белым, но отображается ярко-синим). Эта проблема появляется только тогда, когда я включаю сортировку.

Все остальное работает нормально. Например, я могу изменить фон заголовка на красный, и он станет красным, а остальные стили сетки будут применены соответствующим образом.

Кто-нибудь знает, в чем заключается сделка? Я включил фрагменты кода ниже. Я также новичок в CSS. Дайте мне знать, если у кого-нибудь есть советы по улучшению моей разметки CSS.

Спасибо!

Вот код ASP.NET. Я могу добавить ForeColor = "White" в HeaderStyle, и все работает нормально.

<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" />

А вот содержимое таблицы стилей, которую я использую:

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;
}