@import "forms.css";

/*--------------------------
	Signup Progress Bar
-----------------------------*/	
	#signupProgress{
		position:relative;
		margin-bottom:24px;
		width: 800px;
	}
	#signupProgress div.progressItem
	{
		float:left;
		width: 120px;
		margin: 0 15px 10px 0;
		height: 30px;
		padding: 2px 0 5px 2px;
		font-weight:100;
		border:1px solid #eee;
		background:#fafafa;
	}
	div.progressItem img{
		display:block;
		width: 23px;
		float:left;
		margin: 5px;
	}
	#signupProgress div.progressItem p{
		font-size:11px;
		padding: 0;
		color:#666666;
		margin: 8px 0;
	}
	#signupProgress div.current p{
		font-size: 12px;
		font-weight:bold;
		color:#222;
	}
	#signupProgress div.current{
	border:2px solid #aaa;
	background:#f1f1f1;
	}
	#signupProgress #signupProgress_start{
		text-align:center;
		width: 60px;
	}
	#signupProgress #signupProgress_start p{
		text-align:center;
		width: 60px;
	}	
	#signupProgress #signupProgress_complete p{
		text-align:center;
		margin: 0;
	}

	#signupProgress #signupProgress_info {
		width:118px;
	}
	#signupProgress #signupProgress_info p {
		width:100px;
	}
	#signupProgress #signupProgress_payment {
		width:170px;
	}
	#signupProgress #signupProgress_payment p{
		width:156px;
	}
	#signupProgress #signupProgress_review {
		width:110px;
	}
	#signupProgress #signupProgress_review p{
		width:85px;
	}
	#signupProgress #signupProgress_complete{
		width:100px;
	}
	#signupProgress #signupProgress_complete p{
		width:100px;
	}
	#signupProgress #signupProgress_after {
		border:none;
		border-left:double #ddd;
		background:none;
		margin-left:20px;
		padding:4px 16px;
	}
	#signupProgress #signupProgress_after p{
		font-weight:normal;
		width: 180px;
		color:#777;
	}
	#signupProgress #signupProgress_after li{
		list-style-type:circle;
		padding: 0 0 0 4px;
		font-size: 10px;
		line-height: 13px;
		margin-left:24px;
		color:#777;
		width:120px;
	}

	#addCard div.formField{
		padding: 0;
		display: inline;
	}

	#addCard div.formField label{
		display: none;
	}

/*--------------------------
	signup start page
-----------------------------*/
	#signUpStart div.signUpLeagueInfo{
		margin-top:0;
	}
	h3.signedInHeader {
		font-weight:100;
	}
	h3.signedInHeader span{
		font-weight:bold;
	}
	div.signedInOption{
		margin: 30px 20px 20px 20px;
		width: 340px;
		border: 1px solid #ddd;
		background:#f3f3f3;
		padding: 15px;
	}
	div.signedInOption.yes{
		background:#F6FEED;
	}
	div.signedInOption.no{
		background:#f3f3f3;
	}
	div.signedInOption div{
		margin-bottom: 20px;
	}
	div.signedInOption p{
		margin-left: 50px;
		font-size: 14px;
		float:left;
		margin: 3px 20px 0 0;
	}

	div.signedInOption a.Continue{
		width: 52px;
		float:left;
		clear:none;
	}	
	div.signedInOption a.Logout{
		width: 47px;
		float:left;
		clear:none;		
	}
	div.loginViaFacebook{
		margin-top: 20px;
		margin-left: 160px;
	}
	.signupStartNewUser{
		text-align:center;
	}
	
	div#signupStartForm{
		padding-bottom:26px;
	}
	div#signupStartForm.formSection.inline,
	div#signupStartForm_New.formSection.inline{
		width: 400px;
		padding-top: 8px;
	}
	div#signupStartForm div.formField{
		padding-left:3px;
	}
	div#signupStartForm div.formField div.formInputContainer{
		width: 220px;
	}
	div#signupStartForm div.formField div.formInputContainer input.required{
		width: 200px;
	}
	div#signupStartForm div.button input.button, div#signupStartForm div.password,
	div#signupStartForm_New div.button input.button{
		margin-left: 140px;
	}	
	div#signupStartForm div.button input.button {
		margin-left: 153px;
	}

	div#signupStartForm p{
		font-weight: normal;
		padding:12px 0 0 0;

	}
/*--------------------------
	sign-up summary box
	with info about the league, etc
-----------------------------*/
	div.signUpLeagueInfo{
		float:right;
		margin: 17px 20px 20px 0;
		border:1px solid #000;
		background: url(../graphics/info-container-bg.gif) 40px 0 repeat-y;
		background-color: #fff;
		width: 320px;
		display:inline;
	}
	div.signUpLeagueInfo div.row{
		margin: 12px 0;
		position:relative;
		
	}
	div.signUpLeagueInfo div.row.leaguename div.value{
		font-weight:bold;
		font-size:12px;
	}
	div.signUpLeagueInfo div.row div.label{
		float:left;
		width: 95px;
		text-align:right;
		left:0;
		top: 0;
		padding-right:10px;
	}
	
	div.signUpLeagueInfo div.row div.value{
		padding-bottom:24px;
	}
	
	div.signUpLeagueInfo div.row div.value{
		float:left;
		width: 200px;
		font-size:11px;
	}
	div.signUpLeagueInfo div.row div.value.cost{
		font-weight:bold;
		font-size:12px;
	}
	div.signUpLeagueInfo div.row div.value img{
		float:left;
		margin-right: 10px;
		margin-top: -5px;
	}
	div.signUpLeagueInfo div.row.leaguename div.value img{
		padding-bottom: 10px;
	}
	div.signUpLeagueInfo div.value strong{
		font-size:11px;
	}
	div.signUpLeagueInfo div.indyGroup li{
		padding: 4px 0 0 8px;
	}
	
	div.signUpLeagueInfo div.totalBreakdown, div.infoContainer div.totalBreakdown{
		width: 180px;
		text-align:right;
	}
	div.totalBreakdown p em{
		font-style:italic;
	}
	div.totalBreakdown p.total{
		border-top: 1px solid #ddd;
		font-size:13px;
		font-weight:bold;
		margin-top: 5px;
	}
	div.totalBreakdown p.total span.label{
		color:#333;
		font-size:11px;
	}
/*----------------------------------
	signup info page
------------------------------------*/
	div#registrationTypeHeader p.label{
		margin:10px;
		width:420px;
		font-size:11px;
	}

	#yourInfo{
		margin-bottom:8px;
	}
	#yourInfo h3{
		display:inline;
		padding:6px 0 6px 8px;
	}
	#yourInfo svg{
		vertical-align:middle;
		padding-left:2px;
		padding-bottom:3px;
		width:25px;
		height:25px;
	}

	#input_GameReminders + div{
		display:inline-block;
	}

	/* Online Waiver */
	#onlineWaiverSection{
		padding:0;
		margin-bottom:20px;
	}
	#onlineWaiverSection h3,
	#signatureContainer h3{
		display:inline-block;
		padding:6px 3px 6px 8px;
	}
	#onlineWaiverSection .formSection{
		border:0;
		margin-bottom:0;
	}
	#onlineWaiverCheckboxLabel,
	#onlineWaiverSignatureLabel{
		display:none;
	}
	#onlineWaiverFormInput #content{
		border:1px solid #ccc;
		height:250px;
		overflow-y:scroll;
		padding:10px 10px;
	}
	#onlineWaiverFormInput #content p{
		padding:12px 0;
		font-weight:normal;
		color:#333;
	}
	#onlineWaiverSection h3{
		width:424px;
	}
	#onlineWaiverCheckboxWrapper{
		padding:0;
		width:424px;
		padding:6px 0 6px 4px;
		border:#ddd 1px solid;
		background:#eee;
		font-size:12px;
		font-weight:bold;
	}
	#onlineWaiverCheckboxWrapper.checkboxEnabled{
		color:#333;
	}
	#onlineWaiverCheckboxWrapper.checkboxDisabled{
		color:#999;
	}
	#onlineWaiverCheckboxWrapper input{
		vertical-align:bottom;
	}
	#onlineWaiverCheckboxWrapper input:disabled{
		pointer-events:none
	}

	/* Online Waiver Signature */

	#waiverSignature{
		display: none;  
		position: fixed; 
		z-index: 1; 
		left: 0;
		top: 0;
		width: 100%; 
		height: 100%; 
		overflow: auto; 
		background-color:#000; /* Fallback color */
		background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	}
	#waiverSignature .close {
		margin-right: -5px;
		color: #aaa;
		float: right;
		font-size: 20px;
		font-weight: bold;
	}
	#waiverSignature .close:hover,
	#waiverSignature .close:focus {
		color: #000;
		text-decoration: none;
		cursor: pointer;
	}
	#signatureWrapper{
		background-color: #fefefe;
		margin: 15% auto; /* 15% from the top and centered */
		padding: 10px 20px 15px 20px;
		border: 1px solid #888;
		width: 65%;
	}
	#signatureWrapper .loadingGraphic{
		display:none;
		float:right;
		padding-right: 20px;
		padding-top: 10px;
	}
	#signaturePad{
		width: 100%;
		height: 300px;
		border: solid 1px #777;
	}
	#signatureContainer a{
		display:inline-block;
	}
	#signatureContainer .instruction{
		text-align:center;
		color:#777;
	}
	#signatureContainer #undoSignature,
	#signatureContainer #clearSignature{
		float:left;
		margin-right:10px;
	}
	#signatureContainer #submitSignature{
		float:right;
	}
	#signatureContainer #waiverPara{
		padding: 3px 10px 10px 10px;
	}

/*	check username availabilty feature */
	#usernameCheck{
		position:absolute;
		top: 38px;
		left: 255px;
		width: 150px;
		font-weight:bold;
		text-align:left;
	}
	#usernameCheck.invalid{	color:#d00;	}
	#usernameCheck.valid{	color:#393;	}
	
	#usernameCheck img{	display:none;	}
	#usernameCheck.loading img{	display: inline;	}

	li.playWithFriendsOption,
	#teammateRequests{	
		margin-left: 20px;
	}
	#teammateRequests{
		margin-top:12px;
	}
	#teammateRequests .heading{
		font-size:10px;
	}
	#teammateRequests .name{
		float:left;
		width: 140px;
		margin-right: 26px;
	}
	#teammateRequests .name input {
		width:140px;
		font-size:11px;
	}
	#teammateRequests .email{
		float:left;
		width: 190px;
	}
	#teammateRequests .email input {
		width:160px;
		font-size:11px;
		margin-right:4px;
	}
	span.optional {
		font-size:11px;
		color:#AAA;
	}
/*----------------------------------
	signup payment page
------------------------------------*/
	div#paymentPolicyContainer
	{
		width: 400px;
		/*padding: 20px 20px 0 20px;*/
		text-align:justify;
	}
	div.agreeToTerms
	{
		font-weight:bold;
		background:#eee;
		border:1px solid #ddd;
		margin: 15px 0;
		padding: 15px;
		width: 370px;
	}
	div.agreeToTerms input {
		float: left;
		margin-bottom: 10px;
		margin-right: 10px;
	}
	div#feeBox{
		width: 300px;
		border:1px solid #ccc;
	}
	div#feeBox div.value{
		width: 150px;
	}
	div#container_input_CardNumber .explanation {
		width: 55%;
	}
	div#container_input_SecurityCode .explanation {
		width: 55%;
	}
	input#input_SecurityCode{
		width: 40px;
	}
	div#leagueLabTerms{
		margin: 20px 0;
	}
	.nothingToPay{
		padding-top:12px;
	}
	.noPayNow .label{
		font-weight:100;
	}
	p.continueExplanation{
		margin: 10px;
		font-size:10px;
	}
	
	div#paymentCalculation {
		width:380px;
	}
	#paymentCalculation div.infoRow div.value{
		width: 250px;
	}

/*----------------------------------
	signup confirm page
------------------------------------*/
	div.infoContainer.confirmSection{
		border:1px solid #ccc;
		width: 420px;
	}
	div.confirmSection div.infoRow div.value{
		width: 270px;
	}
	
	div.confirmSection ol.teamRoster{
		display:table;
		float:left;
		font-size:11px;
		margin: 10px 19px;
	}
	
	div.confirmSection div.infoRow.roster div.explanation{
		clear:left;
		margin-left: 100px;
		margin-bottom: 20px;
	}
	
	div.confirmSection div.infoRow.fee_total div.label,
	div.confirmSection div.infoRow.fee_total div.value
	{
		font-size:12px;
		font-weight:bold;
		padding-top: 4px;
	}
	
	div.confirmSection div.infoRow.fee_total div.value{
		width: 100px;
		border-top: 1px solid #ddd;
	}
	div.confirmSection div.infoRow.toPay div.value {
		font-weight:bold;
	}
	#submitRegistrationLoadingGraphic{
		width:32px;
		height:32px;
	}
	.teammateRequests li{
		margin-bottom: 8px;
	}
	div.infoContainer.confirmSection div.edit a{
		width: auto;
		padding: 3px 8px;
		margin-right: 12px;
		font-size:11px;
	}
	
	
/*----------------------------------
	new Confirm Styles - Player Confirmation
------------------------------------*/
	
	input#confirmSubmitNoPay {
		float:right;
		margin-right:120px;
	}
	
	
/*----------------------------------
	signup finish page
------------------------------------*/
	#signupFinish p{
		width: 500px;
		padding: 8px;
	}	
	#signupFinish h3.summary{
		font-size: 12px;
		margin: 10px 0 20px 0;
	}
	#signupFinish span.teamName, #signupFinish span.leagueName{
		font-weight:bold;
	}
	#signupFinish div.status{
		font-size:14px;
		font-weight:bold;
		background: #fafafa;
		border:double #ddd;
		padding: 9px;
		width: 400px;
	}
	#signupFinish div.status span{
		font-weight:100;
	}
	#signupFinish div.status div.description{
		font-size:11px;
		font-weight:normal;
		padding: 3px;
		color:#555;
	}
	#signupFinish div.message{
		font-size:11px;
		margin: 20px 4px;
		line-height: 14px;
		width: 500px;
	}
	#signupFinish div.links {
		float:right;
		margin:0 40px 0 20px;
		padding:12px;
		width: 221px;
		background: transparent url(../graphics/next-arrow-bg.gif) no-repeat top left;
		min-height:240px;
		height:auto !important;
		height:240px;
		border-left:1px solid #eee;
	}
	#signupFinish div.links h3 {
		color:#777;
		margin-bottom:50px;
	}

	#signupFinish div.links div.link{
		margin-top:40px;
		font-weight:bold;
	}
	#signupFinish div.links div.description{
		font-size:11px;
		padding: 3px 6px;
	}
	input#submitRegistrationButton {
		float:left;
		margin:20px 120px 0 0;
		width:97px;
	}
	input#cancelRegistrationButton {
		margin-top:28px;
	}
	img#submitRegistrationLoadingGraphic{
		float:left;
		margin:12px 120px 0 60px;
		padding; 0 33px;
	}
/**
*	Indy Group styles (during signup)
*/


	#playWithYourFriends {
		background:#f1f1f1;
		padding-top:10px;
	}
	.indyGroupMembers li{
		font-size:14px;
		margin: 10px 0;
	}
	.formSection .indyGroupMembers{
		margin-left: 20px;
		margin-bottom: 20px;
	}
	.formSection .indyGroupExplanation{
		margin:0 0 10px 20px;
	}
	.formSection .indyGroupExplanation span.groupName{
		font-weight:bold;
		font-size:14px;
	}
	.formSection #noGroup {
		font-size:14px;
		line-height:21px;
	}
	li.playWithFriendsOption {
		margin-bottom:6px;
	}
	#inviteFriendsButton{
		margin:14px 0 10px 0;
	}
	#playerPageLink {
		margin-top:60px;
	}
	#teammateRequests .row.player, #addTeammateRequestRow {
		margin-bottom:8px;
	}
	#teammateRequests .row.player .email {
	
	}
	#addTeammateRequestRow {
		display:block;
	}
	div.formSection p.earlyIndyGroup{
		border:1px dashed #ccc;
		background:#f9f9f9;
		padding-left:20px;
		margin-right:20px;
	}
	

	
/*
*	confirm page (after signup)
*/
div.confirmMessage, div.pmtMessage{
	margin: 20px;
	font-size: 12px;
	width: 300px;
}

#confirmContainer div.infoContainer{
	margin-bottom: 20px;
}
#confirmContainer #paymentSummary{
	margin-top: 0;
}
#confirmAdditionalInfoLabel{
	margin-top: 20px;
}
#declineButton{
	margin-left: 200px;
}
#optionalPaymentOptions #declineButton{
	margin: 0;
}

#paymentOptionalInfo{
	width: 310px;
	margin: 4px 84px 20px 20px;
	float:right;
	font-size:11px;
	color:#555;
	font-style:italic;
}
#optionalPaymentOptions{
	margin: 20px;
	clear:right;
}
#optionalPaymentOptions div.option {
	float:left;
	width: 220px;
	height: 90px;
	margin: 0 12px 0 0;
	border:2px solid #ccc;
	background: #eee;
	text-align:center;
	padding: 8px;	
}
#optionalPaymentOptions div.decline{
	width: 150px;
}
#optionalPaymentOptions div.option p{
	height: 40px;
	font-size:11px;
	color:#555;
}

input#confirmSubmitButton {
		
	}
	div#confirmContainer h2.infoHeading {
		margin-top:0;
	}
	
	div#confirmContainer div.teamname div.value{
		font-size:14px;
		font-weight:bold;
	}
	
	div#confirmContainer div.leaguename div.value{
		font-size:14px;
	}
	
	div#paymentSummary div.transactionFee div.label, div#paymentSummary div.transactionFee div.value{
		font-weight:100;
	}

	
	div#teamPayerNotice {
		width:600px;
		margin:8px 0 0 12px;
		
	}
	
	div#teamPayerNotice  p, div#teamPayerNotice  p a{
		font-size:11px;
	}
	
/*	coupon validation widget	*/
	div.formSection.coupon {
		width: 393px;
	}
	div.formInputContainer input#couponCodeValidateButton{
		width: auto;
	}
	#couponCodeValidationMessage div.error{
		color: #d00;
	}
	#couponCodeValidationMessage div.success{
		color: #000;
	}
	#couponCodeValidationMessage div.balanceNote{
		font-size: 9px;
		width: 300px;
		margin: 12px;
	}
	#couponCodeValidationMessage div.couponValue span{
		color: #393;
		font-weight:bold;
	}
	
	/*	coupon explanations	*/
	div.couponExplanation {
		margin:0 0 18px 0;

	}

/*-------------------------
	Gift Card validation
-------------------------*/
#giftCardCodeInputContainer svg{
	color:#aaa;
	vertical-align: top;
	font-size: 1.1em;
}
div.formInputContainer input#giftCardCodeValidateButton {
    width: auto;
}
div.formSection.giftcard {
	width: 393px;
}

/* UPDATES FROM RYAN */

#paymentFormContainer {
	width: 380px;
}
#paymentFormContainer .formSection {
	width: 369px;
}
#paymentFormContainer  h4 {
	margin-bottom: 10px;
}

#signupPaymentSubmit {
	margin-bottom: 25px;
}

/*-------------------------
	Youth League
-------------------------*/
#youthSignupInfoForm h2{
	margin-top:20px;
	margin-bottom:20px;
}
#selectExistingYouth #existingYouthTable {
	line-height:20px;
	font-size:12px;
}
#selectExistingYouth #existingYouthTable .name {
	width:160px;
}
#selectExistingYouth #existingYouthTable .shirtSize {
	width:56px;
}
#selectExistingYouth #existingYouthTable .action input{
	vertical-align: middle;
}
#existingYouthTable tr.customQuestions .formInputContainer{
	width: auto;
}
#existingYouthTable tr.customQuestions td {
	padding-left: 25px;
 }
#selectExistingYouth .formSection{
	margin-bottom:0px;
}
#selectExistingYouth div.explanation{
	font-size: 10px;
	color: #777;
	margin: 4px 0 0 8px;
}
#addNewYouthButtonSection{
	margin-top: 15px;
	margin-bottom: 20px;
}
#addNewYouthButtonSection a{
	color: #333;
	font-size:12px;
	padding: 3px 7px;
}
#addNewYouthButtonSection svg{
	padding-right:5px;
	color: #999;
}
#addNewYouthFormSection{
	display:none;
	margin-top:15px;
}
#addNewYouthFormSection h3,
#addNewYouthFormSection h4{
	margin: 10px 0 5px 20px;
}
#addNewYouthFormSection .btn-sm{
	padding: 3px 7px;
}
#addNewYouthFormSection #addYouthActions input{
	width:40px;
}
#addNewYouthFormSection #addYouthActions a.cancel{
	margin-left: 5px;
}
#existingYouthTable div.formField.active, 
#addNewYouthFormSection div.formField.active {
    border-top: 0px;
	border-bottom: 0px;

}
#addNewYouthFormSection div.formField.active{
	background: #fff;
	width:400px;
}
#existingYouthTable tr.youthInfo{
	border-top: 2px solid #f1f1f1; 
}
#existingYouthTable tr.youthInfo.roleSub{
	background:#f1f1f1; 
	color: #888;
}
#existingYouthTable.detailReport th{
	background: #d9d9d9;
}
#existingYouthTable tr.youthInfo.selected td,
#existingYouthTable tr.customQuestions.selected td,
#existingYouthTable div.formField.active {
	background: #F5F5F5;
}
#existingYouthTable tr.customQuestions.selected td div.formField {
	border-top: 1px solid #F5F5F5;
    border-bottom: 1px solid #F5F5F5;
}
#existingYouthTable tr.youthInfo.selected td {
	font-weight:bold;
}
#existingYouthTable tr.customQuestions div.formField label{
	color:#555;
}

#existingYouthTable tr.customQuestions.selected td div.formField.active.error {
	background: #fee;
}

a.youthRoleNoteLink{
	font-size: 0.9em;
	color:#333;
}

div.infoRow.applePay div.label {
	padding-top:15px;
}
div.infoRow.applePay div.logo i.fa-apple-pay,
div.infoRow.applePay div.logo svg {
	font-size: 45px;
}