@import "flashblock.css";

.qt-musicplayer {
  width: 230px;
  height: 230px;
  margin: 0 auto
}

.qt-musicplayer .sm2_link {
  display: none
}

.ui360, .sm2-360ui {
  position: relative;
  width: 230px;
  height: 230px;
  min-width: 230px;
  min-height: 230px;
  margin: 0
}

.sm2-360ui {
  background-color: #f9f9f9;
  background-color: rgba(0, 0, 0, .025);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, .15);
  border-radius: 100%;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  -webkit-transition-property: background, border, box-shadow;
  transition-property: background, border, box-shadow
}

.sm2-360ui:hover {
  background-color: rgba(0, 0, 0, .1);
  border-color: rgba(0, 0, 0, .15);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .15)
}

.ui360, .ui360 * {
  vertical-align: middle
}

.sm2-360ui {
  position: relative;
  display: inline-block;
  float: left;
  *display: inline;
  clear: left
}

.sm2-360ui.sm2_playing, .sm2-360ui.sm2_paused {
  z-index: 10
}

.ui360 a {
  float: left;
  display: inline;
  position: relative;
  color: #000;
  text-decoration: none;
  left: 3px;
  top: 18px;
  text-indent: 50px
}

.ui360 a.sm2_link {
  text-indent: 0
}

.ui360 a, .ui360 a:hover, .ui360 a:focus {
  padding: 2px;
  margin-left: -2px;
  margin-top: -2px
}

.ui360 a:hover, .ui360 a:focus {
  background: #eee;
  border-radius: 3px;
  outline: none
}

.ui360 .sm2-canvas {
  position: absolute;
  left: 0;
  top: 0
}

.ui360 .sm2-canvas.hi-dpi {
  top: -50%;
  left: -50%;
  -webkit-transform: scale(.5);
  transform: scale(.5)
}

.ui360 .sm2-timing {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  margin: 0;
  font: 11px helvetica neue, helvetica, monaco, lucida, terminal, monospace;
  color: inherit;
  text-align: center;
  line-height: "../";
  color: inherit;
  font-size: 50px;
  line-height: 50px;
  top: 50%;
  margin-top: -25px;
  height: auto
}

.ui360 .sm2-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: none;
  background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)
}

.ui360 .sm2-360btn {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  width: 230px;
  height: 230px;
  margin-left: -50%;
  margin-top: -50%;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3
}

.ui360 .sm2-360data {
  display: inline-block;
  font-family: helvetica
}

.sm2-inline-block .ui360 .sm2-360btn, .ui360 .sm2-360ui.sm2_playing .sm2-360btn, .ui360 .sm2-360ui.sm2_paused .sm2-360btn {
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  cursor: pointer
}

.ui360 .sm2-360ui.sm2_playing .sm2-cover, .ui360 .sm2-360ui.sm2_paused .sm2-cover {
  display: block
}

.ui360 .sm2-360btn-default::after, .ui360 .sm2-360ui.sm2_paused .sm2-360btn::after {
  display: block;
  cursor: pointer;
  font-size: 36px;
  font-family: dripicons-v2 !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  content: "\e01a";
  top: 50%;
  position: absolute;
  left: 50%;
  margin-left: -28px;
  margin-top: -28px;
  border: 8px solid #fff;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -40px;
  text-align: center;
  line-height: 65px;
  padding-left: 6px
}

.ui360 .sm2-360ui {
  cursor: pointer
}

.ui360 .sm2-360ui::after {
  display: block;
  cursor: pointer;
  font-size: 36px;
  font-family: dripicons-v2 !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  content: "\e01a";
  top: 50%;
  position: absolute;
  left: 50%;
  margin-left: -28px;
  margin-top: -28px;
  border: 8px solid #fff;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -40px;
  text-align: center;
  line-height: 65px;
  padding-left: 6px
}

.ui360 .sm2-360ui.sm2_dragging::after {
  display: none
}

.ui360 .sm2-360ui.sm2_dragging .sm2-360btn::after {
  display: none
}

.ui360 .sm2-360ui .sm2-360btn::after {
  display: none
}

.ui360 .sm2-360ui.sm2_playing::after {
  display: none
}

.ui360 .sm2-360ui.sm2_paused .sm2-360btn:hover::after {
  display: block;
  cursor: pointer;
  font-size: 36px;
  font-family: dripicons-v2 !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  content: "\e01a";
  top: 50%;
  position: absolute;
  left: 50%;
  margin-left: -28px;
  margin-top: -28px;
  border: 8px solid #fff;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -40px;
  text-align: center;
  line-height: 65px;
  padding-left: 6px
}

.ui360 .sm2-360ui.sm2_playing .sm2-360btn:hover::after {
  display: block;
  cursor: pointer;
  font-size: 36px;
  font-family: dripicons-v2 !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  content: "\e01a";
  top: 50%;
  position: absolute;
  left: 50%;
  margin-left: -28px;
  margin-top: -28px;
  border: 8px solid #fff;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -40px;
  text-align: center;
  line-height: 65px;
  padding-left: 6px;
  content: "\e019";
  padding-left: 0
}

.ui360 .sm2-360ui.sm2_playing .sm2-timing {
  visibility: visible
}

.ui360 .sm2-360ui.sm2_buffering .sm2-timing {
  visibility: hidden
}

.ui360 .sm2-360ui .sm2-timing, .ui360 .sm2-360ui .sm2-360btn:hover+.sm2-timing, .ui360 .sm2-360ui.sm2_paused .sm2-timing {
  visibility: hidden
}

.ui360 .sm2-360ui.sm2_dragging .sm2-timing, .ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover+.sm2-timing {
  visibility: visible
}

.ui360 .sm2-360ui.sm2_playing .sm2-360btn, .ui360 .sm2-360ui.sm2_dragging .sm2-360btn, .ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover, .ui360 .sm2-360ui.sm2_dragging .sm2-360btn-playing:hover {
  background: 0 0;
  cursor: auto
}

.ui360 .sm2-360ui.sm2_buffering .sm2-360btn, .ui360 .sm2-360ui.sm2_buffering .sm2-360btn:hover {
  background: transparent url(..//icon_loading_spinner.gif) no-repeat 50% 50%;
  opacity: .5;
  visibility: visible
}

.sm2-inline-list .ui360, .sm2-inline-block .ui360 {
  position: relative;
  display: inline-block;
  float: left;
  _display: inline
}

.sm2-inline-block .ui360 {
  margin-right: 8px
}

.sm2-inline-list .ui360 a {
  display: none
}

ul.ui360playlist {
  list-style-type: none
}

ul.ui360playlist, ul.ui360playlist li {
  margin: 0;
  padding: 0
}

div.ui360 div.metadata {
  display: none
}

div.ui360 a span.metadata, div.ui360 a span.metadata * {
  vertical-align: baseline
}

@media only screen and (min-width:1170px) {
  .qt-playervolume .ui360 .sm2-timing::before {
    font-size: 11px;
    text-transform: uppercase;
    content: "VOLUMEN";
    display: block;
    line-height: 10px;
    margin-top: -8px;
    clear: both
  }
}