Trouble changing ui-button border for ColVis buttons

devgreer

I'm having trouble styling ColVis buttons, specifically with the button.ui-button border. Everything else seems to be changeable, but that border just stays there, at least for the buttons in the drop down. I've managed to get rid of the border on the master button by using a combination of a css style and a jQuery call in fnDrawCallback:

[code]
.no-border-MasterButton {
border: 0px solid #fff;
display: inline-block; position: relative; padding: 0; margin-right: .1em; cursor: pointer; text-align: center; zoom: 1; overflow: visible;
background: #eee url("<?=CODE_HREF?>/js/list_icon.png") no-repeat right top;
height: 25px;
width: 25px;
}

fnDrawCallback: function (o) {
var nColVis = jQuery('div.ColVis button', o.nTableWrapper)[0];
jQuery('div.ColVis button').removeClass('ui-button').addClass('no-border-MasterButton');
},

[/code]

But the dropdown buttons are still immune, each one still has a border coming from button.ui-button, as shown in the inspector. I think this is because they don't exist at the time the master button is drawn, so fnDrawCallback won't be activated. But I could be wrong about that, because a console.log(nColVis) in the callback does show each of the buttons.

The dropdown buttons themselves are successfully styled with:

[code]
.ColVis_Button.TableTools_Button.ui-button.ui-state-default {
background: #eee;
padding: 0 1px 0 0px;
margin: 0;
}
[/code]

But changing the border there does nothing, as button.ui-button always overrides everything, unless it is removed in post processing.