/* Stylesheet fuer Website Hermann Westendarp */
/* Version 1.0 */
/* Alexandra Kleijn - last edit: 13.07.2018 */


html, body {
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #64615A; /*body grau */
	text-align: center;
	
}

#achtergrond {
	/* Workaround um Navileiste und Content-Bereich gleich lang zu halten */
	
	position: relative;
	text-align: left;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	padding: 0px; 
	background-image: url(bilder/wrapper_background.gif);
	background-repeat: repeat-y;
	background-position: left top;
	
}


#wrapper {
	/* Umfasst Inhaltsbereich "content" und die navigation links */
	position: relative;
	text-align: left;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	padding: 150px 0 0 0; /* 150 px, die Hoehe des Headerbildes  */
	background-image: url(bilder/hw_header.jpg);
	background-repeat: no-repeat;
	background-position: left top;

}



#content {
	float:right;
	width: 640px; /* fuer die navigation bleiben 160 pixel */
	margin-top:-191px; /*  damit der text auf der richtigen hoehe angfaengt... */
	padding: 20px 10px 80px 0;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #333333; /* Grau - Farbe fuer den Body-Text  */
	
	
}
#content p {
	
	font-size: 70%;
	line-height: 1.6em; 
	
	/* text soll mehr oder weniger parallel zum Headertext verlaufen */
	padding-left: 47px;
	padding-right: 40px;
}


#content p a:link, a:visited {
	
	color: #660000;  /* dunkelrot */
	text-decoration: none;
	border-bottom: 1px dotted;
}



#content h1 { 
	padding-left: 47px;
	font-size: 130% ;
	font-weight: normal;
	color: #660000;  /* dunkelrot */
	background-color: transparent;
}
#content h2 { 
	padding-left: 47px;
	font-size: 90% ;
	font-weight: normal;
	line-height: 1.4em;
	margin-top: 25px; /* definiert auch abstand zu h1 */
	margin-bottom: -10px;
	color: #660000; /* dunkelrot */
	background-color: transparent;	
}

#content ul { 
margin-left: 0px; /* fuer internet explorer */
	padding-left: 47px;
	padding-right: 40px;
	font-size: 70%;
	line-height: 1.6em;
	list-style-type:none; 
}



/* navigation mit grafiken   */

#sidebar {
	 width:160px;
	/* float:left; */ 
}
	/*Menu*/
	#navi {
		padding:0;
		width:160px;
		height:168px; /*gesamthoehe des menues */
		margin:37px 0 0px 0px; /*stimmt so */
		list-style:none; /* textlinks - ohne bullets  */
	}
			
	
	#navi li   {float:left;} 
	
	#navi li a {
		display:block;
		width:160px;
		height:42px;
		float:left; 
		padding:0;	
		text-decoration:none; /*die textlinks unsichtbar machen */
		color:#a9a394; /* die textlinks unsichtbar machen - gleiche farbe wie der hintergrund */
		font-size:0%;
		
	}
	
	#navi li.m01 a, #navi li.m01 {background:url(bilder/navi_start.gif) no-repeat 0 0;}
	#navi li.m02 a, #navi li.m02 {background:url(bilder/navi_kontakt.gif) no-repeat 0 0;}
	#navi li.m03 a, #navi li.m03 {background:url(bilder/navi_anfahrt.gif) no-repeat 0 0;}
	#navi li.m04 a, #navi li.m04 {background:url(bilder/navi_impressum.gif) no-repeat 0 0;}
	#navi li.m05 a, #navi li.m05 {background:url(bilder/navi_datenschutz.gif) no-repeat 0 0;}
	#navi li a:hover {background-position:0 50%;}
	#navi li.active a, #navi li.active a:hover, #navi li.active {background-position:0 100%;}
	
	

#footer {  /* Footer ist notwendig damit navileiste und inhaltsbereich auf der gleichen hoehe enden  */
	clear: both;
	padding: 0 0 20px 440px;
	font-size: 70%;
	color: #AAAAAA;
	background-color: transparent;
}


#foto { 
	float:right;
	padding-right: 50px;
	padding-top: 15px;
}

#anfahrt { 
	padding-left: 50px;
	padding-top: 10px;
}

.roterpunkt /* extra klasse fuer rote auflistungspunkte "span"  */
{ 
color:red;	
}