.timeline {
	color: white;
	font-size: 0.677em;
	background: 
    	url("../assets/timeline-back.png") center center repeat-x,
    	url("../assets/timeline-back-arrow.png") center left no-repeat,
    	url("../assets/timeline-back-end.png") center right no-repeat;
	margin: 2em 0 2em 0;
	display: inline-block;
}

.timeline-study {
	width: 13.5em;
	display: inline-block;
	padding: 0.5em 0 0.5em 0.5em;
	background-color: #272c31;
	color: #e0e0e0;
	cursor: pointer;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 8px;
}

.timeline-study.nearline {
	background-color: #000000;
}

.timeline-study.offline {
	background-color: #AA5555;
}

.timeline-study.timeline-opened-study {
    background-color: #20a8d8;
    color: #FFFFFF;
    border: 2px solid #2f353a;
    font-style: italic;
}

.timeline-study.timeline-study-of-other-session {
    color: #FFFFFF;
    border: 2px solid #20a8d8bf;
    border-style: dashed;
}

.timeline-study.timeline-study-of-other-session:hover {
    border-style: solid;
}

.timeline-study.timeline-prev-study {
    background-color: #20a8d8;
    color: #FFFFFF;
    border: 1px solid #2f353a;
    font-style: italic;
}

.timeline-study-panel:hover {
    color: #ffffff;
}

.timeline-year {
	width: 2em;
	display: inline-block;
	font-size: 0.9em;
	color: #FFFFFF;
	margin-left: 0.4em;
	font-style: italic;
}

@media (min-width: 2000px) and (min-height: 2000px) {
}