@charset "utf-8";
	* {padding: 0; margin: 0; box-sizing: border-box;}
	
	:root {
		--blue: #03f;
		--a_blue: #0080ff;
		--fon: #f2f2f2;
		--border: 1px solid lightblue;
		--Times: "Times New Roman", "Times CY", "Nimbus Roman No9 L", serif;
		--Verdana: Verdana, "Geneva CY", "DejaVu Sans", sans-serif;
		--a_height: 23px;
		--width_menu_mobile: 150px;
		--padding_main: 25px;
	}
			
	/*		не менять прописанный шрифт		*/
	body { -webkit-text-size-adjust: none; text-size-adjust: none; font-family: var(--Verdana);}
	
	html, body {scroll-behavior: smooth;}
	
	/*body {font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
	em, i {font-family: Georgia, serif; font-style: italic;}
	main {font-size: 16px;} */

/*-----------------------------------------------------------------------------------------------------------------------*/	
	/*	основная структура страниц desktop

		body
			header
				logotype-visitor
				epigraph
				enter
			
			nav (меню по сайту - список)
			
		 	way
		  
		  	main
		    	#content
				nav (внутреннее меню - список)
			
			footer
	*/
	
	main {display: flex;}
	#content {width: 81%;}
	aside {width: 19%;}
	
	a {text-decoration: none;}
	a:link {color: var(--blue);}
	a:visited {color: var(--blue);}
	a:hover {text-decoration: none;}
	
/*-----------------------------------------------------------------------------------------------------------------------*/
	/*	начальные установки	*/
	
	#top-desktop {display: grid; grid-template-rows: 185px 40px 50px;}
	
	#header-mobile {display: none; z-index: 1;}
	#header-mobile-without-toc {display: none; z-index: 1;}
	#menu-mobile {display: none;}
	#toc-mobile {display: none;}
	#way-mobile {display: none;}
	#enter-mobile {display: none;}
	#button-way-mobile-small {display: none;}
	#button-toc-mobile-small {display: none;}
	
/*-----------------------------------------------------------------------------------------------------------------------*/
	/*	мобильное меню	*/
	
	#menu-mobile ul, #menu-mobile li {list-style: none; margin: 0; padding: 0;}
	
	#menu-mobile {position: absolute; top: 50px; background: #f2f2f2; font-family: var(--Verdana); font-size: 17px;}
	
	#menu-mobile a {display: block; color: var(--blue);}
	#menu-mobile .drop-down-list > span {display: block; height: 23px; width: var(--width_menu_mobile); padding-left: 15px; color: var(--blue); margin: 20px 0 10px 0;}
	#menu-mobile > ul > li > a {height: 23px; width: var(--width_menu_mobile); padding-left: 15px; margin: 20px 0 20px 0;}
	#menu-mobile .drop-down-list > ul {display: none; margin: 0 20px 0 40px;}
	
	#menu-mobile .drop-down-list > ul li a {padding: 0 5px 0 5px; height: 25px; margin-bottom: 10px;}
	#menu-mobile .drop-down-list > ul > li:last-child > a {margin-bottom: 0;}
	#menu-mobile .drop-down-list:last-child > ul > li:last-child > a {margin-bottom: 10px;}

/*-----------------------------------------------------------------------------------------------------------------------*/
	/*	мобильное содержание	*/
	
	#toc-mobile ul, #toc-mobile li {list-style: none; margin: 0; padding: 0;}
	
	#toc-mobile {position: absolute; top: 50px; background: #f2f2f2; font-family: var(--Verdana); font-size: 17px;}
	
	#toc-mobile a {display: block; height: 23px; color: var(--blue);}
	#toc-mobile > ul > li > a {margin-top: 20px; padding-left: 15px; padding-right: 15px;}
	#toc-mobile > ul > li > ul a {margin-top: 10px; padding-left: 50px; padding-right: 15px;}
	#toc-mobile > ul > li:last-child {margin-bottom: 15px;}
	
/*-----------------------------------------------------------------------------------------------------------------------*/
	/*	мобильный путь	*/
	
	#way-mobile {position: absolute; top: 50px; right: 0; background: #f2f2f2; font-family: var(--Verdana); font-size: 17px;}
	
	#way-mobile div {margin-top: 10px; padding: 0 15px 0 15px; color: var(--blue);}
	#way-mobile div:last-child {margin-bottom: 20px;}
	#way-mobile a {text-decoration: underline;}
		
/*-----------------------------------------------------------------------------------------------------------------------*/
	/*	мобильный вход	*/
	
	#enter-mobile {position: absolute; top: 50px; right: 0; background: #f2f2f2; font-family: var(--Verdana); font-size: 14px; min-width: 240px;}
	
	#enter-mobile form {padding: 15px 25px 15px 25px;}
	#enter-mobile div {margin-bottom: 15px;}
	#enter-mobile div:nth-child(3) input {vertical-align: middle; margin-left: 10px; width: 18px; height: 18px;}
	#enter-mobile div:last-child {text-align: center;}
	#enter-mobile form div:nth-child(1) label {display: block;}
	#enter-mobile form div:nth-child(2) label {display: block;}
	#enter-mobile-submit {padding: 4px 10px 4px 10px; border: 1px solid gray; border-radius: 15px; font-size: 14px; color: var(--blue);}
	#enter-mobile-learner {font-family: var(--Times); font-size: 20px; font-style: italic; color: green; letter-spacing: 0.08em;}

/*-----------------------------------------------------------------------------------------------------------------------*/
	/*	шапка desktop - логотип, эпиграф, вход	*/
		
	#header {display: grid; grid-template-columns: 170px 1fr 155px; justify-items: end; margin-top: 7px;}
	
	#div-logotype-visitor {width: 150px; text-align: center; font-family: var(--Times);}
	
	#logotype {height: 90px; padding-top: 7px; font-size: 40px; line-height: 0.9em; color: var(--blue); background: var(--fon); border: var(--border); border-radius: 10px;}
	
	#visitor {margin-top: 20px; font-size: 15px; font-style: italic; letter-spacing: 0.05em; color: green;}
	
	#epigraph {justify-self: center; width: 430px; height: 110px; padding: 3px 0 5px 5px; font-size: 16px; font-family: var(--Times); font-style: italic; color: var(--blue); line-height: 0.9em; background: var(--fon); border: var(--border); border-radius: 10px;}
	
	#epigraph p {float: right; margin: 10px 10px 0 0; font-size: 16px; font-family: var(--font); font-style: normal;}
	
	#enter-title {text-align: center; font-size: 12px; color: var(--blue);}
	
	#enter {justify-self: start; width: 140px; font-size: 10px; font-family: var(--Verdana); background: var(--fon); border: var(--border); border-radius: 10px;}
	
	#enter form {margin: 10px 0 10px 7px;}
	
	#enter form > div:nth-child(1) label {display: block;}
	#enter form > div:nth-child(2) label {display: block;}
	
	#p-pass {margin-top: 5px;}
	#p-cookie {margin-top: 10px;}
	#p-cookie input {vertical-align: middle; margin-left: 10px;}
	#enter-submit {margin-top: 7px; font-size: 10px; padding: 4px 7px 4px 7px; border: 1px solid gray; border-radius: 10px; color: var(--blue);}
	#enter-log, #enter-pass {color: #999;}
	#p-change-log-pass {text-align: center; margin-bottom: 5px;}
	
/*-----------------------------------------------------------------------------------------------------------------------*/
	/*	меню desktop	*/
	
	#main-menu ul, #main-menu li {list-style: none; margin: 0; padding: 0;}
	
	#main-menu > ul {align-self: end; height: 25px; margin-left: calc(100% / 20 - 35px); display: grid; grid-template-columns: repeat(8, calc(100% / 20 + 70px));}
	
	#main-menu .drop-down-list {display: grid;}
	
	#main-menu .drop-down-list ul {border: var(--border); border-radius: 5px; background: #ffa; display: none;}
	
	#main-menu .drop-down-list span {height: var(--a_height); width: 105px; padding: 2px 0 2px 0; text-align: center; font-family: var(--Verdana); font-size: 13px; font-weight: bold; background: #ffa; border: var(--border); border-radius: 5px; color: var(--blue);}
	
	#main-menu a {display: block; height: var(--a_height); font-size: 13px; font-weight: bold; font-family: var(--Verdana); color: var(--blue);}
	
	#main-menu .drop-down-list a {height: calc(var(--a_height) + 3px); padding: 4px 0 0 5px;}
	
	#main-menu > ul > li > a {width: 105px; padding: 2px 0 2px 0; text-align: center; background: #ffa; border: var(--border); border-radius: 5px;}
	
	#main-menu .drop-down-list:nth-child(2) {grid-template-rows: var(--a_height) calc(4 * (var(--a_height) + 3px));}
	#main-menu .drop-down-list:nth-child(2) a {width: 215px;}
	
	#main-menu .drop-down-list:nth-child(3) {grid-template-rows: var(--a_height) calc(2 * (var(--a_height) + 3px));}
	#main-menu .drop-down-list:nth-child(3) a {width: 165px;}
	
	#main-menu .drop-down-list:nth-child(4) {grid-template-rows: var(--a_height) calc(3 * (var(--a_height) + 3px));}
	#main-menu .drop-down-list:nth-child(4) a {width: minmax(120px, calc(100% / 20 + 70px));}
	
	#main-menu .drop-down-list:nth-child(5) {grid-template-rows: var(--a_height) calc(1 * (var(--a_height) + 3px));}
	#main-menu .drop-down-list:nth-child(5) a {width: minmax(120px, calc(100% / 20 + 70px));}
	
	#main-menu .drop-down-list:nth-child(8) {grid-template-rows: var(--a_height) calc(2 * (var(--a_height) + 3px));}
	#main-menu .drop-down-list:nth-child(8) a {width: 152px;}
	
/*-----------------------------------------------------------------------------------------------------------------------*/

	#go-up {float: right; margin-right: 8px; margin-top: -5px; width: 30px; height: 30px; display: none; border: 1px solid #aaa; border-radius: 100%; background: var(--fon); position: sticky; top: 15px;}
	
	#go-down {float: right; margin-right: 5px; margin-top: 5px; width: 30px; height: 30px; display: none; border: 1px solid #aaa; border-radius: 100%; background: var(--fon);}
	
/*-----------------------------------------------------------------------------------------------------------------------*/

	#way {align-self: center; margin-left: 40px; font-size: 11px; font-family: var(--Verdana); color: var(--blue); /*background: #fff;*/}
	
/*-----------------------------------------------------------------------------------------------------------------------*/
	/*	содержание для desktop	*/
	
	#nav-inner {position: sticky; top: 10px; padding-left: calc(30px - 2%); padding-bottom: 20px;}
	#nav-inner h2 {margin-top: 10px; margin-left: calc(100% * 5 / 9 - 95px);}
	
	#nav-inner ul {list-style: none; margin: 0; font-size: 12px; font-style: italic;}
	#nav-inner a {display: inline-block; color: #000;}
	#nav-inner > ul > li {margin-top: 20px;}
	#nav-inner > ul > li:first-child {margin-top: 0px;}
	#nav-inner > ul > li li {margin-left: 20px; margin-top: 10px;}
	
	#nav-inner a:hover {color: var(--a_blue);}
	
	.toc-point {scroll-margin-top: 10px;}		/*	при скролле к разделу сверху оставляем 10px	*/
	
/*-----------------------------------------------------------------------------------------------------------------------*/
	
	#content a:link {color: var(--a_blue);}
	#content a:visited {color: var(--a_blue);}
	
/*-----------------------------------------------------------------------------------------------------------------------*/

	h1 {max-width: calc(100% - 40px);}									/*	чтобы стрелка go-up не конфликтовала с h1	*/

/*-----------------------------------------------------------------------------------------------------------------------*/
	
	@media screen and (min-width : 1030px) and (max-width : 1200px) {				/*	 стили области управления	*/
			
		#nav-inner a {font-size: 14px;}
		#nav-inner > ul > li {margin-top: 25px;}
		
		#nav-inner > ul > li li {margin-left: 20px; margin-top: 18px;}
	}
/*----------------------------------------------------------------------------------------------------------------------*/
/*		при width < 1030 top-desktop и nav-inner заменяются на мобильное меню сверху		*/
	
	@media screen and (max-width : 1029.9px) {
	
		#content {width: 100%; margin: 0; padding: 20px 10px 20px 20px; display: block; font-size: 18px; border: none;}
		aside {width: 0%;}
	}
	
	@media screen and (min-width : 600px) and (max-width : 1029.9px) {
		
		#top-desktop {display: none;}
		#nav-inner {display: none;}
	
		/*-----------------------------------------------------------------------------------------------------------------------*/	

		#header-mobile {height: 50px; display: grid; grid-template-columns: 90px 35px 1fr 1fr 110px; align-items: center; position: sticky; top: 0; background: #fefefe; border-bottom: 3px solid #ccc;}
		
		#header-mobile-without-toc {height: 50px; display: grid; grid-template-columns: 90px 35px 1fr 110px; align-items: center; position: sticky; top: 0; background: #fefefe; border-bottom: 3px solid #ccc;}
		
		#logotype-mobile {width: 40px; margin-left: 15px; text-align: center; color: var(--blue); font-weight: bold; font-family: var(--Times); font-size: 30px;}
		
		#button-menu-mobile {height: 23px; width: 33px;}
		#button-menu-mobile img {height: 100%;}
		
		#button-toc-mobile {height: 30px; width: 120px; justify-self: center; font-size: 17px; border: 1px solid #aaa; border-radius: 15px; padding: 2px 10px 3px 10px; background: var(--fon); color: #000;}
		
		#button-way-mobile {height: 30px; width: 180px; justify-self: center; font-size: 17px; border: 1px solid #aaa; border-radius: 15px; padding: 2px 10px 3px 10px; background: var(--fon); color: #000;}
		
		#button-enter-mobile {height: 30px; width: 70px; justify-self: end; margin-right: 20px; font-size: 17px; border: 1px solid #aaa; border-radius: 15px; padding: 2px 10px 3px 10px; background: var(--fon); color: #000;}
		
		/*-----------------------------------------------------------------------------------------------------------------------*/
		
		#go-up {margin-right: 0; margin-top: -10px; position: sticky; top: 60px;}
		
		.toc-point {scroll-margin-top: 20px;}
	}

	@media screen and (min-width : 320px) and (max-width : 599.9px) {				/*	 стили области управления	*/

		#top-desktop {display: none;}
		#nav-inner {display: none;}
		#button-way-mobile {display: none;}
		#button-toc-mobile {display: none;}
		
		#button-way-mobile-small {display: block;}
		#button-toc-mobile-small {display: block;}
	
		/*-----------------------------------------------------------------------------------------------------------------------*/	

		#header-mobile {height: 50px; display: grid; grid-template-columns: 45px 33fr 30fr 50fr 55px; justify-items: center; align-items: center; position: sticky; top: 0; background: #fefefe; border-bottom: 3px solid #ccc;}
		
		#header-mobile-without-toc {height: 50px; display: grid; grid-template-columns: 50px 30fr 80fr 55px; justify-items: center; align-items: center; position: sticky; top: 0; background: #fefefe; border-bottom: 3px solid #ccc;}
		
		#logotype-mobile {width: 40px; justify-self: end; text-align: center; color: var(--blue); font-weight: bold; font-family: var(--Times); font-size: 30px;}
		
		#button-menu-mobile {height: 23px; width: 33px;}
		#button-menu-mobile img {height: 100%;}
		
		#button-toc-mobile-small {height: 30px; width: 30px; font-size: 14px; border: 1px solid #aaa; border-radius: 15px; padding: 2px 10px 3px 10px; background: var(--fon); color: #000;}
		
		#button-way-mobile-small {height: 30px; width: 50px; font-size: 14px; border: 1px solid #aaa; border-radius: 15px; background: var(--fon); color: #000;}
		
		#button-enter-mobile {height: 30px; width: 50px; justify-self: start; font-size: 14px; border: 1px solid #aaa; border-radius: 15px; background: var(--fon); color: #000;}
	
		/*-----------------------------------------------------------------------------------------------------------------------*/
	
		#menu-mobile > ul > li > a {padding-left: 25px;}
		#menu-mobile .drop-down-list > span {padding-left: 25px;}
		#menu-mobile .drop-down-list > ul {margin: 0 10px 0 40px;}
	
		/*-----------------------------------------------------------------------------------------------------------------------*/

		#toc-mobile {line-height: 120%;}
		
		#toc-mobile a {height: inherit;}
		/*#toc-mobile > ul > li > a {margin-top: 20px; padding-left: 15px; padding-right: 15px;}*/
		#toc-mobile > ul > li > ul a {margin-top: 13px; padding-left: 50px;}
		
		/*-----------------------------------------------------------------------------------------------------------------------*/

		#go-up {margin-right: 0; margin-top: -10px; position: sticky; top: 60px;}
		
		.toc-point {scroll-margin-top: 20px;}
	}
/*-----------------------------------------------------------------------------------------------------------------------*/
	#button-menu-mobile:hover {cursor: pointer;}
	#button-toc-mobile:hover {cursor: pointer; background: #eaeaea;}
	#button-way-mobile:hover {cursor: pointer; background: #eaeaea;}
	#button-toc-mobile-small:hover {cursor: pointer; background: #eaeaea;}
	#button-way-mobile-small:hover {cursor: pointer; background: #eaeaea;}
	#button-enter-mobile:hover {cursor: pointer; background: #eaeaea;}
	
	#enter-submit:hover {cursor: pointer; background: #ddd;}
	#p-change-log-pass:hover {cursor: pointer; text-decoration: underline;}
	
	#enter-mobile-submit:hover {cursor: pointer; background: #ddd;}
	#enter-mobile p:last-child:hover {cursor: pointer; text-decoration: underline;}
	
	#main-menu .drop-down-list span:hover {cursor: default;}
	#main-menu a:hover {cursor: pointer; background: #ddd;}
	
	#menu-mobile .drop-down-list span:hover {cursor: pointer; background: #ddd;}
	#menu-mobile a:hover {cursor: pointer; background: #ddd;}
	
	#way a:hover {text-decoration: underline; cursor: pointer;}
	
	#go-up:hover, #go-down:hover {cursor: pointer; background: #eaeaea;}
	
	#toc-mobile a:hover {cursor: pointer; background: #ddd;}

/*-----------------------------------------------------------------------------------------------------------------------*/
	@media (hover: hover) {
    	#content a:hover {color: blue;}
	}