﻿body {
    background-color: #333;
    padding: 5px;
    margin: 0px;
    font-family: 'Montserrat',sans-serif;
    background-image: url(/resources/images/aluminium.jpg);
    background-size: cover;
    background-position: center;
}

.playercontainer {
    max-width: 900px;
    min-width: 320px;
    height: 40px;
    width: 100%;
    margin: 0px auto 0px auto;
}

.audioplayer {
}

.playbutton, .pausebutton, .trackname, .timeline, .audiotime, .skipback, .skipfwd, .back, .next, .trackselector, .volume, .shuffle {
    height: 36px;
    float: left;
    border: 2px solid #fff;
    margin-right: 3px;
    border-radius:20px;
    overflow:hidden;
    background-color:#f09;
}

.playbutton, .pausebutton, .skipback, .skipfwd, .back, .next, .volume,.shuffle  {
    width: 36px;
    background-size:75%;
    background-position:center center;
    background-repeat:no-repeat;
}

.playbutton{
    background-image:url(/resources/Images/player/play.png);

}
.pausebutton {
    background-image: url(/resources/Images/player/pause.png);
}
.skipback {
    background-image: url(/resources/Images/player/skipback.png);
}
.skipfwd {
    background-image: url(/resources/Images/player/skipfwd.png);
}
.back {
    background-image: url(/resources/Images/player/back.png);
}
.next {
    background-image: url(/resources/Images/player/next.png);
}
.shuffle {
    background-image: url(/resources/Images/player/shuffle.png);
}

.timeline {
    background-image: url(/resources/Images/player/timeline.png);
    background-repeat:initial;
    margin:0px 7px 0px 5px;
    background-size:initial;
    background-position:top left;
    height:40px;
}

.pobj
{
}

.hidden{
    display:none;
}

.trackselector
{
    padding-left:10px;
    padding-right:10px;
}

select{
    height:36px;
    background-color:#f09;
    border:0px;
    outline:0px;
    color:white;
    width:100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    box-sizing:content-box;
}

.audiotime{
    width:70px;
    text-align:center;
    font-size:12px;
    white-space:nowrap;
    color:white;
    line-height:16px;
    padding:2px 0px 2px 0px;
    height:32px;
}

.timeline{
    border:0px;
    border-radius:0px;
}

.time
{
    margin:10px 0px 10px 0px;
    height:20px;
    width:3px;
    background-color:white;
    border-radius:1px;
    float:left;
}