body {
	line-height: 2em;
	}
#featureTableBody {
	line-height: 1.75;
	}


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



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

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

.trans, .listTrans, .name { 
	font-family: "Gentium Plus", Gentium, "Lucida Sans Unicode", "Lucida Grande", 'lucida sans', "helvetica neue", sans-serif; 
	font-size: 1.1em;
	font-style: italic;
	font-weight: 300;
	}
.listArray { display: flex; flex-direction: row; flex-wrap: wrap; }
.listPair { display: flex; flex-direction: column; flex-wrap: nowrap; margin-right: .75em; margin-bottom: 1em;}
.listItem { color: red; cursor: pointer; min-width: 1em; }
.listAll { float:right; font-size: 70%; white-space: nowrap; cursor: pointer; }

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

section { clear: left; }

.ipa, .listIPA { 
	font-family: doulosipa,"Gentium Plus", "Lucida Sans Unicode", "Lucida Grande", 'lucida sans', "helvetica", sans-serif; 
	font-size: 18px; 
	}
.ipa:before { 
	content: '⌈'; 
	font-family: "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: "Gentium Plus", Gentium, "Lucida Sans Unicode", "Lucida Grande", 'lucida sans', "helvetica neue", sans-serif; 
	margin-right: 0.2em; 
	margin-left: 1.5px;  
	color: #aaa; 
	}
.listIPA:before { 
	content: '⌈'; 
	font-family: "Gentium Plus", Gentium, "Lucida Sans Unicode", "Lucida Grande", 'lucida sans', "helvetica neue", sans-serif; 
	color: #aaa; 
	}
.listIPA:after { 
	content: '⌋'; 
	font-family: "Gentium Plus", Gentium, "Lucida Sans Unicode", "Lucida Grande", 'lucida sans', "helvetica neue", sans-serif; 
	color: #aaa; 
	}
table p {
	margin: .5em 0;
	}



.ex, .exlist  { 
	cursor: pointer; 
	color: crimson; 
	}
.uname {
    font-size: 75%;
    margin: 0 2px;
	}

p.large {
	text-align: center;
	}
.instructions {
	font-style: italic;
    font-size: 80%;
    line-height: 1.4;
	}
h2 {
    font-size: 180%;
	}


#features {
	float: right;
	position: -webkit-sticky;
	position: sticky;
	top: 3em;
	right: 1em;
	width: 28%;
	text-align: right;
	margin-top: 7em;
	clear:both;
	}
#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; }


#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 { 
	position: fixed; 
	bottom: 20px; 
	right: 10px; 
	padding: 0.5em; 
	width: 26%; 
	background-color:#ffe; 
	border: 1px solid #CCC; 
	box-shadow: 7px 7px 5px #888; 
	padding: 5px 10px 5px 15px; 
	border-radius: 10px; 
	z-index:2000;
	width: 28%;
	font-size: 80%;
	text-align: left;
	text-align: start;
	max-height: 80%;
	overflow: auto;
	}
#panel img { vertical-align: middle; }
#panel p { margin: 0; margin-top: 3px; }
#panel #title { 
	font-size: 200%; 
	color: #F00;
	}
/* ====================== */


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


.set_vertical_rl {
	writing-mode: vertical-rl;
	}
.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;
	}

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


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


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

figcaption {
	counter-increment: figures;
    }

figcaption:before {
	content: 'Fig. ' counter(figures) ': ';
    }



mark {
    border-radius: .5em;
    border: 1px solid darkgray;
    padding: 0 1em;
    }
    
details {
    margin-left: 7.5%;
    margin-right: 32%;
    }
    
.leadin {
    color: coral;
    display: inline-block;
    margin: 1.5em 1em 0 0;
    }
.characterBox {
    border: 1px solid #eee; 
    padding: 8px;
    background-color: #fffdf5;
    margin-left: 7.5%;
    border-radius: 8px;
}
.termref {
    border-bottom: 1px dotted teal;
    }
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;
    }




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.sideCaption {
    margin: 2rem 30% 2rem 3rem;
    }
dd {
    margin-inline-start: 3rem;
    }