#timeline { display: flex; }
#timeline #timelineContainer hr { position: absolute; width: 100%; height: 2px; background-color: black; opacity: 0.2; }
#timeline #timelineContainer { display: flex; width: 20%; min-width: 150px; }
#timeline #timelineContainer .cat { position: relative; width:100%; margin-right:8px; border-radius: 2px; background-color:var(--b_low); }
#timeline #timelineContainer .item { position: absolute; width: 100%;  box-sizing: border-box; border-radius: 2px; }
#timeline #timelineContainer #years { width:80px; display: flex; position: relative; flex-direction: column; align-items: flex-end; margin-right: 8px; border-right: 2px solid var(--b_med); }
#timeline #timelineContainer #years .label { position: relative; text-align: right; box-sizing: border-box; padding: 4px; border-top: 2px solid var(--b_med); }
#timeline #timelineContainer #years .lastLabel { position: absolute; bottom: 0; padding: 4px; box-sizing: border-box; border-bottom: 2px solid var(--b_med); }
#timeline #timelineContainer #years .segment { position:absolute; width: 16px; height: 2px; right: 0; border-top: 2px solid var(--b_low); z-index: -1; }
#timeline #databox { position: fixed; width: 100%; display: flex; transition: opacity 100ms ease-in-out; }
#timeline #databox #scrubber { width: 22%; min-width: 108px; margin-left: 42px; border-top: 4px solid var(--background); box-sizing: border-box; z-index: 50; }
#timeline #databox #data { width: 100%; margin-right: 32px; margin-top: 4px; padding: 16px 16px 0px 16px; background-color: var(--b_low); border-radius: 2px; box-sizing: border-box; }