body {
	font-size: 0.85em;
}
body, html {
	margin:0;padding:0;height:100%;width:100%;
}
a {
	color: inherit;
}
#main, #statusbar, p, #menu, #folders, #messages, #messagelist, #previewpane {
	margin:0;
	padding:0;
	display: block;
}
#main {
	width: 100%;
	height: calc(100% - 50px);
}
#statusbar {
	height: 25px;
	width: 100%;
	font-size: 0.9em;
	background-color: #323232;
	display: flex;
	align-items: center;
}
#statusbar, #statusbar a {
	color: white;
}
#clientname {
	padding-left: 5px;
	padding-right: 10px;
}
#menu {
	width: 100%;
	height: 25px;
	background-color: gray;
}
#menu > div {
	display: inline-block;
}
#menu-left {
	float: left;
	padding-left: 5px;
}
#menu-center {
	padding-left: 25px;
}
#menu-right {
	float: right;
}
#btn-upload {
	/* display: none doesn't have any effect, but these do: */
	width: 1px;
	height: 1px;
	overflow: hidden;
}
#btn-upload-label {
	/* Make it look like a button */
	cursor: pointer;
	background-color: #f0f0f0;
}
.folder-icon {
	font-size: 0.9em;
}
#folders {
	height: 100%;
	width: 250px;
	overflow: auto;
	background-color: tan;
	float: left;
	/* padding-left: 5px; - nope, this shifts the message list UNDERNEATH */
}
#messages {
	width: calc(100% - 250px);
	height: inherit;
	float: left;
	overflow: none;
}
#media (min-width: 1600px) {
	#folders {
		width: 275px;
	}
	#messages {
		width: calc(100% - 275px);
	}
}
#media (min-width: 1750px) {
	#folders {
		width: 325px;
	}
	#messages {
		width: calc(100% - 325px);
	}
}
#messages > div {
	background-color: white;
	width: 100%;
	overflow: auto;
	max-height: 100%;
}
#messagelist {
	padding-bottom: 10px;
	max-height: calc(100% - 75px); /* Always leave at least some room for the message preview pane XXX doesn't work? */
}
#messagetable > tr {
	/* border doesn't seem to work for tr elements */
	outline: thin solid black;
}
#messagetable td {
	padding-right: 8px;
}
#previewpane {
	border-bottom: 1px solid black;
	border-top: 2px solid black;
	padding-top: 10px;
	/* padding-left: 5px; - nope, this adds a horizontal scrollbar! */
}

#menu input, #menu form {
	display: inline-block;
}

#folders > ul {
	display: table;
	margin: 0;
	padding: 0;
}
#folders ul {
	padding-left: 0;
}
#folders ul li {
	display: table-row;
}
#folders ul li a:hover {
	background-color: #ccc;
}
.folder-current { background-color: #BDA27E; }
.folder-hasunread, .messagelist-unread { font-weight: bold; }
.folder-marked { background-color: #f9aeae; }
.messagelist-recent { background-color: #f9aeae; }
.foldername, .foldercount, .foldersize { display: table-cell; padding: 1px 3px; }
.foldercount, .foldersize, .message-size { text-align: right; }
#messagepages { text-align: center; }
.message-current {
	background-color: #E1E572;
	font-weight: 500;
}

.priority-high {
	color: maroon;
	font-weight: 900;
}
.priority-low {
	color: #0072C6;
	font-weight: 900;
}

#errorbar {
	text-align: center;
	background-color: white;
}
#status-right {
	padding-right: 5px;
	font-weight: 500;
	margin-left: auto; /* https://stackoverflow.com/questions/22429003/how-to-right-align-flex-item */
}
#uidnext, #uidvalidity, #quota {
	padding: 0 5px;
	font-weight: 500;
	display: inline-block;
}
.quota-warning {
	color: #d40c0c;
}