* {color:black;padding:0;margin:0;box-sizing:border-box;}
html{width:100%;height:100%;background-color:ivory;font-size:1em;}/*с помощью box-sizing:border-box включаем paddingи в размеры блока; задаём размер шрифта корневого элемента для вёрстки с rem на случай отказа медийных запросов ниже*/
/*WAS HERE BEBORE: HTML HEIGHT 128%: высота корневого элемента (128%) и дочерних элементов (см. ниже) выбрана с таким расчётом, чтобы при прокрутке страницы вниз на экране полностью помещалась центральная часть и футер (т.е. чтобы шапка и верхняя панель навигации не мешали комфортному просмотру основного контента)*/
/*background-color:Lavender; - цвет полей фона при уменьшении масштаба сайта*/

/*ЗАДАЁМ РАЗМЕР ШРИФТА КОРНЕВОГО ЭЛЕМЕНТА В ЗАВИСИМОСТИ ОТ ШИРИНЫ ЭКРАНА УСТРОЙСТВА:*/
@media screen and (max-device-width: 800px) {html{font-size:0.75em;}}/*для устройств с шириной экрана менее 800px*/
@media screen and (min-device-width: 800px) {html{font-size:0.75em;}}/*для устройств с шириной экрана более 800px*/
@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%;max-width:2500px;height:100%;max-height:2500px;margin-left:auto;margin-right:auto;font-family:'Montserrat Alternates',sans-serif;}


/*ОБЩИЕ ПРАВИЛА ДЛЯ ВСЕХ ЭЛЕМЕНТОВ*/
.bold{font-weight:bold;}
.idy_favorite_color{color:purple;}
.green_color{color:Green;}
.red_color{color:Red;}
.display_inline{display:inline;}
.text_align_left{text-align:left;}
.text_align_right{text-align:right;}
.text_align_center{text-align:center;}
.text_align_justify{text-align:justify;}
.form{width:100%;text-align:left;border-style:solid;border-color:purple;border-width:2px;border-radius:1rem;padding:2%;margin:0%;}
legend{color:purple;}
input, select{padding:0.1rem;font-family:Arial,Verdana,sans-serif;font-size:1.1rem;}
#send_message_form_input_topic{width:50%;}/*ширина поля "тема сообщения" в форме контактов и в форме сообщения в админском кабинете*/
textarea{padding:0.5% 1% 0.5% 1%;width:100%;font-family:Arial,Verdana,sans-serif;font-size:1.1rem;}
.button{font-family:'Montserrat Alternates',Verdana,sans-serif;font-size:1.2rem;border-radius: 10rem;
background: rgba(238, 130, 238, 0.7);padding:0.5rem 1rem 0.5rem 1rem;margin:2% 1% 1% 0%;border:solid;border-color:purple;border-width:1px;} /*формат всех кнопок сайта #cae1ff #bcd2ee #cae1ff __#b9d3ee__ #c6e2ff*/
.button:hover{cursor:pointer;background: rgba(238, 130, 238, 1)}
a{color:#0000cd;} /*все ссылки ____#0000cd____ #00008b__#27408b__#836fff*/
a:hover {color:Royalblue;} /*#436eee__Royalblue__ #27408b #3a5fcd*/
.nowrap{white-space:nowrap;}
#main_content_wrapper{width:100%;min-height:70%;display:flex;flex-direction:column;justify-content:center;} /*подблок article выравнивание контента по центру, если он занимает меньше 70% высоты экрана*/


/*ШАПКА*/
#header{height:15%;width:100%;border-bottom:solid;border-width:3px;border-color:peachpuff;border-color:rgba(255,218,185,0.30);}
/*
#header.night_sky{background: mediumslateblue; 
background: linear-gradient(to bottom, mediumslateblue, Lavender);}
#header.day_sky{background:#a4d3ee; 
background: linear-gradient(to bottom, #a4d3ee, ivory);}
*/
#header_subblock{height:100%;width:100%;display:flex;justify-content:space-between;align-items:center;}
/*#header_subblock.stars{background-image:url("/Images/stars.png");background-repeat:repeat no-repeat;}*/
#title_block{display:flex;flex-direction:column;justify-content:space-around;align-items:center;}
h1 {font-family:"Pinyon Script", "Monotype Corsiva", Arial, Verdana, sans-serif;text-align:center;font-size: 4rem;line-height:3.0rem;}/*Высота строки подобрана чтобы h2 не вылезал за за нижнюю границу блока при сильном увеличении масштаба*/
h2 {font-family:"Monotype Corsiva", "Arsenal", Arial, Verdana, sans-serif;text-align:center;font-size:2.0rem;line-height:1.5rem;color:#36648b;}/*Для прежнего заголовка было font-size:1.5rem*/
#lighthouse_image{height:100%;float:left;display:block;margin:auto;}
#lighthouse_image:hover, #flying_ship_image:hover,h1:hover{cursor: pointer;}
#flying_ship_image{height:100%;float:right;display:block;margin:auto;}


/*ЦЕНТРАЛЬНАЯ НАВИГАЦИОННАЯ ПАНЕЛЬ*/
#navigation_panel {width:100%;/*высота блока адаптивная - по содержимому; при этом указывать размер дочерних картинок относительно родителя в % нельзя - картинки займут max размер, поэтому их размер задаётся ниже в единицах vh*/
padding-left:1%;padding-right:1%;box-sizing:border-box;text-align:center;
position:relative;display: flex;flex-direction:row;justify-content:space-between;align-items:center;
padding:0.2% 0.5% 0.2% 0.5%;}

#navigation{list-style-type:none;display:inline-block;width:100%;margin-top:0%;
font-family: 'Montserrat Alternates',sans-serif;font-size:1.8rem;line-height:2.0rem;
text-align:center;}

.navigation_panel_element {display:inline;padding:1%;margin:0%;}
.navigation_panel_link{color:#36648b;text-decoration:none;} /*color:#36648b; */
.navigation_panel_link:hover {text-decoration:underline;color:#0078ce;} /*Steelblue Royalblue #27408b #3a5fcd*/
.navigation_panel_link.favorite_color:hover {color:purple;} /*выделение активной ссылки Idreamyou*/

#collapse_or_expand_sidebar_button{height:8.5vh;display:inline-block;float:left;opacity:0.4;padding-left:2%;}
#collapse_or_expand_sidebar_button:hover{cursor: pointer;opacity:1.0;}

#dropdown_menu_block{height:8.5vh;display:inline-block;float:right;}
 
#header_menu_image{height:100%;margin:0;}

#header_login_link{height:8.5vh;display:inline-block;float:right;padding-right:2%;}
#header_login_image{height:100%;}

/*The sticky class is added to the header with JS when scrolled*/
.sticky_navigation_panel {
position: sticky !important;
top: 0;
background-color:ivory;
background-color:rgba(255,255,240,0.92);
z-index:10;
/*width:98% !important;/*костыль - без этого блок заезжает на полосу прокрутки справа*/
}

/* СТРАНИЦА ОТВЕТОВ */
.answer_box{width:100%;box-sizing:border-box;
border-radius:2rem;border-style:solid;border-color:purple;border-width:2px; 
padding:2%;margin:0%;}

/* БЛОГ */
h3.blog_title{padding:4% 0% 2% 0%;}
.blog_post_box{width:100%;box-sizing:border-box;
border-radius:2rem;border-style:solid;border-color:purple;border-width:2px; 
padding:2%;margin:0%;}
.post_images_block{width:100%;text-align:center;}
.post_image{display:inline-block;width:100%;border-radius:1rem;}
.post_title_link{color:purple;text-decoration:none;}
.post_title_link:hover{color:#0000cd;text-decoration:underline;}

/*иконки awesome*/
.fa-thumbtack{color:purple;}/*цвет иконок awesome*/
.fa-calendar-days,.fa-clock,.fa-location-dot{color:purple;}/*цвет иконок awesome*/
.fa-person,.fa-person-dress{color:purple;font-size:larger;}

/* аватарки в админской форме блога*/
.person_avatar_link,.person_avatar_icon{width:5%;display:inline-block;vertical-align:middle;}/*.person_avatar_icon - иконка аватарки без возможности увеличения*/
.person_avatar_image{width:100%;display:inline-block;vertical-align:middle;}
.empty_person_avatar_image{width:5%;display:inline-block;vertical-align:middle;}/*нужно для корректного отображения пустой аватарки*/
.person_avatar_blured{filter:blur(2px);} /* размытие аватарки в отзывах*/
/* аватарки на общедоступной странице блога*/
.person_info_block{width:100%;text-align:left;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;}
.person_avatar_link_flex,.empty_person_avatar_image_flex{width:5%;flex:0 0 5%;margin:0.25% 1% 0.25% 0%;}/* flex:grow shrink basis*/
.empty_person_avatar_image_flex{vertical-align:middle;}/* без этого свойства выравнивание будет по базовой линии*/
.person_avatar_image_flex{width:100%;vertical-align:middle;}

/* БЛОКИ С ФОТО*/
.one_img_on_page{display:inline-block;width:61%;margin:0.5%;} /*формат ссылок, в качестве которых использовано изображение*/
.two_imgs_on_page{display:inline-block;width:40%;margin:0.5%;}
.three_imgs_on_page{display:inline-block;width:31%;margin:0.5%;}
.four_imgs_on_page{display:inline-block;width:23%;margin:0.5%;}


/* СТРАНИЦЫ ЛИЧНОГО КАБИНЕТА (с формами и контентом) И ОТЗЫВЫ*/
/*иконка подсказки*/
.tool_tip{font-weight:bold;color:green;}
/*стилизация блока с подсказкой*/
.tippy-box[data-theme~='tippy_box_style'] {
font-family:'Arial', serif;font-size:1.2rem;
background-color: ivory;color: black;
border:solid;border-color:grey;border-width:1px;border-radius:0.5rem;
}
/*стилизация стрелок*/
.tippy-box[data-theme~='tippy_box_style'][data-placement^='top'] > .tippy-arrow::before {
border-top-color: grey;
}
.tippy-box[data-theme~='tippy_box_style'][data-placement^='bottom'] > .tippy-arrow::before {
border-bottom-color: grey;
}
.tippy-box[data-theme~='tippy_box_style'][data-placement^='left'] > .tippy-arrow::before {
border-left-color: grey;
}
.tippy-box[data-theme~='tippy_box_style'][data-placement^='right'] > .tippy-arrow::before {
border-right-color: grey;
}


/* -------------------------------------------------------------------------------- */
/* РАСКРЫВАЮЩЕЕСЯ МЕНЮ */
/* Кнопка выпадающего списка */
.dropbtn {
	/*background-color: #3498DB;*/
	display:inline-block;height:100%;
	cursor: pointer;
}
a.navigation_panel_link.dropbtn{opacity:1.0;}/*это условие ссылки на выпадающего меню*/

/* Контейнер <div> - необходим для размещения выпадающего содержимого */
.dropdown {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height:100%; box-sizing:border-box;/* added */
  padding-top:2%;padding-bottom:2%; /* added */
}

/* Выпадающее содержимое (скрыто по умолчанию) */
.dropdown-content {
  font-family: 'Montserrat Alternates',sans-serif;
  display: none;
  position: absolute;
  background-color:lightyellow;
  background-color:rgba(255,255,224,0.92);
  z-index: 1000;
  overflow:auto;/* added */
  font-size:1.3rem;/* added */
  border-radius:1rem; /* added */
}
div.dropdown-content#common_menu{width:300%;left: -100%;top:100%;} /*от размера элемента списка li*/
/*если нужно выровнить выпадающее меню по центру ссылки на больших экранах*/
/*@media screen and (min-device-width: 1000px) and (orientation: landscape)
{div.dropdown-content#common_menu{left: -100%;}}*/
div.dropdown-content#personal_menu{width:600%;right: 0;}

/*ссылка seek-you*/
#seek-you_link{color:purple !important;}

/*кнопка выхода в выпадающем меню*/
#logout_btn{font-size:1.3rem;padding: 1% 5% 1% 5%;margin: 3% 5% 4% 5%;}

/* Ссылки внутри выпадающего списка */
.dropdown-content a{
  color: black;
  text-decoration: none;
  display: block;
}
.dropdown-content#common_menu a{padding: 2% 1% 2% 1%;}
.dropdown-content#personal_menu a{padding: 3% 1% 3% 1%;}

/* Изменение цвета выпадающих ссылок при наведении курсора */
.dropdown-content a:hover {background-color:lemonchiffon;}

/* Показать выпадающее меню (используйте JS, чтобы добавить этот класс .dropdown-content содержимого, когда пользователь нажимает на кнопку выпадающего списка) */
.show {display:block;} 
/* -------------------------------------------------------------------------------- */


/*САЙДБАР*/
/*can not set MIN-height because in that case sidebar and article will have different length*/
#sidebar{height:100%;width:25%;float:left;font-family: "Comic Sans MS", "PT Sans", Arial, Verdana, sans-serif;
font-size:1.1rem;text-align:justify;padding:1%;
border-right:solid;border-width:3px;border-color:peachpuff;border-color:rgba(255,218,185,0.30);
border-top:solid;border-width:3px;border-color:peachpuff;border-color:rgba(255,218,185,0.30);
overflow-y:auto;overflow-x:hidden;}

#sidebar.hidden_sidebar{display:none;}

/*сайдбар (sidebar) на смартфонах отсутствует*/
#letters_counter_sidebar,#iks_counter_sidebar{font-family: "Monotype Corsiva", "Arsenal", Arial, Verdana, sans-serif; font-size:1.8rem;line-height:2rem;text-align: center;}
#leters_number_in_sidebar{font-family:"Pinyon Script";font-size:1.8rem;vertical-align:middle;font-weight:bold;color:tomato;}
.citation_sidebar{font-family:'Montserrat Alternates',sans-serif;font-size:1.1rem;line-height:2rem;}
#citation_text_sidebar{margin-top:1.0rem; margin-bottom:1.0rem;}
#citation_source_sidebar{text-align:right;}
#ship_image, #compass_image{display:block;width:70%;margin:5% auto 5% auto;}
#sidebar_announcement{font-family: "Monotype Corsiva", "Arsenal", Arial, Verdana, sans-serif; font-size:1.8rem;line-height:2rem;text-align: center;}
#sidebar_announcement_reference{color:Red;}
#sidebar_announcement_reference:hover{color:Blue;}


/*ПРАВАЯ КОЛОНКА Article*/
/*can not set MIN-height because in that case sidebar and article will have different length*/
/*сайдбар (sidebar) на смартфонах отсутствует*/
#article{height:100%;width:75%;padding:1% 2% 1% 2%;font-family:'Montserrat Alternates',sans-serif;font-size:1.5rem;text-align:justify;
overflow:auto;float:left;border-top:solid;border-width:3px;border-color:peachpuff;border-color:rgba(255,218,185,0.30);}

#article.hidden_sidebar {width:100%;}
.article_style{font-family:'Montserrat Alternates',sans-serif;font-size:1.5rem;}/*используется для форматирования ссылки внутри письма ("Вернуться в мои письма" при занрузку файлов)*/
h3{font-family:'Montserrat Alternates',sans-serif;text-align:center;font-size: 2.5rem;font-weight:bold;margin-bottom:1rem;color:purple;}
#homepage_message,#ads_message{font-family: "Monotype Corsiva", "Arsenal", Arial, Verdana, sans-serif;font-size:1.8rem;line-height:2rem;}
#homepage_message{font-weight:bold;padding-top:2%;}

/*блок счётчика и цитат на главной*/
#article_counter_and_citation_block{display:none;}/*на больших экранах не показывается*/

#visitors_map{width:100%;margin:2% auto 0% auto;overflow:hidden;}/*высота этого блока с запасом определяется с помощью медийных запросов в дополнительном файле css; длина и ширина этого блока должны быть заданы для корректной работы прелоудера и отсутствия "скачков" картинок*/
#image_to_occupy_free_space{display:block;width:40%;margin-right:30%;margin-left:30%;margin-top:5%;}/*заставка для заполнения страницы, когда выводится мало контента (например, короткое сообщение)*/
#welcome_image{width:50%;margin: 0% 25% 0% 25%;}
#personal_page_menu{width:100%;margin-bottom:2%;text-align:center;}
.personal_page_menu_item{display:inline-block;margin-bottom:1%;}
#confirmation_of_sent_answer{width:100%;border-style:solid;border-color:purple;border-width:2px;border-radius:2rem;padding:2%;margin:0%;text-align:justify;font-family:"Monotype Corsiva", "Arsenal", Arial, Verdana, sans-serif;}/*используется при выводе отправленного ответа пользователь-пользователь*/
#confirmation_of_sent_message{width:100%;border-style:solid;border-color:purple;border-width:2px;border-radius:2rem;padding:2%;margin:0%;text-align:justify;}/*используется при выводе отправленного ответа пользователь-->админ и админ-->пользователь (форма контактов и форма отправки сообщения из админского кабинета)*/
#list_of_rules{width:90%;margin:0% 5% 0% 5%;}
.list_of_rules_item{margin-top:0%;margin-bottom:4%;}
#list_marked_with_seagulls{width:90%;margin:0% 5% 0% 5%;}
@media screen and (max-device-width: 500px) {#list_marked_with_seagulls{list-style-image: url("/Images/indigo_gull_10.png");}}/*для устройств с шириной экрана менее 500px*/
@media screen and (min-device-width: 500px) {#list_marked_with_seagulls{list-style-image: url("/Images/indigo_gull_20.png");}}/*для устройств с шириной экрана более 500px*/
@media screen and (min-device-width: 1000px) {#list_marked_with_seagulls{list-style-image: url("/Images/indigo_gull_30.png");}}
@media screen and (min-device-width: 1500px) {#list_marked_with_seagulls{list-style-image: url("/Images/indigo_gull_40.png");}}
@media screen and (min-device-width: 2000px) {#list_marked_with_seagulls{list-style-image: url("/Images/indigo_gull_50.png");}}
@media screen and (min-device-width: 2500px) {#list_marked_with_seagulls{list-style-image: url("/Images/indigo_gull_60.png");}}
@media screen and (min-device-width: 3000px) {#list_marked_with_seagulls{list-style-image: url("/Images/indigo_gull_70.png");}}
.list_marked_with_seagulls_item{margin-top:0%;margin-bottom:4%;}
.ads_reference{font-family: 'Montserrat Alternates', sans-serif;text-decoration:none;}
.ads_reference:hover{text-decoration:underline;}

/*Формат вывода писем*/
.letter{width:100%;border-style:solid;border-color:ivory;border-color:rgba(255,255,240,0.1);border-width:3px;border-radius:1rem;padding:2%;margin:0%;font-family:"Monotype Corsiva", "Arsenal", Arial, Verdana, sans-serif;
background-image: url("/Images/letter_background.jpg");background-repeat:repeat repeat;}
.block_with_images_and_audio{width:40%;float:right;margin:0% 0% 2% 2%;}
.block_of_upper_images_in_letter{width:100%;text-align:center;}
.upper_image_in_letter{display:inline-block;width:48%;margin:1%;border-radius:0.5rem;}/*т.е. одно изображение занимает 19.2% ширины правой колонки*/
.audio_player{width:99%;margin:0.5%;float:right;clear:both;}
.block_of_lower_images_in_letter{width:100%;text-align:center;}
.lower_image_in_letter{display:inline-block;width:20%;margin:0.5%;border-radius:0.5rem;}/*ширина верхних и нижних изображений сделана одинаковой */
.letter_reference{text-decoration:none;color:black;}
.letter_reference:hover{color:blue;border-bottom:solid;}

/*основная форма поиска писем*/
.article_search_form_input_age{width:15%;text-align:center;}

/*боковая форма поиска писем*/
.sidebar_search_form_input{width:40%;text-align:center;font-size:0.8rem;}
.sidebar_search_form_textarea{font-size:0.8rem;}
.sidebar_search_form_input_age{width:25%;}
#create_letter_form_input_age, #edit_letter_form_input_age{width:10%;}

/*Формат админского кабинета*/
.user_answer{width:96%;border-style:solid;border-color:gray;border-width: 0.05rem;padding:2%;margin:0% 2% 0% 2%;font-family:"Monotype Corsiva", "Arsenal", Arial, Verdana, sans-serif;}/*формат вывода ответов пользователь-пользователь в админском кабинете*/
.user_card{width:96%;border-style:solid;border-color:gray;border-width: 0.05rem;padding:2%;margin:0% 2% 0% 2%;}

/*иконки групп*/
/*иконки групп*/
.public_icon_link{width:5%;box-sizing:border-box;margin:0.5% 1% 0% 1%;display:inline-block;vertical-align:middle;}
.public_icon_image{width:100%;}

/*ФУТЕР*/
#footer {min-height:10%;width:100%;font-family:"Monotype Corsiva", "Arsenal", Arial, Verdana, sans-serif;
text-align: center;clear:both;color:red !important;
border-top:solid;border-bottom:solid;border-width:3px;border-color:peachpuff;border-color:rgba(255,218,185,0.30);display:table;}
#footer_message{display:table-cell;vertical-align:middle;font-size:2rem;color:red !important;}
#footer_message font{font-weight:bold; color:purple;}/*без задействования тега font вет текста почему-то не меняется*/
/*РАЗНЫЙ ДИЗАЙН ДЛЯ БОЛЬШИХ И МАЛЫХ ЭКРАНОВ*/
/*на малых экранах сворачивающийся сайдбар присутствует только на главной странице, на остальных страницах - основная колонка занимает всю ширину*/
/*на больших экранах сворачивающийся сайдбар присутствует на всех страницах*/


/*ФОРМАТИРОВАНИЕ ДЛЯ СМАРТФОНОВ*/
@media screen and (max-device-width: 800px) /*для устройств с шириной экрана менее 800px*/
{
html,body{overflow-y:auto;}/*do not remoove, necessary for correct work of sticky header*/
#header{height:10% !important;}
#header_login_link,#dropdown_menu_block{height:6vh;} 

#footer {clear:none;min-height:7%;}
#article {width:100%;min-height:78% !important;height:auto !important; text-align:left !important;
padding-top:5%;float:none;overflow:visible;
display:flex;flex-direction:column;justify-content:center;}/*на смартфоне вся страница прокручивается вниз, фиксированного хедера и футера, как на десктопах нет*/
#article,.article_style{font-size:1.4rem;}
#main_content > p,#article > a {padding-left:2%;padding-right:2%;}/*direct childs of main_content, 6 is set because article padding is 2, form and letters padding is 4*/
#collapse_or_expand_sidebar_button{display:none;} 
#sidebar{display:none;float:none;} 
h1 {font-size: 2.5rem;line-height:2.0rem;}/*заголовок Idreamyou*/
h2 {font-size:1.1rem;line-height:1.5rem;}/*подзаголовок: переписка, дружба, знакомства*/
h3 {font-size:2.0rem;line-height:2.5rem;}
#navigation_panel{min-height:7%;padding-top:1%;padding-bottom:1%;}
.dropdown-content{font-size:1.6rem;}
div.dropdown-content#common_menu{width:250%;left:-75%;top:100%;}/*for middle shift left =(250-100)/2 for right shift left=250-100*/
div.dropdown-content#personal_menu{}
.dropdown-content#common_menu a{padding: 3% 2% 3% 2%;}/*ссылки в выпадающем блоке*/
.dropdown-content#personal_menu a{padding: 3% 2% 3% 2%;}
#logout_btn{font-size:1.6rem;margin: 4% 5% 4% 5%;}
textarea{padding:1% 2% 1% 2%;}
.form{padding-left:3%;padding-right:3%;}

/*.session_notification,.notification{text-align:left;}*/
/*
#navigation{font-size:2.5rem;line-height:2.5rem}
.dropdown-content {font-size:2.0rem;line-height:3.0rem;}
div.dropdown-content#common_menu{width:300%;left: -200%;}
*/
#homepage_message,#ads_message{font-size:1.6rem;line-height:2.0rem;padding:0% 2% 0% 2%;text-align:justify !important;}
#homepage_message{padding-top:0%;}
#ads_message{text-align:justify;}
/*блок счётчика и цитат на главной*/
#article_counter_and_citation_block{display:block!important;padding:0% 2% 0% 2%;}/*на больших экранах не показывается*/
/*счётчик писем и метрика ИКС на главной*/
#letters_counter_article,#iks_counter_article{font-family: "Monotype Corsiva", "Arsenal", Arial, Verdana, sans-serif;color:purple;font-weight:bold;font-size:1.8rem;line-height:2rem;text-align: center;}
#leters_number_in_article{font-family:"Pinyon Script";font-size:2.7rem;vertical-align:middle;font-weight:bold;color:tomato;}
/*цитата на главной*/
#link_citation{font-family:'Montserrat Alternates',sans-serif;font-size:1.8rem;line-height:2rem;text-align: center;}
.citation_article{font-family:'Montserrat Alternates',sans-serif;font-size:1.5rem;line-height:2rem;}
#citation_text_article{margin-bottom:1.0rem;}
#citation_source_article{text-align:right;}
#visitors_map{margin-top:8%;}
#welcome_image{width:80%;margin: 0% 10% 0% 10%;}
#footer_message{font-size:1.4rem;padding-top:2%;padding-bottom:2%;}
#list_of_rules{list-style-position: inside;margin:0% 5% 0% 5%;}
.button{font-size:1.5rem;}
.letter_control_button{font-size:1.2rem;}/*кнопки управления письмом в ЛК при редактировании и создании письма*/
.letter{padding:2% 3% 2% 3%;font-size:1.5rem;} /* maybe set 4% for padding-left-right */

/*иконки групп*/
.public_icon_link{width:10%;}
.footer_public_icon_link{width:10%;}

/* фото в письмах */
.upper_image_in_letter{width:45%;margin:2%;}
.lower_image_in_letter{width:20%;margin:2%;}

/* О проекте и правила*/
#list_of_rules{width:95%;margin:0% 3% 0% 2%;}
#list_marked_with_seagulls{width:92%;margin:0% 3% 0% 5%;}

/* блог*/
h3.blog_title{padding:4% 0% 2% 0%;}
.blog_post_box{padding:2% 3% 2% 3%;} /* maybe set 4% for padding-left-right */
/* фото в блоге*/
.one_img_on_page{display:inline-block;width:95%;margin:0.5%;} /*формат ссылок, в качестве которых использовано изображение*/
.two_imgs_on_page{display:inline-block;width:46%;margin:0.5%;} /*ширина групп изображений выровнена и составляет 92%*/
.three_imgs_on_page{display:inline-block;width:30%;margin:0.5%;}
.four_imgs_on_page{display:inline-block;width:30%;margin:0.5%;}

/* аватарки в админской форме блога*/
.person_avatar_link,.person_avatar_icon{width:10%;}
.empty_person_avatar_image{width:10%;}/*нужно для корректного отображения пустой аватарки*/
/*аватарки на общедоступной странице блога*/
.person_avatar_link_flex,.empty_person_avatar_image_flex{width:15%;flex:0 0 15%;margin:0.75% 3% 0.75% 0%;}/* flex:grow shrink basis*/
.empty_person_avatar_image_flex{vertical-align:middle;}/* без этого свойства выравнивание будет по базовой линии*/
.person_avatar_image_flex{width:100%;vertical-align:middle;}

/*adaptation of forms for smartphones*/
.login_form_inputs,.recovery_form_inputs,.registration_form_inputs,.change_password_form_inputs ,.contact_form_inputs{width:75%;font-size:1.5rem;}
#send_message_form_input_topic{width:90%;}
#contact_form_textarea,#create_letter_form_textarea,#edit_letter_form_textarea,#search_form_textarea,#letter_reply_form_textarea,
.create_letter_form_inputs,.edit_letter_form_inputs,.article_search_form_inputs,#letter_reply_form_input,
.files_upload_and_delete_forms_selects,#files_upload_form_input_file,#create_or_edit_post_form,
.create_or_edit_post_form_textarea,.create_or_edit_post_form_inputs{font-size:1.5rem;}
#login_form,#recovery_form,#registration_form,#change_password_form,#contact_form,#search_form,
#letter_reply_form,#create_letter_form,#edit_letter_form,#upload_and_delete_file_forms,#create_or_edit_post_form{line-height:2.5rem;}
}

/*ДЛЯ ГОРИЗОНТАЛЬНЫХ СМАРТФОНОВ */
@media (orientation: landscape) and (max-device-height: 600px) {
#header{height:20% !important;} /*размеры картинок маяка и корабля рассчитываются от размера блока*/
#header_login_link,#dropdown_menu_block{height:12vh;}
#welcome_image{width:50%;margin: 0% 25% 0% 25%;}
}