tei.css

@font-face { font-family:JuniusVF; src:url('../fonts/JuniusVF.woff2'); font-weight:300 700; font-stretch:60% 100%; font-style:normal }

.tei { background:#fff; padding:20px }

.tei-header { margin-bottom:20px; padding-bottom:20px; border-bottom:2px solid #ccc; font-family:var(--base-font-family) }
.tei-header h3 { font-family:"PT Serif"; font-size:13pt; margin-bottom:4px; font-weight:bold }
.tei-header td { padding:2px 10px }
.tei-header th { font-weight:600; }
.tei-header td, .tei-header th { vertical-align:top }

.tei-text { font-family:'JuniusVF'; font-size:14pt }

.tei-side-figure { display:block; float:left; clear:left; width:300px; max-height:520px; background:#fff; padding:10px; text-indent:0 }
.tei-side-figure img { -webkit-transition:.3s ease-in-out; transition:.3s ease-in-out }
.tei-side-figure img:hover { -webkit-transform:scale(1.05); transform:scale(1.05) }
.tei-side-figure figcaption { background:#fff; width:100% }

@media (max-width:1279px ) {
  .tei-side-figure { width:200px }
}
@media (max-width:850px ) {
  .tei-side-figure { width:150px }
}
@media (max-width:767px) {
  .tei-side-figure { display:none }
}

.tei-add            { color:#060; vertical-align: super; font-size:90% }
.tei-body           { }
.tei-dateline       { }
.tei-del            { color:#9e6457; text-decoration:line-through }
.tei-foreign        { }
.tei-handShift::after { margin:0 2px; content:"┌"; vertical-align:super; font-size:10pt; cursor:help }
.tei-handShift[data-medium="ink"]    { color:blue }
.tei-handShift[data-medium="pencil"] { color:grey }
.tei-hi             { }
.tei-lb::after      { content:"\a "; display:block }
.tei-milestone      { display:block; border-bottom:1px solid #aaa; margin:2rem 0 }
.tei-opener         { }
.tei-p              { display:block; margin:0 0 10px }
.tei-pb             { display:block; text-align:center; color:#666; margin:1rem 0; font-family:var(--base-font-family); font-size:var(--base-font-size); font-weight:var(--base-font-weight); letter-spacing:normal }
.tei-pb:hover       { background:#f3f3f3 }
.tei-placeName      { background:#8cc8ff; padding:4px; cursor:help }
.tei-salute         { }
.tei-seg            { }
.tei-seg[data-ana="#pic"]::after { content:"✎" }
.tei-space          { width:2rem; display:inline-block }
.tei-supplied       { color:#aaa }
.tei-surname        { background:#77e195; padding:4px; cursor:help }
.tei-surname:empty::after  { content:"👤"; opacity:.3 }
.tei-unclear        { opacity:.6 }
.tei-unclear::after { content:"(?)" }
.tei-w              { border:1px solid #ddd; padding:1px; margin:auto 2px }

[data-rendition~="#c"]   { text-align:center; display:block }
[data-rendition~="#hr"]  { /* only as <milestone rendition="hr">, which is handled above */ }
[data-rendition~="#i"]   { font-style:italic }
[data-rendition~="#r"]   { text-align:right; display:block }
[data-rendition~="#sup"] { position:relative; top:-0.5em; font-size:80% }
[data-rendition~="#sub"] { position:relative; bottom:-0.5em; font-size:80% }
[data-rendition~="#u"]   { text-decoration:underline }