body {
	margin:0;
	padding:0;
	background:url(../img/BremerFamilienstadtplan.gif) no-repeat #F1CA00;
	color: black;
/*
	height:100%;
*/
}

body, div, span, td {
	font-family:Arial,sans-serif;  
}

ul {margin-top:0px; padding-top:0px}
td {vertical-align:top}

img {border-width:0}

.NoCss {display:none}
.NoScript {position:absolute; left:20%; top:40%; width:60%; padding:10px; border: 1px solid red; color:red; background-color:#FCF4CC;}
.NoScript a {color:#64A138}
.Print {display:none}


#map-canvas {width:90%; height:90%; margin: 49px 0 0 50px; overflow:hidden; border:1px solid #64A138}
#map-canvas div.progressBar {height:7px; overflow:hidden}

#impressum {position:absolute; bottom:15px; right:50px; text-align:right}
#impressum a {text-decoration:none; color:#64A138; font-size:0.8em}

#intro {
	position:absolute; 
	top:10%; 
	left:50%; 
	width:480px; 
	margin-left:-275px;  
	padding: 65px 30px 40px 40px; 
	background:url(../img/Liebe-Familien.gif) no-repeat #FCF4CC; 
	border:1px solid #64A138; 
	color:#64A138; 
	font-size:0.7em; 
	line-height:1.2em;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#intro div.close {position:absolute; bottom:0px; left:0px; margin-bottom:-0; padding:0; width:138px; height:34px; background-image:url(../img/WeiterZurKarte.gif); cursor:pointer}

#remote {position:absolute; display:none; background-color:#64A138}
#remote div {position:absolute}
#remote .zoom {background-image:url(../img/remote/scale.gif); width:81px; height:28px}
#remote .zoom #zoomslider {top:13px; cursor:move}

#remote {width:160px; height:185px; left:29px; top:300px; background:#64A138 url(../img/remote/bg.gif) no-repeat}
#remote .menu {left:9px; top:21px; width:144px; height:27px; background-image:url(../img/remote/Auswahl0.gif); cursor:pointer }
#remote .menu.pressed {background-image:url(../img/remote/Auswahl1.gif)}
#remote .satellite {left:9px; top:48px; width:71px; height:27px; background-image:url(../img/remote/Satellit0.gif); cursor:pointer}
#remote .satellite.pressed {background-image:url(../img/remote/Satellit1.gif)}
#remote .map {left:9px; top:71px; width:71px; height:27px; background-image:url(../img/remote/Karte0.gif); cursor:pointer}
#remote .map.pressed {background-image:url(../img/remote/Karte1.gif)}
#remote .search {left:81px; top:58px; width:73px; height:27px; background-image:url(../img/remote/Suche0.gif); cursor:pointer}
#remote .search.pressed { background-image:url(../img/remote/Suche1.gif)}
#remote .left {left:38px; top:109px; width:29px; height:29px; background-image:url(../img/remote/left.gif); cursor:pointer}
#remote .right {left:96px; top:109px; width:29px; height:29px; background-image:url(../img/remote/right.gif); cursor:pointer}
#remote .up {left:67px; top:96px; width:29px; height:29px; background-image:url(../img/remote/up.gif); cursor:pointer}
#remote .down {left:67px; top:123px; width:29px; height:29px; background-image:url(../img/remote/down.gif); cursor:pointer}
#remote .zoomout {left:9px; top:151px; width:31px; height:30px; background-image:url(../img/remote/zoomout.gif); cursor:pointer}
#remote .zoomin {left:121px; top:151px; width:31px; height:30px; background-image:url(../img/remote/zoomin.gif); cursor:pointer}
#remote .zoom {left:41px; top:151px}
#remote .dock {left:140px; top:0}
#remote .undock {display:none}
#remote .mover {width:160px; height:20px; cursor:move}

#remote.docked {width:673px; height:50px; top:0px !important; left:303px !important; background-image:url(../img/remote/bg_dock.gif)}
#remote.docked .menu {left:0px; top:12px}
#remote.docked .satellite {left:154px; top:12px}
#remote.docked .map {left:224px; top:12px}
#remote.docked .search {left:306px; top:12px}
#remote.docked .left {left:392px; top:10px}
#remote.docked .up {left:418px; top:10px}
#remote.docked .down {left:444px; top:10px}
#remote.docked .right {left:471px; top:10px}
#remote.docked .zoomout {left:509px; top:9px}
#remote.docked .zoomin {left:615px; top:9px}
#remote.docked .zoom {left:536px; top:9px}
#remote.docked .undock {display: block; left:657px; top:0}
#remote.docked .dock {display:none}
#remote.docked .mover {display:none}

#menu {display:none; position:absolute; top:49px; left:50px; width:512px; background-color:#FCF4CC; border:1px solid #64A138}
#menu form {margin:0; padding:0 }
#menu .menu_content {float:left}
#menu .close {clear:left; position:relative; left:374px; width:138px; height:34px; background-image:url(../img/ZurueckZurKarte.gif); cursor:pointer}


#menu #categories {
	float:left;
	width: 168px;
}
.category {
	width: 168px;
	height: 26px;
	background: #91B76A url(../img/Button.gif) no-repeat;
}
.category a {
	display:block;
	color: white;
	font-weight: bold;
	text-decoration: none;
	font-size: 0.75em;
	padding: 5px 5px 5px 24px;
}
#categories .category.current {
	background: #64A139 url(../img/Button_active.gif) no-repeat;
}

#cat_elements {
	float:left;
	width:342px;
}
.cat_elements {
	float:left;
	display:none;
}
.cat_elements.current {
	display:block;
}

#cat_elements table {width:342px}
.cat_elements table td {padding:5px 0 5px 3px; font-size:0.68em; line-height:1.2em; border-bottom: 1px solid green; padding-right: 10px; }
.cat_elements table td img {float:left; margin-right:5px}
.cat_elements table td div {font-size:1.1em; font-weight:bold; padding-bottom: 5px}
#cat_elements .cat_elements table td.text {width:258px}
.cat_elements table td.check {padding-top: 18px} 
#cat_elements table a { color:black}



#imprint {
	display:none; 
	position:absolute; 
	top:11%; 
	left:50%; 
	width:560px; 
	margin-left:-285px; 
	padding: 55px 30px 33px 30px; 
	background:url(../img/Impressum.gif) no-repeat #FCF4CC; 
	border:1px solid #64A138;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#imprint table {color:#64A138; font-size:0.7em; line-height:1.2em; width: 520px}
#imprint table td {width: 225px}
#imprint table td.full {width: 560px}
#imprint p {margin:5px 0 0 0; padding:0}
#imprint a {color: #64A138}

#imprint div.close {position:absolute; bottom:0px; left:0px; margin:0; padding:0; width:138px; height:34px; background-image:url(../img/ZurueckZurKarte.gif); cursor:pointer}

#imprint {
	display:none;
	position:absolute;
	top:11%; left:50%;
	width:500px; margin-left:-285px;
	padding: 65px 30px 40px 40px;
	background:url(../img/Impressum.gif) no-repeat #FCF4CC;
	border:1px solid #64A138;
	color: #64A138;
    font-size: 0.7em;
	line-height: 1.2em;
}

#search {display:none; position:absolute; top:90px; left:650px; width:160px; padding: 20px 0 0 0; background:#64A138 url(../img/remote/bg.gif) no-repeat}
#search form {margin:0}
#search div {margin-left:10px}
#search .text {width:140px; margin-top:10px; margin-bottom:10px}
#search .button {margin:0 0 5px 35px}
#search .help, #search li {font-size:0.8em; color: white}
#search .mover {position:absolute; top:0; left:0; width:160px; height:20px; cursor:move}
#search .close {position:absolute; left:130px; top:0}
#search button {margin-left:-6px; padding:0; border:none; background-color:transparent}

#search a {text-decoration:none; color:white}
#search .error {padding:10px}
#searchResults {list-style-type:none; margin:0; padding:10px}
#searchResults li {padding:0; margin:5px 0 0 0}


.mrk {
	margin: 1px;
	padding: 0 10px 10px 10px;
	border:1px solid #64A138;
	background-color: #FCF4CC;
	color: black;
  	min-width: 220px;
  	font-size: 13px;
}
.mrk > img {
  margin-left: -15px;
  display: inline;
}

.mrk h3 {
  display: block;
  padding-top: 9px;
  padding-bottom: 5px;
}

.mrk.detail.act {
  padding-top: 10px;
  padding-bottom: 20px;
}
.mrk.detail.act > img {
  margin-left: 0;
  vertical-align: top
}
.mrk.detail.act > h3 {
  display: inline-block;
  padding-top: 5px;
  padding-bottom: 5px;
}
.mrk.detail td {
  padding-left: 10px; 
}
.mrk.detail td:first-child {
  padding-left: 0;
}
.mrk.detail h4 {
  margin-bottom:0; 
  margin-top:0; 
  color:#64A138
}
.mrk.detail p {
  margin-top:0; 
  margin-bottom:0
}
.mrk.detail p.project {
  margin-top:20px
}
.mrk.detail a {
  text-decoration:none; color:#64A138
}
.mrk.detail hr {
  border: none; 
  border-bottom: 1px solid #64A138; 
  margin: 2px 3px 3px 0
}

.mrk.act.detail {
  max-width: 700px;
}


#no-marker {
  position: absolute;
}

.mrk.search {
	padding: 3px;
	border:1px solid #64A138;
	background-color: #FCF4CC;
	color: black;
	font-size: 12px;
}

/*
.mrk > h3, .mrk > table, .mrk > span {
  display: none;
}

.mrk.act,
.mrk.act img,
.mrk.act span {
  float: left;
}

.mrk.act > h3, .mrk.act > table, .mrk.act > span {
  display: block;
}
.mrk.act > span {
  display: inline;
}



.mrk a {color:#64A138}

.mrk.act {
	margin: 0px;
	width: 200px;
	border:1px solid #64A138;
	background-color: #FCF4CC;
	color: black;
  padding: 10px;
}

.mrk.act.detail {
  width: 700px;
	padding-bottom:45px;
	padding-right:10px;
}

.mrk > img {
	margin-top:-5px;
	margin-left: -5px;
	margin-right: 5px;
	margin-bottom: 1px;
}

.mrk span {
	display:none;
	font-size: 12px;
	padding: 0px;
}

span div.detail {
	padding-left: 16px;
}


span div.detailActive.LSB {
	width:400px;
}

.detail .icon {position:absolute; left:17px; top:13px}
.detail .image {float:left; padding-right: 15px}
.detail h3 {font-weight:normal; font-size:1.2em; margin-top:34px; margin-bottom:0.3em; color:#64A138; margin-left:52px}
.detail h4 {font-size:1em; margin-bottom:0; margin-top:0; color:#64A138}
.detail p {font-size:1em; margin-top:0; margin-bottom:0}
.detail p.project {margin-top:20px}
.detail a {text-decoration:none; color:#64A138}
.detail hr {border: none; border-bottom: 1px solid #64A138; margin: 2px 3px 3px 0}

*/



@media only screen and (max-width: 600px) {
	#intro {
		top: 10%;
		left: 5%;
		width: 82%;
		margin-left: 0;
		padding: 10px 10px 10px 10px;
		background-image: none;
	}
	span.NoCss {
		display: block;
	}
	#imprint{
		position: absolute;
		top: 11%;
		left: 6%;
		width: 82%;
		margin-left: 0;
		padding: 10px 10px 10px 10px;
		background-image: none;
		z-index: 1006;
	}
	#menu .close{
		left: 0;
	}
	#map-canvas {
		margin: 49px 0 0 10px; 
	}
	#impressum {
		bottom:15px; 
		left:15px;
		right: auto;
		text-align: left;
	}
}