body {font-family: Arial, Helvetica, sans-serif;font-size: 14px;}
a {text-decoration: none;color: #570008;}

.timeline-container {position: relative;}
.timeline-container::after {content: '';display: table;clear: both;}
.timeline {width: 100%; }
.timeline-list {position: relative;width: 100%;overflow: hidden;margin: 0;padding: 0;}
.timeline-list-wrap {position: relative;top: 0;left: 0;display: block;transform: translate3d(0, 0, 0);transition: transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);}
.timeline-item {float: left;width: 830px;height: 400px; border: 1px solid #ddd;box-sizing: border-box;}
.timeline-dots-wrap {position: absolute;overflow: hidden;}
.timeline-horizontal .timeline-dots-wrap {width: 100%;height: 35px;}
.timeline-vertical .timeline-dots-wrap {width: 65px;height: 100%;top: 0;}
.timeline-dots-wrap.bottom {bottom: -50px;}
.timeline-dots-wrap.top {top: -50px;}
.timeline-dots-wrap.left {left: -65px;}
.timeline-dots-wrap.right {right: -70px;}
.timeline-dots {margin: 0;padding: 0;position: relative;width: 100%;height: 100%;transition: transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);}
.timeline-horizontal .timeline-dots {background: url("../tpl_images/tpl_img05.jpg") bottom repeat-x;}
.timeline-vertical .timeline-dots {background: url("../tpl_images/tpl_img05.jpg") left repeat-y;}
.timeline-dots li {transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);list-style: none;overflow: hidden;}
.timeline-horizontal .timeline-dots li {float: left;width: 50px;text-align: center;}
.timeline-vertical .timeline-dots li {width: 100%;}
.timeline-dots li.slide-active button {color: #570008;font-size: 15px;}
.timeline-dots button {cursor: pointer;border: none;outline: none;color: #333;font-size: 12px;transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);}
.timeline-horizontal .timeline-dots button {background: url("../tpl_images/tpl_img05.jpg") bottom no-repeat;padding-bottom: 15px;}
.timeline-vertical .timeline-dots button {background: url("../tpl_images/tpl_img05.jpg") left no-repeat;padding-left: 15px;}


/*meine timeline*/
.timeline-container {width: 830px;margin: 0 auto;}
.timeline-list {width: 830px;}
.timeline-item {width: 830px;height: 400px;padding: 10px;border: 1px solid #ddd; }
.timeline-theme-1 {width: 830px;margin: 100px auto;}
.timeline-1 .timeline-list {width: 830px;height: 400px;}
.timeline-1 .timeline-item {width: 830px;height: 400px;background: #ddd;border: none;}

.timeline-visual {float: left;width: 43%;margin-right: 3%;line-height: 1;height: 100%;overflow-y: auto;}
.timeline-visual img {max-width: 96%;}
.timeline-detail {float: left;width: 53%;height: 100%;overflow-x: no-display;overflow-y: auto;}
.timeline-text {float: left;width: 100%;height: 100%;overflow-y: auto;}

.timeline-detail-list {margin: 10px;padding: 10px;}
.timeline-detail-list li {margin-bottom: 0.4rem;}


/*meine tooltip*/
info-zeitung {width: 90%;margin: 0 auto;}
.tooltip {position: relative;}
.tooltip span[rel=tooltip] {display: none;}
.tooltip:hover span[rel=tooltip] {display: block;position: static;bottom: -18em;	left: 1em;width: 18em;padding: 0.5em;z-index: 100;border: solid 1px #54040D;border-radius: 0.8em;}
[data-tooltip]:hover::after {opacity: 1;}




/* meine Infotext */
info-text {width: 96%;margin: 0 auto;}
.tooltext {position: relative;}
.tooltext span[rel=tooltext] {display: none;}
.tooltext:hover span[rel=tooltext] {display: block;position: static;bottom: -18em;left: 1em;width: 27em;z-index: 100;}
[data-tooltext]:hover::after {opacity: 1;}

.verbergen {text-align: right;color: #570008;}
.verbergen:hover {text-indent: 100%;white-space: nowrap;overflow: hidden;}

/*
meine infotext-Variante
.verbergen {text-align: center;font-style:italic;color: #570008;}
und aufruf:
sichtbarer Text <info-text><div class="tooltext"><div class="verbergen">weiterlesen <img src="tpl_images/tpl_weiter.jpg"></div><span rel="tooltext">verborgener Text</span></div></info-text>
*/