/*
	Funding page styles.
*/

/* Paul Irish’s box-sizing best practices */
/* ======================================= */
html
{
	box-sizing: border-box;
}

*, *:before, *:after
{
	box-sizing: inherit;
}
/* ======================================= */

/* TEMP */

#labs-alert
{
	border: 10px solid red;
	padding: 10px;
	margin-top: 10px;
}

/*
	Extending the main class to add centering.

	Also, including the site footer styles.
	This should probably be in the global stylesheet.

	TODO: Laura, can you please take a look?
*/
.main
{
	padding-left: 15px;
	padding-right: 15px;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (min-width: 730px) {
	.main
	{
		padding-left: 0;
		padding-right: 0;
	}
}

/*body
{
	font-family: 'Avenir Next', Avenir, sans-serif;
	color: #4d4d4d;
}
*/
.progressIndicator
{
	width: 16px;
	height: 16px;
	display: inline-block;
	margin-bottom: -2px;
	margin-right: 6px;
	vertical-align: center;
	opacity: 1.0;

	transition: opacity 0.33s;
}

#progressIndicator
{
	text-align: center;
}

#thankYouMessage
{
	opacity: 0.0;
	transition: opacity 0.33s;
}

.displayNone
{
	display: none;
}

#indieLogoForStripe
{
	width: 64px;
	height: 64px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

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

input[name="donationAmount"] 
{
	width: 0;
	height: 0;
}

#donationForm, #progressIndicator, #thankYouMessage, #errorMessage
{
	margin-left: auto;
	margin-right: auto;
	max-width: 530px;

	margin-top: -48px;
}

#errorMessage
{
	margin-top: -70px;

	/* Make up for the lack of margin between the error message and the donation form. */
	margin-bottom: 90px;
}



.donationForm
{
	padding: 10px;
	width: 300px;
	overflow: hidden;

	/*
		Using explicitly set max-height to transition as transition height from auto
		to a value does not work. Because that’s not what you’d want to do 99% of the
		time when you collapse an element. *walks away grumbling* :)
	*/
	max-height: 338px;
	transition: max-height 0.33s, padding-bottom 0.33s;
}

@media only screen and (min-width: 380px) {
	.donationForm {
		padding: 10px;
		width: 358px;
	}
}

#errorMessage
{
	max-height: 0;
	overflow: hidden;
	padding-bottom: 0;
	transition: max-height 0.33s;
}

#serverError, #recurringDonationNote
{
	font-weight: 600;
}

.noHeight
{
	max-height: 0px;
	padding-bottom: 0px;
}

label
{
	display: inline-block;
	border: 1px solid #999;
	border-radius: 6px;
}

.donationTypeButtonLabel
{
	width: 48%;
	height: 30px;
	line-height: 30px;
	text-align: center;
	margin-bottom: 12px;
	font-size: 14px;
}

/* 	only add right margin to first button 
	(creating central gutter) */
.donationTypeButtonLabel:nth-of-type(1)
{
	margin-right: 5px;
}

.donationTierButtonLabel
{
	clear: none;
	cursor: pointer;
	display: block;
	float: left;
	width: 62px;
	height: 85px;
	line-height: 85px;
	margin-bottom: 10px;
	margin-right: 10px;

	font-size: 21px;
	text-align: center;
}

@media only screen and (min-width: 380px) {
	.donationTierButtonLabel
	{
		font-size: 24px;
		width: 76px;
	}
}

/* 	remove right margin from last button on each row 
	(creating gutters between buttons) */
.donationTierButtonLabel:nth-of-type(4n)
{
	margin-right: 0;
}

.donationTierButtonLabel > input
{
	max-width: 60px;
	font-size: 16px;
	text-align: center;
}

input[name="donationAmount"]:checked + label
{
	background-color: #eee;
}

#otherDonationLabel
{
	font-size: 16px;
	padding-top: 5px;
	line-height: 30px;
}

#otherDonationLabel > input
{
	margin-left: 3px;
	margin-right: 3px;
	width: 54px;

	/* ensure styles are consistent with that of other input types */
	background: #fff;
	border: 1px solid #AFAFAF;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #4d4d4d;
	display: block;
	font-family: "Avenir Next", Avenir, 'Helvetica Neue', Helvetica, sans-serif;
	height: 30px;
	line-height: 30px;
	padding: 0;
	-webkit-appearance: none;
}

@media only screen and (min-width: 380px) {
	#otherDonationLabel > input
	{
		margin-left: 7px;
		margin-right: 7px;
		width: 60px;
	}
}

#donateButton
{
	font-size: 16px;
	margin-top: 16px;
	margin-bottom: 10px;
	margin-right: 0;
	width: 99%;
	height: 50px;
}

@media only screen and (min-width: 380px) {
	#donateButton
	{
		font-size: 21px;
	}
}

.donation-currency {
	color: #7d7d7d;
	display: block;
	font-style: italic;
	text-align: center;
}

/* Accessibly hide elements, as per http://webaim.org/techniques/css/invisiblecontent/ */
.hidden
{
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}