@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');

/* CSS Transition */
.jqTimespaceAnimated {
	transition: all 1.2s cubic-bezier(0.29, 0.575, 0.465, 1);
}

/* Error Display */
.jqTimespaceError {
	padding: 1rem;
	text-align: center;
	color: #ff1f1f;
	background: #282c34;
}

/* Containers */
.jqTimepsaceContainer,
.jqTimepsaceContainer .jqTimespaceDataContainer {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
	color: #ffffff;
	font-family: 'Nanum Gothic', sans-serif;
}
	.jqTimepsaceContainer .jqTimespaceDataContainer {
		box-shadow: 0 6px 5px -5px #000000;
		border: 1px solid #5f5f5f;
		background: #282c34 url('../images/timespace.line.dark.png') bottom 0 left 0 repeat-x;
		-moz-user-select: none;
		user-select: none;
	}

/* Navigation and Line Guide */
.jqTimepsaceContainer .jqTimespaceLeft,
.jqTimepsaceContainer .jqTimespaceRight {
	z-index: 2;
	position: absolute;
	bottom: 30%;
	margin: 0;
	border: 1px solid #4c525f;
	padding: 0.1rem 0.5rem;
	color: #a0a9bd;
	font-size: 1.6rem;
	line-height: 2rem;
	text-align: center;
	cursor: pointer;
	background: #323944;
	opacity: 0.7;
	transition: background 0.4s ease-in, opacity 0.4s ease-in;
}
	.jqTimepsaceContainer .jqTimespaceLeft {
		left: 0;
	}
	.jqTimepsaceContainer .jqTimespaceRight {
		right: 0;
	}
	.jqTimepsaceContainer .jqTimespaceLeft:hover,
	.jqTimepsaceContainer .jqTimespaceRight:hover {
		background: #555a64;
		opacity: 1;
	}
	.jqTimepsaceContainer .jqTimespaceLine {
		z-index: 2;
		position: absolute;
		box-sizing: border-box;
		top: 0;
		left: 50%;
		margin: 0;
		padding: 0;
		width: 3px;
		height: 100%;
		background: linear-gradient(to top, #ffffff 0%,#cacaca 20%,#474747 100%);
		opacity: 0.1;
		cursor: move;
	}
	
/* Timeline */
.jqTimepsaceContainer aside {
	position: relative;
	table-layout: fixed;
	left: 0;
	margin: 0;
	padding: 0;
	line-break: strict;
	cursor: move;
}
	.jqTimepsaceContainer header {
		z-index: 3;
		position: relative;
		background: #282c34;
	}
	.jqTimepsaceContainer .jqTimespaceTitleClamp {
		z-index: 4;
		display: block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		opacity: 0;
	}
	.jqTimepsaceContainer header > div {
		display: flex;
		position: relative;
		box-sizing: border-box;
		margin: 0;
		border-bottom: 1px solid #4e515c;
		text-align: center;
	}
	.jqTimepsaceContainer header > div:last-child {
		border-bottom: 1px solid #4e515c;
		text-align: left;
	}
	.jqTimepsaceContainer header h1,
	.jqTimepsaceContainer header time,
	.jqTimepsaceContainer header .jqTimespaceDummySpan {
		display: block;
		box-sizing: border-box;
		margin: 0;
		padding: 0.5rem 0;
	}
	.jqTimepsaceContainer header time {
		padding: 0.2rem 0;
	}
	.jqTimepsaceContainer header h1 {
		font-size: 1.2rem;
	}
	.jqTimepsaceContainer header h1:not(:first-child),
	.jqTimepsaceContainer header .jqTimespaceDummySpan:not(:first-child) {
		border-left: 1px solid #4e515c;
	}
	.jqTimepsaceContainer header .jqTimespaceDummySpan {
		background: #22252c;
		opacity: 0.4;
	}
	.jqTimepsaceContainer header time:not(:first-child) {
		border-left: 1px dashed #4e515c;
	}
	.jqTimepsaceContainer aside section {
		z-index: 1;
		display: flex;
		position: relative;
		min-height: 100%;
	}
	.jqTimepsaceContainer aside .jqTimespaceColumn {
		box-sizing: border-box;
	}
	.jqTimepsaceContainer aside .jqTimespaceColumn:not(:first-child) {
		border-left: 1px dashed #575757;
	}
	
/* Event Boxes */
.jqTimepsaceContainer .jqTimespaceEvent {
	position: relative;
	box-sizing: border-box;
	margin: 0;
	padding: 1rem 0 0 0;
	text-align: left;
}
	.jqTimepsaceContainer .jqTimespaceEvent:last-of-type {
		margin-bottom: 20px;
	}
	.jqTimepsaceContainer .jqTimespaceEventRev {
		text-align: right;
	}
	.jqTimespaceEvent .jqTimespaceEventBorder {
		position: absolute;
		top: 0;
		width: 1px;
		height: 100%;
		border-left: 1px dashed #777777;
	}
	.jqTimespaceEventRev .jqTimespaceEventBorder {
		right: 0;
		border-left: none;
		border-right: 1px dashed #777777;
	}
	.jqTimespaceEvent p:hover + .jqTimespaceEventBorder {
		border-left: 1px dashed #bebebe;
	}
	.jqTimespaceEventRev p:hover + .jqTimespaceEventBorder {
		border-left: none;
		border-right: 1px dashed #bebebe;
	}
	.jqTimespaceEvent p {
		box-shadow: 3px 6px 5px -5px #000000;
		overflow: hidden;
		margin: 0;
		border: 1px solid #818181;
		border-radius: 0 0.6rem 0.6rem 0;
		padding: 0.3rem 0.5rem;
		line-height: 1.6rem;
		font-size: 1rem;
		white-space: nowrap;
		cursor: pointer;
		transition: all 0.3s ease-in;
		background: #282c34;
	}
	.jqTimespaceEventRev p {
		border-radius: 0.6rem 0 0 0.6rem;
	}
	.jqTimespaceEvent p:hover,
	.jqTimespaceEvent .jqTimespaceEventSelected {
		box-shadow: 3px 8px 10px -10px #000000;
		background: #494e58;
	}
	.jqTimespaceNoDisplay p {
		box-shadow: none;
		cursor: move;
		background: #32373f;
		opacity: 0.7;
	}
	.jqTimespaceNoDisplay p:hover {
		box-shadow: none;
		background: #32373f;
		transform: none;
	}
	.jqTimespaceNoDisplay .jqTimespaceEventBorder {
		border: none;
	}
	.jqTimespaceNoDisplay p:hover + .jqTimespaceEventBorder {
		border: none;
	}
	
/* Display Box */
.jqTimespaceDisplay {
	box-sizing: border-box;
	box-shadow: 0 6px 5px -5px #000000;
	margin: 1rem auto;
	border: 1px solid #5f5f5f;
	padding: 1.5rem;
	background: #282c34;
}
	.jqTimespaceDisplay h1 {
		margin: 0;
		padding: 0.5rem;
		text-align: left;
	}
	.jqTimespaceDisplay .jqTimespaceDisplayTime {
		display: flex;
		position: relative;
		align-items: center;
	}
	.jqTimespaceDisplay .jqTimespaceDisplayLeft,
	.jqTimespaceDisplay .jqTimespaceDisplayRight {
		width: 0.9rem;
		height: 1.3rem;
		background: #616a7e;
		cursor: pointer;
	}
	.jqTimespaceDisplay .jqTimespaceDisplayLeft {
		margin-left: 0.5rem;
		clip-path: polygon(100% 0, 100% 100%, 0% 50%);
	}
	.jqTimespaceDisplay .jqTimespaceDisplayRight {
		margin-left: 1.2rem;
		clip-path: polygon(0 0%, 0 100%, 100% 50%);
	}
	.jqTimespaceDisplay .jqTimespaceDisplayLeft:hover,
	.jqTimespaceDisplay .jqTimespaceDisplayRight:hover {
		background: #98a5c2;
	}
	.jqTimespaceDisplay .jqTimespaceTimeframe {
		display: inline-block;
		margin: 0.2rem 0 0.2rem 1.2rem;
		padding: 0 0.4rem;
		border-left: 1px solid #cccccc;
		border-right: 1px solid #cccccc;
		color: #bd4c3d;
	}
	.jqTimespaceDisplay section {
		margin: 0;
		padding: 0.8rem 0.5rem 0.5rem 0.5rem;
		max-width: 70%;
	}
	@media (max-width: 50em) {
		.jqTimespaceDisplay section {
			max-width: 100%
		}
	}