/* base */
html, body {
	font-family: Arial, Helvetica, sans-serif;
}

body {
	background-color: #e6e6e6;
}

#page {
	width: 1051px;
	margin: 0 auto;
	background-color: #ffffff;
}

#content {
	border-top: 3px solid #e6e6e6;
	box-shadow: 0px 4px 5px 2px #bbb;
	-moz-box-shadow: 0px 4px 5px 2px #bbb;
	-webkit-box-shadow: 0px 4px 5px 2px #bbb;
	background-color: #ffffff;
	padding: 1em;
	/* border: 1px solid blue; no border */
}

/* header */
#header {
	display: block;
	position: relative;
	width: 1051px;
	height: 132px;
	text-align: center;
	color: #2a6ebb;
	background-image: url(../img/header_2.png);
	background-position: top right;
	background-repeat: no-repeat;
	background-color: white;
	margin: 0;
	padding: 0;
	vertical-align: top;
	font-size: 21px;
}

#header h1 {
	margin: 0;
	padding-left: 16px;
	position: absolute;
	bottom: 6px;
	font-weight: normal;
	/*font-family: Georgia;*/
	font-size: 20px;
	width: 315px;
	text-align: left;
	color: #999999;
	/*line-height: 32px;*/
}

#header_col1 {
	font-size: 35px;
	margin-bottom: 18px;
	display: block;
	font-weight: bold;
	color: #336699;
}

#header_col2 {
	display: block;
	line-height: 19px;
	font-size: 17px;
}

#header_col3 {
	font-size: 17px;
}

/* mainmenu */
ul#mainmenu {
	/*display: none;*/
	text-align: right;
	list-style-type: none;
	padding:4px 0 4px 0;
	margin: 6px 57px 0 0;
}

ul#mainmenu li {
	padding: 4px 1em;
	display: inline;
	border: none;
	border-width: 1px 1px 0 1px;
	margin: 0 0 0 0;
	/*background-color: #ddd;*/
}
ul#mainmenu li:hover a {
	/*background-color: #eee;*/
		color: #2a6ebb;
}
ul#mainmenu li a {
	color: #666678;
	font-size: 16px;
	text-decoration: none;
	/*font-weight: bold;*/
}
ul#mainmenu li.selected {
	/*padding-bottom: 5px; 
	background-color: white;
	border-color: blue; */
}
ul#mainmenu li.selected a {
	color: #2a6ebb;
}

/* content */
p.center {
	text-align: center;
}
p.right {
	text-align: right;
}

p.img img {
	margin: 0 40px;
}
/* logos */
ul#logos {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
}
ul#logos li {
	display: inline;
}
ul#logos img {
	vertical-align: middle;
	border: 0;
	margin: 0 26px;
}

/*grafik */
.klemmbrett {
	display: none;
	position: absolute;
	top: 65px;
	right: 38px;
	background-image: url(../grafik/klemmbrett_4.png);
	height: 278px; /*295px - 17-0*/
	width: 184px; /*218px-17-16*/
	padding: 17px 17px 0 16px;
	color: white;
	/* font-family: Georgia; */
	font-size: 16px;
	line-height: 21px;
	margin: 0;
}
ul.masn_text {
	margin:0;
	padding:0;
}
ul.masn_text > li {
	display: none;
}
.masn_container.link_inactive .masn_text li.link_inactive,
.masn_container.link1 .masn_text li.link1,
.masn_container.link2 .masn_text li.link2,
.masn_container.link3 .masn_text li.link3,
.masn_container.link4 .masn_text li.link4,
.masn_container.link5 .masn_text li.link5,
.masn_container.link6 .masn_text li.link6 {
	display: block;
}

.masn_container.link1 .link1 .klemmbrett,
.masn_container.link2 .link2 .klemmbrett,
.masn_container.link3 .link3 .klemmbrett,
.masn_container.link4 .link4 .klemmbrett,
.masn_container.link5 .link5 .klemmbrett,
.masn_container.link6 .link6 .klemmbrett {
	display: block;
}

.masn_container.link1 .link1 .link,
.masn_container.link2 .link2 .link,
.masn_container.link3 .link3 .link,
.masn_container.link4 .link4 .link,
.masn_container.link5 .link5 .link,
.masn_container.link6 .link6 .link {
	/*border: 2px dashed yellow !important;*/
}

/* Style für Links in der ersten Zeile in der Grafik */
.masn_container.link1 .masn.link1 > a.link,
.masn_container.link2 .masn.link2 > a.link,
.masn_container.link3 .masn.link3 > a.link,
.masn_container.link4 .masn.link4 > a.link,
.masn_container.link5 .masn.link5 > a.link,
.masn_container.link6 .masn.link6 > a.link {
	padding: 3px 10px;
	border: 2px solid #2a6ebb;
	color: #ffffff;
	/*border: 2px dashed yellow !important;*/
}

li.masn {
	float: left;
	display: block;
	/*margin-left: 5px;*/
	margin-top: 6px;
	background-image: url(../grafik/trans_grey.png);
}
li.masn:first-child {
	margin-left: 25px;
}

li.masn > a {
	display: block;
	/*border: 2px solid #eeeeee;*/
	padding: 5px 12px;
	color: #eeeeee;
	text-decoration: none;
}
li.masn > a:hover {
	color: #ffffff;
}

li.masn > ul {
	list-style-type: none;
}
.klemmbrett a {
	position: absolute;
	bottom: 15px;
	left: 60px;
	display: block;
	color: white;
	font-size: 18px;
	font-style: italic;
	text-decoration: none;
}

.klemmbrett a:hover {
	text-decoration: underline;
}

.masn_map {
	position: relative;
	height: 500px;
	width: 1000px;
	margin: 0 auto;
	background-image: url(../grafik/background.jpg);
}

.masn_map > ul.map {
	position: absolute;
	height: 500px;
	width: 1000px;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background-image: url(../grafik/layer_inactive.png);
}
.masn_map > ul.text {
	padding-top: 510px;
}

.masn_container.link1 .masn_map > ul.map {
	background-image: url(../grafik/layer_daecher.png);
}
.masn_container.link2 .masn_map > ul.map {
	background-image: url(../grafik/layer_regenwasser.png);
}
.masn_container.link3 .masn_map > ul.map {
	background-image: url(../grafik/layer_durchlaessig.png);
}
.masn_container.link4 .masn_map > ul.map {
	background-image: url(../grafik/layer_versickerung.png);
}
.masn_container.link5 .masn_map > ul.map {
	background-image: url(../grafik/layer_baeume.png);
}
.masn_container.link6 .masn_map > ul.map {
	background-image: url(../grafik/layer_begruenung.png);
}

.masn_map a.layer_link {
	position: absolute;
	text-indent: -1000em;
	background: url(../grafik/trans.png);
	/*border: 1px dotted #aaa;*/
	outline: none;
}

.masn_map li.masn:hover a.layer_link {
	border: 2px solid /*#aaa*/ yellow;
}
.masn_map a.layer_link:hover, .map a.layer_link:focus {
	/* border: 2px solid blue !important; */
}

.masn_map a.layer_link.selected {
	border: 2px solid yellow;
}
ul.text {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

/* image styles */
img.align_left {
	float: left;
	margin-right: 5px;
}
img.align_right {
	float: right;
	margin-left: 5px;
}

/* button form */
form.button_form input[type="submit"]{
	margin: 0 auto; 
	display: block;
}

/* result table */
td.right, table.sum-table td {
	text-align: right;
}

/* info -popup */
a.info_popup {
	display: block;
	width: 23px !important;
	height: 20px !important;
	padding: 0 !important;
	border: 0 !important;
	background-image: url("../img/info.png") !important;
	text-indent: -1000em;
}
a.info_popup.float_right {
	position: absolute;
	right: 5px;
	top: 4px;
}
a.info_popup.inline {
	display: inline-block;
	margin: 0 2px;
	padding: 0;
}

body {
	font-family: Arial, sans-serif;
	font-size: 10pt;
}
div.row { max-width: 1300px; clear: both; margin-bottom:1em; overflow: hidden; box-sizing: border-box; padding: 16px; }
div.col-left { float: left; width: 20%; min-height: 20px; box-sizing: border-box; padding: 0 10px 0 0; }
div.col-mid { float: left; width: 60%; min-height: 20px; box-sizing: border-box; padding: 0 10px;}
div.col-right { float: left; width: 20%; min-height: 20px; box-sizing: border-box; padding: 0 0 0 10px;}

.col-left img { max-width: 100%; }

/*
@media (max-width: 720px) {
	div.col-left { width: 100%; }
	div.col-mid { width: 100%; }
	div.col-right { width: 100%; }
}
*/