@charset "utf-8";

html {
     font-size: 1.2em;
     font-family: "Arial","Times New Roman","sans-serif","Microsoft JhengHei","SimSun";
     letter-spacing: 2px;
}

body {
     margin: 0px;
}

body, #ProgressBar {
     background-color: #f6f5ed;
}

a {
     letter-spacing: 0px;
}

input, button, select {
     font-size: 1em;
}

     input[type=date] {
          font-size: 1.1em;
          width:8em;
     }

     input[type=checkbox] {
          margin-right: 8px;
     }

     input[type=submit] {
          min-width: 100px;
     }

     input::-webkit-outer-spin-button,
     input::-webkit-inner-spin-button {
          -webkit-appearance: none;
     }

select {
     height: 26px;
     max-width: 90%;
     min-width: 80px;
}

h1 {
     font-size: 1.4em;
     background-color: #8A5519;
     padding: 6px;
}

     h1 button, h1 input[type=submit] {
          float: right;
          font-size: 1rem;
     }

h2 {
     font-size: 1.2em;
     background-color: #ba9c78;
     padding: 3px;
}

h1, h2, ol {
     margin-block-start: 0px;
     margin-block-end: 0px;
}

h1, h2 {
     color: white;
}

ol {
     font-size: 0.8em;
     letter-spacing: 1px;
     margin-left: -15px;
}

#HeaderDIV {
     width: 100%;
     background-color: white;
     box-shadow: 0 12px 12px -12px rgba(0, 0, 0, 0.5);
     position: fixed;
}

     #HeaderDIV div, #DivBody {
          max-width: 1000px;
          margin: auto;
     }

     #HeaderDIV div {
          padding: 20px 0px;
     }

#Banner {
     width: 100%;
}

#ProgressBar {
     letter-spacing: 1px;
     padding-bottom: 5px;
}

#DDLDistrict {
     font-family: MingLiU_HKSCS;
     overflow-x:hidden;
     width:200px;
}

.EngSpan, span {
     letter-spacing: 1px;
}

#TbSurname {
     width: 30%;
}

#TbGivenname {
     width: 60%;
}

.w50 {
     width: 50px;
}

.w100 {
     width: 100px;
}

.w200 {
     width: 170px;
     max-width: 90%;
}

.w300 {
     width: 60%;
     min-width: 150px;
}

.w98P {
     width: 80%;
}

#DivBody {
     margin-bottom: 30px;
     background-color: #f4ece3;
     padding-top: 6em;
}

.DivSessionInfo, .DivSessionScore, .DivSession, .DivEnroll, #DivUpload, #DivRequest, #DivReply {
     padding: 20px;
}

.DivSessionInfo {
     display: grid;
     grid-template-columns: 350px 1fr;
     gap: 5px;
}

     .DivSessionInfo div:nth-child(odd) {
          text-align: right;
          font-weight: bold;
          padding-right: 10px;
     }

.DivSessionScore > div {
     display: grid;
     grid-template-columns: 20px 1fr;
     gap: 5px;
     display:none;
}

.DivSessionScore > div > div:first-child{
      grid-column:1/3;
      font-weight:bold;
}

#ScoreJ, #ScoreP, #ScoreH, #ScoreM {
     margin-bottom: 30px;
}

#DivUpload > div {
     display:grid;
     grid-template-columns: 1fr 300px;
     margin-bottom:30px;
}

#DivUpload > div > div:first-child{
     font-weight:bold;
     grid-column:1/3;
}

#DivUpload > div > div:nth-child(2){
     padding-left:50px;
}

#DivRequest{
     text-align:center;
}

div.g-recaptcha {
    margin: 0 auto;
    width: 304px;
}

.CategoryMargin1 {
     margin-left:25px;
}

.CategoryMargin2 {
     margin-left:35px;
}

.CategoryMargin3 {
     margin-left:60px;
}

@media only screen and (min-width: 320px) and (max-width: 500px) and (orientation: portrait) {
     html {
          font-size: 1em;
          letter-spacing: 1px;
     }

     h1 {
          font-size: 1.3em;
          padding: 2px;
     }

     h2 {
          font-size: 1.1em;
          padding: 1px;
     }

     #HeaderDIV div {
          padding: 5px 5px 0px 5px;
     }

     #HeaderDIV img {
          width: 100%;
     }

     #DivBody {
          padding-top: 4em;
          margin-bottom: 1em;
     }

     .DivSessionInfo, .DivSessionScore, .DivSession, .DivEnroll, #DivUpload, #DivRequest {
          padding: 5px;
     }

     .DivSessionInfo {
          grid-template-columns: 140px 1fr;
          gap: 2px;
     }

          .DivSessionInfo div:nth-child(odd) {
               padding-right: 5px;
          }

     #DDLDistrict {
          width: 98%;
     }

     .CategoryMargin1 {
          margin-left: 0px;
     }

     .CategoryMargin2 {
          margin-left: 5px;
     }

     .CategoryMargin3 {
          margin-left: 5px;
     }
}