/*----------------------------
	headers and containers for
	form sections
------------------------------*/
h3.formSectionLabel{
	border-bottom:0;
	padding: 6px 8px;
	color:#333;
}
div.formSection{
	position:relative;
	border:1px solid #ccc;
	width: 430px;
	margin-bottom: 20px;
	background:#fff;
}

div.formSection p{
	font-size:11px;
	font-weight:bold;
	color:#777;
	padding: 12px 20px 12px 40px;
}

div.formSection.wide{
	width: 550px;
}
/*-----------------------------
	special classes for interactivity
--------------------------------*/
div.formField{
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
}
div.formField.active{
	background:#f9f9f9;
	border-top:1px solid #e7e7e7;
	border-bottom:1px solid #e7e7e7;
}
div.formField.error{
	border-top:1px solid #d00;
	border-bottom:1px solid #d00;
	background:#fee;
}


/*---------------------------
	container for each row
----------------------------*/
div.formField{
	clear:left;
	padding: 10px 10px 10px 20px;
}

div.formField.error.active{
	background:#fdd;
}

div.formField label{
	display:block;
	clear:left;
	font-weight:bold;
	padding-bottom: 6px;
}
div.formField input{
	width: 245px;
}
div.formField input.checkbox{
	width:auto;
}
div.formInputContainer{
	float:left;
	width:410px;
	margin-bottom:  10px;
}
div.formSection.wide div.formInputContainer{
	width: 530px;
}
div.formField div.explanation{
	font-size:10px;
	color:#777;
	padding: 4px 0;
}
div.formField div.error{
	color:#d00;
}
div.formField textarea{
	width: 300px;
	height: 100px;
}
div.formInputContainer.multiSelect label{
	display:inline;
	font-weight:normal;
	font-size:1em;
}

div.formField div.radioOption{
	float:left;
	width: 90px;
	text-align:center;
	background: #f3f3f3;
	padding: 2px 0;
	margin: 2px 6px;
	border:1px solid #eee;
}
/*---------------------------------
	settings for multi-select lines
---------------------------------*/

/*	-- names --	*/
div.formField div.formInputContainer.FirstName, div.formField div.formInputContainer.UserFirstName{
	width: 90px;
}
div.formField input.FirstName,div.formField input.UserFirstName{
	width: 80px;
}
div.formField div.formInputContainer.LastName,div.formField div.formInputContainer.UserLastName{
	width: 140px;
}
div.formField input.LastName,div.formField input.UserLastName{
	width: 130px;
}

/*	---	phone numbers	---	*/
div.formField div.formInputContainer.AreaCode,div.formField div.formInputContainer.Prefix{
	width: 35px;
}
div.formField input.Prefix,div.formField input.AreaCode{
	width: 25px;
}
div.formField div.formInputContainer.LastFour{
	width: 45px;
}
div.formField input.LastFour{
	width: 35px;
}
div.formField input.radio{
	width:auto;
}
/* --- addresses	--- */
div.formField div.formInputContainer.City{	width: 145px;}
div.formField input.City{	width: 125px;}
div.formField div.formInputContainer.State{ width: 50px;}
div.formField input.State{ width: 25px;}
div.formField div.formInputContainer.PostalCode{ width:75px;}
div.formField input.PostalCode{ width:50px;}

div.formField input.securityCode{ width:40px;}

div.formField div.formInputContainer.OrgCity{	width: 120px;}
div.formField input.OrgCity{	width: 110px;}
div.formField div.formInputContainer.OrgState{ width: 35px;}
div.formField input.OrgState{ width: 25px;}
div.formField div.formInputContainer.OrgPostalCode{ width:60px;}
div.formField input.OrgPostalCode{ width:50px;}
/*---------------------------------
	changes required for inline forms labels to the left of the boxes. this includes search forms, too
---------------------------------*/
div.formSection.inline,div.formSection.search{
	width: 650px;
	padding: 30px 0;
}
div.formSection.inline div.formField label,div.formSection.search div.formField label{
	float:left;
	width: 140px;
	color:#555;
	text-align:right;
	padding-right: 10px;
	font-weight:normal;
}
div.formSection.inline div.formField div.explanation, div.formSection.search div.formField div.explanation{

}
div.formSection.inline div.formField div.formInputContainer,div.formSection.search div.formField div.formInputContainer{
	float:left;
	width: 400px;
}
div.formSection.inline input.button,
div.formSection.search input.button,
div.formSection.inline .submitButtonSpinner,
div.formSection.search.submitButtonSpinner{
	margin: 20px 0 0 170px;
}

/*---------------------------------
	for search forms only
---------------------------------*/
div.formSection.search{
	border:1px solid #ccc;
	background:#f6f6f6;
	padding: 5px 0 10px 0;
}
div.formSection.search div.formField{
	border-top:1px solid #f6f6f6;
	border-bottom:1px solid #f6f6f6;
}
/*-------------------------
	datepicker styles
-------------------------*/
input.datePicker{
	width: 60px;
	font-size:11px;
	font-weight:bold;
	color:#777;
	border:1px solid #777;
	text-align:center;
}
#ui-datepicker-div, div.ui-datepicker{
	z-index: 1200 !important;
}

/*==============================================================
	color picker styles
================================================================*/
	.farbtastic {
	  position: relative;
	}
	.farbtastic * {
	  position: absolute;
	  cursor: crosshair;
	}
	.farbtastic, .farbtastic .wheel {
	  width: 195px;
	  height: 195px;
	}
	.farbtastic .color, .farbtastic .overlay {
	  top: 47px;
	  left: 47px;
	  width: 101px;
	  height: 101px;
	}
	.farbtastic .wheel {
	  background: url(../graphics/league-admin/colorpicker-wheel.png) no-repeat;
	  width: 195px;
	  height: 195px;
	}
	.farbtastic .overlay {
	  background: url(../graphics/league-admin/colorpicker-mask.png) no-repeat;
	}
	.farbtastic .marker {
	  width: 17px;
	  height: 17px;
	  margin: -8px 0 0 -8px;
	  overflow: hidden;
	  background: url(../graphics/league-admin/colorpicker-marker.png) no-repeat;
	}

	div.formField div.formInputContainer input.color, input.color{
		width: 75px;
		text-align:center;
		border:1px solid #000;
	}

/*-------------------------
	payment form
-------------------------*/
#paymentFormContainer{
	margin-top: 30px;
}

#paymentSummary{
	border:1px solid #ccc;
	width: 376px;
	padding: 8px;
	margin: 15px 0;
}

#paymentSummary div.label{
	float:left;
	width: 130px;
	color:#000;
	font-weight:bold;
	font-size:13px;
	text-align:right;
}
#paymentSummary div.value{
	float:left;
	width: 180px;
	font-size:14px;
	font-weight:bold;
	padding-left: 20px;
}
#paymentSummary div.totalFee div.value{
	font-size:12px;
}
#paymentSummary div.transactionFee div.value{
	font-size:12px;
}
#paymentSummary div.noPayNow div.value div{
	font-size:10px;
}
#leagueLabTerms textarea{
	font-size:11px;
}

#paymentFormOptions{
	color:#888;
}
#paymentFormContainer{
	background:#eee;
	border:1px solid #ddd;
	padding: 10px 10px 0 10px;
	width: 440px;
	margin: 3px 0;
}
#payPalExpressContainer{
	text-align:center;
	padding: 14px 0 6px 0;
	margin: 0 0 26px 0;
	border:1px solid #ccc;
	background:#F2F2E8;
}
#paymentFormTitle{
	position:relative;
}
#paymentFormTitle img{
	position:absolute;
	bottom:4px;
	right:10px;
}

div#container_input_AddressOne{
	margin-bottom:6px;
}

/*
*	login form
*/
#loginBox .formSection{
	width:450px;
}
#loginBox .formInputContainer{
	width: 250px;
}
#rememberMeRow{
	margin-left: 166px;
}
#rememberMeRow label{
	display:inline-block;
	vertical-align:top;
	padding-top:2px;
}
#forgotPasswordLink{
	margin-left: 24px;
	display:inline-block;
	line-height:2.3em;
	vertical-align:bottom;
	font-weight: normal;
}

#signInOptionDivider{
	text-align:center;
	color:#ccc;
	margin: 26px 0;
}
#signInOptionDivider span{
	display:inline-block;
	border-bottom:1px solid #ccc;
	height: 0.5em;
	width: 30%;
	padding: 0 20px;
	font-size:14px;
	font-weight:bold;
	line-height:1;
}
#signInOptionDivider span.or{
	border:0;
	height:auto;
	width:auto;
}
#facebookLoginContainer{
	text-align:center;
}

/*
*	league content body
*/
div.formField textArea#leagueContentBody{
	width: 300px;
	height: 200px;
}

/*
*	Coupon redemption
*/

h3.redeemCouponBalance {
	margin:20px 0 20px 20px;
}

div.couponMessage, div.couponValue {
	margin:6px 0;
}

/*
*	seletmenu plugin for jquery
*/
	.ui-selectmenu,
	.ui-selectmenu-menu li,
	.ui-selectmenu-open li,
	.ui-selectmenu-status{
		font-size:11px;
		font-family:Helvetica, Arial, Sans-serif, Sans;
	}
	.ui-selectmenu-menu li,
	.ui-selectmenu-open li{
		text-align:left;
	}

	a.ui-selectmenu span.ui-selectmenu-status{
		padding: 3px 8px 3px 3px;
	}
	a.ui-selectmenu span.ui-selectmenu-icon{
		right:0;
	}
	.ui-selectmenu-open{
		z-index:700;
	}

/*	shirt sizes and colors	*/
	div.shirtSizeExplanation{
		margin-bottom: 6px;
	}
	div.formSection p.lateShirtChangeNotice{
		font-weight:normal;
		border: 1px solid #d00;
		padding: 4px 8px;
		margin: 0 30px 15px 30px;
	}
	div.teamShirtExplanation{
		padding: 6px 12px 0 20px;
	}