/* reset */ html{color:#fff;background-color:#FFFFFF;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} li{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} /* general */ body { font-size: 14px; font-family: 'Helvetica', 'Arial', 'Thonburi', 'Tahoma', 'sans-serif'; line-height: 1.25em; } strong { font-weight:bold; } em { font-style:italic; } a { color:#ffffff; text-decoration:none; } a:hover { text-decoration:underline; } ul { padding:0px; margin:0px auto; } ul li { list-style:none; } img {border:none;} h1 , h2 , h3 , p { padding:0px; margin:0px; } .clear {clear: both;} .clearfix { display: block;} .clearfix:after {clear: both; content: " "; display: block; height: 0; overflow: hidden;visibility: hidden;} .hide { display:none; } .bx-wrapper .bx-pager { bottom:20px;} .bx-wrapper .bx-viewport { border:0; left:0;} /* Layout */ body { background-color:#A9AAA5 ; } #container { background: url(../images/bg.jpg) no-repeat transparent; width: 980px; margin: 0 auto; } footer { position: relative; padding: 15px 0; text-align:right; margin: 0 auto; } footer .copyright { color: #FFFFFF; font-size: 0.8em; } /* header */ #header {position: relative; height: 175px; background: transparent url(../images/header.jpg); } #logo { display: block; width: 260px; height: 120px; position: absolute; top: 35px; left: 100px; } #logo a { display: block;background: transparent url(../images/logo.png) no-repeat;width: 260px;height: 120px; } #reservation-box { position: absolute; bottom: 10px; right: 10px; display: block; height: 30px; width: 123px; z-index:20; } #reservation-box.active { background: transparent url(../images/icn-nav.png) no-repeat top center; } #reservation-box .reservation-txt { background: transparent url(../images/reservation.png) no-repeat;width: 123px;height: 14px;display: block;position: absolute;top: 15px;right: 0px; } /* hilight */ #hilightBox { width: 980px;height: 360px;overflow: hidden;position: relative;} /* gallery */ #galleryBox { width: 980px;height: 360px;overflow: hidden;position: relative;} /* About Us */ #aboutBox { position: absolute; width: 449px; height: 360px; display: block; z-index: 6; top: 0; left: 0; } #aboutBg { position: absolute; background: transparent url(../images/box-about.png) no-repeat;width: 499px;height: 360px;display: block;z-index: 5;top: 0; opacity:0.7; } #aboutBox h4 { margin-top: 60px; text-align: right; opacity: 1; background: transparent; font-size: 20px; } #aboutBox .inner { margin: 20px 30px; color: #FFFFFF; line-height: 20px; } #aboutBox .upper { border-top: 1px solid #FFFFFF; margin-bottom: 20px; width: 110%; } #aboutBox .below { border-top: 1px solid #FFFFFF; margin-top: 20px; width: 98%; } /*Contact us */ #contactBox { color:#FFFFFF; position: absolute; bottom: 0px; right: 20px; display: block; width: 520px; height: 360px; opacity: 1; z-index: 20; } #contactBox h4 { font-size: 20px; position: absolute; top: 170px; } #contactBox .inner {position: absolute;top: 30px;left: 155px;border-left: 1px solid #FFFFFF;border-right: 1px solid #FFFFFF;padding: 40px 20px;width: 270px;line-height: 22px; } #contactBg { background: #000000; position: absolute; bottom: 0px; right: 0px; display: block; width: 100%; height: 360px; opacity: 0.7; z-index: 19; } /* Reservation */ /* reservation */ #reservBoxPage { background-color: #5A5A5A; padding: 25px; } #reservBoxPage h4 { font-size: 20px; text-decoration: underline; margin-bottom: 25px; } #reservBoxPage .inner { } #reservBoxPage .info { border: 1px solid #FFFFFF; padding: 15px; line-height: 23px; margin-bottom: 25px; } #reservBoxPage .formBox { } #reservBoxPage .title { margin-bottom:10px; padding-left:15px;} #reservBoxPage .list {padding: 5px 25px 25px 0; margin-bottom: 16px;} #reservBoxPage .list .form-title { margin-bottom:10px;} #reservBoxPage .list ul li { list-style:none; text-decoration:underline; } #reservBoxPage .personal fieldset { margin:0 auto; width:260px;} #reservBoxPage .personal label {float: left; clear: left; margin: 0px 10px 5px 0; width: 65px; text-align: right; line-height:1.5em; font-size:0.8em; } #reservBoxPage .personal input {width: 160px; height: 17px; padding: 0px 5px 0px 5px; margin: 0 0 5px 0;background:rgb(163, 161, 161); border:1px solid #333333; color:#fff; } #reservBoxPage .personal select {width: 170px; height: 20px; padding: 0px 5px 0px 5px; margin: 0 0 5px 0;background: rgb(163, 161, 161); border:1px solid #333333; color:#fff; } #reservBoxPage .period fieldset { margin:0 auto; width:320px;} #reservBoxPage .period label {float: left; clear: left; margin: 0px 10px 5px 0; width: 95px; text-align: right; line-height:1.5em; font-size:0.8em; } #reservBoxPage .period label#foradult { width:20px; clear:none;} #reservBoxPage .period label#forchildren { width:100px; clear:none;} #reservBoxPage .period input {width: 130px; height: 17px; padding: 0px 5px 0px 5px; margin: 0 0 5px 0;background: rgb(163, 161, 161); border:1px solid #333333; color:#fff; } #reservBoxPage .period input#adult {width: 20px; float:left; margin-right:5px;} #reservBoxPage .period input#children {width: 20px; float:left; margin-right:5px;} #reservBoxPage .booking fieldset { margin:0 auto; width:390px;} #reservBoxPage .booking label {float: left; clear: left; margin: 0px 10px 5px 0; width: 70px; text-align: right; line-height:1.5em; font-size:0.8em; } #reservBoxPage .booking label.label-room-style { width: 70px; clear:none; text-align: left;} #reservBoxPage .booking label.label-num-room { width: 95px; clear:none; text-align: left;} #reservBoxPage .booking input.num-room {width: 20px; text-align:right; height: 17px; float:left; padding: 0px 5px 0px 5px; margin: 0 5px 5px 0;background:rgb(163, 161, 161); border:1px solid #333333; color:#fff; } #reservBoxPage .booking input.room-style {margin: 0 5px 5px 0;background: rgb(163, 161, 161); border:1px solid #333333; color:#fff; float:left; } #reservBoxPage .varif_code { padding:10px 0; width:450px; margin:0 auto;} #reservBoxPage .varif_code input {width: 70px; height: 20px; padding: 0px 5px 0px 5px; margin: 0 0 5px 0;background: rgb(163, 161, 161); border:1px solid #333333; color:#fff;} #reservBoxPage .submit-bg { padding:10px 0; width:450px; margin:0 auto;} #reservBoxPage .submit-bg input { width:90px; padding: 5px; margin: 0 0 5px 0;background:rgb(163, 161, 161); border:none; color:#fff; cursor:pointer;} #reservBoxPage .submit-bg input#clear-btn { margin-left:100px;} #reservBoxPage .remark { text-align:center; padding:10px 0; font-size:0.9em;} #reservBoxPage .remark .yellow { color:#dbe53f;} /* Location */ #locationBox { position: absolute; top: 0; width: 100%; height: 360px; } #locationBox #gmapBox { position: absolute; right: 0; top: 0; height: 360px; width: 505px; } #locationBox #gmapBox #google { width:100%;height:100%; background-color:black; } #locationBox #bgMapBox { z-index: 5; background: transparent url(../images/box-map.png) no-repeat; width: 592px; height: 360px; position: absolute; top: 0; left: 0; } #locationBox #bgMapBox #mapPic { width: 350px; height: 255px; margin-top: 60px; margin-left: 41px; } /* ACCOM */ #accomBox { width: 140px;height: 100px;opacity: 1;top: 130px;position: absolute;color: #FFFFFF;z-index: 1;text-align: left;} #accomBox ul { } #accomBox ul li { eight: 48px; border-bottom: 1px solid #FFFFFF; line-height: 48px; padding-left: 20px; font-size: 18px; } #accomBox li.active { background: transparent url(../images/icn-nav-hor.png) no-repeat right center; } #accomBox li.last { border-bottom: none; height: 47px; } #accomBg { background-color: #726962;position: absolute;display: block;width: 140px;height: 98px;top: 130px;opacity: 0.7; } #roomText { position: absolute; bottom: 10px; right: 10px; background: transparent url(../images/icn-nav-hor-rev.png) no-repeat; padding-left: 15px; height: 19px; line-height: 19px; } /* RATE */ #rateBox { height: 164px; overflow: hidden; z-index: 20; background: transparent; position: absolute; width: 100%; } #rateBg { height: 164px; z-index: 19; background: #726962; position: absolute; width: 100%; opacity:0.7; } .inner-rate { position: absolute; width: 850px; height: 150px; bottom: 65px; } .inner-rate h4 { text-align: right; margin-bottom: 10px; font-size: 20px; } #rateBox table { width: 100%; } #rateBox tr { } #rateBox td, #rateBox th { text-align: center; vertical-align: middle; padding: 10px 0; border: 1px solid #FFFFFF; font-size: 13px; line-height: 20px; } #rateBox td.left { padding-left:20px; text-align:left; } #remarkText { z-index:20; position: absolute; bottom: 30px; right: 20px; background: transparent url(../images/icn-nav-hor-rev.png) no-repeat; padding-left: 15px; height: 19px; line-height: 19px; } #remarkBg { background: #726962; position: absolute; bottom: 25px; right: 0px; display: block; width: 110px; height: 30px; opacity: 0.7; z-index: 19; } #remarkBox { background: #5A5A5A; padding: 25px; } #remarkBox h4 { margin-bottom: 25px; text-decoration: underline; font-size: 20px; } #remarkBox .inner { border: 1px solid #FFFFFF; padding: 20px; line-height: 23px; } #remarkBox .indent { margin-left: 15px; } #remarkBox p {margin-bottom: 25px;} #remarkBox h5 { color: #beb39d; } #packageBox { position: absolute; top: 0; height: 360px; overflow: hidden; } #packageBox .package-entry { cursor: pointer; float: left; position: relative; width: 195px; height: 360px; } #packageBox .package-entry.last { cursor: pointer; float: left; position: relative; width: 200px; height: 360px; } #packageBox .package-entry img.normal { cursor:pointer; position: absolute; width: 195px; height: 360px; z-index: 2; } #packageBox .package-entry img.hover {cursor: pointer; position: absolute; width: 195px; height: 360px; z-index: 1; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); } #packageBox .package-entry h4 { width: 100%; position: absolute; z-index: 5; padding: 10px 25px; opacity: 1; top: 160px; font-size: 16px; height: 18px; line-height: 18px; } #packageBox .package-entry .bg { display:block; background-color: #726962; width: 100%; position: absolute; z-index: 4; opacity: 0.7; top: 160px; height: 38px; } #packageBox .package-entry a { color: orange; text-decoration: none; } #packageBox .package-entry.active img.normal, #packageBox .package-entry:hover img.normal { z-index: 1; } #packageBox .package-entry.active img.hover, #packageBox .package-entry:hover img.hover { z-index: 2; } #packageBox .package-entry.active a, #packageBox .package-entry:hover a { color:white; } #packagePopBox { background-color: #5A5A5A; width: 770px; padding: 15px; height: 460px; } #packagePopBox #packagePic { float: left; width: 310px; margin-right: 15px; } #packagePopBox .inner { float: left; width: 445px; } #packagePopBox h4 { text-align: right;font-size: 16px;padding-bottom: 10px;border-bottom: 1px solid #FFFFFF; margin-bottom: 10px; } #packagePopBox .info {line-height: 25px; } #packagePopBox .date { border-bottom: 1px solid #FFFFFF;padding-bottom: 10px;} #packagePopBox table { width: 100%; } #packagePopBox th { padding: 10px 0;border-bottom: 1px solid #FFFFFF; } #packagePopBox td { padding: 10px 0 0px; } #packagePopBox .left { } #packagePopBox .notice { margin-top: 30px; } #packagePopBox .notice h5 { font-size: 16px; margin-bottom: 10px; } #packagePopBox .notice p { margin-left:10px; } /* Menu */ #menu { background: transparent url(../images/bg-menu.png) no-repeat; height: 38px; } #menu ul.inner-menu { height: 38px; width: 980px; margin: 0; list-style: none; } #menu ul.inner-menu li { display: inline-block; margin: 0 17px; line-height: 40px; font-weight: normal; } #menu ul.inner-menu li.active { background: transparent url(../images/icn-nav.png) no-repeat center top -1px; } #mainBox { position: relative; margin-top: 15px; height:310px; } #mainBox #mainleftBox { z-index: 0; position: absolute; } #mainBox #mainrightAlpha-1 { width: 400px; background: transparent url(../images/box-3-1.png) no-repeat -6px 0px; height: 10px; position: absolute; z-index: 2; top: 95px; left: 367px; } #mainBox #mainrightAlpha-2 { width: 500px; background: transparent url(../images/box-3-2.png) no-repeat -4px 0px; height: 10px; position: absolute; z-index: 2; top: 200px; left: 267px; } #mainBox #mainrightAlpha-3 { background: transparent url(../images/box-2-1.png) no-repeat -206px 0; width: 100px; height: 30px; display: block; position: absolute; left: 176px; top: 200px; z-index: 1; } #mainBox #mainrightAlpha-4 { background: transparent url(../images/box-2-1.png) no-repeat -206px 0; width: 100px; height: 30px; display: block; position: absolute; left: 278px; top: 95px; z-index: 1; } #mainBox #mainleftAlpha { background: transparent url(../images/box-1.png) no-repeat; width: 163px; height: 309px; display: block; position: absolute; z-index: 1; left: 0; bottom: 3px; opacity: 0.6; } #mainBox .mainMenuBox { cursor:pointer; } #mainBox #reservBox { width: 636px; height: 96px; overflow: hidden; top: 0px; position: absolute; z-index: 5; right: 180px; } #mainBox #reservBox img.active { cursor:pointer; border-radius: 80px 0 0 0; position: absolute; right: 5px; z-index: 2; } #mainBox #reservBox img.hover { cursor:pointer;border-radius: 80px 0 0 0; position: absolute; right: 5px; z-index: 1; } #mainBox #reservBox:hover img.active{ border-radius: 80px 0 0 0; position: absolute; right: 5px; z-index: 1; } #mainBox #reservBox:hover img.hover { border-radius: 80px 0 0 0; position: absolute; right: 5px; z-index: 2; } #mainBox #reservBox .reservText { background: transparent url(../images/menu-reservation.png) no-repeat; width: 124px; height: 13px; z-index: 10; position: absolute; right: 110px; bottom: 10px; } #mainBox #reservBox #reservAlpha { position: absolute; background: transparent url(../images/box-2-1.png) no-repeat; width: 636px; height: 96px; z-index: 5;} #mainBox #packageBox { width: 636px;height: 96px;overflow: hidden;top: 104px;position: absolute;z-index: 5;right: 180px; } #mainBox #packageBox img.active { cursor:pointer;border-radius: 80px 0 0 0; position: absolute; right: 5px; z-index: 2; } #mainBox #packageBox img.hover { cursor:pointer;border-radius: 80px 0 0 0; position: absolute; right: 5px; z-index: 1; } #mainBox #packageBox:hover img.active { border-radius: 80px 0 0 0; position: absolute; right: 5px; z-index: 1; } #mainBox #packageBox:hover img.hover { border-radius: 80px 0 0 0; position: absolute; right: 5px; z-index: 2; } #mainBox #packageBox .packageText { background: transparent url(../images/accom.png) no-repeat; width: 222px;height: 18px;z-index: 10;position: absolute; right: 35px; bottom: 5px; } #mainBox #packageBox #packageAlpha { position: absolute; background: transparent url(../images/box-2-2.png) no-repeat; width: 636px; height: 96px; z-index: 5; } #mainBox #galleryBox { width: 636px; height: 96px; overflow: hidden; top: 210px; position: absolute; z-index: 5; right: 180px; } #mainBox #galleryBox img.active { cursor:pointer;border-radius: 80px 0 0 0; position: absolute; left: 60px; z-index: 2; } #mainBox #galleryBox img.hover { cursor:pointer;border-radius: 80px 0 0 0; position: absolute; left: 60px; z-index: 1; } #mainBox #galleryBox:hover img.active { border-radius: 80px 0 0 0; position: absolute; left: 60px; z-index: 1; } #mainBox #galleryBox:hover img.hover { border-radius: 80px 0 0 0; position: absolute; left: 60px; z-index: 2; } #mainBox #galleryBox .galleryText { background: transparent url(../images/menu-gallery.png) no-repeat; width: 124px; height: 13px; z-index: 10; position: absolute; left: 85px; bottom: 10px; } #mainBox #galleryBox #galleryAlpha { position: absolute; background: transparent url(../images/box-2-3.png) no-repeat; width: 636px; height: 96px; z-index: 5; }