/**
 * This CSS file configures the -basic- placement of the video player controls.
 * Any styling should be done within the skin.
 *
 * Rule of thumb of where styling goes is the following:
 *  If the style applies to ONLY Html, place here
 *  If the style applies to Flash and Html, place in a Skin file
 */

/**
 * Sets properties for the video player container 
 */
.airy {
  background-color: #000;
  position: relative;
  padding: 0;
  margin: 0 auto;
  font-size: 10px;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
}

/**
 * The controls container
 */
.airy-controls {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  
  margin: 0 auto; padding: 0;
  text-align: center;

  white-space: nowrap;
}

/**
 * Configure controls to propery show up as inline control blocks.
 */
.airy-current-time,
.airy-play-toggle,
.airy-size-toggle,
.airy-time-label,
.airy-total-time,
.airy-volume-elements,
.airy-volume-toggle {
  position: relative; float: left;
  text-align: center;
  margin: 0 auto 0; padding: 0;
  top: 50%;
}

/**
 * This is necessary so that the track bar can take up any remaining horizontal
 * space in the controls container.
 */
.airy-relative-container {
  position: relative;
  width: 100%; height: 100%;
}

.airy-track-bar {
  position: absolute;
  top: 50%;
}

.airy-current-time {
  text-align: right;
}

/**
 * Configure hints to be centered horizontally 
 */
.airy-play-hint,
.airy-pause-hint,
.airy-audio-hint,
.airy-replay-hint {
  position: absolute; float: left;
  margin: 0 auto 0;
  display: inline-block;
  top: 50%;
  left: 50%;
  text-align: center;
}

.airy-volume-elements,
.airy-time-label {
  height: 100%;
  top: 0%;
  display: block;
}

.airy-size-toggle,
.airy-volume-elements {
  float: right;
}

/**
 * The volume bar is made up of a container, track bar and a scrubber
 */
.airy-volume-container {
  position: absolute;
  bottom: 100%; left: 50%;
}

.airy-volume-track-bar {
  position: relative;
  display: inline-block;
  top: 50%;
}

.airy-volume-scrubber {
  position: absolute;
  left: 50%;
}

/**
 * Set scrubber/buffer bar positioning. 
 * Different than the others as the objects are appended to the progress bar.
 * Also set the hint layer to be absolutely positioned. This DOM element is
 * necessary to address cross-compatability issues with the iPad.
 */
.airy-hint-layer,
.airy-scrubber,
.airy-progress-bar {
  position: absolute;
}

/**
 * Disable text highlighting
 */
.airy-current-time,
.airy-time-label,
.airy-total-time {
  !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font: bold 10px arial;
  cursor: default;
}

/**
 * Transform the cursor to a hand when hovering over a control.
 */
.airy video,
.airy-play-toggle,
.airy-size-toggle,
.airy-volume-scrubber,
.airy-volume-toggle,
.airy-scrubber,
.airy-hint-layer,
.airy-audio-hint,
.airy-pause-hint,
.airy-play-hint,
.airy-replay-hint {
  /**
   * Need both hand and pointer to support all browsers.
   * See "http://www.quirksmode.org/css/cursor.html"
   */
  cursor : hand;
  cursor : pointer;
}