body  { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color:#828282; }
td    { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color:#828282; }

.admin td   { font-family:Verdana, Geneva, sans-serif; font-size:8.5pt; color:#000000; }
.subtext td { font-family:Verdana, Geneva, sans-serif; font-size:  7pt; color:#828282; }

input    { font-family:monospace; font-size:10pt; }
input[type='submit'] { font-family:Verdana, Geneva, sans-serif; }
input[readonly] { color:#828282; background:#f6f6ef; border:none; }
textarea { font-family:monospace; font-size:10pt; resize:both; }

a:link    { color:#000000; text-decoration:none; }
a:visited { color:#828282; text-decoration:none; }

.default { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color:#828282; }
.admin   { font-family:Verdana, Geneva, sans-serif; font-size:8.5pt; color:#000000; }
.title   { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color:#828282; overflow:hidden; }
.subtext { font-family:Verdana, Geneva, sans-serif; font-size:  7pt; color:#828282; }
.yclinks { font-family:Verdana, Geneva, sans-serif; font-size:  8pt; color:#828282; }
.pagetop { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color:#222222; line-height:12px; }
.comhead { font-family:Verdana, Geneva, sans-serif; font-size:  8pt; color:#828282; }
.comment { font-family:Verdana, Geneva, sans-serif; font-size:  9pt; }
.hnname  { margin-left:1px; margin-right: 5px; }

#hnmain { min-width: 796px; }

.title a { word-break: break-word; }

.comment a:link, .comment a:visited { text-decoration: underline; }
.noshow { display: none; }
.nosee { visibility: hidden; pointer-events: none; cursor: default }

.c00, .c00 a:link { color:#000000; }
.c5a, .c5a a:link, .c5a a:visited { color:#5a5a5a; }
.c73, .c73 a:link, .c73 a:visited { color:#737373; }
.c82, .c82 a:link, .c82 a:visited { color:#828282; }
.c88, .c88 a:link, .c88 a:visited { color:#888888; }
.c9c, .c9c a:link, .c9c a:visited { color:#9c9c9c; }
.cae, .cae a:link, .cae a:visited { color:#aeaeae; }
.cbe, .cbe a:link, .cbe a:visited { color:#bebebe; }
.cce, .cce a:link, .cce a:visited { color:#cecece; }
.cdd, .cdd a:link, .cdd a:visited { color:#dddddd; }

.pagetop a:visited { color:#000000;}
.topsel a:link, .topsel a:visited { color:#ffffff; }

.subtext a:link, .subtext a:visited { color:#828282; }
.subtext a:hover { text-decoration:underline; }

.comhead a:link, .subtext a:visited { color:#828282; }
.comhead a:hover { text-decoration:underline; }

.hnmore a:link, a:visited { color:#828282; }
.hnmore { text-decoration:underline; }

.default p { margin-top: 8px; margin-bottom: 0px; }

.pagebreak {page-break-before:always}

pre { overflow: auto; padding: 2px; white-space: pre-wrap; overflow-wrap:anywhere; }
pre:hover { overflow:auto }

.votearrow {
  width:      10px;
  height:     10px;
  border:     0px;
  margin:     3px 2px 6px;
  background: url("/triangle.svg"), linear-gradient(transparent, transparent) no-repeat;
  background-size: 10px;
}

.votelinks.nosee div.votearrow.rotate180 { display: none; }

table.padtab td { padding:0px 10px }

.rotate180 { transform: rotate(180deg); }

/* --- copyinpublic additions (kept in HN's visual vocabulary) --- */
.stolen { color:#ff6600; }
.badge { font-size:7pt; color:#828282; border:1px solid #d6d6c8; border-radius:2px; padding:0 3px; margin-left:3px; vertical-align:1px; }
.badge.done { color:#ff6600; border-color:#ff6600; }
.src { color:#828282; }
.heat { color:#828282; }
.toptext { font-size:9pt; color:#000; }
.toptext p { margin:8px 0 0; }
.msg { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color:#000; }
.err { color:#c00; font-size:9pt; }
.hnuser.op { color:#ff6600; }
.clonetag { background:#ff6600; color:#fff; font-size:7pt; padding:0 3px; border-radius:2px; margin-left:4px; vertical-align:1px; }
.leaders td { padding:1px 6px; }

/* mobile device */
@media only screen and (min-width : 300px) and (max-width : 750px) {
  #hnmain { width: 100%; min-width: 0; }
  body { padding: 0; margin: 0; width: 100%; }
  td { height: inherit !important; }
  .title, .comment { font-size: inherit;  }
  span.pagetop { display: block; margin: 3px 5px; font-size: 12px; line-height: normal }
  span.pagetop b { display: block; font-size: 15px; }
  table.comment-tree .comment a { display: inline-block; max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align:top; }
  img[src='/s.gif'][width='40'] { width: 12px; }
  img[src='/s.gif'][width='80'] { width: 24px; }
  img[src='/s.gif'][width='120'] { width: 36px; }
  img[src='/s.gif'][width='160'] { width: 48px; }
  img[src='/s.gif'][width='200'] { width: 60px; }
  img[src='/s.gif'][width='240'] { width: 72px; }
  img[src='/s.gif'][width='280'] { width: 84px; }
  img[src='/s.gif'][width='320'] { width: 96px; }
  .title { font-size: 11pt; line-height: 14pt;  }
  .subtext { font-size: 9pt; }
  .votearrow { transform: scale(1.3,1.3); margin-right: 6px; }
  .votearrow.rotate180 { transform: rotate(180deg) scale(1.3,1.3); }
  .votelinks { min-width: 18px; }
  .votelinks a { display: block; margin-bottom: 9px; }
  input[type='text'], input[type='number'], textarea { font-size: 16px; width: 90%; }
}

.comment { max-width: 1215px; overflow-wrap:anywhere; }
@media only screen and (min-width : 300px) and (max-width : 389px) { .comment { max-width: 270px; overflow: hidden } }
@media only screen and (min-width : 390px) and (max-width : 509px) { .comment { max-width: 350px; overflow: hidden } }
@media only screen and (min-width : 510px) and (max-width : 599px) { .comment { max-width: 460px; overflow: hidden } }
@media only screen and (min-width : 600px) and (max-width : 689px) { .comment { max-width: 540px; overflow: hidden } }
@media only screen and (min-width : 690px) and (max-width : 809px) { .comment { max-width: 620px; overflow: hidden } }
@media only screen and (min-width : 810px) and (max-width : 899px) { .comment { max-width: 730px; overflow: hidden } }
@media only screen and (min-width : 900px) and (max-width : 1079px) { .comment { max-width: 810px; overflow: hidden } }
@media only screen and (min-width : 1080px) and (max-width : 1169px) { .comment { max-width: 970px; overflow: hidden } }
@media only screen and (min-width : 1170px) and (max-width : 1259px) { .comment { max-width: 1050px; overflow: hidden } }
@media only screen and (min-width : 1260px) and (max-width : 1349px) { .comment { max-width: 1130px; overflow: hidden } }

/* Best Copies + showcase */
.showcase { margin:10px 0 4px; padding:8px 10px; border:1px solid #e6e6df; background:#fcfcf8; font-size:9pt; max-width:760px; }
.showcase td { font-size:9pt; padding:2px 0; }
b.best { color:#ff6600; }
input.snippet { font:8pt monospace; width:560px; max-width:100%; color:#444; background:#fff; border:1px solid #d6d6c8; padding:3px; box-sizing:border-box; }
table.best { width:100%; }
table.bestgroup { width:100%; max-width:980px; }
.bgh { padding:4px 0 6px; border-bottom:1px solid #e6e6df; }
a.bgname { font-size:11pt; font-weight:bold; color:#000; }
tr.brow td { padding:4px 0; border-bottom:1px solid #f0f0e8; font-size:10pt; vertical-align:top; }
td.bt { width:34%; padding-right:10px !important; }
td.bt a { color:#000; }
td.bc a { color:#000; }
td.bc .src a { color:#828282; }
@media only screen and (max-width: 750px) {
  td.bt, td.bc { display:block; width:auto; border:0 !important; padding:0 !important; }
  tr.brow { display:block; padding:5px 0; border-bottom:1px solid #f0f0e8; }
  td.bc { padding-left:10px !important; font-size:9pt; }
  input.snippet { width:100%; }
}
table.vboard { width:100%; max-width:980px; }
tr.vhead td { padding:2px 10px 2px 0; font-size:8pt; }
tr.vrow td { padding:3px 10px 3px 0; font-size:10pt; border-bottom:1px solid #f0f0e8; white-space:nowrap; }
tr.vrow td a { color:#000; }
tr.vrow.cur td { background:#fff4ea; }
span.bar { display:inline-block; width:60px; height:7px; background:#e6e6df; vertical-align:1px; }
span.bar span { display:block; height:7px; background:#ff6600; }
@media only screen and (max-width: 750px) {
  tr.vrow td { font-size:9pt; padding-right:6px; white-space:normal; }
  tr.vhead td:nth-child(4), tr.vrow td:nth-child(4) { display:none; }
  span.bar { width:30px; }
}