/* - - - - - - + + + - - - - - - //
// styles.css                    //
// - - - - - - + + + - - - - - - */

/* - - - - - - + + + - - - - - - //
// navbar-fixed.css = copy of template: https://getbootstrap.com/docs/5.3/examples/navbar-fixed/ 
// - - - - - - + + + - - - - - - */

/* Show it is fixed to the top */
body {
  min-height: 75rem;
  padding-top: 4.5rem;
}

/* - - - - - - + + + - - - - - - //
// Fonts                         //
// - - - - - - + + + - - - - - - */

@font-face {
  font-family: "Georgia_W99_Regular";
  src: local("Georgia"), local("Georgia Regular"), url("/fonts/Georgia_W99_Regular.woff2") format("woff2"),
    url("/fonts/Georgia_W99_Regular.woff") format("woff"), url("/fonts/Georgia_W99_Regular.eot") format("embedded-opentype");
}

@font-face {
  font-family: "Georgia_W99_Italic";
  src: local("Georgia Italic"), url("/fonts/Georgia_W99_Italic.woff2") format("woff2"), url("/fonts/Georgia_W99_Italic.woff") format("woff"),
    url("/fonts/Georgia_W99_Italic.eot") format("embedded-opentype");
}

@font-face {
  font-family: "Georgia_W99_Bold";
  src: local("Georgia Bold"), url("/fonts/Georgia_W99_Bold.woff2") format("woff2"), url("/fonts/Georgia_W99_Bold.woff") format("woff"),
    url("/fonts/Georgia_W99_Bold.eot") format("embedded-opentype");
}

@font-face {
  font-family: "Georgia_W99_Bold_Italic";
  src: local("Georgia Bold Italic"), url("/fonts/Georgia_W99_Bold_Italic.woff2") format("woff2"), url("/fonts/Georgia_W99_Bold_Italic.woff") format("woff"),
    url("/fonts/Georgia_W99_Bold_Italic.eot") format("embedded-opentype");
}

/* - - - - - - + + + - - - - - - //
// Main                          //
// - - - - - - + + + - - - - - - */

h1 {
  font-family: "Georgia_W99_Bold", serif;
  font-size: 32px;
  margin-top: 12px;
  margin-bottom: 18px;
}

p {
  padding: 0;
  margin-top: 6px;
  margin-bottom: 12px;
}

/* Silvr blue = #0096ff */
.tsilvr {
  font-family: "Georgia_W99_Bold", serif;
  font-size: larger;
  color: #0096ff;
}
.tsb {
  /* Text Silvr Bold */
  font-family: "Georgia_W99_Bold", serif;
  font-size: larger;
  color: #c0c0c0;
}
.tsr {
  /* Text Silvr Regular */
  font-family: "Georgia_W99_Regular", serif;
  font-size: larger;
}
.tsrl {
  /* Text Silvr Regular Light */
  font-family: "Georgia_W99_Regular", serif;
  font-size: larger;
  color: black;
}
.tsrd {
  /* Text Silvr Regular Dark */
  font-family: "Georgia_W99_Regular", serif;
  font-size: larger;
  color: white;
}
.tsi {
  /* Text Silvr Italic */
  font-family: "Georgia_W99_Italic", serif;
  font-size: larger;
  color: #0096ff;
}
.ttl {
  /* Text Theme Light */
  color: black;
}
.ttr {
  /* Text Theme Dark */
  color: white;
}

ul {
  margin-bottom: 0;
}

.monospace {
  /* https://fonts.google.com/specimen/PT+Mono */
  /* font-family: 'Lucida Console', 'PT Mono', monospace; */
  font-family: "PT Mono", "Lucida Console", monospace;
  font-size: 0.9em;
  font-weight: normal;
  font-style: normal;
}

.mono {
  font-family: "Menlo", "Lucida Console", monospace;
  /* font-family: 'PT Mono', 'Lucida Console', monospace; */
  font-size: 0.9em;
  color: #0000ff;
  /* font-weight: normal;
	font-style: normal; */
}

.tso {
  /* color: #0a4; */
  color: #0096ff;
}

.tim {
  font-weight: bold;
}

.tit {
  font-family: "tridentityregular", "Open Sans", sans-serif;
  font-size: 1.8em;
}

.red_border {
  border: 1px solid red;
}
.note {
  font-size: smaller;
  color: #88d;
  font-style: italic;
}
.monocol {
  font-family: monospace;
  /* background-color: #f4f4f4; */
  /* border: darkgray solid 1px; */
  background-color: #eef;
  border: solid 1px #88d;
  /* padding: 1px; */
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 2px;
  padding-right: 2px;
  margin: 1px;
}
.mlink {
  font-family: monospace;
  /* font-size: 11pt; */
  /* font-size: smaller; */
  /* background-color: #fafaff; */
  /* border: solid 0.1px #88d; */
  /* border: solid 0.1px #cacacf; */
  padding-top: 0.1px;
  padding-bottom: 0.1px;
  padding-left: 2px;
  padding-right: 2px;
  margin: 1px;
  text-decoration: none !important;
}

/* a[target="_blank"]:after { */
/* content: " (external)"; */
/* font-family: 'FontAwesome';
   		content: " \f35d"; */
/* content: " \2197"; */
/* content: " [\2197]"; */
/* content: " \25F3"; */
/* content: " <span class=\"glyphicon glyphicon-new-window\"></span>"; */
/* } */
/*  */
/* a[target="_blank"]:after.arrow { content: " \25F3"; } */
/* a:after.arrow { content: " \25F3"; } */
a[target="_new"] {
  text-decoration: none !important;
}
a.no_decoration {
  text-decoration: none !important;
}
/* a.mlink {
  text-decoration: none !important;
} */

/* https://stackoverflow.com/questions/2409836/how-to-set-cursor-style-to-pointer-for-links-without-hrefs */
a:hover {
  cursor: pointer;
}

table.image_table {
  width: "100%";
  /* border: 1; */
}
table.image_table tbody td {
  text-align: center;
}
table.contents {
  /* border: 1px solid #888; */
  padding: 0;
  /* margin-bottom: 1rem; */
}
table.contents td {
  /* font-size: 14px; */
  white-space: nowrap;
  font-size: 1em;
  border: 1px solid #888;
  padding: 1px 4px;
}
table.contents th {
  /* font-size: 18px; */
  font-size: 1.2em;
  border: 1px solid #888;
  color: lightblue;
  white-space: nowrap;
  padding: 1px 4px;
}
.margin_above {
  margin-top: 16px;
}
.less_margin_below {
  /* margin-bottom: 8px !important; */
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* h5 {
  margin-bottom: 16px;
} */
.spacer {
  width: 100%;
  height: 1em;
  /* background-color: #ddf; */
}
.footer {
  color: #88d;
  /* font-style: italic; */
}
.linkimg {
  margin-bottom: 2px;
}
.linkimg_label {
  color: #88d;
}
.img_border {
  border: 1px solid #88d;
}

.sub_text {
  font-style: italic;
  color: darkgray;
}

/* - - - - - - + + + - - - - - - //
// https://stackoverflow.com/questions/24034588/static-html-website-bootstrap-multi-language-support
// - - - - - - + + + - - - - - - */
div.en,
div.nl {
  display: none;
} /* hide all elements with a language class */
div.en:lang(en),
div.nl:lang(nl) {
  display: block;
} /* show those elements <html lang="en"> */

span.en,
span.nl {
  display: none;
}
span.en:lang(en),
span.nl:lang(nl) {
  display: inline;
}

/* - - - - - - + + + - - - - - - //
// CSS Summary
// - - - - - - + + + - - - - - - //

# HTML:
<element class="class">	# use class to decorate multiple kinds of elements
<element id="id">		# us id to decorate one unique element

# CSS:
.class {}
#id {}
element.class {}
element#id {}

# from the Lynda.com CSS course:

# box model
+------------------------------------------------------------------+
|margin                                                            |
|       +---[ border of 'border-box' ]--------------------------+  |
|       |padding                                                |  |
|       |        +---[ width/height of 'content-box' ]-------+  |  |
|       |        |content                                    |  |  |
|       |        +-------------------------------------------+  |  |
|       |                                                       |  |
|       +-------------------------------------------------------+  |
|                                                                  |
+------------------------------------------------------------------+

TOTAL-width = left-border + left-padding + CONTENT-width + right-padding + right-border

# NOTE: margin is outside the box, vertical-margin is collapsed between multiple elements

box-sizing: content-box; # this is default: content-size is set directly and total-size is calculated (add border/padding)
box-sizing: border-box;  # total-size is set directly and content-size is calculated (substract border/padding)

.cbox{ width: 300px; padding: 10px; border 1px solid black; box-sizing: content-box; } # total-width = 322px
.bbox{ width: 300px; padding: 10px; border 1px solid black; box-sizing: border-box;  } # total-width = 300px

# marging/padding:
padding-top:    1px;
padding-right:  2px;
padding-bottom: 3px;
padding-left:   4px;
# shorthand notation:
padding: top right bottom left;  # all individual seperated with spaces in direction of clock
padding: top (right+left) bottom;
padding: (top+bottom) (right+left);
padding: (top+bottom+right+left);

# unit of measurement:
 px = pixels
 em = normal size of text (1em)
p {font-size: 1em;}
# suggested way to size fonts relative to user-device-setting:
body {font-size: 100%;  }
h1   {font-size: 1.6em; }
h2   {font-size: 1.4em; }
h3   {font-size: 1.2em; }
p    {font-size: 1em;   }

# Positioning:
- Normal flow			# position: static|relative|absolute|fixed|inherit (static='normal flow', inherit='from parent element')
- Element floating      #
- absolute positioning  #

.trid_blue  {background: #0054A6;}
.trid_green {background: #00AB4E;}
.trid_lblue {background: #E6F2FF;}

// - - - - - - + + + - - - - - - */

/* https://dev.to/whitep4nth3r/the-best-lightdark-mode-theme-toggle-in-javascript-368f */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/:root */
/* 
:root {
  --grid-unit: 1rem;
  --border-radius-base: 0.5rem;
}

[data-theme="light"] {
  --color-bg: #ffffff;
  --color-fg: #000000;
}

[data-theme="dark"] {
  --color-bg: #000000;
  --color-fg: #ffffff;
}

body {
  background-color: var(--color-bg);
  color: var(--color-fg);
}
*/

/* - - - */

/* - - - - - - + + + - - - - - - //
// moved-not-inline.css = copy of template: https://getbootstrap.com/docs/5.3/examples/navbar-fixed/ 
// - - - - - - + + + - - - - - - */

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: rgba(0, 0, 0, 0.1);
  border: solid rgba(0, 0, 0, 0.15);
  border-width: 1px 0;
  box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1), inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -0.125em;
  fill: currentColor;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.active {
  /* color: purple; */
  border-bottom: 3px solid #fff;
}

.active {
  /* color: purple; */
  border-bottom: 3px solid #0096ff;
}

.btn-bd-primary {
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #6528e0;
  --bs-btn-hover-border-color: #6528e0;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #5a23c8;
  --bs-btn-active-border-color: #5a23c8;
}

.bd-mode-toggle {
  z-index: 1500;
}

.bd-mode-toggle .dropdown-menu .active .bi {
  display: block !important;
}

/* - - - - - - + + + - - - - - - //
//-eof
// - - - - - - + + + - - - - - - */