/* ------------------------------------------------------------------------- *
 * CSS for Bertrand's Website
 * ------------------------------------------------------------------------- */

/* Top level defines ------------------------------------------------------- */
body { background: #ddf; margin: 0; width: 100%;
  font: normal 12px Arial,sans-serif; text-align: justify; }

h1, h2, h3, h4 {clear: left; color: #0055A4 }
h1 { text-align: center;  margin: 40px auto; page-break-before: always;
  counter-reset: cntH2 cntH3 cntH4; }
h2 { border-bottom: solid 1px #0055A4; }
h3 { text-decoration: none; border-bottom: solid 3px #acf; color: #69e; }

body#number h2 { counter-reset: cntH3 cntH4 }
body#number h3 { counter-reset: cntH4; }
body#number h2:before { counter-increment: cntH2; content: counter(cntH2) ". "; }
body#number h3:before { counter-increment: cntH3; content: counter(cntH2) "." counter(cntH3) ". "; }
body#number h4:before { counter-increment: cntH4; content: counter(cntH2) "." counter(cntH3) "." counter(cntH4) ". "; }

p, tr, img { page-break-inside: avoid; }

b, .bold, .bold a { font-weight: bold; color: #0055A4; }
ul.bold span, ul.bold a, ul.bold ul  { color: initial; font-weight: normal; font-style: italic; }

ul.check > li { padding-left: 10px; }
ul.check > li::marker { color: #0055A4; content: "✓"; font-weight: bold; }
ul.check > li.opt::marker { content: "o"; }
ul.check > li.nope::marker { content: "x"; }

pre { background: #ddf; height: auto; padding: 4pt; border: solid 1px #aac;
  white-space: pre-wrap; word-wrap: break-word; text-align: left; }

body.abs #navTop {position: absolute; }
body.abs #logo {position: absolute; }

/* Toolbox classes --------------------------------------------------------- */
/*
 * Notes:
 *   .info (<p> <pre>) - border
 *   .note (<p>) - centered + border
 *   .important (<p> <pre>) - .note + red
 *   .tbd (<p>) - border + red
 */
p.tbd, p.important, pre.important {
  background: #fdd;
  border: solid 1px #caa;
  color: #833;
}

p.tbd, p.important {text-align: center}

p.note {text-align: center; text-indent: 0; border: solid 1px #AAA; font-style: italic; padding: 0 14px}

p.info, pre.info {
  padding: 4pt;
  text-indent: 0px;
  background: #eeb;
  border: solid 1px #caa;
  color: #833;
}

.red   {color: #d44 !important}
.green {color: #484 !important}
.blue  {color: #44d !important}
img.leftImg {float:left; margin:0 12px 12px 0}

/* Pre formating:
 * .rem - gray
 * .red - red
 * .input - blue
 * .cmd - shell command (blue + $>)
 * .cmdroot - cmd + red
 * .add , .del - diff modes
 * .FileName, .FileTxt  - Files
 * .SqlQry, SqlQryCont - SQL command
 */
pre.FileName {
  color:#660;
  background:white;
  margin-bottom:0;
  padding-left:16px; padding-right:16px;
  border-color:#dda; border-bottom:0;
  border-top-left-radius:12px; border-top-right-radius:12px;
  display:table;
}
pre.FileName img, table.alt img { height:16px; vertical-align:middle }
pre.FileTxt  {background:#ffc; border-color:#dda; margin-top:0}


pre .rem {color: #666}
pre .cmd, .input {color: #338}
pre .cmd:before {content: "$> "}
pre .cmdroot {color: #d44}
pre .cmdroot:before {content: "#> "}
pre .input {font-weight:bold}

pre .del {text-decoration: line-through; color: #d44}
pre .add {color: #4d4}

pre .SqlQry, pre .SqlQryCnt {color: #008}
pre .SqlQry:before {content: "[]> "}
pre .SqlQryCnt:before {content: " -> "}

/* Tables formating -------------------------------------------------------- */
/* .alt - blue decoration, with borders
 * .nodeco - invisible (formating support)
 */
table td.center, table th.center {text-align: center !important;}
table td.number, table th.number {text-align: right !important;}

table.alt, table.nodeco {border-collapse: collapse}
table.alt, table.alt th {border: 1px solid #aac}
table.alt td {color: #008; border-right: 1px solid #aac;  padding: 2px 4px; text-align: left;}
table.alt th {background-color: #ddf; color: #448; padding: 6px 4px;
  text-align: center; vertical-align: middle}
table.alt tbody tr:nth-child(even) { background-color: white }
table.alt tbody tr:nth-child(odd) { background-color: #eef}

table.alt.gray, table.alt.gray th, table.alt.gray td {border-color: #bbb}
table.alt.gray th {background-color: #dde; color: #446; }
table.alt.gray td {color: #335; }
table.alt.gray tbody tr:nth-child(odd) { background-color: #eee}

table.nodeco td:first-of-type {width:200px; padding-right:8px}
table.nodeco td img {width:140px; display: block; margin: auto}

table.simple {color: #0055A4; text-align: left; border-spacing: 0; }
table.simple td, table th {padding:0 8px; vertical-align: top; }
table.simple th {border-bottom: solid 1px #0055A4; font-weight: bold; padding-top:6px}
table.simple td {text-align:left}
table.simple b {font-size: 13px;}
table.simple i {color: #666;}

table.bom td, table.bom th { padding: 6px 6px 0 6px; vertical-align: baseline; }
table.bom td:nth-child(1) { text-align:center; vertical-align: top; }
table.bom td:nth-child(2) { font-weight: bold; text-align:center; }
table.bom td:nth-child(4), table.bom td:nth-child(5) { font-style:italic }
table.bom td:nth-child(5), table.bom td:nth-child(6), table.bom td:nth-child(7) { text-align:right }
table.bom td:nth-child(6) { font-style:italic; color: #888 }
table.bom td:nth-child(7) { font-weight:bold; font-size: 1.2em; }
table.bom td:nth-child(1) img { width: 48px; height: 48px; object-fit: contain;
    border: solid 1px #ccc; border-radius: 8px; background: white; }
table.bom tr.rem, table.bom tr.rem * {color: #888}
table.bom tr.rem img {opacity: 0.5;}
table.bom tr.err {color: #f88}
table.bom td.total { border-top: solid 1px; color: #888; }

table.hidden td { vertical-align: top; border-collapse: collapse; }
table.hidden td.pict { padding-right: 16px; padding-top: 3px; }
table.hidden td.pict img { padding: 8px; width: 160px; height: 160px; background:white;
  border-radius: 32px 0; border: solid 1px gray; box-shadow: 2px 2px 8px #888; object-fit: contain; }
table.hidden td.small img { width: 80px; height: 80px; }
table.hidden td.large img { width: 400px; }

/* Front cover ----------------------------------------------------------------
   for print only, 1st page (also adds picture on screen) */
#FrontCover { position: relative; margin: 32px auto; padding: 0; text-align: center; }
#FrontCover > * { position: relative; display: none; vertical-align: top; object-fit: cover; }
#FrontCover > img.cover { display: inline-block; width: 60%; border: solid white 8px; box-shadow: 3px 3px 6px 2px #0008; }

@media print {
  #FrontCover {  
    margin: 32px 0; height: 460px; width: 100%;
    border-top: solid 4px #7eb7f0; border-bottom: solid 4px #7eb7f0;
  }
  #FrontCover > img.bg {
    position: absolute; display: block; top:0; width: 100%; right:0; height: 100%;
  }
  #FrontCover > img.cover {
    max-width: 45%; margin: 40px; border: solid #7eb7f0 4px; border-radius: 20px;
    box-shadow: 3px 3px 6px 2px #0008;
  }
  #FrontCover > div.legend {
    display: inline-block; width: 35%; margin: 40px 10px; color: white;
    text-align: left; font-size: 40pt; font-weight: bold; text-shadow: 2px 2px 4px #000;
  }
}

/* Card deck --------------------------------------------------------------- */
.cardDeck { margin: 0px; }
.cardDeck.withTabs { margin: 20px 8px; }
.cardDeck.center > .cards { margin: 0 auto; }
.cardDeck > .tabs, .cardDeck > .cards { display: table; padding: 0;}

.cardDeck .tab { display: table-cell; color: #fff; background: #d6e3fa; cursor: pointer;
  min-width: 80px; padding: 6px 18px; font-size: 12pt; font-weight: bold;
  text-align: center; text-decoration: none; text-shadow: 0 0 3px #000;
  border: solid 1px #ccc; border-bottom: solid 2px #aaf; border-radius: 10px 10px 0 0; }
.cardDeck .tab.selected { color: #ff0; background: #fff !important; cursor: default;
  border: solid 2px #aaf; border-bottom: none !important; padding-bottom: 5px;
  vertical-align: bottom; }
.cardDeck .tab:hover { color: yellow; }
.cardDeck > .tabs .fill { display: table-cell; width: 100%; border-bottom: solid 2px #aaf; }

.cardDeck.withTabs > .cards { background: white; text-align: left; width: calc(100% - 4px);
  border: solid 2px #aaf; border-top: none !important; }
.cardDeck .card { display: inline-block; margin: 12px; background: #d6e3fa; animation: cardDeckFadeEffect 1.5s;
  vertical-align: middle; border-radius: 24px 0; box-shadow: 4px 4px 10px #4446; }
.cardDeck .card a { color: #fff; text-decoration: none; text-shadow: 0 0 3px #000; text-align: center;
  font-weight: bold; }
.cardDeck .card img { max-width: 64px; max-height: 64px; vertical-align: middle; }
.cardDeck .card div { width: 64px; height: 64px; padding: 16px; background: white;
  border: solid 1.5px #ccf; border-radius: 24px 0; text-align: center;
  vertical-align: middle; display: table-cell; }
.cardDeck .card p { margin: 2px 0 4px 0; text-indent: 0; }
.cardDeck .card:hover { margin: 14px 10px 10px 14px; background: #7eb7f0; box-shadow: 2px 2px 10px #7eb7f080;}
.cardDeck .card:hover a { color: yellow; }
.cardDeck .card:hover div { border-color: #7eb7f0; }

.cardDeck.yellow > .tabs .fill { border-bottom: solid 2px #fc8; }
.cardDeck.yellow > .tabs >.tab { background: #fed; border-bottom: solid 2px #fc8; }
.cardDeck.yellow > .tabs >.tab.selected,
.cardDeck.yellow.withTabs > .cards { border: solid 2px #fc8; }
.cardDeck.yellow > .cards > .card { background: #fed; }
.cardDeck.yellow > .cards > .card div {  border: solid 1.5px #fba; }
.cardDeck.yellow > .cards > .card:hover { background: #fc8; box-shadow: 2px 2px 10px #fc88; }
.cardDeck.yellow > .cards > .card:hover div { border-color: #fc8; }

.cardDeck.red > .tabs .fill { border-bottom: solid 2px #f8a; }
.cardDeck.red > .tabs >.tab { background: #fcd; border-bottom: solid 2px #f8a; }
.cardDeck.red > .tabs >.tab.selected,
.cardDeck.red.withTabs > .cards { border: solid 2px #f8a; }
.cardDeck.red > .cards > .card { background: #fcd; }
.cardDeck.red > .cards > .card div {  border: solid 1.5px #faa; }
.cardDeck.red > .cards > .card:hover { background: #f8a; box-shadow: 2px 2px 10px #f8a8; }
.cardDeck.red > .cards > .card:hover div { border-color: #f8a; }

.cardDeck.green > .tabs .fill { border-bottom: solid 2px #6fa; }
.cardDeck.green > .tabs >.tab { background: #cfd; border-bottom: solid 2px #6fa; }
.cardDeck.green > .tabs >.tab.selected,
.cardDeck.green.withTabs > .cards { border: solid 2px #6fa; }
.cardDeck.green > .cards > .card { background: #cfd; }
.cardDeck.green > .cards > .card div {  border: solid 1.5px #afa; }
.cardDeck.green > .cards > .card:hover { background: #6fa; box-shadow: 2px 2px 10px #6fa8; }
.cardDeck.green > .cards > .card:hover div { border-color: #7fb; }

.cardDeck.gray > .tabs .fill { border-bottom: solid 2px #666; }
.cardDeck.gray > .tabs >.tab { background: #dde; border-bottom: solid 2px #666; }
.cardDeck.gray > .tabs >.tab.selected,
.cardDeck.gray.withTabs > .cards { border: solid 2px #666; }
.cardDeck.gray > .cards > .card { background: #dde; }
.cardDeck.gray > .cards > .card div {  border: solid 1.5px #bbb; }
.cardDeck.gray > .cards > .card:hover { background: #888; box-shadow: 2px 2px 10px #8888; }
.cardDeck.gray > .cards > .card:hover div { border-color: #666; }

 @keyframes cardDeckFadeEffect { from {opacity: 0;} to {opacity: 1;} }

/* Flipcard ---------------------------------------------------------------- */
.flipboard { text-align: left; margin: 0 24px; }
.flipcard { display: inline-block; position: relative; width: 180px; height: 180px; }
.flipcard>span { position: absolute; width: 160px; height: 160px; margin: 8px;
  border-radius: 32px 0; border: solid 1px gray; box-shadow: 2px 2px 8px #888; }
.flipcard>span>img { position: absolute; width: 142px; height: 142px;
  top: 8px; left: 8px; right: 8px; bottom: 8px; border-radius: 26px 0; }
.flipcard>span>img.shift { object-fit: cover; object-position: 0 10px; }
.flipcard>div { position:absolute; left:0; right:0; margin:18px;}
.flipcard p { text-align: center; }
.flipcard p.title { font-size: medium; font-weight: bold; color: white; margin-top: 6px; text-shadow: 0 0 3px #222; }
.flipcard p.title > span { color: #ffa; }
.flipcard p.descr { display:none; line-height: 1.5em; padding: 0 16px;}
.flipcard:hover>span { margin: 10px 6px 6px 10px; box-shadow: 0 0 8px #318CE7;}
.flipcard:hover>span>img { filter: opacity(25%) contrast(0.7);}
.flipcard:hover p.title > span { color: yellow; }
.flipcard:hover p.title { animation-name: flipcardAnimTitle; /*animation-timing-function: ease-out;*/ animation-duration: 1s; }
.flipcard:hover p.descr { display:block;  animation-name: flipcardAnim; animation-timing-function: ease-out; animation-duration: 1.3s; }
.flipcard:hover>span { transition: transform 1s; transform: rotateY(180deg);}
//.flipcard:hover>span { -webkit-transition: -webkit-transform 1s; -webkit-transform: rotateY(180deg);}

.flipcard>span>img { background: #d6e3fa; border: solid 1px #CCC; }
.flipcard.yellow>span>img { background: #fed; }
.flipcard.yellow:hover>span { box-shadow: 0 0 8px #fd7; }

.flipcard.green>span>img { background: #cfd; }
.flipcard.green:hover>span { box-shadow: 0 0 8px #6fa; }
.flipcard.gray>span>img { background: #dde; }
.flipcard.gray:hover>span { box-shadow: 0 0 8px #8888; }

/* Image Picker ------------------------------------------------------------ */
div.imgPick { text-align: center; }
div.imgPick img, div.imgPick object { max-width: 100%; }
div.imgPick > a { display: inline-block; }
div.imgPick > .tabs > span { margin: 10px; position: relative; width: 120px;
    display: inline-block; cursor: pointer; }
div.imgPick > .tabs > span > img { filter: brightness(0.99) grayscale(1);
    margin: 0 auto; display: block; height: 90px; object-fit: contain; }
div.imgPick > .tabs > span.select > img { filter: none; }
div.imgPick > .tabs > span > span { position: absolute; margin: 12px;
    right: 0; left: 0; bottom: 0; font: bold 16pt sans-serif; color: #888;
    text-shadow: 1px 1px 1px white; }
div.imgPick > .tabs > span.select > span { color: #48e; }
div.imgPick > .tabs > span:hover > span { text-decoration:underline;
    color: #66e; }

/* InfoBox ----------------------------------------------------------------- */
/* Box providing basic icon + text + link info */
div.infoBox { display: inline-block; background: #fff8; border: solid 1px #666;
  border-radius: 10px; margin: 6px; padding: 4px;}
div.infoBox:hover { background: #ddf8; }
div.infoBox > a { text-decoration: none; display: inline-block; }
div.infoBox > a > img { width: 24px; height: 24px; object-fit: contain; 
  border-radius: 5px; margin: 0 6px; vertical-align: middle; }
div.infoBox > a:first-child > img { width: 32px; height: 32px;}
div.infoBox > a > div { display: inline-block; color: #444; width: 140px; 
  vertical-align: middle; }
div.infoBox > a > div > div {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
div.infoBox > a > div > div:first-child { font-weight: bold; color: #0055A4; }
 
/* Rounded box ------------------------------------------------------------- */
.rounded-box  {
  background:#ddf; color:#0055A4; display: inline-block; margin: 10px;
  vertical-align: top; text-align: center;
  border: solid 1px gray; border-radius: 36px 0;
  box-shadow: 4px 4px 8px #aaa;
}
a.rounded-box { text-decoration: none; }
a.rounded-box:hover {  box-shadow: 2px 2px 8px #318CE7; margin: 12px 8px 8px 12px; }

.rounded-box.red   { background:#fdd; color:#a55; }
.rounded-box.green { background:#dfd; color:#585; }
.rounded-box.gray  { background:#ddd; color:#444; }

.rounded-box > .label { margin:4px; font-weight:bold }
.rounded-box > .main { background: white; border-radius: 36px 0; text-align: left; padding: 6px; }
.rounded-box > .main > .pict { display: block; float: left; width: 56px; height: 56px;
      color: white; background: #aaf; border: solid 1px #55a8; border-radius: 36px;
      margin: 12px; font-size: 36pt; text-align: center; }
.rounded-box > .main > .pict > b { color: white; }
.rounded-box > .main > .content { display: block; }
.rounded-box > .main > span { display: inline-block; vertical-align: middle; }
.rounded-box input, .rounded-box textarea { font: normal 12px Arial,sans-serif; color: #666; }

.rounded-box select {
  color: #88c; background: #f8f8ff;
  border-color: #88c; border-radius: 9px;
  margin-top: -2px;
  padding: 0 2px;
}

.rounded-box td { padding: 4px; }
.rounded-box td.header {
  color: #0055A4; background: none;
  width: 100px;
  font-weight: bold; text-align: right;
  border: none;
}

.rounded-box .btn-bar { text-align: right; margin-right: 18px; clear: both; }
.rounded-box button       { background: #ddf; margin: 0px 6px; padding: 4px 12px; border: solid 1px gray; border-radius: 10px; opacity: 0.6; }
.rounded-box button:hover { opacity: 1; }
.rounded-box button.red   { background: #d85; }
.rounded-box button.green { background: #5d8; }

.rounded-box .foot {
  display: block;
  padding: 6px;
  text-align: center;
}

.blur { filter: blur(1px); }

/* Navigation bars --------------------------------------------------------- */
#navbar { position: fixed; top: 0; left: 0; right: 0; text-align: center; z-index: 2;
  background: #318CE7; border-bottom: 1px solid #05a; box-shadow: 0px 3px 5px #40404080; }
#navbar > a, #navbar > #navButton { background: none; border: none; display: inline-block; padding: 0; }
#navbar > a:hover { background: #5fa6ec; }
#navbar > a > span, #navbar > #navButton > span { display: inline-block; color: #fff; font-size: 12pt;
  font-weight: bold; text-decoration: none; border-left: solid 1px white;
  margin: 6px 0px; padding: 0 10px; text-shadow: 0 0 3px #444; }
#navbar > a:first-child > span { border-left: none; }
#navbar > a.select { cursor: text; pointer-events: none; }
#navbar > a.select > span { color: #ffe040; }

#navbar > #navButton.right { position: absolute; right: 0; }
#navbar > #navButton.right > span  { margin: 4px 10px 5px; border: none; }
#navbar > #navButton:hover, #navbar > #navButton:focus-within { background: #5fa6ec; }

.navChild { position: fixed; right: 0; max-width: min(33%, 350px); margin: 0;
  border: solid 1px #05a; border-top: solid 0.5px #888; color: #06a;
  border-radius: 0 0 0 18px; padding: 8px 8px 12px 12px; background: #5fa6ec;
  box-shadow: 0px 3px 5px #40404080; font-size: 11pt; text-align: right;
  opacity: 0; transform: translateX(50vw); transition: all 0.5s ease; }

#navbar > #navButton:hover > span,
#navbar > #navButton:focus-within > span { color: #ffe040; }

#navbar > #navButton:hover > .navChild,
#navbar > #navButton:focus-within > .navChild { opacity: 1; transform: translateX(0); }

.navChild > div { padding: 0 8px 6px 8px; }
.navChild > div a, .navChild > div i { text-decoration: none; font-style: italic; color: #ccf; }
.navChild > div a.select { color: #ee8; font-weight: bold; }
.navChild > div a:hover { color: #fff; text-decoration: underline; }
 
.navChild > .section { padding: 0; margin: 8px 0; font-weight: bold; 
  background: linear-gradient(90deg, #fff2, #fffa); }
.navChild > .section > span { background: white; padding: 0 4px; margin-left: 6px;
  border-radius: 10px 0 0 10px; box-shadow: 0px 2px 4px #40404080; }

.navChild > div.withIcon > * { vertical-align: middle; }
.navChild > div.withIcon   b { color: #ee8; }
.navChild > div.withIcon > img { width: 36px; height: 36px; padding: 4px; margin-left: 8px;
  background: white; vertical-align: middle; border-radius: 23px; border: solid 1px #06a;
  box-shadow: 2px 2px 5px #40404080; }

.navChild > #navSig { background: #8be; padding-right: 20px; padding-top: 6px;
  border-top: solid 1px #59d; border-bottom-left-radius: 18px; }
.navChild > #navSig > img { width: 110px; }

#navLeft { background: #ddf; bottom: 0px; width: 140px;
  border-right: 1px solid #aac; border-top: 60px solid transparent; }
#navLeft img { display:block; margin:0 auto; }
#navLeft a { font-size: x-small; padding: 2px 6px; color: #0055A4;
  text-decoration: none; }
#navLeft ul { width: 100%; top: 40px; bottom: 0; position: absolute;
  overflow: auto; margin: 0; padding: 0; list-style-type: none; }
#navLeft li:hover { background: #eef; }
#navLeft .group { margin: 12px 4px 4px 4px; text-align: center;
  background: #eef; border-bottom: 1px solid #0055A4;
  border-top: 1px solid #0055A4; }
#navLeft .group a { font-size: small; font-weight: bold; }
#navLeft .group:hover { background: #fff; }
#navLeft a.select { color: #a04; font-weight: bold; }
#navLeft li > input { color: #0055A4; background: #f8faff; width: 112px;
  margin: 2px 6px; padding: 2px 6px; border-width: 1px; border-radius: 10px;
  font-size: x-small; }
#navLeft li > input:focus { background: #fff; }

body > img#logo { position:fixed; top: 10px; left: 49px; width:42px; height:42px; z-index:9; }
@media print {
  body.printCover > img#logo {
    position: absolute; width: 80px; height: 80px; bottom: 0; left: 40px;
    top: unset !important; display: block !important;
  }
}

span#tstamp {
  display: block; text-align: right; font-style: italic;
  color: #aaa; border-top: 1px solid #aaa;
}

/* Icon support ----------------------------------------------------------- */
.icon { display: inline-block; position: relative; width: 176px; height: 176px; border-radius: 32px 0; border: solid 1px gray; margin: 8px; box-shadow: 2px 2px 8px #888; }
.icon>img, .icon>div { position: absolute;  top: 8px; left: 8px; right: 8px; bottom: 8px; border-radius: 26px 0; width: 160px; height: 160px; }
.icon p { margin-top: 18px; text-align: center; }
.icon p.title { font-size: medium; font-weight: bold; color: white; margin-top: 6px; text-align: center; text-shadow: 0 0 3px #222; }
.icon p.descr { display:none; line-height: 1.5em; padding: 0 16px;}
.icon:hover { margin: 10px 6px 6px 10px; box-shadow: 0 0 8px #318CE7; }
.icon:hover div { background: #ccfa; }
.icon:hover p.title > span { color: yellow; }
.icon:hover p.descr { display:block; }

/* Image gallery ---------------------------------------------------------- */
.gallery { text-align: center; }
.gallery a { position: relative; background: white; display: inline-block;
  text-align: center; vertical-align: middle; width: 150px; height: 180px;
  margin: 8px; padding: 10px; border: solid 1px #888; border-radius: 8px;
  box-shadow: 4px 4px 10px #666;}
.gallery a:hover { box-shadow: 2px 2px 10px #318CE7; margin: 10px 6px 6px 10px; }
.gallery p { font: 15px 'Arial'; font-style: italic; position: absolute;
  bottom: -6px; left: 0; right: 0; margin-top:10px; }
.gallery img { position: absolute; max-width:150px;  max-height:150px;
  top: 0; bottom: 20px; left: 0; right: 0; margin: auto; }

/* Content ---------------------------------------------------------------- */
#content { width: 80%; max-width: 800px; min-height: calc(100vh - 90px);
  background: #fdf8ff; margin: 0 auto; padding: 0; padding-bottom: 80px;
  box-shadow: 0px 0px 4px 2px #6664; position:relative; z-index: 1; }
#content > * { padding: 6px; }
#content > hr { padding: unset; }
#content > p, #content > a, #content > img { margin: 0 20px; }
#content > pre { margin-left: 20px; margin-right: 20px; }
#content > table { margin: 0 12px; border-spacing: 0px; }
#content > ul, #content > ol { margin: 0 48px; }
#content > .headline { padding: 0; clear: left; }
#content > .title { padding: 0 0 24px 0; }

#bottom { bottom: 12px; width: 100%; position: absolute; }

.title > div { width: fit-content; height: fit-content; background: #fff;
  border: solid 1px #666; border-radius: 0 0 70px 70px; border-top: none;
  margin: 0 auto; box-shadow: 0px 3px 5px rgba(64, 64, 64, 0.5);}
.title > div > span, .title > div > div { display: inline-block; width: 320px; text-align: center;
  border-radius: 0 0 60px 60px; border: solid 1px #666; border-top: none;
  margin: 0 10px 10px 10px; padding-top: 32px; }
.title .tmain { color: white; margin: 0.6em 0; font-size: 3em; font-weight: bold; text-shadow: 0 0 3px #444; }
.title .tmain > span { color:#ffe040 }
.title .tsub  { color: #05a; margin: 8px; text-shadow: none; font-size: 1.3em; font-weight: bold; font-style: italic; }

.headline { margin: 16px 0 4px; }
@media print { .headline { page-break-after: avoid; } }

.headline > span { display: inline-block; vertical-align: middle; }

.headline > .hd { display: inline-block; vertical-align: middle; width: 30%;
  border: solid 1px #888; border-radius: 0 82px 82px 0; border-left: none;
  box-shadow: 0px 2px 3px rgb(64 64 64 / 33%); }
.headline > .hd > img, .headline > .hd > a > img, .headline > .hd > span { width: 130px; height: 130px; object-fit: cover; background: white;
  border: solid 1px #888; border-radius: 76px; float: right; margin: 7px; padding: 10px }
.headline > .desc { display: inline-block; vertical-align: middle; 
  color: #0055A4; text-decoration: none; font-size: large; margin: 0 16px; }
.headline > .desc > ul { margin: -10px; }
.headline > .desc > ul > li { margin: .4em 0; font-size: 15pt;}
.headline > .desc span, .headline > .desc ul.bold ul  { color: #666; font-size: 12pt;}
.headline > .desc i { font-size: 11pt; color: #888; }
.headline > .desc > ul a { color: #08c; }
.headline > .desc > ul a:hover { color: #3bf; }

.headline > .btn {float: right; margin-top: 9px; margin-right: 6px; 
  padding: 9px; border: solid 1px #0055A480; border-radius: 18px;
  background: #fff6; color: #0055A4; cursor: pointer; }
.headline > .btn:hover { background: #fffd; }

.headline.small > .hd, .headline.smaller > .hd { width: 15%; }
.headline.small > .hd > img, .headline > .hd > span { width: 40px; height: 40px; margin: 4px; padding: 0; }

.headline.smaller > .hd { height: 8px; width: 24px; margin: 0 0 0 36px; border-radius: 5px; }
.headline.smaller > .desc { padding: 4px 0; font-weight: normal; }

.headline.right { text-align: right; }
.headline.right > .hd { border: solid 1px #888; border-radius: 82px 0 0 82px; border-right: none;}
.headline.right > .hd > img { float: left; }

.headline.sub { display:inline-block; right: 0; margin-top: 4px; position: absolute; }
.headline.sub >.hd { width: 100px; display: inline-block; margin-top: 4px; }
.headline.sub >.hd > img { width: 32px; height: 32px; padding: 4px; margin: 4px;}
.headline.sub >.hd > span { border: unset; background: unset; height: unset; /*width: unset;*/ color: #666;
  text-align: center; margin-top: 15px; font-size: larger; font-weight: bold; }
.headline.sub >.hd:hover { background: #7eb7f080; }
.headline.sub >.hd:hover > span { color: #0055A4; }
.headline.top > .desc { vertical-align: top; padding-top: 20px; }

.title > div > span, .title > div > div { background: #7eb7f0; }
.title > .tsub { color: #62a; }
.headline { background: #d6e3fa; }
.headline > .hd { background: #7eb7f0; }

.title.yellow > div > span, .title.yellow > div > div { background: #fd7; }
.title.yellow .tsub  { color: #a06000; }
.headline.yellow { background: #fed; }
.headline.yellow > .hd { background: #fd7; }
.yellow b, .yellow .bold, .yellow .bold a { color: #a82; }

.title.green > div > span, .title.green > div > div { background: #6fa; }
.title.green .tsub  { color: #00a060; }
.headline.green { background: #cfd; }
.headline.green > .hd { background: #6fa; }
.green b, .green .bold, .green .bold a { color: #0b4; }

.title.red > div > span, .title.red > div > div { background: #f8a; }
.title.red .tsub  { color: #a00060; }
.headline.red { background: #fcd; }
.headline.red > .hd { background: #f8a; }
.red b, .red .bold, .red .bold a { color: #b06; }

.title.gray > div > span, .title.gray > div > div { background: #bbb; }
.title.gray .tsub  { color: #444; }
.headline.gray { background: #e0e0e8; }
.headline.gray > .hd { background: #bbb; }
.gray b, .gray .bold, .gray .bold a { color: #666; }

/* Media popup -------------------------------------------------------- */
#mediaContent, #mediaNav { position: fixed; top:31px; bottom: 0; display: none; background: #fdf8ff; }
#mediaContent { left: 140px; right: 0; }
#mediaContent > object { display: block; width: 100%; height: 100%; }

#mediaNav { left: 0; width: 140px; color: #0055A4; text-align: center; padding-top: 48px; }
#mediaNav > div.hdr { color: #0055A4; background: #f6f0ff; font-weight: bold; font-size: 1.3em;
  padding: 4px 0; margin: 20px 6px 6px 6px; border-top: solid 1px; border-bottom: solid 1px; }
#mediaNav > a { display: block; font-style: italic; text-decoration: none; color: unset; margin-top: 3px; }
#mediaNav > a.selected { color: #f5a; }
#mediaNav > a:hover { text-decoration: underline }
#mediaNav > a.close { text-align: left; margin-left: 12px; }

/* Modal dialog ------------------------------------------------------------ */
.modal {
  display: none;
  position: fixed;
  z-index: 30;
  left: 0;     top: 0;
  width: 100%; height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: #ccc;
  background-color: #0004;
}

.modal >.rounded-box { width: 40%; min-width: 280px; max-width: 400px; margin: 90px auto 0; display:block; }

.modal > form {
  background-color: #eef;
  margin: 60px auto 30px auto;
  border: 1px solid #aac;
  width: 80%;
  max-width: 500px;
}

.modal input[type=text], .modal textarea, .modal select {
  width: 100%;
  padding: 0 3px;
  display: inline-block;
  box-sizing: border-box;
}

.modal input[type=text].number {
  width: 60px;
  text-align:right;
}

.modal input[type="date"] { display: block; margin: 0px auto; }

.modal .title {
  background-color: #cce;
  color: #0055A4;
  border-bottom: 1px solid #aac;
  padding: 6px 6px 6px 32px;
  text-align: center;
  font-size: 14pt;
  font-weight: bold;
}

.modal table {
  width: 100%;
}

.modal td {
  padding: 4px;
}

.modal td.header {
  background-color: #ddf;
  color: #0055A4;
  width: 100px;
  border-right: 1px solid #aac;
  text-align: right;
  font-weight: bold;
}

.modal .foot {
  display: block;
  background-color: #cce;
  border-top: 1px solid #aac;
  padding: 6px;
  text-align: center;
}

.modal button {
  display: inline;
  color: white;
  opacity: 0.6;
  margin: 0 12px;
  padding: 4px 8px;
  border: none;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}

.modal button:hover, .modal button:focus {
  opacity: 1;
}

.modal button.green {
  background-color: #5d8;
}

.modal button.red {
  background-color: #e88;
}

.modal button.cancel {
  background-color: #e88;
  float:right;
  margin: 0;
}

/* Animation --------------------------------------------------------------- */
.animate {
  animation: animatefadein 0.6s;
}

@keyframes animatefadein {
  from {opacity: 0;}
  to   {opacity: 1;}
}

@keyframes animatezoomin {
  from {transform: scale(0);}
  to   {transform: scale(1);}
}

    @keyframes iconAnim { from { opacity: 0.1; transform: scale(0.1); } to { opacity: 1.0; transform: scale(1.0); } }
    @keyframes flipcardAnim { 0% {opacity: 0.1; transform: scale(0.1);} 40% { opacity: 0.1; transform: scale(0.1); } 100% { opacity: 1.0; transform: scale(1.0); } }
    @keyframes flipcardAnimTitle { 0% {transform: rotateY(0);} 50% {transform: rotateY(90deg);} 100% { transform: rotateY(0);} }

/* Media specific ---------------------------------------------------------- */
@media (max-width: 750px) {
  #navLeft { display:none; }
  body.hasNavLeft { margin: 66px 8px 40px 8px; }
  /*#navTop ul { display:none; transition: height 600ms; } */
}

@media screen and (max-width: 900px) {
  .bigscreen {
    display: none;
  }
}

@media print {
  @page { 
    counter-increment: page;
    size: A4 portrait; 
    margin: 40px 0;

    @bottom-center { content: "Page " counter(page); margin-bottom: 26px; }
  }
  @page :first {
    counter-reset: page -1 pages -1;
    @bottom-center { content: ""; }
  }

  body { background: none; width: 100%; margin: 0; }

  #content { width: 100%; max-width: unset !important; padding:0; margin: 40px 0 0 0; box-shadow: none; background: none; }
  #content > * { padding: 0 60px; }
  #content > .title { margin: 80px 0 0 0; }
  #content > .title > div { border-radius: 70px; box-shadow: 0px 4px 16px 2px #4448; }
  #content > .title > div > span { border-radius: 60px; margin: 10px; padding: 40px; font-size: 1.4em; }

  #content > .headline { break-before: page; break-after: avoid; padding:0; margin: 16px 0; }
  #content > .headline.vspaced { margin: 80px 0; }
  #content > .headline.smaller:not(.newPage) { break-before: unset; }
  #content > h3 { break-after: avoid; }

  #content > #bottom { background: none; position: fixed; width: unset;
    margin: 0 0 2px; bottom: 0; right: 0; left: 0; }

  table { page-break-inside: avoid; }
  div.imgPick > .tabs > span { width: 30% !important; }
  div.imgPick > .tabs > span.select { display: none; }
  div.imgPick > .tabs > span > img { filter: none; height: 200px; }
  div.imgPick > .tabs > span > span { display: none; }

  .noprint { display:none !important }
}