/* ปรับปรุง : 2562-08-06
- เริ่มใช้กับ http://www.thaiall.com/web2
- แบ่งปันที่ http://thaiall.github.io/www/web2
*/
@font-face{font-family:'THChakraPetch'; src: url('rsp_thchakrapetch.ttf');}
@font-face{font-family:'THKodchasal2'; src: url('rsp_thkodchasal2.ttf');}
@font-face{font-family:'AlexBrush'; src: url('rsp_alexbrush.ttf');}
@font-face{font-family:'TLWGTypewriter'; src: url('rsp_tlwgtypewriter.ttf');}
@font-face{font-family:'Sawasdee'; src: url('rsp_sawasdee.ttf');}
@font-face{font-family:'WRTishkid2'; src: url('rsp_wr_tish_kid2.ttf');}
html,body{height:100%;}
#main{
background-color:#000099;
font-family:microsoft sans serif;
font-size:12px;
margin:0px 0px 0px 0px;
}
pre{
font-family:TLWGTypewriter;
float:left;
}
p{
margin:3px 0px 0px 0px;	
}
ol{
padding-left:20px;
}	
.myul{
padding-inline-start:20px !important;
margin:0px !important;
}
.m_chapter{
background:black !important;
color:#ddffdd;
margin-top:30px;
border:3px inset white;
font-family:WRTishkid2;
font-size:40px;
} /* /tec */
textarea{
font-family:microsoft sans serif;
color:#000088;
background-color:#ddffdd;
} 
fieldset{
margin:10px 0px 0px 0px  !important;
border:1px solid gray !important; 
border-radius:10px !important; 
margin-left:auto !important;
margin-right:auto !important;
} 
legend{
font-family:sawasdee;	
background-color:#000044;
color:#ffffdd !important;
font-size:18px;
margin:0px 0px 0px 10px !important; 
padding:5px 20px 0px 10px !important;
border:2px outset #dddddd !important;
max-width:fit-content !important; 
border-radius:5px 20px !important; 
}
table{
padding:0px;
border:0px;
vertical-align:top;
}
.m_reference{
font-family:sawasdee;
font-size:12px;
background-color:#ffffdd;
font-weight:bold;
color:#444444;
}
.m_box{
border:2px outset gray;
width:100%;
}
.shortnav{
color:white;
font-family:WRTishkid2;
font-size:20px;
background-color:#000044 !important;
}
.shortnav a:link,.shortnav a:visited{
color:white;
font-size:12px;
}
.shortnav a:hover{
color:#aaaaaa;
font-size:12px;
}
.topbar{
margin:0px;
width:100%;
background-color:black;
color:white;
text-align:left;
height:90px;
padding:0px;
border-spacing:0px;
border-style:none;
font-family:thchakrapetch;
font-size:18px;
} 
.topbar a:link, .topbar a:visited{
color:#aaffaa;
text-decoration:none;
} 
.topbar td{
text-align:left;
} 
.topbar_txt{
position:absolute;left:15px;top:65px;background-color:#666666;border:1px inset white;border-radius:4px;width:240px;text-align:center;
}
.odd{background-color:#ddffdd;}
.even{background-color:#ffffdd;}
.mytable {margin-left:auto;margin-right:auto;}
.mytable td {padding:3px; border-bottom: 1px solid #dddddd;}
.mytable tr:nth-child(even) {background-color: #ddffdd}
.mytable tr:nth-child(odd) {background-color: #ffffdd}
.mytable tr:hover {background-color: #ddddff}
.mykey {border:2px outset #dddddd;font-size:16px;border-radius:10px;background-color:#000088;color:white;float:left;margin:2px;padding:0px 10px 0px 10px;}
.img175{width:175px;height:200px;margin-left:auto;margin-right:auto;display:block;} /* handbill */
/* ipad ขนาดไม่เกิน 768 ทำส่วนนี้ */
.m_still_1000{
width:1000px;
background-color:white;
margin-left:auto;
margin-right:auto;
padding:0px;
border-spacing:0px;
}
.m_still{
width:728px;
background-color:white;
margin-left:auto;
margin-right:auto;
padding:0px;
border-spacing:0px;
}
.m_still_footer{
width:728px;
font-family:sawasdee !important;	
font-size:12px !important;
font-weight:bold !important;
}
.m_still_footer a{color:#ffffdd !important;}
.m_white, .m_white a:link{color:white !important;}
.m_white a:visited{color:#ffdddd !important;}
.m_banner_320{
visibility:hidden;
display:none;
}
.m_hidden{
width:728px;
padding:0px;
border-spacing:0px;
float:left;
} 
.m_hidden_footer{
width:728px;
border-spacing:0px;
} 
.m_hidden_search td, .m_hidden_search input{
font-family:sawasdee !important;	
font-size:10px !important;
}
.m_hidden_search{
width:732px;
background-color:white;
margin-left:auto;
margin-right:auto;
padding:0px;
border-spacing:0px;
}
/* in calendar60.htm */
.m_hidden_sub{
}
.m_hidden_turn{
visibility:hidden;
display:none;
}  
.m_min120, .m_min120h, .m_min120_img{
margin:0px 0px 0px 0px;
width:116px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min144, .m_min144h, .m_min144_img{
margin:0px 0px 0px 0px;
width:144px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min160, .m_min160h, .m_min160_img{
margin:0px 0px 0px 0px;
width:160px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min180, .m_min180h, .m_min180_img{
margin:0px 0px 0px 0px;
width:176px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min200, .m_min200h, .m_min200_img{
margin:0px 0px 0px 0px;
width:196px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min240, .m_min240h, .m_min240_img{
margin:0px 0px 0px 0px;
width:236px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min260, .m_min260h, .m_min260_img{
margin:0px 0px 0px 0px;
width:256px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min280, .m_min280h, .m_min280_img{
margin:0px 0px 0px 0px;
width:276px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min300, .m_min300h, .m_min300_img{
margin:0px 0px 0px 0px;
width:296px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min320, .m_min320h,  .m_min320_img{
margin:0px 0px 0px 0px;
width:316px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min360, .m_min360h,  .m_min360_img{
margin:0px 0px 0px 0px;
width:356px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min400, .m_min400_img{
margin:0px 0px 0px 0px;
width:396px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min420, .m_min420_img{
margin:0px 0px 0px 0px;
width:416px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min460, .m_min460_img{
margin:0px 0px 0px 0px;
width:456px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min480, .m_min480_img{
margin:0px 0px 0px 0px;
width:476px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min510, .m_min510_img{
margin:0px 0px 0px 0px;
width:506px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min520, .m_min520_img{
margin:0px 0px 0px 0px;
width:516px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min540, .m_min540_img{
margin:0px 0px 0px 0px;
width:536px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min560, .m_min560_img{
margin:0px 0px 0px 0px;
width:556px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min600{
margin:0px 0px 0px 0px;
width:596px;
padding:0px;
border-spacing:0px;
float:left;
}
.m_min620{
margin:0px 0px 0px 0px;
width:616px;
padding:0px;
border-spacing:0px;
float:left;
}

/* iphone5:320 ขนาดไม่เกิน 320 ทำส่วนนี้ */
@media only screen and (max-width:320px) {
.syntaxhighlighter { width: 315px !important; border: 1px solid gray !important; }	
.m_still, .m_still_1000, .m_still_footer{visibility:visible;width:315px} 
.m_min120, .m_min144, .m_min160, .m_min180, .m_min200, .m_min240, .m_min260, .m_min280, .m_min300, .m_min320, .m_min360, .m_min400, .m_min420, .m_min460, .m_min480, .m_min510, .m_min520, .m_min540, .m_min560, .m_min600, .m_min620{width:315px;} 
.m_min120_img, .m_min144_img, .m_min160_img, .m_min180_img, .m_min200_img, .m_min240_img, .m_min260_img, .m_min280_img, .m_min300_img, .m_min320_img, .m_min360_img, .m_min400_img, .m_min420_img,  .m_min460_img, .m_min480_img,.m_min510_img, .m_min520_img, .m_min540_img, .m_min560_img{width:305px;} 
.m_min120h, .m_min144h, .m_min160h, .m_min180h, .m_min200h, .m_min240h, .m_min260h, .m_min280h, .m_min300h, .m_min320h, .m_min360h, .m_hidden, .m_hidden_search, .m_hidden_footer, .m_hidden_sub{visibility:hidden;display:none} 
#m_town{visibility:hidden;display:none} 
.m_banner_320{width:315px;height:110px;margin-left:auto;margin-right:auto;visibility:visible;display:block}  
.m_hidden_turn{visibility:visible;display:inline} 
.myul{padding-inline-start:10px !important;}
} 

/* iphone6:375 galaxy s5:360 ขนาด 321 - 375 ทำส่วนนี้ */
@media only screen and (min-width:321px) and (max-width:375px) { 
.syntaxhighlighter { width: 355px !important; border: 1px solid green !important; }	
.m_still, .m_still_1000, .m_still_footer{visibility:visible;width:355px} 
.m_min120, .m_min144, .m_min160, .m_min180, .m_min200, .m_min240, .m_min260, .m_min280, .m_min300, .m_min320, .m_min360, .m_min400, .m_min420,  .m_min460, .m_min480,.m_min510, .m_min520, .m_min540, .m_min560, .m_min600, .m_min620{width:355px;} 
.m_min120_img, .m_min144_img, .m_min160_img, .m_min180_img, .m_min200_img, .m_min240_img, .m_min260_img, .m_min280_img, .m_min300_img, .m_min320_img, .m_min360_img, .m_min400_img, .m_min420_img, .m_min460_img, .m_min480_img, .m_min510_img, .m_min520_img, .m_min540_img, .m_min560_img{width:345px;} 
.m_min120h, .m_min144h, .m_min160h, .m_min180h, .m_min200h, .m_min240h, .m_min260h, .m_min280h, .m_min300h, .m_min320h, .m_min360h, .m_hidden, .m_hidden_search, .m_hidden_footer, .m_hidden_sub{visibility:hidden;display:none} 
#m_town{visibility:hidden;display:none} 
.m_banner_320{width:355px;height:110px;margin-left:auto;margin-right:auto;visibility:visible;display:block} 
.m_hidden_turn{visibility:visible;display:inline} 
.myul{padding-inline-start:10px !important;}
} 

/*  nexus 5x:411 ขนาด 376 - 414 ทำส่วนนี้ */
@media only screen and (min-width:376px) and (max-width:414px) { 
.syntaxhighlighter { width: 406px !important; border: 1px solid black !important; }	
.m_still, .m_still_1000, .m_still_footer{visibility:visible;width:406px} 
.m_min120, .m_min144, .m_min160, .m_min180, .m_min200, .m_min240, .m_min260, .m_min280, .m_min300, .m_min320, .m_min360, .m_min400, .m_min420, .m_min460, .m_min480, .m_min510, .m_min520, .m_min540, .m_min560, .m_min600, .m_min620{width:406px;} 
.m_min120_img, .m_min144_img, .m_min160_img, .m_min180_img, .m_min200_img, .m_min240_img, .m_min260_img, .m_min280_img, .m_min300_img, .m_min320_img, .m_min360_img, .m_min400_img, .m_min420_img,  .m_min460_img, .m_min480_img,.m_min510_img, .m_min520_img, .m_min540_img, .m_min560_img{width:396px;} 
.m_min120h, .m_min144h, .m_min160h, .m_min180h, .m_min200h, .m_min240h, .m_min260h, .m_min280h, .m_min300h, .m_min320h, .m_min360h, .m_hidden, .m_hidden_search, .m_hidden_footer, .m_hidden_sub{visibility:hidden;display:none} 
#m_town{visibility:hidden;display:none} 
.m_banner_320{width:406px;height:110px;margin-left:auto;margin-right:auto;visibility:visible;display:block} 
.m_hidden_turn{visibility:visible;display:inline} 
.myul{padding-inline-start:10px !important;}
}

/* nexus 6p:435 ขนาด 414 - 728 ทำส่วนนี้ */
@media only screen and (min-width:414px) and (max-width:728px) { 
.syntaxhighlighter { width: 430px !important; border: 1px solid blue !important; }	
.m_still, .m_still_1000, .m_still_footer{visibility:visible;width:430px} 
.m_min120, .m_min144, .m_min160, .m_min180, .m_min200, .m_min240, .m_min260, .m_min280, .m_min300, .m_min320, .m_min360, .m_min400, .m_min420, .m_min460, .m_min480, .m_min510, .m_min520, .m_min540, .m_min560, .m_min600, .m_min620{width:430px;} 
.m_min120_img, .m_min144_img, .m_min160_img, .m_min180_img, .m_min200_img, .m_min240_img, .m_min260_img, .m_min280_img, .m_min300_img, .m_min320_img, .m_min360_img, .m_min400_img, .m_min420_img,  .m_min460_img, .m_min480_img,.m_min510_img, .m_min520_img, .m_min540_img, .m_min560_img{width:420px;} 
.m_min120h, .m_min144h, .m_min160h, .m_min180h, .m_min200h, .m_min240h, .m_min260h, .m_min280h, .m_min300h, .m_min320h, .m_min360h, .m_hidden, .m_hidden_search, .m_hidden_footer, .m_hidden_sub{visibility:hidden;display:none} 
#m_town{visibility:hidden;display:none} 
.m_banner_320{width:430px;height:110px;margin-left:auto;margin-right:auto;visibility:visible;display:block;} 
.m_hidden_turn{visibility:visible;display:inline} 
.myul{padding-inline-start:10px !important;}
}

/* top navigator */
#bar_topnav{width:100%;height:30px;background-color:#000044;margin:0px 0px 0px 0px;padding:0px;border-spacing:0px;border-style:none}
ul.topnav {list-style-type: none;margin:0px;padding:0px;overflow:hidden;background-image:url(rspbar.png)}
ul.topnav li{float:left}
ul.topnav li a {display:inline-block;margin:0px;color:white;text-align:center;padding:5px 5px;text-decoration:none;font-family:WRTishkid2;font-size:15px;height:30px}
ul.topnav li a:hover {color:yellow;}
ul.topnav li.icon {display:none}

/* iphone6 plus ขนาดไม่เกิน 414 ทำส่วนนี้ */
@media screen and (max-width:414px){ 
ul.topnav li:not(:first-child) {display:none;} 
ul.topnav li.icon{float:right;display:inline-block;} 
ul.topnav.responsive {position:relative;} 
ul.topnav.responsive li.icon{position:absolute;right:0px;top:0px;} 
ul.topnav.responsive li{float:none;display:inline;}
ul.topnav.responsive li a {display:block;text-align:left;}
}