/* ============================================================================== 
   File: scr_explain.css
	- Stylesheet for TipTool explanations (=custom tooltips)
		classes: explain => explanation
	- Author: Daniel Hugentobler (DH)
	- created: 03.JUL.2019, taken from scr_generic.css
	- amended: 18.MAY.2020, Firefox hack
	- amended: 17.JAN.2021, DH: new media-width-breakpoints for: narrow/medium/wide
   ============================================================================== */

/* define a TOOLTIP-BOX for wide and narrow mode */
.explain {
	position: relative;				/* ensure correct position for explanation */
}
/* explanation_narrow is being assigned by JS setDataAttribute() */
.explanation,
.explanation_dummy ,
.explanation_narrow {
	background-color: darkred;
	color: white;
	border-radius: 0.5rem;
	-webkit-box-shadow: 0.2rem 0.2rem 0.4rem #454545;
	-moz-box-shadow: 0.2rem 0.2rem 0.4rem #454545;
	box-shadow: 0.3rem 0.3rem 0.5rem #454545;
	font-weight: normal;
	min-width: 4rem;
	max-width: 20rem;
	width: auto;
	height: auto;
	text-align: left;
	padding: 0.4rem;
	/* position the explanation-box */
	position: absolute;
	bottom: 120%;				/* place the explanation ABOVE the control to be explained */
	left: 1rem;
	/*opacity: 1;*/				/* set to 1 for DEBUGGING ONLY */
	visibility: hidden;			/* set to visible for DEBUGGING ONLY */
	white-space: pre-wrap;
	z-index: 99;
}

.explanation_dummy {
	white-space: nowrap;			/* override */
}


/* align explanation to the button (else: ugly offset) */
.btn .explanation,
.calBtn .explanation,
.btn .explanation_narrow {
	left: -1.4rem;
}
.funcIcon .explanation {
	left: 0.4rem;
}
.teamLink .explanation {
	left: 0;
	bottom: 5rem;
}
.btn .explanation,
.btn .explanation_narrow {
	bottom: 2.2rem;
}


/* build the little arrow pointing to the control to be explained */
.explanation::after,
.explanation_dummy::after,
.explanation_narrow::after {
	border-top: 0.6rem solid darkred;		
	border-left: 0.6rem solid transparent;
	border-right: 0.6rem solid transparent;
	content: "";
	position: absolute;
	bottom: -0.6rem;			/* place the arrow BELOW the explanation-box */
	left: 1.6rem;
	/* no shadow, it would look ugly (i.e. rectangular) */
}

/* wide viewports have no space above the table header: 
	change from displaying the explanation above the control to BELOW the control */
/* place the explanation BELOW the control to be explained */
h1 .explanation,
th .explanation {
	left: 0.2rem;
	top: 110%;
	bottom: unset;			/* override */
}
/* place the arrow ABOVE the explanation-box */
h1 .explanation::after,
th .explanation::after{
	border-top: 0;
	border-bottom: 0.6rem solid darkred;
	bottom: unset;			/* override */
	left: 1.2rem;
	top: -0.6rem;			
}
/* override h1-settings */
h1 .explanation {
	font-size: 40%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	line-height: 1.2rem;
	white-space: nowrap;
}

.byNight .explanation,
.byNight .explanation_dummy,
.byNight .explanation_narrow {
	background-color: lime;
	color: black;
	-webkit-box-shadow: 0 0 2rem lime;             /* lime glow */
	-moz-box-shadow: 0 0 2rem lime;
	box-shadow: 0 0 2rem lime;
}
/* little arrow */
.byNight .explanation::after,
.byNight .explanation_dummy::after,
.byNight .explanation_narrow::after {
	border-top: 0.6rem solid lime;
}

/* different colors by night */
.byNight h1 .explanation::after,
.byNight th .explanation::after {
	border-bottom: 0.6rem solid lime;
	border-top: 0;
}

/* Show the tooltip text when you mouse over the tooltip container 
	for WIDE viewports */
.explanation_dummy,
.explain:hover .explanation {
	/* fading is defined in animation.css */
	visibility: visible;
}

/* ----------------
   hack for Firefox 
   ---------------- */
   @media screen and (-moz-images-in-menus:0) {
	.explanation::after,
	.explanation_dummy::after,
	.explanation_narrow::after {
		bottom: -1.8rem;		/* place the arrow BELOW the explanation-box YET with a Firefox-offset */
	}
	h1 .explanation::after,
	th .explanation::after {
		top: -1.8rem;			/* place the arrow ABOVE the explanation-box YET with a Firefox-offset */
	}
}

/* -------------------- */
/* for NARROW viewports */
/* -------------------- */
@media (max-width: 60rem) { /* formerly 40rem */
	.explain:hover .explanation_narrow {
		/* fading is defined in animation.css */
		visibility: visible;
	}
}
@media (max-width: 40rem) {
	/* hide tiptexts of adaptive tables' headers */
	.tblDisplay .explain:hover .explanation {
		opacity: 0;
	}
	td .explanation_narrow,
	th .explanation_narrow {
		bottom: 1.6rem;
	}
	/* the very first row has no space above the table 
		place the explanation BELOW the control to be explained */
	tr:first-child .explanation_narrow {
		top: 110%;
		bottom: unset;			/* override */
	}
	/* place the arrow ABOVE the explanation-box */
	tr:first-child .explanation_narrow:after {
		border-top: 0;
		border-bottom: 0.6rem solid darkred;
		bottom: unset;			/* override */
		top: -0.6rem;
	}
	.byNight tr:first-child .explanation_narrow:after {
		border-bottom: 0.6rem solid lime;
	}

	/* ----------------
	   hack for Firefox 
	   ---------------- */
	@media screen and (-moz-images-in-menus:0) {
		td .explanation_narrow,
		th .explanation_narrow {
			bottom: 2.8rem;
		}
		tr:first-child .explanation_narrow:after {
			top: -1.8rem;
		}
	}
}