Common.css — различия между версиями
Admine2 (обсуждение | вклад) |
Admine2 (обсуждение | вклад) |
||
(не показано 49 промежуточных версий этого же участника) | |||
Строка 1: | Строка 1: | ||
/* Размещённый здесь CSS будет применяться ко всем темам оформления */ | /* Размещённый здесь CSS будет применяться ко всем темам оформления */ | ||
+ | |||
+ | .sideBarNavMenuListDrop { | ||
+ | z-index: 25; | ||
+ | } | ||
+ | |||
+ | .test_hover { | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | .test_hover_state { | ||
+ | background-image: url("/images/a/a4/Test_hover_state.png"); | ||
+ | background-position: left -0px; | ||
+ | } | ||
+ | .test_hover_state { | ||
+ | display: block; | ||
+ | text-indent: 0; | ||
+ | width: 72px; | ||
+ | height: 71px; | ||
+ | margin: auto; | ||
+ | padding: 0; | ||
+ | position: absolute; | ||
+ | left: 116px; | ||
+ | bottom: 0; | ||
+ | top: 0; | ||
+ | right: 0; | ||
+ | z-index: 5; | ||
+ | } | ||
+ | .test_div_hover:hover .test_hover_state { | ||
+ | background-position: left -71px; | ||
+ | } | ||
+ | .test_div_hover:hover .testirovanie { | ||
+ | opacity:0.7; | ||
+ | } | ||
+ | .test_hover_state:hover .testirovanie { | ||
+ | opacity:0.7; | ||
+ | } | ||
+ | |||
a .oo-ui-buttonElement-button [rel=*"nofollow"] { | a .oo-ui-buttonElement-button [rel=*"nofollow"] { | ||
display:none !important; | display:none !important; | ||
+ | } | ||
+ | #footer-lastmod { | ||
+ | display:none | ||
} | } | ||
.sideBarNavMenu li:first-child { | .sideBarNavMenu li:first-child { | ||
Строка 21: | Строка 61: | ||
/* Конец Выравнивание для блоков внутри maintext */ | /* Конец Выравнивание для блоков внутри maintext */ | ||
/* Отключение автосодержания */ | /* Отключение автосодержания */ | ||
− | + | .toc, #toc { display: none; } | |
/* Конец Отключение автосодержания */ | /* Конец Отключение автосодержания */ | ||
/* Изменение стиля слайдшоу для страницы химии */ | /* Изменение стиля слайдшоу для страницы химии */ | ||
Строка 33: | Строка 73: | ||
} | } | ||
/* Конец Изменение стиля слайдшоу для страницы химии */ | /* Конец Изменение стиля слайдшоу для страницы химии */ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | . | + | .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; | display: -webkit-box; | ||
text-align: center; | text-align: center; | ||
Строка 102: | Строка 143: | ||
transition: .5s linear; | transition: .5s linear; | ||
} | } | ||
− | . | + | .blocktext:hover { |
background-color: rgba(0,76,93,.3); | background-color: rgba(0,76,93,.3); | ||
-webkit-transform: scale(1.07); | -webkit-transform: scale(1.07); | ||
Строка 108: | Строка 149: | ||
} | } | ||
− | + | .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; |
− | padding: | ||
− | |||
text-indent: 0px; | text-indent: 0px; | ||
text-align: justify; | text-align: justify; | ||
+ | font-size: 13px; | ||
} | } | ||
− | . | + | |
− | text-indent: | + | /*Подсветка блоков содержания*/ |
− | } | + | .cutok { |
− | . | + | display:block; |
− | text-indent:0px; | + | 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; |
− | color: | ||
− | |||
} | } | ||
− | . | + | .light{ |
− | + | background-color: #f47521; | |
− | text-align: center; | + | text-align: center; |
− | text-indent: | + | text-indent: 0px; |
− | + | padding: 3px; | |
− | + | margin: 3px; | |
− | padding: | + | font-size: 16px; |
− | margin: | + | text-transform: uppercase; |
− | + | font-weight: normal; | |
− | font- | + | 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; | padding: 0px; | ||
text-indent: 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; | 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: | + | 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; | text-decoration: none; | ||
− | |||
} | } | ||
− | . | + | |
− | color:# | + | span.tip:hover { |
− | + | color: #f47521; | |
− | + | position: relative; | |
− | |||
− | |||
} | } | ||
− | . | + | |
− | content: | + | span.tip[data-fancybox-title]:hover:after { |
− | width: | + | 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(/images/1/1d/Geolbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;} | |
− | + | ||
− | padding: | + | .lblb:before{content: url(/images/0/03/Biolbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;} |
− | + | ||
− | + | .lblm:before{content: url(/images/a/a8/Matlbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;} | |
− | + | ||
+ | .lblml:before{content: url(/images/8/8f/Mirlbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;} | ||
+ | |||
+ | .lblp:before{content: url(/images/9/9f/Phlbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;} | ||
+ | |||
+ | .lblc:before{content: url(/images/1/1d/Chlbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;} | ||
+ | |||
+ | .lblh:before{content: url(/images/f/f5/Hislbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;} | ||
+ | |||
+ | .lblkl:before{content: url(/images/7/7a/Kllbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;} | ||
+ | |||
+ | .lblen:before{content: url(/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; | |
− | font-size: | ||
− | |||
− | |||
} | } | ||
− | . | + | |
− | + | .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; | |
− | |||
− | - | ||
− | |||
− | |||
− | |||
− | |||
− | text-align: | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | .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{ | |
− | .distribution-map | + | max-width: 100%; |
+ | } | ||
+ | .distribution-map { | ||
position: relative; | position: relative; | ||
− | padding: | + | background-image: url(/images/1/11/M7a_Uku_S.png); |
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | /* padding: 20px;*/ | ||
-webkit-box-sizing: border-box; | -webkit-box-sizing: border-box; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
− | + | margin: 0 auto; | |
} | } | ||
− | + | .distribution-map > p > img { | |
− | .distribution-map | + | width: 100%; |
− | + | position: relative; | |
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | z-index: 0; | ||
} | } | ||
− | + | .distribution-map .map-point { | |
− | .distribution-map | + | 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 { | |
− | .distribution-map | + | 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 { | |
− | .distribution-map | + | 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 { | |
− | .distribution-map | + | 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 { | |
− | .distribution-map a | + | color: #afe1fa; |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | color: # | ||
} | } | ||
− | .distribution-map | + | .distribution-map .content::-webkit-scrollbar-button { |
− | + | background-image:url(''); | |
+ | background-repeat:no-repeat; | ||
+ | width:5px; | ||
+ | height:0px | ||
} | } | ||
− | .distribution-map | + | |
− | color: # | + | .distribution-map .content::-webkit-scrollbar-track { |
+ | background-color:#cfe9ff; | ||
} | } | ||
− | .distribution-map | + | .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 . | + | .distribution-map .content::-webkit-scrollbar{ |
− | + | width: 5px; | |
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | . | + | |
− | + | .avtor { | |
+ | font: normal bold 150% Arial, sans-serif; | ||
} | } | ||
− | .distribution-map { | + | /*Конец интерактивная карта*/ |
− | position: relative; | + | |
− | + | /*Интерактивная карта KG*/ | |
− | + | .kg-distribution-map div, .kg-distribution-map img { | |
− | + | position: relative; | |
− | + | padding:0px; | |
-webkit-box-sizing: border-box; | -webkit-box-sizing: border-box; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
− | + | text-indent:0px; | |
} | } | ||
− | .distribution-map | + | |
− | + | .kg-distribution-map p { | |
− | + | font-size: 10pt; | |
− | margin: | + | margin-bottom: 12pt; |
− | + | text-indent:0px; | |
− | + | text-align:justify; | |
} | } | ||
− | .distribution-map . | + | |
− | + | .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; | position: absolute; | ||
− | overflow: | + | overflow: scroll; |
− | + | top: 50%; | |
− | + | left: 50%; | |
− | |||
− | |||
− | |||
-webkit-transform: translate(-50%, -50%); | -webkit-transform: translate(-50%, -50%); | ||
transform: translate(-50%, -50%); | transform: translate(-50%, -50%); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | .distribution-map . | + | |
− | + | .kg-distribution-map .centered-y { | |
− | + | /* position: absolute; */ | |
− | + | width: 100%; | |
− | + | /*top: 50%;*/ | |
− | width: 100%; | + | /*-webkit-transform: translateY(-50%);*/ |
− | + | /*transform: translateY(-50%);*/ | |
− | + | } | |
− | + | .kg-distribution-map .centered-y img{ | |
− | + | max-width: 100%; | |
− | transform: | ||
− | |||
} | } | ||
− | .distribution-map . | + | .kg-distribution-map { |
+ | position: relative; | ||
+ | background-image: url(/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; | margin: 0; | ||
padding: 0; | padding: 0; | ||
− | + | z-index: 0; | |
− | |||
− | |||
− | |||
− | |||
− | z-index: | ||
− | |||
− | |||
} | } | ||
− | .distribution-map .map-point: | + | .kg-distribution-map .map-point { |
− | filter: progid:DXImageTransform.Microsoft.Alpha( | + | cursor: pointer; |
− | opacity: | + | outline: none; |
− | -moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, | + | z-index: 1; |
− | -o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, | + | position: absolute; |
− | -webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, | + | overflow: hidden; |
− | -webkit-transition-delay: 0.25s, | + | width: 14px; |
− | -webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, | + | height: 14px; |
− | transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, | + | 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 | + | .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 { | |
− | .distribution-map . | + | 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; | background-color:#0066a1; | ||
} | } | ||
− | .distribution-map .content::-webkit-resizer{ | + | .kg-distribution-map .content::-webkit-resizer{ |
background-image:url(''); | background-image:url(''); | ||
background-repeat:no-repeat; | background-repeat:no-repeat; | ||
Строка 642: | Строка 779: | ||
} | } | ||
− | .distribution-map .content::-webkit-scrollbar{ | + | .kg-distribution-map .content::-webkit-scrollbar{ |
width: 5px; | 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;} | |
− | width: | + | .ion:before { |
− | + | content:""; | |
− | /*-webkit-transform: | + | position:absolute; |
− | /*transform: | + | 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: | + | 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; | |
− | position: absolute; | + | 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); | |
− | |||
− | |||
− | |||
− | - | ||
− | -webkit- | ||
− | |||
− | - | ||
− | |||
− | |||
− | |||
} | } | ||
− | . | + | /*Конец разложение солей для химии*/ |
− | + | /* Инфографика по химии таблица растворимости */ | |
− | + | .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; |
− | background-image:url(''); | + | } |
− | background-repeat:no-repeat; | + | .CHRinfo{ |
− | width: | + | position:absolute; |
− | height: | + | 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; | position:absolute; | ||
− | + | top:0%; | |
− | + | left:73%; | |
− | + | z-index:0; | |
− | left: | + | opacity:0; |
− | + | transition: .5s; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | .ffn{ | |
− | + | max-width:300px; | |
− | . | ||
position:relative; | 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; | 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: | + | -webkit-transform: translateX(-9px); |
− | + | transform: translateX(-9px); | |
− | transform: | + | } |
− | + | 40% { | |
− | + | -webkit-transform: translateX(6px); | |
− | + | transform: translateX(6px); | |
− | + | } | |
− | + | 50% { | |
− | + | -webkit-transform: translateX(-6px); | |
− | + | transform: translateX(-6px); | |
− | + | } | |
− | + | 65% { | |
− | -webkit-transform: | + | -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; | background: #88b7d5; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | .inl{ | |
− | + | background-image:url(/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: | + | margin-top: 0.2em; |
− | + | text-rendering: optimizeLegibility; | |
− | + | text-align:center; | |
− | |||
} | } | ||
− | + | /* Конец Инфографика по химии Классификация химреакций */ | |
− | + | /* Степень окисления электронов в химии */ | |
− | + | .el { | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | /* Конец Инфографика по химии | ||
− | /* | ||
− | |||
− | . | ||
position:relative; | position:relative; | ||
− | display: | + | display:inline; |
− | |||
} | } | ||
− | . | + | .el:before{ |
− | display: | + | 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; | position:absolute; | ||
− | + | text-aline:center; | |
− | + | bottom:20%; | |
− | + | font-size: 100%; | |
− | + | left:50%; | |
− | + | margin-left: -10px; | |
− | + | transform: translate(-50%, 0); | |
− | + | } | |
− | + | /* Конец Обозначение электрона */ | |
− | + | /* Обозначение электроотрицательности */ | |
− | left: | + | .eleotr { |
− | + | position:relative; | |
− | + | display:inline; | |
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | . | + | .eleotr:before{ |
− | + | content:attr(data-title); | |
− | + | position:absolute; | |
− | + | text-indent: 0; | |
− | height: | + | 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; | position:absolute; | ||
− | top: | + | top:50%; |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
left:50%; | left:50%; | ||
− | + | transform: translate(-50%, -50%); | |
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | . | + | |
− | + | .mesac { | |
position:absolute; | position:absolute; | ||
− | z-index: | + | display: flex; |
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | -moz-border-radius: 50px; | ||
+ | -webkit-border-radius: 50px; | ||
+ | border-radius: 50px; | ||
+ | } | ||
+ | .mesac:hover { | ||
+ | z-index:10; | ||
cursor:pointer; | 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; | |
− | -webkit- | + | 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; |
− | position: | + | font-weight:bold; |
+ | font-size:300%; | ||
+ | text-indent:0px; | ||
+ | } | ||
+ | .disa{ | ||
+ | display:block; | ||
+ | position:fixed; | ||
+ | top:0; | ||
+ | left:0; | ||
width:100%; | 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%; | left:50%; | ||
− | transform: translate(-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('/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('/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: 300; | ||
} | } | ||
− | # | + | #KNS-conteiner.one { |
− | + | transform: scaleY(0.01) scaleX(0); | |
− | + | animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; | |
− | |||
− | transform: | ||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | # | + | #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; | |
− | |||
− | transform: | ||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | . | + | #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; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | . | + | |
− | display: | + | #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; | |
+ | max-width:80em; | ||
+ | max-height:38em; | ||
+ | padding: 25px 5px 25px 25px; | ||
+ | display: inline-block; | ||
+ | border-radius: 3px; | ||
+ | font-weight: 300; | ||
+ | position: relative; | ||
+ | vertical-align: middle; | ||
+ | margin:15px; | ||
+ | overflow:auto; | ||
} | } | ||
− | |||
− | + | .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; | |
− | + | right: 0; | |
− | + | top: 0; | |
− | + | z-index: 50; | |
− | + | width: 36px; | |
− | + | height: 36px; | |
− | + | background-image: url(/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('/docs/scrollup.png') no-repeat; | ||
+ | z-index:20; | ||
} | } | ||
− | #issues li img { | + | |
− | float: left; | + | @media only screen and (max-width: 1024px) { |
− | max-width: 150px; | + | #timeline { |
− | max-height: 250px; | + | 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-left: 15px; | ||
margin-right: 30px; | margin-right: 30px; | ||
} | } | ||
+ | .scrollup{ | ||
+ | left:calc(100vw - (100vw / 2) + 1px); | ||
} | } | ||
@media only screen and (max-width: 600px) { | @media only screen and (max-width: 600px) { | ||
Строка 1649: | Строка 1893: | ||
} | } | ||
} | } | ||
− | + | @media only screen and (max-width: 500px) { | |
− | + | .scrollup{ | |
− | + | left:20px; | |
− | |||
− | |||
− | |||
} | } | ||
− | + | /* Фон для предметных страниц */ | |
− | + | .chem-bg{ | |
+ | background-image: url(/images/f/f7/Chem-fon.png); | ||
+ | background-size: 300px; | ||
+ | background-repeat: repeat; | ||
+ | } | ||
+ | .geo-bg{ | ||
+ | background-image: url(/images/4/42/Geo_back.png); | ||
+ | background-size: 300px; | ||
+ | background-repeat: repeat; | ||
+ | } | ||
+ | .bio-bg{ | ||
+ | background-image: url(/images/f/f0/Bio_bg.png); | ||
+ | background-size: 250px; | ||
+ | background-repeat: repeat; | ||
} | } | ||
− | . | + | .mat-bg{ |
− | + | background-image: url(/images/0/0d/Mat-bg.png); | |
− | + | background-size: 300px; | |
− | + | background-repeat: repeat; | |
− | |||
− | |||
} | } | ||
− | + | .en-bg{ | |
− | + | background-image: url(/images/1/18/Enbg.png); | |
− | + | background-size: 300px; | |
− | + | background-repeat: repeat; | |
− | + | } | |
− | + | ||
− | + | .his-bg{ | |
− | + | background-image: url(/images/1/1e/His_bg.png); | |
− | + | background-size: 250px; | |
+ | background-repeat: repeat; | ||
} | } | ||
− | + | ||
− | + | .mir-bg{ | |
− | + | background-image: url(/images/d/de/Mir_bg.png); | |
+ | background-size: 300px; | ||
+ | background-repeat: repeat; | ||
} | } | ||
− | + | ||
− | + | .kyr-bg{ | |
− | + | background-image: url(/images/7/7a/Kyr_bg.png); | |
+ | background-size: 300px; | ||
+ | background-repeat: repeat; | ||
} | } | ||
− | + | ||
− | + | .phis-bg{ | |
− | + | background-image: url(/images/6/68/Phis_bg.png); | |
− | + | background-size: 300px; | |
− | + | background-repeat: repeat; | |
− | |||
} | } | ||
− | + | /* Конец фон для предметных страниц */ | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | /*Конец | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } |
Текущая версия на 16:24, 19 октября 2018
/* Размещённый здесь CSS будет применяться ко всем темам оформления */
.sideBarNavMenuListDrop {
z-index: 25;
}
.test_hover {
position:relative;
}
.test_hover_state {
background-image: url("/images/a/a4/Test_hover_state.png");
background-position: left -0px;
}
.test_hover_state {
display: block;
text-indent: 0;
width: 72px;
height: 71px;
margin: auto;
padding: 0;
position: absolute;
left: 116px;
bottom: 0;
top: 0;
right: 0;
z-index: 5;
}
.test_div_hover:hover .test_hover_state {
background-position: left -71px;
}
.test_div_hover:hover .testirovanie {
opacity:0.7;
}
.test_hover_state:hover .testirovanie {
opacity:0.7;
}
a .oo-ui-buttonElement-button [rel=*"nofollow"] {
display:none !important;
}
#footer-lastmod {
display:none
}
.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%;
}
/* Конец Изменение стиля слайдшоу для страницы химии */
.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(/images/1/1d/Geolbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;}
.lblb:before{content: url(/images/0/03/Biolbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;}
.lblm:before{content: url(/images/a/a8/Matlbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;}
.lblml:before{content: url(/images/8/8f/Mirlbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;}
.lblp:before{content: url(/images/9/9f/Phlbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;}
.lblc:before{content: url(/images/1/1d/Chlbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;}
.lblh:before{content: url(/images/f/f5/Hislbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;}
.lblkl:before{content: url(/images/7/7a/Kllbl.png); display: block; width: 47px; height: 100px; float: left; position: absolute; top: 10px; left: -47px;}
.lblen:before{content: url(/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(/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(/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(/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('/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('/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: 300;
}
#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;
max-width:80em;
max-height:38em;
padding: 25px 5px 25px 25px;
display: inline-block;
border-radius: 3px;
font-weight: 300;
position: relative;
vertical-align: middle;
margin:15px;
overflow:auto;
}
.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;
right: 0;
top: 0;
z-index: 50;
width: 36px;
height: 36px;
background-image: url(/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('/docs/scrollup.png') no-repeat;
z-index:20;
}
@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:20px;
}
/* Фон для предметных страниц */
.chem-bg{
background-image: url(/images/f/f7/Chem-fon.png);
background-size: 300px;
background-repeat: repeat;
}
.geo-bg{
background-image: url(/images/4/42/Geo_back.png);
background-size: 300px;
background-repeat: repeat;
}
.bio-bg{
background-image: url(/images/f/f0/Bio_bg.png);
background-size: 250px;
background-repeat: repeat;
}
.mat-bg{
background-image: url(/images/0/0d/Mat-bg.png);
background-size: 300px;
background-repeat: repeat;
}
.en-bg{
background-image: url(/images/1/18/Enbg.png);
background-size: 300px;
background-repeat: repeat;
}
.his-bg{
background-image: url(/images/1/1e/His_bg.png);
background-size: 250px;
background-repeat: repeat;
}
.mir-bg{
background-image: url(/images/d/de/Mir_bg.png);
background-size: 300px;
background-repeat: repeat;
}
.kyr-bg{
background-image: url(/images/7/7a/Kyr_bg.png);
background-size: 300px;
background-repeat: repeat;
}
.phis-bg{
background-image: url(/images/6/68/Phis_bg.png);
background-size: 300px;
background-repeat: repeat;
}
/* Конец фон для предметных страниц */
}