body {
	box-sizing: border-box;
	padding-left: 2%;
	padding-right: 2%;
	width: 100%;
	max-width: 1000px;
	font-family: Verdana, Arial, Geneva, Helvetica, Sans-Serif;
	color: rgb(115, 115, 115);
	font-size: 12px;
	background-color: white;
	margin-left:auto;
    margin-right:auto;
}

header {
	box-sizing: border-box;
	padding-left: 2%;
	padding-right: 1%;
	width: 100%;
	max-width: 1000px;
}

.logo {
	max-width: 100%;
	height: auto;
}

main {
	box-sizing: border-box;
	float: left;
	text-align: justify;
	padding: 2% 2%;
	border: 0;
	width: 64%;
	min-width: 400px;
	max-width: 700px;
}

main.einspaltig {
	float: left;
	max-width: 80%;
	min-width: 80%;
}

section.beispiel {
	padding: 2%;
	background-color: #eeeeff;
	border:1px solid #ccccff;
	width: 96%;
}

section.katechismus {
	padding: 2%;
	width: 96%;
	background-color: #fffcbb;
	border: 1px solid #ffc20d;
}

.bildmittext {
	max-width: 700px;
	position: relative;
}

.bildmittext span {
	color: black;
	position: absolute;
	bottom: 0;
	background-color: silver;
	background-color: hsla(0, 0%, 100%, 0.5);
}

.bildmittext img {
	display: block;
}

aside {
	box-sizing: border-box;
	float: right;
	margin: 0;
	padding-top: 3em;
	padding-left: 1%;
	padding-right: 1%;
	border: 0;
	width: 30%;
	height: auto;
}

aside.ohneAbstand {
	padding-top: 0em;
}

img {
	max-width: 100%;
	height: auto;
}

.clear { clear: both; }

footer {
	box-sizing: border-box;
	max-width: 100%;
	padding-bottom: 2%
}

footer ul {
	box-sizing: border-box;
	max-width: 100%;
	border: 0px;
	display: inline;
	float: right;
}

#map {
	width: 100%;
}

.hinterlegt {
	padding-right: 2%;
	background-color:#f3f3ff;
	border-top: 1px solid #d5d5ff;
	border-bottom: 1px solid #d5d5ff;
}

.nichtHinterlegt {
	padding-right: 2%;
	border-top: 1px solid #d5d5ff;
	border-bottom: 1px solid #d5d5ff;	
}

h1 { font-size:16px; text-align:left; color:rgb(33,60,156); }

h2 { font-size:13px; text-align:left; margin-top:0; margin-bottom:0; color:rgb(33,60,156);}
h3 { font-size:12px; text-align:left; }
h4 { font-size:15px; text-align:left; color:rgb(33,60,156); margin-top:10px; margin-bottom:3px; }

h5 { font-size:13px; text-align:center; }
h6 { font-weight:normal; font-size:12px; text-align:center; }
.petit { font-size:11px;line-height : 1.3em; }
.petitclair { font-size:11px;color:rgb(152,152,152); line-height : 1.3em;}
.defilant { background-color:rgb(240,236,240); text-align:left; font-size:11px;line-height : 1.3em; }
a { color:rgb(90,90,90); }
a:visited { color:rgb(115,115,115); }
a:hover { color:red; }
a:active { color:rgb(81,81,81); }

h4.link a
{ font-size:15px;
	text-align:left;
	color:rgb(33,60,156);
	margin-top:10px;
	margin-bottom:3px;
	text-decoration:none;
}

.liste {
	display: list-item;
	list-style-image: url('/images/liste.gif');
	margin-left:40px;
	margin-top: 3px;
	margin-bottom: 1px;
	text-align:justify;
}

.liste2 {
	display: list-item;
	list-style-image: url('/images/liste.gif');
	margin-left:30px;
	margin-top: 7px;
	margin-bottom: 10px;
	text-align:left;
}

.titel_box {display: block; margin-left:0px; margin-right:0px; margin-top: 0px; margin-bottom: 5px; background:#0e2c8e; color:#ffc20d; text-align:center;}
.titel_box a {display: block; margin:0px; padding:6px; background:#0e2c8e; color:#ffc20d; text-align:center; text-decoration:none;}
.liste_box {display: block; margin-left:0px; margin-right:0px; margin-top: 3px; margin-bottom: 1px;}
.liste_box a{display: block; margin:0px; padding:3px 5px 3px 5px; text-align:left; background:#e3e3ff; border: 1px solid #d5d5ff; text-decoration:none; color:rgb(81,81,81);}
.liste_box a:hover {background:#0e2c8e; border: 1px solid #0e2c8e; color:#ffc20d; text-decoration:none;}
.pic {padding: 6px; margin:-2px; border:0px;}
.pic:hover { background-color:#ddddff; }

.pic_liste {
	padding: 6px;
	margin-top:4px;
	margin-left:4px;
	border:0px;
	float: left;
}

/* Schriftenstand */

/* Formulare */

label {
	min-width: 6em;
	display: inline-block;
	text-align: left;
	font-size:13px;
	color:rgb(33,60,156);
}

label:first-child {
	vertical-align: top;
}

input {
	width: 20em;
}

input[type="submit"] {
	margin-left: 12em;
}

input[type="submit"], input[type="reset"] {
	width: 12em;
}

textarea {
	width: 24em;
}

input:invalid {
	color: red;
}

/*menus*/

.topnav {
	margin: 0;
	height: auto;
	position: relative;
	font-family: verdana;
	list-style-type: none;
	padding: 0;
}

.topnav li.top {
	display: block;
	float: left;
	position: relative;
}

.topnav a.top_link {
	display: inline;
	float: left;
	height: 40px;
	line-height: 35px;
	color:rgb(33,60,156);
	text-decoration: none;
	font-size: 14px;
	font-weight: normal;
	padding: 0 0 0 12px;
	cursor: pointer;
	overflow: hidden;
}

.topnav a.top_link span {
	float:left;
	display:block;
	padding:0 24px 0 12px;
	height:40px;
}

.topnav a.top_link:hover,
.topnav a.top_link:hover span,
.topnav li:hover > a.top_link,
.topnav li:hover > a.top_link span,
.topnav :hover ul.sub li a:hover {
	color: black;
}

.topnav a:hover {
	visibility:visible;
}

.topnav li:hover {
	position:relative;
	z-index:200;
}

.topnav ul,
.topnav :hover ul ul,
.topnav :hover ul :hover ul ul,
.topnav :hover ul :hover ul :hover ul ul,
.topnav :hover ul :hover ul :hover ul :hover ul ul {
	position:absolute;
	left:-9999px;
	top:-9999px;
	width:0;
	height:0;
	margin:0;
	padding:0;
	list-style:none;
}

.topnav :hover ul.sub {
	left:2px;
	top:40px;
	background: #fff;
	padding:3px 0;
	border:1px solid #0e2c8e;
	white-space:nowrap;
	width:200px;
	height:auto;
}

.topnav :hover ul.sub li {
	display:block;
	height:23px;
	position:relative;
	float:left;
	width:147px;
}

.topnav :hover ul.sub li a {
	border-left:3px solid #fff;
	border-right:0px solid #fff;
	border-top:0px solid #fff;
	border-bottom:0px solid #fff;
	display:block;
	font-size:12px;
	height:23px;
	width:144px;
	line-height:23px;
	text-indent:5px;
	ccolor:rgb(33,60,156);
	text-decoration:none;
}

.topnav :hover ul :hover ul,
.topnav :hover ul :hover ul :hover ul,
.topnav :hover ul :hover ul :hover ul :hover ul,
.topnav :hover ul :hover ul :hover ul :hover ul :hover ul {
	left:145px;
	top:-4px;
	background: #fff;
	padding:3px 0;
	border:1px solid #0e2c8e;
	white-space:nowrap;
	width:150px;
	z-index:200;
	height:auto;
}


.topnav .icon {
	display: none;
}

@media screen and (max-width: 975px) {
	.topnav a.top_link,
	.topnav a.top_link span {
		display: none;
	}

	.topnav a.icon {
		float: right;
		display: block;
	}

	.responsive {
		position: relative;
	}

	.responsive a span {
		float: none;
		display: block;
		text-align: left;
	}

	.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	
	main.responsive, aside.responsive, footer.responsive {
		display: none;
	}

}

@media screen and (max-width: 712px) {
	aside {
		position: relative;
		left: 0px;
		top: 0px;
		box-sizing: border-box;
		float: left;
		margin: 0;
		padding-left: 1%;
		padding-right: 1%;
		border: 0;
		width: auto;
		height: auto;
	}

	main {
		box-sizing: border-box;
		float: right;
		padding: 2% 2%;
		border: 0;
		width: auto;
		min-width: 320px;
		max-width: 700px;
	}

	.seitenbilder, .abstand {
		display: none;
	}

}

@media screen and (max-width: 450px) {
	main, .liste {
		text-align: left;
	}
}

@media screen and (min-width: 1920px) {
	main {
		max-width: 750px;
	}
}

.nav_unten {
	list-style-type:none;
	margin:0px;
	padding-left:0px;
	padding-right:1%;
	padding-top:2px;
	padding-bottom:0px;
	text-align:right;
}

.nav_unten a:link,
.nav_unten a:visited {
	display: inline;
	height:15px;
	margin-left:-1px;
	margin-bottom:0px;
	border: 1px solid #999;
	border-top-width:0px;
	border-bottom-width:0px;
	padding: 0px 5px 0px 5px;
	color:#999;
	font-size:13px;
	font-family:verdana;
	text-decoration:none;
}

.nav_unten a:hover {color:#ffc20d;}