Need to make one button orange but theme overrides all attempts!

Need to make one button orange but theme overrides all attempts!

I'm using the classic JQM theme which is contained in mytheme.css.
  1. <link rel="stylesheet" href="jquery.mobile/jquery.mobile.icons.min.css" /> 
    <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.4.5.min.css" />
    <link rel="stylesheet" href="mytheme.css" />
    <script src="jquery.mobile/jquery-2.1.4.min.js"></script>
    <script src="jquery.mobile/jquery.mobile-1.4.5.min.js"></script>

The relevant HTML looks like this:
  1. <div id="homePage" data-role="page" data-content-theme="b" data-theme="b">   
        <div class="ui-grid-solo">
        <input type="button" id="my_id" class="alert" data-theme="e" value="My Button">         
        </div>
    </div>

I've tried several things to change the color of my_id to darkorange including leaving out the data-theme and setting the .css as follows:


  1. #my_id .ui-page .ui-content .ui-btn .ui-btn-inner
    {
        color      : black;
        background :darkorange !important;
    }
  2. #my_id .ui-btn {
       background: #ffa500 !important;
       background-image: -moz-linear-gradient(top, #ffa500, #ffa500) !important;
       background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #ffa500), color-stop(1, )) !important;
       color: black;
       text-shadow: 0px 0px 0px ;
       font-size: 40px;
       border: none;
    }

I've also tried changing the color via jquery and still nada
  1.   $('#shooter').parent().find('.ui-btn-inner').css("background-color", "orange !important");

Everything else is perfect... just one button with a needed color change... So, what's the trick?