/* tabbed */

.tabbed, 
.tabbed2, 
.tabbed4,
.tabbed3 {
  width:    98%;
  height:   90%; /* fallback */
  height:   calc(100% - 300px);
  position: fixed;
  left:     5px;
}

.tabbed  { top: 240px; }                 
.tabbed2 { top: 100px; }                       
.tabbed4 { top: 100px; }                       
.tabbed3 { top: 180px; }  


/* Tabs mit radio-Buttons */
.tabbed figure, 
.tabbed2 figure,
.tabbed4 figure,
.tabbed3 figure {
  display: block;
  margin-left: 0;
  border-bottom: 0px;
  clear: both;
  width:  98%;
  height: 60%;
  position: fixed;
  left: 0px;
  overflow-y: scroll;   
  z-index: 1020;
}

.tabbed figure {
    top : 300px;
    height: calc(100% - 340px);
}
.tabbed2 figure {
    top: 120px;
    height: calc(100% - 160px);
}
.tabbed4 figure {
    top: 160px;
    height: calc(100% - 200px);
}
.tabbed3 figure {
    top: 200px;
    height: calc(100% - 240px);
    margin-left:10px;
} 

.tabbed > input,
.tabbed2 > input,
.tabbed3 > input,
.tabbed4 > input,
.tabbed figure > div,
.tabbed2 figure > div,
.tabbed4 figure > div,
.tabbed3 figure > div { display: none; }
 
.tabbed figure>div,
.tabbed2 figure>div,
.tabbed4 figure>div,
.tabbed3 figure->div {
  padding: 5px;
  width: 100%;
  border: 0px solid silver;
  background: #FFFFFF;
  line-height: 1.5em;
  letter-spacing: 0.3px;
  color: black;
}


#tab1:checked ~ figure .tab1,
#tab2:checked ~ figure .tab2,
#tab3:checked ~ figure .tab3,
#tab4:checked ~ figure .tab4,
#tab5:checked ~ figure .tab5 { display: block;}
 
nav label {
   float: left;
   padding: 5px 5px;
   border-top: 2px solid darkgray;
   border-right: 2px solid darkgray;
   border-left: 2px solid darkgray;
   margin-right:10px;
   background: white;
   color: grey;
}
 
nav label:nth-child(1) { border-left: 2px solid darkgray; }
nav label:hover { background: lightgrey; color: black; padding-top: 10px}
nav label:active { background:lightgray; }
 
#tab1:checked ~ nav label[for="tab1"],
#tab2:checked ~ nav label[for="tab2"],
#tab3:checked ~ nav label[for="tab3"],
#tab4:checked ~ nav label[for="tab4"],
#tab5:checked ~ nav label[for="tab5"] {
  background: lightgray;
  color: grey;
  position: relative;
  border-bottom: none;
}
 
#tab1:checked ~ nav label[for="tab1"]:after,
#tab2:checked ~ nav label[for="tab2"]:after,
#tab3:checked ~ nav label[for="tab3"]:after,
#tab4:checked ~ nav label[for="tab4"]:after,
#tab5:checked ~ nav label[for="tab5"]:after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: white;
  left: 0;
  bottom: -1px;
}
 
div.imgsubword,
div.imgbooks,
div.imgword,
div.imgsentence,
div.imglinks,
div.imgdecomp,
div.imgsubchar,
div.imgpartchar,
div.imgdecompword{
  width: 50px;
  height: 50px;
} 

div.imgbooks {background-image: url('/statics/books.svg');} 
div.imgword {background-image: url('/statics/词.svg');} 
div.imgsentence {background-image: url('/statics/句.svg');} 
div.imgdecompword {background-image: url('/statics/decompword.svg');} 
div.imgsubword {background-image: url('/statics/subword.svg');} 
div.imglinks {background-image: url('/statics/links.svg');} 

div.imgsubchar {background-image: url('/statics/subchar.svg');} 
div.imgdecomp {background-image: url('/statics/decomposition.svg');} 
div.imgpartchar {background-image: url('/statics/puzzle.svg');}