body
{
	font-family: sans-serif;
	color: #000;
	max-width: 760px;
	margin: 2em auto;
	padding: 0 4px;
}

noscript
{
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	font-style: italic;
	line-height: 20px;
	color: #d21;
	padding: 20px;
	border: 1px #c0c0c0 solid;
	border-radius: 10px;
}

em { font-style: italic; }
strong { font-weight: bold; }

h1 { line-height: 130%; margin-bottom: 1.5em; }

h2 { margin-top: 2.5em; }

h3 { margin-top: 2em; }

p, li { font-family: serif; font-size: 105%; line-height: 130%;}
p.legend { font-style: italic; font-size: 100%; }
li { margin-bottom: 0.3em; }
p.note { padding: 1em; font-size: 100%; font-style: italic; background-color: #fffff2; color: 222223; border-radius: 2px; margin-bottom: 1.5em; }

.dropcaps
{
	display: block;
	float: left;
	font-size: 450%;
	font-weight: bold;
	vertical-align: top;
	line-height: 0.85;
	margin: 0 0.065em -0.2em 0.015em;
	transform-origin: 0 0;
	transform: scaleX(0.9);
	/*color: #181818;*/
	color: #c5353b;
}
.dropcapsMozOSX {
	-moz-transform: translateY(9.5%) scaleX(0.9);
}

.frac_num { font-size: 85%; display: inline-block; vertical-align: top; margin-top: -0.15em; }
.frac_denom { font-size: 85%; }
.frac_num.follows { margin-left: -0.2em; }

blockquote { margin: 1.5em 2em 2em 1.5em; padding: 1em; background-color: #fffff2; }
cite { font-style: italic; }

a.footnote { display: inline-block; font-size: 95%; margin-top: -0.075em; vertical-align: top; text-decoration: none;}
a.footnote:hover,a.footnote:focus,a.footnote:active { text-decoration: underline; }

ul.ref li { padding-left: 1.7em; text-indent: -1.7em; margin-bottom: 0.2em; }
span.refidx { padding-right: 0.2em; }

p.small { font-size: 95%; line-height: 143%; }

figure
{
	margin: 2em 0 0 0.5em;
	padding: 0;
	vertical-align: top;
}

figure.image { margin: 1.5em 0 2em; text-align: center; }
figure.image img.framed { padding: 9px; border: 1px #99999a solid; }
figure.image p.caption { font-style: italic; }
figure.image img { max-width: 100%; height: auto; }

p.author
{
	margin-top: 3em;
	font-style: italic;
}

p.separator
{
	clear:both;
	margin: 0;
	line-height: 50%;
}

figure.codeplateDisplayGroup
{
	min-width: 750px;
}
figure.codeplateDisplayGroup:after
{
	content: '';
	clear: both;
}

.codeplate
{
	display: block;
	position: relative;
	overflow: hidden;
	vertical-align: top;
	float: left;
	background-color: #fff;
}

table.codeGrid
{
	font-size: 90%;
	display: inline-block;
	margin-left: 2em;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
	vertical-align: top;
}

td.codeGridLegend
{
	min-width: 20px;
	min-height: 20px;
	vertical-align: middle;
	text-align: center;
	color: #555;
	font-size: 90%;
}

td.codeGridData
{
	width: 20px;
	height: 20px;
	max-width: 20px;
	max-height: 20px;
	overflow: hidden;
	font-weight: bold;
	vertical-align: middle;
	text-align: center;
	border: 1px #777 solid;
	border-radius: 1px;
	margin: 1px;
	cursor: pointer;
}
td.codeGridData:hover { background-color: #fc6; }
td.codeGridData:active { background-color: #ed1c24; color: #fff; }
td.codeGridData.codeGridActive { background-color: #ed1c24; color: #fff; }
td.codeGridNote
{
	padding-top: 1.5em;
	text-align: center;
	font-style: italic;
	color: #555;
}

td.codeGridCenter
{
	color: #555 !important;
	font-weight: normal !important;
	background-color: #F4F4F4;
	border-color: #aaa !important;
	background-image: url(images/codegrid-origin-lores.png);
	background-positioN: center center;
	background-repeat: no-repeat;
	text-indent: -999px;
}

@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi) {
	td.codeGridCenter { background-image: url(images/codegrid-origin-hires.png); background-size: 22px 22px; }
}

.charInfoPane
{
	display: inline-block;
	margin-left: 2em;
	vertical-align: top;
}
.charInfo
{
	font-size: 90%;
	line-height: 160%;
	padding: 1.5em 0 1.5em 1.5em;
}
.charInfo big
{
	line-height: normal;
}
.infoLabel
{
	display: inline-block;
	min-width: 6em;
	font-variant: small-caps;
}
.charDisplay
{
	display: block;
	margin: 1em 0 2em 3em;
}

#ibm029 .charDisplay { margin-left: 4em; }