/**
 * Copyright 2012 Google Inc. All Rights Reserved.
 * Earth Engine-specific modifications to the time lapse client.
 */

body, html {
   margin: 0px;
   line-height: normal;
}

#timeLapsePlayer {
   display: none;
}

#youtubePlayer {
   width: 818px;
   height: 495px;
   position: absolute;
   background: white;
}

#timeLapsePlayer .helpmsg {
   display:none;
   position: relative;
   width:185px;
   background-color:#262626;
   border:1px solid #444;
   height:55px;
   overflow:visible;
   bottom: 135px;
   left: 573px;
   padding:12px 16px 16px;
   z-index: 55;
   color:#fff;
   font-size:13px;
}

#timeLapsePlayer .helpmsg p {
   position: relative;
   margin:0;
   padding:0;
   background-repeat:no-repeat;
   background-position:156px bottom;
   background-image:url(files/images/bubble_edge_horizontal.png);
   height:82px;
   z-index:56;
}

#ytapiplayer {
   margin: auto;
   text-align: center;
   padding-top: 200px;
}

.overlay {
   position:absolute;
   top: 506px;
   right: 0px;
   margin: 0px;
   width: 200px;
   text-align: right;
}

#timeLapsePlayer .captureTime {
  left: 90px;
  font-size: 17px;
  bottom: 0px;
  right: auto;
  color: #333333;
  font-family: Arial, sans-serif;
  font-weight:bold;
  height:56px;
}

#timeLapsePlayer .captureTimeMain {
  font-size: 27px;
}

#timeLapsePlayer .captureTimeSub1 {
  font-size: 12px;
  border-top: 2px solid #ddd;
  padding: 2px 0px 0px 0px;
}

#timeLapsePlayer .currentCaptureTime {
  height: 56px;
  display: table-cell;
  vertical-align: middle;
}

.controls {
   background: #f1f1f1;
   border: 1px solid #ebebeb;
}

a.playbackButton {
   border-right: 1px solid #ebebeb;
}

.flashToggleMap {
   margin-right: 0px;
}

a.playbackspeed,
a.help.enabled {
   -webkit-border-radius:2px;
   -moz-border-radius:2px;
   border-radius:2px;
   cursor:default;
   font-size:11px;
   font-weight:bold;
   text-align:center;
   margin-right:16px;
   height:27px;
   line-height:27px;
   min-width:54px;
   outline:0px;
   padding:0 8px;
   background-color:#f5f5f5;
   background-image:-webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
   background-image:-moz-linear-gradient(top,#f5f5f5,#f1f1f1);
   background-image:-ms-linear-gradient(top,#f5f5f5,#f1f1f1);
   background-image:-o-linear-gradient(top,#f5f5f5,#f1f1f1);
   background-image:linear-gradient(top,#f5f5f5,#f1f1f1);
   color:#444;
   border:1px solid #dcdcdc;
   border:1px solid rgba(0,0,0,0.1);
   height: 26px;
}

a.playbackspeed:hover,
a.help.enabled:hover {
   -webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);
   -moz-box-shadow:0 1px 1px rgba(0,0,0,.1);
   box-shadow:0 1px 1px rgba(0,0,0,.1);
   background-color:#f8f8f8;
   background-image:-webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
   background-image:-moz-linear-gradient(top,#f8f8f8,#f1f1f1);
   background-image:-ms-linear-gradient(top,#f8f8f8,#f1f1f1);
   background-image:-o-linear-gradient(top,#f8f8f8,#f1f1f1);
   background-image:linear-gradient(top,#f8f8f8,#f1f1f1);
   border:1px solid #c6c6c6;
   color:#333;
}

a.help.enabled.on:hover {
   border: 1px solid rgba(0, 0, 0, 0.1);
}

.jfk-button-action {
   display: inline-block;
   line-height: normal;
}.jfk-button-action:hover {
   -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
   -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
   box-shadow: 0 1px 1px rgba(0,0,0,.1);
   background-color:#357ae8;
   background-image:-webkit-linear-gradient(top,#4d90fe,#357ae8);
   background-image:-moz-linear-gradient(top,#4d90fe,#357ae8);
   background-image:-ms-linear-gradient(top,#4d90fe,#357ae8);
   background-image:-o-linear-gradient(top,#4d90fe,#357ae8);
   background-image:linear-gradient(top,#4d90fe,#357ae8);
   border:1px solid #2f5bb7;
}.jfk-button-action:active {
   -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
   -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
   box-shadow:inset 0 1px 2px rgba(0,0,0,0.3)
}

#timeLapsePlayer .instructions span.speedhelp {
   left: 439px;
   bottom: -10px;
}

#timeLapsePlayer.novideotour .instructions span.speedhelp {
   left: 399px;
}

#timeLapsePlayer.novideotour .instructions span.speedhelp p {
   background-position: bottom right;
}

#timeLapsePlayer .instructions span.movehelp {
   width: 148px;
}

#timeLapsePlayer a.playbackspeed {
   text-indent: 0px;
   width: 120px;
   margin: 5px 0px 0px -157px;
}

#timeLapsePlayer li.playbackSpeedOptions {
   margin: 0px 0px 30px -157px !important;
   border: 1px solid rgba(0, 0, 0, .2);
}

#browser_not_supported .warning {
  width: 650px;
}