html, body, table, tbody, tr, td {height:100%;}
@font-face {
font-family: Lombardina; /* Имя шрифта */
src: url(../../pic/fonts/lombardina.ttf); /* Путь к файлу со шрифтом*/}
td.tablica {text-align: center;width: 18px;vertical-align: middle;height: 18px;}
text {font-style: italic;font-weight: 550;color: #005555;font-family: monospace;}
table.polos > tbody > tr:nth-child(odd) {background: #ccf}
table.polos > tbody > tr:nth-child(even) {background: #fff}
div.flexbook {display: flex;background-color: #eee;padding: 5px;}
div.flexbook > div {margin: 0 20px;}
div.flexbook > img {height: 100%;}
img.ico {float:left;border: 1px solid white;}
div.submenu {display: none;position: absolute;width: 180px;background-color: white;border: 1px solid #218099;margin: 44px 0 0 -144px;color:#000;}
div.nm:hover > div.submenu {display: block;}
div.submenu > div, div.submenuone > div {text-align:left;clear: both;}
div.submenu > div > div.r:hover, div.submenuone > div > div.r:hover {background-color: #51a0b9;}
div.submenu > div > div.r, div.submenuone > div > div.r {font-family: Benguiat,sans-serif;padding:4px 10px;float: right;width: 65%;cursor: default;}
div.submenu > div > div.l, div.submenuone > div > div.l {float: left;padding:4px 10px;cursor: default;}
div.submenu > div > div > a, div.submenuone > div > div > a {text-decoration:none;color:#000;}
wr {position: relative;display: inline-block;border-bottom: 1px dashed #000080;cursor: help;}
wr > .wrt {
  visibility: hidden;
  position: absolute;
  width: 300px;
  top: 100%;          /* вместо bottom:100% */
  left: 0;            /* привязка к левому краю имени */
  z-index: 999;
  padding: 1em;
  background: #fff;
  border: dotted 1px black;
  display: flex;
  font-size: 9pt;
  text-align: left;
  line-height: 1.5em;
}
wr > .wrt > img {width:60px;height:81px;margin: 0 20px 0 0;}
wr > .wrt > div{width:220px;}
wr:hover .wrt {visibility: visible;}
.vkladka {display: inline-block;padding: 3px;text-indent: 3px;border: 0px;border-radius: 5px 5px 0 0;background: #DAE2E8;color: #218099;font-size: 22px;font-style: italic;position: relative;text-transform:uppercase;}
.avkladka {color: red;font-size: 22px;}
   .sign {
    float: left;
    border: 1px solid #333; /* Параметры рамки */
    padding: 7px; /* Поля внутри блока */
    margin: 10px 0 5px 5px; /* Отступы вокруг */
    background: #f0f0f0; /* Цвет фона */
    font-size: 12px;
    font-family: verdana, times new roman, tahoma;
    text-align: justify;
    height: 100%;
   }
   .sign figcaption {
    margin: 0 auto 5px; /* Отступы вокруг абзаца */
   hyphens: auto;
   }
   .clearfix { clear: both; }

.tooltip {cursor: help;}
/* Устройства с нормальным hover (мышь, тачпад) */
@media (hover: hover) and (pointer: fine) {
.tooltip {text-decoration: underline dotted;}
}
/* Тач-устройства: подчёркивания нет */
@media (hover: none) {
.tooltip {text-decoration: none;cursor: default;}
}

.blue {color:#00f;}
.link {color:#218099;}
a.dl {color: #218099;text-decoration: none;}
a.dl:hover {text-decoration: underline;}
div.flex {display: flex;flex-flow: row wrap;}
.writerminus {min-height:280px;}
.cplus {min-height:340px;}

.ar28ch {float:left;width:33%;margin:5px 0 10px 0;border-bottom:1px dotted #ddd;padding:5px 0 8px 0;color: #000000;font-size: 15px;font-family: times new roman, tahoma;}
.ar50ch {float:left;width:50%;margin:5px 0 10px 0;border-bottom:1px dotted #ddd;padding:5px 0 8px 0;color: #000000;font-size: 15px;font-family: times new roman, tahoma;}
.ar50ch > div {max-height: 55px;overflow: hidden;}
.ar100ch {padding:5px 0 8px 0;color: #000000;font-size: 15px;font-family: times new roman, tahoma;}
.aimg {float:left; padding:3px; border:1px dotted #ddd; margin:0 10px 10px 0;width:70px;height:95px;}
.ar100ch img {padding:3px; border:1px dotted #54f; margin:0 10px 10px 0; width:150px;}
.ar28ch h2 {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:18px;}
.ar28ch img {float:left; padding:3px; border:1px dotted #ddd; margin:0 10px 10px 0;	width:70px;}

wr {position: relative;border-bottom: 1px dashed #000080;cursor: help;}
wr span {visibility: hidden;position: absolute;width:300px;bottom: 100%; z-index: 999;margin-left: 250px;display: block; padding: 1em;background: #fff;border: dotted 1px black;display: flex;font-size: 10pt;text-align: left;line-height: 1.5em;}
wr > span > img {width:60px;height:81px;margin: 0 20px 0 0;}
wr > span > div{width:220px;}
wr:hover span {visibility: visible;}

div.contacts {width:1024px;margin:0 auto;flex-flow: row wrap;display: flex;}
div.contacts > div.one {margin-left: 20px;width:500px;font-family: "lucida grande",tahoma,verdana,arial,sans-serif;}
div.contacts > div.two {margin-left: 15px;font-family: "lucida grande",tahoma,verdana,arial,sans-serif;}

div.social > div {padding: 0 0 10px 20px;}
div.social > div > a {color: #218099;text-decoration:none;}
div.social > div > a:hover {text-decoration: underline;}

div.nameblock {width:100%;flex-flow: row wrap;display: flex;justify-content:space-between;}
div.nameblock > h1 {margin: 10px 20px;}
div.nameblock > div {margin: 10px 20px;padding: 6px 20px 4px 20px;background-color: #218099;border-radius: 10px;color: #fff;}
div.nameblock > div > span {padding: 0 5px;}
div.nameblock > div > span > a {color: #fff;text-decoration: none;}
div.nameblock > div > span > a:hover {text-decoration: underline;}

div.navyear {display: flex;padding: 0 0 20px 0;}
div.navyear > div {margin: 0 20px;}

.kalendarik {font-size: 12px; font-family: verdana, times new roman, tahoma;text-align:justify;}

#flextags {width:999px;margin:0 auto;flex-flow: row wrap;display: flex;}
#flextags > div {width:237px;margin:5px;border: 1px solid black;height:274px;z-index:2;background-position:top;background-size:237px;background-color: #fff;background-repeat: no-repeat;position:relative;}
#flextags > div > div {padding:10px 0;background-color:#ffffff;position:absolute;bottom:0;}
#flextags > div > div > div {margin:0 10px;}
#flextags > div > div > div > div.sections {font-family: sans-serif;font-size: 8pt;letter-spacing: 1px;font-weight: 500;color: #218099;margin: 0 0 10px 0;}
#flextags > div > div > div > div.pname {margin:0 0 10px 0;font-size: 10pt;}
#flextags > div > div > div > div.plid {font-size: 7pt;text-align: justify;word-wrap: break-word;line-height: 1.65em;color: #444;font-family: Verdana,Geneva,sans-serif;}
#flextags > div > div > div > div.ppubl {font-family: sans-serif;font-size: 7pt;letter-spacing: 0.9px;font-weight: 500;color: #218099;margin: 0;}
#flextags > div > div > div > div > a {color: #218099;text-decoration:none;}

blockquote {font-style: italic;color: #555555;margin: 20px 0 20px 45px;border-left: 5px solid #d3dae0;padding-left: 30px;line-height: 1.4em;position: relative;}
blockquote div {padding: 0;}
blockquote:before {content: "\f10d";font-family: FontAwesome;position: absolute;left: -45px;top: 10px;color: #d3dae0;font-size: 25px;}
blockquote cite {font-style: normal;}
blockquote cite name {font-weight: bold;}
blockquote footer {position: relative;padding-left: 30px;margin: 30px 0;}
.link {color:#218099;font-style: italic;}

/* жанры */
#flextags > div.allgenre {width: 187px;margin: 5px;border: 1px solid black;height: 200px;z-index: 2;background-position: top;background-size: 187px;background-color: #fff;background-repeat: no-repeat;position: relative;}
#flextags > div.allgenre > div {padding:0;background-color:#ffffff;position:absolute;bottom:0;width: 187px;max-height:55px;height:55px;}
#flextags > div.allgenre > div > div {display: flex;justify-content: center;align-items: center;height: 55px;text-align: center;}
#flextags > div.allgenre > div > div > a {color: #218099;text-decoration: none;}
#flextags > div.allgenre > div > div > a:hover {text-decoration: underline;}

div.genreplus {margin: 20px;min-height: 200px;}
div.genreplus > img {margin: 0 20px 0 0;width: 280px;}
div.izdat-list {padding: 5px 0 8px 0;font-size: 15px;font-family: times new roman, tahoma;text-align:center;width: 240px;margin: 0 0 0 10px;}
div.izdat-list > div {margin: 0 auto 10px auto;white-space: nowrap;}
div.izdat-list > img {padding: 3px;border: 1px dotted #54f;width: 150px;}
div.writer-list {display: flex;width: 50%;margin: 5px 0 10px 0;border-bottom: 1px dotted #ddd;padding: 5px 0 8px 0;color: #000000;font-size: 15px;font-family: times new roman, tahoma;}
div.writer-list > img {padding: 3px;border: 1px dotted #ddd;margin: 0 10px 10px 0;min-width: 70px;width: 70px;height:95px;}

h2.ftag {margin: 0 150px 0 17px;width: 950px;border: 1px solid #000;color: #fff;background-color: #218099;padding: 0 17px;}
h2.ftag > a {color: #fff;text-decoration: none;}
h2.ftag > a:hover {text-decoration: underline;}
h2.fpop {margin: 0 0 10px 0;width: 325px;border: 1px solid #000;color: #fff;background-color: #218099;padding: 0 17px;text-align: center;}


/* внедрение шрифтов */

@font-face {
    font-family: "Benguiat"; /* Гарнитура шрифта */
    src: url(../../pic/fonts/benguiat.eot); /* Для IE5-8 */
    src: local("Benguiat"), url(../../pic/fonts/benguiat.ttf); /* Для остальных браузеров */}


div.mshap {background: #218099; text-align: center; padding-bottom: 5px; padding-top: 7px; color: #ffffff; font-size: 13px; font-family: lucida grande, tahoma, verdana, arial, sans-serif; font-weight: bold;width:256px;}
div.mpl {width:256px; font-family: lucida grande, tahoma, verdana, arial, sans-serif;font-size: 11px; text-align: center; background:#ccf;}

.article  {text-align:justify;font-size: 12px; font-family: verdana, times new roman, tahoma;text-indent:10px;padding: 5px;}

#home {background-color:#ffffff; position:relative; height:312px; width:254px; clear: both; border-top: 2px solid #ffffff;}
.feature { height:312px; position:absolute; width:254px; overflow:hidden; }
.feature img { border:none; }
#tabs { margin:0;margin:0;}
#tabs li {background-color:transparent;display: inline;float:none;list-style:none;}
#tabs li a {background-color:#547aa0; display:block; height:10px;padding:5px 23px;text-decoration:none; width:10px; float:left;margin-right:1px;}
#tabs li a.active { background-color:#fdd164; }
#tabs li a span { display: none; }
#one { background-image: url(/pic/home/vkontakte.png); background-repeat: no-repeat; background-position: center;}
#two { background-image: url(/pic/home/facebook.png); background-repeat: no-repeat; background-position: center;}
#three { background-image: url(/pic/home/twitter.png); background-repeat: no-repeat; background-position: center;}
h1 {color: #218099;font: 700 30px Benguiat,sans-serif;}
h2 {color: #218099;font: 700 25px Benguiat,sans-serif;}

.topic-title {width: 100%;margin: -200px 0 94px 0;}
h1.namepic {text-align: center;color: #ffffff;font-size: 45pt;text-shadow: #000000 1px 0 10px;}
.ramka-2-wr {
    width: 1020px;
    height: 200px;
    box-sizing: border-box;
    padding: 15px;
    position: relative;
    overflow: hidden;
    margin: 110px auto 10px auto;
}
.ramka-2-wr .ramka-2 {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-family: 'Roboto', sans-serif;
}
.ramka-2-wr::before {
    content: '';
    position: absolute;
    width: 2500px;
    height: 3500px;
    background: repeating-linear-gradient(
        #FFF 0%,
        #FFF 7.5px,
        #BFE2FF 7.5px,
        #BFE2FF 15px,
        #FFF 15px,
        #FFF 22.5px,
        #BFE2FF 22.5px,
        #BFE2FF 30px);
    transform: translateX(-20%) translateY(-20%) rotate(-45deg);
    animation: anim-ramka-2 20s linear infinite;
}
.ramka-2-wr .ramka-2 {
    position: relative;
    background-color: #FFF;
    flex-direction: column;
    box-sizing: border-box;
    padding: 30px;
    text-align: center;
    font-family: sans-serif;
    z-index: 2;
}
.ramka-2-wr,
.ramka-2-wr .ramka-2 {
    box-shadow: 0 0 2px #BFE2FF, 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
@keyframes anim-ramka-2 {
    from {
        background-position: 0;
    }

    to {
        background-position: 0 450px;
    }
}
.descript {width: 100%;text-align: center;}

div.bigcontent {width: 1024px;margin: 0 auto;padding:55px 0 20px 0;background-color: #fff;min-height:calc(100% - 333px);}
div.verybigcontent {width: 100%;margin: 0 auto;padding:55px 0 0 0;background-color: #fff;min-height:calc(100% - 333px);}

/*home*/
#homeinj {display: flex;flex-flow: row;width:1000px;margin:0 auto;}
#homeinj > div {width:744px;margin: 0 0 10px 0;}
#homeinj > aside {width:256px;}
#homeinj > div > div.col2 {display: flex;margin: 5px 0 0 0;}
#homeinj > div > div.col2 > div> article.news {display: block;font-size: 11px;font-family: verdana, times new roman, tahoma; color:#000000;vertical-align:top;    background: #fff;padding: 10px;text-align: justify;box-shadow: 1px 1px 0 0 #aaaaaa;max-width: 340px;width: 340px;height: 118px;}
#news {font-size: 11px;font-family: verdana, times new roman, tahoma; color:#000000;vertical-align:top;    background: #fff;padding: 10px;text-align: justify;box-shadow: 1px 1px 0 0 #aaaaaa;max-width: 340px;width: 340px;height: calc(100% - 50px);}
.redslovo {text-align:justify;font-size: 12px; font-family: verdana, times new roman, tahoma;text-indent:10px; width:710px;background: #fff;padding: 10px;box-shadow: 1px 1px 0 0 #aaaaaa;max-width: 710px;}

/*friends*/
div.friends {display: flex;width: 1024px;border: 1px solid #218099;}
div.friends > div > div.fname > a {color:#218099;text-decoration: none;}
div.friends > div > div.fname > a:hover {text-decoration: underline;}
div.friends > a > img {width:150px;height:100px;}
div.friends > div {}
div.friends > div > div.fname {padding: 10px 0;}
div.friends > div > div.ftext {color:#666;font-size:12px;text-align:justify;}

/*footer*/
body > footer {background-color:#218099;color: #fff;}
body > footer > div.logo {margin: 0 auto;width: 252px;position: relative;height: 50px;padding: 10px 0 0 0;}
#footmain {min-height: 200px;margin: 0px;padding: 0px;display: flex;flex-flow: row;line-height: 200%;}
#footmain > div.social {margin: 4px;padding: 5px;flex: 3 1 40%;order: 3;}
#footmain > div.project {margin: 4px;padding: 5px;flex: 1 6 30%;order: 1;}
#footmain > div > div > a {color:#fff;text-decoration: none;}
#footmain > div > div > a:hover {color:#fff;text-decoration: underline;}
#footmain > div > div.fname {font-weight: bold;text-transform:uppercase;margin:5px 0;}
#footmain > div.fmenu {margin: 4px;padding: 5px;flex: 1 6 30%;order: 2;}

/* /css/modalpic.css */
#imgModal {display:none; position:fixed; z-index:9999; inset:0; background:rgba(0,0,0,0.85); justify-content:center; align-items:center; padding:20px; box-sizing:border-box;}
#imgModal.active {display: flex; }
#imgModalInner { display:inline-block; position:relative; text-align:center; }
#imgBox { position:relative; display:inline-block; background:transparent; }
#imgModalContent { display:block; max-width:none; max-height:none; width:auto; height:auto; box-shadow:0 0 20px rgba(0,0,0,0.5); border-radius:0; }
/* крестик поверх картинки */
#modalClose { position:absolute; top:8px; right:8px; z-index:5; background:#fff; color:#000; border-radius:50%; font-weight:bold; font-size:18px; width:30px; height:30px; line-height:28px; text-align:center; cursor:pointer; border:0; box-shadow:0 0 8px rgba(0,0,0,0.4); }
#modalClose:hover{ background:#eee; }
/* подпись — белый фон, скругление только снизу */
#imgDescription { display:none; background:#fff; color:#000; font-size:15px; padding:10px 15px; border-radius:0 0 6px 6px; max-width:800px; margin:-6px auto 0; text-align:left; box-sizing:border-box;}


@media screen and (max-width: 768px) { /* разрешение планшета */
body {margin:0;}
body > header {background-color:#218099;width:100%;height:46px;position:fixed;z-index: 5000;}
body > footer {width:102%;min-height: 100px;max-width: 768px;margin: 0;box-sizing: padding-box;}

.w1024 {width: 1024px;margin: 0 auto;padding: 0 6px;clear:both;min-height:calc(100% - 175px);}

header > div.w1024 > div >img {width: 36px;height: 36px;border-radius: 18px;margin: 4px 0;}

.name, .nm {position: relative;margin: 0 20px;float:right;font: 700 small-caps 14px/16px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;color:#fff;height: 45px;}
.name:hover {background-color:#176c83;}
.nm:hover {cursor:pointer;}
}
@media screen and (min-width: 769px) { /* разрешение компьютера */
body {margin:0;background-color: #e9ebee;color: #1d2129;}
h1.m {margin:0 0 10px 50px;}
h2.m {margin:20px 50px;}
body > header {background-color:#218099;width:100%;height:46px;position:fixed;z-index: 5000;}
body > footer {width:100%;min-width:1024px;min-height: 100px; margin: 0;box-sizing: padding-box;}
body > footer > div.container {max-width: 1000px;margin: 0 auto;}
.page_block {position: relative;background: #fff;border-radius: 2px;box-shadow: 0 1px 0 0 #d7d8db, 0 0 0 1px #e3e4e8;margin: 15px 0 0;}

.w1024 {width: 1024px;margin: 0 auto;padding: 0 6px;clear:both;min-height:calc(100% - 175px);}

header > div.w1024 > div >img {width: 36px;height: 36px;border-radius: 18px;margin: 4px 0;}

body > div.w1024 {padding:55px 0 0 0;}

.name, .nm {position: relative;margin: 0 20px;float:right;font: 700 small-caps 14px/16px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;color:#fff;height: 45px;}
.name:hover {background-color:#176c83}
.nm:hover {cursor:pointer;}
.formtrue {width: 100%;clear: both;padding: 0 10px 10px 10px;}
.formtrue > div.one {float: left;width: 25%;text-align: right;margin: 15px 20px;white-space: nowrap;}
.formtrue > div.two {float: right;width: 55%;margin: 15px 20px;}
.formtrue > div.two > input, .formtrue > div.two > select {width: 250px;height: 30px;padding: 5px 9px 7px;border-radius: 1px;box-sizing: border-box;}
.center {}

.leftmenu {width: 240px;height: 500px;float: left;position: fixed;line-height: 2;font-size: 18px;}
.leftmenu > div > a {color:#218099;text-decoration:none}

.content {margin: 0 0 0 200px;background: #fff;width: 550px;padding: 20px;text-align: justify;box-shadow: 1px 1px 0 0 #aaaaaa;}
.content1 {margin: 0 0 0 50px;background: #fff;width: 610px;padding: 20px;text-align: justify;box-shadow: 1px 1px 0 0 #aaaaaa;}

.content > h1 {font-family: arial;font-size: 18px;color: rgb(188, 147, 13);}
.content > hr {width: 550px;}
.content > a {color: #218099;}
.content > img {box-shadow: 0px 0px 13px 0px #aaaaaa;width:100px;}


.rightmenu  {margin: 46px 0 0 820px;background: #fff;width: 180px;padding: 10px 20px 20px 20px;text-align: left; box-shadow: 1px 1px 0 0 #aaaaaa;position:fixed;overflow: auto;max-height: 200px;}
::-webkit-scrollbar { width: 5px; height: 3px;}
::-webkit-scrollbar-button {  background-color: #218099; }
::-webkit-scrollbar-track {  background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #218099; border-radius: 5px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #218099;}

.rightmenu > h2 {font-family: arial;font-size: 16px;color: rgb(188, 147, 13);}
}