title: define the border of ui-widget-content in the jquery modal dialoge
body: <p>I have two modals on one page. The border for the first is defined in the <code>jquery.ui.theme.css</code> file in the <code>.ui-widget-content</code> class.</p>
  
  <p>Is there a way to append a style attribute and overwrite the one defined by the css file?</p>
  
  <p>I want the second modal to have a different color border.</p>
  
  <p><strong>Here is my div:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="dialog-modal" title="Discharge Warning"&gt;
      &lt;p&gt;Are you sure you want to discharge this Patient&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Here is the jQuery for my second modal:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>$('#dialog-modal').dialog(
  {
      modal: true,
      autoOpen: false,
      resizable: false,
      draggable:false,
      show:
      {
          effect:"blind",
          duration:500
      },
      buttons: 
      {
          'discharge': 
          {
              text: 'Discharge Patient',
              click: function () { $('#DischargeReferralForm').submit(); },
              class: 'btn purple',
              style: 'font-family: "Segoe UI", Helvetica, Arial, sans-serif'
          }
      },
  
  });
  
  $('.ui-dialog-buttonpane')
      .find('button:contains("Discharge")')
      .prepend('&lt;i class="icon-ok"&gt;&lt;/i&gt;');
  
  $('#DischargeMgs').click(function () { $("#dialog-modal").dialog("open"); });
  </code></pre>
  
  <p><em><strong>FYI:</strong> The page inspect trace's the color back to the ui-widget-content class.</em></p>