[SalesForce] Trying to change the color of Create New button on left side bar of a standard Salesforce page

I am trying to change the css style of the standard Salesforce page. So far I have successfully changed most of the element style. I created a custom component in the left side bar and have overridden Salesforce css with my own custom css. There is one element I am not able to override. The "Create New" button on the left side bar of the Home page.

I am using the following CSS style to change the buttons color from its default blue to red.

      #sidebarDiv #createNew *{
      background-color: #952828!important;
     }

It works fine except one problem – the button is partially covered and there is small blue portion still visible on the right.

The complete css style is as follows:

<script type="text/javascript">
document.getElementsByTagName('nav')[0].style.border="1px solid white";
document.getElementsByClassName('left')[0].style.visibility = 'hidden';
document.getElementById('phHeaderLogoImage').style.visibility = 'visible';
document.getElementsByClassName('right')[0].style.visibility = 'hidden';
document.getElementsByClassName('multiforce')[0].style.visibility = 'visible';
document.getElementsByTagName('nav')[0].style.borderTopLeftRadius = '.5em'; 
document.getElementsByTagName('nav')[0].style.borderTopRightRadius = '.5em'; 
document.getElementsByTagName('nav')[0].style.MozBorderRadiusTopleft = '.5em';              document.getElementsByTagName('nav')[0].style.MozBorderRadiusTopright = '.5em'; 
document.getElementsByTagName('nav')[0].style.WebkitBorderTopLeftRadius = '.5em';
document.getElementsByTagName('nav')[0].style.WebkitBorderTopRightRadius = '.5em';
</script>

<style>

/* set the background color of the header and the title of the left side bar components */
.sfdcBody, .sidebarModuleHeader, #AppBodyHeader, #phHeader *{
background-color: #7e0b0b!important;
font-family: "Gill Sans",Georgia,Serif !important;
color: #c0c0c0!important;
}

/* set the background color of main body to grey */
#bodyCell {
background-color: #c0c0c0!important;
}

/* set the font to Gill Sans in the whole body */
#bodyCell *{
font-family: "Gill Sans",Georgia,Serif !important;
}

/*set the background color of the search input field and the text color*/
#phSearchInput {
background-color: #FFFFFF!important;
color: #8d8284!important;
}

/*set the background-color of the search button */
#phSearchButton {
background-color: #c0c0c0!important;
color: #7e0b0b!important;
}

#tsidButton {
background-color: #FFFFFF!important;
}

/* set the background color of the tab container*/
#tabContainer *{
background-color: #c0c0c0!important;
font-family: "Gill Sans",Georgia,Serif !important;
border: none !important;
border-top-left-radius: 0.1em !important;
border-top-right-radius: 0.1em !important;
}

/* set the background color of the left sidebar header*/
.sidebarModuleBody {
background-color: #952828!important;
font-family: "Gill Sans",Georgia,Serif !important;
}

/*the create new button on the left sidebar */
#sidebarDiv #createNew *{
background-color: #952828!important;
}

/*set the color of user name button to grey on hover */
.linkElements:hover {
background-color: #c0c0c0!important;
}

#tsidButton{
background-color: #c0c0c0!important;
}

#tsidLabel, #tsid-arrow {
color: none!important;
}

#home_Tab, #Contact_Tab, #report_Tab, #Dashboard_Tab, #AllTab_Tab{
color: #c0c0c0!important;
background-image: none!important;
background-color: #c0c0c0!important;
}

.tabNavigation .allTabsArrow, .tabMenu .allTabsArrow {
    height: 12px !important;
    width: 12px !important;
    font-family: "Gill Sans",Georgia,Serif !important;
    background-color: #952828!important;
}
.outer, #sidebarCell *{
font-family: "Gill Sans",Georgia,Serif !important;
color: #FFFFFF!important;
}

</style>

I am not able to understand why that small blue portion remains.
The CSS might be little crude as I am still working on most of the things so please feel free to let me know if I have done anything wrong or if there is a better way to do it.

Thanks.