/* ปรับปรุง : 2563-03-08
- start on http://www.thaiall.com/web2
- share at 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:teal;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:30px;}	
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;}
/* tec */
.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;} 
/* datastructure */
.m_head {font-family:thchakrapetch;font-size:20px;background-color:#444400;text-align:center;color:#dddddd;border:1px outset black;border-radius:5px 5px 0px 0px; !important;} 
.m_option {font-family:thchakrapetch;font-size:18px;font-weight:bold;background-color:#ffffdd;border:1px outset #ffffaa;padding:0 0 0 2px;} 
/* futureclassroom */
.p20{text-indent: 20px;margin:3px 0px 0px 0px;} 
/* research/myresearch */
.m_reference{font-family:sawasdee;font-size:12px;background-color:#ffffdd;font-weight:bold;color:#444444;}
.m_reference p{text-indent:-15px;margin-left:20px;} 
/* handbill */
.img175{width:175px;height:200px;margin-left:auto;margin-right:auto;display:block;} 
/* web2 */
.m_box{border:2px outset gray;width:100%;}
.shortnav{color:#000099;font-family:WRTishkid2;font-size:20px;background-color:teal !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:#444444;border:2px outset #aaaaaa;border-radius:5px 5px 0 0;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;}
/* 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;}
/* 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 (0-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 (0-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;}
}