/* General Demo Style */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url('OpenSans-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('OpenSans.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url('OpenSans-Bold.woff2') format('woff2');
}
*,
*:after,
*:before{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:0;
	margin:0;
}
html{
  font-size:100%;
  height:100%;
}
body{
  font-family:'Open Sans', sans-serif;
  font-weight:400;
  font-size:12pt;
  color:#333;
  overflow:scroll;
  width:100%;
  position:absolute;
}
h1,ol,#nav,#copy{padding-left:20px}
.container{
  min-width:2500px;
  min-height:550px;
  margin:0 auto;
  padding:20px 0;
  background:url(../img/grass.png) bottom left repeat-x;
  position:relative;
  z-index: 0;
}
.container > header{
  width:90%;
  max-width:76em;
  margin:0 auto;
  padding:0 1.875em 3.125em 1.875em;
}
.container > header{
  padding:1.875em;
}
.container > header h1{
  font-size:2.125em;
  line-height:1.3;
  margin:0;
  font-weight:700;
  color:#333;
  float:left;
}
.container > header h1 span{
  display:block;
  font-size:65%;
  font-weight:300;
}
.clear{clear:both}
button,
.button{
  font-weight:400;
  font-size:10pt;
  min-width:90px;
  min-height:32px;
  height:32px;
  background-color:#ccc;
  border:1px transparent solid;
  color:#353535;
  margin-right:50px;
  margin-bottom:10px;
  margin-top:10px;
  border-raduis:0;
  display:inline-block;
  text-align:center;
  vertical-align:middle;
  cursor:pointer;
  padding:4px 10px;
  position:relative;
}
button.standart,
.button.standart{
  min-width:90px;
  min-height:32px;
}
button:active,
.button:active,
button.default:active,
.button.default:active{
  top:1px;
  left:1px;
}
button:disabled,
.button:disabled,
button.disabled,
.button.disabled{
  background-color:#eaeaea;
  color:#bebebe;
  cursor:not-allowed;
}
button.default,
.button.default{
  background-color:#008287;
  color:#fff;
}
button:focus,
.button:focus{
  outline:0;
  border:1px #353535 dotted;
}
a.button:hover,
a.button:active{color:#199be6}
a.button.big{padding:14px 10px}
.center{text-align:center}
.def{
  font-size:8pt;
  color:#d7e4ea;
}

#item1{
  white-space:nowrap;
  background:url(../img/bg.png) top 0 left 50% no-repeat;
  border-right:1px dashed #000;
  margin-left:35px;
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.tree > span{
  border-top:1px dashed #000;
  width:100%;
  position:absolute;
  top:60px;
  left:0;
  z-index:-1;
}
.tree ul{
  padding-top:10px;
  position:relative;
}
.tree li {
  text-align:center;
  float:left;
  list-style-type:none;
  position:relative;
  padding:2px 2px 0;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before,
.tree li::after{
  content:'';
  position:absolute;
  top:0;
  right:50%;
  border-top:2px solid #000;
  width:50%;
  height:30%;
  max-height:100px;
}
/* удлинитель для "дальних" родственников
.tree li#item22::after,
.tree li#item31::after{
  max-height:200px;
  height:200px;
} */
.tree li::after{
  right:auto;
  left:50%;
  border-left:2px solid #000;
}
/*We need to remove left-right connectors from elements without 
any siblings*/
.tree ul ul:only-child::after,
.tree ul ul:only-child::before{display:none}
/*Remove space from the top of single children*/
.tree li:only-child{padding-top:0}
/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before,
.tree li:last-child::after{border:0 none}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
  border-right:2px solid #000;
  border-radius:0 5px 0 0;
  -webkit-border-radius:0 5px 0 0;
  -moz-border-radius:0 5px 0 0;
}
.tree li#item1:first-child::before{border:0 none}
.tree li:first-child::after{
  border-radius:5px 0 0 0;
  -webkit-border-radius:5px 0 0 0;
  -moz-border-radius:5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  border-left:2px solid #000;
  width:0;
  height:100%;
}
.tree li a{
  font-family:arial, verdana, tahoma;
  font-size:11px;
  text-decoration:none;
  border:2px solid #000;
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  padding:2px 2px 0;
  color:#000;
  background-color:#EFEFEF;
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  position:relative;
  z-index:1;
  /* кроссбраузерный inline-block */
  display:inline-block;
  vertical-align:top;
  zoom:1;
  *display:inline;
}
.tree li a.m{background-color:#aad5ff}
.tree li a.f{background-color:#ffaad5}
.circle{
  width:150px;
  height:150px;
  background-color:#008000;
  background:url(../img/list.png) no-repeat;
  -moz-border-radius:100px;
  -webkit-border-radius:100px;
  border-radius:100px;
  position:absolute;
  top:0;
  left:30%;
  z-index:-1;
}
#item1 > .circle,
#item2 > .circle{background:transparent}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a{
  background:#bbffbb;
  color:#004000;
  border:2px solid #004000;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{border-color:#004000}
/*Пользовательские настройки*/

@media print {#nav{display:none}}