@charset "UTF-8"; /* "It must be the first element in the style sheet and not be preceded by any character..." */



/* This page is distinguished from lufstat.css in that it contains
 * NO declaration blocks containing the word "font-family".
 */



/* Outlines to be able to temporarily make all boxes visible during development updates. (Unlike borders, outlines
 * don't change the space and position of various parts of the webpage, so outlines are better.) DON'T create one
 * for IMG elements since it then removes the effect of "outline: var(--myGreen) dashed 5px;" in the class
 * thumbnailLikeActive (which is for thumbnail IMG elements).
 */

/*
a.gB {outline: 1px solid red;}
body.gB {outline: 1px solid pink;}
br.gB {outline: 1px solid orange;}
div.gB {outline: 1px solid magenta;}
h1.gB {outline: 1px solid purple;}
h2.gB {outline: 1px solid LightSeaGreen;}
html.gB {outline: 1px solid lime;}
img.gB {outline: 1px solid yellow;}
input.gB {outline: 1px solid green;}
label.gB {outline: 1px solid olive;}
p.gB {outline: 1px solid cyan;}
select.gB {outline: 1px solid blue;}
span.gB {outline: 1px solid tomato;}
*/


/* START OF THE NOSCRIPT TAG */

#noscript { /* ID needed because just referring to the element type (NOSCRIPT) doesn't work. */
	background: black;
	font-size: 24px; /* Was 150%. Either one works. */
	font-weight: bold;
	
	/* Mozilla recommends unit-less numbers, and says that "[l]ength and percentage line-heights have
	 * poor inheritance behavior." (https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)
	 */
	line-height: 1.15;
	
	padding: 3px 3px 3px 3px;
	text-align: left;
}

.nosLangTxt {padding: 0 0 5px 2px;}
#chinese {color: #ff0;}
#english {color: #f00;}
#french {color: #f0f;}
#german {color: #6f6;}
#swedish {color: #0ff;}

/* /END OF THE NOSCRIPT TAG */



:root { /* higher SPECIFICITY than HTML; otherwise the same */
	--myHoverGreen:		#009900; /* #009900 is a bit darker green displayed by the green button when active.  */
	--myGreen: 		#00b300; /* #00b300 is a fully saturated green */
	--myHoverBlue:		#1a66ff; /* #1a66ff is a more intense blue displayed by the blue button when active.  */
	--myBlue: 		#4d88ff; /* #4d88ff is a fully saturated blue used when NOT hovering "Clear all" btn. */
	--myPressed3btnShadow:	#888888; /* #888888 is the gray shadow of the three buttons when active. */
	--myThreeBtnShadow:	#aaaaaa; /* #aaaaaa is the gray shadow of the three buttons when NOT pressed. */

	/* #dcdcdc (Gainsboro) is gray. Used as a background for list instructions, and as gradient color
	 * for circular buttons. #e6e2d3 ("Artifice" or "Satin Linen") is an interesting alternative.
	 */
	--myGray:		#dcdcdc;
	
	--myHoverYellow:	#e6e600; /* #e6e600 is a "dirty" yellow displayed by the yellow button when active. */
	--myYellow: 		#ffff66; /* #ffff66 is a fully saturated lighter yellow */

	/* myCaffeLatte is set to equal #c8ad7f ("Light French Beige"), or its mix with white by one (#cbb185)
	 * or two (#ceb58c) steps towards white, as per https://www.w3schools.com/colors/colors_mixer.asp
	 * It's difficult to use lighter tones when having strong other colors such as green since then
	 * everything seems to take on a tint of that color (green), plus that it may come across as pink.
	 */
	--myCaffeLatte: #ceb58c;

	/* myChocolate is defined by one of #c09f75, #bf9d74, and #be9c73 which are all mixes of #c8ad7f
	 * ("Light French Beige") and #b9936c (chocolate-like) from https://www.w3schools.com/colors/colors_mixer.asp
	 * #c19a6b (Camel Brown) is quite similar.
	 */
	--myChocolate: #bf9d74;
	
	/* Removes the possibility of selecting text anywhere on the page. Selection can 
	 * happen by mistake and the automatic highlighting causing a visual disruption.
	 */
	user-select: none;
}



/* Stops containers from expanding beyond the limits of their containers (at least horizontally to the right,
 * as verified, and not only for DIV containers of the class newAndOldCheckbxAndTxt for green checkbox areas,
 * and not only when space is constrained). Doesn't work if placed in ":root".
 */
* {
	box-sizing: border-box;
}



/*
//23456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567 |
*/



/* Valid for the BODY tag in all pages except the index.html page in the
 * root directory (from where location-dependent redirection takes place).
 */
body.nonRootPg {
	background: darkseagreen; /* darkseagreen = #8fbc8f */
	display: flex; /* Only meaningful if "flex: 1" in #centeredBox isn't commented out. */
	
	/* Mozilla recommends unit-less numbers, and says that "[l]ength and percentage line-heights have
	 * poor inheritance behavior." (https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)
	 */
	line-height: 1.15; /* further boosted for the H1 heading in "#h1_heading" */

	font-size: 18px; /* 18px may be a good size */
	margin: 0; /* removes a default maybe 7px margin */
}



#pgMarginLeft, #pgMarginRight {
	/* The background color is set in BODY (in order to include the bottom left and right corners). */

	/* Not relevant if "width" is set in #centeredBox while "flex: 1" in #centeredBox is commented out. Otherwise,
	 * the "width"s of the columns on the page are determined by #centeredBox, #pgMarginLeft, and #pgMarginRight.
	 */
//	width: 30px;
}



#centeredBox {
	/* Since setting the background color here doesn't affect the
	 * footer, the color is instead set in #mainArea and #footer.
	 */

	/* Overrides the "width" setting here below, but only affects
	 * the "width" in #pgMarginLeft and #pgMarginRight slightly.
	 */
	flex: 1;

	margin: 0 auto; /* "margin: 0 auto" centers the page across browsers. */
	position: relative;
	text-align: left;
//	width: 1500px; /* Determines "width", IF "flex: 1" above is commented out. */
}



/* The only purpose with this is to remove the little space after the images. It has 
 * worked on ALL images (CCTV Tower image, large graph image, and thumbnail images).
 */
img {
	vertical-align: middle;
}



/* Container for top image (one of three page main division containers, the other two being #mainArea and #footer). */
#topArea {
	background-image: url("../base/20160515_162312_75_5_2.webp");
	background-repeat: no-repeat;

	/* "background-size: contain" (or "background-size: 100%")
	 * shrinks or enlarges any size image to the set width.
	 */
	background-size: cover;

	/* The values for left and right padding for #topArea,
	 * #chartsFilterAndSelectionArea, and #infoPgArticle should match.
	 */	
	padding: 0px 7px 0px 7px; /* top, right, bot., left. */
}



#headingContainer { /* container for H1 heading (and possibly images in the margins) */
//	border: 3px dotted red;
	display: flex; /* "inline-flex" also works. */
	
	/* The distance between the H1 heading and the language links is best
	 * adjusted in #h1_heading, which will expand this container vertically.
	 */
}



#headingColLeft,
#headingColRight { /* in preparation for wanting to use that area by expanding it by placing an image there */
	/* Choose between enlarging "16 ingen" to 24, shrinking "32 ingen" to 24, or using "24 no halo". */
//	background-image: url("../base/background-32 (ingen).png");

	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-bottom: auto;
	margin-top: auto;
	height: 20px; /* an example height */
	width: 20px; /* an example width */
}



#headingColMid {
	text-align: center; /* Centers the H1 heading within the expanded ("width: 100%") container. */
	width: 100%;
}



#h1_heading {
	/* 26px wraps the heading, but 25px doesn't for the primary font "Source Sans 3",
	 * although it does for the fonts Roboto, Segoe UI, Gadugi, Ebrima, and Arial.
	 * 24px causes Roboto to not wrap, but the other four remain wrapped.
	 */
	font-size: 25px; /* 25px seems large enough */

	/* Mozilla recommends unit-less numbers, and says that "[l]ength and percentage line-heights have
	 * poor inheritance behavior." (https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)
	 */
	/* Increases "line-height" beyond the one set globally for BODY (which isn't enough for this heading).
	 * Causes two things: 1) Increases the distance between the lines of a wrapped H1 heading, and
	 * 2) marginally increases the distance between the H1 heading and the top edge of the screen.
	 */	
	line-height: 1.05;

	/* Preferred size of "margin-top" is affected by "line-height". Centering here of H1 heading with
	 * "margin: 7px auto 0px auto;" doesn't work. "margin-top: 10px" actually DECREASES the margin at the top.
	 */
	margin-top: 10px;
	
	 /* Adjusts the distance between the H1 heading and the language links.
	  * "margin-bottom: 10px" actually DECREASES the margin at the bottom.
	  */
	margin-bottom: 10px;
}



/* If applied to "#topArea", the language links aren't affected, so no point with such
 * global setting. For the language links, this class must be applied on the A tags.
 */
.topAreaTxt {
	color: white;
	
	/* The third parameter may be boosted to 4px, but then the same should be
	 * done at .topAreaTxt, "#zh:hover, #en:hover, #sv:hover", and .whiteTxt.
	 */
//	text-shadow: 2px 2px 3px black, 0 0 0.2em black; /* without cloud shadow */
	text-shadow: 2px 2px 3px black, 0 0 1em RoyalBlue, 0 0 0.2em black;
}



#belowTopContainer { /* container for image text */
	display: flex;
}



#belowTopColLeft {
	flex: 1;
	margin: 0px 7px 7px 7px;
}



#langContainer {
//	border: 2px solid lime;
	display: flex;
}



#langColLeft { /* logo */
	/* Choose between enlarging "16 ingen" to 24, shrinking "32 ingen" to 24, or using "24 no halo". */
	background-image: url("../base/background-32 (ingen).png");
	
	background-repeat: no-repeat;
	background-size: contain;
	
	/* The highest in order to not increase the vertical spacing 
	 * is 26px (although perhaps 32px provides the best image).
	 */	
	height: 32px;

	margin: 0px 0px 12px 0px; /* The third parameter is the distance below the logo. */
	width: 32px;
}



#langColRight {
	margin: 0px 0px 0px 7px;
}



#zh,
#en,
#sv {
	cursor: pointer;
	display: inline-block;
	padding: 0px 7px 7px 7px;
}



#zh:hover,
#en:hover,
#sv:hover {
	text-decoration: underline overline;

	/* The third parameter may be boosted to 4px, but then the same should be
	 * done at .topAreaTxt, "#zh:hover, #en:hover, #sv:hover", and .whiteTxt.
	 */	
	/* either "2px 2px 3px black, 0 0 1em red, 0 0 0.2em red", or the same but the first color also set to red */
	text-shadow: 2px 2px 3px black, 0 0 1em red, 0 0 0.2em red;
}



#introTxt {
	align-items: center; /* "vertical-align: middle" doesn't work */
	display: flex;

	/* Keeps a minimum distance between the color change button and a potential image placed below it. (Trying
	 * to accomplish that by instead adding a margin or padding around the image doesn't work.) 38px may be
	 * optimal if it's a 40x40 px image, and from the perspective of keeping the text "Here below you can limit
	 * the number of charts to select from." close to the background image border, 32px seems optimal.
	 */
	min-height: 32px;
}



#belowTopColRight {
	margin: 0px 7px 7px 0px;

	/* If adding an image below the color change button, provide a fixed point for an
	 * image ID to position against with "position: relative" here (and with "bottom: 0px",
	 * "position: absolute", and "right: 0px" in the declaration block of the image itself).
	 */
}



/* FROM "6. Label for toggle switch" at https://alvarotrigo.com/blog/toggle-switch-css/ */

.toggleHoverArea,
#toggle-switch {
	--height: 32px;
	
	/* same "border-radius" for ".toggleHoverArea" as for ".toggle-switch"
	 * so that cursor and title is correct also in the corners
	 */
	border-radius: calc(var(--height) / 2);
	
	/* applies to ".toggle-switch", but placed here since
	 * dependent "border-radius" also applies to ".toggleHoverArea"
	 */	
	height: var(--height);
}

.toggleHoverArea {
	cursor: pointer;
	display: inline-flex;
	margin: 0px 0px 14px 0px;
}

#toggle-switch {
	background: var(--myCaffeLatte);
	position: relative; /* keeps the circular part in position */
	width: 58px;
}

#toggle-switch::before {
	/* Yes, the image needs to be declared here as well, and cannot be broken up into one statement for the
	 * background image and one for the linear-gradient. Linear-gradient fills the circle with dirty white.
	 */
	background-image: url("../base/720x720.png"), linear-gradient(to bottom, #ffffff 0%, var(--myGray) 100%);

	/* Only meaningful for when the "background-size" differs from "height" and "width". */
	background-position: center;
	
	/* Only meaningful for when the "background-size" is less than "height" and "width". */
	background-repeat: no-repeat;
	
	/* Size of background image "i". Keep the same as "height" and "width" (at 24px). */
	background-size: 24px 24px;
	
	border-radius: 50%; /* changes a square to a circle */
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); /* draws the circle line */
	content: ""; /* necessary for the button to show */
	height: 24px; /* Height of round button. 24px is good. */
	left: 4px; /* position of round button within the elonggated slide area */
	position: absolute;
	top: 4px; /* position of round button within the elonggated slide area */
	transition: left 0.1s; /* Makes the button's sideways movement smooth. (Original 0.25s was too slow.) */
	width: 24px; /* Width of round button. 24px is good. */
}

.toggleHoverArea:hover #toggle-switch::before { /* This sequence of two classes is needed */

	/* Yes, the image needs to be declared here as well, cannot be shortened to "background"
	 * here, and cannot be broken up into one statement for the background image and one
	 * for the linear-gradient. Linear-gradient fills the circle with white on hover.
	 */
	background-image: url("../base/720x720.png"), linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);

	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7); /* colors the circle line dark gray on hover */
}

#toggle-checkbox:checked + #toggle-switch {
	background: var(--myChocolate);
}

#toggle-checkbox:checked + #toggle-switch::before {
	left: 30px;
}

#toggle-checkbox {
	position: absolute;
}



#colorBtn {
	background: linear-gradient(to bottom, #ffffff 0%, var(--myGray) 100%); /* fills the circle with dirty white */
	
	/* Removes the outline otherwise created when the global outlines are turned on at the top of this .css page. */
	outline: none;

	border: 1px solid rgba(0, 0, 0, 0.35);
	border-radius: 20px;
	box-shadow: 2px 2px 3px black, 0 0em black; /* without cloud shadow */
	cursor: pointer;
	font-size: 22px;	
	height: 30px;
	
	/* Mozilla recommends unit-less numbers, and says that "[l]ength and percentage line-heights have
	 * poor inheritance behavior." (https://developer.mozilla.org/en-US/docs/Web/CSS/line-height).
	 * 18px was changed to 17px. The lower the number, the higher up the letter is placed in the round button.
	 */	
	line-height: 17px;

	padding: 5px 0px 0px 8px;
	width: 30px;
}

#colorBtn:hover {
	background: white;
	border: 1px solid rgba(0, 0, 0, 0.5);

	/* either "2px 2px 3px black, 0 0 1em red, 0 0 0.2em red", or the same but the first color also set to red */
	box-shadow: 2px 2px 3px black, 0 0 1em red, 0 0 0.2em red;
}

#colorBtn:active {
	background: white;
	box-shadow: 0 0px var(--myPressed3btnShadow);
	transform: translateY(3px);
}



/* One of three page main division containers, the other two being #topArea and #footer). */
#mainArea {
	/* Background color is set by one of several ".mainStyle_[digit]"
	 * which are set in JS after triggering by the color change button.
	 */ 

	/* Places the footer at the page bottom for when the page content doesn't push it down there
	 * anyway. Sets minimum height to 100% of the viewport height (vh), minus the height of the top
	 * area. -184px is good. -186px (and probably -185px if it could be seen) causes a fine line at
	 * the very bottom of the page, and 183px causes a scrollbar. In this case, "calc(100% - 184px)"
	 * would be the same since #mainArea is the same as the height of the viewport. There's no need
	 * to use "bottom" in #footer. A line or vertical scrollbar showing up should be regulated here.
	 */
	min-height: calc(100vh - 184px);
}



.mainStyle_1 { /* Used by JS after triggering by the color change button. */ 
	background: var(--myCaffeLatte);
}

.mainStyle_2 { /* Used by JS after triggering by the color change button. */ 
	background: white;
}

.mainStyle_3 { /* Used by JS after triggering by the color change button. */ 
	background: black;
	color: white;
}



/* One of two main division containers inside #mainArea of index.html, the other one being #chartsDisplayArea. */
#chartsFilterAndSelectionArea {
	/* The values for left and right padding for #topArea,
	 * #chartsFilterAndSelectionArea, and #infoPgArticle should match.
	 */
	padding: 7px 7px 7px 7px; /* top, right, bot., left. */
}



/* A container inside #mainArea of info.html where padding can be set without affecting index.html. */
#infoPgArticle {
	/* The values for left and right padding for #topArea,
	 * #chartsFilterAndSelectionArea, and #infoPgArticle should match.
	 */
	padding: 7px 7px 14px 7px; /* top, right, bot., left. */
}



#btnsBg {
	display: inline-block; /* "none", "inline", "block", and "inline-flex" are all wrong */
	padding: 7px 7px 0px 7px;
	vertical-align: top;
}



.selections {
	display: inline-block; /* "none", "inline", "block", and "inline-flex" are all wrong */
	padding: 7px 7px 7px 7px;
	vertical-align: top;
}



.whiteTxt {
	color: white;
	
	/* The third parameter may be boosted to 4px, but then the same should be
	 * done at .topAreaTxt, "#zh:hover, #en:hover, #sv:hover", and .whiteTxt.
	 */	
	text-shadow: 2px 2px 3px black, 0 0 1em brown, 0 0 0.2em black;
//	text-shadow: 2px 2px 3px black, 0 0 0.2em black; /* without cloud shadow */
}



.threeBtns {
	border-radius: 99px;
	box-shadow: 0 6px var(--myThreeBtnShadow);
	cursor: pointer;
	margin: 7px 0px 14px 0px;
	padding: 14px 15px;
	text-align: center;
}

#btnSelectAll {
	background: var(--myGreen);
	color: white;
	
	/* Removes the outline otherwise created when the global outlines are turned on
	 * at the top of this .css page. (Doesn't work if placed in the class threeBtns.)
	 */	
	outline: none;
}

#btnSelectAll:hover {
	background: var(--myHoverGreen);	
}

#btnSelectAll:active {
	background: var(--myHoverGreen);
	box-shadow: 0 3px var(--myPressed3btnShadow);
	transform: translateY(3px);
}

#btnCheckboxDefaults {
	background: var(--myYellow);
	color: black; /* Preserves the black font color when the background color of the page is changed. */	

	/* Removes the outline otherwise created when the global outlines are turned on 
	 * at the top of this .css page. (Doesn't work if placed in the class threeBtns.)
	 */
	outline: none;
}

#btnCheckboxDefaults:hover {
	background: var(--myHoverYellow);
}

#btnCheckboxDefaults:active {
	background: var(--myHoverYellow);
	box-shadow: 0 3px var(--myPressed3btnShadow);
	transform: translateY(3px);
}

#btnClearAll {
	background: var(--myBlue);	
	color: white;

	/* Removes the outline otherwise created when the global outlines are turned on
	 * at the top of this .css page. (Doesn't work if placed in the class threeBtns.)
	 */
	outline: none;
}

#btnClearAll:hover {
	background: var(--myHoverBlue);
}

#btnClearAll:active {
	background: var(--myHoverBlue);	
	box-shadow: 0 3px var(--myPressed3btnShadow);
	transform: translateY(3px);
}



#topm {
	/* 180px (rather than 175px) to accomodate Chinese, and to get a
	 * nicer-looking looking word-break (syllabification) in Swedish.
	 */
	width: 180px; 
}

#tos {
	/* First 310px (rather than 295px) to accomodate English, but then 315px also accomodates Swedish, yet this
	 * is pushing it since a horizontal scrollbar shows up if the screen width is 320px. Also, see ".time".
	 */
	width: 295px;	
}

#years {
	/* First 230px (rather than 225px) to accomodate Chinese, but then 235px
	 * also accomodates English, and finally, 240px accomodates Swedish.
	 */
	width: 240px;
}

#months {
	width: 230px; /* 230px (rather than 225px) to accomodate English. */
}

#dotw {
	width: 295px; /* 295px (rather than 285px) to accomodate English. */
}

#time {
	/* 320px (rather than 305px) to accomodate Chinese (and English), yet this is pushing it
	 * since a horizontal scrollbar shows up if the screen width is 320px. Also, see ".tos".
	 */
	width: 320px;
}



/* Only appears in index.html in the "sv" directory. In other words, unique to Swedish. */
.longSwedishWord {
	/* For the specific word and hyphenation it is for, "hyphens: auto" 
	 * produces the same result in four tested browsers.
	 */
	hyphens: manual;
}



.aroundChkbx {
	padding-top: 7px;
}



.newAndOldCheckbxAndTxt { /* clickable area */
	background-image: linear-gradient(to right, var(--myChocolate), #ffffff);
	border-radius: 4px;
	color: black; /* Preserves the black font color when the background color of the page is changed. */	
	cursor: pointer;	
	display: inline-flex; /* "none", "inline", "block", and "inline-block" are all wrong */
	padding: 10px 10px 10px 10px;
	position: relative; /* fixed point for classes "square" and "square-checked" */
	width: 100%; /* expands the background color of checked boxes fully to the right */
}



/* Only used in luftstat_lang.js. Added to and removed from the
 * same classList that contains class newAndOldCheckbxAndTxt. 
 */
.checkbx-checked {
	background: var(--myGreen);
	color: white;
}



input[type=checkbox] { /* INPUT elements of "type='checkbox'" */
	opacity: 0; /* removes regular checkboxes */
}



.square {
	background: white;
	border-radius: 2px; /* 1px or 2 px */
	height: 18px;
	margin: 1px -11px 0 0;
	
	/* width of the checkbox; "min" keeps the width of the square when the window becomes very narrow */
	min-width: 18px;
	
	outline: 1px solid black;
}



.square-checked::after { /* the checkmark itself */
	border-style: solid;
	border-color: black; /* needed */
	border-width: 0 20px 19px 0;
	height: 40px; /* yes, needed */
	content: '';
	left: 0;
	position: absolute;
	top: -10px;	
	transform: scale(0.22) rotate(45deg);
	width: 18px; /* yes, needed */	
}



.square-default { /* must be placed AFTER ".square"; indicates that it's one of the checkboxes checked by default */
	background: var(--myYellow);
}



.chkbxMainTxt {
	display: inline-block; /* "none", "inline", and "block" are all wrong. "inline-block" and "inline-flex" work. */
}

.chkbxMainTxt::after { /* Non-breaking space THIS WAY necessary for perfect wrapping when narrow window. */

	/* "A0" is HEX for non-breaking space (the only space working 
	 * in HTML) --   =   =   in other contexts.
	 */
	content: '\00A0';
}



.dfltChkbxTxt {
	background: var(--myYellow);
	color: black;
	font-style: italic;	
}



#welcome { /* for info.html */
	font-style: italic;
}



.infoParagraphs { /* for info.html */
	padding: 7px 7px 7px 7px;
}



.h2_heading { /* for info.html */
	font-size: 20px;
	margin-bottom: 5px;
}



#mainPgInstrBox {
	background: var(--myGray);
	border-radius: 7px 7px 7px 7px;
	color: black; /* Preserves the black font color when the background color of the page is changed. */
	padding: 4px 6px 4px 6px;
}



/* The four @media must be in this order. */

@media screen { /* 370px and above; optimized for 370px. */
	#selectionsColumn {
		width: 341px; /* the width of the SELECTIONS list */
	}
	#tooManyItemsTxt, #listItemText {
		width: 308px; /* #selectionsColumn - 33 */
	}	
	#selectChart {
		font-size: 18px; /* matches #selectionsColumn "width: 341px" */
	}
}

@media screen and (max-width: 369px) { /* 350px-369px; optimized for 350px. */
	#selectionsColumn {
		width: 321px; /* the width of the SELECTIONS list */
	}
	#tooManyItemsTxt, #listItemText {
		width: 288px; /* #selectionsColumn - 33 */
	}	
	#selectChart {
		font-size: 17px; /* matches #selectionsColumn "width: 321px" */
	}
}

@media screen and (max-width: 349px) { /* 330px-349px; optimized for 330px. */
	#selectionsColumn {
		width: 301px; /* the width of the SELECTIONS list */
	}
	#tooManyItemsTxt, #listItemText {
		width: 268px; /* #selectionsColumn - 33 */
	}	
	#selectChart {
		font-size: 16px; /* matches #selectionsColumn "width: 301px" */
	}
}

/* 320 px screen width "minus browser interface and vertical scrollbar" is 310 px
 * (http://web.archive.org/web/20160330034016/http://www.websitedimensions.com/).
 */
@media screen and (max-width: 329px) { /* 310px-329px (and below); optimized for 310px. */
	#selectionsColumn {
		width: 281px; /* the width of the SELECTIONS list */
	}
	#tooManyItemsTxt, #listItemText {
		width: 248px; /* #selectionsColumn - 33 */
	}
	#selectChart {
		font-size: 15px; /* matches #selectionsColumn "width: 281px" */
	}
}



#diagramListMsgBox {
	background: var(--myGray);
	border-radius: 7px 7px 0px 0px;
	color: black; /* Preserves the black font color when the background color of the page is changed. */	

	/* Adding 2px at the top (in addition to the padding of the 
	 * surrounding selections class) to compensate for less space.
	 */
	margin: 4px 0px 0px 0px;

	padding: 4px 6px 4px 6px;
	
	/* Used by tooltip style popups (one for selecting to many items in the SELECT menu,
	 * and another one displaying the full description of the OPTION hovered over).
	 */
	position: relative;
}



#countVisible,
.emptyTxtLine { /* a DIV spacer */
	height: 15px;
	margin-bottom: 1px; /* eliminates the SPAN tag top's encroachment on this DIV spacer */
}



/* Each of these are placed in an ID since it needs to be in effect also when NOT shown since else
 * the text it is applied to will take up space on the page as being invisible (and cause confusion
 * as to whether "vertical-align: top" should be applied and why it then doesn't work).
 */
#tooManyItemsTxt,
#listItemText {
	background: black;
	border-radius: 10px;
	color: white;
	left: 10px;	
	padding: 5px 5px;
	position: absolute;
}



/* This is placed in an ID since it needs to be in effect also when NOT shown since else the
 * text it is applied to will take up space on the page as being invisible (and cause confusion
 * as to whether "vertical-align: top" should be applied and why it then doesn't work).
 */
#tooManyItemsTxt {
	box-shadow: 0 0 1em red, 0 0 2em red; /* "box-shadow: 0 0 2em red, 0 0 1em red" seems to be the same */  
	top: 10px;
}



/* Cannot be placed in #tooManyItemsTxt or #listItemText since
 * "visibility: hidden" need to be separated from the rest there.
 */
.tooltipTypePopupHide {
	visibility: hidden; /* "visibility: none" doesn't work */
}



/* The @media wrapping stops the #listItemText tooltip type popup container background to on
 * mobile devices show up empty as a horizontal 2 mm thick black line surrounded by a blue
 * shadow cloud. For the CSS, see https://developer.mozilla.org/en-US/docs/Web/CSS/@media,
 * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover, and
 * https://inthedigital.co.uk/detecting-mobile-devices-using-the-css4-hover-media-query/
 */
@media (hover: hover), (pointer: fine) { /* opposite of "@media (hover: none) and (pointer: coarse)" */
	.tooltipTypePopupShow {
		visibility: visible;
	}
}



/* This is placed in an ID since it needs to be in effect also when NOT shown since else the
 * text it is applied to will take up space on the page as being invisible (and cause confusion
 * as to whether "vertical-align: top" should be applied and why it then doesn't work).
 */
#listItemText {
	/* "box-shadow: 0 0 2em --myBlue, 0 0 1em --myBlue" seems to be the same */  
	box-shadow: 0 0 1em var(--myBlue), 0 0 2em var(--myBlue);

 	/* Set to optimally accommodate four lines (after line wrapping). Better than "bottom: 0" which
 	 * doesn't keep the top-most line at the same place when the number of lines wrapped changes.
 	 */
	transform: translateY(-99px);
}



#selectChart {
	overflow-y: auto; /* removes the non-used scrollbar space */

	/* A possible background color should NOT be specified here, but instead in .selectChartNormal. */
	width: 100%; /* to expand fully within selectionsColumn */
}



/* Since the normal background color should be changed if too many charts are selected all at once,
 * and it can only be changed if another color isn't specified in the ID (which has a higher
 * specificity, and which needs to specify the "width" that should ALWAYS hold), this class is needed.
 */
.selectChartNormal { /* class of ID selectChart */
	/* A possible background color should be specified here, and NOT in #selectChart. */
}



.selectChartTooMany { /* class of ID selectChart */
	background: pink;
}



/* Must be placed BEFORE "option:hover" to not interfere with it. (See comment there.) */
option:checked {
	/* A background color for marked SELECT options can be set here. Doesn't work in
	 * MS Edge, and in Opera it only works if first clicking beside the SELECT list.
	 */
}



/* Must be placed AFTER "option:checked" for it to work on "option:checked". Then it works in Opera,
 * but only after clicking beside the SELECT list inbetween, and in MS Edge it doesn't worlk at all.
 */
option:hover {
	background: var(--myYellow);
	
	/* Set here and not at #selectChart because the first OPTION shouldn't
	 * have it, and it cannot be excluded at #diagramListFirstLine.  
	 */
	cursor: pointer;
	
	outline: red dashed 1px;
}



#diagramListFirstLine { /* the first OPTION row */
	background: var(--myGray);
	color: black;
	pointer-events: none; /* Removes the red, dotted line below the first OPTION row. */
	text-align: center;
}



.bigDiaHide { /* class of ID chartsDisplayArea */
	display: none;
}



/* "display: block" because "display: inline" or "display: initial" causes problems with borders
 * showing only in fractions and with unwanted top and bottom space, and "visibility: visible" does
 * not collapse when needing to instead hide it (with "visibility: hidden" or "visibility: collapse").
 */
.bigDiaShow { /* class of ID chartsDisplayArea */
	display: block;
}



#errorMsg {
	background: #ffff66;
	border-radius: 10px;
	color: red;
	font-size: 20px;
	font-weight: bold;
}



.errorMsgPadding { /* Added when an error msg, then removed to allow the element to shrink back to zero. */
	padding: 4px 8px 6px 8px;
}



#bigDiagramAndSelectedDiagramsCounter { /* Hide the images by default */
	color: red;
	font-size: 20px;
	font-weight: bold;
	position: relative; /* needed for vertical position of counter */
	text-align: center; /* horizontally centers the large image */
}



#bigDiagram {
	max-width: 100%;	
}



#numbertext { /* Number text ("1/3" etc) */
	background: black;
	border-radius: 10px;
	color: white;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	right: 0; /* disable if wanting thumbnail counter to the left */
	top: 0;
}



#captionContainer { /* container for image text and arrows */
	background: black;
	color: white;
	display: inline-flex; /* "inline", "inline-block", "table" are all wrong */
	position: relative; /* needed for back and forward arrows */
	text-align: center;
	width: 100%;
}



#leftCaptionCol,
#rightCaptionCol {
	height: 85px;	
	width: 50px;
}



#midCaptionCol {
	margin: 0 15px 0 15px;
	width: 100%;
}



#caption {
	margin: 7px 0 0 0;
}



#prev,
#next { /* Next & previous buttons */
	border-color: var(--myChocolate);
	border-style: solid;
	cursor: pointer;
	color: white;
	font-weight: bold;
	font-size: 20px;
	padding: 16px 17px 16px 15px;
	position: absolute;
	top: 20%;
}

#prev { /* the left arrow button */
	border-radius: 0 99px 99px 0;
	border-width: 0px 4px 0px 0px;	
	left: 0;
}

#next { /* the right arrow button */
	border-radius: 99px 0 0 99px;
	border-width: 0px 0px 0px 4px;
	right: 0;
}

#prev:hover,
#next:hover {
	border-color: white;
	color: red;
}



#thumbnailRow {
	/* Use "margin: -5px 0 0 0" (thus a negative margin) to get rid of the page background space between
	 * the horizontal black bar and the thumbnails. All other ways have been tried, with no success.
	 * However, it was later decided that the space is desired in order to not make the caption seem to
	 * belong to the thumbnail image below it, rather than the large image above it (to which it belongs).
	 */
	
	padding: 0 0 11px 0;
}



/* Causes a container to expand/surround an image (instead of the image extending outside of the container). */
.clearfix::after { /* class of ID thumbnailRow */
	clear: both;
	content: "";
	display: table;
}



.thumbnailCol { /* thumbnail columns side by side */
	border: 5px solid black; /* background for the dotted red and green borders around the thumbnails */
	float: left;
}



.thumbnails {
	cursor: pointer;

	/* If this can be allowed from a safety point of view (exposing directory structure), 
	 * then it's a nice way for the user to be able to drag an image to another web page.
	 */
//	user-drag: none; /* Doesn't seem to have any effect. */

	width: 100%; /* needed */
}

.thumbnails:hover,
.newAndOldCheckbxAndTxt:hover {
	outline: red dashed 5px;
}



/* Only used in luftstat_lang.js. Added to and removed from the same classList that contains class "thumbnails". */
.thumbnailLikeActive {
	cursor: pointer;
	
	/* Will not work if an "img.gB {outline: 1px solid green;}" is created at the top of this .css page. */
	outline: var(--myGreen) dashed 5px;
}



/* Container for footer (one of three page main division containers, the other two being #topArea and #mainArea). */
#footer {
	/* Background color is set by one of several ".mainStyle_[digit]"
	 * which are set in JS after triggering by the color change button.
	 */ 
	
	/* There's no need to use "bottom" here in the footer. A line or vertical
	 * scrollbar showing up should be regulated by "min-height" in #mainArea.
	 */
	
	padding: 0px 7px 14px 14px;
	position: absolute;
	
	/* For the text "Luftstat.com 2022" and the content (container) of ".emailAddrWideBox"
	 * (which is ".centeredEmailAddrBox"). To left-align instead of centering, comment
	 * out this and "margin: 0 auto" in ".centeredEmailAddrBox".
	 */	
//	text-align: center;
	width: 100%;
}



.emailAddrWideBox { /* Made a class to allow for convenient duplication in case of image resolution testing. */
	display: flex;
}



.centeredEmailAddrBox { /* Made a class to allow for convenient duplication in case of image resolution testing. */
	display: flex;
	
	/* Together with "text-align: center" in "#footer", centering the text "Luftstat.com 2022"
	 * and the content (container) of ".emailAddrWideBox" (which is ".centeredEmailAddrBox").
	 * To left-align instead of centering, comment out this and "text-align: center" in "#footer".
	 */	
//	margin: 0 auto;
}



.atSignLocationBox { /* Made a class to allow for convenient duplication in case of image resolution testing. */
	height: 20px;
	position: relative;
	
	/* If less than the width of the #at ID, moves the @ sign closer to the letter following
	 * to its right. Affected by "left" in #at. 18px is good if "left: -1px" in #at.
	 */
	width: 18px;
}



#at {
	/* 180 is good. Unnessary steps up would be 300 and 600. Step down are 120, 96, 60. */
	background-image: url("../base/white shaded 844 @ 180.png");

	/* "background-size: contain" (or "background-size: 100%") 
	 * shrinks or enlarges any size image to the set width.
	 */	
	background-size: cover;
	
	height: 20px; /* 20px is good */
	
	/* If less than 0, moves the @ sign closer to the letter preceding it. -1px is good.
	 * Also affects the space to the right of the @ sign, which is set in #relativeBox.
	 */
	left: -1px;
	
	position: absolute;
	top: 3px;
	width: 20px; /* 20px is good */
}