html {
  font-family: "Microsoft New Tai Lue", "Calibri", sans-serif;
  overflow-y: scroll;
}

body {
  width: 100%;
  min-height: 100%;
  margin: 0px;
  overflow-x: hidden;
  position: absolute;
}

body[data-pagemode=app], body[data-pagemode=fixed] {
  padding: 0px !important;
}

body:not([data-pagemode=default]) .contentbox-default {
  display: none;
}

body:not([data-pagemode=app]) .contentbox-app {
  display: none;
}

body:not([data-pagemode=noframe]) .contentbox-noframe {
  display: none;
}

body:not([data-pagemode=fixed]) .contentbox-fixed {
  display: none;
}

#content-default {
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

#content-fixed {
  position: absolute;
  top: 3em;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.contentbox p {
  padding: 0px;
  margin: 0em 0em 0.5em;
}
.contentbox h2 {
  padding: 0px;
  margin: 0.5em 0em 0.3em;
}
.contentbox-default {
  display: flex;
}
.contentbox-app {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  flex-direction: column;
  margin-top: 40px;
}

#column1 {
  width: 30%;
}

#column2 {
  width: 70%;
  flex: 1;
}

#backgrounddiv {
  position: absolute;
  width: 100%;
  height: 100%;
}

.backshuffle {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  transition: opacity 3s;
  -webkit-transition: opacity 3s;
  -moz-transition: opacity 3s;
  -ms-transition: opacity 3s;
}

.displaytogglebutton {
  margin-right: 10px;
}

.linkwrapper > a {
  text-decoration: none;
}

#adboxwide {
  width: 728px;
  margin: 5px auto;
  border-radius: 10px;
  overflow: hidden;
  height: 90px;
}

#adbox {
  display: flex;
  justify-content: space-around;
  overflow-y: hidden;
}

#footer {
  position: relative;
  height: 60px;
}

.pagepadding {
  padding: 0px 0px 0px;
}

.contentcolumn {
  position: relative;
}

.fancybutton {
  display: inline-block;
  font-size: 30px;
  border-radius: 10px;
  color: white;
  padding: 8px 16px;
  cursor: pointer;
  margin: 5px 5px 10px;
  box-shadow: 0px 2px 10px black;
  background-color: orange;
  font-family: sans-serif;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
}
.fancybutton::before {
  background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzYuMzc1cHgiIGhlaWdodD0iMzYuMzc2cHgiIHZpZXdCb3g9IjAgMCAzNi4zNzUgMzYuMzc2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNi4zNzUgMzYuMzc2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI2RkZCIgZD0iTTMzLjkzOCwyNS42MjZ2OC4yNWMwLDEuMzgzLTEuMTE5LDIuNS0yLjUsMi41aC0yNi41Yy0xLjM4MSwwLTIuNS0xLjExNy0yLjUtMi41di04LjI1YzAtMS4zODEsMS4xMTktMi41LDIuNS0yLjUgczIuNSwxLjExOSwyLjUsMi41djUuNzVoMjEuNXYtNS43NWMwLTEuMzgxLDEuMTE5LTIuNSwyLjUtMi41UzMzLjkzOCwyNC4yNDUsMzMuOTM4LDI1LjYyNnogTTE2LjQyLDI3Ljc2OCBjMC40ODgsMC40ODgsMS4xMjksMC43MzIsMS43NjgsMC43MzJjMC42NDMsMCwxLjI3OS0wLjI0NCwxLjc3LTAuNzMybDcuNS03LjQ5OGMwLjk3OC0wLjk3NSwwLjk3OC0yLjU1OCwwLTMuNTM1IGMtMC45NzctMC45NzctMi41NjEtMC45NzctMy41MzUsMGwtMy4yMzEsMy4yMzJWMi41YzAtMS4zODEtMS4xMTktMi41LTIuNS0yLjVzLTIuNSwxLjExOS0yLjUsMi41djE3LjQ2N2wtMy4yMzItMy4yMzIgYy0wLjk3Ny0wLjk3Ny0yLjU2MS0wLjk3Ny0zLjUzNSwwYy0wLjk3NywwLjk3OC0wLjk3NywyLjU2LDAsMy41MzVMMTYuNDIsMjcuNzY4eiIvPjwvc3ZnPg");
  content: "";
  background-size: contain;
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: baseline;
  margin-bottom: -0.15em;
}

.mb-root {
  position: relative;
  z-index: 1;
  background: #2c2c2c;
}

.mb-padding {
  display: flex;
  flex-direction: row;
  color: #ccc;
  align-items: stretch;
}
.mb-padding a {
  text-decoration: none;
}

.mb-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 1.8em;
  background: #383838;
}
.mb-logo__text {
  color: #ccc;
  display: none;
  margin-right: 0.4em;
}
.mb-logo__icon {
  height: 1.4em;
  width: auto;
  margin: 0.2em;
}

.mb-menu {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  width: 0;
  flex-grow: 1;
  position: relative;
  padding-left: 1.5em;
  white-space: nowrap;
}
.mb-menu__sub {
  height: 35%;
  display: inline-block;
  /* The joys of trying to vertically align text in css*/
}
.mb-menu__sub::after {
  display: inline-block;
  height: 35%;
  width: 0;
  vertical-align: middle;
  content: "";
}
.mb-menu__sub {
  font-size: 0.8em;
  background: linear-gradient(to right, #000, #000 50%, rgba(0, 0, 0, 0));
  padding-left: 1em;
  padding-right: 9em;
  margin-right: -9em;
  display: none;
  white-space: nowrap;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.mb-section--selected .mb-menu__sub {
  display: block;
}

.mb-section {
  height: 65%;
}
.mb-section__header {
  height: 100%;
  display: inline-block;
  /* The joys of trying to vertically align text in css*/
}
.mb-section__header::after {
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
  content: "";
}
.mb-section__header {
  font-size: 1.2em;
  color: #ccc;
  padding: 0px 0.5em;
}
.mb-section--selected {
  background: black;
  color: white;
}

.mb-subsection {
  height: 100%;
  display: inline-block;
  /* The joys of trying to vertically align text in css*/
}
.mb-subsection::after {
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
  content: "";
}
.mb-subsection {
  margin: 0px 0.5em;
  color: #ccc;
}
.mb-subsection--hidden {
  display: none;
}
.mb-subsection--selected {
  font-weight: bold;
  cursor: default;
  color: white;
  display: inline;
}
.mb-subsection input {
  border: 0px;
  margin: 0px;
  padding: 0px;
  background: none;
  color: #ccc;
  width: 8em;
}

@media (min-width: 1250px) {
  /*wide display,wider page*/
  .pagepadding {
    width: 85%;
    margin: 0px auto;
    max-width: 80em;
  }
}
@media (min-width: 1120px) and (max-width: 1299px) {
  /*normal display*/
  .pagepadding {
    width: 1100px;
    margin: 0px auto;
  }
}
@media (min-width: 801px) {
  /*normal display*/
  #header {
    width: 100%;
    margin: 0px auto;
  }
  #headimg {
    position: absolute;
    height: 160px;
    width: 720px;
    left: 50%;
    top: 15px;
    margin-left: -360px;
    z-index: 10;
    pointer-events: none;
    background: url("/imgs/title.png");
  }
  #headclick {
    display: block;
    position: absolute;
    height: 110px;
    width: 670px;
    left: 50%;
    margin-left: -338px;
    top: 28px;
    z-index: 11;
    cursor: pointer;
  }
  #header {
    height: 150px;
    position: relative;
  }
  .mb-logo__text {
    display: block;
  }
}
@media (max-width: 1119px) {
  /*remove sides*/
  .pagepadding {
    width: 100%;
    margin: 0px;
  }
}
@media (max-width: 800px) {
  /*remove index column*/
  #headimg {
    position: absolute;
    height: 110px;
    width: 500px;
    left: 50%;
    top: -9px;
    margin-left: -250px;
    pointer-events: none;
    z-index: 10;
    background: url("/imgs/titlesmall.png");
  }
  #headclick {
    display: block;
    position: absolute;
    height: 70px;
    width: 460px;
    left: 50%;
    margin-left: -230px;
    top: 5px;
    z-index: 11;
    cursor: pointer;
  }
  #header {
    height: 70px;
    position: relative;
  }
  #column1 {
    display: none;
  }
  .closeboxbutton:first-child,
  .displaytogglebutton:first-child {
    margin-right: 20px;
  }
  .backshuffle {
    background-image: url("/imgs/mobileback.png") !important;
    background-size: 300px 300px;
    background-repeat: repeat;
  }
  .active,
  .inactive {
    float: none;
  }
  .linkwrapper {
    float: right;
  }
  .contentsidebox {
    display: none;
  }
  .contentbox {
    margin-left: 0px;
    margin-right: 0px;
  }
  .mb-root {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
  }
  .mb-spacer {
    height: 4em;
  }
  .appframe {
    max-width: 100vw;
  }
  .hasalt1 {
    float: none !important;
    max-width: none !important;
    margin: 0.5em 0 0 !important;
  }
}