.CarouselWidgetCTNR {
	width: 100%;
	height: 100%;
	display: block;
	float: left;
}

li.TimelineItem,
li.CarouselItem {
	border: solid 1px #888;
	/* height: calc(100% - 3px); */
	height: 95px;
	overflow: hidden;
	width: 100px;
	display: inline-block;
	list-style-type: none;
	position: relative;
	background: #333;

	/* fix weird IE11 behaviour not respecting width */
	min-width: 100px;
	flex-shrink: 0;
}

.TimelineItem > .image,
.CarouselItem > .image {
	width: 100%;
	height: 100%;

	/* Provide a no-preview image */
	background-image: url('../images/no_preview.png');
	background-size: contain;
}
.TimelineItem > .image canvas,
.CarouselItem > .image canvas {
	width: 100%;
	height: 100%;
}
.CarouselItem > .itemName {
	display: inline-block;
	color: aliceblue;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 98%;
	height: auto;
	max-height: 37%;
	overflow: hidden;
	background: rgba(20,20,20,0.6);
	padding: 2px;
	text-overflow: ellipsis;
}

.TimelineItem > .deleteBtn,
.CarouselItem > .deleteBtn {
	display: inline-block;
	bottom: 100%;
	position: absolute;
	right: -1px;
	top: 0;
	background: rgba(20,20,20,0.6);
	height: 1.3em;
	width: 1.3em;
	text-align: center;
	color: red;
	cursor: pointer;
}
.TimelineItem > .deleteBtn:hover,
.CarouselItem > .deleteBtn:hover {
	background: white;
}

ul#timelineUI,
.CarouselWidgetCTNR ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: auto;
	height: 100%;
	min-width: 100%;
	max-height: 100%;
	display: inline-flex;
}

#timelineUI > li,
.CarouselWidgetCTNR ul > li {
	margin-right: -1px;
}

#TimelineWidgetCTNR_inner,
.CarouselWidgetCTNR_inner {
	overflow: hidden;
	height: 100%;
	padding: 0;
}

/* nav arrows */
#TimelineWidgetCTNR_inner::before,
#TimelineWidgetCTNR_inner::after,
.CarouselWidgetCTNR_inner::before,
.CarouselWidgetCTNR_inner::after {
	display: block;
	height: 100%;
	width: auto;
	background: rgba(25,25,25,0.7);
	position: absolute;
	z-index: 4;
	word-wrap: break-word;
	font-size: 100px;
	line-height: 86px;
	transform: scale(.4,1);
	margin: 0;
	padding: 0 8px;
	opacity: 0.3;
	/* transition: cubic-bezier(1,0,0,1) 0.2s; */
	cursor: pointer;
}

#TimelineWidgetCTNR_inner::before,
.CarouselWidgetCTNR_inner::before {
	content: '\276E';
	left: 0;
	/* left: -20px; */
	top: 0;
}
#TimelineWidgetCTNR_inner::after,
.CarouselWidgetCTNR_inner::after {
	content: '\276F';
	right: -20px;
	top: 0;
}
#TimelineWidgetCTNR_inner:hover::before,
#TimelineWidgetCTNR_inner:hover::after,
.CarouselWidgetCTNR_inner:hover::before,
.CarouselWidgetCTNR_inner:hover::after {
	opacity: 1;
}

#timelineUI .spaceScroller,
.CarouselWidgetCTNR ul .spaceScroller {
	width: 1px;
	background: none;
	display: inline-block;
	/* transition: .4s; */
}

.TimelineItem.highlight,
.CarouselItem.highlight {
	border-color: deepskyblue;
	z-index: 2;
}
.TimelineItem.highlight > .highlight,
.CarouselItem.highlight > .highlight {
	display: block;
	background: cyan;
	height: 100%;
	width: 100%;
	opacity: .4;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

/* CSS3 placeholder */
#timelineUI:empty:after,
.CarouselWidgetCTNR ul:empty:after {
	margin: 40px;
	content: attr(placeholder);
	font-size: 14px;
	color: #999;
	text-align: center;
	width: 100%;
	text-transform: none;
}