/* ============================================================================== 
   File: scr_explain.css
	- Stylesheet for ArchiComix explanations (=custom tooltips) (taken from TipTool and amended)
		classes: explain => explanation
	- Author: Daniel Hugentobler (DH)
	- created: 25.SEP.2020
	- 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: #669cff;		/* tint of complement-blue */
	color: white;					/* same as background */
	border-radius: 0.5rem;
	-webkit-box-shadow: 0.2rem 0.2rem 0.4rem #454545;	/* gray */
	-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 #669cff;	/* tint of cpmplement blue */
	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 #669cff;
	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 h1 .explanation::after,
.byNight th .explanation::after {
	border-top: 0;
	border-bottom: 0.6rem solid #7facff;
	bottom: unset;			/* override */
}

/* 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;
}

/* different colors by night */
.byNight .explanation,
.byNight .explanation_dummy,
.byNight .explanation_narrow {
	/* THIS ONE DOES NOT HAVE TO HAVE ANY EFFECT -> WHY ????  */
	background-color: #7facff;				/* brighter tint of complement-blue */
	color: black;							/* same as background */
	-webkit-box-shadow: 0 0 2rem #669cff;	/* blueish glow */
	-moz-box-shadow: 0 0 2rem #669cff;
	box-shadow: 0 0 2rem #669cff;
}
/* little arrow */
.byNight .explanation::after,
.byNight .explanation_dummy::after,
.byNight .explanation_narrow::after {
	border-top: 0.6rem solid #7facff;		/* brighter tint of complement-blue */
}

/* ----------------
   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: 40rem) {
	.explain:hover .explanation_narrow {
		/* fading is defined in animation.css */
		visibility: visible;
	}
	/* 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 #669cff; /* tint of complement-blue */
		bottom: unset;			/* override */
		top: -0.6rem;
	}
	.byNight tr:first-child .explanation_narrow:after {
		border-bottom: 0.6rem solid #7facff; /* brighter tint of complement-blue */
	}

	/* ----------------
	   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;
		}
	}
}