/* Loading data / submitting form */
	#loading-data,
	#submitting-form {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		z-index: 9999;
	}
	#submitting-form { display: none; }

		#loading-data-modal,
		#submitting-form-modal {
			position: fixed;
			top: 50%;
			left: 50%;
			width: 300px;
			margin-left: -150px;
			margin-top: -30px;
			background: white;
			padding: 20px 20px;
			-webkit-box-shadow: 5px 5px 30px 0 rgba(0,0,0,0.3);
					box-shadow: 5px 5px 30px 0 rgba(0,0,0,0.3);
		}
			#loading-data-modal > p,
			#submitting-form-modal > p {
				margin: 0;
				padding: 0;
				text-align: center;
			}


/* Section */

	#section-nav {
		width: 95%;
		max-width: 960px;
		margin: 0 auto;
		text-align: center;
		padding-top: 15px;
	}

	#section-content ul,
	#section-content li { text-align: left; }

		#section-nav > a {
			display: inline-block;
			padding: 2px 10px;
			text-decoration: none;
			border: 1px solid #666;
			color: #666;
			margin: 5px 2px;
			cursor: pointer;
		}
			#section-nav > a:hover,
			#section-nav > a.sel {
				color: white;
				background: #666;
			}


		.continue {
			clear: both;
			padding: 30px 0;
		}
			.continue > a {
				display: inline-block;
			    color: white;
			    background: none;
			    padding: 2px 10px;
			    text-decoration: none;
			    border: 1px solid #666;
			    color: #666;
			    margin: 5px 2px;
			    cursor: pointer;
			}
				.continue > a:hover { background: #666; color: white; }
	
			#submit-application > a {
				display: inline-block;
			    color: white;
			    background: none;
			    padding: 2px 10px;
			    text-decoration: none;
			    border: 1px solid #666;
			    color: #666;
			    margin: 5px 2px;
			    cursor: pointer;
			}
			#submit-application > a:hover { background: #666; color: white; }

	#section-content {
		width: 90%;
		max-width: 600px;
		margin: 0 auto;
	}

		#section-content > div { display: none; padding-top: 20px; }
		#section-content > div h2 { text-align: center; text-transform: uppercase; color: #666; }
		#section-content > div h3 { text-align: left; text-transform: uppercase; color: #666; }
		#section-content > div h4 { text-align: left; text-transform: uppercase; color: #c17c00; }
		#section-content > div p { text-align: left; clear: both; }

		.helper-large { clear: both; text-align: left; font-size: 0.8em; cursor: pointer; margin-top: -20px; margin-bottom: 20px;}
		.helper-large > span { font-size: 2em; position: relative; top: 4px; position: relative; }
			.helper-large:hover { color:#c17c00; }

		.input-label { padding: 4px 0; position: relative; }
		.input-label::after { clear: both; content: ""; display: block; }

		.input-label > label { float: left; width: 40%; text-align: left; line-height: 20px; display: block; min-height: 30px; position: relative; top: 5px;}
		.input-label > input, 
		.input-label > select, 
		.input-label > textarea { 
			float: left; 
			width: 60%; 
			text-align: left; 
			margin-bottom: 0; 
			-webkit-transition: all 300ms ease;
			   -moz-transition: all 300ms ease;
				-ms-transition: all 300ms ease;
				 -o-transition: all 300ms ease;
					transition: all 300ms ease;
		}
		.input-label > input[type=checkbox] { position: relative; top: 10px; width: auto; } 
		.input-label > .helper { clear: both; text-align: left; font-size: 0.8em; cursor: pointer; }
		.input-label > .helper > span { font-size: 2em; position: relative; top: 4px; position: relative;  }
		.input-label > .helper:hover { color:#c17c00; }



	/* valid/invalid */
		input.valid,
		textarea.valid,
		select.valid { border: 1px solid green; }
		.input-label.valid > input,
		.input-label.valid > select,
		.input-label.valid > textarea {
			width: calc(60% - 30px);
		}
		.input-label.valid::before {
			content: "✔";
			color: green;
			position: absolute;
			top: 8px;
			right: 0;
			font-size: 24px;
		}

		input.invalid,
		textarea.invalid,
		select.invalid { border: 1px solid red; }
		.input-label.invalid > input,
		.input-label.invalid > select,
		.input-label.invalid > textarea {
			width: calc(60% - 30px);
		}
		.input-label.invalid::before {
			content: "⨯";
			color: red;
			position: absolute;
			top: 7px;
			right: 0;
			font-size: 36px;
		}
		

		/* Wider */
			.input-label.wider > label { width: 60%; }
			.input-label.wider > input, 
			.input-label.wider > select, 
			.input-label.wider > textarea { width: 40%; }
			.input-label.wider > input[type=checkbox] { width: auto; }

			/* Validate */
				.input-label.wider.valid > input,
				.input-label.wider.valid > select,
				.input-label.wider.valid > textarea {
					width: calc(40% - 30px);
				}
				.input-label.wider.invalid > input,
				.input-label.wider.invalid > select,
				.input-label.wider.invalid > textarea {
					width: calc(40% - 30px);
				}
		

	/* Save */
		#saving {
			position: fixed;
			top: 10px;
			right: 10px;
			padding: 10px 20px;
			background: #79b518;
			color: white;
			z-index: 99998;
			cursor: pointer;
			-webkit-transition: all 300ms ease;
			   -moz-transition: all 300ms ease;
				-ms-transition: all 300ms ease;
				 -o-transition: all 300ms ease;
					transition: all 300ms ease;
			-webkit-transform: translateY(-80px);
			   -moz-transform: translateY(-80px);
				-ms-transform: translateY(-80px);
				 -o-transform: translateY(-80px);
					transform: translateY(-80px);
		}
			#saving.working {
				-webkit-transform: translateY(0);
				   -moz-transform: translateY(0);
					-ms-transform: translateY(0);
					 -o-transform: translateY(0);
						transform: translateY(0);
			}
		#savingError {
			position: fixed;
			top: 10px;
			right: 10px;
			padding: 10px 20px;
			background: #b52e18;
			color: white;
			z-index: 99999;
			cursor: pointer;
			-webkit-transition: all 300ms ease;
			   -moz-transition: all 300ms ease;
				-ms-transition: all 300ms ease;
				 -o-transition: all 300ms ease;
					transition: all 300ms ease;
			-webkit-transform: translateY(-80px);
			   -moz-transform: translateY(-80px);
				-ms-transform: translateY(-80px);
				 -o-transform: translateY(-80px);
					transform: translateY(-80px);
		}
			#savingError.error {
				-webkit-transform: translateY(0);
				   -moz-transform: translateY(0);
					-ms-transform: translateY(0);
					 -o-transform: translateY(0);
						transform: translateY(0);
			}


/* File upload */

	.input-file-upload { position: relative; clear: both; }
	.input-file-upload::after { display: block; content: ""; clear: both; }
				
	.input-file-upload > h3 { margin-bottom: 10px; }



			.fileUpload-fakeButton {
				position: relative;
				display: inline-block;
				overflow: hidden;
				width: 130px;
				float: left;
				margin-left: 10px;
			}
				.fileUpload-fakeButton > span.replaceFile {
					display: inline-block;
					background: #959559;
					color: white;
					font-family: 'Roboto Condensed', sans-serif;
					font-weight: 400;
					width: 130px;
					text-transform: uppercase;
					padding: 5px 15px;
					-webkit-transition: all 300ms ease;
					   -moz-transition: all 300ms ease;
						-ms-transition: all 300ms ease;
						 -o-transition: all 300ms ease;
							transition: all 300ms ease;
				}
				.fileUpload-fakeButton:hover > span.replaceFile {
					opacity:0.7;
				}

				.fileUpload-fakeButton > input[type=file] {
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					opacity: 0;
				}

				.fileUpload-fakeButton > span.progressBar {
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					overflow: hidden;
					background: #ccc;
					display: none;
				}
					.fileUpload-fakeButton > span.progressBar > em {
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						background: #959559;
						width: 1%;
						text-align: center;
						color: white;
						font-family: 'Roboto Condensed', sans-serif;
						font-weight: 400;
						padding: 5px 0;
						overflow: hidden;
						-webkit-transition: all 500ms ease;
						   -moz-transition: all 500ms ease;
							-ms-transition: all 500ms ease;
							 -o-transition: all 500ms ease;
								transition: all 500ms ease;
					}
					.fileUpload-fakeButton > span.progressBar > strong {
						display: block;
						color: white;
						font-family: "roboto slab";
						font-weight: 400;
						text-transform: uppercase;
						padding: 5px 15px;
						text-align: center;
					}

		.fileUpload-error {
			display: none;
			margin-bottom: 10px;
			max-width: 70%;
			position: relative;
			padding-right: 20px;
		}
			.fileUpload-error > em {
				display: block;
				position: absolute;
				top: 0;
				right: 5px;
				font-style: normal;
				cursor: pointer;
			}

		.fileUpload-baseFilename {
			color: #444;
			padding: 5px 10px;
			border: 1px solid #999;
			width: calc(100% - 15px - 130px);
			margin: 0 0 20px 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			float: left;
		}