Custom Themes Showcase

Browse our showcase of custom themes. These are themes which we have customized for individual clients. Note: we titled these by type of client, but the ideas can be used for any type of business. Feel free to copy the CSS and edit to fit your own needs. Or, you can hire us for $99 to create a custom theme just for you, to match the look and feel of your website.

Golf Carts / Vehicles

Notes

Paste this CSS at the bottom of the White theme.
Use custom text to change some of the wording, such as minimum/maximum stay messages.
Add HTML/CSS to the header message to center the logo and contact information at the top.
The background color for the contact fields is #fff0c5 - add this in the Reservation Page settings.

Theme CSS

.availabilitysearch_title, .pagetitle, .property_table, .numadults, .numchildren, #numguests_adults_span, #numguests_children_span  {display:none;}
body, button, input, select, textarea, .ast-button, .ast-custom-button {font-family: 'Open Sans',sans-serif;font-weight: 400;font-size: 16px;font-size: 1rem;line-height: 1.6em;}
.roomdescription {color:#007dbf;}
body {background-color:#007dbf;}
#footer {background-color:#febf0e;}
#footer p {margin: 24px;font-size: 22px;color: white;padding:16px;font-weight:bold;}
#header, header {background-color:#007dbf;max-width:100%;}
#availabilitysearch {background-color:#febf0e;max-width:100%;border-radius:0px;padding: 20px 0;color:white;padding:20px 0;}
input[type="button"] {background-color: #007dbf;border-radius: 20px;border: 0px solid #007dbf;padding: 5px 15px;color:white;font-weight:bold;}
input:hover[type="button"] {background-color:#febf0e;}
input {border:1px solid #007dbf;color:#007dbf; }
#checkin_div, #checkout_div {color: #007dbf;font-size:16px;}
.availabilitysearch_table {max-width:600px;}
@media (max-width: 1120px) {
#availabilitysearch {margin: 0;margin-bottom: 20px;}
}
#listings {margin-left: 10px;}
.reservebuttons {float:left;padding:15px 0 0 4px;}
.reservebutton {background-color: #007dbf !important;border-radius: 20px !important;border: 0px solid #007dbf !important;padding: 5px 15px;color:white;font-weight:bold;}
.removebutton {background-color: #007dbf !important;border-radius: 20px !important;border: 0px solid #007dbf !important;padding: 5px 15px;color:white;font-weight:bold;}
.reservebutton:hover,.removebutton:hover  {background-color:#febf0e !important;}
.roomfractionname {font-size: 28px !important;color: #007dbf !important;font-weight: bold;font-family: 'Merriweather',serif;}
.roomprice_td {font-size: 18px !important;color: #007dbf !important;}
.aditionalitems_title, .reservationsummary_title, .contactinformation_title, .paymentinformation_title, .confirm_title {font-size: 22px !important;color: #007dbf !important;font-weight: bold;}
.fieldlabel,.numadults label, .numchildren label {font-size:12px !important;color:#007dbf !important;}
.dropdown.form-control, input[type="tel"], input[type="email"], input[type="number"], input[type="text"], input[type="radio"], textarea, select {border: 1px solid #007dbf !important;color: 007dbf !important; }
#reservationsummary_box, a, .summarynumguests, .popupbodytext, .price_td  {color:#007dbf !important;}
.popupcaption, .popupcaption A {background-color:#007dbf;color:white !important;}
.totalprice_td {border-top: 1px solid #007dbf;color: #007dbf; color: #007dbf;}
.terms_table td, .total_td {color:#007dbf !important;}
.highslide-heading, .highslide-move, .highslide-body, td, .highslide-heading, .terms_titlewindow {color:#007dbf !important;}
.moredetails {background-color:#007DBF21; border-radius:15px;font-size:15px;}
.logocontainer {display: flex;justify-content: center;}
.logocolumn {flex-basis: 35%;padding: 10px;box-sizing: border-box;display: flex;align-items: center;text-align: center;}
.roomphoto_caption {font-size: 12px;}
/* -------- date picker calendars -------- */
.dpTable {background-color:#007dbf;font-size:1.1em;border:4px solid #007dbf;padding:0px;}
.dpDayTD {background-color:#007dbf;}
.dpButton {background-color:#febf0e;}
.dpTitleTR {background-color:#007dbf;}
.dpDayTD {color:#fff !important;}

Header & Confirmation Page Message

RV Park

Notes

A large background image is behind the booking system content.
The background color for the contact fields is #ffe5aa - add this in the Reservation Page settings.

Theme CSS

</style><link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Lato|Roboto|Indie Flower|Fira Sans" rel="stylesheet"><style>
.numchildren { float:left;font-size:10px;display:none1; }
#numguests_children_span {display:none1;}
#ledger_numchildren {display:none1;}
/*~~~~~~~~~~~~~~~~~ High Level Formatting ~~~~~~~~~~~~~~~~~ */
body, html {margin:0;padding:0;color:#white;background:#2d2a1b;  background-position: left top; background-attachment: fixed; background-size: cover;background-image:url(https://s3.amazonaws.com/rkv2/87954/879548292022115126AM__back2.JPG);}
input[type="button"] {background-color:#3b0b08;color:white;font-weight:bold;border-radius:3px;border:0px solid #c66e19;padding:5px 15px;cursor:pointer;transition: background-color .1s ease-in-out;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input:hover[type="button"] {background-color:#994803;}
input[type="tel"],input[type="email"],input[type="number"],input[type="text"],input[type="radio"],textarea,select {padding:4px;background-color: #fff;border: 1px solid #aaa;border-radius: 2px;}
img {max-width: 100%;height: auto;width: auto;}
table {table-layout: fixed;border-spacing: 0px;border-collapse: separate;}
#calfooter_scrollup_span {display:none;}
#rklogo {display:none;}#working_div{height:20px;}
.viewer2_initialmessage {display:none;}
a{color:black}
/*--- fonts, font size, line heights
more font ideas: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; Helvetica Neue; Roboto; Source Sans Pro; Fira Sans; Lato; ---*/
body, html, input {font-family: "Open Sans",Lato,sans-serif;}
body,html,input,td {font-size: 14px;line-height: 20px;}
.propertytitle {font-size:24px;font-weight:bold;color:#ddf0ff;}
.roomprice_td,.roomfractionname {font-size:20px;}
.aditionalitems_title, .reservationsummary_title, .contactinformation_title, .paymentinformation_title, .confirm_title {font-size:22px;font-weight:bold;}
/*-- major layout --*/
#wrap {max-width:1135px;margin:0px auto;background-color:#ffffff;}
#wrap2 {float:left;}
#header {min-width:715px;max-width:1024px;margin-right:0px;margin-top:0px;clear:both;padding:0 0 10px 15px;color:black;}
#results {float:left;max-width:694px;margin-right:10px;}
#details {float:left;max-width:410px;margin-right:0px;}
.contactform_table {max-width:375px;width:100%;}
.ccform_table {max-width:375px;width:100%;}
.property_table, .room_table, #itemsforsale_box, #reservationsummary_box,  #contactinformation_box, #paymentinformation_box, #makereservation_box, #confirm_resdetails_box, #confirm_guestdetails_box, .onlinepaymentsbox, .confirmationpage iframe
{padding: 16px;-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);background-color: #fff;-moz-border-radius: 2px;border-radius: 2px;outline: none;margin-bottom:10px;color:black}
.room_table:hover, #makereservation_box:hover {-moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);}
/* -------- date picker calendars -------- */
.dpTable {background-color:#666;font-size:1.1em;border:4px solid #666666;padding:0px;}
.dpTitleTR {background-color:#666;color:white;}
.dpTitleText {color:#fff;font-weight:bold;}
.dpDayTD {color:#fff;background-color:#666;border:0px;padding:3px;}
.dpTR {background-color:#fff;}
.dpTD {padding:10px;font-size:14px;font-weight:bold;border:0px;border:0px solid #fff;}
.dpButton {padding:2px 6px;background-color:#2782cd;font-size:.96em;color:#fff;border:1px solid #176bb0;margin:4px;}
.dpTitleText {font-size:1.1em;}
.dp td {line-height: 15px;}
.dpTodayButtonTR {display:none;}
/* -------- availability search form -------- */
@media (max-width: 1120px) {
#availabilitysearch  {margin:0 10px 20px 10px;border:1px solid #c0c0c08f;}
#searchavailability {margin-bottom: 16px;}
}
@media (min-width: 1120px) {
#availabilitysearch {float:left;max-width:1115px;width:100%;margin:0 10px;border:1px solid #c0c0c01a;}
#availabilitysearch_table_wrap {width: 380px;margin: 0px auto;padding-left 0px;}
#results {margin-left:10px;}
#details {float:left;margin-right:10px;}
}
#availabilitysearch {background-color:#ddd0bf;border:0px solid #feae00;border-radius:3px;-moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);margin-bottom:20px;}
.availabilitysearch_title {text-align:left;font-size:20px;font-weight:bold;padding:10px 0 0 10px;}
.availabilitysearch_table {font-size:10px;margin:4px 0 10px 10px;}
.noavailability {padding:10px;}
#calcheckin {width:20px}
#calcheckout {width:20px}
.availabilitysearch_table input[type=text] {margin-right:10px;cursor: pointer !important;width:120px !important;padding-left: 30px!important;background-image: url(https://v2.reservationkey.com/i/cal.gif)!important;background-repeat: no-repeat !important;background-position: 7px!important;box-sizing: border-box!important;height:36px !important;border: 1px solid #c2c2c2!important;background-color: #fff!important;
outline: 0!important;font-size: 14px!important;}
.availabilitysearch_table img {display:none;}
#searchavailability {margin-top:3px}
#amenities_td {padding-top:10px;}
#amenities_div {font-family:Lato !important;line-height:24px;}
/* -------- top header section -------- */
#header .pagetitle {font-size:22px;font-weight:bold;margin-bottom:5px;line-height:28px;}
#header .headermessage {margin-bottom:10px;}
/* -------- bottom footer section -------- */
#footer {clear:both;padding:5px 10px 20px 5px;;text-align: center;}
#footer p {margin:0;font-size:12px;}
* html #footer {height:1px;}
/* -------- availability results, guest information form -------- */
.minstay_div {font-weight:bold;color:red;text-align:center;padding:5px;}
/*~~~~~~~~~~~~~~~~~ Section Specific Formatting ~~~~~~~~~~~~~~~~~ */
/* -------- property information -------- */
.property_table {background-color:#ddd0bf;width:100%;color:black;}
.property_table_title {display:none11;}
.propertytitle {font-weight:bold;margin-bottom:22px;color:black;}
.propertyphoto {padding:0 10px 5px 0;float:left;text-align:right;}
.propertyphoto_caption {font-size:10px;}
/* -------- room/fraction availability listings -------- */
.roomdetails_td table {margin-bottom:10px;}
.roomdetails_td {width:100%;}
.cutoffmessage, #enterdateserror_div, .noavailability  {font-weight:normal !important;padding:6px 10px !important;background-color:#FAE1E1;border:1px solid #FFA9A9;color:#E21111 !important;text-align:center;}
.selectnumguests_div {margin-right:0px !important;}
.numguests .reservebuttons input[type="button"] {margin-top:4px;}
.pricedisplay_desc {margin-right:10px;padding:5px 15px;font-size:10px;background-color:#ffedc2;border-radius:4px;}
.roomphoto {float:left;text-align:right;padding:10px 10px 10px 0;}
.roomphoto_caption {font-size:10px;}
#span_originalprice {color:#7e7e7e;}
#span_rateadjustmentname {color:#9c0c1e;}
.propertytitle2 {display:none;}
.roomdescription {margin:8px 0 8px 0;min-height:26px;}
.numguests {float:right;vertical-align:bottom;}
.numadults {float:left;padding-right:4px;font-size:10px; }
.numchildren {float:left;font-size:10px; }
.reservebuttons {float:left;padding:15px 0 0 4px;}
.reservebutton {background-color:#3b0b08 !important;border:0px !important;border-radius:3px;}
.removebutton {background-color:#994803 !important;border:0px !important;border-radius:3px;}
.reservebutton:hover  {background-color:#007fdd !important;}
.removebutton:hover  {background-color:#007fdd !important;}
/* -------- reservation summary -------- */
.roomname_td {width:100%;}
.price_td {text-align:right;max-width:75px;}
.total_td {text-align:right;font-weight:bold;padding:3px 3px 0 0;}
.totalprice_td {text-align:right;font-weight:bold;border-top:1px solid black;font-size:20px;}
/* -------- items for sale -------- */
.saleitemtitle_td {width:100%;padding-top:10px;vertical-align: text-top;font-size:16px;}
.saleitemquantity_td {text-align:right;padding-top:10px;vertical-align: text-top;}
.saleitemdivider_td {height:8px;border-bottom:1px solid #dbdbdb;}
.saleitems_titlewindow {color:#000;font-weight:bold;padding:0 0 5px 0;}
.saleitems_detailswindow {max-width:500px !important;text-align:left;font-size: 10pt;color:#000;}
/* -------- reservation summary popups -------- */
.table_popup_saleitems {max-width:350px;font-size:12px;}
.table_popup_fees  {max-width:350px;font-size:12px;}
.table_popup_rooms  {max-width:350px;font-size:12px;}
.table_popup_multinightdiscount  {max-width:350px;font-size:12px;}
.table_popup_taxes {max-width:350px;font-size:12px;}
/* -------- terms & conditions, make reservation box -------- */
#makereservation_box {background-color:;}
#agree_td {color:;}
#agree_td a {color:;}
#overDiv  {width:100%;max-width:320px;background-color:#c6c6c6;}
.popupcaption {font-size: 12px;color:#fff;font-weight:bold;background-color:#666;}
.popupcaption A {color: #ffffff; font-size: 10px;background-color:#666;}
.popupbody {background-color: #fff;}
.popupborder {background-color: #e4e5e2;}
.terms_titlewindow {color:#000;font-weight:bold;padding:0 0 5px 0;}
.terms_detailswindow {max-width:400px !important;width:95%;text-align:left;font-size: 10pt;color:#000;}
/* -------- contact information form -------- */
.fieldlabel {font-size:10px;}
/* -------- confirmation/payment page -------- */
.confirmationpage {margin-top:10px !important;}
.confirmdetails {width:100%;}
#confirmnum_title {margin-top:10px;font-size:18px;}
#confirm_guestdetails_box {max-width:649px !important;width:100%;}
.onlinepaymentsbox1 {border: green 1px solid;width:90%;background-color:white;margin:20px;padding:10px;text-align:left;}
.onlinepaymentsbox {border: green 1px solid;}
.confirm_title {margin-bottom:10px;}
#offlinecc_pay_box {background-color:white;height:90%;}
#offlinecc_pay_title, .onlinepayments_title {font-size:22px !important;font-weight:bold;font-family:Lato !important;margin-bottom:10px;}
iframe {max-width:800px;width:100%;display:block;}
#offlinecc_pay_box .terms_table {margin-top:10px;}
#offlinecc_pay_box .terms_table td {color:black;}
#offlinecc_pay_box .terms_table a {color:blue;}
/* -------- calendar view -------- */
.calendar_table {table-layout:auto;margin-bottom:10px;background-color:#f8f4ed;border-spacing: 1px;border-collapse: separate;}
.calhead {font-weight:bold;padding:4px;width:100%;}
#calsearch_div {width: 100%;overflow-x: auto;overflow-y: hidden;white-space: nowrap;}
.topdateboxes {font-size:12px;text-align:center;font-size:10px;width:16px;}
.roomlistings {text-decoration:none;text-align:center;font-weight:bold;width:30%;border-bottom:1px solid white;}
.roomlistings a {text-decoration:none;color:#3b0b08;}
.roomlistings_div {margin:2px 4px;background-color:e1d2b7;width:90%;border-radius:2px;}
.roomlistings_div:hover {background-color:#ebe2ce;}
.roomprice_cal {padding:10px;transition: box-shadow .2s ease-in-out;}
.roomprice_cal:hover {-moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);}
.calboxes_booked {background-color:pink;text-align:center;font-size:12px;font-weight:bold;}
.calfooter {font-size:10px;}
/* -------- additional for calendar on availability search page -------- */
.calhead_overview {font-size:12px;border-top:1px solid black;background-color:white;}
.calendar_table2 {margin-bottom:0px;background-color:#E9F0FA;border-bottom:1px solid black;table-layout:auto;border-spacing: 1px;border-collapse: separate; }
.calpropertynames {font-size:10px;background-color:white;border-top:1px solid black;font-weight:bold;}
.caltopdateboxes {font-size:12px;text-align:center;font-size:10px;max-width:16px;min-width:16px;}
.calroomlistings {text-align:center;font-size:12px;}
.dividertop_cal {padding-top:20px;}
.dividerbot_cal {padding-bottom:10px;}
.calboxes_booked {background-color:#5e2f33 !important;color:white;}
/*--------------- link/button to show More Details popup ---------------------- */
.moredetails {font-size:12px;border:0px solid #e3e3e3;width:100px;text-align:center;background-color:#FFF2E6;padding:1px;margin:5px 0 5px 0;float:right;}
.moredetails a {text-decoration:none;color:#F07C00}
/*--------------- more info popup window ---------------------- */
.moreinfo_table {max-width:500px;width:100%;color:black;background-color:#ebe2ce;padding:16px;border:2px solid gray;}
.roomdescription {color:black;}
.moreinfo_td .roomfractionname {margin-bottom:10px;color:black;}
.highslide-html {max-width:500px;}
.highslide-footer {max-width:500px;}
.highslide-container table {table-layout: auto;}
#inquiryform table {width:auto !important;}
/* Small devices (tablets, 1120px and less) */
@media (max-width: 1120px) {
#results, #details, .onlinepaymentsbox {margin:0 10px;max-width:100%;}
#header {margin:0 10px;min-width:200px;padding:0px;}
.pricedisplay_desc {margin:0;line-height:30px;}
.contactform_table, .ccform_table {max-width:99%;}
#confirm_resdetails_box, #confirm_guestdetails_box {margin:10px !important;max-width:100% !important;float:none !important;width:auto;}
iframe {margin:0 10px;max-width:600px !important;width:80%!important;}
}
/*--------------- select from multiple rate plans ---------------------- */
.rateoptions {clear:both;width:100%;background-color:#ebe2ce;border-radius:2px;-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);-webkit-transition: box-shadow .1s ease-in-out;transition: box-shadow .1s ease-in-out;}
.rateoptions:hover {-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.32), 0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.32), 0 0 0 1px rgba(0,0,0,0.04);}
.rateoptions td {padding:8px;}
.addbottomline {border-bottom:0px solid silver;}
.selectplanbuttons {float:right;padding:0px;}
.selectedratetable {border:1px solid #1e90ff !important;}
.rate_title {float:left;width:40%;font-weight:bold;}
.rate_price {float:left;width:35%;}
/*--------------- guestbook ---------------------- */
.guestbooklink {font-size:12px;}
.guestbook_page {padding:10px;}
.guestbook_wrappertable {padding:10px;width:100%;}
.guestbook_header {color:white;background-color:black;margin-bottom:10px;padding:10px;}
.guestbook_title {font-size:20px;font-weight:bold;margin-bottom:5px;}
.guestbook_headermessage {}
.guestbook_table {width:100%;color:#ffde53;}
.guestbook_row {border-bottom:1px solid black;padding:10px;}
.guestbook_commenttitle {font-size:14px;font-weight:bold;}
.guestbook_comments {font-size:14px;}
.guestbook_guestname {font-size:12px;}
.guestbook_hometown {font-size:12px;}
.guestbook_dates {font-size:12px;}
.guestbook_paging {padding-top:10px;}
.guestbook_formtable {margin-top:10px;}
/*--------------- gift certificate purchase pages ---------------------- */
/*----widths, spacing----*/
.gc_page {max-width:1135px;margin:0px auto;padding-top:16px;}
.gcwrapper_table {width:100%;max-width:800px;padding: 16px;}
.gcheader_td  {font-size:11px;padding:10px 0 0 0;text-align:center;}
.gcform_td {}
.gcform_table {}
.gcformlabel_td {max-width:200px;text-align:right;font-size:12px;padding:10px;}
.gcdata_td {width:70%;}
.gcfooter {max-width:800px;width:100%;padding:10px 0 14px 0;}
/*----colors, fonts----*/
.gc_page{background-color:#ebe2ce;}
.gcwrapper_table{background-color: #ddd0bf;}
.gc_page td, .dropdown {font-size:14px !important;}
.gcheading {font-size:16px;}
.gcheader_table {}
.gcheader_table td, .gc_page a {color:black;}
.gcheader_td {background-color:#fff;padding:16px;border:1px solid white;}
.gcform_table td {color:black;}
.gcformlabel_td {}
.gcfooter {font-size:11px;text-align:center;color:black;}
.gcpagetitle {font-weight:bold;font-size:20px;margin-bottom:10px;}
.gcviewcertificatelink {background-color:white;border:1px solid #61100b;padding:10px;margin:10px 0 80px 0;width:400px;}
.gcviewcertificatelink a {color:#961f17}
.gc_page input[type="submit"] {text-transform: uppercase;background-color:#5e2f33;font-weight:normal;border-radius:0px;border:1px solid white;padding:5px 15px;color:white;cursor:pointer;transition: background-color .1s ease-in-out;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input:hover[type="submit"] {background-color:#a42020;}
.gcwrapper_table{-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);-moz-border-radius: 2px;border-radius: 2px;outline: none;}
.gcwrapper_table:hover, #gcwrapper_table:hover {-moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);}
.pagetitle {display:none;}
header {background-image:url(https://s3.amazonaws.com/rkv2/87954/879548292022115703AM__riverwoodsheader.JPG);background-repeat:no-repeat;padding-top:380px;background-size:contain;}
#availabilitysearch {background-color:black;color:white;}
#availabilitysearch a {color:white;}
#availabilitysearch input[type="button"] {background-color:#43ae45;}
#availabilitysearch input:hover[type="button"] {background-color:#4ce14f;}
/* Small devices (tablets, 800px and less) */
@media (max-width: 800px) { header {padding-top:100px;} }
.property_table, .calendar_table {background-color:#f3f3f3;}
.roomlistings_div{background-color:black;color:white;}
.roomlistings_div:hover {background-color:silver;color:black;}
.property_table_title  {display:none;}
/*USERESPONSIVE*/

sports - SUP Yoga, paddle boards, bikes

Notes

Paste this CSS at the bottom of the White theme.
Use custom text to change some of the wording, such as minimum/maximum stay messages.
Be sure to also include your logo in the header message as well as confirmation page.

Theme CSS

body, html,#footer {color: white;background: #25b9ec;}
body, td {font-family: 'Lato', sans-serif;font-weight: 400;line-height: 1.6;}
#header {min-width: 100%;max-width: 100%;color: white;background: #000;padding:20px 0;margin:0px;}
header {background-color:#000;}
#footer p {color: #fff;padding: 15px;font-size: 15px;}
a {color:#000;}
#ledger_numadults, #ledger_numchildren, .availabilitysearch_title, .pagetitle, .property_table_title, .numadults, .numchildren, #numguests_adults_span, #numguests_children_span  {display:none;}
#wrap {max-width:100%;background-color:#000;}
#wrap3, #wrap2 {max-width:1135px;margin:0px auto;float:none;}
@media (min-width: 1120px) {#availabilitysearch {float: inherit;max-width: 100%;}}
#availabilitysearch {box-shadow: none;background-color:#25b9ec;border-radius: 0px;padding:20px;}
.logocontainer {display: flex;justify-content: center;}
.logocolumn {flex-basis: 35%;padding: 10px;box-sizing: border-box;display: flex;align-items: center;text-align: center;}
.roomphoto_caption {font-size: 12px;}
#checkin_div, #checkout_div {color: #000;font-size:14px;}
input[type="button"] {background-color:#25b9ec;}
input:hover[type="button"] {background-color:#000;}
input[type="text"], .textbox {width:100% !important;}
.reservebutton {background-color:#25b9ec !important;border:1px solid white !important;border-radius:0px !important;color:#ffffff;}
.removebutton {background-color:#000 !important;border:1px solid white !important;border-radius:0px !important;color:#000000;}
.reservebutton:hover,.removebutton:hover  {background-color:#000 !important;}
.contactform_table {width:97%;}
.aditionalitems_title, .reservationsummary_title, .contactinformation_title, .paymentinformation_title, .confirm_title {color: #000;}
.fieldlabel {font-size:12px;}
.popupcaption, .popupcaption A {background-color:#000;color:white !important;}
.calendar_table {background-color: #040404;}
.roomlistings_div, .roomlistings_div a {background-color: #25b9ec;color:#fff;border-radius: 0px;}
.roomlistings_div:hover {background-color: #25b9ec;}
#details {color: #000;}
.price_td  {color:#000 !important;}
.totalprice_td {border-top: 1px solid #000 ;color: #000}
.confirmationpage {margin-top: 75px !important;PADDING: 0px;}
/* -------- date picker calendars -------- */
.dpTable {background-color:#000;font-size:1.1em;border:4px solid #000;padding:0px;}
.dpDayTD {background-color:#000;}
.dpButton {background-color:#25b9ec;}
.dpTitleTR {background-color:#000;}
.dpDayTD {color:#fff !important;}

Header & Confirmation Page Message

Cabins & Campsites

Notes

The CSS below is the entire theme.
This theme was designed to be used in an iframe.
The width of the iframe is such that the page appears as one column.
The background color for the contact fields is #fff7e0 - add this in the Reservation Page settings.

Theme CSS

</style><link href="https://fonts.googleapis.com/css?family=Roboto|Source+Sans+Pro|Lato|Indie Flower|Fira Sans" rel="stylesheet"><style>
/*~~~~~~~~~~~~~~~~~ High Level Formatting ~~~~~~~~~~~~~~~~~ */
body, html {margin:0;padding:0;color:white;background:white;background-image:url(????);  background-position: left top; background-attachment: fixed; background-size: cover;}
input[type="button"] {text-transform: uppercase;background-color:#046668;font-weight:normal;border-radius:0px;border:1px solid white;padding:5px 15px;color:white;cursor:pointer;transition: background-color .1s ease-in-out;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input:hover[type="button"] {background-color:#046668;}
input[type="tel"],input[type="email"],input[type="number"],input[type="text"],input[type="radio"],textarea,select {padding:4px;background-color: #fff;border: 1px solid #aaa;border-radius: 2px;}
img {max-width: 100%;height: auto;width: auto;}
table {table-layout: fixed;border-spacing: 0px;border-collapse: separate;}
#rklogo {display:none;}#working_div{height:20px;}
.viewer2_initialmessage {display:none;}
a { color:#046668; }
#span_originalprice {display:none11;}
#inquiryform_div {display:none11;} 
#roomsminstay_span {color:black !important;font-size:18px;}
/*--- fonts, font size, line heights
more font ideas: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; Helvetica Neue; Roboto; Source Sans Pro; Fira Sans; Lato; ---*/
body, html, input {font-family: Lato,sans-serif;color:black;}
body,html,input,td {font-size: 14px;color:black;line-height: 20px;}
.roomprice_td,.roomfractionname {font-size:20px;color:black !important;}
.aditionalitems_title, .reservationsummary_title, .contactinformation_title, .paymentinformation_title, .confirm_title {font-size:22px;font-weight:bold;color:#046668;}
/*-- major layout --*/
#wrap {background-color:#ffffff;max-width:1135px;margin:0px auto;}
#wrap2 {float:left;}
#header {min-width:715px;max-width:1024px;margin-right:0px;margin-top:0px;clear:both;padding:0 0 10px 15px}
#results {float:left;max-width:694px;margin-right:10px;margin-left:0px;}
#details {float:left;max-width:410px;margin-right:0px;color:#046668;}
.contactform_table {max-width:375px;width:100%;}
.ccform_table {max-width:375px;width:100%;}
.property_table, .room_table, #itemsforsale_box, #reservationsummary_box,  #contactinformation_box, #paymentinformation_box, #makereservation_box, #confirm_resdetails_box, #confirm_guestdetails_box, .onlinepaymentsbox, .confirmationpage iframe
{padding: 16px;-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);background-color: white;-moz-border-radius: 2px;border-radius: 2px;outline: none;margin-bottom:10px;}
.room_table:hover, #makereservation_box:hover {-moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);}
/* -------- date picker calendars -------- */
.dpTable {background-color:#046668;font-size:1.1em;border:4px solid #046668;padding:0px;}
.dpTitleTR {background-color:#046668;color:white;}
.dpTitleText {color:#fff;font-weight:bold;}
.dpDayTD {color:#fff;background-color:#;border:0px;padding:3px;}
.dpTR {background-color:#fff;}
.dpTD {padding:10px;font-size:14px;font-weight:bold;border:0px;border:0px solid #fff;}
.dpButton {padding:2px 6px;background-color:#046668;font-size:.96em;color:#fff;border:1px solid white;margin:4px;}
.dpTitleText {font-size:1.1em;}
.dp td {line-height: 15px;}
.dpTodayButtonTR {display:none;}
/* -------- availability search form -------- */
@media (max-width: 1120px) {
#availabilitysearch  {margin:0 10px 20px 10px;border:1px solid #fff;}
#searchavailability {margin-bottom: 16px;}
}
@media (min-width: 1120px) {
#availabilitysearch {float:left;max-width:1115px;width:100%;margin-bottom:20px;border:1px solid #fff;}
#availabilitysearch_table_wrap {width: 380px;margin: 0px auto;padding-left 0px;}
}
#222availabilitysearch_table_wrap {width: 380px;margin: 0px auto;padding-left 0px;}
#availabilitysearch {background-color:#f1f1f1white;border:0px solid #046668;border-radius:3px;-moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);margin-bottom:20px;}
.availabilitysearch_title {text-align:left;font-size:20px;font-weight:bold;color:#046668;padding:10px 0 10px 10px;}
.availabilitysearch_table {font-size:10px;margin:4px 0 10px 10px;color:#046668;}
.noavailability {padding:10px;}
#checkin_div, #checkout_div {color:#046668;}
#calcheckin {width:20px}
#calcheckout {width:20px}
.availabilitysearch_table input[type=text] {margin-right:10px;cursor: pointer !important;width:120px !important;padding-left: 30px!important;background-image: url(https://v2.reservationkey.com/i/cal.gif)!important;background-repeat: no-repeat !important;background-position: 7px!important;box-sizing: border-box!important;height:36px !important;border: 1px solid #c2c2c2!important;background-color: #fff!important;
outline: 0!important;font-size: 14px!important;}
.availabilitysearch_table img {display:none;}
#searchavailability {margin-top:3px}
#amenities_td {padding-top:10px;}
#amenities_div {font-family:Lato !important;line-height:24px;}
/* -------- top header section -------- */
#header .pagetitle {font-size:22px;font-weight:bold;margin-bottom:5px;line-height:28px;}
#header .headermessage {margin-bottom:10px;}
/* -------- bottom footer section -------- */
#footer {clear:both;padding:5px 10px 20px 5px;;text-align: center;}
#footer p {margin:0;font-size:14px;color:black;}
* html #footer {height:1px;}
/* -------- availability results, guest information form -------- */
.minstay_div {font-weight:bold;color:red;text-align:center;padding:5px;}
/*~~~~~~~~~~~~~~~~~ Section Specific Formatting ~~~~~~~~~~~~~~~~~ */
/* -------- property information -------- */
.property_table {background-color:#f1f1f1;width:100%;}
.property_table_title {display:none11;}
.propertytitle {font-weight:bold;margin-bottom:22px;font-size:24px;}
.propertyphoto {padding:0 10px 5px 0;float:left;text-align:right;}
.propertyphoto_caption {font-size:10px;}
.property_table_calsearch .numadults,.property_table_calsearch .numchildren {color:white;}
/*~~~~~~~~~~~~~~~~~ Section Specific Formatting ~~~~~~~~~~~~~~~~~ */
/* -------- room/fraction availability listings -------- */
.roomdetails_td table {margin-bottom:10px;}
.roomdetails_td {width:100%;}
.cutoffmessage, #enterdateserror_div, .noavailability  {font-weight:normal !important;padding:6px 10px !important;background-color:#FAE1E1;border:1px solid #FFA9A9;color:red !important;text-align:center;}
.selectnumguests_div {margin-right:0px !important;}
.numguests .reservebuttons input[type="button"] {margin-top:4px;}
.pricedisplay_desc {margin-right:10px;padding:5px 15px;font-size:10px;background-color:#F1F1F1;border-radius:4px;}
.roomphoto {float:left;text-align:right;padding:10px 10px 10px 0;}
.roomphoto_caption {font-size:10px;}
#span_originalprice {color:#444d53;}
#span_rateadjustmentname {color:#993620;font-size:16px;}
.propertytitle2 {display:none;}
.roomdescription {margin:8px 0 8px 0;min-height:26px;}
.room_detailswindow {background-color:#ffff;}
.numguests {float:right;vertical-align:bottom;}
.numadults {float:left;padding-right:4px;font-size:10px; }
.numchildren {float:left;font-size:10px; }
.reservebuttons {float:left;padding:15px 0 0 4px;}
.reservebutton {background-color:#046668!important;border:1px solid white !important;border-radius:0px !important;color:#ffffff;}
.removebutton {background-color:#046668 !important;border:1px solid white !important;border-radius:0px !important;color:#000000;}
.reservebutton:hover,.removebutton:hover  {background-color:#04668 !important;}
/* -------- reservation summary -------- */
.roomname_td {width:100%;color:#333231;}
.price_td {text-align:right;max-width:75px;color:#333231;}
.total_td {text-align:right;font-weight:bold;padding:3px 3px 0 0;color:#333231;}
.totalprice_td {text-align:right;font-weight:bold;border-top:1px solid black;font-size:20px;color:#333231;}
/* -------- items for sale -------- */
.saleitemtitle_td {width:100%;padding-top:10px;vertical-align: text-top;font-size:16px;color:#333231;}
.saleitemquantity_td {text-align:right;padding-top:10px;vertical-align: text-top;color:#333231;}
.saleitemdivider_td {height:8px;border-bottom:1px solid #dbdbdb;}
.saleitems_titlewindow {color:#000;font-weight:bold;padding:0 0 5px 0;color:#333231;}
.saleitems_detailswindow {max-width:500px !important;text-align:left;font-size: 10pt;color:#000;}
/* -------- reservation summary popups -------- */
.table_popup_saleitems {max-width:350px;font-size:12px;color:#;}
.table_popup_fees  {max-width:350px;font-size:12px;color:#046668;}
.table_popup_rooms  {max-width:350px;font-size:12px;color:#046668;}
.table_popup_multinightdiscount  {max-width:350px;font-size:12pxcolor:#046668;;}
.table_popup_taxes {max-width:350px;font-size:12px;color:#046668;}
/* -------- terms & conditions, make reservation box -------- */
#makereservation_box {background-color:;}
#agree_td {color:046668;}
#agree_td a {color:046668;}
#overDiv  {width:100%;max-width:320px;background-color:#c6c6c6;}
.popupcaption {font-size: 12px;color:#fff;font-weight:bold;background-color:#333231;}
.popupcaption A {color: #ffffff; font-size: 10px;background-color:#333231;}
.popupbody {background-color: #fff;}
.popupborder {background-color: #e4e5e2;}
.terms_titlewindow {font-weight:bold;padding:0 0 5px 0;color:#333231;}
.terms_detailswindow {max-width:400px !important;width:95%;text-align:left;font-size: 10pt;color:#333231;}
/* -------- contact information form -------- */
.fieldlabel {font-size:10px;color:#333231;}
.dropdown.form-control {font-size:10px;color:#333231;}
#country.dropdown{font-size:10px;color:#333231;}
#cccountry.dropdown{font-size:10px;color:#333231;}
/* -------- confirmation/payment page -------- */
.confirmationpage {margin-top:10px !important;PADDING:16PX;}
.confirmdetails {width:100%;}
#confirmnum_title {margin-top:10px;font-size:18px;}
#confirm_guestdetails_box {max-width:520px !important;width:100%;}
.onlinepaymentsbox1 {border: green 1px solid;width:90%;background-color:white;margin:20px;padding:10px;text-align:left;}
.onlinepaymentsbox {border: green 1px solid;}
.confirm_title {margin-bottom:10px;}
#offlinecc_pay_box {background-color:white;height:90%;}
#offlinecc_pay_title, .onlinepayments_title {font-size:22px !important;font-weight:bold;font-family:Lato !important;margin-bottom:10px;}
iframe {max-width:800px;width:100%;display:block;}
#offlinecc_pay_box .terms_table {margin-top:10px;}
#offlinecc_pay_box .terms_table td {color:black;}
#offlinecc_pay_box .terms_table a {color:046668;}
/* -------- calendar view -------- */
.calendar_table {table-layout:auto;margin-bottom:10px;background-color:#333231;border-spacing: 1px;border-collapse: separate;}
.calhead { font-size:14px;font-weight:bold; color:#046668;padding:4px;width:100%;}
#calsearch_div {width: 100%;overflow-x: auto;overflow-y: hidden;white-space: nowrap;}
.topdateboxes {font-size:12px;text-align:center;font-size:10px;width:16px;color: white;font-weight:bold;}
.roomlistings {text-decoration:none;text-align:center;font-weight:bold;width:30%;border-bottom:1px solid white;}
.roomlistings a {text-decoration:none;color:#333231;}
.roomlistings_div {margin:2px 4px;background-color:#e4e8cc;width:90%;border-radius:2px;color:#333231;}
.roomlistings_div:hover {background-color:#e4e5e2;}
.roomprice_cal {padding:10px;transition: box-shadow .2s ease-in-out;}
.roomprice_cal:hover {-moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);}
.calboxes_booked {background-color:#e4e5e2;text-align:center;font-size:12px;font-weight:bold;}
.calfooter, .calfooter a {font-size:10px; color:#fff; }
#calfooter_scrollup_span {display:none11;}
#calfooter_sendinquiry_span {display:none11;}
/* -------- additional for calendar on availability search page -------- */
.calhead_overview {font-size:12px;border-top:1px solid black;background-color:white;}
.calendar_table2 {margin-bottom:0px;background-color:#e4e5e2;border-bottom:1px solid black;table-layout:auto;border-spacing: 1px;border-collapse: separate; }
.calpropertynames {font-size:0px;color:white;background-color:white;border-top:1px solid black;font-weight:bold;}
.caltopdateboxes {font-size:12px;text-align:center;font-size:10px;max-width:16px;}
.calroomlistings {text-align:center;font-size:12px;}
.dividertop_cal {padding-top:20px;}
.dividerbot_cal {padding-bottom:10px;}
/*--------------- link/button to show More Details popup ---------------------- */
.moredetails {font-size:12px;border:0px solid #e3e3e3;width:100px;text-align:center;background-color:#e3e3e3;padding:1px;margin:5px 0 5px 0;float:right;}
.moredetails a {text-decoration:none;color:#046668}
/*--------------- more info popup window ---------------------- */
.moreinfo_table {max-width:500px;width:100%;color:#ffffff;background-color:white;padding:16px;border:2px solid gray;}
.roomdescription {color:black;}
.moreinfo_table .roomdescription {color:black !important;}
.moreinfo_td .roomfractionname {margin-bottom:10px;color:#ffffff;}
.highslide-html {max-width:500px;}
.highslide-footer {max-width:500px;}
.highslide-container table {table-layout: auto;}
#inquiryform table {width:auto !important;}
/* Small devices (tablets, 1120px and less) */
@media (max-width: 1120px) {
#results, #details, .onlinepaymentsbox {margin:0 10px;max-width:100%;}
#header {margin:0 10px;min-width:200px;padding:0px;}
.pricedisplay_desc {margin:0;line-height:30px;}
.contactform_table, .ccform_table {max-width:99%;}
#confirm_resdetails_box, #confirm_guestdetails_box {margin:10px !important;max-width:100% !important;float:none !important;width:auto;}
iframe {margin:0 10px;max-width:600px !important;width:80%!important;}
}
/*--------------- gift certificate purchase pages ---------------------- */
/*----widths, spacing----*/
.gcwrapper_table {width:100%;max-width:800px;margin-top:20px;padding: 16px;margin-bottom:10px;}
.gcheader_td  {margin:20px 0;font-size:11px;padding:10px 0 0 0;text-align:center;}
.gcform_td {}
.gcform_table {margin:20px 0px;}
.gcformlabel_td {max-width:200px;text-align:right;font-size:12px;padding:10px;}
.gcdata_td {width:70%;}
.gcfooter {max-width:800px;width:100%;margin-bottom:20px;padding:10px 0 0 0;}
/*----colors, fonts----*/
.gc_page td, .dropdown {font-size:14px !important;}
.gcheading {font-size:16px;}
.gcheader_table {}
.gcheader_td {background-color:#f1f1f1;padding:16px;}
.gcform_td {}
.gcformlabel_td {}
.gcfooter {font-size:11px;text-align:center;}
.gcpagetitle {font-weight:bold;font-size:20px;margin-bottom:10px;}
.gcviewcertificatelink {background-color:white;border:1px solid #046668;padding:10px;margin:10px 0 80px 0;width:400px;}
.gcviewcertificatelink a {color:#046668}
.gc_page input[type="submit"] {text-transform: uppercase;background-color:#726658;font-weight:normal;border-radius:0px;border:1px solid white;padding:5px 15px;color:white;cursor:pointer;transition: background-color .1s ease-in-out;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input:hover[type="submit"] {background-color:#827668;}
.gcwrapper_table{-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);background-color: white;-moz-border-radius: 2px;border-radius: 2px;outline: none;}
.gcwrapper_table:hover, #gcwrapper_table:hover {-moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);}
/* ----- changes by john ----- */
.property_table_title1, .pagetitle1 {display:none;}
.roomlistings_div {background-color:white;}
.roomlistings_div a, .roomfractionname {color:#046668 !important;}
.calboxes_booked, .datebox_na  {background-color:#993620 !important;color:white;}
@import url('https://fonts.cdnfonts.com/css/lulo-clean');
@import url('https://fonts.cdnfonts.com/css/proxima-nova');
.availabilitysearch_title, .aditionalitems_title, .reservationsummary_title, .contactinformation_title, .paymentinformation_title, .confirm_title {font-family: 'Lulo Clean', sans-serif !important;}
body, html, input, .highslide-container div, .roomdescription p {font-family: 'Proxima Nova', sans-serif !important;}
.monthname {background-color:#333231 !important;color:white;}
#calhead_instructions {color:#046668 !important;}
/*USERESPONSIVE*/

Bed & Breakfast / Inn

Notes

The CSS below is the entire theme.
The background color for the contact fields is #fff3cb - add this in the Reservation Page settings.

Theme CSS

</style><link href="https://fonts.googleapis.com/css?family=Roboto|Source+Sans+Pro|Lato|Indie Flower|Fira Sans" rel="stylesheet"><style>
/*~~~~~~~~~~~~~~~~~ High Level Formatting ~~~~~~~~~~~~~~~~~ */
body, html {margin:0;padding:0;color:white;background:#4e4c4c;background-image:url(????);  background-position: left top; background-attachment: fixed; background-size: cover;}
input[type="button"] {text-transform: uppercase;background-color:#1b1818;font-weight:normal;border-radius:0px;border:1px solid white;padding:5px 15px;color:white;cursor:pointer;transition: background-color .1s ease-in-out;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input:hover[type="button"] {background-color:#686868;}
input[type="tel"],input[type="email"],input[type="number"],input[type="text"],input[type="radio"],textarea,select {padding:4px;background-color: #fff;border: 1px solid #aaa;border-radius: 2px;}
img {max-width: 100%;height: auto;width: auto;}
table {table-layout: fixed;border-spacing: 0px;border-collapse: separate;}
#rklogo {display:none;}#working_div{height:20px;}
.viewer2_initialmessage {display:none;}
a { color:#1b1818; }
#span_originalprice {display:none11;}
#inquiryform_div {display:none11;} 
#roomsminstay_span {color:black !important;font-size:18px;}
/*--- fonts, font size, line heights
more font ideas: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; Helvetica Neue; Roboto; Source Sans Pro; Fira Sans; Lato; ---*/
body, html, input {font-family: Roboto,sans-serif;color:black;}
body,html,input,td {font-size: 16px;color:black;line-height: 22px;}
.roomprice_td,.roomfractionname {font-size:20px;color:black !important;background-color:#eee;padding:5px;}
.aditionalitems_title, .reservationsummary_title, .contactinformation_title, .paymentinformation_title, .confirm_title {font-size:22px;font-weight:bold;color:#1b1818;}
/*-- major layout --*/
#wrap {background-color:#ffffff;max-width:1135px;margin:0px auto;}
#wrap2 {float:left;}
#header99 {min-width:715px;max-width:1024px;margin-right:0px;margin-top:0px;clear:both;padding:0 0 10px 15px}
#results {float:left;max-width:694px;margin-right:10px;margin-left:0px;}
#details {float:left;max-width:410px;margin-right:0px;color:#1b1818;}
.contactform_table {max-width:375px;width:100%;}
.ccform_table {max-width:375px;width:100%;}
.property_table, .room_table, #itemsforsale_box, #reservationsummary_box,  #contactinformation_box, #paymentinformation_box, #makereservation_box, #confirm_resdetails_box, #confirm_guestdetails_box, .onlinepaymentsbox, .confirmationpage iframe
{padding: 16px;-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);background-color: white;-moz-border-radius: 2px;border-radius: 2px;outline: none;margin-bottom:10px;}
.room_table:hover, #makereservation_box:hover {-moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);}
/* -------- date picker calendars -------- */
.dpTable {background-color:#1b1818;font-size:1.1em;border:4px solid #1b1818;padding:0px;}
.dpTitleTR {background-color:#1b1818;color:white;}
.dpTitleText {color:#fff;font-weight:bold;}
.dpDayTD {color:#fff;background-color:#1b1818;border:0px;padding:3px;}
.dpTR {background-color:#fff;}
.dpTD {padding:10px;font-size:14px;font-weight:bold;border:0px;border:0px solid #fff;}
.dpButton {padding:2px 6px;background-color:#1b1818;font-size:.96em;color:#fff;border:1px solid white;margin:4px;}
.dpTitleText {font-size:1.1em;}
.dp td {line-height: 15px;}
.dpTodayButtonTR {display:none;}
/* -------- availability search form -------- */
@media (max-width: 1120px) {
#availabilitysearch  {margin:0 10px 20px 10px;border:1px solid #c0c0c08f;}
#searchavailability {margin-bottom: 16px;}
}
@media (min-width: 1120px) {
#availabilitysearch {float:left;max-width:1115px;width:100%;margin-bottom:20px;border:1px solid #c0c0c01a;}
#availabilitysearch_table_wrap {width: 380px;margin: 0px auto;padding-left 0px;}
}
#222availabilitysearch_table_wrap {width: 380px;margin: 0px auto;padding-left 0px;}
#availabilitysearch {background-color:#e4e8ccwhite;border:0px solid #feae00;border-radius:3px;-moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);margin-bottom:20px;}
.availabilitysearch_title {text-align:left;font-size:20px;font-weight:bold;color:#1b1818;padding:10px 0 10px 10px;}
.availabilitysearch_table {font-size:10px;margin:4px 0 10px 10px;color:#1b1818;}
.noavailability {padding:10px;}
#checkin_div, #checkout_div {color:#1b1818;}
#calcheckin {width:20px}
#calcheckout {width:20px}
.availabilitysearch_table input[type=text] {margin-right:10px;cursor: pointer !important;width:120px !important;padding-left: 30px!important;background-image: url(https://v2.reservationkey.com/i/cal.gif)!important;background-repeat: no-repeat !important;background-position: 7px!important;box-sizing: border-box!important;height:36px !important;border: 1px solid #c2c2c2!important;background-color: #fff!important;
outline: 0!important;font-size: 14px!important;}
.availabilitysearch_table img {display:none;}
#searchavailability {margin-top:3px}
#amenities_td {padding-top:10px;}
#amenities_div {font-family:Lato !important;line-height:24px;}
#listings {margin-left:10px;}
/* -------- top header section -------- */
#header .pagetitle {font-size:22px;font-weight:bold;margin-bottom:5px;line-height:28px;display:none;}
#header .headermessage {margin-bottom:10px;padding:0px;background-color:#e7e7e7;}
/* -------- bottom footer section -------- */
#footer {clear:both;padding:0px;;text-align: center;}
#footer p {margin:0;font-size:14px;color:white;background-color:#000000;padding:20px;}
* html #footer {height:1px;}
/* -------- availability results, guest information form -------- */
.minstay_div {font-weight:bold;color:red;text-align:center;padding:5px;}
/*~~~~~~~~~~~~~~~~~ Section Specific Formatting ~~~~~~~~~~~~~~~~~ */
/* -------- property information -------- */
.property_table {background-color:#f1f1f1;width:100%;}
.property_table_title {display:none11;}
.propertytitle {font-weight:bold;margin-bottom:22px;font-size:24px;}
.propertyphoto {padding:0 10px 5px 0;float:left;text-align:right;}
.propertyphoto_caption {font-size:10px;}
.property_table_calsearch .numadults,.property_table_calsearch .numchildren {color:white;font-size:14px;}
/*~~~~~~~~~~~~~~~~~ Section Specific Formatting ~~~~~~~~~~~~~~~~~ */
/* -------- room/fraction availability listings -------- */
.roomdetails_td table {margin-bottom:10px;}
.roomdetails_td {width:100%;}
.cutoffmessage, #enterdateserror_div, .noavailability  {font-weight:normal !important;padding:6px 10px !important;background-color:#FAE1E1;border:1px solid #FFA9A9;color:red !important;text-align:center;}
.selectnumguests_div {margin-right:0px !important;}
.numguests .reservebuttons input[type="button"] {margin-top:4px;}
.pricedisplay_desc {margin-right:10px;padding:5px 15px;font-size:10px;background-color:#F1F1F1;border-radius:4px;}
.roomphoto {float:left;text-align:right;padding:10px 10px 10px 0;}
.roomphoto_caption {font-size:10px;}
#span_originalprice {color:#444d53;}
#span_rateadjustmentname {color:#9c0c1e;font-size:16px;}
.propertytitle2 {display:none;}
.roomdescription {margin:8px 0 8px 0;min-height:26px;}
.room_detailswindow {background-color:#ffff;}
.numguests {float:right;vertical-align:bottom;}
.numadults {float:left;padding-right:4px;font-size:14px; }
.numchildren {float:left;font-size:14px; }
.reservebuttons {float:left;padding:15px 0 0 4px;}
.reservebutton {background-color:#509a53 !important;border:1px solid white !important;border-radius:0px !important;color:#ffffff;}
.removebutton {background-color:#1b1818 !important;border:1px solid white !important;border-radius:0px !important;color:#1b1818 ;}
.reservebutton:hover,.removebutton:hover  {background-color:#686868 !important;}
.summarynumguests {font-size:12px !important;}
/* -------- reservation summary -------- */
.roomname_td {width:100%;color:#1b1818;}
.price_td {text-align:right;max-width:75px;color:#1b1818;}
.total_td {text-align:right;font-weight:bold;padding:3px 3px 0 0;color:#1b1818;}
.totalprice_td {text-align:right;font-weight:bold;border-top:1px solid black;font-size:20px;color:#1b1818;}
/* -------- items for sale -------- */
.saleitemtitle_td {width:100%;padding-top:10px;vertical-align: text-top;font-size:16px;color:#1b1818;}
.saleitemquantity_td {text-align:right;padding-top:10px;vertical-align: text-top;color:#1b1818;}
.saleitemdivider_td {height:8px;border-bottom:1px solid #dbdbdb;}
.saleitems_titlewindow {color:#1b1818;font-weight:bold;padding:0 0 5px 0;color:#1b1818;}
.saleitems_detailswindow {max-width:500px !important;text-align:left;font-size: 10pt;color:#1b1818;}
/* -------- reservation summary popups -------- */
.table_popup_saleitems {max-width:350px;font-size:12px;color:#;}
.table_popup_fees  {max-width:350px;font-size:12px;color:#1b1818;}
.table_popup_rooms  {max-width:350px;font-size:12px;color:#1b1818;}
.table_popup_multinightdiscount  {max-width:350px;font-size:12pxcolor:#1b1818;;}
.table_popup_taxes {max-width:350px;font-size:12px;color:#1b1818;}
/* -------- terms & conditions, make reservation box -------- */
#makereservation_box {background-color:;}
#agree_td {color:1b1818;}
#agree_td a {color:509a53;}
#overDiv  {width:100%;max-width:320px;background-color:#c6c6c6;}
.popupcaption {font-size: 12px;color:#fff;font-weight:bold;background-color:#1b1818;text-align:center;}
.popupcaption A {color: #ffffff; font-size: 10px;background-color:#1b1818;}
#findcontact_button {margin-top:4px;}
.popupbody {background-color: #fff;}
.popupborder {background-color: #e4e5e2;}
.terms_titlewindow {font-weight:bold;padding:0 0 5px 0;color:#1b1818;}
.terms_detailswindow {max-width:400px !important;width:95%;text-align:left;font-size: 10pt;color:#1b1818;}
/* -------- contact information form -------- */
.fieldlabel {font-size:14px;color:#1b1818;padding-top:5px;}
.dropdown.form-control {font-size:10px;color:#1b1818;}
#country.dropdown{font-size:10px;color:#1b1818;}
#cccountry.dropdown{font-size:10px;color:#1b1818;}
#checkintime {margin-left:10px;}
/* -------- confirmation/payment page -------- */
.confirmationpage {margin-top:10px !important;PADDING:16PX;}
.confirmdetails {width:100%;}
#confirmnum_title {margin-top:10px;font-size:18px;}
#confirm_guestdetails_box {max-width:520px !important;width:100%;}
.onlinepaymentsbox1 {border: green 1px solid;width:90%;background-color:white;margin:20px;padding:10px;text-align:left;}
.onlinepaymentsbox {border: green 1px solid;}
.confirm_title {margin-bottom:10px;}
#offlinecc_pay_box {background-color:white;height:90%;}
#offlinecc_pay_title, .onlinepayments_title {font-size:22px !important;font-weight:bold;font-family:Lato !important;margin-bottom:10px;}
iframe {max-width:800px;width:100%;display:block;}
#offlinecc_pay_box .terms_table {margin-top:10px;}
#offlinecc_pay_box .terms_table td {color:black;}
#offlinecc_pay_box .terms_table a {color:blue;}
/* -------- calendar view -------- */
.calendar_table {table-layout:auto;margin-bottom:10px;background-color:#726658;border-spacing: 1px;border-collapse: separate;}
.calhead { font-size:14px;font-weight:bold; color:#1b1818;padding:4px;width:100%;}
#calsearch_div {width: 100%;overflow-x: auto;overflow-y: hidden;white-space: nowrap;}
.topdateboxes {font-size:12px;text-align:center;font-size:10px;width:16px;color: white;font-weight:bold;}
.roomlistings {text-decoration:none;text-align:center;font-weight:bold;width:30%;border-bottom:1px solid white;}
.roomlistings a {text-decoration:none;color:#726658;}
.roomlistings_div {margin:2px 4px;background-color:#e4e8cc;width:90%;border-radius:2px;color:#726658;}
.roomlistings_div:hover {background-color:#c9b8a3;}
.roomprice_cal {padding:10px;transition: box-shadow .2s ease-in-out;}
.roomprice_cal:hover {-moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);}
.calboxes_booked {background-color:#e4e8cc;text-align:center;font-size:12px;font-weight:bold;}
.calfooter, .calfooter a {font-size:10px; color:#fff; }
#calfooter_scrollup_span {display:none11;}
#calfooter_sendinquiry_span {display:none11;}
/* -------- additional for calendar on availability search page -------- */
.calhead_overview {font-size:12px;border-top:1px solid black;background-color:white;}
.calendar_table2 {margin-bottom:0px;background-color:#e4e8cc;border-bottom:1px solid black;table-layout:auto;border-spacing: 1px;border-collapse: separate; }
.calpropertynames {font-size:0px;color:white;background-color:white;border-top:1px solid black;font-weight:bold;}
.caltopdateboxes {font-size:12px;text-align:center;font-size:10px;max-width:16px;}
.calroomlistings {text-align:center;font-size:12px;}
.dividertop_cal {padding-top:20px;}
.dividerbot_cal {padding-bottom:10px;}
/*--------------- link/button to show More Details popup ---------------------- */
.moredetails {font-size:12px;border:0px solid #e3e3e3;width:100px;text-align:center;background-color:#FFF2E6;padding:1px;margin:5px 0 5px 0;float:right;}
.moredetails a {text-decoration:none;color:#F07C00}
/*--------------- more info popup window ---------------------- */
.moreinfo_table {max-width:500px;width:100%;color:#ffffff;background-color:white;padding:16px;border:2px solid gray;}
.roomdescription {color:black;}
.moreinfo_table .roomdescription {color:black !important;}
.moreinfo_td .roomfractionname {margin-bottom:10px;color:#ffffff;}
.highslide-html {max-width:500px;}
.highslide-footer {max-width:500px;}
.highslide-container table {table-layout: auto;}
.highslide-container div {font-family: Roboto !important;}
#inquiryform table {width:auto !important;}
/* Small devices (tablets, 1120px and less) */
@media (max-width: 1120px) {
#results, #details, .onlinepaymentsbox {margin:0 10px;max-width:100%;}
#header {margin:0 10px;min-width:200px;padding:0px;}
.pricedisplay_desc {margin:0;line-height:30px;}
.contactform_table, .ccform_table {max-width:99%;}
#confirm_resdetails_box, #confirm_guestdetails_box {margin:10px !important;max-width:100% !important;float:none !important;width:auto;}
iframe {margin:0 10px;max-width:600px !important;width:80%!important;}
}
/*--------------- gift certificate purchase pages ---------------------- */
/*----widths, spacing----*/
.gcwrapper_table {width:100%;max-width:800px;margin-top:20px;padding: 16px;margin-bottom:10px;}
.gcheader_td  {margin:20px 0;font-size:11px;padding:10px 0 0 0;text-align:center;}
.gcform_td {}
.gcform_table {margin:20px 0px;}
.gcformlabel_td {max-width:200px;text-align:right;font-size:12px;padding:10px;}
.gcdata_td {width:70%;}
.gcfooter {max-width:800px;width:100%;margin-bottom:20px;padding:10px 0 0 0;}
/*----colors, fonts----*/
.gc_page td, .dropdown {font-size:14px !important;}
.gcheading {font-size:16px;}
.gcheader_table {}
.gcheader_td {background-color:#f1f1f1;padding:16px;}
.gcform_td {}
.gcformlabel_td {}
.gcfooter {font-size:11px;text-align:center;}
.gcpagetitle {font-weight:bold;font-size:20px;margin-bottom:10px;}
.gcviewcertificatelink {background-color:white;border:1px solid #61100b;padding:10px;margin:10px 0 80px 0;width:400px;}
.gcviewcertificatelink a {color:#961f17}
.gc_page input[type="submit"] {text-transform: uppercase;background-color:#726658;font-weight:normal;border-radius:0px;border:1px solid white;padding:5px 15px;color:white;cursor:pointer;transition: background-color .1s ease-in-out;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input:hover[type="submit"] {background-color:#1b1818;}
.gcwrapper_table{-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);background-color: white;-moz-border-radius: 2px;border-radius: 2px;outline: none;}
.gcwrapper_table:hover, #gcwrapper_table:hover {-moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);}
/*USERESPONSIVE*/

Golf Carts

Notes

The CSS below is the entire theme.
This theme is unusual as the availability results show in two columns above the contact form (on large screens).
And the Items for Sale show in a separate column, next to the contact form.
The blurred area containing the instructions at the top is achieved with a psuedo element and blur() element (see the CSS near the bottom).
The screenshots also show a version without a background image.

Theme CSS

</style><link href="https://fonts.googleapis.com/css?family=Roboto|Source+Sans+Pro|Lato|Indie Flower|Fira Sans" rel="stylesheet"><style>
/*~~~~~~~~~~~~~~~~~ High Level Formatting ~~~~~~~~~~~~~~~~~ */
body, html {margin:0; padding:0; color:white; background:#fff; background-image:url(https://s3.amazonaws.com/rkv2/48524/4852459202331301PM__destinoceanbkgnd1440x635lt.JPG);  background-position: left top; background-attachment: fixed; background-size: cover;}
input[type="button"] {text-transform: uppercase; background-color:#003763; font-weight:normal; border-radius:0; border:1px solid white; padding:5px 15px; color:white; cursor:pointer; transition: background-color .1s ease-in-out;-webkit-appearance: none;-moz-appearance: none; appearance: none;}
input:hover[type="button"] {background-color:#578be7;}
input[type="tel"], input[type="email"], input[type="number"], input[type="text"], input[type="radio"], textarea,select {
background-color: #fff; border: 1px solid #aaa; border-radius: 2px; padding:4px;}
img {height: auto; max-width: 100%; width: auto;}
table {table-layout: fixed; border-spacing: 0; border-collapse: separate;}
#rklogo {display:none;}
#working_div {height:20px;}
.viewer2_initialmessage {display:none;}
a {color:#003763;}
#span_originalprice {display:none11;}
#inquiryform_div {display:none11;} 
#roomsminstay_span {color:#000; font-size:18px;}
header {margin: 0 auto; max-width: 1140px; padding: 10px;}
/*--- fonts, font size, line heights
more font ideas: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; Helvetica Neue; Roboto; Source Sans Pro; Fira Sans; Lato; ---*/
body, html, input {color:#003763; font-family: robotolight,sans-serif;}
body,html,input,td {color:#000; font-size: 15px; line-height: 22px;}
.roomprice_td,.roomfractionname {color:#003763; font-size:20px;}
.aditionalitems_title, .reservationsummary_title, .contactinformation_title, .paymentinformation_title, .confirm_title {color:#003763; font-size:22px; font-weight:bold;}
/*-- Header text test and marys new css styles --*/
.header-top-container {display: inline-table; margin: 0 auto; max-width: 100%; padding: 0 0 10px 0; position: relative; width: 100%;}
.header-logo {display: inline-block; max-width: 100%; padding: 0; position: relative; width: 40%;}
.call-box {float: right; margin-top: 20px; max-width: 50%; padding: 10px; position: relative; text-align: right;}
.pre-title {color: #578be7;  font-size: 24px;  margin: 0 0 10px 0; padding: 0; }
h2 {color: #003763; font-size: 30px;  line-height: 28px;  margin: 0 0 10px 0;  padding: 0;}
h3 {color: #003763; font-size: 22px; font-weight: normal; line-height: 22px; margin: 0; padding: 0;}
.feature-call-out {background-color: #488aed; font-size: 18px; line-height: 22px; margin: 0 auto; padding: 12px; text-align: center;}
.feature-call-out a {color: #fff; text-decoration: none;}
.feature-call-out a:hover {color: #003763;}
#wrap3 {padding: 10px;}
/* #ClearFix */
#wrap3:before, #wrap3:after {content: " "; display: table;}
#wrap3:after {clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden;}
#listings {margin: 0 auto; position: relative; text-align: center;}
.roomfractionname {text-align: left;}
#amountcharge_div {margin: 0; padding: 0 !important; text-align: left !important;}
#cancellationmessage_div {height: 450px; overflow: auto;}
/*-----------------------------*/
/*-- major layout --*/
#wrap {background-color:#ffffff; max-width:1135px; margin:0 auto;}
#wrap2 {float:left;}
#header {clear:both; min-width:715px; margin-right:0; margin-top:0; max-width:100%;  padding:0;}
#results {display: inline-block; margin:0 auto; max-width:100%;}
#details {color: #003763; display: inline-block; max-width: 100%; margin: 0 auto; width: 100%;}
.contactform_table {max-width:100%; width:100%;}
.ccform_table {max-width:100%; width:100%;}
.property_table_calsearch {background-color: #fff !important;}
.property_table, .room_table { 
-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);
background-color: #fff;
-moz-border-radius: 2px;
border-radius: 2px; margin:0 8px 10px 0; outline: none; padding: 16px;}
.room_table {border-bottom: 12px solid #578be7; display: inline-table; max-width: 48.5%; min-height: 330px;}
#itemsforsale_box, #reservationsummary_box,  #contactinformation_box, #paymentinformation_box, #makereservation_box, #confirm_resdetails_box, #confirm_guestdetails_box, .onlinepaymentsbox, .confirmationpage iframe { -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04); box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04); background-color: #fff; -moz-border-radius: 2px; border-radius: 2px; float: left; outline: none; margin:0 10px 20px 0; padding: 16px; width: 45%;}
.room_table:hover, #makereservation_box:hover { -moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04); box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);}
/* -------- date picker calendars -------- */
.dpTable {background-color:#003763; border:4px solid #003763; font-size:1.1em; padding:0px;}
.dpTitleTR {background-color:#578be7; color:#fff;}
.dpTitleText {color:#fff; font-weight:normal;}
.dpDayTD {background-color:#578be7; border:0; color:#fff; padding:3px;}
.dpTR {background-color:#fff;}
.dpTD {border:0 solid #fff; font-size:14px; font-weight:normal; padding:10px;}
.dpTDHover {background-color: #578be7; border: 1px solid #578be7; color: #fff; cursor: pointer;}
.dpButton {background-color:#003763; border:1px solid #003763; border-radius: 50%; color:#fff; font-size:.96em; margin:4px; padding:2px 6px 4px;}
.dpTitleText {font-size:1.1em;}
.dp td {line-height: 15px;}
.dpTodayButtonTR {display:none;}
.dpDayHighlightTD {border: none;}
@media (min-width: 1120px) {
/*#availabilitysearch {border:1px solid #c0c0c01a;  float:left; margin-bottom:20px; max-width:1140px; width:100%;}*/
/*#availabilitysearch {border:1px solid #c0c0c08f; margin:0 10px 20px 10px; }*/
#availabilitysearch_table_wrap {margin: 0 auto; padding-left: 0; width: 380px;}
#searchavailability {margin-bottom: 12px;}
}
#222availabilitysearch_table_wrap {margin: 0 auto; padding-left: 0; width: 380px;}
#availabilitysearch_table_wrap {display: inline-table;  margin: 0 auto; padding: 0 10px; position: relative;  text-align: center;}
#availabilitysearch {background-color:#fff; border:0 solid #feae00; border-radius:3px; -moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04); box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04); display: inline-block; margin:0 auto; max-width: 1140px; position: relative; text-align: center; width: 100%;}
.availabilitysearch_title {color:#003763;  font-size:20px; font-weight:bold; padding:10px 0 10px 10px; text-align:center;}
.availabilitysearch_table {color:#003763; font-size:10px; margin:0 auto; padding-bottom: 14px; text-align: center;}
.noavailability {padding:10px;}
#checkin_div, #checkout_div {color:#003763}
#calcheckin {width:20px}
#calcheckout {width:20px}
.availabilitysearch_table input[type=text] {margin-right:10px; cursor: pointer !important; width:120px !important; padding-left: 30px !important; background-image: url(https://v2.reservationkey.com/i/cal.gif) !important; background-repeat: no-repeat !important; background-position: 7px !important; box-sizing: border-box !important; height:36px !important; border: 1px solid #c2c2c2 !important; background-color: #fff !important; outline: 0!important; font-size: 14px!important;}
.availabilitysearch_table img {display:none;}
#searchavailability {margin-top:3px}
#amenities_td {padding-top:10px;}
#amenities_div {font-family:Lato !important; line-height:24px;}
/* -------- top header section -------- */
#header .pagetitle {color: #003763; font-size:28px; font-weight:bold; line-height:32px; margin-bottom:12px;}
#header .headermessage {margin-bottom:20px;}
/* -------- bottom footer section -------- */
#footer {clear:both; padding:5px 10px 20px 5px; text-align: center;}
#footer p {color:#003763; font-size:14px; margin:0;}
* html #footer {height:1px;}
/* -------- availability results, guest information form -------- */
.minstay_div {color:red; font-weight:bold; padding:5px; text-align:center;}
/*~~~~~~~~~~~~~~~~~ Section Specific Formatting ~~~~~~~~~~~~~~~~~ */
/* -------- property information -------- */
.property_table {background-color:#578be7; display: inline-table; width:100%;}
.property_table_title {color: #fff;}
.propertytitle {color: #fff; font-size:24px; font-weight:bold; margin: 0 auto; text-align: center;}
.propertyphoto {float:left; padding:0 10px 5px 0; text-align:right;}
.propertyphoto_caption {font-size:10px;}
.property_table_calsearch .numadults,.property_table_calsearch .numchildren {color:#003763;}
.propertydescription {margin: 0 auto; padding: 0; text-align: center;}
.propertydescription p {color: #003763 !important; margin: 0 auto; padding: 10px 0 0; text-align: center;}
/*~~~~~~~~~~~~~~~~~ Section Specific Formatting ~~~~~~~~~~~~~~~~~ */
/* -------- room/fraction availability listings -------- */
.roomdetails_td table {margin-bottom:14px;}
.roomdetails_td {width:100%;}
.cutoffmessage, #enterdateserror_div, .noavailability  {background-color:#FAE1E1; border:1px solid #FFA9A9; color:red !important; font-weight:normal !important; padding:6px 10px !important; text-align:center;}
.selectnumguests_div {margin-right:0 !important;}
.numguests .reservebuttons input[type="button"] {margin-top:4px;}
.pricedisplay_desc p {margin: 2px; padding: 0;}
.pricedisplay_desc {background-color:#F1F1F1; border-radius:4px; display: inline-block; height: auto; font-size:14px; line-height: 14px; margin:0 10px 0 0; padding:6px 8px 8px; text-align: center; width: 25%;}
.roomphoto {float:left; max-width: 50%; padding:5px 16px 0 0; text-align:right;}
.roomphoto_caption {font-size:10px;}
#span_originalprice {color:#444d53;}
#span_rateadjustmentname {color:#9c0c1e;font-size:16px;}
.propertytitle2 {display:none;}
.roomdescription {color: #003763; margin:8px 0 12px 0; min-height:160px;  text-align: left; }
.room_detailswindow {background-color:#ffff;}
.numguests {display: table-cell; vertical-align:bottom;}
.numadults {float:left; font-size:10px; padding-right:4px;}
.numchildren {float:left; font-size:10px;}
.reservebuttons {float:left; padding:15px 0 0 4px;}
.reservebutton {color:#ffffff;}
.removebutton {background-color:#CC3300 !important; border:1px solid white !important; border-radius:0px !important; color:#000000;}
.reservebutton:hover,.removebutton:hover  {background-color:#578be7;}
/* -------- reservation summary -------- */
.roomname_td {color:#003763; width:100%;}
.price_td {color:#003763; max-width:75px; text-align:right; }
.total_td {color:#003763; font-weight:bold; padding:3px 3px 0 0; text-align:right;}
.totalprice_td {border-top:1px solid #000; color:#003763; font-weight:bold; font-size:20px; text-align:right;}
.summarynumguests {font-size: 12px !important;}
/* -------- items for sale -------- */
.saleitemtitle_td {color:#003763; font-size:16px; padding-top:10px; vertical-align: text-top; width:100%; }
.saleitemquantity_td {color:#003763; padding-top:10px; text-align:right; vertical-align: text-top;}
.saleitemdivider_td {border-bottom:1px solid #dbdbdb; height:8px;}
.saleitems_titlewindow {color:#003763; font-weight:bold; padding:0 0 5px 0;}
.saleitems_detailswindow {color:#000; font-size: 10pt; max-width:500px !important; text-align:left;}
/* -------- reservation summary popups -------- */
.table_popup_saleitems {font-size:12px; max-width:350px;}
.table_popup_fees  {color:#003763; font-size:12px; max-width:350px;}
.table_popup_rooms  {color:#003763; font-size:12px; max-width:350px;}
.table_popup_multinightdiscount  {color:#003763; font-size:12px; max-width:350px;}
.table_popup_taxes {color:#003763; font-size:12px; max-width:350px; }
/* -------- terms & conditions, make reservation box -------- */
#makereservation_box {background-color:#fff;}
#agree_td {color:#003763;}
#agree_td a {color:#003763;}
#overDiv  {background-color:#c6c6c6; max-width:320px; width:100%;}
.popupcaption {background-color:#578be7; color:#fff; font-size: 12px; font-weight:bold;}
.popupcaption a {background-color:#578be7; color: #ffffff; font-size: 10px;}
.popupbody {background-color: #fff;}
.popupborder {background-color: #e4e5e2;}
.terms_titlewindow {color:#003763; font-weight:bold; padding:0 0 5px 0;}
.terms_detailswindow {color:#003763; font-size: 10pt; max-width:400px !important; text-align:left; width:95%; }
/* -------- contact information form -------- */
.fieldlabel {color:#003763; font-size:12px;}
.dropdown.form-control {color:#003763; font-size:10px;}
#country.dropdown {color:#003763; font-size:10px;}
#cccountry.dropdown {color:#003763; font-size:10px;}
/* -------- confirmation/payment page -------- */
.confirmationpage {margin-top:10px !important; padding:16px;}
.confirmdetails {width:100%;}
#confirmnum_title {margin-top:10px;font-size:18px;}
#confirm_guestdetails_box {max-width:520px !important;width:100%;}
.onlinepaymentsbox1 {border: green 1px solid;width:90%;background-color:white;margin:20px;padding:10px;text-align:left;}
.onlinepaymentsbox {border: green 1px solid;}
.confirm_title {margin-bottom:10px;}
#offlinecc_pay_box {background-color:white;height:90%;}
#offlinecc_pay_title, .onlinepayments_title {font-size:22px !important;font-weight:bold;font-family:Lato !important;margin-bottom:10px;}
iframe {max-width:800px;width:100%;display:block;}
#offlinecc_pay_box .terms_table {margin-top:10px;}
#offlinecc_pay_box .terms_table td {color:black;}
#offlinecc_pay_box .terms_table a {color:blue;}
/* -------- calendar view -------- */
.calendar_table {background-color:#efeae3; border-spacing: 1px; border-collapse: separate; margin-bottom:10px; table-layout:auto;}
.calhead {color:#003763; font-size:16px; font-weight:bold; padding:4px; width:100%;}
#calsearch_div {overflow-x: auto; overflow-y: hidden; white-space: nowrap; width: 100%;}
.topdateboxes {border-left: 1px solid #fff; color: #003763; font-size:14px; font-weight:normal; text-align:center; width:16px;}
.roomlistings {border-bottom:1px solid #fff; font-weight:normal; text-align:center; text-decoration:none; width:30%;}
.roomlistings_div a {border-radius:2px; color:#003763; display: inline-block; margin:0 auto; padding: 6px 0; text-decoration:none; width: 100%;}
.roomlistings_div:hover a {background-color:#578be7; color: #fff;}
.roomprice_cal {font-size: 12px !important; padding:10px; transition: box-shadow .2s ease-in-out;}
.roomprice_cal:hover {-moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);}
.calboxes_booked {background-color:#e4e8cc; color: #003763; font-size:13px; font-weight:bold; text-align:center;}
.calfooter, .calfooter a {color:#003763; font-size:10px;}
#calfooter_scrollup_span {display:none11;}
#calfooter_sendinquiry_span {display:none11;}
/* -------- additional for calendar on availability search page -------- */
.calhead_overview {font-size:12px;border-top:1px solid black;background-color:white;}
.calendar_table2 {background-color:#efeae3; border-bottom:1px solid black; border-spacing: 1px; border-collapse: separate; margin-bottom:0; table-layout:auto;}
.calpropertynames {background-color:#fff; border-top:1px solid #003763; color:#003763; font-size:0; font-weight:bold;}
.caltopdateboxes {border-left: 2px solid #fff; font-size:13px; max-width:16px; text-align:center;}
.calroomlistings {border-bottom: 2px solid #fff; color: #003763; font-size:13px; padding: 6px 0; text-align:center;}
.dividertop_cal {padding-top:20px;}
.dividerbot_cal {padding-bottom:10px;}
/*--------------- link/button to show More Details popup ---------------------- */
.moredetails {border:0 solid #e3e3e3; background-color:#FFF2E6; float:right; font-size:12px; margin:5px 0 5px 0; padding:1px; text-align:center; width:100px;}
.moredetails a {color:#F07C00; text-decoration:none;}
/*--------------- more info popup window ---------------------- */
.moreinfo_table {background-color: #fff; color:#003763; border:2px solid #003763; max-width:500px; padding:16px; width:100%;}
.moreinfo_table .roomdescription {color:#000 !important;}
.moreinfo_td .roomfractionname {color:#ffffff; margin-bottom:10px; }
.highslide-html {max-width:500px;}
.highslide-footer {max-width:500px;}
.highslide-container table {table-layout: auto;}
#inquiryform table {width:auto !important;}
/* Small devices (tablets, 1120px and less) */
@media (max-width: 1120px) {
#results, #details, .onlinepaymentsbox {margin:0 auto; max-width:100%;}
#header {margin:0 10px;min-width:200px;padding:0;}
.contactform_table, .ccform_table {max-width:99%;}
#confirm_resdetails_box, #confirm_guestdetails_box {margin:10px !important;max-width:100% !important;float:none !important;width:auto;}
iframe {margin:0 10px;max-width:600px !important;width:80%!important;}
}
/* Small devices (tablets, 1020px and less) */
@media (max-width: 1020px) {
.roomphoto {margin: 0 auto; max-width: 40%; min-height: 210px; padding: 10px 10px 0;}
.roomdescription {margin: 0 0 16px; min-height: auto;}
.call-box {margin-top: 0;}
}
/* Small devices (tablets, 834px and less) */
@media (max-width: 834px) {
#itemsforsale_box, #reservationsummary_box,  #contactinformation_box, #paymentinformation_box, #makereservation_box, #confirm_resdetails_box, #confirm_guestdetails_box, .onlinepaymentsbox, .confirmationpage iframe { 
min-height: 250px;
width: 43%;}
}
/* Small devices (tablets, 768px and less) */
@media (max-width: 768px) {
.property_table, .room_table {max-width: 100%; min-height: auto;}
.roomphoto {float: left; margin: 0 auto; max-width: 35%; min-height: auto; padding: 0 25px 0 0; text-align: center;}
}
@media (max-width: 720px) { 
.header-logo {display: block; margin: 0 auto; max-width: 100%; position: relative; text-align: center; width: 60%;}
.call-box {display: block; height: auto; float: none; margin-bottom: 0; max-width: 100%;  padding: 10px; position: relative; text-align: center;}
.feature-call-out {font-size: 16px; line-height: 20px;}
}
/* Small devices (tablets, 610px and less) */
@media (max-width: 610px) {
#itemsforsale_box, #reservationsummary_box,  #contactinformation_box, #paymentinformation_box, #makereservation_box, #confirm_resdetails_box, #confirm_guestdetails_box, .onlinepaymentsbox, .confirmationpage iframe {margin:10px; min-height: auto; width: 85%;}
}
/* Small devices (phones, 475px and less) */
@media (max-width: 475px) {.roomphoto {padding: 0 25px 20px 0;}}
@media (max-width: 420px) { 
#header .pagetitle {font-size: 24px; line-height: 30px;}
.header-logo {width: 90%;}
.call-box {margin: 20px 0 5px 0; padding: 0; }
h2 {margin: 0 0 6px 0;}
.pricedisplay_desc {width: auto;}
.roomphoto {padding: 0 18px 0 0;}
}
/*--------------- gift certificate purchase pages ---------------------- */
/*----widths, spacing----*/
.gcwrapper_table {width:100%; max-width:800px; margin-top:20px; padding: 16px; margin-bottom:10px;}
.gcheader_td  {margin:20px 0; font-size:11px; padding:10px 0 0 0; text-align:center;}
.gcform_td {}
.gcform_table {margin:20px 0;}
.gcformlabel_td {max-width:200px; font-size:12px; padding:10px; text-align:right;}
.gcdata_td {width:70%;}
.gcfooter {max-width:800px; margin-bottom:20px; padding:10px 0 0 0; width:100%;}
/*----colors, fonts----*/
.gc_page td, .dropdown {font-size:14px !important;}
.gcheading {font-size:16px;}
.gcheader_table {}
.gcheader_td {background-color:#f1f1f1;padding:16px;}
.gcform_td {}
.gcformlabel_td {}
.gcfooter {font-size:11px;text-align:center;}
.gcpagetitle {font-weight:bold;font-size:20px;margin-bottom:10px;}
.gcviewcertificatelink {background-color:white;border:1px solid #61100b;padding:10px;margin:10px 0 80px 0;width:400px;}
.gcviewcertificatelink a {color:#961f17}
.gc_page input[type="submit"] {background-color:#578be7; border-radius:0; border:1px solid white; color:white; cursor:pointer; font-weight:normal; padding:5px 15px; transition: background-color .1s ease-in-out;-webkit-appearance: none;-moz-appearance: none;appearance: none; text-transform: uppercase;}
input:hover[type="submit"] {background-color:#827668;}
.gcwrapper_table{-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);background-color: white;-moz-border-radius: 2px;border-radius: 2px;outline: none;}
.gcwrapper_table:hover, #gcwrapper_table:hover {-moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);}
.calboxes_booked {background-color:#578be7 !important; color:#578be7;}
.calboxes_booked::before {content: "R";color:white;}
#cancellationmessage_div {overflow-y: scroll; height:400px;}
/* ~~~ custom changes ~~~ */
#wrap {background-color:inherit;}
.pagetitle {display: none;}
.headermessage p {padding: 15px;opacity: 0.7;position: relative;z-index: 1;color: #000;}
.headermessage p::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;background-color: #fff;filter: blur(15px);-webkit-filter: blur(15px);-moz-filter: blur(15px);}
/*USERESPONSIVE*/

Airport Transportation Shuttle

Notes

Paste this CSS at the bottom of the White theme.
This theme was designed original for the calendar view. Dates search view may need additional adjustments.
Be sure to also include your logo in the header message as well as confirmation page.

Theme CSS

/* ~~~~~ custom CSS ~~~~~ */
.availabilitysearch_title, .pagetitle, #pagetitle  {display:none;}
body, html {color: white;background: #000;}
body, td {font-family:'robotolight', sans-serif;font-weight: 400;line-height: 1.6;}
#wrap {max-width:100%;margin:0;background-color:#ecd798;}
header,main,footer {display: flex;}
#header {min-width:100%;}
.headermessage {max-width:1135px;margin:0px auto;}
main {background-color:white;border-top: 10px solid black;}
#wrap3{max-width:1135px;margin:0px auto;}
footer {background-color:black;color:white;justify-content: center;}
header {background: linear-gradient(180deg, rgba(236,215,152,1) 0%, rgba(255,255,255,1) 35%);min-height: 245px;padding: 0;position: relative;width: 100%;font-size:16px;}
.container {display: flex;flex-wrap:wrap;flex-direction: row;align-items: center;width: 100%;}
.text-container {flex: 1;display: flex;justify-content: center;}
.text {text-align: center;}
#header {color: black;padding:20px 0;margin:0px;}
#footer p {color: #fff;padding: 15px;font-size: 15px;}
a {color:#000;}
#agree_td a {color:#000;}
.roomphoto_caption {font-size: 12px;}
#checkin_div, #checkout_div {color: #000;font-size:14px;}
input[type="button"] {background-color:#ecd798;border-radius: 50px;border: 2px solid #fff;color: #1f1f1f;display: block;font-size: 20px;line-height: 1.35rem;margin: 0 auto;margin: 20px 0;padding: 8px 30px 9px;position: relative;text-align: center;-webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);text-transform: none;}
input:hover[type="button"] {background-color:#f3bd48;}
input[type="text"], .textbox {width:100% !important;}
#searchavailability {margin-top: -6px;}
#availabilitysearch {box-shadow: none;border-radius: 0px;padding:20px 0 0 0;}
.availabilitysearch_table label {  margin-left: 21px;}
#checkin {border-radius:20px;}
.calendar_table {background-color: 000;border-radius: 10px;}
.property_table, .room_table, #itemsforsale_box, #reservationsummary_box, #contactinformation_box, #paymentinformation_box, #makereservation_box, #confirm_resdetails_box, #confirm_guestdetails_box, .onlinepaymentsbox, .confirmationpage iframe {padding: 16px;-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);box-shadow:none;background-color: #f0f0f0;-moz-border-radius: 2px;border-radius: 2px;outline: none;margin-bottom: 10px;}
.propertytitle, .propertydescription {text-align:center;}
#makereservation_box:hover {-moz-box-shadow: none;box-shadow: none;}
.reservebutton {background-color:#ecd798 !important;border:1px solid white !important;border-radius:0px !important;color:#ffffff;}
.removebutton {background-color:#000 !important;border:1px solid white !important;border-radius:0px !important;color:#000000;}
.reservebutton:hover,.removebutton:hover  {background-color:#000 !important;}
.contactform_table {width:97%;}
.aditionalitems_title, .reservationsummary_title, .contactinformation_title, .paymentinformation_title, .confirm_title {color: #000;}
.fieldlabel {font-size:12px;}
.popupcaption, .popupcaption A {background-color:#000;color:white !important;}
.roomlistings_div, .roomlistings_div a {background-color: #ecd798;color:#000;border-radius: 10px;}
.roomlistings_div:hover {background-color: #ecd798;}
#details {color: #000;}
.price_td  {color:#000 !important;}
.totalprice_td {border-top: 1px solid #000 ;color: #000}
.confirmationpage {margin-top: 75px !important;PADDING: 0px;}
/* -------- date picker calendars -------- */
.dpTable {background-color:#000;font-size:1.1em;border:4px solid #000;padding:0px;}
.dpDayTD {background-color:#000;}
.dpButton {background-color:#ecd798;}
.dpTitleTR {background-color:#000;}
.dpDayTD {color:#fff !important;}

Header & Confirmation Page Message

Start using ReservationKey today

START MY 30-DAY FREE TRIAL

Custom Themes Showcase

Golf Carts / Vehicles

RV Park

sports - SUP Yoga, paddle boards, bikes

Cabins & Campsites

Bed & Breakfast / Inn

Golf Carts

Airport Transportation Shuttle

Start using ReservationKey today

or REQUEST A DEMO