* {color: black;padding:0;margin:0;}
html{width:100%;height:122%;box-sizing:border-box;padding:0;margin:0;font-size:1em;background-color:Gainsboro;}/*с помощью box-sizing:border-box включаем paddingи в размеры блока; задаём размер шрифта корневого элемента для вёрстки с rem на случай отказа медийных запросов ниже*/
@media screen and (orientation: portrait) {html{height:100% !important;}}
/*высота корневого элемента (122%) и дочерних элементов (см. ниже) выбрана с таким расчётом, чтобы при прокрутке страницы вниз на экране полностью помещалась центральная часть и футер поскольку 122%*(77%+5%)=100%(т.е. чтобы шапка и верхняя панель навигации не мешали комфортному просмотру основного контента)*/
/*background-color:Gainsboro; - цвет полей фона при уменьшении масштаба сайта*/
/*ЗАДАЁМ РАЗМЕР ШРИФТА КОРНЕВОГО ЭЛЕМЕНТА В ЗАВИСИМОСТИ ОТ ШИРИНЫ ЭКРАНА УСТРОЙСТВА:*/
@media screen and (max-device-width: 200px) {html{font-size:0.2em;}}/*для устройств с шириной экрана менее 200px*/
@media screen and (min-device-width: 200px) {html{font-size:0.3em;}}/*для устройств с шириной экрана более 200px*/
@media screen and (min-device-width: 300px) {html{font-size:0.4em;}}
@media screen and (min-device-width: 400px) {html{font-size:0.5em;}}
@media screen and (min-device-width: 500px) {html{font-size:0.6em;}}
@media screen and (min-device-width: 600px) {html{font-size:0.65em;}}
@media screen and (min-device-width: 700px) {html{font-size:0.7em;}}
@media screen and (min-device-width: 800px) {html{font-size:0.75em;}}
@media screen and (min-device-width: 900px) {html{font-size:0.8em;}}
@media screen and (min-device-width: 1000px) {html{font-size:0.85em;}}
@media screen and (min-device-width: 1100px) {html{font-size:0.9em;}}
@media screen and (min-device-width: 1200px) {html{font-size:0.95em;}}
@media screen and (min-device-width: 1300px) {html{font-size:1em;}}
@media screen and (min-device-width: 1400px) {html{font-size:1.05em;}}
@media screen and (min-device-width: 1500px) {html{font-size:1.1em;}}
@media screen and (min-device-width: 1600px) {html{font-size:1.15em;}}
@media screen and (min-device-width: 1700px) {html{font-size:1.2em;}}
@media screen and (min-device-width: 1800px) {html{font-size:1.25em;}}
@media screen and (min-device-width: 1900px) {html{font-size:1.3em;}}
@media screen and (min-device-width: 2000px) {html{font-size:1.35em;}}
@media screen and (min-device-width: 2100px) {html{font-size:1.4em;}}
@media screen and (min-device-width: 2200px) {html{font-size:1.45em;}}
@media screen and (min-device-width: 2300px) {html{font-size:1.5em;}}
@media screen and (min-device-width: 2500px) {html{font-size:1.55em;}}
@media screen and (min-device-width: 2600px) {html{font-size:1.6em;}}
/*разрешение моего ноутбука 1366x768*/
/*разрешение моего большого монитора 1920x1080*/
body {width:100%;min-width:200px;max-width:2500px;height:100%;min-height:200px;max-height:2500px;box-sizing:border-box;
margin-left:auto;margin-right:auto;font-family:Arial,Verdana,sans-serif;}
/*ОБЩИЕ ПРАВИЛА ДЛЯ ВСЕХ ЭЛЕМЕНТОВ*/
.nowrap{white-space:nowrap;}
/*ФОРМАТ ШАПКИ*/
#header{width:100%;height:11%;text-align:center;display:table;/*display:table выбрано для выравнивания по вертикали по "методу таблицы"*/
background-color: PowderBlue;/*для старых браузеров*/ /*блок шапки, включающей блоки названия и панели навигации*/
background: linear-gradient(to top, Lavender, PowderBlue);}/*для новых браузеров*/
#header_subblock{display:table-cell;vertical-align:middle;}/*осуществление выравнивания по вертикали по "методу таблицы"*/
h1{font-family: Georgia, Arial, Verdana, sans-serif; font-size:3rem; color: #003366;/*#003366*/
margin:0; padding-top:0.05%;padding-left:8%;}/*выравниваем на величину суммарной длины языковых кнопок с пробелом (padding-left)*/
h2{font-family: Georgia, Arial, Verdana, sans-serif; color: #003366;
margin:0;padding-top:0;text-align:center;font-style:italic;}
#ru-icon, #en-icon {width:3%;float:right;margin:0.5%;}
/*ФОРМАТ НАВИГАЦИОННОЙ ПАНЕЛИ*/
#navigation {width:100%;height:7%;background-color:Lavender;
font-size:1.25rem;text-align:center;display:table;}/*display:table выбрано для выравнивания по вертикали по "методу таблицы"*/
#navigation_subblock{width:100%;height:100%;background-image:url("/Images/navigation_background_soundwave.png");background-size:100%100%;display:table-cell;vertical-align:middle;}/*осуществление выравнивания по вертикали по "методу таблицы"*/
.refblock{min-width:10%;display:inline-block;background-color:Lavender;background-color:rgba(230,230,250,0.8);text-align:center;box-sizing:border-box;/*формат всех кнопок со ссылками в панели навигации, прозрачный фон для цвета Lavender: background-color:rgba(230,230,250,0.8); http://shpargalkablog.ru/2015/10/translucent-background-css.html */
/*формат цвета кнопки указан в рассчёте на старые (background-color:Lavender;) и новые (background-color:rgba(230,230,250,0.8)) браузеры*/
/*ширина кнопок указана с помощью min-width, чтобы не было проблем на экранах с вертикальной ориентацией*/
border-style:solid;border-width:thin;border-color:gray;padding:0.5% 1%;margin:0.5%;border-radius:5rem;}/*радиус закругления взят с избытком, чтобы кнопки были одинаково закруглёнными при любом значении em*/
/*толщина границы указана фиксированной - border-width:thin; (т.е. 2px по спецификации), чтобы граница не исчезла на маленьких экранах*/
.refblock:hover{background-color:LightBlue;opacity:1;}/*#3399CC Lightblue #eed2ee #eeaeee*//*формат кнопки в панели навигации при наведении на неё курсора*/
.navref{text-decoration:none;} /*убираем подчеркивание у ссылок в панели навигации*/
/*ФОРМАТ ЦЕНТРАЛЬНОЙ ЧАСТИ (САЙДБАР+ОСНОВНАЯ ЧАСТЬ)*/
#centralblock{width:100%;height:77%;font-family: Times, Arial, Verdana, sans-serif;}
.link{color:Blue;} /*форматирование ссылок ____#0000cd____ #00008b__#27408b__#836fff*/
.link:hover {color:Darkblue;} /*формат при при наведении курсора #436eee__Royalblue__ #27408b #3a5fcd*/
/*ФОРМАТ САЙДБАРА*/
#sidebar{width:25%;height:100%;float:left;box-sizing:border-box; /*Включаем paddingи в размеры блока */
background-image: url("/Images/side_bar_background.jpg");background-size:100%100%;
font-size: 1.1rem;line-height: 1.5rem;padding:1% 1.5%;text-align: justify;overflow-y:auto;overflow-x:auto;}/*полоса прокрутки по вертикали и горизонали появятся автоматически при переполнении*/
.side_bar_image_vertical {width:55%;display:block;margin:5% auto;}
.side_bar_image_square {width:55%;display:block;margin:5% auto;}
.side_bar_image_horizontal {width:70%;display:block;margin:5% auto;}
.side_bar_title_short{color:Mediumblue;margin-top:10%;font-size:1.3rem;font-weight:bold;text-align:center;}
.side_bar_title_long{color:Mediumblue;margin-top:10%;font-size:1.1rem;font-weight:bold;text-align:center;}
/*ФОРМАТ ОСНОВНОЙ ЧАСТИ*/
#mainarea{width:75%;height:100%;float:left;box-sizing:border-box; /*Включаем paddingи в размеры блока */
background-image: url("/Images/main_area_background.jpg");background-size:100%100%;
padding: 2.8% 2.5%;font-size: 1.5rem;text-align: justify;overflow-y:auto;/*полоса прокрутки по вертикали появится автоматически при переполнении*/}
#alina_front_image, #alina_contacts_image {width:35%;float:right;margin-left:3%;margin-bottom:1%;border-radius:1rem;}
.text_align_center{text-align:center;}
.text_indent{text-indent:2.5rem;}
/*формат таблицы с фотографиями*/
#table_with_photos{width:100%;}/*формат таблицы с фотографиями*/
.column_of_table_with_photos{width:16.5%;}/*ширина колонок одинаковая*/
.photo_in_table{width:90%;border-radius:0.5rem;display:block;margin:4% auto 10% auto;}/*формат фотографий в таблице*/
/*формат рамок pdf, аудио и видео плееров*/
.video_frame{width:100%;height:100%;margin-top:1%;margin-bottom:2%;}
.audio_frame{width:100%;height:90%;border:none;margin-top:3%;margin-bottom:3%;}
.pdf_frame{width:100%;height:150%;margin-top:3%;margin-bottom:3%; }
/*ФОРМАТ ФУТЕРА (нижней полосы):*/
#footer{width:100%;height:5%;box-sizing:border-box;clear:both;background-color:Lightsteelblue;text-align:center;display:table;font-size:1.1rem;}/*display:table выбрано для выравнивания по вертикали по "методу таблицы"*/
#footer_subblock{display:table-cell;vertical-align:middle;}/*осуществление выравнивания по вертикали по "методу таблицы"*/