/* BASICS */

a, a:visited, a:link, a:active, a:hover, a:focus {
  text-decoration: none;
  outline: none;
}

a, a:visited, a:link, a:focus {
  color: #6699FF;
}

a:hover, a:active {
  text-decoration: underline;
}


p, ul, ol {
  margin-bottom: 1.5em;
}

li + li {
  margin-top: 1.5em;

}

.compact li + li {
  margin-top: 0.5em;
}

h1 {
  font-size: 1.8em;
}

h2 {
  font-size: 1.5em;
}

* + h1, * + h2 {
  margin-top: 1.5em;
}

body {
  font-family: "Lucida Grande", "Arial";
  font-size: 13px;
  background: #000;
  color: #FFF;
  margin: 0;
  padding: 0;
}

/* LAYOUT */

div.viewport-size { /* div#page */
  min-width: 760px;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

div.viewport-size #hd,
div.viewport-size #bd,
div.viewport-size #ft {
  position: absolute;
}

div.viewport-size #ft {
  left: 40px;
  right: 40px;
  left: 90px;
}


div.viewport-size div#hd {
  top: 0px;
  height: 25px;
  left: 0px;
  right: 0px;
}

div.viewport-size div#bd {
  top: 40px;
  left: 40px;
  right: 40px;
  bottom: 80px;
}

div.viewport-size #ft {
  bottom: 0px;
  height: 50px;
}

div.vertical-scroll {
  min-width: 700px;
}

div.vertical-scroll div#hd,
div.vertical-scroll div#bd,
div.vertical-scroll div#ft {
  margin-top: 0px;
  margin-bottom: 0px;
  position: relative;
}


div.vertical-scroll div#hd {
  height: 25px;
  margin-left: 0px;
  margin-right: 0px;
}

div.vertical-scroll div#bd {
  margin-left: 0px;
  margin-right: 0px;
}

div.vertical-scroll div#ft {
  padding-top: 0px;
  padding-bottom: 0px;
  height: 50px;
}

/* APPLICATION HEADER */

div#application-header {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 4px;
  -webkit-box-shadow: 0 -1px 0 rgba(20, 30, 40, .75);
  -moz-box-shadow: 0 -1px 0 rgba(20, 30, 40, .75);
  -o-box-shadow: 0 -1px 0 rgba(20, 30, 40, .75);
  box-shadow: 0 -1px 0 rgba(20, 30, 40, .75);
  background: #282d32;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(61, 68, 77, .9)), to(rgba(40, 45, 50, .9)));
  background: -moz-linear-gradient(top, rgba(61, 68, 77, .9), rgba(50, 45, 50, .9));
  background: linear-gradient(top, rgba(61, 68, 77, .9), rgba(50, 45, 50, .9));
  cursor: default;
}

div#application-header span#header-content-left {
  font-weight: bold;
  font-size: 14px;
  text-shadow: 0 1px 1px #222;
}

div#application-header div#header-content-right {
  float: right;
  padding-right: 5px;
  position: relative;
  top: 2px;
  font-size: 11px;
  color: #888;
}


/* VISUALIZER HEADER */

div#visualizer-header {
  position: absolute;
  top: 0px;
  height: 55px;
  left: 0px;
  right: 1px;
}

div#visualizer-header h1 {
  margin: 0 0 8px 0;
  position: relative;
}

div#visualizer-header div#share-buttons-container {
  float: right;
  position: relative;
  right: -6px;
}

div#visualizer-header div#share-buttons-container a {
  color: #000;
}

div#share-buttons-container a#fb-share-link {
  display: block;
  float: left;
  width: 120px;
  height: 20px;
  text-decoration: none;
  position: relative;
  top: 2px;
  background-image: url(/images/fb-share.png);
  background-repeat: no-repeat;
  background-position: 0 0;
}

div#share-buttons-container a#fb-share-link span.fb_share_size_Small {
  position: absolute;
  left: 65px;
  top: -8px;
}

div#share-buttons-container a#fb-share-link span.fb_share_count_nub_right  {
  position: relative;
  top: 11px;
  left: 1px;
  background: none;
/*  background: url(/images/fb-nub.png); */
}



a#fb-share-link span.FBConnectButton {
  display: none;
}

div#share-buttons-container a#comments-link {
  display: block;
  float: left;
  width: 62px;
  height: 20px;
  text-decoration: none;
  position: relative;
  top: 2px;
  background-image: url(/images/feedback.png);
}

div#visualizer-header div.label-and-field {
  height: 18px;
  float: left;
}

div#visualizer-header div#data-source-select-container {
  float: right;
}

div#visualizer-header label, 
div#visualizer-header .text {
  font-size: 11px;
  color: #888;
}

div#visualizer-header select {
  font-size: 11px;
  margin: 0;
}

div#visualizer-header span.label-text {

}

/*
div#visualizer-header div#header-links {
  position: absolute;
  bottom: 0px;
  right: 0px;
  font-size: 11px;
  font-weight: normal;
}
*/

/* FOOTER */

div#ft {
  font-size: 11px;
}

div.footer-content {
  position: absolute;
  bottom: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
}

div.footer-right {
  right: 0px;
}

div.footer-left {
  left: 0px;
}

span.license-note {
  display:none;
}

/* YOUTUBE */

div.flash-player-container {
  position: absolute;
  bottom: -78px;
  left: -38px;
  height: 48px;
  width: 48px;
  border-style: solid;
  border-width: 1px;
  border-color: #666;
  background: #000;
  z-index: 0; /* gets adjusted by javascript */
}

div.flash-player-container div.flash-player-standin,
div.flash-player-container div.flash-player {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: #000;
}

div#yt-container {
  border-color: #666;
}

div#sc-container, div#audio-container {
  border-color: #000;
}

a#sc-logo {
  position: absolute;
  left: 0px;
  bottom: 0px;
  height: 48px;
  width: 48px;
  z-index: 10;
  background-image: url(/images/powered-by-soundcloud.png);
}

.feature-video div.flash-player-container {
  top: 113px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: auto;
  width: auto;
}

.feature-video div#yt-container {
  border: none 0px #000;
}

/* VISUALIZER */

div#visualizer {
  position: absolute;
  top: 63px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 20;
}

/* PLAYER
   LIFTED FROM http://thebox.maxvoltar.com/ AND
   http://neutroncreations.com/blog/building-a-custom-html5-audio-player-with-jquery/ */

.player {
  display: block;
  height: 48px;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  -webkit-box-shadow: 0 -1px 0 rgba(20, 30, 40, .75);
  -moz-box-shadow: 0 -1px 0 rgba(20, 30, 40, .75);
  -o-box-shadow: 0 -1px 0 rgba(20, 30, 40, .75);
  box-shadow: 0 -1px 0 rgba(20, 30, 40, .75);
  border-top: 1px solid #c2cbd4;
  border-bottom: 1px solid #283541;
  background: #939eaa;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(174, 185, 196, .9)), to(rgba(110, 124, 140, .9)), color-stop(.5, rgba(152, 164, 176, .9)),color-stop(.501, rgba(132, 145, 159, .9)));
  background: -moz-linear-gradient(top, rgba(174, 185, 196, .9), rgba(152, 164, 176, .9) 50%, rgba(132, 145, 159, .9) 50.1%, rgba(110, 124, 140, .9));
  background: linear-gradient(top, rgba(174, 185, 196, .9), rgba(152, 164, 176, .9) 50%, rgba(132, 145, 159, .9) 50.1%, rgba(110, 124, 140, .9));
  cursor: default;
}

#playtoggle {
	position: absolute;
	top: 9px;
	left: 10px;
	width: 30px;
	height: 30px;
	background: url(/images/player.png) no-repeat -30px 0;
	cursor: pointer;
}

#playtoggle.playing {
	background-position: 0 0;
}

#playtoggle:active {
	top: 10px;
}

#timeleft {
  line-height: 48px;
  position: absolute;
  top: 0;
  right: 20px;
  width: 80px;
  text-align: right;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 0 #546374;
}

#gutter {
  position: absolute;
  top: 19px;
  left: 50px;
  right: 90px;
  height: 6px;
  padding: 2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #546374;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#242f3b), to(#516070));
  background: -moz-linear-gradient(top, #242f3b, #516070);
  background: linear-gradient(top, #242f3b, #516070);
  -webkit-box-shadow: 0 1px 4px rgba(20, 30, 40, .75) inset, 0 1px 0 rgba(176, 187, 198, .5);
  -moz-box-shadow: 0 1px 4px rgba(20, 30, 40, .75) inset, 0 1px 0 rgba(176, 187, 198, .5);
  -o-box-shadow: 0 1px 4px rgba(20, 30, 40, .75) inset, 0 1px 0 rgba(176, 187, 198, .5);
  box-shadow: 0 1px 4px rgba(20, 30, 40, .75) inset, 0 1px 0 rgba(176, 187, 198, .5);
}

#buffer-container {
  position: relative;
  display: block;
  width: 100%;
  height: 6px;
}

#buffer {
  background: #fff;
  background: #939eaa;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eaeef1), to(#c7cfd8));
  background: -moz-linear-gradient(top, #eaeef1, #c7cfd8);
  background: linear-gradient(top, #eaeef1, #c7cfd8);
  -webkit-box-shadow: 0 1px 0 #fff inset, 0 1px 0 #141e28;
  -moz-box-shadow: 0 1px 0 #fff inset, 0 1px 0 #141e28;
  -o-box-shadow: 0 1px 0 #fff inset, 0 1px 0 #141e28;
  box-shadow: 0 1px 0 #fff inset, 0 1px 0 #141e28;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  display: block;
  min-width: 6px;
  height: 6px;
  position: absolute;
}

#handle {
  border: none;
  position: absolute;
  top: -5px;
  left: 0;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  background: url(/images/player.png) no-repeat -65px -5px;
  cursor: pointer;
}

#handle-tail {
  position: absolute;
  top: 18px;
  left: 9px;
  width: 2px;
  height: 500px; /* reset by js */
  background: #3d8dec;
}

/* SAMPLES */

div#samples-container {
  position: absolute;
  left: 50px;  /* match gutter */
  right: 90px; /* match gutter */
  top: 55px;
  bottom: 0px;
  overflow: visible;
}

div#samples {
  position: absolute;
  left: 0px;
  width: 100%;
  top: 0px;
  bottom: 0px;
}

div.sample-block {
  display: block;
  position: absolute;
  background: #f2f5f2;
  font-size: 11px;
  padding: 0px 5px;
  color: #fff;
  text-shadow: #546374 0px 1px 0px;
  overflow: hidden;
}

div.strip-0 {
  background: #f940d6;
}

div.strip-1 {
  background: #3e6fcc;
}

div.strip-2 {
  background: #f33a3a;
}

div.strip-3 {
  background: #42ab9d;
}

div.strip-4 {
  background: #c26710;
}

div.strip-5 {
  background: #9fcf3f;
}

/* TIPSY MODS */

.tipsy {
  line-height: 1.5em;
}

/* follows .tipsy from third/tipsy.css, but avoids dynamic behavior */
.tipsy-static {
  display: block;
  padding: 5px;
  font-size: 10px;
  position: absolute;
  z-index: 100000;
}

#handle-time-point {
  position: absolute;
  bottom: 14px;
  left: -14px;
}

#handle-time-point .tipsy-inner {
  width: 28px;
  border: solid 1px #fff;
  padding-left: 5px;
  padding-right: 5px;
}





/* jQuery UI theme mod */

/* webkit fix */
.ui-dialog {
  position: absolute;
}

.ui-dialog .ui-dialog-content {
  padding: 1em 2em;
}

.ui-widget-overlay {
  background-image: none;
  background-color: #333;
}

/* knock out annoying theme background image */
.ui-widget-content {
  background-image: none;
}

.text-content {
  line-height: 1.5em;
  font-size: 12px;
}

.text-content h3 {
  margin-top: 3em;
}


/* Editor */

div#editor-container {
  position: fixed;
  height: 80px;
  bottom: 0px;
  left: 90px;
  right: 130px;
  padding: 10px;
  display: none;
  z-index: 50;
  border-top: 1px solid #556;
  background: #282d32;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(61, 68, 77, .9)), to(rgba(40, 45, 50, .9)));
  background: -moz-linear-gradient(top, rgba(61, 68, 77, .9), rgba(50, 45, 50, .9));
  background: linear-gradient(top, rgba(61, 68, 77, .9), rgba(50, 45, 50, .9));
}

div.show-editor div#editor-container {
  display: block;
}

div.show-editor div#ft {
  display: none;
}

div.show-editor div#samples-container {
  bottom: 35px;
}

div.show-editor div.sample-block.flagged {
  border: solid 3px #FF0;
}

div#editor-container div.close-button {
  position: absolute;
  top: -12px;
  right: -12px;
  height: 24px;
  width: 24px;
  background: url(/images/close-button.png);
  cursor: pointer;
  z-index: 100;
}

div#editor {
  position: relative;
  width: 100%;
  height: 100%;
  color: #FFF;
  font-size: 11px;
}

div#editor div#sample-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
}

div#editor div#file-controls { 
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
}

div#editor button {
  width: 60px;
  display: block;
}

div#file-controls button {
  float: left;
}

div#editor div#editor-main-column {
  position: absolute;
  top: 0;
  left: 110px;
  right: 110px;
}

div#editor div.label-and-field {
  float: left;
  margin-right: 10px;
}

div#editor label,
div#editor input {
  display: block;
  width: 120px;
}

div#editor div.time-input label,
div#editor div.time-input input {
  width: 80px;
}

div#editor div.time-input input {
  text-align: right;
}

div#editor label {
  color: #FFF;
  font-size: 11px;
  padding-left: 3px;
}

div#editor input {
  color: #000;
  font-size: 12px;
  background-color: #FFF;
}

div#editor input.invalid {
  color: #000;
  font-size: 12px;
  background-color: #F99;
}


div#current-time-container {
  margin-top: 10px;
}

div#editor div#landing-text {
  font-size: 12px;
}

div#editor div#landing-text ul,
div#editor div#landing-text li {
  margin: 0px;
  line-height: 1.5em;
}

div#editor a#start-at-current,
div#editor a#end-at-current {
  cursor: pointer;
}