CSS style not being applied with input-validation-error in ASP.NET MVC 4.0

I am trying to alter the border of an input to a different color when that input throws a validation error in ASP.NET MVC. From what I can tell, I am ndoing it correctly, but alas it doesn't work. This is mainly a CSS question, but I have posted all relevant information to the process.

First the code snippet for the view:

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <div class="form_settings">
        <fieldset>
            <legend>Create New Log</legend>
            <table id="error-organizer">
                <tr class="transparent">
                    <td class="transparent">
                        Employee
                    </td>
                    <td class="transparent">
                    </td>
                </tr>
                <tr class="transparent">
                    <td class="transparent">@Html.EditorFor(model => model.Requestor)
                    </td>
                    <td class="transparent">@Html.ValidationMessageFor(model => model.Requestor)
                    </td>
                </tr>

I am validating this in the model, not the controller, using a custom data annotation. I know that this works because I am getting the error messages in the browser as expected.

Here are the two CSS styles for this input.

#error-organizer input .input-validation-error
{
    border: 3px solid #cc0; 
}

.form_settings input, .form_settings textarea, .form_settings select { 
  padding: 5px; 
  margin: 0 0 8px 8px;
  width: 150px; 
  font: 100% arial; 
  border: 1px solid #6F6147; 
  background: #EFF8FB; 
  color: #47433F;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;  
}

The first style is what needs to be applied when the error happens. The second style is the default style that is currently taking precedence. However, note that if I remove the .input-validation-error from the first style, it overrides the second one all the time.

Finally, here is the relevant portion of the view source on the website (after triggering an error):

<form action="/QCLogs/Create" method="post"><div class="validation-summary-errors"><ul><li style="display:none"></li>
</ul></div>    <div class="form_settings">
        <fieldset>
            <legend>Create New Log</legend>
            <table id="error-organizer">
                <tr class="transparent">
                    <td class="transparent">
                        Employee
                    </td>
                    <td class="transparent">
                    </td>
                </tr>
                <tr class="transparent">
                    <td class="transparent"><input class="input-validation-error text-box single-line" data-val="true" data-val-number="The field Requestor must be a number." data-val-range="The field Requestor must be between 1 and 9999." data-val-range-max="9999" data-val-range-min="1" data-val-required="The Requestor field is required." id="Requestor" name="Requestor" type="number" value="1234" />
                    </td>
                    <td class="transparent"><span class="field-validation-error" data-valmsg-for="Requestor" data-valmsg-replace="true">Invalid employee number.</span>
                    </td>
                </tr>
                <tr class="transparent">
                    <td class="transparent">
                        Type
                    </td>
                    <td class="transparent">
                    </td>
                </tr>

From the behaviour, it seems as though the CSS style is not responding to the .input-validation-error class even though it says it is there in the view source. However, I am not a CSS master either so I am hoping it is something simple I am overlooking.

Many thanks in advance for your help.