@import url(https://fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic,700italic&subset=latin,cyrillic-ext,cyrillic);

body {
/*background-image: url(sliderengine/background05.jpg);*/
background-repeat: repeat;
background-color: #EDF0EF;
margin: 0 auto;
padding: 0;
color: #000;
font-family: 'Noto Serif', serif;
font-size: 14px;
}

/* Верхнее меню */
	#header {
		margin: 0 auto;
		padding: 0 0 15px 0;
		position: relative;
	}
	.header_top {
		margin: 0 0;
		padding: 6px 15px;
		position: relative;
		background: #4863A0;
		zoom:1;
		color: #FFF;
		border-bottom: 1px solid #000;
		font-size: 14px;
		line-height: 1.5;
		font-weight: 400;
		font-style: normal; 
		border-radius: 0 0 10px 10px;
		-webkit-border-radius: 0 0 10px 10px;
		-moz-border-radius: 0 0 10px 10px;
	}
	.header_top a:link, .header_top a:visited {
		color: #FFF;
		text-decoration: none;
		border-bottom: 1px dashed #4863A0;
	}
	.header_top a:hover {
		color: #FFF !important;
		border-bottom-color: #FFF !important;
	} 

		
	.header_top_left {
		display: inline-block;
	}
	.header_teos {
		margin: 0 10px 0 0;
	}
	.header_contact {
		margin: 0 10px 0 0;
	}

	.header_top_right {
		display: inline-block;
		float: right;
	}
	.header_help {
		margin: 0 0 0 0px;
	}

/* Нижнее меню */

#footer {
	margin: 0 auto;
	max-width:1102px;
	display: table;
	width: 100%;
	position: relative;
	text-align: left;
	border-top: 1px solid #A7AAA9;
	padding: 10px 20px 40px 20px;
	color: #A7AAA9;
	font-size: 12px;
	font-style: normal; 

}		
#footer_left {

}	

/* Название серии */

#title {
	margin: 0 auto;
	max-width:1102px;
	display: table;
	width: 100%;
	position: relative;
	text-align: left;
	padding: 40px 20px 4px 20px;
	color: #4863A0;
	font-size: 20px;
	font-style: normal; 

}		
#notes {
	margin: 0 auto;
	max-width:1102px;
	display: table;
	width: 100%;
	position: relative;
	text-align: left;
/*	border-bottom: 1px solid #A7AAA9;*/
	padding: 2px 20px 20px 20px;
	color: #000;
	font-size: 14px;
	font-style: normal; 

}
		
/* Всплывающие окна */

#fade {
display: none;  /* ensures it’s invisible until it’s called */
position: absolute;  /* makes the div go into a position that’s absolute to the browser viewing area */
left: 0%; /* makes the div span all the way across the viewing area */
top: 0%; /* makes the div span all the way across the viewing area */
background-color: black;
-moz-opacity: 0.7; /* makes the div transparent, so you have a cool overlay effect */
opacity: .70;
filter: alpha(opacity=70);
width: 100%;
height: 100%;
z-index: 90; /* makes the div the second most top layer, so it’ll lay on top of everything else EXCEPT for divs with a higher z-index (meaning the #overlay ruleset) */
}
#feedback, #about {
/*background-image: url(sliderengine/background05.jpg);*/
background-color: #EDF0EF;
background-repeat: repeat;
display: none;
position: fixed;
left: 50%;
top: 25%;
margin-top: -108px;
margin-left: -229px;
padding: 20px 25px 10px 25px; 
border: 1px solid black;
width: 500px;
height: 530px;
z-index: 100;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
color: #000;
}
#feedback h3, #about h3 {
margin: 0px 15px 20px 0px;
font-size: 16px;
	line-height: 24px;
	font-weight: bold;
	color: #4863A0;
}



/*  Форма обратной связи  */

.contact_form {
display: block;
margin-bottom:10px;
}
.contact_form label {
font-size: 12px;
font-weight:bold;
line-height:18px;
color:#000;
}
.form_element {
font-size:12px;
width:280px;
padding:6px;
margin:12px 0 18px 0;
color: #000000; 
background-color:#E8E8E8;
border:1px solid #000000;
/*-webkit-box-shadow: 0 1px 1px #000000;
-moz-box-shadow: 0 1px 1px #000000;
-o-box-shadow: 0 1px 1px #000000;
box-shadow: 0 1px 1px #000000;*/
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
/*-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
-ms-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;*/
}   
.form_element:hover{
	background-color:#F4F4F4;
	/*-webkit-box-shadow: 0 3px 3px #000000;
	-moz-box-shadow: 0 3px 3px #000000;
	-o-box-shadow: 0 3px 3px #000000;
	box-shadow: 0 3px 3px #000000;*/
}
.form_element:focus {
	background-color:#FFFFFF;
	outline:none;
}
.contact_form textarea {
height:120px;
width:485px;
resize:none;
}
.contact_form .required {
color:#C00;
}
.contact_form .special {
display:none;
}
.contact_form .error, 
.contact_form .sent {
font-size:11px;
padding:3px 6px 3px 6px;
/*text-shadow:1px 1px 1px #ffffff;*/
border:1px solid #000000;
/*-webkit-box-shadow: 0 1px 1px #000000;
-moz-box-shadow: 0 1px 1px #000000;
-o-box-shadow: 0 1px 1px #000000;
box-shadow: 0 1px 1px #000000;
-webkit-border-radius:3px;
-moz-border-radius:3px;*/
border-radius:3px;
}
.contact_form .error {
	background:#f7cac4; 
	color:#992213;
}
.contact_form .sent {
	background:#d8f6bc; 
	color:#2f530b;
}
.contact_form .button {
border: 1px solid #000000;
color: #ffffff;
background-color: #4863A0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
/*	text-shadow: 0 1px 1px #000000;
-webkit-box-shadow: 0 1px 1px #000000;
-moz-box-shadow: 0 1px 1px #000000;
-o-box-shadow: 0 1px 1px #000000;
box-shadow: 0 1px 1px #000000;
font: bold 11px Sans-Serif;*/
padding: 7px 12px;
margin:9px 12px 0 0;
white-space: nowrap;
vertical-align: middle;
color: #ffffff;
cursor: pointer;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2));
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-ms-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.contact_form .button:hover, 
.contact_form .button:focus {
color: #ffffff;
background-color: #344F8C;
}
.contact_form .button:active {
position:relative;
top:1px;
/*-webkit-box-shadow: 0 0 1px #000000;
-moz-box-shadow: 0 0 1px #000000;
-o-box-shadow: 0 0 1px #000000;
box-shadow: 0 0 1px #000000;*/
}

/* Проигрыватель */

#player {
	position: relative;
	text-align: left;
}

/* Список аудио файлов */

#content {
	margin: 0 auto;
	max-width:1152px;
	display: table;
	width: 100%;
	padding: 0px;
	position: relative;
	text-align: left;

}
.content_left {
	display: table-cell;
	width: 531px;
}
.content_right {
	display: table-cell;
	width: 531px;
}
.content_li_first {
	padding: 10px; 
}
.content_li {
	padding: 10px; 
	border-top: 1px dashed #A7AAA9;
}
.audiolist {
	padding-left: 10px;
	line-height: 30px;
	color: #000;
	font-size: 14px;
}

.download  {
	padding-left: 5px;
	vertical-align: top;
	background:url(images/download03.png) no-repeat top left;
	display: inline-block;
	cursor: pointer;
	height: 31px;
	width: 31px;
}


.category-list {
  list-style: none;
  column-count: 2;
/*  height: 100px;*/
  /*border: 1px solid red;*/
}
.category-list li {
  page-break-inside: avoid;
  break-inside: avoid;
}

.pj_cont {
	font-size: 120%;
}

.crbui-touchbutton {
	position: relative;
}

/*.row {*/
/*	margin-left: 0;*/
/*	margin-right: 0;*/
/*}*/

.crbui-touchdisplay .crbui-touchdisplay-label > h3 {
	font-size: 14px;
}

.category-list {
	padding-left: 0;
}

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

	.header_top_right {
		margin-top: 15px;
		margin-bottom: 15px;
		width: 100%;
		text-align: center;
	}

	.header_top_right a {
		background-color: #4863A0;
		padding: 3px 15px;
	}

	#feedback {
		width: 100%;
		margin: 0;
		left: auto;
		margin-left: -15px;
		height: auto;
	}

	.contact_form textarea {
		width: 100%;
	}

	#title {
		padding-left: 0;
	}

	.category-list {
		column-count: 1;
	}

	.category-list li {
		width: 100%;
		display: flex;
		padding-left: 0;
		padding-right: 0;
	}

	.category-list li a span,
	.category-list li span.crbui-touchbutton {
		display: block;
		margin-right: 10px;
	}

	.audiolist {
		line-height: 1.4;
		padding-left: 0;
	}

	.audioimage {
		margin-bottom: 15px;
	}

}