/*
    Theme Name: Modern
    Author: Andrey Fedorov
    Author URL: http://locman.org

		help:
		https://www.w3schools.com/cssreF/css_websafe_fonts.asp
		http://only-css.com/blog/article/selektory-css3
		https://fontawesome.com/icons?d=gallery&m=free
		Генератор индикаторов:
		http://www.chimply.com/Generator#bar,fadingBarIndicator
*/

/* import w3cc standard */
@import url('css/w3.css');

/* General */
body {
	max-width: 1600px;
	margin: 0 auto 0 auto;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6em;
  -webkit-animation: bugfix infinite 1s;
}

img, iframe {
	/*max-width: 100%;*/  /* YandexMaps not work with this set */
	border: none;
}

a { text-decoration: underline; }
a:active { outline:0; }

:focus { outline:0; }	/* removes the dotted border */

h1, h2, h3, h4, h5, h6 {
	font-family: Verdana, Geneva, sans-serif;
	font-weight:700;
	line-height:1.1em;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	text-decoration: none;
}
/* w3css values
h1{font-size:64px;}
h2{font-size:48px;}
h3{font-size:36px;}
h4{font-size:24px;}
h5{font-size:20px;}
h6{font-size:18px;}
*/
h1{font-size:22px;}
h2{font-size:18px;}
h3{font-size:16px;}
h4{font-size:14px;}
h5{font-size:14px;}
h6{font-size:14px;}

/* не портит вид строк при верхнем-нижнем индеках текста */
sup, sub {
  vertical-align: middle;
  position: relative;
  font-size: .7rem;
	font-weight: normal;
}
sup { bottom: .5em; }
sub { top: .5em; }

/* выравнивание checkbox & radio по вертикали с текстом */
input[type="checkbox"], input[type="radio"] {
  vertical-align: middle;
	margin-right: 4px;
}

select {
	padding: 1px 0;
	outline: 0;
}

input[type="text"],
input[type="password"] {
	padding-left: 3px;
}

input[type="button"],
input[type="submit"] {
	padding: 1px 1em;
}

/* классы для выравнивания текста */
.center {
	text-align: center;
}
table.center {
	margin-left: auto;
	margin-right: auto;
}

.left {
	text-align: left;
}
.right {
	text-align: right;
}
.middle {
	vertical-align: middle;
}
.top {
	vertical-align: top;
}
.bottom {
	vertical-align: bottom;
}

.noborder {
  border: none;
}

.italic {
	font-style: italic;
}

.bold {
	font-weight: bold;
}

#content #main {
}
#content #sidebar {
	min-width: 300px;
	max-width: 300px;
	overflow: hidden;
	padding-left: 16px;
}
#content #sidebar > ul {
	list-style: none;
	padding: 0 0 0 16px;
	margin: 0 0 1em 0;
}
#content #sidebar > ul > li {
	padding: 8px 0 8px 0;
}
#content #sidebar > ul > li > a {
	text-decoration: none;
}

/* перенос слов на новую строку
http://shpargalkablog.ru/2013/02/word-wrap.html
*/
.hyphens {
	-ms-hyphens: auto;
  -webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
  text-align: justify;
}
.nohyphens {
  white-space: nowrap;
}

/* Responsive media */
.video-container, .map-container, .embed-container {
	position:relative;
	margin:0 0 15px 0;
	padding-bottom:51%;
	padding-top:30px;
	height:0;
	overflow:hidden;
	border:none;
}
.embed-container iframe,
.embed-container object,
.embed-container embed,
.video-container iframe,
.map-container iframe,
.map-container object,
.map-container embed,
.video-container object,
.video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/* logo */
.logo {
	width: 150px;
	height: 50px;
	line-height: 50px;
	overflow: hidden;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: -1px;
	padding-left: 1rem;
}

/* элементы login */
div.login {
	position: relative;
	float: left;
	top: 0;
	height: 50px;
	width: 50px;
	line-height: 50px;
	text-align: center;
}
div.login > label {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 18px;
	cursor: pointer;
}
div.login #login_checkbox {
	display: none;
}
div.login #login_form {
	display: none;
	position: absolute;
	top: 38px;
	left: 35px;
	width: 255px;
	height: auto;
	z-index: 2000;
	padding: 8px;
	overflow: hidden;
	text-align: left;
	vertical-align: top;
	line-height: 1.6em;
}
div.login input[type="checkbox"]:checked + #login_form {
	display: block;
}
div.login #login_form ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
div.login #login_form ul li a {
	text-decoration: none;
}
div.login #login_form ul.login_form li {
	white-space: nowrap;
	padding: .5em 0;
	width: 100%;
}
div.login #login_form ul.login_menu a {
	display: inline-block;
	height: 100%;
	width: 100%;
	padding: 1em;
	vertical-align: middle;
}
div.login #login_form ul.login_menu a i {
	width: 2em;
}
div.login #login_form ul li label.login_form {
	display: inline-block;
	width: 5em;
}

/* Responsive main menu
https://processwire.com/talk/topic/10448-css-only-responsive-multi-level-menu/
*/
#toggle-menu {
	display: inline-block;
	float: right;
  padding: .7em 1em .5em 1em;
	cursor: pointer;
}

#menu {
	display: block;
	position: relative;
	top: 40px;
	right: 0;
  z-index: 3000;
}

#menu ul {
  margin: 0;
  padding: 0;
  z-index: 3000;
}

#menu .main-menu {
  display: none;
}

#menu .main-menu:after {
  content: "";
  display: table;
  clear: both;
}

#menu input[type="checkbox"],
#menu ul span.drop-icon {
  display: none;
}

#tm:checked + .main-menu {
  display: block;
}

#menu input[type="checkbox"]:checked + .sub-menu {
  display: block;
}

#menu .sub-menu {
  margin: 0 1em;
  display: none;
}

#menu .sub-menu li:last-child {
  border-width: 0;
}

#menu li,
#menu a {
  position: relative;
  display: block;
}

#menu li {
  border-width: 0 0 1px;
}

#menu a {
  padding: 1em 1.5em;
	white-space: nowrap;
  transition: all .125s ease-in-out;
  -webkit-transition: all .125s ease-in-out;
}

#menu a:active {
	outline:0;
}

#menu li label.drop-icon {
  position: absolute;
  right: 0;
  top: 0;
  padding: 1em;
  font-size: 1em;
  text-align: center;
}

#menu .main-menu > li:first-child {
	text-align: center;
}

/* http://lordr.ru/programmirovanie/CSS/razresheniya_ekranov_dlya_adaptivnoy_verstki.html */
@media only screen and (max-width: 479px) {
	#menu {
		position: absolute;
		width: 96%;
		margin-right: 6px;
	}
	#menu a {
	  padding: 1em 1em;
		white-space: normal;
	}
}

@media only screen and (min-width : 480px) and (max-width: 639px) {
	#menu {
		position: absolute;
		width: 70%;
		margin-right: 8px;
	}
	#menu a {
	  padding: 1em 1em;
		white-space: normal;
	}
}

@media only screen and (min-width : 640px) and (max-width: 959px) {
	#menu {
		position: absolute;
		width: 50%;
		margin-right: 8px;
	}
	#menu a {
	  padding: 1em 1em;
		white-space: normal;
	}
}

@media only screen and (min-width: 960px) {/* 1024px default */
	#menu {
		top: 0;
	}

  #menu .main-menu {
    display: block;
  }

  #toggle-menu,
  #menu label.drop-icon {
    display: none;
  }

  #menu ul span.drop-icon {
    display: inline-block;
  }

  #menu .main-menu > li {
    float: left;
    /* border-width: 0 1px 0 0; если нужны разделителя пунктов в строке меню */
    border-width: 0;
  }

  #menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
		width: auto;
    margin: 0;
  }

  #menu .sub-menu .sub-menu {
		top: 0;
    left: 100%;
  }

	/* крайние правые субменю двигаем влево от края экрана (а не проще все субменю открывать влево?) */
	#menu .main-menu > li:last-child .sub-menu,
	#menu .main-menu > li:nth-last-child(2) .sub-menu {
		right: 0;
		left: auto;
  }
	#menu .main-menu > li:last-child .sub-menu .sub-menu,
	#menu .main-menu > li:nth-last-child(2) .sub-menu .sub-menu {
		right: 100%;
		left: auto;
  }

  #menu .sub-menu,
  #menu input[type="checkbox"]:checked + .sub-menu {
    display: none;
  }

  #menu .sub-menu li {
    border-width: 0 0 1px;
  }

 #menu .sub-menu .drop-icon {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1em;
  }

  #menu li:hover > input[type="checkbox"] + .sub-menu {
    display: block;
  }
}

/* Footer */
footer {
	margin: 0;
}

footer address {
	line-height:1.6em;
}

footer a {
	text-decoration:none;
}


footer ul {
	margin-left: 0;
	padding:0 0 0 1em;
}

footer ul li {
	padding:0 0 4px 0;
}

#sub-footer {
	margin: 30px 0 0 0;
}

#sub-footer p {
	margin:0;
	padding:0;
}

/* scroll to top */
.scrollup {
	position:fixed;
	width:32px;
	height:32px;
	bottom:0px;
	right:20px;
}

a.scrollup {
	outline:0;
	text-align: center;
}

a.scrollup:hover,a.scrollup:active,a.scrollup:focus {
	opacity:1;
	text-decoration:none;
}
a.scrollup i {
	margin-top: 10px;
}
a.scrollup i:hover {
	text-decoration:none;
}

/* responsive blocks, paddings, margins & shadows */
.resp-round-border {
	border-width: 1px;
	border-style: solid;
	border-radius: 9px;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
}

/* First value for top & bottom, second value for left & right of sides */
.resp-padding-0-8 {padding: 0 8px;}
.resp-padding-8-0 {padding: 8px 0;}
.resp-padding-8-8 {padding: 8px 8px;}
.resp-padding-8-16 {padding: 8px 16px;}
.resp-padding-16-8 {padding: 16px 8px;}
.resp-padding-16-16 {padding: 16px 16px;}
.resp-margin-8-8 {margin: 8px 8px;}
.resp-margin-8-16 {margin: 8px 16px;}
.resp-margin-16-8 {margin: 16px 8px;}
.resp-margin-16-16 {margin: 16px 16px;}
.resp-rmargin-8 {margin-right: 8px;}
.resp-rmargin-16 {margin-right: 16px;}
.resp-rmargin-24 {margin-right: 24px;}
.resp-lmargin-8 {margin-left: 8px;}
.resp-lmargin-16 {margin-left: 16px;}
.resp-lmargin-24 {margin-left: 24px;}
/* для равномерного распределения содержимого блоков по экрану */
.resp-cell-childs > div:first-child { padding: 0 8px 0 0; }
.resp-cell-childs > div { padding: 0 8px 0 8px; }
.resp-cell-childs > div:last-child { padding: 0 0 0 8px; }

@media (max-width:600px){
	.resp-round-border {border-width: 0;}
	.resp-padding-0-8 {padding: 0 0;}
	.resp-padding-8-8 {padding: 8px 0;}
	.resp-padding-8-16 {padding: 8px 0;}
	.resp-padding-16-8 {padding: 16px 0;}
	.resp-padding-16-16 {padding: 16px 0;}
	.resp-margin-8-8 {margin: 8px 0;}
	.resp-margin-8-16 {margin: 8px 0;}
	.resp-margin-16-8 {margin: 16px 0;}
	.resp-margin-16-16 {margin: 16px 0;}
	.resp-rmargin-8 {margin-right: 0;}
	.resp-rmargin-16 {margin-right: 0;}
	.resp-rmargin-24 {margin-right: 0;}
	.resp-lmargin-8 {margin-left: 0;}
	.resp-lmargin-16 {margin-left: 0;}
	.resp-lmargin-24 {margin-left: 0;}
	.resp-cell-childs > div,
	.resp-cell-childs > div:first-child,
	.resp-cell-childs > div:last-child { padding: 0; }
}


/* Flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
.flex-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}
.flex-container > div {
	margin: auto;  /* Magic! */
}

/* e107 specific classes */
div.bbcode_buttons, div.bbcode_buttons input {
	margin: 16px 0;
	font-size: .8rem;
}
.wmessage {
    width: calc(100% / 3 - 24px);
    min-width: 280px;
    height: 280px;
    overflow: hidden;
}
@media (max-width:600px){
	ul {
		padding-left: 8px;
		margin-left: 8px;
	}
	.wmessage {
	  width: 100%;
		min-width: 100%;
	  height: auto;
	}
}
.wmessage .head {
	height: 50px;
	width: 100%;
	overflow: hidden;
	text-align: center;
	margin-bottom: 10px;
}
.wmessage .icon {
	width: 100%;
	overflow: hidden;
	text-align: center;
	margin-bottom: 10px;
}
.wmessage .head h1,
.wmessage .head h2,
.wmessage .head h3,
.wmessage .head h4,
.wmessage .head h5,
.wmessage .head h6 {
	margin: 0;
	padding: 0;
}
.wmessage p {
	margin-top: 0;
	margin-bottom: 1rem;
}

.smalltext,
.helpbox {
	font-size: .8rem;
}

/* Респонсивные таблицы
https://css-tricks.com/responsive-data-tables/
https://getinstance.info/articles/css/responsive-tables-in-pure-css/
Для вывода заголовка к каждой клетке td должен быть такой:
<td data-label='Заголовок'>Содержимое</td>
*/
table {
  border-collapse: collapse;
}
table td, table th {
	padding: 4px 2px;
}
@media screen and (max-width: 600px) {
	table {
	  width: 100%;
	}

	table thead {
		display: none;
	}

	table tr {
		margin-bottom: 24px;
		display: block;
	}

	table td, table th {
		display: block;
		font-size: inherit;
	  width: 100%;
		vertical-align: middle;
		padding: 2px 1px;
	}

	table td:before {
		content: attr(data-label);
		float: left;
		font-size: inherit;
		font-weight: bolder;
	}

	table td:last-child {
		border-bottom: 0;
	}

	table td input[type="text"],
	table td input[type="password"],
	table td input[type="file"],
	table td textarea,
	table td select
	{
		width: 100%;
		margin-top: .2em;
	}

	table.data td {
		text-align: right;
	}
	table.data th {
		text-align: center;
	}

	table.border td {
		border-bottom: 1px dotted;
		border-right: 0;
	}

	table #tbDateFrom, table #tbDateTo, table #timeFrom, table #timeTo {
		width: auto;
	}
}	/* @media screen and (max-width: 600px)*/

/* */
details summary {
	padding-left: 24px;
	background: url("images/plus16.png") no-repeat scroll 0 4px;
	vertical-align: middle;
}

details[open] summary {
	background: url("images/minus16.png") no-repeat scroll 0 4px;
}

@media screen and (max-width: 600px) {
	details {
		text-align: left;
	}
}

/* печать */
div.print_page {
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	max-width: 210mm;
	height: 100%;
	max-height: 100%;
	padding: 2em 3em 2em 2em;
	line-height: 1.5em;
}
@media screen and (max-width: 600px) {
	div.print_page {
		padding: 16px;
	}
}
div.print_page a,
div.print_page a:hover,
div.print_page h1,
div.print_page h2,
div.print_page h3,
div.print_page h4,
div.print_page h5,
div.print_page h6
{
	margin-top: 0;
}
div.print_page .title {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 2em;
	border-bottom: 1px solid;
}
div.print_page .source {
	font-size: 85%;
	margin-top: 2em;
	border-top: 1px solid;
}
div.print_page #footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	padding: 1em;
}
@media print {
	div.print_page a {
		text-decoration: none;
	}
	div.print_page #footer {
		display: none;
	}
}

/* Для раздела сделано у нас */
#handmade {
	border-collapse: collapse;
	table-layout: fixed;
	margin: 0;
	width: 100%;
}
#handmade img {
	max-width: 100%;
}
#handmade td {
	width: 33.3%;
	padding: 0 10px 10px 0;
}
#handmade td > a, #handmade td > div {
	display: block;
	position: relative;
}
#handmade td > a > div, #handmade td > div > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}
#handmade td > a > div > h6, #handmade td > div > div > h6 {
	display: inline-block;
	margin: 40% 0 0;
}
@media screen and (max-width: 600px) {
	#handmade {
	  width: 100%;
	}
	#handmade tr {
		margin-bottom: 0;
		display: block;
	}
	#handmade td, #handmade th {
		display: block;
	  width: 100%;
		padding: 0 0 24px 0;
		vertical-align: middle;
		text-align: center;
	}
	#handmade td > a > div > h6, #handmade td > div > div > h6 {
		font-size: 300%;
	}
}	/* @media screen and (max-width: 600px)*/


/* текст */
article img {
	float: left;
	vertical-align: top;
	margin: 0 1em 1em 0;
}

article ul {
	list-style-position: inside;
}

/* light lightbox :)
see /javascript/win.js, function lb
and
http://www.toptip.ca/2012/01/lightbox-without-jquery-soooooooo.html
*/
.lightbox {
	position:fixed;
	z-index: 10001 !important;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.lightbox_table {
	width:100%;
	height:100%;
}
.lightbox_table_cell {
	vertical-align:middle;
}
#lightbox_note {
	text-align:left;
	font:10pt Verdana;
	font-weight: bold;
}

th a {
    color: inherit !important;
    background-color: inherit !important;
}