/* 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: 'arial unicode ms', Arial, Helvetica, sans-serif;
	margin: 0;
	}

/* 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 */


#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%; 
	/* height: 1200px;  */
	margin-top: 1em;
	}
#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: 500px;
	margin-top: 2em;
	}


#chart td {
	width: 30px;
	text-align: center;
	vertical-align: middle;
	padding: 0;
	border: 0;
	cursor: pointer;
	}
#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;  */
	}
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: 7px; font-size: 14px; }

.pb { font-style: italic; }

.subcat {  color: #930; }

.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; }


.quickstartmsg { color: #666; margin-top: 4em; font-size: 100%; line-height: 1.4em;  }

.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; }


.startmsg {  width: 80%;
	background-color:#ffe; 
	border: 1px solid #CCC; 
	padding: 5px 10px 5px 15px; 
	/* margin: auto; */
	}
	

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

#tabpanels {
	float: left;
	border-radius: 5px;
	}
#tabs {
	float: left;
	margin: 0px 0 0 0px; 
	padding:0;  
	border-top-right-radius: 10px;
	}
#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-bottom: 1px solid #EDE4D0;
	border-bottom: 1px solid #C96;
	border-top-right-radius: 5px;
	border-top-left-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-bottom: 1px solid #A22929;
	border-bottom: 1px solid #EDE4D0;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	background-color: #EDE4D0;
	}
#tabs .ontab a, #tabs .ontab a:visited { 
	color: white;
	color: #a52a2a;
	background-color: #a52a2a;
	background-color: #EDE4D0;
	border-radius: 5px;
	}
#lookuppaneltab {
	border-top-left-radius: 5px; 
	}
#lookuppanel, #listpanel, #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; 
	margin-top: -1px; 
	}



#helppanel { max-width: 42%; min-width: 40%; }
#listpanel, #optionspanel, #helppanel { display: none; }
#lookuppanel, #listpanel, #optionspanel, #helppanel { line-height: 1.5em; color: #a52a2a; } 
#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 { 
	float: right;
	}
#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;
	}
#cppanel {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	/* border-left: 1px solid #a52a2a;  */
	background-color: transparent;
	padding: 5px; 
	float: left;
	}
#cppanel textarea {
	width:350px; 
	font-size: 150%; 
	border:2px solid #ede4d0; 
	height: 5.25em;
	height: 100px;
	}


.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; 
	margin-left: 10px; 
	float: left
	}


#searchResultCount {
	display: none; 
	float:left; 
	font-size: 80%; 
	vertical-align:top;
	color: #a52a2a;
	margin-left: 10px;
	}

.chSpan {
    font-size: 26px;
    }
.charList .chSpan {
    margin-right: .25em;
    }
.largeChar {
    font-size: 170px;
    }

#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;
}