• Status: Solved
  • Priority: High
  • Security: Public
  • Views: 115
  • Last Modified:

Center-align photos and captions over mobile

Hi there. I'm trying to center-align the 3 circle images and captions under them over mobile but not having much luck. Here is my page... http://machebeuf.org/future

Any ideas experts?
0
COwebmaster
Asked:
COwebmaster
  • 16
  • 15
1 Solution
 
Snarf0001Commented:
Quick and easy way would be to use flex.

On the <p class="content"> items, add the following style rules:

display: flex; align-items: center;

Not sure how global your .content class is, if it's safe to add to that one or add another class, but those two properties should do the trick.
0
 
COwebmasterAuthor Commented:
Hi there. I just tried your idea but over mobile the caption doesn't wrap to a line break. It just puts it to the right of the photo and the photo now doesn't look right. Any other ideas?
0
 
Snarf0001Commented:
My mistake... think I totally misunderstood the question.  You did NOT want them vertically centered on desktop, you want them one over the other and horizontally centered on mobile?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
COwebmasterAuthor Commented:
Yes, that's correct.
0
 
Snarf0001Commented:
Okay, so then on mobile I see you have an override for the margin on the span element, but it's the right margin on the <p> that's messing you up.
Looks like you've got breakpoints in there for 320 - 479px, where you have:

@media only screen and (max-width: 479px) and (min-width: 320px)
.caption {
    display: block;
    text-align: center;
    margin: 0 auto;
}

Open in new window


If you apply the same media query and put margin-right:0 on the p, you should be good.
If you like the vertical centering on desktop and want to keep it (but not on mobile), then add:

@media only screen and (max-width: 479px) and (min-width: 320px)
p.content2 {
    display: block;
    margin-right: 0;
}

Open in new window

0
 
COwebmasterAuthor Commented:
Okay thanks for that. What do you think now? http://cfnc.convio.net/site/Donation2?df_id=1591&mfc_pref=T&1591.donation=form1

Seems that those 3 circle photos and their captions and even that image of the Buffalo should be better centered but what do you think?
0
 
Snarf0001Commented:
They should be, problem is the override is being ignored from the media query.
As a general rule, put media queries styles AFTER the main ones.

At this point you have the root p.Content2 declared after the 3 media queries, so it's overriding them and putting it's 50px value back in.
If you move the bottom section of css above it should work as expected.

cssmove.png
0
 
COwebmasterAuthor Commented:
Okay that looks better now over mobile, thanks for that advice. Over mobile I'm also noticing that the elements are not quite fitting on the screen and I have to scroll to the right to view the entire page. Is that easily fixable?
0
 
Snarf0001Commented:
Well, you've got a few things going on there...

One of the main culprits, the .full class applied to various elements (including td), is set to:
width: 100%; margin: 20px;

Open in new window

That means by default you're always going to have extra scrolling as you're pushing past the width.  

If you need the margin in there, one way to get around is by using calc on the .full:
width: calc(100% - 40px); 

Open in new window


But be aware if you do that (and try it), you still have some odd margins on the <p> tags.
The p.content that you overrode IS still causing strange margin issues as it still has the 50px margin that you removed from .content2.
I would remove it from content as well, on the same media query range.

And, FYI, your script tag at the bottom is malformed.  Last line where your have get by id "level_standardauto_repeatname", the ending script tag is outside of the CDATA block.
0
 
COwebmasterAuthor Commented:
okay and is that why the 2 brackets ]] is displaying at the bottom?

I'll make some of those adjustments and see if that fixes the margin issue over mobile.
0
 
Snarf0001Commented:
Yep, that's why the brackets are there.
0
 
COwebmasterAuthor Commented:
Okay but I need to keep that script at the very bottom to pre-select a checkbox in the form. What do you recommend that I do? Is there a way to keep the script there but not display those ]] brackets?
0
 
Snarf0001Commented:
Of course, the tag and the CDATA are just malformed.
Looking at the source it's coming in as:

<script type="text/javascript">// <![CDATA[
document.getElementById("level_standardauto_repeatname").checked = true;
// ></script>
</body>
]]

Open in new window


This may be different in your source depending on how the server is rendering, but just change that to:

<script type="text/javascript"> 
// <![CDATA[
document.getElementById("level_standardauto_repeatname").checked = true;
// ]]>
</script> 
</body>

Open in new window

0
 
Snarf0001Commented:
And realistically, the entire CDATA section really doesn't need to be there.  Really meant for VERY old browsers and other compliance, but is basically meaningless for any browser made in the past 15 years.
0
 
COwebmasterAuthor Commented:
Okay I changed that script but the ]] brackets still show up.
0
 
Snarf0001Commented:
The markup is still rendering out the same way, so I'm guessing it's something to do with the server rendering.
Can you post the exact code / markup where you're putting the script tag in?
0
 
COwebmasterAuthor Commented:
I put it in like this:

<script type="text/javascript"> 
// <![CDATA[
document.getElementById("level_standardauto_repeatname").checked = true;
// ]]>
</script>

Open in new window

0
 
COwebmasterAuthor Commented:
Looks like after I save the html it reverts back
0
 
Snarf0001Commented:
Honestly, take the entire CDATA section out, as I mentioned earlier.
Unless you're using a really archaic browser, it's pretty much meaningless.

Change it to just:

<script type="text/javascript"> 
document.getElementById("level_standardauto_repeatname").checked = true;
</script>

Open in new window


And let me know the results.
Failing that, please send the markup for the entire page.  
Are you using a server side language?  PHP or .NET or Java?
0
 
COwebmasterAuthor Commented:
Yes, it's still adding it in even though I used your code. Here is the entire page:

<style type="text/css"><!--
label {
    color: #222222;
    cursor: pointer;
    font-size: 1.175rem;
    font-weight: normal;
    line-height: 1.5;
}

span.FormLabelText {
 color: #222222;    
    font-size: 1.275rem;
    font-weight: bold;
    
}
fieldset {
color: #222222;
  font-size: 1.275rem;
    font-weight: bold;
  } 
hr {
color:#EEEEEE;
max-width:95%;
}    
p.content {
font-size:18px;
text-align:left;
font-weight:normal;
margin-right:50px;
}
p.content2 {
font-size:18px;
text-align:left;
font-weight:normal;
margin-right:50px;
}
p.top-message {
font-size:22px;
text-align:center;
font-weight:bold;
color:#ffffff;
margin:15px;
}
p.bottom-message {
font-size:22px;
text-align:center;
font-weight:bold;
color:#225a3f;
margin:15px;
}
p.form {
margin-left:50px;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {   
  .full {
    display:block;
    width:100%;
	height:auto;
	clear: both;	
	margin:20px;
  } 
  table.bottom-footer-image-1920 {
    display:none;
  }
  table.top-banner-image-1250 {
    display:none;
  }     
  table.top-banner-image-480 {
    display:none;
  }
 div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 320px;
	border: 0px solid;
	margin: 0 auto;
}
img.Rebecca {
    width: 300px;
    height: 300px;   
text-align:center;	
display: block;
margin: 0 auto;
}
img.John {
    width: 300px;
    height: 300px;   
text-align:center;	
display: block;
margin: 0 auto;
}
img.Fernando {
    width: 300px;
    height: 300px;   
text-align:center;	
display: block;
margin: 0 auto;
}
.caption {
    display: block;
	text-align:center;
	margin: 0 auto;
} 
p.content2 {
    display: block;
    margin-right: 0;
}
img.buffalo {
    width: 288px;
    height: 175px;   
text-align:center;	
display: block;
margin: 0 auto;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .full {
    display:block;
    width:100%;
	height:auto;
	clear: both;	
	margin:20px;
  } 
  table.bottom-footer-image-1920 {
    display:none;
  }
  table.top-banner-image-1250 {
    display:none;
  }    
  table.top-banner-image-320 {
    display:none;
  }
  div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 320px;
	border: 0px solid;
	margin: 0 auto;
}
img.Rebecca {
    width: 300px;
    height: 300px;   
text-align:center;	
display: block;
margin: 0 auto;
}
img.John {
    width: 300px;
    height: 300px;   
text-align:center;	
display: block;
margin: 0 auto;
}
img.Fernando {
    width: 300px;
    height: 300px;   
text-align:center;	
display: block;
margin: 0 auto;
}
.caption {
    display: block;
	text-align:center;
	margin: 0 auto;
}
p.content2 {
    display: block;
    margin-right: 0;
}
img.buffalo {
    width: 288px;
    height: 175px;   
text-align:center;	
display: block;
margin: 0 auto;
}
}
@media only screen and (min-width: 768px)  {       
  table.bottom-footer-image-mobile {
    display:none;
  }
  table.top-banner-image-320 {
    display:none;
  }
  table.top-banner-image-480 {
    display:none;
  }
}
--></style>
<table style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top">
	
<table class="top-banner-image-1250" style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top"><img src="../images/content/pagebuilder/Future_is_Bright_1250x400_Web_Banner_2.jpg" alt="" width="100%" height="auto" />
	</td>
</tr>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#225a3f">
<p class="top-message">Please consider a recurring monthly donation. Monthly donations help Machebeuf better plan for tuition assistance and operating needs.</p>
</td>
</tr>
</tbody>
</table>
<table class="top-banner-image-480" style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top"><img src="../images/content/pagebuilder/Future_is_Bright_480x480_Web_Banner_Mobile.jpg" alt="" width="100%" height="auto" />
	</td>
</tr>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#225a3f">
<p class="top-message">Please consider a recurring monthly donation. Monthly donations help Machebeuf better plan for tuition assistance and operating needs.</p>
</td>
</tr>
</tbody>
</table>
<table class="top-banner-image-320" style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top"><img src="../images/content/pagebuilder/Future-is-Bright-320x320-Web-Banner-Mobile.jpg" alt="" width="100%" height="auto" />
	</td>
</tr>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#225a3f">
<p class="top-message">Please consider a recurring monthly donation. Monthly donations help Machebeuf better plan for tuition assistance and operating needs.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%" align="center" valign="top">
	
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="10%" align="left" valign="top">&nbsp;</td>
<td class="full" width="30%" align="left" valign="top">
<p class="form"><br /><convio:session name="63" param="3"></convio:session></p>
</td>
<td class="full" width="50%" align="left" valign="top">
<p class="content"><br /><br /><span style="text-align: center; font-size: 38px; font-weight: bold;">Give Today for a Brighter Future</span><br /><br />The future of Bishop Machebeuf has never been brighter! As we work to encourage all to learn and live our authentically Catholic faith, we are inspired by the energy around this year&rsquo;s key initiatives, including the introduction of the Classical Track program and the Universal Sports Field. These initiatives are made possible through your generosity and support of our school. Our mission at Machebeuf is to make this future accessible to students from all walks of life. When you give to our annual appeal you help make this possible. More than 60 percent of students are recipients of scholarship and/or financial aid programs. When you give today to the Future is Bright Campaign your gift will go directly to Tuition Assistance. Every gift made to Bishop Machebeuf High School is deeply appreciated and will make a difference in the life of a student.</p>
<hr />
<div class="item">
<p class="content2"><img class="Rebecca" style="width: 300px; max-width: 300px;" src="../images/content/pagebuilder/Rebecca.jpg" alt="" hspace="10" vspace="10" width="100%" height="auto" align="left" /><br /><span class="caption"><em>Machebeuf prepared me for my Daniel&rsquo;s Fund Scholarship and for Colorado School of Mines by pushing me to be a better version of myself. Machebeuf challenged me physically, mentally, and spiritually, and helped me grow as a person.</em><br /><br />- Rebecca M., Class of 2017</span></p>
</div>
<hr />
<div class="item">
<p class="content2"><img class="John" style="width: 300px; max-width: 300px;" src="../images/content/pagebuilder/John.jpg" alt="" hspace="10" vspace="10" width="100%" height="auto" align="right" /><br /><span class="caption"><em>Part of my decision to come to Bishop Machebeuf was the Classical Track. It encompasses the values of my faith, and I hope to grow in virtue in my upcoming years of high school.</em><br /><br />&ndash; John W., Class of 2021</span></p>
</div>
<hr />
<div class="item">
<p class="content2"><img class="Fernando" style="width: 300px; max-width: 300px;" src="../images/content/pagebuilder/Fernando.jpg" alt="" hspace="10" vspace="10" width="100%" height="auto" align="left" /><br /><span class="caption"><em>I am very excited to play on the new field! This will be the best experience of my four years at Machebeuf.</em><br /><br />- Fernando C., Class of 2018</span></p>
</div>
</td>
<td width="10%" align="left" valign="top">&nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%" align="center" valign="top">
	
<table class="bottom-footer-image-1920" style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top"><img src="../images/content/pagebuilder/future_is_bright_footer_1920x155.jpg" alt="" width="100%" height="auto" />
	</td>
</tr>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#b8a268">
<p class="bottom-message">Questions? Contact Director of Advancement, Madeline Rawicki, @ <a style="color: #225a3f;" href="mailto:mrawicki@machebeuf.org" target="_blank">mrawicki@machebeuf.org</a> or 661-330-387.</p>
</td>
</tr>
</tbody>
</table>
<table class="bottom-footer-image-mobile" style="border-collapse: collapse; max-width: 288px; min-width: 100%; width: 288px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="288px;" align="center" valign="top"><img class="buffalo" src="../images/content/pagebuilder/buffalo_288x175_2.jpg" alt="" width="288px;" height="175px;" /><br />
	</td>
</tr>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#b8a268">
<p class="bottom-message">Questions? Contact Director of Advancement, Madeline Rawicki, @ <a style="color: #225a3f;" href="mailto:mrawicki@machebeuf.org" target="_blank">mrawicki@machebeuf.org</a> or 661-330-387.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Open in new window

0
 
Snarf0001Commented:
It can't be... the html, body and problem script tag aren't included in that markup.

What server language?
Any includes?
Master page?
0
 
COwebmasterAuthor Commented:
here you go:

<!DOCTYPE html>
<html>

<head>
<base href="https://secure2.convio.net/cfnc/site/" />
<title>

BMHS The Future is Bright - Bishop Machebeuf High School
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="Keywords" content="Bishop Machebeuf Catholic High School " />
<meta name="Description" content="This is a description of Bishop Machebeuf Catholic High School" />
<meta name="Robots" content="index, follow" />









<script type="text/javascript" src="../yui3/yui/yui-min.js"></script><noscript>&nbsp;</noscript>
<script type="text/javascript" src="../js/convio/modules.js?version=2.9"></script><noscript>&nbsp;</noscript>
<script type="text/javascript">
var Y = YUI({base: '../yui3/',
insertBefore: 'yui_marker_loader_css', // insert all YUI module css before customstyle so it can be overridden
debug: false, 
modules: getModules('../', 'convio', true)});
</script><noscript>&nbsp;</noscript>


<script type="text/javascript" src="../js/utils.js"></script><noscript>&nbsp;</noscript>

<script type="text/javascript" src="../js/obs_comp_rollup.js"></script><noscript>&nbsp;</noscript>


<link href="../css/themes/default.css" rel="stylesheet" type="text/css" />
<link href="../css/themes/alphacube.css" rel="stylesheet" type="text/css"/>


<link href="../css/UserGlobalStyle.css" rel="stylesheet" type="text/css" />


<link href="../css/responsive/ResponsiveBase.css" rel="stylesheet" type="text/css" />


<link href="../css/responsive/DonFormResponsive.css" rel="stylesheet" type="text/css" />



<link href="../css/FormComponentsBehavior.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/FormComponentsBehavior.js"></script><noscript>&nbsp;</noscript>
<script type="text/javascript" src="../js/don_level_elements.js"></script><noscript>&nbsp;</noscript>
<script type="text/javascript" src="../js/don_premium_elements.js"></script><noscript>&nbsp;</noscript>
<script type="text/javascript" src="../js/donations2.js"></script><noscript>&nbsp;</noscript>


<link rel="stylesheet" type="text/css" id="yui_marker_loader_css" />
<link href="../css/CustomStyle.css" rel="stylesheet" type="text/css" />
<link href="../css/CustomWysiwygStyle.css" rel="stylesheet" type="text/css" />






<meta name="CnvHeaderVersion" content="v5.0" />


<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="../pw-themes/archden/wp-content/themes/archden/css/app.css" />

<link rel="shortcut icon" href="../pw-themes/archden/wp-content/themes/archden/assets/img/icons/favicon.ico" type="image/x-icon" />
<link rel='stylesheet' id='slb_core-css'  href='../pw-themes/archden/wp-content/plugins/simple-lightbox/client/css/app.css' type='text/css' media='all' />


<script type="text/javascript" src="//use.typekit.net/tte4fci.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>




<script type='text/javascript' src='../pw-themes/archden/wp-includes/js/jquery/jquery.js'></script>
<script type='text/javascript' src='../pw-themes/archden/wp-includes/js/jquery/jquery-migrate.min.js'></script>


<script type='text/javascript' src='../pw-themes/archden/wp-content/themes/archden/js/modernizr/modernizr.min.js'></script>


<!-- Luminate Override Styles CSS -->
<style>

A:link {
    color: inherit;
}

p {
    font-family: inherit;
    font-size: 1rem;
    font-weight: normal;
    line-height: normal;
    margin-bottom: 1.25rem;
    text-rendering: optimizeLegibility;
}

table {
    border: 0;
}

table tr th, table tr td {
    padding: initial;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

label, input[type="checkbox"]+label, input[type="radio"]+label {
display: inline-block;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
vertical-align: baseline;
}

LABEL.FormLabel {
    width: auto;
    min-width: auto;
}

div.responsive a:visited, div.responsive a:link {
    color: #05287c;
}

table tr.even, table tr.alt, table tr:nth-of-type(even) {
    background: transparent;
}
/* ==================================================

    Luminate Responsive Donation Button Styles

===================================================== */
div.responsive {
    font-family: inherit;
}

div.responsive a.step-button, div.responsive button.step-button, div.responsive input.step-button {
border-radius: 0 !important;
}

div.responsive a.step-button:hover,
div.responsive button.step-button:hover {
    /* background */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#303030');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#303030', endColorstr='#303030')";
    background-image: -ms-linear-gradient(top, #303030, #303030);
    background-image: -webkit-linear-gradient(top, #303030, #303030);
    background-image: -moz-linear-gradient(top, #303030, #303030);
    background-image: -o-linear-gradient(top, #303030, #303030);
    background-image: linear-gradient(top, #303030, #303030);
}

div.responsive button.secondary-step:hover {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#303030');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#303030', endColorstr='#303030')";
    background-image: -ms-linear-gradient(top, #303030, #303030);
    background-image: -webkit-linear-gradient(top, #303030, #303030);
    background-image: -moz-linear-gradient(top, #303030, #303030);
    background-image: -o-linear-gradient(top, #303030, #303030);
    background-image: linear-gradient(top, #303030, #303030);
}

div.responsive button.secondary-step:active {
    background: #303030;
    border-color: #303030;
}

div.responsive button.action-button {
    border: 1px solid #202020;
    background-color: #202020;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#202020', endColorstr='#202020');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#202020', endColorstr='#202020')";
    background-image: -ms-linear-gradient(top, #202020, #202020);
    background-image: -webkit-linear-gradient(top, #202020, #202020);
    background-image: -moz-linear-gradient(top, #202020, #202020);
    background-image: -o-linear-gradient(top, #202020, #202020);
    background-image: linear-gradient(top, #202020, #202020);
    color: #ffffff;
}

/* moves donate button to the left */
div.responsive a.next-step, div.responsive button.next-step, div.responsive button.finish-step {
    float: left;
    margin-right: 20px;
}


/* Luminate Responsive Donation Form Styles */

.mobile div.responsive div.donation-level-user-entered {
display: inline-flex !important;
}

div.donation-form-container.responsive {
    background: transparent;
    border: none;
}

div.responsive div.form-content {
    margin-bottom: 0px;
    margin-top: 0px;
}

div.donation-level-input-container, div.generic-repeat-label-checkbox-container {
    padding: 2px 0;
}

div.responsive textarea, div.responsive input, div.responsive select, div.responsive option {
    vertical-align: baseline;
}


div.responsive input[type="text"], div.responsive input[type="number"], div.responsive input[type="password"], div.responsive input[type="select"], div.responsive input[type="option"], div.responsive textarea {
    border: 1px solid #D9D6CF;
    border-radius: 0;
    box-shadow: none;
    padding: 5px 7px;
}


div.responsive input, div.responsive select {
    border: 1px solid #D9D6CF;
    border-radius: 0;
    box-shadow: none;
    padding: 5px 7px;
    margin-bottom: 5px;
}


div.donation-level-amount-container + div.donation-level-label-container {
    display: inline-block;
    margin-left: 4px;
    margin-top: 0;
}



  @media only screen and (min-width: 768px) and (max-width: 991px) {
    
    div.donation-form-container{
      width: 100% !important;
    }
    .page-error .field-error-text {
      width: 100% !important;
    }
  }

  @media only screen and (min-width: 480px) and (max-width: 767px) {

    div.donation-form-container  {
      width: 100% !important;
    }
    .page-error .field-error-text {
      width: 100% !important;
    }
  }

@media only screen and (max-width: 767px) {

.mobile div.html-caption-container {
    width: 100%;
}
}

  @media only screen and (max-width: 480px) {

    div.donation-form-container, #billing_addr_country {
      width: 100% !important;
    }
    #billing_addr_street1name, #billing_addr_street2name {
      width: 100% !important;
    }
    .page-error .field-error-text {
      width: 100% !important;
    }
  }

 @media (max-width: 767px) {
     .mobile div.responsive div.donation-level-container {
         float: none !important; 
    }

     .mobile div.responsive div.donation-level-user-entered {
         float: none !important;
         display: block !important;
     }

 }

  
<!-- Default wrapper variant -->

<!--end code for storybuilder articles to span the page -->




<style>

#catselect {display:none}
#NewsSearch {display:none}

</style>

<style>
/* ==================================================

    Luminate Survey Button Styles

===================================================== */



#ACTION_SUBMIT_SURVEY_RESPONSE, #ACTION_CANCEL_RESPONSE_SUBMIT, #reset {
    margin: 5px 0;
    padding: 6px;
    height: 35px;
    background-color: #303030;
    background-image: -moz-linear-gradient(center top , #3030300, #303030);
    border: 1px solid #3030300;
    color: #ffffff;
    border-radius: 0;
}

#ACTION_SUBMIT_SURVEY_RESPONSE:hover, #ACTION_CANCEL_RESPONSE_SUBMIT:hover, #reset:hover {
    height: 35px;
    background-color: #303030;
    background-image: -moz-linear-gradient(center top , #303030, #3030300);
    border: 1px solid #3030300;
    color: #ffffff;
    border-radius: 0;
}

#ACTION_SUBMIT_SURVEY_RESPONSE {

    margin: 0 0 0px 32px;
}

#ACTION_SUBMIT_SURVEY_RESPONSE:hover {

    margin: 0 0 0px 32px;
}

</style>

<!-- Default wrapper variant -->





<!-- Default wrapper variant -->


<style>
/* ==================================================

    Luminate Tell A Friend Styles 

===================================================== */

.cons-prof h3 {
    border-bottom: none !important;
    color: #333;
    font-size: 28px !important;
    margin: 0 0 2px;
    font-family: 'proxima-nova-condensed', helvetica, arial, sans-serif;
    font-weight: 300;
}

.cons-pers td, .cons-pers p, .cons-pers label, .cons-pers fieldset, .cons-pers .Explicit {
    font-size: 15px !important;
}

.cons-pers .grid td {
    border-bottom: none !important;
}
.cons-pers td {
    background: none !important;

}




/* ==================================================

    Luminate Mobile Donation Styles 

===================================================== */

<style>

div.responsive input[type="text"], div.responsive input[type="number"], div.responsive input[type="password"], div.responsive textarea {
    border: 1px solid #d9d6cf;
    padding: 5px 7px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}


.mobile div.responsive div.donation-level-container {float: left; margin-right: 20px;}
label+.mobile div.responsive div.donation-level-user-entered {margin-left: 4px; display: inline-block; margin-top: 0px;}  
.mobile div.responsive input[type="radio"] {margin: 5px 0 0 0;}
.mobile div.responsive div.donation-level-input-container, .mobile div.responsive div.generic-repeat-label-checkbox-container {padding: 0 0 10px;}

.mobile div.responsive div.form-content {margin-bottom: 0; margin-right: 0; margin-top: 0;}

.mobile div.responsive #billing_first_name_row, .mobile div.responsive #billing_middle_name_row,.mobile div.responsive #billing_last_name_row, .mobile div.responsive #billing_suffix_row {float:left;margin-right:10px;}

.mobile div.responsive #billing_addr_street1_row {clear:both}

.mobile div.responsive div.donation-level-input-container, .mobile div.responsive div.generic-repeat-label-checkbox-container {padding: 0;}

.mobile div.responsive div.donation-level-user-entered {display: block; float: right; margin-left: 5px; margin-top:0}
    
    .mobile div.responsive div.donation-level-amount-container {margin-top: 0px;} 
    
    .mobile div.responsive div.donation-level-label-container {margin-top: 0px;}
    
    .mobile div.responsive div.button-container { border-top: 0 none; margin-top: 0; padding-top: 0;}
    
    .mobile div.responsive div.button-container { display:inline-block;}
    
.mobile div.responsive div.form-row {margin-top: 15px;}

</style>

</style>


 

		
</head>
<body












class="mobile"
>	
<style type="text/css"><!--
label {
    color: #222222;
    cursor: pointer;
    font-size: 1.175rem;
    font-weight: normal;
    line-height: 1.5;
}

span.FormLabelText {
 color: #222222;    
    font-size: 1.275rem;
    font-weight: bold;
    
}
fieldset {
color: #222222;
  font-size: 1.275rem;
    font-weight: bold;
  } 
hr {
color:#EEEEEE;
max-width:95%;
}    
@media only screen and (min-width: 320px) and (max-width: 479px) {   
  .full {
    display:block;
    width:100%;
	height:auto;
	clear: both;	
	margin:20px;
  } 
  table.bottom-footer-image-1920 {
    display:none;
  }
  table.top-banner-image-1250 {
    display:none;
  }     
  table.top-banner-image-480 {
    display:none;
  }
 div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 320px;
	border: 0px solid;
	margin: 0 auto;
}
img.Rebecca {
    width: 300px;
    height: 300px;   
text-align:center;	
display: block;
margin: 0 auto;
}
img.John {
    width: 300px;
    height: 300px;   
text-align:center;	
display: block;
margin: 0 auto;
}
img.Fernando {
    width: 300px;
    height: 300px;   
text-align:center;	
display: block;
margin: 0 auto;
}
.caption {
    display: block;
	text-align:center;
	margin: 0 auto;
} 
p.content2 {
    display: block;
    margin-right: 0;
}
img.buffalo {
    width: 288px;
    height: 175px;   
text-align:center;	
display: block;
margin: 0 auto;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .full {
    display:block;
    width:100%;
	height:auto;
	clear: both;	
	margin:20px;
  } 
  table.bottom-footer-image-1920 {
    display:none;
  }
  table.top-banner-image-1250 {
    display:none;
  }    
  table.top-banner-image-320 {
    display:none;
  }
  div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 320px;
	border: 0px solid;
	margin: 0 auto;
}
img.Rebecca {
    width: 300px;
    height: 300px;   
text-align:center;	
display: block;
margin: 0 auto;
}
img.John {
    width: 300px;
    height: 300px;   
text-align:center;	
display: block;
margin: 0 auto;
}
img.Fernando {
    width: 300px;
    height: 300px;   
text-align:center;	
display: block;
margin: 0 auto;
}
.caption {
    display: block;
	text-align:center;
	margin: 0 auto;
}
p.content2 {
    display: block;
    margin-right: 0;
}
img.buffalo {
    width: 288px;
    height: 175px;   
text-align:center;	
display: block;
margin: 0 auto;
}
}
@media only screen and (min-width: 768px)  {       
  table.bottom-footer-image-mobile {
    display:none;
  }
  table.top-banner-image-320 {
    display:none;
  }
  table.top-banner-image-480 {
    display:none;
  }
}
p.content {
font-size:18px;
text-align:left;
font-weight:normal;
margin-right:50px;
}
p.content2 {
font-size:18px;
text-align:left;
font-weight:normal;
margin-right:50px;
}
p.top-message {
font-size:22px;
text-align:center;
font-weight:bold;
color:#ffffff;
margin:15px;
}
p.bottom-message {
font-size:22px;
text-align:center;
font-weight:bold;
color:#225a3f;
margin:15px;
}
p.form {
margin-left:50px;
}
--></style>
<table style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top">
	
<table class="top-banner-image-1250" style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top"><img src="../images/content/pagebuilder/Future_is_Bright_1250x400_Web_Banner_2.jpg" alt="" width="100%" height="auto" />
	</td>
</tr>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#225a3f">
<p class="top-message">Please consider a recurring monthly donation. Monthly donations help Machebeuf better plan for tuition assistance and operating needs.</p>
</td>
</tr>
</tbody>
</table>
<table class="top-banner-image-480" style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top"><img src="../images/content/pagebuilder/Future_is_Bright_480x480_Web_Banner_Mobile.jpg" alt="" width="100%" height="auto" />
	</td>
</tr>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#225a3f">
<p class="top-message">Please consider a recurring monthly donation. Monthly donations help Machebeuf better plan for tuition assistance and operating needs.</p>
</td>
</tr>
</tbody>
</table>
<table class="top-banner-image-320" style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top"><img src="../images/content/pagebuilder/Future-is-Bright-320x320-Web-Banner-Mobile.jpg" alt="" width="100%" height="auto" />
	</td>
</tr>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#225a3f">
<p class="top-message">Please consider a recurring monthly donation. Monthly donations help Machebeuf better plan for tuition assistance and operating needs.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%" align="center" valign="top">
	
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="10%" align="left" valign="top">&nbsp;</td>
<td class="full" width="30%" align="left" valign="top">
<p class="form"><br />








<form name="process" id="ProcessForm" action="https://secure2.convio.net/cfnc/site/Donation2" method="post"  >

<div class="donation-form-container responsive">
<script type="text/javascript">
<!--
function reloadPage() {
window.location.reload(true);
}
function testAjax() {

var xmlHttp = null;
// Opera 8.0+, Firefox, Chrome, Safari
try {
xmlHttp = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
return false;
}
}
}

xmlHttp.open('POST','AjaxHelper;jsessionid=00000000.app20102b?NONCE_TOKEN=EDA286CFCF0779615BF62805AD1CBD2C', true);
xmlHttp.send();

}
addOnLoadHandler(testAjax);
// -->
</script>


<div class="donation-form-content">






<input type="hidden" name="user_donation_amt" id="user_donation_amt" value="" />
<input type="hidden" name="company_min_matching_amt" id="company_min_matching_amt" value="" />
<input type="hidden" name="currency_locale" id="currency_locale" value="en_US" />

<div class="form-progress-bar" >

<div class="progress-bar-step-container progress-bar-step-current">
<div class="progress-bar-step-number-container">1</div>
<div class="progress-bar-step-text-container">Gift &amp; Payment Information</div>
</div>


<div class="progress-bar-step-container ">
<div class="progress-bar-step-number-container">2</div>
<div class="progress-bar-step-text-container">Review Gift</div>
</div>


</div>






<h2 class="section-header-container">

Thanks for supporting BMHS!

</h2>




<div class="don-standard-levels form-row">
<div class="levels-label">

</div>

<div id="level_standard_row" class="form-row form-donation-level">

<div class="form-content">
<span class="field-required"></span> <span class="aural-only">Field Is Required</span>

<span class="FormLabelText">Select Gift Amount:</span> 


<div class="donation-level-general-ask">

</div>

<div class="donation-levels">

<div class="donation-level-container">
<div class="form-content">

<div class="donation-level-input-container form-input">

<div class="donation-level-label-input-container">
<input type="radio" name="level_standardexpanded" id="level_standardexpanded2112"
value="2112"


onclick="evalMatchingGift('$10.00');"
/>
</div>

<label for="level_standardexpanded2112" onclick="">


<div class="donation-level-amount-container">
$10.00
</div>



</label>







</div>

<input type="hidden" name="level_standardexpandedsubmit" id="level_standard_2112expandedsubmit" value="true" /> 
</div>
</div>
<div class="donation-level-container">
<div class="form-content">

<div class="donation-level-input-container form-input">

<div class="donation-level-label-input-container">
<input type="radio" name="level_standardexpanded" id="level_standardexpanded2114"
value="2114"

checked="checked"
onclick="evalMatchingGift('$25.00');"
/>
</div>

<label for="level_standardexpanded2114" onclick="">


<div class="donation-level-amount-container">
$25.00
</div>



</label>







</div>

<input type="hidden" name="level_standardexpandedsubmit" id="level_standard_2114expandedsubmit" value="true" /> 
</div>
</div>
<div class="donation-level-container">
<div class="form-content">

<div class="donation-level-input-container form-input">

<div class="donation-level-label-input-container">
<input type="radio" name="level_standardexpanded" id="level_standardexpanded2113"
value="2113"


onclick="evalMatchingGift('$50.00');"
/>
</div>

<label for="level_standardexpanded2113" onclick="">


<div class="donation-level-amount-container">
$50.00
</div>



</label>







</div>

<input type="hidden" name="level_standardexpandedsubmit" id="level_standard_2113expandedsubmit" value="true" /> 
</div>
</div>
<div class="donation-level-container">
<div class="form-content">

<div class="donation-level-input-container form-input">

<div class="donation-level-label-input-container">
<input type="radio" name="level_standardexpanded" id="level_standardexpanded2111"
value="2111"


onclick="evalMatchingGift(document.getElementById('level_standardexpanded2111amount').value);"
/>
</div>

<label for="level_standardexpanded2111" onclick="">



<div class="donation-level-label-container">
Enter an Amount
</div>


</label>


<div class="donation-level-user-entered">
<label for="level_standardexpanded2111amount"><span class="aural-only">Enter amount</span></label>
<input type="text" name="level_standardexpanded2111amount" id="level_standardexpanded2111amount" value="" size="12"
onfocus="var el = document.getElementById ('level_standardexpanded2111');if (el) el.click(); fire_obs_comp_event('level_standardexpanded2111amount', this, event);evalMatchingGift(value); "
onchange="fire_obs_comp_event('level_standardexpanded2111amount', this, event);evalMatchingGift(value);"
onkeyup="fire_obs_comp_event('level_standardexpanded2111amount', this, event);evalMatchingGift(value);"/>
</div>





</div>

<input type="hidden" name="level_standardexpandedsubmit" id="level_standard_2111expandedsubmit" value="true" /> 
</div>
</div>
</div>
</div>
<script type="text/javascript">
Y.use("jquery-ui", function(Y) {
jQuery(function(){
// subscribe observables
jQuery('div.donation-level-element-container').find('input[type="radio"]').each(function() {
var syncAction = function(obj) {
if (obj.is(':checked')) {
obj.closest('div.donation-level-container').addClass('selected');
}
else {
obj.closest('div.donation-level-container').removeClass('selected');
};
return arguments.callee;
}(jQuery(this));
jQuery(this).click(function() {
jQuery('div.donation-level-container').removeClass('selected');
syncAction(jQuery(this));
});
});
});
});
</script><noscript>&nbsp;</noscript>
</div>

<div class="levels-gift-aid">

</div>
<input type="hidden" name="level_standardsubmit" id="level_standardsubmit" value="true" />
<script type="text/javascript">
function evalMatchingGift(gift) {

}
</script><noscript>&nbsp;</noscript>
</div>
<div class="donation-level-container-generic-repeat form-input">

<div class="generic-repeat-label-checkbox-container">
<input type="checkbox" name="level_standardauto_repeatname" id="level_standardauto_repeatname"

onclick="fire_obs_comp_event('level_standardauto_repeat', this);"
onkeypress="fire_obs_comp_event('level_standardauto_repeat', this);"
/>

<label for="level_standardauto_repeatname">
Yes, make this a monthly recurring gift.
</label>

</div>
<input type="hidden" name="level_standardauto_repeatsubmit" id="level_standardauto_repeatsubmit" value="true" />
</div>



<h2 class="section-header-container">

Billing Information

</h2>




<div id="billing_title_row" class="form-row form-selectlist">

<div class="form-content">
<span class="field-required"></span>
<label class="FormLabel" for="billing_title">Title:</label>
<select name="billing_title" id="billing_title" size="1" 
 >
<option ></option>
<option value="Mr." >Mr.</option>
<option value="Ms." >Ms.</option>
<option value="Mrs." >Mrs.</option>
<option value="Miss" >Miss</option>
<option value="Father" >Father</option>
<option value="Deacon" >Deacon</option>
<option value="Dr." >Dr.</option>

</select>
<script type="text/javascript">
<!--
var comp = new ObservableComponent('billing_title', '');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('billing_title_Row', _display);
this.disable_submit_flag (_hidden);
} 
//-->
</script>
<noscript><br/>Required</noscript>

<input type="hidden" name="billing_titlesubmit" id="billing_titlesubmit" value="true" />
<script type="text/javascript">
var comp = new ObservableComponent ('billing_title', '');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('billing_title_row', _display);
this.disable_submit_flag (_hidden);
}


function billing_title_listChanged(_evt)
{
var e = _evt ? _evt : event; // IE vs. Mozilla event model
if (e) {
var src = e.target ? e.target : e.srcElement; // IE vs. Mozilla event model
fire_obs_comp_event('billing_title', src);
}
}
var el = document.getElementById('billing_title');
if (el) {
Utils.addEvent (el, 'change', billing_title_listChanged);
}
</script><noscript>&nbsp;</noscript>
</div>
</div>




<div id="billing_first_name_row" class="form-row form-text">

<div class="form-content">
<span class="field-required"></span>
<label for="billing_first_namename">First Name:</label>

<input type="text" name="billing_first_namename" id="billing_first_namename"
value=""
maxlength="50"
 />

<input type="hidden" name="billing_first_namesubmit" id="billing_first_namesubmit" value="true" />
<script type="text/javascript">
var comp = new ObservableComponent ('billing_first_name', 'name');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('billing_first_name_row', _display);
this.disable_submit_flag (_hidden);
}


</script><noscript>&nbsp;</noscript>
</div>
</div>



<div id="billing_last_name_row" class="form-row form-text">

<div class="form-content">
<span class="field-required"></span>
<label for="billing_last_namename">Last Name:</label>

<input type="text" name="billing_last_namename" id="billing_last_namename"
value=""
maxlength="50"
 />

<input type="hidden" name="billing_last_namesubmit" id="billing_last_namesubmit" value="true" />
<script type="text/javascript">
var comp = new ObservableComponent ('billing_last_name', 'name');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('billing_last_name_row', _display);
this.disable_submit_flag (_hidden);
}


</script><noscript>&nbsp;</noscript>
</div>
</div>



<div id="billing_suffix_row" class="form-row form-selectlist">

<div class="form-content">

<label class="FormLabel" for="billing_suffix">Suffix:</label>
<select name="billing_suffix" id="billing_suffix" size="1" 
 >
<option ></option>
<option value="Sr." >Sr.</option>
<option value="Jr." >Jr.</option>
<option value="II" >II</option>
<option value="III" >III</option>
<option value="IV" >IV</option>
<option value="V" >V</option>

</select>
<script type="text/javascript">
<!--
var comp = new ObservableComponent('billing_suffix', '');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('billing_suffix_Row', _display);
this.disable_submit_flag (_hidden);
} 
//-->
</script>
<noscript><br/>Required</noscript>

<input type="hidden" name="billing_suffixsubmit" id="billing_suffixsubmit" value="true" />
<script type="text/javascript">
var comp = new ObservableComponent ('billing_suffix', '');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('billing_suffix_row', _display);
this.disable_submit_flag (_hidden);
}


function billing_suffix_listChanged(_evt)
{
var e = _evt ? _evt : event; // IE vs. Mozilla event model
if (e) {
var src = e.target ? e.target : e.srcElement; // IE vs. Mozilla event model
fire_obs_comp_event('billing_suffix', src);
}
}
var el = document.getElementById('billing_suffix');
if (el) {
Utils.addEvent (el, 'change', billing_suffix_listChanged);
}
</script><noscript>&nbsp;</noscript>
</div>
</div>




<div id="billing_addr_street1_row" class="form-row form-text">

<div class="form-content">
<span class="field-required"></span>
<label for="billing_addr_street1name">Street 1:</label>

<input type="text" name="billing_addr_street1name" id="billing_addr_street1name"
value=""
maxlength="50"
 />

<input type="hidden" name="billing_addr_street1submit" id="billing_addr_street1submit" value="true" />
<script type="text/javascript">
var comp = new ObservableComponent ('billing_addr_street1', 'name');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('billing_addr_street1_row', _display);
this.disable_submit_flag (_hidden);
}


</script><noscript>&nbsp;</noscript>
</div>
</div>




<div id="billing_addr_city_row" class="form-row form-text">

<div class="form-content">
<span class="field-required"></span>
<label for="billing_addr_cityname">City:</label>

<input type="text" name="billing_addr_cityname" id="billing_addr_cityname"
value=""
maxlength="50"
 />

<input type="hidden" name="billing_addr_citysubmit" id="billing_addr_citysubmit" value="true" />
<script type="text/javascript">
var comp = new ObservableComponent ('billing_addr_city', 'name');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('billing_addr_city_row', _display);
this.disable_submit_flag (_hidden);
}


</script><noscript>&nbsp;</noscript>
</div>
</div>




<div id="billing_addr_state_row" class="form-row form-selectlist">

<div class="form-content">
<span class="field-required"></span>
<label class="FormLabel" for="billing_addr_state">State/Province:</label>
<select name="billing_addr_state" id="billing_addr_state" size="1" 
 onchange="fire_obs_comp_event('billing_addr_state', this)">
<option ></option>
<option value="AK" >AK - Alaska</option>
<option value="AL" >AL - Alabama</option>
<option value="AR" >AR - Arkansas</option>
<option value="AZ" >AZ - Arizona</option>
<option value="CA" >CA - California</option>
<option value="CO" >CO - Colorado</option>
<option value="CT" >CT - Connecticut</option>
<option value="DC" >DC - District of Columbia</option>
<option value="DE" >DE - Delaware</option>
<option value="FL" >FL - Florida</option>
<option value="GA" >GA - Georgia</option>
<option value="HI" >HI - Hawaii</option>
<option value="IA" >IA - Iowa</option>
<option value="ID" >ID - Idaho</option>
<option value="IL" >IL - Illinois</option>
<option value="IN" >IN - Indiana</option>
<option value="KS" >KS - Kansas</option>
<option value="KY" >KY - Kentucky</option>
<option value="LA" >LA - Louisiana</option>
<option value="MA" >MA - Massachusetts</option>
<option value="MD" >MD - Maryland</option>
<option value="ME" >ME - Maine</option>
<option value="MI" >MI - Michigan</option>
<option value="MN" >MN - Minnesota</option>
<option value="MO" >MO - Missouri</option>
<option value="MS" >MS - Mississippi</option>
<option value="MT" >MT - Montana</option>
<option value="NC" >NC - North Carolina</option>
<option value="ND" >ND - North Dakota</option>
<option value="NE" >NE - Nebraska</option>
<option value="NH" >NH - New Hampshire</option>
<option value="NJ" >NJ - New Jersey</option>
<option value="NM" >NM - New Mexico</option>
<option value="NV" >NV - Nevada</option>
<option value="NY" >NY - New York</option>
<option value="OH" >OH - Ohio</option>
<option value="OK" >OK - Oklahoma</option>
<option value="OR" >OR - Oregon</option>
<option value="PA" >PA - Pennsylvania</option>
<option value="RI" >RI - Rhode Island</option>
<option value="SC" >SC - South Carolina</option>
<option value="SD" >SD - South Dakota</option>
<option value="TN" >TN - Tennessee</option>
<option value="TX" >TX - Texas</option>
<option value="UT" >UT - Utah</option>
<option value="VA" >VA - Virginia</option>
<option value="VT" >VT - Vermont</option>
<option value="WA" >WA - Washington</option>
<option value="WI" >WI - Wisconsin</option>
<option value="WV" >WV - West Virginia</option>
<option value="WY" >WY - Wyoming</option>
<option value="AS" >AS - American Samoa</option>
<option value="FM" >FM - Federated States of Micronesia</option>
<option value="GU" >GU - Guam</option>
<option value="MH" >MH - Marshall Islands</option>
<option value="MP" >MP - Northern Mariana Islands</option>
<option value="PR" >PR - Puerto Rico</option>
<option value="PW" >PW - Palau</option>
<option value="VI" >VI - Virgin Islands</option>
<option value="AA" >AA - Armed Forces Americas</option>
<option value="AE" >AE - Armed Forces</option>
<option value="AP" >AP - Armed Forces Pacific</option>
<option value="AB" >AB - Alberta</option>
<option value="BC" >BC - British Columbia</option>
<option value="MB" >MB - Manitoba</option>
<option value="NB" >NB - New Brunswick</option>
<option value="NL" >NL - Newfoundland and Labrador</option>
<option value="NS" >NS - Nova Scotia</option>
<option value="NT" >NT - Northwest Territories</option>
<option value="NU" >NU - Nunavut</option>
<option value="ON" >ON - Ontario</option>
<option value="PE" >PE - Prince Edward Island</option>
<option value="QC" >QC - Quebec</option>
<option value="SK" >SK - Saskatchewan</option>
<option value="YT" >YT - Yukon</option>
<option value="None" >None</option>

</select>
<script type="text/javascript">
<!--
var comp = new ObservableComponent('billing_addr_state', '');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('billing_addr_state_Row', _display);
this.disable_submit_flag (_hidden);
} 
//-->
</script>
<noscript><br/>Required</noscript>

<input type="hidden" name="billing_addr_statesubmit" id="billing_addr_statesubmit" value="true" />
<script type="text/javascript">
var comp = new ObservableComponent ('billing_addr_state', '');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('billing_addr_state_row', _display);
this.disable_submit_flag (_hidden);
}


function billing_addr_state_listChanged(_evt)
{
var e = _evt ? _evt : event; // IE vs. Mozilla event model
if (e) {
var src = e.target ? e.target : e.srcElement; // IE vs. Mozilla event model
fire_obs_comp_event('billing_addr_state', src);
}
}
var el = document.getElementById('billing_addr_state');
if (el) {
Utils.addEvent (el, 'change', billing_addr_state_listChanged);
}
</script><noscript>&nbsp;</noscript>
</div>
</div>





<div id="billing_addr_zip_row" class="form-row form-text">

<div class="form-content">
<span class="field-required"></span>
<label for="billing_addr_zipname">ZIP/Postal Code:</label>

<input type="text" name="billing_addr_zipname" id="billing_addr_zipname"
value=""
maxlength="50"
 />

<input type="hidden" name="billing_addr_zipsubmit" id="billing_addr_zipsubmit" value="true" />
<script type="text/javascript">
var comp = new ObservableComponent ('billing_addr_zip', 'name');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('billing_addr_zip_row', _display);
this.disable_submit_flag (_hidden);
}


</script><noscript>&nbsp;</noscript>
</div>
</div>




<div id="billing_addr_country_row" class="form-row form-selectlist">

<div class="form-content">

<label class="FormLabel" for="billing_addr_country">Country:</label>
<select name="billing_addr_country" id="billing_addr_country" size="1" 
 onchange="fire_obs_comp_event('billing_addr_country', this)">
<option ></option>
<option selected="selected" value="United States" >United States</option>
<option value="Afghanistan" >Afghanistan</option>
<option value="Aland Islands" >Aland Islands</option>
<option value="Albania" >Albania</option>
<option value="Algeria" >Algeria</option>
<option value="American Samoa" >American Samoa</option>
<option value="Andorra" >Andorra</option>
<option value="Angola" >Angola</option>
<option value="Anguilla" >Anguilla</option>
<option value="Antarctica" >Antarctica</option>
<option value="Antigua and Barbuda" >Antigua and Barbuda</option>
<option value="Argentina" >Argentina</option>
<option value="Armenia" >Armenia</option>
<option value="Aruba" >Aruba</option>
<option value="Australia" >Australia</option>
<option value="Austria" >Austria</option>
<option value="Azerbaijan" >Azerbaijan</option>
<option value="Bahamas" >Bahamas</option>
<option value="Bahrain" >Bahrain</option>
<option value="Bangladesh" >Bangladesh</option>
<option value="Barbados" >Barbados</option>
<option value="Belarus" >Belarus</option>
<option value="Belgium" >Belgium</option>
<option value="Belize" >Belize</option>
<option value="Benin" >Benin</option>
<option value="Bermuda" >Bermuda</option>
<option value="Bhutan" >Bhutan</option>
<option value="Bolivarian Republic of Venezuela" >Bolivarian Republic of Venezuela</option>
<option value="Bonaire, Sint Eustatios and Saba" >Bonaire, Sint Eustatios and Saba</option>
<option value="Bosnia and Herzegovina" >Bosnia and Herzegovina</option>
<option value="Botswana" >Botswana</option>
<option value="Bouvet Island" >Bouvet Island</option>
<option value="Brazil" >Brazil</option>
<option value="British Indian Ocean Territory" >British Indian Ocean Territory</option>
<option value="Brunei Darussalam" >Brunei Darussalam</option>
<option value="Bulgaria" >Bulgaria</option>
<option value="Burkina Faso" >Burkina Faso</option>
<option value="Burundi" >Burundi</option>
<option value="Cambodia" >Cambodia</option>
<option value="Cameroon" >Cameroon</option>
<option value="Canada" >Canada</option>
<option value="Cape Verde" >Cape Verde</option>
<option value="Cayman Islands" >Cayman Islands</option>
<option value="Central African Republic" >Central African Republic</option>
<option value="Chad" >Chad</option>
<option value="Chile" >Chile</option>
<option value="China" >China</option>
<option value="Christmas Island" >Christmas Island</option>
<option value="Cocos (Keeling) Islands" >Cocos (Keeling) Islands</option>
<option value="Colombia" >Colombia</option>
<option value="Comoros" >Comoros</option>
<option value="Congo" >Congo</option>
<option value="Cook Islands" >Cook Islands</option>
<option value="Costa Rica" >Costa Rica</option>
<option value="Cote D'Ivoire" >Cote D'Ivoire</option>
<option value="Croatia" >Croatia</option>
<option value="Cuba" >Cuba</option>
<option value="Curacao" >Curacao</option>
<option value="Cyprus" >Cyprus</option>
<option value="Czech Republic" >Czech Republic</option>
<option value="Democratic People's Republic of Korea" >Democratic People's Republic of Korea</option>
<option value="The Democratic Republic of the Congo" >The Democratic Republic of the Congo</option>
<option value="Denmark" >Denmark</option>
<option value="Djibouti" >Djibouti</option>
<option value="Dominica" >Dominica</option>
<option value="Dominican Republic" >Dominican Republic</option>
<option value="Ecuador" >Ecuador</option>
<option value="Egypt" >Egypt</option>
<option value="El Salvador" >El Salvador</option>
<option value="Equatorial Guinea" >Equatorial Guinea</option>
<option value="Eritrea" >Eritrea</option>
<option value="Estonia" >Estonia</option>
<option value="Ethiopia" >Ethiopia</option>
<option value="Falkland Islands (Malvinas)" >Falkland Islands (Malvinas)</option>
<option value="Faroe Islands" >Faroe Islands</option>
<option value="Federated States of Micronesia" >Federated States of Micronesia</option>
<option value="Fiji" >Fiji</option>
<option value="Finland" >Finland</option>
<option value="The Former Yugoslav Republic of Macedonia" >The Former Yugoslav Republic of Macedonia</option>
<option value="France" >France</option>
<option value="French Guiana" >French Guiana</option>
<option value="French Polynesia" >French Polynesia</option>
<option value="French Southern Territories" >French Southern Territories</option>
<option value="Gabon" >Gabon</option>
<option value="Gambia" >Gambia</option>
<option value="Georgia" >Georgia</option>
<option value="Germany" >Germany</option>
<option value="Ghana" >Ghana</option>
<option value="Gibraltar" >Gibraltar</option>
<option value="Greece" >Greece</option>
<option value="Greenland" >Greenland</option>
<option value="Grenada" >Grenada</option>
<option value="Guadeloupe" >Guadeloupe</option>
<option value="Guam" >Guam</option>
<option value="Guatemala" >Guatemala</option>
<option value="Guernsey" >Guernsey</option>
<option value="Guinea" >Guinea</option>
<option value="Guinea-Bissau" >Guinea-Bissau</option>
<option value="Guyana" >Guyana</option>
<option value="Haiti" >Haiti</option>
<option value="Heard Island and McDonald Islands" >Heard Island and McDonald Islands</option>
<option value="Holy See (Vatican City State)" >Holy See (Vatican City State)</option>
<option value="Honduras" >Honduras</option>
<option value="Hong Kong" >Hong Kong</option>
<option value="Hungary" >Hungary</option>
<option value="Iceland" >Iceland</option>
<option value="India" >India</option>
<option value="Indonesia" >Indonesia</option>
<option value="Iraq" >Iraq</option>
<option value="Ireland" >Ireland</option>
<option value="Islamic Republic of Iran" >Islamic Republic of Iran</option>
<option value="Isle of Man" >Isle of Man</option>
<option value="Israel" >Israel</option>
<option value="Italy" >Italy</option>
<option value="Jamaica" >Jamaica</option>
<option value="Japan" >Japan</option>
<option value="Jersey" >Jersey</option>
<option value="Jordan" >Jordan</option>
<option value="Kazakhstan" >Kazakhstan</option>
<option value="Kenya" >Kenya</option>
<option value="Kiribati" >Kiribati</option>
<option value="Kuwait" >Kuwait</option>
<option value="Kyrgyzstan" >Kyrgyzstan</option>
<option value="Lao People's Democratic Republic" >Lao People's Democratic Republic</option>
<option value="Latvia" >Latvia</option>
<option value="Lebanon" >Lebanon</option>
<option value="Lesotho" >Lesotho</option>
<option value="Liberia" >Liberia</option>
<option value="Libya" >Libya</option>
<option value="Liechtenstein" >Liechtenstein</option>
<option value="Lithuania" >Lithuania</option>
<option value="Luxembourg" >Luxembourg</option>
<option value="Macao" >Macao</option>
<option value="Madagascar" >Madagascar</option>
<option value="Malawi" >Malawi</option>
<option value="Malaysia" >Malaysia</option>
<option value="Maldives" >Maldives</option>
<option value="Mali" >Mali</option>
<option value="Malta" >Malta</option>
<option value="Marshall Islands" >Marshall Islands</option>
<option value="Martinique" >Martinique</option>
<option value="Mauritania" >Mauritania</option>
<option value="Mauritius" >Mauritius</option>
<option value="Mayotte" >Mayotte</option>
<option value="Mexico" >Mexico</option>
<option value="Monaco" >Monaco</option>
<option value="Mongolia" >Mongolia</option>
<option value="Montenegro" >Montenegro</option>
<option value="Montserrat" >Montserrat</option>
<option value="Morocco" >Morocco</option>
<option value="Mozambique" >Mozambique</option>
<option value="Myanmar" >Myanmar</option>
<option value="Namibia" >Namibia</option>
<option value="Nauru" >Nauru</option>
<option value="Nepal" >Nepal</option>
<option value="Netherlands" >Netherlands</option>
<option value="New Caledonia" >New Caledonia</option>
<option value="New Zealand" >New Zealand</option>
<option value="Nicaragua" >Nicaragua</option>
<option value="Niger" >Niger</option>
<option value="Nigeria" >Nigeria</option>
<option value="Niue" >Niue</option>
<option value="Norfolk Island" >Norfolk Island</option>
<option value="Northern Mariana Islands" >Northern Mariana Islands</option>
<option value="Norway" >Norway</option>
<option value="Oman" >Oman</option>
<option value="Pakistan" >Pakistan</option>
<option value="Palau" >Palau</option>
<option value="Palestinian Territory, Occupied" >Palestinian Territory, Occupied</option>
<option value="Panama" >Panama</option>
<option value="Papua New Guinea" >Papua New Guinea</option>
<option value="Paraguay" >Paraguay</option>
<option value="Peru" >Peru</option>
<option value="Philippines" >Philippines</option>
<option value="Pitcairn" >Pitcairn</option>
<option value="Plurinational State of Bolivia" >Plurinational State of Bolivia</option>
<option value="Poland" >Poland</option>
<option value="Portugal" >Portugal</option>
<option value="Puerto Rico" >Puerto Rico</option>
<option value="Qatar" >Qatar</option>
<option value="Republic of Korea" >Republic of Korea</option>
<option value="Republic of Moldova" >Republic of Moldova</option>
<option value="Reunion" >Reunion</option>
<option value="Romania" >Romania</option>
<option value="Russian Federation" >Russian Federation</option>
<option value="Rwanda" >Rwanda</option>
<option value="Saint Barthelemy" >Saint Barthelemy</option>
<option value="Saint Helena, Ascension and Tristan da Cunha" >Saint Helena, Ascension and Tristan da Cunha</option>
<option value="Saint Kitts and Nevis" >Saint Kitts and Nevis</option>
<option value="Saint Lucia" >Saint Lucia</option>
<option value="Saint Martin (French)" >Saint Martin (French)</option>
<option value="Saint Pierre and Miquelon" >Saint Pierre and Miquelon</option>
<option value="Saint Vincent and the Grenadines" >Saint Vincent and the Grenadines</option>
<option value="Samoa" >Samoa</option>
<option value="San Marino" >San Marino</option>
<option value="Sao Tome and Principe" >Sao Tome and Principe</option>
<option value="Saudi Arabia" >Saudi Arabia</option>
<option value="Senegal" >Senegal</option>
<option value="Serbia" >Serbia</option>
<option value="Seychelles" >Seychelles</option>
<option value="S. Georgia &amp; S. Sandwich Isls." >S. Georgia &amp; S. Sandwich Isls.</option>
<option value="Sierra Leone" >Sierra Leone</option>
<option value="Singapore" >Singapore</option>
<option value="Sint Maarten (Dutch)" >Sint Maarten (Dutch)</option>
<option value="Slovakia" >Slovakia</option>
<option value="Slovenia" >Slovenia</option>
<option value="Solomon Islands" >Solomon Islands</option>
<option value="Somalia" >Somalia</option>
<option value="South Africa" >South Africa</option>
<option value="South Sudan" >South Sudan</option>
<option value="Spain" >Spain</option>
<option value="Sri Lanka" >Sri Lanka</option>
<option value="Sudan" >Sudan</option>
<option value="Suriname" >Suriname</option>
<option value="Svalbard and Jan Mayen" >Svalbard and Jan Mayen</option>
<option value="Swaziland" >Swaziland</option>
<option value="Sweden" >Sweden</option>
<option value="Switzerland" >Switzerland</option>
<option value="Syrian Arab Republic" >Syrian Arab Republic</option>
<option value="Taiwan, Province of China" >Taiwan, Province of China</option>
<option value="Tajikistan" >Tajikistan</option>
<option value="Thailand" >Thailand</option>
<option value="Timor-Leste" >Timor-Leste</option>
<option value="Togo" >Togo</option>
<option value="Tokelau" >Tokelau</option>
<option value="Tonga" >Tonga</option>
<option value="Trinidad and Tobago" >Trinidad and Tobago</option>
<option value="Tunisia" >Tunisia</option>
<option value="Turkey" >Turkey</option>
<option value="Turkmenistan" >Turkmenistan</option>
<option value="Turks and Caicos Islands" >Turks and Caicos Islands</option>
<option value="Tuvalu" >Tuvalu</option>
<option value="Uganda" >Uganda</option>
<option value="Ukraine" >Ukraine</option>
<option value="United Arab Emirates" >United Arab Emirates</option>
<option value="United Kingdom" >United Kingdom</option>
<option value="United Republic of Tanzania" >United Republic of Tanzania</option>
<option value="Uruguay" >Uruguay</option>
<option value="USA Minor Outlying Islands" >USA Minor Outlying Islands</option>
<option value="Uzbekistan" >Uzbekistan</option>
<option value="Vanuatu" >Vanuatu</option>
<option value="Viet Nam" >Viet Nam</option>
<option value="Virgin Islands (British)" >Virgin Islands (British)</option>
<option value="Virgin Islands (USA)" >Virgin Islands (USA)</option>
<option value="Wallis and Futuna" >Wallis and Futuna</option>
<option value="Western Sahara" >Western Sahara</option>
<option value="Yemen" >Yemen</option>
<option value="Zambia" >Zambia</option>
<option value="Zimbabwe" >Zimbabwe</option>

</select>
<script type="text/javascript">
<!--
var comp = new ObservableComponent('billing_addr_country', '');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('billing_addr_country_Row', _display);
this.disable_submit_flag (_hidden);
} 
//-->
</script>
<noscript><br/>Required</noscript>

<input type="hidden" name="billing_addr_countrysubmit" id="billing_addr_countrysubmit" value="true" />
<script type="text/javascript">
var comp = new ObservableComponent ('billing_addr_country', '');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('billing_addr_country_row', _display);
this.disable_submit_flag (_hidden);
}


function billing_addr_country_listChanged(_evt)
{
var e = _evt ? _evt : event; // IE vs. Mozilla event model
if (e) {
var src = e.target ? e.target : e.srcElement; // IE vs. Mozilla event model
fire_obs_comp_event('billing_addr_country', src);
}
}
var el = document.getElementById('billing_addr_country');
if (el) {
Utils.addEvent (el, 'change', billing_addr_country_listChanged);
}
</script><noscript>&nbsp;</noscript>
</div>
</div>






<div id="donor_email_address_row" class="form-row form-text">

<div class="form-content">
<span class="field-required"></span>
<label for="donor_email_addressname">Email Address:</label>

<input type="text" name="donor_email_addressname" id="donor_email_addressname"
value=""
maxlength="255"
 />

<input type="hidden" name="donor_email_addresssubmit" id="donor_email_addresssubmit" value="true" />
<script type="text/javascript">
var comp = new ObservableComponent ('donor_email_address', 'name');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('donor_email_address_row', _display);
this.disable_submit_flag (_hidden);
}


</script><noscript>&nbsp;</noscript>
</div>
</div>




<div class="form-row form-checkbox" id="donor_email_opt_in_Row">

<div class="form-content">

<span class="check-box-form-label-text"></span>

<input type="checkbox" name="donor_email_opt_inname" id="donor_email_opt_inname"
checked="checked"
onclick="fire_obs_comp_event('donor_email_opt_in', this);"
/>

<label for="donor_email_opt_inname">
Yes, Bishop Machebeuf can contact me in the future.
</label>


<script type="text/javascript">
var comp = new ObservableComponent ('donor_email_opt_in', 'name');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('donor_email_opt_in_Row', _display);
this.disable_submit_flag (_hidden);
}
comp.set = function (_value)
{
if (document.getElementById('donor_email_opt_inname')) {
document.getElementById('donor_email_opt_inname').checked = _value;
this.fireEvent();
}
}
comp.get = function()
{
if (document.getElementById('donor_email_opt_inname'))
return document.getElementById('donor_email_opt_inname').checked;
}
comp.clear = function()
{
this.set(false);
}

 
</script><noscript>&nbsp;</noscript>
<input type="hidden" name="donor_email_opt_insubmit" id="donor_email_opt_insubmit" value="true" />
</div>
</div>





<div id="donor_remember_me_row" class="form-row form-checkbox">

<div class="form-content">


<input type="checkbox" name="donor_remember_mename" id="donor_remember_mename"
checked="checked"
onclick="fire_obs_comp_event('donor_remember_me', this);" />
<label for="donor_remember_mename">Remember Me</label>
<input type="hidden" name="donor_remember_mesubmit" id="donor_remember_mesubmit" value="true" />
<script type="text/javascript">
var comp = new ObservableComponent ('donor_remember_me', 'name');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('donor_remember_me_row', _display);
this.disable_submit_flag (_hidden);
}
comp.set = function (_value)
{
if (document.getElementById('donor_remember_mename')) {
document.getElementById('donor_remember_mename').checked = _value;
this.fireEvent();
}
}
comp.get = function()
{
if (document.getElementById('donor_remember_mename')) {
return document.getElementById('donor_remember_mename').checked;
}
}
comp.clear = function()
{
this.set(false);
}


</script><noscript>&nbsp;</noscript>
</div>
</div>




<h2 class="section-header-container">

Payment Information

</h2>




<div class="payment-type-element-container">


<div id="payment_cc_container" class="payment-field-container">
<h3>Credit Card Information:</h3>
<div id="responsive_payment_typecc_type_row" class="form-row form-radio-array">

<div class="form-content">
<fieldset>
<legend>Credit Card Type:</legend>
<ul class="radio-array-list">
<li class="tender-row ">
<img src="../images/visa_small.gif" alt="Visa" name="responsive_payment_typecc_type_Visa" id="responsive_payment_typecc_type_Visa" />
</li><li class="tender-row ">
<img src="../images/discovercard_sm.gif" alt="Discover" name="responsive_payment_typecc_type_Discover" id="responsive_payment_typecc_type_Discover" />
</li><li class="tender-row ">
<img src="../images/amex_small.gif" alt="American Express" name="responsive_payment_typecc_type_American_Express" id="responsive_payment_typecc_type_American_Express" />
</li><li class="tender-row ">
<img src="../images/mastercd_small.gif" alt="MasterCard" name="responsive_payment_typecc_type_MasterCard" id="responsive_payment_typecc_type_MasterCard" />
</li>
</ul>
</fieldset>
<input type="hidden" name="responsive_payment_typecc_typesubmit" id="responsive_payment_typecc_typesubmit" value="true" />
<script type="text/javascript">
var comp = new ObservableRadioComponent ('responsive_payment_typecc_type', 'name');
comp.hide = function(_hidden)
{ 
var _display = _hidden ? 'none' : '';
set_display ('responsive_payment_typecc_type_row', _display);
this.disable_submit_flag (_hidden);
}
</script><noscript>&nbsp;</noscript>
</div>
</div>
<div id="responsive_payment_typecc_number_row" class="form-row form-text">

<div class="form-content">
<span class="field-required"></span>
<label for="responsive_payment_typecc_numbername">Credit Card Number:</label>

<input type="text" name="responsive_payment_typecc_numbername" id="responsive_payment_typecc_numbername"
value=""
maxlength="22"
autocomplete="off" />

<input type="hidden" name="responsive_payment_typecc_numbersubmit" id="responsive_payment_typecc_numbersubmit" value="true" />
<script type="text/javascript">
var comp = new ObservableComponent ('responsive_payment_typecc_number', 'name');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('responsive_payment_typecc_number_row', _display);
this.disable_submit_flag (_hidden);
}


observe_component ('null', new ComponentDisplayer ('responsive_payment_typecc_number'));

</script><noscript>&nbsp;</noscript>
</div>
</div>
<div id="responsive_payment_typecc_exp_date_row" class="form-row form-date">

<div class="form-content">
<span class="field-required"></span>
<label for="responsive_payment_typecc_exp_date_MONTH">
<span class="label-text">Expiration Date:</span><span class="aural-only">Select month of credit card</span>
</label>
<label for="responsive_payment_typecc_exp_date_YEAR" ><span class="aural-only">Select Expiration Year</span></label>
<div class="date-input-container">

<fieldset class="cardExpGroup">
<select name="responsive_payment_typecc_exp_date_MONTH" id="responsive_payment_typecc_exp_date_MONTH" onChange="fire_obs_comp_event('responsive_payment_typecc_exp_date_MONTH', this)">
<option value="1" >01</option>
<option value="2" >02</option>
<option value="3" >03</option>
<option value="4" >04</option>
<option value="5" >05</option>
<option value="6" >06</option>
<option value="7" >07</option>
<option value="8" >08</option>
<option value="9" >09</option>
<option value="10" selected="selected">10</option>
<option value="11" >11</option>
<option value="12" >12</option>
</select>
<select name="responsive_payment_typecc_exp_date_YEAR" id="responsive_payment_typecc_exp_date_YEAR" onChange="fire_obs_comp_event('responsive_payment_typecc_exp_date_YEAR', this)">
<option value="2017" selected="selected">2017</option>
<option value="2018" >2018</option>
<option value="2019" >2019</option>
<option value="2020" >2020</option>
<option value="2021" >2021</option>
<option value="2022" >2022</option>
<option value="2023" >2023</option>
<option value="2024" >2024</option>
<option value="2025" >2025</option>
<option value="2026" >2026</option>
<option value="2027" >2027</option>

</select>
</fieldset>
<input type="hidden" name="responsive_payment_typecc_exp_date_DAY" id="responsive_payment_typecc_exp_date_DAY" value="1" />
<script type="text/javascript">
<!--
var comp1 = new ObservableComponent ('responsive_payment_typecc_exp_date_MONTH', '');
comp1.hide = function(_hidden) {
var _display = _hidden ? 'none' : '';
set_display ('responsive_payment_typecc_exp_date_Row', _display);
this.disable_submit_flag (_hidden);
}
var comp2 = new ObservableComponent ('responsive_payment_typecc_exp_date_YEAR', '');
comp2.hide = function(_hidden) {
var _display = _hidden ? 'none' : '';
set_display ('responsive_payment_typecc_exp_date_Row', _display);
this.disable_submit_flag (_hidden); 
}
//--> 
</script><noscript>&nbsp;</noscript>
</div>
<input type="hidden" name="responsive_payment_typecc_exp_datesubmit" id="responsive_payment_typecc_exp_datesubmit" value="true" />
<script type="text/javascript">
var comp = new ObservableComponent ('responsive_payment_typecc_exp_date', 'input');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('responsive_payment_typecc_exp_date_row', _display);
disable_submit_flag ('responsive_payment_typecc_exp_datesubmit', _hidden);
}
comp.disable = function(_disabled)
{
disable_element ('responsive_payment_typecc_exp_date_MONTH', _disabled);
disable_element ('responsive_payment_typecc_exp_date_DAY', _disabled);
disable_element ('responsive_payment_typecc_exp_date_YEAR', _disabled);
disable_element ('responsive_payment_typecc_exp_date_HOUR12',_disabled);
disable_element ('responsive_payment_typecc_exp_date_HOUR24',_disabled); //For UK, 24 hour clock used
disable_element ('responsive_payment_typecc_exp_date_MINUTE',_disabled);
disable_element ('responsive_payment_typecc_exp_date_AMPM', _disabled);
}

</script><noscript>&nbsp;</noscript>
</div>
</div>

<div id="responsive_payment_typecc_cvv_row" class="form-row form-text cvv-input">

<div class="form-content">
<span class="field-required"></span>
<label for="responsive_payment_typecc_cvvname">
<span class="FormLabelText">CVV Number:</span>
</label>
<a href="http://help.convio.net/site/PageServer?s_site=cfnc&pagename=user_donation_cvv" class="HelpLink"
title="What is this? Opens new window.">What is this?</a>
<input type="text" name="responsive_payment_typecc_cvvname" id="responsive_payment_typecc_cvvname"
value=""
maxlength="4"
autocomplete="off" />
<input type="hidden" name="responsive_payment_typecc_cvvsubmit" id="responsive_payment_typecc_cvvsubmit" value="true" />
<script type="text/javascript">
var comp = new ObservableComponent ('responsive_payment_typecc_cvv', 'name');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('responsive_payment_typecc_cvv_row', _display);
this.disable_submit_flag (_hidden);
}

</script><noscript>&nbsp;</noscript>
</div>
</div>

</div>



<input type="hidden" name="responsive_payment_typesubmit" id="responsive_payment_typesubmit" value="true" />
<script type="text/javascript">
function PaymentObserver()
{
this.observe = function(_event)
{
var sVal = _event.component.get();
switch (sVal)
{
case 'check':
hide_element('payment_cc_container');
hide_element('payment_bank_container');
show_element('payment_check_container');
break;
case 'credit':
hide_element('payment_bank_container');
hide_element('payment_check_container');
show_element('payment_cc_container');
break;
case 'ach':
hide_element('payment_cc_container');
hide_element('payment_check_container');
show_element('payment_bank_container');
break;
case 'paypal':
case 'amazon':
default:
// hide all
hide_element('payment_bank_container');
hide_element('payment_cc_container');
hide_element('payment_check_container');
break;
}
}
}
// Set the observer to show/hide the relevant fields
observe_component ('responsive_payment_typepay_typeradio', new PaymentObserver());
</script><noscript>&nbsp;</noscript>
</div>




<div class="button-container clearfix">
<div class="button-sub-container">


<button class="step-button next-step" type="submit" id="pstep_next" name="pstep_next" value="Next">Next</button>



</div>
</div>
<input type="hidden" name="idb" id="idb" value="218101263" />
<input type="hidden" name="df_id" id="df_id" value="1591" />
<input type="hidden" name="mfc_pref" id="mfc_pref" value="T" />



<div class="form-row">
<div class="html-caption-container">
<p><a href="http://www.machebeuf.org">Cancel</a></p>
</div>
</div>



</div>
 
<input type="hidden" name="1591.donation" id="1591.donation" value="form1" />
 
</div>
<script type="text/javascript">
function deny_submit()
{
alert ('Form submission is not enabled when previewing an individual data element.');
return false;
}
</script><noscript>&nbsp;</noscript>

</form>



</p>
</td>
<td class="full" width="50%" align="left" valign="top">
<p class="content"><br /><br /><span style="text-align: center; font-size: 38px; font-weight: bold;">Give Today for a Brighter Future</span><br /><br />The future of Bishop Machebeuf has never been brighter! As we work to encourage all to learn and live our authentically Catholic faith, we are inspired by the energy around this year&rsquo;s key initiatives, including the introduction of the Classical Track program and the Universal Sports Field. These initiatives are made possible through your generosity and support of our school. Our mission at Machebeuf is to make this future accessible to students from all walks of life. When you give to our annual appeal you help make this possible. More than 60 percent of students are recipients of scholarship and/or financial aid programs. When you give today to the Future is Bright Campaign your gift will go directly to Tuition Assistance. Every gift made to Bishop Machebeuf High School is deeply appreciated and will make a difference in the life of a student.</p>
<hr />
<div class="item">
<p class="content2"><img class="Rebecca" style="width: 300px; max-width: 300px;" src="../images/content/pagebuilder/Rebecca.jpg" alt="" hspace="10" vspace="10" width="100%" height="auto" align="left" /><br /><span class="caption"><em>Machebeuf prepared me for my Daniel&rsquo;s Fund Scholarship and for Colorado School of Mines by pushing me to be a better version of myself. Machebeuf challenged me physically, mentally, and spiritually, and helped me grow as a person.</em><br /><br />- Rebecca M., Class of 2017</span></p>
</div>
<hr />
<div class="item">
<p class="content2"><img class="John" style="width: 300px; max-width: 300px;" src="../images/content/pagebuilder/John.jpg" alt="" hspace="10" vspace="10" width="100%" height="auto" align="right" /><br /><span class="caption"><em>Part of my decision to come to Bishop Machebeuf was the Classical Track. It encompasses the values of my faith, and I hope to grow in virtue in my upcoming years of high school.</em><br /><br />&ndash; John W., Class of 2021</span></p>
</div>
<hr />
<div class="item">
<p class="content2"><img class="Fernando" style="width: 300px; max-width: 300px;" src="../images/content/pagebuilder/Fernando.jpg" alt="" hspace="10" vspace="10" width="100%" height="auto" align="left" /><br /><span class="caption"><em>I am very excited to play on the new field! This will be the best experience of my four years at Machebeuf.</em><br /><br />- Fernando C., Class of 2018</span></p>
</div>
</td>
<td width="10%" align="left" valign="top">&nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%" align="center" valign="top">
	
<table class="bottom-footer-image-1920" style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top"><img src="../images/content/pagebuilder/future_is_bright_footer_1920x155.jpg" alt="" width="100%" height="auto" />
	</td>
</tr>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#b8a268">
<p class="bottom-message">Questions? Contact Director of Advancement, Madeline Rawicki, @ <a style="color: #225a3f;" href="mailto:mrawicki@machebeuf.org" target="_blank">mrawicki@machebeuf.org</a> or 661-330-387.</p>
</td>
</tr>
</tbody>
</table>
<table class="bottom-footer-image-mobile" style="border-collapse: collapse; max-width: 288px; min-width: 100%; width: 288px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="288px;" align="center" valign="top"><img class="buffalo" src="../images/content/pagebuilder/buffalo_288x175_2.jpg" alt="" width="288px;" height="175px;" /><br />
	</td>
</tr>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#b8a268">
<p class="bottom-message">Questions? Contact Director of Advancement, Madeline Rawicki, @ <a style="color: #225a3f;" href="mailto:mrawicki@machebeuf.org" target="_blank">mrawicki@machebeuf.org</a> or 661-330-387.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">// <![CDATA[
document.getElementById("level_standardauto_repeatname").checked = true;
// ></script>
</body>
]]
</html>

Open in new window

0
 
COwebmasterAuthor Commented:
I think php
0
 
Snarf0001Commented:
Okay, but the script you have at the bottom still isn't changed:

</table>
    <script type="text/javascript">
// <![CDATA[
document.getElementById("level_standardauto_repeatname").checked = true;
// ></script>
</body>
]]
</html>

Open in new window


Should be:

</table>
    <script type="text/javascript">
// <![CDATA[
        document.getElementById("level_standardauto_repeatname").checked = true;
// ]]>
    </script> 
</body>
</html>

Open in new window

0
 
COwebmasterAuthor Commented:
Yes and that is b/c when I insert the code properly, after saving the code, it doesn't save correctly. Is there another way to add that script in?
0
 
Snarf0001Commented:
So even when you put the script in WITHOUT the cdata tags, your compiler is adding them in afterwards?
That's not something any language would normally do, but sometimes the development environment.

To confirm: You DID try removing the cdata tags completely as outlined above?
If so, pls send more details on your environment in general, IDE, plugins, CMS?  etc... Anything else you might be using.
Attaching the physical files would probably also help.
0
 
COwebmasterAuthor Commented:
Hi there. It's a 3rd party platform and I just insert the html code. Yes, I put in the code exactly how you said to do it but compiles it differently.
0
 
Snarf0001Commented:
Wow... ridiculous that this tiny little part is causing that much of a headache.
Can you tell me what the platform is?  Is it something standard or a completely custom system?

Might also help if you could post a screenshot of the platform where you're entering the code?
I can have a look at see if there's something obvious, failing that you may have to bug the company as to why it's happening that way.

3rd party editors do make it pretty standard to insert the CDATA tags, so not really surprised by that one, but a screenshot may help determine why it's coming in malformed.
0
 
COwebmasterAuthor Commented:
The platform is called Luminate by Blackbaud.
0
 
Snarf0001Commented:
Hey didn't hear back in a bit.  Any chance you can upload a screenshot of the area where you're putting the javascript snippet in?
0
 
COwebmasterAuthor Commented:
I'm just putting the snippet at the very bottom of the page. I'll reach out to their support, thanks for your help!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 16
  • 15
Tackle projects and never again get stuck behind a technical roadblock.
Join Now