/* --- light mode settings --- */
:root {
  --link-color: #0066ff; /* Default link color for light mode */
}

/* --- inherit color-scheme from browser --- */
@media (prefers-color-scheme: dark) {
	:root {
		--link-color: #6ba3ff; /* Dark mode link color */
	}
	/* todo: switch to using variables for colors */
	body { background: #333; color: #ccc; }
	p b { color: white; }
	div b { color: white; }
	/*table { border: 1px solid LightSteelBlue; }*/
	table { border: 1px solid white; }
	table th { background-color: DarkBlue; }
	.ipa { color: white; }	
}
/*
@media (prefers-color-scheme: dark) {
	filter: invert(100%);
}
*/
/* ---------- regular table styles ---------- */
table {
	border: 1px solid blue;
	margin-left: auto;
	margin-right: auto;
	border-radius: 7px;
}
th {
	background-color: LightSteelBlue;
	line-height: calc(var(--lineHeight) + 0.2);
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 7px;
}
td {
	border: 0px solid black;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	text-align: left;
	line-height: 1;
/*	line-height: calc(var(--lineHeight) - 0.2);*/
}

/* ---------- alphabet table styles ---------- */
/* where is it used ? */
table.alphabet {
	font-family: NotoSans;
}
table.alphabet th, td {
	text-align: center;
	/*font-size:10pt;*/
	padding: 3px 8px 3px 8px;
	font-size: var(--fontSizeIPA);
}
table.alphabet tr:hover {
	background-color: lightgrey;
}

/* ------ downloads table ------ */
table.downl {
	margin:auto;
	margin-bottom: 1em;
	border-collapse:collapse;
	padding: 5px;
}
table.downl th {
	background-color: slateblue;
	border: 1px solid slateblue;
	padding: 5px 25px; /* top=bottom=5px and right=left=25px */
	border-radius: 0px;
}
table.downl td {
	padding: 5px;
	border: 1px solid slateblue;
}

/* ------ hr, blockquotes ------ */
hr {
	height:0;
	border:0;
	margin:0;
	margin-left: 10px;
	margin-right: 10px;
	border-top: 1px solid #ccc;
}

/* --- blockquotes --- */
/* where are these used ? */
blockquote.bq1 {
	font-family: NotoSans;
	font-size: 0.8em;
	border-left: 3px solid #ccc;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 30px;
	padding-left: 15px;
} 
blockquote.bq2 {
	font-family: NotoSans;
	font-size: 0.8em;
	color: dimgray;
	border: 1px solid blue;
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
	padding: 10px 10px 10px 10px;
	border-radius: 7px;
}

/*
blockquote.bq1 ipa { font-size: 1em; }
blockquote.bq2 ipa { font-size: 1em; }
*/
/*
blockquote.bq1 ul li ipa { color: black; font-size: 1em; }
blockquote.bq2 ul li ipa { color: black; font-size: 1em; }
*/
/*
blockquote.bq2 p,
blockquote.bq2 ul li,
blockquote.bq2 ul li a,
blockquote.bq2 a {
	font-size: 1.2em;
}
*/

/* --- images --- */
/* centered, inside <figure> - to add caption */
img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	border-radius: 8px;
	max-width: 90%;
	height: auto;
}
figure {
	margin:0;
}
figcaption {
	text-align: center;
	color: dimgray;
	font-family: var(--textFontFamily);
	font-size: 10pt;
}
figcaption a {
	/*font-family: NotoSans;*/
	font-family: var(--textFontFamily);
	font-size: 10pt;
}

/* --- colored text --- */
red { color: red; }
blu { color: blue; }
grn { color: green; }
yel { color: yellow; }
blk { color: black; }
gry { color: gray; }


/* modified <b> tag to change text color to black */
b {
	color: black;
	font-weight: bold;
}
/* .ipa class already defined in layout.css */
/*
.ipa { 
	/*font-family: NotoSans;* /
	font-family: var(--ipaFontFamily);
	font-size: var(--ipaFontSize);
	font-size: 1.0em;
	color: black;
}
*/

/* div.ipa, p ipa { */
div.ipa { 
	display: inline;
	/*font-family: NotoSans;*/
	font-family: var(--ipaFontFamily);
	font-size: var(--ipaFontSize);
	color: black;
	font-size: 0.8em;
}

p.source {
	font-style:italic;
	font-weight:0.9em;
	color:gray;
}

/* --- monospaced text --- */
pre {
	/*font-family:NotoSansMono;*/
	/*font-family:NotoSansMono_ExtraCondensed;*/
	font-family: var(--monoFontFamily);
	font-size: var(--monoFontSize);
	white-space: pre-wrap; 
	overflow-x: auto; 
}
.mono {
	/*font-family:NotoSansMono_ExtraCondensed;*/
	font-family: var(--monoFontFamily);
	font-size: var(--monoFontSize);
	font-size:1em;
	color:black;
/*	border:1px solid red;*/
}

/* --- centering --- */
div.ctr {
	display: flex;
	justify-content: center;
	font-size:1em;
}

/* parent: centered ; child: adjusted to left */
div.cen { 
	text-align: center; 
}
div.lft {
	/*	display: inline-block; */
	display: flex;
	justify-content: left;
	/*text-align: left;*/
}
div.rgt {
	display: flex;
	justify-content: right;
	/*text-align: right;*/
}

div.border {
	border: 1px solid red;
}

/* ------------ modal image - pop up 100% ------------ */
/* unsused */
.modalImg {
	/*  border-radius: 5px; */
	cursor: pointer;
	transition: 0.3s;
}
.modalImg:hover {
	opacity: 0.8;
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
/* The Modal (background) */
.modal {
	display: none;
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding: 0px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%; 
	/*  overflow: auto; /* Enable scroll if needed */
	overflow-y: scroll; /* Show vertical scrollbar */
	overflow-x: scroll; /* Show horizontal scrollbar */
	background-color: rgb(0,0,0); /* Fallback color */
	/*  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
	display: block;
	/*  margin: auto; */
	margin-left: auto;
	margin-right: auto;
	padding:0;
	background: white;
	width: 100%;
	/*	object-fit:fill; */
	/*  max-width: 700px; */
}
/* Add Animation */
.modal-content {
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s;
}

/* unused ? */
@-webkit-keyframes zoom {
	from {-webkit-transform:scale(0)}
	to {-webkit-transform:scale(1)}
}
@keyframes zoom {
	from {transform:scale(0)}
	to {transform:scale(1)}
}

/* The Close Button */
/*
.close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}
.close:hover,
.close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}
*/

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
	.modal-content {
		width: 100%;
	}
}

/* ------------ disable auto-scaling images ------------ */
/* how to use:
<div class="flxdiv">
	<div class="divimg">
		<img class="bigimg" src="..." ... >
	</div>
</div>
*/

/* container div */
.flxdiv {
	/*	display: flex; */
	display: none;
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding: 0px;
	justify-content: center; 
	/*align-items: center;*/
	/*	margin:0px;
	padding:0px;*/
}
/* unsused */
.divimg { /* child div */
	flex-shrink: 0;
	overflow: auto; /* Enable scroll if needed */
	align-self: center;
	object-fit:fill;
}
.bigimg {
	/*	flex-shrink: 0; /*doesnt work*/
	display:block;
	overflow: auto; /* Enable scroll if needed */
	width: 100%; /**/
	background:white;/**/
}

/* ------ link sstyles ------ */
/* all links, both LOCAL and GLOBAL */
/* LOCAL links - no underline */
a {
	/*color: Indigo;*/
	color: var(--link-color);
	text-decoration: none;
}
a:hover {
	font-weight:bold;
	text-decoration: underline;
}
a:visited {
	color: darkgrey;
}
/* GLOBAL links */
/* a[href*='//']{ } / * applies to to both http and https */
a[href^=http] {
	/*color: DarkBlue;*/
	text-decoration: underline;
	font-weight: bold;
}
/* WIKIPEDIA links */
a[href^="https://en.wikipedia"] {
	/*color: Blue;*/
	text-decoration: underline;
	font-weight: bold;
}
a[href^="mailto:"] { /* email link */
	font-style: italic;
}
a[href$=".pdf"] { /* PDF file */
	color: magenta;
}
a[href$=".zip"] { /* Archive file */
	color: magenta;
}
a[href$=".dmg"] { /* macOS package file */
	color: magenta;
}

/* Example external link symbol: ⤴  ⤴ ⤴ */
/*  the symbol "⎋" rotated for external links. */

/* Download icon: ⤓ (U+2913) HTML Entity:	&#10515; &#x2913; &DownArrowBar;*/

/* External link icon (maybe some day):
	“⤤” (U+2924) - North East Arrow with Hook
	“↗” (U+2197) - North East Arrow : &#8599; &#x2197; &UpperRightArrow;
	“➚” (U+279A) - Heavy North East Arrow : &#10138; &#x279A;
	“⤴” (U+2934)- Arrow Pointing Rightwards Then Curving Upwards: &#10548; &#x2934;
*/
/* 
a[href^="http://"]:after { 
    content:"\2197";
}
*/


/* is it still used? */
a.locallnk {
	/*	background: lavender;* /
	color: DarkMagenta; */
	/*color: Indigo;*/
	padding:3px;
	border-radius: 7px;
}

/* ------ other ------ */
b { color: black; }

/* ------ end ------ */