*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
} 


body {
  color: black; 
  background-color: white;
  font-size: 100.01%;
  font-family: Helvetica,Arial,sans-serif;
  margin: 0 auto; 
  padding: 1em;
  /* min-width: 925;  Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
  max-width: 1262;
}
img {
	padding:0.625em 0.3em 0.625em 0.3em;
}
/* On Top Bar - responsive Webdesign */

#menubar {
	display:block;
	background:#FFFFFF;
	height:0.1em;
	
}
#menubar ul {
	display:block;
	width:5em;
	padding:0.9em; 	
}
#menubar ul li {
	display:inline;
}

#menubar ul li a.menubutton {
	display:none;
}

/* Container für Inhalte */
	
.container {
	margin: 0 auto;
	max-width: 48rem;
	width: 90%;
}	

.floatrechts {
	float:right;
}
	
.floatlinks {
	float:left;
}	
	
	
DIV#header {
  /* padding-bottom: 10px; */
  padding-left: 10px;
  padding-right: 10px;
  background-color: #00AA54;  /* #fed */
  height: 94px;
  border: 2px ridge silver;
  margin-bottom: 10px;
  background-image: url(bilder/klein/parkbild.png);
  background-position: top left;
  background-repeat: no-repeat;
}

a#nounderline {
  text-decoration: none;
}

input {
  font-size:18px;
}

input[name=q] {
  width:200px;
}

DIV#logo {
  float: left;
  text-align: center;
}

DIV#search {
  text-align: right;
  padding-left: 30px;
}

h1 {
  font-size: 28pt;
  color:green;
}

ul#Navigation {
  font-size: 0.83em;
  float: left; width: 12em;
  margin: 0 0 1.2em; 
  padding: 0;
  border: 1px dashed silver;
}

ul#Navigation li {
  list-style: none;
  margin: 0; padding: 0.2em;
}

ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }

  ul#Navigation a:link {
    color: black; background-color: #eee;
  }

  ul#Navigation a:visited {
    color: #666; background-color: #eee;
  }

  ul#Navigation a:hover {
    color: black; background-color: white;
  }

  ul#Navigation a:active {
    color: white; background-color: gray;
  }


div#Info {
    font-size: 0.9em;
    float: right; width: 12em;
    margin: 0 0 1.1em; padding: 0;
    background-color: #eee; border: 1px dashed silver;
	}

  div#Info h2 {
    font-size: 1.33em;
    margin: 0.2em 0.5em;
  }

  div#Info h3, div#Info h4 {
	font-size: inherit;
	margin: 0.5em 0.5em;
  }



  div#Info p {
    font-size: 1em;
    margin: 0.5em;
  }



/* trivago */
 div#trivago_dealform{width:160px;background-color:#E6E6E6;border-top:0px solid #828282;border-bottom:0px solid #828282;padding:2px;font-family:Arial;font-size:1em;}
 
 div#trivago_dealform input.querystring{width:155px;margin-bottom:5px;}

 div#trivago_dealform select.room_type{width:160px;margin-bottom:5px;}

 div#trivago_dealform select.day{width:40px;margin-bottom:5px;margin-left:2px;font-size:10px;}

 div#trivago_dealform select.month{width:70x;margin-bottom:5px;margin-left:1px;font-size:10px;}

 div#trivago_dealform input.button{width:160px;}

 div#trivago_dealform ul{list-style-type:none;padding:0px;margin:0px;}


div#Inhalt {
    margin: 0 12em 1em 12em;
    padding: 0 1em;
    border: 1px dashed silver;
	}

  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
  }

  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
  }

  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
	display:inline-block;
	text-align:left;
  }
  
 p#Fusszeile {
    clear: both;
    font-size: 0.9em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color:#00AA54 ; border: 1px solid silver;
  }

  
    
  

/* Tabelle mit Konzerten auf der FLB-Seite */
div#buehne {}

/* Rahmen um den Tabellencontainer */

div#buehne table {
  border: 1px dashed silver;
/*  width: 550px; */ }

div#buehne tbody tr.odd td {background: #eee;}

div#buehne td, div#buehne th {
  padding: 2px 5px;
}

div#buehne th {
  text-align: left;
  text-transform: uppercase;
}

div#buehne caption {
  margin: 0;
  padding: 1em 0;
  text-align: left;
  color: green;
}

div#buehne tfoot {}

/* Tabelle mit Leistungen und Preisen auf der SUP-Seite */
div#sup {}

/* Rahmen um den Tabellencontainer */

div#sup table {
  border: 1px dashed silver;
}

div#sup tbody tr.odd td {background: #eee;}

div#sup td, div#buehne th {
  padding: 2px 5px;
}

div#sup th {
  text-align: left;
  text-transform: uppercase;
  background: #eee;
}

div#sup caption {
  margin: 0;
  padding: 1em 0;
  text-align: left;
  color: green;
}

div#sup tfoot {background: #eee;}

div#sitemap * {
margin: 0;
padding: 0;
}

div#sitemap {
background: #00AA54 url(bilder/hintergrund.jpg) repeat-x;
font: 87.5%/1.3 arial, helvetica, sans-serif;
}

div#sitemap {
padding: 50px;
}

div#sitemap h1, a:hover {
color: #F3EFDD;
}

div#sitemap h1 {
  border-bottom: 2px solid;
  font: normal 1.7em/.8 'trebuchet ms', arial, helvetica, sans-serif;
  margin-bottom: .6em;
}

div#sitemap ul {
list-style: none;
}

div#sitemap ul ul {
border-top: 1px dashed #F3EFDD;
margin-top: .4em;
padding-top: .4em;
}

div#sitemap ul ul ul {
border: 0;
margin: 0 0 0 1.9em;
padding: 0;
}

div#sitemap li a {
background:url(http://www.hamburgerstadtpark.de/sitemap/bilder/ebene-aus.gif) 0 2px no-repeat;
padding-left: 27px;
}

div#sitemap li a:hover {
background-image:url(http://www.hamburgerstadtpark.de/sitemap/bilder/ebene-an.gif);
}

div#sitemap li li li a {
background-image:url(http://www.hamburgerstadtpark.de/sitemap/bilder/dok-aus.gif);
padding-left: 16px;
}

div#sitemap li li li a:hover {
background-image:url(http://www.hamburgerstadtpark.de/sitemap/bilder/dok-an.gif);
}

div#sitemap a {
color: #E3DBBB;
}

dl.imgleft {
  float: left;  
    } /* verhindert das Einrücken und den Abstand nach oben*/

dl.imgleft dt { margin-bottom: 0; }

dl.imgleft dd { margin: 0; }


/* CSS für die Kontaktseite */

div#col1{
	float: left;
	width: 200px;
	padding-bottom: 10px;  
}

div#col2{
  float: right;
  width: 200px;
  padding-bottom: 10px; 
  margin-right: 3em;
}

div.box {margin-top: 55px;}

div#maintext {
  margin: 0px 0em 0px 220px;
  border: 1px solid #CCCCCC;
  background: #F0F0F0;
  padding: 0px 10px;
}

ol 	{
	list-style-type: none;
	margin: 0px 0px 10px 10px;
	padding: 0px;
	}

fieldset.person,

fieldset.nachricht
	{
	border: 1px dashed #cccccc;
	padding-bottom: 10px;
	margin-bottom: 10px;
	}

fieldset.person legend,

fieldset.nachricht legend
	 {
	margin-left: 10px;
	font-family: Georgia, serif;
	font-size: 1.4em;
	font-style: italic;
	color: #004A7F;
	background: #EDEDED;
	padding: 0px 4px;
	}

fieldset.anrede legend,
fieldset.anlass legend
	{
	font-family: Verdana, sans-serif;
	font-size: 1.0em;
	font-style: normal;
	color: #333333;
	font-weight: bold;
	margin: 10px 0px 0px -10px;
	padding-left: 10px;
	}

fieldset.person input,
fieldset.person select
	{
	width: 160px;
	margin-bottom: 10px;
	padding: 2px 5px 3px 5px;
	border-color: #FFF #FFF #CCC #CCC;
}

fieldset.anrede input {
	width: auto;
	border: none;
	margin: 0px;
	padding: 0px;
}

fieldset.person ol label {display: block;}

fieldset.anrede ol li,

fieldset.anlass ol li,

fieldset.anrede ol li label,

fieldset.anlass ol li label {
	display: inline;
}

fieldset.anrede label,

fieldset.anlass label
{
	margin: 0px 4px;
}

label.mand {color: #E3004F; font-weight: bold;}

fieldset.nachrich label {display: block;}

textarea {width: 90%; height: 200px;}

.psubmit {text-align: center; margin-top: 20px;}

input#submit {
	width: 10em;
	padding: 0.5em;
	cursor: pointer;
	font-weigth: bold;
	color: #E3004F;
	background: url(images/back_butto.gif)
	repeat-x left bottom;
}

input#submit:hover {
background: #E3004F;
color: #FFFFFF;
}

ul#Navigation ul {
    background: green;
    padding: 5px;
    display: none;
    z-index: 1;
}

ul#Navigation li:hover ul,

ul#Navigation li.act ul {
    display: block;
}

/* Mobile Style */
@media screen and (max-width:800px) {
/*	body {
		font-size:90%;
	}
*/	
	div#Info {
		display:none;
	}
	
	div#Inhalt{
		width:100%;
		display:block; 
		margin:0.625em 0em 0.625em 0em;
	}	
	
	div#col1{
		margin: 0px 0em 0px 5em;
	}
	
	
	div#maintext {
		margin: 0px 0em 0px 12em;
		border: 1px solid #CCCCCC;
		background: #F0F0F0;
		padding: 0px 10px;
	}
}	
@media screen and (max-width:600px) {
/*
	#main aside, #main article {
		width:100%;
		display:block;
		margin:0.625em 0em 0.625em 0em;
	}
*/

	div#header {
		background-image: none;
		background-color: green;
	}
	
	div#search {
		text-align: left;
		padding-left: 5px;
	}
		
	div#Inhalt, ul#Navigation{
		width:100%;
		display:block;
		margin:0.625em 0em 0.625em 0em;
	}
		
	div#Info {
		display:none;
	}
	
	div#col1{
		margin: 0px 0em 0px 0em;
	}
	
	div#maintext {
		margin: 0px 0em 0px 0px;
		border: 1px solid #CCCCCC;
		background: #F0F0F0;
		padding: 0px 10px;
	}
	
}

/* wichtig wg. Übergang zwischen Desktop und mobiler Ansicht */
@media screen and (min-width:550px) {
	ul#Navigation {
		display:block !important;
	}
}	
@media screen and (max-width:550px) {
	body {
		font-size:86%;
	}
	
	h1, h2 {
		font-size:1.5em;
		color:green;
	}
	
	#menubar {
	display:block;
	background:#FFFFFF;
	height:4em;
	
}	
	#menubar ul {
		display:block;
		width:5em;
		padding:0.9em; 	
	}
	
	#menubar ul li a.menubutton  {
			display:block;
	}
	#menubar ul li a.menubutton  img {
			width:90%;
			height:auto;
			max-width:100%;
	}

	ul#Navigation {
		display:none;
		height:auto;
		}
			
	ul#Navigation li {
		display:block;
		margin:0.3em 0em 0.3em 0em;
	}
	
	img {
		width:90%;
		height:auto;
		max-width:100%;
		display:block;
		padding:0.625em 0.3em 0.625em 0.3em;
	}
/* responsive Einbindung von iframes */
.responsive-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.responsive-video {
	position: relative;
	padding-bottom: 88.88%; /* Default for 1600x900 videos 16:9 ratio*/
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

	
.floatrechts {
	float:none;
}
	
.floatlinks {
	float:none;
}	
}  
 


  
/* Mobile Style Ende */