/* Below: General setting for display, header bar, etc */

@font-face {
font-family: 'Trebuchet MS';
font-style: normal;
font-weight: normal;
src: local('Trebuchet MS'), url('trebuc.woff') format('woff');
}

@font-face {
font-family: 'Trebuchet MS Italic';
font-style: normal;
font-weight: normal;
src: local('Trebuchet MS Italic'), url('Trebuchet-MS-Italic.woff') format('woff');
}

h1, h2, h3, h4, h5, h6 {
  margin-left:35px; margin-right:45px;
  margin-top:40px; margin-bottom:30px; 
  font-family: 'Trebuchet MS','Trebuchet MS',Trebuchet MS,Trebuchet MS }

body    { background-color:#FFFFFF; min-width:1105px;
            margin-left:35px; margin-right:45px;
            margin-top:20px; margin-bottom:30px;
            font-family: 'Trebuchet MS'; text-align: justify; text-justify: inter-word;}

p {margin-left:65px; width:90%; margin-top:20px; margin-bottom:20px}

a:link    { color:#980DBA; text-decoration:none; }

a:visited { color:#980DBA; text-decoration:none; }

a:hover   { text-decoration:underline }

h3#bar { background-color:#7E009F; color:#ffffff; border:0px; margin:0px; padding:5px;
          font-family:'Trebuchet MS','Trebuchet MS',Trebuchet MS,Trebuchet MS; text-align: center; font-size:22px }

ul{width:87%;}

footer { text-align: center; padding: 0px; background-color:#7E009F; color: #e7fcfe;
      font-size:12px; font-family: 'Trebuchet MS'; left:35px; right:45px;
      position: absolute; margin-top:200px; min-width:1105px;} 


table {font-family: 'Trebuchet MS','Trebuchet MS'; border-collapse:collapse; width:90%}
td{border:1px solid #000; text-align:center; padding:8px; font-weight: normal;}
th{border:1px solid #000; text-align:center; padding:8px;}
tr:first-child{background-color:#d4c6e6;}

.warning {
  padding: 20px;
  background-color: #F9DB4B;
  color: black;
}

/* Above: General setting for display, header bar, etc */

/* Button creation */

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
}

.button {
  background-color: #d4c6e6;
  border: none;
  color: #4B006B;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
}

.button:hover {
  background-color: #7E009F;
  color: white;
}

.mainbutton {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

/* Button creation */

/* Below: Different image settings */

.imright {
 float: right;
 padding: 0 10px 0 60px;
}

.imcentre {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.figcaption {
  text-align: center;
  width: 800px;
  font-style: italic;
  margin-left:auto;
  margin-right:auto;
}

/* Above: Different image settings */

/* Below: To hide a text and then display it */

.hidden-answer {
  padding: 10px 20px 10px 20px;
  text-align: justify;
  background-color: #d4c6e6;
  font-family: 'Trebuchet MS';
  margin-top: 20px;
  margin-left: 65px;
  width: 90%;
  display: none;
}

.highlight-text {
  padding: 10px 20px 10px 20px;
  text-align: justify;
  background-color: #d4c6e6;
  margin-top: 20px;
  margin-left: 65px;
  width: 90%;
}

/* Above: To hide a text and then display it */

/* Below: Displaying code-like */

.codestyle {
  font-size:125%
}

.coding {
  padding: 10px 10px 10px 10px;
  font-size:125%;
  margin-left:65px;
  background-color: #d4c6e6; 
  margin-top: 20px;
  width:88%; text-align: left;
}

/* Above: Displaying code-like */

/* Below: To display Content in the page */

#toc_container {
    background: #eee none repeat scroll 0 0;
    font-family: 'Trebuchet MS';
    border: 1px solid #aaa;
    display: table;
    font-size: 95%;
    margin-bottom: 1em;
    padding: 10px 50px 20px 20px;
    width: auto;
    margin-left: 45px;
}

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

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

/* Above: To display Content in the page */

/*
****************************************************************************************
Navigation bar code: see https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
*/

/* Navbar container
.navbar {
  overflow: hidden;
  background-color: #d4c6e6;
} */
.navbar {
  display: flex;
  align-items: center;
  background-color: #d4c6e6;
}

/* Links inside the navbar */
.navbar a {
/*  float: left; */
  font-size: 18px;
  color: #4B006B;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.navdropdown {
/*  float: left; */
  overflow: hidden;
}

.nav-right {
  margin-left: auto;
}

/* Dropdown button */
.navdropdown .navdropbtn {
  font-size: 18px;
  border: none;
  outline: none;
  color: #4B006B;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .navdropdown:hover .navdropbtn {
  background-color: #7E009F;
  color: white;
}

/* Dropdown content (hidden by default) */
.navdropdown-content {
  display: none;
  position: absolute;
  background-color: #d4c6e6;
  color: #4B006B;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 100; /* want to be above aladin! */
}

/* Links inside the dropdown */
.navdropdown-content a {
  float: none;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.navdropdown-content a:hover {
  background-color: #7E009F;
  color: white;
}

/* Show the dropdown menu on hover */
.navdropdown:hover .navdropdown-content {
  display: block;
}

/*
End of navigation bar
****************************************************************************************