@import url("article.css");
@font-face {
    font-family: 'ExtendedLatinWF';
    src: local('Gentium Plus'),
         url('../../shared/webfonts/gentiumplus-r-webfont.woff2');
    font-weight: normal;
    font-style: normal;
	}
@font-face {
    font-family: 'ExtendedLatinWF';
    src: /* Local commented out until the feature settings can be made to work */
         url('../../shared/webfonts/gentiumplus-i-webfont.woff2');
    font-weight: normal;
    font-style: italic;
	font-feature-settings: "ss05" 1;
	}

.counter_style_comp thead th { text-align: start; }
.counter_style_comp tbody th { text-align: end; line-height: 1; }
.counter_style_comp table { margin:0; margin-top: 2em; }


html { font-size: 15px; }
body {
	line-height: 2em;
	/*font-size: 15px;*/
	hyphens: auto;
    font-size: 100%; /* this neutralises the setting in docs.css, so that the accessibility options work on the html tag */
	}


/*
#type h2 { margin-inline: 1rem; }
#type p, #vowel_description p, #consonant_description p {
    font-size: 1.1em;
    margin-inline-start: 1rem;
    }
#type, #vowel_description, #consonant_description {
    margin-inline-start: 7.5%;
    border-inline-start: 1rem solid antiquewhite;
    }
*/
/*
#type {
    margin-inline-start: 7.5%;
    border-inline-start: 1rem solid antiquewhite;
    margin-inline-end: 30%;
    }
#type p {
    font-size: 1.1em;
    margin-inline-start: 1rem;
    margin-inline-end: 0;
    }
    */
#type h2 { margin-inline: 0; }
#type p, #vowel_description p, #consonant_description p {
    font-size: 1.1em;
    margin-inline-end: 2rem;
    margin-inline-start: 0;
    }
#type, #vowel_description, #consonant_description {
    margin-inline-end: 30%;
    border-inline-end: 1rem solid antiquewhite;
    margin-inline-start: 7.5%;
    }


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

    p, h2, h3, h4, dl, div#footer, div.example, figure, details#scriptLinks { margin-inline-start: 7.5%; margin-inline-end: 10%; }
    ul, ol { margin-inline-start: 9%; margin-inline-end: 10%; }
    ul ul { margin-inline-start: 2%; margin-inline-end: 5%; }
    table { margin-inline-start: 7.5%;  }
    table.inband { margin-inline-end: 10%; }
    blockquote { margin-inline-start: 11%; margin-inline-end: 10%; }

    #vowel_mappings .map, #consonant_mappings .map { margin: 0 10% 1em 7.5%; }

    table.soundSummary { margin-right: 10%; min-width: 80%; }
    
    #panel { width: 40%; }
    
    
    .cased { margin-inline-start:7.5%; margin-inline-end:10%; }

    .intro {
        width:70%;
        }
    .ancestry {
        margin-inline-start: 2rem;
        }

}


.vowel_forms { margin-block-end: 2em; margin-inline: 2rem; width: 80%; }
.vowel_forms th { hyphens: none; }
.vowel_forms td {text-align: start; padding-inline-start: 1em; }
.vowel_form_list span span { white-space: nowrap; text-align: start; border: 0; padding-left: .5em; font-size: 120%; }



/* DARK SETTINGS */
body.dark { 
	background-color: #000;
    filter: invert(100%);
	}
/* ---------------- */



.refLine {
    text-align: center;
    color: gray;
    }


#featureTableBody {
	line-height: 1.75;
    margin-block-start: 2rem;
	}
#featureTableBody th {
	text-align: end;
	}


table { margin-left: 7.5%; margin-right: 32%; }
td { text-align: start; padding: 0 .5em; vertical-align: top; }
th { 
    vertical-align: top;
    text-align: center;
    hyphens: none;
    }



.meaning { letter-spacing: 0.02em; }
.meaning:before { content: '‘';  }
.meaning:after { content: '’';   }

.character .notes .ref { font-size: 60%; }

.trans, .listTrans, .name, .charExample .transc, rt { 
	font-family: ExtendedLatinWF, "Gentium Plus", Gentium, "Lucida Sans Unicode", "Lucida Grande", 'lucida sans', "helvetica neue", sans-serif; 
	font-size: 1.1em;
	font-style: italic;
	font-weight: 300;
	font-feature-settings: "ss05" 1;
	}
rt { 
	font-family: ExtendedLatinWF; 
	font-size: .8em;
	font-style: italic;
	font-weight: 300;
	font-feature-settings: "ss05" 1;
    color: gray;
	}
rb {
    margin-inline-end: .25em;
    font-family: Webfont;
    }
.listTrans {
	display: none;
	}
.listArray { display: flex; flex-direction: row; flex-wrap: wrap; }
/*.listPair { display: flex; flex-direction: column; flex-wrap: nowrap; margin-right: .75em;  margin-top: .5em; }*/
.listPair { display: flex; flex-direction: column; flex-wrap: nowrap; margin-right: .75em;  padding-bottom: .5em; }
.listItem[lang] {
    cursor: pointer;
    min-width: 1em;
    color: chocolate;
    font-size: 180%;
    line-height: 1.4;
    min-width: 2rem; /* this is a test value . */
    }
.listItem.highlight {
    color: tan;
    }

.listAll { float:right; font-size: 70%; white-space: nowrap; cursor: pointer; }

.listTransc, .listTrans2 { 
    display: none; 
	font-family: ExtendedLatinWF, "Gentium Plus", Gentium, "Lucida Sans Unicode", "Lucida Grande", 'lucida sans', "helvetica neue", sans-serif; 
	font-size: 1.1em;
	font-weight: 300;
    }
.soundSummary .listUnum {
    display: none;
    }
.listUnum {
    font-size: .6em;
    display: inline;
    line-height: 2;
    }
.charExample .trans:before, .transc:before { 
	content: '<'; 
	font-family: ExtendedLatinWF; 
	margin-right: 1.5px; 
	margin-left: 0.2em; 
	color: #aaa;
    font-style: italic;
	}
.charExample .trans:after, .transc:after { 
	content: '>'; 
	font-family: ExtendedLatinWF; 
	margin-right: 0.2em; 
	margin-left: 1.5px;  
	color: #aaa;
    font-style: italic;
	}
.charExample .transx {
    font-style: normal;
    }
.charExample .vertical {
    writing-mode: vertical-rl;
    }

.ednote { font-size: 80%; color: #666; font-style:italic; color: orange; }

section { clear: left; }

.ipa    { cursor: pointer; }
.ipa, .listIPA { 
	font-family: ExtendedLatinWF, doulosipa,"Gentium Plus", "Lucida Sans Unicode", "Lucida Grande", 'lucida sans', "helvetica", sans-serif; 
	font-size: 110%;
    /*font-style: italic;*/
	font-feature-settings: "ss05" 1;
	}
.listIPA {
    font-size: 1.2rem;
	}
.soundSummary .listIPA {
    font-size: 1.7rem;
    color: #aaa;
    line-height: 1.4;
    }
.soundSummary .listIPA:hover {
    background: antiquewhite;
    border-radius: 3px;
    background: chocolate;
    color: white;
    }
/*.ipa:before { 
	content: '⌈'; 
	font-family: ExtendedLatinWF, "Gentium Plus", Gentium, "Lucida Sans Unicode", "Lucida Grande", 'lucida sans', "helvetica neue", sans-serif; 
	margin-right: 1.5px; 
	margin-left: 0.2em; 
	color: #aaa; 
	}
.ipa:after { 
	content: '⌋'; 
	font-family: ExtendedLatinWF, "Gentium Plus", Gentium, "Lucida Sans Unicode", "Lucida Grande", 'lucida sans', "helvetica neue", sans-serif; 
	margin-right: 0.2em; 
	margin-left: 1.5px;  
	color: #aaa; 
	}*/
.ipa:before { 
	content: '/'; 
	font-family: ExtendedLatinWF; 
	margin-right: 0px; 
	margin-left: 0.2em; 
	color: #ccc; 
	}
.ipa:after { 
	content: '/'; 
	font-family: ExtendedLatinWF; 
	margin-right: 0.2em; 
	margin-left: 0px;  
	color: #ccc; 
	}
.ipa.narrow:before { 
	content: '['; 
	font-family: ExtendedLatinWF; 
	margin-right: 0px; 
	margin-left: 0.2em; 
	color: #ccc; 
	}
.ipa.narrow:after { 
	content: ']'; 
	font-family: ExtendedLatinWF; 
	margin-right: 0.2em; 
	margin-left: 0px;  
	color: #ccc; 
	}
.nobrackets .ipa:before {
	content: none;
	}
.nobrackets .ipa:after {
	/*content: ' ';*/
	content: none;
	}
.phone .ipa:before, .phone .ipa:after {
    content: '';
    margin: 0;
    }
.ipa .opt:before { 
	content: '('; 
	font-family: ExtendedLatinWF, "Gentium Plus", Gentium, "Lucida Sans Unicode", "Lucida Grande", 'lucida sans', "helvetica neue", sans-serif; 
	margin-left: 0.2em; 
	color: #aaa; 
	}
.ipa .opt:after { 
	content: ')'; 
	font-family: ExtendedLatinWF, "Gentium Plus", Gentium, "Lucida Sans Unicode", "Lucida Grande", 'lucida sans', "helvetica neue", sans-serif; 
	/*margin-right: 0.2em; */
	color: #aaa; 
	}
.or { 
    color: #aaa;
    margin-inline: .1em;
    }
.listIPA:before { 
	content: '/'; 
	font-family: ExtendedLatinWF; 
	color: #ccc; 
	}
.listIPA:after { 
	content: '/'; 
	font-family: ExtendedLatinWF; 
	color: #ccc; 
	}
/*.listIPA:before { 
	content: '⌈'; 
	font-family: ExtendedLatinWF, "Gentium Plus", Gentium, "Lucida Sans Unicode", "Lucida Grande", 'lucida sans', "helvetica neue", sans-serif; 
	color: #aaa; 
	}
.listIPA:after { 
	content: '⌋'; 
	font-family: ExtendedLatinWF, "Gentium Plus", Gentium, "Lucida Sans Unicode", "Lucida Grande", 'lucida sans', "helvetica neue", sans-serif; 
	color: #aaa; 
	}*/
.soundSummary .listIPA:before { 
	content: ''; 
	}
.soundSummary .listIPA:after { 
	content: ''; 
	}

.listIPA i {
    color: #ccc;
    margin: 0 .1em;
	}
.codepoint span[lang], .codepoint bdi[lang] {
	color: black;
    font-size: 1.6rem;
    margin-inline: .5rem;
	}
.codepoint bdi[dir=rtl] {
	color: black;
    font-size: 1.6rem;
    margin-inline-start: .5rem;
	}



table p {
	margin: .5em 0;
	}



.ex, .exlist, .eg  { 
	cursor: pointer; 
	color: crimson;
	color: black;
	color: chocolate;
    cursor: context-menu;
	}
figure .ex, .exlist  { 
	cursor: pointer; 
	/*color: black;*/
	}
.eg {
     margin: 0.3em;
    font-size: 120%;
    display: block;
    text-align: center;
    }
.uname {
    font-size: 75%;
    margin: 0 2px;
	}
.codepoint .uname {
    word-spacing: -0.4em;
	}

p.large {
	text-align: center;
	}
.instructions, .prompts, .figsource {
	font-style: italic;
    font-size: 80%;
    line-height: 1.4;
    font-weight: normal;
	}
.instructions.highlight {
    font-weight: 600;
    }
.prompts {
	color: #ccc;
	}
h3 + p.prompts {
    margin-block-start: -1em;
    margin-top: -1em;
	}
.explanatoryintro, .definition { /* use the former, rather than the latter */
	font-style: italic;
    font-size: 80%;
    line-height: 1.4;
	}
/*
h2 {
    font-size: 180%;
	}
*/

/* X #showTranscriptions {
	float: right;
	position: -webkit-sticky;
	position: sticky;
	top: 3em;
	right: 1em;
	width: 15%;
	width: 12rem;
	text-align: start;
	margin-top: 7em;
	clear:both;
    background: white;
    padding: 1rem;
    border-radius: 1rem;
	}*/

#showTranscriptions {
	float: right;
	position: fixed;
	top: 5em;
	right: .5em;
	width: 15%;
	width: 12rem;
	text-align: start;
	clear:both;
    background: antiquewhite;
    padding: 1rem;
    border-radius: 1rem;
	}

#showTranscriptions summary {
  margin-block-start: 1em;
  font-size: 80%;
  font-style: italic;
  line-height: 1.2;
}

#showTranscriptions details {
  margin-inline: 0;
  }
#showTranscriptions details div {
  color: chocolate;
  }
/*
#features {
	float: right;
	position: -webkit-sticky;
	position: sticky;
	top: 3em;
	right: 1em;
	width: 28%;
	text-align: right;
	margin-top: 7em;
	clear:both;
	}
*/

#features {
	float: right;
	width: 28%;
	text-align: right;
	margin-block-start: 16rem;
	clear:both;
    background: white;
    border-bottom-left-radius: 1em;
	}
#features table td {
	text-align: left;
	padding: 0 5px;
	line-height: 1.5;
	font-size: 80%;
	}
#features table th {
	font-weight: 400;
	font-size: 60%;
	}
#features table {
	margin: auto;
	}

#features a { font-size: 110%; font-weight:normal; }
#features a:link { color: #F96; }
#features a:active { color: #F96; }
#features a:hover { color: #F96; }
#features a:visited { color: #F96; }

/*#freeText p { margin-top: 40px; }*/

#picture {
	margin-top: 2em;
	}

.characters h3 { margin-top: 2em; }
h4 {
    color: coral;
    margin-top: 4rem;
	margin-bottom: 0;
	font-weight: normal;
	color: #9e8769;
	font-weight: 500;
	color: peru;
    }
h4 + p {
	margin-top: 0;
	}

#fontcontrols { font-size: 12px; }
#fontcontrols form { display: inline; }

#fontsetting {
    line-height: 1em;
    position: fixed;
    bottom: 35px;
    background-color: #eee;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    padding-top: 0;
    z-index: 1000;
	}
#fontsetting { width: 270px; }
#fontsetting.open { right: 0px; }
#fontsetting.closed { right: -258px; }
#fontsetting h2 {
    margin-top: 10px;
    margin-left: 12px;
    vertical-align: middle;
	}

#fontsettingswitch {
    float: left;
    height: 130px;
    width: 12px;
    background-color: #b4d5ff;
    font-size: 12px;
    cursor: pointer;
	}


#showNotes { text-align: right; font-size: 80%; }

#sources { font-size: 90%; }

.ref { font-size: 60%; }



/* ====================== */
#panel, #dialogBox, #ipaDialogBox, #tocPanel { 
	position: fixed; 
	/*bottom: 20px; 
	right: 10px; */
	bottom: 0px; 
	right: 0px; 
	background-color:#ffe; 
    background-color: #fffdf5;
    border: 1px solid #eee; 
	box-shadow: 12px 12px 12px #eee; 
	padding: 5px 10px 5px 15px; 
	border-radius: 10px; 
	z-index:2000;
	width: 27%;
	font-size: 90%;
	text-align: left;
	text-align: start;
	max-height: 90%;
	overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: tan white;
    background-color: seashell;
    right: 1.5rem;
	}
#ipaDialogBox {
    right: 50%;
    }
#dialogBox, #ipaDialogBox {
    width: 65%;
    bottom: 6%;
    background-color: white;
    border: 10px solid #f3dfc4;
    box-shadow: 12px 12px 12px #CCC;
	padding: 5px 20px 5px 20px;
    background-color: seashell;
    border: 2px solid #f3dfc4;
    }
#ipaDialogBox {
    width: 40%;
    }

#tocPanel { 
    font-size: 100%;
    width: 25%;
    line-height: 1;
    color: #aaa;
    cursor: pointer;
    right: 2rem;
    }
#panel img, #dialogBox img { vertical-align: middle; }

#panel p, #dialogBox p { 
    margin-inline-start: 0;
    margin-inline-end: 0;
    margin-block-start: 3px;
    font-size: 120%;
    }
#panel table, #dialogBox table { 
    margin-inline-start: 0;
    margin-inline-end: 0;
    }
#panel #title, #dialogBox title { 
	font-size: 200%; 
	line-height: 2;
	color: chocolate;
	}
#transInPanel { font-size: 150%; }
#panel #advice, #dialogBox advice {
	text-align: right;
	font-style: italic;
	font-size: 80%;
	margin-right: 2em;
	}
#panelShare { 
	position: fixed; 
	bottom: 30px; 
	right: 30px;
    right: 28%;
	width: 8em; 
	background-color:#faead8; 
	background-color:white; 
	border: 1px solid chocolate; 
	border: 1px solid tan; 
	box-shadow: 7px 7px 5px #888; 
	padding: 5px 10px 5px 15px; 
	border-radius: 5px; 
	z-index:4000;
	text-align: start;
	max-height: 80%;
	overflow: auto;
    font-size: 1rem;
	}

#ipaDialogBox th {
  font-weight: normal;
  font-size: 2rem;
  padding-inline: 2em;
  font-family: "ExtendedLatinWF"; 
  }

#ipaDialogBox .ipaAnalyseTitle {
  font-size: 2rem;
  color: chocolate;
  border-block-end: 1px solid #ccc;
  margin: 0em 0 1em 0;
  padding-block: .5em;
  font-family: "ExtendedLatinWF"; 
  }
#ipaDialogBox #ipaAnalyseTable {
    border:0;
    margin: 0;
    margin-block-end: 2rem;
    }
#ipaDialogBox #ipaAnalyseTable td {
    border:0;
    font-size: 1rem;
    vertical-align: middle;
    }
#ipaDialogBox #ipaAnalyseTable th {
    text-align: center;
    vertical-align: middle;
    font-size: 2.1rem;
    line-height: 1;
    }


/*
#character_panel_close_button, #toc_panel_close_button  {
	position: fixed;
	bottom: 0;
	padding: 1rem;
	border: 1px solid tan;
	background-color: #ffe;
	right: 0;
	border-radius: 5px;
	}
*/
#panel #character_panel_close_button, #toc_panel_close_button  {
	position: fixed;
	bottom: 0;
	right: 30%;
	padding: 1rem;
	background-color: white;
	border-radius: 5px;
    z-index: 2000;
    cursor: pointer;
    font-size: 180%;
	border: 1px solid #ccc;
	}
#toc_panel_close_button  {
	right: 27%;
    font-size: 180%;
    }


#panel .panelCharacter img {
    height: 2.25rem;
    border-radius: .5em;
    border: 1px solid #ddd;
    margin-block-start: 0.2em;
    }

    /*
#character_dialog_close_button {
	position: fixed;
	bottom: 5%;
	padding: 1em;
	border: 5px solid tan;
	background-color: #ffe;
	right: 12%;
	border-radius: 5px;
    
    background: white;
	}
    */
#dialogBox #character_dialog_close_button {
	position: fixed;
	bottom: 5%;
	padding: 1em;
	border: 1px solid #ccc;
	background-color: #ffe;
	left: 9%;
	border-radius: 5px;
    
    background: seashell;
    cursor: pointer;
    font-size: 180%;
    color: #aaa;
    background: white;
	}

#jumpToToc {
    cursor: pointer;
    }
/* ====================== */


.ctlink {
    text-align: center;
    font-size: 70%;
    margin: 0;
}


.set_vertical_rl {
	writing-mode: vertical-rl;
	margin: 0 auto;
	}
.set_horizontal {
	writing-mode: horizontal-tb;
	}


.cldrList { 
	margin: 0 32% 0 7.5%; 
	}
.cldrList td {
	padding: 0 .5em;
	text-align:start;
	}
.cldrList th {
	padding: .5em .5em;
	text-align:end;
	vertical-align:top;
	line-height: 1.2;
	}
.linkHighlight {
	font-size: 120%;
	}
.character_list td {
	padding: 0 1em;
	text-align: start;
	}
.character_list tbody th {
    color: #CC6600;
    font-style: italic;
    padding-inline-end: 1.5em;
    font-size: 72%;
    font-weight: bold;
	}
.character_list thead th {
	padding: 0 1em;
	text-align: center;
    color: #CC6600;
    font-style: italic;
    font-size: 72%;
    font-weight: bold;
	}

.charCount {
    font-style: italic;
    font-size: 70%;
}


.tableHighlight {
    color: #F96;
    font-size: 110%;
    font-weight: normal;
	color: chocolate;
    }


/* === figure counters === */
body {
	counter-reset: figures;
    }

figcaption {
	counter-increment: figures;
    }

figcaption:before {
	content: 'figure ' counter(figures) ': ';
    font-weight: bold;
    margin-inline-end: .75rem;
    }



mark {
    /*border-radius: .5em;
    border: 1px solid darkgray;
    padding: 0 1em;*/
	
	background-color: transparent;
	font-weight: bold;
	color: inherit;
    }
    
details {
    margin-left: 7.5%;
    margin-right: 32%;
    }
 details blockquote {
    margin-left: 3em;
    margin-right: 3em;
	}
 details p, details table {
    margin-inline-start: 0;
    margin-inline-end: 0;
	}
/*
.leadin {
    color: coral;
    display: inline-block;
    margin: 1.5em 1em 0 0;
    }
*/
.leadin { color: #CC6600; font-style: italic; margin-right: 1em; font-size: 90%; color: #555; }

/*.auto {
	margin: 1em 30% 1em 10%;
	}*/
.characterBox, .mainBox, .auxiliaryBox, .auxBox, .deprecatedBox, .otherBox, .archaicBox, .foreignBox, .exampleBox, .unusedBox, .tbcBox, .summaryBox {
    border: 1px solid #eee; 
    padding: 8px;
    margin-left: 7.5%;
    border-radius: 8px;
	margin-top: 0;
	margin-bottom: 1em;
	}
.characterBox, .mainBox {
	background-color: #fffdf5;
	padding-top: 0;
	background-color: #fafafc;
	}
.auxiliaryBox, .auxBox {
	background-color: snow;
	padding-top: 0;
	}
.otherBox {
	background-color: white;
	}
.archaicBox {
	padding-top: 0;
	background-color: ghostwhite;
	}
.deprecatedBox, .unusedBox {
	background-color: #eee;
	padding-top: 0;
	}
.foreignBox {
	background-color: white;
	padding-top: 0;
	}
.tbcBox {
	background-color: antiquewhite;
	padding-top: 0;
	}
.listItemType {
    font-size: 60%;
    line-height: 1;
    color: brown;
    }
.summaryBox {
	background-color: #fff5e6;
    background-color: white;
	padding-top: 0;
    border: 0;
    /* border-block-end: 1px dotted tan; */
    border-radius: 0;
	}

/*
.soundSummary { background: antiquewhite; margin-inline-end: 10%; min-width: 60%; }
.soundSummary td { margin:0; padding: 0; border:0; background-color:white; }
.soundSummary th { text-align: end; padding-inline-end: 1rem; line-height: 1.2; padding-block-start: 1em; }
.summaryBox { margin: 0; padding: .5rem; }
*/
.soundSummary { border: 0; margin-inline-end: 10%; min-width: 60%; border-collapse: collapse; }
.soundSummary td { margin:0; padding: 0; border: 2px solid antiquewhite; background-color:white; }
.soundSummary th { background: antiquewhite; text-align: start; padding-inline-end: 1rem; line-height: 1.2; padding-block-start: 1em; }
.summaryBox { margin: 0; padding: .5rem; }

.soundSummary thead th {
    background-color: white;
    border: 0;
    }



.characterBox::before {
    content: "Click/tap grapheme or code point for detailed character notes.";
    font-size: 60%;
    margin: 1em 0 0 0;
	line-height: 1;
    text-align: left;
    display: block;
	}
.characterBox.caps::before, .summaryBox.caps::before {
    display: none;
    }
.caps {
    margin-block-start: -1.5em;
    }
.auxiliaryBox::before {
    content: "Infrequent";
    font-size: 60%;
    margin: 1em 0 0 0;
	line-height: 1;
    text-align: left;
    display: block;
	}
.archaicBox::before {
    content: "Archaic";
    font-size: 60%;
    margin: 1em 0 0 0;
	line-height: 1;
    text-align: left;
    display: block;
	}
.deprecatedBox::before {
    content: "Deprecated";
    font-size: 60%;
    margin: 1em 0 0 0;
	line-height: 1;
    text-align: left;
    display: block;
	}
.foreignBox::before {
    content: "Other languages/dialects";
    font-size: 60%;
    margin: 1em 0 0 0;
	line-height: 1;
    text-align: left;
    display: block;
	}



.openBox:before {
    content: '';
    }
.openBox {
    margin: 0;
    }
.openBox .listAll {
    display: none;
    }
.vowel_grid .characterBox {
    background-color: white;
    border: 0;
    }





figure#fig_vowel_grid {
    margin-inline: 5rem;
    }
.vowel_grid { margin:0; border-collapse: collapse; }
.vowel_grid td { vertical-align: top; border: 0; padding-block-start: 1rem; line-height: 3rem;  white-space: nowrap; }
.vowel_grid td span {text-align: start; border: 0; padding-left: .5em; }

.vowel_grid td .ipa {
    font-style: normal;
    font-size: 1.4rem; 
    color: #aaa;
    }
.vowel_grid tr { border-block: 1px solid #ddd; }


.termref {
    border-bottom: 1px dotted teal;
    }
a.termref { color: #333; }




figure p {
    text-align: center;
    }
details figure {
    margin-right: 0;
    }





.exampleFlex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    }
.exampleFlex span {
    margin: 0 .25em !important;
    }



.ipaSVG {
    margin-inline-start: 7.5%;
    margin-block: 0;
    height: 260px;
    width: 550px;
    font-size: 1.2rem;
    }
.ipaTable thead th {
	vertical-align: bottom;
	text-align: left;
	text-align: start;
	padding-bottom: 0;
	}
.ipaTable thead th {
	vertical-align: bottom;
	text-align: left;
	text-align: start;
	padding-bottom: 0;
	color: #ccc;
	font-weight: normal;
	line-height: 1;
	}
.ipaTable tbody th {
	vertical-align: top;
	text-align: right;
	text-align: end;
    padding-top: 1em;
	padding-bottom: 0;
	color: #ccc;
	font-weight: normal;
	line-height: 1;
	}
.ipaTable .ipa, .ipaTable .allophone, .diphthongTable .ipa, .diphthongTable .allophone {
	cursor:pointer;
    font-size: 1.2rem;
	}
.ipaTable .ipa:before, .diphthongTable .ipa:before {
	content: none;
	}
.ipaTable .ipa:after, .diphthongTable .ipa:after {
	/*content: ' ';*/
	content: none;
	}
.ipaTable td, .diphthongTable td {
	white-space: nowrap;
	text-align: start;
	min-width: 2em;
	border: 0;
	}
.ipaTable .allophone, .diphthongTable .allophone {
    color: tan;
    font-family: "ExtendedLatinWF";
    font-weight:normal;
    font-size:1.4rem;
    text-align:left;
    text-anchor: center;
    cursor: pointer;
    font-style: normal;
	}
.ipaTable .ipa, .diphthongTable .ipa {
    font-family: "ExtendedLatinWF";
    font-weight:normal;
    font-size:1.4rem;
    text-align:left;
    text-anchor: center;
    cursor: pointer;
    font-style: normal;
	}
.diphthongTable thead th {
	font-family: ExtendedLatinWF, doulosipa,"Gentium Plus", "Lucida Sans Unicode", "Lucida Grande", 'lucida sans', "helvetica", sans-serif;
	text-align: center;
	}
.diphthongTable {
    margin-inline: 10%
    }
.diphthongTable span {
    margin-inline: .5rem;
    }
.diphthongTable td {
    padding-inline: 2rem;
    }
.allophone { font-family: ExtendedLatinWF, doulosipa,"Gentium Plus", sans-serif; 
	font-size: 120%; 
	color: #ccc; }
/*.allophone::before { content: '('; color: #ccc; }
.allophone::after { content: ')'; color: #ccc; }*/

.ipaSVG .ipa {
    fill: #333;
    font-family: "ExtendedLatinWF"; 
    font-weight:normal;
    font-size:1.4rem;
    text-align:left;
    text-anchor: center;
    cursor: pointer;
    font-style: normal;
    }
.ipaSVG .allophone {
    fill: tan;
    font-family: "ExtendedLatinWF";
    font-weight:normal;
    font-size:1.4rem;
    text-align:left;
    text-anchor: center;
    cursor: pointer;
    font-style: normal;
    }
.ipaSVG .allophone::before { content: '('; stroke: #ccc; }
.ipaSVG .allophone::after { content: ')'; stroke: #ccc; }


.fnref, .fnDef, .fn {
	vertical-align: super;
	margin-inline-start: .25em;
	font-size: 60%;
	}
/* remove the page number if you can hover over the title */
@media (hover: hover) {
  /* when hover is supported */
  .fn sub {
    display: none;
  }
}





@media print {


h2 {
    text-decoration: none;
    color: #333;
    }
.listItem {
    color: black;
    }
a:link {
    color: black;
}
a:visited { 
	color: #000;
	}
.ex {
    color: black;
}
#features a:link { color: #000; }
#features a:active { color: #000; }
#features a:hover { color: #000; }
#features a:visited { color: #000; }

#showTranscriptions { display: none; }

.ednote { color: gray; }
.noprint { display: none; }

.listItem[lang] { color: black; }
.ex, .exlist  {	color: black; }
.mapItem .phone { color: black; }
}





.charExample, .charExampleInline {
	margin: 0 .3em;
	}

.useBlockExamples .charExample {
	margin: .3em;
	font-size: 120%;
	display: block;
	text-align: center;
	
	text-align: start;
	margin-inline-start: 6rem;
	}
.useBlockExamples .figureSub .charExample {
	text-align: start;
	}
/* by commenting this out we make examples in character notes display on a separate line
.useBlockExamples .map .charExample, 
.useBlockExamples .charDetails .charExample, 
.useBlockExamples .charExample.inline,
.useBlockExamples #panel .charExample {
	margin: 0;
	font-size: 100%;
	display: inline;
	} */
.charExample.inline {
	margin: 0;
	font-size: 100%;
	display: inline;
    /*margin-inline-start: 4rem;
    margin-inline-start: 1rem;*/
	}
/*.useBlockExamples .fn {
	position: absolute;
	right: 28%;
	}*/
.charExample + .charExample {
    margin-top: .6em;
	}

.charExample .trans {
	display: none;
	}

.secref {
	font-size: 100%;
	}



#charCountList {
	font-size: 100%; color: gray; text-align: start; line-height: 1.4; /*margin: 0 0 0 3em;*/
	}
#charCountList th {
	font-size: 80%;
	}
#linebreak_details p { margin-right: 0; }
#linebreak_details { font-size: smaller; line-height: 1.2; margin-top: 1em; }

.observation, .note {
	font-size: 80%;
	line-height: 1.2;
	}
.note::before {
	content: '[ℹ] ';
	font-size: 140%;
	}

.mouth img {
	width: 50px;
	}






/* INDEX LINKS */

#phoneLinks {
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 1em;
	background-color: chocolate;
	border: 1px solid tan;
	border-start-end-radius: 5px;
	font-size: .9rem;
    hyphens: none;
    text-align: start;
    color: antiquewhite;
    }

#phoneLinks a:link {
    text-decoration: none;
    color: beige;
    }

#phoneLinks a:visited {
    text-decoration: none;
    color: antiquewhite;
    }

#phoneLinks a:hover {
    text-decoration: none;
    color: antiquewhite;
    background-color: brown;
    border-radius: 3px;
    }





.refs li {
	text-align: start;
	}

.legend {
	line-height: 1;
	font-size: smaller;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	}
.legend dl, .legend dt {
	margin-top: 0;
	margin-bottom: 0;
	}

.formattingBox {
	display: none;
	}
.more::after { content: '→'; }

.select {
	border: 0;
	}


#translitToggle { margin-top: 1em; }

.infoIcon { float:left; margin-left: 3.5%; vertical-align: middle; margin-top: .5em; }


.graphemeTable {
	margin-left: 7.5%;
	border: 0;
	}
.graphemeTable td {
	border: 0;
	}
.graphemeTable figure {
	border: 0;
	border-top: 1px solid tan;
	border-radius: unset;
	}

.characterBoxTitle { 
	font-size:80%;
	text-align:start;
	margin:0;
	margin-left: 8%;
	/*margin-bottom: -1.5em;*/
	line-height: 1;
	}


.largeList .listItem {
	font-size:200%;
	line-height: 2;
	}

.termHighlight {
	font-weight: bold;
	}

.alternatives li {
	margin-bottom: 1em;
	}


.multiItemFigure {
	display: flex; 
	justify-content: center;
	flex-wrap: wrap;
	}
.multiItemFigure img {
	margin-inline-start: 2em; 
	margin-inline-end: 2em;
	margin-block-end: 1em;
	}



.fig_highlight {
	color: chocolate;
	}





figure table.charDetails  {
	margin: 0;
	width: 100%;
	background: white;
  	border: 1px solid #ccc;
  	border-radius: 1rem;
	}
.charDetails .insertTranscription {
	
	display: none; /* because these pages show transcriptions already */
	
    font-size: 80%;
    line-height: 1em;
    text-align: end;
    clear: right;
    font-style: italic;
    float: right;
    margin-top: 1em;
    margin-bottom: 2em;
    margin-left: 3em;
    color: chocolate;
    padding-left: .5em;
    padding-right: .5em;
	}
    
.charShape {
    display: none; /* this removes explicit code used for combinations etc */
    }


/*
table.charDetails > tr > td {
	border: 0;
	border-inline-start: 1px solid chocolate;
	padding-top: 0em;
	border-radius: 10px;
	}
figure .charDetails > tr > th {
	text-align: center;
	font-weight: normal;
	font-size: 160%;
	min-width: 1em;
	}
figure .charDetails td p {
	text-align: start;
	font-size: 90%;
	}
figure .charDetails td .uname {
	font-weight: bold;
	}
.charDetails summary {
	margin-left: 7.5%;
	font-size: 80%;
	font-style: italic;
	}
figure .charDetails .ex {
    color: chocolate;
	}
.charDetails ul, .charDetails ol {
    margin: 0;
	}
*/


/*.cdData {
	border: 0;
	border-inline-start: 1px solid chocolate;
	padding-top: 0em;
	border-radius: 10px;
	line-height: 1.6;
	}*/
.cdData {
	border: 0;
	padding-block-start: 2em;
    padding-block-end: 1em;
	border-radius: 10px;
	line-height: 1.6;
	}
.cdChar {
	text-align: center;
	font-weight: normal;
	font-size: 160%;
	min-width: 1em;
    padding-block-start: 2em;
	}
.cdCharClose {
	font-size: 80%;
	color: burlywood;
	line-height: 1;
	display: inline-block;
	cursor: pointer;
    margin-block: 2rem;
	}
.cdData p {
	text-align: start;
	font-size: 90%;
	line-height: 2em;
	}
.cdTitle {
	font-weight: bold;
	}
.cdChar .ex, .cdData .ex {
    color: chocolate;
	}
.charD p, .charD li {
	line-height: 1.5em;
	}
.cdData ul, .cdData ol {
    margin: 0;
	}
p.cdHeader {
    line-height: 1.2;
    margin-block-end: 2rem;
	}
.cdBasics {
    font-style: italic;
	font-size: 90%;
	}





#panel .cdChar, #dialogBox .cdChar {
	text-align: start;
	border-bottom: 1px solid #aaa;
    font-size: 2rem;
	}
#panel .insertTranscription, #dialogBox .insertTranscription {
	display: none;
	}
#panel ul, #dialogBox ul {
	margin: 0;
	}
#panel .charD, #dialogBox .charD {
	margin-block: 2em;
    }

.listUnumCP {
	color: teal;
	cursor: pointer;
	}

.reviewed {
	font-size: 70%;
	color: #ccc;
	margin-inline-start: 1em;
	float: right;
	}

#panel .tonePairing, #panel .subjPair, #panel .charUppercase, #panel .charLowercase, #panel .vowelPairing, #panel .decomposition, #panel .otherPairing, #panel .seealso, 
#dialogBox .tonePairing, #dialogBox .subjPair, #dialogBox .charUppercase, #dialogBox .charLowercase, #dialogBox .vowelPairing, #dialogBox .decomposition, #dialogBox .otherPairing, #dialogBox .seealso {
    font-size: .8rem;
    text-align: start;
    margin-inline-start: 0;
    margin-inline-end: 0;
    line-height: 1;
    }

.cdData .tonePairing, .cdData .subjPair, .cdData .charUppercase, .cdData .charLowercase, .cdData .vowelPairing, .cdData .decomposition, .cdData .otherPairing, .cdData .seealso {
    font-size: .8rem;
    text-align: start;
    margin-inline: 0;
    margin-block: 0;
    line-height: 1;
    }

#panel .leadin, #dialogBox .leadin, .charDetails .leadin {
    margin-block-start: 2rem;
    margin-block-end: 0;
    color: chocolate;
    }



/*  SIDEBAR HIGHLIGHTS */
p.btw {
	border-inline-start: 5px solid #ccc;
	padding: 0 1em;
	}
div.btw {
	border-inline-start: 5px solid #ccc;
	padding: 0 1em;
	margin-inline-start: 7.5%;
	}
div.btw p, div.btw figure { margin-inline-start: 0; }

.info {
    border-inline-start: 5px solid bisque;
    margin-inline-start: 6%;
    padding-inline-start: 1.5%;
}
.info::before {
    content: url(../../shared/images/info.png);
    content: '❗';
    font-size: 2em;
    position: absolute;
	margin-inline-start: -5%;
	margin-block-start: .25em;
	}

/* -------------- */


.comparison {
	border-collapse: collapse;
	}
.comparison th {
	border-collapse: collapse;
	text-align: start;
	/*width: 48%;*/
	}
.comparison td {
	border: 0;
	border-bottom: 1px solid #ccc;
	padding: 1em;
	}


.cursive_table td { text-align: center; color: black; font-size: 120%; vertical-align: middle; }
.cursive_table thead th { padding: 0 1.5em; }
.cursive_table tbody th { font-weight: normal; font-size: 80%; text-align: end; }
.cursive_table tbody th figure { margin: 0; }
.cursive_table tbody th .otherBox { padding: 0; }
.cursive_table tbody th .listPair { margin: 0; }
.cursive_table tbody th .listUnum { display: none; }

/* .character_list td { background-color: #fffdf5; } */


#index {
	background-color: antiquewhite;
    padding-bottom: 1em;
	}
#index h2 {
    padding-top: 1em;
	}
#index h3 {
    border-bottom: 1px solid #d2691e5e;
    margin-block-start: 2em;
	}
#index .otherBox {
    background-color: transparent;
	}


.figure_matrix { display: flex; flex-direction: column; }
.figure_row { display: flex; flex-direction: row; }
.figure_annotation { font-family: 'Gentium Plus'; font-size: 20px; color: #aaa; margin: 0 1em; align-self: center; }


.counterstylesBox { margin-top: 0; font-size: 80%; }

.noindex {}


#showLinebreaks::before, #showBidiClass::before, #showIndicSyllables::before {
    content: url("../common30/icons/share.png");
    position: absolute;
    margin-left: -3em;
    margin-top: .25em;
    }
#showLinebreaks, #showBidiClass, #showIndicSyllables {
    font-size: 90%;
    padding-inline-start: 3em;
    display: inline-block;
    line-height: 1.6;
    }
.linkToApp::before {
    content: url("../common30/icons/share.png");
    position: absolute;
    margin-inline-start: -3em;
    margin-block-start: .25em;
    }
.linkToApp {
    font-size: 90%;
    padding-inline-start: 3em;
    display: inline-block;
    line-height: 1.6;
    }




/* HEADING CHANGES */

h1 {
font-size: 400%;
}
h2 {
    text-transform: none;
    color: #999;
    margin-block-start: 16rem;
    }
h3 {
    font-weight: 600;
    color: #444;
    text-transform: none;
    margin-block-start: 4rem;
    margin-block-start: 8rem;
    }
h4 {
color: #555;
font-weight: 600;
font-style: italic;
color: #CC6600;
}


/* EXPERIMENTAL STYLING FOR THE INDEX */

#index { hyphens: none; }
#index .listArray { flex-direction: column; text-align: start; }
#index .listPair { flex-direction: row; align-content: flex-end; line-height: 1.2; }
#index .listItem { line-height: 1.2; }
#index .listUnum { margin-inline-start: 1em; margin-inline-end: 2em; }
#index .links a::before { content: ' ' attr(href); font-size: 80%; }
#index .links a::after { content: '\2003'; font-size: 80%; }
#index details { margin: 0; }
#index summary { margin-inline-start: 7.5%; }
#index figure { margin-inline-end: 32%; }

#index .characterBox::before, #index .unusedBox::before {
  content: "Click/tap on a character to put links at the bottom of the window.";
  font-size: 60%;
  margin: 1em 0 0 0;
  line-height: 1;
  text-align: left;
  display: block;
}

#index .otherBox .listArray { flex-direction: row; text-align: start; }

#index_intro {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-inline-start: 7.5%;
    margin-inline-end: 32%;
    margin-block-end: 1em;
    }
#index_intro p { margin: 0 2em 1em 0;}


.small .listPair { font-size: 80%; }
.hideCh .listItem { font-size: 20%; border: 1px solid #ccc; margin-block-start: .4rem; margin-block-end: 0; }
.hideCh .listItemType { display: none; }


#orthoLinks { display:flex; flex-direction: row; flex-wrap: nowrap; /*margin-inline-start:7.5%; margin-inline-end: 32%; */ margin: 0; }
#closeOrthoLink { list-style-type: none !important; text-align: end; font-size: 150% !important; line-height: 1.6; }
#orthoLinkSwitch { position: relative; }
#orthoLinkSwitch img { margin-left: 0; margin-right: 1em; margin-top: 0; }
#orthoLinkPopup { display: none; position:absolute; top:0; left: 24px; width: 16em; background-color: antiquewhite; padding-inline-start: 1em; padding-inline-end: 1em; border-radius: 6px; border: 1px solid tan; z-index: 1000; }
#orthoLinkPopup ul { margin:0; padding: 0; }
#orthoLinkPopup li { font-size: 90%; cursor: pointer; list-style-type:square; margin-inline-start: 1em; color: #aaa; }
#orthoLinkInstructions p { font-style: italic; font-size: 80%; line-height: 1.4; margin-inline-end: 0; }



.vowel_form_example .charExample {
    font-size: 1em;
}


.index_details { display:inline-flex;flex-direction: column; }
.index_uname { 
    font-size: 70%;
    color: #cc4f02;
    padding-block-end: .2em;
    cursor: pointer;
    }

.indexline .listPair {
    border-block-start: 1px dotted #aaa;
    padding-block-start: .2em;
    padding-inline-start: 0.3rem;
    }




.indexShareLinks {
    border: 0;
    vertical-align: top;
    padding: .5em .25em;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    }
.popup {
    font-size: 100%;
    background-color: bisque;
    padding: .25em 1em;
    border: 1px solid #ccc;
    border-radius: 6px;
    z-index: 100;
    display: none;
    text-align: end;
}


p.notesLink, #panel p.notesLink, #dialogBox p.notesLink {
    float: right;
    font-style: italic;
    text-align: end;
    font-size: .7rem;
    line-height: 1.4;
    }
.usageType {
    font-weight: bold;
    }


#phoneticLinks {
    margin-block-start: 1em;
    font-size: 80%;
    font-style: italic;
    line-height: 1.2;
    }


.linkedOrthography {
    font-size: 110%;
    font-weight: bold;
    }







.multilineGlossedText {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    }
.stack {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-right: .5rem;
    margin-top: .5em;
    text-align: center;
    }
.rb {
    color: chocolate;
    font-size: 1.6rem;
    line-height: 2;
    margin-block: .5rem;
    }
.rt {
    line-height: 1;
    font-family: ExtendedLatinWF;
    font-size: 1.5rem;
    /*font-style: italic;*/
    font-weight: 300;
    font-feature-settings: "ss05" 1;
    color: gray;
    text-align: center;
    }
.rt.translitGloss {
    font-family: "Noto Sans", ExtendedLatinWF;
    font-style: normal;
    font-size: 1.2rem;
    }


.codepoint span:first-of-type, .codepoint bdi {
    cursor: pointer;
    }
.codepoint img {
    vertical-align: middle;
    }


.indexLineData {
    font-size: .75rem;
    color: teal;
    cursor: pointer;
    }
.indexLineData .ipa, .indexLineData .transc {
    color: #666;
    font-size: .9rem;
    font-style: italic;
    font-family: ExtendedLatinWF;
    }
.indexLineData .ipa {
    margin-inline-start: 2em;
    }
.indexLineData .statusLoc {
    font-style: italic;
    }
.indexLineData .statusLoc::before {
    content: ' ( ';
    }
.indexLineData .statusLoc::after {
    content: ' )';
    }


#glossaryLink, #characterAppLink {
    margin-block-start: 1em;
    font-size: 80%;
    font-style: italic;
    line-height: 1.2;
    }


#sample p {
    margin-right: 32%;
    margin-left: 7.5%
    }



/* TOP RIGHT SWITCHES */

#selectionBackground {
    position:fixed;
    top:0;
    right:0;
    height:50px;
    background: white;
    }

#showTOC {
    position:fixed;
    top:8px;
    right:60px;
    line-height:1;
    }

#optionSwitch {
    position:fixed;
    top:10px;
    right:110px;
    line-height:1;
    }

#contrastSwitch {
    position:fixed;
    top:3px;
    right:14px;
    line-height:1;
    }

#findChar {
    position:fixed;
    top:10px;
    right:150px;
    line-height:1;
    }
#findChar input {
    border: 1px solid tan;
    border-radius: 3px;
    }



/* ACCESSIBLITY PANEL */


#contrastSwitch {
    position:fixed;
    top:3px;
    right:14px;
    line-height:1;
    }

#access { 
    position:fixed; 
    top: 50px;
    right: 30px;
    width: 40%;
    background-color:#60b0f9;
    z-index: 1000;
    text-align: center;
    padding: 1.4em;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    border-radius: 1rem;
    }
#access_contrast, #access_fontsize {
    padding: 1rem;
    background: #eee;
    border-radius: 1rem;
    border: 1px solid gray;
    }
#contrastChoice {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 1rem;
    justify-content: space-around;
    }
#contrastChoice button {
    padding: 1rem;
    font-size: 1.4rem;
    border: 1px solid gray;
    border-radius: .4rem;
    }
.access_selected {
    color: white;
    background: #007bf2;
    }
/* end */



/* ACCESSIBILITY SETTINGS  */

body.contrast a, body.contrast .listUnumCP {
    color: #36c;
    color: brown;
    }
body.contrast a:hover {
    background-color: tan;
    }

/* end */






.multilineGlossedText {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    }
.multilineGlossedText .stack {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    margin-right: .75em;
    margin-top: .5em;
    text-align: start;
    margin-bottom: 2rem;
    }
.multilineGlossedText .legend {
    font-style: italic;
    line-height: 1;
    font-size: 80%;
    display: inline;
    }


/* THIS SUBHEAD ETC STUFF SHOULD BE GRADUALLY REPLACED BY ORTHOGRAPHY LINE */
.subhead {
    font-weight: 300;
    color: #999;
    margin-bottom: 2em;
    text-transform: lowercase;
    margin-top: 0;
    font-size: 2rem;
    line-height: 1;
    margin-right: 32%;
    }

h1.withSubhead {
    font-weight: 300;
    color: #999;
    text-transform: lowercase;
    margin-top: 0;
    font-size: 2rem;
    line-height: 1;
    margin: 3em 32% 3em 6.5%;
    hyphens: none;
   }
h1.withSubhead .mainHead {
    font-size: 3.75rem;
    color: #005a9c;
    text-transform: capitalize;
    font-weight: 300;
    }
h1.withSubhead .subHead {
    margin-block: 1rem;
    /*font-style: italic;*/
    margin-inline-start: .5em;
    font-size: 1.75rem;
    }
/* END SUBHEAD STYLING */


h1 {
    font-size: 3.75rem;
    margin-block-start: 6rem;
    }
.orthographyLine {
  margin-block: 1rem;
  margin-inline-start: .5em;
  font-size: 1.75rem;
  color: #999;
  text-transform: lowercase;
  margin: -4rem 30% 8rem 9%;
  font-weight: 300;
    }




.html {
  border-inline-start: 5px solid tan;
  padding: 0 1em;
  margin-inline-start: 7.5%;
  margin-inline-end: 10%;
}
.html p, .html figure, .html dl {
  margin-inline-start: 0;
}

.qlink {
    vertical-align: super;
    font-size: 60%;
    }

#fig_tone_transcription table {
    font-size: 1.2rem;
    }
#fig_tone_transcription .tonedesc {
    font-size: 1rem;
    }


.spacedList { /* needs to be used with a locally set width */
  display: flex;
  justify-content: space-between;
  margin-inline: 10%;
  font-size: 1.4rem;
}

.inlineGloss { margin-block: 0; }
.inlineGloss .stack { margin-block: 0; }
.inlineGloss .stack .rb { margin-block: 0; font-size: 1.6rem; }

.noBorderTable { border: 0; }
.noBorderTable td { border: 0; }
.alignStartTable td { 
    text-align: start;
    }
.alignStartTable td .charExample {
    text-align: start;
    }


.grammar { color: chocolate; vertical-align: middle; font-size: 1.5rem; }



.vowelCharts {
    display: flex; 
    flex-wrap: wrap; 
    margin-inline-start: 7.5%;
    }

.vowelCharts h4 {
    margin-block: 0;
    margin-inline: 0;
    }




figure.sideCaption {
    margin: 4em 30% 4em 9%;
    display: flex;
    flex-flow: row-reverse;
    justify-content: start;
    
    }

figure.sideCaption figcaption {
    text-align: start;
    min-width: 10rem;
    max-width: 11rem;
    margin-inline-end: 2rem;
    margin-block: 0;
    padding: 0;
    }

figure.sideCaption p {
    text-align: start;
    margin: 0;
    }

figure.sideCaption img {
    align-self: flex-start;
    margin: 0;
    }

figure.sideCaption table {
    text-align: start;
    margin: 0;
    }

figure.sideCaption summary {
    text-align: start;
    font-size: 90%;
    }

figure.sideCaption figcaption::before {
    content: 'figure ' counter(figures) ' ';
    font-weight: bold;
    margin-inline-end: .75rem;
    }

figure.wideFigure {
    margin-inline-end:20%;
    }


p.eg {
    margin:0;
    }


figure details p { margin: 0; }
figure details {
    margin: 0;
    font-size: .9rem;
    }
figure summary {
    font-size: 90%;
    }



.graphemeTest {
    font-size:1.5rem; 
    margin-inline-start:7.5%; 
    line-break:anywhere; 
    border: 1px solid #ccc; 
    padding-block: 1rem; 
    line-height: 1.2;
    }
.graphemeTest[dir="rtl"] {
    margin-inline-start:32%;
    margin-inline-end: 7.5%;
    }

.graphemeTextarea {
    font-size:1.5rem; 
    margin-inline-start:7.5%;
    margin-inline-end: 32%;
    }
.graphemeTextarea[dir="rtl"] {
    margin-inline-start:32%;
    margin-inline-end: 7.5%;
    }
.graphemeTextarea textarea {
    height: 5rem;
    width: 100%;
    line-height: 2;
    }





/* STYLING FOR INDEX LINES AND STATUS */
/*.index_rare, .index_infrequent { background: rgb(255,248,249); border: .5px solid #ccc; border-radius: .3rem; padding: .1rem .5rem; }
.index_deprecated, .index_obsolete, .index_unused { background: #eee;  border-radius: .3rem; padding: .1rem .5rem; }
.index_archaic { background: ghostwhite; border: .5px solid #ccc; border-radius: .3rem; padding: .1rem .5rem; }
.index_loan { background: ghostwhite; border: .5px solid #ccc; border-radius: .3rem; padding: .1rem .5rem; }
*/


/*
.index_rare, .index_infrequent { background: rgb(255,248,249); border-radius: .3rem; }
.index_deprecated, .index_obsolete, .index_unused { background: #eee; }
.index_archaic { background: ghostwhite; border-radius: .3rem; }
.index_loan, .index_transcription { background: ghostwhite;  border-radius: .3rem; }
*/

.index_details { border-inline-start: 3px solid #fffdf5; padding-inline-start: 0.5rem; }

.index_infrequent .index_details { border-inline-start: 3px solid #F5B8F5; padding-inline-start: 0.5rem;  }
.index_rare .index_details { border-inline-start: 3px solid #F3A7F3; padding-inline-start: 0.5rem; }
.index_loan .index_details, .index_transcription .index_details {border-inline-start: 3px solid #C1C1FF;   padding-inline-start: 0.5rem; }
.index_avoid .index_details { border-inline-start: 3px solid crimson; padding-inline-start: 0.5rem; }

.index_archaic { background: #eee; }
.index_archaic .index_details { border-radius: .3rem; padding-inline-start: 0.5rem; }
.index_deprecated, .index_obsolete, .index_unused { background: #eee; }
.index_deprecated .index_details, .index_obsolete .index_details, .index_unused .index_details { background: #eee; border-inline-start: 3px solid gray; padding-inline-start: 0.5rem; }
.index_tbc .index_details { background: antiquewhite; border-inline-start: 3px solid antiquewhite; padding-inline-start: 0.5rem; }




.vowelSignExample {
    display: flex;
    margin-block-start:1rem;
    margin-block-end: 3rem;
    text-align: start;
    justify-content: end;

	margin-inline-end: 2rem;
	width: 25%;
	float: right;
	clear: both;
    }
.vowelSignExample bdi {
    font-size:300%;  /* may need tweaking for orthography */
    line-height:1;  /* may need tweaking for orthography */
    margin-inline-end: 2rem;
    white-space: nowrap;
    }
.vowelSignExample .ipa {
    display: inline-block;
    padding-top: 1rem;
    margin-inline-end: 2rem;
    white-space: nowrap;
    }
.vowelSignExample span {
    display: inline-block;
    padding-top: 1rem;
    line-height: 1.2;
    }
.vowelSignExample span span {
    display: inline;
    line-height: 1.2;
    }




.addToVowels {}
.addToConsonants {}

#vowel_description .dropFromSection, #consonant_description .dropFromSection, #diacritic_description .dropFromSection {
    display: none;
    }



.h {
    font-size: 1.6rem;
    }

div.glossContainer {
    writing-mode: horizontal-tb;
    }


.graphemes td {
    border-block-end: 1px solid #ccc;
    }

.copyIcon {
    height: 1rem;
    cursor: copy;
    }



.figureSub {
    font-weight: normal;
    line-height: 1;
    margin: 0;
    margin-block-start: -3em;
    margin-inline-start: 9%;
    margin-inline-end: 32%;
    margin-block-end: 3rem;
    text-align: start;
    }
.figureSub summary {
    font-size: .8rem;
    font-weight: normal;
    cursor: pointer;
    }

.seeSamples {
    font-style: italic;
    font-size: 70%;
    line-height: 1;
    font-weight: normal;
    text-align: end;
    margin-block-start: -1rem;
    margin-block-end: 1rem;
    }

.seeCode {
    font-style: italic;
    font-size: 70%;
    line-height: 1;
    font-weight: normal;
    text-align: end;
    margin-block: 1rem;
    float: right;
    }



#vowel_description .secref, #consonant_description .secref, #type .secref {
    font-size: 80%;
    }
#type .dropFromSection {
    float:right;
    margin-inline-start: 2em;
    margin-block-start: .75em;
    margin-block-end: 0;
    width: 6em;
    line-height: 1;
    hyphens: none;
    text-align: start;
    font-size: 80%;
    }

.seclink {
    font-weight: 600;
    }






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


/* THIS SHOULD BE REPLACED WITH SECTIONASIDE */
#vowel_notfound, #consonant_notfound, #shaping_notfound, #inline_notfound, #para_notfound, #page_notfound {
    float: right;
    width: 30%;
    padding-block-start: 0em;
    border-block-start: 1rem antiquewhite solid;
    margin-block-start: 11rem;
    clear: both;
    }
#vowel_notfound li, #vowel_notfound ul, #vowel_notfound p, #consonant_notfound li, #consonant_notfound ul, #consonant_notfound p, #shaping_notfound li, #shaping_notfound p, #shaping_notfound ul {
    margin-inline: 2em;
    padding: 0;
    text-align: start;
    }
/* END */

.sectionAside {
    float: right;
    width: 26%;
    padding-block-start: 0em;
    /*border-block-start: 1rem antiquewhite solid;*/
    margin-block-start: 0;
    margin-block-end: 1rem;
    clear: both;
    font-style: italic;
    font-size: 80%;
    line-height: 1.4;
    font-weight: normal;
    margin-inline-start: 2%;
    margin-inline-end: 0;
    background-color: white;
    }
.sectionAside li, .sectionAside p, .sectionAside details {
    margin-inline-start: 0;
    margin-inline-end: 1rem;
    padding: 0;
    text-align: start;
    }
.sectionAside ul {
    margin-inline: 2em;
    padding: 0;
    text-align: start;
    }
.tbd { 
    background-color: white;
    }
.tbd h4 {
    margin-inline: 0;
    font-size: 100%;
    margin-block-start: 2em;
    margin-block-end: 1em;
    text-align: start;
    }
.tbd summary {
    margin-block-start: 3rem;
    }




.sectionSummary { 
    font-style: italic;
    font-size: 80%;
    line-height: 1.4;
    font-weight: normal;
    color: #aaa;
    }

h3 + .sectionSummary, h2 + .sectionSummary { 
    margin-block-start: -1rem;
    }

/* remove any hangover markup for prompts that is now replaced by scripting
#shaping > .instructions, #page > .instructions {
    display: none;
    }  */

.prompts {
    display: none;    /* these are now replaced by scripting */
    }


.ancestry { float: right; margin-right: 2%; width: 24%; font-size: 90%; font-style: italic; }
.ancestry p { margin: 0; line-height: 1.4; }
.ancestry p:first-of-type { margin-block-end: 1.4em; }



.embeddedTable {
    margin-inline: 0;
    }
.startAlignedTable td, .startAlignedTable th {
    text-align: start;
    }
.startAlignedTable td .charExample {
    margin-inline: 0;
    }




.toc3 {
    display: block;
    margin-inline-start: 1rem;
    }


details:has('.refLine') summary {
    text-align: end;
    }





/* ARTICLE STYLES 
section > article {
    margin-inline-start: 7.5%;
    margin-inline-end: 32%;
    }
article {
    margin: 1rem;
    background: white;
    border: 1px solid #ccc;
    border-radius: 1rem;
    padding: 1rem;
    }
article p {
    margin: 0;
    }
article table {
    margin: 0;
    margin-inline: 0;
    width: 100%;
    }
article .cdChar {
    text-align: center;
    margin-block-end: 1em;
    font-size: 2rem;
    padding-inline: 1rem;
    }
article .cdData {
    border-inline: 0;
    width: 100%;
    }
article tr {
    width: 100%;
    }
.comparison article td {
    border: 0;
    }
article .insertTranscription {
    display: none;
    }
article .character_dialog_close_button {
    display: none;
    }
.articleClose {
    font-size: 2rem;
    color: #ccc;
    cursor: pointer;
    float: right;
    }

/* allow for space between rows */
/*article tr {
    float: left;
    margin-top: 2rem;
    }
article tr:first-of-type {
    margin-top: 0;
    }
*/


/* STYLES FOR CHARACTER LISTS IN ASIDES */

.sectionCharacterList {
    margin-block-start:3rem;
    }
.sectionCharacterList figure {
    margin: 0 1rem 0 0;
    font-size:1rem;
    font-style:  normal;
    }





/* SHOW TRANSCRIPTIONS INLINE, RATHER THAN IN POPUP PANEL 

article .advice {
    text-align: right;
    font-style: italic;
    font-size: 80%;
    margin-right: 2em;
    line-height: 1;
    margin-inline-start: 0;
    margin-inline-end: 0;
    margin-block-start: 3px;
    }
article .panelCharacter img {
    height: 2.25rem;
    border-radius: .5em;
    border: 1px solid #ddd;
    margin-block-start: 0.2em;
    vertical-align: middle;
    }
article td {
    width: 100%;
    border: 0;
    }
.exCharClose {
	font-size: 140%;
	color: burlywood;
	line-height: 1;
	display: inline-block;
	cursor: pointer;
    margin-block: 0;
	}
*/



#tocTab {
    height:20rem;
    width:.5rem;
    top:30vh;
    position:fixed;
    right:0;
    color:teal;
    background:teal;
    border-top-left-radius:1em;
    border-bottom-left-radius: 1em;
    margin:0;
    padding:0;
    text-align:end;
    font-size:1rem;
    z-index: 3000;
    cursor:pointer;
    background: #dbb37e;
    background: tan;
    }
#tocTab:hover { width: 1.5rem; }

#tocTabClickArea {
    height:20rem;
    width: 4rem;
    top:30vh;
    position:fixed;
    right:0;
    border-top-left-radius:1em;
    border-bottom-left-radius: 1em;
    margin:0;
    text-align:start;
    padding: 1rem;
    font-size:1rem;
    z-index: 3000;
    cursor:context-menu;
    color: transparent;
    }
/*#tocTabClickArea:hover {
    color: chocolate;
    background: white;
    }
*/

/* allow use of h3 for summary tables, while keeping h4 rendering */
#consonant_description + #consonantSummary h3, #vowel_description + #basicV h3 { 
    font-weight: 600;
    font-style: italic;
    color: #CC6600;
    margin-block-start: 4rem;
    margin-block-end: 0;
    font-size: 1rem;
    border: 0;
    }


/* hides figure panels so that characters can still be picked up by indexing, etc */
.invisible {
    visibility:collapse;
    height: 0;
    width:0;
    margin: 0;
    padding:0;
    border:0;
    margin-block:0;
    line-height: 0;
    }
.characterBox.auto.invisible {
    display: none;
    }





/* map intros */
/*.mapIntro { float:right; width: 30%; }
.mapIntro p { font-style: italic; font-size: 80%; line-height: 1.4; font-weight: normal; }
.mapIntro p:first-of-type { margin-block-start: 0; }
.mapIntro p:last-of-type { font-weight: bold; }
.mapIntroRef { font-size:1.4rem; color:gray; }
#mapv_intro, #mapc_intro { background: white; }
#mapv_intro .phone, #mapc_intro .phone { line-height: 1.8; }*/


.mapKey { display: flex; flex-direction: row; clear: both; margin-block-end: 2rem; }
.mapKey > div { flex: 5; align-self: flex-start; }
.mapKey > div p { margin-inline:14%; }
.mapKey > aside { flex: 4; }
.mapKey > aside .mapIntro { width: 100%; }
.mapKey > aside p { margin-inline-start: 0;   margin-inline-end: 25%; line-height: 1.4; margin-block: .25rem; text-align: start; }

.mapIntro p:first-of-type { margin-block-start: 1rem; font-weight: bold; }
.mapIntro .key { color: chocolate; font-size: 1.6em; font-style: normal; text-align: start; }
.mapIntro .i { color: chocolate; }
.mapIntro .c { color: black; }
.mapIntro .uname { color: teal; font-size:50%; font-family: menlo, monospace; letter-spacing: 0.05em; }
.mapIntroRef { font-size:1.4rem; color:gray; }






/* MAP STYLES */

.map { 
    display: flex;
    flex-direction: column;
    margin: 0 10% 1em 7.5%;
    padding: 1em .5em;
    border-radius: 8px;
    background-color: #fff5e6;
    }

.mapHeading {
    display: flex;
    flex-direction: column;
    margin: 0 10% 0 7.5%;
    border-radius: 8px;
    background-color: white;
    font-size: .8rem;
    font-weight: bold;
    border: 0;
    }
.mapHeading .posn, .mapHeading .phone {
    padding: 0;
    }
.mapHeading div {
    padding-inline-start: 1.5em;
    }
.mapItem .posn {
    font-weight: bold;
    font-size: 70%;
    text-align: start;
    padding: 1em .5em 0 0;
    white-space: nowrap;
    min-width: 4em;
    color: tan;
    display: inline-block;
    }

.mapItem {
    text-align: start;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    border-bottom: 1px solid #ddd;
    }
.mapItem:last-child {
    border: 0;
    }
.mapItem.initial {
    border-bottom: 0;
    }
.map_detail {
    width: 100%;
    }
.mapItem .codepoint span[lang], .mapItem .codepoint bdi[lang] {
	color: black;
    font-size: 2rem;
    /*margin-inline: 1rem;*/
    margin-inline-end: 1rem;
	}
.mapItem .shaping .codepoint bdi[lang] {
	color: black;
    font-size: 2rem;
    margin-inline: .5rem;
	}
.mapItem b {
    font-size: 85%;
    font-weight: normal;
    margin-inline-start: 2rem;
    }
.mapItemX .phone + div { width: 100%; }  /* reinstate this after all migrated */

.shaping { float: right; }
.shaping bdi {
    margin-inline: .5rem;
    }
.mapItem p.example {
    margin-inline-start: 3rem;
    }
.mapItem p { margin: .5em; }
/*.mapItem div:first-child { width: 3em; padding-top: .5em; }*/
.map .mapItem:last-child div:last-child { border-bottom: 0; }
.map:last-child { border-bottom: 0; }
/* .map .mapItem:last-child div:last-child { border-bottom: 1px solid #ccc; } */
.mapItem .charExample span[lang] {
    color: tan;
    }
.mapItem .charExample {
    color: #888;
    font-size: 100%;
	margin: 0;
	display: inline;
    margin-inline-start: .5rem;
	}
.mapItem article .charExample {
    margin-inline-start: 3rem;
	}

.mapItem .phone {
    color: #E77202;
	min-width: 3rem;
    white-space: nowrap;
    font-size: 1.7rem;
    line-height: 1.4;
    padding-inline: .8rem;
	}
.mapItem.uncommon .phone, .mapItem.uncommon .posn {
    color: #A27842;
    color: tan;
	}
.mapItem.allophonic .phone::after {
    color: #E77202;
    content: 'allophone';
    }
.mapItem.uncommon .phone::after {
    color: #A27842;
    content: 'infrequent';
    }
.mapItem.uncommon .phone::after, .mapItem.allophonic .phone::after {
    display: flex;
    flex-direction: column;
    font-size: 30%;
    line-height: 1;
    padding-top: 5px;
    }
.mapItem .codepoint bdi[lang].uncommon {
    color: tan;
    }
.mapItem .ipa {
    hyphens: none;
    }

.mapItem b .codepoint bdi[lang] {
    font-size: 140%;
    }


/* TWO COLUMN STYLING FOR MAP TABLES */
.mapItem .dependent {
    margin-inline-end: 2rem;
    }
.mapItem div.dependent, .mapItem div.standalone {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    line-height: 1.5;
    }



.btw h3, .btw h4 {
    margin-inline-start: 0;
    }





.sequenceTable td { border:0; font-size: 1.2rem; padding-bottom: 1.2em; text-align: center; vertical-align: middle; }
.sequenceTable .ex { margin: 0; font-size: 1.6em; line-height: 1; display: block; }

.sequenceTable.breakdown { margin-inline-start: calc(7.5% + 6rem); }
.sequenceTable.breakdown:dir(rtl) { display:block; margin-inline-start: calc(32% + 5.6rem); }
.sequenceTable.breakdown td { font-size: 95%; padding: 0.2rem; text-align: center; }





#notable h4, #notable h3 { margin-inline-start: 0; }
#notable ul { margin-inline-start: 0; margin-inline-end: 3rem; }



.cased { display:flex; margin-inline-start:7.5%; margin-inline-end:32%; }
.cased figure { margin:0; flex: 1; }


.soundSummary .listIPA { cursor: pointer; }

details table.soundSummary {
    width: 100%;
    }
.caseHeading {
    color: chocolate;
    margin-block: 0;
    }



p:has(.charExample) {
    margin-block: 0;
    }

.egIntro {
    float: inline-start;
    margin-inline-start: 8%;
    margin-block-start: .4rem;
    margin-inline-end: 2rem;
    font-style: italic;
    }