@import url('https://fonts.googleapis.com/css?family=Indie+Flower|Quicksand');

body {
	background-image: url('/img/background.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	color: #FFF !important;
	font-size: 14px;
	min-height: 100vh;
	font-family: 'Quicksand', sans-serif;

	#content {
		max-width: 500px;
		width: 500px;
		margin: 20px auto;
		padding: 10px 10px 10px 10px;
		background-size:16px 16px;
		font-size: 1rem;
		background-color:rgba(56, 76, 65, 0.95);
		border: 1px solid rgb(69, 87, 77);
		position: absolute;
		top: 50%;
		left: 50%;
		-ms-transform: translateX(-50%) translateY(-50%);
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
	}

	h1 {
		margin-bottom: 5px;
		text-transform: uppercase;
		font-size: 3rem;
	}

	h2 {
		margin-top: 0;
		color: rgba(255, 255, 255, 0.877);
		text-transform: uppercase;
		font-size: 1.5rem;
	}

	.spacer {
		clear: both;
		line-height: 0;
		padding: 0;
		margin: 0;
		font-size: 0;
	}

	a, a:visited {
		color: #58bfe4;
	}

	label {
		display: block;
		width: 100%;
		margin: 10px 0 5px 0;

		&:first-child {
			margin: 0 0 5px 0;
		}

		&:last-child {
			margin: 10px 0 0 0;
		}
	}

	&#upload {

		#upload-settings {
			label {
				float: left;
				width: 45%;
				text-align: left;
			}
			input, select {
				width: 45% !important;
				text-align: left;
			}
		}

		div#upload-column {
			float: left;
			width: 190px;


			form.dropzone {
				margin: 0;
				cursor: pointer;

				background:
				linear-gradient(45deg, #33453b 45px, transparent 45px)64px 64px,
				linear-gradient(45deg, #33453b 45px, transparent 45px,transparent 91px, #41574b 91px, #41574b 135px, transparent 135px),
				linear-gradient(-45deg, #33453b 23px, transparent 23px, transparent 68px,#33453b 68px,#33453b 113px,transparent 113px,transparent 158px,#33453b 158px);
				background-color:#41574b;
				background-size: 128px 128px;

				text-align: center;
				min-height: 170px;
				max-height: 170px;
				height: 100%;
				white-space: nowrap;
				position: relative;

				&:before {
					content: '';
					display: inline-block;
					vertical-align: middle;
					width: 0;
					margin-right: -.25em;
					height: 100%;
				}

				&.dz-drag-hover {
					background-color:rgba(64, 154, 189, 0.66);
				}

				.dz-message {
					font-family: 'Indie Flower', cursive;
					font-size: 1.3rem;
					margin: 35px 15px;
					display: inline-block;
					vertical-align: middle;
					white-space: normal;
					padding: 0 1em;
				}
			}

			.max-filesize-warning {
				font-family: 'Quicksand', sans-serif;
				padding: 0;
				margin: 2px 0 0 0;
				font-size: .8rem;
				position: absolute;
				bottom: .5rem;
				right: .5rem;
			}

			&.wide {
				width: 100%;
			}
		}

		div#settings-column {
			float: right;
			max-width: 280px;
			width: 280px;
			display: none;
			padding-left: 1rem;

			p.link {
				max-width: 80%;
				width: 80%;
				background-color: #CCC;
				white-space: nowrap;
				padding: 6px;
				background-color: #545454;
				margin: 0;
				overflow: hidden;
				display: inline-flex;
			}

			.clippy {
				background-image: url(/img/clippy.svg);
				background-size: 15px;
				background-repeat: no-repeat;
				background-color: transparent;
				border: 0;
				height: 28px;
				width: 20px;
				background-position: center center;
				cursor: pointer;
			}
		}

		div#files-list {
			display: none;
			margin: 20px 0 0 0;
			font-size: 12px;
			padding: 5px 0;
			position: relative;

			.preview-tpl {
				display: none;
			}

			.file-row {
				padding: 10px 0px 10px 6px;
				border-top: 1px solid #5a5a5a;
				position: relative;

				.dz-filename {
					width: 60%;
					overflow: hidden;
					float: left;
					position: relative;
				}

				.dz-size {
					width: 10%;
					overflow: hidden;
					float: right;
					text-align: right;
				}

				.dz-progress {
					width: 12%;
					overflow: hidden;
					float: right;
					min-height: 8px;
					margin: 3px 10px 0 5px;
					position: relative;
					-webkit-border-radius: 4px;
					-moz-border-radius: 4px;
					border-radius: 4px;
					background-color: #eaeaea;

					.dz-upload {
						position: absolute;
						top: 0;
						left: 0;
						width: 0;
						background-color: #51acd0;
					}
				}

				.dz-error-message {
					position: absolute;
					top: 10px;
					right: 100px;
					background-color: red;
					padding: 0 8px;
				}

				.dz-result {
					width: 5%;
					float: right;
					margin-left: 10px;
				}

				&.dz-success {
					.dz-result {
						background-image: url('/img/success.png');
						background-repeat: no-repeat;
						background-size: contain;
					}
				}

				&.dz-error {
					.dz-result {
						background-image: url('/img/error.png');
						background-repeat: no-repeat;
						background-size: contain;
					}
				}
			}
		}
	}

	&#download {
		#files-list {
			font-size: 1rem;
			margin-bottom: 40px;
		}

		.bundle-info {
			font-size: 1rem;
		}

		.expiry-warning {
			font-size: .8rem;
			font-style: italic;
			margin-top: 30px;
		}

		.download-all-btn {
			margin: 0 auto;
			width: 60%;
			text-align: center;
			font-size: 1.4rem;
			background-color: #3a5142;
			padding: 10px 5px;
			box-shadow: inset 0px 1px 0px 0px #cae3fc;

			&a, &a:visited {
				color: #FFF;
			}

		}
	}
}