@font-face {
    font-family: 'ralewaywf';
    src: local('Raleway'),
         url('../shared/webfonts/raleway-regular-webfont.woff2');
    font-weight: normal;
    font-style: normal;
	}



/* special rule for styling the matrix for glyph capture */
/* should normally be commented out
#chart td.ch {
	font-family: 'Noto sans lao', dhyana, 'Saysetthi OT' !important;
	font-size: 30px;
	color: #777;
	padding-left:10px;
	} */



body { 
	background: white; 
	color: black;
	font-size: 14px; 
	font-family: raleway, 'arial unicode ms', Arial, Helvetica, sans-serif;
	margin: 0;
	}


button {
  cursor: pointer;
}

.dim {
	background-color: #F9F5DE;
	background-color: #f2f2f2;
	color: #ccc;
}
.dim img {
	opacity: 0.1;
	filter: alpha(opacity=10);
}
.empty {
	background-color: #f2f2f2;
}

.generalButton {
    background: antiquewhite;
    border: 0;
    padding: .3rem;
    border-radius: .3rem;
    color: black;
    }

/* header */

header { 
	font-family: adobe-clean,"Helvetica Neue",robotolight,calibri,corbel,"Segoe UI",helvetica,sans-serif;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.75;
	color: #666;
	text-align: justify;
	}
#site-navigation {
    float: right;
    background-color: #FFF;
    color: #000;
    width: 28%;
    clear: right;
    text-align: center;
	}
#bp_picture.compact {
    margin-top: 1em;
    margin-bottom: 0px;
}
#bp_picture {
    margin-top: 5em;
    margin-bottom: 0em;
    margin-left: 20px;
    display: block;
}
img {
    border: 0px none;
	}
#topbar {
    text-align: left;
    font-size: 150%;
    color: #a52a2a;
    background-color: #F5F5F5;
    padding: 5px 5px 5px 10px;
    margin: 0px 29% 0px 0px;
    line-height: 1.1;
	}
#topbar a:link , #topbar a:visited {
    color: #a52a2a;
	background-color: transparent;
    text-decoration: none;
	}
#sitelinks {
    padding-left: 10px;
    line-height: 24px;
	}
#sitelinks a {
    color: #808080;
	}
#line {
    position: absolute;
    left: 71%;
    top: 0px;
    width: 10px;
    /*border-left: 2px dotted #005A9C;*/
    height: 4.5em;
	}
/* end header */




#dialogue { vertical-align: bottom; }




#listpanelSub { height: 10.5em; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; }

#showProperties { line-height: 1; /*margin-bottom: 1em;*/ }

#locallistLabel { font-size:80%; margin-left:10px; margin-bottom: 5px; }

#propertyResultCount { display: none; float:right; font-size: 80%; vertical-align:top; }




#cparea { height: 12em; display: flex; flex-direction: column; justify-content: space-between; padding: 5px; }

#textBoxControls { display: flex; flex-wrap: nowrap; justify-content: space-between; flex-direction: row; }










/* STYLES FOR RIGHT PANEL CONTENT */

.copyme {
    cursor: pointer;
    cursor: copy;
    }
.copyme:hover {
    background: antiquewhite;
    }
.copyme:hover::after {
    content: url('../shared/images/copytiny.svg');
    display: inline-block;
    margin-left: 1rem;
    vertical-align: middle;
    height: 1rem; width: 1rem;
    }
.characterSpan {
    display: inline-block;
    min-width: 2em;
    }

.padBlockStart {
    padding-block-start: 18px;
    }
.padBlockEnd {
    padding-block-end: 18px;
    }

#characterName {
    margin-block-start: 10px;
    }
.descSymbol {
    font-size: 2em;
    display: inline-block;
    min-width: 2rem;
    text-align: center;
    }
.descLine {
    line-height: 1rem;
    }
.descCharacterSpan {
    display: inline-block;
    min-width: 2em;
    font-size: 1.4rem;
    margin-inline: .5rem;
    text-emphasis: center;
    text-align: center;
    }

summary {
    cursor: pointer;
    }








label { cursor: pointer; }


#tags {
	margin: 2em 0 0 1em ;
	}
#tags a { color: #aaa; }

div[role='main'] {
	margin: 0 8px;
	}

form { 
	margin:0; 
	padding: 0; 
	display: inline; 
	}
input, select, textarea { border-radius: 5px; }
div#notescontainer {   /* REMOVE THIS ? */
	display: none; 
	}
#dboutput { 
	display: block; 
	}
#dboutput p { 
	margin-bottom: 0.75em;
	line-height: 1.2em;
	}
	
#title {
	font-weight:bold; 
	color: #a52a2a;
	font-size: 120%;
	}
.help {
	cursor: pointer; 
	}
.help:hover {
	border-bottom: 1px dotted #a52a2a;
	}
.adjustChrome, adjustChrome option, adjustChrome input {
	color: gray;
	}

td { vertical-align: bottom; }
div.cmdGroup {
	text-align: left;
	background:url(images/background.png) no-repeat top left;
	border-bottom: 1px solid #a52a2a; 
	padding: 0;

	color: #a52a2a;
	}
div.rightcorner {
	background:url(images/backgroundRight.png) no-repeat top right;
	margin: 0;
	padding: 4px;
	}	
.leftedge {
	background:url(images/leftedge.png) no-repeat top left;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #a52a2a; 
	color: #a52a2a;
	}	
.centre {
	background:url(images/centre.png) repeat-x top left;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #a52a2a; 
	padding: 0;
	color: #a52a2a;
	}	

:link, :visited {
	color: teal;
	/*background: white;*/
	text-decoration: none;
	}
#controls {
	border-collapse:collapse;
	}
input { border: 0; margin: 2px; }
select { border: 0; margin: 2px; }

#addCommands {
	position: absolute;
	top: 20px;
	right: 20px;
	display: block;
	border: 1px solid #a52a2a;
	padding: 1em; 
	background: white;
	color: #a52a2a;
	}
#addCommands div { 
	margin-bottom: 10px; 
	}
#addCommands input { 
	border: 1px dotted #a52a2a; 
	}
#notesfiles {
	position: absolute;
	top: 4em;
	left: 2em;
	display: block;
	border: 1px solid #a52a2a;
	padding: 1em; 
	background: white; 
	}


/*.propsTable	{ font-family: "Arial Narrow"; font-size: 1.1em}*/
.largeChar	{ font-size: 72pt;  }
.selectedChar 	{ font-family: "Arial Unicode MS", Specials, sans-serif; font-size: 32pt; color: gray; margin-top: 0px; margin-bottom: 0px; 
		border: 1pt solid gray; }	
.chartChar	{ font-size: 1.3em; }
.listChar		{ font-size: 0.9em; }
.label		{ font-family: "Arial Unicode MS", sans-serif; font-size: 16px; margin-top: 0pt; margin-bottom: 0pt; }
.hi		{ font-family: mangal, serif; }

p		{ margin-top: 0; margin-bottom: 0; }
.ipa { 
	font-size: 1em;
	font-family: "Doulos SIL", "Charis SIL", Gentium, "arial unicode ms", serif;
	}
.ipa:before { content:'/'; }
.ipa:after { content:'/'; }

/* #listOutput {
	overflow: auto;
	float: left; 
	width: 49%; 
	margin-top: 1em;
	}*/
#listOutput {
	overflow: scroll;
	position: fixed; 
	left: 2rem;
	width: 48%; 
	/*height: 1200px;*/
	margin-top: 1em;
	scrollbar-color: tan white;
	scrollbar-width: none;
	scrollbar-width: thin;
	}

#charOutputWrapper {
	overflow: scroll;
	position: fixed; 
	right: 0;
	width: 48%; 
	/*height: 1200px;*/
	scrollbar-color: tan white;
	scrollbar-width: thin;
	}
/*#charOutputWrapper {
	float: right; 
	width: 48%; 
	position: -webkit-sticky;
	position: sticky;
	top: 2em;
	}*/
#charOutput {
	/*overflow: auto; 
	float: right; 
	width: 48%; 
	margin-top: 1em;
	position: -webkit-sticky;
	position: sticky;
	top: 2em;*/
	width: 100%;
	}
#notesIframe {
	/*width: 50%;
	border: 0;
	height: 2000px;
	margin-top: 2em;*/
	width: 100%;
	border: 0;
	height: 5000px;
	margin-top: 2em;
	}


#chart td {
	/*width: 30px;*/
	text-align: center;
	vertical-align: middle;
	padding: 0;
	border: 0;
	cursor: pointer;
    min-width: 1em;
	}
#chart td.ch {
	border: 1px solid #DDD;
	}
td.hexNum { 	
	font-family: "arial narrow", sans-serif; 
	font-size: 50%; 
	font-weight: normal; 
	}
td.empty {
	background-color: #f2f2f2;
	}
img {
	cursor: pointer;
	/* vertical-align: middle;  */
	}
#listOutput img {
	cursor: pointer;
	vertical-align: middle;
	}
propshead {
	margin-top: 2em;
	}
p.dbnotes {
	margin-bottom: 1em;
	}
p.dbnotes span.ed {
	color: green;
	}


#startupMsg {
	color: #a52a2a; 
	font-size: 150%;
	line-height: 3em;
	}
table.inner td {
	border: 0;
	padding: 0;
	margin: 0;
	}

#ack {
	font-size: 60%;
	font-family: verdana, sans-serif;
	color:#993300;
	padding-left: 5em;
	display: none;
	text-align: left;
	margin-top: 2em;
	}
.title {
	font-weight: normal;
	font-size: 110%;
	color: #993300;
	/* margin-left: 2em; */
	}
.title:before {
	content: '▶ ';
	}
span[lang|='ar'] {
	font-family: "traditional arabic", tahoma, serif;
	font-size: 180%;
	color: red;
	}
span[lang|='ur'] {
	font-family: "nafees nastaleeq v1.01", serif;
	font-size: 140%;
	color: red;
	}
#pickerbox img {
	vertical-align: top;
	}
#cparea td {
	vertical-align: top;
	}
#moreControls {
	float: right; 
	text-align: left;
	margin-right: 10px;
	}
#addControls {
	position: absolute; 
	padding: 1em;
	visibility: hidden;
	background-color: white;
	border: 1px solid #a52a2a;
	}
#addControls div {
	margin-bottom: 10px;
	cursor:pointer;
	}
.beta { font-size: 80%; color:#F30; margin-top: 10px; }
#externallinks { float:right; text-align: right; }
#externallinks span { cursor:pointer; }
#externallinks img { vertical-align: middle; }

#namedisplay { color: #999; margin-left: 2em; font-size: 14px; margin-top: .25em; }

.pb { font-style: italic; }

.subcat {  color: #930; margin-block-start: 1.5rem; font-weight: bold; }

.outofrange { color: #ccc; background-color:#f2f2f2; }

.outofrange img { color: #ccc; opacity:0.1; filter:alpha(opacity=10); background-color:#f2f2f2; }

/* #chart td { border: 1px solid #eee; } */

.ageKey { padding:2px; border-radius: 3px; border: 1px solid #8B8B8B; font-size: 80%;}

.c1-1 { background-color: white; }
#chart td.c1-1 { padding-top: 0px; }  div.c1-1 { padding-left: 20px; }
.c1-1 img { opacity:0.5; filter:alpha(opacity=50); }
.c1-1:before { content: '1.1'; font-size: 9px; color: black; display: block; }

.c2-0 { background-color: #d5d5d5; }
#chart td.c2-0 { padding-top: 0px; }  div.c2-0 { padding-left: 20px; }
.c2-0 img { opacity:0.5; filter:alpha(opacity=50); }
.c2-0:before { content: '2.0'; font-size: 9px; color: black; display: block; }

.c2-1 { background-color: #aaa; }
#chart td.c2-1 { padding-top: 0px; }  div.c2-0 { padding-left: 20px; }
.c2-1 img { opacity:0.5; filter:alpha(opacity=50); }
.c2-1:before { content: '2.1'; font-size: 9px; color: white; display: block; }

.c3-0 { background-color: #008000; }
#chart td.c3-0 { padding-top: 0px; }  div.c3-0 { padding-left: 20px; }
.c3-0 img { opacity:0.5; filter:alpha(opacity=50); }
.c3-0:before { content: '3.0'; font-size: 9px; color: white; display: block; }

.c3-1 { background-color: #77b277; }
#chart td.c3-1 { padding-top: 0px; }  div.c3-1 { padding-left: 20px; }
.c3-1 img { opacity:0.5; filter:alpha(opacity=50); }
.c3-1:before { content: '3.1'; font-size: 9px; color: black; display: block; }

.c3-2 { background-color: #bbd8bb; }
#chart td.c3-2 { padding-top: 0px; }  div.c3-2 { padding-left: 20px; }
.c3-2 img { opacity:0.5; filter:alpha(opacity=50); }
.c3-2:before { content: '3.2'; font-size: 9px; color: black; display: block; }

.c4-0 { background-color: #bf80ff;  }
#chart td.c4-0 { padding-top: 0px; }  div.c4-0 { padding-left: 20px; }
.c4-0 img { opacity:0.5; filter:alpha(opacity=50); }
.c4-0:before { content: '4.0'; font-size: 9px; color: white; display: block; }

.c4-1 { background-color: #dfbfff; }
#chart td.c4-1 { padding-top: 0px; }   div.c4-1 { padding-left: 20px; }
.c4-1 img { opacity:0.5; filter:alpha(opacity=50); }
.c4-1:before { content: '4.1'; font-size: 9px; color: black; display: block; }

.c5-0 { background-color: #f14043; }
#chart td.c5-0 { padding-top: 0px; }   div.c5-0 { padding-left: 20px; }
.c5-0 img { opacity:0.5; filter:alpha(opacity=50); }
.c5-0:before { content: '5.0'; font-size: 9px; color: white; display: block; }

.c5-1 { background-color: #f89fa1; }
#chart td.c5-1 { padding-top: 0px; }  div.c5-1 { padding-left: 20px; }
.c5-1 img { opacity:0.7; filter:alpha(opacity=70); }
.c5-1:before { content: '5.1'; font-size: 9px; color: black; display: block; }

.c5-2 { background-color: #fce2e2; }
#chart td.c5-2 { padding-top: 0px; }  div.c5-2 { padding-left: 20px; }
.c5-2 img { opacity:0.5; filter:alpha(opacity=50); }
.c5-2:before { content: '5.2'; font-size: 9px; color: #F14043; display: block; }

.c6-0 { background-color: #ff00ff; }
#chart td.c6-0 { padding-top: 0px; }  div.c6-0 { padding-left: 20px; }
.c6-0 img { opacity:0.5; filter:alpha(opacity=50); }
.c6-0:before { content: '6.0'; font-size: 9px; color: white; display: block; }

.c6-1 { background-color: #ff80ff; }
#chart td.c6-1 { padding-top: 0px; }  div.c6-1 { padding-left: 20px; }
.c6-1 img { opacity:0.5; filter:alpha(opacity=50); }
.c6-1:before { content: '6.1'; font-size: 9px; color: black; display: block; }

.c6-2 { background-color: #ffbfff; }
#chart td.c6-2 { padding-top: 0px; }  div.c6-2 { padding-left: 20px; }
.c6-2 img { opacity:0.5; filter:alpha(opacity=50); }
.c6-2:before { content: '6.2'; font-size: 9px; color: black; display: block; }

.c6-3 { background-color: #ffbfff; }
#chart td.c6-3 { padding-top: 0px; }  div.c6-3 { padding-left: 20px; }
.c6-3 img { opacity:0.5; filter:alpha(opacity=50); }
.c6-3:before { content: '6.3'; font-size: 9px; color: black; display: block; }

.c7-0 { background-color: #c99969; }
#chart td.c7-0 { padding-top: 0px; }  div.c7-0 { padding-left: 20px; }
.c7-0 img { opacity:0.5; filter:alpha(opacity=50); }
.c7-0:before { content: '7.0'; font-size: 9px; color: white; display: block; }

.c8-0 { background-color: #e58152; }
#chart td.c8-0 { padding-top: 0px; }  div.c8-0 { padding-left: 20px; }
.c8-0 img { opacity:0.5; filter:alpha(opacity=50); }
.c8-0:before { content: '8.0'; font-size: 9px; color: white; display: block; }

.c9-0 { background-color: #6174F7 }
#chart td.c9-0 { padding-top: 0px; }  div.c9-0 { padding-left: 20px; }
.c9-0 img { opacity:0.5; filter:alpha(opacity=50); }
.c9-0:before { content: '9.0'; font-size: 9px; color: white; display: block; }

.c10-0 { background-color: #F68509}
#chart td.c10-0 { padding-top: 0px; }  div.c10-0 { padding-left: 20px; }
.c10-0 img { opacity:0.5; filter:alpha(opacity=50); }
.c10-0:before { content: '10.0'; font-size: 9px; color: white; display: block; }

.c11-0 { background-color: #EBF404}
#chart td.c11-0 { padding-top: 0px; }  div.c11-0 { padding-left: 20px; }
.c11-0 img { opacity:0.5; filter:alpha(opacity=50); }
.c11-0:before { content: '11.0'; font-size: 9px; color: black; display: block; }

.c12-0 { background-color: #0CF8F0}
#chart td.c12-0 { padding-top: 0px; }  div.c12-0 { padding-left: 20px; }
.c12-0 img { opacity:0.5; filter:alpha(opacity=50); }
.c12-0:before { content: '12.0'; font-size: 9px; color: black; display: block; }

.c13-0 { background-color: #7BF7C9}
#chart td.c13-0 { padding-top: 0px; }  div.c13-0 { padding-left: 20px; }
.c13-0 img { opacity:0.5; filter:alpha(opacity=50); }
.c13-0:before { content: '13.0'; font-size: 9px; color: black; display: block; }

.c14-0 { background-color: brown; }
#chart td.c14-0 { padding-top: 0px; }  div.c14-0 { padding-left: 20px; }
.c14-0 img { opacity:0.5; filter:alpha(opacity=50); }
.c14-0:before { content: '14.0'; font-size: 9px; color: white; display: block; }

.c15-0 { background-color:bisque; }
#chart td.c15-0 { padding-top: 0px; }  div.c15-0 { padding-left: 20px; }
.c15-0 img { opacity:0.5; filter:alpha(opacity=50); }
.c15-0:before { content: '15.0'; font-size: 9px; color: black; display: block; }

.c16-0 { background-color:antiquewhite; }
#chart td.c16-0 { padding-top: 0px; }  div.c16-0 { padding-left: 20px; }
.c16-0 img { opacity:0.5; filter:alpha(opacity=50); }
.c16-0:before { content: '16.0'; font-size: 9px; color: black; display: block; }


.cshelp { border:0; margin:0; padding:0; background-color: #ffa500; color: white; cursor: pointer; }


.largeCharDiv { float: right; /* margin-left: 10px; */ }

#charNavigation { 
	background-color: #A52A2A;
	border-radius: 10px;
	/*
	border-top-left-radius: 10px;
	background-color: #A52A2A;
	text-align: right;
	*/
	}
#charNavigation button { 
	border: 0; 
	border-radius: 4px; 
	background-color: transparent; 
	color:white; 
	padding: 0;
	padding-bottom: 2px;
	vertical-align: middle; 
	font-size: 80%; 
	margin: 1px 5px;
	line-height: 1;
	}
.clearButtonBottom { margin-top: 10px; display: none; }
.clearButtonTop { display: none; }
.ex { cursor: pointer; }
.ch { cursor: pointer; }


.quickstartmsg { line-height: 1.4em; font-size:150%; color:#A52a2a; }

.startmsg {  width: 90%;
	/*background-color:#ffe; 
	border: 1px solid #CCC; */
	padding: 5px 10px 5px 15px; 
	color: #666;
	/* margin: auto; */
	}
.startmsg p { margin-bottom: 1em; }
	
#panelWrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/* background: antiquewhite; */
    padding: 0.5rem;
    font-family: ralewaywf, Arial, sans-serif;
    border-block-end: 2px solid #eee;
	}
#charInfo .startmsg { margin-top: 1em; }






/* -------- TABS ---------------- */

#tabpanels {
	float: left;
	border-radius: 5px;
	}
#tabs {
	/*float: left;
	margin: 0px 0 0 0px; 
	padding:0;  
	border-top-right-radius: 10px;*/
    border-bottom: 1px solid #ccc;
    margin: 0;
    padding-block-end: .3rem;
	}
#tabs h2 {
    display: inline-block;
    padding: 0 1em;
    color: rgb(204, 204, 204);
    text-align: left;
    font-size: 123%;
    margin: 0;
    text-transform: lowercase;
    border: 1px solid #ccc;
    border-bottom: 0;
    font-weight: 400;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    cursor: pointer;
    }

/*
#tabs li { 
	float:left; 
	margin: 0; 
	padding: 0; 
	list-style: none; 
	background-color: #eee;
	color: #666;
	line-height: 1;

	border: 1px solid #a52a2a;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin-right: 5px;
	}
#tabs a { 
	display: block; 
	padding: 3px 15px; 
	text-decoration: none; 
	margin: 0; 
	background-color: transparent;
	color: #999;
	}
    */
#tabs .ontab { 
	/*font-weight:bold;  
	border: 1px solid #C96;
	border-radius: 5px;
	background-color: #EDE4D0;
	background-color: floralwhite;*/
    color: #a52a2a;
	}
/*
#tabs #helppaneltab { 
    background-color: rgba(93,167,246,1.00);
    }
#tabs #helppaneltab a { color: white; }
*/
#tabs #helppaneltab {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  margin: 1rem 1rem 1rem 0;
  background-color: rgba(93,167,246,1.00);
  border-radius: .5rem;
  color: white;
  padding: 0 1rem;
}

#tabs .ontab a, #tabs .ontab a:visited { 
	color: white;
	color: #a52a2a;
	background-color: #a52a2a;
	background-color: #EDE4D0;
	border-radius: 5px;
	background-color: floralwhite;
    background: brown;
    color: white;
	}
#lookuppaneltab {
	border-top-left-radius: 5px; 
	}
#lookuppanel, #listpanel, #sendtopanel, #optionspanel, #helppanel,  #dropzonepanel, #blockinfoptr, #listcreator { 
	/*border: 1px solid #C96;
	border-bottom-left-radius: 5px; 
	border-bottom-right-radius: 5px; 
	border-top-right-radius: 5px;*/
	padding: 5px; 
	/*background-color: #EDE4D0; 
	background-color: floralwhite;*/
	margin-top: -1px; 
	}
#lookuppanel { height: 10.5em; }
#lookuppanelSub { display: flex; flex-direction: column; justify-content: space-between; height: 10.5em; }
#lookupFind { display:flex; flex-direction: row; flex-wrap: nowrap; }
#customRange1 { text-align:center; font-size: 90%; height: 2em; }
#lookupSelect { display:flex; flex-direction: row; flex-wrap: nowrap; }
#lookupSelect select { height: 2em; font-size: 90%; }
#lookupSearch1 { display:flex; flex-direction: row; flex-wrap: nowrap; }
#lookupSearch1 form { border:0;margin:0;padding:0; }
#textSearch { height: 2em; width:12rem; font-size:90%; padding-inline: 1em; }
/* #lookupSearch2 { text-align: center; } */
#lookupSearch3 { display:flex; flex-direction: row; flex-wrap: nowrap; }
#lookupSearch3 form { border:0;margin:0;padding:0; }

#searchParameters { display: inline; font-size: 80%; margin-left: 10px; margin-bottom: 5px; }

#sendtopanel div p:hover { background-color: beige; cursor: pointer; }
#sendtopanel div div { 
    height: 9em;
    font-size: 90%;
    line-height: 1.4em;
    text-align: center;
    }
#sendtopanel div div p { 
    background-color: white;
    font-weight: bold;
    color: chocolate;
    border-radius: .25em;
    }
#helppanel { max-width: 42%; min-width: 40%; }
#listpanel, #sendtopanel, #optionspanel, #helppanel { display: none; }
#lookuppanel, #sendtopanel, #listpanel, #optionspanel, #helppanel { line-height: 2em; color: #a52a2a; color: #777; color: #888; } 
#listcreator { text-align: right; text-align: end; float: right; margin-top: 5px; font-size: 85%; padding-top:2px; padding-bottom:2px; margin-right: 5px; cursor:pointer; }


#blockinfoptr { 
	text-align: right; 
	text-align: end; 
	clear:both; 
	margin-top: 5px; 
	margin-right: 5px; 
	font-size: 85%; 
	padding-top:2px; 
	padding-bottom:2px; 
	cursor:pointer;
	float: right;
	}
#blockInfoPointer { 
	margin-block-start: 5px; 
	margin-inline-end: 5px; 
	font-size: 85%; 
	padding-block-start:2px; 
	padding-block-end:2px; 
    padding-inline-start: 1em;
	cursor:pointer;
	}
/* #blockname { 
	text-align: left; 
	text-align: start; 
	margin-top: 0; 
	margin-left: 25px;
	font-size: 85%; 
	padding-top:0; 
	padding-bottom:0; 
	margin-right: 5px; 
	padding: 0; 
	cursor: pointer;
	}
*/

#charInfo h2 { margin-top: 0; font-weight: normal; color:#C63; }
#charInfo .links td { vertical-align: top; padding: 15px 10px 15px 0; }

#cpAreaToggle {
	height: 100%;
	width: 20px;
	float: left;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	}
#cparea { 
	/*margin: 0 5px;*/
	float: left;
	/*border: 1px solid #a52a2a;
	border-radius: 5px; 
	border-color: #C96;
	background-color: #EDE4D0;*/
    width: 50%;
    min-width: 400px;
	}
#cppanel {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	/* border-left: 1px solid #a52a2a;  */
	background-color: transparent;
	padding: 5px; 
	float: left;
	background-color: floralwhite;
	}
#cppanel textarea {
	width:350px; 
	font-size: 150%; 
	border:2px solid #ede4d0; 
	height: 5.6em;
	height: 100px;
	}
#cparea textarea {
	width:400px;
    width: 98%;
	font-size: 150%; 
	border:2px solid #ede4d0; 
	height: 5.6em;
    margin-block-end: 4px;
	}



#smallControls img { height: 1.4rem; margin-inline:.2rem; }
#captureDelete img { height: 1.4rem; }


#findBlock {
    width:17em; height: 2em; font-size: 90%;
    }
#hexSearch, #decSearch, #charSearch { height: 2em; width:5rem; font-size:90%; padding-inline: 1em; }
#charSearch { width:3rem; }

/* for iPad portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

body { font-size: 14px; }

#lookuppanel { height: 9rem; }
#lookuppanelSub { height: 9rem; }
#block { width: 15rem; }
#findBlock {width: 8rem; }
#panelWrapper { flex-wrap: nowrap;  }
#tabpanels { width: 60%; }
#textBoxControls { width: 100%; }
#cparea {
    }
#cparea textarea {
	width:95%;
	font-size: 120%; 
	height: 6em;
	}
#rotateIcon, #commaInsert {
	/*display: none;*/
	}
#block { height: 1rem; }
#customRange1 { width: 5rem }
#lookupSearch1 input { height: 1rem; }
#lookupSearch3 { line-height: 1; }
#hexSearch, #decSearch, #charSearch { width: 2rem; display: inline; margin: 0; }
#lookupSearch3 form, #lookupSearch3 input { display: inline; height: 1rem; }
.goButton { margin-inline-end: 0; display: inline; cursor: pointer; }


#displayControls  { white-space: nowrap; }
#displayControls label { font-size: 80%; margin: 0; }

#cparea textarea { height: 8rem; margin-block-end: 1rem; }

#showProperties select { width: 10rem; }

#smallControls img { height: 1.4rem; margin-inline:.1rem; }
#captureDelete img { height: 1.4rem; }

#tabs #helppaneltab {
  padding: 0 .2rem;
}

#charOutput {
    padding-inline-start: 1rem;
    }

#textSearch { 
    width: 6rem;
    }
}


/* for wide screen */
@media only screen 
  and (min-width: 1000px) {

#cparea textarea {
	width:500px;
    width: 98%;
	font-size: 150%; 
	height: 5.5em;
	}

#smallControls img { height: 1.4rem; margin-inline:.5rem; }
#captureDelete img { height: 1.4rem; }
}


.helpButton {
	float:right; 
	border-radius:10px;
	background-color: rgba(93,167,246,1.00);
	color: white; 
	padding: 1px 8px;
	cursor: pointer; 
	margin-top: 2px
	}


#cptabs li { float:left; background-image: url(images/tabright.png); background-repeat: no-repeat; background-position: right top; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #C96; }
#cptabs a { display: block; background-image: url(images/tableft.png); background-repeat: no-repeat; background-position: left top; padding: 2px 15px; color: #a52a2a; text-decoration: none; margin: 0; background-color: transparent;}
#cptabs { margin: 5px 0 0 10px; padding:0;  }
#cptabs .ontab { font-weight:bold;  border-bottom: 1px solid #EDE4D0; }

#searchString { border: 1px solid #C96; border-radius: 10px; -moz-border-radius: 10px;  }

#dropzone { float: left; margin-left:5px; }
#dztabs li { float:left; padding: 0; list-style: none; border-bottom: 1px solid #C96; }
#dztabs a { display: block; padding: 2px 15px; color: white; text-decoration: none; margin: 0; background-color: transparent;}
#dztabs { margin: 5px 0 0 10px; padding:0;  }

#floatedsearch { color: #a52a2a; }

.caseconversion p { margin-bottom: 1em; font-size: 20px; font-family: "doulos sil", serif; }

.ie { font-size: 120%; color: gray; }
.astext { font-size: 150%; color: gray; }

#lookuptable th { vertical-align:top; font-weight:normal; text-align:right; }


#hexbutton, #decbutton, #charbutton, #searchbutton { border: 1px solid #a52a2a; background-color: #ede4d0; border-radius: 3px; padding: 3px; }
#hexbutton.activebutton, #decbutton.activebutton, #charbutton.activebutton, #searchbutton.activebutton { background-color: #a52a2a; color: white;  }


.thescriptwindow { margin: 0 30% 0 7.5%; padding: 0; border: none; width: 100%; height: 100%; background-color: white;  }

.onscreen { color: brown; }

.noteslink { padding: 2px 5px; background-color: #ede4d0; background-color: #F2EBDE; border: 1px solid #cc9966; border-radius: 8px; float: right; margin: 0 50px; }
.noteslink a { background-color: #ede4d0; }

#makeListFromTA {
	border:0; 
	margin:0; 
	padding:0; 
	vertical-align:top; 
	}


#searchResultCount {
	display: none; 
	color: #a52a2a;
	/*font-size: 80%; 
	float:left; 
	vertical-align:top;
	margin-left: 10px;*/
    margin-inline-start: 1rem;
	}

.chSpan {
    font-size: 26px;
    }
.charList .chSpan {
    margin-right: .25em;
    }
.makeSVG #largeChar {
    background: white;
    height: 260px;
    min-width: 260px;
    text-align: center;
    vertical-align: middle;
    border: 2px solid red;
    display: inline-block;
    font-size: 200px;
    line-height: 250px;
    font-family: "Noto Sans";
    }
.XmakeSVG #largeChar::before {
    content: '\25CC';
    }

/*
#largeChar {
    background: white;
    font-size: 150px;
    height: 260px;
    text-align: center;
    vertical-align: middle;
    line-height: 260px;
    display: inline-block;
    }
*/
#largeChar {
    background: white;
    font-size: 100px;
    height: 190px;
    text-align: center;
    vertical-align: middle;
    line-height: 190px;
    /*min-width: 190px;*/
    display: inline-block;
    margin-inline-end: 1rem;
    cursor: copy;
    }

#chart td.notesAvailable {
    border-bottom: 2px solid #ff7704;
    }



.smallprint {
    font-size: 12px;
    line-height: 1.4;
    color: #999;
    margin: 0;
    margin-top: 7em;
    text-align: right;
    clear: both;
    }
span#version {
    padding: 8px 20px;
    /*background-color: #f5f5f5;*/
    position: fixed;
    bottom: 0;
    right: 0;
    }


#clickDirection {
    float: left;
    font-size: 1.5em;
    /*margin-top: 4em;*/
	color: #a52a2a;
	cursor: pointer;
	}


#shuttle {
    text-align: right;
    position: absolute;
    right: 5px;
    z-index: 2;
    width: 12em;
    }
#shuttle button { 
    width: 100%;
    background-color: antiquewhite;
    border: 3px solid white;
    padding: .25em;
    color: #A52a2a;
    background-color: #EDE4D0;
    }




input, select {
	background-color: brown;
	color: white;
    background: antiquewhite;
    color: black;
	}
input::placeholder, select::placeholder {
	color: white;
	opacity: .6;
    color: black;
    font-size: 90%;
	}
input[type="image"] {
	background: transparent;
	}




.letter {
    margin-inline-start: 0;
    }

#displayControls {
    float:right;
    width:49%; 
    padding: 1em;
    }

#displayControls label {
    margin-inline-end: 2rem;
    }


.goButton {
    padding: 0;
    border: 0;
    background: 0;
    font-size: 1rem;
    margin-inline-end:1rem;
    }






#descKey {
    margin-block-end: 1rem;
    font-size: 80%;
    }
#descKeyList {
    font-style: italic;
    }
#descKey span {
    font-size: 2em;
    line-height: 1rem;
    display: inline-block;
    width: 2rem;
    }

.notesexpl {
    margin-block-start: 1rem;
    }




#copyNotice, #characterMarkup, #caseConverter {
    position: fixed;
    top: 40%;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 1rem;
}

#caseConverter {
    text-align: start;
    background-color: antiquewhite;
    color: #666;
    border: 0;
    }

#caseConverter p {
    text-align: start;
    margin-block: 1em;
    }

#caseConverter span {
    cursor: copy;
    font-size: 1.4rem;
    }