How to overide CSS for a standard search component

Hi,

I've been working on an issue that I can't seem to solve. We are using the standard search component (common.widget.search-form) for our custom community portal. We need to style it to match our branding, but I can't get any CSS I add to our CSS skin file to overide the default CSS.

Of course I don' t have access to the id or class selectors that are used for the input box of the standard search component, so I use the browser inspect mode to find the selectors. When inspecting the element that I need to style, I can chose Copy Selector and it provides the id as the selector of the element:

#messageSearchField_6faf4e5e8c8ec1 (Which I assume is simply '#messageSearchField')

or if I remove the ID, it returns:

#form_6faf4e5e8c8ec1 > span.lia-search-input-wrapper > input.lia-form-type-text.lia-autocomplete-input.search-input.lia-search-input-message

otherwise, my CSS column in the Chrome inspector gives me this selector:

#lia-body .lia-content .lia-component-common-widget-search-form input.search-input

How do I reference (select) the input element in my CSS skin file based on the above? I've tried several of the above, and I can't get the style override to work. For example:

#lia-body .lia-content .lia-component-common-widget-search-form input.search-input {

width: 504px;
height: 23px;
float: left;
margin-right: 10px;
border-color:red;

}

* I've even added '!important' at the end of each attribute to see if it will override.

I'm fairly new to CSS, so its possible I'm just not selecting the input element correctly. Any help is appreciated!