* {box-sizing: border-box;}
body {margin: 0px; font-family: Arial, Helvetica, sans-serif;}
.header {overflow: hidden; background-color: #8cffff; text-align:center;}
.topnav { overflow: hidden; background-color: #e9e9e9; padding: 0 10px;}
.topnav a { float: left; display: block; color: black; text-align: center; padding: 10px 16px; text-decoration: none; font-size: 17px;}
.topnav a:hover {background-color: #ddd; color: black;}
.topnav a.active {background-color: #2196F3; color: white;}
button {/*float: right;*/ padding: 2px; margin-top: 4px; margin-right: 12px; background: #ddd; font-size: 14px; border: solid 1px; cursor: pointer;}
button:hover {background: #ccc;}

input[type=text]{padding: 3px 7px; border-radius: 3px; border: 2px solid #ccc; font-size: 16px;}
input[type=text]:focus {outline: 0; border: 2px solid #2196f3;}

.back-color {background-color: #d88; color: black;}

.footer {overflow: hidden; background: #8ff;}

.speaker {background-color: #fcc;}

@media screen and (max-width: 600px) {
  .topnav .search-container {float: none;}
  .topnav a {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0px;
    padding: 10px;
  }
  .topnav input[type=text] {
    display: inline;
    width: 95%;
    border: 1px solid #ccc;
    margin-left: 14px;
    padding: 8px;
    border-radius: 6px;
  }
  .search-container button {
    float: right;
    display: inline;
    text-align: left;*/
  /*  font-size; 12px;*/
    width: 20%;
    margin: 4px;
    padding: 20px;
  }
}

table {border-spacing: 0px; /* border-collapse: collapse; */  margin-left: 12px;}
table th{background: #dfdfdf; border: solid 2px #dfdfdf; border-bottom: solid 2px #d0d0d0}
tr {border-spacing: 3px;}
td {vertical-align: top; padding: 0px 10px;line-height: 25px;}
.ctd {line-height: 30px; border: solid 2px #f2f2f2; background: #f2f2f2; border-bottom: solid 2px #dadada; border-top: solid 3px #fff;}

a {text-decoration: none;}
.speaker {background:#000; border:solid 0px;}

ul li { padding-left:6px;}