/* ----- Новый стилевой файл для Хумор 2 (с 109 выпуска) ----- */
/* Оглавление */
/* Элементы проверок браузера */
/* Стандартные элементы */
/* Верстка */
/* Элементы главной страницы */
/* Элементы меню */
/* Блоки */
/* Элементы схлопывания длинного текста */
/* Элементы вида вопрос-ответ */
/* Элементы сообщения */
/* Элементы акций */
/* Элементы SMS-ки */
/* Элементы Slide Show */
/* Элементы Video */
/* Эпиграф */
/* ------------------------ Элементы проверок браузера --------------------- */
.checkit {
background: #a04030;
padding: 5px;
}
.checkit2 {
border: 2px solid #f0f030;
background: #a04030;
padding: 10px;
color: #ffffff;
}
#CheckCSSanimation {
display: none;
overflow: hidden;
animation: anCheckCSSanimation 0s ease 0s infinite forwards;
-webkit-animation: anCheckCSSanimation 0s ease 0s infinite forwards;
}
@keyframes anCheckCSSanimation {
from {height: 100px; padding: 5px;}
to {height: 0px; padding: 0px;}
}
@-webkit-keyframes anCheckCSSanimation {
from {height: 100px; padding: 5px;}
to {height: 0px; padding: 0px;}
}
/* ------------------------ Стандартные элементы --------------------------- */
/* С выпуска 190 увеличены размеры шрифтов, старые с скобках */
table {
font-size: 13pt; /* Размер шрифта для таблиц в пунктах (11) */
}
/* Класс для указания таблице чтобы в ней не менялся размер шрифта */
.tablefixfont {
}
h1 {
color: #a52a2a; /* Цвет заголовка */
font-size: 23pt; /* Размер шрифта в пунктах (20) */
font-family: Georgia, Times, serif; /* Семейство шрифтов */
font-weight: normal; /* Нормальное начертание текста */
}
h2 {
color: #a52a2a; /* Цвет заголовка */
font-size: 20pt; /* Размер шрифта в пунктах (17) */
font-family: Georgia, Times, serif; /* Семейство шрифтов */
font-weight: normal; /* Нормальное начертание текста */
}
h3 {
color: #a52a2a; /* Цвет заголовка */
font-size: 16pt; /* Размер шрифта в пунктах (14) */
font-family: Georgia, Times, serif; /* Семейство шрифтов */
font-weight: normal; /* Нормальное начертание текста */
}
h4 {
color: #5a2a2a; /* Цвет заголовка */
font-size: 13pt; /* Размер шрифта в пунктах (11) */
font-family: Georgia, Times, serif; /* Семейство шрифтов */
font-weight: normal; /* Нормальное начертание текста */
}
h5 {
color: #5a2a2a; /* Цвет заголовка */
font-size: 9pt; /* Размер шрифта в пунктах (8) */
font-family: Georgia, Times, serif; /* Семейство шрифтов */
font-weight: normal; /* Нормальное начертание текста */
}
p {
text-align: justify; /* Выравнивание по ширине */
text-indent: 1.5em; /* Отступ первой строки (красная строка) */
/* Margin Отступ от линии границы до соседнего элемента в пикселах */
margin-left: 0px; /* было 3px, изменено в 112 выпуске */
margin-right: 0px; /* было 3px, изменено в 112 выпуске */
margin-top: 0px;
margin-bottom: 2px;
/* Border Параметры линии границы: ширина, стиль, цвет */
border-left: 0px solid gray;
border-right: 0px solid gray;
border-top: 0px solid gray;
border-bottom: 0px solid gray;
/* Padding Отступ от линии границы до текста внутри блока в пикселах */
padding-left: 0px; /* было 3px, изменено в 112 выпуске */
padding-right: 0px; /* было 3px, изменено в 112 выпуске */
padding-top: 0px;
padding-bottom: 2px;
}
/* noin добавлен с 106 выпуска */
.noin {
text-indent: 0em; /* Отмена отступа первой строки (красная строка) */
}
a img {
border: none; /* Удаляет рамки у картинки в ссылке */
vertical-align: middle; /* Сдвигает по центру, добавлено с выпуска 133 */
}
a:focus {outline: none;} /* без рамочки фокуса на ссылке, добавлено с 142 выпуска */
/* Цвета всех ссылок по умолчанию, добавлен с 149 выпуска */
a:link {color: #0000ee;}
a:visited {color: #551a8b;}
a:hover {color: #ee0000; cursor: pointer;}
a:active {color: #ee0000;}
button:hover {
cursor: pointer; /* Курсор в виде руки когда наведена мышка, добавлено с 124 выпуска */
}
/* --- Курсор указатель когда наведена мышка, добавлено с 124 выпуска --- */
.point:hover {cursor: pointer;}
/* --- Для сокрытия элемента, добавлено в 151 выпуске --- */
.hide {display: none;}
/* --- Элемент Crosswise del - Перечёркивание крест-накрест или вычеркивание --- */
/* Статья https://paulradzkov.com/2012/crosswise/ */
/* Добавлено с выпуска 226 */
/* Примеры: строчный элемент */
/* строчный элемент */
/* строчный элемент */
/* блочный элемент
*/
/* блочный элемент
*/
/* блочный элемент
*/
/* крестик cross */
del {
text-indent: 0em; /* иначе ломается внутри p с text-indent */
}
del.cross {
display: inline-block; /* запрещает перенос текста на следующую строку */
text-decoration: none;
position: relative;
}
.del-cross {
display: block;
position: relative;
overflow: hidden; /* запрещает обтекать другие блоки */
}
del.cross:before,
.del-cross:before {
content: '';
position: absolute;
display: block;
width: auto;
height: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0) url(cross.svg) no-repeat;
background-size: 100% 100%; /* растягивает фон на всю ширину и высоту блока */
}
/* линия слева-направо и снизу-вверх crossup */
del.crossup {
display: inline-block; /* запрещает перенос текста на следующую строку */
text-decoration: none;
position: relative;
}
.del-crossup {
display: block;
position: relative;
overflow: hidden; /* запрещает обтекать другие блоки */
}
del.crossup:before,
.del-crossup:before {
content: '';
position: absolute;
display: block;
width: auto;
height: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0) url(crossup.svg) no-repeat;
background-size: 100% 100%; /* растягивает фон на всю ширину и высоту блока */
}
/* линия слева-направо и свезху-вниз crossdown */
del.crossdown {
display: inline-block; /* запрещает перенос текста на следующую строку */
text-decoration: none;
position: relative;
}
.del-crossdown {
display: block;
position: relative;
overflow: hidden; /* запрещает обтекать другие блоки */
}
del.crossdown:before,
.del-crossdown:before {
content: '';
position: absolute;
display: block;
width: auto;
height: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0) url(crossdown.svg) no-repeat;
background-size: 100% 100%; /* растягивает фон на всю ширину и высоту блока */
}
/* -------------------------------- Верстка -------------------------------- */
/* --- Тело документа ---*/
body {
font-family: Arial, Verdana, sans-serif; /* Семейство шрифтов */
font-size: 13pt; /* Размер основного шрифта в пунктах (до выпуска 190 было 11) */
background-color: #e1dfb9; /* Цвет фона веб-страницы */
color: #303030; /* Цвет основного текста */
}
/* --- Глобальный контейнер --- */
#container {
max-width: 870px; /* Общая ширина, изменено в 112 выпуске, было 850px */
/* страница 700 = 870-(10+110+10)-(20+20) */
/* главная 690 = 870-(10+120+10)-(20+20) = 3*230 */
min-width: 470px; /* Ограничение на заужение, добавлено в 112 выпуске*/
margin: 10px auto 50px; /* Выравнивание по центру */
background: #d7d7d7; /* Цвет фона левой колонки , дополнение в sidebar */
}
/* --- Заголовок страницы (общий для выпуска и главной) --- */
#header {
font-size: 28px; /* Размер текста, с 156 выпуска, было 2.0em*/
text-align: center; /* Выравнивание по центру */
padding: 5px; /* Отступы вокруг текста */
background: #8fa09b; /* Цвет фона шапки */
color: #f0f0e0; /* Цвет текста */
}
/* --- Полоса навигации страницы выпуска и главной страницы --- */
#sidebar {
font-size: 14px; /* Размер текста */
margin-top: 10px;
width: 110px; /* Ширина слоя */
padding: 0 10px; /* Отступы вокруг текста верх-низ и право-лево*/
float: left; /* Обтекание по правому краю */
overflow-x: hidden; /* Не залазить на страницу. Добавлено с выпуска 143 */
overflow-y: auto; /* Авторазмер, полосы прокрутки при необходимости. Добавлено с выпуска 143 */
}
#sidebarmain {
font-size: 14px; /* Размер текста */
/*margin-top: 10px; */
width: 120px; /* Ширина слоя */
padding: 0 10px; /* Отступы вокруг текста верх-низ и право-лево*/
float: left; /* Обтекание по правому краю */
overflow-x: hidden; /* Не залазить на страницу. Добавлено с выпуска 143 */
overflow-y: auto; /* Авторазмер, полосы прокрутки при необходимости. Добавлено с выпуска 143 */
}
/* Год в sidebar, добавлено с 156 выпуска (раньше использовался h3)*/
.sbb0 {
color: #a52a2a;
font-size: 18px;
font-family: Georgia, Times, serif;
font-weight: normal;
padding-top: 10px;
padding-bottom: 10px;
}
/* Ссылки на выпуски в sidebar */
.sbb1 {
padding: 2px 0; /* Отступы вокруг текста верх-низ и право-лево*/
/*background: #d7d7d7; Цвет фона */
}
.sbb2 {
padding: 2px 0; /* Отступы вокруг текста верх-низ и право-лево*/
/*background: #d7d7d7; Цвет фона */
}
/* Буттон для изменения размера (схлопывания - зарворачивания) sidebar */
#sbbtw {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
position: relative;
float: right;
right: -10px;
background: #f0f0f0;
padding: 15px 2px; /* Отступы вокруг текста верх-низ и право-лево*/
color: #909090; /* Цвет основного текста */
}
/* --- Содержимое страницы выпуска и главной страницы --- */
#content {
margin-left: 130px; /* Отступ слева */
padding: 20px; /* Поля вокруг текста, изменено в 112 выпуске, было 10px */
background: #f0f0f0; /* Цвет фона правой колонки */
min-height: 200px;
min-width: 300px; /* Ограничение на заужение, добавлено в 157 выпуске*/
}
#contentmain {
margin-left: 140px; /* Отступ слева */
padding: 20px; /* Поля вокруг текста, изменено в 112 выпуске, было 10px */
background: #f0f0f0; /* Цвет фона правой колонки */
min-height: 200px;
min-width: 230px; /* Ограничение на заужение, добавлено в 157 выпуске*/
}
/* Блок контактов внизу содержимого страницы выпуска и главное страницы */
/* Добавлено с выпуска 156, вместо table используется обычный div */
#contact {
}
/* --- Подвал страницы (общий для выпуска и главной) --- */
#footer {
font-size: 14px; /* Добавлено с 156 выпуска */
background: #8fa09b; /* Цвет фона подвала */
color: #f0f0f0; /* Цвет текста */
padding: 5px; /* Отступы вокруг текста */
clear: left; /* Отменяем действие float */
}
/* Таблица в подвале для помещения кнопок. Добавлено с выпуска 139 */
.footertable {
font-size: 14px; /* Добавлено с 156 выпуска */
padding: 1px;
width: 100%;
}
/* Кнопка в подвале (span) */
.footerbut {
display: inline-block;
background: #f0f0f0;
color: #405040;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
padding-bottom: 4px;
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.footerbut:hover {
cursor: pointer;
background-color: #90d0c0; /* добавлено в 149 выпуске */
color: #003060; /* добавлено в 149 выпуске */
}
/* Картинка в кнопке в подвале (img) */
.footerimg {
border: 1px solid #8fa09b;
vertical-align: middle;
margin-right: 5px;
}
.footerimgright {
border: 1px solid #8fa09b;
vertical-align: middle;
margin-left: 5px;
}
/* Текст в кнопке в подвале (span) */
.footertext {
vertical-align: middle;
}
/* Ссылка в кнопке в подвале (a)*/
.footerlink {text-decoration: none; color: #405040;}
.footerlink:focus {outline: none;}
/* ----------------------- Элементы главной страницы ----------------------- */
/* Строки - колонка - ячейка - картинка на главной форме (добавлено с 111 выпуска) */
/* с 120-го выпуска появились строки и сама карта*/
#mainmap {overflow: auto;}
.mainmap {overflow: auto;}
.mainrow {overflow: auto;}
.maincol {
overflow: auto;
width: 230px;
float: left;
}
.maincell {
margin: 10px;
padding: 10px;
border: 1px solid gray;
width: 188px;
font-size: 10pt; /* Размер основного шрифта в пунктах */
}
/*Приподнятие ячейки когда на ней мышка, добавлено в 115 выпуске */
/*C 135 выпуска приподнятие убрано, оставлена рамка и тень, добавлена подстветка фона */
.maincell:hover {
border: 1px solid black;
/*margin-left: 5px;
margin-right: 15px;
margin-top: 5px;
margin-bottom: 15px; */
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
background: #ffffff;
}
/* Ссылка - ячейка целиком, как одно целое, добавлено в 115 выпуске*/
.maincelllink {text-decoration: none; color: #303030;}
.maincelllink:focus {outline: none;}
/* Уточнение ссылки (добавлено в 149 выпуске)*/
.maincelllink:link {color: #303030;}
.maincelllink:visited {color: #603060;}
.maincelllink:hover {color:#773030; cursor: pointer;}
.maincelllink:active {color: #773030;}
/* Картинка в ячейке */
.mainpic {
width: 188px;
}
/* --------------------- Элементы меню ------------------------------------- */
/* Добавлено с 156 выпуска */
/* Блок держалка меню */
#menukeyhold {
text-align: right;
font-size: 24px;
overflow: hidden;
}
/* Кнопка вызова меню */
#menukey {
text-align: center;
display: inline-block;
position: fixed;
z-index: 98;
margin-left: -19px;
padding-top: 3px;
width: 16px;
background: #8fa09b;
color: #f0f0e0;
overflow: hidden;
border: 1px solid #8fa09b;
/* top: 0px; */
}
#menukey:hover {
cursor: pointer;
background: #f0f0e0;
color: #8fa09b;
border: 1px solid #8fa09b;
}
/* Блок держалка меню */
#menuhold {
text-align: right;
font-size: 28px;
}
/* Само меню */
#menu {
display: inline-block;
position: fixed;
z-index: 99;
margin-left: -200px;
border: 1px solid #f0f0e0;
top: 0px;
text-align: left;
padding: 5px;
background: #8fa09b;
color: #f0f0e0;
overflow: hidden;
}
/* Позиция меню - строка текста */
.menuinfo {
padding-left: 5px;
padding-right: 5px;
font-style: italic;
color: #505030;
}
/* Позиция меню - акция */
.menuitem {
padding-left: 15px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
color: #f0f0e0;
}
.menuitem:hover {
background: #f0f0e0;
color: #8fa09b;
cursor: pointer;
}
/* ------------------------------ Блоки ------------------------------------ */
/* --- Блок объединения блоков, добавлен с 111 выпуска --- */
.merge{
overflow: auto; /* Авторазмер, полосы прокрутки при необходимости*/
}
/* --- Блок для текста --- */
.block {
/* Padding Отступ от линии границы до текста внутри блока в пикселах */
padding: 10px; /* все отступы */
padding-right: 20px; /* справа */
/* Параметры границы: ширина, стиль, цвет */
border: 1px solid gray;
/* Margin Отступ от линии границы в пикселах до соседнего элемента */
margin-left: 10px;
margin-right: 10px;
margin-top: 3px;
margin-bottom: 3px;
}
/* --- Блок для картинки --- */
.blockimg {
/* Margin Отступ от линии границы до соседнего элемента в пикселах */
margin-left: 10px;
margin-right: 10px;
margin-top: 3px;
margin-bottom: 3px;
/* Цвет фона если картинка не отобразилась, добавлено с выпуска 127 */
background-color: #f070f0;
/* Устраняет загадочную полосу внизу, но нельзя писать текст - не виден! */
/*line-height: 0;*/
/*font-size: 0;*/
}
/* Устраняет загадочную полосу внизу, добавлено с выпуска 127 */
.blockimg img {
display: block;
/*vertical-align: top;*/
}
/* Блок для картинки с фоном без margin, добавлено с выпуска 127 */
.blockpic {
/* Цвет фона если картинка не отобразилась */
background-color: #f070f0;
}
/* Устраняет загадочную полосу внизу, добавлено с выпуска 127 */
.blockpic img {
display: block;
}
/* --- Блок с автошириной по содержанию (добавлен с 112 выпуска) --- */
.inside {
/* Внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный. */
display: inline-block;
/* Выравнивание текста по левому краю. (если снаружи, например, center)*/
text-align: left;
}
/* --- Поля --- */
.border {border: 1px solid gray; /* Параметры границы: ширина, стиль, цвет */}
.noborder {border: 0px solid gray; /* Параметры границы: ширина, стиль, цвет */}
.pad {padding: 10px; /* Отступ от линии границы до текста внутри блока в пикселах */}
.nopad {padding: 0px; /* Нет отступа от линии границы до текста внутри блока */}
.margin {
/* Margin Отступ от линии границы до соседнего элемента в пикселах */
margin-left: 10px;
margin-right: 10px;
margin-top: 3px;
margin-bottom: 3px;
}
.nomargin {
/* Margin Нет оступа от линии границы до соседнего элемента */
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
.wide { /* Блок от края до края, добавлен в 112 выпуске для блоков разделителей тем */
/* Margin Отступ от линии границы до соседнего элемента в пикселах */
margin-left: 0px;
margin-right: 0px;
margin-top: 3px;
margin-bottom: 3px;
}
/* --- Позиционирование для обтекания --- */
.left {
float: left; /* Обтекание по правому краю */
margin-left: 0px; /* Добавлено в 112 выпуске */
}
.right {
float: right; /* Обтекание по левому краю */
margin-right: 0px; /* Добавлено в 112 выпуске */
}
/* --- Ширина --- */
.half {width: 50%; /* Ширина текстового блока - половина*/}
.triens {width: 33%; /* Ширина текстового блока - треть*/}
.quarter {width: 25%; /* Ширина текстового блока - четверть*/}
/* widthX добавлены с 106 выпуска, потому как предыдущие слова я так и не смог
запомнить написание, но они используются в прошлых выпусках, не менял.
Аттрибут min-width добавлен с выпуска 161 для поддержки узких экранов */
.width2 {width: 50%; min-width: 200px; /* Ширина текстового блока - половина */}
.width3 {width: 33%; min-width: 150px; /* Ширина текстового блока - треть */}
.width4 {width: 25%; min-width: 100px; /* Ширина текстового блока - четверть */}
.width5 {width: 20%; min-width: 70px; /* Ширина текстового блока - пятаячасть */}
/* --- Цвет фона --- */
.red {background: #f0e0e0;}
.green {background: #e0f0e0;}
.blue {background: #e0e0f0;}
.yellow {background: #f0f0e0;}
.cyan {background: #e0f0f0;}
.magenta {background: #f0e0f0;}
/* orange добавлен с 107 выпуска для полноты радуги */
.orange {background: #f0e7e0;}
.black {background: #303030;}
.dark {background: #707070;}
.grey {background: #e0e0e0;}
.gray {background: #e7e7e7;}
.white {background: #ffffff;}
.back {background: #f0f0f0;}
/* --- Тень блока, добавлена с 103 выпуска --- */
.shadow {box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
/* сдвиг по x и y, радиус размытия, (растяжение) цвет */
}
/* --- Центрирование блоков по вертикали, добавлено в 156 выпуске --- */
/* Позволяет центрировать блоки, см. пример Блок афоризма с картинкой */
.vertmid {}
.vertmid:before {
display: inline-block;
height: 50px;
vertical-align: middle;
content: "";
}
.vertmid2 {
display: inline-block;
vertical-align: middle;
}
/* --- Блок подстраиваемый под ширину страницы Добавлено с выпуска 157. --- */
/* Позволяет создавать блоки с подстройкой размера под ширину страницы */
/* и возможностью изменять размер по нажатию. Обслуживается автоматически в lib.js */
/* Для скейлингования сложных картинок с подписями и пр. см. пример. */
.scala { /* аналог merge */
overflow: auto; /* Авторазмер, полосы прокрутки при необходимости*/
}
.scala1 {
overflow: hidden;
}
.scala2 {
}
/* -------------------- Элементы схлопывания длинного текста --------------- */
/* Элементы для показа-скрытия текста (добавлено в 118 выпуске) */
/* см. function AddShowHide */
/* Сам текст */
.shtext {
/*display: none; AddShowHide скроет*/
border-left: 1px solid gray;
padding-left: 9px;
margin-left: -10px; /* Залазит налево*/
padding-bottom: 10px;
}
/* Панель с кнопкой управления когда текст скрыт */
.shhandle {margin-top: 10px;} /* Отступ от предыдущего текста */
.shhandle:hover {cursor: pointer;}
/* Панель с кнопкой упарвления когда текст показан */
.shhandle2 {margin-top: 0px;} /* Отступа нет, есть padding-bottom у самого текста*/
.shhandle2:hover {cursor: pointer;}
/* Кнопка управления */
.shbutton {
background-color: #909090;
color: #f0f0f0;
font-weight: bold;
border: 2px groove #707070;
padding-left: 5px;
padding-right: 5px;
margin-left: -10px; /* Залазит налево*/
}
/* Кнопка подсвеченная при наведении курсора (добавлено в 149 выпуске) */
.shbuttonhigh {
background-color: #90d0c0;
color: #f0f0f0;
font-weight: bold;
border: 2px groove #70d0c0;
padding-left: 5px;
padding-right: 5px;
margin-left: -10px; /* Залазит налево*/
}
/* Подпись к кнопке управления */
.shlabel {
color: #303030;
font-size: 75%;
font-style: italic;
padding-left: 10px;
}
/* ------------------------ Элементы вида вопрос-ответ --------------------- */
/* Элементы добавления блока вопросов и ответов (добавлено с выпуска 119) */
/* Раньше было на каждой странице по своему */
/* см. function AddQuestionAnswer */
/* Текст вопроса */
.qaquestion {}
/* Текст ответа */
.qaanswer {
font-style: italic;
background-color: #e0e0e0;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
/* Блок с кнопкой ответа */
.qahandle {}
.qabutton {}
/* Блок промежутка между вопросами */
.qaspace {
height: 15px;
}
/* Элементы добавления отдельных вопросов и ответов в стиле Что-Где-Когда CGK */
/* Добавлено с выпуска 204 */
/* Вопрос */
.cgkask {
margin-top: 5px;
margin-bottom: 10px;
font-size: 120%;
color: #303030;
}
/* Часть вопроса которая будет скрыта при ответе */
.cgkhide {
margin-top: 5px;
margin-bottom: 5px;
font-size: 120%;
color: #303070;
}
/* Блок с кнопкой ответа */
.cgkhandle {
margin-top: 10px;
margin-bottom: 10px;
}
.cgkhandle button {
font-size: 130%;
background: #f0f0c0;
border: 1px solid #703030;
border-radius: 7px;
color: #d03030;
padding: 5px 10px 5px 10px;
}
.cgkbutton {
font-size: 130%;
background: #f0f0c0;
border: 1px solid #703030;
border-radius: 7px;
color: #d03030;
padding: 5px 10px 5px 10px;
}
/* Ответ текст*/
.cgkanswer {
margin-top: 5px;
margin-bottom: 5px;
padding: 10px;
font-size: 120%;
background: #fffff0;
color: #303030;
}
/* Ответ картинка */
.cgkanswerpic {
margin-top: 5px;
margin-bottom: 5px;
}
/* Вспомогательный для центрирования */
.cgkcenter {
text-align: center;
}
/* Элементы опросника по блок-схеме */
/* Добавлено с выпуска 204 */
/* Контейнер для вопросов */
.afcont {
background: #f0f0f0;
border: 1px solid #303030;
padding: 5px;
}
/* Вопрос */
.afask {
color: #a52a2a;
font-size: 17pt;
padding: 5px;
}
/* Вариант ответа */
.afans {
color: #303030;
font-size: 13pt;
background: #d0d0c0;
padding: 5px;
margin-top: 5px;
}
.afans:hover {
background: #c0b750;
cursor: pointer;
}
/* Блок результата - картинки и текста */
.afres {
color: #a52a2a;
font-size: 13pt;
background: #f0f0f0;
padding: 5px;
}
.afresi {
vertical-align: middle;
}
.afrest {
vertical-align: middle;
padding-left: 20px;
}
/* Блок с кнопкой повтора */
.afhandle {
margin-top: 5px;
}
.afbutton {}
/* ------------------------ Элементы сообщения ----------------------------- */
/* Квазимодальное окно сообщений (добавлено с выпуска 124) */
/* см. function DoMessage */
/* Контейнер сообщения */
.message {
position: fixed; /* позиционирование переделано с выпуска 223 */
z-index: 99;
top: 10px;
left: 10px;
font-size: 14px; /* Добавлено с 156 выпуска */
min-width: 74px;
max-width: 724px;
min-height: 130px;
max-height: 780px;
background-color: #f0f0f0;
color: #303030;
border: 2px groove black;
box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
text-align: left;
}
/* Заголовок сообщения */
.messagetitle { /*30px*/
padding: 5px;
color: #f0f0e0;
height: 20px;
font-size: 16px; /* Добавлено с 156 выпуска, было 120% */
background-color: #8fa09b;
text-align: center;
}
/* Тело сообщения */
.messagebody { /*70px - 720px*/
color: #303030;
padding: 10px;
min-width: 50px;
max-width: 700px;
min-height: 50px;
max-height: 700px;
overflow: hidden;
word-wrap: break-word;
/*word-break: break-all;*/
text-align: left;
}
.messagebody2 {
overflow: hidden;
text-align: left;
}
.messagebody3 {
text-align: left;
}
/* Полоска внизу */
.messagestripe { /*30px*/
color: #f0f0e0;
background-color: #8fa09b;
padding: 3px;
height: 24px;
text-align: center;
}
/* Кнопка ОК */
.messageok {
font-size: 12px;
height: 24px;
}
/* Картинка как кнопка */
.messagepic {
margin-top: -3px;
margin-right: -3px;
float: right;
width: 25px;
height: 25px;
}
.messagepic:hover {cursor: pointer;}
/* Картинка как иконка */
.messageicon {
margin-top: -3px;
margin-right: -3px;
float: left;
width: 25px;
height: 25px;
}
/* ------------------------- Элементы акций -------------------------------- */
/* Акция (кликабельные картинки и текст), добавлено с 133 выпуска */
.actionpic {
border: 1px solid gray; /* Параметры границы: ширина, стиль, цвет */
vertical-align: middle; /* Сдвигает по центру */
}
.actiontxt {
text-decoration: underline; /* Подчеркивает текст акции, как ссылка */
color: #0000ee; /* Цвет основного текста акции, как ссылка */
}
.actionvis { /* Для нажатых (как посещенных ссылок), добавлено с 149 выпуска */
text-decoration: underline; /* Подчеркивает текст акции, как ссылка */
color: #551a8b; /* Цвет основного текста акции, как ссылка */
}
.actionpic:hover {cursor: pointer; /* Курсор указатель когда наведена мышка */}
.actiontxt:hover {color: #ee0000; cursor: pointer;}
.actionvis:hover {color: #ee0000; cursor: pointer;}
/* Акции-кнопки (например для запуска видео), добавлено с 225 выпуска */
.actionbut {color: #0000f0; }
.actionbut:hover {color: #f00000;}
.actionbut2 {color: #7000a0; background-color: #d0d0d0;}
.actionbut2:hover {color: #a00000;}
/* robot взят отсюда https://xhtml.ru/2021/css/float-to-the-bottom-corners/ */
.robot1 {display: flex;}
.robot2 {align-self: auto;}
.robot2a {}
.robot3 {
float: right;
height: 100%;
display: flex;
align-items: flex-end;
shape-outside: inset(calc(100% - 74px) 0 0);
margin-left: 10px;
}
.robot {overflow: hidden; width: 64px; height: 74px;}
.robot:hover {background: #30d0f0; cursor: pointer;}
.robot img {width: 64px; height: 74px;}
.robotu {overflow: hidden; width: 64px; height: 74px; opacity: 0.5;}
.robotu:hover {opacity: 0.5; cursor: pointer;}
.robotsmall {overflow: hidden; width: 32px; height: 37px;}
.robotsmall:hover {background: #30d0f0; cursor: pointer;}
.robotsmall img {width: 32px; height: 37px;}
.robotusmall {overflow: hidden; width: 32px; height: 37px; opacity: 0.5;}
.robotusmall:hover {opacity: 0.5; cursor: pointer;}
.robottxt {font-size: smaller; color: #3030a0;}
.robotnum {font-size: smaller; color: #3030f0; font-weight: bold;}
/* ------------------------- Элементы SMS-ки ------------------------------- */
/* Показывает диалог как обмен смс-ками, добавлено с выпуска 149 */
.smstalkbody {
overflow: auto;
background: #ecf2fe;
border: 2px solid gray;
padding: 10px;
width: 25%;
border-radius: 12px;
background-image: url(sms.png);
background-position: left top;
background-size: 100% auto;
}
.smshead {
overflow: auto;
text-align: left;
background: #f0f0f0;
margin-left: -10px;
margin-top: -10px;
margin-right: -10px;
padding: 10px;
border-bottom: 2px solid gray;
}
.smstalk1cont {
text-align: left;
}
.smstalk1 {
display: inline-block;
background: #ffffff;
padding: 5px;
margin: 5px;
border: 1px solid gray;
border-radius: 12px 12px 12px 0px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.smstalk2cont {
text-align: right;
}
.smstalk2 {
display: inline-block;
background: #cfe0fe;
padding: 5px;
margin: 5px;
border: 1px solid gray;
border-radius: 12px 12px 0px 12px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
/* ------------------------- Элементы Slide Show --------------------------- */
/* Показывает слайд-шоу картинок (добавлено в 153 выпуске) */
/* см. function SlideShow */
/* --- контейнер --- */
.sscont {
background-color: #f0f0f0;
text-align: left;
}
/* --- кнопка --- */
.ssbutt {
padding: 10px;
border: 1px solid #707070;
background-color: #e0e0e0;
color: #707070;
width: 20px;
overflow: visible;
text-align: center;
vertical-align: middle;
font-size: 20px;
font-family: system;
}
.ssbutt:hover {
cursor: pointer;
background-color: #f0f0d0;
}
.ssbuttdis {
padding: 10px;
border: 1px solid #d0d0d0;
background-color: #f0f0f0;
color: #d0d0d0;
width: 20px;
text-align: center;
vertical-align: middle;
font-size: 20px;
font-family: system;
}
.ssbuttall {
padding: 5px;
border: 1px solid #707070;
background-color: #e0e0e0;
color: #707070;
overflow: visible;
text-align: center;
vertical-align: middle;
font-size: 14px;
margin-top: 5px;
position: relative;
}
.ssbuttall:hover {
cursor: pointer;
background-color: #f0f0d0;
}
.ssinfo {
position: absolute;
top: 2px;
right: 2px;
}
/* --- держатель картинки --- */
.ssplace {
padding: 10px;
border: 1px solid #707070;
background-color: #f0f0f0;
margin-left: 50px;
margin-right: 50px;
overflow: hidden;
}
/* ------------------------- Элементы Video -------------------------------- */
/* Video (добавлено в 223 выпуске) */
.video {
background-color: #e0d0e0;
/*background-image: url(play.png);*/
background-repeat: no-repeat;
background-position: center center;
overflow: hidden;
}
/* ------------------------- Эпиграф --------------------------------------- */
/* Эпиграф (добавлено в 156 выпуске) */
.epigraph {
font-size: 10pt; /* до выпуска 190 было 9 */
font-style: italic;
}