body, html { font-size: 100%; padding: 0; margin: 0; background-color: #bbbbbb; text-align: center;}
	/* div_h -- Заголовок */
	.div_h	{display: inline-block; width: 100%; height: 10%; margin: 3px;}
	/* div_t -- Основное поле */
	.div_t	{display: inline-block; width: 100%; height: 80%; margin: 3px;}
	/* div_p --  */
	.div_p	{display: inline-block; width: 100%; height: 10%; margin: 3px;}
	/* d_br -- Перенос строки */
	.d_br 	{display: block; width: fit-content;}
/* ----------------------------------------------- */
			.view {
				position: relative;	
				float: left;
				width: 120px;
				height: 130px;
/* между картинками */
				margin: 5px;
/* цвет рамки */
				border: 5px solid #C0C0C0;
/* тень элемента */
				box-shadow: 0px 0px 5px #000;
/* Отображается только область внутри элемента, остальное будет скрыто. */
				overflow: hidden;
				text-align: center;
/* курсор - знак вопроса */
				cursor: help;
			}
			.view:hover {
				border: 5px solid #009900;
			}
			.view img {
				width: 120px;
				height: 130px;
 /* перенос строк в начале и в конце содержимого */
				display: block;
				position: relative;
			}
			.view a.info {
				width:80px;
				height:80px;
/* внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный */
				display: inline-block;
				text-decoration: none;
			}
/* квадрат затемнения при наведении */
			.view .mask {
/* Размер квадрата затемнения (внутренний размер*/
				width: 100px;
				height: 110px;
				position: absolute;
/* Отображается только область внутри элемента, остальное будет скрыто. */
				overflow: hidden;
/* Отступ с верху до фона затемнения */
				top: 0px;
/* Оступ слева до фона затемнения */
				left: 0px;
/* прозрачность 0 - прозрачный (формируем но не показываем)*/
				opacity: 0;
/* Отображается все содержание элемента, даже за пределами установленной высоты и ширины */
				overflow:visible;
			}
			.view:hover .mask {
/* прозрачность (показываем сформированный) 1 - непрозрачный*/
				opacity: 1;
/* Размер бордюра квадрата затемнения (плюс к внутреннему размеру) именно он и показывается!!!!  прозрачность квадрата было 0-0-0-0.7 */
				border:10px solid rgba(180,255,180,0.8);
			}

/* --------------------Для главной страницы----------------------- */
			.view_ind {
				position: relative;	
				float: left;
				width: 150px;
				height: 150px;
/* между картинками */
				margin: 5px;
/* цвет рамки */
				border: 5px solid #C0C0C0;
/* тень элемента */
				box-shadow: 0px 0px 5px #000;
/* Отображается только область внутри элемента, остальное будет скрыто. */
				overflow: hidden;
				text-align: center;
/* курсор - знак вопроса */
				cursor: help;
			}
			.view_ind:hover {
				border: 5px solid #009900;
			}
			.view_ind img {
				width: 150px;
				height: 150px;
 /* перенос строк в начале и в конце содержимого */
				display: block;
				position: relative;
			}
			.view_ind a.info {
				width:150px;
				height:150px;
/* внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный */
				display: inline-block;
				text-decoration: none;
			}
/* квадрат затемнения при наведении */
			.view_ind .mask_ind {
/* Размер квадрата затемнения (внутренний размер*/
				width: 110px;
				height: 110px;
				position: absolute;
/* Отображается только область внутри элемента, остальное будет скрыто. */
				overflow: hidden;
/* Отступ с верху до фона затемнения */
				top: 0px;
/* Оступ слева до фона затемнения */
				left: 0px;
/* прозрачность 0 - прозрачный (формируем но не показываем)*/
				opacity: 0;
/* Отображается все содержание элемента, даже за пределами установленной высоты и ширины */
				overflow:visible;
			}
			.view_ind:hover .mask_ind {
/* прозрачность (показываем сформированный) 1 - непрозрачный*/
				opacity: 1;
/* Размер бордюра квадрата затемнения (плюс к внутреннему размеру) именно он и показывается!!!!  прозрачность квадрата было 0-0-0-0.7 */
				border:20px solid rgba(180,255,180,0.8);