#content {
	border: 1px dashed #fff;
	border-radius: 8px;
	.transition(border-color 0.2s ease-in-out);

	&.hint {
		border-color: #ddd;
	}
	&.match {
		border-color: #aaa;
	}
}


#uploads {
	width: 450px;
	margin: 12px auto;
	padding: 0;
	list-style: none;

	.upload {
		color: #555;
		font-size: 0.9em;

		.name {
			display: inline-block;
			white-space: nowrap;
			overflow: hidden;

			&:before {
				display: inline-block;
				content: '•';
				color: #55c;
				width: 1em;
				text-align: center;
				padding-right: 1em;
			}
		}

		.size {
			display: none;
			float: right;
			white-space: nowrap;

			&:after {
				content: ' bytes'
			}
		}

		.error {
			float: right;
			white-space: nowrap;
			color: #c55;
		}

		.finished {
			float: right;
			white-space: nowrap;
			color: #008200;
		}

		.progress {
			display: inline-block;
			margin: 4px 8px;

			width: 84px;
			height: 8px;
			background-color: #ddd;
			overflow: hidden;
			float: right;

			.bar {
				width: 0%;
				height: 100%;
				background-color: #999;
			}
		}

		&.finished .name:before {
			content: '✔';
			color: #008200;
		}
		&.error .name:before {
			content: '✖';
			color: #c55;
		}
	}
}