/* Sticky footer styles */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 28px;
  padding-top: 0;
  /*background:rgb(129,175,177) !important;*/
}

#footer {
  margin-top:10px;
  width: 100%;
  height: 18px;
}

#footer p {
    font-size:12px;
}

.sp-jumbotron-custom-inverse {
  /*background-image: url(images/background.jpg);*/
}

#main {
    background-image: url(images/saxman.jpg);
}   

#playlists {
    display:none;
    font-size:18px;
}

#single-playlist {
    display:none;
}


@media screen and (min-width: 768px) {
  .sp-jumbotron-custom {
  }
}


.h1 {
  margin-bottom: 42px; /* (@padding-base-vertical * 7) */
}

.top {
    margin-top:66px;
    position:relative;
}

img {
  margin: 0 auto;
}

h3 {
  font-weight: 600; /* @font-weight-semibold */
  margin-top: 12px;
}


p {
  margin-bottom: 18px; /* a little more breathing room between feature tiles in mobile
view) */
}

@media screen and (min-width: 992px) {
  p {
    margin-bottom: 12px; /* reset to default */
  }
}

#info {
    font-size:32px;
}

#song-table {
  width:100%;
  background-color:#ffffff;
}

.fine-print {
  margin-bottom: 30px; /* (@padding-base-vertical * 5) */
}

#go {
    margin-bottom:20px;
}


#ttext {
    margin-top:20px;
    margin-bottom:30px;
    width: 80%;
    margin-left:auto;
    margin-right:auto;

}

#ttitle {
    color:white;
}

#jumbo-dialog {
    color:white;
    background: rgba(50,50,50, 0.3);
    border-radius:15px;
}


.hoverable {
    cursor: pointer;
}

#playlist-list {
  text-align: left
}
#playlist-list th {
  font-weight: bold
}

#min-bpm,#max-bpm {
  width:100px;
}

/* Loading spinner based on following stackoverflow answer:
    http://stackoverflow.com/questions/15982233/spinner-for-twitter-bootstrap-btn 
    http://jsfiddle.net/oshybystyi/v04ag5ch/4/ */

.has-spinner .fa-spinner {
  opacity: 0;
  max-width: 0;

  -webkit-transition: opacity 0.25s, max-width 0.45s; 
  -moz-transition: opacity 0.25s, max-width 0.45s;
  -o-transition: opacity 0.25s, max-width 0.45s;
  transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */
}

.has-spinner.active {
  cursor:progress;
}

.has-spinner.active .fa-spinner {
  opacity: 1;
  max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
}