body {
    margin-top: 0;
    background: #CED8F6;
    background: #eeeeee;    
    font-family:  Arial, Helvetica, sans-serif; /* //"Trebuchet MS", */
        font-size: 16px; 
}


#main { 
    position: relative; 
    width: 728px; 
    /* margin-right: 250px; */ 
    margin-left: 0px;
    margin-top: 0px; 
    background-color: #eeeeee; 
    float: left;
    }
  

#rechts {
    position: absolute;
    left:835px;  
    width: 200px; 
    margin-top: 65px; 
    background-color: #ffffaa; 
    float: left;
    border-radius: 5px;
    border: #333333 solid 1px;
    /* oben, rechts, unten, links */    
    padding: 5px 5px 5px 5px; 
    box-shadow:1px 1px 7px #666666; 
   }

a:link, a:visited, a:hover, a:active	  { 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    color: #000000; 
    text-decoration:none; 
    }

a:hover	  {  color: #cc0000;   font-weight: bold; }


/*     a:link - a normal, unvisited link
    a:visited - a link the user has visited
    a:hover - a link when the user mouses over it
    a:active - a link the moment it is clicked */


/* ---------------------------------------------------------------------------- */

#div-l1, #div-l2, #div-l3, #div-l4, #div-l5, #div-l6, #div-l7, #div-l8, #div-l9, #div-l10, #div-all, #div-test { 
height: 50px; 
width: 58px; 
text-align: center;
display: flex; 
align-items: center;
justify-content: center;
float: left;
border-radius: 5px;
/* oben, rechts, unten, links */
margin: 5px 5px 5px 5px;
margin: 0px 0px 0px 2px;
/* margin-left: 5px; 
margin-right: 5px; 
margin-bottom: 5px; 
margin-top: 5px;  */
background-color: #FF0000;
font-size: 14px;  
/* border: #333333 solid 2px ;
font-weight: bold; */
}
#div-l2 { background-color: #FF3300;}
#div-l3 { background-color: #FF6600;}
#div-l4 { background-color: #FF9900;}
#div-l5 { background-color: #FFCC00;}
#div-l6 { background-color: #FFFF00;}
#div-l7 { background-color: #D3E608;}
#div-l8 { background-color: #A6CE10;}
#div-l9 { background-color: #64A91D;}
#div-l10 { background-color: #218429; width: 64px; }
#div-all { background-color: #aaaaaa; }
#div-test { background-color: #6666FF; } 


a.div:link, a.div:visited, a.div:hover, a.div:active {
  color:#000000;
  text-decoration: none;
  font-weight:normal;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
  }
a.div:hover {
  font-weight:bold;
  }

  
/* ------------------------------------------------------------- */
  
.dropbtn {
    background-color: #CED8F6; 
    background-color:#ffffaa;
    color: black;
    padding: 1px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffaa;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    text-align:left;
    color: black;
    /* oben, rechts, unten, links  0 0 15px*/
      padding: 2px 0px 0px 10px;
     /* padding-left: 2px; */
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #CED8F6;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #CED8F6;}
 


/* ------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

.vocabs{
    position:relative;
    float:left;
    /* width:1050px; */
    border: 1px solid #000000;
    margin-right: 30px; 
    margin-bottom: 20px; 
    background:#ffffff;
    display:inline;
    text-align: left;
}

#myInput, #F1, #A1, #A2, #Phr, #Lev, #Unit, #User {
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 12px;
  padding: 5px 1px 5px 5px;
  border: 1px solid #ddd;
  /* margin-bottom: 12px; */
}
/* //--------------------------------------------------------------- */
#VocTable {
  border-collapse: collapse;
  /* width: 100%; */
  border: 1px solid #ddd;
  font-size: 14px;
}

#VocTable td {
  /* oben, rechts, unten, links */
  padding: 2px 0px 2px 0px; 
  height:28px;
}

#VocTable th {
  padding: 1px 0px 1px 0px; 
  background-color: #e6e6e6;
}

#VocTable tr {
  border-bottom: 1px solid #ddd;
}

#VocTable tr.kopfz, #VocTable tr:hover {
  background-color: #f9f9f9;
}
/* //--------------------------------------------------------------- */
#TestTable {
  border-collapse: collapse;
  /* width: 100%; 
  border: 1px solid #ddd;*/
  font-size: 14px;
  font-color: black;
}

#TestTable td {
  /* oben, rechts, unten, links */
  padding: 2px 0px 2px 0px; 
  height: 28px;
}

#TestTable th {
  padding: 5px 0px 5px 0px; 
  background-color: #e6e6e6;
}

#TestTable tr {
  border-bottom: 1px solid #ddd;
}

/* #TestTable tr.kopfz, #VocTable tr:hover {
  background-color: #f9f9f9; */




/* //--------------------------------------------------------------- */
#TennisTable td.tennis {
  border-bottom: 1px solid #ddd;
/*   text-align=center;
  align=center; */
}

/* //--------------------------------------------------------------- */


 hr.line {
 color: #666666;
 width: 100%;
 margin: 1px auto;
 height: 1px;
 }

.center { 
  margin:0 auto;      
  width: 710px; 
/*   border: 1px dotted #000000;
  background: #ffff65; */
}
 
.zeile{
  float: left;
  clear: left;
  width: 706px;
/*   border: 1px dotted;
  background: #00ff65; */
}

.header{
  float: left;
  clear: left;
 /*   background: #eeeeee;
border:1px solid #000000;
  border: 1px dotted; */
  width: 706px;
  margin-bottom: 20px;
/*   margin-left:10px; */
  text-align: left;
}
.footer{
  float: left;
  clear: left;
  width: 706px;
  margin-top:0px;
  text-align: left;
}

.label{
    position:absolute;
    top:-15px;
    left:20px;  
    margin:0;
    padding:0 5px;
    line-height:25px;
    background: #F4FA58;
    border:1px solid #000000;
    text-align: left;
}

.container{
    position:relative;
    float:left;
    width:320px;
    border: 1px solid #000000;
    margin-right: 30px; 
    margin-bottom: 20px; 
    background:#ffffaa;
    display:inline;
    text-align: left;
}
.container2{
    position:relative;
    float:left;
    width:1050px;
    border: 1px solid #000000;
    margin-right: 30px; 
    margin-bottom: 20px; 
    background:#ffffcc;
    display:inline;
    text-align: left;
}
.container3{
    position:relative;
    float:left;
    width:670px;
    border: 1px solid #000000;
    margin-right: 30px; 
    margin-bottom: 20px; 
    background:#ffffff;
    display:inline;
    text-align: left;    
}
.content {
    padding: 5px;
    margin: 10px 0 0 0; /* oben, rechts, unten, links */
    text-align: left;
}