<style type="text/css">
        .ErrorMessageArea { padding: 10px 0 10px 10px; color: Red; font-family: Times New Roman, Arial, Sans-Serif; font-size: large; }
        .formContainer { margin: 0 auto !important; width: 480px !important; }
        form { display: block; overflow: auto; margin-left:0; padding: 0 12px 5px 0; }
        #gridContainer { overflow:auto; }
        .MailingListSection { margin-left:13px; margin-top:5px; }
        #FormFieldsTable label { width: 10em;}
        label.error { white-space:nowrap; display:block; color: red; padding-left: .5em; vertical-align: top; padding:2px }
        .submit { margin-left: 12em; }
        em { font-weight: bold; padding-right: 1em; vertical-align: top; }
        .ui-datepicker-trigger { margin-left: 4px;}
        .MailingListSection { text-align:left; padding:8px 1px 1px 0; }
        .MailingListSection div { padding: 0 0 0 7px; }
        .MailingListHeader { margin-bottom:5px; }
    </style>
    <link href="https://secure.campaigner.com/csb/styles/JQueryUI/themes/redmond/jquery-ui-1.8.2.css" rel="stylesheet" type="text/css">
        <script src="https://secure.campaigner.com/csb/Scripts/jquery-1.5.min.js" type="text/javascript"></script>
        <script src="https://secure.campaigner.com/csb/Scripts/jquery.validate.js" type="text/javascript"></script>
        <script src="https://secure.campaigner.com/csb/Scripts/jquery-ui-1.8.all.min.js" type="text/javascript"></script>
    
    
    <script type="text/javascript">
        $(document).ready(function() {
            //
            $("#previewForm").validate({
                errorPlacement: function(error, element) {
                    if (element.next(".ui-datepicker-trigger").length > 0)
                        error.insertAfter(element.next(".ui-datepicker-trigger"));
                    else
                        error.insertAfter(element);
                }
            })
            //
            $(".datepicker").datepicker({ showOn: 'button', buttonImage: 'https://secure.campaigner.com/csb/images/Toolbar/newAppointment.gif', buttonImageOnly: true, dateFormat: 'yy-mm-dd', constrainInput: true, changeMonth: true, changeYear: true, yearRange: "1900:+10", onSelect: function(dateText, inst) { inst.input.trigger("focus"); } });
            var dateFormat = "yyyy-mm-dd";
            $(".datepicker").attr("title", dateFormat).attr("format", dateFormat);
            
            // Force the calender to stay hidden till it's being invoked through the calendar icon
            $(".ui-helper-clearfix").css("display", "none");

            // Francois: To fix a calendar icon duplication - jQuery bug         
            //var rowImgs = $("#FormFieldsTable tr img.ui-datepicker-trigger");
            //jQuery.each(rowImgs, function() { if (rowImgs.length > 1) rowImgs.last().remove(); });
            // jason: it seems to work now with new jQuery UI version
        });
    </script>
