table {width:90%; height:90%;}
table.tbtxtbar {background-color:#383637;}
td.yearL,td.yearR {background-color:black; border:0px; font-weight:bold;}
td.yearL:hover,td.yearR:hover {background-color:#1c2833;}
td.yearL {text-align:left;} td.yearR {text-align:right;}
td.txtbar {padding-left:10px; padding-top:5px; padding-bottom:10px;}
td.cld,td.cldb {text-align:center; vertical-align:middle;border:1px white double; font-size:15px;}
td.cld {background-color:#383637; border-radius:7px;}
td.cldb {background-color:blue;}
td.cld:hover,td.cldb:hover {background-color:#1c2833;}
span.yb {color:yellow; text-align:center;}
span.txtbar1,span.txtbar2 {color:yellow;}
span.txtbar2 {font-weight:bold; color:yellow;}
span.textshow {color:black;}
span.textshow2 {color:black;background-color:white;}
span.year {background-color:#383637; border:25px outset transparent; 
    border-image:url(https://c.youyod.com/border-2.png) 68 68 round;}
div.blocktop {position:fixed; border:5px groove white; height:385px; width:300px; padding-top:5px;}
div.blocktop {background-color:gold;}
div.blocktop img {height:200px; width:auto;}
.center {display:block; margin-left:auto; margin-right:auto;}    
.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 {border:25px outset transparent; border-image:url(https://c.youyod.com/border-2.png) 68 68 round;}
    span.yb {font-size:35px;} .txt4td {display:none;} .inpc {display:none;} 
    .pcmb {padding-top:5px;}
    div.blocktop {left:15px; bottom:15px;}
} 
@media screen and (min-width:601px) { /* PC */
    table {border:30px outset transparent; border-image:url(https://c.youyod.com/border-2.png) 68 68 round;}
    span.yb {font-size:50px;} .txtbar2 {display:none;} .inmb {display:none;} 
    .pcmb {padding-top:25px;}
    div.blocktop {right:5px; top:5px;}
}