#fontmenu {margin: 0px; padding:2px;vertical-align:top;list-style-type:none;display: inline-block; }
#font_info {float: left;width:600px;margin-left: 50px;margin-right: auto;}
#liga_info {margin-left: auto;margin-right: auto;}
#message {position: relative;top: -3px;color: black;padding: 1px 5px;font-weight: bold;border-radius: 2px;display: none;}
.message {clear: both;font-style: oblique;}
#glyphs {width: 950px;}
#glyphsNumber{font-weight: bold;font-size:17px;}
div.page-selected {font-weight: bold;} 
.charmapPage_button{padding:2px 6px;border:1px solid #c8c8c8;border-radius:3px;text-decoration:none}
.charmapPage_button:hover{color:#000;padding:2px 6px;border: 1px solid #c00;text-decoration:none}  
.top_charmap {padding: 15px 0px;}
canvas.text {border: 1px solid #ddd;box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2);margin-bottom: 0px;}
canvas.item {float: left;border: solid 1px #c8c8c8;margin-right: -1px;margin-bottom: -1px;}
canvas.item:hover {background-color: #f8f9f9;}
canvas.item.pua {background-color: #ff6;}
canvas.item.pua:hover {background-color: #bdbd00;}
canvas.item.preview {background-color: #c7dffd;}
canvas.item.preview:hover {background-color: #adc3df;}
canvas.item {float: left;border: solid 1px #c8c8c8;margin-right: -1px;margin-bottom: -1px;}
.item:hover {background-color: #f8f9f9;}
.selected {background-color: #f8f9f9;}
.item.pua {background-color: #ff6;}
.item.pua:hover {background-color: #bdbd00;}
.item.preview { background-color: #c7dffd;}
.item.preview:hover {background-color: #adc3df;}
.item {min-width: 120px; min-height: 162px; float: left;border: solid 1px #c8c8c8;margin-right: -1px;margin-bottom: -1px;overflow: hidden;cursor: pointer;}
.info{height: 38;color: #C8C8C8;padding: 4px 5px 0px 5px;}
.chars{ font: 20px Arial, sans-serif; height:23px;white-space: nowrap;overflow:hidden;background: linear-gradient(to right, #C8C8C8 90%, #fff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
@font-face {font-family: "supernatural_10_01"; src: url("../ttf/s/u/supernatural0.ttf") format("truetype");}
.unicode{ font-family: supernatural_10_01; font-size: 10px; padding-left: 1px; color: #C8C8C8;}
div.sticky2 { position: fixed;width:100%;bottom: 0;left:0;background-color: yellow;}
#toggleDiv {height: 162px;margin-top: -162px;position:relative;}
#glyph-full::before {box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);}
.animate { animation: disappear 2s linear; }
.copyAlert { opacity: 0; font-size:12px; vertical-align: middle}
@keyframes disappear {
  0%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}
#glyph-full {z-index: 2;box-shadow: 0 -5px 10px -6px #CCC;height: 230px;background-color: white;}
#glyphContainer {display:flex;margin-left:auto;margin-right: auto;align-items: center;justify-content: center;}
#glyphInfo {opacity: 0.7;display:inline-block;height:210px;border-left:1px solid #c8c8c8;}
#glyph-hide {opacity: 0.3;font-size: 50px; z-index:5; cursor:pointer; float:right;top:0px;right:0px;margin-top: -150px;}
#glyph-hide:hover { opacity: 0.2;}
#infoGlyph {margin-left: 30px;min-width: 300px;}
#unicodeGlyph {margin:0;font-size: 20px;display:inline-block;min-width: 75px;}
#infoGlyph_info {vertical-align: middle;font-size: 50px;padding: 0px 15px 0px 13px;z-index: 5;font-size: 16px;display: inline-block;min-width:250px;}
#infoGlyph_info .name {font-size: 28px;display:inline-block;}
#infoGlyph_info .glyph {font-size: 35px;display:inline-block;}
#infoGlyph_info button {line-height: 2;display: inline-flex;align-items: flex-end;bottom: 4px;position: relative;cursor:pointer;}
#infoGlyph_info button img {max-width: 100%; height: auto; }
#infoGlyph_copy {font-size: 16px; display:inline-block; vertical-align: middle; position: absolute; margin-top:15px; cursor: pointer; color: grey; }
#titleGlyph {font-size: 35px;}
#glyph-display {margin-right: 50px; min-width:300px; flex-shrink: 0; }
#glyph-display canvas {float:right; display:block; margin-left: auto; z-index: 4; position: relative;  }
#glyph, #glyph-bg {margin-left:auto; margin-right:auto; display:block; top:5px; }
#glyph-data {float: right; margin-right: 50px; display: flex; flex-flow: column nowrap; height: 230px; }
#glyph-data dl {margin: 0; }
#glyph-data dt {float: left; }
#glyph-data dd {margin-left: 12em; }
#glyph-contours {flex: 1 1 0;overflow: auto;}
#glyph-data pre {font-size: 11px; }
pre:not(.contour) {margin: 0; }
pre.contour {margin: 0 0 1em 2em; border-bottom: solid 1px #a0a0a0; }
span.oncurve {color: blue; }
span.offcurve {color: red; }
.disabled {color: gray;}
#loader {border: 12px solid #f3f3f3;border-radius: 50%;border-top: 12px solid #444444;width: 70px;height: 70px;margin-top: 30px;animation: spin 1s linear infinite;opacity: 0.5;}

@keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}

.loadercenter {position: absolute;margin-left: auto;margin-right: auto;left: 0;right: 0;text-align: center;}