@charset "utf-8";
  
/* ############## Style für Portrait-(Hochformat)- Ansicht ###########################*/	
	
	html, body{
		width:100%;
		background-image: url('../images/gelb.jpg');
		background-repeat: repeat; 
		font-family: Verdana, Arial, sans-serif;
		font-size: 14px;
		margin:0;
		padding:0;
		overflow-x:hidden;
	}
	
/*  	*{
		padding:0;
	}
	*/
	h1 {
		font-size: 1.8em;
		color: #996600;
		font-weight: bold;
	} 
	
	h2 {
		font-size: 1.4em;
		color: #cc9900;
		font-weight: bold;
	}

			
	h3 {
		font-size: 1.2em;
		color: red;
		font-weight: bold;
	}
	
	/* Rahmen verlinkter Bilder entfernen  */         
	a img {                                 
		border: 0px;                                        
	}
	
	
	
	/* Tabellen-Formatierung */
	.ms-prof-1000-main {
		border-left: .75pt solid black;
		border-right-style: none;
		border-top: .75pt solid black;
		border-bottom-style: none;
	}
	.ms-prof-1000-even {
		border-left-style: none;
		border-right: .75pt solid black;
		border-top-style: none;
		border-bottom: .75pt solid black;
	}

 	/* =====================================================================================
	   ======================== Vertikale Ausrichtung für mobile Geräte ====================
	   ===================================================================================== */
	header, hauptmenu .nebenmenu, .content1, .content2, footer{
		display: block;	  
	} 	
	
	
	
	header {
		height: 80px;
		text-align:center;
	}
	
	.logo {
		width:auto;
		height:80px;
		
	} 
		
	/* ################ Hauptmenü ############### */	
	
	.hauptmenu{ 
		width:100%;
		height:35px;	 
		text-align:center;
		padding:5px 0px 15px 0px;	
	} 
	
	
	nav ul {
		display:block;
		width:450px;
		list-style: none;
		padding:0px;
		margin:0 auto;
		overflow: hidden;	
	}
	
	nav > ul > li {	
		float: left;
		padding:3px;	  /* Abstände zwischen den Menüpunkten */
	}
	
	nav > ul > li > ul {
		display: none;
	}
	
	nav > ul a {
		display: block;
		white-space: nowrap;
		padding:10px;	  
		text-decoration:none;  	  	  
		font-weight:bold;
		text-align:center;
		background: url('../images/nav.gif') repeat-x;	
		color:white;
	}
	
	nav ul > li > ul > li a {
		background:#F0D770;
		color: brown;
		width:140px;
		height:45px;
		margin-bottom:1px; /*   Abstand zwischen den Untermenü-Punkten */
		white-space:normal;
	}
			
	nav > ul > li:hover > ul {
		display: block;
		position: absolute;
		height:auto;
		width:160px;
		z-index:100;
	}
	
	nav > ul > li > ul > li {
		position: relative;	  
	}	
	
	/* ############ Neben-Menü ################## */	
	
	.nebenmenu{
		width:100%;
		height: 60px;
		text-align:center;
		font-weight:bold;
		line-height:25px;					
		color:black;
		text-decoration:none;
		position:absolute; 
		float:right;			
		word-spacing:25px;
		text-align:center; 	
	}	
	
	
	/* ################ Content1 ################# */
		
	.Content1 {
		margin-top:80px;
		width:100%;	
		padding-left:5px;	
		text-align:center;
		/*  height:auto;*/
	}

	/****** Startseite - Wappen *****/
		
	.wappen{
		width:35%;
		height:auto;	 	
	}
	

	/*** Thema- und Albenseite - KARTE (Stadtplan) ****/
	
	
	.title{
	    font-size:1.2em;
	    font-weight:bold;
	    color:#996600;
	    font-style: italic; 
	    text-align: center; 
	    width:100%;		
		background:#F0D770;
		
	}
	
	.osm {
	    font-size:x-small;
	    text-align:left;
	}
	
	.osm a {
	    color: brown; 
	}
	
	.osm a:hover   {
	    background:#8E6B2A;
	    color: #fff;    
	}
	
	.karte {
		display: block;
		width:95%;
	    overflow:hidden;
	    border: 3px solid #BAA448;
	}
	
	
	/* ################ Content2 e################# */	
		
	.Content2 {
		width:97%;	
		padding-left:7px;			
	}
	
	.textlinks{
		margin-top:120px;
		width:99%;	
		padding-left:10px;	

	}
	
	.textrechts{
		width:97%;	
		padding-left:7px;
	}
	
	.textmitte{
		margin-top:65px;
		width:99%;	
		padding:7px;	
		text-align:center;
	}
	
	.textspalten{
		margin-top:100px;
		width:99%;	
		padding-left:7px;	
	}

	/* ################## Footer ################# */	
		
	.footer1, .footer {
		width:100% ;	 
	}
	
	.wetter{
		display:block;
		width:100%;
		margin:0 auto;	
	}
	.medien{
		display:block;
		width:100%;
		line-height:30px;					
		color:black;
		text-decoration:none;	
		position:absolute; 		
		word-spacing:25px;
		text-align:center;
		margin:20px 0;
	}
	
	 .slideshow{
		display:block;
		width:100%;
		position:absolute;
		margin-top:10px;	
	}
 			
	.footer2{
	    display: block;
	    width: 100%;
	    overflow:hidden;
	    color: #FFFFFF;
	    text-align: center;
	    padding: 0px;
	    border:1.0px solid  #F0D770;
	}
	

 	/* =====================================================================================
	   ============================ Horizontale Ausrichtung ================================
	   ===================================================================================== */
	
	@media only screen and (orientation: landscape) { 
	
	html, body {
		height:100%;
		margin:0;
		padding:0;
		overflow:auto;
	}
	
	header{
		top:0px;
		height: 150px;
		position:fixed !important;
		width:100%;

	}
	
	.logo {
		height: 150px;
		width: auto;	  
	}
	
	/* ############### Menü ################### */	
	
	.hauptmenu {
		top:150px;
		width:50%;
		position:absolute;
		overflow:hauto;
		float:left;
	} 
	
	.nebenmenu {
		top:150px;
		width:50%;
		position:absolute;	   	
		margin-left: 50%;
		float:left;
	} 
	
	/* ###############Content ################ */
	
	.Content1 {
		margin-top:0px;
		top:220px;
		bottom: 138px;
		height:auto;
		position:absolute;
		overflow:hidden;
		width:49%;
		float: left;
	}
	
	.wappen{
		width:40%;
		height:auto;
	}

	#karte{
		height:93%; 
	    width:99%;	
	}
				
	.Content2 {
		top:205px;
		bottom: 138px;
		position:absolute;
		overflow:auto;
		width:49%;
		margin-left:50%;
		float:left;
	}

	.textlinks{
		margin-top:0;
		top:220px;
		bottom: 138px;
		height:auto;
		position:absolute;
		overflow:auto;
		width:69%;
		float: left;
		padding-left:10px;
	}

	.textrechts {
		top:230px;
		bottom: 138px;
		position:absolute;
		overflow:auto;
		width:28%;
		margin-left:71%;
		float:left;
	}

	.textmitte{
		margin-top:0;
		top:240px;
		bottom: 138px;
		position:absolute;
		overflow:auto;
		width:99%;
		float: left;
		padding:10px;		           
	    text-align: center; 
	}


	.textspalten{
		margin-top:0;
		top:240px;
		bottom: 138px;
		position:absolute;
		overflow:auto;
		width:99%;
		float: left;
		padding:10px;		           
	    -moz-column-count: 2;
	    -webkit-column-count: 2;
	    -column-count: 2;	
	}
	
			
	/* ############## Footer ################## */
	
	.footer1, .footer2 {
		height:138px;
		bottom:0px;
		position:absolute;
		clear:both;
	}	
	
	.wetter{
	margin-top:10px;
		width:50%;
		float:left;
	}
	
	.medien{
		width:50%;
		margin-left:50%;
	}

	.slideshow{
		display:block;
		position:absolute;
		margin-top:10px;
		width:310px;
		height:120px;
		margin-left:60%;
	}	
	
	}