/** some sane defaults **/
html, body { background:white; color:var(--text-primary-color); font-family:sans-serif; }
body { margin:0; }

h1, h2, h3 { margin-bottom:0; padding-bottom:0; font-weight:bold; }
h1 { font-size:2em; font-weight:bold; }
h2 { font-size:1.5em; }
h3 { font-size:1.25em; }
h4 { font-size:1.17em; }
p { margin-top:0; padding-top:0; }
ul, ol, dl { margin-top:0; padding-top:0; text-indent:0 }
hr { width:calc(100%-2em); }

table { border-collapse:collapse; }
th, td { border:solid thin var(--divider-color); padding: 0.2em 0.4em; }
tfoot td { padding:0; }

main {
	width:100%;
	display:flex; flex-direction:column; align-items:center;
	overflow:hidden;	
}
article { margin:1em 0; padding:0 1em; }
article aside figure img { max-width:50vh; }
@media(min-width:480px) {
	article aside { float:right; clear:right; } /* float aside once the viewport is wide enough */
}

figure { text-align:center; margin:0; padding:0 1em 1em 1em; }
figcaption { margin:1em; }
figure img { border:solid thin var(--divider-color); }

/** utility classes **/
input[type=checkbox].checkbox-hack, input[type=radio].checkbox-hack { display:none; }
.scrim {
	background:#666;
	margin:0;
	display:none;
	position:fixed;
	top:0; bottom:0; left:0; right:0;
	z-index:-1;
	opacity:1;
	transition:all 1s;
}

/** side panel functionality **/
body { min-height:100vh; display:flex; flex-direction:column; }
body>div { flex-grow:1; display:flex; flex-direction:row-reverse; flex-wrap:wrap; justify-content:flex-end; align-content:flex-start; align-items:flex-start; }
#nav-toggle-button { cursor:pointer; }
body>div>aside>nav {
	position:fixed;
	top:0; bottom:0; left:0;
	overflow-x:hidden;
	overflow-y:auto;
	width:0;
	max-width:80%;
	z-index:2;
	transition:all 1s;
}
#nav-toggle:checked + aside>.scrim { z-index:1; display:block; opacity:0.8; }
#nav-toggle:checked + aside>nav { width:auto; }
@media(min-width:1600px) {	/* 1600 is an arbitrary value picked by Material Design */
	/* When display is wider than limit, always show panel... */
	body>div>aside { max-width:15%; padding:2em; box-sizing:border-box; }
	body>div>aside>nav { position:initial; width:auto; max-width:initial; box-shadow:0px 1px 3px var(--shadow-color); }
	
	/* ...but not supporting elements... */
	#nav-toggle-button { display:none; }
	#nav-toggle:checked + nav>.scrim { display:none; opacity:1; }
	
	main { max-width:85%; }
}

/** pretty things up a bit **/
thead, tbody { border:solid thin var(--divider-color); }
td, th { border:none 0px; }
th, th a:link, th a:visited, th a:hover { color:var(--text-invert-color); }
th { background:var(--default-primary-color); }
tbody tr:nth-of-type(even) { background:var(--light-primary-color); }

dl { display:grid; grid-template-columns:5fr 8fr; grid-gap:0.5em; }
dt { grid-column:1/2; text-align:right; }
dd { grid-column:2/3; margin:0; }

a:link, a:visited { color:var(--text-secondary-color); text-decoration:none }
a img { border:0 none; margin:0; padding:0; text-align:middle; }

body>header {
	background:var(--default-primary-color);
	color:var(--text-invert-color);
	box-shadow:0px 1px 3px var(--shadow-color);
	margin:0; padding:1em;
	display:flex; flex-direction:row; align-items:center;
}
body>header div { flex-grow:1; text-align:center; }
body>header h1 { margin:0; }
body>header a:link, body>header a:visited { color:var(--text-invert-color); }
#nav-toggle-button { margin:0; font-size:2em; }

body>footer { text-align:center; font-size:smaller; }

article header {
	display:flex; flex-direction:row; align-items:center;
	margin:1em 0 0.2em 0;
}
article header h1 { margin:0; }
article header .button-group { margin:0 0 0 1em; }

/** breadcrumbs **/
.breadcrumbs {
	list-style-type:none;
	width:100%; box-sizing:border-box;
	margin:0; padding:0.5em 1em;
	display:flex;
}
.breadcrumbs li:after { content:'>'; padding:0 0.5em; }
.breadcrumbs li:last-of-type:after { content:''; padding:0; }

/* form looks */
.form-field {
	margin:1em 0;
	display:grid; grid-template-columns:3fr 5fr; grid-gap:0.5em; align-items:center;
}
label { grid-column:1/2; text-align:right; }
input { grid-column:2/3; }
@media(max-width:20em) {
	input { max-width:10em; }
}
.form-field p { grid-column:1/3; text-align:right; font-size:smaller; }

.button-group { text-align:right; margin:1em 0em; }
.button-group a, .button-group a:visited, .button-group label, .filepicker label, button {
	margin:0.5em; padding:0.3em 0.6em;
	background:var(--accent-color);
	color:var(--text-invert-color);
	border:solid thin var(--divider-color); border-radius:4px;
	box-shadow:0 1px 3px var(--shadow-color);
	font-size:1em; font-family:sans-serif;
	cursor:pointer;
	text-align:center;
	flex-grow:1;
}
.button-group a.default, .button-group label.default, button.default { background:var(--dark-accent-color); }
.button-group>*:first-child { margin-left:0; } /*  obviously this and the next statement assumes ltr (not rtl) layout */
.button-group>*:last-child { margin-right:0; }

.check-box input { margin-right:auto; }

.filepicker { display:flex; flex-direction:column; align-items:center; margin:1em 0; }
.filepicker input[type=file] { opacity:0; height:0; }
.filepicker input:disabled + label { background:var(--light-accent-color); };
.filepicker .preview { display:none; text-align:center; }
.filepicker .preview img { max-width:50%; display:block; margin-left:auto; margin-right:auto; }
.form-field .preview p { text-align:center; }

.radio-button-list { margin:0.5em 0; padding:0; list-style-type:none; }
.radio-button-list .form-field { margin:0.3em 0; grid-template-columns:1fr 5fr; }
.radio-button-list li { margin:0; padding:0.2em; text-align:left; }
.radio-button-list label { grid-column:2/3; -ms-grid-column:2; text-align:left; }
.radio-button-list input[type=radio] { grid-column:1/2; -ms-grid-column:1; margin-left:auto; margin-right:0.7em; }

.text-area { display:block; }
.text-area label, .text-area textarea { display:block; width:100%; text-align:left; }

/* side panel looks */
body>div>aside>nav header {
	background:var(--default-primary-color);
	color:var(--text-invert-color);
	display:flex;
	flex-direction:column;
	align-items:center;
	margin:0; padding:1em 2em;
}
body>div>aside>nav { background:white; }
body>div>aside>nav>div {
	background:white;
	box-shadow:0px 1px 3px var(--shadow-color);
}
body>div>aside>nav ul {
	list-style-type:none;
	margin:1em 0; padding:0;
}
body>div>aside>nav li {
	padding:0.2em 0.5em;
}

.user-picture { 
	background:white;
	color:black;
	border-radius:100%;
	width:1.1em; height:1.1em; font-size:5em; text-align:center;
	margin:0.2em 0;
}

/** lightbox layout **/
.lightbox { display:flex; flex-wrap:wrap; justify-content:flex-start; }
.lightbox > * { width:20em; margin:0 1em; }
@media(min-width:46em) {
	.lightbox > header, .lightbox .full-width { width:46em; }
}
@media(min-width:68em) {
	.lightbox > header, .lightbox .full-width { width:68em; }
}
@media(min-width:90em) {
	.lightbox > header, .lightbox .full-width { width:90em; }
}
@media(min-width:112em) {
	.lightbox > header, .lightbox .full-width { width:112em; }
}
@media(min-width:134em) {
	.lightbox > header, .lightbox .full-width { width:134em; }
}
@media(min-width:156em) {
	.lightbox > header, .lightbox .full-width { width:156em; }
}

/** Notifications **/
#notifications { position:absolute; top:0; right:0; margin:1em; list-style-type:none; display:flex; flex-direction:column; z-index:1; }
#notifications li div { background:var(--dark-primary-color); color:var(--text-invert-color); padding:0.5em; border-radius:0.5em; margin-bottom:0.5em; }
#notifications li div label { float:right; padding-left:1em; }
#notifications li input[type=checkbox] { display:none; }
#notifications li input[type=checkbox]:checked ~ div { display:none; }

#notifications li.notice div { background:var(--dark-primary-color); }
#notifications li.success div { background:var(--success-color); }
#notifications li.error div { background:var(--error-color); }

/** Dialog **/
.dialog {
	background:white;
	padding:0.5em 1em;
	box-shadow:0px 1px 3px var(--shadow-color);
	max-width:70%;
	margin:2em auto;
}

/** In Page Popover **/
.in-page-popover { 
	display:none;
	position:fixed;
	top:0; left:0; bottom:0; right:0;
	margin:0; width:100vw;
	z-index:2;
	justify-content:center;
	align-items:center;
}
input[type=checkbox]:checked + .in-page-popover {
	display:flex;
}
input[type=checkbox]:checked + .in-page-popover .scrim { display:block; opacity:0.8; }
.in-page-popover .dialog {
	background:white;
	padding:0.5em 1em;
	box-shadow:0px 1px 3px var(--shadow-color);
	max-width:60%;
}

/* responsive table */
article { max-width:calc(100% - 2em); }
.responsive-table-wrapper { max-width:100%; overflow-x:auto; }

/** Pagination Links **/
.pagination { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; padding:0.5em 0; }
.pagination > * { margin:0; padding:0; text-indent:0; }
.pagination ul li { display:inline; }

/** Tab control **/
.tabs { margin:1em; }
.tabs > ul { list-style-type:none; display:flex; justify-content:center; margin:0; padding:0; text-indent:0; border-bottom:solid 2px var(--dark-primary-color); box-sizing:border-box; }
.tabs > ul > li { display:block; box-sizing:border-box; }
.tabs > ul > li > label { font-size:1.25em; padding:0.2em 1em 0 1em; margin:0 0.1em; background:var(--accent-color); border-radius:0.3em 0.3em 0 0; box-sizing:border-box; }
.tabs > ul > li > input[type=radio]:checked + label { background:var(--default-primary-color); color:var(--text-invert-color); }
.tabs > div { display:none; }
.tabs > div:first-of-type { display:block; }
.tabs .tab>p, .tabs .tab>dl, .tabs .tab>ul { padding:1em; }

/** status bubbles **/
.status-bubble, a.status-bubble { background:var(--normal-status-color); color:var(--text-invert-color); border-radius:1em; padding:0.1em 0.4em; font-family:monospace; }
.status-bubble.important, a.status-bubble.important { background:var(--important-status-color); }
.status-bubble.critical, a.status-bubble.critical { background:var(--critical-status-color); }