/* IE needs .eot or .woff . Note .woff2 wont work! */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(open-sans-light.eot) format('truetype'); /* Need EOT/truetype. Only works in  IE */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/*
    Apply a natural box layout model to all elements, but allowing components to change
    This prevents padding and margins from screwing with our width and heights that we declare
    Works on IE8 and above
*/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html,
body,
div {
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  height: 100%;
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  overflow: hidden;
}

body {
  width: inherit;
  height: inherit;
}

body.preload {
  display: table;
  width: inherit;
  height: inherit;
  background-color: rgb(0,0,0);
  background-image: url('diag-tile.png');
  overflow: hidden;
}

body.preload .preload-message {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 22px;
  font-weight: 300;
  color: #FFF;
}


body.prestream {
    width: inherit;
    height: inherit;
    background-color: rgb(11,11,10);
    overflow : hidden;
}

/* cutoff audio file names that take more than a single line so that it does not collide with spinner text */
body.prestream .header {
  overflow-wrap: normal;
  word-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap; /* Need this for IE */
  overflow: hidden;
}

body.prestream .spinner-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

body.prestream .spinner-wrapper .spinner {
  position: relative;
}

/* Hide spinner text so that it does not collide with audio file title */
@media screen and (max-height: 256px) {
  body.prestream .spinner-text {
    visibility: hidden;
  }
}

body.prestream .spinner-text {
  position: absolute;
  top: -35px;
  left: -35px;
  width: 200px;
  font-size: 15px;
}

body.prestream .spinner img {
  width: 50px;
}

#expireDay {
    display: none;
    position: absolute;
    top: 10px;
    right: 0;
    height: 52px;
    width: 206px;
    background-color: #FFFFFF;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    border-radius: 8px 0px 0px 8px;
    border: 1px solid #76B83E;
    box-shadow: 0px 2px 4px #888888;
}

.expireDayInner {
    position: relative;
}

#timeText {
   /* use this positioning to dead center our text within parent div */
   /* ref http://www.vanseodesign.com/css/vertical-centering/ */
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   font-size: 18px;
   color: #505050;
   text-align: center;
}

#timeNumber {
    position: relative;
    font-size:30px;
    color: #FF8F25;
    top: 4px;
}

.me-cannotplay {
    /* unfortunately need !important as this class is getting inline styles added somewhere that I cannot find at the moment */
  width: 100% !important;
  height: 100% !important;
}

iframe {
  height: 100%;
  width: 100%;
  border: 0; /* So we dont have that ugly bezel */
}

.mejs-container .message {
  margin-top: -8px; /* Need this because it is fighting a rule somewhere */
}

.message {
  height: 100%;
  width: 100%;
  padding: 35px;
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 22px;
  font-weight: 300;
  color: white;
  background-image: url('diag-tile.png');
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.message .header {
  font-size: 22px;
}

.message .sub {
  margin-top: 22px;
  font-size: 15px;
}