html {
    background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEFwoNK1O6XtQAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAKklEQVQI12NkgAAeBgT4woguwMDAwMCELsDAwMDDhC7AwMDAwIikEm4MAPDZBBRXeijgAAAAAElFTkSuQmCC) 0 0 repeat;
}
body {
    font-family: sans-serif;
    color: #333;
    margin:10px auto;
    width:960px;
    padding:10px;
    background:#fff;
    border:1px solid #ccc;
}

h1 {
    color: #666;
}

h2 {
    color : #888;
}

a {
    color: #57c;
}

.player {
    text-decoration: none;
    background: #333;
    background-image: -moz-linear-gradient(top, #333, #000);
    background-image: -webkit-linear-gradient(top, #333, #000);
    background-image: linear-gradient(top, #333, #000);
    color:#eee;
    text-shadow:-1px -1px #000;
    padding:0.2em 1em;
    width:50px;
    text-align:center;
    cursor:default;
    border-radius: 5px;
    font-size:x-large;
    box-shadow:0px 2px 2px #000;
}

.control {
    font-size:x-large;
    cursor:pointer;
    padding:0.2em 1em;
    border-radius: 5px;
    color:#eee;
    background: darkgreen;
    margin-right:0.1em;
    text-shadow:-1px -1px #000;
    box-shadow:0px 2px 2px #000;
/*    box-shadow:0px 1px 1px #000;*/
}

.playing {
   background: darkred;
/*   box-shadow:0px 5px 5px #000 inset;*/
}

ul,li {
    margin:0;
    padding:0;
}

li {
    list-style:none;
    margin-bottom:1em;
/*    font-size:x-large;*/
}

.state {
    font-size: smaller;
    line-height: normal;
    vertical-align: super;    
}