/*
Theme Name: vannaja
Version: 1.0
Description: 
Author: Akara
*/
@font-face {
    font-family: "PFDinText";
    src: url("fonts/PFDinTextCompPro-Regular.ttf");
}

@font-face {
    font-family: 'PFDinText';
    src: url('fonts/pfdintextcomppro-regular.eot?') format('eot'), 
         url('fonts/pfdintextcomppro-regular.woff') format('woff'), 
         url('fonts/PFDinTextCompPro-Regular.ttf')  format('truetype'),
         url('fonts/pfdintextcomppro-regular.svg#svgFontName') format('svg');
    }
	
@import url('nz_calc/nz_calc.css');

/* reset
-------------------------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, a, img,
ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font: inherit;
    font-size: 100%;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}

body {
	font: 13px/1.3 arial, helvetica, sans-serif;
	color: #5a6970;
	background: #eaeaea;
}
.clearfix {
	*zoom: 1;
}
.clearfix:before,
.clearfix:after {
	display: table;
	line-height: 0;
	content: "";
}
.clearfix:after {
	clear: both;
}
/* layout
-------------------------------------------------*/
.wrapper {
	width: 100%;
	max-width: 1000px;
	margin: auto;
}

/* header
-------------------------------------------------*/
.header {
    position: relative;
}
.logo {
    display: block;
    margin: 20px 0 0;
    width: 247px;
    height: 48px;
	background: url('img/logo.png') no-repeat;
	text-indent: -9999px;
}
.site-description {
	margin: 5px 0 20px;
	color: #206f80;
	text-transform: uppercase;
	font: 15px PFDinText, Arial, Helvetica, sans-serif;	
}

/* menu
-------------------------------------------------*/
.menu li {
    position: relative;
    z-index: 9999;
    display: block;
    display: inline-block;
    vertical-align: top;
}
.sub-menu {
    display: none;
}
#top-menu {
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    background: #2f92a6;
    font-size: 0;
}
#top-menu a,
#top-menu span {
    display: block;
    padding: 10px 12px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
}
#top-menu a:hover,
#top-menu span {
    background: #2c7e8e;
}
#main-menu {
    background: #206f80;
    font-size: 0;
    line-height: 35px;
	box-shadow: 0 1px 0 #f2f2f0 inset, 0 2px 0 #eaebec inset, 0 3px 0 #dce1e3 inset;
	border: 1px solid #206f80;
}
#main-menu a,
#main-menu span {
    display: block;
    padding: 0 12px;
    border-left: 1px solid #155a69;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
}
#main-menu li:first-child a,
#main-menu li:first-child span {
	border-left: none;
}
#main-menu a:hover,
#main-menu span {
    background: #155a69;
	box-shadow: 0 1px 0 #f2f2f0 inset, 0 2px 0 #eaebec inset, 0 3px 0 #dce1e3 inset;
}

/* content
-------------------------------------------------*/
.content {
	padding: 15px 2%;
	background: #fff;
}
.content-coll {
    float: left;
    width: 63.1579%;
}

.article {
	margin-bottom: 15px;
}

.two-coll {
    font-size: 0;
}
.two-coll-item {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 20px 3.2258%;
    min-height: 40px;
    width: 48.3871%;
    vertical-align: top;
    font-size: 13px;
}
.coll-odd {
    margin-left: 0;
}
.article-navi {
	font-size: 14px;
	margin: 20px 0 0;
}
.article-prev {
	float: left;
	width: 48%;
}
.article-next {
	float: right;
	width: 48%;
	text-align: right;
}

/* crumbs */
.crumbs {
	font-size: 11px;
	margin: 0 0 15px;
}

/* related */
.related {
	padding: 0 0 0 120px;
	background: url('img/related.png') no-repeat;
	min-height: 100px;
}
.related a {
	font-weight: bold;
	margin: 0 0 15px;
	display: block;
	font-size: 14px;
}

/* pagenavi */
.navigation {
	margin: 25px 0 20px;
	text-align: center;
}
.navigation span,
.navigation a {
	margin: 0 8px;
}

/* sidebar
-------------------------------------------------*/
.sidebar {
	width: 29.7895%;
    float: right;	
}
.sidebox {
	padding: 15px 15px 0;
	background: #fff;
	margin: 0 0 20px;
}
.sidebox-title {
	font: normal 22px PFDinText, Arial, Helvetica, sans-serif;
	background: #2f92a6;	
	color: #fff;
    margin: 0 0 0 -15px;
    padding: 5px 10px 5px 15px;	
	border-radius: 0 5px 5px 0;
}
.sidebox li {
	display: block;
}
.sidebox > ul > li:first-child,
.widget_nav_menu > div > ul > li:first-child,
.textwidget > ul > li:first-child {
    border: none;
}
.sidebox li {
    padding: 8px 0 7px 20px;
    background: url('img/arrow-list.png') 0 9px no-repeat;
    border-top: 1px dotted #cecdcd;	
    display: block;	
}
.sidebox ul ul {
	margin-top: 5px;
}
.sidebox ul ul li:last-child {
	padding-bottom: 0;
}
.sidebox a {
    color: #6f6f6f;
    text-decoration: none;
}

#recentcomments {
	list-style: none;
}
.widget_calendar {
	font-size: 11px;
	padding: 15px;
}
.widget_calendar th,
.widget_calender td {
	text-align: center;
	padding: 0;
}
.widget_calender #prev {
	text-align: left;
}
.widget_calender #next {
	text-align: right;
}
.tagcloud, 
.widget_search form {
	padding: 15px;
}
.widget_recent_comments li a {
	display: inline;
	background: none;
	border: none;
	text-decoration: underline;
	color: #41a8d3;
}

/* footer
-------------------------------------------------*/
.footer {
	background: #2f92a6;
    margin: 0 0 10px;
    padding: 10px 20px;
    border-radius: 0 0 10px 10px;
    color: #fff;	
}
.copyrights {
	overflow: hidden;
}
.counters {
	text-align: center;
	margin: 20px 0;
}

/* social icons */
.social-icons {
	width: 275px;
	float: right;
	margin: 0 0 0 20px;
}
.icons {
	display: inline-block;
	vertical-align: top;
	width: 65px;
	height: 70px;
	background: url('img/social.png');
	text-indent: -9999px;
}
.vk-icons {
	background-position: -4px -72px;
}
.twitter-icons {
	background-position: -146px 0;
}
.facebook-icons {
	background-position: -75px -72px;
}
.google-icons {
	background-position: -75px 0;
}

/* form
-------------------------------------------------*/
/* search-form */
.header .search-form {
    position: absolute;
    top: 15px;
    right: 0;
}
.search-field {
    width: 300px;
}
.search-submit {
    cursor: pointer;
}

/* comments-form */
.comment-form {
	margin: 20px 10px 20px 0;
}
.comment-form a {
	color: #644b64;
	text-decoration: underline;
}
label {
	font-size: 12px;
	display: block;
}
.fields-item {
	margin: 10px 0;
}
.field {
	margin: 0 0 10px 0;
	padding: 0 5px;
	width: 350px;
	height: 20px;
	line-height: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	height: 26px;
}
.field-small {
	width: 211px;
}
.comment-field {
	margin: 20px 0;
	width: 60%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;	
}
.comment-btn {
	padding: 2px;
	width: 170px;
	cursor: pointer;
}

/* comments-list */
.commentsbox {
	margin: 40px 0 20px;
}
.comment-body {
	margin: 10px 0;
	padding: 5px 0;
	font-size: 12px;
	line-height: 20px;
}
.comment-body a,
a:hover {
	text-decoration: none;
}
.commentlist .children {
	padding: 0 0 0 40px;
}
.commentlist p {
	margin: 10px 5px 10px 0;
	padding: 0;
}
.commentlist cite,
.commentlist cite a {
	font-weight: bold;
	font-style: normal;
	font-size: 14px;
}
.comment-meta {
	margin: 0 0 5px;
	display: block;
	font-size: 10px;
}
.avatar {
	float: left;
	margin: 0 10px 0 0;
	padding: 2px;
	border: 1px solid #eee;
}

/* typography
-------------------------------------------------*/
.page-title,
h1 {
	font: 32px PFDinText, Arial, Helvetica, sans-serif;		
}
.article h4,
.article h5,
.article h6 {
	font-family: PFDinText, Arial, Helvetica, sans-serif;	
	color: #2f92a6;
	margin: 0 0 5px;
}
.article h2 {
	font: normal 22px PFDinText, Arial, Helvetica, sans-serif;
	background: #2f92a6;	
	color: #fff;
    margin: 20px 0 20px -2%;
    padding: 5px 10px 5px 38px;	
	border-radius: 0 5px 5px 0;
}
.article h3 {
	text-decoration: none;
	display: block;
	font: 22px PFDinText, Arial, Helvetica, sans-serif;
	margin: 0 0 5px;
	color: #2f92a6;	
}
.article h4 {
	font-size: 20px;
}
.article h5 {
	font-size: 18px;
}
.article h6 {
	font-size: 16px;
}
.article-title a,
.article-title {
	text-decoration: none;
	display: block;
	color: #000;
	font: 24px PFDinText, Arial, Helvetica, sans-serif;
	margin: 0 0 5px;
}
.article p {
	margin: 15px 0;
}
.article ul,
.article ol {
	margin: 15px 0 15px 5px;
}
.article ul li {
	margin: 5px 0;
	padding: 0 0 0 14px;
	background: url('img/li.png') 0 4px no-repeat;
}
.article ol li {
	margin: 5px 0 5px 12px;
	list-style: decimal inside;
}
.article-more-link {
	margin: 5px 0;
	display: block;
}
.headline {
	font-size: 18px;
}
strong {
	font-weight: bold;
}
blockquote {
	padding: 15px;
	margin: 15px 0;
	background: #b1d4db;
	border-radius: 10px;
	position: relative;
	width: 77%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;		
}
blockquote:before {
	content: "Важно!";
	font-weight: bold;
	text-transform: uppercase;
	color: #2f92a6;
	font-size: 14px;
	position: absolute;
	left: 5px;
	top: 5px;
}
em {
	font-style: italic;
}
a {
	color: #206f80;
}
a:hover {
	color: #2f92a6;
}
pre {
	white-space: pre-wrap;
	word-wrap: break-word;
}
table {
	width: 100%;
}
caption {
	padding: 0 5px 5px;
	color: #300F35;
	text-transform: uppercase;
	font: bold 14px Tahoma, Arial, Helvetica, sans-serif;
}
th,
td {
	padding: 5px 0;
	border: solid #999;
	border-width: 1px 0;
	text-align: center;
}
/* img
-------------------------------------------------*/
img {
	max-width: 100%;
	height: auto;
}
.thumb {
	border-radius: 5px;
}
.alignleft {
	float: left;
	margin: 8px 15px 0 0;
}
.alignright {
	float: right;
	margin: 8px 0 0 15px;
}
.aligncenter {
	display: block;
	margin: 15px auto;
}
.wp-caption {
	padding: 0 0 5px;
	max-width: 96%;
	max-width: 100%;
	border: 1px solid #ddd;
	border-radius: 3px;
	background: #f3f3f3;
	text-align: center;
}
.wp-caption .wp-caption-text {
	margin: 0;
	font-size: 11px;
	line-height: 17px;
}
.wp-caption img,
.wp-caption.alignright img,
.wp-caption.alignleft img,
.wp-caption.aligncenter img {
	margin: 0 auto;
	padding: 4px 0 0;
	max-width: 100%;
	height: auto;
}
.wp-caption.alignright,
.wp-caption.alignleft,
.wp-caption.aligncenter {
	float: none;
	margin: 10px auto;
	max-width: 100% !important;
	height: auto;
}

@media only screen and (max-width: 1000px){
	.wrapper {
		width: 96%;
	}
}
@media only screen and (max-width: 760px){
	.logo, .site-description {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
	.header .search-form {
		position: relative !important;
		top: auto;
		left: auto;
		text-align: center;
		margin: 20px 0;
	}
	.content-coll,
	.sidebar {
		float: none;
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 20px;
	}	
}
@media only screen and (max-width: 520px){

	.two-coll-item {
		width: 100%;
		margin-left: 0;
	}
	.field,
	.comment-field {
		width: 100%;
	}
	.social-icons {
		float: none;
		width: 100%;
		text-align: center; 
		margin: 0 0 10px;
	}
	blockquote {
		width: 100%;
	}
	.article-prev,
	.article-next {
		width: 100%;
		margin: 0 0 20px;
	}
}
.youtube {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
	border:1px solid #ccc;
}
.youtube iframe, 
.youtube object, 
.youtube embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

