]> html { clear:both; overflow:auto; overflow-x:auto; overflow-y:auto; padding:0px; } * { } html { background-color:#222; background-image:url(https://static.wixstatic.com/media/99ffdc_44ee34a007b3480597eaf7f441ff031a~mv2.jpg); background-size:cover; background-repeat:no-repeat; background-position:center; background-attachment:fixed; overflow:initial; overflow-x:initial; overflow-y:initial; } body { background-color: #222; background-image: url(https://static.wixstatic.com/media/99ffdc_44ee34a007b3480597eaf7f441ff031a~mv2.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; font-family: 'Open Sans', sans-serif; margin: 0px; min-height: 100%; -webkit-tap-highlight-color: rgba(255,255,255,0); overscroll-behavior-y: contain; } div.footer { height:180px; } a.hup-hide-small-logo { left: 0px; position: relative; } img.hup-logo { width: 750px; max-width: 100%; } .hup-bar .hup-bar-item.hup-hide-small-logo:hover { border-bottom: 0; background-color: transparent !important; margin-left: 0px; } .hup-bar .hup-bar-item { height: 90px; padding-top: 32px !important; background-color: transparent; } .hup-house-keeping { margin-top: 32px; } iframe.hup-frame { position: relative; width: 100%; border: 0px; padding-left: 0px; height: 300px; border-top: solid 1px #253e5c; display: block; } div.side-bar { display: flex; flex-direction: row; position: fixed; left: 6px; top: -10px; margin-top: 0px; height: 238px; /* width: 40px; */ justify-content: center; z-index: 200; margin-left: 0px; width: 300px; height: 65px; } div.side-bar div { border: solid 1px #48916f; border-radius: 0 0 35px 35px; color: #fff; flex-basis: 30%; padding: 4px; margin-bottom: 4px; padding-top: 4px; font-size: 2em; text-align: center; cursor: pointer; background-color: #333; margin: 2px; margin-bottom: 0px; } div.side-bar div.selected { background-color: #fff; color: #333; } #saleForm { margin-bottom: 400px; } #key p, #key h3 { color: #222; } div.group { display:inline-block; position:relative; margin-left:8px; margin-top:60px; } div.group h2 { color:#fff; font-weight:300; position:absolute; top:-60px; } div.lodges { border:solid #333 1px; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; cursor:pointer; position:absolute; border-radius: 10px; } div.lodges p { color:#fff; font-size:1em; text-align:center; height:100%; margin:0px; border-radius: 10px; } div.loch { border:solid #333 1px; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:10px; cursor:pointer; position:absolute; } div.loch p { color:#fff; font-size:1em; text-align:center; height:100%; margin:0px; border-radius: 10px; } div.hotel { border:solid #333 1px; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; cursor:pointer; position:absolute; border-radius: 10px; } div.hotel p { color:#fff; font-size:1em; text-align:center; height:100%; margin:0px; border-radius: 10px; } div.coach { border:solid #333 1px; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:10px; cursor:pointer; position:absolute; } div.coach p { color:#fff; font-size:1em; text-align:center; height:100%; margin:0px; border-radius: 10px; } .hup-buildings { display:inline-block; list-style-type:none; } div.hup-top { position:relative; } .hup-bar .hup-bar-item.hup-hide-small-logo { display:block !important; padding-top: 0px !important; float: none !important; } input.hup-search { background-color:transparent; border:0; border-bottom:solid #ddd 2px; color:#fff; font-family:'Open Sans', sans-serif; font-size:1.4em; outline:none; } .hup-active { color:#333; } .hup-bar { } .hup-bar .hup-bar-item.hup-active:hover { background: #fff !important; color: #253e5c; } .hup-no-list { list-style-type:none; margin:0px; padding:0px; } .hup-star-rating { cursor:pointer; display:flex; font-size:3em; text-align:center; width:400px; margin:0 auto; flex-direction:row-reverse; } .hup-star-rating i { margin:16px; } .hup-star-rating i:hover { color:#fff; } .hup-star-rating i:hover ~ i { color:#fff; } .hup-star-rating i.selected { color:#fff; } #guestSurvey p { color:#fff; } ul.offers { } li.offer { color:#fff; cursor:pointer; display:inline-block; margin:8px; padding:8px; } li.offer i { color:#333; } li.offer:hover { color:#fff; } li.offer.selected { border:solid #fff 1px; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; color:#fff; } li.offer.selected i { color:#fff; } .hup-auto-center { float:initial; margin:0 auto; } ul.nations { } li.nation { color:#fff; cursor:pointer; display:inline-block; margin:8px; padding:8px; } li.nation i { color:#333; } li.nation:hover { color:#fff; } li.nation.selected { border:solid #fff 1px; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; color:#fff; } li.nation.selected i { color:#fff; } ul.nationSelect { } ul.nationSelect li { background-color:#fff; color:#333; cursor:pointer; } label { color:#fff; } .room-menu { display:none; position:fixed; left:50%; right:16px; top:80px; bottom:0; width:500px; margin-left:-258px; padding:16px; z-index:6; } .room-menu h3 { background-color:#fff; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; color:#253e5c; text-align:center; } .room-menu ul { background-color:#fff; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; display:none; list-style-type:none; margin:0; padding:0; } .room-menu ul li { border:solid #ccc 1px; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; cursor:pointer; font-size:1.5em; padding:16px; } .room-menu ul li:hover { background-color:#253e5c; color:#fff; } .room-menu ul.top-menu { display:block; } .room-menu ul.maintenance { } .room-menu ul.hk-still-need { } .room-menu div.options { color:#253e5c; font-size:2em; position:absolute; width:464px; margin-top:16px; } .room-menu div.options .back-menu { cursor:pointer; display:none; float:left; margin-left:16px; } .room-menu div.options .close-menu { cursor:pointer; float:right; margin-right:16px; } .room-menu ul.hk li div { border:1px solid #000; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; float:right; height:10px; width:10px; margin:16px; } ul#key { text-align:center; list-style-type:none; margin: 0px; } ul#key li { display:inline-block; margin:4px; width: 120px; } ul#key li div { border:solid #333 2px; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; padding:6px; } .hup-sending { display:none; } .hup-sending-fail { display:none; } .hup-sending-success { display:none; } p { color:#fff; } h3 { color:#fff; } h2 { color:#fff; } table { color:#fff; } ul.searchRes { margin:0px; padding:0px; text-align: left; } ul.searchRes li { background-color:#fff; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; list-style-type:none; position:relative; margin-top:8px; padding-right: 148px; color:#333; } ul.searchRes li p { color:#333; } ul.searchRes li h3 { color:#333; } ul.searchRes li.voucher { border:solid 3px #00A4CC; } ul.searchRes li.registration { border: solid 3px #a1a1a1; } ul.searchRes li.booking { border:solid 3px #253e5c; } ul.searchRes li.siros { border:solid 2px #253e5C; padding-left:8px; } ul.searchRes li div.sale { position:relative; padding-left:8px; } ul.searchRes li div.sale.sold { border-top:solid 2px #ddd; } ul.searchRes li div.book { text-align:right; position:absolute; right:10px; top:24px; z-index:2; padding-left:8px; } ul.searchRes li.no-results { font-size: 20px; text-align: center; padding-right: 0px; background: transparent; } ul.searchRes li.no-results h3 { color: #a93b3b; font-weight: 300; } ul.searchRes li div.options { text-align: right; position: absolute; right: 8px; top: 0px; bottom: 0px; width: 132px; padding-left: 8px; z-index: 2; display: flex; flex-direction: column; border-left: solid 1px #ddd; } ul.searchRes li div.options button { margin-bottom: 0px !important; font-size: 14px; background-color: transparent; border: solid 1px #ddd; color: #333; } ul.searchRes li div.options button.bookButton { border: 2px solid #253e5c; background: #5e6c4f; color: #fff; } ul.searchRes li div.options button.addNotes { border: 2px solid #cebfe9; background-color: rgba(206, 190, 233, 0.25); } ul.searchRes li div.book.booked { border-bottom:solid 2px #ddd; text-align:center; position:relative; right:0px; top:0px; z-index:2; } span.searchHigh { background:#f6ff8a; color: #333; } div.bookButton { display: inline-block; padding-bottom: 6px; } ul.searchRes li div.reg { position:relative; padding-left:8px; } ul.searchRes li div.reg + div.sale { border-top: 2px solid #ddd; } h3 span.soldDate { font-size: 13px; } div.hup-container-sales { text-align: center; margin-bottom: 48px; } div.hup-history-section h3 span.amount { font-size: 42px; } div.salesRegisteredSection { text-align: center; margin-left: 4px; margin-right: 4px; display: inline-block; overflow: hidden; } div.salesRegisteredSection.listVisible { display:block; } div.salesRegisteredSection.listNotVisible { display: none; } div.salesRegisteredSection.listVisible h2.salesRegistered { display: block; border-bottom: 0; font-size: 28px; border-bottom: 1px solid #333; height: 60px; transition: height 0.50s ease-in; width: auto; } div.salesRegisteredSection.listVisible h2.salesRegistered.listVisible i { display: none; } h2.salesRegistered i { display: none; font-size: 16px; margin-left: 10px; font-weight: 300; } h2.salesRegistered { height: 0px; transition: height 0.50s ease-out; color: #999; cursor: pointer; font-size: 24px; margin: 0px; padding-left: 16px; padding-right: 16px; width: 0px; } h2.salesRegistered.highlight i { display: inline-block; } h2.salesRegistered.highlight { color: #fff; font-size: 28px; border-bottom: solid 3px #333; display: inline-block; height: 50px; background: #222; width: auto; } div.hup-trans-booked-flag { border: #222 solid 2px; padding-left: 8px; padding-right: 8px; border-radius: 10px; margin-left: 16px; padding-top: 0px; background: seagreen; } div.hup-trans-reg-flag { border: #222 solid 2px; padding-left: 8px; padding-right: 8px; border-radius: 10px; margin-left: 16px; padding-top: 0px; background: #562e8b; } div.hup-seller.not-sold { background: red; padding-left: 8px; padding-right: 8px; border-radius: 10px; margin-left: 0px; } div.date-pick-trans { position: relative; height: 56px; } div.date-pick-trans input { border: 0; cursor: pointer; /* font-size: 0px; */ height: 88%; background: #333; color: #fff; text-align: right; outline: none; margin-left: 48px; width: calc(100% - 50px); outline: none; border-radius: 10px; padding-right: 4px; color-scheme: dark; } div.date-pick-trans .date-value-overlay { position: absolute; width: 90%; top: 0px; left: 0px; background: #222; pointer-events: none; height: 88%; padding-top: 3px; border-radius: 10px 0 0 10px; border: solid 1px #333; } div.reg h4 { color: #ca2727; padding-left: 8px; padding-right: 8px; margin-top: 16px; margin-bottom: 16px; margin-right: 132px; animation: blinker 0s linear infinite; } div.sale h4 { color: #ca2727; padding-left: 8px; padding-right: 8px; margin-top: 16px; margin-bottom: 16px; margin-right: 132px; } div.name { display: flex; margin-left: 12px; } div.name div { font-size:20px; flex-grow: 1; } div.hup-history-section > h3 { max-width: 350px; margin: 0 auto; position: relative; text-align: center; } div.hup-history-section h3 .hup-trans-last { position: absolute; left: -38px; top: 6px; padding: 8px; cursor: pointer; } div.hup-history-section h3 .hup-trans-next { position: absolute; right: -38px; top: 6px; padding: 8px; cursor: pointer; } div.hup-history-section h3 .hup-trans-next.disabled { color: #222; } div.hup-history-section ul.hup-trans-list { margin: 0; padding: 12px; position: relative; margin-bottom: 32px; margin-left: 16px; margin-right: 16px; border: solid 1px; border-radius: 16px; padding-left: 8px; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item { display: flex; color: #fff; cursor: pointer; flex-wrap: wrap; border: solid 1px transparent; border-radius: 8px; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item.selected { border: solid 1px #999; border-radius: 8px; background: #333; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item:hover { border: solid 1px #999; border-radius: 8px; background: #333; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.hup-voucher { width: 150px; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.hup-date { margin-right: 12px; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.hup-amount { position: absolute; right: 16px; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div span { display: inline-block; width: 100px; text-align: right; border-left: solid 1px #333; margin-left: 16px; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.name div { font-size: 16px; margin-right: 12px; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.name div:first-child { width: 150px; white-space: nowrap; overflow: hidden; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.name div:hover a { display: block; } div.hup-history-section ul.hup-trans-list li.hup-trans-list-item > div.name div a { display: none; position: absolute; background-color: #333; padding: 16px; } ul.hup-trans-overlay.searchRes { flex-shrink: 0; width: 100%; } @keyframes blinker { 50% { opacity: 0.3; } } ul.searchRes li div.info_OLD { background:#333; border:solid 2px #ddd; -moz-border-radius:10px 0 0 10px; -webkit-border-radius:10px 0 0 10px; -khtml-border-radius:10px 0 0 10px; border-radius:10px 0 0 10px; color:#fff; position:absolute; right:-4px; top:50%; margin-top:12px; padding:8px; } ul.searchRes li div.info { color: #222; position: absolute; right: 10px; top: -11px; border: 0 !important; margin-top: 0px; padding: 8px; width: 142px; text-align: center; } ul.searchRes li div.info.sale { border:solid 2px #00A4CC; border-right:0; top: -2px; } ul.searchRes li div.info.reg { border:solid 2px #EDFF00; border-right:0; } ul.searchRes li div.info.book { border:solid 2px #253e5c; border-right:0; } ul.searchRes li div.info.siros { border:solid 2px #253e5C; border-right:0; } ul.searchRes li h3.confirmation { text-transform: uppercase; } div.newSale { position: relative; } /*@keyframes zoomBasket { 0% { zoom: 0.4; } 100% { zoom: 1; } } ul.searchRes li.sale ul.baskets li { zoom: 0.4; } ul.searchRes li.sale:hover li { animation: zoomBasket; animation-duration: 1.2s; animation-timing-function: linear; animation-fill-mode: forwards; }*/ div.newSale div.hup-logo img { width: 64px !important; margin: 16px; } div.newSale div.bill { display: flex; align-items: center; justify-content: flex-start; } div.newSale div.bill div.total { font-size: 20px; } div.newSale div.bill div.paid { color: green; display: flex; align-items: center; margin: 8px; margin-left: 16px; } div.newSale div.bill div.paid p { color: inherit; font-weight: 700; margin: 4px; } div.newSale div.bill div.paid.unpaid { color: red; } div.newSale div.bill div.paid.unpaid div.addPay { color: #fff; border: solid 1px #302a42; border-radius: 8px; margin-left: 10px; padding: 10px; background: rgb(56 48 75); font-size: 12px; } div.newSale div.hup-sale-payment { margin-left: 120px; border: solid 1px #ddd; border-radius: 8px; padding-left: 8px; padding-right: 8px; margin-bottom: 4px; } div.newSale div.hup-sale-payment img { height: 32px; } div.newSale div.hup-sale-payment span { display: inline-block; margin-right: 16px; font-size: 14px; } div.newSale div.hup-sale-payment.highlight span { font-weight: 700; } div.newSale div.hup-sale-bottom { border-top: solid 1px #ddd; height: 48px; } div.newSale div.hup-sale-bottom div.source { display: inline-block; float: right; margin-top: 8px; } ul.baskets { margin: 0; padding: 0; margin-left: 120px; margin-bottom: 32px; } ul.baskets li { padding-right: 0px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: #ddd; position: relative; } ul.baskets li.notes p { background-color:#fff; text-align: center; font-weight: 700; font-size: 14px; width: 100%; } ul.baskets li h4 { font-size: 14px; margin-top: 6px; margin-bottom: 6px; } ul.baskets li p { margin: 0px; font-size: 12px; } ul.baskets li div.img-cut-out { width: 120px; height: 120px; position: relative; overflow: hidden; background-size: cover; background-position: center; border: solid 1px #ddd; border-radius: 10px 0 0 10px; } ul.baskets li div.img-cut-out img { max-width: 220px; max-height: 230px; display: table-cell; vertical-align: middle; } ul.baskets li div.content { width: calc(100% - 120px); background-color: #fff; border: solid 1px #ddd; border-radius: 0 10px 10px 0; padding-left: 6px; /*margin-left: 150px;*/ } div#guests table { width:100%; } #roomSelect { display:none; list-style-type:none; position:absolute; left:calc(25% + 6px); top:48px; height:260px; overflow-y:auto; padding:0px; } #roomSelect li { background-color:#fff; border:1px solid #ddd; color:#333; cursor:pointer; margin:0px; padding:4px; } #roomSelect li div { border:1px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; float:right; height:24px; width:22px; } #roomSelect li:hover { background-color:#253e5c; color:#fff; } .hup-room-select { position:relative; } .hup-room-select input { border:1px solid #ddd; } .hup-room-select #room { border:1px solid #ddd; margin-left:6px; } .hup-room-select #bookingId { border:1px solid #ddd; } div#roomColour { border:1px solid #ddd; float:left; height:44px; width:23%; margin-left:6px; } .hup-sending-success { text-align:center; } .hup-sending-success .hup-container { text-align:center; } .hup-sending h3 { display: none; } .hup-sending.booking h3.booking { display: block; } .hup-sending.note h3.note { display: block; } .hup-sending.payment h3.payment { display: block; } .hup-sending-fail h3 { display: none; } .hup-sending-fail.booking h3.booking { display: block; } .hup-sending-fail.note h3.note { display: block; } .hup-sending-fail.payment h3.payment { display: block; } .hup-sending-success h3 { display:none; } .hup-sending-success.booking h3.booking { display: block; } .hup-sending-success.note h3.note { display: block; } .hup-sending-success.payment h3.payment { display: block; } .user-comments { border: 2px solid #cebfe9; border-radius: 10px; padding: 8px; font-size: 16px; background-color: rgba(206, 190, 233, 0.25); color: #222222; text-align: left; } .user-comments .user-comment { border-bottom:solid 2px #e2d8f5 } .user-comments .user-comment:last-child { border-bottom: 0; } .user-comments .user-comment .hup-date-time { font-size: 13px; font-weight: 700; } .user-comments .user-comment .hup-user-id { font-size: 16px; font-weight: 700; padding: 8px; display: inline-block; } .user-comments .user-comment p { margin: 2px; color: #222; } .room-menu-bg { background-color:rgba(30, 30, 30, 0.95); background-attachment:fixed; display:none; position:fixed; left:0px; right:0px; top:0px; bottom:0px; z-index:5; filter:blur(100px); box-shadow:inset 0 0 2000px rgba(255, 255, 255, .5); } p.details { display:none; position:absolute; top:20px; width:100%; } .room-info { background-color: #fff; border: 1px solid #ddd; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; text-align: center; margin-bottom: 8px; padding: 16px; min-height: 80px; } .room-info .hk-note { text-align:left; text-indent:8px; } .room-info div.colour { border:1px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; float:left; height:50px; width:134px; padding-top:10px; } div.welcome h2 { font-size:6em; text-align:center; } .hup-input { border:1px solid #ddd; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; } #useVoucher label { float:left; margin-left:24px; } #pettyCash { } #pettyCash div.options { } #pettyCash div.options div { color:#fff; cursor:pointer; display:inline-block; text-decoration:underline; margin-right:16px; } #pettyCash div.options a { color:#fff; cursor:pointer; display:inline-block; text-decoration:underline; margin-right:16px; } #pettyCash div.pettyScroll { height:500px; margin-top:48px; overflow-y:auto; } #pettyCash table { border:1px solid #ddd; display:table; position:relative; width:100%; table-layout:fixed; } #pettyCash table thead tr { } #pettyCash table tbody { } #pettyCash table tbody td.cR { text-align:right; padding-right:16px; } #pettyCash table thead th { background:#333; border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-top:1px solid #ddd; position:sticky; top:0; } #pettyCash table tbody td { border-left:1px solid #ddd; width:15%; } .hup-daily { border:1px solid #ccc; } .room-info .hup-daily { } .hup-white { background-color:#fff; } ul#key li.hk-daily div.hup-white { } ul.menuItem.hk li.hk-daily div.daily { height:60px; width:60px; } #guests div.guestScroll { height:500px; margin-top:48px; overflow-y:auto; } #discountContainer { margin-top: 48px; } #guests table { border: 1px solid #ddd; display: table; position: relative; width: 100%; table-layout: fixed; } #guests table thead tr { } #guests table tbody { } #guests table tbody td.cR { text-align:right; padding-right:16px; } #guests table thead th { background:#333; border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-top:1px solid #ddd; position:sticky; top:0; } #guests table tbody td { border-left:1px solid #ddd; width:15%; } #calendar { position:relative; height:360px; overflow-x:hidden; overflow-y:auto; } #calendarHeading { position:relative; height:48px; overflow:hidden; } #calendarMonth { display:inline-block; float:left; position:relative; height:450px; width:180px; margin-right:-30px; margin-top:48px; overflow:hidden; } .date-pick div.hup-mobile-select { display: none; max-width: 400px; } .date-pick select { background: #333; border: 0; border-bottom: 2px solid #ddd; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; color: #fff; font-size: 1.5em; height: 48px; margin-bottom: 8px; margin-right: 8px; flex-grow: 1; } .date-pick select option { text-align: center; } #addBookingForm { text-align:center; } #datePick { opacity:0; } div.hours { display:block; } #addBookingForm { display:none; } #addBookingForm .stage { display:none; } #addBookingForm table { margin:0 auto; } #addBookingForm table td.hup-hour { border:0; -moz-border-radius:35px; -webkit-border-radius:35px; -khtml-border-radius:35px; border-radius:35px; color:#fff; cursor:pointer; display:inline-block; font-size:1.5em; font-weight:300; text-align:center; width:80px; margin:16px; padding:16px; } #addBookingForm table td { border:1px solid #ddd; -moz-border-radius:35px; -webkit-border-radius:35px; -khtml-border-radius:35px; border-radius:35px; color:#fff; cursor:pointer; display:inline-block; font-size:1.5em; font-weight:300; text-align:center; width:80px; margin:16px; padding:16px; } #addBookingForm table td.hup-blank { background:none !important; border:0; } #addBookingForm table td:hover { background-color:#fff; color:#333; } #addBookingForm table td.selected { background-color:#fff; color:#333; } #addBookingForm table td.hours td.hup-highlight { background:#fff; color:#333; } #addBookingForm table div.mins { display:inline-block; width:auto; } #addBookingForm table div.mins div { border:1px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius:6px; color:#fff; cursor:pointer; display:inline-block; font-size:1.5em; font-weight:300; text-align:center; width:80px; margin:16px; padding:16px; } #addBookingForm table div.mins div.hup-highlight { background:#fff; color:#333; } #addBookingForm table.hup-room-type { border-spacing:8px; } #addBookingForm table.hup-room-type td { display:table-cell; height:160px; width:160px; margin-right:16px; } #addBookingForm table.hup-room { border-spacing:8px; table-layout:fixed; } #addBookingForm table.hup-room td { display:table-cell; height:160px; width:160px; margin-right:16px; } #addBookingForm table td.hup-text { border:0; display:table-cell; width:auto; } #addBookingForm table td.hup-text:hover { background-color:transparent; color:#fff; } #bookTable { border:1px solid #ddd; -moz-border-radius:50%; -webkit-border-radius:50%; -khtml-border-radius:50%; border-radius:50%; color:#fff; cursor:pointer; display:table; font-size:1.5em; font-weight:300; text-align:center; height:200px; width:200px; margin:0 auto;; padding:16px; } #bookTable:hover { background-color:#fff; color:#333; } #bookTable div { display:table-cell; vertical-align:middle; } #restaurantFrame { border:0; position:fixed; left:0px; right:0px; top:80px; bottom:0px; height:calc(100% - 80px); width:100%; } div.offers { display: flex; justify-content: center; } div.your-info { background-color: rgba(0, 0, 0, 0.5); border: solid 2px #333; padding: 8px; margin-left: 12px; margin-right: 12px; border-radius: 8px; margin-bottom: 32px; } div.offers div.offer { display: inline-block; width: 50%; border: solid 2px #333; border-radius: 8px; padding: 8px; margin-right: 8px; margin-bottom: 24px; cursor: pointer; text-align: center; background-color: rgba(0, 0, 0, 0.5); } div.offers div.offer h2 { font-size: 64px; margin-top: 0px; margin-bottom: -32px; } div.offers div.offer p:first-child { margin-top: 0px; } div.offers div.offer div.offer-bottom { display: flex; align-items: center; justify-content: space-between; } div.offers div.offer div.offer-bottom span { border: solid 1px #333; border-radius: 50%; padding: 6px; margin-left: 0px; color: #333; min-width: 42px; background-color: #fff; font-size: 20px; } div.offers div.offer div.offer-bottom div.button-offer { background-color: #253e5c; border-radius: 8px; padding: 8px; color: rgb(30, 30, 30); text-transform: uppercase; font-size: 16px; color: #ddd; padding-left: 12px; padding-right: 12px; } p.view-all-offers { text-decoration: underline; margin-top: 32px; cursor: pointer; } div.offers div.offer div.offer-bottom i { font-size: 24px; color: rgb(30, 30, 30); } div.offers div.offer:hover div.offer-bottom div.button-offer { color: #fff; } .hup-bar .hup-bar-item.hup-colour-even:hover { border-bottom: 7px solid #253e5c; } ul.userMenu { margin-top: 0px; list-style-type: none; padding: 0px; width: 100%; text-align: right; margin-left: 0px; } ul.userChangePassword { max-width: 500px; margin: 0 auto; padding: 0px; } ul.userMenu li { cursor: pointer; display: inline-block; padding-left: 16px; padding-right: 16px; background-color: transparent; } ul.userMenu li h3 { font-size: 18px; } ul.userMenu > li:first-child { border-radius: 0; border-right: 2px solid #333; } ul.userMenu li h3 { margin-top: 0px; margin-bottom: 0px; } ul .userChangePassword { list-style-type: none; padding: 0px; max-width: 400px; margin: 0 auto; } ul.userChangePassword li { display: flex; flex-direction: column; padding: 8px; } ul.userChangePassword li:last-child { display: inline-flex; flex-direction: row; margin-top: 16px; } ul.userChangePassword input.hup-invalid { border-width: 5px; } .hup-change-password .hup-button { border: solid 1px #ddd; border-radius: 35px; margin-right: 8px; margin-left: 8px; } .hup-change-password .hup-button:hover { background-color: rgb(156 204 230) !important; color:#333; } #chartForm { padding-bottom: 380px; } div.hup-chart-header-container { position: fixed; top: 0px; left: 150px; height: 78px; right: 0px; background-color: #333; z-index: 5; } div.hup-chart-menu { position: fixed; top: 0px; left: 0px; height: 78px; width: 150px; background-color: #333; z-index: 6; } div.hup-chart-menu h2 { display: inline-block; width: 42px; margin-left: 4px; text-align: center; cursor: pointer; } div.hup-chart-menu h2.selected { background-color: #fff; border-radius: 10px; color: #222; } div.hup-chart-months { left: 150px; position: relative; margin-top: 0px; } div.hup-chart-month { display: inline-block; height: 46px; color: #fff; font-size: 16px; background-color: #333; position: -webkit-sticky; position: sticky; left: 150px; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } div.hup-chart-month h3 { text-transform: uppercase; font-size: 16px; text-align: left; text-indent: 8px; } div.hup-chart-month h3 span { text-transform: initial; font-size: 13px; text-indent:8px; } .date-pick { max-width: 600px; margin: 0 auto; } #svg g a { cursor: pointer; } #svg g a.selected { stroke: #222; stroke-width: 0.5; } #svg g a:hover { stroke: #222; stroke-width: 0.5; } #chartDatePick { background-color: #222; border: solid 2px #333; position: fixed; top: 80px; left: 0px; z-index: 10; width: 100%; padding-top: 24px; } i.fas.fa-wheelchair { font-size: 0.8em; margin-left: 6px; } div.hup-chart-nights h3 { display: inline-block; font-size: 20px; margin-left: 16px; text-align: center; width: 100px; } div.hup-chart-nights ul { display: inline-block; margin-left: 6px; text-align: center; } div.hup-chart-nights ul li { display: inline-block; padding: 16px; padding-top: 10px; padding-bottom: 10px; margin-left: 8px; text-align: center; border: solid 1px #333; border-radius: 10px; cursor: pointer; } div.hup-chart-nights ul li:hover { background-color: #fff; } div.hup-chart-nights ul li.selected { background-color: #fff; } div.hup-chart-head { position: absolute; top: 0px; z-index: 5; border-bottom: solid 1px #253e5c; } div.hup-chart-data { padding-top: 90px; } div.hup-chart-header { height: 32px; position: relative; background-color: #333; width: 42400px; left: 150px; } div.hup-chart-header div { display: inline-block; border: solid 1px rgba(0,0,0,0.1); color: #fff; font-size: 16px; text-align: center; position: -webkit-sticky; position: sticky; top: 0px; cursor: pointer; border-radius: 35px; box-sizing: border-box; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } div.hup-chart-type { left: 0px; position: relative; z-index: 3; } div.hup-chart-type h3 { display:inline-block; position: -webkit-sticky; position: sticky; text-align: left; left: 16px; font-size: 16px; font-weight: 300; } div.hup-chart-group-bg { position: sticky; left: 0px; top: 0px; background-color: #333; width: 42px; height: 28px; z-index:2; display: inline-block; } .vs-graph { border: solid 1px #333; border-radius: 16px; } /* custom scrollbar */ ::-webkit-scrollbar { width: 20px; } ::-webkit-scrollbar-track { background-color: transparent; } ::-webkit-scrollbar-thumb { background-color: #333; border-radius: 20px; border: 6px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: #253e5c; } .vs-scroll { overflow-x: auto; height: 100px !important; white-space: nowrap; left: 0px; } .date-pick .hup-chart-nights { display: none; } .date-pick.date-nights { height: 116px !important; overflow: hidden; } .date-pick.date-nights .hup-chart-nights { display: block; } div.hup-float { position: absolute; top: -32px; left: -2px; background-color: #ad6400; border: solid 2px #253e5c; color: #fff; font-size: 13px; border-radius: 6px; padding-left: 4px; padding-right: 4px; } div.hup-float.buy-room { padding-left: 4px; padding-right: 6px; top: -2px; left: auto; right: -32px; } .hup-cell-select { height: 28px; position: absolute; left: 0px; top: 0px; border: solid 2px #253e5c; background-color: #ad6400; width: 82px; border-radius: 6px; white-space: nowrap; } .hup-cell-select-detail { border-spacing: 0px; } .hup-cell-select-detail tr { display:none; } .hup-cell-select-detail tr td { display:none; } .hup-cell-select-detail tr.sub-head-row { display:inline-block; } .hup-cell-select-detail tr.sub-head-row td:nth-child(3) { display: block; font-size: 13px; width: 41px; margin-top: -2px; text-align: center; border-right: 1px solid #333; } .vs-graph-year { min-width: 90px; margin-top: 4px; margin-right: 2px; } .vs-graph-year.selected { background-color: #333; } .vs-graph.vs-header { overflow: hidden; position: relative; height: 550px; } .vs-overlay { position:absolute; bottom: 0px; top: 32px; left: 0px; } .vs-graph.multi { overflow: visible; padding: 0px; border-radius: 35px 0px 35px 0; display:inline-block; overflow: hidden; cursor: pointer; } .vs-monthly .vs-graph.multi { overflow: hidden; } .vs-overlay-position .vs-graph { position: absolute; bottom: 0%; height: 100%; width: 100%; border: 0px; } .week-container h3.total.month { display: block; position: relative; left: auto; top: auto; background: transparent; text-align: center; width: auto; } div.name.month { display: block; position: relative; left: auto; top: auto; color: #fff; text-align: center; font-size: 14px; } .vs-underlay .vs-graph .week-container .week { display: none; } .week-container { height: 100%; position: relative; display: inline-block; cursor: pointer; border-radius: 35px 0px 35px 0; } .week-container:hover { background-color: #333; } .week-container.selected { background-color: transparent; } .point-container { position: absolute; bottom: 0px; width: 100%; } .week { position: relative; background-color: #48916f; border-radius: 35px 0px 35px 0; width: 100%; height: 100%; } .week-container .name { position: absolute; top: -16px; color: #fff; white-space: nowrap; display: none; font-size: 0.8em; left: 0px; width: 116px; text-align: center; background-color: #333; border-radius: 0 25px 0 0; } .week-container.start .name { display: block; width: 100%; text-align: center; top: auto; bottom: 2px; left: 4px; background-color: transparent; } .week-container.selected .name { display: block; top: 16px; width: 100%; text-align: center; left: 16px; font-size: 0.8em; background-color: transparent; } .vs-graph.multi .week-container.start .name { display: none; } .week-container.selected.small .name { width: 100%; text-align: center; } .vs_graph:hover .week-container.selected .name { display: none; } .week-container:hover .name { display: block; } .week-container.selected h3 { width: 100%; left: 24px; background-color: transparent; } .week-container.selected h3.total { width: 100%; left: 24px; background-color: transparent; } .week-container h3 { position: absolute; top: -6px; display: none; font-size: 16px; width: 116px; left: 0px; background-color: #333; border-radius: 0 0 25px 0; text-align: center; font-size: 0.8em; } .week-container h3.total { top: 20px; left: 24px; width: 100%; text-align: center; font-size: 0.8em; width: 116px; left: -116px; background-color: #333; border-radius: 25px 25px 0 25px; } .week-container:hover h3 { display: block; } .week-container.selected h3 { display: block; } .vs-graph.multi .week-container.selected h3 { display: none; } .vs-graph.multi .week-container.selected h3.total { display: block; top: 24px; } text.first { pointer-events:none; } .hup-chart-green { background-color: #253e5c !important; color: #fff !important; } .hup-dark-blue { background-color: #253e5c !important; color: #fff !important; } .hup-gray { background-color: #253e5c !important; color: #fff !important; } li.hk-occupied div h3, li.hk-occupied div p { color: #fff !important; } div.hup-graph-drop-down-container { position: absolute; right: 16px; top: 24px; z-index: 5; cursor: pointer; } div.hup-graph-drop-down { border-radius: 16px; padding: 8px; color: #fff; text-align: right; } div.hup-graph-drop-down.selected { background-color: #333; } div.hup-graph-drop-down i { margin-left: 6px; } .hup-graph-drop-down-menu.dropped { display: block; } .hup-graph-drop-down-menu { padding: 0px; margin: 0px; list-style-type: none; display: none; position: absolute; width: 150px; background-color: #333; border: solid 1px #222; right: 0px; } .hup-graph-drop-down-menu li { color: #fff; padding-right: 8px; text-align: right; } .hup-graph-drop-down-menu li:hover { color: #333; background-color: #fff; } .hup-graph-drop-down-menu li.selected { color: #333; background-color: #fff; } div.hup-chart-room { height: 28px; position: relative; background-color: #333; width: 42000px; cursor: pointer; } div.hup-chart-room:hover { background-color: #222; border-top: solid 1px #333; border-bottom: solid 1px #333; } div.hup-chart-room-name { display: inline-block; z-index: 6; background-color: #253e5c; width: 120px; color: #fff; font-size: 16px; padding-left: 10px; position: -webkit-sticky; position: sticky; left: -4px; border: solid 1px #333; height: 28px; float: left; border-radius: 0 10px 10px 0; box-shadow: rgba(0, 0, 0, 0.3) 0 2px 2px 0 inset; } div.hup-chart-room-bg { display: inline-block; z-index: 3; background-color: pink; width: 150px; color: #fff; font-size: 16px; padding-left: 10px; position: -webkit-sticky; position: sticky; left: 0px; border: solid 2px #333; height: 28px; } div.hup-chart-room-colour { display: inline-block; position: relative; z-index: 2; background-color: #253d5e; width: 30px; color: #fff; font-size: 16px; padding-left: 0px; position: -webkit-sticky; position: sticky; left: 2px; border: solid 1px #333; border-right: solid 1px #333; z-index: 5; height: 28px; border-radius: 10px 0 0 10px; text-align: center; float: left; box-shadow: rgba(0,0,0,0.3) 2px 2px inset; } div.hup-chart-black { background-color: #222; } div.hup-chart-room-day1 { display: inline-block; position: relative; z-index: 5; background-color: transparent; width: 42px; color: #fff; font-size: 16px; padding-left: 10px; position: -webkit-sticky; position: sticky; left: 150px; border: solid 3px #253e5c; height: 28px; display:none; } div.hup-chart-header div.hup-chart-date-day1 { display: inline-block; position: relative; z-index: 5; background-color: transparent; width: 126px; color: #fff; font-size: 16px; padding-left: 10px; position: -webkit-sticky; position: fixed; left: 318px; border: solid 1px rgba(30,30,30,0.25); border-top: solid 6px rgba(30,30,30,0.5); border-bottom: solid 3px rgba(30,30,30,0.5); border-radius: 35px; height: 42px; top: 38px; pointer-events: none; background-color: rgba(255,255,255,0.1); } div.hup-chart-header div.hup-chart-date-column { height: 100%; border: solid 2px rgba(30,30,30,0.5); border-radius: 20px; position: fixed; left: 318px; width: 126px; color: #fff; font-size: 16px; padding-left: 10px; z-index: 4; top: 38px; pointer-events: none; background-color: rgba(255,255,255,0.05); } div.hup-chart-item { display: inline-block; border: solid 1px #333; height: 26px; overflow: hidden; white-space: nowrap; position: absolute; background-color: #fff; color: #333; font-size: 14px; padding: 2px; border-radius: 6px; } div.hup-chart-item.hup-blue { background-color: #253e5C; } div.hup-chart-item:hover { border: solid 2px #253e5c; } div.hup-chart-item.hup-selected { background-color: #222 !important; border: solid 1px #253e5c; color: #fff; } div.hup-close-pop { position: absolute; top: 0px; right: 0px; padding: 16px; background-color: rgb(41, 47, 34); cursor: pointer; } div.hup-close-pop i { color: #fff; font-size: 1.2em; } div.hup-close-pop:hover i { color: #253e5c; } div.hup-chart-pop { position: fixed; bottom: 0px; left: 0px; right: 0px; height: 300px; background: #222; border-top: solid 3px #253e5c; padding-left: 16px; z-index: 7; display: none; } div.hup-chart-pop { position: fixed; bottom: 0px; left: auto; right: 0px; height: 240px; background: #222; border-top: solid 4px #253e5c; padding-left: 16px; z-index: 7; padding-right: 16px; display: none; border-left: 12px solid rgb(41, 47, 34); /* border-radius: 16px; */ border-right: 1px solid; border-bottom: 1px solid; min-width: 600px; overflow-y: auto; } div.hup-chart-pop p { width: 580px; } div.hup-chart-hk div.hup-chart-room-name { display: inline-block; margin-left: 8px; background-color: rgba(0,0,0,0.25); border: 0; border-top: 0; padding: 6px; color: #fff; float: initial; height: auto; width: 160px; left: 20px; border-radius: 0 0 6px 6px; } div.hup-chart-people { display: inline-block; margin-left: 16px; color: rgba(0,0,0,0.5); } .hup-hk-heading { text-align: center; font-size: 24px; max-width: 350px; margin: 0 auto; } .hup-arrival-last { float: left; margin-top: 10px; margin-left: 10px; cursor: pointer; } .hup-arrival-next { float: right; margin-top: 10px; margin-right: 10px; cursor: pointer; } .hup-hk-sub-heading { text-align: center; font-size: 14px; cursor: pointer; } .hup-hk-sub-heading span{ display: inline-block; margin-left: 6px; text-decoration: underline; } .hup-chart-desc { border-radius: 0 0 10px 10px; background-color: rgba(255, 255, 255, 0.25) !important; color: rgba(0,0,0,0.5)!important; padding: 8px; padding-left: 190px; min-height: 40px; } .hup-gray .hup-hk-detail { color: #fff !important; } .hup-gray .hup-chart-people { color: #fff !important; } .hup-gray .hup-chart-desc { color: #fff !important; } .hup-hk-detail { display: inline-block; margin-left: 8px; color: rgba(0,0,0,0.5); } .hup-chart-hk { margin: 8px; border: solid 1px #333; border-radius: 10px; cursor: pointer; } #guests div.guestScroll { height: auto; } .hup-frame-add-voucher { width: 100%; height: 1080px; border-radius: 16px; border: solid 1px #222; } .hup-voucher-summary { position: relative; } .hup-voucher-summary h2 { position: relative; } .hup-voucher-summary h2 span { position: absolute; font-size: 14px; right: 0px; top: -16px; } .hup-voucher-report { position: relative; padding: 6px; border: solid 1px #333; border-radius: 10px; height: 46px; margin-bottom: 6px; } .hup-voucher-container { width: calc(100% - 112px); position: absolute; left: 112px; top: 4px; } .hup-voucher-item { position: relative; border: solid 5px #333; text-indent: 6px; color: #fff; margin-bottom: 6px; white-space: nowrap; border-radius: 0 10px 10px 0; background-color: #253e5c; } .hup-voucher-item:hover { cursor: pointer; padding: 3px; border-width: 2px; } .hup-voucher-item span{ white-space: nowrap; } .hup-voucher-title { width: 110px; display: inline-block; color: #fff; font-size:16px; text-align: right; padding-right: 10px; padding-top: 2px; } .hup-voucher-sub-item { display: inline-block; position: absolute; right: 0px; text-indent: 6px; border-left: 1px solid #333; } .hup-payment { border-top: solid 1px #333 } .hup-payment h3{ display: inline-block; margin-right: 12px; } .hup-payment img { width: 120px; margin: 16px; display: inline-block; } .hup-payment span { display: inline-block; margin-right: 16px; } ul.userChangePassword { width: 100%; } ul { list-style: none; margin-left: 0px; padding-left: 0px; margin-top: 0px; display: inline-block; margin-bottom: 0px; } ul li { display: inline-block; color: #fff; padding: 8px; padding-left: 12px; padding-right: 12px; border-radius: 6px; margin: 2px; cursor: pointer; } ul li.selected { background-color: #333; } .boat-menu { padding: 10px; border: solid 1px #ddd; border-radius: 8px; } .boat-options ul { list-style: none; margin-left: 0px; padding-left: 0px; margin-top: 0px; display: inline-block; margin-bottom: 0px; } .boat-options ul li { display: inline-block; background-color: #253e5c; color: #fff; padding: 8px; padding-left: 12px; padding-right: 12px; border-radius: 6px; margin: 2px; cursor: pointer; text-transform: uppercase; } .boat-options ul li.selected { /*background-color: #333;*/ } div.boat-options { margin-bottom: 24px; } .hup-button.hup-view { float: right; top: -46px; position: relative; color: #fff; display:none; } .hup-button.hup-download { float: right; top: -46px; position: relative; color: #fff; /*display: none;*/ } #loginButton { font-size: 24px; margin-right: 16px; } .hup-button-accent { background-color: #253e5C; } iframe.hup-check-out { border-radius: 16px; } div.hup-hide-frame { position: absolute; top: 16px; right: 42px; font-size: 1.6em; color: #253e5c; cursor: pointer; } div#signup { position: absolute; top: 58px; right: 0px; height: calc(100% - 58px ); overflow-y: auto; width: 60%; max-width: 540px; background: #222; border-left: solid #333 10px; z-index: 6; } ul.signups { list-style-type: none; margin:0px; padding:0px; } ul.signups li.selected { background-color: #666; border: solid #fff 1px; } ul.signups li { padding: 16px; border: solid 1px #333; border-radius: 10px; padding-top:0px; margin-bottom: 6px; color:#fff; cursor: pointer; } ul.signups li p { margin: 0px; float: right; margin-top: 16px; font-size: 13px; font-weight: 600; } ul.signups li div div { float: right; background-color: #253e5c; border-radius: 6px; position: relative; top: -10px; padding: 6px; } a.signups.selected { background-color: #fff; color: #333; } a.signups { display: inline-block; float: right; top: 8px; position: relative; right: 8px; text-decoration: none; background: #222; border-radius: 8px; padding: 8px; } div#signup h2 { display: inline-block; } div.copy-data, div.copy-trans, div.copy-selected, div.weekly-trans { background-color: #333; border-radius: 6px; padding: 6px; padding-left: 12px; padding-right: 12px; position: relative; top: -4px; color: #fff; display: inline-block; margin-left: 16px; cursor: pointer; } div.weekly-trans { float: right; margin-top: -12px; margin-right: 12px; } div.copy-selected span { display: inline-block; width: 16px; height: 16px; border-radius: 6px; background-color: #666; border: solid 1px #fff; position: relative; top: 2px; } img.copied, img.copied-trans { position: relative; top: -4px; } div.copy-trans { float: right; top: -16px; right: 16px; } img.copied-trans { float: right; top: -26px; } p.hup-trans-date { text-align: center; max-width: 500px; margin: 0 auto; } div.hup-history-section ul.hup-trans-list { margin-top: 16px; } div.hup-seller { margin-left: 16px; } div.hup-hide-frame:hover { color: #333; } div.hup-res-source { float: right; font-size: 20px; border: solid 1px #ddd; padding: 6px; border-radius: 10px; margin-top: -58px; margin-right: 8px; } ul.searchRes li div.options button.mobile-cog { display: none; } ul.searchRes li div.info.sale { text-align: left; } div.hup-white h2 { color: #333; } html, body { height: 100%; } body { width: 100%; } #contact { position: relative; display: flex; padding-top: 0px !important; color:#fff; font-size: 16px; height: 100%; align-items: center; } .hup-logo-menu { width: 100%; max-width: 400px; } .hup-bar .hup-bar-item.hup-hide-small-logo { padding-bottom: 0px; float: initial !important; } #contact { position: absolute; right: 16px; top: calc(50% - 32px); padding: 16px !important; background: #253e5c; border: solid 1px #253e5ccc; border-radius: 35px; height: auto; } i.fa.fa-user { margin-right: 6px; } .hup-bar .hup-bar-item:hover { border-bottom: 7px solid #253e5c; } .hup-button:hover { background-color: rgb(156 204 230) !important; } .hup-bar { text-align: center; border-bottom: 5px #253e5c solid; } .hup-bar a img { width: calc(95% - 150px); max-width: 600px; } #contact_button { position: relative; margin-top: 48px; margin-bottom: 200px; } #contact_button a { background-color: rgba(30,30,30,0.5); border: solid 1px #253e5c !important; border-radius: 35px !important; padding: 20px !important; text-decoration: none; text-transform: uppercase; } .hup-bar.hup-bottom { position: initial; border-bottom: 0; margin-top: auto; } .hup-bar.hup-bottom a img { max-width: 250px; } .hup-top { border-bottom: solid 1px #999; } div.frame-boat-hire iframe { border: none; width: 100%; height: 900px; } #navbar { display: flex; } #navbar a:first-child { flex-grow: 1; } #navbar a:last-child { flex-grow: 0; flex-shrink: 1; } div.offer_info { padding-bottom: 100px; } div.offer_info ul li { background-color: rgba(30,30,30,0.5); margin-top: 12px; padding: 16px; border-radius: 35px; } div.offer_info div.hup-button { background-color: #253e5cee; color: #fff; border-radius: 35px; border: solid 1px #253e5c33; margin-top: 32px; left: calc(50% - 70px); position: relative; } div.top_section_white { background-color: rgba(255, 255, 255, 0.75); border-bottom: solid 3px #253e5cee; color: #253e5c; padding: 8px; } div.top_section_white h1 { color: #253e5c; text-align: center; } div.top_section_white p { color: #253e5c; } div.menu-container { text-align: center; padding-bottom: 32px; } ul.menu-nav { border-top: 0; border-bottom: solid 3px #253e5c; display: inline-block; margin-bottom: 0px; border-radius: 0px 0px 8px 8px; padding-left: 10px; padding-right: 10px; padding-bottom: 8px; text-align: center; background-color: rgba(30, 30, 30, 0.5); margin: 0 auto; } div.menu-container ul.menu-nav li { border: solid 1px #253e5c77; background-color: #253e5c; } div.menu-container ul.menu-nav li.selected { background-color: rgba(255, 255, 255, 0.95); color: #253e5c; } table.hup-layout-container { width: 100%; height: 100%; border-collapse: 0; border-spacing: 0; } #navbar { align-items: center; } .hup-bar .hup-bar-item.hup-colour-even:hover { border-bottom: 0; } .boat-container { display: flex; background-color: #22222277; } .boat-container h3 { text-align: left; } .boat-container-image { border-radius: 8px; overflow: hidden; width: 45%; margin: 16px; } .boat-container-image img { width: 100%; } div.more-info-container > span { background-color: rgba(255, 255, 255, 0.75); border-top: solid 3px #253e5c; } div.more-info-container > span { color: #253e5c; font-weight: 700; font-size: 14px; text-transform: uppercase; display: block; padding: 16px; padding-bottom: 4px; } div.more-info-container ul { width: 100%; padding-bottom: 12px; } div.more-info-container ul li { display: block; background-color: transparent; color: #253e5c; } div.formItem { background-color: rgba(30, 30, 30, 0.5); padding: 0px 16px; } div.confirm div.formItem { background: transparent; text-align: left; } div.confirm div.formItem span { font-weight: 400; } div.confirm textarea { font-weight: 400; } div.formItem .label { color: #fff; } .pay-button { border-color: #253e5c66; } .pay-button:hover { background-color: #253e5c; border-color: #253e5c99; } .pay-button.loading { background-color: #253e5c; color: #fff; border: 0; pointer-events: none; } #pay-description { margin: 8px 0px; } div#voucher-details { margin-top: 0px; margin-bottom: 0px; } #payment-loading.stage2 { top: 104px; } #payment-loading { top: 104px; bottom: -32px; margin: 36px; margin-top: 0px; background-color: rgba(255, 255, 255, 0.95); border-radius: 10px; } #payframe { width: 100%; min-height: 600px; border: 0; margin-left: 0px; margin-right: 0px; } .offer_info, .pick-date { padding: 0px 12px; } .menu-section ul li { width: 100%; } section.more-info { background-color: rgba(30, 30, 30, 0.5); padding: 16px; } section.more-info h3 { text-align: left; } section.more-info ul { margin: 0px; } section.more-info ul li { background: transparent; margin: 0px; padding: 8px 0px; } section.more-info ul li h3 { text-align: left; margin: 0px; font-size: 16px; } div.term-conditions, div.email-error, div.technical-error { margin: 0px; background: rgba(30, 30, 30, 0.5); padding: 16px 24px; display: none; } div.term-conditions h3, div.email-error h3, div.technical-error h3 { padding: 0px; } div.email-error, div.technical-error { text-align: center; } div.hup-button-container { text-align: center; } div.hup-button.hup-large, a.hup-login-with-email { background-color: #253e5c; border: solid 2px #253e5c66; border-radius: 35px !important; width: 100%; max-width: 380px; left: auto !important; margin: 24px; box-shadow: rgba(255, 255, 255, 0.06) 0px 1px 0px 1px inset; } #confirm { padding-top: 64px; } #voucher-details { padding: 0px; } .hup-bar a img.hup-logo-menu { width: 100%; max-width: 400px; } .hup-bar .hup-bar-item.hup-hide-small-logo { padding-bottom: 0px; float: initial !important; } #contact { position: absolute; right: 2%; top: calc(50% - 32px); padding: 16px !important; } div.more-info-container ul.more-info { margin: 0px; padding: 0px; } div.more-info-container ul.more-info li { margin: 0px; padding: 0px; } div.more-info-container ul.more-info li p { color: #fff; display: inline-block; } div.more-info-container ul.more-info li p span { margin-right: 8px; } div.more-info-container ul.more-info > li > p { text-decoration: underline; width: calc(100% - 10px); background-color: rgba(255, 255, 255, 0.75); width: 100%; padding: 16px; margin: 0px; color: inherit; } div.more-info-container ul.more-info li section { color: inherit; } div.more-info-container ul.more-info li section ul { } div.more-info-container ul.more-info li section ul li { color: #fff; padding-bottom: 24px; } @media (max-width: 600px) { .hup-bar a img.hup-logo-menu { float: left !important; padding: 0px; padding-top: 8px !important; padding-bottom: 8px; width: 85%; } } @media (max-width: 780px) { .hup-hide-small { display: inline-block !important; } .boat-container-image { width: 96%; margin: 2%; } .boat-container { flex-wrap: wrap; } #voucher-details { padding: 0px; } #pay-description { margin: 8px 0px; } #payment-loading { margin: 12px; } div.hup-button.hup-large, a.hup-login-with-email { width:calc(100% - 48px); left: auto; } } @media (max-width: 1000px) { #navbar { text-align: center; } } @media (max-width: 1366px) { /*body.chart { zoom: 2; }*/ .vs-scroll { overflow-x: auto; left: 0px; } } @media (max-width: 780px) { #roomSelect { float: left; position: relative; left: 0px; top: 2px; } div#signup { width: 100%; } /*body.chart { zoom: 3; }*/ div #roomColour { left: 0px; width: 100%; margin-left: 0px; } .hup-room-select #room { margin-left: 0px; } #key { margin-left: 16px; padding: 0px; } ul.hup-buildings { padding: 0px; } ul.hup-buildings li { margin-left: 8px; } .room-menu { zoom: 0.7; } ul.hup-buildings { margin-left: 0px; } div.side-bar { display: flex; flex-direction: row; width: 100%; margin-top: auto; top: auto; left: 0px; right: 0px; bottom: 0px; height: 66px; z-index: 20; background-color: #333; padding-top: 4px; } div.side-bar div { background-color: #222; margin-right: 10px; } #newSale { padding-left: 0px; width: 100%; } #newPhone { padding-left: 0px; width: 100%; } .hup-chart-desc { padding-left: 14px; } div.hup-chart-pop { min-width: auto; padding-bottom: 80px; } div.hup-chart-pop p { width: auto; } div.name { flex-direction: column; } span.saleDate { display: block; } ul.searchRes li { padding: 0px; } ul.searchRes li div.options { bottom: auto; border: 0; background-color: #fff; padding: 8px; z-index: 5; align-items: flex-end; width: 150px; right: 0px; } div.optionContainer { height: 56px; position: absolute; right: 0px; overflow: hidden; width: 68px; border-radius: 10px; } ul.searchRes li div.options.selected { height: auto; border: solid #ddd; border-radius: 0 6px; } ul.searchRes li div.options button.mobile-cog { display: block; width: 50px; font-size: 20px; padding: 0px; margin-top: 0px !important; background-color: #fff !important; color: #5e6c4f; } ul.searchRes li div.options button.mobile-cog i { pointer-events: none; } ul.searchRes li h3 { padding-top: 42px; } ul.searchRes li h3 span { display: block; } ul.searchRes li h3 span.searchHigh { display: inline-block; } ul.searchRes li ul.baskets li { flex-direction: column; } ul.baskets { margin-left: 8px; } ul.baskets li div.content { width: auto; } ul.searchRes li div.info { right: 52px; } .hup-container, .hup-panel { padding: 0.01em 0.01em; } #navbar a:last-child { flex-grow: 0; flex-shrink: 1; float: none; align-items: center; display: inline-block; } div.offers { flex-wrap: wrap; } div.offers div.offer { width: 100%; margin-left: 12px; margin-right: 12px; } }