/*************************************************************************************************
 *		Sports Direct Kiosk stylesheet
 *		Targeted at Chrome on fixed-format: 1280 x 1024 with an on-screen keyboard
 *
 *		May 2014 - Glenn Gilbert
 *************************************************************************************************/
/*	Palette:
		
		dark grey:			#6e6e6e
		text:				#444
		dark blue:			#2461c0
		medium blue:		#3f9ad6
		disabled blue:		#d4e0f3
*/

 



/* Reset */
	h1, h2, h3, h4, p, legend, label, fieldset, li, td, form, a, body {
						margin:0; padding:0; border:none; 
						font:normal 18px/1.3 "Helvetica Neue",Helvetica,Arial,sans-serif; color:#0B1E3C; }
	body {				background:#fff; }
	a {					color:#000; font-weight:bold; text-decoration:none; }
	hr {				color: #999; background-color:#999; margin:0; }
	select, input {		font-size:18px; }


/*	Preview message		*/
	div#PreviewInfo {	position:fixed; top:1px; left:25%; z-index:100;
						width:50%; text-align:center; padding:5px 0;
						border:1px solid #999; background:#ffc; 
						border-radius:5px; }





	#MainContainer {	position:relative; }



	/*	TopBanner styling - absolute positioning to prevent resizing issues */
	#TopBanner {		position:relative;
						height:75px; margin:0; padding:0;
						border-bottom:2px solid #31496f; }
	#TopBanner img {	display: block; height: 100%; max-height: 140px; width: auto; margin-left: 10px }
	#TopBanner img.HLogo {	position:absolute; top:26px; left:13px;   }
	#TopBanner h1 {		position:absolute; top:50%; /* prevent resizing affecting banner */
						margin:-0.75em 0 0 -25%;
						left:50%; width:50%; text-align:center;
						padding:0; color:#0B1E3C;
						font-size:40px;  }
	.Tablet #TopBanner h1 {		margin-left:0; left:462px; text-align:left; }
	#TopBanner #RHLinks {		position:absolute; top:20px; right:20px; width:400px; }
	#TopBanner #AgentName {		position:absolute; top:0; right:150px; text-align:right; 
								color:#6e6e6e; line-height:1; }
	#TopBanner #btnAgentLogin { position:absolute; top:0; right:75px; }
	#TopBanner #btnReset { 		position:absolute; top:0; right:0; }


	h2 {				position:relative;
						height:50px; line-height:50px; background:#0B1E3C; border-bottom:2px solid #31496f;
						color:#fff; padding:0 0 0 20px; font-size:28px; }
	h3 {				color:#0B1E3C; font-size:20px; font-weight:bold; margin:0 0 1em; padding:0; }
	h4 {				color:#f9ef50; font-size:20px; font-weight:bold; margin:1em 0 0; padding:0; }



	.TubeMap {			position:absolute; top:7px; right:0; padding:0; margin:0; 
						list-style:none; }
	.TubeMap li {		list-style:none; float:left; margin:0 0 0 -20px;
						border:2px solid #fff; border-width:2px 0;
						position:relative; left:-20px;
						height:20px; padding:5px 30px; line-height:20px;
						font-size:14px; color:#0B1E3C;
						background:transparent url(Images/KioskProgressIndicatorBGSprite_HG.png) -836px center no-repeat;  } 
	.TubeMap li.Done,
	.TubeMap li.Current {		color:#fff; background-position:-36px center; font-weight:normal; font-size:13px; }
	.TubeMap li.Finished {		background-position:-1236px; }
	.TubeMap li:first-child { background-position:-100px !important; border-left:2px solid #fff; padding-left:15px }
	.TubeMap li:last-child { border-right:2px solid #fff; padding-right:15px; }



	/*	Buttons	*/
	.Buttons {			position:fixed; top:200px; left:0; padding:0; margin:0; width:100%; }

	.btnGo,						
	.btnNext_Disabled,
	.btnNext,
	.btnPrimary,
	.btnSecondary,
	.btnSecondary2 {	display:block; width:105px; height:65px; cursor:pointer;
						-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; 
						border:1px solid #444; border-radius:7px; 
						font:normal normal 16px/65px "Helvetica Neue",Helvetica,Arial,sans-serif;
						text-align:center; padding:0;
						-webkit-appearance: none; }
	.btnPrimary,
	.btnNext_Disabled,
	.btnNext {			color:#0B1E3C; background:#E5E5E5; position:absolute; right:20px; top:0; text-transform:uppercase; }
	.btnNext_Disabled {	-moz-opacity:0.20; opacity:0.20; cursor:default; }
	.btnSecondary {		color:#444; background:#fff; position:absolute; left:20px; top:0; }
	.btnSecondary2 {	color:#444; background:#fff; position:absolute; left:20px; top:0; border:none; line-height:1.3; height:auto; padding-top:8px; padding-bottom:8px; white-space:normal; }
	.btnGo {			color:#fff; background:#304a70; border-color:#fff; border-radius:5px; height:2em; line-height:1; width:50px; position:relative; top:-0.2em; margin-left:10px; }
	a.btnAuxillary {	display:block; width:60px;  padding:0.3em 0; cursor:pointer;
						-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; 
						background:#304a70; border:1px solid #444; border-radius:7px; 
						color:#fff; font-size:12px; font-weight:bold; text-align:center; line-height:1; }
	.btnNext:hover, .btnConfirm:hover {	
						color:#fff; background:#304a70; transition:background-color 0.3s ease;  }









	/*	Product selection page  - viewProduct	*/
/*
				<div class="FSWrap"><fieldset><legend>Product Selection</legend><div>
					<p>
						<span id="rfv_ProductSelection" class="WideError" style="color:Red;display:none;">Please select a product</span>
					
						<span id="ProductSelection">
							<span class="Product">
								<input id="ProductSelection_0" type="radio" name="ProductSelection" value="anytime_sale" />
								<label for="ProductSelection_0"><strong>Anytime Membership</strong><br />
									&pound;36.00 per month plus an Admin Fee of &pound;20.00<br />
									No Contract</label>
							</span><br />
					
							<span class="Product">
								<input id="ProductSelection_1" type="radio" name="ProductSelection" value="pruhealth_sale" />
								<label for="ProductSelection_1"><strong>PruHealth Anytime Membership</strong><br />
									&pound;18.00 per month plus an Admin Fee of &pound;10.00<br />
									No Contract<br />
									PruHealth Membership Required</label>
							</span><br />
						</span> 
					</p>
				</div></fieldset></div> 
*/
	.viewProduct h3 {	margin-left:20px; }
	.viewProduct fieldset {	border:none; padding:0; /* override fieldset */ }
	#ProductSelection {	display:block; overflow:hidden;  margin:0 0 0 20px; }
	#ProductSelection .Product,
	#ProductSelection .PromoProduct {
						position:relative;
						display:inline-block; width:225px; height:80px; margin:0 30px 30px 0; padding:5px 15px;
						border:5px solid #0B1E3C; border-radius:10px; background:#f0f0f0; 
						overflow:hidden;
						float:left; }
	#ProductSelection .Product label,
	#ProductSelection .Product em,
	#ProductSelection .PromoProduct label,
	#ProductSelection .PromoProduct em {		color:#333; }
	#ProductSelection .Product:hover,
	#ProductSelection .PromoProduct:hover {
						background:#5D7292; transition:background-color 0.3s ease;  }
	#ProductSelection .Product:hover label,
	#ProductSelection .Product:hover em,
	#ProductSelection .PromoProduct:hover label,
	#ProductSelection .PromoProduct:hover em {
						color:#fff; transition:color 0.3s ease;  }
	#ProductSelection .ProductSelected {	background-color:#0B1E3C; color:#fff; border-color:#5D7292; }
	#ProductSelection .ProductSelected:hover {	
						background:#0B1E3C; transition:none;  }
	#ProductSelection .ProductSelected label,
	#ProductSelection .ProductSelected em {	color:#fff; }

	#ProductSelection br {		display:none; /* remove the control-emitted break */ }
	#ProductSelection input {	position:absolute;  right:1000px; }
	#ProductSelection label {	width:auto; text-align:left; font-size:18px;  line-height:1; }
	#ProductSelection strong {	display:block; font-size:1.1em; padding-bottom:0.3em; }
	#ProductSelection em {		position:absolute; bottom:5px; right:10px;  left:auto; top:auto;
								font:bold 26px/1 "Helvetica Neue",Helvetica,Arial,sans-serif; color:#2461C0; }
	#ProductSelection label span { position:absolute; bottom:7px; left:15px; }

	#containerPromocode_Prods {	width:600px; margin:0 180px; }





	/*	Personal info	*/
	.viewPersInfo {		 }
	.viewPersInfo table {	width:90%; margin:0 auto; }
	.viewPersInfo td {		color:#fff; }






	/*	Horizontal scrolling mechanism	*/
	.ChunkWrapOuter {	position:absolute; left:-60px; right:0; top:0;
						float:left;
						width:760px;
						overflow-x:hidden; overflow-y:auto; min-height:50px; /* --------------- */ }
	/* .ChunkWrapOuter:before,
	.ChunkWrapOuter:after {	content:"zzzzzzzzzzzzz"; display:block; }
	.ChunkWrapOuter:after {	clear:both; }	*/
	
	.ChunkWrapInner {	position:relative; height:auto;
						width:10000px; overflow:visible /* clear */; }
	.Chunk {				position:relative; 
						width:700px; 
						float:left; margin:0 40px; }
	.Disabled {			color:#ddd; cursor:default; }
	.Disabled:hover {	text-decoration:none !important; }

	/*	Buttons - in the .Buttons container (overlay the next/previous buttons)	*/
	.btnChunkScrollLHS.Disabled,
	.btnChunkScrollRHS.Disabled { display:none; }







	/*	Footer */
	.Footer {			position:fixed; bottom:10px; width:100%; z-index:-1;
						font-size:0.8em; line-height:1.1; color:#80868e; text-align:center; margin:0; padding:1em 0 0.5em; }
	.Footer a {			color:#70767e; font-size:1em; text-decoration:none; }
	.Footer a:hover {	text-decoration:underline; }






	/*	Forms	*/
	.FormContainer {	position:relative; margin:20px 180px 80px; }
	.FSWrap {			margin:1.5em 0;
						background:#5d7292; }
	fieldset {			position:relative; /* abs pos legend */
						margin:0; padding:34px 20px 10px;
						border:2px solid #0B1E3C; }
	fieldset, fieldset p, fieldset em, fieldset label, fieldset legend, fieldset li {
						color:#fff; }
	fieldset a {		color:#FEF135; }
	
	fieldset p {		clear:both; position:relative;
						margin:0; padding:0.3em 0;}
	fieldset p 	em {	/*	Mandatory field - asterisk */	
						position:absolute; left:207px; top:0.35em;
						font:normal 1.2em/1 Times, serif; }
	legend {			padding:0; margin:0; position:absolute; top:5px; left:20px;
						font-size:18px; font-weight:bold; }
	label, 
	.Label {			float:left;	
						width:200px; margin-left:0; margin-right:20px; 
						text-align:right; line-height:1;}
	.WideLabel {		float:none; width:auto; margin:1em 0; }
	label i, 
	.Label i {			/* use italic to set as normal font */
						font-style:normal; font-weight:normal; white-space:nowrap; }

	.TwoRadiosOnRHS {		margin:0.6em 0 0.6em 60px; }
	.TwoRadiosOnRHS span {	display:block; margin:0 180px 0 0; }
	.TwoRadiosOnRHS label {	float:right; text-align:right; display:block; width:50px; padding:0; margin:0;  position:relative; padding-right:30px; }
	.TwoRadiosOnRHS input {	-webkit-transform:scale(2); transform:scale(2); position:absolute; right:-10px;  }


	.viewPARQ {			 	}
	.viewPARQ fieldset {				padding-top:10px; }
	.viewPARQ .TwoRadiosOnRHS {			margin:0.6em 0 0.6em 60px; }
	/*	http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class	*/
	.viewPARQ div > .TwoRadiosOnRHS {	position:relative; border-top:none; padding:0.5em 0; }
	.viewPARQ div > .TwoRadiosOnRHS ~ .TwoRadiosOnRHS {	border-top:1px dashed #aaa; }
	.viewPARQ .TwoRadiosOnRHS label {	padding-top:0.3em; }
	.viewPARQ .TwoRadiosOnRHS strong {	position:absolute; left:-65px; 
										display:block; width:50px; text-align:right;
										font-size:1.4em; top:0.2em; }
	#parq_ConfirmDoctor {	margin-right:20px; }
	


	/*	Address lookup	*/
	#AddressResults {		margin:0; padding:1em 0 0.5em; display:none; color:#fff; }
	#AddressResults select {	width:100%; padding:4px 1px; border:1px solid #999999; border-radius:3px;}
	#AddressResults span {	padding-left:220px; }
	#FindAddress {			position:relative; top:3px; 
							margin:0 0 0 10px; padding:5px 10px;
							background:#0B1E3C; border:1px solid #31496f; color:#fff; font-size:13px; 
							-webkit-appearance: none; }
	#FindAddress:hover {	text-decoration:none;
							background:#3498db; transition:background-color 0.3s ease;  }
	#FindAddress:focus {	outline:none; }
	.AddressFieldWrapper {	display:block; /* inline to block */ float:left; }
	.AddressFieldWrapper input { clear:both; }
	.AddressFieldWrapper .Error {	margin-left:0; }
	#Address1 {				border-bottom-width:0; border-radius:0; border-top-left-radius:3px; border-top-right-radius:3px; margin-bottom:0; }
	#Address2, #Address3, #Address4 {	
							border-top:1px solid #e7e7e7; 
							border-bottom-width:0; 
							margin-top:0; margin-bottom:0; }
	#Address5 {				border-top:1px solid #e7e7e7; margin-top:0; }
	#AddressResults select, .AddressList, .txtWide, .txtMedium, .txtNarrow, .txtVNarrow {
							border:1px solid #ccc; }





	.viewAgreement { 		 }
	.viewAgreement .Callout {		float:left; clear:left; margin:10px 0 40px; width:250px; }
	.viewAgreement .FSWrap {		margin-left:300px; }
	.viewAgreement .Callout a {		text-decoration:underline; }

	#HomeBranch {		position:fixed; bottom:12px; right:10px; color:#bbb; font-size:10px; }
	#HomeBranch a {		color:#aaa; font-size:10px; }


	/*	GGLB - rolled me own lightbox	*/
	#LBMask {			position:fixed; top:0; left:0; height:100%; width:100%;
						display:none;
						z-index:0;
						background:rgba(0,0,0,0.5); }
	#LBContent {		position:fixed; top:5%; left:10%; height:90%; width:80%; 
						-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; 
						padding:20px; overflow-y:scroll;
						border:5px solid black; background:white; }
	#LBContent:before {	position:fixed; top:4%; right:9%; 
						z-index:10;
						font-size:35px; font-weight:bold; background:#fff;
						border:5px solid black; border-radius:45px; padding:0; margin:0;
						display:block; width:45px; height:45px; text-align:center; line-height:45px;
						content:"X"; }
	#LBContent .Loading {	text-align:center; padding-top:30%; 
						font-weight:bold; font-size:20px; }
	/*	And now for the popup -- logons,  etc..		*/						
	#LBSetBranch,
	#LBAgentLogin,
	#PopupContent {		display:none;
						position:fixed; top:200px; left:50%; width:600px;  margin-left:-300px; height:300px;
						-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; 
						padding:0; overflow:show; 
						border:5px solid black; background:white; }
	#PopupContent {		padding:20px; overflow-y:hidden; }

	.PUTitle {			position:relative; text-align:center; padding:10px 20px; font-size:20px;
						background:#fef135; border-bottom:5px solid #999; }
	.PUTitle .Close {	position:absolute; top:5px; right:20px; z-index:10; display:block;
						padding:0; margin:0;
						display:block; width:60px; height:3em; text-align:center; line-height:3;
						-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; 
						background:#2461c0; border:1px solid #444; border-radius:10px; 
						color:#fff; font-size:12px; font-weight:bold; text-align:center; cursor:pointer;  }
	.PUBody { 			padding:20px; }
	.PUBody p { 		margin:1em 0; }
	.PUBody select {	width:300px; }
	.LBAButtons {		text-align:right; padding-top:30px; }
	#btnSetBranchSubmit,
	#btnALCancel, #btnALClear, 	#btnALSubmit {
						padding:0; margin:0 0 0 1em; float:none;
						display:inline-block; width:60px; height:3em; text-align:center; line-height:3;
						-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; 
						background:#2461c0; border:1px solid #444; border-radius:10px; 
						color:#fff; font-size:12px; font-weight:bold; text-align:center; cursor:pointer; }
	#btnALCancel, #btnALClear {		background:#fff; border:1px solid #2461c0; color:#2461c0;  }
	









/* ---------------------------------------------------- */








	/*	Fieldset */
	
	
	.FullWidthCheckbox label {	float:none; width:auto; margin:0 30px 0 0; 
								/* override the default label settings */ 
								font:normal normal 1em/1.5 Verdana, sans-serif; text-align:left;  }
	.FullWidthCheckbox input {	float:right; margin-bottom:1em; }

	

	.txtWide,
	select.txtWide {	width:230px; }
	.txtMedium ,
	select.txtMedium {	width:110px; /* fit two into the space of one wide one */ }
	.txtNarrow,
	select.txtNarrow {	width:70px; /* fit three into one */ }
	.txtVNarrow {		width:34px; }
	select.txtVNarrow {	width:34px; }
	.AddressList {		margin-left:60px; width:300px; }
	
	.Indent {			margin-left:160px; display:block; }
	
	input, 
	select {			float:left; padding-left:0;                
						box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
   	.FieldHelpText {	position:absolute; left:470px; width:340px; line-height:1;  }
  	.FieldHelpText[style*="block"] {	display:inline-block !important; }
   	#helpCC_cardNo[style*="block"] {	display:block !important; /* override */ }
    .FieldHelpText:before {		content:'\A'; /* insert a line break */ }
	select.txtNarrow,
	select.txtMedium {	margin-right:10px; }
	select.Last {		margin-right:0; /* YoB */ } 
	.WideSelect {		margin:1em 0; width:100%; }

	.RadioCheckLabel {	width:auto; margin-left:0; }
	.RadioCheckLabel input {  }
	.RadioCheckLabel label { margin-left:0; margin-right:2em; width:auto; }

	.AddressList,
	.txtWide,
	.txtMedium,
	.txtNarrow,
	.txtVNarrow {		padding:4px 1px; background:#fff; 
						border:2px solid #0B1E3C; border-radius:3px; }
	input[type=text] {	padding-left:4px; }
	
/*	Big up the radio buttons & checkboxes	*/
	input[type=radio] {	-webkit-transform:scale(1.5); transform:scale(1.5);
						margin:0 1em; }
	.CheckboxContainer {	/*	Container,  e.g. paragraph,  needs more room...	*/
						padding-top:1em; padding-bottom:2em; }
	.CheckboxContainer em {	top:1em; }
	input[type=checkbox] {	-webkit-transform:scale(2); transform:scale(2); }


	.Error,
	.WideError {		margin:0.5em 0; border:2px solid #c00; border-radius:5px; padding:3px 10px; 
						color:#a00 !important; font-weight:bold; background:#fce6e2; zoom:1/*IE*/; }
	p.Error,
	.WideError[style*="inline"] {
						display:block !important; Xwidth:100%; clear:both;
						box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
	.ErrWrap .Error {	margin-left:0; }
	#MainForm p.Error,
	#MainForm .WideError {	width:auto; }
	.ErrorFullWidth {	margin:0.5em 0; border:2px solid #c00; border-radius:5px; padding:3px 10px; 
						color:#a00 !important; font-weight:bold; background:#fce6e2; zoom:1/*IE*/;
						width:100%; clear:both;
						box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }

	.Error li,
	.Error p {			color:#a00; }
	.Error input {		background:#fce6e2; border:1px solid #c00; }
	.Error strong {		color:#a00; }
/*	.Error {			float:left; clear:left; margin-left:168px; width:205px; }	*/

	.Error {			position:absolute; left:480px; top:-0.3em; }
/*	From cssarrowplease.com */
	.Error { 			background: #ec1b24; border: 1px solid #fff; border-radius:0;
						width:300px; min-height:1.66em;
						color:#fff !important; font-weight:normal !important; } 
	.Error:after, 
	.Error:before { 	right:100%;top: 1em; border:1px solid transparent; content:" "; 
						height: 0; width: 0; position:absolute; } 
	.Error:after { 		border-color: rgba(255, 0, 0, 0); border-right-color: #ec1b24; 
						border-width: 0.95em; margin-top: -0.95em; } 
	.Error:before { 	border-color: rgba(240, 0, 0, 0); border-right-color: #fff; 
						border-width: 1.1em; margin-top: -1.1em; }






	div.ErrorSummary {	color:#a00; font-weight:bold; display:none; }
	.ErrorSummary ul {	margin:0; }
	.ErrorSummary li {	 }
	p.ErrorText {		color:#a00; font-weight:bold; margin:0.5em 0; }
	
	/*	For override errors	*/
	.ErrorMessage {		border:1px solid #c00; background:#fff; padding:0.5em 1em; }
	.ErrorMessage p,
	.ErrorMessage li {	color:#f33; font-weight:bold; }

	textarea {			font:small Arial, sans-serif; }


	table {				clear:left; border-collapse:collapse; }
	table p {			width:100% !important/* override paragraph settings */; }
	td {				color:#fff; padding:0.4em 0; vertical-align:top; }
	td.Left {			padding-right:30px; width:66%; }
	td.Right {			padding-left:0; width:33%; }
	tr.TwoCols {		border-bottom:1px dotted #aaa; }
	
	td.Wide {			width:230px; }
	td.Medium {			width:130px; }
	td.HalfL {			width:48%; padding-right:2%; }
	td.HalfR {			width:48%; padding-left:2%; }
	ul.DDGuar {			clear:left; margin-left:0; padding-left:5px; }
	ul.DDGuar li {		clear:left; margin-left:10px; padding-left:0; list-style:disc outside none; }
	ul.DDGuar ul {		margin-left:10px; padding-left:10px; }
	
	
	
	
	/*	accordion progress widget styling	*/
	h2.Head, h2.Current, h2.Foot {
						clear:both; margin:0; padding:1em 10px;	font: bold 0.92em "Helvetica Neue",Helvetica,Arial,sans-serif;  }
	h2.Head b, h2.Current b, h2.Foot b {	
						background:#000; 
						padding:1px 0.33em; color:#fff; font-size:0.92em; }
	h2.Head {			border-bottom:1px solid #CED5E5; 
						padding-right:40px; padding-left:32px; text-indent:-22px;
						background:#0a55a3 url(images/tick_white.png) right 10px no-repeat; color:#fff; }
	h2.Head b {			background:#bbb; }
	h2.Current {		font-size:1em;
						background:#3498db; color:#fff; }
	h2.Current b {		background:#3B3B53 url(../_Controls/Images/NumberBackground.gif) 0 0 no-repeat; text-shadow:none; font-size:0.85em; }
	#CurrentView {		clear:both; overflow:hidden /* clear contents */; padding:15px 30px; background:#fff; 
						border-left:1px solid #e7e7e7; border-right:1px solid #e7e7e7; }
	h2.Foot {			border-top:1px solid #CED5E5;
						background:#0a55a3; /* #445967 */ color:#fff;   }
	h2.Foot b {			background:#999; }



	span.Slash {		float:left; padding-right:1em; }
	
	


	/*	v2 styling	*/
	.Panel {				margin:0; padding:0; }

	.LHCheckbox label {		width:auto; }
	.LHCheckbox span {		clear:both; width:95%; margin:0;}
	.DDLogo {				float:right; border:none; padding:0; margin:0 0 0 30px; }
	.DDLogoAbPos {			position:absolute; top:10px; right:10px; }


	#btnShowOverrideForm {	float:none; display:block; margin:0 auto; }
	#btnLogoff {			float:none; }


	.FullWidthCheckboxLHS label {	display:block; clear:both; width:100%; text-align:left; }
	.FullWidthCheckboxLHS input {	float:left; }


	/*	Optional page styling overrides	*/
	.FullWidthTextArea {	 }
	.FullWidthTextArea label {	width:100%; text-align:left; }
	textarea {				width:98%; height:100px; clear:both; }




	/*	On-screen-keyboard styling	*/

	#osk {						display:none; 
								z-index:1999;
								position:fixed; bottom:0;
								width:100%; 
								background:-moz-linear-gradient(top, rgba(255,255,255,1) 0, rgba(255,255,255,0) 15px), url(images/kbbg.png) repeat;
								background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), color-stop(0.05, rgba(255,255,255,0)), to(rgba(255,255,255,0))), url(images/kbbg.png) repeat;
								background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0, rgba(255,255,255,0) 15px), url(images/kbbg.png);
								border-top:1px solid #aaa; 
								margin:0; padding:10px 0; }
	#osk_spacer { 				height:1px; /* allow for the page to be scrolled vertically - there's no content in the flow */ }	
	#osk div {					text-align: center; }
	#osk #key_description {		display:none; }
	#osk #key_spacebar {			width: 400px; height:44px; }
	#osk #key_spacebar_narrow {		width:200px; }
	#osk #key_spacebar_vnarrow {	width:120px; height:44px;  }

	#osk #key_left,
	#osk #key_right,
	#osk #key_tab,
	#osk #key_leftshift,
	#osk #key_rightshift,
	#osk #key_leftshift,
	#osk #key_enter,
	#osk #key_enter_narrow,
	#osk #key_backspace_narrow,
	#osk #key_backspace {		width:140px; 
								background: #dddddd; /* Old browsers */
								background: -moz-linear-gradient(top, #dddddd 1%, #dddddd 50%, #aaaaaa 99%); /* FF3.6+ */
								background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#dddddd), color-stop(50%,#dddddd), color-stop(99%,#aaaaaa)); /* Chrome,Safari4+ */
								background: -webkit-linear-gradient(top, #dddddd 1%,#dddddd 50%,#aaaaaa 99%); /* Chrome10+,Safari5.1+ */
								background: -o-linear-gradient(top, #dddddd 1%,#dddddd 50%,#aaaaaa 99%); /* Opera 11.10+ */
								background: -ms-linear-gradient(top, #dddddd 1%,#dddddd 50%,#aaaaaa 99%); /* IE10+ */
								background: linear-gradient(to bottom, #dddddd 1%,#dddddd 50%,#aaaaaa 99%); /* W3C */
								filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#aaaaaa',GradientType=0 ); /* IE6-9 */		}
	#osk #key_left,
	#osk #key_right {				height:44px; width:auto; padding-left:0.8em; padding-right:0.8em; }

	#osk #key_lefthide_narrow,
	#osk #key_righthide_narrow,
	#osk #key_enter_narrow,
	#osk #key_backspace_narrow {	width:90px; height:44px; }

	#osk #key_lefthide_narrow,
	#osk #key_righthide_narrow,
	#osk #key_lefthide,
	#osk #key_righthide {		width:auto;  height:auto; padding:2px 5px 4px; font-family:verdana;
								border-color:#773333;  border-radius:3px; text-shadow:none; color:#550000;
								-webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; 
								background: #eedddd; /* Old browsers */
								background: -moz-linear-gradient(top, #eeddcc 1%, #eeddcc 20%, #ccbbaa 99%); /* FF3.6+ */
								background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#eeddcc), color-stop(20%,#eeddcc), color-stop(99%,#ccbbaa)); /* Chrome,Safari4+ */
								background: -webkit-linear-gradient(top, #eeddcc 1%,#eeddcc 20%,#ccbbaa 99%); /* Chrome10+,Safari5.1+ */
								background: -o-linear-gradient(top, #eeddcc 1%,#eeddcc 20%,#ccbbaa 99%); /* Opera 11.10+ */
								background: -ms-linear-gradient(top, #eeddcc 1%,#eeddcc 20%,#ccbbaa 99%); /* IE10+ */
								background: linear-gradient(to bottom, #eeddcc 1%,#eeddcc 20%,#ccbbaa 99%); /* W3C */
								filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeddcc', endColorstr='#ccbbaa',GradientType=0 ); /* IE6-9 */		}
	#osk #key_lefthide {		position:absolute; top:20px; left:10px; border-width:2px;  }
	#osk #key_righthide {		position:absolute; top:20px; right:10px; border-width:2px; }


	#osk #key_tab {				width:100px; }



	#osk button {				font-family: Arial, Helvetica, sans-serif;
								font-size: 18px;
								width:75px; height:56px; margin:2px;
								color: #0b415e;
								background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #cccccc);
								background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(0.50, #ffffff), to(#ccccc));
								background: -webkit-linear-gradient(top, #ffffff 1%,#ffffff 50%,#cccccc 99%);
								border-radius: 5px;
								border: 1px solid #333;
								-moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 3px rgba(255,255,255,1);
								-webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 3px rgba(255,255,255,1);
								box-shadow:0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 3px rgba(255,255,255,1);
								text-shadow:0px -1px 0px rgba(000,000,000,0.2), 0px 1px 0px rgba(255,255,255,1);		}