/*
 * SoundManager 2 + useFlashBlock
 * Flash positioning and flashblock / clicktoflash handling
*/

#sm2-container {
 /*
  * where the SM2 flash movie goes. by default, relative container.
  * set relative or absolute here, and don't touch it later or bad things will happen (see below comments.)
 */
 position: absolute;
 width: 1px;
 height: 1px;
 overflow: hidden;
 /* screw IE 6, just make it display nice */
 _overflow: hidden;
}

#sm2-container object,
#sm2-container embed {
 /*
  * the actual SWF movie bit.
  * important: The SWF needs to be able to be moved off-screen without display: or position: changes.
  * changing display: or position: or overflow: here or on parent can cause SWF reload or other weird issues after unblock
  * e.g., SM2 starts but strange errors, no whileplaying() etc.
 */
 width: 48px;
 height: 48px;
 /* some flash blockers may also respect this rule */
 max-width: 48px;
 max-height: 48px;
}

#sm2-container.swf_timedout {
 /* expand to show the timed-out SWF content */
 position: relative;
 width: 48px;
 height: 48px;
}

#sm2-container.swf_timedout,
#sm2-container.swf_timedout object,
#sm2-container.swf_timedout embed {
 /*
  * when SM2 didn't start normally, time-out case. flash blocked, missing SWF, no flash?
  * 48px square flash placeholder is typically used by blockers.
 */
 min-width: 48px;
 min-height: 48px;
}

#sm2-container.swf_unblocked {
 /* SWF unblocked, or was never blocked to begin with; try to collapse container as much as possible. */
 width: 1px;
 height: 1px;
}

#sm2-container.swf_loaded object,
#sm2-container.swf_loaded embed,
#sm2-container.swf_unblocked object,
#sm2-container.swf_unblocked embed {
 /* hide flash off-screen (relative to container) when it has loaded OK */
 left: -9999em;
 top: -9999em;
}

#sm2-container.swf_error {
 /* when there is a fatal error (flash loaded, but SM2 failed) */
 display: none;
}

#sm2-container.high_performance,
#sm2-container.high_performance.swf_timeout {
 /* "high performance" case: keep on-screen at all times */
 position: absolute;
 position: fixed;
}

#sm2-container.high_performance {
 overflow: hidden;
 _top: -9999px; /* IE 6 hax, no position:fixed */
 _left: -9999px;
 bottom: 0px;
 left: 0px;
 /*
  * special case: show at first with w/h, hide when unblocked.
  * might be bad/annoying.
  * try to stay within ClickToFlash "invisible" limits (so it won't be blocked.)
 */
 z-index: 99; /* try to stay on top */
}

#sm2-container.high_performance.swf_loaded,
#sm2-container.high_performance.swf_unblocked {
 z-index: auto;
}

#sm2-container.high_performance.swf_loaded,
#sm2-container.high_performance.swf_unblocked,
#sm2-container.high_performance.swf_unblocked object,
#sm2-container.high_performance.swf_unblocked embed {
 /*
  * 8x8px is required minimum to load in fx/win32 in some cases(?)
  * 6x6+ good for fast performance, even better when on-screen via position:fixed
  * also, clickToFlash (Safari <5.1) may auto-load "invisible" SWFs at this size
 */
 height: 8px;
 width: 8px;
}

#sm2-container.high_performance.swf_loaded {
 /* stay bottom/left */
 top: auto;
 bottom: 0px;
 left: 0px;
}

#sm2-container.high_performance.swf_loaded object,
#sm2-container.high_performance.swf_loaded embed,
#sm2-container.high_performance.swf_unblocked object,
#sm2-container.high_performance.swf_unblocked embed {
 /* high-performance case must stay on-screen */
 left: auto;
 top: auto;
}

#sm2-container.high_performance.swf_timedout {
 z-index: 99; /* try to stay on top */
}/* General warning: Beta-ish. Code could be a bit cleaner. */

.ui360, /* entire UI */
.sm2-360ui { /* canvas container */
 position:relative;
}

.ui360,
.sm2-360ui {
 min-width:50px; /* should always be at least this. */
 min-height:50px;
}

.sm2-360ui {
 width:50px;
 height:50px;
}

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

.sm2-360ui {
 position:relative;
 display:inline-block; /* firefox 3 et al */
 float:left; /* IE 6+7, firefox 2 needs this, inline-block would work with fx3 and others */
 *display:inline;
/*
 clear:left;
*/
}

.sm2-360ui.sm2_playing,
.sm2-360ui.sm2_paused {
 /* bump on top when active */
 z-index:10;
}

.ui360 a { /* .sm2_link class added to playable links by SM2 */
 float:left;
 display:inline;
 position:relative;
 color:#000;
 text-decoration:none;
 left:3px; /* slight spacing on left UI */
 top:18px; /* vertical align */
 text-indent:50px; /* make room for UI at left */
}

.ui360 a.sm2_link { /* SM2 has now started */
 text-indent:0px; /* UI now in place. */
}

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

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

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

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

.ui360 .sm2-timing.alignTweak {
 text-indent:1px; /* devious center-alignment tweak for Safari (might break things for others.) */
}

.ui360 .sm2-cover {
 position:absolute;
 left:0px;
 top:0px;
 width:100%;
 height:100%;
 z-index:2;
 display:none;
 background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); /* old-skool bug: IE 9 won't catch mouse events otherwise. /smash */
}

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

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

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

/* this could be optimized a fair bit. */

.ui360 {
 /*
  "fake" button shown before SM2 has started, non-JS/non-SM2 case etc.
  background image will be removed via JS, in threeSixyPlayer.init()
 */
 background:transparent url(./player/360-button-play.png) no-repeat 14px 50%;
 _background:transparent url(./player/360-button-play.gif) no-repeat 14px 50%; /* IE 6-only: special crap GIF */
}

.ui360 .sm2-360btn-default,
.ui360 .sm2-360ui.sm2_paused .sm2-360btn {
 background:transparent url(./player/360-button-play.png) no-repeat 50% 50%;
 _background:transparent url(./player/360-button-play.gif) no-repeat 50% 50%; /* IE 6-only: special crap GIF */
}

.ui360 .sm2-360btn-default,
.ui360 .sm2-360ui.sm2_paused .sm2-360btn {
 cursor:pointer;
}

.ui360 .sm2-360btn-default:hover,
.ui360 .sm2-360ui.sm2_paused .sm2-360btn:hover {
 background:transparent url(./player/360-button-play-light.png) no-repeat 50% 50%;
 _background:transparent url(./player/360-button-play.gif) no-repeat 50% 50%;
 cursor:pointer;
}

.ui360 .sm2-360ui.sm2_playing .sm2-360btn:hover,
.ui360 .sm2-360btn-playing:hover {
 background:transparent url(./player/360-button-pause-light.png) no-repeat 50% 50%;
 _background:transparent url(./player/360-button-pause-light.gif) no-repeat 50% 50%;
 cursor:pointer;
}

.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 {
 /* paused + dragging */
 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 {
 /* don't let pause button show on hover when dragging (or paused and dragging) */
 background:transparent;
 cursor:auto;
}

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

/* inline list style */

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

.sm2-inline-list .ui360 {
 /* inline player: minor tweak, tighten spacing */
 margin-right:-2px;
}

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

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

/* annotations */

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

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

div.ui360 div.metadata {
 display:none;
}

div.ui360 a span.metadata,
div.ui360 a span.metadata * {
 /* name of track, note etc. */
 vertical-align:baseline;
}/* larger canvas, spectrum + EQ visualization and other items */

.ui360-vis,
.ui360-vis .sm2-360ui,
.sm2-inline-list .ui360-vis {
 /* size of the container for the circle, etc. */
 width:128px;
 height:128px;
}

.ui360-vis {
 position:relative;
 /* a little extra spacing */
 padding-left:0;
 margin-left:0px;
 background-position:22.6% 50%; /* (~109px) initial play button position */
}

.sm2-inline-list .ui360-vis {
 cursor:pointer
}

.ui360-vis a {
 font:14px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;
 white-space:nowrap;
 text-indent:0px; /* undo inline style */
 top:46%; /* ehh. */
}

.sm2-inline-list .ui360-vis a {
 line-height:128px;
 top:auto;
}

.ui360-vis .sm2-360ui {
 margin-left:0;
}

.ui360-vis .sm2-timing {
 line-height:128px;
}

.ui360-vis .sm2-timing {
 font:bold 16px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;
 color:#333;
 text-align:center;
 line-height:128px;
 text-indent:0px;
}

.sm2-inline-list .ui360-vis,
.sm2-inline-list .ui360-vis .sm2-360ui {
 margin-left:0px;
}

.sm2-inline-list .ui360-vis {
 margin:8px 13px 7px 0px;
 padding-left:0px;
 background-position:50% 50%; /* initial play button position */
}

.sm2-inline-list .ui360-vis .sm2-360ui {
 border:1px solid #eee;
 /* offset the border */
 margin-left:-1px;
 margin-top:-1px;
}

.sm2-inline-list .ui360-vis a {
 position:absolute;
 display:inline;
 left:0px;
 bottom:0px;
 top:1px;
 width:100%; /* 2px padding in box */
 height:99%; /* dumb vertical hack */
 *height:128px; /* IE is dumb. */
 overflow:hidden;
 font-size:small;
 font-weight:300;
 color:#333;
 margin:0px;
 padding:0px;
 line-height:488px; /* bottom vertical alignment for text */
 *line-height:480px; /* IE again */
 text-align:center;
 -moz-border-radius:0px;
 -khtml-border-radius:0px;
 border-radius:0px;
}

.sm2-inline-list .ui360 a:hover {
 background-color:transparent; /* reset */
}

.sm2-inline-list .ui360-vis:hover .sm2-360ui,
.sm2-inline-list .ui360-vis a.sm2_link:hover,
.sm2-inline-list .ui360-vis a.sm2_link:active,
.sm2-inline-list .ui360-vis a.sm2_link:focus {
 background-color:transparent;
}

.sm2-inline-list .ui360-vis:hover a.sm2_link {
 background-color:#fafafa;
 *background-color:transparent; /* eh, screw IE. */
}

/* Use a bigger loading image for this layout */

.ui360-vis .sm2-360btn {
 width:48px;
 height:48px;
 margin-left:-24px;
 margin-top:-24px;
}

.ui360-vis:hover .sm2-360btn {
 /* show "play" anywhere on UI when hovering */
 background:transparent url(./player/360-button-vis-play-light.png) no-repeat 50% 50%;
 _background:transparent url(./player/360-button-vis-play.gif) no-repeat 50% 50%;
 cursor:pointer;
}

.ui360-vis .sm2-360ui.sm2_paused .sm2-360btn {
 background:transparent url(./player/360-button-vis-play.png) no-repeat 50% 50%;
 _background:transparent url(./player/360-button-vis-play.gif) no-repeat 50% 50%;
 cursor:pointer;
}

.ui360-vis .sm2-360btn-default:hover,
.ui360-vis .sm2-360ui.sm2_paused .sm2-360btn:hover {
 background:transparent url(./player/360-button-vis-play-light.png) no-repeat 50% 50%;
 _background:transparent url(./player/360-button-vis-play.gif) no-repeat 50% 50%;
 cursor:pointer;
}

.ui360-vis .sm2-360ui.sm2_playing .sm2-360btn:hover,
.ui360-vis .sm2-360btn-playing:hover {
 background:transparent url(./player/360-button-vis-pause-light.png) no-repeat 50% 50%;
 _background:transparent url(./player/360-button-vis-pause-light.gif) no-repeat 50% 50%;
 cursor:pointer;
}

.ui360-vis {
 /* non-JS / before-loaded state */
  float: left;
 background:transparent url(./player/360-button-vis-play.png) no-repeat 21% 50%;
 _background:transparent url(./player/360-button-vis-play.gif) no-repeat 21% 50%; /* IE 6-only: special crap GIF */
}

.ui360.center{
  float: none;
  margin: 0 auto;
}

.ui360-vis .sm2-360btn-default {
 /* real button, post-loaded state */
 background:transparent url(./player/360-button-vis-play.png) no-repeat 50% 50%;
 _background:transparent url(./player/360-button-vis-play.gif) no-repeat 50% 50%; /* IE 6-only: special crap GIF */
}

.ui360-vis .sm2-360ui.sm2_dragging .sm2-360btn {
 visibility: hidden;
}
.turquoise {
  background-color: #1ABC9C; }
  .turquoise.dark, .turquoise:hover, .turquoise.hover {
    background-color: #16A085; }

.green {
  background-color: #2ECC71; }
  .green.dark, .green:hover, .green.hover {
    background-color: #27AE60; }

.blue {
  background-color: #3498DB; }
  .blue.dark, .blue:hover, .blue.hover {
    background-color: #2980B9; }

.purple {
  background-color: #9B59B6; }
  .purple.dark, .purple:hover, .purple.hover {
    background-color: #8E44AD; }

.navy {
  background-color: #34495E; }
  .navy.dark, .navy:hover, .navy.hover {
    background-color: #2C3E50; }

.yellow {
  background-color: #F1C40F; }
  .yellow.dark, .yellow:hover, .yellow.hover {
    background-color: #F39C12; }

.orange {
  background-color: #E67E22; }
  .orange.dark, .orange:hover, .orange.hover {
    background-color: #D35400; }

.red {
  background-color: #E74C3C; }
  .red.dark, .red:hover, .red.hover {
    background-color: #C0392B; }

.silver {
  background-color: #ECF0F1; }
  .silver.dark, .silver:hover, .silver.hover {
    background-color: #BDC3C7; }

.gray {
  background-color: #95A5A6; }
  .gray.dark, .gray:hover, .gray.hover {
    background-color: #7F8C8D; }

.text-turquoise {
  color: #1ABC9C; }
  .text-turquoise.dark {
    color: #16A085; }

.text-green {
  color: #2ECC71; }
  .text-green.dark {
    color: #27AE60; }

.text-blue {
  color: #3498DB; }
  .text-blue.dark {
    color: #2980B9; }

.text-purple {
  color: #9B59B6; }
  .text-purple.dark {
    color: #8E44AD; }

.text-navy {
  color: #34495E; }
  .text-navy.dark {
    color: #2C3E50; }

.text-yellow {
  color: #F1C40F; }
  .text-yellow.dark {
    color: #F39C12; }

.text-orange {
  color: #E67E22; }
  .text-orange.dark {
    color: #D35400; }

.text-red {
  color: #E74C3C; }
  .text-red.dark {
    color: #C0392B; }

.text-silver {
  color: #ECF0F1; }
  .text-silver.dark {
    color: #BDC3C7; }

.text-gray {
  color: #95A5A6; }
  .text-gray.dark {
    color: #7F8C8D; }

body {
  font-family: "Cabin", "Helvetica", "Arial", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  text-shadow: none;
  text-decoration: none;
  text-transform: none;
  letter-spacing: -0.05em;
  word-spacing: 0em;
  line-height: 1;
  text-align: center;
  color: #444444;
  padding: 24px 0 0 0;
  margin: 0;
  position: relative; }
  body a {
    color: #444444;
    text-decoration: none; }
    body a img {
      border: none;
      outline: none; }
    body a:hover {
      text-decoration: underline; }
    body a:focus {
      outline: none; }
  body strong {
    font-weight: bold; }
  body button::-moz-focus-inner {
    border: 0; }
  body a h1, body h1 a img {
    font-size: 4em;
    margin: 0;
    outline: none;
    border: none; }
  body #subhead {
    font-size: 20px; }
    body #subhead p {
      margin: 0; }
  body #is {
    width: 580px;
    margin: 30px auto;
    text-align: center;
    font-size: 25px; }
  body .cwsc-connect-form .cwsc-connect {
    text-indent: -9999px;
    display: block;
    width: 207px;
    height: 25px;
    background-image: url(http://connect.soundcloud.com/medium-connect-with-sc.png); }
  body .cwsc-connect-form .cwsc-disconnect {
    text-indent: -9999px;
    width: 119px;
    height: 25px;
    background-image: url(http://connect.soundcloud.com/medium-disconnect.png); }
  body .cwsc-connect-form.large .cwsc-connect {
    width: 242px;
    height: 29px;
    background-image: url(http://connect.soundcloud.com/larger-connect-with-sc.png); }
  body .cwsc-connect-form.large .cwsc-disconnect {
    width: 140px;
    height: 29px;
    background-image: url(http://connect.soundcloud.com/larger-disconnect.png); }
  body .cwsc-connect-form.small .cwsc-connect {
    width: 189px;
    height: 21px;
    background-image: url(http://connect.soundcloud.com/small-connect-with-sc.png); }
  body .cwsc-connect-form.small .cwsc-disconnect {
    width: 109px;
    height: 21px;
    background-image: url(http://connect.soundcloud.com/small-disconnect.png); }
  body .cwsc-connect-form .current-user,
  body .cwsc-connect-form a.cwsc-disconnect,
  body .cwsc-connect-form.connected a.cwsc-connect {
    display: none; }
  body .cwsc-connect-form.connected .current-user,
  body .cwsc-connect-form.connected a.cwsc-disconnect {
    display: block; }
  body div#marketing_overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    display: none;
    z-index: 9999;
    margin-top: -24px; }
    body div#marketing_overlay.visible {
      display: block;
      opacity: 1;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-name: fadeInFromNone; }
    body div#marketing_overlay .marketing_inlay {
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      height: 450px;
      border-radius: 20px;
      padding: 20px;
      width: 500px;
      background: white;
      cursor: pointer; }
      body div#marketing_overlay .marketing_inlay .x_button {
        cursor: pointer;
        background: url(/assets/CloseButton.png) no-repeat center center;
        height: 50px;
        width: 50px;
        position: absolute;
        top: -25px;
        right: -25px; }
      body div#marketing_overlay .marketing_inlay .marketing_text {
        text-align: center;
        vertical-align: middle;
        padding: 10px; }
      body div#marketing_overlay .marketing_inlay a {
        display: block;
        width: 250px;
        height: 60px;
        margin: 5px 0;
        float: left; }
      body div#marketing_overlay .marketing_inlay .android {
        background: url(/assets/android_comp.jpg) no-repeat center center;
        height: 393px; }
      body div#marketing_overlay .marketing_inlay .iOS {
        background: url(/assets/ios_comp.jpg) no-repeat center center;
        height: 393px; }
  body div#marketing {
    width: 580px;
    text-align: center;
    margin: -10px auto 10px;
    z-index: 1000;
    overflow: hidden; }
    body div#marketing .marketing_text {
      float: left;
      width: 200px;
      text-align: center;
      vertical-align: middle;
      padding: 10px;
      margin-left: 25px; }
    body div#marketing a {
      display: block;
      width: 150px;
      height: 45px;
      margin: 5px 0;
      float: left; }
    body div#marketing .android {
      background: url(/assets/android_badge.png) no-repeat center center; }
    body div#marketing .iOS {
      background: url(/assets/app_store_badge.png) no-repeat center center; }
    body div#marketing .wub {
      background: url(/assets/wubbutton.png) no-repeat center center; }
  body body > .title {
    position: relative;
    width: 580px;
    margin: 30px auto;
    text-align: left; }
    body body > .title .number {
      font-size: 40px;
      position: absolute;
      text-align: right;
      left: -60px; }
  body .line {
    margin: 20px auto;
    border-bottom: 1px solid #cccccc;
    width: 580px; }
  body .smaller {
    text-align: center;
    margin-top: 10px;
    font-size: 13px;
    color: #777777; }
    body .smaller.bookmark a {
      color: #444444; }
  body .container {
    background: #eeeeee;
    color: #0c0017;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    width: 580px;
    margin: 10px auto 30px;
    text-align: left;
    padding: 5px 10px; }
  body .hack {
    height: 94px;
    padding: 5px 10px;
    border-top: 1px solid #cccccc; }
    body .hack:first-child {
      border-top: none; }
    body .hack .title {
      padding-top: 12px; }
    body .hack a {
      color: #888888; }
    body .hack .image {
      float: left;
      margin: 0 10px 5px 0; }
    body .hack .description {
      color: #999999;
      margin: 10px; }
  body .appstore_container {
    position: absolute;
    left: 50%;
    top: 175px; }
    body .appstore_container a.appstore {
      background: url("/assets/appstore.png") center center no-repeat;
      width: 135px;
      height: 75px;
      display: block;
      text-indent: -10000px;
      margin-left: 145px; }
  body .next {
    padding: 5px 10px; }
  body #container {
    z-index: 2;
    position: relative;
    width: 920px;
    margin: 0 auto; }
    body #container #right {
      width: 320px;
      padding: 150px 0 0;
      float: right; }
      body #container #right #social {
        margin: 15px 0; }
      body #container #right #ads .ad {
        display: block;
        margin: 10px auto; }
    body #container #left {
      width: 580px;
      margin: 0 auto; }
      body #container #left h1 {
        margin: 0 0 3px 0;
        outline: none;
        border: none; }
        body #container #left h1 a {
          font-size: 4em;
          margin: 0;
          outline: none;
          border: none; }
      body #container #left .smalltext {
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
        opacity: 1.0;
        padding-top: 15px; }
      body #container #left .notice {
        display: block;
        padding: 25px 5px;
        text-align: center;
        margin: 0 auto;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px; }
        body #container #left .notice.error {
          color: #E74C3C;
          font-size: 1.1em; }
      body #container #left .notice.small, body #container #left .smalltext .notice {
        padding: 10px 5px 0;
        font-size: 14px; }
      body #container #left h1 + .notice {
        padding: 0 5px 15px; }
      body #container #left .buttoncontainer {
        min-height: 400px;
        -webkit-transition: 1.5s;
        -moz-transition: 1.5s;
        -o-transition: 1.5s;
        transition: 1.5s; }
        body #container #left .buttoncontainer .buttons, body #container #left .buttoncontainer .reporter {
          -webkit-transition: 0.5s;
          -moz-transition: 0.5s;
          -o-transition: 0.5s;
          transition: 0.5s; }
          body #container #left .buttoncontainer .buttons.remixers, body #container #left .buttoncontainer .reporter.remixers {
            display: none;
            opacity: 0.0; }
          body #container #left .buttoncontainer .buttons a.button, body #container #left .buttoncontainer .buttons div.progress, body #container #left .buttoncontainer .reporter a.button, body #container #left .buttoncontainer .reporter div.progress {
            border: none;
            color: white;
            overflow: hidden;
            position: relative;
            font-size: 16.5px;
            text-decoration: none;
            text-shadow: none;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            -webkit-transition: 0.25s;
            -moz-transition: 0.25s;
            -o-transition: 0.25s;
            transition: 0.25s;
            padding: 11px 19px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            display: block;
            width: 100%;
            padding-right: 0;
            padding-left: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box; }
            body #container #left .buttoncontainer .buttons a.button.disabled, body #container #left .buttoncontainer .buttons a.button[disabled], body #container #left .buttoncontainer .buttons div.progress.disabled, body #container #left .buttoncontainer .buttons div.progress[disabled], body #container #left .buttoncontainer .reporter a.button.disabled, body #container #left .buttoncontainer .reporter a.button[disabled], body #container #left .buttoncontainer .reporter div.progress.disabled, body #container #left .buttoncontainer .reporter div.progress[disabled] {
              background-color: #ECF0F1;
              color: white; }
              body #container #left .buttoncontainer .buttons a.button.disabled input, body #container #left .buttoncontainer .buttons a.button[disabled] input, body #container #left .buttoncontainer .buttons div.progress.disabled input, body #container #left .buttoncontainer .buttons div.progress[disabled] input, body #container #left .buttoncontainer .reporter a.button.disabled input, body #container #left .buttoncontainer .reporter a.button[disabled] input, body #container #left .buttoncontainer .reporter div.progress.disabled input, body #container #left .buttoncontainer .reporter div.progress[disabled] input {
                display: none; }
            body #container #left .buttoncontainer .buttons a.button.upload, body #container #left .buttoncontainer .buttons a.button.drop, body #container #left .buttoncontainer .buttons a.button.search, body #container #left .buttoncontainer .buttons a.button.cloud, body #container #left .buttoncontainer .buttons div.progress.upload, body #container #left .buttoncontainer .buttons div.progress.drop, body #container #left .buttoncontainer .buttons div.progress.search, body #container #left .buttoncontainer .buttons div.progress.cloud, body #container #left .buttoncontainer .reporter a.button.upload, body #container #left .buttoncontainer .reporter a.button.drop, body #container #left .buttoncontainer .reporter a.button.search, body #container #left .buttoncontainer .reporter a.button.cloud, body #container #left .buttoncontainer .reporter div.progress.upload, body #container #left .buttoncontainer .reporter div.progress.drop, body #container #left .buttoncontainer .reporter div.progress.search, body #container #left .buttoncontainer .reporter div.progress.cloud {
              text-align: left;
              font-size: 32px;
              padding: 25px 0 25px 120px; }
            body #container #left .buttoncontainer .buttons a.button.upload, body #container #left .buttoncontainer .buttons div.progress.upload, body #container #left .buttoncontainer .reporter a.button.upload, body #container #left .buttoncontainer .reporter div.progress.upload {
              background-image: url(/assets/icons/upload.png);
              background-position: 39px 12px;
              background-repeat: no-repeat; }
            body #container #left .buttoncontainer .buttons a.button.drop, body #container #left .buttoncontainer .buttons div.progress.drop, body #container #left .buttoncontainer .reporter a.button.drop, body #container #left .buttoncontainer .reporter div.progress.drop {
              background-image: url(/assets/icons/drop.png);
              background-position: 33px 12px;
              background-repeat: no-repeat; }
            body #container #left .buttoncontainer .buttons a.button.search, body #container #left .buttoncontainer .buttons div.progress.search, body #container #left .buttoncontainer .reporter a.button.search, body #container #left .buttoncontainer .reporter div.progress.search {
              background-image: url(/assets/icons/search.png);
              background-position: 38px 19px;
              background-repeat: no-repeat; }
            body #container #left .buttoncontainer .buttons a.button.cloud, body #container #left .buttoncontainer .buttons div.progress.cloud, body #container #left .buttoncontainer .reporter a.button.cloud, body #container #left .buttoncontainer .reporter div.progress.cloud {
              background-image: url(/assets/icons/cloud.png);
              background-position: 12px 20px;
              background-repeat: no-repeat; }
            body #container #left .buttoncontainer .buttons a.button.drop.bigger, body #container #left .buttoncontainer .buttons div.progress.drop.bigger, body #container #left .buttoncontainer .reporter a.button.drop.bigger, body #container #left .buttoncontainer .reporter div.progress.drop.bigger {
              background-position: 33px 50px;
              padding-top: 63px;
              padding-bottom: 63px; }
            body #container #left .buttoncontainer .buttons a.button input[type=file], body #container #left .buttoncontainer .buttons div.progress input[type=file], body #container #left .buttoncontainer .reporter a.button input[type=file], body #container #left .buttoncontainer .reporter div.progress input[type=file] {
              position: absolute;
              right: 0px;
              top: 0px;
              left: 0px;
              bottom: 0px;
              margin: 0px;
              padding: 0px;
              cursor: pointer;
              opacity: 0;
              width: 100%;
              height: 100%;
              font-size: 100px;
              cursor: pointer; }
            body #container #left .buttoncontainer .buttons a.button .progressbar, body #container #left .buttoncontainer .buttons div.progress .progressbar, body #container #left .buttoncontainer .reporter a.button .progressbar, body #container #left .buttoncontainer .reporter div.progress .progressbar {
              transition: 0.25s;
              -webkit-transition: 0.25s;
              -moz-transition: 0.25s;
              -o-transition: 0.25s;
              position: absolute;
              left: 0;
              right: 100%;
              background: rgba(0, 0, 0, 0.2);
              bottom: 0;
              top: 85%;
              overflow: hidden; }
            body #container #left .buttoncontainer .buttons a.button .text, body #container #left .buttoncontainer .buttons div.progress .text, body #container #left .buttoncontainer .reporter a.button .text, body #container #left .buttoncontainer .reporter div.progress .text {
              display: inline; }
            body #container #left .buttoncontainer .buttons a.button .pending, body #container #left .buttoncontainer .buttons div.progress .pending, body #container #left .buttoncontainer .reporter a.button .pending, body #container #left .buttoncontainer .reporter div.progress .pending {
              display: none; }
            body #container #left .buttoncontainer .buttons a.button .done, body #container #left .buttoncontainer .buttons div.progress .done, body #container #left .buttoncontainer .reporter a.button .done, body #container #left .buttoncontainer .reporter div.progress .done {
              display: none; }
            body #container #left .buttoncontainer .buttons a.button.inprogress .text, body #container #left .buttoncontainer .buttons div.progress.inprogress .text, body #container #left .buttoncontainer .reporter a.button.inprogress .text, body #container #left .buttoncontainer .reporter div.progress.inprogress .text {
              display: none; }
            body #container #left .buttoncontainer .buttons a.button.inprogress .pending, body #container #left .buttoncontainer .buttons div.progress.inprogress .pending, body #container #left .buttoncontainer .reporter a.button.inprogress .pending, body #container #left .buttoncontainer .reporter div.progress.inprogress .pending {
              display: inline; }
            body #container #left .buttoncontainer .buttons a.button.inprogress .done, body #container #left .buttoncontainer .buttons div.progress.inprogress .done, body #container #left .buttoncontainer .reporter a.button.inprogress .done, body #container #left .buttoncontainer .reporter div.progress.inprogress .done {
              display: none; }
            body #container #left .buttoncontainer .buttons a.button.done .text, body #container #left .buttoncontainer .buttons div.progress.done .text, body #container #left .buttoncontainer .reporter a.button.done .text, body #container #left .buttoncontainer .reporter div.progress.done .text {
              display: none; }
            body #container #left .buttoncontainer .buttons a.button.done .pending, body #container #left .buttoncontainer .buttons div.progress.done .pending, body #container #left .buttoncontainer .reporter a.button.done .pending, body #container #left .buttoncontainer .reporter div.progress.done .pending {
              display: none; }
            body #container #left .buttoncontainer .buttons a.button.done .done, body #container #left .buttoncontainer .buttons div.progress.done .done, body #container #left .buttoncontainer .reporter a.button.done .done, body #container #left .buttoncontainer .reporter div.progress.done .done {
              display: inline; }
            body #container #left .buttoncontainer .buttons a.button.remixer, body #container #left .buttoncontainer .buttons div.progress.remixer, body #container #left .buttoncontainer .reporter a.button.remixer, body #container #left .buttoncontainer .reporter div.progress.remixer {
              text-align: left;
              padding-left: 15px;
              padding-right: 15px; }
              body #container #left .buttoncontainer .buttons a.button.remixer img, body #container #left .buttoncontainer .buttons div.progress.remixer img, body #container #left .buttoncontainer .reporter a.button.remixer img, body #container #left .buttoncontainer .reporter div.progress.remixer img {
                float: left; }
              body #container #left .buttoncontainer .buttons a.button.remixer .name, body #container #left .buttoncontainer .buttons div.progress.remixer .name, body #container #left .buttoncontainer .reporter a.button.remixer .name, body #container #left .buttoncontainer .reporter div.progress.remixer .name {
                display: block;
                font-size: 36px;
                margin-bottom: 10px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.5);
                margin-left: 100px; }
                body #container #left .buttoncontainer .buttons a.button.remixer .name img, body #container #left .buttoncontainer .buttons div.progress.remixer .name img, body #container #left .buttoncontainer .reporter a.button.remixer .name img, body #container #left .buttoncontainer .reporter div.progress.remixer .name img {
                  float: right;
                  margin: 0; }
              body #container #left .buttoncontainer .buttons a.button.remixer .description, body #container #left .buttoncontainer .buttons div.progress.remixer .description, body #container #left .buttoncontainer .reporter a.button.remixer .description, body #container #left .buttoncontainer .reporter div.progress.remixer .description {
                display: block;
                padding: 0 0 10px 100px; }
              body #container #left .buttoncontainer .buttons a.button.remixer .mobile, body #container #left .buttoncontainer .buttons div.progress.remixer .mobile, body #container #left .buttoncontainer .reporter a.button.remixer .mobile, body #container #left .buttoncontainer .reporter div.progress.remixer .mobile {
                font-size: 20px;
                float: right;
                padding: 9px; }
              body #container #left .buttoncontainer .buttons a.button.remixer .app_popup, body #container #left .buttoncontainer .buttons div.progress.remixer .app_popup, body #container #left .buttoncontainer .reporter a.button.remixer .app_popup, body #container #left .buttoncontainer .reporter div.progress.remixer .app_popup {
                text-decoration: underline; }
          body #container #left .buttoncontainer .buttons a.button, body #container #left .buttoncontainer .reporter a.button {
            cursor: pointer; }
            body #container #left .buttoncontainer .buttons a.button:hover, body #container #left .buttoncontainer .buttons a.button:focus, body #container #left .buttoncontainer .buttons a.button.hover, body #container #left .buttoncontainer .reporter a.button:hover, body #container #left .buttoncontainer .reporter a.button:focus, body #container #left .buttoncontainer .reporter a.button.hover {
              color: white;
              -webkit-transition: 0.25s;
              -moz-transition: 0.25s;
              -o-transition: 0.25s;
              transition: 0.25s; }
            body #container #left .buttoncontainer .buttons a.button:active, body #container #left .buttoncontainer .buttons a.button.active, body #container #left .buttoncontainer .reporter a.button:active, body #container #left .buttoncontainer .reporter a.button.active {
              color: rgba(255, 255, 255, 0.75);
              -webkit-box-shadow: none;
              -moz-box-shadow: none;
              box-shadow: none; }
        body #container #left .buttoncontainer .reporter {
          display: none;
          opacity: 0;
          padding-bottom: 30px; }
          body #container #left .buttoncontainer .reporter div.progress {
            margin: 0 0 10px 0;
            padding-top: 0px;
            padding-bottom: 0px;
            background-color: #2ECC71; }
            body #container #left .buttoncontainer .reporter div.progress .progressbar.loaded {
              top: 88%; }
              body #container #left .buttoncontainer .reporter div.progress .progressbar.loaded.notfinished {
                background-color: rgba(0, 0, 0, 0.2);
                border-top-right-radius: 8px;
                -webkit-border-top-right-radius: 8px;
                -moz-border-top-right-radius: 8px;
                -o-border-top-right-radius: 8px; }
            body #container #left .buttoncontainer .reporter div.progress .progressbar.played {
              top: 88%;
              background: rgba(0, 0, 0, 0.3); }
          body #container #left .buttoncontainer .reporter .tag {
            transition: 0.25s;
            -webkit-transition: 0.25s;
            -moz-transition: 0.25s;
            -o-transition: 0.25s;
            overflow: hidden;
            min-height: 0px;
            max-height: 0px; }
            body #container #left .buttoncontainer .reporter .tag.small .name {
              font-weight: bold; }
            body #container #left .buttoncontainer .reporter .tag.small .artist {
              font-weight: bold; }
            body #container #left .buttoncontainer .reporter .tag.small.expanded {
              padding-top: 12px;
              padding-bottom: 12px;
              min-height: 20px; }
            body #container #left .buttoncontainer .reporter .tag.big.expanded {
              min-height: 128px;
              margin-bottom: 18px; }
              body #container #left .buttoncontainer .reporter .tag.big.expanded #player #art {
                width: 128px;
                height: 128px;
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0.3; }
                body #container #left .buttoncontainer .reporter .tag.big.expanded #player #art img {
                  width: 128px;
                  height: 128px;
                  display: block;
                  position: relative;
                  top: 0;
                  left: 0; }
              body #container #left .buttoncontainer .reporter .tag.big.expanded #player #tag {
                text-align: left;
                margin-left: 144px;
                line-height: 1.5em;
                padding: 20px 12px 20px 5px; }
                body #container #left .buttoncontainer .reporter .tag.big.expanded #player #tag span, body #container #left .buttoncontainer .reporter .tag.big.expanded #player #tag strong {
                  display: block; }
                body #container #left .buttoncontainer .reporter .tag.big.expanded #player #tag .title {
                  font-size: 1.4em;
                  margin-bottom: 10px; }
          body #container #left .buttoncontainer .reporter .actions {
            max-height: 0;
            overflow: hidden; }
            body #container #left .buttoncontainer .reporter .actions.visible {
              max-height: 100px; }
            body #container #left .buttoncontainer .reporter .actions a.button {
              width: 32%;
              float: left;
              font-size: 1.3em; }
              body #container #left .buttoncontainer .reporter .actions a.button span span {
                display: block;
                font-size: 0.5em; }
              body #container #left .buttoncontainer .reporter .actions a.button.download {
                background-image: url(/assets/icons/cloud_download.png);
                background-repeat: no-repeat;
                background-position: 5px 5px;
                padding-left: 34px; }
              body #container #left .buttoncontainer .reporter .actions a.button.share {
                background-image: url(/assets/icons/cloud_small.png);
                background-repeat: no-repeat;
                background-position: 5px 5px;
                padding-left: 80px; }
              body #container #left .buttoncontainer .reporter .actions a.button.retry {
                background-image: url(/assets/icons/retry.png);
                background-repeat: no-repeat;
                background-position: 5px 5px;
                padding-left: 34px; }
            body #container #left .buttoncontainer .reporter .actions a.button + a.button {
              margin-top: 0;
              margin-left: 2%; }
        body #container #left .buttoncontainer .group h2 {
          text-align: left;
          border-bottom: 1px solid rgba(0, 0, 0, 0.5);
          padding-bottom: 0;
          margin: 0 0 10px; }
        body #container #left .buttoncontainer .group .description {
          padding: 0 0 10px;
          text-align: left; }
        body #container #left .buttoncontainer a.button + a.button {
          margin-top: 5px; }
        body #container #left .buttoncontainer .group + .group {
          margin-top: 20px; }
      body #container #left .chooser {
        display: none;
        margin: 30px 0 0;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -o-transition: 0.5s; }
        body #container #left .chooser .search_bar {
          position: relative;
          background-color: #E67E22;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
          padding: 5px;
          height: 32px; }
          body #container #left .chooser .search_bar input.text {
            background: white;
            margin: 2px;
            border: 0;
            padding: 5px;
            border-radius: 5px;
            width: 395px;
            font-size: 12pt;
            text-align: left; }
          body #container #left .chooser .search_bar button {
            width: 146px;
            background: #EEE;
            border: 0;
            padding: 8px;
            margin: 2px 5px;
            height: 28px;
            display: block;
            float: right;
            border-radius: 6px;
            font-weight: bold;
            transition: opacity;
            -webkit-transition: opacity;
            opacity: 0.8; }
            body #container #left .chooser .search_bar button.spinning {
              background: url("/assets/ajax-small.gif") center center no-repeat #eee; }
          body #container #left .chooser .search_bar button:hover {
            opacity: 1; }
          body #container #left .chooser .search_bar button:active {
            opacity: 0.5; }
        body #container #left .chooser .results {
          text-align: left;
          border-left: 1px solid #aaa;
          border-right: 1px solid #aaa;
          border-bottom: 1px solid #aaa;
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
          overflow-y: auto;
          overflow-x: hidden;
          max-height: 446px; }
          body #container #left .chooser .results .result {
            display: block;
            position: relative;
            width: 598px;
            border-bottom: 1px solid #aaa;
            opacity: 1;
            min-height: 100px;
            background-position-x: 0px;
            background-color: #fff;
            transition: background-position-x ease-in-out 10s;
            -webkit-transition: background-position-x ease-in-out 10s;
            -moz-transition: background-position-x ease-in-out 10s;
            -o-transition: background-position-x ease-in-out 10s; }
            body #container #left .chooser .results .result:hover {
              text-decoration: none;
              background-position-x: -500px; }
            body #container #left .chooser .results .result img {
              float: left;
              height: 100px;
              width: 100px; }
            body #container #left .chooser .results .result h1 {
              font-size: 14pt;
              display: block;
              padding: 6px 5px 5px 108px; }
              body #container #left .chooser .results .result h1 a {
                font-size: 1em; }
            body #container #left .chooser .results .result h2 {
              display: inline;
              font-size: 12pt;
              opacity: 0.8;
              padding: 6px 5px 5px 8px; }
            body #container #left .chooser .results .result h2:before {
              content: "by "; }
            body #container #left .chooser .results .result h3 {
              font-size: 12pt;
              opacity: 0.5;
              display: inline;
              font-weight: normal; }
            body #container #left .chooser .results .result .playbutton {
              position: absolute;
              bottom: 5px;
              right: 115px; }
            body #container #left .chooser .results .result .stats {
              position: absolute;
              bottom: 6px;
              left: 108px;
              color: #ccc;
              font-size: 10pt;
              font-weight: bold; }
              body #container #left .chooser .results .result .stats span.count {
                padding: 0px 5px 0 15px; }
              body #container #left .chooser .results .result .stats span.playback.count {
                background: url(/assets/sc_play.png) left center no-repeat; }
              body #container #left .chooser .results .result .stats span.download.count {
                background: url(/assets/sc_down.png) left center no-repeat; }
              body #container #left .chooser .results .result .stats span.favoritings.count {
                background: url(/assets/sc_heart.png) left center no-repeat; }
            body #container #left .chooser .results .result .use {
              background: #E67E22;
              display: block;
              float: right;
              padding: 10px;
              border-radius: 20px;
              color: #FCFCFC;
              font-weight: bold;
              text-shadow: 0px 1px #333;
              position: absolute;
              bottom: 10px;
              right: 45px;
              text-align: center;
              width: 70px; }
              body #container #left .chooser .results .result .use:hover .use {
                text-decoration: underline; }
            body #container #left .chooser .results .result:last-child {
              border: none;
              border-bottom-left-radius: 3px;
              border-bottom-right-radius: 3px; }
            body #container #left .chooser .results .result.noresults {
              width: 578px;
              text-align: center;
              font-size: 13pt;
              color: #622;
              padding: 15px 10px 12px; }
            body #container #left .chooser .results .result.goahead {
              width: 578px;
              text-align: center;
              font-size: 13pt;
              padding: 15px 10px 12px;
              color: #575b58; }
        body #container #left .chooser#url_chooser .results {
          max-height: 80px; }
          body #container #left .chooser#url_chooser .results .result {
            min-height: 0px; }
      body #container #left #content {
        margin: 0 auto;
        padding: 0;
        text-align: left;
        position: relative;
        min-height: 32px; }
      body #container #left #footer {
        text-align: right;
        opacity: 0.4;
        color: #888888;
        padding: 0;
        width: 100%;
        margin: 40px auto 20px;
        line-height: 1.4em; }
        body #container #left #footer .footer_left {
          width: 320px;
          text-align: center; }
          body #container #left #footer .footer_left .totalsongs {
            font-size: 24px; }
          body #container #left #footer .footer_left .links a {
            padding: 0 10px; }
        body #container #left #footer .footer_right {
          float: right;
          text-align: center;
          width: 260px; }
#waves {
    width: 100%;
    height: 120px;
    position: absolute;
    z-index: 1;
    overflow: hidden;
    top: 43px;
}

.wave {
    width: 100%;
    height: 120px;
    position: absolute;
    background-repeat: repeat-x;
    background-position: center center;
    top: 0px;
    opacity: 0.25;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display:none;
        opacity: 0;
    }

    1% {
        display: block ;
        opacity: 0;
    }

    100% {
        display: block ;
        opacity: 1;
    }
}

@-webkit-keyframes lr {
  0% {
    background-position: 0px 0px;
    opacity: 0.5;
  }
  50% {
    opacity: 0.25;
  }
  100% {
    background-position: -1500px 0px;
    opacity: 0.5;
  }
}


@-webkit-keyframes rl {
  0% {
    background-position: 0px 0px;
    opacity: 0.25;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    background-position: 1500px 0px;
    opacity: 0.25;
  }
}


@-moz-keyframes lr {
  0% {
    background-position: 0px 0px;
    opacity: 0.5;
  }
  50% {
    opacity: 0.25;
  }
  100% {
    background-position: -1500px 0px;
    opacity: 0.5;
  }
}


@-moz-keyframes rl {
  0% {
    background-position: 0px 0px;
    opacity: 0.25;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    background-position: 1500px 0px;
    opacity: 0.25;
  }
}


.left.fast {
    position: absolute;
    left: 0px;
    -webkit-animation-name: lr;
    -webkit-animation-duration: 30s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: lr;
    -moz-animation-duration: 30s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-timing-function: linear;
}

.right.fast {
    position: absolute;
    right: 0px;
    -webkit-animation-name: rl;
    -webkit-animation-duration: 30s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rl;
    -moz-animation-duration: 30s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-timing-function: linear;
}

.left.slow {
    position: absolute;
    left: 0px;
    -webkit-animation-name: lr;
    -webkit-animation-duration: 60s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: lr;
    -moz-animation-duration: 60s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-timing-function: linear;
}

.right.slow {
    position: absolute;
    right: 0px;
    -webkit-animation-name: rl;
    -webkit-animation-duration: 60s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rl;
    -moz-animation-duration: 60s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-timing-function: linear;
}

.wave_gray   { background-image: url("./waves/gray.png"); }
.wave_red    { background-image: url("./waves/red.png"); }
.wave_orange { background-image: url("./waves/orange.png"); }
.wave_yellow { background-image: url("./waves/yellow.png"); }
.wave_navy   { background-image: url("./waves/navy.png"); }
.wave_purple { background-image: url("./waves/purple.png"); }
.wave_blue   { background-image: url("./waves/blue.png"); }
.wave_green  { background-image: url("./waves/green.png"); }


@-webkit-keyframes progress { to { background-position: 60px 0; } }
@-moz-keyframes progress    { to { background-position: 60px 0; } }
@keyframes progress         { to { background-position: 60px 0; } }
body #container #left div div.reporter div.progress div.small.tag.expanded.animated,
body #container #left div div.reporter div.progress div.progressbar.loaded.notfinished {
    -webkit-animation: progress 1s linear infinite;
    -moz-animation: progress 1s linear infinite;
    animation: progress 1s linear infinite;
    background-repeat: repeat-x;
    background-size: 60px 60px;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}