/* tiny screens and mobile */
@media only screen and (max-width: 600px) {
	:root {
		--debug-border-color: #ff0000;
    }

	#topContainer {
		position: sticky;
		top: 0px;
		z-index: 10;
		height: 90px;
		margin: 0px -10px 0px 0px;
		padding: 0px;
		background-color: var(--main-background-color);
		border-bottom: 1px solid var(--main-border-color);
		overflow: hidden;
	}

	#container {
		position: relative;
		top: -1px;
		z-index: 0;
		overflow: auto;
		margin: 0px -10px 0px 0px;
		padding: 0px;
		width: 100vw;
		border: 0px solid var(--main-border-color);
	}

	a:link { text-decoration: underline; color: var(--main-background-color); }
	a:visited { text-decoration: underline; color: var(--main-background-color); }
	a:active { text-decoration: none; color: var(--main-text-color); background-color: var(--link-background-color); }
	a:hover { text-decoration: none; color: var(--main-text-color); background-color: var(--link-background-color); }

	p, h1, h2, h3, h4, ul, ol, li, div, td, th, address, blockquote, nobr, b, i {
		margin: 0px;
		padding: 0px;
		color: var(--main-border-color);
		text-align: left;
		line-height: 120%;
        }
	p { margin-bottom: 10px; }
	li { text-align: left; }

	h1, .h1 { font-size: 140%; font-weight: bold; text-align: left; color: var(--main-text-color); }
	h2, .h2 { font-size: 130%; font-weight: bold; text-align: left; color: var(--main-text-color); }
	h3, .h3 { font-size: 120%; font-weight: bold; text-align: left; color: var(--main-text-color); padding-bottom: 10px; }
	h4, .h4 { font-size: 110%; font-weight: bold; text-align: left; color: var(--main-text-color); }

	#banner {
		margin: 0px;
		padding: 10px 0px 0px 10px;
		height: 80px;
		color: var(--main-text-color);
		border-bottom: 1px solid var(--main-border-color);
		background-image: url("san_banner_1.jpg");
        }
	#banner h1, .h1 { color: var(--main-text-color); font-size: 140%; padding: 0px 0px 0px 20px; }
	#banner h2, .h2 { color: var(--inner-background-color); display: none; }

	#banner a:link { text-decoration: none; color: var(--main-text-color); background-image: url(trans40.png); padding: 0px 5px 0px 5px; }
	#banner a:visited { text-decoration: none; color: var(--main-text-color); background-image: url(trans40.png); padding: 0px 5px 0px 5px; }
	#banner a:active { text-decoration: none; color: var(--main-text-color); background-image: url(trans40.png); padding: 0px 5px 0px 5px; }
	#banner a:hover { text-decoration: none; color: var(--main-text-color); background-image: url(trans40.png); padding: 0px 5px 0px 5px; }

	#bannercredit {
		position: absolute;
		top: 5px;
		right: 5px;
		text-align: right;
        }

	#centerFrame {
		display: table;
		margin: 0px auto 0px auto;
		padding: 0px;
		top: -1px;
		position: relative;
		max-width: 800px;
		background-color: #ffffff;
		border: 1px solid var(--main-border-color);
	}

    #centerContent {
        width: 90vw;
    }

	.introHead p { font-size: 110%; font-weight: bold; }
	
	#tourNavigation {
		position: sticky;
		top: 90px;
		z-index: 5;
		margin: 0px -10px 0px 0px;
		padding: 10px 0px 10px 10px;
		font-size: 90%;
		width: 100%;
		background-color: var(--main-background-color);
		border-bottom: 1px solid var(--main-border-color);
		display: table;
	}
	#tourNavigation div { float: left; }
	#tourNavigation li { list-style-type: none; }
	#tourNavigation a:link { text-decoration: underline; background-color: transparent; }
	#tourNavigation a:visited { text-decoration: underline; background-color: transparent; }
	#tourNavigation a:active { text-decoration: none; background-color: var(--link-background-dark); }
	#tourNavigation a:hover { text-decoration: none; background-color: var(--link-background-dark); }

	.tourNavigationElement {
		margin: 0px 10px -28px 0px;
		padding: 0px;
		border: 0px solid var(--main-border-color);
	}

	.tourNavigationElementHead {
		margin: 0px;
		padding: 5px 5px 30px 5px;
		border: 0px solid var(--main-border-color);
	}
	.tourNavigationElementHead h2 { font-size: 120%; text-decoration: none; }

	.tourNavigationElementBody {
		margin: 35px 0px 0px 0px;
		padding: 5px;
		background-color: var(--inner-background-color);
		border: 1px solid var(--main-border-color);
		position: absolute;
		z-index: 1;
		max-height: calc(100vh - 180px);
		overflow-y: auto;
		overflow-x: hidden;
	}
	.tourNavigationElementBody h4 { color: var(--main-background-color); }
	.tourNavigationElementBody li {
		padding: 5px 5px 5px 5px;
		list-style-type: none;
		border: 0px solid var(--debug-border-color);
		width: 100%;
		display: block;
	}

	#leftNavigationContent {
		position: fixed;
		top: 143px;
		left: -1px;
		display: none;
		width: 200px;
		padding: 10px;
		border: 1px solid var(--main-border-color);
		background-color: var(--main-background-color);
		z-index: 10;
		max-height: calc(100vh - 200px);
		overflow-y: auto;
		overflow-x: hidden;
	}
	#leftNavigationContent h1 { font-size: 100%; font-weight: bold; text-align: left; color: var(--main-background-color); }
	#leftNavigationContent h2 { font-size: 100%; font-weight: bold; text-align: left; color: var(--main-background-color); }
	#leftNavigationContent h3 { font-size: 100%; font-weight: bold; text-align: left; color: var(--main-background-color); padding-bottom: 10px; }
	#leftNavigationContent h4 { font-size: 100%; font-weight: bold; text-align: left; color: var(--main-background-color); }

	#leftNavigationContent a:link { color: var(--main-text-color); text-decoration: underline; background-color: transparent; }
	#leftNavigationContent a:visited { color: var(--main-text-color); text-decoration: underline; background-color: transparent; }
	#leftNavigationContent a:active { color: var(--main-text-color); text-decoration: underline; background-color: var(--link-background-dark); }
	#leftNavigationContent a:hover { color: var(--main-text-color); text-decoration: underline; background-color: var(--link-background-dark); }

	#burger { display: block; }

	#menu {
		position: fixed;
		top: 110px;
		left: 10px;
		width: 40px;
		border: 0px solid var(--main-border-color);
         background-color: transparent;
		z-index: 11;
        }
	#menu a:link { background-color: transparent; }
	#menu a:visited { background-color: transparent; }
	#menu a:active { background-color: transparent; }
	#menu a:hover { background-color: transparent; }
	#menu:hover+#leftNavigationContent { display: block; }
	#leftNavigationContent:hover { display: block; }

	#kurse_body { display: none; float: left; left: 60px; }
	#kurse:hover+#kurse_body { display: block; }
	#kurse_body:hover { display: block; }

	#touren_body { display: none; float: left; left: 60px; }
	#touren:hover+#touren_body { display: block; }
	#touren_body:hover { display: block; }

	#tourenallgemein_body { display: none; float: left; left: 60px; }
	#tourenallgemein:hover+#tourenallgemein_body { display: block; }
	#tourenallgemein_body:hover { display: block; }

	.leftNavigationElement {
         margin: 0px;
         padding: 0px;
		border: 0px solid var(--main-border-color);
		max-height: calc(100vh - 170px);
		overflow-y: auto;
		overflow-x: hidden;
		background-color: transparent;
		scrollbar-width: none;
	}

	.leftNavigationElementHead {
		margin: 10px 0px 0px 0px;
		padding: 5px 10px 5px 10px;
		width: 150px;
		color: var(--main-background-color);
		background-color: var(--main-border-color);
		border: 0px solid var(--inner-text-color);
		border-radius: 5px;
	}
	.leftNavigationElementHead h3 { color: var(--main-background-color); margin: 0px 0px -10px 0px; }

	.leftNavigationElementBody {
		margin: 0px 0px 0px 0px;
		padding: 5px;
		border: 0px solid var(--main-border-color);
        }
	.leftNavigationElementBody li {
		padding: 2px 5px 2px 5px;
		list-style-type: none;
		font-size: 100%;
		font-weight: bold;
		border-bottom: 1px dotted var(--main-border-color);
        }

	#list p, ul, li { margin: 0px; line-height: 100%; }

	.hide { display: none; }
}