﻿/*import fonts*/
@font-face {font-family: older; src: url('older.ttf');}
@font-face {font-family: Kurale-Regular; src: url('Kurale-Regular.ttf');}


html, body {margin:0 0;}
header {height: 65px;background: #ccc;}
body {background-color:#fafafa;margin: 0 auto;position: relative;}
.logo {position: absolute; top: 17px; left: 100px; font-weight: 900; font-size: 30px; color: #ff0000; font-family:older;}
main {padding: 10px; margin-right:250px}
footer {height: 75px;background: #ddd;}
#f_l {width:49%; text-align:center; float:left; padding-top:10px;}
#f_l a {color:red; text-decoration:none}
#f_r {width:49%; text-align:center; float:right; padding-top:10px;}

/* css basic text */
.content p { text-indent:20px; font-family:"Times New Roman", Times, serif; font-size:120%; line-height:120% }
h1 {font-family: older; font-size:170%; line-height:170%; color:red; text-align:center; margin-top:0}
h2 {font-family: older; font-size:150%; line-height:150%; color:black; text-align:center}
h3 {font-family: older; font-size:140%; line-height:140%; color:red; text-align:center}
h4 {font-family: serif; font-size:130%; line-height:130%; color:red; text-align:center}
h6 {font-family: Kurale-Regular; text-align:right; color:#662300; font-weight:bold; font-size:16px; line-height:17px; width:60%; margin:8px 16px 10px auto; border-top:1px #763300 dotted; padding-top:4px; font-weight:normal;}
h5 {font-family: "Courier New", Courier, monospace; text-align:left; color:red; font-weight:bold; font-size:15px; line-height:16px; padding-bottom:8px; padding-top:8px; width:50%; clear:both; margin-left:30px; border-top:1px red dotted; margin-bottom:8px}


.text p:first-letter{color:red; font-weight:bold}
.red {color:red;}
.content a {color:red; text-decoration:underline}
.content a:hover {color:#ff5151;}
.content em {color:red}
.text strong {color:red}

.irmos { font-style:italic; font-size:110%!important;}
.irmos em {font-style:normal!important}
.sup_number {color:red; vertical-align:super; font-size:small; line-height:10px} /*номера стихов в псалитри и везде*/

.links {font-family:"Times New Roman", Times, serif;  margin-left:30px; border-left:1px red solid}
.links a{display:block; text-decoration:none;padding:3px 10px 3px 15px;font-size:125%; line-height:125%;}
.links a:hover {border-left:2px red solid;padding-left:13px;background:white;}
p.links_title {font-family: older; font-size:130%; color:red; margin:0 20% 0 30px; border-bottom:1px red dotted; padding-left:10px}

.nav-pages {width:300px; text-align:center; margin:0 auto}
.nav-pages a {padding:5px; text-decoration:none}


/*меню*/
/*кнопки открытия/закрытия меню*/
.menu-triger {	background: url(menu.png) 0 0 repeat;	display: block;	width: 25px;	height: 17px;	position: absolute;	left: 15px;	top: 24px;}	
.menu-close {background: url(close.png) 0 0 repeat;	display: block;	width: 28px;height: 28px;	position: absolute;	right: 20px;	top: 20px;	z-index: 100;}
/* стили меню */
.menu-popup { background: #ccc;	display: none;	position: absolute;	left: 0px;	right: 0px;	top: 0;	box-sizing: border-box;	padding: 30px;	z-index: 9999; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
.menu-popup ul {margin: 0; padding: 0;}
.menu-popup li {list-style: none; margin: 10px 0; padding: 0;border:1px red dotted; text-align:center;}
.menu-popup li:hover {background-color:#eee; border:1px white dotted}
.menu-popup li a {font-size: 22px; font-family: older; color: rgb(255, 0, 0); line-height: 1.4; text-decoration: none;}
.body_pointer * {cursor: pointer;}
#zoom {position:absolute;top:2px;right:10px;border-left:1px red dotted;}
#zoom a {display:block;margin:3px 0 3px 3px; line-height:0px!important}
#zoom img {width:20px; }

.header_img {width:70px; margin:0 auto; text-align:center; line-height:0px}
.header_img img {width:70px; margin:0 0;}



/* реклама */
#right_rek {width:250px; position:absolute; right:0; top:66px;}




/*////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////*/
/* под 800px убираем боковую рекламу */
@media only screen and (max-width: 800px) and (min-width: 300px){
#right_rek {position:relative; top:0; right:0; margin:0 auto}
main {margin-right:0px}
}
/*////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////*/
/* под 580px сжимаем невпихуемое */
@media only screen and (max-width: 580px) and (min-width: 300px){
#f_l {width:100%; clear:both; padding-top:10px;background: #ddd;}
#f_r {width:100%; clear:both; padding-top:10px;background: #ddd;}
}
/*////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////*/
/* под 480px сжимаем невпихуемое */
@media only screen and (max-width: 480px) and (min-width: 300px){
.logo {top: 17px; left: 100px; font-size: 24px;}
}
/* под 380px сжимаем невпихуемое */
@media only screen and (max-width: 380px) and (min-width: 300px){
.logo {top: 17px; left: 100px; font-size: 20px; margin-right:35px}
}


/*////////////////////////////////////////////////////////////
/////////////   ПЕЧАТЬ     ПЕЧАТЬ       //////////////////////
*/
@media print {
.reklama_print {display:none}
main {margin-right:0px;}
#zoom {display:none}
}

