@charset "utf-8";
body {
       background-color: #fefeef;
       background-color:#e0d6c0;
       font-family:  verdana, open sans, arial, sans-serif;
       font-size: 106%;
   }
.BGlight, .bgl  { background-color: #fefeef; }
 .bgl  { background-color: #E5E4DC } /* экспериментально */
 .bgd  { background-color: #191f2d } /* тёмно синий */

h1 {
       color: #aa3333;
       margin-left:64px;
              /* color: #d86; */
   }

h2 {

       color: #49c;
       color: #68c;
       margin-left:32px;

       font-weight: 500;
   }
h3 {
       color: #158;
       font-weight: 200; 

       margin-left:32px;
   }
h4 { 
        color: #579;
        margin-left: 48px;
    }


a:link { color: #2060c0; /* Цвет ссылок */ } 
 a:visited { color: #404080; /* Цвет посещенных ссылок */ } 
 a:active { color: #f00; /* Цвет активной ссылки */ } 


/*
Чтобы установить цвет для всех ссылок на веб-странице применяются следующие псевдоклассы, которые добавляются к селектору A.

visited — Стиль для посещенной ссылки.
active  — Стиль для активной ссылки. Активной ссылка становится при нажатии на неё.
hover   — Стиль для ссылки при наведении на неё мышью.

Синтаксис: A:псевдокласс { 
  например 
       text-decoration: none|underline;
       color: #a86; 
}

*/
 A { text-decoration: none; /* Убирает подчеркивание для ссылок */ }
 A:hover { text-decoration: underline; /* Добавляем подчеркивание при наведении курсора на ссылку */
  color: #a66;
  }


.shead, .sheadR {
  font-size: 110%;
  font-family: sans-serif;
  color: #646488;
  margin: 12 64 18 32; 
}
.sheadR { color: #aa2233; }

.h, .h4 {  font-weight: 300; font-size: 1.3em; }

.h4 { margin: 24px 0 0 2em; }

p { 
    margin: 4pt 12 0 12;
    text-indent: 18pt;
    text-align: justify;
    }
    
.nx, nx0, .nxl, .nxni { margin-top: 0; margin-bottom: 0; }
.nx03 {margin-top: .3em;  margin-bottom: .2em; }    <!-- малый интерлиньяж -->
.nxl { text-align: left; }
.nxni { text-indent: 0; } /* без абзацного отступа */


.dgerelo, .avtor {
  text-size: 90%;
  margin-right: 24px;
  margin-left: 24px;
}
.dgerelo {   text-align: right;
 }
.avtor { text-align: right; 
         font-style: italic;
}

time, .date {
        font-family: sans-serif;
        font-size: 80%;
}
.date { margin: 6pt 24pt 16pt 12pt; text-align: left; }
 time { margin: 0 .4em 0 .4em; } 

time {font-size: 80%; } /* для даты в тексте index.html */

.datl  {font-size: 70%; } /* для даты в тексте index.html */
.dat8 { font-size: 85%; line-height: normal;} 
.dat9 { font-size: 90%; height: 90%;} 
.dat110 { font-size: 110% }

    tt { text-decoration: none; font: 88% sans-serif; } /* текст как для цитат */
    s { text-decoration: none; letter-spacing: .1em; }  /* понятия выделим межлитерным интервалом */
    

.head {
        border-bottom: gray 3px double;
        margin: 0 12pt 12pt 12pt;
        font-family: verdana;
        font-size: 90%;
}
.hitem { margin-top: 0.6em; }

.refer, .ref { font-size: 80%; }

dl { margin:6pt 6pt 6pt 2em;}
li { margin:0 6pt 0 2em; }
.margli>li, .mtli>li { margin-top: .4em; }  /* для разбивки перечисления*/
.ul0, .ml0 { margin-left: 0; }   /* для ul второго уровня */
.ml0>li  { margin-left: 0; }  /* для li второго уровня */



ol {  margin-left: 2em; }
dl { margin-left: 2em; margin-right: 4em; }

dt {
    /* margin: 4pt 0 0 24pt;  */
     text-indent: -1em;
     margin-left:  1em;
     margin-top: 0.8em;
}
     
dd {
     margin-top: 0.5em;
}
.dh1 {  font-weight: 300; font-size: 1.4em; }
.dh2 {  font-weight: 300; font-size: 1.2em; }

.stih {
         margin:12pt 48pt 12pt 0;
         font-size:120%;
         text-align:left;
}
.vst, .vst32, .vst24 {
    width: 32%;
    padding:8px;
    margin: 4px 24px 4px 18px; }
}
.vst32 { width: 32%; }
.vst24 { width: 24%; }
.vst, .vst32, .vst24 { background: #e0dac8; }

.vstavka, .vstav { 
           width:360px;
           padding:18px;
         margin: 4px 24px 4px 18px; }
.vrezka, .vrez, .vrezkal {
           width:360px;
         margin: 0 24px 4px 18px;
         padding:0 8px 0 16px; }

         
.vstav, .panelq   { background: #e0dac8;  } <!-- #fefeef; светлый -->
.vstavka { background: #dec;  } 
.vrezka  { background: #d0c8b8; }
.vrezkal { background: #e0dac8; }
<!-- .vrez — не имеет фона -->

.panelq { padding:18px;
         margin: 4px 24px 4px 18px;  }

.otstup, .vtjag, .vtjagka  {
            margin-left: 48px;
            margin-right: 32px;
            padding: 4px 24px 4px 24px;
}
.otstup { border-left: solid #88eeaa 4px; }
.vtjag, .vtjagka { 
           background: #eeeedd;
           border-left: solid #ee8844 4px;
           margin-left: 24px;
          font-size: 115%;
           font-style: italic;           
}
.vtjazh {   margin-left: 48px;
            margin-right: 32px; 
 }
 .vtjazh { margin-left: 15%; }


.plash, .plashka, .plashkaBl, .plashkaBd, .plashBl, .plashBll, .plashBd, .vtjag, .vtjagka {
           /*background: #eeeedd;*/
           padding: 12px 48px 12px 48px;  /* для всех плашек */
}
.plashBl  {background: #e0dac8;}
.plashBll  {background: #f0ead8;}
.plashBd  {background: #d0c8b8;}

.plashka, .plashkaBd  {
           font-size: 106%;
           font-style: italic;           
}
.plashkaBl  {background: #e0dac8;}
.plashkaBd  {background: #d0c8b8;}

.bgBl  {background: #e0dac8;}  /* только фон */
.bgl  {background: #EFE9D7; }
.bgBd  {background: #d0c8b8;}
.bgE { background: #e6e6e0; } <!-- для подсветки текста -->

.epig, .epigraf {
       padding: 0 4em 1.5em 2em; }
.epigraf {
       text-align: right; }
.snoska {   margin: 2em 2em 0 3em;
            border-top: gray solid 1px;
            border-length: 18em;
            
 }
       
.page30 { margin: 0 30% 0 30%; }
.page25 { margin: 0 25% 0 25%; }
.page21 { margin: 0 21% 0 21%; }
.page800 {  width: 800px;}
.page, .page15 { margin: 18px 15% 24px 15% }
.page8 { margin: 18px 8% 24px 8% }
.page4 { margin: 18px 4% 24px 4% }
.page2 { margin: 18px 2% 24px 2% }
.polosa4 { margin: 0 4% 0 4% }
.polosa8 { margin: 0 8% 0 8% }
.polosa { margin: 0 16% 0 16% }

.pdg0 { padding-left: 0; } /* удаляем отступ вложеного UL, оставляем отступ LI   */

.flx { display: flex;  }   /*  контейнер flex  по горизонтали*/
.itmf, .page1, .itf, .itx, .itx50, .itx67, .itx33, .itx30  { margin: 0 1% 0 1% }  /* для раздела flex */
.flxv { display: flex;  flex-direction: column; } 
.itx50 { width: 50%; }
.itx67 { width: 67%; }
.itx33 { width: 33%; }
.itx30 { width: 30%; }

.flxr, .flxj  {  display: flex; justify-content: space-around; }
.flxb {  display: flex; justify-content: space-between; }
.flxl {  display: flex; justify-content: flex-start; }

 
.pidimg, .pidimgl {
    font-family: sans-serif;
        font-size: 90%;
}
.pidimg { text-align: center; }
.pidimgl { color: #828291; }
.fl {
       float:left
       }
.fr { 
       float:right
       }
       
pre {
       margin: 6pt 24pt 16pt 32pt;
       font-size: 140%;    
}

.rama {
     border: solid #c8c8c8 1px;
     padding: 4 4 4 4;
     background: #e8e4da;
     margin:0 8 0 8;
     }
     
 .transparent50  { 
     filter: alpha(Opacity=50); 
     opacity: 0.5; 
 }   

 .wds80 { width: 80%; }
 .wds74 { width: 74%; }
 .wds64 { width: 64%; }
 .wds50 { width: 50%; padding: 1%; } 
 .wds48 { width: 48%; padding: 1%; }
 .wds46 { width: 46%; padding: 1%; }
 .wds40 { width: 40%; padding: 1%; }
 .wds30 { width: 30%; }
 .wds32 { width: 32%; }
 .wds36 { width: 36%; }
 
.hgt96 { height: 96px; }
.hgt128 { height: 128px; }
.hgt144 { height: 144px; }
.hgt156 { height: 156px; }
.hgt192 { height: 192px; }


.db {
   background: #ccccdd; 
   height:8px;
   margin: 24px 24px 24px 24px;
   /* down bar for END  */ 
   }
   
 .qwe {
         font-style: italic;
         margin-left: 4em;
         margin-top: 1.5em;
         }
         

.barG {width: 100%; height: 1em; background: #8cb;  }
.barGt3 {width: 100%; height: 1em; background: #8cb;  margin-top: 3em;}
.barGn {width: 100%; height: 1em; background: #869878 }
.barGnL {width: 100%; height: 1em; background: #96a888 }
.barGnLl {width: 100%; height: 1em; background: #a6b898 }

.barR {width: 100%; height: 1em; background: #e8e0d0; }
.barRt3 {width: 100%; height: 1em; background: #e8e0d0;  margin-top: 3em;}

.barL {width: 100%; height: 1em; background: #eFe8eA; }
.barLl {width: 100%; height: 1em; background: #fFf8fA; }
.barLg {width: 100%; height: 1em; background: #D6D2CC; }

.barB {width: 100%; height: 1em; background: #acd;}
.barBt3 {width: 100%; height: 1em; background: #acd;  margin: 3em 0 1em 0;}
  
;