title: How to skin Alert box in flex 4
body: <p>How do I skin alert box in flex 4?
  I am not interested in customizing alert box via css, how do I create skin?</p>
  
  <p>For example, for <code>TextInput</code> I would write in css:</p>
  
  <pre><code>s|TextInput
  {
      skinClass: ClassReference("skins.TextInputSkin");
  }
  </code></pre>
  
  <p>and in TextInputSkin.mxml</p>
  
  <pre><code>&lt;s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
      alpha.disabledStates="0.5" blendMode="normal"&gt;
  
      &lt;fx:Metadata&gt;
      &lt;![CDATA[ 
          /** 
           * @copy spark.skins.spark.ApplicationSkin#hostComponent
           */
          [HostComponent("spark.components.TextInput")]  
          ...etc..
  </code></pre>
  
  <p>And get TextInput globally changed.<br>
  How do I make something similar for <code>Alert</code>?  I can't understand what is host component for alert.</p>