/*
  Sizes:
  Desktop: fixed widths.
  Tablet: no design yet.
  Mobile: full, scalable width
  
  Colors:
  #005db1 Medium blue - Body background.
  #092289 Dark blue - Text.
  #103073 Dark blue - Backgrounds.
  #75c2e7 Light blue - Backgrounds.
  #92d2ed Light blue - Hover backgrounds.
  #94aec5 Light blue / Grey - Lines & borders.
  #949494 Grey - Lines & borders.
*/
html {
  background : #006ac5 url(../images/background-top.png) repeat-x;
  overflow-y : scroll;
}

body {
  margin      : 0px auto 15px auto;
  max-width   : 940px; /* At full width, the logo and page-body should be aligned at the 'I' in the proxImo ferry logo. */
  background  : transparent url(../images/rocks.png) no-repeat 440px 62px;
  font-family : 'Droid Sans', sans-serif;
  font-size   : 12px;
}

.wf-loading body {
  font-family : sans-serif;
}

.wf-active body {
  font-family : 'Droid Sans', sans-serif;
}

.app-state-loading,
.app-state-loading a {
  cursor : progress !important;
}

/* Taken from jQuery UI. */
.u-hidden-accessible {
  border   : 0;
  clip     : rect(0 0 0 0);
  height   : 1px;
  margin   : -1px;
  overflow : hidden;
  padding  : 0;
  position : absolute;
  width    : 1px;
}

.page-header {
  position : relative;
  height   : 130px;
}

.page-body {
  margin-left : 80px;
  max-width   : 730px; /* Instead of width, to prevent horiz. scrollbar in the 16px range around 730 if there is a vertical scrollbar. */
}

.main-nav {
  margin-left      : auto;
  margin-right     : auto;
  max-width        : 730px; /* Instead of width, to prevent horiz. scrollbar in the 16px range around 730 if there is a vertical scrollbar. */
  height           : 33px;
  line-height      : 33px;
  background-color : #092286;
  color            : white;
}

.main-nav .menu-activator {
  display     : none; /* Will be shown on small screens. */
  margin-left : 10px;
  border      : none; /* Undo default button styles. */
  background  : transparent; /* Undo default button styles. */
}

.main-nav .menu-activator-state {
  display: none;
}

.main-nav ul {
  float           : right;
  list-style-type : none;
}

.main-nav li {
  display        : inline-block;
  line-height    : 33px;
  text-transform : uppercase;
}

.main-nav li a {
  display         : inline-block;
  padding-left    : 10px;
  padding-right   : 10px;
  color           : inherit;
  text-decoration : none;
}

.main-nav li:hover,
.main-nav li.active {
  background-color : #00a1d4;
}

.has-sub-nav {
  position            : relative;
  background-image    : url("../images/arrow-small-white-down.png");
  background-repeat   : no-repeat;
  background-position : 4px 14px;
  padding-left        : 8px;
}

.sub-nav {
  display          : none;
  position         : absolute;
  top              : 33px;
  right            : 0;
  z-index          : 10;
  background-color : #092286;
}

.sub-nav li {
  display : block;
}

.sub-nav li a {
  display : block;
}

.logo {
  margin     : 0px;
  position   : absolute;
  top        : 56px;
  left       : 20px;
  /* Desktop */
  width      : 211px;
  height     : 41px;
  background : transparent url(../images/logo-text.png) no-repeat;
}

.logo a {
  display     : block;
  height      : 100%;
  text-indent : -9999em;
  overflow    : hidden;
}

.big-button {
  display        : inline-block;
  padding-top    : 2px; /* To vertically nudge the text towards the exact center of the button. */
  padding-right  : 10px;
  padding-left   : 32px;
  height         : 37px; /* border-box: 39px; */
  background     : #929292 url(../images/button-big-bg.png) left top repeat-x;
  line-height    : 36px;
  font-size      : 13px;
  color          : white;
  text-transform : uppercase;
  border-radius  : 3px;
  box-shadow     : 0 0 1px 1px #929292;
}

.app-state-icon {
  visibility : hidden;
}

.app-state-loading .app-state-icon {
  visibility : visible;
  background : transparent url(../images/loading-on-blue-tp-16.gif) center center no-repeat;
}

.main-nav .app-state-icon {
  display     : inline-block;
  width : 16px; /* Force the element to be as wide as the 16x16 icon. */
  margin-left : 10px;
  /* Height is not needed, because this is forced by a non-breaking space (which aligns the element perfectly with the other navigation items). */
}

.main-nav li.app-state-icon:hover {
  background-color : transparent; /* Undo the default behaviour of li's in the main nav for this specific element. */
}

.no-touch .has-sub-nav:hover .sub-nav, /* For non-touch devices, the nav is shown on hover as well (pure css). */
.has-sub-nav.expanded .sub-nav { /* For all devices, the nav is shown when the class is 'expanded' (but it needs JS). */
  display : block;
}

/*
  Weather summary in the page header, not shown in the normal width website,
  because the sidebar contains a full weather block.
*/
.page-header .weather {
  display : none;
}

/*
  Message box for page wide notifications.
*/
.global-warning {
  margin-bottom  : 8px; /* 15px minus arrow. */
  padding-bottom : 7px; /* Room for the arrow. */
  background     : transparent url(../images/warning-arrow.png) no-repeat 40px bottom;
  font-size      : 13px;
  color          : #ffffff;
}

.global-warning .message {
  padding       : 10px 15px;
  background    : #eb5c24;
  border-radius : 4px;
}

/*
  Timetable navigation
  
  Contains:
  - Direction switch button.
  - Current direction in text.
  - Currently selected date.
  - Prev/Next day buttons.
  - Dropdown calendar.
*/
.timetable-nav {
  margin-bottom : 15px;
  clear         : both;
  height        : 49px;
  background    : #fff;
  border-radius : 2px;
}

.timetable-nav .item {
  float       : left;
  line-height : 49px;
  text-align  : center;
  font-size   : 15px;
  font-weight : bold;
  color       : #092289;
}

.timetable-nav .item.current-direction {
  width          : 190px;
  border-left    : 1px solid #092289;
  border-right   : 1px solid #092289;
  background     : #ffffff;
  text-transform : uppercase;
}

.timetable-nav .icon {
  display             : inline-block; /* So that we can assign widths to specific icons. */
  text-indent         : -9999em;
  background-position : center center;
  background-repeat   : no-repeat;
}

.timetable-nav .icon.switch-direction {
  width            : 65px;
  background-image : url(../images/viceversa-arrow.png);
}

.timetable-nav .icon.to {
  width            : 15px;
  background-image : url(../images/arrow-small-blue-right.png);
}

.timetable-nav .date {
  position     : relative;
  float        : left;
  border-right : 1px solid #092289;
}

.timetable-nav .icon.previous-day {
  width            : 27px;
  background-image : url(../images/arrow-small-blue-left.png);
}

.timetable-nav .icon.previous-day.disabled {
  background-image : url(../images/arrow-small-grey-left.png);
  cursor           : default;
}

.timetable-nav .item.current-day {
  width          : 125px;
  border-left    : 1px solid #b3b3b3;
  border-right   : 1px solid #b3b3b3;
  text-transform : uppercase;
}

.js .timetable-nav .item.current-day {
  cursor : pointer; /* The app will react on a click, so show the hand. */
}

.timetable-nav .icon.next-day {
  width            : 27px;
  background-image : url(../images/arrow-small-blue-right.png);
}

.timetable-nav .icon.next-day.disabled {
  background-image : url(../images/arrow-small-grey-right.png);
  cursor           : default;
}

.timetable-nav .datepicker {
  position   : absolute;
  display    : none;
  top        : 49px;
  right      : 0px;
  z-index    : 1000;
  width      : 100%;
  background : white url(../images/background-calendar.png) repeat-x top left;
}

.timetable-nav-container-bottom .timetable-nav .datepicker {
  top : -215px;
}

.timetable-nav .datepicker .ui-datepicker {
  border  : 1px solid #949494;
  padding : 32px 16px 18px 16px;
}

.timetable-nav .datepicker .ui-datepicker-header {
  height : 25px;
}

.timetable-nav .datepicker .ui-icon {
  display     : block;
  width       : 7px;
  text-indent : -99999px;
  overflow    : hidden;
  cursor      : pointer;
}

.timetable-nav .datepicker .ui-datepicker-prev {
  float : left;
}

.timetable-nav .datepicker .ui-datepicker-next {
  float : right;
}

.timetable-nav .datepicker .ui-datepicker-prev .ui-icon {
  background : transparent url(../images/arrow-small-blue-left.png) no-repeat left center;
}

.timetable-nav .datepicker .ui-datepicker-prev.ui-state-disabled .ui-icon {
  background : transparent url(../images/arrow-small-grey-left.png) no-repeat right center;
  cursor     : default;
}

.timetable-nav .datepicker .ui-datepicker-next .ui-icon {
  background : transparent url(../images/arrow-small-blue-right.png) no-repeat right center;
}

.timetable-nav .datepicker .ui-datepicker-next.ui-state-disabled .ui-icon {
  background : transparent url(../images/arrow-small-grey-right.png) no-repeat right center;
  cursor     : default;
}

.timetable-nav .datepicker .ui-datepicker-title {
  text-align     : center;
  text-transform : uppercase;
  color          : #092289;
  font-weight    : bold;
}

.timetable-nav .datepicker .ui-datepicker-title .ui-datepicker-year {
  display : none;
}

.timetable-nav .datepicker .ui-datepicker-calendar {
  width : 100%;
}

.timetable-nav .datepicker .ui-datepicker-calendar th,
.timetable-nav .datepicker .ui-datepicker-calendar td {
  border     : 3px solid white;
  width      : 14%;
  text-align : center;
}

.timetable-nav .datepicker .ui-datepicker-calendar .ui-datepicker-week-end {
  border-width : 3px 0px 3px 0px;
}

.timetable-nav .datepicker .ui-datepicker-calendar th {
  background-color : #103073;
  color            : #ffffff;
  font-weight      : normal;
  font-size        : 0.9em;
}

.timetable-nav .datepicker .ui-datepicker-calendar td .ui-state-active,
.timetable-nav .datepicker .ui-datepicker-calendar td .ui-state-hover {
  background-color : #103073;
  color            : #ffffff;
}

.timetable-nav .datepicker .ui-datepicker-calendar td {
  background-color : #c6d8f1;
  line-height      : 18px;
}

.timetable-nav .datepicker .ui-datepicker-calendar td.ui-state-disabled {
  color : #949494;
}

.timetable-nav .datepicker .ui-datepicker-calendar td a {
  display         : block;
  color           : inherit;
  text-decoration : none;
}

/*
  Timetable
  
  Lists all trips for the selected date.
*/
.timetable-container {
  float         : left;
  margin-bottom : 15px;
  width         : 420px;
  color         : #ffffff;
}

.timetable {
  width : 100%;
}

.timetable th {
  line-height    : 30px;
  padding        : 0;
  font-size      : 10px;
  font-weight    : normal;
  text-align     : left;
  text-transform : uppercase;
  white-space    : nowrap;
}

.timetable tbody {
  border-top    : 1px solid #94aec5;
  border-bottom : 1px solid #94aec5;
  width         : 100%;
}

.timetable td {
  padding     : 7px 0px;
  line-height : 17px;
}

.timetable .has-notes td {
  padding-bottom: 0; /* No big padding if there is a notes row below us (which will have the big padding again, to separate between the next trip). */
}

.timetable .odd {
  background-color : #0054b4;
}

.timetable .even {
  background-color : #237dcc;
}

.timetable .departure {
  width        : 73px;
  padding-left : 10px;
}

.timetable td.departure {
  font-weight  : bold;
}

.timetable .departure .status {
  font-size : 12px;
}

.timetable .destination {
  width : 50px;
}

/* The departure/destination and buy colums are combined in a special way, using colspans (and rowspans on the remaining columns). */
.timetable td.departure,
.timetable td.destination {
  padding-bottom : 0px;
}

/* The 'buy' cell is beneath the departure and destination columns and contains a 'buy now' button, spanning both columns. */
.timetable .buy {
  padding-top   : 1px;
  padding-right : 15px; /* To force the actual button's right side to stop where the destination time stops as well (approximately). */
  padding-left  : 10px;
}

.timetable .buy a {
  display          : block;
  background-color : #fef009;
  line-height      : 18px;
  font-size        : 10px;
  font-weight      : bold;
  color            : #092289;
  text-decoration  : none;
  text-align       : center;
  text-transform   : uppercase;
}

.timetable .buy a.low-cost {
}

.timetable .ferry .company {
  display        : block;
  font-size      : 12px;
  font-weight    : bold;
  text-transform : uppercase;
}

.timetable .ferry .boat {
  font-size : 12px;
}

.timetable .ferry .boat.cars-allowed {
  padding-left : 28px;
  background   : url(../images/car-icon.png) no-repeat center left;
}

.timetable .trip-condition {
  padding-right : 10px;
  width         : 45px;
}

.timetable td.trip-condition {
  text-align : center; /* To align all condition icons, if the text is wider than the icon. */
  font-size  : 12px;
}

.timetable .trip-condition .condition {
  display        : inline-block;
  min-width      : 45px;
  text-align     : center;
  text-transform : uppercase;
  height         : 35px;
  font-size      : 12px;
  font-weight    : bold;
}

.timetable .services {
  width : 44px;
}

.timetable .service {
  display             : inline-block;
  margin-right        : 2px;
  width               : 16px;
  height              : 16px;
  text-indent         : -9999px;
  background-position : center center;
  background-repeat   : no-repeat;
}

.timetable .service:nth-child(2n) {
  margin-right : 0; /* 2 icons per row with only a bit of spacing between left and right column. */
}

/* Add some spacing above the icons on the second row (there are 2 icons per row, the nth-child below starts at icon 3). */
.timetable .service:nth-child(1n + 3) {
  margin-top : 2px;
}

.timetable .bus-connections {
  width : 60px;
  padding-right: 10px;
}

.timetable .bus-connections ul {
  margin          : 0;
  padding         : 0;
  list-style-type : none;
}

.timetable .bus-connections .bus-connection {
  margin-top       : 3px;
  background-color : #092289;
  color            : white;
  line-height      : 18px;
  font-size        : 10px;
  text-align       : center;
}

.timetable .bus-connections .bus-connection:first-child {
  margin-top : 0;
}

.timetable .bus-connections a {
  display : block;
  color           : inherit;
  text-decoration : none;
}

.timetable .notes {
  padding-top  : 0;
  padding-left : 10px;
}

.condition {
  min-width           : 42px;
  background-position : center 16px;
  background-repeat   : no-repeat;
}

.condition.unknown {
  visibility : hidden;
}

.condition.good {
  background-image : url(../images/weather-condition-good.png);
  color            : #39e049;
}

.condition.shaky {
  background-image : url(../images/weather-condition-shaky.png);
  color            : #fbe020;
}

.condition.bad {
  background-image : url(../images/weather-condition-bad.png);
  color            : #ff6a33;
}

.condition.warning {
  background-image    : url(../images/warning-icon.png);
  background-position : center 16px;
}

.timetable .ad td {
  padding : 0;
}

.timetable .ad a {
  position        : relative;
  display         : block;
  color           : #fff;
  text-decoration : none;
}

.timetable .ad-type-startpagePopup td {
  text-align : center;
}

.timetable .ad-type-startpagePopup img {
  width  : 100%;
  height : auto;
}

/* Do not show the inline ads in the timetable by default. They're only meant for (mobile) versions that don't show ads in the sidebar. */
.timetable .ad-type-timetable {
  display : none;
}

.timetable .ad-type-timetable td {
  background-color : #6d90ac;
}

.timetable .ad-type-timetable a {
  display         : block;
  padding         : 7px 0 7px 20px; /* The padding of the normal timetable td's. For ads, we set the padding on the anchor, so that we can animate it better (td's don't slide very well). */
  text-decoration : none;
  color           : #000000;
  line-height     : 1.1em;
  background-repeat : no-repeat;
}

.timetable .ad-type-timetable.ad-has-image a {
  height  : 50px;
  padding : 0;
}

.timetable .ad-type-timetable.ad-has-image a span {
  display : none;
}

.timetable .ad-type-timetable .title {
  display     : block;
  font-weight : bold;
}

.timetable .ad-type-timetable .description {
  display   : block;
  font-size : 11px;
}

.timetable .ad-type-timetable .ad-footer {
  display   : block;
  color     : white;
  font-size : 11px;
}

.timetable td.departure {
  background-image    : url(../images/arrow-small-white-right.png);
  background-position : 60px 10px;
  background-repeat   : no-repeat;
  font-size           : 14px;
}

.timetable td.destination {
  font-size : 14px;
}

.timetable td.ferry {
  font-size : 13px;
}

.timetable td.ferry .boat {
  font-size : 12px;
}

.timetable-footer {
  overflow     : hidden;
  margin-top   : 5px;
  padding-left : 10px;
}

.timetable-end {
  float      : left;
  margin-top : 0px;
  width      : 123px;
}

.timetable-legend {
  float      : left;
  margin-top : 0px;
  width      : 287px; /* With the .timetable-end, this should up to the whole footer. */
}

.timetable-footer .ad {
  float : right;
  width : 190px;
}

/*
  Static content
*/

.content-container {
  padding          : 20px 40px;
  background-color : white;
}

.content-container nav {
  text-align  : right;
  line-height : 45px;
  overflow    : hidden; /* To wrap around the floated home button. */
}

.content-container nav a {
  margin-left     : 10px;
  color           : inherit;
  text-decoration : none;
}

.content-container nav a:hover {
  text-decoration : underline;
}

.content-container nav a.home {
  float            : left;
  margin-top       : 1px; /* To make the box-shadow visible. */
  margin-left      : 1px; /* To make the box-shadow visible. */
  background-image : url(../images/button-big-back-bg.png);
  color            : white;
}

.content-container h1 {
  font-size   : 17px;
  font-weight : normal;
}

.content-container .body {
  padding-left : 10px;
  line-height  : 17px;
  font-size    : 14px;
}

/*
  Sidebar
  
  Contains the next bus connections, today's weather and ads.
*/
.sidebar {
  float         : right;
  margin-bottom : 15px;
  width         : 300px;
}

/*
  Bus connections (sidebar)
*/
.sidebar .bus-connections-container {
  margin-bottom : 15px;
}

.sidebar .bus-connections-container h3 {
  margin           : 0;
  padding          : 0 10px;
  line-height      : 30px;
  background-color : #fff;
  font-size        : 10px;
  color            : #092289;
  text-transform   : uppercase;
}

.bus-connections-container .bus-legend {
  border-top       : 1px solid #94aec5;
  padding          : 7px 0px 7px 10px;
  height           : 100px;
  background-color : #103073;
  color            : #fff;
  overflow         : hidden;
}

.bus-connections-container .bus-icons {
  float : left;
  width : 23px;
}

.bus-connections-container .bus-icon {
  display             : inline-block;
  margin-bottom       : 3px;
  border              : 1px #fff solid;
  width               : 23px;
  height              : 23px;
  line-height         : 23px;
  text-indent         : -9999px;
  background-color    : transparent;
  background-position : center center;
  background-repeat   : no-repeat;
}

.bus-connections-container .bus-icon-number {
  text-indent : 0;
  text-align  : center;
  font-weight : bold;
}

.bus-icon-hospital {
  background-image : url(../images/bus-icon-hospital.png);
}

.bus-icon-airport {
  background-image : url(../images/bus-icon-airport.png);
}

.bus-connections-container .bus-time {
  float       : left;
  margin-left : 10px;
  width       : 35px;
  font-size   : 14px;
}

.bus-connections-container .bus-stops {
  position : relative;
  float    : left;
  margin   : 0 0 0 10px;
  padding  : 0;
  width    : 235px;
}

.bus-connections-container .bus-stops li {
  display             : block;
  float               : left;
  width               : 1.75em;
  padding-top         : 5px;
  background-color    : transparent;
  background-image    : url(../images/bus-stop.png);
  background-position : top left;
  background-repeat   : no-repeat;
}

.bus-connections-container .bus-stops li:last-child {
  background-image : url(../images/bus-stop-last.png);
}

.bus-connections-container .bus-stops .bus-stop-name {
  display                  : inline-block;
  width                    : 120px;
  overflow                 : hidden;
  -webkit-transform        : rotate(55deg);
  -webkit-transform-origin : left 75%;
  -moz-transform           : rotate(55deg);
  -moz-transform-origin    : left 75%;
  -ms-transform            : rotate(55deg);
  -ms-transform-origin     : left 75%;
  -o-transform             : rotate(55deg);
  -o-transform-origin      : left 75%;
  transform                : rotate(55deg);
  transform-origin         : left 75%;
}

/*
  Weather

  The periods have a blue border between them, starting at the name of the
  period (morning, afternoon, evening). To achieve this, we set the border on
  the spans (containing name, temp, wave height and wind speed/direction)
  instead of on the period containers (which has an icon above the spans, but
  without the blue border).
*/
.sidebar .weather {
  margin-bottom : 15px;
  height        : 250px;
  background    : #fff;
}

.sidebar .weather .date {
  padding-top   : 15px;
  font-size     : 14px;
  text-align    : center;
  margin-bottom : 15px;
}

.weather .forecast .period {
  float      : left;
  width      : 90px;
  text-align : center;
  font-size  : 13px;
}

.weather .forecast .period.first {
  margin-left : 15px;
}

.weather .forecast .period span {
  display     : block;
  padding-top : 10px;
  border-left : 1px solid #0054b4;
}

.weather .forecast .period.first span {
  border-left : none;
}

.weather .forecast .period .icon {
  height : 40px;
}

.weather .forecast .period .name {
  margin-top  : 8px;
  padding-top : 0;
}

.weather .forecast .wave-height {
  padding-top         : 4px;
  height              : 20px; /* wave-height icons are 20px high */
  text-indent         : -9999px;
  background-repeat   : no-repeat;
  background-position : bottom center;
}

.weather .wave-height-1 {
  background-image : url(../images/weather/waveheight-1.png);
}

.weather .wave-height-2 {
  background-image : url(../images/weather/waveheight-2.png);
}

.weather .wave-height-3 {
  background-image : url(../images/weather/waveheight-3.png);
}

.weather .wave-height-4 {
  background-image : url(../images/weather/waveheight-4.png);
}

.weather .forecast .period .wind-direction {
  height              : 19px; /* wind-direction icons are 19px high */
  padding-left        : 24px;
  background-repeat   : no-repeat;
  background-position : 22px 9px;
}

.weather .forecast .period .wind-direction.direction-N {
  background-image : url(../images/weather/windorigin-N.png);
}

.weather .forecast .period .wind-direction.direction-NNW {
  background-image : url(../images/weather/windorigin-NNW.png);
}

.weather .forecast .period .wind-direction.direction-NW {
  background-image : url(../images/weather/windorigin-NW.png);
}

.weather .forecast .period .wind-direction.direction-WNW {
  background-image : url(../images/weather/windorigin-WNW.png);
}

.weather .forecast .period .wind-direction.direction-W {
  background-image : url(../images/weather/windorigin-W.png);
}

.weather .forecast .period .wind-direction.direction-WSW {
  background-image : url(../images/weather/windorigin-WSW.png);
}

.weather .forecast .period .wind-direction.direction-SW {
  background-image : url(../images/weather/windorigin-SW.png);
}

.weather .forecast .period .wind-direction.direction-SSW {
  background-image : url(../images/weather/windorigin-SSW.png);
}

.weather .forecast .period .wind-direction.direction-S {
  background-image : url(../images/weather/windorigin-S.png);
}

.weather .forecast .period .wind-direction.direction-SSE {
  background-image : url(../images/weather/windorigin-SSE.png);
}

.weather .forecast .period .wind-direction.direction-SE {
  background-image : url(../images/weather/windorigin-SE.png);
}

.weather .forecast .period .wind-direction.direction-ESE {
  background-image : url(../images/weather/windorigin-ESE.png);
}

.weather .forecast .period .wind-direction.direction-E {
  background-image : url(../images/weather/windorigin-E.png);
}

.weather .forecast .period .wind-direction.direction-ENE {
  background-image : url(../images/weather/windorigin-ENE.png);
}

.weather .forecast .period .wind-direction.direction-NE {
  background-image : url(../images/weather/windorigin-NE.png);
}

.weather .forecast .period .wind-direction.direction-NNE {
  background-image : url(../images/weather/windorigin-NNE.png);
}

.weather .forecast .period .wind-speed {
  margin-top : 0;
}

/*
  Ads
*/
.sidebar .ad {
  margin-bottom : 15px;
}

.sidebar .ad img {
  width : 100%;
}

/* If there is a startpage popup ad, we (initially) don't show the ads in the sidebar. They may become visible after the popup has vanished. */
.has-startpagePopup .sidebar .ad {
  display : none;
}

.banner {
  margin-bottom : 15px;
}

/*
  Event calendar (K-Lenda widget)
*/
.sidebar #klenda-widget {
  width         : 300px;
  height        : 365px;
  border        : none;
  background    : #fff;
  /*
    HACK (2021-11-30): The 'new' klenda-widget somehow overflows outside this
    element's box, at the bottom. The widget should of course not do this, but
    until that is fixed, and to prevent the widget from running over the bottom
    navigation, we simply add some white-space below this box.
  */
  margin-bottom : 86px;
}


/*
  Footer
*/
.footer {
  position    : relative;
  clear       : both;
  overflow    : hidden;
  font-size   : 13px;
}



.footer__part1 {
  overflow : hidden;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color : #092286;
  color: white;
}

.footer .partners,
.footer .newsletter-form {
  overflow: hidden; /* To wrap the floating contents. */
  padding: 10px;
}

.footer__part1 .intro {
  margin-bottom : 6px;
  color         : #ffffff;
}

.footer .newsletter-form input[type=email] {
  height: 33px;
  border: none;
  padding: 0 10px;
  background-color: #fff;
}

.footer .newsletter-form button {
  height: 33px;
  border: none;
  background-color: #00a1d4;
  color: #fff;
}

.footer .partners a {
  float        : left; /* To get rid of whitespace in-between the links. */
  margin-right : 3px;
  max-width    : 68px; /* The standard width of the (four) logos. */
  width        : 24%; /* On smaller devices: Let the logos scale (down) with the viewport. */
}

.footer .partners a img {
  width : 100%; /* To fill up the anchor's calculated width above. */
}



.footer__part2 {
  padding-top: 13px;
  padding-bottom: 13px;
  background-color: white;
  text-align: center;
  color: #092286;
  line-height: 1.7em;
}

.footer__part2 a {
  color: inherit;
  text-decoration : none;
}

.footer__part2 .other-pages a:hover {
  text-decoration : underline;
}

.footer .social,
.footer .payment-methods,
.footer .other-pages {
  display: inline;
}

/*
*/
.icon--left {
  display             : inline-block; /* So that we can assign width and height. */
  padding-left        : 22px;
  min-height          : 16px;
  background-position : center left;
  background-repeat   : no-repeat;
}

.icon-cars-allowed {
  background-image : url(../images/car-icon.png);
}

.icon-cars-allowed.icon--left {
  padding-left : 29px; /* The car icon is wider than the other ones (25px instead of 16-18px). */
}

.icon-wifi {
  background-image : url(../images/wifi-icon.png);
}

.icon-child-friendly {
  background-image : url(../images/child-friendly-icon.png);
}

.icon-press-available {
  background-image : url(../images/press-available-icon.png);
}