/* copy of style-16main.css  */

    html {
        font-family: 'Roboto', 'Open Sans', sans-serif;
  /*   font-family: Georgia, "Times New Roman", Times, serif;
            color: #555; */        
    }
    
    body  /* General layout of the page */    {
        background-color: #fefeff;                
        background-image: url(../graphics/solid-light-bg11.png);
    }
    
/**
 * 1. Center the content. Yes, that's a bit opinionated.
 * 2. Use `max-width` instead `width`
 * 3. Add padding on the sides.
 */
.wrapper {
    margin-right: auto; /* 1 */
    margin-left:  auto; /* 1 */

    max-width: 80%; /* 2 */

    padding-right: 10px; /* 3 */
    padding-left:  10px; /* 3 */

    }

    #maincontainer {
        max-width: 1900px; 
        padding: 4rem 3rem 1rem 3rem;
        background-color: #eeeeee;
        background-image: url(../graphics/solid_grey.png); 
    }
                
    #container, #container3 {
         padding: 4em 3em 2em;
         background-image: url(../graphics/solid_dust.png);        
    }

    p.indent {
        margin-top: 0;
        margin-bottom: 1rem;
        text-indent: 50px;
        }

/*  changes to Bootstrap navbar settings  */

.navbar {
  background-color: #acacac;
}
.navbar .navbar-brand {
  color: #ecf0f1;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: #7b7b7b;
}
.navbar .navbar-text {
  color: #ecf0f1;
}
.navbar .navbar-text a {
  color: #7b7b7b;
}
.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
  color: #7b7b7b; 
}
.navbar .navbar-nav .nav-link {
  color: #ecf0f1;
  border-radius: .25rem;
  margin: 0 0.25em;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
  color: #7b7b7b;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
  color: #7b7b7b;
  background-color: #fafafa;
}
.navbar .navbar-toggle {
  border-color: #fafafa;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
  background-color: #fafafa;
}
.navbar .navbar-toggle .navbar-toggler-icon {
  color: #ecf0f1;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
  border-color: #ecf0f1;
}
.navbar .navbar-link {
  color: #ecf0f1;
}
.navbar .navbar-link:hover {
  color: #7b7b7b;
}
        
 audio {
    filter: sepia(10%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;
}

@media (max-width: 575px) {
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ecf0f1;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #7b7b7b;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #7b7b7b;
    background-color: #fafafa;
  }
}

@media (max-width: 767px) {
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ecf0f1;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #7b7b7b;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #7b7b7b;
    background-color: #fafafa;
  }
    .wrapper {
        max-width: 100%
    }
             footer .navbar-collapse {
            position: absolute;
            bottom: 70px;
            width: 100%;
            background-color: darkgray;
          }
        }   
        table {
          /* border: 1px solid black; */
            width: 100%;
            align-content: center;
        }
        thead {
            padding-bottom: 5px;
        }
        
        th {
          /* border: 1px solid black; */
            align-self: center;
            text-align: center;
            font-size: 1.0rem;
            color: #333;
            background-color: #c0c0c0;
        }
        
        tr {

            border-bottom: 1px solid black;
            
        }
        
        td {
            text-align: left;
            font-size: .8rem;
            padding-top: .3rem;                        
        }
}

@media (max-width: 991px) {
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ecf0f1;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #7b7b7b;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #7b7b7b;
    background-color: #fafafa;
  }
}

@media (max-width: 1199px) {
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ecf0f1;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #7b7b7b;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #7b7b7b;
    background-color: #fafafa;
  }
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
  color: #ecf0f1;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
  color: #7b7b7b;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
  color: #7b7b7b;
  background-color: #fafafa;
}