/* Homepage "singenmachtfreude"----------------------------------*/
/* Farbschema  -------------------------------------------------------------------*/
/*
Farbton (heller Hintergrund):		#F3DEBD
Farbton (heller oranger Hintergrund:#FFCC66
Farbton (blauer Hintergrund): 		#8DB6CD
Farbton (blaue Schrift):		#336699
Farbton (rote Schrift): 		#990000
Farbton (dunkelbraune Schrift):	#470007
Farbton (weiße Schrift):		#FFFFFF
Farbton (Link): 				#470007
*/
/* Reset der Abstände aller Block-Elemente mithilfe des Universalselektors damit die internen Browservorgaben nicht verwendet werden
----------------------------------*/
{
	padding: 0;
	margin: 0;
	border: 0;
}

/* Globals und Typo----------------------------------*/

html {
/* Wahlweise Grid-Hintergrund, Rasterhintergrund, der die Breite bis 1000 Pixel und eine Höhe bis 950 Pixel anzeigt. Die Breite von 960 Pixel ist markiert. Der Hintergrund ist transparent, muss also nicht nur mit #fff verwendet werden. Es wird eine Schriftgröße von 75% oder 12 px festgelegt.
background: #fff url('bilder/grid.png') top left no-repeat;*/
/*background: #fff;*/
}

body {
	background: #8DB6CD;
	font-size: 100,01%;
	position:relative;
}


a:link {
	color: #470007;
	text-decoration: none;
}

a:visited {
	color: #470007;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

/* Macht die gepunktete Linie um geklickte Links unsichtbar ------------------------------------ */

a:focus {
	outline: none;
}

/* Vertikaler Rhythmus basierend auf 12px Basisgröße für den Fließtext
------------------------------------ */

p {
	font: 0.9em Verdana, Georgia, "Trebuchet MS", Verdana;
	line-height: 1.5em;
	margin-top: 1.5em;
	margin-bottom: 1.0em;
	margin-left: 1em;
	margin-right: 1em;
	font-style: italic;
}

h1 {
	font: 2em;
	margin: 1em 0 0 0.8em;
	color: #ffffff;
	font-style: italic;
}

h4 {
	font:1em Segoe UI;
	padding: 1em 0 0 0.5em;
	margin:auto;
	font-style: italic;
}

blockquote {
	color:#f3debd;
	margin-left:20px;
	font-size: 1.5em;
	font-style: italic;
}

span {
	/*font-family:Georgia;*/
	margin: 0 0 0 1em;
}

/********Die Boxen für die Akkordeon Navigation auf der Seite index.html******/



li.box {
	background:#0b2946;
	color:#eeeeee;
	margin:1px 35px 0 1px;
	font:1.2em Segoe UI;
	border-radius:10px;
	list-style-type: none;
	}

article[id*="a"] h4 {
	font: 1em Verdana, Georgia, "Trebuchet MS";
	background:#f3debd;
	padding: 0.5em;
	border-top: 0;
	border-radius: 0.5em;
	margin:0 0.2em;
	}


article[id*="a"] h4:before {
	content: "♫   ";
	color:#470007;
}


article[id*="a"]:target h4:before {
	margin: 0 5px;
	content: "♪   ";	
	}	

article[id*="a"] a {
	text-decoration:none;
	color: #470007;
	}
	
article[id*="a"] p {
	/*padding:0.5em;*/
	}

/*--der Zurück-link-----------------------*/
div.artikelinhalt a {
	color: #000000;
	margin:1em 0 5em 2em;
	/*padding: 0 0 5em 0;*/
	font: 0.8em Verdana, Georgia, "Trebuchet MS";
	
	}
	
div.artikelinhalt {
	background-color: #cfe2f3;
	padding: 1em 5em;
	max-width: 1040px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;

	}

article[id*="a"]:not(:target) p.artikelinfo, 
article[id*="a"]:not(:target) div.artikelinhalt {
	display: none;
}


/***Ende Aufklappen Akkordeon------ */


/*------------------------Beginn der eigentlichen Seite-------------------------------- */


#hauptinformation {
	
	margin: 0 auto 5px;
	background: #336699;
	color: #F3DEBD;
	border:#470007 2px solid;
	border-radius: 10px;
	max-width:1040px;
}


/*---------------------------Fußzeile--------------------------------------------------- */

.footer {
	clear: both;
	background:#336699;
	/*color:#F3DEBD;*/
	margin:0 auto;
	height:75px;	
	border-radius:10px;
	border:#470007 solid 2px;
	text-align:center;
	text-decoration:none;
	max-width:1040px;
}

.footer p {
	margin: 2.5em 0 1em 0;
	font:75% Verdana;
	
}

.footer a {
	font:75% Verdana;
	color: #F3DEBD;
	text-decoration:underline;
	border-bottom:0px;
	text-align:center;
	display:block;
	text-decoration:none;
}

section:last-of-type {
	padding:20px 0px;
}


}

/*-----------------Menübutton------------------------------*/

div.menubutton {
	display:block;
	position:absolute;
	right:0;
	top:-1.5em;
	z-index:1000;
	font-family:Verdana;
	margin:20px 0 0 0;
	}

div.menubutton a {
	display:block;
	color:#470007;
	background:#F3DEBD;
	text-decoration: none;
	padding:1em 0.5em 0.5em 0.5em;
	border-bottom-left-radius:0.25em;
	border-bottom-right-radius:0.25em;
	border:#470007 solid 1px;
	max-height:1.3em;
	min-height:1.3em;
	max-width:4.5em;
	min-width:4.5em;
	vertical-align:bottom;
}

div.menubutton a.shownavlist:after {
	content: "\2630";/*Hamburger*/
}

div.menubutton a.hidenavlist:after {
	content: "\2715";/*Kreuz*/
}

div.menubutton a.hidenavlist {
	display:none;
}

#menu:target ul#navlist {
	max-height:500em;
}

#menu:target a.shownavlist {
	display:none;
}

#menu:target a.hidenavlist {
	display:block;
}
/*--------------ENDE---Menübuttons------------------------------*/


#navlist {
	padding:0;
}



#nav {
	clear:both;
	width:100%;
	padding-left:35px;
	}

#nav li {
	float:left;
	margin:0 0 9px 0;
	}

#nav li a, #nav li a:visited {
	padding:10px 12px 10px 8px;
	border-bottom: 0px solid #470007;
	}

#nav li a:hover {
	color:#336699;
	box-shadow:0 4px 10px rgba(51,51,51,0.3);
	border-bottom-right-radius:15px;
	border-top-left-radius:15px;
	}

#nav li:last-of-type a {
	background:#f3debd;
	text-decoration:none;
	color:#ff0000;
	height:20px;
	border:1px #470000 solid;
	border-bottom-right-radius:15px;	
	border-bottom-left-radius:15px;
	border-top-right-radius:15px;
	border-top-left-radius:15px;
	}


#nav ul{
	max-height:0;
	overflow:hidden;
	transition:0.50s;
	list-style-type: none;
	border-radius: 1rem;
	margin: 0;
}

/*#nav li {
	display:block;
	height:2em;
	font: 1em Verdana, "Trebuchet MS";
	text-align:center;
	}

#nav li:last-of-type {
	border-bottom: 0;
	line-height:80%;
	height:40px;
	letter-spacing:-0.05em;
}

#nav li:last-of-type a{
	color:#ff0000;
}

#nav li:last-of-type :hover {
	color:#336699;
}

#nav li a{
	display:block;
	text-decoration: none;
	padding:0.5rem;
}

#navlist a:hover {
		color: #336699;
		background:#f3debd;
	}
	
#nav li.active a{
	color:#336699;
	text-decoration:underline;
}	
	*/
	

/*---Die Navigation für die einzelnen Unterkünfte (vorherige, zurück, Übersicht, nächste)-----*/

ul#nav1list {
	list-style-type:none;
	margin-right:1em;
	}

#nav1 li {
	float:right;
	font-style:italic;
	font-size:0.9em;
	text-align:middle;
	border-right:1px solid #470007; 
	}

#nav1 li a, #nav1 li a:visited {
	padding:0px 12px 10px 10px;	border-bottom: 0px solid #470007;
	}

#nav1 li a:hover {
	color:#336699;	
	}
#nav1 li:first-of-type {
	border: 0px solid #470007;
}



/*-----------------Beginn Media Querries-----------------------------------------------------500px--------*/	
@media screen and (min-width: 500px){	


#metainformation {
	padding-top: 0;
	
}

#metainformation img.logo {
		display: inline;
		width:85px;
		margin:0 5px 30px 10px;
	}
	
#metainformation img.zimmer {
		width:75%;
		max-width:480px;
		padding-bottom:10px;
		}

#filter {
	width:98%;
	float:left;
	margin: 10px 2px 25px 0;
	}

#filter li {
	float:left;
	height:2.8em;
	padding:10px 0 0 0;
	font-size:0.9em;
	width:48%;
	margin: 0 0 5px 5px;
}

th.head0 {
	font-size: 1em;
}

}


/*-----------------------------------------------------------------------725px--------------*/
@media screen and (min-width: 725px) {

	#top {
		width:calc(100% - 250px - 30px);
		display:block;
	}
		
	#metainformation {
		clear: both;
		height:173px;
		float:left;
		width:calc(100% - 260px - 30px);
		padding-top:25px;
	}
	

	


	h1{
		padding-top:25px;
	}
	
	h3 {
		font-size: 1.4em;
	}
	
	
	
	section {
		height:75px;
		float:left;
	}
	
	section:nth-of-type(1) {
		width:45%;
		}
		
	
		





table p {
	font-size:90%;
}

th.head0 {
	font-size: 1.1em;
}

}

/*---------------------------------------------------------------------900px--------------*/
@media screen and (min-width: 900px) {


#filter li {
	width:32%
	}

}