html, body {
	
--fs:	calc( (100vw - 480px)/(1900 - 480) * (21 - 16) + 15px);
 
font-size:  var(--fs);

}

header{
border-bottom: 1px solid #999;
margin: 0px 0px 10px 0px;
}
.header{
margin: 0 auto;
max-width:1100px;
height: 60px;
position: relative;
}
.header__logo{
padding: 0px 10px 0px 10px;
}
.header__img{
height:60px;
vertical-align:middle;
display:table-cell;
}
.header__img a{
text-decoration: none;
color: #333;
}
.header__text{
font: italic bold 30px/1.5 Times, 'New Century Schoolbook', serif;
}


.main{
	margin: 0 auto;
	max-width:1050px;
	overflow:hidden;
	padding: 20px 0 0 0;
}




.pole{
background: #fff;
border-radius: 4px;
padding: 15px;
margin: 15px 5px 10px 5px;
text-align: left;
overflow:hidden;
}
h1 {
color: #343434;
font-size:  calc(var(--fs) * 1.5);
margin: 20px 0px 18px 5px;
}
h2 {
font-size:  calc(var(--fs) * 1.3);
color: #343434;
margin: 20px 5px 10px 5px;
}
h3 {
font-size:  calc(var(--fs) * 1.2);
color: #343434;
margin: 20px 5px 10px 5px;
}
h4,h5 {
font-size:  calc(var(--fs) * 1.1);
color: #343434;
margin: 5px 0px 5px 5px;
}
p{
margin: 8px 0px 8px 0px;
}
.blue {
color: #215169;
border: 1px solid #b5d8e9;
background: #d9edf7;
}
.green {
color: #2c551b;
border: 1px solid #bbddac;
background: #dff0d8;
}
.red {
color: #4d2525;
border: 1px solid #e29d9d;
background: #f4c2c2;
}
.yellow {
color: #524f23;
border: 1px solid #e5e1a5;
background: #f7f4c9;
}
.white{
border: 1px solid #aeaeae;
background: #fff;
}


.white_c{
color: #524f23;
border: 1px solid #aeaeae;
background: #fff;
text-align: center;
font-size: 140%;
}








footer{
margin: 20px 55px 10px 15px;
overflow:hidden;
}
.footer__copyright{
text-align: center;
font: 18px  Garamond;
margin: 0 auto;
max-width:1100px;
}




/* ---------- mycode ----------- */
.mycode {
	position: relative;	
	margin: 15px 5px 15px 40px;
	transition-duration: 1s;
	border-radius: 4px;
}
.mycode:hover  {
	background: #f9f9f9;
	transition-duration: 1s;
}
.mycode:before {
	content: ''; 
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: -27px;
	width: 30px;
	border-right: 1px solid #b4b4b4;	
}
.mycode code {
	counter-reset: num-p;
	font-size: 90%;		
}
.mycode li {
    list-style-type: none;
   }
.mycode ul {
    margin-left: 0; 
    padding-left: 0;
   }
.mycode .li {
	counter-increment: num-p;
	display: block;
    white-space: pre-wrap;
	padding: 0 0 0 10px;
	} 
.mycode .li:before{
	position: absolute;
	left: -20px;
	color: #b4b4b4;
	content:  counter(num-p) "  ";	
	display: inline-block;  
    width: 30px;
}
.mycode .li:hover {
	background: #f1f1f1;
}
.mycode .variables {
	color: #000080; 
}
.mycode .operators {
	color: #0000ff; 
}
.mycode .comments {
	color: #008000; 
}
.mycode .datas {
	color: #808080; 
}

/* ---------- main ----------- */
a.main_a {
  color: #9f9f9f;
  font-weight: bold;
  FONT-FAMILY: Garamond;
  FONT-SIZE: 25px;
  text-decoration: none;
}

a.main_a:focus,a.main_a:hover,a.main_a:active {
  color:#5b8191;
  text-decoration:underline;
  FONT-FAMILY: Garamond;
}


/* ---------- knopka ----------- */
.knopka {
  display: inline-block;
  padding: 11px 20px 11px 20px;
  border-radius: 3px;
  color: #fff;
  background-color: #538fa9;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 10px 10px 10px 10px;
}
/* ---------- imput  ----------- */
.imput_1 {
  padding: 10px;
  color: #666;
  border: 2px solid #E8E8E8;
  border-radius: 3px;
  margin: 10px 5px 10px 5px;
  font-size: 100%;
  text-align: center;
}