.header {                /* must have dot . before 'header' */
    padding: 30px;
    text-align: center;
    background: #1abc9c;   /* light blue */
    /*background-image: url('assets/myimage.jpg');*/
    color: white;
    font-size: 30px;
  }

  h1 {
    font-family: Helvetica, Geneva, Arial,
	  SunSans-Regular, sans-serif 
  }

  /* ul - unorder list  */
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black 
  }
  ul.navbar a {
    text-decoration: none 
  }
  a:link {
    color: blue 
  }
  a:visited {
    color: purple
  }  

  /* body */
  body {
    padding-left: 4em;
    padding-right: 4em;
    font-family: Heebo, "Times New Roman",
          Times, serif;
    color: black;
    background-color: white 
  }

  /* p */
  p {
    justify-content: center;
    display:inline;
    line-height: 1.6;
    align-items: center;
	  font-family: Helvetica, Geneva, Arial,
	    SunSans-Regular, sans-serif 
  }

  mypblue {
    background-color: Cyan; /*Aquamarine;lightblue;*/
    display:inline;
    line-height: 1.6;
    align-items: center;
	  font-family: Helvetica, Geneva, Arial,
	    SunSans-Regular, sans-serif 
  }

  mypgreen {
    background-color: Chartreuse;/*Lime;lightgreen;*/
    display:inline;
    line-height: 1.6;
    align-items: center;
	  font-family: Helvetica, Geneva, Arial,
	    SunSans-Regular, sans-serif 
  }

  mypred {
    background-color: Violet; /*Red;Orange;Fuchsia;DeepPink;Coral;Magenta;OrangeRed;Orange;*/
    display:inline;
    line-height: 1.6;
    align-items: center;
	  font-family: Helvetica, Geneva, Arial,
	    SunSans-Regular, sans-serif 
  }

  /* video */
  video {
    width: 100%;
    height: auto; /*100%; 56.25%;*/
    margin-top: 0%; /*21.875%;*/
  }

.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

 .video-container embed {
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:100%;
 }

 p_under_video {
   color: navy;
   text-indent: 30px;
 }





#toc_container {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    display: table;
    font-size: 150%;
    margin-bottom: 1em;
    padding: 20px;
    width: auto;
}

.toc_title {
    font-weight: 700;
    text-align: center;
}

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;
}


/*
  body_english {
    padding-left: 11em;
    padding-right: 2em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d 
  }

  ul.navbar {
	list-style-type: none;
	padding: 0;
	margin: 0;
	
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em 
  }
*/

/* main & section  */
.main {
  display: flex;
  justify-content: left; /*center;*/
  align-items: center;

	font-family: Helvetica, Geneva, Arial,
	  SunSans-Regular, sans-serif 
}

.section {
  width: 50%;
  height: 100%;
}



/* ========== top navigation bar ==========*/

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: right;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 32px;/*17px;*/
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* for set of png-files used for general-descriptions  */
  .box {
	width: 100%;
	/*height: 200px;*/
  }
  img {
	width: 100%;
	height: 100%;
  }
  .box2 {
	width: 100%;
	/*height: 400px;*/
  }

/* ======================================*/



/*  p {
	  display: flex;
	  justify-content:  center;
	  align-items: center;
  }
*/
/*  
video {
  display: flex;
  justify-content: left;
  align-items: left;
}
*/