@media only screen and (max-width: 240px) {
body {background:#0c0200 url(../images/bg-mobile.jpg) top no-repeat}
header {border-radius:0; height:110px}
.header-in { width:100%; height:90px;}
.logo {width:153px; height:62px; position:absolute; left:15px; top:58px; z-index:10}
.content,.content-full {width:65%; height:auto; position:static; margin:10px auto 0 auto; background: url(../images/bg-content-f.png) ; padding:0; border-radius:5px 5px 0 0}
.content-in {width:80%; margin:0; height:100%; position:relative;}
footer {text-align:center; width:100%; height:auto; position: relative; margin:15px auto; background: url(../images/bg-content-f.png); padding-bottom:3px}
.footer-in {width:80%; margin:0 auto; height:auto; position:relative; padding-top:5px}
.footer-r {position: static; width:80%; margin:15px auto; text-align:center}
.footer-r img {float: none}
footer li {padding:10px 0}
.intro {position: static; width:100%;padding:0; font-size:14px}
.intro h1 {font-size:24px; line-height:26px;}
.intro h2 {font-size:18px;}
.intro h3 {font-size:14px; line-height:16px;}
.logo {width:120px; height:38px; margin-left:30px}
.bg,.bg2 {background:none}
.roomtype {width:100%; margin:0 0 10px 0; font-size:12px}
.thumb {width:100%;}
.rest {width:100%!important}
.restthumb {width:100%!important}
.restdetail {width:100%!important}
.restdetail p {margin-bottom:25px}
.maincontent table {width:100%}

.pc-x,.main-select-menu { display:block; }
.sound,.promotion, .book-mobile,.footer-l, nav,.banner-offer,#fullscr-copyright,#supersized,#progress-bar,#progress-back,.load-item,#controls,.x-mobile,.topnav,.description,.column1,#canvas_holder{display:none!important;visibility:hidden}
header {width:100%; position:static; margin:0; text-align:center}	
.maincontent {width:100%; float:left; padding:0; max-height:none; min-height:200px}
aside {width:100%; float:right; padding-top:10px; position:relative; margin-top:20px; text-align:center;border-top:#8a5715 solid 1px;}
aside h2 {color:#02b0ae; font-size:20px; line-height:30px; margin-bottom:5px;}
aside ul { width:95%; margin:0 auto}
aside li {padding:10px 0; border-top:1px #25190b solid;border-bottom:none}
.reservation {width:93%; height:160px; position:absolute;}
.reservation input[type="image"]{position:absolute; top:133px; left:190px}
.roompic { display:block;width:100%;height: auto; margin-bottom:15px}
.roompic img {max-width:100%;height: auto;}

.nav {display:block;width:85%; position:static; margin:0 auto; background: url(../images/bg-content-f.png); padding:15px 15px 10px 15px; border-radius:0 0 5px 5px;border-top:#8a5715 solid 1px;}
.nav h2 {color:#02b0ae; font-size:20px; line-height:20px; margin-bottom:3px;}
.nav h3 {font-size:18px; margin-bottom:5px; font-weight:bold; color:#fff}
.nav ul { width:100%; margin:0 auto; text-align:center}
.nav strong {font-weight:bold}
.nav a {font-weight:bold; text-decoration:none; color:#666464}
.nav a:hover {text-decoration:none}
.nav .select a {color:#02b0ae}
.nav p { font-size:12px; color:#fff; margin-bottom:10px;}

#commentForm {width:99%; margin-top:15px}
.contactform {width:99%; padding:0;}
.contactform-field {width:100%;}
.contactform-field input,.contactform-field select,.contactform-field textarea {width:100%;}
.contact-address {float:left; width:99%; margin-right:0;}
.contactform-field input[type="image"] {float:none}

a{ outline: none; text-decoration:none; }
.offerthumb {width:100%; margin-right:0}
.offerdetail {float:left; width:100%;}
.offerdetail p {font-size:13px; line-height:normal}
.thumb2 {width:100%;}
.thumb2 img {margin-bottom:5px}
.galacolumn {width:100%}
img.gala {width:100%; margin:0 10px 10px 0}
img.newyear-gala-dinner {position: static}
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
body {background:#0c0200 url(../images/bg-mobile.jpg) top no-repeat}
header {border-radius:0; height:100px}
.header-in { width:100%; height:85px}
.logo {width:153px; height:62px; position:absolute; left:10px; top:58px; z-index:10}
.content,.content-full {width:85%; height:auto; position:static; margin:10px auto 0 auto; background: url(../images/bg-content-f.png) ; padding:15px; border-radius:5px 5px 0 0}
.content-in {width:100%; margin:0; height:100%; position:relative;}
footer {text-align:center; width:100%; height: auto; position: relative; margin:15px auto; background: url(../images/bg-content-f.png); padding-bottom:3px}
.footer-in {width:100%; margin:0 auto; height: auto; position:relative; padding-top:5px}
.footer-r {position: static; width:90%; margin:15px auto; text-align:center}
.footer-r img {float: none}
footer li {padding:10px 0}
.intro {position: static; width:100%;padding:0; font-size:14px;}
.intro h1 {font-size:24px; line-height:26px;}
.intro h2 {font-size:18px;}
.intro h3 {font-size:14px; line-height:16px;}
.book-mobile {top:92px; right:5px}
.book-mobile img {width:120px; height:38px}
.logo {width:100px; height:31px;}
.bg,.bg2 {background:none}
.roomtype {width:100%; margin:0 0 10px 0; font-size:13px}
.thumb {width:100%;}
.rest {width:100%}
.restthumb {width:50%}
.restdetail {width:45%}
.restdetail p {margin-bottom:25px}
.gallthumb {width:47%;}
.maincontent table {width:100%}

.pc-x,.main-select-menu { display:block; }
.sound,.promotion, .footer-l, nav,.banner-offer,#fullscr-copyright,#supersized,#progress-bar,#progress-back,.load-item,#controls,.x-mobile,.topnav,.description,#canvas_holder{display:none!important;visibility:hidden}
header {width:100%; position:static; margin:0; text-align:center}	
.maincontent {width:100%; float:left; padding:0; max-height:none; min-height:200px}
.maincontent ul {float:left; width:90%; padding-right:0;}
aside {width:100%; float:right; padding-top:10px; position:relative; margin-top:20px; text-align:center;border-top:#8a5715 solid 1px;}
aside h2 {color:#02b0ae; font-size:20px; line-height:30px; margin-bottom:5px;}
aside ul { width:95%; margin:0 auto}
aside li {padding:10px 0; border-top:1px #25190b solid;border-bottom:none}
.reservation {width:93%; height:160px; position:absolute;}
.reservation input[type="image"]{position:absolute; top:133px; left:190px}
.roompic { display:block;width:100%;height: auto; margin-bottom:15px}
.roompic img {max-width:100%;height: auto;}


.nav {display:block;width:85%; position:static; margin:0 auto; background: url(../images/bg-content-f.png); padding:15px 15px 10px 15px; border-radius:0 0 5px 5px;border-top:#8a5715 solid 1px;}
.nav h2 {color:#02b0ae; font-size:20px; line-height:20px; margin-bottom:3px;}
.nav h3 {font-size:18px; margin-bottom:5px; font-weight:bold; color:#fff}
.nav ul { width:100%; margin:0 auto; text-align:center}
.nav strong {font-weight:bold}
.nav a {font-weight:bold; text-decoration:none; color:#666464}
.nav a:hover {text-decoration:none}
.nav .select a {color:#02b0ae}
.nav p { font-size:12px; color:#fff; margin-bottom:10px;}

#commentForm {width:99%; margin-top:15px}
.contactform {width:99%; padding:0;}
.contactform-field {width:100%;}
.contactform-field input,.contactform-field select,.contactform-field textarea {width:90%;}
.contact-address {float:left; width:99%; margin-right:0;}
.contactform-field input[type="image"] {float:none}

a{ outline: none; text-decoration:none; }
.column2 {width:100%; float:left;}
.column1 {width:100%; float:left; margin-right:0}
.offerthumb {width:100%; margin-right:0}
.offerdetail {float:left; width:100%; }
.offerdetail,.offerdetail p {font-size:13px; line-height:normal}
.thumb2 {width:100%;}
.thumb2 img {margin-bottom:5px}
.galacolumn {width:100%}
img.gala {width:100%; margin:0 10px 10px 0}
img.newyear-gala-dinner {position: static}
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 321px)
and (max-width : 670px) {
body {background:#0c0200 url(../images/bg-mobile.jpg) top no-repeat}
header {border-radius:0; height:120px}
.header-in { width:100%;}
.logo {width:153px; height:62px; position:absolute; left:15px; top:58px; z-index:10}
.content,.content-full {width:85%; height:auto; position:static; margin:10px auto 0 auto; background: url(../images/bg-content-f.png) ; padding:15px; border-radius:5px 5px 0 0}
.content-in {width:100%; margin:0; height:100%; position:relative;}
footer {text-align:center; width:100%; height:75px; position: relative; margin:15px auto; background: url(../images/bg-content-f.png)}
.footer-in {width:100%; margin:0 auto; height:75px; position:relative; padding-top:5px}
.footer-r {position: static; width:310px; margin:15px auto; text-align:center}
.footer-r img {float: none}
footer li {padding:10px 0}
.intro {position: static; width:100%;padding:0}
.bg,.bg2 {background:none}
.roomtype {width:100%; margin:0 0 10px 0; font-size:13px}
.thumb {width:40%;}
.rest {width:100%}
.restthumb {width:40%;}
.restdetail {width:50%;}
.restdetail p {margin-bottom:25px}
.gallthumb {width:32%;}
.maincontent table {width:100%}

.pc-x,.main-select-menu { display:block; }
.sound,.promotion,.footer-l, nav,.banner-offer,#fullscr-copyright,#supersized,#progress-bar,#progress-back,.load-item,#controls,.x-mobile,.topnav,.description,#canvas_holder{display:none!important;visibility:hidden}
header {width:100%; position:static; margin:0; text-align:center}	
.maincontent {width:100%; float:left; padding:0; max-height:none; min-height:200px}
.maincontent ul {width: 100%; margin:0; padding:0}
aside {width:100%; float:right; padding-top:10px; position:relative; margin-top:20px; text-align:center;border-top:#8a5715 solid 1px;}
aside h2 {color:#02b0ae; font-size:20px; line-height:30px; margin-bottom:5px;}
aside ul { width:95%; margin:0 auto}
aside li {padding:10px 0; border-top:1px #25190b solid;border-bottom:none}
.reservation {width:93%; height:160px; position:absolute;}
.reservation input[type="image"]{position:absolute; top:133px; left:190px}
.roompic { display:block;width:100%;height: auto; margin-bottom:15px}
.roompic img {max-width:100%;height: auto;}

.nav {display:block;width:85%; position:static; margin:0 auto; background: url(../images/bg-content-f.png); padding:15px 15px 10px 15px; border-radius:0 0 5px 5px;border-top:#8a5715 solid 1px;}
.nav h2 {color:#02b0ae; font-size:20px; line-height:20px; margin-bottom:3px;}
.nav h3 {font-size:18px; margin-bottom:5px; font-weight:bold; color:#fff}
.nav ul { width:100%; margin:0 auto; text-align:center}
.nav strong {font-weight:bold}
.nav a {font-weight:bold; text-decoration:none; color:#666464}
.nav a:hover {text-decoration:none}
.nav .select a {color:#02b0ae}
.nav p { font-size:12px; color:#fff; margin-bottom:10px;}

#commentForm {width:99%; margin-top:15px}
.contactform {width:99%; padding:0;}
.contactform-field {width:100%;}
.contactform-field input,.contactform-field select,.contactform-field textarea {width:100%;}
.contact-address {float:left; width:99%; margin-right:0;}
.contactform-field input[type="image"] {float:none}

a{ outline: none; text-decoration:none; }
.column2 {width:100%; float:left;}
.column1 {width:100%; float:left; margin-right:15px}
.offerdetail,.offerdetail p { font-size:13px; line-height:normal}
.thumb2 {width:46%;}
.thumb2 img {margin-bottom:5px}
.galacolumn {width:50%}
img.gala {width:60px; margin:0 10px 10px 0}
img.newyear-gala-dinner {position: static}
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}


/* small screen and tablet */
@media only screen
and (min-width : 671px)
and (max-width : 1023px) {
header {height:110px}
.header-in { width:650px; height:100px;}
.logo {width:130px; height:53px; position:absolute; left:0; bottom:35px}
nav { position:absolute; right:0; bottom:10px}
.content-in {width:650px}
.footer-in { width:650px; margin:0 auto; height:75px; position:relative}
#controls { width:290px;text-align:right; position:absolute; right:0; top:-5px}	
.intro {width:330px;}
.menu-toggle {bottom:-29px;right:0;}
.maincontent {width:395px; float:left; padding:15px; max-height:570px}
.roomtype {margin:0 10px 10px 0; font-size:11px}
.thumb {width:32%;}
.rest {width:100%}
.restthumb {width:40%}
.restdetail {width:50%}
.maincontent table {width:100%}

.sound,#play-button;.roompic {display:none!important;visibility:hidden}

.content-full {width:690px; background: url(../images/bg-content-f.png); left:20px; bottom:50px}
.full-width {width:620px;}
.gallthumb {width:98px; height:auto; float:left; margin-right:5px}

header {left:20px; top:40px}
.logo {padding:5px}
nav div {height:87px}
nav div a {font-size:12px;padding:25px 10px 26px 10px;}
nav div h2 {font-size:15px; margin:0;}
.footer-r {position:absolute; right:20px}

ul#slide-list {left:40px}
.detail {width:72%;}

#commentForm {width:99%; margin-top:15px}
.contactform {width:99%; padding:0;}
.contactform-field {width:100%;}
.contactform-field input,.contactform-field select,.contactform-field textarea {width:100%;}
.contact-address {float:left; width:99%; margin-right:0;}
.contactform-field input[type="image"] {float:none}
a{ outline: none; text-decoration:none; }

.column2 {width:33%; float:left;}
.column1 {width:63%; float:left; margin-right:15px}
.offer {background:none; border-bottom: 1px dotted #1a1515}
.offerthumb {width:100%; margin-right:0}
.offerdetail {float:left; width:100%; font-size:13px; line-height:normal}
.heigher ul {width:22%; padding-right:10px}
.btn-loc {width:100%;}
.thumb2 {width:85px;}
.galacolumn {width:50%}
img.gala {width:70px; margin:0 10px 10px 0}
}

/* small screen and tablet */
@media only screen
and (max-width : 1023px) {.btn-loc {width:100%;}
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}