/* amatic-sc-regular - latin */
@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Amatic_SC/amatic-sc-v24-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/Amatic_SC/amatic-sc-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Amatic_SC/amatic-sc-v24-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/Amatic_SC/amatic-sc-v24-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/Amatic_SC/amatic-sc-v24-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Amatic_SC/amatic-sc-v24-latin-regular.svg#AmaticSC') format('svg'); /* Legacy iOS */
}

/* oxygen-regular - latin */
@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Oxygen/oxygen-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/Oxygen/oxygen-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Oxygen/oxygen-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/Oxygen/oxygen-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/Oxygen/oxygen-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Oxygen/oxygen-v15-latin-regular.svg#Oxygen') format('svg'); /* Legacy iOS */
}


#logo{
			background-image: url(../pics/euskirchen-online-figur.jpg);
			background-repeat: no-repeat;	
			background-position: 150 3px;	
			height: 150px;
			width:	10px;
			padding-left: 18px;
			
		}
		#schriftzug, #lexmenu{
			    position: absolute;
				left: 28px;
				width: 500px;
				top: 0px;
			}
		#lexmenu{
			position: relative;
			text-align: center;
			margin: 30px 0 -20px -30px;
			padding-top: 4px;
			border-top: thin solid #999;
			width: 100%;
			
		}
		
		#klapplog{
			display: inline-block;
		}
		.lexitem{
			display: inline-block;
			font-size: 0.8em;
			text-decoration: none;
			color: #666;
			text-align: center;
		}
		
		#topstrip{
			position: absolute;
			top: 254px;
			left: 0px;
			display: block; 
			background-color: rgba(198,32,24,1);
			width: 100%;
			height: 30px;
			z-index: 7000;
		}
		#kopfleiste{
				position: absolute;
				width: 100vw;
				top: 0;
				left: 0;
				margin-top: 0;
				background-color: blue;
			    z-index: 8000; 
				height: 254px;	
				background: #fff;
		}
		
		.doppelbild{
			position: absolute;
			z-index: 10050;
			top: 0;
			left:520px;
			height: 290px;
		}
		/* ----- Einblend-Menu ---------------- */
		#klappmenu{
			display: none;
			position: absolute;
			z-index: 10000;
			background-color: rgba(230,230,239,0.9);
			padding: 10px 30px 12px 20px;
			top: 0px;
			box-shadow:0 6px 6px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.24);
			left: 100%;
			line-height: 14px;
			width: 100vw;
			height: 100%;
		}
		.k-menuitem{
			font-weight: bold;
			font-size: 14px;
			margin-top: 12px;
			padding: 4px;
			cursor: pointer;
		}
		.k-untermenu{
			
		}
		.k-untermenu-item{
			padding: 4px 4px 4px 30px;
			cursor: pointer;
			font-size: 16px;
		}
		.k-untermenu-item:hover, .k-menuitem:hover{
			background-color: #3366ff;
			color: #fff;
		}
		#menubutton{
				display: none;
				cursor: pointer;
				width: 48px;
				height: 48px;
				position: absolute;
				top: 36px;
				z-index: 100100;
				left: 100%;
				margin-left: -60px;
				background-image: url(menu1.png);
				background-repeat: no-repeat;
				background-size: 36px;
			}
		
		/* ----- Standard-Menu ---------------- */
		#menu{
			display: block;
			position: absolute;
			top: 222px; 
			z-index: 10090;
			left: 40px;
			background-color: rgba(198,32,24,0);
			
		}
		
		#menu a , #klappmenu a{
			display: block;
			text-decoration: none;
			color: #000;
		}
		
		#menu a:hover, #klappmenu a:hover{
			color: #fff;
		}
		.menuitem{
			display: inline-block;	
			vertical-align: top;
			padding: 6px 10px 6px 10px;
			cursor: pointer;
			margin-right: 4px;
			border-radius: 20px 20px 0 0;
			background-color: rgba(255,206,120,0.8);
			color:  rgba(198,32,24,1);			
		}
		
		.aktiv{
			background-color: rgba(198,32,24,1);*/
			
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d19d94', endColorstr='#c62018',GradientType=0 ); /* IE6-9 */
			-webkit-box-shadow: 0px -4px 5px #8f8f8f; /* webkit browser*/
			-moz-box-shadow: 0px 4px 5px #8f8f8f; /* firefox */
			box-shadow: 0px -4px 5px #8f8f8f;
			color: #fff;
		}
		
		.menuitem:hover{
			background-color:  rgba(185,27,0,0.6);
			color: #fff;
			background: #d19d94; /* Old browsers */
background: -moz-linear-gradient(top, #d19d94 43%, #c62018 72%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #d19d94 43%,#c62018 72%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #d19d94 43%,#c62018 72%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d19d94', endColorstr='#c62018',GradientType=0 ); /* IE6-9 */
		}
		.untermenu{
			background-color: rgba(250,250,250,0.9);
			box-shadow:0 6px 6px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.24);
			position: absolute;
			white-space:nowrap;
			display: none;
			padding: 2px 0 6px 0;
			z-index: 9000;
			border-radius: 0 0 10px 10px;
			-moz-hyphens: none;
		   -o-hyphens: none;
		   -webkit-hyphens: none;
		   -ms-hyphens: none;
		   hyphens: none; 
		}
		
		.trennstrich{
			border-top: thin solid #aaa;
		}
		
		.untermenu-item{
			padding: 2px 30px 2px 30px;
			cursor: pointer;
			/*background-color: rgba(250,250,250,0.9);*/
		}
		.untermenu-item:hover{
			background-color: #3366ff;
			color: #fff;
		}
		#aktivmenu{
			display: inline-block;
			color: #fff;
			margin-left: 6px;
			vertical-align: top; 
			padding-top: 4px; 
			opacity: 0.7; 
		}
		
		#edDisplay{
			position: absolute;
			top: 14px;
			left: 10px;
		}
		
		.menimg{
			width: 22px;
			height: 22px;
			background-image: url(blueball.png);
			background-repeat: no-repeat;
			background-size: 12px 12px;
			background-position: 10px 7px;
			float: left;
			display: none;
		}
		#rightstrip{
			width: 200px;
			padding: 0 6px 0 16px;
			height: auto;
			position: absolute;
			top: 0;
			right: 0;
			display: none;
			border-left: thin solid #aaa;
			background-color: rgba(254,190,00,0.7);
			z-index: 10100;
		}
		
		#rightStrip h1{
			margin-bottom: 10px;
			text-align: left;
		}
		.aktuell{
			font-size: 13px;
			line-height: 16px;
			margin-bottom: 12px;
		}
		.aktuellHead{
			border-bottom: thin solid #555;
			font-size: 12px;
			margin-bottom: 2px;
		}
		
		.aktuell a {
			font-size: 14px;
			color: #555500;
			font-weight: bold;
			text-align: left;
			display: block;
			text-decoration: none;
		   width: 100%;
		   margin: 4px 0 2px 0;
			background-image: url(arrow-up.png);
			background-repeat: no-repeat;
			padding-left: 18px;
		}
		
		.a-kurz{
			margin-top: 3px;
			padding-left: 6px;
		}
		.termin {
			border-top: thin solid #555;
			padding-top: 4px;
			position: relative;
			display: block;
			overflow: hidden;
			font-size: 12px;	
			margin-bottom: 6px;
			line-height: 13px;
		}
		.terminHead{
			padding: 3px;			
			font-size: 12px;
			line-height: 12px;
			width: calc(100% - 6px);
			background-color: #375e8b;
			font-weight: bold;
			text-align: left;
			color: #fff;
		}
		.a-titel{
			font-size: 14px;
			color: #555500;
			font-weight: bold;
			text-align: left;	
			margin: 3px 0 3px 0;
			line-height: 15px;
		}
		#a-termine, #a-news{
			margin-top: -30px;
			display: none;
		}
		
		#a-termine a{
			color: #000;
			text-decoration: none;
		}
		.termin .datum{
			width: 55px;
			height: 55px;
			text-align: center;
			font-weight: bold;
			background-image: url(Calendar_55.png);
			background-repeat: no-repeat;
			float: left;
			margin-right: 4px;
		}
		.termin .monat{
			font-size: 10px;
			color: #fff;
			margin-top: -2px;
		}
		.termin .tag{
			font-size: 28px;
			color: #000;
			margin-top: 2px;
		}
		
		#bg-bild {
			position: relative;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 1;
		}
		#hintergrund{
			width: 100%;
			height: 100%;
			position: fixed;
			z-index: 1;
			bottom: 0;
			opacity: 0.5;
		}
		
		.finput input{
			font-size: 1.2em;
			width: 20em;
		}
		
		body{
			font-family: 'Oxygen', sans-serif;
			margin: 0;
			color: #333;
			background-color: #eee;
		   -moz-hyphens: auto;
		   -o-hyphens: auto;
		   -webkit-hyphens: auto;
		   -ms-hyphens: auto;
			hyphens: auto; 
			font-size: 16px;
			line-height: 22px;
			overflow-x: hidden;
		}	
		
		#Dachzeile{
			position: relative;
			font-size: 10px;
			line-height: 12px;
			color: #666;
			text-align: right;
			display: block;
			margin-top: 30px;
			border-bottom: thin solid #777;
			padding-bottom: 3px;	
			padding-bottom: 4px;
			border-bottom: thin solid #aaa;
		}
		
		.storydata{
			font-size: 11px;
		}
		h1 {
			
			font-family: 'Amatic SC', cursive;
			font-size: 58px; 
			color: #9b3824;
			font-weight: 300;
			line-height: 52px;
			text-align: center;
			-moz-hyphens: none;
		   -o-hyphens: none;
		   -webkit-hyphens: none;
		   -ms-hyphens: none;
		   hyphens: none; 
		}
		
		h3{
			font-size: 18px;
			color: #444;
			font-weight: 100;
			line-height: 20px;
		}
		.vorlauf, h2{
			-moz-hyphens: none;
		   -o-hyphens: none;
		   -webkit-hyphens: none;
		   -ms-hyphens: none;
		   hyphens: none;
			font-family: 'Oxygen', sans-serif;
			font-size: 20px;
			line-height: 26px;
			color: #666;
			margin: 0px 0 30px 0;
			text-align: center;
			font-weight: 100;
		}
		h4{
		 -moz-hyphens: none;
		   -o-hyphens: none;
		   -webkit-hyphens: none;
		   -ms-hyphens: none;
		   hyphens: none;
		   
		   font-weight: 100;
		   text-align: left;
		   font-size: 18px;
		   width: 100%;
		   margin: 16px 0 -4px 0;
		   line-height: 20px;
		   color: #666;
		}
		.zwischenhead{
			font-size: 18px;
			margin: 8px 0 24px 0;
			font-weight: 200;
			line-height: 20px;
		}
		.lauftext p{
			margin-bottom: 0px;
			margin-top:0px;
		}
		ol{
			line-height: 15px;
		}		
		li{
			margin-bottom: 7px;
			line-height: 20px;
		}
		
		.content{
			position:absolute;
			display: block;
			width: 80vw;
			height: auto;
			top: 285px;
			padding: 0 30px 30px 30px;
			left: 50vw;
			margin-left: calc(-40vw - 30px);
			z-index: 10;
			text-align: eft;
			background: rgba(255,255,255,0.85);
			-webkit-box-shadow: 0px 4px 5px #8f8f8f; /* webkit browser*/
			-moz-box-shadow: 0px 4px 5px #8f8f8f; /* firefox */
			box-shadow: 0px 4px 5px #8f8f8f;
		}
		.page{
			padding: 2px 10px 0 10px;
			width: auto;
			position: relative;
			display: block;
			top: 0;
			height: auto;
			display: block;
			z-index: 10;
		}
		#story{
			margin-top: 20px;
		}
		#story table{
			padding: 4px;
			background-color: rgb(250,250,250,0.6);
			border: thin solid #888;
			border-collapse: collapse;
		}
		#story tr{
			padding: 0 4px 0 4px;
			font-size: 14px;
			line-height: 15px;
		}
		#story th{
			padding: 0 4px 0 4px;
			background-color: rgb(180,180,180,0.5);
		}
		#story td, #story tr, #story th{
			border: thin solid #777;
			padding: 0 4px 0 4px;
		}
		.textkasten{
			background-color: rgba(248,239,198,0.6);
			padding: 10px;
			position: relative;
			display: inline-block;
			border: 1px solid #999;
			
		}
		.toolBar{
			position: absolute;
			top: 18px;
			left: 18px;
			line-height: 14px;
			z-index: 20000;
		}
		
		
		fig{
			width: 100%;
			border: thin solid #666;
		}
		
		.Abbildung{
			border: thin solid #666;			
		}

		.bildbox{
			width: calc(25% - 9px);
			display: inline-block;
			padding: 2px;
			border: thin solid #888;
			margin-top: 14px;
			vertical-align: top;
			background-color: #f3f2b0;
		}
		
		.bildbox img{
			width: calc(100% - 2px);
		}
		
		.laufbild {
			clear: right;
			float: right;
			margin: 12px 0 12px 30px;
			max-width: 45%;
			border: thin solid #999;
			background-color: #ffe4b1;
			padding: 4px;
		}
		.aufmacher{
			position: relative;
			display: block;
			text-align: center;			
			margin-bottom: 30px; 
			overflow: hidden;
			
		}
		.aufmacher-ohne{
			text-align: center;			
			margin-bottom: 30px; 
			width: 100%;
			overflow: hidden;
			margin-top: 30px;
		}
		.aufmacher img,.aufmacher-ohne img{
			position: relative;
			max-height: 300px;
			max-width: 100%;
		}
		.laufbild img{
			width: calc(100% - 2px);
		}
		
		#tinymce{
			padding: 16px;
		}

		.Bu{
			
			font-size: 12px;
			text-align: left;
			line-height: 14px;
		}
		#story p{
			text-align: justify;
			
			 -ms-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
		}
		.Quelle{
			position: relative;
			font-size: 10px;
			text-decoration: italic;
			text-align: right;
		}
		
		.layer{
		position: fixed;
		top:0;
		left:0;
		height: 100%;
		width: 100%;
		background-color: #999;
		opacity: 0.4;
		z-index: 100000;
		display: none;
	}
	.Fenster{
		position: fixed;		
		z-index: 200000;
		width: 50%;
		display: none;
		left: 25%;
		top: 70px;
		max-height: calc(100vh - 40px);
		overflow-y: auto;
		overflow-x: hidden;
		background-color: #eee;
		/*border-radius: 0 0 15px 15px;*/
		-webkit-box-shadow: 0px 0px 15px #595959; /* webkit browser*/ 
		-moz-box-shadow: 0px 0px 15px #595959; /* firefox */ 
		box-shadow: 0px 0px 15px #595959;
	} 
	
	.inputaktiv{
		width: auto;
		text-align: left;
		font-size: 1em;
		margin: 0.2em 0 0.2em 0.4em;
	}
	.tablelabel{
		text-align: right;
		font-size: 0.8em;
	}
	
	
	#scrolltop{
		position: fixed;
		display: none;
		bottom: 50px;
		left: -8px;
		width: 48px;
		height: 40px;
		background-color: #fff;
		z-index: 110000;
		background-image: url(arrowup.png);
		background-repeat: no-repeat;
		background-position: 10px 8px;
		cursor:pointer;
		border-radius: 0px 10px 10px 0;
		-webkit-box-shadow: 0px 0px 15px #595959; /* webkit browser*/ 
		-moz-box-shadow: 0px 0px 15px #595959; /* firefox */ 
		box-shadow: 0px 0px 15px #595959;
		
	}
	
	/* -------------- Terminkalender -------------------------*/
#kalender{
	margin: -30px 0 0px 20px;
	position: relative;
	display: block;
	padding-bottom: 4px;
	width: 100%;
}

.k-datum{
	position: absolute;
	right: 4px;
	bottom: 2px;
	font-weight: bold;
	opacity: 0.5;
}
.jukebox{
	overflow: hidden;
	position: absolute;
	height: 48px;
	width: 120px;
	border: 2px solid #fff;
	top: 40px;
	cursor: pointer;
	
}

.arrowUp{
	position: absolute;
	display: block;
	background-image: url(up.png);
	background-repeat: no-repeat;
	background-size: 40%;
	width: 120px;
	height: 30px;
	background-position: center;
	top: 12px;
	cursor: pointer;
}
.arrowDown{
	position: absolute;
	display: block;
	background-image: url(down.png);
	background-repeat: no-repeat;
	background-size: 40%;
	width: 120px;
	height: 30px;
	background-position: center;
	top: 90px;
	cursor: pointer;
}

.boxfenster{
	font-family: 'Amatic SC', cursive;
	color: #9b3824;
	height:38px;
	text-align: center;
	margin: 0;
	padding-top: 10px;: 0;
	font-size: 36px;
	
}
.boxcontent{
	position: relative;
	
	width: 120px;
}

.wochentag{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: calc(13.2% - 10px);
	height: 80px;
	/*float: left;*/
	background-color: rgb(236,185,70,0.5);
	text-align: justify;
	padding: 4px;
	margin: 2px;
	
	line-height: 15px;
}

#kalender a{
	text-decoration: none;
	color: #000;
}
.wtn{
	font-size: 28px;
	width: 100%;
	margin-top: 20px;
	text-align: center; 
	color: #aaa;			
}
.heute .k-datum{
	opacity: 1;
	font-size: 18px;
}

.blass{
	opacity: 0.4;
}

.feiertag{
	position: relative;
	width: 100%;
	text-align: center;
	font-size: 12px;
	color: #7c3f34;		
}
.ferientag{	
	background-color: #bfd6ee;	
}
.feriensonntag{
	background-color: #d8c7ec;
}
.feriensonntag .k-datum{
	color: #c27f7b;
}
.heute{
	box-shadow:0 0 9px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.24);
	border-radius: 6px;
	transform: rotate(5deg);
}
.t-korpus{
	text-align: center;
	width: calc(100% - 16px);
	padding: 4px;
	margin-bottom: 20px;	
}

.t-edit{
	position: absolute;
	right: 10px;
	top: 14px;
}

.korpus-head{
	font-size: 20px;
	font-weight: bold;
	color: #888;
	padding: 14px 0 8px 0;
	border-bottom: thin solid #777;
	margin-bottom: 6px;
}

.sonntag{
	background-color: #da9a9d;
}

.sonntag .k-datum{
	color: #a21900;
}

.event{
	font-size: 10px;
	padding: 1px;
	border: 2px solid #333;
	cursor: pointer;
	text-align: center;
	width: calc(100% - 3px);
	margin: 0 0 2px -2px;
	line-height: 11px;
	background-color: #858377;
	border-radius: 12px;
	border-color: #eee #666 #666 #eee;
	overflow: hidden;
	color: #fff;
}

.rub10{
	background-color:#4e6485;
	color: #fff;
}

.rub15, .rub30{
	width: calc(100% + 4px);
	background-color: rgb(230,230,230,0.8);
	margin-left: -3px;
	border-radius: 0;
	border: none;
	color: #444;
}
.rub20{
	background-color: #852f2f;
	color: #fff;
}

.rub50{
	width: calc(100% + 4px);
	border-radius: 0;
	color: #222;
	background-color: #ddd;
	border: none;
	margin-left: -3px;
}

.frei-tag{
	background-color: #f0eebc;
}
#menuselect{
	font-size: 12px;
	overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
	background-color: rgba(240,240,240,0.98);
	width: 200px;
	height: 100%;
	position:fixed;
	top: 0;
	left: -210px;
	border-right: thin solid #ccc;
	z-index: 100000;
	-webkit-box-shadow: 0px -4px 5px #8f8f8f; /* webkit browser*/ -moz-box-shadow: 0px -4px 5px #8f8f8f; /* firefox */ box-shadow: 0px -4px 5px #8f8f8f;
}
#verzeichnis{
	padding: 80px 14px 10px 14px;
	z-index: 100100;
}

.verzeichnislink{
	line-height: 14px;
}
#verzeichnis a{
	display: block;
	margin-top: 10px;
	text-decoration: none;
	font-size: 12px;
	line-height: 16px;
	color: #222;
	padding: 3px;
	border-bottom: 1px solid #4e6485;
	text-decoration: none;
	 -moz-hyphens: none;
		   -o-hyphens: none;
		   -webkit-hyphens: none;
		   -ms-hyphens: none;
		   hyphens: none;
}
#verzeichnis a:hover{
	background-color: #ddd;
}
.kurzinhalt{
	padding: 2px 0 2px 8px;
	line-height: 14px;
	
}

.closer{
	position: absolute;
	width: 48px;
	height: 48px;
	
	background-image: url(close_blue.png);
	background-repeat: no-repeat;
	cursor: pointer;
}


#alerttext{
				padding: 40px;
				text-align: left
			}
@media(max-width: 699px){
			#alerttext{
				padding: 10px;
			}
			.doppelbild{
				display: none;
			}
			#rightstrip{
				display: none;
			}
			.content{
				width: auto;
				top: 108px;
				height: auto;
				margin-left: 0;
				left: 0;
				padding: 0;
				-webkit-box-shadow:none; /* webkit browser*/
			-moz-box-shadow: none; /* firefox */
			box-shadow: none;
			}
			body{
				font-size: 13px;
				line-height: 15px;
			}
			
			.page {
				padding: 10px;
			}
			#schriftzug{
				width: 200px;
				top: 0px;
			}
			#kopfleiste{
				height: 84px;	
				background-size: 100% 100%; 
			}
			#menu{
				display: none;
			}
			#menubutton{
				display: block;
			}
			table{
				width: 100%;
			}
			h1{
				font-size: 32px;
			}
			.vorlauf, h2{
				font-size: 15px;
				line-height: 18px;
			}
			#topstrip{
				top: 80px;
			}
			.wtn{
				font-size: 16px;
			}
			.menuitem{
				background: none;
				margin-left: - 100px;
				text-align: left;
			}
			.untermenu{
				display: block;
			}
			#hintergrund img{
				display: none; 
			}
			#aktivmenu{
				font-size: 14px;
				padding-top: 8px;
			}
			#kalender{
				margin-left: 5px;
			}
			.event{
				border-radius: 0;
				height: 16px;
			}
			.lexitem,#klapplog{
				display: none;
			}
			#editalert{
				width: 98%;
				left: 1%;
				top: 1%;
			}
			
		}
		
		@media(min-width: 1200px){
			#rightstrip{
				right: 0px; 
				display: block;
				width: 240px;
			}
			.content{
				width: 840px;
				margin: 0 auto 0 auto;
				left: calc(50% - 580px);
			}
			#topstrip{
				width: calc(100% - 262px);
			}
					
		}