body { letter-spacing: 2px; font-family: "Microsoft YaHei", Verdana, Arial, Helvetica, sans-serif, "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑";}

/* {font-family:Georgia, "Times New Roman", "KaiTi", "楷体", 'DFKai-SB', STKaiti, "华文楷体", serif ! important;} */
.yahei {font-family: "Microsoft YaHei", Verdana, Arial, Helvetica, sans-serif, "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑";letter-spacing: 2px;}
.border-orange {border: thin solid orange}
p.stitle {font-size:150%; margin:2px; padding:5px; text-align: center; color: white;  font-weight:500; text-shadow:1px 1px red;}
/* screen responsive */
@media only screen and (max-width: 768px) 
{ p.stitle {font-size: 125%;} }
@media only screen and (max-width: 380px) 
{p.stitle {font-size: 110%;} }
	
/* for Article Pages */
h2.h2st {color:gold; font-weight:600; }
h3.h3st {color:gold; font-weight:500;padding:0 20px; }
h4.h4st {color:silver; font-weight:500;padding:0 30px; }
p.para {font-size:120%; color:silver; text-align: left;  font-weight:500; /* letter-spacing:2px;*/}
p.padding2x {padding: 2px 44px !important;}

/* modify the main-menu area upper a little bit in slider.css */
.site-name {font-size: 1.4em;	}

ul.main-menu > li > a {
    display: block;
    margin: 0;
    padding: 10px 1px;
    font-size: large;
}
.slider-text {	    visibility: hidden;	    z-index: 8;	    flex: 10 100 10%;	    padding: 22px;}

/* move the slider area upper a little bit in slider.css */80vh;  /* 
.slider-item {position: relative; height: original is 100vh  
    width: 100%; display: flex; align-items: center; }*/
	
.slider-img { flex: 2 2 60%;  /* larger picture, was 40% */  border: 10px solid #1e222a; }
/* .slider-img {    flex: 2 2 50%;}   */
/* zoom in the iframe (including Youtube's) and images */
.zoom {
  /* padding: 50px;
  background-color: green; */
  transition: transform .2s; /* Animation */   width: 90%;   height: 300px;   margin: 0 auto;}

.zoom:hover { transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}


.responsive-img { width: 100%;  height: auto;	border: 10px solid #1e222a;} 
.img-ctr  { display: block; margin-left: auto; margin-right: auto; width: 50%; }
  
div.ol li {font-size:110%; /*tab-stops:42.55pt; line-height:26pt; */ font-stretch:expanded; margin:2px; padding:2px;  color:silver;}

/* correction to toolbar menu to display the block title text like "toolbar Items", "Administation Menu", etc. */
.visually-hidden { position: absolute !important;
    height: 1px;     width: 1px;    overflow: hidden;    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */    clip: rect(1px, 1px, 1px, 1px);    white-space: nowrap; /* added line */}
/* this is to make the font @larger and with a thin border */
.block-title {
    position: relative; color: skyblue; font-size: large; border-bottom: thin solid darkorange;
    padding: 10px 10px 10px 20px;  text-align:center; }
	
/* dpc added on 6-4-2021  
.visually-hidden { 	    position: absolute !important;     height: 1px;     width: 1px;	    overflow: hidden;	    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */	    
  clip: rect(1px, 1px, 1px, 1px);	    white-space: nowrap; /* added line */	display:none;}  */
ul.main-menu {
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 1.1em !important;
    /* color: red; */
    font-weight: 400;
    z-index: 30;
    list-style: none;
    list-style-type: none;
}
ul.main-menu ul.submenu li {
    display: block;
    width: 300px;
    padding: 1px;
    font-size: 1.1em;
    background: #04051a;
    text-align: left;
	letter-spacing: 2px;
}

.views-field-title, .views-field-changed {color:skyblue;}
.block-title {  position: relative; color: skyblue; font-size: large; border-bottom: thin solid darkorange;  padding: 10px 10px 10px 20px;  text-align:center; }
.site-branding img {    max-height: 110px; }
.site-name {    font-size: 14px; text-align:center;}
.site-slogan {font-size: 1.2em; margin-top: 2px; text-align:center; color:#ED8138; font-weight:600; letter-spacing: 2px; color:skyblue;}
td {
  padding: 5px;
  border: 1px solid #1e222a;
  border: 1px solid grey;
  width:33.33%;
}
.menu-base-theme li a {
    font-family: 'KoHo', sans-serif;
    color: #ccc;
    line-height: 100%;
    padding: 10px 0;
    background: none;
    border: 0;
    text-align: center;
    font-weight: 600;
}
  
.menu-base-theme li a {
    font-family: font-family: "Microsoft YaHei", Verdana, Arial, Helvetica, sans-serif, "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑"
    color: #ccc;
    line-height: 100%;
    padding: 10px 0;
    background: none;
    border: 0;
    text-align: center;
    font-weight: 600;
}

.change-color {      
      font-family: /* futura*/;  
	  font-style: ;      
      width:100%;      
   /*   margin: 0 auto; */
      text-align: center;      
      color:#313131;
      font-size:36px;
      font-weight: bold;
      position: /*absolute*/;
      -webkit-animation:colorchange 40s infinite alternate;        
    }

@-webkit-keyframes colorchange {
    0% { color: gold;      }      
    10% {color: Ivory;   }      
    20% {color: red;	}
    30% {color: yellow;}
    40% { color: green;}
    50% {color: MediumSpringGreen;}
	60% { color: orange;  }
	70% { color: Purple; }
    80% { color: White;}      
    90% {color: silver; }
	100% {color: OrangeRed;}}
/* On screens that are 992px or less, */
@media screen and (max-width: 992px) {
  .change-color { font-size:40px;   }}
  
@media (min-width: 768px) 
{.change-color { font-size:32px;   }}

/* On screens that are 600px or less,  */
@media screen and (max-width: 600px) 
{.change-color { font-size:28px;   }}

/* On screens that are 360px or less,  */
@media screen and (max-width: 360px) 
{.change-color { font-size:14px;   }}
/*
    0% { color: gold;      }      
    10% {color: #8e44ad;   }      
    20% {color: #1abc9c;	}
    30% {color: #d35400;}
    40% { color: gold;}
    50% {color: #34495e;}
	60% { color: orange;  }
	70% { color: #2980b9; }
    80% { color: #f1c40f;}      
    90% {color: #2980b9; }
	100% {color:green;} 
}*/

.img-1b5p { height:auto; border: 1px double rgba(255, 99, 71, 0.7); padding: 5px; z-index: -1;}
.div-center90 {  margin: auto;  width: 98%; /* was 90% changed on 2024-11-30 DPC*/ padding: 10px;} 
.shadow-box {  border: 2px solid red;   outline: 2px solid yellow;   outline-offset: 2px;   border-radius: 2px; box-shadow: 0 0 0.5em 0.5em rgba(0, 180, 251, 0.9);
}
.hero-topic {  top: 50%;  left: 50%;  text-shadow: 1px 2px 2px red, 0 0 25px blue, 0 0 5px red;}
.kaiti  {font-family:Georgia, "Times New Roman", "KaiTi", "楷体", "DFKai-SB", STKaiti, "华文楷体", serif; display:block ! important; }

/* Below were added on May-30-2025 DPC */
/***************************************/
.iframe-container {
  position: relative;  width: 100%;  overflow: hidden;  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0;  width: 100%;  height: 100%;  border: none;}
hr {outline: white solid 4px; }
.h3-head {font-weight:550; color:purple; font-family:Georgia, "Times New Roman", "KaiTi", "楷体", "DFKai-SB", STKaiti, "华文楷体", serif  !important;; display:block ! important;  background: #FEFAE0; width: 50%;  margin:auto auto  !important;}

blockquote { padding: 10px 20px;
  color:purple;  border-top: red solid 2px;     border-bottom: red solid 2px;   border-left: none !important; outline-offset: 2px;  /*outline: white solid 2px; background-color: #2b2b5c  ; */   background-color:azure; font-weight: 500;  text-align: center;  width: 70%;     max-width: 100%;  margin: auto; } 
/* above were added on May 30, 2025 dpc */