@font-face {
	font-family: 'Open Sans';
	font-weight: 400;
	font-style: normal;
	src: url('fonts/OpenSans-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-weight: 400;
	font-style: italic;
	src: url('fonts/OpenSans-RegularItalic.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-weight: 700;
	font-style: normal;
	src: url('fonts/OpenSans-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-weight: 700;
	font-style: italic;
	src: url('fonts/OpenSans-BoldItalic.ttf') format('truetype');
}
@font-face {
	font-family:'FontAwesome';
	src:url('fonts/fontawesome-webfont.eot?v=4.6.3');
	src:url('fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'),
		url('fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'),
		url('fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'),
		url('fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'),
		url('fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
	font-weight:normal;font-style:normal
}
/* --------------------------------- General definitions ------------------------------------ */  
 body {
	font-family: 'Open Sans', sans-serif; 
	font-size:0.9em;
	background-color:#fff;
	color:#1e1e1e;
	/* the wonderful blue gradient, got it from here: http://www.colorzilla.com/gradient-editor/ */
	background: #1e5799; /* Old browsers */
	background: linear-gradient(to bottom, #1e5799 0%,#207cca 16%,#fffcfc 54%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	background-size:100%;
	background-attachment:fixed;
	accent-color:#2A9FD6;
}
html {
	/* show always a scrollbar to avoid jumping if one page fits on the screen and another does not */
	overflow-y:scroll;
}
img {
	/* images are always scaled to fit into the available room - can have stange site effects in older Safari browsers */
	max-width:100%;
	height:auto !important;
 }	
 a:link,  a:visited {
	color:#2A9FD6;
	text-decoration:none;
 }
  .highlight {
	  /* highlight search results */
	 background-color:yellow;
 }
 .center {
	/* the main area */
	background-color:#fff;
	border:1px solid #ccc;
	box-shadow:3px 3px 3px #ccc;
	border-radius:5px;
 }
  /* --------------------------------- Header ------------------------------------ */
 .wtitle {
	/* the website title */
	margin-top:0.5em;
	font-size:130%;
 }
 .wheader {
	/* additional information in the website head */
	font-size:70%;
	margin:1em 0;
	padding-right:150px;
	color:#ccc;
	font-style:italic;
 }
 /*hr style by css-tricks.com */ 
hr { 
	border: 0; 
	height: 1px; 
	background: #333; 
	background-image: linear-gradient(to right, #ccc, #333, #ccc); 
} 
/* --------------------------------- Navigation ------------------------------------ */ 
.nav ul {
	list-style-type:none;
	padding:0;
	margin:0;
}
.nav ul li  ul {
	padding-left:0.8em;
}
li.menu-current > a:link, li.menu-current > a:visited {
	font-weight:bold;
}
 /* --------------------------------- Login box ------------------------------------ */
.login-box {
	margin-top:2em;
}
.login-box fieldset {
	border:1px solid #ccc;
	border-radius:5px;
}
.login-box h1 {
	font-weight:normal;
	font-size:0.7em;
	text-transform:uppercase;
	margin:0 0 1em 0;
}
.login-box p {
	margin:0.25em 0;
	padding:0;
}
.login-box label {
	font-size:0.8em;
	margin:0;
	padding:0;
}
.login-box #username, .login-box #password {
	width:98%;
	border-radius:5px;
	border:1px solid #e1e1e1;
	padding:0.5em;
	margin:0;
	font-family: 'Open Sans';
}
.login-box .dbutton {
	width:100%;
	border-radius:5px;
	border:0;
	box-shadow:5px 5px 5px #ccc;
	padding:0.2em;
	color:#1e1e1e;
	display:block;
	margin:1em 0;
	font-family: 'Open Sans';
}
.login-box li {
	text-align:center;
	font-size:0.75em;
}
 /* --------------------------------- Content ------------------------------------ */
 .content {
   z-index:1;
   border-left:1px dotted #ccc;
   padding:0 2em;
   min-height:30em;
 }
 .noborder {
   border:0;
 }
 .content h1 {
   margin-top:0;
   font-weight:normal;
   color:#666;
 }
 .content h2 {
   margin: 0 0 1em 0;
   font-weight:normal;
   font-size:1.6em;
 }
 .content h3 {
   margin-bottom:0;
   font-weight:normal;
   font-style:italic;
 }
 .content p {
   line-height:1.5em;
   margin:0 0 0.8em 0;
 }
 .content li {
   margin-bottom:0.5em;
 }
 .ifl {
	/* can be used for floated images */
   float:left;
   margin:0.3em 0.5em 0 0.3em;
 }
  /* --------------------------------- Sidebar ------------------------------------ */
 .sidebar {
   margin-top:1em;
 }
 .sidebar h3 {
   font-size:0.9em;
   margin-bottom:0;
 }
 .sidebar p {
   font-size:75%;
   margin:0 0 1em 0;
 }
 .sidebar h3 a:link, .sidebar h3 a:visited {
   text-decoration:none;
   color:#e30613;
 }
 .sidebar h3 a:hover, .sidebar h3 a:visited:hover,
 .sidebar h3 a:active, .sidebar h3 a:visited:active, .sidebar h3 a:focus{
   text-decoration:underline;
 }
 .sidebar form {
   margin:0;
   padding:0;
 }
 .sidebar .search_string {
   border-radius:5px;
   border:1px solid #ccc;
   padding:0.2em;
   width:98%;
   margin-bottom:0.3em;
   font-family: 'Open Sans';
   font-size:0.75em;
 }
.sidebar .search_string:focus, .sidebar .search_string:hover {
  border-color: #00f;
}
.sidebar .search_submit {
   width:98%;
   border:0;
   background-color:#eee;
   border-radius:5px;
   font-family: 'Open Sans';
   color:#666;
   margin-bottom:1em; 
   box-shadow:2px 2px 2px #ccc;
 }
.sidebar .search_submit:hover, x.sidebar .search_submit:focus {
  box-shadow: 2px 2px 2px #00f;
}
form * {
  font: inherit!important;
}
/* --------------------------------- Footer ------------------------------------ */
 .footer {
   font-size:80%;	   
   margin-top:1em;
   color:#666;
   text-align:center;
 }
 .footer a:link, .footer a:visited {
   color:#666;  
 }
/* --------------------------------- Media queries ------------------------------------ */
 @media print {
	.nav, .sidebar, .footer {
		display:none;
	} 
	.center {
		border:0;
		box-shadow:none;
	}
	.content {
		width:100% !important;
		border:0;
		margin:0;
		padding:0;
	}
 }
 @media screen and (max-width:800px) {
	ul#main-menu > li > a 	 {
	font-size:0.9em !important;
	}	 
 }
 /*@media screen and (max-width:580px) {*/
@media screen and (max-width:36.5em) {
   #hauptnav {
	 width:100% !important;
	 display:none;
   }
   .fg-no-desktop { display: block !important; }
   .mobilenav {
	   display:block;
	   text-align:center;
	   background-color:#eee;
	   border-radius:5px;
	   margin:1em 0;
   }
	.sidebar, .login-box {
		display:none;
	}
   .content {
	 border-left:0;
	 padding-left:0;
   }
   #spa { font-size:70%;}
 }
/*--- own adds --- */
body {
	font-size: 1em;
}
.center {
	max-width: 72em;
}
.content {
 	background-image: url('../../media/stethoscope-t10.png');
 	background-size: 80%;
 	background-repeat: no-repeat;
 	background-position-x: center;
 	background-color: rgba(255,255,255,.9);
 }
 .row {
 	background-color: rgba(255,255,255,.9);
 }
 .header { font-size: 170%;}
 .header {
 	background-image: url('../../media/dna-rgb.png');
 	background-size: 80%;
 	background-repeat: no-repeat;
 	background-position-x: right;	
}
.header .wtitle img {
	max-width: 3em;
	width:20%;
	float:left;
}
.header .wtitle a, #spa {
	font-weight: bold;
	color: mediumblue;
	text-shadow: 3px 3px 3px white, -3px 3px 3px white, 3px -3px 3px white, -3px -3px 3px white;
}
a, #spa {
	color: #004fb6!important;
}
.mobilenav {
	line-height: 2em;
}
#hauptnav {
	line-height: 1.7em;
}
@media screen and (max-width:800px) {
	 .header {
	 	background-position-y: 1em;
	 }
}
.fbimg {
	height:72px !important;
	margin-right:1em;
	float:left;
}
.fbdiv {
	margin-bottom:1em;
	min-height:72px;
}
.fblink {
	float:left;
	margin-right:1em;
	xdisplay:inline-block;
}
.fbhr {
	margin-bottom:1em;
}
a {
	text-decoration:none;
	border-bottom: solid .2em transparent;
}
a:hover, main a:focus, footer a:focus {
	border-color:#004fb6;
}
.awe a {
	font-family:	 FontAwesome;
	font-size: 2.5em;
	display: inline-block;
	margin-bottom:1.5rem;
	margin-right: 1em;
	margin-left: 1em;
}
.fa-instagram:before{content:"\f16d"}
.fa-facebook:before{content:"\f09a"}
.vorstellung {
	clear: both;
	margin-bottom:1em;
	margin-top:1em;
	overflow-y:auto;
}
.vorstellung h2 {
	font-size: 1.2em;
	margin-bottom:.5em;
	color:#000;
	font-weight:700;
}
.vorstellung img {
	margin-top:.3em;
	max-width: 40%;
	margin-right: .5em;
	float: left;
}
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-width { max-width:100%;}
.video-responsive iframe, .video-responsive img {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}	
input:focus, textarea:focus {
border-color: #00f !important;
}
.miniform input[type="text"]:focus, .miniform input[type="email"]:focus, .miniform
input[type="tel"]:focus, .miniform input[type="url"]:focus, .miniform select:focus, .miniform textarea:focus {
	/*border-color: #00f !important;*/
	border-color: #00f;
}
#skiplink {
	position: absolute;
	top:-1000px;
	left:0;
	background-color:white;
	color: black;
	padding: .5em;
}
#skiplink:focus {
	top:0;
}
input.aufgabe {
	font-family: monospace;
	font-size:1.3em;
	width: 9ch;
	border-style: dotted;
	border-width:0px;
	border-bottom-width:2px;
	border-color: transparent;
	outline:none;
}
input.aufgabe:focus-within, input.aufgabe:focu {
	border-bottom-color: blue;
}
input.aufgabe::selection {
	background-color: #fff;
	color: rgb(30, 30, 30);
}
.captcha_table tr, .input_form tr {
	vertical-align:baseline;
}
.ver {
	vertical-align:middle;
}
.required {
	color: #A00!important;
	font-weight: bold!important;
	font-size: 1.2em!important;
}
.miniform .text_capcha input, .captcha_table input[type="text"]{
	padding: 0px 0em 0px .3em!important;
}
.miniform .text_capcha input:focus {
	border-color: blue!important;
}
.miniform input:focus, .miniform textarea:focus {
	/*border-color: blue!important;*/
	border-color: blue;
}
input.aufgabe { min-width: 11ch;}
/*a:focus,*/
/*li:focus-within,*/
nav a:focus,
input:focus, button:focus, textarea:focus, .miniform button[type="submit"]:focus, #skiplink:focus {
	outline-color: #004fb6 !important;
	outline-width: 0.2rem !important;
	outline-offset:0.1rem !important;
	outline-style: solid! important;
}
input.aufgabe { min-width: 11ch; outline:0!important;}
form#c_mment_form input.submitbutton{margin-bottom:.5em;}
main a:focus {outline:0!important;}
.topicsc_ajax input:hover, .topicsc_ajax textarea:hover {border-color:#00f!important; }
.topicsc_ajax { max-width: 100%!important; }
#c_mment_area  input, textarea#c0mment {padding:.5em; border-radius:.5em!important;}
#c_mment_area td { vertical-align: middle}
.captcha_table input {padding:.5em;height:2em}
input.aufgabe, input.aufgabe:hover { border-color: transparent!important;}
main form input {padding:.25em;margin-bottom: .5em; border-radius: .5em;}
main form input:hover { border-color: #00f;}
textarea {border-radius:.5em!important;}
input:focus, textarea:focus { outline-color: #00f!important;}
input:hover, textarea:hover { border-color: #00f!important;}

.miniform input[type="text"]:hover, .miniform input[type="email"]:hover,
.miniform input[type="tel"]:hover, .miniform input[type="url"]:hover,
.miniform select:hover, .miniform textarea:hover { border-color: +00f;}
button { border-radius: .5em!important;}

@media (prefers-color-scheme: dark) {
/* CSS Code wenn Dark Mode aktiv */
	body {background-color:#000;color:#f2f2f2; background: linear-gradient(to bottom, #1a63a2 0%,#000303 54%);}
	.wheader { color:#333; }
	.content {}
	h1,h2,h3,h4,h5,h6,p {color: #cccccc;}
	input { background-color: #000; color: #ccc; }
	.sidebar .search_string:focus, .sidebar .search_string:hover {border-color: #ffb04a;}
	.sidebar .search_submit { background-color:#333;   box-shadow:2px 2px 2px #444; }
	.sidebar .search_submit:hover, .sidebar .search_submit:focus { box-shadow: 2px 2px 2px #ffb04a;}
	.footer {font-size:80%; color:#888;}
	.footer a:link, .footer a:visited {color:#888;  }
	.center { background-color:#000; border:1px solid #333;box-shadow:3px 3px 3px #333;}
	.content {background-size:0%;background-color: rgba(0,0,0,.9);}
	.content h1 { color: #ccc;}
	.row {background-color: rgba(0,0,0,.9);}
	.vorstellung h2 { color: #eee;}
	a { color: #ffb04a !important; }
	li:focus-within { outline-color:#ffb04a!important;} 
	a:hover, main a:focus, footer a:focus { border-color:#ffb04a!important;} 
	input, textarea { color: #ddd;}
	input:focus, textarea:focus { border-color: #ffb04a !important; }
	input[type="tel"]:focus, .miniform input[type="url"]:focus, .miniform select:focus, .miniform textarea:focus { border-color: #ffb04a !important;}
	#skiplink {color:#eeeeee;background-color:#000;}
	#skiplink:focus { outline-color: #ffb04!important;}
	input.aufgabe:focus-within, input.aufgabe:focus { border-bottom-color: #ffb04a;}
	input.aufgabe::selection { background-color: #000; color: rgb(70, 70, 70);}
	.miniform .text_capcha input:focus { border-color: ffb04a!important;}
	.miniform input:focus, .miniform textarea:focus { border-color: #ffb04a!important;}
	::placeholder { opacity: 1;}
	.sidebar .search_submit { color: #eee; border-color:#ffb04a;}
	.sidebar .search_submit { color:#eee;}
	a.mobilenav { background-color:#181818}
	#guestbook_form textarea { background-color: #000!important;}
	input.aufgabe::selection {color: #eee!important}
	.miniform .grouping { background-color: #00000;}
	.miniform textarea,.miniform input { background-color: #000!important;}
	.miniform div.grouping { background-color:black !important;}
	.miniform input:hover, .miniform textarea:hover, .miniform button:hover,
	.miniform input:focus, .miniform textarea:focus, .miniform button:focus {border-color: #ffb04a!important;}
	.miniform button[type="submit"] { background-color: #333 !important; color: #eee !important;}
	.miniform button[type="submit"]:hover, .miniform button[type="submit"]:focus {box-shadow: 2px 2px 2px #ffb04a!important;}
	table.gbentry td.gbcontent { background-color: #000!important; color: #ddd!important;}
	table.gbentry_b td.gbcontent { background-color: #1a1a1a!important; color: #fff!important;}
	table.gbentry td.gbtitle { background-color: #000!important; color: #ddd!important;}
	table.gbentry_b td.gbtitle { background-color: #1a1a1a!important; color: #fff!important;}
	.topicsc_ajax input, .topicsc_ajax textarea { border: 1px solid #dddddd!important; background-color:transparent;r}
	/*input:focus, textarea:focus, input:hover, textarea:hover{ border-color: #ffb04a !important;}*/
        nav a:focus,input:focus, textarea:focus, a:focus, .miniform button[type="submit"]:focus{outline-color: #ffb04a !important;}
	.highlight { color: #000; }
	.topicsc_ajax input:focus, .topicsc_ajax textarea:hover {border-color:#ffb04a!important }
	nav a:focus,
	input:focus, button:focus, textarea:focus, .miniform button[type="submit"]:focus, #skiplink:focus {
		outline-color: #ffb04!important;
	}
	main form input:hover { border-color: #ffb04a ; }
	main form input[type=submit], main form input[type=button] {background-color:#333;}
	input:focus, textarea:focus { outline-color: #ffb04a!important;}
	input:hover, textarea:hover { border-color: #ffb04a!important;}
	img { opacity: .8;}
	::selection { color: #ffc; background: #454;}
	body {	accent-color:#ffb04a; }
	.wtitle img { background-color: #fff;}
	input:hover, button:hover {border-color:#ffb04a!important;}
	.topicsc_ajax input:hover, .topicsc_ajax textarea:hover { border-color: #ffb04a;}
}
table.input_form { width:100%;}
