/* main.css
// ========
// Copyright �2017 Anthemion Industries�
// www.syntheogen.com
//
// In Chrome, the layout size varies relative to Firefox if the Windows font
// size is changed. It seems that Chrome scales its default zoom relative to
// this value, while Firefox does not. The two match when the Windows font size
// is 125%. */

/* Style reset from meyerweb.com: */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html {
	font-family: 'Open Sans', Verdana, Sans-serif;
	font-size: 1.2rem;
}

body {
	background: #303030 url(back_main.png) repeat fixed;
	color: #D0D0D0;
}

#Cont {
	width: 800px;
	min-height: 100vh;

	padding: 0.4em 1.2rem;
	border: solid #484848;
	border-width: 0 1px;
	margin: 0 auto;

	text-align: justify;
	background-color: #181818;
	box-shadow: 0 0 40px 4px black;
}

div.NavTop {
	margin: 1em 0;

	text-align: center;
	font-family: Verdana, Sans-serif;
	font-weight: bold;
}

div.NavCat {
	margin: 1em 0;

	text-align: center;
	font-family: Verdana, Sans-serif;
	font-weight: bold;
}

div.NavPage {
	margin: 1em 0;

	text-align: center;
	font-family: Verdana, Sans-serif;
}

div.NavTop a, div.NavCat a, div.NavPage a {
	padding: 0 0.4rem;
	/* Prevent link text from wrapping in the middle: */
	white-space: nowrap;
}

a.Self {
	color: #A0A0A0;
}

#BannerIdx {
	text-align: center;
}

#BannerIdx img {
	width: 60%;
	height: auto;
}

.Index h1 {
	margin: -0.5rem 0 1rem 0;

	font-size: 2rem;
}

#Banner  {
	height: 160px;
	margin: 0.6em auto;

	text-align: center;
}

#Banner img {
	max-height: 100%;
}

p.Date {
	display: none;

	margin: -0.8rem 0 1rem 0;

	text-align: center;
	font-family: Verdana, Sans-serif;
	font-size: 80%;
	font-weight: bold;
	color: #A0A0A0;
}

hr {
	height: 3px;
	/* This hides the default rule: */
	border: 0;
	border-bottom: 1px solid #808080;
	margin: 0.75rem 0;
}

/* Hide rules directly after tables, as these have borders that look like a
// rule: */
table + hr {
	display: none;
}

p {
	margin: 0.75rem 0;

	line-height: 1.33rem;
}

em, i {
	font-style: italic;
}

/* For control names: */
strong {
	font-weight: bold;
	font-style: normal;
	color: #FFFFFF;
}

/* For control values: */
var {
	font-weight: bold;
	font-style: italic;
	color: #FFFFFF;
}

dfn {
	font-style: italic;
	color: #FFFFFF;
}

a {
	color: #E7B97D;
}

a:visited {
	color: #A77C49;
}

div.Dlg img {
	width: 100%;
	height: auto;
	/* The dialog images have empty space around them: */
	margin: -0.1rem 0;
}

div.Diag img {
	position: relative;
	width: 96%;
	height: auto;
	left: 2%;
}

/* Scaling a diagram to fit the page breaks the associated image map. Can map
// coordinates be specified as percents?: */
div.DiagNative {
	margin: 1rem 0;
	text-align: center;
}

/* For videos: */
div.Video {
	/* Fluid video sizing from:
	//
	//   https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php:
	*/
	position: relative;
	/* The reciprocal of the video's 5:3 aspect ratio: */
	padding-bottom: 60%;
	height: 0;

	margin: 1rem 0 0 0;
}

div.Video iframe {
	/* Fluid video sizing from:
	//
	//   https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php:
	*/
	position: absolute;
	top: 0;
	/* Reduce the video slightly to match the screenshots: */
	left: 1.5%;
	width: 97%;
	height: 97%;

	/* When stretched to fit the layout, this looks better without a border. */
}

p.Cap {
	margin: -0.4rem 0 1.25rem 0;

	text-align: center;
	font-style: italic;
	color: #FFFFFF;
}

p.CapVid {
	margin: -0.4rem 0 1.25rem 0;

	text-align: center;
	font-size: 85%;
	font-style: italic;
	color: #FFFFFF;
}

h1 {
	margin: 0.6em 0;

	text-align: center;
	font-family: Verdana, Sans-serif;
	font-size: 150%;
	font-weight: bold;
	color: #FFFFFF;
}

h2 {
	margin: 0.6em 0;

	text-align: center;
	font-family: Verdana, Sans-serif;
	font-size: 150%;
	font-weight: bold;
	color: #FFFFFF;
}

h3 {
	font-family: Verdana, Sans-serif;
	font-size: 120%;
	font-weight: bold;
	color: #FFFFFF;
}

h4 {
	font-family: Verdana, Sans-serif;
	font-weight: bold;
	color: #FFFFFF;
}

h5 {
	font-family: Verdana, Sans-serif;
	font-size: 100%;
	font-weight: bold;
	color: #FFFFFF;
}

ul {
	margin: 0.75em 0;
}

ul li {
	line-height: 1.3;
	margin: 1em 1.6em 1em 24px;
	padding-left: 8px;

	list-style-image: url(bullet_circ.png);
}

ul li.Subhead {
	margin-top: -0.6rem;

	list-style-type: none;
	list-style-image: none;
}

ol li {
	margin: 0 0 0.5rem 1rem;
	padding-left: 0.5rem;
}

table {
	margin: 0.75rem 0;
	border-collapse: collapse;
}

thead {
	font-weight: bold;
	color: #EBEBEB;
}

tr {
	border-top: 1px solid #808080;
	border-bottom: 1px solid #808080;
}

td {
	padding: 0.5rem 0;
	border-bottom-style: none;

	vertical-align: top;
	line-height: 1.3;
}

td p {
	margin-top: 0;
}

/* Style first column: */
table td:first-child {
	padding-right: 1rem;
}

table.Btn td:nth-child(2) {
	padding: 0.5rem 1rem;
}

/* Being specific here allows a table with a different class to be nested
// without being affected by this style. 'tbody' is added by the browser, so it
// must be specified here:
//
//   https://stackoverflow.com/a/5568877/3728155
*/
table.HeadLeft > tbody > tr > td:first-child {
	font-weight: bold;
	color: #FFFFFF;
}

table td:last-child {
	padding-right: 0;
}

/* Style first row: */
table.HeadTop tr:nth-child(1) {
	font-weight: bold;
	color: #FFFFFF;
}

div.ColFeat {
	float: left;
	margin: 0 1rem;
}

div.ListFeat {
	margin-bottom: 1rem;
}

div.ListFeat p {
	margin: 0;

	font-weight: bold;
	color: #FFFFFF;
}

div.ListFeat a {
	font-weight: normal;
}

.Clear {
	clear: both;
}

/* For license text: */
.License {
	font-style: italic;
}

sup, sub {
	/* Produces superscript without changing the line height. From:
	//
	//   https://css-tricks.com/snippets/css/prevent-superscripts-and-subscripts-from-affecting-line-height/
	*/
  vertical-align: baseline;
  position: relative;
  top: -0.5rem;
}

sub {
  top: 0.5rem;
}

small {
	font-size: 0.9rem;
	font-style: italic;
	color: #EBEBEB;
}

#Copy {
	margin: 1.5rem 0 0.5rem 0;
}

#CopyLeft {
	float: left;
	width: calc(50% - 2rem);
	padding: 0.5rem 0 0 0;

	text-align: right;
}

#CopyCtr {
	text-align: center;
}

#CopyCtr img {
	width: 3rem;
}

#CopyRight {
	float: right;
	width: calc(50% - 2rem);
	padding: 0.5rem 0 0 0;

	text-align: left;
}

.FloatRight {
	float: right;
	/* This looks a little nicer if it's shifted to cancel some of the padding
	// within the image. This causes the image to move outside the horizontal rule
	// at some widths; is that float drop? It looks okay regardless: */
	position: relative;
	left: 0.5rem;
}

.Changes h4, .Bugs h4 {
	margin: 0.75rem 0;
	font-size: 96%;
	color: #EBEBEB;
}

.Bugs p {
	font-style: italic;
}

/* Welcome banner
// -------------- */

#welcome {
	z-index: 100;
	position: fixed;
	transform: rotate(-45deg);
	width: 50em;
	left: -20.4em;
	top: 1.9em;

	background-color: hsl(32, 50%, 30%);
	padding: 0.25em 0;
	border: 1px solid #E0E0E0;

	box-shadow: -0.5vh 0.5vh 0.5vh rgba(0, 0, 0, 0.5);

	text-align: center;
	font-family: Oswald, sans-serif;
	font-variant-caps: small-caps;
}

#welcome #inside {
	border: 3px dotted #E0E0E0;
	padding: 0.4em 0;
}

#welcome .lines div:nth-child(1) {
	font-family: 'Open Sans', Verdana, sans-serif;
	font-size: 1.175em;
	line-height: 95%;
	transform: scale(1, 0.9);
}

#welcome .lines div:nth-child(2) {
	font-size: 1.1em;
	line-height: 135%;
	font-weight: bold;
}

#welcome .lines div:nth-child(3) {
	font-family: 'Open Sans', Verdana, sans-serif;
	font-size: 1.075em;
	line-height: 100%;
	transform: scale(1, 0.9);
}

@media screen and (max-width: 1400px) {
	#welcome {
		position: absolute;
	}
}

@media screen and (max-width: 1000px) {
	#welcome {
		font-size: 1.5vw;
	}
}

@media screen and (max-width: 450px) {
	#welcome {
		font-size: 1.75vw;
	}
}

@media print {
	#welcome {
		display: none;
	}
}

/* Mobile styles */
/* ------------- */

@media screen and (max-width: 900px) {
	body {
		background-image: none;
	}

	#Cont {
		width: initial;
		border: none;

		box-shadow: none;
	}
}

/* Print styles */
/* ------------ */

@media screen {
	.PrintOnly {
		display: none;
	}
}

@media print {
	.NoPrint {
		display: none;
	}

	body {
		height: unset;
		column-count: 2;
		column-gap: 0.4in;

		font-size: 11pt;
		background: none;
	}

	#Cont {
		width: unset;
		padding: 0;
		border: none;
		margin: 0;

		background-color: none;
		/* In Chrome, the background is still visible when this is 'none' or
		// 'transparent', if 'Background graphics' is checked in the Print
		// dialog: */
		background-color: white;
		box-shadow: none;
	}

	#Banner, .NavTop, .NavCat, #CopyCtr {
		display: none;
	}

	#Cont, p, h1, h2, h3, h4, h5, strong, a, a:link, a:visited {
		color: black!important;
	}

	a {
		text-decoration: none;
	}

	h1, h2, h3, h4, h5, .Cap {
		page-break-after: avoid;
	}

	ul.Circle li {
		list-style-image: none;
		list-style-type: square;
	}

	ul.CircleTwoCol li {
		list-style-image: none;
		list-style-type: square;
	}

	thead {
		color: black;
	}

	table td:first-child, table.Prop td:nth-child(1) {
		color: black;
	}
}