html, body {
background: #EEEEEE;
padding: 0px; margin: 0px;
font-family: Arial;
scroll-behavior: smooth;
}

div.lang{
position: absolute;
top: 20px;
right: 7%;
width: 170px;
float: right;
z-index: 1000;
}

div.lang a{
display: block;
width: 40px;
height: 40px;
border: 2px solid #E5E5E5;
border-radius: 50%;
color: #000;
text-align: center;
font-size: 15px;
padding: 2px;
text-decoration: none;
text-transform: uppercase;
float: left;
margin: 15px;
line-height: 2.5;
}

div.lang a:hover{
background: #F3F3F3;
}

#header{
position: relative;
width:90%;
height:140px;
margin: 20px auto 0px auto;
background:#FFF;
box-shadow: 0pt 0pt 10px #AAA;
}
#wrapper{
position: relative;
width:90%;
margin: 0px auto;
}
#content{
position: relative;
width:65%;
min-height:800px;
float:left;
background:#FFFFFF;
box-shadow: 0pt 0pt 10px #AAA;
padding: 0px 5% 50px 5%;
}

#sidebar{
position: relative;
width:25%;
margin: 0px auto;
float:left;
padding-bottom: 70px;
}
div.rbv{
width: 242px;
margin: 0px auto;
}
#footer{
position: relative;
width: 90%;
height: 120px;
margin: 0px auto;
background: #222;
box-shadow: -2pt 1pt 3px #888;
margin-top: 15px;
padding-bottom: 30px;
}
ul.menu {
z-index: 102;
position: absolute;
bottom: 0px;
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
	text-shadow:0px 1px 1px black;
box-shadow: 0pt 2pt 8px rgba(80, 80, 80, 0.5);
}

ul.menu li {
    display: table-cell;
    float: none;
}

ul.menu li a {
    display: block;
    padding: 15px;
    background: #005923;
    font-family: Tahoma;
    font-size: 1.0em;
    color: #fff;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
}
ul.menu li a:hover {
    background: #83CF81;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
ul.nav {
box-shadow: 1pt 2pt 7px #AAA;
padding: 0px; margin: 0px 0px 10px 0px;
}
ul.nav li{
list-style: none; 
}

ul.nav li a {
    display: block;
    padding: 12px 20px;
    background: #FAFAFA;
	border-top: 1px solid #DDD;
    font-size: 1.0em;
    color: #005923;
    text-decoration: none;
}
ul.nav li a:hover {
    background: #005923;
	color: #FFF;
	text-shadow:0px 1px 0px black;
    }
div.name{
position:absolute;
width:210px;
top:30px;
left:70px;
}
div.name div{
position:absolute;
top:22px;
left:205px;
width: 35px;
    height: 17px;
    background: #333;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}
div.name div span:nth-child(1){
position:absolute;
top:1px;
left:2px;
font-size: 12px;
color:#FFFFFF;
}
div.name span:nth-child(1){
color: #00598C;
}
div.name span:nth-child(2){
position:absolute;
top:31px;
left:1px;
font-size: 17px;
letter-spacing: 0.13em;
color:#000000;
font-weight: normal;
}
div.name a{
display:block;
text-decoration:none;
color: #008C37;
font-size:2.1em;
font-weight:bold;
}

div.name:hover div{
background: #FF4400;
}
div.name:hover span:nth-child(2){
border-bottom:1px solid #00598C
}

div.under{
width: 100%;
margin: 30px auto;
text-align: center;
float: left;
}

div.top{
float: left;
margin: 0px 20px 10px 20px;
}
div.toprub{
width: 100%;
margin: 20px 0px;
}
div.lessons{
float:left;
width: 97%;
padding:20px 0px;
border-bottom: 1px solid #CCCCCC
}
#content a{
color: #025DC1;
text-decoration: none;
font-weight:bold;
}
#content a:hover{
border-bottom:1px solid #025DC1;
}
div.articles{
line-height: 1.5;
}

div.articles ul{
display: grid;
list-style-type: none;
}
div.articles ul li{
list-style-position:inside;
padding-top: 2px;
line-height: 1.5;
background-color:#FCFCFC;
padding-left: 8px;
}
div.articles ol {
	padding: 10px;
	list-style: none;
	counter-reset: point; 
}
div.articles ol li{
	margin-bottom: 10px;
	position: relative;
border: 1px solid #CECECE;
padding: 3px 10px 7px 10px;
}
div.articles li{
margin-bottom:8px;
background-color:#FAFAFF;
padding:0px 5px;
}

div.articles ul li:before{
background:#0099CC;
	    width:10px;
	    height:10px;
	    content:"";
	    float:left;
		margin:8px 8px 0px 0px;

}
div.articles ol li:before {
content: counter(point); 
	counter-increment: point 1;
	font-size: 15px;
	position: absolute;
	left: 0px;
	top: -1px;
	background: #FF4400;
	width: 18px;
	padding: 1px 0;
	color: #fff;
	text-align: center;
	margin:0px 8px 0px -24px;
	border: 1px solid #CC4400;
}
	
h1{
font-weight: 500;
font-size:150%;
margin:25px 0px 0px 0px;
color: #EC5300;
text-align: center ;
text-transform: uppercase;
}

h2{
color: #EC5300;
font-weight: 500;
font-size:120%;
text-align: center ;
margin: 25px 0px 0px 0px;
text-transform: uppercase;
clear: both;
}
p{
margin-top:12px;
}
img.screen{
display: block;
margin: 0px auto 20px auto;
max-width: 100%;
border: 0px;
}

img.intro{
float:left; width: 200px; height: 150px; margin-right: 20px;
}
#content ol{
margin-left:50px;
margin-bottom:12px;
}
#content ul{
margin-left:50px;
margin-bottom:12px;
}
div.articles table{
border: 0px;
border-collapse: separate;
border-spacing: 0px;
overflow-x: auto;
margin: 20px auto;
}
div.articles table td{
border-bottom: 1px solid #C0C0C0;
padding: 7px;
}

div.articles table tr:nth-child(1) {
    background: #31869B;
    font-weight: bold;
	color: #FFF;
	text-shadow:0px 1px 1px black;
	text-align: center;
} 
div.articles table tr:nth-child(2n) {
    background: #EDEDED;
} 

span.i{
font-style:italic;
font-size:95%;
}
span.b{
font-weight:bold;
}
span.u{
text-decoration:underline;
}
div.up{
position:absolute;
top:50px;
left:85%;
width: 40px;
    height: 40px;
    background: #2EC139 ;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;

}
div.up a{
position:absolute;
display: block;
top:-2px;
left:3px;
color:#FFFFFF;
font-size:2.0em;
text-decoration:none;
}

#content a.back{
display: inline-block;
padding: 7px 10px;
color: #FFF; 
background: #E53D00;
float:left;
}

#content a.back:hover{
border:0px;
background: #FF4400;
}

#content span.page{
display: inline-block;
padding: 7px;
}

#content a.next{
display: inline-block;
padding: 7px 10px;
color: #FFF; 
background: #E53D00;
float:right;
}
#content a.next:hover{
border:0px;
background: #FF4400;
}

#content span.back{
display: inline-block;
padding: 7px 10px;
color: #FFF; 
background: #F1CDB7;
float:right;
font-weight: bold;
}
div.pages{
width:250px;
margin:20px auto 20px auto;
text-align: center;
}
#content span.select{
display: inline-block;
padding: 8px 17px;
color: #FFF; 
background: #F1CDB7;
font-weight: bold;
margin: 5px 3px 2px 0px;
}
#content a.pagerub{
display: inline-block;
padding: 8px 15px;
color: #FFF; 
background: #E53D00;
margin: 5px 3px 2px 0px;
}
#content a.pagerub:hover{
border:0px;
background: #FF4400;
}

input.formula{
width:99%;
padding: 5px;
border: 1px solid #C0C0C0;
outline: 0px none;
background: transparent -moz-linear-gradient(center top , #FFF, #EEE 1px, #FFF 25px) repeat scroll 0% 0%;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);	
color:#013D7D;
}
div.soc{
background: #fff;
border: 1px solid #FFF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 30px;
padding: 5px;
width: 257px;
margin: 0px auto;
position: relative;
top: 20px;
}

div.adv{
  padding: 20px 0px;
  text-align: center;
}

div.adv a{
text-decoration: none;
color: #3366BB;
font-weight: 700;
}

div.adv a:hover{
text-decoration: underline;
}

p.txtc{
text-align: center;
}

@media screen and (min-width: 980px) and (max-width: 1240px){
#content{width:67%; padding: 0px 4% 50px 4%;}
#header{ width:100%; margin: 0px auto 0px auto; height:150px; }
#wrapper{ width:100%;}
#footer{ width:100%;}
ul.menu li a {padding:12px 4px;}
div.articles { overflow: hidden; }
div.lang{top: 5px;}
.instblock{left: 43%;}
}
@media screen and (min-width: 680px) and (max-width: 980px){
#content{width:92%; padding: 0px 3% 50px 5%;}
#sidebar{width:98%; margin: 0px 1%;}
#header{ width:100%; margin: 0px auto 0px auto; height:170px;}
#wrapper{ width:100%;}
#footer{ width:100%;}
div.under{width:100%;}
ul.menu li a { padding:12px 4px;}
form.subscribeform { margin-left: 20px;}
div.name{left:40px; top: 40px;}
div.articles { overflow: hidden; }
ul.nav li a{ display: inline; line-height: 2.0; font-size: 1.0em; padding: 3px 20px; white-space: nowrap;}
ul.nav li{display: inline;}
div.lang{top: 5px;}
.instblock{left: 50%; top: 45px;}
}

@media screen and (min-width: 320px) and (max-width: 680px){
#content{width:97%;  padding: 0px 1% 50px 1%;}
#sidebar{width:97%; margin: 0px 1%;}
#header{ width:100%; margin: 0px auto 0px auto; height:200px;}
#wrapper{ width:100%;}
#footer{ width:100%;}
div.under{width:100%;}
div.name{left:40px; top: 135px;}
ul.menu { display:none; }
form.subscribeform { display:none; }
div.articles { overflow: hidden; }
img.screen{ max-width:300px; }
ul.nav li a{ display: inline; line-height: 2.0; font-size: 1.0em; padding: 3px 20px; white-space: nowrap;}
ul.nav li{display: inline;}
div.lang{top: 5px;}
.instblock{left: 20%; top: 50px;}
div.up {top: 100px;}
div.adv img{ width: 300px; }
div.adv { padding: 40px 0px; }
}

@media screen and (max-width: 320px){
#content{width:98%; padding: 0px 1% 50px 1%;}
#sidebar{width:97%; margin: 0px 1%;}
#header{ width:100%; margin: 0px auto 0px auto; height:210px;}
#wrapper{ width:100%;}
#footer{ width:100%;}
div.under{width:100%;}
div.name{left:40px; top: 145px;}
ul.menu { display:none; }
form.subscribeform { display:none; }
div.articles { overflow: hidden; }
img.screen{ max-width:300px;}
ul.nav li a{ display: inline; line-height: 2.0; font-size: 1.0em; padding: 3px 20px; white-space: nowrap;}
ul.nav li{display: inline;}
div.lang{top: 5px;}
.instblock{left: 20%; top: 55px;}
div.up {top: 80px;}
div.adv { display:none; }
}