body {
  overflow-x: hidden;
  margin: 0;
  background-color: #FFFFED;
  font-family: "Century Gothic", Helvetica, system-ui, Arial, sans-serif;
  font-size: 16px;
  color: black;
}

#darkmode {display: none;}
#htf_sok_s {display: none;}

.header {
  text-align: left;
  background-color: #FFFFED;
}

a {
    color: blue;
}

.jump {color: blue;}

.w3-bar {
  background-color: Gold;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 5px 5px 5px grey;
  border: 1px solid DarkGrey;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: Gold;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 8px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: LemonChiffron;
}

li.dropdown {
  display: inline-block;
}

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

.dropdown-content a {
  color: MidnightBlue;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #fff;
  color: Black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.responsiveimg {
    max-width: 100%;
    height: auto;
}

.darkhover {
    max-width: 100%;
    height: auto;
    border: 2px solid #ddd;
    border-radius: 4px;
    max-height: 600px;
}

.content {
    width: 92%;
    position: left;
    overflow-x:auto;
    margin-left: 50px;
    margin-right: 30px;
    margin-top: 30px;
    padding: 1px 16px;
}

.sectioncontent {
    width: 92%;
    position: left;
    overflow-x:auto;
    margin-right: 30px;
    padding: 1px 16px;
    background-color: rgb(255, 255, 245);
    border: 2px dotted darkgrey;
}

.outerbox{
  display: flex;
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

.innerbox{
    flex: 1;
    -ms-flex: 1; 
    display: inline-block;
    padding: 2%;
    margin-right: 2%;
    background-color: rgb(255, 255, 245);
    border: 2px dotted darkgrey;
    }

.asidecontent {
    width: 78%;
    overflow-x:auto;
    padding: 16px 16px;
    background-color: rgb(255, 255, 245);
    border: 2px dotted darkgrey;
}

span.decennium {
    display: inline-block;
    position: relative;
    width: 15%;
    height: 32px;
    padding-left: 12px;
    padding-top: 5px;
    border: 1px solid Grey;    
    background-color: #f7f3d4; 
}

.aligncenter {
    text-align: center;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px solid blue;
  cursor: pointer;
}

#languagebar {
    background-color: #FFFFED;
}

#ExtraInfo {
    background-color: rgb(240, 240, 210);
}

#seo_keywords {
  color: #FFFFED;
}

.NewTableRol {
  background: #26ADE4;
  background: -moz-linear-gradient(top, #5cc1eb 0%, #3bb5e6 66%, #26ADE4 100%);
  background: -webkit-linear-gradient(top, #5cc1eb 0%, #3bb5e6 66%, #26ADE4 100%);
  background: linear-gradient(to bottom, #5cc1eb 0%, #3bb5e6 66%, #26ADE4 100%);
  border-bottom: 1px solid #000000;
  color: #FFFFFF;
}

.NewTableRow {
  background-color: #F7FDFA;
}

.calendar {
	display: inline-block;
	width:357px;
	border:1px dotted #C0C0C0;
	border-collapse:collapse;
	padding:7px;
}
.calendar caption {
	background-color:orange;
        color:white;
	font-size: 25px;
}
.calendar th {
	border:1px dotted #C0C0C0;
	padding:5px;
	background:LightCyan;
	color: black;
	text-align:center;
        font-family: "Century Gothic", Helvetica, sans-serif;
	font-size: 15px;
}
.calendar td {
	border:1px dotted #C0C0C0;
	padding:5px;
	background:#f7fdfa;
	text-align:center;
        font-family: "Century Gothic", Helvetica, sans-serif;
	font-size: 15px;
}

.hit-the-floor {
color: #fff;
font-size: 3.3em;
font-weight: bold;
font-family: Helvetica;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
  display: inline-block;
  vertical-align: top;
  margin-top: 50px;
  margin-left: 0px;
  text-align: left;
  padding: 0px;
}

/* ################################################################################################################################################################ */

@media (prefers-color-scheme: dark) {
body {background-color: #2e3e5a; font-weight: 400; font-size: 17px; color: white;}
#lightmode {display: none;}
#darkmode {display: inline-block;}
#seo_keywords {color: #2e3e5a;}
a {color: #99ccff;}
.jump {color: #99ccff;}
.header {background-color: #222b40;}
.dropdown-content {background-color: #f2f2f2;}
.dropdown-content a:hover {background-color: lightgrey;}
.content {background-color: #2e3e5a;}
.sectioncontent {background-color: #354364;}
.innerbox {background-color: #354364;}
.asidecontent {background-color: #808080;}
.calendar th {background: #7d8c9b; color: white;}
.calendar td {background: #808080;}
.NewTableRow {background-color: slategrey;}
.hit-the-floor {color: Snow;}
span.decennium {background-color: slategrey; font-weight: bold;}
img.darkhover:hover {box-shadow: 0 0 30px 1px rgba(0, 140, 186, 0.5);}
#languagebar {background-color: #2e3e5a;}
#SOKtable th {color: white;}
#SOKtable2 th {color: white;}
#SOKtable3 th {color: white;}
#SOKtable4 th {color: white;}
#SOKtable {color: black;}
#SOKtable2 {color: black;}
#SOKtable3 {color: black;}
#SOKtable4 {color: black;}
div#SOKtable_filter.dataTables_filter {color: white;}
div#SOKtable2_filter.dataTables_filter {color: white;}
div#SOKtable3_filter.dataTables_filter {color: white;}
div#SOKtable4_filter.dataTables_filter {color: white;}
div#SOKtable_info.dataTables_info {color: white;}
div#SOKtable2_info.dataTables_info {color: white;}
div#SOKtable3_info.dataTables_info {color: white;}
div#SOKtable4_info.dataTables_info {color: white;}
#note {background-color: #50647e;}
#legal {background-color: #597497;}
#ExtraInfo {background-color: slategrey;}
}

@media screen and (max-width: 1750px) {
    .hit-the-floor {font-size: 2.9em;}
}

@media screen and (max-width: 1650px) {
    .hit-the-floor {font-size: 2.7em;}
}

@media screen and (max-width: 1550px) {
    .hit-the-floor {font-size: 2.5em;}
}

@media screen and (max-width: 1410px) {
    .hit-the-floor {font-size: 2.2em;}
}

@media screen and (max-width: 1310px) {
    .hit-the-floor {font-size: 2.1em;}
}

@media screen and (max-width: 1245px) {
    .hit-the-floor {font-size: 2em;}
    .responsiveimg {max-width: 90%; height: auto; margin: 0px;}
}

@media screen and (max-width: 1245px) {
    .hit-the-floor {font-size: 1.9em;}
    .responsiveimg {max-width: 90%; height: auto; margin: 0px;}
}

@media screen and (max-width: 1175px) {
    li a, .dropbtn {padding: 8px 12px;}
    .w3-bar .w3-bar-item {padding: 8px 12px;}
    .hit-the-floor {font-size: 1.8em;}
    .responsiveimg {max-width: 90%; height: auto; margin: 0px;}
}

@media screen and (max-width: 1140px) {
    li a, .dropbtn {padding: 8px 12px;}
    .w3-bar .w3-bar-item {padding: 8px 12px;}
    .hit-the-floor {font-size: 1.6em;}
    .responsiveimg {max-width: 90%; height: auto; margin: 0px;}
}

@media screen and (max-width: 1100px) {
    li a, .dropbtn {padding: 8px 10px;}
    .w3-bar .w3-bar-item {padding: 8px 10px;}
    .hit-the-floor {font-size: 1.5em;}
    .responsiveimg {max-width: 90%; height: auto; margin: 0px;}
}

@media screen and (max-width: 1025px) {
    li a, .dropbtn {padding: 8px 8px;}
    .content {left: 50px; margin-left: 0;}
    .w3-bar .w3-bar-item {padding: 8px 8px;}
    .hit-the-floor {font-size: 1.3em;}
    .responsiveimg {max-width: 85%; height: auto; margin: 0px;}
}

@media screen and (max-width: 966px) {
    li a, .dropbtn {padding: 7px 4px;}
    .content {left: 40px; margin-left: 0;}
    .w3-bar .w3-bar-item {padding: 7px 4px;}
    .hit-the-floor {font-size: 1.3em;}
    .responsiveimg {max-width: 70%; height: auto; margin: 0px;}
    #htf_sok_xl {display: none;}
    #htf_sok_s {display: inline-block; font-size: 4em; vertical-align: top; margin-top: 40px;}
}

@media screen and (max-width: 900px) {
    li a, .dropbtn {padding: 7px 4px;}
    .content {left: 40px; margin-left: 0;}
    .w3-bar .w3-bar-item {padding: 7px 4px;}
    .hit-the-floor {font-size: 1.3em;}
    .responsiveimg {max-width: 65%; height: auto; margin: 0px;}
    #htf_sok_xl {display: none;}
    #htf_sok_s {display: inline-block; font-size: 4em; vertical-align: top; margin-top: 40px;}
}

@media screen and (max-width: 810px) {
    li a, .dropbtn {padding: 6px 2px;}
    .content {left: 30px; margin-left: 0;}
    .hit-the-floor {font-size: 1.3em;}
    .responsiveimg {max-width: 60%; height: auto; margin: 0px;}
    #htf_sok_xl {display: none;}
    #htf_sok_s {display: inline-block; font-size: 4em; vertical-align: top; margin-top: 40px;}
    div#nextact {width: 80%;}
}

@media screen and (max-width: 770px) {
    .content {left: 30px; margin-left: 0;}
    .hit-the-floor {font-size: 1.3em;}
    .responsiveimg {max-width: 60%; height: auto; margin: 0px;}
    #htf_sok_xl {display: none;}
    #htf_sok_s {display: inline-block; font-size: 4em; vertical-align: top; margin-top: 40px;}
    div#nextact {width: 80%;}
    #nav-opt {display: none;}
}

@media screen and (max-width: 725px) {
    .content {left: 30px; margin-left: 0;}
    .w3-bar-item w3-button w3-hide-small w3-right {display: none;}
   .hit-the-floor {font-size: 1.3em;}
    span.decennium { width: 18%; font-size: 14px; padding-left: 10px;}
    #htf_sok_xl {display: none;}
    #htf_sok_s {display: inline-block; font-size: 3em; vertical-align: top; margin-top: 40px;}
    div#nextact {width: 80%;}
    #nav-opt {display: none;}
}

@media screen and (max-width: 610px) {
    table#calendar_secondary.calendar {display: none;}
    .w3-bar {font-size: 13px; padding: 6px 2px;}
    li a, .dropbtn {padding: 5px 1px;}
    .content {left: 20px; margin-left: 0;}
    .responsiveimg {max-width: 50%; height: auto; margin: 0px;}
    span.decennium { width: 18%; font-size: 12px; padding-left: 8px;}
    #htf_sok_xl {display: none;}
    #htf_sok_s {display: inline-block; font-size: 2.5em; vertical-align: top; margin-top: 25px;}
    div#nextact {width: 100%;}
    #nav-opt {display: none;}
}

@media screen and (max-width: 500px) {
    table#calendar_secondary.calendar {display: none;}
    .w3-bar {font-size: 12px; padding: 5px 1px;}
    .content {left: 10px; margin-left: 0;}
    .responsiveimg {max-width: 50%; height: auto; margin: 0px;}
    span.decennium {display: none;}
    #htf_sok_xl {display: none;}
    #htf_sok_s {display: inline-block; font-size: 2em; vertical-align: top; margin-top: 20px;}
    div#nextact {display: none;}
    #nav-opt {display: none;}
}

@media screen and (max-width: 450px) {
    table#calendar_secondary.calendar {display: none;}
    .w3-bar {font-size: 11px; padding: 5px 1px;}
    .content {left: 5px; margin-left: 0;}
    .responsiveimg {max-width: 50%; height: auto; margin: 0px;}
    span.decennium {display: none;}
    #htf_sok_xl {display: none;}
    #htf_sok_s {display: inline-block; font-size: 1.5em; vertical-align: top; margin-top: 15px;}
    div#nextact {display: none;}
    #nav-opt {display: none;}
}

@media screen and (max-width: 400px) {
    table#calendar_secondary.calendar {display: none;}
    .w3-bar {font-size: 10px; padding: 5px 1px;}
    .content {left: 3px; margin-left: 0;}
    .responsiveimg {max-width: 50%; height: auto; margin: 0px;}
    span.decennium {display: none;}
    #htf_sok_xl {display: none;}
    #htf_sok_s {display: inline-block; font-size: 1.5em; vertical-align: top; margin-top: 10px;}
    div#nextact {display: none;}
    #nav-opt {display: none;}
}