kid3player.css

/*! Track Pages */
html{
 -webkit-transition:.5s background;
 transition:.5s background;
 font-family: Helvetica, Arial, sans-serif, sans;
 font-size: 1em;
}
body, p{
 margin:0;
}
h1,
h2,
h3,
h4 {
 font-weight:bold;
 text-transform: uppercase;
}

b,
strong {
 font-weight:bold;
}
a:link,
a:visited,
a:hover,
a:active,
a:focus {
 text-decoration: none;
  -webkit-transition:.6s background;
  transition:.6s background;
}
a,
a:link,
a:visited {
 color: #fff;
 -webkit-transition-property: hover;
 -webkit-transition: color 0.15s ease-in-out;
 -moz-transition: color 0.15s linear 0s; /* firefox 4 */
 -o-transition-property: color; /* opera 10.5 */
 -o-transition-duration: 0.15s;
}
a:hover {
 color: rgba(0,0,0,0.9);
}
a:active {
 color: #f00;
}
#navigation {
 position: fixed; top:10px; left: 10px; z-index: 1000;
 width: 250px; height: 450px;padding: 10px;
 background-color: rgba(119,119,119,0.5);   
 text-align: center;
 border-radius: 125px ;
 opacity: .33;
 -webkit-transition-property: hover;
 -webkit-transition: opacity 0.7s ease-in-out;
 -moz-transition: opacity 0.7s linear 0s; /* firefox 4 */
 -o-transition-property: opacity; /* opera 10.5 */
 -o-transition-duration: 0.7s;
}
#navigation:hover {
 background-color: rgba(119,119,119,0.5); 
 opacity: 1;
 z-index: 10;
}
#lyrics {
 position: absolute; left:350px; top:60px; z-index: 1000;
 min-width:600px;
 padding: 0 .75em 200px .75em;
 margin-right:20%;
 background-color: rgba(0,0,0,0);   
 text-align: left;
 font-size: .85em;
 color: rgba(119,119,119,0);
 border-radius: 5px 5px 0 0 ;
 opacity: 1;
 -webkit-transition-property: hover;
 -webkit-transition: background-color 0.7s ease-in-out;
 -moz-transition: background-color 0.7s linear 0s; /* firefox 4 */
 -o-transition-property: background-color; /* opera 10.5 */
 -o-transition-duration: 0.7s;
}
#lyrics:hover {
 background-color: rgba(0,0,0,1); 
 opacity: .9;
 z-index: 10;
 color: rgba(119,119,119,.9);

}

.title{
 font-size:6em;
 line-height:.8em;
 letter-spacing:-.1em;
 color:rgba(119,119,119,0);
  text-shadow: 1px 0px 27px rgba(119, 119, 119,.2),
	    -1px 0px 27px rgba(119, 119, 119,.2),
             0px -1px 27px rgba(119, 119, 119,.2),
	     0px 1px 27px rgba(119, 119, 119,.2);
}
h1:hover {
  text-shadow: 1px 0px 0px rgba(119, 119, 119,.5),
	    -1px 0px 0px rgba(119, 119, 119,.5),
             0px -1px 0px rgba(119, 119, 119,.5),
	     0px 1px 0px rgba(119, 119, 119,.5);
 -webkit-transition-property: hover;
 -webkit-transition: text-shadow 0.7s ease-in-out;
 -moz-transition: text-shadow 0.7s linear 0s; /* firefox 4 */
 -o-transition-property: text-shadow; /* opera 10.5 */
 -o-transition-duration: 0.7s;
}
audio{
 position:fixed;
 right:0;
 bottom:0;
 min-width:100%;
 min-height:100%;
 width:100%;
 height:100%; 
 background:#777 no-repeat;
 background-size:cover;
 opacity:0;
 -webkit-transition:1s opacity;transition:1s opacity;
 display: block;
}
.stopfade{
 opacity:.7;
}
#mu_pause {
 font-weight: bold;
 line-height: 1em;
 font-size:3em;
 font-family: Helvetica, Arial, sans-serif;
 text-transform: uppercase;
 /* position: fixed;
 bottom: 30%;
 right: 40%; */
 display:block;
 width:250px;
 height: 250px;
 border-radius: 50%;
 border:none;
 background:rgba(119,119,119,1);
 cursor:pointer;
 -webkit-transition:.3s background;
 transition:.3s background;
 z-index: 10000;
  color: #fff;
}
#mu_pause:hover{
 background:rgba(0,0,0,.9);
 color: #777;
} 
/* ---- hide divs  ---- */
#abc,#ab {
    display: none;
    background-color: transparent;
}
/*show .ab*/
#download:hover ~ #ab {
    display: block;

}
/*show .abc*/
#trackdata:hover ~ #abc {
    display: block;
}

#download:hover ~ #a,
#trackdata:hover ~ #a{
    display: none;
}
#download,
#trackdata{
  text-transform: uppercase;
  font-weight: bold;
}

#a, #ab, #abc {
   position: fixed;
   bottom: 0px;
   right: 0px;
   width: 75%;
   height: 85%; text-align: left;
   font-size: .85em;
}

/* default */
#a{
   width: 1px;
   height: 1px;
}

/*  download  */
#ab {
    bottom:0; left:350px; top: 60px;
    width: 600px; padding: 17px;
    background-color: rgba(0, 0, 0, .9);
    opacity: 1;
    border-radius:4px;
    color: #777;
}

/*  trackdata  */
#abc{
    bottom:0; left:350px; top: 60px;
    width: 600px; padding: 17px;
    background-color: rgba(0, 0, 0, .9);
    opacity: 1;
    border-radius:4px;
    color: #777;
}
#tracktime {
 position: fixed; right: 10px; bottom:0px; 
 font-size: 12em; line-height:0.9em; letter-spacing: -0.1em; color: rgba(119,119,119,0);
 font-family: Helvetica, Arial, Sans-serif, Sans;
 font-weight: bold;
  text-shadow: 1px 0px 14px rgba(119, 119, 119,.5),
	    -1px 0px 14px rgba(119, 119, 119,.5),
             0px -1px 14px rgba(119, 119, 119,.5),
	     0px 1px 14px rgba(119, 119, 119,.5);
 z-index: 1000000;
}
.arrow {
 font-size: 2em;
 line-height: .9em;
}