@charset 'utf-8';

/*
CHARACTERS AND FONTS TOPIC STYLE SHEET  J-A-B.NET

________________________________________________________________________________
author: Jens Brueckmann
        http://www.j-a-b.net/

      created: 2004-05-15
last modified: 2009-12-04
________________________________________________________________________________
This CSS may contain some selectors and attributes from CSS3 which are not yet advanced
beyond Working Draft or Candidate Recommendation and should therefore be regarded 
as experimental.
________________________________________________________________________________
Validation:
http://jigsaw.w3.org/css-validator/validator?uri=http://www.j-a-b.net/css/char.css.php&warning=2&profile=css3&usermedium=all
________________________________________________________________________________
This style sheet is published under a Creative Commons License. For more information 
about this license visit http://creativecommons.org/licenses/by-sa/2.0/
________________________________________________________________________________
Comments are welcome :-) Use contact form or mail me at jens[at]j-a-b.net
________________________________________________________________________________
*/

/*__ CHAR __*/
/*__ non proportional fonts ________________________ ~web/char/font-general __*/

dl#cssFontFamilies {
	width: 90%;
	margin: 3em auto;
	}

dl#cssFontFamilies dt {
	font-family: 'Lucida Console', 'Lucida Sans Typewriter Regular', 'Courier New', Courier, monospace;	}

dl#cssFontFamilies dd {
	margin-left: 1em;
	}


img#imgageNonProportional {
	display: block;
	width: 355px;
	height: 240px;
	border: 1px solid #666;
	margin: 2% auto;
	text-align: center;
	}

/*__ example sentence for fantasy rendered fonts __*/
span#exampleFantasy {
	display: block;
	margin: 2% auto;
	text-align: center;
	font-family: 'Harlow Solid Italic', 'Magneto Fett', Palette, 'Comic Sans MS', fantasy;
	font-size: 1.5em;
	line-height: 1.6em;
	}

/*__ fantasy fonts __*/
img#imageFantasy {
	display: block;
	width: 410px;
	height: 435px;
	border: 1px solid #666;
	margin: 2% auto;
	text-align: center;
	}

/*__ ascii characters ________________________________ ~web/char/char-ascii __*/
table#asciiCharacters {
	table-layout: auto;
	}

table#asciiCharacters td {
	border: 1px solid #666;
	text-align: center;
	vertical-align: middle;
	font-family: 'Lucida Console', 'Lucida Sans Typewriter Regular', 'Courier New', Courier, monospace;	line-height: 1.2em;
	}

table#asciiCharacters tr td:first-child+td+td+td,
table#asciiCharacters tr td:first-child+td+td+td+td+td+td+td {
	font-family: 'Arial Unicode MS', Arial, 'Lucida Sans Unicode', Lucida, Tahoma, Helvetica, Verdana, sans-serif;
	font-size: 2em;
	font-weight: bold;
	}

table#asciiCharacters img {
	width: 27px;
	height: 31px;
	}

/*__ iso-8859 listing _____________________________ ~web/char/char-codepage __*/
table#iso8859 {
	table-layout: auto;
	}

table#iso8859 col:first-child {
	width: 10em;
	}

table#iso8859 col:first-child col {
	width: 7em;
	}

table#iso8859 th {
	text-align: left;
	vertical-align: bottom !important;
	}

table#iso8859 td {
	border: 1px solid #666;
	}

table#iso8859 tfoot td {
	margin: 2em 0 0 2em;
	font-size: 0.85em;
	}

/*__ choose charset form __________________________ ~web/char/codepage-test __*/
fieldset#chooseCharset {
	width: 50%;
	padding: 0;
	margin: 4em auto;
	text-align: center;
	}

fieldset#chooseCharset select {
	padding: 0;
	text-align: center;
	}

fieldset#chooseCharset input#inputCharset {
	padding: 0;
	text-align: center;
	}

fieldset#chooseCharset optgroup {
	padding: 0;
	text-align: center;
	}

/*__ codepages __*/
table#codePage {
	table-layout: auto;
	margin: 5em auto;
	text-align: center;
	}

table#codePage th {
	font-size: 0.9em;
	font-weight: normal;
	}

table#codePage th,
table#codePage td {
	border: 1px solid #666;
	}

table#codePage tbody td {
	width: 3% !important;
	padding: 0.2em 0;
	text-align: center;
	vertical-align: middle;
	line-height: 1.15em;
	}

table#codePage tbody tr:first-child td {
	font-size: 1em;
	font-weight: normal !important;
	}

table#codePage td[colspan='2'] {
	font-size: 0.9em;
	font-weight: normal;
	}

td.codeChar {
	background: #666;
	color: #fff;
	}

td.keyChar {
	background: #fff;
	color: #000;
	font-size: 1.2em;
	font-weight: bold;
	}

dl#encodingExample {
	width: 80%;
	border: 0;
	margin: 4em auto;
	}

dl#encodingExample dd {
	width: 100%;
	margin: auto;
	}

/*__ character 196 in different fonts ______________ ~web/char/char-unicode __*/
img#Auml {
	display: block;
	width: 456px;
	height: 405px;
	margin: 2em auto;
	}

/*__ available Unicode fonts with sources __*/
table#unicodeFonts {
	table-layout: auto;
	width: 98%;
	font-size: 0.9em;
	}

table#unicodeFonts col#fontInfo {
	width: 40%;
	}

table#unicodeFonts col#fileSize {
	width: 5%;
	}

table#unicodeFonts col#downLoad {
	width: 10%;
	}

table#unicodeFonts th {
	border: 1px solid #666;
	background: #b0b0b0;
	color: #000;
	}

table#unicodeFonts td {
	border: 1px solid #666;
	text-align: center;
	}

table#unicodeFonts thead td {
	padding: 0.8em 1em;
	border: 0;
	text-align: left;
	font-size: 0.8em;
	line-height: 1em;
	}

table#unicodeFonts tfoot th {
	padding-top: 0.8em;
	}

/*__ glyph examples of fonts _______________________ ~web/char/font-unicode __*/
table#unicodeFontGlyphs {
	border: 0;
	text-align: center;
	font-weight: bold;
	}

table#unicodeFontGlyphs img {
	width: 480px;
	height: 90px;
	border-bottom: 1px solid #999;
	}

/*__ select character range ____________________ ~web/char/char-unicode-bmp __*/
fieldset#chooseRange, form#customRanges fieldset {
	padding: 0.2em;
	margin: 3em auto;
	text-align: center;
	}

fieldset#chooseRange select {
	/*width: 96%;*/
	margin: 3em auto;
	background: #f8f8f8;
	font-size: 0.8em;
	}

/*__ view enlarged character __*/
div#bigChar {
	display: none;
	z-index: 2;
	position: fixed;
	top: 0.8em;
	right: 0;
	width: 20%;
	max-height: 1.8em;
	padding: 0.5em;
	border: 1px solid #666;
	background: #eee;
	color: #000;
	text-align: center;
	font-size: 7em !important;
	/*line-height: 16px !important;*/
	}

div#bigChar div {
	margin-top: 4em;
	white-space: pre;
	font-family: 'Lucida Console', 'Lucida Sans Typewriter Regular', 'Courier New', Courier, monospace;	font-size: 12px;
	font-weight: normal;
	line-height: 14px !important;
	}

div#bigChar div span {
	white-space: normal;
	font: 12px/0 sans-serif;
	}

/*__ Basic Multilingual Plain __*/

table#BasicMultiPlain caption span {
	font-size: 0.8em;
	font-weight: normal;
	}

table#BasicMultiPlain th {
	border: 1px solid #666;
	text-align: center;
	font-size: 0.8em;
	}

table#BasicMultiPlain td {
	width: 5%;
	border: 1px solid #666;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	}

table#BasicMultiPlain td span {
	background: transparent;
	color: #999;
	}

table#BasicMultiPlain col#firstCol, 
table#BasicMultiPlain col#lastCol {
	width: 9%;
	}

/*_________________________________________________ ~web/char/char-specials __*/

img.symbolPicsUnic {
	width: 22px;
	height: 22px;
	margin: auto 0.2em;
	vertical-align: middle;
	}

fieldset#hyphenBoxSettings {
	text-align: center;
	}

fieldset#hyphenBoxSettings legend {
	font-weight: bold;
	}

fieldset#hyphenBoxSettings label {
	font-size: 0.8em;
	}

fieldset#hyphenBoxSettings input#changeBoxSize {
	background: url(../graf/but/resize) no-repeat center center;
	color: #e0e0e0;
	font-size: 1em;
	}

blockquote#shyDemoQuote {
	margin: 2em 0;
	}

p#shyDemo {
	width: 75%;
	padding: 0.5em;
	border: 1px solid #ccc;
	margin: auto;
	background: #fff;
	color: inherit;
	text-align: justify;
	font-style: normal;
	}

p#shyDemo::before {
	display: none;
	}

p#shyDemo::first-letter {
	font-size: 2em !important;
	font-weight: bold !important;
	}

div#exampleJoiner {
	width: 410px;
	margin: 2em auto;
	}

div#exampleJoiner dl {
 	float: left;
	width: 190px;
	padding: 0;
	border: 0;
	margin: 0 5px;
	text-align: center;
	font-size: 0.8em;
	}

div#exampleJoiner dl dt,
div#exampleJoiner dl dd {
	padding: 0;
	margin: 0;
	}

div#exampleJoiner img {
	display: block;
	width: 182px;
	height: 65px;
	border: 1px solid #999;
	margin: 0 auto;
	}

div#exampleJoiner+p {
	clear: both;
	}

/*__ white space and formatting characters __*/

table#specialCharacters {
/* 	table-layout: auto; */
	font-size: 0.8em;
	}

table#specialCharacters col {
	width: 15%;
	}

table#specialCharacters col:first-child {
	width: 10%;
	}

table#specialCharacters col:last-child, 
/*__ IE and Opera __*/
table#specialCharacters col#lastCol {
	width: 30%;
	}

table#specialCharacters th, 
table#specialCharacters td {
	padding: 0 0 0 0.5em;
	border: 1px solid #999;
	overflow: hidden;
	}

table#specialCharacters td.coded {
	background: transparent;
	}

table#specialCharacters tbody th[colspan='6'] {
	background: #cbcbcb;
	color: #000;
	}

table#specialCharacters tbody tr td:first-child {
	font-family: 'Lucida Console', 'Lucida Sans Typewriter Regular', 'Courier New', Courier, monospace;	}

/* table#specialCharacters bdo {
	font-size: 2em;
	font-weight: bold;
	line-height: 2em;
	}
 */
table#specialCharacters span.highlight {
	margin: auto 1px;
	border: 1px solid #ff0;
	font-weight: bold;
	}

.equalHight {
	height: 3em;
	text-align: center;
	vertical-align: middle;
	}

table#specialCharacters td[colspan='6'] {
	padding: 0;
	}

table#bidiRules {
/*  	table-layout: auto; */
	margin: 0;
	}

table#bidiRules col#bidiCount {
	width: 4%;
	}

table#bidiRules col#dirValue {
	width: 9%;
	}

table#bidiRules col#bidiValue {
	width: 14%;
	}

table#bidiRules col#charOrder {
	width: 44%;
	}

table#bidiRules col#bidiOrder {
	width: 29%;
	}

table#bidiRules td {
	text-align: center;
	vertical-align: middle;
	}

table#bidiRules bdo {
	display: inline-block;
	width: 100%;
	height: 3.3em;
	font-size: 12px;
	font-weight: normal;
	line-height: 1.1em;
	vertical-align: middle;
	}

tr.embedUnic {
	background: #efefef;
	}

tr.normalUnic td bdo {
	unicode-bidi: normal;
	}

tr.embedUnic td bdo {
	unicode-bidi: embed;
	}

tr.ignoreUnic td bdo {
	unicode-bidi: bidi-override;
	}

table#bidiRules bdo[dir='rtl'] {
	background: #ffc;
	}

table#bidiRules img {
	width: 22px;
	height: 22px;
	margin: auto 0.2em;
	vertical-align: middle;
	}


/*__ bidi variance ________________________ ~web/char/char-ua-bidi-variance __*/

img#illusBidiVariance {
	display: block;
	width: 489px;
	height: 816px;
/* 	border: 1px solid #999; */
	margin: 2em auto;
	}

/*__ character entities ______________________________ ~web/char/char-names __*/
table#characterEntities, 
table.characterEntities {
	margin: 0 auto;
	text-align: center;
	}

table#characterEntities td {
	padding: 0;
	border: 1px solid #666;
	vertical-align: top;
	}

table.characterEntities td {
	height: 2.1em !important;
	padding: 0;
	vertical-align: middle !important;
	}

table.characterEntities img {
	width: 7px;
	height: 25px;
	vertical-align: middle;
	}

table.characterEntities td span {
	background: transparent;
	color: #808000;
	}

table.characterEntities .glyphEntities {
	width: 15%;
	font-size: 1.6em;
	font-weight: bold;
	}

table.characterEntities .codeEntities {
	width: 35%;
	font-size: 0.80em;
	font-weight: normal;
	}

table.characterEntities th {
	border: 1px solid #666;
	font-size: 0.8em;
	font-weight: normal;
	}
 
/*__ charset names listing ______________________________ ~web/char/charset __*/
dl.charsetNames {
	float: left !important;
	width: 45%;
	padding: 0;
	margin: 1em;
	font-family: 'Lucida Console', 'Lucida Sans Typewriter Regular', 'Courier New', Courier, monospace;	font-size: 0.8em;
	line-height: 1.2em;
	}

dl.charsetNames dt {
	padding: 0;
	margin: 0.3em auto;
	background: #bdc6bd;
	color: inherit;
	}

dl.charsetNames dd {
	padding: 0;
	margin-top: 0.1em;
	margin-bottom: 0.1em;
	}

dl.charsetNames dd::before {
	content: '\2022  ';
	}

dl#lowerLists {
	clear: both;
	}