/*
 _________        .__                       
\_   ___ \  ____ |  |   ___________  ______
/    \  \/ /  _ \|  |  /  _ \_  __ \/  ___/
\     \___(  <_> )  |_(  <_> )  | \/\___ \ 
 \______  /\____/|____/\____/|__|  /____  >
*/
.hidden {
  opacity: 0;
}
.gameShow {
  opacity: 1 !important;
}
.gameTransition-medium {
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.gameTransition-fast {
  -webkit-transition: opacity 0.25s;
  -moz-transition: opacity 0.25s;
  -o-transition: opacity 0.25s;
  transition: opacity 0.25s;
}
.gameTransition-slow {
  -webkit-transition: opacity 0.75s;
  -moz-transition: opacity 0.75s;
  -o-transition: opacity 0.75s;
  transition: opacity 0.75s;
}
.hiddenForScreneReader {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
#tutorial {
  z-index: 10;
  position: fixed;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-image: url("../Images/STO_InitialScreen.jpg");
}
/*

  _______        _      _____ _         _           
 |__   __|      | |    / ____| |       | |          
    | | _____  _| |_  | (___ | |_ _   _| | ___  ___ 
    | |/ _ \ \/ / __|  \___ \| __| | | | |/ _ \/ __|
    | |  __/>  <| |_   ____) | |_| |_| | |  __/\__ \
    |_|\___/_/\_\\__| |_____/ \__|\__, |_|\___||___/
                                   __/ |            
                                  |___/             
*/
*:focus {
  outline: none;
}
input:focus {
  outline: #ffc600 solid thin;
}
textarea:focus {
  outline: #ffc600 solid thin;
}
a:active {
  background-color: dimgray;
}
html {
  font-family: "Roboto", sans-serif;
  background-color: black;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: default;
}
#stoRoot {
  -moz-user-select: none;
}
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  box-sizing: border-box;
}
ul {
  padding-left: 20px;
  list-style-position: outside;
}
body {
  margin: 0px;
  padding: 0px;
}
#stoRoot {
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}
.error {
  color: white;
  font-size: xx-large;
  font-weight: bold;
  /* center it */
  width: 50%;
  border: 1px solid gray;
  margin: 0 auto;
}
tr {
  border-top: 1px solid white;
  border-collapse: collapse;
}
.newMission {
  color: #00b4ff;
}
.scoreTitle {
  color: #888;
  font-size: 250%;
  margin-bottom: 0.25em;
}
::-webkit-scrollbar {
  display: none;
}
::-webkit-scrollbar {
  display: none;
}
/* Adding styled scrollbars for desktop version */
.desktopVersion #InfoViewContentRight::-webkit-scrollbar,
.desktopVersion #scrollTable::-webkit-scrollbar {
  -webkit-appearance: none;
  display: initial;
  width: 7px;
}
.desktopVersion #InfoViewContentRight::-webkit-scrollbar-thumb,
.desktopVersion #scrollTable::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
* {
  -ms-overflow-style: none;
}
.desktopVersion #InfoViewContentRight,
.desktopVersion #scrollTable {
  -ms-overflow-style: scrollbar;
}
/*

  ____             _                                   _     
 |  _ \           | |                                 | |    
 | |_) | __ _  ___| | ____ _ _ __ ___  _   _ _ __   __| |___ 
 |  _ < / _` |/ __| |/ / _` | '__/ _ \| | | | '_ \ / _` / __|
 | |_) | (_| | (__|   < (_| | | | (_) | |_| | | | | (_| \__ \
 |____/ \__,_|\___|_|\_\__, |_|  \___/ \__,_|_| |_|\__,_|___/
                        __/ |                                
                       |___/                                 

*/
.containerDivOff {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.containerDivOn {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 1;
}
.imagePlus:before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  left: 5%;
}
.imageReplace {
  background-color: transparent;
  border: 0;
  overflow: hidden;
}
.imageReplace:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
  display: -webkit-block;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-block;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-block;
  /* TWEENER - IE 10 */
}
a {
  color: #ffc600;
  text-decoration: inherit;
}
h1,
h2,
h3 {
  color: #ffc600;
}
h3 {
  font-size: 1.125em;
}
h2 {
  font-size: 1.25em;
}
h1 {
  font-size: 1.5em;
}
.italic {
  font-style: italic;
}
/* EM queries set us up the size! */
html {
  font-size: 14pt;
  line-height: 1.2em;
}
@media only screen and (max-height: 959px) {
  html {
    font-size: 12pt;
  }
}
/*
  _____                    
 |_   _|                   
   | |  ___ ___  _ __  ___ 
   | | / __/ _ \| '_ \/ __|
  _| || (_| (_) | | | \__ \
 |_____\___\___/|_| |_|___/

*/
.facebookButton,
.fbButton {
  background-image: url("../Images/STO_Btn-Social-Share@2x.png");
  background-size: cover;
  width: 108px;
  height: 42px;
  display: inline-block;
  margin: 4px;
}
.twitterButton {
  background-image: url("../Images/STO_Btn-Social-Tweet@2x.png");
  background-size: cover;
  width: 108px;
  height: 42px;
  display: inline-block;
  margin: 4px;
}
.figure .figureImage {
  max-width: 100%;
  max-height: 100%;
  cursor: zoom-in;
}
.figure .figureZoom {
  position: relative;
  bottom: 2.5em;
  left: 0.5em;
  background-image: url(../Images/STO_Btn-Enlarge_Small.png);
  background-size: cover;
  width: 28px;
  height: 28px;
  margin-bottom: -4em;
  cursor: zoom-in;
}
.figure .captionText {
  position: relative;
  top: 2.4em;
  color: white;
  font-size: 0.9em;
}
.scrollview {
  position: absolute;
  overflow: auto;
}
.scrollable .scrollview {
  border-right: 2.5px solid rgba(6, 64, 96, 0.6);
  padding-right: 0.5em;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateZ(0px);
  overflow-y: scroll !important;
}
.f-y-hidescroll .scrollable .scrollview {
  padding-right: 0.25em;
}
.scrollUp,
.scrollDown {
  position: absolute;
  display: none;
  background-size: cover;
  width: 44px;
  height: 44px;
}
.scrollUp {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-scroll-up@2x.png');
  cursor: pointer;
}
.scrollDown {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-scroll-down@2x.png');
  cursor: pointer;
}
.scrollable .scrollUp,
.scrollable .scrollDown {
  display: inline-block;
}
.scrollable.scrollAtTop .scrollUp {
  display: none;
}
.scrollable.scrollAtBottom .scrollDown {
  display: none;
}
/*

               _     _                                     _       
     /\       | |   (_)                                   | |      
    /  \   ___| |__  _  _____   _____ _ __ ___   ___ _ __ | |_ ___ 
   / /\ \ / __| '_ \| |/ _ \ \ / / _ \ '_ ` _ \ / _ \ '_ \| __/ __|
  / ____ \ (__| | | | |  __/\ V /  __/ | | | | |  __/ | | | |_\__ \
 /_/    \_\___|_| |_|_|\___| \_/ \___|_| |_| |_|\___|_| |_|\__|___/
                                                                   
*/
/*
  _                     __  __ _      _           
 | |                   |  \/  (_)    (_)          
 | |     ___  ___ ___  | \  / |___  ___ _ __  ___ 
 | |    / _ \/ __/ __| | |\/| | \ \/ / | '_ \/ __|
 | |___|  __/\__ \__ \ | |  | | |>  <| | | | \__ \
 |______\___||___/___/ |_|  |_|_/_/\_\_|_| |_|___/
                                                  
                                                  
*/
/*
                 _                 _   _                 
     /\         (_)               | | (_)                
    /  \   _ __  _ _ __ ___   __ _| |_ _  ___  _ __  ___ 
   / /\ \ | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \/ __|
  / ____ \| | | | | | | | | | (_| | |_| | (_) | | | \__ \
 /_/    \_\_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|___/
                                                         
                                                         
*/
.darken {
  transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-animation-name: fadeToDark;
  -moz-animation-name: fadeToDark;
  -ms-animation-name: fadeToDark;
  -o-animation-name: fadeToDark;
  animation-name: fadeToDark;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
.brighten {
  transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-animation-name: fadeToBright;
  -moz-animation-name: fadeToBright;
  -ms-animation-name: fadeToBright;
  -o-animation-name: fadeToBright;
  animation-name: fadeToBright;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
.fadeIn 0% {
  opacity: 0;
}
.fadeIn 100% {
  opacity: 1;
}
.fadeOut 0% {
  opacity: 1;
}
.fadeOut 100% {
  opacity: 0;
}
.fadeToDark 0% {
  opacity: 1;
}
.fadeToDark 100% {
  opacity: 0.5;
  background-color: black;
}
.fadeToBright 0% {
  opacity: 0.5;
}
.fadeToBright 100% {
  opacity: 1;
  background-color: transparent;
}
@keyframes newFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes newFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeToDark {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
    background-color: black;
  }
}
@keyframes fadeToBright {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    background-color: transparent;
  }
}
@-webkit-keyframes newFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes newFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeToDark {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
    background-color: black;
  }
}
@-webkit-keyframes fadeToBright {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    background-color: transparent;
  }
}
@-moz-keyframes newFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes newFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fadeToDark {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
    background-color: black;
  }
}
@-moz-keyframes fadeToBright {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    background-color: transparent;
  }
}
@-ms-keyframes newFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes newFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes fadeToDark {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
    background-color: black;
  }
}
@-ms-keyframes fadeToBright {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    background-color: transparent;
  }
}
@-o-keyframes newFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes newFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fadeToDark {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
    background-color: black;
  }
}
@-o-keyframes fadeToBright {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    background-color: transparent;
  }
}
.missionContent {
  height: 100%;
  color: white;
  position: relative;
  margin: 0 2em;
}
@media only screen and (max-height: 659px) {
  .missionContent {
    margin: 0 1em;
  }
}
.columnLeft {
  position: absolute;
  left: 0;
  height: 100%;
  width: 73%;
}
@media only screen and (max-aspect-ratio: 4/3) {
  .columnLeft {
    width: 76%;
  }
}
@media only screen and (min-aspect-ratio: 16/9) {
  .columnLeft {
    width: 67%;
  }
}
.columnLeft h1.title {
  line-height: 100%;
  padding: 2em 0 0;
  width: inherit;
  margin: 0;
  font-size: 1.25em;
  padding: 2em 0 1em;
}
@media only screen and (max-height: 659px) {
  .columnLeft h1.title {
    padding: 1em 0 0.5em;
  }
}
.columnLeft .scrollview {
  position: absolute;
  top: 3em;
  width: 90%;
  height: 82%;
  color: white;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateZ(0px);
  overflow-y: scroll !important;
}
@media only screen and (max-height: 659px) {
  .columnLeft .scrollview {
    top: 1.5em;
  }
}
.columnLeft .scrollview > *:first-child {
  margin: 0;
}
.columnLeft .buttonWrap {
  position: absolute;
  padding: 2em 0;
  bottom: 0;
}
@media only screen and (max-height: 659px) {
  .columnLeft .buttonWrap {
    padding: 1em 0;
  }
}
.columnRight {
  position: absolute;
  right: 0;
  height: 100%;
  vertical-align: top;
  padding: 2em 0;
  width: 27%;
}
@media only screen and (max-height: 659px) {
  .columnRight {
    padding: 1em 0;
  }
}
@media only screen and (max-aspect-ratio: 4/3) {
  .columnRight {
    width: 24%;
  }
}
@media only screen and (min-aspect-ratio: 16/9) {
  .columnRight {
    width: 33%;
  }
}
.columnRight .figure {
  padding: 0 0 1em;
}
@media only screen and (max-height: 659px) {
  .columnRight .figure {
    padding: 1em 0 0.5em;
  }
}
.columnRight .captionImage {
  max-width: 100%;
}
#DebugView {
  position: absolute;
  width: 10em;
  max-height: 10em;
  bottom: 0;
  right: 0;
  border: aliceblue 2px solid;
  opacity: 0.75;
  color: white;
  padding: 4px;
  pointer-events: none;
  background: darkblue;
}
#DebugView .recentEvent,
#DebugView .lowMem {
  background: maroon;
}
#DebugView .size {
  display: inline-block;
}
#DebugView .back {
  cursor: pointer;
  pointer-events: all;
}
/*
  _____                           _   _           
 |  __ \                         | | (_)          
 | |__) | __ ___  _ __   ___ _ __| |_ _  ___  ___ 
 |  ___/ '__/ _ \| '_ \ / _ \ '__| __| |/ _ \/ __|
 | |   | | | (_) | |_) |  __/ |  | |_| |  __/\__ \
 |_|   |_|  \___/| .__/ \___|_|   \__|_|\___||___/
                 | |                              
                 |_|                              
*/
.launchScreen {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  opacity: 1;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.backgroundMain {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  opacity: 1;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position-y: 65%;
}
.backgroundMain.fade {
  opacity: 1;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
  opacity: 0;
}
.launchScreen {
  background-image: url(../Images/16x10/Small/LoadingScreen/STO_LaunchScreen-SmallLandscape.png);
}
.backgroundMain {
  background-image: url(../Images/16x10/Small/Background/STO_AppBG_DNA-3D-Strands.png);
}
.backgroundMain.level1 {
  background-image: url(../Images/level1_back.jpg);
}
.backgroundMain.level2 {
  background-image: url(../Images/level2_back.jpg);
}
/*@media @mq4x3 { 
    .launchScreen { 
        background-image: url(../Images/4x3/Small/LoadingScreen/STO_LaunchScreen-Landscape.png); }
    .backgroundMain { 
        background-image: url(../Images/4x3/Small/Background/STO_AppBG_DNA-3D-Strands.png); } }

@media @mq16x9 { 
     .launchScreen { 
        background-image: url(../Images/16x9/Small/LoadingScreen/STO_LaunchScreen-SmallLandscape.png); }
     .backgroundMain { 
        background-image: url(../Images/16x9/Small/Background/STO_AppBG_DNA-3D-Strands.png);  } }
*/
/*
                 _                 _   _                 
     /\         (_)               | | (_)                
    /  \   _ __  _ _ __ ___   __ _| |_ _  ___  _ __  ___ 
   / /\ \ | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \/ __|
  / ____ \| | | | | | | | | | (_| | |_| | (_) | | | \__ \
 /_/    \_\_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|___/
                                                         
                                                         
*/
.backgroundMain.reveal {
  opacity: 0;
  transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-animation-name: newFadeIn;
  -moz-animation-name: newFadeIn;
  -ms-animation-name: newFadeIn;
  -o-animation-name: newFadeIn;
  animation-name: newFadeIn;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -ms-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
/*
  _____                           _   _           
 |  __ \                         | | (_)          
 | |__) | __ ___  _ __   ___ _ __| |_ _  ___  ___ 
 |  ___/ '__/ _ \| '_ \ / _ \ '__| __| |/ _ \/ __|
 | |   | | | (_) | |_) |  __/ |  | |_| |  __/\__ \
 |_|   |_|  \___/| .__/ \___|_|   \__|_|\___||___/
                 | |                              
                 |_|                              
*/
#TitleView {
  height: 100%;
}
.appTitle {
  position: absolute;
  width: 100%;
  height: 29.8%;
  left: 0%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top;
  color: white;
}
@media only screen and (max-height: 659px) {
  .appTitle {
    bottom: 0.5em;
  }
}
.appTitle.level {
  background-image: url('../Images/16x10/Small/Title/STO_TitleBG-OverlaySmall.png');
}
.appTitle.level1 {
  background-image: url('../Images/STO_TitleBG-Overlay_level1.png');
}
.appTitle.level2 {
  background-image: url('../Images/STO_TitleBG-Overlay_level2.png');
}
.appTitle.fade {
  opacity: 1;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
  opacity: 0;
}
.appTitle .titleMain {
  position: absolute;
  text-align: center;
  width: 67.5%;
  height: 100%;
}
.appTitle .tapOrb,
.appTitle .becomeDetective {
  text-transform: uppercase;
  margin-bottom: 2em;
  font-weight: bold;
}
.appTitle .tapOrb {
  text-shadow: 0px 0px 4px #000;
}
@media only screen and (max-height: 659px) {
  .appTitle .tapOrb {
    margin-bottom: 1em;
  }
}
.appTitle .becomeDetective {
  color: #00b4ff;
}
.appTitle .textTitle {
  background-image: url('../Images/STO_Title-Large.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 40%;
  height: 50%;
  display: inline-block;
  margin: 1em;
  /*@media @mqS {
            background-image: url('../Images/STO_Title-Medium.png');
            width: 288px;
            height: 52px;
        }
        @media @mqXXS {
            background-image: url('../Images/STO_Title-Small.png');
            width: 192px;
            height: 35px;
        }*/
}
@media only screen and (max-height: 799px) {
  .appTitle .textTitle {
    margin: 0.5em;
  }
}
@media only screen and (max-height: 719px) {
  .appTitle .textTitle {
    margin-bottom: 0;
  }
}
.appTitle .titleDetails {
  position: absolute;
  right: 13%;
  width: 30%;
  height: 80%;
  top: 0%;
}
.appTitle .titleDetails .heading {
  margin: 2em 0 .5em 0;
}
@media only screen and (max-height: 659px) {
  .appTitle .titleDetails .heading {
    margin: 1em 0 .5em 0;
  }
}
@media only screen and (max-height: 479px) {
  .appTitle .titleDetails .heading {
    margin-top: 0;
  }
}
.appTitle .titleDetails .iconCDC {
  position: absolute;
  right: -25%;
  bottom: 20px;
}
@media only screen and (max-height: 659px) {
  .appTitle .titleDetails {
    font-size: 90%;
  }
}
@media only screen and (max-height: 559px) {
  .appTitle .titleDetails {
    font-size: 80%;
  }
}
.appTitle .definitionTerm {
  font-weight: bold;
}
.appTitle .pronounce {
  color: #ffc600;
  margin-left: 12px;
}
.appTitle .iconCDC {
  background-image: url('../Images/STO_Logo_CDC_Large.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 65px;
  height: 41px;
}
.appTitle.level .titleDetails {
  top: 7%;
}
.appTitle.level2 .titleDetails {
  top: 7%;
}
*.appTitle {
  bottom: 2em;
}
@media only screen and (max-height: 799px) {
  *.appTitle {
    bottom: 1.5em;
  }
}
@media only screen and (max-height: 719px) {
  *.appTitle {
    bottom: 1em;
  }
}
@media only screen and (max-height: 659px) {
  *.appTitle {
    bottom: 0.5em;
  }
}
/*.overlayTitle {
    @media @mq4x3 {
        background-image: url('../Images/4x3/Small/Title/STO_TitleBG-Overlay.png');
    }
    @media @mq16x9 {
        background-image: url('../Images/16x9/Small/Title/STO_TitleBG-OverlaySmall.png');
    }
}*/
/*
                 _                 _   _                 
     /\         (_)               | | (_)                
    /  \   _ __  _ _ __ ___   __ _| |_ _  ___  _ __  ___ 
   / /\ \ | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \/ __|
  / ____ \| | | | | | | | | | (_| | |_| | (_) | | | \__ \
 /_/    \_\_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|___/
                                                         
                                                         
*/
#TitleView.reveal,
#TitleView.reveal .appTitle > * {
  opacity: 1;
}
#TitleView.defaultTransition {
  -webkit-transition: opacity 10ms 1s;
  -moz-transition: opacity 10ms 1s;
  -o-transition: opacity 10ms 1s;
  transition: opacity 10ms 1s;
}
#TitleView.slow .appTitle > * {
  -webkit-transition: opacity 2s 6s;
  -moz-transition: opacity 2s 6s;
  -o-transition: opacity 2s 6s;
  transition: opacity 2s 6s;
}
#TitleView.fast .appTitle > * {
  -webkit-transition: opacity 2s 1s;
  -moz-transition: opacity 2s 1s;
  -o-transition: opacity 2s 1s;
  transition: opacity 2s 1s;
}
/*
  _____                           _   _           
 |  __ \                         | | (_)          
 | |__) | __ ___  _ __   ___ _ __| |_ _  ___  ___ 
 |  ___/ '__/ _ \| '_ \ / _ \ '__| __| |/ _ \/ __|
 | |   | | | (_) | |_) |  __/ |  | |_| |  __/\__ \
 |_|   |_|  \___/| .__/ \___|_|   \__|_|\___||___/
                 | |                              
                 |_|                              
*/
#DroptabView {
  pointer-events: none;
  position: absolute;
  right: 0px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: bottom;
  color: white;
  width: 100%;
  height: 100%;
  bottom: 100%;
  overflow: visible;
}
.popTop #DroptabView {
  z-index: 1;
}
#DroptabView .window > * {
  pointer-events: all;
}
#DroptabView .backdrop {
  -webkit-transition: opacity 1s ease 0s, height 0s 1s, -webkit-transform 0s 1s;
  -moz-transition: opacity 1s ease 0s, height 0s 1s, -moz-transform 0s 1s;
  -o-transition: opacity 1s ease 0s, height 0s 1s, -o-transform 0s 1s;
  transition: opacity 1s ease 0s, height 0s 1s,-webkit-transform 0s 1s,-moz-transform 0s 1s,-o-transform 0s 1s,transform 0s 1s;
  position: absolute;
  width: 100%;
  height: 0%;
  background: black;
  opacity: 0;
}
#DroptabView .window {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: translateY(8%);
  -moz-transform: translateY(8%);
  -o-transform: translateY(8%);
  -ms-transform: translateY(8%);
  transform: translateY(8%);
  z-index: 1;
}
#DroptabView .tab {
  pointer-events: none;
  position: absolute;
  right: 0px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  background-image: url(../Images/16x10/Small/Tabs/STO_TabBG-247.png);
  width: 100%;
  height: 100%;
}
#DroptabView .cdc247Image {
  position: absolute;
  width: 18.48958%;
  height: 7.07398912%;
  top: 92%;
  left: 73%;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../Images/16x10/Small/Logo/STO_Logo_CDC-24-7Small.png);
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -o-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
}
#DroptabView .clickAreaDropTab_open {
  pointer-events: all;
  position: absolute;
  width: 100%;
  height: 15%;
  top: 85%;
  left: 0%;
  cursor: pointer;
}
#DroptabView .clickAreaDropTab_closed {
  pointer-events: all;
  position: absolute;
  width: 27.5%;
  height: 15%;
  top: 85%;
  left: 67.5%;
  cursor: pointer;
}
#DroptabView .content {
  pointer-events: none;
  margin: 2em;
  position: relative;
  height: 75%;
}
@media only screen and (max-height: 659px) {
  #DroptabView .content {
    margin: 1em;
    height: 80%;
  }
}
@media only screen and (max-height: 559px) {
  #DroptabView .content {
    height: 83%;
  }
}
#DroptabView .textContent {
  pointer-events: all;
  position: absolute;
  width: 60%;
  height: 90%;
  overflow: auto;
  bottom: 13%;
}
#DroptabView .videoContent {
  pointer-events: all;
  min-width: 332px;
  position: absolute;
  right: 1em;
}
@media only screen and (max-height: 659px) {
  #DroptabView .videoContent {
    right: 0;
  }
}
@media only screen and (max-height: 479px) {
  #DroptabView .videoContent {
    top: -4em;
  }
}
#DroptabView .learnMoreCDC,
#DroptabView .readOurBlog {
  width: 320px;
  height: 42px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  margin: 1em;
}
#DroptabView .learnMoreCDC {
  background-image: url('../Images/STO_Btn-LearnMore-CDC247@2x.png');
}
#DroptabView .readOurBlog {
  background-image: url('../Images/STO_Btn-ReadOurBlog@2x.png');
}
#DroptabView .youtubeEmbed {
  position: absolute;
  width: 25%;
  height: 25%;
  top: 0%;
  left: 75%;
}
#DroptabView .videoOffline {
  background-image: url(../Images/STO_img_CDC-24-7-error@2x.png);
  height: 188px;
  width: 332px;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
}
#DroptabView .cdc_24x7_youtube_video {
  height: 188px;
  width: 332px;
  pointer-events: all;
}
#DroptabView .cdc247ImageLarge {
  margin: 1em 2em;
  background-image: url(../Images/16x10/Small/Logo/STO_Logo_CDC-24-7XSmall.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 388px;
  height: 84px;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
}
@media only screen and (max-height: 659px) {
  #DroptabView .cdc247ImageLarge {
    margin: 0.75em;
    width: 194px;
    height: 42px;
  }
}
#DroptabView .caption {
  text-align: center;
}
#DroptabView div#player247 {
  width: 332px;
  height: 188px;
}
@media only screen and (max-aspect-ratio: 4/3) {
  #DroptabView #DroptabView {
    background-image: url(../Images/4x3/Small/Tabs/STO_TabBG-247.png);
  }
  #DroptabView .cdc247Image {
    background-image: url(../Images/4x3/Small/Logo/STO_Logo_CDC-24-7.png);
  }
}
@media only screen and (min-aspect-ratio: 16/9) {
  #DroptabView #DroptabView {
    background-image: url(../Images/16x9/Small/Tabs/STO_TabBG-247.png);
  }
  #DroptabView .cdc247Image {
    background-image: url(../Images/16x9/Small/Logo/STO_Logo_CDC-24-7.png);
  }
}
/*
                 _                 _   _                 
     /\         (_)               | | (_)                
    /  \   _ __  _ _ __ ___   __ _| |_ _  ___  _ __  ___ 
   / /\ \ | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \/ __|
  / ____ \| | | | | | | | | | (_| | |_| | (_) | | | \__ \
 /_/    \_\_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|___/
                                                         
                                                         
*/
.defaultDropTabTransition .window {
  -webkit-transition: -webkit-transform 1s ease-in-out;
  -moz-transition: -moz-transform 1s ease-in-out;
  -o-transition: -o-transform 1s ease-in-out;
  transition: -webkit-transform 1s ease-in-out,-moz-transform 1s ease-in-out,-o-transform 1s ease-in-out,transform 1s ease-in-out;
}
#DroptabView.open {
  pointer-events: all;
  z-index: 10;
}
#DroptabView.open .window {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -o-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}
#DroptabView.open .backdrop {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
  height: 100%;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -o-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 0.75;
}
#DroptabView.disabled {
  z-index: 10;
}
.droptabShow 0% {
  top: -92%;
}
.droptabShow 100% {
  top: 0%;
}
.droptabHide 0% {
  top: 0%;
}
.droptabHide 100% {
  top: -92%;
}
@keyframes droptabShow {
  0% {
    top: -92%;
  }
  100% {
    top: 0%;
  }
}
@-webkit-keyframes droptabShow {
  0% {
    top: -92%;
  }
  100% {
    top: 0%;
  }
}
@-moz-keyframes droptabShow {
  0% {
    top: -92%;
  }
  100% {
    top: 0%;
  }
}
@-ms-keyframes droptabShow {
  0% {
    top: -92%;
  }
  100% {
    top: 0%;
  }
}
@-o-keyframes droptabShow {
  0% {
    top: -92%;
  }
  100% {
    top: 0%;
  }
}
@keyframes droptabHide {
  0% {
    top: 0%;
  }
  100% {
    top: -92%;
  }
}
@-webkit-keyframes droptabHide {
  0% {
    top: 0%;
  }
  100% {
    top: -92%;
  }
}
@-moz-keyframes droptabHide {
  0% {
    top: 0%;
  }
  100% {
    top: -92%;
  }
}
@-ms-keyframes droptabHide {
  0% {
    top: 0%;
  }
  100% {
    top: -92%;
  }
}
@-o-keyframes droptabHide {
  0% {
    top: 0%;
  }
  100% {
    top: -92%;
  }
}
/*
  _____                           _   _           
 |  __ \                         | | (_)          
 | |__) | __ ___  _ __   ___ _ __| |_ _  ___  ___ 
 |  ___/ '__/ _ \| '_ \ / _ \ '__| __| |/ _ \/ __|
 | |   | | | (_) | |_) |  __/ |  | |_| |  __/\__ \
 |_|   |_|  \___/| .__/ \___|_|   \__|_|\___||___/
                 | |                              
                 |_|                              
*/
.aftvMix {
  top: -81.7%;
  position: absolute;
  width: 100%;
  height: 81.7%;
  left: 0%;
  pointer-events: none;
}
#ApplicationFrameTopView {
  top: -81.7%;
  position: absolute;
  width: 100%;
  height: 81.7%;
  left: 0%;
  pointer-events: none;
  opacity: 1;
}
.popTop #ApplicationFrameTopView {
  z-index: 1;
}
#FakeTopView {
  top: -81.7%;
  position: absolute;
  width: 100%;
  height: 81.7%;
  left: 0%;
  pointer-events: none;
}
#ApplicationFrameTopView {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: bottom;
  background-image: url(../Images/16x10/Small/Tabs/STO_TabBG-Top.png);
}
/*
                 _                 _   _                 
     /\         (_)               | | (_)                
    /  \   _ __  _ _ __ ___   __ _| |_ _  ___  _ __  ___ 
   / /\ \ | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \/ __|
  / ____ \| | | | | | | | | | (_| | |_| | (_) | | | \__ \
 /_/    \_\_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|___/
                                                         
                                                         
*/
#ApplicationFrameTopView.topFromOff {
  top: -75%;
  transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-animation-name: topFromOff;
  -moz-animation-name: topFromOff;
  -ms-animation-name: topFromOff;
  -o-animation-name: topFromOff;
  animation-name: topFromOff;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -ms-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
#ApplicationFrameTopView.topFromTitle {
  top: 0%;
  transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-animation-name: topFromTitle;
  -moz-animation-name: topFromTitle;
  -ms-animation-name: topFromTitle;
  -o-animation-name: topFromTitle;
  animation-name: topFromTitle;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -ms-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
#ApplicationFrameTopView.titleFromOff {
  top: -75%;
  transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-animation-name: titleFromOff;
  -moz-animation-name: titleFromOff;
  -ms-animation-name: titleFromOff;
  -o-animation-name: titleFromOff;
  animation-name: titleFromOff;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -ms-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
#ApplicationFrameTopView.titleFromTop {
  top: -58%;
  transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-animation-name: titleFromTop;
  -moz-animation-name: titleFromTop;
  -ms-animation-name: titleFromTop;
  -o-animation-name: titleFromTop;
  animation-name: titleFromTop;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -ms-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
#ApplicationFrameTopView.offFromTop {
  top: -58%;
  transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-animation-name: offFromTop;
  -moz-animation-name: offFromTop;
  -ms-animation-name: offFromTop;
  -o-animation-name: offFromTop;
  animation-name: offFromTop;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -ms-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
#ApplicationFrameTopView.offFromTitle {
  top: 0%;
  transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-animation-name: offFromTitle;
  -moz-animation-name: offFromTitle;
  -ms-animation-name: offFromTitle;
  -o-animation-name: offFromTitle;
  animation-name: offFromTitle;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -ms-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
.topFromOff 0% {
  top: -75%;
}
.topFromOff 100% {
  top: -58%;
}
.topFromTitle 0% {
  top: 0%;
}
.topFromTitle 100% {
  top: -58%;
}
.titleFromOff 0% {
  top: -75%;
}
.titleFromOff 100% {
  top: 0%;
}
.titleFromTop 0% {
  top: -58%;
}
.titleFromTop 100% {
  top: 0%;
}
.offFromTop 0% {
  top: -58%;
}
.offFromTop 100% {
  top: -75%;
}
.offFromTitle 0% {
  top: 0%;
}
.offFromTitle 100% {
  top: -75%;
}
@keyframes topFromOff {
  0% {
    top: -75%;
  }
  100% {
    top: -58%;
  }
}
@-webkit-keyframes topFromOff {
  0% {
    top: -75%;
  }
  100% {
    top: -58%;
  }
}
@-moz-keyframes topFromOff {
  0% {
    top: -75%;
  }
  100% {
    top: -58%;
  }
}
@-ms-keyframes topFromOff {
  0% {
    top: -75%;
  }
  100% {
    top: -58%;
  }
}
@-o-keyframes topFromOff {
  0% {
    top: -75%;
  }
  100% {
    top: -58%;
  }
}
@keyframes topFromTitle {
  0% {
    top: 0%;
  }
  100% {
    top: -58%;
  }
}
@-webkit-keyframes topFromTitle {
  0% {
    top: 0%;
  }
  100% {
    top: -58%;
  }
}
@-moz-keyframes topFromTitle {
  0% {
    top: 0%;
  }
  100% {
    top: -58%;
  }
}
@-ms-keyframes topFromTitle {
  0% {
    top: 0%;
  }
  100% {
    top: -58%;
  }
}
@-o-keyframes topFromTitle {
  0% {
    top: 0%;
  }
  100% {
    top: -58%;
  }
}
@keyframes titleFromOff {
  0% {
    top: -75%;
  }
  100% {
    top: 0%;
  }
}
@-webkit-keyframes titleFromOff {
  0% {
    top: -75%;
  }
  100% {
    top: 0%;
  }
}
@-moz-keyframes titleFromOff {
  0% {
    top: -75%;
  }
  100% {
    top: 0%;
  }
}
@-ms-keyframes titleFromOff {
  0% {
    top: -75%;
  }
  100% {
    top: 0%;
  }
}
@-o-keyframes titleFromOff {
  0% {
    top: -75%;
  }
  100% {
    top: 0%;
  }
}
@keyframes titleFromTop {
  0% {
    top: -58%;
  }
  100% {
    top: 0%;
  }
}
@-webkit-keyframes titleFromTop {
  0% {
    top: -58%;
  }
  100% {
    top: 0%;
  }
}
@-moz-keyframes titleFromTop {
  0% {
    top: -58%;
  }
  100% {
    top: 0%;
  }
}
@-ms-keyframes titleFromTop {
  0% {
    top: -58%;
  }
  100% {
    top: 0%;
  }
}
@-o-keyframes titleFromTop {
  0% {
    top: -58%;
  }
  100% {
    top: 0%;
  }
}
@keyframes offFromTop {
  0% {
    top: -58%;
  }
  100% {
    top: -75%;
  }
}
@-webkit-keyframes offFromTop {
  0% {
    top: -58%;
  }
  100% {
    top: -75%;
  }
}
@-moz-keyframes offFromTop {
  0% {
    top: -58%;
  }
  100% {
    top: -75%;
  }
}
@-ms-keyframes offFromTop {
  0% {
    top: -58%;
  }
  100% {
    top: -75%;
  }
}
@-o-keyframes offFromTop {
  0% {
    top: -58%;
  }
  100% {
    top: -75%;
  }
}
@keyframes offFromTitle {
  0% {
    top: 0%;
  }
  100% {
    top: -75%;
  }
}
@-webkit-keyframes offFromTitle {
  0% {
    top: 0%;
  }
  100% {
    top: -75%;
  }
}
@-moz-keyframes offFromTitle {
  0% {
    top: 0%;
  }
  100% {
    top: -75%;
  }
}
@-ms-keyframes offFromTitle {
  0% {
    top: 0%;
  }
  100% {
    top: -75%;
  }
}
@-o-keyframes offFromTitle {
  0% {
    top: 0%;
  }
  100% {
    top: -75%;
  }
}
/*
  _____                           _   _           
 |  __ \                         | | (_)          
 | |__) | __ ___  _ __   ___ _ __| |_ _  ___  ___ 
 |  ___/ '__/ _ \| '_ \ / _ \ '__| __| |/ _ \/ __|
 | |   | | | (_) | |_) |  __/ |  | |_| |  __/\__ \
 |_|   |_|  \___/| .__/ \___|_|   \__|_|\___||___/
                 | |                              
                 |_|                              
*/
#ApplicationFrameBottomView {
  position: absolute;
  width: 100%;
  height: 41.15%;
  top: 100%;
  left: 0%;
  background-repeat: no-repeat;
  background-size: 100% 316px;
  pointer-events: all;
}
#FakeBottomView {
  position: absolute;
  width: 100%;
  height: 41.15%;
  top: 100%;
  left: 0%;
  background-repeat: no-repeat;
  background-size: 100% 316px;
  pointer-events: none;
}
.applicationFrameDefaultTransition {
  -webkit-transition: -webkit-transform 1s ease-in-out;
  -moz-transition: -moz-transform 1s ease-in-out;
  -o-transition: -o-transform 1s ease-in-out;
  transition: -webkit-transform 1s ease-in-out,-moz-transform 1s ease-in-out,-o-transform 1s ease-in-out,transform 1s ease-in-out;
}
.fakeDefaultTransition {
  -webkit-transition: -webkit-transform 0s ease-in-out;
  -moz-transition: -moz-transform 0s ease-in-out;
  -o-transition: -o-transform 0s ease-in-out;
  transition: -webkit-transform 0s ease-in-out,-moz-transform 0s ease-in-out,-o-transform 0s ease-in-out,transform 0s ease-in-out;
}
#ApplicationFrameBottomView {
  background-image: url(../Images/16x10/Small/Tabs/STO_TabBG-Bottom.png);
}
@media only screen and (max-aspect-ratio: 4/3) {
  #ApplicationFrameBottomView {
    background-image: url(../Images/4x3/Small/Tabs/STO_TabBG-Bottom.png);
  }
}
@media only screen and (min-aspect-ratio: 16/9) {
  #ApplicationFrameBottomView {
    background-image: url(../Images/16x9/Small/Tabs/STO_TabBG-Bottom.png);
  }
}
/*#ApplicationFrameBottomView {
    .transform(translateY(-4em));

    @media @mqL {
        .transform(translateY(-3.5em));
    }
    
    @media @mqM {
        .transform(translateY(-3em));
    }
    
    @media @mqS {
        .transform(translateY(-2.5em));
    }
}

#FakeBottomView {
    .transform(translateY(-4em));

    @media @mqL {
        .transform(translateY(-3.5em));
    }
    
    @media @mqM {
        .transform(translateY(-3em));
    }
    
    @media @mqS {
        .transform(translateY(-2.5em));
    }
}*/
/*
  _          _       __ _             
 | |        (_)     / _(_)            
 | |__  _ __ _  ___| |_ _ _ __   __ _ 
 | '_ \| '__| |/ _ \  _| | '_ \ / _` |
 | |_) | |  | |  __/ | | | | | | (_| |
 |_.__/|_|  |_|\___|_| |_|_| |_|\__, |
                                 __/ |
                                |___/ 
*/
#BriefingView {
  height: 100%;
  color: white;
  position: relative;
  margin: 0 2em;
}
@media only screen and (max-height: 659px) {
  #BriefingView {
    margin: 0 1em;
  }
}
#BriefingView #objectivesImageLeft {
  float: left;
  width: 85px;
  height: 112px;
}
#BriefingView .startButton {
  pointer-events: all;
  background-image: url("../Images/STO_Btn-AcceptMission.png");
  background-size: cover;
  width: 215px;
  height: 42px;
  display: inline-block;
  margin-left: 1em;
}
#BriefingView #objectivesTextRight ul {
  padding-left: 7em;
}
@media only screen and (min-width: 1200px) {
  #BriefingView .scrollview {
    font-size: 1.1em;
  }
}
/*
  _____                           _   _           
 |  __ \                         | | (_)          
 | |__) | __ ___  _ __   ___ _ __| |_ _  ___  ___ 
 |  ___/ '__/ _ \| '_ \ / _ \ '__| __| |/ _ \/ __|
 | |   | | | (_) | |_) |  __/ |  | |_| |  __/\__ \
 |_|   |_|  \___/| .__/ \___|_|   \__|_|\___||___/
                 | |                              
                 |_|                              
*/
#ArcLayerView {
  cursor: e-resize;
}
#ArcLayerView #homeButton {
  position: fixed;
  top: 5px;
  left: 0px;
  width: 80px;
  height: 50px;
  text-align: right;
  color: #c8c8c8;
  z-index: 2;
  border-right: 1px solid #c8c8c8;
  padding-right: 10px;
  cursor: pointer;
}
#ArcLayerView #homeImg {
  height: 25px;
  width: 45px;
  float: right;
  background-image: url(../Images/16x10/Large/Icons/STO_ico-Home_Large.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#ArcLayerView #arcHeader {
  color: white;
  top: 15px;
  left: 90px;
  position: fixed;
  font-size: 24px;
  z-index: 1;
}
.layerArcs {
  position: absolute;
  bottom: 8em;
  width: 100%;
  height: 90%;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
}
@media only screen and (max-height: 559px) {
  .layerArcs {
    bottom: 7.5em;
    height: 80%;
  }
}
@media only screen and (max-height: 479px) {
  .layerArcs {
    bottom: 7em;
  }
}
.layerArcs::-webkit-scrollbar {
  width: 0 !important;
}
.defaultArcTransition .arc {
  -webkit-transition: -webkit-transform 1s ease-in-out, opacity 0.5s;
  -moz-transition: -moz-transform 1s ease-in-out, opacity 0.5s;
  -o-transition: -o-transform 1s ease-in-out, opacity 0.5s;
  transition: -webkit-transform 1s ease-in-out,-moz-transform 1s ease-in-out,-o-transform 1s ease-in-out,transform 1s ease-in-out, opacity 0.5s;
  -webkit-transition-delay: 2s, 0s;
  -moz-transition-delay: 2s, 0s;
  -o-transition-delay: 2s, 0s;
  transition-delay: 2s, 0s;
}
.fastArcTransition .arc {
  opacity: 1;
  -webkit-transition: opacity 1s ease-in-out, opacity 0.5s;
  -moz-transition: opacity 1s ease-in-out, opacity 0.5s;
  -o-transition: opacity 1s ease-in-out, opacity 0.5s;
  transition: opacity 1s ease-in-out, opacity 0.5s;
  -webkit-transition-delay: 0.5s, 0s;
  -moz-transition-delay: 0.5s, 0s;
  -o-transition-delay: 0.5s, 0s;
  transition-delay: 0.5s, 0s;
}
.arc.translateOut {
  -webkit-transition: -webkit-transform 1s ease-in-out;
  -moz-transition: -moz-transform 1s ease-in-out;
  -o-transition: -o-transform 1s ease-in-out;
  transition: -webkit-transform 1s ease-in-out,-moz-transform 1s ease-in-out,-o-transform 1s ease-in-out,transform 1s ease-in-out;
  -webkit-transform: translateX(0px) !important;
  -moz-transform: translateX(0px) !important;
  -o-transform: translateX(0px) !important;
  -ms-transform: translateX(0px) !important;
  transform: translateX(0px) !important;
}
.arc {
  position: absolute;
  top: 50%;
  left: -15%;
  opacity: 1;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transition: opacity 0.5s 0s;
  -moz-transition: opacity 0.5s 0s;
  -o-transition: opacity 0.5s 0s;
  transition: opacity 0.5s 0s;
  width: 93px;
  height: 563px;
  margin: -282px 0;
  background-image: url('../Images/4x3/Small/Arcs/STO_Arc02-Blue.png');
}
@media only screen and (max-height: 559px) {
  .arc {
    width: 76px;
    height: 460px;
    margin: -230px 0;
  }
}
@media only screen and (max-height: 479px) {
  .arc {
    width: 65px;
    height: 395px;
    margin: -196px 0;
    background-image: url('../Images/16x9/Large/Arcs/STO_Arc02-Blue.png');
  }
}
.atop {
  z-index: 1;
}
.arc:nth-child(even) {
  background-image: url('../Images/4x3/Small/Arcs/STO_Arc01-Blue.png');
}
@media only screen and (max-height: 479px) {
  .arc:nth-child(even) {
    background-image: url('../Images/16x9/Large/Arcs/STO_Arc01-Blue.png');
  }
}
.arc.startedMission {
  background-image: url('../Images/4x3/Small/Arcs/STO_Arc02-Gold.png');
}
@media only screen and (max-height: 479px) {
  .arc.startedMission {
    background-image: url('../Images/16x9/Large/Arcs/STO_Arc02-Gold.png');
  }
}
.arc.startedMission:nth-child(even) {
  background-image: url('../Images/4x3/Small/Arcs/STO_Arc01-Gold.png');
}
@media only screen and (max-height: 479px) {
  .arc.startedMission:nth-child(even) {
    background-image: url('../Images/16x9/Large/Arcs/STO_Arc01-Gold.png');
  }
}
.arc.finishedMission {
  background-image: url('../Images/4x3/Small/Arcs/STO_Arc02-White.png');
}
@media only screen and (max-height: 479px) {
  .arc.finishedMission {
    background-image: url('../Images/16x9/Large/Arcs/STO_Arc02-White.png');
  }
}
.arc.finishedMission:nth-child(even) {
  background-image: url('../Images/4x3/Small/Arcs/STO_Arc01-White.png');
}
@media only screen and (max-height: 479px) {
  .arc.finishedMission:nth-child(even) {
    background-image: url('../Images/16x9/Large/Arcs/STO_Arc01-White.png');
  }
}
.orbImg {
  pointer-events: all;
  position: absolute;
  width: 60px;
  height: 60px;
  top: 152px;
  left: 47px;
  opacity: 1;
  content: '';
  background-size: 600% 100%;
  background-image: url('../Images/4x3/Small/Orbs/STO_Orb-BlueSpreadsheet.png');
  cursor: pointer;
}
@media only screen and (max-height: 559px) {
  .orbImg {
    width: 49px;
    height: 49px;
    top: 124px;
    left: 38px;
  }
}
@media only screen and (max-height: 479px) {
  .orbImg {
    width: 42px;
    height: 42px;
    top: 106px;
    left: 33px;
  }
}
.arc:nth-child(even) .orbImg {
  top: 350px;
  left: 47px;
}
@media only screen and (max-height: 559px) {
  .arc:nth-child(even) .orbImg {
    top: 286px;
    left: 38px;
  }
}
@media only screen and (max-height: 479px) {
  .arc:nth-child(even) .orbImg {
    top: 245px;
    left: 33px;
  }
}
.finishedMission .orbImg {
  background-image: url('../Images/4x3/Small/Orbs/STO_Orb-WhiteSpreadsheet.png');
}
.startedMission .orbImg {
  background-image: url('../Images/4x3/Small/Orbs/STO_Orb-GoldSpreadsheet.png');
}
.popup-content {
  color: white;
  text-align: left;
  padding: 0 23px;
}
.popup-content h2 {
  font-size: 100%;
  color: white;
  position: relative;
  margin: 0px;
  padding-top: 10px;
}
.popup-content .outbreakThumbnail {
  background-size: cover;
  background-position: 100%;
  background-repeat: no-repeat;
  width: 162px;
  height: 81px;
  border: 1px solid;
  border-radius: 10px;
  border-color: #00b4ff;
  margin: 14px 0;
}
@media only screen and (max-height: 659px) {
  .popup-content h2 {
    padding-top: 5px;
  }
  .popup-content .outbreakThumbnail {
    margin: 5px 0;
  }
}
.popup-content .stat {
  font-size: 83.3%;
}
.popup-content .term {
  color: #00b4ff;
  display: inline;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}
.popup-content .startButton {
  width: 161px;
  height: 37px;
  pointer-events: all;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('../Images/STO_Btn-SolveOutbreak-Blank@2x.png');
  margin: 4px 0 0 0;
  margin-bottom: 10px;
  cursor: pointer;
}
.popup-content .startButton > .buttonText {
  width: 161px;
  height: 37px;
  color: black;
  line-height: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  font-size: 116.7%;
}
.popup-content .popupScoreOuter {
  height: 7px;
  background-color: white;
  margin-top: 10px;
  margin-bottom: 2px;
  border-radius: 2px;
  position: relative;
}
.popup-content .popupScoreInner {
  height: 5px;
  background-color: green;
  position: absolute;
  margin-top: 1px;
  margin-left: 2px;
}
.popup-content .popupScoreCount {
  font-size: 83.3%;
  width: 100%;
  text-align: center;
}
.popup-border {
  opacity: 0;
  position: absolute;
  width: 212px;
}
.popup-border.fg {
  background: rgba(0, 0, 0, 0.825);
  border-radius: 9px;
  border-style: solid;
  border-width: 3px;
  border-color: #00b4ff;
  width: 212px !important;
  cursor: pointer;
}
.popup-border.fg {
  margin: 3px;
}
.f-n-resize .popup-border,
.f-n-resize .popup-border.reveal {
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
.f-y-resize .popup-border.bg {
  width: 4px;
  height: 4px;
}
.f-y-resize .popup-border.bg.reveal {
  -webkit-transition: opacity 0.5s, width 0.5s, height 0.5s, top 0.5s, left 0.5s;
  -moz-transition: opacity 0.5s, width 0.5s, height 0.5s, top 0.5s, left 0.5s;
  -o-transition: opacity 0.5s, width 0.5s, height 0.5s, top 0.5s, left 0.5s;
  transition: opacity 0.5s, width 0.5s, height 0.5s, top 0.5s, left 0.5s;
}
.f-y-resize .popup-border.bg {
  -webkit-transition: opacity 0.5s 0.5s, width 0.5s 0.5s, height 0.5s 0.5s, top 0.5s 0.5s, left 0.5s 0.5s;
  -moz-transition: opacity 0.5s 0.5s, width 0.5s 0.5s, height 0.5s 0.5s, top 0.5s 0.5s, left 0.5s 0.5s;
  -o-transition: opacity 0.5s 0.5s, width 0.5s 0.5s, height 0.5s 0.5s, top 0.5s 0.5s, left 0.5s 0.5s;
  transition: opacity 0.5s 0.5s, width 0.5s 0.5s, height 0.5s 0.5s, top 0.5s 0.5s, left 0.5s 0.5s;
}
.f-y-resize .popup-border.fg {
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.f-y-resize .popup-border.fg.reveal {
  -webkit-transition: opacity 0.5s 0.5s;
  -moz-transition: opacity 0.5s 0.5s;
  -o-transition: opacity 0.5s 0.5s;
  transition: opacity 0.5s 0.5s;
}
.startedMission .popup-border {
  border-color: #ffc600;
}
.finishedMission .popup-border {
  border-color: #ffffff;
}
.emptySpace {
  position: absolute;
  top: 50%;
  opacity: .2;
  background-repeat: no-repeat;
  background-size: cover;
  width: 115px;
  height: 563px;
  margin: -282px 0;
  background-image: url(../Images/16x10/Small/Tabs/STO_TabBG-Top.png);
}
.beadImg {
  pointer-events: none;
  opacity: 1;
  width: 58px;
  height: 58px;
  top: .5px;
  left: 2.5px;
  background-image: url('../Images/16x9/Large/Beads/STO_BeadsLargeSpreadsheet.png');
  background-size: 400% 100%;
  position: absolute;
}
@media only screen and (max-height: 559px) {
  .beadImg {
    width: 43px;
    height: 43px;
  }
}
@media only screen and (max-height: 479px) {
  .beadImg {
    width: 41px;
    height: 41px;
  }
}
#orbInstructions {
  position: fixed;
  z-index: 1;
  top: 30%;
  left: 42%;
  width: 20%;
  padding: 10px;
  color: black;
  text-align: center;
  background-color: #ffffff;
  border: 3px solid black;
  border-radius: 9px;
  opacity: 0;
  font-weight: bold;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}
#orbInstructions.reveal {
  opacity: 1;
}
/*
                 _                 _   _                 
     /\         (_)               | | (_)                
    /  \   _ __  _ _ __ ___   __ _| |_ _  ___  _ __  ___ 
   / /\ \ | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \/ __|
  / ____ \| | | | | | | | | | (_| | |_| | (_) | | | \__ \
 /_/    \_\_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|___/
                                                         
                                                         
*/
.orbAnimationProperties {
  transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-animation-name: play;
  -moz-animation-name: play;
  -ms-animation-name: play;
  -o-animation-name: play;
  animation-name: play;
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  -ms-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
  animation-duration: 0.5s;
  animation-timing-function: steps(6);
  -webkit-animation-timing-function: steps(6);
  -moz-animation-timing-function: steps(6);
  -ms-animation-timing-function: steps(6);
  -o-animation-timing-function: steps(6);
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -ms-animation-direction: alternate;
  -o-animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.beadAnimationProperties {
  transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-animation-name: playBead;
  -moz-animation-name: playBead;
  -ms-animation-name: playBead;
  -o-animation-name: playBead;
  animation-name: playBead;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  animation-timing-function: steps(3);
  -webkit-animation-timing-function: steps(3);
  -moz-animation-timing-function: steps(3);
  -ms-animation-timing-function: steps(3);
  -o-animation-timing-function: steps(3);
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
  animation-direction: normal;
  -webkit-animation-direction: normal;
  -moz-animation-direction: normal;
  -ms-animation-direction: normal;
  -o-animation-direction: normal;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.reverseBeadAnimationProperties {
  transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-animation-name: playBeadReverse;
  -moz-animation-name: playBeadReverse;
  -ms-animation-name: playBeadReverse;
  -o-animation-name: playBeadReverse;
  animation-name: playBeadReverse;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  animation-timing-function: steps(3);
  -webkit-animation-timing-function: steps(3);
  -moz-animation-timing-function: steps(3);
  -ms-animation-timing-function: steps(3);
  -o-animation-timing-function: steps(3);
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
  animation-direction: normal;
  -webkit-animation-direction: normal;
  -moz-animation-direction: normal;
  -ms-animation-direction: normal;
  -o-animation-direction: normal;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.nodeAnimation 0% {
  background-position: 0%;
}
.nodeAnimation 100% {
  background-position: -600%;
}
.beadAnimation 0% {
  background-position: 0%;
}
.beadAnimation 50% {
  background-position: 0%;
}
.beadAnimation 100% {
  background-position: -300%;
}
.beadAnimationReverse 0% {
  background-position: -300%;
}
.beadAnimationReverse 50% {
  background-position: 0%;
}
.beadAnimationReverse 100% {
  background-position: 0%;
}
@-webkit-keyframes play {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: -600%;
  }
}
@-moz-keyframes play {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: -600%;
  }
}
@-ms-keyframes play {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: -600%;
  }
}
@-o-keyframes play {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: -600%;
  }
}
@keyframes play {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: -600%;
  }
}
@-webkit-keyframes playBead {
  0% {
    background-position: 0%;
  }
  50% {
    background-position: 0%;
  }
  100% {
    background-position: -300%;
  }
}
@-moz-keyframes playBead {
  0% {
    background-position: 0%;
  }
  50% {
    background-position: 0%;
  }
  100% {
    background-position: -300%;
  }
}
@-ms-keyframes playBead {
  0% {
    background-position: 0%;
  }
  50% {
    background-position: 0%;
  }
  100% {
    background-position: -300%;
  }
}
@-o-keyframes playBead {
  0% {
    background-position: 0%;
  }
  50% {
    background-position: 0%;
  }
  100% {
    background-position: -300%;
  }
}
@keyframes playBead {
  0% {
    background-position: 0%;
  }
  50% {
    background-position: 0%;
  }
  100% {
    background-position: -300%;
  }
}
@-webkit-keyframes playBeadReverse {
  0% {
    background-position: -300%;
  }
  50% {
    background-position: 0%;
  }
  100% {
    background-position: 0%;
  }
}
@-moz-keyframes playBeadReverse {
  0% {
    background-position: -300%;
  }
  50% {
    background-position: 0%;
  }
  100% {
    background-position: 0%;
  }
}
@-ms-keyframes playBeadReverse {
  0% {
    background-position: -300%;
  }
  50% {
    background-position: 0%;
  }
  100% {
    background-position: 0%;
  }
}
@-o-keyframes playBeadReverse {
  0% {
    background-position: -300%;
  }
  50% {
    background-position: 0%;
  }
  100% {
    background-position: 0%;
  }
}
@keyframes playBeadReverse {
  0% {
    background-position: -300%;
  }
  50% {
    background-position: 0%;
  }
  100% {
    background-position: 0%;
  }
}
#AnswersView {
  color: white;
  /*
    .answerList { 
        padding-left: 45px;
    }  
    */
  /* The root container for answers takes up the left 60% of the screen */
  /* Each item only takes up a third of the parent container
    
    If we allow more or less than three responses, switch to flexbox
    */
  /* When the answer is selected, apply the 'unselected' class to each unselected item */
  /* hides the default radio button input object */
  /*
    this generates a 'before' DOM element that mimics the behavior of the iOS selection object.
    
    This has one major problem - it is absolutely positioned, so care must be taken with the margin and padding of the actual element (`.answerItem label` above) to make sure it is positioned with enough space so the item doesn't overlay. It may be required to add a
    */
  /*
    .answerItem label:before {
        content: "";
        display: inline-block;
        width: 54px;
        height: 54px;
        margin-right: 54px;
        position: absolute;
        left: -40px;
        top: 1em;
        border-style: solid;
        border-width: 3px;
        border-color: white;
        border-radius: 12px;
        background-color: #f3f3f3;
        
        .background-image(linear-gradient(to bottom, #4F8EA7 0%, #194E71 100%));
        
        box-shadow: inset 0px 2px 3px 0px rgba(255, 255, 255, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
    }
    */
}
#AnswersView .textLayer {
  margin: 0.5em 48% 0.5em 15%;
  max-height: 1.25em;
  overflow: hidden;
  text-align: center;
  color: #00b4ff;
  text-transform: uppercase;
  font-weight: bold;
}
#AnswersView .question {
  color: white;
  font-weight: normal;
  margin: 1em 1.5em 0 1.5em;
}
#AnswersView .answerContainer {
  width: 90%;
}
@media only screen and (max-height: 659px) {
  #AnswersView .answerContainer {
    width: 92%;
  }
}
@media only screen and (max-height: 559px) {
  #AnswersView .answerContainer {
    width: 94%;
  }
}
@media only screen and (max-aspect-ratio: 4/3) {
  #AnswersView .answerContainer {
    width: 87%;
  }
}
@media only screen and (max-width: 1060px) {
  #AnswersView .question {
    font-size: 1em;
  }
}
#AnswersView .answerItem {
  width: 33%;
}
#AnswersView .answerItem .unselected {
  opacity: 0.6;
}
#AnswersView li.answerItem {
  position: relative;
  top: -0.5em;
  display: inline;
  width: 33%;
  float: left;
}
#AnswersView .answerItem label {
  cursor: pointer;
  position: relative;
  /*padding-left: 54px;*/
  margin-left: 0;
  margin-right: 25px;
  height: 4em;
  display: inline-block;
  background: url(../Images/STO_Btn-Clue-Off.png) no-repeat;
  background-size: 54px 54px;
  background-position: left center;
}
#AnswersView .answerItem label img.answerButtonMask {
  position: absolute;
  height: 100%;
  width: 100%;
}
#AnswersView .answerItem input[type=radio] {
  display: none;
}
#AnswersView .answerItem.disabled {
  opacity: 0.5;
}
#AnswersView .answerText {
  position: relative;
  margin: auto 0;
  display: table-cell;
  vertical-align: middle;
  height: 4em;
  padding-left: 54px;
  /*top: 1em;*/
}
#AnswersView .answerItem input[type=radio]:checked + label {
  background: url(../Images/STO_Btn-Clue-On.png) no-repeat;
  background-size: 54px 54px;
  background-position: left center;
}
#ApplicationFrameBottomView.clue,
#ApplicationFrameBottomView.response {
  -webkit-transform: translateY(-10em);
  -moz-transform: translateY(-10em);
  -o-transform: translateY(-10em);
  -ms-transform: translateY(-10em);
  transform: translateY(-10em);
}
#FakeBottomView.clue,
#FakeBottomView.response {
  -webkit-transform: translateY(-10em);
  -moz-transform: translateY(-10em);
  -o-transform: translateY(-10em);
  -ms-transform: translateY(-10em);
  transform: translateY(-10em);
}
@media only screen and (max-height: 659px) {
  #AnswersView .question {
    margin: 2px 1.5em 0 0.5em;
  }
  #AnswersView .answerList {
    /*margin: 1em 0 0 0;
            padding: 0 1em 0 1em;*/
    padding-left: 0px;
  }
  #AnswersView .answerItem label {
    /*padding-left: 1em;*/
    margin-left: 1em;
    margin-right: 1em;
  }
  #AnswersView .answerItem label:before {
    width: 2em;
    height: 2em;
    margin-right: 2em;
    left: -1.5em;
    border-width: 1px;
    border-radius: 9px;
  }
  #AnswersView .answerText {
    top: 0.25em;
    height: 4em;
    font-size: 0.9em;
  }
  #AnswersView .answerItem {
    top: 0;
  }
  #ApplicationFrameBottomView.clue,
  #ApplicationFrameBottomView.response {
    -webkit-transform: translateY(-7.5em);
    -moz-transform: translateY(-7.5em);
    -o-transform: translateY(-7.5em);
    -ms-transform: translateY(-7.5em);
    transform: translateY(-7.5em);
  }
  #FakeBottomView.clue,
  #FakeBottomView.response {
    -webkit-transform: translateY(-7.5em);
    -moz-transform: translateY(-7.5em);
    -o-transform: translateY(-7.5em);
    -ms-transform: translateY(-7.5em);
    transform: translateY(-7.5em);
  }
}
@media only screen and (max-height: 659px) and only screen and (max-height: 559px) {
  #AnswersView .answerItem label {
    margin-right: 0.5em;
  }
}
#ClueLayerView {
  margin: 0 2em;
  padding: 0;
  height: 100%;
  position: relative;
}
@media only screen and (max-height: 659px) {
  #ClueLayerView {
    margin: 0 1em;
  }
}
#ClueLayerView h1 {
  margin: 0;
  padding: 1em 0 0 0;
  line-height: 100%;
  width: 8em;
}
@media only screen and (max-height: 659px) {
  #ClueLayerView h1 {
    padding-top: 0.5em;
    font-size: 1em;
  }
}
#ClueLayerView .clueText > p + ul {
  padding-left: 20px;
  list-style-position: outside;
}
#ClueLayerView .clueText > p + ul > ul > p {
  margin-left: -20px;
}
#ClueLayerView .clueText > p + ul > li {
  list-style-position: outside;
}
#ClueLayerView .clueText > ul > li + ul {
  padding: 0px;
}
#ClueLayerView .currentClueView > div:not(.gameShow) {
  opacity: 0;
}
@media only screen and (max-height: 659px) {
  #ClueLayerView div.clueText > *:nth-child(1) {
    margin-top: 0;
  }
}
@media only screen and (min-width: 1200px) {
  #ClueLayerView .clueText {
    font-size: 1.1em;
  }
}
#ClueLayerView a:link {
  color: #ffc600;
  text-decoration: none;
  font-weight: bold;
  pointer-events: all;
}
#ClueLayerView a:visited {
  color: #ffc600;
  text-decoration: none;
  font-weight: bold;
}
#ClueLayerView .eventContainerRight {
  width: 33%;
  position: absolute;
  right: 0;
  top: 2em;
}
@media only screen and (max-height: 659px) {
  #ClueLayerView .eventContainerRight {
    top: 1em;
  }
}
#ClueLayerView .clueButtonWrap {
  overflow: hidden;
  position: absolute;
  left: -1em;
  bottom: 0px;
  height: 4.5em;
}
@media only screen and (max-height: 659px) {
  #ClueLayerView .clueButtonWrap {
    height: 3.5em;
  }
}
#ClueLayerView .clueButton {
  display: inline-block;
  width: 6.5em;
}
#ClueLayerView .clueParagraph {
  width: 48%;
  font-size: 1em;
  color: white;
  overflow-y: auto;
}
#ClueLayerView .clueTitle {
  color: #ffc600;
}
#ClueLayerView .clueText {
  position: absolute;
  width: 65%;
  height: 71%;
  color: white;
  overflow-y: auto;
}
#ClueLayerView .clueText td {
  color: white;
}
#ClueLayerView .figure {
  height: 100%;
}
@media only screen and (max-height: 659px) {
  #ClueLayerView .figureImage {
    max-height: 50%;
  }
}
#ClueLayerView .clueIcon {
  min-width: 50px;
  height: 35px;
  background-size: 50px 35px;
  background-position: center top;
  background-repeat: no-repeat;
  text-align: center;
  margin: 0;
  pointer-events: all;
  display: block;
}
@media only screen and (max-height: 659px) {
  #ClueLayerView .clueIcon {
    min-width: 40px;
    height: 28px;
    background-size: 40px 28px;
  }
}
#ClueLayerView .clueIcon:before {
  height: 110%;
}
#ClueLayerView .button_Clue:not(.selected) {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-Clue-off@2x.png');
  color: white;
}
#ClueLayerView .button_Clue.selected {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-Clue-on@2x.png');
}
#ClueLayerView .button_Tip:not(.selected) {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-Tip-off@2x.png');
  color: white;
}
#ClueLayerView .button_Tip.selected {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-Tip-on@2x.png');
}
#ClueLayerView .button_Data:not(.selected) {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-Data-off@2x.png');
  color: white;
}
#ClueLayerView .button_Data.selected {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-Data-on@2x.png');
}
#ClueLayerView .button_Definition:not(.selected) {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-Definition-off@2x.png');
  color: white;
}
#ClueLayerView .button_Definition.selected {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-Definition-on@2x.png');
}
#ClueLayerView .button_Cases:not(.selected) {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-Cases-off@2x.png');
  color: white;
}
#ClueLayerView .button_Cases.selected {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-Cases-on@2x.png');
}
#ClueLayerView .button_HealthTips:not(.selected) {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-HealthTips-off@2x.png');
  color: white;
}
#ClueLayerView .button_HealthTips.selected {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-HealthTips-on@2x.png');
}
#ClueLayerView .button_Notes:not(.selected) {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-Notes-off@2x.png');
  color: white;
}
#ClueLayerView .button_Notes.selected {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-Notes-on@2x.png');
}
#ResponseView {
  height: 100%;
  color: white;
  position: relative;
  margin: 0 2em;
}
@media only screen and (max-height: 659px) {
  #ResponseView {
    margin: 0 1em;
  }
}
#ResponseView .columnLeft {
  position: absolute;
  width: 65%;
  height: 100%;
}
#ResponseView h1.title {
  color: #ffc600;
  margin-top: 0;
  padding-bottom: 0.25em;
}
#ResponseView h2.subtitle {
  color: #00b4ff;
  margin: 0 0 0.25em;
  font-size: 1em;
}
#ResponseView .scrollview {
  width: 100%;
}
#ResponseView .buttonWrap {
  position: absolute;
  padding: 2em;
  bottom: 0;
}
@media only screen and (max-height: 659px) {
  #ResponseView .buttonWrap {
    padding: 1em;
  }
}
#ResponseView .scrollview > ul {
  padding-left: 20px;
  list-style-position: outside;
}
#ResponseView .scrollview > ul > li {
  list-style-position: outside;
}
#ResponseView .button_next {
  background-image: url('../Images/16x10/Large/Buttons/STO_Btn-NextClue@2x.png');
  background-size: contain;
  width: 201px;
  height: 46px;
  cursor: pointer;
}
#ResponseView .button_results {
  background-image: url('../Images/16x10/Large/Buttons/STO_Btn-ViewResults@2x.png');
  background-size: contain;
  width: 201px;
  height: 46px;
}
#ResponseView #debriefingBadgeImage.columnRight {
  width: 30%;
  height: 100%;
  overflow: hidden;
  color: transparent;
  position: absolute;
  right: 0;
  top: 0;
  background-repeat: no-repeat;
  background-position: center;
}
#ResponseView .badge0 {
  background-image: url('../Images/STO_Badges_01-Trainee.png');
}
#ResponseView .badge1 {
  background-image: url('../Images/STO_Badges_02-Novice.png');
}
#ResponseView .badge2 {
  background-image: url("../Images/STO_Badges_03-Apprentice.png");
}
#ResponseView .badge3 {
  background-image: url("../Images/STO_Badges_04-Assistant.png");
}
#ResponseView .badge4 {
  background-image: url("../Images/STO_Badges_05-Specialist.png");
}
#ResponseView .badge5 {
  background-image: url("../Images/STO_Badges_06-SeniorSpecialist.png");
}
#ResponseView .badge6 {
  background-image: url("../Images/STO_Badges_07-Investigator.png");
}
#ResponseView .badge7 {
  background-image: url("../Images/STO_Badges_08-LeadInvestigator.png");
}
#ResponseView .badge8 {
  background-image: url("../Images/STO_Badges_09-AssistantChief.png");
}
#ResponseView .badge9 {
  background-image: url("../Images/STO_Badges_10-Chief.png");
}
#ResponseView .badge10 {
  background-image: url("../Images/STO_Badges_11-Master.png");
}
#ResponseView .badge11 {
  background-image: url("../Images/STO_Badges_12-DeputyDiseaseDetective.png");
}
#ResponseView .badge12 {
  background-image: url("../Images/STO_Badges_13-DiseaseDetective.png");
}
@media only screen and (min-width: 1200px) {
  #ResponseView .responseText p {
    font-size: 1.1em;
  }
  #ResponseView .subtitle {
    font-size: 1.1em !important;
  }
}
#DebriefingView {
  text-align: center;
  height: 100%;
  width: 100%;
}
#DebriefingView {
  /*.flipOver {
      transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg);
    }*/
}
#DebriefingView .resultsContainer {
  height: 100%;
  width: 100%;
}
#DebriefingView .learnMoreLink {
  position: absolute;
  width: 100%;
  height: 15%;
  top: 2em;
  cursor: pointer;
  text-align: center;
}
@media only screen and (max-height: 659px) {
  #DebriefingView .learnMoreLink {
    top: 0.75em;
  }
}
#DebriefingView .infoLink {
  position: absolute;
  width: 62px;
  height: 42px;
  overflow: hidden;
  color: transparent;
}
#DebriefingView .learnMoreLink.smooth .infoLink {
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: -webkit-transform 1s,-moz-transform 1s,-o-transform 1s,transform 1s;
}
#DebriefingView .infoLink.books {
  background-image: url('../Images/STO_Results-LearnMore-Books.png');
  right: 60%;
  -webkit-transform: translateX(1px);
  -moz-transform: translateX(1px);
  -o-transform: translateX(1px);
  -ms-transform: translateX(1px);
  transform: translateX(1px);
}
#DebriefingView .infoLink.learnMore {
  background-image: url('../Images/STO_Results-LearnMore-Btn.png');
  left: 60%;
  -webkit-transform: translateX(-1px);
  -moz-transform: translateX(-1px);
  -o-transform: translateX(-1px);
  -ms-transform: translateX(-1px);
  transform: translateX(-1px);
}
#DebriefingView .learnMoreLink.open .infoLink.books {
  -webkit-transform: translateX(-15em);
  -moz-transform: translateX(-15em);
  -o-transform: translateX(-15em);
  -ms-transform: translateX(-15em);
  transform: translateX(-15em);
}
#DebriefingView .learnMoreLink.open .infoLink.learnMore {
  -webkit-transform: translateX(15em);
  -moz-transform: translateX(15em);
  -o-transform: translateX(15em);
  -ms-transform: translateX(15em);
  transform: translateX(15em);
}
#DebriefingView .teaserText {
  display: inline-block;
  color: white;
  padding: 0 6px;
  padding-top: .75em;
  height: 10%;
  max-width: inherit;
  opacity: 0;
}
#DebriefingView .smooth .teaserText {
  -webkit-transition: opacity 1s 1s;
  -moz-transition: opacity 1s 1s;
  -o-transition: opacity 1s 1s;
  transition: opacity 1s 1s;
}
#DebriefingView .open .teaserText {
  opacity: 1;
}
#DebriefingView .coinTransition0 {
  -webkit-transition: -webkit-transform 1s ease-in-out 0s, opacity 0s ease-in-out 6s;
  -moz-transition: -moz-transform 1s ease-in-out 0s, opacity 0s ease-in-out 6s;
  -o-transition: -o-transform 1s ease-in-out 0s, opacity 0s ease-in-out 6s;
  transition: -webkit-transform 1s ease-in-out 0s,-moz-transform 1s ease-in-out 0s,-o-transform 1s ease-in-out 0s,transform 1s ease-in-out 0s, opacity 0s ease-in-out 6s;
}
#DebriefingView .coinTransition1 {
  -webkit-transition: -webkit-transform 1s ease-in-out 0s, opacity 0s ease-in-out 6s;
  -moz-transition: -moz-transform 1s ease-in-out 0s, opacity 0s ease-in-out 6s;
  -o-transition: -o-transform 1s ease-in-out 0s, opacity 0s ease-in-out 6s;
  transition: -webkit-transform 1s ease-in-out 0s,-moz-transform 1s ease-in-out 0s,-o-transform 1s ease-in-out 0s,transform 1s ease-in-out 0s, opacity 0s ease-in-out 6s;
}
#DebriefingView .coinTransition2 {
  -webkit-transition: -webkit-transform 1s ease-in-out 0s, opacity 0s ease-in-out 6s;
  -moz-transition: -moz-transform 1s ease-in-out 0s, opacity 0s ease-in-out 6s;
  -o-transition: -o-transform 1s ease-in-out 0s, opacity 0s ease-in-out 6s;
  transition: -webkit-transform 1s ease-in-out 0s,-moz-transform 1s ease-in-out 0s,-o-transform 1s ease-in-out 0s,transform 1s ease-in-out 0s, opacity 0s ease-in-out 6s;
}
#DebriefingView .background {
  position: absolute;
  width: 100%;
  height: 188px;
  top: 90px;
  background-color: #000a14;
  border-top: 3px solid #8E989B;
  border-bottom: 3px solid #8E989B;
}
#DebriefingView .badgeAndScore {
  position: absolute;
  width: 100%;
  height: 75%;
  top: 10%;
}
@media only screen and (max-height: 659px) {
  #DebriefingView .badgeAndScore {
    top: 2%;
  }
}
#DebriefingView .badgeOverlayText {
  position: absolute;
  padding: 22px 0;
  width: 100%;
  opacity: 0;
}
#DebriefingView .badgeOverlayTextDelayFadeIn {
  -webkit-transition: all 1.5s ease-in-out 0s;
  -moz-transition: all 1.5s ease-in-out 0s;
  -o-transition: all 1.5s ease-in-out 0s;
  transition: all 1.5s ease-in-out 0s;
}
#DebriefingView .badgeOverlayTextDelayFadeOut {
  -webkit-transition: all 1.5s ease-in-out 1s;
  -moz-transition: all 1.5s ease-in-out 1s;
  -o-transition: all 1.5s ease-in-out 1s;
  transition: all 1.5s ease-in-out 1s;
}
#DebriefingView .badgeOverlay {
  position: absolute;
  top: 143px;
  left: 65px;
  width: 225px;
  height: 103px;
  color: white;
  background-image: url("../Images/STO_ScoreMsgBar-BG@2x.png");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
}
#DebriefingView .badgeBackground {
  background-image: url("../Images/STO_ScoreSunBurstSheet.png");
  position: absolute;
  width: 350px;
  height: 350px;
  background-size: 200% 100%;
  background-repeat: no-repeat;
}
#DebriefingView .badgeBackground.level2 {
  background-image: url(../Images/STO_DDSunBurst-Sprite.png);
}
#DebriefingView .badgeBackgroundAnimated {
  -webkit-animation: scoreBurst 0.1s steps(2) 0s infinite alternate forwards;
  -moz-animation: scoreBurst 0.1s steps(2) 0s infinite alternate forwards;
  -o-animation: scoreBurst 0.1s steps(2) 0s infinite alternate forwards;
  animation: scoreBurst 0.1s steps(2) 0s infinite alternate forwards;
}
#DebriefingView lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes scoreBurst{ 0%{ background-position: 0px; } 100% { background-position: -700px; }}
@-moz-keyframes scoreBurst{ 0%{ background-position: 0px; } 100% { background-position: -700px; }}
@-o-keyframes scoreBurst{ 0%{ background-position: 0px; } 100% { background-position: -700px; }}
@keyframes scoreBurst{ 0%{ background-position: 0px; } 100% { background-position: -700px; }}
lesshat-selector {
    -lh-property: 0;
}
#DebriefingView .f1_container {
  position: relative;
  margin: 10px auto;
  width: 176px;
  height: 232px;
  top: 15%;
}
#DebriefingView .f1_container {
  perspective: 1000;
  -webkit-perspective: 1000;
}
#DebriefingView .f1_card {
  width: 100%;
  height: 100%;
  /*transform-style: preserve-3d;
      transition: all 1.0s linear;
      -webkit-transform-style: preserve-3d;
      -webkit-transition: all 1.0s linear;*/
}
#DebriefingView .face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1.0s linear;
}
#DebriefingView .face.back {
  display: block;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  box-sizing: border-box;
  color: white;
  text-align: center;
}
#DebriefingView .flipOver .face.back {
  transform: none;
  -webkit-transform: none;
}
#DebriefingView .flipOver .face.front {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
#DebriefingView .badge0 {
  background-image: url('../Images/STO_Badges_01-Trainee_lg@2x.png');
}
#DebriefingView .badge1 {
  background-image: url('../Images/STO_Badges_02-Novice_lg@2x.png');
}
#DebriefingView .badge2 {
  background-image: url("../Images/STO_Badges_03-Apprentice_lg@2x.png");
}
#DebriefingView .badge3 {
  background-image: url("../Images/STO_Badges_04-Assistant_lg@2x.png");
}
#DebriefingView .badge4 {
  background-image: url("../Images/STO_Badges_05-Specialist_lg@2x.png");
}
#DebriefingView .badge5 {
  background-image: url("../Images/STO_Badges_06-SeniorSpecialist_lg@2x.png");
}
#DebriefingView .badge6 {
  background-image: url("../Images/STO_Badges_07-Investigator_lg@2x.png");
}
#DebriefingView .badge7 {
  background-image: url("../Images/STO_Badges_08-LeadInvestigator_lg@2x.png");
}
#DebriefingView .badge8 {
  background-image: url("../Images/STO_Badges_09-AssistantChief_lg@2x.png");
}
#DebriefingView .badge9 {
  background-image: url("../Images/STO_Badges_10-Chief_lg@2x.png");
}
#DebriefingView .badge10 {
  background-image: url("../Images/STO_Badges_11-Master_lg@2x.png");
}
#DebriefingView .badge11 {
  background-image: url("../Images/STO_Badges_12-DeputyDiseaseDetective_lg@2x.png");
}
#DebriefingView .badge12 {
  background-image: url("../Images/STO_Badges_13-DiseaseDetective_lg@2x.png");
}
#DebriefingView .badge13 {
  background-image: url("../Images/STO_Ribbon_01_surveillance_lg@2x.png");
}
#DebriefingView .badge14 {
  background-image: url("../Images/STO_Ribbon_02_diagnostics_lg@2x.png");
}
#DebriefingView .badge15 {
  background-image: url("../Images/STO_Ribbon_03_medical-assessment_lg@2x.png");
}
#DebriefingView .badge16 {
  background-image: url("../Images/STO_Ribbon_04_lab-research_lg@2x.png");
}
#DebriefingView .badge17 {
  background-image: url("../Images/STO_Ribbon_05_data-analysis_lg@2x.png");
}
#DebriefingView .badge18 {
  background-image: url("../Images/STO_Ribbon_06_statistics_lg@2x.png");
}
#DebriefingView .badge19 {
  background-image: url("../Images/STO_Ribbon_07_scientific-investigation_lg@2x.png");
}
#DebriefingView .badge20 {
  background-image: url("../Images/STO_Ribbon_08_treatment_lg@2x.png");
}
#DebriefingView .badgeContainer {
  position: absolute;
  right: 50%;
  width: 350px;
  height: 350px;
}
#DebriefingView .scoreContainer {
  position: absolute;
  height: 181px;
  top: 99px;
  left: 52%;
  color: #fff;
}
#DebriefingView .score {
  color: #00b4ff;
}
#DebriefingView .scoreHeading {
  color: #00b4ff;
}
#DebriefingView .achievements {
  margin: 1em auto;
  min-height: 42px;
}
#DebriefingView .achievementMini {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  display: inline-block;
  width: 36px;
  height: 36px;
  color: transparent;
  cursor: pointer;
}
#DebriefingView .achievementMini.coinSmartyPants {
  background-image: url('../Images/STO_Coin-SmartyPants_sm.png');
}
#DebriefingView .achievementMini.coinCleverClogs {
  background-image: url('../Images/STO_Coin-CleverClogs_sm.png');
}
#DebriefingView .achievementMini.coinLoyalty {
  background-image: url('../Images/STO_Coin-Loyalty_sm.png');
}
#DebriefingView .achievementMini.coinGrimReaper {
  background-image: url('../Images/STO_Coin-GrimReaper_sm.png');
}
#DebriefingView .achievementMini.coinUnderachiever {
  background-image: url('../Images/STO_Coin-Underachiever_sm.png');
}
#DebriefingView .achievementMini.coinPublicHealthNerd {
  background-image: url('../Images/STO_Coin-PublicHealthNerd_sm.png');
}
#DebriefingView .achievementMini.coinKnowledgeSeeker {
  background-image: url('../Images/STO_Coin-KnowledgeSeeker_sm.png');
}
#DebriefingView .restartBar {
  position: absolute;
  width: 100%;
  height: 15%;
  bottom: 1em;
}
@media only screen and (max-height: 659px) {
  #DebriefingView .restartBar {
    bottom: 0;
  }
}
#DebriefingView .nextButton {
  width: 242px;
  height: 42px;
  color: transparent;
  display: inline-block;
}
#DebriefingView .nextButton.restart {
  background-image: url('../Images/STO_Btn-RestartOutbreak.png');
}
#DebriefingView .nextButton.solveAnother {
  background-image: url('../Images/STO_Btn-SolveAnotherOutbreak.png');
}
#DebriefingView .nextButton.justReached {
  background-image: url('../Images/STO_Btn-StartLevel2@2x.png');
}
#DebriefingView .yourScore {
  font-size: 1.2em;
  line-height: 2em;
  overflow: visible;
}
#DebriefingView .cell {
  display: inline-block;
  width: 6.25em;
}
#MissionFrameView {
  position: absolute;
  border: 3px solid #8E989B;
  background-image: -webkit-linear-gradient(top, #02131d 0%, rgba(10, 65, 92, 0.825) 100%);
  background-image: -moz-linear-gradient(top, #02131d 0%, rgba(10, 65, 92, 0.825) 100%);
  background-image: -o-linear-gradient(top, #02131d 0%, rgba(10, 65, 92, 0.825) 100%);
  background-image: linear-gradient(to bottom, #02131d 0%, rgba(10, 65, 92, 0.825) 100%);
}
@media only screen and (min-width: 1200px) {
  #MissionFrameView #BriefingView .scrollview {
    font-size: 1.1em;
  }
}
#MissionFrameView.hidden {
  opacity: 0;
}
.f-n-gradient #MissionFrameView {
  background: #0B3861;
}
#MissionTitleView {
  width: 100%;
  position: relative;
  height: 6em;
  pointer-events: none;
}
.popTop #MissionTitleView {
  z-index: 1;
}
#MissionTitleView > * {
  pointer-events: auto;
}
.missionResizeTransition {
  -webkit-transition: height 1s, width 1s, top 1s, left 1s;
  -moz-transition: height 1s, width 1s, top 1s, left 1s;
  -o-transition: height 1s, width 1s, top 1s, left 1s;
  transition: height 1s, width 1s, top 1s, left 1s;
}
.briefingFadeInDelay {
  -webkit-transition: opacity 1s 0.1s;
  -moz-transition: opacity 1s 0.1s;
  -o-transition: opacity 1s 0.1s;
  transition: opacity 1s 0.1s;
}
.homeButton {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-Back@2x.png');
  position: absolute;
  bottom: 3.5em;
  width: 4em;
  height: 2em;
  line-height: 1.75em;
  -webkit-transform: translateX(0.5em);
  -moz-transform: translateX(0.5em);
  -o-transform: translateX(0.5em);
  -ms-transform: translateX(0.5em);
  transform: translateX(0.5em);
  color: white;
  text-transform: uppercase;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  z-index: 2;
}
.missionTitle {
  position: absolute;
  width: 80%;
  height: 3.5em;
  left: 4.5em;
  -webkit-transform: translateX(0.5em);
  -moz-transform: translateX(0.5em);
  -o-transform: translateX(0.5em);
  -ms-transform: translateX(0.5em);
  transform: translateX(0.5em);
}
.missionTitle h1 {
  height: 2.25em;
  display: table-cell;
  align-content: center;
  vertical-align: middle;
  font-size: 2em;
  color: white;
  margin: 0;
  padding-left: 0.5em;
}
.missionTitle:before {
  content: " ";
  background-image: url('../Images/STO_VerticalBar@2x.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: 3px;
  height: 42px;
  position: absolute;
  bottom: 0;
}
@media only screen and (-webkit-max-device-pixel-ratio: 1), (max-resolution: 96dpi), (max-resolution: 1dppx) {
  .missionTitle:before {
    background-image: url('../Images/STO_VerticalBar.png');
  }
}
.clueTitleView {
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -o-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
  position: absolute;
  bottom: 0.25em;
  left: 15%;
  width: 37%;
  max-height: 1.25em;
  overflow: hidden;
  color: #00b4ff;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
}
#GameView.briefing #ApplicationFrameTopView,
#GameView.clue #ApplicationFrameTopView,
#GameView.response #ApplicationFrameTopView,
#GameView.learn #ApplicationFrameTopView,
#GameView.debriefing #ApplicationFrameTopView {
  height: 543px;
  top: -543px;
  -webkit-transform: translateY(103px);
  -moz-transform: translateY(103px);
  -o-transform: translateY(103px);
  -ms-transform: translateY(103px);
  transform: translateY(103px);
}
@media only screen and (max-height: 719px) {
  #GameView.briefing #ApplicationFrameTopView,
  #GameView.clue #ApplicationFrameTopView,
  #GameView.response #ApplicationFrameTopView,
  #GameView.learn #ApplicationFrameTopView,
  #GameView.debriefing #ApplicationFrameTopView {
    -webkit-transform: translateY(88px);
    -moz-transform: translateY(88px);
    -o-transform: translateY(88px);
    -ms-transform: translateY(88px);
    transform: translateY(88px);
  }
}
#GameView.briefing #FakeTopView,
#GameView.clue #FakeTopView,
#GameView.response #FakeTopView,
#GameView.learn #FakeTopView,
#GameView.debriefing #FakeTopView {
  height: 543px;
  top: -543px;
  -webkit-transform: translateY(6em);
  -moz-transform: translateY(6em);
  -o-transform: translateY(6em);
  -ms-transform: translateY(6em);
  transform: translateY(6em);
}
@media only screen and (max-height: 719px) {
  #GameView.briefing #FakeTopView,
  #GameView.clue #FakeTopView,
  #GameView.response #FakeTopView,
  #GameView.learn #FakeTopView,
  #GameView.debriefing #FakeTopView {
    -webkit-transform: translateY(5em);
    -moz-transform: translateY(5em);
    -o-transform: translateY(5em);
    -ms-transform: translateY(5em);
    transform: translateY(5em);
  }
}
@media only screen and (max-height: 719px) {
  .homeButton {
    height: 1em;
  }
  #MissionTitleView {
    height: 5em;
  }
  .missionTitle h1 {
    font-size: 1.5em;
  }
  .missionTitle {
    height: 3em;
    left: 4.25em;
  }
}
#PopupView {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -o-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
  z-index: 100;
}
#PopupView.reveal {
  opacity: 1;
}
#PopupView .window {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 436px;
  height: 476px;
}
#PopupView .popup_CloseButton {
  position: absolute;
  right: 0;
  top: 0;
  width: 108px;
  height: 40px;
  border-radius: 9px 9px 0px 0px;
  border: 2px solid #ffffff;
  border-bottom-width: 0px;
  pointer-events: all;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxZDU0NzgiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI4NmM5YSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #1d5478 0%, #286c9a 100%);
  background-image: -moz-linear-gradient(top, #1d5478 0%, #286c9a 100%);
  background-image: -o-linear-gradient(top, #1d5478 0%, #286c9a 100%);
  background-image: linear-gradient(to bottom, #1d5478 0%, #286c9a 100%);
  cursor: pointer;
}
#PopupView .popup_CloseButton > .buttonText {
  width: 108px;
  height: 40px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
#PopupView .popup_Content {
  width: 436px;
  height: 436px;
  border: 2px solid #ffffff;
  overflow: hidden;
  font-color: white;
  padding: 12px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMjEzMWQiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0NDE1YyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #02131d 0%, #14415c 100%);
  background-image: -moz-linear-gradient(top, #02131d 0%, #14415c 100%);
  background-image: -o-linear-gradient(top, #02131d 0%, #14415c 100%);
  background-image: linear-gradient(to bottom, #02131d 0%, #14415c 100%);
  text-align: center;
  position: absolute;
  top: 40px;
}
#PopupView .popup_IntroText {
  width: 100%;
  color: #00b4ff;
  margin-top: 1.5em;
  font-weight: bold;
  font-size: 125%;
}
#PopupView .popup_TitleText {
  width: 100%;
  color: #ffc600;
  margin-top: 1em;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 125%;
}
#PopupView .popup_BackgroundImage {
  -webkit-animation: coinBurst 0.1s steps(2) 0s infinite alternate forwards;
  -moz-animation: coinBurst 0.1s steps(2) 0s infinite alternate forwards;
  -o-animation: coinBurst 0.1s steps(2) 0s infinite alternate forwards;
  animation: coinBurst 0.1s steps(2) 0s infinite alternate forwards;
  pointer-events: none;
  width: 294px;
  height: 294px;
  top: 71px;
  left: 71px;
  background-image: url('../Images/STO_CoinSunBurstSheet@2x.png');
  position: absolute;
  background-size: 200% 100%;
}
#PopupView .popup_ForegroundImage {
  pointer-events: none;
  width: 148px;
  height: 148px;
  top: 144px;
  left: 144px;
  position: absolute;
  background-size: contain;
}
#PopupView .footer {
  position: relative;
  top: 212px;
}
#PopupView .popup_DetailText {
  width: 100%;
}
#PopupView .buttonWrap {
  margin-top: 1em;
}
#PopupView lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes coinBurst{ 0%{ background-position: 0px; } 100% { background-position: -588px; }}
@-moz-keyframes coinBurst{ 0%{ background-position: 0px; } 100% { background-position: -588px; }}
@-o-keyframes coinBurst{ 0%{ background-position: 0px; } 100% { background-position: -588px; }}
@keyframes coinBurst{ 0%{ background-position: 0px; } 100% { background-position: -588px; }}
lesshat-selector {
    -lh-property: 0;
}
@media screen and (max-width: 436px), screen and (max-height: 476px) {
  #PopupView .window {
    width: 300px;
    height: 332px;
  }
  #PopupView .popup_CloseButton {
    width: 80px;
    height: 32px;
    border-width: 1px 1px 0px 1px;
  }
  #PopupView .popup_CloseButton > .buttonText {
    width: 80px;
    height: 32px;
  }
  #PopupView .popup_Content {
    width: 300px;
    height: 300px;
    border: 1px solid #ffffff;
    padding: 8px;
    top: 32px;
  }
  #PopupView .popup_IntroText {
    font-size: 100%;
  }
  #PopupView .popup_TitleText {
    font-size: 100%;
  }
  #PopupView .popup_BackgroundImage {
    -webkit-animation-name: coinBurstMedium;
    -moz-animation-name: coinBurstMedium;
    -o-animation-name: coinBurstMedium;
    animation-name: coinBurstMedium;
    width: 220px;
    height: 220px;
    top: 48px;
    left: 48px;
  }
  #PopupView .popup_ForegroundImage {
    width: 111px;
    height: 111px;
    top: 102.5px;
    left: 102.5px;
  }
  #PopupView .footer {
    top: 136px;
  }
  #PopupView lesshat-selector {
    -lh-property: 0; } 
@-webkit-keyframes coinBurstMedium{ 0%{ background-position: 0px; } 100% { background-position: -440px; }}
@-moz-keyframes coinBurstMedium{ 0%{ background-position: 0px; } 100% { background-position: -440px; }}
@-o-keyframes coinBurstMedium{ 0%{ background-position: 0px; } 100% { background-position: -440px; }}
@keyframes coinBurstMedium{ 0%{ background-position: 0px; } 100% { background-position: -440px; }}
lesshat-selector {
    -lh-property: 0;
  }
}
@media screen and (max-width: 302px), screen and (max-height: 335px) {
  #PopupView .window {
    width: 218px;
    height: 258px;
  }
  #PopupView .popup_Content {
    width: 218px;
    height: 218px;
    padding: 12px;
  }
  #PopupView .popup_IntroText {
    margin-top: 2px;
  }
  #PopupView .popup_TitleText {
    margin-top: 2px;
  }
  #PopupView .popup_BackgroundImage {
    width: 147px;
    height: 147px;
    top: 47.5px;
    left: 47.5px;
    -webkit-animation-name: coinBurstSmall;
    -moz-animation-name: coinBurstSmall;
    -o-animation-name: coinBurstSmall;
    animation-name: coinBurstSmall;
  }
  #PopupView .popup_ForegroundImage {
    width: 74px;
    height: 74px;
    top: 84px;
    left: 84px;
  }
  #PopupView .footer {
    top: 100px;
  }
  #PopupView .buttonWrap {
    margin-top: 4px;
  }
  #PopupView lesshat-selector {
    -lh-property: 0; } 
@-webkit-keyframes coinBurstSmall{ 0%{ background-position: 0px; } 100% { background-position: -294px; }}
@-moz-keyframes coinBurstSmall{ 0%{ background-position: 0px; } 100% { background-position: -294px; }}
@-o-keyframes coinBurstSmall{ 0%{ background-position: 0px; } 100% { background-position: -294px; }}
@keyframes coinBurstSmall{ 0%{ background-position: 0px; } 100% { background-position: -294px; }}
lesshat-selector {
    -lh-property: 0;
  }
}
.popup_ForegroundImage.bigSTO_Coin-GrimReaper {
  background-image: url('../Images/STO_Coin-GrimReaper_lg.png');
}
.popup_ForegroundImage.bigSTO_Coin-Loyalty {
  background-image: url('../Images/STO_Coin-Loyalty_lg.png');
}
.popup_ForegroundImage.bigSTO_Coin-CleverClogs {
  background-image: url('../Images/STO_Coin-CleverClogs_lg.png');
}
.popup_ForegroundImage.bigSTO_Coin-SmartyPants {
  background-image: url('../Images/STO_Coin-SmartyPants_lg.png');
}
.popup_ForegroundImage.bigSTO_Coin-PublicHealthNerd {
  background-image: url('../Images/STO_Coin-PublicHealthNerd_lg.png');
}
.popup_ForegroundImage.bigSTO_Coin-Overachiever {
  background-image: url('../Images/STO_Coin-Overachiever_lg.png');
}
.popup_ForegroundImage.bigSTO_Coin-Rubbish {
  background-image: url('../Images/STO_Coin-Rubbish_lg.png');
}
.popup_ForegroundImage.bigSTO_Coin-CDCBrownNose {
  background-image: url('../Images/STO_Coin-CDCBrownNose_lg.png');
}
.popup_ForegroundImage.bigSTO_Coin-Embark {
  background-image: url('../Images/STO_Coin-Embark_lg.png');
}
.popup_ForegroundImage.bigSTO_Coin-SocialButterfly {
  background-image: url('../Images/STO_Coin-SocialButterfly_lg.png');
}
.popup_ForegroundImage.bigSTO_Coin-Critic {
  background-image: url('../Images/STO_Coin-Critic_lg.png');
}
.popup_ForegroundImage.bigSTO_Coin-DataGeek {
  background-image: url('../Images/STO_Coin-DataGeek_lg.png');
}
.popup_ForegroundImage.bigSTO_Coin-KnowledgeSeeker {
  background-image: url('../Images/STO_Coin-KnowledgeSeeker_lg.png');
}
.popup_ForegroundImage.bigSTO_Coin-LifeSaver {
  background-image: url('../Images/STO_Coin-LifeSaver_lg.png');
}
.popup_ForegroundImage.bigSTO_Coin-Underachiever {
  background-image: url('../Images/STO_Coin-Underachiever_lg.png');
}
#RatePopupView {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -o-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
  z-index: 100;
}
#RatePopupView.reveal {
  opacity: 1;
}
#RatePopupView .window {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 400px;
  height: 440px;
}
#RatePopupView .popup_CloseButton {
  position: absolute;
  right: 0;
  top: 0;
  width: 108px;
  height: 40px;
  border-radius: 9px 9px 0px 0px;
  border: 2px solid #ffffff;
  border-bottom-width: 0px;
  pointer-events: all;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxZDU0NzgiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI4NmM5YSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #1d5478 0%, #286c9a 100%);
  background-image: -moz-linear-gradient(top, #1d5478 0%, #286c9a 100%);
  background-image: -o-linear-gradient(top, #1d5478 0%, #286c9a 100%);
  background-image: linear-gradient(to bottom, #1d5478 0%, #286c9a 100%);
  cursor: pointer;
}
#RatePopupView .popup_CloseButton > .buttonText {
  width: 108px;
  height: 40px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
#RatePopupView .popup_Content {
  width: 400px;
  height: 400px;
  border: 2px solid #ffffff;
  overflow: hidden;
  font-color: white;
  padding: 12px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMjEzMWQiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0NDE1YyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #02131d 0%, #14415c 100%);
  background-image: -moz-linear-gradient(top, #02131d 0%, #14415c 100%);
  background-image: -o-linear-gradient(top, #02131d 0%, #14415c 100%);
  background-image: linear-gradient(to bottom, #02131d 0%, #14415c 100%);
  text-align: center;
  position: absolute;
  top: 40px;
}
#RatePopupView .popup_IntroText {
  position: absolute;
  top: 138px;
  width: 100%;
  color: #00b4ff;
  margin-top: 1.5em;
  font-weight: bold;
  font-size: 125%;
}
#RatePopupView .popup_TitleText {
  position: absolute;
  top: 201.25px;
  color: white;
  font-weight: normal;
  font-size: 80%;
}
#RatePopupView .popup_BackgroundImage {
  pointer-events: none;
  width: 230px;
  height: 230px;
  top: -10px;
  left: 85px;
  background-image: url('../Images/STO_CoinSunBurstSheet@2x.png');
  position: absolute;
  background-size: 200% 100%;
}
#RatePopupView .popup_ForegroundImage {
  pointer-events: none;
  width: 100px;
  height: 100px;
  top: 50px;
  left: 150px;
  position: absolute;
  background-size: contain;
  border-radius: 5px;
  background-image: url('../Images/16x10/Large/Icons/Icon-72@2x.png');
}
#RatePopupView .rate-button {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../Images/STO_Btn-Rate-Yes.png);
  border-radius: 5px;
  color: black;
  width: 250px;
  height: 40px;
  bottom: 110px;
  left: 75px;
  font-weight: bold;
  padding-top: 5px;
}
#RatePopupView .remind-button {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../Images/STO_Btn-Rate-Remind.png);
  border-radius: 5px;
  color: black;
  width: 250px;
  height: 40px;
  bottom: 65px;
  left: 75px;
  font-weight: bold;
  padding-top: 5px;
}
#RatePopupView .dont-ask-button {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../Images/STO_Btn-Rate-DontAsk.png);
  border-radius: 5px;
  color: black;
  width: 250px;
  height: 40px;
  bottom: 20px;
  left: 75px;
  font-weight: bold;
  padding-top: 5px;
}
@media screen and (max-width: 400px), screen and (max-height: 440px) {
  #RatePopupView .window {
    width: 300px;
    height: 332px;
  }
  #RatePopupView .popup_CloseButton {
    width: 80px;
    height: 32px;
    border-width: 1px 1px 0px 1px;
  }
  #RatePopupView .popup_CloseButton > .buttonText {
    width: 80px;
    height: 32px;
  }
  #RatePopupView .popup_Content {
    width: 300px;
    height: 300px;
    border: 1px solid #ffffff;
    padding: 8px;
    top: 32px;
  }
  #RatePopupView .popup_IntroText {
    font-size: 100%;
  }
  #RatePopupView .popup_TitleText {
    font-size: 100%;
  }
  #RatePopupView .popup_BackgroundImage {
    -webkit-animation-name: coinBurstMedium;
    -moz-animation-name: coinBurstMedium;
    -o-animation-name: coinBurstMedium;
    animation-name: coinBurstMedium;
    width: 220px;
    height: 220px;
    top: 48px;
    left: 48px;
  }
  #RatePopupView .popup_ForegroundImage {
    width: 111px;
    height: 111px;
    top: 102.5px;
    left: 102.5px;
  }
}
@media screen and (max-width: 302px), screen and (max-height: 335px) {
  #RatePopupView .window {
    width: 218px;
    height: 258px;
  }
  #RatePopupView .popup_Content {
    width: 218px;
    height: 218px;
    padding: 12px;
  }
  #RatePopupView .popup_IntroText {
    margin-top: 2px;
  }
  #RatePopupView .popup_TitleText {
    margin-top: 2px;
  }
  #RatePopupView .popup_BackgroundImage {
    width: 147px;
    height: 147px;
    top: 47.5px;
    left: 47.5px;
    -webkit-animation-name: coinBurstSmall;
    -moz-animation-name: coinBurstSmall;
    -o-animation-name: coinBurstSmall;
    animation-name: coinBurstSmall;
  }
  #RatePopupView .popup_ForegroundImage {
    width: 74px;
    height: 74px;
    top: 84px;
    left: 84px;
  }
}
#LearnMoreView {
  height: 100%;
  color: white;
  position: relative;
  margin: 0 2em;
}
@media only screen and (max-height: 659px) {
  #LearnMoreView {
    margin: 0 1em;
  }
}
#LearnMoreView .backToResultsButton {
  background-image: url(../Images/STO_Btn-BackToResults_Small.png);
  height: 42px;
  width: 200px;
  pointer-events: all;
  cursor: pointer;
}
#LearnMoreView .learnMoreText {
  top: 3.5em;
  height: 70% !important;
}
#LearnMoreView .learnMoreText > ul {
  padding-left: 20px;
  list-style-position: outside;
}
#LearnMoreView .learnMoreText > ul > li {
  list-style-position: outside;
}
#LearnMoreView .captionText a {
  color: #36D7FF;
  text-decoration: underline;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
}
#LearnMoreView .captionText li {
  padding-top: 2px;
  padding-bottom: 2px;
}
@media screen and (max-height: 660) {
  #LearnMoreView .caption p {
    display: none;
  }
}
@media only screen and (min-width: 1200px) {
  #LearnMoreView .learnMoreText {
    font-size: 1.1em;
  }
}
@media screen and (min-height: 660px) {
  #AchievementListView {
    height: 100%;
  }
  #achievementTable {
    height: 90%;
  }
  #scrollTable {
    height: 90%;
    overflow: auto;
  }
  .tableDim {
    height: 100%;
  }
  #blankTableHeading {
    width: 115px;
  }
  #achievementTableHeading {
    width: 15%;
  }
  .coinDiv {
    position: relative;
    margin-top: 2px;
    margin-bottom: 2px;
  }
  #AchievementHeading {
    position: relative;
    height: 15%;
    margin: 0 !important;
    padding-top: .5em;
  }
}
#AchievementListView {
  padding: 1em;
}
#AchievementListView .countText {
  text-align: center;
  color: white;
}
#AchievementListView table {
  width: 100%;
  border: 0;
  border-spacing: 0;
  padding: 0;
  border-collapse: collapse;
}
#AchievementListView thead {
  background-color: #111;
  color: white;
}
#AchievementListView th {
  line-height: 2em;
}
#AchievementListView tbody > tr {
  border-color: black;
  border-collapse: separate;
  padding: 2px;
}
#AchievementListView #AchievementHeading {
  color: #888;
  font-size: 250%;
  margin-bottom: 0.25em;
}
#AchievementListView .coin {
  display: inline-block;
  width: 85px;
  height: 85px;
  background-size: contain;
  margin: 0 1em;
  position: relative;
  top: -15px;
}
#AchievementListView .numberCoin {
  width: 20px;
  height: 20px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  position: relative;
  left: 70px;
  top: 5px;
  z-index: 1;
  box-sizing: initial;
  background-color: #bc0000;
  background: -moz-linear-gradient(100% 59% 90deg, #bc0000, #feb9be);
  background: -webkit-gradient(linear, 0% 0%, 0% 78%, from(#feb9be), to(#bc0000));
  border: 2px solid #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}
#BadgeListView {
  padding: 1em;
}
#BadgeListView table {
  width: 100%;
}
#BadgeListView td {
  width: 33%;
  text-align: center;
}
#BadgeListView .space {
  height: 6em;
}
#BadgeListView .badgeTable > h1 {
  color: #888;
  font-size: 250%;
  margin-bottom: 0.25em;
}
#BadgeListView .badgeTable > h2 {
  text-align: center;
  font-size: 150%;
  width: 694px;
  height: 47px;
  max-width: 100%;
  margin: 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
}
#BadgeListView .badgeTable > h2.level1 {
  color: #08557b;
  background-image: url("../Images/STO_badge_level_divider_L1.png");
}
#BadgeListView .badgeTable > h2.level2 {
  color: #ffc600;
  background-image: url("../Images/STO_badge_level_divider_L2.png");
}
#BadgeListView h3 {
  color: black;
}
#BadgeListView .badge {
  display: inline-block;
  width: 141px;
  height: 185px;
  background-size: contain;
}
#BadgeListView .lock {
  background-image: url("../Images/STO_Ribbon_grey.png");
}
#BadgeListView .badge0_locked {
  background-image: url("../Images/STO_Badges_01-Trainee_gry.png");
}
#BadgeListView .badge1_locked {
  background-image: url("../Images/STO_Badges_02-Novice_gry.png");
}
#BadgeListView .badge2_locked {
  background-image: url("../Images/STO_Badges_03-Apprentice_gry.png");
}
#BadgeListView .badge3_locked {
  background-image: url("../Images/STO_Badges_04-Assistant_gry.png");
}
#BadgeListView .badge4_locked {
  background-image: url("../Images/STO_Badges_05-Specialist_gry.png");
}
#BadgeListView .badge5_locked {
  background-image: url("../Images/STO_Badges_06-SeniorSpecialist_gry.png");
}
#BadgeListView .badge6_locked {
  background-image: url("../Images/STO_Badges_07-Investigator_gry.png");
}
#BadgeListView .badge7_locked {
  background-image: url("../Images/STO_Badges_08-LeadInvestigator_gry.png");
}
#BadgeListView .badge8_locked {
  background-image: url("../Images/STO_Badges_09-AssistantChief_gry.png");
}
#BadgeListView .badge9_locked {
  background-image: url("../Images/STO_Badges_10-Chief_gry.png");
}
#BadgeListView .badge10_locked {
  background-image: url("../Images/STO_Badges_11-Master_gry.png");
}
#BadgeListView .badge11_locked {
  background-image: url("../Images/STO_Badges_12-DeputyDiseaseDetective_gry.png");
}
#BadgeListView .badge12_locked {
  background-image: url("../Images/STO_Badges_13-DiseaseDetective_gry.png");
}
#BadgeListView .badge13_locked {
  background-image: url("../Images/STO_Ribbon_01_surveillance_gry.png");
}
#BadgeListView .badge14_locked {
  background-image: url("../Images/STO_Ribbon_02_diagnostics_gry.png");
}
#BadgeListView .badge15_locked {
  background-image: url("../Images/STO_Ribbon_03_medical-assessment_gry.png");
}
#BadgeListView .badge16_locked {
  background-image: url("../Images/STO_Ribbon_04_lab-research_gry.png");
}
#BadgeListView .badge17_locked {
  background-image: url("../Images/STO_Ribbon_05_data-analysis_gry.png");
}
#BadgeListView .badge18_locked {
  background-image: url("../Images/STO_Ribbon_06_statistics_gry.png");
}
#BadgeListView .badge19_locked {
  background-image: url("../Images/STO_Ribbon_07_scientific-investigation_gry.png");
}
#BadgeListView .badge20_locked {
  background-image: url("../Images/STO_Ribbon_08_treatment_gry.png");
}
#BadgeListView .badge0_unlocked {
  background-image: url("../Images/STO_Badges_01-Trainee.png");
}
#BadgeListView .badge1_unlocked {
  background-image: url("../Images/STO_Badges_02-Novice.png");
}
#BadgeListView .badge2_unlocked {
  background-image: url("../Images/STO_Badges_03-Apprentice.png");
}
#BadgeListView .badge3_unlocked {
  background-image: url("../Images/STO_Badges_04-Assistant.png");
}
#BadgeListView .badge4_unlocked {
  background-image: url("../Images/STO_Badges_05-Specialist.png");
}
#BadgeListView .badge5_unlocked {
  background-image: url("../Images/STO_Badges_06-SeniorSpecialist.png");
}
#BadgeListView .badge6_unlocked {
  background-image: url("../Images/STO_Badges_07-Investigator.png");
}
#BadgeListView .badge7_unlocked {
  background-image: url("../Images/STO_Badges_08-LeadInvestigator.png");
}
#BadgeListView .badge8_unlocked {
  background-image: url("../Images/STO_Badges_09-AssistantChief.png");
}
#BadgeListView .badge9_unlocked {
  background-image: url("../Images/STO_Badges_10-Chief.png");
}
#BadgeListView .badge10_unlocked {
  background-image: url("../Images/STO_Badges_11-Master.png");
}
#BadgeListView .badge11_unlocked {
  background-image: url("../Images/STO_Badges_12-DeputyDiseaseDetective.png");
}
#BadgeListView .badge12_unlocked {
  background-image: url("../Images/STO_Badges_13-DiseaseDetective.png");
}
#BadgeListView .badge13_unlocked {
  background-image: url("../Images/STO_Ribbon_01_surveillance.png");
}
#BadgeListView .badge14_unlocked {
  background-image: url("../Images/STO_Ribbon_02_diagnostics.png");
}
#BadgeListView .badge15_unlocked {
  background-image: url("../Images/STO_Ribbon_03_medical-assessment.png");
}
#BadgeListView .badge16_unlocked {
  background-image: url("../Images/STO_Ribbon_04_lab-research.png");
}
#BadgeListView .badge17_unlocked {
  background-image: url("../Images/STO_Ribbon_05_data-analysis.png");
}
#BadgeListView .badge18_unlocked {
  background-image: url("../Images/STO_Ribbon_06_statistics.png");
}
#BadgeListView .badge19_unlocked {
  background-image: url("../Images/STO_Ribbon_07_scientific-investigation.png");
}
#BadgeListView .badge20_unlocked {
  background-image: url("../Images/STO_Ribbon_08_treatment.png");
}
@media screen and (min-height: 660px) {
  #ScoreMeterView {
    height: 100%;
  }
  #ScoreMeterView .scoreBottomHalf {
    height: 50%;
  }
  #ScoreMeterView .outbreakScoreTable {
    height: 15%;
  }
  #ScoreMeterView #scrollTable {
    height: 80%;
    overflow: scroll;
  }
}
#ScoreMeterView {
  padding: 1em;
}
#ScoreMeterView .green {
  color: #00aa00;
}
#ScoreMeterView .scoreTopHalf h1 {
  color: #888;
  font-size: 250%;
  margin-bottom: 0.25em;
}
#ScoreMeterView .arrows {
  height: 20px;
  display: inline-block;
  width: 340px;
  position: relative;
}
#ScoreMeterView #level1Arrow,
#ScoreMeterView #level2Arrow {
  position: absolute;
  color: #00b4ff;
}
#ScoreMeterView #level1Arrow img,
#ScoreMeterView #level2Arrow img {
  display: inline-block;
}
#ScoreMeterView #level2Arrow #level2Unlock {
  top: -2px;
  position: relative;
  margin-left: 7px;
  font-size: .7em;
  color: black;
}
#ScoreMeterView #level2Arrow {
  left: 209px;
}
#ScoreMeterView #level1Arrow {
  margin: 5px;
}
#ScoreMeterView #scoreArrowHolder {
  display: inline-block;
  width: 340px;
  height: 57px;
  margin-bottom: .5em;
}
#ScoreMeterView #scoreArrow {
  position: relative;
}
#ScoreMeterView #scoreArrowHeading {
  font-size: .7em;
  display: block;
}
#ScoreMeterView #scoreNum {
  display: block;
  color: #00aa00;
}
#ScoreMeterView .meter {
  margin: 0 0 .2em 256px;
  width: 26px;
  height: 300px;
  position: relative;
  border: 3px solid #999;
  -webkit-border-radius: 8px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 8px;
  -moz-background-clip: padding;
  border-radius: 8px;
  background-clip: padding-box;
}
#ScoreMeterView .meter.horizontal {
  width: 350px;
  height: 34px;
  margin-top: 1em;
}
#ScoreMeterView .meter.horizontal .track {
  left: 0;
  height: 28px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM5Njk2OTYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMiUiIHN0b3AtY29sb3I9IiNiYmJiYmIiIHN0b3Atb3BhY2l0eT0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNsZXNzaGF0LWdlbmVyYXRlZCkiIC8+PC9zdmc+);
  background-size: 17% 100%;
  -webkit-border-radius: 5px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 5px;
  -moz-background-clip: padding;
  border-radius: 5px;
  background-clip: padding-box;
}
#ScoreMeterView .meter.horizontal .goal {
  left: 100%;
  height: 100%;
}
#ScoreMeterView #scoreMeterProgress {
  position: absolute;
  left: 0%;
  top: 0%;
  height: 100%;
  width: 0%;
  background-color: #00b4ff;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-background-clip: padding-box;
  -moz-border-radius-bottomleft: 5px;
  -moz-background-clip: padding;
  border-bottom-left-radius: 5px;
  background-clip: padding-box;
}
#ScoreMeterView #scoreMeterText {
  position: absolute;
  left: 0.5em;
  top: 0%;
  height: 100%;
  width: 0%;
  white-space: nowrap;
  color: white;
  line-height: 28px;
}
#ScoreMeterView .scoreViewLeft {
  float: left;
  margin-right: 1em;
}
#ScoreMeterView .badge {
  margin: 1em auto;
  width: 141px;
  height: 185px;
  background-size: contain;
}
#ScoreMeterView .asterisk {
  padding-left: 255px;
}
#ScoreMeterView dl {
  display: inline-block;
  font-size: 1.25em;
  margin: 0.1em 0;
}
#ScoreMeterView dl dt {
  clear: left;
  float: left;
  width: 5em;
  margin: 0.5em 0;
  font-weight: normal;
}
#ScoreMeterView dl dd {
  padding: 0.5em 0;
  margin-left: 5em;
  font-weight: bold;
}
#ScoreMeterView dd.rank {
  color: #08557b;
}
#ScoreMeterView dd.score {
  color: black;
}
#ScoreMeterView .scoreBottomHalf {
  clear: both;
  padding: 0.5em 0;
}
#ScoreMeterView table {
  width: 100%;
  border: 0;
  border-spacing: 0;
  padding: 0;
  border-collapse: collapse;
}
#ScoreMeterView thead {
  background-color: #111;
  color: white;
}
#ScoreMeterView th,
#ScoreMeterView td {
  line-height: 2em;
}
#ScoreMeterView th {
  text-align: left;
  padding-left: 5px;
}
#ScoreMeterView th:last-child {
  width: 30%;
}
#ScoreMeterView .tableLevelHead {
  background-color: #c8c8c8;
  text-align: left;
  padding-left: 5px;
}
#ScoreMeterView tbody > tr {
  border-color: black;
  border-collapse: separate;
  padding: 2px;
  border-top: 1px solid black !important;
  border-bottom: none !important;
}
#InfoViewCategories #InfoSelectorView {
  bottom: auto;
  position: static;
}
#InfoSelectorView {
  bottom: 0;
  position: absolute;
  width: 100%;
}
#InfoSelectorView .navBar {
  width: 100%;
  text-align: center;
  color: white;
  border: none;
  border-spacing: 0;
  text-transform: uppercase;
}
#InfoSelectorView .navBar tr {
  border: none;
}
#InfoSelectorView .navBar td {
  border-left: 1px solid #44585f;
  border-right: 1px solid #44585f;
}
#InfoSelectorView .navBar td:first-child {
  border-left: none;
}
#InfoSelectorView .navBar td:last-child {
  border-right: none;
}
#InfoSelectorView .navBarLine {
  height: 9px;
  border-top: 1px solid #44585f;
}
#InfoSelectorView .navBarLine {
  background-color: #5e5e5e;
}
#InfoSelectorView .navButton {
  height: 42px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM1ZTVlNWUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMWQyNyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #5e5e5e 0%, #001d27 100%);
  background-image: -moz-linear-gradient(top, #5e5e5e 0%, #001d27 100%);
  background-image: -o-linear-gradient(top, #5e5e5e 0%, #001d27 100%);
  background-image: linear-gradient(to bottom, #5e5e5e 0%, #001d27 100%);
  border-left-color: #000F15;
  border-right-color: #4D636B;
  cursor: pointer;
}
.quickMenuSelectorView {
  position: absolute;
  width: 100%;
  bottom: 3em;
}
.learnIcon:before {
  content: ' ';
  background: url('../Images/Icon_Learn_Off@2x.png');
  background-size: contain;
  width: 24px;
  height: 24px;
  display: inline-block;
  margin: 0px 8px -4px 0px;
}
.scoresIcon:before {
  content: ' ';
  background: url('../Images/Icon_Scores_Off@2x.png');
  background-size: contain;
  width: 24px;
  height: 24px;
  display: inline-block;
  margin: 0px 8px -4px 0px;
}
.aboutIcon:before {
  content: ' ';
  background: url('../Images/Icon_About_Off@2x.png');
  background-size: contain;
  width: 24px;
  height: 24px;
  display: inline-block;
  margin: 0px 8px -4px 0px;
}
.helpIcon:before {
  content: ' ';
  background: url('../Images/Icon_Help_Off@2x.png');
  background-size: contain;
  width: 24px;
  height: 24px;
  display: inline-block;
  margin: 0px 8px -4px 0px;
}
#InfoView #InfoSelectorView .learn .navBarLine {
  background-color: #784100;
  border-top-color: #8a5a22;
}
#InfoView #InfoSelectorView .learn .learnButton {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM3ODQxMDAiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU4MmEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #784100 0%, #582a00 100%);
  background-image: -moz-linear-gradient(top, #784100 0%, #582a00 100%);
  background-image: -o-linear-gradient(top, #784100 0%, #582a00 100%);
  background-image: linear-gradient(to bottom, #784100 0%, #582a00 100%);
  border-right-color: #8a5a22;
}
#InfoView #InfoSelectorView .learn .learnIcon:before {
  background-image: url('../Images/Icon_Learn_On@2x.png');
}
#InfoView #InfoSelectorView .scores .scoresIcon:before {
  background-image: url('../Images/Icon_Scores_On@2x.png');
}
#InfoView #InfoSelectorView .scores .navBarLine {
  background-color: #9a2801;
  border-top-color: #a94322;
}
#InfoView #InfoSelectorView .scores .scoresButton {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM5YTI4MDEiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdiMWEwMSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #9a2801 0%, #7b1a01 100%);
  background-image: -moz-linear-gradient(top, #9a2801 0%, #7b1a01 100%);
  background-image: -o-linear-gradient(top, #9a2801 0%, #7b1a01 100%);
  background-image: linear-gradient(to bottom, #9a2801 0%, #7b1a01 100%);
  border-right-color: #a94322;
}
#InfoView #InfoSelectorView .about .aboutIcon:before {
  background-image: url('../Images/Icon_About_On@2x.png');
}
#InfoView #InfoSelectorView .about .navBarLine {
  background-color: #1f5613;
  border-top-color: #3b6d31;
}
#InfoView #InfoSelectorView .about .aboutButton {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxZjU2MTMiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE1M2IwYyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #1f5613 0%, #153b0c 100%);
  background-image: -moz-linear-gradient(top, #1f5613 0%, #153b0c 100%);
  background-image: -o-linear-gradient(top, #1f5613 0%, #153b0c 100%);
  background-image: linear-gradient(to bottom, #1f5613 0%, #153b0c 100%);
  border-right-color: #3b6d31;
}
#InfoView #InfoSelectorView .help .helpIcon:before {
  background-image: url('../Images/Icon_Help_On@2x.png');
}
#InfoView #InfoSelectorView .help .navBarLine {
  background-color: #004a7d;
  border-top-color: #22628f;
}
#InfoView #InfoSelectorView .help .helpButton {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDRhN2QiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMzI1ZSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #004a7d 0%, #00325e 100%);
  background-image: -moz-linear-gradient(top, #004a7d 0%, #00325e 100%);
  background-image: -o-linear-gradient(top, #004a7d 0%, #00325e 100%);
  background-image: linear-gradient(to bottom, #004a7d 0%, #00325e 100%);
  border-right-color: #22628f;
}
#GameView #InfoSelectorView .navBarLine {
  display: none;
}
#GameView #InfoSelectorView .navButton {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDFkMjgiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMjAyYyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #001d28 0%, #00202c 100%);
  background-image: -moz-linear-gradient(top, #001d28 0%, #00202c 100%);
  background-image: -o-linear-gradient(top, #001d28 0%, #00202c 100%);
  background-image: linear-gradient(to bottom, #001d28 0%, #00202c 100%);
  border-right-color: #4D636B  ! important;
}
#GameView #InfoSelectorView .navButton:hover {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDBmMTUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMTExNyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #000f15 0%, #001117 100%);
  background-image: -moz-linear-gradient(top, #000f15 0%, #001117 100%);
  background-image: -o-linear-gradient(top, #000f15 0%, #001117 100%);
  background-image: linear-gradient(to bottom, #000f15 0%, #001117 100%);
  border-right-color: #293438  ! important;
}
#GameView #InfoSelectorView .navButton:hover {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDBmMTUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMTExNyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #000f15 0%, #001117 100%);
  background-image: -moz-linear-gradient(top, #000f15 0%, #001117 100%);
  background-image: -o-linear-gradient(top, #000f15 0%, #001117 100%);
  background-image: linear-gradient(to bottom, #000f15 0%, #001117 100%);
  border-right-color: #293438  ! important;
}
#GameView #InfoSelectorView .navButton:hover {
  -webkit-filter: brightness(0.5);
  -moz-filter: brightness(0.5);
  -ms-filter: brightness(0.5);
  filter: brightness(0.5);
}
#InfoView {
  background-color: white;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 3;
}
#InfoView .tutorial {
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
}
#InfoViewContent {
  position: relative;
}
#InfoViewContentLeft {
  position: absolute;
}
#InfoViewContentRight {
  position: absolute;
  right: 0;
  width: 65%;
  height: 100%;
  overflow: auto;
}
#InfoExitButton {
  cursor: pointer;
  padding: 14px;
  text-align: right;
  color: white;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxNDE0MTMiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzEzMWQxNiIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #141413 0%, #131d16 100%);
  background-image: -moz-linear-gradient(top, #141413 0%, #131d16 100%);
  background-image: -o-linear-gradient(top, #141413 0%, #131d16 100%);
  background-image: linear-gradient(to bottom, #141413 0%, #131d16 100%);
}
#InfoViewContentLeft ul {
  list-style-type: none;
}
#InfoViewContentLeft #InfoPanelView {
  margin: 34px;
}
#InfoViewContentLeft .sideBar {
  width: 255px;
  padding: 18px 0 50px 0;
  background-position: top, bottom;
  background-size: contain;
  background-repeat: no-repeat;
}
#InfoViewContentLeft .sideBar.learn {
  background-image: url('../Images/STO_PgMenuTop-Learn@2x.png'), url('../Images/STO_PgMenuBottom-Learn@2x.png');
}
#InfoViewContentLeft .sideBar.scores {
  background-image: url('../Images/STO_PgMenuTop-Scores@2x.png'), url('../Images/STO_PgMenuBottom-Scores@2x.png');
}
#InfoViewContentLeft .sideBar.about {
  background-image: url('../Images/STO_PgMenuTop-About@2x.png'), url('../Images/STO_PgMenuBottom-About@2x.png');
}
#InfoViewContentLeft .sideBar.help {
  background-image: url('../Images/STO_PgMenuTop-Help@2x.png'), url('../Images/STO_PgMenuBottom-Help@2x.png');
}
#InfoViewContentLeft .navButton {
  color: black;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlMmUwZTAiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I1YjRiNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #e2e0e0 0%, #b5b4b5 100%);
  background-image: -moz-linear-gradient(top, #e2e0e0 0%, #b5b4b5 100%);
  background-image: -o-linear-gradient(top, #e2e0e0 0%, #b5b4b5 100%);
  background-image: linear-gradient(to bottom, #e2e0e0 0%, #b5b4b5 100%);
  min-height: 2em;
  cursor: pointer;
}
#InfoViewContentLeft .navButton > .buttonText {
  display: table-cell;
  vertical-align: middle;
  padding-left: 1em;
  height: 2em;
}
#InfoViewContentLeft .navButton.on {
  color: white;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM0YjRiNGIiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFkMWMxYyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #4b4b4b 0%, #1d1c1c 100%);
  background-image: -moz-linear-gradient(top, #4b4b4b 0%, #1d1c1c 100%);
  background-image: -o-linear-gradient(top, #4b4b4b 0%, #1d1c1c 100%);
  background-image: linear-gradient(to bottom, #4b4b4b 0%, #1d1c1c 100%);
}
#InfoIndexView {
  position: absolute;
  right: 1.5em;
  color: #08557b;
  text-align: center;
}
.f-y-hidescroll #InfoIndexView {
  right: 0.5em;
}
#InfoIndexView .letter {
  cursor: pointer;
}
#InfoViewContentRight.textSmall #InfoSideView {
  font-size: 80%;
}
#InfoViewContentRight.textMedium #InfoSideView {
  font-size: 100%;
}
#InfoViewContentRight.textLarge #InfoSideView {
  font-size: 120%;
}
#InfoViewContentRight.textXLarge #InfoSideView {
  font-size: 140%;
}
#InfoViewContentRight #InfoSideView {
  line-height: 1.5em;
  color: black;
  margin: 1em;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
#InfoViewContentRight #InfoSideView ul {
  list-style-position: outside;
}
#InfoViewContentRight #InfoSideView ul > li {
  list-style-position: outside;
}
#InfoViewContentRight h1,
#InfoViewContentRight h2,
#InfoViewContentRight h3,
#InfoViewContentRight a {
  color: #08557b;
}
#InfoViewContentRight h1 {
  font-size: 1.25em;
  font-weight: bold;
}
#InfoViewContentRight h2 {
  font-size: 1em;
  font-weight: bold;
}
#InfoViewContentRight h2.learnMoreTitle {
  color: #6E3900;
}
#InfoViewContentRight ul {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 0px;
  padding-left: 0px;
}
#InfoViewContentRight ul li {
  margin-left: 20px;
}
#InfoViewContentRight ul.learnMoreList li {
  color: #08557B;
}
#InfoViewContentRight ul li.listHeader {
  list-style-type: none;
  margin-left: 0px;
}
#InfoViewContentRight ul.learnMoreList li a {
  font-weight: normal;
  text-decoration: underline;
  color: #08557B;
}
#InfoViewContentRight h2 + ul.learnMoreList {
  margin-top: -8px !important;
}
#InfoViewContentRight .glossary p {
  margin-bottom: 0px;
}
#InfoViewContentRight #InfoSideView.glossary {
  margin-right: 2.5em;
}
.f-y-hidescroll #InfoViewContentRight #InfoSideView.glossary {
  margin-right: 1.5em;
}
#InfoViewContentRight .glossary div.source {
  font-size: smaller;
  margin-top: 0px;
  margin-bottom: 10px;
}
#InfoViewContentRight figure {
  width: 350px;
}
#InfoViewContentRight .glossary div.definition {
  margin-bottom: 0px;
}
#InfoViewContentRight .glossary div.definition ul {
  margin-bottom: 0px;
  padding-bottom: 0px;
}
#InfoViewContentRight figure img {
  width: 100%;
  text-align: center;
}
#InfoViewContentRight figure.figRight {
  float: right;
  margin: 10px 0px 10px 10px;
  max-width: 40%;
  border: 1px solid #ccc;
}
#InfoViewContentRight figure.figRight img {
  /*border: 1px solid #ccc;*/
}
#InfoViewContentRight figure figcaption {
  display: block;
  font-size: 11px;
  line-height: 15px;
  background-color: #EBE8E8;
  padding: 3px;
}
#InfoViewContentRight table.epiCurveTable {
  border-collapse: collapse;
  border: 1px solid #CCC;
}
#InfoViewContentRight table.epiCurveTable td {
  vertical-align: top;
  padding: 10px;
  border: 1px solid #CCC;
}
#InfoViewContentRight .versionNumber {
  text-align: left;
  color: #666;
}
#InfoViewContentRight .credits {
  text-align: left;
  color: #666;
}
#InfoViewContentRight .standardDisplay {
  display: inline-block;
}
#InfoViewContentRight .retinaDisplay {
  display: none;
}
#InfoViewContentRight .buttonRateYes {
  width: 193px;
  height: 36px;
  background-image: url(../Images/STO_Btn-Rate-Yes@2x.png);
  background-size: contain;
  background-position: center;
  display: block;
}
#InfoViewContentRight .buttonSendFeedback {
  width: 187px;
  height: 36px;
  background-image: url(../Images/STO_Btn-Send-Feedback@2x.png);
  background-size: contain;
  background-position: center;
  display: block;
  border: none !important;
}
#InfoViewContentRight .android {
  display: block;
}
#InfoViewContentRight .desktop {
  display: none;
}
#InfoViewContentRight #feedback_link_wrapper {
  height: 3em;
}
#InfoViewContentRight #feedback_link {
  border: 1px solid #08557b;
  padding: 3px;
  padding-left: 20px;
  padding-right: 20px;
}
@media all and (-webkit-min-device-pixel-ratio: 2) {
  #InfoViewContentRight .standardDisplay {
    display: none;
  }
  #InfoViewContentRight .retinaDisplay {
    display: inline-block;
  }
}
#InfoViewContentRight iframe.tellUs {
  display: block;
  border: none;
  height: 450px;
  width: 100%;
}
#InfoViewContentRight .noConnection {
  text-align: center;
  padding-top: 50px;
  display: none;
}
#InfoViewContentRight .lesson-link {
  margin: 10px;
}
#InfoViewContentRight .tutorialOne {
  background-image: url('../Images/STO_Tutorial-01.png');
  overflow: hidden;
  display: block;
  position: relative;
}
@media all and (-webkit-min-device-pixel-ratio: 2) {
  #InfoViewContentRight .tutorialOne {
    background-image: url('../Images/STO_Tutorial-01.png');
    overflow: hidden;
    display: block;
    position: relative;
  }
}
#InfoViewContentRight .tutorialOne div {
  display: inline;
  border: 1px solid red;
  position: absolute;
  opacity: 0;
}
#InfoViewContentRight .tutorialOne .section0 {
  left: 40%;
  top: 0px;
  width: 25%;
  min-height: 10%;
}
#InfoViewContentRight .tutorialOne .section1 {
  left: 0;
  top: 35%;
  width: 20%;
  min-height: 15%;
}
#InfoViewContentRight .tutorialOne .section2 {
  left: 25%;
  top: 40%;
  width: 20%;
  min-height: 15%;
}
#InfoViewContentRight .tutorialOne .section3 {
  left: 40%;
  top: 35%;
  width: 15%;
  min-height: 25%;
}
#InfoViewContentRight .tutorialOne .section4 {
  left: 10%;
  top: 50%;
  width: 20%;
  min-height: 20%;
}
#InfoViewContentRight .tutorialTwo {
  background-image: url('../Images/STO_Tutorial-02.png');
  overflow: hidden;
  display: block;
  position: relative;
}
@media all and (-webkit-min-device-pixel-ratio: 2) {
  #InfoViewContentRight .tutorialTwo {
    background-image: url('../Images/STO_Tutorial-02.png');
    overflow: hidden;
    display: block;
    position: relative;
  }
}
#InfoViewContentRight .tutorialTwo div {
  display: inline;
  border: 1px solid red;
  position: absolute;
  opacity: 0;
}
#InfoViewContentRight .tutorialTwo .section0 {
  left: 10%;
  top: 0px;
  width: 45%;
  min-height: 15%;
}
#InfoViewContentRight .tutorialTwo .section1 {
  left: 25%;
  top: 10%;
  width: 30%;
  min-height: 15%;
}
#InfoViewContentRight .tutorialTwo .section2 {
  left: 5%;
  top: 30%;
  width: 20%;
  min-height: 15%;
}
#InfoViewContentRight .tutorialTwo .section3 {
  left: 25%;
  top: 30%;
  width: 30%;
  min-height: 15%;
}
#InfoViewContentRight .tutorialThree {
  background-image: url('../Images/STO_Tutorial-03.png');
  overflow: hidden;
  display: block;
  position: relative;
}
@media all and (-webkit-min-device-pixel-ratio: 2) {
  #InfoViewContentRight .tutorialThree {
    background-image: url('../Images/STO_Tutorial-03.png');
    overflow: hidden;
    display: block;
    position: relative;
  }
}
#InfoViewContentRight .tutorialThree div {
  display: inline;
  border: 1px solid red;
  position: absolute;
  opacity: 0;
}
#InfoViewContentRight .tutorialThree .section0 {
  left: 0;
  top: 0;
  width: 35%;
  min-height: 15%;
}
#InfoViewContentRight .tutorialThree .section1 {
  left: 30%;
  top: 15%;
  width: 30%;
  min-height: 15%;
}
#InfoViewContentRight .tutorialThree .section2 {
  left: 10%;
  top: 25%;
  width: 50%;
  min-height: 15%;
}
#InfoViewContentRight .tutorialThree .section3 {
  left: 5%;
  top: 50%;
  width: 30%;
  min-height: 15%;
}
#stoRoot.desktopVersion #InfoView .tutorialOne {
  background-image: url('../Images/STO_Tutorial-01-Desktop.png');
}
#stoRoot.desktopVersion #InfoView .tutorialTwo {
  background-image: url('../Images/STO_Tutorial-02-Desktop.png');
}
#stoRoot.desktopVersion #InfoView .tutorialThree {
  background-image: url('../Images/STO_Tutorial-03-Desktop.png');
}
#stoRoot.desktopVersion #InfoView .android {
  display: none;
}
#stoRoot.desktopVersion #InfoView .desktop {
  display: block;
}
#TextSizer {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 1043px;
  text-align: right;
  line-height: 4em;
  background-color: white;
}
#TextSizer .sizer-button {
  display: inline-block;
  height: 66px;
  text-align: center;
  width: 80px;
}
#TextSizer #small-text {
  font-size: 80%;
}
#TextSizer #medium-text {
  font-size: 100%;
}
#TextSizer #large-text {
  font-size: 120%;
}
#TextSizer #xlarge-text {
  font-size: 140%;
}
#GameView.briefing #ApplicationFrameTopView,
#GameView.clue #ApplicationFrameTopView,
#GameView.response #ApplicationFrameTopView,
#GameView.debriefing #ApplicationFrameTopView {
  pointer-events: none;
}
#GameView.briefing #FakeTopView,
#GameView.clue #FakeTopView,
#GameView.response #FakeTopView,
#GameView.debriefing #FakeTopView {
  pointer-events: none;
}
#MissionMenuView {
  pointer-events: all;
  position: absolute;
  width: 100%;
  height: 455px;
  top: -433px;
  opacity: 1;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: bottom;
  background-image: url(../Images/STO_TabBG-Menu.png);
  -webkit-transition: -webkit-transform 0.4s 0.1s;
  -moz-transition: -moz-transform 0.4s 0.1s;
  -o-transition: -o-transform 0.4s 0.1s;
  transition: -webkit-transform 0.4s 0.1s,-moz-transform 0.4s 0.1s,-o-transform 0.4s 0.1s,transform 0.4s 0.1s;
}
.popTop #MissionMenuView {
  z-index: 1;
}
#MissionMenuView.enabled {
  -webkit-transform: translateY(6em);
  -moz-transform: translateY(6em);
  -o-transform: translateY(6em);
  -ms-transform: translateY(6em);
  transform: translateY(6em);
}
@media only screen and (max-height: 719px) {
  #MissionMenuView.enabled {
    -webkit-transform: translateY(5em);
    -moz-transform: translateY(5em);
    -o-transform: translateY(5em);
    -ms-transform: translateY(5em);
    transform: translateY(5em);
  }
}
#MissionMenuView.open {
  -webkit-transform: translateY(25em);
  -moz-transform: translateY(25em);
  -o-transform: translateY(25em);
  -ms-transform: translateY(25em);
  transform: translateY(25em);
}
#MissionMenuView.open .menu tr:not(.locked) {
  cursor: pointer;
}
#MissionMenuView.open .menuTitle:after {
  background-image: url('../Images/STO_QuickMenuArrow-Up@2x.png');
}
@media only screen and (max-height: 719px) {
  #MissionMenuView.open {
    -webkit-transform: translateY(24em);
    -moz-transform: translateY(24em);
    -o-transform: translateY(24em);
    -ms-transform: translateY(24em);
    transform: translateY(24em);
  }
}
@media only screen and (max-height: 399px) {
  #MissionMenuView.open {
    -webkit-transform: translateY(21em);
    -moz-transform: translateY(21em);
    -o-transform: translateY(21em);
    -ms-transform: translateY(21em);
    transform: translateY(21em);
  }
  #MissionMenuView.open .menu {
    height: 14.5em;
  }
}
#MissionMenuView .menuIcon {
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  margin-right: 1em;
}
#MissionMenuView .menuHome .menuIcon {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-Menu-Back@2x.png');
}
#MissionMenuView .menuClue.completed .menuIcon {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-Menu-Check@2x.png');
}
#MissionMenuView .menuClue.locked .menuIcon,
#MissionMenuView .menuResults.locked .menuIcon {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-Menu-Lock@2x.png');
}
#MissionMenuView .menuRestart .menuIcon {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-Menu-Refresh@2x.png');
}
#MissionMenuView .menu {
  position: absolute;
  width: 90%;
  left: 5%;
  bottom: 4.25em;
  color: #21d3ff;
  overflow: auto;
}
#MissionMenuView .menu table {
  width: 100%;
  border-collapse: collapse;
  border-bottom: 1px solid rgba(80, 80, 80, 0.6);
  border-left: 0px;
  border-right: 0px;
  border-top: 0px;
}
#MissionMenuView .menu tr {
  border-color: rgba(80, 80, 80, 0.6);
  border-top: none;
  height: 2em;
}
#MissionMenuView .menu td {
  color: #21d3ff;
}
#MissionMenuView .menu tr.highlight {
  background-color: blue;
}
#MissionMenuView .menu td.cellIcon {
  width: 25%;
  text-align: right;
}
#MissionMenuView .menu td.cellName {
  width: 6em;
}
#MissionMenuView .menu td.cellDescription {
  width: 12em;
}
#MissionMenuView .menu .active {
  color: #ffc600;
}
#MissionMenuView .menu .completed {
  color: white;
}
#MissionMenuView .menu .locked {
  color: #859DAD;
}
#MissionMenuView .menu .active td {
  color: #ffc600;
}
#MissionMenuView .menu .completed td {
  color: white;
}
#MissionMenuView .menu .locked td {
  color: #859DAD;
}
#MissionMenuView .tableMissionMenuView tbody tr.highlight {
  background-color: blue;
}
#MissionMenuView .menuTitle {
  pointer-events: all;
  color: white;
  position: absolute;
  left: 8%;
  text-transform: uppercase;
  display: inline-block;
  padding: 0.5em;
  margin: -0.5em;
  cursor: pointer;
}
#MissionMenuView .menuTitle:after {
  content: " ";
  background-image: url('../Images/STO_QuickMenuArrow-Down@2x.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: 12px;
  height: 12px;
  position: absolute;
  bottom: 12px;
}
@media only screen and (max-height: 559px) {
  #MissionMenuView .tableMenuTitle {
    font-size: 0.8em;
  }
}
.briefing #MissionMenuView .menuRestart .menuIcon {
  background-image: url('../Images/16x10/Large/Icons/STO_ico-Menu-Refresh-off@2x.png');
}
#InfoDiscView {
  background-image: url("../Images/STO_Tool-BG@2x.png");
  background-repeat: no-repeat;
  background-position: 100%;
  background-size: contain;
  position: absolute;
  right: -137px;
  bottom: 0;
  z-index: 2;
  width: 137px;
  height: 254px;
  max-width: 15%;
  max-height: 50%;
}
#InfoDiscView .infoDisc {
  background-size: contain;
  position: absolute;
  background-repeat: no-repeat;
  background-position: 100%;
  top: 35%;
  right: -12%;
  width: 75px;
  height: 75px;
  max-width: 55%;
  max-height: 33%;
  cursor: pointer;
}
#InfoDiscView .learnSphere {
  background-image: url("../Images/STO_Tool-Btn-Learn@2x.png");
  -webkit-transform: rotate(65deg) translateX(-125%) rotate(-65deg);
  -moz-transform: rotate(65deg) translateX(-125%) rotate(-65deg);
  -o-transform: rotate(65deg) translateX(-125%) rotate(-65deg);
  -ms-transform: rotate(65deg) translateX(-125%) rotate(-65deg);
  transform: rotate(65deg) translateX(-125%) rotate(-65deg);
}
@media only screen and (max-height: 559px) {
  #InfoDiscView .learnSphere {
    -webkit-transform: rotate(65deg) translateX(-115%) rotate(-65deg);
    -moz-transform: rotate(65deg) translateX(-115%) rotate(-65deg);
    -o-transform: rotate(65deg) translateX(-115%) rotate(-65deg);
    -ms-transform: rotate(65deg) translateX(-115%) rotate(-65deg);
    transform: rotate(65deg) translateX(-115%) rotate(-65deg);
  }
}
@media only screen and (max-height: 399px) {
  #InfoDiscView .learnSphere {
    -webkit-transform: rotate(65deg) translateX(-100%) rotate(-65deg);
    -moz-transform: rotate(65deg) translateX(-100%) rotate(-65deg);
    -o-transform: rotate(65deg) translateX(-100%) rotate(-65deg);
    -ms-transform: rotate(65deg) translateX(-100%) rotate(-65deg);
    transform: rotate(65deg) translateX(-100%) rotate(-65deg);
  }
}
#InfoDiscView .scoresSphere {
  background-image: url("../Images/STO_Tool-Btn-Scores@2x.png");
  -webkit-transform: rotate(20deg) translateX(-125%) rotate(-20deg);
  -moz-transform: rotate(20deg) translateX(-125%) rotate(-20deg);
  -o-transform: rotate(20deg) translateX(-125%) rotate(-20deg);
  -ms-transform: rotate(20deg) translateX(-125%) rotate(-20deg);
  transform: rotate(20deg) translateX(-125%) rotate(-20deg);
}
@media only screen and (max-height: 559px) {
  #InfoDiscView .scoresSphere {
    -webkit-transform: rotate(20deg) translateX(-115%) rotate(-20deg);
    -moz-transform: rotate(20deg) translateX(-115%) rotate(-20deg);
    -o-transform: rotate(20deg) translateX(-115%) rotate(-20deg);
    -ms-transform: rotate(20deg) translateX(-115%) rotate(-20deg);
    transform: rotate(20deg) translateX(-115%) rotate(-20deg);
  }
}
@media only screen and (max-height: 399px) {
  #InfoDiscView .scoresSphere {
    -webkit-transform: rotate(20deg) translateX(-100%) rotate(-20deg);
    -moz-transform: rotate(20deg) translateX(-100%) rotate(-20deg);
    -o-transform: rotate(20deg) translateX(-100%) rotate(-20deg);
    -ms-transform: rotate(20deg) translateX(-100%) rotate(-20deg);
    transform: rotate(20deg) translateX(-100%) rotate(-20deg);
  }
}
#InfoDiscView .aboutSphere {
  background-image: url("../Images/STO_Tool-Btn-About@2x.png");
  -webkit-transform: rotate(-20deg) translateX(-125%) rotate(20deg);
  -moz-transform: rotate(-20deg) translateX(-125%) rotate(20deg);
  -o-transform: rotate(-20deg) translateX(-125%) rotate(20deg);
  -ms-transform: rotate(-20deg) translateX(-125%) rotate(20deg);
  transform: rotate(-20deg) translateX(-125%) rotate(20deg);
}
@media only screen and (max-height: 559px) {
  #InfoDiscView .aboutSphere {
    -webkit-transform: rotate(-20deg) translateX(-115%) rotate(20deg);
    -moz-transform: rotate(-20deg) translateX(-115%) rotate(20deg);
    -o-transform: rotate(-20deg) translateX(-115%) rotate(20deg);
    -ms-transform: rotate(-20deg) translateX(-115%) rotate(20deg);
    transform: rotate(-20deg) translateX(-115%) rotate(20deg);
  }
}
@media only screen and (max-height: 399px) {
  #InfoDiscView .aboutSphere {
    -webkit-transform: rotate(-20deg) translateX(-100%) rotate(20deg);
    -moz-transform: rotate(-20deg) translateX(-100%) rotate(20deg);
    -o-transform: rotate(-20deg) translateX(-100%) rotate(20deg);
    -ms-transform: rotate(-20deg) translateX(-100%) rotate(20deg);
    transform: rotate(-20deg) translateX(-100%) rotate(20deg);
  }
}
#InfoDiscView .helpSphere {
  background-image: url("../Images/STO_Tool-Btn-Help@2x.png");
  -webkit-transform: rotate(-65deg) translateX(-125%) rotate(65deg);
  -moz-transform: rotate(-65deg) translateX(-125%) rotate(65deg);
  -o-transform: rotate(-65deg) translateX(-125%) rotate(65deg);
  -ms-transform: rotate(-65deg) translateX(-125%) rotate(65deg);
  transform: rotate(-65deg) translateX(-125%) rotate(65deg);
}
@media only screen and (max-height: 559px) {
  #InfoDiscView .helpSphere {
    -webkit-transform: rotate(-65deg) translateX(-115%) rotate(65deg);
    -moz-transform: rotate(-65deg) translateX(-115%) rotate(65deg);
    -o-transform: rotate(-65deg) translateX(-115%) rotate(65deg);
    -ms-transform: rotate(-65deg) translateX(-115%) rotate(65deg);
    transform: rotate(-65deg) translateX(-115%) rotate(65deg);
  }
}
@media only screen and (max-height: 399px) {
  #InfoDiscView .helpSphere {
    -webkit-transform: rotate(-65deg) translateX(-100%) rotate(65deg);
    -moz-transform: rotate(-65deg) translateX(-100%) rotate(65deg);
    -o-transform: rotate(-65deg) translateX(-100%) rotate(65deg);
    -ms-transform: rotate(-65deg) translateX(-100%) rotate(65deg);
    transform: rotate(-65deg) translateX(-100%) rotate(65deg);
  }
}
.infoDiscTransition {
  -webkit-transition: -webkit-transform 1s ease-in-out;
  -moz-transition: -moz-transform 1s ease-in-out;
  -o-transition: -o-transform 1s ease-in-out;
  transition: -webkit-transform 1s ease-in-out,-moz-transform 1s ease-in-out,-o-transform 1s ease-in-out,transform 1s ease-in-out;
}
.Lightbox {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
  color: white;
  opacity: 1;
  z-index: 10;
}
.Lightbox .background {
  background-color: rgba(0, 0, 0, 0.5);
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 1;
}
.Lightbox .window {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 640px;
  width: 1024px;
}
.Lightbox .content {
  height: 90%;
}
.Lightbox .closeButton {
  position: absolute;
  top: -40px;
  right: 0;
  width: 108px;
  height: 40px;
  border-radius: 9px 9px 0px 0px;
  border: 2px solid #ffffff;
  border-bottom-width: 0px;
  pointer-events: all;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxZDU0NzgiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI4NmM5YSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #1d5478 0%, #286c9a 100%);
  background-image: -moz-linear-gradient(top, #1d5478 0%, #286c9a 100%);
  background-image: -o-linear-gradient(top, #1d5478 0%, #286c9a 100%);
  background-image: linear-gradient(to bottom, #1d5478 0%, #286c9a 100%);
  opacity: 0;
  -webkit-transform: rotate(90deg) translateX(100%);
  -moz-transform: rotate(90deg) translateX(100%);
  -o-transform: rotate(90deg) translateX(100%);
  -ms-transform: rotate(90deg) translateX(100%);
  transform: rotate(90deg) translateX(100%);
  -webkit-transform-origin: bottom right;
  -moz-transform-origin: bottom right;
  -o-transform-origin: bottom right;
  -ms-transform-origin: bottom right;
  transform-origin: bottom right;
}
.Lightbox .closeButton > .buttonText {
  width: 108px;
  height: 40px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
@media only screen and (max-aspect-ratio: 4/3) {
  .Lightbox .closeButton {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
.Lightbox .figureImage {
  height: 100%;
  width: 100%;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -o-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
}
.Lightbox .figureZoom {
  background-image: url('../Images/STO_Btn-Enlarge_Small.png');
  position: relative;
  bottom: 33px;
  width: 28px;
  height: 28px;
  margin-bottom: -75px;
}
.Lightbox #captionWrapper {
  display: table;
  width: 100%;
  height: 10%;
  background-color: black;
  opacity: 0;
}
.Lightbox #caption {
  display: table-cell;
  text-align: left;
  padding-left: 20px;
  vertical-align: middle;
  opacity: 1;
}
.Lightbox.zoom {
  opacity: 1;
  /*.background {
        opacity: 1;
        .transition(opacity .4s);
    }*/
}
.Lightbox.zoom .figureImage {
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  -o-transition: -o-transform 0.4s;
  transition: -webkit-transform 0.4s,-moz-transform 0.4s,-o-transform 0.4s,transform 0.4s;
}
.Lightbox.zoom .closeButton {
  opacity: 1;
  -webkit-transition: opacity 0.4s 0.4s;
  -moz-transition: opacity 0.4s 0.4s;
  -o-transition: opacity 0.4s 0.4s;
  transition: opacity 0.4s 0.4s;
}
.Lightbox.zoom #captionWrapper {
  opacity: 1;
  -webkit-transition: opacity 0.4s 0.4s;
  -moz-transition: opacity 0.4s 0.4s;
  -o-transition: opacity 0.4s 0.4s;
  transition: opacity 0.4s 0.4s;
}
.Lightbox.unzoom {
  opacity: 1;
  /*.background {
        .transition(opacity 0.4s 0.4s);
    }*/
}
.Lightbox.unzoom .closeButton {
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.Lightbox.unzoom #captionWrapper {
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.Lightbox.unzoom .figureImage {
  -webkit-transition: -webkit-transform 0.4s 0.4s;
  -moz-transition: -moz-transform 0.4s 0.4s;
  -o-transition: -o-transform 0.4s 0.4s;
  transition: -webkit-transform 0.4s 0.4s,-moz-transform 0.4s 0.4s,-o-transform 0.4s 0.4s,transform 0.4s 0.4s;
}
#MuteView {
  position: absolute;
  right: 0;
  top: 0;
  width: 4em;
  height: 4em;
  z-index: 2;
}
.popTop #MuteView {
  z-index: 1;
}
#MuteView #settingsButton {
  position: absolute;
  right: 0;
  cursor: pointer;
  width: 56px;
  height: 56px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../Images/STO_Btn-Settings.png);
}
.GameOver {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
  color: white;
  opacity: 1;
  visibility: hidden;
  z-index: 2;
}
.GameOver .background {
  background-color: #000000;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 1;
  z-index: 0;
}
.GameOver #Title {
  color: #ffc600;
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: xx-large;
  font-weight: bold;
  z-index: 3;
}
.GameOver #LevelBeaten {
  color: #21d3ff;
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: x-large;
  font-weight: bold;
  z-index: 3;
}
.GameOver .badgeBackground {
  background-image: url(../Images/STO_DDSunBurst-Sprite.png);
  position: absolute;
  width: 525px;
  height: 525px;
  top: -88px;
  left: -130px;
  z-index: 1;
  background-size: 200% 100%;
  background-repeat: no-repeat;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -o-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -webkit-animation: DDBurst 0.1s steps(2) 0s infinite alternate forwards;
  -moz-animation: DDBurst 0.1s steps(2) 0s infinite alternate forwards;
  -o-animation: DDBurst 0.1s steps(2) 0s infinite alternate forwards;
  animation: DDBurst 0.1s steps(2) 0s infinite alternate forwards;
}
.GameOver lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes DDBurst{ 0%{ background-position: 0px; } 100% { background-position: -1050px; }}
@-moz-keyframes DDBurst{ 0%{ background-position: 0px; } 100% { background-position: -1050px; }}
@-o-keyframes DDBurst{ 0%{ background-position: 0px; } 100% { background-position: -1050px; }}
@keyframes DDBurst{ 0%{ background-position: 0px; } 100% { background-position: -1050px; }}
lesshat-selector {
    -lh-property: 0;
}
.GameOver #footer_text {
  color: white;
  position: absolute;
  text-align: left;
  left: 20%;
  width: 60%;
  text-align: center;
}
.GameOver .window {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 348px;
  width: 264px;
}
.GameOver .closeButton {
  position: absolute;
  right: 0;
  width: 150px;
  height: 100px;
  color: white;
}
.GameOver .closeButton > .buttonText {
  width: 150px;
  height: 100px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
@media only screen and (max-aspect-ratio: 4/3) {
  .GameOver .closeButton {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
.GameOver .content {
  width: 100%;
  height: 100%;
}
.GameOver .figureImage {
  background-image: url('../Images/STO_Badges_DiseaseDetective_flyin@2x.png');
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 5;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -o-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
}
.GameOver .figureImage #germ {
  display: none;
}
.GameOver .figureImage.notDD {
  background-image: none;
}
.GameOver .figureImage.notDD #germ {
  display: block;
  margin-left: -15px;
}
.GameOver .figureZoom {
  background-image: url('../Images/STO_Btn-Enlarge_Small.png');
  position: relative;
  bottom: 33px;
  width: 28px;
  height: 28px;
  margin-bottom: -75px;
}
.GameOver #caption {
  display: none;
  position: absolute;
  background-color: black;
  width: 100%;
  height: 10%;
  text-align: center;
  vertical-align: center;
  opacity: 0;
}
.GameOver.zoom {
  opacity: 1;
  /*.background {
        opacity: 1;
        .transition(opacity .4s);
    }*/
}
.GameOver.zoom .figureImage {
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  -o-transition: -o-transform 0.4s;
  transition: -webkit-transform 0.4s,-moz-transform 0.4s,-o-transform 0.4s,transform 0.4s;
}
.GameOver.zoom .badgeBackground {
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  -o-transition: -o-transform 0.4s;
  transition: -webkit-transform 0.4s,-moz-transform 0.4s,-o-transform 0.4s,transform 0.4s;
}
.GameOver.zoom .closeButton {
  opacity: 1;
  -webkit-transition: opacity 0.4s 0.4s;
  -moz-transition: opacity 0.4s 0.4s;
  -o-transition: opacity 0.4s 0.4s;
  transition: opacity 0.4s 0.4s;
}
.GameOver.zoom #caption {
  opacity: 1;
  -webkit-transition: opacity 0.4s 0.4s;
  -moz-transition: opacity 0.4s 0.4s;
  -o-transition: opacity 0.4s 0.4s;
  transition: opacity 0.4s 0.4s;
}
.GameOver.unzoom {
  opacity: 1;
  /*.background {
        .transition(opacity 0.4s 0.4s);
    }*/
}
.GameOver.unzoom .closeButton {
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.GameOver.unzoom #caption {
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.GameOver.unzoom .figureImage {
  -webkit-transition: -webkit-transform 0.4s 0.4s;
  -moz-transition: -moz-transform 0.4s 0.4s;
  -o-transition: -o-transform 0.4s 0.4s;
  transition: -webkit-transform 0.4s 0.4s,-moz-transform 0.4s 0.4s,-o-transform 0.4s 0.4s,transform 0.4s 0.4s;
}
.GameOver.unzoom .badgeBackground {
  -webkit-transition: -webkit-transform 0.4s 0.4s;
  -moz-transition: -moz-transform 0.4s 0.4s;
  -o-transition: -o-transform 0.4s 0.4s;
  transition: -webkit-transform 0.4s 0.4s,-moz-transform 0.4s 0.4s,-o-transform 0.4s 0.4s,transform 0.4s 0.4s;
}
.virusAnimation {
  -webkit-transition: -webkit-transform 4s;
  -moz-transition: -moz-transform 4s;
  -o-transition: -o-transform 4s;
  transition: -webkit-transform 4s,-moz-transform 4s,-o-transform 4s,transform 4s;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  z-index: 1;
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
}
#blueVirusAnimation {
  background-image: url('../Images/h1n1.gif');
}
#greenVirusAnimation {
  background-image: url('../Images/virus.gif');
}
.virusAnimation.firstStep {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -o-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
}
#blueVirusAnimation.secondStep {
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: -webkit-transform 1s,-moz-transform 1s,-o-transform 1s,transform 1s;
  -webkit-transform: scale(0.1) translate(5000px, -1200px);
  -moz-transform: scale(0.1) translate(5000px, -1200px);
  -o-transform: scale(0.1) translate(5000px, -1200px);
  -ms-transform: scale(0.1) translate(5000px, -1200px);
  transform: scale(0.1) translate(5000px, -1200px);
  /*.transition(transform 1s);
        .animation(shrinkAndFade 1s steps(2) 0s forwards);*/
}
#greenVirusAnimation.secondStep {
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: -webkit-transform 1s,-moz-transform 1s,-o-transform 1s,transform 1s;
  -webkit-transform: scale(0.1) translate(-5000px, -1200px);
  -moz-transform: scale(0.1) translate(-5000px, -1200px);
  -o-transform: scale(0.1) translate(-5000px, -1200px);
  -ms-transform: scale(0.1) translate(-5000px, -1200px);
  transform: scale(0.1) translate(-5000px, -1200px);
  /*.transition(transform 1s);
        .animation(shrinkAndFade 1s steps(2) 0s forwards);*/
}
.virusAnimation.fade {
  opacity: 1;
  -webkit-transition: opacity 1s !important;
  -moz-transition: opacity 1s !important;
  -o-transition: opacity 1s !important;
  transition: opacity 1s !important;
  opacity: 0;
}
#LevelMenuView .levelDiv {
  display: inline-block;
  border: 2px solid white;
  border-radius: 5px;
  background-color: transparent;
  position: absolute;
  top: 10%;
  width: 22%;
  height: 50%;
  text-align: center;
  cursor: pointer;
  min-width: 200px;
}
#LevelMenuView #level1 {
  left: 20%;
}
#LevelMenuView #level2 {
  right: 20%;
}
#LevelMenuView .virusAnimation {
  z-index: 1;
  display: block;
  position: absolute;
  width: 90%;
  height: 65%;
  left: 5%;
  top: 0;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
}
#LevelMenuView #blueVirusAnimation {
  background-image: url('../Images/h1n1.gif');
}
#LevelMenuView #greenVirusAnimation {
  background-image: url('../Images/virus.gif');
}
#LevelMenuView #level2LockImage {
  display: none;
  position: absolute;
  width: 90%;
  height: 65%;
  left: 5%;
  top: 0;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .5;
  background-image: url('../Images/lock-over-virus.png');
  z-index: 2;
}
#LevelMenuView #level2LockImage.active {
  display: block;
}
#LevelMenuView .levelNum {
  position: absolute;
  top: 65%;
  width: 100%;
  text-align: center;
  font-size: 22px;
  color: #ffc600;
  vertical-align: top;
}
#LevelMenuView #smallLock {
  display: none;
  width: 20px;
  height: 20px;
  background-image: url(../Images/lock-level2.png);
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  right: 5px;
}
#LevelMenuView #smallLock.locked {
  display: inline-block;
}
#LevelMenuView .numOutbreaks {
  position: absolute;
  top: 74%;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 22px;
}
#LevelMenuView .progressBar {
  position: absolute;
  bottom: 12%;
  color: white;
  height: 8px;
  width: 60%;
  left: 20%;
  opacity: 1;
  border-radius: 5px;
  background-color: white;
}
#LevelMenuView .progressBarInner {
  height: 6px;
  background-color: #00aa00;
  margin: 1px 0px 0px 2px;
}
#LevelMenuView .pointCount {
  position: absolute;
  bottom: 2%;
  color: white;
  width: 100%;
  text-align: center;
  font-size: 95%;
}
#SettingsView {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -o-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
  z-index: 100;
}
#SettingsView.reveal {
  opacity: 1;
}
#SettingsView #background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#SettingsView .window {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 436px;
  height: 250px;
  background-color: black;
  border: 2px solid white;
}
#SettingsView #settingsHeading {
  margin: 20px;
  margin-top: 30px;
  font-size: 24px;
  border-bottom: 1px solid white;
  height: 35px;
}
#SettingsView #settingsTitle {
  float: left;
}
#SettingsView #closeButton {
  float: right;
  font-size: 30px;
  cursor: pointer;
}
#SettingsView #soundSetting,
#SettingsView #resetSetting {
  height: 50px;
  margin: 20px;
}
#SettingsView #soundHeader {
  float: left;
  font-size: 22px;
  color: #ffc600;
  padding-top: 15px;
}
#SettingsView #soundButton,
#SettingsView #resetButton {
  float: right;
  background-repeat: no-repeat;
  background-position: center;
}
#SettingsView #soundButton {
  width: 100px;
  height: 50px;
  cursor: pointer;
}
#SettingsView #soundButton.on {
  background-image: url(../Images/on.png);
}
#SettingsView #soundButton.off {
  background-image: url(../Images/off.png);
}
#SettingsView #resetButton {
  width: 155px;
  height: 32px;
  background-image: url(../Images/settings_reset_score.png);
  border: 2px solid white;
  border-radius: 5px;
  cursor: pointer;
}
#SettingsView #resetHeader {
  float: left;
  font-size: 22px;
  color: #ffc600;
  font-weight: normal;
  margin-right: 80px;
}
#SettingsView #resetInfo {
  float: left;
  width: 200px;
  margin-top: 10px;
}