* { 
	margin:0; 
	padding:0;
	border:0;
}

@font-face {
  font-family: myFont;
  src: url(Garet-Book.otf);
}

body {  
	color:#444;
	background-color:#F5F0FF;
	font: normal 11pt myFont, 'Open Sans', sans-serif;
	line-height: 1.3em;
}

#nav { 
	min-height:30px;
	margin-bottom:10px;
	padding-left:250px; 
	background-color:#7e4b96; 
}

#nav ul { 
	list-style-type:none;
	margin:0; 
	padding:0; 
}
#nav li { 
	float:left;
	padding:0; 
	margin:0;
}

#nav li.icon, #nav li#neuigkeiten {
	display: none;
}

#nav li a { 
	display:block; 
	text-align:center; 
	color:white; 
	margin-right:15px; 
	padding:0 5px; 
	height:30px; 
	line-height:28px; 
	text-decoration:none; 
	font-weight:bold; 
}
#nav li a:hover { 
	color:#7e4b96;
	background-color:white; 
}

#nav ul ul { 
	display:none; 
	position:absolute; 
	z-index:999; 
}
#nav li li { 
	float:none; 
}
#nav li li a { 
	background:#7e4b96;
	text-align:left; 
	height:auto; 
	line-height:1; 
	width:auto; 
	padding:8px 20px 8px 22px; 
	border:1px solid #D0D0D0; 
	border-top:none; 
	margin-right:0; 
}

#nav ul ul ul {
  margin-left: 100%;
  margin-top: -30px;
}

* html li li { 
	display:inline; 
} /* IE6 Bugfix... */

#bild { 
	width:100%; 
	height:300px; /* 350px; */
}

#logo { 
	position:absolute; 
	top:15px; 
	left:20px; 
	box-shadow: 8px 8px 8px rgba(0,0,0,0.25); 
}

main { 
	display: block;
	position:relative;
	margin: 0 auto;
	max-width: 90%;
}

section {
	float:left;
	position:relative;
	top:-30px;
	width:70%;
}

aside {
	float:right;
	position:relative;
	top:-30px;
	/*
	position:absolute; 
	top:-40px; right:5px;
	*/
	width:29.5%; 
}

article,
.news {
	box-sizing:border-box; 
	margin:10px 1% 15px 1%; 
	padding:8px; 
	border-left:1px solid #f8f8f8;
	box-shadow:6px 6px 6px rgba(0,0,0,0.25); 
	background:#fff; /*linear-gradient(to right, rgba(220, 218, 240, 0.03), #fff);*/
	border-radius: 15px;
}

.newskk {
	color:#7549a0 !important;
	background:#DCDAF0 !important;
}

.editicon {
	float:right; 
	position:absolute;
	right:15px;
}

.editbutton {
	background-color:#7e4b96;
	color:white !important;
	font-weight: bold;
	line-height: 20px;
	font-size: 1.5em;
	text-decoration: none  !important;
	padding: 5px;
	margin:0 3px 10px 5px;
	border-radius: 10px;
}

.ligthgrey { color:#888; }
.red { color:#F00; }

.bildlinks { float:left; width:40%; height:auto; margin:5px 5px 5px 0; }
.bildrechts { float:right; width:40%; height:auto; margin:5px 0 5px 5px; }
.bildmitte { width:60%; height:auto; margin:10px 0 10px 20%; }
.bildgross { width:99%; height:auto; }
.bildhalb { width:49%; height:auto; margin-right:1%; } /*  margin:5px 0 5px 0; */
.bilddrittel { width:32.33%; height:auto; margin-right:1%; } /* margin:2px 1% 2px 0; */
.bildviertel { width:24%; height:auto; margin-right:1%; }
.bildfuenftel { width:19%; height:auto; margin-right:1%; }
.bildsechstel { width:15.66%; height:auto; margin-right:1%; }
.bildlinks, .bildrechts, .bildmitte, .bildgross,
.bildhalb, .bilddrittel, .bildviertel, .bildfuenftel, .bildsechstel { border-radius: 15px; }

article p {
	margin-bottom: 8px;
}

article ul,
.news ul {
	margin-left: 20px;
	list-style-image: url(VioletArrow.gif);
}

article li,
.news li {
	margin-bottom: 15px;
}

a {
	color:#888;
}

h1 {
	font-size: 3.5em;
	margin: 10px -200px 30px 5px;
	/*line-height: 28px;*/
	font-weight: bold;
	position:absolute;
	top:-60px;
	color:white;
	text-shadow: #c0c0c0 3px 3px 5px;
}

h2,
h3 {
	color:#7549a0;
	font-weight: bold;
	line-height: normal;
	font-size: 1.3em;
	margin: 5px 0 10px 0;
	clear: both;
}

h2 {
	font-size: 2em;
	line-height: 1.3em;
}

a:hover { color:#7e4b96; } 

.floatleft { float:left; }
.floatright { float:right; }
.clear {clear:both;}

b {
	color:#7e4b96;
}

main th {
	text-align:left;
	font-weight:normal;
	padding:2px 8px;
	background-color:#7e4b96;
	color:white;
}

main th a:link, main th a:visited {
	color:white;
}

main td {
	vertical-align:top;
	padding:3px;
}

.mygrid div {
	padding:3px;
}

main tr:nth-child(odd), .mygrid div:nth-child(8n+1), .mygrid div:nth-child(8n+2), .mygrid div:nth-child(8n+3), .mygrid div:nth-child(8n+4) {
	background-color: #eee;
}


input,
select,
textarea {
	margin:3px 5px; 
	border:1px solid #CCC;
	font-family: myFont, 'Open Sans', sans-serif;
}

input,
select {
	height:20px;
}

footer {
	font-size:0.8em;
	margin:-10px 0 0 10px;
	clear:both;
}

.scrollicon {
	width:67px;
	height:57px;
	background: url(scrollicon.png) no-repeat;
	cursor:pointer;
	opacity:0.7;
	position:fixed;
	bottom:2%;
	right:2%;
	display:none;
 }

#seitenwahl {
	position: absolute;
	background: #ccc;
	width: 300px;
	height: 200px;
	overflow-y: scroll;
	display:none;
}

/* Youtube */
.youtube-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.youtube-container iframe,
.youtube-container object,
.youtube-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#art535, #art535 h2, #art535 p { background: black; }
#art535, #art535 p { color: white; }


/* Submenu schlecht sichtbar */
@media screen and (max-width: 1150px) { 
	#nav ul ul ul {
	  margin-left: 40px;
	}
}

/* Menu unvollständig */
@media screen and (max-width: 930px) { 
	/* Burger-Menu */
	#nav li:not(:first-child) {
		display: none;
	}
	#nav li.icon {
		float: right;
		display: inline-block;
	}
	#nav.responsive {
		position: relative;
	}
	#nav.responsive li.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	#nav.responsive li {
		float: none;
		display: inline;
	}
	#nav.responsive li a {
		display: block;
		text-align: left;
	}
	#nav ul ul ul {
		/* Wieder normal */
		margin-left: 100%;
	}

}

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

/* Mittlere Größe */
@media screen and (max-width: 895px) { 

	body {
		font-size: 10pt;
	}
	#nav {
		font-size: 11pt;
	}
	main { 
		max-width: 95%;
	}
}

/* Smartphone quer */
@media screen and (max-width: 760px) { 

	body {
		font-size: 10pt;
	}
	
	#nav.responsive li#neuigkeiten {
		display: inline-block;
	}
	#nav ul ul ul {
	  margin-left: 40px;
	}

	#bild { 
		width:100%; 
		height:200px;
	}

	section {
		width:100%;
	}
	
	aside, #losung {
		display:none;
	}
	aside.respaside {
		display:block;
		left:0; top:-20px;
		width:100%;
	}
	
	#logo { 
		width:130px;
		height:130px;
	}

	#nav { 
		padding-left:160px; 
	}
	
	h1 {
		font-size: 3em;
	}

}

/* Smartphone hoch */
@media screen and (max-width: 400px) { 

	h1 {
		font-size: 2em;
	}

}