/* ==========================================================================
   iconography
   ========================================================================== */
.iconography { display: inline-block; margin: auto; position: absolute; right: 0; top: 5px; bottom: 0; text-align: right; }
.iconography span { display: inline-block; margin: 0 0 0 .3rem; vertical-align: middle; }
.iconography:empty { display: none; }

.iconography .media-icons { position: relative; margin: .45rem 0 0 .3rem; vertical-align: top; }
.iconography .media { font-size: 0; position: relative; }
.iconography .media:before { opacity: .5; }
.iconography .media.hover .triangle:before { position: absolute; content: ''; border-top: 9px solid transparent; border-bottom: 9px solid #fff; border-left: 9px solid transparent; border-right: 9px solid transparent; top: 14px; right: 5px; z-index: 12; }
.iconography .media.hover .triangle:after { position: absolute; content: ''; border-top: 10px solid transparent; border-bottom: 10px solid #e5e5e5; border-left: 10px solid transparent; border-right: 10px solid transparent; top: 12px; right: 4px; z-index: 11; }
.iconography .tooltip { display: none; text-align: left; border: 1px solid #e5e5e5; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); background: #fff; font-weight: 400; color: #5d5c5c; padding: 8px 14px 8px 14px; height: auto; position: absolute; right: 0; font-size: 10px; border-radius: 3px; width: auto; top: 32px; margin: auto; left: auto; bottom: auto; z-index: 10; white-space: nowrap; }
.iconography .media.hover:before { opacity: 1; }
.iconography .media.hover + .tooltip { display: block; }

.iconography .updated { padding: .33rem; margin: -.13rem 0 0 .8rem; color: #d96500; font-style: italic; text-transform: uppercase; font-size:  1.27rem; font-weight: 400; line-height: 1.1; position: relative; }
.iconography .updated.highlight-link { cursor: pointer; }
.iconography .updated .changes, .updated .hide-changes { font-size: .77rem; color: #999; margin: 0; text-transform: none; font-style: normal; }
.iconography .updated .changes { display: block; }
.iconography .updated .hide-changes { display: none; }
.iconography .updated.highlight-link:hover { color: #f77700; }
.iconography .new { color: #d96500; font-style: italic; text-transform: uppercase; font-size:  1.27rem; font-weight: 400; line-height: 1.1; display: block; }
.iconography .pipe { border-right: 1px solid #e5e5e5; margin: 0 .6rem; height: 26px; }
.iconography .experimental { font-size: 1rem; color: #848484; text-transform: uppercase; letter-spacing: 0; left: 0; font-weight: 600; display: block; position: relative; }
.iconography .experimental .text { color: #136eb7; margin: 0; vertical-align: top; top: 1px; position: relative; }

.iconography-wrapper.wrap-down { text-align: left; padding: 0 5px 0 12px; display: table-cell; }
.iconography-wrapper.wrap-down .iconography { position: relative; text-align: left; top: 0; vertical-align: middle; }
a.related-interpreter { font-size: 13px; font-weight: 300; color: #636363; font-style: italic; position: absolute; right: 0; z-index: 1; display: inline-block; }
.iconography-wrapper + a.related-interpreter { margin: -.5rem 0 0; border-top: 1px solid #ddd; padding: .18rem 0 0; }
.iconography-wrapper.empty + a.related-interpreter { margin: -2.18rem 0.92rem; border: 0; }
.iconography-wrapper.wrap-down + a.related-interpreter { display: table-cell; position: relative; text-align: left; top: 3px; border-top: 0; border-left: 1px solid #ddd; padding: 0 0 0 5px; margin: 0 0 0 5px; vertical-align: middle; }
.iconography-wrapper.wrap-down .iconography span { margin: 0; text-align: left; display: inline-block; }
.sticky a.related-interpreter { display: none !important; }