Common.css — различия между версиями
Admine2 (обсуждение | вклад) |
Admine2 (обсуждение | вклад) |
||
| Строка 1905: | Строка 1905: | ||
} | } | ||
@media only screen and (max-width: 500px) { | @media only screen and (max-width: 500px) { | ||
| + | .scrollup{ | ||
left:0; | left:0; | ||
right:calc(100vw - 20px); | right:calc(100vw - 20px); | ||
} | } | ||
} | } | ||
Версия 14:26, 13 июля 2018
/* Размещённый здесь CSS будет применяться ко всем темам оформления */
a .oo-ui-buttonElement-button [rel=*"nofollow"] {
display:none !important;
}
.sideBarNavMenu li:first-child {
display:none !important;
}
/* Отключение отображения пространства имен */
h4.namespace.label { display:none; }
/* Конец Отключение отображения пространства имен */
/* Выравнивание для блоков внутри maintext */
ul[class*="block-grid"] {
text-indent:0;
}
.kns-content p {
text-indent:0;
}
.sbstyle {
text-indent:0 !important;
}
/* Конец Выравнивание для блоков внутри maintext */
/* Отключение автосодержания */
/* .toc, #toc { display: none; } */
/* Конец Отключение автосодержания */
/* Изменение стиля слайдшоу для страницы химии */
.orbit-container .orbit-slides-container > * .orbit-caption-sn{
position: relative;
background-color: rgba(51,51,51,0.8);
color: #FFFFFF;
font-size: 0.875em;
padding: 0.625em 0.875em;
width: 100%;
}
/* Конец Изменение стиля слайдшоу для страницы химии */
/* Фон для предметных страниц */
.chem-bg{
background-image: url(/mediawiki/images/f/f7/Chem-fon.png);
background-size: 300px;
background-repeat: repeat;
}
.geo-bg{
background-image: url(/mediawiki/images/4/42/Geo_back.png);
background-size: 300px;
background-repeat: repeat;
}
.bio-bg{
background-image: url(/mediawiki/images/f/f0/Bio_bg.png);
background-size: 250px;
background-repeat: repeat;
}
.mat-bg{
background-image: url(/mediawiki/images/0/0d/Mat-bg.png);
background-size: 300px;
background-repeat: repeat;
}
.en-bg{
background-image: url(/mediawiki/images/1/18/Enbg.png);
background-size: 300px;
background-repeat: repeat;
}
.his-bg{
background-image: url(/mediawiki/images/1/1e/His_bg.png);
background-size: 250px;
background-repeat: repeat;
}
.mir-bg{
background-image: url(/mediawiki/images/d/de/Mir_bg.png);
background-size: 300px;
background-repeat: repeat;
}
.kyr-bg{
background-image: url(/mediawiki/images/7/7a/Kyr_bg.png);
background-size: 300px;
background-repeat: repeat;
}
.phis-bg{
background-image: url(/mediawiki/images/6/68/Phis_bg.png);
background-size: 300px;
background-repeat: repeat;
}
/* Конец фон для предметных страниц */
.textblock{
display: -webkit-box;
text-align: center;
text-indent:0;
background-color: rgba(0,76,93,.1);
color:#191919;
padding:5px;
margin: 5px auto;
max-width:90%;
font-weight: bolder;
position: relative;
z-index: 2;
cursor: pointer;
transition: .5s linear;
}
.textblock:hover {
background-color: rgba(0,76,93,.3);
-webkit-transform: scale(1.07);
transform: scale(1.07);
}
/* Буквица первая буква абзаца большая */
.firstcharacter {
color: #f47521;
float: left;
font-family: Georgia;
font-size: 75px;
line-height: 60px;
padding-top: 4px !important;
padding-right: 12px !important;
padding-left: 3px !important;
text-indent: 0px;
}
/* Текст для содержательной части страниц */
.maintext {
padding: 10px;
padding-left:13px;
text-indent: 0px;
text-align: justify;
}
.maitext p {
text-indent:20;
}
.maintext h2, h3, h4, h5{
text-indent:0px;
text-align: left;
}
/* Конец текст для содержательной части страниц */
.metall {
color: blue;
font-family: Georgia;
}
.blocktext {
display: -webkit-box;
text-align: center;
text-indent:0;
background-color: rgba(0,76,93,.1);
color:#191919;
padding:5px;
margin: 5px auto;
max-width:90%;
font-weight: bolder;
position: relative;
z-index: 2;
cursor: pointer;
transition: .5s linear;
}
.blocktext:hover {
background-color: rgba(0,76,93,.3);
-webkit-transform: scale(1.07);
transform: scale(1.07);
}
.nume {
float: left;
display: inline-block;
display: inline;
width: 32px;
text-align: center;
margin: -3px 10px 5px 0;
padding: 4px 4px 3px 4px;
background-color: #6ca7d8;
color: #fff;
box-shadow: 1px 1px 2px #bbb;
-moz-box-shadow: 1px 1px 2px #bbb;
-webkit-box-shadow: 1px 1px 2px #bbb;
font-family: arial, sans-serif;
font-weight: bold;
font-size: 20px;
clear: both;
}
/* Библиография */
.biblio {
padding: 0px;
text-indent: 0px;
text-align: justify;
font-size: 13px;
}
/*Подсветка блоков содержания*/
.cutok {
display:block;
background-color:#c1c1c1;
padding-top:10px;
padding-bottom:10px;
text-align:center;
text-indent:0px;
margin-top: -10px;
margin-bottom: 30px;
margin-right:-10px;
}
.cutok a{
text-decoration: none;
color:#ffffff;
font-size: calc(15px + (18 - 15) * ((100vw - 300px) / (1600 - 300)));
font-family:Arial Narrow;
text-indent:0px;
padding-top:10px;
padding-bottom:10px;
padding-left:15px;
padding-right:15px;
}
.cutok :hover{
color:#004c5d;
}
.light{
background-color: #f47521;
text-align: center;
text-indent: 0px;
padding: 3px;
margin: 3px;
font-size: 16px;
text-transform: uppercase;
font-weight: normal;
display: none;
}
.resettext {
padding: 0px;
text-indent: 0px;
text-align: left;
}
/*класс таблиц*/
.mw-datatable {
border-collapse: collapse;
}
.mw-datatable,
.mw-datatable td,
.mw-datatable th {
border: 1px solid #a2a9b1;
padding: 5px;
}
.mw-datatable th {
background-color: #ddf;
text-align: center;
font-weight:bold;
}
.mw-datatable td {
background-color: #fff;
text-align: justify;
}
.mw-datatable tr:hover td {
background-color: #eaf3ff;
}
.tbtext {
padding: 0px;
text-indent: 0px;
}
.button17 {
display: inline-block;
font-size: 13px;
color: rgb(205,216,228);
text-decoration: none;
padding: .2em .8em;
outline: none;
border-right: 1px solid rgba(13,20,27,.5);
border-top: 1px solid rgba(270,278,287,.01);
background-color: rgb(64,73,82);
background-image:
radial-gradient(1px 60% at 0% 50%, rgba(255,255,255,.3), transparent),
radial-gradient(1px 60% at 100% 50%, rgba(255,255,255,.3), transparent),
linear-gradient(rgb(64,73,82), rgb(72,81,90));
}
.button17:hover {
background-image:
radial-gradient(1px 60% at 0% 50%, rgba(255,255,255,.3), transparent),
radial-gradient(1px 60% at 100% 50%, rgba(255,255,255,.3), transparent),
linear-gradient(rgb(51,60,67), rgb(58,65,72));
}
.button17:active {
color: rgb(245,247,250);
border-top: 1px solid rgb(67,111,136);
background-image:
linear-gradient(rgb(46,95,122), rgb(36,68,92));
}
/*Поворот текста на 180 градусов*/
.rottext{
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
font-style:italic;
margin-top:-15px;
font-size:90%;
}
/*меню на главных страницах*/
.itemDroWrap{
width: 100%;
text-align: center;
}
.displayInline{
display: inline-block;
}
.itemDro{
text-align: center;
display:inline-block;
position: relative;
display: flex;
flex-direction: column-reverse;
}
.itemDro img{
width: 80px;
height: 80px;
object-fit: cover;
border-radius:50%;
overflow:hidden;
margin: 0 auto;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.itemDro a{
text-decoration: none;
color: inherit;
}
.itemDro h2{
color:#519e83;
font-size:20px;
margin-bottom: 0;
padding-bottom: 10px;
border-bottom: 0px;
}
.itemDro h2:after{
content:"";
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 9px solid;
display:inline-block;
margin-left:5px;
border-bottom:none !important;
}
.itemDroBox{
cursor: pointer;
}
.itemDroBox:hover ul{
display: block;
}
.itemDroBox:hover + p img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
}
.itemDroBox ul{
display: none;
min-width: 100%;
background: #f7edbc;
border-left:2px solid #519e83;
padding:10px;
position: absolute;
margin: 0;
z-index:2;
}
.itemDroBox li{
width: 100%;
list-style:none;
padding: 0;
text-align: left;
text-indent: 0;
}
.itemDroBox li a{
color:#5c5c5c;
text-decoration:none;
font-size:16px;
transition:all 0.3s;
white-space: nowrap;
}
.itemDro p{
text-indent: 0 !important;
}
.itemDroBox li a:hover{
color:#f47521;
}
/*конец меню на главных страницах*/
/*Подсказки для английского языка*/
span.tip{
color: #0066a1;
text-decoration: none;
}
span.tip:hover {
color: #f47521;
position: relative;
}
span.tip[data-fancybox-title]:hover:after {
content: attr(data-fancybox-title);
max-width:250px;
padding: 4px 8px;
color: #4d4d4d;
position: absolute;
border-left: 4px solid #0066a1;
left: 0;
top: 100%;
z-index: 20px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 1px 1px 4px #222;
background:#f7edbc;
text-indent:0px;
text-align:left;
}
/*Конец подсказки для английского языка*/
/*Этикетки на главные страницы*/
.lblg,
.lblb,
.lblm,
.lblml,
.lblp,
.lblc,
.lblh,
.lblkl,
.lblen
{border-radius: 10px; display:block-inline; min-height:90px; background-color:#e8e8e8; padding:20px 25px; color:#505050; text-indent:0px; text-align:justify; position:relative; margin-left:67px; margin-right:30px; margin-bottom:15px;}
.lblg:before{content: url(/mediawiki/images/1/1d/Geolbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;}
.lblb:before{content: url(/mediawiki/images/0/03/Biolbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;}
.lblm:before{content: url(/mediawiki/images/a/a8/Matlbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;}
.lblml:before{content: url(/mediawiki/images/8/8f/Mirlbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;}
.lblp:before{content: url(/mediawiki/images/9/9f/Phlbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;}
.lblc:before{content: url(/mediawiki/images/1/1d/Chlbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;}
.lblh:before{content: url(/mediawiki/images/f/f5/Hislbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;}
.lblkl:before{content: url(/mediawiki/images/7/7a/Kllbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;}
.lblen:before{content: url(/mediawiki/images/2/2a/Enlbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;}
/*Конец этикетки на главные страницы*/
/*Интерактивная карта*/
.distribution-map div, .distribution-map img {
position: relative;
padding:0px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-indent:0px;
}
.distribution-map h1 {
font-size: 36pt;
}
.distribution-map h2 {
font-size: 24pt;
}
.distribution-map h3 {
font-size: 18pt;
}
.distribution-map h4 {
font-size: 16pt;
}
.distribution-map h5 {
font-size: 14pt;
}
.distribution-map h6 {
font-size: 12pt;
}
.distribution-map p {
font-size: 10pt;
margin-bottom: 12pt;
text-indent:0px;
text-align:justify;
}
.distribution-map a {
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
font-family: "Roboto Condensed", Helvetica, sans-serif;
font-size: 60%;
text-transform: uppercase;
text-decoration: none;
color: #dff3fd;
}
.distribution-map a:visited {
color: #ffcdac;
}
.distribution-map li.active a, .distribution-map a:hover, .distribution-map a:active {
color: #f47521;
}
.distribution-map .centered {
position: absolute;
overflow: scroll;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.distribution-map .centered-y {
/* position: absolute; */
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.distribution-map .centered-y img{
max-width: 100%;
}
.distribution-map {
position: relative;
background-image: url(/mediawiki/images/1/11/M7a_Uku_S.png);
background-repeat: no-repeat;
background-size: cover;
/* padding: 20px;*/
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
}
.distribution-map > p > img {
width: 100%;
position: relative;
margin: 0;
padding: 0;
z-index: 0;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
z-index: 1;
position: absolute;
overflow: hidden;
width: 14px;
height: 14px;
border-radius: 7px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
background: rgba(26, 26, 26, 0.85);
border: 2px solid #0066a1;
}
.distribution-map .map-point .content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
width: 100%;
height: 100%;
left: 50%;
padding: 10px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
overflow: auto;
}
.distribution-map .map-point:hover, .distribution-map .map-point:focus {
margin: 0;
padding: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
width: 300px;
height: 350px;
color: #e5e5e5;
z-index: 2;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}
.distribution-map .map-point:hover .content, .distribution-map .map-point:focus .content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0s, 0s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
overflow: auto;
}
.distribution-map .map-point:hover .content a:hover, .distribution-map .map-point:hover .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:hover {
color: #afe1fa;
}
.distribution-map .content::-webkit-scrollbar-button {
background-image:url('');
background-repeat:no-repeat;
width:5px;
height:0px
}
.distribution-map .content::-webkit-scrollbar-track {
background-color:#cfe9ff;
}
.distribution-map .content::-webkit-scrollbar-thumb {-webkit-border-radius: 0px;border-radius: 0px;background-color: #0066a1;}
.distribution-map .content::-webkit-scrollbar-thumb:hover{
background-color:#0066a1;
}
.distribution-map .content::-webkit-resizer{
background-image:url('');
background-repeat:no-repeat;
width:2px;
height:0px
}
.distribution-map .content::-webkit-scrollbar{
width: 5px;
}
.avtor {
font: normal bold 150% Arial, sans-serif;
}
/*Конец интерактивная карта*/
/*Интерактивная карта KG*/
.kg-distribution-map div, .kg-distribution-map img {
position: relative;
padding:0px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-indent:0px;
}
.kg-distribution-map p {
font-size: 10pt;
margin-bottom: 12pt;
text-indent:0px;
text-align:justify;
}
.kg-distribution-map a {
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
font-family: "Roboto Condensed", Helvetica, sans-serif;
font-size: 60%;
text-transform: uppercase;
text-decoration: none;
color: #dff3fd;
}
.kg-distribution-map a:visited {
color: #ffcdac;
}
.kg-distribution-map li.active a, .kg-distribution-map a:hover, .kg-distribution-map a:active {
color: #f47521;
}
.kg-distribution-map .centered {
position: absolute;
overflow: scroll;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.kg-distribution-map .centered-y {
/* position: absolute; */
width: 100%;
/*top: 50%;*/
/*-webkit-transform: translateY(-50%);*/
/*transform: translateY(-50%);*/
}
.kg-distribution-map .centered-y img{
max-width: 100%;
}
.kg-distribution-map {
position: relative;
background-image: url(/mediawiki/images/e/e6/Kg-map.png);
background-repeat: no-repeat;
background-size: cover;
/* padding: 20px;*/
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
}
.kg-distribution-map > p > img {
width: 100%;
position: relative;
margin: 0;
padding: 0;
z-index: 0;
}
.kg-distribution-map .map-point {
cursor: pointer;
outline: none;
z-index: 1;
position: absolute;
overflow: hidden;
width: 14px;
height: 14px;
border-radius: 7px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
background: rgba(26, 26, 26, 0.85);
border: 2px solid #0066a1;
}
.kg-distribution-map .map-point .content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
width: 100%;
height: 100%;
left: 50%;
padding: 10px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
overflow: auto;
}
.kg-distribution-map .map-point:hover, .kg-distribution-map .map-point:focus {
margin: 0;
padding: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
width: 300px;
height: 350px;
color: #e5e5e5;
z-index: 2;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}
.kg-distribution-map .map-point:hover .content, .kg-distribution-map .map-point:focus .content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0s, 0s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
overflow: auto;
}
.kg-distribution-map .map-point:hover .content a:hover, .kg-distribution-map .map-point:hover .content a:active, .kg-distribution-map .map-point:focus .content a:hover, .kg-distribution-map .map-point:focus .content a:hover {
color: #afe1fa;
}
.kg-distribution-map .content::-webkit-scrollbar-button {
background-image:url('');
background-repeat:no-repeat;
width:5px;
height:0px
}
.kg-distribution-map .content::-webkit-scrollbar-track {
background-color:#cfe9ff;
}
.kg-distribution-map .content::-webkit-scrollbar-thumb {-webkit-border-radius: 0px;border-radius: 0px;background-color: #0066a1;}
.kg-distribution-map .content::-webkit-scrollbar-thumb:hover{
background-color:#0066a1;
}
.kg-distribution-map .content::-webkit-resizer{
background-image:url('');
background-repeat:no-repeat;
width:2px;
height:0px
}
.kg-distribution-map .content::-webkit-scrollbar{
width: 5px;
}
/*Конец интерактивная карта KG*/
/*Подписи к картинкам*/
/* Конец Подписи к картинкам*/
/* Красивые titles */
#tooltip{
background:#000;
color:#f3f3f3;
text-align:center;
padding:6px 0;
position:absolute;
max-width:250px;
z-index:9999;
display:none;
border-radius:3px;
box-shadow:4px 4px 8px rgba(0, 0, 0, 0.3);
padding:5px 8px;
font-size:12px;
text-shadow:none;
}
#tooltip:before{
position: absolute;
width: 0;
height: 0;
line-height: 0;
border: 6px dashed #000;
top: -6px;
left:15px;
border-bottom-style: solid;
border-top: none;
border-left-color: transparent;
border-right-color: transparent;
content:'';
}
/* Конец Красивые titles */
/*Перечеркнутый шрифт для химии ионов*/
.ion{position:relative;}
.ion:before {
content:"";
position:absolute;
height:0;
width:105%;
bottom:50%;
left:-5%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: black;
-moz-transform:rotate(-20deg); /* Для Firefox */
-ms-transform: rotate(-20deg); /* Для IE */
-webkit-transform: rotate(-20deg); /* Для Safari, Chrome, iOS */
-o-transform: rotate(-20deg); /* Для Opera */
transform: rotate(-20deg);
}
/*Конец Перечеркнутый шрифт для химии ионов*/
/*разложение солей для химии*/
.razlogenie{
position:relative;
}
.razlogenie span{
position:absolute;
width:200%;
left:0;
top:170%;
-o-transform: translate(-25%);
-ms-transform: translate(-25%);
-moz-transform: translate(-25%);
-webkit-transform: translate(-25%);
transform: translate(-25%);
}
.arr1{
position:absolute;
font-size:1.2em;
top:-77%;
left:40%;
-moz-transform:rotate(-20deg); /* Для Firefox */
-ms-transform: rotate(-20deg); /* Для IE */
-webkit-transform: rotate(-20deg); /* Для Safari, Chrome, iOS */
-o-transform: rotate(-20deg); /* Для Opera */
transform: rotate(-20deg);
}
.arr2{
position:absolute;
font-size:1.2em;
top:-105%;
left:20%;
-moz-transform:rotate(20deg); /* Для Firefox */
-ms-transform: rotate(20deg); /* Для IE */
-webkit-transform: rotate(20deg); /* Для Safari, Chrome, iOS */
-o-transform: rotate(20deg); /* Для Opera */
transform: rotate(20deg);
}
/*Конец разложение солей для химии*/
/* Инфографика по химии таблица растворимости */
.info{position:relative;}
#disinfo *{margin:0; padding:0;}
#disinfo {
position: absolute;
padding:10px;
background: #88b7d5;
border: 2px solid #c2e1f5;
width:200px;
min-height:100px;
display:block-iline;
z-index:22;
}
#disinfo:after, #disinfo:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
#disinfo:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #88b7d5;
border-width: 20px;
margin-left: -20px;
}
#disinfo:before {
border-color: rgba(194, 225, 245, 0);
border-top-color: #c2e1f5;
border-width: 23px;
margin-left: -23px;
}
#disinfo span {
margin-top:-5px;
font-weight: bold;
color:#160039;
font-size:larger;
}
#disinfo p {
font-weight: bold;
color:#001939;
font-size:12px;
}
.notex {
color:#5c5c5c !important;
}
/* Конец Инфографика по химии таблица растворимости */
/* Инфографика по химии Классификация химреакций */
.CCR {
position:relative;
display:block;
margin-bottom: 175px;
}
.ipos{
display:none;
}
.CHRinfo{
position:absolute;
display:block;
width:41%;
height:320px;
overflow-y: auto;
background-color:#ced0ff;
border-radius: 10px;
padding:10px;
z-index:1;
top:0;
left:52%;
opacity:0;
transition: .5s;
-moz-transform: translateX(-50%); /* Для Firefox */
-ms-transform: translateX(-50%); /* Для IE */
-webkit-transform: translateX(-50%); /* Для Safari, Chrome, iOS */
-o-transform: translateX(-50%); /* Для Opera */
transform: translateX(-50%);
}
.CHRinfo::-webkit-scrollbar-button {
background-image:url('');
background-repeat:no-repeat;
width:3px;
height:10px
}
.CHRinfo::-webkit-scrollbar-track {
background-color:#ced0ff;
}
.CHRinfo::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background-color: #0066a1;
}
.CHRinfo::-webkit-scrollbar-thumb:hover{
background-color:#0066a1;
}
.CHRinfo::-webkit-resizer{
background-image:url('');
background-repeat:no-repeat;
width:2px;
height:0px
}
.CHRinfo::-webkit-scrollbar{
width: 3px;
}
.closeinf{
width:20px;
position:absolute;
top:0%;
left:73%;
z-index:0;
opacity:0;
transition: .5s;
}
.ffn{
max-width:300px;
position:relative;
left:50%;
z-index:1;
-moz-transform: translateX(-50%); /* Для Firefox */
-ms-transform: translateX(-50%); /* Для IE */
-webkit-transform: translateX(-50%); /* Для Safari, Chrome, iOS */
-o-transform: translateX(-50%); /* Для Opera */
transform: translateX(-50%);
}
.element {
max-width:50px;
position:absolute;
z-index:5;
cursor:pointer;
}
@-webkit-keyframes swing {
15% {
-webkit-transform: translateX(9px);
transform: translateX(9px);
}
30% {
-webkit-transform: translateX(-9px);
transform: translateX(-9px);
}
40% {
-webkit-transform: translateX(6px);
transform: translateX(6px);
}
50% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
65% {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes swing {
15% {
-webkit-transform: translateX(9px);
transform: translateX(9px);
}
30% {
-webkit-transform: translateX(-9px);
transform: translateX(-9px);
}
40% {
-webkit-transform: translateX(6px);
transform: translateX(6px);
}
50% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
65% {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.element:hover {
-webkit-animation: swing 0.4s ease;
animation: swing 0.4s ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.element:hover:after{
content:attr(datat);
display:block;
background: #88b7d5;
}
.inl{
background-image:url(http://176.126.167.242/mediawiki/images/9/93/Cloud-chem.png);
background-repeat:round;
width:250px;
height:150px;
padding:10px;
position:absolute;
display:inline-block;
text-align:center;
z-index:6;
}
.inl div{
position:absolute;
padding:10px;
vertical-align: middle;
color:white;
text-align:center;
overflow: hidden;
z-index:6;
}
.pccr{
color: #0066a1;
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
font-style: normal;
font-weight: bold;
line-height: 1.4;
margin-bottom: 0.5em;
margin-top: 0.2em;
text-rendering: optimizeLegibility;
text-align:center;
}
/* Конец Инфографика по химии Классификация химреакций */
/* Степень окисления электронов в химии */
.el {
position:relative;
display:inline;
}
.el:before{
content:attr(data-title);
position:absolute;
text-aline:center;
bottom:100%;
font-size:65%;
left:50%;
transform: translate(-50%, 0);
}
/* Конец Степень окисления электронов в химии */
/* Обозначение электрона */
.elektron {
position:relative;
display:inline;
}
.elektron:before{
content:attr(data-title);
position:absolute;
text-aline:center;
bottom:20%;
font-size: 100%;
left:50%;
margin-left: -10px;
transform: translate(-50%, 0);
}
/* Конец Обозначение электрона */
/* Обозначение электроотрицательности */
.eleotr {
position:relative;
display:inline;
}
.eleotr:before{
content:attr(data-title);
position:absolute;
text-indent: 0;
text-align: center;
line-height: 8px;
top:100%;
font-size: 50%;
left:50%;
transform: translate(-50%, 0);
}
/* Конец Обозначение электроотрицательности */
/* Инфографика по истории мусульманский календарь */
.hiskalinfo {
position:relative;
width:100%;
}
.hiscircle {
overflow:hidden;
width: 450px;
height: 450px;
background: white;
-moz-border-radius: 300px;
-webkit-border-radius: 300px;
border-radius: 300px;
border:50px solid #ed7c00;
padding:30px;
display: flex;
position:absolute;
left:50%;
transform: translate(-50%, 30%);
-webkit-transition: all 0.6s ease;;
-moz-transition: all 0.6s ease;;
-o-transition: all 0.6s ease;;
transition: all 0.6s ease;
}
.hiscircle:hover {
border-color:#893030;
}
.hiscircle:hover .hiskal {
color:#893030;
}
.opis {
font-size:90%;
text-align:center;
color:#2a2012;
text-indent:0px;
}
.hiskal {
font-size:250%;
font-weight:bold;
text-align:center;
text-indent:0px;
color:#ed7c00;
-webkit-transition: all 0.6s ease;;
-moz-transition: all 0.6s ease;;
-o-transition: all 0.6s ease;;
transition: all 0.6s ease;
}
#vlin{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
.mesac {
position:absolute;
display: flex;
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.mesac:hover {
z-index:10;
cursor:pointer;
}
.mesinfo {
all: unset;
text-align: center;
text-indent: 0;
position:absolute;
padding:5px;
background-color:grey;
color:white;
top:0;
left:50%;
transform: translate(-50%);
font-size:2em;
font-weight: bold;
display: inline;
opacity:0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-transition: all 0.3s ease;;
-moz-transition: all 0.3s ease;;
-o-transition: all 0.3s ease;;
transition: all 0.3s ease;
}
.mesac:hover .mesinfo{
top:70%;
z-index:10;
opacity:1;
}
#odin {
left:50%;
background: #a32e34;
transform: translate(-50%, 10%);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
#dva {
top:0 px;
left:66%;
background: #ed7c00;
transform: translate(0%, 63%);
-webkit-transition: all 0.6s ease;;
-moz-transition: all 0.6s ease;;
-o-transition: all 0.6s ease;;
transition: all 0.6s ease;
}
#tri {
top:0px;
left:82%;
background: #ed7c00;
transform: translate(0%, 190%);
-webkit-transition: all 0.6s ease;;
-moz-transition: all 0.6s ease;;
-o-transition: all 0.6s ease;;
transition: all 0.6s ease;
}
#chet {
left:85%;
top:0px;
background: #ed7c00;
transform: translate(0%, 350%);
-webkit-transition: all 0.6s ease;;
-moz-transition: all 0.6s ease;;
-o-transition: all 0.6s ease;;
transition: all 0.6s ease;
}
#piat {
top:0px;
left:82%;
background: #ed7c00;
transform: translate(0%, 510%);
-webkit-transition: all 0.6s ease;;
-moz-transition: all 0.6s ease;;
-o-transition: all 0.6s ease;;
transition: all 0.6s ease;
}
#shest {
top:0px;
left:66%;
background: #ed7c00;
transform: translate(0%, 630%);
-webkit-transition: all 0.6s ease;;
-moz-transition: all 0.6s ease;;
-o-transition: all 0.6s ease;;
transition: all 0.6s ease;
}
#sem {
left:50%;
top:0px;
background: #a32e34;
transform: translate(-50%, 680%);
-webkit-transition: all 0.6s ease;;
-moz-transition: all 0.6s ease;;
-o-transition: all 0.6s ease;;
transition: all 0.6s ease;
}
#vosem {
top:0px;
left:22%;
background: #ed7c00;
transform: translate(0%, 630%);
-webkit-transition: all 0.6s ease;;
-moz-transition: all 0.6s ease;;
-o-transition: all 0.6s ease;;
transition: all 0.6s ease;
}
#devat {
top:0px;
left:5%;
background: #247247;
transform: translate(0%, 510%);
-webkit-transition: all 0.6s ease;;
-moz-transition: all 0.6s ease;;
-o-transition: all 0.6s ease;;
transition: all 0.6s ease;
}
#desat {
left:0;
top:0px;
background: #ed7c00;
transform: translate(0%, 350%);
-webkit-transition: all 0.6s ease;;
-moz-transition: all 0.6s ease;;
-o-transition: all 0.6s ease;;
transition: all 0.6s ease;
}
#odinad {
top:0px;
left:5%;
background: #a32e34;
transform: translate(0%, 190%);
-webkit-transition: all 0.6s ease;;
-moz-transition: all 0.6s ease;;
-o-transition: all 0.6s ease;;
transition: all 0.6s ease;
}
#dvenad {
top:0px;
left:22%;
background: #a32e34;
transform: translate(0%, 63%);
-webkit-transition: all 0.6s ease;;
-moz-transition: all 0.6s ease;;
-o-transition: all 0.6s ease;;
transition: all 0.6s ease;
}
.cif {
color:white;
text-align:center;
margin: auto;
font-weight:bold;
font-size:300%;
text-indent:0px;
}
.disa{
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:black;
opacity:0.4;
z-index:100;
}
.infokal{
display:none;
position:fixed;
min-width:500px;
min-height:400px;
top:50%;
left:50%;
transform: translate(-50%, -50%);
background: #eaeaea;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding:20px;
z-index:200;
}
.infokal p {
text-indent:0px;
}
/* Конец Инфографика по истории мусульманский календарь */
/* Time Line по математике */
a {
color: #004c5d;
text-decoration: none;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
a:hover,
a.selected {
color: #f47521;
}
#timeline {
font-family: Georgia, serif;
width: 800px;
height: 350px;
overflow: hidden;
margin-top: 20px;
margin-bottom: 45px;
position: relative;
background: url('/mediawiki/images/2/2a/Dot.png') left 45px repeat-x;
}
#timeline h2 {
text-align: center;
color: #f47521;
font-family: Georgia, serif !important;
text-shadow: #000 1px 1px 2px;
line-height: 1em !important;
border-bottom: 0px;
overflow: initial;
}
#dates {
width: 800px;
max-height: 60px;
overflow: hidden;
}
#dates li {
list-style: none;
float: left;
width: 100px;
height: 50px;
font-size: 17px;
text-align: center;
background: url('/mediawiki/images/5/51/Biggerdot.png') center bottom no-repeat;
}
#dates a {
line-height: 38px;
padding-bottom: 10px;
}
#dates .selected {
line-height: 20px;
font-size: 20px;
margin-top:-20px;
}
#issues {
width: 800px;
height: 350px;
overflow: hidden;
}
#issues li {
width: 800px;
height: 350px;
list-style: none;
float: left;
}
#issues li.selected img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
#issues li img {
float: left;
margin: 10px 30px 10px 50px;
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */
zoom: 1;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
-webkit-transform: scale(0.7,0.7);
-moz-transform: scale(0.7,0.7);
-o-transform: scale(0.7,0.7);
-ms-transform: scale(0.7,0.7);
transform: scale(0.7,0.7);
}
#issues li h2 {
font-size: 35px;
margin-bottom: 20px;
}
#issues li p {
font-size: 14px;
margin-right: 70px;
font-weight: normal;
line-height: 22px;
}
#grad_left,
#grad_right {
width: 100px;
height: 350px;
position: absolute;
top: 0;
}
#grad_left {
left: 0;
background: url('../images/grad_left.png') repeat-y;
}
#grad_right {
right: 0;
background: url('../images/grad_right.png') repeat-y;
}
#next,
#prev {
position: absolute;
top: 0;
font-size: 70px;
top: 170px;
width: 22px;
height: 38px;
background-position: 0 0;
background-repeat: no-repeat;
text-indent: -9999px;
overflow: hidden;
}
#next:hover,
#prev:hover {
background-position: 0 -76px;
}
#next {
right: 0;
background-image: url('../images/next.png');
}
#prev {
left: 0;
background-image: url('../images/prev.png');
}
#next.disabled,
#prev.disabled {
opacity: 0.2;
}
/* Конец Time Line по математике */
/*Классификация неорганических соединений*/
html.kns-active, body.kns-active {
overflow: hidden;
margin-right: 17px;
}
#KNS-conteinersrs {
display: none;
}
.KNS-inside {
width: 100%;
height: 100%;
overflow-y: auto;
padding-right: 25px;
text-align: left;
}
#KNS-conteiner {
position: fixed;
display: table;
height: 100%;
width: 100%;
top: 0;
left: 0;
transform: scale(0);
z-index: 1;
}
#KNS-conteiner.one {
transform: scaleY(0.01) scaleX(0);
animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#KNS-conteiner.one .KNS-background .kns-modal {
transform: scale(0);
animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#KNS-conteiner.one.out {
transform: scale(1);
animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#KNS-conteiner.one.out .KNS-background .kns-modal {
animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#KNS-conteiner .KNS-background {
display: table-cell;
height: 100%;
background: rgba(0, 0, 0, 0.8);
text-align: center;
vertical-align: middle;
}
#KNS-conteiner .KNS-background .kns-modal {
background: white;
width:700px;
height:500px;
padding: 25px 5px 25px 25px;
display: inline-block;
border-radius: 3px;
font-weight: 300;
position: relative;
}
.kns-content {
line-height: normal;
text-indent: 0px;
text-align: left;
}
.kns-content p {
margin-bottom: 0;
}
.nn {
position: relative;
display: inline-block;
text-decoration: none;
font-size: 100%;
font-weight: bold;
color: #000;
float:left;
margin-right:10px;
width:185px;
}
.nn:before {
content: "";
display: inline-block;
z-index: -1;
margin-right:10px;
width: 22px;
height: 22px;
vertical-align: middle;
border-radius: 100%;
background: rgb(144,142,105) linear-gradient(rgb(185,181,151), rgb(144,142,105));
}
.nn:after {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 100%;
z-index: 1;
position: absolute;
top: 4px;
left: 3px;
background: #85827f linear-gradient(#85827f, #85827f);
box-shadow:
inset 0 2px 1px rgba(0,0,0,.5),
inset 0 -2px 1px rgba(255,255,255,.3);
}
.nn:hover {
cursor:pointer;
text-decoration: none !important;
}
.nn:hover:after {
background: #f58135 linear-gradient(#f58135, #f58135);
}
.forin {
display:inline-block;
overflow:hidden;
line-height:normal;
margin-bottom:10px;
}
.line {
clear:right;
margin: 0 0 10px 0;
}
.line p {
display:inline-block;
}
.klas {
display:inline-block;
margin-right:10px;
font-weight:bold;
font-size:80%;
transform: translate(0, 0%);
text-decoration: none !important;
color:#000 !important;
}
.klas:hover {
color: #f58135 !important;
cursor:pointer;
text-decoration: none !important;
}
.zel {
color:#008c43;
}
.tkras {
color:#821414;
}
.tsin {
color:#0e1466;
}
.amfot {
color:#660a66;
}
.kras {
color:#db0000;
}
.golub {
color:#07605d;
}
.kompl {
color:#776000;
}
.bgaz {
display:inline-block;
font-weight:bold;
font-size:70%;
position:relative;
}
.bgaz:hover {
cursor:pointer;
color: #f58135 !important;
}
.bgaz:hover span {
color: #f58135 !important;
}
.arrow {
position:absolute;
bottom:0;
left:15px;
width: 12px;
height: 12px;
margin: 0px;
border: 1px solid black;
border-bottom: none;
border-left: none;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.closeKNS {
position: fixed;
left: 0;
top: 0;
z-index: 50;
margin-left:97%;
margin-top:-15px;
width: 36px;
height: 36px;
background-image: url(http://176.126.167.242/mediawiki/extensions/FancyBoxThumbs/modules/fancyBox/source/fancybox_sprite.png?783d4);
}
.closeKNS:hover {
cursor:pointer;
}
@keyframes unfoldIn {
0% {
transform: scaleY(0.005) scaleX(0);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(1) scaleX(1);
}
}
@keyframes unfoldOut {
0% {
transform: scaleY(1) scaleX(1);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(0.005) scaleX(0);
}
}
@keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes zoomOut {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
/*Конец Классификации неорганических соединений*/
.scrollup{
width:40px;
height:40px;
opacity:0.3;
position:fixed;
bottom:50px;
left:calc(100vw - (100vw / 2.5) + 1px);
display:none;
text-indent:-9999px;
background: url('/mediawiki/docs/scrollup.png') no-repeat;
}
@media only screen and (max-width: 1024px) {
#timeline {
text-indent:0;
height: 320px;
margin-bottom: 20px;
}
#issues {
height: 250px;
overflow: hidden;
}
#issues li p {
font-size: 14px;
margin-left: 10px;
margin-right: 10px;
}
#dates .selected {
font-size:20px;
}
#issues li img {
float: left;
max-width: 150px;
max-height: 250px;
margin-left: 15px;
margin-right: 30px;
}
.scrollup{
left:calc(100vw - (100vw / 2) + 1px);
}
@media only screen and (max-width: 600px) {
#timeline {
text-indent:0;
height: 745px;
}
#issues {
height: 700px;
overflow: hidden;
}
#issues li {
height: 650px;
}
#issues li img {
float:none;
max-width: 250px;
max-height: 350px;
display:block;
margin:20px auto 30px;
}
#issues li p {
font-size: 13px;
margin-left: 5px;
margin-right: 30px;
margin-top:15px;
}
#dates .selected {
font-size:18px !important;
}
}
@media only screen and (max-width: 500px) {
.scrollup{
left:0;
right:calc(100vw - 20px);
}
}