/* Overrides */
* {box-sizing:border-box;}

/* Top-level styles */
body {
	color: #bbb;
	background: #222;
}

/* Header styles */
#header {
	display: flex;
	padding: 0.5em;
}
#header-app-title {
	flex-grow: 1;
	font-size: 1.5em;
	text-align: left;
	vertical-align: center;
}
#header-page-title {
	flex-grow: 3;
	font-size: 2em;
	text-align: center;
	vertical-align: center;
}
#header-user-info {
	flex-grow: 1;
	text-align: right;
	vertical-align: center;
}

/* Link styles */
a {
	color: #4f4;
	text-decoration: none;
}
a:visited {
	color: #696;
}
a:hover {
	color: #fff;
	text-decoration: underline;
}

/* Table styles */
#table {
	display: table;
	width: 100%;
	padding: 1em;
	border: 0.25em outset #272727;
	border-radius: 0.5em;
	box-shadow: 0.2em 0.2em 1em -0.5em #000;
}
#table-header {
	display: table-row;
	font-weight: bold;
	background: #333;
}
.table-row {
	display: table-row;
}
.alt {
	display: table-row;
	background: #333;
}
.table-row:hover {
	background: #272727;
}
.alt:hover {
	background: #373737;
}
#table .select {
	display: table-cell;
	padding: 0.3em 1em;
	text-align: center;
	border-right: 1px solid #222;
}
#table .title {
	display: table-cell;
	padding: 0.3em 1em;
	border-right: 1px solid #222;
}
#table .date {
	display: table-cell;
	padding: 0.3em 1em;
	text-align: center;
	border-right: 1px solid #222;
}
#table .feed {
	display: table-cell;
	padding: 0.3em 1em;
	text-align: center;
}
.unread {
	font-weight: bold;
}

/* Footer styles */
#foot {
	margin-top: 0.5em;
	text-align: center;
}
#pagination {
	margin: 1em;
}

/* General form styles */
input[type = checkbox] {
	font-family: inherit;
	font-size: 100%;
	color: inherit;
	border-radius: 0.25em;
}
button {
	background: #282;
	color: #fff;
	border: 0.25em outset #393;
	border-radius: 0.25em;
	padding: 0.5em 1.5em 0.5em 1.5em;
	box-shadow: 0.2em 0.2em 1em -0.5em #000;
}
button:hover {
	background: #393;
	border-color: #4a4;
}
button:active {
	background: #161;
	border-color: #282;
	border-style: inset;
}
button:disabled {
	background: #444;
	border-color: #555;
}

/* Dialog form styles */
.dialog {
	background: #333;
	width: 50em;
	padding: 1em;
	border: 0.25em outset #444;
	border-radius: 0.5em;
	box-shadow: 0.2em 0.2em 1em -0.5em #000;
}
.dialog input {
	margin: 0.5em;
}
.dialog .inputs {
	display: grid;
	grid-template-columns: 30% 70%;
	margin-bottom: 0.5em;
}
.dialog label {
	text-align: right;
	padding: 0.5em;
}
.dialog .inputs input {
	background: none;
	border: 1px solid #555;
}
.dialog .controls {
	float: right;
}