/* Kommentar */
/* h1, h2 {}  	Selektor-Liste mit zwei voneinander unabhängigen Selektoren  */
/* e > f {} 	Kindselektor */
/* p em			Selektoren durch ein Leerzeichen miteinander verbunden, z.B. p em, so wird das Element em nur dann angesprochen, wenn es Nachfahre eines p-Elements ist */

body {margin:0px; font-family: Tahoma, Arial, Helvetica, sans-serif; color:#000; min-width:1040px; font-size:17px; }
p{ line-height:1.4em;}
button{ outline:none; border:none; cursor:pointer; padding:9px 12px; font-size:15px; border-radius:4px; background:#0070C1; color:#FFF; transition:background 0.2s linear 0s; }
button:hover{background: #2492FF;}
a{ color:#0088EC; text-decoration:none; outline:none; }
a:hover{ color:#000; text-decoration:underline; }
input{ outline:none; }
li{list-style-type:none;}  	/* keine bullet points bei Menu */

.greenbtn{background:#7EA800;}
.greenbtn:hover{background:#9C0;}

#topbar { /* user-select:none = Bei Doppelklick keine Bilder markieren */
	height:100px;
	border-bottom:1px solid #BBB; /* grauer unterer Rand */
	background:#FFF;
	box-shadow:0px 2px 4px #999;
	-moz-user-select: none;/* Firefox */
    -webkit-user-select: none; /* Chrome/Safari */
	min-width: 1060px;
}
#topbar > #logo {
	float:left;
	display:block;
	width:auto;
	margin: 5px 0px 0px 10px; /* t r b l */
	cursor: pointer;
	transition: transform 0.5s;
}
#topbar > #logo:hover { transform: scale(1.05); }
#topbar > #mainmenu {float:left;width:auto;margin:25px 10px 0px 0px;}
#topbar > #mainmenu > div {
	float:left;
	width:50px;
	height:50px;
	margin-left:10px;
	cursor:pointer;
	opacity:1;
	border-radius:6px;
	background-position:center;
	background-repeat:no-repeat;
	transition:background 0.2s linear 0s,border 0.2s linear 0s;
}
#topbar > #mainmenu > div:hover {}
#topbar > #mainmenu > .cp_btn {
  fill: none;
  stroke: #0088EC;
  stroke-width: 6;
  stroke-linecap: round;	
}
#svg {
  border-radius: 6px;
  transition: background 0.2s linear 0s,border 0.2s linear 0s;
}
#topbar > #mainmenu > #search_btn { background-image:url(../img/icon_search.png);}
#topbar > #mosel_img{float:left; display:block; width:auto;margin:5px 0px 0px 0px;}
#topbar > #welcome_img{float:left; display:block; width:auto; margin:5px 0px 0px 10px;}
#topbar > #logmenu{float:right; width:auto; margin:30px 25px 0px 0px;}

#cp_win, #acc_win, #pcmenu_win {
    background: #ddd none repeat scroll 0 0;
    border-bottom: 1px solid #888;
    border-right: 1px solid #888;
    height: auto;
    position: absolute;
    width: 180px;
    z-index: 9;
}
#cp_win {
	left: -300px;
	transition: left 0.3s linear 0s;
}
#acc_win {
    top: -300px;
	right:0;
    transition: top 0.6s linear 0s;
}
#pcmenu_win {
    top: 125px;
	left: 700px;
    transition: top 0.3s linear;
	visibility: hidden;
}
#cp_win > div, #acc_win > div, #pcmenu_win > div {
    background: #fff none repeat scroll 0 0;
    line-height: 1.7em;
    margin: 2px;
    padding: 0;
}
#cp_win > div > hr, #acc_win > div > hr, #pcmenu_win > div > hr {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #ddd -moz-use-text-color -moz-use-text-color;
    border-image: none;
    border-style: solid none none;
    border-width: 1px medium medium;
    margin: 0;
}
#cp_win > div > a, #acc_win > div > a, #pcmenu_win > div > a {
    color: #000;
    display: block;
    font-size: 15px;
    padding: 3px 0 3px 24px;
}
#pcmenu_win > div > a {
  padding-left: 10px;	
}
#cp_win > div > a:hover, #acc_win > div > a:hover, #pcmenu_win > div > a:hover {
    background: #0f99ff none repeat scroll 0 0;
    color: #fff;
    text-decoration: none;
}
#acc_win > div > a::before,
#pcmenu_win > div > a::before {
	display:inline-block;
	margin-right:10px;
	vertical-align:middle;
}
#acc_win > div > a:nth-child(1):before {
	content:url(../img/profile_15x15_grau.png) " ";
}
#acc_win > div > a:nth-child(3):before {
	content:url(../img/cog_15x15_blue.png) " ";
}
#acc_win > div > a:nth-child(5):before {
	content:url(../img/logout_15x15_black.png) " ";
}
#search_win{ background:#666; height:0px; overflow:hidden; transition:height 0.3s linear 0s; }
#search_win > form{ margin:5px; }
#search_win > form > input{ display:block; float:left; width:78%; height:60px; padding:0px 1%; border:none; font-size:27px; background:#000; color:#EEE; }
#search_win > form > button{ display:block; float:left; width:20%; height:60px; padding:0px 0px; border-radius:0px; font-size:27px; }

#dialogoverlay {
	display: block;
	opacity: .8;
	position: fixed;
	top: 0px;
	left: 0px;
	background: #000;
	width: 100%;
	z-index: 10;
}

#loginbox{
	display: none;
	position: fixed;
	background: #FFF;
	border-radius:7px; 
	width:240px;
	padding:20px;
	z-index: 10;
	transform-origin: 50% 0%; /* ergänzt wegen falscher Darstellung in Firefox (sporadisch) */
	transform: perspective(800px) rotateX(90deg);
	transition: transform .5s linear 0s;
}
#loginbox input{ display:block; width:90%; margin:0px auto; padding:7px; margin-bottom:10px; }
#loginbtn { float: right; }
#loginbox div#login_status { display: none;line-height: 1.2em;font-size: 12px;background: #fee29e; margin-bottom: 10px;padding: 3px;border: 1px solid #900; }
#loginbox a{ display: block;margin: 20px 0; }
#loginbox p#info { font-size: 1rem; }

#notificationbox{
	display: none;
	position: fixed;
	background: #FFF;
	border-radius:0px; 
	width:650px;
	z-index: 10;
}
#notificationbox > h3{ margin: 0;background: #759B00; padding:10px; color:#FFF; }
#notificationbox > h3 > a{ float: right;color: #E0FF84; }
#notificationbox > h3 > a:hover{ color:#FFF;text-decoration: none; }
#notificationbox > h3 > a > span{ font-size:0.7em; }
#notificationbox > #notes_container{ font-size:16px; padding:25px; overflow:auto;}
#notebtn{ }
.notes_btn_flash{
	-webkit-animation: note-btn-flash ease-in-out 1s infinite;
	animation: note-btn-flash ease-in-out 1s infinite;
	transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
@-webkit-keyframes note-btn-flash { 0% { background: #0089D2; } 50% { background: #F00; } 100% { background: #0089D2; } }
@keyframes note-btn-flash { 0% { background: #0089D2; } 50% { background: #F00; } 100% { background: #0089D2; } }

div#checkAvailBox {
	display: none;
	position: fixed;
	color: #003580;
	background: #ffc751;
	width: 360px; /* mobile optimiert */
	max-height:500px;
	overflow:auto;
    z-index: 10;	
	transform-origin: 50% 0%; /* ergänzt wegen falscher Darstellung in Firefox (sporadisch) */
	transform: perspective(800px) rotateX(90deg);
	transition: transform .5s linear 0s;
}
div#checkAvailBox > form {margin:15px}
div > form > div#closeX {float: right;font-size: 28px;font-weight: bold;line-height:0.8em;padding-bottom:8px;padding-left:15px;padding-right:15px;margin-right:-15px;margin-top:-15px;}
div > form > div#closeX:hover, #closeX:focus {background:#e81123;text-decoration: none;cursor: pointer;}
div#checkAvailBox > form > img {float:left;margin-top:3px;}
div#checkAvailBox > form > span {font:24px Tahoma;}
div#checkAvailBox > form > p {font:12px Tahoma;}
div#checkAvailBox > form > p#chav_label {width:325px;height:23px;}
div#checkAvailBox > form > p#chav_label > label#chav_label1 {font:16px Tahoma;margin-left:0px;float:left;}
div#checkAvailBox > form > p#chav_label > label#chav_label2 {font:16px Tahoma;margin-left:0px;float:right;}
div#checkAvailBox > form > div#chav_input {width:325px;;height:24px;margin-top:-10px;}
div#checkAvailBox > form > div#chav_input > input#choutdat {font:14px Tahoma;float:right;}
div#checkAvailBox > form > div#nightsBox {font:14px Tahoma;margin-top:6px;}
div#checkAvailBox > form > div#chav_status {
	display:none;
	font:bold 14px Tahoma;
	background: #fee29e none repeat scroll 0 0;
    border-radius: 3px;
    color: #c00;
	margin-top:15px;
    margin-bottom: 5px;
    padding: 6px 8px;	
}
div#checkAvailBox > form > div#zi_er_ki {margin-top:15px;}
div#checkAvailBox > form > div#zi_er_ki > label {margin:0px;font:14px Tahoma;}
div#checkAvailBox > form > div#zi_er_ki > select {margin-right:10px;font:14px Tahoma;}
div#checkAvailBox > form > input#checkAvailBoxBtn {
	background-color: #0896ff;
	border: 0 none;
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
	font-size: 23px;
	line-height: 34px;
	padding: 5px 25px;
	float:right;
	margin:15px;
}
div#checkAvailBox > form > input#checkAvailBoxBtn:hover {background-color: #003580;}

div#modalBox {
	display: none;
	position: fixed;
	color: #000;
	background: #fff;
	width: 320px; /* mobile optimiert */
	height:400px;
	overflow:auto;
    z-index: 10;	
	padding: 20px;
	text-align:justify;
	cursor: pointer;
}
div > div#closeX2 {float: right;font-size: 28px;font-weight: bold;line-height:0.8em;padding-bottom:8px;padding-left:15px;padding-right:15px;margin-right:-15px;margin-top:-15px;}
div > div#closeX2:hover, #closeX2:focus {background:#e81123;text-decoration: none;cursor: pointer;color: #fff;}

.goodToKnow {
  padding: 0.25em;	
}

.scrollToTop{
	width:64px; 
	height:64px;
	background: whiteSmoke;
	position:fixed;
	bottom:50px;
	right:5px;
	display:none;
	background: url(../img/arrowUp_sm.png) no-repeat 0px 0px;
	opacity:0.8;  /* Transparenz */
	z-index:10;
}
.scrollToTop:hover{opacity:1.0; /* Transparenz aus */}

div#midsection{ width: 960px; margin:0px auto; }

div#btmbar{padding-top:20px;font-size:0.8em;background:#202020; color:grey; margin-top:100px;height:170px;border:3px solid green; }
div#btmbar > div:nth-child(1){text-align:center;} /* c Gästehaus zum Moseltal 2014-2019 */
div#btmbar > div:nth-child(2){display:block;width:70px;height:70px;margin:0 auto;margin-top:20px;margin-bottom:20px;transform: rotate(0deg);transition: transform 0.9s linear 0s;} /* Logo kb */
div#btmbar > div:nth-child(2):hover{transform: rotate(180deg);transition: transform 0.9s linear 0s;}
/* nth-child(3):Datenschutzerklärung und Impressum */
div#btmbar > div:nth-child(3){text-align:center;margin-bottom:20px;}
/* http://tobiasahlin.com/blog/css-trick-animating-link-underlines/ */
div#btmbar a{color:grey;position:relative;} 
div#btmbar a:hover{ color:white;text-decoration:none;}
div#btmbar a:before{content: "";position: absolute;width: 100%;height: 2px;bottom: 0;left: 0;background-color: white;visibility: hidden;transform: scaleX(0);transition: all 0.5s ease-in-out 0s;}
div#btmbar a:hover:before{visibility: visible;transform: scaleX(1);}
.brightred {background:#FFE6E8;border:#900 1px solid;color:#900;padding:0px 5px;}

/* YT Video Traversy Media 08.2021 - blurry loading - aTest 66 */
/* .blur__image { filter: blur(30px); } */
/* Ende YT Video Traversy Media 08.2021 - blurry loading - aTest 66 */

/* @media (min-width: 600px) { KP style */
/* all screens that are lower than 1041 px, change css properties for mobiles */
@media screen and (max-width: 1040px) {
 body {margin:0;padding:0;width:100%;min-width:280px;}
 h3 {font-weight: bold;}
 #topbar {height:58px;min-width:100%}
 #topbar > #logo {height:50px;}
 #topbar > #mainmenu {margin:5px 10px 0px 0px;} /* t r b l */
 #topbar > #mosel_img{display:none}
 #topbar > #welcome_img{display:none;}
 #topbar > #logmenu{margin:10px 10px 0px 0px;}
 #cp_win{width:160px;}
 #cp_win > div > a, #acc_win > div > a { padding: 3px 0 3px 5px;}
 #search_win > form > input{ font-size:18px;}
 #search_win > form > button{font-size:18px; }
 #notificationbox{width:96vw;}
 #pcmenu_win { display: none; }
 div#midsection{width:98%;padding:1%;}
}