@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	100;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */
.fix-scroll { width:100%; margin:auto; overflow:auto;}

.gridContainer {
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.nav {width:100%; height:99px; background-color:#f8f9f4; position:fixed; z-index:6; /*border-bottom:3px solid #999;*/  }
.timeline {display:inline-block; *display:inline; /* for IE7*/ /*overflow:scroll;*/ min-width:100%; *zoom:1;/* for IE7*/ /*width:100%;*/ margin-top:100px; background-color:#FFF;  margin-bottom:5px; }
/*.timeline-spacing { background:#FFF; width:100%; height:100px; position: fixed; z-index:4; display: block;}*/

.row-type {position: static; margin-top:-2px;}
.row-month { margin-left:141px; white-space:nowrap; position:absolute; background-color:#fff; z-index:1; margin-top:1px; margin-bottom:1px;}

/*.row-month { margin-left:141px; white-space:nowrap; position: relative; background-color:#fff; z-index:1; margin-top:1px; margin-bottom:1px;border: #F70000 solid;}relative ไม่ได้ทะลุ*/

/*.main-room {margin-left:141px; margin-top:52px;}*/
.row-room {margin-left:141px; margin-top:52px; white-space:nowrap;}

.roomtype {position:fixed; width:140px; height:48px; background-color:#072D66; color:#FFF; padding:11px 3px; margin-top:1px; line-height:22px;font-family: "caviardreams"; text-align:center; z-index:3;}

/*.roomtype {position:fixed;width:140px; height:48px; background-color:#072D66; color:#FFF; padding:11px 3px; margin-top:2px; border-bottom:1px #CCC solid; z-index:3;}*/
.mdate {
	border-bottom:1px #CCCCCC solid;
	height:16px;
	font-size:12px;
	font-family: 'Roboto', sans-serif;
	color: #666766;
	font-weight:300;
	text-align:center;
}
.nodate {
	font-size: 14px;
	height:16px;
	font-family: 'Roboto', sans-serif;
	color: #666766;
	font-weight:300;
	text-align:center;
}
.ddate {
	height:16px;
	font-size: 12px;
	font-family: 'Roboto', sans-serif;
	color: #666766;
	font-weight: bold;
	text-align:center;
}

.gmonth-date {width:60px; height:48px; margin-bottom:1px; border:1px #CCC solid; display:inline-block; *display:inline; /* for IE7*/ *zoom:1;/* for IE7*/ margin-right: -4px;}
/*.gmonth-date {width:40px; height:48px; margin-bottom:1px; border:1px #CCC solid; float: left;}*/
/*
.month {width:40px; height:20px; font-size:11px; text-align:center;}
.date {width:40px; height:25px; font-size:11px; text-align:center;}
*/
.type-label {width:140px; height: 260px; font-family: 'Roboto', sans-serif; text-align:left; border:1px #CCC solid; margin-bottom:1px; background-color:#FFF;}
.type-name {width:100%; height:45px; font-family: "caviardreams"; font-size:14px; background-color: #4D7DAB; color:white; text-align: center; padding: 5px 2px 2px 2px; }
.type-label a {text-decoration: none;}
/*.type-g-price {width:85px; height:60px; float:left;}*/
.type-max {width:100%; height: 25px; font-size:14px; padding: 2px;}
.g_noRoom_noNight {width: 100%; text-align: center;}/*กลุ่มสำหรับจำนวนห้องว่างและจำนวนคืนพักในช่วงที่เลือก*/
/*
.type-no {width:100%; height:20px; font-size:15px; margin-left: 2px;}
.night-stay {font-size: 15px; color: red;}
.night-stay-moon {margin-top: auto;}
*/
/*.type-night-detail {width:100%; height:20px; font-size:14px; color:red; text-align: center;}*/

.type-g-rate {width: 100%; height: 70px;}
.g-rate {width: 96%; border: thin #CCC solid; margin-left: 2px;margin-top: 2px; padding-bottom: 2px;}
.pro-title {width: 100%; height: 18px; font-size: 14px; text-align: center; color: red}/*เพิ่มในส่วนชื่อโปรโมชั่น*/
.pro-price {width:100%; height:20px; font-size:16px; text-align: center; color: #47B08B}
.pro-refund {width: 100%; font-size: 12px; text-align: center; margin-left: 2px; margin-right: 2px}
.bt-book {width: 100%; text-align: center}
.season-title {width: 100%; font-size: 14px; text-align: center}
.season-price {width:100%; height:20px; font-size:16px; text-align: center; color:#4D7DAB}
.season-refund {width:100%; font-size: 12px; text-align: center; margin-left: 2px; margin-right: 2px}

/*.type-g-no {width:100%;}*/
.condition {width: 100%; height: 20px; font-size: 14px; text-align: center;}/*เพิ่มรายละเอียดการคืนเงินกรณียกเลิกการจองทีหลัง*/
.type-bt {width:100%; height: 40px; text-align: center;}

/*button*/
.button-1{
  	background-color: #4CAF50;
	border: 2px solid #4CAF50;
	border-radius: 4px;
  	color: white;
	width: 130px;
  	padding: 6px 2px;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
	-webkit-transition-duration: 0.4s; /* Safari */
  	transition-duration: 0.4s;}
.button-1:hover {
	background-color:white;
	color:#4CAF50;}

.button-book{/*ปุ่มจองกรณีปรกติไม่มีโปร หรือจองโปรที่ไม่ขายคู่กับราคาซีซั่น*/
  	background-color: #326699;
	border: 2px solid #326699;
	border-radius: 4px;
  	color: white;
	width: 110px;
  	padding: 6px 2px;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
	-webkit-transition-duration: 0.4s; /* Safari */
  	transition-duration: 0.4s;}
.button-book:hover {
	background-color:white;
	color:#326699;}

.button-pro{/*ปุ่มจองกรณีปรกติไม่มีโปร หรือจองโปรที่ไม่ขายคู่กับราคาซีซั่น*/
  	background-color: #2B9E75;
	border: 2px solid #2B9E75;
	border-radius: 4px;
  	color: white;
	width: 110px;
  	padding: 6px 2px;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
	-webkit-transition-duration: 0.4s; /* Safari */
  	transition-duration: 0.4s;}
.button-pro:hover {
	background-color:white;
	color:#2B9E75;}

.button-book-with-pro{/*ปุ่มจองกรณีมีโปรโมชั่นและขายคู่ราคาซีซั่นขนาดจะสูงน้อยกว่าปรกติ*/
  	background-color: #326699;
	border: 2px solid #326699;
	border-radius: 4px;
  	color: white;
	width: 110px;
	height: 25px;
  	padding: 2px 2px;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
	-webkit-transition-duration: 0.4s; /* Safari */
  	transition-duration: 0.4s;}
.button-book-with-pro:hover {
	background-color:white;
	color:#326699;}

.button-pro-with-book{/*ปุ่มจองกรณีมีโปรโมชั่นและขายคู่ราคาซีซั่นขนาดจะสูงน้อยกว่าปรกติ*/
  	background-color: #2B9E75;
	border: 2px solid #2B9E75;
	border-radius: 4px;
  	color: white;
	width: 110px;
	height: 25px;
  	padding: 2px 2px;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
	-webkit-transition-duration: 0.4s; /* Safari */
  	transition-duration: 0.4s;}
.button-pro-with-book:hover {
	background-color:white;
	color:#2B9E75;}

.button-3{/*ปุ่มจัตุรัส*/
  	background-color: #008CBA;
	border: 2px solid #008CBA;
	border-radius: 4px;
  	color: white;
	width: 110px;
  	padding: 6px 2px;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
	-webkit-transition-duration: 0.4s; /* Safari */
  	transition-duration: 0.4s;}
.button-3:hover {
	background-color:white;
	color:#008CBA;}

.groom {width: 60px; display:inline-block; *display:inline;/* for IE7*/ *zoom:1;/* for IE7*/ margin-right: -4px;}

.groom:hover{
	-webkit-box-shadow:0 0 4px #62BCEA; 
    -moz-box-shadow: 0 0 4px #62BCEA; 
    box-shadow:0 0 4px #62BCEA;
}
.room {height:260px; width: 60px; border:1px #CCC solid; text-align:center;margin-bottom:1px; margin-top: 1px;}
.room-available {height:260px; width: 60px; border:1px #79A2C9 solid; text-align:center;margin-bottom:1px;}/*เพิ่มเติมกรณีห้องว่างให้ขอบเส้นสีชัดขึ้น*/

.price_season {
	height:30px;
	text-align:center;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	color:#4D7DAB;
	margin-top: 5px;
}
.line_middle {/*สำหรับใส่เส้นกลางทับราคาซีซั่นที่อยู่ข่องเดียวกับราคาลด */
	text-decoration:line-through;
}
.price_season_full {
	height:30px;
	text-align:center;
	color:#4D7DAB;
}
.price_sale {
	height:30px;
	text-align:center;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	color:#47B08B;
	margin-top: 5px;
}
.room_no{
	
	margin-left:2px;
	margin-top:2px;
	padding-bottom: 4px;
	font-size: 16px;
	bottom: 0;
	color: #666766;
    background-color:aliceblue;
	border: 1px #ccc solid;
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    border-radius: 2px;
    width:54px;
	height:30px;
}
.room_no_icon_home{/*บรรจุ icon บ้าน*/
	width: 22px;
	float: left;
	margin: 2px;
}
.room_no_number{/*บรรจุจำนวนห้องว่าง*/
	width: 26px;
	float: left;
	margin-top: 5px;
}
.room_full_no{
	margin-left:2px;
	margin-top:2px;
	text-align:center;
    /*background-color: #e9e9df;*/
    width:54px;
	height:30px;
}
.ui-icon {/*ต้องการเพิ่มขนาด icon jquery*/
  	-ms-transform: scale(1.5); /* IE 9 */
  	-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
  	transform: scale(1.5);
 }

.fixed {position:fixed; height:48px; background-color:#072D66; color:#FFF; padding:11px 3px; border-bottom:1px #CCC solid; z-index:3;}
.fixposition { position:relative;}
.spacing { margin-top:50px; position: absolute; left:0px; z-index:2; top:100px;}
.form-top { padding-left:2%; padding-right:0%;	width: 98%; margin:5px auto 5px auto;}
/*new css*/
.warper { position:relative}
.main_container { position: absolute; z-index:5; background:#FFF; width:100%;}
.container { width: 90%; max-width: 1980px; padding-left: 0%; padding-right: 0%; margin: auto; }
.container-border { border:1px #fff solid; padding-bottom:30px;}
.container-border2 { border:1px #ccc solid; padding-bottom:0px;}
.t-head { font-weight:bold;}
.t-detail { padding-left:10px;}


/*confirm page*/
.gridContainer2 { width: 100%; max-width: 900px; padding-left: 0%; padding-right: 0%; margin: auto; }
#Layout2 { clear: both; float: left; width: 100%; display: block; }
.r-logo { width:50%; max-width:300px; margin:0 auto; float: none; text-align: center;}
.r-address { width:100%; float:left;}
.row-bt {}
.btl { float:left; width:30%; text-align:left;}
.btr { float:left; width:70%; display:inline-block; text-align:right;}
.padding1 { padding:0 3% 3vh 3%; border:#CCC solid 1px;}
.line1 { margin:15px 10px; border:1px dotted #CCC;}
/*text*/
.row-t-head { padding:10px 0; margin-top:15px; border:1px solid #CCC;font-weight:500; font-size:96%; color:#444;}
.text1 { margin:0 5px; width:200%;}
/*table confirm page*/
.divl,.divr {  text-align:center;}
.divl { float:left; width:100%; padding:20px 0 0 0px; }
.divr { float:left; width:100%; padding:0px 0 0 0px;}
.coll { width:30%;}
.colc { width:60%;}
.colr { width:10%;}

/*detail type*/
/*
.type-container { position:relative;}
.col-person { width:35%; float:left;}
.col-n-room { width:50%; float:left; position:absolute; left:0; margin-top:26px;}
.col-price { width:65%; float:left;}
.col-book-bt { width:50%; float:left; position:absolute; right:3px; margin-top:26px;}
*/

/*room detail page */
.roomcontainer {
	width: 100%;
	max-width: 600px;
	padding-left: 0%;
	padding-right: 0%;
	margin: auto;
}
#roomlayout {
	clear: both;
	float: left;
	width: 100%;
	display: block;
	padding:0;
}
.room-fac {}
.room-fac span { text-indent:5px; font-size:12px; font-weight:400; position:absolute; margin-top:3px;}

/*edit css 17-3-2015*/
div.column-check label { padding:0; font-size:12px;}
div.column-name div { padding-top:0px;}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 100%;
	max-width: 1980px;
	padding-left: 0%;
	padding-right: 0%;
	margin: auto;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	width: 100%;
	display: block;
}
.nav { width:100%; height:70px; background-color:#f8f9f4; position:fixed; z-index:6; box-shadow:inner 0 1px 0 rgba(0,0,0,.77);}
.timeline { display:inline-block; *display:inline; /* for IE7*/ *zoom:1;/* for IE7*/ width:100%; margin-top:70px;  margin-bottom:5px; }
/*.timeline-spacing { background:#FFF; width:100%; height:56px; display:none;}*/

/*.roomtype {position:fixed; height:48px; background-color:#072D66; color:#FFF; padding:11px 3px; margin-top:2px; z-index:3;}
.fixposition { position:relative;}*/
	
.roomtype {position:fixed; width:140px; height:48px; background-color:#195289; color:#FFF; padding:11px 3px; margin-top:1px; line-height:22px;font-family: "caviardreams"; text-align:center; z-index:3;}

.row-month { margin-left:141px; white-space:nowrap; position:absolute; background-color:#fff; z-index:1; margin-top:2px; margin-bottom:1px;}
	
/*.main-room {margin-left: 141px; margin-top:52px;}*/
.row-room {margin-left: 141px; margin-top:52px;white-space:nowrap;}
	
.groom {width: 60px; display:inline-block; *display:inline;/* for IE7*/ *zoom:1;/* for IE7*/ margin-right: -4px;}

.groom:hover{
	-webkit-box-shadow:0 0 4px #62BCEA; 
    -moz-box-shadow: 0 0 4px #62BCEA; 
    box-shadow:0 0 4px #62BCEA;
}
	
.spacing { margin-top:50px; position: absolute; z-index:2; top:70px; left:0px;}
.form-top { width: 84%; padding-left: 8%; padding-right: 8%; margin:0px auto;}
/*detail book*/
.warper { position:relative}
.main_container { position: absolute; z-index:5; background:#FFF; width:100%;}
.container { width: 84%; max-width: 1980px; padding-left: 8%; padding-right: 8%; margin: auto; }
.container-border { border:1px #ccc solid; padding-bottom:30px;}
.container-border2 { border:1px #ccc solid; padding-bottom:20px;}
/*form lyout*/
.t-head { font-weight:bold;}
.t-detail { padding-left:15px;}
.t-detail2 {}

/*confirm page*/
.gridContainer2 { width: 100%; max-width: 900px; padding-left: 0%; padding-right: 0%; margin: auto; }
#Layout2 { clear: both; float: left; width: 100%; display: block; }
.r-logo { width:25%; float:left; margin:2.5% 2% 0 1%; text-align: center;}
.r-address { width:70%; float:left;}
.row-bt {}
.btl { float:left; width:40%; text-align:left;}
.btr { float:left; width:60%; display:inline-block; text-align:right;}
.padding1 { padding:0 2% 3vh 2%; border:#CCC solid 1px;}
.line1 { margin:0px 0; border:0px dashed #CCC;}
/*text*/
.row-t-head { padding:10px 0; margin-top:15px; border:1px solid #CCC; font-weight:500; font-size:96%; color:#444;}
.text1 { margin:0 15px; width:100%;}
/*table confirm page*/
.divl,.divr {  text-align: left;}
.divl { float:left; width:50%; padding:30px 0 0 50px;}
.divr { float:left; width:50%; padding:30px 0 0 50px;}
.coll { width:10%;}
.colc { width:80%;}
.colr { width:10%;}

/*detail type*/
.type-container { /*position:relative;*/}
.col-person { width:16%; float:left;}
.col-n-room { width:24%; float:left; position: relative; margin:0;}
.col-price { width:32%; float:left;}
.col-book-bt { width:28%; float:left; position: relative; margin:0;}

/*.room-left { margin:0;}*/

/*room detail page */
.roomcontainer {
	width: 100%;
	max-width: 800px;
	padding-left: 0%;
	padding-right: 0%;
	margin: auto;
}
#roomlayout {
	clear: both;
	float: left;
	width: 100%;
	display: block;
	padding:0 0 10px ;
}
.room-col-l,.room-col-r { float:left;}
.room-col-l { width:60%;}
.room-col-r { width:40%;}
.room-padding { padding:0 0 0 15px ;}
.room-fac {}
.room-fac span { text-indent:5px; font-size:12px; font-weight:400; position:absolute; margin-top:0px;}

/*edit css 17-3-2015*/
div.column-name div { padding-top:12px;}

}

@media only screen and (max-device-width: 48em) {
	/*very  important!! for mobile size firefox & chrome*/
	.month { -moz-margin-end:-0.335em; -webkit-margin-end:-0.45em;}
	.date { -moz-margin-end:-0.335em; -webkit-margin-end:-0.387em; }
	.room { -moz-margin-end:-0.35em; -webkit-margin-end:-0.35em; }
}

@media all and (-ms-high-contrast:none){
	/*fix only ie11*/
	/*.room { margin-right: 0px } /* IE10 */
	*::-ms-backdrop, .month { border:#CCC 1px solid; margin-right:-3.01px; } /* IE11 */
	*::-ms-backdrop, .date { border:#CCC 1px solid; margin-right:-2.69px; }  /* IE11 */
	*::-ms-backdrop, .room { border:#CCC 1px solid; margin-right:-0.23em;} /* IE11 */
}

@media screen and (max-width: 48em) {
}