/**
  * Node.js  npm  Grunt  Autoprefixer
  * for modifications to be done,
  * load on Terminal
  * in root directory:
  * cd ~/Documents/Websites/lebinhtu-raphael.be/lbtr
  * the following code:
  * ./node_modules/.bin/grunt watch
  * then file design.css will be created from _design.css
  */

@font-face {
  font-family: 'Garamond Premier Pro';
  src: url('../fonts/GaramondPremierPro-Regular.ttf');
}
@font-face {
  font-family: 'Garamond Premier Pro';
  font-weight: bold;
  src: url('../fonts/GaramondPremierPro-Bold.ttf');
}
@font-face {
  font-family: 'Garamond Premier Pro';
  font-style: italic;
  src: url('../fonts/GaramondPremierPro-RegularItalic.ttf');
}
@font-face {
  font-family: 'Garamond Premier Pro';
  font-weight: bold;
  font-style: italic;
  src: url('../fonts/GaramondPremierPro-BoldItalic.ttf');
}


/* Vars */
:root {
  --main-color: #646869;
  --main-bg-color: white;
  --main-bg-color-shadow: rgba(255, 255, 255, .8);
  --main-bg-color-shadow-lighter: rgba(255, 255, 255, .3);
  --important-color: black;
  --important-bg-color: #ccc;
  --important-bg-color-shadow: rgba(0, 0, 0, .9);
  --light-bg-color: #f3f3f3;
  --font-family: 'Garamond Premier Pro';
  --font-settings: 'dlig' on, 'swsh' on, 'viet' on;
  --font-settings-no-viet: 'dlig' on, 'swsh' on;
  --min-width: 250px;
  --max-width: 900px;
  --fig-size-preview: 180px;
  --fig-width-slide: 600px;
  --fig-height-slide: 400px;
}

@media screen and (min-width: 350px) {
  :root { --fig-size: 240px; }
}
@media screen and (min-width: 300px) and (max-width: 349px) {
  :root { --fig-size: 200px; }
}
@media screen and (max-width: 299px) {
  :root { --fig-size: 150px; }
}


/* Page Structure */
html, body, div, p, fieldset, nav, ul, li, h1, h2, h3, h4, h5, h6, figure, img, dl, dt, dd {
  margin: 0;
  padding: 0;
}
img, object, embed, canvas, video, audio, picture {
  max-width: 100%;
  height: auto;
}

html, body {
  border: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  font-family: var(--font-family);
  -webkit-font-feature-settings: var(--font-settings);
     -moz-font-feature-settings: var(--font-settings);
          font-feature-settings: var(--font-settings);
  font-size: 14pt;
  line-height: 1.25;
  color: var(--main-color);
  background-color: var(--important-bg-color);
}
html.stop-scrolling { overflow: hidden; }

.no-viet { -webkit-font-feature-settings: var(--font-settings-no-viet); -moz-font-feature-settings: var(--font-settings-no-viet); font-feature-settings: var(--font-settings-no-viet); }

@media screen and (min-width: 600px) {
  div#Footer, div#Page, div#Header {
    --x-padding: 3em;
    --y-padding: 1em;
  }
}
@media screen and (min-width: 250px) and (max-width: 599px) {
  div#Footer, div#Page, div#Header {
    --x-padding: 9%;
    --y-padding: 3%;
  }
}
@media screen and (max-width: 249px) {
  div#Footer, div#Page, div#Header {
    --x-padding: 1.2em;
    --y-padding: .4em;
  }
}

/* slideshow */
div#Slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--main-bg-color);
}
div#Slideshow.quote {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
div#Slideshow.slideshow {
  background-image: url('../images/dandelion-low-opacity.png');
  background-repeat: no-repeat;
  background-position: right bottom;
}
div#Slideshow div:not(.visible) { display: none; }
div#Slideshow div {
  position: absolute;
  left: 0;
  right: 0;
  box-sizing: border-box;
  width: 100%;
}
div#Slideshow.quote div {
  bottom: .5em;
  padding: .5em;
  font-size: 2.2em;
  background-color: var(--main-bg-color-shadow);
}
div#Slideshow.slideshow div {
  top: 0;
  bottom: 0;
  height: 100%;
  padding: 1.8em;
  font-size: 2.6em;
}
div#Slideshow.slideshow h1 {
  margin: 1em 0;
  text-align: center;
  font-size: 3em;
  font-weight: normal;
  font-style: italic;
}
div#Slideshow.slideshow h2 {
  margin-bottom: .5em;
  font-size: 1.8em;
  font-weight: normal;
  font-style: italic;
}
div#Slideshow.slideshow figure {
  float: right;
  max-width: var(--fig-width-slide);
}
div#Slideshow.slideshow figure img {
  max-width: var(--fig-width-slide);
  max-height: var(--fig-height-slide);
/*
  /*border: 1px solid var(--main-color);* /
  border-radius: 1em;
  /*margin: 0 var(--logo-margin);* /
  width: var(--logo-size);
  height: var(--logo-size);
  background-color: var(--main-bg-color);
  background-image: url('../images/l2.svg');
  background-size: 80% 80%;
  background-repeat: no-repeat;
  background-position: calc(var(--logo-size) * .09) calc(var(--logo-size) * .15);
*/
}

/* footer */
div#Footer {
  box-sizing: border-box;
  min-width: var(--min-width);
  padding: var(--y-padding) var(--x-padding);
  color: var(--important-color);
}
div#Footer p {
  text-align: center;
  font-size: .9em;
}

/* page */
div#Page {
  --y-padding-inside: 1em;
  box-sizing: border-box;
  border-radius: 0 0 1em 1em;
  min-width: var(--min-width);
  max-width: var(--max-width);
  min-height: calc(100% - 100px);
  margin: 0 auto;
  padding: 0 var(--x-padding) var(--x-padding);
  background-color: var(--main-bg-color);
  background-image: url('../images/dandelion-low-opacity.png');
  background-repeat: no-repeat;
  background-position: right bottom;
}
@media screen and (max-width: 625px) {
  div#Page { background-size: 100%; }
}

/* header */
div#Header {
  border-bottom: 1px solid var(--main-color);
  padding: var(--y-padding) 0 var(--y-padding-inside);
  background-color: var(--main-bg-color);
}

div#Header h1#Title {
  font-size: 2em;
  font-weight: normal;
  font-style: italic;
  text-align: center;
}
div#Header h1#Title span {
  --logo-size: 1.5em;
  --logo-border: 1px;
  --logo-margin: 1em;
  --corr: .22em;
  vertical-align: middle;
  display: inline-block;
  white-space: nowrap;
}
div#Header h1#Title span.right,
div#Header h1#Title span.left {
  width: calc((100% - var(--logo-size) - 2 * var(--logo-border) - 2 * var(--logo-margin) - var(--corr)) / 2);
}
div#Header h1#Title span.right::after { content: ''; margin-right: var(--corr); }
@media screen and (max-width: 599px) {
  div#Header h1#Title span.right,
  div#Header h1#Title span.left { display: none; }
}
div#Header h1#Title span#Logo {
  border: var(--logo-border) solid var(--main-color);
  border-radius: 1em;
  margin: 0 var(--logo-margin);
  width: var(--logo-size);
  height: var(--logo-size);
  background-color: var(--main-bg-color);
  background-image: url('../images/l2.svg');
  background-size: 80% 80%;
  background-repeat: no-repeat;
  background-position: calc(var(--logo-size) * .09) calc(var(--logo-size) * .15);
}
div#Header h1#Title span#Logo:hover,
div#Header h1#Title span#Logo:focus,
div#Header h1#Title span#Logo:active {
  background-color: var(--main-color);
  background-image: url('../images/l2-white.svg');
}

div#Header ul#Links {
  box-sizing: border-box;
  padding-top: var(--y-padding-inside);
  list-style: none;
  text-align: center;
  font-size: .95em;
}
@media screen and (max-width: 499px) {
  div#Header ul#Links {
    z-index: 1;
    position: relative;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    border-bottom: 1px solid var(--main-color);
    height: 13.2em;
    margin-left: -3px;
    margin-right: -3px;
    margin-bottom: -13.2em;
    padding-bottom: var(--y-padding-inside);
    background-color: var(--main-bg-color);
    box-shadow: 0 .8em 1em var(--main-bg-color);
  }
  div#Header h1#Title { cursor: pointer; }
  div#Header h1#Title:hover+ul#Links,
  div#Header h1#Title:focus+ul#Links,
  div#Header h1#Title:active+ul#Links,
  div#Header ul#Links:hover,
  div#Header ul#Links:focus,
  div#Header ul#Links:active { display: block; }
}
@media screen and (min-width: 500px) {
  div#Header ul#Links li {
    display: inline;
    white-space: nowrap;
  }
  div#Header ul#Links li+li::before {
    content: ' · ';
    margin: 0 .2em;
    white-space: normal;
  }
}
div#Header ul#Links li a { border-bottom: 2px solid transparent; }
div#Header ul#Links li a,
div#Header ul#Links li a:visited { color: var(--main-color); }
div#Header ul#Links li a:hover,
div#Header ul#Links li a:focus,
div#Header ul#Links li a:active { border-color: var(--main-color); }

/* body */
div#Body { padding-top: var(--y-padding-inside); }

div#Body>h1 {
  margin-bottom: .5em;
  font-weight: normal;
  font-style: italic;
}
div#Body>h2 {
  margin: .5em 0;
  font-weight: normal;
}
@media screen and (min-width: 350px) {
  div#Body>h1 { font-size: 2.5em; }
  div#Body>h2 { font-size: 1.7em; }
}
@media screen and (max-width: 349px) {
  div#Body>h1 { font-size: 2em; }
  div#Body>h2 { font-size: 1.3em; }
}

div#Body>p {
  margin: 1em 0;
  text-align: justify;
}
div#Body>p+ul.list { margin-top: -1em; }
div#Body>p::first-letter {
  font-size: 1.5em;
  font-style: italic;
  line-height: .66em;
}

/* overlay */
@media screen and (min-width: 600px) and (min-height: 400px) {
  div#Overlay { --container-padding: 1em; }
}
@media screen and (max-width: 599px), screen and (max-height: 399px) {
  div#Overlay { --container-padding: 0em; }
}
div#Overlay {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 11;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  min-width: var(--min-width);
  width: 100%;
  height: 100%;
  padding: var(--container-padding);
  text-align: center;
  background-color: var(--important-bg-color-shadow);
}
div#Overlay>figure, div#Overlay>div {
  --actions-margin: .5em;
  vertical-align: middle;
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  height: 100%;
  text-align: center;
}
div#Overlay>figure span.centerer,
div#Overlay>div span.centerer {
  vertical-align: middle;
  display: inline-block;
  width: 0;
  height: 100%;
}
div#Overlay>figure img,
div#Overlay>div div {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
}
div#Overlay>div div {
  overflow: auto;
  box-sizing: border-box;
  display: inline-block;
  padding: 1em;
  background-color: var(--main-bg-color);
}
div#Overlay>div div h1, div#Overlay>div div p { text-align: center; }
div#Overlay>div div h1 {
  margin-bottom: .3em;
  font-size: 2.5em;
  font-weight: normal;
  font-style: italic;
}
div#Overlay>div div p { margin: .5em 0; }
div#Overlay>div div p figure {}
div#Overlay>div div p figure img { width: var(--fig-size); }

div#Overlay>div a.Action.disabled,
div#Overlay>figure a.Action.disabled { display: none; }
body.isMobile div#Overlay>div a.Action.Prev,
body.isMobile div#Overlay>div a.Action.Next,
body.isMobile div#Overlay>figure a.Action.Prev,
body.isMobile div#Overlay>figure a.Action.Next { display: none; }
body:not(.isMobile) div#Overlay>div a.Action,
body:not(.isMobile) div#Overlay>figure a.Action { display: none; }
body:not(.isMobile) div#Overlay>div:hover a.Action:not(.disabled),
body:not(.isMobile) div#Overlay>div:focus a.Action:not(.disabled),
body:not(.isMobile) div#Overlay>div:active a.Action:not(.disabled),
body:not(.isMobile) div#Overlay>figure:hover a.Action:not(.disabled),
body:not(.isMobile) div#Overlay>figure:focus a.Action:not(.disabled),
body:not(.isMobile) div#Overlay>figure:active a.Action:not(.disabled) { display: block; }

/* actions */
a.Action {
  --size: 2em;
  cursor: pointer;
  z-index: 22;
  position: absolute;
  box-sizing: border-box;
  vertical-align: middle;
  display: block;
  border-radius: var(--size);
  width: var(--size);
  height: var(--size);
  margin: var(--actions-margin);
  text-align: center;
  background-color: var(--important-bg-color);
}
a.Action:hover, a.Action:focus, a.Action:active { background-color: var(--main-color); }
a.Action.Prev, a.Action.Next { top: calc((100% - var(--size) - var(--actions-margin)) / 2); }
a.Action.Prev { left: 0; }
a.Action.Next { right: 0; }
a.Action.Exit { top: 0; right: 0; }
a.Action span.centerer, a.Action span.centered {
  display: inline-block;
  vertical-align: middle;
}
a.Action span.centerer { width: 0; height: 100%; }
a.Action:hover span.centered::before,
a.Action:focus span.centered::before,
a.Action:active span.centered::before { color: var(--main-bg-color); }
a.Action.Prev span.centered::before,
a.Action.Next span.centered::before { font-size: 1.5em; }
a.Action.Prev span.centered::before { content: '‹'; }
a.Action.Next span.centered::before { content: '›'; }
a.Action.Exit span.centered::before { content: '×'; font-size: 1em; }

/* caption */
.Caption {
  z-index: 21;
  position: absolute;
  left: calc(-1 * var(--container-padding));
  right: calc(-1 * var(--container-padding));
  bottom: calc(-1 * var(--container-padding));
  box-sizing: border-box;
  vertical-align: middle;
  display: block;
  padding: .5em;
  text-align: left;
  background-color: var(--main-bg-color-shadow);
}


/* Contents */
.left    { text-align: left; }
.center  { text-align: center; }
.right   { text-align: right; }
.justify { text-align: justify; }

.important { color: var(--important-color); }

.small { font-size: smaller; }
.large { font-size: larger; }

.open, .close { cursor: pointer; }
.open::after, .close::after {
  margin-left: 1em;
  font-size: 9.8pt;
}
.open::after  { content: '▼'; }
.close::after { content: '▲'; }

sup {
  vertical-align: baseline;
  font-size: inherit;
  -webkit-font-feature-settings: var(--font-settings), 'sups' on;
     -moz-font-feature-settings: var(--font-settings), 'sups' on;
          font-feature-settings: var(--font-settings), 'sups' on;
}
.no-viet sup, sup.no-viet, sup .no-viet {
  -webkit-font-feature-settings: var(--font-settings-no-viet), 'sups' on;
     -moz-font-feature-settings: var(--font-settings-no-viet), 'sups' on;
          font-feature-settings: var(--font-settings-no-viet), 'sups' on;
}

abbr {
  cursor: help;
  border-bottom: 1px dotted var(--main-color);
}

a, a:visited { text-decoration: none; }
p a { border-bottom: 2px solid transparent; }
p a, p a:visited { color: var(--important-color); }
p a:hover, p a:focus, p a:active { border-color: var(--important-color); }

p.accept, p.exclamation, p.information {
  text-indent: 20px;
  background-repeat: no-repeat;
  background-position: left top;
}
p.accept      { background-image: url('../images/icons/accept.png'); }
p.exclamation { background-image: url('../images/icons/exclamation.png'); }
p.information { background-image: url('../images/icons/information.png'); }

img {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
          user-drag: none;
}

/* banner */
@media screen and (min-width: 700px) {
  div#Banner { --banner-height: 300px; }
}
@media screen and (max-width: 699px) {
  div#Banner { --banner-height: 200px; }
}
div#Banner {
  --actions-margin: .5em;
  position: relative;
  box-sizing: border-box;
  border: 3px solid var(--main-bg-color-shadow-lighter);
  border-radius: 3px;
  height: var(--banner-height);
  background-size: cover;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position: center center;
}

div#Banner a.Action,
div#Banner ul { display: none; }
div#Banner:hover a.Action, div#Banner:focus a.Action, div#Banner:active a.Action,
div#Banner:hover ul, div#Banner:focus ul, div#Banner:active ul { display: block; }

div#Banner ul {
  --height: .7em;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  width: 100%;
  height: var(--height);
  margin-bottom: var(--actions-margin);
  list-style: none;
  text-align: center;
}
div#Banner ul li {
  vertical-align: top;
  display: inline-block;
  border-radius: 1em;
  width: var(--height);
  height: var(--height);
  margin: 0 .2em;
}
div#Banner ul li:not(.selected) { cursor: pointer; background-color: var(--important-bg-color); }
div#Banner ul li:not(.selected):hover,
div#Banner ul li:not(.selected):focus,
div#Banner ul li:not(.selected):active { background-color: var(--main-color); }
div#Banner ul li.selected { background-color: var(--main-color); }
div#Banner ul li::before { content: ''; }

/* j */
div#J { margin-top: .5em; }
div#J p { text-align: center; }
@media screen and (min-width: 500px) {
  div#J p { font-size: 2em; }
}
@media screen and (max-width: 499px) {
  div#J p { font-size: 1.5em; }
}

/* jumbotron */
@media screen and (min-width: 300px) {
  div.Jumbotron { margin: 1em 2em; }
  div.Jumbotron p { margin: 1em 0; font-size: 1.3em; }
}
@media screen and (max-width: 299px) {
  div.Jumbotron { margin: 1em 1em; }
  div.Jumbotron p { margin: .9em 0; font-size: 1.1em; }
}

/* blockquote */
blockquote {
  quotes: '«' '»';
  text-align: center;
  font-style: italic;
}
@media screen and (min-width: 500px) {
  blockquote, blockquote::before, blockquote::after { font-size: 1.7em; }
  blockquote::before, blockquote::after { --corr-y: -.3em; }
}
@media screen and (min-width: 350px) and (max-width: 499px) {
  blockquote, blockquote::before, blockquote::after { font-size: 1.5em; }
  blockquote::before, blockquote::after { --corr-y: -.2em; }
}
@media screen and (min-width: 300px) and (max-width: 349px) {
  blockquote, blockquote::before, blockquote::after { font-size: 1.2em; }
  blockquote::before, blockquote::after { --corr-y: -.15em; }
}
@media screen and (min-width: 300px) {
  blockquote { margin: 2em 2em; }
  blockquote::before, blockquote::after {
    --corr-x: -1em;
    position: relative;
    display: block;
  }
  blockquote::before {
    content: open-quote;
    float: left;
    top: var(--corr-y);
    left: var(--corr-x);
    margin-right: var(--corr-x);
  }
  blockquote::after {
    content: close-quote;
    float: right;
    bottom: calc(-1 * var(--corr-y));
    right: var(--corr-x);
    margin-left: var(--corr-x);
    margin-bottom: -1em;
  }
}
@media screen and (max-width: 299px) {
  blockquote { margin: 2em 1em; }
  blockquote::before { content: open-quote ' '; }
  blockquote::after { content: ' ' close-quote; }
}

/* list */
ul.list { list-style: none; }
ul.list li { margin-left: 2.2em; }
ul.list li::before {
  content: '—';
  position: relative;
  display: inline-block;
  width: 1.2em;
  margin-left: -1.2em;
}
ul.letter-list { list-style: upper-alpha; }
/*list-style-position: inside..................*/
ul.letter-list li { margin-left: 2.2em; }

/* timeline */
@media screen and (min-width: 870px) {
  ul.timeline {
    border-left: 1px solid var(--main-color);
    margin: 1.5em 0 2em;
    list-style: none;
  }
  ul.timeline::after {
    content: '▼';
    position: absolute;
    margin-top: -.2em;
    margin-left: -.52em;
    font-size: .7em;
  }
  ul.timeline li {
    position: relative;
    top: -.45em;
    height: 1em;
    margin-left: 3.2em;
    text-indent: -3.2em;
    line-height: 1em;
  }
  ul.timeline li:not(:empty)::before {
    content: '–';
    position: relative;
    margin-left: -.08em;
    margin-right: .2em;
  }
  ul.timeline li:empty:first-of-type::before {
    content: '•';
    margin-left: -.24em;
  }
}
@media screen and (max-width: 869px) {
  /* [ same as ul.list --- */
  ul.timeline { list-style: none; }
  ul.timeline li { margin-left: 2.2em; }
  ul.timeline li::before {
    content: '—';
    position: relative;
    display: inline-block;
    width: 1.2em;
    margin-left: -1.2em;
  }
  /* --- ] */
  ul.timeline li:empty { display: none; }
}

/* figures */
figure.fig {
  vertical-align: top;
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  margin: .4em;
}
figure.fig.item { width: var(--fig-size-preview); }
figure.fig.disabled { opacity: .4; }

figure.fig img {
  vertical-align: middle;
  box-sizing: border-box;
  border: 1px solid var(--main-color);
  background-color: var(--main-bg-color);
}
figure.fig.item img { -o-object-fit: cover; object-fit: cover; width: var(--fig-size-preview); height: var(--fig-size-preview); }
figure.fig:not(.disabled) img.preview { cursor: pointer; }

figure.fig figcaption { box-sizing: border-box; }
figure.fig figcaption:not(.title):not(.subtitle) { margin-top: .3em; }
figure.fig figcaption:not(.subtitle) { text-align: center; }

figure.fig.item figcaption.title,
figure.fig.item figcaption.subtitle {
  position: absolute;
  padding: 2px 6px;
}
figure.fig.item figcaption.title { width: 100%; top: 0; }
figure.fig.item figcaption.subtitle { width: 50%; bottom: calc(100% - var(--fig-size-preview)); }
figure.fig.item figcaption.subtitle.left { margin-right: 50%; }
figure.fig.item figcaption.subtitle.right { margin-left: 50%; }
figure.fig.item figcaption.title span,
figure.fig.item figcaption.subtitle span {
  box-shadow: 4px 0 0 var(--main-bg-color-shadow), -4px 0 0 var(--main-bg-color-shadow);
  padding: 2px 0;
  background-color: var(--main-bg-color-shadow);
}

figure.fig.item figcaption.progress,
figure.fig.item figcaption.progress span,
figure.fig.item figcaption.progress span::after {
  border-radius: 1em;
}
figure.fig.item figcaption.progress { background-color: var(--main-bg-color); }
figure.fig.item figcaption.progress span,
figure.fig.item figcaption.progress span::after {
  box-sizing: border-box;
  display: block;
  height: .4em;
}
figure.fig.item figcaption.progress span {
  max-width: 100%;
  background-color: var(--main-color);
}
figure.fig.item figcaption.progress span.filled { min-width: 5%; }
figure.fig.item figcaption.progress span::after {
  content: '';
  position: absolute;
  border: 1px solid var(--main-color);
  width: 100%;
}

/* definitions */
dl { margin: 1em 0; }
@media screen and (min-width: 700px) {
  dl { --margin: 9em; }
  dl dt {
    position: relative;
    top: 1.2em;
    width: var(--margin);
    font-style: italic;
  }
  dl dt:first-child { margin-top: -1.2em; }
  dl dd+dt { margin-top: -.8em; }
  dl dd {
    margin-left: var(--margin);
    padding-left: 1em;
  }
}
@media screen and (max-width: 699px) {
  dl dd { margin-left: 1em; }
}

/* iframe */
iframe { border: 1px solid var(--main-color); }
@media screen and (min-width: 420px) and (max-width: 550px) {
  iframe {
    max-width: 300px;
    max-height: 225px;
  }
}
@media screen and (min-width: 300px) and (max-width: 419px) {
  iframe {
    max-width: 200px;
    max-height: 150px;
  }
}
@media screen and (max-width: 299px) {
  iframe {
    max-width: 150px;
    max-height: 112.5px;
  }
}

/* form, input, buttons */
form p+p { margin-top: .5em; }
label[for] { cursor: pointer; }

input, textarea, select {
  vertical-align: middle;
  box-sizing: border-box;
  border: 1px solid var(--main-color);
  font-family: inherit;
  -webkit-font-feature-settings: inherit;
     -moz-font-feature-settings: inherit;
          font-feature-settings: inherit;
}
input:not([type='submit']), textarea, select {
  border-radius: 5px;
  font-size: .8em;
  background-color: var(--light-bg-color);
}
input:not([type='submit']), textarea { padding: .3em .4em; }
textarea { resize: none; }
progress { text-indent: 0; }
progress::after { content: attr(value) "/" attr(max); }
@media screen and (min-width: 400px) {
  form { display: inline-block; }
  input:not([type='submit']), textarea { width: 22em; }
  textarea { height: 8em; }
  progress { --width: 10em; width: var(--width); }
  progress::after {
    position: relative;
    left: calc(var(--width) + .5em);
  }
}
@media screen and (max-width: 399px) {
  input:not([type='submit']), textarea { width: 100%; }
  textarea { height: 6em; }
  progress { width: 100%; }
  progress::after {
    position: relative;
    top: 1em;
    display: block;
    text-align: right;
  }
}
input[type='submit'], a.button {
  border-radius: 1em;
  padding: .5em 1em;
  font-size: 1em;
  font-style: italic;
  background-color: var(--main-color);
}
input[type='submit'], a.button, a.button:visited { color: var(--main-bg-color); }
input[type='submit']:not([disabled]), a.button:not(.disabled) { cursor: pointer; }
input[type='submit']:not([disabled]):hover, input[type='submit']:not([disabled]):focus, input[type='submit']:not([disabled]):active,
a.button:not(.disabled):hover, a.button:not(.disabled):focus, a.button:not(.disabled):active {
  color: var(--main-color);
  background-color: var(--main-bg-color);
}
input[type='submit'][disabled],
a.button.disabled { cursor: default; }
a.button {
  display: inline-block;
  border: 1px solid var(--main-color);
  margin: .2em 1em;
}
a.button.active {
  border-color: var(--important-color);
  background-color: var(--important-color);
}
a.button.active:not(.disabled):hover, a.button.active:not(.disabled):focus, a.button.active:not(.disabled):active {
  color: var(--important-color);
  background-color: var(--main-bg-color);
}

/* genealogy */
span.fn {}
span.ln { -webkit-font-feature-settings: var(--font-settings), 'smcp' on; -moz-font-feature-settings: var(--font-settings), 'smcp' on; font-feature-settings: var(--font-settings), 'smcp' on; }
span.gender {}
span.dead {}

@media screen and (min-width: 900px) {
  div.by2 {
    vertical-align: top;
    display: inline-block;
    width: 50%;
  }
}
@media screen and (max-width: 899px) {
  div.by2+div.by2 { margin-top: 1em; }
}
div.section { text-align: left; }
div.section+div.section { margin-top: 1em; }

fieldset.identity {
  display: inline-block;
  border: 1px solid var(--main-color);
  border-radius: 1em;
  padding: 1em;
  text-align: left;
  background-color: var(--main-bg-color);
}

/* genealogy tree */
div.Block {
  overflow-x: auto;
  overflow-y: hidden;
}
div.Tree {
  white-space: nowrap;
  text-align: left;
  font-size: .8em;
}

div.Person, div.Connector { --person-size: 50px; display: inline-block; }

div.Person {
  vertical-align: middle;
  box-sizing: border-box;
  border: 1px solid transparent;
  height: var(--person-size);
}
div.Person div { padding: .5em; }
div.Person div p {
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
  white-space: nowrap;
}
div.Person.no_gender { border-radius: 1em; }
div.Person.male { border-radius: 0; }
div.Person.female { border-radius: 2em; }
div.Person.no_gender:not(.selected) { background-color: #f4f4f4; }
div.Person.male:not(.selected) { background-color: #ccc; }
div.Person.female:not(.selected) { background-color: #eaeaea; }
div.Person.selected { font-weight: bold; border-color: var(--important-color); }
div.Person.no_gender.selected { background-color: #c0c0c0; }
div.Person.male.selected { background-color: #7f7f7f; }
div.Person.female.selected { background-color: #afafaf; }

div.Connector {}
div.Connector:not(.between) { vertical-align: middle; height: 20px; }
div.Connector.between { vertical-align: bottom; height: calc(var(--person-size) / 2); line-height: 0; }
div.Connector::before, div.Connector::after {
  --border: 1px;
  content: '';
  vertical-align: top;
  display: inline-block;
  border: 0 solid var(--main-color);
  height: 100%;
}
div.Connector.v::before, div.Connector.evh::before, div.Connector.hvh::before, div.Connector.hve::before { width: 50%; }
div.Connector.v::after, div.Connector.evh::after, div.Connector.hvh::after, div.Connector.hve::after { width: calc(50% - var(--border)); }
div.Connector.v::before {}
div.Connector.v::after { border-width: 0 0 0 var(--border); }
div.Connector.evh::before {}
div.Connector.evh::after { border-width: var(--border) 0 0 var(--border); }
div.Connector.hvh::before { border-width: var(--border) 0 0; }
div.Connector.hvh::after { border-width: var(--border) 0 0 var(--border); }
div.Connector.hve::before { border-width: var(--border) var(--border) 0 0; }
div.Connector.hve::after {}
div.Connector.h::before { border-width: var(--border) 0 0; width: 100%; }
div.Connector.h::after { width: 0; }