@charset "UTF-8";

/* CSS Inspired by @csswizardry http://csswizardry.com/2011/03/coding-up-a-semantic-lean-timeline/ */
.b1njTimeline {
    background-image : url(../img/dotte_gray.png);
     background-repeat: repeat-y;
     background-position: 85px 0px;
    width : 100%;
    padding:50px 0 10px 0;
    margin :0 auto 10px auto;
    position: relative;
    color: #323232;
}
    .b1njTimelineEvents,
    .b1njTimelineDates {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .b1njTimeline * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .b1njTimelineEvents:before, /* The dot */
    .b1njTimelineEvents:after { /* The arrow */
    }
    .b1njTimelineEvents:after {
        margin-left: -7px;
        background: none;
        border: 7px solid transparent;
        border-top-color: #1042A4;
        width: 0;
        height: 0;
        top: auto;
        bottom: -7px;
        -webkit-border-radius:0;
        -moz-border-radius:0;
        border-radius:0;
    }
    .b1njTimelineEvent {
        position: absolute;
        width: 160px;
        margin: 0 0 10px 0;
        top: 0;
        text-align:right;
    }
        
@media screen and (max-width: 1024px) {
        .b1njTimelineEvent {
        width: calc(100% - 100px);
        }
}        

        .b1njTimelineEventContents {
            position: absolute;
            width: 100%;
            padding: 5px;
            background: #fff;
            border: 1px solid #1042A4;
            top: center;
            margin: -1.5em 0 0 0;
            border-radius: 5px;
            cursor: pointer;
            z-index:70;

        }
        .b1njTimelineEventContents:hover {
            z-index: 98;
            border-width: 2px;
        }
        .b1njTimelineEventContents.open {
            z-index: 90;
            border: 1px solid #1042A4;
        }
        .b1njTimelineEventContents.open:hover {
            z-index: 98;
            border-width: 2px;
        }
        .b1njTimelineEvent time {
        }
        .b1njTimelineEvent p {
            margin: 0;
            padding: 0;
        }
        .b1njTimelineEvent:before,
        .b1njTimelineEvent:after {
            content: " ";
            width: 20px;
            height: 1px;
            background: #1042A4;
            position: absolute;
            top: 0;
            display: none;
        }
        .b1njTimelineEvent { 
            text-align: left;
            left: 95px;
        }
        .b1njTimelineEvent:before { /* Move branches */
        }
        .b1njTimelineEvent:after { /* Move branches */
            display: block;
            background-color: #1042A4;
            left: -10px;
        }
        .b1njTimelineEvent.timelineNoDate p {
            color: #1042A4;
            font-weight:600;
        }
        .b1njTimelineEvent.timelineNoDate p:hover {
            text-decoration:underline;
        }
        .b1njTimelineEvent.timelineNoDate:after { /* Move branches */
            display: none;
        }
        .b1njTimelineEvent .description {
            height: 0;
            overflow: hidden;
            text-align: left;
        }
        .b1njTimelineEvent .description:before {
            content: '+';
            display: block;
            width: 1em;
            height: 1em;
            position: absolute;
            top: 0em;
        }
        .b1njTimelineEvent .description:before {
            right: 0;
        }
            .b1njTimelineEventContents.open .description {
                margin-top: 10px;
                height: auto;
                -moz-transition: 1s ease;
            }
            .b1njTimelineEventContents.open .description:before {
                content: '-';
            }
    .b1njTimelineDates li {
        display: block;
        position: absolute;
        width: 80px;
		left: 0px;
        top: 0px;
        margin-left: 10px;
        text-align:right;
    }
        .b1njTimelineDates li div {
            position: absolute;
            margin-top: -.6em;
            text-align:right;
            width: 70px;
            z-index:50;
        }
        .b1njTimelineDates li:after {
            content: " ";
            width: 5px;
            height: 1px;
            background: #1042A4;
            position: absolute;
            top: 0;
            left: 100%;
            margin-left: -10px;
        }

.timelineScaleControl {
	position: fixed;
	bottom: 100px;
	left: 25px;
	display: none;
	width: auto;
	text-align:center;
	z-index: 99;
}
.timelineScaleControl.active {
	display: inline-block;;
}


@media screen and (max-width: 1024px) {
	.timelineScaleControl {
		position: fixed;
		bottom: calc(50px + ((60px - 32px) / 2));
		left: 20px;
		display: none;
		width: auto;
		text-align:center;
		z-index: 99;
	}
	.timelineScaleControl.active {
		display: inline-block;;
	}
}

.timelineScaleControl button {
	opacity: 0.8;
}
.timelineScaleControl button:hover {
	opacity: 1.0;
}

.timelineScaleControl button:active {
}
.timelineScaleControl button img {
}
.timelineScaleControl button img:active {
}

.timelineScaleDownBtn {
	margin-left:12px;
}

#timelineDummyControl {
	position: fixed;
	top: 1px;
	left: 1px;
	width: 1px;
	height: 1px;
}
#timelineDummyBtn {
	outline-width: 0;
}

.timeline_description {
	height: 0;
	overflow: hidden;
}

.timeline_description::before {
	content: '';
	background-image: url(../img/svg/arrow_bottom_blue.svg);
	background-repeat: no-repeat;
	background-size: 16px auto;
	color:#1042A4;
	display: block;
	width: 16px;
	height: 16px;
	position: absolute;
	bottom: 1px;
	right: 1px;
	transform: translateY(2px) translateX(-2px);
}

.timeline_description.timelineContent_opened {
	height: auto;
}
.timeline_description.timelineContent_opened::before {
	background-image: url(../img/svg/arrow_top_blue.svg);
	background-repeat: no-repeat;
	display: block;
	width: 16px;
	height: 16px;
	position: absolute;
	top: auto;
	bottom: 1px;
	right: 1px;
}

.timeline_subContent {
	border-top:solid 1px #D7D7D7;
	margin-top:3px;
}

.timeline_topContnt:hover
,.timeline_subContent:hover {
}

.timelineTooltip{
	border:solid 1px #D7D7D7;
	background-color:#F5F6F8;
	min-width: 100px;
	max-width: 30%;
	z-index: 100;
}

@media screen and (max-width: 1024px) {
	.timelineTooltip{
		min-width: 100px;
		max-width: 50%;
	}
}

.ui-helper-hidden-accessible {
	display: none;
}