:root {
	--color-disabled: #d0d0d0;
	--color-error: #b03f3f;
	--color-inactive: #a0a0a0;
	--color-link-hover: #f26625;
	--color-text-base: #242424;
	--color-text-light: #f7f7f7;
	--font-family-base: 'Helvetica Neue', Helvetica, sans-serif;
	--font-size-base: 16px;
	--line-height-default: 1.4;
	--transition-default: ease-out 0.16s;
}

/* -------------------------------------------------------------------------- */

*,
*:after,
*:before {
	box-sizing: border-box;
}

html,
body {
	color: var(--color-text-base);
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-default);
	margin: 0;
}

a {
	color: inherit;
	transition: color var(--transition-default);
	cursor: pointer;
}

a:hover {
	color: var(--color-link-hover);
}

a:visited {
	color: var(--color-inactive);
}

/* -------------------------------------------------------------------------- */

.page-wrapper {
	padding: 1em;
}

/* -------------------------------------------------------------------------- */

.error-message {
	margin: 0 0 1em;
	padding: 1em;
	background: var(--color-error);
	color: var(--color-text-light);
	font-size: 0.85em;
}

/* -------------------------------------------------------------------------- */

table {
	border-spacing: 0;
	border-collapse: collapse;
}

td,
th {
	padding: 0.33em 0.5em;
	border: 1px solid var(--border-color-default);
}

th {
	text-align: left;
}

thead {
	background: var(--header-bg-color);
}

/* -------------------------------------------------------------------------- */

.page-wrapper {
	max-width: 50em;
	margin: 0 auto;
}

.page-title {
	margin: 0 0 1em 0;
	padding: 0;
	content: '';
	font-size: 1em;
	font-weight: bold;
}

.page-title a {
	color: inherit;
	text-decoration: none;
}

.page-title a:before {
	width: 1.33em;
	height: 1.33em;
	margin-right: 0.5em;
	content: '';
	background: url(ycombinator.svg) center no-repeat / 100%;
	vertical-align: bottom;
	display: inline-block;
}

.post-list {
	margin: 0;
	padding: 0 0 0 2em;
}

.post {
	margin-bottom: 0.5em;
}

.post--placeholder {
	color: var(--color-disabled);
}

.post--placeholder .post-title,
.post--placeholder .post-info {
	background: var(--color-disabled);
}

.post--placeholder .post-title {
	max-width: 25em;
}

.post--placeholder .post-info {
	max-width: 18em;
}

.post--error {
	padding: 0.5em;
	background: var(--color-error);
	color: var(--color-text-light);
	font-size: 0.85em;
}

.post-title {
	display: block;
}

.post-info {
	display: block;
	font-size: 0.66em;
	color: var(--color-inactive);
}

/* -------------------------------------------------------------------------- */

.paging {
	margin: 2em 0 1em;
	padding: 0;
	list-style: none;
}

.paging__page {
	display: inline-block;
}

.paging__page.paging--active {
	font-weight: bold;
}

.paging__page a {
	color: inherit;
	padding: 0 0.5em;
	text-decoration: none;
}


/* -------------------------------------------------------------------------- */

.comments-wrapper {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: white;
}

.comments-content {
	padding: 1em;
	max-height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.comments-wrapper a {
	text-decoration: underline;
}

.comments-close {
	width: 2em;
	height: 2em;
	position: absolute;
	right: 1em;
	top: 1em;
	cursor: pointer;
	background: url(close.svg) center no-repeat / 100%;
	appearance: none;
	-webkit-appearance: none;
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 0.5em;
	color: transparent;
}

.comments-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comments-list > li + li {
	border-top: 1px solid #c0c0c0;
	margin-top: 0.66em;
	padding-top: 0.66em;
}

.comments-list .comments-list {
	margin: 0.66em 0 0 0.66em;
	padding: 0.66em 0 0.5em 0.66em;
	border: solid #c0c0c0;
	border-width: 1px 0 0 1px;
}