div.fontinfo_basic{float: left;width:100%;margin: 20px 0 0px 0; background-color: white; padding-bottom: 5px; border-bottom: #c7c7c7 1px solid;} 
div.fontinfo_basic h4{background-color: #2f2f2f;font-size:16px;border-bottom: #f1ca28 2px solid;margin: 0px 0 10px 0; line-height: 30px;color: #e9e9e9;float: left; width: 100%; text-transform: uppercase; border-radius: 4px 4px 0 0;}
div.fontinfo_basic h4 i{float: left; margin: 6px 10px 0 20px;}
div.fontinfo_basic h4 span{float: left;}
div.fontinfo_basic p{float:left; width: calc(100% - 20px);margin: 5px 0 5px 0; padding: 0 10px 0 10px;}

ul.fonts li.editor{ background-color: #e2e2e2;}
li.editor form{float: left;width:100%; margin:0px;}
li.editor form div.box-font{float: left; width: 350px;margin:15px 40px 15px 15px;}
li.editor form div.box-color{float: left;}

div.box-color #red, 
div.box-color #green, 
div.box-color #blue {float: left; clear: left; width: 280px; margin: 10px; }
div.box-color #swatch {width: 90px;height: 75px;margin-top: 10px;margin-left: 320px;background-image: none;  text-align: center;}
div.box-color #swatch i{cursor: pointer; font-size: 50px; margin-top:15px; text-shadow: 0px 0px 2px white;}
div.box-color #red .ui-slider-range { background: #ef2929;}
div.box-color #red .ui-slider-handle { border-color: #ef2929; cursor: e-resize;}
div.box-color #green .ui-slider-range { background: #8ae234;}
div.box-color #green .ui-slider-handle { border-color: #8ae234;  cursor: e-resize;}
div.box-color #blue .ui-slider-range { background: #729fcf; }
div.box-color #blue .ui-slider-handle { border-color: #729fcf; cursor: e-resize; }

div.box-font #custom-handle{width: 3em;height: 1.6em;top: 50%;margin-top: -.8em;text-align: center;line-height: 1.6em; cursor: e-resize;}
div.box-font input[name="textfont"]{font-size: 16px; margin-bottom:20px; width: 338px;padding: 5px; border: #dddddd 1px solid; border-radius:3px;}
div.box-font input[name="textfont"]:focus{border-color: #8c8c8c;}

ul.fonts li div.box a.img img,
ul.fonts li div.box a.img{height: auto;}


div.charmap{float: left; margin: 20px 0 20px 0; background-color: white;  width: calc(100% - 22px); border: #b5b5b5 1px solid;padding: 10px;}
div.charmap ul,
div.charmap ul li{float: left; margin:0px;padding:0px;list-style: none;}
div.charmap ul{width: 100%;}
div.charmap ul li{width: 10%;}
div.charmap ul li div{float: left; position: relative; width: calc(100% - 10px); height: 80px; background-color: #efefef; margin: 5px;}
div.charmap ul li div:hover{background-color: white;}
div.charmap ul li div a{float: left; width: 100%;text-align: center;height: 80px;line-height: 80px;}
div#char-info{position: absolute;display: none;z-index: 10;width: 230px;background-color: #eee;margin: 5px;padding: 5px;border: 1px solid #b1b1b1;box-shadow: 2px 2px 2px gray;}
div#char-info span{float:left;width:100%;line-height: 22px;}
div#char-info span label{float: left;font-size:14px;}
div#char-info span label:first-child{width: 140px;color: #535353;}
div#char-info span label:last-child{font-weight: bold;color: #1960A8;}


@media screen and (max-width:450px){
	div.charmap ul li{
		width: 25%;
	}
}

ul.fonts li div.box div.tool span,
div.boxFont div.tool form{
	width: auto;
}
ul.fonts li div.box div.tool span i{
	font-size: 20px;
}

div#dialogPaste code{
	background-color: #e8e8e8;
	display: table; max-width: 500px;
	padding: 15px; margin-top: 10px;
}