/* СТИЛИ ШРИФТОВ */

/* Шрифт текста абзацев */

p {
    color: #000000; /* Цвет символа */
    font-size: 16pt; /* Размер шрифта в пунктах */
    font-family: Verdana, Helvetica, sans-serif; /* Семейство шрифта */
    font-style: normal; /* Стиль шрифта */
}

/* Шрифт текста вставок (дополнений) */
small p {
         font: 12px/1.5 Verdana, Helvetica, sans-serif;
         color: black; /* Цвет символа */
         line-height: 1.3; /* Интерлиньяж (межстрочный интервал) */
}

/* Шрифт оглавления (а также всех других ссылок) */
a:link, a:visited {
    color: #2F4F4F; /* Цвет символа */
    font-size: 16pt; /* Размер шрифта в пунктах */
    font-family: Verdana, Helvetica, sans-serif; /* Семейство шрифта */
    font-style: normal; /* Стиль шрифта */
}

/* Шрифт оглавления для неопубликованных глав */
a.not_ready {
    color: #B9D3EE; /* Цвет символа */
    font-size: 16pt; /* Размер шрифта в пунктах */
    font-family: Verdana, Helvetica, sans-serif; /* Семейство шрифта */
    font-style: normal; /* Стиль шрифта */
}

/* Шрифт маркированных списков */
ul {
    color: #000000; /* Цвет символа */
    font-size: 16pt; /* Размер шрифта в пунктах */
    font-family: Verdana, Helvetica, sans-serif; /* Семейство шрифта */
    font-style: normal; /* Стиль шрифта */
}

/* Шрифт списков для терминов с определениями */
dl {
    color: #000000; /* Цвет символа */
    font-size: 16pt; /* Размер шрифта в пунктах */
    font-family: Verdana, Helvetica, sans-serif; /* Семейство шрифта */
    font-style: normal; /* Стиль шрифта */
}

/* Шрифт нумерованных списков */
ol {
    color: #000000; /* Цвет символа */
    font-size: 16pt; /* Размер шрифта в пунктах */
    font-family: Verdana, Helvetica, sans-serif; /* Семейство шрифта */
    font-style: normal; /* Стиль шрифта */
}

/* Шрифт заголовка h1 титульной страницы */
h1.titul {
           color: #696969; /* Цвет символа */
           font-size: 30pt; /* Размер шрифта в пунктах */
           font-family: Verdana, Helvetica, sans-serif; /* Семейство шрифта */
           font-style: normal; /* Стиль шрифта */
}

/* Шрифт заголовков h1 в разделах */
h1 {
    color: #696969; /* Цвет символа */
    font-size: 24pt; /* Размер шрифта в пунктах */
    font-family: Verdana, Helvetica, sans-serif; /* Семейство шрифта */
    font-style: normal; /* Стиль шрифта */
}

/* Шрифт заголовков h2 */
h2 {
    color: #696969; /* Цвет символа */
    font-size: 30pt; /* Размер шрифта в пунктах */
    font-family: Verdana, Helvetica, sans-serif; /* Семейство шрифта */
    font-style: normal; /* Стиль шрифта */
}

/* Шрифт заголовков h3 */
h3 {
    color: #696969; /* Цвет символа */
    font-size: 24pt; /* Размер шрифта в пунктах */
    font-family: Verdana, Helvetica, sans-serif; /* Семейство шрифта */
    font-style: normal; /* Стиль шрифта */
}

/* Шрифт заголовков h4 */
h4 {
    color: #696969; /* Цвет символа */
    font-size: 18pt; /* Размер шрифта в пунктах */
    font-family: Verdana, Helvetica, sans-serif; /* Семейство шрифта */
    font-style: normal; /* Стиль шрифта */
}

/* Шрифт курсива */
i {
    color: #363636; /* Цвет символа */
    font-size: 14pt; /* Размер шрифта в пунктах */
    font-family: Verdana, Helvetica, sans-serif; /* Семейство шрифта */
    font-style: italic; /* Стиль шрифта */
}

/* Шрифт звездочек-разделителей */
p.aster {
    color: #A52A2A; /* Цвет символа */
    font-size: 18pt; /* Размер шрифта в пунктах */
}

    /* Шрифт для header и footer, вариант 1 */

i.hf1 {
    color: #00BFFF; /* Цвет символа */
    font-size: 14pt; /* Размер шрифта в пунктах */
}

    /* Шрифт для пунктов меню навигации */

nav a.hf2 {
    font-size: 10pt; /* Размер шрифта в пунктах */
}

    /* Шрифт для эпиграфов */

q {
   font-size: 18pt; /* Размер шрифта в пунктах */
   color: #A52A2A; /* Цвет символа */
}

p.q {
    text-indent: 0em; /* Отступ первой строки */
    font-size: 14pt; /* Размер шрифта в пунктах */
    color: #A52A2A; /* Цвет символа */
}

    /* Шрифт подписей к иллюстрациям */

i.image {
    color: #A52A2A; /* Цвет символа */
    font-size: 14pt; /* Размер шрифта в пунктах */
    font-family: Verdana, Helvetica, sans-serif; /* Семейство шрифта */
    font-style: italic; /* Стиль шрифта */
}

    /* СТИЛИ БЛОЧНЫХ ЭЛЕМЕНТОВ */

/* Стили абзацев */
p {
    text-indent: 1.5em; /* Отступ первой строки */
    text-align: justify; /* Выравнивание одновременно по левому и правому краю */
}

/* Стили оглавления (а также всех других ссылок) */

a:link, a:visited {
    text-decoration: none; /* Убрать подчеркивание ссылок */
}

a:hover, a:active {
    color: #191970; /* Изменить цвет ссылок при наведении курсора */
}

.reference {
    column-count: 2; /* Количество колонок */
    column-rule: 1px solid #1C1C1C; /* Толщина линии между колонками и ее цвет */
}

.reference li{
    display:block; /* Пункты списка - блочные элементы */
    margin-left: 50px; /* Отступ слева */
}

/* Стили для элементов навигации */

nav {
  display: table; /* Элемент nav обявляется блочной таблицей */
  position: relative; /* Устанавливается положение элемента */
  margin-top: 20px; /* Отступ сверху */
  width: 100%; /*  Элемент растягивается на всю ширину контейнера */
  height: 20px; /* Высота элемента */
}

nav a {  
    color: #FF8C00;
    display: table-cell;
    text-align: center; /* Выравнивание текста пункта меню по горизонтали */ 
    vertical-align: middle; /* Выравнивание текста пункта меню по вертикали */
    min-width: 120px; /* Минимальная ширина пункта меню */
    border-left: 0px solid red; /* Цвет вертикальных разделителей между пунктами меню */
}
 
/* Стили таблиц с изображениями */

table td {
    color: #000000; /* Цвет символа */
    border: 0px solid #73C0D4; /* Толщина  и цвет границы */
    padding: 20px; /* Поля вокруг текста */
    text-align: left;
}

/* Стили заголовка таблиц */

table > caption {
                 color: #000000; /* Цвет символа */
                 font-size: 20pt; /* Размер шрифта в пунктах */
                 font-family: Verdana, Helvetica, sans-serif; /* Семейство шрифта */
                 font-style: normal; /* Стиль шрифта */
                 padding: 20px; /* Поля вокруг текста */
}

/* Стили  иллюстраций, меняющихся при наведении курсора */

a.shift_01 {
    display: block; /* Устанавливаем тип ссылки - блочный элемент */
    width: 800px; /* Ширина блока в пикселах */
    height: 582px; /* Высота блока в пикселах */
    background: url(./img/sea_07_1.jpg); /* Путь к файлу с исходным  изображением для фона блока */
}
a.shift_01:hover {
    background-position: 0 -582px; /* Смещение фона блока вниз */
}

/* Стили иллюстраций-схем с управление радиокнопками */

.window {
         display: none; /* Текст преобразуется в список, не показывать маркеры */
}

/* Вывод текста, соответствующего нажатой кнопке для иллюстраций-схем с управление радиокнопками */ 

#i1:checked ~ .main #w1,
#i2:checked ~ .main #w2,
#i3:checked ~ .main #w3,
#i4:checked ~ .main #w4,
#i5:checked ~ .main #w5,
#i6:checked ~ .main #w6,
#i7:checked ~ .main #w7
                       {
                        display: block; /* Содержимое преобразуется в блочный элемент */
}

/* Смена изображения способом когда одно изображение размещается под другим */
/* Несколько одинаковых блоков отличаются форматом вставляемоно изображения */
           /* Для формата 1.45 */
.ch_image_145 {
  position:relative; /* создаем родительский контейнер с относительным позиционированием */
  margin:0 auto;     /* устанваливаем блок div ch_image по центру страницы */
  width:80vw;        /* ширина блока div ch_image в % от ширины области просмотра */
  height:calc(80vw / 1.45);    /* высота блока div ch_image в % от ширины области просмотра */ 
}
.ch_image_145 img {
  position:absolute; /* задаем абсолютное позиционирование блока div ch_image в родительском контейнере */
  left: 0; /* выравниваем картинки по левому верхнему углу div-а */
  top: 0;  /* выравниваем картинки по левому верхнему углу div-а */  
}

.ch_image_145 img.first { /* первая картинка полностью НЕпрозрачная */
  opacity:1;
  filter:alpha (opacity=100);
}
.ch_image_145 img.second { /* вторая картинка полностью прозрачная */
  opacity:0;
  filter:alpha (opacity=0);
}
.ch_image_145:hover img.first { /* при наведении курсора первая картинка становится прозрачной */
  opacity:0;
  filter:alpha (opacity=0);
}
.ch_image_145:hover img.second, .ch_image img.second:hover { /* а вторая при наведении курсора становится НЕпрозрачной */
  opacity:1;
  filter:alpha (opacity=100);
}
          /* Для формата 1.3 */
.ch_image_13 {
  position:relative; /* создаем родительский контейнер с относительным позиционированием */
  margin:0 auto;     /* устанваливаем блок div ch_image по центру страницы */
  width:80vw;        /* ширина блока div ch_image в % от ширины области просмотра */
  height:calc(80vw / 1.3);   /* высота блока div ch_image в % от ширины области просмотра */ 
}
.ch_image_13 img {
  position:absolute; /* задаем абсолютное позиционирование блока div ch_image в родительском контейнере */
  left: 0; /* выравниваем картинки по левому верхнему углу div-а */
  top: 0;  /* выравниваем картинки по левому верхнему углу div-а */  
}

.ch_image_13 img.first { /* первая картинка полностью НЕпрозрачная */
  opacity:1;
  filter:alpha (opacity=100);
}
.ch_image_13 img.second { /* вторая картинка полностью прозрачная */
  opacity:0;
  filter:alpha (opacity=0);
}
.ch_image_13:hover img.first { /* при наведении курсора первая картинка становится прозрачной */
  opacity:0;
  filter:alpha (opacity=0);
}
.ch_image_13:hover img.second, .ch_image img.second:hover { /* а вторая при наведении курсора становится НЕпрозрачной */
  opacity:1;
  filter:alpha (opacity=100);
}

    /* СТИЛИ ДЛЯ ПЕЧАТИ НА ПРИНТЕРЕ */

@media print {
    
   }
@page :left {
    margin: 1.5cm 1.5cm 1.5cm 1.5cm; /* Отступы от верхнего, правого, нижнего и левого края для всех левых страниц */ 
   }
@page :right {
    margin: 1.5cm 1.5cm 1.5cm 1.5cm; /* Отступы от верхнего, правого, нижнего и левого края для всех правых страниц */ 
   }