*, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
HTML, BODY { font-size: 16px; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; height: 100%; }
BODY { background: url(images/the-beach.jpg) top center / contain no-repeat #840405; margin: 0; }
TABLE { font-size: 0.9375rem; }
TD { text-align: left; }
TH { text-align: center; font-weight: 600; }
H1, H2, H3, H4, H5 { color: #B22222; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; margin: 5px 0 10px; }
H1 { font-size: 2rem; }
H2 { font-size: 1.75rem; }
H3 { font-size: 1.5rem; }
H4 { font-size: 1.375rem; }
H5 { font-size: 1.25rem; }
H6 { color: #000000; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 1.125rem; margin: 0 0 10px 0; }
A:link, A:visited, A:active { font-weight: normal; color: #007FFF; text-decoration: underline; }
A:hover { font-weight: normal; color: #006B3C; }
A:link.widgetlink, A:visited.widgetlink { color: #FFFFFF; }
A:link.menu-link { width: 120px; color: #000000; background: #F7E7CE; font-size: 1rem; text-align: center; text-decoration: none; display: inline-block; padding: 5px; margin: 5px; }
A:hover.menu-link { background: #F8F8FF; }
P { font-size: 0.9375rem; margin: 0 0 15px 0; }
P, UL, OL { line-height: 140%; }
P IMG { vertical-align: middle; }
INPUT { width: 100%; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 0.9375rem; background: #F8F8FF; border: 1px solid #777777; border-radius: 3px; border-radius: 3px; padding: 5px; margin: 4px 0 2px; }
INPUT:disabled { background-color: #DEDEDE; opacity: 0.35; filter: Alpha(Opacity=35); }
INPUT:hover, INPUT:focus { background: #FFFFFF; border: 1px solid #F0911D; box-shadow: 0 0 10px #86A9AE; }
TEXTAREA { font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 0.9375rem; background: #F8F8FF; border: 1px solid #777777; border-radius: 3px; border-radius: 3px; padding: 3px; margin: 4px 0 2px; }
TEXTAREA:hover, TEXTAREA:focus { background: #FFFFFF; border: 1px solid #F0911D; box-shadow: 0 0 10px #86A9AE; }
BUTTON { font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: normal; padding: 5px; cursor: pointer; margin: 5px 2px; border: 1px solid #777777; border-radius: 3px; border-radius: 3px; box-shadow: 0px 2px 3px #AAAAAA; }
BUTTON:hover { color: #000000; background: #F5F5F5; box-shadow: 0 0 10px #86A9AE; }
BUTTON:disabled:hover { color: #FFFFFF; background: #2A80B9; box-shadow: none; }
BUTTON I { float: left; }
STRONG { font-weight: 600; }
IMG { max-width: 100%; max-height: 100%; border: none; }
HR { color: #628BB8; height: 1px; }
UL { list-style-type: square; }
FIELDSET { font-size: 0.9375rem; background: #FAFAFA; margin: 10px auto; padding: 10px; }
LABEL { font-size: 0.9375rem; margin: 4px 0; }
BLOCKQUOTE { font-size: 0.9375rem; line-height: 1.2rem; }
#lang { width: 100%; height: 30px; text-align: right; position: absolute; top: 200px; z-index: 70; }
#lang IMG { vertical-align: middle; }
#lang A, #lang SPAN { color: #FFFFFF; font-size: 1rem; text-decoration: none; margin: 0 10px 0 0; padding: 5px; display: inline-block; }
#lang A:hover { background: #EA7105; }
#topbar1 { width: 100%; height: 115px; background: #840405; position: absolute; top: 250px; z-index: 70; }
#logo { max-width: 1120px; margin: 0 auto; text-align: center; padding: 5px; }
#topbar2 { background: #CC5900; width: 100%; height: 50px; position: absolute; top: 365px; z-index: 80; }
#mainmenu { max-width: 1024px; background: transparent; margin: 0 auto; position: relative; z-index: 80; }
#pagebody { width: 100%; background: #FFF5EE; position: relative; top: 415px; }
#pagecontent { max-width: 1120px; min-height: 600px; background: transparent; margin: 0 auto; position: relative; padding: 10px; }
#footer { width: 100%; color: #FFFFFF; background: #6C0303; }
#footer A { color: #FFFFFF; text-decoration: none; display: inline-block; padding: 1px; }
#footer A:hover { color: #000000; background: #EAFB91; }
#footer IMG { margin: 0 3px; }
#footer LI { color: #999999; }
#plswait { background: #FAFAFA; position: fixed; display: none; top: 45%; left: 45%; padding: 10px; box-shadow: 0 0 15px #000; }
.navbar, .navbar-th { background: #6E0303; overflow: hidden; z-index: 100; }
.navbar { font-size: 1rem; }
.navbar-th { font-size: 1.375rem; }
.navbar A, .navbar-th A { color: #FFFFFF; text-align: center; text-decoration: none; border-right: 1px solid #444444; display: block; float: left; }
.navbar A { padding: 14px 10px; }
.navbar-th A { padding: 10px 18px; }
.navbar A:first-child, .navbar-th A:first-child { border-left: 1px solid #444444; }
.navbar A:hover, .navbar-th A:hover { background: #EAFB91; color: #000000; }
.navbar A.active, .navbar-th A.active { background-color: #FF8C00; color: #FFFFFF; }
.navbar .icon, .navbar-th .icon { background: transparent; display: none; padding: 0px 10px 0 0; margin: -4px 0 0; }
.title, .title-th { color: #FFFFFF; font-size: 3rem; line-height: 3rem; }
.punchline { color: #FFFFFF; font-size: 1.125rem; line-height: 1.5rem; }
.punchline-th { color: #FFFFFF; font-size: 1.5rem; line-height: 1.5rem; }
.authinfo { font-size: 0.75rem; }
.row { width: 100%; }
.footer-row { max-width: 1120px; margin: 0 auto; display: flex; justify-content: space-around; flex-wrap: wrap; }
.row::after, .row::before, .slider-bar:after, .slider-bar:before, .footer-row::after { content: ""; display: table; clear: both; }
.footer-row DIV { padding: 0px 15px; }
.column-2 { width: 48%; margin: 1%; float: left; }
.column-3a { width: 61.33333%; margin: 2%; float: left; }
.column-3b { width: 30.66666%; margin: 2%; float: left; }
.colcenter { text-align: center; }
.colright { text-align: right; }
.menuholder { max-height: 625px; margin: 0 auto; overflow: auto; }
.menutbl { margin: 0 auto; font-style: italic; border: 1px solid #777777; }
.menutbl UL, H3 { font-style: normal; }
.menuhd { color: #FFFFFF; background: #840405; font-style: normal; font-size: 1.25rem; }
.menutext { color: #000000; font-size: 1rem; font-weight: 600; font-style: normal; }
.menutext-th { color: #000000; font-size: 1.5rem; font-style: normal; }
.heading { color: #FFFFFF; background: #555555; font-size: 1.125rem; padding: 10px; }
.reviews { font-size: 1.125rem; }
.reviews IMG { float: right; }
.thinline { background: url(images/line.png) center bottom repeat-x transparent; height: 6px; }
.book-widget { margin: 0 0 10px 0; }
.widget-info { width: 100%; color: #FFFFFF; background: #840405; position: relative; padding: 5px; margin: 0; display: inline-block; bottom: 0; }
.blue-btn { color: #FFFFFF; background: #2A80B9; }
.red-btn { color: #FFFFFF; background: #E30022; }
.green-btn { color: #FFFFFF; background: #00A86B; }
.orange-btn { color: #FFFFFF; background: #FE7510; }
.yellow-btn { color: #000000; background: #FFFF00; }
.bk-btn { width: 230px; font-size: 1.125rem; padding: 8px; margin: 0; }
.thai-btn { width: 230px; font-size: 1.5rem; padding: 8px; margin: 0 10px; }
.thai-btn I { font-size: 2rem; }
.thai-text P { font-size: 1.25rem; }
.thai-text H1 { font-size: 2.5rem; }
.thai-text H2 { font-size: 2rem; }
.thai-text H3 { font-size: 1.75rem; }
.time-btn { width: 80px; }
.time-img { width: 78px; height: 1px; display: inline-block; margin: 3px; }
.fld50 { width: 50px; }
.fld100 { width: 100px; }
.fld130 { width: 130px; }
.fld150 { width: 150px; }
.fld175 { width: 175px; }
.fld200 { width: 200px; }
.fld225 { width: 225px; }
.fld250 { width: 250px; }
.fld100p { width: 100%; }
.leftpic { float: left; }
.waiting { background: #FFFFFF; border: 1px solid #999999; display: inline-block; position: absolute; left: 130px; }
.album { border: thick solid #FFFFFF; box-shadow: 0 0 10px #000000; }
.custom-input { display: block; position: relative; padding: 2px 0 0 30px; margin: 12px 0 8px; cursor: pointer; font-size: 0.9375rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.custom-input INPUT { height: 0; width: 0; position: absolute; opacity: 0; cursor: pointer; }
.checkmark { position: absolute; top: 0; left: 0; height: 1.5rem; width: 1.5rem; background: #F8F8FF; border: 1px solid #777777; }
.radiomark { position: absolute; top: 0; left: 0; height: 1.5rem; width: 1.5rem; background: #F8F8FF; border-radius: 50%; border: 1px solid #777777; }
.custom-input:hover INPUT ~ .checkmark { background: #FFFFFF; border: 1px solid #F0911D; box-shadow: 0 0 10px #86A9AE; }
.custom-input:hover INPUT ~ .radiomark { background: #FFFFFF; border: 1px solid #F0911D; box-shadow: 0 0 10px #86A9AE; }
.custom-input INPUT:checked ~ .checkmark { background-color: #2196F3; border: 1px solid #777777; }
.custom-input INPUT:checked ~ .radiomark { background-color: #2196F3; border: 1px solid #777777; }
.checkmark:after, .radiomark:after { content: ""; position: absolute; display: none; }
.custom-input INPUT:checked ~ .checkmark:after { display: block; }
.custom-input INPUT:checked ~ .radiomark:after { display: block; }
.custom-input .checkmark:after { left: 0.5rem; top: 0.125rem; width: 0.5rem; height: 0.9375rem; border: solid white; border-width: 0 0.1875rem 0.1875rem 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.custom-input .radiomark:after { top: 0.375rem; left: 0.375rem; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: white; }
.dialog-border { border: 1px solid #AAAAAA; border-radius: 3px; box-shadow: 0 0 15px #777777; }
.slider { max-width: 600px; color: #FFFFFF; background: #333333; text-align: center; margin: 0 auto; }
.my-slides { width: 100%; display: none; }
.slider-bar { width: 100%; font-size: 2rem; padding: 2px; margin: 0 auto; }
.indicator { height: 1rem; width: 1rem; color: #FFFFFF; background: #000000; text-align: center; display: inline-block; padding: 0; margin: 0 3px 4px; border: 1px solid #DDDDDD; border-radius: 50%; }
.f-left { float: left; width: 30px; }
.f-right { float: right; width: 30px; }
.f-left, .f-right, .indicator { cursor: pointer; }
.white-dot, .hover-white:hover { color: #000000; background: #FFFFFF !important; }
.text-white, .hover-text-white:hover { color: #FFFFFF; }
.nav-btn { background: #CC5900; }
.nav-btn:hover { color: #000000; background: #EAFB91; }
.trans-bg { background: transparent; }
@media screen and (max-width: 950px) {
	#lang { top: 174px; }
	#topbar1 { top: 215px; height: 75px; }
	#topbar2 { top: 315px; }
	#pagebody { top: 365px; }
}
@media (max-width: 830px), (pointer:coarse), (hover:none) {
	.navbar A, .navbar-th A { border-right: none; }
	.navbar A:first-child, .navbar-th A:first-child { border-left: none; }
	.navbar A:not(:first-child), .navbar-th A:not(:first-child) { display: none; }
	.navbar A.icon, .navbar-th A.icon { float: right; display: block; }
}
@media (max-width: 830px), (pointer:coarse), (hover:none) {
	.navbar.responsive, .navbar-th.responsive { position: relative; }
	.navbar.responsive .icon, .navbar-th.responsive .icon { padding: 0; position: absolute; right: 10px; top: 0; }
	.navbar.responsive A, .navbar-th.responsive A { float: none; display: block; text-align: left; background: #CC5900; border-bottom: 1px solid #555555; }
	.navbar.responsive I, .navbar-th.responsive I { margin: 0 15px 0 0; }
	.navbar.responsive A:hover, .navbar-th.responsive A:hover { background: #EAFB91; color: #000000; }
	.navbar.responsive A.active, .navbar-th.responsive A.active { background: #FF8C00; }
	#lang { top: 150px; }
	#topbar1 { top: 200px; height: 75px; }
	#topbar2 { top: 320px; }
	#pagebody { top: 370px; }
}
@media screen and (max-width: 768px) {
	#lang { top: 140px; }
	#topbar1 { top: 180px; height: 75px; }
	#topbar2 { top: 310px; }
	#pagebody { top: 360px; }
}
@media screen and (max-width: 640px) {
	#lang { top: 110px; }
	#topbar1 { top: 160px; height: 75px; }
	#topbar2 { top: 285px; }
	#pagebody { top: 335px; }
	.column-2, .column-3a, .column-3b { width: 98%; margin: 1%; }
	.footer-row { justify-content: safe flex-start; }
	.footer-row DIV { width: 50%; }
}
@media screen and (max-width: 600px) {
	#lang { top: 71px; }
	#topbar1 { top: 110px; height: 75px; }
	#topbar2 { top: 240px; }
	#pagebody { top: 285px; }
}
@media screen and (max-width: 480px) {
	#lang { top: 75px; }
	#topbar1 { top: 110px; height: 75px; }
	#topbar2 { top: 280px; }
	#pagebody { top: 315px; }
}
@media screen and (max-width: 415px) {
	#lang { top: 55px; }
	#topbar1 { top: 90px; height: 75px; }
	#topbar2 { top: 280px; }
	#pagebody { top: 315px; }
	.title-th { font-size: 2.5rem; }
}
@media screen and (max-width: 360px) {
	#lang { top: 45px; }
	#topbar1 { top: 90px; height: 75px; }
	#topbar2 { top: 280px; }
	#pagebody { top: 315px; }
	.title-th { font-size: 2.5rem; }
}