/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 26, 2012 */
@font-face {
    font-family: 'BitTrip7sRBRegular';
    src: url('pixelation-webfont.eot');
    src: url('pixelation-webfont.eot?#iefix') format('embedded-opentype'),
         url('pixelation-webfont.woff') format('woff'),
         url('pixelation-webfont.ttf') format('truetype'),
         url('pixelation-webfont.svg#BitTrip7sRBRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


a:link, a:visited {
  color: #ff0;
}

body {
  color: #ccc;
  background: #444;
  font-family: "BitTrip7sRBRegular", sans-serif;
}

h1 {
  font-size: 2em;
  font-weight: normal;
  margin:0;padding:0.2em;
  line-height: 1.2em;
  background: #000;
}

footer {
  margin-top: 2em;
  font-size: 0.75em;
}

h2 {
  font-size: 1em;
  font-weight: normal;

  color: #fff;
}

.player {
  width: 100%;
  overflow: hidden;
  margin-top: 1em;
}

.playlist {
  overflow-y: scroll;
  height: 15em;
  width:49.5%;
  padding: 0px;
  float: left;
  background: #000;
  border: 2px solid #000;
  box-sizing: border-box;
}

.playlist.dropTarget {
  background: #800;
  border-color: #f00;
}

.samplelist {
  overflow-y: scroll;
  height: 15em;
  width:49.5%;
  padding: 0px;
  float:left;
  margin-left: 1%;
  background: #000;
}
.controls {
  width: 78em;

  float: left;
  margin-top: 0.2em;
  padding: 1em 0em;
}

.dropnote {
  margin: 1em 2px;
}

.mods,.samples {
  list-style-type: none;
  margin: 2px;
  padding: 0;
  line-height: 1.2em;
}
.samples li {
  padding: 0 4px;
}


.mods a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 0 4px;
}

.mods a.active {
  -moz-animation: graycycle 1s infinite;
  -webkit-animation: graycycle 1s infinite;
}

@-moz-keyframes graycycle {
  0%   {background: #444;}
  50%   {background: #888;}
  100% {background: #444;}
}
@-webkit-keyframes graycycle {
  0%   {background: #444;}
  50%   {background: #888;}
  100% {background: #444;}
}

a.button {
  border: 1px solid #fff;
  text-decoration: none;
  color: #fff;
  padding: 0.2em;
  margin: 0.1em;
}

a.button.play.active {
  background: green;
}
a.button.stop.active {
  background: red;
}
a.button.inactive {
  color: gray;
  border-color: gray;
}

@-moz-keyframes guru {
  0%   {border-color: #000;}
  50% {border-color: red;}
  100%   {border-color: #000;}
}
@-webkit-keyframes guru {
  0%   {border-color: #000;}
  50% {border-color: red;}
  100%   {border-color: #000;}
}


.notice .error {
  background: #000;
  border: 3px solid red;
  color: red;
  line-height: 1.2em;
  padding: 20px;
  -moz-animation: guru 1s infinite;
  -webkit-animation: guru 1s infinite;

}