.imgClass { 
    background-image: url(https://achel.org/images/donate_now_up.png);
    background-repeat: no-repeat;
    background-position: left top;
    width: 200px;
    height: 116px;
    border: 0px;
    background-color: transparent;
    cursor: pointer;
    outline: 0;
}
.imgClass:active{
    background-image: url(https://achel.org/images/donate_now_dn.png);  
}
@media screen {
	div#preloader {
		position: absolute;
		left: -9999px;
		top:  -9999px;
		}
	div#preloader img {
		display: block;
		}
	}
	div#donate fieldset {
			margin: 0 0 0 0;
			border: 2px solid;
			background-color: lightsteelblue;
			padding: 0;
		}
	div#donate	fieldset legend {
			margin-left: 1em;
			color: #000000;
			font-weight: bold;
		}
	div#donate	fieldset ol {
			padding: 1em 1em 0 1em;
			list-style: none;
		}
	div#donate	fieldset li {
			padding-bottom: .5em;
			margin-left: 1.5em;
			display: list-item;
			list-style: none;
		}
	div#donate input {
			background: #ffffff;
	}
	div#donate select {
			background: #ffffff;
	}
	div#donate input[type="submit"] {
			background: yellow;
	}
   div#contact_us .modal-content{
      background-color: white;
    }
/*
Survey is an information block for providing survey availability
It is enabled for display by setting the survey display attribute to block (it defaults to none)

Example:
<div id="survey">
    <div id="survey-title">New Survey<br/>Available</div>
    <div id="survey-msg">The 2015 Survey of State Organizations is now available!</div>
    <div id="survey-deadline"><strong>Deadline:</strong> 10/31/15 Only 57 days left to respond.</div>
</div>
*/
#survey {
    display: none;
    float: left;
    width: 150px;
    margin-right: 5px;
    border: solid;
    background-image: url('https://www.achel.org/survey/images/new_survey_bg.gif');
    background-repeat: no-repeat;
}
#survey-title {
    text-align: center;
    font-size: large;
    font-family: 'federo', sans-serif;
    font-weight: bold;
}
#survey-msg {
    padding: 5px;
    font-size: small;
    font-weight: bold;
    font-family: helvetica, sans-serif;
}
#survey-deadline {
    padding: 5px;
    font-size: small;
    font-family: helvetica, sans-serif;
}
/*
Welcome is an information block for providing basic instruction, welcome, and warning
to those wo have logged in to the site

Example:
<div id="welcome">
     <div id="welcome-title">Welcome Alliance Board Member:</div>
You have entered the "virtual office" of the Alliance of Christian Home Education Leadership as an Alliance board member. 
At this security level you have the ability to permanently alter the records of the database, calendar, or conference. 
Please double check your information before posting it to the office site. Log out if you have entered this "office" by mistake.
</div>
*/
#welcome {
    float: left;
    padding: 5px;
    font-size: medium;
    font-family: helvetica,sans-serif;
    width: 78%;
}
#welcome-title {
     font-weight: bold;
}
#outer-wrap {
    margin: 0;
    padding: 0;
}
#welcome-text {
    width: 80%;
}
/*
Ad is an information block for providing an image (as a link) and a text description for Alliance projects
*/
#ad {
    /* outer wrapper */
    width: 78%;
}
#ad-img {
    /* image for ad block */
    width: 50px;
    float: left;
}
#ad-img i.fa {
    /* for font-awesome icons */
    /* font-size: 1.333em; */
}
i.fa.fa-microphone {
    color: orange;
}
i.fa.fa-users {
    color: blue;
}
i.fa.fa-user {
    color: black;
} 
#ad-title {
    /* Title block for ad: this will be a link as well */
    font-size: medium;
    font-family: helvetica,sans-serif;
    font-weight: bold;
}
#ad-txt {
    /* text block for ad */
    font-size: small;
    font-family: helvetica,sans-serif;
    margin-left: 50px;
}

.form-control-inline {
   width: auto;
   float:left;
   margin-right: 5px;
}

    .banner-title a:link{
      color: white;
      text-decoration: none;
    }
    .banner-title a:visited{
      color: white;
      text-decoration: none;
    }
    .banner-title a:hover{
      color: lightyellow;
      text-decoration: none;
    }

    .centered {
      z-index: 50;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 32px;
      font-weight: 900;
      text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    }
    main.container{
        margin-top: 30px
    }
    .container-img {
      position: relative;
      text-align: center;
      color: white;
    }
    .container-img img {
      border: 2px solid black;
      padding: 1px;
    }
    .moveit {animation: move 5s;}

    @keyframes move {
        from {top: 95%;}
        to {top: 50%;}
    }

/*
Contact is an information block for displaying the affiliation status of a member family
The top should have the family name and title
the mid should have family information such as address, email address, & phone numbers
the status should display the affiliation status of the family 

Example:
<div id="contact">
     <div id="contact-top">Doe Family<br/>Contact Information</div>
     <div id="contact-mid"><b>Address:</b><br/>
             999 Anytreet St.<br/>
             Anytown HI 96825-2206<br/>
             <br/>
             <b>E-mail:</b><br/>
             someone@null.com<br/>
             <br/>
             <b>Phone:</b> 800-999-9999<br/>
             <b>Alt Phone:</b> 800-888-9999<br/>
             <br/>
             <b>Family:</b><br/>
             Jane Doe<br/>
             John Doe
     </div>
     <div id="contact-status"<state_acronym> Status: Affiliated</div>
</div>
*/
#contact {
    /* outer container */
    width: 200px;
    height: 0px;
    margin-left: 80%;
}
#contact-top {
    border-radius: 10px 10px 0 0;
    background: var(--hsf-blue);
    padding: 0px; 
    height: 35px;
    font-size: medium;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
}
#contact-mid {
    border: 2px solid var(--hsf-blue);
    font-size: small;
    font-family: Arial, Helvetica, sans-serif;
    padding: 5px 20px; 
}
#contact-status {
    background: var(--hsf-blue);
    padding: 5px; 
    font-size: small;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    text-align: left;
}

@media print {
	div#preloader, 
	div#preloader img {
		visibility: hidden;
		display: none;
		}
	}