@font-face {
    font-family: 'i-diary';
    src:  url('../fonts/i-diary.eot?v8yatz');
    src:  url('../fonts/i-diary.eot?v8yatz#iefix') format('embedded-opentype'),
    url('../fonts/i-diary.ttf?v8yatz') format('truetype'),
    url('../fonts/i-diary.woff?v8yatz') format('woff'),
    url('../fonts/i-diary.svg?v8yatz#i-diary') format('svg');
}

[class^="i-"], [class*=" i-"], body:not(.design_2008) .TagJIco {
    font-family: 'i-diary' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.i-b-b:before {
    content: "\e942";
}
.i-b-code:before {
    content: "\e944";
}
.i-b-dash:before {
    content: "\e943";
}
.i-b-dog:before {
    content: "\e945";
}
.i-b-i:before {
    content: "\e94a";
}
.i-b-img:before {
    content: "\e94b";
}
.i-b-just-all:before {
    content: "\e94c";
}
.i-b-just-center:before {
    content: "\e94d";
}
.i-b-just-right:before {
    content: "\e94e";
}
.i-b-l:before {
    content: "\e94f";
}
.i-b-link:before {
    content: "\e950";
    font-size: 8px !important;
}
.i-b-more:before {
    content: "\e951";
}
.i-b-ni:before {
    content: "\e952";
}
.i-b-ot:before {
    content: "\e953";
}
.i-b-quest:before {
    content: "\e954";
}
.i-b-quots:before {
    content: "\e955";
    font-size: 8px !important;
}
.i-b-s:before {
    content: "\e956";
}
.i-b-u:before {
    content: "\e95d";
}
.i-b-translit::before {
    content: "\e95c";
}
.i-b-unicode::before {
    content: "\e95e";
}
.i-b-spoiler:before {
    /* В icon-шрифте i-diary нет отдельного глифа «спойлер», поэтому берём
       глиф «глаз» (eye, \e914) — общепринятый значок «показать/скрыть».
       Шрифт ('i-diary'), размер и цвет наследуются от icon-пайплайна панели,
       поэтому кнопка рендерится точь-в-точь как соседние (More, NI, Code)
       в обоих редакторах — никаких отдельных font-* переопределений не нужно. */
    content: "\e914";
}
/* «Перечёркнутый глаз»: поверх глифа eye (:before) рисуем диагональную черту
   (:after), имитируя значок «скрыто». Размеры заданы в em от размера глифа,
   поэтому черта масштабируется вместе с ним в обоих редакторах. */
.i-b-spoiler {
    position: relative !important;
    /* inline-block обязателен: иначе в TinyMCE (где у глифа нет жёсткого бокса,
       как в #codebuttons) :after-черта позиционируется относительно внешнего
       контейнера панели и «улетает», заодно подхватывая его цвет. С боксом она
       центрируется по глазу и наследует его цвет через currentColor. */
    display: inline-block;
}
.i-b-spoiler:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.2em;
    height: 0.12em;
    min-height: 1px;
    background: currentColor;
    /* Глаз нарисован тонкими штрихами и кажется светло-серым; сплошная черта
       того же currentColor выглядит темнее/плотнее. Приглушаем её прозрачностью,
       чтобы она читалась тем же светло-серым, что и глаз. В #codebuttons своя
       opacity задаётся ниже. */
    opacity: .6;
    transform: translate(-50%, -50%) rotate(-45deg);
    pointer-events: none;
}
/* В #codebuttons глиф жёстко 10px и цвет #1e1e1e (opacity .8) — привязываем
   черту к тому же размеру/цвету/прозрачности, чтобы она совпала с глазом. */
#codebuttons .i-b-spoiler:after {
    font-size: 10px;
    background: #1e1e1e;
    opacity: .8;
}