/*@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);*/

/*body { padding-top: 70px; }
*/
html, body {height:100%; margin:0; overflow:auto; padding-left: auto; padding-right: auto; }
header { position: fixed; width: 100%; height: 60px; top: 0; z-index: 100; vertical-align: middle;}
section {height:100%;  display:block; overflow:auto; -webkit-overflow-scrolling: touch;}
section .main {height:auto; margin-top: 60px; margin-bottom: 60px;}
.search {display: block; margin: auto; text-align: center; }
.tag { padding: auto; text-align: center; display: inline-block;}
div.inline {display: inline-block;}
/*div {margin: 0 auto; padding-left: auto; padding-right: auto;}*/
ul {list-style:none; width: auto;}
.looper  { margin: 5px; width: auto; padding: 10px; vertical-align: middle; display: inline;}
h3 {display: inline; vertical-align: middle; padding-left: 8px;}
h4 {display: inline; vertical-align: middle; padding-left: 8px; text-overflow: ellipsis; }
img {max-width:95%;height:auto; margin: 0 auto;}
div.playerDisplay {display: inline-block; padding-top: auto; padding-bottom: auto; vertical-align: middle; text-align: middle;}
.playerDisplay {vertical-align: middle; padding-left: 5px; padding-right: 5px; display: inline;}
div.info {width: 99%; margin: 0 auto; display: block;}
.center {display: block; margin: auto; text-align: center; }
.centerText {text-align: center;}
div.stop {height: 60px; text-align: left; vertical-align: middle;}
div.playing {height: 60px; text-align: left; vertical-align: middle;}
div.loadVisuals {height: 60px; text-align: left; vertical-align: middle;}
.row { padding: 10px; width: 500px; margin-left: auto; margin-right: auto; margin-top: 15px; margin-bottom: 10px; }
.loop {padding: 5px; vertical-align: middle;  }
hr {display: block; max-width: 500px; height: 2px;}
.truncate { width: 220px;  white-space: nowrap;  overflow: hidden; text-overflow: ellipsis; }
.jslider-pointer {width: 20; height: 40px; top: -23px;}

.jslider-value, .jslider-label-to, .jslider-label {visibility: hidden;}




.animate {
    animation-name: rotateThis;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation: rotateThis 0.5s infinite linear;    
    -webkit-animation: rotateThis 0.5s infinite linear;    
}

@keyframes rotateThis {
    from { transform: scale( 1 ) rotate( 0deg );   }
    to   { transform: scale( 1 ) rotate( 359deg ); }
}

@-webkit-keyframes rotateThis {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}

/* 
Spinner Css
*/

/*.spinner {
  margin: 1px auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
  display: none;
}

.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
*/

/* 
end Spinner Css
*/