@charset "UTF-8";

/* Copyright (c) 2015 ptt.cc */
/* Licensed under The MIT License. */

/* Desktop */
@media screen and (min-width: 800px) {
    .bbs-screen, #topbar, #navigation, .action-bar, #article-polling {
        min-width: 600px;
        max-width: 1200px;
    }

    .bbs-content, #article-polling {
        font-size: 24px;
    }

    .b-ent .board {
        font-size: 20px;
    }
    .b-ent .board > * {
        box-sizing: border-box;
    }
    .b-ent .board > :first-child {
        padding: 0 0 0 1ex;
    }
    .board-name {
        width: 20ex;
    }
    .board-class {
        width: 6ex;
    }

    .r-ent > * {
        font-size: 20px;
    }

    .m-ent {
        padding: 0.5em;
    }
    .m-ent > * {
        font-size: 20px;
    }

    .action-bar {
        text-align: left;
    }
    .btn-group-paging {
        float: right;
    }
    .btn {
        padding: 0 2ex;
        font-size: initial;
    }
    .btn.wide {
        padding: 0 3ex;
    }

    div.over18-notice {
        padding-top: 20px;
        margin-left: 150px;
    }
    img.over18-notice {
        float: left;
        width: 120px;
        height: auto;
    }
    .over18-button-container {
        display: inline-block;
    }
}

/* Mobile */
@media screen and (max-width: 799px) {
    .b-ent {
        border-bottom: 1px #aaa solid;
    }
    .b-ent .board {
        line-height: 120%;
    }
    .b-ent .board > * {
        box-sizing: border-box;
    }
    .board-name {
        width: 100%;
        padding: 0 1ex;
    }
    .board-class {
        min-width: 7ex;
        padding: 0 0 0 1ex;
        font-size: small;
    }
    .board-title {
        padding: 0 1ex 0 0;
        font-size: small;
    }

    .m-ent:first-child {
        border-top: 1px #aaa solid;
    }
    .m-ent {
        padding: 0;
        border-bottom: 1px #aaa solid;
    }
    .m-ent .title a {
        display: block;
        box-sizing: border-box;
        padding: 0 1ex;
        line-height: 200%;
        text-decoration: none;
    }

    .action-bar {
        /* If the screen is too small, we want buttons to overflow. */
        white-space: nowrap;
    }
    .btn-group-dir {
        width: 33%;
    }
    .btn-group-paging {
        width: 66%;
    }
    .btn-group-dir > .btn {
        width: 50%;
    }
    .btn-group-paging > .btn {
        width: 25%;
    }

    div.over18-notice {
        padding: 0 1ex;
    }
    img.over18-notice {
        float: left;
        margin: 2ex;
        width: 60px;
        height: auto;
    }
    .over18-button-container {
        box-sizing: border-box;
        width: 100%;
        padding: 1ex;
    }
    .over18-button-container button {
        width: 80%;
    }
}