/* socmain.css for http://socionic.info    */
*{/* сброс */
	margin:0;
	padding:0;
	border:0;
}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
header, main, section, footer, aside, nav, article, address {
    display: block; 
}
/***********************************************/
/* Layout Divs                                 */
/***********************************************/
body{
	font-family: "Times New Roman", Times, serif;
	font-size:16px;
	color: #333333;
	background-image: url(../img/p/socback.jpg);
}
#wrapper {
	width: 1000px;
	margin:0 auto;
	min-height:768px;
	position:relative;
}
/*********** header styles ***********/
header{
	min-height:75px;
	border-bottom: 2px solid #6699FF;
	background-color: #330099;
	font-weight: bold;
	color: #FFFFFF;
	vertical-align: super;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
}
header .space{
	height:50px;
	position:absolute;
	top:20px;
	left:530px;
}
header img {
	width:470px;
	height:50px;
	padding:0;
	margin:0;
}
header a {padding: 2px;font-family: Arial, Helvetica, sans-serif;}
header a:link{voice-family: "\"}\"";voice-family:inherit;color: #F90;}
header a:visited{color: #F90;}
#globalNav a:hover{background-color: #FFFFCC;}
/* для подписей переключения между языками */
.style1 {
	font-size: small;
	font-weight: bolder;
	word-spacing: 2em;
	color: #F90;
	vertical-align: 120%;
}

main {
	float:right;
	width: 79%;
	background-color: #FFFFFF;
	margin-top:10px;
}

a:link {color: #5507E8;}
a:visited {color: #0099FF;text-decoration: none;}
/* a:hover {text-decoration: underline;} overrides decoration from previous rule for hovered links */

section{min-height:125px;}

h1, h2, h3, h4, h5, h6 {
	font-family: Arial,sans-serif;
	margin: 0px;
	padding: 10px 0;
}
h1{
	font-size: 120%;
	color: #0033CC;
	font-weight: bold;
}
h2{
	font-size: 110%;
	color: #0033FF;
	font-weight: bolder;
}
h3{
	font-size: 100%;
	font-weight: bold;
	color: #9900CC;
	padding-left:15px;
}
h4{
	font-size: 90%;
	color: #9966CC;
	font-weight: bold;
}
h5{
	font-size: 80%;
	color: #000000;
	font-weight: bold;
	text-align: left;
	margin-top: 10px;
}
ol{
 list-style-position:outside;
 padding-left: 2em;
}
ul{
 list-style-type: square;
 list-style-position:outside;
 padding-left: 2em;
}
ul ul{
 list-style-type: disc;
 list-style-position:inside;
}
ul ul ul{
 list-style-type: none;
 list-style-position:inside;
}
label{
 font: bold 100% Arial, sans-serif;
 color: #FFFF00;
}
/* стиль, выделяющий красненьким и полужирным */
.red {font-weight: bold;color:#CC3333;}
/* стили с разными отступами */
.news {padding:20px;}
.news h4 {padding-top:0; line-height: 1em;}
.news h5 {padding-top:0; line-height: 1em;}
.leftal {text-align:left;padding-left:0;}
.kw {padding:20px;font-size:0.95em;}
.notop{padding-top:0;}
.txtsmall{font-size:0.95em;color:#006;}
/***********************************************/
/*Component Divs                               */
/***********************************************/
#siteName{margin: 0px;padding: 0px 0px 10px 10px;}

#pageName{padding: 10px 10px 0 10px;}

/*********** #navBar styles ***********/
#navBar{
	width: 20%;
	float:left;
	border-right: 2px solid #6699FF;
	border-bottom: 2px solid #6699FF;
	font-family: Arial, Helvetica, sans-serif;
}
#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #6699FF;}
/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}

/************* #globalNav styles **************/
#globalNav{
	color: #F90;
	padding: 0px 0px 0px 50px;
	white-space: nowrap;
	background-color: #330099;
	font-variant: small-caps;
	text-align: right;
	font-family: Arial, Helvetica, sans-serif;
}
/* 'nowrap' prevents links from line-wrapping if there are too many to fit in one line
   this will force a horizontal scrollbar if there isn't enough room for all links
   remove rule or change value to 'normal' if you want the links to line-wrap */
#globalNav a {padding: 0px 4px;font-weight: bolder; display:inline-block;background-color:#F1F1F1;}
#globalNav a:hover{color: #6600CC;}
#globalNav a:link{color: #6600CC;}
#globalNav a:visited{color: #9999FF;}

/************** article styles ***************/
article {
	font-family: "Times New Roman", Times, serif;
	float:inherit;
	padding:0 20px 20px 20px;
	width:100%;
}
article h1 {
	text-align:center;
	font-size:1.35em;
	font-weight:bolder;
	line-height:1.5em;
	padding-top:1.5em;
}
article h2{
	text-align:center;
	font-size:1.25em;
	font-weight:bold;
	line-height:1.4em;
	padding-top:1.5em;
}
article h3{
	text-align:center;
	font-size:1.15em;
	font-weight:bold;
	line-height:1.3em;
	padding-top:1.5em;
	padding-left:0;
}
article h4{
	text-align:left;
	font-size:0.95em;
	line-height:1.2em;
	padding-left:5em;
	padding-top:1.5em;
}
article p{
	text-align:justify;
	line-height:1.25em;
	padding-top:0.5em;
}
article td, article th {
  height: 2em;
  border: 1px solid #ccc;
}

/* для отображения картинок */
.leftimg {
    float:left; /* Выравнивание по левому краю */
    margin: 0px 7px 7px 0; /* Отступы вокруг картинки */
}
.rightimg  {
    float: right; /* Выравнивание по правому краю  */ 
    margin: 0px 0 7px 7px; /* Отступы вокруг картинки */
}

/**centred image***/
#centreImg {text-align: center;float: none;}

/************* footer styles ***************/
footer{
	clear: both;
	border: 2px solid #6699FF;
	font-size: 75%;
	color: #6699FF;
	padding: 10px 10px 10px 10px;
	margin:0 auto;
	font-family: Arial, Helvetica, sans-serif;
}
/* negative top margin pulls footer up so its top border overlaps (and thus lines up with)
	the bottom border of the navBar in cases where they "touch" */
footer img{
	padding: 4px 4px 4px 0px;
	vertical-align: middle;
}
/************* socionics font ***************/
@font-face {
    font-family: 'socionic';
    src: url('../fonts/socionic-webfont.eot');
    src: url('../fonts/socionic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/socionic-webfont.woff2') format('woff2'),
         url('../fonts/socionic-webfont.woff') format('woff'),
         url('../fonts/socionic-webfont.ttf') format('truetype'),
         url('../fonts/socionicsweb-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
.soc{
	font-family: 'socionic';
	font-size:105%;
}

/* MEDIA QUERIES*/
@media only screen and (max-width : 1000px),
only screen and (max-device-width : 1000px){
	#wrapper {
		width: 100%;
	}
}
@media only screen and (max-width : 700px),
only screen and (max-device-width : 700px){
	#wrapper {
		width: 100%;
	}
	#globalNav {
		display:none;
    }
	#navBar {
		float:none;
		clear:both;
		width:96%;
		position:relative;
		margin:0 auto;
	}
	main {
		float:none;
		clear:both;
		width:96%;
		position:relative;
		margin:0 auto;
	}
	header .space{
		height:50px;
		position:absolute;
		top:50px;
		left:400px;
	}
}
@media only screen and (max-width : 480px),
only screen and (max-device-width : 480px){
	header {
		width: 100%;
		height:60px;
	}
	header .space{
		position:absolute;
		top:30px;
		left:240px;
	}
	header img{
		width:282px;
		height:30px;
		padding:0;
		margin:0;
	}
}