*{
	margin:0;
	padding:0;
}

:root {
	--white: #ffffff;
	--skyblue: #87ceeb;
	--aqua: #00ffff;
	--magenta: #ff00ff;
	--paleblue: #afeeee;
	--paleblue2: #abdbed;
	--black: #000000;
	--blue: #1e90ff;
	--green: #008000;
	--navy: #000080;
	--gray: #808080;
	--aquamarine: #7fffd4;
	--darkslateblue: #453886;
	--red: #ff0000;
	
	/* my applications */
	--icon-size: 20;
	--icon-color: var(--navy); /*#1e90ff;  blue */
	--pixel-converter: 1px;
	/* #####[details-summary]##### */
	--summary_hover: var(--skyblue);
	--summary_after: var(--aqua);
	--summary_open: var(--aqua);
	--details_bgd: var(--paleblue);
	--details_box: var(--black);
	--details_bottom: var(--black);
	/* #####[end:details-summary]##### */

}

html {
	margin:0;
	padding:0;
}

/* https://stackoverflow.com/questions/4575826/how-to-push-a-footer-to-the-bottom-of-page-when-content-is-short-or-missing/66565163#66565163  */
body {
	min-height: 100vh; 
	display: flex; 
	flex-direction: column;
	/*justify-content: space-between;	*/
	/*position:relative;*/
}

.langEN {font-family: "Times New Roman", "Segoe UI", Verdana, Helvetica, san-serif;}
.langTW {font-family: "新細明體", PMingLiU, MingLiU, Arial, Helvetica, san-serif;}

.langEN {font-size: 1.0rem;}
.langTW {font-size: 1.25rem;} 

.spacy {letter-spacing:0.5em;}
.pinyin {font-family: "arial unicode ms", "lucida sans unicode", sans-serif;}
.nolink {text-decoration: none; }

.twtxt { /* https://stackoverflow.com/questions/10572439/preventing-line-breaks-in-space-separated-chinese-text-in-html */
  word-break: keep-all;
}	

/* unvisited link */
a:link {
	text-decoration:none;
	border-bottom: 1px dashed #000;
    padding-bottom: 2px;	
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    background-color: #abdbed;
}

/* selected link */
a:active {
    color: aqua;
} 

.lh2 {line-height:2.0em;}

.lh15 {line-height:1.5em;}


.clear-fix::after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.icon-download {
    background: url(../img/download_icon.png) no-repeat right top;
    display:inline;
    padding-right:14px;
}
.icon-offsite {
	background-color:yellow;
    background: url(../img/offsite-link-icon.png) no-repeat right top;
    display:inline;
    padding-right:18px;
}


/* portrait */
@media screen and (orientation:portrait) {
	/* portrait-specific styles */
    }
}
/* landscape */
@media screen and (orientation:landscape) {
	/* landscape-specific styles */
}

/* print */
@media print{
	.noprn {display:none;}
}
@media print{/*print url after link*/
	a::after{content:" (" attr(href) ") ";font_size:0.8em;font-weight:normal;}
}
/* end:print */


/* Oz:2020 first half */
a.external:after {
  display: inline-block;
  font-family: FontAwesome;
  content: '\f08e';
  padding-left: 0.5rem;
  color: var(--icon-color, green);
  font-size: calc(var(--icon-size) * var(--pixel-converter));	
}
	
a.download:after {
  display: inline-block;
  font-family: FontAwesome;
  content: '\f019';
  padding-left: 0.5rem;
  color: var(--icon-color, green);
  font-size: calc(var(--icon-size) * var(--pixel-converter));	  
}


a.dn_pdf:after {/*download pdf file from this site*/
  display: inline-block;
  font-family: FontAwesome;
  content: '\f1c1';
  padding-left: 0.5rem;
  color: var(--icon-color, green);
  font-size: calc(var(--icon-size) * var(--pixel-converter));	  
}
 
a.pdf:after{/*download pdf file from this site*/
	display: inline-block;
	font-family: FontAwesome;
	content: '\f1c1';
	padding-left: 0.5rem;
	color: var(--icon-color, green);
	font-size: calc(var(--icon-size) * var(--pixel-converter));	
 }

a.internal:after {/*link to other pages of this site*/
  display: inline-block;
  font-family: FontAwesome;
  content: '\f064'; /*\f0c1 f045 */
  padding-left: 0.5rem;
  color: var(--icon-color, green);
  font-size: calc(var(--icon-size) * var(--pixel-converter));	
  
}

a.video:after {/*link to other pages of this site*/
  display: inline-block;
  font-family: FontAwesome;
  content: '\f03d'; 
  padding-left: 0.5rem;
  color: var(--icon-color, green);
  font-size: calc(var(--icon-size) * var(--pixel-converter));	  
}
 

a.lnk {
  border-bottom: 1px solid var(--black); /*dark skate blue */
  color: var(--darkslateblue);
  padding-bottom: .25em;
  text-decoration: none;
}

a:link {
  /*color: red;*/
  text-decoration: none;
  border-bottom: 1px dashed var(--black);
  padding-bottom: 2px;
}

/* visited link */
a:visited {
  color: var(--green);
}

/* mouse over link: MUST come after a:link and a:visited */
a:hover {
  /*color: hotpink;*/
  background-color: var(--paleblue2); /*#abdbed;*/
}
/*
a.lnk:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23453886' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 20%;
  border-bottom: 0;
  padding-bottom: .3em;
  text-decoration: none;
}
*/

/* selected link: MUST come after a:hover */
a:active {
  color: var(--aqua);
} 

.disabled {/* https://thecodebeast.com/post/how-to-disable-an-href-html-css/140 */
	pointer-events: none;
	cursor: default;
	color: var(--magenta); /* var(--gray) */
}/* usage:	<a href="..." class="disabled">...</a> */

.my_nbr {white-space:nowrap;}

mark {
	color: black;
	background-color: var(--aquamarine);
	border:dashed var(--gray) 3px;
	padding-left: 2px;
	padding-right: 2px;
}

.bdr {
	border:1px solid black;
	padding:1px;
	/*text-align:right;*/
}


/* #####[details-summary]##### */

summary:hover {
	cursor: pointer;
	background-color: var(--summary_hover); 
}

/*http://html5doctor.com/the-details-and-summary-elements/*/

summary:after {
	display: inline-block;
	font-family: FontAwesome;
	content: "\f107"; /* "+"; */
	padding-left: 0.5rem;
	color: var(--icon-color, green);
	font-size: calc(var(--icon-size) * var(--pixel-converter));	
}
details[open] summary:after {
	display: inline-block;
	font-family: FontAwesome;
	content: "\f106"; /* "-" */
	padding-left: 0.5rem;
	font-size: calc(var(--icon-size) * var(--pixel-converter));	
	background-color: var(--summary_after);
}
details[open] summary {
	cursor: pointer;
	background-color: var(--summary_open);
}


/*https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details*/
/*http://html5doctor.com/the-details-and-summary-elements/*/
/*https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details*/

details > summary {
  font-size:larger;
  line-height:2.0em;
  padding: 2px 6px;
  /*width: 15em;*/
  background-color: var(--details_bgd); /* #afeeee; */
  border: none;
  box-shadow: 3px 3px 4px var(--details_box);
}

details {
	margin-bottom:1%;
	border-bottom:dashed 1px var(--details_bottom);
}

/* #####[end:details-summary]##### */

/*http://html5doctor.com/the-details-and-summary-elements/*/
/*https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details*/
/*http://html5doctor.com/the-details-and-summary-elements/*/
/*https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details*/



/* #####[nested:details-summary]##### */

details>summary.nest {background-color:yellow;}

details>summary.nest:hover {
	cursor: pointer;
	background-color: orange; 
}


details>summary.nest:hover {
	cursor: pointer;
	background-color: orange; 
}

details>summary.nest:after {
	display: inline-block;
	font-family: FontAwesome;
	content: none; /* "+"; "\f107" */
	padding-left: 0.5rem;
	color: yellow;
	font-size: calc(var(--icon-size) * var(--pixel-converter));	
}
details[open] summary.nest:after {
	display: inline-block;
	font-family: FontAwesome;
	content: none; /* "-" "\f106" */
	padding-left: 0.5rem;
	font-size: calc(var(--icon-size) * var(--pixel-converter));	
	background-color: yellow;
}
/* #####[end:nested:details-summary]##### */



/* **********[sticky.table]****************** */
.nian {
  /*font-family: "Fraunces", serif;*/
  /*font-size: 125%;*/
  white-space: nowrap;
  margin: 0;
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: 1px solid black;
}

.nian td,
.nian th {
  border: 1px solid black;
  padding: 0.5rem 1rem;
}

.nian thead th {
  padding: 3px;
  position: sticky;
  top: 0;
  z-index: 1;
  width: 25vw;
  background: yellow; /*white;*/
}

.nian thead th:first-child{
  position: sticky;
  left: 0;
  z-index: 2;
}


.nian td {
  background: #fff;
  padding: 4px 5px;
  text-align: center;
}

.nian tbody th {
  font-weight: 100;
  font-style: italic;
  text-align: left;
  position: relative;
}


.nian tbody th {
  position: sticky;
  left: 0;
  background: orange; /*white;*/
  z-index: 1;
}

.nian caption {
  text-align: left;
  padding: 0.25rem;
  position: sticky;
  background: orange; /* extra */
  left: 0;
}

[role="region"][aria-labelledby][tabindex] {
  width: 100%;
  max-height: 50vh;/*98vh;*/
  overflow: auto;
}

[role="region"][aria-labelledby][tabindex]:focus {
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
  outline: 0;
}
/* **********[end:sticky.table]****************** */


/* ********[sticky-buttons]********** */
/* https://www.w3schools.com/howto/howto_js_scroll_to_top.asp */
#myBtnUp {
  display: none; /* hidden by default */
  position: fixed; /* fixed-sticky position */
  bottom: 150px; /* place the button at the bottom of the page */
  right: 30px; /* place the button 20px from the right */
  z-index: 99; /* make sure it does not overlap */
  font-size: 18px; /* increase font-size */
  border: none; /* remove borders */
  outline: none; /* remove outline */
  background-color: hsla(0, 100%, 50%, 0.3); /* set a background color */
  color: white; /* text color */
  cursor: pointer; /* add a mouse pointer on hover */
  padding: 15px; /* some padding */
  border-radius: 50%; /* rounded corners (10px) */
}
        
#myBtnUp:hover {
  background-color: red; /* background on hover */
}
	
#myBtnDown {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: hsla(0, 100%, 50%, 0.3);
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 50%;
}

#myBtnDown:hover {
  background-color: red;
}
/* ********[end:sticky-buttons]********** */

/* *****[horizontal.lines]*****/
hr.new1 {/* Red border */
  border-top: 1px solid red;
}

hr.new2 {/* Dashed red border */
  border-top: 1px dashed red;
}

hr.new3 {/* Dotted red border */

  border-top: 1px dotted red;
}

hr.new4 {/* Thick red border */
  border: 1px solid red;
}

hr.new5 {/* Large rounded green border */
  border: 10px solid teal; /*#008080*/
  border-radius: 5px;
}
/* *****[end:horizontal.lines]*****/

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}


/* push footer to bottom of page */
/* https://matthewjamestaylor.com/bottom-footer */
/* https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/ */

/* modified (to flexbox version) 2024-11-11 because not effective on mobile =>
https://stackoverflow.com/questions/51683107/making-a-footer-stay-at-the-bottom-of-the-page-both-in-mobile-view-and-desktop-v#:~:text=To%20make%20the%20footer%20stay%20at%20bottom%20of,the%20block%20of%20CSS%20that%20applies%20to%20footer.
*/
#page-container {/* id for "body" */
	/*
  position: relative;
  min-height: 100vh;
  */
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#content-wrap { /* id for "main" */
  /*	
  padding-bottom: 2.5rem;    
  */
  flex: 1 0 auto;
  padding: 20px;
}

#footer { /*  id for "footer" */
	/*
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            
  */
  flex-shrink: 0; 
  /*padding: 20px;*/
}

html {
  height: 100%;
}


/* nested counters */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters  */
ol.kls {
  counter-reset: section; /* Creates a new instance of the
                             section counter with each ol
                             element */
  list-style-type: none;
}

ol.kls>li::before {
  counter-increment: section; /* Increments only this instance
                                            of the section counter */
  content: counters(section, ".") " "; /* Combines the values of all instances
                                          of the section counter, separated
                                          by a period */
}