/* ============================================================================== 
   File: scr_balloon.css
	- Stylesheet for ArchiComix balloons
	- Author: Daniel Hugentobler (DH)
	- created: 05.DEC.2020
	- amended: 17.JAN.2021, DH: new media-width-breakpoints for: narrow/medium/wide
   ============================================================================== */

/* N.B.: use EM instead of REM to ensure proper scaling upon zooming! */

/* architect's quotations, positioned to the right of the portrait */
.quotationBalloon {
	background-color: papayawhip;
	border-radius: 0.8em;
	color: black;
	font-family: 'myBalloon', 'Arial';
	font-size: 250%; /* for Arial */
	font-size: 330%; /* for sf-cartoonist-hand.regular/MarckScript-Regular */
	font-size: 250%; /* for stingray */
	padding: 1em;
	position: absolute;
	top: 20%;
	left: 110%;
	min-width: 60%;
	min-width: 12em;
	max-width: 80%;
	height: auto;
	/* shadow */
	-webkit-box-shadow: 0.2rem 0.2rem 0.4rem #a8a8a8; /* shade of lightgray */
	-moz-box-shadow: 0.2rem 0.2rem 0.4rem #a8a8a8;
	box-shadow: 0.3rem 0.3rem 0.5rem #a8a8a8;
	z-index: 5;
}
/* build the little arrow pointing to the portrait */
.quotationBalloon::after {
	border-right: 1.2em solid papayawhip;
	border-top: 0.6em solid transparent;
	border-bottom: 0.6em solid transparent;
	content: "";
	position: absolute;
	left: -1.2em;		/* place the arrow LEFT of the balloon */
	top: 33%;
	/* no shadow, it would look ugly (i.e. rectangular) */
}
.byNight .quotationBalloon {
	background-color: #303030; /* pretty dark gray */
	color: lightgray;
	/* neither shadow nor glow */
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
/* the little arrow */
.byNight .quotationBalloon::after {
	border-right: 1.2em solid #303030; /* pretty dark gray */
}

/* COMIX hierarchy: 
	ComicStrip
		has 1-n ComicPanel(s)
			has 1-n ComicBalloon(s)
*/

/* balloon is an item within a comic-panel, containig the text to be displayed
	it is being positioned and sized by its ID on the strip-page itself (embedded css)! 
	initially all balloons are invisible; the balloons of the current panel are made visible by JS */
.balloon {
	background-color: transparent;
	color: black;
	display: none;
	font-family: 'myBalloon', 'Arial';
	font-size: 80%; /* for sf-cartoonist-hand.regular/Arial */
	font-size: 70%; /* for MarckScript-Regular */
	font-size: 52%; /* for Stingray */
	hyphens: auto;					/* support hyphenation */
	opacity: 100%;
	position: absolute;			/* position balloon absolutely within its map */
	z-index: 15;
}
.byNight .balloon {
	color: lightgray;
}
/* show only balloons of the current panel */
.currBalloon {
	display: inline-block;
}

/* ------------------------ */
/* NARROW / MEDIUM viewport */
/* ------------------------ */
@media (max-width: 60rem) { /* formerly 40rem */
	/* save any space you can */
	.quotationBalloon {
		border-radius: 0.6em;
		padding: 0.6em;
		top: 0;
	}
}