@import url(reset.css);

/**
 * ProcesssWire.com site template stylesheet. Prepared for use in the basic site profile.
 *
 * Please feel free to use and/or modify under the same license as ProcessWire.
 *
 * Copyright 2010 by Ryan Cramer Design, LLC
 *
 */

	html {
 		background-color: #000;
 	}

 	body {
 		max-width: 1000px;
 		margin: auto;
 		padding: 20px;
 	}

 	body, input, textarea, table {
 		font-family: sans-serif;
 		color: #333;
 	}

	input, textarea {
		width: -webkit-fill-available;
		width: -moz-available;
    padding: 3px 6px;
    font-size: 1.25em;
		border: none;
	}

	input {
		height: 32px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border-radius: 0px;
	}

	.submit {
    background-color: #920935;
    color: white;
    border: none;
	}

	.frc-button {
		display: none;
	}

	textarea {
		height: 100px;
	}

	body a {
		font-size: 1em;
	}

	hr {
		border: 0.5px dotted #6b102d;
	}

	address {
		color: #657511;
	}

 	#masthead,
 	#content,
 	#footer {
 		background-color: #d5eb65;
 		margin: auto;
 	}

 	.container {
 		position: relative;
		display: flow-root;
 		margin-left: 20px;
 		margin-right: 20px;
 	}

 	#masthead {
 		height: 210px;
 		background: url(images/bg.png);
 		border-radius: 10px 10px 0 0;
 	}

 	#topnav a {
 		display: none;
 	}

 	#logo {
 		max-width: 100%;
 		margin-top: 42px;
 	}

 	#myLinks {
 		margin-top: 52px;
 	}

 	/* Style the navigation menu */
 	.topnavClass {
 	  /*overflow: hidden;*/
 	  background-color: #657511;
 	  position: relative;
 		border-radius: 10px 10px 10px 10px;
		padding-bottom: 12px;
 		z-index: 20;
 	}

 	/* Hide the links inside the navigation menu (except for logo/home) */
 	.topnavClass #myLinks {
 	  display: none;
 	}

 	/* Style navigation menu links */
 	.topnavClass a {
 	  color: #f3fdc0;
 	  padding: 5px 16px;
		margin-top: 1px;
 	  text-decoration: none;
 	  font-size: 1.5em;
 	  display: block;
 		text-align: center;
 	}

 	/* Style the hamburger menu */
 	.topnavClass a.icon {
 		color: #920935;
 		background: #657511;
 	  display: block;
 	  position: absolute;
 	  left: 0px;
 	  top: 8px;
 		border-radius: 0 10px 0 0;
 	}

	/* Style contact form
	#contact-form {
		margin-bottom: 30px;
	}*/

	/* Style the FriendlyCaptcha */
	.frc-captcha {
		top: -14px;
		max-width: 100% !important;
		background-color: #d5eb65 !important;
    border: none !important;
	}

 	/* Add a grey background color on mouse-over
 	.topnavClass a:hover {
 	  background-color: #ddd;
 	  color: black;
 	}*/

 	/* Style the active link (or home/logo) */
 	.active {
 	  background-color: #04AA6D;
 	  color: white;
 	}

	#myLinks a {
		font-family: sans-serif;
		font-weight: bold;
		text-transform: uppercase;
		color:#f3fdc0;
	}

	#myLinks a:hover,
	#myLinks a.on {
		color: white;
		background-color: #920935;
	}

 	#title {
		position: absolute;
    left: 38px;
    top: 190px;
    font-size: 1.3em;
		color: #f3fdc0;
 	}

	#home-picture,
	#probe-picture,
	#auftritte-picture,
	#bilder-picture {
		max-width: 100%;
	}

	#masthead #photo {
		position: absolute;
		top: 34px;
		right: 0;
	}

	#content {
		font-size: 1em;
		line-height: 1.7em;
		color: #333;
		padding-bottom: 2em;
	}

		#content p,
		#content table {
			margin: 1em auto 1.5em auto;
		}

		#content a {
			color: #920935;
		}
			#content a:hover {
				background-color: #920935;
				color: #fff;
				text-decoration: none;
			}

		#content em {
			font-style: italic;
		}

		#content strong {
			font-family: sans-serif;
			font-weight: bold;
			color: #555;
		}

		#content h2 {
			color: #657511;
			font-size: 1.3em;
			margin-bottom: 0.5em;
			padding-top: 1em;
		}

		#content h3 {
			color: #657511;
			font-size: 1.3em;
			border-bottom: 1px dotted #6b102d;
			padding-bottom: 0.25em;
			padding-top: 1em;
		}
			#content h2 + h3 {
				margin-top: 0;
			}

			#content h3 + ul,
			#content h3 + ol {
				margin-top: 1.5em;
			}

		#content h4 {
			font-size: 1em;
			font-weight: bold;
			text-transform: uppercase;
		}

		#content ol li {
			margin: 0 0 0 3em;
		}

		#content ul li {
			margin: 0 0 0 3em;
			display: list-item;
			list-style: disc;
		}

		#content ol li {
			margin: 0 0 0 3em;
			display: list-item;
			list-style: decimal;
		}

		#content ul.nav {
			margin-top: 3em;
		}

			#content ul.nav li {
				display: block;
				list-style: none;
				margin: 0;
				border-bottom: 1px dotted #6b102d;
			}
				#content ul.nav li a {
					font-family: sans-serif;
					font-weight: bold;
					margin: 0;
				}

				#content ul.nav li p {
					margin: 1em 0;
				}

		#content .disclaimer {
			font-size: 0.75em;
			line-height: 17px;
			color: #777;
		}

			#bodycopy {
				padding-top: 0.5em;
			}

			#bodycopy strong {
				color: #920935;
			}

			#bodycopy .video {
				margin: 1em 0;
				background: #000;
				padding: 10px;
				padding-bottom: 3px;
				width: 640px;
			}

			#mail_sent {
				position: relative;
    		color: #920935;
    		font-weight: bolder;
    		text-align: center;
			}

			.sidebar_item h3 {
				margin-top: 60px;
			}

			#sidebar {
				display: none;
			}

		#footer {
			clear: both;
			border: none;
			font-size: 0.75em;
			padding: 2em 0;
			background-color: #879f0a;
			border-radius: 0 0 10px 10px;
		}
			#footer p,
			#footer a {
				color: #d5eb65;
			}

			#footer p {
				text-align: center;
			}

			#footer a:hover {
				text-decoration: underline;
				color: #920935;
			}

			#follower {transition: transform .2s}

			#followImg {
				width: 300px;
			}

		/**
		 * The edit link that appears when you are logged in.
		 * It is recommended that you implement an edit button
		 * in your templates to make it easy to switch to and
		 * from the admin control panel when editing pages.
		 *
		 */
		#editpage {
			position: fixed;
			top: 34px;
			right: 35px;
		}

		/*#logout {
			position: fixed;
			top: 25px;
			left: 0px;
		}

		#login {
			position: fixed;
			left: 0px;
			top: 35px;
		}*/

		#editpage,
		#logout,
		#login {
			padding: 5px 6px;
			background: #920935;
			color: #fff;
			display: block;
			text-transform: uppercase;
			z-index: 30;
		}

			#editpage:hover,
			#logout:hover,
			#login:hover {
				background: #d5eb65;
				color: #920935;
			}


		/**
		 * Alignment styles that are used by the InputfieldTinyMCE for
		 * positioning images in bodycopy. If you are using this field type,
		 * you may want to include these or similar styles in your site.
		 *
		 */
		.align_left {
		        float: left;
		        margin: 0 1em 0.25em 0;
		}

		.align_right {
		        float: right;
		        margin: 0 0 0.25em 1em;
		}

		.align_center {
		        display: block;
		        margin-left: auto;
		        margin-right: auto;
		}

		/**
		 * Optional CSS classes specific to the FieldtypeComments module
		 * when used in this site design template.
		 *
		 */

		#content .CommentList {
			margin: 1em 0 0 0;
		}

			#content .CommentListItem {
				list-style: none;
				margin: 0;
				border-left: 5px solid #ddd;
				border-top: 1px dotted #ccc;
				padding: 1em 0 1px 1em;
				background: #fff;

			}
				#content .CommentListItem p {
					margin-top: 0;
				}
				#content .CommentHeader,
				#CommentForm label {
					margin: 0;
					font-weight: bold;
					font-size: 0.75em;
					text-transform: uppercase;
					font-family: sans-serif;
					color: #3786bc;
				}
				#content .CommentText {
					color: #666;
				}

		#CommentForm { }

			#CommentForm h3 {
				margin: 0;
				border: none;
			}

			#CommentForm label {
				display: block;
				color: #f00076;
				color: #999;
			}

			#CommentForm p {
				margin: 0.5em 0;
			}

			.CommentForm_cite,
			.CommentForm_email {
				float: left;
			}
				.CommentForm_cite input,
				.CommentForm_email input {
					width: 200px;
					margin-right: 1em;
				}

			.CommentForm_text {
				clear: left;
			}
				.CommentForm_text textarea {
					padding: 2px;
					width: 75%;
					height: 100px;
				}

			#CommentForm .error {
				background: #a30000;
				color: #fff;
				padding: 0.25em 0.5em;
			}
			#CommentForm .success {
				font-weight: bold;
			}


		/**
		 * WireFatalError is a class that ProcessWire will use to output
		 * fatal errors in the design, but only if debug mode is on, or if
		 * you are logged in as a superuser.
		 *
		 */
		.WireFatalError {
			background: #a30000;
			color: #fff;
			padding: 1em;
			position: relative;
			z-index: 9999;
		}

		/*********************************************************************
		 * 6. Accessibility helpers
		 *
		 */

		/* Hide visually, but remain approachable for screenreader */

		.visually-hidden {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			white-space: nowrap;
			overflow: hidden;
			clip: rect(1px, 1px, 1px, 1px);
			border: 0;
		}

		/* Show bypass link on hover */

		.element-focusable:focus {
			clip: auto;
			overflow: visible;
			height: auto;
		}

		/* Sample styling for bypass link */

		.bypass-to-main:focus {
			top: 0;
			left: 0;
			z-index: 10;
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			background: #333;
			color: #fff;
		}

		.portrait {
			text-align: center;
		}

		.portrait p {
			text-align: center;
		}

		.contact {
			text-align: center;
    	width: 100%;
		}

		input {
			float: left;
		}

		#subbar {
			margin-top: 25px;
		}

		#news {
			/*width: 100%;*/
			border: none;
			background-color: #920935;
			text-align: center;
			font-size: larger;
			color: white;
			padding: 0px 10px;
		}

 @media only screen and (min-width: 350px) {

	 #title {
		 font-size: 1.5em;
	 }

 }

 @media only screen and (min-width: 428px) {

	 .portrait {
		 display: inline-block;
		 width: 48%;
	 }

 }

 @media only screen and (min-width: 566px) {

	 .contact {
		 display: inline-block;
		 width: 32%
	 }

	 .portrait {
    width: 32%;
	 }

 }

 @media only screen and (min-width: 720px) {

	 .portrait {
		 width: 24%;
	 }

 }

 @media only screen and (min-width: 1040px) {

	#title {
		display: inline;
		position: relative;
    left: 18px;
    top: -42px;
	}

	#bodycopy {
		padding-right: 250px;
		padding-top: 1px;
		margin-top: 0;
	}

	/* #content #bodycopy > h2:first-child {
		margin-top: 1em;
	} */

	#content h2,
	#content h3,
	#content h4 {
		line-height: 1.3em;
	}

 	#sidebar {
 		display: block;
 	}

	#sidebar {
		position: relative;
		float: right;
		min-height: 200px;
		width: 200px;
		padding-bottom: 3em;
		margin-top: 44px;
	}
		#sidebar h3 {
			border: none;
			font-size: 1.1em;
		}
			#sidebar h3 + ul.nav {
				margin-top: 1em;
			}

		#photo {
			display: block;
		}

		#sidebar ul.nav {
			margin: 0 0 1em 0;
		}
			#sidebar ul.nav li {
				margin-top: 1px;
				border: none;
			}

			#sidebar ul.nav a {
				display: block;
				padding: 8px 10px 8px 15px;
			}

				#sidebar ul.nav a:hover,
				#sidebar ul.nav a.on {
					background: #920935;
					color: #fff;
					text-decoration: none;
				}

		#sidebar .sidebar_item {
			padding: 0 5px 0 14px;
			margin: 0 0 2em 0;
			border-left: 1px dotted #6b102d;
		}

 	#followImg {
 		display: none;
 	}

 	#subbar {
 		display: none;
 	}

 }

@media only screen and (min-width: 1420px) {

		#logo {
	    position: relative;
			float: left;
	    top: -10px;
			width: 400px;
			left: 25px;
		}

		#myLinks a {
	 	  display: none;
	 	}

		.topnavClass a.icon {
			display: none;
		}

	 	#topnav {
			position: relative;
	    float: right;
	    top: -152px;
			right: 10px;
	    z-index: 20;
	    text-transform: uppercase;
	    font-size: xx-small;
	 	}

	 	#topnav li {
	 	  display: inline-block;
	 	}

	 	#topnav a {
			display: block;
	 	  padding: 14px;
	 		width: 90px;
	    text-align: center;
			margin-left: 1px;
			font-weight: bold;
	 	}

		#topnav a:hover,
		#topnav a.on,
		.topnav a:hover {
			color: #fff;
			background-color: #920935;
		}

		.topnavClass #myLinks {
		  display: none;
		}

		#title {
			top:-42px;
		}

		#content {
				padding-left: inherit;
		}

}