local.css

@charset "utf-8";

/** Styles to support the mention of Unicode characters and character sequences *****/
   /* These match the styles in the tr-design stylesheet exactly.
    * They are present in this stylesheet so that we can experiment with
    * fixes and changes conveniently.
    */

	.codepoint bdi {
		line-height: 1em;
		font-size: 1.25em;
		padding-inline: 0.25em;
	}
	
	.codepoint img {
	    height: 2em;
        margin-inline: 0.25em;
        vertical-align: bottom;
	}

	.uname {
        font-family: Arial, monospace;
		font-size: 0.75em;                    
		letter-spacing: 0.03em;
		color: brown;
	}
/** end of unicode styles */


/** 
 * The remainder of the styles in this file are used locally in specdev.
 * Over time most of these should be migrated to I18N's shared stylesheet
 * (currently respec_2022.css). * 
 */



.bp { /*background-color:#ffffcc; border: 1px solid #ccc;*/ 
	background-color: #feb; 
	border-radius: 8px; 
	border-radius: 4px; 
	padding: 10px; 
	position: relative;  
	margin: 30px; 
	margin-right: 60px; 
	}
.bp a {
	font-style: italic;
	}
.bp a.local { 
	display:none;
	}

.advisement { /*background-color:#ffffcc; border: 1px solid #ccc;*/ 
	border-radius: 4px; 
	position: relative;  
	}
.advisement a {
	font-style: italic;
	}
.advisement a.local { 
	display:none;
	}

body {
	counter-reset: advisement;                  		 /* Set the section counter to 0 */
	/*counter-reset: bp;                  		  Set the section counter to 0 */
	}
a.self {
    position: absolute;
    top: -20px;
    border: medium none;
    transition: opacity 0.2s ease 0s;
    opacity: 0.5;
	color: #999;
	text-decoration: none;
	}
a.self:visited {
	color: #999;
	}
a.self:hover {
	color: red;
	}
a.self::after {
	content:  attr(href); 	
	font-weight: normal;
	font-style: italic;
	font-size: 80%;
	}

.editor-note { 
	font-style: italic; 
	color: teal;
	}
.ed { 
	font-style: italic; 
	color: white;
	background-color: #F90;
	padding-left: 10px; padding-right: 10px; 
	}

.new-term { 
	font-weight: bold 
	}
code { 
	font-family: monospace; 
	}
del { 
	display: inline; 
	color: silver; 
	}
section h2 {
	margin-top: 5em;
	margin-bottom: 0em;
	}
.head h2, #abstract h2, #sotd h2 {
	margin-top: 0;
	}

ins { 
	background-color: #99FF99; 
	text-decoration: none; 
	}
.term { 
	font-weight: bold;
	margin-top: 1em;
	}
.definition {
    position: relative;
    background-color: #efefef;
    padding: 0.5em;
    border: 0.5em;
    border-left: 6pt solid green;
    border-right: 6pt solid green;
    margin: 1em auto;
}
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; 
	}


.note {
	margin-left: 2em;
	margin-right: 3em;
		margin-top: 1em;
	border: 2px solid #CFF6D9;
	padding: .5em;
	padding-top: 0px;
	padding-bottom: 1em;
	color: #444;
	background-color: #E2FFF0;
	font-size: 0.8em;
	}
span.note-head {
	padding: .2em;
	color:#066;
	border: none;
	position:relative;
	display: block;
	width: 40px;
	left: -1.5em;
	top: -.5em;
	background: #F2FFF1;
	padding-left: .2em;
	text-align: center;
	}
	  
.counterstyle { margin: 20px 30px; }
.counterstyle code { font-family: "Lucida Console", Monaco, monospace; color: black; font-size: 12px; }

@media print {
 .bp { background: #ffcc99 }

body { font-size: 80%; margin: 2em; }
.copyright { font-size: 80%; }
}




h4 { 	color: #005a9c; margin-top: 2em;  }
.indent { margin-left: 3em; }

.links h4, .xref h4 {
    margin-top: 0;
}

.link { display: inline; }
.desc { display: inline; margin-left: 1em;  }
.desc:before { content: '— '; }

.links { 
	/*background-color: #a09de5; border: 1px solid #ccc; */  
	font-size: 90%; 
	padding: 1em;
	background-color: #EFEFF9; 
	border-radius: 5px;
	/*margin-bottom: 20px; 
	float: left; width: 60%;*/  
	}
.xref { 
	/* background-color: #feb; border: 1px solid #fc0; border-radius: 10px;*/  
	font-size: 80%; 
	padding: 1em; 
	background-color: #fbf4e0;
	border-radius: 5px;
	/*margin-bottom: 40px; 
	float: right;  width: 30%;*/ 
	padding: .25em 1em;
	}
.xref p {
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: .5em;
}

.subtopic, .topic { clear: both; }

.bigtext {
    font-size: 36pt;
    color: blue;
    text-align: left;
    }

aside h2 {
    margin-top: 0em;
    }
    
table.cpExample {
    table-layout: fixed;
    width: 80%;
    }
    
p.sidenote {
    color: gray;
    font-size:60%;
    }
    
table.truncExample th,
table.truncExample td {	
    vertical-align: top;
    }
    
table.truncExample kbd,
table.truncExample code {
    color: blue;
    font-size: larger;
    }

.summary .secno {
	display: none;
	}
	
.example_div {
    margin-left: 4em;
    margin-right: 4em;
    font-size: 90%;
	}

aside h3 {
	margin-block-start: 0;
	margin-inline-start: 1em;
	}
aside h4 {
	margin-inline-start: 1em;
	}

table.whitespace {
	/* width: 300px; */
	width: 100%;
    border-spacing: 0;
	margin: 1em 0;
	}
table.whitespace th {
	writing-mode: sideways-lr;
	vertical-align: bottom;
	}
table.whitespace td {
	text-align: center;
	vertical-align: middle;
	}
table.whitespace th,
table.whitespace td {
	border: thin solid rgba(0,0,0,.12);
	padding: 6px;
	}
table.whitespace caption {
		padding: 10px;
		caption-side: bottom;
	}


.advisement + .links { margin-top: -1em; }
.advisement + .links a { text-decoration: none; border-bottom: none; }
.advisement { }
.req { position: relative; }
.req .links { padding-bottom: 0; }
/*.req::before {
    content: "§";
    display: block;
    border: none;
    color: inherit;
    font-size: 83%;
    height: 2em;
    left: -1.6em;
    opacity: .5;
    position: absolute;
    text-align: center;
    text-decoration: none;
    top: 0;
    transition: opacity .2s;
    width: 2em;
	}*/
.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;
	}
/*.xref {
    border-radius: 8px;
    border: 4px solid white;
    padding: 10px;
    font-size: 90%;
    background-color: #FEB;
    float: right;
    width: 40%;
    margin-bottom: 1em;
	margin-inline-end: -15%;
	}*/
.seealso {
	color: #996600;
	font-size: 95%;
	font-weight: bold;
	}


.links_title { margin-top: 0; font-weight: bold; color: #005a9c; }
.links_subtitle { font-style: italic; margin-block-start: 1rem; margin-bottom: 0; }




.checklistGroup li {
    list-style-type: none;
    padding-inline: 1rem;
    padding-block: .3em;
    min-height: 2rem;
    color: brown;
    background-color: antiquewhite;
    border-radius: 5px;
    font-size: 95%;
    }
.checklistMore {
    font-size: 90%;
    font-style: italic;
    text-decoration: none;
    margin-inline-start: 1rem;
    }
.checklistGroup li input {
    accent-color: chocolate;
    }
.checklist summary {
    font-weight: normal;
    margin-block: 2rem;
    }
.checklist details > summary {
    color: saddlebrown;
    margin-inline-start: 2rem;
    }
.summaryC summary {
    color: saddlebrown;
    font-weight: normal;
    cursor: pointer;
    }


.dumpBox {
    width: 100%;
    height: 400px;
    }

.reviewComments {
	font-size: 90%;
	padding: 1em;
	background-color: #EFEFF9;
	border-radius: 5px;
	margin-block: 0;
	font-style: italic;
	}
	
.exampleNamesTable {
  border-collapse: collapse;
  width: 100%;
}

.exampleNamesTable td, .exampleNamesTable th {
  border: 1px solid #ddd;
  padding: 8px;
}

.exampleNamesTable tr:nth-child(even){background-color: #f2f2f2;}

.exampleNamesTable tr:hover {background-color: #ddd;}

.exampleNamesTable th {
  cursor: pointer;
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}

td.exampleChar {
  font-size: 300%;
  text-align: center;
  vertical-align: middle;
}

.spilloverExample {
  background-color: #fdfdfd;
  text-indent: 10px;
  font-size: 140%;
}

.spilloverExample :lang(ar) {
  font-family: Noto Sans Arabic, Tahoma, sans-serif;
  }

.localdef {
    background-color:white;
    border: 1px solid brown; 
    margin:0.5em; 
    padding:0.5em;
}

table.bidi-example-table {
    background-color: white;
    border-collapse: collapse;
    padding: 0;
    width: 98%;
}

table.bidi-example-table td {
    padding: 0;
}

table.bidi-example-table th {
    text-align: center;
}

table.bidi-example-table tr {
    border-bottom: 1px solid #ddd;
}

table.bidi-example-table tr td:last-child {
    white-space: nowrap;
}