Ajax Control Toolkit Modal Popup CSS Styling issue

I found an interesting (and aggravating) difference between running a web application in the built-in Visual Studio 2010 development server vs. IIS 7 when using the Asp.Net 3.5 Ajax Control Toolkit ModalPopupExtender control. In the built-in web server (screenshot 1), the CSS formatting did not render correctly as it did in the application hosted in IIS7 (screenshot 2). Initially I used the standard styles you will find on the toolkit sample code.

Hopefully this will help some of the many other people that had the same problem.

Click the screenshots for enlarged views. The code used follows the screenshots.

ManagePeople.aspx

<asp:ModalPopupExtender ID="pnlModalNew_ModalPopupExtender" runat="server" 

    DynamicServicePath="" Enabled="True" TargetControlID="btnNew"  PopupControlID="pnlModalNew"

    BackgroundCssClass="modalBackground" DropShadow="true" 

    CancelControlID="btnCancel" >

</asp:ModalPopupExtender>

Styles.css

/* Modal Popup */

.modalBackground {

    background-color:Gray;

    filter:alpha(opacity=70);

    opacity:0.7;

}

.modalPopup {

    background-color:#ffffdd;

    border-width:3px;

    border-style:solid;

    border-color:Gray;

    padding:3px;

    width:250px;

}

The Panel pnlModalNew referenced by the ModalPopupExtender that contains the data entry form fields had the CssClass style set to .modalPopup.