@charset "UTF-8";

html {
    overflow-x: auto;
    overflow-y: scroll;
}

body {
    	font: 100% Courier, Arial, Helvetica, sans-serif;
    	background: #b7e8fd;
    	margin: 0;
    	padding: 0;
    	text-align: center; 
    	color: #000000;
    }
	
	a {
	color:#336699;
	text-decoration:none;
	}

	a:hover {
	color:#ff9000;
	text-decoration:none;
	}
    
    /* Tipps für elastische Layouts:
    1. Da die Gesamtgröße elastischer Layouts von der Standardschriftgröße des Benutzers abhängt, sind diese Layouts weniger berechenbar. Bei korrekter Verwendung haben sie außerdem für Personen, die größere Schriften benötigen, einen höheren Nutzwert, weil die Zeilenlänge proportional bleibt.
    2. Die Größe der divs in diesem Layout basiert auf der Originalschriftgröße (100%) im Body-Element. Wenn Sie die Textgröße durch eine Einstellung wie font-size: 80% im Body-Element oder im #container global verringern, wird das gesamte Layout proportional verkleinert. Sie sollten die Breiten der verschiedenen divs vergrößern, um hierfür einen Ausgleich zu schaffen.
    3. Wenn Sie in den einzelnen divs unterschiedliche Werte für die Schriftgröße angegeben, anstatt die Schriftgröße im Design global zu ändern (z. B. wenn #sidebar1 die Schriftgröße 70% zugewiesen wird und #mainContent die Größe 85%), so wird die Gesamtgröße der einzelnen divs proportional geändert. Sie sollten anhand der endgültig gewählten Schriftgröße entsprechende Anpassungen vornehmen.
    */
	/* Media queries */
/* ———————————————————— GROSS ——————————————————— */
/* Minimum width of 961 pixels. */
@media screen and (min-width: 46em) {
    #container 
	{
		width: 100%; 
		min-height: 900px;
		max-width: 1200px; 
    	background: #FFFFFF;
    	margin: 0 auto;
    	border: 0;
    	text-align: left; 
		/* box-shadow: 7px 7px 5px #554f4f; -moz-box-shadow: 7px 7px 5px #554f4f; -webkit-box-shadow: 5px 5px 3px #554f4f; */
		}

    #header { 
    	background: #FFFFFF; 
    	padding: 20px 30px 0 30px; 
		height: 90px; 
    } 
    #header h1 {
    	margin: 0; 
    	padding: 10px 0; 
	font-size: 3em;
	font-weight: normal;
	line-height: 2 em;
	color:#008abf;
    }
	
    #mainContent {
    	padding: 10px 30px; 
    	background: #FFFFFF;
	text-align: left; 
    }
	
		#mainContent p {
		font-size: 1em;
		line-height: 1.3em;
		text-align: left; 
		}
	
	#mainContent h1 {
		font-size: 1.5em;
		line-height: 1.5em;
		color:#008abf;
		font-weight: normal;
		text-align: left; 
		}
		
	#mainContent h2 {
		font-size: 1.25em;
		line-height: 1.4em;
		color:#008abf;
		font-weight: normal;
		text-align: left; 
		}
		
	#mainContent h3 {
		font-size: 1.1em;
		line-height: 1.3em;
		color:#008abf;
		font-weight: normal;
		text-align: left; 
		}
		
	#mainContent ul li {
		font-size: 1em;
		line-height: 1.3em;
		}
		
	#mainContent ul ul li {
		font-size: 1em;
		line-height: 1.3em;
		}

		
    #footer { 
    	padding: 0 30px; 
    	background:#FFFFFF;
    } 
    #footer p {
    	margin: 0; 
    	padding: 0;
    }
	
 	#impressum { 
    	padding: 0 30px; 
		margin: 0;
    	background:#FFFFFF;
    } 
    #impressum p {
    	margin: 0 0 20px 0; 
    	padding: 20px 0;
		line-height: 1.5em;
		text-align: left; 
    }
	
	#mainNav {
		z-index: 3;
		height: 23px;
		width: auto;
		position: absolute;
		margin: 0;
    }
	

	#mainNav ul {
		display: inline;
		font-size: 1.1em;
		font-weight: normal;
		margin: 0;
		padding: 0;
		}
	
	#mainNav ul li {
		display: inline;
		font-size: 1.1em;
		font-weight: normal;
		margin: 0 1px 0 0;
    }
	
	#mainNav ul li a {
		color: #336666;
		text-decoration: none;
		font-weight: normal;
		padding: 0 5px 2px 5px;
		margin: 0;
    }
	
	#mainNav ul li a:hover {
		color: #ff9000;
		text-decoration: none;
		font-weight: normal;
		padding: 0 5px 2px 5px;
		margin: 0;
    }
	
	#subNav {
		z-index: 3;
		height: 23px;
		width: auto;
    	text-align: center; 
		margin: 0;
    }
	

	#subNav ul {
		display: inline;
		font-size: 0.9em;
		font-weight: normal;
		margin: 0;
		padding: 0;
		}
	
	#subNav ul li {
		display: inline;
		font-size: 0.9em;
		font-weight: normal;
		margin: 0 1px 0 0;
    }
	
	#subNav ul li a {
		color: #336666;
		text-decoration: none;
		font-weight: normal;
		padding: 0 5px 2px 5px;
		margin: 0;
    }
	
	#subNav ul li a:hover {
		color: #ff9000;
		text-decoration: none;
		font-weight: normal;
		padding: 0 5px 2px 5px;
		margin: 0;
    }
	
	.bild {
	padding: 5px 0 10px 0;
	width: 100%;
	height: auto;
	border: 0;
	}
	
	.halbbild {
	padding: 5px 0 10px 0;
	width: min(50%,400px);
	height: auto;
	border: 0;
	}
	/*
	# thumbNav {
		z-index: 3;
		height: auto;
		width: auto;
    	text-align: center; 
		margin: 0;
    }
	
	.thumb {
	padding: 5px 0 5px 0;
	width: 9%;
	height: auto;
	border: 0;
	}
	*/
	
	#thumbNav p{
  line-height: 0; 
  column-count:         10;
  column-gap:           5px;  
}

#thumbNav p img {
  width: 100% !important;
  height: auto !important;
}
	
	}
	
/* ———————————————————— KLEIN ——————————————————— */
@media screen and (max-width: 46em) {
    #container 
	{
	width: 100%;  
    	background: #FFFFFF;
    	margin: 0 auto;
    	border: 0;
    	text-align: left; 
		}

    #header { 
    	background: #FFFFFF; 
    	padding: 10px 30px 0 30px; 
		height: 60px; 
    } 
    #header h1 {
    	margin: 0; 
    	padding: 10px 0; 
		font-size: 2em;
		font-weight: normal;
		line-height: 2 em;
		color:#008abf;
    }
	
    #mainContent {
    	padding: 10px 30px; 
    	background: #FFFFFF;
		text-align: left; 
    }
	
		#mainContent p {
		font-size: 1em;
		line-height: 1.5em;
		text-align: left; 
		}
	
	#mainContent h1 {
		font-size: 1.3em;
		line-height: 1.5em;
		color:#008abf;
		font-weight: normal;
		text-align: left; 
		}
		
	#mainContent h2 {
		font-size: 1.2em;
		line-height: 1.4em;
		color:#008abf;
		font-weight: normal;
		text-align: left; 
		}
		
	#mainContent h3 {
		font-size: 1.1em;
		line-height: 1.3em;
		color:#008abf;
		font-weight: normal;
		text-align: left; 
		}
		
	#mainContent ul li {
		font-size: 1em;
		line-height: 1.3em;
		}
		
	#mainContent ul ul li {
		font-size: 1em;
		line-height: 1.3em;
		}
		
    #footer { 
    	padding: 0 30px; 
    	background:#FFFFFF;
    } 
    #footer p {
    	margin: 0; 
    	padding: 0;
    }
	
 	#impressum { 
    	padding: 0 30px; 
		margin: 0;
    	background:#FFFFFF;
    } 
    #impressum p {
    	margin: 0 0 20px 0; 
    	padding: 20px 0;
    	text-align: left; 
		line-height: 1.5em;
    }
	
		#mainNav {
		z-index: 3;
		height: 23px;
		width: auto;
		position: absolute;
		margin: 0;
    }
	

	#mainNav ul {
		display: inline;
		font-size: 1em;
		font-weight: normal;
		margin: 0;
		padding: 0;
		}
	
	#mainNav ul li {
		display: inline;
		font-size: 1em;
		font-weight: normal;
		margin: 0 1px 0 0;
    }
	
	#mainNav ul li a {
		color: #336666;
		text-decoration: none;
		font-weight: normal;
		padding: 0 5px 2px 5px;
		margin: 0;
    }
	
	#mainNav ul li a:hover {
		color: #ff9000;
		text-decoration: none;
		font-weight: normal;
		padding: 0 5px 2px 5px;
		margin: 0;
    }
	
	#subNav {
		z-index: 3;
		height: 23px;
		width: auto;
    	text-align: center; 
		margin: 0;
    }
	

	#subNav ul {
		display: inline;
		font-size: 0.9em;
		font-weight: normal;
		margin: 0;
		padding: 0;
		}
	
	#subNav ul li {
		display: inline;
		font-size: 0.9em;
		font-weight: normal;
		margin: 0 1px 0 0;
    }
	
	#subNav ul li a {
		color: #336666;
		text-decoration: none;
		font-weight: normal;
		padding: 0 5px 2px 5px;
		margin: 0;
    }
	
	#subNav ul li a:hover {
		color: #ff9000;
		text-decoration: none;
		font-weight: normal;
		padding: 0 5px 2px 5px;
		margin: 0;
    }
	/*
	# thumbNav {
		z-index: 3;
		height: auto;
		width: auto;
    	text-align: center; 
		margin: 0;
    }
	
	.thumb {
	padding: 5px 0 5px 0;
	width: 9%;
	height: auto;
	border: 0;
	}
	*/
	
	.bild {
	padding: 5px 0 10px 0;
	width: 100%;
	height: auto;
	border: 0;
	}
	.halbbild {
	padding: 5px 0 10px 0;
	width: 100%;
	height: auto;
	border: 0;
	}
	
	#thumbNav p{
  line-height: 0; 
  column-count:         5;
  column-gap:           5px;  
}

#thumbNav p img {
  width: 100% !important;
  height: auto !important;
  padding: 0 0 5px 0;
}

	}
	
@media (min-width: 46em) { 
	.doppelbildli {float:left; width: min(49.7%); padding: 0 2px 4px 0 !important}
	.doppelbildre {float:right; width: min(49.7%, 480px); padding: 0 2px 4px 0 !important}
	.bildli {float:left; width: min(48%); vertical-align:middle; padding: 0 2px 14px 0; margin: 0 30px 0 0 !important}
	.bildre {float:right; width: min(48%); vertical-align:middle; padding: 0 2px 14px 0; margin: 0 0 0 30px !important}
}
@media (max-width: 46em) { 
	.doppelbildli {float:left; width: 100%; padding: 0 0 4px 0; float: none !important}
	.doppelbildre {float:right; width: 100%; float: none !important}
	.bildli {float:left; width: 100%; float: none; margin: 0 0 20px 0 !important}
	.bildre {float:right; width: 100%; float: none; margin: 0 0 20px 0 !important}
	
	p:after { 
  content: ""; 
  display: block; 
  clear: both; 
}