/* В этом файле описаны основные элементы, которые присутствуют на всех страницах */

/* Это правило применяется ко всему документу и говорит о том, что
фактические размеры всех блоков будут иметь именно такие значения, которые
указаны в атрибутах width:, min-width:, min-height: и прочих аналогичных
без учета margin,padding и border. 
Если это правило не указывать, то на фактические размеры всех блоков будут
как бы суммировать все значения width, margin,padding и border.
Подробное описание: http://ru.learnlayout.com/box-sizing.html */
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* ---------------------------------------------------------------Тело страницы-------------------------------------------- */
/* Самый верхний элемент на странице - это html. Все более низкие элементы
наследуют его свойства. Если у более низких элементов выставлять размеры
высоты и ширины в 100% то они будут занимать 100% от размеров родителя,
а не окна браузера. Чтобы у более низких элементов не было никаких полей
и чтобы они растягивались на весь экран надо убрать поля у родителя.
Подробное описание: https://habrahabr.ru/post/189252/ */

/* Обнуление полей всех элементов на странице */
* {
    margin: 0;
    padding: 0;
   }

html {
  /*   margin: 0;
    padding: 0; */
}

body {
  margin: 38px 0 0 0;
  font-family: Tahoma, Geneva, sans-serif;
  /* min-width: 973px; */								/* Минимальная ширина, после которой добавляется полоса прокрутки. */
  overflow: auto;								/* добавить полосу прокрутки именно для этого блока*/
  background-color: Seashell;					/* Цвет всего заднего фона */
  /*background-color: red;*/
}


/* ------------------------------------------Элементы, общие для всего документа------------------------------------------ */

/* Блок, в котором содержится Картинка с подписью */
figure {
  text-align: center;
  
  text-indent: 0;
  /* border: thin silver solid; */
  /* background: azure; */ /* Цвет фона */
}
/* Событие наведения мышки на блок с картинкой */
figure:hover {
	cursor:pointer;
}

/* Выравнивание блока с картинкой по левому краю */
.left-position {
	float: left;
	margin: 0 10px 0 0;
}

/* Выравнивание блока с картинкой по правому краю */
.right-position {
	float: right;
	margin: 0 0 0 10px;
}

/* Подпись картинок. Здесь (общий для всех) указаны только поля */
figcaption {
	margin: 10px 0 0 0;
}

/* Подпись картинок - название картин */
.pic-name {
	font-family: 'Times New Roman', Times, serif; /* Гарнитура текста */
	color: maroon; /* Цвет текста */
	font-size: 14px;
	font-weight: bold;
}

.pic-add {
	font-family: 'Times New Roman', Times, serif; /* Гарнитура текста */
	color: maroon; /* Цвет текста */
	font-size: 13px;
	font-weight: bold;
	font-style: italic;
	text-align: left;
}

.pic-type, .pic-year, .pic-size {
	font-style: italic;
	color: brown;
	text-align: left;
	font-size: 11px;
}

/* ------------Класс для подчеркивания блока---------- */
.bottom-line {
  border-bottom: 1px solid #888;
}

.rotate180 {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------Верхнее меню -------------------------------------------- */
/* Полоска для верхнего меню. (ширина во весь экран) */
#topMenuBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 38px;
  background: linear-gradient(to top, #FFFACD, #E0FFFF);
  z-index: 10;
}

/* Само верхнее меню (центрировано по центру) */
#topMenu {
  width: 973px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow:hidden;                  /* Свойство задается, поскольку этот блок содержит в себе float блоки. см. http://dreamhelg.ru/2011/02/css-position-in-10-steps/ */
  
}

/* Свойства для всех блоков верхнего меню */
#topMenu div {
  height: 60%;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 9px;
  margin-bottom: 9px;
  padding-right: 7px;
  padding-left: 7px;
  text-align: right;
  font-size: 80%;
  color: #696969;
  /* background-color: red; */
}

/* Цвет всех пунктов верхнего меню */
#topMenu a {
  color: #696969;
}

/* Цвет посещенных пунктов верхнего меню */
#topMenu a:visited {
  color: #696969;
}

/* Оформление только для блоков самого меню - стоят слева */
#topMenuText {
  float:left;
  border-right: 2px solid #A9A9A9;
}

/* Оформление для блоков информации о посещениях - справа */
#topMenuInfo {
	float:right;
	border-left: 2px solid #A9A9A9;
	/* color: #696969; */
}

.visitors_info {
	float:right;
	border-left: 2px solid #A9A9A9;
}

.bold_text {
	font-weight: bold;
}

/* ---------------------------------------------------------------Заглавный блок с именем художника------------------------ */

/* Заглавный блок с фото и именем художника */
#headBlock {
	display: flex;
	/* Хорошее видео https://www.youtube.com/watch?v=38bMnJ2l4bg */
	/* Полное руководство https://frontender.info/a-guide-to-flexbox/ */
	/* Еще понравился https://htmlweb.ru/css/flexbox.php */
	align-items: flex-start; /* Все элементы прижаты к верхнему краю */
	margin-left: auto;
	margin-right: auto;
	width: 973px;
	padding: 15px;
	/* overflow:hidden; */         /* Это для того, чтобы блок, в котором содержится этот блок, растянулся вниз до конца, см. http://dreamhelg.ru/2011/02/css-position-in-10-steps/ */
	/* background-color: yellow; */
}

/* Блок с фото Художника */
#painterPicture {
	/* flex-basis: 250px; */ /* То же самое, что with */
	padding-top: 10px;
}

/* Блок с основной информацией о художнике - имя, годы жизни */
#painterInfo {
	flex: 1 1 100%;
	/* flex-basis: 70%; */
	/* flex-grow: 1; */ /* Т.е. растягивается по всей оставшейся части контейнера */
	padding: 10px;
	/* background-color: lightblue; */
}

/* Блок с именем художника */
#painterName {
	text-align: center;
	height: 80px;
	line-height: 80px; /* Для того, чтобы текст разместился по центру */
	font-family: Verdana, Arial, sans-serif;
	font-style: normal;
	font-weight: 100;
	font-size: large;
	color: white;
	width: 100%;
	background-color: Silver;
}

/* Блок с датами жизни художника */
#painterDesc {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-content: flex-start;
	padding: 15px 0 0 45px;
	font-family: Noto Sans, sans-serif;
	font-style: normal;
	font-weight: 100;
	font-size: 14px;
	width: 100%;
	/* background-color: Green; */
	
}

.paint-desc-row {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin: 0 0 5px 0;
	/* background-color: Grey; */
}
.first-select {
	color: maroon; /* Цвет текста */
    font-weight: 600; /* Жирное начертание */
	font-style: oblique;
	flex: none;
	width: 175px;
	/* background-color: yellow; */
}
.second-select {
	flex-grow: 1;
	/* background-color: LightGrey; */
}

/* ---------------------------------------------------------------Вставка между блоком художника и текстом------------------------ */

/* Общий блок, содержащий вставку */
#vstavka {
	display: flex;
	flex-direction: row; /* Направление блоков */
	justify-content: center; /* Выравнивание блоков по основной оси */
	align-items: center; /* Выравнивание блоков по вспомогательной оси */
	/* margin-left: auto;
	margin-right: auto;
	width: 973px;
	padding: 15px; */
	/* overflow:hidden; */         /* Это для того, чтобы блок, в котором содержится этот блок, растянулся вниз до конца, см. http://dreamhelg.ru/2011/02/css-position-in-10-steps/ */
	/* background-color: yellow; */
}

#vstavkaFig {
	/* background-color: green; */
}

/* ----------------------------------------------------------------Меню сайта---------------------------------------------- */

/* Пункт меню страницы, на которой сейчас находимся (заблокированный пункт) */
a.disabled {
	pointer-events: none; /* делаем элемент неактивным для взаимодействия */
	cursor: default; /*  курсор в виде стрелки */
	color: #888; /* цвет текста серый */
}

a.disabled-lan {
	pointer-events: none; /* делаем элемент неактивным для взаимодействия */
	text-decoration: none; /* Подчеркивания текста нет */
	cursor: default; /*  курсор в виде стрелки */
	color: #888; /* цвет текста серый */
}

/* Пункт меню, который не является ссылкой */
.tvorchestvo {
	list-style-type: none;
	font-family: Arial, sans-serif;
	font-size: 12px;
}

/* Весь список основного меню */
#mainMenu {
	list-style-type: none; /* маркеров нет */
	padding-top: 20px;
	padding-left: 150px;
	/* background-color: LightGrey; */
}

/* Все строчки списка с особым шрифтом */
/* как подготовить шрифт   https://ru.stackoverflow.com/questions/640439/google-fonts-%D0%B2-ie */
.main-menu {
	font-family: 'Conv_MarckScript-Regular', sans-serif;
	font-size: 20px;
}

/* Вложенный список в списке меню */
#subMenu {
	padding-left: 40px; /* Сдвинут вправо */
	list-style-type: disc; /* тип маркера */
}


/* Как работает flex https://tproger.ru/translations/how-css-flexbox-works/ */
/* еще начать с этого   https://ru.stackoverflow.com/questions/352087/div-%D0%97%D0%B0%D0%BD%D1%8F%D1%82%D1%8C-%D0%BE%D1%81%D1%82%D0%B0%D0%B2%D1%88%D0%B5%D0%B5%D1%81%D1%8F-%D0%BC%D0%B5%D1%81%D1%82%D0%BE */
/* Flexbox полное руководство https://frontender.info/a-guide-to-flexbox/ */
/* Размер Flex элемента (в т.ч. ширина) http://shpargalkablog.ru/2016/05/flex.html */

/* ----------------------------------------------------------------Подвал--------------------------------------------------- */
/* Весь блок подвала (растянут на всю ширину)*/
#footer {
	/* position: relative; */ /* назначается для того, чтобы позиционировать все входящие блоки */
						/* хорошее описание http://dreamhelg.ru/2011/02/css-position-in-10-steps/ */
	/* width: 973px; */
	width: 100%;
	/* margin-left: auto;
	margin-right: auto; */
	/* z-index: -10; */
	height: 38px;
	font-size: 8pt;
	outline: 1px solid #888;
	background-color: LightGray;
	/* background-color: #FFF5EE; */		/* Цвет всего блока подвала */
}

#footCenter {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 973px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Блок с копирайтом (расположен слева) */
#copirait {
	/* position: absolute; */
	/* top: 50%; */					/* Для центрирования по вертикали   https://learn.javascript.ru/css-center */
	/* margin-top: -0.625em; */
	/* left: 0; */
	padding-left: 25px;
	/* background-color: blue; */
}

/* Блок с надписью о правах (расположен справа) */
#rights {
	padding-right: 5px;
	/* background-color: yellow; */
}

/* ----------------------------------------------------------------Всплывающий блок-------------------------------------------- */
/* Весь всплывающий блок */
#popupContainer {
	width:100%;
    /* min-height:100%; */
	height:100%;
    background-color: rgba(0,0,0,0.85);
    overflow:hidden;
    position:fixed;
    top:0px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Горизонтальная ось блоков (содержит стрелочки и общий блок в котором картинка с названиями)*/
/* Фактически - это тот блок, который виден по центру окна. */
#gorizontOs {
	display: flex;
	flex-direction: row; /* Направление блоков */
	justify-content: center;
	align-items: center; /* Выравнивание блоков по вспомогательной оси */
	position: fixed;
	/* Эти параметры подставляются js после определения размеров окна браузера */
	/* top: 5%;
	bottom: 5%;
	left: 5%;
	right: 5%; */
	border-radius: 50px;
	/* background-color: dimgray; */
	background-color: rgba(0,0,0,0.5);
}

/* Крестик закрытия окна */
#closeImg {
	position:absolute;
	top:0;
	right:0;	
}

/* Вертикальная ось блоков (содержит только блоки картинки и названий) */
#verticalOs {
	display: flex;
	flex-direction: column; /* Направление блоков */
	justify-content: center; /* Выравнивание блоков по основной оси */
	align-items: center; /* Выравнивание блоков по вспомогательной оси */
	
	flex: 1 1 100%;
	
	margin: 0;
	height: 100%;
	/* background-color: dimgray; */
}

/* Блок с заголовком картинки */
#popupHeader {
	text-align: center;
	/* background-color: dimgray; */
}

/* Блок с картинкой */
#mainPicture {
	margin: 5px 0;
  /* background-color: green; */
}

/* Весь Блок с описанием картинки */
#popupFooter {
	text-align: center;
	/* background-color: dimgray; */
}

/* Сам заголовок */
#commonHeader {
	font-family: Tahoma, Geneva, sans-serif;
	color:white;
	font-size: 16px;
}

/* Сама картинка */
#myImage{
	/* border: 3px solid #00af64; */
	border: 3px solid #BDB76B;
}

/* Название картинки */
#picName {
	text-align:center;
	font-weight: bold;
}

/* Доп. название (эскиз) */
#picAddName {
	text-align:center;
	font-size: 0.9em;
}

/* Авторы */
#picAutors {
	text-align:center;
}

/* Описание картины (размер, год)*/
#picDesc {
	text-align:left;
	font-size: 0.6em;
}

/* Доп инфа по картине (музей)*/
#picAddInfo {
	text-align:left;
	font-style: italic;
}

/* Все строки в названии картинки */
.pic-desc {
	font-family: Tahoma, Geneva, sans-serif;
	color:white;
}

/* событие наведения курсора на картинку */
.action-image:hover {
	cursor:pointer;
}

/* Всплывающий блок  http://jsfiddle.net/p7NbX/15/ */
/* https://habr.com/post/417873/ */
/* заменить рисунок j-query  http://2web-master.ru/changing-the-img-src-using-jquery.html */
/* растянуть блок на всю ширину с помощью flex   https://ru.stackoverflow.com/questions/687929/%d0%a0%d0%b0%d1%81%d1%82%d1%8f%d0%bd%d1%83%d1%82%d1%8c-div-%d0%bd%d0%b0-%d0%b2%d1%81%d1%8e-%d1%81%d0%b2%d0%be%d0%b1%d0%be%d0%b4%d0%bd%d1%83%d1%8e-%d0%bc%d0%b0%d0%ba%d1%81%d0%b8%d0%bc%d0%b0%d0%bb%d1%8c%d0%bd%d1%83%d1%8e-%d1%88%d0%b8%d1%80%d0%b8%d0%bd%d1%83 */