body{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
	font-size: 16px;
	margin: 0;
	padding: 0;
	background-color: #fff;
	position: relative;
	word-wrap: break-word;
	-ms-text-size-adjust: none;
	overflow-y: scroll;
	visibility: visible;
}
a:link{
	color: #007aff;
}
button{
	font-family: inherit;
	outline: 0;
	background-image: none; /* Override FxOS's gradient bg */
}
pre{
	word-wrap: normal;
}
pre, code{
	font-family: Menlo, Monaco, Inconsolata, Consolas, "Lucida Console", monospace;
	font-size: 12px;
}

#outdated-browser{
	background-color: #fff;
	text-align: center;
	padding: 1em;
	margin: 0;
}
#outdated-browser p{
	margin: 0;
	padding: 0;
	line-height: 1.5em;
}

.icon-refresh{
	display: inline-block;
	width: 14px;
	height: 18px;
	background: transparent url(../images/web/refresh-icon.svg) no-repeat;
	background-size: 14px 18px;
	vertical-align: middle;
	overflow: hidden;
	text-indent: -999px;
}

.view{
	position: relative;
	margin: 0 auto;
	padding-bottom: 1px;
	overflow: hidden;
}
.view.hidden{
	display: none;
}
.view>header{
	border-bottom: 1px solid #ddd;
	background-color: rgba(255,255,255,.95);
	line-height: 44px;
	height: 44px;
	color: #333;
	position: absolute; /* if position:fixed is not supported */
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	z-index: 3;
}
.header-button{
	position: absolute;
	top: 0;
	padding: 7px 5px;
	line-height: 1em;
	cursor: pointer;
}
.header-button button{
	pointer-events: none;
	min-width: 50px;
	height: 30px;
	line-height: 25px;
	font-weight: normal;
	font-size: 15px;
	text-align: center;
	color: #f60;
	padding: 0 4px;
	margin: 0;
	text-decoration: none;
	border: 0;
	background-color: transparent;
	cursor: pointer;
}
.header-button:hover{
	background-color: #F6F6EF;
}
.header-button:active button{
	opacity: .5;
}
.header-button button::-moz-focus-inner{
	padding: 0;
	border: 0;
}
.header-button-icon button{
	min-width: 0;
	padding: 0 8px;
}
.header-button-icon button img{
	vertical-align: text-bottom;
}
.header-back-button button{
}
.header-button-left{
	left: 0;
}
.header-button-right{
	right: 0;
}

#view-comments .header-button-left button,
#view-about .header-button-left button{
	overflow: hidden;
	text-indent: -999px;
	min-width: 32px;
	background-image: url(../images/web/home-icon.svg);
	background-size: 19.5px 17px;
	background-repeat: no-repeat;
	background-position: center;
}

.view>header h1{
	cursor: default;
	padding: 0;
	text-align: center;
	font-size: 1em;
	font-weight: normal;
	margin: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	word-wrap: normal;
}
.view>.scroll{
	overflow: hidden;
	min-height: 9vh;
	margin-top: 44px;
}
.view.shaded>.scroll{
	background-color: #F6F6EF;
}
.view.shaded>.scroll p.foot-label{
	margin: 15px 10px;
	font-size: 13px;
	line-height: 1.4em;
	color: #4c566c;
	text-align: center;
}
.view>.scroll .loader,
.view>.scroll .load-error{
	font-size: 14px;
	color: #666;
	text-align: center;
	padding: 50px 0;
}
.view>.scroll .load-error button{
	border: 0;
	height: 30px;
	line-height: 30px;
	cursor: pointer;
	padding: 0 20px;
	font-weight: 500;
	color: #666;
	margin: 6px auto 4px;
	background-color: #f0f0ea;
	border-radius: 2px;
}
.view>.scroll .load-error button:hover{
	background-color: #e0e0da;
}
.view>.scroll .load-error button:active{
	background-color: #c8c8c8;
}
.tableview{
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: #fff;
}
.tableview li{
	display: block;
	border-top: 1px solid #e0e0e0;
	padding: 10px;
}
.tableview li:first-child{
	border-top: 0;
}
.tableview-links li{
	padding: 0;
	position: relative;
}
.tableview-links li>a{
	line-height: 1.2em;
	color: #000;
	display: block;
	padding: 10px 5px;
	text-decoration: none;
}
.tableview-links li>a:visited{
	color: #888;
}
.tableview-links li>a:hover{
	background-color: #F6F6EF;
}
.tableview-links li>a *{
	pointer-events: none;
}
.tableview-links li>a .number{
	font-weight: lighter;
	text-align: right;
	width: 3.5ex;
	color: #666d74;
	position: absolute;
	left: 5px;
	top: 10px;
}
.tableview-links li>a .story{
	margin-left: 4ex;
	padding-left: 5px;
}
.tableview-links li>a .story b{
	font-weight: normal;
}
.tableview-links li>a .metadata{
	display: block;
	font-size: 14px;
	color: #666d74;
}
.tableview-links li>a:hover .link-text{
	text-decoration: underline;
}
.tableview-links li>a.detail-disclosure{
	padding-right: 44px;
}
.tableview-links li>a.detail-disclosure-button{
	position: absolute;
	top: 0;
	right: 0;
	padding: 0;
	z-index: 2;
	width: 44px;
	height: 100%;
	text-align: center;
	vertical-align: middle;
}
.tableview-links li>a.detail-disclosure-button span{
	display: inline-block;
	width: 17px;
	height: 17px;
	background: transparent url(../images/web/comments-icon.svg) no-repeat;
	background-size: 17px 17px;
	margin: 15px 0;
}
.tableview-links li>a.detail-disclosure-button:active span{
	opacity: .5;
}
.tableview-links li>a.more-link{
	color: #007aff;
	cursor: pointer;
	line-height: 3em;
	padding: 10px;
	display: block;
	text-align: center;
}
.tableview-links li>a.more-link:active{
	opacity: .5;
}

.grouped-tableview{
	margin: 10px 9px 11px;
	padding: 10px;
	border: 1px solid #E0E0E0;
	background-color: #fff;
	border-radius: 2px;
	overflow: hidden;
}
.grouped-tableview + .grouped-tableview{
	margin-top: 0;
}
.grouped-tableview p{
	margin: 0 0 1em;
}
.grouped-tableview p:last-child{
	margin: 0;
}
.grouped-tableview ul,
.grouped-tableview ol{
	margin: 0 0 0 2em;
	padding: 0;
	line-height: 1.5em;
}
ul.grouped-tableview,
ol.grouped-tableview{
	display: block;
	list-style: none;
	padding: 0;
}
ul.grouped-tableview li,
ol.grouped-tableview li{
	display: block;
	border-bottom: 1px solid #E0E0E0;
	padding: 10px;
}
ul.grouped-tableview li:first-child,
ol.grouped-tableview li:first-child{
	box-shadow: none;
}
ul.grouped-tableview li:last-child,
ol.grouped-tableview li:last-child{
	border-bottom: 0;
}
ul.grouped-tableview-links li,
ol.grouped-tableview-links li{
	padding: 0;
}
ul.grouped-tableview-links li>a,
ol.grouped-tableview-links li>a{
	color: #000;
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
	text-decoration: none;
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 1.2em;
}
ul.grouped-tableview-links li>a:hover,
ol.grouped-tableview-links li>a:hover{
	background-color: #F6F6EF;
}

.view .post-content{
	min-height: 4em;
	overflow: hidden;
}
.view .post-content header{
	padding: 10px 15px;
	line-height: 1.2em;
}
.view .post-content header h1,
.view .post-content header p{
	font-size: 1em;
	margin: 0;
	padding: 0;
}
.view .post-content header a{
	display: block;
	text-decoration: none;
}
.view .post-content header h1{
	color: #000;
	font-weight: normal;
	font-size: 1em;
}
.view .post-content header .link-text{
	font-size: 14px;
}
.view .post-content header .metadata{
	font-size: 14px;
	color: #666d74;
}
.view .post-content header .metadata a.external-link{
	color: #666d74;
	text-decoration: none;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-left: 16px;
	background: transparent url(../images/web/external-arrow.svg) no-repeat 0 50%;
	background-size: 12px 10px;
}
.view .post-content header .metadata a.external-link:hover{
	color: #007aff;
}
.view .post-content header + .grouped-tableview{
	margin-top: 0;
}

.view .post-content .poll{
	margin: 0;
	list-style: none;
}
.view .post-content .poll li{
	margin-bottom: 9px;
}
.view .post-content .poll li .poll-details{
	display: table;
	width: 100%;
}
.view .post-content .poll li .poll-details b{
	font-weight: normal;
	display: table-cell;
	color: #333;
}
.view .post-content .poll li .poll-details .points{
	display: table-cell;
	white-space: nowrap;
	color: #888;
	text-align: right;
	vertical-align: bottom;
}
.view .post-content .poll li .poll-bar{
	background-color: #fafafa;
	width: 100%;
	height: 3px;
	overflow: hidden;
	border-radius: 2px;
}
.view .post-content .poll li .poll-bar span{
	background-color: #007aff;
	display: block;
	width: 0;
	height: 3px;
}
.view .post-content pre,
.view section.comments pre{
	margin: 0 0 8px;
	overflow: auto;
	padding: .65em 0;
	background-color: #F6F6EF;
	border-radius: 2px;
}

.view section.comments{
	font-size: 14px;
	background-color: #fff;
	border-top: 1px solid #E0E0E0;
	border-bottom: 1px solid #E0E0E0;
	margin-bottom: 20px;
}
.view section.comments ul{
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.5em;
}
.view section.comments ul li{
	padding: 15px;
	border-bottom: 1px solid #E0E0E0;
}
.view section.comments ul>li:last-child{
	border-bottom: 0;
}
.view section.comments ul ul li{
	padding: 0 0 0 15px;
	border: 0;
	background: transparent url(../images/web/comment-arrow.svg) no-repeat 0 4px;
	background-size: 10px 9px;
	color: #333;
}
.view section.comments p{
	margin: 8px 0;
}
.view section.comments p.metadata{
	color: #666d74;
	padding: 0;
	margin: 0;
}
.view section.comments p.metadata .user{
	font-weight: normal;
	float: left;
	color: #bf223f;
}
.view section.comments p.metadata.deleted{
	margin-bottom: 8px;
}
.view section.comments p.metadata.deleted span{
	float: left;
}
.view section.comments p.metadata .user.op:after{
	content: 'OP';
	display: inline-block;
	font-size: 70%;
	color: #fff;
	background-color: #bf223f;
	padding: 3px 4px;
	line-height: 1;
	margin-left: 5px;
	border-radius: 2px;
}
.view section.comments p.metadata time{
	display: block;
	text-align: right;
	color: #888;
}
.view section.comments p.metadata time a{
	color: #888;
	text-decoration: none;
}
.view section.comments p.metadata time a:hover{
	text-decoration: underline;
}
.view section.comments p.no-comments{
	text-align: center;
	margin: 50px 0;
	color: #666;
}
.view section.comments button.comments-toggle{
	display: block;
	height: 30px;
	line-height: 22px;
	cursor: pointer;
	padding: 0 13px;
	font-size: 1em;
	color: #666;
	margin: 2px 0 6px;
	background-color: #f0f0ea;
	border: 0;
	-webkit-user-select: none;
	border-radius: 2px;
}
.view section.comments button.comments-toggle:hover{
	background-color: #e0e0da;
}
.view section.comments button.comments-toggle:active{
	background-color: #c8c8c8;
}
.view section.comments li.more-link-container{
	padding: 0;
}

.link-text{
	color: #003d80;
	font-weight: normal;
}
.inline-block{
	display: inline-block;
}

/* For modern browsers */
.cf:before,
.cf:after {
	content:"";
	display:table;
}

.cf:after {
	clear:both;
}

#y-icon{
	background: transparent url(../../icons/icon.svg) no-repeat;
	background-size: 57px 57px;
	width: 57px;
	height: 57px;
	float: left;
	border: 1px solid #eee;
	border-radius: 4px;
}
#app-desc{
	margin-left: 67px;
	font-size: 14px;
	color: #666d74;
}
#app-desc strong{
	color: #000;
	font-size: 1rem;
	font-weight: normal;
}

@-ms-viewport{
	width: device-width;
	zoom: 1.0;
}

@viewport{
	width: device-width;
	zoom: 1.0;
}

@media only screen and (min-width: 788px){
	body{
		background-color: #fafafa;
	}
	.view{
		background-color: #fff;
		max-width: 700px;
		box-shadow: 0 0 1px #aaa;
	}
	.view>header{
		position: static;
	}
	.view>.scroll{
		margin-top: 0;
	}
}

@media (prefers-color-scheme: dark){
	body{
		color: rgba(255,255,255,.87);
		background-color: #121212;
	}

	a:link{
		color: #2988cf;
	}
	a:visited{
		color: #c06dc8;
	}

	/* Home */
	.tableview{
		background-color: #121212;
	}
	.tableview-links li>a{
		color: rgba(255,255,255,.87);
	}
	.tableview-links li>a:hover{
		background-color: rgba(255,255,255,.05);
	}
	.tableview-links li>a:visited{
		opacity: .38;
	}
	.tableview-links li>a .metadata,
	.tableview-links li>a .number{
		color: rgba(255,255,255,.6);
	}
	.tableview li,
	.view>header{
		border-color: rgba(255,255,255,.05);
	}

	/* Post */
	.view>header{
		background-color: #1e1e1e;
	}
	.view section.comments,
	.header-button:hover{
		background-color: rgba(255,255,255,.05);
	}
	.view.shaded>.scroll{
		background-color: transparent;
	}
	.view>header h1,
	.view .post-content header h1{
		color: rgba(255,255,255,.87);
	}
	.view section.comments,
	.view section.comments ul li{
		border-color: rgba(255,255,255,.05);
	}
	.view section.comments p.metadata .user{
		color: #e84f66;
	}
	.view section.comments p.metadata .user.op:after{
		background-color: #e84f66;
	}
	.link-text,
	.tableview-links li>a.more-link,
	.view .post-content header .metadata a.external-link:hover{
		color: #2988cf;
	}
	.view .post-content .poll li .poll-bar span{
		background-color: #2988cf;
	}
	.view section.comments button.comments-toggle{
		background-color: #333;
		color: #eee
	}
	.view section.comments button.comments-toggle:active{
		background-color: #555;
	}
	.view section.comments button.comments-toggle:hover{
		background-color: #444;
	}
	.header-button button{
		color: #ff8700;
	}
	.icon-refresh,
	#view-comments .header-button-left button,
	#view-about .header-button-left button,
	.tableview-links li>a.detail-disclosure-button span{
		filter: brightness(1.3);
	}
	.view .post-content pre,
	.view section.comments pre{
		background-color: rgba(255,255,255,.05);
	}
	.view section.comments ul ul li{
		color: rgba(255,255,255,.6);
	}

	/* About */
	.grouped-tableview{
		background-color: rgba(255,255,255,.05);
	}
	#app-desc strong,
	ol.grouped-tableview-links li>a,
	ul.grouped-tableview-links li>a{
		color: rgba(255,255,255,.87);
	}
	.grouped-tableview,
	ol.grouped-tableview li,
	ul.grouped-tableview li{
		border-color: rgba(255,255,255,.05);
	}
	.view.shaded>.scroll p.foot-label,
	.grouped-tableview p{
		color: rgba(255,255,255,.6);
	}
	ol.grouped-tableview-links li>a:hover,
	ul.grouped-tableview-links li>a:hover{
		background-color: rgba(255,255,255,.05);
	}

	@media only screen and (min-width: 788px){
		.view{
			background-color: #121212;
		}
	}
}
