html { height:100%;}
body { font-family: 'Itim', cursive; min-height:100%; background-color:grey;}
header {color:blue; text-align:left; font-size:20pt;}
footer {font-family: 'Charm', cursive; font-size:10pt;color: black; text-align:right; }
lside {width:50% ; float:left ; background-color:thistle; }
rside {width: 50% ; float:right; background-color:wheat; }
fside {width: 100% ; float:center ; background-color:wheat; }
p {color: black;font-size: 10pt;} 

/* ทำตัวหนังสือเงา https://www.w3schools.com/css/css3_shadows.asp */
h1,h3,h5,h6 {color:white; line-height:1;}
h2,h4 {color:blue; line-height:1;}

table.header {border:2px; width:100%; margin-left:auto; margin-right:auto;}
table.center {border:2px; margin-left:auto;margin-right: auto;background-color:white;}
table.center2 {border:2px solid; margin-left:auto; margin-right:auto;}

th {font-size: 20pt;}

td {border:2px double black; font-size:15pt; }
.td1 {border:0px double blue; overflow:hidden;  white-space:nowrap; text-overflow:ellipsis;}
.td1R {border:0px double blue; overflow:hidden;  white-space:nowrap; text-overflow:ellipsis; text-align:right; padding-right:20px;}
.td2 {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.td3 {border:0px double black;}
.td4 {border:1px double blue; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center;}
.tdr {text-align:right; vertical-align:bottom; }
.c {text-align:center;}
.text {padding-left:5%;}

hr.line1 {border:5px; border-top-style:solid; border-bottom-style:solid; border-color:grey;}
hr.line2 {border:1px; border-top-style:solid; border-bottom-style:solid; border-color:grey;}

ol {list-style:square;}

span.span1 {color:black;}
span.b {color:blue;}

button {
  background-color:black; color:white ;border:none; padding:10px 10px;
  font-family:'Charm', cursive;font-size:30px;
  text-align:center; text-decoration:none; display:inline-block;
  margin: 4px 2px; cursor:pointer;-webkit-transition-duration:0.4s; transition-duration:0.4s;
}
.button1 {box-shadow:0 8px 16px 0 white, 0 6px 20px 0 grey;}  /* แบบเงา */
.button2 {width:175px; height:60px; }

a:link,a:visited {color:black;text-decoration:none; }
a:hover,a:active {color:red;text-decoration:none;} /* mouse over link */
 
.shaked:hover {animation:shake 0.5s;animation-iteration-count: infinite;}
@keyframes shake {
    0% {transform: translate(1px, 1px) rotate(0deg);}
    10% {transform: translate(-1px, -2px) rotate(-1deg);}
    20% {transform: translate(-3px, 0px) rotate(1deg);}
    30% {transform: translate(3px, 2px) rotate(0deg);}
    40% {transform: translate(1px, -1px) rotate(1deg);}
    50% {transform: translate(-1px, 2px) rotate(-1deg);}
    60% {transform: translate(-3px, 1px) rotate(0deg);}
    70% {transform: translate(3px, 1px) rotate(-1deg);}
    80% {transform: translate(-1px, -1px) rotate(1deg);}
    90% {transform: translate(1px, 2px) rotate(0deg);}
    100% {transform: translate(1px, -2px) rotate(-1deg);}}

@media screen and (max-width:600px) {table {width:320px;}}   
@media screen and (min-width:601px) {table {width:600px;}}