/* Styles for Creature Duty Game Page */

html, body {
	background-color:black; 
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	min-height: 100%;
}

.odd_squad_creatureduty  {
	background-color: black; 
  font-family: "refrigerator-deluxe", sans-serif;
}


.odd_squad_creatureduty * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color:    rgba(0, 0, 0, 0);
    -ms-tap-highlight-color:     rgba(0, 0, 0, 0);
    -o-tap-highlight-color:      rgba(0, 0, 0, 0);
    tap-highlight-color:         rgba(0, 0, 0, 0);

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
	
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	perspective: 1000;
	-webkit-transform: rotateZ(0deg);
}


.odd_squad_creatureduty .canvaswrapper {
	position:absolute; 
	height:100%; 
	width:100%; 
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	overflow: visible;
	overflow-x: visible;
  text-align:center;
}
.odd_squad_creatureduty .innerwrapper {
	background-image: url(../images/Video_background.jpg);
	background-position:center; 
	background-repeat:no-repeat; 
	background-size: auto 100%;
	max-height:100%;
	max-width:100%;
	padding: 0px 0px 0px 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	overflow: visible;
	overflow-x: visible;
  text-align:center;
}
.odd_squad_creatureduty .standard-outline {
	/*border: 2px solid chartreuse; */
	display:block;
	max-height: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.odd_squad_creatureduty #videoplayerwrapper {
	position: relative;
	top:-457px;
	left:161px;
	width:708px;
	height:397px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}


/*.odd_squad_creatureduty  img, embed, object, video{ max-width:100%; max-height:100%;}*/
.odd_squad_creatureduty  video, object, embed, button{ outline:none; border:none; }
.odd_squad_creatureduty button{ cursor:pointer; vertical-align:middle; }
.odd_squad_creatureduty button img { vertical-align:middle; height:1.2em; } 

.odd_squad_creatureduty #player{
  width: 528px;
  float:left;
}
 
.odd_squad_creatureduty #player .frame {
	background:#FFF;
	border:solid 8px #FFF;
	border-radius: 16px;
}
 
.odd_squad_creatureduty #player #tvo-video-player{
  /*
  width:512px;
  height:288px;
  max-height:512px;
  max-width:288px;
  */
  width:100%;
  height:100%;
  background:#000;
  display:block;
}

.odd_squad_creatureduty #player .timer-remaining{
  color:#AECECE;
  font-size:0.875em;
  font-family: "refrigerator-deluxe", "Arial", sans-serif;
  width:11.2244898%;
  margin-right:1.36054422%;
  text-align:right;
  display:inline-block;
  zoom:1; *display:inline; /*IE7 fix for "display:inline-block"*/
}

.odd_squad_creatureduty #player .scrubber{
  width:72.10884354%;
  display:inline-block;
  zoom:1; *display:inline; /*IE7 fix for "display:inline-block"*/
  margin:8px 0 2px;
  cursor:pointer;
}
 
    .odd_squad_creatureduty #player .scrubber .scrubber-track{
      width:100%;
      height:6px;
      margin:10px;
      background-color:#AECECE;
      border-radius:10px;
      display:inline-block;
      zoom:1; *display:inline; /*IE7 fix for "display:inline-block"*/
      vertical-align:middle;
      text-align:left;
    }

    .odd_squad_creatureduty #player .scrubber .scrubber-thumb{
      width:26px;
      height:26px;
      background:#FFF;
      border: solid 2px #AECECE ;
      border-radius: 26px;
      position:relative !important;
      top:-10px;
    }
 
    .odd_squad_creatureduty #player #controlrack{
      margin:10px auto 0px;
      padding-bottom:11px;
      text-align:center;
    }
    
.odd_squad_creatureduty #player #controlrack button{
  width:112px;
  padding:0px;
  border-bottom: solid #75c700 8px;
  line-height: 56px;
  font-size: 36px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;

  background: #a6ef18;
  display:inline-block;
  zoom:1; *display:inline; /*IE7 fix for "display:inline-block"*/
  position:relative;
}

.odd_squad_creatureduty #player #controlrack button:hover{
  border-bottom: 0px;
  bottom: -4px;
}

.odd_squad_creatureduty #player #controlrack button.play-pause {
  margin-left: 8px;
  margin-right: 8px;
  width: 208px;
}

   .odd_squad_creatureduty #player #controlrack button.play-pause:before {
      content: "Play";
    }

    .odd_squad_creatureduty #player #controlrack button.play-pause.playing:before {
      content: "Pause";
    }

    .odd_squad_creatureduty #player #controlrack button.play-pause:after {
      content: "";
      display: inline-block;
      width: 0px;
      height: 0px;
      margin: -6px 0 -2px 10px;
      border-left: 20px solid #FFF;
      border-top: 16px transparent solid;
      border-bottom: 16px solid transparent;
    }

    .odd_squad_creatureduty #player #controlrack button.play-pause.playing:after {
      width: 5px;
      height: 0.75em;
      margin: -4px 0 0 10px;
      border-left: 10px solid #FFF;
      border-right: 10px solid #FFF;
      border-top: none;
      border-bottom: none;
    }

    .odd_squad_creatureduty #player #controlrack button.next:before{
      content: "";
      background: #FFF;
      width: 20px;
      height: 18px;
      display: inline-block;
      vertical-align: middle;
      line-height: normal;
      top: -3px;
      position: relative;
    }

    .odd_squad_creatureduty #player #controlrack button.next:after{
      content: "";
      width: 0px;
      height: 0px;
      border-left: 28px solid #FFF;
      border-bottom: 20px solid transparent;
      border-top: 20px transparent solid;
      display: inline-block;
      vertical-align: middle;
      line-height: normal;
      margin-right: -4px;
      top: -3px;
      position: relative;
    }

    .odd_squad_creatureduty #player #controlrack button.previous:before{
      content: "";
      width: 0px;
      height: 0px;
      border-right: 28px solid #FFF;
      border-bottom: 20px solid transparent;
      border-top: 20px transparent solid;
      display: inline-block;
      vertical-align: middle;
      line-height: normal;
      margin-left: -4px;
      top: -3px;
      position: relative;
    }

    .odd_squad_creatureduty #player #controlrack button.previous:after{
      content: "";
      background: #FFF;
      width: 20px;
      height: 18px;
      display: inline-block;
      vertical-align: middle;
      line-height: normal;
      top: -3px;
      position: relative;
    }
    
.odd_squad_creatureduty #player #controlrack #captions-button{
  width: 40px;
  font-weight: bold;
  font-size: 16px;
  line-height: 16px;
  margin-left: 8px;
  padding:8px 0;
}