body {
	margin: 0;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	background: #384452;
	color: #ddd;
	min-width: 436px;
}
a { text-decoration: none; color: unset; }
a:hover { border-bottom: 1pt solid; }
#app-toc a:hover, a.no-ul:hover {
	border-bottom: unset;
}
main, footer { padding: 0 1em; }
header, main, footer > div {
	margin: 0 auto;
	max-width: 1120px; /*1307px*/
}
header { height: 50px; }
header img { vertical-align: top; padding: 0 7px; }
header h1 {
	line-height: 50px;
	font-family: "Raleway", sans-serif;
	font-size: 1.4em;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.9px;
	color: #fff;
	margin-top: 0;
}
header h1 span { font-size: 0.7em; color: silver; }
main {
	padding: 0.1em 2em 1.5em;
	background: #fff;
	color: #000;
	border-radius: 10px;
}
footer h4 { border-bottom: 2px solid #ddd; }
footer .col3 div {
	vertical-align: top;
	width: 31%;
	padding: 1%;
	display: inline-block;
}
footer .links {
	text-align: center;
	font-size: 0.9em;
	padding: 1em;
}
footer .links a { color: #ddd; }

#main-nav { float: right; }
#main-nav li { display: inline-block; margin-right: 1em; }
#main-nav img { height: 1.2em; margin: 0 -0.4em; }
#main-nav img:hover { transform: scale(1.2); }

td { padding: 0.2em 1em 0.2em 0.1em; }
.squeeze { max-width: 700px; }
.wrap { word-break: break-all; }

#get-appcheck:hover { color: #586472; }
#get-appcheck img { width: 3em; height: 3em; margin: 0.3em; }
#get-appcheck * { display: inline-block; vertical-align: middle; }

#app-toc { text-align: center; }
#app-toc div {
	display: inline-block;
	width: 140px;
	height: 12em;
	overflow: hidden;
	margin: 5px;
	padding: 16px;
	vertical-align: top;
	background: #eee;
	word-wrap: break-word;
	border: 1pt solid #ccc;
	border-radius: 7px;
}
#app-toc div:hover { background: #BBC6CA; }
#app-toc img {
	margin: 0.5em auto 1em;
	display: block;
}
#app-toc img, #get-appcheck img, #meta img {
	border-radius: 21.5%;
	border: 0.7px solid #ccc;
}
#app-toc span.name { font-size: 0.8em; font-weight: bold; }
#app-toc span.detail { font-size: 0.7em; }

#pagination { text-align: center; margin-top: 2em; }
#pagination a { margin: 0.5em; padding: 0.2em }
#pagination a.active { border: 1pt solid black; border-radius: 0.2em; }

#meta td:nth-child(2) { font-weight: bold }

/* domain tags */
.tags { margin: 2em 0; }
.tags i {
	font-size: 0.9em;
	font-style: normal;
	font-weight: normal;
	background: lightgray;
	padding: 2pt 4pt;
	border: 1pt solid #aaa;
	border-radius: 0.2em;
	display: inline-block;
	margin: 0.12em;
}
.tags i.trckr:before, .tags.trckr i:before, p.trckr:before {
	content: '* ';
	color: red;
	font-weight: bold;
}
.tags i.trckr, .tags.trckr i { background: #DBB; border-color: #C88; }
p.trckr { font-size: 0.8em; }

/* graphs */
.pie-chart { width: 100px; height: 100px; }
.dot-graph span { outline: 3px solid transparent; outline-offset: 2px; }
.dot-graph span:hover { outline-color: black; }
.dot-graph span:hover p { display: inline; }
.dot-graph p {
	display: none;
	position: absolute;
	vertical-align: bottom;
	background: white;
	border: 1px solid #ddd;
	padding: 0.2em;
	margin: -2em 0;
}
.dot-graph i {
	display: inline-block;
	vertical-align: bottom;
	width: 20px;
	height: 20px;
	padding: 0;
	margin: 1px 1px;
}
/* color-bind friendly color palette */
.c0{color:#63ACBE} .cb0{background:#63ACBE}
.c1{color:#601A4A} .cb1{background:#601A4A}
.c2{color:#09F4EC} .cb2{background:#09F4EC}
.c3{color:#1F77B4} .cb3{background:#1F77B4}
.c4{color:#EE442F} .cb4{background:#EE442F}
.c5{color:#7F7F7F} .cb5{background:#7F7F7F}
.c6{color:#0F2080} .cb6{background:#0F2080}
.c7{color:#3b9f35} .cb7{background:#3b9f35}
.c8{color:#F5793A} .cb8{background:#F5793A}
.c9{color:#AC66FB} .cb9{background:#AC66FB}

.cs0{stroke:#3AE48C}
.cs1{stroke:#D11}

/* responsive */
@media(max-width: 647px) {
	header h1 span { display: none; } /* header subtitle */
	footer .col3 div { width: 100%; padding: 0; } /* 3 columns */
	#meta .icons { margin-bottom: 1em; } /* icons beside each other */
	.pie-chart { float: right; }
}
@media(min-width: 648px) {
	#meta .icons { float: right; } /* icons below each other */
	.pie-chart { margin-top: 1em; }
}