So I'm styling a Sench Touch 2 App and I'm having trouble getting my new CSS to override the sencha-touch.css file.

I don't have a problem when there isn't a style already existing in Sencha's CSS.

Here's the order of my file references

Code:
        <link rel="stylesheet" type="text/css" href="touch2/resources/css-debug/sencha-touch.css">
        
        <!-- Default CSS -->
        <link rel="stylesheet" href="css-default.css" media="screen">
        
        <!-- Retina only CSS -->
        <link rel="stylesheet" href="css-retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)">


        <script type="text/javascript" src="touch2/sencha-touch-debug.js"></script>
        <script type="text/javascript" src="app.js"></script>
Here's an example of some styling I've been struggling with for buttons in the top toolbar with a custom UI class

Code:
/* TOOLBAR BUTTON STYLES */

.x-button-mgpToolbarBtn{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(131,96,2,0.6)), color-stop(99%,rgba(76,50,9,0.6)));
box-shadow: inset 0 0 .25em #56380c; 
border: none;
font-family: 'PacificoRegular';
font-weight: normal;
font-style: normal;
}

.x-button-mgpToolbarBtn .x-button-label{
color: #dabf98;
/* If I try to apply label font styles here other than color it doesn't work at all. */
}

.x-button-pressed.x-button-mgpToolbarBtn{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(131,96,2,0.6)), color-stop(99%,rgba(76,50,9,0.6)));
box-shadow: inset 0 0 .25em #56380c; 
border: none;
}
The button text is showing up as bold and the original gray background gradient and color would not be replaced by my new CSS. The only way I can get it to work is be deleting the styles from the sench-touch.css file. I feel like that would be bad practice.

I want to do this properly but I've hit a roadblock.

(I also want to avoid using SASS and Compass for the time being.)

If anyone has any direction that would be appreciated!

Thanks!

Shayne