html { height: 100%;}
body {min-height: 100%;}
.body1 {background-color: #91A2D1; color: black; border: 2px double black;  }
.body2 {background-image: url("http://uyod.net/wallpaper.png"); } /* พื้นสีเทา เป็นเหลี่ยมทะแยง  */
.body3 {background-image: url("http://uyod.net/wallpaper2.png");} /* พื้นสีเทา+ฟ้า เป็นเหลี่ยมทะแยง  */
.body4 {background-image: url("http://uyod.net/wallpaper_1.jpg");} /*  สีฟ้ามุมละเอียด */
.body5 {background-image: url("http://uyod.net/wallpaper_2.jpg");} 	/* สีฟ้า  */
.body6 {background-image: url("http://uyod.net/wallpaper_3.jpg");} 	/* สีดำ */
.bodyF {background-color: whitesmoke; font-family: 'Itim',cursive; color: black; } 	/* สีดำ */

header { text-align: left; font-size:20pt;}
.head1{color: black;}

hr.border2 {border: 2px;border-top-style: solid;border-bottom-style: solid;border-color: grey;}
hr.border5 {border: 5px;border-top-style: solid;border-bottom-style: solid;border-color: grey;}

footer {font-family:'Charm',cursive;  color: black;}

table.max {border:2px double black; width:100%; height:100%;}

td.td1 {border:3px double blue; text-align:center; font-size:20pt;}
td.td2 {text-align:center; font-size:20pt;background-color: white;}
td.td3 {border:3px double blue; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:15pt;}
td.td4 {text-align:left; font-size:20pt;background-color: white;}
td.td5 {text-align:left; vertical-align:top;  border:3px double blue; overflow:hidden;  white-space:nowrap;
    text-overflow: ellipsis; font-size:15pt;}
td.td6 {border:3px double violet; overflow:hidden;  white-space: nowrap;  text-overflow: ellipsis;
  font-size:15pt;text-align: center;}
td.toright {text-align:right; font-size:20pt; background-color: white;}
td.shadow {color:blue; box-shadow:0 8px 16px 0 white,0 6px 20px 0 grey;} /* แบบเงา */


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

div {font-size:15pt; border:2px inset black; margin: 10px 10px 10px 10px; }  /*Short  */
.div1 {position:fixed; border:none; height:10px }   /* position: fixed; border: none; * หน้าต่างจะอยู่ นิ่งๆ */
.highlight { background-color:red; } /* letter-spacing: 0.5cm; */
.lines2pace { line-height:100%; } /* text-decoration: overline; */
.on_top_left {position:fixed; top:0; left:0; }   
.on_top_right {position:fixed; top:0; right:0; text-align:right;}   
.on_bottom_left {position:fixed; bottom:0; left:0;}   
.on_bottom_right {position:fixed; bottom:0; right:0; text-align:right;}   

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


/*change the number below to scale to the appropriate size*/ 
img.adj4zoom { width: 150px; height: 150px; }
img.adj4zoom:hover { transform: scale(1.5);  }


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

button {
  background-color: blue; /* Green */
  border: none; color: white; padding: 1px 1px;  text-align: center;
  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;
}
.button1 {box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);}
.button2:hover {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 10px 20px 0 rgba(0,0,0,0.19);}