.comment {
	max-width:800px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:4px;
	color:white;
	outline: 1px solid white;
	padding:16px;
	border-top:0px;
	border-bottom:2px;
	border-radius:5px;
	font-size:16px;
}
.comment textarea {
	width:100%;
	resize:vertical;
}

.comment label, button, input, textarea {
	font-size:14px;
}
    	
.header {
	pointer-events: none;
	transition: top 1s ease 0.0s;
	z-index: 1; /* must cover content and menu */ 	
}

 .header.sticky-header {
 	position: sticky;/* !important;*/
 	position: -webkit-sticky; /* !important;*/
	 top: 0px;
 }

.media-banner {
	position:sticky;
	position: -webkit-sticky;
	top:0px;
	width:100%;
	max-height: calc(100vh - 100px);
    overflow: hidden;
}
.media-banner img,  .media-banner video {
	display: block;
}
#logo {
	position:relative;
	left:1px;
	top:-26px;
	height:24px;
	transition: top 0.6s ease-in;
	
}

.header>h1 {
 	background:rgba(250,250,250,0.25);
	margin-top:-29px;
	padding-top:24px; /* room for logo */
	padding-bottom: 8px;
	pointer-events: none;
	transition: opacity 1s ease, color 2s ease, background-color 2s ease;	
}
   	
.header.bounced {
     box-shadow: 0px 1px 4px 4px rgba(0, 0, 0, 0.1);
     background-size:100%;
 }
.header.bounced>#logo {
	top: 2px;
 }
   	
   
   	img.header:not(:first-child) {
   		margin-top:80px;
   	}
   	
   	 .subtitle {
   	 	font-size:95%;
    	font-style:italic; 
    	margin-bottom:30px;	
    }
    
   	blockquote {
   		font-style:italic;
   	}
    	
    img, pre {
    	max-width:100%;
    	margin: 0px;
    }
    
    figure {
    	max-width:100%;
    	margin: 8px 0px 16px 0px;
    }
    
    figure>img,  figure>pre {
    	border: 1px solid #eee;
    	margin:0px;
    }
    
    figure>label {
    	font-size:90%;    	 
    	display: block;
    	margin-top: 6px;
    	margin-bottom: 24px;	   	
    }  
    
    html[lang=de] figure>label::before {
    	content: 'Bild.'    
    }
    
    pre {
    	background: #f5f5f5;
    	overflow: hidden;
    	font-size:80%;
    	padding:4px;
    	font-family: Courier;
    }
    
    
    .dispFrame {
    	border:4px solid navy;
    	display:inline-block;
    	position:relative; 
    }
    
    .dispFrame * {
    	font-size:80%;
    }
    
    .dispFrameRatio {
    	position:absolute;
    	bottom:0px;
    }
    
    .dispFrameImg {
    	position:relative;
    	font-size:100%;
    	background:url('../images/child_4to3.jpg');
    	background-size:cover;
    }
    
    .note-ref {
    	display:inline-block;
    	font-size:70%;
    	vertical-align:super;
    }
    
    p.note {
    	font-size:70%;
    }
    
    aside {
    	max-width:200px;
    	float:left;
    	padding:0px 20px 16px 8px;
    	padding-left:16px;
    	font-weight:600;
    	color:#666;
    }
    
    aside h2 {
    	font-variant: small-caps;
    	letter-spacing:1px;
    }
    
    .version {
    	color: #ddd;
    }    
 
    
@media (min-width:800px) {
	
	.header>h1 {
		padding-bottom: 12px;
	}
	
	.content-frame {
		/*
		display:flex;
		flex-direction:row;
		flex-wrap: nowrap;
		align-items: flex-start;
		*/
	}
}
	.menu li {
	   list-style-type: none;	  
	}
	.menu a:not(:last-child), .menu li:not(:last-child)>a { 
	   border-bottom:2px solid #888;	   
	}
	.menu a {
	   box-sizing:border-box;
	   display:block;
	   min-height:54px;	   
	   font-weight:bold;
	   text-decoration:none; 		
	   white-space: normal;
	   padding:9px 4px 4px 4px;
	   color: #64B5F6;
	}
	
	.menu a.selected {
		color: #000;
	}
	
	.menu a:active {
		color:white;
		background: #3f51b5;
		/* ripple
		transition: box-shadow 0.4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1);
		transition: box-shadow 0.4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1),transform .4s cubic-bezier(.25,.8,.25,1);
		*/
	}
	
	@keyframes fade {
       0% {opacity: 1;}
       50% {opacity: 1;}
       100% {opacity: 0;} 
    } 
    
    .fade {
        animation-name: fade;
        /* must be specified in seconds (see associated javascript) */
        animation-duration:3s;
     }
     
     .lang-select {
     	display:block;
     	padding:0px;
     	width: 54px;
	    height: 54px;
	    line-height:54px;
	    text-align: center;
	    margin: auto;
     }
     
     .lang-select:active>svg {
     	border:2px solid #aaa;
     	vertical-align:middle;
     }
     
     .lang-select:hover>svg {
     	width: 38px;
     	height:18px;
     }
     
     .no-wrap-spans span {
  		white-space: pre;
	}
	
	.scroll-over {
		position:relative;
		z-index: 1;
	}
	
	.menu {
         --menu-icon-color: black; //#64B5F6;
         --menu-icon-height: 20px;
         --menu-icon-width: calc(var(--menu-icon-height) * 1.33);
         margin-right: calc(var(--menu-icon-width) + 8px);
         pointer-events: auto;
         
	 	box-sizing: border-box;
		border-radius:4px;
		background: #fafafa;
      }	 
	
	/*
		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
        box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
   */
	
	nav {
		position: fixed;
		box-sizing: border-box;
		z-index:2;
		padding:0px;
		width: calc(100vw - 60px);
		height: auto;
		top:0px;
		left: calc(-100vw + 60px);
		background: #fafafa;
		transition: left 0.2s;	
		box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
		border: 1px solid #ddd;
	}	
	
	nav.open {
		left: 0;
	}