Disable telerik styling for Tooltip close button

[Will]

I would like to know how to disable the telerik styling for the tooltip close button.

I have set the EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" Skin="4Cast" but it still renders the telerik styling and because the styling is so specific it supersedes my syles.
This is the tooltip source...

<telerik:RadToolTip runat="server" ID="RadToolTip3" HideEvent="FromCode"
Position="BottomCenter" Animation="slide" CssClass="freeTrialWindow"
ShowEvent="OnClick" ShowDelay="0" RelativeTo="Element" TargetControlID="freeTrialHL"
EnableShadow="true" ManualClose="true" Width="200" Height="200"
EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" Skin="4Cast"
RenderInPageRoot="true" ShowCallout="true" Title="Sign up for a free trial" >

The css for the tooltip is...

.RadToolTip_4Cast a.rtCloseButton,
.RadToolTip_4Cast a.rtCloseButton:hover {
    background: url("button/tooltipClose.png") no-repeat center center transparent;
}

div.RadToolTip_4Cast table.rtShadow a.rtCloseButton {
    margin: -10px -10px 0 0;
    position: absolute;
    right: 0;
    top: 0;
    background-position: 0 0;
    width: 19px;
    height: 19px;
}

.RadToolTip_4Cast a.rtCloseButton:hover {
    background-position: 0 -20px;
}

The main part of the css that i want rendered is the negative margin. This will then display the button in the top right corner slightly out of the box.
The css that gets rendered is this...

div.RadToolTip a.rtCloseButton {
  background-position: 0 0;
  background-repeat: no-repeat;
  display: block;
  float: right;
  font-size: 1px;
  height: 12px;
  line-height: 1px;
  margin-right: 3px;
  margin-top: 3px;
  outline: medium none;
  position: absolute;
  right: 1px;
  text-indent: -9999px;
  width: 12px;
}

And that is the telerik css that is superseding my css.
I dont want to use the !important class modifier and i dont want to make my css so specific that i will never be able to supersede it for something else.

I would just like to disable the predefined styles that telerik puts in. I thought thats what the EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" Skin="4Cast"
functions were meant to do?

Thanks in advance for your help.

[Bozhidar]

Hi Will,

Actually you should not make so many CSS overrides and to disable the base stylesheet of the control.

Attached is a small project showing how to style your close button and to put it wherever you want it with just a few CSS:

.rtWrapperTopCenter
        {
            position: relative;
        }

        div.RadToolTip td.rtWrapperTopCenter a.rtCloseButton
        {
            position: absolute;
            top: -18px;
            right: -16px;
            background-image: url(fancyboxClose.png);
            background-position: 0 0;
            width: 30px;
            height: 30px;
        }

Click on the white rectangle you will get the result shown at the attached tooltipCloseButton.gif.

Kind regards,
Bozhidar
the Telerik team