Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?

Center-align photos and captions over mobile

Posted on 2017-10-12
26
High Priority
?
40 Views
Last Modified: 2017-10-21
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
Comment
Question by:COwebmaster
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 13
  • 13
26 Comments
 
LVL 23

Expert Comment

by:Snarf0001
ID: 42329027
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
 

Author Comment

by:COwebmaster
ID: 42329211
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
 
LVL 23

Expert Comment

by:Snarf0001
ID: 42329213
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
Put Machine Learning to Work--Protect Your Clients

Machine learning means Smarter Cybersecurity™ Solutions.
As technology continues to advance, managing and analyzing massive data sets just can’t be accomplished by humans alone. It requires huge amounts of memory and storage, as well as high-speed processing of the cloud.

 

Author Comment

by:COwebmaster
ID: 42329219
Yes, that's correct.
0
 
LVL 23

Expert Comment

by:Snarf0001
ID: 42329223
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
 

Author Comment

by:COwebmaster
ID: 42330095
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
 
LVL 23

Expert Comment

by:Snarf0001
ID: 42330577
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
 

Author Comment

by:COwebmaster
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
 
LVL 23

Expert Comment

by:Snarf0001
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
 

Author Comment

by:COwebmaster
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
 
LVL 23

Expert Comment

by:Snarf0001
Yep, that's why the brackets are there.
0
 

Author Comment

by:COwebmaster
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
 
LVL 23

Expert Comment

by:Snarf0001
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
 
LVL 23

Expert Comment

by:Snarf0001
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
 

Author Comment

by:COwebmaster
Okay I changed that script but the ]] brackets still show up.
0
 
LVL 23

Expert Comment

by:Snarf0001
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
 

Author Comment

by:COwebmaster
I put it in like this:

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

Open in new window

0
 

Author Comment

by:COwebmaster
Looks like after I save the html it reverts back
0
 
LVL 23

Expert Comment

by:Snarf0001
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
 

Author Comment

by:COwebmaster
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
 
LVL 23

Expert Comment

by:Snarf0001
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
 

Author Comment

by:COwebmaster
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
 

Author Comment

by:COwebmaster
I think php
0
 
LVL 23

Expert Comment

by:Snarf0001
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
 

Author Comment

by:COwebmaster
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
 
LVL 23

Expert Comment

by:Snarf0001
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

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Join & Write a Comment

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

604 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question