@charset "utf-8";

@import url("../fonts/qanelas/stylesheet.css");
@import url("editor.css");

@viewport {
	user-zoom: fixed;
}

::-moz-selection {
	color: rgb(100%, 100%, 100%);
	background: rgb(27%, 27%, 27%);
}
::selection {
	color: rgb(100%, 100%, 100%);
	background: rgb(27%, 27%, 27%);
}


/* General */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html,
body {
	height: 100%;
	vertical-align: baseline;
}
html {
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-size: 100%;
}
body {
	color: rgb(27%, 27%, 27%);
    font: 300 .800rem/1.7 Qanelas, sans-serif;
    letter-spacing: 1px;
    overflow-x: hidden;
}

/* Typography */

a:link,
a:hover,
a:visited,
a:active,
a:focus {
	color: #55d400;
	text-decoration: none;
	outline: 0;
	border: none;
}
a[href^='http://']::after,
a[href^='https://']::after,
a[href^='//']::after {
	padding: 0 0 0 2px;
	content: url(../images/system/elink.svg);
}
a[href*='simple.org']::after,
a[href*='creativecommons.org']::after {
	content: none;
}

h1 {
	font-size: 1.8em;
	font-weight: 200;
	margin: 0 0 1rem 0;
}
h2 {
	font-size: 1.5em;
	font-weight: 300;
	margin: 1.5rem 0 1rem 0;
}
h3 {
	font-size: 1.375em;
	margin: 1.5rem 0 1rem 0;
}
h4 {
	font-size: 1.25em;
	margin: 1.5rem 0 1rem 0;
}
h5 {
	font-size: 1.125em;
	margin: 1.5rem 0 1rem 0;
}
h6 {
	font-size: 1em;
	margin: 1.5rem 0 1rem 0;
}

img,
svg {
	-ms-interpolation-mode: bicubic;
	display: block;
	max-height: 100%;
	max-width: 100%;
	border: 0;
	vertical-align: middle;
}

img {
	margin: 0 auto 20px;
}

p {
	margin: 0 0 20px 0;
}

ol,
ul {
	margin: 0 0 20px 32px;
	list-style: none;
}

blockquote,
q {
	quotes: none;
	font-style: italic;
}
blockquote {
	margin: 0 0 20px 32px;
}
blockquote::before {
	content: '«';
}
blockquote::after {
	content: '»';
}
blockquote q::before {
	content: '„';
}
blockquote q::after {
	content: '“';
}
cite {
	display: block;
	margin: 0 0 20px 0;
	text-align: right;
}
cite::before {
	content: '— '
}

em {
	font-style: italic;
}
strong {
	font-weight: bold;
}

.table {
	margin: 0 0 30px 0;
	overflow-x: auto;
	font-size: 90%;
	line-height: 1.5;
	border-spacing: 0;
}
	.table:last-child {
		margin: 0 0 0 0;
	}
	.heading {
		margin: 0 0 20px 0;
	}
		.heading::before {
			counter-increment: table;
			content: 'Таблица ' counter(table) '. ';
		}
	table { 
		width: 100%;
		margin: auto;
		border-collapse: collapse;
		white-space: nowrap;
	}
		table th,
		table td { 
			padding: 5px;
			border-left: 1px solid rgb(158, 158, 158);
		}
		table th:first-child,
		table td:first-child { 
			border-left: none;
		}
		table th { 
			border-top: 1px solid rgb(158, 158, 158);
			border-bottom: 1px solid rgb(158, 158, 158);
		}
		table td:first-child { 
			padding: 5px 5px 5px 0;
		}

:focus {
	outline: 0;
}

/* Template */

.header,
.footer {
	background: #77a78b;
	padding: 10px;
	position: fixed;
	width: 100%;
	z-index: 1;
}
.header ul,
.footer p {
	margin: 0 0 0 0;
}

.header {
	float: left;
	top: 0;
}
	.header a h1 {
		float: left;
		font-size: 100%;
		font-weight: 300;
		margin: 0 0 0 0;
	}
		.header a h1 img {
			display: inline;
			margin: 0 0.25rem 0 0;
			vertical-align: top;
		}

	.header ul {
		background: #77a78b;
		left: 0;
		line-height: 2;
		height: 100%;
		margin: 3rem 0;
		max-height: none;
		padding: 1.8rem 0.5rem;
		position: fixed;
		opacity: 0;
		visibility: hidden;
		font-size: 90%;
	}
		.header ul li {
			text-align: center;
		}

		.header ul li a {
			color: #ffffff;
			font-size: 200%;
		}

	.header input {
		display: none;
	}
		.header input:checked ~ ul {
			-webkit-transition: 1s;
			transition: 1s;
			position: fixed;
			width: 100%;
			opacity: 1;
			visibility: visible;
		}
		.header input:checked ~ label span {
			background: transparent;
		}
			.header input:checked ~ label span:before {
				transform: rotate(-45deg);
			}
			.header input:checked ~ label span:after {
				transform: rotate(45deg);
			}
			.header input:checked ~ label:not(.steps) span:before,
			.header input:checked ~ label:not(.steps) span:after {
				top: 0;
			}
		.header label {
			cursor: pointer;
			display: inline-block;
			float: right;
			margin: 0.5rem 0 0 0;
			position: relative;
			user-select: none;
		}
			.header label span {
				-webkit-transition: background .2s ease-out;
				transition: background .2s ease-out;
				background: #ffffff;
				display: block;
				height: 1px;
				position: relative;
				transition: background .2s ease-out;
				width: 18px;
			}
				.header label span:before,
				.header label span:after {
					-webkit-transition: all .2s ease-out;
					transition: all .2s ease-out;
					background: #ffffff;
					content: '';
					display: block;
					height: 100%;
					position: absolute;
					width: 100%;
				}
				.header label span:before {
					top: 5px;
				}
				.header label span:after {
					top: -5px;
				}
				
.content {
	height: 100%;
	margin: auto;
	width: 100%;
	z-index: 0;
}

	.content .main,
	.content .base,
	.content .list {
		margin: 3.5rem auto;
		padding: 20px 10px 40px 10px;
	}
	
	.content .main {
		height: 100%;
		position: relative;
	}
		.content .main a img,
		.content .main a p,
		.content .main p {
			-webkit-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			display: inline;
			margin: 0;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-right: -50%;
			text-align: center;
		}

	

	.content .base {
		counter-reset: figure table;
	}
	
		.content .base a {
			border-bottom: 1px solid rgb(136, 186, 255);
			padding: 0 0 2px 0;
		}

		.content .base ol li {
			list-style: decimal outside;
		}

		.content .base ul li {
			list-style-type: '— ';
		}

		.content .base .ref li {
			list-style: none;
			text-indent: -32px;
		}

	.content .list h1 {
		margin: 0 0 40px 0;
	}

	

	.item {
		margin: 0 0 30px 0;
	}
		.item h2,
		.item a h2 {
			display: inline-block;
			margin: 0 0 0.5rem 0;
		}

	.meta,
	.tools,
	.caption {
		font-size: 90%;
		line-height: 1.5;
	}
		.meta a,
		.tools li a {
			border: none !important;
		}

		.meta + img {
			margin: 20px 0 20px 0;
		}

	.tools {
		margin: 20px 0 0 0;
	}
		.tools li {
			display: inline-block;
			margin: 0 20px 0 0;
		}
			.tools li a:first-child {
				margin: 0 0 0 0;
			}

	.caption {
		text-align: center;
	}

	.caption::before {
		counter-increment: figure;
		content: 'Рис. ' counter(figure) '. ';
	}

	.comment {
		border-bottom: 1px dashed rgb(27%, 27%, 27%);
		padding: 0 0 2px 0;
	}

	.pagination {
		font-size: 90%;
		margin: 40px 0 0 0;
		overflow: hidden;
	}
		.pagination ul {
			margin: 0;
		}
			.pagination ul li {
				float: left;
				margin: 0 20px 0 0;
				content: none;
			}
				.pagination ul li a {
					border: none;
				}

	.system {
		max-width: 600px;
		width: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		padding: 0 10px;
		text-align: center;
	}
		.system ul {
			margin: 0;
		}

.footer {
	display: -webkit-flex;
	display: -webkit-box;
	display: -moz-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	bottom: 0;
	font-size: 90%;
}

/* Forms */

form {
	display: block;
	margin: 30px 0 0 0;
	width: 100%;
}
	form input[type=text],
	form input[type=submit],
	form textarea {
		position: static;
		display: block;
		font-family: Qanelas, sans-serif;
		font-size: 100%;
		letter-spacing: 1px;
		*vertical-align: middle;
		vertical-align: baseline;
		background: none;
	}
		form input[type=text],
		form input[type=password],
		form textarea {
			width: 100%;
			min-width: 100%;
			margin: 0 0 40px 0;
			padding: 0 0 10px 0;
			color: rgb(27%, 27%, 27%);
			clear: both;
			border-bottom: 1px solid rgb(158, 158, 158);
		}
			form input[type=text]:focus,
			form input[type=password]:focus,
			form textarea:focus {
				border-bottom: 1px solid rgb(72, 158, 255);
			}
		form input[type=submit] {
			padding: 0;
			text-transform: uppercase;
			color: rgb(72, 158, 255);
			line-height: normal;
			letter-spacing: 2px;
			-webkit-appearance: button;
			*overflow: visible;
			cursor: pointer;
		}
			form input::-moz-focus-inner {
				border: 0;
				padding: 0;
		}
	form textarea {
		min-height: 150px;
		overflow: auto;
		vertical-align: top;
		resize: vertical;
		white-space: keep-all;
	}

form.file {
	position: relative;
	height: 140px;
}
	form.file input[type=file] {
		display: none;
	}
	form.file input[type=submit].upload {
		position: relative;
		top: 80px;
	}
	form.file label {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0px;
		display: block;
		width: 100%;
		min-width: 100%;
		height: 27px;
		color: rgb(27%, 27%, 27%);
		font-family: inherit;
		border-bottom: 1px solid #9E9E9E;
	}
		form.file label::after {
			content: 'Файл выбран';
		}
		form.file input:invalid ~ label::after {
			content: 'Выбрать файл';
		}

::-webkit-input-placeholder {
	color: rgb(158, 158, 158);
	font-family: inherit;
	letter-spacing: 1px;
}
::-moz-placeholder {
	color: rgb(158, 158, 158);
	font-family: inherit;
	letter-spacing: 1px;
}
:-ms-input-placeholder {
	color: rgb(158, 158, 158);
	font-family: inherit;
	letter-spacing: 1px;
}
:-moz-placeholder {
	color: rgb(158, 158, 158);
	font-family: inherit;
	letter-spacing: 1px;
}

::-webkit-resizer {
	display: none;
}
::-webkit-resizer {
	display: none;
}

.wrapper {
	position: relative;
}
	.select,
	.custom {
		position: relative;
		width: 100%;
		height: 29px;
		font-family: Qanelas, sans-serif;
		margin: 0 0 40px 0;
		padding: 0 0 10px 0;
	}
	.custom {
		position: absolute;
		top: 0;
		left: 0;
		display: none;
		border-bottom: 1px solid rgb(158, 158, 158);
	}
		.custom.active .options {
			display: block;
			color: rgb(27%, 27%, 27%);
		}
	.select,
	.trigger {
		background-color: rgb(255, 255, 255);
	}
		.select:focus,
		.custom.active .trigger {
			outline: none;
		}
	.select {
		-webkit-appearance: none;
		-moz-appearance: none;
	}
	.trigger {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: rgb(255, 255, 255);
		cursor: pointer;
	}
	.options {
		position: absolute;
		top: 22px;
		left: 0;
		width: 100%;
		height: 200px;
		background-color: rgb(255, 255, 255);
		z-index: 1;
		display: none;
		overflow-y: scroll;
	}
		.option {
			position: relative;
		}
			.option.hover,
			.option:hover {
				background-color: rgb(27%, 27%, 27%);
				color: rgb(255, 255, 255);
				cursor: default;
			}
	@media (hover: hover) {
		.custom {
			display: block;
		}
		.select:focus + .custom {
			display: none;
		}
	}

/* Desctop etc. */

@media (min-width: 992px) {

	/* Header */
	
	.header {
		height: 100%;
		padding: 2.5rem;
		width: 270px;
/*
		border-right: 1px solid #55d400;
*/
		background: #77a78b;
	}
	
		.header label {
			display: none;
		}
		.header ul {
			padding: 2.5rem 0;
			clear: both;
			overflow: hidden;
			position: relative;
			opacity: 1;
			visibility: visible;
			margin: 0 auto;
			
			background: #77a78b;
		}
			.header ul li {
				text-align: center;
				text-transform: uppercase;
			}

			.header ul li a {
				color: #ffffff;
				font-size: 100%;
			}
	
	/* Content */
	
	.content {
		float: right;
		padding: 2.5rem;
		width: calc(100% - 270px);
		z-index: 0;
	}

		.content .main,
		.content .base,
		.content .list {
			margin: 0 auto;
			padding: 0 10px 40px 10px;
		}

		.content .base,
	.content .list {
		max-width: 1000px;
	}

	.content .base img {
		max-width: 500px;
	}

	/* Footer */
	
	.footer {
		padding: 0.5rem 2.5rem;
	}
}

/* Small screens */

@media screen and (max-width: 320px) {

	/* Content */

	.content .main,
	.content .base,
	.content .list {
		padding: 20px 10px 65px 10px;
	}

	/* Footer */
	
	.footer {
		display: block;
		margin: auto;
		text-align: center;
	}
}