body {
	padding: 0 20px;
	margin: 0 0 40px 0;
	background: url('graphics/bg.gif') 0 0 repeat-x;
	color: #1F1F1F;
	font-family: helvetica, verdana, sans-serif;
}

h1, h2 {	padding: 0;	margin: 10px 0 0 0; }
h1{ 
	font-size: 16px; 
	background: url('graphics/character_encoder.gif') 0 0 no-repeat;
	width: 167px;
	height: 19px;
	text-indent: -9000px;
	margin: 13px 0 0 0;
}
h2 { font-size: 12px; }

textarea { background: url('graphics/text_area_bg.gif'); }
.loading { background: #FFF url('graphics/loader.gif') 50% 50% no-repeat; }

textarea, input {
	border: 1px solid #888; 
	padding: 4px;
	margin: 4px 0;
}
textarea:focus { border: 1px solid #F60; outline: 2px solid #F2F2F2; }

#options {
	float:left;
	width: 200px;
	margin: 34px 0 0 10px;
	line-height: 24px;
}

form { margin-top: 10px; }

#textArea { float: left; }

#original { float:left; }

#encode {
	display: block;
	background: #F60;
	color: #FFF;
	margin: 4px 0;
}

#info {
	margin-top: 30px;
	text-align: center;
	padding: 10px;
	background: #FDFFDB;
	border: 1px solid #F2C692;
}

#info .small { font-size: 11px; }

.ad { float: right; }

#chars { padding-top: 30px; clear: left; width: 800px;}

#chars div {
	float:left;
	margin: 4px;
	display: block;
	width: 60px;
	border: 1px solid #ccc;
	text-align:center;
	padding: 14px 4px 8px 4px;
	outline: 2px solid #F2F2F2;
	font-size: 12px;
	color: #CCC;
}

#chars span {
	font-size: 28px;		
	color: #1F1F1F;
	display: block;	
	margin-bottom: 4px;
}

#chars div:hover {
	border: 1px solid #F60;
	outline: 2px solid #FEE5D5;
	color: #F60;
}

#chars div:hover span { color: #F60; }