* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

body {
margin: 0px; /* Отступы между body и окном браузера */
background-color: #ffffff; /* Фон сайта */
font-family: Verdana, sans-serif; /* Тип шрифта всему сайту */
font-size: 14px; /* Размер шрифта по всему сайту */
line-height: 1.4; /* Межстрочное расстояние всему сайту */
}

#wrapper {
background: #ffffff; /* Фон блока */
width: 1000px; /* Ширина */
margin: 0 auto; /* Центрирование сайта */
border-width: 1px; /* Толщина линий блока */
border-style: solid; /* Тип линий блока */
border-color: #808080; /* Цвет линий блока */
}
#header {
border-width: 0px; /* Толщина линий блока */
border-style: solid; /* Тип линий блока */
border-color: #808080; /* Цвет линий блока */
}
#content {
float: left; /* Прижатие слева */
width: 765px; /* Ширина */
box-sizing: border-box; /* При отступах padding блок div останется с фиксированными параметрами - текcт не будет вылезать за блок div */
padding: 10px; /* Толщина отступов контента от блока */
border-width: 0px; /* Толщина линий блока */
border-style: solid; /* Тип линий блока */
border-color: #808080; /* Цвет линий блока */
}
#sidebar {
float: right; /* Прижатие справа */
width: 225px; /* Ширина */
box-sizing: border-box; /* При отступах padding блок div останется с фиксированными параметрами - текcт не будет вылезать за блок div */
padding: 10px 5px 10px 10px; /* Толщина отступов контента от блока */
border-width: 0px; /* Толщина линий блока */
border-style: solid; /* Тип линий блока */
border-color: #808080; /* Цвет линий блока */
}
#footer {
text-align: center; /* Центрирование */
box-sizing: border-box; /* При отступах padding блок div останется с фиксированными параметрами - текcт не будет вылезать за блок div */
padding: 10px 10px 0px 10px; /* Толщина отступов контента от блока */
border-width: 1px 0px 0px 0px; /* Толщина линий блока - каждое значение для одной стороны по часовой стрелке начиная с верхней */
border-style: solid; /* Тип линий блока */
border-color: #808080; /* Цвет линий блока */
}


.clear {
clear: both; /* Отменяет обтекание после блоков в ряд */
}






/* Блоки внутри header ----------------------------------------------------------------------------------------------------- */ 
/* Логотип сайта в шапке */
.header-top {
float: left; /* Прижатие слева */
padding: 4px 0px 0px 0px; /* Толщина отступов - каждое значение для одной стороны по часовой стрелке начиная с верхней */
}

/* Основное меню в шапке */
.header-menu {
background: #34495E; /* Цвет пустого меню на desktop */
width: 100%;
}
.toggle, [id^=drop] {
display: none;
}
nav {
width: 100%;
padding: 0;
}
nav:after {
content: '';
display: table;
clear: both;
}
nav ul {
float: left;
padding: 0;
margin: 0;
list-style: none;
position: relative;
z-index: 9999; /* Не дает другим объектам перекрывать выпадающее меню на desktop */
}
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background: #34495E; /* Цвет НЕ пустого меню на desktop. Цвет должен быть таким же как и цвет пустого меню! */
}
nav ul li ul li {
background: #333333; /* Цвет выпадающего меню на desktop */
}
nav ul li ul li:hover {
background: #333333; /* Цвет выпадающего меню на desktop */
}
nav a:hover {
background-color: #333333; /* Цвет при наведении мышкой на основное меню на desktop */
}
nav ul li ul li a:hover {
background-color: #111111 ; /* Цвет при наведении мышкой на выпадающее меню на desktop */
}
nav a, nav a:hover, nav a:visited {
display: block;
padding: 0 20px;
color: #ffffff; /* Цвет шрифта на desktop */
font-size: 16px; /* Размер шрифта на desktop */
line-height: 60px; /* Высота основного и выпадающего меню на desktop */
text-decoration: none;
}
nav ul ul {
display: none;
position: absolute;
top: 60px; /* Расстояние вверх от выпадающего меню до основного на desktop. Значение должно быть таким же как и высота основного меню! */
}
nav ul li:hover > ul {
display: inherit;
}
nav ul ul li {
width: 250px; /* Ширина выпадающего меню на desktop */
float: none;
display: list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 170px; /* Расстояние вбок от выпадающего из выпадающего меню на desktop */
}
nav label span {
float: right;
}
nav input[type=checkbox] {
display: none;
}







/* Меню 2 - разные меню по всему сайту ----------------------------------------------------------------------------------- */ 
/* Вид пассивных ссылок в меню 2 */ 
.menu2 {
color: #21618C; /* Цвет пассивной ссылки */  
text-decoration: none; /* Подчеркивание */
}
/* Вид ссылок при наведении курсора в меню 2 */ 
.menu2:hover {
color: #FF0000; /* Цвет ссылки при наведении на нее курсора мыши */  
text-decoration: underline; /* Подчеркивание */
}







/* Меню Breadcrumbs -------------------------------------------------------------------------------------------------- */
/* Стиль списка breadcrumbs */
ul.breadcrumbs {
margin: 0px 0px; /* Отступы списка наружу */
padding: 0px 0px; /* Отступы списка внутрь */
list-style: none; /* Отключаем разметку списка */
line-height: 1.5; /* Межстрочное расстояние */
}
/* Отображение элементов списка */
ul.breadcrumbs li {
display: inline; /* Элементы списка в строчку */
font-size: 0.9em; /* Размер шрифта */
}
/* Добавить разделитель › » > / ▸ перед/за каждым элементом списка */
ul.breadcrumbs li+li:before {
padding: 5px; /* Отступы от разделителя между элементами li */
color: #000000; /* Цвет разделителя */
content: "▸\00a0"; /* Разделитель и неразрывный пробел \00a0 */
}
/* Вид пассивных ссылок */ 
ul.breadcrumbs li a {
color: #0066CC; /* Цвет пассивной ссылки */  
text-decoration: none; /* Подчеркивание */
}
/* Вид ссылок при наведении курсора */
ul.breadcrumbs li a:hover {
color: #FF0000; /* Цвет ссылки при наведении на нее курсора мыши */  
text-decoration: underline; /* Подчеркивание */
}







/* Блоки внутри sidebar ----------------------------------------------------------------------------------------------------- */ 
/* Заголовки в блоках в sidebar */ 
.sidebar-zagolovok {
line-height: 35px; /* Высота */
text-align: center; /* Выравнивание по горизонтали */
vertical-align: middle; /* Выравнивание по вертикали */
background: #225D77; /* Фон */
color: #FFFFFF; /* Цвет шрифта */
font-weight: bold; /* Толщина шрифта */
}
/* Настройка контента в sidebar */ 
.sidebar-content {
padding: 1px 0px 5px 1px; /* Толщина отступов контента от блока */
line-height: 1.5; /* Межстрочное расстояние - не трогать !!!!! */
}







/* Настройка списков ul ol ---------------------------------------------------------------------------------------- */
/* Настройка ul промаркированных: ul-nastrojka */ 
ul.ul-nastrojka {
padding: 0; /* Не трогать - всегда 0 */
margin-left: 20px; /* Отступ слева */
margin-top: 8px; /* Отступ сверху */
}
.ul-nastrojka li {
margin-bottom: 8px; /* Отступ снизу - расстояние между li */
}

/* Настройка ol промаркированных: ol-nastrojka */ 
ol.ol-nastrojka {
margin-top: 8px; /* Отступ сверху */
}
.ol-nastrojka li {
margin-bottom: 8px; /* Отступ снизу - расстояние между li */
}


/* Настройка ul ol по всему сайту - немаркированных */
ul {
margin-top: 8px; /* Отступ сверху */
}
ul li {
margin-bottom: 8px; /* Отступ снизу - расстояние между li */
}

ol {
margin-top: 8px; /* Отступ сверху */
}
ol li {
margin-bottom: 8px; /* Отступ снизу - расстояние между li */
}






/* Стилизация и центрирование простых заголовков, ссылок, картинок по всему сайту ------------------------------- */
/* Стилизация простых заголовков разделов по всему сайту */
.zagolovki {
font-weight: bold; /* Толщина шрифта */
color: #4F4F4F; /* Цвет */
}

/* Жирный шрифт */
.bold {
font-weight: bold; /* Толщина шрифта */
}

/* Уменьшенный шрифт */
.small {
font-size: 0.9em; /* Размер шрифта */
}

/* Вид ссылок по всему сайту при наведении курсора */ 
a:hover {
color: #FF0000; /* Цвет ссылки при наведении на нее курсора мыши */  
text-decoration: none; /* Подчеркивание */
}

/* Центрирование текста отдельным блоком */ 
.center-txt {
text-align: center; /* Выравнивание по центру */
}

/* Центрирование картинки отдельным блоком */ 
.center-img {
text-align: center; /* Выравнивание по центру */
}

/* Вид картинок по всему сайту */ 
img {
max-width: 100%; /* Ширина */
height: auto; /* Высота */
border: 0; /* Убираем рамку вокруг картинки-ссылки */
}

/* Выравнивание картинок: слева, справа, по центру --------------------------- */ 
/* Выравнивание картинки слева */ 
.img-left {
float: left; /* Выравнивание картинки слева */
margin: 0px 5px 0px 0px; /* Толщина отступов текста от картинки */
}

/* Выравнивание картинки справа */ 
.img-right {
float: right; /* Выравнивание картинки справа */
margin: 0px 0px 0px 5px; /* Толщина отступов текста от картинки */
}

/* Выравнивание картинки по центру */ 
.img-center {
display: block; /* Отображает как блочный элемент */ 
margin: 0 auto; /* Центрирование */
}

/* Выравнивание картинки тегом middle */ 
.v-align-middle {
vertical-align: middle; /* Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента */
}

/* Выравнивание картинки тегом bottom */ 
.v-align-bottom {
vertical-align: bottom; /* Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех */
}







/* Отступы фиксированные сверху-снизу от тегов: p, H1, H2, H3, H4 ------------------------------------------------------------------- */
h1, h2, h3, h4, p {
display: block; /* Отображает как блочный элемент */ 
padding: 0px 0px; /* Отступы от блока внутрь */
margin: 12px 0px; /* Отступы от блока наружу */
}

/* Стилизация H1, H2, H3, H4 --------------------------------------------------------------------------------------------------------- */
h1, h2, h3, h4 {
text-align: center; /* Выравнивание по центру */
color: #4F4F4F; /* Цвет */
}
/* Стилизация h1 по всему сайту */
h1 {
font-size: 22px; /* Размер шрифта */
}
/* Стилизация h2 по всему сайту */
h2 {
font-size: 20px; /* Размер шрифта */
}
/* Стилизация h3 по всему сайту */
h3 {
font-size: 18px; /* Размер шрифта */
}
/* Стилизация h4 по всему сайту */
h4 {
font-size: 17px; /* Размер шрифта */
}







/* Рекламные блоки  ---------------------------------------------------------------------- */ 
/* Рекламные блоки №1,2 + медиазапросы */
.adv-12-desktop {
text-align: center; /* Центрирование */
display: block; /* Включен */
}
.adv-12-mobile {
text-align: center; /* Центрирование */
display: none; /* Выключен */
}

/* Рекламные блоки №3,4 + медиазапросы */
.adv-34-desktop {
text-align: center; /* Центрирование */
display: block; /* Включен */
}
.adv-34-mobile {
text-align: center; /* Центрирование */
display: none; /* Выключен */
}








/* Адаптивные таблицы  ---------------------------------------------------------------------- */ 
/* Таблица № 1 с горизонтальным скроллингом */ 
.table-wrap {
	overflow-x:auto;
}	
table.table-1 {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
table.table-1 tr {
	background-color: #f8f8f8;
}
table.table-1 th, table.table-1 td {
	text-align: left;
    padding: 8px;
    border: 1px solid #ddd;
}
table.table-1 th {
	font-weight: bold;
}

/* Таблица № 2 с переводом тегов td, th в блоки + медиазапросы для этой таблицы */ 
.table-wrap {
	overflow-x:auto;
}
table.table-2 {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
table.table-2 tr {
	background-color: #f8f8f8;
}
table.table-2 th, table.table-2 td {
	text-align: left;
    padding: 8px;
    border: 1px solid #ddd;
}
table.table-2 th {
	font-weight: bold;
}








/* Медиа запросы ---------------------------------------------------------------------------------- */ 

/* Медиа запросы - если ширина браузера менее 1030px */ 
@media (max-width: 1030px) {
/* Тело сайта --------------------------------- */
body {
font-size: 15px; /* Размер шрифта по всему сайту */
}

#wrapper {
width: 100%; /* Ширина */
}
#content {
float: left; /* Прижатие слева */
width: 100%; /* Ширина */
border-width: 0px; /* Толщина линий блока */
}
#sidebar {
float: left; /* Прижатие слева */
width: 100%; /* Ширина */
}

/* Основное меню */
nav {
margin: 0;
}
.toggle + a, .menu {
display: none;
}
.toggle {
display: block;
background-color: #34495E; /* Цвет заголовка меню и основных разделов меню на mobile */
padding: 0 20px;
color: #ffffff; /* Цвет шрифта на mobile */
font-size: 16px; /* Размер шрифта на mobile */
line-height: 60px; /* Высота основного и выпадающего меню на mobile */
text-decoration: none;
border: none;
}
.toggle:hover {
background-color: #000000; /* Цвет при наведении мышкой на заголовок меню и основные разделы меню на mobile */
}
[id^=drop]:checked + ul {
display: block;
width: 100%;
}
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle, nav ul ul a {
padding: 0 40px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover, nav ul ul ul a {
background-color: #000000; /* Цвет при наведении мышкой на основные разделы меню на mobile */
}
nav ul li ul li .toggle, nav ul ul a {
background-color: #212121; /* Цвет выпадающего меню на mobile */
}
nav ul ul {
float: none;
position: static;
color: #ffffff; /* Цвет бесполезный, не понятно для чего */
}
nav ul ul li:hover > ul, nav ul li:hover > ul {
display: none;
}
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
}

/* Рекламные блоки  ---------------------- */
/* Рекламные блоки №3,4 */
.adv-34-desktop {
display: none; /* Выключен */
}
.adv-34-mobile {
display: block; /* Включен */
}
}





/* Медиа запросы для таблиц - если ширина браузера менее 700px */
@media (max-width: 700px) {
/* Таблица № 2 с переводом тегов td, th в блоки */
	table.table-2 tr {
		display: block;
	}
	table.table-2 tr {
		margin-bottom: 30px;
	}
	table.table-2 th, table.table-2 td {
		display: block;
	}
}





/* Медиа запросы - если ширина браузера менее 600px */ 
@media (max-width: 600px) {
/* Рекламные блоки  ---------------------- */
/* Рекламные блоки №1,2 */
.adv-12-desktop {
display: none; /* Выключен */
}
.adv-12-mobile {
display: block; /* Включен */
}
}