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

/* Top level defines ------------------------------------------------------- */
body {
  background: rgba(253, 248, 255, 1);
  margin: 64px auto 8px auto;
  font: normal 12px Arial,sans-serif;
  text-align: justify;
  max-width: 80%;
}

body.hasNavLeft {
  margin: 64px 8px 8px 152px;
  max-width: none;
}

h1 {
  text-align: center;
  margin: 40px auto;
  counter-reset: cntH2 cntH3 cntH4;
  page-break-before: always;
}

h2 { border-bottom: solid 1px #0055A4; }
h3 { text-decoration: underline; }

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) ". "; }

h1, h2, h3, h4 {clear: left; color: #0055A4 }

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

b, .bold {
  font-weight: bold;
  color: #0055A4;
}

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

/* 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}
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 {border-collapse: collapse}
table.alt, table.alt th {border: 1px solid #aac}
table.alt td {border-right: 1px solid #aac;  padding: 2px 4px; text-align: left;}
table.alt th {background-color: #cce; color: #448; padding: 6px 4px; text-align: center; vertical-align: middle}
table.alt td.center {text-align: center}
table.alt td.number {text-align:right;}
table.alt tbody tr:nth-child(even) { background-color: white }
table.alt tbody tr:nth-child(odd) { background-color: #ddf}
table.nodeco td:first-of-type {width:200px; padding-right:8px}
table.nodeco td img {width:140px; display: block; margin: auto}

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

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

/* Flipcard ---------------------------------------------------------------- */
    .flipcard { display: inline-block; position: relative; width: 194px; height: 194px; }
    .flipcard>span { position: absolute; width: 176px; height: 176px; border-radius: 32px 0; border: solid 1px gray; margin: 8px; box-shadow: 2px 2px 8px #888; }
    .flipcard>span>img { position: absolute;  top: 8px; left: 8px; right: 8px; bottom: 8px; border-radius: 26px 0; width: 160px; height: 160px; }
    .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: 8px; text-shadow: 0 0 3px #222; }
    .flipcard p.title > span { color: lightgrey; }
    .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);}

/* Image gallery ----------------------------------------------------------- */
#gallery, .gallery { text-align: left; }
#gallery a, .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, .gallery a:hover { box-shadow: 2px 2px 10px #318CE7; margin: 10px 6px 6px 10px; }
#gallery p, .gallery p { font: 15px 'Arial'; font-style: italic; position: absolute; 
  bottom: -6px; left: 0; right: 0; margin-top:10px; }
#gallery img, .gallery img { position: absolute; max-width:150px;  max-height:150px;
  top: 0; bottom: 20px; left: 0; right: 0; margin: auto; }

.rounded-box  {
  background:#ddf; color:#0055A4;
  vertical-align: top; text-align: center;
  border: solid 1px gray;
  border-radius: 36px 0;
  margin: 10px;
  box-shadow: 4px 4px 8px #aaa;
}
.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 > 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; }
.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); }

.icon {
  display: inline-block;
  width: 56px; height: 56px;
  color: white; background: #aaf;
  border: solid 1px #55a8; border-radius: 36px;
  margin: 12px;
  font-size: 36pt; text-align: center;
}
.icon b { color: white; }

/* Navigation bars --------------------------------------------------------- */
#navTop, #navLeft {
  top: 0; left: 0; right: 0;
  position: fixed;
}

#navTop  {
  border-bottom: 1px solid #05a;
  padding-left: 140px;
  background: #318CE7;
  box-shadow: 0px 3px 5px rgba(64, 64, 64, 0.5);
}

#navTop.center>span { margin: 0 auto; display: block; width: fit-content; }

#elyse #navTop {
  background: #ff506d;
  border-color: #a05;
  padding-left: 0;
}

#navTop ul {
  padding: 0;
  margin: 0 auto;
  float: left;
  overflow: hidden;
  list-style-type: none;
}

#navTop li {
  float: left;
  padding: 0;
  margin: 6px 0;
  border-left: 1px solid #fff;
}

#navTop li:first-child { border-left: none; }

#navTop a, #navTop span {
  padding: 0 10px;
  color: #FFF;
  font-size: medium; font-weight: bold;
  text-shadow: 0 0 3px #444;
  text-decoration: none;
}

#navTop a:hover { background: #5fa6ec; }
#elyse #navTop a:hover {background: #f8a;}
#navTop .select { color: #ffe040; }

#navTop span.right {float: right; padding: 0; }
#navTop span.txt {
  display: inline-block;
  font-size: small; font-weight: normal; font-style: italic;
  padding: 7px 12px;
}
#navTop span.right li { margin:0; padding:5px; }
#navTop span.right a  { padding: 2px 4px; }
#navTop span.right ul { float:right; }

#navTop.center { padding-left: 0; }
#navTop.center span { margin: 0 auto; display: block; width: fit-content; }

#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; }

#logo { position:fixed; top: 10px; left: 49px; width:42px; height:42px; }

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

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

.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);}
}

/* 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 {
  .noprint { display:none }
  body { background: none; width: 99%; margin: 8px 24px; }
}