body a{
    /*text-decoration:none*/;
    color:#000099;
}
body a:hover{
	text-decoration:underline;
}

/* Hide Google Adsense Auto Ads from top of the page*/
body > .google-auto-placed{
    visibility: hidden;
    display: none;
}

ul, ol {
    font-size: 15px;
}
h1 {
    font-size: xx-large;
    color:#000099;
}
h2{
    font-size: x-large;
    color:#000099;
    margin-bottom:0.2rem;
    margin-top:1rem;
}
h3{
    font-size:large;
    color:#0000CC;
    margin-top:2rem;
    margin-bottom: 0;
    padding-bottom: 0;
    font-style:italic;
    font-weight:bold;
}
/* used in sabina change_history.html */
h3 small {
    line-height: 2rem;
}
h3 small:before {
    content :'Дата изменения:';
    padding-right: 0.5rem;
}
p{    
    /*font-size: 15px;*/
    letter-spacing: 0;
    font-weight: 400;
    line-height: 1.7rem;
}
#center, .center {
    text-align: center;
}
img{
    margin-top: 1rem;
}
.img_left{
	margin-right:1rem;
	float: left;
}
.img_right{
	float:right;
	margin-left:1rem;
}  
table{
    white-space: normal!important;
}
table td a.button:hover{
    text-decoration: none;
}

.video, .video embed {        
    width: 640px;
    height: 360px;
}

#adsense_right{
	display:block;
	float:right;
	clear:right;
	margin-left:0.5em;
}

#adsense_left {
	display:block;
	float:left;
	margin-right:0.5em;
}
div .card_fluid{
    max-height: 95vh!important; 
    max-width: 90vw; 
    width: auto;
}
.card .img_small {
    margin: 0.5rem;
    height: 80px;
}

@media only screen and (max-width: 1279px) {
    .img_left, .img_right {
        max-width: 60%;        
    } 
    img {
        max-width: 100%;
        height: auto;
    } 
    #adsense_left, #adsense_right{
        visibility: hidden;
        display: none;
     }
}

@media screen and (max-width: 767px) {
  header .logo {
    padding: 0.5rem;
  }  
}

@media only screen and (max-width: 650px) {
/*    p{
        font-size: 18px;
    }*/
    .video, .video embed {        
        width: 400px;
        height: 300px;
    }
    .img_left, .img_right{
        float:none;
        max-width: 100%;
        margin-left:0;
        margin-right:0;
    }    
    .card .img_small {
        height: auto;
        max-height: 150px;
    }
}

@media only screen and (max-width: 500px) {    
    .img_left, .img_right {
        margin: 1rem 0 0;
    } 
    img {
        max-width: 100%;
        height: auto;
    }    
    h1 {
        font-size: 32px;
    }
    h6{
      border-bottom: 1px dashed lightgray;  
    }
}

.gray{
    color: gray;
}
.lang, .lang a {
    font-weight: bold;
}

.img_caption{
    font-size:small;
    font-weight:bold;
}
 
.path {
    padding-top: 8px;
}

.path a{
    font-size: 1.1rem;
    text-decoration: underline;
    color:#ff4081;
}

.clear_left {
    clear: left;
}

.clear_right {
    clear: right;
}

.padding_right_398{
  padding-right: 39.8px;
}

.padding-left-right-0 {
    padding-left: 0;
    padding-right: 0;
}

.padding-0 {
    padding: 0;
}

.padding-16{
    padding: 16px;
}
.padding-bottom{
    padding: 0 0 16px 0;
}
.pull_right {
    float : right;
}
.float_left{
    float: left;
}
.flow_root {
    display: flow-root;
}

.margin-left-16 {
    margin-left : 16px;
}

.margin-top-16 {
    margin-top : 16px;
}

.margin-bottom-16 {
    margin-bottom : 16px;
}

.margin-8{
    margin: 8px;
}
.margin-left-right-8 {
    margin-left: 8px;
    margin-right: 8px;
}

.margin-left-right-4 {
    margin-left: 4px;
    margin-right: 4px;
}

.logo_img{
    margin: 0 0 0 0.3rem;
    padding: 0;
    height: 3.8rem;
    float: left;
}

.logo_text {
    color: #fff;
    font-size: 1.7rem;
    font-weight: normal;
    line-height: 3.5rem;
}

header .button{
    line-height: 3.5rem;
}

header a:hover, #modal-content a.button:hover{
    text-decoration: none;
}

.item-hover:hover{
    color: #fff;
}

.social-group .social{
    margin-left: 16px;
}

.social {
    display:inline-block;
    width: 32px;
    height: 32px;
    margin-top: 4px;
}

.tag a {    
    color: #fff;    
}
.tag a:hover {
    text-decoration: none;
}
.copyright{
    display:box; 
    float:right;
}

.copyright p{
    font-size: 1.1rem;
}
.fb {
    background: url("/img/fb.gif") no-repeat left center;
}
.fb:hover{
    background-image: url("/img/fb-hover.gif");
}
.in {
    background: url("/img/in.gif") no-repeat left center;
}
.in:hover{
    background-image: url("/img/in-hover.gif");
}
.tw {
    background: url("/img/tw.gif") no-repeat left center;
}
.tw:hover{
    background-image: url("/img/tw-hover.gif");
}
/* --------------- navigation --------------- */
.nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

a.nav_link {
    display: block;
    padding: 16px 20px;
    color : #333;
    font-size: 1rem;
}

.nav_link:hover{
    text-decoration: none;
    background-color: #737fd4;
    color : #fff;
}

/* ---------------- accordion --------------- */
.accordion {
    font-size: 1rem;
    cursor: pointer;  
    padding: 16px 20px;    
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    background-color: #e0e0e0;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.accordion.active, .accordion:hover {
    background-color: #737fd4;
    color : #fff;
}

/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 0 20px;    
    display: none;
    transition: 0.6s ease-in-out;
    background-color: #eee; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#737fd4, #8f98f1, #abb3ff, #ddd, #eee); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#737fd4, #8f98f1, #abb3ff, #ddd, #eee); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#737fd4, #8f98f1, #abb3ff, #ddd, #eee); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#737fd4, #8f98f1, #abb3ff, #e0e2ff); /* Standard syntax */
}

/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
div.panel.show {
    display: block;
}

div.panel ul {
    list-style: none;
    margin: 0;
}
div.panel ul li {    
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0.04em; 
    min-height: 40px;
    box-sizing: border-box;
    overflow: hidden;
}

div.panel ul li a {
    display: block;
    width:100%; 
    text-decoration:none;
    color: #000;    
}

div.panel ul li a:hover {
    color: #ff4081;    
}
/*  end of accordion */

.code{
    border: 1px solid #333333;
    padding: 0.2em 0.5em;
    display: block;
    font-family:"Courier New", Courier, monospace;
	white-space: nowrap;
	overflow: auto;
}

.formula{
    border: none;
    padding: 0.2em 0.5em;
    text-align: center;
    line-height: 200%;
    display: block;
    overflow: auto;
}

.triple_line{
	line-height: 400%;
}

.red{
    color:#FF0000;
    font-weight:bold;
}
.green{
    color: green;
    font-weight:bold;
}

.input_small {
    display: inline;
    width: 30px;
}
.map {
    margin-bottom: 1.5rem;
}
.map a {
	text-decoration:none;
}
.map ul {
    list-style: none;
    padding-left:1.5rem;
    line-height: 2;	
    margin:0;        
}
.map ul a {
    font-size: 1.7rem;	
}

.map ul ul {    
    padding-bottom: 1.5rem;
    line-height: 1.5;
}
.map ul ul a {
    font-size:1.5rem;
}

.map ul ul ul {
    padding-bottom: 0;
}
.map ul ul ul a{
   font-size:1.2rem;
 }

.search input[name="sa"], .search input[name="go"]{
    visibility: hidden;
    display: none;
}