body{
    font-family: sans-serif;
    background-color: #fbf9f8;
    -webkit-text-size-adjust: none;
/* #fbf9f8 known as Light-grayish orange */
}
a{
    white-space: nowrap;
}
table{
    border-collapse: collapse;
}
th, td{
    padding: 0;
}
table.main{
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: thin;
    text-align: center;
}
table.main tbody th, table.main tbody td{
    padding: 1px 2px;
}
footer{
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: #fbf9f8;
/* For browsers that do not support gradients */
    background-image: linear-gradient(#d7c3ba, #fbf9f8);
/* #d7c3ba known as Grayish orange */
}
#footer-hr{
    margin-top: 0;
    margin-right: 0.1775em;
    margin-left: 0.1775em;
    border-top: 2px solid #8f827c;
    color: #d7c3ba;
/* #8f827c known as Dark-grayish orange */
}
time{
    position: absolute;
    z-index: -1;
    top: 0.454em;
    left: 0.246em;
    font-size: smaller;
}
#footer-text{
    position: relative;
    text-align: right;
    font-size: smaller;
}
#footer-text small{
    display: inline-block;
    position: relative;
    right: 0.2475em;
    margin-left: 0.8em;
    padding-bottom: 2px;
    white-space: nowrap;
}
img.DDFD-Banner{
    border: 1px solid #d5dcdc;
    outline: thin solid white;
/* #d5dcdc known as Light-grayish cyan */
}
div.biography{
    border: 2px solid #8f827c;
    font-size: smaller;
/* #8f827c known as Dark-grayish orange */
}
a.terms-contact-sitemap{
    display: inline-block;
    border: thin dashed #d7c3ba;
    padding-bottom: 1px;
    text-align: left;
    background-color: white;
}
#HKU-ME-Alfonso{
    position: absolute;
    top: 0;
    left: 0.205em;
    font-size: smaller;
}
#div-Youtube-button-PHP-counter{
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0.205em;
    font-size: smaller;
}
span.Youtube-icon{
    display: inline-block;
    margin: 0.068em;
    border-left: 0.25em solid red;
    border-right: 0.25em solid red;
    border-bottom: 0.123em solid red;
    font-size: smaller;
    color: white;
    background-color: red;
}
span.Youtube-icon-expt{
    margin: 0.0595em;
    border-left: 0.25em solid red;
    border-right: 0.25em solid red;
    border-bottom: 0.123em solid red;
    font-size: smaller;
    color: white;
    background-color: red;
}
span.Youtube-border-expt{
    border-left: 1px dashed #3a3a3a;
    border-top: 1px solid #8f827c;
    border-right: 1px solid #8f827c;
    border-bottom: 1px solid #8f827c;
/* #3a3a3a known as Very-dark gray */
}
#div-PHP-counter{
    text-align: right;
    font-family: monospace;
    color: #8f827c;
    font-size: smaller;
/* #8f827c known as Dark-grayish orange */
}
#div-print-JS{
    text-align: right;
    font-size: smaller;
/* #ededed known as Very-light gray, #6d9f00 known as Dark green. */
}
.a-print-JS{
    border: thin solid #ededed;
    color: #6d9f00;
    text-decoration-line: none;
}
.a-print-JS:focus,
.a-print-JS:hover{
    text-decoration-line: underline;
}
.a-print-JS:active{
    color: red;
    text-decoration-line: none;
}
.a-print-JS::before{
    content: '\1F5B6\200A';
/* \1F5B6 is Print icon, \200A is Hair space. */
}
.float-left{
    float: left;
}
.Alfonso-HW-Ngan-photo{
    margin: 8px 9px 4px;
}
.border-right-Very-dark-gray-1px{
    border-right: 1px solid #3a3a3a;
/* #3a3a3a known as Very-dark gray */
}
.border-right-Very-dark-gray-1px-dotted{
    border-right: 1px dotted #3a3a3a;
/* #3a3a3a known as Very-dark gray */
}
.border-bottom-1px{
    border-bottom: 1px solid;
}
.display_center{
    margin-left: auto;
    margin-right: auto;
}
.display_block{
    display: block;
}
.display_none{
    display: none;
}
.width-47p75p_c{
    width: 47.75%;
}
.width-100p_c{
    width: 100%;
}
.margin_left-1p1775em{
    margin-left: 1.1775em;
}
.margin_right-1p1775em{
    margin-right: 1.1775em;
}
.margin_bottom-4p505em{
    margin-bottom: 4.505em;
}
.padding_left_right-1px{
    padding-left: 1px;
    padding-right: 1px;
}
.visibility_hidden{
    visibility: hidden;
}
.text_align-left{
    text-align: left;
}
.text_align-right{
    text-align: right;
}
.text_align-center{
    text-align: center;
}
.text_indent-1em{
    text-indent: 1em;
}
.smaller{
    font-size: smaller;
}
.very-light-red{
    color: #ff8989;
}
.dark-grayish-orange{
    color: #8f827c;
}
.very-dark-gray{
    color: #616161;
}
.x11gray{
    color: #b9b9b9;
}
.blue{
    color: blue;
}
.lighter{
    font-weight: lighter;
}
.bold{
    font-weight: bold;
}
.italic{
    font-style: italic;
}
.small-caps{
    font-variant: small-caps;
}
.white-space_initial{
    white-space: initial;
}
.nowrap{
    white-space: nowrap;
}
/* Position the image container (needed to position the left and right arrows) */
.container{
    position: relative;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    outline: thin solid #eaeeee;
    min-width: 396px;
    background-color: white;
}
.container *{
    box-sizing: border-box;
    font-family: Arial;
}
.container img{
    vertical-align: middle;
}
/* Hide the images by default */
.mySlides{
    display: none;
    border-top: 2px solid #f5f7f7;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor{
    cursor: pointer;
}
/* Next & previous buttons */
.prev, .next{
    cursor: pointer;
    position: absolute;
    top: 29.52%;
    width: auto;
    padding: 14px 1px;
    margin-top: -50px;
    color: #1b5a3f;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
/* #1b5a3f known as Very-dark cyan-lime green */
}
/* Position the "next button" to the right */
.next{
    right: 0;
    border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover{
    background-color: rgba(157, 157, 157, 0.8);
}
/* Number text (1/3 etc) */
.numbertext{
    color: #999;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 1.552em;
    right: 0;
}
.row{
    border-top: 2px solid #29875f;
/* #29875f known as Dark-moderate cyan-lime green */
}
/* Container for image text */
.row:after{
    content: "";
    display: block;
    clear: both;
}
/* Six columns side by side */
.column{
    float: left;
    width: 16.666%;
}
/* Add a transparency effect for thumnbail images */
.demo{
    opacity: 0.6;
}
.active, .demo:hover{
    opacity: 1;
}
span#slide-25{
    display: inline-block;
    position: relative;
    background-image: url(../Slides/DDFD-Webpage-1000_750px-25.png);
    background-repeat: no-repeat;
    background-size: 100%;
}
span#slide-25 video{
    position: absolute;
    margin: 0;
    top: 59.6%;
    right: 2px;
    width: 44.395%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
/* w3css-buttons */
.w3-btn, .w3-button{
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}
.w3-btn:hover{
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.w3-btn, .w3-button{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.w3-disabled, .w3-btn:disabled, .w3-button:disabled{
    cursor: not-allowed;
    opacity: 0.3;
}
.w3-disabled *, :disabled *{
    pointer-events: none;
}
.w3-btn.w3-disabled:hover, .w3-btn:disabled:hover{
    box-shadow: none;
}
.w3-dropdown-hover:hover > .w3-button:first-child, .w3-dropdown-click:hover > .w3-button:first-child{
    background-color: #ccc;
    color: #000;
}
.w3-bar-block .w3-dropdown-hover .w3-button, .w3-bar-block .w3-dropdown-click .w3-button{
    width: 100%;
    text-align: left;
    padding: 8px 16px;
}
.w3-bar .w3-button{
    white-space: normal;
}
.w3-round-small{
    border-radius: 2px;
}
.w3-round, .w3-round-medium{
    border-radius: 4px;
}
.w3-round-large{
    border-radius: 8px;
}
.w3-round-xlarge{
    border-radius: 16px;
}
.w3-round-xxlarge{
    border-radius: 32px;
}
.w3-border-0{
    border: 0 !important;
}
.w3-border{
    border: 1px solid #ccc !important;
}
.w3-padding-small{
    padding: 4px 8px !important;
}
.w3-padding{
    padding: 8px 16px !important;
}
.w3-padding-large{
    padding: 12px 24px !important;
}
.w3-button:hover{
    color: #000 !important;
    background-color: #ccc !important;
}
.w3-light-grey, .w3-hover-light-grey:hover, .w3-light-gray, .w3-hover-light-gray:hover{
    color: #000 !important;
    background-color: #f1f1f1 !important;
}