/* Font Family
================================================== */

@import url("https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400");


/* Desktop
================================================== */

#mainwrap {
	height : 166px;
	overflow-y : scroll;
	overflow-x : hidden;
}

.container { 
	position: relative;
    z-index: 501;
    width: 270px;
    font: 20px/24px "Yanone Kaffeesatz", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #797979;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    font-weight: 300;
    top: 776px;
    left: 657px;
    opacity: 0.5;
    display: none;
    transition: 0.2s;
    transform: skew(0.7deg, -4.4deg);
}

.container:hover{
	transition : 0.2s;
	opacity : 1;
}

.column { width:inherit; }


/* CSS Reset
================================================== */

.container > div,span,h1,h6,p,a,ul,li,audio {
border:0;
font:inherit;
font-size:97%;
margin:0;
padding:0;
vertical-align:baseline;
}
ul { list-style:none;}


/* Basic Styles
================================================== */

* {
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-tap-highlight-color:transparent;
}

/* Misc.
================================================== */

.add-bottom { margin-bottom:20px !important; }
.left { float:left; }
.right { float:right; }
.center { text-align:center; }


/* Custom Styles
================================================== */

/* Highlight Styles */
::selection { background-color:#262223; color:#444; }


/* Default / Desktop / Firefox */
audio { margin-left:9px; width:250px; }
#audiowrap { background-color:#fafafa; margin:0 auto; }
#plwrap { margin:0 auto;}
#tracks { position:relative; text-align:center; }
#nowPlay { display:inline; }
#npTitle { margin:0; padding:3px; text-align:right; }
#npAction { padding:3px; position:absolute; }
#plList { margin:0;}
#plList li { background-color:#fafafa; cursor:pointer; display:block; margin:0; padding:3px 0;}
#plList li:hover { background-color:#eee; }
.plItem { position:relative; }
.plTitle { left:50px; overflow:hidden; position:absolute; right:65px; text-overflow:ellipsis; top:0; white-space:nowrap; }
.plNum { padding-left:10px; width:25px; }
.plLength { padding-left:21px; position:absolute; right:21px; top:0; }
.plSel,.plSel:hover { background-color:#eee!important; cursor:default!important; }
a[id^="btn"] { background-color:#fafafa; color:#5a5a5a;  cursor:pointer; display:inline-block; font-size:50px; margin:0; padding:3px 4px; text-decoration:none; }
a[id^="btn"]:last-child { margin-left:-4px; }
a[id^="btn"]:hover,a[id^="btn"]:active { background-color:#eee; }
a[id^="btn"]::-moz-focus-inner { border:0; padding:0; }