html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Helvetica Neue, Helvetica; }
div { box-sizing: border-box; }
ul { margin:0; padding: 0; line-height: 20px; }
li { list-style-type: none; margin: 10px 0 10px 0; }
a { text-decoration: none; color: blue; cursor: pointer; }
a:hover { color: blue; outline: 1px solid; }
img { border-radius: 5px; }
.container { width: 100%; margin: 0 auto; }
.header { width: 100%; height: 52px; line-height: 32px; position: fixed; background: white; z-index: 1; padding: 10px 0 10px 0; }
.header a { text-decoration: none; color: blue; outline: none; }
.header a:hover { outline: none; }
.header .logo { width: 32px; height: 32px; float: left; outline: none; }
.header .title { display: inline-block; /*margin-left: 10px;*/ font-size: large; outline: none; }
.list { font-size: small; }
.list .list-bar { width: 75%; height: 20px; position: absolute; right: 0; }
.list .list-button { float: right; width: 18px; height: 18px; line-height: 18px; text-align: center; position: relative; cursor: pointer; font-size: small; margin: 0 10px 0 10px; }
.list .list-select { display: none; width: 100%; text-align-last: center; border: 0; outline: 0; appearance: none; }
.content .daily-tips-info { margin: 10px 0 10px 0; }
.content .daily-tips-preview { position: relative; }
.content .daily-tips-preview .read-more { position: absolute; right: 0; background: white; text-align: right; }
.content .navbar { font-size: small; margin: 10px 0 10px 0; color: gray; }
.content .content-title { font-size: xx-large; margin: 10px 0 10px 0; text-align: center; }
.content .content-text, .content pre { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; font-size: large; max-width: 100%; min-width: 0; }
.content-ad { height: 120px; max-height: 120px; }
.content .links { font-size: small; }
.ads .ad { /*background: whitesmoke;*/ width: 100%; margin: 10px auto; height: 120px; max-height: 120px; line-height: 120px; border-radius: 5px; text-align: center; }
.ads .ad a { width: 100%; height: 100%; text-decoration: none; }
.ads .ad a:hover { outline: none; }
.ads .ad img { max-width: 100%; max-height: 100%; }
.footer { width: 100%; height: 20px; line-height: 16px; text-align: center; font-size: x-small; position: fixed; left: 0; bottom: 0; background: white; z-index: 1; padding: 2px 0 2px 0; }
@media (min-width: 768px) {
    .container { width: 88%; display: flex; }
    .list, .content, .ads { margin-top: 62px; margin-bottom: 30px; }
    .content { width: calc(100% - 200px - 200px); margin-left: 50px; margin-right: 50px; }
    .list, .ads { width: 200px; min-width: 200px; top: 62px; height: 100%; position: sticky; }
    .list .list-bar { margin: 10px 0 10px 0; }
    .list .list-button { display: none; }
    .list ul { display: block; }
    .list .list-select { display: none; }
    .list ul>li { display: list-item; }
    .content .links { display: flex; }
    .content .links .link { align-content: center; flex: 1; }
    .content .links .link.sub-link { margin: 0 30px 0 30px; }
}
@media (max-width: 768px) {
    .container { width: 100%; position: absolute; padding: 0 10px 0 10px; }
    .list, .content, .ads { width: 100%; max-width: 100%; }
    .list { margin-top: 62px; color: blue;; }
    .list .list-bar { cursor: pointer; }
    .list ul { display: none; }
    .list .list-select { display: block; }
    .content, .ads { margin: 10px 0 10px 0; }
    .ads { margin-bottom: 30px; }
}