local.css

@font-face {
  font-family: NoToFu;
  font-style: normal;
  font-weight: 400;
/* src: url('font.woff2') format('woff2'); */
  src: url('W3CCharmodNormSubset-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'noto_devanagari';
    src: url('notosansdevanagari-bold-webfont.woff2') format('woff2'),
         url('notosansdevanagari-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'noto_regular';
    src: url('notosans-regular-webfont.woff2') format('woff2'),
         url('notosans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'noto_symbols';
    src: url('notosanssymbols-regular-webfont.woff2') format('woff2'),
         url('notosanssymbols-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
   font-family: Khmer;
   font-style: normal;
   font-weight: 400;
   src: url('NotoSansKhmer-Regular.woff') format('woff');
}

body {
	counter-reset: requirement;
}

h2 {
	margin-top: 3em;
	margin-bottom: 0em;
	}
.head h2, #abstract h2, #sotd h2 {
	margin-top: 0;
	}
h3 {
	margin-top: 3em;
	}
h4  { 
	font-size: 100%; 
    font-weight: normal; 
    color: #005a9c; 
    margin-top: 2em;  
    }
.leadin {
	font-weight: bold;
	}

ins { 
	background-color: #99FF99; 
	text-decoration: none; 
	}
del { 
	display: inline; 
	color: silver; 
	}

figure { 
	margin-bottom: 2em; 
}
figcaption {
	text-align: center;
	margin: 0.5em 2em;
	font-style: italic;
	font-size: 90%;
	}
.figno:after {
	content: ':\00A0  ';
}

a.termref:link {
	color:#C60;
	text-decoration:none;
	border-bottom: 1px dotted #FC0; 
	}
a.termref:hover {
	color:#C60;
	text-decoration:none;
	border-bottom: 1px dotted #FC0; 
	}
a.termref:visited {
	color:#C60;
	text-decoration:none;
	border-bottom: 1px dotted #FC0; 
	}
a.termref:active {
	color:#C60;
	text-decoration:none;
	border-bottom: 1px dotted #FC0; 
	}

.qterm:before, .qchar:before { content: "'"; }
.qterm:after, .qchar:after { content: "'"; }
.quote:before { content: '"'; }
.quote:after { content: '"'; }
code { 
	color: #A52A2A; 
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", NoToFu, monospace; 
    font-size: 100%; 
    }
samp, kbd { 
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", NoToFu, monospace; 
    font-size: 100%; 
    }
.uname {
	text-transform: uppercase;
	font-size: 85%;
	letter-spacing:0.03em;
	}




.requirement { 
/*    counter-increment: requirement; */
    background-color:#FFC;
    font-family:"Gill Sans", Tahoma, Geneva, Helvetica, NoToFu, sans-serif;
    font-weight: bold;
}

.requirement p:before {
/*	content: "C" counter(requirement) " \00A0";  */
	font-family:Tahoma, Geneva, NoToFu, sans-serif;
	font-weight: bold;
	font-size: smaller;
	text-transform: capitalize;
	color: #63F;
}

span.qrec {
	font-family:Tahoma, Geneva, NoToFu, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size: smaller;
	text-transform: capitalize;
	color: #63F;
}

SPAN.h\e9llo { 
      text-decoration: underline; 
}

  
span.dropExample {
    float: left;
    width: 6em;
    clear: both;
    margin-left: -6em;
    text-align: center;
    font-size: 30pt;
    font-family: serif;
    line-height: 100%;
}
    
ul.dropExampleList {
   list-style-type: none;
}
    
li.dropExampleItem {
   padding-left: 12em;
   margin-bottom: 1em;
}
    
table {
    border-collapse: collapse;
}

td.b1 {
	background-color:#d7f9cf;
	border: 2px solid black;
	width: 20%;
	text-align: center;
}

td.b2 {
	background-color:#a1fcf9;
	border: 2px solid black;
	width: 20%;
	text-align: center;
}

td.b3 {
	background-color: #fca1f7;
	border: 2px solid black;
	width: 20%;
	text-align: center;
}

td.b-clear {

	border: 1px solid black;
	width: 20%;
	text-align: center;
	font-size: 36pt;
    font-family: "Khmer", "noto_devanagari", "noto_symbols", "noto_regular", "NoToFu", "Palatino", "Times", "Times New Roman", "Verdana", sans-serif;
}

.tableSub {
    font-family: monospace;
	font-size: 11px;
	text-align: center;
	padding-left: 15px;
	padding-right: 15px;
}

.tableHead {
	text-align: center;
}

td.bigtext {
    font-size: 36pt;
    text-align: center;
    font-family: "Khmer", "noto_devanagari", "noto_symbols", "noto_regular", "NoToFu", "Palatino", "Times", "Times New Roman", "Verdana", sans-serif;
    width: 20%;
}

div.exampleBox {
	padding: 25px;
	border-style: solid;
	border-width: 1px;
	margin-left: 12pt;
	width: 80%;
}

.exampleChar {
    font-size: 36pt;
    font-family: "Khmer", "noto_devanagari", "noto_symbols", "noto_regular", "NoToFu", "Palatino", "Times", "Times New Roman", "Verdana", sans-serif;
}

.bidiExample {
    font-size: 60pt;
    font-family: "Naskh", "Palatino", "Times", "Times New Roman", "Verdana",  "noto_arabic", "noto_devanagari", "noto_symbols", "noto_regular", "NoToFu", serif;
    text-align: center;
    margin: 15px 15px 15px 15px;
    padding: 2px;
}

.markup {
	font-family: Lucida Console, "noto_devanagari", "noto_symbols", "noto_regular", NoToFu, monospace;
}

.shakespeare {
  color: #03F;
  font-weight: bold;
  font-family: serif;
  background-color: #EfEfEf;
}

.userValue {
	font-style: italic;
}

.vocabulary {
   color: red;
   text-decoration: underline;
}

.sampleCharacter {
	font-family:  "noto_devanagari", "noto_symbols", "noto_regular", "NoToFu", "Code2000", "Lucida Console", sans-serif;
}

p.quote {
    background-color:#F6F6F6;
    margin-left: 2em;
    padding-left: 2em;
    border-left: 6px solid #888888;
}

.uname {
     font-size: 75%;
     margin: 0 2px;
     letter-spacing: 0.05em;
}

.codepoint [lang="en"] {
     font-size: 120%;
}

div.terminologyExample {
     background-color:white;
     text-align: left; 
     border-style: solid; 
     border-width:3px; 
     padding-left: 20px; 
     padding-right: 20px; 
     padding-top: 10px; 
     padding-bottom: 10px; 
     width: 90%;
}

.lnum {
    float: left;
    margin-left: -15px;
    font-size: 75%;
    color: gray;
    font-family: "Lucida Console", "noto_devanagari", "noto_symbols", "noto_regular", NoToFu,monospace;
}

p.syntaxExample {
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    hyphens: none;
}

table.ncfExample td {
    text-align: center;
}

table.ncfExample th {
    text-align: center;
}




a.self {
    position: absolute;
    top: -20px;
    border: medium none;
    transition: opacity 0.2s ease 0s;
    opacity: 0.5;
	color: #999;
	text-decoration: none;
	display: inline;
}

a.self:visited {
	color: #999;
}

a.self:hover {
	color: red;
}

.self::after {
	content:  attr(href); 	
	font-weight: normal;
	font-style: italic;
	font-size: 80%;
}

.advisement {
    position: relative;
}



/* SELF-LINKS ON ADVISEMENTS */
/* The advisement is contained in a div.req which has the id for that requirement */
.req { position: relative; }
.req .links { padding-bottom: 0; }
.req .self-link {
	margin-left: -1em;
	float: left;
	text-decoration: none;
	border: 0;
	font-size: 80%;
	color: #999;
	}
.req summary {
	margin: 0;
    margin-top: 0px;
	margin-top: -1em;
	font-size: 80%;
	font-weight: normal;
	line-height: 1;
	cursor: pointer;
	}