1@keyframes ani_rot {
2	0%		{ transform: rotate(0deg);		}
3	100%	{ transform: rotate(360deg); }
4}
5@keyframes ani_op_low {
6	0%		{ opacity: 1;	}
7	100%	{ opacity: 0.1; }
8}
9@keyframes ani_op_half {
10	0%		{ opacity: 1;	}
11	100%	{ opacity: 0.5; }
12}
13@keyframes ani_op_top {
14	0%		{ opacity: 0; }
15	100%	{ opacity: 1; }
16}
17@keyframes ani_off_bar {
18	0%		{ opacity: 0; height: 0; }
19	30%		{ opacity: 0.01; }
20	100%	{ opacity: 1; }
21}
22@keyframes ani_scale {
23	0%		{	transform: scale(0);	}
24	90%		{	transform: scale(1.4);	}
25	100%	{	transform: scale(1);	}
26}
27@mobile-width: 860px;
28
29.dokuwiki {
30	animation: ani_op_top 0.5s ease-in-out;
31	margin: 0;
32	width: 100%;
33	&.export {
34			box-sizing: border-box;
35			padding: 3px;
36		abbr {
37			text-decoration: none;
38		}
39		a {
40			color: inherit !important;
41		}
42	}
43	&.slav {
44		#head #logo #inlogo {
45			background: url( images/logo/logor.svg ) no-repeat;
46			height: 53px;
47			transform: translate(1px, 0);
48			&:hover::after {
49				transform: translate(-1px, 0);
50			}
51			@media (max-width: @mobile-width) {
52				background: url( images/logo/logor_mob.svg ) no-repeat;
53			}
54		}
55	}
56	&:not(.slav) {
57		#head #logo #inlogo {
58			background: url( images/logo/logo.svg ) no-repeat;
59			height: 46.5px;
60			transform: translate(0, 7px);
61			&:hover::after {
62				transform: translate(0, -7px);
63			}
64			@media (max-width: @mobile-width) {
65				background: url( images/logo/logo_mob.svg ) no-repeat;
66				height: 53px;
67			}
68		}
69	}
70	#head {
71		* {
72			outline: none;
73		}
74		#logo {
75			float: left;
76			#inlogo {
77				display: inline-block;
78				width: 332px;
79				&:hover::after {
80					animation: ani_op_top 0.4s;
81					background-size: contain !important;
82					content: '';
83					display: inline-block;
84					float: left; /* для иврита */
85					width: 100px;
86					@media (max-width: @mobile-width) {
87						background: none !important;
88					}
89				}
90				&[rnd="0"]:hover::after {
91					background: url(images/logo/logo-jenny.png) no-repeat;
92					height: 39px;
93					margin: 6px 0 0 24px;
94				}
95				&[rnd="1"]:hover::after {
96					background: url(images/logo/logo-sam.png) no-repeat;
97					height: 59px;
98					margin: 0 0 -3px 32px;
99				}
100				&[rnd="2"]:hover::after {
101					background: url(images/logo/logo-kitty.png) no-repeat;
102					height: 35px;
103					margin: 9px 0 0 29px;
104				}
105				&[rnd="3"]:hover::after {
106					background: url(images/logo/logo-pinkie.png) no-repeat;
107					height: 54px;
108					margin: 0 0 0 14px;
109				}
110				&[rnd="4"]:hover::after {
111					background: url(images/logo/logo-bob.png) no-repeat;
112					height: 35px;
113					margin: 11px 0 0 34px;
114				}
115				&[rnd="5"]:hover::after {
116					background: url(images/logo/logo-ninwah.png) no-repeat;
117					height: 39px;
118					margin: 7px 0 0 23px;
119				}
120				&[rnd="6"]:hover::after {
121					background: url(images/logo/logo-gamercat.png) no-repeat;
122					height: 34px;
123					margin: 9px 0 0 28px;
124				}
125				@media (max-width: @mobile-width) {
126					width: 40px;
127				}
128			}
129		}
130		#menu {
131			header {
132				letter-spacing: .05em;
133				line-height: 1.6em;
134				min-height: 30px;
135				text-shadow: 1px 1px 2px black;
136				&[rnd="0"] {
137					background: #22979E;
138				}
139				&[rnd="1"] {
140					background: #829DD3;
141				}
142				&[rnd="2"] {
143					background: #A387C1;
144				}
145				&[rnd="3"] {
146					background: #E183BD;
147				}
148				&[rnd="4"] {
149					background: #E9B630;
150					#upmenu a:hover {
151						color: #0FF;
152					}
153				}
154				&[rnd="5"] {
155					background: #45A2C4;
156				}
157				&[rnd="6"] {
158					background: #AD464A;
159				}
160				> * {
161					position: relative;
162					top: 4px;
163				}
164				#upmenu {
165					color: white;
166					font: bold 15px DatFestComic,cursive;
167					@media (max-width: 456px) {
168						width: ~"calc(100% - 120px)";
169						display: inline-block;
170					}
171					a {
172						color: white;
173					}
174					a:hover {
175						color: #FF0;
176					}
177					a + a {
178						margin-left: ~"clamp(3px, 100vw - 555px, 8px)";
179					}
180				}
181				#search {
182					float: right;
183					margin: 0 3px;
184					form#dw__search {
185						div.no {
186							* {
187								border-radius: 10px;
188								font-size: 120%;
189							}
190							#qsearch__in {
191								margin-right: 1px;
192								position: relative;
193								top: -3px;
194								width: ~"clamp(50px, 100vw - 400px, 150px)";
195							}
196							button {
197								padding: 1px 4px 2px 3px;
198								@media (max-width: 456px) {
199									display: none;
200								}
201							}
202							div#qsearch__out { /* всплывающие результаты; вырубить нахрен, неуправляемые background и частично position */
203								display: none !important;
204							}
205						}
206					}
207				}
208			}
209			nav {
210				min-height: 30px;
211				@media (max-width: 1040px) {
212					overflow-x: scroll;
213				}
214				scrollbar-width: 6px !important;
215				&::-webkit-scrollbar {
216					max-width: 6px !important;
217				}
218			}
219		}
220	}
221	article#dokuwiki__detail {
222		padding: 0 1em;
223		h1 {
224			padding: 1em 0;
225		}
226		div.img_big {
227			[dir=ltr] & { float: left; }
228			[dir=rtl] & { float: right; }
229			p.img_caption {
230				text-align: center;
231			}
232		}
233		div.img_detail {
234			[dir=ltr] & { float: left; }
235			[dir=rtl] & { float: right; }
236			margin: 0 1em;
237			#back {
238				font-size: 1.3em;
239				margin-top: 0;
240				bdi {
241					padding-left: .5em;
242					position: relative;
243					top: 2px;
244				}
245			}
246			dl.img_tags {
247				dd {
248					background-color: __medium__;
249					font-style: italic;
250				}
251				dt {
252					background-color: __lightgray__;
253					display: inline-block;
254					font-weight: bold;
255					margin-top: 0.5em;
256				}
257				dd, dt {
258					line-height: 2;
259					padding: 0 1em;
260				}
261			}
262		}
263	}
264	article.page {
265		border-bottom: 1px dashed #EEE;
266		font-family: "Trebuchet MS", "Bitstream Vera Sans", "Nimbus Sans L", sans-serif;
267		line-height: 1.5em;
268		margin: 0 37px;
269		position: relative;
270		text-align: justify;
271		&::after {
272			content: "";
273			height: 100%;
274			left: 0;
275			opacity: 0.03;
276			position: absolute;
277			top: 0;
278			width: 100%;
279			z-index: -1;
280		}
281		h1 {
282			&:nth-child(1) {
283				padding: 0;
284			}
285		}
286		h5:nth-child(1) {
287			margin: 0;
288		}
289		.footnotes {
290			border-top: 1px solid __dark__;
291			clear: both;
292			margin: 1.5em 0 .5em 1em;
293			.fn {
294				border-bottom: 1px solid __medium__;
295				font-size: 90%;
296			}
297			.fn_bot {
298				font-weight: bold;
299			}
300			.content {
301				display: inline;
302			}
303		}
304		.editBox {
305			.toolbar.group {
306				margin: 2px 0;
307				#tool__bar {
308					button {
309						&:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3),&:nth-of-type(4),&:nth-of-type(5),
310						&:nth-of-type(6),&:nth-of-type(7),&:nth-of-type(8),&:nth-of-type(9),&:nth-of-type(10),
311						&:nth-of-type(11),&:nth-of-type(12),&:nth-of-type(13),&:nth-of-type(14),&:nth-of-type(15) {
312							background: url( https://comicslate.org/lib/images/toolbar/toolbar.png );
313							height: 16px;
314							margin: -2px 5px 5px 3px;
315							vertical-align: middle;
316							width: 16px;
317							img {
318								display: none;
319							}
320						}
321						&:nth-of-type(1) { background-position: 0 0; }
322						&:nth-of-type(2) { background-position: 0 -16px; }
323						&:nth-of-type(3) { background-position: 0 -32px; }
324						&:nth-of-type(4) { background-position: 0 -48px; }
325						&:nth-of-type(5) { background-position: 0 -64px; }
326						&:nth-of-type(6) { background-position: 0 -80px; }
327						&:nth-of-type(7) { background-position: 0 -96px; }
328						&:nth-of-type(8) { background-position: 0 -112px; }
329						&:nth-of-type(9) { background-position: 0 -128px; }
330						&:nth-of-type(10) { background-position: 0 -144px; }
331						&:nth-of-type(11) { background-position: 0 -160px; }
332						&:nth-of-type(12) { background-position: 0 -176px; }
333						&:nth-of-type(13) { background-position: 0 -192px; }
334						&:nth-of-type(14) { background-position: 0 -208px; }
335						&:nth-of-type(15) { background-position: 0 -224px; }
336					}
337				}
338			}
339			#dw__editform {
340				#wiki__editbar.editBar {
341					margin: 0;
342					.editButtons {
343						display: inline-block;
344						padding: 0 4px 11px 0;
345						button, input {
346							border-radius: 3px;
347							border: 1px solid #888;
348							padding: 1px 6px;
349						}
350						#edbtn__save {
351							background-image: linear-gradient(to bottom, #CFB, #AD9);
352							&:hover {
353								background-image: linear-gradient(to bottom, #CFB, #8B7);
354							}
355						}
356						#edbtn__preview {
357							background-image: linear-gradient(to bottom, #7EF, #5CC);
358							&:hover {
359								background-image: linear-gradient(to bottom, #7EF, #3AB);
360							}
361						}
362						#edbtn__cancel {
363							background-image: linear-gradient(to bottom, #FCB, #DA9);
364							&:hover {
365								background-image: linear-gradient(to bottom, #FCB, #B87);
366							}
367						}
368					}
369					.summary {
370						.nowrap {
371							white-space: nowrap;
372							span,
373							#edit__summary {
374								vertical-align: 2px;
375							}
376						}
377					}
378				}
379			}
380		}
381		div.index__tree {
382			li {
383				&.closed {
384					opacity: 0.5;
385				}
386				.curid a {
387					font-weight: bold;
388				}
389				div.li {
390					margin-bottom: 3px;
391					a.idx_dir {
392						background-color: white;
393						border: 2px solid #eee;
394						border-radius: 5px;
395						box-shadow: 0 0 3px 1px __dark__;
396						padding: 0 5px;
397					}
398				}
399			}
400		}
401	}
402	@media (max-width: 750px) {
403		article.page {
404			margin: 0 7px 0 37px !important;
405		}
406	}
407	&.slav {
408		article.page::after {
409			background-image: url( images/logo/logor_back.svg );
410		}
411	}
412	&:not(.slav) {
413		article.page::after {
414			background-image: url( images/logo/logo_back.svg );
415		}
416	}
417/**
418 * @author Anika Henke <anika@selfthinker.org>
419 * @author Andreas Gohr <andi@splitbrain.org>
420 */
421	#pagetools {
422		@ico-width: 28px;
423		@ico-margin: 4px;
424		@item-height: (@ico-width + @ico-margin);
425		position: fixed;
426		right: 0;
427		top: 75px;
428		z-index: 999999;
429		&:hover {
430			ul#nomobile {
431				background-color: @ini_background;
432				border-color: @ini_border;
433				border-radius: 2px;
434				box-shadow: 2px 2px 2px @ini_text_alt;
435				span {
436					display: inline-block;
437				}
438			}
439		}
440		ul {
441			text-align: right;
442		}
443		ul#nomobile {
444			border: 1px solid transparent; // add transparent border to prevent jumping when proper border is added on hover
445			margin: 0;
446			li {
447				list-style: none;
448				a {
449					display: block;
450					line-height: @item-height;
451					span {
452						display: none; // hide label until hover
453						margin: 0 @ico-margin;
454					}
455					svg {
456						fill: @ini_border;
457						margin: 0 @ico-margin/2;
458						vertical-align: middle;
459						@media (max-width: 375px) {
460							opacity: 0.5;
461						}
462						&:hover {
463							opacity: 1;
464						}
465					}
466				}
467				a:active,
468				a:focus,
469				a:hover { // on interaction show the full item
470					background-color: @ini_background_alt;
471					svg {
472						fill: @ini_link;
473					}
474				}
475			}
476			li.admin,
477			li.logout,
478			li.login,
479			li.media {
480				border-bottom: skyblue 1px solid;
481				margin-bottom: 2.5px;
482				padding-bottom: 2.5px;
483			}
484			li.edit svg {
485				animation: ani_op_low 1s linear 3s infinite alternate running;
486			}
487		}
488		@media (max-width: 750px) {
489			ul#nomobile {
490				display: none;
491			}
492		}
493		ul#mobile {
494			select {
495					-moz-appearance: none;
496				-webkit-appearance: none;
497							   appearance: none;
498				background: url(images/burger.svg) no-repeat center center;
499				height: 33px;
500				width: 33px;
501				option:first-child {
502					display: none;
503				}
504			}
505		}
506		@media (min-width: 750px) {
507			ul#mobile {
508				display: none;
509			}
510		}
511	}
512	&.slav {
513		#yandex_rtb {
514			border: 1px solid #ddd;
515			border-radius: 5px;
516			clear: both;
517			margin: 5px auto;
518			max-height: 310px;
519			max-width: ~"calc(100% - 72px)";
520			overflow: hidden;
521			padding: 5px;
522			yatag {
523				align-content: center;
524			}
525		}
526	}
527	footer {
528		clear: both;
529		div.breadcrumbs {
530			clear: both;
531			font-size: 8pt;
532			padding: 4px 10px;
533		}
534		.social {
535			padding-top: .3em;
536			text-align: center;
537			a {
538				display: inline-block;
539				&.rss {
540					background: url( images/rss.png );
541					border-radius: 5px;
542					bottom: 1px;
543					height: 29px;
544					margin: 0 4px;
545					position: relative;
546					transform: scale(1.15);
547					width: 29px;
548					@media (max-width: 500px) {
549						margin: 0 2px;
550					}
551				}
552				&:not(.rss) {
553					background: url( images/social.png );
554					height: 32px;
555					margin: 0 2px;
556					width: 32px;
557					@media (max-width: 500px) {
558						margin: 0;
559					}
560				}
561				&:nth-of-type(1),
562				&.patreon {
563					background-position: 0 0;
564				}
565				&:nth-of-type(2) {
566					background-position: 0 -29px;
567				}
568				&:nth-last-of-type(2) {
569					background-position: 0 -58px;
570				}
571				&:nth-last-of-type(1) {
572					background-position: 0 -87px;
573				}
574				&.patreon {
575					display: none;
576				}
577				&.discord {
578					background-position: 0 -32px;
579				}
580				&.telegram {
581					background-position: 0 -64px;
582				}
583				&.reddit {
584					background-position: 0 -96px;
585				}
586				&.tumblr {
587					background-position: 0 -128px;
588				}
589				&.facebook {
590					background-position: 0 -160px;
591				}
592				&.twitter {
593					background-position: 0 -192px;
594					border: 1px solid #ddd;
595					position: relative;
596					top: 1px;
597				}
598				&.vkontakte {
599					background-position: 0 -224px;
600				}
601				&.telegram,
602				&.facebook,
603				&.twitter,
604				&.vkontakte {
605					border-radius: 5px;
606				}
607			}
608		}
609		.count {
610			bottom: 4px;
611			float: right;
612			position: relative;
613			right: 30px;
614			text-align: right;
615			a {
616				display: block;
617				width: 105px; /* центрование социал-кнопок */
618				img {
619					border: 0;
620					height: 31px;
621					margin-top: 4px;
622					width: 88px;
623				}
624			}
625			noscript {
626				img {
627					left: -9999px;
628					position: absolute;
629				}
630			}
631		}
632		.pageinfo,
633		.user {
634			clear: both;
635			font-size: .8em;
636			text-align: center;
637		}
638	}
639	.middle {
640		vertical-align: middle;
641	}
642	#acl__manager {
643		table {
644			margin-left: 0%;
645			width: 100%;
646		}
647	}
648	.april {
649		transform: rotate(180deg);
650	}
651	.pad { // белый фон в просмотре
652		background-color: white;
653	}
654	.m { // скруглятор
655		border-radius: 5px;
656		padding: 3px 5px;
657	}
658	.hyph { // переносы
659		display: inline;
660		hyphens: auto;
661		-webkit-hyphens: auto;
662		overflow-wrap: break-word;
663		word-wrap: break-word;
664		* {
665			display: inline !important;
666		}
667	}
668	.ratestar {
669		vertical-align: sub;
670		width: 20px;
671		&.anim {
672			animation: ani_rot 1.6s linear 0s infinite running;
673		}
674	}
675	.li {
676		font-weight: normal;
677	}
678	.cl_hr {
679		background-color: #D5D1CB;
680		border-width: 0;
681		color: #D5D1CB;
682		height: 1px;
683		margin: 10px;
684	}
685}
686
687nav div:hover::after {
688	animation: ani_op_top 1.4s;
689	color: #bbb;
690	font: bold 15px DatFestComic,cursive;
691	.lang-be & { content: "�� Мовы"; }
692	.lang-bg & { content: "�� Езици"; }
693	.lang-br & { content: "�� Línguas"; }
694	.lang-da & { content: "�� Sprog"; }
695	.lang-de & { content: "�� Sprachen"; }
696	.lang-el & { content: "�� Γλώσσες"; }
697	.lang-en & { content: "�� Languages"; }
698	.lang-eo & { content: "�� Lingvoj"; }
699	.lang-es & { content: "�� Idiomas"; }
700	.lang-fi & { content: "�� Kielet"; }
701	.lang-fr & { content: "�� Langues"; }
702	.lang-he & { content: "�� שפות"; }
703	.lang-hi & { content: "�� बोली"; }
704	.lang-hu & { content: "�� Nyelvek"; }
705	.lang-id & { content: "�� Bahasa"; }
706	.lang-it & { content: "�� Lingue"; }
707	.lang-ja & { content: "�� 言語"; }
708	.lang-ko & { content: "�� 언어"; }
709	.lang-pl & { content: "�� Języki"; }
710	.lang-pt & { content: "�� Línguas"; }
711	.lang-ru & { content: "�� Языки"; }
712	.lang-tr & { content: "�� Diller"; }
713	.lang-uk & { content: "�� Мови"; }
714	.lang-zh & { content: "�� 语言"; }
715}
716
717#ym-informer { // счётчик
718	border-radius: 15px !important;
719}
720
721#send-msg-btn {
722	z-index: 999;
723}
724
725.e_nav img { /* энтити back и up */
726	margin: 0 auto 3px auto;
727	width: 48px;
728	background-color: #969696;
729}
730