<tommy-widget
data-widget="mini"
data-api-token="gastmolen:d982309a461bcc3abc15489201522c8df291aa650eabafda45f1583b03992cc9"
data-language='nl'
>
</tommy-widget>
CSS header
<style>
/* ==========================================================================
ZOEK EN BOEK / mini zoek en boek
========================================================================== */
#tommy-zeb-mini-placeholder {
position: relative;
z-index: 9999;
}
/* wrapper */
.tommy-zeb-wrapper * {
font-family: 'PT Sans', sans-serif!important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tommy-zeb-wrapper {
float: left;
width: 100%;
position: relative;
}
/* language */
.tommy-zeb-wrapper .tommy-zeb-language-selector.ng-scope {
position: absolute;
right: 0;
top: -25px;
width: 300px;
text-align: right;
margin: 0;
}
.tommy-zeb-wrapper .tommy-zeb-language-selector-label {
float: left;
margin: 0 10px 0 30px;
text-align: right;
line-height: 26px;
}
.tommy-zeb-wrapper .tommy-zeb-language-selector .ng-isolate-scope {
float: left;
}
.tommy-zeb-wrapper select {
padding: 4px 10px;
border-radius: 2px;
}
/* left / right */
.tommy-zeb-wrapper .tommy-zeb-right,
.tommy-zeb-wrapper .tommy-zeb-left {
float: left;
position: relative;
}
.tommy-zeb-wrapper .tommy-zeb-right {
padding-left: 20px;
}
/* filter block left */
.tommy-zeb-wrapper .tommy-zeb-left {
width: 25%;
background: #dccd11;
color: #fff;
padding: 20px;
border-radius: 4px;
}
.tommy-zeb-wrapper * h2 {
color: #fff;
font-weight: 600;
margin: 15px 0 10px;
font-size: 22px;
}
.tommy-zeb-wrapper .tommy-zeb-left h1,
.tommy-zeb-wrapper .tommy-zeb-person-categories,
.tommy-zeb-wrapper .tommy-zeb-accommodation-objects,
.tommy-zeb-wrapper .tommy-zeb-date {
margin: 0;
padding: 0 0 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.tommy-zeb-wrapper .tommy-zeb-left h1 {
color: #FFDD26;
font-size: 30px;
}
.tommy-zeb-wrapper .tommy-zeb-accommodation-person-category-label {
float: left;
line-height: 30px;
}
.tommy-zeb-wrapper .tommy-zeb-accommodation-person-category-choice {
margin: 5px 0;
text-align: right;
}
.tommy-zeb-accommodation-person-category select {
width: 50px;
}
.tommy-zeb-wrapper .tommy-zeb-accommodation-category select,
.tommy-zeb-wrapper .tommy-zeb-accommodation-objects select,
.tommy-zeb-wrapper .tommy-zeb-accommodation-types select,
.tommy-zeb-wrapper .tommy-zeb-date input {
width: 100%;
}
.tommy-zeb-accommodation-person-category select {
width: 50px;
}
.tommy-zeb-wrapper .tommy-zeb-left select,
.tommy-zeb-wrapper .tommy-zeb-left input {
padding: 4px;
box-shadow: none;
border: none;
border-radius: 4px;
color: #000;
}
.tommy-zeb-wrapper .tommy-zeb-date-begin {
margin: 0 0 10px;
}
/* content right */
.tommy-zeb-wrapper .tommy-zeb-right {
width: 75%;
}
.tommy-zeb-wrapper .tommy-zeb-result-image {
float: left;
min-width: 180px;
}
.tommy-zeb-wrapper .tommy-zeb-result-price.ng-binding {
color: #36c;
font-size: 18px;
font-weight:600;
}
.tommy-zeb-wrapper .tommy-zeb-result {
display: block;
width: 100%;
margin-bottom: 20px;
padding-bottom: 20px;
}
.tommy-zeb-wrapper .tommy-zeb-result:after {
content: '';
display: block;
clear: both;
}
.tommy-zeb-wrapper .tommy-zeb-result.ng-scope {
background-color: #efefef;
border-radius: 4px;
padding: 20px;
}
.tommy-zeb-wrapper .tommy-zeb-result-image img {
border-radius: 4px;
width: 100%;
}
.tommy-zeb-wrapper .tommy-zeb-result-label.ng-binding {
Font-size: 20px;
font-weight: 600;
color: #ff7e00;
}
.tommy-zeb-wrapper .tommy-zeb-btn {
padding: 5px 15px;
background-color: #ff7e00;
color:#fff;
text-decoration:none;
float: left;
margin: 10px 10px 0 0;
border-radius: 4px;
transition: all 0.5s ease;
}
.tommy-zeb-wrapper .tommy-zeb-btn:hover {
background-color: #3366cc;
}
.tommy-zeb-wrapper .tommy-zeb-result-actions {
width: 100%;
bottom: 0;
}
.tommy-zeb-wrapper .tommy-zeb-result-details {
position: relative;
width: 620px;
/* min-height: 180px; */
padding: 0 15px;
float: left;
}
.tommy-zeb-result-description {
/* min-height: 180px; */
}
/* Als er geen image beschikbaar is */
.tommy-zeb-wrapper .tommy-zeb-result-has-no-image .tommy-zeb-result-details {
width: 100%!important;
padding: 0!important;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini h2,
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini * {
display: inline;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-person-category-label {
float: none;
line-height: normal;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories .ng-scope {
padding: 5px 0px;
float: left;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left {
width: 100%;
display: flex;
justify-content: center;
font-size: 15px;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini.tommy-zeb-mini-collapse .tommy-zeb-left { justify-content: start; }
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories {
max-width: 450px;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period input {
width: 120px;
padding: 6px;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories,
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-types {
margin-right: 20px;
padding-right: 20px;
border-bottom: none;
border-right: 1px solid rgba(255, 255, 255, 0.4);
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-date {
border-bottom: none;
}
.tommy-zeb-wrapper-mini .tommy-zeb-person-categories,
.tommy-zeb-wrapper-mini .tommy-zeb-date,
.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-types,
.tommy-zeb-wrapper-mini .ng-isolate-scope {
float: left;
padding: 0;
font-weight: 800;
font-size: 16;
}
.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-types.block {
padding-right: 10px;
}
.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-types.block h2:last-of-type {
margin-top: 12px;
}
.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-types.block > .ng-isolate-scope {
clear: both;
width: 100%;
}
.tommy-zeb-wrapper-mini .tommy-zeb-left.ng-scope {
padding-top: 10px;
padding-bottom: 10px;
}
.tommy-zeb-wrapper-mini h2.ng-binding {
float: left;
margin: 0 0 10px;
}
.tommy-zeb-wrapper-mini .tommy-zeb-person-categories > .ng-isolate-scope,
.tommy-zeb-wrapper-mini .tommy-zeb-date > .ng-isolate-scope,
.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-types > .ng-isolate-scope {
clear: both;
}
.tommy-zeb-wrapper-mini .tommy-zeb-period .tommy-zeb-date-begin-label,
.tommy-zeb-wrapper-mini .tommy-zeb-period .tommy-zeb-date-end-label {
float: left;
line-height: 30px;
}
.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-person-category-choice select,
.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-person-category-choice input {
margin: 0 10px;
}
.tommy-zeb-wrapper-mini .tommy-zeb-date-begin-choice input,
.tommy-zeb-wrapper-mini .tommy-zeb-date-end-choice input {
margin: 2px 20px;
}
.tommy-zeb-wrapper-mini button.tommy-zeb-btn {
margin-top: 35px!important;
padding: 7px 30px;
background-color: #644F00;
font-weight: 800;
font-size: 16;
color: #fff;
text-decoration: none;
line-height: 20px;
float: left;
margin: 10px 10px 0 0;
border-radius: 30px;
transition: all 0.5s ease;
border: none;
}
/* mini collapse overrides */
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories tommy-person-category > div {
display: block;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini {
position: relative;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-accommodation-person-category-label {
margin-right: 15px;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-accommodation-person-category-choice {
margin: 0;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse {
display: block;
position: relative;
min-width: 250px;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse .tommy-zeb-travel-groups {
display: block;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse button.tommy-zeb-btn {
margin-top: 5px !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse .tommy-zeb-travelcompany-total {
margin-left: 10px;
margin-top: 5px !important;
width: 50px;
height: 30px;
text-align: center;
background: #fff;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list {
background: #A08F21;
position: absolute;
display: flex;
flex-flow: column nowrap;
left: 0;
top: 100%;
margin-top: 4px;
width: 100%;
max-width: 100%;
padding: 8px;
border-radius: 4px;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-accommodation-person-category-choice > * {
display: inline-block;
height: 24px;
line-height: normal;
position: relative;
vertical-align: top;
margin-right: 5px;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-accommodation-person-category-choice > * > span {
display: block;
width: 24px;
height: 24px;
line-height: 24px;
vertical-align: top;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-accommodation-person-category-choice .tommy-zeb-min span {
width: 24px;
height: 24px;
left: 50%;
margin-left: -12px;
position: absolute;
top: -2px;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-range {
cursor: pointer;
background: #6A6005;
display: inline-block;
width: 24px;
height: 24px;
border-radius: 24px;
font-weight: bold;
font-size: 26px;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-range.disabled {
opacity: 0.6;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-accommodation-person-category {
flex-flow: wrap row;
justify-content: space-between;
display: flex;
align-items: center;
flex-direction: row;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-accommodation-person-category .tommy-zeb-accommodation-person-category-label {
flex: 1 0 40%;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-accommodation-person-category .tommy-zeb-accommodation-person-category-choice {
flex: 0 0 75px;
align-self: flex-end;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-accommodation-person-category .tommy-zeb-accommodation-person-category-label,
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-accommodation-person-category .tommy-zeb-accommodation-person-category-choice {
display: inline-block !important;
line-height: normal;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list .tommy-zeb-accommodation-person-category > * {
float: none;
margin: 0;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-left select,
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-left input {
padding: 2px 4px;
}
/* ==========================================================================
Small devices (tablets, 768px and up)
========================================================================== */
@media ( min-width : 768px ) and (max-width : 960px ){
.tommy-zeb-wrapper .tommy-zeb-left { width: 33.33%; }
.tommy-zeb-wrapper .tommy-zeb-right { width: 66.66%; }
.tommy-zeb-wrapper .tommy-zeb-result-image {
min-width: inherit;
min-height: inherit;
/* width: 100px; */
/* height: 100px; */
margin: 0 15px 15px 0;
}
.tommy-zeb-wrapper .tommy-zeb-result-details {
min-height: inherit;
padding: 0;
float: left;
width: 100%;
}
.tommy-zeb-result-description { min-height: inherit; }
.tommy-zeb-wrapper .tommy-zeb-result-price.ng-binding { margin-top: 20px; }
.tommy-zeb-wrapper .tommy-zeb-result-actions { position: relative; }
.tommy-zeb-wrapper-mini .ng-isolate-scope .ng-scope {
float: left;
width: 100%;
line-height: 34px;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-person-category-label,
.tommy-zeb-wrapper-mini .tommy-zeb-period .tommy-zeb-date-begin-label,
.tommy-zeb-wrapper-mini .tommy-zeb-period .tommy-zeb-date-end-label {
width: 125px;
float: left;
padding: 0;
line-height: 34px;
}
}
/* ==========================================================================
Extra small devices (phones, less than 768px)
========================================================================== */
@media ( min-width : 100px ) and (max-width: 767px) {
.tommy-zeb-wrapper .tommy-zeb-right { padding: 20px 0; }
.tommy-zeb-wrapper .tommy-zeb-left, .tommy-zeb-wrapper .tommy-zeb-right { width: 100%; }
.tommy-zeb-result-description { min-height: inherit;}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left {
display: inherit;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories {
max-width: unset;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories,
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-types {
width: 100%;
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
padding-bottom: 15px;
margin-bottom: 15px;
}
.tommy-zeb-wrapper-mini .ng-isolate-scope .ng-scope {
float: left;
width: 100%;
line-height: 34px;
}
.tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-person-category-label,
.tommy-zeb-wrapper-mini .tommy-zeb-period .tommy-zeb-date-begin-label,
.tommy-zeb-wrapper-mini .tommy-zeb-period .tommy-zeb-date-end-label {
width: 125px;
float: left;
padding: 0;
line-height: 34px;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.tommy-zeb-wrapper .tommy-zeb-result-image {
min-width: inherit;
min-height: inherit;
width: 100px;
height: 100px;
margin: 0 15px 15px 0;
}
.tommy-zeb-wrapper .tommy-zeb-result-details {
min-height: inherit;
padding: 0;
float: left;
width: 200px;
}
.tommy-zeb-wrapper .tommy-zeb-result-price.ng-binding { margin-top: 20px; }
.tommy-zeb-wrapper .tommy-zeb-result-actions { position: relative; }
.tommy-zeb-wrapper-mini .tommy-zeb-date-begin,
.tommy-zeb-wrapper-mini .tommy-zeb-date-end {
width: 100%;
float: left;
}
}
@media (max-width: 479px) {
.tommy-zeb-wrapper .tommy-zeb-result-details {
width: 100%;
min-height: inherit;
padding: 15px 0 0;
}
.tommy-zeb-wrapper .tommy-zeb-result-image {
min-width: inherit;
min-height: inherit;
width: 100%;
}
.tommy-zeb-wrapper .tommy-zeb-result-image img {
width: 100%;
}
.tommy-zeb-wrapper-mini .tommy-zeb-date-begin,
.tommy-zeb-wrapper-mini .tommy-zeb-date-end {
width: 100%;
float: left;
}
}
/* ==========================================================================
ZOEK EN BOEK - END
========================================================================== */
</style>
Java scr. footer
(1) <script src="https://api.tommybookingsupport.com/widgets/zoekenboek/js/init.js"></script>

(3) <script src="https://api.tommybookingsupport.com/widgets/js/widget.js" type="application/javascript" language="javascript"></script>
CSS header
<style>
.search-and-book-widget
{
z-index:200 !important;
position:absolute !important;
left:10px !important;
right:10px !important;
bottom:30px !important;
text-align:center !important;
}
.search-and-book-widget .holder
{
position:relative !important;
display:inline-block !important;
min-width:300px !important;
padding:20px 20px !important;
border-radius: 20px 5px 5px 20px !important;
border-width:10px !important;
background-color:#806902 !important;
box-shadow:10px 10px 10px rgba(0,0,0,0.1) !important;
color:#3a4c4e !important;
text-align:left !important;
}
.search-and-book-widget .title
{
position:absolute !important;
left:30 !important;
bottom:100% !important;
color:#f4cd29 !important;
font-size:30px !important;
line-height:1.3 !important;
font-weight:800 !important;
text-transform:uppercase !important;
font-family:'Oswald', sans-serif !important;
text-shadow:3px 0 1px rgba(0,0,0,0.1) !important;
}
#TommyBookingSupport .tbs-navbar-default .tbs-navbar-nav>.tbs-active>a,#TommyBookingSupport .tbs-navbar-default .tbs-navbar-nav>.tbs-active>a:focus,#TommyBookingSupport .tbs-navbar-default .tbs-navbar-nav>.tbs-active>a:hover
{
color:#fff !important;
background-color:#DCCD11 !important;
}
#TommyBookingSupport .tbs-btn-info
{
color:#fff !important;
background-color:#DCCD11 !important;
border-color:##DCCD11 !important;
}
#TommyBookingSupport .tbs-btn-info:hover
{
background-color:#f4cd29 !important;
border-color:#f4cd29 !important;
}
#TommyBookingSupport .tbs-btn-success
{
color:#fff !important;
background-color:#DCCD11 !important;
border-color:#DCCD11 !important;
}
#TommyBookingSupport .tbs-btn-success:hover
{
color:#fff !important;
background-color:#f4cd29 !important;
border-color:#f4cd29 !important;
}
#TommyBookingSupport .tbs-btn-info,#TommyBookingSupport .tbs-btn-success
{
transition:all 0.5s ease !important;
}
#TommyBookingSupport .mapplic-map a.mapplic-pin
{
filter:drop-shadow(0 3px 1px rgba(0,0,0,0.8)) !important;
}
body #TommyBookingSupport .tbs-calendar .tbs-day.tbs-selected
{
background-color:#b3d667 !important;
}
#TommyBookingSupport .tbs-row.tbs_persoonscategorien,#TommyBookingSupport .tbs-row.tbs_accommodaties,#TommyBookingSupport .tbs-row.tbs_kalenders,#TommyBookingSupport .tbs-container-fluid.tbs_kassabon,#TommyBookingSupport .tbs-row.tbs_artikelen,#TommyBookingSupport .tbs-row.tbs_persoon,#TommyBookingSupport .tbs-row .tbs-page-overzicht>.tbs-container-fluid>.tbs-row:nth-child(2)
{
background-color:rgb(245,245,245) !important;
}
#TommyBookingSupport .tbs_kassabon_overzicht h2
{
font-size:16px !important;
}
#TommyBookingSupport .tbs_kassabon_overzicht h2.tbs-totaal
{
font-size:20px !important;
}
.the-matrix.periods .matrix-row .fixed-one
{
height:61px !important;
border:none !important;
width:250px !important;
}
.the-matrix.periods .matrix-beschikbaarheid
{
line-height:inherit !important;
height:61px !important;
}
.search-and-book-widget .tommy-zeb-wrapper *
{
font-family:'Roboto', sans-serif !important;
}
.search-and-book-widget .tommy-zeb-wrapper .tommy-zeb-left
{
background:none !important;
color:#DCCD11 !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories .ng-scope
{
display:inline !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories .ng-scope:first-child
{
display:inline !important;
}
.search-and-book-widget .tommy-zeb-wrapper-mini h2.ng-binding
{
display:inline !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories .ng-scope
{
padding:0 !important;
}
.tommy-zeb-accommodation-types.ng-hide
{
display:block !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left .tommy-zeb-accommodation-types
{
flex:1 1 100px !important;
max-width:inherit !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left .tommy-zeb-accommodation-types
{
display:block !important;
margin-right:30px !important;
padding-right:20px !important;
border-bottom:none !important;
border-right:1px solid rgba(255,255,255,0.4) !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left .tommy-zeb-accommodation-types .ng-isolate-scope
{
width:100% !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories-collapse
{
display:flex !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories-collapse .tommy-zeb-travelcompany-total
{
height:auto !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-category-list
{
z-index:1 !important;
margin-top:10px !important;
background-color:#FFF !important;
box-shadow:0 3px 3px 0 rgba(0,0,0,0.3) !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-person-category
{
flex-wrap:nowrap !important;
margin:5px 0 !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-person-category .tommy-zeb-accommodation-person-category-label
{
flex:1 1 auto !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-person-category .tommy-zeb-accommodation-person-category-choice
{
flex:0 0 85px !important;
align-self:center !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-person-category-choice .ng-binding
{
min-width:20px !important;
line-height:22px !important;
text-align:center !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-range
{
background-color:#b3d667 !important;
color:#000 !important;
transition:all 0.5s ease !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-range:hover
{
background-color:#3a4c4e !important;
color:#FFF !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-range.tommy-zeb-min span
{
top:-1px !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-range.disabled
{
opacity:0.25 !important;
}
@media (min-width:1200px) {
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories .tommy-zeb-accommodation-person-category-label { line-height:28px; }
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories select { float:right; }
.content .tommy-zeb-wrapper .tommy-zeb-result-image img { max-width:250px; }
.content .tommy-zeb-wrapper .tommy-zeb-result-details {
width:390px;
float:left;
}
}
@media (min-width:1200px) and (max-width:1300px) {
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-date .tommy-zeb-date-begin { display:block; }
}
@media (min-width:980px) and (max-width:1199px) {
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini * { display:inline-block; }
.search-and-book-widget .tommy-zeb-wrapper .tommy-zeb-date-begin { margin-bottom:0; }
.content .tommy-zeb-wrapper .tommy-zeb-result-image img { max-width:180px; }
.content .tommy-zeb-wrapper .tommy-zeb-result-details {}
}
.search-and-book-widget .tommy-zeb-wrapper select option
{
display:block !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left
{
font-size:16px !important;
}
.search-and-book-widget .tommy-zeb-wrapper * h2
{
color:#fff !important;
font-size:18px !important;
font-weight:800 !important;
font-family:'Oswald', sans-serif !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories,.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-date
{
border-right-color:#FFF !important;
}
.search-and-book-widget .tommy-zeb-wrapper-mini .tommy-zeb-left.ng-scope
{
padding:10 !important;
}
.search-and-book-widget .tommy-zeb-wrapper-mini button.tommy-zeb-btn
{
background-color:#e0e03a !important;
font-size:14px !important;
font-weight:600 !important;
font-family:'Oswald', sans-serif !important;
cursor:pointer !important;
}
.search-and-book-widget .tommy-zeb-wrapper-mini button.tommy-zeb-btn:hover
{
background-color:#DCCD11 !important;
color:#fff !important;
}
body .tommy-zeb-wrapper .tommy-zeb-left
{
background:#DCCD11 !important;
border-radius: 20px 5px 5px 20px;
padding-left: 20px;
padding-top: 20px;
}
body .tommy-zeb-wrapper .tommy-zeb-left h2
{
color:#ffffff !important;
font-size: 18px;
font-weight:600 !important;
line-height:1 !important;
font-family:'Oswald', sans-serif !important;
}
body .tommy-zeb-wrapper *h3
{
font-weight:400 !important;
font-size: 14px;
text-transform:uppercase !important;
font-family:'Oswald', sans-serif !important;
padding-bottom: 20px;
}
body .tommy-zeb-wrapper .tommy-zeb-btn:hover
{
background-color:#f4cd29 !important;
color:#3a4c4e !important;
}
style>.search-and-book-widget
{
z-index:200 !important;
position:absolute !important;
left:10px !important;
right:10px !important;
bottom:30px !important;
text-align:center !important;
}
.search-and-book-widget .holder
{
position:relative !important;
display:inline-block !important;
min-width:300px !important;
padding:20px 20px !important;
border-radius: 20px 5px 5px 20px !important;
border-width:10px !important;
background-color:#806902 !important;
box-shadow:10px 10px 10px rgba(0,0,0,0.1) !important;
color:#3a4c4e !important;
text-align:left !important;
}
.search-and-book-widget .title
{
position:absolute !important;
left:30 !important;
bottom:100% !important;
color:#f4cd29 !important;
font-size:30px !important;
line-height:1.3 !important;
font-weight:800 !important;
text-transform:uppercase !important;
font-family:'Oswald', sans-serif !important;
text-shadow:3px 0 1px rgba(0,0,0,0.1) !important;
}
#TommyBookingSupport .tbs-navbar-default .tbs-navbar-nav>.tbs-active>a,#TommyBookingSupport .tbs-navbar-default .tbs-navbar-nav>.tbs-active>a:focus,#TommyBookingSupport .tbs-navbar-default .tbs-navbar-nav>.tbs-active>a:hover
{
color:#fff !important;
background-color:#3a4c4e !important;
}
#TommyBookingSupport .tbs-btn-info
{
color:#fff !important;
background-color:#3a4c4e !important;
border-color:#3a4c4e !important;
}
#TommyBookingSupport .tbs-btn-info:hover
{
background-color:#f4cd29 !important;
border-color:#f4cd29 !important;
}
#TommyBookingSupport .tbs-btn-success
{
color:#fff !important;
background-color:#3a4c4e !important;
border-color:#3a4c4e !important;
}
#TommyBookingSupport .tbs-btn-success:hover
{
color:#fff !important;
background-color:#f4cd29 !important;
border-color:#f4cd29 !important;
}
#TommyBookingSupport .tbs-btn-info,#TommyBookingSupport .tbs-btn-success
{
transition:all 0.5s ease !important;
}
#TommyBookingSupport .mapplic-map a.mapplic-pin
{
filter:drop-shadow(0 3px 1px rgba(0,0,0,0.8)) !important;
}
body #TommyBookingSupport .tbs-calendar .tbs-day.tbs-selected
{
background-color:#b3d667 !important;
}
#TommyBookingSupport .tbs-row.tbs_persoonscategorien,#TommyBookingSupport .tbs-row.tbs_accommodaties,#TommyBookingSupport .tbs-row.tbs_kalenders,#TommyBookingSupport .tbs-container-fluid.tbs_kassabon,#TommyBookingSupport .tbs-row.tbs_artikelen,#TommyBookingSupport .tbs-row.tbs_persoon,#TommyBookingSupport .tbs-row .tbs-page-overzicht>.tbs-container-fluid>.tbs-row:nth-child(2)
{
background-color:rgb(245,245,245) !important;
}
#TommyBookingSupport .tbs_kassabon_overzicht h2
{
font-size:16px !important;
}
#TommyBookingSupport .tbs_kassabon_overzicht h2.tbs-totaal
{
font-size:20px !important;
}
.the-matrix.periods .matrix-row .fixed-one
{
height:61px !important;
border:none !important;
width:250px !important;
}
.the-matrix.periods .matrix-beschikbaarheid
{
line-height:inherit !important;
height:61px !important;
}
.search-and-book-widget .tommy-zeb-wrapper *
{
font-family:'Roboto', sans-serif !important;
}
.search-and-book-widget .tommy-zeb-wrapper .tommy-zeb-left
{
background:none !important;
color:#3a4c4e !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories .ng-scope
{
display:inline !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories .ng-scope:first-child
{
display:inline !important;
}
.search-and-book-widget .tommy-zeb-wrapper-mini h2.ng-binding
{
display:inline !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories .ng-scope
{
padding:0 !important;
}
.tommy-zeb-accommodation-types.ng-hide
{
display:block !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left .tommy-zeb-accommodation-types
{
flex:1 1 100px !important;
max-width:inherit !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left .tommy-zeb-accommodation-types
{
display:block !important;
margin-right:30px !important;
padding-right:20px !important;
border-bottom:none !important;
border-right:1px solid rgba(255,255,255,0.4) !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left .tommy-zeb-accommodation-types .ng-isolate-scope
{
width:100% !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories-collapse
{
display:flex !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories-collapse .tommy-zeb-travelcompany-total
{
height:auto !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-category-list
{
z-index:1 !important;
margin-top:10px !important;
background-color:#FFF !important;
box-shadow:0 3px 3px 0 rgba(0,0,0,0.3) !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-person-category
{
flex-wrap:nowrap !important;
margin:5px 0 !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-person-category .tommy-zeb-accommodation-person-category-label
{
flex:1 1 auto !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-person-category .tommy-zeb-accommodation-person-category-choice
{
flex:0 0 85px !important;
align-self:center !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-accommodation-person-category-choice .ng-binding
{
min-width:20px !important;
line-height:22px !important;
text-align:center !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-range
{
background-color:#b3d667 !important;
color:#000 !important;
transition:all 0.5s ease !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-range:hover
{
background-color:#3a4c4e !important;
color:#FFF !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-range.tommy-zeb-min span
{
top:-1px !important;
}
.search-and-book-widget .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-range.disabled
{
opacity:0.25 !important;
}
</style>
Code body
<tommy-widget data-widget="default" data-api-token="Gastmolen:d982309a461bcc3abc15489201522c8df291aa650eabafda45f1583b03992cc9" data-language="nl" data-min-date="2020-04-01" data-period="day" data-booking-url="https://www.gastmolen.nl/tarifs-reservation#verblijf" data-format-information-link="true">
</tommy-widget>
Java scr. footer
(1) <script src="https://api.tommybookingsupport.com/widgets/zoekenboek/js/init.js"></script>
(2) <script src="https://api.tommybookingsupport.com/widgets/zoekenboek/js/init.js"></script>
(3) <script src="https://api.tommybookingsupport.com/widgets/js/widget.js" type="application/javascript" language="javascript"></script>
CSS header
<style>
#TommyBookingSupport { min-height: 200px; }
.tbs-clone { display: none !important; }
.tbs-disabled {
opacity: 1;
pointer-events: none;
}
.tbs-legenda .tbs-day,
.tbs-calendar .tbs-day { overflow: hidden; border-radius: 0.5em; background-color: #5db862; position: relative;text-align: center; border:1px solid white; transition: background-color 0.25s ease; -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; }
.tbs-calendar td { border: none; }
.tbs-calendar .tbs-day div {z-index:50; color: rgba(255,255,255,0.4); font-size:1.1em; line-height: 200%; }
.tbs-legenda .tbs-day{ border-radius:0.25em ; border:0 ;}
.tbs-legenda .tbs-day.tbs-nietinmaand,
.tbs-calendar .tbs-day.tbs-nietinmaand { visibility: hidden; }
.tbs-legenda .tbs-day.tbs-bezet,
.tbs-calendar .tbs-day.tbs-bezet { background:#ff554f ; color:#fff}
.tbs-calendar .tbs-day.tbs-beschikbaar { background-color: #43a538; cursor: pointer; }
.tbs-calendar .tbs-day.tbs-beschikbaar:hover { transition: background-color 0.25s ease; background-color: #327c2a; }
.tbs-calendar .tbs-day.tbs-beschikbaar:hover:before,
.tbs-calendar .tbs-day.tbs-beschikbaar:hover:after { display: none; }
.tbs-calendar .tbs-day.tbs-beschikbaar div { margin:0 auto;z-index:50;color:#fff; text-decoration: underline }
.tbs-legenda .tbs-day.tbs-nietbeschikbaar,
.tbs-calendar .tbs-day.tbs-nietbeschikbaar { background-color:darkgrey; }
.tbs-calendar .tbs-day.tbs-vertrekdag,
.tbs-calendar .tbs-day.tbs-aankomstdag { background:#5cb85c;}
.tbs-calendar .tbs-day.tbs-aankomstdag:before {content: ''; position: absolute; top: 0; left: -20%; width: 100%; height: 200%; background-color: #43a538; -webkit-transform: rotate(135deg);-moz-transform: rotate(135deg); transform: rotate(135deg); }
.tbs-calendar .tbs-day.tbs-vertrekdag:before {content: ''; position: absolute; top: 0; left: 20%; width: 100%; height: 200%; background-color: #43a538; -webkit-transform: rotate(45deg);-moz-transform: rotate(45deg); transform: rotate(45deg); }
.tbs-legenda .tbs-day.tbs-aankomstdag,
.tbs-legenda .tbs-day.tbs-vertrekdag{ background:#5cb85c;}
.tbs-legenda .tbs-day.tbs-aankomstdag:before {content: ''; position: absolute; top: 0; left: -20%; width: 100%; height: 200%; background-color: #43a538; -webkit-transform: rotate(135deg);-moz-transform: rotate(135deg); transform: rotate(135deg); }
.tbs-legenda .tbs-day.tbs-vertrekdag:before {content: ''; position: absolute; top: 0; left: 20%; width: 100%; height: 200%; background-color: #43a538; -webkit-transform: rotate(45deg);-moz-transform: rotate(45deg); transform: rotate(45deg); }
.tbs-legenda .tbs-day.tbs-beschikbaar:after,
.tbs-legenda .tbs-day.tbs-aankomstdag:after,
.tbs-legenda .tbs-day.tbs-vertrekdag:after { z-index:100;content:'-';position: absolute; top: 0; left:0.5em;color: #fff; font-weight:600;}
.tbs-legenda .tbs-day.tbs-verleden,
.tbs-calendar .tbs-day.tbs-verleden { background-color: lightgrey; }
.tbs-calendar .tbs-day.tbs-nietbeschikbaar.tbs-aankomstdag-bezet:after,
.tbs-calendar .tbs-day.tbs-nietbeschikbaar.tbs-vertrekdag-bezet:after{display:none;}
.tbs-calendar .tbs-day > div { position: relative; height: 0; width: 100%; padding-bottom: 100%; }
.tbs-calendar .tbs-day > div > div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex;
justify-content: center;
align-items: center;}
.tbs-calendar .tbs-day.tbs-aankomstdag-bezet:after,
.tbs-calendar .tbs-day.tbs-beschikbaar.tbs-aankomstdag-bezet:after {content: ''; position: absolute; top: 0; left: 20%; width: 100%; height: 200%; background-color: #ff554f; -webkit-transform: rotate(45deg);-moz-transform: rotate(45deg); transform: rotate(45deg); }
.tbs-calendar .tbs-day.tbs-vertrekdag-bezet::after,
.tbs-calendar .tbs-day.tbs-beschikbaar.tbs-vertrekdag-bezet:after {content: ''; position: absolute; top: 0; left: -20%; width: 100%; height: 200%; background-color: #ff554f; -webkit-transform: rotate(135deg);-moz-transform: rotate(135deg); transform: rotate(135deg); }
.tbs-calendar .tbs-day.tbs-aankomstdag.tbs-aankomstdag-bezet:after,
.tbs-calendar .tbs-day.tbs-vertrekdag.tbs-vertrekdag-bezet:after{ background: #ff554f !important;}
.tbs-calendar .tbs-day.tbs-aankomstdag.tbs-aankomstdag-bezet,
.tbs-calendar .tbs-day.tbs-vertrekdag.tbs-vertrekdag-bezet{ cursor: auto; text-decoration: none; }
.tbs-calendar .tbs-day.tbs-aankomstdag.tbs-aankomstdag-bezet div,
.tbs-calendar .tbs-day.tbs-vertrekdag.tbs-vertrekdag-bezet div{ cursor: auto; text-decoration: none; color: rgba(255,255,255,0.4); }
.tbs-calendar .tbs-day.tbs-aankomstdag.tbs-aankomstdag-bezet:hover,
.tbs-calendar .tbs-day.tbs-vertrekdag.tbs-vertrekdag-bezet:hover{ transition: background-color 0s; background: #ff554f !important; }
.tbs-calendar .tbs-day.tbs-beschikbaar.tbs-vertrekdag.tbs-vertrekdag-bezet:hover{ background: #ff554f !important; }
.tbs-calendar .tbs-day.tbs-beschikbaar.tbs-vertrekdag.tbs-vertrekdag-bezet div { font-weight:normal;border:0;}
.tbs-calendar .tbs-day.tbs-selected { background-color:#3c8bb0 !important; transition: background-color 0.5s ease;}
.tbs-calendar .tbs-day.tbs-selected div { z-index:50; font-weight:600; border:0; color: white !important; text-decoration: none;}
.tbs-calendar .tbs-day.tbs-selected:after,
.tbs-calendar .tbs-day.tbs-selected:before {display: none; }
.tbs-calendar .tbs-day.tbs-highlight:before { content: ''; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0,0,0,0.25); border-radius: 0.5em; }
.tbs-calendar table { border-collapse: inherit !important; border-spacing: 1px; table-layout: fixed; }
.tbs-calendar table > thead > tr > th { border: none; border-bottom: 1px solid #ddd; text-align: center; }
.tbs-calendar table thead > tr > th.tbs-month { border-bottom: 2px solid #ddd; }
.tbs-legenda { background-color: #f9f9f9; }
.tbs-legenda ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.tbs-legenda ul li { display: inline-block; margin-bottom: 10px; }
.tbs-legenda .tbs-day { width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin: 0 5px 0 10px; }
.tbs_totaal_overzicht .tbs_kassabon_toggle_show,
.tbs_totaal_overzicht .tbs_kassabon_toggle_hide { display: none; }
.tbs_kassabon .tbs-persoonscategorie > span,
.tbs_overzicht .tbs-persoonscategorie > span { display: block;}
.tbs_overlay-mask { background: rgba(0,0,0,.25); min-height: 100px; }
.tbs_overlay-mask i { position: absolute; left: 50%; top: 50%; margin-left: -27px; margin-top: -21px }
.tbs_overlay-mask > div { position: absolute; top: 60%; left: 0; right: 0; text-align: center; }
.tbs_overlay-mask > div > span { padding: 1em; background-color: white; border-radius: 0.75em; border: 1px solid rgba(0,0,0,.2); }
.tbs-hr { border-top: 1px solid #ddd; margin-top: 10px; padding-top: 10px; }
.tbs-hr-bottom { border-bottom: 1px solid #ddd; margin-bottom: 10px; padding-bottom: 10px; }
.tbs_kassabon .tbs-specificaties .tbs-row,
.tbs_overzicht .tbs-specificaties .tbs-row{ margin-top: 5px; margin-bottom: 5px }
.tbs_kassabon .tbs-specificaties .tbs-label,
.tbs_overzicht .tbs-specificaties .tbs-label{ padding: .2em .3em .3em; }
.tbs_kassabon .tbs-original .tbs-amount{
text-decoration: line-through;
}
.tbs-btn-block+.tbs-btn-block { margin-top: 0px; }
.tbs-has-error.tbs-labels { color: #a94442;}
.tbs-btn[data-bind="prevPage"]::before,
.tbs-btn[data-bind="finish"]::after,
.tbs-btn[data-bind="nextPage"]::after {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
.tbs-btn[data-bind="prevPage"]::before {
margin-right: 5px;
content: "\f053";
}
.tbs-btn[data-bind="nextPage"]::after,
.tbs-btn[data-bind="finish"]::after {
margin-left: 5px;
content: "\f054";
}
div.tbs_av { display: flex }
div.tbs_av input#tbs_av {
margin-right: 15px;
}
div.tbs_av label {
vertical-align: top;
flex: 1;
}
.tbs_overlay-mask .tbs_mask-text {
display: block;
margin: 0 auto;
max-width: 90%;
}
.tbs-signin-wrapper,
.tbs-signin-wrapper .tbs-signin-action { display: none; }
.tbs-signin-wrapper.tbs-signin-enabled { display: block; }
.tbs-signin-wrapper.tbs-signin-action-signin .tbs-signin-action-signin { display: block; }
.tbs-signin-wrapper.tbs-signin-action-signedin .tbs-signin-action-signedin { display: block; }
.tbs-signin-wrapper.tbs-signin-action-skipped .tbs-signin-action-skipped { display: block; }
.tbs-signin-wrapper.tbs-signin-action-forgot .tbs-signin-action-forgot { display: block; }
.tbs-signin-toggles .tbs-signin-button {
padding: 3px 0;
border-top: 1px solid #e7e7e7;
border-bottom: 1px solid #e7e7e7;
}
@media screen and (max-width: 767px) {
.tbs-table-responsive { border: none !important; }
.tbs-legenda ul {
display: block;
width: 100%;
margin: 0 auto;
}
.tbs-legenda ul li {
display: block;
width: 100%;
text-align: left;
}
}
.tbs_kassabon .tbs-break,
.tbs_overzicht .tbs-break{ display: block; }
.tbs-img-responsive { width: 100%; }
.tbs-page { display: none; }
.tbs-page.active { display: block;}
.tbs-popover { min-width: 350px; }
.tbs-flag { position: relative; display: inline-block; width: 16px; height: 11px; }
@media (max-width: 991px) {
.tbs_talen {
display: none !important;
}
.tbs-flag{
position: relative; display: inline-block; width: 32px !important; height: 22px !important;
}
.tbs_kassabon .tbs-accommodatie-image{
display:none !important;
}
/* will be shown as soon as a price is calculated */
.tbs_kassabon { display: none; }
/* mobile kassabon collapse */
.tbs_kassabon .tbs_kassabon_overzicht { display: none !important; }
.tbs_kassabon.tbs_kassabon_show .tbs_kassabon_overzicht { display: block !important; }
.tbs_kassabon .tbs_kassabon_toggle i { display: inline !important; font-size: 22px !important; }
.tbs_kassabon .tbs_kassabon_toggle_show { display: inline !important; }
.tbs_kassabon.tbs_kassabon_show .tbs_kassabon_toggle_show { display: none !important; }
.tbs_kassabon.tbs_kassabon_show .tbs_kassabon_toggle_hide { display: inline !important; }
.tbs_kassabon .tbs-btn.tbs-btn-success { display: none !important; }
.tbs_kassabon .tbs-totaal > * { display: inline !important; }
.tbs_kassabon .tbs_totaal_overzicht .tbs-totaal {
touch-action: manipulation;
cursor: pointer;
background: #666;
color: #000000;
padding: 8px;
font-size: 24px;
}
}
@media (min-width: 991px) {
.tbs_talen-mobileontop {
display: none !important;
}
.tbs-flag{
position: relative; display: inline-block; width: 16px !important; height: 11px !important;
}
.mobileonly {
display:none !important;
}
}
.tbs_talen ul { list-style: none; padding: 0; }
.tbs_talen ul li { display: inline-block; padding: 0 10px 0 0 }
.tbs_talen-mobileontop ul { list-style: none; padding: 0; }
.tbs_talen-mobileontop ul li { display: inline-block; padding: 0 16px 0 0 }
.tbs-flag-nl { background: url('../../assets/images/flags/nl.png') no-repeat; background-size: 100% 100%;}
.tbs-flag-gb { background: url('../../assets/images/flags/gb.png') no-repeat; background-size: 100% 100%; }
.tbs-flag-fr { background: url('../../assets/images/flags/fr.png') no-repeat; background-size: 100% 100%; }
.tbs-flag-de { background: url('../../assets/images/flags/de.png') no-repeat; background-size: 100% 100%; }
.tbs-flag-pt { background: url('../../assets/images/flags/pt.png') no-repeat; background-size: 100% 100%; }
.tbs-flag-no { background: url('../../assets/images/flags/no.png') no-repeat; background-size: 100% 100%; }
.tbs-flag-it { background: url('../../assets/images/flags/it.png') no-repeat; background-size: 100% 100%; }
.tbs-flag-se { background: url('../../assets/images/flags/se.png') no-repeat; background-size: 100% 100%; }
.tbs-flag-es { background: url('../../assets/images/flags/es.png') no-repeat; background-size: 100% 100%; }
.tbs-selected-location span.tbs-translate { font-weight: bold; }
.tbs-selected-location { display: none; }
.tbs-selected-location.show { display: block; }
.tbs-plattegrond .mapplic-pin {
background-image: unset;
filter: drop-shadow(0 3px 1px rgba(0, 0, 0, 0.8));
}
.tbs-plattegrond .mapplic-pin svg {
fill: currentColor;
}
.tbs-plattegrond .mapplic-pin.pin,
.tbs-plattegrond .mapplic-pin.green {
color: #00FF00;
background-image: unset;
}
.tbs-plattegrond .mapplic-pin.selected {
color: #EDE900;
background-image: unset;
}
.tbs-plattegrond .mapplic-pin.pin-red {
color: #F13742;
background-image: unset;
}
.tbs-mg-b-5 { margin-bottom: 5px; }
.tbs-mg-b-10 { margin-bottom: 10px; }
.tbs-mg-b-15 { margin-bottom: 15px; }
.tbs-mg-b-20 { margin-bottom: 20px; }
.tbs-mg-b-25 { margin-bottom: 25px; }
.tbs-mg-b-30 { margin-bottom: 30px; }
.tbs-mg-b-40 { margin-bottom: 40px; }
.tbs-mg-b-50 { margin-bottom: 50px; }
.tbs-mg-t-5 { margin-top: 5px; }
.tbs-mg-t-10 { margin-top: 10px; }
.tbs-mg-t-15 { margin-top: 15px; }
.tbs-mg-t-16 { margin-top: 16px; }
.tbs-mg-t-20 { margin-top: 20px; }
.tbs-mg-t-25 { margin-top: 25px; }
.tbs-mg-t-30 { margin-top: 30px; }
.tbs-mg-t-40 { margin-top: 40px; }
.tbs-mg-t-50 { margin-top: 50px; }
.tbs-pd-b-5 { padding-bottom: 5px; }
.tbs-pd-b-10 { padding-bottom: 10px; }
.tbs-pd-b-15 { padding-bottom: 15px; }
.tbs-pd-b-20 { padding-bottom: 20px; }
.tbs-pd-b-25 { padding-bottom: 25px; }
.tbs-pd-b-30 { padding-bottom: 30px; }
.tbs-pd-b-40 { padding-bottom: 40px; }
.tbs-pd-b-50 { padding-bottom: 50px; }
.tbs-pd-t-5 { padding-top: 5px; }
.tbs-pd-t-10 { padding-top: 10px; }
.tbs-pd-t-15 { padding-top: 15px; }
.tbs-pd-t-20 { padding-top: 20px; }
.tbs-pd-t-25 { padding-top: 25px; }
.tbs-pd-t-30 { padding-top: 30px; }
.tbs-pd-t-40 { padding-top: 40px; }
.tbs-pd-t-50 { padding-top: 50px; }
.tbs-strike { text-decoration: line-through}
</style>
Code body
<div id="TommyBookingSupport" data-widget="boeken" data-apikey="d982309a461bcc3abc15489201522c8df291aa650eabafda45f1583b03992cc9" data-account="Gastmolen" data-language="nl" data-google-analytics="UA-2448819-20" data-algemene-voorwaarden="https://www.gastmolen.nl/algemenevoorwaarden" data-url-success="https://www.gastmolen.nl/bedankt" data-url-error="https://www.gastmolen.nl/fout" data-ideal="true" data-locatie-keuze="true" data-locatie-keuze-voorkeursvraag='true'
data-url-privacy="https://www.gastmolen.nl/privacyverklaring" data-kalenderdatum="2020-04-01">
</div>
Java scr. footer
(1)<script src="https://api.tommybookingsupport.com/widgets/zoekenboek/js/init.js"></script>
(2)(onzinnig)<script src="https://api.tommybookingsupport.com/widgets/zoekenboek/js/init.js"></script>
(3)<script src="https://api.tommybookingsupport.com/widgets/js/widget.js" type="application/javascript" language="javascript"></script>
