/* 
	chrischu.eu CSS Layout	
	Author: Christopher Schumacher - www.denkerland.de
*/

/* Site layout
----------------------------------------------- */

@font-face {
    font-family:'cshandwriting';
    font-display: swap;
		src: local("cshandwriting"),
		url(/css/handwriting.ttf) format("truetype");
}

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

html {
	text-shadow: #000 0 0 9px;
	-moz-text-shadow: #000 0 0 9px;
}

body {
	width: 100%;
	height: 100%;
	/*font: 20px 'cshandwriting', 'Tahoma', Verdana, sans-serif;*/
	font: 14px 'Tahoma', Arial, sans-serif;
	letter-spacing: 1px;x
	word-wrap: break-word;	/* IE */
	color: #999;
	background: #000;
	}

/* Font styles
----------------------------------------------- */
	
h1 {
	line-height: 0.6em;
  font-size: 5vh;
  margin: 10px 0 10px 0;
	color: #fff;
	clear: both;
	}

h2 {
	line-height: 0.7em;
  font-size: 4.5vh;
  margin: 10px 0 10px 0;
	font-weight: normal;
	color: #fff;
	font-weight: bold;
	clear: both;
	}

h3 {
	line-height: 1.5em;
	font-size: 1.2em;
	color: #fff;
	clear: both;
	}

h4 {
	font-size: 1.1em;
	margin-bottom: -10px;
	padding-top: 10px;
	color: #fff;
	clear: both;
	}

a:link, a:visited {
	padding: 5px 7px 5px 8px;
	color: #fff;
	text-decoration: none;
}

	a:hover, a:active {
		color: #fff;
		background: #000;
	}


/* Container styles
----------------------------------------------- */

#adminheadermenu {
	position: fixed;
	z-index: 399;
	top: 0; right: 0;
	padding: 5px;
	background: url(../img/bg50.png);
	color: #ddd;
	font-size: 12px;
	text-align: right;
}

	#adminheadermenu a {
		color: #ddd;
	}

#header {
	padding: 3px 5px 0 5px !important;
	height: 35px;
	margin: 0;
	background: #ffffff0f;
	border-radius: 2px;
	transition: 0.3s;
}

	#header:hover {
		background: #ddd;
		transition: 0.3s;
	}

		@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
			#header {
				background: #ffffff0f;
				backdrop-filter: blur(100px);
			}
			#header:hover {
				background: #ffffff5f;
			}
		}

	#header img {
		width: 32px;
    height: 32px;
    background: url(../img/chrischulogo.png) no-repeat;
    background-size: 32px 32px;
		background-position: center;
		transition: 0.5s;
		transition-timing-function: ease-in-out;
	}

		#header:hover img {
			transform: rotate(72deg);  
			transition: 0.5s;
			transition-timing-function: ease-in-out;
		}

	/* IE Hack */
	* html #header { width: 100%; }
	* html #header img { width: 64px; height: 64px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/chrischulogo.png',sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/chrischulogo.png',sizingMethod='scale')"; }

	#bgfilter, #bgwrapper {
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;
		position: fixed;
	}

	#bgwrapper {
		background-color: #fff;
		background-image: url('');
		-webkit-background-size: cover;
		background-size: cover;
		background-position: center center;
		background-attachment: fixed;
		-webkit-animation: bgblurin 3s forwards;
		animation: bgblurin 3s forwards;
	}

		@-webkit-keyframes bgblurin {
			0% {-webkit-filter: blur(5px);filter: blur(5px);background-color: #000000cc;}
			100% {-webkit-filter: blur(50px);filter: blur(50px);background-color: #00000022;}
		}

		@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
			#bgwrapper {
				filter: none;
				-webkit-animation: none;
				animation: none;
			}
			#bgfilter {
				-webkit-animation: bgblurin_backdrop 3s forwards;
				animation: bgblurin_backdrop 3s forwards;
			}
				@-webkit-keyframes bgblurin_backdrop {
					0% {-webkit-backdrop-filter: blur(5px);backdrop-filter: blur(5px);background-color: #000000cc;}
					100% {-webkit-backdrop-filter: blur(50px);backdrop-filter: blur(50px);background-color: #00000022;}
				}
		}

#content {
	position: absolute;
	left: 0; right: 0;
	padding: 10px 20px 65px 20px;
	margin-bottom: 60px;
	color: #fff;
	line-height: 2em;
	margin: auto;
	text-align: left;
	z-index:10;
	clear: both;
	}

	#content ul {
    top: 10px;
		z-index: 100;
	}

		#content li {
			margin: 0 0 5px 20px;
		}
	
	Input[type="text"], Input[type="password"] {
		margin: 5px 0 5px 0;
		padding: 5px;
		font-size: 1.1em;
		border: 1px solid #666;
	}

	Select {
		margin: 5px 0 5px 0;
		padding: 5px;
		font-size: 14px;
		line-height: 1;
		border: 0;
		border-radius: 0;
	}

	input:checked + label {
		color: green;
	}

	input[type="submit"] {
		margin: 5px 0 5px 0;
		padding: 5px;
		border: 1px solid #666;
		font-size: 1.2em;
		color: #666;
		font-weight: normal;
		background-color: #ddd;
	}

	.hint {
		padding: 5px;
		background-color: #00000088;
		border-radius: 2px;
	}

		@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
			.hint {
				background: #ffffff22;
			}
		}

	.error {
		padding: 5px;
		color: red;
		border: 1px solid red;
		background: #00000044;
		border-radius: 2px;
	}

		@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
			.error {
				background: #ffffff88;
				text-shadow: none;
			}
		}

.cms_text {
	clear: both;
	max-width: 800px;
}

.cms_bildvorschau {
	clear: both;
	margin: -5px;
	padding: 15px 0 5px 5px;
	line-height: 0.8em;
}

	.cms_bildvorschau.grid a {
		margin: 0;
		padding: 0;
		text-align: center;
		vertical-align: middle;
	}

	.cms_bildvorschau.list a, .downloadlink {
		width: 250px;
		height: 45px;
		float: left;
		margin: 1px;
		padding: 5px;
		vertical-align: top;
		line-height: 15px;
		overflow: hidden;
		white-space: nowrap;
		background: #ddd;
	}

		.cms_bildvorschau.grid a.downloadlink {
			float: none;
			clear: both;
			padding: 10px;
			line-height: 40px;
		}

		.cms_bildvorschau a .grau {
			font-size: 0.9em;
			color: #ccc;
			vertical-align: top;
		}

		.cms_bildvorschau.grid a:hover {
			background: none;
		}

		.cms_bildvorschau.list a:hover, .cms_bildvorschau.grid a.downloadlink:hover {
			background: #666;
		}

		.cms_bildvorschau.grid a img {
			min-height: 80px;
			min-width: 80px;
			max-height: 17vw !important;
   		max-width: 17vh !important;
			margin: 3px;
			border-radius: 6px;
			box-shadow: 0 0 5px #00000044;
			background: #333;
    	transition: 0.3s;
		}

		/* IE Hack */
		* html .cms_bildvorschau.grid a img { height: 120px; width: 120px; margin: 5px; }

			.cms_bildvorschau.grid a:hover img {
				-moz-box-shadow: 0 0 10px #000;
				-webkit-box-shadow: 0 0 10px #000;
				box-shadow: 0 0 10px #000;
				}

		.cms_bildvorschau.list a img {
			max-height: 40px;
			padding: 3px;
			float: left;
		}

.cms_dokumentesammlung {
	clear: both;
	margin: -5px;
	padding: 15px 0 5px 5px;
}

	.cms_dokumentesammlung.grid a {
		display: block;
		float: left;
		height: 100px;
		width: 150px;
		margin: 1px;
		padding: 10px;
		font-size: 1.1em;
		background: #ddd;
	}

	.cms_dokumentesammlung.list a {
		display: block;
		margin: 1px;
		padding: 10px;
		font-size: 1.2em;
		background: #ddd;
	}

		.cms_dokumentesammlung a .grau {
			font-size: 0.9em;
			color: #ccc;
			vertical-align: top;
		}

		.cms_dokumentesammlung.grid a:hover, .cms_dokumentesammlung.list a:hover {
			background: #666;
		}

#bottominfobox {
	position: fixed;
	padding: 10px;
	bottom: 0;
	left: 0;
	right: 0;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.2);
	text-align: left;
	z-index:20;
	}

	/* IE Hack */
	* html #bottominfobox { position: absolute; }
	
	#bottominfobox a {
		padding: 5px 7px 5px 8px;
		text-decoration: none;
		transition: 0.3s;
		}

		#bottominfobox a:hover {
			color: #fff;
			background: #fff;
			transition: 0.3s;
			}

		@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
			#bottominfobox {
				background: none;
				-webkit-backdrop-filter: blur(100px);
				backdrop-filter: blur(100px);
			}
			#bottominfobox a:hover {
				background: #ffffff2b;
			}
		}

/* Menu styles
-----------------------------------------------
Notwendig durch das CMS sind:
#menu
#submenu
#submenu_blog
#submenu_gallery
----------------------------------------------- */

#menu {
	list-style: none;
}

	@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
		#menu {
			position: sticky;
		}
	}

	#menu li {
		margin: 0 2px 10px 0;
		padding: 0;
		float: left;
		display: block;
	}

		#menu li a {
			display: block;
			white-space: nowrap;
			padding: 5px 1.4vw 5px 1.4vw;
			font-weight: bold;
			color: #fff;
	  	background: #00000044;
			border-radius: 2px;
			transition: 0.3s;
		}

			#menu li a:hover, #menu li#selected a {
				color: #fff;
				background: #88888844;
				transition: 0.3s;
			}

	@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
		#menu li a {
			background: #ffffff0f;
    	-webkit-backdrop-filter: blur(100px);
    	backdrop-filter: blur(100px);
		}
		#menu li a:hover, #menu li#selected a {
			background: #ffffff5f;
		}
	}

#submenu {
	height: 40px;
}

#submenu ul {
	padding: 0 15px 0 0 ;
	list-style: none;
	}

	#submenu li {
		float: left;
		margin: 0 5px 0 0;
		display: block;
	    background: #eee;
		}

		#submenu li a {
			display: block;
			white-space: nowrap;
			padding: 5px 10px 5px 10px;
			text-decoration: none;
			color: #fff;
			font-weight: bold;
			font-size: 0.9em;
			}

			#submenu li a:hover, #submenu li#subselected a {
				color: #fff;
				background: #fff;
				}

#submenu_blog {
	margin: 5px 0;
	padding: 5px;
	background: #ddd;
}

	#submenu_blog h3 {
		padding: 5px;
		font-size: 1.8em;
	}

	#submenu_blog p {
		padding: 5px;
	}

#submenu_gallery {
	display: block;
	margin: 5px 5px 0 0;
	padding: 15px;
	padding: 1.5vw;
	float: left;
	min-height: 100px;
	min-width: 100px;
	max-width: 16vw;
	max-height: 19vh;
  height: 23vw;
	width: 18vw;
	color: #fff;
	background: #ffffff22;
	text-align: center;
	line-height: 1em;
	border-radius: 6px;
	overflow: hidden;
	transition: 0.3s;
}

	/* IE Hack */
	* html #submenu_gallery { height: 220px; }

	#submenu_gallery:hover {
		color: #fff;
		background: #ffffff88;
		transition: 0.3s;
	}

		#submenu_gallery img {
			max-height: 19vh;
			max-width: 16vw;
			background: #aaa;
			border-radius: 6px;
			-moz-box-shadow: 0 0 5px #00000044;
			-webkit-box-shadow: 0 0 5px #00000044;
			box-shadow: 0 0 5px #00000044;
			transition: 0.3s;
		}

			#submenu_gallery:hover img {
				-moz-box-shadow: 0 0 10px #000;
				-webkit-box-shadow: 0 0 10px #000;
				box-shadow: 0 0 10px #000;
			}

		#submenu_gallery span {
			margin: 0 auto 0 auto;
			overflow: hidden;
			display: block;
			line-height: 1.5;
		}

/* Für kleine Bildschirme / Mobile Devices */
		@media only screen and (max-width:640px) {
			#submenu_gallery span {
				line-height: 1;
			}
		}
		@media only screen and (max-width:400px) {
			#submenu_gallery {
				max-width: 39vw;
    		max-height: 20vh;
    		height: 38vw;
				width: auto;
			}
			#submenu_gallery img {
				max-height: 20vh;
				max-width: 30vw;
		 	}
		}