BODY      { background-image: url('back.gif'); background-color: #E6DEC0; margin: 2em; margin-top: 0.3em; margin-bottom: 0.4em }
BODY, TR  { font-family: 'Georgia','serif'; word-spacing: 0.06em; cursor: default; font-size: 114% }

TABLE, TD, IMG, OL  { margin: 0; padding: 0; border-width: 0; border-collapse: collapse }
TABLE.image    TD   { border: 3px ridge; padding: 1px }
TABLE.photopgs TD   { padding-left: 1em; padding-right: 1em; text-align: center }
P                   { margin: 0 }

H1         { font-size: 200% }
H2         { font-size: 168% }
H3         { font-size: 141% }
H4, big    { font-size: 119% }
H5         { font-size: 100% }
H6, small  { font-size:  84% }

.text, .xtext, .para, .photos, .photos TABLE, .verse, .ending, .epigraph, .PS  { margin-top: 1em; margin-bottom: 1em }
.title, .ppara, TABLE.photopgs, .devotion, .date                               { margin-top: 2em; margin-bottom: 2em }

.text .image, .xtext .image  { margin-top: 0.7em; margin-bottom: 0.7em; margin-left: -1em; margin-right: -1em; text-align: center }

.title          { margin-bottom: 3em }
.devotion       { margin-top:   -2em }
.spara          { margin-top:  0.7em; margin-bottom: 0.7em }
.date           { margin-bottom: 1em }
.foot, .ending  { margin-bottom: 0; line-height: normal }
.foot           { margin-top:  2.5em; }

.text,   .xtext    { margin-left: 1em; margin-right: 1em; line-height: 1.38; text-align: left }
.text P, .xtext P  { text-indent: 30pt; text-align: justify }
.noind P           { text-indent: 0 }
.invind P          { text-indent: -30pt; text-align: left; margin-left: 30pt }
.photos TABLE      { width: 100% }
.photos TD         { padding-left: 1em; padding-right: 1em }
.photos IMG        { margin: 0.5em }
.photos TABLE IMG  { margin: 0; margin-right: 1em }

.videos TABLE      { width: 100%; margin-top: 2.5em; margin-bottom: 2.5em }
.videos TD         { padding-left: 1em; padding-right: 1em }
.videos TABLE IMG  { margin-right: 1.2em }

TD.list          { padding-left: 1em; padding-right: 1em }
TD.list P        { margin-bottom: 0.2em }
TD.list .column  { margin-bottom: 0.7em; margin-left: 1.5em; margin-top: 0 }
.menu            { margin: 0 0.18em 0.06em 0.18em }
.select          { background-color: #DCCCB4 }

.letters TD       { padding-left: 1.6em; padding-right: 0; white-space: nowrap }
.letters .column  { margin-left: 0.5em; margin-bottom: 0.4em }
.letters .year    { margin-left: -1em ; margin-bottom: 0.4em }

.path         { margin-left: -1.6em; margin-bottom: -0.5em; text-align: left }
.comments     { margin-top: -2.2em; margin-bottom: 1.2em; text-align: left }
.forreader    { margin-left: 45%; margin-top: 0.5em; margin-bottom: -1.5em; text-align: right }
.forreader P  { text-indent: 25pt; text-align: justify }
.epigraph     { margin-left: 40%; line-height: normal; margin-top: -1em }
.chapter      { text-align: center }
.chapter A    { padding-left: 0.5em; padding-right: 0.5em; padding-top: 0.4em; position: relative; top: 0.2em }
.chapname     { text-align: center; margin-top: 2em; margin-left: -1em; margin-right: -1em; line-height: normal }
.totop        { margin-top: 2em; margin-bottom: -1.5em }
.totop2       { margin-top: 1em; margin-bottom: -1.5em }
.verse        { margin-left: 33%; line-height: normal }
.index A      { padding: 0.24em }

.stitle                            { text-align: center; line-height: normal; margin-top: 0.6em; margin-bottom: 0.6em }
.sign, .sign-up, .sign-dn, .signs  { text-align: right;  line-height: normal; margin-top: 0.1em; margin-bottom: 0.1em }
.sign-up                           { margin-top:    -0.6em }
.sign-dn                           { margin-bottom: -0.6em }
.sign-vrs                          { margin-left:  45%; line-height: normal; margin-top: -0.6em; margin-bottom: -0.6em }
.signs                             { margin-left: -1em; margin-right: -1em; margin-bottom: 0.8em }
.signs-sgn                         { margin-right: 65% }
.signs-add                         { margin-left:  36%; margin-top: -1.17em; text-align: left }

@font-face                         { font-family: 'Georgia-extra'; font-style: normal; font-weight: normal; src: url('extra.eot')  }
@font-face                         { font-family: 'Georgia-extra'; font-style: normal; font-weight: bold  ; src: url('extrab.eot') }
@font-face                         { font-family: 'Georgia-extra'; font-style: italic; font-weight: normal; src: url('extrai.eot') }
.Fi, .Fl, .extra, .acute, .acutec  { font-family: 'Georgia-extra','Georgia','serif' }
.Fi, .Fl                           { // letter-spacing: -0.06em }
.acute                             { background: url('acute.gif') no-repeat 76% 22%; // background: none }
.acutec                            { background: url('acute.gif') no-repeat 76% 0  ; // background: none }

A:link,    .xtext A.true:link,    .xtext .gray A.true:link     { text-decoration: none     ; color: #886020 }
A:visited, .xtext A.true:visited, .xtext .gray A.true:visited  { text-decoration: none     ; color: #886020 }
A:hover,   .xtext A.true:hover,   .xtext .gray A.true:hover    { text-decoration: underline; color: #A07840 }
A.main:visited, .main A:visited                                { text-decoration: none     ; color: #A88450 }
A.main:hover,   .main A:hover                                  { text-decoration: underline }

A.hide:link, A.hide:visited,  .xtext A:link, .xtext A:visited  { color: black   }
A.hide:hover,                 .xtext A:hover                   { color: #503820 }

.gray, .snote,  .gray A.hide:link, .gray A.hide:visited,  .xtext .gray A:link, .xtext .gray A:visited,  .page  { color: #988878 }

A.js:hover  { text-decoration: none; border-bottom: 1px dashed }

.jsa, .cr1  { position: relative; top: -0.08em }
.jsb, .cr2  { position: relative; top:  0.08em; margin-bottom: -0.08em }

//.cr1        { border-bottom: 1px dashed #988878 }
//.cr2        { cursor: help }

H1 .cr1,  H2 .cr1,  H3 .cr1,  H4 .cr1,  H5 .cr1  { border: none }

em, .cut   { font-style: normal; word-spacing: 0.24em }
em I       { font-style: normal; letter-spacing: 0.18em; margin-right: -0.18em }
em I I     { font-style: italic; margin-right: 0 }
span.thsp  { margin-left: 0.15em }

.tiny, .page  { font-family: 'Verdana','Tahoma','sans-serif'; font-size: 7.5pt; word-spacing: 0 }
sup           { font-family: 'Verdana','Tahoma','sans-serif'; font-size: 74%  ; word-spacing: 0 }
small sup     { font-size: 86% }

.nnote, .fnote, .snote  { font-style: normal; font-weight: normal }
.nnote                  { margin-left: -0.12em; position: relative; right: -0.06em; top: -0.18em; letter-spacing: -0.06em }
.fnote                  { margin-left: -0.18em; margin-right: -0.06em }
.snote                  { margin-left: -0.24em }
.xtext P .nnote         { top: -0.32em }

.page  { font-family: 'Tahoma','sans-serif'; font-weight: normal; text-decoration: none;
         position: absolute; right: 0.6em; text-align: right; white-space: nowrap }

TD.op     { vertical-align: top; text-align: right; padding-right: 0.3em }
TD.opn    { vertical-align: top; text-align: right; padding-right: 0.5em }
TD.brace  { height: 100%; text-align: center; padding-left: 0.4em; padding-right: 0.4em }
TD.i      { padding-left: 0.12em }
OL        { margin-left: 27pt }
LI .li    { position: relative; left: -0.36em }
.date     { text-align: right }

input, textarea  { font-family: 'Georgia','serif'; font-size: 100%; padding: 0 1 0 1 }
.hd, I em        { position: absolute; left: -200em }

q  { quotes: '' '' }


/* new */
.new-para   { margin-top: 1em }
.new-sign  { text-align: right; line-height: normal; margin: 0.1em 0 1em 0 }

.er0, .er1, .er2, .er3, .er4, .er5, .er6, .er7  { padding-left: 0.2em }
.er0  { background: #000; color: #fff; margin-left: 0.2em; font-style: normal; padding-right: 0.2em }
.er1  { background: #eff; color: #9aa; margin-left: 0.2em; font-style: normal }
.er2  { background: #ff8; color: #998; margin-left: 0.2em; font-style: normal }
.er3  { background: #ff8 }
.er4  { background: #9f9 }
.er5  { background: #f99; color: #877 }
.er6  { background: #ccc; color: #777 }
.er7  { background: #fff }

#footer{
    font-size:1rem;
    margin:3rem 0 1.5rem 0;
}
#footer>hr{
    width:50%;
    margin-bottom:0.2em;
}
#footer>center>span .copy{
    position:relative;
    top:0.08em;
}
#footer>center>span .middot{
    color:#988878;
}
#footer>center>span>a{
    position:relative;
    top:1px;
    text-decoration:none;
    color:#886020;
}
#footer>center>span>a:hover{
    text-decoration:underline;
    color:#a07840;
}

img.youtube-thumb:hover {
  opacity: 0.8;
  cursor: pointer;
}

.youtube-container {
  display: block;
  width: 100%;
  max-width: 24vw;
  padding: 0 10px 10px 0;
}

.youtube-player {
  display: block;
  width: 100%;
  /* assuming that the video has a 16:9 ratio */
  padding-bottom: 56.25%;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  cursor: hand;
  cursor: pointer;
  display: block;
}

img.youtube-thumb {
  bottom: 0;
  display: block;
  left: 0;
  max-width: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  height: auto
}

#youtube-iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* nobr { background-color: #ffd }  q, .thsp { background-color: #fcf }  /* типографики */
/*
q                 { font-weight: normal; font-style: normal; background-color: #F0F0F0; color: black; font-size: 100% }
q var             { font-weight: normal; font-style: normal; background-color: #B0F0B0; color: black; font-size: 100% }
q var q           { font-weight: normal; font-style: normal; background-color: #60D060; color: black; font-size: 100% }
var, q q, var var { font-weight: bold  ; font-style: italic; background-color: default; color: red  ; font-size: 120% }  /* кавычек */


<?include "copy.html"?>