/* generic */
@keyframes background
  {
  from { background-position: -20px 0px; }
  to   { background-position: 0px 0px; }
  }
@keyframes menuVertical
  {
  from { transform: translateY(-30em) scale(0.5); }
  to   { transform: translateY(0em) scale(1); }
  }
@keyframes menuHorizontal
  {
  from { transform: translateX(-30em); }
  to   { transform: translateX(0em); }
  }
@keyframes lastUpdate
   {
   from { transform: scaleX(0.8); }
   to { transform: scaleX(1); }
   }

body
  {
  font-family: sans-serif; 
  background-repeat: repeat-y; background-position: top left;
  }

div#content { padding-top: 1em; }
div#content>h2:first-of-type, h2+.lastUpdate { animation: lastUpdate 1500ms ease-out; }

img { display: inline; padding: 0px; margin: 0px; border: none; }
h2 { margin: 0px; border-left: 1px solid silver; padding-left: 0.5ex; }
h4 { margin-bottom: 1ex; border-bottom: 1px solid black; }
h5 { margin-bottom: 1px; }
h6 { font-size: 95%; margin: 1ex 0ex 0ex 0ex; }
p { margin: 0px 1ex 1ex 0px; text-align: justify; }
table, ol, ul { margin: auto; }
td, th { text-align: left; vertical-align: top; padding: 1px 1em 0.5ex 0px; }
li { padding-bottom: 0.5ex; }
sup, sub { font-size: 75%; }
a { text-decoration: none; color: rgb(0,70,255); }

/* others */
p.lastUpdate
  {
  text-align: right; color: silver; font-size: 80%;
  margin-bottom: 1em; padding-right: 0.5ex;
  border-top: 1px solid silver; border-right: 1px solid silver;
  }

.footnote
  {
  text-align: right; color: silver; font-size: 80%;
  padding-right: 0.5ex; border-right: 1ex solid silver;
  }

.blueCell { color: white; background-color: rgb(82,158,222); }

.editCtrls
  {
  font-weight: bold; font-variant: small-caps; font-size: 80%; text-align: right;
  margin: 0px; padding: 3px;
  }

td .editCtrls { text-align: left; }

.editCtrls span
  {
  background-color: rgb(255, 180, 90); border: 1px solid gray; color: white;
  padding: 0px 1ex 0px 1ex; margin:0px 1ex 0px 0px; cursor: pointer;
  box-shadow: 1px 0px 3px gray; border-radius: 5px;
  }

.btn { color: rgb(0,70,255); cursor: pointer; }
.navigationMenu { text-align: right; font-size: 90%; padding-right: 2em; }
.yellowHL { text-shadow: 1px 1px orange, -1px -1px yellow; }

/* some common grids */
div[class=grid2Cols]
  { 
  display: grid; grid-template-rows: min-content; grid-template-columns: max-content 1fr; 
  align-content: start; 
  }

div[class=grid3cols] { display: grid; grid-template-columns: repeat(3, 1fr); }
div[class=grid3cols]>div { overflow: auto; padding: 0px; }
div[class=grid3cols]>div:nth-child(3n+2)
  { border-left: 1px solid rgb(82,158,222); border-right: 1px solid rgb(82,158,222); }
div[class=grid3cols]>div>h4
  {
  margin: 1ex 0ex 0ex 0ex; padding: 0.5ex;
  border-bottom: none; border-top: 1px solid rgb(82,158,222);
  }
div[class=grid3cols]>div>ol { padding-right: 0.5ex; }
div.grid2EqCols
  {
  display: grid; grid-template-rows: min-content; grid-template-columns: 1fr 1fr;
  justify-items: stretch; grid-column-gap: 0em;
  }
div.grid2EqCols>div { margin-right: 2em; }

div#content>div[docs] { display: grid; grid-template-columns: repeat(3, max-content); } 
div#content>div[docs]>p { padding:0.5ex 1ex 0.5ex 0ex; margin:0em; border-bottom: 1px solid silver; } 

span[atmail]::after { content: '@'; }

@media screen and (min-width: 800px)
  {
  .twoCols
    {
    column-width: 400px; column-gap: 1em; column-rule: none;
    }
  }

/* an image with caption */
div[fig] { text-align: center; }
div[fig]>img { max-width: 100%; }
div[fig]>p
  { text-align: center; font-style: oblique; padding-top: 0px; padding-bottom: 1em; font-size: 90%; }