/* HTML5 ✰ Boilerplate */


@font-face {
    font-family: 'AvalonBook';
    src: url('fonts/avalon-book/Avalon-Book-webfont.eot');
    src: url('fonts/avalon-book/Avalon-Book-webfont86d7.eot?iefix') format('embedded-opentype'), url('fonts/avalon-book/Avalon-Book-webfont.html') format('woff'), url('fonts/avalon-book/Avalon-Book-webfont.ttf') format('truetype'), url('fonts/avalon-book/Avalon-Book-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AvalonDemi';
    src: url('fonts/avalon-demi/Avalon-Demi-webfont.eot');
    src: url('fonts/avalon-demi/Avalon-Demi-webfont86d7.eot?iefix') format('embedded-opentype'), url('fonts/avalon-demi/Avalon-Demi-webfont.html') format('woff'), url('fonts/avalon-demi/Avalon-Demi-webfont.ttf') format('truetype'), url('fonts/avalon-demi/Avalon-Demi-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gotham';
    src: url('fonts/gotham/gotham-medium-webfont.woff');
    src: url('fonts/gotham/gotham-medium-webfont.eot?iefix') format('embedded-opentype'),
         url('fonts/gotham/gotham-medium-webfont.woff') format('woff'),
         url('fonts/gotham/gotham-medium-webfont.ttf') format('truetype'),
         url('fonts/gotham/gotham-medium-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}





html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: "";
        content: none;
    }

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

input, select {
    vertical-align: middle;
}

body {
    font: 12px/1.3 sans-serif;
    *font-size: small;
    font-family: gotham, Arial, sans-serif;
    background-image: url(../img/mask.png);
   
}

p, #pre-footer, footer, #breadcrumbs {
    font-family: Gotham, sans-serif;
}

select, input, textarea, button {
    font: 99% sans-serif;
}

pre, code, kbd, samp {
    font-family: monospace, sans-serif;
}

html {
    overflow-y: visible;
}

a, a:hover, a:active {
    outline: none;
}

ul, ol {
    margin-left: 2em;
}

ol {
    list-style-type: decimal;
}

nav ul, nav li {
    margin: 0;
    list-style: none;
    list-style-image: none;
}

small {
    font-size: 85%;
}

strong, th {
    font-weight: bold;
}

td {
    vertical-align: top;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}



body#home {
    overflow-x: hidden;
    overflow-y: hidden;
}

aside#top {
    width: 87%;
    min-height: 600px;
    margin: 0 auto;
    position: absolute;
    overflow: hidden;
    right: 0px;
    display: none;
    /* border: 1px solid red; */
}

#container {
    width: 100%;
    min-height: 600px;
    margin: 0 auto;
    padding: 0;
}

#border {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
}

    #border #bgImage {
        z-index: 0;
    }

.awards-gallery {
    position: absolute;
    left: 24px;
}

.noble-house {
    position: absolute;
    right: 24px;
}

#home header {
    width: 200px;
    position: absolute;
    left: 24px;
}



header#first hgroup .logo {
    background-image: url(../img/logos/ma_logo.png);
    background-repeat: no-repeat;
    color: #EAE8D5;
    font-size: 1px;
    height: 125px;
    position: relative;
    text-indent: -9999px;
    top: 0;
    width: 250px;
    margin-bottom: -4px;
    display: block;
}

header#first hgroup h2 {
    display: none;
}

footer#home {
    width: 100%;
    height: auto;
    position: fixed;
    bottom: 0px;
    z-index: 99900;
}

#footer-links {
    width: 100%;
    height: 34px;
    margin: 0 auto;
}

a.intro {
    background-image: url(../img/btn/btn_intro.png);
    background-repeat: no-repeat;
    width: 427px;
    height: 70px;
    text-indent: -9999em;
    position: absolute;
    right: 70px;
    float: right;
    bottom: 85px;
}

a.close {
    text-indent: -9999em;
    background-image: url(../img/close.png);
    background-repeat: no-repeat;
    width: 18px;
    height: 17px;
    position: relative;
    float: left;
}

#intro a.close {
    top: 14px;
}

section#intro-wrap {
    background-image: url(../img/intro_bg.png);
    background-repeat: repeat-x;
    background-position: center top;
    height: 412px;
    width: 100%;
    position: relative;
    color: #fff;
    display: none;
    z-index: 1;
}

div#intro {
    width: 895px;
    margin: 0 auto;
    overflow: auto;
}

    div#intro aside {
        width: 520px;
        float: left;
        margin-top: 5px;
    }



    div#intro h1 {
        font-weight: normal;
        margin: 10px 0 10px;
        font-size: 1.7em;
        float: left;
        width: 500px;
        /*height:32px; */
    }

    div#intro p {
        float: left;
        margin: 0 0 10px 0;
    }

.intro-photos {
    position: relative;
    /*top:-22px;*/
    float: left;
}

section#bookings-wrap {
    width: 100%;
    height: 50px;
    margin: 0 auto;
    background: url("../img/bookings_bg.png") repeat scroll 0 0 #FFFFFF;
    background-repeat: repeat;
    background-color: #FFF;
    -webkit-box-shadow: 0px -7px 7px -7px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px -7px 7px -7px rgba(0, 0, 0, 0.5);
    box-shadow: 0px -7px 7px -7px rgba(0, 0, 0, 0.5);
    z-index: 1003;
}

#bookings {
    width: 1024px;
    height: 50px;
    margin: 0 auto;
}

    #bookings > div {
        float: left;
        width: 396px;
        height: 50px;
    }

a.awards-gallery {
    background-image: url(../img/btn/btn_awards.gif);
    background-repeat: no-repeat;
    width: 257px;
    height: 33px;
    margin-top: 10px;
    text-indent: -9999em;
    position: absolute;
    left: 24px;
}




    a.awards-gallery:hover, a.awards-gallery.active {
        background-position: 0 -33px;
    }

#bookings .book-now, #bookings .book-now a {
    /* background-image:url(../img/book_now.png); */
    background-repeat: no-repeat;
    height: 50px;
    width: 232px;
    text-indent: -9999em;
    float: left;
}


    #bookings .book-now a:hover {
        background-position: 0 -50px;
    }

section#breadcrumbs-wrap {
    width: 100%;
    height: 34px;
    margin: 0 auto;
    background-image: url(../img/breadcrumbs_bg.jpg);
    background-repeat: repeat-x;
}

#breadcrumbs {
    width: 1024px;
    height: 34px;
    margin: 0 auto;
}

div#awards-wrap {
    width: 100%;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    background: url(../img/trans_white.png);
    border-bottom: 1px solid #f1f1f1;
    xz-index: -1;
}

.view-awards {
    width: 987px;
    margin: 0 auto;
    overflow: auto;
    position: relative;
    text-transform: uppercase;
    top: 10px;
}

a#view-awards {
    width: auto;
    height: auto;
    float: left;
    font-family: AvalonDemi, Arial, sans-serif;
}

div#awards {
    width: 987px;
    height: 163px;
    margin: 0 auto;
    overflow: auto;
    position: relative;
    background-image: url(../img/awards/awards_bg.jpg);
    background-repeat: repeat-x;
    top: 21px;
}

#awards-wrap a.close {
    float: right;
    top: 0;
}

a.special-offers {
    background-image: url(../img/btn/btn_special_offers.png);
    background-repeat: no-repeat;
    width: 184px;
    height: 63px;
    text-indent: -9999em;
    position: relative;
    float: right;
    top: 214px;
}

section#special-offers {
    width: 771px;
    height: 222px;
    xdisplay: none;
}

    section#special-offers > div {
        float: left;
        width: 255px;
        height: 245px;
        margin-right: 2px;
        background: #fff; /* backup for non-RGBA */
        background: rgba(255, 255, 255, 0.8);
    }

.offers-heading {
    width: 255px;
    height: 39px;
    background: url(../img/offers/offers_heading.jpg);
    background-repeat: no-repeat;
    float: left;
}

.offers-image {
    width: 255px;
    /* height: 111px; */
    height: 51px;
    background-repeat: no-repeat;
    margin-top: 39px;
}

section#special-offers p {
    margin: 5px 10px 10px 10px;
    line-height: 14px;
}

section#special-offers h3 {
    font-size: 1.2em;
    color: #fff;
    font-weight: normal;
    margin: 13px;
    background: url('../img/offers/arrow.html');
    background-repeat: no-repeat;
    background-position: right;
}

    section#special-offers h3 a {
        color: #fff;
    }



a.handle {
    top: -4px !important;
    background: url('../img/btn/btn_special_offers.png');
    background-repeat: no-repeat;
    height: 65px;
    width: 183px;
    display: none;
}

.slide-out-div.open a.handle {
    background-position: -2px -89px;
}

.slide-out-div {
    width: 771px;
    z-index: 100;
}

    .slide-out-div a {
        display: block;
    }
/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
    /* required settings */
    position: relative;
    overflow: hidden;
    width: 943px;
    height: 163px;
}

    .scrollable a {
        font-family: 'Georgia', serif;
        position: relative;
        bottom: 0;
    }
    /*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
    .scrollable .items {
        /* this cannot be too large */
        width: 20000em;
        position: absolute;
        clear: both;
    }

.items section {
    float: left;
    width: 949px;
}


    .items section > div {
        background-image: url(../img/scroller_bg.jpg);
        width: 225px;
        height: 148px;
        float: left;
        padding: 15px 0 0 10px;
        border-right: 1px solid #fff;
    }

    .items section p {
        font-weight: normal;
        font-size: 10px;
        padding: 10px 0 10px 10px;
        overflow: auto;
        min-height: 48px;
    }

/* single scrollable item */
.scrollable img {
    float: left;
}


.items section aside {
    float: left;
    text-align: center;
    width: 100px;
    margin: 40px 0 0px 5px;
}

    .items section aside a {
        font-family: "Arial", sans-serif;
    }

/* active item */
.scrollable .active {
    border: 2px solid #000;
    position: relative;
    cursor: default;
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
    float: left;
}

.scroll-nav-left {
    display: block;
    width: 22px;
    height: 163px;
    float: left;
    background: #fff;
}

.scroll-nav-right {
    display: block;
    width: 22px;
    height: 163px;
    float: right;
    background: #fff;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
    background: url(../img/scroller_arrows.png) no-repeat;
    display: block;
    width: 22px;
    height: 163px;
    float: left;
    cursor: pointer;
    font-size: 1px;
}

/* right */
a.right {
    float: right;
    background-position: -22px 0;
    clear: right;
    margin-right: 0px;
}

    a.right:hover {
        background-position: -22px 0px;
    }

    a.right:active {
        background-position: -22px 0px;
    }


/* left */
a.left {
    margin-left: 0px;
}

    a.left:hover {
        background-position: 0px 0;
    }

    a.left:active {
        background-position: 0px 0;
    }

/* disabled navigational button */
a.disabled {
    opacity: .4;
}

#bookings a.noble-house {
    background-image: url(../img/logos/ma_fly_logo.png);
    background-repeat: no-repeat;
    width: 132px;
    height: 32px;
    margin-top: 10px;
    margin-right: -5px;
    text-indent: -9999em;
    float: right;
}

a.noble-house:hover, a.noble-house.active {
    background-position: 0 -33px;
}

/* NHH Logo Update */

#bookings ul {
    list-style: none;
    position: absolute;
    right: 0;
}

#bookings a#hilton-corp {
    margin: 2px 0 0 40px;
    display: block;
    font-size: 12px;
    color: #0f4c10;
    position: relative;
    right: 32px;
    top: 17px;
}

    #bookings a#hilton-corp:hover {
        color: #000000;
        text-decoration: underline;
    }


/* /NHH Logo Update */


#noble-house-wrap a.close {
    float: right;
    top: 8px;
}


#noble-house-wrap {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    background: url(../img/trans_white.png);
    border-bottom: 1px solid #f1f1f1;
    z-index: 1;
}

#noble-house {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    height: 199px;
    width: 987px;
}

/* main vertical scroll */
#noble-house-main {
    position: relative;
    overflow: hidden;
    height: 163px;
    width: 987px;
}

    /* root element for pages */
    #noble-house-main #pages {
        position: absolute;
        height: 20000em;
    }

    /* single page */
    #noble-house-main .page {
        height: 163px;
        background: url(../img/nh/noble_house_bg.jpg) 0 0 repeat-x;
        width: 987px;
    }

    /* root element for horizontal scrollables */
    #noble-house-main .scrollable {
        position: relative;
        overflow: hidden;
        width: 943px;
        height: 163px;
        float: left;
    }

        /* root element for scrollable items */
        #noble-house-main .scrollable .items {
            width: 20000em;
            position: absolute;
            clear: both;
        }

    #noble-house-main .item {
        float: left;
        cursor: pointer;
        width: 945px;
        height: 163px;
        margin-left: 2px;
    }


        /* single scrollable item */
        #noble-house-main .item div {
            float: left;
            width: 188px;
            height: 163px;
            text-align: center;
            border-right: 1px solid #fff;
        }



    /* Noble House Hotel Properties */

    #noble-house-main .hotels .item div a {
        background: url('../img/nh/nh_hotels.png');
        background-repeat: no-repeat;
        width: 186px;
        height: 134px;
        float: left;
        text-indent: -9999em;
    }





    #noble-house-main .restaurants .item div a {
        background: url('../img/nh/nh_restaurants_new.png');
        background-repeat: no-repeat;
        width: 186px;
        height: 134px;
        float: left;
        text-indent: -9999em;
    }




    /* Noble House relax Properties */

    #noble-house-main .relax .item div a {
        background: url('../img/nh/nh_relax.png');
        background-repeat: no-repeat;
        width: 186px;
        height: 134px;
        float: left;
        text-indent: -9999em;
    }

        #noble-house-main .relax .item div a:hover {
            background-position: 0 -134px;
        }


/* main navigator */
#noble-house #main_navi {
    float: left;
    padding: 0px !important;
    margin: 0px !important;
}


    #noble-house #main_navi li, a#noble-house-corporate-link {
        color: #5A4A42;
        font-size: 12px;
        height: auto;
        display: inline;
        float: left;
        list-style-type: none;
        padding: 10px;
        text-transform: uppercase;
        cursor: pointer;
        font-family: AvalonDemi, Arial, sans-serif;
    }


        #noble-house #main_navi li:hover, a#noble-house-corporate-link:hover {
            color: #911913;
        }

        #noble-house #main_navi li.active {
            color: #911913;
        }


#noble-house .nav-wrap {
    width: 987px;
    position: relative;
    margin: 0 auto;
    float: left;
}

/* prev, next, prevPage and nextPage buttons */
.custom {
    display: block;
    width: 22px;
    height: 163px;
    cursor: pointer;
    font-size: 1px;
    outline: none;
    border: none;
    background: #fff url('../img/scroller_arrows.png');
    background-repeat: no-repeat;
    text-indent: -9999em;
}

.prev {
    background-position: 0px 0;
    float: left;
    left: 0;
    position: relative;
}

    /* mouseover state */
    .prev:hover {
        background-position: 0 0;
        cursor: pointer;
    }

/* next button uses another background image */
.next {
    background-position: -22px 0;
    float: right;
    right: 0;
    cursor: pointer;
}

    .next:hover {
        background-position: -22px 0;
    }

/* disabled navigational button */
.custom .disabled {
    opacity: .4;
}







/*	--------------------------------------------------
	Reveal Modals
	-------------------------------------------------- */

.reveal-modal-bg {
    position: fixed;
    height: 100%;
    width: 100%;
    background: url('../img/black_trans.png');
    z-index: 2000;
    display: none;
    top: 0;
    left: 0;
}

.reveal-modal {
    visibility: hidden;
    top: 100px;
    left: 50%;
    margin-left: -300px;
    width: auto;
    background: #eee url(modal-gloss.html) no-repeat -200px -80px;
    position: absolute;
    z-index: 2001;
    padding: 10px 5px 5px 5px;
}

#booking.reveal-modal {
    visibility: hidden;
    top: 100px;
    left: 46%;
    margin-left: -300px;
    width: auto;
    background: none;
    position: absolute;
    z-index: 2001;
    padding: 0;
}

.reveal-modal h1 {
    font-size: 16px;
    margin-bottom: 5px;
}

.reveal-modal.small {
    width: 200px;
    margin-left: -140px;
}

.reveal-modal.medium {
    width: 400px;
    margin-left: -240px;
}

.reveal-modal.large {
    width: 600px;
    margin-left: -340px;
}

.reveal-modal.xlarge {
    width: 800px;
    margin-left: -440px;
}

.reveal-modal .close-reveal-modal {
    font-size: 22px;
    line-height: .5;
    position: absolute;
    top: 8px;
    right: 11px;
    color: #aaa;
    text-shadow: 0 -1px 1px rgb(0,0,0,.6);
    font-weight: bold;
    cursor: pointer;
}

#booking.reveal-modal .close-reveal-modal {
    font-size: 22px;
    text-indent: -9999em;
    line-height: .5;
    position: absolute;
    background: url('../img/booking/booking_close.html');
    width: 16px;
    height: 16px;
    top: 22px;
    right: 22px;
    color: #aaa;
    text-shadow: 0 -1px 1px rbga(0,0,0,.6);
    font-weight: bold;
    cursor: pointer;
}

/*
		
	NOTES
	
	Close button entity is ×
	
	Example markup
	
	<div id="myModal" class="reveal-modal">
		<h2>Awesome. I have it.</h2>
		<p class="lead">Your couch.  I it's mine.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
		<a class="close-reveal-modal">&#215;</a>
	</div>
	
	*/












pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 15px;
}

textarea {
    overflow: auto;
}

.ie6 legend, .ie7 legend {
    margin-left: -7px;
}

input[type="radio"] {
    vertical-align: text-bottom;
}

input[type="checkbox"] {
    vertical-align: bottom;
}

.ie7 input[type="checkbox"] {
    vertical-align: baseline;
}

.ie6 input {
    vertical-align: text-bottom;
}

label, input[type="button"], input[type="submit"], input[type="image"], button {
    cursor: pointer;
}

button, input, select, textarea {
    margin: 0;
}

    input:valid, textarea:valid {
    }

    input:invalid, textarea:invalid {
        border-radius: 1px;
        -moz-box-shadow: 0px 0px 5px red;
        -webkit-box-shadow: 0px 0px 5px red;
        box-shadow: 0px 0px 5px red;
    }

.no-boxshadow input:invalid, .no-boxshadow textarea:invalid {
    background-color: #f0dddd;
}


::-moz-selection {
    background: #a5ad4e;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #a5ad4e;
    color: #fff;
    text-shadow: none;
}

a:link {
    -webkit-tap-highlight-color: #a5ad4e;
}

button {
    width: auto;
    overflow: visible;
}

.ie7 img {
    -ms-interpolation-mode: bicubic;
}

body {
    color: #444;
    background: url('../img/bookings_bg.gif');
}

select, input, textarea {
    color: #444;
    background: #fff;
}

h1, h2, h3, h4, h5, h6 {
    xfont-weight: bold;
}

a, a:active, a:visited {
    color: #a5ad4e;
    text-decoration: none;
}

    a:hover {
        color: #a5ad4e;
    }



/**
 * Primary styles
 *
 * Author: 
 */

.ir {
    display: block;
    text-indent: -999em;
    overflow: hidden;
    background-repeat: no-repeat;
    text-align: left;
    direction: ltr;
}

.hidden {
    display: none;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }

.invisible {
    visibility: hidden;
}

.clearfix:before, .clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}


@media all and (orientation:portrait) {
}

@media all and (orientation:landscape) {
}

@media screen and (max-device-width: 480px) {

    /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}


@media print {
    * {
        background: transparent !important;
        color: black !important;
        text-shadow: none !important;
        filter: none !important;
        -ms-filter: none !important;
    }

    a, a:visited {
        color: #444 !important;
        text-decoration: underline;
    }

        a[href]:after {
            content: " (" attr(href) ")";
        }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
        content: "";
    }

    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr, img {
        page-break-inside: avoid;
    }

    @page {
        margin: 0.5cm;
    }

    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }

    h2, h3 {
        page-break-after: avoid;
    }
}

/*** BOOKING ***/


/* book wrap starts */
.cell td {
    padding: 10px;
}

div#bookit-wrap {
    color: #fff;
    font: bold 12px Arial, Helvetica, sans-serif;
    top: 0px;
    width: 275px;
    height: 300px;
    margin-left: -137px;
    overflow: hidden;
    position: absolute;
    z-index: 1002;
    background: url(../images/bookit-bg.jpg) no-repeat center #036;
}

    div#bookit-wrap input, select {
        font: bold 13px Arial, Helvetica, sans-serif;
        border: 1px solid #fff;
    }

    div#bookit-wrap button {
        width: 235px;
        height: 30px;
        border: none;
        background: url(../images/availability_btn.jpg) no-repeat center transparent;
    }

    div#bookit-wrap div {
        clear: both;
        width: 235px;
    }

    div#bookit-wrap .bookit-check {
        margin: 15px 0px 15px 0px;
        width: 235px;
        height: 20px;
    }

    div#bookit-wrap .bookit-children {
        width: 117px;
    }

    div#bookit-wrap .bookit-adult {
        padding-right: 8px;
    }

    div#bookit-wrap .bookit-check label {
        float: left;
        width: 81px;
        margin: 8px 0px 20px 0px;
    }

    div#bookit-wrap label {
        float: left;
    }

    div#bookit-wrap .bookit-destination {
        width: 235px;
        margin: 15px 20px 15px 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #999;
    }

        div#bookit-wrap .bookit-destination select {
            width: 235px;
            height: 35px;
            padding: 5px;
        }

    div#bookit-wrap .bookit-date {
        margin: 15px 20px 15px 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #999;
    }

    div#bookit-wrap .bookit-people-container {
        width: 235px;
        margin: 15px 20px 15px 20px;
    }

    div#bookit-wrap .bookit-people {
        float: left;
        clear: none;
    }

        div#bookit-wrap .bookit-people label {
            padding: 8px 8px 15px 0px;
        }

    div#bookit-wrap .bookit-promocode input {
        width: 260px;
        margin: 15px 15px 0px 15px;
    }

    div#bookit-wrap .bookit-availability button {
        width: 235px;
        margin: 15px 20px 15px 20px;
    }

.customStyleSelectBox {
    /* Styles For Your Select Box */
    height: 22px;
    width: 235px;
    background: url(../images/select-arrow.jpg) no-repeat center right #fff;
    color: #666;
    cursor: pointer;
    padding: 8px 0px 0px 0px;
}

.customOption {
    /* You can use this if you want a different style after user has made a selection */
    padding: 8px 0px 0px 8px;
}

/* on the next line we add a down arrow on the right to indicate that it is a select box */
.customStyleSelectBoxInner {
    height: 30px;
    width: 30px;
    float: right;
    cursor: pointer;
}

@-moz-document url-prefix() {
    div#book-wrap {
        height: 436px;
    }
}

a.book-link {
    font-size: 12px;
}

.view-book {
    width: 1007px;
    margin: 0 auto;
    overflow: auto;
    position: relative;
    text-transform: uppercase;
    top: 10px;
}

a#view-book {
    width: auto;
    height: auto;
    float: left;
}

div#book {
    width: 1007px;
    height: 163px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    background-image: url(../images/book/book_bg.html);
    background-repeat: repeat-x;
    top: 21px;
}

#book-wrap a.close {
    position: relative;
    z-index: 1;
    float: right;
    top: 0;
}

#book .scrollable {
    position: relative;
    overflow: hidden;
    width: 955px;
    height: 163px;
    float: left;
}

    #book .scrollable a {
        font-family: 'Georgia', serif;
        position: relative;
        bottom: 0;
    }

    /*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
    #book .scrollable .items {
        /* this cannot be too large */
        width: 20000em;
        position: absolute;
        clear: both;
    }

#book .items section {
    float: left;
    width: 960px;
}


    #book .items section > div {
        background-image: url(../images/scroller_bg.html);
        background-repeat: no-repeat;
        width: 229px;
        height: 164px;
        float: left;
        padding: 15px 0;
        margin: 0 0 0 10px;
        border-right: 1px solid #fff;
    }

    #book .items section p {
        font-weight: normal;
        font-size: 10px;
        padding: 10px 0 10px 10px;
        overflow: auto;
    }

/* single scrollable item */
#book .scrollable img {
    float: left;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

#book .items section aside {
    float: left;
    text-align: center;
    width: 100px;
    margin: 0px 5px;
}

    #book .items section aside a {
        font-family: "Arial", sans-serif;
    }

/* active item */
#book .scrollable .active {
    border: 2px solid #000;
    position: relative;
    cursor: default;
}

#book .scroll-nav-left {
    display: block;
    width: 22px;
    height: 163px;
    float: left;
    background: #fff;
}

#book .scroll-nav-right {
    display: block;
    width: 22px;
    height: 163px;
    float: right;
    background: #fff;
}

/* book wrap ends */


section#bookings-wrap {
    width: 100%;
    height: 50px;
    margin: 0 auto;
    /* background: url(/images/bookings_bg.gif) repeat-x scroll #333; */
    background: url("../img/bookings_bg.png") repeat scroll 0 0 #FFFFFF;
    background-repeat: repeat;
    -webkit-box-shadow: 0px -7px 7px -7px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px -7px 7px -7px rgba(0, 0, 0, 0.5);
    box-shadow: 0px -7px 7px -7px rgba(0, 0, 0, 0.5);
}

#bookings-locations {
    position: absolute;
    left: 0px;
    width: 188px;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
}

#bookings {
    width: 1024px;
    height: 50px;
    margin: 0 auto;
    z-index: 2000;
}

    #bookings > div {
        float: left;
        width: 407px;
        height: 50px;
    }

a.awards-gallery {
    background-image: url(../images/btn/btn_awards.gif);
    background-repeat: no-repeat;
    width: 330px;
    height: 40px;
    margin-top: 5px;
    text-indent: -9999em;
    position: absolute;
    left: 24px;
}

    a.awards-gallery:hover, a.awards-gallery.active {
        background-position: 0 -40px;
    }

#bookings .book-now {
    background-image: url(../images/book_now.jpg);
    background-repeat: no-repeat;
    height: 50px;
    width: 210px;
    text-indent: -9999em;
    float: left;
}

a.book-now:hover, a.book-now.active {
    background-position: 0 -50px;
}

input.dp-applied {
    width: 121px;
    height: 28px;
    float: left;
}

/*************************************************
dropdowns
*************************************************/
.wrapper-dropdown {
    position: relative;
    width: 219px !important;
    font-size: 13px;
    padding: 6px !important;
    background: #fff;
    margin-top: 0px !important;
    border: 2px solid #d5d5d5;
    cursor: pointer;
    color: #444;
    outline: none;
    float: left;
}

#month-dd {
    margin: 0 !important;
}

.wrapper-dropdown:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -6px;
    border-width: 10px 10px 0 10px;
    border-style: solid;
    border-color: #d5d5d5 transparent;
}

.wrapper-dropdown .dropdown {
    /* Size & position */
    position: absolute;
    z-index: 9999;
    top: 100%;
    left: 0; /* Size */
    right: 0; /* Size */
    /* Styles */
    background: #fff;
    font-weight: normal; /* Overwrites previous font-weight: bold; */
    /* Hiding */
    display: none;
    pointer-events: none;
    max-height: 200px;
    overflow: auto;
    border: 2px solid #d5d5d5;
}

    .wrapper-dropdown .dropdown li {
        list-style: none;
    }

        .wrapper-dropdown .dropdown li.title a {
            font-weight: bold;
            padding: 10px 10px 0px 10px !important;
        }

        .wrapper-dropdown .dropdown li a {
            display: block;
            text-decoration: none;
            color: #666;
            padding: 3px 10px;
        }

        /* Hover state */
        .wrapper-dropdown .dropdown li:hover a {
            background: #f3f8f8;
        }

.wrapper-dropdown.active .dropdown {
    display: block;
    pointer-events: auto;
}

.cb-slideshow,
.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}

    .cb-slideshow:after {
        content: '';
        background: transparent url(../images/pattern.png) repeat top left;
    }

    .cb-slideshow li span {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        color: transparent;
        background-size:cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        opacity: 0;
        z-index: 10;
        -webkit-backface-visibility: hidden;
        -webkit-animation: imageAnimation 110s linear infinite 0s;
        -moz-animation: imageAnimation 110s linear infinite 0s;
        -o-animation: imageAnimation 110s linear infinite 0s;
        -ms-animation: imageAnimation 110s linear infinite 0s;
        animation: imageAnimation 110s linear infinite 0s;
    }

    .cb-slideshow li div {
        z-index: 1000;
        position: absolute;
        bottom: 30px;
        left: 0px;
        width: 100%;
        text-align: center;
        opacity: 0;
        color: #fff;
        -webkit-animation: titleAnimation 110s linear infinite 10s;
        -moz-animation: titleAnimation 110s linear infinite 10s;
        -o-animation: titleAnimation 110s linear infinite 10s;
        -ms-animation: titleAnimation 110s linear infinite 10s;
        animation: titleAnimation 110s linear infinite 10s;
    
    }

        .cb-slideshow li div h3 {
            font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
            font-size: 240px;
            padding: 0;
            line-height: 200px;
        }

    .cb-slideshow li:nth-child(1) span {
        background-image: url(../img/slides/1.jpg);
    }

    .cb-slideshow li:nth-child(2) span {
        background-image: url(../img/slides/2.jpg);
        -webkit-animation-delay: 10s;
        -moz-animation-delay: 10s;
        -o-animation-delay: 10s;
        -ms-animation-delay: 10s;
        animation-delay: 10s;
    }

    .cb-slideshow li:nth-child(3) span {
        background-image: url(../img/slides/3.jpg);
        -webkit-animation-delay: 20s;
        -moz-animation-delay: 20s;
        -o-animation-delay: 20s;
        -ms-animation-delay: 20s;
        animation-delay: 20s;
    }

    .cb-slideshow li:nth-child(4) span {
        background-image: url(../img/slides/4.jpg);
        -webkit-animation-delay: 30s;
        -moz-animation-delay: 30s;
        -o-animation-delay: 30s;
        -ms-animation-delay: 30s;
        animation-delay: 30s;
    }

    .cb-slideshow li:nth-child(5) span {
        background-image: url(../img/slides/5.jpg);
        -webkit-animation-delay: 40s;
        -moz-animation-delay: 40s;
        -o-animation-delay: 40s;
        -ms-animation-delay: 40s;
        animation-delay: 40s;
    }

    .cb-slideshow li:nth-child(6) span {
        background-image: url(../img/slides/6.jpg);
        -webkit-animation-delay: 50s;
        -moz-animation-delay: 50s;
        -o-animation-delay: 50s;
        -ms-animation-delay: 50s;
        animation-delay: 50s;
    }

    .cb-slideshow li:nth-child(7) span {
        background-image: url(../img/slides/7.jpg);
        -webkit-animation-delay: 60s;
        -moz-animation-delay: 60s;
        -o-animation-delay: 60s;
        -ms-animation-delay: 60s;
        animation-delay: 60s;
    }

    .cb-slideshow li:nth-child(8) span {
        background-image: url(../img/slides/8.jpg);
        -webkit-animation-delay: 70s;
        -moz-animation-delay: 70s;
        -o-animation-delay: 70s;
        -ms-animation-delay: 70s;
        animation-delay: 70s;
    }

    .cb-slideshow li:nth-child(9) span {
        background-image: url(../img/slides/9.jpg);
        -webkit-animation-delay: 80s;
        -moz-animation-delay: 80s;
        -o-animation-delay: 80s;
        -ms-animation-delay: 80s;
        animation-delay: 80s;
    }
    .cb-slideshow li:nth-child(10) span {
        background-image: url(../img/slides/10.jpg);
        -webkit-animation-delay: 90s;
        -moz-animation-delay: 90s;
        -o-animation-delay: 90s;
        -ms-animation-delay: 90s;
        animation-delay: 90s;
    }
    .cb-slideshow li:nth-child(11) span {
        background-image: url(../img/slides/11.jpg);
        -webkit-animation-delay: 100s;
        -moz-animation-delay: 100s;
        -o-animation-delay: 100s;
        -ms-animation-delay: 100s;
        animation-delay: 100s;
    }

    

    .cb-slideshow li:nth-child(2) div {
        -webkit-animation-delay: 10s;
        -moz-animation-delay: 10s;
        -o-animation-delay: 10s;
        -ms-animation-delay: 10s;
        animation-delay: 10s;
    }

    .cb-slideshow li:nth-child(3) div {
        -webkit-animation-delay: 20s;
        -moz-animation-delay: 20s;
        -o-animation-delay: 20s;
        -ms-animation-delay: 20s;
        animation-delay: 20s;
    }

    .cb-slideshow li:nth-child(4) div {
        -webkit-animation-delay: 30s;
        -moz-animation-delay: 30s;
        -o-animation-delay: 30s;
        -ms-animation-delay: 30s;
        animation-delay: 30s;
    }

    .cb-slideshow li:nth-child(5) div {
        -webkit-animation-delay: 40s;
        -moz-animation-delay: 40s;
        -o-animation-delay: 40s;
        -ms-animation-delay: 40s;
        animation-delay: 40s;
    }

    .cb-slideshow li:nth-child(6) div {
        -webkit-animation-delay: 50s;
        -moz-animation-delay: 50s;
        -o-animation-delay: 50s;
        -ms-animation-delay: 50s;
        animation-delay: 50s;
    }

    .cb-slideshow li:nth-child(7) div {
        -webkit-animation-delay: 60s;
        -moz-animation-delay: 60s;
        -o-animation-delay: 60s;
        -ms-animation-delay: 60s;
        animation-delay: 60s;
    }

    .cb-slideshow li:nth-child(8) div {
        -webkit-animation-delay: 70s;
        -moz-animation-delay: 70s;
        -o-animation-delay: 70s;
        -ms-animation-delay: 70s;
        animation-delay: 70s;
    }

    .cb-slideshow li:nth-child(9) div {
        -webkit-animation-delay: 80s;
        -moz-animation-delay: 80s;
        -o-animation-delay: 80s;
        -ms-animation-delay: 80s;
        animation-delay: 80s;
    }
    .cb-slideshow li:nth-child(10) div {
        -webkit-animation-delay: 90s;
        -moz-animation-delay: 90s;
        -o-animation-delay: 90s;
        -ms-animation-delay: 90s;
        animation-delay: 90s;

    }
        .cb-slideshow li:nth-child(11) div {
        -webkit-animation-delay: 100s;
        -moz-animation-delay: 100s;
        -o-animation-delay: 100s;
        -ms-animation-delay: 100s;
        animation-delay: 100s;

    }


    
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: ease-in;
    }

    8% {
        opacity: 1;
        -webkit-animation-timing-function: ease-out;
    }

    17% {
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-moz-keyframes imageAnimation {
    0% {
        opacity: 0;
        -moz-animation-timing-function: ease-in;
    }

    8% {
        opacity: 1;
        -moz-animation-timing-function: ease-out;
    }

    17% {
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-o-keyframes imageAnimation {
    0% {
        opacity: 0;
        -o-animation-timing-function: ease-in;
    }

    8% {
        opacity: 1;
        -o-animation-timing-function: ease-out;
    }

    17% {
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes imageAnimation {
    0% {
        opacity: 0;
        -ms-animation-timing-function: ease-in;
    }

    8% {
        opacity: 1;
        -ms-animation-timing-function: ease-out;
    }

    17% {
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes imageAnimation {
    0% {
        opacity: 0;
        animation-timing-function: ease-in;
    }

    8% {
        opacity: 1;
        animation-timing-function: ease-out;
    }

    17% {
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
    0% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    17% {
        opacity: 1;
    }

    19% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-moz-keyframes titleAnimation {
    0% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    17% {
        opacity: 1;
    }

    19% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-o-keyframes titleAnimation {
    0% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    17% {
        opacity: 1;
    }

    19% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes titleAnimation {
    0% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    17% {
        opacity: 1;
    }

    19% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes titleAnimation {
    0% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    17% {
        opacity: 1;
    }

    19% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span {
    opacity: 1;
}

@media screen and (max-width: 1140px) {
    .cb-slideshow li div h3 {
        font-size: 140px;
    }
}

@media screen and (max-width: 600px) {
    .cb-slideshow li div h3 {
        font-size: 80px;
    }
}