/* https://www.w3schools.com/css/css3_buttons.asp */
html { height: 100%;}
body { min-height: 100%;background-color:gray;}
header {color: white; font-family: 'Itim', cursive; text-align: left; font-size: 20pt;}
footer {font-family: 'Charm', cursive; font-size: 15pt;color: white;}
p {font-family: 'Itim', cursive; color: black;font-size: 10pt;} 
/* ทำตัวหนังสือเงา 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; }
h5 {font-family: 'Charm', cursive; color: red; text-shadow: 2px 2px 4px yellow }
.center {border: 0px; width: 85%;margin-left: auto;margin-right: auto;background-color: white;}
.facebook { border: 0px solid black;  border-collapse: collapse;width: 100%;margin-left: auto;margin-right: auto;background-color: white;}
.software {width: 98%; box-shadow: 10px 10px 8px #888888; } 
th.software { text-align: left;}
td { font-family: 'Itim', cursive; }
.td1 {border: 0px double blue; overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;font-family: 'Itim', cursive;font-size: 20pt;}
.td2 {overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;font-size: 20pt;}
.td3 {border: 0px double black;}
.td4 {box-shadow: 10px 10px 8px #888888;}
.td5 {text-align: right;}
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;}
ul.u1 {list-style-type: circle;}
ul.u2 {list-style-type: square;}
ul.u3 {list-style-type:cjk-ideographic;}
ul.u4 {list-style-type:decimal;}
div {font-size: 15pt;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-family: 'Itim', cursive;font-size: 20pt;text-align:left ;color: black; bottom: 50px; right: 0;}  
.div3 {border: 0px;position: fixed; font-family: 'Itim', cursive;font-size: 20pt;text-align:left;color: blue; bottom: 0; right: 0;}   
.div4 {border: 0px;position: fixed; font-family: 'Itim', cursive;font-size: 20pt;text-align:left;color: blue; top: 0; left: 0;}   
.div5 {border: 0px;position: fixed; font-family: 'Itim', cursive;font-size: 20pt;text-align:left;color: blue; top: 0; right: 0;} 
.div6 {border: 0px;position: fixed; font-family: 'Itim', cursive;font-size: 20pt;text-align:left;color: blue; bottom: 0; left:0;}   
.div7 {border: 0px;position: fixed; font-family: 'Itim', cursive;font-size: 20pt;text-align:left;color: blue; bottom: 0; left:0;} 
.div7 a:link,a:visited,a:hover,a:active {color:white;}
.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;}
.overlay {position: absolute;bottom: 0;left: 0;right: 0;background-color: white;
  overflow: hidden;width: 0;height: 95%; transition: .5s ease;} /* height: 100%; */
.container:hover .overlay {width: 95%;}  /* width: 100%; */
.foradmin {display:none;}  /*  */
.text4slide {white-space: nowrap; color: black; font-family: 'Itim', cursive; font-size: 40px;position: absolute;
  overflow: hidden;top: 50%;left: 50%; transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%); }
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 */
.boxhead .otherPage {color: #FFFFFF;text-decoration: none;}
.img2center { display: block;margin-left: auto; margin-right: auto;width: 50%;}
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;}  /* แบบเงา */
img.smallpng { height: 35px;width: 35px;} 
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); }
}

/*  ยุบและขยาย */
#panel {display: none; border: solid 0px black; }
#panel, .flip { padding: 0px; border: solid 0px black;  margin: auto;font-family: 'Itim', cursive; color: black;font-size: 20pt;}

/*
    <link rel='icon' href='ico.png' type='image/x-icon'>
    <link rel='stylesheet' href='buddysoftware.css'>
    <link rel='preconnect' href='https://fonts.gstatic.com'>
	  <link href='https://fonts.googleapis.com/css2?family=Itim&display=swap' rel='stylesheet'>
    <link rel='preconnect' href='https://fonts.gstatic.com'>
	  <link href='https://fonts.googleapis.com/css2?family=Charm&display=swap' rel='stylesheet'>
    <meta property='og:image' content='img/my/uyod_b2h.png'>
    <title>ซอฟท์แวร์ :โรงแรม,อพาร์ทเม้นท์,ม่านรูด,POS,ร้านอาหาร,เพ็ทแคร์,นวดสปาฯลฯ</title>
    <meta NAME='Description' CONTENT=''>

*/