:root {
  --page-width: 1100px;
  --my-text-color: #222;
}

html {
	height: 100%;
	width: 100%;
}


body {
	font: 14px "-apple-system",BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
	color: var(--my-text-color);
	background-color: #eee;
	/*background: linear-gradient(to right, #f4f4f4aa, #f4f4f4aa), url(/user/themes/minha/img/bg4.jpg);*/
	background-image: url(/user/themes/minha/img/bg.png);
	margin: 0;	
	min-height: 100%; /* Прижимаем футер */
	width: 100%;
	display: grid;   
 	grid-template-rows: auto 1fr minmax(200px, auto);  
	grid-template-columns: auto minmax(100px, var(--page-width)) auto;
	grid-template-areas: "header header header" 
                         "     . center .     "
                         "footer footer footer";                        
}




/* Общие элементы HTML */

textarea,
select,
input[type="text"],
input[type="password"],
input[type="number"],
div[contenteditable="true"] {
	background-color: #fff;
	border: 1px solid #cccccc;
	color: var(--my-text-color);
	padding: 0 10px;
	height: 32px;
	box-sizing: border-box;
	outline: none;
	margin: 0 10px;
}

textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
div[contenteditable="true"]:focus {
    border: 1px solid #21558b; 
	box-shadow: 0 0 5px rgba(33,85,139,0.3);
}

textarea,
div[contenteditable="true"] {
	height: 250px;
	width: 100%;
	margin: 0;
	display: block;
    resize: none;
}


button {
	cursor: pointer;
	border: none;
	padding: 10px 20px;     
    border-radius: 2px;
	height: 32px;
	color: var(--my-text-color);
}

button:hover {
}

button:disabled {
  background-color: #cccccc;
}

input[type="radio"] { 
  cursor: pointer; 
  margin-left: 5px;
  margin-right: 5px;
}

label { 
  cursor: pointer; 
}

form p, form input {
	margin: 8px 0;
}





::placeholder { 
    color: #b2b2b2;
}

table td {
    word-break: break-word;
}

h1 {
	font-size: 24px;
	font-weight: 500;
	margin: 0.67em 0 0.67em 0;
}

h2 {
	font-size: 21px; 
	font-weight: 500;
	margin: 1.4em 0 1em 0;
}

h3 {
	font-size: 18px;
	font-weight: 500;
	margin: 1.5em 0 1em 0;
}

h4 {
	font-size: 13px; 
	font-weight: 700;
	margin: 1.33em 0 1.33em 0;
}



a {
	text-decoration: none; 
	color:	#3471D0;
	outline-style: none;
}

a:hover {
	color: #0241B0;
	text-decoration: underline;	
}

a:visited {
    text-decoration: none;
	color: #A655C9;
}

a:visited:hover {
	color: #8E47AE;	
	text-decoration: underline;
}

p {
	margin: 15px 0;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:visited, h2 a:visited, h3 a:visited, 
h4 a:visited, h5 a:visited, h6 a:visited {
	color: var(--my-text-color);
}


pre {
    overflow-x: auto;
}
code:not(pre code){
	background-color: rgba(239,239,240, 0.61);
    border: 1px solid #0000001a;
    border-radius: 3px;
	padding: 0 5px;
}
/* поправим внешний вид prism */
pre[class*=language-] {
    overflow-x: auto;
    font-size: 12px;
}
pre[class*=language-]:before, pre[class*=language-]:after {
	box-shadow: none; 
	display: none; 
}
pre[class*=language-]>code {
	border-left: 2px solid #9A5433;
    box-shadow: -1px 0 0 0 #dfdfdf, 0 0 0 1px #dfdfdf;
	background-image: none;
}
code[class*=language-]{
	white-space: pre-wrap;
}
figure {
	margin: 0;
}
figure p {
	margin-bottom: 0;
}
figcaption {
	font-size: 12px;
	color: gray;
	
}

.notices { padding: 1px;  margin: 15px 0; }
.notices p { margin: 1rem 0 1rem 1rem; }
.notices.yellow { border-left: 3px solid #fdd00d; background: #fffdf2; color: #3e3900; }
.notices.red { border-left: 3px solid #ee5d07; background: #fff3eb; color: #b60904; }
.notices.blue { border-left: 3px solid #21558b; background: #eff5fb; color: #005f97; }
.notices.green { border-left: 3px solid #a1ceb2; background: #f1f9f1; color: #2c522c; }



.header {
	background-color: #ffffff;
	margin-bottom: 15px; 
	border-bottom: 1px solid #cccccc;
    box-shadow: 0 0 5px rgba(122,122,122,0.5);	
	
	grid-area: header;
	display: grid;
	grid-template-rows: auto; 
	grid-template-columns: auto minmax(100px, var(--page-width)) auto;
	grid-template-areas: ". header-content .";
}

.header-content {
	grid-area: header-content;
}

.header-logo {
	width: 40px;
	height: 40px;
	margin-top: 5px;
	margin-left: 5px;
	display: inline-block;
}

.header h1 {
	font-size: 24px;
	font-weight: 500;
	margin: 8px -0.3em 0 -0.35em; /* Позиция относительно картинки, на глаз */ 
	transform: scale(0.8, 1.1);	
	vertical-align: top;
	display: inline-block;
}

.header a {
	text-decoration: none; 
	color: var(--my-text-color);
}

.header a:hover {
	color: var(--my-text-color);
}

.header-menu {
	float: right; 
	font-size: 14px;
	text-align: right;
	margin: 8px 10px 5px 0;	
	padding: 0;
}

.header-menu li {
	list-style-position: inside;
	border-bottom: 3px solid;
	display: inline-block;
	padding: 3px 0;
	margin: 3px 0 0 3px;
}

.header-menu li:nth-child(1) { border-color: #b60904; }
.header-menu li:nth-child(2) { border-color: #a1ceb2; }
.header-menu li:nth-child(3) { border-color: #fdd00d; }
.header-menu li:nth-child(4) { border-color: #ee5d07; }
.header-menu li:nth-child(5) { border-color: #21558b; }
.header-menu li:nth-child(6) { border-color: #b60904; }
.header-menu li:nth-child(7) { border-color: #a1ceb2; } 


.header-menu li.active {
	background: #EEEEEE;
	font-weight: 700; 
}

.header-menu a {
	text-decoration: none; 
	color: var(--my-text-color);
	padding: 3px 15px;
}

.header-menu a:hover {
	text-decoration: underline ; 
	color: #c00; /* yandex color */
}








.search-mobile {
	width: 90%;
	margin: 8px auto;
	clear: both;
	display: none;
}

.search-mobile input[type="text"] {
    border: 1px solid #e7e7e7;
	width: calc(100% - 32px - 2px);
	float: left;
	margin: 0 0 0 16px;
}

.search-mobile button {
	background: none;
	border: none;
	padding: 0;
	width: 32px;
	height: 32px;
	float: left;
	margin-left: -32px;
}

.search-mobile button:hover {
	color: #c00;
}

.search-desktop {
	width: 100%;
	padding: 8px 7px;
	box-sizing: border-box;
	margin: 0 auto;
}

#search-desktop-standalone {
	padding: 8px 0px;
}

.search-desktop input[type="text"] {
	width: calc(100% - 32px - 4px);
	margin: 0;
}

.search-desktop button {
	font-size: 16px;
	background: none;
	border: none;
	padding: 0;
	width: 32px;
	height: 32px;
}

.search-desktop button:hover {
	color: #c00;
}

.b-head__l, .b-body-items { /* yandex search */
    padding-left: 25px !important;
}

.g-gap-horizontal {
    margin-left: 25px !important;
}

.gcsc-find-more-on-google, .b-pager__sorted {
	display: none !important;
}



#pp_form fieldset {border: none;}
#pp_form .pp_password_wrapper {margin: -25px 0 0 -20px;}
#pp_form input {width: 20em}






.center {
	margin-bottom: 15px;
	grid-area: center;
	display: grid;
	grid-template-rows: auto; 
	grid-template-columns: auto 7fr minmax(205px, 3fr) auto;
	grid-template-areas: ". main-content side .";
}

.main-content {
	box-sizing: border-box;
	padding: 10px 10px 0 20px; 
	background: #ffffff; 
	border: 1px solid #cccccc; 
	box-shadow: 0 0 5px rgba(122,122,122,0.5);
	word-break: break-word;
	grid-area: main-content;
	min-width: 0; /* to tame those nasty PRE: stackoverflow.com/questions/53599625*/
}

.main-content h1 {
	/*margin-left: -5px;*/
}

.main-content h2 {
	-margin-left: -5px;
}

.main-content img {
	max-width: 100%;
}

/*
.main-content blockquote::before,
.main-content blockquote::after {
	font-family: Georgia;
   content: "“";
   font-size: 2rem;
   margin: -1rem 0 0 -0.5rem;
   position: absolute;
   opacity: 0.5;
}

.main-content blockquote::after {
   content: "”";
   margin: 0rem 0rem 0 0;
}

.main-content blockquote cite, blockquote p {
   display: inline; 
}*/









/*
blockquote {
    text-align: center;
    margin: 20px auto 20px;
    width:80%;
	font-style: italic;
}


blockquote:before {
    content:"“";
    font-family: "Georgia";
    font-size: 3rem;
	text-align: center;
	margin-bottom: -0.8em;
    display: block;
    font-weight: 400;
    color: #b32d00;
}

blockquote > cite, 
blockquote > p > cite {
    text-align: center;
}  */




blockquote {
  border-left: 2px solid #8c0000;
  color: #1a1a1a;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-style: italic;
  line-height: 1.8em;
  margin: 1.1em 2em;
  padding: 1em 2em;
  position: relative;
  transition: 0.2s border ease-in-out;
  z-index: 0;
}
blockquote:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  height: 2em;
  background-color: #fff;
  width: 5px;
  margin-top: -1em;
}
blockquote:after {
  content: "“";
  position: absolute;
  top: 50%;
  left: -0.5em;
  color: #8c0000;
    font-size: 3em;
  font-family: "Georgia";
  font-style: normal;
  font-weight: 400;
  line-height: 1em;
  text-align: center;
  text-indent: -2px;
  width: 1em;
  margin-top: -0.3em;
  transition: 0.2s all ease-in-out, 0.4s transform ease-in-out;
}

blockquote:active:after {
  transform: rotateY(360deg);
}
blockquote cite {
  display: block;
  line-height: 1.8em;
  margin-top: 1em;
}






.main-content ul {
	padding-left: 15px;
	_padding: 0 5px 0 5px;
	_list-style-type: "-"
}

.main-content li {
	margin: 7px 0;
}


/* align article illustrations */
.main-content .fl {display:inline; float:left; margin:15px 15px 15px 0; max-width: 40% !important;}
.main-content .fr {float:right; margin:15px 0 15px 15px; max-width: 40%; }
.main-content img.fc {display:block; margin:15px auto; }
.main-content .round-avatar {border-radius: 50%; display: inline; float:left; margin:0 20px 20px 0; }




/* Блок список статей */

.post-list__wrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
}

.post-list__item {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: center;
}

.post-list__link,
.post-list__link:visited,
.post-list__link:visited:hover,
.post-list__link:hover {
	color: var(--my-text-color);
    font-weight: 500;
    font-size: 17px;
}

.post-list__image {
	width: 100%;
	height: auto;
    margin: 5px 0;
}

.post-list .post-list__summary,
.post-list p {
	margin: 0;
    color: #777;
}


/* Блок пагинации */

.pagination {
	text-align: center;
	list-style: none;
	padding: 0;
	margin: 10px 0;
}

.pagination .pagination__item {
	margin: 8px 3px;
	display: inline-block;
}

.pagination__link,
.pagination__link:visited {
	white-space: nowrap;
	padding: 5px 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	color: #333;
	text-decoration: none;
	cursor: pointer;
}

.pagination__item.active .pagination__link {
	background-color: #e0e0e0;
}






.side {
	box-sizing: border-box;
	padding: 0 5px; 
	word-break: break-word;
	grid-area: side;
}

.side .sticky {
	position: sticky;
    top: 7px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.side > form, .side > div, .sticky > div {
	background: #Fff;
	border: 1px solid #cccccc; 
	box-shadow: 0 0 5px rgba(122,122,122,0.5);
	margin-bottom: 7px;
	padding: 7px 7px; 
}

.side p{
	padding: 0 0 10px 0;
	margin: 0;
}

.side ul {
	padding: 0 5px 0 5px;
	margin: 0;
	list-style-type: none;
}


.side li {
	padding: 9px 0; 
	list-style: none;
	-border-top: 1px solid #cccccc;	
}

.side li:after {
    content: " "; 
	clear: both;
	display: list-item;
}

.side li img.small {  /*вариант с маленькими скромными превьюшками 128 72 или...*/
	width: 70px;
	height: 55px;
	margin-right: 5px;
	float: left;
}

.side li img.big {	    /*вариант с полновесными превьюхами*/
	width: 100%;
	max-width: 350px;
	min-height: 90px; /*ждём внедрения aspect-ratio*/
	display: block;
}



.side h4 {
	margin: 5px 0 3px 0;
	text-transform: uppercase;
	color: #e29f8d; /* Хороший */
	color: #b06f2f; /* более светлый Коричневый */
	color: #9c552d; /* Коричневый */		
}

.side a { 
	font-weight: 500; 
	-color:	#333;
	color:	#222;
}

.side a:visited { 
	-color:	#656565;
	color:	#333;
}

.side .date{
	color: #9d9692;
	font-weight: 400;
	font-size: 12px;
}

.side .img-capt{
	position	: relative;
	left: 50%;
	transform: translate(-50%, 0);
}



/* Блок популярных статей боковой*/

.popular-articles {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.popular-articles__item {
    overflow: hidden;
	padding: 7px 0 7px 5px;
	list-style: none;
}

.popular-articles__image--small {
	width: 70px;
	height: 55px;
	margin-right: 5px;
	float: left;
}

.popular-articles__image--large {
	width: 100%;
	max-width: 350px;
	min-height: 90px;
	display: block;
}

.popular-articles__link {
	display: block;
	font-weight: 500;
	color: #222;
	text-decoration: none;
}

.popular-articles__link:visited {
	color: #333;
}

.popular-articles__title {
    overflow: hidden;
	text-align: left;
}










.footer {
	border-top: 1px solid #cccccc;
	background: linear-gradient(#ccc, #ccc 50%);
	background: linear-gradient(to right, #9F9F9F, #eeeeee 80%);
	background: linear-gradient(to right, #eeeeee, #eeeeee 80%);
	box-shadow: 0 0 5px rgba(122,122,122,0.5);
	-box-shadow: 0 0 6px;	
	
	grid-area: footer;
	display: grid;
	grid-template-rows: auto; 
	grid-template-columns: auto minmax(100px, var(--page-width)) auto;
	grid-template-areas: ". footer-content .";
} 


.footer-content {
	background: linear-gradient( #eeea, #eeea ), url(/user/themes/minha/img/fun.png) bottom right / auto 90% no-repeat;
	grid-area: footer-content;
	font-size: 13px;
}


.footer ul {
	display: inline-block;
	vertical-align: top;
	margin: 15px;
	list-style-type: none;
	padding: 0;
	
}

.footer a:not(:hover)  {
	color:	#555555;
	text-decoration: none;
}

.footer p {
	text-align: center;
	color:	#888888;
}












/* Для мобильных */
@media screen and (max-width: 650px) {
	
	.header {
		text-align: center;
		padding-top: 5px;
	}
	
	.header-logo {
		width: 35px;
		height: 35px;		
	}
	
	.header h1 {
		margin: 10px 0 0 -15px;
	}
	
	.header-menu {
		float: none;
		margin-left: 0;
		margin-right: 0;
		text-align: center;
		clear: both;
	}
	
	.search-mobile {
		display: block;
	}
	
	.search-desktop {
		display: none;
	}

    .center {
    	grid-template-rows: auto auto; 
    	grid-template-columns: 1fr;
    	grid-template-areas: "main-content" "side";    
    }
	
	.main-content {
		padding: 5px 5px 0 7px; 
		margin-bottom: 15px;
	}
	
	.main-content h1 {
		margin-left: 0;
	}
	
	.main-content .round-avatar {
		margin-right:15px; 
	}
	
	.side {
		padding: 0;
	}
	
	.side .sticky {
	 	position: static;
	}
}






/* Если блок содержит только плавающие элементы, его размер будет ноль.
 Поэтому добавим хотя бы один нормальный элемент в конце. 
 Кроме того, чтобы избежать collapsing margins, добавим один в начале. 
 
 С переходом на гриды хак боьлше не нужен.

.center:before, .header:before, .footer:before,
.center:after, .header:after, .footer:after,
.search-mobile:after {
  content: " ";                
  clear: both;                 
  display: table;
}
*/