/*
# Author:	Ben Lanegan and Kay Lanegan
# Date:	2020-04-24
*/

	* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
}
.under_maintance {
  width: max-content;
  margin: 0 auto;
  display: block;
}

#dashboard {
	margin: 0 0 0 4px;
  gap: 20px 50px;
}
#dashboard.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
}

#dashboard.inline{
  display: flex;
  gap: 20px 10px;
}

#dashboard.stack{
  display: grid;
}

#dashboard.dual_stack{
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: .5em !important;
}

.module {
	background-color:#c4c4c4;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 5px;
  transition: transform 0.2s ease-in-out;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/*@media (prefers-reduced-motion: no-preference) {*/
  .module-animation {
    animation: wipe-enter 1s 1;
  }
	/*}*/
	
@keyframes wipe-enter {
  0% {
    transform:scale(0,.025);
  }
  50% {
    transform:scale(1,.025);
    background:orange;
  }
}

.module:hover {
  transform: translateY(-5px);
}

.module .module-header{
}
.module h2 {
  margin-bottom: 10px;
  color: #333;
}
.module .content{
	overflow-x: auto;
	scrollbar-width: thin;
}
.module p,
.module li {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 8px;
}
.module-header{
	position:relative;
}
.resizeButtons{
	position: absolute;
	top: -1.5em;
	right: 0px;
}
.resizeButtons button{
	position: relative;
	top: 0px;
	right: 0px;
	display: inline;
	color: #00f;
	background-color: #c4c4c4;
	border: none;
	transform: rotate(180deg);
}
.resizeButtons button:hover {
  border: 2px solid #0000ff;
}
.s-s {
	min-width:320px;
	max-width:320px;
	min-height:160px;
	max-height:160px;
}
.s-m {
	min-width:320px;
	max-width:320px;
	min-height:320px;
	max-height:320px;
}
.s-l {
	min-width:320px;
	max-width:320px;
	min-height:640px;
	max-height:640px;
}
.s-f {
	width:95%;
	min-height:640px;
}

.module.dragging {
  opacity: 0.5;
  border: 2px dashed #007bff;
}

.module-placeholder {
  height: 160px; /* Same as your medium module height */
  background: #e0e0e0;
  border: 2px dashed #999;
  margin-bottom: 20px;
}

	@media all and (max-width:680px) {
		.module {padding:2px;}
		.module-header button{
			top: 0px;
			right: 0px;
		}
		.resizeButtons button{
			
		}
	}

	@media only screen and (min-width:300px) {
		
	}
	@media all and (-ms-high-contrast:none), (-ms-high-contrast:active), @supports (-ms-accelerator:true) or (-ms-ime-align:auto) {
	ul li a dl dd div.commentArea {
		display:block !important;
		visibility:visible !important;
		position:relative;
		z-index:5;
	}
}
	div.tooltipPanel {display:flex; gap:40px; margin: 0 auto; width: 44%;}
	div.tooltipPanel span{align-content: center;}
	div.tooltipsidePanel {display:flex; gap:20px; margin: 0 auto; width: 44%;}
div.infoSideBar {
	position:fixed;
}
ul.logo {
	width: 75px;
  height: 75px;
  background: #444;
  padding: 0;
  position: fixed;
  top: 7px;
  left: 7px;
  z-index: 3;  margin: 0px;  overflow: hidden;  list-style: inherit; box-sizing: border-box;
	}
ul.logo li {margin:2px !important;  float: left; list-style: none;  padding: 0;  box-sizing: border-box;}
ul.logo li:nth-child(2n) a {
	-o-transform: rotate(-1deg);
  -webkit-transform: rotate(-1deg);
  -moz-transform: rotate(-1deg);
}
ul.logo li:nth-child(2n) a { background:#Ed8dad; -o-transform: rotate(4deg);
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);}
  ul.logo li:nth-child(3n) a {background: #ccf;
  background: #ccf;-o-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  }
ul.logo li a {
	position: relative;
	height:20%;
	width:100%;
	margin:0 !important;
	padding:3px !important;
	min-width:0 !important;
	min-height:0 !important;
	position:relative;
	top:7px !important;
	line-height:100%;
	text-align:center;
  text-decoration: none;
  color: #000;
  background: #ffc;
  display: block;
  max-height: 100%;
  max-width: 20em;
    box-shadow: 5px 5px 7px rgba(33,33,33,.7);
	-moz-transition: -moz-transform .15s linear;
  -o-transition: -o-transform .15s linear;
  -webkit-transition: -webkit-transform .15s linear;
    box-sizing: border-box;
	}

div.infoSideBar form.loginPod {
	width:75px;
	/*height:77px;*/
	background:#444;
	padding:0;
	position:fixed;
	top:80px;
	left:7px;
	z-index:3;
	margin:0px !important;
	background:#444;
	padding:0px !important;
	display:inline;
	overflow-x:scroll;
	}
div.infoSideBar form.loginPod label.LoginEmail, div.loginPod form input.LoginEmail{
	position: fixed;
	top: 80px;
	left: 7px;
	z-index:3;
	display: contents;
	color: #fff;
}
div.infoSideBar form.loginPod input[type="submit"] {
	/*position:fixed;*/
	/*top:120px;*/
	left: 7px;
	z-index:3;
	width:70px;
	height:40px;
	white-space:normal;
	float:left;
	text-align:left;
}

div.dimmedScreen {
	position:fixed;
	padding:0;
	margin:0;
	top:0;
	left:0;
	z-index:100;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.3);
}
	
div.aboutPage {
	margin:0px 70px;
}
	
div.aboutPage p {
	font-size:1.5em;
}

ul li div {
	position:relative;
}
	
 .Oldfacebook-icon {
	text-indent:-999em;
	width:1px !important;
	height:1px !important;
	box-sizing:content-box;
	border-radius:5px;
	overflow:hidden;
	min-width:0 !important;
	min-height:0 !important;
 }
 .Oldfacebook-icon:before {
	content:"/20";
	position:absolute;
	background:red;
	width:4px;
	height:25px;
	bottom:-10px;
	right:-6px;
	border:6px solid #eee;
	border-radius:25px;
	box-sizing:content-box;
 }
 .Oldfacebook-icon:after {
	content:"/20";
	position:absolute;
	width:13px;
	top:20px;
	height:6px;
	background:#eee;
	right:0px;
	box-sizing:content-box;
 }
	
* {
	margin:0;
	padding:0;
}
body {
	font-family:Georgia,Helvetica,arial,sans-serif;
	font-size:1em;
	margin:1em;
	background:#666;
	color:#444;
}
h1, h5 {
	position:sticky; 
	background:#ccc;
	text-align:center;
	text-transform:uppercase;
	font-weight:bold;
	width:calc(95% - 77px);
	left:3%;
	right:3%;
	top:-9px;
	z-index:2;
	padding:17px;
}
h2, dt {
	font-size:2em;
	font-weight:bold;
	text-transform:capitalize;
}
h5 {
	font-size:1em;
	font-weight:normal;
	text-transform: initial;
	color: purple;
}
p {
	font-size:1em;
	font-weight:normal;
}
/*div.timeline-box ul, div.timeline-box li {list-style:none;}*/
div.timeline-box ul li.exhibitCode {
	list-style:inherit;
	margin-left: 15px;
}
div.timeline-box ul li.exhibitCode h5{
	padding: 0px;
	margin: 0px;
}
div.timeline-box ul li a dl dd div ol li {
	float:none;
 list-style:decimal;
 margin:0 2em;
}
div.timeline-box ul {
	overflow:hidden;
	padding:3em;
	/*text-align:center;*/
}
div.timeline-box ul li {
	/*display:inline;padding-right:1em;*/
}
div.timeline-box ul li a {
	text-decoration:none;
	color:#000;
	background:#ffc;
	display:block;
	min-height:4em;
	min-width:150px;
	width:80%;
	max-height:100%;
	max-width:20em;
	padding:1em;
	-moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
	-webkit-box-shadow:5px 5px 7px rgba(33,33,33,.7);
	box-shadow:5px 5px 7px rgba(33,33,33,.7);
	-moz-transition:-moz-transform .15s linear;
	-o-transition:-o-transform .15s linear;
	-webkit-transition:-webkit-transform .15s linear;
}
div.timeline-box ul li a object a {
	text-decoration:underline;
	color:blue;
	background:#fff;
	display:block;
	min-height:100%;
	min-width:100%;
	width:100%;
	max-height:100%;
	max-width:100%;
	padding:0px;
	-moz-box-shadow:0px 0px 0px;
	-webkit-box-shadow:0px 0px 0px;
	box-shadow:0px 0px 0px;
	-moz-transition:-moz-transform 0s linear;
	-o-transition:-o-transform 0s linear;
	-webkit-transition:-webkit-transform 0s linear;
}
div.timeline-box ul li a div fieldset {
	background-color: #ffc;
}
a.postDelete form dl dd input[type="submit"]{
	background-color: #FF0000;
	color:#fff;
}
a.postVerify form dl dd input[type="submit"]{
	background-color: #0E6B0E;
	color:#fff;
}

div.timeline-box ul li a.submission {
	margin:0;
	Width:100%;
}
input.aComment {
	Width:100%;
}
div.commentArea {
	Display:none !important;
	visibility:hidden !important;
}

div.timeline-box ul li a:hover dl dd div.commentArea,
div.timeline-box ul li a:focus dl dd div.commentArea,
div.timeline-box ul li a:focus-within dl dd div.commentArea {
	display:block !important;
	visibility:visible !important;
	position:relative;
	z-index:5;
}

div.timeline-box ul li {
	margin:1em;
	float:left;
}
div.timeline-box ul li h2, ul li dt {
	font-size:2em;
	font-weight:bold;
	padding-bottom:10px;
	word-wrap: break-word;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
    hyphens: auto;
}
div.timeline-box ul li p {
	font-family:Georgia,Helvetica,arial,sans-serif;
}
div.timeline-box ul li pre {
	white-space:pre-wrap;
	white-space:-moz-pre-wrap;
	white-space:-pre-wrap;
	white-space:-o-pre-wrap;
	word-wrap:break-word;
}
div.timeline-box ul li a, ul li div.share-icon {
	-o-transform:rotate(-1deg);
	-webkit-transform:rotate(-1deg);
	-moz-transform:rotate(-1deg);
}
div.timeline-box ul li:nth-child(even) a,
div.timeline-box ul li:nth-child(even) div.share-icon {
	-o-transform:rotate(4deg);
	-webkit-transform:rotate(4deg);
	-moz-transform:rotate(4deg);
}
div.timeline-box ul li:nth-child(even) a {
	position:relative;
	top:5px;
	background:#cfc;
}
div.timeline-box ul li:nth-child(3n) a,
div.timeline-box ul li:nth-child(3n) div.share-icon {
	-o-transform:rotate(-3deg);
	-webkit-transform:rotate(-3deg);
	-moz-transform:rotate(-3deg);
}
div.timeline-box ul li:nth-child(3n) a {
	position:relative;
	top:-5px;
	background:#ccf;
}
div.timeline-box ul li:nth-child(4n) a,
div.timeline-box ul li:nth-child(4n) div.share-icon {
	background:#Ed8abd;/*#ffc;*/
}
div.timeline-box ul li:nth-child(5n) a,
div.timeline-box ul li:nth-child(5n) div.share-icon {
	-o-transform:rotate(2deg);
	-webkit-transform:rotate(2deg);
	-moz-transform:rotate(2deg);
}
div.timeline-box ul li:nth-child(5n) a {
	position:relative;
	top:-10px;
}
div.timeline-box ul li:nth-child(6n) a,
div.timeline-box ul li:nth-child(6n) div.share-icon {
	background:#E58aed;
}
div.timeline-box ul li a:hover,
div.timeline-box ul li a:focus,
div.timeline-box ul li a:focus-within {
	box-shadow:10px 10px 7px rgba(0,0,0,.7);
	-moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
	-webkit-box-shadow:10px 10px 7px rgba(0,0,0,.7);
	-webkit-transform:scale(1.25);
	-moz-transform:scale(1.25);
	-o-transform:scale(1.25);
	position:relative;
	z-index:5;
}
div.timeline-box ul li object a:hover,
div.timeline-box ul li object a:focus,
div.timeline-box ul li object a:focus-within {
	box-shadow:0px 0px 0px rgba(0,0,0,.7);
	-moz-box-shadow:0px 0px 0px rgba(0,0,0,.7);
	-webkit-box-shadow:0px 0px 0px rgba(0,0,0,.7);
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-o-transform:scale(1);
	position:relative;
	z-index:5;
}
/*
ol {text-align:center;}
ol li {display:inline;padding-right:1em;}
ol li a {color:#fff;}*/
input#submit,
input#VerifyDeletePost {
	padding:1em;
	margin:1em;
}
div.leftColumnTest {
	width:30%;
	float:left;
}
div.centerColumn {
	display:block;	
}
div.centerColumn p {
	margin:.5em;
}
dd.stickyNoteIndex {
	position:absolute;
	top:0;
	left:5px;
}

.material{
	width: calc(100% - 30px);
	margin: 0 5% 0 46px;
}
.material h1{
	width:100%;
}
.rel-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.col {
  border: 1px solid #ccc;
  padding: 12px;
  min-width: 320px;
}

.create-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}


table.tableBoard {
	max-width:44em;
	width:100%;
	float: left;
	margin: 0 100px;
}
.tableBoard tbody tr td {
	text-align: center;
}
.tableBoard tbody tr td button{
	width:100%;
}

div.timeline-box ul.questionBoard {
	padding :0px;
	margin: 0 auto;
	display: flex;
	justify-content: flex-end; /* aligns items to the right */
	align-items: center; /* optional: vertical alignment */

}


/* ======================================
   VERTICAL TIMELINE CARDS
   ====================================== */
   
.timeline-wrapper {
    gap: 25px;
    overflow-x: auto;
    padding-top: 20px;
}
.displayVerticalSeperatedTimeline {display: flex; }
.displayVerticalCompactTimeline {display: block;}
.noDisplayVertical {display: none!important;}

.timeline-box, .howTo {
    min-width: 380px;
    max-width: 500px;
    flex: 0 0 auto;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    --tl-color: #333;
}

.howTo ol,
.howTo ul{
	margin-left: 20px;
}
.timeline {
    position: relative;
    margin-left: 35px;
    border-left: 4px solid var(--tl-color);
    padding-left: 20px;
}

.timeline-entry, .timeline-private {
    margin-bottom: 25px;
    padding-left: 10px;
    position: relative;
}
.timeline-entry ol, .timeline-private {
	margin: 1px 0px;
}
.timeline-private {
	background-color: #c4c4c4;
	padding-left: 20px;
}
.timeline-private::before {
    content: "";
    width: 16px;
    height: 16px;
    background: var(--tl-color);
    border-radius: 0%;
    position: absolute;
    left: -32px;
    top: 3px;
}
.timeline-entry::before {
    content: "";
    width: 16px;
    height: 16px;
    background: var(--tl-color);
    border-radius: 50%;
    position: absolute;
    left: -32px;
    top: 3px;
}
.timeline-entry small, .timeline-private small{}
.timeline-entry h3, .timeline-private h3{ margin: 0 0 1px 0; }
.timeline-entry p, .timeline-private { margin: 4px 4px 4px 20px; }

.people, .effected, .indirected { font-style: italic; color: #777; }

.exhibits { margin-top: 4px; font-size: 0.9em; }
.exhibits ol { margin: 0; }
.exhibits a {
    color: var(--tl-color);
    text-decoration: none;
}
.exhibits a:hover { text-decoration: underline; }

/* canvas */
#sceneCanvas {
    border: 2px solid #444;
    background: #fff;
    cursor: crosshair;
}

.tools {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

	
@media all and (max-width:680px) {
	/*.material {margin:0 77px;}*/
	h1 {left:calc(0% + 77px);}
	h5 {
		left:calc(0% + 60px);
		width: calc(95% - 60px);
	}
	h5 {position: relative;}
	table.tableBoard {float:none; margin:0 !important;}
	ul.questionBoard {display:block;}
	
	div.tooltipPanel {display:grid; grid-template-columns: 1fr 1fr; gap:4px; margin: 0 0; width: 100%;}
	div.tooltipPanel span{border: 2px dashed #007bff;}
	div.tooltipsidePanel {display:block; gap:4px; margin: 0 0; width: 100%;}
	.displayVerticalSeperatedTimeline{display:flex;}
	.timeline-box{max-width:500px;}
}

@media only screen and (min-width:300px) {
	h1 {left:calc(0% + 77px);}
	h5 {
		position: relative;
		left:calc(0% + 60px);
		width: calc(95% - 60px);
	}
	div.leftColumnTest {
		width:100%;
	}
	.displayVerticalSeperatedTimeline{display:block;}
	.timeline-box{max-width:325px;}
}
	@media all and (-ms-high-contrast:none), (-ms-high-contrast:active), @supports (-ms-accelerator:true) or (-ms-ime-align:auto) {
	ul li a dl dd div.commentArea {
		display:block !important;
		visibility:visible !important;
		position:relative;
		z-index:5;
	}
}
html { scroll-behavior: smooth; }
body {
    font-family: Arial, sans-serif;
    padding: 20px;
    overflow-x: hidden;
    background: #f5f5f5;
}
h1 { text-align:center; }

/* ======================================
   HORIZONTAL TIMELINE — FIXED GRID SYSTEM
   ====================================== */

/* container that holds all timeline rows */
.timeline-container {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
}

/* each row = one timeline */
.timeline-row {
    display: flex;
    align-items: center;
    position: relative;
    margin: 6px 0;
    height: 40px;
}

/* master wrapper for label column + scroll region */
.timeline-master-wrapper {
    display: grid;
    grid-template-columns: 180px auto;
    width: 100%;
}

/* LEFT COLUMN */
.timeline-label-column {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 10;
    background: #f5f5f5;
    border-right: 2px solid #ddd;
}
.timeline-label-item {
    padding: 8px 10px 3px 10px;
    font-weight: bold;
    background: #f5f5f5;
    height: 35px;
    line-height: 35px;
}

/* MAIN SCROLL AREA */
.timeline-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    padding-bottom: 15px;
    white-space: nowrap;
}

/* the row content: fixed grid */
.horizontal-timeline {
    min-width: 3000px;
    display: flex;
    align-items: center;
    /* gap removed — breaks alignment */
}

/* top row line */
.horizontal-timeline.with-ticks::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    height: 2px;
    background: #bbb;
    z-index: 0;
}

/* ============================
   FIXED GRID TICK CELLS
   ============================ */

.ht-tick {
    width: 20px;
    flex: 0 0 20px; /* FIXED WIDTH — CRITICAL */
    position: relative; /* needed for dot centering */
	width: 20px; /* consistent spacing for each day */
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* top row vertical tick marks */
.top-row .ht-tick::before {
    content: "";
    display: block;
    width: 1px;
    height: 12px;
    background: #333;
    margin: 0 auto;
}

/* label on the 1st of each month */
.tick-label {
    font-size: 0.7em;
    margin-top: 2px;
	/*transform: rotate(-90deg);*/
}

/* non-top rows — no tick lines */
.dot-only .ht-tick::before {
     content: "";
    display: block;
    width: 1px;
    height: 1px;
    background: #333;
    margin: 0 auto;
}

/* ============================
   EVENT DOTS
   ============================ */
.event-dots {
    width: 14px;
    height: 14px;
    z-index: 1;
	display: inline-block;
	font-size: .75em;
  text-align: center;
  color: #fff;
  padding:2px;
}
.event-dots:hover {
	display: contents;
    height: 100%;
	transition-delay: 0.5s; /* wait 0.5s before hover activates */
}
.event-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    z-index: 1;
	display: inline-block;
	font-size: .75em;
  text-align: center;
  color: #fff;
}

.event-dot:hover {
	display: contents;
}
.event-dots .event-dot {
	opacity: 0;          /* invisible */
    width: 0px;
    height: 0px;
    overflow: visible;   /* tooltip can appear */
    pointer-events: auto; /* allow hover + clicks */
}
.event-dot {
	overflow: visible;
    pointer-events: auto;
}
.event-dots:hover .event-dot {
	display: inline-block; 
	opacity: 100!important;          /* invisible */
    width: 18px!important;
    height: 18px!important;
    overflow: visible;   /* tooltip can appear */
    pointer-events: auto; /* allow hover + clicks */
	}
.event-dots:hover .event-dot:hover .tooltip{ display: block; }

/* tooltip */
.event-dot .tooltip,
.event-dots .event-dot .tooltip {
    display: none;
    position: relative;
    width: 250px;
    left: 15px;
    background: #444;
    color: #fff;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.75em;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
	z-index: 14;
	border: 2px solid black;
}
.event-dot:hover .tooltip,
.event-dots:hover .event-dot:hover,
.event-dots:hover .event-dot:hover .tooltip {
    display: inline-block;
    z-index: 8;
	font-size: 1em;
  text-align: left;
}

/* ======================================
   VERTICAL TIMELINE CARDS
   ====================================== */
   
.timeline-wrapper {
    gap: 25px;
    overflow-x: auto;
    padding-top: 20px;
}
.displayVerticalSeperatedTimeline {display: flex; min-width: 375px;}
.displayVerticalCompactTimeline {display: block;}
.noDisplayVertical {display: none!important;}

.timeline-box {
    min-width: 375px;
    max-width: 500px;
    flex: 0 0 auto;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    --tl-color: #333;
}

.timeline {
    position: relative;
    margin-left: 35px;
    border-left: 4px solid var(--tl-color);
    padding-left: 20px;
}

.timeline-entry, .timeline-private {
    margin-bottom: 25px;
    padding-left: 10px;
    position: relative;
}
.timeline-entry ol, .timeline-private {
	margin: 1px 0px;
}
.timeline-private {
	background-color: #c4c4c4;
	padding-left: 20px;
}
.timeline-private::before {
    content: "";
    width: 16px;
    height: 16px;
    background: var(--tl-color);
    border-radius: 0%;
    position: absolute;
    left: -32px;
    top: 3px;
}
.timeline-entry::before {
    content: "";
    width: 16px;
    height: 16px;
    background: var(--tl-color);
    border-radius: 50%;
    position: absolute;
    left: -32px;
    top: 3px;
}

.timeline-entry small.TimeLineDateTime, .timeline-private small.TimeLineDateTime {
    display: block;
    font-weight: bold;
    color: #333;
    margin: 0 4px 0 -20px;
}
.timeline-entry a.to-edit, .timeline-private a.to-edit {text-align: right; display: block;}
.timeline-entry small, .timeline-private small{}
.timeline-entry h3, .timeline-private h3{ margin: 0 0 1px 0; }
.timeline-entry p, .timeline-private p { margin: 4px 4px 4px 20px; }

.people, .effected, .indirected { font-style: italic; color: #777; }

.exhibits { margin-top: 4px; font-size: 1em; }
.exhibits ol { margin: 0; }
.exhibits a {
    color: var(--tl-color);
    text-decoration: none;
}
.exhibits a:hover { text-decoration: underline; }

/* ======================================
   CONNECTION LINES (SVG)
   ====================================== */
#connectionLayer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

#lineTooltip {
    position: fixed;
    padding: 5px 8px;
    background: black;
    color: white;
    border-radius: 4px;
    font-size: 12px;
    display: none;
    z-index: 10;
    pointer-events: none;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.dot-only .ht-tick::before {
    display: none; /* remove vertical tick */
}

.dot-only .ht-tick {
    flex: 0 0 auto;
    width: 20px; /* smaller spacing */
}


/* ============================================================
   PRINT STYLESHEET — CLEAN, SINGLE-COLUMN, NO SCROLLING
   ============================================================ */

@media print {

    /* Ensure colors actually print */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body {
        background: white !important;
        padding: 0;
        margin: 0;
    }

    /* Remove all scrollbars and horizontal timeline UI */
    .timeline-container,
    .timeline-master-wrapper,
    .timeline-scroll,
    .timeline-row,
    .horizontal-timeline,
    .ht-tick,
    .timeline-label-column {
        display: none !important;
        visibility: hidden !important;
    }

    /* Hide navigation arrows, tooltips, SVG connection layer */
    #connectionLayer,
    #lineTooltip,
    a[href^="#dot_"],
    a[href^="#"] {
        display: none !important;
    }

    /* PAGE TITLE */
    h1 {
        text-align: center;
        margin: 0 0 20px 0;
        font-size: 28px;
    }

    /* Make vertical timelines full-width and printable */
    .timeline-wrapper .print{
        display: block !important;
        width: 100%;
        overflow: visible !important;
    }

    .timeline-box {
        page-break-inside: avoid;
        break-inside: avoid;
        width: 100%;
        height: 100%;
        max-width: 100%;
        margin-bottom: 30px;
        box-shadow: none !important;
        border: 1px solid #ccc;
    }

    /* Timeline vertical bar */
    .timeline {
        border-left: 4px solid var(--tl-color) !important;
        padding-left: 20px;
        margin-left: 20px;
    }

    /* Timeline entries */
    .timeline-entry , .timeline-private{
        margin-bottom: 5px;
        page-break-inside: avoid;
        break-inside: avoid;
        padding-left: 5px;
        position: relative;
		width: 85%;
    }

    /* Dot for each entry */
    .timeline-private::before {
        content: "";
        width: 14px;
        height: 14px;
        background: var(--tl-color);
        border-radius: 0%;
        position: absolute;
        left: -28px;
        top: 4px;
    }
    .timeline-entry::before {
        content: "";
        width: 14px;
        height: 14px;
        background: var(--tl-color);
        border-radius: 50%;
        position: absolute;
        left: -28px;
        top: 4px;
    }

    /* Title + date formatting */
    .timeline-entry small, .timeline-private small {
        font-size: 10px;
        color: #333 !important;
    }

    .timeline-entry h3, .timeline-private h3 {
        margin: 4px 0;
        font-size: 12px;
        color: #000;
    }

    .timeline-entry p, .timeline-private p {
        font-size: 12px;
        margin: 3px 0 4px 0;
    }

    /* Remove links, convert hyperlinks to plain text */
    a {
        color: black !important;
        text-decoration: none !important;
    }
	.backDot {
        font-size: 0px;
	}
}

	
 #sun-12 {
	background:red;
	width:80px;
	height:80px;
	position:relative;
	text-align:center;
 }
 #sun-12:before,
 #sun-12:after {
	content:"";
	position:absolute;
	top:0;
	left:0;
	height:80px;
	width:80px;
	background:red;
 }
 #sun-12:before {
	transform:rotate(30deg);
 }
 #sun-12:after {
	transform:rotate(60deg);
 }
 #moon {
	width:80px;
	height:80px;
	border-radius:50%;
	box-shadow:15px 15px 0 0 red;
 }
	
 #yin-yang {
	width:96px;
	box-sizing:content-box;
	height:48px;
	background:#eee;
	border-color:red;
	border-style:solid;
	border-width:2px 2px 50px 2px;
	border-radius:100%;
	position:relative;
 }
 #yin-yang:before {
	content:"";
	position:absolute;
	top:50%;
	left:0;
	background:#eee;
	border:18px solid red;
	border-radius:100%;
	width:12px;
	height:12px;
	box-sizing:content-box;
 }
 #yin-yang:after {
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	background:red;
	border:18px solid #eee;
	border-radius:100%;
	width:12px;
	height:12px;
	box-sizing:content-box;
 }
object.sharepod{
	float:right;
display:block;
position:absolute;
right:0px;
bottom:0px;
}
a.share-icon, a.twitter-icon, a.facebook-icon, a.linkedin-icon{
	padding:0px !important;
	margin:2px !important;
	width:20px;
	min-width:auto;
	max-width:revert;
	height:20px;
	min-height:auto;
	max-height:revert;
	display:inline-block;
	text-align:center;
	vertical-align: middle;
	text-decoration:none;
	color:#000;
	-moz-box-shadow:none !important;
	-webkit-box-shadow:none !important;
	box-shadow:none !important;
	-o-transform: rotate(0deg) !important;
	-webkit-transform: rotate(0deg) !important;
	-moz-transform: rotate(0deg) !important;
	top:0 !important;
	position:relative !important;
}
a.twitter-icon {
	font-family:Tahoma, Lucida-Grande,Helvetica-Neue, Roboto,sans serif;
	background-color:#00ACED !important;
	color:#fff !important;
}
a.facebook-icon {
	font-family:Tahoma, Lucida-Grande,Helvetica-Neue, Roboto,sans serif;
	background-color:#3b5998 !important;
	color:#fff !important;
}
a.linkedin-icon {
	font-family:Tahoma, Lucida-Grande,Helvetica-Neue, Roboto,sans serif;
	background-color:#1666C5 !important;
	color:#fff !important;
}
	ul.checkEmail li {float:none !important; margin:0 auto !important;}
ul.checkEmail li a {
	align-self:flex-end;
	animation-duration:2s;
	animation-iteration-count:infinite;
	/*background-color:#F44336;*/
	margin:0 auto !important;
	transform-origin:bottom;
}
ul.checkEmail li a p {
	text-align:center;
}
ul.checkEmail li a {
	animation-name:bounce-7;
	animation-timing-function:cubic-bezier(0.280, 0.840, 0.420, 1);
 }
@keyframes bounce-7 {
	animation-delay:2s;
	0% { transform:scale(1,1) translateY(0); }
	10% { transform:scale(1.1,.9) translateY(0); }
	30% { transform:scale(.9,1.1) translateY(-100px); }
	50% { transform:scale(1.05,.95) translateY(0); }
	57% { transform:scale(1,1) translateY(-7px); }
	64% { transform:scale(1,1) translateY(0); }
	100% { transform:scale(1,1) translateY(0); }
 }
	
	@Recept{
		background-image: linear-gradient(135deg, white 0%, white 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(-135deg, white 0%, white 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(45deg, white 0%, white 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(-45deg, white 0%, white 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, #f2f2f2 100%), linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, #f2f2f2 100%);
background-position: bottom center, bottom center, top 0px center, top 0px center, bottom center, top center;
background-size: 3.3rem 3.3rem, 3.3rem 3.3rem, 3.3rem 3.3rem, 3.3rem 3.3rem, 100% 3.3rem, 100% 3.3rem;
background-repeat: repeat-x;
	}