﻿:root{
--body-bg:#FAFAF8;
--header-bg:#F7F5F0;
--content-bg:#FFFFFF;
--footer-bg:#F2EFE8;
--text:#29241d;
--muted:#6D706B;
--border:#D8D2C6;
--menu:#565048;
--hover:#3f3527;
--accent:#336995;
}

/* - ОБЩИЙ СБРОС - */
*{box-sizing:border-box;margin:0;padding:0;}
html{overflow-y:scroll;}
html,body{min-height:100%;}
body{background:var(--body-bg);font-family:Arial, Helvetica, sans-serif;color:var(--text);}

/* ОСНОВНОЙ КАРКАС */
.page{width:clamp(1000px,calc(100vw - 60px),1150px);min-height:100vh;margin:0 auto;display:flex;flex-direction:column;background:var(--content-bg);box-shadow:0 0 0 1px rgba(0,0,0,.05),0 4px 18px rgba(0,0,0,.07);}
.main{position:relative;flex:1;display:flex;background:#fff;}
.content{position:relative;flex:1;padding:20px 10px 5px 10px;}

/* - ШАПКА - */
header{position:relative;width:100%;height:200px;padding:0 10px;border-bottom:1px solid var(--border);background:var(--header-bg);}
.logo{position:absolute;top:15px;left:20px;content:url('images/logo.png');}
.header-main{width:auto;position:absolute;left:31%;top:5px;}
.name1{font-size:clamp(30px, calc(5.0vw - 3.0px), 50px);color:#918779;padding:15px 0;text-shadow:1px 1px 0 #180e02;letter-spacing:2px;}
.name2{font-size:clamp(20px, calc(5.0vw - 8.0px), 40px);color:#7a7265;letter-spacing:0;}
.header-home{position:absolute;left:0;bottom:0;z-index:5;display:block;width:32px;height:32px;background:url('images/home.svg') 0 0 no-repeat;}

/* - ПОДВАЛ - */
.footer{height:20px;padding:5px;display:flex;align-items:center;border-top:1px solid var(--border);background:var(--footer-bg);}
.footer p{flex:1;width:50%;color:var(--muted);font-size:10px;margin:0;}
.footer p:last-child{text-align:right;}

/* БОКОВАЯ ПАНЕЛЬ есть только на индексе и главных страницах разделов. */
.panel{align-self:auto;flex:0 0 21%;min-width:0;min-height:0;padding:20px 5px 20px 8px;border-right:1px solid var(--border);background:#fdfcfb;display:flex;flex-direction:column;}
.panel>.mob-panel{display:block;flex:0 0 auto;min-height:455px;margin:0;padding:0;border:0;background:transparent;}

.sections-sidebar-slot{display:block;flex:0 0 auto;min-height:455px;margin:0;padding:0;}
.panel .sections-menu{width:100%;min-height:455px;margin:0;padding:0 0 18px 0;}
.panel .sections-menu>.menu-button{display:none;}
.panel .sections-menu>.sections-submenu{position:static;display:flex;width:100%;min-width:0;flex-direction:column;gap:5px;padding:0 0 18px;border:0;background:transparent;box-shadow:none;}
.panel .sections-menu:hover>.sections-submenu,
.panel .sections-menu:focus-within>.sections-submenu,
.panel .sections-menu.is-open>.sections-submenu{display:flex;}
.panel .sections-submenu a{display:block;padding:0;color:var(--menu);font-size:16px;line-height:1.25;text-align:left;}
.panel .sections-submenu a:hover,.panel .sections-submenu a.active{color:var(--hover);}
.panel .vmenublock,.panel .vcontent{display:contents;}
.panel .vmenu{position:static;width:100%;margin:0;padding:0;float:none;border:0;list-style:none;}
.panel .vmenu ul{margin:0;padding:0 0 0 10px;}
.panel .vmenu li{padding:0 0 5px;font-size:16px;}
.panel .vmenu a{display:block;padding:0;color:var(--menu);font-size:16px;line-height:1.25;text-shadow:none;text-align:left;}
.panel .vmenu ul a{font-size:14px;}
.panel .vmenu a:hover,.panel .vmenu a.active{color:var(--hover);}

/* Контакты */
.blockheader{margin:0 0 10px;padding-left:30px;color:var(--title);font-size:16px;background:url('images/a-5.svg') 0 0 no-repeat;}
.panel>.block{flex:1 1 auto;min-height:0;margin-top:0;padding-top:15px;border-top:1px solid var(--border);background:none;display:flex;flex-direction:column;}
.panel>.block>.author{margin-top:auto;padding:20px 0;color:var(--menu);}
.author a,.block a{color:var(--menu) !important;font-size:14px;}

/* - ГОРИЗОНТАЛЬНОЕ МЕНЮ - */
.top-menu{width:auto;display:flex;justify-content:flex-end;align-items:center;gap:20px;position:absolute;bottom:5px;right:10px;}
.top-menu a{color:var(--menu);font-size:18px;}
.menu-button{display:block;border:0;background:transparent;color:var(--menu);font-size:18px;line-height:135%;cursor:pointer;white-space:nowrap;}

/* - ПОДМЕНЮ В ГОРИЗОНТАЛЬНОМ МЕНЮ - */
.top-menu a:hover,.top-menu a:focus,.menu-item.is-open>.menu-button{color:var(--hover);outline:none;background:var(--header-bg);}
.menu-item{position:relative;}
.submenu{position:absolute;z-index:50;display:none;padding:5px;border:1px solid var(--border);border-left:4px solid var(--border);border-bottom:4px solid var(--border);background:#fff;box-shadow:2px 2px 5px rgba(0,0,0,.12);}
.menu-item:hover>.submenu,.menu-item:focus-within>.submenu,.menu-item.is-open>.submenu{display:block;}
.submenu a{display:block;padding:2px 0 5px 2px;color:var(--menu);font-size:16px;line-height:1.25;text-shadow:none;white-space:normal;}
.portal-submenu,.context-submenu{width:320px;}
.context-submenu li{display:block;padding:0;font-size:16px;}
.context-submenu .vmenu ul{margin:0;padding:0 0 0 10px;}
.context-submenu .vmenu ul a{font-size:14px;}
.vmenu ul{list-style:none;}
.region-menu{position:relative;float:right;margin:-40px 0 0 10px;z-index:5;}
.region-menu>.menu-button{padding:3px 8px;font-size:16px;}
.region-submenu{right:0;left:auto;width:448px;grid-template-columns:1fr 1fr;gap:0;text-align:left;}
.region-menu:hover>.region-submenu,.region-menu:focus-within>.region-submenu,.region-menu.is-open>.region-submenu{display:grid;}
.region-submenu__column{min-width:0;}
.region-submenu p{margin:0;text-align:left;}
.region-submenu a{padding:2px 6px 4px;font-size:15px;white-space:normal;color:var(--menu) !important;}

/* Тематические меню имеют разный состав, но один внешний вид. */
.main>.mob-panel{display:none;}

/* Мобильные кнопки скрыты до включения адаптивного режима.*/
.mob-button,.mob-button-map{display:none;} 

/* Базовая типографика. */
h1,h2,h3,h4,h5,h6,p,a,ul,ol,li,th,td,label{font-weight:normal;font-style:normal;text-decoration:none;text-indent:0;line-height:135%;font-size:14px;}
h1{margin:0 0 15px 0;font-size:20px;text-align:left;text-shadow:1px 1px 0 #efebde;}
h2{margin:10px 0 2px 0;font-size:18px;}
h3{margin:7px 0 0 0;font-size:16px;}
p{margin:0 0 5px 0;text-align:justify;}
a{color:var(--accent);}
a:hover{color:var(--hover);}

.content ul{margin:0 0 10px 24px;list-style:disc;}
.content li{padding:2px 0;font-size:14px;}
.content li::before{content:none;}

/* ТАБЛИЦЫ. */
table{width:100%;border-collapse:collapse;margin:0 0 15px 0;}
th,td{border:none;vertical-align:top;text-align:left;}
th{padding:5px 5px 2px 0;font-size:14px;}
td{padding:2px 5px 2px 0;font-size:13px;}

label{display:block;font-size:16px;padding-left:20px;margin:10px 0px 0 0;cursor:pointer;line-height:115%;text-align:left;color:#106475;}
input{width:50%;border-radius:3px;border:1px solid #5A905A;margin:10px 10px 0 0;padding:5px;font-size:14px;}
input[type="checkbox"],input[type="radio"]{display:none;}
input[type="radio"] + label{background: url('images/14radio-0001.png') 0 1px no-repeat;}
input[type="radio"]:checked + label{background: url('images/14radio-ch-0001.png') 0 1px no-repeat;}
input[type="checkbox"] + label{background:url('images/14check-1.png') 0 0px no-repeat;}
input[type="checkbox"]:checked + label{background:url('images/14check-ch-1.png') 0 0px no-repeat;color:#106475;}

/* Общие стили встроенных SVG-карт. */
.ua{fill:none;stroke:#555;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;}
.obl{fill:none;stroke:#555;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;}
.city{fill:#828282;fill-opacity:0.2;stroke:#555;stroke-width:5;}
.sea{fill:#3abffb;stroke:none;}
.water{fill:#3abffb;stroke:#3abffb;stroke-width:1.5;}
.water1{fill:#3abffb;stroke:#5fcdff;stroke-width:1;}
.riv{fill:none;stroke:#3abffb;stroke-width:10;}

/* SVG-карта выбора областей. */
.obl-m{fill:#4682B4;fill-opacity:0.0;stroke:#4682B4;stroke-width:8;cursor:pointer;}
.obl-m:hover{fill:#4682B4;fill-opacity:0.3;}

/* Главная страница. */
.ind-txt h2{margin:10px 0 3px 0;font-size:16px;}
.ind-txt p,.fs16{font-size:16px !important;}
.ind-txt a{font-size:16px;color:var(--accent);}
.ind-txt a:hover{color:var(--hover);}
.ind-txt ul{margin:0 0 5px 25px;list-style:none;}
.ind-txt li{padding:2px 0;font-size:16px;}
.ind-txt li:before{position:relative;bottom:2px;content:url('images/8.png');margin:0 0 0 -15px;padding:0 8px 0 0;}
.ris-1{float:left;margin:5px 25px 10px 0;}
.topic{margin:5px 25px 25px 0;float:left;}
.topic-txt{display:flex;flex-wrap:wrap;gap:0 25px;align-items:flex-start;}
.col{flex:1;}
.full-row{width:100%;}
/* Маленькие карты нга главной странице. */
.mini{margin:0 0 20px 0;width:30%;}
.map-ind{display:flex;flex-wrap: wrap;gap:2px;margin:5px 0 0 0;justify-content: space-between;}
.minimap{flex-basis:15%;padding:0 5px;border:solid 1px var(--border);}
.minimap a{font-size:14px;color:var(--accent);}
.minimap img{padding:5px 0 0 0;}

/* Блок заказа карт. */
.zakaz{position:relative;top:15px;left:0px;cursor:pointer;color:var(--menu);}
.zak-txt{position:absolute;width:400px;bottom:18px;left:90px;padding:10px;border:1px solid #b3c9ce;border-radius:4px;background:#fff;box-shadow:3px 3px 3px rgba(0, 0, 0, .3);transition:opacity 0.3s;z-index:20;cursor:auto;display:none;}
.zakaz:hover .zak-txt{display:block;}
/* Модальное окно. */
.modal{display:block;position:fixed;visibility:hidden;width:min(800px,calc(100vw - 40px));max-height:calc(100vh - 40px);margin:0 auto;padding:0 0 10px 0;top:20px;right:0;left:0;border:1px solid var(--border);background:#fff;box-shadow:0 0 2px 2px rgba(65, 50, 8, .3);opacity:0;z-index:500;}
.modal-fon:target+.modal{top:20px;visibility:visible;opacity:1;}
.modal-fon{position:fixed;visibility:hidden;top:0;right:0;bottom:0;left:0;background-color:rgba(250, 250, 250, 0.5);opacity:0;z-index:10;}
.modal-fon:target{visibility:visible;opacity:1;}
.modal-hed{padding:5px 15px;font-size:18px;color:var(--menu);background:#f7f5f0;border-bottom:1px solid var(--border);}
.modal-close{position:absolute;width:20px;height:20px;top:5px;right:5px;background:#E5E5E5 url('images/1-cl.png') no-repeat;}
.modal-close:hover{background:#D1D1D1 url('images/1-cl.png') no-repeat;}
.modal-content{max-height:calc(90vh - 95px);padding:20px;margin:10px 0 0 0;overflow-y:auto;}
.modal-content ul{margin:0 0 14px 22px;list-style:disc;}
.modal-content li{padding:3px 0 5px 0;font-size:14px;line-height:1.35;}
.modal-content li::before{content:none;}
.modal-content p{font-size:16px;}
.modal-content a{color:var(--accent);}

/* Всплывающие информационные блоки на картах. */
.info{position:relative;float:right;width:25px;margin:-40px 20px 0 0;padding:0 0 0 15px;cursor:pointer;z-index:15;}
.infotext{position:absolute;top:0;right:15px;display:none;width:min(800px,calc(100vw - 80px));max-height:min(80vh,800px);overflow:auto;padding:10px;border:1px solid var(--border);border-radius:4px;background:#fff;box-shadow:2px 2px 8px rgba(0,0,0,.18);cursor:auto;}
.info:hover .infotext,.info:focus-within .infotext{display:block;}
.infotext1{width:min(550px,calc(100vw - 80px));}
.infotext2{width:min(700px,calc(100vw - 80px));}
.infotext3{width:min(450px,calc(100vw - 80px));}
.infotext4{width:min(1000px,calc(100vw - 80px));}
.infotext5{width:min(750px,calc(100vw - 80px));}
.infotext.w950{width:min(950px,calc(100vw - 80px));}
.info th,.info td{border:1px solid var(--border);padding:2px 5px;vertical-align:middle;}
.infotext ul{margin:0 0 0 25px;list-style:none;}
.infotext li{padding:3px 0;font-size:14px;}
.infotext li:before{position:relative;bottom:2px;content:url('images/8.png');margin:0 0 0 -15px;padding:0 8px 0 0;}
.infotext2 td{border:none;}

/* Служебные классы ширины, отступов и выравнивания. */
.w5{width:5%;}
.w8{width:8%;}
.w10{width:10%;}
.w15{width:15%;}
.w20{width:20%;}
.w25{width:25%;}
.w30{width:30%;}
.w35{width:35%;}
.w40{width:40%;}
.w55{width:55%;}
.w950{width:950px;}
.mt5{margin-top:5px;}
.mt15{margin-top:15px;}
.mb5{margin-bottom:5px;}
.ml10{margin-left:10px;}
.mr15{margin-right:15px;}
.bb{border-bottom:solid 1px black;}
.bt{border-top:solid 1px black;line-height:135%;}
.fl{float:left;}
.fr{float:right;}
.tar{text-align:right;}
.tac{text-align:center;}
.vac{vertical-align:middle;}
.fs15{font-size:15px !important;}
.fs14{font-size:14px;}
.f1{top:-2px;border-bottom:solid 1px black;}
.f5{top:15px;}
.ok-mob,.no{display:none;}
hr{width:50%;height:1px;margin:15px 0 10px 0;border:none;background:#D8D2C6;}

/* - ПЛАНШЕТЫ - */
@media (max-width:1024px){
.page{width:100%;box-shadow:none;}
header{padding:10px 25px;height:170px;}
.header-main{left:0;}
.title{font-size:42px;padding-left:30px;}
.content{padding:20px 10px 20px 10px;}
.logo{display:none;}
.top-menu{position:static;width:auto;height:auto;margin:5px 0 0 0;padding:0;display:flex;flex-direction: column-reverse;align-items:flex-end;gap:5px;}
.submenu{right:0;}
.map-ind {gap:3px;margin:15px 0;}
}

/* - МОБИЛЬНАЯ ВЕРСИЯ - */
@media (max-width:760px){
.no-mob,.layer3,.custom-controls{display:none !important;}
.ok-mob{display:block;}
body{background:#fff;}
.main{display:block;}
.page{width:100%;min-height:100vh;}
header{height:auto;padding:15px 15px 10px 15px;}
.header-main{height:auto;padding-left:0;position: initial;top:auto;left:auto;}
.title{padding:0 0 15px 0;border-bottom:1px solid var(--border);}
.name1{font-size:7.0vw;padding:0 0 10px 0;}
.name2{font-size:5.8vw;}
.top-menu{width:100%;margin-top:10px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"project author" "portal sections" "topic topic";gap:1px 15px;position:unset;}
.top-menu a,.menu-button{padding:4px 0;font-size:16px;}
.top-menu__project{grid-area:project;}
.top-menu__author{grid-area:author;}
.portal-menu{grid-area:portal;}
.context-menu--sections{grid-area:sections;}
.context-menu--topic{grid-area:topic;width:100%;position:relative;}

/* Меню конкретного раздела на мобильных стоит в шапке отдельной широкой кнопкой. */
.top-menu>.mob-button-map--header,
.top-menu>.context-menu--topic>.menu-button{grid-area:topic;display:block;width:100%;height:auto;margin:5px 0 0;padding:5px 10px;border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--menu);font-size:16px;line-height:1.25;text-align:center;cursor:pointer;}
.portal-menu,.context-menu--sections{position:static;}
.portal-menu>.submenu,.context-menu--sections>.submenu{left:0;right:auto;width:100%;}
.context-menu--topic>.context-submenu{left:0;right:auto;width:100%;}
.region-menu{float:none;margin:0 0 10px 0;}
.region-menu>.region-submenu{right:auto;left:0;width:100%;}
.region-submenu a{font-size:14px;}
.header-home{top:0;right:0;left:auto;}

/* Основной каркас и левая панель раскрываются только по кнопке меню. */
.main,.main--with-sidebar{display:block;min-height:0;}
.panel{width:100%;min-height:0;padding:5px 10px;border-right:0;border-bottom:1px solid var(--border);}
.panel.panel--sections-menu-moved{display:none;}
.panel.panel--mobile-menu-host{display:none;}
.panel.panel--mobile-menu-host.panel--mobile-menu-open{display:block;}
.content{width:100%;padding:10px;}
.panel>.block,.panel>.author{display:none;}
.panel .mob-button,.panel .mob-button-map{position:static;display:inline-block;width:auto;height:auto;padding:0;}
.panel .mob-button img{display:block;width:28px;height:28px;}
.panel .mob-button-map,.main>.mob-button-map{padding:5px 10px;border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--menu);font-size:16px;cursor:pointer;text-align:center;}
.main>.mob-button-map{position:static;display:inline-block;width:auto;height:auto;margin:8px 0 8px 10px;}
.panel .mob-panel,.main>.mob-panel{display:none;width:100%;margin:0 0 10px;padding:10px;border:1px solid var(--border);background:#fff;}
.main>.mob-panel{width:calc(100% - 20px);margin:0 10px 10px;}
.panel .mob-panel.is-open,.main>.mob-panel.is-open{display:block;min-height:0;}
.content-map{padding:10px;}
.portal-menu>.menu-button,.context-menu--sections>.menu-button{padding:4px 0;border:0;border-radius:0;background:transparent;}
.context-menu--topic>.menu-button{padding:5px 9px;border:1px solid var(--border);border-radius:5px;background:#fff;}
.context-submenu{position:absolute;width:min(320px,calc(100vw - 36px));}
.main>.mob-panel .vmenu>li>p{display:none;}
.main>.mob-panel .vmenublock,.main>.mob-panel .vcontent{display:contents;}
.main>.mob-panel .vmenu{position:static;width:100%;margin:0;padding:0;float:none;border:0;list-style:none;}
.main>.mob-panel .vmenu li{padding:0 0 5px;font-size:16px;}
.main>.mob-panel .vmenu a{display:block;padding:0;color:var(--menu);font-size:16px;line-height:1.25;text-shadow:none;}
.main>.mob-panel .vmenu ul{margin:0;padding:0 0 0 10px;list-style:none;}
.main>.mob-panel .vmenu ul li{padding:0 0 5px;}
.main>.mob-panel .vmenu ul a{font-size:14px;}
.main>.mob-panel .vmenu a:hover,.main>.mob-panel .vmenu a.active{color:var(--hover);}

/* Главная страница и разделы: картинки и мини-карты не вылезают за экран. */
.topic,.ris-1,.ris-2{float:none;display:block;max-width:100%;height:auto;margin:5px auto 15px auto;}
.minimap{flex:1 1 calc(50% - 8px);}
.minimap img{display:block;margin:0 auto;}
.mini{width:100%;}
.topic-txt{display:block;width:100%;}
}
