/* gray scheme whitesmoke, gainsboro, lightgray, ... */
.themecolor { background-color: lightgray; color: gray; }
.themecolor:hover { background-color: gainsboro; color: black; }
.whitecolor { background-color: white; color: black; }
.whitecolor:hover { background-color: gainsboro; color: gray; } 

/* General */
body  { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 15px; color: black ; }
h1    { font-size: 17px; font-weight: bold; }
title { font-size: 17px; font-weight: bold; margin-top: 15px; margin-bottom: 0px; margin-left: 5px; display: block; }
h2    { font-size: 17px; font-weight: bold; margin-top: 15px; margin-bottom: 0px; margin-left: 5px; }
h3    { font-size: 15px; font-weight: bold; margin-top: 10px; margin-bottom: 0px; }
h4    { font-size: 15px; font-weight: normal; margin-top: 10px; margin-bottom: 0px; 
        background-color:gainsboro; color: black; border-radius: 5px 5px 0px 0px; 
        padding: 2px 5px 2px 5px; }
p, th, td, ul, ol, li { font-size: 15px; }
td { vertical-align: top; }
hr { border: 1px solid lightgray; }

/* header() padding: top right bottom left */
/* compound scheme #F0F7D4 #B2D732 #FE2712 #347B98 #092834 */
/* compound scheme #CDE672 #89A621 #CA1201 #275D72 #071E27 (in used )*/

#phoneMenu { background-color: #275D72; border-radius: 30px 0px 0px 30px; height: 85%; overflow-x: hidden; padding-top: 60px; position: fixed; right: 0; transition: 0.5s; width: 0; z-index: 1; }
#phoneMenu a { color: white; display: block; font-size: 18px; padding: 8px 8px 8px 32px; text-decoration: none; transition: 0.3s; }
#phoneMenu a:hover { background-color: #89A621; color: white; }
#phoneMenu .closebtn { border-radius: 0px 0px 0px 20px; font-size: 36px; margin-left: 50px; position: absolute; right: 0px; top: 0; }

.headerMLogo { float: left; height: 69px; }
.headerSLogo { float: left; height: 46px; display: none; }
@media (max-width: 650px) {
  .headerMLogo { height: 46px; }
  .headerLogobr { display: none; }
}
@media (max-width: 400px) {
  .headerMLogo { display: none; }
  .headerSLogo { display: inherit; }
}

.topnav         { background-color: #275D72; border-radius: 10px; overflow: hidden; }
.topnav a       { color: white; display: block; float: left; font-size: 17px; padding: 12px 12px; text-align: center; text-decoration: none; }
.topnav a:hover { background-color: #89A621; color: white; }
.topnavActive       { background-color: #CA1201; color: white; } 
.topnav .icon { display: none; }
.dropdown                { float: left; overflow: hidden; }
.dropdown       .dropbtn { background-color: inherit; color: white; border: none; font-size: 17px; font-family: inherit; margin: 0; outline: none; padding: 12px 12px; }
.dropdown:hover .dropbtn { background-color: #89A621; color: white; }
.dropdown:hover .dropdown-content { display: block; }
.dropdown-content         { background-color: white; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); display: none; min-width: 160px; position: absolute; z-index: 1; }
.dropdown-content a       { color: #275D72; display: block; float: none; padding: 10px 14px; text-align: left; text-decoration: none; }
.dropdown-content a:hover { background-color: #CDE672; color: #275D72; }

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn { display: none; }
  .topnav a.icon { display: block; background-color: #CA1201; float: right; }
}

#en2zh   { display:none; }
#enA2zhA { display:inherit; }
#zh2en   { display:none; }
#zhA2enA { display:none; }

/* footer */
footer { clear: both; }
@media print {
    footer,
    header {
        display: none !important;
    }
}

/* display language
.en { background-color:yellow; }
.zh { background-color:powderblue; }
.en2 { color: gray; background-color:gold; }
.zh2 { color: gray; background-color:LightGreen; }
*/
.en { }
.zh { }
.en2 { color: gray; }
.zh2 { color: gray; }

/* past article/event list */
.pastlist { border-collapse: collapse; width: 100%; }
.pastlist th, .pastlist td { border: 1px solid lightgray; padding: 8px; text-align: left; }

/* for event pages */
.underTitle    { margin-left: 5px; margin-bottom: 20px; }
.box           { margin-bottom: 20px; 
                 background-color: whitesmoke; border-radius: 5px; 
                 padding: 5px; }
.presenter     { margin-left: 5px; margin-bottom: 20px; } 
.performer     { border: 0px; border-spacing: 0px; }
.performer tr td { padding: 0px 5px 0px 5px; }
.performerList { display: inline-block; padding: 0px 20px 0px 20px; vertical-align: top; }
.sidebyside    { display: inline-block; vertical-align: top; }

.p-programme     { margin-top: 20px; 
                   background-color: whitesmoke; color: black; 
                   border-radius: 12px; 
                   padding: 10px; }
.p-section       { margin-top: 20px; 
                   background-color:gainsboro; color: black; 
                   border-radius: 12px 12px 0px 0px; 
                   padding: 10px; }
.o-section       { margin-top: 20px; margin-left: -40px; 
                   background-color: gainsboro; color: black; 
                   border-radius: 12px 12px 0px 0px; 
                   padding: 10px; }
.p-section-sub   { background-color: whitesmoke; color: black; 
                   border-radius: 12px 12px 0px 0px; 
                   padding: 10px 10px 10px 40px;}
.o-section-sub   { margin-left: -40px; 
                   background-color: whitesmoke; color: black; 
                   border-radius: 12px 12px 0px 0px; 
                   padding: 10px 10px 10px 40px; }
.p-section + .p-section-sub { border-radius: 0px 0px 0px 0px; }
.o-section + .o-section-sub { border-radius: 0px 0px 0px 0px; }
.p-content       { margin-bottom: 20px; 
                   background-color: white; color: black; 
                   border: 2px solid whitesmoke; border-radius: 0px 0px 12px 12px; 
                   padding: 10px; }
.p-content > li         { margin-top: 5px; }
.p-content ol > li      { margin-top: 5px; }
.p-content ol > ol > li { margin-top: 0px; }
.p-programme > .p-content { margin-top: 20px; border-radius: 12px; }
.o-content       { margin-bottom: 20px; margin-left: -40px; 
                   background-color: white; color: black; 
                   border: 2px solid whitesmoke; border-radius: 0px 0px 12px 12px; 
                   padding: 10px; }
.o-content li { margin-left: 40px; margin-top: 5px; }
.o-content ol { margin-left: 40px; }
.o-content ol > li { margin-left: 0px; margin-top: 0px; }
.o-content ol > ol { margin-left: 0px; }
.o-content > ol > li { margin-left: 0px; margin-top: 0px; } 
.o-content > ol > ol { margin-left: 0px; } 
.o-content > ol > ol > li { margin-left: 0px; margin-top: 0px; } 
.p-details       { margin-left: 40px; } 
.o-details       { margin-left: 80px; } 
.intermission    { border: 1px dashed darkgray; width: 50%; }


/* button */
.normalbtn { display: inline-block; border-radius: 12px; 
             padding: 8px 16px; text-decoration: none; }
.returnbtn { display: inline-block; border-radius: 15px 0px 0px 15px; 
             padding: 5px 16px 6px 16px; text-decoration: none; }

/* Next & previous Event buttons */
.prevEvent, .nextEvent {
  cursor: pointer;
  position: fixed;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
/*  background-color: rgba(230,230,230,0.5);
  color: lightgray; */
  background-color: rgba(220, 220, 220, 0.5); /* gainsboro */
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  user-select: none;
  text-decoration: none;
}

/* Position the "buttons" to the left & right */
.prevEvent {
  left: 0;
  border-radius: 0 15px 15px 0;
}

.nextEvent {
  right: 0;
  border-radius: 15px 0 0 15px;
}

/* On hover, add a black background color with a little bit see-through */
.prevEvent:hover, .nextEvent:hover {
/*  color: white;
  background-color: rgba(0,0,0,0.5); */
  background-color: rgba(211, 211, 211, 0.5); /* lightgray */
  color: black;

}

/* Go to Top button */
#TopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
/*  background-color: gray;
  color: white; */
/*  background-color: rgba(128,128,128,0.5);
  color: black; */ 
  background-color: rgba(220, 220, 220, 0.5); /* gainsboro */
  color: gray;
  cursor: pointer;
  padding: 15px;
  border-radius: 15px 15px 0px 0px;
}

#TopBtn:hover {
/*  background-color: gainsboro; */
/*  background-color: rgba(0,0,0,0.5);
  color: white; */
  background-color: rgba(211, 211, 211, 0.5); /* lightgray */
  color: black;
}

/* figure with image */
/* img { max-width: 100%; height: auto; } */
figure { margin-left: 10px; margin-right: 10px; }
@media (min-width: 512px) {
  .fig-float-left { float: left; margin: 5px 5px; }
  .fig-float-right { float: right; margin: 5px 5px; }
}
figure > img { min-width: 256px; height: auto; vertical-align: top; }
.imgH { vertical-align: top; }
@media (max-width: 512px) {
  .imgH { width: 100%; height: auto; vertical-align: top; }
}

/* gallery
div.gallery { border: 1px solid #ccc; }
div.gallery:hover { border: 1px solid #777; }
div.gallery img { width: 100%; height: auto; }
div.desc { padding: 15px; text-align: center; }
* { box-sizing: border-box; } 

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
 */
/* Tab */
.tab {
  overflow: hidden;
  border: 1px solid lightgray;
  background-color: whitesmoke;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover { background-color: gainsboro; }
.tab button.active { background-color: lightgray; }

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: gainsboro;
  color: black;
  padding: 15px;
  text-align: center;
  display: none; /* Hidden by default */
  z-index: 1000;
}
#cookie-banner button {
  margin-left: 20px;
  padding: 8px 16px;
  background-color: #275D72;
  color: white;
  border: none;
  cursor: pointer;
}