title: Increase the gap between the buttons of Alert Box in Flex 3
body: <p>I am trying to put a gap of 20-30px between the Alert box buttons(YES and NO).
  but unable to find such styling point in flex. I have tried horizontal-gap, and also padding, but in vain.</p>
  
  <p>Below is the sample code i am trying, which i found when browsing through sites.</p>
  
  <pre><code> &lt;?xml version="1.0" encoding="utf-8"?&gt;
  
  &lt;mx:Application name="Alert_style_test"
      xmlns:mx="http://www.adobe.com/2006/mxml"
      layout="vertical"
      verticalAlign="middle"
      backgroundColor="white"
      creationComplete="showAlert()"&gt;
  
  
  
   &lt;!-- Used by the Alert control. --&gt;
   &lt;mx:String id="message"&gt;The quick brown fox jumped over the lazy dog.
  
    The quick brown fox jumped over the lazy dog.&lt;/mx:String&gt;
   &lt;mx:String id="title"&gt;The quick brown fox jumped over the lazy dog?&lt;/mx:String&gt;
  
   &lt;mx:Script&gt;
      &lt;![CDATA[
          import mx.controls.Alert;
  
          private var a:Alert;
  
  
          private function showAlert():void {
              Alert.yesLabel = "Yes";
              Alert.noLabel = "No";
              Alert.buttonWidth = 50;
  
              a = Alert.show(
                      message,
                      title,
                      Alert.NO | Alert.YES
                  );
              /* Make the Alert form's text non-selectable. */
              a.mx_internal::alertForm.mx_internal::textField.selectable = false;
          }
      ]]&gt;
    &lt;/mx:Script&gt;
  
   &lt;mx:Style&gt;
  
      Alert{
              color : #124332;
              background-color: #ffffff;
              header-colors : #243322, #243322;
              header-height:19;
              drop-shadow-enabled: true;
              drop-shadow-color :#243322;
              corner-radius :6;
              border-style :solid;
              border-thickness: 1;
              border-color : #243322;
              footer-colors : #243322, #ffffff;
              title-style-name : "title";
              horizontal-gap:500;
              horizontal-separator-skin:white;
              }
  
              .title{
              font-family :Verdana;
              font-size :10;
              font-weight :bold;
              color :#ffffff;
              }
  
              .alertButton {
                          letterSpacing: 0;
                          fontSize: 11;
                          cornerRadius: 10;
                          fontWeight: normal;
                          textRollOverColor: white;
                          color: red;
  
                          horizontal-gap:-500;
                      }
   &lt;/mx:Style&gt;
  
     &lt;!-- Click to launch Alert control. --&gt;
   &lt;mx:Button label="Launch Alert" click="showAlert();" /&gt;
  
  &lt;/mx:Application&gt; 
  </code></pre>