@font-face {
    font-family: 'icons';
    src: url('iconfont.ttf');
}

.post {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0) !important;
    backface-visibility: hidden;
}

.ignored {
    display: none;
}

.avatar {
    align-self: baseline;
    object-fit: contain;
    max-height: 50px;
    max-width: 50px;
    margin-right: 5px;
    transition: max-width 0.25s ease-in-out, max-height 0.25s ease-in-out;
}

.avatar.extended {
    max-width: 100px;
    max-height: 100px;
}

.hide-avatar {
    display: none;
}

.posterinfo {
    flex: 1;
    display: flex;
}

.postheader {
    display: flex;
    border: 0;
    margin-left: 15px;
    padding: 15px 0px 5px;
}


/*
    .postmenu acts as the touch target for the menu button (added with the :after pseudo-element)
    it's positioned to align basically in the top-right corner, with some adjustments to the
    margins so full-width themes line up the menu icon with the one in the toolbar (it looks
    messy when they're just slightly unaligned)
*/

.postmenu {
    width: 24px;
    height: 24px;
    margin-right: 2px;
    margin-top: -13px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/*a
    the :after element holds the ... menu glyph, but doesn't reliably handle onClick events - so
    the main element above defines the touch area, and this sits in it. The font size is fixed
    since it's an icon and shouldn't adjust based on the user's font size, and it sits in the
    middle of the .postmenu element.
*/
.postmenu:after {
    font-family: 'icons' !important;
    content: "\e902";
    font-weight: normal;
    font-size: 13pt; !important
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    user-select: none;
}

@media speech {
    .postmenu:after {
        display: none;
    }
}

/*
    this is the dividing line between the header and the post content
    I've given it no vertical spacing, so the header and content can define their own padding etc
    (means that e.g. post content in previews looks right because it controls its spacing)
*/
.postseparator {
    display: block;
    height: 2px;
    padding: 0px;
    margin: 0px 15px;
    background-color: #eae9ea;
}

.postcontent {
    word-wrap: break-word;
    padding: 10px 0px;
    margin: 0px 15px;
}

.playGif {
    position: relative;
    display: inline-block;
}

.playGif.loading:before {
    background-image: url('file:///android_asset/images/loading.svg') !important;
}

.playGif:before {
    content: '';
    background-image: url('file:///android_asset/images/ic_menu_play.png');
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.playGif img {
    opacity: 0.5;
    background-color: rgba(180, 180, 180);
}

.vine-container {
    position: relative;
    padding-bottom: 100%;
}

.vine-embed {
    position: absolute;
    height: 100%;
    width: 100%;
}

.video-container {
    position: relative;
}

.video-link {
    position: absolute;
    top: 0;
    background: rgba(255,255,255,0.8);
    z-index: 1;
    left: 0;
    font-size: 1.75em;
    padding: 0.25em;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}


video.playing ~ .video-link {
    opacity: 0;
    pointer-events: none;
    transition: cubic-bezier(0.4, 0.0, 0.6, 1) 600ms;
}

.postinfo-poster {
    display: flex;
}

.icon-gren {
    margin-left: 5px;
}

.icon-gren:before {
    font-family: 'icons' !important;
    content: "\e900";
    -webkit-font-smoothing: antialiased;
}

.postinfo-poster-name {
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 720px;
    max-width: 1280px;
}

.posterinfo {
    flex: 1;
    display: flex;
    min-width: 0;
}

.postinfo {
    font-size: 1.1em;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}


.postinfo-poster img {
    height: 1em;
}

.postinfo-postdate,
.postinfo-regdate,
.postinfo-title {
    font-size: 0.85em;
}

.postinfo-postdate,
.postinfo-regdate {
    font-style: italic;
}

.postinfo-regdate,
.postinfo-title {
    transition: opacity 0.25s ease-in-out;
    display: block;
    font-size: 0px;
    opacity: 0;
}

.postinfo-regdate.extended,
.postinfo-title.extended {
    font-size: 0.85em;
    opacity: 1;
}

.postcontent .bbc-block {
    margin: 5px 0;
    padding: 5px 10px 5px 15px;
}

.postcontent .bbc-block h4 {
    font-style: italic;
    margin: 2px 0 5px;
}

.postcontent .bbc-block.code,
.postcontent pre {
    overflow: auto;
    word-wrap: normal;
}

.postcontent img,
.postcontent canvas,
.postcontent iframe {
    max-width: 100% !important;
}

.postcontent blockquote {
    margin: 0;
}

.postcontent .bbc-spoiler {
    color: transparent;
    overflow-wrap: anywhere;
}

.postcontent .bbc-spoiler * {
    visibility: hidden;
}

.postcontent .bbc-spoiler *:not(.spoiled) {
    display: inline-block;
}

.postcontent .bbc-spoiler:not(.spoiled) .bbc-block,
.postcontent .bbc-spoiler:not(.spoiled) .bbc-list {
    display: inline-block;
}

.postcontent .bbc-spoiler.spoiled {
    background: transparent;
    color: inherit;
}

.postcontent .bbc-spoiler.spoiled * {
    visibility: visible;
}

.postcontent .timg {
    border-width: 2px;
    border-style: solid;
    width: 20%;
}

.toggleread {
    text-align: center;
    padding: 5px;
}

.postcontent .signature {
    padding-top: 10px;
}
