Dialog - Unable to get the X to theme properly.

Dialog - Unable to get the X to theme properly.

I've tried everything I can think of, but I cannot make the "X" change to the ICON I want it to in the dialog.

Here's my CSS class, all it does is overlay my "X" over the other X and it still changes color when I hover, which I don't want it to do. Any ideas?

I also want to center the text in the title bar, but that's not working either.

I need help!!!!!!!!                  

.ui-dialog .ui-dialog-titlebar
{
    text-align:center;
}

.ui-icon .ui-icon-closethick
{
    background:url(../img/Close_Normal.png) no-repeat left top;
    background-position: -15px,-15px;
    background-color:transparent;
    height:32px;
    width:31px;
}

.ui-dialog .ui-dialog-titlebar-close, .ui-dialog-titlebar-close {
    background:url(../img/Close_Normal.png) no-repeat left top; 
    background-color:transparent;
    background-position: -15px -15px;
    height:32px;
    width:31px;

}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
    background:url(../img/Close_Hover.png) norepeat left top;
    background-position: -15px -15px;
    background-color:transparent;
    height:32px;
    width:31px;

}

.ui-dialog .ui-dialog-titlebar-close-hover, .ui-dialog .ui-dialog-titlebar-close-hover {
    background:url(../img/Close_Hover.png) norepeat left top;
    background-color:transparent;
    background-position: -15px -15px;
    height:32px;
    width:31px;

}