@import "../../_bt/css/bootstrap.css";
@import "../../_bt/icon/bootstrap-icons.css";
@import "urhereBreadcrumb.css";
 /*Google Noto Fonts for all languages*/
@import url('https://fonts.googleapis.com/css2?family=Oleo+Script&family=Noto+Sans+TC:wght@400;500&display=swap');
/*
div{border:#F00 1px solid}
.container-lg, .container-md{#390 1px solid}

/*英文字型 → Linux 字型(中英文名稱) → Mac 字型(中英文名稱) → Windows 字型(中英文名稱) → 通用字型*/

html, .tooltip, .popover { /* overwrite bootstrap*/
	font-family: "Noto Sans TC", "Noto Sans", sans-serif, "微軟正黑體", "Microsoft JhengHei";
}
body{
	font-family: "Noto Sans TC", "Noto Sans", sans-serif;
 	color: #000;
	background-color: #E3E1D4;
	background-image: url(../img/bg_body.jpg);
	background-repeat: repeat-x;
}

/* headings */
h1, h2 { /* overwrite bootstrap*/
	font-family: "Oleo Script", "Noto Sans TC", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;
	font-weight: 500;
}
h1, .h1 {
  font-size: 1.8rem;
  color:#014141;
	padding-top: 1rem;
}

h2, .h2 {
  font-size: 1.5rem;
  color:#014141;
	padding-top: 1rem;
}

h3, .h3 {
  font-size: 1.25rem;
  color:#014141;
}

h4, .h4 {
  font-size: 1.2rem;
  color:#014141;
}

h5, .h5 {
	color: #663;
  	font-size: 1.1rem;
}
h6, .h6 {
  font-size: 1rem;
  color:#014141;
}
ul{
	list-style-type: square;
}
.ul4item li{
	list-style-image: url(../img/icon_grid_666633.png);
	margin-top: 5px;
}

ol.list4pub{
	margin-left: 20px;
	font-size: 90%;
	font-weight: normal;
}
#top_logo{
	margin: 0 auto; /* center */
}
/* links */
a {
  color: #23527c;
  text-decoration: none;
}
#top_logo a, #jssor_1 a {
  color: #FFC;
}

#top_logo a.btn-outline-light{
	outline: none;
	border: none;
}
#top_logo a.btn-outline-light:hover{
  color: #FFF;
  box-shadow: 0 0 0 0.1rem rgba(248, 249, 250, 0.5);
}


/* layers */
.box4content{
	background-color: #E3E1D4; /* #F0F0E8; */
	border-left: #BCBC7A solid 1px;	
	border-right: #BCBC7A solid 1px;	
	border-bottom: #BCBC7A solid 1px;	
	margin-bottom: 5px;
}

footer{
	clear: both;
	margin-top: 30px;
}
footer address{
	border-top: 1px solid rgba(64,128,128,.5); /*#408080*/
	color: #066;
}
#bk2top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;

  color: #fff;
  background-color:#F8895A;
  border-color:#FFF;
}

#bk2top:hover {
  color: #fff;
  background-color:#E54900;
  border-color:#FFF;
}
/* job opening ad only */
ol ol{
	list-style-type: lower-alpha;
}
.des ol, .des ul{
	margin-top: 0;
}
.red{
	color: #990000;
}
.redbold{
	color: #990000;
	font-weight: bold;
}
/*
.bg-yellow {
  background-color:#FFF5D2;
}
*/
.row4talk {
	border-top: #BCBC7A solid 1px;	
	vertical-align: top;
	margin-top: 5px;
	padding-bottom: 5px;
}
.row4talk .btn-abs {
  color: #663;
  background-color: #E3E1D4;
  border-color: #f8f9fa;
  padding-top: 0;
  padding-bottom: 0;
}
.row4talk .btn-abs:hover {
  color: #993;
  background-color: #e2e6ea;
}

table td{
	padding: 5px;
	padding-left: 20px;
	padding-right: 20px;
}
.table4data td{
	border: #BCBC7A solid 1px;
	padding: 5px;
	padding-left: 20px;
	padding-right: 20px;
}
/* member table 
.table4member{
	border: #BCBC7A solid 1px;
}
.table4member th, .table4member td{
	border: none;	
	vertical-align: top;
	background-color: #E3E1D4;
}
.table4member th{
	background-color: #D9D9B3;
}
.table4member td{
	text-align: left;	
	font-size: 95%;
	padding-top: 1px;
	padding-bottom: 1px;
}
.table4member td.row4first{
	font-size: 120%;
	font-weight: bold;
	border-top: #BCBC7A solid 1px;
	border-bottom: #D8D8B2 solid 1px;
}
.title4member{
	font-size: 90%;
	font-weight: normal;
	white-space: normal;
}
.table4member td.itemtitle{
	color: #663;
	text-align: right;
	padding-left: 20px;
	padding-right: 5px;
	white-space: nowrap;
}
*/
h2.h4member, h2.h4gallery, h2.h4paper, h3.h4paper{
	margin-top:5px;
	margin-bottom:0px;
	width: 100%;
	padding: 5px;
	color: #330;
	background-color: #D9D9B3;
	border-top: #BCBC7A solid 1px;	
	border-left: #BCBC7A solid 1px;	
	border-right: #BCBC7A solid 1px;	
/*	border-bottom: #BCBC7A solid 1px;	*/
}
h2.h4gallery, h2.h4paper, h3.h4paper{
	border-bottom: #BCBC7A solid 1px;
}
a.btn-outline-link {
  color: #23527c;
  border: #BCBC7A solid 1px;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 15px;
	padding-right:15px;
	margin-top: 1px;
}
a.btn-outline-link:hover {
  color: #0056b3;
  border: #663 solid 1px;
}

.gallery_title{
	margin-bottom:0px;
	color: #330;
	background-color: #D9D9B3;
	border-top: #BCBC7A solid 1px;	
	border-left: #BCBC7A solid 1px;	
	border-right: #BCBC7A solid 1px;	
}
.gallery_des{
	border: #BCBC7A solid 1px;	
}

.p_portrait{
	border: #BCBC7A solid 1px;	
}
.r4member{
}
.row4first{
	font-size: 120%;
	font-weight: bold;
	border-top: #BCBC7A solid 1px;
	border-bottom: #D8D8B2 solid 1px;
	padding-left: 15px;
}
a.link2hp{
	color:#552;
	font-size: 80%;
	font-weight: normal;
}
a.link2hp:hover{
	color:#330;
}
.title4member{
	font-size: 90%;
	font-weight: normal;
	white-space: normal;
}
.cap4img, .itemtitle{
	color: #663;
}
dt.itemtitle{
	font-weight: normal;
}
.text-holiday{
	color: #4D2600;
}
.date2show{
	color: #663;
	font-weight: normal;
	white-space:nowrap; 
}	
.list4event	dt, .list4event	dd{
	border-top: 1px solid rgba(255,255,255,0.5);
	padding-top: 3px;
	line-height: 1.1rem;	
}
.news2show dt{
	font-weight: normal;
}
.figure {
  display: table;
}
.figure-caption{
	display: table-caption;
	caption-side: bottom;
}
.shownews{
  background-color: transparent;
		
}
/* added */
/* not good for IAAQ image in figure
.img-thumbnail{
	margin-right: 20px;
}
*/
h3.badge-outlined{
	font-weight: normal;
}
.badge-outlined {
	font-weight: normal;	border: #BCBC7A solid 1px;
}
.badge-primary.badge-outlined {
  color: #007bff;
  background-color: transparent;
  background-image: none;
  border: 1px solid #007bff;
}
.badge-default.badge-outlined {
  color: #868e96;
  background-color: transparent;
  background-image: none;
  border: 1px solid #868e96;
}
.badge-success.badge-outlined {
  color: #28a745;
  background-color: transparent;
  background-image: none;
  border: 1px solid #28a745;
}
.badge-info.badge-outlined {
  color: #17a2b8;
  background-color: transparent;
  background-image: none;
  border: 1px solid #17a2b8;
}
.badge-warning.badge-outlined {
  color: #ffc107;
  background-color: transparent;
  background-image: none;
  border: 1px solid #ffc107;
}
.badge-danger.badge-outlined {
  color: #fff;
  background-color: #dc3545;
  border: 1px solid #dc3545;
}
.fb-page{
	border:#ccc 10px solid;
}
.list-group-item { /* overwrite bootstrap*/
  background-color: #E3E1D4;
}




acronym {
  text-decoration: none;
}



/* list of years to select */
.page-link {
  color: #23527c;
  border: none;
  background-image: linear-gradient(to right, #F0F0E8, #E7E7D8);  
}
.page-link:focus, .page-link:hover, .page-item.active .page-link {
  color: #663;
  border: none;
  background-image: linear-gradient(to bottom, #F0F0E8, #E7E7D8);  
}



/* for navbar */



nav{ /* overwrite bootstrap*/
  font: normal 1rem "Noto Sans TC";
  background: #55713B url(../img/bg_menu.png) repeat-x; 
  padding:0;
}
/* hamburger icon */
.navbar-dark .navbar-toggler {
  border-color: rgba(255, 255, 200, 0.8);
}
/* change the color of 3 bars
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 200, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
*/
.navbar-dark .navbar-nav .nav-link {  /* overwrite bootstrap*/
  color: #FFF;
  padding: 0 0.5rem;
}
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {  /* overwrite bootstrap*/
  color: #FFC;
}
.nav-link:hover { /* added */
    box-shadow: 0 -2px #C5D8B4 inset;
}
.dropdown-item { /* overwrite bootstrap*/
  color: #FFF;
  box-shadow: none;
  background: #55713B url(../img/bg_menu_hover.png);  
}
.dropdown-item:hover, .dropdown-item:focus {/* overwrite bootstrap*/
  color:#FFC;
  background: #55713B url(../img/bg_menu.png);  
}
.dropdown-toggle { /* overwrite bootstrap*/
  white-space: normal;
}

.dropdown-toggle:after { /* not to add arrow */
  content: none;
}
.dropdown-menu { /* overwrite bootstrap*/
  font: normal 1rem "Noto Sans TC";
  background-color: #55713B;
  padding:0;
}
#navbarCollapse{ /* added */
	padding:0;
}
#navbarCollapse .nav-item{ /* added */
 /* background-color: #55713B;*/
	border-right:	1px solid #628353;
	border-right:	1px solid #628353;
}

.nav-item a.btn-outline-light{
	outline: none;
	border: none;
	padding: 0px;
}
.nav-item a.btn-outline-light:hover{
  color: #FFF;
  box-shadow: 0 0 0 0.1rem rgba(248, 249, 250, 0.5);
}
/*
image in carousel, card, fix height
https://raybo.org/posts/2021-03-27-consistent-height-carousels-with-css-gradients-by-hacking-the-bootstrap-5-carousel/
*/
.img2fixh{
	object-fit: cover; 
	object-position: center; 
	height: 300px; 
	overflow: hidden;	
}

/* carousel */ /* overwrite bootstrap*/
.carousel-control-prev,
.carousel-control-next {
  width: 10%;
  opacity: 0.8;
  color: #000;
}
.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 30px;
  height: 30px;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23CFC' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23CFC' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
}

.carousel-indicators {
    width: 100%;
    height: auto;
	margin: 0;
	padding:0;
}

.carousel-indicators li {
  border:0;
  width: 100%;
  height: 30px;
  margin: 0;
  background-color: none;
  background-repeat: no-repeat;
}
.carousel-indicators li:hover {/* added*/
  opacity: 1;
}
.carousel-indicators .active { 
  opacity: .3;
}

/* https://scottdorman.blog/2019/03/02/bootstrap-carousel-caption-placement/ */
.carousel-caption a{
	/* color: #000000; */
}
.carousel-caption {
  /*background-color: rgba(0, 0, 0, 0.7);*/
	/* color: #000000;*/
  background: transparent;
  position: relative;
  right: 0;
  top: 0;
  left: 0;
  padding:0;
font-size: 90%;
}
/* defined newly */
.space4anchor:before { 
display: block; 
content: " "; 
margin-top: -100px; 
height: 100px; 
visibility: hidden; 
}

/* tooltip 
the color of arrow is still BLACK???

.tooltip-inner {
  color: #fff;
  background-color: #F8895A;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #F8895A;
}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: #F8895A;
}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: #F8895A;
}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: #F8895A;
}
*/

/* gallery - list */

.gallery .flex-grow-1{
	border-bottom: #BCBC7A solid 1px;	
}


/*
https://blog.xuite.net/vexed/tech/22596484
.gallery span {
  display : inline-block;
  overflow : hidden;
  text-overflow : ellipsis;
  white-space : nowrap;
  width : 240px;
}
*/
/* homepage - news*/
#hpage .bi{
	color: #663;
}

#hpage .link4icon:hover .bi{
	color: #993;
}


#hpage .badge-light a{
  color: #663;
}
#hpage .badge-light a:hover{
  color: #993;
  text-decoration: none;
}
#hpage .badge-light {
  color: #663;
  font-weight: normal;
  background-color: #E3E1D4;
  outline: none;
  border: none;
}
#hpage .badge-light:hover {
  box-shadow: 0 0 0 0.1rem rgba(248, 249, 250, 0.3);
}
/* homepage - talks */
#box4talk{
	margin-top: 20px;
	padding-right: 0px;
	border-bottom: 1px solid rgba(255,255,255,0.5);
}
.list4talk{
	border-top: 1px solid rgba(255,255,255,0.5);
	font-size: 95%;
	padding-top: 5px;
	line-height: 1.2rem;
}
.talk_category{
	font-size: 90%;
}
.talk_category:hover{
  box-shadow: 0 0 0 0.1rem rgba(248, 249, 250, 0.3);
}
.talk_category a{
	color: #663;
}
.talk_category a:hover{
  color: #993; 
  text-decoration: none;
}

.speaker{
	white-space: nowrap;
	font-style:italic;
	color: #4D2600;
	margin-left: 60px; /* 50+10 in .postdate */
}
/* date view for talks */
.postdate, .postdate_c {
  position: relative;
  width: 50px;
  height: 50px;
  float: left;
  margin-right: 10px;
}
.month, .day, .year, .weekday { 
  position: absolute; 
  text-indent: -1000em;
  background-image: url(../img/page/bg_date.png);
  background-repeat: no-repeat;
}
.postdate_c .month, .postdate_c .day, .postdate_c .weekday { 
  background-image: url(../img/page/bg_date_c.png);
}
.month { top: 22px; left: 0; width: 34px; height: 25px;}
.day { top: 0; left: 0; width: 34px; height: 25px;}
.year, .weekday { bottom: 0; right: 0; width: 16px; height: 48px;}

/*
.m-01 { background-position: 0 4px;}

.m-01 { background-position: 0 2px;}
.m-02 { background-position: 0 -28px;}
.m-03 { background-position: 0 -57px;}
.m-04 { background-position: 0 -86px;}
.m-05 { background-position: 0 -115px;}
.m-06 { background-position: 0 -144px;}
.m-07 { background-position: 0 -173px;}
.m-08 { background-position: 0 -202x;}
.m-09 { background-position: 0 -231px;}
.m-10 { background-position: 0 -260px;}
.m-11 { background-position: 0 -289px;}
.m-12 { background-position: 0 -318px;}
*/
.m-01 { background-position: 0 0px;}
.m-02 { background-position: 0 -50px;}
.m-03 { background-position: 0 -100px;}
.m-04 { background-position: 0 -150px;}
.m-05 { background-position: 0 -200px;}
.m-06 { background-position: 0 -250px;}
.m-07 { background-position: 0 -300px;}
.m-08 { background-position: 0 -350px;}
.m-09 { background-position: 0 -400px;}
.m-10 { background-position: 0 -450px;}
.m-11 { background-position: 0 -500px;}
.m-12 { background-position: 0 -550px;}

.d-01 { background-position: -50px 0;}
.d-02 { background-position: -50px -50px;}
.d-03 { background-position: -50px -100px;}
.d-04 { background-position: -50px -150px;}
.d-05 { background-position: -50px -200px;}
.d-06 { background-position: -50px -250px;}
.d-07 { background-position: -50px -300px;}
.d-08 { background-position: -50px -350px;}
.d-09 { background-position: -50px -400px;}
.d-10 { background-position: -50px -450px;}

.d-11 { background-position: -100px 0px;}
.d-12 { background-position: -100px -50px;}
.d-13 { background-position: -100px -100px;}
.d-14 { background-position: -100px -150px;}
.d-15 { background-position: -100px -200px;}
.d-16 { background-position: -100px -250px;}
.d-17 { background-position: -100px -300px;}
.d-18 { background-position: -100px -350px;}
.d-19 { background-position: -100px -400px;}
.d-20 { background-position: -100px -450px;}

.d-21 { background-position: -150px 0px;}
.d-22 { background-position: -150px -50px;}
.d-23 { background-position: -150px -100px;}
.d-24 { background-position: -150px -150px;}
.d-25 { background-position: -150px -200px;}
.d-26 { background-position: -150px -250px;}
.d-27 { background-position: -150px -300px;}
.d-28 { background-position: -150px -350px;}
.d-29 { background-position: -150px -400px;}
.d-30 { background-position: -150px -450px;}
.d-31 { background-position: -150px -500px;}

.w-0 { background-position: -200px 0;}
.w-1 { background-position: -200px -50px;}
.w-2 { background-position: -200px -100px;}
.w-3 { background-position: -200px -150px;}
.w-4 { background-position: -200px -200px;}
.w-5 { background-position: -200px -250px;}
.w-6 { background-position: -200px -300px;}
/*
.y-2006 { background-position: -150px 0;}
.y-2007 { background-position: -150px -50px;}
.y-2008 { background-position: -150px -100px;}
.y-2009 { background-position: -150px -150px;}
.y-2010 { background-position: -150px -200px;}
.y-2011 { background-position: -150px -250px;}
.y-2012 { background-position: -150px -300px;}
.y-2013 { background-position: -150px -350px;}
.y-2014 { background-position: -150px -400px;}
*/


/*--------------------------------------------------------------
# hOutreach
--------------------------------------------------------------*/
 

.hOutreach .clip {
/*  margin-bottom: 20px;*/
  overflow: hidden;
}

.hOutreach .clip .clip-img {
  position: relative;
  overflow: hidden;
}

.hOutreach .clip .icon2up {	
  position: absolute;
  height: 240px;
  left: 0;
  right: 0;
  bottom: -60px;
  opacity: 0;
  transition: bottom ease-in-out 0.4s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hOutreach .clip:hover .icon2up {
  bottom: 0;
  opacity: 1;
  transition: bottom ease-in-out 0.4s;
}


.hOutreach .clip .icon2up a {
  font-size: 300%;
  color: rgba(124, 197, 118, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/*
.hOutreach .clip .icon2up a i {
  line-height: 0;
}

.hOutreach .clip .icon2up i {
  font-size: 500%;
  margin: 0 2px;
}
*/





/* overwrite bootstrap to keep homepage's 3 sections consistent width showcase */
@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 576px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 768px;
  }
}
@media (min-width: 992px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1200px;
  }
}