/* timeline.html */
	
	#textHolder {
		margin-bottom:	10px;
	}
	
	#dragDropHolder {
		overflow:		auto;
		margin-bottom:	10px;
	}
	
	#dragDropHolder .label {
		cursor:		pointer;
		padding:	5px;
	}
	
	#dragDropHolder .label.focus {
		border:		2px solid yellow;
	}
	
	#dragDropHolder .label.selected {
		border:		2px solid green;
	}
	
	#dragDropHolder .tick {
		position:	absolute;
		top:		1em;
		right:		0.5em;
	}
	
	#labelHolder {
		padding:		0px;
		margin-bottom:	10px;
		margin-right:	2%;
		float:			right;
	}
	
	#targetHolder {
		clear:		right;
	}
	
	#targetHolder .target {
		padding:		1%;
		margin-top:		10px;
		margin-bottom:	10px;
		float:			left;
		background-position:	center center;
		background-repeat:		no-repeat;
	}
	
	#targetHolder .target.bg {
		background-color:	rgb(220, 220, 220); /* fallback */
		background-color:	rgba(0, 0, 0, 0.1);
	}
	
	#targetHolder .target.focus {
		background-color:	rgb(205, 205, 205); /* fallback - can't use an image instead as the arrow's already the bg on these divs */ 
		background-color:	rgba(0, 0, 0, 0.2);
	}
	
	#targetHolder h3 {
		text-align:		center;
	}
	
	#button {
		clear:			left;
		margin-bottom:	10px;
		float:			right;
	}
	
	#feedback {
		clear:		left;
	}