﻿/* all enclosing div.. */
.tsp-form * { zoom: 1; }

/* general */
.tsp-form input[type="radio"] { display: inline; float: left; width: 12px; height: 12px; margin: 2px 3px 0 0; padding: 0; }
.tsp-form input[type="checkbox"] { display: inline; float: left; width: 12px; height: 12px; margin: 2px 3px 0 0; padding: 0; }
.tsp-form a { color: #2b407e; }
.tsp-form a:hover { color: #f89e49; }

	/* h1 */
	.tsp-form h1 { font-size: medium; display: block; height: 23px; color: #ffffff; margin: 20px 0 0; padding: 4px 16px 4px; overflow: hidden; }
	.tsp-form h1.top-correction { margin-top: 0; }
	.grid-5 .tsp-form h1 { background: #feecdb url('../images/rounded-header-orange-grid-5.png') no-repeat; }
	.grid-4 .tsp-form h1 { background: #feecdb url('../images/rounded-header-orange-grid-4.png') no-repeat; }
	
	/* description */
	.tsp-form .tsp-description { background: #feecdb; padding: 0 0 0 16px; }
	.tsp-form .tsp-description p { margin: 0; padding: 0 0 8px; zoom: 1; }
	.tsp-form .tsp-description ul { margin-top: 0; margin-bottom: 0; zoom: 1; }

	/* form errors */
	.fff-error { color: Red; }
	
	/* fields */
	.tsp-form .tsp-fields { padding: 0 0 8px; }
	.tsp-form .tsp-fields h2 { margin: 0; padding: 0 0 0 16px; font-size: small; color: #f89e49; height: 16px; }
	.tsp-form .tsp-fields h2.black { color: Black; }
	.tsp-form .tsp-fields .tsp-notes { margin: 0 0 4px 16px; }
	.grid-5 .tsp-form .tsp-fields { background: #feecdb url('../images/rounded-footer-orange-grid-5.png') no-repeat left bottom; }
	.grid-4 .tsp-form .tsp-fields { background: #feecdb url('../images/rounded-footer-orange-grid-4.png') no-repeat left bottom; }
		
		/* field */
		.tsp-form .tsp-fields .tsp-field,
		.tsp-form .tsp-fields .tsp-choice { padding: 0 0 0 16px; margin: 0 0 2px 0; }
		/* both field and choice.. */
		.tsp-form .tsp-fields .tsp-field .tsp-label,
		.tsp-form .tsp-fields .tsp-choice .tsp-label { display: inline; float: left; }
		.tsp-form .tsp-fields .tsp-field .tsp-value,
		.tsp-form .tsp-fields .tsp-choice .tsp-value { display: inline; float: left; }
		/* fields only */
		.tsp-form .tsp-fields .tsp-field { }
		.tsp-form .tsp-fields .tsp-field .tsp-label { width: 160px; }
		.tsp-form .tsp-fields .tsp-field .tsp-value { }
		.tsp-form .tsp-fields .tsp-field .tsp-value textarea { width: 320px; }
		.tsp-form .tsp-fields .tsp-field .tsp-error { float: left; }
		.tsp-form .tsp-fields .tsp-field .tsp-notes { display: block; clear: both; font-size: x-small; margin: 0 0 0 164px; zoom: 1; }
		.tsp-form .tsp-fields .tsp-field .tsp-notes a { color: #2b407e; }
		.tsp-form .tsp-fields .tsp-field .fff-error { display: inline; float:left; width: 540px; height: 16px; font-size: x-small; padding: 2px 0 0 20px; margin: 0 0 8px 164px; }
		.tsp-form .tsp-fields .tsp-field .tsp-value input { width: 160px; }
		.tsp-form .tsp-fields .tsp-field .tsp-value input[type="checkbox"] { width: 12px; }
		.tsp-form .tsp-fields .tsp-field .tsp-value select { width: 160px; }
		/* choices (exceptions for radio buttons) only */
		.tsp-form .tsp-fields .tsp-choice .tsp-label { margin: 0 8px 0 0; }
		.tsp-form .tsp-fields .tsp-choice .tsp-value { margin: 0 8px 0 0; }
		.tsp-form .tsp-fields .tsp-choice .tsp-value input { }
		.tsp-form .tsp-fields .tsp-choice .tsp-value label { }
		
		/* action */
		.tsp-form .tsp-fields .tsp-action { display: inline; float: right; }
		.tsp-form .tsp-fields .tsp-action a { font-weight: bold; color: #ffffff; text-transform: uppercase; text-decoration: none; padding: 7px 16px 1px; display: block; overflow: hidden; width: 133px; height: 28px; background: url('../images/submit-button.png') no-repeat; }
		.tsp-form .tsp-fields .tsp-action a:hover { background-position: 0 -36px; }
		
		/* seperator */
		.tsp-form .tsp-fields .tsp-seperator { margin: 8px 0; border-bottom: dotted 1px #f89e49; zoom: 1; }
	

/* ################################################ Example ################################################
<div class="tsp-form">
	<h1 class="top-correction">Fields block 1</h1>
	<div class="tsp-fields">
		<div class="tsp-description">
			<p>Lorem ipsum dolor sit amet.</p>
			<ul>	
				<li>Bullet 1</li>
				<li>Bullet 2</li>
				<li>Bullet 3</li>
			</ul>
		</div>
		<div class="tsp-seperator"><cid:Spacer runat="server" /></div>
		<h2>Persoonlijke gegevens</h2>
		<div class="tsp-field">
			<div class="tsp-label">E-mail</div>
			<div class="tsp-value"><asp:TextBox runat="server" ID="mEmail"></asp:TextBox></div>
			<div class="clear"></div>
		</div>
		<div class="tsp-field">
			<div class="tsp-label">Aanhef</div>
			<div class="tsp-value">
				<asp:DropDownList ID="mGender" runat="server">
					<asp:ListItem Text="Dhr." Value="M"></asp:ListItem>
					<asp:ListItem Text="Mevr." Value="F"></asp:ListItem>
				</asp:DropDownList>
			</div>
			<div class="clear"></div>
		</div>

		<div class="tsp-seperator"><cid:Spacer runat="server" /></div>
		<h2>Voorbeeld keuze</h2>
		<div class="tsp-choice">
			<div class="tsp-label">Maak een keuze</div>
			<div class="tsp-value"><asp:RadioButton Checked="true" runat="server" GroupName="LoginType" ID="ExistingCustomerCheck" onclick="creative$waad$login$changeGroup();" Text="Bestaande klant" /></div>
			<div class="tsp-value"><asp:RadioButton runat="server" GroupName="LoginType" ID="NewCustomerCheck" onclick="creative$waad$login$changeGroup();" Text="Nieuwe klant" /></div>
			<div class="clear"></div>
		</div>
	</div>
		
	<h1>Fields block 2</h1>
	<div class="tsp-fields">
		<div class="tsp-field">
			<div class="tsp-label">Yet another field</div>
			<div class="tsp-value"><asp:TextBox runat="server" ID="mSomeField"></asp:TextBox></div>
			<div class="tsp-notes">Belangrijke informatie voor dit veld.</div>
			<div class="clear"></div>
		</div>

		<div class="tsp-seperator"><cid:Spacer runat="server" /></div>
		<div class="tsp-action">
			<asp:LinkButton runat="server" ID="mSubmitButton" Text="Versturen"></asp:LinkButton>
		</div>
		<div class="clear"></div>
	</div>
</div>
*/