﻿/**
 * Copyright 2017 IFH-Industriefunkservice
 *
 * --------------------+
 * html                |
 * -----------------+  |
 *   body           |  |
 * --------------+  |  |
 *     nav       |  |  |
 * --------------+  |  |
 *     main      |  |  |
 * -----------+  |  |  |
 *       head |  |  |  |
 * -----------+  |  |  |
 *       top  |  |  |  |
 * -----------+  |  |  |
 *       cont |  |  |  |
 * -----------+  |  |  |
 *---------------+  |  |
 *     foot      |  |  |
 * --------------+  |  |
 * -----------------+  |
 * --------------------+
 *
 */
 
html{	
	font-size: 1rem;
	font-size: calc(.95rem + .95vw);
	background-color:#ddd;
}

*{           
	list-style: none; 
	margin: 0; 
	padding: 0;
	text-decoration:none;
	box-sizing: border-box;
}

body{
	font-family:sans-serif;		
	background:#fff;
	max-width:31rem;	
	margin:0 auto;
	min-height:100vh;
	box-shadow:0px 0px 75px 100px #fff, 0px 0px 75px 100px #fff;	
}
	
.alink {
	display: inline-block;
	color: #777;
	margin-right:1rem;
	border-bottom: 0.1em dotted #777;
	font-size:.65rem;	
	text-align:center;
	transition: all 0.05s ease-in;
}

.alink:hover, .alink:focus, #navspan {
	color: #ddd;
	font-size:.65rem;
	margin-right:1rem;
	text-shadow: 3px 3px 5px #444, -3px -3px 5px #444, -3px 3px 5px #444, 3px -3px 5px #444;	
	border-bottom: none;
}

.fl{
	display:inline-block;
	font-size:65%;
	text-align:left;
	white-space:nowrap;
}

.fl a{
	text-align:left;
	font-size:1em;
	text-decoration:none;
}

.fl a:hover{
	
	text-decoration:underline;
}

hr{
	height:.075rem;
	margin:.15rem auto;
	color:#ccc;
	background:#888;
}
button {
    margin: 0 1em 1em 0;
    padding: 0.4em 1em;
}
  
.anker{
	display:block;
	font-size:65%;
	text-align:right;
	white-space:nowrap;
}
nav ul{
	display:flex;
	flex-flow:row wrap;	
	justify-content:flex-start;
	align-items:stretch;	
	align-content:stretch;
	align-self:flex-start;
	margin:0rem 0rem 0rem .5rem;	
}

nav li{
	display:block;	
	flex:none;	
}

main{	
	background:#fff;
	max-width:38rem;
	padding-left:.33rem;
	margin:0 auto;	
}


#headsect_ul , #topsect_ul, #contsect_ul  {		
	display:flex;
	flex-flow:row wrap;	
}
#headsect_ul > li {
	flex:1 1 4rem;
	min-height:3.5rem;
}

#topsect_ul > li {
	flex:1 1 8rem;
	align-self:stretch;	
}

#contsect_ul > li {
	flex:1 1 8rem;
	align-self:stretch;	
}

/*- - - - - headsect - - - - - */
#headsect_ul > li, #topsect_ul > li, #contsect_ul > li {
	margin:.33rem .33rem .0rem .0rem;
	padding:0 .5rem .5rem .5rem;
	
	border-left:1px solid #ddd;
	border-top:1px solid #ddd;

}

main h1, main h2, main h3, main h4 {
	margin:.5rem 0 .05rem 0;
}
#dth2 {
	text-align:center;
}

#headsect_ul > li {

	box-shadow:5px 5px 20px -15px #ace inset, 3px 3px 5px -5px #024;

	flex-flow:column wrap;
	display:flex;	
	justify-content:center;
	align-items:center;	
	align-content:stretch;
	text-align:center;
	background:#fff;
}

#headsect_ul > li > h1 {
	color:#605;
	font-size:.9rem;	
}

#headsect_ul > li > h2 {
	color:#555;
	font-size:.65rem;
	align-self:stretch;
}

#headsect_ul > li > div{
	background-position: center center;
	background-repeat:no-repeat;
	background-size:contain;	
	width:100%;
	min-height:100%;
	margin-top:0.5em;
}

#input1 {
	
	margin-top:0.5em;
}


/*- - - - - topsect - - - - - */


#topsect_ul > li {
	box-shadow:5px 5px 20px -15px #8cd inset, 3px 3px 5px -5px #067;	
	flex-flow:column wrap;
	font-size:.65rem;
	background:#fff;
	color:#357;		
}

#topsect_ul > li > ul {
	display:flex;
	flex-flow:row wrap;	
	justify-content:flex-start;
}

#topsect_ul > li > ul  > li {	
	font-size:.6rem;	
	color:#357;
	margin-right:1.25rem;	
}

#topsect_ul > li h2{
	font-size:.7rem;
	color:#146;
}

#topsect_ul > li h3{
	font-size:.65rem;
	color:#146;
	white-space:nowrap;
}

#topsect_ul > li h4{
	font-size:.55rem;
	color:#024;
	white-space:nowrap;
}

/*- - - - - contsect - - - - - */	
#contsect_ul > li {

	box-shadow:5px 5px 20px -15px #ddc inset, 3px 3px 5px -5px #660;

	font-size:.6rem;
	color:#330;
	background:#fff;
}	

#contsect_ul > li  h3 {
	font-size:.65rem;
	color:#664;
}

#contsect_ul > li > ul {
	display:flex;
	flex-flow:row wrap;	
	
}

#contsect_ul > li > ul > li{	
	
	align-self:stretch;
	margin-right:1rem;
}

.b{
	font-weight:bold;
}

.tb{
	display:inline-block;
	white-space:nowrap;
	width:2.25rem;
}
.tb2{
	display:inline-block;
	white-space:nowrap;
	width:1rem;
}
.tb3{
	display:inline-block;
	white-space:nowrap;
	width:4.75rem;
}
.tb4{
	display:inline-block;
	white-space:nowrap;
	width:7.25rem;
}
.inbl{
	white-space:nowrap;
	margin-right:.3rem;
}

.break{
	-ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
	margin-bottom:.25rem;
}

.fn{
	font-style:italic;
	font-size:.65em;
}
/*- - - - - footsect - - - - - */
footer{
	display:flex;	
	flex-flow:row wrap;
	justify-content:flex-start;
	align-items:flex-start;	
	align-content:flex-start;
	align-self:stretch;
/*	border-top:1px solid #ccc;
*/
}

footer ul{
	display:flex;	
	flex-flow:row wrap;		
	justify-content:flex-end;
	align-items:center;
	align-content:center;
	align-self:center;	
	flex:1;
	margin:.1rem 0rem .3rem .5rem;	
}

footer li{
	flex:auto;	
}

#copyright{
	align-self:stretch;
	flex:none;
	vertical-align:bottom;
	color:#555;
	font-size:.6rem;
	margin:.2rem .75em 0 0;
	color:#aaa;
}

#copyright span{
	font-size:.7rem;
}