/* xiron-ui.css — общее оформление служебных страниц xiron.ru Каркас (шапка, меню, боковая колонка, подвал), типографика, формы калькуляторов, таблицы, кнопки. Подключается из header_calc.tpl и header4.tpl. Кодировка windows-1251. */ #body {font:11px/1.5 Verdana, Arial, Helvetica, sans-serif; background:#FFF} #text {margin:50px auto; width:500px} .hotspot {color:#900; padding-bottom:1px; border-bottom:1px dotted #900; cursor:pointer} #tt {position:absolute; display:block; background:url(images/tt_left.gif) top left no-repeat} #tttop {display:block; height:5px; margin-left:5px; background:url(images/tt_top.gif) top right no-repeat; overflow:hidden} #ttcont {display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#666; color:#FFF} #ttbot {display:block; height:5px; margin-left:5px; background:url(images/tt_bottom.gif) top right no-repeat; overflow:hidden} .dark_blue{color:#324b82;}.light_blue{color:#98a5c0;}.gray{color:#e9e9e9;}body{background:#FFF;margin:0;}body,td{font:16px Helvetica, sans-serif;color:#000; line-height:20px;}img{border:0;margin:0;}a{color:#324b82;text-decoration:underline;}a:hover{text-decoration:none; ; color:8493b4;}h1{font-size:20px;font-weight:700;color:#324b82;opacity:0.9;}h2{color:#324b82;font-size:18px;font-weight:700;}.header,.logo,.contacts,.top_image{background-color:#324b82;background-image:url("data:image/gif;base64,R0lGODlhBABPAOYAADJLgjFKgDBIfTFJfyo/bio/bS5FeDBHfCxCci1EdStBcDJLgS9Gei9Hey1DdTJKgS9GeS1EdjFKgSxCcyxCcSo+bCtAbipAbytAcC5Edy5Gei1EdzFIfTBHezFKfyxDcyxBcSxDdC1DdC9HejJKgitAby5EdjBHfSo/bDBJfTFJfi9GeCtCci1CczBJfi5FdzBIfCk+bCs/bjFLgS5GeC5FditCcSpBby1FdzJKgC1FeCxBci5HeixCdCk/bS9IfC5GeTBJfy9FeS1CdCpAbio/bytBcTBIfjFIfjFJgCk+bTBIewAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAEAE8AAAfUgACCg4SFhoeIhAuJjI2JJISQJAsLEgAzDwsPEpoPDzMBlQESOQGmpwOnHkkDHgOtQa+yAy5HKkgcKS4qHAIpvQLBwgInMMQHyDAHP0vIDR3PDc8jIw0MIwzZDBoaPBoQ4BBAK0IrEDQG6ekvOukZ7y84Jhs1GyYRGwkR+w4OCf/+AooYGKLgkA8terSYMOHDBAQOEbBggQDBjooUMtowAoKCAhAKPirAEBJDCZMXMFy4ccFCiZZEihAgYMGCDBkzCRQokHPnzhgFlFSogMJHjKEoAgEAOw==");background-repeat:repeat-x;}.logo{vertical-align:middle;text-align:center;}.top_image{text-align:center;vertical-align:top;margin:0;padding:0;}.contacts{color:#FFF;white-space:nowrap;}.contacts a{color:#FFF;}.main_menu{background-color:#98a5c0;border-top:1px solid #FFF;padding:5px 10px;}.main_menu_items{float:left;padding-top:4px;}.main_menu_items a{padding-right:15px;color:#FFF;text-transform:uppercase;text-decoration:none;font-weight:700;font-size:13px;}.search{float:right;color:#FFF;white-space:nowrap;padding:0 10px; width:180 px;}.search a{color:#FFF;font-weight:700;}.menu{width:250px;background-color:#f2f2f2;height:100%;vertical-align:top;}.menu h2{background-color:#324b82;color:#FFF;margin-bottom:3px;white-space:nowrap;padding:5px 10px 4px;}.ctitle{position:relative;top:-32px;right:-250px;margin-bottom:-25px;width:20px;}.menu .menu_items{line-height:180%;white-space:nowrap;padding:2px 10px;}.content{width:100%;vertical-align:top;padding:5px 15px;}.counters{background-color:#f2f2f2;text-align:center;}.ad{font-size:10px;padding:11px;}.over_footer{background-color:#98a5c0;text-align:center;color:#FFF;padding:3px;}.footer{background-color:#324b82;border-top:1px solid #FFF;padding:10px;}.contentheadingvivi{font-size:14px;font-weight:700;color:#324b82;text-align:left !important;}.contentheading{font-size:15px;font-weight:700;color:#324b82;}.moduletable_kurs{width:120px;color:#fff;}.curs{color:#fff;}BLOCKQUOTE{font:bold 95% arial, sans-serif;color:#666;}a.box_title{display:block;color:#000;text-decoration:none;margin-top:5px;padding:10px 10px 10px 2px;}.information{background:#fff;margin-bottom:10px;}a#active_menuvivi{color:#00f;}.contentpagetitleblog{font:2.167em/128% normal Verdana, Tahoma, sans-serif;color:#0000ff;font-weight:400;font-size:130%;margin:0;padding:0;}input,.input1{border-radius: 3px;border:solid 1px #2c4272;font-size:110%;color:#000;font-weight:700;}.menu a.current,#active_menu{text-decoration:none;color:#000;font-weight:700;padding-right:25px;background-image:url("data:image/gif;base64,R0lGODlhCAAJAIAAADJLgv///yH5BAAAAAAALAAAAAAIAAkAAAINhI+JoRCcHjxPzYZNAQA7");background-position:right;background-repeat:no-repeat;}.ad a,.rekl,.pagenav_next,.pagenav_prev{font-size:10px;color:gray;}p,.contentpaneopen,table.contentpaneopen,table.contentpaneopen td,table.contentpaneopen td.componentheading{text-align:left !important;} ul{ list-style-image: url("data:image/gif;base64,R0lGODlhBQALAMQTADdabgAtTjRYblNzgAAoSDxbcDRZaYuisn6TpD9idnKMnSZMYwEkQoaisFFwgmqHlQApTAAoREtyg////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABMALAAAAAAFAAsAAAUa4CSOZFkuwtgQxXgEwJhAyKQww/REjmhIoxAAOw=="); vertical-align:middle;} h4{color:#324b82;font-size:13px;font-weight:700;} .menu h4{background-color:#324b82;color:#FFF;margin-bottom:3px;white-space:nowrap;padding:5px 10px 4px;} a[name*="1"] {font-size:23px;color:rgb(0, 0, 0);} a[name*="2"] {font-size:23px;color:rgb(0, 0, 0);} a[name*="3"] {font-size:23px;color:rgb(0, 0, 0);} a[name*="4"] {font-size:23px;color:rgb(0, 0, 0);} a[name*="5"] {font-size:23px;color:rgb(0, 0, 0);} a[name*="6"] {font-size:23px;color:rgb(0, 0, 0);} a[name*="7"] {font-size:23px;color:rgb(0, 0, 0);} a[name*="8"] {font-size:23px;color:rgb(0, 0, 0);} a[name*="9"] {font-size:23px;color:rgb(0, 0, 0);} a[name*="10"] {font-size:23px;color:rgb(0, 0, 0);} .input2{border-radius: 3px;border:solid 1px #2c4272;font-size:110%;color:#000;font-weight:700;} .ah2{font-size:19px; line-height:20px; opacity:0.85; color:rgb(49, 96, 130); } #IDD, #IDD1, #IDD2, #IDD3, #IDD4, #IDD5 { width: 60px; /* Ширина поля в пикселах */ padding:2px; } .container { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* на валидный */ html { /* overflow-y: auto; */ /* или удалить */ } .pagenavcounter { font-size:13px; line-height:30px; height:39px; font-weight:bold; color:rgb(0, 96, 186); font-family:Arial,sans-serif; } .pagenavbar { font-size:16px; line-height:30px; color:rgb(0, 0, 0); background-color:rgba(0, 0, 0, 0.046875); background-position:30% 34%; } .cli2 { background: #eef4ff; padding: 16px; margin: 20px 0; font-family: 'Verdana', sans-serif; border: 1px solid #c5d8f0; border-radius: 8px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); flex-wrap: wrap; } .cli-icon { width: 48px; height: 48px; flex-shrink: 0; } .cli-icon svg { width: 100%; height: 100%; } .arrow-bounce { animation: bounce 1.8s infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } .cli-button { background-color: #0057d9; color: white; text-decoration: none; font-size: 1em; padding: 10px 16px; border-radius: 6px; transition: background-color 0.3s ease; white-space: nowrap; } /* ‘легка увеличиваем область клика и текст на мобильных */ @media (max-width: 480px) { .cli2 { flex-direction: column; align-items: stretch; text-align: center; padding: 12px; } .cli-icon { margin: 0 auto 8px; } .cli-button { display: block; width: 100%; padding: 14px 0; font-size: 1.1em; } } .cli-button:hover { background-color: #003eaa; } .blog5{ font-size:13px; color:rgb(35, 44, 217); background-color:rgb(242, 246, 247); opacity:0.9; border-bottom-width:0px; font-weight:bold; background-position:31% 30%;} h3{color:#0f2862;font-size:16px;} .R134 { PADDING-RIGHT: 4px; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; COLOR: black; PADDING-TOP: 2px; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #8acef3; TEXT-ALIGN: center } .R135 { PADDING-RIGHT: 4px; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; COLOR: black; PADDING-TOP: 2px; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #f2f2f2; TEXT-ALIGN: center } .model{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:15px;color:#ED8A05;font-weight:700;border-bottom:1px solid #C5DCE2;margin:5px 5px 0;padding:5px 0 5px;} .vk {font-size:105%;color:#cccccc;font-weight:700;} .test1 {font-size:20px;font-weight:700;PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 5px;} .top1 {font-size:25px;color:#b5b1b1;font-weight:700; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 5px;PADDING-TOP: 30px;} .tabl3 {padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; vertical-align: top;} .gallery1 { padding:3px; background:#fff; border:1px solid #ccc; } .cli { background: #fdfdfd; padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px; font-family: Verdana; border: 1px solid #EBEBEB; -moz-border-radius: 5px 5px 0px 5px; -webkit-border-radius: 5px 5px 0px 5px; border-radius: 5px 5px 0px 5px; } .var1 { font-size:18px; line-height: 1.3; background: #fdfdfd; padding: 5px 5px 5px 5px; margin: 5px 5px 5px 5px; font-family: Verdana; border: 1px solid #EBEBEB; -moz-border-radius: 5px 5px 0px 5px; -webkit-border-radius: 5px 5px 0px 5px; border-radius: 5px 5px 0px 5px; } h1.h1-1 { max-width: 1000px; display: block; white-space: normal; /* старое правило .h1-1 запрещало перенос — заголовок резало по краю экрана */ overflow-wrap: break-word; word-wrap: break-word; font: 700 24px/1.25 Helvetica, Arial, sans-serif; color: #1f3560; margin: 10px 0 4px; padding: 0; opacity: 1; } .pathway { font-size: 13px; color: #667; } .pathway a { color: #4a6ca8; } .h1-sub { max-width: 1000px; font-size: 15px; color: #555; margin: 0 0 12px; } /* Контент лежит в табличной вёрстке. Без width:100% + table-layout:fixed ячейка растягивается по максимальной ширине содержимого, и страница уезжает вправо. */ table.blog { width: 100%; } table.contentpaneopen { width: 100%; table-layout: fixed; } .content { max-width: 100%; } .content img { max-width: 100%; height: auto; } @media (max-width: 992px) { .content { padding: 5px 10px; } h1.h1-1 { font-size: 21px; } .h1-sub { font-size: 14px; } /* nowrap в шапке и меню распирал таблицу шире экрана */ .contacts, .menu_items, .menu h4 { white-space: normal; } } @media (max-width: 640px) { h1.h1-1 { font-size: 19px; } } /* --- доступность --- */ /* Область нажатия у телефонов и почты. В ШАПКЕ высоту НЕ трогаем: ячейка .contacts лежит в той же строке таблицы, что логотип и фотография, и её рост растягивает всю шапку. Поэтому здесь только горизонтальные отступы, без inline-block. */ /* отступы контактов заданы ниже, в блоке областей нажатия */ /* Подвал отдельной строкой таблицы, вертикальные отступы там безопасны. */ .over_footer a { display: inline-block; min-height: 24px; padding: 6px 5px; } /* Белый текст на #98a5c0 давал контраст 2.5 при норме 4.5 — фон затемнён. Верхнее меню (.main_menu) намеренно НЕ трогаем: Lighthouse на него не ругался, а смена фона заметно меняет вид шапки. */ .over_footer { background-color: #59688e; } /* белый текст: контраст 5.5 */ .over_footer a.main_t, .over_footer a { color: #ffffff; } /* ============================================================ КАРКАС СТРАНИЦЫ БЕЗ ТАБЛИЦ Раньше вся страница была одной таблицей: шапка, меню, боковая колонка и подвал — её строки. Отсюда и тянулись проблемы: высота одной ячейки двигала всю строку. Теперь это блоки, классы прежние, поэтому остальной CSS цел. ============================================================ */ .hdr-row { display: flex; align-items: stretch; flex-wrap: nowrap; } /* Фон шапки. Исходно это картинка-градиент высотой 79 px с repeat-x. Когда шапка стала выше, ниже 79 px фона не оставалось — отсюда была белая полоса. Растягивать градиент по высоте тоже нельзя: в спрайт с логотипом вшит фон ровного цвета, и на границе плашки появлялся видимый прямоугольник — растянутый градиент по краям темнее (#2e3f6b против #364a7d внутри спрайта). Поэтому шапка заливается ровным цветом — тем же, что вшит в спрайт. Перепад пропадает, градиент был почти незаметен. */ /* Градиент шапки вернулся: он рисуется средствами CSS и тянется на любую высоту без швов. Прежняя картинка-градиент высотой 79 px с repeat-x этого не умела. */ .hdr-row { background: linear-gradient(#2a3f6c, #324b82); } .hdr-row .logo, .hdr-row .contacts { background: none; } .hdr-row .logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0 14px; } .hdr-row .top_image { flex: 1 1 auto; text-align: center; line-height: 0; font-size: 0; overflow: hidden; align-self: flex-start; } .hdr-row .contacts { flex: 0 0 auto; display: flex; align-items: center; padding: 2px 14px; } /* Логотип и фотография вынесены из спрайта в отдельные файлы. Логотип в спрайте уже был с прозрачностью, поэтому ложится на любой фон. Фотография растягивается на всю высоту ячейки (cover), и полосы фона под ней больше не остаётся — высота шапки свободная. Файлы: /images/xiron/xiron-logo.png и /images/xiron/header-photo.jpg */ .hdr-row .logo1 { /* Вектор из фирменного CorelDRAW-файла: 7 КБ, идеально резкий на любом экране и при любом размере. Пропорции 3.52, поэтому при ширине 190 высота 54. */ background: url('/images/xiron/xiron-logo.svg') no-repeat center / contain; width: 190px; height: 54px; max-width: 100%; } .hdr-row .image-top { display: none; } .hdr-row .top_image { position: relative; background: url('/images/xiron/header-photo.jpg') no-repeat center center; background-size: cover; min-height: 74px; overflow: hidden; /* Снимок прямоугольный, а фон шапки синий — границы читались как вставленная картинка. Маска растворяет фотографию по бокам, и переход становится незаметным. */ -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 90px, #000 calc(100% - 90px), rgba(0,0,0,0) 100%); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 90px, #000 calc(100% - 90px), rgba(0,0,0,0) 100%); } /* Верхний и нижний срезы снимка гасим накладкой цвета шапки: вверху она #2a3f6c, внизу #324b82 — ровно концы её градиента. */ .hdr-row .top_image:after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; background: linear-gradient(to bottom, #2a3f6c 0, rgba(42,63,108,0) 14px, rgba(50,75,130,0) calc(100% - 26px), #324b82 100%); } /* Область нажатия у телефонов и почты — на всех экранах. Раньше это ломало вёрстку: шапка была таблицей, и рост ячейки контактов тянул строку с логотипом и фотографией. Сейчас шапка на flex, а снимок растягивается по высоте (cover), поэтому она спокойно становится выше — ничего не разъезжается. */ .hdr-row .contacts a, .hdr-row .main_tel { display: inline-block; min-height: 24px; line-height: 24px; padding: 1px 6px; } @media (min-width: 993px) { .hdr-row .contacts { line-height: 1.3; } } .main_menu { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* Контраст верхнего меню. Текст оставляем белым, как и был, но прежний фон #98a5c0 давал контраст всего 2.48 при норме 4.5. Затемняем фон до #59688e — это 5.53, тот же тон, что и у подвала, так что шапка и низ страницы смотрятся заодно. */ .main_menu { background-color: #59688e; } .main_menu .main_menu_items a, .main_menu .search, .main_menu .search a { color: #ffffff; } .main_menu .main_menu_items a:hover { color: #ffffff; text-decoration: underline; } /* Активный пункт был синим #0000ff — на тёмном фоне он нечитаем. Выделяем его подчёркиванием, цвет остаётся белым (5.53). */ .main_menu a#active_menuvivi { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; } /* Область нажатия пунктов верхнего меню */ .main_menu .main_menu_items a { display: inline-block; padding: 6px 14px 6px 0; line-height: 1.6; } .main_menu .main_menu_items { float: none; } .main_menu .search { float: none; } /* Боковая колонка и контент */ .site-wrap { display: flex; align-items: flex-start; } .menu { flex: 0 0 250px; width: 250px; box-sizing: border-box; align-self: stretch; } /* Ссылки бокового меню стояли вплотную: высота строки 180 % даёт около 29 px, а между соседними пунктами почти нет зазора. Делаем их блочными с собственными отступами. */ .menu .menu_items a { display: block; padding: 5px 0; line-height: 1.4; } .menu .menu_items table { width: 100%; } .content { flex: 1 1 auto; min-width: 0; box-sizing: border-box; display: block; } .over_footer, .footer { display: block; } .footer { min-height: 24px; } @media (max-width: 992px) { .site-wrap { display: block; } .menu { display: none; } .content { width: 100%; } } /* ============================================================ ПЕРЕХОД В СТАНДАРТНЫЙ РЕЖИМ (HTML5 DOCTYPE) Вёрстка табличная и делалась под quirks. Ниже компенсация различий. Если что-то поедет — верните прежний DOCTYPE (HTML 4.01 Transitional) и удалите этот блок целиком. ============================================================ */ /* 1. Спрайты — inline-block. В стандартном режиме они стоят на базовой линии текста, и под ними остаётся зазор 3-5 px. Это и была белая полоса под логотипом при первой попытке перехода. */ .image-top, .sp, .logo1, .vkontakte, .twitter, .current-menu, .default { vertical-align: top; } /* 2. То же для картинок и фреймов внутри ячеек. */ td img, td iframe, td object, td svg { vertical-align: top; } /* 3. Ячейки шапки: фиксируем выравнивание явно, а не полагаемся на режим. */ .logo, .contacts { vertical-align: middle; } .top_image { vertical-align: top; line-height: 0; font-size: 0; } .top_image .image-top { line-height: 0; } /* 4. height:100% у боковой колонки в стандартном режиме требует цепочки высот у всех родителей и потому игнорируется. Ячейка таблицы и так тянется по высоте строки — оставляем auto. */ .menu { height: auto; } /* растягивание даёт align-self:stretch */ /* 5. Разделитель .sp над первым заголовком бокового меню — спрайт 250x1 px. Как inline-block он создаёт строку высотой в line-height (20 px), и в стандартном режиме к ней добавляется отступ заголовка. Делаем его блочным с нулевой строкой: сам разделитель остаётся в потоке (уголки .ctitle спозиционированы относительно него), а лишняя высота уходит. Если отступ покажется мал — увеличьте margin-top. */ .menu .sp { display: block; height: 1px; line-height: 0; font-size: 0; } /*
после разделителя давал лишнюю строку — серый отступ над «ХОЛОДИЛЬНОЕ ОБОРУДОВАНИЕ» получался около 35 px. */ .menu > br { display: none; } .menu > h4:first-of-type { margin-top: 10px; } /* 6. Поля и кнопки: ширина 100% вместе с padding должна укладываться в контейнер. */ input, select, textarea, button { box-sizing: border-box; } /* 7. Таблицы контента: в стандартном режиме между ячейками появляется отступ от border-spacing. */ table.contentpaneopen, table.blog { border-collapse: collapse; } /* ==================== /переход в стандартный режим ==================== */ /* --- МОБИЛЬНАЯ ШАПКА --- Блок намеренно стоит последним в стилях: правила каркаса выше задают .hdr-row{flex-wrap:nowrap}, и при обратном порядке они перебивали медиазапрос — контакты не переносились и растягивали страницу шире экрана. На мобильных выносим контакты в собственную строку. Раньше логотип, фотография и контакты лежали в ОДНОЙ строке таблицы, поэтому любое увеличение высоты ссылок растягивало всю шапку. Через display:flex строка перестаёт быть табличной: логотип остаётся наверху, контакты переносятся под него и получают свободную высоту. Теперь ссылкам можно дать полноценную область нажатия. */ /* Селекторы здесь обязаны быть той же силы, что и в блоке каркаса (.hdr-row .logo — два класса). Иначе десктопные правила выигрывают по специфичности даже внутри медиазапроса: именно поэтому контакты не переносились и почта уезжала за край экрана. */ @media (max-width: 992px) { .hdr-row { display: flex; flex-wrap: wrap; align-items: center; } .hdr-row .logo { flex: 0 0 auto; display: block; padding: 4px 10px 4px 66px; /* слева место под кнопку меню */ } .hdr-row .top_image { display: none; } .hdr-row .contacts { flex: 1 0 100%; display: block; white-space: normal; padding: 2px 10px 8px; line-height: 1.25; } .hdr-row .contacts strong { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; } .hdr-row .contacts br { display: none; } /* область нажатия: 40 px, шапке расти уже некуда */ .hdr-row .contacts a, .hdr-row .main_tel { display: inline-block; min-height: 40px; line-height: 40px; padding: 0 6px; } .hdr-row .logo1 { max-width: 100%; } } /* Страховка: даже если что-то в шапке окажется шире экрана, горизонтальной прокрутки у страницы не будет. */ html, body { max-width: 100%; overflow-x: hidden; } /* Видимый фокус для клавиатуры: контурная рамка была снята сбросом outline. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #ff8a00; outline-offset: 2px; } .var2 { font-size:18px; line-height: 1.8; background: #fdfdfd; padding: 5px 5px 5px 5px; margin: 5px 5px 5px 5px; font-family: Verdana; border: 1px solid #EBEBEB; -moz-border-radius: 5px 5px 0px 5px; -webkit-border-radius: 5px 5px 0px 5px; border-radius: 5px 5px 0px 5px; } .image-top, .sp, .logo1, .vkontakte, .twitter, .current-menu, .default { display: inline-block; background: url('/images/xiron/xiron_all.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; } .image-top { background-position: -0px -0px; width: 550px; height: 79px; } .sp { background-position: -0px -79px; width: 250px; height: 1px; } .logo1 { background-position: -250px -79px; width: 190px; height: 61px; } .vkontakte { background-position: -440px -79px; width: 18px; height: 18px; } .twitter { background-position: -458px -79px; width: 16px; height: 16px; } .current-menu { background-position: -474px -79px; width: 12px; height: 29px; } .default { background-position: -486px -79px; width: 9px; height: 9px; } .main_txt{font-size:16px;color:#323233;text-decoration:none; line-height:25px} blockquote{border-left:4px solid #f2f2f2;background:#f9f8f8;color:#000000;padding-left:20px;padding-right:20px;font-size:14px;line-height:32px;font-weight:bold;opacity:.95} .disable-hover { pointer-events: none; } /* ========================================================== ФОРМЫ КАЛЬКУЛЯТОРОВ (.xf-*) Единая разметка для всех служебных программ: batar, condenser, freon, dlin, teploizol и остальных. Раньше каждая форма была свёрстана вложенными таблицами со своим набором стилей. ========================================================== */ .xf{max-width:560px;margin:16px 0 24px} .xf-group{border:1px solid #dde5f2;border-radius:10px;padding:14px 16px 16px;margin:0 0 16px; background:#f8fafd} .xf-group legend{padding:0 8px;font-weight:600;color:#1f3560;font-size:15px} .xf-row{display:flex;align-items:center;gap:12px;margin-bottom:10px} .xf-label{flex:1 1 auto;color:#2a2a2a;font-size:15px} .xf-input,.xf-select{flex:0 0 150px;box-sizing:border-box;padding:9px 10px;font-size:15px; border:1px solid #c3cfe2;border-radius:6px;background:#fff;color:#222} .xf-select{flex-basis:210px} .xf-input:focus,.xf-select:focus{border-color:#0057d9;outline:2px solid #cfe0ff;outline-offset:0} .xf-checks{display:flex;flex-direction:column;gap:2px;margin-top:4px} .xf-check{display:flex;align-items:center;gap:10px;min-height:40px;cursor:pointer;font-size:15px} .xf-check input{width:18px;height:18px;accent-color:#0057d9;flex:0 0 auto} .xf-submit{display:block;width:100%;padding:13px 18px;font-size:16px;font-weight:700;color:#fff; background:#0057d9;border:0;border-radius:8px;cursor:pointer} .xf-submit:hover{background:#0043aa} .xf-hint{font-size:13px;color:#5a6a86;margin:-6px 0 12px} @media (max-width:560px){ .xf-row{flex-wrap:wrap;gap:4px} .xf-label{flex:1 1 100%} .xf-input,.xf-select{flex:1 1 100%} }