/* ################################################## */
/* Стили общего плана */
/* ################################################## */

*	{
	margin: 0px auto; 
}

BODY	{
	font-family: Calibri, Open Sans, Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #000;
	background: #fff;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

A 			{color: #009;}
A:Visited 	{color: #006;}
A:Active 	{color: #00c;}
A:Hover 		{color: #00c;}

/* ################################################## */
/* Стили хидера */
/* ################################################## */

.header	{
	width: 95%;
	max-width: 900px;
	/* background: #f9f;
	border: 1px solid red; */
	border-bottom: 2px solid #009;
	text-decoration: none;
	display: flex;
	align-items: flex-end;
	margin-bottom: 20px;
}

.header_logo	{
	/* background: #cc6;
	border: 1px solid red; */
	margin-top: 5px;
	margin-bottom: 4px;
	margin-left: 0px;
	margin-right: 0px;
}

.header_title	{
	/* background: #cc6;
	border: 1px solid red; */
	font-size: 28px;
	font-weight: bold;
	color: #000;
	padding-top: 10px;
}

.header_menu	{
	/* background: #ccc;
	border: 1px solid red; */
	text-align: left;
	padding-top: 10px;
	margin-left: 18px;
	float: left;
}

.menu_item	{
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
}

/* ################################################## */
/* Стили футера */
/* ################################################## */

.footer	{
	/* background: #9ff; */
	width: 95%;
	max-width: 900px;
	margin-top: 30px;
}

.footer_menu	{
	text-align: center;
	/* background: #999; */
	border-top: 2px solid #009;
	border-bottom: 2px solid #009;
	padding-top: 3px;
	padding-bottom: 5px;
	margin-bottom: 5px;
}

/* ################################################## */
/* Стили тела страницы */
/* ################################################## */

.content	{
	/* background: #ff9; */
	width: 95%;
	max-width: 900px;
}

.title	{
	/* Таки решил воздержаться от выделения в отдельный тип, оставив заголовок как H2 */
	/*  */background: #ccc;
	padding-top: 10px;
	padding-bottom: 10px;
}

.author	{
	/* background: #ff9; */
	font-style: italic;
	width: 95%;
	max-width: 900px;
	margin-left: 0px;
	margin-bottom: 10px;
}

.date	{
	/* background: #f9f; */
	font-size: 16px;
	width: max-content;
	margin-left: 0px;
	margin-bottom: 40px;
}

.epigraph	{
	/* background: #ff9; */
	font-size: 16px;
	width: max-content;
	margin-right: 0px;
	margin-top: -20px;
	margin-bottom: 20px;
}

.epigraph_source	{
	/* background: #f9f; */
	font-size: 16px;
	text-align: right;
	width: max-content;
	margin-right: 0px;
	margin-top: -15px;
	margin-bottom: 20px;
}

P	{
	margin-top: 5px;
	margin-bottom: 15px;
	/* hyphens: auto; */
}

h2	{
	/* background: #ccc; */
	padding-top: 10px;
	padding-bottom: 10px;
}

h3	{
	/* background: #ccf; */
	padding-top: 8px;
	padding-bottom: 8px;
}

h4	{
	/* background: #cfc; */
	padding-top: 6px;
	padding-bottom: 6px;
}

TD, TH	{
	font-size: 12px;
}

OL	{
	margin-top: 5px;
	margin-bottom: 15px;
}

UL	{
	margin-top: 5px;
	margin-bottom: 15px;
}

LI	{
	margin-bottom: 5px;
}

.small	{
	font-size: 16px;
}

.small_grey	{
	font-size: 16px;
	color: #666;
}

.extra-small {
	font-size: 12px;
}

.strong {
	font-weight: bold;
}

.addition_block_grey	{
	background: #eee;
	font-size: 16px;
	padding: 8px;
	padding-top: 4px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.picture_preview_block	{
	/* background: #ccc;
	border: 1px solid red; */
	max-width: 900px;	/* как у таблицы с width="100%" */
	padding-top: 10px;
	display: flex;
	flex-wrap: wrap; 	/* разрешаем перенос на новую строку */
}

.picture_preview_block_all	{
	/* background: #ccc;
	border: 1px solid red; */
	max-width: 900px;	/* как у таблицы с width="100%" */
	padding-top: 10px;
	padding-bottom: 20px;
	display: flex;
	flex-wrap: wrap; 	/* разрешаем перенос на новую строку */
}

.picture_preview_and_capture	{
	/* background: #c6c;
	border: 1px solid black; */
	text-align: center;
	display: flex;
	flex-direction: column;	/* картинка сверху, подпись снизу */
}

.picture_preview	{
	/* background: #cc6;
	border: 1px solid black; */
	width: max-content;
	height: max-content;
	padding: 5px;
}

.picture_preview_capture	{
	/* background: #cc6;
	border: 1px solid black; */
	font-size: 16px;
	padding-bottom: 20px;
	color: #666;
}

.picture	{
	/* background: #cc6;
	border: 1px solid black; */
	margin-top: 10px;
	margin-bottom: 20px;
}

.picture_with_up_capture	{
	/* background: #cc6;
	border: 1px solid black; */
	width: 100%; /* Ширина будет равна ширине картинки */
	margin-top: 10px;
	margin-bottom: 20px;
}

.top_picture_capture {
	color: #666;
	font-size: 16px;
	padding-bottom: 4px;
	padding-left: 0px;
}

.listing_preview_block	{
	/* background: #ccf;
	border: 1px solid red; */
	padding-top: 20px;
	padding-bottom: 20px;
	display: flex;
	flex-wrap: wrap;	/* разрешаем перенос на новую строку */
}

.listing_preview	{
	/* background: #cc6;
	border: 1px solid black; */
	min-width: 240px;
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
}

.listing_describe	{
	/* background: #6cc;
	border: 1px solid black; */
	max-width: 630px;
	margin-top: 5px;
	margin-left: 0px;
	padding-left: 20px;
	/* flex: 1 1 auto;			Позволяет контейнеру занимать место и сжиматься */
	/* min-width: min-content;	Контейнер не сожмется сильнее, чем самое длинное слово */
	/* word-break: break-word;	Безопасный перенос слов внутри контейнера */
	/* ЗЫ Пытался сделать так, чтобы при уменьшении окна сначала слова переносились внутри дива с описанием, а уже потом само описание соскакивало под картинку.
	Погуглил, нашёл решение (три строчки с каментами выше), но, судя по всему, не помогло. */
}

.listing_date	{
	/* background: #f9f; */
	font-size: 16px;
	margin-top: 10px;
}

.news_date	{
	/* background: #f9f; */
	font-size: 16px;
	margin-top: 30px;
}








.accent_block_green	{	/* пока не используется */
	background: #cfc;
	padding: 10px;
	padding-top: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-radius: 4px;
}

.highlight_green {background: #cfc;}	/* пока не используется */
.highlight_blue {background: #def;}	/* пока не используется */
.highlight_yellow {background: #ffc;}	/* пока не используется */