/*
  <copyright file="MediaPlaylist.css" company="Microsoft">
    Copyright (C) Microsoft. All rights reserved.
  </copyright>
*/

/*Start : playlist*/

.media-playlist {
}

.media-playlist .media-playlist-empty {
    margin-left:30px;
}

.media-playlist .media-playlist-list {
    position:absolute;
    min-width:300px;
    overflow:auto;
    width:100%;
    top:0;
    height:100%;
}

.media-playlist-list .media-playlist-song {
    cursor:pointer;
    height:40px;
    width:100%;
}

.media-playlist-list .media-playlist-song div{
    display:inline-block;
	vertical-align:middle;

}

.media-playlist-list .media-playlist-song .indicator{
    width:16px;
    height:16px;
    margin-right:9px;
    margin-left:5px;
    top:8px;
    position:relative;
    overflow: hidden;
}

    .media-playlist-list .media-playlist-song .indicator img {
        display:none;
    }

    .media-playlist-list .media-playlist-song.media-nowplaying .indicator img.playing,
    .media-playlist-list .media-playlist-song.media-playerror .indicator img.error{
       display:inline-block;
    }

    .media-playlist-list .media-playlist-song.media-nowplaying.media-playerror .indicator img.playing{
       display:none;
    }

.media-playlist-list .media-playlist-song .indicator img.error{
    margin-left: -265px;
    margin-top: -132px;
}

.media-playlist-list .media-playlist-song .title{
    width:200px;
    max-width:200px;
    top:8px;
    margin-right:50px;
    position:relative;
}

.media-playlist-list .media-playlist-song .removeicon{
    height:20px;
    width:20px;
    top:8px;
    position:relative;
    overflow: hidden;
}
.media-playlist-list .media-playlist-song .removeicon:hover {
    height:20px;
    width:20px;
    top:8px;
    position:relative;
}
.media-playlist-list .media-playlist-song .removeicon:active {
    height:20px;
    width:20px;
    top:8px;
    position:relative;
}
.media-playlist-list .media-playlist-song .removeicon img {
    /*todo:change to the right icon*/
    margin-left: -204px;
    margin-top: -152px;
}
.media-playlist-list .media-playlist-song .removeicon:hover img {
    /*todo:change to the right icon*/
    margin-left: -228px;
    margin-top: -152px;
}
.media-playlist-list .media-playlist-song .removeicon:active img,
.media-playlist-list .media-playlist-song .removeicon img:active {
    /*todo:change to the right icon*/
    margin-left: -252px;
    margin-top: -152px;
}

.media-playlist-list .media-playlist-song:hover {
    background-color:#E6E6E6;
    background-color:rgba(205,205,205,0.5);
}

.media-playlist-list .media-playlist-song.media-nowplaying {
    background-color:#338EC9;
    background-color:rgba(0,114,188,0.8);
}

.media-playlist-list .media-playlist-song.media-playerror {
    /*todo:change to the right color*/
    color: #CCCCCC;
    color:rgba(205,205,205,0.8);
}

.media-playlist-list .media-playlist-song.media-playerror:hover {
    /*todo:change to the right color*/
    color: #CCCCCC;
    color:rgba(205,205,205,0.8);
    background-color: transparent;
}


/*End : playlist*/