/*
AudioJS TubeCSS Skin (http://videojs.com)
Version 2.0.0
*/

.tube-css .ajs-controls {
  opacity: 1; color: #fff;
  height: 23px;
  bottom: 0;
  background-color: #fff;
  background: #2d63bc -webkit-gradient(linear, left top, left bottom, from(#ff8a00), to(#e52e71)) left top;
  background-image: linear-gradient(to right,#ff8a00,  #e52e71);
}

.tube-css .ajs-controls > div {
  height: 24px; margin: 0; background: none; top: 0;
  border: 1px solid #ccc; border-left-color: #eee;
  -webkit-border-radius: 0; border-radius: 0;
  -webkit-box-shadow: none; box-shadow: none;
}

/* Placement of Control Items */
.tube-css .ajs-controls > div.ajs-play-control       { width: 28px; left: 0; }
.tube-css .ajs-controls > div.ajs-progress-control   { left: 102px; right: 50px; }
.tube-css .ajs-controls > div.ajs-time-control       { width: 75px; left: 27px; }
.tube-css .ajs-controls > div.ajs-volume-control     { width: 51px; right: 0px; }

/* Removing borders on time & progress to join them */
.tube-css .ajs-controls > div.ajs-progress-control { border-left: none; }
.tube-css .ajs-controls > div.ajs-time-control { border-right: none; }


/* Play/Pause
-------------------------------------------------------------------------------- */
.tube-css .ajs-controls div.ajs-play-control { margin-left: 0; border-left-color: #b1b1b1; }
.tube-css.ajs-paused  .ajs-play-control span { border-left-color: #fff; border-top-width: 5px; border-left-width: 12px; border-bottom-width: 7px; margin: 5px 0 0 7px; }
.tube-css.ajs-playing .ajs-play-control span { height: 11px; margin: 6px auto 0; border-left: 5px solid #fff; border-right: 5px solid #fff; }
.tube-css.ajs-paused  .ajs-play-control:hover span { border-left-color: #7db9e8; }
.tube-css.ajs-playing .ajs-play-control:hover span { border-left-color: #7db9e8; border-right-color: #7db9e8; }

/* Time Display
-------------------------------------------------------------------------------- */
.tube-css .ajs-controls .ajs-time-control { font-size: 11px; }
.tube-css .ajs-controls .ajs-time-control span { line-height: 23px; /* Centering vertically */ }

/* Progress
-------------------------------------------------------------------------------- */
.tube-css .ajs-progress-holder {
  margin-right: 10px;
  background-color: #b1b1b1;
  background: #b1b1b1 -webkit-gradient(linear, left top, left bottom, from(#b1b1b1), to(#cacaca)) left top;
  background: #b1b1b1 -moz-linear-gradient(top,  #b1b1b1,  #cacaca) left top;
  border-color: #CACACA; border-bottom-color: #eaeaea;
  -webkit-border-radius: 0; border-radius: 0;
}
.tube-css .ajs-progress-control .ajs-load-progress { background: #7db9e8; -webkit-border-radius: 0; border-radius: 0; }
.tube-css .ajs-progress-control .ajs-play-progress { background: #0D59A8; background: -webkit-gradient(linear, left top, left bottom, from(#0D59A8), to(#2E4384)); background-image: linear-gradient(to right,#0D59A8,#2E4384); -webkit-border-radius: 0; border-radius: 0; }

/* Volume
-------------------------------------------------------------------------------- */
.tube-css .ajs-volume-control div { padding: 3px 0 0 0; }
.tube-css .ajs-volume-control div span { border-bottom-color: #ccc; }
/* Volume icon color */
.tube-css .ajs-volume-control div span.ajs-volume-level-on { border-color: #fff; }
/* Volume icon hovering color */
.tube-css .ajs-volume-control:hover div span.ajs-volume-level-on { border-color: #2989d8; }

/* Big Play Button (at start)
---------------------------------------------------------*/
.tube-css div.ajs-big-play-button {
  width: 84px; height: 58px; margin: -29px 0 0 -42px;
  border: 2px solid #ccc; opacity: 0.9;
  -webkit-border-radius: 10px; border-radius: 10px;

  /* CSS Background Gradients */
  background-color: #333;
  background: #000 -webkit-gradient(linear, left top, left bottom, from(#000), to(#333)) left 29px;
  background: #000 -moz-linear-gradient(top,  #000,  #333) left 29px;

  /* CSS Shadows */
  -webkit-box-shadow: none; box-shadow: none;
}
.tube-css div.ajs-big-play-button:hover {
  opacity: 1;
}
.tube-css div.ajs-big-play-button span {
  margin: 11px 0 0 26px;
  /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
  border-left: 36px solid #fff; /* Width & Color of play icon */
  /* Height of play icon is total top & bottom border widths. Color is transparent. */
  border-top: 18px solid rgba(0,0,0,0); border-bottom: 18px solid rgba(0,0,0,0);
}