css styling of tabbar

Ext 4.2.0

HTML

<script src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">

CSS

.mainTabPanel .x-tab-bar-default-top {
    background: green;
}
.mainTabPanel .x-panel-body-default {
    background: pink;
}

.mainTabPanel .x-tab-default {
    background: yellow;
    border: none;
    box-shadow: none;
}
.mainTabPanel .x-tab-default.x-tab-default-active {
    background: purple;
    border: none;
    box-shadow: none;
}

JavaScript

menuTabs = Ext.create('Ext.tab.Panel', {
    border: 0,
    region: 'center',

    cls: 'mainTabPanel',
    renderTo: Ext.getBody(),
    items: [{
        title: 'Tab 1',
        html: 'Tab 1 Details'
    }, {
        xtype: 'button',
        action: 'SSOLink',
        title: 'selfServiceBtnText',
        scale: 'large',
        width: 225,
        cls: 'button-text-size',
    }]
});