body {font-family:'Itim',cursive;background-color:rgba(136, 188, 200, 1); }

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;}

/* ทำตัวหนังสือเงา https://www.w3schools.com/css/css3_shadows.asp */
h1 { color:white; text-shadow:2px 2px 4px #000000;}
h3 {color:black;  text-shadow:1px 1px 2px black, 0 0 25px white, 0 0 5px blue} 
h4 { color:white; text-shadow:2px 2px 4px #000000;}

table {margin-left:0px; margin-right:5px; margin-top:0px; margin-bottom:5px;
 width:100%; height:100%;border:0px solid #333; padding:0px; border-collapse:separate;
 border-spacing:0;-moz-border-radius-topleft:7px;-webkit-border-top-left-radius:7px;
 border-top-left-radius:7px;-moz-border-radius-topright:7px; -webkit-border-top-right-radius:7px;
 border-top-right-radius:7px;-moz-border-radius-bottomleft:7px;
 -webkit-border-bottom-left-radius:7px;border-bottom-left-radius:7px;
 -moz-border-radius-bottomright:7px;-webkit-border-bottom-right-radius:7px;
 border-bottom-right-radius:7px; }

th {font-family:'Itim',cursive; background-color:#fff; border:none;padding:15px;font-weight:500; }
td {font-family:'Itim',cursive; background-color:#fff; border:none;padding:15px;font-weight:500;text-align:center;}

td+td,th+th {border-left:1px solid #999; }
th,tr td {border-bottom:1px solid #999; }
tfoot td { border-bottom:none; }

td:first-child {border-left:none; }
td:last-child {border-right:none; }

thead + tr td, tr + tr td, tfoot td {border-top:none;}
thead th:first-child {-moz-border-radius-topleft:7px;-webkit-border-top-left-radius:7px;
 border-top-left-radius:7px;border-left:none;}

thead th:last-child {-moz-border-radius-topright:7px;
-webkit-border-top-right-radius:7px;border-top-right-radius:7px;
border-right:none;}

tfoot td:first-child {-moz-border-radius-bottomleft:7px;-webkit-border-bottom-left-radius:7px;
border-bottom-left-radius:7px;}

tfoot td:last-child {-moz-border-radius-bottomright:7px;
-webkit-border-bottom-right-radius:7px;border-bottom-right-radius:7px; }
.pre-table {margin:30px auto; padding-left:0px; padding-right:5px;
padding-top:0px;padding-bottom:0px; box-shadow:0px 0px 0px 5px rgba(255, 255, 255, 0.4), 0px 4px 20px rgba(0, 0, 0, 0.92);
-moz-border-radius-topleft:7px;-webkit-border-top-left-radius:7px;
border-top-left-radius:7px;-moz-border-radius-topright:7px;-webkit-border-top-right-radius:7px;
border-top-right-radius:7px;-moz-border-radius-bottomleft:7px;-webkit-border-bottom-left-radius:7px;
border-bottom-left-radius:7px;-moz-border-radius-bottomright:7px;
-webkit-border-bottom-right-radius:7px;border-bottom-right-radius:7px;}

div {font-family:'Itim',cursive;border:2px inset black;margin:10px 10px 10px 10px; }  
.div1 {position:fixed; background-color:whitesmoke;color:black;font-family:'Itim', cursive;font-size:25pt; bottom:0; right:0;}
.div2 {border:0px; position:fixed; font-size:20pt; text-align:"left";color:black; bottom:50px; right:0;}  
.div3 {border:0px; position:fixed; font-size:20pt; text-align:"left";color:blue; bottom:0; right:0;}   
.div4 {border:0px; position:fixed; font-size:20pt; text-align:"left";color:blue; top:0; left:0;}   
.div5 {border:0px; position:fixed; font-size:20pt; text-align:"left";color:blue; top:0; right:0;} 
.div6 {border:0px; position:fixed; text-align:"left";color:blue; bottom:0; left:0;}   

.box1 {height:7px; padding:10px 10px 20px 10px;  border:0px solid #BFBFBF;  background-color:white;  box-shadow:10px 10px 5px #aaaaaa;}
.container {position:relative;display:block; margin-left:auto; margin-right:auto;width:50%;}   /* display:block */
.image {display:block; width:100%; height:auto;}
.center {text-align:center;vertical-align:middle;}

span.red1 {font-size:20pt; font-weight:bold; text-align:center; color:red;}
span.red2 {font-size:30pt; font-weight:bold; text-align:center; color:red;}

p {font-family:'Itim', cursive; color:black;font-size:15pt;} 

a:link {color:blue;text-decoration:none; }
a:visited {color:blue;text-decoration:none;} /* visited link */
a:hover {color:red;text-decoration:none;} /* mouse over link */
a:active {color:pink;text-decoration:none;} /* selected link */

input {font-family:'Itim',bold; font-size:15px ; color:blue;
  box-shadow:rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;}
input.noborder {border-top-style:hidden; border-right-style:hidden; border-left-style:hidden; border-bottom-style:hidden; background-color:#eee;  outline:none;}

button.login {background-color:black; /* Green */
  border:none; color:white; padding:1px 1px;
  text-decoration:none;  display:inline-block; font-family:'Charm', bold; font-size:20px;
  margin:4px 2px;  cursor:pointer;  -webkit-transition-duration:0.4s; /* Safari */
  transition-duration:0.4s; } 
button.login:hover {box-shadow:0 12px 16px 0 rgba(0,0,0,0.24),0 10px 20px 0 rgba(0,0,0,0.19);}

img.smallIcon {height:45px; width:auto;}
img.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);}}