wyrian/js/libs/soundmanager/demo/mpc/css/mpc.css

/* Demo/example CSS - not needed for general use */

body {
 background:#000;
 font:normal 75% "helvetica neue",helvetica,verdana,arial,tahoma,"times new roman","sans serif";
 color:#fff;
 margin:0px;
 padding:0px;
}

#background {
 position:absolute;
 left:0px;
 top:0px;
 width:100%;
 height:100%;
 background:transparent url(http://farm1.static.flickr.com/45/191496680_97cdc5351b_b.jpg) no-repeat 50% 50%;
}

#site {
 position:relative;
 z-index:2;
 background:rgba(0,0,0,0.5);
 padding:1em;
}

#site h1 {
 margin-top:0px;
}

#site p {
 margin:0.5em 0px 0.5em 0px;
}

#site p:last-child {
 margin:0px;
}

.clear {
 float:none;
 clear:both;
 font-size:1px;
 line-height:1px;
 height:1px;
 overflow:hidden;
}

#mpc {
 position:absolute;
 left:50%;
 top:50%;
 margin-left:-19em;
 margin-top:-19em;
 width:38em;
 _width:37.3em;
 border:3px solid #666;
 border:3px solid rgba(255,255,255,0.25);
 -moz-border-radius:12px;
 -webkit-border-radius:12px;
 border-radius:12px;
 z-index:2;
}

#mpc #wrapper {
 position:relative;
 background:#333;
 background:rgba(0,0,0,0.5);
 padding:0.5em;
 -moz-border-radius:12px;
 -webkit-border-radius:12px;
 border-radius:12px;
}

#mpc ul {
 margin:0px;
 padding:0px;
 margin-left:2px;
 *margin-left:1em;
 _margin-left:2px;
 padding:2px 0px 2px 0px;
}

#mpc ul li {
 position:relative;
 float:left;
 display:inline;
 width:7em;
 height:7em;
 margin:0.5em;
 background:#999;
 border:1px solid rgba(0,0,0,0.75);
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 border-radius:2px;
 font:normal 1em/1em "helvetica",verdana,arial,system;
 padding:0.5em;
 cursor:pointer;
 cursor:hand;
 color:#eee;
 text-transform:uppercase;
 font-weight:bold;
}

#mpc ul li span {
 text-transform:none;
 font-weight:normal;
 color:#ccc;
}

#mpc ul li.active {
 background:#666;
}

#mpc ul li div {
 /* progress indicator */
 position:absolute;
 left:0px;
 bottom:1em;
 font-size:1em;
 line-height:1em;
 height:1em;
 margin:0px 0px 0px 1em;
 width:6em;
 background:#888 url(../image/progress.png) no-repeat -256px 0px;
 background-repeat:no-repeat;
 border:1px solid #666;
 visibility:hidden;
}

#mpc ul li.active div,
#mpc ul li.loading div {
 visibility:visible;
}

#soundmanager-debug {
 position:absolute;
 right:20px;
 bottom:20px;
 height:12em;
 width:50em;
 overflow:auto;
 margin-left:1em;
}

#soundmanager-debug div {
 font-size:11px;
 font-family: "lucida console",system,terminal,verdana,arial; /* IE doesn't seem to obey short-hand font family here? */
 padding:0px 1em 0.5em 0px;
}

#mpc-debug,
.note {
 color:#999;
}

#mpc-debug a,
.note a {
 color:#6699cc;
 text-decoration:none;
}

#isHTML5 {
 display:none;
}