/* base (all sizes) */
@media all {
	:root {
		--debug-border-color: #ff0000;

		--main-background-color: #58AB27;
		--innermenu-background-color: #effcefd2;
		--main-border-color: #000000;
		--main-text-color: #333333;

		--inner-background-color: #ffffff;
		--link-background-color: #cceecc;
		--link-background-dark: #84d67c;

		--tourgreen-color: #33d824;
		--tourorange-color: #f7a129;
		--tourred-color: #ff3333;
		--tourdone-color: #666666;
		--text-red: #dd0000;
		--text-background-red: #dd00003b;
	}

	body {
		margin: 0px;
		padding: 0px;
		background-color: var(--main-background-color);
		border: 0px solid var(--main-border-color);
		color: var(--main-text-color);
		font-family: "Trebuchet MS", Arial, Helvetica, Verdana, sans-serif;
		overflow-x: hidden;
		position: relative;
	}

	#topContainer {
		position: sticky;
		top: 0px;
		z-index: 10;
		height: 110px;
		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;
		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: justify;
		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: 20px 0px 0px 20px;
		height: 90px;
		color: var(--main-text-color);
		border-bottom: 1px solid var(--main-border-color);
		background-image: url("https://www.sektion-alpen.net/eeimages/san/san_banner_1.jpg");
	}
	#banner h1, .h1 { color: var(--main-text-color); }
	#banner h2, .h2 { color: var(--inner-background-color); }

	#banner a:link { text-decoration: none; color: var(--main-text-color); background-image: url(eeimages/san/trans40.png); padding: 0px 5px 0px 5px; }
	#banner a:visited { text-decoration: none; color: var(--main-text-color); background-image: url(eeimages/san/trans40.png); padding: 0px 5px 0px 5px; }
	#banner a:active { text-decoration: none; color: var(--main-text-color); background-image: url(eeimages/san/trans40.png); padding: 0px 5px 0px 5px; }
	#banner a:hover { text-decoration: none; color: var(--main-text-color); background-image: url(eeimages/san/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 20px 0px 0px;
		position: relative;
		max-width: 800px;
		background-color: #ffffff;
		border: 1px solid var(--main-border-color);
        }

	#centerContent {
		padding: 20px 20px 10px 20px;
		vertical-align: top;
		border: 0px solid var(--main-border-color);
        }
	#centerContent ul { padding: 0px 20px 10px 20px; }
	#centerContent ol { padding: 0px 20px 10px 20px; }

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

	.introHead {
		margin: 0px;
		padding: 0px;
		border: 0px solid var(--main-border-color);
        }
	.introHead h1 { display: none; }
	.introHead h2 { margin: 0px 0px 10px 0px; }
	.introHead p { font-size: 120%; font-weight: bold; }
	.introHead img { margin: 0px; padding: 0px 0px 10px 10px; border: 0px solid var(--main-border-color); }

	.introText {
		margin: 0px 0px 20px 0px;
         padding: 0px;
		border: 0px solid var(--main-border-color);
	}

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

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

	article {
         margin: 0px;
         padding: 0px;
		border-radius: 15px;
		border: 0px solid var(--main-border-color);
		border-radius: 10px 10px 0px 0px;
	}

	.mainBodyHead {
		margin: 0px;
		padding: 8px 10px 0px 10px;
		background-color: var(--main-background-color);
		border: 0px solid var(--main-border-color);
		border-radius: 10px 10px 0px 0px;
	}
	.mainBodyHead h3 { font-weight: bold; text-align: left; }

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

	.pageNavigation {
		clear: both;
		margin: 0px;
		padding: 10px;
         text-align: center;
		border: 0px solid var(--main-border-color);
	}

	#footer {
		margin: 0px;
		padding: 5px 0px 5px 0px;
		text-align: center;
		max-width: 800px;
		border: 0px solid var(--debug-border-color);
		color: var(--main-background-color);
		background-color: var(--main-border-color);
	}
	#footer a:link { text-decoration: underline; color: var(--main-background-color); background-color: transparent; }
	#footer a:visited { text-decoration: underline; color: var(--main-background-color); background-color: transparent; }
	#footer a:active { text-decoration: none; color: var(--main-background-color); background-color: var(--link-background-color); }
	#footer a:hover { text-decoration: none; color: var(--main-background-color); background-color: var(--link-background-color); }

	#tourNavigation {
		position: sticky;
		top: 110px;
		z-index: 5;
		margin: 0px -10px 0px 0px;
		padding: 10px 0px 10px 10px;
		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;
	}

	#innerNavigation {
			width: 250px;
			padding: 20px 10px 10px 10px;
         float: right;
			text-align: left;
			background-color: #ffffff;
			border: 0px solid var(--main-border-color);
	}
	.innerNavigationBox {
			margin: 0px; padding: 0px;
			border: 0px solid var(--main-border-color);
	}
	.innerNavigationHead {
			margin: 0px;
			padding: 5px;
			background-color: var(--main-background-color);
			border: 0px solid var(--main-border-color);
			border-radius: 5px 5px 0px 0px;
	}
	.innerNavigationHead h4 { font-size: 120%; }
	.innerNavigationBody {
			margin: 0px 0px 5px 0px;
			padding: 5px;
			border: 1px solid var(--main-border-color);
			background-color: var(--innermenu-background-color);
			border-radius: 0px 0px 10px 10px;
	}
	.innerNavigationBody li {
			padding: 2px;
			list-style-type: none;
	}

	.tourheader {
		margin: 0px 0px 10px 0px;
		padding: 5px 5px 5px 5px;
		width: 93%;
		background-color: var(--main-border-color);
		border-radius: 5px 5px 5px 5px;
		border: 0px solid var(--debug-border-color);
	}
	.tourtour, .tourhigh, .tourclimb, .tourferrata, .tourski, .tourschneeschuh, .tourskihigh, .tourice, .tourwalk, .tourpeak,
	.trekking, .touryouth, .tourtheo, .tourwhatever, .tourgeltendorf {
		float: none;
		display: block;
		padding: 5px 5px 10px 50px;
		min-height: 30px;
		max-width: 250px;
		background-repeat: no-repeat;
	}
	.tourtour { background-image: url("https://www.sektion-alpen.net/eeimages/san/notour.gif"); max-width: 100%; }
	.tourhigh { background-image: url("https://www.sektion-alpen.net/eeimages/san/hochItour.gif"); }
	.tourclimb { background-image: url("https://www.sektion-alpen.net/eeimages/san/klettern.gif"); }
	.tourferrata { background-image: url("https://www.sektion-alpen.net/eeimages/san/klettersteig.gif"); }
	.tourski { background-image: url("https://www.sektion-alpen.net/eeimages/san/skiItour.gif"); }
	.tourschneeschuh { background-image: url("https://www.sektion-alpen.net/eeimages/san/schneeschuhtour.gif"); }
	.tourskihigh { background-image: url("https://www.sektion-alpen.net/eeimages/san/skihochtour.gif"); }
	.tourice { background-image: url("https://www.sektion-alpen.net/eeimages/san/nordwand.gif"); }
	.tourwalk { background-image: url("https://www.sektion-alpen.net/eeimages/san/bergwandern.gif"); }
	.tourpeak { background-image: url("https://www.sektion-alpen.net/eeimages/san/bergsteigen.gif"); }
	.trekking { background-image: url("https://www.sektion-alpen.net/eeimages/san/trekking.gif"); }
	.touryouth { background-image: url("https://www.sektion-alpen.net/eeimages/san/boarder.gif"); }
	.tourtheo { background-image: url("https://www.sektion-alpen.net/eeimages/san/theorie.gif"); }
	.tourwhatever { background-image: url("https://www.sektion-alpen.net/eeimages/san/notour.gif"); }
	.tourgeltendorf { background-image: url("https://www.sektion-alpen.net/eeimages/san/Geltendorf-DAVLogo.jpg"); padding-left: 60px; }

	.tourhead { clear: both; font-weight: bold; font-size: 110%; text-align: left; }
	.tourservice { clear: both; font-weight: bold; font-size: 110%; text-align: left; padding-left: 20px; }
	.tourdate { clear: both; text-align: left; }
	.tourstat { clear: both; font-weight: bold; text-align: left; }

	.tourgreen { clear: both; font-weight: bold; color: var(--tourgreen-color); }
	.tourorange { clear: both; font-weight: bold; color: var(--tourorange-color); }
	.tourred { clear: both; font-weight: bold; color: var(--tourred-color); }
	.tourdone { clear: both; font-weight: bold; color: var(--tourdone-color); }

	#leftNavigationContent {
		position: fixed;
		top: 163px;
		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: none; background-color: transparent; }
	#leftNavigationContent a:visited { color: var(--main-text-color); text-decoration: none; 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; }
	#kurse:hover+#kurse_body { display: block; }
	#kurse_body:hover { display: block; }

	#touren_body { display: none; }
	#touren:hover+#touren_body { display: block; }
	#touren_body:hover { display: block; }

	#tourenallgemein_body { display: none; }
	#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;
		/*-ms-overflow-style: none;
		/* Internet Explorer 10+ */
		scrollbar-width: none;
		/* Firefox */
	}

	/* ::-webkit-scrollbar {
		width: 0px;
		/* Remove scrollbar space
		background: transparent;
		/* Optional: just make scrollbar invisible
	}
	/* Optional: show position indicator in red
	::-webkit-scrollbar-thumb {
		background: #FF0000;
	} */

	.leftNavigationElementHead {
		margin: 10px 0px 0px 0px;
		padding: 5px 10px 5px 10px;
		width: 180px;
		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: 0px 5px 0px 5px;
		list-style-type: none;
		font-weight: bold;
		border-bottom: 1px dotted var(--main-border-color);
	}

	.copyright { font-weight: bold; }
	.small { font-size: 80%; }
	.big { font-size: 120%; }
	.bold { font-weight: bold; }
	.red { color: var(--text-red); }

	.posted {
		margin: 0px;
		padding: 0px;
		text-align: right;
		font-size: 80%;
	}

	.rss {
		margin: 0px;
		padding: 0px;
		padding-left: 40px;
		background-image: url("https://www.sektion-alpen.net/eeimages/san/xml.gif");
		background-repeat: no-repeat;
		background-position: left center;
	}

	.fb {
		margin: 0px;
         padding: 0px;
		padding-left: 60px;
		background-image: url("https://www.sektion-alpen.net/eeimages/san/fb2.gif");
		background-repeat: no-repeat;
		background-position: left center;
	}

	.warn {
		font-weight: normal;
		font-size: 100%;
		color: var(--text-red);
	}
	.warn a:link { color: var(--text-red); text-decoration: underline; background-color: transparent; }
	.warn a:visited { color: var(--text-red); text-decoration: underline; background-color: transparent; }
	.warn a:active { color: var(--text-red); text-decoration: none; background-color: var(--text-background-red); }
	.warn a:hover { color: var(--text-red); text-decoration: none; background-color: var(--text-background-red); }
	.warn h4 { color: var(--text-red); }

	.img {
		text-align: center;
		padding: 10px 0px 10px 0px;
		font-size: 90%;
	}

	.pic { border: 3px double var(--main-border-color); }

	.floatright { float: right; }
	.floatleft { float: left; }

	table {
		margin: 0px;
		width: 100%;
		border-collapse: collapse;
		border: 0px solid var(--main-border-color);
	}

	td {
		vertical-align: middle;
		text-align: left;
		border-bottom: 1px solid var(--main-border-color);
	}

	ol.scale { margin: 0px 0px 10px 30px; }

	table.scale { margin: 0px 0px 0px 10px; width: 96%; border-collapse: collapse; border: 1px solid var(--main-border-color); }
	th.sh { padding: 2px 5px 5px 5px; vertical-align: middle; text-align: left; font-size: 90%; border: 1px solid var(--main-border-color); }
	td.grade { padding: 2px 5px 5px 5px; font-weight: bold; text-align: left; vertical-align: top; border: 1px solid var(--main-border-color); }
	td.topo { text-align: left; padding: 2px 5px 5px 5px; vertical-align: top; border: 1px solid var(--main-border-color); }

	#lined { border-width: 1px; border-style: dotted; border-color: var(--main-background-color); }

	#innernavi { text-align: center; }
	#innernavi ul {
		list-style: none;
		display: inline;
		background-color: var(--main-background-color);
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}
	#innernavi li {
		display: inline;
		margin: 0px 0px 0px 0px;
		padding: 0px 3px 0px 3px;
		width: 100px;
		border-width: 0px 1px 0px 0px;
		border-style: solid;
		border-color: var(--inner-text-color);
	}
	#innernavi a {
		font-size: 10pt;
		font-weight: bold;
		color: var(--inner-text-color);
		text-decoration: none;
		text-align: center;
	}

	#subnavi { text-align: center; padding: 5px 0px 0px 0px; }
	#subnavi ul { list-style: none; display: inline; }
	#subnavi li { display: inline; margin: 0px 0px 0px 0px; }
	#subnavi a { text-decoration: underline; }

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

	.hide { display: inline; }

	#debug {
		padding: 5px;
		position: absolute;
		left: 0px;
		bottom: 5px;
		z-index: 10;
		color: rgba(255,255,255,0.1);
		border: 0px solid var(--main-border-color);
		background-color: transparent;
		width: 40px;
		height: 40px;
		font-size: 250%;
		font-weight: bold;
	}
	#debugInfo {
		padding: 5px;
		margin: -50px 0px 0px 0px;
		color: var(--main-text-color);
		border: 1px solid var(--debug-border-color);
		background-color: var(--inner-background-color);
	}
	#debugInfo { display: none; }
	#debug:hover+#debugInfo { display: block; }
	#debugInfo:hover { display: block; }

}