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

@font-face{
	font-family: 'font_header';
	src: url('fonts/wildwanderlust.ttf');
	font-weight: normal;
	font-style: normal;
}

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

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

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

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


/*** Allgemeine Definitionen *******************/
:root{
	--hintergrundfarbe: #f0f0f0;
	--textfarbe: #404040;
	--textgroesse: 15px;
	--menuehintergrundfarbe: #000000;
	--menuetextfarbe: #aaaaaa;
	--menuetextfarbeaktiv: #329fca;
	--ueberschriftenfarbe: #ee9a00;
	--statstrennerfarbe: #d0d0d0;

	--seitenbreite: 800px;
	--logohoehe: 286px;
	--menuehoehe: 40px;
	--headerhoehe: 326px;						/* logohoehe + menuehoehe */

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

	--abstandetappevertical: 15px;

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

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

	--kartenbeschriftung: #eeeeee;

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

	--footerhoehe: 184px;
	--impressummargin: 785px;				/* seitenbreite - 15px */
}

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

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

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

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;

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

#logo img{
	display: block;

	height: var(--logohoehe);
}

#logo span{
	position: absolute;

	bottom: 10px;
	width: 100%;
	line-height: 3em;
	text-align: center;

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

	z-index: 1;
}

nav{
	position: absolute;

	bottom: 0;
	padding-top: 1px;
	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);
}

* 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_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: 12px;
	padding-right: 12px;
	margin-top: 15px;
	margin-left: 90px;
	min-width: 50px;

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

	z-index: 3;
}


/*** 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;
}