* {
box-sizing: border-box;
}



body {
max-width: 800px; /* Ширина */
margin: 0 auto; /* Центрирование */
font-size: 15px; /* Размер шрифта */
font-family: Verdana, sans-serif; /* Тип шрифта */
line-height: 1.4; /* Межстрочное расстояние */
border: 1px solid #C0C0C0; /* Граница сайта */
}



#content {
padding: 5px 10px 10px 10px; /* Отступы внутрь */
}



/* Логотип сайта */
.logo {
margin: 5px 5px 0px 5px; /* Отступы наружу */
}



/* Меню */
.header-menu {
background: #323841; /* Цвет пустого меню на 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: #323841; /* Цвет НЕ пустого меню на 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;
}



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



/* Меню Breadcrumbs */
/* Стиль списка breadcrumbs */
ul.breadcrumbs {
margin: 10px 0px 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; /* Подчеркивание */
}



/* Стилизация H1, H2, H3, H4 */
h1, h2, h3, h4 {
display: block; /* Отображает как блочный элемент */ 
margin: 12px 0px; /* Отступы наружу */
text-align: center; /* Выравнивание по центру */
color: #424242; /* Цвет */
}
h1 {
font-size: 22px; /* Размер шрифта */
}
h2 {
font-size: 19px; /* Размер шрифта */
}
h3 {
font-size: 18px; /* Размер шрифта */
}
h4 {
font-size: 17px; /* Размер шрифта */
}



/* Стилизация заголовков жирным шрифтом */
.bold {
font-weight: bold; /* Толщина шрифта */
color: #424242; /* Цвет */
}



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



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

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



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

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



/* Линии */
/* Линия в обзоре хостера - регистратора */
.line-review {
margin: 12px 0px; /* Толщина отступа наружу */
border-width: 1px; /* Толщина линий */
border-style: solid; /* Тип линий */
border-color: #5F9EA0; /* Цвет линий */
}

/* Линия в футере */
.line-footer {
margin: 12px 0px; /* Толщина отступа наружу */
border-width: 1px; /* Толщина линий */
border-style: solid; /* Тип линий */
border-color: #808080; /* Цвет линий */
}



/* Главная страница */
/* Блоки контента */
.index-block {
width: 100%; /* Ширина */
margin: 10px 0px; /* Толщина отступа наружу */
padding: 10px 10px; /* Толщина отступа внутрь */
border-width: 1px; /* Толщина линий */
border-style: solid; /* Тип линий */
}

/* Логотипы */
.index-logo {
display: block; /* Отображает как блочный элемент */ 
margin: 0px 0px 5px 0px; /* Толщина отступа наружу */
width: 75px; /* Ширина логотипа */
height: 30px; /* Высота логотипа */
}



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



/* Кнопка прокручивающая страницу вверх */
#upbutton {
background: url("/image/upbutton.png") no-repeat top left; /* Урл кнопки */
width: 30px; /* Ширина кликабельного места, указывать ширину кнопки */
height: 30px; /* Высота кликабельного места, указывать высоту кнопки */
bottom: 30px; /* Расстояние между кнопкой и низом экрана */
right: 30px; /* Расстояние между кнопкой и правой границей экрана */
cursor: pointer;
display: none;
position: fixed;
z-index: 999;
}



/* Медиа запросы - если ширина браузера менее 800px */
@media (max-width: 800px) {
/* Меню */
nav {
margin: 0;
}
.toggle + a, .menu {
display: none;
}
.toggle {
display: block;
background-color: #323841; /* Цвет заголовка меню и основных разделов меню на 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;
}
}



/* Медиа запросы - если ширина браузера менее 600px */
@media (max-width: 600px) {
/* Таблица № 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;
}
}