@charset "utf-8";
/* CSS Document */
body{
margin: 0;
padding: 0;
background-image: url("grids.png");
}
a{
text-decoration: none;
color: inherit;
}
/* Music Player Defination*/
.pl-wrapper{
display: block;
position: relative;
}
.tp-sep{
display: block;
width: 100%;
height: 2px;
background:#1d1d1d;
border-bottom:  1px solid rgb(61, 60, 60);
}
.plDflwd{
width: 260px;
}
.pl-wrapper > header{
display: block;
width: 260px;
margin: 20px auto;
position: relative;
}
.pl-wrapper > header > h2.mu2hd{
font-size: 36px;
font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "Segoe UI Symbol", "Helvetica Neue", "Trebuchet MS", Arial;
font-weight: normal;
}
.pl-wrapper > section{
display: block;
position: relative;
margin: 20px 20px;
width: 100%;
}
.bbark{
background: #1d1d1d;
box-shadow: -6px 0 9px -4px rgba(0,0,0,.5),6px 0 9px -4px rgba(0,0,0,.5);
}
.minRght{
display: block;
position: absolute;
right: 0;
top: 0;
text-indent:-9999px;
height: 27px;
width: 27px;
}
.rtarr{
display: block;
background-image: url(images/ico-box.png);
cursor: pointer;
background-position: 0px -243px;
}
.pl-wrapper > header>div.minRght{
top: 15px;
}
.pl-wrapper > section.coverDt{
margin: 0px;
display: block;
background-color: #1d1d1d;
}
.c-pic{
display: block;
padding: 10px 0px;
margin: auto;
overflow: hidden;
}
.c-pic>img{
border: none;
margin: auto;
display: block;
max-width: 200px;
max-height: 150px;
padding: 1px;
box-shadow: -6px 0 9px -4px rgba(0,0,0,.5),6px 0 9px -4px rgba(0,0,0,.5);
}
.infohd{
display: block;
padding: 5px;
height: auto;
padding-bottom: 20px;
font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "Segoe UI Symbol", "Helvetica Neue", Arial;
}
.songLb{
display: block;
font-size: 12px;
color: #ddd;
font-weight: bold;
}
.subsgLb{
font-size: 12px;
}
.prvOf{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pl-wrapper > section.playerMain{
display: block;
position: relative;
background-color: #151515;
height: 100%;
margin: 0px;
overflow: hidden;
}
section.playerMain>.plTimer{
display: block;
background-color: #f9f9f9;
height: 2px;
position: relative;
}
section.playerMain>.plTime{
display: block;
text-align: right;
font-size: 10px;
padding: 2px 4px;
color: #ddd;
font-family: "Trebuchet MS";
}
section.playerMain>.plTime > i{
font-style: normal;
}
section.playerMain>.plTimer .plyLen{
display: block;
height: 2px;
position: relative;
width: 1%;
max-width: 100%;
background-color: #008DDE;
}
section.playerMain>.plNav{
display: block;
margin: 8px auto;
height: 42px;
position: relative;
max-width: 300px;
min-width: 300px;
}
section.playerMain>.plNav>div{
float: left;
display: block;
margin: 0px 10px;
text-indent: -999px;
cursor: pointer;
}
section.playerMain>.plNav>div.Pl-prev{
display: block;
background-image: url(images/player_bt.png);
background-position: 0 0;
height: 33px;
width: 23px;
position: relative;
top: 4px;
margin: 0 25px;
}
section.playerMain>.plNav>div.Pl-pause{
display: block;
background-image: url(images/player_bt.png);
background-position: -61px -10px;
height: 48px;
width: 45px;
margin: 0 45px;
}
section.playerMain>.plNav>div.pl-play{
background-position: -107px -80px;
}
section.playerMain>.plNav>div.Pl-next{
display: block;
background-image: url(images/player_bt.png);
background-position: -38px 0px;
height: 33px;
width: 23px;
position: relative;
top: 4px;
margin: 0 25px;
}
section.playerMain>.plNav>div.pl-sound{
float: none;
position: absolute;
height: 2px;
width: 50px;
background: #f9f9f9;
top: 22px;
left: 50px;
cursor: default;
overflow: hidden;
}
section.playerMain>.plNav>div.pl-sound>.pl-soundLevl{
background-color: #084e77;
height: 2px;
display: block;
position: relative;
max-width: 100%;
}
section.playerMain>.plNav>div.pl-soundBt{
color: #fff;
height: 20px;
width: 22px;
top: 12px;
left: 180px;
background: transparent;
}
.pl-fullsound{
display: block;
position: relative;
height: 20px;

width: 22px;
background-image: url(images/player_bt.png);
background-position: -157px -10px;
}
.pl-mute{
background-position: -178px -10px;
}
.pl-fullsoundbt{
position: absolute;
background: none;
width: 5px;
height: 6px;
top: 20px;
left: 96px;
cursor: default;
}
.hdr{
font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "Segoe UI Symbol", "Helvetica Neue", Arial;
font-size: 1.4em;
color: #000;
padding: 10px;
text-align: left;
}
.hlab{
font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "Segoe UI Symbol", "Helvetica Neue", Arial;
font-size: 2em;
color: #222;
text-align: center;
margin: 40px;
}
.hlab:hover{
color: #888;
}
.resv {
display: block;
background: #000;
padding: 30px;
color: #fff;
font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "Segoe UI Symbol", "Helvetica Neue", "Trebuchet MS", Arial;
}
.nav-bar{
display: block;
position: relative;
background: #e10b0b;
background: -webkit-linear-gradient(top,#e10b0b,#e10b0b);
background: linear-gradient(top,#e10b0b,#e10b0b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e10b0b,endColorstr=#e10b0b,GradientType=1);
padding: 2px;
border: 1px solid #dcdcdc;
border-color: rgba(0,0,0,0.1);
color: #fff!important;
font-size: 11px;
}
.nav-bar ul{
margin: 0;
padding: 0;
width: 990px;
margin: auto;
position: relative;
}
.nav-bar ul li{
float: left;
list-style: none;
margin: 0;
}
.nav-bar ul li a{
display: block;
color: #fff;
padding: 4px 7px;
font: bold 12px/23px Arial,sans-serif!important;
vertical-align: top;
}
.nav-bar ul li a:hover{
color: #17eddb;
}
.clear{
clear: both;
}
.social-media{
position: absolute;
top: 20px;
right: 20px;
}
.container{
display: block;
width: 990px;
margin: auto;
position: relative;
}
.main-cude{
font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "Segoe UI Symbol", "Helvetica Neue", Arial !important;
padding: 20px 10px;
}
.item-cont{
display: block;
margin: 0;
padding: 0;
}
.item-cont li{
display: block;
float: left;
padding: 5px 10px;
font-size: 16px;
color: #000;
width: 250px;
font-weight: bold;
}
.inline-pr{
display: inline-block;
width: 250px;
padding: 5px 10px;
}
.button-cart{
display: block;
background-color: #427fed;
border: none;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.1);
box-shadow: 0 1px 0 rgba(0,0,0,.1);
color: #fff;
font-family: Arial, Helvetica, sans-serif;
vertical-align: top;
padding: 4px 5px;
border-radius: 2px;
border: #2F6FE2 solid 1px;
width: 90px;
text-align:center;
}
.red-bt{
background-color: #dd4b39;
border: #CF4736 solid 1px;

}
.cart-a{
display: block;
position: absolute;
height: 25px;
background: url(../images/cart.png) right center no-repeat;
right: 0;
padding-right: 19px;
text-align: left;
top: 2px;
line-height: 25px;
font: bold 12px/25px Arial,sans-serif!important;
}
.msg{
text-align: center;
color: #dd4b39;
}