/* general */
html{background: #fff url(http://www.botanybeach.com/assets/images/bg.png) no-repeat center center fixed;
no-repeat center center ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.png', sizingMethod='scale')";
max-width:1280px; width:100%; margin:0 auto;
}
body { font-size: 14px; font-family: 'Arial', 'Tahoma', 'Helvetica', 'Thonburi', 'sans-serif'; line-height: 1.25em; color:#000;}
strong { font-weight:bold; }
em { font-style:italic; }
a { color:#ffffff; text-decoration:none; outline:none; }
a:hover { text-decoration:none; color:#c9ad10;}
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;}
.last { margin-right:0 !important;}
.hide {display:none;}
.font-goal { color:#b19123;}
.for-hover {font-size:1.3em; line-height:35px;}
.hover-transition {transition : color 0.35s ease; -webkit-transition : color 0.35s ease; -moz-transition : color 0.35s ease;-o-transition : color 0.35s ease;}
/*---------------*/
/***** Chico *****/
/*---------------*/
/*.effect-chico img {-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: scale(1.05);transform: scale(1.05);}
.effect-chico:hover img {-webkit-transform: scale(1);transform: scale(1);}
*/
.effect-chico {border:none;}
.effect-chico img {
border:none;
width: -webkit-calc(100% + 20px);
width: calc(100% + 20px);
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-10px,0,0);
transform: translate3d(-10px,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.effect-chico:hover img {
border:none;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.effect-chico div.for-hover { overflow:hidden;}
.effect-chico div.for-hover::after {
position: absolute;
bottom: 6px;
width:100%;
left: 0px;
height: 1px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
display:block;
}
.effect-chico:hover div.for-hover::after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* layout */
.containner { width: 100%; position:relative;}
.header { height:152px; padding-top:10px; position:relative; border-bottom:8px solid #333333;}
.header .logo {background:transparent url(http://www.botanybeach.com/assets/images/logo.png) no-repeat left top; width:193px; height:142px; float:left;}
.header .logo a {display:block; width:193px; height:142px;}
.header .logo a h1 { display:none;}
.header .title { text-align:center; position:absolute; background:url(http://www.botanybeach.com/assets/images/title-text.png) no-repeat; width:585px; height:40px; top:71px; right:250px; }
.header .booknow { position:absolute; top:65px; right:0;}
.header .booknow a { background:url(../images/book-now.png) no-repeat left top; width:142px; height:42px; display:block;}
.header .booknow a span { position:absolute; left:17px; }
.header .likebox { position:absolute; right:0; bottom:10px; width:142px; height:32px;}
.header .likebox a { margin-right:10px; float:left; width:32px;}
.header .likebox #fblike iframe {width:95px; position:absolute; right:0px; top:5px;}
.content { position:relative; height:529px; }
.menu { margin: 0 auto; background-color:#333; position:relative; z-index:99;}
.menu ul { margin: 0; padding: 0; text-align: center; padding:8px 0 5px 0;}
.menu ul li {list-style: none;display: inline; margin:0 7px; font-size:0.9em;}
.menu ul li a {text-decoration: none;}
.menu ul li a:hover, .menu ul li a.active {color:#c9ad10;}
footer { position:relative; padding-top:5px;}
footer .copyright { float:right; color:#000; font-size:0.8em;}
footer .copyright a {color:#000;}
/* Home */
.home .triangle {position:absolute;}
.home .menu-about {width:640px; height:300px;}
.home .menu-about .about-fade { width:620px;}
.home .menu-about{float:left; position:relative; background-color: #000000;}
.menu-about .triangle {background:transparent url(http://www.botanybeach.com/assets/images/home-about-triangle.png) no-repeat; width:170px; height:177px; right:0; top:0px; z-index:999; }
.menu-about .title { position:absolute; bottom:13px; left:-7px; z-index:9999; background:url(http://www.botanybeach.com/assets/images/home-about.png) no-repeat left top; width:138px; height:42px;}
.menu-about .for-hover { width:108px; position:absolute; left:15px;}
.home .menu-accom {width:640px; height:300px;}
.home .menu-accom .accom-fade { width:620px;}
.home .menu-accom{float:left; position:relative; background-color: #000000;}
.menu-accom .triangle {background:transparent url(http://www.botanybeach.com/assets/images/home-accom-triangle.png) no-repeat; width:170px; height:177px; left:0; bottom:0px; z-index:999; }
.menu-accom .title { position:absolute; bottom:13px; right:-7px; z-index:9999; background:url(http://www.botanybeach.com/assets/images/home-accom.png) no-repeat left top; width:212px; height:42px;}
.menu-accom .for-hover { width:185px; position:absolute; left:15px;}
.home .menu-gallery { width:427px; height:229px;}
.home .menu-gallery .gallery-fade { width:407px;}
.home .menu-gallery{float:left; position:relative; background-color: #000000;}
.menu-gallery .triangle {background:transparent url(http://www.botanybeach.com/assets/images/home-gallery-triangle.png) no-repeat; width:153px; height:160px; right:0; top:0px; z-index:999; }
.menu-gallery .title { position:absolute; bottom:13px; left:-7px; z-index:9999; background:url(../images/home-gallery.png) no-repeat left top; width:138px; height:42px;}
.menu-gallery .for-hover { width:97px; position:absolute; left:20px;}
.home .menu-promotion { width:427px; height:229px;}
.home .menu-promotion .promotion-fade { width:407px;}
.home .menu-promotion{float:left; position:relative; background-color: #000000;}
.menu-promotion .triangle {background:transparent url(http://www.botanybeach.com/assets/images/home-promotion-triangle.png) no-repeat; width:153px; height:160px; right:0; bottom:0px; z-index:999; }
.menu-promotion .title { position:absolute; bottom:13px; left:-7px; z-index:9999; background:url(http://www.botanybeach.com/assets/images/home-promotion.png) no-repeat left top; width:157px; height:42px;}
.menu-promotion .for-hover { width:128px; position:absolute; left:15px;}
.home .menu-contact { width:426px; height:229px;}
.home .menu-contact .contact-fade { width:406px;}
.home .menu-contact{float:left; position:relative; background-color: #000000;}
.menu-contact .triangle {background:transparent url(http://www.botanybeach.com/assets/images/home-gallery-triangle.png) no-repeat; width:153px; height:160px; right:0; top:0px; z-index:999; }
.menu-contact .title { position:absolute; bottom:13px; right:-7px; z-index:9999; background:url(http://www.botanybeach.com/assets/images/home-contact.png) no-repeat left top; width:158px; height:42px;}
.menu-contact .for-hover { width:128px; position:absolute; left:15px;}
/* About Us */
.about .img-fade {background-color: #000000;}
.about .about-detail { position:relative; height:240px; background:url(http://www.botanybeach.com/assets/images/overlay-white-bg.png) repeat;}
.about .about-detail .inner { padding:15px 15px 0 15px;}
.about .about-detail .inner .left-pane { float:left; width:625px; position:relative;}
.about .about-detail .inner .left-pane .title { font-size:1.5em; margin-bottom:10px;}
.about .about-detail .inner .left-pane .left-pane-detail { width:580px; text-align: justify;}
.about .about-detail .inner .left-pane .left-pane-detail#about-thai{ font-size:0.9em;}
.about .about-detail .inner .left-pane .left-pane-detail p { margin-bottom:10px;}
.about .about-detail .inner .left-pane .left-pane-detail p:last-child{margin-bottom:0px;}
.about .about-detail .inner .left-pane .more { background:url(http://www.botanybeach.com/assets/images/more.png) no-repeat; width:26px; padding-top:28px; color:#7d4900; position:absolute; top:80px; right:0px; cursor:pointer; font-size:0.8em;}
.about .about-detail .inner .left-pane .more:hover { color:#000;}
.about .about-detail .inner .right-pane { float:right; width:625px; position:relative;}
.about .about-detail .inner .right-pane .title { font-size:1.5em; position:absolute; top:90px; right:150px;}
.about .about-detail .inner .right-pane .layout { float:right;}
/* Accommodation */
.accom .roomlist .list { float:left; width:256px; overflow:hidden; background-color:#333333; text-align:center;}
.accom .roomlist .list .title { padding:5px 0 5px 10px; text-align:left;}
.accom .roomlist .list .img { overflow:hidden; height:125px;}
.accom .roomlist .list .title a { font-size:1.1em; text-decoration:none;}
.accom .roomlist .list:hover a.room-title, .accom .roomlist .list a.active {color:#c9ad10;}
.accom .roomlist .list .title a.detail { float:right; font-size:0.8em; margin-right:10px;}
.accom .room-img {position:relative; height:377px;}
.accom .room-img .accom-nav-btn a { width:138px; height:42px; position:absolute; z-index:9999; transition : color 0.35s ease; -webkit-transition : color 0.35s ease; -moz-transition : color 0.35s ease;-o-transition : color 0.35s ease;font-size:1.3em; line-height:35px; text-align:center;}
.accom .room-img #prev a {background:url(http://www.botanybeach.com/assets/images/back.png) left top no-repeat; left:-7px; bottom:13px; }
.accom .room-img #next a {background:url(http://www.botanybeach.com/assets/images/next.png) left top no-repeat; right:-7px; bottom:13px;}
.accom .room-img .room-detail { display:none; width:446px; height:345px; background:url(http://www.botanybeach.com/assets/images/overlay-bg.png) left top repeat; position:absolute; top:15px; left:417px; z-index:9999;}
.accom .room-img .room-detail .inner { padding:10px 10px 10px 15px; position:relative; width:421px; height:325px; color:#fff;}
.accom .room-img .room-detail .inner .close { position:absolute; right:10px; top:10px; cursor:pointer; color:#fff; font-size:0.8em;}
.accom .room-img .room-detail .inner .close:hover {color:#c9ad10;}
.accom .room-img .room-detail .inner .title {color:#fff; padding:30px 0 10px 0; border-bottom:1px solid #c9ad10; font-size:1.5em; margin-bottom:10px;}
.accom .room-img .room-detail .inner ul li { list-style:outside; margin-left:25px; margin-bottom:5px;}
/* Gallery */
.gallery { position:relative;}
.gallery .gallery-nav-btn a { width:138px; height:42px; position:absolute; z-index:9999; transition : color 0.35s ease; -webkit-transition : color 0.35s ease; -moz-transition : color 0.35s ease;-o-transition : color 0.35s ease;font-size:1.3em; line-height:35px; text-align:center;}
.gallery #prev a {background:url(http://www.botanybeach.com/assets/images/back.png) left top no-repeat; left:-7px; top:245px;}
.gallery #next a {background:url(http://www.botanybeach.com/assets/images/next.png) left top no-repeat; right:-7px; top:245px;}
/* Facilities */
.facilities { position:relative; background:url(http://www.botanybeach.com/assets/images/overlay-white-bg.png) repeat;}
.facilities .list {float:left; width:320px;}
.facilities .facilities-detail { position:relative;}
.facilities .facilities-detail .title { font-size:1.5em; position:absolute; top:100px; right:370px;}
.facilities .facilities-detail .layout { float:right; width:320px;}
.facilities .facilities-detail .layout ul {padding-top:40px; height:180px; padding-right: 10px; overflow:auto; position:relative;}
.facilities .facilities-detail .layout ul li { margin-bottom:5px; }
/* Attraction */
.attraction { position:relative; background:url(http://www.botanybeach.com/assets/images/overlay-white-bg.png) repeat;}
.attraction .list {float:left;}
.attraction #attfade1 { width:249px;}
.attraction #attfade2 { width:604px;}
.attraction #attfade3 { width:427px;}
.attraction .attraction-detail { position:relative;}
.attraction .attraction-detail .title { font-size:1.5em; position:absolute; top:100px; right:370px;}
.attraction .attraction-detail .layout { float:right; width:320px;}
.attraction .attraction-detail .layout ul {padding-top:40px; height:180px; padding-right: 10px; overflow:auto; position:relative;}
.attraction .attraction-detail .layout ul li { margin-bottom:5px; }
/* Contact Us */
.contact.content { position:relative; background:url(http://www.botanybeach.com/assets/images/overlay-white-bg.png) repeat;}
.contact .img-fade{ float:left; width:795px; background-color: #000000;}
.contact .detail { float:left; width:465px; padding-left:20px;}
.contact .detail .map {padding-top:20px; margin-bottom:60px;}
.contact .detail .google_map { margin-bottom:10px;}
.contact .detail .address .title {color:#000; }
.contact .detail .address p, .contact .detail .address a {color:#000; margin-bottom:5px;}
@media only screen and (max-width : 320px) {
/* Styles */
body { font-size: 14px; }
}
@media only screen and (min-width : 320px) and (max-width : 480px) {
/* Styles */
body { font-size: 14px; }
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
body { font-size: 14px; }
}