/*** Schriftarten ******************************/
@font-face{
	font-family: 'font_header';
	src: url('fonts/ayearwithoutrain.woff');
	font-weight: normal;
	font-style: normal;
}

@font-face{
	font-family: 'font_subheader';
	src: url('fonts/candara.woff');
	font-weight: normal;
	font-style: normal;
}

@font-face{
	font-family: 'font_content';
	src: url('fonts/candara.woff');
	font-weight: normal;
	font-style: normal;
}


/*** Allgemeine Definitionen *******************/
:root{
	--hintergrundfarbe: #e0e0e0;
	--textfarbe: #404040;
	--textgroesse: 15px;
	--menuehintergrundfarbe: #d0d0d0;
	--menuetextfarbe: #404040;
	--menuetextfarbeaktiv: #eb533b;
	--ueberschriftenfarbe: #256d4e;
	--ueberschriftengroesse: 40px;
	--statstrennerfarbe: #d0d0d0;
	--impressumtextfarbe: #eeeeee;
	--googlemapsfarbe: #2e312f;

	--seitenbreite: 800px;
	--logogroesse: 120px;
	--logoborder: 20px;
	--logohoehe: 160px;								/* logogroesse + 2 * logoborder */
	--titlebreite: 500px;
	--menuedividerhoehe: 20px;
	--menuehoehe: 40px;
	--navhoehe: 60px;									/* menuehoehe + menuedividerhoehe */
	--headerhoehe: 240px;							/* logohoehe + 2 * menuedividerhoehe + menuehoehe */

	--logosmalloben: 82px;						/* logohoehe - logoborder - logosmallhoehe (53 px) + 5 */
	--logosmallbreite: 100px;
	--logosmallgesamtbreite: 140px;		/* logosmallbreite + 2 x logoborder */

	--spacervertical: 15px;
	--spacerhorizontal: 15px;

	--abstandetappevertical: 15px;

	--kartenrand: 1px;
	--schattenbreite: 10px;

	--kartenbreite: 229px;						/* reale kartenbreite + 2 * kartenrand + schattenbreite */
	--kartenhoehe: 700px;
	--minkartenhoehe: 702px;					/* kartenhoehe + 2 * kartenrand */

	--kartenbeschriftung: #eeeeee;

	--etappenbreite: 516px;						/* seitenbreite - kartenbreite - 2 * spacerhorizontal - abstandetappevertical - schattenbreite */
	--etappestatsbreite: 80px;
	--etappecontentbreite: 421px;			/* etappenbreite - etappestatsbreite - abstandetappevertical */

	--footerhoehe: 300px;
	--impressummargin: 780px;					/* seitenbreite - 20 px */
}

html, body{
	margin: 0;
	padding: 0;
}

#background{
	background: url('../pix/background.jpg') no-repeat center center;
	background-attachment: fixed;
	background-size: cover;
}

nav a{
	text-decoration: none;
	color: var(--menuetextfarbe);
}

#footer a, #impressum a{
	text-decoration: none;
	color: var(--impressumtextfarbe);
}

nav a:hover, #footer a:hover, #impressum a:hover{
	text-decoration: none;
	color: var(--menuetextfarbeaktiv);
}

#content a{
	text-decoration: none;
	color: var(--menuetextfarbeaktiv);
}

#content a:hover{
	text-decoration: none;
	color: var(--menuetextfarbe);
}

img{
	border: none;
}

table{
	border: none;
	vertical-align: top;
}

td{
	border: none;
	vertical-align: top;
}

hr{
	border: 0;
	height: 1px;

	background-color: var(--statstrennerfarbe);
}

#success{
	color: #009900;
}

#error{
	color: #eb433e;
}

.clearfix::after{
	content: "";
	clear: both;
	display: table;
}


/*** Logo & Navigation *************************/
header, nav, section{
	display: block;
}

#header{
	position: relative;

	margin-left: auto;
	margin-right: auto;
	width: var(--seitenbreite);
	height: var(--headerhoehe);

	z-index: 10;
}

#logo{
	position: relative;
	float: left;

	width: var(--logohoehe);
	height: var(--logohoehe);
}

#logo img{
	margin-left: var(--logoborder);
	padding-top: var(--logoborder);

	width: var(--logogroesse);
	height: var(--logogroesse);
}

#title{
	position: relative;
	float: left;

	width: var(--titlebreite);
	height: var(--logohoehe);
}

#title span{
	position: absolute;

	width: 100%;
	height: var(--logohoehe);
	text-align: left;
	bottom: 20px;

	display: flex;
	flex-direction: column;
	justify-content: flex-end;

	font-family: 'font_header';
	font-size: var(--ueberschriftengroesse);
	color: var(--ueberschriftenfarbe);

	z-index: 1;
}

#logo_small{
	position: relative;
	float: left;

	width: var(--logosmallgesamtbreite);
	height: var(--logohoehe);
}

#logo_small img{
	padding-top: var(--logosmalloben);

	width: var(--logosmallbreite);
}

#nav_divider{
	position: relative;
	float: left;

	margin-left: auto;
	margin-right: auto;
	width: var(--seitenbreite);
	height: var(--menuedividerhoehe);

	background-image: linear-gradient(to bottom, rgba(208,208,208,0), rgba(208,208,208,1));
}

nav{
	position: absolute;

	bottom: 0;
	padding-top: 0px;
	margin-left: auto;
	margin-right: auto;
	width: var(--seitenbreite);
	height: var(--navhoehe);
}

#nav{
	position: relative;

	padding-top: 0px;
	margin-left: auto;
	margin-right: auto;
	width: var(--seitenbreite);
	height: var(--menuehoehe);

	background-color: var(--menuehintergrundfarbe);

	font-family: 'font_content';
	font-size: 15px;
	letter-spacing: 0.05em;
	color: var(--menuetextfarbe);

	display: flex;
	align-items: center;
	justify-content: center;
}

#menue_aktiv{
	color: var(--menuetextfarbeaktiv);

	border-top: 4px solid transparent;
	border-bottom: 4px solid var(--menuetextfarbeaktiv);
}

#nav_bottom{
	position: relative;

	margin-left: auto;
	margin-right: auto;
	width: var(--seitenbreite);
	height: var(--menuedividerhoehe);

	background-image: linear-gradient(to bottom, rgba(208,208,208,1), rgba(224,224,224,1));
}

* html nav {
	top: expression(auto);
}

.fixed-navi{
	top: 0px;
	position: fixed !important;
	position: absolute;
}

* html .fixed-navi{
	top: expression(documentElement.scrollTop);
}


/*** Inhalt ************************************/
#content{
	top: 0;
	position: relative;

	margin-left: auto;
	margin-right: auto;
	width: var(--seitenbreite);

	padding-top: var(--spacervertical);
	padding-bottom: var(--spacervertical);

	background-color: var(--hintergrundfarbe);

	font-family: 'font_content';
	font-size: var(--textgroesse);
	letter-spacing: 0.05em;
	color: var(--textfarbe);
	text-align: left;
}

#etappe{
	float: left;

	width: var(--etappenbreite);
	padding-left: var(--spacerhorizontal);
}

#etappe_header{
	width: 100%;
	padding-bottom: 10px;

	font-family: 'font_subheader';
	font-size: 20px;
	color: var(--ueberschriftenfarbe);
}

#etappe_stats{
	float: left;

	width: var(--etappestatsbreite);
	padding-bottom: 10px;

	text-align: center;
}

#etappe_stats img{
	width: 45%;
	height: auto;
}

#etappe_stats_button{
	background-image: url('../pix/icons/map.gif');
	background-size: cover;
	background-color: transparent;
	cursor: pointer;
	width: 35px;
	height: 35px;
	border: none;
}

#etappe_stats_button:hover{
	background-image: url('../pix/icons/map_highlight.gif');
}

.animate_etappe_stats_karte{
	position: relative;
	animation: animatetop 0.4s;
}

@keyframes animatetop{
	from{top: -100px; opacity:0} to {top: 0; opacity: 1}
}

#etappe_stats_karte{
	z-index: 999;
	display: none;
	padding-top: 85px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: var(--googlemapsfarbe);
	background-color: rgba(0, 0, 0, 0.6);
}

#etappe_stats_karte_content{
	margin: auto;
	background-color: var(--googlemapsfarbe);
	position: relative;
	padding: 0;
	outline: 0;
	width: 600px;
	height: 450px;
}

#etappe_stats_karte_karte{
	position: relative;
	float: left;
	width: 100%;
	height: 400px;
}

#etappe_stats_karte_karte iframe{
	width: 100%;
	height: 100%;

	border: none;
	padding: 0;
	outline: 0;
}

#etappe_stats_karte_close{
	position: relative;
	float: right;

	padding: 10px 16px;

	display: flex;
	align-items: center;
	justify-content: center;
}

#etappe_stats_karte_close_button{
	padding: 5px;
	border: none;
	text-align: center;
	text-decoration: none;

	font-family: 'font_content';
	font-size: var(--textgroesse);
	letter-spacing: 0.05em;
	font-weight: bold;
	color: #ffffff;

	background-color: var(--ueberschriftenfarbe);

	cursor: pointer;
}

#etappe_stats_karte_close_button:hover, #etappe_stats_karte_close_button:focus, #etappe_stats_karte_close_button:active{
	background-color: var(--menuetextfarbeaktiv);
	box-shadow: 0 0 5px var(--menuetextfarbeaktiv);
}

#etappe_content{
	float: right;

	width: var(--etappecontentbreite);
	padding-left: var(--abstandetappevertical);
	padding-bottom: 10px;

	word-wrap: break-word;
}

#bilder{
	float: right;
	width: 67px;
}

#bilder_links{
	float: left;
	width: 5px;
	display: block;
}

#bilder_rechts{
	float: right;
	width: 60px;

	padding-top: 5px;
	margin-bottom: 5px;

	background-color: #ffffff;
	border: 1px solid var(--statstrennerfarbe);
}

#bilder img{
	margin-left: 4px;
	margin-right: 4px;

	border: 1px solid var(--statstrennerfarbe);
}

#etappe_spacer{
	height: 25px;
}

#content_zitat{
	font-style: italic;

	margin-left: 10px;
}

#content_zitat_author{
	font-size: 11px;

	margin-top: 10px;
	margin-left: 20px;
	margin-bottom: 35px;
}

#content_headline{
	font-weight: bold;
	font-style: italic;

	margin-top: 50px;
	margin-left: 20px;
	margin-bottom: 5px;
}

.form_ohne_tagebuch{
	padding-top: 0px;
}

.form_mit_tagebuch{
	padding-top: 80px;
}

#kommentar_text{
	width: 96%;
	padding-left: 2%;
	padding-right: 2%;
	height: 30px;

	border: none;

	font-family: 'font_content';
	font-size: var(--textgroesse);
	letter-spacing: 0.05em;
	color: var(--textfarbe);
}

#kommentar_textarea{
	width: 96%;
	padding-left: 2%;
	padding-right: 2%;
	height: 100px;
	padding-top: 5px;
	padding-bottom: 5px;

	border: none;

	font-family: 'font_content';
	font-size: var(--textgroesse);
	letter-spacing: 0.05em;
	color: var(--textfarbe);
}

#kommentar_button{
	padding: 10px;
	border: none;
	text-align: center;
	text-decoration: none;

	font-family: 'font_content';
	font-size: var(--textgroesse);
	letter-spacing: 0.05em;
	font-weight: bold;
	color: #ffffff;

	background-color: var(--ueberschriftenfarbe);
}

#kommentar_button:hover, #kommentar_button:focus, #kommentar_button:active{
	background-color: var(--menuetextfarbeaktiv);
	box-shadow: 0 0 5px var(--menuetextfarbeaktiv);
}

#kommentar_name{
	margin-top: 30px;
	margin-left: 20px;

	word-wrap: break-word;
}

#kommentar_timestamp{
	margin-left: 20px;

	font-size: 11px;
}

#kommentar{
	margin-top: 10px;

	word-wrap: break-word;
}

input[type=text]:focus, textarea:focus{
	box-shadow: 0 0 5px var(--menuetextfarbeaktiv);
}

#map{
	float: right;

	width: var(--kartenbreite);
	min-height: var(--minkartenhoehe);
	padding-left: var(--abstandetappevertical);
	padding-right: var(--spacerhorizontal);
}

#map_img{
	position: absolute;
	height: var(--kartenhoehe);
	margin-top: 0px;
	margin-left: 0px;

	border: var(--kartenrand) solid #000000;
	box-shadow: 8px 8px var(--schattenbreite) #808080;

	opacity: 0.85;

	z-index: 1;
}

#track_img{
	position: absolute;
	height: var(--kartenhoehe);
	margin-top: 0px;
	margin-left: 0px;

	z-index: 2;
}

#map_text{
	position: absolute;

	border: 1px solid var(--kartenbeschriftung);
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-left: 10px;
	min-width: 50px;

	font-family: 'font_content';
	font-size: 17px;
	color: var(--kartenbeschriftung);

	z-index: 3;
}

#map_spacer{
	position: relative;

	margin-top: var(--minkartenhoehe);
	height: 30px;
}


/*** Footer ************************************/
#footer{
	top: 0;
	position: relative;

	margin-left: auto;
	margin-right: auto;
	width: var(--seitenbreite);
	height: var(--footerhoehe);

	background-color: var(--hintergrundfarbe);
}

#footer img{
	display: block;

	height: var(--footerhoehe);
}

#footer span{
	bottom: 0;
	position: absolute;

	width: var(--impressummargin);
	line-height: 3em;
	text-align: right;

	font-family: 'font_content';
	font-size: 11px;
	letter-spacing: 0.05em;
	color: var(--textfarbe);
}


/*** Impressum *********************************/
#impressum{
	font-family: 'font_content';
	font-size: 14px;
	color: var(--textfarbe);
	padding: 10px;
}