/*Beispielseite 32 */
/* Erstellt von Nicole Folchert */
/* Erstellt: 26.01.2010*/

/*Basis Elemente */
@import "slicknav/slicknav.min.css";
* {
	margin:0;
	padding:0;
	}

html, body {
	height:100%; 
	background:#d9dadb none repeat scroll 0 0;
	}
	
body { 
	position:relative;
	font-family: Verdana, Arial,Helvetica,sans-serif;
	text-align:center;
	}
	
	
/*Formatierungen*/	
	
#inhalt p, #inhalt ul, #inhalt ol, #inhalt td, #inhalt th { 
	color:#fff;
	font: normal 1.1em verdana, sans-serif;
	line-height:1.3em;
	padding:5px 30px 5px 0px;
	text-align:justify;
	}

#inhalt h1 { 
	margin:0;
	font: bold 1.4em verdana, sans-serif;
	padding:5px 30px 0px 0px;
	color: #fff;
	}	
	
#inhalt h2 { 
	margin:0;
	font: bold 1.3em verdana, sans-serif;
	padding:5px 30px 0px 0px;
	color: #033e76;
	}	
	
#inhalt h3 { 
	margin:0;
	font: bold 1.1em verdana, sans-serif;
	padding:5px 30px 0px 0px;
	color: #033e76;
	}

#inhalt img { border: 1px #fff solid;
	padding: 1px;
	margin: 2px;
	}	

#inhalt img.left { float: left; margin: 10px 10px 0 0;  }
#inhalt img.right { float: right; margin: 10px 0 0 10px; }

/*für die Bilder, die linksbündig vor Aufzählung liegen*/
#inhalt span.left {
 padding-right:20px;
}

#inhalt a:link, #inhalt a:visited { 
	color: #ebeff5; 
	text-decoration: underline;
	padding-left: 0px;
	}

#inhalt a:hover, #inhalt a:active { 
	color: #004a99;
	}

	
#inhalt ul {
	clear:left;
	list-style-type: disc;
	margin-left: 20px;
	}

#inhalt li {
	padding: 0px;
	margin-top: 5px;
	}
	
#inhalt ol {
	clear:left;
	list-style-type: dezimal;
	margin-left: 25px;
	
	}	

#inhalt table {
	margin: 10px 30px 10px 5px;
	border-collapse:collapse;
}	

#inhalt th {
	font-weight:bold;
	border: 1px #9aa504 solid;
	padding: 2px;
	}	

#inhalt td {
	border: 1px #9aa504 solid;
	padding: 2px;
	}	



/* Spezielle DIVs*/


#container {

	margin:0 auto;
	position:relative;
	text-align:left;
	width:914px;
	}

#header_img {
display: none;
}			
	
#oben {
	background:transparent url(hg_oben.jpg) no-repeat scroll left top;
	height:168px;
	width:914px;
	}
	
	
#logo {
	position: absolute;
	top:0px;
	left:20px;
	z-index: 300;
	}	
	
#logo_img {
	width: 280px;
	height:100px;
	background: url() no-repeat bottom left;
	}	
	
	
#inhalt { 
	height: 100%;
	width: 914px;	
	background:transparent url(hg_container.gif) repeat-y scroll center top;
	}	

#text {
	padding-left: 35px;
	padding-top: 10px;
	padding-bottom: 20px;
	margin-left:200px;
	width:600px;
	min-height: 400px;
	border: 0px #898989 solid;
}


/*Footer*/

#footer {
	background:transparent url(hg_footer.jpg) no-repeat scroll center top;
	height:85px;
	width:914px;
	font-size: .8em ;

	}
	
#footer p {
	
	color: #a7b8da;
	margin:0;
	padding:0px;
	padding-top: 62px;
	padding-bottom: 0px;
	text-align:center;
		
	}	
	
#footer a, #footer a:link, #footer a:visited {
		
			color: #a7b8da;
		padding: 0;
		text-decoration: underline;
		}
	
#footer a:hover, #footer a:focus {
	color: #a5b6da;
	}
	

/*Navigation*/	
	
#navi {
left:7px;
position:absolute;
top:168px;
width:138px;
	}	
	

#navi ul {
	font-size:11px;
	line-height:1.3em;
	font-weight: bold;
	margin:0;
	padding: 0px;
	}
	
#navi li {
	list-style-type: none;
	display:block;
	background:transparent url(hg_li.gif) no-repeat scroll 0 100%;
	height: 46px;
	font-size:0;
	}	

#navi li:last-child {
    background:transparent url(hg_li_last.gif) no-repeat scroll 0 100%;
	height: 46px;
  }


/*Für die 2. Ebene - also #navi ul ul { display: none; }*/
#navi2 ul ul li {
display: none; 

}	
	
#navi a, #navi a:link, #navi a:visited {
color:#fff;
font-size:11px;
display:block;
font-weight:bold;
margin-left:-8px;
padding-bottom:0px;
padding-top: 3px;
padding-left:19px;
text-decoration:none;
	}
	
#navi a:hover, #navi a#navaktuell, #navi a:focus {
	color: #8db0c2;
	text-decoration: none;	
	}
	
/*für Grafiken und Blindtext*/
#navi h3.select span {
	display:none;
	}
	
#navi h3.navipunkte1 span {
	display:none;
	}
	
	/* Navigation */
.slicknav_menu {
    display:none;
    background: #909699;
    font-size: 13px;
    line-height: 14px;
    padding:0;
    line-height: 1em;
}

.slicknav_menu li {
    text-align: right;
    margin: 0 0 1px 0;
}

.slicknav_nav ul {
    margin-right:14px;
}

.slicknav_menu .slicknav_menutxt {
}

.slicknav_nav .slicknav_arrow {
    font-size: 1.1em;
    margin: 0;
    padding: 5px 0 5px 12px;
}

.slicknav_nav ul a {
    margin: 0;
    margin-right:15px;
    padding:4px 0;
    text-decoration: none;
}

.slicknav_parent {
    font-weight: bold;
}

.slicknav_parent ul {
    font-weight: normal;
}

@media screen and (max-width: 1023px) {
    #navi ul {
        display:none;
    }

    .slicknav_menu {
        display:block;
    }
}


- Für verschiedene Ausgabegrößen zum Beispiel folgendes:


/* Responsive */
/* fuer iPad (quer) oder kleiner */
@media screen and (max-width: 1023px) {

    #distance, #logo, #topExtraDiv {
        display: none;
    }
    #container, #text {
        max-width: 100%;
    }
    #textHG {
        max-width: 92%;
        padding: 4%;
    }
    #header, #headerSlider, #header_img {
        width: 100%;
        height: auto;
    }
    #footer td {
        display:block;
    }
    #text img {
        max-width: 100%;
    }
    #text .image img {
        max-width: inherit;
    }
    #text span.left {
        margin: 0 10px 5px 0;
    }
    #text span.right {
        margin: 0 0 5px 10px;
    }
    #text span.image > img {
        max-width: 90%;
        height: auto;
    }

    div.columns {
        margin:0 0 0 10px;
    }
    div.columns .col-text {
        margin-top:10px;
    }
    div.columns div.col_2,
    div.columns div.col_3,
    div.columns div.col_4 { /* wird einspaltig */
        float: none;
        margin-left:0;
        margin-right:0;
        border-left: 0;
        border-right: 0;
        width: 95%;
        padding-bottom:15px;
        margin-bottom:15px;
        border-bottom: 1px solid #ddd;
    }
    div.columns > div:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    #text div.columns .image {
        padding-right:15px;
    }
    #text div.columns .image img {
        max-width:99%;
    }
}

/* Fuer iPad (hoch) oder kleiner */
@media screen and (max-width: 768px) {
    
    .text span.image {
        max-width: 40%;
    }
	 .text td {
        display: block;
    }
			#textHG { 
	position: relative;
	height: auto;
	width: 500px;
	border: 1px #ccc solid;
	}	
	
#text { 
	position: relative;
	margin: 0px;
	width: 480px;
	height: auto;
	padding: 10px;
	border: 0px #666 solid;
	font-size:10px;
	}
	#header_img {
    background-color: transparent;
    background-position: left top;
    background-repeat: no-repeat;
}
#inhalt { 
	position: relative;
	height: auto;
	width: 500px;
	border: 0px #ccc solid;
	}
#container {
	position: relative;
	padding: 0;
	margin:  0px auto 0 auto;
	border: 0px #ccc solid;
	width: 500px;
	z-index: 100;
	}
	
#oben {
height: 50px!important;;
		width: 500px!important;
		border: 1px #ccc solid;
		background-size: 100% auto!important;
		background-size: cover!important;}	
	
#header {
	margin-top: 3px;
	position: relative;
width: 500px;
	border-top: 1px #ccc solid;
	border-left: 1px #ccc solid;
	border-right: 1px #ccc solid;

	}
	

#header_img {

background-size: 38% auto;
}

#inhalt img {
    border: 1px solid #666;
    margin: 2px;
    padding: 1px;
	max-width: 100px;
	height:auto!important;
}

#header_img div {

    background-size: cover;
  
}
#footer {
   background:none;
    font-size: 0.8em;
    width: 500px;
	height:50px;
}
#footer p {
    color: #a7b8da;
    margin: 0;
    padding: 5px 0 0;
    text-align: center;
}	
}

/* Fuer iPhone (quer) oder kleiner */
@media screen and (max-width: 568px) {

    .text td {
        display: block;
    }
			#textHG { 
	position: relative;
	height: auto;
	width: 280px;
	border: 1px #ccc solid;
	}	
	
#text { 
	position: relative;
	margin: 0px;
	width: 260px;
	height: auto;
	padding: 10px;
	border: 0px #666 solid;
	font-size:10px;
	}
	#header_img {
    background-color: transparent;
    background-position: left top;
    background-repeat: no-repeat;
}
#inhalt { 
	position: relative;
	height: auto;
	width: 280px;
	border: 0px #ccc solid;
	}
#container {
	position: relative;
	padding: 0;
	margin:  0px auto 0 auto;
	border: 0px #ccc solid;
	width: 280px;
	z-index: 100;
	}
	
#oben {
height: 25px!important;;
		width: 280px!important;
		border: 1px #ccc solid;
		background-size: 100% auto!important;
		background-size: cover!important;}	
	
#header {
	margin-top: 3px;
	position: relative;
width: 280px;
	border-top: 1px #ccc solid;
	border-left: 1px #ccc solid;
	border-right: 1px #ccc solid;

	}
	

#header_img {

background-size: 38% auto;
}

#inhalt img {
    border: 1px solid #666;
    margin: 2px;
    padding: 1px;
	max-width: 100px;
	height:auto!important;
}

#header_img div {

    background-size: cover;
  
}
#footer {
   background:none;
    font-size: 0.8em;
    width: 280px;
	height:50px;
}
#footer p {
    color: #a7b8da;
    margin: 0;
    padding: 5px 0 0;
    text-align: center;
}	

}