body {font-family: 'Itim',cursive;background-color:whitesmoke;}
.swk77 {margin-left:auto; margin-right:auto; border:2px double white; width:95%; background-color: yellow;}
.empty {margin-left: auto; margin-right: auto;border: 0px none white; width:95%;}

td {font-family: 'Itim',cursive;font-size:20px;}
.top_center {vertical-align:top; text-align:center;border:2px double green;}
.top_centern {vertical-align:top; text-align:center;border:0px hidden white;}
.top_left {vertical-align:top; text-align:left;border:2px double green;}
.top_leftn {vertical-align:top; text-align:left;border:0px hidden white;}
.top_right {vertical-align:top; text-align:right;border:2px double green;}
.top_righte {vertical-align:top; text-align:right }
.top_rightn {vertical-align:top; text-align:left;border:0px hidden white;}



.onheader {line-height:15px;}
.onfooter {line-height:10px;}
.fontb {font-size:25px; font-weight:bold;}
.fontbb {font-size:25px; font-weight:bolder;}

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

/* ทำตัวหนังสือเงา https://www.w3schools.com/css/css3_shadows.asp */
h1 {color:green; text-shadow: 2px 2px 4px #000000;}
h2 {color:green; text-shadow: 2px 2px 4px #000000;}
h3 {color:green; text-shadow: 2px 2px 4px #000000;}
h4 {color:green; text-shadow: 2px 2px 4px #000000;}
h5 {color:green; text-shadow: 2px 2px 4px #000000;}
h6 {color:green; text-shadow: 2px 2px 4px #000000;}


div {font-size:15pt;border:2px inset black;margin:10px 10px 10px 10px; }  
.divmode4color {border: 0px;position: fixed; font-family: 'Itim',cursive;font-size: 20pt;
    text-align:'left';color: yellow; top:0; right:0;} 
.divnewmember {float: right;margin: 0 0 10px 10px; color:blue;background-color:white}
.mode4clr2 {border:2px double green ;position:fixed; font-family: 'Itim',cursive;font-size:20pt;
        color:green; background-color:yellow; top:60; right:0; text-align:right; } 
    
button {background-color: gray ; color: white;border: none;  padding: 10px 10px;
    font-family: 'Charm', cursive;font-size: 20px;
    text-align: center; text-decoration: none; display: inline-block;
    margin: 4px 2px; cursor: pointer;  
    -webkit-transition-duration: 0.4s;transition-duration: 0.4s; }
.mode4color { box-shadow: 0 8px 16px 0 white, 0 6px 20px 0 grey;}  /* แบบเงา */

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

img {border-style: hidden;}
img.imgmoney {height:15px;} 
div.divnewmember:hover,img: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); }
} 

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


@media screen and (max-width: 600px) {  /* มือถือ */
    img.swk77 {width:20px;height:20px;} 
    div.divnewmember {font-size:5pt;}
}
@media screen and (min-width: 601px) {  /*  คอม */
    img.swk77 {width:40px;height:40px;} 
    div.divnewmember {font-size:15pt;}
}