<style>
	.chart-tiling {
		position: relative;
	}

	.terrain-tile {
		width: 540px;
		height: 540px;
		position: absolute;

		margin: 0;
		padding: 0;
		border-width: 0;
		border-style: none;
	}

	.feature-tile {
		width: 540px;
		height: 540px;
		position: absolute;

		margin: 0;
		padding: 0;
		border-width: 0;
		border-style: none;
	}

	.station-place-small,
	.station-place-medium,
	.station-place-large {
		position: absolute;
		text-align: center;

		font-family: sans-serif;
		font-style: normal;
		transform: translate(-50%, -55%);
		transition: opacity 0.6s;
	}

	.station-place-small {
		font-size: 150%;
	}
	.station-place-small:hover {
		cursor: pointer;
		font-size: 170%;
	}

	.station-place-medium {
		font-size: 250%;
	}
	.station-place-medium:hover {
		cursor: pointer;
		font-size: 280%;
	}

	.station-place-large {
		font-size: 350%;
	}
	.station-place-large:hover {
		cursor: pointer;
		font-size: 380%;
	}

	.station-place-hidden {
		opacity: 0;
	}

	.wet-place {
		position: absolute;
		width: 50%;
		text-align: center;

		color: #333333;
		/* font-family: "Bookman", "Cambria", "Arial", sans-serif; */
		font-family: "Helvetica", sans-serif;
		font-style: italic;
		font-size: 100%;
		transform: translate(-50%, -50%);
		transition: opacity 1.0s;
	}
	.wet-place:hover {
		color: #777777;
		cursor: pointer;
	}
	.wet-place-hidden {
		opacity: 0;
	}

	.dry-place {
		position: absolute;
		width: 50%;
		text-align: center;

		color: #333333;
		/* font-family: "Bookman", "Cambria", "Arial", sans-serif; */
		font-family: "Helvetica", sans-serif;
		font-style: normal;
		font-size: 100%;
		transform: translate(-50%, -50%);
		transition: opacity 1.0s;
	}
	.dry-place:hover {
		color: #777777;
		cursor: pointer;
	}
	.dry-place-hidden {
		opacity: 0;
	}

	.search-place,
	.search-place-ios,
	.search-place-hidden,
	.search-place-ios-hidden {
		position: absolute;
		text-align: center;

		color: #000000;
		font-family: sans-serif;
		font-style: normal;

		transition: opacity 0.25;
		font-size: 1400%;
	}
	.search-place {
		transform: translate(-50%, -55%);
		opacity: 0.1;
	}
	.search-place-ios {
		transform: translate(-50%, -43%);
		opacity: 0.1;
	}
	.search-place-hidden {
		transform: translate(-50%, -55%);
		opacity: 0;
	}
	.search-place-ios-hidden {
		transform: translate(-50%, -43%);
		opacity: 0;
	}

	body {
		background-color: #c3ddee;
		margin: 0;
		width: 100%;
		position: fixed;
	}

	img {
		margin: 0;
		padding: 0;
		border-width: 0;
		border-style: none;
	}

	.tide-graph {
		position: fixed;
		transition: opacity 0.1s;
	}
	.tide-graph-title-text {
		fill: #223311;
		stroke: #eaeccf;
		stroke-width: 0.2em;
		paint-order: stroke;

		text-anchor: start;
		dominant-baseline: alphabetic;   /* bottom of text */
		font-family: "Bookman", "Cambria", "Arial", sans-serif;
		font-style: normal;
		font-size: 110%;
	}

	.tide-graph-model-path {
		stroke: #000000;
		fill: #b7d2ee;
		opacity: 0.75;
	}

	/* text left of horizontal height lines */
	.tide-graph-height-text {
		fill: #223311;
		stroke-width: 0;
		text-anchor: end;
		dominant-baseline: middle;
		font-family: "Bookman", "Cambria", "Arial", sans-serif;
		font-style: normal;
		font-size: 90%;
	}
	.tide-graph-height-line {
		stroke: #223311;
		stroke-dasharray: 2 5; 
	}
	.tide-graph-height-axis-line {
		stroke: #445533;
	}

	.tide-graph-msl-text {
		fill: #773311;
		stroke: #eaeccf;
		stroke-width: 0.3em;
		paint-order: stroke;
		text-anchor: start;
		dominant-baseline: central;
		font-family: "Bookman", "Cambria", "Arial", sans-serif;
		font-style: normal;
		font-size: 95%;
	}
	.tide-graph-msl-line {
		stroke: #ff1122;
		stroke-dasharray: 5 2; 
	}

	/* height and time text on graph area, for high tides */
	.area-high-tide-text {
		fill: #223311;
		stroke: #eaeccf;
		stroke-width: 0.3em;
		paint-order: stroke;

		text-anchor: middle;
		dominant-baseline: middle;
		font-family: "Bookman", "Cambria", "Arial", sans-serif;
		font-style: normal;
		font-size: 95%;
	}

	/* height and time text on graph area, for low tides */
	.area-low-tide-text {
		fill: #223311;
		/* stroke: #dbe0dc; */
		stroke: #eaeccf;
		stroke-width: 0.3em;
		paint-order: stroke;

		text-anchor: middle;
		dominant-baseline: middle;
		font-family: "Bookman", "Cambria", "Arial", sans-serif;
		font-style: normal;
		font-size: 95%;
	}

	/* text below vertical time lines */
	.tide-graph-day-text {
		fill: #223311;
		stroke-width: 0;
		text-anchor: middle;
		dominant-baseline: hanging;
		font-family: "Bookman", "Cambria", "Arial", sans-serif;
		font-style: normal;
		font-size: 90%;
	}
	.tide-graph-month-text {
		fill: #332211;
		stroke-width: 0;
		text-anchor: middle;
		dominant-baseline: hanging;
		font-family: "Bookman", "Cambria", "Arial", sans-serif;
		font-style: normal;
		font-size: 90%;
	}
	.tide-area-day-line {
		stroke: #223311;
		stroke-dasharray: 5 2;
	}
	.tide-graph-border-line {
		stroke: #445533;
	}

	.tide-graph-noon-text {
		fill: #332211;
		stroke-width: 0;
		text-anchor: middle;
		dominant-baseline: hanging;
		font-family: "Bookman", "Cambria", "Arial", sans-serif;
		font-style: normal;
		font-size: 90%;
	}
	.tide-area-noon-line {
		stroke: #99aa88;
		stroke-dasharray: 3 4;
	}

	.tide-graph-now-text {
		fill: #00224b;
		stroke: #eaeccf;
		stroke-width: 0.3em;
		paint-order: stroke;
		text-anchor: middle;
		dominant-baseline: alphabetic;   /* bottom of text */
		font-family: "Bookman", "Cambria", "Arial", sans-serif;
		font-style: normal;
		font-size: 95%;
	}
	.tide-area-now-line {
		stroke: #0072bb;
		stroke-dasharray: 4 3;
	}

	.tide-graph-cursor-text {
		fill: #39254d;
		stroke: #eaeccf;
		stroke-width: 0.3em;
		paint-order: stroke;
		text-anchor: middle;
		dominant-baseline: alphabetic;   /* bottom of text */
		font-family: "Bookman", "Cambria", "Arial", sans-serif;
		font-style: normal;
		font-size: 95%;
	}
	.tide-area-cursor-line {
		stroke: #8a25ef;
		stroke-dasharray: 4 3;
	}

	/* layer for menu button etc */
	.sky-layer {
		position: relative;
		display: block;
		margin: 0;
	}

	.toggle-menu {
		position: absolute;
		display: block;
		right: 20px;
		top: 20px;
		padding: 4px 2px 5px;
		margin: 0;

		border-style: solid;
		border-width: 1px;
		border-radius: 2px;
		border-color: grey;		/* fallback */
		border-color: rgba(0, 0, 0, 0.2);

		background-color: white;	/* fallback */
		background-color: rgba(255, 255, 255, 0.35);
	}
	.toggle-menu-inner {
		display: block;
		width: 24px;
		height: 3px;
		border-radius: 3px;
		background-color: #223311;
		margin: 6px;
	}
	.toggle-menu:hover {
		cursor: pointer;
		color: #445533;
		background-color: white;
		background-color: rgba(255, 255, 255, 0.5);
	}


	.button-bar {
		position: absolute;
		display: block;
		right: 120px;
		top: 20px;
		margin: 0;
		padding: 0;

		border-style: solid;
		border-width: 1px;
		border-radius: 2px;
		border-color: grey;		/* fallback */
		border-color: rgba(0, 0, 0, 0.2);

		background-color: white;	/* fallback */
		background-color: rgba(255, 255, 255, 0.35);
	}

	.button-outer {
		display: inline-block;	/* block for vertical */
		position: relative;

		border: none;
		padding: 4px 2px 0px;
		margin: 0;
	}
	.button-outer:hover {
		cursor: pointer;
		background-color: white;
		background-color: rgba(255, 255, 255, 0.5);
	}

	.full-screen {
		display: block;
		border: solid #223311;
		border-width: 3px 1px 1px 1px;
		width: 20px;
		height: 16px;
		border-radius: 3px;
		margin: 6px;
	}

	.button-clock-face {
		display: block;

		border: solid;
		border-width: 1px;
		border-color: grey;		/* fallback */
		border-color: rgba(0, 0, 0, 0.6);

		width: 20px;
		height: 20px;
		border-radius: 12px;
		margin: 6px;
	}

	.button-hour-hand {
		position: absolute;
		left: 19px;
		top: 21px;

		width: 8px;
		height: 3px;
		border-width: 2px;
		border-radius: 0px;
		background-color: #223311;
		margin: 0;
	}
	.button-minute-hand {
		position: absolute;
		left: 19px;
		top: 21px;

		width: 12px;
		height: 2px;
		border-width: 1px;
		border-radius: 0px;
		background-color: #223311;
		margin: 0;
	}

	.button-station-visibility {
		display: block;

		border: solid;
		border-width: 1px;
		border-radius: 12px;
		border-color: #223311;
		background-color: grey;		/* fallback */
		background-color: rgba(0, 0, 0, 0.2);

		width: 20px;
		height: 20px;
		margin: 6px;
	}

	.button-user-login {
		display: block;
		width: 20px;
		height: 20px;

		border: solid;
		border-width: 1px;
		border-radius: 3px;
		border-color: grey;		/* fallback */
		border-color: rgba(0, 0, 0, 0.5);

		margin: 6px;
		overflow-y: hidden;		/* torso */
	}

	.button-user-head {
		display: block;

		border: solid;
		border-width: 1px;
		border-color: grey;		/* fallback */
		border-color: rgba(0, 0, 0, 0.7);

		background-color: grey;		/* fallback */
		background-color: rgba(0, 0, 0, 0.2);

		width: 9px;
		height: 9px;
		border-radius: 5px;
		margin: 3px auto 0;
	}
	.button-user-torso {
		display: block;

		border: solid;
		border-width: 1px;
		border-color: grey;		/* fallback */
		border-color: rgba(0, 0, 0, 0.7);

		background-color: grey;		/* fallback */
		background-color: rgba(0, 0, 0, 0.2);

		width: 17px;
		height: 17px;
		border-radius: 9px;
		margin: 0px auto auto;
	}

	.button-search {
		display: block;
		width: 20px;
		height: 20px;
		margin: 6px;
	}

	.button-search-glass {
		display: block;

		border: solid;
		border-width: 1px;
		border-color: #223311;

		background-color: grey;		/* fallback */
		background-color: rgba(0, 0, 0, 0.03);

		width: 14px;
		height: 14px;
		border-radius: 8px;
		margin: 0px auto auto 0px;
	}

	.button-search-handle {
		position: absolute;
		left: 21px;
		top: 25px;

		width: 6px;
		height: 2px;
		transform: rotate(45deg);

		border-width: 2px;
		border-radius: 0px;
		background-color: #223311;
		margin: 0;
	}

	.message-bar {
		position: absolute;
		display: block;
		left: 0;
		top: 95px;
		transform: translate(-50%, 0);
		margin: 0;
		padding: 1px 2px 0px;

		border-style: none;
		border-width: 0;
		border-radius: 4px;

		background-color: white;	/* fallback */
		background-color: rgba(255, 255, 255, 0.25);
	}
	.message-text-slow,
	.message-text-quick {
		font-family: "Helvetica", sans-serif;
		font-style: normal;
		font-size: 140%;
		cursor: default;
	}
	.message-text-slow {
		color: #778866;
	}
	.message-text-quick {
		color: #556644;
	}

	.sliding-menu {
		position: absolute;
		display: block;
		right: 0;
		top: 0;
		width: 250px;
		height: 100vh;
		margin: 0;

		transition: transform 0.2s;
		transform: translateX(100%);
		overflow-x: hidden;
		box-shadow: none;
	}
	.sliding-menu-visible {
		transform: translateX(0%);
	}

	.inner-menu {
		position: absolute;
		left: 0;
		top: 0;
		width: 1000px;
		margin: 0;
		box-sizing: border-box;

		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;

		transition: transform 0.3s;
		transform: translateX(0);
	}
	.sub-menu-one {
		transform: translateX(-250px);
	}
	.sub-menu-two {
		transform: translateX(-500px);
	}
	.sub-menu-three {
		transform: translateX(-750px);
	}

	.menu-level {
		width: 250px;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 5px;
		padding-right: 10px;
		box-sizing: border-box;

		margin: 0;
		list-style: none;
		background-color: #eaf7e9;
	}
	.menu-level-shadow {
		box-shadow: 12px 0 6px 6px rgba(0, 0, 0, 0.2);
	}

	.menu-title {
		width: 180px;
		position: relative;
		top: 10px;

		padding-top: 10px;
		padding-bottom: 8px;
		padding-left: 0;
		padding-right: 0;
		margin: 0;
	}
	.menu-title:hover {
		background-color: #dae7d9;
		cursor: pointer;
	}

	.menu-title-text {
		position: relative;
		left: 5px;
		font-size: 140%;
		font-family: "Helvetica", sans-serif;
		color: #223311;
		cursor: pointer;
	}

	.menu-description {
		padding: 15px 0 10px;
		margin: 0;
	}
	.menu-description-text {
		position: relative;
		left: 5px;
		font-size: 95%;
		font-family: "Helvetica", sans-serif;
		color: #223311;
		cursor: default;
	}

	.menu-item {
		padding: 8px 0 8px;
		margin: 0;
	}
	.menu-item:hover {
		background-color: #dae7d9;
		cursor: pointer;
	}
	.menu-item-picked {
		background-color: #dae7d9;
		padding: 8px 0 8px;
		margin: 0;
	}

	.menu-item-text-small,
	.menu-item-text-medium {
		position: relative;
		left: 5px;
		font-family: "Helvetica", sans-serif;
		color: #223311;
		cursor: pointer;
	}
	.menu-item-text-small {
		font-size: 95%;
	}
	.menu-item-text-medium {
		font-size: 120%;
	}

	.menu-item-input {
		position: relative;
		left: 5px;
		font-size: 100%;
		font-family: "Helvetica", sans-serif;
		color: #223311;
	}

	.input-label-hidden,
	.input-label-error,
	.input-label-result {
		display: block;
		font-family: "Helvetica", sans-serif;
		font-size: 95%;
		color: #df4421;
		transition: opacity 0.2s;
	}
	.input-label-hidden {
		opacity: 0;
	}
	.input-label-error {
		opacity: 1;
	}
	.input-label-result {
		opacity: 1;
		color: #1f34bb;
	}

	.menu-unselected,
	.menu-selected,
	.menu-action,
	.menu-action-station,
	.menu-search-wet,
	.menu-search-dry,
	.menu-search-station,
	.menu-station-info {
		position: relative;
		left: 5px;
		font-size: 105%;
		font-family: "Helvetica", sans-serif;
		color: #232b2b;
		cursor: pointer;

		margin: 0;
		padding: 0;
	}

	.menu-unselected {
		margin: 4px;
		padding: 0;

		border-width: 0;
		border-color: #eaf7e9;	/* fallback */
		border-color: rgba(234, 247, 233, 0.0);
	}
	.menu-selected {
		margin: 0;
		padding: 2px;

		border-style: dashed;
		border-width: 2px;
		border-radius: 2px;
		border-color: #223311;	/* fallback */
		border-color: rgba(34, 51, 17, 1.0);
		transition: border-color 0.2s;
	}
	.menu-action {
		font-size: 100%;
	}
	.menu-action-station {
		font-size: 100%;
		color: #133b8b;
	}
	.menu-search-wet {
		font-size: 100%;
		font-style: italic;
	}
	.menu-search-dry {
		font-size: 100%;
	}
	.menu-search-station {
		font-size: 100%;
		color: #133b8b;
	}
	.menu-station-info {
		font-size: 100%;
		color: #030b0b;
	}

	.menu-info {
		position: relative;
		margin: 0;
		padding: 0;
		height: 225px;
	}
	.menu-phase-text {
		position: absolute;
		text-align: center;
		transform: translate(-50%, -50%);
		font-size: 105%;
		font-family: "Helvetica", sans-serif;
		color: #223311;
		cursor: default;
	}
	.menu-phase-arrow {
		position: absolute;
		text-align: center;
		font-size: 120%;
		font-family: sans-serif;
		color: #110665;
		cursor: default;
	}

	.menu-station-place {
		position: absolute;
		text-align: center;
		font-family: sans-serif;
		font-size: 350%;
		transform: translate(-50%, -55%);
	}
	.menu-station-place:hover {
		cursor: pointer;
		font-size: 380%;
	}


	.next-menu-small,
	.next-menu-medium {
		position: relative;
		top: -5px;
		right: 5px;
		float: right;
		font-weight: bold;
		color: #2d309c;
		cursor: pointer;
	}
	.next-menu-small {
		font-size: 115%;
		padding: 5px 5px 0px;
	}
	.next-menu-medium {
		font-size: 130%;
		padding: 5px;
	}

	.previous-menu {
		position: relative;
		top: -2px;
		left: 2px;
		float: left;
		font-size: 130%;
		font-weight: bold;
		color: #2d309c;
		cursor: pointer;
		padding: 5px;
	}

</style>

